@radix-ui/react-checkbox 1.3.7 → 1.3.8-rc.1784059564143
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 +47 -22
- package/dist/index.js.map +3 -3
- package/dist/index.mjs +48 -22
- package/dist/index.mjs.map +3 -3
- package/package.json +3 -4
package/dist/index.js
CHANGED
|
@@ -6,6 +6,7 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
|
6
6
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
7
|
var __getProtoOf = Object.getPrototypeOf;
|
|
8
8
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
9
10
|
var __export = (target, all) => {
|
|
10
11
|
for (var name in all)
|
|
11
12
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -51,7 +52,6 @@ var import_react_compose_refs = require("@radix-ui/react-compose-refs");
|
|
|
51
52
|
var import_react_context = require("@radix-ui/react-context");
|
|
52
53
|
var import_primitive = require("@radix-ui/primitive");
|
|
53
54
|
var import_react_use_controllable_state = require("@radix-ui/react-use-controllable-state");
|
|
54
|
-
var import_react_use_previous = require("@radix-ui/react-use-previous");
|
|
55
55
|
var import_react_use_size = require("@radix-ui/react-use-size");
|
|
56
56
|
var import_react_presence = require("@radix-ui/react-presence");
|
|
57
57
|
var import_react_primitive = require("@radix-ui/react-primitive");
|
|
@@ -83,6 +83,10 @@ function CheckboxProvider(props) {
|
|
|
83
83
|
const [control, setControl] = React.useState(null);
|
|
84
84
|
const [bubbleInput, setBubbleInput] = React.useState(null);
|
|
85
85
|
const hasConsumerStoppedPropagationRef = React.useRef(false);
|
|
86
|
+
const [userInteractionCount, onUserInteraction] = React.useReducer(
|
|
87
|
+
(count) => count + 1,
|
|
88
|
+
0
|
|
89
|
+
);
|
|
86
90
|
const isFormControl = control ? !!form || !!control.closest("form") : (
|
|
87
91
|
// We set this to true by default so that events bubble to forms without JS (SSR)
|
|
88
92
|
true
|
|
@@ -97,6 +101,8 @@ function CheckboxProvider(props) {
|
|
|
97
101
|
form,
|
|
98
102
|
value,
|
|
99
103
|
hasConsumerStoppedPropagationRef,
|
|
104
|
+
userInteractionCount,
|
|
105
|
+
onUserInteraction,
|
|
100
106
|
required,
|
|
101
107
|
defaultChecked: isIndeterminate(defaultChecked) ? false : defaultChecked,
|
|
102
108
|
isFormControl,
|
|
@@ -112,9 +118,10 @@ function CheckboxProvider(props) {
|
|
|
112
118
|
}
|
|
113
119
|
);
|
|
114
120
|
}
|
|
121
|
+
__name(CheckboxProvider, "CheckboxProvider");
|
|
115
122
|
var TRIGGER_NAME = "CheckboxTrigger";
|
|
116
|
-
var CheckboxTrigger = React.forwardRef(
|
|
117
|
-
({ __scopeCheckbox, onKeyDown, onClick, ...checkboxProps }, forwardedRef)
|
|
123
|
+
var CheckboxTrigger = /* @__PURE__ */ React.forwardRef(
|
|
124
|
+
/* @__PURE__ */ __name(function CheckboxTrigger2({ __scopeCheckbox, onKeyDown, onClick, ...checkboxProps }, forwardedRef) {
|
|
118
125
|
const {
|
|
119
126
|
control,
|
|
120
127
|
value,
|
|
@@ -124,6 +131,7 @@ var CheckboxTrigger = React.forwardRef(
|
|
|
124
131
|
setControl,
|
|
125
132
|
setChecked,
|
|
126
133
|
hasConsumerStoppedPropagationRef,
|
|
134
|
+
onUserInteraction,
|
|
127
135
|
isFormControl,
|
|
128
136
|
bubbleInput
|
|
129
137
|
} = useCheckboxContext(TRIGGER_NAME, __scopeCheckbox);
|
|
@@ -132,7 +140,7 @@ var CheckboxTrigger = React.forwardRef(
|
|
|
132
140
|
React.useEffect(() => {
|
|
133
141
|
const form = control?.form;
|
|
134
142
|
if (form) {
|
|
135
|
-
const reset = () => setChecked(initialCheckedStateRef.current);
|
|
143
|
+
const reset = /* @__PURE__ */ __name(() => setChecked(initialCheckedStateRef.current), "reset");
|
|
136
144
|
form.addEventListener("reset", reset);
|
|
137
145
|
return () => form.removeEventListener("reset", reset);
|
|
138
146
|
}
|
|
@@ -154,6 +162,7 @@ var CheckboxTrigger = React.forwardRef(
|
|
|
154
162
|
if (event.key === "Enter") event.preventDefault();
|
|
155
163
|
}),
|
|
156
164
|
onClick: (0, import_primitive.composeEventHandlers)(onClick, (event) => {
|
|
165
|
+
onUserInteraction();
|
|
157
166
|
setChecked((prevChecked) => isIndeterminate(prevChecked) ? true : !prevChecked);
|
|
158
167
|
if (bubbleInput && isFormControl) {
|
|
159
168
|
hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
|
|
@@ -162,11 +171,11 @@ var CheckboxTrigger = React.forwardRef(
|
|
|
162
171
|
})
|
|
163
172
|
}
|
|
164
173
|
);
|
|
165
|
-
}
|
|
174
|
+
}, "CheckboxTrigger")
|
|
166
175
|
);
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
(props, forwardedRef)
|
|
176
|
+
var Checkbox = /* @__PURE__ */ React.forwardRef(
|
|
177
|
+
// blank line to reduce diff noise
|
|
178
|
+
/* @__PURE__ */ __name(function Checkbox2(props, forwardedRef) {
|
|
170
179
|
const {
|
|
171
180
|
__scopeCheckbox,
|
|
172
181
|
name,
|
|
@@ -209,12 +218,12 @@ var Checkbox = React.forwardRef(
|
|
|
209
218
|
] })
|
|
210
219
|
}
|
|
211
220
|
);
|
|
212
|
-
}
|
|
221
|
+
}, "Checkbox")
|
|
213
222
|
);
|
|
214
|
-
Checkbox.displayName = CHECKBOX_NAME;
|
|
215
223
|
var INDICATOR_NAME = "CheckboxIndicator";
|
|
216
|
-
var CheckboxIndicator = React.forwardRef(
|
|
217
|
-
|
|
224
|
+
var CheckboxIndicator = /* @__PURE__ */ React.forwardRef(
|
|
225
|
+
// blank line to reduce diff noise
|
|
226
|
+
/* @__PURE__ */ __name(function CheckboxIndicator2(props, forwardedRef) {
|
|
218
227
|
const { __scopeCheckbox, forceMount, ...indicatorProps } = props;
|
|
219
228
|
const context = useCheckboxContext(INDICATOR_NAME, __scopeCheckbox);
|
|
220
229
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -233,15 +242,16 @@ var CheckboxIndicator = React.forwardRef(
|
|
|
233
242
|
)
|
|
234
243
|
}
|
|
235
244
|
);
|
|
236
|
-
}
|
|
245
|
+
}, "CheckboxIndicator")
|
|
237
246
|
);
|
|
238
|
-
CheckboxIndicator.displayName = INDICATOR_NAME;
|
|
239
247
|
var BUBBLE_INPUT_NAME = "CheckboxBubbleInput";
|
|
240
|
-
var CheckboxBubbleInput = React.forwardRef(
|
|
241
|
-
|
|
248
|
+
var CheckboxBubbleInput = /* @__PURE__ */ React.forwardRef(
|
|
249
|
+
// blank line to reduce diff noise
|
|
250
|
+
/* @__PURE__ */ __name(function CheckboxBubbleInput2({ __scopeCheckbox, onClick, ...props }, forwardedRef) {
|
|
242
251
|
const {
|
|
243
252
|
control,
|
|
244
253
|
hasConsumerStoppedPropagationRef,
|
|
254
|
+
userInteractionCount,
|
|
245
255
|
checked,
|
|
246
256
|
defaultChecked,
|
|
247
257
|
required,
|
|
@@ -253,8 +263,10 @@ var CheckboxBubbleInput = React.forwardRef(
|
|
|
253
263
|
setBubbleInput
|
|
254
264
|
} = useCheckboxContext(BUBBLE_INPUT_NAME, __scopeCheckbox);
|
|
255
265
|
const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, setBubbleInput);
|
|
256
|
-
const prevChecked = (0, import_react_use_previous.usePrevious)(checked);
|
|
257
266
|
const controlSize = (0, import_react_use_size.useSize)(control);
|
|
267
|
+
const shouldStopClickPropagationRef = React.useRef(false);
|
|
268
|
+
const prevCheckedRef = React.useRef(checked);
|
|
269
|
+
const prevUserInteractionCountRef = React.useRef(userInteractionCount);
|
|
258
270
|
React.useEffect(() => {
|
|
259
271
|
const input = bubbleInput;
|
|
260
272
|
if (!input) return;
|
|
@@ -264,14 +276,20 @@ var CheckboxBubbleInput = React.forwardRef(
|
|
|
264
276
|
"checked"
|
|
265
277
|
);
|
|
266
278
|
const setChecked = descriptor.set;
|
|
267
|
-
const
|
|
268
|
-
|
|
279
|
+
const isUserInteraction = userInteractionCount !== prevUserInteractionCountRef.current;
|
|
280
|
+
prevUserInteractionCountRef.current = userInteractionCount;
|
|
281
|
+
const checkedChanged = prevCheckedRef.current !== checked;
|
|
282
|
+
prevCheckedRef.current = checked;
|
|
283
|
+
const bubbles = !(isUserInteraction && hasConsumerStoppedPropagationRef.current);
|
|
284
|
+
if (checkedChanged && setChecked) {
|
|
285
|
+
shouldStopClickPropagationRef.current = !isUserInteraction;
|
|
269
286
|
const event = new Event("click", { bubbles });
|
|
270
287
|
input.indeterminate = isIndeterminate(checked);
|
|
271
288
|
setChecked.call(input, isIndeterminate(checked) ? false : checked);
|
|
272
289
|
input.dispatchEvent(event);
|
|
290
|
+
shouldStopClickPropagationRef.current = false;
|
|
273
291
|
}
|
|
274
|
-
}, [bubbleInput,
|
|
292
|
+
}, [bubbleInput, checked, hasConsumerStoppedPropagationRef, userInteractionCount]);
|
|
275
293
|
const defaultCheckedRef = React.useRef(isIndeterminate(checked) ? false : checked);
|
|
276
294
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
277
295
|
import_react_primitive.Primitive.input,
|
|
@@ -287,6 +305,11 @@ var CheckboxBubbleInput = React.forwardRef(
|
|
|
287
305
|
...props,
|
|
288
306
|
tabIndex: -1,
|
|
289
307
|
ref: composedRefs,
|
|
308
|
+
onClick: (0, import_primitive.composeEventHandlers)(onClick, (event) => {
|
|
309
|
+
if (shouldStopClickPropagationRef.current) {
|
|
310
|
+
event.stopPropagation();
|
|
311
|
+
}
|
|
312
|
+
}),
|
|
290
313
|
style: {
|
|
291
314
|
...props.style,
|
|
292
315
|
...controlSize,
|
|
@@ -301,16 +324,18 @@ var CheckboxBubbleInput = React.forwardRef(
|
|
|
301
324
|
}
|
|
302
325
|
}
|
|
303
326
|
);
|
|
304
|
-
}
|
|
327
|
+
}, "CheckboxBubbleInput")
|
|
305
328
|
);
|
|
306
|
-
CheckboxBubbleInput.displayName = BUBBLE_INPUT_NAME;
|
|
307
329
|
function isFunction(value) {
|
|
308
330
|
return typeof value === "function";
|
|
309
331
|
}
|
|
332
|
+
__name(isFunction, "isFunction");
|
|
310
333
|
function isIndeterminate(checked) {
|
|
311
334
|
return checked === "indeterminate";
|
|
312
335
|
}
|
|
336
|
+
__name(isIndeterminate, "isIndeterminate");
|
|
313
337
|
function getState(checked) {
|
|
314
338
|
return isIndeterminate(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
|
|
315
339
|
}
|
|
340
|
+
__name(getState, "getState");
|
|
316
341
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/index.ts", "../src/checkbox.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client';\nexport {\n createCheckboxScope,\n //\n Checkbox,\n CheckboxProvider as unstable_CheckboxProvider,\n CheckboxTrigger as unstable_CheckboxTrigger,\n CheckboxIndicator,\n CheckboxBubbleInput as unstable_CheckboxBubbleInput,\n //\n Root,\n Provider as unstable_Provider,\n Trigger as unstable_Trigger,\n Indicator,\n BubbleInput as unstable_BubbleInput,\n} from './checkbox';\nexport type {\n CheckboxProps,\n CheckboxProviderProps as unstable_CheckboxProviderProps,\n CheckboxTriggerProps as unstable_CheckboxTriggerProps,\n CheckboxIndicatorProps,\n CheckboxBubbleInputProps as unstable_CheckboxBubbleInputProps,\n CheckedState,\n} from './checkbox';\n", "import * as React from 'react';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { usePrevious } from '@radix-ui/react-use-previous';\nimport { useSize } from '@radix-ui/react-use-size';\nimport { Presence } from '@radix-ui/react-presence';\nimport { Primitive } from '@radix-ui/react-primitive';\n\nimport type { Scope } from '@radix-ui/react-context';\n\nconst CHECKBOX_NAME = 'Checkbox';\n\ntype ScopedProps<P> = P & { __scopeCheckbox?: Scope };\nconst [createCheckboxContext, createCheckboxScope] = createContextScope(CHECKBOX_NAME);\n\ntype CheckedState = boolean | 'indeterminate';\n\ntype CheckboxContextValue<State extends CheckedState | boolean = CheckedState> = {\n checked: State | boolean;\n setChecked: React.Dispatch<React.SetStateAction<State | boolean>>;\n disabled: boolean | undefined;\n control: HTMLButtonElement | null;\n setControl: React.Dispatch<React.SetStateAction<HTMLButtonElement | null>>;\n name: string | undefined;\n form: string | undefined;\n value: string | number | readonly string[];\n hasConsumerStoppedPropagationRef: React.RefObject<boolean>;\n required: boolean | undefined;\n defaultChecked: boolean | undefined;\n isFormControl: boolean;\n bubbleInput: HTMLInputElement | null;\n setBubbleInput: React.Dispatch<React.SetStateAction<HTMLInputElement | null>>;\n};\n\nconst [CheckboxProviderImpl, useCheckboxContext] =\n createCheckboxContext<CheckboxContextValue>(CHECKBOX_NAME);\n\n/* -------------------------------------------------------------------------------------------------\n * CheckboxProvider\n * -----------------------------------------------------------------------------------------------*/\n\ninterface CheckboxProviderProps<State extends CheckedState = CheckedState> {\n checked?: State | boolean;\n defaultChecked?: State | boolean;\n required?: boolean;\n onCheckedChange?(checked: State | boolean): void;\n name?: string;\n form?: string;\n disabled?: boolean;\n value?: string | number | readonly string[];\n children?: React.ReactNode;\n}\n\nfunction CheckboxProvider<State extends CheckedState = CheckedState>(\n props: ScopedProps<CheckboxProviderProps<State>>,\n) {\n const {\n __scopeCheckbox,\n checked: checkedProp,\n children,\n defaultChecked,\n disabled,\n form,\n name,\n onCheckedChange,\n required,\n value = 'on',\n // @ts-expect-error\n internal_do_not_use_render,\n } = props;\n\n const [checked, setChecked] = useControllableState({\n prop: checkedProp,\n defaultProp: defaultChecked ?? false,\n onChange: onCheckedChange,\n caller: CHECKBOX_NAME,\n });\n const [control, setControl] = React.useState<HTMLButtonElement | null>(null);\n const [bubbleInput, setBubbleInput] = React.useState<HTMLInputElement | null>(null);\n const hasConsumerStoppedPropagationRef = React.useRef(false);\n const isFormControl = control\n ? !!form || !!control.closest('form')\n : // We set this to true by default so that events bubble to forms without JS (SSR)\n true;\n\n const context: CheckboxContextValue<State> = {\n checked: checked,\n disabled: disabled,\n setChecked: setChecked,\n control: control,\n setControl: setControl,\n name: name,\n form: form,\n value: value,\n hasConsumerStoppedPropagationRef: hasConsumerStoppedPropagationRef,\n required: required,\n defaultChecked: isIndeterminate(defaultChecked) ? false : defaultChecked,\n isFormControl: isFormControl,\n bubbleInput,\n setBubbleInput,\n };\n\n return (\n <CheckboxProviderImpl\n scope={__scopeCheckbox}\n {...(context as unknown as CheckboxContextValue<CheckedState>)}\n >\n {isFunction(internal_do_not_use_render) ? internal_do_not_use_render(context) : children}\n </CheckboxProviderImpl>\n );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * CheckboxTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'CheckboxTrigger';\n\ninterface CheckboxTriggerProps extends Omit<\n React.ComponentPropsWithoutRef<typeof Primitive.button>,\n keyof CheckboxProviderProps\n> {\n children?: React.ReactNode;\n}\n\nconst CheckboxTrigger = React.forwardRef<HTMLButtonElement, CheckboxTriggerProps>(\n (\n { __scopeCheckbox, onKeyDown, onClick, ...checkboxProps }: ScopedProps<CheckboxTriggerProps>,\n forwardedRef,\n ) => {\n const {\n control,\n value,\n disabled,\n checked,\n required,\n setControl,\n setChecked,\n hasConsumerStoppedPropagationRef,\n isFormControl,\n bubbleInput,\n } = useCheckboxContext(TRIGGER_NAME, __scopeCheckbox);\n const composedRefs = useComposedRefs(forwardedRef, setControl);\n\n const initialCheckedStateRef = React.useRef(checked);\n React.useEffect(() => {\n const form = control?.form;\n if (form) {\n const reset = () => setChecked(initialCheckedStateRef.current);\n form.addEventListener('reset', reset);\n return () => form.removeEventListener('reset', reset);\n }\n }, [control, setChecked]);\n\n return (\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(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(onClick, (event) => {\n setChecked((prevChecked) => (isIndeterminate(prevChecked) ? true : !prevChecked));\n if (bubbleInput && isFormControl) {\n hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();\n // if checkbox has a bubble input and is a form control, stop\n // propagation from the button so that we only propagate one click\n // event (from the input). We propagate changes from an input so\n // that native form validation works and form events reflect\n // checkbox updates.\n if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();\n }\n })}\n />\n );\n },\n);\n\nCheckboxTrigger.displayName = TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * Checkbox\n * -----------------------------------------------------------------------------------------------*/\n\ntype CheckboxElement = React.ComponentRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.button>;\ninterface CheckboxProps 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,\n defaultChecked,\n required,\n disabled,\n value,\n onCheckedChange,\n form,\n ...checkboxProps\n } = props;\n\n return (\n <CheckboxProvider\n __scopeCheckbox={__scopeCheckbox}\n checked={checked}\n defaultChecked={defaultChecked}\n disabled={disabled}\n required={required}\n onCheckedChange={onCheckedChange}\n name={name}\n form={form}\n value={value}\n // @ts-expect-error\n internal_do_not_use_render={({ isFormControl }: CheckboxContextValue) => (\n <>\n <CheckboxTrigger\n {...checkboxProps}\n ref={forwardedRef}\n // @ts-expect-error\n __scopeCheckbox={__scopeCheckbox}\n />\n {isFormControl && (\n <CheckboxBubbleInput\n // @ts-expect-error\n __scopeCheckbox={__scopeCheckbox}\n />\n )}\n </>\n )}\n />\n );\n },\n);\n\nCheckbox.displayName = CHECKBOX_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * CheckboxIndicator\n * -----------------------------------------------------------------------------------------------*/\n\nconst INDICATOR_NAME = 'CheckboxIndicator';\n\ntype CheckboxIndicatorElement = React.ComponentRef<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<CheckboxIndicatorElement, CheckboxIndicatorProps>(\n (props: ScopedProps<CheckboxIndicatorProps>, forwardedRef) => {\n const { __scopeCheckbox, forceMount, ...indicatorProps } = props;\n const context = useCheckboxContext(INDICATOR_NAME, __scopeCheckbox);\n return (\n <Presence\n present={forceMount || isIndeterminate(context.checked) || context.checked === true}\n >\n <Primitive.span\n data-state={getState(context.checked)}\n data-disabled={context.disabled ? '' : undefined}\n {...indicatorProps}\n ref={forwardedRef}\n style={{ pointerEvents: 'none', ...props.style }}\n />\n </Presence>\n );\n },\n);\n\nCheckboxIndicator.displayName = INDICATOR_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * CheckboxBubbleInput\n * -----------------------------------------------------------------------------------------------*/\n\nconst BUBBLE_INPUT_NAME = 'CheckboxBubbleInput';\n\ntype InputProps = React.ComponentPropsWithoutRef<typeof Primitive.input>;\ninterface CheckboxBubbleInputProps extends Omit<InputProps, 'checked'> {}\n\nconst CheckboxBubbleInput = React.forwardRef<HTMLInputElement, CheckboxBubbleInputProps>(\n ({ __scopeCheckbox, ...props }: ScopedProps<CheckboxBubbleInputProps>, forwardedRef) => {\n const {\n control,\n hasConsumerStoppedPropagationRef,\n checked,\n defaultChecked,\n required,\n disabled,\n name,\n value,\n form,\n bubbleInput,\n setBubbleInput,\n } = useCheckboxContext(BUBBLE_INPUT_NAME, __scopeCheckbox);\n\n const composedRefs = useComposedRefs(forwardedRef, setBubbleInput);\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 = bubbleInput;\n if (!input) return;\n\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 const bubbles = !hasConsumerStoppedPropagationRef.current;\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 }, [bubbleInput, prevChecked, checked, hasConsumerStoppedPropagationRef]);\n\n const defaultCheckedRef = React.useRef(isIndeterminate(checked) ? false : checked);\n return (\n <Primitive.input\n type=\"checkbox\"\n aria-hidden\n defaultChecked={defaultChecked ?? defaultCheckedRef.current}\n required={required}\n disabled={disabled}\n name={name}\n value={value}\n form={form}\n {...props}\n tabIndex={-1}\n ref={composedRefs}\n style={{\n ...props.style,\n ...controlSize,\n position: 'absolute',\n pointerEvents: 'none',\n opacity: 0,\n margin: 0,\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 transform: 'translateX(-100%)',\n }}\n />\n );\n },\n);\n\nCheckboxBubbleInput.displayName = BUBBLE_INPUT_NAME;\n\n/* ---------------------------------------------------------------------------------------------- */\n\nfunction isFunction(value: unknown): value is (...args: any[]) => any {\n return typeof value === 'function';\n}\n\nfunction isIndeterminate(checked?: CheckedState): checked is 'indeterminate' {\n return checked === 'indeterminate';\n}\n\nfunction getState(checked: CheckedState) {\n return isIndeterminate(checked) ? 'indeterminate' : checked ? 'checked' : 'unchecked';\n}\n\nexport {\n createCheckboxScope,\n //\n Checkbox,\n CheckboxProvider,\n CheckboxTrigger,\n CheckboxIndicator,\n CheckboxBubbleInput,\n //\n Checkbox as Root,\n CheckboxProvider as Provider,\n CheckboxTrigger as Trigger,\n CheckboxIndicator as Indicator,\n CheckboxBubbleInput as BubbleInput,\n};\nexport type {\n CheckboxProps,\n CheckboxProviderProps,\n CheckboxTriggerProps,\n CheckboxIndicatorProps,\n CheckboxBubbleInputProps,\n CheckedState,\n};\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": []
|
|
4
|
+
"sourcesContent": ["'use client';\nexport {\n createCheckboxScope,\n //\n Checkbox,\n CheckboxProvider as unstable_CheckboxProvider,\n CheckboxTrigger as unstable_CheckboxTrigger,\n CheckboxIndicator,\n CheckboxBubbleInput as unstable_CheckboxBubbleInput,\n //\n Root,\n Provider as unstable_Provider,\n Trigger as unstable_Trigger,\n Indicator,\n BubbleInput as unstable_BubbleInput,\n} from './checkbox';\nexport type {\n CheckboxProps,\n CheckboxProviderProps as unstable_CheckboxProviderProps,\n CheckboxTriggerProps as unstable_CheckboxTriggerProps,\n CheckboxIndicatorProps,\n CheckboxBubbleInputProps as unstable_CheckboxBubbleInputProps,\n CheckedState,\n} from './checkbox';\n", "import * as React from 'react';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { useSize } from '@radix-ui/react-use-size';\nimport { Presence } from '@radix-ui/react-presence';\nimport { Primitive } from '@radix-ui/react-primitive';\n\nimport type { Scope } from '@radix-ui/react-context';\n\nconst CHECKBOX_NAME = 'Checkbox';\n\ntype ScopedProps<P> = P & { __scopeCheckbox?: Scope };\nconst [createCheckboxContext, createCheckboxScope] = createContextScope(CHECKBOX_NAME);\n\ntype CheckedState = boolean | 'indeterminate';\n\ntype CheckboxContextValue<State extends CheckedState | boolean = CheckedState> = {\n checked: State | boolean;\n setChecked: React.Dispatch<React.SetStateAction<State | boolean>>;\n disabled: boolean | undefined;\n control: HTMLButtonElement | null;\n setControl: React.Dispatch<React.SetStateAction<HTMLButtonElement | null>>;\n name: string | undefined;\n form: string | undefined;\n value: string | number | readonly string[];\n hasConsumerStoppedPropagationRef: React.RefObject<boolean>;\n userInteractionCount: number;\n onUserInteraction: () => void;\n required: boolean | undefined;\n defaultChecked: boolean | undefined;\n isFormControl: boolean;\n bubbleInput: HTMLInputElement | null;\n setBubbleInput: React.Dispatch<React.SetStateAction<HTMLInputElement | null>>;\n};\n\nconst [CheckboxProviderImpl, useCheckboxContext] =\n createCheckboxContext<CheckboxContextValue>(CHECKBOX_NAME);\n\n/* -------------------------------------------------------------------------------------------------\n * CheckboxProvider\n * -----------------------------------------------------------------------------------------------*/\n\ninterface CheckboxProviderProps<State extends CheckedState = CheckedState> {\n checked?: State | boolean;\n defaultChecked?: State | boolean;\n required?: boolean;\n onCheckedChange?(checked: State | boolean): void;\n name?: string;\n form?: string;\n disabled?: boolean;\n value?: string | number | readonly string[];\n children?: React.ReactNode;\n}\n\nfunction CheckboxProvider<State extends CheckedState = CheckedState>(\n props: ScopedProps<CheckboxProviderProps<State>>,\n) {\n const {\n __scopeCheckbox,\n checked: checkedProp,\n children,\n defaultChecked,\n disabled,\n form,\n name,\n onCheckedChange,\n required,\n value = 'on',\n // @ts-expect-error\n internal_do_not_use_render,\n } = props;\n\n const [checked, setChecked] = useControllableState({\n prop: checkedProp,\n defaultProp: defaultChecked ?? false,\n onChange: onCheckedChange,\n caller: CHECKBOX_NAME,\n });\n const [control, setControl] = React.useState<HTMLButtonElement | null>(null);\n const [bubbleInput, setBubbleInput] = React.useState<HTMLInputElement | null>(null);\n const hasConsumerStoppedPropagationRef = React.useRef(false);\n\n // Incremented on every user interaction with the trigger. The bubble input\n // compares this against the value it last handled to tell whether a `checked`\n // change was driven by the user (vs. a controlled/programmatic update). Using\n // a counter guarantees the marker is updated in the same commit as the\n // resulting render, so it can never go stale and leak into a later\n // programmatic update.\n const [userInteractionCount, onUserInteraction] = React.useReducer(\n (count: number): number => count + 1,\n 0,\n );\n const isFormControl = control\n ? !!form || !!control.closest('form')\n : // We set this to true by default so that events bubble to forms without JS (SSR)\n true;\n\n const context: CheckboxContextValue<State> = {\n checked: checked,\n disabled: disabled,\n setChecked: setChecked,\n control: control,\n setControl: setControl,\n name: name,\n form: form,\n value: value,\n hasConsumerStoppedPropagationRef: hasConsumerStoppedPropagationRef,\n userInteractionCount: userInteractionCount,\n onUserInteraction: onUserInteraction,\n required: required,\n defaultChecked: isIndeterminate(defaultChecked) ? false : defaultChecked,\n isFormControl: isFormControl,\n bubbleInput,\n setBubbleInput,\n };\n\n return (\n <CheckboxProviderImpl\n scope={__scopeCheckbox}\n {...(context as unknown as CheckboxContextValue<CheckedState>)}\n >\n {isFunction(internal_do_not_use_render) ? internal_do_not_use_render(context) : children}\n </CheckboxProviderImpl>\n );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * CheckboxTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'CheckboxTrigger';\n\ninterface CheckboxTriggerProps extends Omit<\n React.ComponentPropsWithoutRef<typeof Primitive.button>,\n keyof CheckboxProviderProps\n> {\n children?: React.ReactNode;\n}\n\nconst CheckboxTrigger = /* @__PURE__ */ React.forwardRef<HTMLButtonElement, CheckboxTriggerProps>(\n function CheckboxTrigger(\n { __scopeCheckbox, onKeyDown, onClick, ...checkboxProps }: ScopedProps<CheckboxTriggerProps>,\n forwardedRef,\n ) {\n const {\n control,\n value,\n disabled,\n checked,\n required,\n setControl,\n setChecked,\n hasConsumerStoppedPropagationRef,\n onUserInteraction,\n isFormControl,\n bubbleInput,\n } = useCheckboxContext(TRIGGER_NAME, __scopeCheckbox);\n const composedRefs = useComposedRefs(forwardedRef, setControl);\n\n const initialCheckedStateRef = React.useRef(checked);\n React.useEffect(() => {\n const form = control?.form;\n if (form) {\n const reset = () => setChecked(initialCheckedStateRef.current);\n form.addEventListener('reset', reset);\n return () => form.removeEventListener('reset', reset);\n }\n }, [control, setChecked]);\n\n return (\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(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(onClick, (event) => {\n onUserInteraction();\n setChecked((prevChecked) => (isIndeterminate(prevChecked) ? true : !prevChecked));\n if (bubbleInput && isFormControl) {\n hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();\n // if checkbox has a bubble input and is a form control, stop\n // propagation from the button so that we only propagate one click\n // event (from the input). We propagate changes from an input so\n // that native form validation works and form events reflect\n // checkbox updates.\n if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();\n }\n })}\n />\n );\n },\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Checkbox\n * -----------------------------------------------------------------------------------------------*/\n\ntype CheckboxElement = React.ComponentRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.button>;\ninterface CheckboxProps extends Omit<PrimitiveButtonProps, 'checked' | 'defaultChecked'> {\n checked?: CheckedState;\n defaultChecked?: CheckedState;\n required?: boolean;\n onCheckedChange?(checked: CheckedState): void;\n}\n\nconst Checkbox = /* @__PURE__ */ React.forwardRef<CheckboxElement, CheckboxProps>(\n // blank line to reduce diff noise\n function Checkbox(props: ScopedProps<CheckboxProps>, forwardedRef) {\n const {\n __scopeCheckbox,\n name,\n checked,\n defaultChecked,\n required,\n disabled,\n value,\n onCheckedChange,\n form,\n ...checkboxProps\n } = props;\n\n return (\n <CheckboxProvider\n __scopeCheckbox={__scopeCheckbox}\n checked={checked}\n defaultChecked={defaultChecked}\n disabled={disabled}\n required={required}\n onCheckedChange={onCheckedChange}\n name={name}\n form={form}\n value={value}\n // @ts-expect-error\n internal_do_not_use_render={({ isFormControl }: CheckboxContextValue) => (\n <>\n <CheckboxTrigger\n {...checkboxProps}\n ref={forwardedRef}\n // @ts-expect-error\n __scopeCheckbox={__scopeCheckbox}\n />\n {isFormControl && (\n <CheckboxBubbleInput\n // @ts-expect-error\n __scopeCheckbox={__scopeCheckbox}\n />\n )}\n </>\n )}\n />\n );\n },\n);\n\n/* -------------------------------------------------------------------------------------------------\n * CheckboxIndicator\n * -----------------------------------------------------------------------------------------------*/\n\nconst INDICATOR_NAME = 'CheckboxIndicator';\n\ntype CheckboxIndicatorElement = React.ComponentRef<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 = /* @__PURE__ */ React.forwardRef<\n CheckboxIndicatorElement,\n CheckboxIndicatorProps\n>(\n // blank line to reduce diff noise\n function CheckboxIndicator(props: ScopedProps<CheckboxIndicatorProps>, forwardedRef) {\n const { __scopeCheckbox, forceMount, ...indicatorProps } = props;\n const context = useCheckboxContext(INDICATOR_NAME, __scopeCheckbox);\n return (\n <Presence\n present={forceMount || isIndeterminate(context.checked) || context.checked === true}\n >\n <Primitive.span\n data-state={getState(context.checked)}\n data-disabled={context.disabled ? '' : undefined}\n {...indicatorProps}\n ref={forwardedRef}\n style={{ pointerEvents: 'none', ...props.style }}\n />\n </Presence>\n );\n },\n);\n\n/* -------------------------------------------------------------------------------------------------\n * CheckboxBubbleInput\n * -----------------------------------------------------------------------------------------------*/\n\nconst BUBBLE_INPUT_NAME = 'CheckboxBubbleInput';\n\ntype InputProps = React.ComponentPropsWithoutRef<typeof Primitive.input>;\ninterface CheckboxBubbleInputProps extends Omit<InputProps, 'checked'> {}\n\nconst CheckboxBubbleInput = /* @__PURE__ */ React.forwardRef<\n HTMLInputElement,\n CheckboxBubbleInputProps\n>(\n // blank line to reduce diff noise\n function CheckboxBubbleInput(\n { __scopeCheckbox, onClick, ...props }: ScopedProps<CheckboxBubbleInputProps>,\n forwardedRef,\n ) {\n const {\n control,\n hasConsumerStoppedPropagationRef,\n userInteractionCount,\n checked,\n defaultChecked,\n required,\n disabled,\n name,\n value,\n form,\n bubbleInput,\n setBubbleInput,\n } = useCheckboxContext(BUBBLE_INPUT_NAME, __scopeCheckbox);\n\n const composedRefs = useComposedRefs(forwardedRef, setBubbleInput);\n const controlSize = useSize(control);\n // When the checked change is not driven by a user interaction (e.g. a\n // controlled `checked` update), the `click` event we dispatch to notify\n // forms must not reach ancestor `onClick` handlers. We can't simply make it\n // non-bubbling because React derives the checkbox's `change` event from a\n // bubbling `click`. Instead we stop propagation of the synthetic click,\n // which still lets the `change` event reach the form.\n const shouldStopClickPropagationRef = React.useRef(false);\n // The `checked` value we last synced to the input, and the interaction\n // counter we last accounted for. Comparing against these lets us detect a\n // genuine `checked` change and whether it followed a user interaction, even\n // on renders caused by clicks that don't change `checked` (e.g. a\n // controlled value that ignores the change).\n const prevCheckedRef = React.useRef(checked);\n const prevUserInteractionCountRef = React.useRef(userInteractionCount);\n\n // Bubble checked change to parents (e.g form change event)\n React.useEffect(() => {\n const input = bubbleInput;\n if (!input) return;\n\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 const isUserInteraction = userInteractionCount !== prevUserInteractionCountRef.current;\n prevUserInteractionCountRef.current = userInteractionCount;\n const checkedChanged = prevCheckedRef.current !== checked;\n prevCheckedRef.current = checked;\n\n const bubbles = !(isUserInteraction && hasConsumerStoppedPropagationRef.current);\n if (checkedChanged && setChecked) {\n shouldStopClickPropagationRef.current = !isUserInteraction;\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 shouldStopClickPropagationRef.current = false;\n }\n }, [bubbleInput, checked, hasConsumerStoppedPropagationRef, userInteractionCount]);\n\n const defaultCheckedRef = React.useRef(isIndeterminate(checked) ? false : checked);\n return (\n <Primitive.input\n type=\"checkbox\"\n aria-hidden\n defaultChecked={defaultChecked ?? defaultCheckedRef.current}\n required={required}\n disabled={disabled}\n name={name}\n value={value}\n form={form}\n {...props}\n tabIndex={-1}\n ref={composedRefs}\n onClick={composeEventHandlers(onClick, (event) => {\n // Prevent the synthetic click dispatched on controlled/programmatic\n // updates from triggering ancestor `onClick` handlers, while still\n // allowing the resulting `change` event to reach the form.\n if (shouldStopClickPropagationRef.current) {\n event.stopPropagation();\n }\n })}\n style={{\n ...props.style,\n ...controlSize,\n position: 'absolute',\n pointerEvents: 'none',\n opacity: 0,\n margin: 0,\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 transform: 'translateX(-100%)',\n }}\n />\n );\n },\n);\n\n/* ---------------------------------------------------------------------------------------------- */\n\nfunction isFunction(value: unknown): value is (...args: any[]) => any {\n return typeof value === 'function';\n}\n\nfunction isIndeterminate(checked?: CheckedState): checked is 'indeterminate' {\n return checked === 'indeterminate';\n}\n\nfunction getState(checked: CheckedState) {\n return isIndeterminate(checked) ? 'indeterminate' : checked ? 'checked' : 'unchecked';\n}\n\nexport {\n createCheckboxScope,\n //\n Checkbox,\n CheckboxProvider,\n CheckboxTrigger,\n CheckboxIndicator,\n CheckboxBubbleInput,\n //\n Checkbox as Root,\n CheckboxProvider as Provider,\n CheckboxTrigger as Trigger,\n CheckboxIndicator as Indicator,\n CheckboxBubbleInput as BubbleInput,\n};\nexport type {\n CheckboxProps,\n CheckboxProviderProps,\n CheckboxTriggerProps,\n CheckboxIndicatorProps,\n CheckboxBubbleInputProps,\n CheckedState,\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,gCAAgC;AAChC,2BAAmC;AACnC,uBAAqC;AACrC,0CAAqC;AACrC,4BAAwB;AACxB,4BAAyB;AACzB,6BAA0B;AAgHtB;AA5GJ,IAAM,gBAAgB;AAGtB,IAAM,CAAC,uBAAuB,mBAAmB,QAAI,yCAAmB,aAAa;AAuBrF,IAAM,CAAC,sBAAsB,kBAAkB,IAC7C,sBAA4C,aAAa;AAkB3D,SAAS,iBACP,OACA;AACA,QAAM;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA;AAAA,IAER;AAAA,EACF,IAAI;AAEJ,QAAM,CAAC,SAAS,UAAU,QAAI,0DAAqB;AAAA,IACjD,MAAM;AAAA,IACN,aAAa,kBAAkB;AAAA,IAC/B,UAAU;AAAA,IACV,QAAQ;AAAA,EACV,CAAC;AACD,QAAM,CAAC,SAAS,UAAU,IAAU,eAAmC,IAAI;AAC3E,QAAM,CAAC,aAAa,cAAc,IAAU,eAAkC,IAAI;AAClF,QAAM,mCAAyC,aAAO,KAAK;AAQ3D,QAAM,CAAC,sBAAsB,iBAAiB,IAAU;AAAA,IACtD,CAAC,UAA0B,QAAQ;AAAA,IACnC;AAAA,EACF;AACA,QAAM,gBAAgB,UAClB,CAAC,CAAC,QAAQ,CAAC,CAAC,QAAQ,QAAQ,MAAM;AAAA;AAAA,IAElC;AAAA;AAEJ,QAAM,UAAuC;AAAA,IAC3C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB,gBAAgB,cAAc,IAAI,QAAQ;AAAA,IAC1D;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACN,GAAI;AAAA,MAEJ,qBAAW,0BAA0B,IAAI,2BAA2B,OAAO,IAAI;AAAA;AAAA,EAClF;AAEJ;AAtES;AA4ET,IAAM,eAAe;AASrB,IAAM,kBAAkC,gBAAM;AAAA,EAC5C,gCAASA,iBACP,EAAE,iBAAiB,WAAW,SAAS,GAAG,cAAc,GACxD,cACA;AACA,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI,mBAAmB,cAAc,eAAe;AACpD,UAAM,mBAAe,2CAAgB,cAAc,UAAU;AAE7D,UAAM,yBAA+B,aAAO,OAAO;AACnD,IAAM,gBAAU,MAAM;AACpB,YAAM,OAAO,SAAS;AACtB,UAAI,MAAM;AACR,cAAM,QAAQ,6BAAM,WAAW,uBAAuB,OAAO,GAA/C;AACd,aAAK,iBAAiB,SAAS,KAAK;AACpC,eAAO,MAAM,KAAK,oBAAoB,SAAS,KAAK;AAAA,MACtD;AAAA,IACF,GAAG,CAAC,SAAS,UAAU,CAAC;AAExB,WACE;AAAA,MAAC,iCAAU;AAAA,MAAV;AAAA,QACC,MAAK;AAAA,QACL,MAAK;AAAA,QACL,gBAAc,gBAAgB,OAAO,IAAI,UAAU;AAAA,QACnD,iBAAe;AAAA,QACf,cAAY,SAAS,OAAO;AAAA,QAC5B,iBAAe,WAAW,KAAK;AAAA,QAC/B;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,eAAW,uCAAqB,WAAW,CAAC,UAAU;AAEpD,cAAI,MAAM,QAAQ,QAAS,OAAM,eAAe;AAAA,QAClD,CAAC;AAAA,QACD,aAAS,uCAAqB,SAAS,CAAC,UAAU;AAChD,4BAAkB;AAClB,qBAAW,CAAC,gBAAiB,gBAAgB,WAAW,IAAI,OAAO,CAAC,WAAY;AAChF,cAAI,eAAe,eAAe;AAChC,6CAAiC,UAAU,MAAM,qBAAqB;AAMtE,gBAAI,CAAC,iCAAiC,QAAS,OAAM,gBAAgB;AAAA,UACvE;AAAA,QACF,CAAC;AAAA;AAAA,IACH;AAAA,EAEJ,GA5DA;AA6DF;AAeA,IAAM,WAA2B,gBAAM;AAAA;AAAA,EAErC,gCAASC,UAAS,OAAmC,cAAc;AACjE,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI;AAEJ,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QAEA,4BAA4B,CAAC,EAAE,cAAc,MAC3C,4EACE;AAAA;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,cACJ,KAAK;AAAA,cAEL;AAAA;AAAA,UACF;AAAA,UACC,iBACC;AAAA,YAAC;AAAA;AAAA,cAEC;AAAA;AAAA,UACF;AAAA,WAEJ;AAAA;AAAA,IAEJ;AAAA,EAEJ,GA5CA;AA6CF;AAMA,IAAM,iBAAiB;AAYvB,IAAM,oBAAoC,gBAAM;AAAA;AAAA,EAK9C,gCAASC,mBAAkB,OAA4C,cAAc;AACnF,UAAM,EAAE,iBAAiB,YAAY,GAAG,eAAe,IAAI;AAC3D,UAAM,UAAU,mBAAmB,gBAAgB,eAAe;AAClE,WACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,cAAc,gBAAgB,QAAQ,OAAO,KAAK,QAAQ,YAAY;AAAA,QAE/E;AAAA,UAAC,iCAAU;AAAA,UAAV;AAAA,YACC,cAAY,SAAS,QAAQ,OAAO;AAAA,YACpC,iBAAe,QAAQ,WAAW,KAAK;AAAA,YACtC,GAAG;AAAA,YACJ,KAAK;AAAA,YACL,OAAO,EAAE,eAAe,QAAQ,GAAG,MAAM,MAAM;AAAA;AAAA,QACjD;AAAA;AAAA,IACF;AAAA,EAEJ,GAhBA;AAiBF;AAMA,IAAM,oBAAoB;AAK1B,IAAM,sBAAsC,gBAAM;AAAA;AAAA,EAKhD,gCAASC,qBACP,EAAE,iBAAiB,SAAS,GAAG,MAAM,GACrC,cACA;AACA,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI,mBAAmB,mBAAmB,eAAe;AAEzD,UAAM,mBAAe,2CAAgB,cAAc,cAAc;AACjE,UAAM,kBAAc,+BAAQ,OAAO;AAOnC,UAAM,gCAAsC,aAAO,KAAK;AAMxD,UAAM,iBAAuB,aAAO,OAAO;AAC3C,UAAM,8BAAoC,aAAO,oBAAoB;AAGrE,IAAM,gBAAU,MAAM;AACpB,YAAM,QAAQ;AACd,UAAI,CAAC,MAAO;AAEZ,YAAM,aAAa,OAAO,iBAAiB;AAC3C,YAAM,aAAa,OAAO;AAAA,QACxB;AAAA,QACA;AAAA,MACF;AACA,YAAM,aAAa,WAAW;AAE9B,YAAM,oBAAoB,yBAAyB,4BAA4B;AAC/E,kCAA4B,UAAU;AACtC,YAAM,iBAAiB,eAAe,YAAY;AAClD,qBAAe,UAAU;AAEzB,YAAM,UAAU,EAAE,qBAAqB,iCAAiC;AACxE,UAAI,kBAAkB,YAAY;AAChC,sCAA8B,UAAU,CAAC;AACzC,cAAM,QAAQ,IAAI,MAAM,SAAS,EAAE,QAAQ,CAAC;AAC5C,cAAM,gBAAgB,gBAAgB,OAAO;AAC7C,mBAAW,KAAK,OAAO,gBAAgB,OAAO,IAAI,QAAQ,OAAO;AACjE,cAAM,cAAc,KAAK;AACzB,sCAA8B,UAAU;AAAA,MAC1C;AAAA,IACF,GAAG,CAAC,aAAa,SAAS,kCAAkC,oBAAoB,CAAC;AAEjF,UAAM,oBAA0B,aAAO,gBAAgB,OAAO,IAAI,QAAQ,OAAO;AACjF,WACE;AAAA,MAAC,iCAAU;AAAA,MAAV;AAAA,QACC,MAAK;AAAA,QACL,eAAW;AAAA,QACX,gBAAgB,kBAAkB,kBAAkB;AAAA,QACpD;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QACJ,UAAU;AAAA,QACV,KAAK;AAAA,QACL,aAAS,uCAAqB,SAAS,CAAC,UAAU;AAIhD,cAAI,8BAA8B,SAAS;AACzC,kBAAM,gBAAgB;AAAA,UACxB;AAAA,QACF,CAAC;AAAA,QACD,OAAO;AAAA,UACL,GAAG,MAAM;AAAA,UACT,GAAG;AAAA,UACH,UAAU;AAAA,UACV,eAAe;AAAA,UACf,SAAS;AAAA,UACT,QAAQ;AAAA;AAAA;AAAA;AAAA,UAIR,WAAW;AAAA,QACb;AAAA;AAAA,IACF;AAAA,EAEJ,GApGA;AAqGF;AAIA,SAAS,WAAW,OAAkD;AACpE,SAAO,OAAO,UAAU;AAC1B;AAFS;AAIT,SAAS,gBAAgB,SAAoD;AAC3E,SAAO,YAAY;AACrB;AAFS;AAIT,SAAS,SAAS,SAAuB;AACvC,SAAO,gBAAgB,OAAO,IAAI,kBAAkB,UAAU,YAAY;AAC5E;AAFS;",
|
|
6
|
+
"names": ["CheckboxTrigger", "Checkbox", "CheckboxIndicator", "CheckboxBubbleInput"]
|
|
7
7
|
}
|
package/dist/index.mjs
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
2
4
|
|
|
3
5
|
// src/checkbox.tsx
|
|
4
6
|
import * as React from "react";
|
|
@@ -6,7 +8,6 @@ import { useComposedRefs } from "@radix-ui/react-compose-refs";
|
|
|
6
8
|
import { createContextScope } from "@radix-ui/react-context";
|
|
7
9
|
import { composeEventHandlers } from "@radix-ui/primitive";
|
|
8
10
|
import { useControllableState } from "@radix-ui/react-use-controllable-state";
|
|
9
|
-
import { usePrevious } from "@radix-ui/react-use-previous";
|
|
10
11
|
import { useSize } from "@radix-ui/react-use-size";
|
|
11
12
|
import { Presence } from "@radix-ui/react-presence";
|
|
12
13
|
import { Primitive } from "@radix-ui/react-primitive";
|
|
@@ -38,6 +39,10 @@ function CheckboxProvider(props) {
|
|
|
38
39
|
const [control, setControl] = React.useState(null);
|
|
39
40
|
const [bubbleInput, setBubbleInput] = React.useState(null);
|
|
40
41
|
const hasConsumerStoppedPropagationRef = React.useRef(false);
|
|
42
|
+
const [userInteractionCount, onUserInteraction] = React.useReducer(
|
|
43
|
+
(count) => count + 1,
|
|
44
|
+
0
|
|
45
|
+
);
|
|
41
46
|
const isFormControl = control ? !!form || !!control.closest("form") : (
|
|
42
47
|
// We set this to true by default so that events bubble to forms without JS (SSR)
|
|
43
48
|
true
|
|
@@ -52,6 +57,8 @@ function CheckboxProvider(props) {
|
|
|
52
57
|
form,
|
|
53
58
|
value,
|
|
54
59
|
hasConsumerStoppedPropagationRef,
|
|
60
|
+
userInteractionCount,
|
|
61
|
+
onUserInteraction,
|
|
55
62
|
required,
|
|
56
63
|
defaultChecked: isIndeterminate(defaultChecked) ? false : defaultChecked,
|
|
57
64
|
isFormControl,
|
|
@@ -67,9 +74,10 @@ function CheckboxProvider(props) {
|
|
|
67
74
|
}
|
|
68
75
|
);
|
|
69
76
|
}
|
|
77
|
+
__name(CheckboxProvider, "CheckboxProvider");
|
|
70
78
|
var TRIGGER_NAME = "CheckboxTrigger";
|
|
71
|
-
var CheckboxTrigger = React.forwardRef(
|
|
72
|
-
({ __scopeCheckbox, onKeyDown, onClick, ...checkboxProps }, forwardedRef)
|
|
79
|
+
var CheckboxTrigger = /* @__PURE__ */ React.forwardRef(
|
|
80
|
+
/* @__PURE__ */ __name(function CheckboxTrigger2({ __scopeCheckbox, onKeyDown, onClick, ...checkboxProps }, forwardedRef) {
|
|
73
81
|
const {
|
|
74
82
|
control,
|
|
75
83
|
value,
|
|
@@ -79,6 +87,7 @@ var CheckboxTrigger = React.forwardRef(
|
|
|
79
87
|
setControl,
|
|
80
88
|
setChecked,
|
|
81
89
|
hasConsumerStoppedPropagationRef,
|
|
90
|
+
onUserInteraction,
|
|
82
91
|
isFormControl,
|
|
83
92
|
bubbleInput
|
|
84
93
|
} = useCheckboxContext(TRIGGER_NAME, __scopeCheckbox);
|
|
@@ -87,7 +96,7 @@ var CheckboxTrigger = React.forwardRef(
|
|
|
87
96
|
React.useEffect(() => {
|
|
88
97
|
const form = control?.form;
|
|
89
98
|
if (form) {
|
|
90
|
-
const reset = () => setChecked(initialCheckedStateRef.current);
|
|
99
|
+
const reset = /* @__PURE__ */ __name(() => setChecked(initialCheckedStateRef.current), "reset");
|
|
91
100
|
form.addEventListener("reset", reset);
|
|
92
101
|
return () => form.removeEventListener("reset", reset);
|
|
93
102
|
}
|
|
@@ -109,6 +118,7 @@ var CheckboxTrigger = React.forwardRef(
|
|
|
109
118
|
if (event.key === "Enter") event.preventDefault();
|
|
110
119
|
}),
|
|
111
120
|
onClick: composeEventHandlers(onClick, (event) => {
|
|
121
|
+
onUserInteraction();
|
|
112
122
|
setChecked((prevChecked) => isIndeterminate(prevChecked) ? true : !prevChecked);
|
|
113
123
|
if (bubbleInput && isFormControl) {
|
|
114
124
|
hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
|
|
@@ -117,11 +127,11 @@ var CheckboxTrigger = React.forwardRef(
|
|
|
117
127
|
})
|
|
118
128
|
}
|
|
119
129
|
);
|
|
120
|
-
}
|
|
130
|
+
}, "CheckboxTrigger")
|
|
121
131
|
);
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
(props, forwardedRef)
|
|
132
|
+
var Checkbox = /* @__PURE__ */ React.forwardRef(
|
|
133
|
+
// blank line to reduce diff noise
|
|
134
|
+
/* @__PURE__ */ __name(function Checkbox2(props, forwardedRef) {
|
|
125
135
|
const {
|
|
126
136
|
__scopeCheckbox,
|
|
127
137
|
name,
|
|
@@ -164,12 +174,12 @@ var Checkbox = React.forwardRef(
|
|
|
164
174
|
] })
|
|
165
175
|
}
|
|
166
176
|
);
|
|
167
|
-
}
|
|
177
|
+
}, "Checkbox")
|
|
168
178
|
);
|
|
169
|
-
Checkbox.displayName = CHECKBOX_NAME;
|
|
170
179
|
var INDICATOR_NAME = "CheckboxIndicator";
|
|
171
|
-
var CheckboxIndicator = React.forwardRef(
|
|
172
|
-
|
|
180
|
+
var CheckboxIndicator = /* @__PURE__ */ React.forwardRef(
|
|
181
|
+
// blank line to reduce diff noise
|
|
182
|
+
/* @__PURE__ */ __name(function CheckboxIndicator2(props, forwardedRef) {
|
|
173
183
|
const { __scopeCheckbox, forceMount, ...indicatorProps } = props;
|
|
174
184
|
const context = useCheckboxContext(INDICATOR_NAME, __scopeCheckbox);
|
|
175
185
|
return /* @__PURE__ */ jsx(
|
|
@@ -188,15 +198,16 @@ var CheckboxIndicator = React.forwardRef(
|
|
|
188
198
|
)
|
|
189
199
|
}
|
|
190
200
|
);
|
|
191
|
-
}
|
|
201
|
+
}, "CheckboxIndicator")
|
|
192
202
|
);
|
|
193
|
-
CheckboxIndicator.displayName = INDICATOR_NAME;
|
|
194
203
|
var BUBBLE_INPUT_NAME = "CheckboxBubbleInput";
|
|
195
|
-
var CheckboxBubbleInput = React.forwardRef(
|
|
196
|
-
|
|
204
|
+
var CheckboxBubbleInput = /* @__PURE__ */ React.forwardRef(
|
|
205
|
+
// blank line to reduce diff noise
|
|
206
|
+
/* @__PURE__ */ __name(function CheckboxBubbleInput2({ __scopeCheckbox, onClick, ...props }, forwardedRef) {
|
|
197
207
|
const {
|
|
198
208
|
control,
|
|
199
209
|
hasConsumerStoppedPropagationRef,
|
|
210
|
+
userInteractionCount,
|
|
200
211
|
checked,
|
|
201
212
|
defaultChecked,
|
|
202
213
|
required,
|
|
@@ -208,8 +219,10 @@ var CheckboxBubbleInput = React.forwardRef(
|
|
|
208
219
|
setBubbleInput
|
|
209
220
|
} = useCheckboxContext(BUBBLE_INPUT_NAME, __scopeCheckbox);
|
|
210
221
|
const composedRefs = useComposedRefs(forwardedRef, setBubbleInput);
|
|
211
|
-
const prevChecked = usePrevious(checked);
|
|
212
222
|
const controlSize = useSize(control);
|
|
223
|
+
const shouldStopClickPropagationRef = React.useRef(false);
|
|
224
|
+
const prevCheckedRef = React.useRef(checked);
|
|
225
|
+
const prevUserInteractionCountRef = React.useRef(userInteractionCount);
|
|
213
226
|
React.useEffect(() => {
|
|
214
227
|
const input = bubbleInput;
|
|
215
228
|
if (!input) return;
|
|
@@ -219,14 +232,20 @@ var CheckboxBubbleInput = React.forwardRef(
|
|
|
219
232
|
"checked"
|
|
220
233
|
);
|
|
221
234
|
const setChecked = descriptor.set;
|
|
222
|
-
const
|
|
223
|
-
|
|
235
|
+
const isUserInteraction = userInteractionCount !== prevUserInteractionCountRef.current;
|
|
236
|
+
prevUserInteractionCountRef.current = userInteractionCount;
|
|
237
|
+
const checkedChanged = prevCheckedRef.current !== checked;
|
|
238
|
+
prevCheckedRef.current = checked;
|
|
239
|
+
const bubbles = !(isUserInteraction && hasConsumerStoppedPropagationRef.current);
|
|
240
|
+
if (checkedChanged && setChecked) {
|
|
241
|
+
shouldStopClickPropagationRef.current = !isUserInteraction;
|
|
224
242
|
const event = new Event("click", { bubbles });
|
|
225
243
|
input.indeterminate = isIndeterminate(checked);
|
|
226
244
|
setChecked.call(input, isIndeterminate(checked) ? false : checked);
|
|
227
245
|
input.dispatchEvent(event);
|
|
246
|
+
shouldStopClickPropagationRef.current = false;
|
|
228
247
|
}
|
|
229
|
-
}, [bubbleInput,
|
|
248
|
+
}, [bubbleInput, checked, hasConsumerStoppedPropagationRef, userInteractionCount]);
|
|
230
249
|
const defaultCheckedRef = React.useRef(isIndeterminate(checked) ? false : checked);
|
|
231
250
|
return /* @__PURE__ */ jsx(
|
|
232
251
|
Primitive.input,
|
|
@@ -242,6 +261,11 @@ var CheckboxBubbleInput = React.forwardRef(
|
|
|
242
261
|
...props,
|
|
243
262
|
tabIndex: -1,
|
|
244
263
|
ref: composedRefs,
|
|
264
|
+
onClick: composeEventHandlers(onClick, (event) => {
|
|
265
|
+
if (shouldStopClickPropagationRef.current) {
|
|
266
|
+
event.stopPropagation();
|
|
267
|
+
}
|
|
268
|
+
}),
|
|
245
269
|
style: {
|
|
246
270
|
...props.style,
|
|
247
271
|
...controlSize,
|
|
@@ -256,18 +280,20 @@ var CheckboxBubbleInput = React.forwardRef(
|
|
|
256
280
|
}
|
|
257
281
|
}
|
|
258
282
|
);
|
|
259
|
-
}
|
|
283
|
+
}, "CheckboxBubbleInput")
|
|
260
284
|
);
|
|
261
|
-
CheckboxBubbleInput.displayName = BUBBLE_INPUT_NAME;
|
|
262
285
|
function isFunction(value) {
|
|
263
286
|
return typeof value === "function";
|
|
264
287
|
}
|
|
288
|
+
__name(isFunction, "isFunction");
|
|
265
289
|
function isIndeterminate(checked) {
|
|
266
290
|
return checked === "indeterminate";
|
|
267
291
|
}
|
|
292
|
+
__name(isIndeterminate, "isIndeterminate");
|
|
268
293
|
function getState(checked) {
|
|
269
294
|
return isIndeterminate(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
|
|
270
295
|
}
|
|
296
|
+
__name(getState, "getState");
|
|
271
297
|
export {
|
|
272
298
|
Checkbox,
|
|
273
299
|
CheckboxIndicator,
|
package/dist/index.mjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/checkbox.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { usePrevious } from '@radix-ui/react-use-previous';\nimport { useSize } from '@radix-ui/react-use-size';\nimport { Presence } from '@radix-ui/react-presence';\nimport { Primitive } from '@radix-ui/react-primitive';\n\nimport type { Scope } from '@radix-ui/react-context';\n\nconst CHECKBOX_NAME = 'Checkbox';\n\ntype ScopedProps<P> = P & { __scopeCheckbox?: Scope };\nconst [createCheckboxContext, createCheckboxScope] = createContextScope(CHECKBOX_NAME);\n\ntype CheckedState = boolean | 'indeterminate';\n\ntype CheckboxContextValue<State extends CheckedState | boolean = CheckedState> = {\n checked: State | boolean;\n setChecked: React.Dispatch<React.SetStateAction<State | boolean>>;\n disabled: boolean | undefined;\n control: HTMLButtonElement | null;\n setControl: React.Dispatch<React.SetStateAction<HTMLButtonElement | null>>;\n name: string | undefined;\n form: string | undefined;\n value: string | number | readonly string[];\n hasConsumerStoppedPropagationRef: React.RefObject<boolean>;\n required: boolean | undefined;\n defaultChecked: boolean | undefined;\n isFormControl: boolean;\n bubbleInput: HTMLInputElement | null;\n setBubbleInput: React.Dispatch<React.SetStateAction<HTMLInputElement | null>>;\n};\n\nconst [CheckboxProviderImpl, useCheckboxContext] =\n createCheckboxContext<CheckboxContextValue>(CHECKBOX_NAME);\n\n/* -------------------------------------------------------------------------------------------------\n * CheckboxProvider\n * -----------------------------------------------------------------------------------------------*/\n\ninterface CheckboxProviderProps<State extends CheckedState = CheckedState> {\n checked?: State | boolean;\n defaultChecked?: State | boolean;\n required?: boolean;\n onCheckedChange?(checked: State | boolean): void;\n name?: string;\n form?: string;\n disabled?: boolean;\n value?: string | number | readonly string[];\n children?: React.ReactNode;\n}\n\nfunction CheckboxProvider<State extends CheckedState = CheckedState>(\n props: ScopedProps<CheckboxProviderProps<State>>,\n) {\n const {\n __scopeCheckbox,\n checked: checkedProp,\n children,\n defaultChecked,\n disabled,\n form,\n name,\n onCheckedChange,\n required,\n value = 'on',\n // @ts-expect-error\n internal_do_not_use_render,\n } = props;\n\n const [checked, setChecked] = useControllableState({\n prop: checkedProp,\n defaultProp: defaultChecked ?? false,\n onChange: onCheckedChange,\n caller: CHECKBOX_NAME,\n });\n const [control, setControl] = React.useState<HTMLButtonElement | null>(null);\n const [bubbleInput, setBubbleInput] = React.useState<HTMLInputElement | null>(null);\n const hasConsumerStoppedPropagationRef = React.useRef(false);\n const isFormControl = control\n ? !!form || !!control.closest('form')\n : // We set this to true by default so that events bubble to forms without JS (SSR)\n true;\n\n const context: CheckboxContextValue<State> = {\n checked: checked,\n disabled: disabled,\n setChecked: setChecked,\n control: control,\n setControl: setControl,\n name: name,\n form: form,\n value: value,\n hasConsumerStoppedPropagationRef: hasConsumerStoppedPropagationRef,\n required: required,\n defaultChecked: isIndeterminate(defaultChecked) ? false : defaultChecked,\n isFormControl: isFormControl,\n bubbleInput,\n setBubbleInput,\n };\n\n return (\n <CheckboxProviderImpl\n scope={__scopeCheckbox}\n {...(context as unknown as CheckboxContextValue<CheckedState>)}\n >\n {isFunction(internal_do_not_use_render) ? internal_do_not_use_render(context) : children}\n </CheckboxProviderImpl>\n );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * CheckboxTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'CheckboxTrigger';\n\ninterface CheckboxTriggerProps extends Omit<\n React.ComponentPropsWithoutRef<typeof Primitive.button>,\n keyof CheckboxProviderProps\n> {\n children?: React.ReactNode;\n}\n\nconst CheckboxTrigger = React.forwardRef<HTMLButtonElement, CheckboxTriggerProps>(\n (\n { __scopeCheckbox, onKeyDown, onClick, ...checkboxProps }: ScopedProps<CheckboxTriggerProps>,\n forwardedRef,\n ) => {\n const {\n control,\n value,\n disabled,\n checked,\n required,\n setControl,\n setChecked,\n hasConsumerStoppedPropagationRef,\n isFormControl,\n bubbleInput,\n } = useCheckboxContext(TRIGGER_NAME, __scopeCheckbox);\n const composedRefs = useComposedRefs(forwardedRef, setControl);\n\n const initialCheckedStateRef = React.useRef(checked);\n React.useEffect(() => {\n const form = control?.form;\n if (form) {\n const reset = () => setChecked(initialCheckedStateRef.current);\n form.addEventListener('reset', reset);\n return () => form.removeEventListener('reset', reset);\n }\n }, [control, setChecked]);\n\n return (\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(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(onClick, (event) => {\n setChecked((prevChecked) => (isIndeterminate(prevChecked) ? true : !prevChecked));\n if (bubbleInput && isFormControl) {\n hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();\n // if checkbox has a bubble input and is a form control, stop\n // propagation from the button so that we only propagate one click\n // event (from the input). We propagate changes from an input so\n // that native form validation works and form events reflect\n // checkbox updates.\n if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();\n }\n })}\n />\n );\n },\n);\n\nCheckboxTrigger.displayName = TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * Checkbox\n * -----------------------------------------------------------------------------------------------*/\n\ntype CheckboxElement = React.ComponentRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.button>;\ninterface CheckboxProps 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,\n defaultChecked,\n required,\n disabled,\n value,\n onCheckedChange,\n form,\n ...checkboxProps\n } = props;\n\n return (\n <CheckboxProvider\n __scopeCheckbox={__scopeCheckbox}\n checked={checked}\n defaultChecked={defaultChecked}\n disabled={disabled}\n required={required}\n onCheckedChange={onCheckedChange}\n name={name}\n form={form}\n value={value}\n // @ts-expect-error\n internal_do_not_use_render={({ isFormControl }: CheckboxContextValue) => (\n <>\n <CheckboxTrigger\n {...checkboxProps}\n ref={forwardedRef}\n // @ts-expect-error\n __scopeCheckbox={__scopeCheckbox}\n />\n {isFormControl && (\n <CheckboxBubbleInput\n // @ts-expect-error\n __scopeCheckbox={__scopeCheckbox}\n />\n )}\n </>\n )}\n />\n );\n },\n);\n\nCheckbox.displayName = CHECKBOX_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * CheckboxIndicator\n * -----------------------------------------------------------------------------------------------*/\n\nconst INDICATOR_NAME = 'CheckboxIndicator';\n\ntype CheckboxIndicatorElement = React.ComponentRef<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<CheckboxIndicatorElement, CheckboxIndicatorProps>(\n (props: ScopedProps<CheckboxIndicatorProps>, forwardedRef) => {\n const { __scopeCheckbox, forceMount, ...indicatorProps } = props;\n const context = useCheckboxContext(INDICATOR_NAME, __scopeCheckbox);\n return (\n <Presence\n present={forceMount || isIndeterminate(context.checked) || context.checked === true}\n >\n <Primitive.span\n data-state={getState(context.checked)}\n data-disabled={context.disabled ? '' : undefined}\n {...indicatorProps}\n ref={forwardedRef}\n style={{ pointerEvents: 'none', ...props.style }}\n />\n </Presence>\n );\n },\n);\n\nCheckboxIndicator.displayName = INDICATOR_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * CheckboxBubbleInput\n * -----------------------------------------------------------------------------------------------*/\n\nconst BUBBLE_INPUT_NAME = 'CheckboxBubbleInput';\n\ntype InputProps = React.ComponentPropsWithoutRef<typeof Primitive.input>;\ninterface CheckboxBubbleInputProps extends Omit<InputProps, 'checked'> {}\n\nconst CheckboxBubbleInput = React.forwardRef<HTMLInputElement, CheckboxBubbleInputProps>(\n ({ __scopeCheckbox, ...props }: ScopedProps<CheckboxBubbleInputProps>, forwardedRef) => {\n const {\n control,\n hasConsumerStoppedPropagationRef,\n checked,\n defaultChecked,\n required,\n disabled,\n name,\n value,\n form,\n bubbleInput,\n setBubbleInput,\n } = useCheckboxContext(BUBBLE_INPUT_NAME, __scopeCheckbox);\n\n const composedRefs = useComposedRefs(forwardedRef, setBubbleInput);\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 = bubbleInput;\n if (!input) return;\n\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 const bubbles = !hasConsumerStoppedPropagationRef.current;\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 }, [bubbleInput, prevChecked, checked, hasConsumerStoppedPropagationRef]);\n\n const defaultCheckedRef = React.useRef(isIndeterminate(checked) ? false : checked);\n return (\n <Primitive.input\n type=\"checkbox\"\n aria-hidden\n defaultChecked={defaultChecked ?? defaultCheckedRef.current}\n required={required}\n disabled={disabled}\n name={name}\n value={value}\n form={form}\n {...props}\n tabIndex={-1}\n ref={composedRefs}\n style={{\n ...props.style,\n ...controlSize,\n position: 'absolute',\n pointerEvents: 'none',\n opacity: 0,\n margin: 0,\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 transform: 'translateX(-100%)',\n }}\n />\n );\n },\n);\n\nCheckboxBubbleInput.displayName = BUBBLE_INPUT_NAME;\n\n/* ---------------------------------------------------------------------------------------------- */\n\nfunction isFunction(value: unknown): value is (...args: any[]) => any {\n return typeof value === 'function';\n}\n\nfunction isIndeterminate(checked?: CheckedState): checked is 'indeterminate' {\n return checked === 'indeterminate';\n}\n\nfunction getState(checked: CheckedState) {\n return isIndeterminate(checked) ? 'indeterminate' : checked ? 'checked' : 'unchecked';\n}\n\nexport {\n createCheckboxScope,\n //\n Checkbox,\n CheckboxProvider,\n CheckboxTrigger,\n CheckboxIndicator,\n CheckboxBubbleInput,\n //\n Checkbox as Root,\n CheckboxProvider as Provider,\n CheckboxTrigger as Trigger,\n CheckboxIndicator as Indicator,\n CheckboxBubbleInput as BubbleInput,\n};\nexport type {\n CheckboxProps,\n CheckboxProviderProps,\n CheckboxTriggerProps,\n CheckboxIndicatorProps,\n CheckboxBubbleInputProps,\n CheckedState,\n};\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": []
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { useSize } from '@radix-ui/react-use-size';\nimport { Presence } from '@radix-ui/react-presence';\nimport { Primitive } from '@radix-ui/react-primitive';\n\nimport type { Scope } from '@radix-ui/react-context';\n\nconst CHECKBOX_NAME = 'Checkbox';\n\ntype ScopedProps<P> = P & { __scopeCheckbox?: Scope };\nconst [createCheckboxContext, createCheckboxScope] = createContextScope(CHECKBOX_NAME);\n\ntype CheckedState = boolean | 'indeterminate';\n\ntype CheckboxContextValue<State extends CheckedState | boolean = CheckedState> = {\n checked: State | boolean;\n setChecked: React.Dispatch<React.SetStateAction<State | boolean>>;\n disabled: boolean | undefined;\n control: HTMLButtonElement | null;\n setControl: React.Dispatch<React.SetStateAction<HTMLButtonElement | null>>;\n name: string | undefined;\n form: string | undefined;\n value: string | number | readonly string[];\n hasConsumerStoppedPropagationRef: React.RefObject<boolean>;\n userInteractionCount: number;\n onUserInteraction: () => void;\n required: boolean | undefined;\n defaultChecked: boolean | undefined;\n isFormControl: boolean;\n bubbleInput: HTMLInputElement | null;\n setBubbleInput: React.Dispatch<React.SetStateAction<HTMLInputElement | null>>;\n};\n\nconst [CheckboxProviderImpl, useCheckboxContext] =\n createCheckboxContext<CheckboxContextValue>(CHECKBOX_NAME);\n\n/* -------------------------------------------------------------------------------------------------\n * CheckboxProvider\n * -----------------------------------------------------------------------------------------------*/\n\ninterface CheckboxProviderProps<State extends CheckedState = CheckedState> {\n checked?: State | boolean;\n defaultChecked?: State | boolean;\n required?: boolean;\n onCheckedChange?(checked: State | boolean): void;\n name?: string;\n form?: string;\n disabled?: boolean;\n value?: string | number | readonly string[];\n children?: React.ReactNode;\n}\n\nfunction CheckboxProvider<State extends CheckedState = CheckedState>(\n props: ScopedProps<CheckboxProviderProps<State>>,\n) {\n const {\n __scopeCheckbox,\n checked: checkedProp,\n children,\n defaultChecked,\n disabled,\n form,\n name,\n onCheckedChange,\n required,\n value = 'on',\n // @ts-expect-error\n internal_do_not_use_render,\n } = props;\n\n const [checked, setChecked] = useControllableState({\n prop: checkedProp,\n defaultProp: defaultChecked ?? false,\n onChange: onCheckedChange,\n caller: CHECKBOX_NAME,\n });\n const [control, setControl] = React.useState<HTMLButtonElement | null>(null);\n const [bubbleInput, setBubbleInput] = React.useState<HTMLInputElement | null>(null);\n const hasConsumerStoppedPropagationRef = React.useRef(false);\n\n // Incremented on every user interaction with the trigger. The bubble input\n // compares this against the value it last handled to tell whether a `checked`\n // change was driven by the user (vs. a controlled/programmatic update). Using\n // a counter guarantees the marker is updated in the same commit as the\n // resulting render, so it can never go stale and leak into a later\n // programmatic update.\n const [userInteractionCount, onUserInteraction] = React.useReducer(\n (count: number): number => count + 1,\n 0,\n );\n const isFormControl = control\n ? !!form || !!control.closest('form')\n : // We set this to true by default so that events bubble to forms without JS (SSR)\n true;\n\n const context: CheckboxContextValue<State> = {\n checked: checked,\n disabled: disabled,\n setChecked: setChecked,\n control: control,\n setControl: setControl,\n name: name,\n form: form,\n value: value,\n hasConsumerStoppedPropagationRef: hasConsumerStoppedPropagationRef,\n userInteractionCount: userInteractionCount,\n onUserInteraction: onUserInteraction,\n required: required,\n defaultChecked: isIndeterminate(defaultChecked) ? false : defaultChecked,\n isFormControl: isFormControl,\n bubbleInput,\n setBubbleInput,\n };\n\n return (\n <CheckboxProviderImpl\n scope={__scopeCheckbox}\n {...(context as unknown as CheckboxContextValue<CheckedState>)}\n >\n {isFunction(internal_do_not_use_render) ? internal_do_not_use_render(context) : children}\n </CheckboxProviderImpl>\n );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * CheckboxTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'CheckboxTrigger';\n\ninterface CheckboxTriggerProps extends Omit<\n React.ComponentPropsWithoutRef<typeof Primitive.button>,\n keyof CheckboxProviderProps\n> {\n children?: React.ReactNode;\n}\n\nconst CheckboxTrigger = /* @__PURE__ */ React.forwardRef<HTMLButtonElement, CheckboxTriggerProps>(\n function CheckboxTrigger(\n { __scopeCheckbox, onKeyDown, onClick, ...checkboxProps }: ScopedProps<CheckboxTriggerProps>,\n forwardedRef,\n ) {\n const {\n control,\n value,\n disabled,\n checked,\n required,\n setControl,\n setChecked,\n hasConsumerStoppedPropagationRef,\n onUserInteraction,\n isFormControl,\n bubbleInput,\n } = useCheckboxContext(TRIGGER_NAME, __scopeCheckbox);\n const composedRefs = useComposedRefs(forwardedRef, setControl);\n\n const initialCheckedStateRef = React.useRef(checked);\n React.useEffect(() => {\n const form = control?.form;\n if (form) {\n const reset = () => setChecked(initialCheckedStateRef.current);\n form.addEventListener('reset', reset);\n return () => form.removeEventListener('reset', reset);\n }\n }, [control, setChecked]);\n\n return (\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(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(onClick, (event) => {\n onUserInteraction();\n setChecked((prevChecked) => (isIndeterminate(prevChecked) ? true : !prevChecked));\n if (bubbleInput && isFormControl) {\n hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();\n // if checkbox has a bubble input and is a form control, stop\n // propagation from the button so that we only propagate one click\n // event (from the input). We propagate changes from an input so\n // that native form validation works and form events reflect\n // checkbox updates.\n if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();\n }\n })}\n />\n );\n },\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Checkbox\n * -----------------------------------------------------------------------------------------------*/\n\ntype CheckboxElement = React.ComponentRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.button>;\ninterface CheckboxProps extends Omit<PrimitiveButtonProps, 'checked' | 'defaultChecked'> {\n checked?: CheckedState;\n defaultChecked?: CheckedState;\n required?: boolean;\n onCheckedChange?(checked: CheckedState): void;\n}\n\nconst Checkbox = /* @__PURE__ */ React.forwardRef<CheckboxElement, CheckboxProps>(\n // blank line to reduce diff noise\n function Checkbox(props: ScopedProps<CheckboxProps>, forwardedRef) {\n const {\n __scopeCheckbox,\n name,\n checked,\n defaultChecked,\n required,\n disabled,\n value,\n onCheckedChange,\n form,\n ...checkboxProps\n } = props;\n\n return (\n <CheckboxProvider\n __scopeCheckbox={__scopeCheckbox}\n checked={checked}\n defaultChecked={defaultChecked}\n disabled={disabled}\n required={required}\n onCheckedChange={onCheckedChange}\n name={name}\n form={form}\n value={value}\n // @ts-expect-error\n internal_do_not_use_render={({ isFormControl }: CheckboxContextValue) => (\n <>\n <CheckboxTrigger\n {...checkboxProps}\n ref={forwardedRef}\n // @ts-expect-error\n __scopeCheckbox={__scopeCheckbox}\n />\n {isFormControl && (\n <CheckboxBubbleInput\n // @ts-expect-error\n __scopeCheckbox={__scopeCheckbox}\n />\n )}\n </>\n )}\n />\n );\n },\n);\n\n/* -------------------------------------------------------------------------------------------------\n * CheckboxIndicator\n * -----------------------------------------------------------------------------------------------*/\n\nconst INDICATOR_NAME = 'CheckboxIndicator';\n\ntype CheckboxIndicatorElement = React.ComponentRef<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 = /* @__PURE__ */ React.forwardRef<\n CheckboxIndicatorElement,\n CheckboxIndicatorProps\n>(\n // blank line to reduce diff noise\n function CheckboxIndicator(props: ScopedProps<CheckboxIndicatorProps>, forwardedRef) {\n const { __scopeCheckbox, forceMount, ...indicatorProps } = props;\n const context = useCheckboxContext(INDICATOR_NAME, __scopeCheckbox);\n return (\n <Presence\n present={forceMount || isIndeterminate(context.checked) || context.checked === true}\n >\n <Primitive.span\n data-state={getState(context.checked)}\n data-disabled={context.disabled ? '' : undefined}\n {...indicatorProps}\n ref={forwardedRef}\n style={{ pointerEvents: 'none', ...props.style }}\n />\n </Presence>\n );\n },\n);\n\n/* -------------------------------------------------------------------------------------------------\n * CheckboxBubbleInput\n * -----------------------------------------------------------------------------------------------*/\n\nconst BUBBLE_INPUT_NAME = 'CheckboxBubbleInput';\n\ntype InputProps = React.ComponentPropsWithoutRef<typeof Primitive.input>;\ninterface CheckboxBubbleInputProps extends Omit<InputProps, 'checked'> {}\n\nconst CheckboxBubbleInput = /* @__PURE__ */ React.forwardRef<\n HTMLInputElement,\n CheckboxBubbleInputProps\n>(\n // blank line to reduce diff noise\n function CheckboxBubbleInput(\n { __scopeCheckbox, onClick, ...props }: ScopedProps<CheckboxBubbleInputProps>,\n forwardedRef,\n ) {\n const {\n control,\n hasConsumerStoppedPropagationRef,\n userInteractionCount,\n checked,\n defaultChecked,\n required,\n disabled,\n name,\n value,\n form,\n bubbleInput,\n setBubbleInput,\n } = useCheckboxContext(BUBBLE_INPUT_NAME, __scopeCheckbox);\n\n const composedRefs = useComposedRefs(forwardedRef, setBubbleInput);\n const controlSize = useSize(control);\n // When the checked change is not driven by a user interaction (e.g. a\n // controlled `checked` update), the `click` event we dispatch to notify\n // forms must not reach ancestor `onClick` handlers. We can't simply make it\n // non-bubbling because React derives the checkbox's `change` event from a\n // bubbling `click`. Instead we stop propagation of the synthetic click,\n // which still lets the `change` event reach the form.\n const shouldStopClickPropagationRef = React.useRef(false);\n // The `checked` value we last synced to the input, and the interaction\n // counter we last accounted for. Comparing against these lets us detect a\n // genuine `checked` change and whether it followed a user interaction, even\n // on renders caused by clicks that don't change `checked` (e.g. a\n // controlled value that ignores the change).\n const prevCheckedRef = React.useRef(checked);\n const prevUserInteractionCountRef = React.useRef(userInteractionCount);\n\n // Bubble checked change to parents (e.g form change event)\n React.useEffect(() => {\n const input = bubbleInput;\n if (!input) return;\n\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 const isUserInteraction = userInteractionCount !== prevUserInteractionCountRef.current;\n prevUserInteractionCountRef.current = userInteractionCount;\n const checkedChanged = prevCheckedRef.current !== checked;\n prevCheckedRef.current = checked;\n\n const bubbles = !(isUserInteraction && hasConsumerStoppedPropagationRef.current);\n if (checkedChanged && setChecked) {\n shouldStopClickPropagationRef.current = !isUserInteraction;\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 shouldStopClickPropagationRef.current = false;\n }\n }, [bubbleInput, checked, hasConsumerStoppedPropagationRef, userInteractionCount]);\n\n const defaultCheckedRef = React.useRef(isIndeterminate(checked) ? false : checked);\n return (\n <Primitive.input\n type=\"checkbox\"\n aria-hidden\n defaultChecked={defaultChecked ?? defaultCheckedRef.current}\n required={required}\n disabled={disabled}\n name={name}\n value={value}\n form={form}\n {...props}\n tabIndex={-1}\n ref={composedRefs}\n onClick={composeEventHandlers(onClick, (event) => {\n // Prevent the synthetic click dispatched on controlled/programmatic\n // updates from triggering ancestor `onClick` handlers, while still\n // allowing the resulting `change` event to reach the form.\n if (shouldStopClickPropagationRef.current) {\n event.stopPropagation();\n }\n })}\n style={{\n ...props.style,\n ...controlSize,\n position: 'absolute',\n pointerEvents: 'none',\n opacity: 0,\n margin: 0,\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 transform: 'translateX(-100%)',\n }}\n />\n );\n },\n);\n\n/* ---------------------------------------------------------------------------------------------- */\n\nfunction isFunction(value: unknown): value is (...args: any[]) => any {\n return typeof value === 'function';\n}\n\nfunction isIndeterminate(checked?: CheckedState): checked is 'indeterminate' {\n return checked === 'indeterminate';\n}\n\nfunction getState(checked: CheckedState) {\n return isIndeterminate(checked) ? 'indeterminate' : checked ? 'checked' : 'unchecked';\n}\n\nexport {\n createCheckboxScope,\n //\n Checkbox,\n CheckboxProvider,\n CheckboxTrigger,\n CheckboxIndicator,\n CheckboxBubbleInput,\n //\n Checkbox as Root,\n CheckboxProvider as Provider,\n CheckboxTrigger as Trigger,\n CheckboxIndicator as Indicator,\n CheckboxBubbleInput as BubbleInput,\n};\nexport type {\n CheckboxProps,\n CheckboxProviderProps,\n CheckboxTriggerProps,\n CheckboxIndicatorProps,\n CheckboxBubbleInputProps,\n CheckedState,\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["CheckboxTrigger", "Checkbox", "CheckboxIndicator", "CheckboxBubbleInput"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@radix-ui/react-checkbox",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.8-rc.1784059564143",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"source": "./src/index.ts",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -12,12 +12,11 @@
|
|
|
12
12
|
"sideEffects": false,
|
|
13
13
|
"dependencies": {
|
|
14
14
|
"@radix-ui/primitive": "1.1.5",
|
|
15
|
-
"@radix-ui/react-compose-refs": "1.1.3",
|
|
16
15
|
"@radix-ui/react-context": "1.2.0",
|
|
17
|
-
"@radix-ui/react-presence": "1.1.
|
|
16
|
+
"@radix-ui/react-presence": "1.1.8-rc.1784059564143",
|
|
18
17
|
"@radix-ui/react-primitive": "2.1.7",
|
|
18
|
+
"@radix-ui/react-compose-refs": "1.1.3",
|
|
19
19
|
"@radix-ui/react-use-controllable-state": "1.2.3",
|
|
20
|
-
"@radix-ui/react-use-previous": "1.1.2",
|
|
21
20
|
"@radix-ui/react-use-size": "1.1.2"
|
|
22
21
|
},
|
|
23
22
|
"devDependencies": {
|