index.mjs 8.7 KB

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