agroptima-design-system 0.25.3 → 0.25.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.25.3",
+  "version": "0.25.5",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",

package/src/atoms/Multiselect.tsx

@@ -79,6 +79,7 @@ export function Multiselect({
   function handleClear(event: React.MouseEvent<HTMLButtonElement>) {
     event.stopPropagation()
     setSelectedOptions([])
+    if (onChange !== undefined) onChange([])
   }
 
   return (

package/src/atoms/Select.tsx

@@ -78,6 +78,7 @@ export function Select({
   function handleClear(event: React.MouseEvent<HTMLButtonElement>) {
     event.stopPropagation()
     setSelectedOption(EMPTY_OPTION)
+    if (onChange !== undefined) onChange('')
   }
 
   return (

package/src/stories/Changelog.mdx

@@ -4,6 +4,11 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
+# 0.25.5
+
+* Call onChange after clearing Select and Multiselect components
+
+
 # 0.25.3
 
 * Add clear button to Select commponent

package/tests/Multiselect.spec.tsx

@@ -113,6 +113,7 @@ describe('Multiselect', () => {
     expect(getByText(/error2/i)).toBeInTheDocument()
   })
   it('clears options selected', async () => {
+    const mockChange = jest.fn()
     const user = userEvent.setup()
     const placeholder = 'Select your favourite videogames...'
     const { getByText } = render(
@@ -137,6 +138,7 @@ describe('Multiselect', () => {
         placeholder={placeholder}
         defaultValue={['2', '1']}
         selectedLabel="videogames selected"
+        onChange={mockChange}
         variant="primary"
       />,
     )
@@ -144,5 +146,6 @@ describe('Multiselect', () => {
     await user.click(screen.getByRole('button', { name: /close/i }))
 
     expect(getByText(placeholder)).toBeInTheDocument()
+    expect(mockChange).toHaveBeenCalledWith([])
   })
 })

package/tests/Select.spec.tsx

@@ -119,6 +119,7 @@ describe('Select', () => {
     expect(getByText(/error2/i)).toBeInTheDocument()
   })
   it('clears option selected', async () => {
+    const mockChange = jest.fn()
     const user = userEvent.setup()
     const placeholder = 'Select your favourite gaming system...'
     const { getByText } = render(
@@ -143,6 +144,7 @@ describe('Select', () => {
           },
         ]}
         placeholder={placeholder}
+        onChange={mockChange}
         variant="primary"
       />,
     )
@@ -150,5 +152,6 @@ describe('Select', () => {
     await user.click(screen.getByRole('button', { name: /close/i }))
 
     expect(getByText(placeholder)).toBeInTheDocument()
+    expect(mockChange).toHaveBeenCalledWith('')
   })
 })