145 lines
7.1 KiB
JavaScript
145 lines
7.1 KiB
JavaScript
import $irPIl$babelruntimehelpersesmextends from "@babel/runtime/helpers/esm/extends";
|
|
import {forwardRef as $irPIl$forwardRef, useState as $irPIl$useState, useRef as $irPIl$useRef, createElement as $irPIl$createElement, useEffect as $irPIl$useEffect} from "react";
|
|
import {composeEventHandlers as $irPIl$composeEventHandlers} from "@radix-ui/primitive";
|
|
import {useComposedRefs as $irPIl$useComposedRefs} from "@radix-ui/react-compose-refs";
|
|
import {createContextScope as $irPIl$createContextScope} from "@radix-ui/react-context";
|
|
import {useControllableState as $irPIl$useControllableState} from "@radix-ui/react-use-controllable-state";
|
|
import {usePrevious as $irPIl$usePrevious} from "@radix-ui/react-use-previous";
|
|
import {useSize as $irPIl$useSize} from "@radix-ui/react-use-size";
|
|
import {Primitive as $irPIl$Primitive} from "@radix-ui/react-primitive";
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* -------------------------------------------------------------------------------------------------
|
|
* Switch
|
|
* -----------------------------------------------------------------------------------------------*/ const $6be4966fd9bbc698$var$SWITCH_NAME = 'Switch';
|
|
const [$6be4966fd9bbc698$var$createSwitchContext, $6be4966fd9bbc698$export$cf7f5f17f69cbd43] = $irPIl$createContextScope($6be4966fd9bbc698$var$SWITCH_NAME);
|
|
const [$6be4966fd9bbc698$var$SwitchProvider, $6be4966fd9bbc698$var$useSwitchContext] = $6be4966fd9bbc698$var$createSwitchContext($6be4966fd9bbc698$var$SWITCH_NAME);
|
|
const $6be4966fd9bbc698$export$b5d5cf8927ab7262 = /*#__PURE__*/ $irPIl$forwardRef((props, forwardedRef)=>{
|
|
const { __scopeSwitch: __scopeSwitch , name: name , checked: checkedProp , defaultChecked: defaultChecked , required: required , disabled: disabled , value: value = 'on' , onCheckedChange: onCheckedChange , ...switchProps } = props;
|
|
const [button, setButton] = $irPIl$useState(null);
|
|
const composedRefs = $irPIl$useComposedRefs(forwardedRef, (node)=>setButton(node)
|
|
);
|
|
const hasConsumerStoppedPropagationRef = $irPIl$useRef(false); // We set this to true by default so that events bubble to forms without JS (SSR)
|
|
const isFormControl = button ? Boolean(button.closest('form')) : true;
|
|
const [checked = false, setChecked] = $irPIl$useControllableState({
|
|
prop: checkedProp,
|
|
defaultProp: defaultChecked,
|
|
onChange: onCheckedChange
|
|
});
|
|
return /*#__PURE__*/ $irPIl$createElement($6be4966fd9bbc698$var$SwitchProvider, {
|
|
scope: __scopeSwitch,
|
|
checked: checked,
|
|
disabled: disabled
|
|
}, /*#__PURE__*/ $irPIl$createElement($irPIl$Primitive.button, $irPIl$babelruntimehelpersesmextends({
|
|
type: "button",
|
|
role: "switch",
|
|
"aria-checked": checked,
|
|
"aria-required": required,
|
|
"data-state": $6be4966fd9bbc698$var$getState(checked),
|
|
"data-disabled": disabled ? '' : undefined,
|
|
disabled: disabled,
|
|
value: value
|
|
}, switchProps, {
|
|
ref: composedRefs,
|
|
onClick: $irPIl$composeEventHandlers(props.onClick, (event)=>{
|
|
setChecked((prevChecked)=>!prevChecked
|
|
);
|
|
if (isFormControl) {
|
|
hasConsumerStoppedPropagationRef.current = event.isPropagationStopped(); // if switch is in a form, stop propagation from the button so that we only propagate
|
|
// one click event (from the input). We propagate changes from an input so that native
|
|
// form validation works and form events reflect switch updates.
|
|
if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
|
|
}
|
|
})
|
|
})), isFormControl && /*#__PURE__*/ $irPIl$createElement($6be4966fd9bbc698$var$BubbleInput, {
|
|
control: button,
|
|
bubbles: !hasConsumerStoppedPropagationRef.current,
|
|
name: name,
|
|
value: value,
|
|
checked: checked,
|
|
required: required,
|
|
disabled: disabled // We transform because the input is absolutely positioned but we have
|
|
,
|
|
style: {
|
|
transform: 'translateX(-100%)'
|
|
}
|
|
}));
|
|
});
|
|
/*#__PURE__*/ Object.assign($6be4966fd9bbc698$export$b5d5cf8927ab7262, {
|
|
displayName: $6be4966fd9bbc698$var$SWITCH_NAME
|
|
});
|
|
/* -------------------------------------------------------------------------------------------------
|
|
* SwitchThumb
|
|
* -----------------------------------------------------------------------------------------------*/ const $6be4966fd9bbc698$var$THUMB_NAME = 'SwitchThumb';
|
|
const $6be4966fd9bbc698$export$4d07bf653ea69106 = /*#__PURE__*/ $irPIl$forwardRef((props, forwardedRef)=>{
|
|
const { __scopeSwitch: __scopeSwitch , ...thumbProps } = props;
|
|
const context = $6be4966fd9bbc698$var$useSwitchContext($6be4966fd9bbc698$var$THUMB_NAME, __scopeSwitch);
|
|
return /*#__PURE__*/ $irPIl$createElement($irPIl$Primitive.span, $irPIl$babelruntimehelpersesmextends({
|
|
"data-state": $6be4966fd9bbc698$var$getState(context.checked),
|
|
"data-disabled": context.disabled ? '' : undefined
|
|
}, thumbProps, {
|
|
ref: forwardedRef
|
|
}));
|
|
});
|
|
/*#__PURE__*/ Object.assign($6be4966fd9bbc698$export$4d07bf653ea69106, {
|
|
displayName: $6be4966fd9bbc698$var$THUMB_NAME
|
|
});
|
|
/* ---------------------------------------------------------------------------------------------- */ const $6be4966fd9bbc698$var$BubbleInput = (props)=>{
|
|
const { control: control , checked: checked , bubbles: bubbles = true , ...inputProps } = props;
|
|
const ref = $irPIl$useRef(null);
|
|
const prevChecked = $irPIl$usePrevious(checked);
|
|
const controlSize = $irPIl$useSize(control); // Bubble checked change to parents (e.g form change event)
|
|
$irPIl$useEffect(()=>{
|
|
const input = ref.current;
|
|
const inputProto = window.HTMLInputElement.prototype;
|
|
const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'checked');
|
|
const setChecked = descriptor.set;
|
|
if (prevChecked !== checked && setChecked) {
|
|
const event = new Event('click', {
|
|
bubbles: bubbles
|
|
});
|
|
setChecked.call(input, checked);
|
|
input.dispatchEvent(event);
|
|
}
|
|
}, [
|
|
prevChecked,
|
|
checked,
|
|
bubbles
|
|
]);
|
|
return /*#__PURE__*/ $irPIl$createElement("input", $irPIl$babelruntimehelpersesmextends({
|
|
type: "checkbox",
|
|
"aria-hidden": true,
|
|
defaultChecked: checked
|
|
}, inputProps, {
|
|
tabIndex: -1,
|
|
ref: ref,
|
|
style: {
|
|
...props.style,
|
|
...controlSize,
|
|
position: 'absolute',
|
|
pointerEvents: 'none',
|
|
opacity: 0,
|
|
margin: 0
|
|
}
|
|
}));
|
|
};
|
|
function $6be4966fd9bbc698$var$getState(checked) {
|
|
return checked ? 'checked' : 'unchecked';
|
|
}
|
|
const $6be4966fd9bbc698$export$be92b6f5f03c0fe9 = $6be4966fd9bbc698$export$b5d5cf8927ab7262;
|
|
const $6be4966fd9bbc698$export$6521433ed15a34db = $6be4966fd9bbc698$export$4d07bf653ea69106;
|
|
|
|
|
|
|
|
|
|
export {$6be4966fd9bbc698$export$cf7f5f17f69cbd43 as createSwitchScope, $6be4966fd9bbc698$export$b5d5cf8927ab7262 as Switch, $6be4966fd9bbc698$export$4d07bf653ea69106 as SwitchThumb, $6be4966fd9bbc698$export$be92b6f5f03c0fe9 as Root, $6be4966fd9bbc698$export$6521433ed15a34db as Thumb};
|
|
//# sourceMappingURL=index.mjs.map
|