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

package/lib/esm/components/input/Input.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.styles.js","names":["motion","styled","css","StyledInput","div","_ref","$isDisabled","StyledInputContentWrapper","_ref2","theme","$shouldChangeColor","colorMode","_ref3","$isInvalid","wrong","_ref4","_ref5","$size","_ref6","$shouldShowOnlyBottomBorder","_ref7","$shouldRoundRightCorners","StyledInputContent","_ref8","StyledInputField","input","_ref9","text","_ref10","$placeholderWidth","_ref11","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","label","StyledMotionInputElement","StyledInputLabel","_ref12","StyledMotionInputClearIcon","_ref13","_ref14","_ref15","StyledInputIconWrapper","StyledInputRightElement"],"sources":["../../../../src/components/input/Input.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from './Input';\n\ntype StyledInputProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledInput = styled.div<StyledInputProps>`\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    display: flex;\n    width: 100%;\n`;\n\ntype StyledInputContentWrapperProps = WithTheme<{\n    $shouldRoundRightCorners: boolean;\n    $shouldShowOnlyBottomBorder?: boolean;\n    $isInvalid?: boolean;\n    $shouldChangeColor: boolean;\n    $size: InputSize;\n}>;\n\nexport const StyledInputContentWrapper = styled.div<StyledInputContentWrapperProps>`\n    align-items: center;\n    background-color: ${({ theme, $shouldChangeColor }: StyledInputContentWrapperProps) =>\n        theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};\n    border: 1px solid\n        ${({ theme, $isInvalid }: StyledInputContentWrapperProps) =>\n            $isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)'};\n    color: ${({ theme }: StyledInputContentWrapperProps) => theme['006']};\n    display: flex;\n    justify-content: space-between;\n    width: 100%;\n    transition: opacity 0.3s ease;\n\n    ${({ $size }) =>\n        $size === 'small' &&\n        css`\n            height: 32px;\n        `}\n\n    ${({ $shouldShowOnlyBottomBorder, $size }) =>\n        !$shouldShowOnlyBottomBorder &&\n        css`\n            min-height: ${$size === 'medium' ? '42px' : '32px'};\n        `}\n\n    ${({ $shouldRoundRightCorners, $shouldShowOnlyBottomBorder, theme }) => {\n        if ($shouldShowOnlyBottomBorder) {\n            return css`\n                border-top: none;\n                border-right: none;\n                border-left: none;\n                background-color: transparent;\n                border-color: ${theme['408']};\n            `;\n        }\n\n        if ($shouldRoundRightCorners) {\n            return css`\n                border-radius: 3px;\n            `;\n        }\n\n        return css`\n            border-bottom-left-radius: 3px;\n            border-top-left-radius: 3px;\n            border-right: none;\n        `;\n    }}\n`;\n\ntype StyledInputContentProps = WithTheme<{ $shouldShowOnlyBottomBorder?: boolean }>;\n\nexport const StyledInputContent = styled.div<StyledInputContentProps>`\n    display: flex;\n    flex: 1 1 auto;\n    min-width: 0;\n    margin: ${({ $shouldShowOnlyBottomBorder }) =>\n        !$shouldShowOnlyBottomBorder ? '8px 10px' : '4px 0'};\n    position: relative;\n`;\n\ntype StyledInputFieldProps = WithTheme<{\n    $isInvalid?: boolean;\n    $shouldShowCenteredContent: boolean;\n    $placeholderWidth: number;\n}>;\n\nexport const StyledInputField = styled.input<StyledInputFieldProps>`\n    background: none;\n    border: none;\n    color: ${({ theme, $isInvalid }: StyledInputFieldProps) =>\n        $isInvalid ? theme.wrong : theme.text};\n    padding: 0;\n    width: ${({ $placeholderWidth }) => `calc(100% - ${$placeholderWidth}px)`};\n    line-height: 1em;\n\n    ${({ $shouldShowCenteredContent }) =>\n        $shouldShowCenteredContent &&\n        css`\n            text-align: center;\n        `}\n`;\n\nexport const StyledMotionInputLabelWrapper = styled(motion.label)`\n    align-items: center;\n    display: flex;\n    flex: 0 0 auto;\n    gap: 4px;\n    line-height: 1.3;\n    pointer-events: none;\n    position: absolute;\n    user-select: none;\n    max-width: 100%;\n`;\n\nexport const StyledMotionInputElement = styled(motion.div)`\n    display: flex;\n`;\n\ntype StyledInputLabelProps = WithTheme<{ $isInvalid?: boolean }>;\n\nexport const StyledInputLabel = styled.label<StyledInputLabelProps>`\n    line-height: 1.3;\n    pointer-events: none;\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    color: ${({ theme, $isInvalid }: StyledInputLabelProps) =>\n        $isInvalid ? theme.wrong : `rgba(${theme['text-rgb'] ?? ''}, 0.45)`};\n`;\n\ntype StyledMotionInputClearIconProps = WithTheme<{\n    $shouldShowOnlyBottomBorder?: boolean;\n    $size: InputSize;\n}>;\n\nexport const StyledMotionInputClearIcon = styled(motion.div)<StyledMotionInputClearIconProps>`\n    align-items: center;\n    border-left: ${({ $shouldShowOnlyBottomBorder }) =>\n        $shouldShowOnlyBottomBorder ? 'none' : '1px solid rgba(160, 160, 160, 0.3)'};\n    cursor: pointer;\n    display: flex;\n    flex: 0 0 auto;\n    height: ${({ $size }) => ($size === 'medium' ? '40px' : '30px')};\n    justify-content: center;\n    width: ${({ $size }) => ($size === 'medium' ? '40px' : '30px')};\n`;\n\nexport const StyledInputIconWrapper = styled.div`\n    align-items: baseline;\n    display: flex;\n    flex: 0 0 auto;\n    justify-content: center;\n    margin-left: 10px;\n`;\n\nexport const StyledInputRightElement = styled.div`\n    border-bottom-right-radius: 3px;\n    border-top-right-radius: 3px;\n    overflow: hidden;\n    flex: 0 0 auto;\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Input.styles.js","names":["motion","styled","css","StyledInput","div","$isDisabled","StyledInputContentWrapper","theme","$backgroundColor","$isInvalid","$shouldShowTransparentBackground","wrong","colorMode","$size","$shouldShowOnlyBottomBorder","$shouldRoundRightCorners","StyledInputContent","StyledInputField","input","$color","text","$placeholderWidth","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","label","StyledMotionInputElement","StyledInputLabel","StyledMotionInputClearIcon","StyledInputIconWrapper","StyledInputRightElement"],"sources":["../../../../src/components/input/Input.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from './Input';\nimport { CSSProperties } from 'react';\n\ntype StyledInputProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledInput = styled.div<StyledInputProps>`\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    display: flex;\n    width: 100%;\n`;\n\ntype StyledInputContentWrapperProps = WithTheme<{\n    $backgroundColor?: CSSProperties['backgroundColor'];\n    $shouldRoundRightCorners: boolean;\n    $shouldShowOnlyBottomBorder?: boolean;\n    $isInvalid?: boolean;\n    $size: InputSize;\n    $shouldShowTransparentBackground: boolean;\n}>;\n\nexport const StyledInputContentWrapper = styled.div<StyledInputContentWrapperProps>`\n    align-items: center;\n    background-color: ${({ theme, $backgroundColor }: StyledInputContentWrapperProps) =>\n        $backgroundColor ?? theme['100']};\n    border: 1px solid transparent;\n    color: ${({ theme }: StyledInputContentWrapperProps) => theme['006']};\n    display: flex;\n    justify-content: space-between;\n    width: 100%;\n    transition: opacity 0.3s ease;\n\n    ${({ theme, $isInvalid, $shouldShowTransparentBackground }) => {\n        if ($isInvalid) {\n            return css`\n                border-color: ${theme.wrong};\n            `;\n        }\n\n        if ($shouldShowTransparentBackground) {\n            if (theme.colorMode === 'dark') {\n                return css`\n                    border-color: rgba(255, 255, 255, 0.5);\n                `;\n            }\n\n            return css`\n                border-color: rgba(0, 0, 0, 0.5);\n            `;\n        }\n\n        return css`\n            border-color: rgba(160, 160, 160, 0.3);\n        `;\n    }}\n\n    ${({ $size }) =>\n        $size === 'small' &&\n        css`\n            height: 32px;\n        `}\n\n    ${({ $shouldShowOnlyBottomBorder, $size }) =>\n        !$shouldShowOnlyBottomBorder &&\n        css`\n            min-height: ${$size === 'medium' ? '42px' : '32px'};\n        `}\n\n    ${({ $shouldRoundRightCorners, $shouldShowOnlyBottomBorder, theme }) => {\n        if ($shouldShowOnlyBottomBorder) {\n            return css`\n                border-top: none;\n                border-right: none;\n                border-left: none;\n                background-color: transparent;\n                border-color: ${theme['408']};\n            `;\n        }\n\n        if ($shouldRoundRightCorners) {\n            return css`\n                border-radius: 3px;\n            `;\n        }\n\n        return css`\n            border-bottom-left-radius: 3px;\n            border-top-left-radius: 3px;\n            border-right: none;\n        `;\n    }}\n`;\n\ntype StyledInputContentProps = WithTheme<{ $shouldShowOnlyBottomBorder?: boolean }>;\n\nexport const StyledInputContent = styled.div<StyledInputContentProps>`\n    display: flex;\n    flex: 1 1 auto;\n    min-width: 0;\n    margin: ${({ $shouldShowOnlyBottomBorder }) =>\n        !$shouldShowOnlyBottomBorder ? '8px 10px' : '4px 0'};\n    position: relative;\n`;\n\ntype StyledInputFieldProps = WithTheme<{\n    $color?: CSSProperties['color'];\n    $isInvalid?: boolean;\n    $placeholderWidth: number;\n    $shouldShowCenteredContent: boolean;\n}>;\n\nexport const StyledInputField = styled.input<StyledInputFieldProps>`\n    background: none;\n    border: none;\n    color: ${({ theme, $color, $isInvalid }: StyledInputFieldProps) =>\n        $color ?? ($isInvalid ? theme.wrong : theme.text)};\n    padding: 0;\n    width: ${({ $placeholderWidth }) => `calc(100% - ${$placeholderWidth}px)`};\n    line-height: 1em;\n\n    ${({ $shouldShowCenteredContent }) =>\n        $shouldShowCenteredContent &&\n        css`\n            text-align: center;\n        `}\n`;\n\nexport const StyledMotionInputLabelWrapper = styled(motion.label)`\n    align-items: center;\n    display: flex;\n    flex: 0 0 auto;\n    gap: 4px;\n    line-height: 1.3;\n    pointer-events: none;\n    position: absolute;\n    user-select: none;\n    max-width: 100%;\n`;\n\nexport const StyledMotionInputElement = styled(motion.div)`\n    display: flex;\n`;\n\ntype StyledInputLabelProps = WithTheme<{ $isInvalid?: boolean }>;\n\nexport const StyledInputLabel = styled.label<StyledInputLabelProps>`\n    line-height: 1.3;\n    pointer-events: none;\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    color: ${({ theme, $isInvalid }: StyledInputLabelProps) =>\n        $isInvalid ? theme.wrong : `rgba(${theme['text-rgb'] ?? ''}, 0.45)`};\n`;\n\ntype StyledMotionInputClearIconProps = WithTheme<{\n    $shouldShowOnlyBottomBorder?: boolean;\n    $size: InputSize;\n}>;\n\nexport const StyledMotionInputClearIcon = styled(motion.div)<StyledMotionInputClearIconProps>`\n    align-items: center;\n    border-left: ${({ $shouldShowOnlyBottomBorder }) =>\n        $shouldShowOnlyBottomBorder ? 'none' : '1px solid rgba(160, 160, 160, 0.3)'};\n    cursor: pointer;\n    display: flex;\n    flex: 0 0 auto;\n    height: ${({ $size }) => ($size === 'medium' ? '40px' : '30px')};\n    justify-content: center;\n    width: ${({ $size }) => ($size === 'medium' ? '40px' : '30px')};\n`;\n\nexport const StyledInputIconWrapper = styled.div`\n    align-items: baseline;\n    display: flex;\n    flex: 0 0 auto;\n    justify-content: center;\n    margin-left: 10px;\n`;\n\nexport const StyledInputRightElement = styled.div`\n    border-bottom-right-radius: 3px;\n    border-top-right-radius: 3px;\n    overflow: hidden;\n    flex: 0 0 auto;\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/list/List.js

@@ -1,4 +1,4 @@
-import { AnimatePresence, MotionConfig } from 'framer-motion';
+import { AnimatePresence, MotionConfig } from 'motion/react';
 import React, { useCallback, useMemo, useState } from 'react';
 export const ListContext = /*#__PURE__*/React.createContext({
   incrementExpandableItemCount: () => () => {},
@@ -8,17 +8,15 @@ export const ListContext = /*#__PURE__*/React.createContext({
   updateOpenItemUuid: () => {}
 });
 ListContext.displayName = 'ListContext';
-const List = _ref => {
-  let {
-    children,
-    isWrapped = false
-  } = _ref;
+const List = ({
+  children,
+  isWrapped = false
+}) => {
   const [openItemUuid, setOpenItemUuid] = useState(undefined);
   const [expandableItemCount, setExpandableItemCount] = useState(0);
-  const updateOpenItemUuid = useCallback(function (uuid) {
-    let {
-      shouldOnlyOpen
-    } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const updateOpenItemUuid = useCallback((uuid, {
+    shouldOnlyOpen
+  } = {}) => {
     setOpenItemUuid(currentOpenItemUuid => {
       if (currentOpenItemUuid === uuid && shouldOnlyOpen !== true) {
         return undefined;

package/lib/esm/components/list/List.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.js","names":["AnimatePresence","MotionConfig","React","useCallback","useMemo","useState","ListContext","createContext","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","undefined","updateOpenItemUuid","displayName","List","_ref","children","setOpenItemUuid","expandableItemCount","setExpandableItemCount","uuid","shouldOnlyOpen","arguments","length","currentOpenItemUuid","count","providerValue","createElement","Provider","value","transition","type","initial"],"sources":["../../../../src/components/list/List.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'framer-motion';\nimport React, { FC, ReactNode, useCallback, useMemo, useState } from 'react';\n\ninterface IListContext {\n    incrementExpandableItemCount: () => () => void;\n    isAnyItemExpandable: boolean;\n    isWrapped: boolean;\n    openItemUuid: string | undefined;\n    updateOpenItemUuid: (uuid: string, options?: { shouldOnlyOpen?: boolean }) => void;\n}\n\nexport const ListContext = React.createContext<IListContext>({\n    incrementExpandableItemCount: () => () => {},\n    isAnyItemExpandable: false,\n    isWrapped: false,\n    openItemUuid: undefined,\n    updateOpenItemUuid: () => {},\n});\n\nListContext.displayName = 'ListContext';\n\ntype ListProps = {\n    /**\n     * The items of the list\n     */\n    children: ReactNode;\n    /**\n     * This value must be set for nested AccordionGroup components. This adjusts the style of\n     * the head and the padding of the content accordions.\n     */\n    isWrapped?: boolean;\n};\n\nconst List: FC<ListProps> = ({ children, isWrapped = false }) => {\n    const [openItemUuid, setOpenItemUuid] = useState<IListContext['openItemUuid']>(undefined);\n    const [expandableItemCount, setExpandableItemCount] = useState<number>(0);\n\n    const updateOpenItemUuid = useCallback<IListContext['updateOpenItemUuid']>(\n        (uuid, { shouldOnlyOpen } = {}) => {\n            setOpenItemUuid((currentOpenItemUuid) => {\n                if (currentOpenItemUuid === uuid && shouldOnlyOpen !== true) {\n                    return undefined;\n                }\n\n                return uuid;\n            });\n        },\n        [setOpenItemUuid],\n    );\n\n    const incrementExpandableItemCount = useCallback(() => {\n        setExpandableItemCount((count) => count + 1);\n\n        return () => {\n            setExpandableItemCount((count) => count - 1);\n        };\n    }, [setExpandableItemCount]);\n\n    const providerValue = useMemo<IListContext>(\n        () => ({\n            incrementExpandableItemCount,\n            isAnyItemExpandable: expandableItemCount > 0,\n            isWrapped,\n            openItemUuid,\n            updateOpenItemUuid,\n        }),\n        [\n            expandableItemCount,\n            incrementExpandableItemCount,\n            isWrapped,\n            openItemUuid,\n            updateOpenItemUuid,\n        ],\n    );\n\n    return (\n        <ListContext.Provider value={providerValue}>\n            <MotionConfig transition={{ type: 'tween' }}>\n                <AnimatePresence initial={false}>{children}</AnimatePresence>\n            </MotionConfig>\n        </ListContext.Provider>\n    );\n};\n\nList.displayName = 'List';\n\nexport default List;\n"],"mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,QAAQ,eAAe;AAC7D,OAAOC,KAAK,IAAmBC,WAAW,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAU5E,OAAO,MAAMC,WAAW,gBAAGJ,KAAK,CAACK,aAAa,CAAe;EACzDC,4BAA4B,EAAEA,CAAA,KAAM,MAAM,CAAC,CAAC;EAC5CC,mBAAmB,EAAE,KAAK;EAC1BC,SAAS,EAAE,KAAK;EAChBC,YAAY,EAAEC,SAAS;EACvBC,kBAAkB,EAAEA,CAAA,KAAM,CAAC;AAC/B,CAAC,CAAC;AAEFP,WAAW,CAACQ,WAAW,GAAG,aAAa;AAcvC,MAAMC,IAAmB,GAAGC,IAAA,IAAqC;EAAA,IAApC;IAAEC,QAAQ;IAAEP,SAAS,GAAG;EAAM,CAAC,GAAAM,IAAA;EACxD,MAAM,CAACL,YAAY,EAAEO,eAAe,CAAC,GAAGb,QAAQ,CAA+BO,SAAS,CAAC;EACzF,MAAM,CAACO,mBAAmB,EAAEC,sBAAsB,CAAC,GAAGf,QAAQ,CAAS,CAAC,CAAC;EAEzE,MAAMQ,kBAAkB,GAAGV,WAAW,CAClC,UAACkB,IAAI,EAA8B;IAAA,IAA5B;MAAEC;IAAe,CAAC,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAX,SAAA,GAAAW,SAAA,MAAG,CAAC,CAAC;IAC1BL,eAAe,CAAEO,mBAAmB,IAAK;MACrC,IAAIA,mBAAmB,KAAKJ,IAAI,IAAIC,cAAc,KAAK,IAAI,EAAE;QACzD,OAAOV,SAAS;MACpB;MAEA,OAAOS,IAAI;IACf,CAAC,CAAC;EACN,CAAC,EACD,CAACH,eAAe,CACpB,CAAC;EAED,MAAMV,4BAA4B,GAAGL,WAAW,CAAC,MAAM;IACnDiB,sBAAsB,CAAEM,KAAK,IAAKA,KAAK,GAAG,CAAC,CAAC;IAE5C,OAAO,MAAM;MACTN,sBAAsB,CAAEM,KAAK,IAAKA,KAAK,GAAG,CAAC,CAAC;IAChD,CAAC;EACL,CAAC,EAAE,CAACN,sBAAsB,CAAC,CAAC;EAE5B,MAAMO,aAAa,GAAGvB,OAAO,CACzB,OAAO;IACHI,4BAA4B;IAC5BC,mBAAmB,EAAEU,mBAAmB,GAAG,CAAC;IAC5CT,SAAS;IACTC,YAAY;IACZE;EACJ,CAAC,CAAC,EACF,CACIM,mBAAmB,EACnBX,4BAA4B,EAC5BE,SAAS,EACTC,YAAY,EACZE,kBAAkB,CAE1B,CAAC;EAED,oBACIX,KAAA,CAAA0B,aAAA,CAACtB,WAAW,CAACuB,QAAQ;IAACC,KAAK,EAAEH;EAAc,gBACvCzB,KAAA,CAAA0B,aAAA,CAAC3B,YAAY;IAAC8B,UAAU,EAAE;MAAEC,IAAI,EAAE;IAAQ;EAAE,gBACxC9B,KAAA,CAAA0B,aAAA,CAAC5B,eAAe;IAACiC,OAAO,EAAE;EAAM,GAAEhB,QAA0B,CAClD,CACI,CAAC;AAE/B,CAAC;AAEDF,IAAI,CAACD,WAAW,GAAG,MAAM;AAEzB,eAAeC,IAAI","ignoreList":[]}
+{"version":3,"file":"List.js","names":["AnimatePresence","MotionConfig","React","useCallback","useMemo","useState","ListContext","createContext","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","undefined","updateOpenItemUuid","displayName","List","children","setOpenItemUuid","expandableItemCount","setExpandableItemCount","uuid","shouldOnlyOpen","currentOpenItemUuid","count","providerValue","createElement","Provider","value","transition","type","initial"],"sources":["../../../../src/components/list/List.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'motion/react';\nimport React, { FC, ReactNode, useCallback, useMemo, useState } from 'react';\n\ninterface IListContext {\n    incrementExpandableItemCount: () => () => void;\n    isAnyItemExpandable: boolean;\n    isWrapped: boolean;\n    openItemUuid: string | undefined;\n    updateOpenItemUuid: (uuid: string, options?: { shouldOnlyOpen?: boolean }) => void;\n}\n\nexport const ListContext = React.createContext<IListContext>({\n    incrementExpandableItemCount: () => () => {},\n    isAnyItemExpandable: false,\n    isWrapped: false,\n    openItemUuid: undefined,\n    updateOpenItemUuid: () => {},\n});\n\nListContext.displayName = 'ListContext';\n\ntype ListProps = {\n    /**\n     * The items of the list\n     */\n    children: ReactNode;\n    /**\n     * This value must be set for nested AccordionGroup components. This adjusts the style of\n     * the head and the padding of the content accordions.\n     */\n    isWrapped?: boolean;\n};\n\nconst List: FC<ListProps> = ({ children, isWrapped = false }) => {\n    const [openItemUuid, setOpenItemUuid] = useState<IListContext['openItemUuid']>(undefined);\n    const [expandableItemCount, setExpandableItemCount] = useState<number>(0);\n\n    const updateOpenItemUuid = useCallback<IListContext['updateOpenItemUuid']>(\n        (uuid, { shouldOnlyOpen } = {}) => {\n            setOpenItemUuid((currentOpenItemUuid) => {\n                if (currentOpenItemUuid === uuid && shouldOnlyOpen !== true) {\n                    return undefined;\n                }\n\n                return uuid;\n            });\n        },\n        [setOpenItemUuid],\n    );\n\n    const incrementExpandableItemCount = useCallback(() => {\n        setExpandableItemCount((count) => count + 1);\n\n        return () => {\n            setExpandableItemCount((count) => count - 1);\n        };\n    }, [setExpandableItemCount]);\n\n    const providerValue = useMemo<IListContext>(\n        () => ({\n            incrementExpandableItemCount,\n            isAnyItemExpandable: expandableItemCount > 0,\n            isWrapped,\n            openItemUuid,\n            updateOpenItemUuid,\n        }),\n        [\n            expandableItemCount,\n            incrementExpandableItemCount,\n            isWrapped,\n            openItemUuid,\n            updateOpenItemUuid,\n        ],\n    );\n\n    return (\n        <ListContext.Provider value={providerValue}>\n            <MotionConfig transition={{ type: 'tween' }}>\n                <AnimatePresence initial={false}>{children}</AnimatePresence>\n            </MotionConfig>\n        </ListContext.Provider>\n    );\n};\n\nList.displayName = 'List';\n\nexport default List;\n"],"mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,QAAQ,cAAc;AAC5D,OAAOC,KAAK,IAAmBC,WAAW,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAU5E,OAAO,MAAMC,WAAW,gBAAGJ,KAAK,CAACK,aAAa,CAAe;EACzDC,4BAA4B,EAAEA,CAAA,KAAM,MAAM,CAAC,CAAC;EAC5CC,mBAAmB,EAAE,KAAK;EAC1BC,SAAS,EAAE,KAAK;EAChBC,YAAY,EAAEC,SAAS;EACvBC,kBAAkB,EAAEA,CAAA,KAAM,CAAC;AAC/B,CAAC,CAAC;AAEFP,WAAW,CAACQ,WAAW,GAAG,aAAa;AAcvC,MAAMC,IAAmB,GAAGA,CAAC;EAAEC,QAAQ;EAAEN,SAAS,GAAG;AAAM,CAAC,KAAK;EAC7D,MAAM,CAACC,YAAY,EAAEM,eAAe,CAAC,GAAGZ,QAAQ,CAA+BO,SAAS,CAAC;EACzF,MAAM,CAACM,mBAAmB,EAAEC,sBAAsB,CAAC,GAAGd,QAAQ,CAAS,CAAC,CAAC;EAEzE,MAAMQ,kBAAkB,GAAGV,WAAW,CAClC,CAACiB,IAAI,EAAE;IAAEC;EAAe,CAAC,GAAG,CAAC,CAAC,KAAK;IAC/BJ,eAAe,CAAEK,mBAAmB,IAAK;MACrC,IAAIA,mBAAmB,KAAKF,IAAI,IAAIC,cAAc,KAAK,IAAI,EAAE;QACzD,OAAOT,SAAS;MACpB;MAEA,OAAOQ,IAAI;IACf,CAAC,CAAC;EACN,CAAC,EACD,CAACH,eAAe,CACpB,CAAC;EAED,MAAMT,4BAA4B,GAAGL,WAAW,CAAC,MAAM;IACnDgB,sBAAsB,CAAEI,KAAK,IAAKA,KAAK,GAAG,CAAC,CAAC;IAE5C,OAAO,MAAM;MACTJ,sBAAsB,CAAEI,KAAK,IAAKA,KAAK,GAAG,CAAC,CAAC;IAChD,CAAC;EACL,CAAC,EAAE,CAACJ,sBAAsB,CAAC,CAAC;EAE5B,MAAMK,aAAa,GAAGpB,OAAO,CACzB,OAAO;IACHI,4BAA4B;IAC5BC,mBAAmB,EAAES,mBAAmB,GAAG,CAAC;IAC5CR,SAAS;IACTC,YAAY;IACZE;EACJ,CAAC,CAAC,EACF,CACIK,mBAAmB,EACnBV,4BAA4B,EAC5BE,SAAS,EACTC,YAAY,EACZE,kBAAkB,CAE1B,CAAC;EAED,oBACIX,KAAA,CAAAuB,aAAA,CAACnB,WAAW,CAACoB,QAAQ;IAACC,KAAK,EAAEH;EAAc,gBACvCtB,KAAA,CAAAuB,aAAA,CAACxB,YAAY;IAAC2B,UAAU,EAAE;MAAEC,IAAI,EAAE;IAAQ;EAAE,gBACxC3B,KAAA,CAAAuB,aAAA,CAACzB,eAAe;IAAC8B,OAAO,EAAE;EAAM,GAAEd,QAA0B,CAClD,CACI,CAAC;AAE/B,CAAC;AAEDD,IAAI,CAACD,WAAW,GAAG,MAAM;AAEzB,eAAeC,IAAI","ignoreList":[]}

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

@@ -1,40 +1,52 @@
-import { AnimatePresence } from 'framer-motion';
-import React, { useCallback, useContext, useEffect, useRef } from 'react';
+import { AnimatePresence, motion } from 'motion/react';
+import React, { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { useUuid } from '../../../hooks/uuid';
 import { AccordionContext } from '../../accordion/Accordion';
-import AreaContextProvider from '../../area-provider/AreaContextProvider';
+import AreaContextProvider, { AreaContext } from '../../area-provider/AreaContextProvider';
 import { ListContext } from '../List';
 import ListItemBody from './list-item-body/ListItemBody';
 import ListItemHead from './list-item-head/ListItemHead';
-import { StyledMotionListItem } from './ListItem.styles';
-const ListItem = _ref => {
-  let {
-    children,
-    hoverItem,
-    icons,
-    imageBackground,
-    images,
-    isDefaultOpen,
-    isOpen,
-    isTitleGreyed,
-    leftElements,
-    onClick,
-    onClose,
-    onLongPress,
-    onOpen,
-    rightElements,
-    shouldForceBackground = false,
-    shouldHideBottomLine = false,
-    shouldHideImageOrIconBackground,
-    shouldHideIndicator = false,
-    shouldOpenImageOnClick = false,
-    shouldPreventLayoutAnimation = false,
-    shouldShowRoundImageOrIcon,
-    shouldShowSeparatorBelow = false,
-    subtitle,
-    title,
-    titleElement
-  } = _ref;
+import { StyledListItem, StyledListItemTooltip } from './ListItem.styles';
+import Tooltip from '../../tooltip/Tooltip';
+import { LIST_ITEM_HTML_TAG } from '../../../constants/list';
+const ListItem = /*#__PURE__*/forwardRef(({
+  backgroundColor,
+  careOfLocationId,
+  children,
+  cornerImage,
+  hoverItem,
+  icons,
+  imageBackground,
+  images,
+  isDefaultOpen,
+  isOpen,
+  isTitleGreyed,
+  leftElements,
+  onClick,
+  onClose,
+  onLongPress,
+  onOpen,
+  rightElements,
+  shouldShowTooltipOnTitleOverflow = false,
+  shouldForceBackground = false,
+  shouldForceBottomLine = false,
+  shouldForceHover = false,
+  shouldHideBottomLine = false,
+  shouldOpenImageOnClick = false,
+  shouldHideImageOrIconBackground,
+  shouldHideIndicator = false,
+  shouldPreventLayoutAnimation = false,
+  shouldRenderClosed = false,
+  shouldShowRoundImageOrIcon,
+  shouldShowSeparatorBelow = false,
+  subtitle,
+  title,
+  onImageError,
+  onSizeChange,
+  titleElement,
+  shouldDisableAnimation = false,
+  cornerElement
+}, ref) => {
   const {
     incrementExpandableItemCount,
     isAnyItemExpandable,
@@ -45,12 +57,17 @@ const ListItem = _ref => {
   const {
     isWrapped: isParentAccordionWrapped
   } = useContext(AccordionContext);
+  const areaProvider = useContext(AreaContext);
   const isInitialRenderRef = useRef(true);
+  const listItemRef = useRef(null);
   const uuid = useUuid();
   const isExpandable = children !== undefined;
   const isItemOpen = isOpen ?? openItemUuid === uuid;
   const onCloseRef = useRef(onClose);
   const onOpenRef = useRef(onOpen);
+  const [shouldEnableTooltip, setShouldEnableTooltip] = useState(false);
+  const [titleWidth, setTitleWidth] = useState(0);
+  const [titleMaxWidth, setTitleMaxWidth] = useState(0);
   useEffect(() => {
     onCloseRef.current = onClose;
     onOpenRef.current = onOpen;
@@ -76,7 +93,7 @@ const ListItem = _ref => {
   }, [isExpandable, onClick, updateOpenItemUuid, uuid]);
   useEffect(() => {
     if (isExpandable && !shouldHideIndicator) {
-      // The incrementExpandableItemCount function returns an cleanup
+      // The incrementExpandableItemCount function returns a cleanup
       // function to decrement expandableItemCount if component unmounts
       return incrementExpandableItemCount();
     }
@@ -90,32 +107,65 @@ const ListItem = _ref => {
     }
   }, [isDefaultOpen, updateOpenItemUuid, uuid]);
   const isClickable = typeof onClick === 'function' || isExpandable;
-  return /*#__PURE__*/React.createElement(StyledMotionListItem, {
-    animate: {
+  useEffect(() => {
+    if (typeof onSizeChange === 'function') {
+      onSizeChange({
+        titleWidth,
+        titleMaxWidth
+      });
+    }
+  }, [onSizeChange, titleMaxWidth, titleWidth]);
+  useImperativeHandle(ref, () => ({
+    titleWidth,
+    titleMaxWidth
+  }), [titleMaxWidth, titleWidth]);
+  const handleTitleWidthChange = useCallback((width, maxWidth) => {
+    setTitleWidth(width);
+    setTitleMaxWidth(maxWidth);
+  }, []);
+  return /*#__PURE__*/React.createElement(StyledListItem, {
+    as: shouldDisableAnimation ? undefined : motion[LIST_ITEM_HTML_TAG],
+    animate: shouldDisableAnimation ? undefined : {
       height: 'auto',
       opacity: 1
     },
     className: "beta-chayns-list-item",
-    exit: {
+    exit: shouldDisableAnimation ? undefined : {
       height: 0,
       opacity: 0
     },
-    initial: {
+    initial: shouldDisableAnimation ? undefined : {
       height: 0,
       opacity: 0
     },
     key: `list-item-${uuid}`,
-    layout: shouldPreventLayoutAnimation ? undefined : 'position',
+    ref: listItemRef,
+    layout: shouldPreventLayoutAnimation || shouldDisableAnimation ? undefined : 'position',
+    $backgroundColor: backgroundColor,
     $isClickable: isClickable,
-    $isInAccordion: typeof isParentAccordionWrapped === 'boolean',
+    $isInAccordion: typeof isParentAccordionWrapped === 'boolean' && !areaProvider.shouldDisableListItemPadding,
     $isOpen: isItemOpen,
     $isWrapped: isWrapped,
+    $shouldChangeColor: areaProvider.shouldChangeColor,
     $shouldForceBackground: shouldForceBackground,
+    $shouldForceBottomLine: shouldForceBottomLine,
     $shouldHideBottomLine: shouldHideBottomLine,
     $shouldHideIndicator: shouldHideIndicator,
     $shouldShowSeparatorBelow: shouldShowSeparatorBelow
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    shouldUseFullWidth: true,
+    isDisabled: !shouldShowTooltipOnTitleOverflow || !shouldEnableTooltip,
+    item: /*#__PURE__*/React.createElement(StyledListItemTooltip, {
+      style: {
+        cursor: 'default'
+      },
+      key: `list-item-tooltip-${uuid}`
+    }, title)
   }, /*#__PURE__*/React.createElement(ListItemHead, {
     hoverItem: hoverItem,
+    careOfLocationId: careOfLocationId,
+    cornerElement: cornerElement,
+    cornerImage: cornerImage,
     icons: icons,
     imageBackground: imageBackground,
     images: images,
@@ -126,6 +176,7 @@ const ListItem = _ref => {
     leftElements: leftElements,
     onClick: isClickable ? handleHeadClick : undefined,
     onLongPress: onLongPress,
+    shouldForceHover: shouldForceHover,
     rightElements: rightElements,
     shouldHideImageOrIconBackground: shouldHideImageOrIconBackground,
     shouldHideIndicator: shouldHideIndicator,
@@ -133,13 +184,19 @@ const ListItem = _ref => {
     shouldShowRoundImageOrIcon: shouldShowRoundImageOrIcon,
     subtitle: subtitle,
     title: title,
-    titleElement: titleElement
-  }), /*#__PURE__*/React.createElement(AnimatePresence, {
+    onTitleWidthChange: handleTitleWidthChange,
+    titleElement: titleElement,
+    setShouldEnableTooltip: setShouldEnableTooltip,
+    shouldDisableAnimation: shouldDisableAnimation,
+    onImageError: onImageError
+  })), /*#__PURE__*/React.createElement(AnimatePresence, {
     initial: false
-  }, isExpandable && isItemOpen && /*#__PURE__*/React.createElement(ListItemBody, {
-    id: uuid
+  }, isExpandable && (isItemOpen || shouldRenderClosed) && /*#__PURE__*/React.createElement(ListItemBody, {
+    id: uuid,
+    key: `listItemBody-${uuid}`,
+    shouldHideBody: shouldRenderClosed && !isItemOpen
   }, /*#__PURE__*/React.createElement(AreaContextProvider, null, children))));
-};
+});
 ListItem.displayName = 'ListItem';
 export default ListItem;
 //# sourceMappingURL=ListItem.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","names":["AnimatePresence","React","useCallback","useContext","useEffect","useRef","useUuid","AccordionContext","AreaContextProvider","ListContext","ListItemBody","ListItemHead","StyledMotionListItem","ListItem","_ref","children","hoverItem","icons","imageBackground","images","isDefaultOpen","isOpen","isTitleGreyed","leftElements","onClick","onClose","onLongPress","onOpen","rightElements","shouldForceBackground","shouldHideBottomLine","shouldHideImageOrIconBackground","shouldHideIndicator","shouldOpenImageOnClick","shouldPreventLayoutAnimation","shouldShowRoundImageOrIcon","shouldShowSeparatorBelow","subtitle","title","titleElement","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","isParentAccordionWrapped","isInitialRenderRef","uuid","isExpandable","undefined","isItemOpen","onCloseRef","onOpenRef","current","handleHeadClick","event","shouldOnlyOpen","isClickable","createElement","animate","height","opacity","className","exit","initial","key","layout","$isClickable","$isInAccordion","$isOpen","$isWrapped","$shouldForceBackground","$shouldHideBottomLine","$shouldHideIndicator","$shouldShowSeparatorBelow","id","displayName"],"sources":["../../../../../src/components/list/list-item/ListItem.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    CSSProperties,\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    TouchEventHandler,\n    useCallback,\n    useContext,\n    useEffect,\n    useRef,\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     * The background of the image. This is only used if images are passed.\n     */\n    imageBackground?: CSSProperties['background'];\n    /**\n     * A list of image URLs that are displayed on the left side of the header.\n     * If multiple URLs are passed, the image is assembled from the first three\n     * image URLs as a puzzle.\n     */\n    images?: string[];\n    /**\n     * This can be used to automatically expand the `ListItem` during the first render.\n     */\n    isDefaultOpen?: boolean;\n    /**\n     * This overrides the internal opening state of the item and makes it controlled.\n     */\n    isOpen?: boolean;\n    /**\n     * Whether the ListItem locks disabled but has full functionality.\n     */\n    isTitleGreyed?: boolean;\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     * 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 ListItem is closed.\n     */\n    onClose?: VoidFunction;\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     * Function to be executed when the ListItem is opened.\n     */\n    onOpen?: VoidFunction;\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 bottom line should be hidden.\n     */\n    shouldHideBottomLine?: 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     * 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 should be opened on click.\n     */\n    shouldOpenImageOnClick?: boolean;\n    /**\n     * Whether the layout animation should be prevented. This is useful when the\n     * `ListItem` is used in a list with a lot of items and the layout animation\n     * is not desired.\n     */\n    shouldPreventLayoutAnimation?: 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    imageBackground,\n    images,\n    isDefaultOpen,\n    isOpen,\n    isTitleGreyed,\n    leftElements,\n    onClick,\n    onClose,\n    onLongPress,\n    onOpen,\n    rightElements,\n    shouldForceBackground = false,\n    shouldHideBottomLine = false,\n    shouldHideImageOrIconBackground,\n    shouldHideIndicator = false,\n    shouldOpenImageOnClick = false,\n    shouldPreventLayoutAnimation = false,\n    shouldShowRoundImageOrIcon,\n    shouldShowSeparatorBelow = false,\n    subtitle,\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 isInitialRenderRef = useRef(true);\n\n    const uuid = useUuid();\n\n    const isExpandable = children !== undefined;\n    const isItemOpen = isOpen ?? openItemUuid === uuid;\n\n    const onCloseRef = useRef(onClose);\n    const onOpenRef = useRef(onOpen);\n\n    useEffect(() => {\n        onCloseRef.current = onClose;\n        onOpenRef.current = onOpen;\n    }, [isOpen, onClose, onOpen]);\n\n    useEffect(() => {\n        if (isInitialRenderRef.current) {\n            isInitialRenderRef.current = false;\n        } else if (isItemOpen) {\n            if (typeof onOpenRef.current === 'function') {\n                onOpenRef.current();\n            }\n        } else if (typeof onCloseRef.current === 'function') {\n            onCloseRef.current();\n        }\n    }, [isItemOpen]);\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            layout={shouldPreventLayoutAnimation ? undefined : 'position'}\n            $isClickable={isClickable}\n            $isInAccordion={typeof isParentAccordionWrapped === 'boolean'}\n            $isOpen={isItemOpen}\n            $isWrapped={isWrapped}\n            $shouldForceBackground={shouldForceBackground}\n            $shouldHideBottomLine={shouldHideBottomLine}\n            $shouldHideIndicator={shouldHideIndicator}\n            $shouldShowSeparatorBelow={shouldShowSeparatorBelow}\n        >\n            <ListItemHead\n                hoverItem={hoverItem}\n                icons={icons}\n                imageBackground={imageBackground}\n                images={images}\n                isAnyItemExpandable={isAnyItemExpandable}\n                isExpandable={isExpandable}\n                isOpen={isItemOpen}\n                isTitleGreyed={isTitleGreyed}\n                leftElements={leftElements}\n                onClick={isClickable ? handleHeadClick : undefined}\n                onLongPress={onLongPress}\n                rightElements={rightElements}\n                shouldHideImageOrIconBackground={shouldHideImageOrIconBackground}\n                shouldHideIndicator={shouldHideIndicator}\n                shouldOpenImageOnClick={shouldOpenImageOnClick}\n                shouldShowRoundImageOrIcon={shouldShowRoundImageOrIcon}\n                subtitle={subtitle}\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","motion","React","forwardRef","useCallback","useContext","useEffect","useImperativeHandle","useRef","useState","useUuid","AccordionContext","AreaContextProvider","AreaContext","ListContext","ListItemBody","ListItemHead","StyledListItem","StyledListItemTooltip","Tooltip","LIST_ITEM_HTML_TAG","ListItem","backgroundColor","careOfLocationId","children","cornerImage","hoverItem","icons","imageBackground","images","isDefaultOpen","isOpen","isTitleGreyed","leftElements","onClick","onClose","onLongPress","onOpen","rightElements","shouldShowTooltipOnTitleOverflow","shouldForceBackground","shouldForceBottomLine","shouldForceHover","shouldHideBottomLine","shouldOpenImageOnClick","shouldHideImageOrIconBackground","shouldHideIndicator","shouldPreventLayoutAnimation","shouldRenderClosed","shouldShowRoundImageOrIcon","shouldShowSeparatorBelow","subtitle","title","onImageError","onSizeChange","titleElement","shouldDisableAnimation","cornerElement","ref","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","isParentAccordionWrapped","areaProvider","isInitialRenderRef","listItemRef","uuid","isExpandable","undefined","isItemOpen","onCloseRef","onOpenRef","shouldEnableTooltip","setShouldEnableTooltip","titleWidth","setTitleWidth","titleMaxWidth","setTitleMaxWidth","current","handleHeadClick","event","shouldOnlyOpen","isClickable","handleTitleWidthChange","width","maxWidth","createElement","as","animate","height","opacity","className","exit","initial","key","layout","$backgroundColor","$isClickable","$isInAccordion","shouldDisableListItemPadding","$isOpen","$isWrapped","$shouldChangeColor","shouldChangeColor","$shouldForceBackground","$shouldForceBottomLine","$shouldHideBottomLine","$shouldHideIndicator","$shouldShowSeparatorBelow","shouldUseFullWidth","isDisabled","item","style","cursor","onTitleWidthChange","id","shouldHideBody","displayName"],"sources":["../../../../../src/components/list/list-item/ListItem.tsx"],"sourcesContent":["import { AnimatePresence, motion } from 'motion/react';\nimport React, {\n    CSSProperties,\n    forwardRef,\n    MouseEventHandler,\n    ReactNode,\n    SyntheticEvent,\n    TouchEventHandler,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from 'react';\nimport { useUuid } from '../../../hooks/uuid';\nimport type { IListItemRightElements } from '../../../types/list';\nimport { AccordionContext } from '../../accordion/Accordion';\nimport AreaContextProvider, { AreaContext } from '../../area-provider/AreaContextProvider';\nimport { ListContext } from '../List';\nimport ListItemBody from './list-item-body/ListItemBody';\nimport ListItemHead from './list-item-head/ListItemHead';\nimport { StyledListItem, StyledListItemTooltip } from './ListItem.styles';\nimport Tooltip from '../../tooltip/Tooltip';\nimport { LIST_ITEM_HTML_TAG } from '../../../constants/list';\n\nexport type ListItemElements = [ReactNode, ...ReactNode[]];\n\nexport interface ListItemSize {\n    titleWidth: number;\n    titleMaxWidth: number;\n}\n\nexport type ListItemProps = {\n    /**\n     * The background color of the `ListItem`.\n     */\n    backgroundColor?: CSSProperties['backgroundColor'];\n    /**\n     * DEPRECATED: Use `cornerImage` instead.\n     */\n    careOfLocationId?: number;\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     * The image that is displayed in the bottom right corner of the grouped image of list item.\n     */\n    cornerImage?: string;\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     * The background of the image. This is only used if images are passed.\n     */\n    imageBackground?: CSSProperties['background'];\n    /**\n     * A list of image URLs that are displayed on the left side of the header.\n     * If multiple URLs are passed, the image is assembled from the first three\n     * image URLs as a puzzle.\n     */\n    images?: string[];\n    /**\n     * This can be used to automatically expand the `ListItem` during the first render.\n     */\n    isDefaultOpen?: boolean;\n    /**\n     * This overrides the internal opening state of the item and makes it controlled.\n     */\n    isOpen?: boolean;\n    /**\n     * Whether the ListItem locks disabled but has full functionality.\n     */\n    isTitleGreyed?: boolean;\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     * 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 ListItem is closed.\n     */\n    onClose?: VoidFunction;\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     * Function to be executed when the ListItem is opened.\n     */\n    onOpen?: VoidFunction;\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 line should be forced, e.g., so that it is also displayed if the item is the last element in the list.\n     */\n    shouldForceBottomLine?: boolean;\n    /**\n     * Whether the hover item should be forced.\n     */\n    shouldForceHover?: boolean;\n    /**\n     * Whether the bottom line should be hidden.\n     */\n    shouldHideBottomLine?: 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     * 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 should be opened on click.\n     */\n    shouldOpenImageOnClick?: boolean;\n    /**\n     * Whether the layout animation should be prevented. This is useful when the\n     * `ListItem` is used in a list with a lot of items and the layout animation\n     * is not desired.\n     */\n    shouldPreventLayoutAnimation?: boolean;\n    /**\n     * This will render the ListItem closed on the first render.\n     */\n    shouldRenderClosed?: boolean;\n    /**\n     * Whether the image or icon should be displayed in a round shape. This should always be 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     * Whether a Tooltip should be displayed on hover if the title is cut.\n     */\n    shouldShowTooltipOnTitleOverflow?: 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     * Whether the ListItem Animation should be disabled.\n     */\n    shouldDisableAnimation?: boolean;\n    /**\n     * Optional Element to display in the right corner of the image\n     */\n    cornerElement?: ReactNode;\n    /**\n     * Optional handler for image load errors.\n     */\n    onImageError?: (event: SyntheticEvent<HTMLImageElement, Event>, index: number) => void;\n    /**\n     * Function to be executed if the size are changed.\n     */\n    onSizeChange?: (sizes: ListItemSize) => void;\n};\n\nexport type ListItemRef = ListItemSize;\n\nconst ListItem = forwardRef<ListItemRef, ListItemProps>(\n    (\n        {\n            backgroundColor,\n            careOfLocationId,\n            children,\n            cornerImage,\n            hoverItem,\n            icons,\n            imageBackground,\n            images,\n            isDefaultOpen,\n            isOpen,\n            isTitleGreyed,\n            leftElements,\n            onClick,\n            onClose,\n            onLongPress,\n            onOpen,\n            rightElements,\n            shouldShowTooltipOnTitleOverflow = false,\n            shouldForceBackground = false,\n            shouldForceBottomLine = false,\n            shouldForceHover = false,\n            shouldHideBottomLine = false,\n            shouldOpenImageOnClick = false,\n            shouldHideImageOrIconBackground,\n            shouldHideIndicator = false,\n            shouldPreventLayoutAnimation = false,\n            shouldRenderClosed = false,\n            shouldShowRoundImageOrIcon,\n            shouldShowSeparatorBelow = false,\n            subtitle,\n            title,\n            onImageError,\n            onSizeChange,\n            titleElement,\n            shouldDisableAnimation = false,\n            cornerElement,\n        },\n        ref,\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 areaProvider = useContext(AreaContext);\n\n        const isInitialRenderRef = useRef(true);\n\n        const listItemRef = useRef<HTMLDivElement>(null);\n\n        const uuid = useUuid();\n\n        const isExpandable = children !== undefined;\n        const isItemOpen = isOpen ?? openItemUuid === uuid;\n\n        const onCloseRef = useRef(onClose);\n        const onOpenRef = useRef(onOpen);\n\n        const [shouldEnableTooltip, setShouldEnableTooltip] = useState(false);\n        const [titleWidth, setTitleWidth] = useState(0);\n        const [titleMaxWidth, setTitleMaxWidth] = useState(0);\n\n        useEffect(() => {\n            onCloseRef.current = onClose;\n            onOpenRef.current = onOpen;\n        }, [isOpen, onClose, onOpen]);\n\n        useEffect(() => {\n            if (isInitialRenderRef.current) {\n                isInitialRenderRef.current = false;\n            } else if (isItemOpen) {\n                if (typeof onOpenRef.current === 'function') {\n                    onOpenRef.current();\n                }\n            } else if (typeof onCloseRef.current === 'function') {\n                onCloseRef.current();\n            }\n        }, [isItemOpen]);\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 a 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        useEffect(() => {\n            if (typeof onSizeChange === 'function') {\n                onSizeChange({\n                    titleWidth,\n                    titleMaxWidth,\n                });\n            }\n        }, [onSizeChange, titleMaxWidth, titleWidth]);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                titleWidth,\n                titleMaxWidth,\n            }),\n            [titleMaxWidth, titleWidth],\n        );\n\n        const handleTitleWidthChange = useCallback((width: number, maxWidth: number) => {\n            setTitleWidth(width);\n            setTitleMaxWidth(maxWidth);\n        }, []);\n\n        return (\n            <StyledListItem\n                as={shouldDisableAnimation ? undefined : motion[LIST_ITEM_HTML_TAG]}\n                animate={shouldDisableAnimation ? undefined : { height: 'auto', opacity: 1 }}\n                className=\"beta-chayns-list-item\"\n                exit={shouldDisableAnimation ? undefined : { height: 0, opacity: 0 }}\n                initial={shouldDisableAnimation ? undefined : { height: 0, opacity: 0 }}\n                key={`list-item-${uuid}`}\n                ref={listItemRef}\n                layout={\n                    shouldPreventLayoutAnimation || shouldDisableAnimation ? undefined : 'position'\n                }\n                $backgroundColor={backgroundColor}\n                $isClickable={isClickable}\n                $isInAccordion={\n                    typeof isParentAccordionWrapped === 'boolean' &&\n                    !areaProvider.shouldDisableListItemPadding\n                }\n                $isOpen={isItemOpen}\n                $isWrapped={isWrapped}\n                $shouldChangeColor={areaProvider.shouldChangeColor}\n                $shouldForceBackground={shouldForceBackground}\n                $shouldForceBottomLine={shouldForceBottomLine}\n                $shouldHideBottomLine={shouldHideBottomLine}\n                $shouldHideIndicator={shouldHideIndicator}\n                $shouldShowSeparatorBelow={shouldShowSeparatorBelow}\n            >\n                <Tooltip\n                    shouldUseFullWidth\n                    isDisabled={!shouldShowTooltipOnTitleOverflow || !shouldEnableTooltip}\n                    item={\n                        <StyledListItemTooltip\n                            style={{ cursor: 'default' }}\n                            key={`list-item-tooltip-${uuid}`}\n                        >\n                            {title}\n                        </StyledListItemTooltip>\n                    }\n                >\n                    <ListItemHead\n                        hoverItem={hoverItem}\n                        careOfLocationId={careOfLocationId}\n                        cornerElement={cornerElement}\n                        cornerImage={cornerImage}\n                        icons={icons}\n                        imageBackground={imageBackground}\n                        images={images}\n                        isAnyItemExpandable={isAnyItemExpandable}\n                        isExpandable={isExpandable}\n                        isOpen={isItemOpen}\n                        isTitleGreyed={isTitleGreyed}\n                        leftElements={leftElements}\n                        onClick={isClickable ? handleHeadClick : undefined}\n                        onLongPress={onLongPress}\n                        shouldForceHover={shouldForceHover}\n                        rightElements={rightElements}\n                        shouldHideImageOrIconBackground={shouldHideImageOrIconBackground}\n                        shouldHideIndicator={shouldHideIndicator}\n                        shouldOpenImageOnClick={shouldOpenImageOnClick}\n                        shouldShowRoundImageOrIcon={shouldShowRoundImageOrIcon}\n                        subtitle={subtitle}\n                        title={title}\n                        onTitleWidthChange={handleTitleWidthChange}\n                        titleElement={titleElement}\n                        setShouldEnableTooltip={setShouldEnableTooltip}\n                        shouldDisableAnimation={shouldDisableAnimation}\n                        onImageError={onImageError}\n                    />\n                </Tooltip>\n                <AnimatePresence initial={false}>\n                    {isExpandable && (isItemOpen || shouldRenderClosed) && (\n                        <ListItemBody\n                            id={uuid}\n                            key={`listItemBody-${uuid}`}\n                            shouldHideBody={shouldRenderClosed && !isItemOpen}\n                        >\n                            <AreaContextProvider>{children}</AreaContextProvider>\n                        </ListItemBody>\n                    )}\n                </AnimatePresence>\n            </StyledListItem>\n        );\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

@@ -1,68 +1,85 @@
-import { motion } from 'framer-motion';
 import styled, { css } from 'styled-components';
-export const StyledMotionListItem = styled(motion.div)`
+import { LIST_ITEM_HTML_TAG } from '../../../constants/list';
+export const StyledListItem = styled[LIST_ITEM_HTML_TAG]`
     overflow: hidden;
     transition: background-color 0.3s ease;
 
-    ${_ref => {
-  let {
-    $isInAccordion,
-    $shouldHideIndicator
-  } = _ref;
-  return $isInAccordion && css`
+    ${({
+  $isInAccordion,
+  $shouldHideIndicator
+}) => $isInAccordion && css`
             padding-left: ${$shouldHideIndicator ? '16px' : '8px'};
-        `;
-}}
+        `}
 
-    ${_ref2 => {
-  let {
-    $isInAccordion,
-    $isOpen,
-    $shouldForceBackground,
-    theme
-  } = _ref2;
-  return (!$isInAccordion && $isOpen || $shouldForceBackground) && css`
-            background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});
-        `;
-}}
+    ${({
+  $isInAccordion,
+  $isOpen,
+  $shouldChangeColor,
+  $shouldForceBackground,
+  theme
+}) => (!$isInAccordion && $isOpen || $shouldForceBackground) && css`
+            background-color: rgba(
+                ${$shouldChangeColor ? theme['102-rgb'] : theme['100-rgb']},
+                ${theme.cardBackgroundOpacity}
+            );
+        `}
 
-    ${_ref3 => {
-  let {
-    $isClickable,
-    $isInAccordion,
-    theme
-  } = _ref3;
-  return $isClickable && !$isInAccordion && css`
+    ${({
+  $backgroundColor,
+  $isInAccordion,
+  $isOpen,
+  $shouldForceBackground
+}) => $backgroundColor && (!$isInAccordion && $isOpen || $shouldForceBackground) && css`
+            background-color: ${$backgroundColor} !important;
+        `}
+
+    ${({
+  $isClickable,
+  $isInAccordion,
+  $shouldChangeColor,
+  theme
+}) => $isClickable && !$isInAccordion && css`
             &&:hover {
-                background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});
-            }
-        `;
-}}
-    
-    ${_ref4 => {
-  let {
-    $isOpen,
-    $isInAccordion,
-    $isWrapped,
-    $shouldShowSeparatorBelow,
-    $shouldHideBottomLine,
-    theme
-  } = _ref4;
-  return ($shouldShowSeparatorBelow || (!$isOpen || $isWrapped || $isInAccordion) && theme.accordionLines && !$shouldHideBottomLine) && css`
-            &&:not(:last-child) {
-                border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid
-                    rgba(${theme['headline-rgb']}, 0.5);
+                background-color: rgba(
+                    ${$shouldChangeColor ? theme['102-rgb'] : theme['100-rgb']},
+                    ${theme.cardBackgroundOpacity}
+                );
             }
-        `;
+        `}
+
+    ${({
+  $isInAccordion,
+  $isOpen,
+  $isWrapped,
+  $shouldHideBottomLine,
+  $shouldForceBottomLine,
+  $shouldShowSeparatorBelow,
+  theme
+}) => {
+  if ($shouldShowSeparatorBelow || (!$isOpen || $isWrapped || $isInAccordion) && theme.accordionLines && !$shouldHideBottomLine) {
+    if ($shouldForceBottomLine) {
+      return css`
+                    border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid
+                        rgba(${theme['headline-rgb']}, 1);
+                `;
+    }
+    return css`
+                &&:not(:last-child) {
+                    border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid
+                        rgba(${theme['headline-rgb']}, 1);
+                }
+            `;
+  }
+  return undefined;
 }}
 
-    ${_ref5 => {
-  let {
-    $isWrapped
-  } = _ref5;
-  return $isWrapped && css`
+    ${({
+  $isWrapped
+}) => $isWrapped && css`
             padding-left: 26px;
-        `;
-}}
+        `}
+`;
+export const StyledListItemTooltip = styled.div`
+    padding: 6px;
 `;
 //# sourceMappingURL=ListItem.styles.js.map

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","$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":[]}
+{"version":3,"file":"ListItem.styles.js","names":["styled","css","LIST_ITEM_HTML_TAG","StyledListItem","$isInAccordion","$shouldHideIndicator","$isOpen","$shouldChangeColor","$shouldForceBackground","theme","cardBackgroundOpacity","$backgroundColor","$isClickable","$isWrapped","$shouldHideBottomLine","$shouldForceBottomLine","$shouldShowSeparatorBelow","accordionLines","undefined","StyledListItemTooltip","div"],"sources":["../../../../../src/components/list/list-item/ListItem.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { CSSProperties } from 'react';\nimport { LIST_ITEM_HTML_TAG } from '../../../constants/list';\n\ntype StyledListItemProps = WithTheme<{\n    $backgroundColor?: CSSProperties['backgroundColor'];\n    $isClickable: boolean;\n    $isInAccordion: boolean;\n    $isOpen: boolean;\n    $isWrapped: boolean;\n    $shouldChangeColor?: boolean;\n    $shouldForceBackground?: boolean;\n    $shouldForceBottomLine?: boolean;\n    $shouldHideBottomLine: boolean;\n    $shouldHideIndicator: boolean;\n    $shouldShowSeparatorBelow: boolean;\n}>;\n\nexport const StyledListItem = styled[LIST_ITEM_HTML_TAG]<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, $shouldChangeColor, $shouldForceBackground, theme }) =>\n        ((!$isInAccordion && $isOpen) || $shouldForceBackground) &&\n        css`\n            background-color: rgba(\n                ${$shouldChangeColor ? theme['102-rgb'] : theme['100-rgb']},\n                ${theme.cardBackgroundOpacity}\n            );\n        `}\n\n    ${({ $backgroundColor, $isInAccordion, $isOpen, $shouldForceBackground }) =>\n        $backgroundColor &&\n        ((!$isInAccordion && $isOpen) || $shouldForceBackground) &&\n        css`\n            background-color: ${$backgroundColor} !important;\n        `}\n\n    ${({ $isClickable, $isInAccordion, $shouldChangeColor, theme }) =>\n        $isClickable &&\n        !$isInAccordion &&\n        css`\n            &&:hover {\n                background-color: rgba(\n                    ${$shouldChangeColor ? theme['102-rgb'] : theme['100-rgb']},\n                    ${theme.cardBackgroundOpacity}\n                );\n            }\n        `}\n\n    ${({\n        $isInAccordion,\n        $isOpen,\n        $isWrapped,\n        $shouldHideBottomLine,\n        $shouldForceBottomLine,\n        $shouldShowSeparatorBelow,\n        theme,\n    }: StyledListItemProps) => {\n        if (\n            $shouldShowSeparatorBelow ||\n            ((!$isOpen || $isWrapped || $isInAccordion) &&\n                theme.accordionLines &&\n                !$shouldHideBottomLine)\n        ) {\n            if ($shouldForceBottomLine) {\n                return css`\n                    border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid\n                        rgba(${theme['headline-rgb']}, 1);\n                `;\n            }\n\n            return css`\n                &&:not(:last-child) {\n                    border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid\n                        rgba(${theme['headline-rgb']}, 1);\n                }\n            `;\n        }\n\n        return undefined;\n    }}\n\n    ${({ $isWrapped }) =>\n        $isWrapped &&\n        css`\n            padding-left: 26px;\n        `}\n`;\n\nexport const StyledListItemTooltip = styled.div`\n    padding: 6px;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,SAASC,kBAAkB,QAAQ,yBAAyB;AAgB5D,OAAO,MAAMC,cAAc,GAAGH,MAAM,CAACE,kBAAkB,CAAsB;AAC7E;AACA;AACA;AACA,MAAM,CAAC;EAAEE,cAAc;EAAEC;AAA0C,CAAC,KAC5DD,cAAc,IACdH,GAAG;AACX,4BAA4BI,oBAAoB,GAAG,MAAM,GAAG,KAAK;AACjE,SAAS;AACT;AACA,MAAM,CAAC;EAAED,cAAc;EAAEE,OAAO;EAAEC,kBAAkB;EAAEC,sBAAsB;EAAEC;AAAM,CAAC,KAC7E,CAAE,CAACL,cAAc,IAAIE,OAAO,IAAKE,sBAAsB,KACvDP,GAAG;AACX;AACA,kBAAkBM,kBAAkB,GAAGE,KAAK,CAAC,SAAS,CAAC,GAAGA,KAAK,CAAC,SAAS,CAAC;AAC1E,kBAAkBA,KAAK,CAACC,qBAAqB;AAC7C;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEC,gBAAgB;EAAEP,cAAc;EAAEE,OAAO;EAAEE;AAAuB,CAAC,KACpEG,gBAAgB,KACd,CAACP,cAAc,IAAIE,OAAO,IAAKE,sBAAsB,CAAC,IACxDP,GAAG;AACX,gCAAgCU,gBAAgB;AAChD,SAAS;AACT;AACA,MAAM,CAAC;EAAEC,YAAY;EAAER,cAAc;EAAEG,kBAAkB;EAAEE;AAAM,CAAC,KAC1DG,YAAY,IACZ,CAACR,cAAc,IACfH,GAAG;AACX;AACA;AACA,sBAAsBM,kBAAkB,GAAGE,KAAK,CAAC,SAAS,CAAC,GAAGA,KAAK,CAAC,SAAS,CAAC;AAC9E,sBAAsBA,KAAK,CAACC,qBAAqB;AACjD;AACA;AACA,SAAS;AACT;AACA,MAAM,CAAC;EACCN,cAAc;EACdE,OAAO;EACPO,UAAU;EACVC,qBAAqB;EACrBC,sBAAsB;EACtBC,yBAAyB;EACzBP;AACiB,CAAC,KAAK;EACvB,IACIO,yBAAyB,IACxB,CAAC,CAACV,OAAO,IAAIO,UAAU,IAAIT,cAAc,KACtCK,KAAK,CAACQ,cAAc,IACpB,CAACH,qBAAsB,EAC7B;IACE,IAAIC,sBAAsB,EAAE;MACxB,OAAOd,GAAG;AAC1B,qCAAqCe,yBAAyB,GAAG,KAAK,GAAG,KAAK;AAC9E,+BAA+BP,KAAK,CAAC,cAAc,CAAC;AACpD,iBAAiB;IACL;IAEA,OAAOR,GAAG;AACtB;AACA,qCAAqCe,yBAAyB,GAAG,KAAK,GAAG,KAAK;AAC9E,+BAA+BP,KAAK,CAAC,cAAc,CAAC;AACpD;AACA,aAAa;EACL;EAEA,OAAOS,SAAS;AACpB,CAAC;AACL;AACA,MAAM,CAAC;EAAEL;AAAW,CAAC,KACbA,UAAU,IACVZ,GAAG;AACX;AACA,SAAS;AACT,CAAC;AAED,OAAO,MAAMkB,qBAAqB,GAAGnB,MAAM,CAACoB,GAAG;AAC/C;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/list/list-item/list-item-body/ListItemBody.js

@@ -1,17 +1,16 @@
-import React, { useRef, useState } from 'react';
+import React, { useRef } from 'react';
 import { StyledMotionListItemBody } from './ListItemBody.styles';
-const ListItemBody = _ref => {
-  let {
-    children,
-    id
-  } = _ref;
+const ListItemBody = ({
+  children,
+  id,
+  shouldHideBody
+}) => {
   const containerRef = useRef(null);
-  const [height] = useState('auto');
   return /*#__PURE__*/React.createElement(StyledMotionListItemBody, {
     key: id,
     animate: {
-      height,
-      opacity: 1
+      height: shouldHideBody ? '0' : 'auto',
+      opacity: shouldHideBody ? 0 : 1
     },
     className: "beta-chayns-list-item-body",
     exit: {