@simplybusiness/mobius 5.3.1 → 5.4.0

package/src/components/Checkbox/CheckboxGroup.test.tsx

@@ -48,6 +48,18 @@ describe("CheckboxGroup", () => {
     expect(errorMessage).toBeInTheDocument();
   });
 
+  it("does not call onChange on initial render", () => {
+    const callback = jest.fn();
+
+    render(
+      <CheckboxGroup onChange={callback}>
+        <Checkbox label="Checkbox" value="value" />
+      </CheckboxGroup>,
+    );
+
+    expect(callback).not.toHaveBeenCalled();
+  });
+
   it("sets aria-describedby for all checkboxes when errorMessage is set", () => {
     const errorMessageText = "Error message";
 
@@ -393,7 +405,7 @@ describe("CheckboxGroup", () => {
 
       const { getByLabelText } = render(
         <CheckboxGroup isInvalid errorMessage="There is a problem">
-          <Checkbox label={optionText} value="value" />,
+          <Checkbox label={optionText} value="value" />
         </CheckboxGroup>,
       );
 
@@ -503,4 +515,98 @@ describe("CheckboxGroup", () => {
       expect(option).toHaveAttribute("readonly");
     });
   });
+
+  describe("last item disables", () => {
+    it("should disable all checkboxes except the last one when the last item is selected", async () => {
+      const option1Text = "Checkbox 1";
+      const option2Text = "Checkbox 2";
+      const option3Text = "Checkbox 3";
+      const option1Value = "value1";
+      const option2Value = "value2";
+      const option3Value = "value3";
+
+      render(
+        <CheckboxGroup lastItemDisables>
+          <Checkbox label={option1Text} value={option1Value} />
+          <Checkbox label={option2Text} value={option2Value} />
+          <Checkbox label={option3Text} value={option3Value} />
+        </CheckboxGroup>,
+      );
+
+      const option1 = screen.getByLabelText(option1Text);
+      const option2 = screen.getByLabelText(option2Text);
+      const option3 = screen.getByLabelText(option3Text);
+
+      await userEvent.click(option3);
+
+      expect(option1).toBeDisabled();
+      expect(option2).toBeDisabled();
+      expect(option3).not.toBeDisabled();
+    });
+
+    it("should unchecked all checkboxes except the last one when the last item is selected", async () => {
+      const option1Text = "Checkbox 1";
+      const option2Text = "Checkbox 2";
+      const option3Text = "Checkbox 3";
+      const option1Value = "value1";
+      const option2Value = "value2";
+      const option3Value = "value3";
+
+      render(
+        <CheckboxGroup lastItemDisables>
+          <Checkbox label={option1Text} value={option1Value} />
+          <Checkbox label={option2Text} value={option2Value} />
+          <Checkbox label={option3Text} value={option3Value} />
+        </CheckboxGroup>,
+      );
+
+      const option1 = screen.getByLabelText(option1Text);
+      const option2 = screen.getByLabelText(option2Text);
+      const option3 = screen.getByLabelText(option3Text);
+
+      await userEvent.click(option1);
+      await userEvent.click(option3);
+
+      expect(option1).not.toBeChecked();
+      expect(option2).not.toBeChecked();
+      expect(option3).toBeChecked();
+    });
+
+    it("should overwrite group value when last item is selected", async () => {
+      const callback = jest.fn();
+
+      const option1Text = "Checkbox 1";
+      const option2Text = "Checkbox 2";
+      const option3Text = "Checkbox 3";
+      const option1Value = "value1";
+      const option2Value = "value2";
+      const option3Value = "value3";
+
+      render(
+        <CheckboxGroup lastItemDisables onChange={callback}>
+          <Checkbox label={option1Text} value={option1Value} />
+          <Checkbox label={option2Text} value={option2Value} />
+          <Checkbox label={option3Text} value={option3Value} />
+        </CheckboxGroup>,
+      );
+
+      const option1 = screen.getByLabelText(option1Text);
+      const option2 = screen.getByLabelText(option2Text);
+      const option3 = screen.getByLabelText(option3Text);
+
+      await userEvent.click(option1);
+      await userEvent.click(option2);
+
+      expect(callback).toHaveBeenCalledWith([option1Value, option2Value]);
+
+      await userEvent.click(option3);
+
+      expect(callback).toHaveBeenCalledWith([option3Value]);
+
+      // Resets to empty array when last item unchecked again
+      await userEvent.click(option3);
+
+      expect(callback).toHaveBeenCalledWith([]);
+    });
+  });
 });

package/src/components/Checkbox/CheckboxGroup.tsx

@@ -1,28 +1,29 @@
 "use client";
 
+import classNames from "classnames/dedupe";
 import {
+  type ChangeEvent,
+  type ReactElement,
   Children,
-  forwardRef,
-  ReactElement,
   cloneElement,
+  forwardRef,
   isValidElement,
+  useEffect,
   useId,
-  ChangeEvent,
   useState,
-  useEffect,
 } from "react";
-import classNames from "classnames/dedupe";
+import { useRenderCount, useValidationClasses } from "../../hooks";
 import { ForwardedRefComponent } from "../../types/components";
+import { spaceDelimitedList } from "../../utils/spaceDelimitedList";
+import { ErrorMessage } from "../ErrorMessage";
+import { Label } from "../Label";
+import { Checkbox } from "./Checkbox";
 import {
   CheckboxElementType,
   CheckboxGroupElementType,
   CheckboxGroupProps,
   CheckboxGroupRef,
 } from "./types";
-import { Label } from "../Label";
-import { ErrorMessage } from "../ErrorMessage";
-import { spaceDelimitedList } from "../../utils/spaceDelimitedList";
-import { useValidationClasses } from "../../hooks";
 
 export const CheckboxGroup: ForwardedRefComponent<
   CheckboxGroupProps,
@@ -42,6 +43,7 @@ export const CheckboxGroup: ForwardedRefComponent<
     defaultValue = [],
     isReadOnly,
     itemsPerRow,
+    lastItemDisables = false,
     ...rest
   } = props;
   const [selected, setSelected] = useState<string[]>(defaultValue);
@@ -74,7 +76,10 @@ export const CheckboxGroup: ForwardedRefComponent<
   ]);
   const labelId = useId();
 
-  const handleChange = (event: ChangeEvent<CheckboxElementType>) => {
+  const handleChange = (
+    event: ChangeEvent<CheckboxElementType>,
+    isLastItem = false,
+  ) => {
     const {
       target: { value, checked },
     } = event;
@@ -83,16 +88,34 @@ export const CheckboxGroup: ForwardedRefComponent<
       setSelected(selected.filter(item => item !== value));
     }
 
+    if (checked && lastItemDisables && isLastItem) {
+      setSelected([value]);
+      return;
+    }
+
     if (checked) {
       setSelected([...selected, value]);
     }
   };
 
+  // HACK: This is a workaround to ensure that the onChange event is not
+  //       fired on the initial render.
+  const renderCount = useRenderCount();
   useEffect(() => {
-    if (onChange) {
+    if (onChange && renderCount > 1) {
       onChange(selected);
     }
-  }, [selected, onChange]);
+  }, [selected, onChange, renderCount]);
+
+  const childrenArray = Children.toArray(children);
+  const lastCheckbox = childrenArray
+    .filter(
+      child =>
+        isValidElement(child) && (child as ReactElement).type === Checkbox,
+    )
+    .pop() as ReactElement<CheckboxElementType> | undefined;
+  const lastCheckboxIsChecked =
+    lastCheckbox && selected.includes(lastCheckbox.props.value);
 
   return (
     <div
@@ -113,14 +136,21 @@ export const CheckboxGroup: ForwardedRefComponent<
         </Label>
       )}
       <div className="mobius-checkbox-group__wrapper">
-        {Children.map(children, child => {
+        {childrenArray.map(child => {
           if (isValidElement(child)) {
+            // lastItemDisables support
+            const isLastItem = child === lastCheckbox;
+            const isChildDisabled =
+              isDisabled ||
+              (lastItemDisables && lastCheckboxIsChecked && !isLastItem);
+
             return cloneElement(child as ReactElement, {
-              isDisabled,
+              isDisabled: isChildDisabled,
               isRequired,
               isReadOnly,
               isInvalid,
-              defaultSelected: selected.includes(child.props.value),
+              isLastItem,
+              selected: selected.includes(child.props.value),
               onChange: handleChange,
               "aria-describedby": describedBy,
             });

package/src/components/Checkbox/types.ts

@@ -19,7 +19,10 @@ export interface CheckboxProps
   value?: string;
   // Whether the input is disabled.
   isDisabled?: boolean;
-  onChange?: (event: ChangeEvent<CheckboxElementType>) => void;
+  onChange?: (
+    event: ChangeEvent<CheckboxElementType>,
+    isLastItem?: boolean,
+  ) => void;
   // The default value (uncontrolled).
   defaultSelected?: boolean;
   // Whether the input can be selected but not changed by the user.
@@ -33,17 +36,17 @@ export interface CheckboxProps
    */
   "aria-describedby"?: string;
   /**
-   * **Internal:** Do not use
+   * Whether the checkbox is the last item of a group.
    */
-  groupDisabled?: boolean;
+  isLastItem?: boolean;
   /**
    * **Internal:** Do not use
    */
-  selected?: string;
+  groupDisabled?: boolean;
   /**
-   * **Internal:** Do not use
+   * Whether the checkbox is selected.
    */
-  setSelected?: React.Dispatch<React.SetStateAction<string>>;
+  selected?: boolean;
 }
 
 export type CheckboxGroupElementType = HTMLDivElement;
@@ -81,6 +84,10 @@ interface CheckboxGroupPropsInternal
    * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#Value).
    */
   value?: string;
+  /**
+   * This determines if the last item in the group should disable the other items when selected.
+   */
+  lastItemDisables?: boolean;
 }
 
 interface HorizontalCheckboxGroupProps extends CheckboxGroupPropsInternal {

package/src/hooks/index.tsx

@@ -7,6 +7,7 @@ export * from "./useDialogPolyfill";
 export * from "./useLabel";
 export * from "./useOnClickOutside";
 export * from "./usePrefersReducedMotion";
+export * from "./useRenderCount";
 export * from "./useTextField";
 export * from "./useValidationClasses";
 export * from "./useWindowEvent";

package/src/hooks/useRenderCount/index.ts

@@ -0,0 +1 @@
+export * from "./useRenderCount";

package/src/hooks/useRenderCount/useRenderCount.test.ts

@@ -0,0 +1,26 @@
+import { renderHook } from "@testing-library/react";
+import { useRenderCount } from "./useRenderCount";
+
+describe("useRenderCount", () => {
+  it("should return 1 on initial render", () => {
+    const { result } = renderHook(() => useRenderCount());
+    expect(result.current).toBe(1);
+  });
+
+  it("should increment the count on re-render", () => {
+    const { result, rerender } = renderHook(() => useRenderCount());
+    expect(result.current).toBe(1);
+    rerender();
+    expect(result.current).toBe(2);
+    rerender();
+    expect(result.current).toBe(3);
+  });
+
+  it("should maintain the count across multiple renders", () => {
+    const { result, rerender } = renderHook(() => useRenderCount());
+    rerender();
+    rerender();
+    rerender();
+    expect(result.current).toBe(4);
+  });
+});

package/src/hooks/useRenderCount/useRenderCount.ts

@@ -0,0 +1,9 @@
+import { useEffect, useRef } from "react";
+
+export function useRenderCount() {
+  const count = useRef(1);
+  useEffect(() => {
+    count.current += 1;
+  });
+  return count.current;
+}