index.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290
  1. var $9yYIj$babelruntimehelpersextends = require("@babel/runtime/helpers/extends");
  2. var $9yYIj$react = require("react");
  3. var $9yYIj$radixuiprimitive = require("@radix-ui/primitive");
  4. var $9yYIj$radixuireactcomposerefs = require("@radix-ui/react-compose-refs");
  5. var $9yYIj$radixuireactcontext = require("@radix-ui/react-context");
  6. var $9yYIj$radixuireactprimitive = require("@radix-ui/react-primitive");
  7. var $9yYIj$radixuireactrovingfocus = require("@radix-ui/react-roving-focus");
  8. var $9yYIj$radixuireactusecontrollablestate = require("@radix-ui/react-use-controllable-state");
  9. var $9yYIj$radixuireactdirection = require("@radix-ui/react-direction");
  10. var $9yYIj$radixuireactusesize = require("@radix-ui/react-use-size");
  11. var $9yYIj$radixuireactuseprevious = require("@radix-ui/react-use-previous");
  12. var $9yYIj$radixuireactpresence = require("@radix-ui/react-presence");
  13. function $parcel$export(e, n, v, s) {
  14. Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
  15. }
  16. function $parcel$interopDefault(a) {
  17. return a && a.__esModule ? a.default : a;
  18. }
  19. $parcel$export(module.exports, "createRadioGroupScope", () => $240483839a8a76fd$export$c547093f11b76da2);
  20. $parcel$export(module.exports, "RadioGroup", () => $240483839a8a76fd$export$a98f0dcb43a68a25);
  21. $parcel$export(module.exports, "RadioGroupItem", () => $240483839a8a76fd$export$9f866c100ef519e4);
  22. $parcel$export(module.exports, "RadioGroupIndicator", () => $240483839a8a76fd$export$5fb54c671a65c88);
  23. $parcel$export(module.exports, "Root", () => $240483839a8a76fd$export$be92b6f5f03c0fe9);
  24. $parcel$export(module.exports, "Item", () => $240483839a8a76fd$export$6d08773d2e66f8f2);
  25. $parcel$export(module.exports, "Indicator", () => $240483839a8a76fd$export$adb584737d712b70);
  26. /* -------------------------------------------------------------------------------------------------
  27. * Radio
  28. * -----------------------------------------------------------------------------------------------*/ const $ce74a64c62457efb$var$RADIO_NAME = 'Radio';
  29. const [$ce74a64c62457efb$var$createRadioContext, $ce74a64c62457efb$export$67d2296460f1b002] = $9yYIj$radixuireactcontext.createContextScope($ce74a64c62457efb$var$RADIO_NAME);
  30. const [$ce74a64c62457efb$var$RadioProvider, $ce74a64c62457efb$var$useRadioContext] = $ce74a64c62457efb$var$createRadioContext($ce74a64c62457efb$var$RADIO_NAME);
  31. const $ce74a64c62457efb$export$d7b12c4107be0d61 = /*#__PURE__*/ $9yYIj$react.forwardRef((props, forwardedRef)=>{
  32. const { __scopeRadio: __scopeRadio , name: name , checked: checked = false , required: required , disabled: disabled , value: value = 'on' , onCheck: onCheck , ...radioProps } = props;
  33. const [button, setButton] = $9yYIj$react.useState(null);
  34. const composedRefs = $9yYIj$radixuireactcomposerefs.useComposedRefs(forwardedRef, (node)=>setButton(node)
  35. );
  36. const hasConsumerStoppedPropagationRef = $9yYIj$react.useRef(false); // We set this to true by default so that events bubble to forms without JS (SSR)
  37. const isFormControl = button ? Boolean(button.closest('form')) : true;
  38. return /*#__PURE__*/ $9yYIj$react.createElement($ce74a64c62457efb$var$RadioProvider, {
  39. scope: __scopeRadio,
  40. checked: checked,
  41. disabled: disabled
  42. }, /*#__PURE__*/ $9yYIj$react.createElement($9yYIj$radixuireactprimitive.Primitive.button, ($parcel$interopDefault($9yYIj$babelruntimehelpersextends))({
  43. type: "button",
  44. role: "radio",
  45. "aria-checked": checked,
  46. "data-state": $ce74a64c62457efb$var$getState(checked),
  47. "data-disabled": disabled ? '' : undefined,
  48. disabled: disabled,
  49. value: value
  50. }, radioProps, {
  51. ref: composedRefs,
  52. onClick: $9yYIj$radixuiprimitive.composeEventHandlers(props.onClick, (event)=>{
  53. // radios cannot be unchecked so we only communicate a checked state
  54. if (!checked) onCheck === null || onCheck === void 0 || onCheck();
  55. if (isFormControl) {
  56. hasConsumerStoppedPropagationRef.current = event.isPropagationStopped(); // if radio is in a form, stop propagation from the button so that we only propagate
  57. // one click event (from the input). We propagate changes from an input so that native
  58. // form validation works and form events reflect radio updates.
  59. if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
  60. }
  61. })
  62. })), isFormControl && /*#__PURE__*/ $9yYIj$react.createElement($ce74a64c62457efb$var$BubbleInput, {
  63. control: button,
  64. bubbles: !hasConsumerStoppedPropagationRef.current,
  65. name: name,
  66. value: value,
  67. checked: checked,
  68. required: required,
  69. disabled: disabled // We transform because the input is absolutely positioned but we have
  70. ,
  71. style: {
  72. transform: 'translateX(-100%)'
  73. }
  74. }));
  75. });
  76. /*#__PURE__*/ Object.assign($ce74a64c62457efb$export$d7b12c4107be0d61, {
  77. displayName: $ce74a64c62457efb$var$RADIO_NAME
  78. });
  79. /* -------------------------------------------------------------------------------------------------
  80. * RadioIndicator
  81. * -----------------------------------------------------------------------------------------------*/ const $ce74a64c62457efb$var$INDICATOR_NAME = 'RadioIndicator';
  82. const $ce74a64c62457efb$export$d35a9ffa9a04f9e7 = /*#__PURE__*/ $9yYIj$react.forwardRef((props, forwardedRef)=>{
  83. const { __scopeRadio: __scopeRadio , forceMount: forceMount , ...indicatorProps } = props;
  84. const context = $ce74a64c62457efb$var$useRadioContext($ce74a64c62457efb$var$INDICATOR_NAME, __scopeRadio);
  85. return /*#__PURE__*/ $9yYIj$react.createElement($9yYIj$radixuireactpresence.Presence, {
  86. present: forceMount || context.checked
  87. }, /*#__PURE__*/ $9yYIj$react.createElement($9yYIj$radixuireactprimitive.Primitive.span, ($parcel$interopDefault($9yYIj$babelruntimehelpersextends))({
  88. "data-state": $ce74a64c62457efb$var$getState(context.checked),
  89. "data-disabled": context.disabled ? '' : undefined
  90. }, indicatorProps, {
  91. ref: forwardedRef
  92. })));
  93. });
  94. /*#__PURE__*/ Object.assign($ce74a64c62457efb$export$d35a9ffa9a04f9e7, {
  95. displayName: $ce74a64c62457efb$var$INDICATOR_NAME
  96. });
  97. /* ---------------------------------------------------------------------------------------------- */ const $ce74a64c62457efb$var$BubbleInput = (props)=>{
  98. const { control: control , checked: checked , bubbles: bubbles = true , ...inputProps } = props;
  99. const ref = $9yYIj$react.useRef(null);
  100. const prevChecked = $9yYIj$radixuireactuseprevious.usePrevious(checked);
  101. const controlSize = $9yYIj$radixuireactusesize.useSize(control); // Bubble checked change to parents (e.g form change event)
  102. $9yYIj$react.useEffect(()=>{
  103. const input = ref.current;
  104. const inputProto = window.HTMLInputElement.prototype;
  105. const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'checked');
  106. const setChecked = descriptor.set;
  107. if (prevChecked !== checked && setChecked) {
  108. const event = new Event('click', {
  109. bubbles: bubbles
  110. });
  111. setChecked.call(input, checked);
  112. input.dispatchEvent(event);
  113. }
  114. }, [
  115. prevChecked,
  116. checked,
  117. bubbles
  118. ]);
  119. return /*#__PURE__*/ $9yYIj$react.createElement("input", ($parcel$interopDefault($9yYIj$babelruntimehelpersextends))({
  120. type: "radio",
  121. "aria-hidden": true,
  122. defaultChecked: checked
  123. }, inputProps, {
  124. tabIndex: -1,
  125. ref: ref,
  126. style: {
  127. ...props.style,
  128. ...controlSize,
  129. position: 'absolute',
  130. pointerEvents: 'none',
  131. opacity: 0,
  132. margin: 0
  133. }
  134. }));
  135. };
  136. function $ce74a64c62457efb$var$getState(checked) {
  137. return checked ? 'checked' : 'unchecked';
  138. }
  139. const $240483839a8a76fd$var$ARROW_KEYS = [
  140. 'ArrowUp',
  141. 'ArrowDown',
  142. 'ArrowLeft',
  143. 'ArrowRight'
  144. ];
  145. /* -------------------------------------------------------------------------------------------------
  146. * RadioGroup
  147. * -----------------------------------------------------------------------------------------------*/ const $240483839a8a76fd$var$RADIO_GROUP_NAME = 'RadioGroup';
  148. const [$240483839a8a76fd$var$createRadioGroupContext, $240483839a8a76fd$export$c547093f11b76da2] = $9yYIj$radixuireactcontext.createContextScope($240483839a8a76fd$var$RADIO_GROUP_NAME, [
  149. $9yYIj$radixuireactrovingfocus.createRovingFocusGroupScope,
  150. $ce74a64c62457efb$export$67d2296460f1b002
  151. ]);
  152. const $240483839a8a76fd$var$useRovingFocusGroupScope = $9yYIj$radixuireactrovingfocus.createRovingFocusGroupScope();
  153. const $240483839a8a76fd$var$useRadioScope = $ce74a64c62457efb$export$67d2296460f1b002();
  154. const [$240483839a8a76fd$var$RadioGroupProvider, $240483839a8a76fd$var$useRadioGroupContext] = $240483839a8a76fd$var$createRadioGroupContext($240483839a8a76fd$var$RADIO_GROUP_NAME);
  155. const $240483839a8a76fd$export$a98f0dcb43a68a25 = /*#__PURE__*/ $9yYIj$react.forwardRef((props, forwardedRef)=>{
  156. const { __scopeRadioGroup: __scopeRadioGroup , name: name , defaultValue: defaultValue , value: valueProp , required: required = false , disabled: disabled = false , orientation: orientation , dir: dir , loop: loop = true , onValueChange: onValueChange , ...groupProps } = props;
  157. const rovingFocusGroupScope = $240483839a8a76fd$var$useRovingFocusGroupScope(__scopeRadioGroup);
  158. const direction = $9yYIj$radixuireactdirection.useDirection(dir);
  159. const [value, setValue] = $9yYIj$radixuireactusecontrollablestate.useControllableState({
  160. prop: valueProp,
  161. defaultProp: defaultValue,
  162. onChange: onValueChange
  163. });
  164. return /*#__PURE__*/ $9yYIj$react.createElement($240483839a8a76fd$var$RadioGroupProvider, {
  165. scope: __scopeRadioGroup,
  166. name: name,
  167. required: required,
  168. disabled: disabled,
  169. value: value,
  170. onValueChange: setValue
  171. }, /*#__PURE__*/ $9yYIj$react.createElement($9yYIj$radixuireactrovingfocus.Root, ($parcel$interopDefault($9yYIj$babelruntimehelpersextends))({
  172. asChild: true
  173. }, rovingFocusGroupScope, {
  174. orientation: orientation,
  175. dir: direction,
  176. loop: loop
  177. }), /*#__PURE__*/ $9yYIj$react.createElement($9yYIj$radixuireactprimitive.Primitive.div, ($parcel$interopDefault($9yYIj$babelruntimehelpersextends))({
  178. role: "radiogroup",
  179. "aria-required": required,
  180. "aria-orientation": orientation,
  181. "data-disabled": disabled ? '' : undefined,
  182. dir: direction
  183. }, groupProps, {
  184. ref: forwardedRef
  185. }))));
  186. });
  187. /*#__PURE__*/ Object.assign($240483839a8a76fd$export$a98f0dcb43a68a25, {
  188. displayName: $240483839a8a76fd$var$RADIO_GROUP_NAME
  189. });
  190. /* -------------------------------------------------------------------------------------------------
  191. * RadioGroupItem
  192. * -----------------------------------------------------------------------------------------------*/ const $240483839a8a76fd$var$ITEM_NAME = 'RadioGroupItem';
  193. const $240483839a8a76fd$export$9f866c100ef519e4 = /*#__PURE__*/ $9yYIj$react.forwardRef((props, forwardedRef)=>{
  194. const { __scopeRadioGroup: __scopeRadioGroup , disabled: disabled , ...itemProps } = props;
  195. const context = $240483839a8a76fd$var$useRadioGroupContext($240483839a8a76fd$var$ITEM_NAME, __scopeRadioGroup);
  196. const isDisabled = context.disabled || disabled;
  197. const rovingFocusGroupScope = $240483839a8a76fd$var$useRovingFocusGroupScope(__scopeRadioGroup);
  198. const radioScope = $240483839a8a76fd$var$useRadioScope(__scopeRadioGroup);
  199. const ref = $9yYIj$react.useRef(null);
  200. const composedRefs = $9yYIj$radixuireactcomposerefs.useComposedRefs(forwardedRef, ref);
  201. const checked = context.value === itemProps.value;
  202. const isArrowKeyPressedRef = $9yYIj$react.useRef(false);
  203. $9yYIj$react.useEffect(()=>{
  204. const handleKeyDown = (event)=>{
  205. if ($240483839a8a76fd$var$ARROW_KEYS.includes(event.key)) isArrowKeyPressedRef.current = true;
  206. };
  207. const handleKeyUp = ()=>isArrowKeyPressedRef.current = false
  208. ;
  209. document.addEventListener('keydown', handleKeyDown);
  210. document.addEventListener('keyup', handleKeyUp);
  211. return ()=>{
  212. document.removeEventListener('keydown', handleKeyDown);
  213. document.removeEventListener('keyup', handleKeyUp);
  214. };
  215. }, []);
  216. return /*#__PURE__*/ $9yYIj$react.createElement($9yYIj$radixuireactrovingfocus.Item, ($parcel$interopDefault($9yYIj$babelruntimehelpersextends))({
  217. asChild: true
  218. }, rovingFocusGroupScope, {
  219. focusable: !isDisabled,
  220. active: checked
  221. }), /*#__PURE__*/ $9yYIj$react.createElement($ce74a64c62457efb$export$d7b12c4107be0d61, ($parcel$interopDefault($9yYIj$babelruntimehelpersextends))({
  222. disabled: isDisabled,
  223. required: context.required,
  224. checked: checked
  225. }, radioScope, itemProps, {
  226. name: context.name,
  227. ref: composedRefs,
  228. onCheck: ()=>context.onValueChange(itemProps.value)
  229. ,
  230. onKeyDown: $9yYIj$radixuiprimitive.composeEventHandlers((event)=>{
  231. // According to WAI ARIA, radio groups don't activate items on enter keypress
  232. if (event.key === 'Enter') event.preventDefault();
  233. }),
  234. onFocus: $9yYIj$radixuiprimitive.composeEventHandlers(itemProps.onFocus, ()=>{
  235. var _ref$current;
  236. /**
  237. * Our `RovingFocusGroup` will focus the radio when navigating with arrow keys
  238. * and we need to "check" it in that case. We click it to "check" it (instead
  239. * of updating `context.value`) so that the radio change event fires.
  240. */ if (isArrowKeyPressedRef.current) (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.click();
  241. })
  242. })));
  243. });
  244. /*#__PURE__*/ Object.assign($240483839a8a76fd$export$9f866c100ef519e4, {
  245. displayName: $240483839a8a76fd$var$ITEM_NAME
  246. });
  247. /* -------------------------------------------------------------------------------------------------
  248. * RadioGroupIndicator
  249. * -----------------------------------------------------------------------------------------------*/ const $240483839a8a76fd$var$INDICATOR_NAME = 'RadioGroupIndicator';
  250. const $240483839a8a76fd$export$5fb54c671a65c88 = /*#__PURE__*/ $9yYIj$react.forwardRef((props, forwardedRef)=>{
  251. const { __scopeRadioGroup: __scopeRadioGroup , ...indicatorProps } = props;
  252. const radioScope = $240483839a8a76fd$var$useRadioScope(__scopeRadioGroup);
  253. return /*#__PURE__*/ $9yYIj$react.createElement($ce74a64c62457efb$export$d35a9ffa9a04f9e7, ($parcel$interopDefault($9yYIj$babelruntimehelpersextends))({}, radioScope, indicatorProps, {
  254. ref: forwardedRef
  255. }));
  256. });
  257. /*#__PURE__*/ Object.assign($240483839a8a76fd$export$5fb54c671a65c88, {
  258. displayName: $240483839a8a76fd$var$INDICATOR_NAME
  259. });
  260. /* ---------------------------------------------------------------------------------------------- */ const $240483839a8a76fd$export$be92b6f5f03c0fe9 = $240483839a8a76fd$export$a98f0dcb43a68a25;
  261. const $240483839a8a76fd$export$6d08773d2e66f8f2 = $240483839a8a76fd$export$9f866c100ef519e4;
  262. const $240483839a8a76fd$export$adb584737d712b70 = $240483839a8a76fd$export$5fb54c671a65c88;
  263. //# sourceMappingURL=index.js.map