@chayns-components/core 5.0.0-beta.10 → 5.0.0-beta.1000

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_uuid","_Accordion","_AreaContextProvider","_interopRequireDefault","_List","_ListItemBody","_ListItemHead","_ListItem","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ListItem","children","hoverItem","icons","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","useContext","ListContext","isParentAccordionWrapped","AccordionContext","isInitialRenderRef","useRef","uuid","useUuid","isExpandable","undefined","isItemOpen","onCloseRef","onOpenRef","useEffect","current","handleHeadClick","useCallback","event","shouldOnlyOpen","isClickable","createElement","StyledMotionListItem","animate","height","opacity","className","exit","initial","key","layout","$isClickable","$isInAccordion","$isOpen","$isWrapped","$shouldForceBackground","$shouldHideBottomLine","$shouldHideIndicator","$shouldShowSeparatorBelow","AnimatePresence","id","displayName","_default","exports"],"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":[]}

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

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledMotionListItem = void 0;
+var _framerMotion = require("framer-motion");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const StyledMotionListItem = exports.StyledMotionListItem = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    overflow: hidden;
+    transition: background-color 0.3s ease;
+
+    ${({
+  $isInAccordion,
+  $shouldHideIndicator
+}) => $isInAccordion && (0, _styledComponents.css)`
+            padding-left: ${$shouldHideIndicator ? '16px' : '8px'};
+        `}
+
+    ${({
+  $isInAccordion,
+  $isOpen,
+  $shouldForceBackground,
+  theme
+}) => (!$isInAccordion && $isOpen || $shouldForceBackground) && (0, _styledComponents.css)`
+            background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});
+        `}
+
+    ${({
+  $isClickable,
+  $isInAccordion,
+  theme
+}) => $isClickable && !$isInAccordion && (0, _styledComponents.css)`
+            &&:hover {
+                background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});
+            }
+        `}
+    
+    ${({
+  $isOpen,
+  $isInAccordion,
+  $isWrapped,
+  $shouldShowSeparatorBelow,
+  $shouldHideBottomLine,
+  theme
+}) => ($shouldShowSeparatorBelow || (!$isOpen || $isWrapped || $isInAccordion) && theme.accordionLines && !$shouldHideBottomLine) && (0, _styledComponents.css)`
+            &&:not(:last-child) {
+                border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid
+                    rgba(${theme['headline-rgb']}, 0.5);
+            }
+        `}
+
+    ${({
+  $isWrapped
+}) => $isWrapped && (0, _styledComponents.css)`
+            padding-left: 26px;
+        `}
+`;
+//# sourceMappingURL=ListItem.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledMotionListItem","exports","styled","motion","div","$isInAccordion","$shouldHideIndicator","css","$isOpen","$shouldForceBackground","theme","cardBackgroundOpacity","$isClickable","$isWrapped","$shouldShowSeparatorBelow","$shouldHideBottomLine","accordionLines"],"sources":["../../../../../src/components/list/list-item/ListItem.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemProps = WithTheme<{\n    $isClickable: boolean;\n    $isOpen: boolean;\n    $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,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAgD,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAF,wBAAAE,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAczC,MAAMW,oBAAoB,GAAAC,OAAA,CAAAD,oBAAA,GAAG,IAAAE,yBAAM,EAACC,oBAAM,CAACC,GAAG,CAAsB;AAC3E;AACA;AACA;AACA,MAAM,CAAC;EAAEC,cAAc;EAAEC;AAA0C,CAAC,KAC5DD,cAAc,IACd,IAAAE,qBAAG;AACX,4BAA4BD,oBAAoB,GAAG,MAAM,GAAG,KAAK;AACjE,SAAS;AACT;AACA,MAAM,CAAC;EAAED,cAAc;EAAEG,OAAO;EAACC,sBAAsB;EAAEC;AAAM,CAAC,KACxD,CAAE,CAACL,cAAc,IACjBG,OAAO,IAAKC,sBAAsB,KAClC,IAAAF,qBAAG;AACX,qCAAqCG,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACrF,SAAS;AACT;AACA,MAAM,CAAC;EAAEC,YAAY;EAAEP,cAAc;EAAEK;AAAM,CAAC,KACtCE,YAAY,IACZ,CAACP,cAAc,IACf,IAAAE,qBAAG;AACX;AACA,yCAAyCG,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACzF;AACA,SAAS;AACT;AACA,MAAM,CAAC;EACCH,OAAO;EACPH,cAAc;EACdQ,UAAU;EACVC,yBAAyB;EACtBC,qBAAqB;EACxBL;AACiB,CAAC,KAClB,CAACI,yBAAyB,IACrB,CAAC,CAACN,OAAO,IAAIK,UAAU,IAAIR,cAAc,KAAMK,KAAK,CAACM,cAAc,IAAI,CAACD,qBAAuB,KACpG,IAAAR,qBAAG;AACX;AACA,iCAAiCO,yBAAyB,GAAG,KAAK,GAAG,KAAK;AAC1E,2BAA2BJ,KAAK,CAAC,cAAc,CAAC;AAChD;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEG;AAAW,CAAC,KACbA,UAAU,IACV,IAAAN,qBAAG;AACX;AACA,SAAS;AACT,CAAC","ignoreList":[]}

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

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _ListItemBody = require("./ListItemBody.styles");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const ListItemBody = ({
+  children,
+  id
+}) => {
+  const containerRef = (0, _react.useRef)(null);
+  const [height] = (0, _react.useState)('auto');
+  return /*#__PURE__*/_react.default.createElement(_ListItemBody.StyledMotionListItemBody, {
+    key: id,
+    animate: {
+      height,
+      opacity: 1
+    },
+    className: "beta-chayns-list-item-body",
+    exit: {
+      height: 0,
+      opacity: 0
+    },
+    initial: {
+      height: 0,
+      opacity: 0
+    },
+    transition: {
+      type: 'tween'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: containerRef
+  }, children));
+};
+ListItemBody.displayName = 'ListItemBody';
+var _default = exports.default = ListItemBody;
+//# sourceMappingURL=ListItemBody.js.map

package/lib/cjs/components/list/list-item/list-item-body/ListItemBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemBody.js","names":["_react","_interopRequireWildcard","require","_ListItemBody","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ListItemBody","children","id","containerRef","useRef","height","useState","createElement","StyledMotionListItemBody","key","animate","opacity","className","exit","initial","transition","type","ref","displayName","_default","exports"],"sources":["../../../../../../src/components/list/list-item/list-item-body/ListItemBody.tsx"],"sourcesContent":["import React, { FC, ReactNode, useRef, useState } from 'react';\nimport { StyledMotionListItemBody } from './ListItemBody.styles';\n\ninterface ListItemBodyProps {\n    children?: ReactNode;\n    id: string;\n}\n\nconst ListItemBody: FC<ListItemBodyProps> = ({ children, id }) => {\n    const containerRef = useRef<HTMLDivElement | null>(null);\n    const [height] = useState<number | 'auto'>('auto');\n\n    return (\n        <StyledMotionListItemBody\n            key={id}\n            animate={{ height, opacity: 1 }}\n            className=\"beta-chayns-list-item-body\"\n            exit={{ height: 0, opacity: 0 }}\n            initial={{ height: 0, opacity: 0 }}\n            transition={{ type: 'tween' }}\n        >\n            <div ref={containerRef}>{children}</div>\n        </StyledMotionListItemBody>\n    );\n};\n\nListItemBody.displayName = 'ListItemBody';\n\nexport default ListItemBody;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AAAiE,SAAAE,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAJ,wBAAAI,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAOjE,MAAMW,YAAmC,GAAGA,CAAC;EAAEC,QAAQ;EAAEC;AAAG,CAAC,KAAK;EAC9D,MAAMC,YAAY,GAAG,IAAAC,aAAM,EAAwB,IAAI,CAAC;EACxD,MAAM,CAACC,MAAM,CAAC,GAAG,IAAAC,eAAQ,EAAkB,MAAM,CAAC;EAElD,oBACI9B,MAAA,CAAAU,OAAA,CAAAqB,aAAA,CAAC5B,aAAA,CAAA6B,wBAAwB;IACrBC,GAAG,EAAEP,EAAG;IACRQ,OAAO,EAAE;MAAEL,MAAM;MAAEM,OAAO,EAAE;IAAE,CAAE;IAChCC,SAAS,EAAC,4BAA4B;IACtCC,IAAI,EAAE;MAAER,MAAM,EAAE,CAAC;MAAEM,OAAO,EAAE;IAAE,CAAE;IAChCG,OAAO,EAAE;MAAET,MAAM,EAAE,CAAC;MAAEM,OAAO,EAAE;IAAE,CAAE;IACnCI,UAAU,EAAE;MAAEC,IAAI,EAAE;IAAQ;EAAE,gBAE9BxC,MAAA,CAAAU,OAAA,CAAAqB,aAAA;IAAKU,GAAG,EAAEd;EAAa,GAAEF,QAAc,CACjB,CAAC;AAEnC,CAAC;AAEDD,YAAY,CAACkB,WAAW,GAAG,cAAc;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAlC,OAAA,GAE3Bc,YAAY","ignoreList":[]}

package/lib/cjs/components/list/list-item/list-item-body/ListItemBody.styles.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledMotionListItemBody = void 0;
+var _framerMotion = require("framer-motion");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StyledMotionListItemBody = exports.StyledMotionListItemBody = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    overflow: hidden;
+`;
+//# sourceMappingURL=ListItemBody.styles.js.map

package/lib/cjs/components/list/list-item/list-item-body/ListItemBody.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemBody.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledMotionListItemBody","exports","styled","motion","div"],"sources":["../../../../../../src/components/list/list-item/list-item-body/ListItemBody.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { FramerMotionBugFix } from '../../../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledMotionListItemBody = styled(motion.div)<FramerMotionBugFix>`\n    overflow: hidden;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAGhC,MAAMG,wBAAwB,GAAAC,OAAA,CAAAD,wBAAA,GAAG,IAAAE,yBAAM,EAACC,oBAAM,CAACC,GAAG,CAAqB;AAC9E;AACA,CAAC","ignoreList":[]}

package/lib/cjs/components/list/list-item/list-item-content/ListItemContent.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ListItemContent = require("./ListItemContent.styles");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ListItemContent = ({
+  children
+}) => /*#__PURE__*/_react.default.createElement(_ListItemContent.StyledListItemContent, {
+  className: "beta-chayns-list-item-content"
+}, children);
+ListItemContent.displayName = 'ListItemContent';
+var _default = exports.default = ListItemContent;
+//# sourceMappingURL=ListItemContent.js.map

package/lib/cjs/components/list/list-item/list-item-content/ListItemContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemContent.js","names":["_react","_interopRequireDefault","require","_ListItemContent","e","__esModule","default","ListItemContent","children","createElement","StyledListItemContent","className","displayName","_default","exports"],"sources":["../../../../../../src/components/list/list-item/list-item-content/ListItemContent.tsx"],"sourcesContent":["import React, { FC, ReactNode } from 'react';\nimport { StyledListItemContent } from './ListItemContent.styles';\n\ntype ListItemContentProps = {\n    /**\n     * The Elements that should be shown inside the LIstItemContent\n     */\n    children: ReactNode;\n};\n\nconst ListItemContent: FC<ListItemContentProps> = ({ children }) => (\n    <StyledListItemContent className=\"beta-chayns-list-item-content\">\n        {children}\n    </StyledListItemContent>\n);\n\nListItemContent.displayName = 'ListItemContent';\n\nexport default ListItemContent;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAD,OAAA;AAAiE,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AASjE,MAAMG,eAAyC,GAAGA,CAAC;EAAEC;AAAS,CAAC,kBAC3DR,MAAA,CAAAM,OAAA,CAAAG,aAAA,CAACN,gBAAA,CAAAO,qBAAqB;EAACC,SAAS,EAAC;AAA+B,GAC3DH,QACkB,CAC1B;AAEDD,eAAe,CAACK,WAAW,GAAG,iBAAiB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAR,OAAA,GAEjCC,eAAe","ignoreList":[]}

package/lib/cjs/components/list/list-item/list-item-content/ListItemContent.styles.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledListItemContent = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StyledListItemContent = exports.StyledListItemContent = _styledComponents.default.div`
+    color: ${({
+  theme
+}) => theme.text};
+    padding: 9px 18px 8px 35px;
+`;
+//# sourceMappingURL=ListItemContent.styles.js.map

package/lib/cjs/components/list/list-item/list-item-content/ListItemContent.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemContent.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledListItemContent","exports","styled","div","theme","text"],"sources":["../../../../../../src/components/list/list-item/list-item-content/ListItemContent.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemContentProps = WithTheme<unknown>;\n\nexport const StyledListItemContent = styled.div`\n    color: ${({ theme }: StyledListItemContentProps) => theme.text};\n    padding: 9px 18px 8px 35px;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAKhC,MAAMG,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAGE,yBAAM,CAACC,GAAG;AAC/C,aAAa,CAAC;EAAEC;AAAkC,CAAC,KAAKA,KAAK,CAACC,IAAI;AAClE;AACA,CAAC","ignoreList":[]}

package/lib/cjs/components/list/list-item/list-item-head/ListItemHead.js

@@ -0,0 +1,171 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _useElementSize = require("../../../../hooks/useElementSize");
+var _Icon = _interopRequireDefault(require("../../../icon/Icon"));
+var _ListItemIcon = _interopRequireDefault(require("./list-item-icon/ListItemIcon"));
+var _ListItemImage = _interopRequireDefault(require("./list-item-image/ListItemImage"));
+var _ListItemRightElements = _interopRequireDefault(require("./list-item-right-elements/ListItemRightElements"));
+var _ListItemHead = require("./ListItemHead.styles");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const ListItemHead = ({
+  hoverItem,
+  icons,
+  imageBackground,
+  images,
+  isAnyItemExpandable,
+  isExpandable,
+  isOpen,
+  isTitleGreyed,
+  leftElements,
+  onClick,
+  onLongPress,
+  rightElements,
+  shouldHideImageOrIconBackground,
+  shouldHideIndicator,
+  shouldOpenImageOnClick,
+  shouldShowRoundImageOrIcon,
+  subtitle,
+  title,
+  titleElement
+}) => {
+  const [shouldShowHoverItem, setShouldShowHoverItem] = (0, _react.useState)(false);
+  const [headHeight, setHeadHeight] = (0, _react.useState)({
+    closed: 40,
+    open: 40
+  });
+  const [, setIsFirstRender] = (0, _react.useState)(false);
+  const longPressTimeoutRef = (0, _react.useRef)();
+  const pseudoTitleOpenRef = (0, _react.useRef)(null);
+  const pseudoTitleClosedRef = (0, _react.useRef)(null);
+  const pseudoSubtitleOpenRef = (0, _react.useRef)(null);
+  const pseudoSubtitleClosedRef = (0, _react.useRef)(null);
+  const closedTitle = (0, _useElementSize.useElementSize)(pseudoTitleClosedRef);
+  const openedTitle = (0, _useElementSize.useElementSize)(pseudoTitleOpenRef);
+  const closedSubtitle = (0, _useElementSize.useElementSize)(pseudoSubtitleClosedRef);
+  const openedSubtitle = (0, _useElementSize.useElementSize)(pseudoSubtitleOpenRef);
+  const shouldShowSubtitleRow = subtitle || typeof subtitle === 'string';
+  (0, _react.useEffect)(() => {
+    if (closedTitle && openedTitle) {
+      setHeadHeight({
+        closed: shouldShowSubtitleRow && closedSubtitle ? closedSubtitle.height + 4 + closedTitle.height + 24 : closedTitle.height + 24,
+        open: shouldShowSubtitleRow && openedSubtitle ? openedSubtitle.height + 4 + openedTitle.height + 24 : openedTitle.height + 24
+      });
+    }
+  }, [closedSubtitle, closedTitle, openedSubtitle, openedTitle, shouldShowSubtitleRow]);
+
+  // This is used to trigger a rerender, so the head height can be calculated
+  (0, _react.useEffect)(() => {
+    setIsFirstRender(true);
+  }, []);
+  const handleMouseEnter = (0, _react.useCallback)(() => setShouldShowHoverItem(true), []);
+  const handleMouseLeave = (0, _react.useCallback)(() => setShouldShowHoverItem(false), []);
+  const marginTop = (0, _react.useMemo)(() => {
+    const height = headHeight[isOpen ? 'open' : 'closed'];
+    if (height < 64) {
+      return (64 - height) / 2;
+    }
+    return 0;
+  }, [headHeight, isOpen]);
+  const handleTouchStart = (0, _react.useCallback)(event => {
+    longPressTimeoutRef.current = window.setTimeout(() => {
+      if (typeof onLongPress === 'function') {
+        onLongPress(event);
+      }
+    }, 400);
+  }, [onLongPress]);
+  const handleTouchEnd = (0, _react.useCallback)(() => {
+    clearTimeout(longPressTimeoutRef.current);
+  }, []);
+  const iconOrImageElement = (0, _react.useMemo)(() => {
+    if (icons) {
+      return /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, {
+        icons: icons,
+        shouldHideBackground: !!shouldHideImageOrIconBackground,
+        shouldShowRoundIcon: !!shouldShowRoundImageOrIcon
+      });
+    }
+    if (images) {
+      return /*#__PURE__*/_react.default.createElement(_ListItemImage.default, {
+        imageBackground: imageBackground,
+        images: images,
+        shouldOpenImageOnClick: shouldOpenImageOnClick,
+        shouldHideBackground: !!shouldHideImageOrIconBackground,
+        shouldShowRoundImage: !!shouldShowRoundImageOrIcon
+      });
+    }
+    return undefined;
+  }, [icons, imageBackground, images, shouldHideImageOrIconBackground, shouldOpenImageOnClick, shouldShowRoundImageOrIcon]);
+  return /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHead, {
+    animate: {
+      height: isOpen ? headHeight.open : headHeight.closed,
+      opacity: isTitleGreyed ? 0.5 : 1
+    },
+    initial: false,
+    transition: {
+      duration: 0.2,
+      type: 'tween'
+    },
+    className: "beta-chayns-list-item-head",
+    $isClickable: typeof onClick === 'function' || isExpandable,
+    $isAnyItemExpandable: isAnyItemExpandable,
+    onClick: onClick,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onTouchStart: typeof onLongPress === 'function' ? handleTouchStart : undefined,
+    onTouchEnd: typeof onLongPress === 'function' ? handleTouchEnd : undefined
+  }, /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadLeftWrapper, null, isAnyItemExpandable && /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledMotionListItemHeadIndicator, {
+    animate: {
+      rotate: isOpen ? 90 : 0
+    },
+    initial: false,
+    transition: {
+      type: 'tween'
+    }
+  }, isExpandable && !shouldHideIndicator && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icons: ['fa fa-chevron-right']
+  })), leftElements, iconOrImageElement), /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadContent, {
+    $isIconOrImageGiven: iconOrImageElement !== undefined,
+    $marginTop: marginTop,
+    $isOpen: isOpen
+  }, /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadTitle, null, /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadTitleContent, null, /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadTitleTextPseudo, {
+    ref: pseudoTitleOpenRef,
+    $isOpen: true
+  }, title), /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadTitleTextPseudo, {
+    ref: pseudoTitleClosedRef,
+    $isOpen: false
+  }, title), /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadTitleText, {
+    $isOpen: isOpen,
+    $width: (openedTitle === null || openedTitle === void 0 ? void 0 : openedTitle.width) ?? 0
+  }, title), /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadTitleElement, null, titleElement))), shouldShowSubtitleRow && /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadSubtitle, null, /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadSubtitleTextPseudo, {
+    ref: pseudoSubtitleOpenRef,
+    $isOpen: true
+  }, subtitle), /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadSubtitleTextPseudo, {
+    ref: pseudoSubtitleClosedRef,
+    $isOpen: false
+  }, subtitle), /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadSubtitleText, {
+    $isOpen: isOpen
+  }, subtitle))), rightElements && /*#__PURE__*/_react.default.createElement(_ListItemRightElements.default, {
+    rightElements: rightElements
+  }), hoverItem && /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledMotionListItemHeadHoverItem, {
+    animate: {
+      marginLeft: shouldShowHoverItem ? 8 : 0,
+      opacity: shouldShowHoverItem ? 1 : 0,
+      width: shouldShowHoverItem ? 'auto' : 0
+    },
+    initial: false,
+    transition: {
+      duration: 0.15,
+      type: 'tween'
+    }
+  }, hoverItem));
+};
+ListItemHead.displayName = 'ListItemHead';
+var _default = exports.default = ListItemHead;
+//# sourceMappingURL=ListItemHead.js.map

package/lib/cjs/components/list/list-item/list-item-head/ListItemHead.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemHead.js","names":["_react","_interopRequireWildcard","require","_useElementSize","_Icon","_interopRequireDefault","_ListItemIcon","_ListItemImage","_ListItemRightElements","_ListItemHead","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ListItemHead","hoverItem","icons","imageBackground","images","isAnyItemExpandable","isExpandable","isOpen","isTitleGreyed","leftElements","onClick","onLongPress","rightElements","shouldHideImageOrIconBackground","shouldHideIndicator","shouldOpenImageOnClick","shouldShowRoundImageOrIcon","subtitle","title","titleElement","shouldShowHoverItem","setShouldShowHoverItem","useState","headHeight","setHeadHeight","closed","open","setIsFirstRender","longPressTimeoutRef","useRef","pseudoTitleOpenRef","pseudoTitleClosedRef","pseudoSubtitleOpenRef","pseudoSubtitleClosedRef","closedTitle","useElementSize","openedTitle","closedSubtitle","openedSubtitle","shouldShowSubtitleRow","useEffect","height","handleMouseEnter","useCallback","handleMouseLeave","marginTop","useMemo","handleTouchStart","event","current","window","setTimeout","handleTouchEnd","clearTimeout","iconOrImageElement","createElement","shouldHideBackground","shouldShowRoundIcon","shouldShowRoundImage","undefined","StyledListItemHead","animate","opacity","initial","transition","duration","type","className","$isClickable","$isAnyItemExpandable","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","StyledListItemHeadLeftWrapper","StyledMotionListItemHeadIndicator","rotate","StyledListItemHeadContent","$isIconOrImageGiven","$marginTop","$isOpen","StyledListItemHeadTitle","StyledListItemHeadTitleContent","StyledListItemHeadTitleTextPseudo","ref","StyledListItemHeadTitleText","$width","width","StyledListItemHeadTitleElement","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleTextPseudo","StyledListItemHeadSubtitleText","StyledMotionListItemHeadHoverItem","marginLeft","displayName","_default","exports"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.tsx"],"sourcesContent":["import React, {\n    CSSProperties,\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    TouchEventHandler,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useElementSize } from '../../../../hooks/useElementSize';\nimport type { IListItemRightElements } from '../../../../types/list';\nimport Icon from '../../../icon/Icon';\nimport ListItemIcon from './list-item-icon/ListItemIcon';\nimport ListItemImage from './list-item-image/ListItemImage';\nimport ListItemRightElements from './list-item-right-elements/ListItemRightElements';\nimport {\n    StyledListItemHead,\n    StyledListItemHeadContent,\n    StyledListItemHeadLeftWrapper,\n    StyledListItemHeadSubtitle,\n    StyledListItemHeadSubtitleText,\n    StyledListItemHeadSubtitleTextPseudo,\n    StyledListItemHeadTitle,\n    StyledListItemHeadTitleContent,\n    StyledListItemHeadTitleElement,\n    StyledListItemHeadTitleText,\n    StyledListItemHeadTitleTextPseudo,\n    StyledMotionListItemHeadHoverItem,\n    StyledMotionListItemHeadIndicator,\n} from './ListItemHead.styles';\n\ninterface HeadHeight {\n    closed: number;\n    open: number;\n}\n\ntype ListItemHeadProps = {\n    hoverItem?: ReactNode;\n    icons?: string[];\n    imageBackground?: CSSProperties['background'];\n    images?: string[];\n    isAnyItemExpandable: boolean;\n    isExpandable: boolean;\n    isOpen: boolean;\n    isTitleGreyed?: boolean;\n    leftElements?: ReactNode;\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    onLongPress?: TouchEventHandler<HTMLDivElement>;\n    rightElements?: IListItemRightElements;\n    shouldHideImageOrIconBackground?: boolean;\n    shouldHideIndicator?: boolean;\n    shouldOpenImageOnClick: boolean;\n    shouldShowRoundImageOrIcon?: boolean;\n    subtitle?: ReactNode;\n    title: ReactNode;\n    titleElement?: ReactNode;\n};\n\nconst ListItemHead: FC<ListItemHeadProps> = ({\n    hoverItem,\n    icons,\n    imageBackground,\n    images,\n    isAnyItemExpandable,\n    isExpandable,\n    isOpen,\n    isTitleGreyed,\n    leftElements,\n    onClick,\n    onLongPress,\n    rightElements,\n    shouldHideImageOrIconBackground,\n    shouldHideIndicator,\n    shouldOpenImageOnClick,\n    shouldShowRoundImageOrIcon,\n    subtitle,\n    title,\n    titleElement,\n}) => {\n    const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);\n    const [headHeight, setHeadHeight] = useState<HeadHeight>({\n        closed: 40,\n        open: 40,\n    });\n    const [, setIsFirstRender] = useState(false);\n\n    const longPressTimeoutRef = useRef<number>();\n    const pseudoTitleOpenRef = useRef<HTMLDivElement>(null);\n    const pseudoTitleClosedRef = useRef<HTMLDivElement>(null);\n    const pseudoSubtitleOpenRef = useRef<HTMLDivElement>(null);\n    const pseudoSubtitleClosedRef = useRef<HTMLDivElement>(null);\n\n    const closedTitle = useElementSize(pseudoTitleClosedRef);\n    const openedTitle = useElementSize(pseudoTitleOpenRef);\n    const closedSubtitle = useElementSize(pseudoSubtitleClosedRef);\n    const openedSubtitle = useElementSize(pseudoSubtitleOpenRef);\n\n    const shouldShowSubtitleRow = subtitle || typeof subtitle === 'string';\n\n    useEffect(() => {\n        if (closedTitle && openedTitle) {\n            setHeadHeight({\n                closed:\n                    shouldShowSubtitleRow && closedSubtitle\n                        ? closedSubtitle.height + 4 + closedTitle.height + 24\n                        : closedTitle.height + 24,\n                open:\n                    shouldShowSubtitleRow && openedSubtitle\n                        ? openedSubtitle.height + 4 + openedTitle.height + 24\n                        : openedTitle.height + 24,\n            });\n        }\n    }, [closedSubtitle, closedTitle, openedSubtitle, openedTitle, shouldShowSubtitleRow]);\n\n    // This is used to trigger a rerender, so the head height can be calculated\n    useEffect(() => {\n        setIsFirstRender(true);\n    }, []);\n\n    const handleMouseEnter = useCallback(() => setShouldShowHoverItem(true), []);\n\n    const handleMouseLeave = useCallback(() => setShouldShowHoverItem(false), []);\n\n    const marginTop = useMemo(() => {\n        const height = headHeight[isOpen ? 'open' : 'closed'];\n\n        if (height < 64) {\n            return (64 - height) / 2;\n        }\n\n        return 0;\n    }, [headHeight, isOpen]);\n\n    const handleTouchStart = useCallback<TouchEventHandler<HTMLDivElement>>(\n        (event) => {\n            longPressTimeoutRef.current = window.setTimeout(() => {\n                if (typeof onLongPress === 'function') {\n                    onLongPress(event);\n                }\n            }, 400);\n        },\n        [onLongPress],\n    );\n\n    const handleTouchEnd = useCallback(() => {\n        clearTimeout(longPressTimeoutRef.current);\n    }, []);\n\n    const iconOrImageElement = useMemo(() => {\n        if (icons) {\n            return (\n                <ListItemIcon\n                    icons={icons}\n                    shouldHideBackground={!!shouldHideImageOrIconBackground}\n                    shouldShowRoundIcon={!!shouldShowRoundImageOrIcon}\n                />\n            );\n        }\n\n        if (images) {\n            return (\n                <ListItemImage\n                    imageBackground={imageBackground}\n                    images={images}\n                    shouldOpenImageOnClick={shouldOpenImageOnClick}\n                    shouldHideBackground={!!shouldHideImageOrIconBackground}\n                    shouldShowRoundImage={!!shouldShowRoundImageOrIcon}\n                />\n            );\n        }\n\n        return undefined;\n    }, [\n        icons,\n        imageBackground,\n        images,\n        shouldHideImageOrIconBackground,\n        shouldOpenImageOnClick,\n        shouldShowRoundImageOrIcon,\n    ]);\n\n    return (\n        <StyledListItemHead\n            animate={{\n                height: isOpen ? headHeight.open : headHeight.closed,\n                opacity: isTitleGreyed ? 0.5 : 1,\n            }}\n            initial={false}\n            transition={{ duration: 0.2, type: 'tween' }}\n            className=\"beta-chayns-list-item-head\"\n            $isClickable={typeof onClick === 'function' || isExpandable}\n            $isAnyItemExpandable={isAnyItemExpandable}\n            onClick={onClick}\n            onMouseEnter={handleMouseEnter}\n            onMouseLeave={handleMouseLeave}\n            onTouchStart={typeof onLongPress === 'function' ? handleTouchStart : undefined}\n            onTouchEnd={typeof onLongPress === 'function' ? handleTouchEnd : undefined}\n        >\n            <StyledListItemHeadLeftWrapper>\n                {isAnyItemExpandable && (\n                    <StyledMotionListItemHeadIndicator\n                        animate={{ rotate: isOpen ? 90 : 0 }}\n                        initial={false}\n                        transition={{ type: 'tween' }}\n                    >\n                        {isExpandable && !shouldHideIndicator && (\n                            <Icon icons={['fa fa-chevron-right']} />\n                        )}\n                    </StyledMotionListItemHeadIndicator>\n                )}\n                {leftElements}\n                {iconOrImageElement}\n            </StyledListItemHeadLeftWrapper>\n            <StyledListItemHeadContent\n                $isIconOrImageGiven={iconOrImageElement !== undefined}\n                $marginTop={marginTop}\n                $isOpen={isOpen}\n            >\n                <StyledListItemHeadTitle>\n                    <StyledListItemHeadTitleContent>\n                        <StyledListItemHeadTitleTextPseudo ref={pseudoTitleOpenRef} $isOpen>\n                            {title}\n                        </StyledListItemHeadTitleTextPseudo>\n                        <StyledListItemHeadTitleTextPseudo\n                            ref={pseudoTitleClosedRef}\n                            $isOpen={false}\n                        >\n                            {title}\n                        </StyledListItemHeadTitleTextPseudo>\n                        <StyledListItemHeadTitleText\n                            $isOpen={isOpen}\n                            $width={openedTitle?.width ?? 0}\n                        >\n                            {title}\n                        </StyledListItemHeadTitleText>\n                        <StyledListItemHeadTitleElement>\n                            {titleElement}\n                        </StyledListItemHeadTitleElement>\n                    </StyledListItemHeadTitleContent>\n                </StyledListItemHeadTitle>\n                {shouldShowSubtitleRow && (\n                    <StyledListItemHeadSubtitle>\n                        <StyledListItemHeadSubtitleTextPseudo ref={pseudoSubtitleOpenRef} $isOpen>\n                            {subtitle}\n                        </StyledListItemHeadSubtitleTextPseudo>\n                        <StyledListItemHeadSubtitleTextPseudo\n                            ref={pseudoSubtitleClosedRef}\n                            $isOpen={false}\n                        >\n                            {subtitle}\n                        </StyledListItemHeadSubtitleTextPseudo>\n                        <StyledListItemHeadSubtitleText $isOpen={isOpen}>\n                            {subtitle}\n                        </StyledListItemHeadSubtitleText>\n                    </StyledListItemHeadSubtitle>\n                )}\n            </StyledListItemHeadContent>\n            {rightElements && <ListItemRightElements rightElements={rightElements} />}\n            {hoverItem && (\n                <StyledMotionListItemHeadHoverItem\n                    animate={{\n                        marginLeft: shouldShowHoverItem ? 8 : 0,\n                        opacity: shouldShowHoverItem ? 1 : 0,\n                        width: shouldShowHoverItem ? 'auto' : 0,\n                    }}\n                    initial={false}\n                    transition={{ duration: 0.15, type: 'tween' }}\n                >\n                    {hoverItem}\n                </StyledMotionListItemHeadHoverItem>\n            )}\n        </StyledListItemHead>\n    );\n};\n\nListItemHead.displayName = 'ListItemHead';\n\nexport default ListItemHead;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/list/list-item/list-item-head/ListItemHead.styles.js

@@ -0,0 +1,156 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledMotionListItemHeadIndicator = exports.StyledMotionListItemHeadHoverItem = exports.StyledListItemHeadTitleTextPseudo = exports.StyledListItemHeadTitleText = exports.StyledListItemHeadTitleElement = exports.StyledListItemHeadTitleContent = exports.StyledListItemHeadTitle = exports.StyledListItemHeadSubtitleTextPseudo = exports.StyledListItemHeadSubtitleText = exports.StyledListItemHeadSubtitle = exports.StyledListItemHeadLeftWrapper = exports.StyledListItemHeadContent = exports.StyledListItemHead = void 0;
+var _framerMotion = require("framer-motion");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const StyledListItemHead = exports.StyledListItemHead = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    //align-items: center;
+    overflow: hidden;
+    color: ${({
+  theme
+}) => theme.text};
+    display: flex;
+    min-height: 64px;
+    padding: 12px 9px;
+
+    ${({
+  $isAnyItemExpandable
+}) => !$isAnyItemExpandable && (0, _styledComponents.css)`
+            padding-left: 12px;
+        `}
+
+    ${({
+  $isClickable
+}) => $isClickable && (0, _styledComponents.css)`
+            cursor: pointer;
+        `}
+`;
+const StyledListItemHeadLeftWrapper = exports.StyledListItemHeadLeftWrapper = _styledComponents.default.div`
+    display: flex;
+    align-items: center;
+    margin: auto 0;
+`;
+const StyledMotionListItemHeadIndicator = exports.StyledMotionListItemHeadIndicator = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    align-items: center;
+    display: flex;
+    flex: 0 0 auto;
+    height: 26px;
+    justify-content: center;
+    width: 26px;
+`;
+const StyledListItemHeadContent = exports.StyledListItemHeadContent = _styledComponents.default.div`
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    font-weight: ${({
+  $isOpen
+}) => $isOpen ? 'bold' : 'normal'};
+    justify-content: start;
+    line-height: normal;
+    margin-left: ${({
+  $isIconOrImageGiven
+}) => $isIconOrImageGiven ? '10px' : undefined};
+    margin-top: ${({
+  $marginTop
+}) => $marginTop}px;
+    min-width: 0;
+`;
+const StyledListItemHeadTitle = exports.StyledListItemHeadTitle = _styledComponents.default.div`
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+`;
+const StyledListItemHeadTitleContent = exports.StyledListItemHeadTitleContent = _styledComponents.default.div`
+    display: flex;
+    flex: 1 1 auto;
+    max-width: 100%;
+    min-width: 0;
+    position: relative;
+`;
+const StyledListItemHeadTitleElement = exports.StyledListItemHeadTitleElement = _styledComponents.default.div`
+    align-items: center;
+    display: flex;
+    flex: 0 0 auto;
+    margin-left: 8px;
+`;
+const StyledListItemHeadTitleText = exports.StyledListItemHeadTitleText = (0, _styledComponents.default)(_framerMotion.motion.span)`
+    font-weight: ${({
+  $isOpen
+}) => $isOpen ? 'bold' : 'normal'};
+    white-space: ${({
+  $isOpen
+}) => $isOpen ? 'normal' : 'nowrap'};
+    min-width: ${({
+  $isOpen,
+  $width
+}) => $isOpen ? `${$width}px` : undefined};
+    overflow: hidden;
+    text-overflow: ellipsis;
+`;
+const StyledListItemHeadTitleTextPseudo = exports.StyledListItemHeadTitleTextPseudo = _styledComponents.default.span`
+    font-weight: ${({
+  $isOpen
+}) => $isOpen ? 'bold' : 'normal'};
+    white-space: ${({
+  $isOpen
+}) => $isOpen ? 'normal' : 'nowrap'};
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    opacity: 0;
+    pointer-events: none;
+    user-select: none;
+    position: absolute;
+`;
+const StyledListItemHeadSubtitle = exports.StyledListItemHeadSubtitle = _styledComponents.default.div`
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    margin-top: 2px;
+`;
+const StyledListItemHeadSubtitleText = exports.StyledListItemHeadSubtitleText = _styledComponents.default.span`
+    font-weight: ${({
+  $isOpen
+}) => $isOpen ? 'bold' : 'normal'};
+    white-space: ${({
+  $isOpen
+}) => $isOpen ? 'normal' : 'nowrap'};
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    flex: 1 1 auto;
+    font-size: 85%;
+    min-width: 0;
+    opacity: 0.75;
+`;
+const StyledListItemHeadSubtitleTextPseudo = exports.StyledListItemHeadSubtitleTextPseudo = _styledComponents.default.span`
+    font-weight: ${({
+  $isOpen
+}) => $isOpen ? 'bold' : 'normal'};
+    white-space: ${({
+  $isOpen
+}) => $isOpen ? 'normal' : 'nowrap'};
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    flex: 1 1 auto;
+    font-size: 85%;
+    min-width: 0;
+
+    opacity: 0;
+    pointer-events: none;
+    user-select: none;
+
+    position: absolute;
+`;
+const StyledMotionListItemHeadHoverItem = exports.StyledMotionListItemHeadHoverItem = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    overflow: hidden;
+    flex-shrink: 0;
+    margin: auto 0;
+`;
+//# sourceMappingURL=ListItemHead.styles.js.map

package/lib/cjs/components/list/list-item/list-item-head/ListItemHead.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemHead.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledListItemHead","exports","styled","motion","div","theme","text","$isAnyItemExpandable","css","$isClickable","StyledListItemHeadLeftWrapper","StyledMotionListItemHeadIndicator","StyledListItemHeadContent","$isOpen","$isIconOrImageGiven","undefined","$marginTop","StyledListItemHeadTitle","StyledListItemHeadTitleContent","StyledListItemHeadTitleElement","StyledListItemHeadTitleText","span","$width","StyledListItemHeadTitleTextPseudo","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleText","StyledListItemHeadSubtitleTextPseudo","StyledMotionListItemHeadHoverItem"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type {\n    FramerMotionBugFix,\n    WithTheme,\n} from '../../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemHeadProps = WithTheme<{\n    $isClickable: boolean;\n    $isAnyItemExpandable: boolean;\n}>;\n\nexport const StyledListItemHead = styled(motion.div)<StyledListItemHeadProps>`\n    //align-items: center;\n    overflow: hidden;\n    color: ${({ theme }: StyledListItemHeadProps) => theme.text};\n    display: flex;\n    min-height: 64px;\n    padding: 12px 9px;\n\n    ${({ $isAnyItemExpandable }) =>\n        !$isAnyItemExpandable &&\n        css`\n            padding-left: 12px;\n        `}\n\n    ${({ $isClickable }) =>\n        $isClickable &&\n        css`\n            cursor: pointer;\n        `}\n`;\n\nexport const StyledListItemHeadLeftWrapper = styled.div`\n    display: flex;\n    align-items: center;\n    margin: auto 0;\n`;\n\nexport const StyledMotionListItemHeadIndicator = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    display: flex;\n    flex: 0 0 auto;\n    height: 26px;\n    justify-content: center;\n    width: 26px;\n`;\n\ntype StyledListItemHeadContentProps = {\n    $isIconOrImageGiven: boolean;\n    $isOpen: boolean;\n    $marginTop: number;\n};\n\nexport const StyledListItemHeadContent = styled.div<StyledListItemHeadContentProps>`\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    font-weight: ${({ $isOpen }) => ($isOpen ? 'bold' : 'normal')};\n    justify-content: start;\n    line-height: normal;\n    margin-left: ${({ $isIconOrImageGiven }) => ($isIconOrImageGiven ? '10px' : undefined)};\n    margin-top: ${({ $marginTop }) => $marginTop}px;\n    min-width: 0;\n`;\n\nexport const StyledListItemHeadTitle = styled.div`\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n`;\n\nexport const StyledListItemHeadTitleContent = styled.div`\n    display: flex;\n    flex: 1 1 auto;\n    max-width: 100%;\n    min-width: 0;\n    position: relative;\n`;\n\nexport const StyledListItemHeadTitleElement = styled.div`\n    align-items: center;\n    display: flex;\n    flex: 0 0 auto;\n    margin-left: 8px;\n`;\n\ntype StyledListItemHeadTitleTextProps = WithTheme<{ $isOpen: boolean; $width: number }>;\n\nexport const StyledListItemHeadTitleText = styled(motion.span)<StyledListItemHeadTitleTextProps>`\n    font-weight: ${({ $isOpen }) => ($isOpen ? 'bold' : 'normal')};\n    white-space: ${({ $isOpen }) => ($isOpen ? 'normal' : 'nowrap')};\n    min-width: ${({ $isOpen, $width }) => ($isOpen ? `${$width}px` : undefined)};\n    overflow: hidden;\n    text-overflow: ellipsis;\n`;\n\ntype StyledListItemHeadTitleTextPseudoProps = WithTheme<{ $isOpen: boolean }>;\n\nexport const StyledListItemHeadTitleTextPseudo = styled.span<StyledListItemHeadTitleTextPseudoProps>`\n    font-weight: ${({ $isOpen }) => ($isOpen ? 'bold' : 'normal')};\n    white-space: ${({ $isOpen }) => ($isOpen ? 'normal' : 'nowrap')};\n    overflow: hidden;\n    text-overflow: ellipsis;\n\n    opacity: 0;\n    pointer-events: none;\n    user-select: none;\n    position: absolute;\n`;\n\nexport const StyledListItemHeadSubtitle = styled.div`\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n    margin-top: 2px;\n`;\n\ntype StyledListItemHeadSubtitleTextProps = WithTheme<{ $isOpen: boolean }>;\n\nexport const StyledListItemHeadSubtitleText = styled.span<StyledListItemHeadSubtitleTextProps>`\n    font-weight: ${({ $isOpen }) => ($isOpen ? 'bold' : 'normal')};\n    white-space: ${({ $isOpen }) => ($isOpen ? 'normal' : 'nowrap')};\n    overflow: hidden;\n    text-overflow: ellipsis;\n\n    flex: 1 1 auto;\n    font-size: 85%;\n    min-width: 0;\n    opacity: 0.75;\n`;\n\ntype StyledListItemHeadSubtitleTextPseudoProps = WithTheme<{ $isOpen: boolean }>;\n\nexport const StyledListItemHeadSubtitleTextPseudo = styled.span<StyledListItemHeadSubtitleTextPseudoProps>`\n    font-weight: ${({ $isOpen }) => ($isOpen ? 'bold' : 'normal')};\n    white-space: ${({ $isOpen }) => ($isOpen ? 'normal' : 'nowrap')};\n    overflow: hidden;\n    text-overflow: ellipsis;\n\n    flex: 1 1 auto;\n    font-size: 85%;\n    min-width: 0;\n\n    opacity: 0;\n    pointer-events: none;\n    user-select: none;\n\n    position: absolute;\n`;\n\nexport const StyledMotionListItemHeadHoverItem = styled(motion.div)<FramerMotionBugFix>`\n    overflow: hidden;\n    flex-shrink: 0;\n    margin: auto 0;\n`;\n"],"mappings":"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","ignoreList":[]}