@simplybusiness/mobius 5.3.1 → 5.5.0

package/dist/esm/components/Checkbox/Checkbox.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useRef, useState, useId } from "react";
+import { forwardRef, useRef, useId, useState, useEffect } from "react";
 import classNames from "classnames/dedupe";
 import { squareTick, square } from "@simplybusiness/icons";
 import { ErrorMessage } from "../ErrorMessage";
@@ -9,18 +9,27 @@ import { useValidationClasses } from "../../hooks";
 import { Icon } from "../Icon";
 import { Stack } from "../Stack";
 export const Checkbox = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { id, label, isDisabled, isRequired, validationState, isInvalid, onChange, className, errorMessage, defaultSelected = false, isReadOnly, name, value, ["aria-describedby"]: ariaDescribedBy, ...rest } = props;
-    const [selected, setSelected] = useState(defaultSelected);
+    const { id, label, isDisabled, isRequired, validationState, isInvalid, onChange, className, errorMessage, selected, defaultSelected = false, isReadOnly, isLastItem, name, value, ["aria-describedby"]: ariaDescribedBy, ...rest } = props;
+    const [checked, setChecked] = useState(defaultSelected);
     const fallbackRef = useRef(null);
     const refObj = ref || fallbackRef;
     const inputId = useId();
+    const isControlled = typeof selected === "boolean";
+    useEffect(()=>{
+        if (isControlled) {
+            setChecked(selected);
+        }
+    }, [
+        selected,
+        isControlled
+    ]);
     const validationClasses = useValidationClasses({
         validationState,
         isInvalid
     });
     const sharedClasses = classNames({
         "--is-disabled": isDisabled,
-        "--is-selected": selected,
+        "--is-selected": checked,
         "--is-required": typeof isRequired === "boolean" && isRequired,
         "--is-optional": typeof isRequired === "boolean" && !isRequired
     }, validationClasses);
@@ -36,23 +45,10 @@ export const Checkbox = /*#__PURE__*/ forwardRef((props, ref)=>{
         ariaDescribedBy
     ]);
     const labelId = useId();
-    const toggleState = ()=>{
-        setSelected(!selected);
-    };
-    const handleClick = (event)=>{
-        const isMouseEvent = event.clientX;
-        if (isMouseEvent) {
-            toggleState();
-        }
-    };
     const handleChange = (event)=>{
+        setChecked(!checked);
         if (onChange) {
-            onChange(event);
-        }
-    };
-    const handleKeyDown = (event)=>{
-        if (event.code === "Space") {
-            toggleState();
+            onChange(event, isLastItem);
         }
     };
     return /*#__PURE__*/ _jsxs(Stack, {
@@ -71,11 +67,9 @@ export const Checkbox = /*#__PURE__*/ forwardRef((props, ref)=>{
                         disabled: isDisabled,
                         ref: refObj,
                         className: inputClasses,
-                        onClick: handleClick,
                         onChange: handleChange,
-                        onKeyDown: handleKeyDown,
                         type: "checkbox",
-                        defaultChecked: defaultSelected,
+                        checked: checked,
                         required: isRequired,
                         id: id || inputId,
                         name: name,
@@ -83,7 +77,7 @@ export const Checkbox = /*#__PURE__*/ forwardRef((props, ref)=>{
                         ...rest
                     }),
                     /*#__PURE__*/ _jsx(Icon, {
-                        icon: selected ? squareTick : square,
+                        icon: checked ? squareTick : square,
                         size: "md",
                         className: iconClasses
                     }),

package/dist/esm/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  ChangeEvent,\n  forwardRef,\n  useRef,\n  useState,\n  KeyboardEvent,\n  MouseEvent,\n  useId,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { squareTick, square } from \"@simplybusiness/icons\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { CheckboxElementType, CheckboxProps, CheckboxRef } from \"./types\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { useValidationClasses } from \"../../hooks\";\nimport { Icon } from \"../Icon\";\nimport { Stack } from \"../Stack\";\n\nexport const Checkbox: ForwardedRefComponent<\n  CheckboxProps,\n  CheckboxElementType\n> = forwardRef((props: CheckboxProps, ref: CheckboxRef) => {\n  const {\n    id,\n    label,\n    isDisabled,\n    isRequired,\n    validationState,\n    isInvalid,\n    onChange,\n    className,\n    errorMessage,\n    defaultSelected = false,\n    isReadOnly,\n    name,\n    value,\n    [\"aria-describedby\"]: ariaDescribedBy,\n    ...rest\n  } = props;\n  const [selected, setSelected] = useState<boolean>(defaultSelected);\n  const fallbackRef = useRef<HTMLInputElement>(null);\n  const refObj = ref || fallbackRef;\n  const inputId = useId();\n  const validationClasses = useValidationClasses({\n    validationState,\n    isInvalid,\n  });\n  const sharedClasses = classNames(\n    {\n      \"--is-disabled\": isDisabled,\n      \"--is-selected\": selected,\n      \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n      \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n    },\n    validationClasses,\n  );\n  // Append an additional wrapper class name to differenitate from input\n  const wrapperClasses = classNames(\n    \"mobius\",\n    \"mobius-checkbox\",\n    sharedClasses,\n    className,\n  );\n  const labelClasses = classNames(\"mobius-checkbox__label\", sharedClasses);\n  const inputClasses = classNames(\"mobius-checkbox__input\", sharedClasses);\n  const iconClasses = classNames(\"mobius-checkbox__icon\", sharedClasses);\n  const errorMessageId = useId();\n  const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n  const describedBy = spaceDelimitedList([\n    shouldErrorMessageShow,\n    ariaDescribedBy,\n  ]);\n  const labelId = useId();\n\n  const toggleState = () => {\n    setSelected(!selected);\n  };\n\n  const handleClick = (event: MouseEvent<CheckboxElementType>) => {\n    const isMouseEvent = event.clientX;\n\n    if (isMouseEvent) {\n      toggleState();\n    }\n  };\n\n  const handleChange = (event: ChangeEvent<CheckboxElementType>) => {\n    if (onChange) {\n      onChange(event);\n    }\n  };\n\n  const handleKeyDown = (event: KeyboardEvent) => {\n    if (event.code === \"Space\") {\n      toggleState();\n    }\n  };\n\n  return (\n    <Stack gap=\"xs\" className={wrapperClasses}>\n      <label className={labelClasses}>\n        <input\n          aria-describedby={describedBy}\n          aria-errormessage={shouldErrorMessageShow}\n          aria-invalid={isInvalid}\n          aria-labelledby={labelId}\n          readOnly={isReadOnly}\n          disabled={isDisabled}\n          ref={refObj}\n          className={inputClasses}\n          onClick={handleClick}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          type=\"checkbox\"\n          defaultChecked={defaultSelected}\n          required={isRequired}\n          id={id || inputId}\n          name={name}\n          value={value}\n          {...rest}\n        />\n        <Icon\n          icon={selected ? squareTick : square}\n          size=\"md\"\n          className={iconClasses}\n        />\n        <span id={labelId} className=\"mobius-checkbox__visible-label\">\n          {label}\n        </span>\n      </label>\n      <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n    </Stack>\n  );\n});\n"],"names":["forwardRef","useRef","useState","useId","classNames","squareTick","square","ErrorMessage","spaceDelimitedList","useValidationClasses","Icon","Stack","Checkbox","props","ref","id","label","isDisabled","isRequired","validationState","isInvalid","onChange","className","errorMessage","defaultSelected","isReadOnly","name","value","ariaDescribedBy","rest","selected","setSelected","fallbackRef","refObj","inputId","validationClasses","sharedClasses","wrapperClasses","labelClasses","inputClasses","iconClasses","errorMessageId","shouldErrorMessageShow","undefined","describedBy","labelId","toggleState","handleClick","event","isMouseEvent","clientX","handleChange","handleKeyDown","code","gap","input","aria-describedby","aria-errormessage","aria-invalid","aria-labelledby","readOnly","disabled","onClick","onKeyDown","type","defaultChecked","required","icon","size","span"],"mappings":"AAAA;;AAEA,SAEEA,UAAU,EACVC,MAAM,EACNC,QAAQ,EAGRC,KAAK,QACA,QAAQ;AACf,OAAOC,gBAAgB,oBAAoB;AAC3C,SAASC,UAAU,EAAEC,MAAM,QAAQ,wBAAwB;AAC3D,SAASC,YAAY,QAAQ,kBAAkB;AAG/C,SAASC,kBAAkB,QAAQ,iCAAiC;AACpE,SAASC,oBAAoB,QAAQ,cAAc;AACnD,SAASC,IAAI,QAAQ,UAAU;AAC/B,SAASC,KAAK,QAAQ,WAAW;AAEjC,OAAO,MAAMC,yBAGTZ,WAAW,CAACa,OAAsBC;IACpC,MAAM,EACJC,EAAE,EACFC,KAAK,EACLC,UAAU,EACVC,UAAU,EACVC,eAAe,EACfC,SAAS,EACTC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZC,kBAAkB,KAAK,EACvBC,UAAU,EACVC,IAAI,EACJC,KAAK,EACL,CAAC,mBAAmB,EAAEC,eAAe,EACrC,GAAGC,MACJ,GAAGhB;IACJ,MAAM,CAACiB,UAAUC,YAAY,GAAG7B,SAAkBsB;IAClD,MAAMQ,cAAc/B,OAAyB;IAC7C,MAAMgC,SAASnB,OAAOkB;IACtB,MAAME,UAAU/B;IAChB,MAAMgC,oBAAoB1B,qBAAqB;QAC7CU;QACAC;IACF;IACA,MAAMgB,gBAAgBhC,WACpB;QACE,iBAAiBa;QACjB,iBAAiBa;QACjB,iBAAiB,OAAOZ,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD,GACAiB;IAEF,sEAAsE;IACtE,MAAME,iBAAiBjC,WACrB,UACA,mBACAgC,eACAd;IAEF,MAAMgB,eAAelC,WAAW,0BAA0BgC;IAC1D,MAAMG,eAAenC,WAAW,0BAA0BgC;IAC1D,MAAMI,cAAcpC,WAAW,yBAAyBgC;IACxD,MAAMK,iBAAiBtC;IACvB,MAAMuC,yBAAyBnB,eAAekB,iBAAiBE;IAC/D,MAAMC,cAAcpC,mBAAmB;QACrCkC;QACAd;KACD;IACD,MAAMiB,UAAU1C;IAEhB,MAAM2C,cAAc;QAClBf,YAAY,CAACD;IACf;IAEA,MAAMiB,cAAc,CAACC;QACnB,MAAMC,eAAeD,MAAME,OAAO;QAElC,IAAID,cAAc;YAChBH;QACF;IACF;IAEA,MAAMK,eAAe,CAACH;QACpB,IAAI3B,UAAU;YACZA,SAAS2B;QACX;IACF;IAEA,MAAMI,gBAAgB,CAACJ;QACrB,IAAIA,MAAMK,IAAI,KAAK,SAAS;YAC1BP;QACF;IACF;IAEA,qBACE,MAACnC;QAAM2C,KAAI;QAAKhC,WAAWe;;0BACzB,MAACrB;gBAAMM,WAAWgB;;kCAChB,KAACiB;wBACCC,oBAAkBZ;wBAClBa,qBAAmBf;wBACnBgB,gBAActC;wBACduC,mBAAiBd;wBACjBe,UAAUnC;wBACVoC,UAAU5C;wBACVH,KAAKmB;wBACLX,WAAWiB;wBACXuB,SAASf;wBACT1B,UAAU8B;wBACVY,WAAWX;wBACXY,MAAK;wBACLC,gBAAgBzC;wBAChB0C,UAAUhD;wBACVH,IAAIA,MAAMmB;wBACVR,MAAMA;wBACNC,OAAOA;wBACN,GAAGE,IAAI;;kCAEV,KAACnB;wBACCyD,MAAMrC,WAAWzB,aAAaC;wBAC9B8D,MAAK;wBACL9C,WAAWkB;;kCAEb,KAAC6B;wBAAKtD,IAAI8B;wBAASvB,WAAU;kCAC1BN;;;;0BAGL,KAACT;gBAAaQ,IAAI0B;gBAAgBlB,cAAcA;;;;AAGtD,GAAG"}
+{"version":3,"sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  ChangeEvent,\n  forwardRef,\n  useRef,\n  useId,\n  useState,\n  useEffect,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { squareTick, square } from \"@simplybusiness/icons\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { CheckboxElementType, CheckboxProps, CheckboxRef } from \"./types\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { useValidationClasses } from \"../../hooks\";\nimport { Icon } from \"../Icon\";\nimport { Stack } from \"../Stack\";\n\nexport const Checkbox: ForwardedRefComponent<\n  CheckboxProps,\n  CheckboxElementType\n> = forwardRef((props: CheckboxProps, ref: CheckboxRef) => {\n  const {\n    id,\n    label,\n    isDisabled,\n    isRequired,\n    validationState,\n    isInvalid,\n    onChange,\n    className,\n    errorMessage,\n    selected,\n    defaultSelected = false,\n    isReadOnly,\n    isLastItem,\n    name,\n    value,\n    [\"aria-describedby\"]: ariaDescribedBy,\n    ...rest\n  } = props;\n  const [checked, setChecked] = useState<boolean>(defaultSelected);\n  const fallbackRef = useRef<HTMLInputElement>(null);\n  const refObj = ref || fallbackRef;\n  const inputId = useId();\n\n  const isControlled = typeof selected === \"boolean\";\n  useEffect(() => {\n    if (isControlled) {\n      setChecked(selected);\n    }\n  }, [selected, isControlled]);\n\n  const validationClasses = useValidationClasses({\n    validationState,\n    isInvalid,\n  });\n  const sharedClasses = classNames(\n    {\n      \"--is-disabled\": isDisabled,\n      \"--is-selected\": checked,\n      \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n      \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n    },\n    validationClasses,\n  );\n  // Append an additional wrapper class name to differenitate from input\n  const wrapperClasses = classNames(\n    \"mobius\",\n    \"mobius-checkbox\",\n    sharedClasses,\n    className,\n  );\n  const labelClasses = classNames(\"mobius-checkbox__label\", sharedClasses);\n  const inputClasses = classNames(\"mobius-checkbox__input\", sharedClasses);\n  const iconClasses = classNames(\"mobius-checkbox__icon\", sharedClasses);\n  const errorMessageId = useId();\n  const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n  const describedBy = spaceDelimitedList([\n    shouldErrorMessageShow,\n    ariaDescribedBy,\n  ]);\n  const labelId = useId();\n\n  const handleChange = (event: ChangeEvent<CheckboxElementType>) => {\n    setChecked(!checked);\n    if (onChange) {\n      onChange(event, isLastItem);\n    }\n  };\n\n  return (\n    <Stack gap=\"xs\" className={wrapperClasses}>\n      <label className={labelClasses}>\n        <input\n          aria-describedby={describedBy}\n          aria-errormessage={shouldErrorMessageShow}\n          aria-invalid={isInvalid}\n          aria-labelledby={labelId}\n          readOnly={isReadOnly}\n          disabled={isDisabled}\n          ref={refObj}\n          className={inputClasses}\n          onChange={handleChange}\n          type=\"checkbox\"\n          checked={checked}\n          required={isRequired}\n          id={id || inputId}\n          name={name}\n          value={value}\n          {...rest}\n        />\n        <Icon\n          icon={checked ? squareTick : square}\n          size=\"md\"\n          className={iconClasses}\n        />\n        <span id={labelId} className=\"mobius-checkbox__visible-label\">\n          {label}\n        </span>\n      </label>\n      <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n    </Stack>\n  );\n});\n"],"names":["forwardRef","useRef","useId","useState","useEffect","classNames","squareTick","square","ErrorMessage","spaceDelimitedList","useValidationClasses","Icon","Stack","Checkbox","props","ref","id","label","isDisabled","isRequired","validationState","isInvalid","onChange","className","errorMessage","selected","defaultSelected","isReadOnly","isLastItem","name","value","ariaDescribedBy","rest","checked","setChecked","fallbackRef","refObj","inputId","isControlled","validationClasses","sharedClasses","wrapperClasses","labelClasses","inputClasses","iconClasses","errorMessageId","shouldErrorMessageShow","undefined","describedBy","labelId","handleChange","event","gap","input","aria-describedby","aria-errormessage","aria-invalid","aria-labelledby","readOnly","disabled","type","required","icon","size","span"],"mappings":"AAAA;;AAEA,SAEEA,UAAU,EACVC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRC,SAAS,QACJ,QAAQ;AACf,OAAOC,gBAAgB,oBAAoB;AAC3C,SAASC,UAAU,EAAEC,MAAM,QAAQ,wBAAwB;AAC3D,SAASC,YAAY,QAAQ,kBAAkB;AAG/C,SAASC,kBAAkB,QAAQ,iCAAiC;AACpE,SAASC,oBAAoB,QAAQ,cAAc;AACnD,SAASC,IAAI,QAAQ,UAAU;AAC/B,SAASC,KAAK,QAAQ,WAAW;AAEjC,OAAO,MAAMC,yBAGTb,WAAW,CAACc,OAAsBC;IACpC,MAAM,EACJC,EAAE,EACFC,KAAK,EACLC,UAAU,EACVC,UAAU,EACVC,eAAe,EACfC,SAAS,EACTC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZC,QAAQ,EACRC,kBAAkB,KAAK,EACvBC,UAAU,EACVC,UAAU,EACVC,IAAI,EACJC,KAAK,EACL,CAAC,mBAAmB,EAAEC,eAAe,EACrC,GAAGC,MACJ,GAAGlB;IACJ,MAAM,CAACmB,SAASC,WAAW,GAAG/B,SAAkBuB;IAChD,MAAMS,cAAclC,OAAyB;IAC7C,MAAMmC,SAASrB,OAAOoB;IACtB,MAAME,UAAUnC;IAEhB,MAAMoC,eAAe,OAAOb,aAAa;IACzCrB,UAAU;QACR,IAAIkC,cAAc;YAChBJ,WAAWT;QACb;IACF,GAAG;QAACA;QAAUa;KAAa;IAE3B,MAAMC,oBAAoB7B,qBAAqB;QAC7CU;QACAC;IACF;IACA,MAAMmB,gBAAgBnC,WACpB;QACE,iBAAiBa;QACjB,iBAAiBe;QACjB,iBAAiB,OAAOd,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD,GACAoB;IAEF,sEAAsE;IACtE,MAAME,iBAAiBpC,WACrB,UACA,mBACAmC,eACAjB;IAEF,MAAMmB,eAAerC,WAAW,0BAA0BmC;IAC1D,MAAMG,eAAetC,WAAW,0BAA0BmC;IAC1D,MAAMI,cAAcvC,WAAW,yBAAyBmC;IACxD,MAAMK,iBAAiB3C;IACvB,MAAM4C,yBAAyBtB,eAAeqB,iBAAiBE;IAC/D,MAAMC,cAAcvC,mBAAmB;QACrCqC;QACAf;KACD;IACD,MAAMkB,UAAU/C;IAEhB,MAAMgD,eAAe,CAACC;QACpBjB,WAAW,CAACD;QACZ,IAAIX,UAAU;YACZA,SAAS6B,OAAOvB;QAClB;IACF;IAEA,qBACE,MAAChB;QAAMwC,KAAI;QAAK7B,WAAWkB;;0BACzB,MAACxB;gBAAMM,WAAWmB;;kCAChB,KAACW;wBACCC,oBAAkBN;wBAClBO,qBAAmBT;wBACnBU,gBAAcnC;wBACdoC,mBAAiBR;wBACjBS,UAAU/B;wBACVgC,UAAUzC;wBACVH,KAAKqB;wBACLb,WAAWoB;wBACXrB,UAAU4B;wBACVU,MAAK;wBACL3B,SAASA;wBACT4B,UAAU1C;wBACVH,IAAIA,MAAMqB;wBACVR,MAAMA;wBACNC,OAAOA;wBACN,GAAGE,IAAI;;kCAEV,KAACrB;wBACCmD,MAAM7B,UAAU3B,aAAaC;wBAC7BwD,MAAK;wBACLxC,WAAWqB;;kCAEb,KAACoB;wBAAKhD,IAAIiC;wBAAS1B,WAAU;kCAC1BN;;;;0BAGL,KAACT;gBAAaQ,IAAI6B;gBAAgBrB,cAAcA;;;;AAGtD,GAAG"}

package/dist/esm/components/Checkbox/CheckboxGroup.js

@@ -1,13 +1,14 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, forwardRef, cloneElement, isValidElement, useId, useState, useEffect } from "react";
 import classNames from "classnames/dedupe";
-import { Label } from "../Label";
-import { ErrorMessage } from "../ErrorMessage";
+import { Children, cloneElement, forwardRef, isValidElement, useEffect, useId, useState } from "react";
+import { useRenderCount, useValidationClasses } from "../../hooks";
 import { spaceDelimitedList } from "../../utils/spaceDelimitedList";
-import { useValidationClasses } from "../../hooks";
+import { ErrorMessage } from "../ErrorMessage";
+import { Label } from "../Label";
+import { Checkbox } from "./Checkbox";
 export const CheckboxGroup = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { label, isDisabled = false, isRequired, validationState, isInvalid, orientation = "vertical", onChange, className, errorMessage, children, defaultValue = [], isReadOnly, itemsPerRow, ...rest } = props;
+    const { label, isDisabled = false, isRequired, validationState, isInvalid, orientation = "vertical", onChange, className, errorMessage, children, defaultValue = [], isReadOnly, itemsPerRow, lastItemDisables = false, ...rest } = props;
     const [selected, setSelected] = useState(defaultValue);
     const checkboxGroupClasses = classNames("mobius", "mobius-checkbox-group", className, {
         "--is-horizontal": orientation === "horizontal",
@@ -29,11 +30,17 @@ export const CheckboxGroup = /*#__PURE__*/ forwardRef((props, ref)=>{
         props["aria-describedby"]
     ]);
     const labelId = useId();
-    const handleChange = (event)=>{
+    const handleChange = (event, isLastItem = false)=>{
         const { target: { value, checked } } = event;
         if (!checked) {
             setSelected(selected.filter((item)=>item !== value));
         }
+        if (checked && lastItemDisables && isLastItem) {
+            setSelected([
+                value
+            ]);
+            return;
+        }
         if (checked) {
             setSelected([
                 ...selected,
@@ -41,14 +48,21 @@ export const CheckboxGroup = /*#__PURE__*/ forwardRef((props, ref)=>{
             ]);
         }
     };
+    // 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
+        onChange,
+        renderCount
     ]);
+    const childrenArray = Children.toArray(children);
+    const lastCheckbox = childrenArray.filter((child)=>/*#__PURE__*/ isValidElement(child) && child.type === Checkbox).pop();
+    const lastCheckboxIsChecked = lastCheckbox && selected.includes(lastCheckbox.props.value);
     return /*#__PURE__*/ _jsxs("div", {
         ...rest,
         "aria-labelledby": props["aria-labelledby"] || labelId,
@@ -67,14 +81,18 @@ export const CheckboxGroup = /*#__PURE__*/ forwardRef((props, ref)=>{
             }),
             /*#__PURE__*/ _jsx("div", {
                 className: "mobius-checkbox-group__wrapper",
-                children: Children.map(children, (child)=>{
+                children: childrenArray.map((child)=>{
                     if (/*#__PURE__*/ isValidElement(child)) {
+                        // lastItemDisables support
+                        const isLastItem = child === lastCheckbox;
+                        const isChildDisabled = isDisabled || lastItemDisables && lastCheckboxIsChecked && !isLastItem;
                         return /*#__PURE__*/ cloneElement(child, {
-                            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/dist/esm/components/Checkbox/CheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Checkbox/CheckboxGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Children,\n  forwardRef,\n  ReactElement,\n  cloneElement,\n  isValidElement,\n  useId,\n  ChangeEvent,\n  useState,\n  useEffect,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport {\n  CheckboxElementType,\n  CheckboxGroupElementType,\n  CheckboxGroupProps,\n  CheckboxGroupRef,\n} from \"./types\";\nimport { Label } from \"../Label\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { useValidationClasses } from \"../../hooks\";\n\nexport const CheckboxGroup: ForwardedRefComponent<\n  CheckboxGroupProps,\n  CheckboxGroupElementType\n> = forwardRef((props: CheckboxGroupProps, ref: CheckboxGroupRef) => {\n  const {\n    label,\n    isDisabled = false,\n    isRequired,\n    validationState,\n    isInvalid,\n    orientation = \"vertical\",\n    onChange,\n    className,\n    errorMessage,\n    children,\n    defaultValue = [],\n    isReadOnly,\n    itemsPerRow,\n    ...rest\n  } = props;\n  const [selected, setSelected] = useState<string[]>(defaultValue);\n  const checkboxGroupClasses = classNames(\n    \"mobius\",\n    \"mobius-checkbox-group\",\n    className,\n    {\n      \"--is-horizontal\": orientation === \"horizontal\",\n      \"--is-vertical\": orientation === \"vertical\",\n      \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n      \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n    },\n  );\n  const validationClasses = useValidationClasses({\n    validationState,\n    isInvalid,\n  });\n  const labelClasses = classNames(\n    {\n      \"--is-disabled\": isDisabled,\n    },\n    validationClasses,\n  );\n  const errorMessageId = useId();\n  const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n  const describedBy = spaceDelimitedList([\n    shouldErrorMessageShow,\n    props[\"aria-describedby\"],\n  ]);\n  const labelId = useId();\n\n  const handleChange = (event: ChangeEvent<CheckboxElementType>) => {\n    const {\n      target: { value, checked },\n    } = event;\n\n    if (!checked) {\n      setSelected(selected.filter(item => item !== value));\n    }\n\n    if (checked) {\n      setSelected([...selected, value]);\n    }\n  };\n\n  useEffect(() => {\n    if (onChange) {\n      onChange(selected);\n    }\n  }, [selected, onChange]);\n\n  return (\n    <div\n      {...rest}\n      aria-labelledby={props[\"aria-labelledby\"] || labelId}\n      ref={ref}\n      className={checkboxGroupClasses}\n      role=\"group\"\n      style={\n        {\n          \"--checkbox-items-per-row\": itemsPerRow || Children.count(children),\n        } as React.CSSProperties\n      }\n    >\n      {label && (\n        <Label elementType=\"span\" id={labelId} className={labelClasses}>\n          {label}\n        </Label>\n      )}\n      <div className=\"mobius-checkbox-group__wrapper\">\n        {Children.map(children, child => {\n          if (isValidElement(child)) {\n            return cloneElement(child as ReactElement, {\n              isDisabled,\n              isRequired,\n              isReadOnly,\n              isInvalid,\n              defaultSelected: selected.includes(child.props.value),\n              onChange: handleChange,\n              \"aria-describedby\": describedBy,\n            });\n          }\n\n          return child;\n        })}\n      </div>\n      {errorMessage && (\n        <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n      )}\n    </div>\n  );\n});\n"],"names":["Children","forwardRef","cloneElement","isValidElement","useId","useState","useEffect","classNames","Label","ErrorMessage","spaceDelimitedList","useValidationClasses","CheckboxGroup","props","ref","label","isDisabled","isRequired","validationState","isInvalid","orientation","onChange","className","errorMessage","children","defaultValue","isReadOnly","itemsPerRow","rest","selected","setSelected","checkboxGroupClasses","validationClasses","labelClasses","errorMessageId","shouldErrorMessageShow","undefined","describedBy","labelId","handleChange","event","target","value","checked","filter","item","div","aria-labelledby","role","style","count","elementType","id","map","child","defaultSelected","includes"],"mappings":"AAAA;;AAEA,SACEA,QAAQ,EACRC,UAAU,EAEVC,YAAY,EACZC,cAAc,EACdC,KAAK,EAELC,QAAQ,EACRC,SAAS,QACJ,QAAQ;AACf,OAAOC,gBAAgB,oBAAoB;AAQ3C,SAASC,KAAK,QAAQ,WAAW;AACjC,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,kBAAkB,QAAQ,iCAAiC;AACpE,SAASC,oBAAoB,QAAQ,cAAc;AAEnD,OAAO,MAAMC,8BAGTX,WAAW,CAACY,OAA2BC;IACzC,MAAM,EACJC,KAAK,EACLC,aAAa,KAAK,EAClBC,UAAU,EACVC,eAAe,EACfC,SAAS,EACTC,cAAc,UAAU,EACxBC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZC,QAAQ,EACRC,eAAe,EAAE,EACjBC,UAAU,EACVC,WAAW,EACX,GAAGC,MACJ,GAAGf;IACJ,MAAM,CAACgB,UAAUC,YAAY,GAAGzB,SAAmBoB;IACnD,MAAMM,uBAAuBxB,WAC3B,UACA,yBACAe,WACA;QACE,mBAAmBF,gBAAgB;QACnC,iBAAiBA,gBAAgB;QACjC,iBAAiB,OAAOH,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD;IAEF,MAAMe,oBAAoBrB,qBAAqB;QAC7CO;QACAC;IACF;IACA,MAAMc,eAAe1B,WACnB;QACE,iBAAiBS;IACnB,GACAgB;IAEF,MAAME,iBAAiB9B;IACvB,MAAM+B,yBAAyBZ,eAAeW,iBAAiBE;IAC/D,MAAMC,cAAc3B,mBAAmB;QACrCyB;QACAtB,KAAK,CAAC,mBAAmB;KAC1B;IACD,MAAMyB,UAAUlC;IAEhB,MAAMmC,eAAe,CAACC;QACpB,MAAM,EACJC,QAAQ,EAAEC,KAAK,EAAEC,OAAO,EAAE,EAC3B,GAAGH;QAEJ,IAAI,CAACG,SAAS;YACZb,YAAYD,SAASe,MAAM,CAACC,CAAAA,OAAQA,SAASH;QAC/C;QAEA,IAAIC,SAAS;YACXb,YAAY;mBAAID;gBAAUa;aAAM;QAClC;IACF;IAEApC,UAAU;QACR,IAAIe,UAAU;YACZA,SAASQ;QACX;IACF,GAAG;QAACA;QAAUR;KAAS;IAEvB,qBACE,MAACyB;QACE,GAAGlB,IAAI;QACRmB,mBAAiBlC,KAAK,CAAC,kBAAkB,IAAIyB;QAC7CxB,KAAKA;QACLQ,WAAWS;QACXiB,MAAK;QACLC,OACE;YACE,4BAA4BtB,eAAe3B,SAASkD,KAAK,CAAC1B;QAC5D;;YAGDT,uBACC,KAACP;gBAAM2C,aAAY;gBAAOC,IAAId;gBAAShB,WAAWW;0BAC/ClB;;0BAGL,KAAC+B;gBAAIxB,WAAU;0BACZtB,SAASqD,GAAG,CAAC7B,UAAU8B,CAAAA;oBACtB,kBAAInD,eAAemD,QAAQ;wBACzB,qBAAOpD,aAAaoD,OAAuB;4BACzCtC;4BACAC;4BACAS;4BACAP;4BACAoC,iBAAiB1B,SAAS2B,QAAQ,CAACF,MAAMzC,KAAK,CAAC6B,KAAK;4BACpDrB,UAAUkB;4BACV,oBAAoBF;wBACtB;oBACF;oBAEA,OAAOiB;gBACT;;YAED/B,8BACC,KAACd;gBAAa2C,IAAIlB;gBAAgBX,cAAcA;;;;AAIxD,GAAG"}
+{"version":3,"sources":["../../../../src/components/Checkbox/CheckboxGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport {\n  type ChangeEvent,\n  type ReactElement,\n  Children,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  useEffect,\n  useId,\n  useState,\n} from \"react\";\nimport { useRenderCount, useValidationClasses } from \"../../hooks\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { Label } from \"../Label\";\nimport { Checkbox } from \"./Checkbox\";\nimport {\n  CheckboxElementType,\n  CheckboxGroupElementType,\n  CheckboxGroupProps,\n  CheckboxGroupRef,\n} from \"./types\";\n\nexport const CheckboxGroup: ForwardedRefComponent<\n  CheckboxGroupProps,\n  CheckboxGroupElementType\n> = forwardRef((props: CheckboxGroupProps, ref: CheckboxGroupRef) => {\n  const {\n    label,\n    isDisabled = false,\n    isRequired,\n    validationState,\n    isInvalid,\n    orientation = \"vertical\",\n    onChange,\n    className,\n    errorMessage,\n    children,\n    defaultValue = [],\n    isReadOnly,\n    itemsPerRow,\n    lastItemDisables = false,\n    ...rest\n  } = props;\n  const [selected, setSelected] = useState<string[]>(defaultValue);\n  const checkboxGroupClasses = classNames(\n    \"mobius\",\n    \"mobius-checkbox-group\",\n    className,\n    {\n      \"--is-horizontal\": orientation === \"horizontal\",\n      \"--is-vertical\": orientation === \"vertical\",\n      \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n      \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n    },\n  );\n  const validationClasses = useValidationClasses({\n    validationState,\n    isInvalid,\n  });\n  const labelClasses = classNames(\n    {\n      \"--is-disabled\": isDisabled,\n    },\n    validationClasses,\n  );\n  const errorMessageId = useId();\n  const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n  const describedBy = spaceDelimitedList([\n    shouldErrorMessageShow,\n    props[\"aria-describedby\"],\n  ]);\n  const labelId = useId();\n\n  const handleChange = (\n    event: ChangeEvent<CheckboxElementType>,\n    isLastItem = false,\n  ) => {\n    const {\n      target: { value, checked },\n    } = event;\n\n    if (!checked) {\n      setSelected(selected.filter(item => item !== value));\n    }\n\n    if (checked && lastItemDisables && isLastItem) {\n      setSelected([value]);\n      return;\n    }\n\n    if (checked) {\n      setSelected([...selected, value]);\n    }\n  };\n\n  // HACK: This is a workaround to ensure that the onChange event is not\n  //       fired on the initial render.\n  const renderCount = useRenderCount();\n  useEffect(() => {\n    if (onChange && renderCount > 1) {\n      onChange(selected);\n    }\n  }, [selected, onChange, renderCount]);\n\n  const childrenArray = Children.toArray(children);\n  const lastCheckbox = childrenArray\n    .filter(\n      child =>\n        isValidElement(child) && (child as ReactElement).type === Checkbox,\n    )\n    .pop() as ReactElement<CheckboxElementType> | undefined;\n  const lastCheckboxIsChecked =\n    lastCheckbox && selected.includes(lastCheckbox.props.value);\n\n  return (\n    <div\n      {...rest}\n      aria-labelledby={props[\"aria-labelledby\"] || labelId}\n      ref={ref}\n      className={checkboxGroupClasses}\n      role=\"group\"\n      style={\n        {\n          \"--checkbox-items-per-row\": itemsPerRow || Children.count(children),\n        } as React.CSSProperties\n      }\n    >\n      {label && (\n        <Label elementType=\"span\" id={labelId} className={labelClasses}>\n          {label}\n        </Label>\n      )}\n      <div className=\"mobius-checkbox-group__wrapper\">\n        {childrenArray.map(child => {\n          if (isValidElement(child)) {\n            // lastItemDisables support\n            const isLastItem = child === lastCheckbox;\n            const isChildDisabled =\n              isDisabled ||\n              (lastItemDisables && lastCheckboxIsChecked && !isLastItem);\n\n            return cloneElement(child as ReactElement, {\n              isDisabled: isChildDisabled,\n              isRequired,\n              isReadOnly,\n              isInvalid,\n              isLastItem,\n              selected: selected.includes(child.props.value),\n              onChange: handleChange,\n              \"aria-describedby\": describedBy,\n            });\n          }\n\n          return child;\n        })}\n      </div>\n      {errorMessage && (\n        <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n      )}\n    </div>\n  );\n});\n"],"names":["classNames","Children","cloneElement","forwardRef","isValidElement","useEffect","useId","useState","useRenderCount","useValidationClasses","spaceDelimitedList","ErrorMessage","Label","Checkbox","CheckboxGroup","props","ref","label","isDisabled","isRequired","validationState","isInvalid","orientation","onChange","className","errorMessage","children","defaultValue","isReadOnly","itemsPerRow","lastItemDisables","rest","selected","setSelected","checkboxGroupClasses","validationClasses","labelClasses","errorMessageId","shouldErrorMessageShow","undefined","describedBy","labelId","handleChange","event","isLastItem","target","value","checked","filter","item","renderCount","childrenArray","toArray","lastCheckbox","child","type","pop","lastCheckboxIsChecked","includes","div","aria-labelledby","role","style","count","elementType","id","map","isChildDisabled"],"mappings":"AAAA;;AAEA,OAAOA,gBAAgB,oBAAoB;AAC3C,SAGEC,QAAQ,EACRC,YAAY,EACZC,UAAU,EACVC,cAAc,EACdC,SAAS,EACTC,KAAK,EACLC,QAAQ,QACH,QAAQ;AACf,SAASC,cAAc,EAAEC,oBAAoB,QAAQ,cAAc;AAEnE,SAASC,kBAAkB,QAAQ,iCAAiC;AACpE,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,KAAK,QAAQ,WAAW;AACjC,SAASC,QAAQ,QAAQ,aAAa;AAQtC,OAAO,MAAMC,8BAGTX,WAAW,CAACY,OAA2BC;IACzC,MAAM,EACJC,KAAK,EACLC,aAAa,KAAK,EAClBC,UAAU,EACVC,eAAe,EACfC,SAAS,EACTC,cAAc,UAAU,EACxBC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZC,QAAQ,EACRC,eAAe,EAAE,EACjBC,UAAU,EACVC,WAAW,EACXC,mBAAmB,KAAK,EACxB,GAAGC,MACJ,GAAGhB;IACJ,MAAM,CAACiB,UAAUC,YAAY,GAAG1B,SAAmBoB;IACnD,MAAMO,uBAAuBlC,WAC3B,UACA,yBACAwB,WACA;QACE,mBAAmBF,gBAAgB;QACnC,iBAAiBA,gBAAgB;QACjC,iBAAiB,OAAOH,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD;IAEF,MAAMgB,oBAAoB1B,qBAAqB;QAC7CW;QACAC;IACF;IACA,MAAMe,eAAepC,WACnB;QACE,iBAAiBkB;IACnB,GACAiB;IAEF,MAAME,iBAAiB/B;IACvB,MAAMgC,yBAAyBb,eAAeY,iBAAiBE;IAC/D,MAAMC,cAAc9B,mBAAmB;QACrC4B;QACAvB,KAAK,CAAC,mBAAmB;KAC1B;IACD,MAAM0B,UAAUnC;IAEhB,MAAMoC,eAAe,CACnBC,OACAC,aAAa,KAAK;QAElB,MAAM,EACJC,QAAQ,EAAEC,KAAK,EAAEC,OAAO,EAAE,EAC3B,GAAGJ;QAEJ,IAAI,CAACI,SAAS;YACZd,YAAYD,SAASgB,MAAM,CAACC,CAAAA,OAAQA,SAASH;QAC/C;QAEA,IAAIC,WAAWjB,oBAAoBc,YAAY;YAC7CX,YAAY;gBAACa;aAAM;YACnB;QACF;QAEA,IAAIC,SAAS;YACXd,YAAY;mBAAID;gBAAUc;aAAM;QAClC;IACF;IAEA,sEAAsE;IACtE,qCAAqC;IACrC,MAAMI,cAAc1C;IACpBH,UAAU;QACR,IAAIkB,YAAY2B,cAAc,GAAG;YAC/B3B,SAASS;QACX;IACF,GAAG;QAACA;QAAUT;QAAU2B;KAAY;IAEpC,MAAMC,gBAAgBlD,SAASmD,OAAO,CAAC1B;IACvC,MAAM2B,eAAeF,cAClBH,MAAM,CACLM,CAAAA,sBACElD,eAAekD,UAAU,AAACA,MAAuBC,IAAI,KAAK1C,UAE7D2C,GAAG;IACN,MAAMC,wBACJJ,gBAAgBrB,SAAS0B,QAAQ,CAACL,aAAatC,KAAK,CAAC+B,KAAK;IAE5D,qBACE,MAACa;QACE,GAAG5B,IAAI;QACR6B,mBAAiB7C,KAAK,CAAC,kBAAkB,IAAI0B;QAC7CzB,KAAKA;QACLQ,WAAWU;QACX2B,MAAK;QACLC,OACE;YACE,4BAA4BjC,eAAe5B,SAAS8D,KAAK,CAACrC;QAC5D;;YAGDT,uBACC,KAACL;gBAAMoD,aAAY;gBAAOC,IAAIxB;gBAASjB,WAAWY;0BAC/CnB;;0BAGL,KAAC0C;gBAAInC,WAAU;0BACZ2B,cAAce,GAAG,CAACZ,CAAAA;oBACjB,kBAAIlD,eAAekD,QAAQ;wBACzB,2BAA2B;wBAC3B,MAAMV,aAAaU,UAAUD;wBAC7B,MAAMc,kBACJjD,cACCY,oBAAoB2B,yBAAyB,CAACb;wBAEjD,qBAAO1C,aAAaoD,OAAuB;4BACzCpC,YAAYiD;4BACZhD;4BACAS;4BACAP;4BACAuB;4BACAZ,UAAUA,SAAS0B,QAAQ,CAACJ,MAAMvC,KAAK,CAAC+B,KAAK;4BAC7CvB,UAAUmB;4BACV,oBAAoBF;wBACtB;oBACF;oBAEA,OAAOc;gBACT;;YAED7B,8BACC,KAACd;gBAAasD,IAAI5B;gBAAgBZ,cAAcA;;;;AAIxD,GAAG"}

package/dist/esm/components/Checkbox/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Checkbox/types.ts"],"sourcesContent":["import { ChangeEvent, ReactNode, Ref, RefAttributes } from \"react\";\nimport { DOMProps } from \"../../types/dom\";\nimport { Validation } from \"../../types\";\n\nexport type CheckboxElementType = HTMLInputElement;\nexport type CheckboxRef = Ref<CheckboxElementType>;\n\nexport interface CheckboxProps\n  extends DOMProps,\n    Validation,\n    RefAttributes<CheckboxElementType> {\n  className?: string;\n  // The content to display as the label.\n  label?: ReactNode;\n  errorMessage?: string;\n  /** The name of the input */\n  name?: string;\n  /** The current value (controlled). */\n  value?: string;\n  // Whether the input is disabled.\n  isDisabled?: boolean;\n  onChange?: (event: ChangeEvent<CheckboxElementType>) => void;\n  // The default value (uncontrolled).\n  defaultSelected?: boolean;\n  // Whether the input can be selected but not changed by the user.\n  isReadOnly?: boolean;\n  // Whether user input is required on the input before form submission.\n  isRequired?: boolean;\n  // Identifies the element that provides an error message for the object.\n  \"aria-errormessage\"?: string;\n  /**\n   * Identifies the element (or elements) that describes the object.\n   */\n  \"aria-describedby\"?: string;\n  /**\n   * **Internal:** Do not use\n   */\n  groupDisabled?: boolean;\n  /**\n   * **Internal:** Do not use\n   */\n  selected?: string;\n  /**\n   * **Internal:** Do not use\n   */\n  setSelected?: React.Dispatch<React.SetStateAction<string>>;\n}\n\nexport type CheckboxGroupElementType = HTMLDivElement;\ninterface CheckboxGroupPropsInternal\n  extends DOMProps,\n    Validation,\n    RefAttributes<CheckboxGroupElementType> {\n  children: ReactNode;\n  className?: string;\n  orientation?: \"horizontal\" | \"vertical\";\n  // Defines number of items to be displayed on a single row when used with orientation=\"horizontal\". Defaults to number of items in the group.\n  itemsPerRow?: number;\n  errorMessage?: string;\n  onChange?: (values: string[]) => void;\n  // Defines a string value that labels the current element.\n  // \"aria-label\"?: string;\n  // Identifies the element (or elements) that labels the current element.\n  \"aria-labelledby\"?: string;\n  // Identifies the element that provides an error message for the object.\n  // \"aria-errormessage\"?: string;\n  // Identifies the element (or elements) that describes the object.\n  \"aria-describedby\"?: string;\n  // Whether user input is required on the input before form submission.\n  isRequired?: boolean;\n  // Whether the input is disabled.\n  isDisabled?: boolean;\n  // Whether the input can be selected but not changed by the user.\n  isReadOnly?: boolean;\n  // The default value (uncontrolled).\n  defaultValue?: string[];\n  // The content to display as the label.\n  label?: ReactNode;\n  /**\n   * The value of the radio button, used when submitting an HTML form.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#Value).\n   */\n  value?: string;\n}\n\ninterface HorizontalCheckboxGroupProps extends CheckboxGroupPropsInternal {\n  orientation?: \"horizontal\";\n  itemsPerRow: number;\n}\n\ninterface VerticalCheckboxGroupProps extends CheckboxGroupPropsInternal {\n  orientation?: \"vertical\";\n  itemsPerRow?: never;\n}\n\nexport type CheckboxGroupProps =\n  | HorizontalCheckboxGroupProps\n  | VerticalCheckboxGroupProps;\n\nexport type CheckboxGroupRef = Ref<CheckboxGroupElementType>;\n"],"names":[],"mappings":"AAmGA,WAA6D"}
+{"version":3,"sources":["../../../../src/components/Checkbox/types.ts"],"sourcesContent":["import { ChangeEvent, ReactNode, Ref, RefAttributes } from \"react\";\nimport { DOMProps } from \"../../types/dom\";\nimport { Validation } from \"../../types\";\n\nexport type CheckboxElementType = HTMLInputElement;\nexport type CheckboxRef = Ref<CheckboxElementType>;\n\nexport interface CheckboxProps\n  extends DOMProps,\n    Validation,\n    RefAttributes<CheckboxElementType> {\n  className?: string;\n  // The content to display as the label.\n  label?: ReactNode;\n  errorMessage?: string;\n  /** The name of the input */\n  name?: string;\n  /** The current value (controlled). */\n  value?: string;\n  // Whether the input is disabled.\n  isDisabled?: boolean;\n  onChange?: (\n    event: ChangeEvent<CheckboxElementType>,\n    isLastItem?: boolean,\n  ) => void;\n  // The default value (uncontrolled).\n  defaultSelected?: boolean;\n  // Whether the input can be selected but not changed by the user.\n  isReadOnly?: boolean;\n  // Whether user input is required on the input before form submission.\n  isRequired?: boolean;\n  // Identifies the element that provides an error message for the object.\n  \"aria-errormessage\"?: string;\n  /**\n   * Identifies the element (or elements) that describes the object.\n   */\n  \"aria-describedby\"?: string;\n  /**\n   * Whether the checkbox is the last item of a group.\n   */\n  isLastItem?: boolean;\n  /**\n   * **Internal:** Do not use\n   */\n  groupDisabled?: boolean;\n  /**\n   * Whether the checkbox is selected.\n   */\n  selected?: boolean;\n}\n\nexport type CheckboxGroupElementType = HTMLDivElement;\ninterface CheckboxGroupPropsInternal\n  extends DOMProps,\n    Validation,\n    RefAttributes<CheckboxGroupElementType> {\n  children: ReactNode;\n  className?: string;\n  orientation?: \"horizontal\" | \"vertical\";\n  // Defines number of items to be displayed on a single row when used with orientation=\"horizontal\". Defaults to number of items in the group.\n  itemsPerRow?: number;\n  errorMessage?: string;\n  onChange?: (values: string[]) => void;\n  // Defines a string value that labels the current element.\n  // \"aria-label\"?: string;\n  // Identifies the element (or elements) that labels the current element.\n  \"aria-labelledby\"?: string;\n  // Identifies the element that provides an error message for the object.\n  // \"aria-errormessage\"?: string;\n  // Identifies the element (or elements) that describes the object.\n  \"aria-describedby\"?: string;\n  // Whether user input is required on the input before form submission.\n  isRequired?: boolean;\n  // Whether the input is disabled.\n  isDisabled?: boolean;\n  // Whether the input can be selected but not changed by the user.\n  isReadOnly?: boolean;\n  // The default value (uncontrolled).\n  defaultValue?: string[];\n  // The content to display as the label.\n  label?: ReactNode;\n  /**\n   * The value of the radio button, used when submitting an HTML form.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#Value).\n   */\n  value?: string;\n  /**\n   * This determines if the last item in the group should disable the other items when selected.\n   */\n  lastItemDisables?: boolean;\n}\n\ninterface HorizontalCheckboxGroupProps extends CheckboxGroupPropsInternal {\n  orientation?: \"horizontal\";\n  itemsPerRow: number;\n}\n\ninterface VerticalCheckboxGroupProps extends CheckboxGroupPropsInternal {\n  orientation?: \"vertical\";\n  itemsPerRow?: never;\n}\n\nexport type CheckboxGroupProps =\n  | HorizontalCheckboxGroupProps\n  | VerticalCheckboxGroupProps;\n\nexport type CheckboxGroupRef = Ref<CheckboxGroupElementType>;\n"],"names":[],"mappings":"AA0GA,WAA6D"}

package/dist/esm/components/Combobox/Combobox.js

@@ -0,0 +1,114 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, useRef, useState, useEffect } from "react";
+import classNames from "classnames/dedupe";
+import { TextField } from "../TextField";
+const getOptionValue = (option)=>typeof option === "string" ? option : option.value;
+const getOptionLabel = (option)=>typeof option === "string" ? option : option.label;
+export const Combobox = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { defaultValue, options, onSelected } = props;
+    const fallbackRef = useRef();
+    const [inputValue, setInputValue] = useState(defaultValue || "");
+    const [isOpen, setIsOpen] = useState(false);
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    const [filteredOptions, setFilteredOptions] = useState([]);
+    const inputRef = ref || fallbackRef;
+    const listboxId = useId();
+    useEffect(()=>{
+        const fetchOptions = async ()=>{
+            if (typeof options === "function") {
+                const result = await options(inputValue);
+                setFilteredOptions(result);
+            } else {
+                setFilteredOptions(options.filter((option)=>getOptionLabel(option).toLowerCase().includes(inputValue.toLowerCase())));
+            }
+        };
+        fetchOptions();
+    }, [
+        inputValue,
+        options
+    ]);
+    const handleFocus = ()=>{
+        setIsOpen(true);
+    };
+    const handleBlur = ()=>{
+        setIsOpen(false);
+    };
+    const handleInputChange = (e)=>{
+        const newValue = e.target.value;
+        setInputValue(newValue);
+        setIsOpen(true);
+        setHighlightedIndex(-1);
+    };
+    const handleOptionSelect = (option)=>{
+        const value = getOptionValue(option);
+        setIsOpen(false);
+        setInputValue(value);
+        onSelected === null || onSelected === void 0 ? void 0 : onSelected(value);
+    };
+    const handleKeyDown = (e)=>{
+        switch(e.key){
+            case "ArrowDown":
+                e.preventDefault();
+                setIsOpen(true);
+                setHighlightedIndex((prev)=>prev < filteredOptions.length - 1 ? prev + 1 : 0);
+                break;
+            case "ArrowUp":
+                e.preventDefault();
+                setIsOpen(true);
+                setHighlightedIndex((prev)=>prev > 0 ? prev - 1 : filteredOptions.length - 1);
+                break;
+            case "Enter":
+                e.preventDefault();
+                if (isOpen && highlightedIndex >= 0) {
+                    handleOptionSelect(filteredOptions[highlightedIndex]);
+                } else if (isOpen && highlightedIndex === -1 && filteredOptions.length > 0) {
+                    handleOptionSelect(filteredOptions[0]);
+                }
+                break;
+            case "Escape":
+                e.preventDefault();
+                setIsOpen(false);
+                setHighlightedIndex(-1);
+                break;
+            default:
+        }
+    };
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "mobius mobius-combobox",
+        children: [
+            /*#__PURE__*/ _jsx(TextField, {
+                className: "mobius-combobox__input",
+                role: "combobox",
+                value: inputValue,
+                onFocus: handleFocus,
+                onBlur: handleBlur,
+                onKeyDown: handleKeyDown,
+                onChange: handleInputChange,
+                "aria-autocomplete": "list",
+                "aria-haspopup": "listbox",
+                "aria-controls": listboxId,
+                "aria-expanded": isOpen,
+                "aria-activedescendant": highlightedIndex === -1 ? undefined : `${listboxId}-option-${highlightedIndex}`,
+                // @ts-expect-error I have no idea how ref typing works
+                ref: inputRef
+            }),
+            isOpen && /*#__PURE__*/ _jsx("ul", {
+                role: "listbox",
+                id: listboxId,
+                className: "mobius-combobox__list",
+                children: filteredOptions.map((option, index)=>/*#__PURE__*/ _jsx("li", {
+                        role: "option",
+                        id: `${listboxId}-option-${index}`,
+                        "aria-selected": highlightedIndex === index,
+                        onMouseDown: ()=>handleOptionSelect(option),
+                        className: classNames("mobius-combobox__option", {
+                            "mobius-combobox__option--is-highlighted": highlightedIndex === index
+                        }),
+                        children: getOptionLabel(option)
+                    }, getOptionValue(option)))
+            })
+        ]
+    });
+});
+
+//# sourceMappingURL=Combobox.js.map

package/dist/esm/components/Combobox/Combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import { forwardRef, useId, useRef, useState, useEffect } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { TextField } from \"../TextField\";\nimport type {\n  ComboboxProps,\n  ComboboxElementType,\n  ComboboxRef,\n  ComboboxOption,\n} from \"./types\";\nimport type { ForwardedRefComponent } from \"../../types\";\n\nconst getOptionValue = (option: ComboboxOption) =>\n  typeof option === \"string\" ? option : option.value;\n\nconst getOptionLabel = (option: ComboboxOption) =>\n  typeof option === \"string\" ? option : option.label;\n\nexport const Combobox: ForwardedRefComponent<\n  ComboboxProps,\n  ComboboxElementType\n> = forwardRef((props: ComboboxProps, ref: ComboboxRef) => {\n  const { defaultValue, options, onSelected } = props;\n\n  const fallbackRef = useRef();\n  const [inputValue, setInputValue] = useState(defaultValue || \"\");\n  const [isOpen, setIsOpen] = useState(false);\n  const [highlightedIndex, setHighlightedIndex] = useState(-1);\n  const [filteredOptions, setFilteredOptions] = useState<ComboboxOption[]>([]);\n  const inputRef = ref || fallbackRef;\n  const listboxId = useId();\n\n  useEffect(() => {\n    const fetchOptions = async () => {\n      if (typeof options === \"function\") {\n        const result = await options(inputValue);\n        setFilteredOptions(result);\n      } else {\n        setFilteredOptions(\n          options.filter(option =>\n            getOptionLabel(option)\n              .toLowerCase()\n              .includes(inputValue.toLowerCase()),\n          ),\n        );\n      }\n    };\n\n    fetchOptions();\n  }, [inputValue, options]);\n\n  const handleFocus = () => {\n    setIsOpen(true);\n  };\n\n  const handleBlur = () => {\n    setIsOpen(false);\n  };\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const newValue = e.target.value;\n    setInputValue(newValue);\n    setIsOpen(true);\n    setHighlightedIndex(-1);\n  };\n\n  const handleOptionSelect = (option: ComboboxOption) => {\n    const value = getOptionValue(option);\n    setIsOpen(false);\n    setInputValue(value);\n    onSelected?.(value);\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    switch (e.key) {\n      case \"ArrowDown\":\n        e.preventDefault();\n        setIsOpen(true);\n        setHighlightedIndex(prev =>\n          prev < filteredOptions.length - 1 ? prev + 1 : 0,\n        );\n        break;\n      case \"ArrowUp\":\n        e.preventDefault();\n        setIsOpen(true);\n        setHighlightedIndex(prev =>\n          prev > 0 ? prev - 1 : filteredOptions.length - 1,\n        );\n        break;\n      case \"Enter\":\n        e.preventDefault();\n        if (isOpen && highlightedIndex >= 0) {\n          handleOptionSelect(filteredOptions[highlightedIndex]);\n        } else if (\n          isOpen &&\n          highlightedIndex === -1 &&\n          filteredOptions.length > 0\n        ) {\n          handleOptionSelect(filteredOptions[0]);\n        }\n        break;\n      case \"Escape\":\n        e.preventDefault();\n        setIsOpen(false);\n        setHighlightedIndex(-1);\n        break;\n      default:\n      // Do nothing\n    }\n  };\n\n  return (\n    <div className=\"mobius mobius-combobox\">\n      <TextField\n        className=\"mobius-combobox__input\"\n        role=\"combobox\"\n        value={inputValue}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onKeyDown={handleKeyDown}\n        onChange={handleInputChange}\n        aria-autocomplete=\"list\"\n        aria-haspopup=\"listbox\"\n        aria-controls={listboxId}\n        aria-expanded={isOpen}\n        aria-activedescendant={\n          highlightedIndex === -1\n            ? undefined\n            : `${listboxId}-option-${highlightedIndex}`\n        }\n        // @ts-expect-error I have no idea how ref typing works\n        ref={inputRef}\n      />\n      {isOpen && (\n        <ul role=\"listbox\" id={listboxId} className=\"mobius-combobox__list\">\n          {filteredOptions.map((option, index) => (\n            <li\n              role=\"option\"\n              key={getOptionValue(option)}\n              id={`${listboxId}-option-${index}`}\n              aria-selected={highlightedIndex === index}\n              onMouseDown={() => handleOptionSelect(option)}\n              className={classNames(\"mobius-combobox__option\", {\n                \"mobius-combobox__option--is-highlighted\":\n                  highlightedIndex === index,\n              })}\n            >\n              {getOptionLabel(option)}\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n});\n"],"names":["forwardRef","useId","useRef","useState","useEffect","classNames","TextField","getOptionValue","option","value","getOptionLabel","label","Combobox","props","ref","defaultValue","options","onSelected","fallbackRef","inputValue","setInputValue","isOpen","setIsOpen","highlightedIndex","setHighlightedIndex","filteredOptions","setFilteredOptions","inputRef","listboxId","fetchOptions","result","filter","toLowerCase","includes","handleFocus","handleBlur","handleInputChange","e","newValue","target","handleOptionSelect","handleKeyDown","key","preventDefault","prev","length","div","className","role","onFocus","onBlur","onKeyDown","onChange","aria-autocomplete","aria-haspopup","aria-controls","aria-expanded","aria-activedescendant","undefined","ul","id","map","index","li","aria-selected","onMouseDown"],"mappings":"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"}

package/dist/esm/components/Combobox/fixtures.js

@@ -0,0 +1,226 @@
+export const FRUITS = [
+    "Apple",
+    "Apricot",
+    "Avocado",
+    "Banana",
+    "Blackberry",
+    "Blueberry",
+    "Cantaloupe",
+    "Cherry",
+    "Clementine",
+    "Coconut",
+    "Cranberry",
+    "Date",
+    "Dragonfruit",
+    "Durian",
+    "Elderberry",
+    "Fig",
+    "Grape",
+    "Grapefruit",
+    "Guava",
+    "Honeydew",
+    "Jackfruit",
+    "Kiwi",
+    "Kumquat",
+    "Lemon",
+    "Lime",
+    "Lychee",
+    "Mango",
+    "Mulberry",
+    "Nectarine",
+    "Orange",
+    "Papaya",
+    "Passionfruit",
+    "Peach",
+    "Pear",
+    "Persimmon",
+    "Pineapple",
+    "Plum",
+    "Pomegranate",
+    "Raspberry",
+    "Redcurrant",
+    "Starfruit",
+    "Strawberry",
+    "Tangerine",
+    "Watermelon"
+];
+export const FRUITS_OBJECTS = [
+    {
+        label: "Apple",
+        value: "apple"
+    },
+    {
+        label: "Apricot",
+        value: "apricot"
+    },
+    {
+        label: "Avocado",
+        value: "avocado"
+    },
+    {
+        label: "Banana",
+        value: "banana"
+    },
+    {
+        label: "Blackberry",
+        value: "blackberry"
+    },
+    {
+        label: "Blueberry",
+        value: "blueberry"
+    },
+    {
+        label: "Cantaloupe",
+        value: "cantaloupe"
+    },
+    {
+        label: "Cherry",
+        value: "cherry"
+    },
+    {
+        label: "Clementine",
+        value: "clementine"
+    },
+    {
+        label: "Coconut",
+        value: "coconut"
+    },
+    {
+        label: "Cranberry",
+        value: "cranberry"
+    },
+    {
+        label: "Date",
+        value: "date"
+    },
+    {
+        label: "Dragonfruit",
+        value: "dragonfruit"
+    },
+    {
+        label: "Durian",
+        value: "durian"
+    },
+    {
+        label: "Elderberry",
+        value: "elderberry"
+    },
+    {
+        label: "Fig",
+        value: "fig"
+    },
+    {
+        label: "Grape",
+        value: "grape"
+    },
+    {
+        label: "Grapefruit",
+        value: "grapefruit"
+    },
+    {
+        label: "Guava",
+        value: "guava"
+    },
+    {
+        label: "Honeydew",
+        value: "honeydew"
+    },
+    {
+        label: "Jackfruit",
+        value: "jackfruit"
+    },
+    {
+        label: "Kiwi",
+        value: "kiwi"
+    },
+    {
+        label: "Kumquat",
+        value: "kumquat"
+    },
+    {
+        label: "Lemon",
+        value: "lemon"
+    },
+    {
+        label: "Lime",
+        value: "lime"
+    },
+    {
+        label: "Lychee",
+        value: "lychee"
+    },
+    {
+        label: "Mango",
+        value: "mango"
+    },
+    {
+        label: "Mulberry",
+        value: "mulberry"
+    },
+    {
+        label: "Nectarine",
+        value: "nectarine"
+    },
+    {
+        label: "Orange",
+        value: "orange"
+    },
+    {
+        label: "Papaya",
+        value: "papaya"
+    },
+    {
+        label: "Passionfruit",
+        value: "passionfruit"
+    },
+    {
+        label: "Peach",
+        value: "peach"
+    },
+    {
+        label: "Pear",
+        value: "pear"
+    },
+    {
+        label: "Persimmon",
+        value: "persimmon"
+    },
+    {
+        label: "Pineapple",
+        value: "pineapple"
+    },
+    {
+        label: "Plum",
+        value: "plum"
+    },
+    {
+        label: "Pomegranate",
+        value: "pomegranate"
+    },
+    {
+        label: "Raspberry",
+        value: "raspberry"
+    },
+    {
+        label: "Redcurrant",
+        value: "redcurrant"
+    },
+    {
+        label: "Starfruit",
+        value: "starfruit"
+    },
+    {
+        label: "Strawberry",
+        value: "strawberry"
+    },
+    {
+        label: "Tangerine",
+        value: "tangerine"
+    },
+    {
+        label: "Watermelon",
+        value: "watermelon"
+    }
+];
+
+//# sourceMappingURL=fixtures.js.map