index.js 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. var $f0mF1$babelruntimehelpersextends = require("@babel/runtime/helpers/extends");
  2. var $f0mF1$react = require("react");
  3. var $f0mF1$radixuiprimitive = require("@radix-ui/primitive");
  4. var $f0mF1$radixuireactcontext = require("@radix-ui/react-context");
  5. var $f0mF1$radixuireactusecontrollablestate = require("@radix-ui/react-use-controllable-state");
  6. var $f0mF1$radixuireactuselayouteffect = require("@radix-ui/react-use-layout-effect");
  7. var $f0mF1$radixuireactcomposerefs = require("@radix-ui/react-compose-refs");
  8. var $f0mF1$radixuireactprimitive = require("@radix-ui/react-primitive");
  9. var $f0mF1$radixuireactpresence = require("@radix-ui/react-presence");
  10. var $f0mF1$radixuireactid = require("@radix-ui/react-id");
  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, "createCollapsibleScope", () => $e729681ae85df948$export$952b32dcbe73087a);
  18. $parcel$export(module.exports, "Collapsible", () => $e729681ae85df948$export$6eb0f7ddcda6131f);
  19. $parcel$export(module.exports, "CollapsibleTrigger", () => $e729681ae85df948$export$c135dce7b15bbbdc);
  20. $parcel$export(module.exports, "CollapsibleContent", () => $e729681ae85df948$export$aadde00976f34151);
  21. $parcel$export(module.exports, "Root", () => $e729681ae85df948$export$be92b6f5f03c0fe9);
  22. $parcel$export(module.exports, "Trigger", () => $e729681ae85df948$export$41fb9f06171c75f4);
  23. $parcel$export(module.exports, "Content", () => $e729681ae85df948$export$7c6e2c02157bb7d2);
  24. /* -------------------------------------------------------------------------------------------------
  25. * Collapsible
  26. * -----------------------------------------------------------------------------------------------*/ const $e729681ae85df948$var$COLLAPSIBLE_NAME = 'Collapsible';
  27. const [$e729681ae85df948$var$createCollapsibleContext, $e729681ae85df948$export$952b32dcbe73087a] = $f0mF1$radixuireactcontext.createContextScope($e729681ae85df948$var$COLLAPSIBLE_NAME);
  28. const [$e729681ae85df948$var$CollapsibleProvider, $e729681ae85df948$var$useCollapsibleContext] = $e729681ae85df948$var$createCollapsibleContext($e729681ae85df948$var$COLLAPSIBLE_NAME);
  29. const $e729681ae85df948$export$6eb0f7ddcda6131f = /*#__PURE__*/ $f0mF1$react.forwardRef((props, forwardedRef)=>{
  30. const { __scopeCollapsible: __scopeCollapsible , open: openProp , defaultOpen: defaultOpen , disabled: disabled , onOpenChange: onOpenChange , ...collapsibleProps } = props;
  31. const [open = false, setOpen] = $f0mF1$radixuireactusecontrollablestate.useControllableState({
  32. prop: openProp,
  33. defaultProp: defaultOpen,
  34. onChange: onOpenChange
  35. });
  36. return /*#__PURE__*/ $f0mF1$react.createElement($e729681ae85df948$var$CollapsibleProvider, {
  37. scope: __scopeCollapsible,
  38. disabled: disabled,
  39. contentId: $f0mF1$radixuireactid.useId(),
  40. open: open,
  41. onOpenToggle: $f0mF1$react.useCallback(()=>setOpen((prevOpen)=>!prevOpen
  42. )
  43. , [
  44. setOpen
  45. ])
  46. }, /*#__PURE__*/ $f0mF1$react.createElement($f0mF1$radixuireactprimitive.Primitive.div, ($parcel$interopDefault($f0mF1$babelruntimehelpersextends))({
  47. "data-state": $e729681ae85df948$var$getState(open),
  48. "data-disabled": disabled ? '' : undefined
  49. }, collapsibleProps, {
  50. ref: forwardedRef
  51. })));
  52. });
  53. /*#__PURE__*/ Object.assign($e729681ae85df948$export$6eb0f7ddcda6131f, {
  54. displayName: $e729681ae85df948$var$COLLAPSIBLE_NAME
  55. });
  56. /* -------------------------------------------------------------------------------------------------
  57. * CollapsibleTrigger
  58. * -----------------------------------------------------------------------------------------------*/ const $e729681ae85df948$var$TRIGGER_NAME = 'CollapsibleTrigger';
  59. const $e729681ae85df948$export$c135dce7b15bbbdc = /*#__PURE__*/ $f0mF1$react.forwardRef((props, forwardedRef)=>{
  60. const { __scopeCollapsible: __scopeCollapsible , ...triggerProps } = props;
  61. const context = $e729681ae85df948$var$useCollapsibleContext($e729681ae85df948$var$TRIGGER_NAME, __scopeCollapsible);
  62. return /*#__PURE__*/ $f0mF1$react.createElement($f0mF1$radixuireactprimitive.Primitive.button, ($parcel$interopDefault($f0mF1$babelruntimehelpersextends))({
  63. type: "button",
  64. "aria-controls": context.contentId,
  65. "aria-expanded": context.open || false,
  66. "data-state": $e729681ae85df948$var$getState(context.open),
  67. "data-disabled": context.disabled ? '' : undefined,
  68. disabled: context.disabled
  69. }, triggerProps, {
  70. ref: forwardedRef,
  71. onClick: $f0mF1$radixuiprimitive.composeEventHandlers(props.onClick, context.onOpenToggle)
  72. }));
  73. });
  74. /*#__PURE__*/ Object.assign($e729681ae85df948$export$c135dce7b15bbbdc, {
  75. displayName: $e729681ae85df948$var$TRIGGER_NAME
  76. });
  77. /* -------------------------------------------------------------------------------------------------
  78. * CollapsibleContent
  79. * -----------------------------------------------------------------------------------------------*/ const $e729681ae85df948$var$CONTENT_NAME = 'CollapsibleContent';
  80. const $e729681ae85df948$export$aadde00976f34151 = /*#__PURE__*/ $f0mF1$react.forwardRef((props, forwardedRef)=>{
  81. const { forceMount: forceMount , ...contentProps } = props;
  82. const context = $e729681ae85df948$var$useCollapsibleContext($e729681ae85df948$var$CONTENT_NAME, props.__scopeCollapsible);
  83. return /*#__PURE__*/ $f0mF1$react.createElement($f0mF1$radixuireactpresence.Presence, {
  84. present: forceMount || context.open
  85. }, ({ present: present })=>/*#__PURE__*/ $f0mF1$react.createElement($e729681ae85df948$var$CollapsibleContentImpl, ($parcel$interopDefault($f0mF1$babelruntimehelpersextends))({}, contentProps, {
  86. ref: forwardedRef,
  87. present: present
  88. }))
  89. );
  90. });
  91. /*#__PURE__*/ Object.assign($e729681ae85df948$export$aadde00976f34151, {
  92. displayName: $e729681ae85df948$var$CONTENT_NAME
  93. });
  94. /* -----------------------------------------------------------------------------------------------*/ const $e729681ae85df948$var$CollapsibleContentImpl = /*#__PURE__*/ $f0mF1$react.forwardRef((props, forwardedRef)=>{
  95. const { __scopeCollapsible: __scopeCollapsible , present: present , children: children , ...contentProps } = props;
  96. const context = $e729681ae85df948$var$useCollapsibleContext($e729681ae85df948$var$CONTENT_NAME, __scopeCollapsible);
  97. const [isPresent, setIsPresent] = $f0mF1$react.useState(present);
  98. const ref = $f0mF1$react.useRef(null);
  99. const composedRefs = $f0mF1$radixuireactcomposerefs.useComposedRefs(forwardedRef, ref);
  100. const heightRef = $f0mF1$react.useRef(0);
  101. const height = heightRef.current;
  102. const widthRef = $f0mF1$react.useRef(0);
  103. const width = widthRef.current; // when opening we want it to immediately open to retrieve dimensions
  104. // when closing we delay `present` to retrieve dimensions before closing
  105. const isOpen = context.open || isPresent;
  106. const isMountAnimationPreventedRef = $f0mF1$react.useRef(isOpen);
  107. const originalStylesRef = $f0mF1$react.useRef();
  108. $f0mF1$react.useEffect(()=>{
  109. const rAF = requestAnimationFrame(()=>isMountAnimationPreventedRef.current = false
  110. );
  111. return ()=>cancelAnimationFrame(rAF)
  112. ;
  113. }, []);
  114. $f0mF1$radixuireactuselayouteffect.useLayoutEffect(()=>{
  115. const node = ref.current;
  116. if (node) {
  117. originalStylesRef.current = originalStylesRef.current || {
  118. transitionDuration: node.style.transitionDuration,
  119. animationName: node.style.animationName
  120. }; // block any animations/transitions so the element renders at its full dimensions
  121. node.style.transitionDuration = '0s';
  122. node.style.animationName = 'none'; // get width and height from full dimensions
  123. const rect = node.getBoundingClientRect();
  124. heightRef.current = rect.height;
  125. widthRef.current = rect.width; // kick off any animations/transitions that were originally set up if it isn't the initial mount
  126. if (!isMountAnimationPreventedRef.current) {
  127. node.style.transitionDuration = originalStylesRef.current.transitionDuration;
  128. node.style.animationName = originalStylesRef.current.animationName;
  129. }
  130. setIsPresent(present);
  131. }
  132. /**
  133. * depends on `context.open` because it will change to `false`
  134. * when a close is triggered but `present` will be `false` on
  135. * animation end (so when close finishes). This allows us to
  136. * retrieve the dimensions *before* closing.
  137. */ }, [
  138. context.open,
  139. present
  140. ]);
  141. return /*#__PURE__*/ $f0mF1$react.createElement($f0mF1$radixuireactprimitive.Primitive.div, ($parcel$interopDefault($f0mF1$babelruntimehelpersextends))({
  142. "data-state": $e729681ae85df948$var$getState(context.open),
  143. "data-disabled": context.disabled ? '' : undefined,
  144. id: context.contentId,
  145. hidden: !isOpen
  146. }, contentProps, {
  147. ref: composedRefs,
  148. style: {
  149. [`--radix-collapsible-content-height`]: height ? `${height}px` : undefined,
  150. [`--radix-collapsible-content-width`]: width ? `${width}px` : undefined,
  151. ...props.style
  152. }
  153. }), isOpen && children);
  154. });
  155. /* -----------------------------------------------------------------------------------------------*/ function $e729681ae85df948$var$getState(open) {
  156. return open ? 'open' : 'closed';
  157. }
  158. const $e729681ae85df948$export$be92b6f5f03c0fe9 = $e729681ae85df948$export$6eb0f7ddcda6131f;
  159. const $e729681ae85df948$export$41fb9f06171c75f4 = $e729681ae85df948$export$c135dce7b15bbbdc;
  160. const $e729681ae85df948$export$7c6e2c02157bb7d2 = $e729681ae85df948$export$aadde00976f34151;
  161. //# sourceMappingURL=index.js.map