@chayns-components/core 5.4.15-alpha.0 → 5.4.16

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

@@ -1,14 +1,17 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import { LayoutGroup, motion } from 'motion/react';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import ListItemIcon from './list-item-icon/ListItemIcon';
 import ListItemImage from './list-item-image/ListItemImage';
-import { StyledListItemHead, StyledListItemHeadContent, StyledListItemHeadIndicator, StyledListItemHeadLeftElements, StyledListItemHeadLeftWrapper, StyledListItemHeadSubtitle, StyledListItemHeadTitle, StyledMotionListItemHeadHoverItem, StyledMotionListItemHeadHoverItemWrapper } from './ListItemHead.styles';
+import { StyledListItemHead, StyledListItemHeadContent, StyledListItemHeadIndicator, StyledListItemHeadLeftWrapper, StyledListItemHeadSubtitle, StyledListItemHeadTitle, StyledListItemHeadTitleInputWrapper, StyledMotionListItemHeadHoverItem, StyledMotionListItemHeadHoverItemWrapper } from './ListItemHead.styles';
 import ListItemTitle from './list-item-title/ListItemTitle';
 import ListItemSubtitle from './list-item-subtitle/ListItemSubtitle';
 import ListItemRightElement from './list-item-right-element/ListItemRightElement';
 import { useTheme } from 'styled-components';
 import { StyledUnicodeIcon } from '../../../icon/Icon.styles';
 import { getIsExpandableIcon } from '../../../../utils/icon';
+import Input from '../../../input/Input';
+import { AreaContext } from '../../../area-provider/AreaContextProvider';
 const ListItemHead = ({
   careOfLocationId,
   cornerImage,
@@ -36,17 +39,20 @@ const ListItemHead = ({
   shouldDisableAnimation = false,
   cornerElement,
   onTitleWidthChange,
-  onImageError
+  onImageError,
+  onTitleInputChange,
+  titleInputProps
 }) => {
   const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);
   const [titleMaxWidth, setTitleMaxWidth] = useState(0);
   const [titleWidth, setTitleWidth] = useState(0);
   const longPressTimeoutRef = useRef();
   const resizeSkipRef = useRef(true);
-  const leftElementRef = useRef(null);
   const theme = useTheme();
-  const shouldShowSubtitleRow = subtitle || typeof subtitle === 'string' || typeof rightElements === 'object' && rightElements && 'bottom' in rightElements;
-  const shouldShowMultilineTitle = useMemo(() => !subtitle, [subtitle]);
+  const areaProvider = useContext(AreaContext);
+  const hasTitleInput = typeof onTitleInputChange === 'function';
+  const shouldShowSubtitleRow = !hasTitleInput && (subtitle || typeof subtitle === 'string') || typeof rightElements === 'object' && rightElements && 'bottom' in rightElements;
+  const shouldShowMultilineTitle = useMemo(() => !subtitle && !hasTitleInput, [hasTitleInput, subtitle]);
   useEffect(() => {
     window.setTimeout(() => {
       resizeSkipRef.current = false;
@@ -79,6 +85,9 @@ const ListItemHead = ({
   const handleTitleWidthChange = useCallback(width => {
     setTitleMaxWidth(width);
   }, []);
+  const handleInputClick = useCallback(event => {
+    event.stopPropagation();
+  }, []);
   const iconOrImageElement = useMemo(() => {
     if (icons) {
       return /*#__PURE__*/React.createElement(ListItemIcon, {
@@ -137,16 +146,27 @@ const ListItemHead = ({
     transition: shouldDisableAnimation ? undefined : {
       type: 'tween'
     }
-  }, isExpandable && !shouldHideIndicator && expandIcon), leftElements && /*#__PURE__*/React.createElement(StyledListItemHeadLeftElements, {
-    ref: leftElementRef,
-    "data-left-element": "true"
-  }, leftElements), iconOrImageElement), /*#__PURE__*/React.createElement(StyledListItemHeadContent, {
+  }, isExpandable && !shouldHideIndicator && expandIcon), leftElements, iconOrImageElement), /*#__PURE__*/React.createElement(StyledListItemHeadContent, {
     $isIconOrImageGiven: iconOrImageElement !== undefined,
     $isOpen: isOpen
   }, /*#__PURE__*/React.createElement(LayoutGroup, null, /*#__PURE__*/React.createElement(StyledListItemHeadTitle, {
     as: shouldDisableAnimation ? undefined : motion.div,
     layout: "position"
-  }, /*#__PURE__*/React.createElement(ListItemTitle, {
+  }, hasTitleInput ?
+  /*#__PURE__*/
+  // eslint-disable-next-line react/jsx-no-constructed-context-values
+  React.createElement(AreaContext.Provider, {
+    value: {
+      ...areaProvider,
+      shouldChangeColor: true
+    }
+  }, /*#__PURE__*/React.createElement(StyledListItemHeadTitleInputWrapper, {
+    onClick: handleInputClick
+  }, /*#__PURE__*/React.createElement(Input
+  /* eslint-disable-next-line react/jsx-props-no-spreading */, _extends({}, titleInputProps, {
+    value: typeof title === 'string' ? title : undefined,
+    onChange: onTitleInputChange
+  })))) : /*#__PURE__*/React.createElement(ListItemTitle, {
     title: title,
     titleElement: titleElement,
     isOpen: isOpen,

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

@@ -1 +1 @@
-{"version":3,"file":"ListItemHead.js","names":["LayoutGroup","motion","React","useCallback","useEffect","useMemo","useRef","useState","ListItemIcon","ListItemImage","StyledListItemHead","StyledListItemHeadContent","StyledListItemHeadIndicator","StyledListItemHeadLeftElements","StyledListItemHeadLeftWrapper","StyledListItemHeadSubtitle","StyledListItemHeadTitle","StyledMotionListItemHeadHoverItem","StyledMotionListItemHeadHoverItemWrapper","ListItemTitle","ListItemSubtitle","ListItemRightElement","useTheme","StyledUnicodeIcon","getIsExpandableIcon","ListItemHead","careOfLocationId","cornerImage","hoverItem","icons","imageBackground","images","isAnyItemExpandable","isExpandable","isOpen","isTitleGreyed","leftElements","onClick","onLongPress","rightElements","shouldHideImageOrIconBackground","shouldHideIndicator","shouldOpenImageOnClick","shouldShowRoundImageOrIcon","subtitle","shouldForceHover","title","titleElement","setShouldEnableTooltip","shouldDisableAnimation","cornerElement","onTitleWidthChange","onImageError","shouldShowHoverItem","setShouldShowHoverItem","titleMaxWidth","setTitleMaxWidth","titleWidth","setTitleWidth","longPressTimeoutRef","resizeSkipRef","leftElementRef","theme","shouldShowSubtitleRow","shouldShowMultilineTitle","window","setTimeout","current","handleShowTooltipResize","entries","target","clientWidth","el","scrollWidth","handleMouseEnter","handleMouseLeave","handleTouchStart","event","handleTouchEnd","clearTimeout","handleTitleWidthChange","width","iconOrImageElement","createElement","shouldHideBackground","shouldShowRoundIcon","shouldShowRoundImage","undefined","expandIcon","internalIcon","accordionIcon","internalIconStyle","iconStyle","$icon","className","as","div","animate","opacity","initial","transition","duration","type","$isClickable","$isAnyItemExpandable","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","rotate","ref","$isIconOrImageGiven","$isOpen","layout","onResize","marginLeft","displayName"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.tsx"],"sourcesContent":["import { LayoutGroup, motion } from 'motion/react';\nimport React, {\n    CSSProperties,\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    SyntheticEvent,\n    TouchEventHandler,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport type { IListItemRightElements } from '../../../../types/list';\nimport ListItemIcon from './list-item-icon/ListItemIcon';\nimport ListItemImage from './list-item-image/ListItemImage';\nimport {\n    StyledListItemHead,\n    StyledListItemHeadContent,\n    StyledListItemHeadIndicator,\n    StyledListItemHeadLeftElements,\n    StyledListItemHeadLeftWrapper,\n    StyledListItemHeadSubtitle,\n    StyledListItemHeadTitle,\n    StyledMotionListItemHeadHoverItem,\n    StyledMotionListItemHeadHoverItemWrapper,\n} from './ListItemHead.styles';\nimport ListItemTitle from './list-item-title/ListItemTitle';\nimport ListItemSubtitle from './list-item-subtitle/ListItemSubtitle';\nimport ListItemRightElement from './list-item-right-element/ListItemRightElement';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../../../color-scheme-provider/ColorSchemeProvider';\nimport { StyledUnicodeIcon } from '../../../icon/Icon.styles';\nimport { getIsExpandableIcon } from '../../../../utils/icon';\n\ntype ListItemHeadProps = {\n    careOfLocationId?: number;\n    cornerImage?: string;\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    shouldForceHover?: boolean;\n    setShouldEnableTooltip: (value: boolean) => void;\n    shouldDisableAnimation?: boolean;\n    cornerElement?: ReactNode;\n    onTitleWidthChange: (titleWidth: number, titleMaxWidth: number) => void;\n    onImageError?: (event: SyntheticEvent<HTMLImageElement, Event>, index: number) => void;\n};\n\nconst ListItemHead: FC<ListItemHeadProps> = ({\n    careOfLocationId,\n    cornerImage,\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    shouldForceHover,\n    title,\n    titleElement,\n    setShouldEnableTooltip,\n    shouldDisableAnimation = false,\n    cornerElement,\n    onTitleWidthChange,\n    onImageError,\n}) => {\n    const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);\n    const [titleMaxWidth, setTitleMaxWidth] = useState(0);\n    const [titleWidth, setTitleWidth] = useState(0);\n\n    const longPressTimeoutRef = useRef<number>();\n    const resizeSkipRef = useRef(true);\n    const leftElementRef = useRef<HTMLDivElement>(null);\n\n    const theme = useTheme() as Theme;\n\n    const shouldShowSubtitleRow =\n        subtitle ||\n        typeof subtitle === 'string' ||\n        (typeof rightElements === 'object' && rightElements && 'bottom' in rightElements);\n\n    const shouldShowMultilineTitle = useMemo(() => !subtitle, [subtitle]);\n\n    useEffect(() => {\n        window.setTimeout(() => {\n            resizeSkipRef.current = false;\n        }, 200);\n    }, []);\n\n    useEffect(() => {\n        onTitleWidthChange(titleWidth, titleMaxWidth);\n    }, [onTitleWidthChange, titleMaxWidth, titleWidth]);\n\n    const handleShowTooltipResize = useCallback(\n        (entries: ResizeObserverEntry[]) => {\n            setTitleWidth(entries[0]?.target.clientWidth ?? 0);\n\n            if (resizeSkipRef.current) {\n                return;\n            }\n\n            const el = entries[0]?.target;\n            if (!el) return;\n            setShouldEnableTooltip(el.scrollWidth > el.clientWidth);\n        },\n        [setShouldEnableTooltip],\n    );\n\n    const handleMouseEnter = useCallback(() => setShouldShowHoverItem(true), []);\n\n    const handleMouseLeave = useCallback(() => setShouldShowHoverItem(false), []);\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 handleTitleWidthChange = useCallback((width: number) => {\n        setTitleMaxWidth(width);\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                    cornerElement={cornerElement}\n                    imageBackground={imageBackground}\n                    careOfLocationId={careOfLocationId}\n                    cornerImage={cornerImage}\n                    images={images}\n                    onImageError={onImageError}\n                    shouldOpenImageOnClick={shouldOpenImageOnClick}\n                    shouldHideBackground={!!shouldHideImageOrIconBackground}\n                    shouldShowRoundImage={!!shouldShowRoundImageOrIcon}\n                />\n            );\n        }\n\n        return undefined;\n    }, [\n        careOfLocationId,\n        cornerElement,\n        cornerImage,\n        icons,\n        imageBackground,\n        images,\n        onImageError,\n        shouldHideImageOrIconBackground,\n        shouldOpenImageOnClick,\n        shouldShowRoundImageOrIcon,\n    ]);\n\n    const expandIcon = useMemo(() => {\n        const internalIcon = getIsExpandableIcon(theme.accordionIcon);\n        const internalIconStyle = theme?.iconStyle ? theme.iconStyle : 'fa-regular';\n        return <StyledUnicodeIcon $icon={internalIcon} className={internalIconStyle} />;\n    }, [theme.accordionIcon, theme.iconStyle]);\n\n    return (\n        <StyledListItemHead\n            as={shouldDisableAnimation ? undefined : motion.div}\n            animate={\n                shouldDisableAnimation\n                    ? undefined\n                    : {\n                          opacity: isTitleGreyed ? 0.5 : 1,\n                      }\n            }\n            initial={shouldDisableAnimation ? undefined : false}\n            transition={shouldDisableAnimation ? undefined : { 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                    <StyledListItemHeadIndicator\n                        as={shouldDisableAnimation ? undefined : motion.div}\n                        animate={shouldDisableAnimation ? undefined : { rotate: isOpen ? 90 : 0 }}\n                        initial={shouldDisableAnimation ? undefined : false}\n                        transition={shouldDisableAnimation ? undefined : { type: 'tween' }}\n                    >\n                        {isExpandable && !shouldHideIndicator && expandIcon}\n                    </StyledListItemHeadIndicator>\n                )}\n                {leftElements && (\n                    <StyledListItemHeadLeftElements ref={leftElementRef} data-left-element=\"true\">\n                        {leftElements}\n                    </StyledListItemHeadLeftElements>\n                )}\n                {iconOrImageElement}\n            </StyledListItemHeadLeftWrapper>\n            <StyledListItemHeadContent\n                $isIconOrImageGiven={iconOrImageElement !== undefined}\n                $isOpen={isOpen}\n            >\n                <LayoutGroup>\n                    <StyledListItemHeadTitle\n                        as={shouldDisableAnimation ? undefined : motion.div}\n                        layout=\"position\"\n                    >\n                        <ListItemTitle\n                            title={title}\n                            titleElement={titleElement}\n                            isOpen={isOpen}\n                            shouldShowMultilineTitle={shouldShowMultilineTitle}\n                            rightElements={rightElements}\n                            onTitleWidthChange={handleTitleWidthChange}\n                            onResize={handleShowTooltipResize}\n                        />\n                    </StyledListItemHeadTitle>\n                    {shouldShowSubtitleRow && (\n                        <StyledListItemHeadSubtitle>\n                            <ListItemSubtitle\n                                subtitle={subtitle}\n                                isOpen={isOpen}\n                                rightElements={rightElements}\n                            />\n                        </StyledListItemHeadSubtitle>\n                    )}\n                </LayoutGroup>\n            </StyledListItemHeadContent>\n            <ListItemRightElement rightElements={rightElements} />\n            {hoverItem && (\n                <StyledMotionListItemHeadHoverItemWrapper\n                    className=\"beta-chayns-list-item-hover-item\"\n                    animate={{\n                        marginLeft: shouldForceHover || shouldShowHoverItem ? 8 : 0,\n                        opacity: shouldForceHover || shouldShowHoverItem ? 1 : 0,\n                        width: shouldForceHover || shouldShowHoverItem ? 'auto' : 0,\n                    }}\n                    initial={false}\n                    transition={{ duration: 0.15, type: 'tween' }}\n                >\n                    <StyledMotionListItemHeadHoverItem>\n                        {hoverItem}\n                    </StyledMotionListItemHeadHoverItem>\n                </StyledMotionListItemHeadHoverItemWrapper>\n            )}\n        </StyledListItemHead>\n    );\n};\n\nListItemHead.displayName = 'ListItemHead';\n\nexport default ListItemHead;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ListItemHead.js","names":["LayoutGroup","motion","React","useCallback","useContext","useEffect","useMemo","useRef","useState","ListItemIcon","ListItemImage","StyledListItemHead","StyledListItemHeadContent","StyledListItemHeadIndicator","StyledListItemHeadLeftWrapper","StyledListItemHeadSubtitle","StyledListItemHeadTitle","StyledListItemHeadTitleInputWrapper","StyledMotionListItemHeadHoverItem","StyledMotionListItemHeadHoverItemWrapper","ListItemTitle","ListItemSubtitle","ListItemRightElement","useTheme","StyledUnicodeIcon","getIsExpandableIcon","Input","AreaContext","ListItemHead","careOfLocationId","cornerImage","hoverItem","icons","imageBackground","images","isAnyItemExpandable","isExpandable","isOpen","isTitleGreyed","leftElements","onClick","onLongPress","rightElements","shouldHideImageOrIconBackground","shouldHideIndicator","shouldOpenImageOnClick","shouldShowRoundImageOrIcon","subtitle","shouldForceHover","title","titleElement","setShouldEnableTooltip","shouldDisableAnimation","cornerElement","onTitleWidthChange","onImageError","onTitleInputChange","titleInputProps","shouldShowHoverItem","setShouldShowHoverItem","titleMaxWidth","setTitleMaxWidth","titleWidth","setTitleWidth","longPressTimeoutRef","resizeSkipRef","theme","areaProvider","hasTitleInput","shouldShowSubtitleRow","shouldShowMultilineTitle","window","setTimeout","current","handleShowTooltipResize","entries","target","clientWidth","el","scrollWidth","handleMouseEnter","handleMouseLeave","handleTouchStart","event","handleTouchEnd","clearTimeout","handleTitleWidthChange","width","handleInputClick","stopPropagation","iconOrImageElement","createElement","shouldHideBackground","shouldShowRoundIcon","shouldShowRoundImage","undefined","expandIcon","internalIcon","accordionIcon","internalIconStyle","iconStyle","$icon","className","as","div","animate","opacity","initial","transition","duration","type","$isClickable","$isAnyItemExpandable","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","rotate","$isIconOrImageGiven","$isOpen","layout","Provider","value","shouldChangeColor","_extends","onChange","onResize","marginLeft","displayName"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.tsx"],"sourcesContent":["import { LayoutGroup, motion } from 'motion/react';\nimport React, {\n    ChangeEventHandler,\n    CSSProperties,\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    SyntheticEvent,\n    TouchEventHandler,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport type { IListItemRightElements } from '../../../../types/list';\nimport type { InputProps } from '../../../input/Input';\nimport ListItemIcon from './list-item-icon/ListItemIcon';\nimport ListItemImage from './list-item-image/ListItemImage';\nimport {\n    StyledListItemHead,\n    StyledListItemHeadContent,\n    StyledListItemHeadIndicator,\n    StyledListItemHeadLeftWrapper,\n    StyledListItemHeadSubtitle,\n    StyledListItemHeadTitle,\n    StyledListItemHeadTitleInputWrapper,\n    StyledMotionListItemHeadHoverItem,\n    StyledMotionListItemHeadHoverItemWrapper,\n} from './ListItemHead.styles';\nimport ListItemTitle from './list-item-title/ListItemTitle';\nimport ListItemSubtitle from './list-item-subtitle/ListItemSubtitle';\nimport ListItemRightElement from './list-item-right-element/ListItemRightElement';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../../../color-scheme-provider/ColorSchemeProvider';\nimport { StyledUnicodeIcon } from '../../../icon/Icon.styles';\nimport { getIsExpandableIcon } from '../../../../utils/icon';\nimport Input from '../../../input/Input';\nimport { AreaContext } from '../../../area-provider/AreaContextProvider';\n\ntype ListItemHeadProps = {\n    careOfLocationId?: number;\n    cornerImage?: string;\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    shouldForceHover?: boolean;\n    setShouldEnableTooltip: (value: boolean) => void;\n    shouldDisableAnimation?: boolean;\n    cornerElement?: ReactNode;\n    onTitleWidthChange: (titleWidth: number, titleMaxWidth: number) => void;\n    onImageError?: (event: SyntheticEvent<HTMLImageElement, Event>, index: number) => void;\n    onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n    titleInputProps?: InputProps;\n};\n\nconst ListItemHead: FC<ListItemHeadProps> = ({\n    careOfLocationId,\n    cornerImage,\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    shouldForceHover,\n    title,\n    titleElement,\n    setShouldEnableTooltip,\n    shouldDisableAnimation = false,\n    cornerElement,\n    onTitleWidthChange,\n    onImageError,\n    onTitleInputChange,\n    titleInputProps,\n}) => {\n    const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);\n    const [titleMaxWidth, setTitleMaxWidth] = useState(0);\n    const [titleWidth, setTitleWidth] = useState(0);\n\n    const longPressTimeoutRef = useRef<number>();\n    const resizeSkipRef = useRef(true);\n\n    const theme = useTheme() as Theme;\n    const areaProvider = useContext(AreaContext);\n\n    const hasTitleInput = typeof onTitleInputChange === 'function';\n\n    const shouldShowSubtitleRow =\n        (!hasTitleInput && (subtitle || typeof subtitle === 'string')) ||\n        (typeof rightElements === 'object' && rightElements && 'bottom' in rightElements);\n\n    const shouldShowMultilineTitle = useMemo(\n        () => !subtitle && !hasTitleInput,\n        [hasTitleInput, subtitle],\n    );\n\n    useEffect(() => {\n        window.setTimeout(() => {\n            resizeSkipRef.current = false;\n        }, 200);\n    }, []);\n\n    useEffect(() => {\n        onTitleWidthChange(titleWidth, titleMaxWidth);\n    }, [onTitleWidthChange, titleMaxWidth, titleWidth]);\n\n    const handleShowTooltipResize = useCallback(\n        (entries: ResizeObserverEntry[]) => {\n            setTitleWidth(entries[0]?.target.clientWidth ?? 0);\n\n            if (resizeSkipRef.current) {\n                return;\n            }\n\n            const el = entries[0]?.target;\n            if (!el) return;\n            setShouldEnableTooltip(el.scrollWidth > el.clientWidth);\n        },\n        [setShouldEnableTooltip],\n    );\n\n    const handleMouseEnter = useCallback(() => setShouldShowHoverItem(true), []);\n\n    const handleMouseLeave = useCallback(() => setShouldShowHoverItem(false), []);\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 handleTitleWidthChange = useCallback((width: number) => {\n        setTitleMaxWidth(width);\n    }, []);\n\n    const handleInputClick = useCallback<MouseEventHandler<HTMLDivElement>>((event) => {\n        event.stopPropagation();\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                    cornerElement={cornerElement}\n                    imageBackground={imageBackground}\n                    careOfLocationId={careOfLocationId}\n                    cornerImage={cornerImage}\n                    images={images}\n                    onImageError={onImageError}\n                    shouldOpenImageOnClick={shouldOpenImageOnClick}\n                    shouldHideBackground={!!shouldHideImageOrIconBackground}\n                    shouldShowRoundImage={!!shouldShowRoundImageOrIcon}\n                />\n            );\n        }\n\n        return undefined;\n    }, [\n        careOfLocationId,\n        cornerElement,\n        cornerImage,\n        icons,\n        imageBackground,\n        images,\n        onImageError,\n        shouldHideImageOrIconBackground,\n        shouldOpenImageOnClick,\n        shouldShowRoundImageOrIcon,\n    ]);\n\n    const expandIcon = useMemo(() => {\n        const internalIcon = getIsExpandableIcon(theme.accordionIcon);\n        const internalIconStyle = theme?.iconStyle ? theme.iconStyle : 'fa-regular';\n        return <StyledUnicodeIcon $icon={internalIcon} className={internalIconStyle} />;\n    }, [theme.accordionIcon, theme.iconStyle]);\n\n    return (\n        <StyledListItemHead\n            as={shouldDisableAnimation ? undefined : motion.div}\n            animate={\n                shouldDisableAnimation\n                    ? undefined\n                    : {\n                          opacity: isTitleGreyed ? 0.5 : 1,\n                      }\n            }\n            initial={shouldDisableAnimation ? undefined : false}\n            transition={shouldDisableAnimation ? undefined : { 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                    <StyledListItemHeadIndicator\n                        as={shouldDisableAnimation ? undefined : motion.div}\n                        animate={shouldDisableAnimation ? undefined : { rotate: isOpen ? 90 : 0 }}\n                        initial={shouldDisableAnimation ? undefined : false}\n                        transition={shouldDisableAnimation ? undefined : { type: 'tween' }}\n                    >\n                        {isExpandable && !shouldHideIndicator && expandIcon}\n                    </StyledListItemHeadIndicator>\n                )}\n                {leftElements}\n                {iconOrImageElement}\n            </StyledListItemHeadLeftWrapper>\n            <StyledListItemHeadContent\n                $isIconOrImageGiven={iconOrImageElement !== undefined}\n                $isOpen={isOpen}\n            >\n                <LayoutGroup>\n                    <StyledListItemHeadTitle\n                        as={shouldDisableAnimation ? undefined : motion.div}\n                        layout=\"position\"\n                    >\n                        {hasTitleInput ? (\n                            // eslint-disable-next-line react/jsx-no-constructed-context-values\n                            <AreaContext.Provider\n                                value={{ ...areaProvider, shouldChangeColor: true }}\n                            >\n                                <StyledListItemHeadTitleInputWrapper onClick={handleInputClick}>\n                                    <Input\n                                        /* eslint-disable-next-line react/jsx-props-no-spreading */\n                                        {...titleInputProps}\n                                        value={typeof title === 'string' ? title : undefined}\n                                        onChange={onTitleInputChange}\n                                    />\n                                </StyledListItemHeadTitleInputWrapper>\n                            </AreaContext.Provider>\n                        ) : (\n                            <ListItemTitle\n                                title={title}\n                                titleElement={titleElement}\n                                isOpen={isOpen}\n                                shouldShowMultilineTitle={shouldShowMultilineTitle}\n                                rightElements={rightElements}\n                                onTitleWidthChange={handleTitleWidthChange}\n                                onResize={handleShowTooltipResize}\n                            />\n                        )}\n                    </StyledListItemHeadTitle>\n                    {shouldShowSubtitleRow && (\n                        <StyledListItemHeadSubtitle>\n                            <ListItemSubtitle\n                                subtitle={subtitle}\n                                isOpen={isOpen}\n                                rightElements={rightElements}\n                            />\n                        </StyledListItemHeadSubtitle>\n                    )}\n                </LayoutGroup>\n            </StyledListItemHeadContent>\n            <ListItemRightElement rightElements={rightElements} />\n            {hoverItem && (\n                <StyledMotionListItemHeadHoverItemWrapper\n                    className=\"beta-chayns-list-item-hover-item\"\n                    animate={{\n                        marginLeft: shouldForceHover || shouldShowHoverItem ? 8 : 0,\n                        opacity: shouldForceHover || shouldShowHoverItem ? 1 : 0,\n                        width: shouldForceHover || shouldShowHoverItem ? 'auto' : 0,\n                    }}\n                    initial={false}\n                    transition={{ duration: 0.15, type: 'tween' }}\n                >\n                    <StyledMotionListItemHeadHoverItem>\n                        {hoverItem}\n                    </StyledMotionListItemHeadHoverItem>\n                </StyledMotionListItemHeadHoverItemWrapper>\n            )}\n        </StyledListItemHead>\n    );\n};\n\nListItemHead.displayName = 'ListItemHead';\n\nexport default ListItemHead;\n"],"mappings":";AAAA,SAASA,WAAW,EAAEC,MAAM,QAAQ,cAAc;AAClD,OAAOC,KAAK,IAQRC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACL,OAAO;AAGd,OAAOC,YAAY,MAAM,+BAA+B;AACxD,OAAOC,aAAa,MAAM,iCAAiC;AAC3D,SACIC,kBAAkB,EAClBC,yBAAyB,EACzBC,2BAA2B,EAC3BC,6BAA6B,EAC7BC,0BAA0B,EAC1BC,uBAAuB,EACvBC,mCAAmC,EACnCC,iCAAiC,EACjCC,wCAAwC,QACrC,uBAAuB;AAC9B,OAAOC,aAAa,MAAM,iCAAiC;AAC3D,OAAOC,gBAAgB,MAAM,uCAAuC;AACpE,OAAOC,oBAAoB,MAAM,gDAAgD;AACjF,SAASC,QAAQ,QAAQ,mBAAmB;AAE5C,SAASC,iBAAiB,QAAQ,2BAA2B;AAC7D,SAASC,mBAAmB,QAAQ,wBAAwB;AAC5D,OAAOC,KAAK,MAAM,sBAAsB;AACxC,SAASC,WAAW,QAAQ,4CAA4C;AAkCxE,MAAMC,YAAmC,GAAGA,CAAC;EACzCC,gBAAgB;EAChBC,WAAW;EACXC,SAAS;EACTC,KAAK;EACLC,eAAe;EACfC,MAAM;EACNC,mBAAmB;EACnBC,YAAY;EACZC,MAAM;EACNC,aAAa;EACbC,YAAY;EACZC,OAAO;EACPC,WAAW;EACXC,aAAa;EACbC,+BAA+B;EAC/BC,mBAAmB;EACnBC,sBAAsB;EACtBC,0BAA0B;EAC1BC,QAAQ;EACRC,gBAAgB;EAChBC,KAAK;EACLC,YAAY;EACZC,sBAAsB;EACtBC,sBAAsB,GAAG,KAAK;EAC9BC,aAAa;EACbC,kBAAkB;EAClBC,YAAY;EACZC,kBAAkB;EAClBC;AACJ,CAAC,KAAK;EACF,MAAM,CAACC,mBAAmB,EAAEC,sBAAsB,CAAC,GAAGnD,QAAQ,CAAC,KAAK,CAAC;EACrE,MAAM,CAACoD,aAAa,EAAEC,gBAAgB,CAAC,GAAGrD,QAAQ,CAAC,CAAC,CAAC;EACrD,MAAM,CAACsD,UAAU,EAAEC,aAAa,CAAC,GAAGvD,QAAQ,CAAC,CAAC,CAAC;EAE/C,MAAMwD,mBAAmB,GAAGzD,MAAM,CAAS,CAAC;EAC5C,MAAM0D,aAAa,GAAG1D,MAAM,CAAC,IAAI,CAAC;EAElC,MAAM2D,KAAK,GAAG3C,QAAQ,CAAC,CAAU;EACjC,MAAM4C,YAAY,GAAG/D,UAAU,CAACuB,WAAW,CAAC;EAE5C,MAAMyC,aAAa,GAAG,OAAOZ,kBAAkB,KAAK,UAAU;EAE9D,MAAMa,qBAAqB,GACtB,CAACD,aAAa,KAAKrB,QAAQ,IAAI,OAAOA,QAAQ,KAAK,QAAQ,CAAC,IAC5D,OAAOL,aAAa,KAAK,QAAQ,IAAIA,aAAa,IAAI,QAAQ,IAAIA,aAAc;EAErF,MAAM4B,wBAAwB,GAAGhE,OAAO,CACpC,MAAM,CAACyC,QAAQ,IAAI,CAACqB,aAAa,EACjC,CAACA,aAAa,EAAErB,QAAQ,CAC5B,CAAC;EAED1C,SAAS,CAAC,MAAM;IACZkE,MAAM,CAACC,UAAU,CAAC,MAAM;MACpBP,aAAa,CAACQ,OAAO,GAAG,KAAK;IACjC,CAAC,EAAE,GAAG,CAAC;EACX,CAAC,EAAE,EAAE,CAAC;EAENpE,SAAS,CAAC,MAAM;IACZiD,kBAAkB,CAACQ,UAAU,EAAEF,aAAa,CAAC;EACjD,CAAC,EAAE,CAACN,kBAAkB,EAAEM,aAAa,EAAEE,UAAU,CAAC,CAAC;EAEnD,MAAMY,uBAAuB,GAAGvE,WAAW,CACtCwE,OAA8B,IAAK;IAChCZ,aAAa,CAACY,OAAO,CAAC,CAAC,CAAC,EAAEC,MAAM,CAACC,WAAW,IAAI,CAAC,CAAC;IAElD,IAAIZ,aAAa,CAACQ,OAAO,EAAE;MACvB;IACJ;IAEA,MAAMK,EAAE,GAAGH,OAAO,CAAC,CAAC,CAAC,EAAEC,MAAM;IAC7B,IAAI,CAACE,EAAE,EAAE;IACT3B,sBAAsB,CAAC2B,EAAE,CAACC,WAAW,GAAGD,EAAE,CAACD,WAAW,CAAC;EAC3D,CAAC,EACD,CAAC1B,sBAAsB,CAC3B,CAAC;EAED,MAAM6B,gBAAgB,GAAG7E,WAAW,CAAC,MAAMwD,sBAAsB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;EAE5E,MAAMsB,gBAAgB,GAAG9E,WAAW,CAAC,MAAMwD,sBAAsB,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC;EAE7E,MAAMuB,gBAAgB,GAAG/E,WAAW,CAC/BgF,KAAK,IAAK;IACPnB,mBAAmB,CAACS,OAAO,GAAGF,MAAM,CAACC,UAAU,CAAC,MAAM;MAClD,IAAI,OAAO/B,WAAW,KAAK,UAAU,EAAE;QACnCA,WAAW,CAAC0C,KAAK,CAAC;MACtB;IACJ,CAAC,EAAE,GAAG,CAAC;EACX,CAAC,EACD,CAAC1C,WAAW,CAChB,CAAC;EAED,MAAM2C,cAAc,GAAGjF,WAAW,CAAC,MAAM;IACrCkF,YAAY,CAACrB,mBAAmB,CAACS,OAAO,CAAC;EAC7C,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMa,sBAAsB,GAAGnF,WAAW,CAAEoF,KAAa,IAAK;IAC1D1B,gBAAgB,CAAC0B,KAAK,CAAC;EAC3B,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,gBAAgB,GAAGrF,WAAW,CAAqCgF,KAAK,IAAK;IAC/EA,KAAK,CAACM,eAAe,CAAC,CAAC;EAC3B,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,kBAAkB,GAAGpF,OAAO,CAAC,MAAM;IACrC,IAAI0B,KAAK,EAAE;MACP,oBACI9B,KAAA,CAAAyF,aAAA,CAAClF,YAAY;QACTuB,KAAK,EAAEA,KAAM;QACb4D,oBAAoB,EAAE,CAAC,CAACjD,+BAAgC;QACxDkD,mBAAmB,EAAE,CAAC,CAAC/C;MAA2B,CACrD,CAAC;IAEV;IAEA,IAAIZ,MAAM,EAAE;MACR,oBACIhC,KAAA,CAAAyF,aAAA,CAACjF,aAAa;QACV2C,aAAa,EAAEA,aAAc;QAC7BpB,eAAe,EAAEA,eAAgB;QACjCJ,gBAAgB,EAAEA,gBAAiB;QACnCC,WAAW,EAAEA,WAAY;QACzBI,MAAM,EAAEA,MAAO;QACfqB,YAAY,EAAEA,YAAa;QAC3BV,sBAAsB,EAAEA,sBAAuB;QAC/C+C,oBAAoB,EAAE,CAAC,CAACjD,+BAAgC;QACxDmD,oBAAoB,EAAE,CAAC,CAAChD;MAA2B,CACtD,CAAC;IAEV;IAEA,OAAOiD,SAAS;EACpB,CAAC,EAAE,CACClE,gBAAgB,EAChBwB,aAAa,EACbvB,WAAW,EACXE,KAAK,EACLC,eAAe,EACfC,MAAM,EACNqB,YAAY,EACZZ,+BAA+B,EAC/BE,sBAAsB,EACtBC,0BAA0B,CAC7B,CAAC;EAEF,MAAMkD,UAAU,GAAG1F,OAAO,CAAC,MAAM;IAC7B,MAAM2F,YAAY,GAAGxE,mBAAmB,CAACyC,KAAK,CAACgC,aAAa,CAAC;IAC7D,MAAMC,iBAAiB,GAAGjC,KAAK,EAAEkC,SAAS,GAAGlC,KAAK,CAACkC,SAAS,GAAG,YAAY;IAC3E,oBAAOlG,KAAA,CAAAyF,aAAA,CAACnE,iBAAiB;MAAC6E,KAAK,EAAEJ,YAAa;MAACK,SAAS,EAAEH;IAAkB,CAAE,CAAC;EACnF,CAAC,EAAE,CAACjC,KAAK,CAACgC,aAAa,EAAEhC,KAAK,CAACkC,SAAS,CAAC,CAAC;EAE1C,oBACIlG,KAAA,CAAAyF,aAAA,CAAChF,kBAAkB;IACf4F,EAAE,EAAEnD,sBAAsB,GAAG2C,SAAS,GAAG9F,MAAM,CAACuG,GAAI;IACpDC,OAAO,EACHrD,sBAAsB,GAChB2C,SAAS,GACT;MACIW,OAAO,EAAEpE,aAAa,GAAG,GAAG,GAAG;IACnC,CACT;IACDqE,OAAO,EAAEvD,sBAAsB,GAAG2C,SAAS,GAAG,KAAM;IACpDa,UAAU,EAAExD,sBAAsB,GAAG2C,SAAS,GAAG;MAAEc,QAAQ,EAAE,GAAG;MAAEC,IAAI,EAAE;IAAQ,CAAE;IAClFR,SAAS,EAAC,4BAA4B;IACtCS,YAAY,EAAE,OAAOvE,OAAO,KAAK,UAAU,IAAIJ,YAAa;IAC5D4E,oBAAoB,EAAE7E,mBAAoB;IAC1CK,OAAO,EAAEA,OAAQ;IACjByE,YAAY,EAAEjC,gBAAiB;IAC/BkC,YAAY,EAAEjC,gBAAiB;IAC/BkC,YAAY,EAAE,OAAO1E,WAAW,KAAK,UAAU,GAAGyC,gBAAgB,GAAGa,SAAU;IAC/EqB,UAAU,EAAE,OAAO3E,WAAW,KAAK,UAAU,GAAG2C,cAAc,GAAGW;EAAU,gBAE3E7F,KAAA,CAAAyF,aAAA,CAAC7E,6BAA6B,QACzBqB,mBAAmB,iBAChBjC,KAAA,CAAAyF,aAAA,CAAC9E,2BAA2B;IACxB0F,EAAE,EAAEnD,sBAAsB,GAAG2C,SAAS,GAAG9F,MAAM,CAACuG,GAAI;IACpDC,OAAO,EAAErD,sBAAsB,GAAG2C,SAAS,GAAG;MAAEsB,MAAM,EAAEhF,MAAM,GAAG,EAAE,GAAG;IAAE,CAAE;IAC1EsE,OAAO,EAAEvD,sBAAsB,GAAG2C,SAAS,GAAG,KAAM;IACpDa,UAAU,EAAExD,sBAAsB,GAAG2C,SAAS,GAAG;MAAEe,IAAI,EAAE;IAAQ;EAAE,GAElE1E,YAAY,IAAI,CAACQ,mBAAmB,IAAIoD,UAChB,CAChC,EACAzD,YAAY,EACZmD,kBAC0B,CAAC,eAChCxF,KAAA,CAAAyF,aAAA,CAAC/E,yBAAyB;IACtB0G,mBAAmB,EAAE5B,kBAAkB,KAAKK,SAAU;IACtDwB,OAAO,EAAElF;EAAO,gBAEhBnC,KAAA,CAAAyF,aAAA,CAAC3F,WAAW,qBACRE,KAAA,CAAAyF,aAAA,CAAC3E,uBAAuB;IACpBuF,EAAE,EAAEnD,sBAAsB,GAAG2C,SAAS,GAAG9F,MAAM,CAACuG,GAAI;IACpDgB,MAAM,EAAC;EAAU,GAEhBpD,aAAa;EAAA;EACV;EACAlE,KAAA,CAAAyF,aAAA,CAAChE,WAAW,CAAC8F,QAAQ;IACjBC,KAAK,EAAE;MAAE,GAAGvD,YAAY;MAAEwD,iBAAiB,EAAE;IAAK;EAAE,gBAEpDzH,KAAA,CAAAyF,aAAA,CAAC1E,mCAAmC;IAACuB,OAAO,EAAEgD;EAAiB,gBAC3DtF,KAAA,CAAAyF,aAAA,CAACjE;EACG,6DAAAkG,QAAA,KACInE,eAAe;IACnBiE,KAAK,EAAE,OAAOzE,KAAK,KAAK,QAAQ,GAAGA,KAAK,GAAG8C,SAAU;IACrD8B,QAAQ,EAAErE;EAAmB,EAChC,CACgC,CACnB,CAAC,gBAEvBtD,KAAA,CAAAyF,aAAA,CAACvE,aAAa;IACV6B,KAAK,EAAEA,KAAM;IACbC,YAAY,EAAEA,YAAa;IAC3Bb,MAAM,EAAEA,MAAO;IACfiC,wBAAwB,EAAEA,wBAAyB;IACnD5B,aAAa,EAAEA,aAAc;IAC7BY,kBAAkB,EAAEgC,sBAAuB;IAC3CwC,QAAQ,EAAEpD;EAAwB,CACrC,CAEgB,CAAC,EACzBL,qBAAqB,iBAClBnE,KAAA,CAAAyF,aAAA,CAAC5E,0BAA0B,qBACvBb,KAAA,CAAAyF,aAAA,CAACtE,gBAAgB;IACb0B,QAAQ,EAAEA,QAAS;IACnBV,MAAM,EAAEA,MAAO;IACfK,aAAa,EAAEA;EAAc,CAChC,CACuB,CAEvB,CACU,CAAC,eAC5BxC,KAAA,CAAAyF,aAAA,CAACrE,oBAAoB;IAACoB,aAAa,EAAEA;EAAc,CAAE,CAAC,EACrDX,SAAS,iBACN7B,KAAA,CAAAyF,aAAA,CAACxE,wCAAwC;IACrCmF,SAAS,EAAC,kCAAkC;IAC5CG,OAAO,EAAE;MACLsB,UAAU,EAAE/E,gBAAgB,IAAIU,mBAAmB,GAAG,CAAC,GAAG,CAAC;MAC3DgD,OAAO,EAAE1D,gBAAgB,IAAIU,mBAAmB,GAAG,CAAC,GAAG,CAAC;MACxD6B,KAAK,EAAEvC,gBAAgB,IAAIU,mBAAmB,GAAG,MAAM,GAAG;IAC9D,CAAE;IACFiD,OAAO,EAAE,KAAM;IACfC,UAAU,EAAE;MAAEC,QAAQ,EAAE,IAAI;MAAEC,IAAI,EAAE;IAAQ;EAAE,gBAE9C5G,KAAA,CAAAyF,aAAA,CAACzE,iCAAiC,QAC7Ba,SAC8B,CACG,CAE9B,CAAC;AAE7B,CAAC;AAEDH,YAAY,CAACoG,WAAW,GAAG,cAAc;AAEzC,eAAepG,YAAY","ignoreList":[]}

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

@@ -27,10 +27,6 @@ export const StyledListItemHeadLeftWrapper = styled.div`
     align-items: center;
     margin: auto 0;
 `;
-export const StyledListItemHeadLeftElements = styled.div`
-    display: flex;
-    align-items: center;
-`;
 export const StyledListItemHeadIndicator = styled.div`
     align-items: center;
     display: flex;
@@ -58,6 +54,9 @@ export const StyledListItemHeadTitle = styled.div`
     display: flex;
     justify-content: space-between;
 `;
+export const StyledListItemHeadTitleInputWrapper = styled.div`
+    width: 100%;
+`;
 export const StyledListItemHeadTitleContent = styled.div`
     align-items: center;
     display: flex;

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

@@ -1 +1 @@
-{"version":3,"file":"ListItemHead.styles.js","names":["motion","styled","css","StyledListItemHead","div","theme","text","$isClickable","$isAnyItemExpandable","StyledListItemHeadLeftWrapper","StyledListItemHeadLeftElements","StyledListItemHeadIndicator","StyledListItemHeadContent","$isOpen","$isIconOrImageGiven","undefined","StyledListItemHeadTitle","StyledListItemHeadTitleContent","StyledListItemHeadSubtitle","StyledMotionListItemHeadHoverItemWrapper","StyledMotionListItemHeadHoverItem"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.styles.ts"],"sourcesContent":["import type { HTMLMotionProps } from 'motion/react';\nimport { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { Theme } from '../../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemHeadProps = HTMLMotionProps<'div'> & {\n    $isClickable: boolean;\n    $isAnyItemExpandable: boolean;\n};\n\nexport const StyledListItemHead = styled.div<StyledListItemHeadProps>`\n    //align-items: center;\n    overflow: hidden;\n    color: ${({ theme }: StyledListItemHeadProps & { theme: Theme }) => theme.text};\n    display: flex;\n    min-height: 64px;\n    padding: 12px 9px;\n    position: relative;\n    width: 100%;\n    justify-content: center;\n    cursor: ${({ $isClickable }) => ($isClickable ? 'pointer' : 'default')};\n\n    ${({ $isAnyItemExpandable }) =>\n        !$isAnyItemExpandable &&\n        css`\n            padding-left: 12px;\n        `}\n`;\n\nexport const StyledListItemHeadLeftWrapper = styled.div`\n    display: flex;\n    align-items: center;\n    margin: auto 0;\n`;\n\nexport const StyledListItemHeadLeftElements = styled.div`\n    display: flex;\n    align-items: center;\n`;\n\ntype StyledListItemHeadIndicatorProps = HTMLMotionProps<'div'>;\n\nexport const StyledListItemHeadIndicator = styled.div<StyledListItemHeadIndicatorProps>`\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};\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: center;\n    line-height: normal;\n    margin-left: ${({ $isIconOrImageGiven }) => ($isIconOrImageGiven ? '10px' : undefined)};\n    min-width: 0;\n`;\n\ntype StyledListItemHeadTitleProps = HTMLMotionProps<'div'>;\n\nexport const StyledListItemHeadTitle = styled.div<StyledListItemHeadTitleProps>`\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n`;\n\nexport const StyledListItemHeadTitleContent = styled.div`\n    align-items: center;\n    display: flex;\n    flex: 1 1 auto;\n    max-width: 100%;\n    min-width: 0;\n    position: relative;\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 StyledMotionListItemHeadHoverItemWrapperProps = {\n    theme: Theme;\n};\n\nexport const StyledMotionListItemHeadHoverItemWrapper = styled(\n    motion.div,\n)<StyledMotionListItemHeadHoverItemWrapperProps>`\n    overflow: hidden;\n    flex-shrink: 0;\n    margin: auto 0;\n    position: absolute;\n    right: 0;\n\n    background: ${({ theme }: StyledMotionListItemHeadHoverItemWrapperProps) =>\n        `linear-gradient(to right, transparent 0px, rgb(${theme['000-rgb'] ?? ''}) 40px)`};\n`;\n\nexport const StyledMotionListItemHeadHoverItem = styled.div`\n    padding-left: 40px;\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAQ/C,OAAO,MAAMC,kBAAkB,GAAGF,MAAM,CAACG,GAA4B;AACrE;AACA;AACA,aAAa,CAAC;EAAEC;AAAkD,CAAC,KAAKA,KAAK,CAACC,IAAI;AAClF;AACA;AACA;AACA;AACA;AACA;AACA,cAAc,CAAC;EAAEC;AAAa,CAAC,KAAMA,YAAY,GAAG,SAAS,GAAG,SAAU;AAC1E;AACA,MAAM,CAAC;EAAEC;AAAqB,CAAC,KACvB,CAACA,oBAAoB,IACrBN,GAAG;AACX;AACA,SAAS;AACT,CAAC;AAED,OAAO,MAAMO,6BAA6B,GAAGR,MAAM,CAACG,GAAG;AACvD;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMM,8BAA8B,GAAGT,MAAM,CAACG,GAAG;AACxD;AACA;AACA,CAAC;AAID,OAAO,MAAMO,2BAA2B,GAAGV,MAAM,CAACG,GAAqC;AACvF;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMQ,yBAAyB,GAAGX,MAAM,CAACG,GAAmC;AACnF;AACA;AACA;AACA,mBAAmB,CAAC;EAAES;AAAQ,CAAC,KAAMA,OAAO,GAAG,MAAM,GAAG,QAAS;AACjE;AACA;AACA,mBAAmB,CAAC;EAAEC;AAAoB,CAAC,KAAMA,mBAAmB,GAAG,MAAM,GAAGC,SAAU;AAC1F;AACA,CAAC;AAID,OAAO,MAAMC,uBAAuB,GAAGf,MAAM,CAACG,GAAiC;AAC/E;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMa,8BAA8B,GAAGhB,MAAM,CAACG,GAAG;AACxD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMc,0BAA0B,GAAGjB,MAAM,CAACG,GAAG;AACpD;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMe,wCAAwC,GAAGlB,MAAM,CAC1DD,MAAM,CAACI,GACX,CAAgD;AAChD;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkB,CAAC;EAAEC;AAAqD,CAAC,KACnE,kDAAkDA,KAAK,CAAC,SAAS,CAAC,IAAI,EAAE,SAAS;AACzF,CAAC;AAED,OAAO,MAAMe,iCAAiC,GAAGnB,MAAM,CAACG,GAAG;AAC3D;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"ListItemHead.styles.js","names":["motion","styled","css","StyledListItemHead","div","theme","text","$isClickable","$isAnyItemExpandable","StyledListItemHeadLeftWrapper","StyledListItemHeadIndicator","StyledListItemHeadContent","$isOpen","$isIconOrImageGiven","undefined","StyledListItemHeadTitle","StyledListItemHeadTitleInputWrapper","StyledListItemHeadTitleContent","StyledListItemHeadSubtitle","StyledMotionListItemHeadHoverItemWrapper","StyledMotionListItemHeadHoverItem"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.styles.ts"],"sourcesContent":["import type { HTMLMotionProps } from 'motion/react';\nimport { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { Theme } from '../../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemHeadProps = HTMLMotionProps<'div'> & {\n    $isClickable: boolean;\n    $isAnyItemExpandable: boolean;\n};\n\nexport const StyledListItemHead = styled.div<StyledListItemHeadProps>`\n    //align-items: center;\n    overflow: hidden;\n    color: ${({ theme }: StyledListItemHeadProps & { theme: Theme }) => theme.text};\n    display: flex;\n    min-height: 64px;\n    padding: 12px 9px;\n    position: relative;\n    width: 100%;\n    justify-content: center;\n    cursor: ${({ $isClickable }) => ($isClickable ? 'pointer' : 'default')};\n\n    ${({ $isAnyItemExpandable }) =>\n        !$isAnyItemExpandable &&\n        css`\n            padding-left: 12px;\n        `}\n`;\n\nexport const StyledListItemHeadLeftWrapper = styled.div`\n    display: flex;\n    align-items: center;\n    margin: auto 0;\n`;\n\ntype StyledListItemHeadIndicatorProps = HTMLMotionProps<'div'>;\n\nexport const StyledListItemHeadIndicator = styled.div<StyledListItemHeadIndicatorProps>`\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};\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: center;\n    line-height: normal;\n    margin-left: ${({ $isIconOrImageGiven }) => ($isIconOrImageGiven ? '10px' : undefined)};\n    min-width: 0;\n`;\n\ntype StyledListItemHeadTitleProps = HTMLMotionProps<'div'>;\n\nexport const StyledListItemHeadTitle = styled.div<StyledListItemHeadTitleProps>`\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n`;\n\nexport const StyledListItemHeadTitleInputWrapper = styled.div`\n    width: 100%;\n`;\n\nexport const StyledListItemHeadTitleContent = styled.div`\n    align-items: center;\n    display: flex;\n    flex: 1 1 auto;\n    max-width: 100%;\n    min-width: 0;\n    position: relative;\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 StyledMotionListItemHeadHoverItemWrapperProps = {\n    theme: Theme;\n};\n\nexport const StyledMotionListItemHeadHoverItemWrapper = styled(\n    motion.div,\n)<StyledMotionListItemHeadHoverItemWrapperProps>`\n    overflow: hidden;\n    flex-shrink: 0;\n    margin: auto 0;\n    position: absolute;\n    right: 0;\n\n    background: ${({ theme }: StyledMotionListItemHeadHoverItemWrapperProps) =>\n        `linear-gradient(to right, transparent 0px, rgb(${theme['000-rgb'] ?? ''}) 40px)`};\n`;\n\nexport const StyledMotionListItemHeadHoverItem = styled.div`\n    padding-left: 40px;\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAQ/C,OAAO,MAAMC,kBAAkB,GAAGF,MAAM,CAACG,GAA4B;AACrE;AACA;AACA,aAAa,CAAC;EAAEC;AAAkD,CAAC,KAAKA,KAAK,CAACC,IAAI;AAClF;AACA;AACA;AACA;AACA;AACA;AACA,cAAc,CAAC;EAAEC;AAAa,CAAC,KAAMA,YAAY,GAAG,SAAS,GAAG,SAAU;AAC1E;AACA,MAAM,CAAC;EAAEC;AAAqB,CAAC,KACvB,CAACA,oBAAoB,IACrBN,GAAG;AACX;AACA,SAAS;AACT,CAAC;AAED,OAAO,MAAMO,6BAA6B,GAAGR,MAAM,CAACG,GAAG;AACvD;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMM,2BAA2B,GAAGT,MAAM,CAACG,GAAqC;AACvF;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMO,yBAAyB,GAAGV,MAAM,CAACG,GAAmC;AACnF;AACA;AACA;AACA,mBAAmB,CAAC;EAAEQ;AAAQ,CAAC,KAAMA,OAAO,GAAG,MAAM,GAAG,QAAS;AACjE;AACA;AACA,mBAAmB,CAAC;EAAEC;AAAoB,CAAC,KAAMA,mBAAmB,GAAG,MAAM,GAAGC,SAAU;AAC1F;AACA,CAAC;AAID,OAAO,MAAMC,uBAAuB,GAAGd,MAAM,CAACG,GAAiC;AAC/E;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMY,mCAAmC,GAAGf,MAAM,CAACG,GAAG;AAC7D;AACA,CAAC;AAED,OAAO,MAAMa,8BAA8B,GAAGhB,MAAM,CAACG,GAAG;AACxD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMc,0BAA0B,GAAGjB,MAAM,CAACG,GAAG;AACpD;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMe,wCAAwC,GAAGlB,MAAM,CAC1DD,MAAM,CAACI,GACX,CAAgD;AAChD;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkB,CAAC;EAAEC;AAAqD,CAAC,KACnE,kDAAkDA,KAAK,CAAC,SAAS,CAAC,IAAI,EAAE,SAAS;AACzF,CAAC;AAED,OAAO,MAAMe,iCAAiC,GAAGnB,MAAM,CAACG,GAAG;AAC3D;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/list/list-item/list-item-head/list-item-image/ListItemImage.js

@@ -37,6 +37,7 @@ const ListItemImage = ({
       cornerImage: cornerImage ?? careOfImage,
       imageBackground: imageBackground,
       images: images,
+      height: 40,
       onImageError: onImageError,
       onClick: handleImageClick,
       shouldPreventBackground: shouldHideBackground,

package/lib/esm/components/list/list-item/list-item-head/list-item-image/ListItemImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemImage.js","names":["MediaType","openMedia","React","useCallback","GroupedImage","ListItemImage","careOfLocationId","cornerImage","imageBackground","images","shouldHideBackground","shouldShowRoundImage","shouldOpenImageOnClick","cornerElement","onImageError","handleImageClick","event","preventDefault","stopPropagation","items","map","image","url","mediaType","IMAGE","startIndex","careOfImage","undefined","createElement","onClick","shouldPreventBackground","displayName"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-image/ListItemImage.tsx"],"sourcesContent":["import { MediaType, openMedia, OpenMediaItem } from 'chayns-api';\nimport React, {\n    CSSProperties,\n    MouseEventHandler,\n    ReactNode,\n    SyntheticEvent,\n    useCallback,\n} from 'react';\nimport GroupedImage from '../../../../grouped-image/GroupedImage';\n\ntype ListItemImageProps = {\n    careOfLocationId?: number;\n    cornerImage?: string;\n    imageBackground?: CSSProperties['background'];\n    images: string[];\n    shouldHideBackground: boolean;\n    shouldShowRoundImage: boolean;\n    shouldOpenImageOnClick: boolean;\n    cornerElement?: ReactNode;\n    onImageError?: (event: SyntheticEvent<HTMLImageElement, Event>, index: number) => void;\n};\n\nconst ListItemImage: React.FC<ListItemImageProps> = ({\n    careOfLocationId,\n    cornerImage,\n    imageBackground,\n    images,\n    shouldHideBackground,\n    shouldShowRoundImage,\n    shouldOpenImageOnClick,\n    cornerElement,\n    onImageError,\n}) => {\n    const handleImageClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (!shouldOpenImageOnClick) {\n                return;\n            }\n\n            event.preventDefault();\n            event.stopPropagation();\n\n            const items: OpenMediaItem[] = images.map((image) => ({\n                url: image,\n                mediaType: MediaType.IMAGE,\n            }));\n\n            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n            // @ts-ignore\n            void openMedia({ items, startIndex: 0 });\n        },\n        [images, shouldOpenImageOnClick],\n    );\n\n    if (images && images[0]) {\n        const careOfImage = careOfLocationId\n            ? `https://sub60.tobit.com/l/${careOfLocationId}?size=128`\n            : undefined;\n\n        return (\n            <GroupedImage\n                cornerElement={cornerElement}\n                cornerImage={cornerImage ?? careOfImage}\n                imageBackground={imageBackground}\n                images={images}\n                onImageError={onImageError}\n                onClick={handleImageClick}\n                shouldPreventBackground={shouldHideBackground}\n                shouldShowRoundImage={shouldShowRoundImage}\n            />\n        );\n    }\n\n    return null;\n};\n\nListItemImage.displayName = 'ListItemImage';\n\nexport default ListItemImage;\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,SAAS,QAAuB,YAAY;AAChE,OAAOC,KAAK,IAKRC,WAAW,QACR,OAAO;AACd,OAAOC,YAAY,MAAM,wCAAwC;AAcjE,MAAMC,aAA2C,GAAGA,CAAC;EACjDC,gBAAgB;EAChBC,WAAW;EACXC,eAAe;EACfC,MAAM;EACNC,oBAAoB;EACpBC,oBAAoB;EACpBC,sBAAsB;EACtBC,aAAa;EACbC;AACJ,CAAC,KAAK;EACF,MAAMC,gBAAgB,GAAGZ,WAAW,CAC/Ba,KAAK,IAAK;IACP,IAAI,CAACJ,sBAAsB,EAAE;MACzB;IACJ;IAEAI,KAAK,CAACC,cAAc,CAAC,CAAC;IACtBD,KAAK,CAACE,eAAe,CAAC,CAAC;IAEvB,MAAMC,KAAsB,GAAGV,MAAM,CAACW,GAAG,CAAEC,KAAK,KAAM;MAClDC,GAAG,EAAED,KAAK;MACVE,SAAS,EAAEvB,SAAS,CAACwB;IACzB,CAAC,CAAC,CAAC;;IAEH;IACA;IACA,KAAKvB,SAAS,CAAC;MAAEkB,KAAK;MAAEM,UAAU,EAAE;IAAE,CAAC,CAAC;EAC5C,CAAC,EACD,CAAChB,MAAM,EAAEG,sBAAsB,CACnC,CAAC;EAED,IAAIH,MAAM,IAAIA,MAAM,CAAC,CAAC,CAAC,EAAE;IACrB,MAAMiB,WAAW,GAAGpB,gBAAgB,GAC9B,6BAA6BA,gBAAgB,WAAW,GACxDqB,SAAS;IAEf,oBACIzB,KAAA,CAAA0B,aAAA,CAACxB,YAAY;MACTS,aAAa,EAAEA,aAAc;MAC7BN,WAAW,EAAEA,WAAW,IAAImB,WAAY;MACxClB,eAAe,EAAEA,eAAgB;MACjCC,MAAM,EAAEA,MAAO;MACfK,YAAY,EAAEA,YAAa;MAC3Be,OAAO,EAAEd,gBAAiB;MAC1Be,uBAAuB,EAAEpB,oBAAqB;MAC9CC,oBAAoB,EAAEA;IAAqB,CAC9C,CAAC;EAEV;EAEA,OAAO,IAAI;AACf,CAAC;AAEDN,aAAa,CAAC0B,WAAW,GAAG,eAAe;AAE3C,eAAe1B,aAAa","ignoreList":[]}
+{"version":3,"file":"ListItemImage.js","names":["MediaType","openMedia","React","useCallback","GroupedImage","ListItemImage","careOfLocationId","cornerImage","imageBackground","images","shouldHideBackground","shouldShowRoundImage","shouldOpenImageOnClick","cornerElement","onImageError","handleImageClick","event","preventDefault","stopPropagation","items","map","image","url","mediaType","IMAGE","startIndex","careOfImage","undefined","createElement","height","onClick","shouldPreventBackground","displayName"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-image/ListItemImage.tsx"],"sourcesContent":["import { MediaType, openMedia, OpenMediaItem } from 'chayns-api';\nimport React, {\n    CSSProperties,\n    MouseEventHandler,\n    ReactNode,\n    SyntheticEvent,\n    useCallback,\n} from 'react';\nimport GroupedImage from '../../../../grouped-image/GroupedImage';\n\ntype ListItemImageProps = {\n    careOfLocationId?: number;\n    cornerImage?: string;\n    imageBackground?: CSSProperties['background'];\n    images: string[];\n    shouldHideBackground: boolean;\n    shouldShowRoundImage: boolean;\n    shouldOpenImageOnClick: boolean;\n    cornerElement?: ReactNode;\n    onImageError?: (event: SyntheticEvent<HTMLImageElement, Event>, index: number) => void;\n};\n\nconst ListItemImage: React.FC<ListItemImageProps> = ({\n    careOfLocationId,\n    cornerImage,\n    imageBackground,\n    images,\n    shouldHideBackground,\n    shouldShowRoundImage,\n    shouldOpenImageOnClick,\n    cornerElement,\n    onImageError,\n}) => {\n    const handleImageClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (!shouldOpenImageOnClick) {\n                return;\n            }\n\n            event.preventDefault();\n            event.stopPropagation();\n\n            const items: OpenMediaItem[] = images.map((image) => ({\n                url: image,\n                mediaType: MediaType.IMAGE,\n            }));\n\n            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n            // @ts-ignore\n            void openMedia({ items, startIndex: 0 });\n        },\n        [images, shouldOpenImageOnClick],\n    );\n\n    if (images && images[0]) {\n        const careOfImage = careOfLocationId\n            ? `https://sub60.tobit.com/l/${careOfLocationId}?size=128`\n            : undefined;\n\n        return (\n            <GroupedImage\n                cornerElement={cornerElement}\n                cornerImage={cornerImage ?? careOfImage}\n                imageBackground={imageBackground}\n                images={images}\n                height={40}\n                onImageError={onImageError}\n                onClick={handleImageClick}\n                shouldPreventBackground={shouldHideBackground}\n                shouldShowRoundImage={shouldShowRoundImage}\n            />\n        );\n    }\n\n    return null;\n};\n\nListItemImage.displayName = 'ListItemImage';\n\nexport default ListItemImage;\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,SAAS,QAAuB,YAAY;AAChE,OAAOC,KAAK,IAKRC,WAAW,QACR,OAAO;AACd,OAAOC,YAAY,MAAM,wCAAwC;AAcjE,MAAMC,aAA2C,GAAGA,CAAC;EACjDC,gBAAgB;EAChBC,WAAW;EACXC,eAAe;EACfC,MAAM;EACNC,oBAAoB;EACpBC,oBAAoB;EACpBC,sBAAsB;EACtBC,aAAa;EACbC;AACJ,CAAC,KAAK;EACF,MAAMC,gBAAgB,GAAGZ,WAAW,CAC/Ba,KAAK,IAAK;IACP,IAAI,CAACJ,sBAAsB,EAAE;MACzB;IACJ;IAEAI,KAAK,CAACC,cAAc,CAAC,CAAC;IACtBD,KAAK,CAACE,eAAe,CAAC,CAAC;IAEvB,MAAMC,KAAsB,GAAGV,MAAM,CAACW,GAAG,CAAEC,KAAK,KAAM;MAClDC,GAAG,EAAED,KAAK;MACVE,SAAS,EAAEvB,SAAS,CAACwB;IACzB,CAAC,CAAC,CAAC;;IAEH;IACA;IACA,KAAKvB,SAAS,CAAC;MAAEkB,KAAK;MAAEM,UAAU,EAAE;IAAE,CAAC,CAAC;EAC5C,CAAC,EACD,CAAChB,MAAM,EAAEG,sBAAsB,CACnC,CAAC;EAED,IAAIH,MAAM,IAAIA,MAAM,CAAC,CAAC,CAAC,EAAE;IACrB,MAAMiB,WAAW,GAAGpB,gBAAgB,GAC9B,6BAA6BA,gBAAgB,WAAW,GACxDqB,SAAS;IAEf,oBACIzB,KAAA,CAAA0B,aAAA,CAACxB,YAAY;MACTS,aAAa,EAAEA,aAAc;MAC7BN,WAAW,EAAEA,WAAW,IAAImB,WAAY;MACxClB,eAAe,EAAEA,eAAgB;MACjCC,MAAM,EAAEA,MAAO;MACfoB,MAAM,EAAE,EAAG;MACXf,YAAY,EAAEA,YAAa;MAC3BgB,OAAO,EAAEf,gBAAiB;MAC1BgB,uBAAuB,EAAErB,oBAAqB;MAC9CC,oBAAoB,EAAEA;IAAqB,CAC9C,CAAC;EAEV;EAEA,OAAO,IAAI;AACf,CAAC;AAEDN,aAAa,CAAC2B,WAAW,GAAG,eAAe;AAE3C,eAAe3B,aAAa","ignoreList":[]}

package/lib/esm/components/list/list-item/list-item-head/list-item-right-element/ListItemRightElement.js

@@ -27,7 +27,6 @@ const ListItemRightElement = ({
     return null;
   }
   return /*#__PURE__*/React.createElement(StyledListItemRightElement, {
-    "data-right-element": "true",
     onClick: shouldPreventRightElementClick ? handlePreventClick : undefined
   }, centerElement);
 };

package/lib/esm/components/list/list-item/list-item-head/list-item-right-element/ListItemRightElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemRightElement.js","names":["React","isValidElement","useMemo","StyledListItemRightElement","getElementClickEvent","ListItemRightElement","rightElements","handlePreventClick","event","stopPropagation","preventDefault","centerElement","center","undefined","shouldPreventRightElementClick","createElement","onClick","displayName"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-right-element/ListItemRightElement.tsx"],"sourcesContent":["import React, { FC, isValidElement, useMemo } from 'react';\nimport type { IListItemRightElement, IListItemRightElements } from '../../../../../types/list';\nimport { StyledListItemRightElement } from './ListItemRightElement.styles';\nimport { getElementClickEvent } from '../../../../../utils/accordion';\n\ntype ListItemRightElementProps = {\n    rightElements?: IListItemRightElements;\n};\n\nconst ListItemRightElement: FC<ListItemRightElementProps> = ({ rightElements }) => {\n    const handlePreventClick = (event: React.MouseEvent) => {\n        event.stopPropagation();\n        event.preventDefault();\n    };\n\n    const centerElement = useMemo(() => {\n        if (typeof rightElements === 'string' || isValidElement(rightElements)) {\n            return rightElements;\n        }\n\n        if (typeof rightElements === 'object' && rightElements && 'center' in rightElements) {\n            return (rightElements as unknown as IListItemRightElement).center;\n        }\n\n        return undefined;\n    }, [rightElements]);\n\n    const shouldPreventRightElementClick = useMemo(() => {\n        if (centerElement) {\n            return getElementClickEvent(centerElement);\n        }\n\n        return false;\n    }, [centerElement]);\n\n    if (!centerElement) {\n        return null;\n    }\n\n    return (\n        <StyledListItemRightElement\n            data-right-element=\"true\"\n            onClick={shouldPreventRightElementClick ? handlePreventClick : undefined}\n        >\n            {centerElement}\n        </StyledListItemRightElement>\n    );\n};\n\nListItemRightElement.displayName = 'ListItemRightElement';\n\nexport default ListItemRightElement;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,cAAc,EAAEC,OAAO,QAAQ,OAAO;AAE1D,SAASC,0BAA0B,QAAQ,+BAA+B;AAC1E,SAASC,oBAAoB,QAAQ,gCAAgC;AAMrE,MAAMC,oBAAmD,GAAGA,CAAC;EAAEC;AAAc,CAAC,KAAK;EAC/E,MAAMC,kBAAkB,GAAIC,KAAuB,IAAK;IACpDA,KAAK,CAACC,eAAe,CAAC,CAAC;IACvBD,KAAK,CAACE,cAAc,CAAC,CAAC;EAC1B,CAAC;EAED,MAAMC,aAAa,GAAGT,OAAO,CAAC,MAAM;IAChC,IAAI,OAAOI,aAAa,KAAK,QAAQ,iBAAIL,cAAc,CAACK,aAAa,CAAC,EAAE;MACpE,OAAOA,aAAa;IACxB;IAEA,IAAI,OAAOA,aAAa,KAAK,QAAQ,IAAIA,aAAa,IAAI,QAAQ,IAAIA,aAAa,EAAE;MACjF,OAAQA,aAAa,CAAsCM,MAAM;IACrE;IAEA,OAAOC,SAAS;EACpB,CAAC,EAAE,CAACP,aAAa,CAAC,CAAC;EAEnB,MAAMQ,8BAA8B,GAAGZ,OAAO,CAAC,MAAM;IACjD,IAAIS,aAAa,EAAE;MACf,OAAOP,oBAAoB,CAACO,aAAa,CAAC;IAC9C;IAEA,OAAO,KAAK;EAChB,CAAC,EAAE,CAACA,aAAa,CAAC,CAAC;EAEnB,IAAI,CAACA,aAAa,EAAE;IAChB,OAAO,IAAI;EACf;EAEA,oBACIX,KAAA,CAAAe,aAAA,CAACZ,0BAA0B;IACvB,sBAAmB,MAAM;IACzBa,OAAO,EAAEF,8BAA8B,GAAGP,kBAAkB,GAAGM;EAAU,GAExEF,aACuB,CAAC;AAErC,CAAC;AAEDN,oBAAoB,CAACY,WAAW,GAAG,sBAAsB;AAEzD,eAAeZ,oBAAoB","ignoreList":[]}
+{"version":3,"file":"ListItemRightElement.js","names":["React","isValidElement","useMemo","StyledListItemRightElement","getElementClickEvent","ListItemRightElement","rightElements","handlePreventClick","event","stopPropagation","preventDefault","centerElement","center","undefined","shouldPreventRightElementClick","createElement","onClick","displayName"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-right-element/ListItemRightElement.tsx"],"sourcesContent":["import React, { FC, isValidElement, useMemo } from 'react';\nimport type { IListItemRightElement, IListItemRightElements } from '../../../../../types/list';\nimport { StyledListItemRightElement } from './ListItemRightElement.styles';\nimport { getElementClickEvent } from '../../../../../utils/accordion';\n\ntype ListItemRightElementProps = {\n    rightElements?: IListItemRightElements;\n};\n\nconst ListItemRightElement: FC<ListItemRightElementProps> = ({ rightElements }) => {\n    const handlePreventClick = (event: React.MouseEvent) => {\n        event.stopPropagation();\n        event.preventDefault();\n    };\n\n    const centerElement = useMemo(() => {\n        if (typeof rightElements === 'string' || isValidElement(rightElements)) {\n            return rightElements;\n        }\n\n        if (typeof rightElements === 'object' && rightElements && 'center' in rightElements) {\n            return (rightElements as unknown as IListItemRightElement).center;\n        }\n\n        return undefined;\n    }, [rightElements]);\n\n    const shouldPreventRightElementClick = useMemo(() => {\n        if (centerElement) {\n            return getElementClickEvent(centerElement);\n        }\n\n        return false;\n    }, [centerElement]);\n\n    if (!centerElement) {\n        return null;\n    }\n\n    return (\n        <StyledListItemRightElement\n            onClick={shouldPreventRightElementClick ? handlePreventClick : undefined}\n        >\n            {centerElement}\n        </StyledListItemRightElement>\n    );\n};\n\nListItemRightElement.displayName = 'ListItemRightElement';\n\nexport default ListItemRightElement;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,cAAc,EAAEC,OAAO,QAAQ,OAAO;AAE1D,SAASC,0BAA0B,QAAQ,+BAA+B;AAC1E,SAASC,oBAAoB,QAAQ,gCAAgC;AAMrE,MAAMC,oBAAmD,GAAGA,CAAC;EAAEC;AAAc,CAAC,KAAK;EAC/E,MAAMC,kBAAkB,GAAIC,KAAuB,IAAK;IACpDA,KAAK,CAACC,eAAe,CAAC,CAAC;IACvBD,KAAK,CAACE,cAAc,CAAC,CAAC;EAC1B,CAAC;EAED,MAAMC,aAAa,GAAGT,OAAO,CAAC,MAAM;IAChC,IAAI,OAAOI,aAAa,KAAK,QAAQ,iBAAIL,cAAc,CAACK,aAAa,CAAC,EAAE;MACpE,OAAOA,aAAa;IACxB;IAEA,IAAI,OAAOA,aAAa,KAAK,QAAQ,IAAIA,aAAa,IAAI,QAAQ,IAAIA,aAAa,EAAE;MACjF,OAAQA,aAAa,CAAsCM,MAAM;IACrE;IAEA,OAAOC,SAAS;EACpB,CAAC,EAAE,CAACP,aAAa,CAAC,CAAC;EAEnB,MAAMQ,8BAA8B,GAAGZ,OAAO,CAAC,MAAM;IACjD,IAAIS,aAAa,EAAE;MACf,OAAOP,oBAAoB,CAACO,aAAa,CAAC;IAC9C;IAEA,OAAO,KAAK;EAChB,CAAC,EAAE,CAACA,aAAa,CAAC,CAAC;EAEnB,IAAI,CAACA,aAAa,EAAE;IAChB,OAAO,IAAI;EACf;EAEA,oBACIX,KAAA,CAAAe,aAAA,CAACZ,0BAA0B;IACvBa,OAAO,EAAEF,8BAA8B,GAAGP,kBAAkB,GAAGM;EAAU,GAExEF,aACuB,CAAC;AAErC,CAAC;AAEDN,oBAAoB,CAACY,WAAW,GAAG,sBAAsB;AAEzD,eAAeZ,oBAAoB","ignoreList":[]}

package/lib/esm/components/list/list-item/list-item-head/list-item-subtitle/ListItemSubtitle.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useRef } from 'react';
+import React, { useMemo } from 'react';
 import { StyledListItemHeadSubtitleText, StyledListItemSubtitle, StyledListItemBottomRightElement } from './ListItemSubtitle.styles';
 import { getElementClickEvent } from '../../../../../utils/accordion';
 const ListItemSubtitle = ({
@@ -6,7 +6,6 @@ const ListItemSubtitle = ({
   subtitle,
   isOpen
 }) => {
-  const bottomElementRef = useRef(null);
   const handlePreventClick = event => {
     event.stopPropagation();
     event.preventDefault();
@@ -26,8 +25,6 @@ const ListItemSubtitle = ({
   return /*#__PURE__*/React.createElement(StyledListItemSubtitle, null, /*#__PURE__*/React.createElement(StyledListItemHeadSubtitleText, {
     $isOpen: isOpen
   }, subtitle), bottomElement && /*#__PURE__*/React.createElement(StyledListItemBottomRightElement, {
-    "data-right-element": "true",
-    ref: bottomElementRef,
     onClick: shouldPreventRightElementClick ? handlePreventClick : undefined
   }, bottomElement));
 };

package/lib/esm/components/list/list-item/list-item-head/list-item-subtitle/ListItemSubtitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemSubtitle.js","names":["React","useMemo","useRef","StyledListItemHeadSubtitleText","StyledListItemSubtitle","StyledListItemBottomRightElement","getElementClickEvent","ListItemSubtitle","rightElements","subtitle","isOpen","bottomElementRef","handlePreventClick","event","stopPropagation","preventDefault","bottomElement","bottom","undefined","shouldPreventRightElementClick","createElement","$isOpen","ref","onClick","displayName"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-subtitle/ListItemSubtitle.tsx"],"sourcesContent":["import React, { FC, ReactNode, useMemo, useRef } from 'react';\nimport type { IListItemRightElement, IListItemRightElements } from '../../../../../types/list';\nimport {\n    StyledListItemHeadSubtitleText,\n    StyledListItemSubtitle,\n    StyledListItemBottomRightElement,\n} from './ListItemSubtitle.styles';\nimport { getElementClickEvent } from '../../../../../utils/accordion';\n\ntype ListItemSubtitleProps = {\n    rightElements?: IListItemRightElements;\n    subtitle?: ReactNode;\n    isOpen: boolean;\n};\n\nconst ListItemSubtitle: FC<ListItemSubtitleProps> = ({ rightElements, subtitle, isOpen }) => {\n    const bottomElementRef = useRef<HTMLDivElement>(null);\n\n    const handlePreventClick = (event: React.MouseEvent) => {\n        event.stopPropagation();\n        event.preventDefault();\n    };\n\n    const bottomElement = useMemo(() => {\n        if (typeof rightElements === 'object' && rightElements && 'bottom' in rightElements) {\n            return (rightElements as unknown as IListItemRightElement).bottom;\n        }\n\n        return undefined;\n    }, [rightElements]);\n\n    const shouldPreventRightElementClick = useMemo(() => {\n        if (bottomElement) {\n            return getElementClickEvent(bottomElement);\n        }\n\n        return false;\n    }, [bottomElement]);\n\n    return (\n        <StyledListItemSubtitle>\n            <StyledListItemHeadSubtitleText $isOpen={isOpen}>\n                {subtitle}\n            </StyledListItemHeadSubtitleText>\n            {bottomElement && (\n                <StyledListItemBottomRightElement\n                    data-right-element=\"true\"\n                    ref={bottomElementRef}\n                    onClick={shouldPreventRightElementClick ? handlePreventClick : undefined}\n                >\n                    {bottomElement}\n                </StyledListItemBottomRightElement>\n            )}\n        </StyledListItemSubtitle>\n    );\n};\n\nListItemSubtitle.displayName = 'ListItemSubtitle';\n\nexport default ListItemSubtitle;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAmBC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AAE7D,SACIC,8BAA8B,EAC9BC,sBAAsB,EACtBC,gCAAgC,QAC7B,2BAA2B;AAClC,SAASC,oBAAoB,QAAQ,gCAAgC;AAQrE,MAAMC,gBAA2C,GAAGA,CAAC;EAAEC,aAAa;EAAEC,QAAQ;EAAEC;AAAO,CAAC,KAAK;EACzF,MAAMC,gBAAgB,GAAGT,MAAM,CAAiB,IAAI,CAAC;EAErD,MAAMU,kBAAkB,GAAIC,KAAuB,IAAK;IACpDA,KAAK,CAACC,eAAe,CAAC,CAAC;IACvBD,KAAK,CAACE,cAAc,CAAC,CAAC;EAC1B,CAAC;EAED,MAAMC,aAAa,GAAGf,OAAO,CAAC,MAAM;IAChC,IAAI,OAAOO,aAAa,KAAK,QAAQ,IAAIA,aAAa,IAAI,QAAQ,IAAIA,aAAa,EAAE;MACjF,OAAQA,aAAa,CAAsCS,MAAM;IACrE;IAEA,OAAOC,SAAS;EACpB,CAAC,EAAE,CAACV,aAAa,CAAC,CAAC;EAEnB,MAAMW,8BAA8B,GAAGlB,OAAO,CAAC,MAAM;IACjD,IAAIe,aAAa,EAAE;MACf,OAAOV,oBAAoB,CAACU,aAAa,CAAC;IAC9C;IAEA,OAAO,KAAK;EAChB,CAAC,EAAE,CAACA,aAAa,CAAC,CAAC;EAEnB,oBACIhB,KAAA,CAAAoB,aAAA,CAAChB,sBAAsB,qBACnBJ,KAAA,CAAAoB,aAAA,CAACjB,8BAA8B;IAACkB,OAAO,EAAEX;EAAO,GAC3CD,QAC2B,CAAC,EAChCO,aAAa,iBACVhB,KAAA,CAAAoB,aAAA,CAACf,gCAAgC;IAC7B,sBAAmB,MAAM;IACzBiB,GAAG,EAAEX,gBAAiB;IACtBY,OAAO,EAAEJ,8BAA8B,GAAGP,kBAAkB,GAAGM;EAAU,GAExEF,aAC6B,CAElB,CAAC;AAEjC,CAAC;AAEDT,gBAAgB,CAACiB,WAAW,GAAG,kBAAkB;AAEjD,eAAejB,gBAAgB","ignoreList":[]}
+{"version":3,"file":"ListItemSubtitle.js","names":["React","useMemo","StyledListItemHeadSubtitleText","StyledListItemSubtitle","StyledListItemBottomRightElement","getElementClickEvent","ListItemSubtitle","rightElements","subtitle","isOpen","handlePreventClick","event","stopPropagation","preventDefault","bottomElement","bottom","undefined","shouldPreventRightElementClick","createElement","$isOpen","onClick","displayName"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-subtitle/ListItemSubtitle.tsx"],"sourcesContent":["import React, { FC, ReactNode, useMemo } from 'react';\nimport type { IListItemRightElement, IListItemRightElements } from '../../../../../types/list';\nimport {\n    StyledListItemHeadSubtitleText,\n    StyledListItemSubtitle,\n    StyledListItemBottomRightElement,\n} from './ListItemSubtitle.styles';\nimport { getElementClickEvent } from '../../../../../utils/accordion';\n\ntype ListItemSubtitleProps = {\n    rightElements?: IListItemRightElements;\n    subtitle?: ReactNode;\n    isOpen: boolean;\n};\n\nconst ListItemSubtitle: FC<ListItemSubtitleProps> = ({ rightElements, subtitle, isOpen }) => {\n    const handlePreventClick = (event: React.MouseEvent) => {\n        event.stopPropagation();\n        event.preventDefault();\n    };\n\n    const bottomElement = useMemo(() => {\n        if (typeof rightElements === 'object' && rightElements && 'bottom' in rightElements) {\n            return (rightElements as unknown as IListItemRightElement).bottom;\n        }\n\n        return undefined;\n    }, [rightElements]);\n\n    const shouldPreventRightElementClick = useMemo(() => {\n        if (bottomElement) {\n            return getElementClickEvent(bottomElement);\n        }\n\n        return false;\n    }, [bottomElement]);\n\n    return (\n        <StyledListItemSubtitle>\n            <StyledListItemHeadSubtitleText $isOpen={isOpen}>\n                {subtitle}\n            </StyledListItemHeadSubtitleText>\n            {bottomElement && (\n                <StyledListItemBottomRightElement\n                    onClick={shouldPreventRightElementClick ? handlePreventClick : undefined}\n                >\n                    {bottomElement}\n                </StyledListItemBottomRightElement>\n            )}\n        </StyledListItemSubtitle>\n    );\n};\n\nListItemSubtitle.displayName = 'ListItemSubtitle';\n\nexport default ListItemSubtitle;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAmBC,OAAO,QAAQ,OAAO;AAErD,SACIC,8BAA8B,EAC9BC,sBAAsB,EACtBC,gCAAgC,QAC7B,2BAA2B;AAClC,SAASC,oBAAoB,QAAQ,gCAAgC;AAQrE,MAAMC,gBAA2C,GAAGA,CAAC;EAAEC,aAAa;EAAEC,QAAQ;EAAEC;AAAO,CAAC,KAAK;EACzF,MAAMC,kBAAkB,GAAIC,KAAuB,IAAK;IACpDA,KAAK,CAACC,eAAe,CAAC,CAAC;IACvBD,KAAK,CAACE,cAAc,CAAC,CAAC;EAC1B,CAAC;EAED,MAAMC,aAAa,GAAGb,OAAO,CAAC,MAAM;IAChC,IAAI,OAAOM,aAAa,KAAK,QAAQ,IAAIA,aAAa,IAAI,QAAQ,IAAIA,aAAa,EAAE;MACjF,OAAQA,aAAa,CAAsCQ,MAAM;IACrE;IAEA,OAAOC,SAAS;EACpB,CAAC,EAAE,CAACT,aAAa,CAAC,CAAC;EAEnB,MAAMU,8BAA8B,GAAGhB,OAAO,CAAC,MAAM;IACjD,IAAIa,aAAa,EAAE;MACf,OAAOT,oBAAoB,CAACS,aAAa,CAAC;IAC9C;IAEA,OAAO,KAAK;EAChB,CAAC,EAAE,CAACA,aAAa,CAAC,CAAC;EAEnB,oBACId,KAAA,CAAAkB,aAAA,CAACf,sBAAsB,qBACnBH,KAAA,CAAAkB,aAAA,CAAChB,8BAA8B;IAACiB,OAAO,EAAEV;EAAO,GAC3CD,QAC2B,CAAC,EAChCM,aAAa,iBACVd,KAAA,CAAAkB,aAAA,CAACd,gCAAgC;IAC7BgB,OAAO,EAAEH,8BAA8B,GAAGP,kBAAkB,GAAGM;EAAU,GAExEF,aAC6B,CAElB,CAAC;AAEjC,CAAC;AAEDR,gBAAgB,CAACe,WAAW,GAAG,kBAAkB;AAEjD,eAAef,gBAAgB","ignoreList":[]}

package/lib/esm/components/list/list-item/list-item-head/list-item-title/ListItemTitle.js

@@ -61,7 +61,6 @@ const ListItemTitle = ({
   }, title), /*#__PURE__*/React.createElement(StyledListItemHeadTitleElement, {
     ref: elementWrapperRef
   }, titleElement)), topElement && /*#__PURE__*/React.createElement(StyledListItemTopRightElement, {
-    "data-right-element": "true",
     ref: topElementWrapperRef,
     onClick: shouldPreventRightElementClick ? handlePreventClick : undefined
   }, topElement));

package/lib/esm/components/list/list-item/list-item-head/list-item-title/ListItemTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemTitle.js","names":["React","useEffect","useMemo","useRef","StyledListItemHeadTitleElement","StyledListItemHeadTitleText","StyledListItemTitle","StyledListItemTitleLeftWrapper","StyledListItemTopRightElement","getElementClickEvent","ListItemTitle","rightElements","titleElement","title","shouldShowMultilineTitle","isOpen","onResize","onTitleWidthChange","titleWrapperRef","wrapperRef","elementWrapperRef","topElementWrapperRef","element","current","undefined","resizeObserver","ResizeObserver","observe","disconnect","fullWidth","clientWidth","rightElementWidth","topElementWidth","width","handlePreventClick","event","stopPropagation","preventDefault","topElement","top","shouldPreventRightElementClick","createElement","ref","$isEllipsis","$shouldShowMultilineTitle","onClick","displayName"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-title/ListItemTitle.tsx"],"sourcesContent":["import React, { FC, ReactNode, useEffect, useMemo, useRef } from 'react';\nimport type { IListItemRightElement, IListItemRightElements } from '../../../../../types/list';\nimport {\n    StyledListItemHeadTitleElement,\n    StyledListItemHeadTitleText,\n    StyledListItemTitle,\n    StyledListItemTitleLeftWrapper,\n    StyledListItemTopRightElement,\n} from './ListItemTitle.styles';\nimport { getElementClickEvent } from '../../../../../utils/accordion';\n\ntype ListItemTitleProps = {\n    rightElements?: IListItemRightElements;\n    title: ReactNode;\n    titleElement?: ReactNode;\n    shouldShowMultilineTitle: boolean;\n    isOpen: boolean;\n    onResize?: (entries: ResizeObserverEntry[]) => void;\n    onTitleWidthChange: (width: number) => void;\n};\n\nconst ListItemTitle: FC<ListItemTitleProps> = ({\n    rightElements,\n    titleElement,\n    title,\n    shouldShowMultilineTitle,\n    isOpen,\n    onResize,\n    onTitleWidthChange,\n}) => {\n    const titleWrapperRef = useRef<HTMLDivElement>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const elementWrapperRef = useRef<HTMLDivElement>(null);\n    const topElementWrapperRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n        const element = titleWrapperRef?.current;\n        if (!element || typeof onResize !== 'function') return undefined;\n\n        const resizeObserver = new ResizeObserver(onResize);\n        resizeObserver.observe(element);\n\n        return () => resizeObserver.disconnect();\n    }, [onResize]);\n\n    useEffect(() => {\n        if (wrapperRef.current && elementWrapperRef.current) {\n            const fullWidth = wrapperRef.current.clientWidth;\n            const rightElementWidth = elementWrapperRef.current.clientWidth;\n            const topElementWidth = topElementWrapperRef.current?.clientWidth;\n\n            let width = fullWidth;\n\n            if (rightElementWidth > 0) {\n                width -= rightElementWidth + 8;\n            }\n\n            if (topElementWidth) {\n                width -= topElementWidth + 12;\n            }\n\n            onTitleWidthChange(width);\n        }\n    }, [onTitleWidthChange]);\n\n    const handlePreventClick = (event: React.MouseEvent) => {\n        event.stopPropagation();\n        event.preventDefault();\n    };\n\n    const topElement = useMemo(() => {\n        if (typeof rightElements === 'object' && rightElements && 'top' in rightElements) {\n            return (rightElements as unknown as IListItemRightElement).top;\n        }\n\n        return undefined;\n    }, [rightElements]);\n\n    const shouldPreventRightElementClick = useMemo(() => {\n        if (topElement) {\n            return getElementClickEvent(topElement);\n        }\n\n        return false;\n    }, [topElement]);\n\n    return (\n        <StyledListItemTitle ref={wrapperRef}>\n            <StyledListItemTitleLeftWrapper>\n                <StyledListItemHeadTitleText\n                    $isEllipsis={!isOpen}\n                    ref={titleWrapperRef}\n                    $shouldShowMultilineTitle={shouldShowMultilineTitle}\n                >\n                    {title}\n                </StyledListItemHeadTitleText>\n                <StyledListItemHeadTitleElement ref={elementWrapperRef}>\n                    {titleElement}\n                </StyledListItemHeadTitleElement>\n            </StyledListItemTitleLeftWrapper>\n            {topElement && (\n                <StyledListItemTopRightElement\n                    data-right-element=\"true\"\n                    ref={topElementWrapperRef}\n                    onClick={shouldPreventRightElementClick ? handlePreventClick : undefined}\n                >\n                    {topElement}\n                </StyledListItemTopRightElement>\n            )}\n        </StyledListItemTitle>\n    );\n};\n\nListItemTitle.displayName = 'ListItemTitle';\n\nexport default ListItemTitle;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ListItemTitle.js","names":["React","useEffect","useMemo","useRef","StyledListItemHeadTitleElement","StyledListItemHeadTitleText","StyledListItemTitle","StyledListItemTitleLeftWrapper","StyledListItemTopRightElement","getElementClickEvent","ListItemTitle","rightElements","titleElement","title","shouldShowMultilineTitle","isOpen","onResize","onTitleWidthChange","titleWrapperRef","wrapperRef","elementWrapperRef","topElementWrapperRef","element","current","undefined","resizeObserver","ResizeObserver","observe","disconnect","fullWidth","clientWidth","rightElementWidth","topElementWidth","width","handlePreventClick","event","stopPropagation","preventDefault","topElement","top","shouldPreventRightElementClick","createElement","ref","$isEllipsis","$shouldShowMultilineTitle","onClick","displayName"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-title/ListItemTitle.tsx"],"sourcesContent":["import React, { FC, ReactNode, useEffect, useMemo, useRef } from 'react';\nimport type { IListItemRightElement, IListItemRightElements } from '../../../../../types/list';\nimport {\n    StyledListItemHeadTitleElement,\n    StyledListItemHeadTitleText,\n    StyledListItemTitle,\n    StyledListItemTitleLeftWrapper,\n    StyledListItemTopRightElement,\n} from './ListItemTitle.styles';\nimport { getElementClickEvent } from '../../../../../utils/accordion';\n\ntype ListItemTitleProps = {\n    rightElements?: IListItemRightElements;\n    title: ReactNode;\n    titleElement?: ReactNode;\n    shouldShowMultilineTitle: boolean;\n    isOpen: boolean;\n    onResize?: (entries: ResizeObserverEntry[]) => void;\n    onTitleWidthChange: (width: number) => void;\n};\n\nconst ListItemTitle: FC<ListItemTitleProps> = ({\n    rightElements,\n    titleElement,\n    title,\n    shouldShowMultilineTitle,\n    isOpen,\n    onResize,\n    onTitleWidthChange,\n}) => {\n    const titleWrapperRef = useRef<HTMLDivElement>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const elementWrapperRef = useRef<HTMLDivElement>(null);\n    const topElementWrapperRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n        const element = titleWrapperRef?.current;\n        if (!element || typeof onResize !== 'function') return undefined;\n\n        const resizeObserver = new ResizeObserver(onResize);\n        resizeObserver.observe(element);\n\n        return () => resizeObserver.disconnect();\n    }, [onResize]);\n\n    useEffect(() => {\n        if (wrapperRef.current && elementWrapperRef.current) {\n            const fullWidth = wrapperRef.current.clientWidth;\n            const rightElementWidth = elementWrapperRef.current.clientWidth;\n            const topElementWidth = topElementWrapperRef.current?.clientWidth;\n\n            let width = fullWidth;\n\n            if (rightElementWidth > 0) {\n                width -= rightElementWidth + 8;\n            }\n\n            if (topElementWidth) {\n                width -= topElementWidth + 12;\n            }\n\n            onTitleWidthChange(width);\n        }\n    }, [onTitleWidthChange]);\n\n    const handlePreventClick = (event: React.MouseEvent) => {\n        event.stopPropagation();\n        event.preventDefault();\n    };\n\n    const topElement = useMemo(() => {\n        if (typeof rightElements === 'object' && rightElements && 'top' in rightElements) {\n            return (rightElements as unknown as IListItemRightElement).top;\n        }\n\n        return undefined;\n    }, [rightElements]);\n\n    const shouldPreventRightElementClick = useMemo(() => {\n        if (topElement) {\n            return getElementClickEvent(topElement);\n        }\n\n        return false;\n    }, [topElement]);\n\n    return (\n        <StyledListItemTitle ref={wrapperRef}>\n            <StyledListItemTitleLeftWrapper>\n                <StyledListItemHeadTitleText\n                    $isEllipsis={!isOpen}\n                    ref={titleWrapperRef}\n                    $shouldShowMultilineTitle={shouldShowMultilineTitle}\n                >\n                    {title}\n                </StyledListItemHeadTitleText>\n                <StyledListItemHeadTitleElement ref={elementWrapperRef}>\n                    {titleElement}\n                </StyledListItemHeadTitleElement>\n            </StyledListItemTitleLeftWrapper>\n            {topElement && (\n                <StyledListItemTopRightElement\n                    ref={topElementWrapperRef}\n                    onClick={shouldPreventRightElementClick ? handlePreventClick : undefined}\n                >\n                    {topElement}\n                </StyledListItemTopRightElement>\n            )}\n        </StyledListItemTitle>\n    );\n};\n\nListItemTitle.displayName = 'ListItemTitle';\n\nexport default ListItemTitle;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/mention-finder/MentionFinder.js

@@ -5,13 +5,6 @@ import { MentionFinderPopupAlignment } from '../../constants/mentionFinder';
 import MentionFinderItem from './mention-finder-item/MentionFinderItem';
 import { StyledMentionFinder, StyledMentionFinderDragHandle, StyledMentionFinderDragHandleInner, StyledMentionFinderItemList, StyledMentionFinderOverlay, StyledMotionMentionFinderPopup } from './MentionFinder.styles';
 const DRAG_CLOSE_THRESHOLD_IN_PX = 60;
-const isTextInputElement = element => {
-  if (!element) {
-    return false;
-  }
-  const tagName = element.tagName.toLowerCase();
-  return tagName === 'input' && element.type !== 'button' || tagName === 'textarea' || element.isContentEditable;
-};
 const findTouchByIdentifier = (touchList, identifier) => {
   if (identifier === null) {
     return null;
@@ -38,7 +31,6 @@ const MentionFinder = ({
   const [shouldShowPopup, setShouldShowPopup] = useState(true);
   const popupRef = useRef(null);
   const listRef = useRef(null);
-  const inputElementRef = useRef(null);
   const dragStartYRef = useRef(null);
   const hasTriggeredDragCloseRef = useRef(false);
   const activePointerIdRef = useRef(null);
@@ -57,19 +49,7 @@ const MentionFinder = ({
     info,
     name
   }) => id.toLowerCase().includes(searchString) || info?.replace('chayns', '').toLowerCase().includes(searchString) || name.toLowerCase().includes(searchString)) : members, [members, searchString]);
-  const shouldRenderPopup = shouldShowPopup && !!fullMatch && filteredMembers.length > 0;
-  const handleContainerBlur = useCallback(event => {
-    const nextFocusedElement = event.relatedTarget;
-    const currentContainer = event.currentTarget;
-    if (!nextFocusedElement || !currentContainer.contains(nextFocusedElement) && !popupRef.current?.contains(nextFocusedElement)) {
-      setShouldShowPopup(false);
-    }
-  }, []);
   const handleKeyDown = useCallback(event => {
-    const targetElement = event.target;
-    if (isTextInputElement(targetElement)) {
-      inputElementRef.current = targetElement;
-    }
     if ((event.key === 'ArrowUp' || event.key === 'ArrowDown') && shouldRenderPopup) {
       event.preventDefault();
       const children = listRef.current?.children;
@@ -95,15 +75,8 @@ const MentionFinder = ({
           member: activeMember
         });
       }
-    } else if (event.key === 'Escape' && shouldRenderPopup) {
-      event.preventDefault();
-      event.stopPropagation();
-      setShouldShowPopup(false);
-      window.requestAnimationFrame(() => {
-        inputElementRef.current?.focus();
-      });
     }
-  }, [activeMember, filteredMembers, focusedIndex, fullMatch, onSelect, shouldRenderPopup]);
+  }, [activeMember, filteredMembers, focusedIndex, fullMatch, onSelect]);
   const handleMemberClick = useCallback(member => {
     if (fullMatch) {
       onSelect({
@@ -138,15 +111,6 @@ const MentionFinder = ({
     hasTriggeredDragCloseRef.current = false;
     setShouldShowPopup(true);
   }, [inputValue]);
-  useEffect(() => {
-    if (!shouldRenderPopup) {
-      return;
-    }
-    const activeElement = document.activeElement;
-    if (isTextInputElement(activeElement)) {
-      inputElementRef.current = activeElement;
-    }
-  }, [shouldRenderPopup]);
   useEffect(() => {
     if (shouldShowPopup) {
       window.addEventListener('keydown', handleKeyDown, true);
@@ -317,6 +281,7 @@ const MentionFinder = ({
       onTouchCancel: handleDragTouchCancel
     }));
   }, [enableDragHandle, popupAlignment, dragOffset, dragProgress, isDraggingHandle, handleDragPointerDown, handleDragPointerMove, handleDragPointerUp, handleDragPointerCancel, handleDragTouchStart, handleDragTouchMove, handleDragTouchEnd, handleDragTouchCancel]);
+  const shouldRenderPopup = shouldShowPopup && fullMatch && items.length > 0;
   useEffect(() => {
     if (!enableDragHandle || !shouldRenderPopup) {
       setOverlayContainer(null);
@@ -347,8 +312,7 @@ const MentionFinder = ({
     onClick: handleOverlayClick
   })), overlayContainer) : null;
   return /*#__PURE__*/React.createElement(React.Fragment, null, overlayPortal, /*#__PURE__*/React.createElement(StyledMentionFinder, {
-    className: "beta-chayns-mention-finder",
-    onBlur: handleContainerBlur
+    className: "beta-chayns-mention-finder"
   }, /*#__PURE__*/React.createElement(AnimatePresence, {
     initial: false
   }, shouldRenderPopup && /*#__PURE__*/React.createElement(StyledMotionMentionFinderPopup, {