@chayns-components/core 5.3.8 → 5.3.10

package/AGENTS.md

@@ -1,8 +1,8 @@
 # @chayns-components/core
 
-React component package providing 45 documented components for chayns applications.
+React component package providing 46 documented components for chayns applications.
 
-Documented components: `Accordion`, `AmountControl`, `AnimatedNumber`, `Badge`, `Button`, `Checkbox`, `ComboBox`, `ContentCard`, `ContextMenu`, `ExpandableContent`, `FileInput`, `FileList`, `FileSelect`, `Filter`, `FilterButtons`, `GridImage`, `GroupedImage`, `HighlightSlider`, `Icon`, `Input`, `List`, `MentionFinder`, `MultiActionButton`, `NumberInput`, `Popup`, `ProgressBar`, `RadioButton`, `ScrollView`, `SearchBox`, `SearchInput`, `SelectButton`, `SetupWizard`, `SetupWizardItem`, `SharingBar`, `SharingButton`, `Signature`, `Skeleton`, `Slider`, `SliderButton`, `SmallWaitCursor`, `TagInput`, `TextArea`, `Tooltip`, `Truncation`, `VerificationBadge`.
+Documented components: `Accordion`, `AmountControl`, `AnimatedNumber`, `Badge`, `Button`, `Checkbox`, `ComboBox`, `ContentCard`, `ContextMenu`, `ExpandableContent`, `FileInput`, `FileList`, `FileSelect`, `Filter`, `FilterButtons`, `GridImage`, `GroupedImage`, `HighlightSlider`, `Icon`, `Input`, `List`, `Masonry`, `MentionFinder`, `MultiActionButton`, `NumberInput`, `Popup`, `ProgressBar`, `RadioButton`, `ScrollView`, `SearchBox`, `SearchInput`, `SelectButton`, `SetupWizard`, `SetupWizardItem`, `SharingBar`, `SharingButton`, `Signature`, `Skeleton`, `Slider`, `SliderButton`, `SmallWaitCursor`, `TagInput`, `TextArea`, `Tooltip`, `Truncation`, `VerificationBadge`.
 
 ## Import
 
@@ -39,6 +39,7 @@ import { Accordion, AmountControl, AnimatedNumber } from '@chayns-components/cor
 - `Icon`
 - `Input`
 - `List`
+- `Masonry`
 - `MentionFinder`
 - `MultiActionButton`
 - `NumberInput`
@@ -3006,6 +3007,64 @@ No additional exported types documented.
 
 ### Anti Patterns
 
+- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
+## Masonry
+
+`Masonry` is exported by `@chayns-components/core` and should be imported from the public package entry point.
+
+### Import
+
+```ts
+import { Masonry } from '@chayns-components/core';
+```
+
+### Examples
+
+#### General
+
+```tsx
+<Masonry
+    gap={16}
+    columnWidth={160}
+    rowHeight={80}
+/>
+```
+
+#### Packed
+
+```tsx
+<Masonry
+    gap={16}
+    columnWidth={160}
+    rowHeight={80}
+/>
+```
+
+#### Dynamic
+
+```tsx
+<Masonry
+    gap={16}
+    columnWidth={160}
+    rowHeight={80}
+/>
+```
+
+### Props
+
+No prop documentation available.
+
+### Types
+
+No additional exported types documented.
+
+### Usage Notes
+
+- Import `Masonry` directly from `@chayns-components/core` instead of internal source paths.
+- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
+
+### Anti Patterns
+
 - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
 ## MentionFinder
 

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

@@ -14,6 +14,7 @@ var _ListItemBody = _interopRequireDefault(require("./list-item-body/ListItemBod
 var _ListItemHead = _interopRequireDefault(require("./list-item-head/ListItemHead"));
 var _ListItem = require("./ListItem.styles");
 var _Tooltip = _interopRequireDefault(require("../../tooltip/Tooltip"));
+var _element = require("../../../hooks/element");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const ListItem = /*#__PURE__*/(0, _react2.forwardRef)(({
@@ -52,7 +53,8 @@ const ListItem = /*#__PURE__*/(0, _react2.forwardRef)(({
   onSizeChange,
   titleElement,
   shouldDisableAnimation = false,
-  cornerElement
+  cornerElement,
+  isSelected = false
 }, ref) => {
   const {
     isAnyItemExpandable,
@@ -66,6 +68,7 @@ const ListItem = /*#__PURE__*/(0, _react2.forwardRef)(({
   const areaProvider = (0, _react2.useContext)(_AreaContextProvider.AreaContext);
   const isInitialRenderRef = (0, _react2.useRef)(true);
   const listItemRef = (0, _react2.useRef)(null);
+  const isInDialog = (0, _element.useIsInsideDialog)(listItemRef);
   const uuid = (0, _uuid.useUuid)();
   const isExpandable = children !== undefined;
   const isItemOpen = isOpen ?? openItemUuid === uuid;
@@ -144,6 +147,8 @@ const ListItem = /*#__PURE__*/(0, _react2.forwardRef)(({
     $isInAccordion: typeof isParentAccordionWrapped === 'boolean' && !areaProvider.shouldDisableListItemPadding,
     $isOpen: isItemOpen,
     $isWrapped: isWrapped,
+    $isInDialog: isInDialog,
+    $isSelected: isSelected,
     $shouldChangeColor: areaProvider.shouldChangeColor,
     $shouldForceBackground: shouldForceBackground,
     $shouldForceBottomLine: shouldForceBottomLine,

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

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","names":["_react","require","_react2","_interopRequireWildcard","_uuid","_Accordion","_AreaContextProvider","_List","_ListItemBody","_interopRequireDefault","_ListItemHead","_ListItem","_Tooltip","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ListItem","forwardRef","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","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","useContext","ListContext","isParentAccordionWrapped","AccordionContext","areaProvider","AreaContext","isInitialRenderRef","useRef","listItemRef","uuid","useUuid","isExpandable","undefined","isItemOpen","onCloseRef","onOpenRef","shouldEnableTooltip","setShouldEnableTooltip","useState","titleWidth","setTitleWidth","titleMaxWidth","setTitleMaxWidth","useEffect","current","handleHeadClick","useCallback","event","shouldOnlyOpen","isClickable","useImperativeHandle","handleTitleWidthChange","width","maxWidth","createElement","StyledListItem","as","motion","div","animate","height","opacity","className","exit","initial","key","layout","$backgroundColor","$isClickable","$isInAccordion","shouldDisableListItemPadding","$isOpen","$isWrapped","$shouldChangeColor","shouldChangeColor","$shouldForceBackground","$shouldForceBottomLine","$shouldHideBottomLine","$shouldHideIndicator","$shouldShowSeparatorBelow","shouldUseFullWidth","isDisabled","item","StyledListItemTooltip","style","cursor","onTitleWidthChange","AnimatePresence","id","shouldHideBody","displayName","_default","exports"],"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';\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 { isAnyItemExpandable, isWrapped, openItemUuid, 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 (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.div}\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":[]}
+{"version":3,"file":"ListItem.js","names":["_react","require","_react2","_interopRequireWildcard","_uuid","_Accordion","_AreaContextProvider","_List","_ListItemBody","_interopRequireDefault","_ListItemHead","_ListItem","_Tooltip","_element","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ListItem","forwardRef","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","isSelected","ref","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","useContext","ListContext","isParentAccordionWrapped","AccordionContext","areaProvider","AreaContext","isInitialRenderRef","useRef","listItemRef","isInDialog","useIsInsideDialog","uuid","useUuid","isExpandable","undefined","isItemOpen","onCloseRef","onOpenRef","shouldEnableTooltip","setShouldEnableTooltip","useState","titleWidth","setTitleWidth","titleMaxWidth","setTitleMaxWidth","useEffect","current","handleHeadClick","useCallback","event","shouldOnlyOpen","isClickable","useImperativeHandle","handleTitleWidthChange","width","maxWidth","createElement","StyledListItem","as","motion","div","animate","height","opacity","className","exit","initial","key","layout","$backgroundColor","$isClickable","$isInAccordion","shouldDisableListItemPadding","$isOpen","$isWrapped","$isInDialog","$isSelected","$shouldChangeColor","shouldChangeColor","$shouldForceBackground","$shouldForceBottomLine","$shouldHideBottomLine","$shouldHideIndicator","$shouldShowSeparatorBelow","shouldUseFullWidth","isDisabled","item","StyledListItemTooltip","style","cursor","onTitleWidthChange","AnimatePresence","id","shouldHideBody","displayName","_default","exports"],"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 { useIsInsideDialog } from '../../../hooks/element';\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     * Whether the item is selected.\n     */\n    isSelected?: 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            isSelected = false,\n        },\n        ref,\n    ) => {\n        const { isAnyItemExpandable, isWrapped, openItemUuid, 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 isInDialog = useIsInsideDialog<HTMLDivElement>(listItemRef);\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 (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.div}\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                $isInDialog={isInDialog}\n                $isSelected={isSelected}\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/cjs/components/list/list-item/ListItem.styles.js

@@ -22,10 +22,12 @@ const StyledListItem = exports.StyledListItem = _styledComponents.default.div`
   $isOpen,
   $shouldChangeColor,
   $shouldForceBackground,
-  theme
-}) => (!$isInAccordion && $isOpen || $shouldForceBackground) && (0, _styledComponents.css)`
+  theme,
+  $isInDialog,
+  $isSelected
+}) => (!$isInAccordion && $isOpen || $shouldForceBackground || $isSelected) && (0, _styledComponents.css)`
             background-color: rgba(
-                ${$shouldChangeColor ? theme['102-rgb'] : theme['100-rgb']},
+                ${$shouldChangeColor || $isInDialog ? theme['102-rgb'] : theme['100-rgb']},
                 ${theme.cardBackgroundOpacity}
             );
         `}
@@ -43,11 +45,12 @@ const StyledListItem = exports.StyledListItem = _styledComponents.default.div`
   $isClickable,
   $isInAccordion,
   $shouldChangeColor,
+  $isInDialog,
   theme
 }) => $isClickable && !$isInAccordion && (0, _styledComponents.css)`
             &&:hover {
                 background-color: rgba(
-                    ${$shouldChangeColor ? theme['102-rgb'] : theme['100-rgb']},
+                    ${$shouldChangeColor || $isInDialog ? theme['102-rgb'] : theme['100-rgb']},
                     ${theme.cardBackgroundOpacity}
                 );
             }

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

@@ -1 +1 @@
-{"version":3,"file":"ListItem.styles.js","names":["_styledComponents","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledListItem","exports","styled","div","$isInAccordion","$shouldHideIndicator","css","$isOpen","$shouldChangeColor","$shouldForceBackground","theme","cardBackgroundOpacity","$backgroundColor","$isClickable","$isWrapped","$shouldHideBottomLine","$shouldForceBottomLine","$shouldShowSeparatorBelow","accordionLines","undefined","StyledListItemTooltip"],"sources":["../../../../../src/components/list/list-item/ListItem.styles.ts"],"sourcesContent":["import type { HTMLMotionProps } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { Theme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { CSSProperties } from 'react';\n\ntype StyledListItemProps = HTMLMotionProps<'div'> & {\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.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    ${({\n        $isInAccordion,\n        $isOpen,\n        $shouldChangeColor,\n        $shouldForceBackground,\n        theme,\n    }: StyledListItemProps & {\n        theme: Theme;\n    }) =>\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    ${({\n        $isClickable,\n        $isInAccordion,\n        $shouldChangeColor,\n        theme,\n    }: StyledListItemProps & {\n        theme: Theme;\n    }) =>\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 & { theme: Theme }) => {\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":"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","ignoreList":[]}
+{"version":3,"file":"ListItem.styles.js","names":["_styledComponents","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledListItem","exports","styled","div","$isInAccordion","$shouldHideIndicator","css","$isOpen","$shouldChangeColor","$shouldForceBackground","theme","$isInDialog","$isSelected","cardBackgroundOpacity","$backgroundColor","$isClickable","$isWrapped","$shouldHideBottomLine","$shouldForceBottomLine","$shouldShowSeparatorBelow","accordionLines","undefined","StyledListItemTooltip"],"sources":["../../../../../src/components/list/list-item/ListItem.styles.ts"],"sourcesContent":["import type { HTMLMotionProps } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { Theme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { CSSProperties } from 'react';\n\ntype StyledListItemProps = HTMLMotionProps<'div'> & {\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    $isInDialog: boolean;\n    $isSelected: boolean;\n};\n\nexport const StyledListItem = styled.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    ${({\n        $isInAccordion,\n        $isOpen,\n        $shouldChangeColor,\n        $shouldForceBackground,\n        theme,\n        $isInDialog,\n        $isSelected,\n    }: StyledListItemProps & {\n        theme: Theme;\n    }) =>\n        ((!$isInAccordion && $isOpen) || $shouldForceBackground || $isSelected) &&\n        css`\n            background-color: rgba(\n                ${$shouldChangeColor || $isInDialog ? 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    ${({\n        $isClickable,\n        $isInAccordion,\n        $shouldChangeColor,\n        $isInDialog,\n        theme,\n    }: StyledListItemProps & {\n        theme: Theme;\n    }) =>\n        $isClickable &&\n        !$isInAccordion &&\n        css`\n            &&:hover {\n                background-color: rgba(\n                    ${$shouldChangeColor || $isInDialog ? 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 & { theme: Theme }) => {\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":"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","ignoreList":[]}

package/lib/cjs/components/masonry/Masonry.context.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMasonryContext = exports.MasonryContext = void 0;
+var _react = require("react");
+const MasonryContext = exports.MasonryContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+const useMasonryContext = () => {
+  const context = (0, _react.useContext)(MasonryContext);
+  if (!context) {
+    throw new Error('Masonry.Item must be used inside Masonry.');
+  }
+  return context;
+};
+exports.useMasonryContext = useMasonryContext;
+//# sourceMappingURL=Masonry.context.js.map

package/lib/cjs/components/masonry/Masonry.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Masonry.context.js","names":["_react","require","MasonryContext","exports","createContext","undefined","useMasonryContext","context","useContext","Error"],"sources":["../../../../src/components/masonry/Masonry.context.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport { MasonryContextValue } from './Masonry.types';\n\nexport const MasonryContext = createContext<MasonryContextValue | undefined>(undefined);\n\nexport const useMasonryContext = () => {\n    const context = useContext(MasonryContext);\n\n    if (!context) {\n        throw new Error('Masonry.Item must be used inside Masonry.');\n    }\n\n    return context;\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAGO,MAAMC,cAAc,GAAAC,OAAA,CAAAD,cAAA,gBAAG,IAAAE,oBAAa,EAAkCC,SAAS,CAAC;AAEhF,MAAMC,iBAAiB,GAAGA,CAAA,KAAM;EACnC,MAAMC,OAAO,GAAG,IAAAC,iBAAU,EAACN,cAAc,CAAC;EAE1C,IAAI,CAACK,OAAO,EAAE;IACV,MAAM,IAAIE,KAAK,CAAC,2CAA2C,CAAC;EAChE;EAEA,OAAOF,OAAO;AAClB,CAAC;AAACJ,OAAA,CAAAG,iBAAA,GAAAA,iBAAA","ignoreList":[]}

package/lib/cjs/components/masonry/Masonry.hooks.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMasonryLayout = exports.useMasonryItems = exports.useMasonryColumnCount = void 0;
+var _react = require("react");
+var _Masonry = require("./Masonry.utils");
+const useMasonryItems = ({
+  children
+}) => (0, _react.useMemo)(() => _react.Children.toArray(children), [children]);
+exports.useMasonryItems = useMasonryItems;
+const useMasonryLayout = ({
+  items,
+  itemHeights,
+  columnCount,
+  columnWidth,
+  rowHeight,
+  gap
+}) => (0, _react.useMemo)(() => {
+  const layoutItems = items.map((item, index) => {
+    const key = (0, _Masonry.getMasonryItemKey)(item, index);
+    const height = itemHeights[key] ?? rowHeight;
+    return {
+      key,
+      columns: item.props.columns ?? 1,
+      rows: (0, _Masonry.calculateRowSpan)({
+        height,
+        rowHeight,
+        gap
+      })
+    };
+  });
+  return (0, _Masonry.packMasonryGrid)({
+    items: layoutItems,
+    columnCount,
+    columnWidth,
+    rowHeight,
+    gap
+  });
+}, [items, itemHeights, columnCount, columnWidth, rowHeight, gap]);
+exports.useMasonryLayout = useMasonryLayout;
+const useMasonryColumnCount = ({
+  containerWidth,
+  columnWidth,
+  gap
+}) => (0, _react.useMemo)(() => (0, _Masonry.calculateColumnCount)({
+  containerWidth,
+  columnWidth,
+  gap
+}), [containerWidth, columnWidth, gap]);
+exports.useMasonryColumnCount = useMasonryColumnCount;
+//# sourceMappingURL=Masonry.hooks.js.map

package/lib/cjs/components/masonry/Masonry.hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Masonry.hooks.js","names":["_react","require","_Masonry","useMasonryItems","children","useMemo","Children","toArray","exports","useMasonryLayout","items","itemHeights","columnCount","columnWidth","rowHeight","gap","layoutItems","map","item","index","key","getMasonryItemKey","height","columns","props","rows","calculateRowSpan","packMasonryGrid","useMasonryColumnCount","containerWidth","calculateColumnCount"],"sources":["../../../../src/components/masonry/Masonry.hooks.ts"],"sourcesContent":["import { Children, ReactNode, useMemo } from 'react';\nimport { MasonryChild, MasonryItemProps, MasonryLayoutItem } from './Masonry.types';\nimport {\n    calculateColumnCount,\n    calculateRowSpan,\n    getMasonryItemKey,\n    packMasonryGrid,\n} from './Masonry.utils';\n\ninterface UseMasonryItemsParams {\n    children: ReactNode;\n}\n\nexport const useMasonryItems = ({ children }: UseMasonryItemsParams) =>\n    useMemo(() => Children.toArray(children) as MasonryChild[], [children]);\n\ninterface UseMasonryLayoutParams {\n    items: MasonryChild[];\n    itemHeights: Record<string, number>;\n    columnCount: number;\n    columnWidth: number;\n    rowHeight: number;\n    gap: number;\n}\n\nexport const useMasonryLayout = ({\n    items,\n    itemHeights,\n    columnCount,\n    columnWidth,\n    rowHeight,\n    gap,\n}: UseMasonryLayoutParams) =>\n    useMemo(() => {\n        const layoutItems: MasonryLayoutItem[] = items.map((item, index) => {\n            const key = getMasonryItemKey(item as React.ReactElement<MasonryItemProps>, index);\n\n            const height = itemHeights[key] ?? rowHeight;\n\n            return {\n                key,\n                columns: item.props.columns ?? 1,\n                rows: calculateRowSpan({\n                    height,\n                    rowHeight,\n                    gap,\n                }),\n            };\n        });\n\n        return packMasonryGrid({\n            items: layoutItems,\n            columnCount,\n            columnWidth,\n            rowHeight,\n            gap,\n        });\n    }, [items, itemHeights, columnCount, columnWidth, rowHeight, gap]);\n\ninterface UseMasonryColumnCountParams {\n    containerWidth: number;\n    columnWidth: number;\n    gap: number;\n}\n\nexport const useMasonryColumnCount = ({\n    containerWidth,\n    columnWidth,\n    gap,\n}: UseMasonryColumnCountParams) =>\n    useMemo(\n        () =>\n            calculateColumnCount({\n                containerWidth,\n                columnWidth,\n                gap,\n            }),\n        [containerWidth, columnWidth, gap],\n    );\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEA,IAAAC,QAAA,GAAAD,OAAA;AAWO,MAAME,eAAe,GAAGA,CAAC;EAAEC;AAAgC,CAAC,KAC/D,IAAAC,cAAO,EAAC,MAAMC,eAAQ,CAACC,OAAO,CAACH,QAAQ,CAAmB,EAAE,CAACA,QAAQ,CAAC,CAAC;AAACI,OAAA,CAAAL,eAAA,GAAAA,eAAA;AAWrE,MAAMM,gBAAgB,GAAGA,CAAC;EAC7BC,KAAK;EACLC,WAAW;EACXC,WAAW;EACXC,WAAW;EACXC,SAAS;EACTC;AACoB,CAAC,KACrB,IAAAV,cAAO,EAAC,MAAM;EACV,MAAMW,WAAgC,GAAGN,KAAK,CAACO,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,KAAK;IAChE,MAAMC,GAAG,GAAG,IAAAC,0BAAiB,EAACH,IAAI,EAA0CC,KAAK,CAAC;IAElF,MAAMG,MAAM,GAAGX,WAAW,CAACS,GAAG,CAAC,IAAIN,SAAS;IAE5C,OAAO;MACHM,GAAG;MACHG,OAAO,EAAEL,IAAI,CAACM,KAAK,CAACD,OAAO,IAAI,CAAC;MAChCE,IAAI,EAAE,IAAAC,yBAAgB,EAAC;QACnBJ,MAAM;QACNR,SAAS;QACTC;MACJ,CAAC;IACL,CAAC;EACL,CAAC,CAAC;EAEF,OAAO,IAAAY,wBAAe,EAAC;IACnBjB,KAAK,EAAEM,WAAW;IAClBJ,WAAW;IACXC,WAAW;IACXC,SAAS;IACTC;EACJ,CAAC,CAAC;AACN,CAAC,EAAE,CAACL,KAAK,EAAEC,WAAW,EAAEC,WAAW,EAAEC,WAAW,EAAEC,SAAS,EAAEC,GAAG,CAAC,CAAC;AAACP,OAAA,CAAAC,gBAAA,GAAAA,gBAAA;AAQhE,MAAMmB,qBAAqB,GAAGA,CAAC;EAClCC,cAAc;EACdhB,WAAW;EACXE;AACyB,CAAC,KAC1B,IAAAV,cAAO,EACH,MACI,IAAAyB,6BAAoB,EAAC;EACjBD,cAAc;EACdhB,WAAW;EACXE;AACJ,CAAC,CAAC,EACN,CAACc,cAAc,EAAEhB,WAAW,EAAEE,GAAG,CACrC,CAAC;AAACP,OAAA,CAAAoB,qBAAA,GAAAA,qBAAA","ignoreList":[]}

package/lib/cjs/components/masonry/Masonry.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("motion/react");
+var _element = require("../../hooks/element");
+var _Masonry = require("./Masonry.context");
+var _Masonry2 = require("./Masonry.styles");
+var _Masonry3 = require("./Masonry.hooks");
+var _Masonry4 = require("./Masonry.utils");
+var _MasonryItem = _interopRequireWildcard(require("./masonry-item/MasonryItem"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const MasonryBase = ({
+  children,
+  gap = 8,
+  columnWidth = 80,
+  rowHeight = 80
+}) => {
+  const ref = (0, _react.useRef)(null);
+  const size = (0, _element.useElementSize)(ref);
+  const containerWidth = (size === null || size === void 0 ? void 0 : size.width) ?? 0;
+  const [itemHeights, setItemHeights] = (0, _react.useState)({});
+  const items = (0, _Masonry3.useMasonryItems)({
+    children
+  });
+  const columnCount = (0, _Masonry3.useMasonryColumnCount)({
+    containerWidth,
+    columnWidth,
+    gap
+  });
+  const layout = (0, _Masonry3.useMasonryLayout)({
+    items,
+    itemHeights,
+    columnCount,
+    columnWidth,
+    rowHeight,
+    gap
+  });
+  const registerItem = (0, _react.useCallback)((key, height) => {
+    setItemHeights(currentHeights => {
+      if (currentHeights[key] === height) {
+        return currentHeights;
+      }
+      return {
+        ...currentHeights,
+        [key]: height
+      };
+    });
+  }, []);
+  const contextValue = (0, _react.useMemo)(() => ({
+    registerItem
+  }), [registerItem]);
+  return /*#__PURE__*/_react.default.createElement(_Masonry.MasonryContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/_react.default.createElement(_Masonry2.StyledMasonry, {
+    ref: ref,
+    $height: layout.height
+  }, /*#__PURE__*/_react.default.createElement(_react2.AnimatePresence, null, items.map((item, index) => {
+    const key = (0, _Masonry4.getMasonryItemKey)(item, index);
+    const packedItem = layout.items[key];
+    if (!packedItem) {
+      return null;
+    }
+    return /*#__PURE__*/_react.default.createElement(_MasonryItem.InternalMasonryItem, {
+      key: key,
+      itemKey: key,
+      x: packedItem.x,
+      y: packedItem.y,
+      width: packedItem.width
+    }, item.props.children);
+  }))));
+};
+MasonryBase.displayName = 'Masonry';
+const Masonry = Object.assign(MasonryBase, {
+  Item: _MasonryItem.default
+});
+var _default = exports.default = Masonry;
+//# sourceMappingURL=Masonry.js.map

package/lib/cjs/components/masonry/Masonry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Masonry.js","names":["_react","_interopRequireWildcard","require","_react2","_element","_Masonry","_Masonry2","_Masonry3","_Masonry4","_MasonryItem","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","MasonryBase","children","gap","columnWidth","rowHeight","ref","useRef","size","useElementSize","containerWidth","width","itemHeights","setItemHeights","useState","items","useMasonryItems","columnCount","useMasonryColumnCount","layout","useMasonryLayout","registerItem","useCallback","key","height","currentHeights","contextValue","useMemo","createElement","MasonryContext","Provider","value","StyledMasonry","$height","AnimatePresence","map","item","index","getMasonryItemKey","packedItem","InternalMasonryItem","itemKey","x","y","props","displayName","Masonry","assign","Item","MasonryItem","_default","exports"],"sources":["../../../../src/components/masonry/Masonry.tsx"],"sourcesContent":["import React, { FC, useCallback, useMemo, useRef, useState } from 'react';\nimport { AnimatePresence } from 'motion/react';\nimport { useElementSize } from '../../hooks/element';\nimport { MasonryComponent, MasonryItemProps, MasonryProps } from './Masonry.types';\nimport { MasonryContext } from './Masonry.context';\nimport { StyledMasonry } from './Masonry.styles';\nimport { useMasonryColumnCount, useMasonryItems, useMasonryLayout } from './Masonry.hooks';\nimport { getMasonryItemKey } from './Masonry.utils';\nimport MasonryItem, { InternalMasonryItem } from './masonry-item/MasonryItem';\n\nconst MasonryBase: FC<MasonryProps> = ({ children, gap = 8, columnWidth = 80, rowHeight = 80 }) => {\n    const ref = useRef<HTMLDivElement | null>(null);\n    const size = useElementSize(ref);\n\n    const containerWidth = size?.width ?? 0;\n\n    const [itemHeights, setItemHeights] = useState<Record<string, number>>({});\n\n    const items = useMasonryItems({ children });\n\n    const columnCount = useMasonryColumnCount({\n        containerWidth,\n        columnWidth,\n        gap,\n    });\n\n    const layout = useMasonryLayout({\n        items,\n        itemHeights,\n        columnCount,\n        columnWidth,\n        rowHeight,\n        gap,\n    });\n\n    const registerItem = useCallback((key: string, height: number) => {\n        setItemHeights((currentHeights) => {\n            if (currentHeights[key] === height) {\n                return currentHeights;\n            }\n\n            return {\n                ...currentHeights,\n                [key]: height,\n            };\n        });\n    }, []);\n\n    const contextValue = useMemo(\n        () => ({\n            registerItem,\n        }),\n        [registerItem],\n    );\n\n    return (\n        <MasonryContext.Provider value={contextValue}>\n            <StyledMasonry ref={ref} $height={layout.height}>\n                <AnimatePresence>\n                    {items.map((item, index) => {\n                        const key = getMasonryItemKey(\n                            item as React.ReactElement<MasonryItemProps>,\n                            index,\n                        );\n\n                        const packedItem = layout.items[key];\n\n                        if (!packedItem) {\n                            return null;\n                        }\n\n                        return (\n                            <InternalMasonryItem\n                                key={key}\n                                itemKey={key}\n                                x={packedItem.x}\n                                y={packedItem.y}\n                                width={packedItem.width}\n                            >\n                                {item.props.children}\n                            </InternalMasonryItem>\n                        );\n                    })}\n                </AnimatePresence>\n            </StyledMasonry>\n        </MasonryContext.Provider>\n    );\n};\n\nMasonryBase.displayName = 'Masonry';\n\nconst Masonry = Object.assign(MasonryBase, {\n    Item: MasonryItem,\n}) as MasonryComponent;\n\nexport default Masonry;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/masonry/Masonry.styles.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledMasonry = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StyledMasonry = exports.StyledMasonry = _styledComponents.default.div`
+    position: relative;
+    width: 100%;
+    height: ${({
+  $height
+}) => $height}px;
+`;
+//# sourceMappingURL=Masonry.styles.js.map

package/lib/cjs/components/masonry/Masonry.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Masonry.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledMasonry","exports","styled","div","$height"],"sources":["../../../../src/components/masonry/Masonry.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledMasonry = styled.div<{ $height: number }>`\n    position: relative;\n    width: 100%;\n    height: ${({ $height }) => $height}px;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,aAAa,GAAAC,OAAA,CAAAD,aAAA,GAAGE,yBAAM,CAACC,GAAwB;AAC5D;AACA;AACA,cAAc,CAAC;EAAEC;AAAQ,CAAC,KAAKA,OAAO;AACtC,CAAC","ignoreList":[]}

package/lib/cjs/components/masonry/Masonry.types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=Masonry.types.js.map

package/lib/cjs/components/masonry/Masonry.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Masonry.types.js","names":[],"sources":["../../../../src/components/masonry/Masonry.types.ts"],"sourcesContent":["import { ReactElement, ReactNode } from 'react';\n\nexport interface MasonryProps {\n    children: ReactNode;\n    gap?: number;\n    columnWidth?: number;\n    rowHeight?: number;\n}\n\nexport interface MasonryItemProps {\n    children: ReactNode;\n    columns?: number;\n}\n\nexport interface MasonryContextValue {\n    registerItem: (key: string, height: number) => void;\n}\n\nexport interface MasonryLayoutItem {\n    key: string;\n    columns: number;\n    rows: number;\n}\n\nexport interface PackedMasonryItem {\n    key: string;\n    x: number;\n    y: number;\n    width: number;\n}\n\nexport interface PackedMasonryGrid {\n    items: Record<string, PackedMasonryItem>;\n    height: number;\n}\n\nexport interface InternalMasonryItemProps {\n    children: ReactNode;\n    itemKey: string;\n    x: number;\n    y: number;\n    width: number;\n}\n\nexport type MasonryChild = ReactElement<MasonryItemProps>;\n\nexport type MasonryComponent = React.FC<MasonryProps> & {\n    Item: React.FC<MasonryItemProps>;\n};\n"],"mappings":"","ignoreList":[]}