@chayns-components/core 5.0.0-beta.997 → 5.0.0

package/lib/cjs/components/dropdown-body-wrapper/DropdownBodyWrapper.js

@@ -0,0 +1,151 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _DropdownBodyWrapper = require("./DropdownBodyWrapper.styles");
+var _reactDom = require("react-dom");
+var _dropdown = require("../../types/dropdown");
+var _DelayedDropdownContent = _interopRequireDefault(require("./delayed-dropdown-content/DelayedDropdownContent"));
+var _dropdown2 = require("../../hooks/dropdown");
+var _container = require("../../hooks/container");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const DropdownBodyWrapper = ({
+  anchorElement,
+  bodyWidth,
+  children,
+  container: containerProp,
+  contentHeight = 0,
+  direction = _dropdown.DropdownDirection.BOTTOM_RIGHT,
+  maxHeight = 300,
+  minBodyWidth = 0,
+  onClose,
+  onOutsideClick,
+  onMeasure,
+  shouldShowDropdown
+}) => {
+  const isInChaynsWalletRef = (0, _react.useRef)(false);
+  const [measuredContentHeight, setMeasuredContentHeight] = (0, _react.useState)(0);
+  const [measuredContentWidth, setMeasuredContentWidth] = (0, _react.useState)(0);
+  const [portal, setPortal] = (0, _react.useState)();
+  const ref = (0, _react.useRef)(null);
+  const shouldPreventClickRef = (0, _react.useRef)(false);
+  const touchTimeoutRef = (0, _react.useRef)(undefined);
+  const container = (0, _container.useContainer)({
+    anchorElement,
+    container: containerProp
+  });
+  const {
+    transform,
+    width,
+    coordinates
+  } = (0, _dropdown2.useDropdown)({
+    anchorElement,
+    container,
+    contentHeight,
+    contentWidth: bodyWidth ?? measuredContentWidth,
+    direction,
+    shouldShowDropdown
+  });
+  const handleClose = (0, _react.useCallback)(() => {
+    if (typeof onClose === 'function') {
+      onClose();
+    }
+  }, [onClose]);
+
+  /**
+   * This function closes the body
+   */
+  const handleClick = (0, _react.useCallback)(event => {
+    if (ref.current && shouldShowDropdown && !anchorElement.contains(event.target) && !ref.current.contains(event.target)) {
+      event.preventDefault();
+      event.stopPropagation();
+      const shouldPreventCloseOnClick = (onOutsideClick === null || onOutsideClick === void 0 ? void 0 : onOutsideClick()) ?? false;
+      if (!shouldPreventClickRef.current && !shouldPreventCloseOnClick) {
+        handleClose();
+      }
+    }
+    shouldPreventClickRef.current = false;
+  }, [anchorElement, handleClose, onOutsideClick, shouldShowDropdown]);
+  const handleContentMeasure = (0, _react.useCallback)(measurements => {
+    // Measurements are only needed if the content is shown in the chayns wallet. To prevent
+    // unnecessary renders, we only set the height if the content is shown in the wallet.
+    if (isInChaynsWalletRef.current) {
+      setMeasuredContentHeight(measurements.height);
+    }
+    setMeasuredContentWidth(measurements.width);
+    if (typeof onMeasure === 'function') {
+      onMeasure(measurements);
+    }
+  }, [onMeasure]);
+  const handleTouchEnd = (0, _react.useCallback)(() => {
+    clearTimeout(touchTimeoutRef.current);
+  }, []);
+  const handleTouchStart = (0, _react.useCallback)(() => {
+    touchTimeoutRef.current = window.setTimeout(() => {
+      shouldPreventClickRef.current = true;
+    }, 500);
+  }, []);
+
+  /**
+   * This hook listens for clicks
+   */
+  (0, _dropdown2.useDropdownListener)({
+    onClick: handleClick,
+    onClose: handleClose,
+    onTouchEnd: handleTouchEnd,
+    onTouchStart: handleTouchStart
+  });
+  (0, _react.useEffect)(() => {
+    const isBottomDirection = [_dropdown.DropdownDirection.BOTTOM, _dropdown.DropdownDirection.BOTTOM_LEFT, _dropdown.DropdownDirection.BOTTOM_RIGHT].includes(direction);
+    const reservationWrapperElement = anchorElement.closest(_container.ContainerAnchor.RESERVATION_WRAPPER);
+    isInChaynsWalletRef.current = !!(reservationWrapperElement && reservationWrapperElement.contains(anchorElement)) || true;
+
+    // This effect checks if additional space is needed to show dropdown content in chayns cards.
+    if (isBottomDirection && isInChaynsWalletRef.current && measuredContentHeight > 0 && reservationWrapperElement && shouldShowDropdown) {
+      const availableHeight = window.innerHeight - anchorElement.getBoundingClientRect().bottom;
+
+      // If the content height is greater than the available height, we need to add additional space.
+      // This is to ensure that the dropdown content is fully visible. The 16 pixels are a buffer for shadows.
+      const additionalNeededSpace = measuredContentHeight + 16 - availableHeight;
+      if (additionalNeededSpace > 0) {
+        // Add margin bottom to the reservation wrapper to ensure the dropdown content is fully visible.
+        reservationWrapperElement.style.marginBottom = `${additionalNeededSpace}px`;
+      } else {
+        // Reset the margin bottom if no additional space is needed.
+        reservationWrapperElement.style.marginBottom = '0px';
+      }
+    }
+    if (isInChaynsWalletRef.current && reservationWrapperElement && !shouldShowDropdown) {
+      // Reset the margin bottom when the dropdown is closed.
+      reservationWrapperElement.style.marginBottom = '0px';
+    }
+    return () => {
+      if (reservationWrapperElement) {
+        reservationWrapperElement.style.marginBottom = '0px';
+      }
+    };
+  }, [anchorElement, direction, measuredContentHeight, shouldShowDropdown]);
+  (0, _react.useEffect)(() => {
+    if (!container) return;
+    setPortal(() => /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react.default.createElement(_DelayedDropdownContent.default, {
+      coordinates: coordinates,
+      onMeasure: handleContentMeasure,
+      shouldShowContent: shouldShowDropdown,
+      transform: transform
+    }, /*#__PURE__*/_react.default.createElement(_DropdownBodyWrapper.StyledDropdownBodyWrapperContent, {
+      $width: width,
+      $minWidth: minBodyWidth,
+      $maxHeight: maxHeight,
+      $direction: direction,
+      ref: ref
+    }, children)), container));
+  }, [children, container, coordinates, direction, handleContentMeasure, maxHeight, minBodyWidth, shouldShowDropdown, transform, width]);
+  return /*#__PURE__*/_react.default.createElement(_DropdownBodyWrapper.StyledDropdownBodyWrapper, null, portal);
+};
+DropdownBodyWrapper.displayName = 'DropdownBodyWrapper';
+var _default = exports.default = DropdownBodyWrapper;
+//# sourceMappingURL=DropdownBodyWrapper.js.map

package/lib/cjs/components/dropdown-body-wrapper/DropdownBodyWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownBodyWrapper.js","names":["_react","_interopRequireWildcard","require","_DropdownBodyWrapper","_reactDom","_dropdown","_DelayedDropdownContent","_interopRequireDefault","_dropdown2","_container","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DropdownBodyWrapper","anchorElement","bodyWidth","children","container","containerProp","contentHeight","direction","DropdownDirection","BOTTOM_RIGHT","maxHeight","minBodyWidth","onClose","onOutsideClick","onMeasure","shouldShowDropdown","isInChaynsWalletRef","useRef","measuredContentHeight","setMeasuredContentHeight","useState","measuredContentWidth","setMeasuredContentWidth","portal","setPortal","ref","shouldPreventClickRef","touchTimeoutRef","undefined","useContainer","transform","width","coordinates","useDropdown","contentWidth","handleClose","useCallback","handleClick","event","current","contains","target","preventDefault","stopPropagation","shouldPreventCloseOnClick","handleContentMeasure","measurements","height","handleTouchEnd","clearTimeout","handleTouchStart","window","setTimeout","useDropdownListener","onClick","onTouchEnd","onTouchStart","useEffect","isBottomDirection","BOTTOM","BOTTOM_LEFT","includes","reservationWrapperElement","closest","ContainerAnchor","RESERVATION_WRAPPER","availableHeight","innerHeight","getBoundingClientRect","bottom","additionalNeededSpace","style","marginBottom","createPortal","createElement","shouldShowContent","StyledDropdownBodyWrapperContent","$width","$minWidth","$maxHeight","$direction","StyledDropdownBodyWrapper","displayName","_default","exports"],"sources":["../../../../src/components/dropdown-body-wrapper/DropdownBodyWrapper.tsx"],"sourcesContent":["import React, { FC, ReactNode, ReactPortal, useCallback, useEffect, useRef, useState } from 'react';\nimport {\n    StyledDropdownBodyWrapper,\n    StyledDropdownBodyWrapperContent,\n} from './DropdownBodyWrapper.styles';\nimport { createPortal } from 'react-dom';\nimport { DropdownDirection, DropdownMeasurements } from '../../types/dropdown';\nimport DelayedDropdownContent, {\n    DelayedDropdownContentProps,\n} from './delayed-dropdown-content/DelayedDropdownContent';\nimport { useDropdown, useDropdownListener } from '../../hooks/dropdown';\nimport { ContainerAnchor, useContainer } from '../../hooks/container';\n\ninterface DropdownBodyWrapperProps {\n    /**\n     * The anchor element of the dropdown.\n     */\n    anchorElement: Element;\n    /**\n     * The width of the Body.\n     */\n    bodyWidth?: number;\n    /**\n     * The content of the dropdown body.\n     */\n    children: ReactNode;\n    /**\n     * The element where the content should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The height of the content\n     */\n    contentHeight?: number;\n    /**\n     * The direction of the dropdown.\n     */\n    direction?: DropdownDirection;\n    /**\n     * The max height of the dropdown.\n     */\n    maxHeight?: number;\n    /**\n     * The minimum width of the body.\n     */\n    minBodyWidth?: number;\n    /**\n     * Function to be executed when the body is closed.\n     */\n    onClose?: VoidFunction;\n    /**\n     * Function to be executed when the user clicks outside the dropdown.\n     * If the function returns `true`, the dropdown will not be closed.\n     */\n    onOutsideClick?: () => boolean | void;\n    /**\n     * Function to be executed when the content is measured.\n     */\n    onMeasure?: DelayedDropdownContentProps['onMeasure'];\n    /**\n     * Whether the dropdown should be visible.\n     */\n    shouldShowDropdown: boolean;\n}\n\nconst DropdownBodyWrapper: FC<DropdownBodyWrapperProps> = ({\n    anchorElement,\n    bodyWidth,\n    children,\n    container: containerProp,\n    contentHeight = 0,\n    direction = DropdownDirection.BOTTOM_RIGHT,\n    maxHeight = 300,\n    minBodyWidth = 0,\n    onClose,\n    onOutsideClick,\n    onMeasure,\n    shouldShowDropdown,\n}) => {\n    const isInChaynsWalletRef = useRef(false);\n\n    const [measuredContentHeight, setMeasuredContentHeight] = useState<number>(0);\n    const [measuredContentWidth, setMeasuredContentWidth] = useState<number>(0);\n    const [portal, setPortal] = useState<ReactPortal>();\n\n    const ref = useRef<HTMLDivElement>(null);\n    const shouldPreventClickRef = useRef<boolean>(false);\n    const touchTimeoutRef = useRef<number | undefined>(undefined);\n\n    const container = useContainer({ anchorElement, container: containerProp });\n\n    const { transform, width, coordinates } = useDropdown({\n        anchorElement,\n        container,\n        contentHeight,\n        contentWidth: bodyWidth ?? measuredContentWidth,\n        direction,\n        shouldShowDropdown,\n    });\n\n    const handleClose = useCallback(() => {\n        if (typeof onClose === 'function') {\n            onClose();\n        }\n    }, [onClose]);\n\n    /**\n     * This function closes the body\n     */\n    const handleClick = useCallback(\n        (event: MouseEvent) => {\n            if (\n                ref.current &&\n                shouldShowDropdown &&\n                !anchorElement.contains(event.target as Node) &&\n                !ref.current.contains(event.target as Node)\n            ) {\n                event.preventDefault();\n                event.stopPropagation();\n\n                const shouldPreventCloseOnClick = onOutsideClick?.() ?? false;\n\n                if (!shouldPreventClickRef.current && !shouldPreventCloseOnClick) {\n                    handleClose();\n                }\n            }\n\n            shouldPreventClickRef.current = false;\n        },\n        [anchorElement, handleClose, onOutsideClick, shouldShowDropdown],\n    );\n\n    const handleContentMeasure = useCallback(\n        (measurements: DropdownMeasurements) => {\n            // Measurements are only needed if the content is shown in the chayns wallet. To prevent\n            // unnecessary renders, we only set the height if the content is shown in the wallet.\n            if (isInChaynsWalletRef.current) {\n                setMeasuredContentHeight(measurements.height);\n            }\n\n            setMeasuredContentWidth(measurements.width);\n\n            if (typeof onMeasure === 'function') {\n                onMeasure(measurements);\n            }\n        },\n        [onMeasure],\n    );\n\n    const handleTouchEnd = useCallback(() => {\n        clearTimeout(touchTimeoutRef.current);\n    }, []);\n\n    const handleTouchStart = useCallback(() => {\n        touchTimeoutRef.current = window.setTimeout(() => {\n            shouldPreventClickRef.current = true;\n        }, 500);\n    }, []);\n\n    /**\n     * This hook listens for clicks\n     */\n    useDropdownListener({\n        onClick: handleClick,\n        onClose: handleClose,\n        onTouchEnd: handleTouchEnd,\n        onTouchStart: handleTouchStart,\n    });\n\n    useEffect(() => {\n        const isBottomDirection = [\n            DropdownDirection.BOTTOM,\n            DropdownDirection.BOTTOM_LEFT,\n            DropdownDirection.BOTTOM_RIGHT,\n        ].includes(direction);\n\n        const reservationWrapperElement = anchorElement.closest<HTMLDivElement>(\n            ContainerAnchor.RESERVATION_WRAPPER,\n        );\n\n        isInChaynsWalletRef.current =\n            !!(reservationWrapperElement && reservationWrapperElement.contains(anchorElement)) ||\n            true;\n\n        // This effect checks if additional space is needed to show dropdown content in chayns cards.\n        if (\n            isBottomDirection &&\n            isInChaynsWalletRef.current &&\n            measuredContentHeight > 0 &&\n            reservationWrapperElement &&\n            shouldShowDropdown\n        ) {\n            const availableHeight =\n                window.innerHeight - anchorElement.getBoundingClientRect().bottom;\n\n            // If the content height is greater than the available height, we need to add additional space.\n            // This is to ensure that the dropdown content is fully visible. The 16 pixels are a buffer for shadows.\n            const additionalNeededSpace = measuredContentHeight + 16 - availableHeight;\n\n            if (additionalNeededSpace > 0) {\n                // Add margin bottom to the reservation wrapper to ensure the dropdown content is fully visible.\n                reservationWrapperElement.style.marginBottom = `${additionalNeededSpace}px`;\n            } else {\n                // Reset the margin bottom if no additional space is needed.\n                reservationWrapperElement.style.marginBottom = '0px';\n            }\n        }\n\n        if (isInChaynsWalletRef.current && reservationWrapperElement && !shouldShowDropdown) {\n            // Reset the margin bottom when the dropdown is closed.\n            reservationWrapperElement.style.marginBottom = '0px';\n        }\n\n        return () => {\n            if (reservationWrapperElement) {\n                reservationWrapperElement.style.marginBottom = '0px';\n            }\n        };\n    }, [anchorElement, direction, measuredContentHeight, shouldShowDropdown]);\n\n    useEffect(() => {\n        if (!container) return;\n\n        setPortal(() =>\n            createPortal(\n                <DelayedDropdownContent\n                    coordinates={coordinates}\n                    onMeasure={handleContentMeasure}\n                    shouldShowContent={shouldShowDropdown}\n                    transform={transform}\n                >\n                    <StyledDropdownBodyWrapperContent\n                        $width={width}\n                        $minWidth={minBodyWidth}\n                        $maxHeight={maxHeight}\n                        $direction={direction}\n                        ref={ref}\n                    >\n                        {children}\n                    </StyledDropdownBodyWrapperContent>\n                </DelayedDropdownContent>,\n                container,\n            ),\n        );\n    }, [\n        children,\n        container,\n        coordinates,\n        direction,\n        handleContentMeasure,\n        maxHeight,\n        minBodyWidth,\n        shouldShowDropdown,\n        transform,\n        width,\n    ]);\n\n    return <StyledDropdownBodyWrapper>{portal}</StyledDropdownBodyWrapper>;\n};\n\nDropdownBodyWrapper.displayName = 'DropdownBodyWrapper';\n\nexport default DropdownBodyWrapper;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/dropdown-body-wrapper/DropdownBodyWrapper.styles.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledDropdownBodyWrapperContent = exports.StyledDropdownBodyWrapper = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _dropdown = require("../../types/dropdown");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const StyledDropdownBodyWrapper = exports.StyledDropdownBodyWrapper = _styledComponents.default.div``;
+const StyledDropdownBodyWrapperContent = exports.StyledDropdownBodyWrapperContent = _styledComponents.default.div`
+    width: ${({
+  $width
+}) => $width}px;
+    max-height: ${({
+  $maxHeight
+}) => $maxHeight}px;
+    min-width: ${({
+  $minWidth
+}) => $minWidth}px;
+
+    // Basic styles
+    background: ${({
+  theme
+}) => theme['000']};
+    border: 1px solid rgba(160, 160, 160, 0.3);
+    overflow: hidden;
+    box-shadow: 0 0 0 1px
+        rgba(${({
+  theme
+}) => theme['009-rgb']}, 0.08) inset;
+
+    ${({
+  $direction
+}) => {
+  if ([_dropdown.DropdownDirection.BOTTOM, _dropdown.DropdownDirection.BOTTOM_LEFT, _dropdown.DropdownDirection.BOTTOM_RIGHT].includes($direction)) {
+    return (0, _styledComponents.css)`
+                border-bottom-left-radius: 3px;
+                border-bottom-right-radius: 3px;
+                box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2);
+            `;
+  }
+  return (0, _styledComponents.css)`
+            border-top-left-radius: 3px;
+            border-top-right-radius: 3px;
+            box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, 0.2);
+        `;
+}}
+`;
+//# sourceMappingURL=DropdownBodyWrapper.styles.js.map

package/lib/cjs/components/dropdown-body-wrapper/DropdownBodyWrapper.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownBodyWrapper.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_dropdown","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledDropdownBodyWrapper","exports","styled","div","StyledDropdownBodyWrapperContent","$width","$maxHeight","$minWidth","theme","$direction","DropdownDirection","BOTTOM","BOTTOM_LEFT","BOTTOM_RIGHT","includes","css"],"sources":["../../../../src/components/dropdown-body-wrapper/DropdownBodyWrapper.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { DropdownDirection } from '../../types/dropdown';\n\nexport const StyledDropdownBodyWrapper = styled.div``;\n\ntype StyledDropdownBodyWrapperContentProps = WithTheme<{\n    $width: number;\n    $maxHeight: number;\n    $minWidth: number;\n    $direction: DropdownDirection;\n}>;\n\nexport const StyledDropdownBodyWrapperContent = styled.div<StyledDropdownBodyWrapperContentProps>`\n    width: ${({ $width }) => $width}px;\n    max-height: ${({ $maxHeight }) => $maxHeight}px;\n    min-width: ${({ $minWidth }) => $minWidth}px;\n\n    // Basic styles\n    background: ${({ theme }: StyledDropdownBodyWrapperContentProps) => theme['000']};\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    overflow: hidden;\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledDropdownBodyWrapperContentProps) => theme['009-rgb']}, 0.08) inset;\n\n    ${({ $direction }) => {\n        if (\n            [\n                DropdownDirection.BOTTOM,\n                DropdownDirection.BOTTOM_LEFT,\n                DropdownDirection.BOTTOM_RIGHT,\n            ].includes($direction)\n        ) {\n            return css`\n                border-bottom-left-radius: 3px;\n                border-bottom-right-radius: 3px;\n                box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2);\n            `;\n        }\n\n        return css`\n            border-top-left-radius: 3px;\n            border-top-right-radius: 3px;\n            box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, 0.2);\n        `;\n    }}\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,SAAA,GAAAD,OAAA;AAAyD,SAAAD,wBAAAG,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAL,uBAAA,YAAAA,CAAAG,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAElD,MAAMkB,yBAAyB,GAAAC,OAAA,CAAAD,yBAAA,GAAGE,yBAAM,CAACC,GAAG,EAAE;AAS9C,MAAMC,gCAAgC,GAAAH,OAAA,CAAAG,gCAAA,GAAGF,yBAAM,CAACC,GAA0C;AACjG,aAAa,CAAC;EAAEE;AAAO,CAAC,KAAKA,MAAM;AACnC,kBAAkB,CAAC;EAAEC;AAAW,CAAC,KAAKA,UAAU;AAChD,iBAAiB,CAAC;EAAEC;AAAU,CAAC,KAAKA,SAAS;AAC7C;AACA;AACA,kBAAkB,CAAC;EAAEC;AAA6C,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACpF;AACA;AACA;AACA,eAAe,CAAC;EAAEA;AAA6C,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AACrF;AACA,MAAM,CAAC;EAAEC;AAAW,CAAC,KAAK;EAClB,IACI,CACIC,2BAAiB,CAACC,MAAM,EACxBD,2BAAiB,CAACE,WAAW,EAC7BF,2BAAiB,CAACG,YAAY,CACjC,CAACC,QAAQ,CAACL,UAAU,CAAC,EACxB;IACE,OAAO,IAAAM,qBAAG;AACtB;AACA;AACA;AACA,aAAa;EACL;EAEA,OAAO,IAAAA,qBAAG;AAClB;AACA;AACA;AACA,SAAS;AACL,CAAC;AACL,CAAC","ignoreList":[]}

package/lib/cjs/components/dropdown-body-wrapper/delayed-dropdown-content/DelayedDropdownContent.js

@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _DelayedDropdownContent = require("./DelayedDropdownContent.styles");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const ANIMATION_DELAY_MS = 200;
+var AnimationType = /*#__PURE__*/function (AnimationType) {
+  AnimationType[AnimationType["None"] = 0] = "None";
+  AnimationType[AnimationType["Hidden"] = 1] = "Hidden";
+  AnimationType[AnimationType["Visible"] = 2] = "Visible";
+  AnimationType[AnimationType["FadeIn"] = 3] = "FadeIn";
+  AnimationType[AnimationType["FadeOut"] = 4] = "FadeOut";
+  return AnimationType;
+}(AnimationType || {});
+const DelayedDropdownContent = ({
+  children,
+  shouldShowContent,
+  onMeasure,
+  coordinates,
+  transform
+}) => {
+  const [animationState, setAnimationState] = (0, _react.useState)(AnimationType.None);
+  const ref = (0, _react.useRef)();
+  const timeoutRef = (0, _react.useRef)();
+  const measureElement = (0, _react.useCallback)(() => {
+    if (ref.current) {
+      const {
+        height,
+        width,
+        x,
+        y
+      } = ref.current.getBoundingClientRect();
+      const {
+        scrollHeight
+      } = ref.current;
+      if (typeof onMeasure === 'function') {
+        onMeasure({
+          x,
+          y,
+          height,
+          scrollHeight,
+          width,
+          element: ref.current
+        });
+      }
+      setAnimationState(AnimationType.FadeIn);
+      timeoutRef.current = window.setTimeout(() => {
+        setAnimationState(AnimationType.Visible);
+      }, ANIMATION_DELAY_MS);
+    }
+  }, [onMeasure]);
+  (0, _react.useEffect)(() => {
+    if (!shouldShowContent) return () => {};
+    const observer = new ResizeObserver(() => {
+      measureElement();
+    });
+    if (ref.current) {
+      observer.observe(ref.current);
+    }
+    return () => observer.disconnect();
+  }, [measureElement, shouldShowContent]);
+  (0, _react.useEffect)(() => {
+    if (shouldShowContent) {
+      setAnimationState(AnimationType.Hidden);
+    } else {
+      clearTimeout(timeoutRef.current);
+      setAnimationState(prevState => {
+        if (prevState === AnimationType.None) {
+          return prevState;
+        }
+        return AnimationType.FadeOut;
+      });
+      window.setTimeout(() => {
+        setAnimationState(AnimationType.None);
+      }, ANIMATION_DELAY_MS);
+    }
+  }, [measureElement, shouldShowContent]);
+  const refCallback = (0, _react.useCallback)(reference => {
+    ref.current = reference ?? undefined;
+    measureElement();
+  }, [measureElement]);
+  if (animationState === AnimationType.None) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_DelayedDropdownContent.StyledMotionDelayedDropdownContent, {
+    ref: refCallback,
+    $coordinates: coordinates,
+    $transform: transform,
+    $shouldHideContent: animationState === AnimationType.Hidden,
+    animate: {
+      opacity: [AnimationType.FadeIn, AnimationType.Visible].includes(animationState) ? 1 : 0
+    },
+    transition: {
+      duration: ANIMATION_DELAY_MS / 1000,
+      type: 'tween'
+    },
+    inert: !shouldShowContent ? 'true' : undefined
+  }, children);
+};
+DelayedDropdownContent.displayName = 'DelayedDropdownContent';
+var _default = exports.default = DelayedDropdownContent;
+//# sourceMappingURL=DelayedDropdownContent.js.map

package/lib/cjs/components/dropdown-body-wrapper/delayed-dropdown-content/DelayedDropdownContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DelayedDropdownContent.js","names":["_react","_interopRequireWildcard","require","_DelayedDropdownContent","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ANIMATION_DELAY_MS","AnimationType","DelayedDropdownContent","children","shouldShowContent","onMeasure","coordinates","transform","animationState","setAnimationState","useState","None","ref","useRef","timeoutRef","measureElement","useCallback","current","height","width","x","y","getBoundingClientRect","scrollHeight","element","FadeIn","window","setTimeout","Visible","useEffect","observer","ResizeObserver","observe","disconnect","Hidden","clearTimeout","prevState","FadeOut","refCallback","reference","undefined","createElement","StyledMotionDelayedDropdownContent","$coordinates","$transform","$shouldHideContent","animate","opacity","includes","transition","duration","type","inert","displayName","_default","exports"],"sources":["../../../../../src/components/dropdown-body-wrapper/delayed-dropdown-content/DelayedDropdownContent.tsx"],"sourcesContent":["import React, { FC, ReactNode, useCallback, useEffect, useRef, useState } from 'react';\nimport { StyledMotionDelayedDropdownContent } from './DelayedDropdownContent.styles';\nimport {\n    DropdownCoordinates,\n    DropdownMeasurements,\n    DropdownTransform,\n} from '../../../types/dropdown';\n\nconst ANIMATION_DELAY_MS = 200;\n\nenum AnimationType {\n    None,\n    Hidden,\n    Visible,\n    FadeIn,\n    FadeOut,\n}\n\nexport type DelayedDropdownContentProps = {\n    /**\n     * The content to be rendered inside the dropdown.\n     */\n    children: ReactNode;\n    /**\n     * The absolute coordinates used to position the dropdown.\n     */\n    coordinates: DropdownCoordinates;\n    /**\n     * Callback that returns the dimensions of the dropdown after measuring.\n     */\n    onMeasure?: (measurements: DropdownMeasurements) => void;\n    /**\n     * Whether the dropdown should be rendered and animated in.\n     */\n    shouldShowContent: boolean;\n    /**\n     * CSS transform data (e.g. translate offsets) to apply for positioning.\n     */\n    transform: DropdownTransform;\n};\n\nconst DelayedDropdownContent: FC<DelayedDropdownContentProps> = ({\n    children,\n    shouldShowContent,\n    onMeasure,\n    coordinates,\n    transform,\n}) => {\n    const [animationState, setAnimationState] = useState<AnimationType>(AnimationType.None);\n\n    const ref = useRef<HTMLDivElement>();\n    const timeoutRef = useRef<number>();\n\n    const measureElement = useCallback(() => {\n        if (ref.current) {\n            const { height, width, x, y } = ref.current.getBoundingClientRect();\n            const { scrollHeight } = ref.current;\n\n            if (typeof onMeasure === 'function') {\n                onMeasure({\n                    x,\n                    y,\n                    height,\n                    scrollHeight,\n                    width,\n                    element: ref.current,\n                });\n            }\n\n            setAnimationState(AnimationType.FadeIn);\n\n            timeoutRef.current = window.setTimeout(() => {\n                setAnimationState(AnimationType.Visible);\n            }, ANIMATION_DELAY_MS);\n        }\n    }, [onMeasure]);\n\n    useEffect(() => {\n        if (!shouldShowContent) return () => {};\n\n        const observer = new ResizeObserver(() => {\n            measureElement();\n        });\n\n        if (ref.current) {\n            observer.observe(ref.current);\n        }\n\n        return () => observer.disconnect();\n    }, [measureElement, shouldShowContent]);\n\n    useEffect(() => {\n        if (shouldShowContent) {\n            setAnimationState(AnimationType.Hidden);\n        } else {\n            clearTimeout(timeoutRef.current);\n\n            setAnimationState((prevState) => {\n                if (prevState === AnimationType.None) {\n                    return prevState;\n                }\n\n                return AnimationType.FadeOut;\n            });\n\n            window.setTimeout(() => {\n                setAnimationState(AnimationType.None);\n            }, ANIMATION_DELAY_MS);\n        }\n    }, [measureElement, shouldShowContent]);\n\n    const refCallback = useCallback(\n        (reference: HTMLDivElement | null) => {\n            ref.current = reference ?? undefined;\n            measureElement();\n        },\n        [measureElement],\n    );\n\n    if (animationState === AnimationType.None) {\n        return null;\n    }\n\n    return (\n        <StyledMotionDelayedDropdownContent\n            ref={refCallback}\n            $coordinates={coordinates}\n            $transform={transform}\n            $shouldHideContent={animationState === AnimationType.Hidden}\n            animate={{\n                opacity: [AnimationType.FadeIn, AnimationType.Visible].includes(animationState)\n                    ? 1\n                    : 0,\n            }}\n            transition={{ duration: ANIMATION_DELAY_MS / 1000, type: 'tween' }}\n            inert={!shouldShowContent ? 'true' : undefined}\n        >\n            {children}\n        </StyledMotionDelayedDropdownContent>\n    );\n};\n\nDelayedDropdownContent.displayName = 'DelayedDropdownContent';\n\nexport default DelayedDropdownContent;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,uBAAA,GAAAD,OAAA;AAAqF,SAAAD,wBAAAG,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAL,uBAAA,YAAAA,CAAAG,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAOrF,MAAMkB,kBAAkB,GAAG,GAAG;AAAC,IAE1BC,aAAa,0BAAbA,aAAa;EAAbA,aAAa,CAAbA,aAAa;EAAbA,aAAa,CAAbA,aAAa;EAAbA,aAAa,CAAbA,aAAa;EAAbA,aAAa,CAAbA,aAAa;EAAbA,aAAa,CAAbA,aAAa;EAAA,OAAbA,aAAa;AAAA,EAAbA,aAAa;AA+BlB,MAAMC,sBAAuD,GAAGA,CAAC;EAC7DC,QAAQ;EACRC,iBAAiB;EACjBC,SAAS;EACTC,WAAW;EACXC;AACJ,CAAC,KAAK;EACF,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAG,IAAAC,eAAQ,EAAgBT,aAAa,CAACU,IAAI,CAAC;EAEvF,MAAMC,GAAG,GAAG,IAAAC,aAAM,EAAiB,CAAC;EACpC,MAAMC,UAAU,GAAG,IAAAD,aAAM,EAAS,CAAC;EAEnC,MAAME,cAAc,GAAG,IAAAC,kBAAW,EAAC,MAAM;IACrC,IAAIJ,GAAG,CAACK,OAAO,EAAE;MACb,MAAM;QAAEC,MAAM;QAAEC,KAAK;QAAEC,CAAC;QAAEC;MAAE,CAAC,GAAGT,GAAG,CAACK,OAAO,CAACK,qBAAqB,CAAC,CAAC;MACnE,MAAM;QAAEC;MAAa,CAAC,GAAGX,GAAG,CAACK,OAAO;MAEpC,IAAI,OAAOZ,SAAS,KAAK,UAAU,EAAE;QACjCA,SAAS,CAAC;UACNe,CAAC;UACDC,CAAC;UACDH,MAAM;UACNK,YAAY;UACZJ,KAAK;UACLK,OAAO,EAAEZ,GAAG,CAACK;QACjB,CAAC,CAAC;MACN;MAEAR,iBAAiB,CAACR,aAAa,CAACwB,MAAM,CAAC;MAEvCX,UAAU,CAACG,OAAO,GAAGS,MAAM,CAACC,UAAU,CAAC,MAAM;QACzClB,iBAAiB,CAACR,aAAa,CAAC2B,OAAO,CAAC;MAC5C,CAAC,EAAE5B,kBAAkB,CAAC;IAC1B;EACJ,CAAC,EAAE,CAACK,SAAS,CAAC,CAAC;EAEf,IAAAwB,gBAAS,EAAC,MAAM;IACZ,IAAI,CAACzB,iBAAiB,EAAE,OAAO,MAAM,CAAC,CAAC;IAEvC,MAAM0B,QAAQ,GAAG,IAAIC,cAAc,CAAC,MAAM;MACtChB,cAAc,CAAC,CAAC;IACpB,CAAC,CAAC;IAEF,IAAIH,GAAG,CAACK,OAAO,EAAE;MACba,QAAQ,CAACE,OAAO,CAACpB,GAAG,CAACK,OAAO,CAAC;IACjC;IAEA,OAAO,MAAMa,QAAQ,CAACG,UAAU,CAAC,CAAC;EACtC,CAAC,EAAE,CAAClB,cAAc,EAAEX,iBAAiB,CAAC,CAAC;EAEvC,IAAAyB,gBAAS,EAAC,MAAM;IACZ,IAAIzB,iBAAiB,EAAE;MACnBK,iBAAiB,CAACR,aAAa,CAACiC,MAAM,CAAC;IAC3C,CAAC,MAAM;MACHC,YAAY,CAACrB,UAAU,CAACG,OAAO,CAAC;MAEhCR,iBAAiB,CAAE2B,SAAS,IAAK;QAC7B,IAAIA,SAAS,KAAKnC,aAAa,CAACU,IAAI,EAAE;UAClC,OAAOyB,SAAS;QACpB;QAEA,OAAOnC,aAAa,CAACoC,OAAO;MAChC,CAAC,CAAC;MAEFX,MAAM,CAACC,UAAU,CAAC,MAAM;QACpBlB,iBAAiB,CAACR,aAAa,CAACU,IAAI,CAAC;MACzC,CAAC,EAAEX,kBAAkB,CAAC;IAC1B;EACJ,CAAC,EAAE,CAACe,cAAc,EAAEX,iBAAiB,CAAC,CAAC;EAEvC,MAAMkC,WAAW,GAAG,IAAAtB,kBAAW,EAC1BuB,SAAgC,IAAK;IAClC3B,GAAG,CAACK,OAAO,GAAGsB,SAAS,IAAIC,SAAS;IACpCzB,cAAc,CAAC,CAAC;EACpB,CAAC,EACD,CAACA,cAAc,CACnB,CAAC;EAED,IAAIP,cAAc,KAAKP,aAAa,CAACU,IAAI,EAAE;IACvC,OAAO,IAAI;EACf;EAEA,oBACIlC,MAAA,CAAAc,OAAA,CAAAkD,aAAA,CAAC7D,uBAAA,CAAA8D,kCAAkC;IAC/B9B,GAAG,EAAE0B,WAAY;IACjBK,YAAY,EAAErC,WAAY;IAC1BsC,UAAU,EAAErC,SAAU;IACtBsC,kBAAkB,EAAErC,cAAc,KAAKP,aAAa,CAACiC,MAAO;IAC5DY,OAAO,EAAE;MACLC,OAAO,EAAE,CAAC9C,aAAa,CAACwB,MAAM,EAAExB,aAAa,CAAC2B,OAAO,CAAC,CAACoB,QAAQ,CAACxC,cAAc,CAAC,GACzE,CAAC,GACD;IACV,CAAE;IACFyC,UAAU,EAAE;MAAEC,QAAQ,EAAElD,kBAAkB,GAAG,IAAI;MAAEmD,IAAI,EAAE;IAAQ,CAAE;IACnEC,KAAK,EAAE,CAAChD,iBAAiB,GAAG,MAAM,GAAGoC;EAAU,GAE9CrC,QAC+B,CAAC;AAE7C,CAAC;AAEDD,sBAAsB,CAACmD,WAAW,GAAG,wBAAwB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAhE,OAAA,GAE/CW,sBAAsB","ignoreList":[]}

package/lib/cjs/components/dropdown-body-wrapper/delayed-dropdown-content/DelayedDropdownContent.styles.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledMotionDelayedDropdownContent = void 0;
+var _react = require("motion/react");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const StyledMotionDelayedDropdownContent = exports.StyledMotionDelayedDropdownContent = (0, _styledComponents.default)(_react.motion.div)`
+    position: absolute;
+
+    height: fit-content;
+    width: fit-content;
+
+    top: ${({
+  $coordinates
+}) => $coordinates.y}px;
+    left: ${({
+  $coordinates
+}) => $coordinates.x}px;
+
+    transform: ${({
+  $transform
+}) => `translate(${$transform.x}, ${$transform.y})`};
+
+    ${({
+  $shouldHideContent
+}) => $shouldHideContent ? (0, _styledComponents.css)`
+                  visibility: hidden;
+                  pointer-events: none;
+                  z-index: -1;
+              ` : (0, _styledComponents.css)`
+                  z-index: 15;
+              `}
+`;
+//# sourceMappingURL=DelayedDropdownContent.styles.js.map

package/lib/cjs/components/dropdown-body-wrapper/delayed-dropdown-content/DelayedDropdownContent.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DelayedDropdownContent.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledMotionDelayedDropdownContent","exports","styled","motion","div","$coordinates","y","x","$transform","$shouldHideContent","css"],"sources":["../../../../../src/components/dropdown-body-wrapper/delayed-dropdown-content/DelayedDropdownContent.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { DropdownCoordinates, DropdownTransform } from '../../../types/dropdown';\n\ntype StyledMotionDelayedDropdownContentProps = WithTheme<{\n    $shouldHideContent: boolean;\n    $coordinates: DropdownCoordinates;\n    $transform: DropdownTransform;\n}>;\n\nexport const StyledMotionDelayedDropdownContent = styled(\n    motion.div,\n)<StyledMotionDelayedDropdownContentProps>`\n    position: absolute;\n\n    height: fit-content;\n    width: fit-content;\n\n    top: ${({ $coordinates }) => $coordinates.y}px;\n    left: ${({ $coordinates }) => $coordinates.x}px;\n\n    transform: ${({ $transform }) => `translate(${$transform.x}, ${$transform.y})`};\n\n    ${({ $shouldHideContent }) =>\n        $shouldHideContent\n            ? css`\n                  visibility: hidden;\n                  pointer-events: none;\n                  z-index: -1;\n              `\n            : css`\n                  z-index: 15;\n              `}\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAgD,SAAAE,wBAAAC,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAH,uBAAA,YAAAA,CAAAC,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAUzC,MAAMkB,kCAAkC,GAAAC,OAAA,CAAAD,kCAAA,GAAG,IAAAE,yBAAM,EACpDC,aAAM,CAACC,GACX,CAA0C;AAC1C;AACA;AACA;AACA;AACA;AACA,WAAW,CAAC;EAAEC;AAAa,CAAC,KAAKA,YAAY,CAACC,CAAC;AAC/C,YAAY,CAAC;EAAED;AAAa,CAAC,KAAKA,YAAY,CAACE,CAAC;AAChD;AACA,iBAAiB,CAAC;EAAEC;AAAW,CAAC,KAAK,aAAaA,UAAU,CAACD,CAAC,KAAKC,UAAU,CAACF,CAAC,GAAG;AAClF;AACA,MAAM,CAAC;EAAEG;AAAmB,CAAC,KACrBA,kBAAkB,GACZ,IAAAC,qBAAG;AACjB;AACA;AACA;AACA,eAAe,GACD,IAAAA,qBAAG;AACjB;AACA,eAAe;AACf,CAAC","ignoreList":[]}

package/lib/cjs/components/expandable-content/ExpandableContent.js

@@ -4,26 +4,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _framerMotion = require("framer-motion");
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("motion/react");
+var _react2 = _interopRequireWildcard(require("react"));
 var _ExpandableContent = require("./ExpandableContent.styles");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const ExpandableContent = ({
   children,
-  isOpen
-}) => (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
+  isOpen,
+  startDelay
+}) => (0, _react2.useMemo)(() => /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
   initial: false
-}, /*#__PURE__*/_react.default.createElement(_ExpandableContent.StyledMotionExpandableContent, {
-  $isOpen: isOpen,
+}, /*#__PURE__*/_react2.default.createElement(_ExpandableContent.StyledMotionExpandableContent, {
   animate: {
     height: isOpen ? 'auto' : '0px'
   },
   transition: {
     duration: 0.2,
-    type: 'tween'
+    type: 'tween',
+    delay: isOpen ? startDelay : 0
   }
-}, children)), [children, isOpen]);
+}, children)), [children, isOpen, startDelay]);
 ExpandableContent.displayName = 'ExpandableContent';
 var _default = exports.default = ExpandableContent;
 //# sourceMappingURL=ExpandableContent.js.map

package/lib/cjs/components/expandable-content/ExpandableContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandableContent.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_ExpandableContent","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ExpandableContent","children","isOpen","useMemo","createElement","AnimatePresence","initial","StyledMotionExpandableContent","$isOpen","animate","height","transition","duration","type","displayName","_default","exports"],"sources":["../../../../src/components/expandable-content/ExpandableContent.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, { FC, ReactNode, useMemo } from 'react';\nimport { StyledMotionExpandableContent } from './ExpandableContent.styles';\n\nexport type ExpandableContentProps = {\n    /**\n     * The children that should be animated.\n     */\n    children: ReactNode;\n    /**\n     * Whether the content is expanded.\n     */\n    isOpen: boolean;\n};\n\nconst ExpandableContent: FC<ExpandableContentProps> = ({ children, isOpen }) =>\n    useMemo(\n        () => (\n            <AnimatePresence initial={false}>\n                <StyledMotionExpandableContent\n                    $isOpen={isOpen}\n                    animate={{ height: isOpen ? 'auto' : '0px' }}\n                    transition={{ duration: 0.2, type: 'tween' }}\n                >\n                    {children}\n                </StyledMotionExpandableContent>\n            </AnimatePresence>\n        ),\n        [children, isOpen],\n    );\n\nExpandableContent.displayName = 'ExpandableContent';\n\nexport default ExpandableContent;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,kBAAA,GAAAH,OAAA;AAA2E,SAAAI,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAa3E,MAAMW,iBAA6C,GAAGA,CAAC;EAAEC,QAAQ;EAAEC;AAAO,CAAC,KACvE,IAAAC,cAAO,EACH,mBACI1B,MAAA,CAAAS,OAAA,CAAAkB,aAAA,CAAC7B,aAAA,CAAA8B,eAAe;EAACC,OAAO,EAAE;AAAM,gBAC5B7B,MAAA,CAAAS,OAAA,CAAAkB,aAAA,CAACzB,kBAAA,CAAA4B,6BAA6B;EAC1BC,OAAO,EAAEN,MAAO;EAChBO,OAAO,EAAE;IAAEC,MAAM,EAAER,MAAM,GAAG,MAAM,GAAG;EAAM,CAAE;EAC7CS,UAAU,EAAE;IAAEC,QAAQ,EAAE,GAAG;IAAEC,IAAI,EAAE;EAAQ;AAAE,GAE5CZ,QAC0B,CAClB,CACpB,EACD,CAACA,QAAQ,EAAEC,MAAM,CACrB,CAAC;AAELF,iBAAiB,CAACc,WAAW,GAAG,mBAAmB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA9B,OAAA,GAErCc,iBAAiB","ignoreList":[]}
+{"version":3,"file":"ExpandableContent.js","names":["_react","require","_react2","_interopRequireWildcard","_ExpandableContent","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ExpandableContent","children","isOpen","startDelay","useMemo","createElement","AnimatePresence","initial","StyledMotionExpandableContent","animate","height","transition","duration","type","delay","displayName","_default","exports"],"sources":["../../../../src/components/expandable-content/ExpandableContent.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, { FC, ReactNode, useMemo } from 'react';\nimport { StyledMotionExpandableContent } from './ExpandableContent.styles';\n\nexport type ExpandableContentProps = {\n    /**\n     * The children that should be animated.\n     */\n    children: ReactNode;\n    /**\n     * An optional start delay.\n     */\n    startDelay?: number;\n    /**\n     * Whether the content is expanded.\n     */\n    isOpen: boolean;\n};\n\nconst ExpandableContent: FC<ExpandableContentProps> = ({ children, isOpen, startDelay }) =>\n    useMemo(\n        () => (\n            <AnimatePresence initial={false}>\n                <StyledMotionExpandableContent\n                    animate={{ height: isOpen ? 'auto' : '0px' }}\n                    transition={{ duration: 0.2, type: 'tween', delay: isOpen ? startDelay : 0 }}\n                >\n                    {children}\n                </StyledMotionExpandableContent>\n            </AnimatePresence>\n        ),\n        [children, isOpen, startDelay],\n    );\n\nExpandableContent.displayName = 'ExpandableContent';\n\nexport default ExpandableContent;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,kBAAA,GAAAH,OAAA;AAA2E,SAAAE,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAiB3E,MAAMkB,iBAA6C,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,MAAM;EAAEC;AAAW,CAAC,KACnF,IAAAC,eAAO,EACH,mBACI1B,OAAA,CAAAa,OAAA,CAAAc,aAAA,CAAC7B,MAAA,CAAA8B,eAAe;EAACC,OAAO,EAAE;AAAM,gBAC5B7B,OAAA,CAAAa,OAAA,CAAAc,aAAA,CAACzB,kBAAA,CAAA4B,6BAA6B;EAC1BC,OAAO,EAAE;IAAEC,MAAM,EAAER,MAAM,GAAG,MAAM,GAAG;EAAM,CAAE;EAC7CS,UAAU,EAAE;IAAEC,QAAQ,EAAE,GAAG;IAAEC,IAAI,EAAE,OAAO;IAAEC,KAAK,EAAEZ,MAAM,GAAGC,UAAU,GAAG;EAAE;AAAE,GAE5EF,QAC0B,CAClB,CACpB,EACD,CAACA,QAAQ,EAAEC,MAAM,EAAEC,UAAU,CACjC,CAAC;AAELH,iBAAiB,CAACe,WAAW,GAAG,mBAAmB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA1B,OAAA,GAErCS,iBAAiB","ignoreList":[]}

package/lib/cjs/components/expandable-content/ExpandableContent.styles.js

@@ -4,12 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.StyledMotionExpandableContent = void 0;
-var _framerMotion = require("framer-motion");
+var _react = require("motion/react");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const StyledMotionExpandableContent = exports.StyledMotionExpandableContent = (0, _styledComponents.default)(_framerMotion.motion.div)`
-    overflow: ${({
-  $isOpen
-}) => $isOpen ? 'visible' : 'hidden'};
+const StyledMotionExpandableContent = exports.StyledMotionExpandableContent = (0, _styledComponents.default)(_react.motion.div)`
+    overflow: hidden;
 `;
 //# sourceMappingURL=ExpandableContent.styles.js.map

package/lib/cjs/components/expandable-content/ExpandableContent.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandableContent.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledMotionExpandableContent","exports","styled","motion","div","$isOpen"],"sources":["../../../../src/components/expandable-content/ExpandableContent.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\n\ntype StyledMotionExpandableContentProps = {\n    $isOpen: boolean;\n};\n\nexport const StyledMotionExpandableContent = styled(motion.div)<StyledMotionExpandableContentProps>`\n    overflow: ${({ $isOpen }) => ($isOpen ? 'visible' : 'hidden')};\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAMhC,MAAMG,6BAA6B,GAAAC,OAAA,CAAAD,6BAAA,GAAG,IAAAE,yBAAM,EAACC,oBAAM,CAACC,GAAG,CAAqC;AACnG,gBAAgB,CAAC;EAAEC;AAAQ,CAAC,KAAMA,OAAO,GAAG,SAAS,GAAG,QAAS;AACjE,CAAC","ignoreList":[]}
+{"version":3,"file":"ExpandableContent.styles.js","names":["_react","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledMotionExpandableContent","exports","styled","motion","div"],"sources":["../../../../src/components/expandable-content/ExpandableContent.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled from 'styled-components';\n\nexport const StyledMotionExpandableContent = styled(motion.div)`\n    overflow: hidden;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,6BAA6B,GAAAC,OAAA,CAAAD,6BAAA,GAAG,IAAAE,yBAAM,EAACC,aAAM,CAACC,GAAG,CAAC;AAC/D;AACA,CAAC","ignoreList":[]}