index.js 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. var $dKOox$babelruntimehelpersextends = require("@babel/runtime/helpers/extends");
  2. var $dKOox$react = require("react");
  3. var $dKOox$radixuireactcomposerefs = require("@radix-ui/react-compose-refs");
  4. var $dKOox$radixuireactcontext = require("@radix-ui/react-context");
  5. var $dKOox$radixuiprimitive = require("@radix-ui/primitive");
  6. var $dKOox$radixuireactusecontrollablestate = require("@radix-ui/react-use-controllable-state");
  7. var $dKOox$radixuireactuseprevious = require("@radix-ui/react-use-previous");
  8. var $dKOox$radixuireactusesize = require("@radix-ui/react-use-size");
  9. var $dKOox$radixuireactpresence = require("@radix-ui/react-presence");
  10. var $dKOox$radixuireactprimitive = require("@radix-ui/react-primitive");
  11. function $parcel$export(e, n, v, s) {
  12. Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
  13. }
  14. function $parcel$interopDefault(a) {
  15. return a && a.__esModule ? a.default : a;
  16. }
  17. $parcel$export(module.exports, "createCheckboxScope", () => $a17f2c9fbf2ccf8c$export$b566c4ff5488ea01);
  18. $parcel$export(module.exports, "Checkbox", () => $a17f2c9fbf2ccf8c$export$48513f6b9f8ce62d);
  19. $parcel$export(module.exports, "CheckboxIndicator", () => $a17f2c9fbf2ccf8c$export$59aad738f51d1c05);
  20. $parcel$export(module.exports, "Root", () => $a17f2c9fbf2ccf8c$export$be92b6f5f03c0fe9);
  21. $parcel$export(module.exports, "Indicator", () => $a17f2c9fbf2ccf8c$export$adb584737d712b70);
  22. /* -------------------------------------------------------------------------------------------------
  23. * Checkbox
  24. * -----------------------------------------------------------------------------------------------*/ const $a17f2c9fbf2ccf8c$var$CHECKBOX_NAME = 'Checkbox';
  25. const [$a17f2c9fbf2ccf8c$var$createCheckboxContext, $a17f2c9fbf2ccf8c$export$b566c4ff5488ea01] = $dKOox$radixuireactcontext.createContextScope($a17f2c9fbf2ccf8c$var$CHECKBOX_NAME);
  26. const [$a17f2c9fbf2ccf8c$var$CheckboxProvider, $a17f2c9fbf2ccf8c$var$useCheckboxContext] = $a17f2c9fbf2ccf8c$var$createCheckboxContext($a17f2c9fbf2ccf8c$var$CHECKBOX_NAME);
  27. const $a17f2c9fbf2ccf8c$export$48513f6b9f8ce62d = /*#__PURE__*/ $dKOox$react.forwardRef((props, forwardedRef)=>{
  28. const { __scopeCheckbox: __scopeCheckbox , name: name , checked: checkedProp , defaultChecked: defaultChecked , required: required , disabled: disabled , value: value = 'on' , onCheckedChange: onCheckedChange , ...checkboxProps } = props;
  29. const [button, setButton] = $dKOox$react.useState(null);
  30. const composedRefs = $dKOox$radixuireactcomposerefs.useComposedRefs(forwardedRef, (node)=>setButton(node)
  31. );
  32. const hasConsumerStoppedPropagationRef = $dKOox$react.useRef(false); // We set this to true by default so that events bubble to forms without JS (SSR)
  33. const isFormControl = button ? Boolean(button.closest('form')) : true;
  34. const [checked = false, setChecked] = $dKOox$radixuireactusecontrollablestate.useControllableState({
  35. prop: checkedProp,
  36. defaultProp: defaultChecked,
  37. onChange: onCheckedChange
  38. });
  39. const initialCheckedStateRef = $dKOox$react.useRef(checked);
  40. $dKOox$react.useEffect(()=>{
  41. const form = button === null || button === void 0 ? void 0 : button.form;
  42. if (form) {
  43. const reset = ()=>setChecked(initialCheckedStateRef.current)
  44. ;
  45. form.addEventListener('reset', reset);
  46. return ()=>form.removeEventListener('reset', reset)
  47. ;
  48. }
  49. }, [
  50. button,
  51. setChecked
  52. ]);
  53. return /*#__PURE__*/ $dKOox$react.createElement($a17f2c9fbf2ccf8c$var$CheckboxProvider, {
  54. scope: __scopeCheckbox,
  55. state: checked,
  56. disabled: disabled
  57. }, /*#__PURE__*/ $dKOox$react.createElement($dKOox$radixuireactprimitive.Primitive.button, ($parcel$interopDefault($dKOox$babelruntimehelpersextends))({
  58. type: "button",
  59. role: "checkbox",
  60. "aria-checked": $a17f2c9fbf2ccf8c$var$isIndeterminate(checked) ? 'mixed' : checked,
  61. "aria-required": required,
  62. "data-state": $a17f2c9fbf2ccf8c$var$getState(checked),
  63. "data-disabled": disabled ? '' : undefined,
  64. disabled: disabled,
  65. value: value
  66. }, checkboxProps, {
  67. ref: composedRefs,
  68. onKeyDown: $dKOox$radixuiprimitive.composeEventHandlers(props.onKeyDown, (event)=>{
  69. // According to WAI ARIA, Checkboxes don't activate on enter keypress
  70. if (event.key === 'Enter') event.preventDefault();
  71. }),
  72. onClick: $dKOox$radixuiprimitive.composeEventHandlers(props.onClick, (event)=>{
  73. setChecked((prevChecked)=>$a17f2c9fbf2ccf8c$var$isIndeterminate(prevChecked) ? true : !prevChecked
  74. );
  75. if (isFormControl) {
  76. hasConsumerStoppedPropagationRef.current = event.isPropagationStopped(); // if checkbox is in a form, stop propagation from the button so that we only propagate
  77. // one click event (from the input). We propagate changes from an input so that native
  78. // form validation works and form events reflect checkbox updates.
  79. if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
  80. }
  81. })
  82. })), isFormControl && /*#__PURE__*/ $dKOox$react.createElement($a17f2c9fbf2ccf8c$var$BubbleInput, {
  83. control: button,
  84. bubbles: !hasConsumerStoppedPropagationRef.current,
  85. name: name,
  86. value: value,
  87. checked: checked,
  88. required: required,
  89. disabled: disabled // We transform because the input is absolutely positioned but we have
  90. ,
  91. style: {
  92. transform: 'translateX(-100%)'
  93. }
  94. }));
  95. });
  96. /*#__PURE__*/ Object.assign($a17f2c9fbf2ccf8c$export$48513f6b9f8ce62d, {
  97. displayName: $a17f2c9fbf2ccf8c$var$CHECKBOX_NAME
  98. });
  99. /* -------------------------------------------------------------------------------------------------
  100. * CheckboxIndicator
  101. * -----------------------------------------------------------------------------------------------*/ const $a17f2c9fbf2ccf8c$var$INDICATOR_NAME = 'CheckboxIndicator';
  102. const $a17f2c9fbf2ccf8c$export$59aad738f51d1c05 = /*#__PURE__*/ $dKOox$react.forwardRef((props, forwardedRef)=>{
  103. const { __scopeCheckbox: __scopeCheckbox , forceMount: forceMount , ...indicatorProps } = props;
  104. const context = $a17f2c9fbf2ccf8c$var$useCheckboxContext($a17f2c9fbf2ccf8c$var$INDICATOR_NAME, __scopeCheckbox);
  105. return /*#__PURE__*/ $dKOox$react.createElement($dKOox$radixuireactpresence.Presence, {
  106. present: forceMount || $a17f2c9fbf2ccf8c$var$isIndeterminate(context.state) || context.state === true
  107. }, /*#__PURE__*/ $dKOox$react.createElement($dKOox$radixuireactprimitive.Primitive.span, ($parcel$interopDefault($dKOox$babelruntimehelpersextends))({
  108. "data-state": $a17f2c9fbf2ccf8c$var$getState(context.state),
  109. "data-disabled": context.disabled ? '' : undefined
  110. }, indicatorProps, {
  111. ref: forwardedRef,
  112. style: {
  113. pointerEvents: 'none',
  114. ...props.style
  115. }
  116. })));
  117. });
  118. /*#__PURE__*/ Object.assign($a17f2c9fbf2ccf8c$export$59aad738f51d1c05, {
  119. displayName: $a17f2c9fbf2ccf8c$var$INDICATOR_NAME
  120. });
  121. /* ---------------------------------------------------------------------------------------------- */ const $a17f2c9fbf2ccf8c$var$BubbleInput = (props)=>{
  122. const { control: control , checked: checked , bubbles: bubbles = true , ...inputProps } = props;
  123. const ref = $dKOox$react.useRef(null);
  124. const prevChecked = $dKOox$radixuireactuseprevious.usePrevious(checked);
  125. const controlSize = $dKOox$radixuireactusesize.useSize(control); // Bubble checked change to parents (e.g form change event)
  126. $dKOox$react.useEffect(()=>{
  127. const input = ref.current;
  128. const inputProto = window.HTMLInputElement.prototype;
  129. const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'checked');
  130. const setChecked = descriptor.set;
  131. if (prevChecked !== checked && setChecked) {
  132. const event = new Event('click', {
  133. bubbles: bubbles
  134. });
  135. input.indeterminate = $a17f2c9fbf2ccf8c$var$isIndeterminate(checked);
  136. setChecked.call(input, $a17f2c9fbf2ccf8c$var$isIndeterminate(checked) ? false : checked);
  137. input.dispatchEvent(event);
  138. }
  139. }, [
  140. prevChecked,
  141. checked,
  142. bubbles
  143. ]);
  144. return /*#__PURE__*/ $dKOox$react.createElement("input", ($parcel$interopDefault($dKOox$babelruntimehelpersextends))({
  145. type: "checkbox",
  146. "aria-hidden": true,
  147. defaultChecked: $a17f2c9fbf2ccf8c$var$isIndeterminate(checked) ? false : checked
  148. }, inputProps, {
  149. tabIndex: -1,
  150. ref: ref,
  151. style: {
  152. ...props.style,
  153. ...controlSize,
  154. position: 'absolute',
  155. pointerEvents: 'none',
  156. opacity: 0,
  157. margin: 0
  158. }
  159. }));
  160. };
  161. function $a17f2c9fbf2ccf8c$var$isIndeterminate(checked) {
  162. return checked === 'indeterminate';
  163. }
  164. function $a17f2c9fbf2ccf8c$var$getState(checked) {
  165. return $a17f2c9fbf2ccf8c$var$isIndeterminate(checked) ? 'indeterminate' : checked ? 'checked' : 'unchecked';
  166. }
  167. const $a17f2c9fbf2ccf8c$export$be92b6f5f03c0fe9 = $a17f2c9fbf2ccf8c$export$48513f6b9f8ce62d;
  168. const $a17f2c9fbf2ccf8c$export$adb584737d712b70 = $a17f2c9fbf2ccf8c$export$59aad738f51d1c05;
  169. //# sourceMappingURL=index.js.map