Merge branch 'develop' into MOON-407

Jahia · Dec 7, 2023 · cb24f71 · cb24f71
2 parents c34a619 + 9023b7f
commit cb24f71
Show file tree

Hide file tree

Showing 10 changed files with 47 additions and 25 deletions.
diff --git a/src/components/Checkbox/Checkbox.spec.js b/src/components/Checkbox/Checkbox.spec.js
@@ -17,13 +17,24 @@ describe('Checkbox', () => {
         expect(screen.getByRole('checkbox')).toHaveAttribute('data-custom', customAttribute);
     });
 
-    it('should call onChange function', () => {
-        const handleOnChange = jest.fn();
-        render(<Checkbox data-testid="moonstone-checkbox" onChange={event => handleOnChange(event)}/>);
+    it('should call onChange function with checked status', () => {
+        const handleOnChange = jest.fn((_, value, checked) => [value, checked]);
+        render(<Checkbox data-testid="moonstone-checkbox" value="my-value" onChange={handleOnChange}/>);
         const checkbox = screen.getByTestId('moonstone-checkbox');
 
         userEvent.click(checkbox);
         expect(handleOnChange).toHaveBeenCalled();
+        expect(handleOnChange).toHaveReturnedWith(['my-value', true]); // Checkbox has been checked
+    });
+
+    it('should call onChange function with checked status for controlled', () => {
+        const handleOnChange = jest.fn((_, value, checked) => [value, checked]);
+        render(<Checkbox checked data-testid="moonstone-checkbox" onChange={handleOnChange}/>);
+        const checkbox = screen.getByTestId('moonstone-checkbox');
+
+        userEvent.click(checkbox);
+        expect(handleOnChange).toHaveBeenCalled();
+        expect(handleOnChange).toHaveReturnedWith([undefined, false]); // Checkbox has been unchecked, no value specified
     });
 
     it('should check off when clicked on', () => {

diff --git a/src/components/Checkbox/Checkbox.types.ts b/src/components/Checkbox/Checkbox.types.ts
@@ -54,7 +54,7 @@ export type CheckboxProps = {
     /**
      * Function triggered on change of the checkbox value
      */
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: string, checked: boolean) => void;
 
     /**
      * Function triggered on focus of the checkbox value

diff --git a/src/components/Checkbox/ControlledCheckbox.tsx b/src/components/Checkbox/ControlledCheckbox.tsx
@@ -4,7 +4,7 @@ import {capitalize} from '~/utils/helpers';
 import {CheckboxProps} from './Checkbox.types';
 import './Checkbox.scss';
 
-export const ControlledCheckbox: React.FC<CheckboxProps> = ({className, checked = false, indeterminate = false, size = 'default', isDisabled, isReadOnly, ...props}) => {
+export const ControlledCheckbox: React.FC<CheckboxProps> = ({className, checked = false, indeterminate = false, size = 'default', isDisabled, isReadOnly, onChange, value, ...props}) => {
     const inputRef = useRef<HTMLInputElement>(null);
 
     return (
@@ -14,10 +14,12 @@ export const ControlledCheckbox: React.FC<CheckboxProps> = ({className, checked
                 ref={inputRef}
                 className={clsx('moonstone-checkbox_input', `moonstone-checkbox_size${capitalize(size)}`)}
                 type="checkbox"
+                value={value}
                 checked={checked}
                 disabled={isDisabled}
                 aria-readonly={isReadOnly}
                 aria-checked={indeterminate ? 'mixed' : checked}
+                onChange={ev => (typeof onChange === 'function') && onChange(ev, value, inputRef.current?.checked)}
             />
             <svg className={clsx('moonstone-checkbox_icon', `moonstone-checkbox_size${capitalize(size)}`)} viewBox="0 0 21 21">
                 { indeterminate ?

diff --git a/src/components/Checkbox/UncontrolledCheckbox.tsx b/src/components/Checkbox/UncontrolledCheckbox.tsx
@@ -3,17 +3,19 @@ import './Checkbox.scss';
 import {CheckboxProps} from './Checkbox.types';
 import {ControlledCheckbox} from '~/components/Checkbox/ControlledCheckbox';
 
-export const UncontrolledCheckbox: React.FC<CheckboxProps> = ({defaultChecked = false, onChange, ...props}) => {
+export const UncontrolledCheckbox: React.FC<CheckboxProps> = ({defaultChecked = false, onChange, value, ...props}) => {
     const [checked, setChecked] = useState(defaultChecked);
 
     return (
         <ControlledCheckbox
             {...props}
+            value={value}
             checked={checked}
             onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-                setChecked(!checked);
-                if (typeof onChange !== 'undefined') {
-                    onChange(event);
+                const toggleChecked = !checked;
+                setChecked(toggleChecked);
+                if (typeof onChange === 'function') {
+                    onChange(event, value, toggleChecked);
                 }
             }}
         />

diff --git a/src/components/CheckboxGroup/CheckboxGroup.spec.tsx b/src/components/CheckboxGroup/CheckboxGroup.spec.tsx
@@ -75,15 +75,21 @@ describe('CheckboxGroup', () => {
     });
 
     it('should call onChange function', () => {
-        const handleOnChange = jest.fn();
+        const handleOnChange = jest.fn((ev, value, checked) => [value, checked]);
         render(
-            <CheckboxGroup name="test-grouped-checkboxes" onChange={() => handleOnChange()}>
+            <CheckboxGroup name="test-grouped-checkboxes" onChange={handleOnChange}>
                 <CheckboxItem id="checkbox-01" label="checkbox 01" value="01"/>
-                <CheckboxItem id="checkbox-02" label="checkbox 02" value="02"/>
+                <CheckboxItem checked id="checkbox-02" label="checkbox 02" value="02"/>
             </CheckboxGroup>
         );
         userEvent.click(screen.getByLabelText('checkbox 01'));
+        expect(handleOnChange).toHaveBeenCalled();
+        expect(handleOnChange).toHaveReturnedWith(['01', true]);
+
         userEvent.click(screen.getByLabelText('checkbox 02'));
+        expect(handleOnChange).toHaveBeenCalled();
+        expect(handleOnChange).toHaveReturnedWith(['02', false]);
+
         expect(handleOnChange).toHaveBeenCalledTimes(2);
     });
 });
diff --git a/src/components/CheckboxGroup/CheckboxGroup.types.ts b/src/components/CheckboxGroup/CheckboxGroup.types.ts
@@ -20,7 +20,7 @@ export type CheckboxGroupProps = {
     /**
      * Function triggered on change of all CheckboxItems. That function is not replaced the onChange function set on a CheckboxItem, In that case both functions will be executed.
      */
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: string, checked: boolean) => void;
 
     /**
      * Whether the checkboxes should be disabled
@@ -42,7 +42,7 @@ export type CheckboxGroupContextProps = {
     /**
      * Function triggered on change of the checkboxes
      */
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: string, checked: boolean) => void;
 
     /**
      * Whether all CheckboxItems should be disabled

diff --git a/src/components/CheckboxGroup/CheckboxItem/CheckboxItem.types.ts b/src/components/CheckboxGroup/CheckboxItem/CheckboxItem.types.ts
@@ -64,5 +64,5 @@ export type CheckboxItemProps = {
     /**
      * Function triggered when the CheckboxItem changes state
      */
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: string, checked: boolean) => void;
 }
diff --git a/src/components/CheckboxGroup/CheckboxItem/ControlledCheckboxItem.tsx b/src/components/CheckboxGroup/CheckboxItem/ControlledCheckboxItem.tsx
@@ -30,13 +30,13 @@ export const ControlledCheckboxItem: React.FC<CheckboxItemProps> = ({className,
                     isReadOnly={isReadOnlyItem}
                     isDisabled={isDisabledItem}
                     name={nameItem}
-                    onChange={event => {
-                        if (typeof context?.onChange !== 'undefined') {
-                            context.onChange(event);
+                    onChange={(event, val, checked) => {
+                        if (typeof context?.onChange === 'function') {
+                            context.onChange(event, val, checked);
                         }
 
-                        if (typeof onChange !== 'undefined') {
-                            onChange(event);
+                        if (typeof onChange === 'function') {
+                            onChange(event, val, checked);
                         }
                     }}
                     {...props}

diff --git a/src/components/CheckboxGroup/CheckboxItem/UncontrolledCheckboxItem.tsx b/src/components/CheckboxGroup/CheckboxItem/UncontrolledCheckboxItem.tsx
@@ -9,11 +9,11 @@ export const UncontrolledCheckboxItem: React.FC<CheckboxItemProps> = ({defaultCh
         <ControlledCheckboxItem
             {...props}
             checked={checked}
-            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-                setChecked(!checked);
-
-                if (typeof onChange !== 'undefined') {
-                    onChange(event);
+            onChange={(event: React.ChangeEvent<HTMLInputElement>, value: string) => {
+                const toggleChecked = !checked;
+                setChecked(toggleChecked);
+                if (typeof onChange === 'function') {
+                    onChange(event, value, toggleChecked);
                 }
             }}
         />

diff --git a/src/components/CheckboxGroup/index.ts b/src/components/CheckboxGroup/index.ts
@@ -1 +1,2 @@
 export * from './CheckboxGroup';
+export * from './CheckboxItem/CheckboxItem';
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export * from './CheckboxGroup';
		export * from './CheckboxItem/CheckboxItem';