@radix-ui/react-switch 1.3.2 → 1.3.3-rc.1783030075339

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 CHANGED
@@ -108,6 +108,8 @@ var TRIGGER_NAME = "SwitchTrigger";
108
108
  var SwitchTrigger = React.forwardRef(
109
109
  ({ __scopeSwitch, onClick, ...switchProps }, forwardedRef) => {
110
110
  const {
111
+ control,
112
+ form,
111
113
  value,
112
114
  disabled,
113
115
  checked,
@@ -119,6 +121,15 @@ var SwitchTrigger = React.forwardRef(
119
121
  bubbleInput
120
122
  } = useSwitchContext(TRIGGER_NAME, __scopeSwitch);
121
123
  const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, setControl);
124
+ const initialCheckedStateRef = React.useRef(checked);
125
+ React.useEffect(() => {
126
+ const associatedForm = form ? control?.ownerDocument.getElementById(form) : control?.form;
127
+ if (associatedForm instanceof HTMLFormElement) {
128
+ const reset = () => setChecked(initialCheckedStateRef.current);
129
+ associatedForm.addEventListener("reset", reset);
130
+ return () => associatedForm.removeEventListener("reset", reset);
131
+ }
132
+ }, [control, form, setChecked]);
122
133
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
123
134
  import_react_primitive.Primitive.button,
124
135
  {
package/dist/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../src/index.ts", "../src/switch.tsx"],
4
- "sourcesContent": ["'use client';\nexport {\n createSwitchScope,\n //\n Switch,\n SwitchProvider as unstable_SwitchProvider,\n SwitchTrigger as unstable_SwitchTrigger,\n SwitchThumb,\n SwitchBubbleInput as unstable_SwitchBubbleInput,\n //\n Root,\n Provider as unstable_Provider,\n Trigger as unstable_Trigger,\n Thumb,\n BubbleInput as unstable_BubbleInput,\n} from './switch';\nexport type {\n SwitchProps,\n SwitchProviderProps as unstable_SwitchProviderProps,\n SwitchTriggerProps as unstable_SwitchTriggerProps,\n SwitchThumbProps,\n SwitchBubbleInputProps as unstable_SwitchBubbleInputProps,\n} from './switch';\n", "import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { createContextScope } from '@radix-ui/react-context';\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 { Primitive } from '@radix-ui/react-primitive';\n\nimport type { Scope } from '@radix-ui/react-context';\n\nconst SWITCH_NAME = 'Switch';\n\ntype ScopedProps<P> = P & { __scopeSwitch?: Scope };\nconst [createSwitchContext, createSwitchScope] = createContextScope(SWITCH_NAME);\n\ntype SwitchContextValue = {\n checked: boolean;\n setChecked: React.Dispatch<React.SetStateAction<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 [SwitchProviderImpl, useSwitchContext] = createSwitchContext<SwitchContextValue>(SWITCH_NAME);\n\n/* -------------------------------------------------------------------------------------------------\n * SwitchProvider\n * -----------------------------------------------------------------------------------------------*/\n\ninterface SwitchProviderProps {\n checked?: boolean;\n defaultChecked?: boolean;\n required?: boolean;\n onCheckedChange?(checked: boolean): void;\n name?: string;\n form?: string;\n disabled?: boolean;\n value?: string | number | readonly string[];\n children?: React.ReactNode;\n}\n\nfunction SwitchProvider(props: ScopedProps<SwitchProviderProps>) {\n const {\n __scopeSwitch,\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: SWITCH_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: SwitchContextValue = {\n checked,\n setChecked,\n disabled,\n control,\n setControl,\n name,\n form,\n value,\n hasConsumerStoppedPropagationRef,\n required,\n defaultChecked,\n isFormControl,\n bubbleInput,\n setBubbleInput,\n };\n\n return (\n <SwitchProviderImpl scope={__scopeSwitch} {...context}>\n {isFunction(internal_do_not_use_render) ? internal_do_not_use_render(context) : children}\n </SwitchProviderImpl>\n );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * SwitchTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'SwitchTrigger';\n\ninterface SwitchTriggerProps extends Omit<\n React.ComponentPropsWithoutRef<typeof Primitive.button>,\n keyof SwitchProviderProps\n> {\n children?: React.ReactNode;\n}\n\nconst SwitchTrigger = React.forwardRef<HTMLButtonElement, SwitchTriggerProps>(\n ({ __scopeSwitch, onClick, ...switchProps }: ScopedProps<SwitchTriggerProps>, forwardedRef) => {\n const {\n value,\n disabled,\n checked,\n required,\n setControl,\n setChecked,\n hasConsumerStoppedPropagationRef,\n isFormControl,\n bubbleInput,\n } = useSwitchContext(TRIGGER_NAME, __scopeSwitch);\n const composedRefs = useComposedRefs(forwardedRef, setControl);\n\n return (\n <Primitive.button\n type=\"button\"\n role=\"switch\"\n aria-checked={checked}\n aria-required={required}\n data-state={getState(checked)}\n data-disabled={disabled ? '' : undefined}\n disabled={disabled}\n value={value}\n {...switchProps}\n ref={composedRefs}\n onClick={composeEventHandlers(onClick, (event) => {\n setChecked((prevChecked) => !prevChecked);\n if (bubbleInput && isFormControl) {\n hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();\n // if switch 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 switch\n // updates.\n if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();\n }\n })}\n />\n );\n },\n);\n\nSwitchTrigger.displayName = TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * Switch\n * -----------------------------------------------------------------------------------------------*/\n\ntype SwitchElement = React.ComponentRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.button>;\ninterface SwitchProps extends Omit<PrimitiveButtonProps, 'checked' | 'defaultChecked'> {\n checked?: boolean;\n defaultChecked?: boolean;\n required?: boolean;\n onCheckedChange?(checked: boolean): void;\n}\n\nconst Switch = React.forwardRef<SwitchElement, SwitchProps>(\n (props: ScopedProps<SwitchProps>, forwardedRef) => {\n const {\n __scopeSwitch,\n name,\n checked,\n defaultChecked,\n required,\n disabled,\n value,\n onCheckedChange,\n form,\n ...switchProps\n } = props;\n\n return (\n <SwitchProvider\n __scopeSwitch={__scopeSwitch}\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 }: SwitchContextValue) => (\n <>\n <SwitchTrigger\n {...switchProps}\n ref={forwardedRef}\n // @ts-expect-error\n __scopeSwitch={__scopeSwitch}\n />\n {isFormControl && (\n <SwitchBubbleInput\n // @ts-expect-error\n __scopeSwitch={__scopeSwitch}\n />\n )}\n </>\n )}\n />\n );\n },\n);\n\nSwitch.displayName = SWITCH_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SwitchThumb\n * -----------------------------------------------------------------------------------------------*/\n\nconst THUMB_NAME = 'SwitchThumb';\n\ntype SwitchThumbElement = React.ComponentRef<typeof Primitive.span>;\ntype PrimitiveSpanProps = React.ComponentPropsWithoutRef<typeof Primitive.span>;\ninterface SwitchThumbProps extends PrimitiveSpanProps {}\n\nconst SwitchThumb = React.forwardRef<SwitchThumbElement, SwitchThumbProps>(\n (props: ScopedProps<SwitchThumbProps>, forwardedRef) => {\n const { __scopeSwitch, ...thumbProps } = props;\n const context = useSwitchContext(THUMB_NAME, __scopeSwitch);\n return (\n <Primitive.span\n data-state={getState(context.checked)}\n data-disabled={context.disabled ? '' : undefined}\n {...thumbProps}\n ref={forwardedRef}\n />\n );\n },\n);\n\nSwitchThumb.displayName = THUMB_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SwitchBubbleInput\n * -----------------------------------------------------------------------------------------------*/\n\nconst BUBBLE_INPUT_NAME = 'SwitchBubbleInput';\n\ntype InputProps = React.ComponentPropsWithoutRef<typeof Primitive.input>;\ninterface SwitchBubbleInputProps extends Omit<InputProps, 'checked'> {}\n\nconst SwitchBubbleInput = React.forwardRef<HTMLInputElement, SwitchBubbleInputProps>(\n ({ __scopeSwitch, ...props }: ScopedProps<SwitchBubbleInputProps>, 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 } = useSwitchContext(BUBBLE_INPUT_NAME, __scopeSwitch);\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 setChecked.call(input, checked);\n input.dispatchEvent(event);\n }\n }, [bubbleInput, prevChecked, checked, hasConsumerStoppedPropagationRef]);\n\n const defaultCheckedRef = React.useRef(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\nSwitchBubbleInput.displayName = BUBBLE_INPUT_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction isFunction(value: unknown): value is (...args: any[]) => any {\n return typeof value === 'function';\n}\n\nfunction getState(checked: boolean) {\n return checked ? 'checked' : 'unchecked';\n}\n\nexport {\n createSwitchScope,\n //\n Switch,\n SwitchProvider,\n SwitchTrigger,\n SwitchThumb,\n SwitchBubbleInput,\n //\n Switch as Root,\n SwitchProvider as Provider,\n SwitchTrigger as Trigger,\n SwitchThumb as Thumb,\n SwitchBubbleInput as BubbleInput,\n};\nexport type {\n SwitchProps,\n SwitchProviderProps,\n SwitchTriggerProps,\n SwitchThumbProps,\n SwitchBubbleInputProps,\n};\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["'use client';\nexport {\n createSwitchScope,\n //\n Switch,\n SwitchProvider as unstable_SwitchProvider,\n SwitchTrigger as unstable_SwitchTrigger,\n SwitchThumb,\n SwitchBubbleInput as unstable_SwitchBubbleInput,\n //\n Root,\n Provider as unstable_Provider,\n Trigger as unstable_Trigger,\n Thumb,\n BubbleInput as unstable_BubbleInput,\n} from './switch';\nexport type {\n SwitchProps,\n SwitchProviderProps as unstable_SwitchProviderProps,\n SwitchTriggerProps as unstable_SwitchTriggerProps,\n SwitchThumbProps,\n SwitchBubbleInputProps as unstable_SwitchBubbleInputProps,\n} from './switch';\n", "import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { createContextScope } from '@radix-ui/react-context';\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 { Primitive } from '@radix-ui/react-primitive';\n\nimport type { Scope } from '@radix-ui/react-context';\n\nconst SWITCH_NAME = 'Switch';\n\ntype ScopedProps<P> = P & { __scopeSwitch?: Scope };\nconst [createSwitchContext, createSwitchScope] = createContextScope(SWITCH_NAME);\n\ntype SwitchContextValue = {\n checked: boolean;\n setChecked: React.Dispatch<React.SetStateAction<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 [SwitchProviderImpl, useSwitchContext] = createSwitchContext<SwitchContextValue>(SWITCH_NAME);\n\n/* -------------------------------------------------------------------------------------------------\n * SwitchProvider\n * -----------------------------------------------------------------------------------------------*/\n\ninterface SwitchProviderProps {\n checked?: boolean;\n defaultChecked?: boolean;\n required?: boolean;\n onCheckedChange?(checked: boolean): void;\n name?: string;\n form?: string;\n disabled?: boolean;\n value?: string | number | readonly string[];\n children?: React.ReactNode;\n}\n\nfunction SwitchProvider(props: ScopedProps<SwitchProviderProps>) {\n const {\n __scopeSwitch,\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: SWITCH_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: SwitchContextValue = {\n checked,\n setChecked,\n disabled,\n control,\n setControl,\n name,\n form,\n value,\n hasConsumerStoppedPropagationRef,\n required,\n defaultChecked,\n isFormControl,\n bubbleInput,\n setBubbleInput,\n };\n\n return (\n <SwitchProviderImpl scope={__scopeSwitch} {...context}>\n {isFunction(internal_do_not_use_render) ? internal_do_not_use_render(context) : children}\n </SwitchProviderImpl>\n );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * SwitchTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'SwitchTrigger';\n\ninterface SwitchTriggerProps extends Omit<\n React.ComponentPropsWithoutRef<typeof Primitive.button>,\n keyof SwitchProviderProps\n> {\n children?: React.ReactNode;\n}\n\nconst SwitchTrigger = React.forwardRef<HTMLButtonElement, SwitchTriggerProps>(\n ({ __scopeSwitch, onClick, ...switchProps }: ScopedProps<SwitchTriggerProps>, forwardedRef) => {\n const {\n control,\n form,\n value,\n disabled,\n checked,\n required,\n setControl,\n setChecked,\n hasConsumerStoppedPropagationRef,\n isFormControl,\n bubbleInput,\n } = useSwitchContext(TRIGGER_NAME, __scopeSwitch);\n const composedRefs = useComposedRefs(forwardedRef, setControl);\n\n const initialCheckedStateRef = React.useRef(checked);\n React.useEffect(() => {\n const associatedForm = form ? control?.ownerDocument.getElementById(form) : control?.form;\n if (associatedForm instanceof HTMLFormElement) {\n const reset = () => setChecked(initialCheckedStateRef.current);\n associatedForm.addEventListener('reset', reset);\n return () => associatedForm.removeEventListener('reset', reset);\n }\n }, [control, form, setChecked]);\n\n return (\n <Primitive.button\n type=\"button\"\n role=\"switch\"\n aria-checked={checked}\n aria-required={required}\n data-state={getState(checked)}\n data-disabled={disabled ? '' : undefined}\n disabled={disabled}\n value={value}\n {...switchProps}\n ref={composedRefs}\n onClick={composeEventHandlers(onClick, (event) => {\n setChecked((prevChecked) => !prevChecked);\n if (bubbleInput && isFormControl) {\n hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();\n // if switch 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 switch\n // updates.\n if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();\n }\n })}\n />\n );\n },\n);\n\nSwitchTrigger.displayName = TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * Switch\n * -----------------------------------------------------------------------------------------------*/\n\ntype SwitchElement = React.ComponentRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.button>;\ninterface SwitchProps extends Omit<PrimitiveButtonProps, 'checked' | 'defaultChecked'> {\n checked?: boolean;\n defaultChecked?: boolean;\n required?: boolean;\n onCheckedChange?(checked: boolean): void;\n}\n\nconst Switch = React.forwardRef<SwitchElement, SwitchProps>(\n (props: ScopedProps<SwitchProps>, forwardedRef) => {\n const {\n __scopeSwitch,\n name,\n checked,\n defaultChecked,\n required,\n disabled,\n value,\n onCheckedChange,\n form,\n ...switchProps\n } = props;\n\n return (\n <SwitchProvider\n __scopeSwitch={__scopeSwitch}\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 }: SwitchContextValue) => (\n <>\n <SwitchTrigger\n {...switchProps}\n ref={forwardedRef}\n // @ts-expect-error\n __scopeSwitch={__scopeSwitch}\n />\n {isFormControl && (\n <SwitchBubbleInput\n // @ts-expect-error\n __scopeSwitch={__scopeSwitch}\n />\n )}\n </>\n )}\n />\n );\n },\n);\n\nSwitch.displayName = SWITCH_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SwitchThumb\n * -----------------------------------------------------------------------------------------------*/\n\nconst THUMB_NAME = 'SwitchThumb';\n\ntype SwitchThumbElement = React.ComponentRef<typeof Primitive.span>;\ntype PrimitiveSpanProps = React.ComponentPropsWithoutRef<typeof Primitive.span>;\ninterface SwitchThumbProps extends PrimitiveSpanProps {}\n\nconst SwitchThumb = React.forwardRef<SwitchThumbElement, SwitchThumbProps>(\n (props: ScopedProps<SwitchThumbProps>, forwardedRef) => {\n const { __scopeSwitch, ...thumbProps } = props;\n const context = useSwitchContext(THUMB_NAME, __scopeSwitch);\n return (\n <Primitive.span\n data-state={getState(context.checked)}\n data-disabled={context.disabled ? '' : undefined}\n {...thumbProps}\n ref={forwardedRef}\n />\n );\n },\n);\n\nSwitchThumb.displayName = THUMB_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SwitchBubbleInput\n * -----------------------------------------------------------------------------------------------*/\n\nconst BUBBLE_INPUT_NAME = 'SwitchBubbleInput';\n\ntype InputProps = React.ComponentPropsWithoutRef<typeof Primitive.input>;\ninterface SwitchBubbleInputProps extends Omit<InputProps, 'checked'> {}\n\nconst SwitchBubbleInput = React.forwardRef<HTMLInputElement, SwitchBubbleInputProps>(\n ({ __scopeSwitch, ...props }: ScopedProps<SwitchBubbleInputProps>, 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 } = useSwitchContext(BUBBLE_INPUT_NAME, __scopeSwitch);\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 setChecked.call(input, checked);\n input.dispatchEvent(event);\n }\n }, [bubbleInput, prevChecked, checked, hasConsumerStoppedPropagationRef]);\n\n const defaultCheckedRef = React.useRef(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\nSwitchBubbleInput.displayName = BUBBLE_INPUT_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction isFunction(value: unknown): value is (...args: any[]) => any {\n return typeof value === 'function';\n}\n\nfunction getState(checked: boolean) {\n return checked ? 'checked' : 'unchecked';\n}\n\nexport {\n createSwitchScope,\n //\n Switch,\n SwitchProvider,\n SwitchTrigger,\n SwitchThumb,\n SwitchBubbleInput,\n //\n Switch as Root,\n SwitchProvider as Provider,\n SwitchTrigger as Trigger,\n SwitchThumb as Thumb,\n SwitchBubbleInput as BubbleInput,\n};\nexport type {\n SwitchProps,\n SwitchProviderProps,\n SwitchTriggerProps,\n SwitchThumbProps,\n SwitchBubbleInputProps,\n};\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/index.mjs CHANGED
@@ -63,6 +63,8 @@ var TRIGGER_NAME = "SwitchTrigger";
63
63
  var SwitchTrigger = React.forwardRef(
64
64
  ({ __scopeSwitch, onClick, ...switchProps }, forwardedRef) => {
65
65
  const {
66
+ control,
67
+ form,
66
68
  value,
67
69
  disabled,
68
70
  checked,
@@ -74,6 +76,15 @@ var SwitchTrigger = React.forwardRef(
74
76
  bubbleInput
75
77
  } = useSwitchContext(TRIGGER_NAME, __scopeSwitch);
76
78
  const composedRefs = useComposedRefs(forwardedRef, setControl);
79
+ const initialCheckedStateRef = React.useRef(checked);
80
+ React.useEffect(() => {
81
+ const associatedForm = form ? control?.ownerDocument.getElementById(form) : control?.form;
82
+ if (associatedForm instanceof HTMLFormElement) {
83
+ const reset = () => setChecked(initialCheckedStateRef.current);
84
+ associatedForm.addEventListener("reset", reset);
85
+ return () => associatedForm.removeEventListener("reset", reset);
86
+ }
87
+ }, [control, form, setChecked]);
77
88
  return /* @__PURE__ */ jsx(
78
89
  Primitive.button,
79
90
  {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../src/switch.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { createContextScope } from '@radix-ui/react-context';\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 { Primitive } from '@radix-ui/react-primitive';\n\nimport type { Scope } from '@radix-ui/react-context';\n\nconst SWITCH_NAME = 'Switch';\n\ntype ScopedProps<P> = P & { __scopeSwitch?: Scope };\nconst [createSwitchContext, createSwitchScope] = createContextScope(SWITCH_NAME);\n\ntype SwitchContextValue = {\n checked: boolean;\n setChecked: React.Dispatch<React.SetStateAction<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 [SwitchProviderImpl, useSwitchContext] = createSwitchContext<SwitchContextValue>(SWITCH_NAME);\n\n/* -------------------------------------------------------------------------------------------------\n * SwitchProvider\n * -----------------------------------------------------------------------------------------------*/\n\ninterface SwitchProviderProps {\n checked?: boolean;\n defaultChecked?: boolean;\n required?: boolean;\n onCheckedChange?(checked: boolean): void;\n name?: string;\n form?: string;\n disabled?: boolean;\n value?: string | number | readonly string[];\n children?: React.ReactNode;\n}\n\nfunction SwitchProvider(props: ScopedProps<SwitchProviderProps>) {\n const {\n __scopeSwitch,\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: SWITCH_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: SwitchContextValue = {\n checked,\n setChecked,\n disabled,\n control,\n setControl,\n name,\n form,\n value,\n hasConsumerStoppedPropagationRef,\n required,\n defaultChecked,\n isFormControl,\n bubbleInput,\n setBubbleInput,\n };\n\n return (\n <SwitchProviderImpl scope={__scopeSwitch} {...context}>\n {isFunction(internal_do_not_use_render) ? internal_do_not_use_render(context) : children}\n </SwitchProviderImpl>\n );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * SwitchTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'SwitchTrigger';\n\ninterface SwitchTriggerProps extends Omit<\n React.ComponentPropsWithoutRef<typeof Primitive.button>,\n keyof SwitchProviderProps\n> {\n children?: React.ReactNode;\n}\n\nconst SwitchTrigger = React.forwardRef<HTMLButtonElement, SwitchTriggerProps>(\n ({ __scopeSwitch, onClick, ...switchProps }: ScopedProps<SwitchTriggerProps>, forwardedRef) => {\n const {\n value,\n disabled,\n checked,\n required,\n setControl,\n setChecked,\n hasConsumerStoppedPropagationRef,\n isFormControl,\n bubbleInput,\n } = useSwitchContext(TRIGGER_NAME, __scopeSwitch);\n const composedRefs = useComposedRefs(forwardedRef, setControl);\n\n return (\n <Primitive.button\n type=\"button\"\n role=\"switch\"\n aria-checked={checked}\n aria-required={required}\n data-state={getState(checked)}\n data-disabled={disabled ? '' : undefined}\n disabled={disabled}\n value={value}\n {...switchProps}\n ref={composedRefs}\n onClick={composeEventHandlers(onClick, (event) => {\n setChecked((prevChecked) => !prevChecked);\n if (bubbleInput && isFormControl) {\n hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();\n // if switch 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 switch\n // updates.\n if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();\n }\n })}\n />\n );\n },\n);\n\nSwitchTrigger.displayName = TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * Switch\n * -----------------------------------------------------------------------------------------------*/\n\ntype SwitchElement = React.ComponentRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.button>;\ninterface SwitchProps extends Omit<PrimitiveButtonProps, 'checked' | 'defaultChecked'> {\n checked?: boolean;\n defaultChecked?: boolean;\n required?: boolean;\n onCheckedChange?(checked: boolean): void;\n}\n\nconst Switch = React.forwardRef<SwitchElement, SwitchProps>(\n (props: ScopedProps<SwitchProps>, forwardedRef) => {\n const {\n __scopeSwitch,\n name,\n checked,\n defaultChecked,\n required,\n disabled,\n value,\n onCheckedChange,\n form,\n ...switchProps\n } = props;\n\n return (\n <SwitchProvider\n __scopeSwitch={__scopeSwitch}\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 }: SwitchContextValue) => (\n <>\n <SwitchTrigger\n {...switchProps}\n ref={forwardedRef}\n // @ts-expect-error\n __scopeSwitch={__scopeSwitch}\n />\n {isFormControl && (\n <SwitchBubbleInput\n // @ts-expect-error\n __scopeSwitch={__scopeSwitch}\n />\n )}\n </>\n )}\n />\n );\n },\n);\n\nSwitch.displayName = SWITCH_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SwitchThumb\n * -----------------------------------------------------------------------------------------------*/\n\nconst THUMB_NAME = 'SwitchThumb';\n\ntype SwitchThumbElement = React.ComponentRef<typeof Primitive.span>;\ntype PrimitiveSpanProps = React.ComponentPropsWithoutRef<typeof Primitive.span>;\ninterface SwitchThumbProps extends PrimitiveSpanProps {}\n\nconst SwitchThumb = React.forwardRef<SwitchThumbElement, SwitchThumbProps>(\n (props: ScopedProps<SwitchThumbProps>, forwardedRef) => {\n const { __scopeSwitch, ...thumbProps } = props;\n const context = useSwitchContext(THUMB_NAME, __scopeSwitch);\n return (\n <Primitive.span\n data-state={getState(context.checked)}\n data-disabled={context.disabled ? '' : undefined}\n {...thumbProps}\n ref={forwardedRef}\n />\n );\n },\n);\n\nSwitchThumb.displayName = THUMB_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SwitchBubbleInput\n * -----------------------------------------------------------------------------------------------*/\n\nconst BUBBLE_INPUT_NAME = 'SwitchBubbleInput';\n\ntype InputProps = React.ComponentPropsWithoutRef<typeof Primitive.input>;\ninterface SwitchBubbleInputProps extends Omit<InputProps, 'checked'> {}\n\nconst SwitchBubbleInput = React.forwardRef<HTMLInputElement, SwitchBubbleInputProps>(\n ({ __scopeSwitch, ...props }: ScopedProps<SwitchBubbleInputProps>, 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 } = useSwitchContext(BUBBLE_INPUT_NAME, __scopeSwitch);\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 setChecked.call(input, checked);\n input.dispatchEvent(event);\n }\n }, [bubbleInput, prevChecked, checked, hasConsumerStoppedPropagationRef]);\n\n const defaultCheckedRef = React.useRef(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\nSwitchBubbleInput.displayName = BUBBLE_INPUT_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction isFunction(value: unknown): value is (...args: any[]) => any {\n return typeof value === 'function';\n}\n\nfunction getState(checked: boolean) {\n return checked ? 'checked' : 'unchecked';\n}\n\nexport {\n createSwitchScope,\n //\n Switch,\n SwitchProvider,\n SwitchTrigger,\n SwitchThumb,\n SwitchBubbleInput,\n //\n Switch as Root,\n SwitchProvider as Provider,\n SwitchTrigger as Trigger,\n SwitchThumb as Thumb,\n SwitchBubbleInput as BubbleInput,\n};\nexport type {\n SwitchProps,\n SwitchProviderProps,\n SwitchTriggerProps,\n SwitchThumbProps,\n SwitchBubbleInputProps,\n};\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { createContextScope } from '@radix-ui/react-context';\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 { Primitive } from '@radix-ui/react-primitive';\n\nimport type { Scope } from '@radix-ui/react-context';\n\nconst SWITCH_NAME = 'Switch';\n\ntype ScopedProps<P> = P & { __scopeSwitch?: Scope };\nconst [createSwitchContext, createSwitchScope] = createContextScope(SWITCH_NAME);\n\ntype SwitchContextValue = {\n checked: boolean;\n setChecked: React.Dispatch<React.SetStateAction<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 [SwitchProviderImpl, useSwitchContext] = createSwitchContext<SwitchContextValue>(SWITCH_NAME);\n\n/* -------------------------------------------------------------------------------------------------\n * SwitchProvider\n * -----------------------------------------------------------------------------------------------*/\n\ninterface SwitchProviderProps {\n checked?: boolean;\n defaultChecked?: boolean;\n required?: boolean;\n onCheckedChange?(checked: boolean): void;\n name?: string;\n form?: string;\n disabled?: boolean;\n value?: string | number | readonly string[];\n children?: React.ReactNode;\n}\n\nfunction SwitchProvider(props: ScopedProps<SwitchProviderProps>) {\n const {\n __scopeSwitch,\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: SWITCH_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: SwitchContextValue = {\n checked,\n setChecked,\n disabled,\n control,\n setControl,\n name,\n form,\n value,\n hasConsumerStoppedPropagationRef,\n required,\n defaultChecked,\n isFormControl,\n bubbleInput,\n setBubbleInput,\n };\n\n return (\n <SwitchProviderImpl scope={__scopeSwitch} {...context}>\n {isFunction(internal_do_not_use_render) ? internal_do_not_use_render(context) : children}\n </SwitchProviderImpl>\n );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * SwitchTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'SwitchTrigger';\n\ninterface SwitchTriggerProps extends Omit<\n React.ComponentPropsWithoutRef<typeof Primitive.button>,\n keyof SwitchProviderProps\n> {\n children?: React.ReactNode;\n}\n\nconst SwitchTrigger = React.forwardRef<HTMLButtonElement, SwitchTriggerProps>(\n ({ __scopeSwitch, onClick, ...switchProps }: ScopedProps<SwitchTriggerProps>, forwardedRef) => {\n const {\n control,\n form,\n value,\n disabled,\n checked,\n required,\n setControl,\n setChecked,\n hasConsumerStoppedPropagationRef,\n isFormControl,\n bubbleInput,\n } = useSwitchContext(TRIGGER_NAME, __scopeSwitch);\n const composedRefs = useComposedRefs(forwardedRef, setControl);\n\n const initialCheckedStateRef = React.useRef(checked);\n React.useEffect(() => {\n const associatedForm = form ? control?.ownerDocument.getElementById(form) : control?.form;\n if (associatedForm instanceof HTMLFormElement) {\n const reset = () => setChecked(initialCheckedStateRef.current);\n associatedForm.addEventListener('reset', reset);\n return () => associatedForm.removeEventListener('reset', reset);\n }\n }, [control, form, setChecked]);\n\n return (\n <Primitive.button\n type=\"button\"\n role=\"switch\"\n aria-checked={checked}\n aria-required={required}\n data-state={getState(checked)}\n data-disabled={disabled ? '' : undefined}\n disabled={disabled}\n value={value}\n {...switchProps}\n ref={composedRefs}\n onClick={composeEventHandlers(onClick, (event) => {\n setChecked((prevChecked) => !prevChecked);\n if (bubbleInput && isFormControl) {\n hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();\n // if switch 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 switch\n // updates.\n if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();\n }\n })}\n />\n );\n },\n);\n\nSwitchTrigger.displayName = TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * Switch\n * -----------------------------------------------------------------------------------------------*/\n\ntype SwitchElement = React.ComponentRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.button>;\ninterface SwitchProps extends Omit<PrimitiveButtonProps, 'checked' | 'defaultChecked'> {\n checked?: boolean;\n defaultChecked?: boolean;\n required?: boolean;\n onCheckedChange?(checked: boolean): void;\n}\n\nconst Switch = React.forwardRef<SwitchElement, SwitchProps>(\n (props: ScopedProps<SwitchProps>, forwardedRef) => {\n const {\n __scopeSwitch,\n name,\n checked,\n defaultChecked,\n required,\n disabled,\n value,\n onCheckedChange,\n form,\n ...switchProps\n } = props;\n\n return (\n <SwitchProvider\n __scopeSwitch={__scopeSwitch}\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 }: SwitchContextValue) => (\n <>\n <SwitchTrigger\n {...switchProps}\n ref={forwardedRef}\n // @ts-expect-error\n __scopeSwitch={__scopeSwitch}\n />\n {isFormControl && (\n <SwitchBubbleInput\n // @ts-expect-error\n __scopeSwitch={__scopeSwitch}\n />\n )}\n </>\n )}\n />\n );\n },\n);\n\nSwitch.displayName = SWITCH_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SwitchThumb\n * -----------------------------------------------------------------------------------------------*/\n\nconst THUMB_NAME = 'SwitchThumb';\n\ntype SwitchThumbElement = React.ComponentRef<typeof Primitive.span>;\ntype PrimitiveSpanProps = React.ComponentPropsWithoutRef<typeof Primitive.span>;\ninterface SwitchThumbProps extends PrimitiveSpanProps {}\n\nconst SwitchThumb = React.forwardRef<SwitchThumbElement, SwitchThumbProps>(\n (props: ScopedProps<SwitchThumbProps>, forwardedRef) => {\n const { __scopeSwitch, ...thumbProps } = props;\n const context = useSwitchContext(THUMB_NAME, __scopeSwitch);\n return (\n <Primitive.span\n data-state={getState(context.checked)}\n data-disabled={context.disabled ? '' : undefined}\n {...thumbProps}\n ref={forwardedRef}\n />\n );\n },\n);\n\nSwitchThumb.displayName = THUMB_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SwitchBubbleInput\n * -----------------------------------------------------------------------------------------------*/\n\nconst BUBBLE_INPUT_NAME = 'SwitchBubbleInput';\n\ntype InputProps = React.ComponentPropsWithoutRef<typeof Primitive.input>;\ninterface SwitchBubbleInputProps extends Omit<InputProps, 'checked'> {}\n\nconst SwitchBubbleInput = React.forwardRef<HTMLInputElement, SwitchBubbleInputProps>(\n ({ __scopeSwitch, ...props }: ScopedProps<SwitchBubbleInputProps>, 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 } = useSwitchContext(BUBBLE_INPUT_NAME, __scopeSwitch);\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 setChecked.call(input, checked);\n input.dispatchEvent(event);\n }\n }, [bubbleInput, prevChecked, checked, hasConsumerStoppedPropagationRef]);\n\n const defaultCheckedRef = React.useRef(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\nSwitchBubbleInput.displayName = BUBBLE_INPUT_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction isFunction(value: unknown): value is (...args: any[]) => any {\n return typeof value === 'function';\n}\n\nfunction getState(checked: boolean) {\n return checked ? 'checked' : 'unchecked';\n}\n\nexport {\n createSwitchScope,\n //\n Switch,\n SwitchProvider,\n SwitchTrigger,\n SwitchThumb,\n SwitchBubbleInput,\n //\n Switch as Root,\n SwitchProvider as Provider,\n SwitchTrigger as Trigger,\n SwitchThumb as Thumb,\n SwitchBubbleInput as BubbleInput,\n};\nexport type {\n SwitchProps,\n SwitchProviderProps,\n SwitchTriggerProps,\n SwitchThumbProps,\n SwitchBubbleInputProps,\n};\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-switch",
3
- "version": "1.3.2",
3
+ "version": "1.3.3-rc.1783030075339",
4
4
  "license": "MIT",
5
5
  "source": "./src/index.ts",
6
6
  "main": "./dist/index.js",
@@ -13,11 +13,11 @@
13
13
  "dependencies": {
14
14
  "@radix-ui/primitive": "1.1.4",
15
15
  "@radix-ui/react-compose-refs": "1.1.3",
16
- "@radix-ui/react-context": "1.1.4",
17
- "@radix-ui/react-primitive": "2.1.7",
18
16
  "@radix-ui/react-use-controllable-state": "1.2.3",
19
- "@radix-ui/react-use-previous": "1.1.2",
20
- "@radix-ui/react-use-size": "1.1.2"
17
+ "@radix-ui/react-context": "1.2.0-rc.1783030075339",
18
+ "@radix-ui/react-primitive": "2.1.7",
19
+ "@radix-ui/react-use-size": "1.1.2",
20
+ "@radix-ui/react-use-previous": "1.1.2"
21
21
  },
22
22
  "devDependencies": {
23
23
  "@types/react": "^19.2.2",