@huin-core/react-checkbox 1.0.4 → 1.0.6
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/index.js +42 -47
- package/dist/index.js.map +2 -2
- package/dist/index.mjs +42 -47
- package/dist/index.mjs.map +2 -2
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -47,7 +47,6 @@ var import_primitive = require("@huin-core/primitive");
|
|
|
47
47
|
var import_react_context = require("@huin-core/react-context");
|
|
48
48
|
var import_react_compose_refs = require("@huin-core/react-compose-refs");
|
|
49
49
|
var import_react_use_controllable_state = require("@huin-core/react-use-controllable-state");
|
|
50
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
51
50
|
var CHECKBOX_NAME = "Checkbox";
|
|
52
51
|
var [createCheckboxContext, createCheckboxScope] = (0, import_react_context.createContextScope)(CHECKBOX_NAME);
|
|
53
52
|
var [CheckboxProvider, useCheckboxContext] = createCheckboxContext(CHECKBOX_NAME);
|
|
@@ -86,48 +85,45 @@ var Checkbox = React.forwardRef(
|
|
|
86
85
|
return () => form2.removeEventListener("reset", reset);
|
|
87
86
|
}
|
|
88
87
|
}, [button, setChecked]);
|
|
89
|
-
return /* @__PURE__ */
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
}
|
|
129
|
-
)
|
|
130
|
-
] });
|
|
88
|
+
return /* @__PURE__ */ React.createElement(CheckboxProvider, { scope: __scopeCheckbox, state: checked, disabled }, /* @__PURE__ */ React.createElement(
|
|
89
|
+
import_react_primitive.Primitive.button,
|
|
90
|
+
{
|
|
91
|
+
type: "button",
|
|
92
|
+
role: "checkbox",
|
|
93
|
+
"aria-checked": isIndeterminate(checked) ? "mixed" : checked,
|
|
94
|
+
"aria-required": required,
|
|
95
|
+
"data-state": getState(checked),
|
|
96
|
+
"data-disabled": disabled ? "" : void 0,
|
|
97
|
+
disabled,
|
|
98
|
+
value,
|
|
99
|
+
...checkboxProps,
|
|
100
|
+
ref: composedRefs,
|
|
101
|
+
onKeyDown: (0, import_primitive.composeEventHandlers)(props.onKeyDown, (event) => {
|
|
102
|
+
if (event.key === "Enter") event.preventDefault();
|
|
103
|
+
}),
|
|
104
|
+
onClick: (0, import_primitive.composeEventHandlers)(props.onClick, (event) => {
|
|
105
|
+
setChecked((prevChecked) => isIndeterminate(prevChecked) ? true : !prevChecked);
|
|
106
|
+
if (isFormControl) {
|
|
107
|
+
hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
|
|
108
|
+
if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
|
|
109
|
+
}
|
|
110
|
+
})
|
|
111
|
+
}
|
|
112
|
+
), isFormControl && /* @__PURE__ */ React.createElement(
|
|
113
|
+
BubbleInput,
|
|
114
|
+
{
|
|
115
|
+
control: button,
|
|
116
|
+
bubbles: !hasConsumerStoppedPropagationRef.current,
|
|
117
|
+
name,
|
|
118
|
+
value,
|
|
119
|
+
checked,
|
|
120
|
+
required,
|
|
121
|
+
disabled,
|
|
122
|
+
form,
|
|
123
|
+
style: { transform: "translateX(-100%)" },
|
|
124
|
+
defaultChecked: isIndeterminate(defaultChecked) ? false : defaultChecked
|
|
125
|
+
}
|
|
126
|
+
));
|
|
131
127
|
}
|
|
132
128
|
);
|
|
133
129
|
Checkbox.displayName = CHECKBOX_NAME;
|
|
@@ -151,7 +147,7 @@ var BubbleInput = (props) => {
|
|
|
151
147
|
input.dispatchEvent(event);
|
|
152
148
|
}
|
|
153
149
|
}, [prevChecked, checked, bubbles]);
|
|
154
|
-
return /* @__PURE__ */
|
|
150
|
+
return /* @__PURE__ */ React.createElement(
|
|
155
151
|
"input",
|
|
156
152
|
{
|
|
157
153
|
type: "checkbox",
|
|
@@ -183,12 +179,11 @@ var Root = Checkbox;
|
|
|
183
179
|
var import_react = __toESM(require("react"));
|
|
184
180
|
var import_react_presence = require("@huin-core/react-presence");
|
|
185
181
|
var import_react_primitive2 = require("@huin-core/react-primitive");
|
|
186
|
-
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
187
182
|
var INDICATOR_NAME = "CheckboxIndicator";
|
|
188
183
|
var CheckboxIndicator = import_react.default.forwardRef((props, forwardedRef) => {
|
|
189
184
|
const { __scopeCheckbox, forceMount, ...indicatorProps } = props;
|
|
190
185
|
const context = useCheckboxContext(INDICATOR_NAME, __scopeCheckbox);
|
|
191
|
-
return /* @__PURE__ */
|
|
186
|
+
return /* @__PURE__ */ import_react.default.createElement(import_react_presence.Presence, { present: forceMount || isIndeterminate(context.state) || context.state === true }, /* @__PURE__ */ import_react.default.createElement(
|
|
192
187
|
import_react_primitive2.Primitive.span,
|
|
193
188
|
{
|
|
194
189
|
"data-state": getState(context.state),
|
|
@@ -197,7 +192,7 @@ var CheckboxIndicator = import_react.default.forwardRef((props, forwardedRef) =>
|
|
|
197
192
|
ref: forwardedRef,
|
|
198
193
|
style: { pointerEvents: "none", ...props.style }
|
|
199
194
|
}
|
|
200
|
-
)
|
|
195
|
+
));
|
|
201
196
|
});
|
|
202
197
|
CheckboxIndicator.displayName = INDICATOR_NAME;
|
|
203
198
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/index.ts", "../src/Checkbox.tsx", "../src/CheckboxIndicator.tsx"],
|
|
4
4
|
"sourcesContent": ["\"use client\";\nexport {\n createCheckboxScope,\n //\n Checkbox,\n //\n Root,\n} from \"./Checkbox\";\nexport { CheckboxIndicator } from \"./CheckboxIndicator\";\nexport type { CheckboxIndicatorProps } from \"./CheckboxIndicator\";\nexport type { CheckboxProps, CheckedState } from \"./Checkbox\";\n", "import * as React from \"react\";\nimport { usePrevious } from \"@huin-core/react-use-previous\";\nimport { useSize } from \"@huin-core/react-use-size\";\nimport { Primitive } from \"@huin-core/react-primitive\";\nimport { composeEventHandlers } from \"@huin-core/primitive\";\nimport { createContextScope, Scope } from \"@huin-core/react-context\";\nimport { useComposedRefs } from \"@huin-core/react-compose-refs\";\nimport { useControllableState } from \"@huin-core/react-use-controllable-state\";\n\n/* -------------------------------------------------------------------------------------------------\n * Checkbox\n * -----------------------------------------------------------------------------------------------*/\n\nconst CHECKBOX_NAME = \"Checkbox\";\n\nexport type ScopedProps<P> = P & { __scopeCheckbox?: Scope };\nconst [createCheckboxContext, createCheckboxScope] =\n createContextScope(CHECKBOX_NAME);\n\ntype CheckedState = boolean | \"indeterminate\";\n\ntype CheckboxContextValue = {\n state: CheckedState;\n disabled?: boolean;\n};\n\nexport const [CheckboxProvider, useCheckboxContext] =\n createCheckboxContext<CheckboxContextValue>(CHECKBOX_NAME);\n\ntype CheckboxElement = React.ElementRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = React.ComponentPropsWithoutRef<\n typeof Primitive.button\n>;\ninterface CheckboxProps\n extends Omit<PrimitiveButtonProps, \"checked\" | \"defaultChecked\"> {\n checked?: CheckedState;\n defaultChecked?: CheckedState;\n required?: boolean;\n onCheckedChange?(checked: CheckedState): void;\n}\n\nconst Checkbox = React.forwardRef<CheckboxElement, CheckboxProps>(\n (props: ScopedProps<CheckboxProps>, forwardedRef) => {\n const {\n __scopeCheckbox,\n name,\n checked: checkedProp,\n defaultChecked,\n required,\n disabled,\n value = \"on\",\n onCheckedChange,\n form,\n ...checkboxProps\n } = props;\n const [button, setButton] = React.useState<HTMLButtonElement | null>(null);\n const composedRefs = useComposedRefs(forwardedRef, (node) =>\n setButton(node)\n );\n const hasConsumerStoppedPropagationRef = React.useRef(false);\n // We set this to true by default so that events bubble to forms without JS (SSR)\n const isFormControl = button ? Boolean(button.closest(\"form\")) : true;\n const [checked = false, setChecked] = useControllableState({\n prop: checkedProp,\n defaultProp: defaultChecked,\n onChange: onCheckedChange,\n });\n const initialCheckedStateRef = React.useRef(checked);\n React.useEffect(() => {\n const form = button?.form;\n if (form) {\n const reset = () => setChecked(initialCheckedStateRef.current);\n form.addEventListener(\"reset\", reset);\n return () => form.removeEventListener(\"reset\", reset);\n }\n }, [button, setChecked]);\n\n return (\n <CheckboxProvider scope={__scopeCheckbox} state={checked} disabled={disabled}>\n <Primitive.button\n type=\"button\"\n role=\"checkbox\"\n aria-checked={isIndeterminate(checked) ? 'mixed' : checked}\n aria-required={required}\n data-state={getState(checked)}\n data-disabled={disabled ? '' : undefined}\n disabled={disabled}\n value={value}\n {...checkboxProps}\n ref={composedRefs}\n onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n // According to WAI ARIA, Checkboxes don't activate on enter keypress\n if (event.key === 'Enter') event.preventDefault();\n })}\n onClick={composeEventHandlers(props.onClick, (event) => {\n setChecked((prevChecked) => (isIndeterminate(prevChecked) ? true : !prevChecked));\n if (isFormControl) {\n hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();\n // if checkbox is in a form, stop propagation from the button so that we only propagate\n // one click event (from the input). We propagate changes from an input so that native\n // form validation works and form events reflect checkbox updates.\n if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();\n }\n })}\n />\n {isFormControl && (\n <BubbleInput\n control={button}\n bubbles={!hasConsumerStoppedPropagationRef.current}\n name={name}\n value={value}\n checked={checked}\n required={required}\n disabled={disabled}\n form={form}\n // We transform because the input is absolutely positioned but we have\n // rendered it **after** the button. This pulls it back to sit on top\n // of the button.\n style={{ transform: 'translateX(-100%)' }}\n defaultChecked={isIndeterminate(defaultChecked) ? false : defaultChecked}\n />\n )}\n </CheckboxProvider>\n );\n }\n);\n\nCheckbox.displayName = CHECKBOX_NAME;\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype InputProps = React.ComponentPropsWithoutRef<\"input\">;\ninterface BubbleInputProps extends Omit<InputProps, \"checked\"> {\n checked: CheckedState;\n control: HTMLElement | null;\n bubbles: boolean;\n}\n\nconst BubbleInput = (props: BubbleInputProps) => {\n const { control, checked, bubbles = true, ...inputProps } = props;\n const ref = React.useRef<HTMLInputElement>(null);\n const prevChecked = usePrevious(checked);\n const controlSize = useSize(control);\n\n // Bubble checked change to parents (e.g form change event)\n React.useEffect(() => {\n const input = ref.current!;\n const inputProto = window.HTMLInputElement.prototype;\n const descriptor = Object.getOwnPropertyDescriptor(\n inputProto,\n \"checked\"\n ) as PropertyDescriptor;\n const setChecked = descriptor.set;\n\n if (prevChecked !== checked && setChecked) {\n const event = new Event(\"click\", { bubbles });\n input.indeterminate = isIndeterminate(checked);\n setChecked.call(input, isIndeterminate(checked) ? false : checked);\n input.dispatchEvent(event);\n }\n }, [prevChecked, checked, bubbles]);\n\n return (\n <input\n type=\"checkbox\"\n aria-hidden\n defaultChecked={isIndeterminate(checked) ? false : checked}\n {...inputProps}\n tabIndex={-1}\n ref={ref}\n style={{\n ...props.style,\n ...controlSize,\n position: \"absolute\",\n pointerEvents: \"none\",\n opacity: 0,\n margin: 0,\n }}\n />\n );\n};\n\nexport function isIndeterminate(\n checked?: CheckedState\n): checked is \"indeterminate\" {\n return checked === \"indeterminate\";\n}\n\nexport function getState(checked: CheckedState) {\n return isIndeterminate(checked)\n ? \"indeterminate\"\n : checked\n ? \"checked\"\n : \"unchecked\";\n}\n\nconst Root = Checkbox;\n\nexport {\n createCheckboxScope,\n //\n Checkbox,\n //\n Root,\n};\nexport type { CheckboxProps, CheckedState };\n", "import React from \"react\";\nimport { Presence } from \"@huin-core/react-presence\";\nimport { Primitive } from \"@huin-core/react-primitive\";\nimport {\n getState,\n isIndeterminate,\n ScopedProps,\n useCheckboxContext,\n} from \"./Checkbox\";\n\nconst INDICATOR_NAME = \"CheckboxIndicator\";\n\ntype CheckboxIndicatorElement = React.ElementRef<typeof Primitive.span>;\ntype PrimitiveSpanProps = React.ComponentPropsWithoutRef<typeof Primitive.span>;\ninterface CheckboxIndicatorProps extends PrimitiveSpanProps {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true;\n}\n\nconst CheckboxIndicator = React.forwardRef<\n CheckboxIndicatorElement,\n CheckboxIndicatorProps\n>((props: ScopedProps<CheckboxIndicatorProps>, forwardedRef) => {\n const { __scopeCheckbox, forceMount, ...indicatorProps } = props;\n const context = useCheckboxContext(INDICATOR_NAME, __scopeCheckbox);\n return (\n <Presence present={forceMount || isIndeterminate(context.state) || context.state === true}>\n <Primitive.span\n data-state={getState(context.state)}\n data-disabled={context.disabled ? '' : undefined}\n {...indicatorProps}\n ref={forwardedRef}\n style={{ pointerEvents: 'none', ...props.style }}\n />\n </Presence>\n );\n});\n\nCheckboxIndicator.displayName = INDICATOR_NAME;\n\nexport { CheckboxIndicator };\nexport type {CheckboxIndicatorProps}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,gCAA4B;AAC5B,4BAAwB;AACxB,6BAA0B;AAC1B,uBAAqC;AACrC,2BAA0C;AAC1C,gCAAgC;AAChC,0CAAqC;
|
|
6
|
-
"names": ["form", "import_react_primitive", "
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["form", "import_react_primitive", "React"]
|
|
7
7
|
}
|
package/dist/index.mjs
CHANGED
|
@@ -9,7 +9,6 @@ import { composeEventHandlers } from "@huin-core/primitive";
|
|
|
9
9
|
import { createContextScope } from "@huin-core/react-context";
|
|
10
10
|
import { useComposedRefs } from "@huin-core/react-compose-refs";
|
|
11
11
|
import { useControllableState } from "@huin-core/react-use-controllable-state";
|
|
12
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
13
12
|
var CHECKBOX_NAME = "Checkbox";
|
|
14
13
|
var [createCheckboxContext, createCheckboxScope] = createContextScope(CHECKBOX_NAME);
|
|
15
14
|
var [CheckboxProvider, useCheckboxContext] = createCheckboxContext(CHECKBOX_NAME);
|
|
@@ -48,48 +47,45 @@ var Checkbox = React.forwardRef(
|
|
|
48
47
|
return () => form2.removeEventListener("reset", reset);
|
|
49
48
|
}
|
|
50
49
|
}, [button, setChecked]);
|
|
51
|
-
return /* @__PURE__ */
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
}
|
|
91
|
-
)
|
|
92
|
-
] });
|
|
50
|
+
return /* @__PURE__ */ React.createElement(CheckboxProvider, { scope: __scopeCheckbox, state: checked, disabled }, /* @__PURE__ */ React.createElement(
|
|
51
|
+
Primitive.button,
|
|
52
|
+
{
|
|
53
|
+
type: "button",
|
|
54
|
+
role: "checkbox",
|
|
55
|
+
"aria-checked": isIndeterminate(checked) ? "mixed" : checked,
|
|
56
|
+
"aria-required": required,
|
|
57
|
+
"data-state": getState(checked),
|
|
58
|
+
"data-disabled": disabled ? "" : void 0,
|
|
59
|
+
disabled,
|
|
60
|
+
value,
|
|
61
|
+
...checkboxProps,
|
|
62
|
+
ref: composedRefs,
|
|
63
|
+
onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
|
|
64
|
+
if (event.key === "Enter") event.preventDefault();
|
|
65
|
+
}),
|
|
66
|
+
onClick: composeEventHandlers(props.onClick, (event) => {
|
|
67
|
+
setChecked((prevChecked) => isIndeterminate(prevChecked) ? true : !prevChecked);
|
|
68
|
+
if (isFormControl) {
|
|
69
|
+
hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
|
|
70
|
+
if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
|
|
71
|
+
}
|
|
72
|
+
})
|
|
73
|
+
}
|
|
74
|
+
), isFormControl && /* @__PURE__ */ React.createElement(
|
|
75
|
+
BubbleInput,
|
|
76
|
+
{
|
|
77
|
+
control: button,
|
|
78
|
+
bubbles: !hasConsumerStoppedPropagationRef.current,
|
|
79
|
+
name,
|
|
80
|
+
value,
|
|
81
|
+
checked,
|
|
82
|
+
required,
|
|
83
|
+
disabled,
|
|
84
|
+
form,
|
|
85
|
+
style: { transform: "translateX(-100%)" },
|
|
86
|
+
defaultChecked: isIndeterminate(defaultChecked) ? false : defaultChecked
|
|
87
|
+
}
|
|
88
|
+
));
|
|
93
89
|
}
|
|
94
90
|
);
|
|
95
91
|
Checkbox.displayName = CHECKBOX_NAME;
|
|
@@ -113,7 +109,7 @@ var BubbleInput = (props) => {
|
|
|
113
109
|
input.dispatchEvent(event);
|
|
114
110
|
}
|
|
115
111
|
}, [prevChecked, checked, bubbles]);
|
|
116
|
-
return /* @__PURE__ */
|
|
112
|
+
return /* @__PURE__ */ React.createElement(
|
|
117
113
|
"input",
|
|
118
114
|
{
|
|
119
115
|
type: "checkbox",
|
|
@@ -145,12 +141,11 @@ var Root = Checkbox;
|
|
|
145
141
|
import React2 from "react";
|
|
146
142
|
import { Presence } from "@huin-core/react-presence";
|
|
147
143
|
import { Primitive as Primitive2 } from "@huin-core/react-primitive";
|
|
148
|
-
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
149
144
|
var INDICATOR_NAME = "CheckboxIndicator";
|
|
150
145
|
var CheckboxIndicator = React2.forwardRef((props, forwardedRef) => {
|
|
151
146
|
const { __scopeCheckbox, forceMount, ...indicatorProps } = props;
|
|
152
147
|
const context = useCheckboxContext(INDICATOR_NAME, __scopeCheckbox);
|
|
153
|
-
return /* @__PURE__ */
|
|
148
|
+
return /* @__PURE__ */ React2.createElement(Presence, { present: forceMount || isIndeterminate(context.state) || context.state === true }, /* @__PURE__ */ React2.createElement(
|
|
154
149
|
Primitive2.span,
|
|
155
150
|
{
|
|
156
151
|
"data-state": getState(context.state),
|
|
@@ -159,7 +154,7 @@ var CheckboxIndicator = React2.forwardRef((props, forwardedRef) => {
|
|
|
159
154
|
ref: forwardedRef,
|
|
160
155
|
style: { pointerEvents: "none", ...props.style }
|
|
161
156
|
}
|
|
162
|
-
)
|
|
157
|
+
));
|
|
163
158
|
});
|
|
164
159
|
CheckboxIndicator.displayName = INDICATOR_NAME;
|
|
165
160
|
export {
|
package/dist/index.mjs.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/Checkbox.tsx", "../src/CheckboxIndicator.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from \"react\";\nimport { usePrevious } from \"@huin-core/react-use-previous\";\nimport { useSize } from \"@huin-core/react-use-size\";\nimport { Primitive } from \"@huin-core/react-primitive\";\nimport { composeEventHandlers } from \"@huin-core/primitive\";\nimport { createContextScope, Scope } from \"@huin-core/react-context\";\nimport { useComposedRefs } from \"@huin-core/react-compose-refs\";\nimport { useControllableState } from \"@huin-core/react-use-controllable-state\";\n\n/* -------------------------------------------------------------------------------------------------\n * Checkbox\n * -----------------------------------------------------------------------------------------------*/\n\nconst CHECKBOX_NAME = \"Checkbox\";\n\nexport type ScopedProps<P> = P & { __scopeCheckbox?: Scope };\nconst [createCheckboxContext, createCheckboxScope] =\n createContextScope(CHECKBOX_NAME);\n\ntype CheckedState = boolean | \"indeterminate\";\n\ntype CheckboxContextValue = {\n state: CheckedState;\n disabled?: boolean;\n};\n\nexport const [CheckboxProvider, useCheckboxContext] =\n createCheckboxContext<CheckboxContextValue>(CHECKBOX_NAME);\n\ntype CheckboxElement = React.ElementRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = React.ComponentPropsWithoutRef<\n typeof Primitive.button\n>;\ninterface CheckboxProps\n extends Omit<PrimitiveButtonProps, \"checked\" | \"defaultChecked\"> {\n checked?: CheckedState;\n defaultChecked?: CheckedState;\n required?: boolean;\n onCheckedChange?(checked: CheckedState): void;\n}\n\nconst Checkbox = React.forwardRef<CheckboxElement, CheckboxProps>(\n (props: ScopedProps<CheckboxProps>, forwardedRef) => {\n const {\n __scopeCheckbox,\n name,\n checked: checkedProp,\n defaultChecked,\n required,\n disabled,\n value = \"on\",\n onCheckedChange,\n form,\n ...checkboxProps\n } = props;\n const [button, setButton] = React.useState<HTMLButtonElement | null>(null);\n const composedRefs = useComposedRefs(forwardedRef, (node) =>\n setButton(node)\n );\n const hasConsumerStoppedPropagationRef = React.useRef(false);\n // We set this to true by default so that events bubble to forms without JS (SSR)\n const isFormControl = button ? Boolean(button.closest(\"form\")) : true;\n const [checked = false, setChecked] = useControllableState({\n prop: checkedProp,\n defaultProp: defaultChecked,\n onChange: onCheckedChange,\n });\n const initialCheckedStateRef = React.useRef(checked);\n React.useEffect(() => {\n const form = button?.form;\n if (form) {\n const reset = () => setChecked(initialCheckedStateRef.current);\n form.addEventListener(\"reset\", reset);\n return () => form.removeEventListener(\"reset\", reset);\n }\n }, [button, setChecked]);\n\n return (\n <CheckboxProvider scope={__scopeCheckbox} state={checked} disabled={disabled}>\n <Primitive.button\n type=\"button\"\n role=\"checkbox\"\n aria-checked={isIndeterminate(checked) ? 'mixed' : checked}\n aria-required={required}\n data-state={getState(checked)}\n data-disabled={disabled ? '' : undefined}\n disabled={disabled}\n value={value}\n {...checkboxProps}\n ref={composedRefs}\n onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n // According to WAI ARIA, Checkboxes don't activate on enter keypress\n if (event.key === 'Enter') event.preventDefault();\n })}\n onClick={composeEventHandlers(props.onClick, (event) => {\n setChecked((prevChecked) => (isIndeterminate(prevChecked) ? true : !prevChecked));\n if (isFormControl) {\n hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();\n // if checkbox is in a form, stop propagation from the button so that we only propagate\n // one click event (from the input). We propagate changes from an input so that native\n // form validation works and form events reflect checkbox updates.\n if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();\n }\n })}\n />\n {isFormControl && (\n <BubbleInput\n control={button}\n bubbles={!hasConsumerStoppedPropagationRef.current}\n name={name}\n value={value}\n checked={checked}\n required={required}\n disabled={disabled}\n form={form}\n // We transform because the input is absolutely positioned but we have\n // rendered it **after** the button. This pulls it back to sit on top\n // of the button.\n style={{ transform: 'translateX(-100%)' }}\n defaultChecked={isIndeterminate(defaultChecked) ? false : defaultChecked}\n />\n )}\n </CheckboxProvider>\n );\n }\n);\n\nCheckbox.displayName = CHECKBOX_NAME;\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype InputProps = React.ComponentPropsWithoutRef<\"input\">;\ninterface BubbleInputProps extends Omit<InputProps, \"checked\"> {\n checked: CheckedState;\n control: HTMLElement | null;\n bubbles: boolean;\n}\n\nconst BubbleInput = (props: BubbleInputProps) => {\n const { control, checked, bubbles = true, ...inputProps } = props;\n const ref = React.useRef<HTMLInputElement>(null);\n const prevChecked = usePrevious(checked);\n const controlSize = useSize(control);\n\n // Bubble checked change to parents (e.g form change event)\n React.useEffect(() => {\n const input = ref.current!;\n const inputProto = window.HTMLInputElement.prototype;\n const descriptor = Object.getOwnPropertyDescriptor(\n inputProto,\n \"checked\"\n ) as PropertyDescriptor;\n const setChecked = descriptor.set;\n\n if (prevChecked !== checked && setChecked) {\n const event = new Event(\"click\", { bubbles });\n input.indeterminate = isIndeterminate(checked);\n setChecked.call(input, isIndeterminate(checked) ? false : checked);\n input.dispatchEvent(event);\n }\n }, [prevChecked, checked, bubbles]);\n\n return (\n <input\n type=\"checkbox\"\n aria-hidden\n defaultChecked={isIndeterminate(checked) ? false : checked}\n {...inputProps}\n tabIndex={-1}\n ref={ref}\n style={{\n ...props.style,\n ...controlSize,\n position: \"absolute\",\n pointerEvents: \"none\",\n opacity: 0,\n margin: 0,\n }}\n />\n );\n};\n\nexport function isIndeterminate(\n checked?: CheckedState\n): checked is \"indeterminate\" {\n return checked === \"indeterminate\";\n}\n\nexport function getState(checked: CheckedState) {\n return isIndeterminate(checked)\n ? \"indeterminate\"\n : checked\n ? \"checked\"\n : \"unchecked\";\n}\n\nconst Root = Checkbox;\n\nexport {\n createCheckboxScope,\n //\n Checkbox,\n //\n Root,\n};\nexport type { CheckboxProps, CheckedState };\n", "import React from \"react\";\nimport { Presence } from \"@huin-core/react-presence\";\nimport { Primitive } from \"@huin-core/react-primitive\";\nimport {\n getState,\n isIndeterminate,\n ScopedProps,\n useCheckboxContext,\n} from \"./Checkbox\";\n\nconst INDICATOR_NAME = \"CheckboxIndicator\";\n\ntype CheckboxIndicatorElement = React.ElementRef<typeof Primitive.span>;\ntype PrimitiveSpanProps = React.ComponentPropsWithoutRef<typeof Primitive.span>;\ninterface CheckboxIndicatorProps extends PrimitiveSpanProps {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true;\n}\n\nconst CheckboxIndicator = React.forwardRef<\n CheckboxIndicatorElement,\n CheckboxIndicatorProps\n>((props: ScopedProps<CheckboxIndicatorProps>, forwardedRef) => {\n const { __scopeCheckbox, forceMount, ...indicatorProps } = props;\n const context = useCheckboxContext(INDICATOR_NAME, __scopeCheckbox);\n return (\n <Presence present={forceMount || isIndeterminate(context.state) || context.state === true}>\n <Primitive.span\n data-state={getState(context.state)}\n data-disabled={context.disabled ? '' : undefined}\n {...indicatorProps}\n ref={forwardedRef}\n style={{ pointerEvents: 'none', ...props.style }}\n />\n </Presence>\n );\n});\n\nCheckboxIndicator.displayName = INDICATOR_NAME;\n\nexport { CheckboxIndicator };\nexport type {CheckboxIndicatorProps}\n"],
|
|
5
|
-
"mappings": ";;;AAAA,YAAY,WAAW;AACvB,SAAS,mBAAmB;AAC5B,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAC1B,SAAS,4BAA4B;AACrC,SAAS,0BAAiC;AAC1C,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;
|
|
6
|
-
"names": ["form", "React", "Primitive", "
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["form", "React", "Primitive", "React", "Primitive"]
|
|
7
7
|
}
|