@chayns-components/core 5.0.0-beta.933 → 5.0.0-beta.935

package/lib/esm/components/list/list-item/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","names":["AnimatePresence","React","useCallback","useContext","useEffect","useUuid","AccordionContext","AreaContextProvider","ListContext","ListItemBody","ListItemHead","StyledMotionListItem","ListItem","_ref","children","hoverItem","icons","images","isDefaultOpen","isOpen","onClick","onLongPress","leftElements","isTitleGreyed","isDisabledButNotReallyDisabled","rightElements","shouldHideImageOrIconBackground","shouldHideIndicator","subtitle","shouldShowRoundImageOrIcon","shouldShowSeparatorBelow","title","titleElement","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","isParentAccordionWrapped","uuid","isExpandable","undefined","isItemOpen","handleHeadClick","event","shouldOnlyOpen","isClickable","createElement","animate","height","opacity","className","exit","initial","key","$isClickable","$isOpen","$isInAccordion","$isWrapped","$shouldHideIndicator","$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 { AccordionContext } from '../../accordion/Accordion';\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     * Whether the ListItem locks disabled but has full functionality.\n     */\n    isTitleGreyed?: 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     * Whether the background and border of the shape on which the image or icon of the element is displayed should be\n     * hidden.\n     */\n    shouldHideImageOrIconBackground?: boolean;\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     * Whether the image or icon should be displayed in a round shape. This should be always used for images of persons.\n     */\n    shouldShowRoundImageOrIcon?: 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                              isTitleGreyed :           isDisabledButNotReallyDisabled,\n    rightElements,\n    shouldHideImageOrIconBackground,\n    shouldHideIndicator = false,\n    subtitle,\n    shouldShowRoundImageOrIcon,\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 { isWrapped: isParentAccordionWrapped } = useContext(AccordionContext);\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 && !shouldHideIndicator) {\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, shouldHideIndicator]);\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            $isInAccordion={typeof isParentAccordionWrapped === 'boolean'}\n            $isWrapped={isWrapped}\n            $shouldHideIndicator={shouldHideIndicator}\n            $shouldShowSeparatorBelow={shouldShowSeparatorBelow}\n        >\n            <ListItemHead\n                hoverItem={hoverItem}\n                icons={icons}\n                images={images}\n                isAnyItemExpandable={isAnyItemExpandable}\n                isDisabledButNotReallyDisabled={isDisabledButNotReallyDisabled}\n                isExpandable={isExpandable}\n                isOpen={isItemOpen}\n                leftElements={leftElements}\n                onClick={isClickable ? handleHeadClick : undefined}\n                onLongPress={onLongPress}\n                rightElements={rightElements}\n                shouldHideImageOrIconBackground={shouldHideImageOrIconBackground}\n                shouldHideIndicator={shouldHideIndicator}\n                subtitle={subtitle}\n                shouldShowRoundImageOrIcon={shouldShowRoundImageOrIcon}\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":[]}
+{"version":3,"file":"ListItem.js","names":["AnimatePresence","React","useCallback","useContext","useEffect","useUuid","AccordionContext","AreaContextProvider","ListContext","ListItemBody","ListItemHead","StyledMotionListItem","ListItem","_ref","children","hoverItem","icons","images","isDefaultOpen","isOpen","shouldForceBackground","onClick","onLongPress","leftElements","isTitleGreyed","isDisabledButNotReallyDisabled","rightElements","shouldHideImageOrIconBackground","shouldHideIndicator","subtitle","shouldShowRoundImageOrIcon","shouldHideBottomLine","shouldShowSeparatorBelow","title","titleElement","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","isParentAccordionWrapped","uuid","isExpandable","undefined","isItemOpen","handleHeadClick","event","shouldOnlyOpen","isClickable","createElement","animate","height","opacity","className","exit","initial","key","$isClickable","$isOpen","$isInAccordion","$isWrapped","$shouldHideIndicator","$shouldForceBackground","$shouldShowSeparatorBelow","$shouldHideBottomLine","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 {AccordionContext} from '../../accordion/Accordion';\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     * Whether the ListItem locks disabled but has full functionality.\n     */\n    isTitleGreyed?: 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     * This will force the background color of the ListItem to be used even if it is closed and not hovered.\n     */\n    shouldForceBackground?: boolean;\n    /**\n     * Whether the background and border of the shape on which the image or icon of the element is displayed should be\n     * hidden.\n     */\n    shouldHideImageOrIconBackground?: boolean;\n    /**\n     * Whether the bottom line should be hidden.\n     */\n    shouldHideBottomLine?: boolean;\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     * Whether the image or icon should be displayed in a round shape. This should be always used for images of persons.\n     */\n    shouldShowRoundImageOrIcon?: 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                                         shouldForceBackground = false,\n                                         onClick,\n                                         onLongPress,\n                                         leftElements,\n                                         isTitleGreyed: isDisabledButNotReallyDisabled,\n                                         rightElements,\n                                         shouldHideImageOrIconBackground,\n                                         shouldHideIndicator = false,\n                                         subtitle,\n                                         shouldShowRoundImageOrIcon,\n                                         shouldHideBottomLine = false,\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 {isWrapped: isParentAccordionWrapped} = useContext(AccordionContext);\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 && !shouldHideIndicator) {\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, shouldHideIndicator]);\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            $isInAccordion={typeof isParentAccordionWrapped === 'boolean'}\n            $isWrapped={isWrapped}\n            $shouldHideIndicator={shouldHideIndicator}\n            $shouldForceBackground={shouldForceBackground}\n            $shouldShowSeparatorBelow={shouldShowSeparatorBelow}\n            $shouldHideBottomLine={shouldHideBottomLine}\n        >\n            <ListItemHead\n                hoverItem={hoverItem}\n                icons={icons}\n                images={images}\n                isAnyItemExpandable={isAnyItemExpandable}\n                isDisabledButNotReallyDisabled={isDisabledButNotReallyDisabled}\n                isExpandable={isExpandable}\n                isOpen={isItemOpen}\n                leftElements={leftElements}\n                onClick={isClickable ? handleHeadClick : undefined}\n                onLongPress={onLongPress}\n                rightElements={rightElements}\n                shouldHideImageOrIconBackground={shouldHideImageOrIconBackground}\n                shouldHideIndicator={shouldHideIndicator}\n                subtitle={subtitle}\n                shouldShowRoundImageOrIcon={shouldShowRoundImageOrIcon}\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":[]}

package/lib/esm/components/list/list-item/ListItem.styles.js

@@ -18,9 +18,10 @@ export const StyledMotionListItem = styled(motion.div)`
   let {
     $isInAccordion,
     $isOpen,
+    $shouldForceBackground,
     theme
   } = _ref2;
-  return !$isInAccordion && $isOpen && css`
+  return (!$isInAccordion && $isOpen || $shouldForceBackground) && css`
             background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});
         `;
 }}
@@ -44,9 +45,10 @@ export const StyledMotionListItem = styled(motion.div)`
     $isInAccordion,
     $isWrapped,
     $shouldShowSeparatorBelow,
+    $shouldHideBottomLine,
     theme
   } = _ref4;
-  return ($shouldShowSeparatorBelow || (!$isOpen || $isWrapped || $isInAccordion) && theme.accordionLines) && css`
+  return ($shouldShowSeparatorBelow || (!$isOpen || $isWrapped || $isInAccordion) && theme.accordionLines && !$shouldHideBottomLine) && css`
             &&:not(:last-child) {
                 border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid
                     rgba(${theme['headline-rgb']}, 0.5);

package/lib/esm/components/list/list-item/ListItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.styles.js","names":["motion","styled","css","StyledMotionListItem","div","_ref","$isInAccordion","$shouldHideIndicator","_ref2","$isOpen","theme","cardBackgroundOpacity","_ref3","$isClickable","_ref4","$isWrapped","$shouldShowSeparatorBelow","accordionLines","_ref5"],"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    $isInAccordion: boolean;\n    $isWrapped: boolean;\n    $shouldHideIndicator: boolean;\n    $shouldShowSeparatorBelow: boolean;\n}>;\n\nexport const StyledMotionListItem = styled(motion.div)<StyledListItemProps>`\n    overflow: hidden;\n    transition: background-color 0.3s ease;\n\n    ${({ $isInAccordion, $shouldHideIndicator }: StyledListItemProps) =>\n        $isInAccordion &&\n        css`\n            padding-left: ${$shouldHideIndicator ? '16px' : '8px'};\n        `}\n\n    ${({ $isInAccordion, $isOpen, theme }) =>\n        !$isInAccordion &&\n        $isOpen &&\n        css`\n            background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n        `}\n\n    ${({ $isClickable, $isInAccordion, theme }) =>\n        $isClickable &&\n        !$isInAccordion &&\n        css`\n            &&:hover {\n                background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n            }\n        `}\n    \n    ${({\n        $isOpen,\n        $isInAccordion,\n        $isWrapped,\n        $shouldShowSeparatorBelow,\n        theme,\n    }: StyledListItemProps) =>\n        ($shouldShowSeparatorBelow ||\n            ((!$isOpen || $isWrapped || $isInAccordion) && 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;AAY/C,OAAO,MAAMC,oBAAoB,GAAGF,MAAM,CAACD,MAAM,CAACI,GAAG,CAAsB;AAC3E;AACA;AACA;AACA,MAAMC,IAAA;EAAA,IAAC;IAAEC,cAAc;IAAEC;EAA0C,CAAC,GAAAF,IAAA;EAAA,OAC5DC,cAAc,IACdJ,GAAG;AACX,4BAA4BK,oBAAoB,GAAG,MAAM,GAAG,KAAK;AACjE,SAAS;AAAA;AACT;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEF,cAAc;IAAEG,OAAO;IAAEC;EAAM,CAAC,GAAAF,KAAA;EAAA,OACjC,CAACF,cAAc,IACfG,OAAO,IACPP,GAAG;AACX,qCAAqCQ,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACrF,SAAS;AAAA;AACT;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,YAAY;IAAEP,cAAc;IAAEI;EAAM,CAAC,GAAAE,KAAA;EAAA,OACtCC,YAAY,IACZ,CAACP,cAAc,IACfJ,GAAG;AACX;AACA,yCAAyCQ,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACzF;AACA,SAAS;AAAA;AACT;AACA,MAAMG,KAAA;EAAA,IAAC;IACCL,OAAO;IACPH,cAAc;IACdS,UAAU;IACVC,yBAAyB;IACzBN;EACiB,CAAC,GAAAI,KAAA;EAAA,OAClB,CAACE,yBAAyB,IACrB,CAAC,CAACP,OAAO,IAAIM,UAAU,IAAIT,cAAc,KAAKI,KAAK,CAACO,cAAe,KACxEf,GAAG;AACX;AACA,iCAAiCc,yBAAyB,GAAG,KAAK,GAAG,KAAK;AAC1E,2BAA2BN,KAAK,CAAC,cAAc,CAAC;AAChD;AACA,SAAS;AAAA;AACT;AACA,MAAMQ,KAAA;EAAA,IAAC;IAAEH;EAAW,CAAC,GAAAG,KAAA;EAAA,OACbH,UAAU,IACVb,GAAG;AACX;AACA,SAAS;AAAA;AACT,CAAC","ignoreList":[]}
+{"version":3,"file":"ListItem.styles.js","names":["motion","styled","css","StyledMotionListItem","div","_ref","$isInAccordion","$shouldHideIndicator","_ref2","$isOpen","$shouldForceBackground","theme","cardBackgroundOpacity","_ref3","$isClickable","_ref4","$isWrapped","$shouldShowSeparatorBelow","$shouldHideBottomLine","accordionLines","_ref5"],"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    $isInAccordion: boolean;\n    $isWrapped: boolean;\n    $shouldHideIndicator: boolean;\n    $shouldForceBackground?: boolean;\n    $shouldShowSeparatorBelow: boolean;\n    $shouldHideBottomLine: boolean;\n}>;\n\nexport const StyledMotionListItem = styled(motion.div)<StyledListItemProps>`\n    overflow: hidden;\n    transition: background-color 0.3s ease;\n\n    ${({ $isInAccordion, $shouldHideIndicator }: StyledListItemProps) =>\n        $isInAccordion &&\n        css`\n            padding-left: ${$shouldHideIndicator ? '16px' : '8px'};\n        `}\n\n    ${({ $isInAccordion, $isOpen,$shouldForceBackground, theme }) =>\n        ((!$isInAccordion &&\n        $isOpen) || $shouldForceBackground) &&\n        css`\n            background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n        `}\n\n    ${({ $isClickable, $isInAccordion, theme }) =>\n        $isClickable &&\n        !$isInAccordion &&\n        css`\n            &&:hover {\n                background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n            }\n        `}\n    \n    ${({\n        $isOpen,\n        $isInAccordion,\n        $isWrapped,\n        $shouldShowSeparatorBelow,\n           $shouldHideBottomLine,\n        theme,\n    }: StyledListItemProps) =>\n        ($shouldShowSeparatorBelow ||\n            ((!$isOpen || $isWrapped || $isInAccordion) && (theme.accordionLines && !$shouldHideBottomLine))) &&\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;AAc/C,OAAO,MAAMC,oBAAoB,GAAGF,MAAM,CAACD,MAAM,CAACI,GAAG,CAAsB;AAC3E;AACA;AACA;AACA,MAAMC,IAAA;EAAA,IAAC;IAAEC,cAAc;IAAEC;EAA0C,CAAC,GAAAF,IAAA;EAAA,OAC5DC,cAAc,IACdJ,GAAG;AACX,4BAA4BK,oBAAoB,GAAG,MAAM,GAAG,KAAK;AACjE,SAAS;AAAA;AACT;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEF,cAAc;IAAEG,OAAO;IAACC,sBAAsB;IAAEC;EAAM,CAAC,GAAAH,KAAA;EAAA,OACxD,CAAE,CAACF,cAAc,IACjBG,OAAO,IAAKC,sBAAsB,KAClCR,GAAG;AACX,qCAAqCS,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACrF,SAAS;AAAA;AACT;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,YAAY;IAAER,cAAc;IAAEK;EAAM,CAAC,GAAAE,KAAA;EAAA,OACtCC,YAAY,IACZ,CAACR,cAAc,IACfJ,GAAG;AACX;AACA,yCAAyCS,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACzF;AACA,SAAS;AAAA;AACT;AACA,MAAMG,KAAA;EAAA,IAAC;IACCN,OAAO;IACPH,cAAc;IACdU,UAAU;IACVC,yBAAyB;IACtBC,qBAAqB;IACxBP;EACiB,CAAC,GAAAI,KAAA;EAAA,OAClB,CAACE,yBAAyB,IACrB,CAAC,CAACR,OAAO,IAAIO,UAAU,IAAIV,cAAc,KAAMK,KAAK,CAACQ,cAAc,IAAI,CAACD,qBAAuB,KACpGhB,GAAG;AACX;AACA,iCAAiCe,yBAAyB,GAAG,KAAK,GAAG,KAAK;AAC1E,2BAA2BN,KAAK,CAAC,cAAc,CAAC;AAChD;AACA,SAAS;AAAA;AACT;AACA,MAAMS,KAAA;EAAA,IAAC;IAAEJ;EAAW,CAAC,GAAAI,KAAA;EAAA,OACbJ,UAAU,IACVd,GAAG;AACX;AACA,SAAS;AAAA;AACT,CAAC","ignoreList":[]}

package/lib/esm/components/popup/Popup.js

@@ -45,6 +45,11 @@ const Popup = /*#__PURE__*/forwardRef((_ref, ref) => {
       setNewContainer(element);
     }
   }, [container]);
+  useEffect(() => {
+    if (container instanceof Element) {
+      setNewContainer(container);
+    }
+  }, [container]);
   const measureHeight = () => {
     if (popupPseudoContentRef.current) {
       const height = popupPseudoContentRef.current.offsetHeight;

package/lib/esm/components/popup/Popup.js.map

@@ -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","onHide","children","shouldShowOnHover","shouldUseChildrenWidth","yOffset","coordinates","setCoordinates","x","y","alignment","setAlignment","TopLeft","offset","setOffset","isOpen","setIsOpen","portal","setPortal","menuHeight","setMenuHeight","isMeasuring","setIsMeasuring","pseudoSize","setPseudoSize","newContainer","setNewContainer","timeout","uuid","popupContentRef","popupPseudoContentRef","popupRef","current","el","element","closest","measureHeight","height","offsetHeight","width","offsetWidth","handleResize","setTimeout","window","addEventListener","removeEventListener","handleShow","pseudoHeight","pseudoWidth","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","getBoundingClientRect","isRight","BottomRight","BottomLeft","newOffset","innerWidth","right","newX","TopRight","handleChildrenClick","handleHide","handleMouseEnter","clearTimeout","handleMouseLeave","handleDocumentClick","event","contains","target","hide","show","then","result","topBarHeight","document","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,\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        const [isMeasuring, setIsMeasuring] = useState(true);\n        const [pseudoSize, setPseudoSize] = useState<{ height: number; width: number }>();\n        const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\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 (popupRef.current && !container) {\n                const el = popupRef.current as HTMLElement;\n\n                const element =\n                    el.closest('.dialog-inner') ||\n                    el.closest('.page-provider') ||\n                    el.closest('.tapp') ||\n                    el.closest('body');\n\n                setNewContainer(element);\n            }\n        }, [container]);\n\n        const measureHeight = () => {\n            if (popupPseudoContentRef.current) {\n                const height = popupPseudoContentRef.current.offsetHeight;\n                const width = popupPseudoContentRef.current.offsetWidth + 1;\n\n                setPseudoSize({ height, width });\n            }\n        };\n\n        useEffect(() => {\n            measureHeight();\n\n            setIsMeasuring(false);\n        }, []);\n\n        useEffect(() => {\n            const handleResize = () => {\n                setIsMeasuring(true);\n\n                setTimeout(() => {\n                    measureHeight();\n                    setIsMeasuring(false);\n                }, 0);\n            };\n\n            window.addEventListener('resize', handleResize);\n\n            return () => {\n                window.removeEventListener('resize', handleResize);\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            handleShow();\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 (!popupContentRef.current?.contains(event.target as Node)) {\n                    handleHide();\n                }\n            },\n            [handleHide],\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            if (!newContainer) {\n                return;\n            }\n\n            setPortal(() =>\n                createPortal(\n                    <AnimatePresence initial={false}>\n                        {isOpen && (\n                            <PopupContentWrapper\n                                width={pseudoSize?.width ?? 0}\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                    newContainer,\n                ),\n            );\n        }, [\n            alignment,\n            newContainer,\n            content,\n            coordinates,\n            handleMouseEnter,\n            handleMouseLeave,\n            isOpen,\n            offset,\n            pseudoSize?.width,\n            uuid,\n        ]);\n\n        return (\n            <>\n                {isMeasuring && (\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":"AAAA,SAASA,gBAAgB,QAAQ,YAAY;AAC7C,SAASC,eAAe,QAAQ,eAAe;AAC/C,OAAOC,KAAK,IACRC,UAAU,EAGVC,WAAW,EACXC,SAAS,EACTC,mBAAmB,EACnBC,MAAM,EACNC,QAAQ,QACL,OAAO;AACd,SAASC,YAAY,QAAQ,WAAW;AACxC,SAASC,OAAO,QAAQ,kBAAkB;AAC1C,SAASC,cAAc,QAAoC,mBAAmB;AAC9E,OAAOC,mBAAmB,MAAM,sCAAsC;AACtE,OAAOC,mBAAmB,MAAM,6CAA6C;AAC7E,SAASC,WAAW,EAAEC,iBAAiB,QAAQ,gBAAgB;AAqC/D,MAAMC,KAAK,gBAAGb,UAAU,CACpB,CAAAc,IAAA,EAWIC,GAAG,KACF;EAAA,IAXD;IACIC,OAAO;IACPC,MAAM;IACNC,SAAS;IACTC,MAAM;IACNC,QAAQ;IACRC,iBAAiB,GAAG,KAAK;IACzBC,sBAAsB,GAAG,IAAI;IAC7BC,OAAO,GAAG;EACd,CAAC,GAAAT,IAAA;EAGD,MAAM,CAACU,WAAW,EAAEC,cAAc,CAAC,GAAGpB,QAAQ,CAAmB;IAC7DqB,CAAC,EAAE,CAAC;IACJC,CAAC,EAAE;EACP,CAAC,CAAC;EAEF,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGxB,QAAQ,CAAiBG,cAAc,CAACsB,OAAO,CAAC;EAClF,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAG3B,QAAQ,CAAS,CAAC,CAAC;EAC/C,MAAM,CAAC4B,MAAM,EAAEC,SAAS,CAAC,GAAG7B,QAAQ,CAAC,KAAK,CAAC;EAC3C,MAAM,CAAC8B,MAAM,EAAEC,SAAS,CAAC,GAAG/B,QAAQ,CAAc,CAAC;EACnD,MAAM,CAACgC,UAAU,EAAEC,aAAa,CAAC,GAAGjC,QAAQ,CAAC,CAAC,CAAC;EAC/C,MAAM,CAACkC,WAAW,EAAEC,cAAc,CAAC,GAAGnC,QAAQ,CAAC,IAAI,CAAC;EACpD,MAAM,CAACoC,UAAU,EAAEC,aAAa,CAAC,GAAGrC,QAAQ,CAAoC,CAAC;EACjF,MAAM,CAACsC,YAAY,EAAEC,eAAe,CAAC,GAAGvC,QAAQ,CAAiBa,SAAS,IAAI,IAAI,CAAC;EAEnF,MAAM2B,OAAO,GAAGzC,MAAM,CAAS,CAAC;EAEhC,MAAM0C,IAAI,GAAGvC,OAAO,CAAC,CAAC;;EAEtB;;EAEA,MAAMwC,eAAe,GAAG3C,MAAM,CAAiB,IAAI,CAAC;EACpD,MAAM4C,qBAAqB,GAAG5C,MAAM,CAAiB,IAAI,CAAC;EAC1D,MAAM6C,QAAQ,GAAG7C,MAAM,CAAiB,IAAI,CAAC;EAE7CF,SAAS,CAAC,MAAM;IACZ,IAAI+C,QAAQ,CAACC,OAAO,IAAI,CAAChC,SAAS,EAAE;MAChC,MAAMiC,EAAE,GAAGF,QAAQ,CAACC,OAAsB;MAE1C,MAAME,OAAO,GACTD,EAAE,CAACE,OAAO,CAAC,eAAe,CAAC,IAC3BF,EAAE,CAACE,OAAO,CAAC,gBAAgB,CAAC,IAC5BF,EAAE,CAACE,OAAO,CAAC,OAAO,CAAC,IACnBF,EAAE,CAACE,OAAO,CAAC,MAAM,CAAC;MAEtBT,eAAe,CAACQ,OAAO,CAAC;IAC5B;EACJ,CAAC,EAAE,CAAClC,SAAS,CAAC,CAAC;EAEf,MAAMoC,aAAa,GAAGA,CAAA,KAAM;IACxB,IAAIN,qBAAqB,CAACE,OAAO,EAAE;MAC/B,MAAMK,MAAM,GAAGP,qBAAqB,CAACE,OAAO,CAACM,YAAY;MACzD,MAAMC,KAAK,GAAGT,qBAAqB,CAACE,OAAO,CAACQ,WAAW,GAAG,CAAC;MAE3DhB,aAAa,CAAC;QAAEa,MAAM;QAAEE;MAAM,CAAC,CAAC;IACpC;EACJ,CAAC;EAEDvD,SAAS,CAAC,MAAM;IACZoD,aAAa,CAAC,CAAC;IAEfd,cAAc,CAAC,KAAK,CAAC;EACzB,CAAC,EAAE,EAAE,CAAC;EAENtC,SAAS,CAAC,MAAM;IACZ,MAAMyD,YAAY,GAAGA,CAAA,KAAM;MACvBnB,cAAc,CAAC,IAAI,CAAC;MAEpBoB,UAAU,CAAC,MAAM;QACbN,aAAa,CAAC,CAAC;QACfd,cAAc,CAAC,KAAK,CAAC;MACzB,CAAC,EAAE,CAAC,CAAC;IACT,CAAC;IAEDqB,MAAM,CAACC,gBAAgB,CAAC,QAAQ,EAAEH,YAAY,CAAC;IAE/C,OAAO,MAAM;MACTE,MAAM,CAACE,mBAAmB,CAAC,QAAQ,EAAEJ,YAAY,CAAC;IACtD,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMK,UAAU,GAAG/D,WAAW,CAAC,MAAM;IACjC,IAAIgD,QAAQ,CAACC,OAAO,IAAIT,UAAU,EAAE;MAChC,MAAM;QAAEc,MAAM,EAAEU,YAAY;QAAER,KAAK,EAAES;MAAY,CAAC,GAAGzB,UAAU;MAE/D,MAAM;QACFc,MAAM,EAAEY,cAAc;QACtBC,IAAI,EAAEC,YAAY;QAClBC,GAAG,EAAEC,WAAW;QAChBd,KAAK,EAAEe;MACX,CAAC,GAAGvB,QAAQ,CAACC,OAAO,CAACuB,qBAAqB,CAAC,CAAC;MAE5C,IAAIR,YAAY,GAAGM,WAAW,GAAG,EAAE,EAAE;QACjC,IAAIG,OAAO,GAAG,KAAK;QAEnB,IAAIR,WAAW,GAAGG,YAAY,GAAGG,aAAa,GAAG,CAAC,GAAG,EAAE,EAAE;UACrD3C,YAAY,CAACrB,cAAc,CAACmE,WAAW,CAAC;UAExCD,OAAO,GAAG,IAAI;QAClB,CAAC,MAAM;UACH7C,YAAY,CAACrB,cAAc,CAACoE,UAAU,CAAC;QAC3C;QAEA,MAAMlD,CAAC,GAAG2C,YAAY,GAAGG,aAAa,GAAG,CAAC;QAC1C,MAAM7C,CAAC,GAAG4C,WAAW,GAAGJ,cAAc,GAAG5C,OAAO;QAEhD,IAAIsD,SAAS;QAEb,IAAIH,OAAO,EAAE;UACTG,SAAS,GACLnD,CAAC,GAAGwC,WAAW,IAAIL,MAAM,CAACiB,UAAU,GAC9BpD,CAAC,GAAGwC,WAAW,GAAGL,MAAM,CAACiB,UAAU,GACnC,CAAC;QACf,CAAC,MAAM;UACHD,SAAS,GAAG,CAAC;UAEb,MAAME,KAAK,GAAGlB,MAAM,CAACiB,UAAU,IAAIT,YAAY,GAAGG,aAAa,GAAG,CAAC,CAAC;UAEpEK,SAAS,GACLE,KAAK,GAAGb,WAAW,IAAIL,MAAM,CAACiB,UAAU,GAClCC,KAAK,GAAGb,WAAW,GAAGL,MAAM,CAACiB,UAAU,GACvC,CAAC;QACf;QAEA9C,SAAS,CAAC6C,SAAS,CAAC;QAEpB,MAAMG,IAAI,GAAGtD,CAAC,GAAGmD,SAAS;QAE1BpD,cAAc,CAAC;UACXC,CAAC,EAAEsD,IAAI,GAAG,EAAE,GAAG,EAAE,GAAGA,IAAI;UACxBrD,CAAC,EAAEA,CAAC,GAAGJ;QACX,CAAC,CAAC;MACN,CAAC,MAAM;QACH,IAAImD,OAAO,GAAG,KAAK;QAEnB,IAAIR,WAAW,GAAGG,YAAY,GAAGG,aAAa,GAAG,CAAC,GAAG,EAAE,EAAE;UACrD3C,YAAY,CAACrB,cAAc,CAACyE,QAAQ,CAAC;UAErCP,OAAO,GAAG,IAAI;QAClB,CAAC,MAAM;UACH7C,YAAY,CAACrB,cAAc,CAACsB,OAAO,CAAC;QACxC;QAEA,MAAMJ,CAAC,GAAG2C,YAAY,GAAGG,aAAa,GAAG,CAAC;QAC1C,MAAM7C,CAAC,GAAG4C,WAAW,GAAGhD,OAAO;QAE/B,IAAIsD,SAAS;QAEb,IAAIH,OAAO,EAAE;UACTG,SAAS,GACLnD,CAAC,GAAGwC,WAAW,IAAIL,MAAM,CAACiB,UAAU,GAC9BpD,CAAC,GAAGwC,WAAW,GAAGL,MAAM,CAACiB,UAAU,GACnC,CAAC;QACf,CAAC,MAAM;UACHD,SAAS,GAAG,CAAC;UAEb,MAAME,KAAK,GAAGlB,MAAM,CAACiB,UAAU,IAAIT,YAAY,GAAGG,aAAa,GAAG,CAAC,CAAC;UAEpEK,SAAS,GACLE,KAAK,GAAGb,WAAW,IAAIL,MAAM,CAACiB,UAAU,GAClCC,KAAK,GAAGb,WAAW,GAAGL,MAAM,CAACiB,UAAU,GACvC,CAAC;QACf;QAEA9C,SAAS,CAAC6C,SAAS,CAAC;QAEpB,MAAMG,IAAI,GAAGtD,CAAC,GAAGmD,SAAS;QAE1BpD,cAAc,CAAC;UACXC,CAAC,EAAEsD,IAAI,GAAG,EAAE,GAAG,EAAE,GAAGA,IAAI;UACxBrD,CAAC,EAAEA,CAAC,GAAGJ;QACX,CAAC,CAAC;MACN;MAEAW,SAAS,CAAC,IAAI,CAAC;IACnB;EACJ,CAAC,EAAE,CAACO,UAAU,EAAElB,OAAO,CAAC,CAAC;EAEzB,MAAM2D,mBAAmB,GAAGA,CAAA,KAAM;IAC9BlB,UAAU,CAAC,CAAC;EAChB,CAAC;EAED,MAAMmB,UAAU,GAAGlF,WAAW,CAAC,MAAM;IACjCiC,SAAS,CAAC,KAAK,CAAC;EACpB,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMkD,gBAAgB,GAAGnF,WAAW,CAAC,MAAM;IACvC,IAAIoB,iBAAiB,EAAE;MACnBwC,MAAM,CAACwB,YAAY,CAACxC,OAAO,CAACK,OAAO,CAAC;MACpCc,UAAU,CAAC,CAAC;IAChB;EACJ,CAAC,EAAE,CAACA,UAAU,EAAE3C,iBAAiB,CAAC,CAAC;EAEnC,MAAMiE,gBAAgB,GAAGrF,WAAW,CAAC,MAAM;IACvC,IAAI,CAACoB,iBAAiB,EAAE;MACpB;IACJ;IAEAwB,OAAO,CAACK,OAAO,GAAGW,MAAM,CAACD,UAAU,CAAC,MAAM;MACtCuB,UAAU,CAAC,CAAC;IAChB,CAAC,EAAE,GAAG,CAAC;EACX,CAAC,EAAE,CAACA,UAAU,EAAE9D,iBAAiB,CAAC,CAAC;EAEnC,MAAMkE,mBAAmB,GAAGtF,WAAW,CAClCuF,KAAK,IAAK;IACP,IAAI,CAACzC,eAAe,CAACG,OAAO,EAAEuC,QAAQ,CAACD,KAAK,CAACE,MAAc,CAAC,EAAE;MAC1DP,UAAU,CAAC,CAAC;IAChB;EACJ,CAAC,EACD,CAACA,UAAU,CACf,CAAC;EAEDhF,mBAAmB,CACfY,GAAG,EACH,OAAO;IACH4E,IAAI,EAAER,UAAU;IAChBS,IAAI,EAAE5B;EACV,CAAC,CAAC,EACF,CAACmB,UAAU,EAAEnB,UAAU,CAC3B,CAAC;EAED9D,SAAS,CAAC,MAAM;IACZ,KAAKL,gBAAgB,CAAC,CAAC,CAACgG,IAAI,CAAEC,MAAM,IAAK;MACrC,IAAIA,MAAM,CAACC,YAAY,EAAE;QACrBzD,aAAa,CAACwD,MAAM,CAACC,YAAY,CAAC;MACtC;IACJ,CAAC,CAAC;EACN,CAAC,EAAE,EAAE,CAAC;EAEN7F,SAAS,CAAC,MAAM;IACZ,IAAI+B,MAAM,EAAE;MACR+D,QAAQ,CAAClC,gBAAgB,CAAC,OAAO,EAAEyB,mBAAmB,EAAE,IAAI,CAAC;MAC7D1B,MAAM,CAACC,gBAAgB,CAAC,MAAM,EAAEqB,UAAU,CAAC;MAE3C,IAAI,OAAOlE,MAAM,KAAK,UAAU,EAAE;QAC9BA,MAAM,CAAC,CAAC;MACZ;IACJ,CAAC,MAAM,IAAI,OAAOE,MAAM,KAAK,UAAU,EAAE;MACrCA,MAAM,CAAC,CAAC;IACZ;IAEA,OAAO,MAAM;MACT6E,QAAQ,CAACjC,mBAAmB,CAAC,OAAO,EAAEwB,mBAAmB,EAAE,IAAI,CAAC;MAChE1B,MAAM,CAACE,mBAAmB,CAAC,MAAM,EAAEoB,UAAU,CAAC;IAClD,CAAC;EACL,CAAC,EAAE,CAACI,mBAAmB,EAAEJ,UAAU,EAAElD,MAAM,EAAEd,MAAM,EAAEF,MAAM,CAAC,CAAC;EAE7Df,SAAS,CAAC,MAAM;IACZ,IAAI,CAACyC,YAAY,EAAE;MACf;IACJ;IAEAP,SAAS,CAAC,mBACN9B,YAAY,cACRP,KAAA,CAAAkG,aAAA,CAACnG,eAAe;MAACoG,OAAO,EAAE;IAAM,GAC3BjE,MAAM,iBACHlC,KAAA,CAAAkG,aAAA,CAACvF,mBAAmB;MAChB+C,KAAK,EAAEhB,UAAU,EAAEgB,KAAK,IAAI,CAAE;MAC9B1B,MAAM,EAAEA,MAAO;MACfP,WAAW,EAAEA,WAAY;MACzB2E,GAAG,EAAE,WAAWrD,IAAI,EAAG;MACvBlB,SAAS,EAAEA,SAAU;MACrBb,GAAG,EAAEgC,eAAgB;MACrBqD,YAAY,EAAEd,gBAAiB;MAC/Be,YAAY,EAAEjB;IAAiB,gBAE/BrF,KAAA,CAAAkG,aAAA,CAACxF,mBAAmB;MAAC6F,iBAAiB,EAAE;IAAM,GACzCtF,OACgB,CACJ,CAEZ,CAAC,EAClB2B,YACJ,CACJ,CAAC;EACL,CAAC,EAAE,CACCf,SAAS,EACTe,YAAY,EACZ3B,OAAO,EACPQ,WAAW,EACX4D,gBAAgB,EAChBE,gBAAgB,EAChBrD,MAAM,EACNF,MAAM,EACNU,UAAU,EAAEgB,KAAK,EACjBX,IAAI,CACP,CAAC;EAEF,oBACI/C,KAAA,CAAAkG,aAAA,CAAAlG,KAAA,CAAAwG,QAAA,QACKhE,WAAW,iBACRxC,KAAA,CAAAkG,aAAA,CAACrF,iBAAiB;IAACG,GAAG,EAAEiC,qBAAsB;IAACwD,WAAW,EAAEnE;EAAW,GAClErB,OACc,CACtB,eACDjB,KAAA,CAAAkG,aAAA,CAACtF,WAAW;IACRI,GAAG,EAAEkC,QAAS;IACdwD,OAAO,EAAEvB,mBAAoB;IAC7BkB,YAAY,EAAEd,gBAAiB;IAC/Be,YAAY,EAAEjB,gBAAiB;IAC/BsB,uBAAuB,EAAEpF;EAAuB,GAE/CF,QACQ,CAAC,EACbe,MACH,CAAC;AAEX,CACJ,CAAC;AAEDtB,KAAK,CAAC8F,WAAW,GAAG,OAAO;AAE3B,eAAe9F,KAAK","ignoreList":[]}
+{"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","onHide","children","shouldShowOnHover","shouldUseChildrenWidth","yOffset","coordinates","setCoordinates","x","y","alignment","setAlignment","TopLeft","offset","setOffset","isOpen","setIsOpen","portal","setPortal","menuHeight","setMenuHeight","isMeasuring","setIsMeasuring","pseudoSize","setPseudoSize","newContainer","setNewContainer","timeout","uuid","popupContentRef","popupPseudoContentRef","popupRef","current","el","element","closest","Element","measureHeight","height","offsetHeight","width","offsetWidth","handleResize","setTimeout","window","addEventListener","removeEventListener","handleShow","pseudoHeight","pseudoWidth","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","getBoundingClientRect","isRight","BottomRight","BottomLeft","newOffset","innerWidth","right","newX","TopRight","handleChildrenClick","handleHide","handleMouseEnter","clearTimeout","handleMouseLeave","handleDocumentClick","event","contains","target","hide","show","then","result","topBarHeight","document","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,\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        const [isMeasuring, setIsMeasuring] = useState(true);\n        const [pseudoSize, setPseudoSize] = useState<{ height: number; width: number }>();\n        const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\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 (popupRef.current && !container) {\n                const el = popupRef.current as HTMLElement;\n\n                const element =\n                    el.closest('.dialog-inner') ||\n                    el.closest('.page-provider') ||\n                    el.closest('.tapp') ||\n                    el.closest('body');\n\n                setNewContainer(element);\n            }\n        }, [container]);\n\n        useEffect(() => {\n            if(container instanceof Element){\n                setNewContainer(container)\n            }\n        }, [container]);\n\n        const measureHeight = () => {\n            if (popupPseudoContentRef.current) {\n                const height = popupPseudoContentRef.current.offsetHeight;\n                const width = popupPseudoContentRef.current.offsetWidth + 1;\n\n                setPseudoSize({ height, width });\n            }\n        };\n\n        useEffect(() => {\n            measureHeight();\n\n            setIsMeasuring(false);\n        }, []);\n\n        useEffect(() => {\n            const handleResize = () => {\n                setIsMeasuring(true);\n\n                setTimeout(() => {\n                    measureHeight();\n                    setIsMeasuring(false);\n                }, 0);\n            };\n\n            window.addEventListener('resize', handleResize);\n\n            return () => {\n                window.removeEventListener('resize', handleResize);\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            handleShow();\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 (!popupContentRef.current?.contains(event.target as Node)) {\n                    handleHide();\n                }\n            },\n            [handleHide],\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            if (!newContainer) {\n                return;\n            }\n\n            setPortal(() =>\n                createPortal(\n                    <AnimatePresence initial={false}>\n                        {isOpen && (\n                            <PopupContentWrapper\n                                width={pseudoSize?.width ?? 0}\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                    newContainer,\n                ),\n            );\n        }, [\n            alignment,\n            newContainer,\n            content,\n            coordinates,\n            handleMouseEnter,\n            handleMouseLeave,\n            isOpen,\n            offset,\n            pseudoSize?.width,\n            uuid,\n        ]);\n\n        return (\n            <>\n                {isMeasuring && (\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":[]}

package/lib/esm/components/search-box/SearchBox.js

@@ -58,6 +58,11 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
       setNewContainer(element);
     }
   }, [container]);
+  useEffect(() => {
+    if (container instanceof Element) {
+      setNewContainer(container);
+    }
+  }, [container]);
   useEffect(() => {
     if (boxRef.current) {
       const {

package/lib/esm/components/search-box/SearchBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBox.js","names":["getDevice","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","createPortal","useTheme","calculateContentHeight","searchList","Icon","Input","GroupName","SearchBoxBody","SearchBoxItem","StyledSearchBoxItemImage","StyledSearchBox","StyledSearchBoxIcon","SearchBox","_ref","ref","placeholder","lists","onChange","onBlur","onSelect","onKeyDown","selectedId","container","shouldShowRoundImage","shouldShowContentOnEmptyInput","shouldAddInputToList","shouldShowToggleIcon","matchingListsItems","setMatchingListsItems","selectedImage","setSelectedImage","value","setValue","isAnimating","setIsAnimating","height","setHeight","width","setWidth","focusedIndex","setFocusedIndex","hasMultipleGroups","setHasMultipleGroups","length","filteredChildrenArray","setFilteredChildrenArray","inputToListValue","setInputToListValue","groups","setGroups","portal","setPortal","internalCoordinates","setInternalCoordinates","x","y","newContainer","setNewContainer","boxRef","contentRef","inputRef","theme","browser","current","el","element","closest","getBoundingClientRect","filterbuttons","items","forEach","_ref2","groupName","push","id","text","activeList","newLists","list","includes","newMatchingItems","_ref3","newList","searchString","undefined","filteredMatchingListItems","map","_ref4","filter","item","handleOpen","bodyHeight","handleClose","handleFilterButtonsGroupSelect","keys","handleOutsideClick","event","contains","target","document","addEventListener","window","removeEventListener","textArray","_ref5","_ref6","input","getElementById","getInputWidth","offsetWidth","ResizeObserver","observe","_ref7","selectedItem","find","_ref8","imageUrl","createElement","src","$shouldShowRoundImage","handleFocus","_ref9","_ref10","_ref11","_ref12","_ref13","toLowerCase","handleClick","rightElement","onClick","icons","color","handleChange","filteredLists","_ref14","handleBlur","handleSelect","newItem","replace","content","_ref15","index","key","name","_ref16","handleKeyDown","e","preventDefault","children","childrenArray","Array","from","newChildren","child","startsWith","filteredChildren","dataset","isgroupname","newIndex","prevElement","tabIndex","newElement","focus","textContent","attributes","nodeValue","handleKeyPress","keyCode","clear","initial","selectedGroups","coordinates","onGroupSelect","onFocus","leftElement","displayName"],"sources":["../../../../src/components/search-box/SearchBox.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    FocusEvent,\n    FocusEventHandler,\n    forwardRef,\n    KeyboardEventHandler,\n    ReactElement,\n    ReactPortal,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useTheme } from 'styled-components';\nimport type { IFilterButtonItem } from '../../types/filterButtons';\nimport type { ISearchBoxItem, ISearchBoxItems } from '../../types/searchBox';\nimport { calculateContentHeight } from '../../utils/calculate';\nimport { searchList } from '../../utils/searchBox';\nimport type { ContextMenuCoordinates } from '../context-menu/ContextMenu';\nimport Icon from '../icon/Icon';\nimport Input from '../input/Input';\nimport GroupName from './group-name/GroupName';\nimport SearchBoxBody from './search-box-body/SearchBoxBody';\nimport SearchBoxItem from './search-box-item/SearchBoxItem';\nimport { StyledSearchBoxItemImage } from './search-box-item/SearchBoxItem.styles';\nimport { StyledSearchBox, StyledSearchBoxIcon } from './SearchBox.styles';\n\nexport type SearchBoxRef = {\n    clear: VoidFunction;\n};\n\nexport type SearchBoxProps = {\n    /**\n     * The element where the content of the `ComboBox` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * List of groups with items that can be searched. It is possible to give only one list; if multiple lists are provided, the 'group name' parameter becomes mandatory.\n     */\n    lists: ISearchBoxItems[];\n    /**\n     * The placeholder that should be displayed.\n     */\n    placeholder?: string;\n    /**\n     * Function to be executed when the input lost focus.\n     */\n    onBlur?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when the input is changed.\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when a letter is pressed\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when an item is selected.\n     */\n    onSelect?: (item: ISearchBoxItem) => void;\n    /**\n     * Control the selected item. If you use this prop, make sure to update it when the user selects an item.\n     */\n    selectedId?: string;\n    /**\n     * If true, the value in the Input is displayed in the list.\n     */\n    shouldAddInputToList: boolean;\n    /**\n     * Whether the full list of items should be displayed if the input is empty.\n     */\n    shouldShowContentOnEmptyInput?: boolean;\n    /**\n     * If true, the images of the items are displayed in a round shape.\n     */\n    shouldShowRoundImage?: boolean;\n    /**\n     * Whether the icon to open and close the list should be displayed.\n     */\n    shouldShowToggleIcon?: boolean;\n};\n\nconst SearchBox: FC<SearchBoxProps> = forwardRef<SearchBoxRef, SearchBoxProps>(\n    (\n        {\n            placeholder,\n            lists,\n            onChange,\n            onBlur,\n            onSelect,\n            onKeyDown,\n            selectedId,\n            container,\n            shouldShowRoundImage,\n            shouldShowContentOnEmptyInput = true,\n            shouldAddInputToList = true,\n            shouldShowToggleIcon = false,\n        },\n        ref,\n    ) => {\n        const [matchingListsItems, setMatchingListsItems] = useState<ISearchBoxItems[]>(lists);\n        const [selectedImage, setSelectedImage] = useState<ReactElement>();\n        const [value, setValue] = useState('');\n        const [isAnimating, setIsAnimating] = useState(false);\n        const [height, setHeight] = useState<number>(0);\n        const [width, setWidth] = useState(0);\n        const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n        const [hasMultipleGroups, setHasMultipleGroups] = useState<boolean>(lists.length > 1);\n        const [filteredChildrenArray, setFilteredChildrenArray] = useState<Element[]>();\n        const [inputToListValue, setInputToListValue] = useState<string>('');\n        const [groups, setGroups] = useState<string[]>(['all']);\n        const [portal, setPortal] = useState<ReactPortal>();\n        const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n            x: 0,\n            y: 0,\n        });\n        const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\n\n        const boxRef = useRef<HTMLDivElement>(null);\n        const contentRef = useRef<HTMLDivElement>(null);\n        const inputRef = useRef<HTMLInputElement | null>(null);\n\n        const theme = useTheme();\n\n        const { browser } = getDevice();\n\n        useEffect(() => {\n            if (boxRef.current && !container) {\n                const el = boxRef.current as HTMLElement;\n\n                const element = el.closest('.dialog-inner') || el.closest('body');\n\n                setNewContainer(element);\n            }\n        }, [container]);\n\n        useEffect(() => {\n            if (boxRef.current) {\n                const { x, y } = boxRef.current.getBoundingClientRect();\n\n                setInternalCoordinates({\n                    x,\n                    y,\n                });\n            }\n        }, []);\n\n        /**\n         * Checks if Lists are smaller then 1\n         */\n        useEffect(() => {\n            setHasMultipleGroups(lists.length > 1);\n        }, [lists]);\n\n        const filterbuttons = useMemo(() => {\n            const items: IFilterButtonItem[] = [];\n\n            if (lists.length <= 1) {\n                return items;\n            }\n\n            lists.forEach(({ groupName }) => {\n                if (groupName) {\n                    items.push({\n                        id: groupName,\n                        text: groupName,\n                    });\n                }\n            });\n\n            return items;\n        }, [lists]);\n\n        /**\n         * Filters the lists by the FilterButtons\n         */\n        const activeList = useMemo(() => {\n            let newLists: ISearchBoxItems[] = [];\n\n            if (groups[0] === 'all') {\n                newLists = lists;\n            } else {\n                lists.forEach((list) => {\n                    if (list.groupName && groups.includes(list.groupName)) {\n                        newLists.push(list);\n                    }\n                });\n            }\n\n            const newMatchingItems: ISearchBoxItems[] = [];\n\n            newLists.forEach(({ list, groupName }) => {\n                const newList = searchList({ items: list, searchString: value });\n\n                if (newList.length > 0) {\n                    newMatchingItems.push({\n                        groupName,\n                        list: newList,\n                    });\n                }\n            });\n\n            if (newMatchingItems.length === 0 && shouldAddInputToList) {\n                newMatchingItems.push({\n                    groupName: undefined,\n                    list: [],\n                });\n            }\n\n            const filteredMatchingListItems = newMatchingItems.map(({ list, groupName }) => ({\n                groupName,\n                list: list.filter(\n                    (item) => !(newMatchingItems.length === 1 && item.text === value),\n                ),\n            }));\n\n            setMatchingListsItems(filteredMatchingListItems);\n\n            return newLists;\n        }, [groups, lists, shouldAddInputToList, value]);\n\n        const handleOpen = useCallback(() => {\n            if (boxRef.current) {\n                const { x, y, height: bodyHeight } = boxRef.current.getBoundingClientRect();\n\n                setInternalCoordinates({\n                    x,\n                    y: y + bodyHeight,\n                });\n\n                setIsAnimating(true);\n            }\n        }, []);\n\n        const handleClose = useCallback(() => {\n            setIsAnimating(false);\n        }, []);\n\n        const handleFilterButtonsGroupSelect = (keys: string[]) => {\n            setGroups(keys.length === 0 ? ['all'] : keys);\n        };\n\n        /**\n         * This function closes the list of items\n         */\n        const handleOutsideClick = useCallback(\n            (event: MouseEvent) => {\n                if (\n                    boxRef.current &&\n                    !boxRef.current.contains(event.target as Node) &&\n                    contentRef.current &&\n                    !contentRef.current.contains(event.target as Node)\n                ) {\n                    handleClose();\n                }\n            },\n            [handleClose],\n        );\n\n        /**\n         * This hook listens for clicks\n         */\n        useEffect(() => {\n            document.addEventListener('click', handleOutsideClick);\n            window.addEventListener('blur', () => handleClose());\n\n            return () => {\n                document.removeEventListener('click', handleOutsideClick);\n                window.addEventListener('blur', () => handleClose());\n            };\n        }, [handleOutsideClick, boxRef, handleClose]);\n\n        /**\n         * This hook calculates the height\n         */\n        useEffect(() => {\n            const textArray: string[] = [];\n\n            activeList.forEach(({ list, groupName }) => {\n                list.forEach(({ text }) => textArray.push(text));\n                if (!groupName) {\n                    return;\n                }\n                textArray.push(groupName);\n            });\n\n            if (shouldAddInputToList && inputToListValue !== '') {\n                textArray.push(inputToListValue);\n            }\n\n            setHeight(calculateContentHeight(textArray));\n        }, [inputToListValue, activeList, placeholder, shouldAddInputToList]);\n\n        /**\n         * This hook calculates the width\n         */\n        useEffect(() => {\n            const input = document.getElementById('search_box_input');\n\n            const getInputWidth = () => {\n                if (input) {\n                    setWidth(input.offsetWidth);\n                }\n            };\n\n            if (input) {\n                new ResizeObserver(getInputWidth).observe(input);\n            }\n        }, []);\n\n        useEffect(() => {\n            if (selectedId) {\n                activeList.forEach(({ list }) => {\n                    const selectedItem = list.find(({ id }) => id === selectedId);\n                    if (selectedItem) {\n                        setValue(selectedItem.text);\n\n                        if (selectedItem.imageUrl) {\n                            setSelectedImage(\n                                <StyledSearchBoxItemImage\n                                    src={selectedItem.imageUrl}\n                                    $shouldShowRoundImage={shouldShowRoundImage}\n                                />,\n                            );\n                        }\n                    }\n                });\n            }\n        }, [activeList, selectedId, shouldShowRoundImage]);\n\n        /**\n         * This hook resets the value if the selectedId changes to undefined. This is an own useEffect because the value\n         * should not be reset if the list changes and the selectedId is still undefined.\n         */\n        useEffect(() => {\n            if (!selectedId) {\n                setValue('');\n            }\n        }, [selectedId]);\n\n        /**\n         * This function sets the items on focus if shouldShowContentOnEmptyInput\n         */\n        const handleFocus = useCallback(() => {\n            if (shouldShowContentOnEmptyInput) {\n                const newMatchingItems: ISearchBoxItems[] = [];\n\n                activeList.forEach(({ list, groupName }) => {\n                    const newList = searchList({ items: list, searchString: value });\n\n                    if (newList.length > 0) {\n                        newMatchingItems.push({\n                            groupName,\n                            list: newList,\n                        });\n                    }\n                });\n\n                if (newMatchingItems.length === 0 && shouldAddInputToList) {\n                    newMatchingItems.push({\n                        groupName: undefined,\n                        list: [],\n                    });\n                }\n\n                const filteredMatchingListItems = newMatchingItems.map(({ list, groupName }) => ({\n                    groupName,\n                    list: list.filter(\n                        (item) => !(newMatchingItems.length === 1 && item.text === value),\n                    ),\n                }));\n\n                setMatchingListsItems(filteredMatchingListItems);\n\n                if (filteredMatchingListItems.length !== 0) {\n                    handleOpen();\n                } else {\n                    handleClose();\n                }\n            }\n        }, [\n            activeList,\n            handleClose,\n            handleOpen,\n            shouldAddInputToList,\n            shouldShowContentOnEmptyInput,\n            value,\n        ]);\n\n        /**\n         * This function filters the lists by input\n         */\n\n        useEffect(() => {\n            const newMatchingItems: ISearchBoxItems[] = [];\n\n            activeList.forEach(({ list, groupName }) => {\n                const newList = searchList({ items: list, searchString: value });\n\n                if (newList.length > 0) {\n                    newMatchingItems.push({\n                        groupName,\n                        list: newList,\n                    });\n                }\n            });\n\n            if (newMatchingItems.length === 0 && shouldAddInputToList) {\n                newMatchingItems.push({\n                    groupName: undefined,\n                    list: [],\n                });\n            }\n\n            if (shouldAddInputToList && inputToListValue !== '') {\n                newMatchingItems.forEach(({ list }) => {\n                    list.forEach(({ text }) => {\n                        if (text.toLowerCase() === inputToListValue.toLowerCase()) {\n                            setInputToListValue('');\n                        }\n                    });\n                });\n            }\n        }, [\n            inputToListValue,\n            activeList,\n            shouldAddInputToList,\n            shouldShowContentOnEmptyInput,\n            value,\n        ]);\n\n        const handleClick = useCallback(() => {\n            if (isAnimating) {\n                handleClose();\n            } else {\n                handleOpen();\n            }\n        }, [handleClose, handleOpen, isAnimating]);\n\n        const rightElement = useMemo(() => {\n            if (!shouldShowToggleIcon) {\n                return undefined;\n            }\n\n            return (\n                <StyledSearchBoxIcon onClick={handleClick}>\n                    <Icon icons={['fa fa-chevron-down']} color={theme['006'] as string} />\n                </StyledSearchBoxIcon>\n            );\n        }, [handleClick, shouldShowToggleIcon, theme]);\n\n        /**\n         * This function handles changes of the input\n         */\n        const handleChange = useCallback(\n            (event: ChangeEvent<HTMLInputElement>) => {\n                const filteredLists: ISearchBoxItems[] = [];\n\n                activeList.forEach(({ list, groupName }) => {\n                    const newList = searchList({ items: list, searchString: event.target.value });\n\n                    if (newList.length > 0) {\n                        filteredLists.push({\n                            groupName,\n                            list: newList,\n                        });\n                    }\n                });\n\n                if (filteredLists.length === 0 && shouldAddInputToList) {\n                    filteredLists.push({\n                        groupName: undefined,\n                        list: [],\n                    });\n                }\n\n                setSelectedImage(undefined);\n\n                if (!shouldShowContentOnEmptyInput && !event.target.value) {\n                    setMatchingListsItems([]);\n                } else {\n                    setMatchingListsItems(filteredLists);\n                    if (filteredLists.length !== 0) {\n                        handleOpen();\n                    } else {\n                        handleClose();\n                    }\n                }\n\n                setValue(event.target.value);\n                setInputToListValue(event.target.value);\n\n                if (typeof onChange === 'function') {\n                    onChange(event);\n                }\n            },\n            [\n                activeList,\n                handleClose,\n                handleOpen,\n                onChange,\n                shouldAddInputToList,\n                shouldShowContentOnEmptyInput,\n            ],\n        );\n\n        /**\n         * This function handles the blur event of the input\n         */\n        const handleBlur = useCallback(\n            (event: FocusEvent<HTMLInputElement>) => {\n                if (typeof onBlur === 'function') {\n                    onBlur(event);\n                }\n            },\n            [onBlur],\n        );\n\n        /**\n         * This function handles the item selection\n         */\n        const handleSelect = useCallback(\n            (item: ISearchBoxItem) => {\n                const newItem = {\n                    ...item,\n                    text: item.text.replace('<b>', '').replace('</b>', '').replace('</b', ''),\n                };\n\n                setValue(newItem.text);\n                handleClose();\n\n                setSelectedImage(\n                    newItem.imageUrl ? (\n                        <StyledSearchBoxItemImage\n                            src={newItem.imageUrl}\n                            $shouldShowRoundImage={shouldShowRoundImage}\n                        />\n                    ) : undefined,\n                );\n\n                setMatchingListsItems([]);\n\n                if (typeof onSelect === 'function') {\n                    onSelect(newItem);\n                }\n            },\n            [handleClose, onSelect, shouldShowRoundImage],\n        );\n\n        const content = useMemo(() => {\n            const items: ReactElement[] = [];\n\n            matchingListsItems.forEach(({ groupName, list }, index) => {\n                if (hasMultipleGroups) {\n                    if (list.length <= 0) {\n                        return;\n                    }\n\n                    if (index !== 0) {\n                        items.push(<GroupName key={groupName} name={groupName ?? ''} />);\n                    }\n                }\n\n                list.forEach(({ id, text, imageUrl }) => {\n                    items.push(\n                        <SearchBoxItem\n                            key={`${id}_${groupName ?? ''}`}\n                            id={id}\n                            text={text}\n                            imageUrl={imageUrl}\n                            shouldShowRoundImage={shouldShowRoundImage}\n                            onSelect={handleSelect}\n                            groupName={groupName}\n                        />,\n                    );\n                });\n            });\n\n            if (shouldAddInputToList && inputToListValue !== '') {\n                items.push(\n                    <SearchBoxItem\n                        id=\"input-value\"\n                        onSelect={handleSelect}\n                        text={`<b>${inputToListValue}</b`}\n                    />,\n                );\n            }\n\n            return items;\n        }, [\n            matchingListsItems,\n            shouldAddInputToList,\n            inputToListValue,\n            hasMultipleGroups,\n            shouldShowRoundImage,\n            handleSelect,\n        ]);\n\n        useEffect(() => {\n            const handleKeyDown = (e: KeyboardEvent) => {\n                if (!isAnimating) {\n                    return;\n                }\n\n                if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n                    e.preventDefault();\n                    const children = contentRef.current?.children;\n\n                    if (!children) {\n                        return;\n                    }\n\n                    const childrenArray = Array.from(children);\n\n                    const newChildren = childrenArray.find((child) =>\n                        child.id.startsWith('searchbox-content__'),\n                    )?.children;\n\n                    if (newChildren && newChildren.length > 0) {\n                        const filteredChildren = Array.from(newChildren).filter(\n                            (child) => (child as HTMLElement).dataset.isgroupname !== 'true',\n                        );\n                        setFilteredChildrenArray(filteredChildren);\n\n                        const newIndex =\n                            focusedIndex !== null\n                                ? (focusedIndex +\n                                      (e.key === 'ArrowUp' ? -1 : 1) +\n                                      filteredChildren.length) %\n                                  filteredChildren.length\n                                : 0;\n\n                        if (focusedIndex !== null) {\n                            const prevElement = filteredChildren[focusedIndex] as HTMLDivElement;\n                            prevElement.tabIndex = -1;\n                        }\n\n                        setFocusedIndex(newIndex);\n\n                        const newElement = filteredChildren[newIndex] as HTMLDivElement;\n                        newElement.tabIndex = 0;\n                        newElement.focus();\n                    }\n                } else if (e.key === 'Enter' && focusedIndex !== null) {\n                    if (filteredChildrenArray) {\n                        const element = filteredChildrenArray[focusedIndex];\n\n                        if (!element) {\n                            return;\n                        }\n\n                        const { id, textContent } = element;\n\n                        let imageUrl: string | undefined;\n\n                        // Just Ignore, it works\n                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                        // @ts-ignore\n                        if (element.children[0]?.attributes.src) {\n                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                            // @ts-ignore\n                            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n                            imageUrl = element.children[0]?.attributes.src.nodeValue as string;\n                        }\n\n                        handleSelect({\n                            id: id.replace('search-box-item__', ''),\n                            text: textContent ?? '',\n                            imageUrl,\n                        });\n                    }\n                }\n            };\n\n            document.addEventListener('keydown', handleKeyDown);\n\n            return () => {\n                document.removeEventListener('keydown', handleKeyDown);\n            };\n        }, [filteredChildrenArray, focusedIndex, handleSelect, isAnimating]);\n\n        const handleKeyPress = useCallback((event: KeyboardEvent) => {\n            if (event.keyCode === 27) {\n                setMatchingListsItems([]);\n            }\n        }, []);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                clear: () => setValue(''),\n            }),\n            [],\n        );\n\n        useEffect(() => {\n            document.addEventListener('keydown', handleKeyPress);\n\n            return () => {\n                document.addEventListener('keydown', handleKeyPress);\n            };\n        }, [handleKeyPress]);\n\n        useEffect(() => {\n            if (!newContainer) {\n                return;\n            }\n\n            setPortal(() =>\n                createPortal(\n                    <AnimatePresence initial={false}>\n                        {isAnimating && (\n                            <SearchBoxBody\n                                filterbuttons={filterbuttons}\n                                selectedGroups={groups}\n                                width={width}\n                                coordinates={internalCoordinates}\n                                browser={browser?.name}\n                                height={height}\n                                ref={contentRef}\n                                onGroupSelect={handleFilterButtonsGroupSelect}\n                            >\n                                {content}\n                            </SearchBoxBody>\n                        )}\n                    </AnimatePresence>,\n                    newContainer,\n                ),\n            );\n        }, [\n            browser?.name,\n            newContainer,\n            content,\n            filterbuttons,\n            groups,\n            height,\n            internalCoordinates,\n            isAnimating,\n            width,\n        ]);\n\n        return useMemo(\n            () => (\n                <StyledSearchBox ref={boxRef}>\n                    <div id=\"search_box_input\">\n                        <Input\n                            ref={inputRef}\n                            onChange={handleChange}\n                            onBlur={handleBlur}\n                            onFocus={handleFocus}\n                            placeholder={placeholder}\n                            onKeyDown={onKeyDown}\n                            leftElement={selectedImage}\n                            rightElement={rightElement}\n                            value={value}\n                        />\n                    </div>\n                    {portal}\n                </StyledSearchBox>\n            ),\n            [\n                handleBlur,\n                handleChange,\n                handleFocus,\n                onKeyDown,\n                placeholder,\n                portal,\n                rightElement,\n                selectedImage,\n                value,\n            ],\n        );\n    },\n);\n\nSearchBox.displayName = 'SearchBox';\n\nexport default SearchBox;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SearchBox.js","names":["getDevice","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","createPortal","useTheme","calculateContentHeight","searchList","Icon","Input","GroupName","SearchBoxBody","SearchBoxItem","StyledSearchBoxItemImage","StyledSearchBox","StyledSearchBoxIcon","SearchBox","_ref","ref","placeholder","lists","onChange","onBlur","onSelect","onKeyDown","selectedId","container","shouldShowRoundImage","shouldShowContentOnEmptyInput","shouldAddInputToList","shouldShowToggleIcon","matchingListsItems","setMatchingListsItems","selectedImage","setSelectedImage","value","setValue","isAnimating","setIsAnimating","height","setHeight","width","setWidth","focusedIndex","setFocusedIndex","hasMultipleGroups","setHasMultipleGroups","length","filteredChildrenArray","setFilteredChildrenArray","inputToListValue","setInputToListValue","groups","setGroups","portal","setPortal","internalCoordinates","setInternalCoordinates","x","y","newContainer","setNewContainer","boxRef","contentRef","inputRef","theme","browser","current","el","element","closest","Element","getBoundingClientRect","filterbuttons","items","forEach","_ref2","groupName","push","id","text","activeList","newLists","list","includes","newMatchingItems","_ref3","newList","searchString","undefined","filteredMatchingListItems","map","_ref4","filter","item","handleOpen","bodyHeight","handleClose","handleFilterButtonsGroupSelect","keys","handleOutsideClick","event","contains","target","document","addEventListener","window","removeEventListener","textArray","_ref5","_ref6","input","getElementById","getInputWidth","offsetWidth","ResizeObserver","observe","_ref7","selectedItem","find","_ref8","imageUrl","createElement","src","$shouldShowRoundImage","handleFocus","_ref9","_ref10","_ref11","_ref12","_ref13","toLowerCase","handleClick","rightElement","onClick","icons","color","handleChange","filteredLists","_ref14","handleBlur","handleSelect","newItem","replace","content","_ref15","index","key","name","_ref16","handleKeyDown","e","preventDefault","children","childrenArray","Array","from","newChildren","child","startsWith","filteredChildren","dataset","isgroupname","newIndex","prevElement","tabIndex","newElement","focus","textContent","attributes","nodeValue","handleKeyPress","keyCode","clear","initial","selectedGroups","coordinates","onGroupSelect","onFocus","leftElement","displayName"],"sources":["../../../../src/components/search-box/SearchBox.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    FocusEvent,\n    FocusEventHandler,\n    forwardRef,\n    KeyboardEventHandler,\n    ReactElement,\n    ReactPortal,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useTheme } from 'styled-components';\nimport type { IFilterButtonItem } from '../../types/filterButtons';\nimport type { ISearchBoxItem, ISearchBoxItems } from '../../types/searchBox';\nimport { calculateContentHeight } from '../../utils/calculate';\nimport { searchList } from '../../utils/searchBox';\nimport type { ContextMenuCoordinates } from '../context-menu/ContextMenu';\nimport Icon from '../icon/Icon';\nimport Input from '../input/Input';\nimport GroupName from './group-name/GroupName';\nimport SearchBoxBody from './search-box-body/SearchBoxBody';\nimport SearchBoxItem from './search-box-item/SearchBoxItem';\nimport { StyledSearchBoxItemImage } from './search-box-item/SearchBoxItem.styles';\nimport { StyledSearchBox, StyledSearchBoxIcon } from './SearchBox.styles';\n\nexport type SearchBoxRef = {\n    clear: VoidFunction;\n};\n\nexport type SearchBoxProps = {\n    /**\n     * The element where the content of the `ComboBox` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * List of groups with items that can be searched. It is possible to give only one list; if multiple lists are provided, the 'group name' parameter becomes mandatory.\n     */\n    lists: ISearchBoxItems[];\n    /**\n     * The placeholder that should be displayed.\n     */\n    placeholder?: string;\n    /**\n     * Function to be executed when the input lost focus.\n     */\n    onBlur?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when the input is changed.\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when a letter is pressed\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when an item is selected.\n     */\n    onSelect?: (item: ISearchBoxItem) => void;\n    /**\n     * Control the selected item. If you use this prop, make sure to update it when the user selects an item.\n     */\n    selectedId?: string;\n    /**\n     * If true, the value in the Input is displayed in the list.\n     */\n    shouldAddInputToList: boolean;\n    /**\n     * Whether the full list of items should be displayed if the input is empty.\n     */\n    shouldShowContentOnEmptyInput?: boolean;\n    /**\n     * If true, the images of the items are displayed in a round shape.\n     */\n    shouldShowRoundImage?: boolean;\n    /**\n     * Whether the icon to open and close the list should be displayed.\n     */\n    shouldShowToggleIcon?: boolean;\n};\n\nconst SearchBox: FC<SearchBoxProps> = forwardRef<SearchBoxRef, SearchBoxProps>(\n    (\n        {\n            placeholder,\n            lists,\n            onChange,\n            onBlur,\n            onSelect,\n            onKeyDown,\n            selectedId,\n            container,\n            shouldShowRoundImage,\n            shouldShowContentOnEmptyInput = true,\n            shouldAddInputToList = true,\n            shouldShowToggleIcon = false,\n        },\n        ref,\n    ) => {\n        const [matchingListsItems, setMatchingListsItems] = useState<ISearchBoxItems[]>(lists);\n        const [selectedImage, setSelectedImage] = useState<ReactElement>();\n        const [value, setValue] = useState('');\n        const [isAnimating, setIsAnimating] = useState(false);\n        const [height, setHeight] = useState<number>(0);\n        const [width, setWidth] = useState(0);\n        const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n        const [hasMultipleGroups, setHasMultipleGroups] = useState<boolean>(lists.length > 1);\n        const [filteredChildrenArray, setFilteredChildrenArray] = useState<Element[]>();\n        const [inputToListValue, setInputToListValue] = useState<string>('');\n        const [groups, setGroups] = useState<string[]>(['all']);\n        const [portal, setPortal] = useState<ReactPortal>();\n        const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n            x: 0,\n            y: 0,\n        });\n        const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\n\n        const boxRef = useRef<HTMLDivElement>(null);\n        const contentRef = useRef<HTMLDivElement>(null);\n        const inputRef = useRef<HTMLInputElement | null>(null);\n\n        const theme = useTheme();\n\n        const { browser } = getDevice();\n\n        useEffect(() => {\n            if (boxRef.current && !container) {\n                const el = boxRef.current as HTMLElement;\n\n                const element = el.closest('.dialog-inner') || el.closest('body');\n\n                setNewContainer(element);\n            }\n        }, [container]);\n\n        useEffect(() => {\n            if(container instanceof Element){\n                setNewContainer(container)\n            }\n        }, [container]);\n\n        useEffect(() => {\n            if (boxRef.current) {\n                const { x, y } = boxRef.current.getBoundingClientRect();\n\n                setInternalCoordinates({\n                    x,\n                    y,\n                });\n            }\n        }, []);\n\n        /**\n         * Checks if Lists are smaller then 1\n         */\n        useEffect(() => {\n            setHasMultipleGroups(lists.length > 1);\n        }, [lists]);\n\n        const filterbuttons = useMemo(() => {\n            const items: IFilterButtonItem[] = [];\n\n            if (lists.length <= 1) {\n                return items;\n            }\n\n            lists.forEach(({ groupName }) => {\n                if (groupName) {\n                    items.push({\n                        id: groupName,\n                        text: groupName,\n                    });\n                }\n            });\n\n            return items;\n        }, [lists]);\n\n        /**\n         * Filters the lists by the FilterButtons\n         */\n        const activeList = useMemo(() => {\n            let newLists: ISearchBoxItems[] = [];\n\n            if (groups[0] === 'all') {\n                newLists = lists;\n            } else {\n                lists.forEach((list) => {\n                    if (list.groupName && groups.includes(list.groupName)) {\n                        newLists.push(list);\n                    }\n                });\n            }\n\n            const newMatchingItems: ISearchBoxItems[] = [];\n\n            newLists.forEach(({ list, groupName }) => {\n                const newList = searchList({ items: list, searchString: value });\n\n                if (newList.length > 0) {\n                    newMatchingItems.push({\n                        groupName,\n                        list: newList,\n                    });\n                }\n            });\n\n            if (newMatchingItems.length === 0 && shouldAddInputToList) {\n                newMatchingItems.push({\n                    groupName: undefined,\n                    list: [],\n                });\n            }\n\n            const filteredMatchingListItems = newMatchingItems.map(({ list, groupName }) => ({\n                groupName,\n                list: list.filter(\n                    (item) => !(newMatchingItems.length === 1 && item.text === value),\n                ),\n            }));\n\n            setMatchingListsItems(filteredMatchingListItems);\n\n            return newLists;\n        }, [groups, lists, shouldAddInputToList, value]);\n\n        const handleOpen = useCallback(() => {\n            if (boxRef.current) {\n                const { x, y, height: bodyHeight } = boxRef.current.getBoundingClientRect();\n\n                setInternalCoordinates({\n                    x,\n                    y: y + bodyHeight,\n                });\n\n                setIsAnimating(true);\n            }\n        }, []);\n\n        const handleClose = useCallback(() => {\n            setIsAnimating(false);\n        }, []);\n\n        const handleFilterButtonsGroupSelect = (keys: string[]) => {\n            setGroups(keys.length === 0 ? ['all'] : keys);\n        };\n\n        /**\n         * This function closes the list of items\n         */\n        const handleOutsideClick = useCallback(\n            (event: MouseEvent) => {\n                if (\n                    boxRef.current &&\n                    !boxRef.current.contains(event.target as Node) &&\n                    contentRef.current &&\n                    !contentRef.current.contains(event.target as Node)\n                ) {\n                    handleClose();\n                }\n            },\n            [handleClose],\n        );\n\n        /**\n         * This hook listens for clicks\n         */\n        useEffect(() => {\n            document.addEventListener('click', handleOutsideClick);\n            window.addEventListener('blur', () => handleClose());\n\n            return () => {\n                document.removeEventListener('click', handleOutsideClick);\n                window.addEventListener('blur', () => handleClose());\n            };\n        }, [handleOutsideClick, boxRef, handleClose]);\n\n        /**\n         * This hook calculates the height\n         */\n        useEffect(() => {\n            const textArray: string[] = [];\n\n            activeList.forEach(({ list, groupName }) => {\n                list.forEach(({ text }) => textArray.push(text));\n                if (!groupName) {\n                    return;\n                }\n                textArray.push(groupName);\n            });\n\n            if (shouldAddInputToList && inputToListValue !== '') {\n                textArray.push(inputToListValue);\n            }\n\n            setHeight(calculateContentHeight(textArray));\n        }, [inputToListValue, activeList, placeholder, shouldAddInputToList]);\n\n        /**\n         * This hook calculates the width\n         */\n        useEffect(() => {\n            const input = document.getElementById('search_box_input');\n\n            const getInputWidth = () => {\n                if (input) {\n                    setWidth(input.offsetWidth);\n                }\n            };\n\n            if (input) {\n                new ResizeObserver(getInputWidth).observe(input);\n            }\n        }, []);\n\n        useEffect(() => {\n            if (selectedId) {\n                activeList.forEach(({ list }) => {\n                    const selectedItem = list.find(({ id }) => id === selectedId);\n                    if (selectedItem) {\n                        setValue(selectedItem.text);\n\n                        if (selectedItem.imageUrl) {\n                            setSelectedImage(\n                                <StyledSearchBoxItemImage\n                                    src={selectedItem.imageUrl}\n                                    $shouldShowRoundImage={shouldShowRoundImage}\n                                />,\n                            );\n                        }\n                    }\n                });\n            }\n        }, [activeList, selectedId, shouldShowRoundImage]);\n\n        /**\n         * This hook resets the value if the selectedId changes to undefined. This is an own useEffect because the value\n         * should not be reset if the list changes and the selectedId is still undefined.\n         */\n        useEffect(() => {\n            if (!selectedId) {\n                setValue('');\n            }\n        }, [selectedId]);\n\n        /**\n         * This function sets the items on focus if shouldShowContentOnEmptyInput\n         */\n        const handleFocus = useCallback(() => {\n            if (shouldShowContentOnEmptyInput) {\n                const newMatchingItems: ISearchBoxItems[] = [];\n\n                activeList.forEach(({ list, groupName }) => {\n                    const newList = searchList({ items: list, searchString: value });\n\n                    if (newList.length > 0) {\n                        newMatchingItems.push({\n                            groupName,\n                            list: newList,\n                        });\n                    }\n                });\n\n                if (newMatchingItems.length === 0 && shouldAddInputToList) {\n                    newMatchingItems.push({\n                        groupName: undefined,\n                        list: [],\n                    });\n                }\n\n                const filteredMatchingListItems = newMatchingItems.map(({ list, groupName }) => ({\n                    groupName,\n                    list: list.filter(\n                        (item) => !(newMatchingItems.length === 1 && item.text === value),\n                    ),\n                }));\n\n                setMatchingListsItems(filteredMatchingListItems);\n\n                if (filteredMatchingListItems.length !== 0) {\n                    handleOpen();\n                } else {\n                    handleClose();\n                }\n            }\n        }, [\n            activeList,\n            handleClose,\n            handleOpen,\n            shouldAddInputToList,\n            shouldShowContentOnEmptyInput,\n            value,\n        ]);\n\n        /**\n         * This function filters the lists by input\n         */\n\n        useEffect(() => {\n            const newMatchingItems: ISearchBoxItems[] = [];\n\n            activeList.forEach(({ list, groupName }) => {\n                const newList = searchList({ items: list, searchString: value });\n\n                if (newList.length > 0) {\n                    newMatchingItems.push({\n                        groupName,\n                        list: newList,\n                    });\n                }\n            });\n\n            if (newMatchingItems.length === 0 && shouldAddInputToList) {\n                newMatchingItems.push({\n                    groupName: undefined,\n                    list: [],\n                });\n            }\n\n            if (shouldAddInputToList && inputToListValue !== '') {\n                newMatchingItems.forEach(({ list }) => {\n                    list.forEach(({ text }) => {\n                        if (text.toLowerCase() === inputToListValue.toLowerCase()) {\n                            setInputToListValue('');\n                        }\n                    });\n                });\n            }\n        }, [\n            inputToListValue,\n            activeList,\n            shouldAddInputToList,\n            shouldShowContentOnEmptyInput,\n            value,\n        ]);\n\n        const handleClick = useCallback(() => {\n            if (isAnimating) {\n                handleClose();\n            } else {\n                handleOpen();\n            }\n        }, [handleClose, handleOpen, isAnimating]);\n\n        const rightElement = useMemo(() => {\n            if (!shouldShowToggleIcon) {\n                return undefined;\n            }\n\n            return (\n                <StyledSearchBoxIcon onClick={handleClick}>\n                    <Icon icons={['fa fa-chevron-down']} color={theme['006'] as string} />\n                </StyledSearchBoxIcon>\n            );\n        }, [handleClick, shouldShowToggleIcon, theme]);\n\n        /**\n         * This function handles changes of the input\n         */\n        const handleChange = useCallback(\n            (event: ChangeEvent<HTMLInputElement>) => {\n                const filteredLists: ISearchBoxItems[] = [];\n\n                activeList.forEach(({ list, groupName }) => {\n                    const newList = searchList({ items: list, searchString: event.target.value });\n\n                    if (newList.length > 0) {\n                        filteredLists.push({\n                            groupName,\n                            list: newList,\n                        });\n                    }\n                });\n\n                if (filteredLists.length === 0 && shouldAddInputToList) {\n                    filteredLists.push({\n                        groupName: undefined,\n                        list: [],\n                    });\n                }\n\n                setSelectedImage(undefined);\n\n                if (!shouldShowContentOnEmptyInput && !event.target.value) {\n                    setMatchingListsItems([]);\n                } else {\n                    setMatchingListsItems(filteredLists);\n                    if (filteredLists.length !== 0) {\n                        handleOpen();\n                    } else {\n                        handleClose();\n                    }\n                }\n\n                setValue(event.target.value);\n                setInputToListValue(event.target.value);\n\n                if (typeof onChange === 'function') {\n                    onChange(event);\n                }\n            },\n            [\n                activeList,\n                handleClose,\n                handleOpen,\n                onChange,\n                shouldAddInputToList,\n                shouldShowContentOnEmptyInput,\n            ],\n        );\n\n        /**\n         * This function handles the blur event of the input\n         */\n        const handleBlur = useCallback(\n            (event: FocusEvent<HTMLInputElement>) => {\n                if (typeof onBlur === 'function') {\n                    onBlur(event);\n                }\n            },\n            [onBlur],\n        );\n\n        /**\n         * This function handles the item selection\n         */\n        const handleSelect = useCallback(\n            (item: ISearchBoxItem) => {\n                const newItem = {\n                    ...item,\n                    text: item.text.replace('<b>', '').replace('</b>', '').replace('</b', ''),\n                };\n\n                setValue(newItem.text);\n                handleClose();\n\n                setSelectedImage(\n                    newItem.imageUrl ? (\n                        <StyledSearchBoxItemImage\n                            src={newItem.imageUrl}\n                            $shouldShowRoundImage={shouldShowRoundImage}\n                        />\n                    ) : undefined,\n                );\n\n                setMatchingListsItems([]);\n\n                if (typeof onSelect === 'function') {\n                    onSelect(newItem);\n                }\n            },\n            [handleClose, onSelect, shouldShowRoundImage],\n        );\n\n        const content = useMemo(() => {\n            const items: ReactElement[] = [];\n\n            matchingListsItems.forEach(({ groupName, list }, index) => {\n                if (hasMultipleGroups) {\n                    if (list.length <= 0) {\n                        return;\n                    }\n\n                    if (index !== 0) {\n                        items.push(<GroupName key={groupName} name={groupName ?? ''} />);\n                    }\n                }\n\n                list.forEach(({ id, text, imageUrl }) => {\n                    items.push(\n                        <SearchBoxItem\n                            key={`${id}_${groupName ?? ''}`}\n                            id={id}\n                            text={text}\n                            imageUrl={imageUrl}\n                            shouldShowRoundImage={shouldShowRoundImage}\n                            onSelect={handleSelect}\n                            groupName={groupName}\n                        />,\n                    );\n                });\n            });\n\n            if (shouldAddInputToList && inputToListValue !== '') {\n                items.push(\n                    <SearchBoxItem\n                        id=\"input-value\"\n                        onSelect={handleSelect}\n                        text={`<b>${inputToListValue}</b`}\n                    />,\n                );\n            }\n\n            return items;\n        }, [\n            matchingListsItems,\n            shouldAddInputToList,\n            inputToListValue,\n            hasMultipleGroups,\n            shouldShowRoundImage,\n            handleSelect,\n        ]);\n\n        useEffect(() => {\n            const handleKeyDown = (e: KeyboardEvent) => {\n                if (!isAnimating) {\n                    return;\n                }\n\n                if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n                    e.preventDefault();\n                    const children = contentRef.current?.children;\n\n                    if (!children) {\n                        return;\n                    }\n\n                    const childrenArray = Array.from(children);\n\n                    const newChildren = childrenArray.find((child) =>\n                        child.id.startsWith('searchbox-content__'),\n                    )?.children;\n\n                    if (newChildren && newChildren.length > 0) {\n                        const filteredChildren = Array.from(newChildren).filter(\n                            (child) => (child as HTMLElement).dataset.isgroupname !== 'true',\n                        );\n                        setFilteredChildrenArray(filteredChildren);\n\n                        const newIndex =\n                            focusedIndex !== null\n                                ? (focusedIndex +\n                                      (e.key === 'ArrowUp' ? -1 : 1) +\n                                      filteredChildren.length) %\n                                  filteredChildren.length\n                                : 0;\n\n                        if (focusedIndex !== null) {\n                            const prevElement = filteredChildren[focusedIndex] as HTMLDivElement;\n                            prevElement.tabIndex = -1;\n                        }\n\n                        setFocusedIndex(newIndex);\n\n                        const newElement = filteredChildren[newIndex] as HTMLDivElement;\n                        newElement.tabIndex = 0;\n                        newElement.focus();\n                    }\n                } else if (e.key === 'Enter' && focusedIndex !== null) {\n                    if (filteredChildrenArray) {\n                        const element = filteredChildrenArray[focusedIndex];\n\n                        if (!element) {\n                            return;\n                        }\n\n                        const { id, textContent } = element;\n\n                        let imageUrl: string | undefined;\n\n                        // Just Ignore, it works\n                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                        // @ts-ignore\n                        if (element.children[0]?.attributes.src) {\n                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                            // @ts-ignore\n                            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n                            imageUrl = element.children[0]?.attributes.src.nodeValue as string;\n                        }\n\n                        handleSelect({\n                            id: id.replace('search-box-item__', ''),\n                            text: textContent ?? '',\n                            imageUrl,\n                        });\n                    }\n                }\n            };\n\n            document.addEventListener('keydown', handleKeyDown);\n\n            return () => {\n                document.removeEventListener('keydown', handleKeyDown);\n            };\n        }, [filteredChildrenArray, focusedIndex, handleSelect, isAnimating]);\n\n        const handleKeyPress = useCallback((event: KeyboardEvent) => {\n            if (event.keyCode === 27) {\n                setMatchingListsItems([]);\n            }\n        }, []);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                clear: () => setValue(''),\n            }),\n            [],\n        );\n\n        useEffect(() => {\n            document.addEventListener('keydown', handleKeyPress);\n\n            return () => {\n                document.addEventListener('keydown', handleKeyPress);\n            };\n        }, [handleKeyPress]);\n\n        useEffect(() => {\n            if (!newContainer) {\n                return;\n            }\n\n            setPortal(() =>\n                createPortal(\n                    <AnimatePresence initial={false}>\n                        {isAnimating && (\n                            <SearchBoxBody\n                                filterbuttons={filterbuttons}\n                                selectedGroups={groups}\n                                width={width}\n                                coordinates={internalCoordinates}\n                                browser={browser?.name}\n                                height={height}\n                                ref={contentRef}\n                                onGroupSelect={handleFilterButtonsGroupSelect}\n                            >\n                                {content}\n                            </SearchBoxBody>\n                        )}\n                    </AnimatePresence>,\n                    newContainer,\n                ),\n            );\n        }, [\n            browser?.name,\n            newContainer,\n            content,\n            filterbuttons,\n            groups,\n            height,\n            internalCoordinates,\n            isAnimating,\n            width,\n        ]);\n\n        return useMemo(\n            () => (\n                <StyledSearchBox ref={boxRef}>\n                    <div id=\"search_box_input\">\n                        <Input\n                            ref={inputRef}\n                            onChange={handleChange}\n                            onBlur={handleBlur}\n                            onFocus={handleFocus}\n                            placeholder={placeholder}\n                            onKeyDown={onKeyDown}\n                            leftElement={selectedImage}\n                            rightElement={rightElement}\n                            value={value}\n                        />\n                    </div>\n                    {portal}\n                </StyledSearchBox>\n            ),\n            [\n                handleBlur,\n                handleChange,\n                handleFocus,\n                onKeyDown,\n                placeholder,\n                portal,\n                rightElement,\n                selectedImage,\n                value,\n            ],\n        );\n    },\n);\n\nSearchBox.displayName = 'SearchBox';\n\nexport default SearchBox;\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,YAAY;AACtC,SAASC,eAAe,QAAQ,eAAe;AAC/C,OAAOC,KAAK,IAMRC,UAAU,EAIVC,WAAW,EACXC,SAAS,EACTC,mBAAmB,EACnBC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACL,OAAO;AACd,SAASC,YAAY,QAAQ,WAAW;AACxC,SAASC,QAAQ,QAAQ,mBAAmB;AAG5C,SAASC,sBAAsB,QAAQ,uBAAuB;AAC9D,SAASC,UAAU,QAAQ,uBAAuB;AAElD,OAAOC,IAAI,MAAM,cAAc;AAC/B,OAAOC,KAAK,MAAM,gBAAgB;AAClC,OAAOC,SAAS,MAAM,wBAAwB;AAC9C,OAAOC,aAAa,MAAM,iCAAiC;AAC3D,OAAOC,aAAa,MAAM,iCAAiC;AAC3D,SAASC,wBAAwB,QAAQ,wCAAwC;AACjF,SAASC,eAAe,EAAEC,mBAAmB,QAAQ,oBAAoB;AAyDzE,MAAMC,SAA6B,gBAAGnB,UAAU,CAC5C,CAAAoB,IAAA,EAeIC,GAAG,KACF;EAAA,IAfD;IACIC,WAAW;IACXC,KAAK;IACLC,QAAQ;IACRC,MAAM;IACNC,QAAQ;IACRC,SAAS;IACTC,UAAU;IACVC,SAAS;IACTC,oBAAoB;IACpBC,6BAA6B,GAAG,IAAI;IACpCC,oBAAoB,GAAG,IAAI;IAC3BC,oBAAoB,GAAG;EAC3B,CAAC,GAAAb,IAAA;EAGD,MAAM,CAACc,kBAAkB,EAAEC,qBAAqB,CAAC,GAAG7B,QAAQ,CAAoBiB,KAAK,CAAC;EACtF,MAAM,CAACa,aAAa,EAAEC,gBAAgB,CAAC,GAAG/B,QAAQ,CAAe,CAAC;EAClE,MAAM,CAACgC,KAAK,EAAEC,QAAQ,CAAC,GAAGjC,QAAQ,CAAC,EAAE,CAAC;EACtC,MAAM,CAACkC,WAAW,EAAEC,cAAc,CAAC,GAAGnC,QAAQ,CAAC,KAAK,CAAC;EACrD,MAAM,CAACoC,MAAM,EAAEC,SAAS,CAAC,GAAGrC,QAAQ,CAAS,CAAC,CAAC;EAC/C,MAAM,CAACsC,KAAK,EAAEC,QAAQ,CAAC,GAAGvC,QAAQ,CAAC,CAAC,CAAC;EACrC,MAAM,CAACwC,YAAY,EAAEC,eAAe,CAAC,GAAGzC,QAAQ,CAAgB,IAAI,CAAC;EACrE,MAAM,CAAC0C,iBAAiB,EAAEC,oBAAoB,CAAC,GAAG3C,QAAQ,CAAUiB,KAAK,CAAC2B,MAAM,GAAG,CAAC,CAAC;EACrF,MAAM,CAACC,qBAAqB,EAAEC,wBAAwB,CAAC,GAAG9C,QAAQ,CAAY,CAAC;EAC/E,MAAM,CAAC+C,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGhD,QAAQ,CAAS,EAAE,CAAC;EACpE,MAAM,CAACiD,MAAM,EAAEC,SAAS,CAAC,GAAGlD,QAAQ,CAAW,CAAC,KAAK,CAAC,CAAC;EACvD,MAAM,CAACmD,MAAM,EAAEC,SAAS,CAAC,GAAGpD,QAAQ,CAAc,CAAC;EACnD,MAAM,CAACqD,mBAAmB,EAAEC,sBAAsB,CAAC,GAAGtD,QAAQ,CAAyB;IACnFuD,CAAC,EAAE,CAAC;IACJC,CAAC,EAAE;EACP,CAAC,CAAC;EACF,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAG1D,QAAQ,CAAiBuB,SAAS,IAAI,IAAI,CAAC;EAEnF,MAAMoC,MAAM,GAAG5D,MAAM,CAAiB,IAAI,CAAC;EAC3C,MAAM6D,UAAU,GAAG7D,MAAM,CAAiB,IAAI,CAAC;EAC/C,MAAM8D,QAAQ,GAAG9D,MAAM,CAA0B,IAAI,CAAC;EAEtD,MAAM+D,KAAK,GAAG5D,QAAQ,CAAC,CAAC;EAExB,MAAM;IAAE6D;EAAQ,CAAC,GAAGxE,SAAS,CAAC,CAAC;EAE/BK,SAAS,CAAC,MAAM;IACZ,IAAI+D,MAAM,CAACK,OAAO,IAAI,CAACzC,SAAS,EAAE;MAC9B,MAAM0C,EAAE,GAAGN,MAAM,CAACK,OAAsB;MAExC,MAAME,OAAO,GAAGD,EAAE,CAACE,OAAO,CAAC,eAAe,CAAC,IAAIF,EAAE,CAACE,OAAO,CAAC,MAAM,CAAC;MAEjET,eAAe,CAACQ,OAAO,CAAC;IAC5B;EACJ,CAAC,EAAE,CAAC3C,SAAS,CAAC,CAAC;EAEf3B,SAAS,CAAC,MAAM;IACZ,IAAG2B,SAAS,YAAY6C,OAAO,EAAC;MAC5BV,eAAe,CAACnC,SAAS,CAAC;IAC9B;EACJ,CAAC,EAAE,CAACA,SAAS,CAAC,CAAC;EAEf3B,SAAS,CAAC,MAAM;IACZ,IAAI+D,MAAM,CAACK,OAAO,EAAE;MAChB,MAAM;QAAET,CAAC;QAAEC;MAAE,CAAC,GAAGG,MAAM,CAACK,OAAO,CAACK,qBAAqB,CAAC,CAAC;MAEvDf,sBAAsB,CAAC;QACnBC,CAAC;QACDC;MACJ,CAAC,CAAC;IACN;EACJ,CAAC,EAAE,EAAE,CAAC;;EAEN;AACR;AACA;EACQ5D,SAAS,CAAC,MAAM;IACZ+C,oBAAoB,CAAC1B,KAAK,CAAC2B,MAAM,GAAG,CAAC,CAAC;EAC1C,CAAC,EAAE,CAAC3B,KAAK,CAAC,CAAC;EAEX,MAAMqD,aAAa,GAAGxE,OAAO,CAAC,MAAM;IAChC,MAAMyE,KAA0B,GAAG,EAAE;IAErC,IAAItD,KAAK,CAAC2B,MAAM,IAAI,CAAC,EAAE;MACnB,OAAO2B,KAAK;IAChB;IAEAtD,KAAK,CAACuD,OAAO,CAACC,KAAA,IAAmB;MAAA,IAAlB;QAAEC;MAAU,CAAC,GAAAD,KAAA;MACxB,IAAIC,SAAS,EAAE;QACXH,KAAK,CAACI,IAAI,CAAC;UACPC,EAAE,EAAEF,SAAS;UACbG,IAAI,EAAEH;QACV,CAAC,CAAC;MACN;IACJ,CAAC,CAAC;IAEF,OAAOH,KAAK;EAChB,CAAC,EAAE,CAACtD,KAAK,CAAC,CAAC;;EAEX;AACR;AACA;EACQ,MAAM6D,UAAU,GAAGhF,OAAO,CAAC,MAAM;IAC7B,IAAIiF,QAA2B,GAAG,EAAE;IAEpC,IAAI9B,MAAM,CAAC,CAAC,CAAC,KAAK,KAAK,EAAE;MACrB8B,QAAQ,GAAG9D,KAAK;IACpB,CAAC,MAAM;MACHA,KAAK,CAACuD,OAAO,CAAEQ,IAAI,IAAK;QACpB,IAAIA,IAAI,CAACN,SAAS,IAAIzB,MAAM,CAACgC,QAAQ,CAACD,IAAI,CAACN,SAAS,CAAC,EAAE;UACnDK,QAAQ,CAACJ,IAAI,CAACK,IAAI,CAAC;QACvB;MACJ,CAAC,CAAC;IACN;IAEA,MAAME,gBAAmC,GAAG,EAAE;IAE9CH,QAAQ,CAACP,OAAO,CAACW,KAAA,IAAyB;MAAA,IAAxB;QAAEH,IAAI;QAAEN;MAAU,CAAC,GAAAS,KAAA;MACjC,MAAMC,OAAO,GAAGhF,UAAU,CAAC;QAAEmE,KAAK,EAAES,IAAI;QAAEK,YAAY,EAAErD;MAAM,CAAC,CAAC;MAEhE,IAAIoD,OAAO,CAACxC,MAAM,GAAG,CAAC,EAAE;QACpBsC,gBAAgB,CAACP,IAAI,CAAC;UAClBD,SAAS;UACTM,IAAI,EAAEI;QACV,CAAC,CAAC;MACN;IACJ,CAAC,CAAC;IAEF,IAAIF,gBAAgB,CAACtC,MAAM,KAAK,CAAC,IAAIlB,oBAAoB,EAAE;MACvDwD,gBAAgB,CAACP,IAAI,CAAC;QAClBD,SAAS,EAAEY,SAAS;QACpBN,IAAI,EAAE;MACV,CAAC,CAAC;IACN;IAEA,MAAMO,yBAAyB,GAAGL,gBAAgB,CAACM,GAAG,CAACC,KAAA;MAAA,IAAC;QAAET,IAAI;QAAEN;MAAU,CAAC,GAAAe,KAAA;MAAA,OAAM;QAC7Ef,SAAS;QACTM,IAAI,EAAEA,IAAI,CAACU,MAAM,CACZC,IAAI,IAAK,EAAET,gBAAgB,CAACtC,MAAM,KAAK,CAAC,IAAI+C,IAAI,CAACd,IAAI,KAAK7C,KAAK,CACpE;MACJ,CAAC;IAAA,CAAC,CAAC;IAEHH,qBAAqB,CAAC0D,yBAAyB,CAAC;IAEhD,OAAOR,QAAQ;EACnB,CAAC,EAAE,CAAC9B,MAAM,EAAEhC,KAAK,EAAES,oBAAoB,EAAEM,KAAK,CAAC,CAAC;EAEhD,MAAM4D,UAAU,GAAGjG,WAAW,CAAC,MAAM;IACjC,IAAIgE,MAAM,CAACK,OAAO,EAAE;MAChB,MAAM;QAAET,CAAC;QAAEC,CAAC;QAAEpB,MAAM,EAAEyD;MAAW,CAAC,GAAGlC,MAAM,CAACK,OAAO,CAACK,qBAAqB,CAAC,CAAC;MAE3Ef,sBAAsB,CAAC;QACnBC,CAAC;QACDC,CAAC,EAAEA,CAAC,GAAGqC;MACX,CAAC,CAAC;MAEF1D,cAAc,CAAC,IAAI,CAAC;IACxB;EACJ,CAAC,EAAE,EAAE,CAAC;EAEN,MAAM2D,WAAW,GAAGnG,WAAW,CAAC,MAAM;IAClCwC,cAAc,CAAC,KAAK,CAAC;EACzB,CAAC,EAAE,EAAE,CAAC;EAEN,MAAM4D,8BAA8B,GAAIC,IAAc,IAAK;IACvD9C,SAAS,CAAC8C,IAAI,CAACpD,MAAM,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,GAAGoD,IAAI,CAAC;EACjD,CAAC;;EAED;AACR;AACA;EACQ,MAAMC,kBAAkB,GAAGtG,WAAW,CACjCuG,KAAiB,IAAK;IACnB,IACIvC,MAAM,CAACK,OAAO,IACd,CAACL,MAAM,CAACK,OAAO,CAACmC,QAAQ,CAACD,KAAK,CAACE,MAAc,CAAC,IAC9CxC,UAAU,CAACI,OAAO,IAClB,CAACJ,UAAU,CAACI,OAAO,CAACmC,QAAQ,CAACD,KAAK,CAACE,MAAc,CAAC,EACpD;MACEN,WAAW,CAAC,CAAC;IACjB;EACJ,CAAC,EACD,CAACA,WAAW,CAChB,CAAC;;EAED;AACR;AACA;EACQlG,SAAS,CAAC,MAAM;IACZyG,QAAQ,CAACC,gBAAgB,CAAC,OAAO,EAAEL,kBAAkB,CAAC;IACtDM,MAAM,CAACD,gBAAgB,CAAC,MAAM,EAAE,MAAMR,WAAW,CAAC,CAAC,CAAC;IAEpD,OAAO,MAAM;MACTO,QAAQ,CAACG,mBAAmB,CAAC,OAAO,EAAEP,kBAAkB,CAAC;MACzDM,MAAM,CAACD,gBAAgB,CAAC,MAAM,EAAE,MAAMR,WAAW,CAAC,CAAC,CAAC;IACxD,CAAC;EACL,CAAC,EAAE,CAACG,kBAAkB,EAAEtC,MAAM,EAAEmC,WAAW,CAAC,CAAC;;EAE7C;AACR;AACA;EACQlG,SAAS,CAAC,MAAM;IACZ,MAAM6G,SAAmB,GAAG,EAAE;IAE9B3B,UAAU,CAACN,OAAO,CAACkC,KAAA,IAAyB;MAAA,IAAxB;QAAE1B,IAAI;QAAEN;MAAU,CAAC,GAAAgC,KAAA;MACnC1B,IAAI,CAACR,OAAO,CAACmC,KAAA;QAAA,IAAC;UAAE9B;QAAK,CAAC,GAAA8B,KAAA;QAAA,OAAKF,SAAS,CAAC9B,IAAI,CAACE,IAAI,CAAC;MAAA,EAAC;MAChD,IAAI,CAACH,SAAS,EAAE;QACZ;MACJ;MACA+B,SAAS,CAAC9B,IAAI,CAACD,SAAS,CAAC;IAC7B,CAAC,CAAC;IAEF,IAAIhD,oBAAoB,IAAIqB,gBAAgB,KAAK,EAAE,EAAE;MACjD0D,SAAS,CAAC9B,IAAI,CAAC5B,gBAAgB,CAAC;IACpC;IAEAV,SAAS,CAAClC,sBAAsB,CAACsG,SAAS,CAAC,CAAC;EAChD,CAAC,EAAE,CAAC1D,gBAAgB,EAAE+B,UAAU,EAAE9D,WAAW,EAAEU,oBAAoB,CAAC,CAAC;;EAErE;AACR;AACA;EACQ9B,SAAS,CAAC,MAAM;IACZ,MAAMgH,KAAK,GAAGP,QAAQ,CAACQ,cAAc,CAAC,kBAAkB,CAAC;IAEzD,MAAMC,aAAa,GAAGA,CAAA,KAAM;MACxB,IAAIF,KAAK,EAAE;QACPrE,QAAQ,CAACqE,KAAK,CAACG,WAAW,CAAC;MAC/B;IACJ,CAAC;IAED,IAAIH,KAAK,EAAE;MACP,IAAII,cAAc,CAACF,aAAa,CAAC,CAACG,OAAO,CAACL,KAAK,CAAC;IACpD;EACJ,CAAC,EAAE,EAAE,CAAC;EAENhH,SAAS,CAAC,MAAM;IACZ,IAAI0B,UAAU,EAAE;MACZwD,UAAU,CAACN,OAAO,CAAC0C,KAAA,IAAc;QAAA,IAAb;UAAElC;QAAK,CAAC,GAAAkC,KAAA;QACxB,MAAMC,YAAY,GAAGnC,IAAI,CAACoC,IAAI,CAACC,KAAA;UAAA,IAAC;YAAEzC;UAAG,CAAC,GAAAyC,KAAA;UAAA,OAAKzC,EAAE,KAAKtD,UAAU;QAAA,EAAC;QAC7D,IAAI6F,YAAY,EAAE;UACdlF,QAAQ,CAACkF,YAAY,CAACtC,IAAI,CAAC;UAE3B,IAAIsC,YAAY,CAACG,QAAQ,EAAE;YACvBvF,gBAAgB,cACZtC,KAAA,CAAA8H,aAAA,CAAC7G,wBAAwB;cACrB8G,GAAG,EAAEL,YAAY,CAACG,QAAS;cAC3BG,qBAAqB,EAAEjG;YAAqB,CAC/C,CACL,CAAC;UACL;QACJ;MACJ,CAAC,CAAC;IACN;EACJ,CAAC,EAAE,CAACsD,UAAU,EAAExD,UAAU,EAAEE,oBAAoB,CAAC,CAAC;;EAElD;AACR;AACA;AACA;EACQ5B,SAAS,CAAC,MAAM;IACZ,IAAI,CAAC0B,UAAU,EAAE;MACbW,QAAQ,CAAC,EAAE,CAAC;IAChB;EACJ,CAAC,EAAE,CAACX,UAAU,CAAC,CAAC;;EAEhB;AACR;AACA;EACQ,MAAMoG,WAAW,GAAG/H,WAAW,CAAC,MAAM;IAClC,IAAI8B,6BAA6B,EAAE;MAC/B,MAAMyD,gBAAmC,GAAG,EAAE;MAE9CJ,UAAU,CAACN,OAAO,CAACmD,KAAA,IAAyB;QAAA,IAAxB;UAAE3C,IAAI;UAAEN;QAAU,CAAC,GAAAiD,KAAA;QACnC,MAAMvC,OAAO,GAAGhF,UAAU,CAAC;UAAEmE,KAAK,EAAES,IAAI;UAAEK,YAAY,EAAErD;QAAM,CAAC,CAAC;QAEhE,IAAIoD,OAAO,CAACxC,MAAM,GAAG,CAAC,EAAE;UACpBsC,gBAAgB,CAACP,IAAI,CAAC;YAClBD,SAAS;YACTM,IAAI,EAAEI;UACV,CAAC,CAAC;QACN;MACJ,CAAC,CAAC;MAEF,IAAIF,gBAAgB,CAACtC,MAAM,KAAK,CAAC,IAAIlB,oBAAoB,EAAE;QACvDwD,gBAAgB,CAACP,IAAI,CAAC;UAClBD,SAAS,EAAEY,SAAS;UACpBN,IAAI,EAAE;QACV,CAAC,CAAC;MACN;MAEA,MAAMO,yBAAyB,GAAGL,gBAAgB,CAACM,GAAG,CAACoC,MAAA;QAAA,IAAC;UAAE5C,IAAI;UAAEN;QAAU,CAAC,GAAAkD,MAAA;QAAA,OAAM;UAC7ElD,SAAS;UACTM,IAAI,EAAEA,IAAI,CAACU,MAAM,CACZC,IAAI,IAAK,EAAET,gBAAgB,CAACtC,MAAM,KAAK,CAAC,IAAI+C,IAAI,CAACd,IAAI,KAAK7C,KAAK,CACpE;QACJ,CAAC;MAAA,CAAC,CAAC;MAEHH,qBAAqB,CAAC0D,yBAAyB,CAAC;MAEhD,IAAIA,yBAAyB,CAAC3C,MAAM,KAAK,CAAC,EAAE;QACxCgD,UAAU,CAAC,CAAC;MAChB,CAAC,MAAM;QACHE,WAAW,CAAC,CAAC;MACjB;IACJ;EACJ,CAAC,EAAE,CACChB,UAAU,EACVgB,WAAW,EACXF,UAAU,EACVlE,oBAAoB,EACpBD,6BAA6B,EAC7BO,KAAK,CACR,CAAC;;EAEF;AACR;AACA;;EAEQpC,SAAS,CAAC,MAAM;IACZ,MAAMsF,gBAAmC,GAAG,EAAE;IAE9CJ,UAAU,CAACN,OAAO,CAACqD,MAAA,IAAyB;MAAA,IAAxB;QAAE7C,IAAI;QAAEN;MAAU,CAAC,GAAAmD,MAAA;MACnC,MAAMzC,OAAO,GAAGhF,UAAU,CAAC;QAAEmE,KAAK,EAAES,IAAI;QAAEK,YAAY,EAAErD;MAAM,CAAC,CAAC;MAEhE,IAAIoD,OAAO,CAACxC,MAAM,GAAG,CAAC,EAAE;QACpBsC,gBAAgB,CAACP,IAAI,CAAC;UAClBD,SAAS;UACTM,IAAI,EAAEI;QACV,CAAC,CAAC;MACN;IACJ,CAAC,CAAC;IAEF,IAAIF,gBAAgB,CAACtC,MAAM,KAAK,CAAC,IAAIlB,oBAAoB,EAAE;MACvDwD,gBAAgB,CAACP,IAAI,CAAC;QAClBD,SAAS,EAAEY,SAAS;QACpBN,IAAI,EAAE;MACV,CAAC,CAAC;IACN;IAEA,IAAItD,oBAAoB,IAAIqB,gBAAgB,KAAK,EAAE,EAAE;MACjDmC,gBAAgB,CAACV,OAAO,CAACsD,MAAA,IAAc;QAAA,IAAb;UAAE9C;QAAK,CAAC,GAAA8C,MAAA;QAC9B9C,IAAI,CAACR,OAAO,CAACuD,MAAA,IAAc;UAAA,IAAb;YAAElD;UAAK,CAAC,GAAAkD,MAAA;UAClB,IAAIlD,IAAI,CAACmD,WAAW,CAAC,CAAC,KAAKjF,gBAAgB,CAACiF,WAAW,CAAC,CAAC,EAAE;YACvDhF,mBAAmB,CAAC,EAAE,CAAC;UAC3B;QACJ,CAAC,CAAC;MACN,CAAC,CAAC;IACN;EACJ,CAAC,EAAE,CACCD,gBAAgB,EAChB+B,UAAU,EACVpD,oBAAoB,EACpBD,6BAA6B,EAC7BO,KAAK,CACR,CAAC;EAEF,MAAMiG,WAAW,GAAGtI,WAAW,CAAC,MAAM;IAClC,IAAIuC,WAAW,EAAE;MACb4D,WAAW,CAAC,CAAC;IACjB,CAAC,MAAM;MACHF,UAAU,CAAC,CAAC;IAChB;EACJ,CAAC,EAAE,CAACE,WAAW,EAAEF,UAAU,EAAE1D,WAAW,CAAC,CAAC;EAE1C,MAAMgG,YAAY,GAAGpI,OAAO,CAAC,MAAM;IAC/B,IAAI,CAAC6B,oBAAoB,EAAE;MACvB,OAAO2D,SAAS;IACpB;IAEA,oBACI7F,KAAA,CAAA8H,aAAA,CAAC3G,mBAAmB;MAACuH,OAAO,EAAEF;IAAY,gBACtCxI,KAAA,CAAA8H,aAAA,CAAClH,IAAI;MAAC+H,KAAK,EAAE,CAAC,oBAAoB,CAAE;MAACC,KAAK,EAAEvE,KAAK,CAAC,KAAK;IAAY,CAAE,CACpD,CAAC;EAE9B,CAAC,EAAE,CAACmE,WAAW,EAAEtG,oBAAoB,EAAEmC,KAAK,CAAC,CAAC;;EAE9C;AACR;AACA;EACQ,MAAMwE,YAAY,GAAG3I,WAAW,CAC3BuG,KAAoC,IAAK;IACtC,MAAMqC,aAAgC,GAAG,EAAE;IAE3CzD,UAAU,CAACN,OAAO,CAACgE,MAAA,IAAyB;MAAA,IAAxB;QAAExD,IAAI;QAAEN;MAAU,CAAC,GAAA8D,MAAA;MACnC,MAAMpD,OAAO,GAAGhF,UAAU,CAAC;QAAEmE,KAAK,EAAES,IAAI;QAAEK,YAAY,EAAEa,KAAK,CAACE,MAAM,CAACpE;MAAM,CAAC,CAAC;MAE7E,IAAIoD,OAAO,CAACxC,MAAM,GAAG,CAAC,EAAE;QACpB2F,aAAa,CAAC5D,IAAI,CAAC;UACfD,SAAS;UACTM,IAAI,EAAEI;QACV,CAAC,CAAC;MACN;IACJ,CAAC,CAAC;IAEF,IAAImD,aAAa,CAAC3F,MAAM,KAAK,CAAC,IAAIlB,oBAAoB,EAAE;MACpD6G,aAAa,CAAC5D,IAAI,CAAC;QACfD,SAAS,EAAEY,SAAS;QACpBN,IAAI,EAAE;MACV,CAAC,CAAC;IACN;IAEAjD,gBAAgB,CAACuD,SAAS,CAAC;IAE3B,IAAI,CAAC7D,6BAA6B,IAAI,CAACyE,KAAK,CAACE,MAAM,CAACpE,KAAK,EAAE;MACvDH,qBAAqB,CAAC,EAAE,CAAC;IAC7B,CAAC,MAAM;MACHA,qBAAqB,CAAC0G,aAAa,CAAC;MACpC,IAAIA,aAAa,CAAC3F,MAAM,KAAK,CAAC,EAAE;QAC5BgD,UAAU,CAAC,CAAC;MAChB,CAAC,MAAM;QACHE,WAAW,CAAC,CAAC;MACjB;IACJ;IAEA7D,QAAQ,CAACiE,KAAK,CAACE,MAAM,CAACpE,KAAK,CAAC;IAC5BgB,mBAAmB,CAACkD,KAAK,CAACE,MAAM,CAACpE,KAAK,CAAC;IAEvC,IAAI,OAAOd,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACgF,KAAK,CAAC;IACnB;EACJ,CAAC,EACD,CACIpB,UAAU,EACVgB,WAAW,EACXF,UAAU,EACV1E,QAAQ,EACRQ,oBAAoB,EACpBD,6BAA6B,CAErC,CAAC;;EAED;AACR;AACA;EACQ,MAAMgH,UAAU,GAAG9I,WAAW,CACzBuG,KAAmC,IAAK;IACrC,IAAI,OAAO/E,MAAM,KAAK,UAAU,EAAE;MAC9BA,MAAM,CAAC+E,KAAK,CAAC;IACjB;EACJ,CAAC,EACD,CAAC/E,MAAM,CACX,CAAC;;EAED;AACR;AACA;EACQ,MAAMuH,YAAY,GAAG/I,WAAW,CAC3BgG,IAAoB,IAAK;IACtB,MAAMgD,OAAO,GAAG;MACZ,GAAGhD,IAAI;MACPd,IAAI,EAAEc,IAAI,CAACd,IAAI,CAAC+D,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAACA,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAACA,OAAO,CAAC,KAAK,EAAE,EAAE;IAC5E,CAAC;IAED3G,QAAQ,CAAC0G,OAAO,CAAC9D,IAAI,CAAC;IACtBiB,WAAW,CAAC,CAAC;IAEb/D,gBAAgB,CACZ4G,OAAO,CAACrB,QAAQ,gBACZ7H,KAAA,CAAA8H,aAAA,CAAC7G,wBAAwB;MACrB8G,GAAG,EAAEmB,OAAO,CAACrB,QAAS;MACtBG,qBAAqB,EAAEjG;IAAqB,CAC/C,CAAC,GACF8D,SACR,CAAC;IAEDzD,qBAAqB,CAAC,EAAE,CAAC;IAEzB,IAAI,OAAOT,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACuH,OAAO,CAAC;IACrB;EACJ,CAAC,EACD,CAAC7C,WAAW,EAAE1E,QAAQ,EAAEI,oBAAoB,CAChD,CAAC;EAED,MAAMqH,OAAO,GAAG/I,OAAO,CAAC,MAAM;IAC1B,MAAMyE,KAAqB,GAAG,EAAE;IAEhC3C,kBAAkB,CAAC4C,OAAO,CAAC,CAAAsE,MAAA,EAAsBC,KAAK,KAAK;MAAA,IAA/B;QAAErE,SAAS;QAAEM;MAAK,CAAC,GAAA8D,MAAA;MAC3C,IAAIpG,iBAAiB,EAAE;QACnB,IAAIsC,IAAI,CAACpC,MAAM,IAAI,CAAC,EAAE;UAClB;QACJ;QAEA,IAAImG,KAAK,KAAK,CAAC,EAAE;UACbxE,KAAK,CAACI,IAAI,cAAClF,KAAA,CAAA8H,aAAA,CAAChH,SAAS;YAACyI,GAAG,EAAEtE,SAAU;YAACuE,IAAI,EAAEvE,SAAS,IAAI;UAAG,CAAE,CAAC,CAAC;QACpE;MACJ;MAEAM,IAAI,CAACR,OAAO,CAAC0E,MAAA,IAA4B;QAAA,IAA3B;UAAEtE,EAAE;UAAEC,IAAI;UAAEyC;QAAS,CAAC,GAAA4B,MAAA;QAChC3E,KAAK,CAACI,IAAI,cACNlF,KAAA,CAAA8H,aAAA,CAAC9G,aAAa;UACVuI,GAAG,EAAE,GAAGpE,EAAE,IAAIF,SAAS,IAAI,EAAE,EAAG;UAChCE,EAAE,EAAEA,EAAG;UACPC,IAAI,EAAEA,IAAK;UACXyC,QAAQ,EAAEA,QAAS;UACnB9F,oBAAoB,EAAEA,oBAAqB;UAC3CJ,QAAQ,EAAEsH,YAAa;UACvBhE,SAAS,EAAEA;QAAU,CACxB,CACL,CAAC;MACL,CAAC,CAAC;IACN,CAAC,CAAC;IAEF,IAAIhD,oBAAoB,IAAIqB,gBAAgB,KAAK,EAAE,EAAE;MACjDwB,KAAK,CAACI,IAAI,cACNlF,KAAA,CAAA8H,aAAA,CAAC9G,aAAa;QACVmE,EAAE,EAAC,aAAa;QAChBxD,QAAQ,EAAEsH,YAAa;QACvB7D,IAAI,EAAE,MAAM9B,gBAAgB;MAAM,CACrC,CACL,CAAC;IACL;IAEA,OAAOwB,KAAK;EAChB,CAAC,EAAE,CACC3C,kBAAkB,EAClBF,oBAAoB,EACpBqB,gBAAgB,EAChBL,iBAAiB,EACjBlB,oBAAoB,EACpBkH,YAAY,CACf,CAAC;EAEF9I,SAAS,CAAC,MAAM;IACZ,MAAMuJ,aAAa,GAAIC,CAAgB,IAAK;MACxC,IAAI,CAAClH,WAAW,EAAE;QACd;MACJ;MAEA,IAAIkH,CAAC,CAACJ,GAAG,KAAK,SAAS,IAAII,CAAC,CAACJ,GAAG,KAAK,WAAW,EAAE;QAC9CI,CAAC,CAACC,cAAc,CAAC,CAAC;QAClB,MAAMC,QAAQ,GAAG1F,UAAU,CAACI,OAAO,EAAEsF,QAAQ;QAE7C,IAAI,CAACA,QAAQ,EAAE;UACX;QACJ;QAEA,MAAMC,aAAa,GAAGC,KAAK,CAACC,IAAI,CAACH,QAAQ,CAAC;QAE1C,MAAMI,WAAW,GAAGH,aAAa,CAACnC,IAAI,CAAEuC,KAAK,IACzCA,KAAK,CAAC/E,EAAE,CAACgF,UAAU,CAAC,qBAAqB,CAC7C,CAAC,EAAEN,QAAQ;QAEX,IAAII,WAAW,IAAIA,WAAW,CAAC9G,MAAM,GAAG,CAAC,EAAE;UACvC,MAAMiH,gBAAgB,GAAGL,KAAK,CAACC,IAAI,CAACC,WAAW,CAAC,CAAChE,MAAM,CAClDiE,KAAK,IAAMA,KAAK,CAAiBG,OAAO,CAACC,WAAW,KAAK,MAC9D,CAAC;UACDjH,wBAAwB,CAAC+G,gBAAgB,CAAC;UAE1C,MAAMG,QAAQ,GACVxH,YAAY,KAAK,IAAI,GACf,CAACA,YAAY,IACR4G,CAAC,CAACJ,GAAG,KAAK,SAAS,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAC9Ba,gBAAgB,CAACjH,MAAM,IAC3BiH,gBAAgB,CAACjH,MAAM,GACvB,CAAC;UAEX,IAAIJ,YAAY,KAAK,IAAI,EAAE;YACvB,MAAMyH,WAAW,GAAGJ,gBAAgB,CAACrH,YAAY,CAAmB;YACpEyH,WAAW,CAACC,QAAQ,GAAG,CAAC,CAAC;UAC7B;UAEAzH,eAAe,CAACuH,QAAQ,CAAC;UAEzB,MAAMG,UAAU,GAAGN,gBAAgB,CAACG,QAAQ,CAAmB;UAC/DG,UAAU,CAACD,QAAQ,GAAG,CAAC;UACvBC,UAAU,CAACC,KAAK,CAAC,CAAC;QACtB;MACJ,CAAC,MAAM,IAAIhB,CAAC,CAACJ,GAAG,KAAK,OAAO,IAAIxG,YAAY,KAAK,IAAI,EAAE;QACnD,IAAIK,qBAAqB,EAAE;UACvB,MAAMqB,OAAO,GAAGrB,qBAAqB,CAACL,YAAY,CAAC;UAEnD,IAAI,CAAC0B,OAAO,EAAE;YACV;UACJ;UAEA,MAAM;YAAEU,EAAE;YAAEyF;UAAY,CAAC,GAAGnG,OAAO;UAEnC,IAAIoD,QAA4B;;UAEhC;UACA;UACA;UACA,IAAIpD,OAAO,CAACoF,QAAQ,CAAC,CAAC,CAAC,EAAEgB,UAAU,CAAC9C,GAAG,EAAE;YACrC;YACA;YACA;YACAF,QAAQ,GAAGpD,OAAO,CAACoF,QAAQ,CAAC,CAAC,CAAC,EAAEgB,UAAU,CAAC9C,GAAG,CAAC+C,SAAmB;UACtE;UAEA7B,YAAY,CAAC;YACT9D,EAAE,EAAEA,EAAE,CAACgE,OAAO,CAAC,mBAAmB,EAAE,EAAE,CAAC;YACvC/D,IAAI,EAAEwF,WAAW,IAAI,EAAE;YACvB/C;UACJ,CAAC,CAAC;QACN;MACJ;IACJ,CAAC;IAEDjB,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAE6C,aAAa,CAAC;IAEnD,OAAO,MAAM;MACT9C,QAAQ,CAACG,mBAAmB,CAAC,SAAS,EAAE2C,aAAa,CAAC;IAC1D,CAAC;EACL,CAAC,EAAE,CAACtG,qBAAqB,EAAEL,YAAY,EAAEkG,YAAY,EAAExG,WAAW,CAAC,CAAC;EAEpE,MAAMsI,cAAc,GAAG7K,WAAW,CAAEuG,KAAoB,IAAK;IACzD,IAAIA,KAAK,CAACuE,OAAO,KAAK,EAAE,EAAE;MACtB5I,qBAAqB,CAAC,EAAE,CAAC;IAC7B;EACJ,CAAC,EAAE,EAAE,CAAC;EAENhC,mBAAmB,CACfkB,GAAG,EACH,OAAO;IACH2J,KAAK,EAAEA,CAAA,KAAMzI,QAAQ,CAAC,EAAE;EAC5B,CAAC,CAAC,EACF,EACJ,CAAC;EAEDrC,SAAS,CAAC,MAAM;IACZyG,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAEkE,cAAc,CAAC;IAEpD,OAAO,MAAM;MACTnE,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAEkE,cAAc,CAAC;IACxD,CAAC;EACL,CAAC,EAAE,CAACA,cAAc,CAAC,CAAC;EAEpB5K,SAAS,CAAC,MAAM;IACZ,IAAI,CAAC6D,YAAY,EAAE;MACf;IACJ;IAEAL,SAAS,CAAC,mBACNnD,YAAY,cACRR,KAAA,CAAA8H,aAAA,CAAC/H,eAAe;MAACmL,OAAO,EAAE;IAAM,GAC3BzI,WAAW,iBACRzC,KAAA,CAAA8H,aAAA,CAAC/G,aAAa;MACV8D,aAAa,EAAEA,aAAc;MAC7BsG,cAAc,EAAE3H,MAAO;MACvBX,KAAK,EAAEA,KAAM;MACbuI,WAAW,EAAExH,mBAAoB;MACjCU,OAAO,EAAEA,OAAO,EAAEkF,IAAK;MACvB7G,MAAM,EAAEA,MAAO;MACfrB,GAAG,EAAE6C,UAAW;MAChBkH,aAAa,EAAE/E;IAA+B,GAE7C8C,OACU,CAEN,CAAC,EAClBpF,YACJ,CACJ,CAAC;EACL,CAAC,EAAE,CACCM,OAAO,EAAEkF,IAAI,EACbxF,YAAY,EACZoF,OAAO,EACPvE,aAAa,EACbrB,MAAM,EACNb,MAAM,EACNiB,mBAAmB,EACnBnB,WAAW,EACXI,KAAK,CACR,CAAC;EAEF,OAAOxC,OAAO,CACV,mBACIL,KAAA,CAAA8H,aAAA,CAAC5G,eAAe;IAACI,GAAG,EAAE4C;EAAO,gBACzBlE,KAAA,CAAA8H,aAAA;IAAK3C,EAAE,EAAC;EAAkB,gBACtBnF,KAAA,CAAA8H,aAAA,CAACjH,KAAK;IACFS,GAAG,EAAE8C,QAAS;IACd3C,QAAQ,EAAEoH,YAAa;IACvBnH,MAAM,EAAEsH,UAAW;IACnBsC,OAAO,EAAErD,WAAY;IACrB1G,WAAW,EAAEA,WAAY;IACzBK,SAAS,EAAEA,SAAU;IACrB2J,WAAW,EAAElJ,aAAc;IAC3BoG,YAAY,EAAEA,YAAa;IAC3BlG,KAAK,EAAEA;EAAM,CAChB,CACA,CAAC,EACLmB,MACY,CACpB,EACD,CACIsF,UAAU,EACVH,YAAY,EACZZ,WAAW,EACXrG,SAAS,EACTL,WAAW,EACXmC,MAAM,EACN+E,YAAY,EACZpG,aAAa,EACbE,KAAK,CAEb,CAAC;AACL,CACJ,CAAC;AAEDnB,SAAS,CAACoK,WAAW,GAAG,WAAW;AAEnC,eAAepK,SAAS","ignoreList":[]}

package/lib/types/components/accordion/Accordion.d.ts

@@ -94,6 +94,10 @@ export type AccordionProps = {
      * This will hide the background color of the accordion
      */
     shouldHideBackground?: boolean;
+    /**
+     * Whether the bottom line should be hidden.
+     */
+    shouldHideBottomLine?: boolean;
     /**
      * This will render the Accordion closed on the first render.
      */

package/lib/types/components/accordion/Accordion.styles.d.ts

@@ -6,6 +6,7 @@ type StyledMotionAccordionProps = WithTheme<{
     $shouldForceBackground?: boolean;
     $shouldHideBackground?: boolean;
     $shouldShowLines?: boolean;
+    $shouldHideBottomLine: boolean;
 }>;
 export declare const StyledMotionAccordion: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
     slot?: string | undefined;

package/lib/types/components/list/list-item/ListItem.d.ts

@@ -55,11 +55,19 @@ export type ListItemProps = {
      * elements are specified, they are displayed one below the other.
      */
     rightElements?: IListItemRightElements;
+    /**
+     * This will force the background color of the ListItem to be used even if it is closed and not hovered.
+     */
+    shouldForceBackground?: boolean;
     /**
      * Whether the background and border of the shape on which the image or icon of the element is displayed should be
      * hidden.
      */
     shouldHideImageOrIconBackground?: boolean;
+    /**
+     * Whether the bottom line should be hidden.
+     */
+    shouldHideBottomLine?: boolean;
     /**
      * If the `ListItem` is expandable, the indicator is displayed on the left
      * side of the header. If this property is set to true, the indicator is

package/lib/types/components/list/list-item/ListItem.styles.d.ts

@@ -5,7 +5,9 @@ type StyledListItemProps = WithTheme<{
     $isInAccordion: boolean;
     $isWrapped: boolean;
     $shouldHideIndicator: boolean;
+    $shouldForceBackground?: boolean;
     $shouldShowSeparatorBelow: boolean;
+    $shouldHideBottomLine: boolean;
 }>;
 export declare const StyledMotionListItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
     slot?: string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.933",
+    "version": "5.0.0-beta.935",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -87,5 +87,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "9b04996902b926f6ad8f62d08286a40144142eb8"
+    "gitHead": "79caa33d74bdc4866f2e1a32f1e3a5f7d4998b5f"
 }