index.mjs 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. import $irPIl$babelruntimehelpersesmextends from "@babel/runtime/helpers/esm/extends";
  2. import {forwardRef as $irPIl$forwardRef, useState as $irPIl$useState, useRef as $irPIl$useRef, createElement as $irPIl$createElement, useEffect as $irPIl$useEffect} from "react";
  3. import {composeEventHandlers as $irPIl$composeEventHandlers} from "@radix-ui/primitive";
  4. import {useComposedRefs as $irPIl$useComposedRefs} from "@radix-ui/react-compose-refs";
  5. import {createContextScope as $irPIl$createContextScope} from "@radix-ui/react-context";
  6. import {useControllableState as $irPIl$useControllableState} from "@radix-ui/react-use-controllable-state";
  7. import {usePrevious as $irPIl$usePrevious} from "@radix-ui/react-use-previous";
  8. import {useSize as $irPIl$useSize} from "@radix-ui/react-use-size";
  9. import {Primitive as $irPIl$Primitive} from "@radix-ui/react-primitive";
  10. /* -------------------------------------------------------------------------------------------------
  11. * Switch
  12. * -----------------------------------------------------------------------------------------------*/ const $6be4966fd9bbc698$var$SWITCH_NAME = 'Switch';
  13. const [$6be4966fd9bbc698$var$createSwitchContext, $6be4966fd9bbc698$export$cf7f5f17f69cbd43] = $irPIl$createContextScope($6be4966fd9bbc698$var$SWITCH_NAME);
  14. const [$6be4966fd9bbc698$var$SwitchProvider, $6be4966fd9bbc698$var$useSwitchContext] = $6be4966fd9bbc698$var$createSwitchContext($6be4966fd9bbc698$var$SWITCH_NAME);
  15. const $6be4966fd9bbc698$export$b5d5cf8927ab7262 = /*#__PURE__*/ $irPIl$forwardRef((props, forwardedRef)=>{
  16. const { __scopeSwitch: __scopeSwitch , name: name , checked: checkedProp , defaultChecked: defaultChecked , required: required , disabled: disabled , value: value = 'on' , onCheckedChange: onCheckedChange , ...switchProps } = props;
  17. const [button, setButton] = $irPIl$useState(null);
  18. const composedRefs = $irPIl$useComposedRefs(forwardedRef, (node)=>setButton(node)
  19. );
  20. const hasConsumerStoppedPropagationRef = $irPIl$useRef(false); // We set this to true by default so that events bubble to forms without JS (SSR)
  21. const isFormControl = button ? Boolean(button.closest('form')) : true;
  22. const [checked = false, setChecked] = $irPIl$useControllableState({
  23. prop: checkedProp,
  24. defaultProp: defaultChecked,
  25. onChange: onCheckedChange
  26. });
  27. return /*#__PURE__*/ $irPIl$createElement($6be4966fd9bbc698$var$SwitchProvider, {
  28. scope: __scopeSwitch,
  29. checked: checked,
  30. disabled: disabled
  31. }, /*#__PURE__*/ $irPIl$createElement($irPIl$Primitive.button, $irPIl$babelruntimehelpersesmextends({
  32. type: "button",
  33. role: "switch",
  34. "aria-checked": checked,
  35. "aria-required": required,
  36. "data-state": $6be4966fd9bbc698$var$getState(checked),
  37. "data-disabled": disabled ? '' : undefined,
  38. disabled: disabled,
  39. value: value
  40. }, switchProps, {
  41. ref: composedRefs,
  42. onClick: $irPIl$composeEventHandlers(props.onClick, (event)=>{
  43. setChecked((prevChecked)=>!prevChecked
  44. );
  45. if (isFormControl) {
  46. hasConsumerStoppedPropagationRef.current = event.isPropagationStopped(); // if switch is in a form, stop propagation from the button so that we only propagate
  47. // one click event (from the input). We propagate changes from an input so that native
  48. // form validation works and form events reflect switch updates.
  49. if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
  50. }
  51. })
  52. })), isFormControl && /*#__PURE__*/ $irPIl$createElement($6be4966fd9bbc698$var$BubbleInput, {
  53. control: button,
  54. bubbles: !hasConsumerStoppedPropagationRef.current,
  55. name: name,
  56. value: value,
  57. checked: checked,
  58. required: required,
  59. disabled: disabled // We transform because the input is absolutely positioned but we have
  60. ,
  61. style: {
  62. transform: 'translateX(-100%)'
  63. }
  64. }));
  65. });
  66. /*#__PURE__*/ Object.assign($6be4966fd9bbc698$export$b5d5cf8927ab7262, {
  67. displayName: $6be4966fd9bbc698$var$SWITCH_NAME
  68. });
  69. /* -------------------------------------------------------------------------------------------------
  70. * SwitchThumb
  71. * -----------------------------------------------------------------------------------------------*/ const $6be4966fd9bbc698$var$THUMB_NAME = 'SwitchThumb';
  72. const $6be4966fd9bbc698$export$4d07bf653ea69106 = /*#__PURE__*/ $irPIl$forwardRef((props, forwardedRef)=>{
  73. const { __scopeSwitch: __scopeSwitch , ...thumbProps } = props;
  74. const context = $6be4966fd9bbc698$var$useSwitchContext($6be4966fd9bbc698$var$THUMB_NAME, __scopeSwitch);
  75. return /*#__PURE__*/ $irPIl$createElement($irPIl$Primitive.span, $irPIl$babelruntimehelpersesmextends({
  76. "data-state": $6be4966fd9bbc698$var$getState(context.checked),
  77. "data-disabled": context.disabled ? '' : undefined
  78. }, thumbProps, {
  79. ref: forwardedRef
  80. }));
  81. });
  82. /*#__PURE__*/ Object.assign($6be4966fd9bbc698$export$4d07bf653ea69106, {
  83. displayName: $6be4966fd9bbc698$var$THUMB_NAME
  84. });
  85. /* ---------------------------------------------------------------------------------------------- */ const $6be4966fd9bbc698$var$BubbleInput = (props)=>{
  86. const { control: control , checked: checked , bubbles: bubbles = true , ...inputProps } = props;
  87. const ref = $irPIl$useRef(null);
  88. const prevChecked = $irPIl$usePrevious(checked);
  89. const controlSize = $irPIl$useSize(control); // Bubble checked change to parents (e.g form change event)
  90. $irPIl$useEffect(()=>{
  91. const input = ref.current;
  92. const inputProto = window.HTMLInputElement.prototype;
  93. const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'checked');
  94. const setChecked = descriptor.set;
  95. if (prevChecked !== checked && setChecked) {
  96. const event = new Event('click', {
  97. bubbles: bubbles
  98. });
  99. setChecked.call(input, checked);
  100. input.dispatchEvent(event);
  101. }
  102. }, [
  103. prevChecked,
  104. checked,
  105. bubbles
  106. ]);
  107. return /*#__PURE__*/ $irPIl$createElement("input", $irPIl$babelruntimehelpersesmextends({
  108. type: "checkbox",
  109. "aria-hidden": true,
  110. defaultChecked: checked
  111. }, inputProps, {
  112. tabIndex: -1,
  113. ref: ref,
  114. style: {
  115. ...props.style,
  116. ...controlSize,
  117. position: 'absolute',
  118. pointerEvents: 'none',
  119. opacity: 0,
  120. margin: 0
  121. }
  122. }));
  123. };
  124. function $6be4966fd9bbc698$var$getState(checked) {
  125. return checked ? 'checked' : 'unchecked';
  126. }
  127. const $6be4966fd9bbc698$export$be92b6f5f03c0fe9 = $6be4966fd9bbc698$export$b5d5cf8927ab7262;
  128. const $6be4966fd9bbc698$export$6521433ed15a34db = $6be4966fd9bbc698$export$4d07bf653ea69106;
  129. 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};
  130. //# sourceMappingURL=index.mjs.map