@simplybusiness/mobius 5.3.0 → 5.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +20 -0
- package/dist/cjs/components/Checkbox/Checkbox.js +5 -20
- package/dist/cjs/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/cjs/components/Checkbox/CheckboxGroup.js +29 -11
- package/dist/cjs/components/Checkbox/CheckboxGroup.js.map +1 -1
- package/dist/cjs/hooks/index.js +1 -0
- package/dist/cjs/hooks/index.js.map +1 -1
- package/dist/cjs/hooks/useDeprecationWarning/useDeprecationWarning.js +1 -0
- package/dist/cjs/hooks/useDeprecationWarning/useDeprecationWarning.js.map +1 -1
- package/dist/cjs/hooks/useDialogPolyfill/useDialogPolyfill.js +1 -0
- package/dist/cjs/hooks/useDialogPolyfill/useDialogPolyfill.js.map +1 -1
- package/dist/cjs/hooks/useRenderCount/index.js +20 -0
- package/dist/cjs/hooks/useRenderCount/index.js.map +1 -0
- package/dist/cjs/hooks/useRenderCount/useRenderCount.js +20 -0
- package/dist/cjs/hooks/useRenderCount/useRenderCount.js.map +1 -0
- package/dist/cjs/tsconfig.tsbuildinfo +1 -1
- package/dist/esm/components/Checkbox/Checkbox.js +6 -21
- package/dist/esm/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/esm/components/Checkbox/CheckboxGroup.js +29 -11
- package/dist/esm/components/Checkbox/CheckboxGroup.js.map +1 -1
- package/dist/esm/components/Checkbox/types.js.map +1 -1
- package/dist/esm/hooks/index.js +1 -0
- package/dist/esm/hooks/index.js.map +1 -1
- package/dist/esm/hooks/useDeprecationWarning/useDeprecationWarning.js +1 -0
- package/dist/esm/hooks/useDeprecationWarning/useDeprecationWarning.js.map +1 -1
- package/dist/esm/hooks/useDialogPolyfill/useDialogPolyfill.js +1 -0
- package/dist/esm/hooks/useDialogPolyfill/useDialogPolyfill.js.map +1 -1
- package/dist/esm/hooks/useRenderCount/index.js +3 -0
- package/dist/esm/hooks/useRenderCount/index.js.map +1 -0
- package/dist/esm/hooks/useRenderCount/useRenderCount.js +10 -0
- package/dist/esm/hooks/useRenderCount/useRenderCount.js.map +1 -0
- package/dist/types/components/Checkbox/CheckboxGroup.stories.d.ts +1 -0
- package/dist/types/components/Checkbox/types.d.ts +10 -6
- package/dist/types/hooks/index.d.ts +1 -0
- package/dist/types/hooks/useRenderCount/index.d.ts +1 -0
- package/dist/types/hooks/useRenderCount/useRenderCount.d.ts +1 -0
- package/dist/types/hooks/useRenderCount/useRenderCount.test.d.ts +1 -0
- package/package.json +18 -18
- package/src/components/Button/Button.css +8 -5
- package/src/components/Checkbox/Checkbox.test.tsx +2 -1
- package/src/components/Checkbox/Checkbox.tsx +7 -31
- package/src/components/Checkbox/CheckboxGroup.stories.tsx +15 -0
- package/src/components/Checkbox/CheckboxGroup.test.tsx +107 -1
- package/src/components/Checkbox/CheckboxGroup.tsx +45 -15
- package/src/components/Checkbox/types.ts +13 -6
- package/src/hooks/index.tsx +1 -0
- package/src/hooks/useDeprecationWarning/useDeprecationWarning.ts +1 -0
- package/src/hooks/useDialogPolyfill/useDialogPolyfill.ts +1 -0
- package/src/hooks/useRenderCount/index.ts +1 -0
- package/src/hooks/useRenderCount/useRenderCount.test.ts +26 -0
- package/src/hooks/useRenderCount/useRenderCount.ts +9 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,25 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 5.4.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- b4eec50: Add support for `lastItemDisables` on `CheckboxGroup` component
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- 2085451: Prevent calling `onChange` on `CheckboxGroup` on initial render
|
|
12
|
+
- 37bf8fa: Package updates
|
|
13
|
+
- Updated dependencies [5bc73ef]
|
|
14
|
+
- @simplybusiness/icons@4.15.0
|
|
15
|
+
|
|
16
|
+
## 5.3.1
|
|
17
|
+
|
|
18
|
+
### Patch Changes
|
|
19
|
+
|
|
20
|
+
- aa5f60e: Add USA Partner Network theme
|
|
21
|
+
- 91880ec: Add Tier 1 theme for UENI
|
|
22
|
+
|
|
3
23
|
## 5.3.0
|
|
4
24
|
|
|
5
25
|
### Minor Changes
|
|
@@ -24,8 +24,7 @@ function _interop_require_default(obj) {
|
|
|
24
24
|
};
|
|
25
25
|
}
|
|
26
26
|
const Checkbox = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
|
|
27
|
-
const { id, label, isDisabled, isRequired, validationState, isInvalid, onChange, className, errorMessage, defaultSelected = false, isReadOnly, name, value, ["aria-describedby"]: ariaDescribedBy, ...rest } = props;
|
|
28
|
-
const [selected, setSelected] = (0, _react.useState)(defaultSelected);
|
|
27
|
+
const { id, label, isDisabled, isRequired, validationState, isInvalid, onChange, className, errorMessage, selected, defaultSelected = false, isReadOnly, isLastItem, name, value, ["aria-describedby"]: ariaDescribedBy, ...rest } = props;
|
|
29
28
|
const fallbackRef = (0, _react.useRef)(null);
|
|
30
29
|
const refObj = ref || fallbackRef;
|
|
31
30
|
const inputId = (0, _react.useId)();
|
|
@@ -51,25 +50,12 @@ const Checkbox = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
|
|
|
51
50
|
ariaDescribedBy
|
|
52
51
|
]);
|
|
53
52
|
const labelId = (0, _react.useId)();
|
|
54
|
-
const toggleState = ()=>{
|
|
55
|
-
setSelected(!selected);
|
|
56
|
-
};
|
|
57
|
-
const handleClick = (event)=>{
|
|
58
|
-
const isMouseEvent = event.clientX;
|
|
59
|
-
if (isMouseEvent) {
|
|
60
|
-
toggleState();
|
|
61
|
-
}
|
|
62
|
-
};
|
|
63
53
|
const handleChange = (event)=>{
|
|
64
54
|
if (onChange) {
|
|
65
|
-
onChange(event);
|
|
66
|
-
}
|
|
67
|
-
};
|
|
68
|
-
const handleKeyDown = (event)=>{
|
|
69
|
-
if (event.code === "Space") {
|
|
70
|
-
toggleState();
|
|
55
|
+
onChange(event, isLastItem);
|
|
71
56
|
}
|
|
72
57
|
};
|
|
58
|
+
const isControlled = typeof props.selected === "boolean";
|
|
73
59
|
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.Stack, {
|
|
74
60
|
gap: "xs",
|
|
75
61
|
className: wrapperClasses,
|
|
@@ -86,11 +72,10 @@ const Checkbox = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
|
|
|
86
72
|
disabled: isDisabled,
|
|
87
73
|
ref: refObj,
|
|
88
74
|
className: inputClasses,
|
|
89
|
-
onClick: handleClick,
|
|
90
75
|
onChange: handleChange,
|
|
91
|
-
onKeyDown: handleKeyDown,
|
|
92
76
|
type: "checkbox",
|
|
93
|
-
|
|
77
|
+
checked: selected,
|
|
78
|
+
defaultChecked: isControlled ? undefined : defaultSelected,
|
|
94
79
|
required: isRequired,
|
|
95
80
|
id: id || inputId,
|
|
96
81
|
name: name,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport {
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport { ChangeEvent, forwardRef, useRef, useId } 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 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 handleChange = (event: ChangeEvent<CheckboxElementType>) => {\n if (onChange) {\n onChange(event, isLastItem);\n }\n };\n\n const isControlled = typeof props.selected === \"boolean\";\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={selected}\n defaultChecked={isControlled ? undefined : 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":["Checkbox","forwardRef","props","ref","id","label","isDisabled","isRequired","validationState","isInvalid","onChange","className","errorMessage","selected","defaultSelected","isReadOnly","isLastItem","name","value","ariaDescribedBy","rest","fallbackRef","useRef","refObj","inputId","useId","validationClasses","useValidationClasses","sharedClasses","classNames","wrapperClasses","labelClasses","inputClasses","iconClasses","errorMessageId","shouldErrorMessageShow","undefined","describedBy","spaceDelimitedList","labelId","handleChange","event","isControlled","Stack","gap","input","aria-describedby","aria-errormessage","aria-invalid","aria-labelledby","readOnly","disabled","type","checked","defaultChecked","required","Icon","icon","squareTick","square","size","span","ErrorMessage"],"mappings":"AAAA;;;;;+BAaaA;;;eAAAA;;;;uBAX0C;+DAChC;uBACY;8BACN;oCAGM;uBACE;sBAChB;uBACC;;;;;;AAEf,MAAMA,yBAGTC,IAAAA,iBAAU,EAAC,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,MAAMmB,cAAcC,IAAAA,aAAM,EAAmB;IAC7C,MAAMC,SAASpB,OAAOkB;IACtB,MAAMG,UAAUC,IAAAA,YAAK;IACrB,MAAMC,oBAAoBC,IAAAA,2BAAoB,EAAC;QAC7CnB;QACAC;IACF;IACA,MAAMmB,gBAAgBC,IAAAA,eAAU,EAC9B;QACE,iBAAiBvB;QACjB,iBAAiBO;QACjB,iBAAiB,OAAON,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD,GACAmB;IAEF,sEAAsE;IACtE,MAAMI,iBAAiBD,IAAAA,eAAU,EAC/B,UACA,mBACAD,eACAjB;IAEF,MAAMoB,eAAeF,IAAAA,eAAU,EAAC,0BAA0BD;IAC1D,MAAMI,eAAeH,IAAAA,eAAU,EAAC,0BAA0BD;IAC1D,MAAMK,cAAcJ,IAAAA,eAAU,EAAC,yBAAyBD;IACxD,MAAMM,iBAAiBT,IAAAA,YAAK;IAC5B,MAAMU,yBAAyBvB,eAAesB,iBAAiBE;IAC/D,MAAMC,cAAcC,IAAAA,sCAAkB,EAAC;QACrCH;QACAhB;KACD;IACD,MAAMoB,UAAUd,IAAAA,YAAK;IAErB,MAAMe,eAAe,CAACC;QACpB,IAAI/B,UAAU;YACZA,SAAS+B,OAAOzB;QAClB;IACF;IAEA,MAAM0B,eAAe,OAAOxC,MAAMW,QAAQ,KAAK;IAE/C,qBACE,sBAAC8B,YAAK;QAACC,KAAI;QAAKjC,WAAWmB;;0BACzB,sBAACzB;gBAAMM,WAAWoB;;kCAChB,qBAACc;wBACCC,oBAAkBT;wBAClBU,qBAAmBZ;wBACnBa,gBAAcvC;wBACdwC,mBAAiBV;wBACjBW,UAAUnC;wBACVoC,UAAU7C;wBACVH,KAAKoB;wBACLZ,WAAWqB;wBACXtB,UAAU8B;wBACVY,MAAK;wBACLC,SAASxC;wBACTyC,gBAAgBZ,eAAeN,YAAYtB;wBAC3CyC,UAAUhD;wBACVH,IAAIA,MAAMoB;wBACVP,MAAMA;wBACNC,OAAOA;wBACN,GAAGE,IAAI;;kCAEV,qBAACoC,UAAI;wBACHC,MAAM5C,WAAW6C,iBAAU,GAAGC,aAAM;wBACpCC,MAAK;wBACLjD,WAAWsB;;kCAEb,qBAAC4B;wBAAKzD,IAAImC;wBAAS5B,WAAU;kCAC1BN;;;;0BAGL,qBAACyD,0BAAY;gBAAC1D,IAAI8B;gBAAgBtB,cAAcA;;;;AAGtD"}
|
|
@@ -10,19 +10,20 @@ Object.defineProperty(exports, "CheckboxGroup", {
|
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
12
|
const _jsxruntime = require("react/jsx-runtime");
|
|
13
|
-
const _react = require("react");
|
|
14
13
|
const _dedupe = /*#__PURE__*/ _interop_require_default(require("classnames/dedupe"));
|
|
15
|
-
const
|
|
16
|
-
const _ErrorMessage = require("../ErrorMessage");
|
|
17
|
-
const _spaceDelimitedList = require("../../utils/spaceDelimitedList");
|
|
14
|
+
const _react = require("react");
|
|
18
15
|
const _hooks = require("../../hooks");
|
|
16
|
+
const _spaceDelimitedList = require("../../utils/spaceDelimitedList");
|
|
17
|
+
const _ErrorMessage = require("../ErrorMessage");
|
|
18
|
+
const _Label = require("../Label");
|
|
19
|
+
const _Checkbox = require("./Checkbox");
|
|
19
20
|
function _interop_require_default(obj) {
|
|
20
21
|
return obj && obj.__esModule ? obj : {
|
|
21
22
|
default: obj
|
|
22
23
|
};
|
|
23
24
|
}
|
|
24
25
|
const CheckboxGroup = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
|
|
25
|
-
const { label, isDisabled = false, isRequired, validationState, isInvalid, orientation = "vertical", onChange, className, errorMessage, children, defaultValue = [], isReadOnly, itemsPerRow, ...rest } = props;
|
|
26
|
+
const { label, isDisabled = false, isRequired, validationState, isInvalid, orientation = "vertical", onChange, className, errorMessage, children, defaultValue = [], isReadOnly, itemsPerRow, lastItemDisables = false, ...rest } = props;
|
|
26
27
|
const [selected, setSelected] = (0, _react.useState)(defaultValue);
|
|
27
28
|
const checkboxGroupClasses = (0, _dedupe.default)("mobius", "mobius-checkbox-group", className, {
|
|
28
29
|
"--is-horizontal": orientation === "horizontal",
|
|
@@ -44,11 +45,17 @@ const CheckboxGroup = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
|
|
|
44
45
|
props["aria-describedby"]
|
|
45
46
|
]);
|
|
46
47
|
const labelId = (0, _react.useId)();
|
|
47
|
-
const handleChange = (event)=>{
|
|
48
|
+
const handleChange = (event, isLastItem = false)=>{
|
|
48
49
|
const { target: { value, checked } } = event;
|
|
49
50
|
if (!checked) {
|
|
50
51
|
setSelected(selected.filter((item)=>item !== value));
|
|
51
52
|
}
|
|
53
|
+
if (checked && lastItemDisables && isLastItem) {
|
|
54
|
+
setSelected([
|
|
55
|
+
value
|
|
56
|
+
]);
|
|
57
|
+
return;
|
|
58
|
+
}
|
|
52
59
|
if (checked) {
|
|
53
60
|
setSelected([
|
|
54
61
|
...selected,
|
|
@@ -56,14 +63,21 @@ const CheckboxGroup = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
|
|
|
56
63
|
]);
|
|
57
64
|
}
|
|
58
65
|
};
|
|
66
|
+
// HACK: This is a workaround to ensure that the onChange event is not
|
|
67
|
+
// fired on the initial render.
|
|
68
|
+
const renderCount = (0, _hooks.useRenderCount)();
|
|
59
69
|
(0, _react.useEffect)(()=>{
|
|
60
|
-
if (onChange) {
|
|
70
|
+
if (onChange && renderCount > 1) {
|
|
61
71
|
onChange(selected);
|
|
62
72
|
}
|
|
63
73
|
}, [
|
|
64
74
|
selected,
|
|
65
|
-
onChange
|
|
75
|
+
onChange,
|
|
76
|
+
renderCount
|
|
66
77
|
]);
|
|
78
|
+
const childrenArray = _react.Children.toArray(children);
|
|
79
|
+
const lastCheckbox = childrenArray.filter((child)=>/*#__PURE__*/ (0, _react.isValidElement)(child) && child.type === _Checkbox.Checkbox).pop();
|
|
80
|
+
const lastCheckboxIsChecked = lastCheckbox && selected.includes(lastCheckbox.props.value);
|
|
67
81
|
return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
|
|
68
82
|
...rest,
|
|
69
83
|
"aria-labelledby": props["aria-labelledby"] || labelId,
|
|
@@ -82,14 +96,18 @@ const CheckboxGroup = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
|
|
|
82
96
|
}),
|
|
83
97
|
/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
|
|
84
98
|
className: "mobius-checkbox-group__wrapper",
|
|
85
|
-
children:
|
|
99
|
+
children: childrenArray.map((child)=>{
|
|
86
100
|
if (/*#__PURE__*/ (0, _react.isValidElement)(child)) {
|
|
101
|
+
// lastItemDisables support
|
|
102
|
+
const isLastItem = child === lastCheckbox;
|
|
103
|
+
const isChildDisabled = isDisabled || lastItemDisables && lastCheckboxIsChecked && !isLastItem;
|
|
87
104
|
return /*#__PURE__*/ (0, _react.cloneElement)(child, {
|
|
88
|
-
isDisabled,
|
|
105
|
+
isDisabled: isChildDisabled,
|
|
89
106
|
isRequired,
|
|
90
107
|
isReadOnly,
|
|
91
108
|
isInvalid,
|
|
92
|
-
|
|
109
|
+
isLastItem,
|
|
110
|
+
selected: selected.includes(child.props.value),
|
|
93
111
|
onChange: handleChange,
|
|
94
112
|
"aria-describedby": describedBy
|
|
95
113
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Checkbox/CheckboxGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n
|
|
1
|
+
{"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":["CheckboxGroup","forwardRef","props","ref","label","isDisabled","isRequired","validationState","isInvalid","orientation","onChange","className","errorMessage","children","defaultValue","isReadOnly","itemsPerRow","lastItemDisables","rest","selected","setSelected","useState","checkboxGroupClasses","classNames","validationClasses","useValidationClasses","labelClasses","errorMessageId","useId","shouldErrorMessageShow","undefined","describedBy","spaceDelimitedList","labelId","handleChange","event","isLastItem","target","value","checked","filter","item","renderCount","useRenderCount","useEffect","childrenArray","Children","toArray","lastCheckbox","child","isValidElement","type","Checkbox","pop","lastCheckboxIsChecked","includes","div","aria-labelledby","role","style","count","Label","elementType","id","map","isChildDisabled","cloneElement","ErrorMessage"],"mappings":"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"}
|
package/dist/cjs/hooks/index.js
CHANGED
|
@@ -11,6 +11,7 @@ _export_star(require("./useDialogPolyfill"), exports);
|
|
|
11
11
|
_export_star(require("./useLabel"), exports);
|
|
12
12
|
_export_star(require("./useOnClickOutside"), exports);
|
|
13
13
|
_export_star(require("./usePrefersReducedMotion"), exports);
|
|
14
|
+
_export_star(require("./useRenderCount"), exports);
|
|
14
15
|
_export_star(require("./useTextField"), exports);
|
|
15
16
|
_export_star(require("./useValidationClasses"), exports);
|
|
16
17
|
_export_star(require("./useWindowEvent"), exports);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/hooks/index.tsx"],"sourcesContent":["export * from \"./useBodyScrollLock\";\nexport * from \"./useBreakpoint\";\nexport * from \"./useButton\";\nexport * from \"./useDeprecationWarning\";\nexport * from \"./useDialog\";\nexport * from \"./useDialogPolyfill\";\nexport * from \"./useLabel\";\nexport * from \"./useOnClickOutside\";\nexport * from \"./usePrefersReducedMotion\";\nexport * from \"./useTextField\";\nexport * from \"./useValidationClasses\";\nexport * from \"./useWindowEvent\";\n"],"names":[],"mappings":";;;;qBAAc;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA"}
|
|
1
|
+
{"version":3,"sources":["../../../src/hooks/index.tsx"],"sourcesContent":["export * from \"./useBodyScrollLock\";\nexport * from \"./useBreakpoint\";\nexport * from \"./useButton\";\nexport * from \"./useDeprecationWarning\";\nexport * from \"./useDialog\";\nexport * from \"./useDialogPolyfill\";\nexport * from \"./useLabel\";\nexport * from \"./useOnClickOutside\";\nexport * from \"./usePrefersReducedMotion\";\nexport * from \"./useRenderCount\";\nexport * from \"./useTextField\";\nexport * from \"./useValidationClasses\";\nexport * from \"./useWindowEvent\";\n"],"names":[],"mappings":";;;;qBAAc;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA"}
|
|
@@ -23,6 +23,7 @@ const useDeprecationWarning = (props)=>{
|
|
|
23
23
|
}
|
|
24
24
|
if (!hasWarned.current) {
|
|
25
25
|
deprecatedProps.forEach((prop)=>{
|
|
26
|
+
// eslint-disable-next-line no-console
|
|
26
27
|
console.warn(`Deprecation warning: Mobius no longer supports the prop '${prop}'. Please refer to the documentation for more information.`);
|
|
27
28
|
});
|
|
28
29
|
hasWarned.current = true;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/hooks/useDeprecationWarning/useDeprecationWarning.ts"],"sourcesContent":["import { useRef } from \"react\";\n\nexport type UseDeprecationWarningProps = Record<string, unknown>;\n\nexport const useDeprecationWarning = (props: UseDeprecationWarningProps) => {\n const hasWarned = useRef<boolean>(false);\n const deprecatedProps = Object.entries(props).reduce<string[]>(\n (acc, [key, value]) => {\n if (value) {\n acc.push(key);\n }\n\n return acc;\n },\n [],\n );\n\n const noDeprecatedProps = deprecatedProps.length === 0;\n\n if (noDeprecatedProps) {\n return;\n }\n\n if (!hasWarned.current) {\n deprecatedProps.forEach(prop => {\n console.warn(\n `Deprecation warning: Mobius no longer supports the prop '${prop}'. Please refer to the documentation for more information.`,\n );\n });\n\n hasWarned.current = true;\n }\n};\n"],"names":["useDeprecationWarning","props","hasWarned","useRef","deprecatedProps","Object","entries","reduce","acc","key","value","push","noDeprecatedProps","length","current","forEach","prop","console","warn"],"mappings":";;;;+BAIaA;;;eAAAA;;;uBAJU;AAIhB,MAAMA,wBAAwB,CAACC;IACpC,MAAMC,YAAYC,IAAAA,aAAM,EAAU;IAClC,MAAMC,kBAAkBC,OAAOC,OAAO,CAACL,OAAOM,MAAM,CAClD,CAACC,KAAK,CAACC,KAAKC,MAAM;QAChB,IAAIA,OAAO;YACTF,IAAIG,IAAI,CAACF;QACX;QAEA,OAAOD;IACT,GACA,EAAE;IAGJ,MAAMI,oBAAoBR,gBAAgBS,MAAM,KAAK;IAErD,IAAID,mBAAmB;QACrB;IACF;IAEA,IAAI,CAACV,UAAUY,OAAO,EAAE;QACtBV,gBAAgBW,OAAO,CAACC,CAAAA;
|
|
1
|
+
{"version":3,"sources":["../../../../src/hooks/useDeprecationWarning/useDeprecationWarning.ts"],"sourcesContent":["import { useRef } from \"react\";\n\nexport type UseDeprecationWarningProps = Record<string, unknown>;\n\nexport const useDeprecationWarning = (props: UseDeprecationWarningProps) => {\n const hasWarned = useRef<boolean>(false);\n const deprecatedProps = Object.entries(props).reduce<string[]>(\n (acc, [key, value]) => {\n if (value) {\n acc.push(key);\n }\n\n return acc;\n },\n [],\n );\n\n const noDeprecatedProps = deprecatedProps.length === 0;\n\n if (noDeprecatedProps) {\n return;\n }\n\n if (!hasWarned.current) {\n deprecatedProps.forEach(prop => {\n // eslint-disable-next-line no-console\n console.warn(\n `Deprecation warning: Mobius no longer supports the prop '${prop}'. Please refer to the documentation for more information.`,\n );\n });\n\n hasWarned.current = true;\n }\n};\n"],"names":["useDeprecationWarning","props","hasWarned","useRef","deprecatedProps","Object","entries","reduce","acc","key","value","push","noDeprecatedProps","length","current","forEach","prop","console","warn"],"mappings":";;;;+BAIaA;;;eAAAA;;;uBAJU;AAIhB,MAAMA,wBAAwB,CAACC;IACpC,MAAMC,YAAYC,IAAAA,aAAM,EAAU;IAClC,MAAMC,kBAAkBC,OAAOC,OAAO,CAACL,OAAOM,MAAM,CAClD,CAACC,KAAK,CAACC,KAAKC,MAAM;QAChB,IAAIA,OAAO;YACTF,IAAIG,IAAI,CAACF;QACX;QAEA,OAAOD;IACT,GACA,EAAE;IAGJ,MAAMI,oBAAoBR,gBAAgBS,MAAM,KAAK;IAErD,IAAID,mBAAmB;QACrB;IACF;IAEA,IAAI,CAACV,UAAUY,OAAO,EAAE;QACtBV,gBAAgBW,OAAO,CAACC,CAAAA;YACtB,sCAAsC;YACtCC,QAAQC,IAAI,CACV,CAAC,yDAAyD,EAAEF,KAAK,0DAA0D,CAAC;QAEhI;QAEAd,UAAUY,OAAO,GAAG;IACtB;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/hooks/useDialogPolyfill/useDialogPolyfill.ts"],"sourcesContent":["import { MutableRefObject, useEffect, useRef, useState } from \"react\";\nimport { supportsDialog } from \"../../utils\";\n\n// Add polyfill for HTML Dialog in old browsers\nexport const useDialogPolyfill = () => {\n const [hasDialogSupport, setHasDialogSupport] = useState(false);\n const hasAlreadyLoaded = useRef(false);\n\n useEffect(() => {\n setHasDialogSupport(supportsDialog());\n }, []);\n\n const polyfillDialog = async (\n ref: MutableRefObject<HTMLDialogElement | null>,\n ) => {\n if (\n !hasAlreadyLoaded.current &&\n !hasDialogSupport &&\n typeof window !== \"undefined\" &&\n ref.current !== null\n ) {\n const { default: dialogPolyfill } = await import(\"dialog-polyfill\");\n hasAlreadyLoaded.current = true;\n\n try {\n dialogPolyfill.registerDialog(ref.current);\n } catch (error) {\n console.error(\"Failed to load dialog-polyfill\", error);\n }\n }\n };\n\n return {\n polyfillDialog,\n };\n};\n"],"names":["useDialogPolyfill","hasDialogSupport","setHasDialogSupport","useState","hasAlreadyLoaded","useRef","useEffect","supportsDialog","polyfillDialog","ref","current","window","default","dialogPolyfill","registerDialog","error","console"],"mappings":";;;;+BAIaA;;;eAAAA;;;uBAJiD;uBAC/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGxB,MAAMA,oBAAoB;IAC/B,MAAM,CAACC,kBAAkBC,oBAAoB,GAAGC,IAAAA,eAAQ,EAAC;IACzD,MAAMC,mBAAmBC,IAAAA,aAAM,EAAC;IAEhCC,IAAAA,gBAAS,EAAC;QACRJ,oBAAoBK,IAAAA,qBAAc;IACpC,GAAG,EAAE;IAEL,MAAMC,iBAAiB,OACrBC;QAEA,IACE,CAACL,iBAAiBM,OAAO,IACzB,CAACT,oBACD,OAAOU,WAAW,eAClBF,IAAIC,OAAO,KAAK,MAChB;YACA,MAAM,EAAEE,SAASC,cAAc,EAAE,GAAG,MAAM,mEAAA,QAAO;YACjDT,iBAAiBM,OAAO,GAAG;YAE3B,IAAI;gBACFG,eAAeC,cAAc,CAACL,IAAIC,OAAO;YAC3C,EAAE,OAAOK,OAAO;
|
|
1
|
+
{"version":3,"sources":["../../../../src/hooks/useDialogPolyfill/useDialogPolyfill.ts"],"sourcesContent":["import { MutableRefObject, useEffect, useRef, useState } from \"react\";\nimport { supportsDialog } from \"../../utils\";\n\n// Add polyfill for HTML Dialog in old browsers\nexport const useDialogPolyfill = () => {\n const [hasDialogSupport, setHasDialogSupport] = useState(false);\n const hasAlreadyLoaded = useRef(false);\n\n useEffect(() => {\n setHasDialogSupport(supportsDialog());\n }, []);\n\n const polyfillDialog = async (\n ref: MutableRefObject<HTMLDialogElement | null>,\n ) => {\n if (\n !hasAlreadyLoaded.current &&\n !hasDialogSupport &&\n typeof window !== \"undefined\" &&\n ref.current !== null\n ) {\n const { default: dialogPolyfill } = await import(\"dialog-polyfill\");\n hasAlreadyLoaded.current = true;\n\n try {\n dialogPolyfill.registerDialog(ref.current);\n } catch (error) {\n // eslint-disable-next-line no-console\n console.error(\"Failed to load dialog-polyfill\", error);\n }\n }\n };\n\n return {\n polyfillDialog,\n };\n};\n"],"names":["useDialogPolyfill","hasDialogSupport","setHasDialogSupport","useState","hasAlreadyLoaded","useRef","useEffect","supportsDialog","polyfillDialog","ref","current","window","default","dialogPolyfill","registerDialog","error","console"],"mappings":";;;;+BAIaA;;;eAAAA;;;uBAJiD;uBAC/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGxB,MAAMA,oBAAoB;IAC/B,MAAM,CAACC,kBAAkBC,oBAAoB,GAAGC,IAAAA,eAAQ,EAAC;IACzD,MAAMC,mBAAmBC,IAAAA,aAAM,EAAC;IAEhCC,IAAAA,gBAAS,EAAC;QACRJ,oBAAoBK,IAAAA,qBAAc;IACpC,GAAG,EAAE;IAEL,MAAMC,iBAAiB,OACrBC;QAEA,IACE,CAACL,iBAAiBM,OAAO,IACzB,CAACT,oBACD,OAAOU,WAAW,eAClBF,IAAIC,OAAO,KAAK,MAChB;YACA,MAAM,EAAEE,SAASC,cAAc,EAAE,GAAG,MAAM,mEAAA,QAAO;YACjDT,iBAAiBM,OAAO,GAAG;YAE3B,IAAI;gBACFG,eAAeC,cAAc,CAACL,IAAIC,OAAO;YAC3C,EAAE,OAAOK,OAAO;gBACd,sCAAsC;gBACtCC,QAAQD,KAAK,CAAC,kCAAkCA;YAClD;QACF;IACF;IAEA,OAAO;QACLP;IACF;AACF"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
_export_star(require("./useRenderCount"), exports);
|
|
6
|
+
function _export_star(from, to) {
|
|
7
|
+
Object.keys(from).forEach(function(k) {
|
|
8
|
+
if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
|
|
9
|
+
Object.defineProperty(to, k, {
|
|
10
|
+
enumerable: true,
|
|
11
|
+
get: function() {
|
|
12
|
+
return from[k];
|
|
13
|
+
}
|
|
14
|
+
});
|
|
15
|
+
}
|
|
16
|
+
});
|
|
17
|
+
return from;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../src/hooks/useRenderCount/index.ts"],"sourcesContent":["export * from \"./useRenderCount\";\n"],"names":[],"mappings":";;;;qBAAc"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
Object.defineProperty(exports, "useRenderCount", {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: function() {
|
|
8
|
+
return useRenderCount;
|
|
9
|
+
}
|
|
10
|
+
});
|
|
11
|
+
const _react = require("react");
|
|
12
|
+
function useRenderCount() {
|
|
13
|
+
const count = (0, _react.useRef)(1);
|
|
14
|
+
(0, _react.useEffect)(()=>{
|
|
15
|
+
count.current += 1;
|
|
16
|
+
});
|
|
17
|
+
return count.current;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
//# sourceMappingURL=useRenderCount.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../src/hooks/useRenderCount/useRenderCount.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\n\nexport function useRenderCount() {\n const count = useRef(1);\n useEffect(() => {\n count.current += 1;\n });\n return count.current;\n}\n"],"names":["useRenderCount","count","useRef","useEffect","current"],"mappings":";;;;+BAEgBA;;;eAAAA;;;uBAFkB;AAE3B,SAASA;IACd,MAAMC,QAAQC,IAAAA,aAAM,EAAC;IACrBC,IAAAA,gBAAS,EAAC;QACRF,MAAMG,OAAO,IAAI;IACnB;IACA,OAAOH,MAAMG,OAAO;AACtB"}
|