@radix-ui/react-checkbox 1.1.2-rc.1 → 1.1.2-rc.10
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 +5 -3
- package/dist/index.js.map +2 -2
- package/dist/index.mjs +5 -3
- package/dist/index.mjs.map +2 -2
- package/package.json +3 -3
package/dist/index.js
CHANGED
|
@@ -120,7 +120,8 @@ var Checkbox = React.forwardRef(
|
|
|
120
120
|
checked,
|
|
121
121
|
required,
|
|
122
122
|
disabled,
|
|
123
|
-
style: { transform: "translateX(-100%)" }
|
|
123
|
+
style: { transform: "translateX(-100%)" },
|
|
124
|
+
defaultChecked: isIndeterminate(defaultChecked) ? false : defaultChecked
|
|
124
125
|
}
|
|
125
126
|
)
|
|
126
127
|
] });
|
|
@@ -146,7 +147,7 @@ var CheckboxIndicator = React.forwardRef(
|
|
|
146
147
|
);
|
|
147
148
|
CheckboxIndicator.displayName = INDICATOR_NAME;
|
|
148
149
|
var BubbleInput = (props) => {
|
|
149
|
-
const { control, checked, bubbles = true, ...inputProps } = props;
|
|
150
|
+
const { control, checked, bubbles = true, defaultChecked, ...inputProps } = props;
|
|
150
151
|
const ref = React.useRef(null);
|
|
151
152
|
const prevChecked = (0, import_react_use_previous.usePrevious)(checked);
|
|
152
153
|
const controlSize = (0, import_react_use_size.useSize)(control);
|
|
@@ -162,12 +163,13 @@ var BubbleInput = (props) => {
|
|
|
162
163
|
input.dispatchEvent(event);
|
|
163
164
|
}
|
|
164
165
|
}, [prevChecked, checked, bubbles]);
|
|
166
|
+
const defaultCheckedRef = React.useRef(isIndeterminate(checked) ? false : checked);
|
|
165
167
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
166
168
|
"input",
|
|
167
169
|
{
|
|
168
170
|
type: "checkbox",
|
|
169
171
|
"aria-hidden": true,
|
|
170
|
-
defaultChecked:
|
|
172
|
+
defaultChecked: defaultChecked ?? defaultCheckedRef.current,
|
|
171
173
|
...inputProps,
|
|
172
174
|
tabIndex: -1,
|
|
173
175
|
ref,
|
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 ...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 ? Boolean(button.closest('form')) : true;\n const [checked = false, setChecked] = useControllableState({\n prop: checkedProp,\n defaultProp: defaultChecked,\n onChange: onCheckedChange,\n });\n const initialCheckedStateRef = React.useRef(checked);\n React.useEffect(() => {\n const form = button?.form;\n if (form) {\n const reset = () => setChecked(initialCheckedStateRef.current);\n form.addEventListener('reset', reset);\n return () => form.removeEventListener('reset', reset);\n }\n }, [button, setChecked]);\n\n return (\n <CheckboxProvider scope={__scopeCheckbox} state={checked} disabled={disabled}>\n <Primitive.button\n type=\"button\"\n role=\"checkbox\"\n aria-checked={isIndeterminate(checked) ? 'mixed' : checked}\n aria-required={required}\n data-state={getState(checked)}\n data-disabled={disabled ? '' : undefined}\n disabled={disabled}\n value={value}\n {...checkboxProps}\n ref={composedRefs}\n onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n // According to WAI ARIA, Checkboxes don't activate on enter keypress\n if (event.key === 'Enter') event.preventDefault();\n })}\n onClick={composeEventHandlers(props.onClick, (event) => {\n setChecked((prevChecked) => (isIndeterminate(prevChecked) ? true : !prevChecked));\n if (isFormControl) {\n hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();\n // if checkbox is in a form, stop propagation from the button so that we only propagate\n // one click event (from the input). We propagate changes from an input so that native\n // form validation works and form events reflect checkbox updates.\n if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();\n }\n })}\n />\n {isFormControl && (\n <BubbleInput\n control={button}\n bubbles={!hasConsumerStoppedPropagationRef.current}\n name={name}\n value={value}\n checked={checked}\n required={required}\n disabled={disabled}\n // 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 />\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\ntype InputProps = React.ComponentPropsWithoutRef<'input'>;\ninterface BubbleInputProps extends Omit<InputProps, 'checked'> {\n checked: CheckedState;\n control: HTMLElement | null;\n bubbles: boolean;\n}\n\nconst BubbleInput = (props: BubbleInputProps) => {\n const { control, checked, bubbles = true, ...inputProps } = props;\n const ref = React.useRef<HTMLInputElement>(null);\n const prevChecked = usePrevious(checked);\n const controlSize = useSize(control);\n\n // Bubble checked change to parents (e.g form change event)\n React.useEffect(() => {\n const input = ref.current!;\n const inputProto = window.HTMLInputElement.prototype;\n const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'checked') as PropertyDescriptor;\n const setChecked = descriptor.set;\n\n if (prevChecked !== checked && setChecked) {\n const event = new Event('click', { bubbles });\n input.indeterminate = isIndeterminate(checked);\n setChecked.call(input, isIndeterminate(checked) ? false : checked);\n input.dispatchEvent(event);\n }\n }, [prevChecked, checked, bubbles]);\n\n return (\n <input\n type=\"checkbox\"\n aria-hidden\n defaultChecked={
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,gCAAgC;AAChC,2BAAmC;AACnC,uBAAqC;AACrC,0CAAqC;AACrC,gCAA4B;AAC5B,4BAAwB;AACxB,4BAAyB;AACzB,6BAA0B;AAkEpB;AA1DN,IAAM,gBAAgB;AAGtB,IAAM,CAAC,uBAAuB,mBAAmB,QAAI,yCAAmB,aAAa;AASrF,IAAM,CAAC,kBAAkB,kBAAkB,IACzC,sBAA4C,aAAa;AAW3D,IAAM,WAAiB;AAAA,EACrB,CAAC,OAAmC,iBAAiB;AACnD,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA,GAAG;AAAA,IACL,IAAI;AACJ,UAAM,CAAC,QAAQ,SAAS,IAAU,eAAmC,IAAI;AACzE,UAAM,mBAAe,2CAAgB,cAAc,CAAC,SAAS,UAAU,IAAI,CAAC;AAC5E,UAAM,mCAAyC,aAAO,KAAK;AAE3D,UAAM,gBAAgB,SAAS,QAAQ,OAAO,QAAQ,MAAM,CAAC,IAAI;AACjE,UAAM,CAAC,UAAU,OAAO,UAAU,QAAI,0DAAqB;AAAA,MACzD,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,IACZ,CAAC;AACD,UAAM,yBAA+B,aAAO,OAAO;AACnD,IAAM,gBAAU,MAAM;AACpB,YAAM,OAAO,QAAQ;AACrB,UAAI,MAAM;AACR,cAAM,QAAQ,MAAM,WAAW,uBAAuB,OAAO;AAC7D,aAAK,iBAAiB,SAAS,KAAK;AACpC,eAAO,MAAM,KAAK,oBAAoB,SAAS,KAAK;AAAA,MACtD;AAAA,IACF,GAAG,CAAC,QAAQ,UAAU,CAAC;AAEvB,WACE,6CAAC,oBAAiB,OAAO,iBAAiB,OAAO,SAAS,UACxD;AAAA;AAAA,QAAC,iCAAU;AAAA,QAAV;AAAA,UACC,MAAK;AAAA,UACL,MAAK;AAAA,UACL,gBAAc,gBAAgB,OAAO,IAAI,UAAU;AAAA,UACnD,iBAAe;AAAA,UACf,cAAY,SAAS,OAAO;AAAA,UAC5B,iBAAe,WAAW,KAAK;AAAA,UAC/B;AAAA,UACA;AAAA,UACC,GAAG;AAAA,UACJ,KAAK;AAAA,UACL,eAAW,uCAAqB,MAAM,WAAW,CAAC,UAAU;AAE1D,gBAAI,MAAM,QAAQ,QAAS,OAAM,eAAe;AAAA,UAClD,CAAC;AAAA,UACD,aAAS,uCAAqB,MAAM,SAAS,CAAC,UAAU;AACtD,uBAAW,CAAC,gBAAiB,gBAAgB,WAAW,IAAI,OAAO,CAAC,WAAY;AAChF,gBAAI,eAAe;AACjB,+CAAiC,UAAU,MAAM,qBAAqB;AAItE,kBAAI,CAAC,iCAAiC,QAAS,OAAM,gBAAgB;AAAA,YACvE;AAAA,UACF,CAAC;AAAA;AAAA,MACH;AAAA,MACC,iBACC;AAAA,QAAC;AAAA;AAAA,UACC,SAAS;AAAA,UACT,SAAS,CAAC,iCAAiC;AAAA,UAC3C;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UAIA,OAAO,EAAE,WAAW,oBAAoB;AAAA;AAAA,
|
|
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 ...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 ? Boolean(button.closest('form')) : true;\n const [checked = false, setChecked] = useControllableState({\n prop: checkedProp,\n defaultProp: defaultChecked,\n onChange: onCheckedChange,\n });\n const initialCheckedStateRef = React.useRef(checked);\n React.useEffect(() => {\n const form = button?.form;\n if (form) {\n const reset = () => setChecked(initialCheckedStateRef.current);\n form.addEventListener('reset', reset);\n return () => form.removeEventListener('reset', reset);\n }\n }, [button, setChecked]);\n\n return (\n <CheckboxProvider scope={__scopeCheckbox} state={checked} disabled={disabled}>\n <Primitive.button\n type=\"button\"\n role=\"checkbox\"\n aria-checked={isIndeterminate(checked) ? 'mixed' : checked}\n aria-required={required}\n data-state={getState(checked)}\n data-disabled={disabled ? '' : undefined}\n disabled={disabled}\n value={value}\n {...checkboxProps}\n ref={composedRefs}\n onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n // According to WAI ARIA, Checkboxes don't activate on enter keypress\n if (event.key === 'Enter') event.preventDefault();\n })}\n onClick={composeEventHandlers(props.onClick, (event) => {\n setChecked((prevChecked) => (isIndeterminate(prevChecked) ? true : !prevChecked));\n if (isFormControl) {\n hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();\n // if checkbox is in a form, stop propagation from the button so that we only propagate\n // one click event (from the input). We propagate changes from an input so that native\n // form validation works and form events reflect checkbox updates.\n if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();\n }\n })}\n />\n {isFormControl && (\n <BubbleInput\n control={button}\n bubbles={!hasConsumerStoppedPropagationRef.current}\n name={name}\n value={value}\n checked={checked}\n required={required}\n disabled={disabled}\n // 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\ntype InputProps = React.ComponentPropsWithoutRef<'input'>;\ninterface BubbleInputProps extends Omit<InputProps, 'checked'> {\n checked: CheckedState;\n control: HTMLElement | null;\n bubbles: boolean;\n}\n\nconst BubbleInput = (props: BubbleInputProps) => {\n const { control, checked, bubbles = true, defaultChecked, ...inputProps } = props;\n const ref = React.useRef<HTMLInputElement>(null);\n const prevChecked = usePrevious(checked);\n const controlSize = useSize(control);\n\n // Bubble checked change to parents (e.g form change event)\n React.useEffect(() => {\n const input = ref.current!;\n const inputProto = window.HTMLInputElement.prototype;\n const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'checked') 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 <input\n type=\"checkbox\"\n aria-hidden\n defaultChecked={defaultChecked ?? defaultCheckedRef.current}\n {...inputProps}\n tabIndex={-1}\n ref={ref}\n style={{\n ...props.style,\n ...controlSize,\n position: 'absolute',\n pointerEvents: 'none',\n opacity: 0,\n margin: 0,\n }}\n />\n );\n};\n\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": []
|
|
7
7
|
}
|
package/dist/index.mjs
CHANGED
|
@@ -81,7 +81,8 @@ var Checkbox = React.forwardRef(
|
|
|
81
81
|
checked,
|
|
82
82
|
required,
|
|
83
83
|
disabled,
|
|
84
|
-
style: { transform: "translateX(-100%)" }
|
|
84
|
+
style: { transform: "translateX(-100%)" },
|
|
85
|
+
defaultChecked: isIndeterminate(defaultChecked) ? false : defaultChecked
|
|
85
86
|
}
|
|
86
87
|
)
|
|
87
88
|
] });
|
|
@@ -107,7 +108,7 @@ var CheckboxIndicator = React.forwardRef(
|
|
|
107
108
|
);
|
|
108
109
|
CheckboxIndicator.displayName = INDICATOR_NAME;
|
|
109
110
|
var BubbleInput = (props) => {
|
|
110
|
-
const { control, checked, bubbles = true, ...inputProps } = props;
|
|
111
|
+
const { control, checked, bubbles = true, defaultChecked, ...inputProps } = props;
|
|
111
112
|
const ref = React.useRef(null);
|
|
112
113
|
const prevChecked = usePrevious(checked);
|
|
113
114
|
const controlSize = useSize(control);
|
|
@@ -123,12 +124,13 @@ var BubbleInput = (props) => {
|
|
|
123
124
|
input.dispatchEvent(event);
|
|
124
125
|
}
|
|
125
126
|
}, [prevChecked, checked, bubbles]);
|
|
127
|
+
const defaultCheckedRef = React.useRef(isIndeterminate(checked) ? false : checked);
|
|
126
128
|
return /* @__PURE__ */ jsx(
|
|
127
129
|
"input",
|
|
128
130
|
{
|
|
129
131
|
type: "checkbox",
|
|
130
132
|
"aria-hidden": true,
|
|
131
|
-
defaultChecked:
|
|
133
|
+
defaultChecked: defaultChecked ?? defaultCheckedRef.current,
|
|
132
134
|
...inputProps,
|
|
133
135
|
tabIndex: -1,
|
|
134
136
|
ref,
|
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 ...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 ? Boolean(button.closest('form')) : true;\n const [checked = false, setChecked] = useControllableState({\n prop: checkedProp,\n defaultProp: defaultChecked,\n onChange: onCheckedChange,\n });\n const initialCheckedStateRef = React.useRef(checked);\n React.useEffect(() => {\n const form = button?.form;\n if (form) {\n const reset = () => setChecked(initialCheckedStateRef.current);\n form.addEventListener('reset', reset);\n return () => form.removeEventListener('reset', reset);\n }\n }, [button, setChecked]);\n\n return (\n <CheckboxProvider scope={__scopeCheckbox} state={checked} disabled={disabled}>\n <Primitive.button\n type=\"button\"\n role=\"checkbox\"\n aria-checked={isIndeterminate(checked) ? 'mixed' : checked}\n aria-required={required}\n data-state={getState(checked)}\n data-disabled={disabled ? '' : undefined}\n disabled={disabled}\n value={value}\n {...checkboxProps}\n ref={composedRefs}\n onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n // According to WAI ARIA, Checkboxes don't activate on enter keypress\n if (event.key === 'Enter') event.preventDefault();\n })}\n onClick={composeEventHandlers(props.onClick, (event) => {\n setChecked((prevChecked) => (isIndeterminate(prevChecked) ? true : !prevChecked));\n if (isFormControl) {\n hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();\n // if checkbox is in a form, stop propagation from the button so that we only propagate\n // one click event (from the input). We propagate changes from an input so that native\n // form validation works and form events reflect checkbox updates.\n if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();\n }\n })}\n />\n {isFormControl && (\n <BubbleInput\n control={button}\n bubbles={!hasConsumerStoppedPropagationRef.current}\n name={name}\n value={value}\n checked={checked}\n required={required}\n disabled={disabled}\n // 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 />\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\ntype InputProps = React.ComponentPropsWithoutRef<'input'>;\ninterface BubbleInputProps extends Omit<InputProps, 'checked'> {\n checked: CheckedState;\n control: HTMLElement | null;\n bubbles: boolean;\n}\n\nconst BubbleInput = (props: BubbleInputProps) => {\n const { control, checked, bubbles = true, ...inputProps } = props;\n const ref = React.useRef<HTMLInputElement>(null);\n const prevChecked = usePrevious(checked);\n const controlSize = useSize(control);\n\n // Bubble checked change to parents (e.g form change event)\n React.useEffect(() => {\n const input = ref.current!;\n const inputProto = window.HTMLInputElement.prototype;\n const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'checked') as PropertyDescriptor;\n const setChecked = descriptor.set;\n\n if (prevChecked !== checked && setChecked) {\n const event = new Event('click', { bubbles });\n input.indeterminate = isIndeterminate(checked);\n setChecked.call(input, isIndeterminate(checked) ? false : checked);\n input.dispatchEvent(event);\n }\n }, [prevChecked, checked, bubbles]);\n\n return (\n <input\n type=\"checkbox\"\n aria-hidden\n defaultChecked={
|
|
5
|
-
"mappings": ";;;AAAA,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,SAAS,0BAA0B;AACnC,SAAS,4BAA4B;AACrC,SAAS,4BAA4B;AACrC,SAAS,mBAAmB;AAC5B,SAAS,eAAe;AACxB,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAkEpB,SACE,KADF;AA1DN,IAAM,gBAAgB;AAGtB,IAAM,CAAC,uBAAuB,mBAAmB,IAAI,mBAAmB,aAAa;AASrF,IAAM,CAAC,kBAAkB,kBAAkB,IACzC,sBAA4C,aAAa;AAW3D,IAAM,WAAiB;AAAA,EACrB,CAAC,OAAmC,iBAAiB;AACnD,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA,GAAG;AAAA,IACL,IAAI;AACJ,UAAM,CAAC,QAAQ,SAAS,IAAU,eAAmC,IAAI;AACzE,UAAM,eAAe,gBAAgB,cAAc,CAAC,SAAS,UAAU,IAAI,CAAC;AAC5E,UAAM,mCAAyC,aAAO,KAAK;AAE3D,UAAM,gBAAgB,SAAS,QAAQ,OAAO,QAAQ,MAAM,CAAC,IAAI;AACjE,UAAM,CAAC,UAAU,OAAO,UAAU,IAAI,qBAAqB;AAAA,MACzD,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,IACZ,CAAC;AACD,UAAM,yBAA+B,aAAO,OAAO;AACnD,IAAM,gBAAU,MAAM;AACpB,YAAM,OAAO,QAAQ;AACrB,UAAI,MAAM;AACR,cAAM,QAAQ,MAAM,WAAW,uBAAuB,OAAO;AAC7D,aAAK,iBAAiB,SAAS,KAAK;AACpC,eAAO,MAAM,KAAK,oBAAoB,SAAS,KAAK;AAAA,MACtD;AAAA,IACF,GAAG,CAAC,QAAQ,UAAU,CAAC;AAEvB,WACE,qBAAC,oBAAiB,OAAO,iBAAiB,OAAO,SAAS,UACxD;AAAA;AAAA,QAAC,UAAU;AAAA,QAAV;AAAA,UACC,MAAK;AAAA,UACL,MAAK;AAAA,UACL,gBAAc,gBAAgB,OAAO,IAAI,UAAU;AAAA,UACnD,iBAAe;AAAA,UACf,cAAY,SAAS,OAAO;AAAA,UAC5B,iBAAe,WAAW,KAAK;AAAA,UAC/B;AAAA,UACA;AAAA,UACC,GAAG;AAAA,UACJ,KAAK;AAAA,UACL,WAAW,qBAAqB,MAAM,WAAW,CAAC,UAAU;AAE1D,gBAAI,MAAM,QAAQ,QAAS,OAAM,eAAe;AAAA,UAClD,CAAC;AAAA,UACD,SAAS,qBAAqB,MAAM,SAAS,CAAC,UAAU;AACtD,uBAAW,CAAC,gBAAiB,gBAAgB,WAAW,IAAI,OAAO,CAAC,WAAY;AAChF,gBAAI,eAAe;AACjB,+CAAiC,UAAU,MAAM,qBAAqB;AAItE,kBAAI,CAAC,iCAAiC,QAAS,OAAM,gBAAgB;AAAA,YACvE;AAAA,UACF,CAAC;AAAA;AAAA,MACH;AAAA,MACC,iBACC;AAAA,QAAC;AAAA;AAAA,UACC,SAAS;AAAA,UACT,SAAS,CAAC,iCAAiC;AAAA,UAC3C;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UAIA,OAAO,EAAE,WAAW,oBAAoB;AAAA;AAAA,
|
|
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 ...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 ? Boolean(button.closest('form')) : true;\n const [checked = false, setChecked] = useControllableState({\n prop: checkedProp,\n defaultProp: defaultChecked,\n onChange: onCheckedChange,\n });\n const initialCheckedStateRef = React.useRef(checked);\n React.useEffect(() => {\n const form = button?.form;\n if (form) {\n const reset = () => setChecked(initialCheckedStateRef.current);\n form.addEventListener('reset', reset);\n return () => form.removeEventListener('reset', reset);\n }\n }, [button, setChecked]);\n\n return (\n <CheckboxProvider scope={__scopeCheckbox} state={checked} disabled={disabled}>\n <Primitive.button\n type=\"button\"\n role=\"checkbox\"\n aria-checked={isIndeterminate(checked) ? 'mixed' : checked}\n aria-required={required}\n data-state={getState(checked)}\n data-disabled={disabled ? '' : undefined}\n disabled={disabled}\n value={value}\n {...checkboxProps}\n ref={composedRefs}\n onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n // According to WAI ARIA, Checkboxes don't activate on enter keypress\n if (event.key === 'Enter') event.preventDefault();\n })}\n onClick={composeEventHandlers(props.onClick, (event) => {\n setChecked((prevChecked) => (isIndeterminate(prevChecked) ? true : !prevChecked));\n if (isFormControl) {\n hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();\n // if checkbox is in a form, stop propagation from the button so that we only propagate\n // one click event (from the input). We propagate changes from an input so that native\n // form validation works and form events reflect checkbox updates.\n if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();\n }\n })}\n />\n {isFormControl && (\n <BubbleInput\n control={button}\n bubbles={!hasConsumerStoppedPropagationRef.current}\n name={name}\n value={value}\n checked={checked}\n required={required}\n disabled={disabled}\n // 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\ntype InputProps = React.ComponentPropsWithoutRef<'input'>;\ninterface BubbleInputProps extends Omit<InputProps, 'checked'> {\n checked: CheckedState;\n control: HTMLElement | null;\n bubbles: boolean;\n}\n\nconst BubbleInput = (props: BubbleInputProps) => {\n const { control, checked, bubbles = true, defaultChecked, ...inputProps } = props;\n const ref = React.useRef<HTMLInputElement>(null);\n const prevChecked = usePrevious(checked);\n const controlSize = useSize(control);\n\n // Bubble checked change to parents (e.g form change event)\n React.useEffect(() => {\n const input = ref.current!;\n const inputProto = window.HTMLInputElement.prototype;\n const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'checked') 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 <input\n type=\"checkbox\"\n aria-hidden\n defaultChecked={defaultChecked ?? defaultCheckedRef.current}\n {...inputProps}\n tabIndex={-1}\n ref={ref}\n style={{\n ...props.style,\n ...controlSize,\n position: 'absolute',\n pointerEvents: 'none',\n opacity: 0,\n margin: 0,\n }}\n />\n );\n};\n\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": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@radix-ui/react-checkbox",
|
|
3
|
-
"version": "1.1.2-rc.
|
|
3
|
+
"version": "1.1.2-rc.10",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": {
|
|
@@ -30,8 +30,8 @@
|
|
|
30
30
|
"dependencies": {
|
|
31
31
|
"@radix-ui/primitive": "1.1.0",
|
|
32
32
|
"@radix-ui/react-compose-refs": "1.1.0",
|
|
33
|
-
"@radix-ui/react-context": "1.1.
|
|
34
|
-
"@radix-ui/react-presence": "1.1.1-rc.
|
|
33
|
+
"@radix-ui/react-context": "1.1.1-rc.3",
|
|
34
|
+
"@radix-ui/react-presence": "1.1.1-rc.10",
|
|
35
35
|
"@radix-ui/react-primitive": "2.0.0",
|
|
36
36
|
"@radix-ui/react-use-controllable-state": "1.1.0",
|
|
37
37
|
"@radix-ui/react-use-previous": "1.1.0",
|