index.mjs 9.1 KB

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