@radix-ui/react-checkbox 1.1.6-rc.1744259191780 → 1.2.0-rc.1744311029001
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 +53 -38
- package/dist/index.js.map +2 -2
- package/dist/index.mjs +53 -38
- package/dist/index.mjs.map +2 -2
- package/package.json +7 -7
package/dist/index.js
CHANGED
|
@@ -113,7 +113,7 @@ var Checkbox = React.forwardRef(
|
|
|
113
113
|
}
|
|
114
114
|
),
|
|
115
115
|
isFormControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
116
|
-
|
|
116
|
+
CheckboxBubbleInput,
|
|
117
117
|
{
|
|
118
118
|
control: button,
|
|
119
119
|
bubbles: !hasConsumerStoppedPropagationRef.current,
|
|
@@ -149,44 +149,59 @@ var CheckboxIndicator = React.forwardRef(
|
|
|
149
149
|
}
|
|
150
150
|
);
|
|
151
151
|
CheckboxIndicator.displayName = INDICATOR_NAME;
|
|
152
|
-
var
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
...props.style,
|
|
181
|
-
...controlSize,
|
|
182
|
-
position: "absolute",
|
|
183
|
-
pointerEvents: "none",
|
|
184
|
-
opacity: 0,
|
|
185
|
-
margin: 0
|
|
152
|
+
var BUBBLE_INPUT_NAME = "CheckboxBubbleInput";
|
|
153
|
+
var CheckboxBubbleInput = React.forwardRef(
|
|
154
|
+
({
|
|
155
|
+
__scopeCheckbox,
|
|
156
|
+
control,
|
|
157
|
+
checked,
|
|
158
|
+
bubbles = true,
|
|
159
|
+
defaultChecked,
|
|
160
|
+
...props
|
|
161
|
+
}, forwardedRef) => {
|
|
162
|
+
const ref = React.useRef(null);
|
|
163
|
+
const composedRefs = (0, import_react_compose_refs.useComposedRefs)(ref, forwardedRef);
|
|
164
|
+
const prevChecked = (0, import_react_use_previous.usePrevious)(checked);
|
|
165
|
+
const controlSize = (0, import_react_use_size.useSize)(control);
|
|
166
|
+
React.useEffect(() => {
|
|
167
|
+
const input = ref.current;
|
|
168
|
+
if (!input) return;
|
|
169
|
+
const inputProto = window.HTMLInputElement.prototype;
|
|
170
|
+
const descriptor = Object.getOwnPropertyDescriptor(
|
|
171
|
+
inputProto,
|
|
172
|
+
"checked"
|
|
173
|
+
);
|
|
174
|
+
const setChecked = descriptor.set;
|
|
175
|
+
if (prevChecked !== checked && setChecked) {
|
|
176
|
+
const event = new Event("click", { bubbles });
|
|
177
|
+
input.indeterminate = isIndeterminate(checked);
|
|
178
|
+
setChecked.call(input, isIndeterminate(checked) ? false : checked);
|
|
179
|
+
input.dispatchEvent(event);
|
|
186
180
|
}
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
|
|
181
|
+
}, [prevChecked, checked, bubbles]);
|
|
182
|
+
const defaultCheckedRef = React.useRef(isIndeterminate(checked) ? false : checked);
|
|
183
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
184
|
+
import_react_primitive.Primitive.input,
|
|
185
|
+
{
|
|
186
|
+
type: "checkbox",
|
|
187
|
+
"aria-hidden": true,
|
|
188
|
+
defaultChecked: defaultChecked ?? defaultCheckedRef.current,
|
|
189
|
+
...props,
|
|
190
|
+
tabIndex: -1,
|
|
191
|
+
ref: composedRefs,
|
|
192
|
+
style: {
|
|
193
|
+
...props.style,
|
|
194
|
+
...controlSize,
|
|
195
|
+
position: "absolute",
|
|
196
|
+
pointerEvents: "none",
|
|
197
|
+
opacity: 0,
|
|
198
|
+
margin: 0
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
);
|
|
202
|
+
}
|
|
203
|
+
);
|
|
204
|
+
CheckboxBubbleInput.displayName = BUBBLE_INPUT_NAME;
|
|
190
205
|
function isIndeterminate(checked) {
|
|
191
206
|
return checked === "indeterminate";
|
|
192
207
|
}
|
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 CheckboxIndicator,\n //\n Root,\n Indicator,\n} from './checkbox';\nexport type { CheckboxProps, CheckboxIndicatorProps, CheckedState } 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\n/* -------------------------------------------------------------------------------------------------\n * Checkbox\n * -----------------------------------------------------------------------------------------------*/\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 = {\n state: CheckedState;\n disabled?: boolean;\n};\n\nconst [CheckboxProvider, useCheckboxContext] =\n createCheckboxContext<CheckboxContextValue>(CHECKBOX_NAME);\n\ntype CheckboxElement = React.ElementRef<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: 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) => setButton(node));\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 ? form || !!button.closest('form') : true;\n const [checked, setChecked] = useControllableState({\n prop: checkedProp,\n defaultProp: defaultChecked ?? false,\n onChange: onCheckedChange,\n caller: CHECKBOX_NAME,\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 <
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["'use client';\nexport {\n createCheckboxScope,\n //\n Checkbox,\n CheckboxIndicator,\n //\n Root,\n Indicator,\n} from './checkbox';\nexport type { CheckboxProps, CheckboxIndicatorProps, CheckedState } 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\n/* -------------------------------------------------------------------------------------------------\n * Checkbox\n * -----------------------------------------------------------------------------------------------*/\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 = {\n state: CheckedState;\n disabled?: boolean;\n};\n\nconst [CheckboxProvider, useCheckboxContext] =\n createCheckboxContext<CheckboxContextValue>(CHECKBOX_NAME);\n\ntype CheckboxElement = React.ElementRef<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: 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) => setButton(node));\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 ? form || !!button.closest('form') : true;\n const [checked, setChecked] = useControllableState({\n prop: checkedProp,\n defaultProp: defaultChecked ?? false,\n onChange: onCheckedChange,\n caller: CHECKBOX_NAME,\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 <CheckboxBubbleInput\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 * CheckboxIndicator\n * -----------------------------------------------------------------------------------------------*/\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<CheckboxIndicatorElement, 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);\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 checked: CheckedState;\n control: HTMLElement | null;\n bubbles: boolean;\n}\n\nconst CheckboxBubbleInput = React.forwardRef<HTMLInputElement, CheckboxBubbleInputProps>(\n (\n {\n __scopeCheckbox,\n control,\n checked,\n bubbles = true,\n defaultChecked,\n ...props\n }: ScopedProps<CheckboxBubbleInputProps>,\n forwardedRef\n ) => {\n const ref = React.useRef<HTMLInputElement>(null);\n const composedRefs = useComposedRefs(ref, forwardedRef);\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 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 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 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 {...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 }}\n />\n );\n }\n);\n\nCheckboxBubbleInput.displayName = BUBBLE_INPUT_NAME;\n\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\nconst Root = Checkbox;\nconst Indicator = CheckboxIndicator;\n\nexport {\n createCheckboxScope,\n //\n Checkbox,\n CheckboxIndicator,\n //\n Root,\n Indicator,\n};\nexport type { CheckboxProps, CheckboxIndicatorProps, CheckedState };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["form"]
|
|
7
7
|
}
|
package/dist/index.mjs
CHANGED
|
@@ -74,7 +74,7 @@ var Checkbox = React.forwardRef(
|
|
|
74
74
|
}
|
|
75
75
|
),
|
|
76
76
|
isFormControl && /* @__PURE__ */ jsx(
|
|
77
|
-
|
|
77
|
+
CheckboxBubbleInput,
|
|
78
78
|
{
|
|
79
79
|
control: button,
|
|
80
80
|
bubbles: !hasConsumerStoppedPropagationRef.current,
|
|
@@ -110,44 +110,59 @@ var CheckboxIndicator = React.forwardRef(
|
|
|
110
110
|
}
|
|
111
111
|
);
|
|
112
112
|
CheckboxIndicator.displayName = INDICATOR_NAME;
|
|
113
|
-
var
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
...props.style,
|
|
142
|
-
...controlSize,
|
|
143
|
-
position: "absolute",
|
|
144
|
-
pointerEvents: "none",
|
|
145
|
-
opacity: 0,
|
|
146
|
-
margin: 0
|
|
113
|
+
var BUBBLE_INPUT_NAME = "CheckboxBubbleInput";
|
|
114
|
+
var CheckboxBubbleInput = React.forwardRef(
|
|
115
|
+
({
|
|
116
|
+
__scopeCheckbox,
|
|
117
|
+
control,
|
|
118
|
+
checked,
|
|
119
|
+
bubbles = true,
|
|
120
|
+
defaultChecked,
|
|
121
|
+
...props
|
|
122
|
+
}, forwardedRef) => {
|
|
123
|
+
const ref = React.useRef(null);
|
|
124
|
+
const composedRefs = useComposedRefs(ref, forwardedRef);
|
|
125
|
+
const prevChecked = usePrevious(checked);
|
|
126
|
+
const controlSize = useSize(control);
|
|
127
|
+
React.useEffect(() => {
|
|
128
|
+
const input = ref.current;
|
|
129
|
+
if (!input) return;
|
|
130
|
+
const inputProto = window.HTMLInputElement.prototype;
|
|
131
|
+
const descriptor = Object.getOwnPropertyDescriptor(
|
|
132
|
+
inputProto,
|
|
133
|
+
"checked"
|
|
134
|
+
);
|
|
135
|
+
const setChecked = descriptor.set;
|
|
136
|
+
if (prevChecked !== checked && setChecked) {
|
|
137
|
+
const event = new Event("click", { bubbles });
|
|
138
|
+
input.indeterminate = isIndeterminate(checked);
|
|
139
|
+
setChecked.call(input, isIndeterminate(checked) ? false : checked);
|
|
140
|
+
input.dispatchEvent(event);
|
|
147
141
|
}
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
|
|
142
|
+
}, [prevChecked, checked, bubbles]);
|
|
143
|
+
const defaultCheckedRef = React.useRef(isIndeterminate(checked) ? false : checked);
|
|
144
|
+
return /* @__PURE__ */ jsx(
|
|
145
|
+
Primitive.input,
|
|
146
|
+
{
|
|
147
|
+
type: "checkbox",
|
|
148
|
+
"aria-hidden": true,
|
|
149
|
+
defaultChecked: defaultChecked ?? defaultCheckedRef.current,
|
|
150
|
+
...props,
|
|
151
|
+
tabIndex: -1,
|
|
152
|
+
ref: composedRefs,
|
|
153
|
+
style: {
|
|
154
|
+
...props.style,
|
|
155
|
+
...controlSize,
|
|
156
|
+
position: "absolute",
|
|
157
|
+
pointerEvents: "none",
|
|
158
|
+
opacity: 0,
|
|
159
|
+
margin: 0
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
);
|
|
163
|
+
}
|
|
164
|
+
);
|
|
165
|
+
CheckboxBubbleInput.displayName = BUBBLE_INPUT_NAME;
|
|
151
166
|
function isIndeterminate(checked) {
|
|
152
167
|
return checked === "indeterminate";
|
|
153
168
|
}
|
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\n/* -------------------------------------------------------------------------------------------------\n * Checkbox\n * -----------------------------------------------------------------------------------------------*/\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 = {\n state: CheckedState;\n disabled?: boolean;\n};\n\nconst [CheckboxProvider, useCheckboxContext] =\n createCheckboxContext<CheckboxContextValue>(CHECKBOX_NAME);\n\ntype CheckboxElement = React.ElementRef<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: 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) => setButton(node));\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 ? form || !!button.closest('form') : true;\n const [checked, setChecked] = useControllableState({\n prop: checkedProp,\n defaultProp: defaultChecked ?? false,\n onChange: onCheckedChange,\n caller: CHECKBOX_NAME,\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 <
|
|
5
|
-
"mappings": "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
|
|
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\n/* -------------------------------------------------------------------------------------------------\n * Checkbox\n * -----------------------------------------------------------------------------------------------*/\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 = {\n state: CheckedState;\n disabled?: boolean;\n};\n\nconst [CheckboxProvider, useCheckboxContext] =\n createCheckboxContext<CheckboxContextValue>(CHECKBOX_NAME);\n\ntype CheckboxElement = React.ElementRef<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: 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) => setButton(node));\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 ? form || !!button.closest('form') : true;\n const [checked, setChecked] = useControllableState({\n prop: checkedProp,\n defaultProp: defaultChecked ?? false,\n onChange: onCheckedChange,\n caller: CHECKBOX_NAME,\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 <CheckboxBubbleInput\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 * CheckboxIndicator\n * -----------------------------------------------------------------------------------------------*/\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<CheckboxIndicatorElement, 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);\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 checked: CheckedState;\n control: HTMLElement | null;\n bubbles: boolean;\n}\n\nconst CheckboxBubbleInput = React.forwardRef<HTMLInputElement, CheckboxBubbleInputProps>(\n (\n {\n __scopeCheckbox,\n control,\n checked,\n bubbles = true,\n defaultChecked,\n ...props\n }: ScopedProps<CheckboxBubbleInputProps>,\n forwardedRef\n ) => {\n const ref = React.useRef<HTMLInputElement>(null);\n const composedRefs = useComposedRefs(ref, forwardedRef);\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 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 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 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 {...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 }}\n />\n );\n }\n);\n\nCheckboxBubbleInput.displayName = BUBBLE_INPUT_NAME;\n\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\nconst Root = Checkbox;\nconst Indicator = CheckboxIndicator;\n\nexport {\n createCheckboxScope,\n //\n Checkbox,\n CheckboxIndicator,\n //\n Root,\n Indicator,\n};\nexport type { CheckboxProps, CheckboxIndicatorProps, CheckedState };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["form"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@radix-ui/react-checkbox",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2.0-rc.1744311029001",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"source": "./src/index.ts",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -11,12 +11,12 @@
|
|
|
11
11
|
],
|
|
12
12
|
"sideEffects": false,
|
|
13
13
|
"dependencies": {
|
|
14
|
-
"@radix-ui/react-context": "1.1.2",
|
|
15
|
-
"@radix-ui/react-compose-refs": "1.1.2",
|
|
16
14
|
"@radix-ui/primitive": "1.1.2",
|
|
15
|
+
"@radix-ui/react-context": "1.1.2",
|
|
17
16
|
"@radix-ui/react-presence": "1.1.3",
|
|
18
|
-
"@radix-ui/react-primitive": "2.0.
|
|
19
|
-
"@radix-ui/react-
|
|
17
|
+
"@radix-ui/react-primitive": "2.1.0-rc.1744311029001",
|
|
18
|
+
"@radix-ui/react-compose-refs": "1.1.2",
|
|
19
|
+
"@radix-ui/react-use-controllable-state": "1.2.0-rc.1744311029001",
|
|
20
20
|
"@radix-ui/react-use-previous": "1.1.1",
|
|
21
21
|
"@radix-ui/react-use-size": "1.1.1"
|
|
22
22
|
},
|
|
@@ -28,8 +28,8 @@
|
|
|
28
28
|
"react-dom": "^19.0.0",
|
|
29
29
|
"typescript": "^5.7.3",
|
|
30
30
|
"@repo/builder": "0.0.0",
|
|
31
|
-
"@repo/
|
|
32
|
-
"@repo/
|
|
31
|
+
"@repo/typescript-config": "0.0.0",
|
|
32
|
+
"@repo/eslint-config": "0.0.0"
|
|
33
33
|
},
|
|
34
34
|
"peerDependencies": {
|
|
35
35
|
"@types/react": "*",
|