@chayns-components/core 5.0.0-beta.786 → 5.0.0-beta.789

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/lib/cjs/components/accordion/Accordion.styles.js +2 -2
  2. package/lib/cjs/components/accordion/Accordion.styles.js.map +1 -1
  3. package/lib/cjs/components/list/list-item/ListItem.js +2 -0
  4. package/lib/cjs/components/list/list-item/ListItem.js.map +1 -1
  5. package/lib/cjs/components/list/list-item/ListItem.styles.js +10 -6
  6. package/lib/cjs/components/list/list-item/ListItem.styles.js.map +1 -1
  7. package/lib/cjs/components/list/list-item/list-item-head/ListItemHead.js +2 -1
  8. package/lib/cjs/components/list/list-item/list-item-head/ListItemHead.js.map +1 -1
  9. package/lib/cjs/components/popup/Popup.js +3 -1
  10. package/lib/cjs/components/popup/Popup.js.map +1 -1
  11. package/lib/cjs/components/popup/Popup.styles.js +11 -5
  12. package/lib/cjs/components/popup/Popup.styles.js.map +1 -1
  13. package/lib/cjs/components/tooltip/Tooltip.js +2 -1
  14. package/lib/cjs/components/tooltip/Tooltip.js.map +1 -1
  15. package/lib/esm/components/accordion/Accordion.styles.js +2 -2
  16. package/lib/esm/components/accordion/Accordion.styles.js.map +1 -1
  17. package/lib/esm/components/list/list-item/ListItem.js +2 -0
  18. package/lib/esm/components/list/list-item/ListItem.js.map +1 -1
  19. package/lib/esm/components/list/list-item/ListItem.styles.js +10 -6
  20. package/lib/esm/components/list/list-item/ListItem.styles.js.map +1 -1
  21. package/lib/esm/components/list/list-item/list-item-head/ListItemHead.js +2 -1
  22. package/lib/esm/components/list/list-item/list-item-head/ListItemHead.js.map +1 -1
  23. package/lib/esm/components/popup/Popup.js +3 -1
  24. package/lib/esm/components/popup/Popup.js.map +1 -1
  25. package/lib/esm/components/popup/Popup.styles.js +14 -6
  26. package/lib/esm/components/popup/Popup.styles.js.map +1 -1
  27. package/lib/esm/components/tooltip/Tooltip.js +2 -1
  28. package/lib/esm/components/tooltip/Tooltip.js.map +1 -1
  29. package/lib/types/components/list/list-item/ListItem.d.ts +6 -0
  30. package/lib/types/components/list/list-item/list-item-head/ListItemHead.d.ts +1 -0
  31. package/lib/types/components/popup/Popup.d.ts +4 -0
  32. package/lib/types/components/popup/Popup.styles.d.ts +6 -1
  33. package/package.json +2 -2
@@ -50,12 +50,12 @@ const StyledMotionAccordion = exports.StyledMotionAccordion = (0, _styledCompone
50
50
  if (theme.accordionLines) {
51
51
  if ($isWrapped && $shouldShowLines) {
52
52
  return (0, _styledComponents.css)`
53
- border-bottom-color: ${theme.headline}80;
53
+ border-bottom-color: rgba(${theme['headline-rgb']}, 0.5);
54
54
  `;
55
55
  }
56
56
  if (!$isOpen && $shouldShowLines) {
57
57
  return (0, _styledComponents.css)`
58
- border-bottom-color: ${theme.headline};
58
+ border-bottom-color: rgba(${theme['headline-rgb']}, 0.5);
59
59
  `;
60
60
  }
61
61
  }
@@ -1 +1 @@
1
- {"version":3,"file":"Accordion.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledMotionAccordion","exports","styled","motion","div","$isOpen","$isWrapped","$shouldForceBackground","$shouldHideBackground","theme","css","cardBackgroundOpacity","cardBorderRadius","cardShadow","accordionLines","$shouldShowLines","undefined","headline","$isParentWrapped"],"sources":["../../../../src/components/accordion/Accordion.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionProps = WithTheme<{\n $isOpen: boolean;\n $isParentWrapped: boolean;\n $isWrapped?: boolean;\n $shouldForceBackground?: boolean;\n $shouldHideBackground?: boolean;\n $shouldShowLines?: boolean;\n}>;\n\nexport const StyledMotionAccordion = styled(motion.div)<StyledMotionAccordionProps>`\n ${({\n $isOpen,\n $isWrapped,\n $shouldForceBackground,\n $shouldHideBackground,\n theme,\n }: StyledMotionAccordionProps) =>\n ($isOpen || $shouldForceBackground) &&\n !$isWrapped &&\n !$shouldHideBackground &&\n css`\n background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n border-radius: ${theme.cardBorderRadius}px;\n box-shadow: 0 2px 6px 0 rgba(0, 0, 0, ${theme.cardShadow});\n `}\n\n ${({ theme }: StyledMotionAccordionProps) =>\n theme.accordionLines &&\n css`\n border-bottom: 1px solid transparent;\n `}\n \n margin-bottom: ${({ $isOpen, $isWrapped }: StyledMotionAccordionProps) =>\n $isOpen && !$isWrapped ? '30px' : '0px'};\n transition:\n background-color 0.3s ease,\n border-bottom-color 0.3s ease,\n border-radius 0.3s ease,\n box-shadow 0.3s ease,\n margin-bottom 0.3s ease;\n will-change: unset !important;\n\n ${({\n $isOpen,\n $isWrapped,\n $shouldForceBackground,\n $shouldShowLines,\n theme,\n }: StyledMotionAccordionProps) => {\n if ($shouldForceBackground) return undefined;\n\n if (theme.accordionLines) {\n if ($isWrapped && $shouldShowLines) {\n return css`\n border-bottom-color: ${theme.headline}80;\n `;\n }\n\n if (!$isOpen && $shouldShowLines) {\n return css`\n border-bottom-color: ${theme.headline};\n `;\n }\n }\n\n return undefined;\n }}\n ${({ $isParentWrapped }: StyledMotionAccordionProps) =>\n $isParentWrapped &&\n css`\n padding-left: 17px;\n `}\n ${({ $isWrapped }: StyledMotionAccordionProps) =>\n !$isWrapped &&\n css`\n margin-top: 10px;\n `}\n ${({ $isWrapped, $shouldHideBackground, theme }: StyledMotionAccordionProps) =>\n !$isWrapped &&\n !$shouldHideBackground &&\n css`\n &:hover {\n background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n }\n `};\n`;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"Accordion.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledMotionAccordion","exports","styled","motion","div","$isOpen","$isWrapped","$shouldForceBackground","$shouldHideBackground","theme","css","cardBackgroundOpacity","cardBorderRadius","cardShadow","accordionLines","$shouldShowLines","undefined","$isParentWrapped"],"sources":["../../../../src/components/accordion/Accordion.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionProps = WithTheme<{\n $isOpen: boolean;\n $isParentWrapped: boolean;\n $isWrapped?: boolean;\n $shouldForceBackground?: boolean;\n $shouldHideBackground?: boolean;\n $shouldShowLines?: boolean;\n}>;\n\nexport const StyledMotionAccordion = styled(motion.div)<StyledMotionAccordionProps>`\n ${({\n $isOpen,\n $isWrapped,\n $shouldForceBackground,\n $shouldHideBackground,\n theme,\n }: StyledMotionAccordionProps) =>\n ($isOpen || $shouldForceBackground) &&\n !$isWrapped &&\n !$shouldHideBackground &&\n css`\n background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n border-radius: ${theme.cardBorderRadius}px;\n box-shadow: 0 2px 6px 0 rgba(0, 0, 0, ${theme.cardShadow});\n `}\n\n ${({ theme }: StyledMotionAccordionProps) =>\n theme.accordionLines &&\n css`\n border-bottom: 1px solid transparent;\n `}\n \n margin-bottom: ${({ $isOpen, $isWrapped }: StyledMotionAccordionProps) =>\n $isOpen && !$isWrapped ? '30px' : '0px'};\n transition:\n background-color 0.3s ease,\n border-bottom-color 0.3s ease,\n border-radius 0.3s ease,\n box-shadow 0.3s ease,\n margin-bottom 0.3s ease;\n will-change: unset !important;\n\n ${({\n $isOpen,\n $isWrapped,\n $shouldForceBackground,\n $shouldShowLines,\n theme,\n }: StyledMotionAccordionProps) => {\n if ($shouldForceBackground) return undefined;\n\n if (theme.accordionLines) {\n if ($isWrapped && $shouldShowLines) {\n return css`\n border-bottom-color: rgba(${theme['headline-rgb']}, 0.5);\n `;\n }\n\n if (!$isOpen && $shouldShowLines) {\n return css`\n border-bottom-color: rgba(${theme['headline-rgb']}, 0.5);\n `;\n }\n }\n\n return undefined;\n }}\n ${({ $isParentWrapped }: StyledMotionAccordionProps) =>\n $isParentWrapped &&\n css`\n padding-left: 17px;\n `}\n ${({ $isWrapped }: StyledMotionAccordionProps) =>\n !$isWrapped &&\n css`\n margin-top: 10px;\n `}\n ${({ $isWrapped, $shouldHideBackground, theme }: StyledMotionAccordionProps) =>\n !$isWrapped &&\n !$shouldHideBackground &&\n css`\n &:hover {\n background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n }\n `};\n`;\n"],"mappings":"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","ignoreList":[]}
@@ -26,6 +26,7 @@ const ListItem = ({
26
26
  onLongPress,
27
27
  leftElements,
28
28
  rightElements,
29
+ shouldHideIndicator,
29
30
  subtitle,
30
31
  shouldShowRoundImage,
31
32
  shouldShowSeparatorBelow = false,
@@ -96,6 +97,7 @@ const ListItem = ({
96
97
  onClick: isClickable ? handleHeadClick : undefined,
97
98
  onLongPress: onLongPress,
98
99
  rightElements: rightElements,
100
+ shouldHideIndicator: shouldHideIndicator,
99
101
  subtitle: subtitle,
100
102
  shouldShowRoundImage: shouldShowRoundImage,
101
103
  title: title,
@@ -1 +1 @@
1
- {"version":3,"file":"ListItem.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_uuid","_AreaContextProvider","_interopRequireDefault","_List","_ListItemBody","_ListItemHead","_ListItem","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ListItem","children","hoverItem","icons","images","isDefaultOpen","isOpen","onClick","onLongPress","leftElements","rightElements","subtitle","shouldShowRoundImage","shouldShowSeparatorBelow","title","titleElement","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","useContext","ListContext","uuid","useUuid","isExpandable","undefined","isItemOpen","handleHeadClick","useCallback","event","useEffect","shouldOnlyOpen","isClickable","createElement","StyledMotionListItem","animate","height","opacity","className","exit","initial","key","$isClickable","$isOpen","$isWrapped","$shouldShowSeparatorBelow","AnimatePresence","id","displayName","_default","exports"],"sources":["../../../../../src/components/list/list-item/ListItem.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n FC,\n MouseEventHandler,\n ReactNode,\n TouchEventHandler,\n useCallback,\n useContext,\n useEffect,\n} from 'react';\nimport { useUuid } from '../../../hooks/uuid';\nimport type { IListItemRightElements } from '../../../types/list';\nimport AreaContextProvider from '../../area-provider/AreaContextProvider';\nimport { ListContext } from '../List';\nimport ListItemBody from './list-item-body/ListItemBody';\nimport ListItemHead from './list-item-head/ListItemHead';\nimport { StyledMotionListItem } from './ListItem.styles';\n\nexport type ListItemElements = [ReactNode, ...ReactNode[]];\n\nexport type ListItemProps = {\n /**\n * The content of the `ListItem` body. When the `ListItem` has children,\n * it can be opened and also gets an icon as an indicator automatically.\n */\n children?: ReactNode;\n /**\n * Element that is displayed when hovering over the `ListItem` on the right\n * side. On mobile devices, this element is not displayed.\n */\n hoverItem?: ReactNode;\n /**\n * The FontAwesome or tobit icons to render like an image on the left side\n * of the header. Multiple icons are stacked. See the `Icon` component\n * documentation for more information.\n */\n icons?: string[];\n /**\n * A list of image URLs that are displayed on the left side of the header.\n * If multiple URLs are passed, the image is assembled from the first three\n * image URLs as a puzzle.\n */\n images?: string[];\n /**\n * This can be used to automatically expand the `ListItem` during the first render.\n */\n isDefaultOpen?: boolean;\n /**\n * This overrides the internal opening state of the item and makes it controlled.\n */\n isOpen?: boolean;\n /**\n * Function to be executed when the header of the `ListItem` was clicked\n */\n onClick?: MouseEventHandler<HTMLDivElement>;\n /**\n * Function to be executed when the header of the `ListItem` is pressed for\n * 400 milliseconds.\n */\n onLongPress?: TouchEventHandler<HTMLDivElement>;\n /**\n * Elements that are displayed on the left side of the header. If multiple\n * elements are specified, they are displayed one aside the other.\n */\n leftElements?: ListItemElements;\n /**\n * Elements that are displayed on the right side of the header. If multiple\n * elements are specified, they are displayed one below the other.\n */\n rightElements?: IListItemRightElements;\n /**\n * Images of users should always be displayed in a round shape. Therefore,\n * this property can be set to true.\n */\n shouldShowRoundImage?: boolean;\n /**\n * Whether a separator should be displayed below this item. In this case, the border is displayed thicker than normal.\n */\n shouldShowSeparatorBelow?: boolean;\n /**\n * Subtitle of the `ListItem` displayed in the head below the title\n */\n subtitle?: ReactNode;\n /**\n * Title of the `ListItem` displayed in the head\n */\n title: ReactNode;\n /**\n * Additional elements to be displayed in the header next to the title.\n */\n titleElement?: ReactNode;\n};\n\nconst ListItem: FC<ListItemProps> = ({\n children,\n hoverItem,\n icons,\n images,\n isDefaultOpen,\n isOpen,\n onClick,\n onLongPress,\n leftElements,\n rightElements,\n subtitle,\n shouldShowRoundImage,\n shouldShowSeparatorBelow = false,\n title,\n titleElement,\n}) => {\n const {\n incrementExpandableItemCount,\n isAnyItemExpandable,\n isWrapped,\n openItemUuid,\n updateOpenItemUuid,\n } = useContext(ListContext);\n\n const uuid = useUuid();\n\n const isExpandable = children !== undefined;\n const isItemOpen = isOpen ?? openItemUuid === uuid;\n\n const handleHeadClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n (event) => {\n if (isExpandable) {\n updateOpenItemUuid(uuid);\n }\n\n if (typeof onClick === 'function') {\n onClick(event);\n }\n },\n [isExpandable, onClick, updateOpenItemUuid, uuid],\n );\n\n useEffect(() => {\n if (isExpandable) {\n // The incrementExpandableItemCount function returns an cleanup\n // function to decrement expandableItemCount if component unmounts\n return incrementExpandableItemCount();\n }\n\n return undefined;\n }, [incrementExpandableItemCount, isExpandable]);\n\n useEffect(() => {\n if (isDefaultOpen) {\n updateOpenItemUuid(uuid, { shouldOnlyOpen: true });\n }\n }, [isDefaultOpen, updateOpenItemUuid, uuid]);\n\n const isClickable = typeof onClick === 'function' || isExpandable;\n\n return (\n <StyledMotionListItem\n animate={{ height: 'auto', opacity: 1 }}\n className=\"beta-chayns-list-item\"\n exit={{ height: 0, opacity: 0 }}\n initial={{ height: 0, opacity: 0 }}\n key={`list-item-${uuid}`}\n $isClickable={isClickable}\n $isOpen={isItemOpen}\n $isWrapped={isWrapped}\n $shouldShowSeparatorBelow={shouldShowSeparatorBelow}\n >\n <ListItemHead\n hoverItem={hoverItem}\n icons={icons}\n images={images}\n isAnyItemExpandable={isAnyItemExpandable}\n isExpandable={isExpandable}\n isOpen={isItemOpen}\n leftElements={leftElements}\n onClick={isClickable ? handleHeadClick : undefined}\n onLongPress={onLongPress}\n rightElements={rightElements}\n subtitle={subtitle}\n shouldShowRoundImage={shouldShowRoundImage}\n title={title}\n titleElement={titleElement}\n />\n <AnimatePresence initial={false}>\n {isExpandable && isItemOpen && (\n <ListItemBody id={uuid}>\n <AreaContextProvider>{children}</AreaContextProvider>\n </ListItemBody>\n )}\n </AnimatePresence>\n </StyledMotionListItem>\n );\n};\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"ListItem.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_uuid","_AreaContextProvider","_interopRequireDefault","_List","_ListItemBody","_ListItemHead","_ListItem","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ListItem","children","hoverItem","icons","images","isDefaultOpen","isOpen","onClick","onLongPress","leftElements","rightElements","shouldHideIndicator","subtitle","shouldShowRoundImage","shouldShowSeparatorBelow","title","titleElement","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","useContext","ListContext","uuid","useUuid","isExpandable","undefined","isItemOpen","handleHeadClick","useCallback","event","useEffect","shouldOnlyOpen","isClickable","createElement","StyledMotionListItem","animate","height","opacity","className","exit","initial","key","$isClickable","$isOpen","$isWrapped","$shouldShowSeparatorBelow","AnimatePresence","id","displayName","_default","exports"],"sources":["../../../../../src/components/list/list-item/ListItem.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n FC,\n MouseEventHandler,\n ReactNode,\n TouchEventHandler,\n useCallback,\n useContext,\n useEffect,\n} from 'react';\nimport { useUuid } from '../../../hooks/uuid';\nimport type { IListItemRightElements } from '../../../types/list';\nimport AreaContextProvider from '../../area-provider/AreaContextProvider';\nimport { ListContext } from '../List';\nimport ListItemBody from './list-item-body/ListItemBody';\nimport ListItemHead from './list-item-head/ListItemHead';\nimport { StyledMotionListItem } from './ListItem.styles';\n\nexport type ListItemElements = [ReactNode, ...ReactNode[]];\n\nexport type ListItemProps = {\n /**\n * The content of the `ListItem` body. When the `ListItem` has children,\n * it can be opened and also gets an icon as an indicator automatically.\n */\n children?: ReactNode;\n /**\n * Element that is displayed when hovering over the `ListItem` on the right\n * side. On mobile devices, this element is not displayed.\n */\n hoverItem?: ReactNode;\n /**\n * The FontAwesome or tobit icons to render like an image on the left side\n * of the header. Multiple icons are stacked. See the `Icon` component\n * documentation for more information.\n */\n icons?: string[];\n /**\n * A list of image URLs that are displayed on the left side of the header.\n * If multiple URLs are passed, the image is assembled from the first three\n * image URLs as a puzzle.\n */\n images?: string[];\n /**\n * This can be used to automatically expand the `ListItem` during the first render.\n */\n isDefaultOpen?: boolean;\n /**\n * This overrides the internal opening state of the item and makes it controlled.\n */\n isOpen?: boolean;\n /**\n * Function to be executed when the header of the `ListItem` was clicked\n */\n onClick?: MouseEventHandler<HTMLDivElement>;\n /**\n * Function to be executed when the header of the `ListItem` is pressed for\n * 400 milliseconds.\n */\n onLongPress?: TouchEventHandler<HTMLDivElement>;\n /**\n * Elements that are displayed on the left side of the header. If multiple\n * elements are specified, they are displayed one aside the other.\n */\n leftElements?: ListItemElements;\n /**\n * Elements that are displayed on the right side of the header. If multiple\n * elements are specified, they are displayed one below the other.\n */\n rightElements?: IListItemRightElements;\n /**\n * If the `ListItem` is expandable, the indicator is displayed on the left\n * side of the header. If this property is set to true, the indicator is\n * hidden.\n */\n shouldHideIndicator?: boolean;\n /**\n * Images of users should always be displayed in a round shape. Therefore,\n * this property can be set to true.\n */\n shouldShowRoundImage?: boolean;\n /**\n * Whether a separator should be displayed below this item. In this case, the border is displayed thicker than normal.\n */\n shouldShowSeparatorBelow?: boolean;\n /**\n * Subtitle of the `ListItem` displayed in the head below the title\n */\n subtitle?: ReactNode;\n /**\n * Title of the `ListItem` displayed in the head\n */\n title: ReactNode;\n /**\n * Additional elements to be displayed in the header next to the title.\n */\n titleElement?: ReactNode;\n};\n\nconst ListItem: FC<ListItemProps> = ({\n children,\n hoverItem,\n icons,\n images,\n isDefaultOpen,\n isOpen,\n onClick,\n onLongPress,\n leftElements,\n rightElements,\n shouldHideIndicator,\n subtitle,\n shouldShowRoundImage,\n shouldShowSeparatorBelow = false,\n title,\n titleElement,\n}) => {\n const {\n incrementExpandableItemCount,\n isAnyItemExpandable,\n isWrapped,\n openItemUuid,\n updateOpenItemUuid,\n } = useContext(ListContext);\n\n const uuid = useUuid();\n\n const isExpandable = children !== undefined;\n const isItemOpen = isOpen ?? openItemUuid === uuid;\n\n const handleHeadClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n (event) => {\n if (isExpandable) {\n updateOpenItemUuid(uuid);\n }\n\n if (typeof onClick === 'function') {\n onClick(event);\n }\n },\n [isExpandable, onClick, updateOpenItemUuid, uuid],\n );\n\n useEffect(() => {\n if (isExpandable) {\n // The incrementExpandableItemCount function returns an cleanup\n // function to decrement expandableItemCount if component unmounts\n return incrementExpandableItemCount();\n }\n\n return undefined;\n }, [incrementExpandableItemCount, isExpandable]);\n\n useEffect(() => {\n if (isDefaultOpen) {\n updateOpenItemUuid(uuid, { shouldOnlyOpen: true });\n }\n }, [isDefaultOpen, updateOpenItemUuid, uuid]);\n\n const isClickable = typeof onClick === 'function' || isExpandable;\n\n return (\n <StyledMotionListItem\n animate={{ height: 'auto', opacity: 1 }}\n className=\"beta-chayns-list-item\"\n exit={{ height: 0, opacity: 0 }}\n initial={{ height: 0, opacity: 0 }}\n key={`list-item-${uuid}`}\n $isClickable={isClickable}\n $isOpen={isItemOpen}\n $isWrapped={isWrapped}\n $shouldShowSeparatorBelow={shouldShowSeparatorBelow}\n >\n <ListItemHead\n hoverItem={hoverItem}\n icons={icons}\n images={images}\n isAnyItemExpandable={isAnyItemExpandable}\n isExpandable={isExpandable}\n isOpen={isItemOpen}\n leftElements={leftElements}\n onClick={isClickable ? handleHeadClick : undefined}\n onLongPress={onLongPress}\n rightElements={rightElements}\n shouldHideIndicator={shouldHideIndicator}\n subtitle={subtitle}\n shouldShowRoundImage={shouldShowRoundImage}\n title={title}\n titleElement={titleElement}\n />\n <AnimatePresence initial={false}>\n {isExpandable && isItemOpen && (\n <ListItemBody id={uuid}>\n <AreaContextProvider>{children}</AreaContextProvider>\n </ListItemBody>\n )}\n </AnimatePresence>\n </StyledMotionListItem>\n );\n};\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AASA,IAAAG,KAAA,GAAAH,OAAA;AAEA,IAAAI,oBAAA,GAAAC,sBAAA,CAAAL,OAAA;AACA,IAAAM,KAAA,GAAAN,OAAA;AACA,IAAAO,aAAA,GAAAF,sBAAA,CAAAL,OAAA;AACA,IAAAQ,aAAA,GAAAH,sBAAA,CAAAL,OAAA;AACA,IAAAS,SAAA,GAAAT,OAAA;AAAyD,SAAAK,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAG,yBAAAH,CAAA,6BAAAI,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAD,wBAAA,YAAAA,CAAAH,CAAA,WAAAA,CAAA,GAAAM,CAAA,GAAAD,CAAA,KAAAL,CAAA;AAAA,SAAAR,wBAAAQ,CAAA,EAAAK,CAAA,SAAAA,CAAA,IAAAL,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAE,OAAA,EAAAF,CAAA,QAAAM,CAAA,GAAAH,wBAAA,CAAAE,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAC,GAAA,CAAAP,CAAA,UAAAM,CAAA,CAAAE,GAAA,CAAAR,CAAA,OAAAS,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAf,CAAA,oBAAAe,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAe,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAd,CAAA,EAAAe,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,IAAAf,CAAA,CAAAe,CAAA,YAAAN,CAAA,CAAAP,OAAA,GAAAF,CAAA,EAAAM,CAAA,IAAAA,CAAA,CAAAa,GAAA,CAAAnB,CAAA,EAAAS,CAAA,GAAAA,CAAA;AAmFzD,MAAMW,QAA2B,GAAGA,CAAC;EACjCC,QAAQ;EACRC,SAAS;EACTC,KAAK;EACLC,MAAM;EACNC,aAAa;EACbC,MAAM;EACNC,OAAO;EACPC,WAAW;EACXC,YAAY;EACZC,aAAa;EACbC,mBAAmB;EACnBC,QAAQ;EACRC,oBAAoB;EACpBC,wBAAwB,GAAG,KAAK;EAChCC,KAAK;EACLC;AACJ,CAAC,KAAK;EACF,MAAM;IACFC,4BAA4B;IAC5BC,mBAAmB;IACnBC,SAAS;IACTC,YAAY;IACZC;EACJ,CAAC,GAAG,IAAAC,iBAAU,EAACC,iBAAW,CAAC;EAE3B,MAAMC,IAAI,GAAG,IAAAC,aAAO,EAAC,CAAC;EAEtB,MAAMC,YAAY,GAAGzB,QAAQ,KAAK0B,SAAS;EAC3C,MAAMC,UAAU,GAAGtB,MAAM,IAAIc,YAAY,KAAKI,IAAI;EAElD,MAAMK,eAAe,GAAG,IAAAC,kBAAW,EAC9BC,KAAK,IAAK;IACP,IAAIL,YAAY,EAAE;MACdL,kBAAkB,CAACG,IAAI,CAAC;IAC5B;IAEA,IAAI,OAAOjB,OAAO,KAAK,UAAU,EAAE;MAC/BA,OAAO,CAACwB,KAAK,CAAC;IAClB;EACJ,CAAC,EACD,CAACL,YAAY,EAAEnB,OAAO,EAAEc,kBAAkB,EAAEG,IAAI,CACpD,CAAC;EAED,IAAAQ,gBAAS,EAAC,MAAM;IACZ,IAAIN,YAAY,EAAE;MACd;MACA;MACA,OAAOT,4BAA4B,CAAC,CAAC;IACzC;IAEA,OAAOU,SAAS;EACpB,CAAC,EAAE,CAACV,4BAA4B,EAAES,YAAY,CAAC,CAAC;EAEhD,IAAAM,gBAAS,EAAC,MAAM;IACZ,IAAI3B,aAAa,EAAE;MACfgB,kBAAkB,CAACG,IAAI,EAAE;QAAES,cAAc,EAAE;MAAK,CAAC,CAAC;IACtD;EACJ,CAAC,EAAE,CAAC5B,aAAa,EAAEgB,kBAAkB,EAAEG,IAAI,CAAC,CAAC;EAE7C,MAAMU,WAAW,GAAG,OAAO3B,OAAO,KAAK,UAAU,IAAImB,YAAY;EAEjE,oBACIvD,MAAA,CAAAW,OAAA,CAAAqD,aAAA,CAACxD,SAAA,CAAAyD,oBAAoB;IACjBC,OAAO,EAAE;MAAEC,MAAM,EAAE,MAAM;MAAEC,OAAO,EAAE;IAAE,CAAE;IACxCC,SAAS,EAAC,uBAAuB;IACjCC,IAAI,EAAE;MAAEH,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAChCG,OAAO,EAAE;MAAEJ,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IACnCI,GAAG,EAAE,aAAanB,IAAI,EAAG;IACzBoB,YAAY,EAAEV,WAAY;IAC1BW,OAAO,EAAEjB,UAAW;IACpBkB,UAAU,EAAE3B,SAAU;IACtB4B,yBAAyB,EAAEjC;EAAyB,gBAEpD3C,MAAA,CAAAW,OAAA,CAAAqD,aAAA,CAACzD,aAAA,CAAAI,OAAY;IACToB,SAAS,EAAEA,SAAU;IACrBC,KAAK,EAAEA,KAAM;IACbC,MAAM,EAAEA,MAAO;IACfc,mBAAmB,EAAEA,mBAAoB;IACzCQ,YAAY,EAAEA,YAAa;IAC3BpB,MAAM,EAAEsB,UAAW;IACnBnB,YAAY,EAAEA,YAAa;IAC3BF,OAAO,EAAE2B,WAAW,GAAGL,eAAe,GAAGF,SAAU;IACnDnB,WAAW,EAAEA,WAAY;IACzBE,aAAa,EAAEA,aAAc;IAC7BC,mBAAmB,EAAEA,mBAAoB;IACzCC,QAAQ,EAAEA,QAAS;IACnBC,oBAAoB,EAAEA,oBAAqB;IAC3CE,KAAK,EAAEA,KAAM;IACbC,YAAY,EAAEA;EAAa,CAC9B,CAAC,eACF7C,MAAA,CAAAW,OAAA,CAAAqD,aAAA,CAAClE,aAAA,CAAA+E,eAAe;IAACN,OAAO,EAAE;EAAM,GAC3BhB,YAAY,IAAIE,UAAU,iBACvBzD,MAAA,CAAAW,OAAA,CAAAqD,aAAA,CAAC1D,aAAA,CAAAK,OAAY;IAACmE,EAAE,EAAEzB;EAAK,gBACnBrD,MAAA,CAAAW,OAAA,CAAAqD,aAAA,CAAC7D,oBAAA,CAAAQ,OAAmB,QAAEmB,QAA8B,CAC1C,CAEL,CACC,CAAC;AAE/B,CAAC;AAEDD,QAAQ,CAACkD,WAAW,GAAG,UAAU;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAtE,OAAA,GAEnBkB,QAAQ","ignoreList":[]}
@@ -29,14 +29,18 @@ const StyledMotionListItem = exports.StyledMotionListItem = (0, _styledComponent
29
29
  `}
30
30
 
31
31
  ${({
32
+ $isWrapped,
32
33
  $shouldShowSeparatorBelow,
33
34
  theme
34
- }) => ($shouldShowSeparatorBelow || theme.accordionLines) && (0, _styledComponents.css)`
35
- &&:not(:last-child) {
36
- border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid
37
- rgba(${theme['headline-rgb']}, 0.5);
38
- }
39
- `}}
35
+ }) => ($shouldShowSeparatorBelow || theme.accordionLines) && $isWrapped ? (0, _styledComponents.css)`
36
+ &&:not(:last-child) {
37
+ border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid
38
+ rgba(${theme['headline-rgb']}, 0.5);
39
+ }
40
+ ` : (0, _styledComponents.css)`
41
+ border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid
42
+ rgba(${theme['headline-rgb']}, 0.5);
43
+ `}}
40
44
 
41
45
  ${({
42
46
  $isWrapped
@@ -1 +1 @@
1
- {"version":3,"file":"ListItem.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledMotionListItem","exports","styled","motion","div","$isOpen","theme","css","cardBackgroundOpacity","$isClickable","$shouldShowSeparatorBelow","accordionLines","$isWrapped"],"sources":["../../../../../src/components/list/list-item/ListItem.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemProps = WithTheme<{\n $isClickable: boolean;\n $isOpen: boolean;\n $isWrapped: boolean;\n $shouldShowSeparatorBelow: boolean;\n}>;\n\nexport const StyledMotionListItem = styled(motion.div)<StyledListItemProps>`\n ${({ $isOpen, theme }) =>\n $isOpen &&\n css`\n background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n `}\n\n overflow: hidden;\n transition: background-color 0.3s ease;\n\n ${({ $isClickable, theme }) =>\n $isClickable &&\n css`\n &&:hover {\n background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n }\n `}\n \n ${({ $shouldShowSeparatorBelow, theme }: StyledListItemProps) =>\n ($shouldShowSeparatorBelow || theme.accordionLines) &&\n css`\n &&:not(:last-child) {\n border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid\n rgba(${theme['headline-rgb']}, 0.5);\n }\n `}}\n\n ${({ $isWrapped }) =>\n $isWrapped &&\n css`\n padding-left: 26px;\n `}\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAgD,SAAAG,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,SAAAF,wBAAAE,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;AAUzC,MAAMW,oBAAoB,GAAAC,OAAA,CAAAD,oBAAA,GAAG,IAAAE,yBAAM,EAACC,oBAAM,CAACC,GAAG,CAAsB;AAC3E,MAAM,CAAC;EAAEC,OAAO;EAAEC;AAAM,CAAC,KACjBD,OAAO,IACP,IAAAE,qBAAG;AACX,qCAAqCD,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACE,qBAAqB;AACrF,SAAS;AACT;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC,YAAY;EAAEH;AAAM,CAAC,KACtBG,YAAY,IACZ,IAAAF,qBAAG;AACX;AACA,yCAAyCD,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACE,qBAAqB;AACzF;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEE,yBAAyB;EAAEJ;AAA2B,CAAC,KACxD,CAACI,yBAAyB,IAAIJ,KAAK,CAACK,cAAc,KAClD,IAAAJ,qBAAG;AACX;AACA,iCAAiCG,yBAAyB,GAAG,KAAK,GAAG,KAAK;AAC1E,2BAA2BJ,KAAK,CAAC,cAAc,CAAC;AAChD;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEM;AAAW,CAAC,KACbA,UAAU,IACV,IAAAL,qBAAG;AACX;AACA,SAAS;AACT,CAAC","ignoreList":[]}
1
+ {"version":3,"file":"ListItem.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledMotionListItem","exports","styled","motion","div","$isOpen","theme","css","cardBackgroundOpacity","$isClickable","$isWrapped","$shouldShowSeparatorBelow","accordionLines"],"sources":["../../../../../src/components/list/list-item/ListItem.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemProps = WithTheme<{\n $isClickable: boolean;\n $isOpen: boolean;\n $isWrapped: boolean;\n $shouldShowSeparatorBelow: boolean;\n}>;\n\nexport const StyledMotionListItem = styled(motion.div)<StyledListItemProps>`\n ${({ $isOpen, theme }) =>\n $isOpen &&\n css`\n background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n `}\n\n overflow: hidden;\n transition: background-color 0.3s ease;\n\n ${({ $isClickable, theme }) =>\n $isClickable &&\n css`\n &&:hover {\n background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n }\n `}\n \n ${({ $isWrapped, $shouldShowSeparatorBelow, theme }: StyledListItemProps) =>\n ($shouldShowSeparatorBelow || theme.accordionLines) && $isWrapped\n ? css`\n &&:not(:last-child) {\n border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid\n rgba(${theme['headline-rgb']}, 0.5);\n }\n `\n : css`\n border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid\n rgba(${theme['headline-rgb']}, 0.5);\n `}}\n\n ${({ $isWrapped }) =>\n $isWrapped &&\n css`\n padding-left: 26px;\n `}\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAgD,SAAAG,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,SAAAF,wBAAAE,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;AAUzC,MAAMW,oBAAoB,GAAAC,OAAA,CAAAD,oBAAA,GAAG,IAAAE,yBAAM,EAACC,oBAAM,CAACC,GAAG,CAAsB;AAC3E,MAAM,CAAC;EAAEC,OAAO;EAAEC;AAAM,CAAC,KACjBD,OAAO,IACP,IAAAE,qBAAG;AACX,qCAAqCD,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACE,qBAAqB;AACrF,SAAS;AACT;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC,YAAY;EAAEH;AAAM,CAAC,KACtBG,YAAY,IACZ,IAAAF,qBAAG;AACX;AACA,yCAAyCD,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACE,qBAAqB;AACzF;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEE,UAAU;EAAEC,yBAAyB;EAAEL;AAA2B,CAAC,KACpE,CAACK,yBAAyB,IAAIL,KAAK,CAACM,cAAc,KAAKF,UAAU,GAC3D,IAAAH,qBAAG;AACjB;AACA,uCAAuCI,yBAAyB,GAAG,KAAK,GAAG,KAAK;AAChF,iCAAiCL,KAAK,CAAC,cAAc,CAAC;AACtD;AACA,eAAe,GACD,IAAAC,qBAAG;AACjB,mCAAmCI,yBAAyB,GAAG,KAAK,GAAG,KAAK;AAC5E,6BAA6BL,KAAK,CAAC,cAAc,CAAC;AAClD,eAAe;AACf;AACA,MAAM,CAAC;EAAEI;AAAW,CAAC,KACbA,UAAU,IACV,IAAAH,qBAAG;AACX;AACA,SAAS;AACT,CAAC","ignoreList":[]}
@@ -25,6 +25,7 @@ const ListItemHead = ({
25
25
  onClick,
26
26
  onLongPress,
27
27
  rightElements,
28
+ shouldHideIndicator,
28
29
  subtitle,
29
30
  shouldShowRoundImage,
30
31
  title,
@@ -109,7 +110,7 @@ const ListItemHead = ({
109
110
  onMouseLeave: handleMouseLeave,
110
111
  onTouchStart: typeof onLongPress === 'function' ? handleTouchStart : undefined,
111
112
  onTouchEnd: typeof onLongPress === 'function' ? handleTouchEnd : undefined
112
- }, /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadLeftWrapper, null, isAnyItemExpandable && /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledMotionListItemHeadIndicator, {
113
+ }, /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadLeftWrapper, null, isAnyItemExpandable && !shouldHideIndicator && /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledMotionListItemHeadIndicator, {
113
114
  animate: {
114
115
  rotate: isOpen ? 90 : 0
115
116
  },
@@ -1 +1 @@
1
- {"version":3,"file":"ListItemHead.js","names":["_react","_interopRequireWildcard","require","_useElementSize","_Icon","_interopRequireDefault","_ListItemIcon","_ListItemImage","_ListItemRightElements","_ListItemHead","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ListItemHead","hoverItem","icons","images","isAnyItemExpandable","isExpandable","isOpen","leftElements","onClick","onLongPress","rightElements","subtitle","shouldShowRoundImage","title","titleElement","shouldShowHoverItem","setShouldShowHoverItem","useState","headHeight","setHeadHeight","closed","open","isFirstRender","setIsFirstRender","longPressTimeoutRef","useRef","pseudoTitleOpenRef","pseudoTitleClosedRef","pseudoSubtitleOpenRef","pseudoSubtitleClosedRef","closedTitle","useElementSize","openedTitle","closedSubtitle","openedSubtitle","shouldShowSubtitleRow","useEffect","height","handleMouseEnter","useCallback","handleMouseLeave","marginTop","useMemo","handleTouchStart","event","current","window","setTimeout","handleTouchEnd","clearTimeout","iconOrImageElement","createElement","undefined","StyledListItemHead","animate","initial","transition","duration","type","className","$isClickable","$isAnyItemExpandable","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","StyledListItemHeadLeftWrapper","StyledMotionListItemHeadIndicator","rotate","StyledListItemHeadContent","$isIconOrImageGiven","$marginTop","$isOpen","StyledListItemHeadTitle","StyledListItemHeadTitleContent","StyledListItemHeadTitleTextPseudo","ref","StyledListItemHeadTitleText","StyledListItemHeadTitleElement","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleTextPseudo","StyledListItemHeadSubtitleText","StyledMotionListItemHeadHoverItem","marginLeft","opacity","width","displayName","_default","exports"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.tsx"],"sourcesContent":["import React, {\n FC,\n MouseEventHandler,\n ReactNode,\n TouchEventHandler,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useElementSize } from '../../../../hooks/useElementSize';\nimport type { IListItemRightElements } from '../../../../types/list';\nimport Icon from '../../../icon/Icon';\nimport ListItemIcon from './list-item-icon/ListItemIcon';\nimport ListItemImage from './list-item-image/ListItemImage';\nimport ListItemRightElements from './list-item-right-elements/ListItemRightElements';\nimport {\n StyledListItemHead,\n StyledListItemHeadContent,\n StyledListItemHeadLeftWrapper,\n StyledListItemHeadSubtitle,\n StyledListItemHeadSubtitleText,\n StyledListItemHeadSubtitleTextPseudo,\n StyledListItemHeadTitle,\n StyledListItemHeadTitleContent,\n StyledListItemHeadTitleElement,\n StyledListItemHeadTitleText,\n StyledListItemHeadTitleTextPseudo,\n StyledMotionListItemHeadHoverItem,\n StyledMotionListItemHeadIndicator,\n} from './ListItemHead.styles';\n\ninterface HeadHeight {\n closed: number;\n open: number;\n}\n\ntype ListItemHeadProps = {\n hoverItem?: ReactNode;\n icons?: string[];\n images?: string[];\n isAnyItemExpandable: boolean;\n isExpandable: boolean;\n isOpen: boolean;\n leftElements?: ReactNode;\n onClick?: MouseEventHandler<HTMLDivElement>;\n onLongPress?: TouchEventHandler<HTMLDivElement>;\n rightElements?: IListItemRightElements;\n subtitle?: ReactNode;\n shouldShowRoundImage?: boolean;\n title: ReactNode;\n titleElement?: ReactNode;\n};\n\nconst ListItemHead: FC<ListItemHeadProps> = ({\n hoverItem,\n icons,\n images,\n isAnyItemExpandable,\n isExpandable,\n isOpen,\n leftElements,\n onClick,\n onLongPress,\n rightElements,\n subtitle,\n shouldShowRoundImage,\n title,\n titleElement,\n}) => {\n const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);\n const [headHeight, setHeadHeight] = useState<HeadHeight>({\n closed: 40,\n open: 40,\n });\n const [isFirstRender, setIsFirstRender] = useState(false);\n\n const longPressTimeoutRef = useRef<number>();\n const pseudoTitleOpenRef = useRef<HTMLDivElement>(null);\n const pseudoTitleClosedRef = useRef<HTMLDivElement>(null);\n const pseudoSubtitleOpenRef = useRef<HTMLDivElement>(null);\n const pseudoSubtitleClosedRef = useRef<HTMLDivElement>(null);\n\n const closedTitle = useElementSize(pseudoTitleClosedRef);\n const openedTitle = useElementSize(pseudoTitleOpenRef);\n const closedSubtitle = useElementSize(pseudoSubtitleClosedRef);\n const openedSubtitle = useElementSize(pseudoSubtitleOpenRef);\n\n const shouldShowSubtitleRow = typeof subtitle === 'string';\n\n useEffect(() => {\n if (closedTitle && openedTitle) {\n setHeadHeight({\n closed:\n shouldShowSubtitleRow && closedSubtitle\n ? closedSubtitle.height + 4 + closedTitle.height + 24\n : closedTitle.height + 24,\n open:\n shouldShowSubtitleRow && openedSubtitle\n ? openedSubtitle.height + 4 + openedTitle.height + 24\n : openedTitle.height + 24,\n });\n }\n }, [closedSubtitle, closedTitle, openedSubtitle, openedTitle, shouldShowSubtitleRow]);\n\n // This is used to trigger a rerender, so the head height can be calculated\n useEffect(() => {\n setIsFirstRender(true);\n }, []);\n\n const handleMouseEnter = useCallback(() => setShouldShowHoverItem(true), []);\n\n const handleMouseLeave = useCallback(() => setShouldShowHoverItem(false), []);\n\n const marginTop = useMemo(() => {\n const height = headHeight[isOpen ? 'open' : 'closed'];\n\n if (height < 64) {\n return (64 - height) / 2;\n }\n\n return 0;\n }, [headHeight, isOpen]);\n\n const handleTouchStart = useCallback<TouchEventHandler<HTMLDivElement>>(\n (event) => {\n longPressTimeoutRef.current = window.setTimeout(() => {\n if (typeof onLongPress === 'function') {\n onLongPress(event);\n }\n }, 400);\n },\n [onLongPress],\n );\n\n const handleTouchEnd = useCallback(() => {\n clearTimeout(longPressTimeoutRef.current);\n }, []);\n\n const iconOrImageElement = useMemo(() => {\n if (icons) {\n return <ListItemIcon icons={icons} />;\n }\n\n if (images) {\n return <ListItemImage images={images} shouldShowRoundImage={!!shouldShowRoundImage} />;\n }\n\n return undefined;\n }, [icons, images, shouldShowRoundImage]);\n\n return (\n <StyledListItemHead\n animate={{ height: isOpen ? headHeight.open : headHeight.closed }}\n initial={false}\n transition={{ duration: 0.2, type: 'tween' }}\n className=\"beta-chayns-list-item-head\"\n $isClickable={typeof onClick === 'function' || isExpandable}\n $isAnyItemExpandable={isAnyItemExpandable}\n onClick={onClick}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onTouchStart={typeof onLongPress === 'function' ? handleTouchStart : undefined}\n onTouchEnd={typeof onLongPress === 'function' ? handleTouchEnd : undefined}\n >\n <StyledListItemHeadLeftWrapper>\n {isAnyItemExpandable && (\n <StyledMotionListItemHeadIndicator\n animate={{ rotate: isOpen ? 90 : 0 }}\n initial={false}\n transition={{ type: 'tween' }}\n >\n {isExpandable && <Icon icons={['fa fa-chevron-right']} />}\n </StyledMotionListItemHeadIndicator>\n )}\n {leftElements}\n {iconOrImageElement}\n </StyledListItemHeadLeftWrapper>\n <StyledListItemHeadContent\n $isIconOrImageGiven={iconOrImageElement !== undefined}\n $marginTop={marginTop}\n $isOpen={isOpen}\n >\n <StyledListItemHeadTitle>\n <StyledListItemHeadTitleContent>\n <StyledListItemHeadTitleTextPseudo ref={pseudoTitleOpenRef} $isOpen>\n {title}\n </StyledListItemHeadTitleTextPseudo>\n <StyledListItemHeadTitleTextPseudo\n ref={pseudoTitleClosedRef}\n $isOpen={false}\n >\n {title}\n </StyledListItemHeadTitleTextPseudo>\n <StyledListItemHeadTitleText $isOpen={isOpen}>\n {title}\n </StyledListItemHeadTitleText>\n <StyledListItemHeadTitleElement>\n {titleElement}\n </StyledListItemHeadTitleElement>\n </StyledListItemHeadTitleContent>\n </StyledListItemHeadTitle>\n {shouldShowSubtitleRow && (\n <StyledListItemHeadSubtitle>\n <StyledListItemHeadSubtitleTextPseudo ref={pseudoSubtitleOpenRef} $isOpen>\n {subtitle}\n </StyledListItemHeadSubtitleTextPseudo>\n <StyledListItemHeadSubtitleTextPseudo\n ref={pseudoSubtitleClosedRef}\n $isOpen={false}\n >\n {subtitle}\n </StyledListItemHeadSubtitleTextPseudo>\n <StyledListItemHeadSubtitleText $isOpen={isOpen}>\n {subtitle}\n </StyledListItemHeadSubtitleText>\n </StyledListItemHeadSubtitle>\n )}\n </StyledListItemHeadContent>\n {rightElements && <ListItemRightElements rightElements={rightElements} />}\n {hoverItem && (\n <StyledMotionListItemHeadHoverItem\n animate={{\n marginLeft: shouldShowHoverItem ? 8 : 0,\n opacity: shouldShowHoverItem ? 1 : 0,\n width: shouldShowHoverItem ? 'auto' : 0,\n }}\n initial={false}\n transition={{ duration: 0.15, type: 'tween' }}\n >\n {hoverItem}\n </StyledMotionListItemHeadHoverItem>\n )}\n </StyledListItemHead>\n );\n};\n\nListItemHead.displayName = 'ListItemHead';\n\nexport default ListItemHead;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"ListItemHead.js","names":["_react","_interopRequireWildcard","require","_useElementSize","_Icon","_interopRequireDefault","_ListItemIcon","_ListItemImage","_ListItemRightElements","_ListItemHead","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ListItemHead","hoverItem","icons","images","isAnyItemExpandable","isExpandable","isOpen","leftElements","onClick","onLongPress","rightElements","shouldHideIndicator","subtitle","shouldShowRoundImage","title","titleElement","shouldShowHoverItem","setShouldShowHoverItem","useState","headHeight","setHeadHeight","closed","open","isFirstRender","setIsFirstRender","longPressTimeoutRef","useRef","pseudoTitleOpenRef","pseudoTitleClosedRef","pseudoSubtitleOpenRef","pseudoSubtitleClosedRef","closedTitle","useElementSize","openedTitle","closedSubtitle","openedSubtitle","shouldShowSubtitleRow","useEffect","height","handleMouseEnter","useCallback","handleMouseLeave","marginTop","useMemo","handleTouchStart","event","current","window","setTimeout","handleTouchEnd","clearTimeout","iconOrImageElement","createElement","undefined","StyledListItemHead","animate","initial","transition","duration","type","className","$isClickable","$isAnyItemExpandable","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","StyledListItemHeadLeftWrapper","StyledMotionListItemHeadIndicator","rotate","StyledListItemHeadContent","$isIconOrImageGiven","$marginTop","$isOpen","StyledListItemHeadTitle","StyledListItemHeadTitleContent","StyledListItemHeadTitleTextPseudo","ref","StyledListItemHeadTitleText","StyledListItemHeadTitleElement","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleTextPseudo","StyledListItemHeadSubtitleText","StyledMotionListItemHeadHoverItem","marginLeft","opacity","width","displayName","_default","exports"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.tsx"],"sourcesContent":["import React, {\n FC,\n MouseEventHandler,\n ReactNode,\n TouchEventHandler,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useElementSize } from '../../../../hooks/useElementSize';\nimport type { IListItemRightElements } from '../../../../types/list';\nimport Icon from '../../../icon/Icon';\nimport ListItemIcon from './list-item-icon/ListItemIcon';\nimport ListItemImage from './list-item-image/ListItemImage';\nimport ListItemRightElements from './list-item-right-elements/ListItemRightElements';\nimport {\n StyledListItemHead,\n StyledListItemHeadContent,\n StyledListItemHeadLeftWrapper,\n StyledListItemHeadSubtitle,\n StyledListItemHeadSubtitleText,\n StyledListItemHeadSubtitleTextPseudo,\n StyledListItemHeadTitle,\n StyledListItemHeadTitleContent,\n StyledListItemHeadTitleElement,\n StyledListItemHeadTitleText,\n StyledListItemHeadTitleTextPseudo,\n StyledMotionListItemHeadHoverItem,\n StyledMotionListItemHeadIndicator,\n} from './ListItemHead.styles';\n\ninterface HeadHeight {\n closed: number;\n open: number;\n}\n\ntype ListItemHeadProps = {\n hoverItem?: ReactNode;\n icons?: string[];\n images?: string[];\n isAnyItemExpandable: boolean;\n isExpandable: boolean;\n isOpen: boolean;\n leftElements?: ReactNode;\n onClick?: MouseEventHandler<HTMLDivElement>;\n onLongPress?: TouchEventHandler<HTMLDivElement>;\n rightElements?: IListItemRightElements;\n shouldHideIndicator?: boolean;\n subtitle?: ReactNode;\n shouldShowRoundImage?: boolean;\n title: ReactNode;\n titleElement?: ReactNode;\n};\n\nconst ListItemHead: FC<ListItemHeadProps> = ({\n hoverItem,\n icons,\n images,\n isAnyItemExpandable,\n isExpandable,\n isOpen,\n leftElements,\n onClick,\n onLongPress,\n rightElements,\n shouldHideIndicator,\n subtitle,\n shouldShowRoundImage,\n title,\n titleElement,\n}) => {\n const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);\n const [headHeight, setHeadHeight] = useState<HeadHeight>({\n closed: 40,\n open: 40,\n });\n const [isFirstRender, setIsFirstRender] = useState(false);\n\n const longPressTimeoutRef = useRef<number>();\n const pseudoTitleOpenRef = useRef<HTMLDivElement>(null);\n const pseudoTitleClosedRef = useRef<HTMLDivElement>(null);\n const pseudoSubtitleOpenRef = useRef<HTMLDivElement>(null);\n const pseudoSubtitleClosedRef = useRef<HTMLDivElement>(null);\n\n const closedTitle = useElementSize(pseudoTitleClosedRef);\n const openedTitle = useElementSize(pseudoTitleOpenRef);\n const closedSubtitle = useElementSize(pseudoSubtitleClosedRef);\n const openedSubtitle = useElementSize(pseudoSubtitleOpenRef);\n\n const shouldShowSubtitleRow = typeof subtitle === 'string';\n\n useEffect(() => {\n if (closedTitle && openedTitle) {\n setHeadHeight({\n closed:\n shouldShowSubtitleRow && closedSubtitle\n ? closedSubtitle.height + 4 + closedTitle.height + 24\n : closedTitle.height + 24,\n open:\n shouldShowSubtitleRow && openedSubtitle\n ? openedSubtitle.height + 4 + openedTitle.height + 24\n : openedTitle.height + 24,\n });\n }\n }, [closedSubtitle, closedTitle, openedSubtitle, openedTitle, shouldShowSubtitleRow]);\n\n // This is used to trigger a rerender, so the head height can be calculated\n useEffect(() => {\n setIsFirstRender(true);\n }, []);\n\n const handleMouseEnter = useCallback(() => setShouldShowHoverItem(true), []);\n\n const handleMouseLeave = useCallback(() => setShouldShowHoverItem(false), []);\n\n const marginTop = useMemo(() => {\n const height = headHeight[isOpen ? 'open' : 'closed'];\n\n if (height < 64) {\n return (64 - height) / 2;\n }\n\n return 0;\n }, [headHeight, isOpen]);\n\n const handleTouchStart = useCallback<TouchEventHandler<HTMLDivElement>>(\n (event) => {\n longPressTimeoutRef.current = window.setTimeout(() => {\n if (typeof onLongPress === 'function') {\n onLongPress(event);\n }\n }, 400);\n },\n [onLongPress],\n );\n\n const handleTouchEnd = useCallback(() => {\n clearTimeout(longPressTimeoutRef.current);\n }, []);\n\n const iconOrImageElement = useMemo(() => {\n if (icons) {\n return <ListItemIcon icons={icons} />;\n }\n\n if (images) {\n return <ListItemImage images={images} shouldShowRoundImage={!!shouldShowRoundImage} />;\n }\n\n return undefined;\n }, [icons, images, shouldShowRoundImage]);\n\n return (\n <StyledListItemHead\n animate={{ height: isOpen ? headHeight.open : headHeight.closed }}\n initial={false}\n transition={{ duration: 0.2, type: 'tween' }}\n className=\"beta-chayns-list-item-head\"\n $isClickable={typeof onClick === 'function' || isExpandable}\n $isAnyItemExpandable={isAnyItemExpandable}\n onClick={onClick}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onTouchStart={typeof onLongPress === 'function' ? handleTouchStart : undefined}\n onTouchEnd={typeof onLongPress === 'function' ? handleTouchEnd : undefined}\n >\n <StyledListItemHeadLeftWrapper>\n {isAnyItemExpandable && !shouldHideIndicator && (\n <StyledMotionListItemHeadIndicator\n animate={{ rotate: isOpen ? 90 : 0 }}\n initial={false}\n transition={{ type: 'tween' }}\n >\n {isExpandable && <Icon icons={['fa fa-chevron-right']} />}\n </StyledMotionListItemHeadIndicator>\n )}\n {leftElements}\n {iconOrImageElement}\n </StyledListItemHeadLeftWrapper>\n <StyledListItemHeadContent\n $isIconOrImageGiven={iconOrImageElement !== undefined}\n $marginTop={marginTop}\n $isOpen={isOpen}\n >\n <StyledListItemHeadTitle>\n <StyledListItemHeadTitleContent>\n <StyledListItemHeadTitleTextPseudo ref={pseudoTitleOpenRef} $isOpen>\n {title}\n </StyledListItemHeadTitleTextPseudo>\n <StyledListItemHeadTitleTextPseudo\n ref={pseudoTitleClosedRef}\n $isOpen={false}\n >\n {title}\n </StyledListItemHeadTitleTextPseudo>\n <StyledListItemHeadTitleText $isOpen={isOpen}>\n {title}\n </StyledListItemHeadTitleText>\n <StyledListItemHeadTitleElement>\n {titleElement}\n </StyledListItemHeadTitleElement>\n </StyledListItemHeadTitleContent>\n </StyledListItemHeadTitle>\n {shouldShowSubtitleRow && (\n <StyledListItemHeadSubtitle>\n <StyledListItemHeadSubtitleTextPseudo ref={pseudoSubtitleOpenRef} $isOpen>\n {subtitle}\n </StyledListItemHeadSubtitleTextPseudo>\n <StyledListItemHeadSubtitleTextPseudo\n ref={pseudoSubtitleClosedRef}\n $isOpen={false}\n >\n {subtitle}\n </StyledListItemHeadSubtitleTextPseudo>\n <StyledListItemHeadSubtitleText $isOpen={isOpen}>\n {subtitle}\n </StyledListItemHeadSubtitleText>\n </StyledListItemHeadSubtitle>\n )}\n </StyledListItemHeadContent>\n {rightElements && <ListItemRightElements rightElements={rightElements} />}\n {hoverItem && (\n <StyledMotionListItemHeadHoverItem\n animate={{\n marginLeft: shouldShowHoverItem ? 8 : 0,\n opacity: shouldShowHoverItem ? 1 : 0,\n width: shouldShowHoverItem ? 'auto' : 0,\n }}\n initial={false}\n transition={{ duration: 0.15, type: 'tween' }}\n >\n {hoverItem}\n </StyledMotionListItemHeadHoverItem>\n )}\n </StyledListItemHead>\n );\n};\n\nListItemHead.displayName = 'ListItemHead';\n\nexport default ListItemHead;\n"],"mappings":"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","ignoreList":[]}
@@ -23,6 +23,7 @@ const Popup = /*#__PURE__*/(0, _react.forwardRef)(({
23
23
  onHide,
24
24
  children,
25
25
  shouldShowOnHover = false,
26
+ shouldUseChildrenWidth = true,
26
27
  yOffset = 0
27
28
  }, ref) => {
28
29
  const [coordinates, setCoordinates] = (0, _react.useState)({
@@ -197,7 +198,8 @@ const Popup = /*#__PURE__*/(0, _react.forwardRef)(({
197
198
  ref: popupRef,
198
199
  onClick: handleChildrenClick,
199
200
  onMouseLeave: handleMouseLeave,
200
- onMouseEnter: handleMouseEnter
201
+ onMouseEnter: handleMouseEnter,
202
+ $shouldUseChildrenWidth: shouldUseChildrenWidth
201
203
  }, children), portal);
202
204
  });
203
205
  Popup.displayName = 'Popup';
@@ -1 +1 @@
1
- {"version":3,"file":"Popup.js","names":["_chaynsApi","require","_framerMotion","_react","_interopRequireWildcard","_reactDom","_uuid","_popup","_AreaContextProvider","_interopRequireDefault","_PopupContentWrapper","_Popup","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Popup","forwardRef","content","onShow","container","document","querySelector","body","onHide","children","shouldShowOnHover","yOffset","ref","coordinates","setCoordinates","useState","x","y","alignment","setAlignment","PopupAlignment","TopLeft","offset","setOffset","isOpen","setIsOpen","portal","setPortal","menuHeight","setMenuHeight","pseudoSize","setPseudoSize","timeout","useRef","uuid","useUuid","popupContentRef","popupPseudoContentRef","popupRef","useEffect","current","height","width","getBoundingClientRect","handleShow","useCallback","pseudoHeight","pseudoWidth","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","isRight","BottomRight","BottomLeft","newOffset","window","innerWidth","right","newX","TopRight","handleChildrenClick","handleHide","handleMouseEnter","clearTimeout","handleMouseLeave","setTimeout","handleDocumentClick","event","_popupContentRef$curr","contains","target","preventDefault","stopPropagation","useImperativeHandle","hide","show","getWindowMetrics","then","result","topBarHeight","addEventListener","removeEventListener","createPortal","createElement","AnimatePresence","initial","key","onMouseLeave","onMouseEnter","shouldChangeColor","Fragment","StyledPopupPseudo","$menuHeight","StyledPopup","onClick","displayName","_default","exports"],"sources":["../../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { getWindowMetrics } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n forwardRef,\n ReactNode,\n ReactPortal,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { PopupAlignment, PopupCoordinates, PopupRef } from '../../types/popup';\nimport AreaContextProvider from '../area-provider/AreaContextProvider';\nimport PopupContentWrapper from './popup-content-wrapper/PopupContentWrapper';\nimport { StyledPopup, StyledPopupPseudo } from './Popup.styles';\n\nexport type PopupProps = {\n /**\n * The element over which the content of the `ContextMenu` should be displayed.\n */\n children?: ReactNode;\n /**\n * The element where the content of the `Popup` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * The content that should be displayed inside the popup.\n */\n content: ReactNode;\n /**\n * Function to be executed when the content of the Context menu has been hidden.\n */\n onHide?: VoidFunction;\n /**\n * Function to be executed when the content of the Context menu has been shown.\n */\n onShow?: VoidFunction;\n /**\n * Whether the popup should be opened on hover. If not, the popup will be opened on click.\n */\n shouldShowOnHover?: boolean;\n /**\n * The Y offset of the popup to the children.\n */\n yOffset?: number;\n};\n\nconst Popup = forwardRef<PopupRef, PopupProps>(\n (\n {\n content,\n onShow,\n container = document.querySelector('.tapp') || document.body,\n onHide,\n children,\n shouldShowOnHover = false,\n yOffset = 0,\n },\n ref,\n ) => {\n const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n x: 0,\n y: 0,\n });\n\n const [alignment, setAlignment] = useState<PopupAlignment>(PopupAlignment.TopLeft);\n const [offset, setOffset] = useState<number>(0);\n const [isOpen, setIsOpen] = useState(false);\n const [portal, setPortal] = useState<ReactPortal>();\n const [menuHeight, setMenuHeight] = useState(0);\n\n const [pseudoSize, setPseudoSize] = useState<{ height: number; width: number }>();\n\n const timeout = useRef<number>();\n\n const uuid = useUuid();\n\n // ToDo: Replace with hook if new chayns api is ready\n\n const popupContentRef = useRef<HTMLDivElement>(null);\n const popupPseudoContentRef = useRef<HTMLDivElement>(null);\n const popupRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (popupPseudoContentRef.current) {\n const { height, width } = popupPseudoContentRef.current.getBoundingClientRect();\n\n setPseudoSize({ height, width });\n }\n }, []);\n\n const handleShow = useCallback(() => {\n if (popupRef.current && pseudoSize) {\n const { height: pseudoHeight, width: pseudoWidth } = pseudoSize;\n\n const {\n height: childrenHeight,\n left: childrenLeft,\n top: childrenTop,\n width: childrenWidth,\n } = popupRef.current.getBoundingClientRect();\n\n if (pseudoHeight > childrenTop - 25) {\n let isRight = false;\n\n if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n setAlignment(PopupAlignment.BottomRight);\n\n isRight = true;\n } else {\n setAlignment(PopupAlignment.BottomLeft);\n }\n\n const x = childrenLeft + childrenWidth / 2;\n const y = childrenTop + childrenHeight + yOffset;\n\n let newOffset;\n\n if (isRight) {\n newOffset =\n x + pseudoWidth >= window.innerWidth\n ? x + pseudoWidth - window.innerWidth\n : 0;\n } else {\n newOffset = 0;\n\n const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n newOffset =\n right + pseudoWidth >= window.innerWidth\n ? right + pseudoWidth - window.innerWidth\n : 0;\n }\n\n setOffset(newOffset);\n\n const newX = x - newOffset;\n\n setCoordinates({\n x: newX < 23 ? 23 : newX,\n y: y - yOffset,\n });\n } else {\n let isRight = false;\n\n if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n setAlignment(PopupAlignment.TopRight);\n\n isRight = true;\n } else {\n setAlignment(PopupAlignment.TopLeft);\n }\n\n const x = childrenLeft + childrenWidth / 2;\n const y = childrenTop - yOffset;\n\n let newOffset;\n\n if (isRight) {\n newOffset =\n x + pseudoWidth >= window.innerWidth\n ? x + pseudoWidth - window.innerWidth\n : 0;\n } else {\n newOffset = 0;\n\n const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n newOffset =\n right + pseudoWidth >= window.innerWidth\n ? right + pseudoWidth - window.innerWidth\n : 0;\n }\n\n setOffset(newOffset);\n\n const newX = x - newOffset;\n\n setCoordinates({\n x: newX < 23 ? 23 : newX,\n y: y - yOffset,\n });\n }\n\n setIsOpen(true);\n }\n }, [pseudoSize, yOffset]);\n\n const handleChildrenClick = () => {\n if (!shouldShowOnHover) {\n handleShow();\n }\n };\n\n const handleHide = useCallback(() => {\n setIsOpen(false);\n }, []);\n\n const handleMouseEnter = useCallback(() => {\n if (shouldShowOnHover) {\n window.clearTimeout(timeout.current);\n handleShow();\n }\n }, [handleShow, shouldShowOnHover]);\n\n const handleMouseLeave = useCallback(() => {\n if (!shouldShowOnHover) {\n return;\n }\n\n timeout.current = window.setTimeout(() => {\n handleHide();\n }, 500);\n }, [handleHide, shouldShowOnHover]);\n\n const handleDocumentClick = useCallback<EventListener>(\n (event) => {\n if (\n !popupContentRef.current?.contains(event.target as Node) &&\n !shouldShowOnHover\n ) {\n event.preventDefault();\n event.stopPropagation();\n\n handleHide();\n }\n },\n [handleHide, shouldShowOnHover],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleHide,\n show: handleShow,\n }),\n [handleHide, handleShow],\n );\n\n useEffect(() => {\n void getWindowMetrics().then((result) => {\n if (result.topBarHeight) {\n setMenuHeight(result.topBarHeight);\n }\n });\n }, []);\n\n useEffect(() => {\n if (isOpen) {\n document.addEventListener('click', handleDocumentClick, true);\n window.addEventListener('blur', handleHide);\n\n if (typeof onShow === 'function') {\n onShow();\n }\n } else if (typeof onHide === 'function') {\n onHide();\n }\n\n return () => {\n document.removeEventListener('click', handleDocumentClick, true);\n window.removeEventListener('blur', handleHide);\n };\n }, [handleDocumentClick, handleHide, isOpen, onHide, onShow]);\n\n useEffect(() => {\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isOpen && (\n <PopupContentWrapper\n offset={offset}\n coordinates={coordinates}\n key={`tooltip_${uuid}`}\n alignment={alignment}\n ref={popupContentRef}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n >\n <AreaContextProvider shouldChangeColor={false}>\n {content}\n </AreaContextProvider>\n </PopupContentWrapper>\n )}\n </AnimatePresence>,\n container,\n ),\n );\n }, [\n alignment,\n container,\n content,\n coordinates,\n handleMouseEnter,\n handleMouseLeave,\n isOpen,\n offset,\n uuid,\n ]);\n\n return (\n <>\n {!pseudoSize && (\n <StyledPopupPseudo ref={popupPseudoContentRef} $menuHeight={menuHeight}>\n {content}\n </StyledPopupPseudo>\n )}\n <StyledPopup\n ref={popupRef}\n onClick={handleChildrenClick}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n >\n {children}\n </StyledPopup>\n {portal}\n </>\n );\n },\n);\n\nPopup.displayName = 'Popup';\n\nexport default Popup;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"Popup.js","names":["_chaynsApi","require","_framerMotion","_react","_interopRequireWildcard","_reactDom","_uuid","_popup","_AreaContextProvider","_interopRequireDefault","_PopupContentWrapper","_Popup","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Popup","forwardRef","content","onShow","container","document","querySelector","body","onHide","children","shouldShowOnHover","shouldUseChildrenWidth","yOffset","ref","coordinates","setCoordinates","useState","x","y","alignment","setAlignment","PopupAlignment","TopLeft","offset","setOffset","isOpen","setIsOpen","portal","setPortal","menuHeight","setMenuHeight","pseudoSize","setPseudoSize","timeout","useRef","uuid","useUuid","popupContentRef","popupPseudoContentRef","popupRef","useEffect","current","height","width","getBoundingClientRect","handleShow","useCallback","pseudoHeight","pseudoWidth","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","isRight","BottomRight","BottomLeft","newOffset","window","innerWidth","right","newX","TopRight","handleChildrenClick","handleHide","handleMouseEnter","clearTimeout","handleMouseLeave","setTimeout","handleDocumentClick","event","_popupContentRef$curr","contains","target","preventDefault","stopPropagation","useImperativeHandle","hide","show","getWindowMetrics","then","result","topBarHeight","addEventListener","removeEventListener","createPortal","createElement","AnimatePresence","initial","key","onMouseLeave","onMouseEnter","shouldChangeColor","Fragment","StyledPopupPseudo","$menuHeight","StyledPopup","onClick","$shouldUseChildrenWidth","displayName","_default","exports"],"sources":["../../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { getWindowMetrics } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n forwardRef,\n ReactNode,\n ReactPortal,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { PopupAlignment, PopupCoordinates, PopupRef } from '../../types/popup';\nimport AreaContextProvider from '../area-provider/AreaContextProvider';\nimport PopupContentWrapper from './popup-content-wrapper/PopupContentWrapper';\nimport { StyledPopup, StyledPopupPseudo } from './Popup.styles';\n\nexport type PopupProps = {\n /**\n * The element over which the content of the `ContextMenu` should be displayed.\n */\n children?: ReactNode;\n /**\n * The element where the content of the `Popup` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * The content that should be displayed inside the popup.\n */\n content: ReactNode;\n /**\n * Function to be executed when the content of the Context menu has been hidden.\n */\n onHide?: VoidFunction;\n /**\n * Function to be executed when the content of the Context menu has been shown.\n */\n onShow?: VoidFunction;\n /**\n * Whether the popup should be opened on hover. If not, the popup will be opened on click.\n */\n shouldShowOnHover?: boolean;\n /**\n * Whether the width of the children should be used.\n */\n shouldUseChildrenWidth?: boolean;\n /**\n * The Y offset of the popup to the children.\n */\n yOffset?: number;\n};\n\nconst Popup = forwardRef<PopupRef, PopupProps>(\n (\n {\n content,\n onShow,\n container = document.querySelector('.tapp') || document.body,\n onHide,\n children,\n shouldShowOnHover = false,\n shouldUseChildrenWidth = true,\n yOffset = 0,\n },\n ref,\n ) => {\n const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n x: 0,\n y: 0,\n });\n\n const [alignment, setAlignment] = useState<PopupAlignment>(PopupAlignment.TopLeft);\n const [offset, setOffset] = useState<number>(0);\n const [isOpen, setIsOpen] = useState(false);\n const [portal, setPortal] = useState<ReactPortal>();\n const [menuHeight, setMenuHeight] = useState(0);\n\n const [pseudoSize, setPseudoSize] = useState<{ height: number; width: number }>();\n\n const timeout = useRef<number>();\n\n const uuid = useUuid();\n\n // ToDo: Replace with hook if new chayns api is ready\n\n const popupContentRef = useRef<HTMLDivElement>(null);\n const popupPseudoContentRef = useRef<HTMLDivElement>(null);\n const popupRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (popupPseudoContentRef.current) {\n const { height, width } = popupPseudoContentRef.current.getBoundingClientRect();\n\n setPseudoSize({ height, width });\n }\n }, []);\n\n const handleShow = useCallback(() => {\n if (popupRef.current && pseudoSize) {\n const { height: pseudoHeight, width: pseudoWidth } = pseudoSize;\n\n const {\n height: childrenHeight,\n left: childrenLeft,\n top: childrenTop,\n width: childrenWidth,\n } = popupRef.current.getBoundingClientRect();\n\n if (pseudoHeight > childrenTop - 25) {\n let isRight = false;\n\n if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n setAlignment(PopupAlignment.BottomRight);\n\n isRight = true;\n } else {\n setAlignment(PopupAlignment.BottomLeft);\n }\n\n const x = childrenLeft + childrenWidth / 2;\n const y = childrenTop + childrenHeight + yOffset;\n\n let newOffset;\n\n if (isRight) {\n newOffset =\n x + pseudoWidth >= window.innerWidth\n ? x + pseudoWidth - window.innerWidth\n : 0;\n } else {\n newOffset = 0;\n\n const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n newOffset =\n right + pseudoWidth >= window.innerWidth\n ? right + pseudoWidth - window.innerWidth\n : 0;\n }\n\n setOffset(newOffset);\n\n const newX = x - newOffset;\n\n setCoordinates({\n x: newX < 23 ? 23 : newX,\n y: y - yOffset,\n });\n } else {\n let isRight = false;\n\n if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n setAlignment(PopupAlignment.TopRight);\n\n isRight = true;\n } else {\n setAlignment(PopupAlignment.TopLeft);\n }\n\n const x = childrenLeft + childrenWidth / 2;\n const y = childrenTop - yOffset;\n\n let newOffset;\n\n if (isRight) {\n newOffset =\n x + pseudoWidth >= window.innerWidth\n ? x + pseudoWidth - window.innerWidth\n : 0;\n } else {\n newOffset = 0;\n\n const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n newOffset =\n right + pseudoWidth >= window.innerWidth\n ? right + pseudoWidth - window.innerWidth\n : 0;\n }\n\n setOffset(newOffset);\n\n const newX = x - newOffset;\n\n setCoordinates({\n x: newX < 23 ? 23 : newX,\n y: y - yOffset,\n });\n }\n\n setIsOpen(true);\n }\n }, [pseudoSize, yOffset]);\n\n const handleChildrenClick = () => {\n if (!shouldShowOnHover) {\n handleShow();\n }\n };\n\n const handleHide = useCallback(() => {\n setIsOpen(false);\n }, []);\n\n const handleMouseEnter = useCallback(() => {\n if (shouldShowOnHover) {\n window.clearTimeout(timeout.current);\n handleShow();\n }\n }, [handleShow, shouldShowOnHover]);\n\n const handleMouseLeave = useCallback(() => {\n if (!shouldShowOnHover) {\n return;\n }\n\n timeout.current = window.setTimeout(() => {\n handleHide();\n }, 500);\n }, [handleHide, shouldShowOnHover]);\n\n const handleDocumentClick = useCallback<EventListener>(\n (event) => {\n if (\n !popupContentRef.current?.contains(event.target as Node) &&\n !shouldShowOnHover\n ) {\n event.preventDefault();\n event.stopPropagation();\n\n handleHide();\n }\n },\n [handleHide, shouldShowOnHover],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleHide,\n show: handleShow,\n }),\n [handleHide, handleShow],\n );\n\n useEffect(() => {\n void getWindowMetrics().then((result) => {\n if (result.topBarHeight) {\n setMenuHeight(result.topBarHeight);\n }\n });\n }, []);\n\n useEffect(() => {\n if (isOpen) {\n document.addEventListener('click', handleDocumentClick, true);\n window.addEventListener('blur', handleHide);\n\n if (typeof onShow === 'function') {\n onShow();\n }\n } else if (typeof onHide === 'function') {\n onHide();\n }\n\n return () => {\n document.removeEventListener('click', handleDocumentClick, true);\n window.removeEventListener('blur', handleHide);\n };\n }, [handleDocumentClick, handleHide, isOpen, onHide, onShow]);\n\n useEffect(() => {\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isOpen && (\n <PopupContentWrapper\n offset={offset}\n coordinates={coordinates}\n key={`tooltip_${uuid}`}\n alignment={alignment}\n ref={popupContentRef}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n >\n <AreaContextProvider shouldChangeColor={false}>\n {content}\n </AreaContextProvider>\n </PopupContentWrapper>\n )}\n </AnimatePresence>,\n container,\n ),\n );\n }, [\n alignment,\n container,\n content,\n coordinates,\n handleMouseEnter,\n handleMouseLeave,\n isOpen,\n offset,\n uuid,\n ]);\n\n return (\n <>\n {!pseudoSize && (\n <StyledPopupPseudo ref={popupPseudoContentRef} $menuHeight={menuHeight}>\n {content}\n </StyledPopupPseudo>\n )}\n <StyledPopup\n ref={popupRef}\n onClick={handleChildrenClick}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n $shouldUseChildrenWidth={shouldUseChildrenWidth}\n >\n {children}\n </StyledPopup>\n {portal}\n </>\n );\n },\n);\n\nPopup.displayName = 'Popup';\n\nexport default Popup;\n"],"mappings":"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","ignoreList":[]}
@@ -4,14 +4,20 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.StyledPopupPseudo = exports.StyledPopup = void 0;
7
- var _styledComponents = _interopRequireDefault(require("styled-components"));
8
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
7
+ var _styledComponents = _interopRequireWildcard(require("styled-components"));
8
+ 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); }
9
+ 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; }
9
10
  const StyledPopup = exports.StyledPopup = _styledComponents.default.span`
10
11
  cursor: pointer;
11
12
  position: relative;
12
- display: flex;
13
- width: fit-content;
14
- height: fit-content;
13
+
14
+ ${({
15
+ $shouldUseChildrenWidth
16
+ }) => $shouldUseChildrenWidth && (0, _styledComponents.css)`
17
+ display: flex;
18
+ width: fit-content;
19
+ height: fit-content;
20
+ `}
15
21
  `;
16
22
  const StyledPopupPseudo = exports.StyledPopupPseudo = _styledComponents.default.div`
17
23
  top: ${({
@@ -1 +1 @@
1
- {"version":3,"file":"Popup.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledPopup","exports","styled","span","StyledPopupPseudo","div","$menuHeight"],"sources":["../../../../src/components/popup/Popup.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledPopup = styled.span`\n cursor: pointer;\n position: relative;\n display: flex;\n width: fit-content;\n height: fit-content;\n`;\n\nexport const StyledPopupPseudo = styled.div<{\n $menuHeight: number;\n}>`\n top: ${({ $menuHeight }) => `${$menuHeight - 0}px`};\n left: 0;\n pointer-events: none;\n visibility: hidden;\n position: absolute;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAGE,yBAAM,CAACC,IAAI;AACtC;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,iBAAiB,GAAAH,OAAA,CAAAG,iBAAA,GAAGF,yBAAM,CAACG,GAEtC;AACF,WAAW,CAAC;EAAEC;AAAY,CAAC,KAAK,GAAGA,WAAW,GAAG,CAAC,IAAI;AACtD;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
1
+ {"version":3,"file":"Popup.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledPopup","exports","styled","span","$shouldUseChildrenWidth","css","StyledPopupPseudo","div","$menuHeight"],"sources":["../../../../src/components/popup/Popup.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledPopupProps = WithTheme<{\n $shouldUseChildrenWidth: boolean;\n}>;\n\nexport const StyledPopup = styled.span<StyledPopupProps>`\n cursor: pointer;\n position: relative;\n\n ${({ $shouldUseChildrenWidth }) =>\n $shouldUseChildrenWidth &&\n css`\n display: flex;\n width: fit-content;\n height: fit-content;\n `}\n`;\n\nexport const StyledPopupPseudo = styled.div<{\n $menuHeight: number;\n}>`\n top: ${({ $menuHeight }) => `${$menuHeight - 0}px`};\n left: 0;\n pointer-events: none;\n visibility: hidden;\n position: absolute;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAC,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;AAOzC,MAAMW,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAGE,yBAAM,CAACC,IAAsB;AACxD;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAwB,CAAC,KAC1BA,uBAAuB,IACvB,IAAAC,qBAAG;AACX;AACA;AACA;AACA,SAAS;AACT,CAAC;AAEM,MAAMC,iBAAiB,GAAAL,OAAA,CAAAK,iBAAA,GAAGJ,yBAAM,CAACK,GAEtC;AACF,WAAW,CAAC;EAAEC;AAAY,CAAC,KAAK,GAAGA,WAAW,GAAG,CAAC,IAAI;AACtD;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
@@ -40,7 +40,8 @@ const Tooltip = ({
40
40
  shouldShowOnHover: true,
41
41
  content: content,
42
42
  ref: tooltipRef,
43
- container: container
43
+ container: container,
44
+ shouldUseChildrenWidth: false
44
45
  }, /*#__PURE__*/_react.default.createElement(_Tooltip.StyledTooltipChildren, {
45
46
  $isOnlyText: (0, _tooltip.isTextOnlyElement)(children),
46
47
  $shouldUseChildrenWidth: shouldUseChildrenWidth
@@ -1 +1 @@
1
- {"version":3,"file":"Tooltip.js","names":["_react","_interopRequireWildcard","require","_tooltip","_Popup","_interopRequireDefault","_TooltipItem","_Tooltip","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Tooltip","item","children","container","isDisabled","itemWidth","shouldUseChildrenWidth","tooltipRef","useRef","content","useMemo","isValidElement","createElement","width","text","headline","imageUrl","button","StyledTooltip","StyledTooltipChildren","$isOnlyText","isTextOnlyElement","$shouldUseChildrenWidth","shouldShowOnHover","ref","displayName","_default","exports"],"sources":["../../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import React, { FC, isValidElement, ReactNode, useMemo, useRef, type CSSProperties } from 'react';\nimport type { PopupRef } from '../../types/popup';\nimport type { ITooltipItem } from '../../types/tooltip';\nimport { isTextOnlyElement } from '../../utils/tooltip';\nimport Popup from '../popup/Popup';\nimport TooltipItem from './tooltip-item/TooltipItem';\nimport { StyledTooltip, StyledTooltipChildren } from './Tooltip.styles';\n\nexport type TooltipProps = {\n /**\n * The elements that the tooltip should surround.\n */\n children: ReactNode;\n /**\n * The element where the content of the `Tooltip` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * The content that should be displayed.\n */\n item: ITooltipItem | ReactNode;\n /**\n * The width of an item.\n */\n itemWidth?: CSSProperties['width'];\n /**\n * whether the tooltip should be shown.\n */\n isDisabled?: boolean;\n /**\n * Whether the width of the children should be used.\n */\n shouldUseChildrenWidth?: boolean;\n};\n\nconst Tooltip: FC<TooltipProps> = ({\n item,\n children,\n container,\n isDisabled,\n itemWidth,\n shouldUseChildrenWidth = true,\n}) => {\n const tooltipRef = useRef<PopupRef>(null);\n\n const content = useMemo(() => {\n if (isValidElement(item)) {\n return item;\n }\n\n return (\n <TooltipItem\n width={itemWidth}\n text={(item as ITooltipItem).text}\n headline={(item as ITooltipItem).headline}\n imageUrl={(item as ITooltipItem).imageUrl}\n button={(item as ITooltipItem).button}\n />\n );\n }, [item, itemWidth]);\n\n return useMemo(\n () => (\n <StyledTooltip>\n {isDisabled ? (\n <StyledTooltipChildren\n $isOnlyText={isTextOnlyElement(children)}\n $shouldUseChildrenWidth={shouldUseChildrenWidth}\n >\n {children}\n </StyledTooltipChildren>\n ) : (\n <Popup\n shouldShowOnHover\n content={content}\n ref={tooltipRef}\n container={container}\n >\n <StyledTooltipChildren\n $isOnlyText={isTextOnlyElement(children)}\n $shouldUseChildrenWidth={shouldUseChildrenWidth}\n >\n {children}\n </StyledTooltipChildren>\n </Popup>\n )}\n </StyledTooltip>\n ),\n [isDisabled, children, shouldUseChildrenWidth, content, container],\n );\n};\n\nTooltip.displayName = 'Tooltip';\n\nexport default Tooltip;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"Tooltip.js","names":["_react","_interopRequireWildcard","require","_tooltip","_Popup","_interopRequireDefault","_TooltipItem","_Tooltip","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Tooltip","item","children","container","isDisabled","itemWidth","shouldUseChildrenWidth","tooltipRef","useRef","content","useMemo","isValidElement","createElement","width","text","headline","imageUrl","button","StyledTooltip","StyledTooltipChildren","$isOnlyText","isTextOnlyElement","$shouldUseChildrenWidth","shouldShowOnHover","ref","displayName","_default","exports"],"sources":["../../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import React, { FC, isValidElement, ReactNode, useMemo, useRef, type CSSProperties } from 'react';\nimport type { PopupRef } from '../../types/popup';\nimport type { ITooltipItem } from '../../types/tooltip';\nimport { isTextOnlyElement } from '../../utils/tooltip';\nimport Popup from '../popup/Popup';\nimport TooltipItem from './tooltip-item/TooltipItem';\nimport { StyledTooltip, StyledTooltipChildren } from './Tooltip.styles';\n\nexport type TooltipProps = {\n /**\n * The elements that the tooltip should surround.\n */\n children: ReactNode;\n /**\n * The element where the content of the `Tooltip` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * The content that should be displayed.\n */\n item: ITooltipItem | ReactNode;\n /**\n * The width of an item.\n */\n itemWidth?: CSSProperties['width'];\n /**\n * whether the tooltip should be shown.\n */\n isDisabled?: boolean;\n /**\n * Whether the width of the children should be used.\n */\n shouldUseChildrenWidth?: boolean;\n};\n\nconst Tooltip: FC<TooltipProps> = ({\n item,\n children,\n container,\n isDisabled,\n itemWidth,\n shouldUseChildrenWidth = true,\n}) => {\n const tooltipRef = useRef<PopupRef>(null);\n\n const content = useMemo(() => {\n if (isValidElement(item)) {\n return item;\n }\n\n return (\n <TooltipItem\n width={itemWidth}\n text={(item as ITooltipItem).text}\n headline={(item as ITooltipItem).headline}\n imageUrl={(item as ITooltipItem).imageUrl}\n button={(item as ITooltipItem).button}\n />\n );\n }, [item, itemWidth]);\n\n return useMemo(\n () => (\n <StyledTooltip>\n {isDisabled ? (\n <StyledTooltipChildren\n $isOnlyText={isTextOnlyElement(children)}\n $shouldUseChildrenWidth={shouldUseChildrenWidth}\n >\n {children}\n </StyledTooltipChildren>\n ) : (\n <Popup\n shouldShowOnHover\n content={content}\n ref={tooltipRef}\n container={container}\n shouldUseChildrenWidth={false}\n >\n <StyledTooltipChildren\n $isOnlyText={isTextOnlyElement(children)}\n $shouldUseChildrenWidth={shouldUseChildrenWidth}\n >\n {children}\n </StyledTooltipChildren>\n </Popup>\n )}\n </StyledTooltip>\n ),\n [isDisabled, children, shouldUseChildrenWidth, content, container],\n );\n};\n\nTooltip.displayName = 'Tooltip';\n\nexport default Tooltip;\n"],"mappings":"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","ignoreList":[]}
@@ -52,12 +52,12 @@ export const StyledMotionAccordion = styled(motion.div)`
52
52
  if (theme.accordionLines) {
53
53
  if ($isWrapped && $shouldShowLines) {
54
54
  return css`
55
- border-bottom-color: ${theme.headline}80;
55
+ border-bottom-color: rgba(${theme['headline-rgb']}, 0.5);
56
56
  `;
57
57
  }
58
58
  if (!$isOpen && $shouldShowLines) {
59
59
  return css`
60
- border-bottom-color: ${theme.headline};
60
+ border-bottom-color: rgba(${theme['headline-rgb']}, 0.5);
61
61
  `;
62
62
  }
63
63
  }
@@ -1 +1 @@
1
- {"version":3,"file":"Accordion.styles.js","names":["motion","styled","css","StyledMotionAccordion","div","_ref","$isOpen","$isWrapped","$shouldForceBackground","$shouldHideBackground","theme","cardBackgroundOpacity","cardBorderRadius","cardShadow","_ref2","accordionLines","_ref3","_ref4","$shouldShowLines","undefined","headline","_ref5","$isParentWrapped","_ref6","_ref7"],"sources":["../../../../src/components/accordion/Accordion.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionProps = WithTheme<{\n $isOpen: boolean;\n $isParentWrapped: boolean;\n $isWrapped?: boolean;\n $shouldForceBackground?: boolean;\n $shouldHideBackground?: boolean;\n $shouldShowLines?: boolean;\n}>;\n\nexport const StyledMotionAccordion = styled(motion.div)<StyledMotionAccordionProps>`\n ${({\n $isOpen,\n $isWrapped,\n $shouldForceBackground,\n $shouldHideBackground,\n theme,\n }: StyledMotionAccordionProps) =>\n ($isOpen || $shouldForceBackground) &&\n !$isWrapped &&\n !$shouldHideBackground &&\n css`\n background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n border-radius: ${theme.cardBorderRadius}px;\n box-shadow: 0 2px 6px 0 rgba(0, 0, 0, ${theme.cardShadow});\n `}\n\n ${({ theme }: StyledMotionAccordionProps) =>\n theme.accordionLines &&\n css`\n border-bottom: 1px solid transparent;\n `}\n \n margin-bottom: ${({ $isOpen, $isWrapped }: StyledMotionAccordionProps) =>\n $isOpen && !$isWrapped ? '30px' : '0px'};\n transition:\n background-color 0.3s ease,\n border-bottom-color 0.3s ease,\n border-radius 0.3s ease,\n box-shadow 0.3s ease,\n margin-bottom 0.3s ease;\n will-change: unset !important;\n\n ${({\n $isOpen,\n $isWrapped,\n $shouldForceBackground,\n $shouldShowLines,\n theme,\n }: StyledMotionAccordionProps) => {\n if ($shouldForceBackground) return undefined;\n\n if (theme.accordionLines) {\n if ($isWrapped && $shouldShowLines) {\n return css`\n border-bottom-color: ${theme.headline}80;\n `;\n }\n\n if (!$isOpen && $shouldShowLines) {\n return css`\n border-bottom-color: ${theme.headline};\n `;\n }\n }\n\n return undefined;\n }}\n ${({ $isParentWrapped }: StyledMotionAccordionProps) =>\n $isParentWrapped &&\n css`\n padding-left: 17px;\n `}\n ${({ $isWrapped }: StyledMotionAccordionProps) =>\n !$isWrapped &&\n css`\n margin-top: 10px;\n `}\n ${({ $isWrapped, $shouldHideBackground, theme }: StyledMotionAccordionProps) =>\n !$isWrapped &&\n !$shouldHideBackground &&\n css`\n &:hover {\n background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n }\n `};\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAY/C,OAAO,MAAMC,qBAAqB,GAAGF,MAAM,CAACD,MAAM,CAACI,GAAG,CAA6B;AACnF,MAAMC,IAAA;EAAA,IAAC;IACCC,OAAO;IACPC,UAAU;IACVC,sBAAsB;IACtBC,qBAAqB;IACrBC;EACwB,CAAC,GAAAL,IAAA;EAAA,OACzB,CAACC,OAAO,IAAIE,sBAAsB,KAClC,CAACD,UAAU,IACX,CAACE,qBAAqB,IACtBP,GAAG;AACX,qCAAqCQ,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACrF,6BAA6BD,KAAK,CAACE,gBAAgB;AACnD,oDAAoDF,KAAK,CAACG,UAAU;AACpE,SAAS;AAAA;AACT;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEJ;EAAkC,CAAC,GAAAI,KAAA;EAAA,OACpCJ,KAAK,CAACK,cAAc,IACpBb,GAAG;AACX;AACA,SAAS;AAAA;AACT;AACA,qBAAqBc,KAAA;EAAA,IAAC;IAAEV,OAAO;IAAEC;EAAuC,CAAC,GAAAS,KAAA;EAAA,OACjEV,OAAO,IAAI,CAACC,UAAU,GAAG,MAAM,GAAG,KAAK;AAAA;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMU,KAAA,IAMgC;EAAA,IAN/B;IACCX,OAAO;IACPC,UAAU;IACVC,sBAAsB;IACtBU,gBAAgB;IAChBR;EACwB,CAAC,GAAAO,KAAA;EACzB,IAAIT,sBAAsB,EAAE,OAAOW,SAAS;EAE5C,IAAIT,KAAK,CAACK,cAAc,EAAE;IACtB,IAAIR,UAAU,IAAIW,gBAAgB,EAAE;MAChC,OAAOhB,GAAG;AAC1B,2CAA2CQ,KAAK,CAACU,QAAQ;AACzD,iBAAiB;IACL;IAEA,IAAI,CAACd,OAAO,IAAIY,gBAAgB,EAAE;MAC9B,OAAOhB,GAAG;AAC1B,2CAA2CQ,KAAK,CAACU,QAAQ;AACzD,iBAAiB;IACL;EACJ;EAEA,OAAOD,SAAS;AACpB,CAAC;AACL,MAAME,KAAA;EAAA,IAAC;IAAEC;EAA6C,CAAC,GAAAD,KAAA;EAAA,OAC/CC,gBAAgB,IAChBpB,GAAG;AACX;AACA,SAAS;AAAA;AACT,cAAcqB,KAAA;EAAA,IAAC;IAAEhB;EAAuC,CAAC,GAAAgB,KAAA;EAAA,OACjD,CAAChB,UAAU,IACXL,GAAG;AACX;AACA,SAAS;AAAA;AACT,cAAcsB,KAAA;EAAA,IAAC;IAAEjB,UAAU;IAAEE,qBAAqB;IAAEC;EAAkC,CAAC,GAAAc,KAAA;EAAA,OAC/E,CAACjB,UAAU,IACX,CAACE,qBAAqB,IACtBP,GAAG;AACX;AACA,yCAAyCQ,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACzF;AACA,SAAS;AAAA;AACT,CAAC","ignoreList":[]}
1
+ {"version":3,"file":"Accordion.styles.js","names":["motion","styled","css","StyledMotionAccordion","div","_ref","$isOpen","$isWrapped","$shouldForceBackground","$shouldHideBackground","theme","cardBackgroundOpacity","cardBorderRadius","cardShadow","_ref2","accordionLines","_ref3","_ref4","$shouldShowLines","undefined","_ref5","$isParentWrapped","_ref6","_ref7"],"sources":["../../../../src/components/accordion/Accordion.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionProps = WithTheme<{\n $isOpen: boolean;\n $isParentWrapped: boolean;\n $isWrapped?: boolean;\n $shouldForceBackground?: boolean;\n $shouldHideBackground?: boolean;\n $shouldShowLines?: boolean;\n}>;\n\nexport const StyledMotionAccordion = styled(motion.div)<StyledMotionAccordionProps>`\n ${({\n $isOpen,\n $isWrapped,\n $shouldForceBackground,\n $shouldHideBackground,\n theme,\n }: StyledMotionAccordionProps) =>\n ($isOpen || $shouldForceBackground) &&\n !$isWrapped &&\n !$shouldHideBackground &&\n css`\n background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n border-radius: ${theme.cardBorderRadius}px;\n box-shadow: 0 2px 6px 0 rgba(0, 0, 0, ${theme.cardShadow});\n `}\n\n ${({ theme }: StyledMotionAccordionProps) =>\n theme.accordionLines &&\n css`\n border-bottom: 1px solid transparent;\n `}\n \n margin-bottom: ${({ $isOpen, $isWrapped }: StyledMotionAccordionProps) =>\n $isOpen && !$isWrapped ? '30px' : '0px'};\n transition:\n background-color 0.3s ease,\n border-bottom-color 0.3s ease,\n border-radius 0.3s ease,\n box-shadow 0.3s ease,\n margin-bottom 0.3s ease;\n will-change: unset !important;\n\n ${({\n $isOpen,\n $isWrapped,\n $shouldForceBackground,\n $shouldShowLines,\n theme,\n }: StyledMotionAccordionProps) => {\n if ($shouldForceBackground) return undefined;\n\n if (theme.accordionLines) {\n if ($isWrapped && $shouldShowLines) {\n return css`\n border-bottom-color: rgba(${theme['headline-rgb']}, 0.5);\n `;\n }\n\n if (!$isOpen && $shouldShowLines) {\n return css`\n border-bottom-color: rgba(${theme['headline-rgb']}, 0.5);\n `;\n }\n }\n\n return undefined;\n }}\n ${({ $isParentWrapped }: StyledMotionAccordionProps) =>\n $isParentWrapped &&\n css`\n padding-left: 17px;\n `}\n ${({ $isWrapped }: StyledMotionAccordionProps) =>\n !$isWrapped &&\n css`\n margin-top: 10px;\n `}\n ${({ $isWrapped, $shouldHideBackground, theme }: StyledMotionAccordionProps) =>\n !$isWrapped &&\n !$shouldHideBackground &&\n css`\n &:hover {\n background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n }\n `};\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAY/C,OAAO,MAAMC,qBAAqB,GAAGF,MAAM,CAACD,MAAM,CAACI,GAAG,CAA6B;AACnF,MAAMC,IAAA;EAAA,IAAC;IACCC,OAAO;IACPC,UAAU;IACVC,sBAAsB;IACtBC,qBAAqB;IACrBC;EACwB,CAAC,GAAAL,IAAA;EAAA,OACzB,CAACC,OAAO,IAAIE,sBAAsB,KAClC,CAACD,UAAU,IACX,CAACE,qBAAqB,IACtBP,GAAG;AACX,qCAAqCQ,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACrF,6BAA6BD,KAAK,CAACE,gBAAgB;AACnD,oDAAoDF,KAAK,CAACG,UAAU;AACpE,SAAS;AAAA;AACT;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEJ;EAAkC,CAAC,GAAAI,KAAA;EAAA,OACpCJ,KAAK,CAACK,cAAc,IACpBb,GAAG;AACX;AACA,SAAS;AAAA;AACT;AACA,qBAAqBc,KAAA;EAAA,IAAC;IAAEV,OAAO;IAAEC;EAAuC,CAAC,GAAAS,KAAA;EAAA,OACjEV,OAAO,IAAI,CAACC,UAAU,GAAG,MAAM,GAAG,KAAK;AAAA;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMU,KAAA,IAMgC;EAAA,IAN/B;IACCX,OAAO;IACPC,UAAU;IACVC,sBAAsB;IACtBU,gBAAgB;IAChBR;EACwB,CAAC,GAAAO,KAAA;EACzB,IAAIT,sBAAsB,EAAE,OAAOW,SAAS;EAE5C,IAAIT,KAAK,CAACK,cAAc,EAAE;IACtB,IAAIR,UAAU,IAAIW,gBAAgB,EAAE;MAChC,OAAOhB,GAAG;AAC1B,gDAAgDQ,KAAK,CAAC,cAAc,CAAC;AACrE,iBAAiB;IACL;IAEA,IAAI,CAACJ,OAAO,IAAIY,gBAAgB,EAAE;MAC9B,OAAOhB,GAAG;AAC1B,gDAAgDQ,KAAK,CAAC,cAAc,CAAC;AACrE,iBAAiB;IACL;EACJ;EAEA,OAAOS,SAAS;AACpB,CAAC;AACL,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAA6C,CAAC,GAAAD,KAAA;EAAA,OAC/CC,gBAAgB,IAChBnB,GAAG;AACX;AACA,SAAS;AAAA;AACT,cAAcoB,KAAA;EAAA,IAAC;IAAEf;EAAuC,CAAC,GAAAe,KAAA;EAAA,OACjD,CAACf,UAAU,IACXL,GAAG;AACX;AACA,SAAS;AAAA;AACT,cAAcqB,KAAA;EAAA,IAAC;IAAEhB,UAAU;IAAEE,qBAAqB;IAAEC;EAAkC,CAAC,GAAAa,KAAA;EAAA,OAC/E,CAAChB,UAAU,IACX,CAACE,qBAAqB,IACtBP,GAAG;AACX;AACA,yCAAyCQ,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACzF;AACA,SAAS;AAAA;AACT,CAAC","ignoreList":[]}
@@ -18,6 +18,7 @@ const ListItem = _ref => {
18
18
  onLongPress,
19
19
  leftElements,
20
20
  rightElements,
21
+ shouldHideIndicator,
21
22
  subtitle,
22
23
  shouldShowRoundImage,
23
24
  shouldShowSeparatorBelow = false,
@@ -88,6 +89,7 @@ const ListItem = _ref => {
88
89
  onClick: isClickable ? handleHeadClick : undefined,
89
90
  onLongPress: onLongPress,
90
91
  rightElements: rightElements,
92
+ shouldHideIndicator: shouldHideIndicator,
91
93
  subtitle: subtitle,
92
94
  shouldShowRoundImage: shouldShowRoundImage,
93
95
  title: title,
@@ -1 +1 @@
1
- {"version":3,"file":"ListItem.js","names":["AnimatePresence","React","useCallback","useContext","useEffect","useUuid","AreaContextProvider","ListContext","ListItemBody","ListItemHead","StyledMotionListItem","ListItem","_ref","children","hoverItem","icons","images","isDefaultOpen","isOpen","onClick","onLongPress","leftElements","rightElements","subtitle","shouldShowRoundImage","shouldShowSeparatorBelow","title","titleElement","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","uuid","isExpandable","undefined","isItemOpen","handleHeadClick","event","shouldOnlyOpen","isClickable","createElement","animate","height","opacity","className","exit","initial","key","$isClickable","$isOpen","$isWrapped","$shouldShowSeparatorBelow","id","displayName"],"sources":["../../../../../src/components/list/list-item/ListItem.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n FC,\n MouseEventHandler,\n ReactNode,\n TouchEventHandler,\n useCallback,\n useContext,\n useEffect,\n} from 'react';\nimport { useUuid } from '../../../hooks/uuid';\nimport type { IListItemRightElements } from '../../../types/list';\nimport AreaContextProvider from '../../area-provider/AreaContextProvider';\nimport { ListContext } from '../List';\nimport ListItemBody from './list-item-body/ListItemBody';\nimport ListItemHead from './list-item-head/ListItemHead';\nimport { StyledMotionListItem } from './ListItem.styles';\n\nexport type ListItemElements = [ReactNode, ...ReactNode[]];\n\nexport type ListItemProps = {\n /**\n * The content of the `ListItem` body. When the `ListItem` has children,\n * it can be opened and also gets an icon as an indicator automatically.\n */\n children?: ReactNode;\n /**\n * Element that is displayed when hovering over the `ListItem` on the right\n * side. On mobile devices, this element is not displayed.\n */\n hoverItem?: ReactNode;\n /**\n * The FontAwesome or tobit icons to render like an image on the left side\n * of the header. Multiple icons are stacked. See the `Icon` component\n * documentation for more information.\n */\n icons?: string[];\n /**\n * A list of image URLs that are displayed on the left side of the header.\n * If multiple URLs are passed, the image is assembled from the first three\n * image URLs as a puzzle.\n */\n images?: string[];\n /**\n * This can be used to automatically expand the `ListItem` during the first render.\n */\n isDefaultOpen?: boolean;\n /**\n * This overrides the internal opening state of the item and makes it controlled.\n */\n isOpen?: boolean;\n /**\n * Function to be executed when the header of the `ListItem` was clicked\n */\n onClick?: MouseEventHandler<HTMLDivElement>;\n /**\n * Function to be executed when the header of the `ListItem` is pressed for\n * 400 milliseconds.\n */\n onLongPress?: TouchEventHandler<HTMLDivElement>;\n /**\n * Elements that are displayed on the left side of the header. If multiple\n * elements are specified, they are displayed one aside the other.\n */\n leftElements?: ListItemElements;\n /**\n * Elements that are displayed on the right side of the header. If multiple\n * elements are specified, they are displayed one below the other.\n */\n rightElements?: IListItemRightElements;\n /**\n * Images of users should always be displayed in a round shape. Therefore,\n * this property can be set to true.\n */\n shouldShowRoundImage?: boolean;\n /**\n * Whether a separator should be displayed below this item. In this case, the border is displayed thicker than normal.\n */\n shouldShowSeparatorBelow?: boolean;\n /**\n * Subtitle of the `ListItem` displayed in the head below the title\n */\n subtitle?: ReactNode;\n /**\n * Title of the `ListItem` displayed in the head\n */\n title: ReactNode;\n /**\n * Additional elements to be displayed in the header next to the title.\n */\n titleElement?: ReactNode;\n};\n\nconst ListItem: FC<ListItemProps> = ({\n children,\n hoverItem,\n icons,\n images,\n isDefaultOpen,\n isOpen,\n onClick,\n onLongPress,\n leftElements,\n rightElements,\n subtitle,\n shouldShowRoundImage,\n shouldShowSeparatorBelow = false,\n title,\n titleElement,\n}) => {\n const {\n incrementExpandableItemCount,\n isAnyItemExpandable,\n isWrapped,\n openItemUuid,\n updateOpenItemUuid,\n } = useContext(ListContext);\n\n const uuid = useUuid();\n\n const isExpandable = children !== undefined;\n const isItemOpen = isOpen ?? openItemUuid === uuid;\n\n const handleHeadClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n (event) => {\n if (isExpandable) {\n updateOpenItemUuid(uuid);\n }\n\n if (typeof onClick === 'function') {\n onClick(event);\n }\n },\n [isExpandable, onClick, updateOpenItemUuid, uuid],\n );\n\n useEffect(() => {\n if (isExpandable) {\n // The incrementExpandableItemCount function returns an cleanup\n // function to decrement expandableItemCount if component unmounts\n return incrementExpandableItemCount();\n }\n\n return undefined;\n }, [incrementExpandableItemCount, isExpandable]);\n\n useEffect(() => {\n if (isDefaultOpen) {\n updateOpenItemUuid(uuid, { shouldOnlyOpen: true });\n }\n }, [isDefaultOpen, updateOpenItemUuid, uuid]);\n\n const isClickable = typeof onClick === 'function' || isExpandable;\n\n return (\n <StyledMotionListItem\n animate={{ height: 'auto', opacity: 1 }}\n className=\"beta-chayns-list-item\"\n exit={{ height: 0, opacity: 0 }}\n initial={{ height: 0, opacity: 0 }}\n key={`list-item-${uuid}`}\n $isClickable={isClickable}\n $isOpen={isItemOpen}\n $isWrapped={isWrapped}\n $shouldShowSeparatorBelow={shouldShowSeparatorBelow}\n >\n <ListItemHead\n hoverItem={hoverItem}\n icons={icons}\n images={images}\n isAnyItemExpandable={isAnyItemExpandable}\n isExpandable={isExpandable}\n isOpen={isItemOpen}\n leftElements={leftElements}\n onClick={isClickable ? handleHeadClick : undefined}\n onLongPress={onLongPress}\n rightElements={rightElements}\n subtitle={subtitle}\n shouldShowRoundImage={shouldShowRoundImage}\n title={title}\n titleElement={titleElement}\n />\n <AnimatePresence initial={false}>\n {isExpandable && isItemOpen && (\n <ListItemBody id={uuid}>\n <AreaContextProvider>{children}</AreaContextProvider>\n </ListItemBody>\n )}\n </AnimatePresence>\n </StyledMotionListItem>\n );\n};\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"ListItem.js","names":["AnimatePresence","React","useCallback","useContext","useEffect","useUuid","AreaContextProvider","ListContext","ListItemBody","ListItemHead","StyledMotionListItem","ListItem","_ref","children","hoverItem","icons","images","isDefaultOpen","isOpen","onClick","onLongPress","leftElements","rightElements","shouldHideIndicator","subtitle","shouldShowRoundImage","shouldShowSeparatorBelow","title","titleElement","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","uuid","isExpandable","undefined","isItemOpen","handleHeadClick","event","shouldOnlyOpen","isClickable","createElement","animate","height","opacity","className","exit","initial","key","$isClickable","$isOpen","$isWrapped","$shouldShowSeparatorBelow","id","displayName"],"sources":["../../../../../src/components/list/list-item/ListItem.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n FC,\n MouseEventHandler,\n ReactNode,\n TouchEventHandler,\n useCallback,\n useContext,\n useEffect,\n} from 'react';\nimport { useUuid } from '../../../hooks/uuid';\nimport type { IListItemRightElements } from '../../../types/list';\nimport AreaContextProvider from '../../area-provider/AreaContextProvider';\nimport { ListContext } from '../List';\nimport ListItemBody from './list-item-body/ListItemBody';\nimport ListItemHead from './list-item-head/ListItemHead';\nimport { StyledMotionListItem } from './ListItem.styles';\n\nexport type ListItemElements = [ReactNode, ...ReactNode[]];\n\nexport type ListItemProps = {\n /**\n * The content of the `ListItem` body. When the `ListItem` has children,\n * it can be opened and also gets an icon as an indicator automatically.\n */\n children?: ReactNode;\n /**\n * Element that is displayed when hovering over the `ListItem` on the right\n * side. On mobile devices, this element is not displayed.\n */\n hoverItem?: ReactNode;\n /**\n * The FontAwesome or tobit icons to render like an image on the left side\n * of the header. Multiple icons are stacked. See the `Icon` component\n * documentation for more information.\n */\n icons?: string[];\n /**\n * A list of image URLs that are displayed on the left side of the header.\n * If multiple URLs are passed, the image is assembled from the first three\n * image URLs as a puzzle.\n */\n images?: string[];\n /**\n * This can be used to automatically expand the `ListItem` during the first render.\n */\n isDefaultOpen?: boolean;\n /**\n * This overrides the internal opening state of the item and makes it controlled.\n */\n isOpen?: boolean;\n /**\n * Function to be executed when the header of the `ListItem` was clicked\n */\n onClick?: MouseEventHandler<HTMLDivElement>;\n /**\n * Function to be executed when the header of the `ListItem` is pressed for\n * 400 milliseconds.\n */\n onLongPress?: TouchEventHandler<HTMLDivElement>;\n /**\n * Elements that are displayed on the left side of the header. If multiple\n * elements are specified, they are displayed one aside the other.\n */\n leftElements?: ListItemElements;\n /**\n * Elements that are displayed on the right side of the header. If multiple\n * elements are specified, they are displayed one below the other.\n */\n rightElements?: IListItemRightElements;\n /**\n * If the `ListItem` is expandable, the indicator is displayed on the left\n * side of the header. If this property is set to true, the indicator is\n * hidden.\n */\n shouldHideIndicator?: boolean;\n /**\n * Images of users should always be displayed in a round shape. Therefore,\n * this property can be set to true.\n */\n shouldShowRoundImage?: boolean;\n /**\n * Whether a separator should be displayed below this item. In this case, the border is displayed thicker than normal.\n */\n shouldShowSeparatorBelow?: boolean;\n /**\n * Subtitle of the `ListItem` displayed in the head below the title\n */\n subtitle?: ReactNode;\n /**\n * Title of the `ListItem` displayed in the head\n */\n title: ReactNode;\n /**\n * Additional elements to be displayed in the header next to the title.\n */\n titleElement?: ReactNode;\n};\n\nconst ListItem: FC<ListItemProps> = ({\n children,\n hoverItem,\n icons,\n images,\n isDefaultOpen,\n isOpen,\n onClick,\n onLongPress,\n leftElements,\n rightElements,\n shouldHideIndicator,\n subtitle,\n shouldShowRoundImage,\n shouldShowSeparatorBelow = false,\n title,\n titleElement,\n}) => {\n const {\n incrementExpandableItemCount,\n isAnyItemExpandable,\n isWrapped,\n openItemUuid,\n updateOpenItemUuid,\n } = useContext(ListContext);\n\n const uuid = useUuid();\n\n const isExpandable = children !== undefined;\n const isItemOpen = isOpen ?? openItemUuid === uuid;\n\n const handleHeadClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n (event) => {\n if (isExpandable) {\n updateOpenItemUuid(uuid);\n }\n\n if (typeof onClick === 'function') {\n onClick(event);\n }\n },\n [isExpandable, onClick, updateOpenItemUuid, uuid],\n );\n\n useEffect(() => {\n if (isExpandable) {\n // The incrementExpandableItemCount function returns an cleanup\n // function to decrement expandableItemCount if component unmounts\n return incrementExpandableItemCount();\n }\n\n return undefined;\n }, [incrementExpandableItemCount, isExpandable]);\n\n useEffect(() => {\n if (isDefaultOpen) {\n updateOpenItemUuid(uuid, { shouldOnlyOpen: true });\n }\n }, [isDefaultOpen, updateOpenItemUuid, uuid]);\n\n const isClickable = typeof onClick === 'function' || isExpandable;\n\n return (\n <StyledMotionListItem\n animate={{ height: 'auto', opacity: 1 }}\n className=\"beta-chayns-list-item\"\n exit={{ height: 0, opacity: 0 }}\n initial={{ height: 0, opacity: 0 }}\n key={`list-item-${uuid}`}\n $isClickable={isClickable}\n $isOpen={isItemOpen}\n $isWrapped={isWrapped}\n $shouldShowSeparatorBelow={shouldShowSeparatorBelow}\n >\n <ListItemHead\n hoverItem={hoverItem}\n icons={icons}\n images={images}\n isAnyItemExpandable={isAnyItemExpandable}\n isExpandable={isExpandable}\n isOpen={isItemOpen}\n leftElements={leftElements}\n onClick={isClickable ? handleHeadClick : undefined}\n onLongPress={onLongPress}\n rightElements={rightElements}\n shouldHideIndicator={shouldHideIndicator}\n subtitle={subtitle}\n shouldShowRoundImage={shouldShowRoundImage}\n title={title}\n titleElement={titleElement}\n />\n <AnimatePresence initial={false}>\n {isExpandable && isItemOpen && (\n <ListItemBody id={uuid}>\n <AreaContextProvider>{children}</AreaContextProvider>\n </ListItemBody>\n )}\n </AnimatePresence>\n </StyledMotionListItem>\n );\n};\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":"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","ignoreList":[]}
@@ -28,15 +28,19 @@ export const StyledMotionListItem = styled(motion.div)`
28
28
 
29
29
  ${_ref3 => {
30
30
  let {
31
+ $isWrapped,
31
32
  $shouldShowSeparatorBelow,
32
33
  theme
33
34
  } = _ref3;
34
- return ($shouldShowSeparatorBelow || theme.accordionLines) && css`
35
- &&:not(:last-child) {
36
- border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid
37
- rgba(${theme['headline-rgb']}, 0.5);
38
- }
39
- `;
35
+ return ($shouldShowSeparatorBelow || theme.accordionLines) && $isWrapped ? css`
36
+ &&:not(:last-child) {
37
+ border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid
38
+ rgba(${theme['headline-rgb']}, 0.5);
39
+ }
40
+ ` : css`
41
+ border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid
42
+ rgba(${theme['headline-rgb']}, 0.5);
43
+ `;
40
44
  }}}
41
45
 
42
46
  ${_ref4 => {
@@ -1 +1 @@
1
- {"version":3,"file":"ListItem.styles.js","names":["motion","styled","css","StyledMotionListItem","div","_ref","$isOpen","theme","cardBackgroundOpacity","_ref2","$isClickable","_ref3","$shouldShowSeparatorBelow","accordionLines","_ref4","$isWrapped"],"sources":["../../../../../src/components/list/list-item/ListItem.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemProps = WithTheme<{\n $isClickable: boolean;\n $isOpen: boolean;\n $isWrapped: boolean;\n $shouldShowSeparatorBelow: boolean;\n}>;\n\nexport const StyledMotionListItem = styled(motion.div)<StyledListItemProps>`\n ${({ $isOpen, theme }) =>\n $isOpen &&\n css`\n background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n `}\n\n overflow: hidden;\n transition: background-color 0.3s ease;\n\n ${({ $isClickable, theme }) =>\n $isClickable &&\n css`\n &&:hover {\n background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n }\n `}\n \n ${({ $shouldShowSeparatorBelow, theme }: StyledListItemProps) =>\n ($shouldShowSeparatorBelow || theme.accordionLines) &&\n css`\n &&:not(:last-child) {\n border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid\n rgba(${theme['headline-rgb']}, 0.5);\n }\n `}}\n\n ${({ $isWrapped }) =>\n $isWrapped &&\n css`\n padding-left: 26px;\n `}\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAU/C,OAAO,MAAMC,oBAAoB,GAAGF,MAAM,CAACD,MAAM,CAACI,GAAG,CAAsB;AAC3E,MAAMC,IAAA;EAAA,IAAC;IAAEC,OAAO;IAAEC;EAAM,CAAC,GAAAF,IAAA;EAAA,OACjBC,OAAO,IACPJ,GAAG;AACX,qCAAqCK,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACrF,SAAS;AAAA;AACT;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,YAAY;IAAEH;EAAM,CAAC,GAAAE,KAAA;EAAA,OACtBC,YAAY,IACZR,GAAG;AACX;AACA,yCAAyCK,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACzF;AACA,SAAS;AAAA;AACT;AACA,MAAMG,KAAA;EAAA,IAAC;IAAEC,yBAAyB;IAAEL;EAA2B,CAAC,GAAAI,KAAA;EAAA,OACxD,CAACC,yBAAyB,IAAIL,KAAK,CAACM,cAAc,KAClDX,GAAG;AACX;AACA,iCAAiCU,yBAAyB,GAAG,KAAK,GAAG,KAAK;AAC1E,2BAA2BL,KAAK,CAAC,cAAc,CAAC;AAChD;AACA,SAAS;AAAA;AACT;AACA,MAAMO,KAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,KAAA;EAAA,OACbC,UAAU,IACVb,GAAG;AACX;AACA,SAAS;AAAA;AACT,CAAC","ignoreList":[]}
1
+ {"version":3,"file":"ListItem.styles.js","names":["motion","styled","css","StyledMotionListItem","div","_ref","$isOpen","theme","cardBackgroundOpacity","_ref2","$isClickable","_ref3","$isWrapped","$shouldShowSeparatorBelow","accordionLines","_ref4"],"sources":["../../../../../src/components/list/list-item/ListItem.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemProps = WithTheme<{\n $isClickable: boolean;\n $isOpen: boolean;\n $isWrapped: boolean;\n $shouldShowSeparatorBelow: boolean;\n}>;\n\nexport const StyledMotionListItem = styled(motion.div)<StyledListItemProps>`\n ${({ $isOpen, theme }) =>\n $isOpen &&\n css`\n background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n `}\n\n overflow: hidden;\n transition: background-color 0.3s ease;\n\n ${({ $isClickable, theme }) =>\n $isClickable &&\n css`\n &&:hover {\n background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n }\n `}\n \n ${({ $isWrapped, $shouldShowSeparatorBelow, theme }: StyledListItemProps) =>\n ($shouldShowSeparatorBelow || theme.accordionLines) && $isWrapped\n ? css`\n &&:not(:last-child) {\n border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid\n rgba(${theme['headline-rgb']}, 0.5);\n }\n `\n : css`\n border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid\n rgba(${theme['headline-rgb']}, 0.5);\n `}}\n\n ${({ $isWrapped }) =>\n $isWrapped &&\n css`\n padding-left: 26px;\n `}\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAU/C,OAAO,MAAMC,oBAAoB,GAAGF,MAAM,CAACD,MAAM,CAACI,GAAG,CAAsB;AAC3E,MAAMC,IAAA;EAAA,IAAC;IAAEC,OAAO;IAAEC;EAAM,CAAC,GAAAF,IAAA;EAAA,OACjBC,OAAO,IACPJ,GAAG;AACX,qCAAqCK,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACrF,SAAS;AAAA;AACT;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,YAAY;IAAEH;EAAM,CAAC,GAAAE,KAAA;EAAA,OACtBC,YAAY,IACZR,GAAG;AACX;AACA,yCAAyCK,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACzF;AACA,SAAS;AAAA;AACT;AACA,MAAMG,KAAA;EAAA,IAAC;IAAEC,UAAU;IAAEC,yBAAyB;IAAEN;EAA2B,CAAC,GAAAI,KAAA;EAAA,OACpE,CAACE,yBAAyB,IAAIN,KAAK,CAACO,cAAc,KAAKF,UAAU,GAC3DV,GAAG;AACjB;AACA,uCAAuCW,yBAAyB,GAAG,KAAK,GAAG,KAAK;AAChF,iCAAiCN,KAAK,CAAC,cAAc,CAAC;AACtD;AACA,eAAe,GACDL,GAAG;AACjB,mCAAmCW,yBAAyB,GAAG,KAAK,GAAG,KAAK;AAC5E,6BAA6BN,KAAK,CAAC,cAAc,CAAC;AAClD,eAAe;AAAA;AACf;AACA,MAAMQ,KAAA;EAAA,IAAC;IAAEH;EAAW,CAAC,GAAAG,KAAA;EAAA,OACbH,UAAU,IACVV,GAAG;AACX;AACA,SAAS;AAAA;AACT,CAAC","ignoreList":[]}
@@ -17,6 +17,7 @@ const ListItemHead = _ref => {
17
17
  onClick,
18
18
  onLongPress,
19
19
  rightElements,
20
+ shouldHideIndicator,
20
21
  subtitle,
21
22
  shouldShowRoundImage,
22
23
  title,
@@ -101,7 +102,7 @@ const ListItemHead = _ref => {
101
102
  onMouseLeave: handleMouseLeave,
102
103
  onTouchStart: typeof onLongPress === 'function' ? handleTouchStart : undefined,
103
104
  onTouchEnd: typeof onLongPress === 'function' ? handleTouchEnd : undefined
104
- }, /*#__PURE__*/React.createElement(StyledListItemHeadLeftWrapper, null, isAnyItemExpandable && /*#__PURE__*/React.createElement(StyledMotionListItemHeadIndicator, {
105
+ }, /*#__PURE__*/React.createElement(StyledListItemHeadLeftWrapper, null, isAnyItemExpandable && !shouldHideIndicator && /*#__PURE__*/React.createElement(StyledMotionListItemHeadIndicator, {
105
106
  animate: {
106
107
  rotate: isOpen ? 90 : 0
107
108
  },
@@ -1 +1 @@
1
- {"version":3,"file":"ListItemHead.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","useElementSize","Icon","ListItemIcon","ListItemImage","ListItemRightElements","StyledListItemHead","StyledListItemHeadContent","StyledListItemHeadLeftWrapper","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleText","StyledListItemHeadSubtitleTextPseudo","StyledListItemHeadTitle","StyledListItemHeadTitleContent","StyledListItemHeadTitleElement","StyledListItemHeadTitleText","StyledListItemHeadTitleTextPseudo","StyledMotionListItemHeadHoverItem","StyledMotionListItemHeadIndicator","ListItemHead","_ref","hoverItem","icons","images","isAnyItemExpandable","isExpandable","isOpen","leftElements","onClick","onLongPress","rightElements","subtitle","shouldShowRoundImage","title","titleElement","shouldShowHoverItem","setShouldShowHoverItem","headHeight","setHeadHeight","closed","open","isFirstRender","setIsFirstRender","longPressTimeoutRef","pseudoTitleOpenRef","pseudoTitleClosedRef","pseudoSubtitleOpenRef","pseudoSubtitleClosedRef","closedTitle","openedTitle","closedSubtitle","openedSubtitle","shouldShowSubtitleRow","height","handleMouseEnter","handleMouseLeave","marginTop","handleTouchStart","event","current","window","setTimeout","handleTouchEnd","clearTimeout","iconOrImageElement","createElement","undefined","animate","initial","transition","duration","type","className","$isClickable","$isAnyItemExpandable","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","rotate","$isIconOrImageGiven","$marginTop","$isOpen","ref","marginLeft","opacity","width","displayName"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.tsx"],"sourcesContent":["import React, {\n FC,\n MouseEventHandler,\n ReactNode,\n TouchEventHandler,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useElementSize } from '../../../../hooks/useElementSize';\nimport type { IListItemRightElements } from '../../../../types/list';\nimport Icon from '../../../icon/Icon';\nimport ListItemIcon from './list-item-icon/ListItemIcon';\nimport ListItemImage from './list-item-image/ListItemImage';\nimport ListItemRightElements from './list-item-right-elements/ListItemRightElements';\nimport {\n StyledListItemHead,\n StyledListItemHeadContent,\n StyledListItemHeadLeftWrapper,\n StyledListItemHeadSubtitle,\n StyledListItemHeadSubtitleText,\n StyledListItemHeadSubtitleTextPseudo,\n StyledListItemHeadTitle,\n StyledListItemHeadTitleContent,\n StyledListItemHeadTitleElement,\n StyledListItemHeadTitleText,\n StyledListItemHeadTitleTextPseudo,\n StyledMotionListItemHeadHoverItem,\n StyledMotionListItemHeadIndicator,\n} from './ListItemHead.styles';\n\ninterface HeadHeight {\n closed: number;\n open: number;\n}\n\ntype ListItemHeadProps = {\n hoverItem?: ReactNode;\n icons?: string[];\n images?: string[];\n isAnyItemExpandable: boolean;\n isExpandable: boolean;\n isOpen: boolean;\n leftElements?: ReactNode;\n onClick?: MouseEventHandler<HTMLDivElement>;\n onLongPress?: TouchEventHandler<HTMLDivElement>;\n rightElements?: IListItemRightElements;\n subtitle?: ReactNode;\n shouldShowRoundImage?: boolean;\n title: ReactNode;\n titleElement?: ReactNode;\n};\n\nconst ListItemHead: FC<ListItemHeadProps> = ({\n hoverItem,\n icons,\n images,\n isAnyItemExpandable,\n isExpandable,\n isOpen,\n leftElements,\n onClick,\n onLongPress,\n rightElements,\n subtitle,\n shouldShowRoundImage,\n title,\n titleElement,\n}) => {\n const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);\n const [headHeight, setHeadHeight] = useState<HeadHeight>({\n closed: 40,\n open: 40,\n });\n const [isFirstRender, setIsFirstRender] = useState(false);\n\n const longPressTimeoutRef = useRef<number>();\n const pseudoTitleOpenRef = useRef<HTMLDivElement>(null);\n const pseudoTitleClosedRef = useRef<HTMLDivElement>(null);\n const pseudoSubtitleOpenRef = useRef<HTMLDivElement>(null);\n const pseudoSubtitleClosedRef = useRef<HTMLDivElement>(null);\n\n const closedTitle = useElementSize(pseudoTitleClosedRef);\n const openedTitle = useElementSize(pseudoTitleOpenRef);\n const closedSubtitle = useElementSize(pseudoSubtitleClosedRef);\n const openedSubtitle = useElementSize(pseudoSubtitleOpenRef);\n\n const shouldShowSubtitleRow = typeof subtitle === 'string';\n\n useEffect(() => {\n if (closedTitle && openedTitle) {\n setHeadHeight({\n closed:\n shouldShowSubtitleRow && closedSubtitle\n ? closedSubtitle.height + 4 + closedTitle.height + 24\n : closedTitle.height + 24,\n open:\n shouldShowSubtitleRow && openedSubtitle\n ? openedSubtitle.height + 4 + openedTitle.height + 24\n : openedTitle.height + 24,\n });\n }\n }, [closedSubtitle, closedTitle, openedSubtitle, openedTitle, shouldShowSubtitleRow]);\n\n // This is used to trigger a rerender, so the head height can be calculated\n useEffect(() => {\n setIsFirstRender(true);\n }, []);\n\n const handleMouseEnter = useCallback(() => setShouldShowHoverItem(true), []);\n\n const handleMouseLeave = useCallback(() => setShouldShowHoverItem(false), []);\n\n const marginTop = useMemo(() => {\n const height = headHeight[isOpen ? 'open' : 'closed'];\n\n if (height < 64) {\n return (64 - height) / 2;\n }\n\n return 0;\n }, [headHeight, isOpen]);\n\n const handleTouchStart = useCallback<TouchEventHandler<HTMLDivElement>>(\n (event) => {\n longPressTimeoutRef.current = window.setTimeout(() => {\n if (typeof onLongPress === 'function') {\n onLongPress(event);\n }\n }, 400);\n },\n [onLongPress],\n );\n\n const handleTouchEnd = useCallback(() => {\n clearTimeout(longPressTimeoutRef.current);\n }, []);\n\n const iconOrImageElement = useMemo(() => {\n if (icons) {\n return <ListItemIcon icons={icons} />;\n }\n\n if (images) {\n return <ListItemImage images={images} shouldShowRoundImage={!!shouldShowRoundImage} />;\n }\n\n return undefined;\n }, [icons, images, shouldShowRoundImage]);\n\n return (\n <StyledListItemHead\n animate={{ height: isOpen ? headHeight.open : headHeight.closed }}\n initial={false}\n transition={{ duration: 0.2, type: 'tween' }}\n className=\"beta-chayns-list-item-head\"\n $isClickable={typeof onClick === 'function' || isExpandable}\n $isAnyItemExpandable={isAnyItemExpandable}\n onClick={onClick}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onTouchStart={typeof onLongPress === 'function' ? handleTouchStart : undefined}\n onTouchEnd={typeof onLongPress === 'function' ? handleTouchEnd : undefined}\n >\n <StyledListItemHeadLeftWrapper>\n {isAnyItemExpandable && (\n <StyledMotionListItemHeadIndicator\n animate={{ rotate: isOpen ? 90 : 0 }}\n initial={false}\n transition={{ type: 'tween' }}\n >\n {isExpandable && <Icon icons={['fa fa-chevron-right']} />}\n </StyledMotionListItemHeadIndicator>\n )}\n {leftElements}\n {iconOrImageElement}\n </StyledListItemHeadLeftWrapper>\n <StyledListItemHeadContent\n $isIconOrImageGiven={iconOrImageElement !== undefined}\n $marginTop={marginTop}\n $isOpen={isOpen}\n >\n <StyledListItemHeadTitle>\n <StyledListItemHeadTitleContent>\n <StyledListItemHeadTitleTextPseudo ref={pseudoTitleOpenRef} $isOpen>\n {title}\n </StyledListItemHeadTitleTextPseudo>\n <StyledListItemHeadTitleTextPseudo\n ref={pseudoTitleClosedRef}\n $isOpen={false}\n >\n {title}\n </StyledListItemHeadTitleTextPseudo>\n <StyledListItemHeadTitleText $isOpen={isOpen}>\n {title}\n </StyledListItemHeadTitleText>\n <StyledListItemHeadTitleElement>\n {titleElement}\n </StyledListItemHeadTitleElement>\n </StyledListItemHeadTitleContent>\n </StyledListItemHeadTitle>\n {shouldShowSubtitleRow && (\n <StyledListItemHeadSubtitle>\n <StyledListItemHeadSubtitleTextPseudo ref={pseudoSubtitleOpenRef} $isOpen>\n {subtitle}\n </StyledListItemHeadSubtitleTextPseudo>\n <StyledListItemHeadSubtitleTextPseudo\n ref={pseudoSubtitleClosedRef}\n $isOpen={false}\n >\n {subtitle}\n </StyledListItemHeadSubtitleTextPseudo>\n <StyledListItemHeadSubtitleText $isOpen={isOpen}>\n {subtitle}\n </StyledListItemHeadSubtitleText>\n </StyledListItemHeadSubtitle>\n )}\n </StyledListItemHeadContent>\n {rightElements && <ListItemRightElements rightElements={rightElements} />}\n {hoverItem && (\n <StyledMotionListItemHeadHoverItem\n animate={{\n marginLeft: shouldShowHoverItem ? 8 : 0,\n opacity: shouldShowHoverItem ? 1 : 0,\n width: shouldShowHoverItem ? 'auto' : 0,\n }}\n initial={false}\n transition={{ duration: 0.15, type: 'tween' }}\n >\n {hoverItem}\n </StyledMotionListItemHeadHoverItem>\n )}\n </StyledListItemHead>\n );\n};\n\nListItemHead.displayName = 'ListItemHead';\n\nexport default ListItemHead;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"ListItemHead.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","useElementSize","Icon","ListItemIcon","ListItemImage","ListItemRightElements","StyledListItemHead","StyledListItemHeadContent","StyledListItemHeadLeftWrapper","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleText","StyledListItemHeadSubtitleTextPseudo","StyledListItemHeadTitle","StyledListItemHeadTitleContent","StyledListItemHeadTitleElement","StyledListItemHeadTitleText","StyledListItemHeadTitleTextPseudo","StyledMotionListItemHeadHoverItem","StyledMotionListItemHeadIndicator","ListItemHead","_ref","hoverItem","icons","images","isAnyItemExpandable","isExpandable","isOpen","leftElements","onClick","onLongPress","rightElements","shouldHideIndicator","subtitle","shouldShowRoundImage","title","titleElement","shouldShowHoverItem","setShouldShowHoverItem","headHeight","setHeadHeight","closed","open","isFirstRender","setIsFirstRender","longPressTimeoutRef","pseudoTitleOpenRef","pseudoTitleClosedRef","pseudoSubtitleOpenRef","pseudoSubtitleClosedRef","closedTitle","openedTitle","closedSubtitle","openedSubtitle","shouldShowSubtitleRow","height","handleMouseEnter","handleMouseLeave","marginTop","handleTouchStart","event","current","window","setTimeout","handleTouchEnd","clearTimeout","iconOrImageElement","createElement","undefined","animate","initial","transition","duration","type","className","$isClickable","$isAnyItemExpandable","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","rotate","$isIconOrImageGiven","$marginTop","$isOpen","ref","marginLeft","opacity","width","displayName"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.tsx"],"sourcesContent":["import React, {\n FC,\n MouseEventHandler,\n ReactNode,\n TouchEventHandler,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useElementSize } from '../../../../hooks/useElementSize';\nimport type { IListItemRightElements } from '../../../../types/list';\nimport Icon from '../../../icon/Icon';\nimport ListItemIcon from './list-item-icon/ListItemIcon';\nimport ListItemImage from './list-item-image/ListItemImage';\nimport ListItemRightElements from './list-item-right-elements/ListItemRightElements';\nimport {\n StyledListItemHead,\n StyledListItemHeadContent,\n StyledListItemHeadLeftWrapper,\n StyledListItemHeadSubtitle,\n StyledListItemHeadSubtitleText,\n StyledListItemHeadSubtitleTextPseudo,\n StyledListItemHeadTitle,\n StyledListItemHeadTitleContent,\n StyledListItemHeadTitleElement,\n StyledListItemHeadTitleText,\n StyledListItemHeadTitleTextPseudo,\n StyledMotionListItemHeadHoverItem,\n StyledMotionListItemHeadIndicator,\n} from './ListItemHead.styles';\n\ninterface HeadHeight {\n closed: number;\n open: number;\n}\n\ntype ListItemHeadProps = {\n hoverItem?: ReactNode;\n icons?: string[];\n images?: string[];\n isAnyItemExpandable: boolean;\n isExpandable: boolean;\n isOpen: boolean;\n leftElements?: ReactNode;\n onClick?: MouseEventHandler<HTMLDivElement>;\n onLongPress?: TouchEventHandler<HTMLDivElement>;\n rightElements?: IListItemRightElements;\n shouldHideIndicator?: boolean;\n subtitle?: ReactNode;\n shouldShowRoundImage?: boolean;\n title: ReactNode;\n titleElement?: ReactNode;\n};\n\nconst ListItemHead: FC<ListItemHeadProps> = ({\n hoverItem,\n icons,\n images,\n isAnyItemExpandable,\n isExpandable,\n isOpen,\n leftElements,\n onClick,\n onLongPress,\n rightElements,\n shouldHideIndicator,\n subtitle,\n shouldShowRoundImage,\n title,\n titleElement,\n}) => {\n const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);\n const [headHeight, setHeadHeight] = useState<HeadHeight>({\n closed: 40,\n open: 40,\n });\n const [isFirstRender, setIsFirstRender] = useState(false);\n\n const longPressTimeoutRef = useRef<number>();\n const pseudoTitleOpenRef = useRef<HTMLDivElement>(null);\n const pseudoTitleClosedRef = useRef<HTMLDivElement>(null);\n const pseudoSubtitleOpenRef = useRef<HTMLDivElement>(null);\n const pseudoSubtitleClosedRef = useRef<HTMLDivElement>(null);\n\n const closedTitle = useElementSize(pseudoTitleClosedRef);\n const openedTitle = useElementSize(pseudoTitleOpenRef);\n const closedSubtitle = useElementSize(pseudoSubtitleClosedRef);\n const openedSubtitle = useElementSize(pseudoSubtitleOpenRef);\n\n const shouldShowSubtitleRow = typeof subtitle === 'string';\n\n useEffect(() => {\n if (closedTitle && openedTitle) {\n setHeadHeight({\n closed:\n shouldShowSubtitleRow && closedSubtitle\n ? closedSubtitle.height + 4 + closedTitle.height + 24\n : closedTitle.height + 24,\n open:\n shouldShowSubtitleRow && openedSubtitle\n ? openedSubtitle.height + 4 + openedTitle.height + 24\n : openedTitle.height + 24,\n });\n }\n }, [closedSubtitle, closedTitle, openedSubtitle, openedTitle, shouldShowSubtitleRow]);\n\n // This is used to trigger a rerender, so the head height can be calculated\n useEffect(() => {\n setIsFirstRender(true);\n }, []);\n\n const handleMouseEnter = useCallback(() => setShouldShowHoverItem(true), []);\n\n const handleMouseLeave = useCallback(() => setShouldShowHoverItem(false), []);\n\n const marginTop = useMemo(() => {\n const height = headHeight[isOpen ? 'open' : 'closed'];\n\n if (height < 64) {\n return (64 - height) / 2;\n }\n\n return 0;\n }, [headHeight, isOpen]);\n\n const handleTouchStart = useCallback<TouchEventHandler<HTMLDivElement>>(\n (event) => {\n longPressTimeoutRef.current = window.setTimeout(() => {\n if (typeof onLongPress === 'function') {\n onLongPress(event);\n }\n }, 400);\n },\n [onLongPress],\n );\n\n const handleTouchEnd = useCallback(() => {\n clearTimeout(longPressTimeoutRef.current);\n }, []);\n\n const iconOrImageElement = useMemo(() => {\n if (icons) {\n return <ListItemIcon icons={icons} />;\n }\n\n if (images) {\n return <ListItemImage images={images} shouldShowRoundImage={!!shouldShowRoundImage} />;\n }\n\n return undefined;\n }, [icons, images, shouldShowRoundImage]);\n\n return (\n <StyledListItemHead\n animate={{ height: isOpen ? headHeight.open : headHeight.closed }}\n initial={false}\n transition={{ duration: 0.2, type: 'tween' }}\n className=\"beta-chayns-list-item-head\"\n $isClickable={typeof onClick === 'function' || isExpandable}\n $isAnyItemExpandable={isAnyItemExpandable}\n onClick={onClick}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onTouchStart={typeof onLongPress === 'function' ? handleTouchStart : undefined}\n onTouchEnd={typeof onLongPress === 'function' ? handleTouchEnd : undefined}\n >\n <StyledListItemHeadLeftWrapper>\n {isAnyItemExpandable && !shouldHideIndicator && (\n <StyledMotionListItemHeadIndicator\n animate={{ rotate: isOpen ? 90 : 0 }}\n initial={false}\n transition={{ type: 'tween' }}\n >\n {isExpandable && <Icon icons={['fa fa-chevron-right']} />}\n </StyledMotionListItemHeadIndicator>\n )}\n {leftElements}\n {iconOrImageElement}\n </StyledListItemHeadLeftWrapper>\n <StyledListItemHeadContent\n $isIconOrImageGiven={iconOrImageElement !== undefined}\n $marginTop={marginTop}\n $isOpen={isOpen}\n >\n <StyledListItemHeadTitle>\n <StyledListItemHeadTitleContent>\n <StyledListItemHeadTitleTextPseudo ref={pseudoTitleOpenRef} $isOpen>\n {title}\n </StyledListItemHeadTitleTextPseudo>\n <StyledListItemHeadTitleTextPseudo\n ref={pseudoTitleClosedRef}\n $isOpen={false}\n >\n {title}\n </StyledListItemHeadTitleTextPseudo>\n <StyledListItemHeadTitleText $isOpen={isOpen}>\n {title}\n </StyledListItemHeadTitleText>\n <StyledListItemHeadTitleElement>\n {titleElement}\n </StyledListItemHeadTitleElement>\n </StyledListItemHeadTitleContent>\n </StyledListItemHeadTitle>\n {shouldShowSubtitleRow && (\n <StyledListItemHeadSubtitle>\n <StyledListItemHeadSubtitleTextPseudo ref={pseudoSubtitleOpenRef} $isOpen>\n {subtitle}\n </StyledListItemHeadSubtitleTextPseudo>\n <StyledListItemHeadSubtitleTextPseudo\n ref={pseudoSubtitleClosedRef}\n $isOpen={false}\n >\n {subtitle}\n </StyledListItemHeadSubtitleTextPseudo>\n <StyledListItemHeadSubtitleText $isOpen={isOpen}>\n {subtitle}\n </StyledListItemHeadSubtitleText>\n </StyledListItemHeadSubtitle>\n )}\n </StyledListItemHeadContent>\n {rightElements && <ListItemRightElements rightElements={rightElements} />}\n {hoverItem && (\n <StyledMotionListItemHeadHoverItem\n animate={{\n marginLeft: shouldShowHoverItem ? 8 : 0,\n opacity: shouldShowHoverItem ? 1 : 0,\n width: shouldShowHoverItem ? 'auto' : 0,\n }}\n initial={false}\n transition={{ duration: 0.15, type: 'tween' }}\n >\n {hoverItem}\n </StyledMotionListItemHeadHoverItem>\n )}\n </StyledListItemHead>\n );\n};\n\nListItemHead.displayName = 'ListItemHead';\n\nexport default ListItemHead;\n"],"mappings":"AAAA,OAAOA,KAAK,IAKRC,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACL,OAAO;AACd,SAASC,cAAc,QAAQ,kCAAkC;AAEjE,OAAOC,IAAI,MAAM,oBAAoB;AACrC,OAAOC,YAAY,MAAM,+BAA+B;AACxD,OAAOC,aAAa,MAAM,iCAAiC;AAC3D,OAAOC,qBAAqB,MAAM,kDAAkD;AACpF,SACIC,kBAAkB,EAClBC,yBAAyB,EACzBC,6BAA6B,EAC7BC,0BAA0B,EAC1BC,8BAA8B,EAC9BC,oCAAoC,EACpCC,uBAAuB,EACvBC,8BAA8B,EAC9BC,8BAA8B,EAC9BC,2BAA2B,EAC3BC,iCAAiC,EACjCC,iCAAiC,EACjCC,iCAAiC,QAC9B,uBAAuB;AAyB9B,MAAMC,YAAmC,GAAGC,IAAA,IAgBtC;EAAA,IAhBuC;IACzCC,SAAS;IACTC,KAAK;IACLC,MAAM;IACNC,mBAAmB;IACnBC,YAAY;IACZC,MAAM;IACNC,YAAY;IACZC,OAAO;IACPC,WAAW;IACXC,aAAa;IACbC,mBAAmB;IACnBC,QAAQ;IACRC,oBAAoB;IACpBC,KAAK;IACLC;EACJ,CAAC,GAAAf,IAAA;EACG,MAAM,CAACgB,mBAAmB,EAAEC,sBAAsB,CAAC,GAAGrC,QAAQ,CAAC,KAAK,CAAC;EACrE,MAAM,CAACsC,UAAU,EAAEC,aAAa,CAAC,GAAGvC,QAAQ,CAAa;IACrDwC,MAAM,EAAE,EAAE;IACVC,IAAI,EAAE;EACV,CAAC,CAAC;EACF,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAG3C,QAAQ,CAAC,KAAK,CAAC;EAEzD,MAAM4C,mBAAmB,GAAG7C,MAAM,CAAS,CAAC;EAC5C,MAAM8C,kBAAkB,GAAG9C,MAAM,CAAiB,IAAI,CAAC;EACvD,MAAM+C,oBAAoB,GAAG/C,MAAM,CAAiB,IAAI,CAAC;EACzD,MAAMgD,qBAAqB,GAAGhD,MAAM,CAAiB,IAAI,CAAC;EAC1D,MAAMiD,uBAAuB,GAAGjD,MAAM,CAAiB,IAAI,CAAC;EAE5D,MAAMkD,WAAW,GAAGhD,cAAc,CAAC6C,oBAAoB,CAAC;EACxD,MAAMI,WAAW,GAAGjD,cAAc,CAAC4C,kBAAkB,CAAC;EACtD,MAAMM,cAAc,GAAGlD,cAAc,CAAC+C,uBAAuB,CAAC;EAC9D,MAAMI,cAAc,GAAGnD,cAAc,CAAC8C,qBAAqB,CAAC;EAE5D,MAAMM,qBAAqB,GAAG,OAAOrB,QAAQ,KAAK,QAAQ;EAE1DnC,SAAS,CAAC,MAAM;IACZ,IAAIoD,WAAW,IAAIC,WAAW,EAAE;MAC5BX,aAAa,CAAC;QACVC,MAAM,EACFa,qBAAqB,IAAIF,cAAc,GACjCA,cAAc,CAACG,MAAM,GAAG,CAAC,GAAGL,WAAW,CAACK,MAAM,GAAG,EAAE,GACnDL,WAAW,CAACK,MAAM,GAAG,EAAE;QACjCb,IAAI,EACAY,qBAAqB,IAAID,cAAc,GACjCA,cAAc,CAACE,MAAM,GAAG,CAAC,GAAGJ,WAAW,CAACI,MAAM,GAAG,EAAE,GACnDJ,WAAW,CAACI,MAAM,GAAG;MACnC,CAAC,CAAC;IACN;EACJ,CAAC,EAAE,CAACH,cAAc,EAAEF,WAAW,EAAEG,cAAc,EAAEF,WAAW,EAAEG,qBAAqB,CAAC,CAAC;;EAErF;EACAxD,SAAS,CAAC,MAAM;IACZ8C,gBAAgB,CAAC,IAAI,CAAC;EAC1B,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMY,gBAAgB,GAAG3D,WAAW,CAAC,MAAMyC,sBAAsB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;EAE5E,MAAMmB,gBAAgB,GAAG5D,WAAW,CAAC,MAAMyC,sBAAsB,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC;EAE7E,MAAMoB,SAAS,GAAG3D,OAAO,CAAC,MAAM;IAC5B,MAAMwD,MAAM,GAAGhB,UAAU,CAACZ,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAC;IAErD,IAAI4B,MAAM,GAAG,EAAE,EAAE;MACb,OAAO,CAAC,EAAE,GAAGA,MAAM,IAAI,CAAC;IAC5B;IAEA,OAAO,CAAC;EACZ,CAAC,EAAE,CAAChB,UAAU,EAAEZ,MAAM,CAAC,CAAC;EAExB,MAAMgC,gBAAgB,GAAG9D,WAAW,CAC/B+D,KAAK,IAAK;IACPf,mBAAmB,CAACgB,OAAO,GAAGC,MAAM,CAACC,UAAU,CAAC,MAAM;MAClD,IAAI,OAAOjC,WAAW,KAAK,UAAU,EAAE;QACnCA,WAAW,CAAC8B,KAAK,CAAC;MACtB;IACJ,CAAC,EAAE,GAAG,CAAC;EACX,CAAC,EACD,CAAC9B,WAAW,CAChB,CAAC;EAED,MAAMkC,cAAc,GAAGnE,WAAW,CAAC,MAAM;IACrCoE,YAAY,CAACpB,mBAAmB,CAACgB,OAAO,CAAC;EAC7C,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMK,kBAAkB,GAAGnE,OAAO,CAAC,MAAM;IACrC,IAAIwB,KAAK,EAAE;MACP,oBAAO3B,KAAA,CAAAuE,aAAA,CAAC/D,YAAY;QAACmB,KAAK,EAAEA;MAAM,CAAE,CAAC;IACzC;IAEA,IAAIC,MAAM,EAAE;MACR,oBAAO5B,KAAA,CAAAuE,aAAA,CAAC9D,aAAa;QAACmB,MAAM,EAAEA,MAAO;QAACU,oBAAoB,EAAE,CAAC,CAACA;MAAqB,CAAE,CAAC;IAC1F;IAEA,OAAOkC,SAAS;EACpB,CAAC,EAAE,CAAC7C,KAAK,EAAEC,MAAM,EAAEU,oBAAoB,CAAC,CAAC;EAEzC,oBACItC,KAAA,CAAAuE,aAAA,CAAC5D,kBAAkB;IACf8D,OAAO,EAAE;MAAEd,MAAM,EAAE5B,MAAM,GAAGY,UAAU,CAACG,IAAI,GAAGH,UAAU,CAACE;IAAO,CAAE;IAClE6B,OAAO,EAAE,KAAM;IACfC,UAAU,EAAE;MAAEC,QAAQ,EAAE,GAAG;MAAEC,IAAI,EAAE;IAAQ,CAAE;IAC7CC,SAAS,EAAC,4BAA4B;IACtCC,YAAY,EAAE,OAAO9C,OAAO,KAAK,UAAU,IAAIH,YAAa;IAC5DkD,oBAAoB,EAAEnD,mBAAoB;IAC1CI,OAAO,EAAEA,OAAQ;IACjBgD,YAAY,EAAErB,gBAAiB;IAC/BsB,YAAY,EAAErB,gBAAiB;IAC/BsB,YAAY,EAAE,OAAOjD,WAAW,KAAK,UAAU,GAAG6B,gBAAgB,GAAGS,SAAU;IAC/EY,UAAU,EAAE,OAAOlD,WAAW,KAAK,UAAU,GAAGkC,cAAc,GAAGI;EAAU,gBAE3ExE,KAAA,CAAAuE,aAAA,CAAC1D,6BAA6B,QACzBgB,mBAAmB,IAAI,CAACO,mBAAmB,iBACxCpC,KAAA,CAAAuE,aAAA,CAAChD,iCAAiC;IAC9BkD,OAAO,EAAE;MAAEY,MAAM,EAAEtD,MAAM,GAAG,EAAE,GAAG;IAAE,CAAE;IACrC2C,OAAO,EAAE,KAAM;IACfC,UAAU,EAAE;MAAEE,IAAI,EAAE;IAAQ;EAAE,GAE7B/C,YAAY,iBAAI9B,KAAA,CAAAuE,aAAA,CAAChE,IAAI;IAACoB,KAAK,EAAE,CAAC,qBAAqB;EAAE,CAAE,CACzB,CACtC,EACAK,YAAY,EACZsC,kBAC0B,CAAC,eAChCtE,KAAA,CAAAuE,aAAA,CAAC3D,yBAAyB;IACtB0E,mBAAmB,EAAEhB,kBAAkB,KAAKE,SAAU;IACtDe,UAAU,EAAEzB,SAAU;IACtB0B,OAAO,EAAEzD;EAAO,gBAEhB/B,KAAA,CAAAuE,aAAA,CAACtD,uBAAuB,qBACpBjB,KAAA,CAAAuE,aAAA,CAACrD,8BAA8B,qBAC3BlB,KAAA,CAAAuE,aAAA,CAAClD,iCAAiC;IAACoE,GAAG,EAAEvC,kBAAmB;IAACsC,OAAO;EAAA,GAC9DjD,KAC8B,CAAC,eACpCvC,KAAA,CAAAuE,aAAA,CAAClD,iCAAiC;IAC9BoE,GAAG,EAAEtC,oBAAqB;IAC1BqC,OAAO,EAAE;EAAM,GAEdjD,KAC8B,CAAC,eACpCvC,KAAA,CAAAuE,aAAA,CAACnD,2BAA2B;IAACoE,OAAO,EAAEzD;EAAO,GACxCQ,KACwB,CAAC,eAC9BvC,KAAA,CAAAuE,aAAA,CAACpD,8BAA8B,QAC1BqB,YAC2B,CACJ,CACX,CAAC,EACzBkB,qBAAqB,iBAClB1D,KAAA,CAAAuE,aAAA,CAACzD,0BAA0B,qBACvBd,KAAA,CAAAuE,aAAA,CAACvD,oCAAoC;IAACyE,GAAG,EAAErC,qBAAsB;IAACoC,OAAO;EAAA,GACpEnD,QACiC,CAAC,eACvCrC,KAAA,CAAAuE,aAAA,CAACvD,oCAAoC;IACjCyE,GAAG,EAAEpC,uBAAwB;IAC7BmC,OAAO,EAAE;EAAM,GAEdnD,QACiC,CAAC,eACvCrC,KAAA,CAAAuE,aAAA,CAACxD,8BAA8B;IAACyE,OAAO,EAAEzD;EAAO,GAC3CM,QAC2B,CACR,CAET,CAAC,EAC3BF,aAAa,iBAAInC,KAAA,CAAAuE,aAAA,CAAC7D,qBAAqB;IAACyB,aAAa,EAAEA;EAAc,CAAE,CAAC,EACxET,SAAS,iBACN1B,KAAA,CAAAuE,aAAA,CAACjD,iCAAiC;IAC9BmD,OAAO,EAAE;MACLiB,UAAU,EAAEjD,mBAAmB,GAAG,CAAC,GAAG,CAAC;MACvCkD,OAAO,EAAElD,mBAAmB,GAAG,CAAC,GAAG,CAAC;MACpCmD,KAAK,EAAEnD,mBAAmB,GAAG,MAAM,GAAG;IAC1C,CAAE;IACFiC,OAAO,EAAE,KAAM;IACfC,UAAU,EAAE;MAAEC,QAAQ,EAAE,IAAI;MAAEC,IAAI,EAAE;IAAQ;EAAE,GAE7CnD,SAC8B,CAEvB,CAAC;AAE7B,CAAC;AAEDF,YAAY,CAACqE,WAAW,GAAG,cAAc;AAEzC,eAAerE,YAAY","ignoreList":[]}
@@ -15,6 +15,7 @@ const Popup = /*#__PURE__*/forwardRef((_ref, ref) => {
15
15
  onHide,
16
16
  children,
17
17
  shouldShowOnHover = false,
18
+ shouldUseChildrenWidth = true,
18
19
  yOffset = 0
19
20
  } = _ref;
20
21
  const [coordinates, setCoordinates] = useState({
@@ -188,7 +189,8 @@ const Popup = /*#__PURE__*/forwardRef((_ref, ref) => {
188
189
  ref: popupRef,
189
190
  onClick: handleChildrenClick,
190
191
  onMouseLeave: handleMouseLeave,
191
- onMouseEnter: handleMouseEnter
192
+ onMouseEnter: handleMouseEnter,
193
+ $shouldUseChildrenWidth: shouldUseChildrenWidth
192
194
  }, children), portal);
193
195
  });
194
196
  Popup.displayName = 'Popup';
@@ -1 +1 @@
1
- {"version":3,"file":"Popup.js","names":["getWindowMetrics","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","createPortal","useUuid","PopupAlignment","AreaContextProvider","PopupContentWrapper","StyledPopup","StyledPopupPseudo","Popup","_ref","ref","content","onShow","container","document","querySelector","body","onHide","children","shouldShowOnHover","yOffset","coordinates","setCoordinates","x","y","alignment","setAlignment","TopLeft","offset","setOffset","isOpen","setIsOpen","portal","setPortal","menuHeight","setMenuHeight","pseudoSize","setPseudoSize","timeout","uuid","popupContentRef","popupPseudoContentRef","popupRef","current","height","width","getBoundingClientRect","handleShow","pseudoHeight","pseudoWidth","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","isRight","BottomRight","BottomLeft","newOffset","window","innerWidth","right","newX","TopRight","handleChildrenClick","handleHide","handleMouseEnter","clearTimeout","handleMouseLeave","setTimeout","handleDocumentClick","event","contains","target","preventDefault","stopPropagation","hide","show","then","result","topBarHeight","addEventListener","removeEventListener","createElement","initial","key","onMouseLeave","onMouseEnter","shouldChangeColor","Fragment","$menuHeight","onClick","displayName"],"sources":["../../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { getWindowMetrics } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n forwardRef,\n ReactNode,\n ReactPortal,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { PopupAlignment, PopupCoordinates, PopupRef } from '../../types/popup';\nimport AreaContextProvider from '../area-provider/AreaContextProvider';\nimport PopupContentWrapper from './popup-content-wrapper/PopupContentWrapper';\nimport { StyledPopup, StyledPopupPseudo } from './Popup.styles';\n\nexport type PopupProps = {\n /**\n * The element over which the content of the `ContextMenu` should be displayed.\n */\n children?: ReactNode;\n /**\n * The element where the content of the `Popup` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * The content that should be displayed inside the popup.\n */\n content: ReactNode;\n /**\n * Function to be executed when the content of the Context menu has been hidden.\n */\n onHide?: VoidFunction;\n /**\n * Function to be executed when the content of the Context menu has been shown.\n */\n onShow?: VoidFunction;\n /**\n * Whether the popup should be opened on hover. If not, the popup will be opened on click.\n */\n shouldShowOnHover?: boolean;\n /**\n * The Y offset of the popup to the children.\n */\n yOffset?: number;\n};\n\nconst Popup = forwardRef<PopupRef, PopupProps>(\n (\n {\n content,\n onShow,\n container = document.querySelector('.tapp') || document.body,\n onHide,\n children,\n shouldShowOnHover = false,\n yOffset = 0,\n },\n ref,\n ) => {\n const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n x: 0,\n y: 0,\n });\n\n const [alignment, setAlignment] = useState<PopupAlignment>(PopupAlignment.TopLeft);\n const [offset, setOffset] = useState<number>(0);\n const [isOpen, setIsOpen] = useState(false);\n const [portal, setPortal] = useState<ReactPortal>();\n const [menuHeight, setMenuHeight] = useState(0);\n\n const [pseudoSize, setPseudoSize] = useState<{ height: number; width: number }>();\n\n const timeout = useRef<number>();\n\n const uuid = useUuid();\n\n // ToDo: Replace with hook if new chayns api is ready\n\n const popupContentRef = useRef<HTMLDivElement>(null);\n const popupPseudoContentRef = useRef<HTMLDivElement>(null);\n const popupRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (popupPseudoContentRef.current) {\n const { height, width } = popupPseudoContentRef.current.getBoundingClientRect();\n\n setPseudoSize({ height, width });\n }\n }, []);\n\n const handleShow = useCallback(() => {\n if (popupRef.current && pseudoSize) {\n const { height: pseudoHeight, width: pseudoWidth } = pseudoSize;\n\n const {\n height: childrenHeight,\n left: childrenLeft,\n top: childrenTop,\n width: childrenWidth,\n } = popupRef.current.getBoundingClientRect();\n\n if (pseudoHeight > childrenTop - 25) {\n let isRight = false;\n\n if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n setAlignment(PopupAlignment.BottomRight);\n\n isRight = true;\n } else {\n setAlignment(PopupAlignment.BottomLeft);\n }\n\n const x = childrenLeft + childrenWidth / 2;\n const y = childrenTop + childrenHeight + yOffset;\n\n let newOffset;\n\n if (isRight) {\n newOffset =\n x + pseudoWidth >= window.innerWidth\n ? x + pseudoWidth - window.innerWidth\n : 0;\n } else {\n newOffset = 0;\n\n const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n newOffset =\n right + pseudoWidth >= window.innerWidth\n ? right + pseudoWidth - window.innerWidth\n : 0;\n }\n\n setOffset(newOffset);\n\n const newX = x - newOffset;\n\n setCoordinates({\n x: newX < 23 ? 23 : newX,\n y: y - yOffset,\n });\n } else {\n let isRight = false;\n\n if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n setAlignment(PopupAlignment.TopRight);\n\n isRight = true;\n } else {\n setAlignment(PopupAlignment.TopLeft);\n }\n\n const x = childrenLeft + childrenWidth / 2;\n const y = childrenTop - yOffset;\n\n let newOffset;\n\n if (isRight) {\n newOffset =\n x + pseudoWidth >= window.innerWidth\n ? x + pseudoWidth - window.innerWidth\n : 0;\n } else {\n newOffset = 0;\n\n const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n newOffset =\n right + pseudoWidth >= window.innerWidth\n ? right + pseudoWidth - window.innerWidth\n : 0;\n }\n\n setOffset(newOffset);\n\n const newX = x - newOffset;\n\n setCoordinates({\n x: newX < 23 ? 23 : newX,\n y: y - yOffset,\n });\n }\n\n setIsOpen(true);\n }\n }, [pseudoSize, yOffset]);\n\n const handleChildrenClick = () => {\n if (!shouldShowOnHover) {\n handleShow();\n }\n };\n\n const handleHide = useCallback(() => {\n setIsOpen(false);\n }, []);\n\n const handleMouseEnter = useCallback(() => {\n if (shouldShowOnHover) {\n window.clearTimeout(timeout.current);\n handleShow();\n }\n }, [handleShow, shouldShowOnHover]);\n\n const handleMouseLeave = useCallback(() => {\n if (!shouldShowOnHover) {\n return;\n }\n\n timeout.current = window.setTimeout(() => {\n handleHide();\n }, 500);\n }, [handleHide, shouldShowOnHover]);\n\n const handleDocumentClick = useCallback<EventListener>(\n (event) => {\n if (\n !popupContentRef.current?.contains(event.target as Node) &&\n !shouldShowOnHover\n ) {\n event.preventDefault();\n event.stopPropagation();\n\n handleHide();\n }\n },\n [handleHide, shouldShowOnHover],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleHide,\n show: handleShow,\n }),\n [handleHide, handleShow],\n );\n\n useEffect(() => {\n void getWindowMetrics().then((result) => {\n if (result.topBarHeight) {\n setMenuHeight(result.topBarHeight);\n }\n });\n }, []);\n\n useEffect(() => {\n if (isOpen) {\n document.addEventListener('click', handleDocumentClick, true);\n window.addEventListener('blur', handleHide);\n\n if (typeof onShow === 'function') {\n onShow();\n }\n } else if (typeof onHide === 'function') {\n onHide();\n }\n\n return () => {\n document.removeEventListener('click', handleDocumentClick, true);\n window.removeEventListener('blur', handleHide);\n };\n }, [handleDocumentClick, handleHide, isOpen, onHide, onShow]);\n\n useEffect(() => {\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isOpen && (\n <PopupContentWrapper\n offset={offset}\n coordinates={coordinates}\n key={`tooltip_${uuid}`}\n alignment={alignment}\n ref={popupContentRef}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n >\n <AreaContextProvider shouldChangeColor={false}>\n {content}\n </AreaContextProvider>\n </PopupContentWrapper>\n )}\n </AnimatePresence>,\n container,\n ),\n );\n }, [\n alignment,\n container,\n content,\n coordinates,\n handleMouseEnter,\n handleMouseLeave,\n isOpen,\n offset,\n uuid,\n ]);\n\n return (\n <>\n {!pseudoSize && (\n <StyledPopupPseudo ref={popupPseudoContentRef} $menuHeight={menuHeight}>\n {content}\n </StyledPopupPseudo>\n )}\n <StyledPopup\n ref={popupRef}\n onClick={handleChildrenClick}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n >\n {children}\n </StyledPopup>\n {portal}\n </>\n );\n },\n);\n\nPopup.displayName = 'Popup';\n\nexport default Popup;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"Popup.js","names":["getWindowMetrics","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","createPortal","useUuid","PopupAlignment","AreaContextProvider","PopupContentWrapper","StyledPopup","StyledPopupPseudo","Popup","_ref","ref","content","onShow","container","document","querySelector","body","onHide","children","shouldShowOnHover","shouldUseChildrenWidth","yOffset","coordinates","setCoordinates","x","y","alignment","setAlignment","TopLeft","offset","setOffset","isOpen","setIsOpen","portal","setPortal","menuHeight","setMenuHeight","pseudoSize","setPseudoSize","timeout","uuid","popupContentRef","popupPseudoContentRef","popupRef","current","height","width","getBoundingClientRect","handleShow","pseudoHeight","pseudoWidth","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","isRight","BottomRight","BottomLeft","newOffset","window","innerWidth","right","newX","TopRight","handleChildrenClick","handleHide","handleMouseEnter","clearTimeout","handleMouseLeave","setTimeout","handleDocumentClick","event","contains","target","preventDefault","stopPropagation","hide","show","then","result","topBarHeight","addEventListener","removeEventListener","createElement","initial","key","onMouseLeave","onMouseEnter","shouldChangeColor","Fragment","$menuHeight","onClick","$shouldUseChildrenWidth","displayName"],"sources":["../../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { getWindowMetrics } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n forwardRef,\n ReactNode,\n ReactPortal,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { PopupAlignment, PopupCoordinates, PopupRef } from '../../types/popup';\nimport AreaContextProvider from '../area-provider/AreaContextProvider';\nimport PopupContentWrapper from './popup-content-wrapper/PopupContentWrapper';\nimport { StyledPopup, StyledPopupPseudo } from './Popup.styles';\n\nexport type PopupProps = {\n /**\n * The element over which the content of the `ContextMenu` should be displayed.\n */\n children?: ReactNode;\n /**\n * The element where the content of the `Popup` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * The content that should be displayed inside the popup.\n */\n content: ReactNode;\n /**\n * Function to be executed when the content of the Context menu has been hidden.\n */\n onHide?: VoidFunction;\n /**\n * Function to be executed when the content of the Context menu has been shown.\n */\n onShow?: VoidFunction;\n /**\n * Whether the popup should be opened on hover. If not, the popup will be opened on click.\n */\n shouldShowOnHover?: boolean;\n /**\n * Whether the width of the children should be used.\n */\n shouldUseChildrenWidth?: boolean;\n /**\n * The Y offset of the popup to the children.\n */\n yOffset?: number;\n};\n\nconst Popup = forwardRef<PopupRef, PopupProps>(\n (\n {\n content,\n onShow,\n container = document.querySelector('.tapp') || document.body,\n onHide,\n children,\n shouldShowOnHover = false,\n shouldUseChildrenWidth = true,\n yOffset = 0,\n },\n ref,\n ) => {\n const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n x: 0,\n y: 0,\n });\n\n const [alignment, setAlignment] = useState<PopupAlignment>(PopupAlignment.TopLeft);\n const [offset, setOffset] = useState<number>(0);\n const [isOpen, setIsOpen] = useState(false);\n const [portal, setPortal] = useState<ReactPortal>();\n const [menuHeight, setMenuHeight] = useState(0);\n\n const [pseudoSize, setPseudoSize] = useState<{ height: number; width: number }>();\n\n const timeout = useRef<number>();\n\n const uuid = useUuid();\n\n // ToDo: Replace with hook if new chayns api is ready\n\n const popupContentRef = useRef<HTMLDivElement>(null);\n const popupPseudoContentRef = useRef<HTMLDivElement>(null);\n const popupRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (popupPseudoContentRef.current) {\n const { height, width } = popupPseudoContentRef.current.getBoundingClientRect();\n\n setPseudoSize({ height, width });\n }\n }, []);\n\n const handleShow = useCallback(() => {\n if (popupRef.current && pseudoSize) {\n const { height: pseudoHeight, width: pseudoWidth } = pseudoSize;\n\n const {\n height: childrenHeight,\n left: childrenLeft,\n top: childrenTop,\n width: childrenWidth,\n } = popupRef.current.getBoundingClientRect();\n\n if (pseudoHeight > childrenTop - 25) {\n let isRight = false;\n\n if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n setAlignment(PopupAlignment.BottomRight);\n\n isRight = true;\n } else {\n setAlignment(PopupAlignment.BottomLeft);\n }\n\n const x = childrenLeft + childrenWidth / 2;\n const y = childrenTop + childrenHeight + yOffset;\n\n let newOffset;\n\n if (isRight) {\n newOffset =\n x + pseudoWidth >= window.innerWidth\n ? x + pseudoWidth - window.innerWidth\n : 0;\n } else {\n newOffset = 0;\n\n const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n newOffset =\n right + pseudoWidth >= window.innerWidth\n ? right + pseudoWidth - window.innerWidth\n : 0;\n }\n\n setOffset(newOffset);\n\n const newX = x - newOffset;\n\n setCoordinates({\n x: newX < 23 ? 23 : newX,\n y: y - yOffset,\n });\n } else {\n let isRight = false;\n\n if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n setAlignment(PopupAlignment.TopRight);\n\n isRight = true;\n } else {\n setAlignment(PopupAlignment.TopLeft);\n }\n\n const x = childrenLeft + childrenWidth / 2;\n const y = childrenTop - yOffset;\n\n let newOffset;\n\n if (isRight) {\n newOffset =\n x + pseudoWidth >= window.innerWidth\n ? x + pseudoWidth - window.innerWidth\n : 0;\n } else {\n newOffset = 0;\n\n const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n newOffset =\n right + pseudoWidth >= window.innerWidth\n ? right + pseudoWidth - window.innerWidth\n : 0;\n }\n\n setOffset(newOffset);\n\n const newX = x - newOffset;\n\n setCoordinates({\n x: newX < 23 ? 23 : newX,\n y: y - yOffset,\n });\n }\n\n setIsOpen(true);\n }\n }, [pseudoSize, yOffset]);\n\n const handleChildrenClick = () => {\n if (!shouldShowOnHover) {\n handleShow();\n }\n };\n\n const handleHide = useCallback(() => {\n setIsOpen(false);\n }, []);\n\n const handleMouseEnter = useCallback(() => {\n if (shouldShowOnHover) {\n window.clearTimeout(timeout.current);\n handleShow();\n }\n }, [handleShow, shouldShowOnHover]);\n\n const handleMouseLeave = useCallback(() => {\n if (!shouldShowOnHover) {\n return;\n }\n\n timeout.current = window.setTimeout(() => {\n handleHide();\n }, 500);\n }, [handleHide, shouldShowOnHover]);\n\n const handleDocumentClick = useCallback<EventListener>(\n (event) => {\n if (\n !popupContentRef.current?.contains(event.target as Node) &&\n !shouldShowOnHover\n ) {\n event.preventDefault();\n event.stopPropagation();\n\n handleHide();\n }\n },\n [handleHide, shouldShowOnHover],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleHide,\n show: handleShow,\n }),\n [handleHide, handleShow],\n );\n\n useEffect(() => {\n void getWindowMetrics().then((result) => {\n if (result.topBarHeight) {\n setMenuHeight(result.topBarHeight);\n }\n });\n }, []);\n\n useEffect(() => {\n if (isOpen) {\n document.addEventListener('click', handleDocumentClick, true);\n window.addEventListener('blur', handleHide);\n\n if (typeof onShow === 'function') {\n onShow();\n }\n } else if (typeof onHide === 'function') {\n onHide();\n }\n\n return () => {\n document.removeEventListener('click', handleDocumentClick, true);\n window.removeEventListener('blur', handleHide);\n };\n }, [handleDocumentClick, handleHide, isOpen, onHide, onShow]);\n\n useEffect(() => {\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isOpen && (\n <PopupContentWrapper\n offset={offset}\n coordinates={coordinates}\n key={`tooltip_${uuid}`}\n alignment={alignment}\n ref={popupContentRef}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n >\n <AreaContextProvider shouldChangeColor={false}>\n {content}\n </AreaContextProvider>\n </PopupContentWrapper>\n )}\n </AnimatePresence>,\n container,\n ),\n );\n }, [\n alignment,\n container,\n content,\n coordinates,\n handleMouseEnter,\n handleMouseLeave,\n isOpen,\n offset,\n uuid,\n ]);\n\n return (\n <>\n {!pseudoSize && (\n <StyledPopupPseudo ref={popupPseudoContentRef} $menuHeight={menuHeight}>\n {content}\n </StyledPopupPseudo>\n )}\n <StyledPopup\n ref={popupRef}\n onClick={handleChildrenClick}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n $shouldUseChildrenWidth={shouldUseChildrenWidth}\n >\n {children}\n </StyledPopup>\n {portal}\n </>\n );\n },\n);\n\nPopup.displayName = 'Popup';\n\nexport default Popup;\n"],"mappings":"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","ignoreList":[]}
@@ -1,16 +1,24 @@
1
- import styled from 'styled-components';
1
+ import styled, { css } from 'styled-components';
2
2
  export const StyledPopup = styled.span`
3
3
  cursor: pointer;
4
4
  position: relative;
5
- display: flex;
6
- width: fit-content;
7
- height: fit-content;
5
+
6
+ ${_ref => {
7
+ let {
8
+ $shouldUseChildrenWidth
9
+ } = _ref;
10
+ return $shouldUseChildrenWidth && css`
11
+ display: flex;
12
+ width: fit-content;
13
+ height: fit-content;
14
+ `;
15
+ }}
8
16
  `;
9
17
  export const StyledPopupPseudo = styled.div`
10
- top: ${_ref => {
18
+ top: ${_ref2 => {
11
19
  let {
12
20
  $menuHeight
13
- } = _ref;
21
+ } = _ref2;
14
22
  return `${$menuHeight - 0}px`;
15
23
  }};
16
24
  left: 0;
@@ -1 +1 @@
1
- {"version":3,"file":"Popup.styles.js","names":["styled","StyledPopup","span","StyledPopupPseudo","div","_ref","$menuHeight"],"sources":["../../../../src/components/popup/Popup.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledPopup = styled.span`\n cursor: pointer;\n position: relative;\n display: flex;\n width: fit-content;\n height: fit-content;\n`;\n\nexport const StyledPopupPseudo = styled.div<{\n $menuHeight: number;\n}>`\n top: ${({ $menuHeight }) => `${$menuHeight - 0}px`};\n left: 0;\n pointer-events: none;\n visibility: hidden;\n position: absolute;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,WAAW,GAAGD,MAAM,CAACE,IAAI;AACtC;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,iBAAiB,GAAGH,MAAM,CAACI,GAEtC;AACF,WAAWC,IAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,IAAA;EAAA,OAAK,GAAGC,WAAW,GAAG,CAAC,IAAI;AAAA;AACtD;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
1
+ {"version":3,"file":"Popup.styles.js","names":["styled","css","StyledPopup","span","_ref","$shouldUseChildrenWidth","StyledPopupPseudo","div","_ref2","$menuHeight"],"sources":["../../../../src/components/popup/Popup.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledPopupProps = WithTheme<{\n $shouldUseChildrenWidth: boolean;\n}>;\n\nexport const StyledPopup = styled.span<StyledPopupProps>`\n cursor: pointer;\n position: relative;\n\n ${({ $shouldUseChildrenWidth }) =>\n $shouldUseChildrenWidth &&\n css`\n display: flex;\n width: fit-content;\n height: fit-content;\n `}\n`;\n\nexport const StyledPopupPseudo = styled.div<{\n $menuHeight: number;\n}>`\n top: ${({ $menuHeight }) => `${$menuHeight - 0}px`};\n left: 0;\n pointer-events: none;\n visibility: hidden;\n position: absolute;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAO/C,OAAO,MAAMC,WAAW,GAAGF,MAAM,CAACG,IAAsB;AACxD;AACA;AACA;AACA,MAAMC,IAAA;EAAA,IAAC;IAAEC;EAAwB,CAAC,GAAAD,IAAA;EAAA,OAC1BC,uBAAuB,IACvBJ,GAAG;AACX;AACA;AACA;AACA,SAAS;AAAA;AACT,CAAC;AAED,OAAO,MAAMK,iBAAiB,GAAGN,MAAM,CAACO,GAEtC;AACF,WAAWC,KAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,KAAA;EAAA,OAAK,GAAGC,WAAW,GAAG,CAAC,IAAI;AAAA;AACtD;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
@@ -32,7 +32,8 @@ const Tooltip = _ref => {
32
32
  shouldShowOnHover: true,
33
33
  content: content,
34
34
  ref: tooltipRef,
35
- container: container
35
+ container: container,
36
+ shouldUseChildrenWidth: false
36
37
  }, /*#__PURE__*/React.createElement(StyledTooltipChildren, {
37
38
  $isOnlyText: isTextOnlyElement(children),
38
39
  $shouldUseChildrenWidth: shouldUseChildrenWidth
@@ -1 +1 @@
1
- {"version":3,"file":"Tooltip.js","names":["React","isValidElement","useMemo","useRef","isTextOnlyElement","Popup","TooltipItem","StyledTooltip","StyledTooltipChildren","Tooltip","_ref","item","children","container","isDisabled","itemWidth","shouldUseChildrenWidth","tooltipRef","content","createElement","width","text","headline","imageUrl","button","$isOnlyText","$shouldUseChildrenWidth","shouldShowOnHover","ref","displayName"],"sources":["../../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import React, { FC, isValidElement, ReactNode, useMemo, useRef, type CSSProperties } from 'react';\nimport type { PopupRef } from '../../types/popup';\nimport type { ITooltipItem } from '../../types/tooltip';\nimport { isTextOnlyElement } from '../../utils/tooltip';\nimport Popup from '../popup/Popup';\nimport TooltipItem from './tooltip-item/TooltipItem';\nimport { StyledTooltip, StyledTooltipChildren } from './Tooltip.styles';\n\nexport type TooltipProps = {\n /**\n * The elements that the tooltip should surround.\n */\n children: ReactNode;\n /**\n * The element where the content of the `Tooltip` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * The content that should be displayed.\n */\n item: ITooltipItem | ReactNode;\n /**\n * The width of an item.\n */\n itemWidth?: CSSProperties['width'];\n /**\n * whether the tooltip should be shown.\n */\n isDisabled?: boolean;\n /**\n * Whether the width of the children should be used.\n */\n shouldUseChildrenWidth?: boolean;\n};\n\nconst Tooltip: FC<TooltipProps> = ({\n item,\n children,\n container,\n isDisabled,\n itemWidth,\n shouldUseChildrenWidth = true,\n}) => {\n const tooltipRef = useRef<PopupRef>(null);\n\n const content = useMemo(() => {\n if (isValidElement(item)) {\n return item;\n }\n\n return (\n <TooltipItem\n width={itemWidth}\n text={(item as ITooltipItem).text}\n headline={(item as ITooltipItem).headline}\n imageUrl={(item as ITooltipItem).imageUrl}\n button={(item as ITooltipItem).button}\n />\n );\n }, [item, itemWidth]);\n\n return useMemo(\n () => (\n <StyledTooltip>\n {isDisabled ? (\n <StyledTooltipChildren\n $isOnlyText={isTextOnlyElement(children)}\n $shouldUseChildrenWidth={shouldUseChildrenWidth}\n >\n {children}\n </StyledTooltipChildren>\n ) : (\n <Popup\n shouldShowOnHover\n content={content}\n ref={tooltipRef}\n container={container}\n >\n <StyledTooltipChildren\n $isOnlyText={isTextOnlyElement(children)}\n $shouldUseChildrenWidth={shouldUseChildrenWidth}\n >\n {children}\n </StyledTooltipChildren>\n </Popup>\n )}\n </StyledTooltip>\n ),\n [isDisabled, children, shouldUseChildrenWidth, content, container],\n );\n};\n\nTooltip.displayName = 'Tooltip';\n\nexport default Tooltip;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,cAAc,EAAaC,OAAO,EAAEC,MAAM,QAA4B,OAAO;AAGjG,SAASC,iBAAiB,QAAQ,qBAAqB;AACvD,OAAOC,KAAK,MAAM,gBAAgB;AAClC,OAAOC,WAAW,MAAM,4BAA4B;AACpD,SAASC,aAAa,EAAEC,qBAAqB,QAAQ,kBAAkB;AA6BvE,MAAMC,OAAyB,GAAGC,IAAA,IAO5B;EAAA,IAP6B;IAC/BC,IAAI;IACJC,QAAQ;IACRC,SAAS;IACTC,UAAU;IACVC,SAAS;IACTC,sBAAsB,GAAG;EAC7B,CAAC,GAAAN,IAAA;EACG,MAAMO,UAAU,GAAGd,MAAM,CAAW,IAAI,CAAC;EAEzC,MAAMe,OAAO,GAAGhB,OAAO,CAAC,MAAM;IAC1B,kBAAID,cAAc,CAACU,IAAI,CAAC,EAAE;MACtB,OAAOA,IAAI;IACf;IAEA,oBACIX,KAAA,CAAAmB,aAAA,CAACb,WAAW;MACRc,KAAK,EAAEL,SAAU;MACjBM,IAAI,EAAGV,IAAI,CAAkBU,IAAK;MAClCC,QAAQ,EAAGX,IAAI,CAAkBW,QAAS;MAC1CC,QAAQ,EAAGZ,IAAI,CAAkBY,QAAS;MAC1CC,MAAM,EAAGb,IAAI,CAAkBa;IAAO,CACzC,CAAC;EAEV,CAAC,EAAE,CAACb,IAAI,EAAEI,SAAS,CAAC,CAAC;EAErB,OAAOb,OAAO,CACV,mBACIF,KAAA,CAAAmB,aAAA,CAACZ,aAAa,QACTO,UAAU,gBACPd,KAAA,CAAAmB,aAAA,CAACX,qBAAqB;IAClBiB,WAAW,EAAErB,iBAAiB,CAACQ,QAAQ,CAAE;IACzCc,uBAAuB,EAAEV;EAAuB,GAE/CJ,QACkB,CAAC,gBAExBZ,KAAA,CAAAmB,aAAA,CAACd,KAAK;IACFsB,iBAAiB;IACjBT,OAAO,EAAEA,OAAQ;IACjBU,GAAG,EAAEX,UAAW;IAChBJ,SAAS,EAAEA;EAAU,gBAErBb,KAAA,CAAAmB,aAAA,CAACX,qBAAqB;IAClBiB,WAAW,EAAErB,iBAAiB,CAACQ,QAAQ,CAAE;IACzCc,uBAAuB,EAAEV;EAAuB,GAE/CJ,QACkB,CACpB,CAEA,CAClB,EACD,CAACE,UAAU,EAAEF,QAAQ,EAAEI,sBAAsB,EAAEE,OAAO,EAAEL,SAAS,CACrE,CAAC;AACL,CAAC;AAEDJ,OAAO,CAACoB,WAAW,GAAG,SAAS;AAE/B,eAAepB,OAAO","ignoreList":[]}
1
+ {"version":3,"file":"Tooltip.js","names":["React","isValidElement","useMemo","useRef","isTextOnlyElement","Popup","TooltipItem","StyledTooltip","StyledTooltipChildren","Tooltip","_ref","item","children","container","isDisabled","itemWidth","shouldUseChildrenWidth","tooltipRef","content","createElement","width","text","headline","imageUrl","button","$isOnlyText","$shouldUseChildrenWidth","shouldShowOnHover","ref","displayName"],"sources":["../../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import React, { FC, isValidElement, ReactNode, useMemo, useRef, type CSSProperties } from 'react';\nimport type { PopupRef } from '../../types/popup';\nimport type { ITooltipItem } from '../../types/tooltip';\nimport { isTextOnlyElement } from '../../utils/tooltip';\nimport Popup from '../popup/Popup';\nimport TooltipItem from './tooltip-item/TooltipItem';\nimport { StyledTooltip, StyledTooltipChildren } from './Tooltip.styles';\n\nexport type TooltipProps = {\n /**\n * The elements that the tooltip should surround.\n */\n children: ReactNode;\n /**\n * The element where the content of the `Tooltip` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * The content that should be displayed.\n */\n item: ITooltipItem | ReactNode;\n /**\n * The width of an item.\n */\n itemWidth?: CSSProperties['width'];\n /**\n * whether the tooltip should be shown.\n */\n isDisabled?: boolean;\n /**\n * Whether the width of the children should be used.\n */\n shouldUseChildrenWidth?: boolean;\n};\n\nconst Tooltip: FC<TooltipProps> = ({\n item,\n children,\n container,\n isDisabled,\n itemWidth,\n shouldUseChildrenWidth = true,\n}) => {\n const tooltipRef = useRef<PopupRef>(null);\n\n const content = useMemo(() => {\n if (isValidElement(item)) {\n return item;\n }\n\n return (\n <TooltipItem\n width={itemWidth}\n text={(item as ITooltipItem).text}\n headline={(item as ITooltipItem).headline}\n imageUrl={(item as ITooltipItem).imageUrl}\n button={(item as ITooltipItem).button}\n />\n );\n }, [item, itemWidth]);\n\n return useMemo(\n () => (\n <StyledTooltip>\n {isDisabled ? (\n <StyledTooltipChildren\n $isOnlyText={isTextOnlyElement(children)}\n $shouldUseChildrenWidth={shouldUseChildrenWidth}\n >\n {children}\n </StyledTooltipChildren>\n ) : (\n <Popup\n shouldShowOnHover\n content={content}\n ref={tooltipRef}\n container={container}\n shouldUseChildrenWidth={false}\n >\n <StyledTooltipChildren\n $isOnlyText={isTextOnlyElement(children)}\n $shouldUseChildrenWidth={shouldUseChildrenWidth}\n >\n {children}\n </StyledTooltipChildren>\n </Popup>\n )}\n </StyledTooltip>\n ),\n [isDisabled, children, shouldUseChildrenWidth, content, container],\n );\n};\n\nTooltip.displayName = 'Tooltip';\n\nexport default Tooltip;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,cAAc,EAAaC,OAAO,EAAEC,MAAM,QAA4B,OAAO;AAGjG,SAASC,iBAAiB,QAAQ,qBAAqB;AACvD,OAAOC,KAAK,MAAM,gBAAgB;AAClC,OAAOC,WAAW,MAAM,4BAA4B;AACpD,SAASC,aAAa,EAAEC,qBAAqB,QAAQ,kBAAkB;AA6BvE,MAAMC,OAAyB,GAAGC,IAAA,IAO5B;EAAA,IAP6B;IAC/BC,IAAI;IACJC,QAAQ;IACRC,SAAS;IACTC,UAAU;IACVC,SAAS;IACTC,sBAAsB,GAAG;EAC7B,CAAC,GAAAN,IAAA;EACG,MAAMO,UAAU,GAAGd,MAAM,CAAW,IAAI,CAAC;EAEzC,MAAMe,OAAO,GAAGhB,OAAO,CAAC,MAAM;IAC1B,kBAAID,cAAc,CAACU,IAAI,CAAC,EAAE;MACtB,OAAOA,IAAI;IACf;IAEA,oBACIX,KAAA,CAAAmB,aAAA,CAACb,WAAW;MACRc,KAAK,EAAEL,SAAU;MACjBM,IAAI,EAAGV,IAAI,CAAkBU,IAAK;MAClCC,QAAQ,EAAGX,IAAI,CAAkBW,QAAS;MAC1CC,QAAQ,EAAGZ,IAAI,CAAkBY,QAAS;MAC1CC,MAAM,EAAGb,IAAI,CAAkBa;IAAO,CACzC,CAAC;EAEV,CAAC,EAAE,CAACb,IAAI,EAAEI,SAAS,CAAC,CAAC;EAErB,OAAOb,OAAO,CACV,mBACIF,KAAA,CAAAmB,aAAA,CAACZ,aAAa,QACTO,UAAU,gBACPd,KAAA,CAAAmB,aAAA,CAACX,qBAAqB;IAClBiB,WAAW,EAAErB,iBAAiB,CAACQ,QAAQ,CAAE;IACzCc,uBAAuB,EAAEV;EAAuB,GAE/CJ,QACkB,CAAC,gBAExBZ,KAAA,CAAAmB,aAAA,CAACd,KAAK;IACFsB,iBAAiB;IACjBT,OAAO,EAAEA,OAAQ;IACjBU,GAAG,EAAEX,UAAW;IAChBJ,SAAS,EAAEA,SAAU;IACrBG,sBAAsB,EAAE;EAAM,gBAE9BhB,KAAA,CAAAmB,aAAA,CAACX,qBAAqB;IAClBiB,WAAW,EAAErB,iBAAiB,CAACQ,QAAQ,CAAE;IACzCc,uBAAuB,EAAEV;EAAuB,GAE/CJ,QACkB,CACpB,CAEA,CAClB,EACD,CAACE,UAAU,EAAEF,QAAQ,EAAEI,sBAAsB,EAAEE,OAAO,EAAEL,SAAS,CACrE,CAAC;AACL,CAAC;AAEDJ,OAAO,CAACoB,WAAW,GAAG,SAAS;AAE/B,eAAepB,OAAO","ignoreList":[]}
@@ -51,6 +51,12 @@ export type ListItemProps = {
51
51
  * elements are specified, they are displayed one below the other.
52
52
  */
53
53
  rightElements?: IListItemRightElements;
54
+ /**
55
+ * If the `ListItem` is expandable, the indicator is displayed on the left
56
+ * side of the header. If this property is set to true, the indicator is
57
+ * hidden.
58
+ */
59
+ shouldHideIndicator?: boolean;
54
60
  /**
55
61
  * Images of users should always be displayed in a round shape. Therefore,
56
62
  * this property can be set to true.
@@ -11,6 +11,7 @@ type ListItemHeadProps = {
11
11
  onClick?: MouseEventHandler<HTMLDivElement>;
12
12
  onLongPress?: TouchEventHandler<HTMLDivElement>;
13
13
  rightElements?: IListItemRightElements;
14
+ shouldHideIndicator?: boolean;
14
15
  subtitle?: ReactNode;
15
16
  shouldShowRoundImage?: boolean;
16
17
  title: ReactNode;
@@ -25,6 +25,10 @@ export type PopupProps = {
25
25
  * Whether the popup should be opened on hover. If not, the popup will be opened on click.
26
26
  */
27
27
  shouldShowOnHover?: boolean;
28
+ /**
29
+ * Whether the width of the children should be used.
30
+ */
31
+ shouldUseChildrenWidth?: boolean;
28
32
  /**
29
33
  * The Y offset of the popup to the children.
30
34
  */
@@ -1,4 +1,9 @@
1
- export declare const StyledPopup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
1
+ import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
2
+ type StyledPopupProps = WithTheme<{
3
+ $shouldUseChildrenWidth: boolean;
4
+ }>;
5
+ export declare const StyledPopup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, StyledPopupProps>> & string;
2
6
  export declare const StyledPopupPseudo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
3
7
  $menuHeight: number;
4
8
  }>> & string;
9
+ export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chayns-components/core",
3
- "version": "5.0.0-beta.786",
3
+ "version": "5.0.0-beta.789",
4
4
  "description": "A set of beautiful React components for developing your own applications with chayns.",
5
5
  "sideEffects": false,
6
6
  "browserslist": [
@@ -85,5 +85,5 @@
85
85
  "publishConfig": {
86
86
  "access": "public"
87
87
  },
88
- "gitHead": "45cbfcbd07b972d1e9a8af99ab486e137a83f5b0"
88
+ "gitHead": "05351f313b12a13460d0c8c880d36126a00002f1"
89
89
  }