@chayns-components/core 5.0.0-beta.599 → 5.0.0-beta.600

package/lib/cjs/components/input/Input.js

@@ -130,7 +130,7 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
     },
     transition: {
       type: 'tween',
-      duration: 0.3
+      duration: 0.1
     }
   }, placeholderElement, /*#__PURE__*/_react.default.createElement(_Input.StyledInputLabel, {
     $isInvalid: isInvalid

package/lib/cjs/components/input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_useElementSize","_AreaContextProvider","_Icon","_interopRequireDefault","_Input","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Input","forwardRef","iconElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","placeholder","placeholderElement","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","type","value","shouldUseAutoFocus","isInvalid","id","ref","_rightElement$props","hasValue","setHasValue","useState","placeholderWidth","setPlaceholderWidth","areaProvider","useContext","AreaContext","theme","useTheme","inputRef","useRef","placeholderRef","placeholderSize","useElementSize","useEffect","width","shouldChangeColor","useMemo","handleClearIconClick","useCallback","current","target","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","event","useImperativeHandle","focus","_inputRef$current","labelPosition","right","top","bottom","left","createElement","StyledInput","className","$isDisabled","StyledInputContentWrapper","$shouldChangeColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","StyledInputIconWrapper","StyledInputContent","StyledInputField","$placeholderWidth","disabled","autoFocus","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","animate","fontSize","initial","layout","transition","duration","StyledInputLabel","StyledMotionInputClearIcon","opacity","onClick","icons","color","wrong","StyledInputRightElement","displayName","_default","exports"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FocusEventHandler,\n    forwardRef,\n    HTMLInputTypeAttribute,\n    KeyboardEventHandler,\n    ReactNode,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n    type ReactElement,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n    StyledInput,\n    StyledInputContent,\n    StyledInputContentWrapper,\n    StyledInputField,\n    StyledInputIconWrapper,\n    StyledInputLabel,\n    StyledInputRightElement,\n    StyledMotionInputClearIcon,\n    StyledMotionInputLabelWrapper,\n} from './Input.styles';\n\nexport type InputRef = {\n    focus: VoidFunction;\n};\n\ntype InputMode =\n    | 'email'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'url'\n    | 'none'\n    | 'numeric'\n    | 'decimal'\n    | undefined;\n\nexport type InputProps = {\n    /**\n     * Icon element to be displayed on the left side of the input field\n     */\n    iconElement?: ReactNode;\n    /**\n     * The id of the input\n     */\n    id?: string;\n    /**\n     * Defines the input mode of the input\n     */\n    inputMode?: InputMode;\n    /**\n     * Disables the input so that it cannot be changed anymore\n     */\n    isDisabled?: boolean;\n    /**\n     * If true, the input field is marked as invalid\n     */\n    isInvalid?: boolean;\n    /**\n     * Function that is executed when the input field loses focus\n     */\n    onBlur?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the text of the input changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the input field is focused\n     */\n    onFocus?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when a letter is pressed\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string;\n    /**\n     * Element to be displayed next to or instead of the \"placeholder\"\n     */\n    placeholderElement?: ReactNode;\n    /**\n     * An element that should be displayed on the right side of the Input.\n     */\n    rightElement?: ReactElement;\n    /**\n     * Whether the placeholder should remain at its position if a value is typed.\n     */\n    shouldRemainPlaceholder?: boolean;\n    /**\n     * Whether the content should be displayed centered inside the input.\n     */\n    shouldShowCenteredContent?: boolean;\n    /**\n     * If true, a clear icon is displayed at the end of the input field\n     */\n    shouldShowClearIcon?: boolean;\n    /**\n     * Whether only the bottom border should be displayed\n     */\n    shouldShowOnlyBottomBorder?: boolean;\n    /**\n     * If true, the input field is focused when the component is mounted\n     */\n    shouldUseAutoFocus?: boolean;\n    /**\n     * Input type set for input element (e.g. 'text', 'number' or 'password')\n     */\n    type?: HTMLInputTypeAttribute;\n    /**\n     * Value if the input field should be controlled\n     */\n    value?: string;\n};\n\nconst Input = forwardRef<InputRef, InputProps>(\n    (\n        {\n            iconElement,\n            inputMode,\n            isDisabled,\n            onBlur,\n            onChange,\n            onFocus,\n            onKeyDown,\n            placeholder,\n            placeholderElement,\n            rightElement,\n            shouldShowOnlyBottomBorder,\n            shouldRemainPlaceholder = false,\n            shouldShowClearIcon = false,\n            shouldShowCenteredContent = false,\n            type = 'text',\n            value,\n            shouldUseAutoFocus = false,\n            isInvalid = false,\n            id,\n        },\n        ref,\n    ) => {\n        const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n        const [placeholderWidth, setPlaceholderWidth] = useState(0);\n\n        const areaProvider = useContext(AreaContext);\n\n        const theme = useTheme() as Theme;\n\n        const inputRef = useRef<HTMLInputElement>(null);\n        const placeholderRef = useRef<HTMLLabelElement>(null);\n\n        const placeholderSize = useElementSize(placeholderRef);\n\n        useEffect(() => {\n            if (placeholderSize && shouldShowOnlyBottomBorder) {\n                setPlaceholderWidth(placeholderSize.width + 5);\n            }\n        }, [placeholderSize, shouldShowOnlyBottomBorder]);\n\n        const shouldChangeColor = useMemo(\n            () => areaProvider.shouldChangeColor ?? false,\n            [areaProvider.shouldChangeColor],\n        );\n\n        const handleClearIconClick = useCallback(() => {\n            if (inputRef.current) {\n                inputRef.current.value = '';\n\n                setHasValue(false);\n\n                if (typeof onChange === 'function') {\n                    onChange({ target: inputRef.current } as ChangeEvent<HTMLInputElement>);\n                }\n            }\n        }, [onChange]);\n\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n        const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n        const handleInputFieldChange = useCallback(\n            (event: ChangeEvent<HTMLInputElement>) => {\n                setHasValue(event.target.value !== '');\n\n                if (typeof onChange === 'function') {\n                    onChange(event);\n                }\n            },\n            [onChange],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                focus: () => inputRef.current?.focus(),\n            }),\n            [],\n        );\n\n        useEffect(() => {\n            if (typeof value === 'string') {\n                setHasValue(value !== '');\n            }\n        }, [value]);\n\n        const labelPosition = useMemo(() => {\n            if (hasValue && !shouldRemainPlaceholder) {\n                return shouldShowOnlyBottomBorder\n                    ? { right: 3, top: -1.5 }\n                    : { bottom: -10, right: -6 };\n            }\n\n            return { left: -1 };\n        }, [hasValue, shouldRemainPlaceholder, shouldShowOnlyBottomBorder]);\n\n        return (\n            <StyledInput className=\"beta-chayns-input\" $isDisabled={isDisabled}>\n                <StyledInputContentWrapper\n                    $shouldChangeColor={shouldChangeColor}\n                    $isInvalid={isInvalid}\n                    $shouldRoundRightCorners={shouldShowBorder}\n                    $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                >\n                    {iconElement && <StyledInputIconWrapper>{iconElement}</StyledInputIconWrapper>}\n                    <StyledInputContent $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}>\n                        <StyledInputField\n                            $placeholderWidth={placeholderWidth}\n                            id={id}\n                            disabled={isDisabled}\n                            onBlur={onBlur}\n                            onChange={handleInputFieldChange}\n                            onFocus={onFocus}\n                            onKeyDown={onKeyDown}\n                            ref={inputRef}\n                            type={type}\n                            value={value}\n                            autoFocus={shouldUseAutoFocus}\n                            inputMode={inputMode}\n                            $isInvalid={isInvalid}\n                            $shouldShowCenteredContent={shouldShowCenteredContent}\n                        />\n                        <StyledMotionInputLabelWrapper\n                            animate={{\n                                fontSize:\n                                    hasValue &&\n                                    !shouldShowOnlyBottomBorder &&\n                                    !shouldRemainPlaceholder\n                                        ? '9px'\n                                        : '16px',\n                            }}\n                            initial={false}\n                            layout\n                            ref={placeholderRef}\n                            style={{ ...labelPosition }}\n                            transition={{ type: 'tween', duration: 0.3 }}\n                        >\n                            {placeholderElement}\n                            <StyledInputLabel $isInvalid={isInvalid}>\n                                {placeholder}\n                            </StyledInputLabel>\n                        </StyledMotionInputLabelWrapper>\n                    </StyledInputContent>\n                    {shouldShowClearIcon && (\n                        <StyledMotionInputClearIcon\n                            $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                            animate={{ opacity: hasValue ? 1 : 0 }}\n                            initial={false}\n                            onClick={handleClearIconClick}\n                            transition={{ type: 'tween' }}\n                        >\n                            <Icon\n                                icons={['fa fa-times']}\n                                color={isInvalid ? theme.wrong : undefined}\n                            />\n                        </StyledMotionInputClearIcon>\n                    )}\n                    {rightElement && shouldShowBorder && rightElement}\n                </StyledInputContentWrapper>\n                {rightElement && !shouldShowBorder && (\n                    <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n                )}\n            </StyledInput>\n        );\n    },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Input.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_useElementSize","_AreaContextProvider","_Icon","_interopRequireDefault","_Input","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Input","forwardRef","iconElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","placeholder","placeholderElement","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","type","value","shouldUseAutoFocus","isInvalid","id","ref","_rightElement$props","hasValue","setHasValue","useState","placeholderWidth","setPlaceholderWidth","areaProvider","useContext","AreaContext","theme","useTheme","inputRef","useRef","placeholderRef","placeholderSize","useElementSize","useEffect","width","shouldChangeColor","useMemo","handleClearIconClick","useCallback","current","target","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","event","useImperativeHandle","focus","_inputRef$current","labelPosition","right","top","bottom","left","createElement","StyledInput","className","$isDisabled","StyledInputContentWrapper","$shouldChangeColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","StyledInputIconWrapper","StyledInputContent","StyledInputField","$placeholderWidth","disabled","autoFocus","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","animate","fontSize","initial","layout","transition","duration","StyledInputLabel","StyledMotionInputClearIcon","opacity","onClick","icons","color","wrong","StyledInputRightElement","displayName","_default","exports"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FocusEventHandler,\n    forwardRef,\n    HTMLInputTypeAttribute,\n    KeyboardEventHandler,\n    ReactNode,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n    type ReactElement,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n    StyledInput,\n    StyledInputContent,\n    StyledInputContentWrapper,\n    StyledInputField,\n    StyledInputIconWrapper,\n    StyledInputLabel,\n    StyledInputRightElement,\n    StyledMotionInputClearIcon,\n    StyledMotionInputLabelWrapper,\n} from './Input.styles';\n\nexport type InputRef = {\n    focus: VoidFunction;\n};\n\ntype InputMode =\n    | 'email'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'url'\n    | 'none'\n    | 'numeric'\n    | 'decimal'\n    | undefined;\n\nexport type InputProps = {\n    /**\n     * Icon element to be displayed on the left side of the input field\n     */\n    iconElement?: ReactNode;\n    /**\n     * The id of the input\n     */\n    id?: string;\n    /**\n     * Defines the input mode of the input\n     */\n    inputMode?: InputMode;\n    /**\n     * Disables the input so that it cannot be changed anymore\n     */\n    isDisabled?: boolean;\n    /**\n     * If true, the input field is marked as invalid\n     */\n    isInvalid?: boolean;\n    /**\n     * Function that is executed when the input field loses focus\n     */\n    onBlur?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the text of the input changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the input field is focused\n     */\n    onFocus?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when a letter is pressed\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string;\n    /**\n     * Element to be displayed next to or instead of the \"placeholder\"\n     */\n    placeholderElement?: ReactNode;\n    /**\n     * An element that should be displayed on the right side of the Input.\n     */\n    rightElement?: ReactElement;\n    /**\n     * Whether the placeholder should remain at its position if a value is typed.\n     */\n    shouldRemainPlaceholder?: boolean;\n    /**\n     * Whether the content should be displayed centered inside the input.\n     */\n    shouldShowCenteredContent?: boolean;\n    /**\n     * If true, a clear icon is displayed at the end of the input field\n     */\n    shouldShowClearIcon?: boolean;\n    /**\n     * Whether only the bottom border should be displayed\n     */\n    shouldShowOnlyBottomBorder?: boolean;\n    /**\n     * If true, the input field is focused when the component is mounted\n     */\n    shouldUseAutoFocus?: boolean;\n    /**\n     * Input type set for input element (e.g. 'text', 'number' or 'password')\n     */\n    type?: HTMLInputTypeAttribute;\n    /**\n     * Value if the input field should be controlled\n     */\n    value?: string;\n};\n\nconst Input = forwardRef<InputRef, InputProps>(\n    (\n        {\n            iconElement,\n            inputMode,\n            isDisabled,\n            onBlur,\n            onChange,\n            onFocus,\n            onKeyDown,\n            placeholder,\n            placeholderElement,\n            rightElement,\n            shouldShowOnlyBottomBorder,\n            shouldRemainPlaceholder = false,\n            shouldShowClearIcon = false,\n            shouldShowCenteredContent = false,\n            type = 'text',\n            value,\n            shouldUseAutoFocus = false,\n            isInvalid = false,\n            id,\n        },\n        ref,\n    ) => {\n        const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n        const [placeholderWidth, setPlaceholderWidth] = useState(0);\n\n        const areaProvider = useContext(AreaContext);\n\n        const theme = useTheme() as Theme;\n\n        const inputRef = useRef<HTMLInputElement>(null);\n        const placeholderRef = useRef<HTMLLabelElement>(null);\n\n        const placeholderSize = useElementSize(placeholderRef);\n\n        useEffect(() => {\n            if (placeholderSize && shouldShowOnlyBottomBorder) {\n                setPlaceholderWidth(placeholderSize.width + 5);\n            }\n        }, [placeholderSize, shouldShowOnlyBottomBorder]);\n\n        const shouldChangeColor = useMemo(\n            () => areaProvider.shouldChangeColor ?? false,\n            [areaProvider.shouldChangeColor],\n        );\n\n        const handleClearIconClick = useCallback(() => {\n            if (inputRef.current) {\n                inputRef.current.value = '';\n\n                setHasValue(false);\n\n                if (typeof onChange === 'function') {\n                    onChange({ target: inputRef.current } as ChangeEvent<HTMLInputElement>);\n                }\n            }\n        }, [onChange]);\n\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n        const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n        const handleInputFieldChange = useCallback(\n            (event: ChangeEvent<HTMLInputElement>) => {\n                setHasValue(event.target.value !== '');\n\n                if (typeof onChange === 'function') {\n                    onChange(event);\n                }\n            },\n            [onChange],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                focus: () => inputRef.current?.focus(),\n            }),\n            [],\n        );\n\n        useEffect(() => {\n            if (typeof value === 'string') {\n                setHasValue(value !== '');\n            }\n        }, [value]);\n\n        const labelPosition = useMemo(() => {\n            if (hasValue && !shouldRemainPlaceholder) {\n                return shouldShowOnlyBottomBorder\n                    ? { right: 3, top: -1.5 }\n                    : { bottom: -10, right: -6 };\n            }\n\n            return { left: -1 };\n        }, [hasValue, shouldRemainPlaceholder, shouldShowOnlyBottomBorder]);\n\n        return (\n            <StyledInput className=\"beta-chayns-input\" $isDisabled={isDisabled}>\n                <StyledInputContentWrapper\n                    $shouldChangeColor={shouldChangeColor}\n                    $isInvalid={isInvalid}\n                    $shouldRoundRightCorners={shouldShowBorder}\n                    $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                >\n                    {iconElement && <StyledInputIconWrapper>{iconElement}</StyledInputIconWrapper>}\n                    <StyledInputContent $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}>\n                        <StyledInputField\n                            $placeholderWidth={placeholderWidth}\n                            id={id}\n                            disabled={isDisabled}\n                            onBlur={onBlur}\n                            onChange={handleInputFieldChange}\n                            onFocus={onFocus}\n                            onKeyDown={onKeyDown}\n                            ref={inputRef}\n                            type={type}\n                            value={value}\n                            autoFocus={shouldUseAutoFocus}\n                            inputMode={inputMode}\n                            $isInvalid={isInvalid}\n                            $shouldShowCenteredContent={shouldShowCenteredContent}\n                        />\n                        <StyledMotionInputLabelWrapper\n                            animate={{\n                                fontSize:\n                                    hasValue &&\n                                    !shouldShowOnlyBottomBorder &&\n                                    !shouldRemainPlaceholder\n                                        ? '9px'\n                                        : '16px',\n                            }}\n                            initial={false}\n                            layout\n                            ref={placeholderRef}\n                            style={{ ...labelPosition }}\n                            transition={{ type: 'tween', duration: 0.1 }}\n                        >\n                            {placeholderElement}\n                            <StyledInputLabel $isInvalid={isInvalid}>\n                                {placeholder}\n                            </StyledInputLabel>\n                        </StyledMotionInputLabelWrapper>\n                    </StyledInputContent>\n                    {shouldShowClearIcon && (\n                        <StyledMotionInputClearIcon\n                            $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                            animate={{ opacity: hasValue ? 1 : 0 }}\n                            initial={false}\n                            onClick={handleClearIconClick}\n                            transition={{ type: 'tween' }}\n                        >\n                            <Icon\n                                icons={['fa fa-times']}\n                                color={isInvalid ? theme.wrong : undefined}\n                            />\n                        </StyledMotionInputClearIcon>\n                    )}\n                    {rightElement && shouldShowBorder && rightElement}\n                </StyledInputContentWrapper>\n                {rightElement && !shouldShowBorder && (\n                    <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n                )}\n            </StyledInput>\n        );\n    },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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","ignoreList":[]}

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

@@ -43,9 +43,9 @@ const SelectButton = ({
     list.forEach(({
       text,
       id
-    }, index) => {
+    }) => {
       if (selectedItemIds !== null && selectedItemIds !== void 0 && selectedItemIds.includes(id)) {
-        newText += index === 0 ? `${text}` : `, ${text}`;
+        newText += newText.length === 0 ? `${text}` : `, ${text}`;
       }
     });
     return newText;

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

@@ -1 +1 @@
-{"version":3,"file":"SelectButton.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_Button","_interopRequireDefault","_SelectButton","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","SelectButton","onSelect","selectedItemIds","shouldAllowMultiSelect","buttonText","shouldShowSearch","list","isDisabled","itemList","useMemo","items","forEach","text","id","isSelected","includes","push","name","selectedItemText","newText","index","handleClick","createDialog","type","DialogType","SELECT","multiselect","quickfind","open","then","result","buttonType","map","Number","createElement","StyledSelectButton","onClick","isSecondary","ShouldShowTextAsRobotoMedium","displayName","_default","exports"],"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\nconst SelectButton: FC<SelectButtonProps> = ({\n    onSelect,\n    selectedItemIds,\n    shouldAllowMultiSelect,\n    buttonText,\n    shouldShowSearch,\n    list,\n    isDisabled,\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) {\n            return null;\n        }\n\n        let newText = '';\n\n        list.forEach(({ text, id }, index) => {\n            if (selectedItemIds?.includes(id)) {\n                newText += index === 0 ? `${text}` : `, ${text}`;\n            }\n        });\n\n        return newText;\n    }, [list, selectedItemIds]);\n\n    const handleClick = () => {\n        void createDialog({\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":"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","ignoreList":[]}
+{"version":3,"file":"SelectButton.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_Button","_interopRequireDefault","_SelectButton","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","SelectButton","onSelect","selectedItemIds","shouldAllowMultiSelect","buttonText","shouldShowSearch","list","isDisabled","itemList","useMemo","items","forEach","text","id","isSelected","includes","push","name","selectedItemText","newText","length","handleClick","createDialog","type","DialogType","SELECT","multiselect","quickfind","open","then","result","buttonType","map","Number","createElement","StyledSelectButton","onClick","isSecondary","ShouldShowTextAsRobotoMedium","displayName","_default","exports"],"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\nconst SelectButton: FC<SelectButtonProps> = ({\n    onSelect,\n    selectedItemIds,\n    shouldAllowMultiSelect,\n    buttonText,\n    shouldShowSearch,\n    list,\n    isDisabled,\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) {\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            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":"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","ignoreList":[]}

package/lib/esm/components/input/Input.js

@@ -118,7 +118,7 @@ const Input = /*#__PURE__*/forwardRef((_ref, ref) => {
     },
     transition: {
       type: 'tween',
-      duration: 0.3
+      duration: 0.1
     }
   }, placeholderElement, /*#__PURE__*/React.createElement(StyledInputLabel, {
     $isInvalid: isInvalid

package/lib/esm/components/input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["React","forwardRef","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","useTheme","useElementSize","AreaContext","Icon","StyledInput","StyledInputContent","StyledInputContentWrapper","StyledInputField","StyledInputIconWrapper","StyledInputLabel","StyledInputRightElement","StyledMotionInputClearIcon","StyledMotionInputLabelWrapper","Input","_ref","ref","iconElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","placeholder","placeholderElement","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","type","value","shouldUseAutoFocus","isInvalid","id","hasValue","setHasValue","placeholderWidth","setPlaceholderWidth","areaProvider","theme","inputRef","placeholderRef","placeholderSize","width","shouldChangeColor","handleClearIconClick","current","target","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","event","focus","labelPosition","right","top","bottom","left","createElement","className","$isDisabled","$shouldChangeColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$placeholderWidth","disabled","autoFocus","$shouldShowCenteredContent","animate","fontSize","initial","layout","transition","duration","opacity","onClick","icons","color","wrong","displayName"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FocusEventHandler,\n    forwardRef,\n    HTMLInputTypeAttribute,\n    KeyboardEventHandler,\n    ReactNode,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n    type ReactElement,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n    StyledInput,\n    StyledInputContent,\n    StyledInputContentWrapper,\n    StyledInputField,\n    StyledInputIconWrapper,\n    StyledInputLabel,\n    StyledInputRightElement,\n    StyledMotionInputClearIcon,\n    StyledMotionInputLabelWrapper,\n} from './Input.styles';\n\nexport type InputRef = {\n    focus: VoidFunction;\n};\n\ntype InputMode =\n    | 'email'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'url'\n    | 'none'\n    | 'numeric'\n    | 'decimal'\n    | undefined;\n\nexport type InputProps = {\n    /**\n     * Icon element to be displayed on the left side of the input field\n     */\n    iconElement?: ReactNode;\n    /**\n     * The id of the input\n     */\n    id?: string;\n    /**\n     * Defines the input mode of the input\n     */\n    inputMode?: InputMode;\n    /**\n     * Disables the input so that it cannot be changed anymore\n     */\n    isDisabled?: boolean;\n    /**\n     * If true, the input field is marked as invalid\n     */\n    isInvalid?: boolean;\n    /**\n     * Function that is executed when the input field loses focus\n     */\n    onBlur?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the text of the input changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the input field is focused\n     */\n    onFocus?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when a letter is pressed\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string;\n    /**\n     * Element to be displayed next to or instead of the \"placeholder\"\n     */\n    placeholderElement?: ReactNode;\n    /**\n     * An element that should be displayed on the right side of the Input.\n     */\n    rightElement?: ReactElement;\n    /**\n     * Whether the placeholder should remain at its position if a value is typed.\n     */\n    shouldRemainPlaceholder?: boolean;\n    /**\n     * Whether the content should be displayed centered inside the input.\n     */\n    shouldShowCenteredContent?: boolean;\n    /**\n     * If true, a clear icon is displayed at the end of the input field\n     */\n    shouldShowClearIcon?: boolean;\n    /**\n     * Whether only the bottom border should be displayed\n     */\n    shouldShowOnlyBottomBorder?: boolean;\n    /**\n     * If true, the input field is focused when the component is mounted\n     */\n    shouldUseAutoFocus?: boolean;\n    /**\n     * Input type set for input element (e.g. 'text', 'number' or 'password')\n     */\n    type?: HTMLInputTypeAttribute;\n    /**\n     * Value if the input field should be controlled\n     */\n    value?: string;\n};\n\nconst Input = forwardRef<InputRef, InputProps>(\n    (\n        {\n            iconElement,\n            inputMode,\n            isDisabled,\n            onBlur,\n            onChange,\n            onFocus,\n            onKeyDown,\n            placeholder,\n            placeholderElement,\n            rightElement,\n            shouldShowOnlyBottomBorder,\n            shouldRemainPlaceholder = false,\n            shouldShowClearIcon = false,\n            shouldShowCenteredContent = false,\n            type = 'text',\n            value,\n            shouldUseAutoFocus = false,\n            isInvalid = false,\n            id,\n        },\n        ref,\n    ) => {\n        const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n        const [placeholderWidth, setPlaceholderWidth] = useState(0);\n\n        const areaProvider = useContext(AreaContext);\n\n        const theme = useTheme() as Theme;\n\n        const inputRef = useRef<HTMLInputElement>(null);\n        const placeholderRef = useRef<HTMLLabelElement>(null);\n\n        const placeholderSize = useElementSize(placeholderRef);\n\n        useEffect(() => {\n            if (placeholderSize && shouldShowOnlyBottomBorder) {\n                setPlaceholderWidth(placeholderSize.width + 5);\n            }\n        }, [placeholderSize, shouldShowOnlyBottomBorder]);\n\n        const shouldChangeColor = useMemo(\n            () => areaProvider.shouldChangeColor ?? false,\n            [areaProvider.shouldChangeColor],\n        );\n\n        const handleClearIconClick = useCallback(() => {\n            if (inputRef.current) {\n                inputRef.current.value = '';\n\n                setHasValue(false);\n\n                if (typeof onChange === 'function') {\n                    onChange({ target: inputRef.current } as ChangeEvent<HTMLInputElement>);\n                }\n            }\n        }, [onChange]);\n\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n        const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n        const handleInputFieldChange = useCallback(\n            (event: ChangeEvent<HTMLInputElement>) => {\n                setHasValue(event.target.value !== '');\n\n                if (typeof onChange === 'function') {\n                    onChange(event);\n                }\n            },\n            [onChange],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                focus: () => inputRef.current?.focus(),\n            }),\n            [],\n        );\n\n        useEffect(() => {\n            if (typeof value === 'string') {\n                setHasValue(value !== '');\n            }\n        }, [value]);\n\n        const labelPosition = useMemo(() => {\n            if (hasValue && !shouldRemainPlaceholder) {\n                return shouldShowOnlyBottomBorder\n                    ? { right: 3, top: -1.5 }\n                    : { bottom: -10, right: -6 };\n            }\n\n            return { left: -1 };\n        }, [hasValue, shouldRemainPlaceholder, shouldShowOnlyBottomBorder]);\n\n        return (\n            <StyledInput className=\"beta-chayns-input\" $isDisabled={isDisabled}>\n                <StyledInputContentWrapper\n                    $shouldChangeColor={shouldChangeColor}\n                    $isInvalid={isInvalid}\n                    $shouldRoundRightCorners={shouldShowBorder}\n                    $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                >\n                    {iconElement && <StyledInputIconWrapper>{iconElement}</StyledInputIconWrapper>}\n                    <StyledInputContent $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}>\n                        <StyledInputField\n                            $placeholderWidth={placeholderWidth}\n                            id={id}\n                            disabled={isDisabled}\n                            onBlur={onBlur}\n                            onChange={handleInputFieldChange}\n                            onFocus={onFocus}\n                            onKeyDown={onKeyDown}\n                            ref={inputRef}\n                            type={type}\n                            value={value}\n                            autoFocus={shouldUseAutoFocus}\n                            inputMode={inputMode}\n                            $isInvalid={isInvalid}\n                            $shouldShowCenteredContent={shouldShowCenteredContent}\n                        />\n                        <StyledMotionInputLabelWrapper\n                            animate={{\n                                fontSize:\n                                    hasValue &&\n                                    !shouldShowOnlyBottomBorder &&\n                                    !shouldRemainPlaceholder\n                                        ? '9px'\n                                        : '16px',\n                            }}\n                            initial={false}\n                            layout\n                            ref={placeholderRef}\n                            style={{ ...labelPosition }}\n                            transition={{ type: 'tween', duration: 0.3 }}\n                        >\n                            {placeholderElement}\n                            <StyledInputLabel $isInvalid={isInvalid}>\n                                {placeholder}\n                            </StyledInputLabel>\n                        </StyledMotionInputLabelWrapper>\n                    </StyledInputContent>\n                    {shouldShowClearIcon && (\n                        <StyledMotionInputClearIcon\n                            $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                            animate={{ opacity: hasValue ? 1 : 0 }}\n                            initial={false}\n                            onClick={handleClearIconClick}\n                            transition={{ type: 'tween' }}\n                        >\n                            <Icon\n                                icons={['fa fa-times']}\n                                color={isInvalid ? theme.wrong : undefined}\n                            />\n                        </StyledMotionInputClearIcon>\n                    )}\n                    {rightElement && shouldShowBorder && rightElement}\n                </StyledInputContentWrapper>\n                {rightElement && !shouldShowBorder && (\n                    <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n                )}\n            </StyledInput>\n        );\n    },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"AAAA,OAAOA,KAAK,IAIRC,UAAU,EAIVC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,mBAAmB,EACnBC,OAAO,EACPC,MAAM,EACNC,QAAQ,QAEL,OAAO;AACd,SAASC,QAAQ,QAAQ,mBAAmB;AAC5C,SAASC,cAAc,QAAQ,4BAA4B;AAC3D,SAASC,WAAW,QAAQ,sCAAsC;AAElE,OAAOC,IAAI,MAAM,cAAc;AAC/B,SACIC,WAAW,EACXC,kBAAkB,EAClBC,yBAAyB,EACzBC,gBAAgB,EAChBC,sBAAsB,EACtBC,gBAAgB,EAChBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,6BAA6B,QAC1B,gBAAgB;AAgGvB,MAAMC,KAAK,gBAAGrB,UAAU,CACpB,CAAAsB,IAAA,EAsBIC,GAAG,KACF;EAAA,IAtBD;IACIC,WAAW;IACXC,SAAS;IACTC,UAAU;IACVC,MAAM;IACNC,QAAQ;IACRC,OAAO;IACPC,SAAS;IACTC,WAAW;IACXC,kBAAkB;IAClBC,YAAY;IACZC,0BAA0B;IAC1BC,uBAAuB,GAAG,KAAK;IAC/BC,mBAAmB,GAAG,KAAK;IAC3BC,yBAAyB,GAAG,KAAK;IACjCC,IAAI,GAAG,MAAM;IACbC,KAAK;IACLC,kBAAkB,GAAG,KAAK;IAC1BC,SAAS,GAAG,KAAK;IACjBC;EACJ,CAAC,GAAApB,IAAA;EAGD,MAAM,CAACqB,QAAQ,EAAEC,WAAW,CAAC,GAAGrC,QAAQ,CAAC,OAAOgC,KAAK,KAAK,QAAQ,IAAIA,KAAK,KAAK,EAAE,CAAC;EACnF,MAAM,CAACM,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGvC,QAAQ,CAAC,CAAC,CAAC;EAE3D,MAAMwC,YAAY,GAAG7C,UAAU,CAACQ,WAAW,CAAC;EAE5C,MAAMsC,KAAK,GAAGxC,QAAQ,CAAC,CAAU;EAEjC,MAAMyC,QAAQ,GAAG3C,MAAM,CAAmB,IAAI,CAAC;EAC/C,MAAM4C,cAAc,GAAG5C,MAAM,CAAmB,IAAI,CAAC;EAErD,MAAM6C,eAAe,GAAG1C,cAAc,CAACyC,cAAc,CAAC;EAEtD/C,SAAS,CAAC,MAAM;IACZ,IAAIgD,eAAe,IAAIjB,0BAA0B,EAAE;MAC/CY,mBAAmB,CAACK,eAAe,CAACC,KAAK,GAAG,CAAC,CAAC;IAClD;EACJ,CAAC,EAAE,CAACD,eAAe,EAAEjB,0BAA0B,CAAC,CAAC;EAEjD,MAAMmB,iBAAiB,GAAGhD,OAAO,CAC7B,MAAM0C,YAAY,CAACM,iBAAiB,IAAI,KAAK,EAC7C,CAACN,YAAY,CAACM,iBAAiB,CACnC,CAAC;EAED,MAAMC,oBAAoB,GAAGrD,WAAW,CAAC,MAAM;IAC3C,IAAIgD,QAAQ,CAACM,OAAO,EAAE;MAClBN,QAAQ,CAACM,OAAO,CAAChB,KAAK,GAAG,EAAE;MAE3BK,WAAW,CAAC,KAAK,CAAC;MAElB,IAAI,OAAOhB,QAAQ,KAAK,UAAU,EAAE;QAChCA,QAAQ,CAAC;UAAE4B,MAAM,EAAEP,QAAQ,CAACM;QAAQ,CAAkC,CAAC;MAC3E;IACJ;EACJ,CAAC,EAAE,CAAC3B,QAAQ,CAAC,CAAC;;EAEd;EACA,MAAM6B,gBAAgB,GAAGxB,YAAY,EAAEyB,KAAK,EAAEC,KAAK,EAAEC,eAAe,KAAKC,SAAS;EAElF,MAAMC,sBAAsB,GAAG7D,WAAW,CACrC8D,KAAoC,IAAK;IACtCnB,WAAW,CAACmB,KAAK,CAACP,MAAM,CAACjB,KAAK,KAAK,EAAE,CAAC;IAEtC,IAAI,OAAOX,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACmC,KAAK,CAAC;IACnB;EACJ,CAAC,EACD,CAACnC,QAAQ,CACb,CAAC;EAEDxB,mBAAmB,CACfmB,GAAG,EACH,OAAO;IACHyC,KAAK,EAAEA,CAAA,KAAMf,QAAQ,CAACM,OAAO,EAAES,KAAK,CAAC;EACzC,CAAC,CAAC,EACF,EACJ,CAAC;EAED7D,SAAS,CAAC,MAAM;IACZ,IAAI,OAAOoC,KAAK,KAAK,QAAQ,EAAE;MAC3BK,WAAW,CAACL,KAAK,KAAK,EAAE,CAAC;IAC7B;EACJ,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEX,MAAM0B,aAAa,GAAG5D,OAAO,CAAC,MAAM;IAChC,IAAIsC,QAAQ,IAAI,CAACR,uBAAuB,EAAE;MACtC,OAAOD,0BAA0B,GAC3B;QAAEgC,KAAK,EAAE,CAAC;QAAEC,GAAG,EAAE,CAAC;MAAI,CAAC,GACvB;QAAEC,MAAM,EAAE,CAAC,EAAE;QAAEF,KAAK,EAAE,CAAC;MAAE,CAAC;IACpC;IAEA,OAAO;MAAEG,IAAI,EAAE,CAAC;IAAE,CAAC;EACvB,CAAC,EAAE,CAAC1B,QAAQ,EAAER,uBAAuB,EAAED,0BAA0B,CAAC,CAAC;EAEnE,oBACInC,KAAA,CAAAuE,aAAA,CAAC1D,WAAW;IAAC2D,SAAS,EAAC,mBAAmB;IAACC,WAAW,EAAE9C;EAAW,gBAC/D3B,KAAA,CAAAuE,aAAA,CAACxD,yBAAyB;IACtB2D,kBAAkB,EAAEpB,iBAAkB;IACtCqB,UAAU,EAAEjC,SAAU;IACtBkC,wBAAwB,EAAElB,gBAAiB;IAC3CmB,2BAA2B,EAAE1C;EAA2B,GAEvDV,WAAW,iBAAIzB,KAAA,CAAAuE,aAAA,CAACtD,sBAAsB,QAAEQ,WAAoC,CAAC,eAC9EzB,KAAA,CAAAuE,aAAA,CAACzD,kBAAkB;IAAC+D,2BAA2B,EAAE1C;EAA2B,gBACxEnC,KAAA,CAAAuE,aAAA,CAACvD,gBAAgB;IACb8D,iBAAiB,EAAEhC,gBAAiB;IACpCH,EAAE,EAAEA,EAAG;IACPoC,QAAQ,EAAEpD,UAAW;IACrBC,MAAM,EAAEA,MAAO;IACfC,QAAQ,EAAEkC,sBAAuB;IACjCjC,OAAO,EAAEA,OAAQ;IACjBC,SAAS,EAAEA,SAAU;IACrBP,GAAG,EAAE0B,QAAS;IACdX,IAAI,EAAEA,IAAK;IACXC,KAAK,EAAEA,KAAM;IACbwC,SAAS,EAAEvC,kBAAmB;IAC9Bf,SAAS,EAAEA,SAAU;IACrBiD,UAAU,EAAEjC,SAAU;IACtBuC,0BAA0B,EAAE3C;EAA0B,CACzD,CAAC,eACFtC,KAAA,CAAAuE,aAAA,CAAClD,6BAA6B;IAC1B6D,OAAO,EAAE;MACLC,QAAQ,EACJvC,QAAQ,IACR,CAACT,0BAA0B,IAC3B,CAACC,uBAAuB,GAClB,KAAK,GACL;IACd,CAAE;IACFgD,OAAO,EAAE,KAAM;IACfC,MAAM;IACN7D,GAAG,EAAE2B,cAAe;IACpBS,KAAK,EAAE;MAAE,GAAGM;IAAc,CAAE;IAC5BoB,UAAU,EAAE;MAAE/C,IAAI,EAAE,OAAO;MAAEgD,QAAQ,EAAE;IAAI;EAAE,GAE5CtD,kBAAkB,eACnBjC,KAAA,CAAAuE,aAAA,CAACrD,gBAAgB;IAACyD,UAAU,EAAEjC;EAAU,GACnCV,WACa,CACS,CACf,CAAC,EACpBK,mBAAmB,iBAChBrC,KAAA,CAAAuE,aAAA,CAACnD,0BAA0B;IACvByD,2BAA2B,EAAE1C,0BAA2B;IACxD+C,OAAO,EAAE;MAAEM,OAAO,EAAE5C,QAAQ,GAAG,CAAC,GAAG;IAAE,CAAE;IACvCwC,OAAO,EAAE,KAAM;IACfK,OAAO,EAAElC,oBAAqB;IAC9B+B,UAAU,EAAE;MAAE/C,IAAI,EAAE;IAAQ;EAAE,gBAE9BvC,KAAA,CAAAuE,aAAA,CAAC3D,IAAI;IACD8E,KAAK,EAAE,CAAC,aAAa,CAAE;IACvBC,KAAK,EAAEjD,SAAS,GAAGO,KAAK,CAAC2C,KAAK,GAAG9B;EAAU,CAC9C,CACuB,CAC/B,EACA5B,YAAY,IAAIwB,gBAAgB,IAAIxB,YACd,CAAC,EAC3BA,YAAY,IAAI,CAACwB,gBAAgB,iBAC9B1D,KAAA,CAAAuE,aAAA,CAACpD,uBAAuB,QAAEe,YAAsC,CAE3D,CAAC;AAEtB,CACJ,CAAC;AAEDZ,KAAK,CAACuE,WAAW,GAAG,OAAO;AAE3B,eAAevE,KAAK","ignoreList":[]}
+{"version":3,"file":"Input.js","names":["React","forwardRef","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","useTheme","useElementSize","AreaContext","Icon","StyledInput","StyledInputContent","StyledInputContentWrapper","StyledInputField","StyledInputIconWrapper","StyledInputLabel","StyledInputRightElement","StyledMotionInputClearIcon","StyledMotionInputLabelWrapper","Input","_ref","ref","iconElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","placeholder","placeholderElement","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","type","value","shouldUseAutoFocus","isInvalid","id","hasValue","setHasValue","placeholderWidth","setPlaceholderWidth","areaProvider","theme","inputRef","placeholderRef","placeholderSize","width","shouldChangeColor","handleClearIconClick","current","target","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","event","focus","labelPosition","right","top","bottom","left","createElement","className","$isDisabled","$shouldChangeColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$placeholderWidth","disabled","autoFocus","$shouldShowCenteredContent","animate","fontSize","initial","layout","transition","duration","opacity","onClick","icons","color","wrong","displayName"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FocusEventHandler,\n    forwardRef,\n    HTMLInputTypeAttribute,\n    KeyboardEventHandler,\n    ReactNode,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n    type ReactElement,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n    StyledInput,\n    StyledInputContent,\n    StyledInputContentWrapper,\n    StyledInputField,\n    StyledInputIconWrapper,\n    StyledInputLabel,\n    StyledInputRightElement,\n    StyledMotionInputClearIcon,\n    StyledMotionInputLabelWrapper,\n} from './Input.styles';\n\nexport type InputRef = {\n    focus: VoidFunction;\n};\n\ntype InputMode =\n    | 'email'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'url'\n    | 'none'\n    | 'numeric'\n    | 'decimal'\n    | undefined;\n\nexport type InputProps = {\n    /**\n     * Icon element to be displayed on the left side of the input field\n     */\n    iconElement?: ReactNode;\n    /**\n     * The id of the input\n     */\n    id?: string;\n    /**\n     * Defines the input mode of the input\n     */\n    inputMode?: InputMode;\n    /**\n     * Disables the input so that it cannot be changed anymore\n     */\n    isDisabled?: boolean;\n    /**\n     * If true, the input field is marked as invalid\n     */\n    isInvalid?: boolean;\n    /**\n     * Function that is executed when the input field loses focus\n     */\n    onBlur?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the text of the input changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the input field is focused\n     */\n    onFocus?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when a letter is pressed\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string;\n    /**\n     * Element to be displayed next to or instead of the \"placeholder\"\n     */\n    placeholderElement?: ReactNode;\n    /**\n     * An element that should be displayed on the right side of the Input.\n     */\n    rightElement?: ReactElement;\n    /**\n     * Whether the placeholder should remain at its position if a value is typed.\n     */\n    shouldRemainPlaceholder?: boolean;\n    /**\n     * Whether the content should be displayed centered inside the input.\n     */\n    shouldShowCenteredContent?: boolean;\n    /**\n     * If true, a clear icon is displayed at the end of the input field\n     */\n    shouldShowClearIcon?: boolean;\n    /**\n     * Whether only the bottom border should be displayed\n     */\n    shouldShowOnlyBottomBorder?: boolean;\n    /**\n     * If true, the input field is focused when the component is mounted\n     */\n    shouldUseAutoFocus?: boolean;\n    /**\n     * Input type set for input element (e.g. 'text', 'number' or 'password')\n     */\n    type?: HTMLInputTypeAttribute;\n    /**\n     * Value if the input field should be controlled\n     */\n    value?: string;\n};\n\nconst Input = forwardRef<InputRef, InputProps>(\n    (\n        {\n            iconElement,\n            inputMode,\n            isDisabled,\n            onBlur,\n            onChange,\n            onFocus,\n            onKeyDown,\n            placeholder,\n            placeholderElement,\n            rightElement,\n            shouldShowOnlyBottomBorder,\n            shouldRemainPlaceholder = false,\n            shouldShowClearIcon = false,\n            shouldShowCenteredContent = false,\n            type = 'text',\n            value,\n            shouldUseAutoFocus = false,\n            isInvalid = false,\n            id,\n        },\n        ref,\n    ) => {\n        const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n        const [placeholderWidth, setPlaceholderWidth] = useState(0);\n\n        const areaProvider = useContext(AreaContext);\n\n        const theme = useTheme() as Theme;\n\n        const inputRef = useRef<HTMLInputElement>(null);\n        const placeholderRef = useRef<HTMLLabelElement>(null);\n\n        const placeholderSize = useElementSize(placeholderRef);\n\n        useEffect(() => {\n            if (placeholderSize && shouldShowOnlyBottomBorder) {\n                setPlaceholderWidth(placeholderSize.width + 5);\n            }\n        }, [placeholderSize, shouldShowOnlyBottomBorder]);\n\n        const shouldChangeColor = useMemo(\n            () => areaProvider.shouldChangeColor ?? false,\n            [areaProvider.shouldChangeColor],\n        );\n\n        const handleClearIconClick = useCallback(() => {\n            if (inputRef.current) {\n                inputRef.current.value = '';\n\n                setHasValue(false);\n\n                if (typeof onChange === 'function') {\n                    onChange({ target: inputRef.current } as ChangeEvent<HTMLInputElement>);\n                }\n            }\n        }, [onChange]);\n\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n        const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n        const handleInputFieldChange = useCallback(\n            (event: ChangeEvent<HTMLInputElement>) => {\n                setHasValue(event.target.value !== '');\n\n                if (typeof onChange === 'function') {\n                    onChange(event);\n                }\n            },\n            [onChange],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                focus: () => inputRef.current?.focus(),\n            }),\n            [],\n        );\n\n        useEffect(() => {\n            if (typeof value === 'string') {\n                setHasValue(value !== '');\n            }\n        }, [value]);\n\n        const labelPosition = useMemo(() => {\n            if (hasValue && !shouldRemainPlaceholder) {\n                return shouldShowOnlyBottomBorder\n                    ? { right: 3, top: -1.5 }\n                    : { bottom: -10, right: -6 };\n            }\n\n            return { left: -1 };\n        }, [hasValue, shouldRemainPlaceholder, shouldShowOnlyBottomBorder]);\n\n        return (\n            <StyledInput className=\"beta-chayns-input\" $isDisabled={isDisabled}>\n                <StyledInputContentWrapper\n                    $shouldChangeColor={shouldChangeColor}\n                    $isInvalid={isInvalid}\n                    $shouldRoundRightCorners={shouldShowBorder}\n                    $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                >\n                    {iconElement && <StyledInputIconWrapper>{iconElement}</StyledInputIconWrapper>}\n                    <StyledInputContent $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}>\n                        <StyledInputField\n                            $placeholderWidth={placeholderWidth}\n                            id={id}\n                            disabled={isDisabled}\n                            onBlur={onBlur}\n                            onChange={handleInputFieldChange}\n                            onFocus={onFocus}\n                            onKeyDown={onKeyDown}\n                            ref={inputRef}\n                            type={type}\n                            value={value}\n                            autoFocus={shouldUseAutoFocus}\n                            inputMode={inputMode}\n                            $isInvalid={isInvalid}\n                            $shouldShowCenteredContent={shouldShowCenteredContent}\n                        />\n                        <StyledMotionInputLabelWrapper\n                            animate={{\n                                fontSize:\n                                    hasValue &&\n                                    !shouldShowOnlyBottomBorder &&\n                                    !shouldRemainPlaceholder\n                                        ? '9px'\n                                        : '16px',\n                            }}\n                            initial={false}\n                            layout\n                            ref={placeholderRef}\n                            style={{ ...labelPosition }}\n                            transition={{ type: 'tween', duration: 0.1 }}\n                        >\n                            {placeholderElement}\n                            <StyledInputLabel $isInvalid={isInvalid}>\n                                {placeholder}\n                            </StyledInputLabel>\n                        </StyledMotionInputLabelWrapper>\n                    </StyledInputContent>\n                    {shouldShowClearIcon && (\n                        <StyledMotionInputClearIcon\n                            $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                            animate={{ opacity: hasValue ? 1 : 0 }}\n                            initial={false}\n                            onClick={handleClearIconClick}\n                            transition={{ type: 'tween' }}\n                        >\n                            <Icon\n                                icons={['fa fa-times']}\n                                color={isInvalid ? theme.wrong : undefined}\n                            />\n                        </StyledMotionInputClearIcon>\n                    )}\n                    {rightElement && shouldShowBorder && rightElement}\n                </StyledInputContentWrapper>\n                {rightElement && !shouldShowBorder && (\n                    <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n                )}\n            </StyledInput>\n        );\n    },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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","ignoreList":[]}

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

@@ -33,13 +33,13 @@ const SelectButton = _ref => {
       return null;
     }
     let newText = '';
-    list.forEach((_ref3, index) => {
+    list.forEach(_ref3 => {
       let {
         text,
         id
       } = _ref3;
       if (selectedItemIds?.includes(id)) {
-        newText += index === 0 ? `${text}` : `, ${text}`;
+        newText += newText.length === 0 ? `${text}` : `, ${text}`;
       }
     });
     return newText;

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","itemList","items","forEach","_ref2","text","id","isSelected","includes","push","name","selectedItemText","newText","_ref3","index","handleClick","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\nconst SelectButton: FC<SelectButtonProps> = ({\n    onSelect,\n    selectedItemIds,\n    shouldAllowMultiSelect,\n    buttonText,\n    shouldShowSearch,\n    list,\n    isDisabled,\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) {\n            return null;\n        }\n\n        let newText = '';\n\n        list.forEach(({ text, id }, index) => {\n            if (selectedItemIds?.includes(id)) {\n                newText += index === 0 ? `${text}` : `, ${text}`;\n            }\n        });\n\n        return newText;\n    }, [list, selectedItemIds]);\n\n    const handleClick = () => {\n        void createDialog({\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;AAiC1D,MAAMC,YAAmC,GAAGC,IAAA,IAQtC;EAAA,IARuC;IACzCC,QAAQ;IACRC,eAAe;IACfC,sBAAsB;IACtBC,UAAU;IACVC,gBAAgB;IAChBC,IAAI;IACJC;EACJ,CAAC,GAAAP,IAAA;EACG,MAAMQ,QAAQ,GAAGZ,OAAO,CAAC,MAAM;IAC3B,MAAMa,KAAiC,GAAG,EAAE;IAE5CH,IAAI,CAACI,OAAO,CAACC,KAAA,IAAkB;MAAA,IAAjB;QAAEC,IAAI;QAAEC;MAAG,CAAC,GAAAF,KAAA;MACtB,MAAMG,UAAU,GAAGZ,eAAe,GAAGA,eAAe,CAACa,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,CAACH,IAAI,EAAEJ,eAAe,CAAC,CAAC;EAE3B,MAAMgB,gBAAgB,GAAGtB,OAAO,CAAC,MAAM;IACnC,IAAI,CAACM,eAAe,EAAE;MAClB,OAAO,IAAI;IACf;IAEA,IAAIiB,OAAO,GAAG,EAAE;IAEhBb,IAAI,CAACI,OAAO,CAAC,CAAAU,KAAA,EAAeC,KAAK,KAAK;MAAA,IAAxB;QAAET,IAAI;QAAEC;MAAG,CAAC,GAAAO,KAAA;MACtB,IAAIlB,eAAe,EAAEa,QAAQ,CAACF,EAAE,CAAC,EAAE;QAC/BM,OAAO,IAAIE,KAAK,KAAK,CAAC,GAAI,GAAET,IAAK,EAAC,GAAI,KAAIA,IAAK,EAAC;MACpD;IACJ,CAAC,CAAC;IAEF,OAAOO,OAAO;EAClB,CAAC,EAAE,CAACb,IAAI,EAAEJ,eAAe,CAAC,CAAC;EAE3B,MAAMoB,WAAW,GAAGA,CAAA,KAAM;IACtB,KAAK7B,YAAY,CAAC;MACd8B,IAAI,EAAE7B,UAAU,CAAC8B,MAAM;MACvBlB,IAAI,EAAEE,QAAQ;MACdiB,WAAW,EAAEtB,sBAAsB;MACnCuB,SAAS,EAAErB;IACf,CAAC,CAAC,CACGsB,IAAI,CAAC,CAAC,CACNC,IAAI,CAAEC,MAAM,IAAK;MACd;MACA;MACA;MACA,IAAIA,MAAM,IAAIA,MAAM,CAACC,UAAU,KAAK,CAAC,IAAI,OAAO7B,QAAQ,KAAK,UAAU,EAAE;QACrE;QACA;QACA;QACAA,QAAQ,CAAE4B,MAAM,CAACA,MAAM,CAAcE,GAAG,CAACC,MAAM,CAAC,CAAC;MACrD;IACJ,CAAC,CAAC;EACV,CAAC;EAED,oBACIrC,KAAA,CAAAsC,aAAA,CAACnC,kBAAkB,qBACfH,KAAA,CAAAsC,aAAA,CAACpC,MAAM;IACHqC,OAAO,EAAEZ,WAAY;IACrBf,UAAU,EAAEA,UAAW;IACvB4B,WAAW;IACXC,4BAA4B,EAAE;EAAM,GAEnClB,gBAAgB,IAAId,UACjB,CACQ,CAAC;AAE7B,CAAC;AAEDL,YAAY,CAACsC,WAAW,GAAG,cAAc;AAEzC,eAAetC,YAAY","ignoreList":[]}
+{"version":3,"file":"SelectButton.js","names":["createDialog","DialogType","React","useMemo","Button","StyledSelectButton","SelectButton","_ref","onSelect","selectedItemIds","shouldAllowMultiSelect","buttonText","shouldShowSearch","list","isDisabled","itemList","items","forEach","_ref2","text","id","isSelected","includes","push","name","selectedItemText","newText","_ref3","length","handleClick","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\nconst SelectButton: FC<SelectButtonProps> = ({\n    onSelect,\n    selectedItemIds,\n    shouldAllowMultiSelect,\n    buttonText,\n    shouldShowSearch,\n    list,\n    isDisabled,\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) {\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            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;AAiC1D,MAAMC,YAAmC,GAAGC,IAAA,IAQtC;EAAA,IARuC;IACzCC,QAAQ;IACRC,eAAe;IACfC,sBAAsB;IACtBC,UAAU;IACVC,gBAAgB;IAChBC,IAAI;IACJC;EACJ,CAAC,GAAAP,IAAA;EACG,MAAMQ,QAAQ,GAAGZ,OAAO,CAAC,MAAM;IAC3B,MAAMa,KAAiC,GAAG,EAAE;IAE5CH,IAAI,CAACI,OAAO,CAACC,KAAA,IAAkB;MAAA,IAAjB;QAAEC,IAAI;QAAEC;MAAG,CAAC,GAAAF,KAAA;MACtB,MAAMG,UAAU,GAAGZ,eAAe,GAAGA,eAAe,CAACa,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,CAACH,IAAI,EAAEJ,eAAe,CAAC,CAAC;EAE3B,MAAMgB,gBAAgB,GAAGtB,OAAO,CAAC,MAAM;IACnC,IAAI,CAACM,eAAe,EAAE;MAClB,OAAO,IAAI;IACf;IAEA,IAAIiB,OAAO,GAAG,EAAE;IAEhBb,IAAI,CAACI,OAAO,CAACU,KAAA,IAAkB;MAAA,IAAjB;QAAER,IAAI;QAAEC;MAAG,CAAC,GAAAO,KAAA;MACtB,IAAIlB,eAAe,EAAEa,QAAQ,CAACF,EAAE,CAAC,EAAE;QAC/BM,OAAO,IAAIA,OAAO,CAACE,MAAM,KAAK,CAAC,GAAI,GAAET,IAAK,EAAC,GAAI,KAAIA,IAAK,EAAC;MAC7D;IACJ,CAAC,CAAC;IAEF,OAAOO,OAAO;EAClB,CAAC,EAAE,CAACb,IAAI,EAAEJ,eAAe,CAAC,CAAC;EAE3B,MAAMoB,WAAW,GAAGA,CAAA,KAAM;IACtB,KAAK7B,YAAY,CAAC;MACd8B,IAAI,EAAE7B,UAAU,CAAC8B,MAAM;MACvBlB,IAAI,EAAEE,QAAQ;MACdiB,WAAW,EAAEtB,sBAAsB;MACnCuB,SAAS,EAAErB;IACf,CAAC,CAAC,CACGsB,IAAI,CAAC,CAAC,CACNC,IAAI,CAAEC,MAAM,IAAK;MACd;MACA;MACA;MACA,IAAIA,MAAM,IAAIA,MAAM,CAACC,UAAU,KAAK,CAAC,IAAI,OAAO7B,QAAQ,KAAK,UAAU,EAAE;QACrE;QACA;QACA;QACAA,QAAQ,CAAE4B,MAAM,CAACA,MAAM,CAAcE,GAAG,CAACC,MAAM,CAAC,CAAC;MACrD;IACJ,CAAC,CAAC;EACV,CAAC;EAED,oBACIrC,KAAA,CAAAsC,aAAA,CAACnC,kBAAkB,qBACfH,KAAA,CAAAsC,aAAA,CAACpC,MAAM;IACHqC,OAAO,EAAEZ,WAAY;IACrBf,UAAU,EAAEA,UAAW;IACvB4B,WAAW;IACXC,4BAA4B,EAAE;EAAM,GAEnClB,gBAAgB,IAAId,UACjB,CACQ,CAAC;AAE7B,CAAC;AAEDL,YAAY,CAACsC,WAAW,GAAG,cAAc;AAEzC,eAAetC,YAAY","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.599",
+    "version": "5.0.0-beta.600",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -83,5 +83,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "fc17cd029f3fe79254051804cbe28d70edb1537e"
+    "gitHead": "6db518931ff089d6477c17e2532c5d7fc9c80f44"
 }