@rio-cloud/rio-uikit 2.5.0-beta.1 → 2.5.0

package/components/selects/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../src/components/selects/Select.tsx"],"sourcesContent":["import type React from 'react';\nimport { useRef, useState } from 'react';\nimport { isEqual } from 'es-toolkit/predicate';\nimport { isEmpty, noop } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport BaseSelectDropdown, { filterOptions, type OptionDOMValue, type SelectOption } from './BaseSelectDropdown';\nimport useClickOutside from '../../useClickOutside';\nimport useEffectOnce from '../../hooks/useEffectOnce';\nimport useMergeRefs from '../../hooks/useMergeRefs';\nimport ClearButton from './ClearButton';\nimport SelectFilter from './SelectFilter';\nimport SelectedOption from './SelectedOption';\nimport WithFeedbackAndAddon, { type WithFeedbackAndAddonProps } from './WithFeedbackAndAddon';\n\nexport type { SelectOption } from './BaseSelectDropdown';\n\nconst DEFAULT_FOCUSED_ITEM_INDEX = -1;\n\n/**\n * Note: Even with a pre-selected item, when it first opens the dropdown it renders the full options list,\n * not just the selected one. The filter is only usable while the dropdown is open.\n */\nexport type SelectProps<T extends SelectOption> = Omit<WithFeedbackAndAddonProps, 'bsSize'> & {\n    /**\n     * Passed through as HTML attribute to the toggle button.\n     */\n    name?: string;\n\n    /**\n     * Passed through as HTML attribute to the toggle button.\n     *\n     * @default Uses the value given to `name` if not provided explicitly.\n     */\n    id?: string;\n\n    /**\n     * The toggle label in front of the selected text.\n     */\n    label?: string | React.ReactNode;\n\n    /**\n     * Items to display in the dropdown menu.\n     *\n     * @default []\n     */\n    options?: T[];\n\n    /**\n     * Sets the ids of the selected options when the component is already mounted.\n     */\n    value?: string[];\n\n    /**\n     * Callback function triggered when an item is selected.\n     *\n     * @param selectedOption The option that was selected (or undefined if none was).\n     *\n     * @default () => {}\n     */\n    onChange?: (selectOption: T | undefined) => void;\n\n    /**\n     * Text to display when nothing is selected.\n     */\n    placeholder?: string | React.ReactNode;\n\n    /**\n     * Defines whether the dropdown opens upwards.\n     *\n     * Set to `true` additionally disables autoDrop feature.\n     *\n     * @default false\n     */\n    dropup?: boolean;\n\n    /**\n     * Defines whether the dropdown opens right aligned to the dropdown toggle.\n     *\n     * Set to 'true' additionally disables autoDrop feature.\n     *\n     * @default false\n     */\n    pullRight?: boolean;\n\n    /**\n     * Enables or disables the autoDrop positioning feature.\n     *\n     * When enabled, the option list opens below or above the input depending on the surrounding space.\n     *\n     * @default true\n     */\n    autoDropDirection?: boolean;\n\n    /**\n     * Defines the size of the select to be rendered.\n     *\n     * @default 'md'\n     */\n    bsSize?: 'sm' | 'md' | 'lg';\n\n    /**\n     * Defines the visual variant of the select.\n     *\n     * @default 'default'\n     */\n    variant?: 'default' | 'blank';\n\n    /**\n     * Option to disable the opening of the option list.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Sets the input's tabindex attribute.\n     *\n     * The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being\n     * sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for\n     * sequential focus navigation.\n     *\n     * @default 0\n     */\n    tabIndex?: number;\n\n    /**\n     * Defines whether the Bootstrap error classes shall be added to the toggle element.\n     *\n     * @default false\n     */\n    hasError?: boolean;\n\n    /**\n     * Defines whether the component should be filterable.\n     *\n     * @default false\n     */\n    useFilter?: boolean;\n\n    /**\n     * Set to show a clear button.\n     *\n     * @default false\n     */\n    useClear?: boolean;\n\n    /**\n     * Shows a loading spinner instead of the menu items if set to true.\n     *\n     * @default false\n     */\n    isLoading?: boolean;\n\n    /**\n     * Text that shall be shown when not match was found when filtering.\n     */\n    noItemMessage?: string | React.ReactNode;\n\n    /**\n     * Text or node to be rendered on the toggle select instead of the selected item label.\n     */\n    selectedOptionText?: string | React.ReactNode;\n\n    /**\n     * Set to show only the icon and not the label of selected item.\n     *\n     * @default false\n     */\n    showSelectedItemIcon?: boolean;\n\n    /**\n     * Set to show all item icons within the toggle element.\n     *\n     * Selected items are highlighted and unselected items are shown as inactive.\n     *\n     * @default false\n     */\n    showUnselectedItemIcons?: boolean;\n\n    /**\n     * Additional classes to be set to the dropdown.\n     */\n    dropdownClassName?: string;\n\n    /**\n     * Additional classes to be set to the select/input.\n     */\n    btnClassName?: string;\n\n    /**\n     * Additional classes to be set to the select wrapper.\n     */\n    className?: string;\n};\n\nconst Select = <T extends SelectOption>(props: SelectProps<T>) => {\n    const {\n        name,\n        id = name,\n        label,\n        options = [],\n        value,\n        onChange = noop,\n        placeholder,\n        isLoading = false,\n        dropup = false,\n        pullRight = false,\n        autoDropDirection = true,\n        bsSize = 'md',\n        variant = 'default',\n        disabled = false,\n        tabIndex = 0,\n        hasError = false,\n        useFilter = false,\n        useClear = false,\n        noItemMessage,\n        selectedOptionText,\n        showSelectedItemIcon = false,\n        showUnselectedItemIcons = false,\n        dropdownClassName,\n        btnClassName,\n        className,\n\n        inputAddon,\n        errorMessage,\n        warningMessage,\n        messageWhiteSpace = 'normal',\n\n        ...remainingProps\n    } = props;\n\n    const [isOpen, setIsOpen] = useState(false);\n    const [selectedItem, setSelectedItem] = useState<SelectOption | null>(null);\n    const [isFilterActive, setIsFilterActive] = useState(false);\n    const [filterValue, setFilterValue] = useState('');\n    const [filteredOptions, setFilteredOptions] = useState(options);\n    const [itemDOMValues, setItemDOMValues] = useState<OptionDOMValue[]>([]);\n    const [focusedItemIndex, setFocusedItemIndex] = useState(DEFAULT_FOCUSED_ITEM_INDEX);\n    const [keyboardUsed, setKeyboardUsed] = useState(false);\n\n    const refSelect = useRef();\n    const refToggle = useRef<HTMLButtonElement>(null);\n\n    const ref = useClickOutside(() => closeMenu());\n    const mergedSelectRefs = useMergeRefs(refSelect, ref);\n\n    const updateSelectedItem = (selectOptions: SelectOption[], updatedValue: string[] | undefined) => {\n        if (updatedValue && !isEmpty(updatedValue)) {\n            setSelectedItem(selectOptions.find(item => item.id === updatedValue[0]) || null);\n        } else if (selectOptions) {\n            setSelectedItem(selectOptions.find(item => item.selected) || null);\n        }\n    };\n\n    useEffectOnce(() => {\n        updateSelectedItem(options, value);\n    });\n\n    const [previousOptions, setPreviousOptions] = useState(options);\n    if (!isEqual(options, previousOptions)) {\n        updateSelectedItem(options, value);\n        setFilteredOptions(options);\n        setPreviousOptions(options);\n    }\n\n    const [previousValue, setPreviousValue] = useState(value);\n    if (!isEqual(value, previousValue)) {\n        updateSelectedItem(options, value);\n        setPreviousValue(value);\n    }\n\n    const updateDOMValues = (itemDOMValuesToUpdated: OptionDOMValue[] = []) => {\n        // Skip updates when we have nothing new, or when filtering is active and we already hold a full snapshot.\n        if (!itemDOMValuesToUpdated.length) {\n            return;\n        }\n\n        const shouldKeepPreviousSnapshot = (isFilterActive || filterValue) && itemDOMValues.length > 0;\n        if (shouldKeepPreviousSnapshot) {\n            return;\n        }\n\n        setItemDOMValues(itemDOMValuesToUpdated);\n    };\n\n    const handleClearSelectedItem = () => {\n        setSelectedItem(null);\n        setIsFilterActive(false);\n        setFilterValue('');\n        setFilteredOptions(options);\n        setKeyboardUsed(false);\n        setFocusedItemIndex(DEFAULT_FOCUSED_ITEM_INDEX);\n\n        onChange(undefined);\n    };\n\n    const renderToggle = () => {\n        const toggleClasses = classNames(\n            'dropdown-toggle',\n            'form-control',\n            'text-left',\n            btnClassName && btnClassName,\n            bsSize === 'sm' && 'input-sm',\n            bsSize === 'lg' && 'input-lg',\n            disabled && 'disabled'\n        );\n\n        const toggleButton = (\n            <button\n                type='button'\n                id={id}\n                name={name}\n                className={toggleClasses}\n                data-toggle='dropdown'\n                tabIndex={tabIndex}\n                aria-haspopup='true'\n                aria-expanded={isOpen}\n                onClick={onToggle}\n                ref={refToggle}\n            >\n                {useFilter && isOpen && (\n                    <SelectFilter\n                        isFilterActive={isFilterActive}\n                        filterValue={filterValue}\n                        onChange={handleFilterChange}\n                    />\n                )}\n                {selectedOptionText ? (\n                    selectedOptionText\n                ) : (\n                    <SelectedOption\n                        label={label}\n                        placeholder={placeholder}\n                        selectedItem={selectedItem}\n                        options={options}\n                        showSelectedItemIcon={showSelectedItemIcon}\n                        showUnselectedItemIcons={showUnselectedItemIcons}\n                    />\n                )}\n                <span className='select-toggle-actions'>\n                    <ClearButton showClear={useClear} selectedItem={selectedItem} onClear={handleClearSelectedItem} />\n                    <span className='caret' />\n                </span>\n            </button>\n        );\n\n        if (!inputAddon && !errorMessage && !warningMessage) {\n            return toggleButton;\n        }\n\n        return (\n            <WithFeedbackAndAddon\n                bsSize={bsSize}\n                inputAddon={inputAddon}\n                errorMessage={errorMessage}\n                warningMessage={warningMessage}\n                messageWhiteSpace={messageWhiteSpace}\n            >\n                {toggleButton}\n            </WithFeedbackAndAddon>\n        );\n    };\n\n    const renderDropdownMenu = () => {\n        // Start from the last tracked focus; only default to the first item when opened via keyboard and nothing is selected.\n        let currentFocusedItemIndex = focusedItemIndex;\n\n        // Do not auto-highlight a selected item on open; let keyboard navigation start from \"no focus\".\n        // Only default to the first item when opened via keyboard and nothing was selected.\n        if (keyboardUsed && !selectedItem) {\n            currentFocusedItemIndex = 0;\n        }\n\n        return (\n            <BaseSelectDropdown\n                isOpen={isOpen}\n                isLoading={isLoading}\n                options={filteredOptions}\n                focusedItemIndex={currentFocusedItemIndex}\n                keyboardUsed={keyboardUsed}\n                updateDOMValues={updateDOMValues}\n                onSelect={onOptionChange}\n                onClose={closeMenu}\n                noItemMessage={noItemMessage}\n                pullRight={pullRight}\n                dropup={dropup}\n                autoDropDirection={autoDropDirection}\n                dropdownClassName={dropdownClassName}\n            />\n        );\n    };\n\n    const handleFilterChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        event.preventDefault();\n\n        const targetFilterValue = event.currentTarget.value;\n\n        // if cleared: reset to defaults and bail early\n        if (targetFilterValue === '') {\n            setIsFilterActive(false);\n            setFilterValue('');\n            setFilteredOptions(options);\n            setKeyboardUsed(false);\n            setFocusedItemIndex(DEFAULT_FOCUSED_ITEM_INDEX);\n            return;\n        }\n\n        // otherwise: filter against the last known non-empty DOM snapshot\n        const currentFilteredOptions = filterOptions(itemDOMValues, targetFilterValue, options);\n\n        // highlight the first item of the search result if at least one item was found\n        const newFocusedItemIndex = currentFilteredOptions.length > 0 ? 0 : DEFAULT_FOCUSED_ITEM_INDEX;\n\n        setIsFilterActive(true);\n        setFilterValue(targetFilterValue);\n        setFilteredOptions(currentFilteredOptions);\n        setKeyboardUsed(true);\n        setFocusedItemIndex(newFocusedItemIndex);\n    };\n\n    const onOptionChange = (currentSelectedItem: T | undefined) => {\n        setSelectedItem(currentSelectedItem || null);\n        setIsFilterActive(false);\n        setFilterValue('');\n        setFilteredOptions(options);\n\n        onChange(currentSelectedItem);\n\n        closeMenu();\n    };\n\n    const onToggle = (event: React.MouseEvent<HTMLButtonElement>) => {\n        // Don't toggle when component is disabled or\n        // when filter is active, means entering some filter value\n        // in order to avoid closing menu on space but allow to use it for filtering\n        if (disabled || isFilterActive) {\n            return;\n        }\n\n        // using the enter key on the toggle button will trigger a synthetic click event as all buttons are of\n        // type submit by default in HTML. In order to differentiate between real click and a synthetic event\n        // caused by they keyboard, use the event details. A synthetic event is always 0.\n        const isKeyboardUsed = event.detail === 0;\n\n        setIsOpen(!isOpen);\n        setKeyboardUsed(isKeyboardUsed);\n    };\n\n    const closeMenu = () => {\n        if (isOpen) {\n            setIsOpen(false);\n            setIsFilterActive(false);\n            setFilterValue('');\n            setFilteredOptions(options);\n            setKeyboardUsed(false);\n            setFocusedItemIndex(DEFAULT_FOCUSED_ITEM_INDEX);\n            refToggle.current?.focus();\n        }\n    };\n\n    const classes = classNames(\n        'select',\n        'dropdown',\n        isOpen && 'open',\n        hasError && 'has-error',\n        variant === 'blank' && 'select-blank',\n        className && className\n    );\n\n    return (\n        <div {...remainingProps} className={classes} ref={mergedSelectRefs}>\n            {renderToggle()}\n            {renderDropdownMenu()}\n        </div>\n    );\n};\n\nexport default Select;\n"],"names":["DEFAULT_FOCUSED_ITEM_INDEX","Select","props","name","id","label","options","value","onChange","noop","placeholder","isLoading","dropup","pullRight","autoDropDirection","bsSize","variant","disabled","tabIndex","hasError","useFilter","useClear","noItemMessage","selectedOptionText","showSelectedItemIcon","showUnselectedItemIcons","dropdownClassName","btnClassName","className","inputAddon","errorMessage","warningMessage","messageWhiteSpace","remainingProps","isOpen","setIsOpen","useState","selectedItem","setSelectedItem","isFilterActive","setIsFilterActive","filterValue","setFilterValue","filteredOptions","setFilteredOptions","itemDOMValues","setItemDOMValues","focusedItemIndex","setFocusedItemIndex","keyboardUsed","setKeyboardUsed","refSelect","useRef","refToggle","ref","useClickOutside","closeMenu","mergedSelectRefs","useMergeRefs","updateSelectedItem","selectOptions","updatedValue","isEmpty","item","useEffectOnce","previousOptions","setPreviousOptions","isEqual","previousValue","setPreviousValue","updateDOMValues","itemDOMValuesToUpdated","handleClearSelectedItem","renderToggle","toggleClasses","classNames","toggleButton","jsxs","onToggle","jsx","SelectFilter","handleFilterChange","SelectedOption","ClearButton","WithFeedbackAndAddon","renderDropdownMenu","currentFocusedItemIndex","BaseSelectDropdown","onOptionChange","event","targetFilterValue","currentFilteredOptions","filterOptions","newFocusedItemIndex","currentSelectedItem","isKeyboardUsed","classes"],"mappings":"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"}
+{"version":3,"file":"Select.js","sources":["../../../src/components/selects/Select.tsx"],"sourcesContent":["import type React from 'react';\nimport { useRef, useState } from 'react';\nimport { isEqual } from 'es-toolkit/predicate';\nimport { isEmpty, noop } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport BaseSelectDropdown, { filterOptions, type OptionDOMValue, type SelectOption } from './BaseSelectDropdown';\nimport useClickOutside from '../../useClickOutside';\nimport useEffectOnce from '../../hooks/useEffectOnce';\nimport useMergeRefs from '../../hooks/useMergeRefs';\nimport type { TrackingAttributes } from '../../utils/analytics/googleAnalyticsUtils';\nimport ClearButton from './ClearButton';\nimport SelectFilter from './SelectFilter';\nimport SelectedOption from './SelectedOption';\nimport WithFeedbackAndAddon, { type WithFeedbackAndAddonProps } from './WithFeedbackAndAddon';\n\nexport type { SelectOption } from './BaseSelectDropdown';\n\nconst DEFAULT_FOCUSED_ITEM_INDEX = -1;\n\n/**\n * Note: Even with a pre-selected item, when it first opens the dropdown it renders the full options list,\n * not just the selected one. The filter is only usable while the dropdown is open.\n */\nexport type SelectProps<T extends SelectOption> = Omit<WithFeedbackAndAddonProps, 'bsSize'> & {\n    /**\n     * Passed through as HTML attribute to the toggle button.\n     */\n    name?: string;\n\n    /**\n     * Passed through as HTML attribute to the toggle button.\n     *\n     * @default Uses the value given to `name` if not provided explicitly.\n     */\n    id?: string;\n\n    /**\n     * The toggle label in front of the selected text.\n     */\n    label?: string | React.ReactNode;\n\n    /**\n     * Items to display in the dropdown menu.\n     *\n     * @default []\n     */\n    options?: T[];\n\n    /**\n     * Sets the ids of the selected options when the component is already mounted.\n     */\n    value?: string[];\n\n    /**\n     * Callback function triggered when an item is selected.\n     *\n     * @param selectedOption The option that was selected (or undefined if none was).\n     *\n     * @default () => {}\n     */\n    onChange?: (selectOption: T | undefined) => void;\n\n    /**\n     * Text to display when nothing is selected.\n     */\n    placeholder?: string | React.ReactNode;\n\n    /**\n     * Defines whether the dropdown opens upwards.\n     *\n     * Set to `true` additionally disables autoDrop feature.\n     *\n     * @default false\n     */\n    dropup?: boolean;\n\n    /**\n     * Defines whether the dropdown opens right aligned to the dropdown toggle.\n     *\n     * Set to 'true' additionally disables autoDrop feature.\n     *\n     * @default false\n     */\n    pullRight?: boolean;\n\n    /**\n     * Enables or disables the autoDrop positioning feature.\n     *\n     * When enabled, the option list opens below or above the input depending on the surrounding space.\n     *\n     * @default true\n     */\n    autoDropDirection?: boolean;\n\n    /**\n     * Defines the size of the select to be rendered.\n     *\n     * @default 'md'\n     */\n    bsSize?: 'sm' | 'md' | 'lg';\n\n    /**\n     * Defines the visual variant of the select.\n     *\n     * @default 'default'\n     */\n    variant?: 'default' | 'blank';\n\n    /**\n     * Option to disable the opening of the option list.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Sets the input's tabindex attribute.\n     *\n     * The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being\n     * sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for\n     * sequential focus navigation.\n     *\n     * @default 0\n     */\n    tabIndex?: number;\n\n    /**\n     * Defines whether the Bootstrap error classes shall be added to the toggle element.\n     *\n     * @default false\n     */\n    hasError?: boolean;\n\n    /**\n     * Defines whether the component should be filterable.\n     *\n     * @default false\n     */\n    useFilter?: boolean;\n\n    /**\n     * Set to show a clear button.\n     *\n     * @default false\n     */\n    useClear?: boolean;\n\n    /**\n     * Shows a loading spinner instead of the menu items if set to true.\n     *\n     * @default false\n     */\n    isLoading?: boolean;\n\n    /**\n     * Text that shall be shown when not match was found when filtering.\n     */\n    noItemMessage?: string | React.ReactNode;\n\n    /**\n     * Text or node to be rendered on the toggle select instead of the selected item label.\n     */\n    selectedOptionText?: string | React.ReactNode;\n\n    /**\n     * Set to show only the icon and not the label of selected item.\n     *\n     * @default false\n     */\n    showSelectedItemIcon?: boolean;\n\n    /**\n     * Set to show all item icons within the toggle element.\n     *\n     * Selected items are highlighted and unselected items are shown as inactive.\n     *\n     * @default false\n     */\n    showUnselectedItemIcons?: boolean;\n\n    /**\n     * Additional classes to be set to the dropdown.\n     */\n    dropdownClassName?: string;\n\n    /**\n     * Additional classes to be set to the select/input.\n     */\n    btnClassName?: string;\n\n    /**\n     * Additional classes to be set to the select wrapper.\n     */\n    className?: string;\n\n    /**\n     * Optional tracking attributes added to the toggle button.\n     */\n    trackingAttributes?: TrackingAttributes;\n};\n\nconst Select = <T extends SelectOption>(props: SelectProps<T>) => {\n    const {\n        name,\n        id = name,\n        label,\n        options = [],\n        value,\n        onChange = noop,\n        placeholder,\n        isLoading = false,\n        dropup = false,\n        pullRight = false,\n        autoDropDirection = true,\n        bsSize = 'md',\n        variant = 'default',\n        disabled = false,\n        tabIndex = 0,\n        hasError = false,\n        useFilter = false,\n        useClear = false,\n        noItemMessage,\n        selectedOptionText,\n        showSelectedItemIcon = false,\n        showUnselectedItemIcons = false,\n        dropdownClassName,\n        btnClassName,\n        className,\n        trackingAttributes,\n\n        inputAddon,\n        errorMessage,\n        warningMessage,\n        messageWhiteSpace = 'normal',\n\n        ...remainingProps\n    } = props;\n\n    const [isOpen, setIsOpen] = useState(false);\n    const [selectedItem, setSelectedItem] = useState<SelectOption | null>(null);\n    const [isFilterActive, setIsFilterActive] = useState(false);\n    const [filterValue, setFilterValue] = useState('');\n    const [filteredOptions, setFilteredOptions] = useState(options);\n    const [itemDOMValues, setItemDOMValues] = useState<OptionDOMValue[]>([]);\n    const [focusedItemIndex, setFocusedItemIndex] = useState(DEFAULT_FOCUSED_ITEM_INDEX);\n    const [keyboardUsed, setKeyboardUsed] = useState(false);\n\n    const refSelect = useRef();\n    const refToggle = useRef<HTMLButtonElement>(null);\n\n    const ref = useClickOutside(() => closeMenu());\n    const mergedSelectRefs = useMergeRefs(refSelect, ref);\n\n    const updateSelectedItem = (selectOptions: SelectOption[], updatedValue: string[] | undefined) => {\n        if (updatedValue && !isEmpty(updatedValue)) {\n            setSelectedItem(selectOptions.find(item => item.id === updatedValue[0]) || null);\n        } else if (selectOptions) {\n            setSelectedItem(selectOptions.find(item => item.selected) || null);\n        }\n    };\n\n    useEffectOnce(() => {\n        updateSelectedItem(options, value);\n    });\n\n    const [previousOptions, setPreviousOptions] = useState(options);\n    if (!isEqual(options, previousOptions)) {\n        updateSelectedItem(options, value);\n        setFilteredOptions(options);\n        setPreviousOptions(options);\n    }\n\n    const [previousValue, setPreviousValue] = useState(value);\n    if (!isEqual(value, previousValue)) {\n        updateSelectedItem(options, value);\n        setPreviousValue(value);\n    }\n\n    const updateDOMValues = (itemDOMValuesToUpdated: OptionDOMValue[] = []) => {\n        // Skip updates when we have nothing new, or when filtering is active and we already hold a full snapshot.\n        if (!itemDOMValuesToUpdated.length) {\n            return;\n        }\n\n        const shouldKeepPreviousSnapshot = (isFilterActive || filterValue) && itemDOMValues.length > 0;\n        if (shouldKeepPreviousSnapshot) {\n            return;\n        }\n\n        setItemDOMValues(itemDOMValuesToUpdated);\n    };\n\n    const handleClearSelectedItem = () => {\n        setSelectedItem(null);\n        setIsFilterActive(false);\n        setFilterValue('');\n        setFilteredOptions(options);\n        setKeyboardUsed(false);\n        setFocusedItemIndex(DEFAULT_FOCUSED_ITEM_INDEX);\n\n        onChange(undefined);\n    };\n\n    const renderToggle = () => {\n        const toggleClasses = classNames(\n            'dropdown-toggle',\n            'form-control',\n            'text-left',\n            btnClassName && btnClassName,\n            bsSize === 'sm' && 'input-sm',\n            bsSize === 'lg' && 'input-lg',\n            disabled && 'disabled'\n        );\n\n        const toggleButton = (\n            <button\n                type='button'\n                id={id}\n                name={name}\n                className={toggleClasses}\n                {...trackingAttributes}\n                data-toggle='dropdown'\n                tabIndex={tabIndex}\n                aria-haspopup='true'\n                aria-expanded={isOpen}\n                onClick={onToggle}\n                ref={refToggle}\n            >\n                {useFilter && isOpen && (\n                    <SelectFilter\n                        isFilterActive={isFilterActive}\n                        filterValue={filterValue}\n                        onChange={handleFilterChange}\n                    />\n                )}\n                {selectedOptionText ? (\n                    selectedOptionText\n                ) : (\n                    <SelectedOption\n                        label={label}\n                        placeholder={placeholder}\n                        selectedItem={selectedItem}\n                        options={options}\n                        showSelectedItemIcon={showSelectedItemIcon}\n                        showUnselectedItemIcons={showUnselectedItemIcons}\n                    />\n                )}\n                <span className='select-toggle-actions'>\n                    <ClearButton showClear={useClear} selectedItem={selectedItem} onClear={handleClearSelectedItem} />\n                    <span className='caret' />\n                </span>\n            </button>\n        );\n\n        if (!inputAddon && !errorMessage && !warningMessage) {\n            return toggleButton;\n        }\n\n        return (\n            <WithFeedbackAndAddon\n                bsSize={bsSize}\n                inputAddon={inputAddon}\n                errorMessage={errorMessage}\n                warningMessage={warningMessage}\n                messageWhiteSpace={messageWhiteSpace}\n            >\n                {toggleButton}\n            </WithFeedbackAndAddon>\n        );\n    };\n\n    const renderDropdownMenu = () => {\n        // Start from the last tracked focus; only default to the first item when opened via keyboard and nothing is selected.\n        let currentFocusedItemIndex = focusedItemIndex;\n\n        // Do not auto-highlight a selected item on open; let keyboard navigation start from \"no focus\".\n        // Only default to the first item when opened via keyboard and nothing was selected.\n        if (keyboardUsed && !selectedItem) {\n            currentFocusedItemIndex = 0;\n        }\n\n        return (\n            <BaseSelectDropdown\n                isOpen={isOpen}\n                isLoading={isLoading}\n                options={filteredOptions}\n                focusedItemIndex={currentFocusedItemIndex}\n                keyboardUsed={keyboardUsed}\n                updateDOMValues={updateDOMValues}\n                onSelect={onOptionChange}\n                onClose={closeMenu}\n                noItemMessage={noItemMessage}\n                pullRight={pullRight}\n                dropup={dropup}\n                autoDropDirection={autoDropDirection}\n                dropdownClassName={dropdownClassName}\n            />\n        );\n    };\n\n    const handleFilterChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        event.preventDefault();\n\n        const targetFilterValue = event.currentTarget.value;\n\n        // if cleared: reset to defaults and bail early\n        if (targetFilterValue === '') {\n            setIsFilterActive(false);\n            setFilterValue('');\n            setFilteredOptions(options);\n            setKeyboardUsed(false);\n            setFocusedItemIndex(DEFAULT_FOCUSED_ITEM_INDEX);\n            return;\n        }\n\n        // otherwise: filter against the last known non-empty DOM snapshot\n        const currentFilteredOptions = filterOptions(itemDOMValues, targetFilterValue, options);\n\n        // highlight the first item of the search result if at least one item was found\n        const newFocusedItemIndex = currentFilteredOptions.length > 0 ? 0 : DEFAULT_FOCUSED_ITEM_INDEX;\n\n        setIsFilterActive(true);\n        setFilterValue(targetFilterValue);\n        setFilteredOptions(currentFilteredOptions);\n        setKeyboardUsed(true);\n        setFocusedItemIndex(newFocusedItemIndex);\n    };\n\n    const onOptionChange = (currentSelectedItem: T | undefined) => {\n        setSelectedItem(currentSelectedItem || null);\n        setIsFilterActive(false);\n        setFilterValue('');\n        setFilteredOptions(options);\n\n        onChange(currentSelectedItem);\n\n        closeMenu();\n    };\n\n    const onToggle = (event: React.MouseEvent<HTMLButtonElement>) => {\n        // Don't toggle when component is disabled or\n        // when filter is active, means entering some filter value\n        // in order to avoid closing menu on space but allow to use it for filtering\n        if (disabled || isFilterActive) {\n            return;\n        }\n\n        // using the enter key on the toggle button will trigger a synthetic click event as all buttons are of\n        // type submit by default in HTML. In order to differentiate between real click and a synthetic event\n        // caused by they keyboard, use the event details. A synthetic event is always 0.\n        const isKeyboardUsed = event.detail === 0;\n\n        setIsOpen(!isOpen);\n        setKeyboardUsed(isKeyboardUsed);\n    };\n\n    const closeMenu = () => {\n        if (isOpen) {\n            setIsOpen(false);\n            setIsFilterActive(false);\n            setFilterValue('');\n            setFilteredOptions(options);\n            setKeyboardUsed(false);\n            setFocusedItemIndex(DEFAULT_FOCUSED_ITEM_INDEX);\n            refToggle.current?.focus();\n        }\n    };\n\n    const classes = classNames(\n        'select',\n        'dropdown',\n        isOpen && 'open',\n        hasError && 'has-error',\n        variant === 'blank' && 'select-blank',\n        className && className\n    );\n\n    return (\n        <div {...remainingProps} className={classes} ref={mergedSelectRefs}>\n            {renderToggle()}\n            {renderDropdownMenu()}\n        </div>\n    );\n};\n\nexport default Select;\n"],"names":["DEFAULT_FOCUSED_ITEM_INDEX","Select","props","name","id","label","options","value","onChange","noop","placeholder","isLoading","dropup","pullRight","autoDropDirection","bsSize","variant","disabled","tabIndex","hasError","useFilter","useClear","noItemMessage","selectedOptionText","showSelectedItemIcon","showUnselectedItemIcons","dropdownClassName","btnClassName","className","trackingAttributes","inputAddon","errorMessage","warningMessage","messageWhiteSpace","remainingProps","isOpen","setIsOpen","useState","selectedItem","setSelectedItem","isFilterActive","setIsFilterActive","filterValue","setFilterValue","filteredOptions","setFilteredOptions","itemDOMValues","setItemDOMValues","focusedItemIndex","setFocusedItemIndex","keyboardUsed","setKeyboardUsed","refSelect","useRef","refToggle","ref","useClickOutside","closeMenu","mergedSelectRefs","useMergeRefs","updateSelectedItem","selectOptions","updatedValue","isEmpty","item","useEffectOnce","previousOptions","setPreviousOptions","isEqual","previousValue","setPreviousValue","updateDOMValues","itemDOMValuesToUpdated","handleClearSelectedItem","renderToggle","toggleClasses","classNames","toggleButton","jsxs","onToggle","jsx","SelectFilter","handleFilterChange","SelectedOption","ClearButton","WithFeedbackAndAddon","renderDropdownMenu","currentFocusedItemIndex","BaseSelectDropdown","onOptionChange","event","targetFilterValue","currentFilteredOptions","filterOptions","newFocusedItemIndex","currentSelectedItem","isKeyboardUsed","classes"],"mappings":";;;;;;;;;;;;;AAkBA,MAAMA,IAA6B,IAwL7BC,KAAS,CAAyBC,MAA0B;AAC9D,QAAM;AAAA,IACF,MAAAC;AAAA,IACA,IAAAC,IAAKD;AAAA,IACL,OAAAE;AAAA,IACA,SAAAC,IAAU,CAAA;AAAA,IACV,OAAAC;AAAA,IACA,UAAAC,IAAWC;AAAA,IACX,aAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,QAAAC,IAAS;AAAA,IACT,WAAAC,IAAY;AAAA,IACZ,mBAAAC,IAAoB;AAAA,IACpB,QAAAC,IAAS;AAAA,IACT,SAAAC,IAAU;AAAA,IACV,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW;AAAA,IACX,WAAAC,IAAY;AAAA,IACZ,UAAAC,IAAW;AAAA,IACX,eAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,sBAAAC,IAAuB;AAAA,IACvB,yBAAAC,IAA0B;AAAA,IAC1B,mBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,WAAAC;AAAA,IACA,oBAAAC;AAAA,IAEA,YAAAC;AAAA,IACA,cAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,mBAAAC,KAAoB;AAAA,IAEpB,GAAGC;AAAA,EAAA,IACHhC,GAEE,CAACiC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpC,CAACC,GAAcC,CAAe,IAAIF,EAA8B,IAAI,GACpE,CAACG,GAAgBC,CAAiB,IAAIJ,EAAS,EAAK,GACpD,CAACK,GAAaC,CAAc,IAAIN,EAAS,EAAE,GAC3C,CAACO,IAAiBC,CAAkB,IAAIR,EAAS/B,CAAO,GACxD,CAACwC,GAAeC,EAAgB,IAAIV,EAA2B,CAAA,CAAE,GACjE,CAACW,IAAkBC,CAAmB,IAAIZ,EAASrC,CAA0B,GAC7E,CAACkD,GAAcC,CAAe,IAAId,EAAS,EAAK,GAEhDe,KAAYC,EAAA,GACZC,IAAYD,EAA0B,IAAI,GAE1CE,KAAMC,GAAgB,MAAMC,GAAW,GACvCC,KAAmBC,GAAaP,IAAWG,EAAG,GAE9CK,IAAqB,CAACC,GAA+BC,MAAuC;AAC9F,IAAIA,KAAgB,CAACC,GAAQD,CAAY,IACrCvB,EAAgBsB,EAAc,KAAK,CAAAG,MAAQA,EAAK,OAAOF,EAAa,CAAC,CAAC,KAAK,IAAI,IACxED,KACPtB,EAAgBsB,EAAc,KAAK,CAAAG,MAAQA,EAAK,QAAQ,KAAK,IAAI;AAAA,EAEzE;AAEA,EAAAC,GAAc,MAAM;AAChB,IAAAL,EAAmBtD,GAASC,CAAK;AAAA,EACrC,CAAC;AAED,QAAM,CAAC2D,IAAiBC,EAAkB,IAAI9B,EAAS/B,CAAO;AAC9D,EAAK8D,EAAQ9D,GAAS4D,EAAe,MACjCN,EAAmBtD,GAASC,CAAK,GACjCsC,EAAmBvC,CAAO,GAC1B6D,GAAmB7D,CAAO;AAG9B,QAAM,CAAC+D,IAAeC,EAAgB,IAAIjC,EAAS9B,CAAK;AACxD,EAAK6D,EAAQ7D,GAAO8D,EAAa,MAC7BT,EAAmBtD,GAASC,CAAK,GACjC+D,GAAiB/D,CAAK;AAG1B,QAAMgE,KAAkB,CAACC,IAA2C,OAAO;AAOvE,IALI,CAACA,EAAuB,WAIQhC,KAAkBE,MAAgBI,EAAc,SAAS,KAK7FC,GAAiByB,CAAsB;AAAA,EAC3C,GAEMC,KAA0B,MAAM;AAClC,IAAAlC,EAAgB,IAAI,GACpBE,EAAkB,EAAK,GACvBE,EAAe,EAAE,GACjBE,EAAmBvC,CAAO,GAC1B6C,EAAgB,EAAK,GACrBF,EAAoBjD,CAA0B,GAE9CQ,EAAS,MAAS;AAAA,EACtB,GAEMkE,KAAe,MAAM;AACvB,UAAMC,IAAgBC;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACAjD,KAAgBA;AAAA,MAChBZ,MAAW,QAAQ;AAAA,MACnBA,MAAW,QAAQ;AAAA,MACnBE,KAAY;AAAA,IAAA,GAGV4D,IACF,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAK;AAAA,QACL,IAAA1E;AAAA,QACA,MAAAD;AAAA,QACA,WAAWwE;AAAA,QACV,GAAG9C;AAAA,QACJ,eAAY;AAAA,QACZ,UAAAX;AAAA,QACA,iBAAc;AAAA,QACd,iBAAeiB;AAAA,QACf,SAAS4C;AAAA,QACT,KAAKzB;AAAA,QAEJ,UAAA;AAAA,UAAAlC,KAAae,KACV,gBAAA6C;AAAA,YAACC;AAAA,YAAA;AAAA,cACG,gBAAAzC;AAAA,cACA,aAAAE;AAAA,cACA,UAAUwC;AAAA,YAAA;AAAA,UAAA;AAAA,UAGjB3D,KAGG,gBAAAyD;AAAA,YAACG;AAAA,YAAA;AAAA,cACG,OAAA9E;AAAA,cACA,aAAAK;AAAA,cACA,cAAA4B;AAAA,cACA,SAAAhC;AAAA,cACA,sBAAAkB;AAAA,cACA,yBAAAC;AAAA,YAAA;AAAA,UAAA;AAAA,UAGR,gBAAAqD,EAAC,QAAA,EAAK,WAAU,yBACZ,UAAA;AAAA,YAAA,gBAAAE,EAACI,IAAA,EAAY,WAAW/D,GAAU,cAAAiB,GAA4B,SAASmC,IAAyB;AAAA,YAChG,gBAAAO,EAAC,QAAA,EAAK,WAAU,QAAA,CAAQ;AAAA,UAAA,EAAA,CAC5B;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAIR,WAAI,CAAClD,KAAc,CAACC,KAAgB,CAACC,IAC1B6C,IAIP,gBAAAG;AAAA,MAACK;AAAA,MAAA;AAAA,QACG,QAAAtE;AAAA,QACA,YAAAe;AAAA,QACA,cAAAC;AAAA,QACA,gBAAAC;AAAA,QACA,mBAAAC;AAAA,QAEC,UAAA4C;AAAA,MAAA;AAAA,IAAA;AAAA,EAGb,GAEMS,KAAqB,MAAM;AAE7B,QAAIC,IAA0BvC;AAI9B,WAAIE,KAAgB,CAACZ,MACjBiD,IAA0B,IAI1B,gBAAAP;AAAA,MAACQ;AAAA,MAAA;AAAA,QACG,QAAArD;AAAA,QACA,WAAAxB;AAAA,QACA,SAASiC;AAAA,QACT,kBAAkB2C;AAAA,QAClB,cAAArC;AAAA,QACA,iBAAAqB;AAAA,QACA,UAAUkB;AAAA,QACV,SAAShC;AAAA,QACT,eAAAnC;AAAA,QACA,WAAAT;AAAA,QACA,QAAAD;AAAA,QACA,mBAAAE;AAAA,QACA,mBAAAY;AAAA,MAAA;AAAA,IAAA;AAAA,EAGZ,GAEMwD,KAAqB,CAACQ,MAA+C;AACvE,IAAAA,EAAM,eAAA;AAEN,UAAMC,IAAoBD,EAAM,cAAc;AAG9C,QAAIC,MAAsB,IAAI;AAC1B,MAAAlD,EAAkB,EAAK,GACvBE,EAAe,EAAE,GACjBE,EAAmBvC,CAAO,GAC1B6C,EAAgB,EAAK,GACrBF,EAAoBjD,CAA0B;AAC9C;AAAA,IACJ;AAGA,UAAM4F,IAAyBC,GAAc/C,GAAe6C,GAAmBrF,CAAO,GAGhFwF,KAAsBF,EAAuB,SAAS,IAAI,IAAI5F;AAEpE,IAAAyC,EAAkB,EAAI,GACtBE,EAAegD,CAAiB,GAChC9C,EAAmB+C,CAAsB,GACzCzC,EAAgB,EAAI,GACpBF,EAAoB6C,EAAmB;AAAA,EAC3C,GAEML,KAAiB,CAACM,MAAuC;AAC3D,IAAAxD,EAAgBwD,KAAuB,IAAI,GAC3CtD,EAAkB,EAAK,GACvBE,EAAe,EAAE,GACjBE,EAAmBvC,CAAO,GAE1BE,EAASuF,CAAmB,GAE5BtC,EAAA;AAAA,EACJ,GAEMsB,KAAW,CAACW,MAA+C;AAI7D,QAAIzE,KAAYuB;AACZ;AAMJ,UAAMwD,IAAiBN,EAAM,WAAW;AAExC,IAAAtD,EAAU,CAACD,CAAM,GACjBgB,EAAgB6C,CAAc;AAAA,EAClC,GAEMvC,IAAY,MAAM;AACpB,IAAItB,MACAC,EAAU,EAAK,GACfK,EAAkB,EAAK,GACvBE,EAAe,EAAE,GACjBE,EAAmBvC,CAAO,GAC1B6C,EAAgB,EAAK,GACrBF,EAAoBjD,CAA0B,GAC9CsD,EAAU,SAAS,MAAA;AAAA,EAE3B,GAEM2C,KAAUrB;AAAA,IACZ;AAAA,IACA;AAAA,IACAzC,KAAU;AAAA,IACVhB,KAAY;AAAA,IACZH,MAAY,WAAW;AAAA,IACvBY,KAAaA;AAAA,EAAA;AAGjB,2BACK,OAAA,EAAK,GAAGM,IAAgB,WAAW+D,IAAS,KAAKvC,IAC7C,UAAA;AAAA,IAAAgB,GAAA;AAAA,IACAY,GAAA;AAAA,EAAmB,GACxB;AAER;"}

package/components/sidebars/Sidebar.js

@@ -1,8 +1,8 @@
-import { jsxs as c, Fragment as G, jsx as s } from "react/jsx-runtime";
-import { useState as i, useRef as P, useEffect as b } from "react";
+import { jsxs as c, Fragment as P, jsx as s } from "react/jsx-runtime";
+import { useState as i, useRef as V, useEffect as b } from "react";
 import { motion as We } from "motion/react";
 import { noop as p } from "es-toolkit/function";
-import { toNumber as V } from "es-toolkit/compat";
+import { toNumber as j } from "es-toolkit/compat";
 import m from "../../utils/classNames.js";
 import Oe from "./SidebarFooter.js";
 import ge from "./SidebarBackdrop.js";
@@ -13,7 +13,7 @@ import He from "../../hooks/useWindowResize.js";
 import Be from "../../hooks/useEsc.js";
 import ke from "../../utils/getWidthInBoundaries.js";
 import xe from "../smoothScrollbars/SmoothScrollbars.js";
-const Ue = 350, Ae = 100, Ye = 800, j = 0, Ge = 400, Pe = 800, Ve = 0.14, je = 500, C = {
+const Ue = 350, Ae = 100, Ye = 800, X = 0, Ge = 400, Pe = 800, Ve = 0.14, je = 500, C = {
   LEFT: "left",
   RIGHT: "right"
 }, D = {
@@ -37,13 +37,13 @@ const Ue = 350, Ae = 100, Ye = 800, j = 0, Ge = 400, Pe = 800, Ve = 0.14, je = 5
   const {
     fly: r = !1,
     closed: o = !1,
-    title: X = "",
+    title: F = "",
     footer: Z,
     resizable: q = !1,
-    position: F,
+    position: R,
     width: l = Ue,
     minWidth: K = Ae,
-    maxWidth: R = Ye,
+    maxWidth: M = Ye,
     hasBackdrop: J = !1,
     hasSmoothScrollbar: Q = !1,
     makeBackdropVisible: $ = !1,
@@ -51,13 +51,13 @@ const Ue = 350, Ae = 100, Ye = 800, j = 0, Ge = 400, Pe = 800, Ve = 0.14, je = 5
     fullscreenToggleTooltip: ee,
     openInFullscreen: se = !1,
     showHeaderBorder: te = !1,
-    disableClose: M = !1,
-    bodyRef: _,
-    headerButtons: w,
-    switchModeBreakpoint: y = j,
+    disableClose: _ = !1,
+    bodyRef: w,
+    headerButtons: y,
+    switchModeBreakpoint: W = X,
     onClose: oe = p,
     onResizeEnd: ie = p,
-    onFullScreenChange: W = p,
+    onFullScreenChange: O = p,
     onBackdropClick: ne = p,
     disableEsc: re = !1,
     titleClassName: ae = "",
@@ -66,49 +66,49 @@ const Ue = 350, Ae = 100, Ye = 800, j = 0, Ge = 400, Pe = 800, Ve = 0.14, je = 5
     footerClassName: ce = "",
     backdropClassName: me = "",
     className: fe = "",
-    children: O,
+    children: g,
     ...ue
-  } = n, [he, g] = i(V(l)), [S, v] = i(r ? t.MODE_FLY : t.MODE_FLUID), [a, z] = i(se), [be, H] = i(!1), [I, pe] = i(!1), [N, Ee] = i(F === C.RIGHT), f = P(null), B = P(null);
+  } = n, [he, v] = i(j(l)), [S, z] = i(r ? t.MODE_FLY : t.MODE_FLUID), [a, H] = i(se), [be, B] = i(!1), [I, pe] = i(!1), [N, Ee] = i(R === C.RIGHT), f = V(null), k = V(null);
   b(() => {
     f.current && S === t.MODE_FLY && f.current.parentNode?.className.includes("right") && Ee(!0);
   }, [f.current, S]);
-  const [k, Te] = i(o);
-  k !== o && Te(o);
+  const [x, Te] = i(o);
+  x !== o && Te(o);
   const [Se, Ie] = i(l);
-  Se !== l && (console.log("update internal width"), g(V(l)), Ie(l)), He(() => u(), je), b(() => u(), []), b(() => {
+  Se !== l && (console.log("update internal width"), v(j(l)), Ie(l)), He(() => u(), je), b(() => u(), []), b(() => {
     o || setTimeout(() => u());
   }, [o]), b(() => {
     const e = document.querySelector(".module-content");
-    e && (B.current = e);
+    e && (k.current = e);
   }, []), Be(() => {
-    !re && T && a && (z(!1), W(!1));
+    !re && T && a && (H(!1), O(!1));
   });
   const u = () => {
-    const e = B.current?.clientWidth;
-    if (r || y === j)
+    const e = k.current?.clientWidth;
+    if (r || W === X)
       return;
-    const L = e && e <= Ge, d = e && e > Pe, h = window.innerWidth <= y;
+    const L = e && e <= Ge, d = e && e > Pe, h = window.innerWidth <= W;
     if (L || h) {
-      v(t.MODE_FLY);
+      z(t.MODE_FLY);
       return;
     }
     if (d && !h) {
-      v(t.MODE_FLUID);
+      z(t.MODE_FLUID);
       return;
     }
   }, Ne = (e) => {
-    const L = I, d = window.innerWidth * 0.5, h = R || d;
-    g((A) => {
-      const ye = F === t.RIGHT ? A + e : A - e, Y = ke(K, h, ye);
-      return pe(Y === d), L && !I ? d : Y;
+    const L = I, d = window.innerWidth * 0.5, h = M || d;
+    v((Y) => {
+      const ye = R === t.RIGHT ? Y + e : Y - e, G = ke(K, h, ye);
+      return pe(G === d), L && !I ? d : G;
     }), u();
   }, Le = () => {
-    document.body?.classList.add("pointer-events-none"), H(!0);
+    document.body?.classList.add("pointer-events-none"), B(!0);
   }, Ce = () => {
-    document.body?.classList.remove("pointer-events-none"), H(!1), ie();
+    document.body?.classList.remove("pointer-events-none"), B(!1), ie();
   }, De = () => {
     const e = !a;
-    z(e), W(e);
+    H(e), O(e);
   }, Fe = m(
     "Sidebar",
     fe,
@@ -116,13 +116,13 @@ const Ue = 350, Ae = 100, Ye = 800, j = 0, Ge = 400, Pe = 800, Ve = 0.14, je = 5
     a && "width-100vw sidebar-fullscreen",
     I && !a && "max-width-50vw width-50vw",
     S === D.MODE_FLY || a ? "fly" : "fluid"
-  ), Re = m("SidebarHeader", de, te && "show-border"), Me = m("SidebarTitle", ae), x = m("SidebarBody", le), _e = m("SidebarResizeLimit", be && "display-block"), U = R || window.innerWidth * 0.5, we = /* @__PURE__ */ c(G, { children: [
-    /* @__PURE__ */ s("div", { className: _e, style: N ? { right: U } : { left: U } }),
+  ), Re = m("SidebarHeader", de, te && "show-border"), Me = m("SidebarTitle", ae), U = m("SidebarBody", le), _e = m("SidebarResizeLimit", be && "display-block"), A = M || window.innerWidth * 0.5, we = /* @__PURE__ */ c(P, { children: [
+    /* @__PURE__ */ s("div", { className: _e, style: N ? { right: A } : { left: A } }),
     /* @__PURE__ */ c("div", { className: "SidebarContent", children: [
       /* @__PURE__ */ c("div", { className: Re, children: [
-        /* @__PURE__ */ s("div", { className: Me, children: X }),
+        /* @__PURE__ */ s("div", { className: Me, children: F }),
         /* @__PURE__ */ c("div", { className: "SidebarButtons non-printable close", children: [
-          w,
+          y,
           T && /* @__PURE__ */ s(
             ve,
             {
@@ -131,11 +131,11 @@ const Ue = 350, Ae = 100, Ye = 800, j = 0, Ge = 400, Pe = 800, Ve = 0.14, je = 5
               tooltip: ee
             }
           ),
-          !M && (w || T) && /* @__PURE__ */ s("div", { className: "SidebarButtons-spacer" }),
-          !M && /* @__PURE__ */ s(ze, { onClick: oe })
+          !_ && (y || T) && /* @__PURE__ */ s("div", { className: "SidebarButtons-spacer" }),
+          !_ && /* @__PURE__ */ s(ze, { title: F, onClick: oe })
         ] })
       ] }),
-      Q ? /* @__PURE__ */ s(xe, { slideIn: !0, className: x, ref: _, children: O }) : /* @__PURE__ */ s("div", { className: x, ref: _, children: O }),
+      Q ? /* @__PURE__ */ s(xe, { slideIn: !0, className: U, ref: w, children: g }) : /* @__PURE__ */ s("div", { className: U, ref: w, children: g }),
       /* @__PURE__ */ s(Oe, { footer: Z, className: ce })
     ] }),
     q && /* @__PURE__ */ s(
@@ -149,12 +149,12 @@ const Ue = 350, Ae = 100, Ye = 800, j = 0, Ge = 400, Pe = 800, Ve = 0.14, je = 5
       }
     )
   ] });
-  return /* @__PURE__ */ c(G, { children: [
+  return /* @__PURE__ */ c(P, { children: [
     /* @__PURE__ */ s(
       We.div,
       {
         ...ue,
-        initial: k && "sidebarEnter",
+        initial: x && "sidebarEnter",
         animate: "sidebarVisible",
         exit: "sidebarExit",
         variants: Xe,

package/components/sidebars/Sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.js","sources":["../../../src/components/sidebars/Sidebar.tsx"],"sourcesContent":["import React, { type PropsWithChildren, useEffect, useRef, useState } from 'react';\nimport { motion } from 'motion/react';\nimport { noop } from 'es-toolkit/function';\nimport { toNumber } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport SidebarFooter from './SidebarFooter';\nimport SidebarBackdrop from './SidebarBackdrop';\nimport SidebarFullscreenToggle from './SidebarFullscreenToggle';\nimport SidebarCloseButton from './SidebarCloseButton';\nimport Resizer from '../resizer/Resizer';\nimport useWindowResize from '../../hooks/useWindowResize';\nimport useEsc from '../../hooks/useEsc';\nimport getWidthInBoundaries from '../../utils/getWidthInBoundaries';\nimport type { ObjectValues } from '../../utils/ObjectValues';\nimport SmoothScrollbars from '../smoothScrollbars/SmoothScrollbars';\n\nconst DEFAULT_WIDTH = 350;\nconst DEFAULT_MIN_WIDTH = 100;\nconst DEFAULT_MAX_WIDTH = 800;\nconst DEFAULT_SWITCH_MODE_BREAKPOINT = 0;\n\n// Values define the min and max width for the module-content\n// where the fluid sidebar automatically changes to \"fly\" and back.\nconst MIN_MODULE_CONTENT_WIDTH = 400;\nconst MAX_MODULE_CONTENT_WIDTH = 800;\n\nconst ANIMATION_DURATION = 0.14;\nconst RESIZE_THROTTLE = 500;\n\nconst SidebarPosition = {\n    LEFT: 'left',\n    RIGHT: 'right',\n} as const;\n\nconst SidebarMode = {\n    MODE_FLY: 'fly',\n    MODE_FLUID: 'fluid',\n};\n\ntype AnimationVariantProps = {\n    fromRight: boolean;\n    closed?: boolean;\n};\n\nconst animationVariants = {\n    sidebarEnter: ({ fromRight }: AnimationVariantProps) => ({\n        x: fromRight ? '100%' : '-100%',\n        opacity: 0,\n    }),\n    sidebarVisible: ({ fromRight, closed }: AnimationVariantProps) => ({\n        x: !closed ? 0 : fromRight ? '100%' : '-100%',\n        opacity: closed ? 0 : 1,\n        display: closed ? 'none' : 'block',\n    }),\n    sidebarExit: ({ fromRight }: AnimationVariantProps) => ({\n        x: fromRight ? '100%' : '-100%',\n        opacity: 0,\n    }),\n};\n\nexport type SidebarProps = {\n    /**\n     * Defines if the component will overlap the body content.\n     *\n     * @default false\n     */\n    fly?: boolean;\n\n    /**\n     * Defines whether the component is hidden or not.\n     *\n     * @default false\n     */\n    closed?: boolean;\n\n    /**\n     * Hides the close button. This may be used when the sidebar is always visible and may not be closed.\n     *\n     * @default false\n     */\n    disableClose?: boolean;\n\n    /**\n     * Callback function triggered when clicking the close icon.\n     */\n    onClose?: VoidFunction;\n\n    /**\n     * The Footer content. For example a save button.\n     */\n    footer?: string | React.ReactNode;\n\n    /**\n     * Additional classes added to the Sidebar footer.\n     */\n    footerClassName?: string;\n\n    /**\n     * Additional buttons to be rendered in the header.\n     */\n    headerButtons?: React.ReactNode;\n\n    /**\n     * Additional classes added to the Sidebar header.\n     */\n    headerClassName?: string;\n\n    /**\n     * Shows a sidebar header border\n     */\n    showHeaderBorder?: boolean;\n\n    /**\n     * Defines the width of the component. The value is set as pixel value as inline style.\n     * Note: In the past, the type allowed to pass in a sting value like \"400px\" but that is not\n     * possible anymore due to internal width calculations. To be backwards compatible for non\n     * Typescript projects, the width is converted to a number.\n     *\n     * @default 350\n     */\n    width?: number;\n\n    /**\n     * Defines the minimum width in px of the component that will take effect when resizing.\n     *\n     * @default 100\n     */\n    minWidth?: number;\n\n    /**\n     * Defines the maximum width in px of the component that will take effect when resizing.\n     *\n     * @default 800\n     */\n    maxWidth?: number;\n\n    /**\n     * Opens Sidebar in fullscreen, means 100vw.\n     *\n     * @default false\n     */\n    openInFullscreen?: boolean;\n\n    /**\n     * Callback for when the fullscreen is toggled.\n     */\n    onFullScreenChange?: (newFullscreenState: boolean) => void;\n\n    /**\n     * Enables the fullscreen functionality and shows the fullscreen toggle.\n     *\n     * @default false\n     */\n    enableFullscreenToggle?: boolean;\n\n    /**\n     * Translated tooltip text for the fullscreen toggle button.\n     */\n    fullscreenToggleTooltip?: string;\n\n    /**\n     * Tells the sidebar where it is positioned. This will affect the resizing behavior\n     * respectively. Note: the position need to be set properly whe using the resize\n     * functionality to know on which side of the sidebar to attach the resizer handle.\n     *\n     * It is also relevant when the sidebar mode is set to `fly` to properly animate\n     * the sidebar into the view.\n     *\n     * Possible values are:\n     *\n     * - `'left'`\n     * - `'right'`\n     * - `Sidebar.LEFT`\n     * - `Sidebar.RIGHT`\n     *\n     * @default 'left'\n     */\n    position?: ObjectValues<typeof SidebarPosition>;\n\n    /**\n     * Defines whether or not the sidebar is resizable.\n     * @default false\n     */\n    resizable?: boolean;\n\n    /**\n     * Callback for when the resize is done.\n     */\n    onResizeEnd?: VoidFunction;\n\n    /**\n     * Defines the breakpoint in pixel when the sidebar mode shall be changed. If the window width is lower\n     * than the given breakpoint the mode is set to `fly`. If the window width is higher the mode is set\n     * to `fluid`. This functionality is disabled by default and will be enabled when defining a breakpoint\n     * higher than 0.\n     */\n    switchModeBreakpoint?: number;\n\n    /**\n     * By default the fullscreen mode can be left with \"esc\". If this is unwanted it can be disabled.\n     *\n     * @default false\n     */\n    disableEsc?: boolean;\n\n    /**\n     * Defined whether or not a backdrop will be rendered behind the Sidebar to avoid clicks outside.\n     *\n     * @default false\n     */\n    hasBackdrop?: boolean;\n\n    /**\n     * Defined whether or not the UIKIT SmoothScrollbar is active.\n     *\n     * @default false\n     */\n    hasSmoothScrollbar?: boolean;\n\n    /**\n     * Defined whether or not the backdrop is visible similar to the backdrop for modal dialogs.\n     *\n     * @default false\n     */\n    makeBackdropVisible?: boolean;\n\n    /**\n     * Callback for when the backdrop is clicked. This comes in handy when handling transient data from\n     * the sidebar which need to be saved first and handle clicks outside.\n     */\n    onBackdropClick?: VoidFunction;\n\n    /**\n     * Additional ref added to the Sidebar body.\n     */\n    bodyRef?: React.MutableRefObject<HTMLDivElement | null>;\n\n    /**\n     * Content that will be displayed in the components header.\n     */\n    title?: string | React.ReactNode;\n\n    /**\n     * Additional classes added to the Sidebar title.\n     */\n    titleClassName?: string;\n\n    /**\n     * Additional classes added to the Sidebar backdrop.\n     */\n    backdropClassName?: string;\n\n    /**\n     * Additional classes added to the Sidebar body.\n     */\n    bodyClassName?: string;\n\n    /**\n     * Additional classes added on the wrapper element.\n     */\n    className?: string;\n};\n\nconst Sidebar = (props: PropsWithChildren<SidebarProps>) => {\n    const {\n        fly = false,\n        closed = false,\n        title = '',\n        footer,\n        resizable = false,\n        position,\n        width = DEFAULT_WIDTH,\n        minWidth = DEFAULT_MIN_WIDTH,\n        maxWidth = DEFAULT_MAX_WIDTH,\n        hasBackdrop = false,\n        hasSmoothScrollbar = false,\n        makeBackdropVisible = false,\n        enableFullscreenToggle = false,\n        fullscreenToggleTooltip,\n        openInFullscreen = false,\n        showHeaderBorder = false,\n        disableClose = false,\n        bodyRef,\n        headerButtons,\n        switchModeBreakpoint = DEFAULT_SWITCH_MODE_BREAKPOINT,\n        onClose = noop,\n        onResizeEnd = noop,\n        onFullScreenChange = noop,\n        onBackdropClick = noop,\n        disableEsc = false,\n        titleClassName = '',\n        bodyClassName = '',\n        headerClassName = '',\n        footerClassName = '',\n        backdropClassName = '',\n        className = '',\n        children,\n        ...remainingProps\n    } = props;\n\n    const [internalWidth, setInternalWidth] = useState(toNumber(width));\n    const [sidebarMode, setSidebarMode] = useState(fly ? Sidebar.MODE_FLY : Sidebar.MODE_FLUID);\n    const [isFullscreen, setIsFullscreen] = useState(openInFullscreen);\n    const [isResize, setIsResize] = useState(false);\n    const [isSplit, setIsSplit] = useState(false);\n    const [isRight, setIsRight] = useState(position === SidebarPosition.RIGHT);\n\n    const sidebarRef = useRef<HTMLDivElement>(null);\n\n    // Used to keep the external reference to the module-content to avoid querying the DOM\n    // periodically on window resize\n    const moduleContentRef: React.MutableRefObject<HTMLDivElement | null> = useRef(null);\n\n    // Position fallback in case the position property is not defined but the sidebar mode is fly\n    // and we want to animate it, we nee to know the direction from where th sidebar is coming from.\n    // That's why we check the ApplicationLayoutSidebar class if the sidebar inside is right aligned\n    // or not and us this value instead.\n    // Note: the position need to be set properly whe using the resize functionality to know on which\n    // side of the sidebar to attach the resizer handle.\n    useEffect(() => {\n        if (sidebarRef.current && sidebarMode === Sidebar.MODE_FLY) {\n            const sidebarLayout = sidebarRef.current.parentNode as HTMLDivElement;\n            if (sidebarLayout?.className.includes('right')) {\n                setIsRight(true);\n            }\n        }\n    }, [sidebarRef.current, sidebarMode]);\n\n    // Keep the previous closed state in order to prevent animation when switching sidebar mode\n    const [previousClosed, setPreviousClosed] = useState(closed);\n    if (previousClosed !== closed) {\n        setPreviousClosed(closed);\n    }\n\n    // Update internal width from outside\n    const [previousWidth, setPreviousWidth] = useState(width);\n    if (previousWidth !== width) {\n        console.log('update internal width');\n        setInternalWidth(toNumber(width));\n        setPreviousWidth(width);\n    }\n\n    // Switch between mode \"fly\" and \"fluid\"\n    useWindowResize(() => adaptSidebarMode(), RESIZE_THROTTLE);\n\n    // Initially check breakpoint after mounting the component\n    useEffect(() => adaptSidebarMode(), []);\n\n    // When Sidebar opens, check for available module-content width and\n    // switch sidebar mode to fly in case\n    useEffect(() => {\n        if (!closed) {\n            setTimeout(() => adaptSidebarMode());\n        }\n    }, [closed]);\n\n    useEffect(() => {\n        const moduleContent = document.querySelector('.module-content');\n        if (moduleContent) {\n            moduleContentRef.current = moduleContent as HTMLDivElement;\n        }\n    }, []);\n\n    // Close the fullscreen with \"esc\"\n    useEsc(() => {\n        if (!disableEsc && enableFullscreenToggle && isFullscreen) {\n            setIsFullscreen(false);\n            onFullScreenChange(false);\n        }\n    });\n\n    const adaptSidebarMode = () => {\n        const moduleContentWidth = moduleContentRef.current?.clientWidth;\n\n        if (fly || switchModeBreakpoint === DEFAULT_SWITCH_MODE_BREAKPOINT) {\n            return;\n        }\n\n        const isModuleContentTooSmall = moduleContentWidth && moduleContentWidth <= MIN_MODULE_CONTENT_WIDTH;\n        const isModuleContentBigEnough = moduleContentWidth && moduleContentWidth > MAX_MODULE_CONTENT_WIDTH;\n\n        const isWindowSmallerThanBreakpoint = window.innerWidth <= switchModeBreakpoint;\n\n        // switch to fly when module-content is less than x pixel and back if it is bigger\n        if (isModuleContentTooSmall || isWindowSmallerThanBreakpoint) {\n            setSidebarMode(Sidebar.MODE_FLY);\n            return;\n        }\n\n        // if module-content is bigger and is initially fluid set back to initial fluid state\n        if (isModuleContentBigEnough && !isWindowSmallerThanBreakpoint) {\n            setSidebarMode(Sidebar.MODE_FLUID);\n            return;\n        }\n    };\n\n    const handleResize = (diff: number) => {\n        const wasSplit = isSplit;\n        const halfWindowWidth = window.innerWidth * 0.5;\n        const usedMaxWidth = maxWidth || halfWindowWidth;\n\n        // Check for sidebar width if it is half the window size. If it was before but the sidebar was resized so it is\n        // no longer half window size, set the sidebar with to half window size to avoid jumping sidebar to old width\n        setInternalWidth(oldWidth => {\n            const updatedWidth = position === Sidebar.RIGHT ? oldWidth + diff : oldWidth - diff;\n            const newWidth = getWidthInBoundaries(minWidth, usedMaxWidth, updatedWidth);\n\n            const newIsSplit = newWidth === halfWindowWidth;\n            setIsSplit(newIsSplit);\n\n            return wasSplit && !isSplit ? halfWindowWidth : newWidth;\n        });\n\n        adaptSidebarMode();\n    };\n\n    const handleResizeStart = () => {\n        const body = document.body;\n        body?.classList.add('pointer-events-none');\n        setIsResize(true);\n    };\n\n    const handleResizeEnd = () => {\n        const body = document.body;\n        body?.classList.remove('pointer-events-none');\n        setIsResize(false);\n        onResizeEnd();\n    };\n\n    const handleFullscreenChange = () => {\n        const newFullscreenState = !isFullscreen;\n        setIsFullscreen(newFullscreenState);\n        onFullScreenChange(newFullscreenState);\n    };\n\n    const wrapperClasses = classNames(\n        'Sidebar',\n        className,\n        closed && 'closed',\n        isFullscreen && 'width-100vw sidebar-fullscreen',\n        isSplit && !isFullscreen && 'max-width-50vw width-50vw',\n        sidebarMode === SidebarMode.MODE_FLY ? 'fly' : isFullscreen ? 'fly' : 'fluid'\n    );\n\n    const headerClassNames = classNames('SidebarHeader', headerClassName, showHeaderBorder && 'show-border');\n    const titleClassNames = classNames('SidebarTitle', titleClassName);\n    const bodyClassNames = classNames('SidebarBody', bodyClassName);\n\n    const resizeLimitClasses = classNames('SidebarResizeLimit', isResize && 'display-block');\n\n    const resizeIndicatorPosition = maxWidth || window.innerWidth * 0.5;\n    const resizeLimitStyle = isRight ? { right: resizeIndicatorPosition } : { left: resizeIndicatorPosition };\n\n    const sidebarContent = (\n        <>\n            <div className={resizeLimitClasses} style={resizeLimitStyle} />\n            <div className='SidebarContent'>\n                <div className={headerClassNames}>\n                    <div className={titleClassNames}>{title}</div>\n                    <div className='SidebarButtons non-printable close'>\n                        {headerButtons}\n                        {enableFullscreenToggle && (\n                            <SidebarFullscreenToggle\n                                isFullscreen={isFullscreen}\n                                onClick={handleFullscreenChange}\n                                tooltip={fullscreenToggleTooltip}\n                            />\n                        )}\n                        {!disableClose && (headerButtons || enableFullscreenToggle) && (\n                            <div className='SidebarButtons-spacer' />\n                        )}\n                        {!disableClose && <SidebarCloseButton onClick={onClose} />}\n                    </div>\n                </div>\n                {hasSmoothScrollbar ? (\n                    <SmoothScrollbars slideIn className={bodyClassNames} ref={bodyRef}>\n                        {children}\n                    </SmoothScrollbars>\n                ) : (\n                    <div className={bodyClassNames} ref={bodyRef}>\n                        {children}\n                    </div>\n                )}\n\n                <SidebarFooter footer={footer} className={footerClassName} />\n            </div>\n            {resizable && (\n                <Resizer\n                    onResizeStart={handleResizeStart}\n                    onResize={handleResize}\n                    onResizeEnd={handleResizeEnd}\n                    direction={Resizer.HORIZONTAL}\n                    position={isRight ? Resizer.LEFT : Resizer.RIGHT}\n                />\n            )}\n        </>\n    );\n\n    return (\n        <>\n            <motion.div\n                {...remainingProps}\n                initial={previousClosed && 'sidebarEnter'}\n                animate='sidebarVisible'\n                // Cannot exit animation as sidebar is moved to offscreen by CSS class, means is still mounted\n                exit='sidebarExit'\n                variants={animationVariants}\n                custom={{ fromRight: isRight, closed }}\n                transition={{ duration: ANIMATION_DURATION }}\n                className={wrapperClasses}\n                style={{ width: internalWidth }}\n                ref={sidebarRef}\n            >\n                {sidebarContent}\n            </motion.div>\n            {hasBackdrop && !closed && (\n                <SidebarBackdrop\n                    className={backdropClassName}\n                    makeBackdropVisible={makeBackdropVisible}\n                    onClick={onBackdropClick}\n                />\n            )}\n        </>\n    );\n};\n\nSidebar.LEFT = SidebarPosition.LEFT;\nSidebar.RIGHT = SidebarPosition.RIGHT;\n\nSidebar.MODE_FLY = SidebarMode.MODE_FLY;\nSidebar.MODE_FLUID = SidebarMode.MODE_FLUID;\n\nexport default Sidebar;\n"],"names":["DEFAULT_WIDTH","DEFAULT_MIN_WIDTH","DEFAULT_MAX_WIDTH","DEFAULT_SWITCH_MODE_BREAKPOINT","MIN_MODULE_CONTENT_WIDTH","MAX_MODULE_CONTENT_WIDTH","ANIMATION_DURATION","RESIZE_THROTTLE","SidebarPosition","SidebarMode","animationVariants","fromRight","closed","Sidebar","props","fly","title","footer","resizable","position","width","minWidth","maxWidth","hasBackdrop","hasSmoothScrollbar","makeBackdropVisible","enableFullscreenToggle","fullscreenToggleTooltip","openInFullscreen","showHeaderBorder","disableClose","bodyRef","headerButtons","switchModeBreakpoint","onClose","noop","onResizeEnd","onFullScreenChange","onBackdropClick","disableEsc","titleClassName","bodyClassName","headerClassName","footerClassName","backdropClassName","className","children","remainingProps","internalWidth","setInternalWidth","useState","toNumber","sidebarMode","setSidebarMode","isFullscreen","setIsFullscreen","isResize","setIsResize","isSplit","setIsSplit","isRight","setIsRight","sidebarRef","useRef","moduleContentRef","useEffect","previousClosed","setPreviousClosed","previousWidth","setPreviousWidth","useWindowResize","adaptSidebarMode","moduleContent","useEsc","moduleContentWidth","isModuleContentTooSmall","isModuleContentBigEnough","isWindowSmallerThanBreakpoint","handleResize","diff","wasSplit","halfWindowWidth","usedMaxWidth","oldWidth","updatedWidth","newWidth","getWidthInBoundaries","handleResizeStart","handleResizeEnd","handleFullscreenChange","newFullscreenState","wrapperClasses","classNames","headerClassNames","titleClassNames","bodyClassNames","resizeLimitClasses","resizeIndicatorPosition","sidebarContent","jsxs","Fragment","jsx","SidebarFullscreenToggle","SidebarCloseButton","SmoothScrollbars","SidebarFooter","Resizer","motion","SidebarBackdrop"],"mappings":"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"}
+{"version":3,"file":"Sidebar.js","sources":["../../../src/components/sidebars/Sidebar.tsx"],"sourcesContent":["import React, { type PropsWithChildren, useEffect, useRef, useState } from 'react';\nimport { motion } from 'motion/react';\nimport { noop } from 'es-toolkit/function';\nimport { toNumber } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport SidebarFooter from './SidebarFooter';\nimport SidebarBackdrop from './SidebarBackdrop';\nimport SidebarFullscreenToggle from './SidebarFullscreenToggle';\nimport SidebarCloseButton from './SidebarCloseButton';\nimport Resizer from '../resizer/Resizer';\nimport useWindowResize from '../../hooks/useWindowResize';\nimport useEsc from '../../hooks/useEsc';\nimport getWidthInBoundaries from '../../utils/getWidthInBoundaries';\nimport type { ObjectValues } from '../../utils/ObjectValues';\nimport SmoothScrollbars from '../smoothScrollbars/SmoothScrollbars';\n\nconst DEFAULT_WIDTH = 350;\nconst DEFAULT_MIN_WIDTH = 100;\nconst DEFAULT_MAX_WIDTH = 800;\nconst DEFAULT_SWITCH_MODE_BREAKPOINT = 0;\n\n// Values define the min and max width for the module-content\n// where the fluid sidebar automatically changes to \"fly\" and back.\nconst MIN_MODULE_CONTENT_WIDTH = 400;\nconst MAX_MODULE_CONTENT_WIDTH = 800;\n\nconst ANIMATION_DURATION = 0.14;\nconst RESIZE_THROTTLE = 500;\n\nconst SidebarPosition = {\n    LEFT: 'left',\n    RIGHT: 'right',\n} as const;\n\nconst SidebarMode = {\n    MODE_FLY: 'fly',\n    MODE_FLUID: 'fluid',\n};\n\ntype AnimationVariantProps = {\n    fromRight: boolean;\n    closed?: boolean;\n};\n\nconst animationVariants = {\n    sidebarEnter: ({ fromRight }: AnimationVariantProps) => ({\n        x: fromRight ? '100%' : '-100%',\n        opacity: 0,\n    }),\n    sidebarVisible: ({ fromRight, closed }: AnimationVariantProps) => ({\n        x: !closed ? 0 : fromRight ? '100%' : '-100%',\n        opacity: closed ? 0 : 1,\n        display: closed ? 'none' : 'block',\n    }),\n    sidebarExit: ({ fromRight }: AnimationVariantProps) => ({\n        x: fromRight ? '100%' : '-100%',\n        opacity: 0,\n    }),\n};\n\nexport type SidebarProps = {\n    /**\n     * Defines if the component will overlap the body content.\n     *\n     * @default false\n     */\n    fly?: boolean;\n\n    /**\n     * Defines whether the component is hidden or not.\n     *\n     * @default false\n     */\n    closed?: boolean;\n\n    /**\n     * Hides the close button. This may be used when the sidebar is always visible and may not be closed.\n     *\n     * @default false\n     */\n    disableClose?: boolean;\n\n    /**\n     * Callback function triggered when clicking the close icon.\n     */\n    onClose?: VoidFunction;\n\n    /**\n     * The Footer content. For example a save button.\n     */\n    footer?: string | React.ReactNode;\n\n    /**\n     * Additional classes added to the Sidebar footer.\n     */\n    footerClassName?: string;\n\n    /**\n     * Additional buttons to be rendered in the header.\n     */\n    headerButtons?: React.ReactNode;\n\n    /**\n     * Additional classes added to the Sidebar header.\n     */\n    headerClassName?: string;\n\n    /**\n     * Shows a sidebar header border\n     */\n    showHeaderBorder?: boolean;\n\n    /**\n     * Defines the width of the component. The value is set as pixel value as inline style.\n     * Note: In the past, the type allowed to pass in a sting value like \"400px\" but that is not\n     * possible anymore due to internal width calculations. To be backwards compatible for non\n     * Typescript projects, the width is converted to a number.\n     *\n     * @default 350\n     */\n    width?: number;\n\n    /**\n     * Defines the minimum width in px of the component that will take effect when resizing.\n     *\n     * @default 100\n     */\n    minWidth?: number;\n\n    /**\n     * Defines the maximum width in px of the component that will take effect when resizing.\n     *\n     * @default 800\n     */\n    maxWidth?: number;\n\n    /**\n     * Opens Sidebar in fullscreen, means 100vw.\n     *\n     * @default false\n     */\n    openInFullscreen?: boolean;\n\n    /**\n     * Callback for when the fullscreen is toggled.\n     */\n    onFullScreenChange?: (newFullscreenState: boolean) => void;\n\n    /**\n     * Enables the fullscreen functionality and shows the fullscreen toggle.\n     *\n     * @default false\n     */\n    enableFullscreenToggle?: boolean;\n\n    /**\n     * Translated tooltip text for the fullscreen toggle button.\n     */\n    fullscreenToggleTooltip?: string;\n\n    /**\n     * Tells the sidebar where it is positioned. This will affect the resizing behavior\n     * respectively. Note: the position need to be set properly whe using the resize\n     * functionality to know on which side of the sidebar to attach the resizer handle.\n     *\n     * It is also relevant when the sidebar mode is set to `fly` to properly animate\n     * the sidebar into the view.\n     *\n     * Possible values are:\n     *\n     * - `'left'`\n     * - `'right'`\n     * - `Sidebar.LEFT`\n     * - `Sidebar.RIGHT`\n     *\n     * @default 'left'\n     */\n    position?: ObjectValues<typeof SidebarPosition>;\n\n    /**\n     * Defines whether or not the sidebar is resizable.\n     * @default false\n     */\n    resizable?: boolean;\n\n    /**\n     * Callback for when the resize is done.\n     */\n    onResizeEnd?: VoidFunction;\n\n    /**\n     * Defines the breakpoint in pixel when the sidebar mode shall be changed. If the window width is lower\n     * than the given breakpoint the mode is set to `fly`. If the window width is higher the mode is set\n     * to `fluid`. This functionality is disabled by default and will be enabled when defining a breakpoint\n     * higher than 0.\n     */\n    switchModeBreakpoint?: number;\n\n    /**\n     * By default the fullscreen mode can be left with \"esc\". If this is unwanted it can be disabled.\n     *\n     * @default false\n     */\n    disableEsc?: boolean;\n\n    /**\n     * Defined whether or not a backdrop will be rendered behind the Sidebar to avoid clicks outside.\n     *\n     * @default false\n     */\n    hasBackdrop?: boolean;\n\n    /**\n     * Defined whether or not the UIKIT SmoothScrollbar is active.\n     *\n     * @default false\n     */\n    hasSmoothScrollbar?: boolean;\n\n    /**\n     * Defined whether or not the backdrop is visible similar to the backdrop for modal dialogs.\n     *\n     * @default false\n     */\n    makeBackdropVisible?: boolean;\n\n    /**\n     * Callback for when the backdrop is clicked. This comes in handy when handling transient data from\n     * the sidebar which need to be saved first and handle clicks outside.\n     */\n    onBackdropClick?: VoidFunction;\n\n    /**\n     * Additional ref added to the Sidebar body.\n     */\n    bodyRef?: React.MutableRefObject<HTMLDivElement | null>;\n\n    /**\n     * Content that will be displayed in the components header.\n     */\n    title?: string | React.ReactNode;\n\n    /**\n     * Additional classes added to the Sidebar title.\n     */\n    titleClassName?: string;\n\n    /**\n     * Additional classes added to the Sidebar backdrop.\n     */\n    backdropClassName?: string;\n\n    /**\n     * Additional classes added to the Sidebar body.\n     */\n    bodyClassName?: string;\n\n    /**\n     * Additional classes added on the wrapper element.\n     */\n    className?: string;\n};\n\nconst Sidebar = (props: PropsWithChildren<SidebarProps>) => {\n    const {\n        fly = false,\n        closed = false,\n        title = '',\n        footer,\n        resizable = false,\n        position,\n        width = DEFAULT_WIDTH,\n        minWidth = DEFAULT_MIN_WIDTH,\n        maxWidth = DEFAULT_MAX_WIDTH,\n        hasBackdrop = false,\n        hasSmoothScrollbar = false,\n        makeBackdropVisible = false,\n        enableFullscreenToggle = false,\n        fullscreenToggleTooltip,\n        openInFullscreen = false,\n        showHeaderBorder = false,\n        disableClose = false,\n        bodyRef,\n        headerButtons,\n        switchModeBreakpoint = DEFAULT_SWITCH_MODE_BREAKPOINT,\n        onClose = noop,\n        onResizeEnd = noop,\n        onFullScreenChange = noop,\n        onBackdropClick = noop,\n        disableEsc = false,\n        titleClassName = '',\n        bodyClassName = '',\n        headerClassName = '',\n        footerClassName = '',\n        backdropClassName = '',\n        className = '',\n        children,\n        ...remainingProps\n    } = props;\n\n    const [internalWidth, setInternalWidth] = useState(toNumber(width));\n    const [sidebarMode, setSidebarMode] = useState(fly ? Sidebar.MODE_FLY : Sidebar.MODE_FLUID);\n    const [isFullscreen, setIsFullscreen] = useState(openInFullscreen);\n    const [isResize, setIsResize] = useState(false);\n    const [isSplit, setIsSplit] = useState(false);\n    const [isRight, setIsRight] = useState(position === SidebarPosition.RIGHT);\n\n    const sidebarRef = useRef<HTMLDivElement>(null);\n\n    // Used to keep the external reference to the module-content to avoid querying the DOM\n    // periodically on window resize\n    const moduleContentRef: React.MutableRefObject<HTMLDivElement | null> = useRef(null);\n\n    // Position fallback in case the position property is not defined but the sidebar mode is fly\n    // and we want to animate it, we nee to know the direction from where th sidebar is coming from.\n    // That's why we check the ApplicationLayoutSidebar class if the sidebar inside is right aligned\n    // or not and us this value instead.\n    // Note: the position need to be set properly whe using the resize functionality to know on which\n    // side of the sidebar to attach the resizer handle.\n    useEffect(() => {\n        if (sidebarRef.current && sidebarMode === Sidebar.MODE_FLY) {\n            const sidebarLayout = sidebarRef.current.parentNode as HTMLDivElement;\n            if (sidebarLayout?.className.includes('right')) {\n                setIsRight(true);\n            }\n        }\n    }, [sidebarRef.current, sidebarMode]);\n\n    // Keep the previous closed state in order to prevent animation when switching sidebar mode\n    const [previousClosed, setPreviousClosed] = useState(closed);\n    if (previousClosed !== closed) {\n        setPreviousClosed(closed);\n    }\n\n    // Update internal width from outside\n    const [previousWidth, setPreviousWidth] = useState(width);\n    if (previousWidth !== width) {\n        console.log('update internal width');\n        setInternalWidth(toNumber(width));\n        setPreviousWidth(width);\n    }\n\n    // Switch between mode \"fly\" and \"fluid\"\n    useWindowResize(() => adaptSidebarMode(), RESIZE_THROTTLE);\n\n    // Initially check breakpoint after mounting the component\n    useEffect(() => adaptSidebarMode(), []);\n\n    // When Sidebar opens, check for available module-content width and\n    // switch sidebar mode to fly in case\n    useEffect(() => {\n        if (!closed) {\n            setTimeout(() => adaptSidebarMode());\n        }\n    }, [closed]);\n\n    useEffect(() => {\n        const moduleContent = document.querySelector('.module-content');\n        if (moduleContent) {\n            moduleContentRef.current = moduleContent as HTMLDivElement;\n        }\n    }, []);\n\n    // Close the fullscreen with \"esc\"\n    useEsc(() => {\n        if (!disableEsc && enableFullscreenToggle && isFullscreen) {\n            setIsFullscreen(false);\n            onFullScreenChange(false);\n        }\n    });\n\n    const adaptSidebarMode = () => {\n        const moduleContentWidth = moduleContentRef.current?.clientWidth;\n\n        if (fly || switchModeBreakpoint === DEFAULT_SWITCH_MODE_BREAKPOINT) {\n            return;\n        }\n\n        const isModuleContentTooSmall = moduleContentWidth && moduleContentWidth <= MIN_MODULE_CONTENT_WIDTH;\n        const isModuleContentBigEnough = moduleContentWidth && moduleContentWidth > MAX_MODULE_CONTENT_WIDTH;\n\n        const isWindowSmallerThanBreakpoint = window.innerWidth <= switchModeBreakpoint;\n\n        // switch to fly when module-content is less than x pixel and back if it is bigger\n        if (isModuleContentTooSmall || isWindowSmallerThanBreakpoint) {\n            setSidebarMode(Sidebar.MODE_FLY);\n            return;\n        }\n\n        // if module-content is bigger and is initially fluid set back to initial fluid state\n        if (isModuleContentBigEnough && !isWindowSmallerThanBreakpoint) {\n            setSidebarMode(Sidebar.MODE_FLUID);\n            return;\n        }\n    };\n\n    const handleResize = (diff: number) => {\n        const wasSplit = isSplit;\n        const halfWindowWidth = window.innerWidth * 0.5;\n        const usedMaxWidth = maxWidth || halfWindowWidth;\n\n        // Check for sidebar width if it is half the window size. If it was before but the sidebar was resized so it is\n        // no longer half window size, set the sidebar with to half window size to avoid jumping sidebar to old width\n        setInternalWidth(oldWidth => {\n            const updatedWidth = position === Sidebar.RIGHT ? oldWidth + diff : oldWidth - diff;\n            const newWidth = getWidthInBoundaries(minWidth, usedMaxWidth, updatedWidth);\n\n            const newIsSplit = newWidth === halfWindowWidth;\n            setIsSplit(newIsSplit);\n\n            return wasSplit && !isSplit ? halfWindowWidth : newWidth;\n        });\n\n        adaptSidebarMode();\n    };\n\n    const handleResizeStart = () => {\n        const body = document.body;\n        body?.classList.add('pointer-events-none');\n        setIsResize(true);\n    };\n\n    const handleResizeEnd = () => {\n        const body = document.body;\n        body?.classList.remove('pointer-events-none');\n        setIsResize(false);\n        onResizeEnd();\n    };\n\n    const handleFullscreenChange = () => {\n        const newFullscreenState = !isFullscreen;\n        setIsFullscreen(newFullscreenState);\n        onFullScreenChange(newFullscreenState);\n    };\n\n    const wrapperClasses = classNames(\n        'Sidebar',\n        className,\n        closed && 'closed',\n        isFullscreen && 'width-100vw sidebar-fullscreen',\n        isSplit && !isFullscreen && 'max-width-50vw width-50vw',\n        sidebarMode === SidebarMode.MODE_FLY ? 'fly' : isFullscreen ? 'fly' : 'fluid'\n    );\n\n    const headerClassNames = classNames('SidebarHeader', headerClassName, showHeaderBorder && 'show-border');\n    const titleClassNames = classNames('SidebarTitle', titleClassName);\n    const bodyClassNames = classNames('SidebarBody', bodyClassName);\n\n    const resizeLimitClasses = classNames('SidebarResizeLimit', isResize && 'display-block');\n\n    const resizeIndicatorPosition = maxWidth || window.innerWidth * 0.5;\n    const resizeLimitStyle = isRight ? { right: resizeIndicatorPosition } : { left: resizeIndicatorPosition };\n\n    const sidebarContent = (\n        <>\n            <div className={resizeLimitClasses} style={resizeLimitStyle} />\n            <div className='SidebarContent'>\n                <div className={headerClassNames}>\n                    <div className={titleClassNames}>{title}</div>\n                    <div className='SidebarButtons non-printable close'>\n                        {headerButtons}\n                        {enableFullscreenToggle && (\n                            <SidebarFullscreenToggle\n                                isFullscreen={isFullscreen}\n                                onClick={handleFullscreenChange}\n                                tooltip={fullscreenToggleTooltip}\n                            />\n                        )}\n                        {!disableClose && (headerButtons || enableFullscreenToggle) && (\n                            <div className='SidebarButtons-spacer' />\n                        )}\n                        {!disableClose && <SidebarCloseButton title={title} onClick={onClose} />}\n                    </div>\n                </div>\n                {hasSmoothScrollbar ? (\n                    <SmoothScrollbars slideIn className={bodyClassNames} ref={bodyRef}>\n                        {children}\n                    </SmoothScrollbars>\n                ) : (\n                    <div className={bodyClassNames} ref={bodyRef}>\n                        {children}\n                    </div>\n                )}\n\n                <SidebarFooter footer={footer} className={footerClassName} />\n            </div>\n            {resizable && (\n                <Resizer\n                    onResizeStart={handleResizeStart}\n                    onResize={handleResize}\n                    onResizeEnd={handleResizeEnd}\n                    direction={Resizer.HORIZONTAL}\n                    position={isRight ? Resizer.LEFT : Resizer.RIGHT}\n                />\n            )}\n        </>\n    );\n\n    return (\n        <>\n            <motion.div\n                {...remainingProps}\n                initial={previousClosed && 'sidebarEnter'}\n                animate='sidebarVisible'\n                // Cannot exit animation as sidebar is moved to offscreen by CSS class, means is still mounted\n                exit='sidebarExit'\n                variants={animationVariants}\n                custom={{ fromRight: isRight, closed }}\n                transition={{ duration: ANIMATION_DURATION }}\n                className={wrapperClasses}\n                style={{ width: internalWidth }}\n                ref={sidebarRef}\n            >\n                {sidebarContent}\n            </motion.div>\n            {hasBackdrop && !closed && (\n                <SidebarBackdrop\n                    className={backdropClassName}\n                    makeBackdropVisible={makeBackdropVisible}\n                    onClick={onBackdropClick}\n                />\n            )}\n        </>\n    );\n};\n\nSidebar.LEFT = SidebarPosition.LEFT;\nSidebar.RIGHT = SidebarPosition.RIGHT;\n\nSidebar.MODE_FLY = SidebarMode.MODE_FLY;\nSidebar.MODE_FLUID = SidebarMode.MODE_FLUID;\n\nexport default Sidebar;\n"],"names":["DEFAULT_WIDTH","DEFAULT_MIN_WIDTH","DEFAULT_MAX_WIDTH","DEFAULT_SWITCH_MODE_BREAKPOINT","MIN_MODULE_CONTENT_WIDTH","MAX_MODULE_CONTENT_WIDTH","ANIMATION_DURATION","RESIZE_THROTTLE","SidebarPosition","SidebarMode","animationVariants","fromRight","closed","Sidebar","props","fly","title","footer","resizable","position","width","minWidth","maxWidth","hasBackdrop","hasSmoothScrollbar","makeBackdropVisible","enableFullscreenToggle","fullscreenToggleTooltip","openInFullscreen","showHeaderBorder","disableClose","bodyRef","headerButtons","switchModeBreakpoint","onClose","noop","onResizeEnd","onFullScreenChange","onBackdropClick","disableEsc","titleClassName","bodyClassName","headerClassName","footerClassName","backdropClassName","className","children","remainingProps","internalWidth","setInternalWidth","useState","toNumber","sidebarMode","setSidebarMode","isFullscreen","setIsFullscreen","isResize","setIsResize","isSplit","setIsSplit","isRight","setIsRight","sidebarRef","useRef","moduleContentRef","useEffect","previousClosed","setPreviousClosed","previousWidth","setPreviousWidth","useWindowResize","adaptSidebarMode","moduleContent","useEsc","moduleContentWidth","isModuleContentTooSmall","isModuleContentBigEnough","isWindowSmallerThanBreakpoint","handleResize","diff","wasSplit","halfWindowWidth","usedMaxWidth","oldWidth","updatedWidth","newWidth","getWidthInBoundaries","handleResizeStart","handleResizeEnd","handleFullscreenChange","newFullscreenState","wrapperClasses","classNames","headerClassNames","titleClassNames","bodyClassNames","resizeLimitClasses","resizeIndicatorPosition","sidebarContent","jsxs","Fragment","jsx","SidebarFullscreenToggle","SidebarCloseButton","SmoothScrollbars","SidebarFooter","Resizer","motion","SidebarBackdrop"],"mappings":"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"}

package/components/sidebars/SidebarCloseButton.d.ts

@@ -1,5 +1,7 @@
+import { ReactNode } from 'react';
 export type SidebarCloseButtonProps = {
+    title?: ReactNode;
     onClick?: VoidFunction;
 };
-declare const SidebarCloseButton: ({ onClick }: SidebarCloseButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const SidebarCloseButton: ({ title, onClick }: SidebarCloseButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default SidebarCloseButton;

package/components/sidebars/SidebarCloseButton.js

@@ -1,8 +1,22 @@
-import { jsx as o } from "react/jsx-runtime";
-import { noop as e } from "es-toolkit/function";
-import t from "../button/Button.js";
-const l = ({ onClick: r = e }) => /* @__PURE__ */ o(t, { bsStyle: t.MUTED, iconOnly: !0, onClick: r, "data-testid": "sidebarCloseButton", children: /* @__PURE__ */ o("span", { className: "rioglyph rioglyph-remove" }) });
+import { jsx as t } from "react/jsx-runtime";
+import { noop as i } from "es-toolkit/function";
+import r from "../button/Button.js";
+import { getTrackingLabelFromNode as n } from "../../utils/analytics/getTrackingLabelFromNode.js";
+const d = ({ title: e, onClick: a = i }) => {
+  const o = n(e);
+  return /* @__PURE__ */ t(
+    r,
+    {
+      bsStyle: r.MUTED,
+      iconOnly: !0,
+      onClick: a,
+      autoTrackingKey: o && `sidebar::closed::${o}`,
+      "data-testid": "sidebarCloseButton",
+      children: /* @__PURE__ */ t("span", { className: "rioglyph rioglyph-remove" })
+    }
+  );
+};
 export {
-  l as default
+  d as default
 };
 //# sourceMappingURL=SidebarCloseButton.js.map

package/components/sidebars/SidebarCloseButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarCloseButton.js","sources":["../../../src/components/sidebars/SidebarCloseButton.tsx"],"sourcesContent":["import { noop } from 'es-toolkit/function';\n\nimport Button from '../button/Button';\n\nexport type SidebarCloseButtonProps = {\n    onClick?: VoidFunction;\n};\n\nconst SidebarCloseButton = ({ onClick = noop }: SidebarCloseButtonProps) => (\n    <Button bsStyle={Button.MUTED} iconOnly onClick={onClick} data-testid='sidebarCloseButton'>\n        <span className='rioglyph rioglyph-remove' />\n    </Button>\n);\n\nexport default SidebarCloseButton;\n"],"names":["SidebarCloseButton","onClick","noop","jsx","Button"],"mappings":";;;AAQA,MAAMA,IAAqB,CAAC,EAAE,SAAAC,IAAUC,QACpC,gBAAAC,EAACC,KAAO,SAASA,EAAO,OAAO,UAAQ,IAAC,SAAAH,GAAkB,eAAY,sBAClE,4BAAC,QAAA,EAAK,WAAU,4BAA2B,EAAA,CAC/C;"}
+{"version":3,"file":"SidebarCloseButton.js","sources":["../../../src/components/sidebars/SidebarCloseButton.tsx"],"sourcesContent":["import { noop } from 'es-toolkit/function';\nimport type { ReactNode } from 'react';\n\nimport Button from '../button/Button';\nimport { getTrackingLabelFromNode } from '../../utils/analytics/getTrackingLabelFromNode';\n\nexport type SidebarCloseButtonProps = {\n    title?: ReactNode;\n    onClick?: VoidFunction;\n};\n\nconst SidebarCloseButton = ({ title, onClick = noop }: SidebarCloseButtonProps) => {\n    const titleTrackingValue = getTrackingLabelFromNode(title);\n\n    return (\n        <Button\n            bsStyle={Button.MUTED}\n            iconOnly\n            onClick={onClick}\n            autoTrackingKey={titleTrackingValue && `sidebar::closed::${titleTrackingValue}`}\n            data-testid='sidebarCloseButton'\n        >\n            <span className='rioglyph rioglyph-remove' />\n        </Button>\n    );\n};\n\nexport default SidebarCloseButton;\n"],"names":["SidebarCloseButton","title","onClick","noop","titleTrackingValue","getTrackingLabelFromNode","jsx","Button"],"mappings":";;;;AAWA,MAAMA,IAAqB,CAAC,EAAE,OAAAC,GAAO,SAAAC,IAAUC,QAAoC;AAC/E,QAAMC,IAAqBC,EAAyBJ,CAAK;AAEzD,SACI,gBAAAK;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,SAASA,EAAO;AAAA,MAChB,UAAQ;AAAA,MACR,SAAAL;AAAA,MACA,iBAAiBE,KAAsB,oBAAoBA,CAAkB;AAAA,MAC7E,eAAY;AAAA,MAEZ,UAAA,gBAAAE,EAAC,QAAA,EAAK,WAAU,2BAAA,CAA2B;AAAA,IAAA;AAAA,EAAA;AAGvD;"}

package/components/states/CustomState.d.ts

@@ -21,10 +21,16 @@ export type BaseStateProps = {
     image?: React.ReactNode;
     /**
      * The headline to be shown.
+     *
+     * Always provide a clear headline for state components.
      */
     headline?: string | React.ReactNode;
     /**
-     * The text to display.
+     * The descriptive text to display below the headline.
+     *
+     * Always provide a message for state components such as ErrorState, NotFoundState,
+     * EmptyState, ForbiddenState, MaintenanceState and CustomState so users understand
+     * what happened and what they can do next.
      */
     message?: string | React.ReactNode;
     /**

package/components/states/CustomState.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomState.js","sources":["../../../src/components/states/CustomState.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\nimport { isEmpty } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport StateButton, { type StateButtonProps } from './StateButton';\nimport StateIcon from './StateIcon';\nimport type { TextAlignment } from '../../values/TextAlignment';\nimport type { StateIconProps } from './StateIcon';\nimport { hasPaddingClass } from '../../utils/hasUtilityClass';\n\nexport type BaseStateProps = {\n    /**\n     * The icon to be shown.\n     *\n     * Default icons are defined for all states.\n     */\n    icon?: string;\n\n    /**\n     * List of icons to show instead a single icon.\n     *\n     * @default []\n     */\n    icons?: StateIconProps[];\n\n    /**\n     * Custom Image if needed.\n     */\n    image?: React.ReactNode;\n\n    /**\n     * The headline to be shown.\n     */\n    headline?: string | React.ReactNode;\n\n    /**\n     * The text to display.\n     */\n    message?: string | React.ReactNode;\n\n    /**\n     * Definitions for the buttons to show.\n     *\n     * @default []\n     */\n    buttons?: StateButtonProps[];\n\n    /**\n     * Defines whether to use 100% width or default width.\n     *\n     * __Note:__ Only to be used for special cases on the CustomState component.\n     *\n     * @default false\n     */\n    fullWidth?: boolean;\n\n    /**\n     * Smaller icon and headline size.\n     *\n     * @default false\n     */\n    condensed?: boolean;\n\n    /**\n     * Defines where the panel is aligned.\n     *\n     * Possible values are:\n     *\n     * - `'left'`\n     * - `'center'`\n     * - `'right'`\n     *\n     * @default 'center'\n     */\n    alignment?: TextAlignment;\n\n    /**\n     * Optional class names for the wrapper.\n     */\n    outerClassName?: string;\n\n    /**\n     * Optional class names for the content.\n     */\n    innerClassName?: string;\n};\n\nconst justify: Record<TextAlignment, string> = {\n    left: 'justify-content-start',\n    center: 'justify-content-center',\n    right: 'justify-content-end',\n};\n\nconst renderButtons = (buttons: StateButtonProps[]) => {\n    if (isEmpty(buttons)) {\n        return;\n    }\n\n    if (buttons.length === 1) {\n        return (\n            <div className='btn-toolbar margin-top-20'>\n                <StateButton {...buttons[0]} />\n            </div>\n        );\n    }\n\n    if (buttons.length === 2) {\n        return (\n            <div className='btn-toolbar margin-top-20 justify-content-center-xs'>\n                {buttons.map((buttonProps, index) => (\n                    <StateButton key={index} {...buttonProps} />\n                ))}\n            </div>\n        );\n    }\n\n    return (\n        <>\n            <div className='btn-toolbar margin-top-20 justify-content-center-xs'>\n                <StateButton key='1' {...buttons[0]} />\n                <StateButton key='2' {...buttons[1]} />\n            </div>\n            <div className='btn-toolbar'>\n                {buttons.map((buttonProps, index) => index > 1 && <StateButton key={index} {...buttonProps} />)}\n            </div>\n        </>\n    );\n};\n\nexport type CustomStateProps = BaseStateProps;\n\nconst CustomState = (props: PropsWithChildren<CustomStateProps>) => {\n    const {\n        icon,\n        icons = [],\n        image,\n        headline,\n        message,\n        buttons = [],\n        alignment = 'center',\n        fullWidth = false,\n        condensed = false,\n        outerClassName = '',\n        innerClassName = '',\n        children,\n        ...remainingProps\n    } = props;\n\n    const wrapperClasses = classNames(\n        'margin-0',\n        'width-100pct',\n        !fullWidth && 'max-width-600',\n        'panel-default',\n        'panel',\n        !hasPaddingClass(outerClassName) ? (condensed ? 'padding-10' : 'padding-15') : '',\n        outerClassName\n    );\n\n    const innerClassNames = classNames(\n        'display-flex',\n        'flex-column',\n        'align-items-center',\n        'text-center',\n        !hasPaddingClass(innerClassName) ? (condensed ? 'padding-15' : 'padding-25') : '',\n        innerClassName\n    );\n\n    const iconClasses = classNames(condensed ? 'text-size-16 margin-bottom-10' : 'text-size-h2 margin-bottom-20');\n\n    const iconsClasses = classNames(\n        condensed ? 'text-size-16 margin-bottom-10' : 'text-size-h2 margin-bottom-20',\n        'display-flex',\n        'align-items-center',\n        'max-width-100pct'\n    );\n\n    const headlineClassNames = classNames(\n        condensed ? 'text-size-h4' : 'text-size-h3 text-size-h2-xl',\n        'line-height-125rel',\n        'text-color-dark',\n        'text-medium',\n        'width-500',\n        'max-width-100pct',\n        'text-wrap-balance'\n    );\n\n    const renderIcon = (\n        <>\n            {icon && (\n                <div className={iconClasses}>\n                    <StateIcon name={icon} />\n                </div>\n            )}\n        </>\n    );\n\n    const renderIcons = (\n        <div className={iconsClasses}>\n            {icons.map((iconProps, index) => (\n                <StateIcon key={index} {...iconProps} />\n            ))}\n        </div>\n    );\n\n    const renderChildren = <div className='width-500 max-width-100pct margin-top-25'>{children}</div>;\n\n    const renderHeadline = <div className={headlineClassNames}>{headline}</div>;\n\n    const renderMessage = (\n        <div className='text-color-dark margin-top-15 width-500 max-width-100pct text-wrap-balance'>{message}</div>\n    );\n\n    const singleOrMultiIcon = isEmpty(icons) ? renderIcon : renderIcons;\n\n    const imageOrIcon = image ? image : singleOrMultiIcon;\n\n    return (\n        <div className={`display-flex ${justify[alignment]} max-width-100pct`} {...remainingProps}>\n            <div className={wrapperClasses}>\n                <div className={innerClassNames}>\n                    {imageOrIcon}\n                    {headline && renderHeadline}\n                    {message && renderMessage}\n                    {renderButtons(buttons)}\n                    {children && renderChildren}\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default CustomState;\n"],"names":["justify","renderButtons","buttons","isEmpty","jsx","StateButton","buttonProps","index","jsxs","Fragment","CustomState","props","icon","icons","image","headline","message","alignment","fullWidth","condensed","outerClassName","innerClassName","children","remainingProps","wrapperClasses","classNames","hasPaddingClass","innerClassNames","iconClasses","iconsClasses","headlineClassNames","renderIcon","StateIcon","renderIcons","iconProps","renderChildren","renderHeadline","renderMessage","singleOrMultiIcon","imageOrIcon"],"mappings":"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"}
+{"version":3,"file":"CustomState.js","sources":["../../../src/components/states/CustomState.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\nimport { isEmpty } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport StateButton, { type StateButtonProps } from './StateButton';\nimport StateIcon from './StateIcon';\nimport type { TextAlignment } from '../../values/TextAlignment';\nimport type { StateIconProps } from './StateIcon';\nimport { hasPaddingClass } from '../../utils/hasUtilityClass';\n\nexport type BaseStateProps = {\n    /**\n     * The icon to be shown.\n     *\n     * Default icons are defined for all states.\n     */\n    icon?: string;\n\n    /**\n     * List of icons to show instead a single icon.\n     *\n     * @default []\n     */\n    icons?: StateIconProps[];\n\n    /**\n     * Custom Image if needed.\n     */\n    image?: React.ReactNode;\n\n    /**\n     * The headline to be shown.\n     *\n     * Always provide a clear headline for state components.\n     */\n    headline?: string | React.ReactNode;\n\n    /**\n     * The descriptive text to display below the headline.\n     *\n     * Always provide a message for state components such as ErrorState, NotFoundState,\n     * EmptyState, ForbiddenState, MaintenanceState and CustomState so users understand\n     * what happened and what they can do next.\n     */\n    message?: string | React.ReactNode;\n\n    /**\n     * Definitions for the buttons to show.\n     *\n     * @default []\n     */\n    buttons?: StateButtonProps[];\n\n    /**\n     * Defines whether to use 100% width or default width.\n     *\n     * __Note:__ Only to be used for special cases on the CustomState component.\n     *\n     * @default false\n     */\n    fullWidth?: boolean;\n\n    /**\n     * Smaller icon and headline size.\n     *\n     * @default false\n     */\n    condensed?: boolean;\n\n    /**\n     * Defines where the panel is aligned.\n     *\n     * Possible values are:\n     *\n     * - `'left'`\n     * - `'center'`\n     * - `'right'`\n     *\n     * @default 'center'\n     */\n    alignment?: TextAlignment;\n\n    /**\n     * Optional class names for the wrapper.\n     */\n    outerClassName?: string;\n\n    /**\n     * Optional class names for the content.\n     */\n    innerClassName?: string;\n};\n\nconst justify: Record<TextAlignment, string> = {\n    left: 'justify-content-start',\n    center: 'justify-content-center',\n    right: 'justify-content-end',\n};\n\nconst renderButtons = (buttons: StateButtonProps[]) => {\n    if (isEmpty(buttons)) {\n        return;\n    }\n\n    if (buttons.length === 1) {\n        return (\n            <div className='btn-toolbar margin-top-20'>\n                <StateButton {...buttons[0]} />\n            </div>\n        );\n    }\n\n    if (buttons.length === 2) {\n        return (\n            <div className='btn-toolbar margin-top-20 justify-content-center-xs'>\n                {buttons.map((buttonProps, index) => (\n                    <StateButton key={index} {...buttonProps} />\n                ))}\n            </div>\n        );\n    }\n\n    return (\n        <>\n            <div className='btn-toolbar margin-top-20 justify-content-center-xs'>\n                <StateButton key='1' {...buttons[0]} />\n                <StateButton key='2' {...buttons[1]} />\n            </div>\n            <div className='btn-toolbar'>\n                {buttons.map((buttonProps, index) => index > 1 && <StateButton key={index} {...buttonProps} />)}\n            </div>\n        </>\n    );\n};\n\nexport type CustomStateProps = BaseStateProps;\n\nconst CustomState = (props: PropsWithChildren<CustomStateProps>) => {\n    const {\n        icon,\n        icons = [],\n        image,\n        headline,\n        message,\n        buttons = [],\n        alignment = 'center',\n        fullWidth = false,\n        condensed = false,\n        outerClassName = '',\n        innerClassName = '',\n        children,\n        ...remainingProps\n    } = props;\n\n    const wrapperClasses = classNames(\n        'margin-0',\n        'width-100pct',\n        !fullWidth && 'max-width-600',\n        'panel-default',\n        'panel',\n        !hasPaddingClass(outerClassName) ? (condensed ? 'padding-10' : 'padding-15') : '',\n        outerClassName\n    );\n\n    const innerClassNames = classNames(\n        'display-flex',\n        'flex-column',\n        'align-items-center',\n        'text-center',\n        !hasPaddingClass(innerClassName) ? (condensed ? 'padding-15' : 'padding-25') : '',\n        innerClassName\n    );\n\n    const iconClasses = classNames(condensed ? 'text-size-16 margin-bottom-10' : 'text-size-h2 margin-bottom-20');\n\n    const iconsClasses = classNames(\n        condensed ? 'text-size-16 margin-bottom-10' : 'text-size-h2 margin-bottom-20',\n        'display-flex',\n        'align-items-center',\n        'max-width-100pct'\n    );\n\n    const headlineClassNames = classNames(\n        condensed ? 'text-size-h4' : 'text-size-h3 text-size-h2-xl',\n        'line-height-125rel',\n        'text-color-dark',\n        'text-medium',\n        'width-500',\n        'max-width-100pct',\n        'text-wrap-balance'\n    );\n\n    const renderIcon = (\n        <>\n            {icon && (\n                <div className={iconClasses}>\n                    <StateIcon name={icon} />\n                </div>\n            )}\n        </>\n    );\n\n    const renderIcons = (\n        <div className={iconsClasses}>\n            {icons.map((iconProps, index) => (\n                <StateIcon key={index} {...iconProps} />\n            ))}\n        </div>\n    );\n\n    const renderChildren = <div className='width-500 max-width-100pct margin-top-25'>{children}</div>;\n\n    const renderHeadline = <div className={headlineClassNames}>{headline}</div>;\n\n    const renderMessage = (\n        <div className='text-color-dark margin-top-15 width-500 max-width-100pct text-wrap-balance'>{message}</div>\n    );\n\n    const singleOrMultiIcon = isEmpty(icons) ? renderIcon : renderIcons;\n\n    const imageOrIcon = image ? image : singleOrMultiIcon;\n\n    return (\n        <div className={`display-flex ${justify[alignment]} max-width-100pct`} {...remainingProps}>\n            <div className={wrapperClasses}>\n                <div className={innerClassNames}>\n                    {imageOrIcon}\n                    {headline && renderHeadline}\n                    {message && renderMessage}\n                    {renderButtons(buttons)}\n                    {children && renderChildren}\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default CustomState;\n"],"names":["justify","renderButtons","buttons","isEmpty","jsx","StateButton","buttonProps","index","jsxs","Fragment","CustomState","props","icon","icons","image","headline","message","alignment","fullWidth","condensed","outerClassName","innerClassName","children","remainingProps","wrapperClasses","classNames","hasPaddingClass","innerClassNames","iconClasses","iconsClasses","headlineClassNames","renderIcon","StateIcon","renderIcons","iconProps","renderChildren","renderHeadline","renderMessage","singleOrMultiIcon","imageOrIcon"],"mappings":"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"}

package/components/states/StateButton.d.ts

@@ -1,6 +1,7 @@
 import { default as React } from 'react';
+import { AutoTrackingAttributes } from '../../utils/analytics/autoTracking';
 import { BUTTON_STYLE } from '../../Button';
-export type StateButtonProps = {
+export type StateButtonProps = AutoTrackingAttributes & {
     /**
      * The button text.
      *
@@ -29,6 +30,15 @@ export type StateButtonProps = {
      * Additional classes assigned to the button.
      */
     className?: string;
+    /**
+     * Optional key used to generate automatic GA tracking attributes when no explicit
+     * tracking attributes are provided.
+     */
+    autoTrackingKey?: string;
+    /**
+     * Optional tracking attributes (e.g. from `getTrackingAttributes`) added to the button or link element.
+     */
+    trackingAttributes?: AutoTrackingAttributes;
 };
 declare const StateButton: (props: StateButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default StateButton;