@chayns-components/core 5.0.0-beta.835 → 5.0.0-beta.840

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

@@ -47,7 +47,7 @@ const ListItemHead = ({
   const openedTitle = (0, _useElementSize.useElementSize)(pseudoTitleOpenRef);
   const closedSubtitle = (0, _useElementSize.useElementSize)(pseudoSubtitleClosedRef);
   const openedSubtitle = (0, _useElementSize.useElementSize)(pseudoSubtitleOpenRef);
-  const shouldShowSubtitleRow = typeof subtitle === 'string';
+  const shouldShowSubtitleRow = subtitle || typeof subtitle === 'string';
   (0, _react.useEffect)(() => {
     if (closedTitle && openedTitle) {
       setHeadHeight({

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

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

package/lib/cjs/components/scroll-view/ScrollView.js

@@ -9,18 +9,29 @@ var _react = _interopRequireWildcard(require("react"));
 var _ScrollView = require("./ScrollView.styles");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const ScrollView = ({
-  maxHeight = '300px',
-  children
-}) => {
+const ScrollView = /*#__PURE__*/(0, _react.forwardRef)(({
+  maxHeight = 300,
+  height,
+  maxWidth,
+  width,
+  children,
+  overflowX = 'auto',
+  overflowY = 'auto'
+}, ref) => {
   const {
     browser
   } = (0, _chaynsApi.getDevice)();
   return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_ScrollView.StyledScrollView, {
     $browser: browser === null || browser === void 0 ? void 0 : browser.name,
-    $maxHeight: maxHeight
-  }, children), [browser === null || browser === void 0 ? void 0 : browser.name, children, maxHeight]);
-};
+    $maxHeight: maxHeight,
+    $height: height,
+    $maxWidth: maxWidth,
+    $width: width,
+    $overflowX: overflowX,
+    $overflowY: overflowY,
+    ref: ref
+  }, children), [browser === null || browser === void 0 ? void 0 : browser.name, children, height, maxHeight, maxWidth, overflowX, overflowY, ref, width]);
+});
 ScrollView.displayName = 'ScrollView';
 var _default = exports.default = ScrollView;
 //# sourceMappingURL=ScrollView.js.map

package/lib/cjs/components/scroll-view/ScrollView.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollView.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_ScrollView","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ScrollView","maxHeight","children","browser","getDevice","useMemo","createElement","StyledScrollView","$browser","name","$maxHeight","displayName","_default","exports"],"sources":["../../../../src/components/scroll-view/ScrollView.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, { CSSProperties, FC, ReactNode, useMemo } from 'react';\nimport { StyledScrollView } from './ScrollView.styles';\n\nexport type ScrollViewProps = {\n    /**\n     * The elements that should be shown inside the scrollview\n     */\n    children: ReactNode;\n    /**\n     * The maximum height of the scroll view.\n     */\n    maxHeight: CSSProperties['height'];\n};\n\nconst ScrollView: FC<ScrollViewProps> = ({ maxHeight = '300px', children }) => {\n    const { browser } = getDevice();\n\n    return useMemo(\n        () => (\n            <StyledScrollView $browser={browser?.name} $maxHeight={maxHeight}>\n                {children}\n            </StyledScrollView>\n        ),\n        [browser?.name, children, maxHeight],\n    );\n};\n\nScrollView.displayName = 'ScrollView';\n\nexport default ScrollView;\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,WAAA,GAAAH,OAAA;AAAuD,SAAAI,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAavD,MAAMW,UAA+B,GAAGA,CAAC;EAAEC,SAAS,GAAG,OAAO;EAAEC;AAAS,CAAC,KAAK;EAC3E,MAAM;IAAEC;EAAQ,CAAC,GAAG,IAAAC,oBAAS,EAAC,CAAC;EAE/B,OAAO,IAAAC,cAAO,EACV,mBACI5B,MAAA,CAAAS,OAAA,CAAAoB,aAAA,CAAC3B,WAAA,CAAA4B,gBAAgB;IAACC,QAAQ,EAAEL,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEM,IAAK;IAACC,UAAU,EAAET;EAAU,GAC5DC,QACa,CACrB,EACD,CAACC,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEM,IAAI,EAAEP,QAAQ,EAAED,SAAS,CACvC,CAAC;AACL,CAAC;AAEDD,UAAU,CAACW,WAAW,GAAG,YAAY;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA3B,OAAA,GAEvBc,UAAU","ignoreList":[]}
+{"version":3,"file":"ScrollView.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_ScrollView","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ScrollView","forwardRef","maxHeight","height","maxWidth","width","children","overflowX","overflowY","ref","browser","getDevice","useMemo","createElement","StyledScrollView","$browser","name","$maxHeight","$height","$maxWidth","$width","$overflowX","$overflowY","displayName","_default","exports"],"sources":["../../../../src/components/scroll-view/ScrollView.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, { CSSProperties, forwardRef, ReactNode, useMemo } from 'react';\nimport { StyledScrollView } from './ScrollView.styles';\n\nexport type ScrollViewProps = {\n    /**\n     * The elements that should be shown inside the scrollview\n     */\n    children: ReactNode;\n    /**\n     * The maximum height of the scroll view.\n     */\n    maxHeight?: CSSProperties['height'];\n    /**\n     * The height of the scroll view.\n     */\n    height?: CSSProperties['height'];\n    /**\n     * The maximum width of the scroll view.\n     */\n    maxWidth?: CSSProperties['width'];\n    /**\n     * The width of the scroll view.\n     */\n    width?: CSSProperties['width'];\n    /**\n     * The overflow-x style of the scroll view.\n     */\n    overflowX?: 'scroll' | 'auto';\n    /**\n     * The overflow-y style of the scroll view.\n     */\n    overflowY?: 'scroll' | 'auto';\n};\n\nconst ScrollView = forwardRef<HTMLDivElement, ScrollViewProps>(\n    ({ maxHeight = 300, height, maxWidth, width, children, overflowX = 'auto', overflowY = 'auto' }, ref) => {\n        const { browser } = getDevice();\n\n        return useMemo(\n            () => (\n                <StyledScrollView\n                    $browser={browser?.name}\n                    $maxHeight={maxHeight}\n                    $height={height}\n                    $maxWidth={maxWidth}\n                    $width={width}\n                    $overflowX={overflowX}\n                    $overflowY={overflowY}\n                    ref={ref}\n                >\n                    {children}\n                </StyledScrollView>\n            ),\n            [browser?.name, children, height, maxHeight, maxWidth, overflowX, overflowY, ref, width],\n        );\n    },\n);\n\nScrollView.displayName = 'ScrollView';\n\nexport default ScrollView;\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,WAAA,GAAAH,OAAA;AAAuD,SAAAI,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAiCvD,MAAMW,UAAU,gBAAG,IAAAC,iBAAU,EACzB,CAAC;EAAEC,SAAS,GAAG,GAAG;EAAEC,MAAM;EAAEC,QAAQ;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,SAAS,GAAG,MAAM;EAAEC,SAAS,GAAG;AAAO,CAAC,EAAEC,GAAG,KAAK;EACrG,MAAM;IAAEC;EAAQ,CAAC,GAAG,IAAAC,oBAAS,EAAC,CAAC;EAE/B,OAAO,IAAAC,cAAO,EACV,mBACInC,MAAA,CAAAS,OAAA,CAAA2B,aAAA,CAAClC,WAAA,CAAAmC,gBAAgB;IACbC,QAAQ,EAAEL,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEM,IAAK;IACxBC,UAAU,EAAEf,SAAU;IACtBgB,OAAO,EAAEf,MAAO;IAChBgB,SAAS,EAAEf,QAAS;IACpBgB,MAAM,EAAEf,KAAM;IACdgB,UAAU,EAAEd,SAAU;IACtBe,UAAU,EAAEd,SAAU;IACtBC,GAAG,EAAEA;EAAI,GAERH,QACa,CACrB,EACD,CAACI,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEM,IAAI,EAAEV,QAAQ,EAAEH,MAAM,EAAED,SAAS,EAAEE,QAAQ,EAAEG,SAAS,EAAEC,SAAS,EAAEC,GAAG,EAAEJ,KAAK,CAC3F,CAAC;AACL,CACJ,CAAC;AAEDL,UAAU,CAACuB,WAAW,GAAG,YAAY;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAvC,OAAA,GAEvBc,UAAU","ignoreList":[]}

package/lib/cjs/components/scroll-view/ScrollView.styles.js

@@ -8,10 +8,32 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const StyledScrollView = exports.StyledScrollView = _styledComponents.default.div`
-    max-height: ${({
+    ${({
   $maxHeight
-}) => $maxHeight};
-    overflow-y: scroll;
+}) => $maxHeight && (0, _styledComponents.css)`
+            max-height: ${typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};
+        `}
+    ${({
+  $height
+}) => $height && (0, _styledComponents.css)`
+            height: ${typeof $height === 'number' ? `${$height}px` : $height};
+        `} 
+    ${({
+  $maxWidth
+}) => $maxWidth && (0, _styledComponents.css)`
+            max-width: ${typeof $maxWidth === 'number' ? `${$maxWidth}px` : $maxWidth};
+        `} 
+    ${({
+  $width
+}) => $width && (0, _styledComponents.css)`
+            width: ${typeof $width === 'number' ? `${$width}px` : $width};
+        `} 
+    ${({
+  $overflowX
+}) => (0, _styledComponents.css)`overflow-x: ${$overflowX};`}
+    ${({
+  $overflowY
+}) => (0, _styledComponents.css)`overflow-y: ${$overflowY};`}
 
     // Styles for custom scrollbar
     ${({
@@ -23,6 +45,7 @@ const StyledScrollView = exports.StyledScrollView = _styledComponents.default.di
               ` : (0, _styledComponents.css)`
                   &::-webkit-scrollbar {
                       width: 10px;
+                      height: 10px
                   }
 
                   &::-webkit-scrollbar-track {
@@ -32,6 +55,7 @@ const StyledScrollView = exports.StyledScrollView = _styledComponents.default.di
                   &::-webkit-scrollbar-button {
                       background-color: transparent;
                       height: 5px;
+                      width: 5px;
                   }
 
                   &::-webkit-scrollbar-thumb {
@@ -40,6 +64,10 @@ const StyledScrollView = exports.StyledScrollView = _styledComponents.default.di
                       background-clip: padding-box;
                       border: solid 3px transparent;
                   }
+            
+                  &::-webkit-scrollbar-corner {
+                      background-color: transparent;
+                  }
               `}
 `;
 //# sourceMappingURL=ScrollView.styles.js.map

package/lib/cjs/components/scroll-view/ScrollView.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollView.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledScrollView","exports","styled","div","$maxHeight","$browser","theme","css"],"sources":["../../../../src/components/scroll-view/ScrollView.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledScrollViewProps = WithTheme<{\n    $maxHeight: CSSProperties['height'];\n    $browser: Browser | 'bot' | null | undefined;\n}>;\n\nexport const StyledScrollView = styled.div<StyledScrollViewProps>`\n    max-height: ${({ $maxHeight }) => $maxHeight};\n    overflow-y: scroll;\n\n    // Styles for custom scrollbar\n    ${({ $browser, theme }: StyledScrollViewProps) =>\n        $browser === 'firefox'\n            ? css`\n                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n                  scrollbar-width: thin;\n              `\n            : css`\n                  &::-webkit-scrollbar {\n                      width: 10px;\n                  }\n\n                  &::-webkit-scrollbar-track {\n                      background-color: transparent;\n                  }\n\n                  &::-webkit-scrollbar-button {\n                      background-color: transparent;\n                      height: 5px;\n                  }\n\n                  &::-webkit-scrollbar-thumb {\n                      background-color: rgba(${theme['text-rgb']}, 0.15);\n                      border-radius: 20px;\n                      background-clip: padding-box;\n                      border: solid 3px transparent;\n                  }\n              `}\n`;\n"],"mappings":";;;;;;AAEA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAQzC,MAAMW,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAGE,yBAAM,CAACC,GAA0B;AACjE,kBAAkB,CAAC;EAAEC;AAAW,CAAC,KAAKA,UAAU;AAChD;AACA;AACA;AACA,MAAM,CAAC;EAAEC,QAAQ;EAAEC;AAA6B,CAAC,KACzCD,QAAQ,KAAK,SAAS,GAChB,IAAAE,qBAAG;AACjB,0CAA0CD,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACD,IAAAC,qBAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CD,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA;AACA;AACA,eAAe;AACf,CAAC","ignoreList":[]}
+{"version":3,"file":"ScrollView.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledScrollView","exports","styled","div","$maxHeight","css","$height","$maxWidth","$width","$overflowX","$overflowY","$browser","theme"],"sources":["../../../../src/components/scroll-view/ScrollView.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledScrollViewProps = WithTheme<{\n    $maxHeight?: CSSProperties['height'];\n    $height?: CSSProperties['height'];\n    $maxWidth?: CSSProperties['width'];\n    $width?: CSSProperties['width'];\n    $overflowX: 'scroll' | 'auto';\n    $overflowY: 'scroll' | 'auto';\n    $browser: Browser | 'bot' | null | undefined;\n}>;\n\nexport const StyledScrollView = styled.div<StyledScrollViewProps>`\n    ${({ $maxHeight }) =>\n        $maxHeight &&\n        css`\n            max-height: ${typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};\n        `}\n    ${({ $height }) =>\n        $height &&\n        css`\n            height: ${typeof $height === 'number' ? `${$height}px` : $height};\n        `} \n    ${({ $maxWidth }) =>\n        $maxWidth &&\n        css`\n            max-width: ${typeof $maxWidth === 'number' ? `${$maxWidth}px` : $maxWidth};\n        `} \n    ${({ $width }) =>\n        $width &&\n        css`\n            width: ${typeof $width === 'number' ? `${$width}px` : $width};\n        `} \n    ${({ $overflowX }) => css`overflow-x: ${$overflowX};`}\n    ${({ $overflowY }) => css`overflow-y: ${$overflowY};`}\n\n    // Styles for custom scrollbar\n    ${({ $browser, theme }: StyledScrollViewProps) =>\n        $browser === 'firefox'\n            ? css`\n                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n                  scrollbar-width: thin;\n              `\n            : css`\n                  &::-webkit-scrollbar {\n                      width: 10px;\n                      height: 10px\n                  }\n\n                  &::-webkit-scrollbar-track {\n                      background-color: transparent;\n                  }\n\n                  &::-webkit-scrollbar-button {\n                      background-color: transparent;\n                      height: 5px;\n                      width: 5px;\n                  }\n\n                  &::-webkit-scrollbar-thumb {\n                      background-color: rgba(${theme['text-rgb']}, 0.15);\n                      border-radius: 20px;\n                      background-clip: padding-box;\n                      border: solid 3px transparent;\n                  }\n            \n                  &::-webkit-scrollbar-corner {\n                      background-color: transparent;\n                  }\n              `}\n`;\n"],"mappings":"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","ignoreList":[]}

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

@@ -39,7 +39,7 @@ const ListItemHead = _ref => {
   const openedTitle = useElementSize(pseudoTitleOpenRef);
   const closedSubtitle = useElementSize(pseudoSubtitleClosedRef);
   const openedSubtitle = useElementSize(pseudoSubtitleOpenRef);
-  const shouldShowSubtitleRow = typeof subtitle === 'string';
+  const shouldShowSubtitleRow = subtitle || typeof subtitle === 'string';
   useEffect(() => {
     if (closedTitle && openedTitle) {
       setHeadHeight({

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

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

package/lib/esm/components/scroll-view/ScrollView.js

@@ -1,19 +1,30 @@
 import { getDevice } from 'chayns-api';
-import React, { useMemo } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 import { StyledScrollView } from './ScrollView.styles';
-const ScrollView = _ref => {
+const ScrollView = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
-    maxHeight = '300px',
-    children
+    maxHeight = 300,
+    height,
+    maxWidth,
+    width,
+    children,
+    overflowX = 'auto',
+    overflowY = 'auto'
   } = _ref;
   const {
     browser
   } = getDevice();
   return useMemo(() => /*#__PURE__*/React.createElement(StyledScrollView, {
     $browser: browser?.name,
-    $maxHeight: maxHeight
-  }, children), [browser?.name, children, maxHeight]);
-};
+    $maxHeight: maxHeight,
+    $height: height,
+    $maxWidth: maxWidth,
+    $width: width,
+    $overflowX: overflowX,
+    $overflowY: overflowY,
+    ref: ref
+  }, children), [browser?.name, children, height, maxHeight, maxWidth, overflowX, overflowY, ref, width]);
+});
 ScrollView.displayName = 'ScrollView';
 export default ScrollView;
 //# sourceMappingURL=ScrollView.js.map

package/lib/esm/components/scroll-view/ScrollView.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollView.js","names":["getDevice","React","useMemo","StyledScrollView","ScrollView","_ref","maxHeight","children","browser","createElement","$browser","name","$maxHeight","displayName"],"sources":["../../../../src/components/scroll-view/ScrollView.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, { CSSProperties, FC, ReactNode, useMemo } from 'react';\nimport { StyledScrollView } from './ScrollView.styles';\n\nexport type ScrollViewProps = {\n    /**\n     * The elements that should be shown inside the scrollview\n     */\n    children: ReactNode;\n    /**\n     * The maximum height of the scroll view.\n     */\n    maxHeight: CSSProperties['height'];\n};\n\nconst ScrollView: FC<ScrollViewProps> = ({ maxHeight = '300px', children }) => {\n    const { browser } = getDevice();\n\n    return useMemo(\n        () => (\n            <StyledScrollView $browser={browser?.name} $maxHeight={maxHeight}>\n                {children}\n            </StyledScrollView>\n        ),\n        [browser?.name, children, maxHeight],\n    );\n};\n\nScrollView.displayName = 'ScrollView';\n\nexport default ScrollView;\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,YAAY;AACtC,OAAOC,KAAK,IAAkCC,OAAO,QAAQ,OAAO;AACpE,SAASC,gBAAgB,QAAQ,qBAAqB;AAatD,MAAMC,UAA+B,GAAGC,IAAA,IAAuC;EAAA,IAAtC;IAAEC,SAAS,GAAG,OAAO;IAAEC;EAAS,CAAC,GAAAF,IAAA;EACtE,MAAM;IAAEG;EAAQ,CAAC,GAAGR,SAAS,CAAC,CAAC;EAE/B,OAAOE,OAAO,CACV,mBACID,KAAA,CAAAQ,aAAA,CAACN,gBAAgB;IAACO,QAAQ,EAAEF,OAAO,EAAEG,IAAK;IAACC,UAAU,EAAEN;EAAU,GAC5DC,QACa,CACrB,EACD,CAACC,OAAO,EAAEG,IAAI,EAAEJ,QAAQ,EAAED,SAAS,CACvC,CAAC;AACL,CAAC;AAEDF,UAAU,CAACS,WAAW,GAAG,YAAY;AAErC,eAAeT,UAAU","ignoreList":[]}
+{"version":3,"file":"ScrollView.js","names":["getDevice","React","forwardRef","useMemo","StyledScrollView","ScrollView","_ref","ref","maxHeight","height","maxWidth","width","children","overflowX","overflowY","browser","createElement","$browser","name","$maxHeight","$height","$maxWidth","$width","$overflowX","$overflowY","displayName"],"sources":["../../../../src/components/scroll-view/ScrollView.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, { CSSProperties, forwardRef, ReactNode, useMemo } from 'react';\nimport { StyledScrollView } from './ScrollView.styles';\n\nexport type ScrollViewProps = {\n    /**\n     * The elements that should be shown inside the scrollview\n     */\n    children: ReactNode;\n    /**\n     * The maximum height of the scroll view.\n     */\n    maxHeight?: CSSProperties['height'];\n    /**\n     * The height of the scroll view.\n     */\n    height?: CSSProperties['height'];\n    /**\n     * The maximum width of the scroll view.\n     */\n    maxWidth?: CSSProperties['width'];\n    /**\n     * The width of the scroll view.\n     */\n    width?: CSSProperties['width'];\n    /**\n     * The overflow-x style of the scroll view.\n     */\n    overflowX?: 'scroll' | 'auto';\n    /**\n     * The overflow-y style of the scroll view.\n     */\n    overflowY?: 'scroll' | 'auto';\n};\n\nconst ScrollView = forwardRef<HTMLDivElement, ScrollViewProps>(\n    ({ maxHeight = 300, height, maxWidth, width, children, overflowX = 'auto', overflowY = 'auto' }, ref) => {\n        const { browser } = getDevice();\n\n        return useMemo(\n            () => (\n                <StyledScrollView\n                    $browser={browser?.name}\n                    $maxHeight={maxHeight}\n                    $height={height}\n                    $maxWidth={maxWidth}\n                    $width={width}\n                    $overflowX={overflowX}\n                    $overflowY={overflowY}\n                    ref={ref}\n                >\n                    {children}\n                </StyledScrollView>\n            ),\n            [browser?.name, children, height, maxHeight, maxWidth, overflowX, overflowY, ref, width],\n        );\n    },\n);\n\nScrollView.displayName = 'ScrollView';\n\nexport default ScrollView;\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,YAAY;AACtC,OAAOC,KAAK,IAAmBC,UAAU,EAAaC,OAAO,QAAQ,OAAO;AAC5E,SAASC,gBAAgB,QAAQ,qBAAqB;AAiCtD,MAAMC,UAAU,gBAAGH,UAAU,CACzB,CAAAI,IAAA,EAAiGC,GAAG,KAAK;EAAA,IAAxG;IAAEC,SAAS,GAAG,GAAG;IAAEC,MAAM;IAAEC,QAAQ;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,SAAS,GAAG,MAAM;IAAEC,SAAS,GAAG;EAAO,CAAC,GAAAR,IAAA;EAC3F,MAAM;IAAES;EAAQ,CAAC,GAAGf,SAAS,CAAC,CAAC;EAE/B,OAAOG,OAAO,CACV,mBACIF,KAAA,CAAAe,aAAA,CAACZ,gBAAgB;IACba,QAAQ,EAAEF,OAAO,EAAEG,IAAK;IACxBC,UAAU,EAAEX,SAAU;IACtBY,OAAO,EAAEX,MAAO;IAChBY,SAAS,EAAEX,QAAS;IACpBY,MAAM,EAAEX,KAAM;IACdY,UAAU,EAAEV,SAAU;IACtBW,UAAU,EAAEV,SAAU;IACtBP,GAAG,EAAEA;EAAI,GAERK,QACa,CACrB,EACD,CAACG,OAAO,EAAEG,IAAI,EAAEN,QAAQ,EAAEH,MAAM,EAAED,SAAS,EAAEE,QAAQ,EAAEG,SAAS,EAAEC,SAAS,EAAEP,GAAG,EAAEI,KAAK,CAC3F,CAAC;AACL,CACJ,CAAC;AAEDN,UAAU,CAACoB,WAAW,GAAG,YAAY;AAErC,eAAepB,UAAU","ignoreList":[]}

package/lib/esm/components/scroll-view/ScrollView.styles.js

@@ -1,25 +1,63 @@
 import styled, { css } from 'styled-components';
 export const StyledScrollView = styled.div`
-    max-height: ${_ref => {
+    ${_ref => {
   let {
     $maxHeight
   } = _ref;
-  return $maxHeight;
-}};
-    overflow-y: scroll;
+  return $maxHeight && css`
+            max-height: ${typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};
+        `;
+}}
+    ${_ref2 => {
+  let {
+    $height
+  } = _ref2;
+  return $height && css`
+            height: ${typeof $height === 'number' ? `${$height}px` : $height};
+        `;
+}} 
+    ${_ref3 => {
+  let {
+    $maxWidth
+  } = _ref3;
+  return $maxWidth && css`
+            max-width: ${typeof $maxWidth === 'number' ? `${$maxWidth}px` : $maxWidth};
+        `;
+}} 
+    ${_ref4 => {
+  let {
+    $width
+  } = _ref4;
+  return $width && css`
+            width: ${typeof $width === 'number' ? `${$width}px` : $width};
+        `;
+}} 
+    ${_ref5 => {
+  let {
+    $overflowX
+  } = _ref5;
+  return css`overflow-x: ${$overflowX};`;
+}}
+    ${_ref6 => {
+  let {
+    $overflowY
+  } = _ref6;
+  return css`overflow-y: ${$overflowY};`;
+}}
 
     // Styles for custom scrollbar
-    ${_ref2 => {
+    ${_ref7 => {
   let {
     $browser,
     theme
-  } = _ref2;
+  } = _ref7;
   return $browser === 'firefox' ? css`
                   scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
                   scrollbar-width: thin;
               ` : css`
                   &::-webkit-scrollbar {
                       width: 10px;
+                      height: 10px
                   }
 
                   &::-webkit-scrollbar-track {
@@ -29,6 +67,7 @@ export const StyledScrollView = styled.div`
                   &::-webkit-scrollbar-button {
                       background-color: transparent;
                       height: 5px;
+                      width: 5px;
                   }
 
                   &::-webkit-scrollbar-thumb {
@@ -37,6 +76,10 @@ export const StyledScrollView = styled.div`
                       background-clip: padding-box;
                       border: solid 3px transparent;
                   }
+            
+                  &::-webkit-scrollbar-corner {
+                      background-color: transparent;
+                  }
               `;
 }}
 `;

package/lib/esm/components/scroll-view/ScrollView.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollView.styles.js","names":["styled","css","StyledScrollView","div","_ref","$maxHeight","_ref2","$browser","theme"],"sources":["../../../../src/components/scroll-view/ScrollView.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledScrollViewProps = WithTheme<{\n    $maxHeight: CSSProperties['height'];\n    $browser: Browser | 'bot' | null | undefined;\n}>;\n\nexport const StyledScrollView = styled.div<StyledScrollViewProps>`\n    max-height: ${({ $maxHeight }) => $maxHeight};\n    overflow-y: scroll;\n\n    // Styles for custom scrollbar\n    ${({ $browser, theme }: StyledScrollViewProps) =>\n        $browser === 'firefox'\n            ? css`\n                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n                  scrollbar-width: thin;\n              `\n            : css`\n                  &::-webkit-scrollbar {\n                      width: 10px;\n                  }\n\n                  &::-webkit-scrollbar-track {\n                      background-color: transparent;\n                  }\n\n                  &::-webkit-scrollbar-button {\n                      background-color: transparent;\n                      height: 5px;\n                  }\n\n                  &::-webkit-scrollbar-thumb {\n                      background-color: rgba(${theme['text-rgb']}, 0.15);\n                      border-radius: 20px;\n                      background-clip: padding-box;\n                      border: solid 3px transparent;\n                  }\n              `}\n`;\n"],"mappings":"AAEA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAQ/C,OAAO,MAAMC,gBAAgB,GAAGF,MAAM,CAACG,GAA0B;AACjE,kBAAkBC,IAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,IAAA;EAAA,OAAKC,UAAU;AAAA;AAChD;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEC;EAA6B,CAAC,GAAAF,KAAA;EAAA,OACzCC,QAAQ,KAAK,SAAS,GAChBN,GAAG;AACjB,0CAA0CO,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACDP,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CO,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA;AACA;AACA,eAAe;AAAA;AACf,CAAC","ignoreList":[]}
+{"version":3,"file":"ScrollView.styles.js","names":["styled","css","StyledScrollView","div","_ref","$maxHeight","_ref2","$height","_ref3","$maxWidth","_ref4","$width","_ref5","$overflowX","_ref6","$overflowY","_ref7","$browser","theme"],"sources":["../../../../src/components/scroll-view/ScrollView.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledScrollViewProps = WithTheme<{\n    $maxHeight?: CSSProperties['height'];\n    $height?: CSSProperties['height'];\n    $maxWidth?: CSSProperties['width'];\n    $width?: CSSProperties['width'];\n    $overflowX: 'scroll' | 'auto';\n    $overflowY: 'scroll' | 'auto';\n    $browser: Browser | 'bot' | null | undefined;\n}>;\n\nexport const StyledScrollView = styled.div<StyledScrollViewProps>`\n    ${({ $maxHeight }) =>\n        $maxHeight &&\n        css`\n            max-height: ${typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};\n        `}\n    ${({ $height }) =>\n        $height &&\n        css`\n            height: ${typeof $height === 'number' ? `${$height}px` : $height};\n        `} \n    ${({ $maxWidth }) =>\n        $maxWidth &&\n        css`\n            max-width: ${typeof $maxWidth === 'number' ? `${$maxWidth}px` : $maxWidth};\n        `} \n    ${({ $width }) =>\n        $width &&\n        css`\n            width: ${typeof $width === 'number' ? `${$width}px` : $width};\n        `} \n    ${({ $overflowX }) => css`overflow-x: ${$overflowX};`}\n    ${({ $overflowY }) => css`overflow-y: ${$overflowY};`}\n\n    // Styles for custom scrollbar\n    ${({ $browser, theme }: StyledScrollViewProps) =>\n        $browser === 'firefox'\n            ? css`\n                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n                  scrollbar-width: thin;\n              `\n            : css`\n                  &::-webkit-scrollbar {\n                      width: 10px;\n                      height: 10px\n                  }\n\n                  &::-webkit-scrollbar-track {\n                      background-color: transparent;\n                  }\n\n                  &::-webkit-scrollbar-button {\n                      background-color: transparent;\n                      height: 5px;\n                      width: 5px;\n                  }\n\n                  &::-webkit-scrollbar-thumb {\n                      background-color: rgba(${theme['text-rgb']}, 0.15);\n                      border-radius: 20px;\n                      background-clip: padding-box;\n                      border: solid 3px transparent;\n                  }\n            \n                  &::-webkit-scrollbar-corner {\n                      background-color: transparent;\n                  }\n              `}\n`;\n"],"mappings":"AAEA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAa/C,OAAO,MAAMC,gBAAgB,GAAGF,MAAM,CAACG,GAA0B;AACjE,MAAMC,IAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,IAAA;EAAA,OACbC,UAAU,IACVJ,GAAG;AACX,0BAA0B,OAAOI,UAAU,KAAK,QAAQ,GAAG,GAAGA,UAAU,IAAI,GAAGA,UAAU;AACzF,SAAS;AAAA;AACT,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAQ,CAAC,GAAAD,KAAA;EAAA,OACVC,OAAO,IACPN,GAAG;AACX,sBAAsB,OAAOM,OAAO,KAAK,QAAQ,GAAG,GAAGA,OAAO,IAAI,GAAGA,OAAO;AAC5E,SAAS;AAAA;AACT,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,KAAA;EAAA,OACZC,SAAS,IACTR,GAAG;AACX,yBAAyB,OAAOQ,SAAS,KAAK,QAAQ,GAAG,GAAGA,SAAS,IAAI,GAAGA,SAAS;AACrF,SAAS;AAAA;AACT,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OACTC,MAAM,IACNV,GAAG;AACX,qBAAqB,OAAOU,MAAM,KAAK,QAAQ,GAAG,GAAGA,MAAM,IAAI,GAAGA,MAAM;AACxE,SAAS;AAAA;AACT,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,KAAA;EAAA,OAAKX,GAAG,eAAeY,UAAU,GAAG;AAAA;AACzD,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,KAAA;EAAA,OAAKb,GAAG,eAAec,UAAU,GAAG;AAAA;AACzD;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEC;EAA6B,CAAC,GAAAF,KAAA;EAAA,OACzCC,QAAQ,KAAK,SAAS,GAChBhB,GAAG;AACjB,0CAA0CiB,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACDjB,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CiB,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe;AAAA;AACf,CAAC","ignoreList":[]}

package/lib/types/components/scroll-view/ScrollView.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, FC, ReactNode } from 'react';
+import React, { CSSProperties, ReactNode } from 'react';
 export type ScrollViewProps = {
     /**
      * The elements that should be shown inside the scrollview
@@ -7,7 +7,27 @@ export type ScrollViewProps = {
     /**
      * The maximum height of the scroll view.
      */
-    maxHeight: CSSProperties['height'];
+    maxHeight?: CSSProperties['height'];
+    /**
+     * The height of the scroll view.
+     */
+    height?: CSSProperties['height'];
+    /**
+     * The maximum width of the scroll view.
+     */
+    maxWidth?: CSSProperties['width'];
+    /**
+     * The width of the scroll view.
+     */
+    width?: CSSProperties['width'];
+    /**
+     * The overflow-x style of the scroll view.
+     */
+    overflowX?: 'scroll' | 'auto';
+    /**
+     * The overflow-y style of the scroll view.
+     */
+    overflowY?: 'scroll' | 'auto';
 };
-declare const ScrollView: FC<ScrollViewProps>;
+declare const ScrollView: React.ForwardRefExoticComponent<ScrollViewProps & React.RefAttributes<HTMLDivElement>>;
 export default ScrollView;

package/lib/types/components/scroll-view/ScrollView.styles.d.ts

@@ -2,7 +2,12 @@ import type { Browser } from 'detect-browser';
 import type { CSSProperties } from 'react';
 import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
 type StyledScrollViewProps = WithTheme<{
-    $maxHeight: CSSProperties['height'];
+    $maxHeight?: CSSProperties['height'];
+    $height?: CSSProperties['height'];
+    $maxWidth?: CSSProperties['width'];
+    $width?: CSSProperties['width'];
+    $overflowX: 'scroll' | 'auto';
+    $overflowY: 'scroll' | 'auto';
     $browser: Browser | 'bot' | null | undefined;
 }>;
 export declare const StyledScrollView: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledScrollViewProps>> & string;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.835",
+    "version": "5.0.0-beta.840",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -85,5 +85,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "6f46796aae03e1314fc24cc1eb68f8963e5d99b2"
+    "gitHead": "3c4c61ed583723172bc62ecc68898ed4110053e8"
 }