@rio-cloud/rio-uikit 2.2.1 → 2.3.0-beta.2

package/components/autosuggest/AutoSuggest.js.map

@@ -1 +1 @@
-{"version":3,"file":"AutoSuggest.js","sources":["../../../src/components/autosuggest/AutoSuggest.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { isEmpty } from 'es-toolkit/compat';\nimport { noop } from 'es-toolkit/function';\nimport { isNil } from 'es-toolkit/predicate';\n\nimport classNames from '../../utils/classNames';\nimport ClearableInput from '../clearableInput/ClearableInput';\nimport { scrollItemIntoView, UP, DOWN } from '../../utils/scrollItemIntoView';\nimport { useDropDirection } from '../../utils/useDropDirection';\nimport DropdownHeader from '../selects/DropdownHeader';\nimport MenuItem from '../menuItems/MenuItem';\nimport useClickOutside from '../../hooks/useClickOutside';\nimport AutoSuggestAddons from './AutoSuggestAddons';\nimport DropdownSpinner from './DropdownSpinner';\nimport NoItemMessage from './NoItemMessage';\n\nexport type AutoSuggestSuggestion = {\n    /**\n     * The text label for a suggestion item. If present, this will be returned when selecting the suggestion.\n     */\n    label?: string;\n\n    /**\n     * Set to disable the suggestion and disallow selecting it.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Optional custom suggestion node that will be rendered as given. Example, this is used by the TagManager\n     * to render a placeholder with an icon next to it.\n     */\n    customSuggestion?: React.ReactNode;\n\n    /**\n     * Additional key-value pairs that are not relevant for rendering but may be handled on your side.\n     */\n    [name: string]: string | React.ReactNode;\n};\n\nexport type SelectedSuggestion = {\n    suggestionValue: string | React.ReactElement;\n    suggestion: AutoSuggestSuggestion;\n};\n\nexport type AutoSuggestInputProps = {\n    /**\n     * A native input id attribute. Passed through as HTML attribute to the input element.\n     */\n    id?: string;\n\n    /**\n     * The value to be set for the input. Using this prop the input can be controlled from the outside.\n     */\n    value?: string;\n\n    /**\n     * String that will be displayed inside the input when nothing is typed in.\n     * @default `Start typing ...`\n     */\n    placeholder?: string | React.ReactNode;\n\n    /**\n     * Icon class name that shall be used. If defined, the input element is wrapped in an input-group\n     * and the icon will be set in an input-addon. Example: `rioglyph-search`.\n     */\n    icon?: string;\n\n    /**\n     * Callback function which will be called when the input changes. __This is usually not needed__ as\n     * the \"onSuggestionsFetchRequested\" callback takes care of any input change. It is listed here\n     * for completeness and for certain edge cases.\n     *\n     * __Note:__ It might be removed in the future when not needed.'\n     * @deprecated please use `onSuggestionsFetchRequested` instead\n     * @param changeEvent\n     * @param changeProps\n     * @returns\n     */\n    onChange?: (changeEvent: React.SyntheticEvent, changeProps: { newValue: string }) => void;\n\n    /**\n     * Callback function which gets triggered when the input gaines focus.\n     */\n    onFocus?: VoidFunction;\n\n    /**\n     * Callback function which gets triggered when the input looses the focus.\n     */\n    onBlur?: VoidFunction;\n\n    /**\n     * Callback function which will be called when the input is cleared. __This is usually not needed__ as\n     * the \"onSuggestionsFetchRequested\" callback takes care of any input change. It is listed here\n     * for completeness and for certain edge cases.\n     *\n     * __Note:__ It might be removed in the future when not needed.\n     */\n    onClear?: VoidFunction;\n\n    /**\n     * Boolean value that adds the class `has-error` to the input\n     * component. Use this for validation use cases. The Autosuggest component\n     * should be wrapped in a `form-group` element with the class `has-feedback`.\n     * @default false\n     */\n    hasError?: boolean;\n\n    /**\n     * Defines the tab index to be added to the input element.\n     * @default 0\n     */\n    tabIndex?: number;\n\n    /**\n     * Boolean value that disabled the input component.\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * The React ref for the underlying input.\n     */\n    inputRef?: React.MutableRefObject<HTMLInputElement>;\n\n    /**\n     * Additional class names that are added to the input component.\n     */\n    className?: string;\n};\n\nexport type AutoSuggestProps<T = AutoSuggestSuggestion> = {\n    /**\n     * A native input id attribute on the component root. Passed through as HTML attribute to the input element.\n     */\n    id?: string;\n\n    /**\n     * Object to define properties for the input component. For the input, the ClearableInput\n     * component is used.\n     */\n    inputProps?: AutoSuggestInputProps;\n\n    /**\n     * Array of items which will be displayed. Items can be arbitrary objects as long as they\n     * have a label defined.\n     *\n     * __Important__: in case you specify your own custom renderer via `renderSuggestion` prop, you\n     * can pass our own object that does not need to have a label. In this case you may want to\n     * specify the `customSuggestionKey` to avoid react throwing an error of rendering menu items with the same key.\n     */\n    suggestions?: AutoSuggestSuggestion[];\n\n    /**\n     * Text that will be shown when there is not match found. If nothing is defined the dropdown-menu\n     * will not be rendered.\n     */\n    noItemMessage?: string | React.ReactNode;\n\n    /**\n     * Callback function which will be called every time you need to recalculate suggestions e.i.\n     * when the filter is updates after each input. It will also be called when the input is\n     * cleared. The value would be an empty string in this case.\n     * @param result\n     * @returns\n     */\n    onSuggestionsFetchRequested?: (result: { value: string }) => void;\n\n    /**\n     * Callback function which will be called when a suggestion is selected from the dropdown menu.\n     * @param event\n     * @param selectedSuggestion\n     * @returns\n     */\n    onSuggestionSelected?: (\n        event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLDivElement>,\n        selectedSuggestion: SelectedSuggestion\n    ) => void;\n\n    /**\n     * Callback function which will be called every time the highlighted selection changes.\n     * @param suggestion\n     * @returns\n     */\n    onSuggestionHighlighted?: (suggestion: AutoSuggestSuggestion | null) => void;\n\n    /**\n     * Function that returns a string which will be displayed inside the input.\n     * This is required when a custom render function for suggestions is provided.\n     * Overwrite this function to provide the value to be used for a suggestion.\n     * Default implementation is: `suggestion => suggestion.label`\n     *\n     * @param suggestion\n     * @returns\n     */\n    getSuggestionValue?: (suggestion: AutoSuggestSuggestion) => string;\n\n    /**\n     * Function that defines how suggestions are rendered on the dropdown-menu.\n     * Use this to customize the appearance for instance when you want to show an icon\n     * for a suggestion.\n     * Default implementation is: `suggestion => suggestion.label`\n     *\n     * @param suggestion\n     * @returns\n     */\n    renderSuggestion?: (suggestion: AutoSuggestSuggestion) => React.ReactNode;\n\n    /**\n     * When rendering your own custom suggestions that do not have the `label` attribute, use this prop to specify\n     * a unique value for each suggestion which will be used as a react key for the individual menu items.\n     */\n    customSuggestionKey?: string;\n\n    /**\n     * Boolean that disabled autoDropDirection and opens the dropdown-menu be above the toggle.\n     * @default false\n     */\n    dropup?: boolean;\n\n    /**\n     * Defines whether the dropdown opens right aligned or not.\n     * Set to true additionally disables autoDrop feature.\n     * @default false\n     */\n    pullRight?: boolean;\n\n    /**\n     * Boolean that enables autoDrop feature.\n     * @default true\n     */\n    autoDropDirection?: boolean;\n\n    /**\n     * Shows a loading spinner instead of the items if set to true.\n     * @default false\n     */\n    isLoading?: boolean;\n\n    /**\n     * Boolean that enables opening the dropdown menu when gaining focus.\n     * @default false\n     */\n    openOnFocus?: boolean;\n\n    /**\n     * Boolean that enables the selection of an item to close the dropdown or not.\n     * @default true\n     */\n    closeOnSelect?: boolean;\n\n    /**\n     * Defines whether or not a selected item is shown in the input after it was selected.\n     * @default true\n     */\n    showSelectedItemsInInput?: boolean;\n\n    /**\n     * Sets autocomplete value for autosuggest forms.\n     */\n    autoComplete?: string;\n\n    /**\n     * Adds a list of input-addons elements in front of the input.\n     */\n    leadingInputAddons?: React.ReactNode[];\n\n    /**\n     * Adds a list of input-addons elements after the input.\n     */\n    trailingInputAddons?: React.ReactNode[];\n\n    /**\n     * Additional class names that are added to the dropdown element.\n     */\n    dropdownClassName?: string;\n\n    /**\n     * Additional class names that are added to the wrapping element.\n     */\n    className?: string;\n};\n\nexport const AutoSuggest = (props: AutoSuggestProps) => {\n    const {\n        id,\n        onSuggestionSelected = noop,\n        onSuggestionsFetchRequested = noop,\n        onSuggestionHighlighted = noop,\n        renderSuggestion,\n        customSuggestionKey,\n        getSuggestionValue,\n        suggestions = [],\n        autoDropDirection = true,\n        pullRight = false,\n        dropup = false,\n        isLoading = false,\n        openOnFocus = false,\n        closeOnSelect = true,\n        showSelectedItemsInInput = true,\n        autoComplete = 'off',\n        inputProps = {\n            id,\n            disabled: false,\n            onChange: noop,\n            onClear: noop,\n            onBlur: noop,\n            onFocus: noop,\n            placeholder: 'Start typing',\n            hasError: false,\n            tabIndex: 0,\n            value: undefined,\n            icon: undefined,\n        },\n        leadingInputAddons,\n        trailingInputAddons,\n        noItemMessage,\n        dropdownClassName = '',\n        className = '',\n        ...remainingProps\n    } = props;\n\n    const [isOpen, setIsOpen] = useState(false);\n    const [value, setValue] = useState(inputProps.value || '');\n    const [highlightedItemIndex, setHighlightedItemIndex] = useState(-1);\n    const [direction, setDirection] = useState(DOWN);\n\n    const componentRef = useClickOutside(() => closeMenu());\n    const dropdownMenuRef = useRef<HTMLUListElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const optionNodesRef = useRef<HTMLLIElement[]>([]);\n\n    // Update internal value state from outside when external input value is given.\n    // This is important for when this component is used as a controlled component\n    const externalValue = inputProps.value;\n    if (!isNil(externalValue) && value !== externalValue) {\n        setValue(externalValue ?? '');\n    }\n\n    // Fetch suggestions on mounting the component by using the external\n    // fetch callback\n    useEffect(() => onSuggestionsFetchRequested({ value }), []);\n\n    // When a new suggestion is highlighted it may be not in view as the dropdown menu\n    // has an overflow and can scroll. In this case, we need to scroll to the highlighted suggestion\n    // so the user can see it\n    useEffect(() => {\n        const focusedItem = getFocusedOptionNode();\n        scrollItemIntoView(direction, dropdownMenuRef.current, focusedItem);\n    }, [highlightedItemIndex, direction]);\n\n    // Used to store the list item reference to allow highlighting a single node.\n    // Update that list of nodes again when the suggestions change from the outside.\n    useEffect(() => {\n        const optionNodes = Array.from(dropdownMenuRef.current?.getElementsByTagName('li') || []);\n        optionNodesRef.current = optionNodes;\n    }, [suggestions]);\n\n    // Overwrite position of dropdown menu in case auto drop is enabled\n    const dropDirection = useDropDirection({ pullRight, dropup, autoDropDirection, dropdownMenuRef }, [suggestions]);\n\n    const openMenu = () => {\n        if (isOpen) {\n            return;\n        }\n        setIsOpen(true);\n    };\n\n    const closeMenu = () => {\n        setIsOpen(false);\n    };\n\n    const handleFocus = (_event: React.FocusEvent<HTMLInputElement>) => {\n        if (openOnFocus) {\n            openMenu();\n        }\n        if (inputProps.onFocus) {\n            inputProps.onFocus();\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n        switch (event.key) {\n            case 'ArrowDown': {\n                // select below on arrow down key\n                const newHighlightedIndex = highlightedItemIndex + 1;\n                if (isOpen && suggestions.length > newHighlightedIndex) {\n                    setHighlightedItemIndex(newHighlightedIndex);\n                    handleHighlightedSuggestionChanged(Number(newHighlightedIndex));\n                    setDirection(DOWN);\n                }\n                return;\n            }\n            case 'ArrowUp':\n                // select above on arrow up key\n                if (isOpen && highlightedItemIndex > 0) {\n                    const newHighlightedIndex = highlightedItemIndex - 1;\n                    setHighlightedItemIndex(newHighlightedIndex);\n                    handleHighlightedSuggestionChanged(Number(newHighlightedIndex));\n                    setDirection(UP);\n                }\n                return;\n            case 'Enter':\n                // select on enter\n                if (isOpen && suggestions[highlightedItemIndex]) {\n                    onSuggestionClicked(event, suggestions[highlightedItemIndex]);\n                } else {\n                    openMenu();\n                }\n                break;\n            case 'Escape':\n            case 'Tab':\n                // close on esc key or on tab\n                closeMenu();\n                break;\n            default:\n                break;\n        }\n    };\n\n    const getFocusedOptionNode = () => {\n        return [...optionNodesRef.current].find((item: HTMLLIElement) => item.className.includes('active'));\n    };\n\n    const handleInputChange = (\n        newValue: string,\n        event: React.MouseEvent<HTMLSpanElement, MouseEvent> | React.ChangeEvent<HTMLInputElement>\n    ) => {\n        if (value !== newValue) {\n            updateInputValue(newValue, event);\n        }\n    };\n\n    const updateInputValue = (\n        newValue: string,\n        event:\n            | React.MouseEvent<HTMLSpanElement, MouseEvent>\n            | React.ChangeEvent<HTMLInputElement>\n            | React.KeyboardEvent<HTMLDivElement>,\n        shouldCloseMenu = false\n    ) => {\n        const closeMenuEventually = shouldCloseMenu ? false : isOpen;\n\n        setIsOpen(!isOpen ? true : closeMenuEventually);\n        setValue(newValue);\n        setHighlightedItemIndex(-1);\n\n        // Fire callback so the parent component can filter the suggestions accordingly\n        onSuggestionsFetchRequested({ value: newValue });\n\n        handleHighlightedSuggestionChanged(-1);\n\n        // Trigger onChange callback to notify usage component only when value has actually changed\n        const { value: newExternalValue, onChange = () => {} } = inputProps;\n        if (newValue !== newExternalValue) {\n            onChange(event, { newValue });\n        }\n    };\n\n    const handleHighlightedSuggestionChanged = (currentHighlightedItemIndex: number) => {\n        const currentHighlightedSuggestion =\n            currentHighlightedItemIndex === -1 ? null : suggestions[currentHighlightedItemIndex];\n        onSuggestionHighlighted(currentHighlightedSuggestion);\n    };\n\n    const clearInputValue = (_event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {\n        setValue('');\n        setHighlightedItemIndex(-1);\n\n        // Focus the input field after clearing it's value in order to allow\n        // entering new values right away\n        if (inputRef.current) {\n            inputRef.current.focus();\n        }\n\n        // Reset filter value so all suggestions are shown again\n        onSuggestionsFetchRequested({ value: '' });\n\n        handleHighlightedSuggestionChanged(-1);\n\n        // Additionally, fire the onClear callback as the service may react on it\n        if (inputProps.onClear) {\n            inputProps.onClear();\n        }\n    };\n\n    const getDefaultSuggestionValue = (suggestion: AutoSuggestSuggestion): string => {\n        return suggestion.label ?? (suggestion[customSuggestionKey ?? ''] as string) ?? '';\n    };\n\n    const onSuggestionClicked = (\n        event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLDivElement>,\n        suggestion: AutoSuggestSuggestion\n    ) => {\n        const getSuggestionValueFunction = getSuggestionValue ? getSuggestionValue : getDefaultSuggestionValue;\n\n        const suggestionValue = getSuggestionValueFunction(suggestion);\n\n        updateInputValue(suggestionValue, event, closeOnSelect);\n\n        // fire callback with the selected item\n        onSuggestionSelected(event, {\n            suggestion,\n            suggestionValue,\n        });\n    };\n\n    const renderInput = () => {\n        const { id: inputPropId, icon, value: ignoredExternalValue, ...remainingInputProps } = inputProps;\n        const clearableProps = { id: id ?? inputPropId, ...remainingInputProps };\n\n        const input = (\n            <ClearableInput\n                {...clearableProps}\n                ref={inputRef}\n                autoComplete={autoComplete}\n                onChange={handleInputChange}\n                onClear={clearInputValue}\n                onFocus={handleFocus}\n                onClick={openMenu}\n                value={showSelectedItemsInInput ? value : ''}\n            />\n        );\n\n        if (icon || leadingInputAddons || trailingInputAddons) {\n            return (\n                <AutoSuggestAddons\n                    icon={icon}\n                    leadingInputAddons={leadingInputAddons}\n                    trailingInputAddons={trailingInputAddons}\n                >\n                    {input}\n                </AutoSuggestAddons>\n            );\n        }\n\n        return input;\n    };\n\n    const renderDefaultSuggestion = (suggestion: AutoSuggestSuggestion): React.ReactNode => suggestion.label;\n\n    const renderDropdownMenu = () => {\n        const dropdownMenuClasses = classNames(\n            'dropdown-menu',\n            dropDirection.pullRight && 'pull-right',\n            dropdownClassName\n        );\n\n        if (isLoading) {\n            return <DropdownSpinner className={dropdownMenuClasses} />;\n        }\n\n        const hasNoSuggestions = isEmpty(suggestions);\n\n        if (hasNoSuggestions && !noItemMessage) {\n            return null;\n        }\n\n        return (\n            <ul role='menu' className={dropdownMenuClasses} ref={dropdownMenuRef}>\n                {hasNoSuggestions && noItemMessage && <NoItemMessage key='NoItemMessage' message={noItemMessage} />}\n                {suggestions.map((suggestion, index) => {\n                    // In case a custom renderer is used but the customSuggestionKey is not set, throw an error\n                    if (renderSuggestion && !suggestion.label && !customSuggestionKey) {\n                        throw new Error(\n                            'The \"customSuggestionKey\" need to be set when using a custom renderer ' +\n                                'and not using the \"label\" prop for suggestions'\n                        );\n                    }\n\n                    const key = `index-${suggestion.label ?? suggestion[customSuggestionKey ?? '']}`;\n\n                    if (suggestion.header && suggestion.label) {\n                        return <DropdownHeader key={key} label={(suggestion as AutoSuggestSuggestion).label} />;\n                    }\n\n                    const renderFunction = renderSuggestion ? renderSuggestion : renderDefaultSuggestion;\n\n                    return (\n                        <MenuItem\n                            key={key}\n                            active={index === highlightedItemIndex}\n                            disabled={suggestion.disabled}\n                            value={\n                                suggestion.customSuggestion ? suggestion.customSuggestion : renderFunction(suggestion)\n                            }\n                            onSelect={(_: number | undefined, event: React.MouseEvent<HTMLLIElement>) =>\n                                onSuggestionClicked(event, suggestion)\n                            }\n                            index={index}\n                        />\n                    );\n                })}\n            </ul>\n        );\n    };\n\n    const classes = classNames(\n        'AutoSuggest',\n        'dropdown',\n        isOpen && 'open',\n        dropDirection.dropup && 'dropup',\n        className\n    );\n\n    return (\n        <div {...remainingProps} className={classes} onKeyDown={handleKeyDown} ref={componentRef}>\n            {renderInput()}\n            {renderDropdownMenu()}\n        </div>\n    );\n};\n\nexport default AutoSuggest;\n"],"names":["AutoSuggest","props","id","onSuggestionSelected","noop","onSuggestionsFetchRequested","onSuggestionHighlighted","renderSuggestion","customSuggestionKey","getSuggestionValue","suggestions","autoDropDirection","pullRight","dropup","isLoading","openOnFocus","closeOnSelect","showSelectedItemsInInput","autoComplete","inputProps","leadingInputAddons","trailingInputAddons","noItemMessage","dropdownClassName","className","remainingProps","isOpen","setIsOpen","useState","value","setValue","highlightedItemIndex","setHighlightedItemIndex","direction","setDirection","DOWN","componentRef","useClickOutside","closeMenu","dropdownMenuRef","useRef","inputRef","optionNodesRef","externalValue","isNil","useEffect","focusedItem","getFocusedOptionNode","scrollItemIntoView","optionNodes","dropDirection","useDropDirection","openMenu","handleFocus","_event","handleKeyDown","event","newHighlightedIndex","handleHighlightedSuggestionChanged","UP","onSuggestionClicked","item","handleInputChange","newValue","updateInputValue","shouldCloseMenu","newExternalValue","onChange","currentHighlightedItemIndex","currentHighlightedSuggestion","clearInputValue","getDefaultSuggestionValue","suggestion","suggestionValue","renderInput","inputPropId","icon","ignoredExternalValue","remainingInputProps","clearableProps","input","jsx","ClearableInput","AutoSuggestAddons","renderDefaultSuggestion","renderDropdownMenu","dropdownMenuClasses","classNames","DropdownSpinner","hasNoSuggestions","isEmpty","NoItemMessage","index","key","DropdownHeader","renderFunction","MenuItem","_","classes","jsxs"],"mappings":"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"}
+{"version":3,"file":"AutoSuggest.js","sources":["../../../src/components/autosuggest/AutoSuggest.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { isEmpty } from 'es-toolkit/compat';\nimport { noop } from 'es-toolkit/function';\nimport { isNil } from 'es-toolkit/predicate';\n\nimport classNames from '../../utils/classNames';\nimport ClearableInput from '../clearableInput/ClearableInput';\nimport { scrollItemIntoView, UP, DOWN } from '../../utils/scrollItemIntoView';\nimport { useDropDirection } from '../../utils/useDropDirection';\nimport DropdownHeader from '../selects/DropdownHeader';\nimport MenuItem from '../menuItems/MenuItem';\nimport useClickOutside from '../../hooks/useClickOutside';\nimport AutoSuggestAddons from './AutoSuggestAddons';\nimport DropdownSpinner from './DropdownSpinner';\nimport NoItemMessage from './NoItemMessage';\n\nexport type AutoSuggestSuggestion = {\n    /**\n     * The text label for a suggestion item. If present, this will be returned when selecting the suggestion.\n     */\n    label?: string;\n\n    /**\n     * Set to disable the suggestion and disallow selecting it.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Optional custom suggestion node that will be rendered as given. Example, this is used by the TagManager\n     * to render a placeholder with an icon next to it.\n     */\n    customSuggestion?: React.ReactNode;\n\n    /**\n     * Additional key-value pairs that are not relevant for rendering but may be handled on your side.\n     */\n    [name: string]: string | React.ReactNode;\n};\n\nexport type SelectedSuggestion = {\n    suggestionValue: string | React.ReactElement;\n    suggestion: AutoSuggestSuggestion;\n};\n\nexport type AutoSuggestInputProps = {\n    /**\n     * A native input id attribute. Passed through as HTML attribute to the input element.\n     */\n    id?: string;\n\n    /**\n     * The value to be set for the input. Using this prop the input can be controlled from the outside.\n     */\n    value?: string;\n\n    /**\n     * String that will be displayed inside the input when nothing is typed in.\n     * @default `Start typing ...`\n     */\n    placeholder?: string | React.ReactNode;\n\n    /**\n     * Icon class name that shall be used. If defined, the input element is wrapped in an input-group\n     * and the icon will be set in an input-addon. Example: `rioglyph-search`.\n     */\n    icon?: string;\n\n    /**\n     * Callback function which will be called when the input changes. __This is usually not needed__ as\n     * the \"onSuggestionsFetchRequested\" callback takes care of any input change. It is listed here\n     * for completeness and for certain edge cases.\n     *\n     * __Note:__ It might be removed in the future when not needed.'\n     * @deprecated please use `onSuggestionsFetchRequested` instead\n     * @param changeEvent\n     * @param changeProps\n     * @returns\n     */\n    onChange?: (changeEvent: React.SyntheticEvent, changeProps: { newValue: string }) => void;\n\n    /**\n     * Callback function which gets triggered when the input gaines focus.\n     */\n    onFocus?: VoidFunction;\n\n    /**\n     * Callback function which gets triggered when the input looses the focus.\n     */\n    onBlur?: VoidFunction;\n\n    /**\n     * Callback function which will be called when the input is cleared. __This is usually not needed__ as\n     * the \"onSuggestionsFetchRequested\" callback takes care of any input change. It is listed here\n     * for completeness and for certain edge cases.\n     *\n     * __Note:__ It might be removed in the future when not needed.\n     */\n    onClear?: VoidFunction;\n\n    /**\n     * Boolean value that adds the class `has-error` to the input\n     * component. Use this for validation use cases. The Autosuggest component\n     * should be wrapped in a `form-group` element with the class `has-feedback`.\n     * @default false\n     */\n    hasError?: boolean;\n\n    /**\n     * Defines the tab index to be added to the input element.\n     * @default 0\n     */\n    tabIndex?: number;\n\n    /**\n     * Boolean value that disabled the input component.\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * The React ref for the underlying input.\n     */\n    inputRef?: React.MutableRefObject<HTMLInputElement>;\n\n    /**\n     * Additional class names that are added to the input component.\n     */\n    className?: string;\n};\n\nexport type AutoSuggestProps<T = AutoSuggestSuggestion> = {\n    /**\n     * A native input id attribute on the component root. Passed through as HTML attribute to the input element.\n     */\n    id?: string;\n\n    /**\n     * Object to define properties for the input component. For the input, the ClearableInput\n     * component is used.\n     */\n    inputProps?: AutoSuggestInputProps;\n\n    /**\n     * Array of items which will be displayed. Items can be arbitrary objects as long as they\n     * have a label defined.\n     *\n     * __Important__: in case you specify your own custom renderer via `renderSuggestion` prop, you\n     * can pass our own object that does not need to have a label. In this case you may want to\n     * specify the `customSuggestionKey` to avoid react throwing an error of rendering menu items with the same key.\n     */\n    suggestions?: AutoSuggestSuggestion[];\n\n    /**\n     * Text that will be shown when there is not match found. If nothing is defined the dropdown-menu\n     * will not be rendered.\n     */\n    noItemMessage?: string | React.ReactNode;\n\n    /**\n     * Callback function which will be called every time you need to recalculate suggestions e.i.\n     * when the filter is updates after each input. It will also be called when the input is\n     * cleared. The value would be an empty string in this case.\n     * @param result\n     * @returns\n     */\n    onSuggestionsFetchRequested?: (result: { value: string }) => void;\n\n    /**\n     * Callback function which will be called when a suggestion is selected from the dropdown menu.\n     * @param event\n     * @param selectedSuggestion\n     * @returns\n     */\n    onSuggestionSelected?: (\n        event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLDivElement>,\n        selectedSuggestion: SelectedSuggestion\n    ) => void;\n\n    /**\n     * Callback function which will be called every time the highlighted selection changes.\n     * @param suggestion\n     * @returns\n     */\n    onSuggestionHighlighted?: (suggestion: AutoSuggestSuggestion | null) => void;\n\n    /**\n     * Function that returns a string which will be displayed inside the input.\n     * This is required when a custom render function for suggestions is provided.\n     * Overwrite this function to provide the value to be used for a suggestion.\n     * Default implementation is: `suggestion => suggestion.label`\n     *\n     * @param suggestion\n     * @returns\n     */\n    getSuggestionValue?: (suggestion: AutoSuggestSuggestion) => string;\n\n    /**\n     * Function that defines how suggestions are rendered on the dropdown-menu.\n     * Use this to customize the appearance for instance when you want to show an icon\n     * for a suggestion.\n     * Default implementation is: `suggestion => suggestion.label`\n     *\n     * @param suggestion\n     * @returns\n     */\n    renderSuggestion?: (suggestion: AutoSuggestSuggestion) => React.ReactNode;\n\n    /**\n     * When rendering your own custom suggestions that do not have the `label` attribute, use this prop to specify\n     * a unique value for each suggestion which will be used as a react key for the individual menu items.\n     */\n    customSuggestionKey?: string;\n\n    /**\n     * Boolean that disabled autoDropDirection and opens the dropdown-menu be above the toggle.\n     * @default false\n     */\n    dropup?: boolean;\n\n    /**\n     * Defines whether the dropdown opens right aligned or not.\n     * Set to true additionally disables autoDrop feature.\n     * @default false\n     */\n    pullRight?: boolean;\n\n    /**\n     * Boolean that enables autoDrop feature.\n     * @default true\n     */\n    autoDropDirection?: boolean;\n\n    /**\n     * Shows a loading spinner instead of the items if set to true.\n     * @default false\n     */\n    isLoading?: boolean;\n\n    /**\n     * Boolean that enables opening the dropdown menu when gaining focus.\n     * @default false\n     */\n    openOnFocus?: boolean;\n\n    /**\n     * Boolean that enables the selection of an item to close the dropdown or not.\n     * @default true\n     */\n    closeOnSelect?: boolean;\n\n    /**\n     * Defines whether or not a selected item is shown in the input after it was selected.\n     * @default true\n     */\n    showSelectedItemsInInput?: boolean;\n\n    /**\n     * Sets autocomplete value for autosuggest forms.\n     */\n    autoComplete?: string;\n\n    /**\n     * Adds a list of input-addons elements in front of the input.\n     */\n    leadingInputAddons?: React.ReactNode[];\n\n    /**\n     * Adds a list of input-addons elements after the input.\n     */\n    trailingInputAddons?: React.ReactNode[];\n\n    /**\n     * Additional class names that are added to the dropdown element.\n     */\n    dropdownClassName?: string;\n\n    /**\n     * Additional class names that are added to the wrapping element.\n     */\n    className?: string;\n};\n\nexport const AutoSuggest = (props: AutoSuggestProps) => {\n    const {\n        id,\n        onSuggestionSelected = noop,\n        onSuggestionsFetchRequested = noop,\n        onSuggestionHighlighted = noop,\n        renderSuggestion,\n        customSuggestionKey,\n        getSuggestionValue,\n        suggestions = [],\n        autoDropDirection = true,\n        pullRight = false,\n        dropup = false,\n        isLoading = false,\n        openOnFocus = false,\n        closeOnSelect = true,\n        showSelectedItemsInInput = true,\n        autoComplete = 'off',\n        inputProps = {\n            id,\n            disabled: false,\n            onChange: noop,\n            onClear: noop,\n            onBlur: noop,\n            onFocus: noop,\n            placeholder: 'Start typing',\n            hasError: false,\n            tabIndex: 0,\n            value: undefined,\n            icon: undefined,\n        },\n        leadingInputAddons,\n        trailingInputAddons,\n        noItemMessage,\n        dropdownClassName = '',\n        className = '',\n        ...remainingProps\n    } = props;\n\n    const [isOpen, setIsOpen] = useState(false);\n    const [value, setValue] = useState(inputProps.value || '');\n    const [highlightedItemIndex, setHighlightedItemIndex] = useState(-1);\n    const [direction, setDirection] = useState(DOWN);\n\n    const componentRef = useClickOutside(() => closeMenu());\n    const dropdownMenuRef = useRef<HTMLUListElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const optionNodesRef = useRef<HTMLLIElement[]>([]);\n\n    // Update internal value state from outside when external input value is given.\n    // This is important for when this component is used as a controlled component\n    const externalValue = inputProps.value;\n    if (!isNil(externalValue) && value !== externalValue) {\n        setValue(externalValue ?? '');\n    }\n\n    // Fetch suggestions on mounting the component by using the external\n    // fetch callback\n    useEffect(() => onSuggestionsFetchRequested({ value }), []);\n\n    // When a new suggestion is highlighted it may be not in view as the dropdown menu\n    // has an overflow and can scroll. In this case, we need to scroll to the highlighted suggestion\n    // so the user can see it\n    useEffect(() => {\n        const focusedItem = getFocusedOptionNode();\n        scrollItemIntoView(direction, dropdownMenuRef.current, focusedItem);\n    }, [highlightedItemIndex, direction]);\n\n    // Used to store the list item reference to allow highlighting a single node.\n    // Update that list of nodes again when the suggestions change from the outside.\n    useEffect(() => {\n        const optionNodes = Array.from(dropdownMenuRef.current?.getElementsByTagName('li') || []);\n        optionNodesRef.current = optionNodes;\n    }, [suggestions]);\n\n    // Overwrite position of dropdown menu in case auto drop is enabled\n    const dropDirection = useDropDirection({ pullRight, dropup, autoDropDirection, dropdownMenuRef }, [suggestions]);\n\n    const openMenu = () => {\n        if (isOpen) {\n            return;\n        }\n        setIsOpen(true);\n    };\n\n    const closeMenu = () => {\n        setIsOpen(false);\n    };\n\n    const handleFocus = (_event: React.FocusEvent<HTMLInputElement>) => {\n        if (openOnFocus) {\n            openMenu();\n        }\n        if (inputProps.onFocus) {\n            inputProps.onFocus();\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n        switch (event.key) {\n            case 'ArrowDown': {\n                // select below on arrow down key\n                const newHighlightedIndex = highlightedItemIndex + 1;\n                if (isOpen && suggestions.length > newHighlightedIndex) {\n                    setHighlightedItemIndex(newHighlightedIndex);\n                    handleHighlightedSuggestionChanged(Number(newHighlightedIndex));\n                    setDirection(DOWN);\n                }\n                return;\n            }\n            case 'ArrowUp':\n                // select above on arrow up key\n                if (isOpen && highlightedItemIndex > 0) {\n                    const newHighlightedIndex = highlightedItemIndex - 1;\n                    setHighlightedItemIndex(newHighlightedIndex);\n                    handleHighlightedSuggestionChanged(Number(newHighlightedIndex));\n                    setDirection(UP);\n                }\n                return;\n            case 'Enter':\n                // select on enter\n                if (isOpen && suggestions[highlightedItemIndex]) {\n                    onSuggestionClicked(event, suggestions[highlightedItemIndex]);\n                } else {\n                    openMenu();\n                }\n                break;\n            case 'Escape':\n            case 'Tab':\n                // close on esc key or on tab\n                closeMenu();\n                break;\n            default:\n                break;\n        }\n    };\n\n    const getFocusedOptionNode = () =>\n        [...optionNodesRef.current].find((item: HTMLLIElement) => item.className.includes('active'));\n\n    const handleInputChange = (\n        newValue: string,\n        event: React.MouseEvent<HTMLSpanElement, MouseEvent> | React.ChangeEvent<HTMLInputElement>\n    ) => {\n        if (value !== newValue) {\n            updateInputValue(newValue, event);\n        }\n    };\n\n    const updateInputValue = (\n        newValue: string,\n        event:\n            | React.MouseEvent<HTMLSpanElement, MouseEvent>\n            | React.ChangeEvent<HTMLInputElement>\n            | React.KeyboardEvent<HTMLDivElement>,\n        shouldCloseMenu = false\n    ) => {\n        const closeMenuEventually = shouldCloseMenu ? false : isOpen;\n\n        setIsOpen(!isOpen ? true : closeMenuEventually);\n        setValue(newValue);\n        setHighlightedItemIndex(-1);\n\n        // Fire callback so the parent component can filter the suggestions accordingly\n        onSuggestionsFetchRequested({ value: newValue });\n\n        handleHighlightedSuggestionChanged(-1);\n\n        // Trigger onChange callback to notify usage component only when value has actually changed\n        const { value: newExternalValue, onChange = () => {} } = inputProps;\n        if (newValue !== newExternalValue) {\n            onChange(event, { newValue });\n        }\n    };\n\n    const handleHighlightedSuggestionChanged = (currentHighlightedItemIndex: number) => {\n        const currentHighlightedSuggestion =\n            currentHighlightedItemIndex === -1 ? null : suggestions[currentHighlightedItemIndex];\n        onSuggestionHighlighted(currentHighlightedSuggestion);\n    };\n\n    const clearInputValue = (_event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {\n        setValue('');\n        setHighlightedItemIndex(-1);\n\n        // Focus the input field after clearing it's value in order to allow\n        // entering new values right away\n        if (inputRef.current) {\n            inputRef.current.focus();\n        }\n\n        // Reset filter value so all suggestions are shown again\n        onSuggestionsFetchRequested({ value: '' });\n\n        handleHighlightedSuggestionChanged(-1);\n\n        // Additionally, fire the onClear callback as the service may react on it\n        if (inputProps.onClear) {\n            inputProps.onClear();\n        }\n    };\n\n    const getDefaultSuggestionValue = (suggestion: AutoSuggestSuggestion): string =>\n        suggestion.label ?? (suggestion[customSuggestionKey ?? ''] as string) ?? '';\n\n    const onSuggestionClicked = (\n        event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLDivElement>,\n        suggestion: AutoSuggestSuggestion\n    ) => {\n        const getSuggestionValueFunction = getSuggestionValue ? getSuggestionValue : getDefaultSuggestionValue;\n\n        const suggestionValue = getSuggestionValueFunction(suggestion);\n\n        updateInputValue(suggestionValue, event, closeOnSelect);\n\n        // fire callback with the selected item\n        onSuggestionSelected(event, {\n            suggestion,\n            suggestionValue,\n        });\n    };\n\n    const renderInput = () => {\n        const { id: inputPropId, icon, value: ignoredExternalValue, ...remainingInputProps } = inputProps;\n        const clearableProps = { id: id ?? inputPropId, ...remainingInputProps };\n\n        const input = (\n            <ClearableInput\n                {...clearableProps}\n                ref={inputRef}\n                autoComplete={autoComplete}\n                onChange={handleInputChange}\n                onClear={clearInputValue}\n                onFocus={handleFocus}\n                onClick={openMenu}\n                value={showSelectedItemsInInput ? value : ''}\n            />\n        );\n\n        if (icon || leadingInputAddons || trailingInputAddons) {\n            return (\n                <AutoSuggestAddons\n                    icon={icon}\n                    leadingInputAddons={leadingInputAddons}\n                    trailingInputAddons={trailingInputAddons}\n                >\n                    {input}\n                </AutoSuggestAddons>\n            );\n        }\n\n        return input;\n    };\n\n    const renderDefaultSuggestion = (suggestion: AutoSuggestSuggestion): React.ReactNode => suggestion.label;\n\n    const renderDropdownMenu = () => {\n        const dropdownMenuClasses = classNames(\n            'dropdown-menu',\n            dropDirection.pullRight && 'pull-right',\n            dropdownClassName\n        );\n\n        if (isLoading) {\n            return <DropdownSpinner className={dropdownMenuClasses} />;\n        }\n\n        const hasNoSuggestions = isEmpty(suggestions);\n\n        if (hasNoSuggestions && !noItemMessage) {\n            return null;\n        }\n\n        return (\n            <ul role='menu' className={dropdownMenuClasses} ref={dropdownMenuRef}>\n                {hasNoSuggestions && noItemMessage && <NoItemMessage key='NoItemMessage' message={noItemMessage} />}\n                {suggestions.map((suggestion, index) => {\n                    // In case a custom renderer is used but the customSuggestionKey is not set, throw an error\n                    if (renderSuggestion && !suggestion.label && !customSuggestionKey) {\n                        throw new Error(\n                            'The \"customSuggestionKey\" need to be set when using a custom renderer ' +\n                                'and not using the \"label\" prop for suggestions'\n                        );\n                    }\n\n                    const key = `index-${suggestion.label ?? suggestion[customSuggestionKey ?? '']}`;\n\n                    if (suggestion.header && suggestion.label) {\n                        return <DropdownHeader key={key} label={(suggestion as AutoSuggestSuggestion).label} />;\n                    }\n\n                    const renderFunction = renderSuggestion ? renderSuggestion : renderDefaultSuggestion;\n\n                    return (\n                        <MenuItem\n                            key={key}\n                            active={index === highlightedItemIndex}\n                            disabled={suggestion.disabled}\n                            value={\n                                suggestion.customSuggestion ? suggestion.customSuggestion : renderFunction(suggestion)\n                            }\n                            onSelect={(_: number | undefined, event: React.MouseEvent<HTMLLIElement>) =>\n                                onSuggestionClicked(event, suggestion)\n                            }\n                            index={index}\n                        />\n                    );\n                })}\n            </ul>\n        );\n    };\n\n    const classes = classNames(\n        'AutoSuggest',\n        'dropdown',\n        isOpen && 'open',\n        dropDirection.dropup && 'dropup',\n        className\n    );\n\n    return (\n        <div {...remainingProps} className={classes} onKeyDown={handleKeyDown} ref={componentRef}>\n            {renderInput()}\n            {renderDropdownMenu()}\n        </div>\n    );\n};\n\nexport default AutoSuggest;\n"],"names":["AutoSuggest","props","id","onSuggestionSelected","noop","onSuggestionsFetchRequested","onSuggestionHighlighted","renderSuggestion","customSuggestionKey","getSuggestionValue","suggestions","autoDropDirection","pullRight","dropup","isLoading","openOnFocus","closeOnSelect","showSelectedItemsInInput","autoComplete","inputProps","leadingInputAddons","trailingInputAddons","noItemMessage","dropdownClassName","className","remainingProps","isOpen","setIsOpen","useState","value","setValue","highlightedItemIndex","setHighlightedItemIndex","direction","setDirection","DOWN","componentRef","useClickOutside","closeMenu","dropdownMenuRef","useRef","inputRef","optionNodesRef","externalValue","isNil","useEffect","focusedItem","getFocusedOptionNode","scrollItemIntoView","optionNodes","dropDirection","useDropDirection","openMenu","handleFocus","_event","handleKeyDown","event","newHighlightedIndex","handleHighlightedSuggestionChanged","UP","onSuggestionClicked","item","handleInputChange","newValue","updateInputValue","shouldCloseMenu","newExternalValue","onChange","currentHighlightedItemIndex","currentHighlightedSuggestion","clearInputValue","getDefaultSuggestionValue","suggestion","suggestionValue","renderInput","inputPropId","icon","ignoredExternalValue","remainingInputProps","clearableProps","input","jsx","ClearableInput","AutoSuggestAddons","renderDefaultSuggestion","renderDropdownMenu","dropdownMenuClasses","classNames","DropdownSpinner","hasNoSuggestions","isEmpty","NoItemMessage","index","key","DropdownHeader","renderFunction","MenuItem","_","classes","jsxs"],"mappings":"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"}

package/components/autosuggest/AutoSuggestAddons.js

@@ -1,16 +1,16 @@
-import { jsxs as p, jsx as e } from "react/jsx-runtime";
-const u = ({
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
+const c = ({
   icon: s,
   leadingInputAddons: a,
-  trailingInputAddons: r,
-  children: t
-}) => /* @__PURE__ */ p("div", { className: "input-group width-100pct", children: [
+  trailingInputAddons: e,
+  children: p
+}) => /* @__PURE__ */ t("div", { className: "input-group width-100pct", children: [
   a && a,
-  s && /* @__PURE__ */ e("span", { className: "input-group-addon", children: /* @__PURE__ */ e("span", { className: `rioglyph ${s}`, "aria-hidden": "true" }) }),
-  t,
-  r && r
+  s && /* @__PURE__ */ r("span", { className: "input-group-addon", children: /* @__PURE__ */ r("span", { className: `rioglyph ${s}`, "aria-hidden": "true" }) }),
+  p,
+  e && e
 ] });
 export {
-  u as default
+  c as default
 };
 //# sourceMappingURL=AutoSuggestAddons.js.map

package/components/autosuggest/AutoSuggestAddons.js.map

@@ -1 +1 @@
-{"version":3,"file":"AutoSuggestAddons.js","sources":["../../../src/components/autosuggest/AutoSuggestAddons.tsx"],"sourcesContent":["import type React from 'react';\nimport type { PropsWithChildren } from 'react';\n\nexport type AutoSuggestAddonsProps = {\n    icon?: string;\n    leadingInputAddons?: React.ReactNode[];\n    trailingInputAddons?: React.ReactNode[];\n};\n\nconst AutoSuggestAddons = ({\n    icon,\n    leadingInputAddons,\n    trailingInputAddons,\n    children,\n}: PropsWithChildren<AutoSuggestAddonsProps>) => {\n    return (\n        <div className='input-group width-100pct'>\n            {leadingInputAddons && leadingInputAddons}\n            {icon && (\n                <span className='input-group-addon'>\n                    <span className={`rioglyph ${icon}`} aria-hidden='true' />\n                </span>\n            )}\n            {children}\n            {trailingInputAddons && trailingInputAddons}\n        </div>\n    );\n};\n\nexport default AutoSuggestAddons;\n"],"names":["AutoSuggestAddons","icon","leadingInputAddons","trailingInputAddons","children","jsxs","jsx"],"mappings":";AASA,MAAMA,IAAoB,CAAC;AAAA,EACvB,MAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,UAAAC;AACJ,MAEQ,gBAAAC,EAAC,OAAA,EAAI,WAAU,4BACV,UAAA;AAAA,EAAAH,KAAsBA;AAAA,EACtBD,KACG,gBAAAK,EAAC,QAAA,EAAK,WAAU,qBACZ,UAAA,gBAAAA,EAAC,QAAA,EAAK,WAAW,YAAYL,CAAI,IAAI,eAAY,QAAO,GAC5D;AAAA,EAEHG;AAAA,EACAD,KAAuBA;AAAA,GAC5B;"}
+{"version":3,"file":"AutoSuggestAddons.js","sources":["../../../src/components/autosuggest/AutoSuggestAddons.tsx"],"sourcesContent":["import type React from 'react';\nimport type { PropsWithChildren } from 'react';\n\nexport type AutoSuggestAddonsProps = {\n    icon?: string;\n    leadingInputAddons?: React.ReactNode[];\n    trailingInputAddons?: React.ReactNode[];\n};\n\nconst AutoSuggestAddons = ({\n    icon,\n    leadingInputAddons,\n    trailingInputAddons,\n    children,\n}: PropsWithChildren<AutoSuggestAddonsProps>) => (\n    <div className='input-group width-100pct'>\n        {leadingInputAddons && leadingInputAddons}\n        {icon && (\n            <span className='input-group-addon'>\n                <span className={`rioglyph ${icon}`} aria-hidden='true' />\n            </span>\n        )}\n        {children}\n        {trailingInputAddons && trailingInputAddons}\n    </div>\n);\n\nexport default AutoSuggestAddons;\n"],"names":["AutoSuggestAddons","icon","leadingInputAddons","trailingInputAddons","children","jsxs","jsx"],"mappings":";AASA,MAAMA,IAAoB,CAAC;AAAA,EACvB,MAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,UAAAC;AACJ,MACI,gBAAAC,EAAC,OAAA,EAAI,WAAU,4BACV,UAAA;AAAA,EAAAH,KAAsBA;AAAA,EACtBD,KACG,gBAAAK,EAAC,QAAA,EAAK,WAAU,qBACZ,UAAA,gBAAAA,EAAC,QAAA,EAAK,WAAW,YAAYL,CAAI,IAAI,eAAY,QAAO,GAC5D;AAAA,EAEHG;AAAA,EACAD,KAAuBA;AAAA,EAAA,CAC5B;"}

package/components/banner/BannerActions.js

@@ -1,5 +1,5 @@
-import { jsx as r } from "react/jsx-runtime";
-const e = ({ className: n = "", children: t, ...o }) => /* @__PURE__ */ r("div", { className: `BannerActions flex-0 btn-toolbar ${n}`, ...o, children: t });
+import { jsx as a } from "react/jsx-runtime";
+const e = ({ className: n = "", children: o, ...t }) => /* @__PURE__ */ a("div", { className: `BannerActions flex-0 btn-toolbar ${n}`, ...t, children: o });
 export {
   e as default
 };

package/components/banner/BannerActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"BannerActions.js","sources":["../../../src/components/banner/BannerActions.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\n\nexport type BannerActionsProps = {\n    /**\n     * Additional classname added to the wrapper element.\n     */\n    className?: string;\n};\n\nconst BannerActions = ({ className = '', children, ...remainingProps }: PropsWithChildren<BannerActionsProps>) => {\n    return (\n        <div className={`BannerActions flex-0 btn-toolbar ${className}`} {...remainingProps}>\n            {children}\n        </div>\n    );\n};\n\nexport default BannerActions;\n"],"names":["BannerActions","className","children","remainingProps","jsx"],"mappings":";AASA,MAAMA,IAAgB,CAAC,EAAE,WAAAC,IAAY,IAAI,UAAAC,GAAU,GAAGC,QAE9C,gBAAAC,EAAC,SAAI,WAAW,oCAAoCH,CAAS,IAAK,GAAGE,GAChE,UAAAD,GACL;"}
+{"version":3,"file":"BannerActions.js","sources":["../../../src/components/banner/BannerActions.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\n\nexport type BannerActionsProps = {\n    /**\n     * Additional classname added to the wrapper element.\n     */\n    className?: string;\n};\n\nconst BannerActions = ({ className = '', children, ...remainingProps }: PropsWithChildren<BannerActionsProps>) => (\n    <div className={`BannerActions flex-0 btn-toolbar ${className}`} {...remainingProps}>\n        {children}\n    </div>\n);\n\nexport default BannerActions;\n"],"names":["BannerActions","className","children","remainingProps","jsx"],"mappings":";AASA,MAAMA,IAAgB,CAAC,EAAE,WAAAC,IAAY,IAAI,UAAAC,GAAU,GAAGC,EAAA,MAClD,gBAAAC,EAAC,SAAI,WAAW,oCAAoCH,CAAS,IAAK,GAAGE,GAChE,UAAAD,EAAA,CACL;"}

package/components/banner/BannerIcon.js

@@ -1,6 +1,6 @@
-import { jsx as e } from "react/jsx-runtime";
-const t = ({ className: n = "", children: r, ...a }) => /* @__PURE__ */ e("div", { className: `BannerIcon flex-0 margin-x-5 min-width-25 ${n}`, ...a, children: r });
+import { jsx as o } from "react/jsx-runtime";
+const i = ({ className: n = "", children: a, ...e }) => /* @__PURE__ */ o("div", { className: `BannerIcon flex-0 margin-x-5 min-width-25 ${n}`, ...e, children: a });
 export {
-  t as default
+  i as default
 };
 //# sourceMappingURL=BannerIcon.js.map

package/components/banner/BannerIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"BannerIcon.js","sources":["../../../src/components/banner/BannerIcon.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\n\nexport type BannerIconProps = {\n    /**\n     * Additional classname added to the wrapper element.\n     */\n    className?: string;\n};\n\nconst BannerIcon = ({ className = '', children, ...remainingProps }: PropsWithChildren<BannerIconProps>) => {\n    return (\n        <div className={`BannerIcon flex-0 margin-x-5 min-width-25 ${className}`} {...remainingProps}>\n            {children}\n        </div>\n    );\n};\n\nexport default BannerIcon;\n"],"names":["BannerIcon","className","children","remainingProps","jsx"],"mappings":";AASA,MAAMA,IAAa,CAAC,EAAE,WAAAC,IAAY,IAAI,UAAAC,GAAU,GAAGC,QAE3C,gBAAAC,EAAC,SAAI,WAAW,6CAA6CH,CAAS,IAAK,GAAGE,GACzE,UAAAD,GACL;"}
+{"version":3,"file":"BannerIcon.js","sources":["../../../src/components/banner/BannerIcon.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\n\nexport type BannerIconProps = {\n    /**\n     * Additional classname added to the wrapper element.\n     */\n    className?: string;\n};\n\nconst BannerIcon = ({ className = '', children, ...remainingProps }: PropsWithChildren<BannerIconProps>) => (\n    <div className={`BannerIcon flex-0 margin-x-5 min-width-25 ${className}`} {...remainingProps}>\n        {children}\n    </div>\n);\n\nexport default BannerIcon;\n"],"names":["BannerIcon","className","children","remainingProps","jsx"],"mappings":";AASA,MAAMA,IAAa,CAAC,EAAE,WAAAC,IAAY,IAAI,UAAAC,GAAU,GAAGC,EAAA,MAC/C,gBAAAC,EAAC,SAAI,WAAW,6CAA6CH,CAAS,IAAK,GAAGE,GACzE,UAAAD,EAAA,CACL;"}

package/components/banner/BannerPage.js

@@ -1,13 +1,13 @@
 import { jsx as s } from "react/jsx-runtime";
-const r = ({ className: t = "", children: a, ...e }) => /* @__PURE__ */ s(
+const l = ({ className: a = "", children: t, ...e }) => /* @__PURE__ */ s(
   "div",
   {
-    className: `display-flex align-items-start align-items-center-ls width-100pct gap-15 ${t}`,
+    className: `display-flex align-items-start align-items-center-ls width-100pct gap-15 ${a}`,
     ...e,
-    children: a
+    children: t
   }
 );
 export {
-  r as default
+  l as default
 };
 //# sourceMappingURL=BannerPage.js.map

package/components/banner/BannerPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"BannerPage.js","sources":["../../../src/components/banner/BannerPage.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\n\ntype BannerPageProps = {\n    /**\n     * Additional classname added to the wrapper element.\n     */\n    className?: string;\n};\n\nconst BannerPage = ({ className = '', children, ...remainingProps }: PropsWithChildren<BannerPageProps>) => {\n    return (\n        <div\n            className={`display-flex align-items-start align-items-center-ls width-100pct gap-15 ${className}`}\n            {...remainingProps}\n        >\n            {children}\n        </div>\n    );\n};\n\nexport default BannerPage;\n"],"names":["BannerPage","className","children","remainingProps","jsx"],"mappings":";AASA,MAAMA,IAAa,CAAC,EAAE,WAAAC,IAAY,IAAI,UAAAC,GAAU,GAAGC,QAE3C,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,WAAW,4EAA4EH,CAAS;AAAA,IAC/F,GAAGE;AAAA,IAEH,UAAAD;AAAA,EAAA;AAAA;"}
+{"version":3,"file":"BannerPage.js","sources":["../../../src/components/banner/BannerPage.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\n\ntype BannerPageProps = {\n    /**\n     * Additional classname added to the wrapper element.\n     */\n    className?: string;\n};\n\nconst BannerPage = ({ className = '', children, ...remainingProps }: PropsWithChildren<BannerPageProps>) => (\n    <div\n        className={`display-flex align-items-start align-items-center-ls width-100pct gap-15 ${className}`}\n        {...remainingProps}\n    >\n        {children}\n    </div>\n);\n\nexport default BannerPage;\n"],"names":["BannerPage","className","children","remainingProps","jsx"],"mappings":";AASA,MAAMA,IAAa,CAAC,EAAE,WAAAC,IAAY,IAAI,UAAAC,GAAU,GAAGC,QAC/C,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,WAAW,4EAA4EH,CAAS;AAAA,IAC/F,GAAGE;AAAA,IAEH,UAAAD;AAAA,EAAA;AACL;"}

package/components/button/Button.d.ts

@@ -117,6 +117,13 @@ type BaseButtonProps = {
      * Whether the "ripple" effect should be suppressed on this button.
      */
     noRippleEffect?: boolean;
+    /**
+     * Optional key used to generate automatic GA tracking attributes when no explicit
+     * tracking attributes are provided.
+     *
+     * Resulting label format: `button::<autoTrackingKey>`.
+     */
+    autoTrackingKey?: string;
     /**
      * Number of the index used for keyboard support.
      *

package/components/button/Button.js

@@ -1,10 +1,11 @@
-import { jsxs as R, jsx as E } from "react/jsx-runtime";
-import { forwardRef as j, useState as L, useRef as K } from "react";
-import { noop as Y } from "es-toolkit/function";
-import $ from "../../utils/classNames.js";
+import { jsxs as E, jsx as k } from "react/jsx-runtime";
+import { forwardRef as Y, useState as L, useRef as $ } from "react";
+import { noop as w } from "es-toolkit/function";
+import B from "../../utils/classNames.js";
 import { createButtonRipple as S } from "../../utils/buttonEffect.js";
-import w from "../../hooks/useMergeRefs.js";
-const B = {
+import F from "../../hooks/useMergeRefs.js";
+import { getAutoTrackingAttributes as G } from "../../utils/analytics/autoTracking.js";
+const z = {
   DEFAULT: "default",
   UNSTYLED: "unstyled",
   PRIMARY: "primary",
@@ -15,108 +16,115 @@ const B = {
   SUCCESS: "success",
   MUTED: "muted",
   MUTED_FILLED: "muted-filled"
-}, s = {
+}, i = {
   VARIANT_LINK: "link",
   VARIANT_LINK_INLINE: "link-inline",
   VARIANT_OUTLINE: "outline",
   VARIANT_ACTION: "action"
-}, F = {
+}, W = {
   XS: "xs",
   SM: "sm",
   MD: "md",
   LG: "lg"
-}, r = j((_, k) => {
+}, u = Y((_, C) => {
   const {
     as: a = "button",
-    active: t = !1,
+    active: n = !1,
     disabled: e = !1,
     asToggle: f = !1,
-    onClick: l = Y,
-    bsStyle: C = "default",
-    bsSize: N,
-    variant: i,
+    onClick: l = w,
+    bsStyle: y = "default",
+    bsSize: b,
+    variant: s,
     iconOnly: O = !1,
     iconName: o,
     iconRight: h = !1,
-    multiline: y = !1,
-    block: D = !1,
-    className: M = "",
-    noRippleEffect: b = !1,
-    type: V = "button",
-    tabIndex: u = 0,
-    children: A,
-    ...I
-  } = _, [m, d] = L(t), g = K(null), T = w(g, k), [v, U] = L(t);
-  t !== v && (d(t), U(t));
-  const x = (n) => {
-    if (b || S(n.nativeEvent, n.currentTarget), f) {
-      const c = !m;
-      d(c), c && g.current?.blur(), l(c);
+    multiline: D = !1,
+    block: M = !1,
+    className: V = "",
+    noRippleEffect: N = !1,
+    autoTrackingKey: v,
+    type: U = "button",
+    tabIndex: A = 0,
+    children: m,
+    ...r
+  } = _, I = G({
+    autoTrackingKey: v,
+    props: r,
+    source: "button"
+  }), [g, d] = L(n), T = $(null), p = F(T, C), [x, P] = L(n);
+  n !== x && (d(n), P(n));
+  const j = (t) => {
+    if (N || S(t.nativeEvent, t.currentTarget), f) {
+      const c = !g;
+      d(c), c && T.current?.blur(), l(c);
     } else
-      l(n);
-  }, P = (n) => {
+      l(t);
+  }, K = (t) => {
     if (e) {
-      n.preventDefault();
+      t.preventDefault();
       return;
     }
-    b || S(n.nativeEvent, n.currentTarget), l(n);
-  }, p = $(
+    N || S(t.nativeEvent, t.currentTarget), l(t);
+  }, R = B(
     "btn",
-    `btn-${C}`,
-    i === s.VARIANT_LINK && "btn-link",
-    i === s.VARIANT_LINK_INLINE && "btn-link btn-link-inline",
-    i === s.VARIANT_OUTLINE && "btn-outline",
-    i === s.VARIANT_ACTION && "btn-action",
-    N && `btn-${N}`,
+    `btn-${y}`,
+    s === i.VARIANT_LINK && "btn-link",
+    s === i.VARIANT_LINK_INLINE && "btn-link btn-link-inline",
+    s === i.VARIANT_OUTLINE && "btn-outline",
+    s === i.VARIANT_ACTION && "btn-action",
+    b && `btn-${b}`,
     f && "btn-toggle",
-    m && "active",
+    g && "active",
     O && "btn-icon-only",
     h && "btn-icon-right",
-    y && "btn-multiline",
-    D && "btn-block",
+    D && "btn-multiline",
+    M && "btn-block",
     a === "a" && "gap-0",
     a === "a" && e && "disabled",
     "btn-component",
-    M
+    V
   );
-  return a === "a" ? /* @__PURE__ */ R(
+  return a === "a" ? /* @__PURE__ */ E(
     "a",
     {
-      ref: T,
+      ref: p,
+      ...r,
       ...I,
-      className: p,
-      onClick: P,
+      className: R,
+      onClick: K,
       "aria-disabled": e || void 0,
-      tabIndex: e ? -1 : u,
+      tabIndex: e ? -1 : A,
       children: [
-        o && /* @__PURE__ */ E("span", { className: `rioglyph ${o}` }),
-        A
+        o && /* @__PURE__ */ k("span", { className: `rioglyph ${o}` }),
+        m
       ]
     }
-  ) : /* @__PURE__ */ R(
+  ) : /* @__PURE__ */ E(
     "button",
     {
-      ref: T,
-      type: V,
+      ref: p,
+      type: U,
+      ...r,
       ...I,
-      className: p,
-      onClick: x,
+      className: R,
+      onClick: j,
       disabled: e,
-      tabIndex: u,
+      tabIndex: A,
       children: [
-        o && /* @__PURE__ */ E("span", { className: `rioglyph ${o}` }),
-        A
+        o && /* @__PURE__ */ k("span", { className: `rioglyph ${o}` }),
+        m
       ]
     }
   );
 });
-Object.assign(r, B);
-Object.assign(r, s);
-Object.assign(r, F);
+Object.assign(u, z);
+Object.assign(u, i);
+Object.assign(u, W);
 export {
-  F as SIZES_MAP,
-  B as STYLES_MAP,
-  s as VARIANTS_MAP,
-  r as default
+  W as SIZES_MAP,
+  z as STYLES_MAP,
+  i as VARIANTS_MAP,
+  u as default
 };
 //# sourceMappingURL=Button.js.map

package/components/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    type ForwardRefExoticComponent,\n    type HTMLProps,\n    type PropsWithChildren,\n    type RefAttributes,\n    useRef,\n    useState,\n} from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport { createButtonRipple } from '../../utils/buttonEffect';\nimport useMergeRefs from '../../hooks/useMergeRefs';\nimport type { ObjectValues } from '../../utils/ObjectValues';\n\nexport const STYLES_MAP = {\n    DEFAULT: 'default',\n    UNSTYLED: 'unstyled',\n    PRIMARY: 'primary',\n    SECONDARY: 'secondary',\n    INFO: 'info',\n    WARNING: 'warning',\n    DANGER: 'danger',\n    SUCCESS: 'success',\n    MUTED: 'muted',\n    MUTED_FILLED: 'muted-filled',\n} as const;\n\n// export for convenient usage on client side\nexport type BUTTON_STYLE = ObjectValues<typeof STYLES_MAP>;\n\nexport const VARIANTS_MAP = {\n    VARIANT_LINK: 'link',\n    VARIANT_LINK_INLINE: 'link-inline',\n    VARIANT_OUTLINE: 'outline',\n    VARIANT_ACTION: 'action',\n} as const;\n\nexport type BUTTON_VARIANT = ObjectValues<typeof VARIANTS_MAP>;\n\nexport const SIZES_MAP = {\n    XS: 'xs',\n    SM: 'sm',\n    MD: 'md',\n    LG: 'lg',\n} as const;\n\nexport type BUTTON_SIZE = ObjectValues<typeof SIZES_MAP>;\n\n/*\n *  ATTENTION: We're typing the onClick handler based on the value of `asToggle`.\n *\n *  It does not fully work here inside of this file, though. Therefore, we have to apply some explicit casts below.\n *  In code _using_ the Button component, however, the parameter type of the onClick handler must either be a boolean or\n *  a React.MouseEvent, respectively.\n */\n\ntype RegularButton = {\n    /**\n     * Use the button as a toggle button. The toggle state can be controlled via the `active` prop.\n     *\n     * @default false\n     */\n    asToggle?: false;\n\n    /**\n     * Callback function triggered when clicking the button.\n     *\n     * @param event The MouseEvent that triggered the click.\n     */\n    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n};\n\ntype ToggleButton = {\n    /**\n     * Use the button as a toggle button. The toggle state can be controlled via the `active` prop.\n     *\n     * @default false\n     */\n    asToggle: true;\n\n    /**\n     * Callback function triggered when clicking the button.\n     *\n     * @param value The new value of the toggle button.\n     */\n    onClick?: (value: boolean) => void;\n};\n\ntype BaseButtonProps = {\n    /**\n     * Whether the button should be disabled.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Set the button toggled. Should be used in combination with \"asToggle\" prop.\n     *\n     * @default false\n     */\n    active?: boolean;\n\n    /**\n     * Use when the content of the button is an icon only to adapt the button spacing accordingly.\n     *\n     * @default false\n     */\n    iconOnly?: boolean;\n\n    /**\n     * Adds right side spacing for an icon. This should be used when having navigation buttons\n     * that use an icon on the right side.\n     *\n     * @default false\n     */\n    iconRight?: boolean;\n\n    /**\n     * Optional rio-glyph icon name that comes in handy for icon only buttons for not adding\n     * a span tag for the icon which reduces boilerplate code.\n     */\n    iconName?: string;\n\n    /**\n     * Defines whether the button text break into multiple lines when the button space exceeds.\n     *\n     * Multiline buttons should be used as exception only.\n     *\n     * @default false\n     */\n    multiline?: boolean;\n\n    /**\n     * Defines whether the button takes up the full width of the parent element.\n     *\n     * @default false\n     */\n    block?: boolean;\n\n    /**\n     * Sets the button style.\n     * @default 'default'\n     */\n    bsStyle?: BUTTON_STYLE;\n\n    /**\n     * Sets the button size.\n     */\n    bsSize?: BUTTON_SIZE;\n\n    /**\n     * Sets the button variant.\n     */\n    variant?: BUTTON_VARIANT;\n\n    /**\n     * Whether the \"ripple\" effect should be suppressed on this button.\n     */\n    noRippleEffect?: boolean;\n\n    /**\n     * Number of the index used for keyboard support.\n     *\n     * @default 0\n     */\n    tabIndex?: number;\n\n    /**\n     * Additional classes to be set on the button element.\n     */\n    className?: string;\n};\n\ntype NativeButtonProps = Omit<HTMLProps<HTMLButtonElement>, 'as' | 'type' | 'onClick' | 'ref'> &\n    BaseButtonProps & {\n        /**\n         * Defines this component as a native button element.\n         *\n         * @default 'button'\n         */\n        as?: 'button';\n\n        /**\n         * Defines the type of the button. This may be used for form submit buttons.\n         *\n         * @default 'button'\n         */\n        type?: 'button' | 'submit';\n    } & (RegularButton | ToggleButton);\n\ntype LinkButtonProps = Omit<HTMLProps<HTMLAnchorElement>, 'as' | 'type' | 'onClick' | 'ref'> &\n    BaseButtonProps & {\n        /**\n         * Defines this component as a link element.\n         */\n        as: 'a';\n\n        /**\n         * Native button type is not supported when using `as=\"a\"`.\n         */\n        type?: never;\n\n        /**\n         * Defines the destination URL for the link button.\n         */\n        href: string;\n\n        /**\n         * Toggle behavior is not supported when using `as=\"a\"`.\n         *\n         * @default false\n         */\n        asToggle?: false;\n\n        /**\n         * Callback function triggered when clicking the link.\n         *\n         * @param event The MouseEvent that triggered the click.\n         */\n        onClick?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;\n    };\n\nexport type ButtonProps = NativeButtonProps | LinkButtonProps;\n\ntype Props = PropsWithChildren<ButtonProps>;\n\n// Define statics to be used as \"Button.PRIMARY\"\ntype ButtonType = ForwardRefExoticComponent<Props & RefAttributes<HTMLButtonElement>> & {\n    DEFAULT: 'default';\n    UNSTYLED: 'unstyled';\n    PRIMARY: 'primary';\n    SECONDARY: 'secondary';\n    INFO: 'info';\n    WARNING: 'warning';\n    DANGER: 'danger';\n    SUCCESS: 'success';\n    MUTED: 'muted';\n    MUTED_FILLED: 'muted-filled';\n\n    VARIANT_LINK: 'link';\n    VARIANT_LINK_INLINE: 'link-inline';\n    VARIANT_OUTLINE: 'outline';\n    VARIANT_ACTION: 'action';\n\n    XS: 'xs';\n    SM: 'sm';\n    MD: 'md';\n    LG: 'lg';\n};\n\nconst Button = forwardRef<HTMLButtonElement, Props>((props, ref) => {\n    const {\n        as = 'button',\n        active = false,\n        disabled = false,\n        asToggle = false,\n        onClick = noop,\n        bsStyle = 'default',\n        bsSize,\n        variant,\n        iconOnly = false,\n        iconName,\n        iconRight = false,\n        multiline = false,\n        block = false,\n        className = '',\n        noRippleEffect = false,\n        type = 'button',\n        tabIndex = 0,\n        children,\n        ...remainingProps\n    } = props;\n\n    const [isToggled, setIsToggled] = useState(active);\n\n    const btnRef = useRef<HTMLButtonElement>(null);\n\n    const buttonRef = useMergeRefs(btnRef, ref);\n\n    // Update internal toggle state when used as controlled component and outside toggle state changes\n    // Note, using the usePrevious hook resulted in an endless loop, hence the useState here\n    const [previousActive, setPreviousActive] = useState(active);\n    if (active !== previousActive) {\n        setIsToggled(active);\n        setPreviousActive(active);\n    }\n\n    const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n        if (!noRippleEffect) {\n            createButtonRipple(event.nativeEvent, event.currentTarget);\n        }\n\n        if (asToggle) {\n            // Intercept click handler only for toggle button to update internal state and blur after click\n            const newIsToggled = !isToggled;\n            setIsToggled(newIsToggled);\n\n            if (newIsToggled) {\n                btnRef.current?.blur();\n            }\n\n            (onClick as (x: boolean) => void)(newIsToggled);\n        } else {\n            (onClick as (x: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void)(event);\n        }\n    };\n\n    const handleLinkClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n        if (disabled) {\n            event.preventDefault();\n            return;\n        }\n\n        if (!noRippleEffect) {\n            createButtonRipple(event.nativeEvent, event.currentTarget);\n        }\n\n        (onClick as (x: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void)(event);\n    };\n\n    const buttonClassNames = classNames(\n        'btn',\n        `btn-${bsStyle}`,\n        variant === VARIANTS_MAP.VARIANT_LINK && 'btn-link',\n        variant === VARIANTS_MAP.VARIANT_LINK_INLINE && 'btn-link btn-link-inline',\n        variant === VARIANTS_MAP.VARIANT_OUTLINE && 'btn-outline',\n        variant === VARIANTS_MAP.VARIANT_ACTION && 'btn-action',\n        bsSize && `btn-${bsSize}`,\n        asToggle && 'btn-toggle',\n        isToggled && 'active',\n        iconOnly && 'btn-icon-only',\n        iconRight && 'btn-icon-right',\n        multiline && 'btn-multiline',\n        block && 'btn-block',\n        as === 'a' && 'gap-0',\n        as === 'a' && disabled && 'disabled',\n        'btn-component',\n        className\n    );\n\n    if (as === 'a') {\n        return (\n            <a\n                ref={buttonRef as React.Ref<HTMLAnchorElement>}\n                {...(remainingProps as Omit<HTMLProps<HTMLAnchorElement>, 'as' | 'type' | 'onClick' | 'ref'>)}\n                className={buttonClassNames}\n                onClick={handleLinkClick}\n                aria-disabled={disabled || undefined}\n                tabIndex={disabled ? -1 : tabIndex}\n            >\n                {iconName && <span className={`rioglyph ${iconName}`} />}\n                {children}\n            </a>\n        );\n    }\n\n    return (\n        <button\n            ref={buttonRef}\n            type={type}\n            {...(remainingProps as Omit<HTMLProps<HTMLButtonElement>, 'as' | 'type' | 'onClick' | 'ref'>)}\n            className={buttonClassNames}\n            onClick={handleButtonClick}\n            disabled={disabled}\n            tabIndex={tabIndex}\n        >\n            {iconName && <span className={`rioglyph ${iconName}`} />}\n            {children}\n        </button>\n    );\n}) as ButtonType;\n\nObject.assign(Button, STYLES_MAP);\nObject.assign(Button, VARIANTS_MAP);\nObject.assign(Button, SIZES_MAP);\n\nexport default Button;\n"],"names":["STYLES_MAP","VARIANTS_MAP","SIZES_MAP","Button","forwardRef","props","ref","as","active","disabled","asToggle","onClick","noop","bsStyle","bsSize","variant","iconOnly","iconName","iconRight","multiline","block","className","noRippleEffect","type","tabIndex","children","remainingProps","isToggled","setIsToggled","useState","btnRef","useRef","buttonRef","useMergeRefs","previousActive","setPreviousActive","handleButtonClick","event","createButtonRipple","newIsToggled","handleLinkClick","buttonClassNames","classNames","jsxs","jsx"],"mappings":"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"}
+{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    type ForwardRefExoticComponent,\n    type HTMLProps,\n    type PropsWithChildren,\n    type RefAttributes,\n    useRef,\n    useState,\n} from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport { createButtonRipple } from '../../utils/buttonEffect';\nimport useMergeRefs from '../../hooks/useMergeRefs';\nimport type { ObjectValues } from '../../utils/ObjectValues';\nimport { getAutoTrackingAttributes } from '../../utils/analytics/autoTracking';\n\nexport const STYLES_MAP = {\n    DEFAULT: 'default',\n    UNSTYLED: 'unstyled',\n    PRIMARY: 'primary',\n    SECONDARY: 'secondary',\n    INFO: 'info',\n    WARNING: 'warning',\n    DANGER: 'danger',\n    SUCCESS: 'success',\n    MUTED: 'muted',\n    MUTED_FILLED: 'muted-filled',\n} as const;\n\n// export for convenient usage on client side\nexport type BUTTON_STYLE = ObjectValues<typeof STYLES_MAP>;\n\nexport const VARIANTS_MAP = {\n    VARIANT_LINK: 'link',\n    VARIANT_LINK_INLINE: 'link-inline',\n    VARIANT_OUTLINE: 'outline',\n    VARIANT_ACTION: 'action',\n} as const;\n\nexport type BUTTON_VARIANT = ObjectValues<typeof VARIANTS_MAP>;\n\nexport const SIZES_MAP = {\n    XS: 'xs',\n    SM: 'sm',\n    MD: 'md',\n    LG: 'lg',\n} as const;\n\nexport type BUTTON_SIZE = ObjectValues<typeof SIZES_MAP>;\n\n/*\n *  ATTENTION: We're typing the onClick handler based on the value of `asToggle`.\n *\n *  It does not fully work here inside of this file, though. Therefore, we have to apply some explicit casts below.\n *  In code _using_ the Button component, however, the parameter type of the onClick handler must either be a boolean or\n *  a React.MouseEvent, respectively.\n */\n\ntype RegularButton = {\n    /**\n     * Use the button as a toggle button. The toggle state can be controlled via the `active` prop.\n     *\n     * @default false\n     */\n    asToggle?: false;\n\n    /**\n     * Callback function triggered when clicking the button.\n     *\n     * @param event The MouseEvent that triggered the click.\n     */\n    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n};\n\ntype ToggleButton = {\n    /**\n     * Use the button as a toggle button. The toggle state can be controlled via the `active` prop.\n     *\n     * @default false\n     */\n    asToggle: true;\n\n    /**\n     * Callback function triggered when clicking the button.\n     *\n     * @param value The new value of the toggle button.\n     */\n    onClick?: (value: boolean) => void;\n};\n\ntype BaseButtonProps = {\n    /**\n     * Whether the button should be disabled.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Set the button toggled. Should be used in combination with \"asToggle\" prop.\n     *\n     * @default false\n     */\n    active?: boolean;\n\n    /**\n     * Use when the content of the button is an icon only to adapt the button spacing accordingly.\n     *\n     * @default false\n     */\n    iconOnly?: boolean;\n\n    /**\n     * Adds right side spacing for an icon. This should be used when having navigation buttons\n     * that use an icon on the right side.\n     *\n     * @default false\n     */\n    iconRight?: boolean;\n\n    /**\n     * Optional rio-glyph icon name that comes in handy for icon only buttons for not adding\n     * a span tag for the icon which reduces boilerplate code.\n     */\n    iconName?: string;\n\n    /**\n     * Defines whether the button text break into multiple lines when the button space exceeds.\n     *\n     * Multiline buttons should be used as exception only.\n     *\n     * @default false\n     */\n    multiline?: boolean;\n\n    /**\n     * Defines whether the button takes up the full width of the parent element.\n     *\n     * @default false\n     */\n    block?: boolean;\n\n    /**\n     * Sets the button style.\n     * @default 'default'\n     */\n    bsStyle?: BUTTON_STYLE;\n\n    /**\n     * Sets the button size.\n     */\n    bsSize?: BUTTON_SIZE;\n\n    /**\n     * Sets the button variant.\n     */\n    variant?: BUTTON_VARIANT;\n\n    /**\n     * Whether the \"ripple\" effect should be suppressed on this button.\n     */\n    noRippleEffect?: boolean;\n\n    /**\n     * Optional key used to generate automatic GA tracking attributes when no explicit\n     * tracking attributes are provided.\n     *\n     * Resulting label format: `button::<autoTrackingKey>`.\n     */\n    autoTrackingKey?: string;\n\n    /**\n     * Number of the index used for keyboard support.\n     *\n     * @default 0\n     */\n    tabIndex?: number;\n\n    /**\n     * Additional classes to be set on the button element.\n     */\n    className?: string;\n};\n\ntype NativeButtonProps = Omit<HTMLProps<HTMLButtonElement>, 'as' | 'type' | 'onClick' | 'ref'> &\n    BaseButtonProps & {\n        /**\n         * Defines this component as a native button element.\n         *\n         * @default 'button'\n         */\n        as?: 'button';\n\n        /**\n         * Defines the type of the button. This may be used for form submit buttons.\n         *\n         * @default 'button'\n         */\n        type?: 'button' | 'submit';\n    } & (RegularButton | ToggleButton);\n\ntype LinkButtonProps = Omit<HTMLProps<HTMLAnchorElement>, 'as' | 'type' | 'onClick' | 'ref'> &\n    BaseButtonProps & {\n        /**\n         * Defines this component as a link element.\n         */\n        as: 'a';\n\n        /**\n         * Native button type is not supported when using `as=\"a\"`.\n         */\n        type?: never;\n\n        /**\n         * Defines the destination URL for the link button.\n         */\n        href: string;\n\n        /**\n         * Toggle behavior is not supported when using `as=\"a\"`.\n         *\n         * @default false\n         */\n        asToggle?: false;\n\n        /**\n         * Callback function triggered when clicking the link.\n         *\n         * @param event The MouseEvent that triggered the click.\n         */\n        onClick?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;\n    };\n\nexport type ButtonProps = NativeButtonProps | LinkButtonProps;\n\ntype Props = PropsWithChildren<ButtonProps>;\n\n// Define statics to be used as \"Button.PRIMARY\"\ntype ButtonType = ForwardRefExoticComponent<Props & RefAttributes<HTMLButtonElement>> & {\n    DEFAULT: 'default';\n    UNSTYLED: 'unstyled';\n    PRIMARY: 'primary';\n    SECONDARY: 'secondary';\n    INFO: 'info';\n    WARNING: 'warning';\n    DANGER: 'danger';\n    SUCCESS: 'success';\n    MUTED: 'muted';\n    MUTED_FILLED: 'muted-filled';\n\n    VARIANT_LINK: 'link';\n    VARIANT_LINK_INLINE: 'link-inline';\n    VARIANT_OUTLINE: 'outline';\n    VARIANT_ACTION: 'action';\n\n    XS: 'xs';\n    SM: 'sm';\n    MD: 'md';\n    LG: 'lg';\n};\n\nconst Button = forwardRef<HTMLButtonElement, Props>((props, ref) => {\n    const {\n        as = 'button',\n        active = false,\n        disabled = false,\n        asToggle = false,\n        onClick = noop,\n        bsStyle = 'default',\n        bsSize,\n        variant,\n        iconOnly = false,\n        iconName,\n        iconRight = false,\n        multiline = false,\n        block = false,\n        className = '',\n        noRippleEffect = false,\n        autoTrackingKey,\n        type = 'button',\n        tabIndex = 0,\n        children,\n        ...remainingProps\n    } = props;\n\n    const autoTrackingAttributes = getAutoTrackingAttributes({\n        autoTrackingKey,\n        props: remainingProps as Record<string, unknown>,\n        source: 'button',\n    });\n\n    const [isToggled, setIsToggled] = useState(active);\n\n    const btnRef = useRef<HTMLButtonElement>(null);\n\n    const buttonRef = useMergeRefs(btnRef, ref);\n\n    // Update internal toggle state when used as controlled component and outside toggle state changes\n    // Note, using the usePrevious hook resulted in an endless loop, hence the useState here\n    const [previousActive, setPreviousActive] = useState(active);\n    if (active !== previousActive) {\n        setIsToggled(active);\n        setPreviousActive(active);\n    }\n\n    const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n        if (!noRippleEffect) {\n            createButtonRipple(event.nativeEvent, event.currentTarget);\n        }\n\n        if (asToggle) {\n            // Intercept click handler only for toggle button to update internal state and blur after click\n            const newIsToggled = !isToggled;\n            setIsToggled(newIsToggled);\n\n            if (newIsToggled) {\n                btnRef.current?.blur();\n            }\n\n            (onClick as (x: boolean) => void)(newIsToggled);\n        } else {\n            (onClick as (x: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void)(event);\n        }\n    };\n\n    const handleLinkClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n        if (disabled) {\n            event.preventDefault();\n            return;\n        }\n\n        if (!noRippleEffect) {\n            createButtonRipple(event.nativeEvent, event.currentTarget);\n        }\n\n        (onClick as (x: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void)(event);\n    };\n\n    const buttonClassNames = classNames(\n        'btn',\n        `btn-${bsStyle}`,\n        variant === VARIANTS_MAP.VARIANT_LINK && 'btn-link',\n        variant === VARIANTS_MAP.VARIANT_LINK_INLINE && 'btn-link btn-link-inline',\n        variant === VARIANTS_MAP.VARIANT_OUTLINE && 'btn-outline',\n        variant === VARIANTS_MAP.VARIANT_ACTION && 'btn-action',\n        bsSize && `btn-${bsSize}`,\n        asToggle && 'btn-toggle',\n        isToggled && 'active',\n        iconOnly && 'btn-icon-only',\n        iconRight && 'btn-icon-right',\n        multiline && 'btn-multiline',\n        block && 'btn-block',\n        as === 'a' && 'gap-0',\n        as === 'a' && disabled && 'disabled',\n        'btn-component',\n        className\n    );\n\n    if (as === 'a') {\n        return (\n            <a\n                ref={buttonRef as React.Ref<HTMLAnchorElement>}\n                {...(remainingProps as Omit<HTMLProps<HTMLAnchorElement>, 'as' | 'type' | 'onClick' | 'ref'>)}\n                {...autoTrackingAttributes}\n                className={buttonClassNames}\n                onClick={handleLinkClick}\n                aria-disabled={disabled || undefined}\n                tabIndex={disabled ? -1 : tabIndex}\n            >\n                {iconName && <span className={`rioglyph ${iconName}`} />}\n                {children}\n            </a>\n        );\n    }\n\n    return (\n        <button\n            ref={buttonRef}\n            type={type}\n            {...(remainingProps as Omit<HTMLProps<HTMLButtonElement>, 'as' | 'type' | 'onClick' | 'ref'>)}\n            {...autoTrackingAttributes}\n            className={buttonClassNames}\n            onClick={handleButtonClick}\n            disabled={disabled}\n            tabIndex={tabIndex}\n        >\n            {iconName && <span className={`rioglyph ${iconName}`} />}\n            {children}\n        </button>\n    );\n}) as ButtonType;\n\nObject.assign(Button, STYLES_MAP);\nObject.assign(Button, VARIANTS_MAP);\nObject.assign(Button, SIZES_MAP);\n\nexport default Button;\n"],"names":["STYLES_MAP","VARIANTS_MAP","SIZES_MAP","Button","forwardRef","props","ref","as","active","disabled","asToggle","onClick","noop","bsStyle","bsSize","variant","iconOnly","iconName","iconRight","multiline","block","className","noRippleEffect","autoTrackingKey","type","tabIndex","children","remainingProps","autoTrackingAttributes","getAutoTrackingAttributes","isToggled","setIsToggled","useState","btnRef","useRef","buttonRef","useMergeRefs","previousActive","setPreviousActive","handleButtonClick","event","createButtonRipple","newIsToggled","handleLinkClick","buttonClassNames","classNames","jsxs","jsx"],"mappings":"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"}

package/components/charts/Area.d.ts

@@ -1,8 +1,9 @@
 import { AreaProps as RechartsAreaProps } from 'recharts';
 import { CurveType } from 'recharts/types/shape/Curve';
-export type AreaProps<T = any> = Omit<RechartsAreaProps, 'ref'> & {
+export type AreaProps<T = unknown> = Omit<RechartsAreaProps<T, unknown>, 'ref' | 'dataKey'> & {
     strokeColor?: string;
-    dataKey?: string | number | ((obj: T) => any);
+    fill?: string;
+    dataKey?: string | number | ((obj: T) => unknown);
     unit?: string;
     legendType?: string;
     type?: CurveType;
@@ -12,9 +13,10 @@ export declare const getAreaDefaultProps: () => {
     dataKey: string;
     unit: string;
     strokeColor: string;
+    fill: string;
     legendType: string;
     type: string;
     isAnimationActive: boolean;
 };
-declare const Area: (props: AreaProps) => null;
+declare const Area: (_props: AreaProps) => null;
 export default Area;

package/components/charts/Area.js

@@ -1,13 +1,14 @@
-const o = () => ({
+const e = () => ({
   dataKey: "value",
   unit: "",
   strokeColor: "color-coldplay-fountain",
+  fill: "color-coldplay-fountain",
   legendType: "square",
   type: "monotone",
   isAnimationActive: !0
-}), t = (e) => null;
+}), t = (o) => null;
 export {
   t as default,
-  o as getAreaDefaultProps
+  e as getAreaDefaultProps
 };
 //# sourceMappingURL=Area.js.map

package/components/charts/Area.js.map

@@ -1 +1 @@
-{"version":3,"file":"Area.js","sources":["../../../src/components/charts/Area.tsx"],"sourcesContent":["import type { AreaProps as RechartsAreaProps } from 'recharts';\nimport type { CurveType } from 'recharts/types/shape/Curve';\n\n// biome-ignore lint/suspicious/noExplicitAny: be less restrictive here\nexport type AreaProps<T = any> = Omit<RechartsAreaProps, 'ref'> & {\n    strokeColor?: string;\n    // biome-ignore lint/suspicious/noExplicitAny: see above\n    dataKey?: string | number | ((obj: T) => any);\n    unit?: string;\n    legendType?: string;\n    type?: CurveType;\n    isAnimationActive?: boolean;\n};\n\nexport const getAreaDefaultProps = () => ({\n    dataKey: 'value',\n    unit: '',\n    strokeColor: 'color-coldplay-fountain',\n    legendType: 'square',\n    type: 'monotone',\n    isAnimationActive: true,\n});\n\nconst Area = (props: AreaProps) => null;\n\nexport default Area;\n"],"names":["getAreaDefaultProps","Area","props"],"mappings":"AAcO,MAAMA,IAAsB,OAAO;AAAA,EACtC,SAAS;AAAA,EACT,MAAM;AAAA,EACN,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,mBAAmB;AACvB,IAEMC,IAAO,CAACC,MAAqB;"}
+{"version":3,"file":"Area.js","sources":["../../../src/components/charts/Area.tsx"],"sourcesContent":["import type { AreaProps as RechartsAreaProps } from 'recharts';\nimport type { CurveType } from 'recharts/types/shape/Curve';\n\nexport type AreaProps<T = unknown> = Omit<RechartsAreaProps<T, unknown>, 'ref' | 'dataKey'> & {\n    strokeColor?: string;\n    fill?: string;\n    dataKey?: string | number | ((obj: T) => unknown);\n    unit?: string;\n    legendType?: string;\n    type?: CurveType;\n    isAnimationActive?: boolean;\n};\n\nexport const getAreaDefaultProps = () => ({\n    dataKey: 'value',\n    unit: '',\n    strokeColor: 'color-coldplay-fountain',\n    fill: 'color-coldplay-fountain',\n    legendType: 'square',\n    type: 'monotone',\n    isAnimationActive: true,\n});\n\nconst Area = (_props: AreaProps) => null;\n\nexport default Area;\n"],"names":["getAreaDefaultProps","Area","_props"],"mappings":"AAaO,MAAMA,IAAsB,OAAO;AAAA,EACtC,SAAS;AAAA,EACT,MAAM;AAAA,EACN,aAAa;AAAA,EACb,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,mBAAmB;AACvB,IAEMC,IAAO,CAACC,MAAsB;"}