@yamada-ui/checkbox 1.1.7 → 1.1.8-dev-20240917033401
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-context.d.mts +13 -0
- package/dist/checkbox-context.d.ts +13 -0
- package/dist/checkbox-context.js +38 -0
- package/dist/checkbox-context.js.map +1 -0
- package/dist/checkbox-context.mjs +10 -0
- package/dist/checkbox-context.mjs.map +1 -0
- package/dist/checkbox-group.d.mts +15 -22
- package/dist/checkbox-group.d.ts +15 -22
- package/dist/checkbox-group.js +51 -48
- package/dist/checkbox-group.js.map +1 -1
- package/dist/checkbox-group.mjs +5 -5
- package/dist/checkbox.d.mts +19 -125
- package/dist/checkbox.d.ts +19 -125
- package/dist/checkbox.js +36 -149
- package/dist/checkbox.js.map +1 -1
- package/dist/checkbox.mjs +2 -1
- package/dist/chunk-IZINMNYX.mjs +14 -0
- package/dist/chunk-IZINMNYX.mjs.map +1 -0
- package/dist/chunk-J27S43KM.mjs +134 -0
- package/dist/chunk-J27S43KM.mjs.map +1 -0
- package/dist/{chunk-DMNICJ3Z.mjs → chunk-LP6DPNQY.mjs} +36 -164
- package/dist/chunk-LP6DPNQY.mjs.map +1 -0
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +152 -149
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +7 -4
- package/package.json +8 -8
- package/dist/chunk-DMNICJ3Z.mjs.map +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/checkbox-group.tsx"],"sourcesContent":["import type { ComponentArgs, ThemeProps, PropGetter } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport { useFormControl } from \"@yamada-ui/form-control\"\nimport type { FlexProps } from \"@yamada-ui/layouts\"\nimport { Flex } from \"@yamada-ui/layouts\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport {\n cx,\n isObject,\n useCallbackRef,\n getValidChildren,\n} from \"@yamada-ui/utils\"\nimport type {\n ChangeEvent,\n ForwardedRef,\n ReactElement,\n RefAttributes,\n} from \"react\"\nimport { forwardRef, useCallback } from \"react\"\nimport type { CheckboxProps } from \"./checkbox\"\nimport { Checkbox } from \"./checkbox\"\nimport type { CheckboxGroupContext } from \"./checkbox-context\"\nimport { CheckboxGroupProvider } from \"./checkbox-context\"\n\nexport interface CheckboxItem<Y extends string | number = string>\n extends CheckboxProps<Y> {\n label?: string\n}\n\nconst isEvent = (value: any): value is { target: HTMLInputElement } =>\n value && isObject(value) && isObject(value.target)\n\nexport interface UseCheckboxGroupProps<Y extends string | number = string> {\n /**\n * The value of the checkbox group.\n */\n value?: Y[]\n /**\n * The initial value of the checkbox group.\n */\n defaultValue?: Y[]\n /**\n * The callback fired when any children checkbox is checked or unchecked.\n */\n onChange?: (value: Y[]) => void\n /**\n * If `true`, input elements will receive `checked` attribute instead of `isChecked`.\n *\n * This assumes, you're using native radio inputs.\n *\n * @default false\n */\n isNative?: boolean\n}\n\nexport const useCheckboxGroup = <\n Y extends string | number,\n M extends Dict = Dict,\n>({\n value: valueProp,\n defaultValue = [],\n onChange: onChangeProp,\n isNative,\n ...props\n}: UseCheckboxGroupProps<Y> & M) => {\n const onChangeRef = useCallbackRef(onChangeProp)\n\n const [value, setValue] = useControllableState({\n value: valueProp,\n defaultValue,\n onChange: onChangeRef,\n })\n\n const onChange = useCallback(\n (evOrValue: ChangeEvent<HTMLInputElement> | Y) => {\n const isChecked = isEvent(evOrValue)\n ? evOrValue.target.checked\n : !value.includes(evOrValue)\n\n const selectedValue = (\n isEvent(evOrValue) ? evOrValue.target.value : evOrValue\n ) as Y\n\n const nextValue = isChecked\n ? [...value, selectedValue]\n : value.filter((v) => String(v) !== String(selectedValue))\n\n setValue(nextValue)\n },\n [value, setValue],\n )\n\n const getContainerProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n role: \"group\",\n ...props,\n ref,\n }),\n [],\n )\n\n const getCheckboxProps: PropGetter<\n { value?: Y },\n { value?: Y; checked?: boolean; isChecked?: boolean }\n > = useCallback(\n (props = {}, ref = null) => ({\n ...props,\n ref,\n [isNative ? \"checked\" : \"isChecked\"]: value.some(\n (val) => String(props?.value) === String(val),\n ),\n onChange,\n }),\n [onChange, isNative, value],\n )\n\n return {\n props,\n value,\n setValue,\n onChange,\n getContainerProps,\n getCheckboxProps,\n }\n}\n\nexport type UseCheckboxGroupReturn<Y extends string | number = string> =\n ReturnType<typeof useCheckboxGroup<Y>>\n\nexport interface CheckboxGroupProps<Y extends string | number = string>\n extends ThemeProps<\"Checkbox\">,\n Omit<FlexProps, \"defaultValue\" | \"onChange\">,\n UseCheckboxGroupProps<Y>,\n FormControlOptions {\n /**\n * If provided, generate checkboxes based on items.\n *\n * @default '[]'\n */\n items?: CheckboxItem<Y>[]\n}\n\nexport const CheckboxGroup = forwardRef(\n <Y extends string | number = string>(\n {\n className,\n size,\n variant,\n colorScheme,\n children,\n items = [],\n direction = \"column\",\n gap,\n ...props\n }: CheckboxGroupProps<Y>,\n ref: ForwardedRef<HTMLDivElement>,\n ) => {\n const {\n value,\n onChange,\n props: computedProps,\n getContainerProps,\n } = useCheckboxGroup<Y>(props)\n const { labelId, isRequired, isReadOnly, isDisabled, isInvalid, ...rest } =\n useFormControl(computedProps)\n\n const validChildren = getValidChildren(children)\n let computedChildren: ReactElement[] = []\n\n if (!validChildren.length && items.length) {\n computedChildren = items.map(({ label, value, ...props }, i) => (\n <Checkbox key={i} value={value} {...props}>\n {label}\n </Checkbox>\n ))\n }\n\n return (\n <CheckboxGroupProvider\n value={\n {\n size,\n variant,\n colorScheme,\n isRequired,\n isReadOnly,\n isDisabled,\n isInvalid,\n value,\n onChange,\n } as CheckboxGroupContext\n }\n >\n <Flex\n ref={ref}\n className={cx(\"ui-checkbox-group\", className)}\n direction={direction}\n gap={gap ?? (direction === \"row\" ? \"1rem\" : undefined)}\n {...getContainerProps({\n \"aria-labelledby\": labelId,\n ...rest,\n })}\n >\n {children ?? computedChildren}\n </Flex>\n </CheckboxGroupProvider>\n )\n },\n) as {\n <Y extends string | number = string>(\n props: CheckboxGroupProps<Y> & RefAttributes<HTMLDivElement>,\n ): JSX.Element\n} & ComponentArgs\n\nCheckboxGroup.displayName = \"CheckboxGroup\"\n"],"mappings":"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","names":["props","value"]}
|
|
@@ -1,17 +1,20 @@
|
|
|
1
1
|
"use client"
|
|
2
|
+
import {
|
|
3
|
+
useCheckboxGroupContext
|
|
4
|
+
} from "./chunk-IZINMNYX.mjs";
|
|
2
5
|
|
|
3
6
|
// src/checkbox.tsx
|
|
4
|
-
import { ui,
|
|
7
|
+
import { ui, useComponentMultiStyle, omitThemeProps } from "@yamada-ui/core";
|
|
5
8
|
import {
|
|
6
|
-
useFormControl
|
|
9
|
+
useFormControl,
|
|
7
10
|
useFormControlProps,
|
|
8
11
|
formControlProperties
|
|
9
12
|
} from "@yamada-ui/form-control";
|
|
10
13
|
import { AnimatePresence, motion } from "@yamada-ui/motion";
|
|
11
14
|
import { trackFocusVisible } from "@yamada-ui/use-focus-visible";
|
|
12
15
|
import {
|
|
13
|
-
cx
|
|
14
|
-
useCallbackRef
|
|
16
|
+
cx,
|
|
17
|
+
useCallbackRef,
|
|
15
18
|
useSafeLayoutEffect,
|
|
16
19
|
useUpdateEffect,
|
|
17
20
|
handlerAll,
|
|
@@ -22,142 +25,14 @@ import {
|
|
|
22
25
|
} from "@yamada-ui/utils";
|
|
23
26
|
import {
|
|
24
27
|
cloneElement,
|
|
25
|
-
useCallback
|
|
28
|
+
useCallback,
|
|
26
29
|
useEffect,
|
|
27
30
|
useRef,
|
|
28
31
|
useState,
|
|
29
|
-
forwardRef
|
|
32
|
+
forwardRef,
|
|
30
33
|
useId
|
|
31
34
|
} from "react";
|
|
32
|
-
|
|
33
|
-
// src/checkbox-group.tsx
|
|
34
|
-
import { useFormControl } from "@yamada-ui/form-control";
|
|
35
|
-
import { Flex } from "@yamada-ui/layouts";
|
|
36
|
-
import { useControllableState } from "@yamada-ui/use-controllable-state";
|
|
37
|
-
import {
|
|
38
|
-
createContext,
|
|
39
|
-
cx,
|
|
40
|
-
isObject,
|
|
41
|
-
useCallbackRef,
|
|
42
|
-
getValidChildren
|
|
43
|
-
} from "@yamada-ui/utils";
|
|
44
|
-
import { forwardRef, useCallback } from "react";
|
|
45
|
-
import { jsx } from "react/jsx-runtime";
|
|
46
|
-
var isEvent = (value) => value && isObject(value) && isObject(value.target);
|
|
47
|
-
var useCheckboxGroup = ({
|
|
48
|
-
value: valueProp,
|
|
49
|
-
defaultValue = [],
|
|
50
|
-
onChange: onChangeProp,
|
|
51
|
-
isNative,
|
|
52
|
-
...props
|
|
53
|
-
}) => {
|
|
54
|
-
const onChangeRef = useCallbackRef(onChangeProp);
|
|
55
|
-
const [value, setValue] = useControllableState({
|
|
56
|
-
value: valueProp,
|
|
57
|
-
defaultValue,
|
|
58
|
-
onChange: onChangeRef
|
|
59
|
-
});
|
|
60
|
-
const onChange = useCallback(
|
|
61
|
-
(evOrValue) => {
|
|
62
|
-
const isChecked = isEvent(evOrValue) ? evOrValue.target.checked : !value.includes(evOrValue);
|
|
63
|
-
const selectedValue = isEvent(evOrValue) ? evOrValue.target.value : evOrValue;
|
|
64
|
-
const nextValue = isChecked ? [...value, selectedValue] : value.filter((v) => String(v) !== String(selectedValue));
|
|
65
|
-
setValue(nextValue);
|
|
66
|
-
},
|
|
67
|
-
[value, setValue]
|
|
68
|
-
);
|
|
69
|
-
const getContainerProps = useCallback(
|
|
70
|
-
(props2 = {}, ref = null) => ({
|
|
71
|
-
role: "group",
|
|
72
|
-
...props2,
|
|
73
|
-
ref
|
|
74
|
-
}),
|
|
75
|
-
[]
|
|
76
|
-
);
|
|
77
|
-
const getCheckboxProps = useCallback(
|
|
78
|
-
(props2, ref = null) => ({
|
|
79
|
-
...props2,
|
|
80
|
-
ref,
|
|
81
|
-
[isNative ? "checked" : "isChecked"]: value.some(
|
|
82
|
-
(val) => String(props2 == null ? void 0 : props2.value) === String(val)
|
|
83
|
-
),
|
|
84
|
-
onChange
|
|
85
|
-
}),
|
|
86
|
-
[onChange, isNative, value]
|
|
87
|
-
);
|
|
88
|
-
return {
|
|
89
|
-
props,
|
|
90
|
-
value,
|
|
91
|
-
setValue,
|
|
92
|
-
onChange,
|
|
93
|
-
getContainerProps,
|
|
94
|
-
getCheckboxProps
|
|
95
|
-
};
|
|
96
|
-
};
|
|
97
|
-
var [CheckboxGroupProvider, useCheckboxGroupContext] = createContext({
|
|
98
|
-
strict: false,
|
|
99
|
-
name: "CheckboxGroupContext"
|
|
100
|
-
});
|
|
101
|
-
var CheckboxGroup = forwardRef(
|
|
102
|
-
({
|
|
103
|
-
className,
|
|
104
|
-
size,
|
|
105
|
-
variant,
|
|
106
|
-
colorScheme,
|
|
107
|
-
children,
|
|
108
|
-
items = [],
|
|
109
|
-
direction = "column",
|
|
110
|
-
gap,
|
|
111
|
-
...props
|
|
112
|
-
}, ref) => {
|
|
113
|
-
const {
|
|
114
|
-
value,
|
|
115
|
-
onChange,
|
|
116
|
-
props: computedProps,
|
|
117
|
-
getContainerProps
|
|
118
|
-
} = useCheckboxGroup(props);
|
|
119
|
-
const { labelId, isRequired, isReadOnly, isDisabled, isInvalid, ...rest } = useFormControl(computedProps);
|
|
120
|
-
const validChildren = getValidChildren(children);
|
|
121
|
-
let computedChildren = [];
|
|
122
|
-
if (!validChildren.length && items.length) {
|
|
123
|
-
computedChildren = items.map(({ label, value: value2, ...props2 }, i) => /* @__PURE__ */ jsx(Checkbox, { value: value2, ...props2, children: label }, i));
|
|
124
|
-
}
|
|
125
|
-
return /* @__PURE__ */ jsx(
|
|
126
|
-
CheckboxGroupProvider,
|
|
127
|
-
{
|
|
128
|
-
value: {
|
|
129
|
-
size,
|
|
130
|
-
variant,
|
|
131
|
-
colorScheme,
|
|
132
|
-
isRequired,
|
|
133
|
-
isReadOnly,
|
|
134
|
-
isDisabled,
|
|
135
|
-
isInvalid,
|
|
136
|
-
value,
|
|
137
|
-
onChange
|
|
138
|
-
},
|
|
139
|
-
children: /* @__PURE__ */ jsx(
|
|
140
|
-
Flex,
|
|
141
|
-
{
|
|
142
|
-
ref,
|
|
143
|
-
className: cx("ui-checkbox-group", className),
|
|
144
|
-
direction,
|
|
145
|
-
gap: gap != null ? gap : direction === "row" ? "1rem" : void 0,
|
|
146
|
-
...getContainerProps({
|
|
147
|
-
"aria-labelledby": labelId,
|
|
148
|
-
...rest
|
|
149
|
-
}),
|
|
150
|
-
children: children != null ? children : computedChildren
|
|
151
|
-
}
|
|
152
|
-
)
|
|
153
|
-
}
|
|
154
|
-
);
|
|
155
|
-
}
|
|
156
|
-
);
|
|
157
|
-
CheckboxGroup.displayName = "CheckboxGroup";
|
|
158
|
-
|
|
159
|
-
// src/checkbox.tsx
|
|
160
|
-
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
35
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
161
36
|
var useCheckbox = ({
|
|
162
37
|
id,
|
|
163
38
|
...props
|
|
@@ -195,7 +70,7 @@ var useCheckbox = ({
|
|
|
195
70
|
const [isChecked, setIsChecked] = useState(!!defaultIsChecked);
|
|
196
71
|
const isControlled = isCheckedProp !== void 0;
|
|
197
72
|
const checked = isControlled ? isCheckedProp : isChecked;
|
|
198
|
-
const onChange =
|
|
73
|
+
const onChange = useCallbackRef(
|
|
199
74
|
(ev) => {
|
|
200
75
|
if (readOnly || disabled) {
|
|
201
76
|
ev.preventDefault();
|
|
@@ -207,15 +82,15 @@ var useCheckbox = ({
|
|
|
207
82
|
},
|
|
208
83
|
[readOnly, disabled, isControlled, checked, isIndeterminate]
|
|
209
84
|
);
|
|
210
|
-
const onFocus =
|
|
211
|
-
const onBlur =
|
|
212
|
-
const onKeyDown =
|
|
85
|
+
const onFocus = useCallbackRef(onFocusProp);
|
|
86
|
+
const onBlur = useCallbackRef(onBlurProp);
|
|
87
|
+
const onKeyDown = useCallback(
|
|
213
88
|
({ key }) => {
|
|
214
89
|
if (key === " ") setActive(true);
|
|
215
90
|
},
|
|
216
91
|
[setActive]
|
|
217
92
|
);
|
|
218
|
-
const onKeyUp =
|
|
93
|
+
const onKeyUp = useCallback(
|
|
219
94
|
({ key }) => {
|
|
220
95
|
if (key === " ") setActive(false);
|
|
221
96
|
},
|
|
@@ -241,7 +116,7 @@ var useCheckbox = ({
|
|
|
241
116
|
if (inputRef.current.checked !== checked)
|
|
242
117
|
setIsChecked(inputRef.current.checked);
|
|
243
118
|
}, [inputRef.current]);
|
|
244
|
-
const getContainerProps =
|
|
119
|
+
const getContainerProps = useCallback(
|
|
245
120
|
(props2 = {}, ref = null) => ({
|
|
246
121
|
...formControlProps,
|
|
247
122
|
...props2,
|
|
@@ -261,7 +136,7 @@ var useCheckbox = ({
|
|
|
261
136
|
}),
|
|
262
137
|
[checked, isLabel, formControlProps]
|
|
263
138
|
);
|
|
264
|
-
const getIconProps =
|
|
139
|
+
const getIconProps = useCallback(
|
|
265
140
|
(props2 = {}, ref = null) => ({
|
|
266
141
|
...formControlProps,
|
|
267
142
|
...props2,
|
|
@@ -291,7 +166,7 @@ var useCheckbox = ({
|
|
|
291
166
|
formControlProps
|
|
292
167
|
]
|
|
293
168
|
);
|
|
294
|
-
const getInputProps =
|
|
169
|
+
const getInputProps = useCallback(
|
|
295
170
|
(props2 = {}, ref = null) => ({
|
|
296
171
|
...formControlProps,
|
|
297
172
|
...props2,
|
|
@@ -341,7 +216,7 @@ var useCheckbox = ({
|
|
|
341
216
|
onKeyUp
|
|
342
217
|
]
|
|
343
218
|
);
|
|
344
|
-
const getLabelProps =
|
|
219
|
+
const getLabelProps = useCallback(
|
|
345
220
|
(props2 = {}, ref = null) => ({
|
|
346
221
|
...formControlProps,
|
|
347
222
|
...props2,
|
|
@@ -372,13 +247,13 @@ var useCheckbox = ({
|
|
|
372
247
|
getLabelProps
|
|
373
248
|
};
|
|
374
249
|
};
|
|
375
|
-
var Checkbox =
|
|
250
|
+
var Checkbox = forwardRef(
|
|
376
251
|
(props, ref) => {
|
|
377
252
|
var _a, _b, _c, _d;
|
|
378
253
|
const group = useCheckboxGroupContext();
|
|
379
254
|
const { value: groupValue, ...groupProps } = { ...group };
|
|
380
|
-
const control =
|
|
381
|
-
const [styles, mergedProps] =
|
|
255
|
+
const control = useFormControl(props);
|
|
256
|
+
const [styles, mergedProps] = useComponentMultiStyle("Checkbox", {
|
|
382
257
|
...groupProps,
|
|
383
258
|
...props
|
|
384
259
|
});
|
|
@@ -415,7 +290,7 @@ var Checkbox = forwardRef2(
|
|
|
415
290
|
onChange
|
|
416
291
|
});
|
|
417
292
|
const { children: customIcon, ...resolvedIconProps } = { ...iconProps };
|
|
418
|
-
const cloneIcon = cloneElement(customIcon != null ? customIcon : /* @__PURE__ */
|
|
293
|
+
const cloneIcon = cloneElement(customIcon != null ? customIcon : /* @__PURE__ */ jsx(CheckboxIcon, {}), {
|
|
419
294
|
__css: {
|
|
420
295
|
opacity: isChecked || isIndeterminate ? 1 : 0,
|
|
421
296
|
transform: isChecked || isIndeterminate ? "scale(1)" : "scale(0.95)",
|
|
@@ -432,7 +307,7 @@ var Checkbox = forwardRef2(
|
|
|
432
307
|
return /* @__PURE__ */ jsxs(
|
|
433
308
|
ui.label,
|
|
434
309
|
{
|
|
435
|
-
className:
|
|
310
|
+
className: cx("ui-checkbox", className),
|
|
436
311
|
...getContainerProps(),
|
|
437
312
|
__css: {
|
|
438
313
|
cursor: "pointer",
|
|
@@ -445,14 +320,14 @@ var Checkbox = forwardRef2(
|
|
|
445
320
|
},
|
|
446
321
|
...rest,
|
|
447
322
|
children: [
|
|
448
|
-
/* @__PURE__ */
|
|
323
|
+
/* @__PURE__ */ jsx(
|
|
449
324
|
ui.input,
|
|
450
325
|
{
|
|
451
326
|
className: "ui-checkbox__input",
|
|
452
327
|
...getInputProps(inputProps, ref)
|
|
453
328
|
}
|
|
454
329
|
),
|
|
455
|
-
/* @__PURE__ */
|
|
330
|
+
/* @__PURE__ */ jsx(
|
|
456
331
|
ui.span,
|
|
457
332
|
{
|
|
458
333
|
className: "ui-checkbox__icon",
|
|
@@ -467,7 +342,7 @@ var Checkbox = forwardRef2(
|
|
|
467
342
|
children: cloneIcon
|
|
468
343
|
}
|
|
469
344
|
),
|
|
470
|
-
/* @__PURE__ */
|
|
345
|
+
/* @__PURE__ */ jsx(
|
|
471
346
|
ui.span,
|
|
472
347
|
{
|
|
473
348
|
className: "ui-checkbox__label",
|
|
@@ -491,7 +366,7 @@ var CheckboxIcon = ({
|
|
|
491
366
|
isInvalid: _isInvalid,
|
|
492
367
|
...rest
|
|
493
368
|
}) => {
|
|
494
|
-
return /* @__PURE__ */
|
|
369
|
+
return /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: isIndeterminate || isChecked ? /* @__PURE__ */ jsx(
|
|
495
370
|
ui.div,
|
|
496
371
|
{
|
|
497
372
|
__css: {
|
|
@@ -500,7 +375,7 @@ var CheckboxIcon = ({
|
|
|
500
375
|
left: "50%",
|
|
501
376
|
transform: "translate(-50%, -50%)"
|
|
502
377
|
},
|
|
503
|
-
children: /* @__PURE__ */
|
|
378
|
+
children: /* @__PURE__ */ jsx(
|
|
504
379
|
motion.div,
|
|
505
380
|
{
|
|
506
381
|
variants: {
|
|
@@ -515,14 +390,14 @@ var CheckboxIcon = ({
|
|
|
515
390
|
alignItems: "center",
|
|
516
391
|
justifyContent: "center"
|
|
517
392
|
},
|
|
518
|
-
children: isIndeterminate ? /* @__PURE__ */
|
|
393
|
+
children: isIndeterminate ? /* @__PURE__ */ jsx(IndeterminateIcon, { ...rest }) : /* @__PURE__ */ jsx(CheckIcon, { ...rest })
|
|
519
394
|
}
|
|
520
395
|
)
|
|
521
396
|
}
|
|
522
397
|
) : null });
|
|
523
398
|
};
|
|
524
399
|
var CheckIcon = (props) => {
|
|
525
|
-
return /* @__PURE__ */
|
|
400
|
+
return /* @__PURE__ */ jsx(
|
|
526
401
|
motion.svg,
|
|
527
402
|
{
|
|
528
403
|
width: "1.2em",
|
|
@@ -545,12 +420,12 @@ var CheckIcon = (props) => {
|
|
|
545
420
|
strokeDasharray: 16
|
|
546
421
|
},
|
|
547
422
|
...props,
|
|
548
|
-
children: /* @__PURE__ */
|
|
423
|
+
children: /* @__PURE__ */ jsx("polyline", { points: "1.5 6 4.5 9 10.5 1" })
|
|
549
424
|
}
|
|
550
425
|
);
|
|
551
426
|
};
|
|
552
427
|
var IndeterminateIcon = (props) => {
|
|
553
|
-
return /* @__PURE__ */
|
|
428
|
+
return /* @__PURE__ */ jsx(
|
|
554
429
|
motion.svg,
|
|
555
430
|
{
|
|
556
431
|
width: "1.2em",
|
|
@@ -571,7 +446,7 @@ var IndeterminateIcon = (props) => {
|
|
|
571
446
|
},
|
|
572
447
|
style: { stroke: "currentColor", strokeWidth: 4 },
|
|
573
448
|
...props,
|
|
574
|
-
children: /* @__PURE__ */
|
|
449
|
+
children: /* @__PURE__ */ jsx("line", { x1: "21", x2: "3", y1: "12", y2: "12" })
|
|
575
450
|
}
|
|
576
451
|
);
|
|
577
452
|
};
|
|
@@ -579,9 +454,6 @@ var IndeterminateIcon = (props) => {
|
|
|
579
454
|
export {
|
|
580
455
|
useCheckbox,
|
|
581
456
|
Checkbox,
|
|
582
|
-
CheckboxIcon
|
|
583
|
-
useCheckboxGroup,
|
|
584
|
-
useCheckboxGroupContext,
|
|
585
|
-
CheckboxGroup
|
|
457
|
+
CheckboxIcon
|
|
586
458
|
};
|
|
587
|
-
//# sourceMappingURL=chunk-
|
|
459
|
+
//# sourceMappingURL=chunk-LP6DPNQY.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/checkbox.tsx"],"sourcesContent":["import type {\n HTMLUIProps,\n ThemeProps,\n ComponentArgs,\n PropGetter,\n} from \"@yamada-ui/core\"\nimport { ui, useComponentMultiStyle, omitThemeProps } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {\n useFormControl,\n useFormControlProps,\n formControlProperties,\n} from \"@yamada-ui/form-control\"\nimport type { MotionProps } from \"@yamada-ui/motion\"\nimport { AnimatePresence, motion } from \"@yamada-ui/motion\"\nimport { trackFocusVisible } from \"@yamada-ui/use-focus-visible\"\nimport type { Dict, Merge } from \"@yamada-ui/utils\"\nimport {\n cx,\n useCallbackRef,\n useSafeLayoutEffect,\n useUpdateEffect,\n handlerAll,\n dataAttr,\n mergeRefs,\n funcAll,\n splitObject,\n} from \"@yamada-ui/utils\"\nimport type {\n ChangeEvent,\n ChangeEventHandler,\n CSSProperties,\n FC,\n FocusEventHandler,\n InputHTMLAttributes,\n KeyboardEvent,\n ReactElement,\n SyntheticEvent,\n ForwardedRef,\n Ref,\n} from \"react\"\nimport {\n cloneElement,\n useCallback,\n useEffect,\n useRef,\n useState,\n forwardRef,\n useId,\n} from \"react\"\nimport { useCheckboxGroupContext } from \"./checkbox-context\"\n\nexport interface UseCheckboxProps<Y extends string | number = 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 * The value to be used in the checkbox input.\n */\n value?: Y\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 * 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 * The callback invoked when the checkbox is blurred.\n */\n onBlur?: FocusEventHandler<HTMLInputElement>\n /**\n * The tab-index property of the underlying input element.\n */\n tabIndex?: number\n}\n\nexport const useCheckbox = <\n Y extends string | number = string,\n M extends Dict = Dict,\n>({\n id,\n ...props\n}: UseCheckboxProps<Y> & M) => {\n id ??= useId()\n const {\n id: _id,\n name,\n value,\n isChecked: isCheckedProp,\n defaultIsChecked,\n tabIndex,\n isIndeterminate,\n onChange: onChangeProp,\n ...computedProps\n } = useFormControlProps({ id, ...props })\n const [\n {\n required,\n disabled,\n readOnly,\n \"aria-readonly\": _ariaReadonly,\n onFocus: onFocusProp,\n onBlur: onBlurProp,\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 [setActive],\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 onClick: handlerAll(props.onClick, () => {\n if (isLabel) return\n\n inputRef.current?.click()\n\n requestAnimationFrame(() => inputRef.current?.focus())\n }),\n }),\n [checked, isLabel, formControlProps],\n )\n\n const getIconProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...formControlProps,\n ...props,\n ref,\n \"data-active\": dataAttr(isActive),\n \"data-hover\": dataAttr(isHovered),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(isFocused),\n \"data-focus-visible\": dataAttr(isFocused && isFocusVisible),\n \"data-indeterminate\": dataAttr(isIndeterminate),\n \"aria-hidden\": true,\n onMouseDown: handlerAll(props.onMouseDown, (ev: React.MouseEvent) => {\n if (isFocused) ev.preventDefault()\n\n setActive(true)\n }),\n onMouseUp: handlerAll(props.onMouseUp, () => setActive(false)),\n onMouseEnter: handlerAll(props.onMouseEnter, () => setHovered(true)),\n onMouseLeave: handlerAll(props.onMouseLeave, () => setHovered(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 ref: mergeRefs(inputRef, ref),\n id,\n type: \"checkbox\",\n name,\n value,\n tabIndex,\n required,\n disabled,\n readOnly,\n checked,\n \"aria-checked\": isIndeterminate ? \"mixed\" : checked,\n style: {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n },\n onChange: handlerAll(props.onChange, onChange),\n onBlur: handlerAll(props.onBlur, onBlur, () => setFocused(false)),\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 props: rest,\n isFocusVisible,\n isFocused,\n isHovered,\n isActive,\n isChecked: checked,\n isIndeterminate,\n getContainerProps,\n getIconProps,\n getInputProps,\n getLabelProps,\n }\n}\n\nexport type UseCheckboxReturn = ReturnType<typeof useCheckbox>\n\ninterface CheckboxOptions {\n /**\n * Props for icon component.\n */\n iconProps?: Omit<HTMLUIProps<\"span\">, \"children\"> & { children: ReactElement }\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 string | number = 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 string | number = 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 gap = \"0.5rem\",\n isRequired = groupProps.isRequired ?? control.isRequired,\n isReadOnly = groupProps.isReadOnly ?? control.isReadOnly,\n isDisabled = groupProps.isDisabled ?? control.isDisabled,\n isInvalid = groupProps.isInvalid ?? control.isInvalid,\n iconProps,\n inputProps,\n labelProps,\n children,\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 getContainerProps,\n getInputProps,\n getIconProps,\n getLabelProps,\n props: rest,\n } = useCheckbox({\n ...computedProps,\n isRequired,\n isReadOnly,\n isDisabled,\n isInvalid,\n isChecked: isCheckedProp,\n onChange,\n })\n\n const { children: customIcon, ...resolvedIconProps } = { ...iconProps }\n const cloneIcon = cloneElement(customIcon ?? <CheckboxIcon />, {\n __css: {\n opacity: isChecked || isIndeterminate ? 1 : 0,\n transform: isChecked || isIndeterminate ? \"scale(1)\" : \"scale(0.95)\",\n transitionProperty: \"transform\",\n transitionDuration: \"normal\",\n },\n isIndeterminate,\n isChecked,\n isRequired,\n isReadOnly,\n isDisabled,\n isInvalid,\n })\n\n return (\n <ui.label\n className={cx(\"ui-checkbox\", className)}\n {...getContainerProps()}\n __css={{\n cursor: \"pointer\",\n position: \"relative\",\n display: \"inline-flex\",\n alignItems: \"center\",\n verticalAlign: \"top\",\n gap,\n ...styles.container,\n }}\n {...rest}\n >\n <ui.input\n className=\"ui-checkbox__input\"\n {...getInputProps(inputProps, ref)}\n />\n\n <ui.span\n className=\"ui-checkbox__icon\"\n __css={{\n pointerEvents: isReadOnly ? \"none\" : undefined,\n position: \"relative\",\n display: \"inline-block\",\n userSelect: \"none\",\n ...styles.icon,\n }}\n {...getIconProps(resolvedIconProps)}\n >\n {cloneIcon}\n </ui.span>\n\n <ui.span\n className=\"ui-checkbox__label\"\n __css={{ ...styles.label }}\n {...getLabelProps(labelProps)}\n >\n {children}\n </ui.span>\n </ui.label>\n )\n },\n) as {\n <Y extends string | number = string>(\n props: CheckboxProps<Y> & { ref?: Ref<HTMLInputElement> },\n ): JSX.Element\n} & ComponentArgs\n\nCheckbox.displayName = \"Checkbox\"\n\nexport type CheckboxIconProps = MotionProps<\"svg\"> &\n FormControlOptions & {\n /**\n * If `true`, the icon will be indeterminate.\n *\n * @default false\n */\n isIndeterminate?: boolean\n /**\n * If `true`, the icon will be checked.\n *\n * @default false\n */\n isChecked?: boolean\n }\n\nexport const CheckboxIcon: FC<CheckboxIconProps> = ({\n isIndeterminate,\n isChecked,\n isRequired: _isRequired,\n isReadOnly: _isReadOnly,\n isDisabled: _isDisabled,\n isInvalid: _isInvalid,\n ...rest\n}) => {\n return (\n <AnimatePresence initial={false}>\n {isIndeterminate || isChecked ? (\n <ui.div\n __css={{\n position: \"absolute\",\n top: \"50%\",\n left: \"50%\",\n transform: \"translate(-50%, -50%)\",\n }}\n >\n <motion.div\n variants={{\n unchecked: { scale: 0.5 },\n checked: { scale: 1 },\n }}\n initial=\"unchecked\"\n animate=\"checked\"\n exit=\"unchecked\"\n style={\n {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n } as CSSProperties\n }\n >\n {isIndeterminate ? (\n <IndeterminateIcon {...rest} />\n ) : (\n <CheckIcon {...rest} />\n )}\n </motion.div>\n </ui.div>\n ) : null}\n </AnimatePresence>\n )\n}\n\nconst CheckIcon: FC<MotionProps<\"svg\">> = (props) => {\n return (\n <motion.svg\n width=\"1.2em\"\n viewBox=\"0 0 12 10\"\n variants={{\n unchecked: {\n opacity: 0,\n strokeDashoffset: 16,\n },\n checked: {\n opacity: 1,\n strokeDashoffset: 0,\n transition: { duration: 0.2 },\n },\n }}\n style={{\n fill: \"none\",\n strokeWidth: 2,\n stroke: \"currentColor\",\n strokeDasharray: 16,\n }}\n {...props}\n >\n <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n </motion.svg>\n )\n}\n\nconst IndeterminateIcon: FC<MotionProps<\"svg\">> = (props) => {\n return (\n <motion.svg\n width=\"1.2em\"\n viewBox=\"0 0 24 24\"\n variants={{\n unchecked: {\n scaleX: 0.65,\n opacity: 0,\n },\n checked: {\n scaleX: 1,\n opacity: 1,\n transition: {\n scaleX: { duration: 0 },\n opacity: { duration: 0.02 },\n },\n },\n }}\n style={{ stroke: \"currentColor\", strokeWidth: 4 }}\n {...props}\n >\n <line x1=\"21\" x2=\"3\" y1=\"12\" y2=\"12\" />\n </motion.svg>\n )\n}\n"],"mappings":"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","names":["props","_a"]}
|
package/dist/index.d.mts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
export { Checkbox, CheckboxIcon, CheckboxIconProps, CheckboxProps, UseCheckboxProps, UseCheckboxReturn, useCheckbox } from './checkbox.mjs';
|
|
2
2
|
export { CheckboxGroup, CheckboxGroupProps, CheckboxItem, UseCheckboxGroupProps, UseCheckboxGroupReturn, useCheckboxGroup } from './checkbox-group.mjs';
|
|
3
|
+
import '@yamada-ui/form-control';
|
|
3
4
|
import 'react';
|
|
4
5
|
import '@yamada-ui/core';
|
|
5
|
-
import '@yamada-ui/form-control';
|
|
6
6
|
import '@yamada-ui/motion';
|
|
7
7
|
import '@yamada-ui/utils';
|
|
8
8
|
import '@yamada-ui/layouts';
|
package/dist/index.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
export { Checkbox, CheckboxIcon, CheckboxIconProps, CheckboxProps, UseCheckboxProps, UseCheckboxReturn, useCheckbox } from './checkbox.js';
|
|
2
2
|
export { CheckboxGroup, CheckboxGroupProps, CheckboxItem, UseCheckboxGroupProps, UseCheckboxGroupReturn, useCheckboxGroup } from './checkbox-group.js';
|
|
3
|
+
import '@yamada-ui/form-control';
|
|
3
4
|
import 'react';
|
|
4
5
|
import '@yamada-ui/core';
|
|
5
|
-
import '@yamada-ui/form-control';
|
|
6
6
|
import '@yamada-ui/motion';
|
|
7
7
|
import '@yamada-ui/utils';
|
|
8
8
|
import '@yamada-ui/layouts';
|