diff --git a/packages/ocean-core/src/components/_chips.scss b/packages/ocean-core/src/components/_chips.scss index 618b8a50e..a37b02d57 100644 --- a/packages/ocean-core/src/components/_chips.scss +++ b/packages/ocean-core/src/components/_chips.scss @@ -81,6 +81,7 @@ padding: $spacing-inset-xxs 0; position: absolute; top: 38px; + width: auto; &--content { align-items: flex-start; @@ -95,14 +96,18 @@ &--content--columns-2 { display: grid; + grid-column-gap: 20px; grid-template-columns: repeat(2, 1fr); - width: 296px; + min-width: 296px; + width: auto; } &--content--columns-3 { display: grid; + grid-column-gap: 20px; grid-template-columns: repeat(3, 1fr); - width: 436px; + min-width: 436px; + width: auto; } &::-webkit-scrollbar { @@ -120,6 +125,7 @@ gap: $spacing-inline-xxs; min-height: 40px; padding: $spacing-stack-xxs 12px; + text-wrap: nowrap; width: 100%; } diff --git a/packages/ocean-react/src/Chips/Chips.tsx b/packages/ocean-react/src/Chips/Chips.tsx index 81cb603b9..eea382b63 100644 --- a/packages/ocean-react/src/Chips/Chips.tsx +++ b/packages/ocean-react/src/Chips/Chips.tsx @@ -18,6 +18,7 @@ interface IChips { initialCounter?: number; onClick?: () => void; onChange?: (value: ChipValue[] | ChipValue) => void; + onClose?: () => void; } const Chips: React.FunctionComponent = ({ @@ -32,6 +33,7 @@ const Chips: React.FunctionComponent = ({ initialCounter, onClick, onChange, + onClose, }) => { const wrapperRef = useRef(null); const [counter, setCounter] = React.useState(0); @@ -46,6 +48,8 @@ const Chips: React.FunctionComponent = ({ if (wrapperRef.current && !wrapperRef.current.contains(target)) { setSelectionIsOpen(false); } + + if (onClose) onClose(); } useEffect(() => { @@ -54,6 +58,7 @@ const Chips: React.FunctionComponent = ({ return () => { document.removeEventListener('mousedown', handleClickOutside); }; + // eslint-disable-next-line react-hooks/exhaustive-deps }, [wrapperRef]); const handleClickChips = () => { @@ -117,9 +122,7 @@ const Chips: React.FunctionComponent = ({ const filterOptions = () => { setSelectionIsOpen(false); - if (onChange) { - onChange(selectedOptions); - } + if (onClose) onClose(); }; return ( diff --git a/packages/ocean-react/src/Chips/__tests__/Chips.test.tsx b/packages/ocean-react/src/Chips/__tests__/Chips.test.tsx index 8f267fc6a..8536d8ca0 100644 --- a/packages/ocean-react/src/Chips/__tests__/Chips.test.tsx +++ b/packages/ocean-react/src/Chips/__tests__/Chips.test.tsx @@ -7,9 +7,14 @@ import Chips from '../Chips'; interface ISetup { handleClick?: () => void; handleChange?: () => void; + handleClose?: () => void; } -const multiChoiceSetup = ({ handleClick, handleChange }: ISetup) => { +const multiChoiceSetup = ({ + handleClick, + handleChange, + handleClose, +}: ISetup) => { const options = [ { label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' }, @@ -22,6 +27,7 @@ const multiChoiceSetup = ({ handleClick, handleChange }: ISetup) => { options={options} onClick={handleClick} onChange={handleChange} + onClose={handleClose} filterLabel="Test Filter" clearLabel="Test Clear" multiChoice @@ -184,19 +190,14 @@ describe('Chips', () => { }); test('checks filter options button', async () => { - const handleChange = jest.fn(); - multiChoiceSetup({ handleChange }); + const handleClose = jest.fn(); + multiChoiceSetup({ handleClose }); await clickInOption('Option 1'); fireEvent.click(screen.getByText('Test Filter')); - expect(handleChange).toHaveBeenCalledWith([ - { - label: 'Option 1', - value: '1', - }, - ]); + expect(handleClose).toHaveBeenCalledTimes(1); expect(() => screen.getByTestId('ods-chips-option')).toThrow( 'Unable to find an element' @@ -205,7 +206,8 @@ describe('Chips', () => { test('checks click outside', async () => { const handleClick = jest.fn(); - multiChoiceSetup({ handleClick }); + const handleClose = jest.fn(); + multiChoiceSetup({ handleClick, handleClose }); expect(handleClick).toHaveBeenCalled(); expect(screen.getByTestId('ods-chips-option')).toBeInTheDocument(); @@ -215,6 +217,7 @@ describe('Chips', () => { document.dispatchEvent(addEvent); }); + expect(handleClose).toHaveBeenCalledTimes(1); expect(() => screen.getByTestId('ods-chips-option')).toThrow( 'Unable to find an element' ); diff --git a/packages/ocean-react/src/Chips/stories/Chips.stories.mdx b/packages/ocean-react/src/Chips/stories/Chips.stories.mdx index 8b690a1df..4957ac418 100644 --- a/packages/ocean-react/src/Chips/stories/Chips.stories.mdx +++ b/packages/ocean-react/src/Chips/stories/Chips.stories.mdx @@ -70,6 +70,7 @@ If that's not sufficient, you can check the [implementation of the component](ht ], onClick: () => null, onChange: () => null, + onClose: () => null, }} argTypes={{ label: {