index.js 7.6 KB

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