@simplybusiness/mobius 5.3.1 → 5.5.0

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/components/Combobox/Combobox.css

@@ -0,0 +1,30 @@
+.mobius-combobox {
+  position: relative;
+}
+
+.mobius-combobox__list {
+  position: absolute;
+  margin: 0;
+  padding: 0;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-top: 0;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.mobius-combobox__option {
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+}
+
+.mobius-combobox__option:hover,
+.mobius-combobox__option--is-highlighted {
+  background-color: var(--color-primary);
+  color: var(--color-neutral-100);
+}

package/src/components/Combobox/Combobox.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Combobox, type ComboboxProps } from ".";
+import { FRUITS, FRUITS_OBJECTS } from "./fixtures";
+
+type StoryType = StoryObj<typeof Combobox>;
+
+const meta: Meta<typeof Combobox> = {
+  title: "Forms/Combobox",
+  component: Combobox,
+};
+
+export const Default: StoryType = {
+  render: (args: ComboboxProps) => <Combobox {...args} />,
+  args: {
+    options: FRUITS,
+  },
+};
+
+export const ObjectOptions: StoryType = {
+  render: (args: ComboboxProps) => <Combobox {...args} />,
+  args: {
+    options: FRUITS_OBJECTS,
+  },
+};
+
+export default meta;