@chayns-components/core 5.0.0-beta.760 → 5.0.0-beta.762

package/lib/esm/components/select-button/SelectButton.js

@@ -4,13 +4,14 @@ import Button from '../button/Button';
 import { StyledSelectButton } from './SelectButton.styles';
 const SelectButton = _ref => {
   let {
+    buttonText,
+    isDisabled,
+    list,
     onSelect,
     selectedItemIds,
     shouldAllowMultiSelect,
-    buttonText,
+    shouldShowButtonTextWithSelection,
     shouldShowSearch,
-    list,
-    isDisabled,
     title
   } = _ref;
   const itemList = useMemo(() => {
@@ -29,22 +30,28 @@ const SelectButton = _ref => {
     });
     return items;
   }, [list, selectedItemIds]);
-  const selectedItemText = useMemo(() => {
-    if (!selectedItemIds || selectedItemIds.length === 0) {
-      return null;
+  const internalButtonText = useMemo(() => {
+    if (shouldShowButtonTextWithSelection || !selectedItemIds || selectedItemIds.length === 0) {
+      return buttonText;
     }
+    let addedCount = 0;
     let newText = '';
+    const additionalCount = selectedItemIds.length - 2;
     list.forEach(_ref3 => {
       let {
         text,
         id
       } = _ref3;
-      if (selectedItemIds?.includes(id)) {
+      if ((addedCount < 2 || additionalCount <= 1) && selectedItemIds?.includes(id)) {
+        addedCount += 1;
         newText += newText.length === 0 ? `${text}` : `, ${text}`;
       }
     });
+    if (additionalCount > 1) {
+      newText += `, ${additionalCount} weitere`;
+    }
     return newText;
-  }, [list, selectedItemIds]);
+  }, [buttonText, list, selectedItemIds, shouldShowButtonTextWithSelection]);
   const handleClick = () => {
     void createDialog({
       text: title ? `[h1]${title}[/h1]` : undefined,
@@ -69,7 +76,7 @@ const SelectButton = _ref => {
     isDisabled: isDisabled,
     isSecondary: true,
     shouldShowTextAsRobotoMedium: false
-  }, selectedItemText ?? buttonText));
+  }, internalButtonText));
 };
 SelectButton.displayName = 'SelectButton';
 export default SelectButton;

package/lib/esm/components/select-button/SelectButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectButton.js","names":["createDialog","DialogType","React","useMemo","Button","StyledSelectButton","SelectButton","_ref","onSelect","selectedItemIds","shouldAllowMultiSelect","buttonText","shouldShowSearch","list","isDisabled","title","itemList","items","forEach","_ref2","text","id","isSelected","includes","push","name","selectedItemText","length","newText","_ref3","handleClick","undefined","type","SELECT","multiselect","quickfind","open","then","result","buttonType","map","Number","createElement","onClick","isSecondary","shouldShowTextAsRobotoMedium","displayName"],"sources":["../../../../src/components/select-button/SelectButton.tsx"],"sourcesContent":["import { createDialog, DialogType, type DialogSelectListItemType } from 'chayns-api';\nimport React, { useMemo, type FC } from 'react';\nimport type { SelectButtonItem } from '../../types/selectButton';\nimport Button from '../button/Button';\nimport { StyledSelectButton } from './SelectButton.styles';\n\nexport type SelectButtonProps = {\n    /**\n     * The text that should be displayed inside the button.\n     */\n    buttonText: string;\n    /**\n     * Whether the button should be disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * A list of item that could be selected.\n     */\n    list: SelectButtonItem[];\n    /**\n     * Function to be executed after an item is selected.\n     */\n    onSelect?: (ids: number[]) => void;\n    /**\n     * The id of an item that should be preselected.\n     */\n    selectedItemIds?: number[];\n    /**\n     * Whether more than one item should be selectable.\n     */\n    shouldAllowMultiSelect?: boolean;\n    /**\n     * Whether the search should be displayed inside the dialog.\n     */\n    shouldShowSearch?: boolean;\n    /**\n     * The title of the dialog.\n     */\n    title?: string;\n};\n\nconst SelectButton: FC<SelectButtonProps> = ({\n    onSelect,\n    selectedItemIds,\n    shouldAllowMultiSelect,\n    buttonText,\n    shouldShowSearch,\n    list,\n    isDisabled,\n    title,\n}) => {\n    const itemList = useMemo(() => {\n        const items: DialogSelectListItemType[] = [];\n\n        list.forEach(({ text, id }) => {\n            const isSelected = selectedItemIds ? selectedItemIds.includes(id) : false;\n\n            items.push({\n                name: text,\n                id,\n                isSelected,\n            });\n        });\n\n        return items;\n    }, [list, selectedItemIds]);\n\n    const selectedItemText = useMemo(() => {\n        if (!selectedItemIds || selectedItemIds.length === 0) {\n            return null;\n        }\n\n        let newText = '';\n\n        list.forEach(({ text, id }) => {\n            if (selectedItemIds?.includes(id)) {\n                newText += newText.length === 0 ? `${text}` : `, ${text}`;\n            }\n        });\n\n        return newText;\n    }, [list, selectedItemIds]);\n\n    const handleClick = () => {\n        void createDialog({\n            text: title ? `[h1]${title}[/h1]` : undefined,\n            type: DialogType.SELECT,\n            list: itemList,\n            multiselect: shouldAllowMultiSelect,\n            quickfind: shouldShowSearch,\n        })\n            .open()\n            .then((result) => {\n                // Ignore because there is no type\n                // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                // @ts-ignore\n                if (result && result.buttonType === 1 && typeof onSelect === 'function') {\n                    // Ignore because there is no type\n                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                    // @ts-ignore\n                    onSelect((result.result as string[]).map(Number));\n                }\n            });\n    };\n\n    return (\n        <StyledSelectButton>\n            <Button\n                onClick={handleClick}\n                isDisabled={isDisabled}\n                isSecondary\n                shouldShowTextAsRobotoMedium={false}\n            >\n                {selectedItemText ?? buttonText}\n            </Button>\n        </StyledSelectButton>\n    );\n};\n\nSelectButton.displayName = 'SelectButton';\n\nexport default SelectButton;\n"],"mappings":"AAAA,SAASA,YAAY,EAAEC,UAAU,QAAuC,YAAY;AACpF,OAAOC,KAAK,IAAIC,OAAO,QAAiB,OAAO;AAE/C,OAAOC,MAAM,MAAM,kBAAkB;AACrC,SAASC,kBAAkB,QAAQ,uBAAuB;AAqC1D,MAAMC,YAAmC,GAAGC,IAAA,IAStC;EAAA,IATuC;IACzCC,QAAQ;IACRC,eAAe;IACfC,sBAAsB;IACtBC,UAAU;IACVC,gBAAgB;IAChBC,IAAI;IACJC,UAAU;IACVC;EACJ,CAAC,GAAAR,IAAA;EACG,MAAMS,QAAQ,GAAGb,OAAO,CAAC,MAAM;IAC3B,MAAMc,KAAiC,GAAG,EAAE;IAE5CJ,IAAI,CAACK,OAAO,CAACC,KAAA,IAAkB;MAAA,IAAjB;QAAEC,IAAI;QAAEC;MAAG,CAAC,GAAAF,KAAA;MACtB,MAAMG,UAAU,GAAGb,eAAe,GAAGA,eAAe,CAACc,QAAQ,CAACF,EAAE,CAAC,GAAG,KAAK;MAEzEJ,KAAK,CAACO,IAAI,CAAC;QACPC,IAAI,EAAEL,IAAI;QACVC,EAAE;QACFC;MACJ,CAAC,CAAC;IACN,CAAC,CAAC;IAEF,OAAOL,KAAK;EAChB,CAAC,EAAE,CAACJ,IAAI,EAAEJ,eAAe,CAAC,CAAC;EAE3B,MAAMiB,gBAAgB,GAAGvB,OAAO,CAAC,MAAM;IACnC,IAAI,CAACM,eAAe,IAAIA,eAAe,CAACkB,MAAM,KAAK,CAAC,EAAE;MAClD,OAAO,IAAI;IACf;IAEA,IAAIC,OAAO,GAAG,EAAE;IAEhBf,IAAI,CAACK,OAAO,CAACW,KAAA,IAAkB;MAAA,IAAjB;QAAET,IAAI;QAAEC;MAAG,CAAC,GAAAQ,KAAA;MACtB,IAAIpB,eAAe,EAAEc,QAAQ,CAACF,EAAE,CAAC,EAAE;QAC/BO,OAAO,IAAIA,OAAO,CAACD,MAAM,KAAK,CAAC,GAAG,GAAGP,IAAI,EAAE,GAAG,KAAKA,IAAI,EAAE;MAC7D;IACJ,CAAC,CAAC;IAEF,OAAOQ,OAAO;EAClB,CAAC,EAAE,CAACf,IAAI,EAAEJ,eAAe,CAAC,CAAC;EAE3B,MAAMqB,WAAW,GAAGA,CAAA,KAAM;IACtB,KAAK9B,YAAY,CAAC;MACdoB,IAAI,EAAEL,KAAK,GAAG,OAAOA,KAAK,OAAO,GAAGgB,SAAS;MAC7CC,IAAI,EAAE/B,UAAU,CAACgC,MAAM;MACvBpB,IAAI,EAAEG,QAAQ;MACdkB,WAAW,EAAExB,sBAAsB;MACnCyB,SAAS,EAAEvB;IACf,CAAC,CAAC,CACGwB,IAAI,CAAC,CAAC,CACNC,IAAI,CAAEC,MAAM,IAAK;MACd;MACA;MACA;MACA,IAAIA,MAAM,IAAIA,MAAM,CAACC,UAAU,KAAK,CAAC,IAAI,OAAO/B,QAAQ,KAAK,UAAU,EAAE;QACrE;QACA;QACA;QACAA,QAAQ,CAAE8B,MAAM,CAACA,MAAM,CAAcE,GAAG,CAACC,MAAM,CAAC,CAAC;MACrD;IACJ,CAAC,CAAC;EACV,CAAC;EAED,oBACIvC,KAAA,CAAAwC,aAAA,CAACrC,kBAAkB,qBACfH,KAAA,CAAAwC,aAAA,CAACtC,MAAM;IACHuC,OAAO,EAAEb,WAAY;IACrBhB,UAAU,EAAEA,UAAW;IACvB8B,WAAW;IACXC,4BAA4B,EAAE;EAAM,GAEnCnB,gBAAgB,IAAIf,UACjB,CACQ,CAAC;AAE7B,CAAC;AAEDL,YAAY,CAACwC,WAAW,GAAG,cAAc;AAEzC,eAAexC,YAAY","ignoreList":[]}
+{"version":3,"file":"SelectButton.js","names":["createDialog","DialogType","React","useMemo","Button","StyledSelectButton","SelectButton","_ref","buttonText","isDisabled","list","onSelect","selectedItemIds","shouldAllowMultiSelect","shouldShowButtonTextWithSelection","shouldShowSearch","title","itemList","items","forEach","_ref2","text","id","isSelected","includes","push","name","internalButtonText","length","addedCount","newText","additionalCount","_ref3","handleClick","undefined","type","SELECT","multiselect","quickfind","open","then","result","buttonType","map","Number","createElement","onClick","isSecondary","shouldShowTextAsRobotoMedium","displayName"],"sources":["../../../../src/components/select-button/SelectButton.tsx"],"sourcesContent":["import { createDialog, DialogType, type DialogSelectListItemType } from 'chayns-api';\nimport React, { useMemo, type FC } from 'react';\nimport type { SelectButtonItem } from '../../types/selectButton';\nimport Button from '../button/Button';\nimport { StyledSelectButton } from './SelectButton.styles';\n\nexport type SelectButtonProps = {\n    /**\n     * The text that should be displayed inside the button.\n     */\n    buttonText: string;\n    /**\n     * Whether the button should be disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * A list of item that could be selected.\n     */\n    list: SelectButtonItem[];\n    /**\n     * Function to be executed after an item is selected.\n     */\n    onSelect?: (ids: number[]) => void;\n    /**\n     * The id of an item that should be preselected.\n     */\n    selectedItemIds?: number[];\n    /**\n     * Whether more than one item should be selectable.\n     */\n    shouldAllowMultiSelect?: boolean;\n    /**\n     * Whether the button text should be displayed also if items are selected.\n     */\n    shouldShowButtonTextWithSelection?: boolean;\n    /**\n     * Whether the search should be displayed inside the dialog.\n     */\n    shouldShowSearch?: boolean;\n    /**\n     * The title of the dialog.\n     */\n    title?: string;\n};\n\nconst SelectButton: FC<SelectButtonProps> = ({\n    buttonText,\n    isDisabled,\n    list,\n    onSelect,\n    selectedItemIds,\n    shouldAllowMultiSelect,\n    shouldShowButtonTextWithSelection,\n    shouldShowSearch,\n    title,\n}) => {\n    const itemList = useMemo(() => {\n        const items: DialogSelectListItemType[] = [];\n\n        list.forEach(({ text, id }) => {\n            const isSelected = selectedItemIds ? selectedItemIds.includes(id) : false;\n\n            items.push({\n                name: text,\n                id,\n                isSelected,\n            });\n        });\n\n        return items;\n    }, [list, selectedItemIds]);\n\n    const internalButtonText = useMemo(() => {\n        if (shouldShowButtonTextWithSelection || !selectedItemIds || selectedItemIds.length === 0) {\n            return buttonText;\n        }\n\n        let addedCount = 0;\n        let newText = '';\n\n        const additionalCount = selectedItemIds.length - 2;\n\n        list.forEach(({ text, id }) => {\n            if ((addedCount < 2 || additionalCount <= 1) && selectedItemIds?.includes(id)) {\n                addedCount += 1;\n                newText += newText.length === 0 ? `${text}` : `, ${text}`;\n            }\n        });\n\n        if (additionalCount > 1) {\n            newText += `, ${additionalCount} weitere`;\n        }\n\n        return newText;\n    }, [buttonText, list, selectedItemIds, shouldShowButtonTextWithSelection]);\n\n    const handleClick = () => {\n        void createDialog({\n            text: title ? `[h1]${title}[/h1]` : undefined,\n            type: DialogType.SELECT,\n            list: itemList,\n            multiselect: shouldAllowMultiSelect,\n            quickfind: shouldShowSearch,\n        })\n            .open()\n            .then((result) => {\n                // Ignore because there is no type\n                // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                // @ts-ignore\n                if (result && result.buttonType === 1 && typeof onSelect === 'function') {\n                    // Ignore because there is no type\n                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                    // @ts-ignore\n                    onSelect((result.result as string[]).map(Number));\n                }\n            });\n    };\n\n    return (\n        <StyledSelectButton>\n            <Button\n                onClick={handleClick}\n                isDisabled={isDisabled}\n                isSecondary\n                shouldShowTextAsRobotoMedium={false}\n            >\n                {internalButtonText}\n            </Button>\n        </StyledSelectButton>\n    );\n};\n\nSelectButton.displayName = 'SelectButton';\n\nexport default SelectButton;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/truncation/Truncation.js

@@ -73,7 +73,7 @@ const Truncation = _ref => {
     truncateElement(pseudoChildrenRef.current, collapsedHeight);
     setNewCollapsedHeight(pseudoChildrenRef.current.offsetHeight);
     setOriginalSmallHeight(pseudoChildrenRef.current.offsetHeight);
-  }, [collapsedHeight, pseudoChildrenRef, children]);
+  }, [collapsedHeight, pseudoChildrenRef]);
 
   // Checks if the clamp should be shown
   useEffect(() => {

package/lib/esm/components/truncation/Truncation.js.map

@@ -1 +1 @@
-{"version":3,"file":"Truncation.js","names":["React","useCallback","useEffect","useLayoutEffect","useMemo","useRef","useState","ClampPosition","debounce","truncateElement","StyledMotionTruncationContent","StyledTruncation","StyledTruncationClamp","StyledTruncationClampWrapper","StyledTruncationPseudoContent","Truncation","_ref","collapsedHeight","clampPosition","Right","isOpen","moreLabel","lessLabel","onChange","children","internalIsOpen","setInternalIsOpen","showClamp","setShowClamp","newCollapsedHeight","setNewCollapsedHeight","originalHeight","setOriginalHeight","shouldShowCollapsedElement","setShouldShowCollapsedElement","hasSizeChanged","setHasSizeChanged","initialRender","setInitialRender","originalSmallHeight","setOriginalSmallHeight","originalBigHeight","setOriginalBigHeight","parentRef","pseudoChildrenRef","childrenRef","originalChildrenRef","hasCollapsed","isAnimating","hasSizeRecentlyChanged","canResetSizeChanged","handleClampClick","event","current","handleAnimationEnd","window","setTimeout","offsetHeight","firstChild","removeChild","appendChild","style","visibility","resizeObserver","ResizeObserver","entries","observedHeight","contentRect","height","observe","disconnect","createElement","className","ref","animate","initial","transition","type","duration","onAnimationComplete","onAnimationStart","$position","onClick"],"sources":["../../../../src/components/truncation/Truncation.tsx"],"sourcesContent":["import React, {\n    FC,\n    MouseEvent,\n    MouseEventHandler,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useLayoutEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { ClampPosition } from '../../types/truncation';\nimport { debounce } from '../../utils/debounce';\nimport { truncateElement } from '../../utils/truncation';\nimport {\n    StyledMotionTruncationContent,\n    StyledTruncation,\n    StyledTruncationClamp,\n    StyledTruncationClampWrapper,\n    StyledTruncationPseudoContent,\n} from './Truncation.styles';\n\nexport type TruncationProps = {\n    /**\n     * The elements that should be expanding or collapsing.\n     */\n    children: ReactElement;\n    /**\n     * The position of the clamp.\n     */\n    clampPosition?: ClampPosition;\n    /**\n     * The height of the children Element in it`s collapsed state.\n     */\n    collapsedHeight?: number;\n    /**\n     * If set to true, the content is exposed.\n     */\n    isOpen?: boolean;\n    /**\n     * A text that should be displayed if the content is expanded.\n     */\n    lessLabel?: string;\n    /**\n     * A text that should be displayed if the content is collapsed.\n     */\n    moreLabel?: string;\n    /**\n     * Function to be executed when the component is expanding or collapsing.\n     */\n    onChange?: (event: MouseEvent<HTMLAnchorElement>, isOpen: boolean) => void;\n};\n\nconst Truncation: FC<TruncationProps> = ({\n    collapsedHeight = 150,\n    clampPosition = ClampPosition.Right,\n    isOpen,\n    moreLabel = 'Mehr',\n    lessLabel = 'Weniger',\n    onChange,\n    children,\n}) => {\n    const [internalIsOpen, setInternalIsOpen] = useState(false);\n    const [showClamp, setShowClamp] = useState(true);\n    const [newCollapsedHeight, setNewCollapsedHeight] = useState(collapsedHeight);\n    const [originalHeight, setOriginalHeight] = useState(0);\n    const [shouldShowCollapsedElement, setShouldShowCollapsedElement] = useState(true);\n    const [hasSizeChanged, setHasSizeChanged] = useState(false);\n    const [initialRender, setInitialRender] = useState(true);\n\n    const [originalSmallHeight, setOriginalSmallHeight] = useState(0);\n    const [originalBigHeight, setOriginalBigHeight] = useState(0);\n\n    useEffect(() => {\n        setInitialRender(false);\n    }, []);\n\n    const parentRef = useRef<HTMLDivElement>(null);\n    const pseudoChildrenRef = useRef<HTMLDivElement>(null);\n    const childrenRef = useRef<HTMLDivElement>(null);\n    const originalChildrenRef = useRef<HTMLDivElement>(null);\n    const hasCollapsed = useRef(false);\n    const isAnimating = useRef(false);\n    const hasSizeRecentlyChanged = useRef(false);\n    const canResetSizeChanged = useRef(true);\n\n    useEffect(() => {\n        if (typeof isOpen === 'boolean') {\n            setInternalIsOpen(isOpen);\n            setShowClamp(!isOpen);\n        }\n    }, [isOpen]);\n\n    // Changes the state of the truncation\n    const handleClampClick = useCallback<MouseEventHandler<HTMLAnchorElement>>(\n        (event) => {\n            setInternalIsOpen((current) => {\n                if (typeof onChange === 'function') {\n                    onChange(event, !current);\n                }\n\n                return !current;\n            });\n        },\n        [onChange],\n    );\n\n    const handleAnimationEnd = useCallback(() => {\n        hasCollapsed.current = true;\n        isAnimating.current = false;\n\n        if (canResetSizeChanged.current) {\n            setHasSizeChanged(false);\n            canResetSizeChanged.current = false;\n        }\n\n        window.setTimeout(() => {\n            hasSizeRecentlyChanged.current = false;\n        }, 10);\n\n        setShouldShowCollapsedElement(!internalIsOpen);\n\n        window.setTimeout(() => {\n            hasCollapsed.current = false;\n        }, 30);\n    }, [internalIsOpen]);\n\n    useEffect(() => {\n        if (!pseudoChildrenRef.current) {\n            return;\n        }\n\n        setOriginalHeight(pseudoChildrenRef.current.offsetHeight);\n        setOriginalBigHeight(pseudoChildrenRef.current.offsetHeight);\n\n        truncateElement(pseudoChildrenRef.current, collapsedHeight);\n\n        setNewCollapsedHeight(pseudoChildrenRef.current.offsetHeight);\n        setOriginalSmallHeight(pseudoChildrenRef.current.offsetHeight);\n    }, [collapsedHeight, pseudoChildrenRef, children]);\n\n    // Checks if the clamp should be shown\n    useEffect(() => {\n        if (pseudoChildrenRef.current && !hasSizeChanged && !initialRender) {\n            setShowClamp(originalHeight > newCollapsedHeight);\n        }\n    }, [collapsedHeight, hasSizeChanged, initialRender, newCollapsedHeight, originalHeight]);\n\n    useEffect(() => {\n        if (childrenRef.current && pseudoChildrenRef.current && originalChildrenRef.current) {\n            while (childrenRef.current.firstChild) {\n                childrenRef.current.removeChild(childrenRef.current.firstChild);\n            }\n\n            childrenRef.current.appendChild(\n                shouldShowCollapsedElement && !internalIsOpen\n                    ? pseudoChildrenRef.current\n                    : originalChildrenRef.current,\n            );\n\n            parentRef.current?.appendChild(\n                shouldShowCollapsedElement && !internalIsOpen\n                    ? originalChildrenRef.current\n                    : pseudoChildrenRef.current,\n            );\n\n            (childrenRef.current.children[0] as HTMLDivElement).style.visibility = 'visible';\n        }\n    }, [children, internalIsOpen, shouldShowCollapsedElement]);\n\n    useLayoutEffect(() => {\n        if (originalChildrenRef.current) {\n            const resizeObserver = new ResizeObserver((entries) => {\n                if (entries && entries[0]) {\n                    const observedHeight = entries[0].contentRect.height;\n\n                    setOriginalHeight(\n                        observedHeight < originalBigHeight ? originalBigHeight : observedHeight,\n                    );\n\n                    if (\n                        !hasCollapsed.current &&\n                        !isAnimating.current &&\n                        !hasSizeRecentlyChanged.current\n                    ) {\n                        void debounce(() => {\n                            canResetSizeChanged.current = true;\n                        }, 250)();\n\n                        setHasSizeChanged(true);\n                        hasSizeRecentlyChanged.current = true;\n                    }\n                }\n            });\n\n            resizeObserver.observe(originalChildrenRef.current);\n\n            return () => {\n                resizeObserver.disconnect();\n            };\n        }\n\n        return () => {};\n    }, [originalBigHeight]);\n\n    useLayoutEffect(() => {\n        if (pseudoChildrenRef.current) {\n            const resizeObserver = new ResizeObserver((entries) => {\n                if (entries && entries[0]) {\n                    const observedHeight = entries[0].contentRect.height;\n\n                    setNewCollapsedHeight(\n                        observedHeight < originalSmallHeight ? originalSmallHeight : observedHeight,\n                    );\n\n                    if (\n                        !hasCollapsed.current &&\n                        !isAnimating.current &&\n                        !hasSizeRecentlyChanged.current\n                    ) {\n                        void debounce(() => {\n                            canResetSizeChanged.current = true;\n                        }, 250)();\n\n                        setHasSizeChanged(true);\n                        hasSizeRecentlyChanged.current = true;\n                    }\n                }\n            });\n\n            resizeObserver.observe(pseudoChildrenRef.current);\n\n            return () => {\n                resizeObserver.disconnect();\n            };\n        }\n\n        return () => {};\n    }, [originalSmallHeight]);\n\n    return useMemo(\n        () => (\n            <StyledTruncation className=\"beta-chayns-truncation\" ref={parentRef}>\n                <StyledTruncationPseudoContent ref={pseudoChildrenRef}>\n                    {children}\n                </StyledTruncationPseudoContent>\n                <StyledTruncationPseudoContent ref={originalChildrenRef}>\n                    {children}\n                </StyledTruncationPseudoContent>\n                <StyledMotionTruncationContent\n                    animate={{ height: internalIsOpen ? originalHeight : newCollapsedHeight }}\n                    initial={false}\n                    transition={{ type: 'tween', duration: hasSizeChanged ? 0 : 0.2 }}\n                    onAnimationComplete={handleAnimationEnd}\n                    onAnimationStart={() => {\n                        isAnimating.current = true;\n                    }}\n                    ref={childrenRef}\n                />\n                {showClamp && (\n                    <StyledTruncationClampWrapper $position={clampPosition}>\n                        <StyledTruncationClamp onClick={handleClampClick}>\n                            {internalIsOpen ? lessLabel : moreLabel}\n                        </StyledTruncationClamp>\n                    </StyledTruncationClampWrapper>\n                )}\n            </StyledTruncation>\n        ),\n        [\n            children,\n            clampPosition,\n            handleAnimationEnd,\n            handleClampClick,\n            hasSizeChanged,\n            internalIsOpen,\n            lessLabel,\n            moreLabel,\n            newCollapsedHeight,\n            originalHeight,\n            showClamp,\n        ],\n    );\n};\n\nexport default Truncation;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Truncation.js","names":["React","useCallback","useEffect","useLayoutEffect","useMemo","useRef","useState","ClampPosition","debounce","truncateElement","StyledMotionTruncationContent","StyledTruncation","StyledTruncationClamp","StyledTruncationClampWrapper","StyledTruncationPseudoContent","Truncation","_ref","collapsedHeight","clampPosition","Right","isOpen","moreLabel","lessLabel","onChange","children","internalIsOpen","setInternalIsOpen","showClamp","setShowClamp","newCollapsedHeight","setNewCollapsedHeight","originalHeight","setOriginalHeight","shouldShowCollapsedElement","setShouldShowCollapsedElement","hasSizeChanged","setHasSizeChanged","initialRender","setInitialRender","originalSmallHeight","setOriginalSmallHeight","originalBigHeight","setOriginalBigHeight","parentRef","pseudoChildrenRef","childrenRef","originalChildrenRef","hasCollapsed","isAnimating","hasSizeRecentlyChanged","canResetSizeChanged","handleClampClick","event","current","handleAnimationEnd","window","setTimeout","offsetHeight","firstChild","removeChild","appendChild","style","visibility","resizeObserver","ResizeObserver","entries","observedHeight","contentRect","height","observe","disconnect","createElement","className","ref","animate","initial","transition","type","duration","onAnimationComplete","onAnimationStart","$position","onClick"],"sources":["../../../../src/components/truncation/Truncation.tsx"],"sourcesContent":["import React, {\n    FC,\n    MouseEvent,\n    MouseEventHandler,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useLayoutEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { ClampPosition } from '../../types/truncation';\nimport { debounce } from '../../utils/debounce';\nimport { truncateElement } from '../../utils/truncation';\nimport {\n    StyledMotionTruncationContent,\n    StyledTruncation,\n    StyledTruncationClamp,\n    StyledTruncationClampWrapper,\n    StyledTruncationPseudoContent,\n} from './Truncation.styles';\n\nexport type TruncationProps = {\n    /**\n     * The elements that should be expanding or collapsing.\n     */\n    children: ReactElement;\n    /**\n     * The position of the clamp.\n     */\n    clampPosition?: ClampPosition;\n    /**\n     * The height of the children Element in it`s collapsed state.\n     */\n    collapsedHeight?: number;\n    /**\n     * If set to true, the content is exposed.\n     */\n    isOpen?: boolean;\n    /**\n     * A text that should be displayed if the content is expanded.\n     */\n    lessLabel?: string;\n    /**\n     * A text that should be displayed if the content is collapsed.\n     */\n    moreLabel?: string;\n    /**\n     * Function to be executed when the component is expanding or collapsing.\n     */\n    onChange?: (event: MouseEvent<HTMLAnchorElement>, isOpen: boolean) => void;\n};\n\nconst Truncation: FC<TruncationProps> = ({\n    collapsedHeight = 150,\n    clampPosition = ClampPosition.Right,\n    isOpen,\n    moreLabel = 'Mehr',\n    lessLabel = 'Weniger',\n    onChange,\n    children,\n}) => {\n    const [internalIsOpen, setInternalIsOpen] = useState(false);\n    const [showClamp, setShowClamp] = useState(true);\n    const [newCollapsedHeight, setNewCollapsedHeight] = useState(collapsedHeight);\n    const [originalHeight, setOriginalHeight] = useState(0);\n    const [shouldShowCollapsedElement, setShouldShowCollapsedElement] = useState(true);\n    const [hasSizeChanged, setHasSizeChanged] = useState(false);\n    const [initialRender, setInitialRender] = useState(true);\n\n    const [originalSmallHeight, setOriginalSmallHeight] = useState(0);\n    const [originalBigHeight, setOriginalBigHeight] = useState(0);\n\n    useEffect(() => {\n        setInitialRender(false);\n    }, []);\n\n    const parentRef = useRef<HTMLDivElement>(null);\n    const pseudoChildrenRef = useRef<HTMLDivElement>(null);\n    const childrenRef = useRef<HTMLDivElement>(null);\n    const originalChildrenRef = useRef<HTMLDivElement>(null);\n    const hasCollapsed = useRef(false);\n    const isAnimating = useRef(false);\n    const hasSizeRecentlyChanged = useRef(false);\n    const canResetSizeChanged = useRef(true);\n\n    useEffect(() => {\n        if (typeof isOpen === 'boolean') {\n            setInternalIsOpen(isOpen);\n            setShowClamp(!isOpen);\n        }\n    }, [isOpen]);\n\n    // Changes the state of the truncation\n    const handleClampClick = useCallback<MouseEventHandler<HTMLAnchorElement>>(\n        (event) => {\n            setInternalIsOpen((current) => {\n                if (typeof onChange === 'function') {\n                    onChange(event, !current);\n                }\n\n                return !current;\n            });\n        },\n        [onChange],\n    );\n\n    const handleAnimationEnd = useCallback(() => {\n        hasCollapsed.current = true;\n        isAnimating.current = false;\n\n        if (canResetSizeChanged.current) {\n            setHasSizeChanged(false);\n            canResetSizeChanged.current = false;\n        }\n\n        window.setTimeout(() => {\n            hasSizeRecentlyChanged.current = false;\n        }, 10);\n\n        setShouldShowCollapsedElement(!internalIsOpen);\n\n        window.setTimeout(() => {\n            hasCollapsed.current = false;\n        }, 30);\n    }, [internalIsOpen]);\n\n    useEffect(() => {\n        if (!pseudoChildrenRef.current) {\n            return;\n        }\n\n        setOriginalHeight(pseudoChildrenRef.current.offsetHeight);\n        setOriginalBigHeight(pseudoChildrenRef.current.offsetHeight);\n\n        truncateElement(pseudoChildrenRef.current, collapsedHeight);\n\n        setNewCollapsedHeight(pseudoChildrenRef.current.offsetHeight);\n        setOriginalSmallHeight(pseudoChildrenRef.current.offsetHeight);\n    }, [collapsedHeight, pseudoChildrenRef]);\n\n    // Checks if the clamp should be shown\n    useEffect(() => {\n        if (pseudoChildrenRef.current && !hasSizeChanged && !initialRender) {\n            setShowClamp(originalHeight > newCollapsedHeight);\n        }\n    }, [collapsedHeight, hasSizeChanged, initialRender, newCollapsedHeight, originalHeight]);\n\n    useEffect(() => {\n        if (childrenRef.current && pseudoChildrenRef.current && originalChildrenRef.current) {\n            while (childrenRef.current.firstChild) {\n                childrenRef.current.removeChild(childrenRef.current.firstChild);\n            }\n\n            childrenRef.current.appendChild(\n                shouldShowCollapsedElement && !internalIsOpen\n                    ? pseudoChildrenRef.current\n                    : originalChildrenRef.current,\n            );\n\n            parentRef.current?.appendChild(\n                shouldShowCollapsedElement && !internalIsOpen\n                    ? originalChildrenRef.current\n                    : pseudoChildrenRef.current,\n            );\n\n            (childrenRef.current.children[0] as HTMLDivElement).style.visibility = 'visible';\n        }\n    }, [children, internalIsOpen, shouldShowCollapsedElement]);\n\n    useLayoutEffect(() => {\n        if (originalChildrenRef.current) {\n            const resizeObserver = new ResizeObserver((entries) => {\n                if (entries && entries[0]) {\n                    const observedHeight = entries[0].contentRect.height;\n\n                    setOriginalHeight(\n                        observedHeight < originalBigHeight ? originalBigHeight : observedHeight,\n                    );\n\n                    if (\n                        !hasCollapsed.current &&\n                        !isAnimating.current &&\n                        !hasSizeRecentlyChanged.current\n                    ) {\n                        void debounce(() => {\n                            canResetSizeChanged.current = true;\n                        }, 250)();\n\n                        setHasSizeChanged(true);\n                        hasSizeRecentlyChanged.current = true;\n                    }\n                }\n            });\n\n            resizeObserver.observe(originalChildrenRef.current);\n\n            return () => {\n                resizeObserver.disconnect();\n            };\n        }\n\n        return () => {};\n    }, [originalBigHeight]);\n\n    useLayoutEffect(() => {\n        if (pseudoChildrenRef.current) {\n            const resizeObserver = new ResizeObserver((entries) => {\n                if (entries && entries[0]) {\n                    const observedHeight = entries[0].contentRect.height;\n\n                    setNewCollapsedHeight(\n                        observedHeight < originalSmallHeight ? originalSmallHeight : observedHeight,\n                    );\n\n                    if (\n                        !hasCollapsed.current &&\n                        !isAnimating.current &&\n                        !hasSizeRecentlyChanged.current\n                    ) {\n                        void debounce(() => {\n                            canResetSizeChanged.current = true;\n                        }, 250)();\n\n                        setHasSizeChanged(true);\n                        hasSizeRecentlyChanged.current = true;\n                    }\n                }\n            });\n\n            resizeObserver.observe(pseudoChildrenRef.current);\n\n            return () => {\n                resizeObserver.disconnect();\n            };\n        }\n\n        return () => {};\n    }, [originalSmallHeight]);\n\n    return useMemo(\n        () => (\n            <StyledTruncation className=\"beta-chayns-truncation\" ref={parentRef}>\n                <StyledTruncationPseudoContent ref={pseudoChildrenRef}>\n                    {children}\n                </StyledTruncationPseudoContent>\n                <StyledTruncationPseudoContent ref={originalChildrenRef}>\n                    {children}\n                </StyledTruncationPseudoContent>\n                <StyledMotionTruncationContent\n                    animate={{ height: internalIsOpen ? originalHeight : newCollapsedHeight }}\n                    initial={false}\n                    transition={{ type: 'tween', duration: hasSizeChanged ? 0 : 0.2 }}\n                    onAnimationComplete={handleAnimationEnd}\n                    onAnimationStart={() => {\n                        isAnimating.current = true;\n                    }}\n                    ref={childrenRef}\n                />\n                {showClamp && (\n                    <StyledTruncationClampWrapper $position={clampPosition}>\n                        <StyledTruncationClamp onClick={handleClampClick}>\n                            {internalIsOpen ? lessLabel : moreLabel}\n                        </StyledTruncationClamp>\n                    </StyledTruncationClampWrapper>\n                )}\n            </StyledTruncation>\n        ),\n        [\n            children,\n            clampPosition,\n            handleAnimationEnd,\n            handleClampClick,\n            hasSizeChanged,\n            internalIsOpen,\n            lessLabel,\n            moreLabel,\n            newCollapsedHeight,\n            originalHeight,\n            showClamp,\n        ],\n    );\n};\n\nexport default Truncation;\n"],"mappings":"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","ignoreList":[]}

package/lib/types/components/combobox/ComboBox.d.ts

@@ -7,6 +7,8 @@ export interface IComboBoxItems {
 export interface IComboBoxItem {
     icons?: string[];
     imageUrl?: string;
+    rightElement?: ReactNode;
+    subtext?: string;
     suffixElement?: ReactNode;
     text: string;
     value: string | number;

package/lib/types/components/combobox/ComboBox.styles.d.ts

@@ -291,4 +291,5 @@ export declare const StyledMotionComboBoxBody: import("styled-components/dist/ty
 } & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, StyledComboBoxBodyProps>> & string & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledComboBoxTopic: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export {};

package/lib/types/components/combobox/combobox-item/ComboBoxItem.d.ts

@@ -1,15 +1,17 @@
 import { FC, ReactNode } from 'react';
 import type { ComboBoxProps, IComboBoxItem } from '../ComboBox';
 export type ComboBoxItemProps = {
+    icons?: IComboBoxItem['icons'];
+    id: IComboBoxItem['value'];
     imageUrl: IComboBoxItem['imageUrl'];
     isSelected: boolean;
     onSelect: (itemToSelect: IComboBoxItem) => void;
+    rightElement: IComboBoxItem['rightElement'];
     shouldShowRoundImage: ComboBoxProps['shouldShowRoundImage'];
-    icons?: IComboBoxItem['icons'];
+    subtext: IComboBoxItem['subtext'];
     suffixElement?: ReactNode;
     text: IComboBoxItem['text'];
     value: IComboBoxItem['value'];
-    id: IComboBoxItem['value'];
 };
 declare const ComboBoxItem: FC<ComboBoxItemProps>;
 export default ComboBoxItem;

package/lib/types/components/combobox/combobox-item/ComboBoxItem.styles.d.ts

@@ -4,9 +4,17 @@ type StyledComboBoxItemProps = WithTheme<{
     $isSelected: boolean;
 }>;
 export declare const StyledComboBoxItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledComboBoxItemProps>> & string;
-export declare const StyledComboBoxTopic: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 type StyledComboBoxItemImageProps = WithTheme<{
+    $shouldShowBigImage?: boolean;
     $shouldShowRoundImage?: boolean;
 }>;
 export declare const StyledComboBoxItemImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, StyledComboBoxItemImageProps>> & string;
+export declare const StyledComboBoxItemContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledComboBoxItemContentHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+type StyledComboBoxItemContentHeaderTextProps = WithTheme<{
+    $shouldShowBoldText?: boolean;
+}>;
+export declare const StyledComboBoxItemContentHeaderText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledComboBoxItemContentHeaderTextProps>> & string;
+export declare const StyledComboBoxItemContentHeaderRightElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledComboBoxItemContentSubtext: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export {};

package/lib/types/components/select-button/SelectButton.d.ts

@@ -25,6 +25,10 @@ export type SelectButtonProps = {
      * Whether more than one item should be selectable.
      */
     shouldAllowMultiSelect?: boolean;
+    /**
+     * Whether the button text should be displayed also if items are selected.
+     */
+    shouldShowButtonTextWithSelection?: boolean;
     /**
      * Whether the search should be displayed inside the dialog.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.760",
+    "version": "5.0.0-beta.762",
     "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": "702091447404588935c8592bdce2e40d1e88212d"
+    "gitHead": "a87f0e8e7660a46f9f5928f0e57f9896eaeed0f3"
 }