@yamada-ui/checkbox 1.3.0 → 1.3.1-dev-20241201045027
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/dist/checkbox-card-group.js +78 -44
- package/dist/checkbox-card-group.js.map +1 -1
- package/dist/checkbox-card-group.mjs +5 -5
- package/dist/checkbox-card.js +78 -44
- package/dist/checkbox-card.js.map +1 -1
- package/dist/checkbox-card.mjs +3 -3
- package/dist/checkbox-group.js +78 -44
- package/dist/checkbox-group.js.map +1 -1
- package/dist/checkbox-group.mjs +4 -4
- package/dist/checkbox.d.mts +16 -0
- package/dist/checkbox.d.ts +16 -0
- package/dist/checkbox.js +78 -44
- package/dist/checkbox.js.map +1 -1
- package/dist/checkbox.mjs +2 -2
- package/dist/{chunk-YKJPEUZC.mjs → chunk-A2JXM6CV.mjs} +67 -37
- package/dist/chunk-A2JXM6CV.mjs.map +1 -0
- package/dist/{chunk-4RRLZHGB.mjs → chunk-AMQ63CU2.mjs} +3 -3
- package/dist/{chunk-T4XJ55LG.mjs → chunk-D2MZMI2W.mjs} +3 -3
- package/dist/{chunk-LSEGOUL4.mjs → chunk-KRCEAKWH.mjs} +14 -10
- package/dist/chunk-KRCEAKWH.mjs.map +1 -0
- package/dist/{chunk-LDQSOOV2.mjs → chunk-LF6W4EB7.mjs} +3 -3
- package/dist/{chunk-3D6OL2QO.mjs → chunk-PH5Y6VMS.mjs} +1 -1
- package/dist/chunk-PH5Y6VMS.mjs.map +1 -0
- package/dist/index.js +78 -44
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +6 -6
- package/dist/use-checkbox-group.d.mts +2 -0
- package/dist/use-checkbox-group.d.ts +2 -0
- package/dist/use-checkbox-group.js.map +1 -1
- package/dist/use-checkbox-group.mjs +1 -1
- package/dist/use-checkbox.d.mts +51 -1
- package/dist/use-checkbox.d.ts +51 -1
- package/dist/use-checkbox.js +66 -36
- package/dist/use-checkbox.js.map +1 -1
- package/dist/use-checkbox.mjs +1 -1
- package/package.json +1 -1
- package/dist/chunk-3D6OL2QO.mjs.map +0 -1
- package/dist/chunk-LSEGOUL4.mjs.map +0 -1
- package/dist/chunk-YKJPEUZC.mjs.map +0 -1
- /package/dist/{chunk-4RRLZHGB.mjs.map → chunk-AMQ63CU2.mjs.map} +0 -0
- /package/dist/{chunk-T4XJ55LG.mjs.map → chunk-D2MZMI2W.mjs.map} +0 -0
- /package/dist/{chunk-LDQSOOV2.mjs.map → chunk-LF6W4EB7.mjs.map} +0 -0
package/dist/checkbox.js
CHANGED
|
@@ -57,10 +57,13 @@ var useCheckbox = ({
|
|
|
57
57
|
}) => {
|
|
58
58
|
const uuid = (0, import_react.useId)();
|
|
59
59
|
id != null ? id : id = uuid;
|
|
60
|
-
|
|
60
|
+
let {
|
|
61
61
|
id: _id,
|
|
62
62
|
name,
|
|
63
|
+
checked: checkedProp,
|
|
64
|
+
defaultChecked,
|
|
63
65
|
defaultIsChecked,
|
|
66
|
+
indeterminate,
|
|
64
67
|
isChecked: isCheckedProp,
|
|
65
68
|
isIndeterminate,
|
|
66
69
|
selectOnEnter,
|
|
@@ -69,6 +72,9 @@ var useCheckbox = ({
|
|
|
69
72
|
onChange: onChangeProp,
|
|
70
73
|
...computedProps
|
|
71
74
|
} = (0, import_form_control.useFormControlProps)({ id, ...props });
|
|
75
|
+
checkedProp != null ? checkedProp : checkedProp = isCheckedProp;
|
|
76
|
+
indeterminate != null ? indeterminate : indeterminate = isIndeterminate;
|
|
77
|
+
defaultChecked != null ? defaultChecked : defaultChecked = defaultIsChecked;
|
|
72
78
|
const [
|
|
73
79
|
{
|
|
74
80
|
"aria-readonly": _ariaReadonly,
|
|
@@ -81,26 +87,26 @@ var useCheckbox = ({
|
|
|
81
87
|
},
|
|
82
88
|
rest
|
|
83
89
|
] = (0, import_utils2.splitObject)(computedProps, import_form_control.formControlProperties);
|
|
84
|
-
const [
|
|
85
|
-
const [
|
|
86
|
-
const [
|
|
87
|
-
const [
|
|
90
|
+
const [focusVisible, setFocusVisible] = (0, import_react.useState)(false);
|
|
91
|
+
const [focused, setFocused] = (0, import_react.useState)(false);
|
|
92
|
+
const [hovered, setHovered] = (0, import_react.useState)(false);
|
|
93
|
+
const [active, setActive] = (0, import_react.useState)(false);
|
|
88
94
|
const inputRef = (0, import_react.useRef)(null);
|
|
89
|
-
const [
|
|
90
|
-
const [isChecked, setIsChecked] = (0, import_react.useState)(!!
|
|
91
|
-
const
|
|
92
|
-
const checked =
|
|
95
|
+
const [label, setLabel] = (0, import_react.useState)(true);
|
|
96
|
+
const [isChecked, setIsChecked] = (0, import_react.useState)(!!defaultChecked);
|
|
97
|
+
const controlled = checkedProp !== void 0;
|
|
98
|
+
const checked = controlled ? checkedProp : isChecked;
|
|
93
99
|
const onChange = (0, import_utils2.useCallbackRef)(
|
|
94
100
|
(ev) => {
|
|
95
101
|
if (readOnly || disabled) {
|
|
96
102
|
ev.preventDefault();
|
|
97
103
|
return;
|
|
98
104
|
}
|
|
99
|
-
if (!
|
|
100
|
-
setIsChecked(!checked ||
|
|
105
|
+
if (!controlled)
|
|
106
|
+
setIsChecked(!checked || indeterminate ? true : ev.target.checked);
|
|
101
107
|
onChangeProp == null ? void 0 : onChangeProp(ev);
|
|
102
108
|
},
|
|
103
|
-
[readOnly, disabled,
|
|
109
|
+
[readOnly, disabled, controlled, checked, indeterminate]
|
|
104
110
|
);
|
|
105
111
|
const onFocus = (0, import_utils2.useCallbackRef)(onFocusProp);
|
|
106
112
|
const onBlur = (0, import_utils2.useCallbackRef)(onBlurProp);
|
|
@@ -119,7 +125,7 @@ var useCheckbox = ({
|
|
|
119
125
|
[setActive]
|
|
120
126
|
);
|
|
121
127
|
(0, import_react.useEffect)(() => {
|
|
122
|
-
return (0, import_use_focus_visible.trackFocusVisible)(
|
|
128
|
+
return (0, import_use_focus_visible.trackFocusVisible)(setFocusVisible);
|
|
123
129
|
}, []);
|
|
124
130
|
(0, import_utils2.useSafeLayoutEffect)(() => {
|
|
125
131
|
if (inputRef.current)
|
|
@@ -131,7 +137,7 @@ var useCheckbox = ({
|
|
|
131
137
|
(0, import_utils2.useSafeLayoutEffect)(() => {
|
|
132
138
|
var _a;
|
|
133
139
|
if (!((_a = inputRef.current) == null ? void 0 : _a.form)) return;
|
|
134
|
-
inputRef.current.form.onreset = () => setIsChecked(!!
|
|
140
|
+
inputRef.current.form.onreset = () => setIsChecked(!!defaultChecked);
|
|
135
141
|
}, []);
|
|
136
142
|
(0, import_utils2.useSafeLayoutEffect)(() => {
|
|
137
143
|
if (!inputRef.current) return;
|
|
@@ -143,14 +149,14 @@ var useCheckbox = ({
|
|
|
143
149
|
...formControlProps,
|
|
144
150
|
...props2,
|
|
145
151
|
ref: (0, import_utils2.mergeRefs)(ref, (el) => {
|
|
146
|
-
if (el)
|
|
152
|
+
if (el) setLabel(el.tagName === "LABEL");
|
|
147
153
|
}),
|
|
148
154
|
"data-checked": (0, import_utils2.dataAttr)(checked),
|
|
149
|
-
"data-focus": (0, import_utils2.dataAttr)(
|
|
150
|
-
"data-focus-visible": (0, import_utils2.dataAttr)(
|
|
155
|
+
"data-focus": (0, import_utils2.dataAttr)(focused),
|
|
156
|
+
"data-focus-visible": (0, import_utils2.dataAttr)(focused && focusVisible),
|
|
151
157
|
onClick: (0, import_utils2.handlerAll)(props2.onClick, () => {
|
|
152
158
|
var _a;
|
|
153
|
-
if (
|
|
159
|
+
if (label) return;
|
|
154
160
|
(_a = inputRef.current) == null ? void 0 : _a.click();
|
|
155
161
|
requestAnimationFrame(() => {
|
|
156
162
|
var _a2;
|
|
@@ -158,7 +164,7 @@ var useCheckbox = ({
|
|
|
158
164
|
});
|
|
159
165
|
})
|
|
160
166
|
}),
|
|
161
|
-
[checked,
|
|
167
|
+
[checked, label, focused, focusVisible, formControlProps]
|
|
162
168
|
);
|
|
163
169
|
const getIconProps = (0, import_react.useCallback)(
|
|
164
170
|
(props2 = {}, ref = null) => ({
|
|
@@ -166,14 +172,14 @@ var useCheckbox = ({
|
|
|
166
172
|
...props2,
|
|
167
173
|
ref,
|
|
168
174
|
"aria-hidden": true,
|
|
169
|
-
"data-active": (0, import_utils2.dataAttr)(
|
|
175
|
+
"data-active": (0, import_utils2.dataAttr)(active),
|
|
170
176
|
"data-checked": (0, import_utils2.dataAttr)(checked),
|
|
171
|
-
"data-focus": (0, import_utils2.dataAttr)(
|
|
172
|
-
"data-focus-visible": (0, import_utils2.dataAttr)(
|
|
173
|
-
"data-hover": (0, import_utils2.dataAttr)(
|
|
174
|
-
"data-indeterminate": (0, import_utils2.dataAttr)(
|
|
177
|
+
"data-focus": (0, import_utils2.dataAttr)(focused),
|
|
178
|
+
"data-focus-visible": (0, import_utils2.dataAttr)(focused && focusVisible),
|
|
179
|
+
"data-hover": (0, import_utils2.dataAttr)(hovered),
|
|
180
|
+
"data-indeterminate": (0, import_utils2.dataAttr)(indeterminate),
|
|
175
181
|
onMouseDown: (0, import_utils2.handlerAll)(props2.onMouseDown, (ev) => {
|
|
176
|
-
if (
|
|
182
|
+
if (focused) ev.preventDefault();
|
|
177
183
|
setActive(true);
|
|
178
184
|
}),
|
|
179
185
|
onMouseEnter: (0, import_utils2.handlerAll)(props2.onMouseEnter, () => setHovered(true)),
|
|
@@ -181,12 +187,12 @@ var useCheckbox = ({
|
|
|
181
187
|
onMouseUp: (0, import_utils2.handlerAll)(props2.onMouseUp, () => setActive(false))
|
|
182
188
|
}),
|
|
183
189
|
[
|
|
184
|
-
|
|
190
|
+
active,
|
|
185
191
|
checked,
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
192
|
+
focused,
|
|
193
|
+
hovered,
|
|
194
|
+
focusVisible,
|
|
195
|
+
indeterminate,
|
|
190
196
|
formControlProps
|
|
191
197
|
]
|
|
192
198
|
);
|
|
@@ -209,7 +215,7 @@ var useCheckbox = ({
|
|
|
209
215
|
whiteSpace: "nowrap",
|
|
210
216
|
width: "1px"
|
|
211
217
|
},
|
|
212
|
-
"aria-checked":
|
|
218
|
+
"aria-checked": indeterminate ? "mixed" : checked,
|
|
213
219
|
checked,
|
|
214
220
|
disabled,
|
|
215
221
|
readOnly,
|
|
@@ -223,7 +229,7 @@ var useCheckbox = ({
|
|
|
223
229
|
onKeyUp: (0, import_utils2.handlerAll)(props2.onKeyUp, onKeyUp)
|
|
224
230
|
}),
|
|
225
231
|
[
|
|
226
|
-
|
|
232
|
+
indeterminate,
|
|
227
233
|
formControlProps,
|
|
228
234
|
id,
|
|
229
235
|
name,
|
|
@@ -258,11 +264,35 @@ var useCheckbox = ({
|
|
|
258
264
|
[checked, formControlProps]
|
|
259
265
|
);
|
|
260
266
|
return {
|
|
261
|
-
|
|
267
|
+
active,
|
|
268
|
+
checked,
|
|
269
|
+
focused,
|
|
270
|
+
focusVisible,
|
|
271
|
+
hovered,
|
|
272
|
+
indeterminate,
|
|
273
|
+
/**
|
|
274
|
+
* @deprecated Use `active` instead.
|
|
275
|
+
*/
|
|
276
|
+
isActive: active,
|
|
277
|
+
/**
|
|
278
|
+
* @deprecated Use `checked` instead.
|
|
279
|
+
*/
|
|
262
280
|
isChecked: checked,
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
281
|
+
/**
|
|
282
|
+
* @deprecated Use `focused` instead.
|
|
283
|
+
*/
|
|
284
|
+
isFocused: focused,
|
|
285
|
+
/**
|
|
286
|
+
* @deprecated Use `focusVisible` instead.
|
|
287
|
+
*/
|
|
288
|
+
isFocusVisible: focusVisible,
|
|
289
|
+
/**
|
|
290
|
+
* @deprecated Use `hovered` instead.
|
|
291
|
+
*/
|
|
292
|
+
isHovered: hovered,
|
|
293
|
+
/**
|
|
294
|
+
* @deprecated Use `indeterminate` instead.
|
|
295
|
+
*/
|
|
266
296
|
isIndeterminate,
|
|
267
297
|
props: rest,
|
|
268
298
|
getContainerProps,
|
|
@@ -301,8 +331,8 @@ var Checkbox = (0, import_react2.forwardRef)(
|
|
|
301
331
|
const isCheckedProp = groupValue && computedProps.value ? groupValue.includes(computedProps.value) : computedProps.isChecked;
|
|
302
332
|
const onChange = groupProps.onChange && computedProps.value ? (0, import_utils3.funcAll)(groupProps.onChange, computedProps.onChange) : computedProps.onChange;
|
|
303
333
|
const {
|
|
304
|
-
|
|
305
|
-
|
|
334
|
+
checked,
|
|
335
|
+
indeterminate,
|
|
306
336
|
props: rest,
|
|
307
337
|
getContainerProps,
|
|
308
338
|
getIconProps,
|
|
@@ -319,15 +349,15 @@ var Checkbox = (0, import_react2.forwardRef)(
|
|
|
319
349
|
});
|
|
320
350
|
const { children: customIcon, ...resolvedIconProps } = { ...iconProps };
|
|
321
351
|
const icon = (0, import_react2.cloneElement)(customIcon != null ? customIcon : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckboxIcon, {}), {
|
|
322
|
-
|
|
352
|
+
checked,
|
|
353
|
+
indeterminate,
|
|
323
354
|
isDisabled,
|
|
324
|
-
isIndeterminate,
|
|
325
355
|
isInvalid,
|
|
326
356
|
isReadOnly,
|
|
327
357
|
isRequired,
|
|
328
358
|
__css: {
|
|
329
|
-
opacity:
|
|
330
|
-
transform:
|
|
359
|
+
opacity: checked || indeterminate ? 1 : 0,
|
|
360
|
+
transform: checked || indeterminate ? "scale(1)" : "scale(0.95)",
|
|
331
361
|
transitionDuration: "normal",
|
|
332
362
|
transitionProperty: "transform"
|
|
333
363
|
}
|
|
@@ -386,6 +416,8 @@ var Checkbox = (0, import_react2.forwardRef)(
|
|
|
386
416
|
Checkbox.displayName = "Checkbox";
|
|
387
417
|
Checkbox.__ui__ = "Checkbox";
|
|
388
418
|
var CheckboxIcon = ({
|
|
419
|
+
checked,
|
|
420
|
+
indeterminate,
|
|
389
421
|
isChecked,
|
|
390
422
|
isDisabled: _isDisabled,
|
|
391
423
|
isIndeterminate,
|
|
@@ -394,7 +426,9 @@ var CheckboxIcon = ({
|
|
|
394
426
|
isRequired: _isRequired,
|
|
395
427
|
...rest
|
|
396
428
|
}) => {
|
|
397
|
-
|
|
429
|
+
checked != null ? checked : checked = isChecked;
|
|
430
|
+
indeterminate != null ? indeterminate : indeterminate = isIndeterminate;
|
|
431
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_motion.AnimatePresence, { initial: false, children: indeterminate || checked ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
398
432
|
import_core.ui.div,
|
|
399
433
|
{
|
|
400
434
|
__css: {
|
|
@@ -418,7 +452,7 @@ var CheckboxIcon = ({
|
|
|
418
452
|
checked: { scale: 1 },
|
|
419
453
|
unchecked: { scale: 0.5 }
|
|
420
454
|
},
|
|
421
|
-
children:
|
|
455
|
+
children: indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckboxIndeterminateIcon, { ...rest }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckboxCheckIcon, { ...rest })
|
|
422
456
|
}
|
|
423
457
|
)
|
|
424
458
|
}
|
package/dist/checkbox.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/checkbox.tsx","../src/checkbox-context.tsx","../src/use-checkbox.ts"],"sourcesContent":["import type {\n ComponentArgs,\n FC,\n HTMLUIProps,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport type { MotionProps } from \"@yamada-ui/motion\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type {\n CSSProperties,\n ForwardedRef,\n InputHTMLAttributes,\n ReactElement,\n ReactNode,\n Ref,\n} from \"react\"\nimport type { UseCheckboxProps } from \"./use-checkbox\"\nimport { omitThemeProps, ui, useComponentMultiStyle } from \"@yamada-ui/core\"\nimport { useFormControl } from \"@yamada-ui/form-control\"\nimport { AnimatePresence, motion } from \"@yamada-ui/motion\"\nimport { cx, funcAll } from \"@yamada-ui/utils\"\nimport { cloneElement, forwardRef } from \"react\"\nimport { useCheckboxGroupContext } from \"./checkbox-context\"\nimport { useCheckbox } from \"./use-checkbox\"\n\ninterface CheckboxOptions {\n /**\n * The label of the checkbox.\n */\n label?: ReactNode\n /**\n * Props for icon component.\n */\n iconProps?: { children: ReactElement } & Omit<HTMLUIProps, \"children\">\n /**\n * Props for input element.\n */\n inputProps?: InputHTMLAttributes<HTMLInputElement>\n /**\n * Props for label element.\n */\n labelProps?: HTMLUIProps<\"span\">\n}\n\nexport interface CheckboxProps<Y extends number | string = string>\n extends Omit<Merge<HTMLUIProps<\"label\">, UseCheckboxProps<Y>>, \"checked\">,\n ThemeProps<\"Checkbox\">,\n CheckboxOptions {}\n\n/**\n * `Checkbox` is a component used for allowing users to select multiple values from multiple options.\n *\n * @see Docs https://yamada-ui.com/components/forms/checkbox\n */\nexport const Checkbox = forwardRef(\n <Y extends number | string = string>(\n props: CheckboxProps<Y>,\n ref: ForwardedRef<HTMLInputElement>,\n ) => {\n const group = useCheckboxGroupContext()\n const { value: groupValue, ...groupProps } = { ...group }\n const control = useFormControl(props)\n const [styles, mergedProps] = useComponentMultiStyle(\"Checkbox\", {\n ...groupProps,\n ...props,\n })\n const {\n className,\n children,\n gap = \"0.5rem\",\n isDisabled = groupProps.isDisabled ?? control.isDisabled,\n isInvalid = groupProps.isInvalid ?? control.isInvalid,\n isReadOnly = groupProps.isReadOnly ?? control.isReadOnly,\n isRequired = groupProps.isRequired ?? control.isRequired,\n label,\n iconProps,\n inputProps,\n labelProps,\n ...computedProps\n } = omitThemeProps(mergedProps)\n\n const isCheckedProp =\n groupValue && computedProps.value\n ? groupValue.includes(computedProps.value)\n : computedProps.isChecked\n const onChange =\n groupProps.onChange && computedProps.value\n ? funcAll(groupProps.onChange, computedProps.onChange)\n : computedProps.onChange\n\n const {\n isChecked,\n isIndeterminate,\n props: rest,\n getContainerProps,\n getIconProps,\n getInputProps,\n getLabelProps,\n } = useCheckbox({\n ...computedProps,\n isChecked: isCheckedProp,\n isDisabled,\n isInvalid,\n isReadOnly,\n isRequired,\n onChange,\n })\n\n const { children: customIcon, ...resolvedIconProps } = { ...iconProps }\n const icon = cloneElement(customIcon ?? <CheckboxIcon />, {\n isChecked,\n isDisabled,\n isIndeterminate,\n isInvalid,\n isReadOnly,\n isRequired,\n __css: {\n opacity: isChecked || isIndeterminate ? 1 : 0,\n transform: isChecked || isIndeterminate ? \"scale(1)\" : \"scale(0.95)\",\n transitionDuration: \"normal\",\n transitionProperty: \"transform\",\n },\n })\n\n return (\n <ui.label\n className={cx(\"ui-checkbox\", className)}\n {...getContainerProps()}\n __css={{\n alignItems: \"center\",\n cursor: \"pointer\",\n display: \"inline-flex\",\n gap,\n position: \"relative\",\n verticalAlign: \"top\",\n ...styles.container,\n }}\n {...rest}\n >\n <ui.input\n className=\"ui-checkbox__input\"\n {...getInputProps(inputProps, ref)}\n />\n\n <ui.div\n className=\"ui-checkbox__icon\"\n __css={{\n display: \"inline-block\",\n position: \"relative\",\n userSelect: \"none\",\n ...styles.icon,\n }}\n {...getIconProps(resolvedIconProps)}\n >\n {icon}\n </ui.div>\n\n <ui.span\n className=\"ui-checkbox__label\"\n __css={{ ...styles.label }}\n {...getLabelProps(labelProps)}\n >\n {children ?? label}\n </ui.span>\n </ui.label>\n )\n },\n) as {\n <Y extends number | string = string>(\n props: { ref?: Ref<HTMLInputElement> } & CheckboxProps<Y>,\n ): ReactElement\n} & ComponentArgs\n\nCheckbox.displayName = \"Checkbox\"\nCheckbox.__ui__ = \"Checkbox\"\n\nexport type CheckboxIconProps = {\n /**\n * If `true`, the icon will be checked.\n *\n * @default false\n */\n isChecked?: boolean\n /**\n * If `true`, the icon will be indeterminate.\n *\n * @default false\n */\n isIndeterminate?: boolean\n} & FormControlOptions &\n MotionProps<\"svg\">\n\nexport const CheckboxIcon: FC<CheckboxIconProps> = ({\n isChecked,\n isDisabled: _isDisabled,\n isIndeterminate,\n isInvalid: _isInvalid,\n isReadOnly: _isReadOnly,\n isRequired: _isRequired,\n ...rest\n}) => {\n return (\n <AnimatePresence initial={false}>\n {isIndeterminate || isChecked ? (\n <ui.div\n __css={{\n left: \"50%\",\n position: \"absolute\",\n top: \"50%\",\n transform: \"translate(-50%, -50%)\",\n }}\n >\n <motion.div\n style={\n {\n alignItems: \"center\",\n display: \"flex\",\n justifyContent: \"center\",\n } as CSSProperties\n }\n animate=\"checked\"\n exit=\"unchecked\"\n initial=\"unchecked\"\n variants={{\n checked: { scale: 1 },\n unchecked: { scale: 0.5 },\n }}\n >\n {isIndeterminate ? (\n <CheckboxIndeterminateIcon {...rest} />\n ) : (\n <CheckboxCheckIcon {...rest} />\n )}\n </motion.div>\n </ui.div>\n ) : null}\n </AnimatePresence>\n )\n}\n\nCheckboxIcon.displayName = \"CheckboxIcon\"\nCheckboxIcon.__ui__ = \"CheckboxIcon\"\n\ninterface CheckboxCheckIconProps extends MotionProps<\"svg\"> {}\n\nconst CheckboxCheckIcon: FC<CheckboxCheckIconProps> = (props) => {\n return (\n <motion.svg\n style={{\n fill: \"none\",\n stroke: \"currentColor\",\n strokeDasharray: 16,\n strokeWidth: 2,\n }}\n variants={{\n checked: {\n opacity: 1,\n strokeDashoffset: 0,\n transition: { duration: 0.2 },\n },\n unchecked: {\n opacity: 0,\n strokeDashoffset: 16,\n },\n }}\n viewBox=\"0 0 12 10\"\n width=\"1.2em\"\n {...props}\n >\n <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n </motion.svg>\n )\n}\n\nCheckboxCheckIcon.displayName = \"CheckboxCheckIcon\"\nCheckboxCheckIcon.__ui__ = \"CheckboxCheckIcon\"\n\ninterface CheckboxIndeterminateIconProps extends MotionProps<\"svg\"> {}\n\nconst CheckboxIndeterminateIcon: FC<CheckboxIndeterminateIconProps> = (\n props,\n) => {\n return (\n <motion.svg\n style={{ stroke: \"currentColor\", strokeWidth: 4 }}\n variants={{\n checked: {\n opacity: 1,\n scaleX: 1,\n transition: {\n opacity: { duration: 0.02 },\n scaleX: { duration: 0 },\n },\n },\n unchecked: {\n opacity: 0,\n scaleX: 0.65,\n },\n }}\n viewBox=\"0 0 24 24\"\n width=\"1.2em\"\n {...props}\n >\n <line x1=\"21\" x2=\"3\" y1=\"12\" y2=\"12\" />\n </motion.svg>\n )\n}\n\nCheckboxIndeterminateIcon.displayName = \"CheckboxIndeterminateIcon\"\nCheckboxIndeterminateIcon.__ui__ = \"CheckboxIndeterminateIcon\"\n","import type {\n CSSUIObject,\n HTMLUIProps,\n PropGetter,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport type { ChangeEvent, ReactElement } from \"react\"\nimport type { CheckboxCardProps } from \"./checkbox-card\"\nimport { createContext } from \"@yamada-ui/utils\"\n\ninterface CheckboxGroupSharedContext extends FormControlOptions {\n value: (number | string)[]\n onChange: (evOrValue: ChangeEvent<HTMLInputElement> | number | string) => void\n}\n\nexport interface CheckboxGroupContext\n extends CheckboxGroupSharedContext,\n ThemeProps<\"Checkbox\">,\n FormControlOptions {}\n\nexport const [CheckboxGroupProvider, useCheckboxGroupContext] =\n createContext<CheckboxGroupContext>({\n name: \"CheckboxGroupContext\",\n strict: false,\n })\n\nexport interface CheckboxCardGroupContext\n extends CheckboxGroupSharedContext,\n Pick<\n CheckboxCardProps,\n \"addonProps\" | \"descriptionProps\" | \"labelProps\" | \"withIcon\"\n >,\n ThemeProps<\"CheckboxCard\"> {}\n\nexport const [CheckboxCardGroupProvider, useCheckboxCardGroupContext] =\n createContext<CheckboxCardGroupContext>({\n name: \"CheckboxCardGroupContext\",\n strict: false,\n })\n\nexport interface CheckboxCardContext {\n icon: ReactElement\n styles: { [key: string]: CSSUIObject | undefined }\n withIcon: boolean\n getIconProps: PropGetter\n iconProps?: HTMLUIProps\n}\n\nexport const [CheckboxCardProvider, useCheckboxCardContext] =\n createContext<CheckboxCardContext>({\n name: \"CheckboxCardContext\",\n errorMessage: `useCheckboxCardContext returned is 'undefined'. Seems you forgot to wrap the components in \"<CheckboxCard />\"`,\n })\n","import type { PropGetter } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport type {\n ChangeEvent,\n ChangeEventHandler,\n FocusEventHandler,\n KeyboardEvent,\n SyntheticEvent,\n} from \"react\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport { trackFocusVisible } from \"@yamada-ui/use-focus-visible\"\nimport {\n dataAttr,\n handlerAll,\n mergeRefs,\n splitObject,\n useCallbackRef,\n useSafeLayoutEffect,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\n\nexport interface UseCheckboxProps<Y extends number | string = string>\n extends FormControlOptions {\n /**\n * id assigned to input.\n */\n id?: string\n /**\n * The HTML `name` attribute used for forms.\n */\n name?: string\n /**\n * If `true`, the checkbox will be initially checked.\n *\n * @default false\n */\n defaultIsChecked?: boolean\n /**\n * If `true`, the checkbox will be checked.\n *\n * @default false\n */\n isChecked?: boolean\n /**\n * If `true`, the checkbox will be indeterminate.\n *\n * @default false\n */\n isIndeterminate?: boolean\n /**\n * If `true`, the checkbox will be selected when the Enter key is pressed.\n *\n * @default false\n */\n selectOnEnter?: boolean\n /**\n * The tab-index property of the underlying input element.\n */\n tabIndex?: number\n /**\n * The value to be used in the checkbox input.\n */\n value?: Y\n /**\n * The callback invoked when the checkbox is blurred.\n */\n onBlur?: FocusEventHandler<HTMLInputElement>\n /**\n * The callback invoked when the checked state changes.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>\n /**\n * The callback invoked when the checkbox is focused.\n */\n onFocus?: FocusEventHandler<HTMLInputElement>\n}\n\nexport const useCheckbox = <\n Y extends number | string = string,\n M extends Dict = Dict,\n>({\n id,\n ...props\n}: M & UseCheckboxProps<Y>) => {\n const uuid = useId()\n\n id ??= uuid\n\n const {\n id: _id,\n name,\n defaultIsChecked,\n isChecked: isCheckedProp,\n isIndeterminate,\n selectOnEnter,\n tabIndex,\n value,\n onChange: onChangeProp,\n ...computedProps\n } = useFormControlProps({ id, ...props })\n const [\n {\n \"aria-readonly\": _ariaReadonly,\n disabled,\n readOnly,\n required,\n onBlur: onBlurProp,\n onFocus: onFocusProp,\n ...formControlProps\n },\n rest,\n ] = splitObject(computedProps, formControlProperties)\n\n const [isFocusVisible, setIsFocusVisible] = useState<boolean>(false)\n const [isFocused, setFocused] = useState<boolean>(false)\n const [isHovered, setHovered] = useState<boolean>(false)\n const [isActive, setActive] = useState<boolean>(false)\n\n const inputRef = useRef<HTMLInputElement>(null)\n const [isLabel, setIsLabel] = useState<boolean>(true)\n\n const [isChecked, setIsChecked] = useState<boolean>(!!defaultIsChecked)\n\n const isControlled = isCheckedProp !== undefined\n const checked = isControlled ? (isCheckedProp as boolean) : isChecked\n\n const onChange = useCallbackRef(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (readOnly || disabled) {\n ev.preventDefault()\n\n return\n }\n\n if (!isControlled)\n setIsChecked(!checked || isIndeterminate ? true : ev.target.checked)\n\n onChangeProp?.(ev)\n },\n [readOnly, disabled, isControlled, checked, isIndeterminate],\n )\n const onFocus = useCallbackRef(onFocusProp)\n const onBlur = useCallbackRef(onBlurProp)\n\n const onKeyDown = useCallback(\n ({ key }: KeyboardEvent) => {\n if (key === \" \") setActive(true)\n\n if (selectOnEnter && key === \"Enter\") inputRef.current?.click()\n },\n [setActive, selectOnEnter],\n )\n\n const onKeyUp = useCallback(\n ({ key }: KeyboardEvent) => {\n if (key === \" \") setActive(false)\n },\n [setActive],\n )\n\n useEffect(() => {\n return trackFocusVisible(setIsFocusVisible)\n }, [])\n\n useSafeLayoutEffect(() => {\n if (inputRef.current)\n inputRef.current.indeterminate = Boolean(isIndeterminate)\n }, [isIndeterminate])\n\n useUpdateEffect(() => {\n if (disabled) setFocused(false)\n }, [disabled, setFocused])\n\n useSafeLayoutEffect(() => {\n if (!inputRef.current?.form) return\n\n inputRef.current.form.onreset = () => setIsChecked(!!defaultIsChecked)\n }, [])\n\n useSafeLayoutEffect(() => {\n if (!inputRef.current) return\n\n if (inputRef.current.checked !== checked)\n setIsChecked(inputRef.current.checked)\n }, [inputRef.current])\n\n const getContainerProps: PropGetter<\"label\"> = useCallback(\n (props = {}, ref = null) => ({\n ...formControlProps,\n ...props,\n ref: mergeRefs(ref, (el: HTMLElement | undefined) => {\n if (el) setIsLabel(el.tagName === \"LABEL\")\n }),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(isFocused),\n \"data-focus-visible\": dataAttr(isFocused && isFocusVisible),\n onClick: handlerAll(props.onClick, () => {\n if (isLabel) return\n\n inputRef.current?.click()\n\n requestAnimationFrame(() => inputRef.current?.focus())\n }),\n }),\n [checked, isLabel, isFocused, isFocusVisible, formControlProps],\n )\n\n const getIconProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...formControlProps,\n ...props,\n ref,\n \"aria-hidden\": true,\n \"data-active\": dataAttr(isActive),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(isFocused),\n \"data-focus-visible\": dataAttr(isFocused && isFocusVisible),\n \"data-hover\": dataAttr(isHovered),\n \"data-indeterminate\": dataAttr(isIndeterminate),\n onMouseDown: handlerAll(props.onMouseDown, (ev: React.MouseEvent) => {\n if (isFocused) ev.preventDefault()\n\n setActive(true)\n }),\n onMouseEnter: handlerAll(props.onMouseEnter, () => setHovered(true)),\n onMouseLeave: handlerAll(props.onMouseLeave, () => setHovered(false)),\n onMouseUp: handlerAll(props.onMouseUp, () => setActive(false)),\n }),\n [\n isActive,\n checked,\n isFocused,\n isHovered,\n isFocusVisible,\n isIndeterminate,\n formControlProps,\n ],\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n (props = {}, ref = null) => ({\n ...formControlProps,\n ...props,\n id,\n ref: mergeRefs(inputRef, ref),\n type: \"checkbox\",\n name,\n style: {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n margin: \"-1px\",\n overflow: \"hidden\",\n padding: \"0px\",\n position: \"absolute\",\n whiteSpace: \"nowrap\",\n width: \"1px\",\n },\n \"aria-checked\": isIndeterminate ? \"mixed\" : checked,\n checked,\n disabled,\n readOnly,\n required,\n tabIndex,\n value,\n onBlur: handlerAll(props.onBlur, onBlur, () => setFocused(false)),\n onChange: handlerAll(props.onChange, onChange),\n onFocus: handlerAll(props.onFocus, onFocus, () => setFocused(true)),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n onKeyUp: handlerAll(props.onKeyUp, onKeyUp),\n }),\n [\n isIndeterminate,\n formControlProps,\n id,\n name,\n value,\n tabIndex,\n required,\n disabled,\n readOnly,\n checked,\n onChange,\n onBlur,\n onFocus,\n onKeyDown,\n onKeyUp,\n ],\n )\n\n const getLabelProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...formControlProps,\n ...props,\n ref,\n \"data-checked\": dataAttr(checked),\n onMouseDown: handlerAll(props.onMouseDown, (ev: SyntheticEvent) => {\n ev.preventDefault()\n ev.stopPropagation()\n }),\n onTouchStart: handlerAll(props.onTouchStart, (ev: SyntheticEvent) => {\n ev.preventDefault()\n ev.stopPropagation()\n }),\n }),\n [checked, formControlProps],\n )\n\n return {\n isActive,\n isChecked: checked,\n isFocused,\n isFocusVisible,\n isHovered,\n isIndeterminate,\n props: rest,\n getContainerProps,\n getIconProps,\n getInputProps,\n getLabelProps,\n }\n}\n\nexport type UseCheckboxReturn = ReturnType<typeof useCheckbox>\n"],"mappings":"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","names":["import_form_control","import_utils","import_react","import_utils","props","_a"]}
|
|
1
|
+
{"version":3,"sources":["../src/checkbox.tsx","../src/checkbox-context.tsx","../src/use-checkbox.ts"],"sourcesContent":["import type {\n ComponentArgs,\n FC,\n HTMLUIProps,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport type { MotionProps } from \"@yamada-ui/motion\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type {\n CSSProperties,\n ForwardedRef,\n InputHTMLAttributes,\n ReactElement,\n ReactNode,\n Ref,\n} from \"react\"\nimport type { UseCheckboxProps } from \"./use-checkbox\"\nimport { omitThemeProps, ui, useComponentMultiStyle } from \"@yamada-ui/core\"\nimport { useFormControl } from \"@yamada-ui/form-control\"\nimport { AnimatePresence, motion } from \"@yamada-ui/motion\"\nimport { cx, funcAll } from \"@yamada-ui/utils\"\nimport { cloneElement, forwardRef } from \"react\"\nimport { useCheckboxGroupContext } from \"./checkbox-context\"\nimport { useCheckbox } from \"./use-checkbox\"\n\ninterface CheckboxOptions {\n /**\n * The label of the checkbox.\n */\n label?: ReactNode\n /**\n * Props for icon component.\n */\n iconProps?: { children: ReactElement } & Omit<HTMLUIProps, \"children\">\n /**\n * Props for input element.\n */\n inputProps?: InputHTMLAttributes<HTMLInputElement>\n /**\n * Props for label element.\n */\n labelProps?: HTMLUIProps<\"span\">\n}\n\nexport interface CheckboxProps<Y extends number | string = string>\n extends Omit<Merge<HTMLUIProps<\"label\">, UseCheckboxProps<Y>>, \"checked\">,\n ThemeProps<\"Checkbox\">,\n CheckboxOptions {}\n\n/**\n * `Checkbox` is a component used for allowing users to select multiple values from multiple options.\n *\n * @see Docs https://yamada-ui.com/components/forms/checkbox\n */\nexport const Checkbox = forwardRef(\n <Y extends number | string = string>(\n props: CheckboxProps<Y>,\n ref: ForwardedRef<HTMLInputElement>,\n ) => {\n const group = useCheckboxGroupContext()\n const { value: groupValue, ...groupProps } = { ...group }\n const control = useFormControl(props)\n const [styles, mergedProps] = useComponentMultiStyle(\"Checkbox\", {\n ...groupProps,\n ...props,\n })\n const {\n className,\n children,\n gap = \"0.5rem\",\n isDisabled = groupProps.isDisabled ?? control.isDisabled,\n isInvalid = groupProps.isInvalid ?? control.isInvalid,\n isReadOnly = groupProps.isReadOnly ?? control.isReadOnly,\n isRequired = groupProps.isRequired ?? control.isRequired,\n label,\n iconProps,\n inputProps,\n labelProps,\n ...computedProps\n } = omitThemeProps(mergedProps)\n\n const isCheckedProp =\n groupValue && computedProps.value\n ? groupValue.includes(computedProps.value)\n : computedProps.isChecked\n const onChange =\n groupProps.onChange && computedProps.value\n ? funcAll(groupProps.onChange, computedProps.onChange)\n : computedProps.onChange\n\n const {\n checked,\n indeterminate,\n props: rest,\n getContainerProps,\n getIconProps,\n getInputProps,\n getLabelProps,\n } = useCheckbox({\n ...computedProps,\n isChecked: isCheckedProp,\n isDisabled,\n isInvalid,\n isReadOnly,\n isRequired,\n onChange,\n })\n\n const { children: customIcon, ...resolvedIconProps } = { ...iconProps }\n const icon = cloneElement(customIcon ?? <CheckboxIcon />, {\n checked,\n indeterminate,\n isDisabled,\n isInvalid,\n isReadOnly,\n isRequired,\n __css: {\n opacity: checked || indeterminate ? 1 : 0,\n transform: checked || indeterminate ? \"scale(1)\" : \"scale(0.95)\",\n transitionDuration: \"normal\",\n transitionProperty: \"transform\",\n },\n })\n\n return (\n <ui.label\n className={cx(\"ui-checkbox\", className)}\n {...getContainerProps()}\n __css={{\n alignItems: \"center\",\n cursor: \"pointer\",\n display: \"inline-flex\",\n gap,\n position: \"relative\",\n verticalAlign: \"top\",\n ...styles.container,\n }}\n {...rest}\n >\n <ui.input\n className=\"ui-checkbox__input\"\n {...getInputProps(inputProps, ref)}\n />\n\n <ui.div\n className=\"ui-checkbox__icon\"\n __css={{\n display: \"inline-block\",\n position: \"relative\",\n userSelect: \"none\",\n ...styles.icon,\n }}\n {...getIconProps(resolvedIconProps)}\n >\n {icon}\n </ui.div>\n\n <ui.span\n className=\"ui-checkbox__label\"\n __css={{ ...styles.label }}\n {...getLabelProps(labelProps)}\n >\n {children ?? label}\n </ui.span>\n </ui.label>\n )\n },\n) as {\n <Y extends number | string = string>(\n props: { ref?: Ref<HTMLInputElement> } & CheckboxProps<Y>,\n ): ReactElement\n} & ComponentArgs\n\nCheckbox.displayName = \"Checkbox\"\nCheckbox.__ui__ = \"Checkbox\"\n\nexport type CheckboxIconProps = {\n /**\n * If `true`, the icon will be checked.\n *\n * @default false\n */\n checked?: boolean\n /**\n * If `true`, the icon will be indeterminate.\n *\n * @default false\n */\n indeterminate?: boolean\n /**\n * If `true`, the icon will be checked.\n *\n * @default false\n *\n * @deprecated Use `checked` instead.\n */\n isChecked?: boolean\n /**\n * If `true`, the icon will be indeterminate.\n *\n * @default false\n *\n * @deprecated Use `indeterminate` instead.\n */\n isIndeterminate?: boolean\n} & FormControlOptions &\n MotionProps<\"svg\">\n\nexport const CheckboxIcon: FC<CheckboxIconProps> = ({\n checked,\n indeterminate,\n isChecked,\n isDisabled: _isDisabled,\n isIndeterminate,\n isInvalid: _isInvalid,\n isReadOnly: _isReadOnly,\n isRequired: _isRequired,\n ...rest\n}) => {\n checked ??= isChecked\n indeterminate ??= isIndeterminate\n\n return (\n <AnimatePresence initial={false}>\n {indeterminate || checked ? (\n <ui.div\n __css={{\n left: \"50%\",\n position: \"absolute\",\n top: \"50%\",\n transform: \"translate(-50%, -50%)\",\n }}\n >\n <motion.div\n style={\n {\n alignItems: \"center\",\n display: \"flex\",\n justifyContent: \"center\",\n } as CSSProperties\n }\n animate=\"checked\"\n exit=\"unchecked\"\n initial=\"unchecked\"\n variants={{\n checked: { scale: 1 },\n unchecked: { scale: 0.5 },\n }}\n >\n {indeterminate ? (\n <CheckboxIndeterminateIcon {...rest} />\n ) : (\n <CheckboxCheckIcon {...rest} />\n )}\n </motion.div>\n </ui.div>\n ) : null}\n </AnimatePresence>\n )\n}\n\nCheckboxIcon.displayName = \"CheckboxIcon\"\nCheckboxIcon.__ui__ = \"CheckboxIcon\"\n\ninterface CheckboxCheckIconProps extends MotionProps<\"svg\"> {}\n\nconst CheckboxCheckIcon: FC<CheckboxCheckIconProps> = (props) => {\n return (\n <motion.svg\n style={{\n fill: \"none\",\n stroke: \"currentColor\",\n strokeDasharray: 16,\n strokeWidth: 2,\n }}\n variants={{\n checked: {\n opacity: 1,\n strokeDashoffset: 0,\n transition: { duration: 0.2 },\n },\n unchecked: {\n opacity: 0,\n strokeDashoffset: 16,\n },\n }}\n viewBox=\"0 0 12 10\"\n width=\"1.2em\"\n {...props}\n >\n <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n </motion.svg>\n )\n}\n\nCheckboxCheckIcon.displayName = \"CheckboxCheckIcon\"\nCheckboxCheckIcon.__ui__ = \"CheckboxCheckIcon\"\n\ninterface CheckboxIndeterminateIconProps extends MotionProps<\"svg\"> {}\n\nconst CheckboxIndeterminateIcon: FC<CheckboxIndeterminateIconProps> = (\n props,\n) => {\n return (\n <motion.svg\n style={{ stroke: \"currentColor\", strokeWidth: 4 }}\n variants={{\n checked: {\n opacity: 1,\n scaleX: 1,\n transition: {\n opacity: { duration: 0.02 },\n scaleX: { duration: 0 },\n },\n },\n unchecked: {\n opacity: 0,\n scaleX: 0.65,\n },\n }}\n viewBox=\"0 0 24 24\"\n width=\"1.2em\"\n {...props}\n >\n <line x1=\"21\" x2=\"3\" y1=\"12\" y2=\"12\" />\n </motion.svg>\n )\n}\n\nCheckboxIndeterminateIcon.displayName = \"CheckboxIndeterminateIcon\"\nCheckboxIndeterminateIcon.__ui__ = \"CheckboxIndeterminateIcon\"\n","import type {\n CSSUIObject,\n HTMLUIProps,\n PropGetter,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport type { ChangeEvent, ReactElement } from \"react\"\nimport type { CheckboxCardProps } from \"./checkbox-card\"\nimport { createContext } from \"@yamada-ui/utils\"\n\ninterface CheckboxGroupSharedContext extends FormControlOptions {\n value: (number | string)[]\n onChange: (evOrValue: ChangeEvent<HTMLInputElement> | number | string) => void\n}\n\nexport interface CheckboxGroupContext\n extends CheckboxGroupSharedContext,\n ThemeProps<\"Checkbox\">,\n FormControlOptions {}\n\nexport const [CheckboxGroupProvider, useCheckboxGroupContext] =\n createContext<CheckboxGroupContext>({\n name: \"CheckboxGroupContext\",\n strict: false,\n })\n\nexport interface CheckboxCardGroupContext\n extends CheckboxGroupSharedContext,\n Pick<\n CheckboxCardProps,\n \"addonProps\" | \"descriptionProps\" | \"labelProps\" | \"withIcon\"\n >,\n ThemeProps<\"CheckboxCard\"> {}\n\nexport const [CheckboxCardGroupProvider, useCheckboxCardGroupContext] =\n createContext<CheckboxCardGroupContext>({\n name: \"CheckboxCardGroupContext\",\n strict: false,\n })\n\nexport interface CheckboxCardContext {\n icon: ReactElement\n styles: { [key: string]: CSSUIObject | undefined }\n withIcon: boolean\n getIconProps: PropGetter\n iconProps?: HTMLUIProps\n}\n\nexport const [CheckboxCardProvider, useCheckboxCardContext] =\n createContext<CheckboxCardContext>({\n name: \"CheckboxCardContext\",\n errorMessage: `useCheckboxCardContext returned is 'undefined'. Seems you forgot to wrap the components in \"<CheckboxCard />\"`,\n })\n","import type { PropGetter } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport type {\n ChangeEvent,\n ChangeEventHandler,\n FocusEventHandler,\n KeyboardEvent,\n SyntheticEvent,\n} from \"react\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport { trackFocusVisible } from \"@yamada-ui/use-focus-visible\"\nimport {\n dataAttr,\n handlerAll,\n mergeRefs,\n splitObject,\n useCallbackRef,\n useSafeLayoutEffect,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\n\nexport interface UseCheckboxProps<Y extends number | string = string>\n extends FormControlOptions {\n /**\n * id assigned to input.\n */\n id?: string\n /**\n * The HTML `name` attribute used for forms.\n */\n name?: string\n /**\n * If `true`, the checkbox will be checked.\n *\n * @default false\n */\n checked?: boolean\n /**\n * If `true`, the checkbox will be initially checked.\n *\n * @default false\n */\n defaultChecked?: boolean\n /**\n * If `true`, the checkbox will be initially checked.\n *\n * @default false\n *\n * @deprecated Use `defaultChecked` instead.\n */\n defaultIsChecked?: boolean\n /**\n * If `true`, the checkbox will be indeterminate.\n *\n * @default false\n */\n indeterminate?: boolean\n /**\n * If `true`, the checkbox will be checked.\n *\n * @default false\n *\n * @deprecated Use `checked` instead.\n */\n isChecked?: boolean\n /**\n * If `true`, the checkbox will be indeterminate.\n *\n * @default false\n *\n * @deprecated Use `indeterminate` instead.\n */\n isIndeterminate?: boolean\n /**\n * If `true`, the checkbox will be selected when the Enter key is pressed.\n *\n * @default false\n */\n selectOnEnter?: boolean\n /**\n * The tab-index property of the underlying input element.\n */\n tabIndex?: number\n /**\n * The value to be used in the checkbox input.\n */\n value?: Y\n /**\n * The callback invoked when the checkbox is blurred.\n */\n onBlur?: FocusEventHandler<HTMLInputElement>\n /**\n * The callback invoked when the checked state changes.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>\n /**\n * The callback invoked when the checkbox is focused.\n */\n onFocus?: FocusEventHandler<HTMLInputElement>\n}\n\nexport const useCheckbox = <\n Y extends number | string = string,\n M extends Dict = Dict,\n>({\n id,\n ...props\n}: M & UseCheckboxProps<Y>) => {\n const uuid = useId()\n\n id ??= uuid\n\n let {\n id: _id,\n name,\n checked: checkedProp,\n defaultChecked,\n defaultIsChecked,\n indeterminate,\n isChecked: isCheckedProp,\n isIndeterminate,\n selectOnEnter,\n tabIndex,\n value,\n onChange: onChangeProp,\n ...computedProps\n } = useFormControlProps({ id, ...props })\n\n checkedProp ??= isCheckedProp\n indeterminate ??= isIndeterminate\n defaultChecked ??= defaultIsChecked\n\n const [\n {\n \"aria-readonly\": _ariaReadonly,\n disabled,\n readOnly,\n required,\n onBlur: onBlurProp,\n onFocus: onFocusProp,\n ...formControlProps\n },\n rest,\n ] = splitObject(computedProps, formControlProperties)\n\n const [focusVisible, setFocusVisible] = useState<boolean>(false)\n const [focused, setFocused] = useState<boolean>(false)\n const [hovered, setHovered] = useState<boolean>(false)\n const [active, setActive] = useState<boolean>(false)\n\n const inputRef = useRef<HTMLInputElement>(null)\n const [label, setLabel] = useState<boolean>(true)\n\n const [isChecked, setIsChecked] = useState<boolean>(!!defaultChecked)\n\n const controlled = checkedProp !== undefined\n const checked = controlled ? (checkedProp as boolean) : isChecked\n\n const onChange = useCallbackRef(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (readOnly || disabled) {\n ev.preventDefault()\n\n return\n }\n\n if (!controlled)\n setIsChecked(!checked || indeterminate ? true : ev.target.checked)\n\n onChangeProp?.(ev)\n },\n [readOnly, disabled, controlled, checked, indeterminate],\n )\n const onFocus = useCallbackRef(onFocusProp)\n const onBlur = useCallbackRef(onBlurProp)\n\n const onKeyDown = useCallback(\n ({ key }: KeyboardEvent) => {\n if (key === \" \") setActive(true)\n\n if (selectOnEnter && key === \"Enter\") inputRef.current?.click()\n },\n [setActive, selectOnEnter],\n )\n\n const onKeyUp = useCallback(\n ({ key }: KeyboardEvent) => {\n if (key === \" \") setActive(false)\n },\n [setActive],\n )\n\n useEffect(() => {\n return trackFocusVisible(setFocusVisible)\n }, [])\n\n useSafeLayoutEffect(() => {\n if (inputRef.current)\n inputRef.current.indeterminate = Boolean(isIndeterminate)\n }, [isIndeterminate])\n\n useUpdateEffect(() => {\n if (disabled) setFocused(false)\n }, [disabled, setFocused])\n\n useSafeLayoutEffect(() => {\n if (!inputRef.current?.form) return\n\n inputRef.current.form.onreset = () => setIsChecked(!!defaultChecked)\n }, [])\n\n useSafeLayoutEffect(() => {\n if (!inputRef.current) return\n\n if (inputRef.current.checked !== checked)\n setIsChecked(inputRef.current.checked)\n }, [inputRef.current])\n\n const getContainerProps: PropGetter<\"label\"> = useCallback(\n (props = {}, ref = null) => ({\n ...formControlProps,\n ...props,\n ref: mergeRefs(ref, (el: HTMLElement | undefined) => {\n if (el) setLabel(el.tagName === \"LABEL\")\n }),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(focused),\n \"data-focus-visible\": dataAttr(focused && focusVisible),\n onClick: handlerAll(props.onClick, () => {\n if (label) return\n\n inputRef.current?.click()\n\n requestAnimationFrame(() => inputRef.current?.focus())\n }),\n }),\n [checked, label, focused, focusVisible, formControlProps],\n )\n\n const getIconProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...formControlProps,\n ...props,\n ref,\n \"aria-hidden\": true,\n \"data-active\": dataAttr(active),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(focused),\n \"data-focus-visible\": dataAttr(focused && focusVisible),\n \"data-hover\": dataAttr(hovered),\n \"data-indeterminate\": dataAttr(indeterminate),\n onMouseDown: handlerAll(props.onMouseDown, (ev: React.MouseEvent) => {\n if (focused) ev.preventDefault()\n\n setActive(true)\n }),\n onMouseEnter: handlerAll(props.onMouseEnter, () => setHovered(true)),\n onMouseLeave: handlerAll(props.onMouseLeave, () => setHovered(false)),\n onMouseUp: handlerAll(props.onMouseUp, () => setActive(false)),\n }),\n [\n active,\n checked,\n focused,\n hovered,\n focusVisible,\n indeterminate,\n formControlProps,\n ],\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n (props = {}, ref = null) => ({\n ...formControlProps,\n ...props,\n id,\n ref: mergeRefs(inputRef, ref),\n type: \"checkbox\",\n name,\n style: {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n margin: \"-1px\",\n overflow: \"hidden\",\n padding: \"0px\",\n position: \"absolute\",\n whiteSpace: \"nowrap\",\n width: \"1px\",\n },\n \"aria-checked\": indeterminate ? \"mixed\" : checked,\n checked,\n disabled,\n readOnly,\n required,\n tabIndex,\n value,\n onBlur: handlerAll(props.onBlur, onBlur, () => setFocused(false)),\n onChange: handlerAll(props.onChange, onChange),\n onFocus: handlerAll(props.onFocus, onFocus, () => setFocused(true)),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n onKeyUp: handlerAll(props.onKeyUp, onKeyUp),\n }),\n [\n indeterminate,\n formControlProps,\n id,\n name,\n value,\n tabIndex,\n required,\n disabled,\n readOnly,\n checked,\n onChange,\n onBlur,\n onFocus,\n onKeyDown,\n onKeyUp,\n ],\n )\n\n const getLabelProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...formControlProps,\n ...props,\n ref,\n \"data-checked\": dataAttr(checked),\n onMouseDown: handlerAll(props.onMouseDown, (ev: SyntheticEvent) => {\n ev.preventDefault()\n ev.stopPropagation()\n }),\n onTouchStart: handlerAll(props.onTouchStart, (ev: SyntheticEvent) => {\n ev.preventDefault()\n ev.stopPropagation()\n }),\n }),\n [checked, formControlProps],\n )\n\n return {\n active,\n checked,\n focused,\n focusVisible,\n hovered,\n indeterminate,\n /**\n * @deprecated Use `active` instead.\n */\n isActive: active,\n /**\n * @deprecated Use `checked` instead.\n */\n isChecked: checked,\n /**\n * @deprecated Use `focused` instead.\n */\n isFocused: focused,\n /**\n * @deprecated Use `focusVisible` instead.\n */\n isFocusVisible: focusVisible,\n /**\n * @deprecated Use `hovered` instead.\n */\n isHovered: hovered,\n /**\n * @deprecated Use `indeterminate` instead.\n */\n isIndeterminate,\n props: rest,\n getContainerProps,\n getIconProps,\n getInputProps,\n getLabelProps,\n }\n}\n\nexport type UseCheckboxReturn = ReturnType<typeof useCheckbox>\n"],"mappings":"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","names":["import_form_control","import_utils","import_react","import_utils","props","_a"]}
|
package/dist/checkbox.mjs
CHANGED
|
@@ -22,10 +22,13 @@ var useCheckbox = ({
|
|
|
22
22
|
}) => {
|
|
23
23
|
const uuid = useId();
|
|
24
24
|
id != null ? id : id = uuid;
|
|
25
|
-
|
|
25
|
+
let {
|
|
26
26
|
id: _id,
|
|
27
27
|
name,
|
|
28
|
+
checked: checkedProp,
|
|
29
|
+
defaultChecked,
|
|
28
30
|
defaultIsChecked,
|
|
31
|
+
indeterminate,
|
|
29
32
|
isChecked: isCheckedProp,
|
|
30
33
|
isIndeterminate,
|
|
31
34
|
selectOnEnter,
|
|
@@ -34,6 +37,9 @@ var useCheckbox = ({
|
|
|
34
37
|
onChange: onChangeProp,
|
|
35
38
|
...computedProps
|
|
36
39
|
} = useFormControlProps({ id, ...props });
|
|
40
|
+
checkedProp != null ? checkedProp : checkedProp = isCheckedProp;
|
|
41
|
+
indeterminate != null ? indeterminate : indeterminate = isIndeterminate;
|
|
42
|
+
defaultChecked != null ? defaultChecked : defaultChecked = defaultIsChecked;
|
|
37
43
|
const [
|
|
38
44
|
{
|
|
39
45
|
"aria-readonly": _ariaReadonly,
|
|
@@ -46,26 +52,26 @@ var useCheckbox = ({
|
|
|
46
52
|
},
|
|
47
53
|
rest
|
|
48
54
|
] = splitObject(computedProps, formControlProperties);
|
|
49
|
-
const [
|
|
50
|
-
const [
|
|
51
|
-
const [
|
|
52
|
-
const [
|
|
55
|
+
const [focusVisible, setFocusVisible] = useState(false);
|
|
56
|
+
const [focused, setFocused] = useState(false);
|
|
57
|
+
const [hovered, setHovered] = useState(false);
|
|
58
|
+
const [active, setActive] = useState(false);
|
|
53
59
|
const inputRef = useRef(null);
|
|
54
|
-
const [
|
|
55
|
-
const [isChecked, setIsChecked] = useState(!!
|
|
56
|
-
const
|
|
57
|
-
const checked =
|
|
60
|
+
const [label, setLabel] = useState(true);
|
|
61
|
+
const [isChecked, setIsChecked] = useState(!!defaultChecked);
|
|
62
|
+
const controlled = checkedProp !== void 0;
|
|
63
|
+
const checked = controlled ? checkedProp : isChecked;
|
|
58
64
|
const onChange = useCallbackRef(
|
|
59
65
|
(ev) => {
|
|
60
66
|
if (readOnly || disabled) {
|
|
61
67
|
ev.preventDefault();
|
|
62
68
|
return;
|
|
63
69
|
}
|
|
64
|
-
if (!
|
|
65
|
-
setIsChecked(!checked ||
|
|
70
|
+
if (!controlled)
|
|
71
|
+
setIsChecked(!checked || indeterminate ? true : ev.target.checked);
|
|
66
72
|
onChangeProp == null ? void 0 : onChangeProp(ev);
|
|
67
73
|
},
|
|
68
|
-
[readOnly, disabled,
|
|
74
|
+
[readOnly, disabled, controlled, checked, indeterminate]
|
|
69
75
|
);
|
|
70
76
|
const onFocus = useCallbackRef(onFocusProp);
|
|
71
77
|
const onBlur = useCallbackRef(onBlurProp);
|
|
@@ -84,7 +90,7 @@ var useCheckbox = ({
|
|
|
84
90
|
[setActive]
|
|
85
91
|
);
|
|
86
92
|
useEffect(() => {
|
|
87
|
-
return trackFocusVisible(
|
|
93
|
+
return trackFocusVisible(setFocusVisible);
|
|
88
94
|
}, []);
|
|
89
95
|
useSafeLayoutEffect(() => {
|
|
90
96
|
if (inputRef.current)
|
|
@@ -96,7 +102,7 @@ var useCheckbox = ({
|
|
|
96
102
|
useSafeLayoutEffect(() => {
|
|
97
103
|
var _a;
|
|
98
104
|
if (!((_a = inputRef.current) == null ? void 0 : _a.form)) return;
|
|
99
|
-
inputRef.current.form.onreset = () => setIsChecked(!!
|
|
105
|
+
inputRef.current.form.onreset = () => setIsChecked(!!defaultChecked);
|
|
100
106
|
}, []);
|
|
101
107
|
useSafeLayoutEffect(() => {
|
|
102
108
|
if (!inputRef.current) return;
|
|
@@ -108,14 +114,14 @@ var useCheckbox = ({
|
|
|
108
114
|
...formControlProps,
|
|
109
115
|
...props2,
|
|
110
116
|
ref: mergeRefs(ref, (el) => {
|
|
111
|
-
if (el)
|
|
117
|
+
if (el) setLabel(el.tagName === "LABEL");
|
|
112
118
|
}),
|
|
113
119
|
"data-checked": dataAttr(checked),
|
|
114
|
-
"data-focus": dataAttr(
|
|
115
|
-
"data-focus-visible": dataAttr(
|
|
120
|
+
"data-focus": dataAttr(focused),
|
|
121
|
+
"data-focus-visible": dataAttr(focused && focusVisible),
|
|
116
122
|
onClick: handlerAll(props2.onClick, () => {
|
|
117
123
|
var _a;
|
|
118
|
-
if (
|
|
124
|
+
if (label) return;
|
|
119
125
|
(_a = inputRef.current) == null ? void 0 : _a.click();
|
|
120
126
|
requestAnimationFrame(() => {
|
|
121
127
|
var _a2;
|
|
@@ -123,7 +129,7 @@ var useCheckbox = ({
|
|
|
123
129
|
});
|
|
124
130
|
})
|
|
125
131
|
}),
|
|
126
|
-
[checked,
|
|
132
|
+
[checked, label, focused, focusVisible, formControlProps]
|
|
127
133
|
);
|
|
128
134
|
const getIconProps = useCallback(
|
|
129
135
|
(props2 = {}, ref = null) => ({
|
|
@@ -131,14 +137,14 @@ var useCheckbox = ({
|
|
|
131
137
|
...props2,
|
|
132
138
|
ref,
|
|
133
139
|
"aria-hidden": true,
|
|
134
|
-
"data-active": dataAttr(
|
|
140
|
+
"data-active": dataAttr(active),
|
|
135
141
|
"data-checked": dataAttr(checked),
|
|
136
|
-
"data-focus": dataAttr(
|
|
137
|
-
"data-focus-visible": dataAttr(
|
|
138
|
-
"data-hover": dataAttr(
|
|
139
|
-
"data-indeterminate": dataAttr(
|
|
142
|
+
"data-focus": dataAttr(focused),
|
|
143
|
+
"data-focus-visible": dataAttr(focused && focusVisible),
|
|
144
|
+
"data-hover": dataAttr(hovered),
|
|
145
|
+
"data-indeterminate": dataAttr(indeterminate),
|
|
140
146
|
onMouseDown: handlerAll(props2.onMouseDown, (ev) => {
|
|
141
|
-
if (
|
|
147
|
+
if (focused) ev.preventDefault();
|
|
142
148
|
setActive(true);
|
|
143
149
|
}),
|
|
144
150
|
onMouseEnter: handlerAll(props2.onMouseEnter, () => setHovered(true)),
|
|
@@ -146,12 +152,12 @@ var useCheckbox = ({
|
|
|
146
152
|
onMouseUp: handlerAll(props2.onMouseUp, () => setActive(false))
|
|
147
153
|
}),
|
|
148
154
|
[
|
|
149
|
-
|
|
155
|
+
active,
|
|
150
156
|
checked,
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
157
|
+
focused,
|
|
158
|
+
hovered,
|
|
159
|
+
focusVisible,
|
|
160
|
+
indeterminate,
|
|
155
161
|
formControlProps
|
|
156
162
|
]
|
|
157
163
|
);
|
|
@@ -174,7 +180,7 @@ var useCheckbox = ({
|
|
|
174
180
|
whiteSpace: "nowrap",
|
|
175
181
|
width: "1px"
|
|
176
182
|
},
|
|
177
|
-
"aria-checked":
|
|
183
|
+
"aria-checked": indeterminate ? "mixed" : checked,
|
|
178
184
|
checked,
|
|
179
185
|
disabled,
|
|
180
186
|
readOnly,
|
|
@@ -188,7 +194,7 @@ var useCheckbox = ({
|
|
|
188
194
|
onKeyUp: handlerAll(props2.onKeyUp, onKeyUp)
|
|
189
195
|
}),
|
|
190
196
|
[
|
|
191
|
-
|
|
197
|
+
indeterminate,
|
|
192
198
|
formControlProps,
|
|
193
199
|
id,
|
|
194
200
|
name,
|
|
@@ -223,11 +229,35 @@ var useCheckbox = ({
|
|
|
223
229
|
[checked, formControlProps]
|
|
224
230
|
);
|
|
225
231
|
return {
|
|
226
|
-
|
|
232
|
+
active,
|
|
233
|
+
checked,
|
|
234
|
+
focused,
|
|
235
|
+
focusVisible,
|
|
236
|
+
hovered,
|
|
237
|
+
indeterminate,
|
|
238
|
+
/**
|
|
239
|
+
* @deprecated Use `active` instead.
|
|
240
|
+
*/
|
|
241
|
+
isActive: active,
|
|
242
|
+
/**
|
|
243
|
+
* @deprecated Use `checked` instead.
|
|
244
|
+
*/
|
|
227
245
|
isChecked: checked,
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
246
|
+
/**
|
|
247
|
+
* @deprecated Use `focused` instead.
|
|
248
|
+
*/
|
|
249
|
+
isFocused: focused,
|
|
250
|
+
/**
|
|
251
|
+
* @deprecated Use `focusVisible` instead.
|
|
252
|
+
*/
|
|
253
|
+
isFocusVisible: focusVisible,
|
|
254
|
+
/**
|
|
255
|
+
* @deprecated Use `hovered` instead.
|
|
256
|
+
*/
|
|
257
|
+
isHovered: hovered,
|
|
258
|
+
/**
|
|
259
|
+
* @deprecated Use `indeterminate` instead.
|
|
260
|
+
*/
|
|
231
261
|
isIndeterminate,
|
|
232
262
|
props: rest,
|
|
233
263
|
getContainerProps,
|
|
@@ -240,4 +270,4 @@ var useCheckbox = ({
|
|
|
240
270
|
export {
|
|
241
271
|
useCheckbox
|
|
242
272
|
};
|
|
243
|
-
//# sourceMappingURL=chunk-
|
|
273
|
+
//# sourceMappingURL=chunk-A2JXM6CV.mjs.map
|