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

package/lib/esm/components/context-menu/context-menu-content/ContextMenuContent.styles.js

@@ -1,25 +1,24 @@
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import styled, { css } from 'styled-components';
-import { ContextMenuAlignment } from '../../../types/contextMenu';
+import { ContextMenuAlignment } from '../ContextMenu.types';
 export const StyledMotionContextMenuContent = styled(motion.div)`
-    background-color: ${_ref => {
-  let {
-    theme
-  } = _ref;
-  return theme['001'];
-}};
+    background-color: ${({
+  theme
+}) => theme['001']};
     border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 3px;
+    border-radius: ${({
+  $shouldHidePopupArrow
+}) => $shouldHidePopupArrow ? '6px' : '3px'};
     box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);
-    color: ${_ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.text;
-}};
+    color: ${({
+  theme
+}) => theme.text};
+    max-width: 500px;
     pointer-events: all;
     position: absolute;
-    z-index: 10;
+    z-index: ${({
+  $zIndex
+}) => $zIndex};
 
     &::after {
         background-color: inherit;
@@ -32,10 +31,15 @@ export const StyledMotionContextMenuContent = styled(motion.div)`
         width: 14px;
         z-index: -2;
 
-        ${_ref3 => {
-  let {
-    $position
-  } = _ref3;
+        ${({
+  $shouldHidePopupArrow
+}) => $shouldHidePopupArrow && css`
+                display: none;
+            `}
+
+        ${({
+  $position
+}) => {
   switch ($position) {
     case ContextMenuAlignment.TopLeft:
       return css`
@@ -87,31 +91,64 @@ export const StyledMotionContextMenuContent = styled(motion.div)`
         position: absolute;
         right: 0;
         top: 0;
+        border-radius: ${({
+  $shouldHidePopupArrow
+}) => $shouldHidePopupArrow ? '6px' : '3px'};
         z-index: -1;
     }
 `;
-export const StyledContextMenuContentItem = styled.div`
+export const StyledContextMenuContentItem = styled.div``;
+export const StyledContextMenuContentItemSpacer = styled.div`
+    background-color: ${({
+  theme
+}) => theme['003']};
+    height: 1px;
+    width: 100%;
+`;
+export const StyledContextMenuContentItemWrapper = styled.div`
+    align-items: center;
+    border-radius: ${({
+  $shouldHidePopupArrow
+}) => $shouldHidePopupArrow ? '3px' : 0};
     cursor: pointer;
     display: flex;
-    padding: 5px 8px 5px 5px;
+    gap: 6px;
+    margin: ${({
+  $shouldHidePopupArrow
+}) => $shouldHidePopupArrow ? '3px' : 0};
+    overflow: hidden;
+    padding: 5px 8px;
     transition: background-color 0.3s ease;
 
+    ${({
+  $isFocused,
+  theme
+}) => $isFocused && css`
+            background-color: ${theme['secondary-103']};
+        `}
+
     &:hover {
-        background-color: ${_ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return theme['secondary-103'];
-}};
+        background-color: ${({
+  theme
+}) => theme['secondary-103']};
     }
 `;
 export const StyledContextMenuContentItemIconWrapper = styled.div`
+    display: flex;
     flex: 0 0 auto;
-    margin: 0 8px 0 3px;
+    justify-content: center;
     width: 20px;
 `;
+export const StyledContextMenuContentHeadline = styled.div`
+    width: 100%;
+    margin: 3px 6px;
+    opacity: 50%;
+    font-weight: bold;
+`;
 export const StyledContextMenuContentItemText = styled.div`
-    flex: 0 0 auto;
+    flex: 0 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
     white-space: nowrap;
 `;
 //# sourceMappingURL=ContextMenuContent.styles.js.map

package/lib/esm/components/context-menu/context-menu-content/ContextMenuContent.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenuContent.styles.js","names":["motion","styled","css","ContextMenuAlignment","StyledMotionContextMenuContent","div","_ref","theme","_ref2","text","_ref3","$position","TopLeft","BottomLeft","TopRight","BottomRight","TopCenter","BottomCenter","undefined","StyledContextMenuContentItem","_ref4","StyledContextMenuContentItemIconWrapper","StyledContextMenuContentItemText"],"sources":["../../../../../src/components/context-menu/context-menu-content/ContextMenuContent.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport { ContextMenuAlignment } from '../../../types/contextMenu';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionContextMenuContentProps = WithTheme<{\n    $position: ContextMenuAlignment;\n}>;\n\nexport const StyledMotionContextMenuContent = styled(\n    motion.div,\n)<StyledMotionContextMenuContentProps>`\n    background-color: ${({ theme }: StyledMotionContextMenuContentProps) => theme['001']};\n    border: 1px solid rgba(0, 0, 0, 0.1);\n    border-radius: 3px;\n    box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n    color: ${({ theme }: StyledMotionContextMenuContentProps) => theme.text};\n    pointer-events: all;\n    position: absolute;\n    z-index: 10;\n\n    &::after {\n        background-color: inherit;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        border-right: 1px solid rgba(0, 0, 0, 0.1);\n        box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n        content: '';\n        height: 14px;\n        position: absolute;\n        width: 14px;\n        z-index: -2;\n\n        ${({ $position }) => {\n            switch ($position) {\n                case ContextMenuAlignment.TopLeft:\n                    return css`\n                        bottom: -7px;\n                        right: 7px;\n                        transform: rotate(45deg);\n                    `;\n                case ContextMenuAlignment.BottomLeft:\n                    return css`\n                        top: -7px;\n                        right: 7px;\n                        transform: rotate(225deg);\n                    `;\n                case ContextMenuAlignment.TopRight:\n                    return css`\n                        transform: rotate(45deg);\n                        bottom: -7px;\n                        left: 7px;\n                    `;\n                case ContextMenuAlignment.BottomRight:\n                    return css`\n                        transform: rotate(225deg);\n                        top: -7px;\n                        left: 7px;\n                    `;\n                case ContextMenuAlignment.TopCenter:\n                    return css`\n                        bottom: -7px;\n                        right: 45%;\n                        transform: rotate(45deg);\n                    `;\n                case ContextMenuAlignment.BottomCenter:\n                    return css`\n                        transform: rotate(225deg);\n                        top: -7px;\n                        left: 45%;\n                    `;\n\n                default:\n                    return undefined;\n            }\n        }}\n    }\n\n    &::before {\n        background-color: inherit;\n        bottom: 0;\n        content: '';\n        left: 0;\n        position: absolute;\n        right: 0;\n        top: 0;\n        z-index: -1;\n    }\n`;\n\ntype StyledContextMenuContentItemProps = WithTheme<unknown>;\n\nexport const StyledContextMenuContentItem = styled.div<StyledContextMenuContentItemProps>`\n    cursor: pointer;\n    display: flex;\n    padding: 5px 8px 5px 5px;\n    transition: background-color 0.3s ease;\n\n    &:hover {\n        background-color: ${({ theme }: StyledContextMenuContentItemProps) =>\n            theme['secondary-103']};\n    }\n`;\n\nexport const StyledContextMenuContentItemIconWrapper = styled.div`\n    flex: 0 0 auto;\n    margin: 0 8px 0 3px;\n    width: 20px;\n`;\n\nexport const StyledContextMenuContentItemText = styled.div`\n    flex: 0 0 auto;\n    white-space: nowrap;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,oBAAoB,QAAQ,4BAA4B;AAOjE,OAAO,MAAMC,8BAA8B,GAAGH,MAAM,CAChDD,MAAM,CAACK,GACX,CAAsC;AACtC,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAA2C,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA;AACxF;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAED;EAA2C,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAACE,IAAI;AAAA;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAUC,KAAA,IAAmB;EAAA,IAAlB;IAAEC;EAAU,CAAC,GAAAD,KAAA;EACZ,QAAQC,SAAS;IACb,KAAKR,oBAAoB,CAACS,OAAO;MAC7B,OAAOV,GAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IACL,KAAKC,oBAAoB,CAACU,UAAU;MAChC,OAAOX,GAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IACL,KAAKC,oBAAoB,CAACW,QAAQ;MAC9B,OAAOZ,GAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IACL,KAAKC,oBAAoB,CAACY,WAAW;MACjC,OAAOb,GAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IACL,KAAKC,oBAAoB,CAACa,SAAS;MAC/B,OAAOd,GAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IACL,KAAKC,oBAAoB,CAACc,YAAY;MAClC,OAAOf,GAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IAEL;MACI,OAAOgB,SAAS;EACxB;AACJ,CAAC;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,4BAA4B,GAAGlB,MAAM,CAACI,GAAsC;AACzF;AACA;AACA;AACA;AACA;AACA;AACA,4BAA4Be,KAAA;EAAA,IAAC;IAAEb;EAAyC,CAAC,GAAAa,KAAA;EAAA,OAC7Db,KAAK,CAAC,eAAe,CAAC;AAAA;AAClC;AACA,CAAC;AAED,OAAO,MAAMc,uCAAuC,GAAGpB,MAAM,CAACI,GAAG;AACjE;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMiB,gCAAgC,GAAGrB,MAAM,CAACI,GAAG;AAC1D;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"ContextMenuContent.styles.js","names":["motion","styled","css","ContextMenuAlignment","StyledMotionContextMenuContent","div","theme","$shouldHidePopupArrow","text","$zIndex","$position","TopLeft","BottomLeft","TopRight","BottomRight","TopCenter","BottomCenter","undefined","StyledContextMenuContentItem","StyledContextMenuContentItemSpacer","StyledContextMenuContentItemWrapper","$isFocused","StyledContextMenuContentItemIconWrapper","StyledContextMenuContentHeadline","StyledContextMenuContentItemText"],"sources":["../../../../../src/components/context-menu/context-menu-content/ContextMenuContent.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { ContextMenuAlignment } from '../ContextMenu.types';\n\ntype StyledMotionContextMenuContentProps = WithTheme<{\n    $position: ContextMenuAlignment;\n    $zIndex: number;\n    $shouldHidePopupArrow: boolean;\n}>;\n\nexport const StyledMotionContextMenuContent = styled(\n    motion.div,\n)<StyledMotionContextMenuContentProps>`\n    background-color: ${({ theme }: StyledMotionContextMenuContentProps) => theme['001']};\n    border: 1px solid rgba(0, 0, 0, 0.1);\n    border-radius: ${({ $shouldHidePopupArrow }) => ($shouldHidePopupArrow ? '6px' : '3px')};\n    box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n    color: ${({ theme }: StyledMotionContextMenuContentProps) => theme.text};\n    max-width: 500px;\n    pointer-events: all;\n    position: absolute;\n    z-index: ${({ $zIndex }) => $zIndex};\n\n    &::after {\n        background-color: inherit;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        border-right: 1px solid rgba(0, 0, 0, 0.1);\n        box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n        content: '';\n        height: 14px;\n        position: absolute;\n        width: 14px;\n        z-index: -2;\n\n        ${({ $shouldHidePopupArrow }) =>\n            $shouldHidePopupArrow &&\n            css`\n                display: none;\n            `}\n\n        ${({ $position }) => {\n            switch ($position) {\n                case ContextMenuAlignment.TopLeft:\n                    return css`\n                        bottom: -7px;\n                        right: 7px;\n                        transform: rotate(45deg);\n                    `;\n                case ContextMenuAlignment.BottomLeft:\n                    return css`\n                        top: -7px;\n                        right: 7px;\n                        transform: rotate(225deg);\n                    `;\n                case ContextMenuAlignment.TopRight:\n                    return css`\n                        transform: rotate(45deg);\n                        bottom: -7px;\n                        left: 7px;\n                    `;\n                case ContextMenuAlignment.BottomRight:\n                    return css`\n                        transform: rotate(225deg);\n                        top: -7px;\n                        left: 7px;\n                    `;\n                case ContextMenuAlignment.TopCenter:\n                    return css`\n                        bottom: -7px;\n                        right: 45%;\n                        transform: rotate(45deg);\n                    `;\n                case ContextMenuAlignment.BottomCenter:\n                    return css`\n                        transform: rotate(225deg);\n                        top: -7px;\n                        left: 45%;\n                    `;\n\n                default:\n                    return undefined;\n            }\n        }}\n    }\n\n    &::before {\n        background-color: inherit;\n        bottom: 0;\n        content: '';\n        left: 0;\n        position: absolute;\n        right: 0;\n        top: 0;\n        border-radius: ${({ $shouldHidePopupArrow }) => ($shouldHidePopupArrow ? '6px' : '3px')};\n        z-index: -1;\n    }\n`;\n\nexport const StyledContextMenuContentItem = styled.div``;\n\ntype StyledContextMenuContentItemSpacerProps = WithTheme<unknown>;\n\nexport const StyledContextMenuContentItemSpacer = styled.div<StyledContextMenuContentItemSpacerProps>`\n    background-color: ${({ theme }) => theme['003']};\n    height: 1px;\n    width: 100%;\n`;\n\ntype StyledContextMenuContentItemWrapperProps = WithTheme<{\n    $shouldHidePopupArrow: boolean;\n    $isFocused: boolean;\n}>;\n\nexport const StyledContextMenuContentItemWrapper = styled.div<StyledContextMenuContentItemWrapperProps>`\n    align-items: center;\n    border-radius: ${({ $shouldHidePopupArrow }) => ($shouldHidePopupArrow ? '3px' : 0)};\n    cursor: pointer;\n    display: flex;\n    gap: 6px;\n    margin: ${({ $shouldHidePopupArrow }) => ($shouldHidePopupArrow ? '3px' : 0)};\n    overflow: hidden;\n    padding: 5px 8px;\n    transition: background-color 0.3s ease;\n\n    ${({ $isFocused, theme }) =>\n        $isFocused &&\n        css`\n            background-color: ${theme['secondary-103']};\n        `}\n\n    &:hover {\n        background-color: ${({ theme }: StyledContextMenuContentItemWrapperProps) =>\n            theme['secondary-103']};\n    }\n`;\n\nexport const StyledContextMenuContentItemIconWrapper = styled.div`\n    display: flex;\n    flex: 0 0 auto;\n    justify-content: center;\n    width: 20px;\n`;\n\nexport const StyledContextMenuContentHeadline = styled.div`\n    width: 100%;\n    margin: 3px 6px;\n    opacity: 50%;\n    font-weight: bold;\n`;\n\nexport const StyledContextMenuContentItemText = styled.div`\n    flex: 0 1 auto;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,oBAAoB,QAAQ,sBAAsB;AAQ3D,OAAO,MAAMC,8BAA8B,GAAGH,MAAM,CAChDD,MAAM,CAACK,GACX,CAAsC;AACtC,wBAAwB,CAAC;EAAEC;AAA2C,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACxF;AACA,qBAAqB,CAAC;EAAEC;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,KAAK,GAAG,KAAM;AAC3F;AACA,aAAa,CAAC;EAAED;AAA2C,CAAC,KAAKA,KAAK,CAACE,IAAI;AAC3E;AACA;AACA;AACA,eAAe,CAAC;EAAEC;AAAQ,CAAC,KAAKA,OAAO;AACvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU,CAAC;EAAEF;AAAsB,CAAC,KACxBA,qBAAqB,IACrBL,GAAG;AACf;AACA,aAAa;AACb;AACA,UAAU,CAAC;EAAEQ;AAAU,CAAC,KAAK;EACjB,QAAQA,SAAS;IACb,KAAKP,oBAAoB,CAACQ,OAAO;MAC7B,OAAOT,GAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IACL,KAAKC,oBAAoB,CAACS,UAAU;MAChC,OAAOV,GAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IACL,KAAKC,oBAAoB,CAACU,QAAQ;MAC9B,OAAOX,GAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IACL,KAAKC,oBAAoB,CAACW,WAAW;MACjC,OAAOZ,GAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IACL,KAAKC,oBAAoB,CAACY,SAAS;MAC/B,OAAOb,GAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IACL,KAAKC,oBAAoB,CAACa,YAAY;MAClC,OAAOd,GAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IAEL;MACI,OAAOe,SAAS;EACxB;AACJ,CAAC;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,yBAAyB,CAAC;EAAEV;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,KAAK,GAAG,KAAM;AAC/F;AACA;AACA,CAAC;AAED,OAAO,MAAMW,4BAA4B,GAAGjB,MAAM,CAACI,GAAG,EAAE;AAIxD,OAAO,MAAMc,kCAAkC,GAAGlB,MAAM,CAACI,GAA4C;AACrG,wBAAwB,CAAC;EAAEC;AAAM,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACnD;AACA;AACA,CAAC;AAOD,OAAO,MAAMc,mCAAmC,GAAGnB,MAAM,CAACI,GAA6C;AACvG;AACA,qBAAqB,CAAC;EAAEE;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,KAAK,GAAG,CAAE;AACvF;AACA;AACA;AACA,cAAc,CAAC;EAAEA;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,KAAK,GAAG,CAAE;AAChF;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEc,UAAU;EAAEf;AAAM,CAAC,KACpBe,UAAU,IACVnB,GAAG;AACX,gCAAgCI,KAAK,CAAC,eAAe,CAAC;AACtD,SAAS;AACT;AACA;AACA,4BAA4B,CAAC;EAAEA;AAAgD,CAAC,KACpEA,KAAK,CAAC,eAAe,CAAC;AAClC;AACA,CAAC;AAED,OAAO,MAAMgB,uCAAuC,GAAGrB,MAAM,CAACI,GAAG;AACjE;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMkB,gCAAgC,GAAGtB,MAAM,CAACI,GAAG;AAC1D;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMmB,gCAAgC,GAAGvB,MAAM,CAACI,GAAG;AAC1D;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

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

@@ -0,0 +1,143 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { StyledDropdownBodyWrapper, StyledDropdownBodyWrapperContent } from './DropdownBodyWrapper.styles';
+import { createPortal } from 'react-dom';
+import { DropdownDirection } from '../../types/dropdown';
+import DelayedDropdownContent from './delayed-dropdown-content/DelayedDropdownContent';
+import { useDropdown, useDropdownListener } from '../../hooks/dropdown';
+import { ContainerAnchor, useContainer } from '../../hooks/container';
+const DropdownBodyWrapper = ({
+  anchorElement,
+  bodyWidth,
+  children,
+  container: containerProp,
+  contentHeight = 0,
+  direction = DropdownDirection.BOTTOM_RIGHT,
+  maxHeight = 300,
+  minBodyWidth = 0,
+  onClose,
+  onOutsideClick,
+  onMeasure,
+  shouldShowDropdown
+}) => {
+  const isInChaynsWalletRef = useRef(false);
+  const [measuredContentHeight, setMeasuredContentHeight] = useState(0);
+  const [measuredContentWidth, setMeasuredContentWidth] = useState(0);
+  const [portal, setPortal] = useState();
+  const ref = useRef(null);
+  const shouldPreventClickRef = useRef(false);
+  const touchTimeoutRef = useRef(undefined);
+  const container = useContainer({
+    anchorElement,
+    container: containerProp
+  });
+  const {
+    transform,
+    width,
+    coordinates
+  } = useDropdown({
+    anchorElement,
+    container,
+    contentHeight,
+    contentWidth: bodyWidth ?? measuredContentWidth,
+    direction,
+    shouldShowDropdown
+  });
+  const handleClose = useCallback(() => {
+    if (typeof onClose === 'function') {
+      onClose();
+    }
+  }, [onClose]);
+
+  /**
+   * This function closes the body
+   */
+  const handleClick = useCallback(event => {
+    if (ref.current && shouldShowDropdown && !anchorElement.contains(event.target) && !ref.current.contains(event.target)) {
+      event.preventDefault();
+      event.stopPropagation();
+      const shouldPreventCloseOnClick = onOutsideClick?.() ?? false;
+      if (!shouldPreventClickRef.current && !shouldPreventCloseOnClick) {
+        handleClose();
+      }
+    }
+    shouldPreventClickRef.current = false;
+  }, [anchorElement, handleClose, onOutsideClick, shouldShowDropdown]);
+  const handleContentMeasure = 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 = useCallback(() => {
+    clearTimeout(touchTimeoutRef.current);
+  }, []);
+  const handleTouchStart = useCallback(() => {
+    touchTimeoutRef.current = window.setTimeout(() => {
+      shouldPreventClickRef.current = true;
+    }, 500);
+  }, []);
+
+  /**
+   * This hook listens for clicks
+   */
+  useDropdownListener({
+    onClick: handleClick,
+    onClose: handleClose,
+    onTouchEnd: handleTouchEnd,
+    onTouchStart: handleTouchStart
+  });
+  useEffect(() => {
+    const isBottomDirection = [DropdownDirection.BOTTOM, DropdownDirection.BOTTOM_LEFT, DropdownDirection.BOTTOM_RIGHT].includes(direction);
+    const reservationWrapperElement = anchorElement.closest(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]);
+  useEffect(() => {
+    if (!container) return;
+    setPortal(() => /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(DelayedDropdownContent, {
+      coordinates: coordinates,
+      onMeasure: handleContentMeasure,
+      shouldShowContent: shouldShowDropdown,
+      transform: transform
+    }, /*#__PURE__*/React.createElement(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.createElement(StyledDropdownBodyWrapper, null, portal);
+};
+DropdownBodyWrapper.displayName = 'DropdownBodyWrapper';
+export default DropdownBodyWrapper;
+//# sourceMappingURL=DropdownBodyWrapper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownBodyWrapper.js","names":["React","useCallback","useEffect","useRef","useState","StyledDropdownBodyWrapper","StyledDropdownBodyWrapperContent","createPortal","DropdownDirection","DelayedDropdownContent","useDropdown","useDropdownListener","ContainerAnchor","useContainer","DropdownBodyWrapper","anchorElement","bodyWidth","children","container","containerProp","contentHeight","direction","BOTTOM_RIGHT","maxHeight","minBodyWidth","onClose","onOutsideClick","onMeasure","shouldShowDropdown","isInChaynsWalletRef","measuredContentHeight","setMeasuredContentHeight","measuredContentWidth","setMeasuredContentWidth","portal","setPortal","ref","shouldPreventClickRef","touchTimeoutRef","undefined","transform","width","coordinates","contentWidth","handleClose","handleClick","event","current","contains","target","preventDefault","stopPropagation","shouldPreventCloseOnClick","handleContentMeasure","measurements","height","handleTouchEnd","clearTimeout","handleTouchStart","window","setTimeout","onClick","onTouchEnd","onTouchStart","isBottomDirection","BOTTOM","BOTTOM_LEFT","includes","reservationWrapperElement","closest","RESERVATION_WRAPPER","availableHeight","innerHeight","getBoundingClientRect","bottom","additionalNeededSpace","style","marginBottom","createElement","shouldShowContent","$width","$minWidth","$maxHeight","$direction","displayName"],"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/esm/components/dropdown-body-wrapper/DropdownBodyWrapper.styles.js

@@ -0,0 +1,43 @@
+import styled, { css } from 'styled-components';
+import { DropdownDirection } from '../../types/dropdown';
+export const StyledDropdownBodyWrapper = styled.div``;
+export const StyledDropdownBodyWrapperContent = styled.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 ([DropdownDirection.BOTTOM, DropdownDirection.BOTTOM_LEFT, DropdownDirection.BOTTOM_RIGHT].includes($direction)) {
+    return css`
+                border-bottom-left-radius: 3px;
+                border-bottom-right-radius: 3px;
+                box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2);
+            `;
+  }
+  return 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/esm/components/dropdown-body-wrapper/DropdownBodyWrapper.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownBodyWrapper.styles.js","names":["styled","css","DropdownDirection","StyledDropdownBodyWrapper","div","StyledDropdownBodyWrapperContent","$width","$maxHeight","$minWidth","theme","$direction","BOTTOM","BOTTOM_LEFT","BOTTOM_RIGHT","includes"],"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,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,iBAAiB,QAAQ,sBAAsB;AAExD,OAAO,MAAMC,yBAAyB,GAAGH,MAAM,CAACI,GAAG,EAAE;AASrD,OAAO,MAAMC,gCAAgC,GAAGL,MAAM,CAACI,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,CACIR,iBAAiB,CAACS,MAAM,EACxBT,iBAAiB,CAACU,WAAW,EAC7BV,iBAAiB,CAACW,YAAY,CACjC,CAACC,QAAQ,CAACJ,UAAU,CAAC,EACxB;IACE,OAAOT,GAAG;AACtB;AACA;AACA;AACA,aAAa;EACL;EAEA,OAAOA,GAAG;AAClB;AACA;AACA;AACA,SAAS;AACL,CAAC;AACL,CAAC","ignoreList":[]}

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

@@ -0,0 +1,99 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { StyledMotionDelayedDropdownContent } from './DelayedDropdownContent.styles';
+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] = useState(AnimationType.None);
+  const ref = useRef();
+  const timeoutRef = useRef();
+  const measureElement = 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]);
+  useEffect(() => {
+    if (!shouldShowContent) return () => {};
+    const observer = new ResizeObserver(() => {
+      measureElement();
+    });
+    if (ref.current) {
+      observer.observe(ref.current);
+    }
+    return () => observer.disconnect();
+  }, [measureElement, shouldShowContent]);
+  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 = useCallback(reference => {
+    ref.current = reference ?? undefined;
+    measureElement();
+  }, [measureElement]);
+  if (animationState === AnimationType.None) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(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';
+export default DelayedDropdownContent;
+//# sourceMappingURL=DelayedDropdownContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DelayedDropdownContent.js","names":["React","useCallback","useEffect","useRef","useState","StyledMotionDelayedDropdownContent","ANIMATION_DELAY_MS","AnimationType","DelayedDropdownContent","children","shouldShowContent","onMeasure","coordinates","transform","animationState","setAnimationState","None","ref","timeoutRef","measureElement","current","height","width","x","y","getBoundingClientRect","scrollHeight","element","FadeIn","window","setTimeout","Visible","observer","ResizeObserver","observe","disconnect","Hidden","clearTimeout","prevState","FadeOut","refCallback","reference","undefined","createElement","$coordinates","$transform","$shouldHideContent","animate","opacity","includes","transition","duration","type","inert","displayName"],"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":"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","ignoreList":[]}

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

@@ -0,0 +1,30 @@
+import { motion } from 'motion/react';
+import styled, { css } from 'styled-components';
+export const StyledMotionDelayedDropdownContent = styled(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 ? css`
+                  visibility: hidden;
+                  pointer-events: none;
+                  z-index: -1;
+              ` : css`
+                  z-index: 15;
+              `}
+`;
+//# sourceMappingURL=DelayedDropdownContent.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DelayedDropdownContent.styles.js","names":["motion","styled","css","StyledMotionDelayedDropdownContent","div","$coordinates","y","x","$transform","$shouldHideContent"],"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,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAU/C,OAAO,MAAMC,kCAAkC,GAAGF,MAAM,CACpDD,MAAM,CAACI,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,GACZP,GAAG;AACjB;AACA;AACA;AACA,eAAe,GACDA,GAAG;AACjB;AACA,eAAe;AACf,CAAC","ignoreList":[]}

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

@@ -1,24 +1,22 @@
-import { AnimatePresence } from 'framer-motion';
+import { AnimatePresence } from 'motion/react';
 import React, { useMemo } from 'react';
 import { StyledMotionExpandableContent } from './ExpandableContent.styles';
-const ExpandableContent = _ref => {
-  let {
-    children,
-    isOpen
-  } = _ref;
-  return useMemo(() => /*#__PURE__*/React.createElement(AnimatePresence, {
-    initial: false
-  }, /*#__PURE__*/React.createElement(StyledMotionExpandableContent, {
-    $isOpen: isOpen,
-    animate: {
-      height: isOpen ? 'auto' : '0px'
-    },
-    transition: {
-      duration: 0.2,
-      type: 'tween'
-    }
-  }, children)), [children, isOpen]);
-};
+const ExpandableContent = ({
+  children,
+  isOpen,
+  startDelay
+}) => useMemo(() => /*#__PURE__*/React.createElement(AnimatePresence, {
+  initial: false
+}, /*#__PURE__*/React.createElement(StyledMotionExpandableContent, {
+  animate: {
+    height: isOpen ? 'auto' : '0px'
+  },
+  transition: {
+    duration: 0.2,
+    type: 'tween',
+    delay: isOpen ? startDelay : 0
+  }
+}, children)), [children, isOpen, startDelay]);
 ExpandableContent.displayName = 'ExpandableContent';
 export default ExpandableContent;
 //# sourceMappingURL=ExpandableContent.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ExpandableContent.js","names":["AnimatePresence","React","useMemo","StyledMotionExpandableContent","ExpandableContent","_ref","children","isOpen","createElement","initial","$isOpen","animate","height","transition","duration","type","displayName"],"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,SAASA,eAAe,QAAQ,eAAe;AAC/C,OAAOC,KAAK,IAAmBC,OAAO,QAAQ,OAAO;AACrD,SAASC,6BAA6B,QAAQ,4BAA4B;AAa1E,MAAMC,iBAA6C,GAAGC,IAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEC;EAAO,CAAC,GAAAF,IAAA;EAAA,OACvEH,OAAO,CACH,mBACID,KAAA,CAAAO,aAAA,CAACR,eAAe;IAACS,OAAO,EAAE;EAAM,gBAC5BR,KAAA,CAAAO,aAAA,CAACL,6BAA6B;IAC1BO,OAAO,EAAEH,MAAO;IAChBI,OAAO,EAAE;MAAEC,MAAM,EAAEL,MAAM,GAAG,MAAM,GAAG;IAAM,CAAE;IAC7CM,UAAU,EAAE;MAAEC,QAAQ,EAAE,GAAG;MAAEC,IAAI,EAAE;IAAQ;EAAE,GAE5CT,QAC0B,CAClB,CACpB,EACD,CAACA,QAAQ,EAAEC,MAAM,CACrB,CAAC;AAAA;AAELH,iBAAiB,CAACY,WAAW,GAAG,mBAAmB;AAEnD,eAAeZ,iBAAiB","ignoreList":[]}
+{"version":3,"file":"ExpandableContent.js","names":["AnimatePresence","React","useMemo","StyledMotionExpandableContent","ExpandableContent","children","isOpen","startDelay","createElement","initial","animate","height","transition","duration","type","delay","displayName"],"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,SAASA,eAAe,QAAQ,cAAc;AAC9C,OAAOC,KAAK,IAAmBC,OAAO,QAAQ,OAAO;AACrD,SAASC,6BAA6B,QAAQ,4BAA4B;AAiB1E,MAAMC,iBAA6C,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,MAAM;EAAEC;AAAW,CAAC,KACnFL,OAAO,CACH,mBACID,KAAA,CAAAO,aAAA,CAACR,eAAe;EAACS,OAAO,EAAE;AAAM,gBAC5BR,KAAA,CAAAO,aAAA,CAACL,6BAA6B;EAC1BO,OAAO,EAAE;IAAEC,MAAM,EAAEL,MAAM,GAAG,MAAM,GAAG;EAAM,CAAE;EAC7CM,UAAU,EAAE;IAAEC,QAAQ,EAAE,GAAG;IAAEC,IAAI,EAAE,OAAO;IAAEC,KAAK,EAAET,MAAM,GAAGC,UAAU,GAAG;EAAE;AAAE,GAE5EF,QAC0B,CAClB,CACpB,EACD,CAACA,QAAQ,EAAEC,MAAM,EAAEC,UAAU,CACjC,CAAC;AAELH,iBAAiB,CAACY,WAAW,GAAG,mBAAmB;AAEnD,eAAeZ,iBAAiB","ignoreList":[]}

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

@@ -1,11 +1,6 @@
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import styled from 'styled-components';
 export const StyledMotionExpandableContent = styled(motion.div)`
-    overflow: ${_ref => {
-  let {
-    $isOpen
-  } = _ref;
-  return $isOpen ? 'visible' : 'hidden';
-}};
+    overflow: hidden;
 `;
 //# sourceMappingURL=ExpandableContent.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ExpandableContent.styles.js","names":["motion","styled","StyledMotionExpandableContent","div","_ref","$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,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AAMtC,OAAO,MAAMC,6BAA6B,GAAGD,MAAM,CAACD,MAAM,CAACG,GAAG,CAAqC;AACnG,gBAAgBC,IAAA;EAAA,IAAC;IAAEC;EAAQ,CAAC,GAAAD,IAAA;EAAA,OAAMC,OAAO,GAAG,SAAS,GAAG,QAAQ;AAAA,CAAC;AACjE,CAAC","ignoreList":[]}
+{"version":3,"file":"ExpandableContent.styles.js","names":["motion","styled","StyledMotionExpandableContent","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,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,6BAA6B,GAAGD,MAAM,CAACD,MAAM,CAACG,GAAG,CAAC;AAC/D;AACA,CAAC","ignoreList":[]}