@rio-cloud/rio-uikit 1.10.1 → 1.12.0

package/lib/es/src/components/selects/MultiselectToggleSelection.d.ts

@@ -0,0 +1,14 @@
+import React, { PropsWithChildren } from 'react';
+import type { SelectOption } from './BaseSelectDropdown';
+export type MultiselectToggleSelectionProps = {
+    options: SelectOption[];
+    selectedItemIds: string[];
+    showSelectedItemIcon: boolean;
+    showUnselectedItemIcons: boolean;
+    multiline: boolean;
+    hasInputAddon: boolean;
+    hasFilter: boolean;
+    onRemoveItem: (event: React.MouseEvent<HTMLSpanElement>, itemId: string) => void;
+};
+declare const MultiselectToggleSelection: (props: PropsWithChildren<MultiselectToggleSelectionProps>) => import("react/jsx-runtime").JSX.Element | null;
+export default MultiselectToggleSelection;

package/lib/es/src/components/selects/MultiselectToggleSelection.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
+const MultiselectToggleSelection = (props) => {
+    const { options, selectedItemIds, showSelectedItemIcon, showUnselectedItemIcons, multiline, hasInputAddon, hasFilter, onRemoveItem, children, } = props;
+    if (!options || (0, isEmpty_1.default)(options)) {
+        return null;
+    }
+    const isItemSelected = (item) => {
+        return selectedItemIds.indexOf(item.id) !== -1;
+    };
+    const renderSelectionItem = (item, index) => {
+        if (showSelectedItemIcon) {
+            const inactiveClassNames = (0, classnames_1.default)('margin-right-5', !isItemSelected(item) && 'inactiveIcon');
+            return ((0, jsx_runtime_1.jsx)("span", { className: inactiveClassNames, children: item.icon }, item.id));
+        }
+        return ((0, jsx_runtime_1.jsxs)("span", { className: 'selected-option', children: [(0, jsx_runtime_1.jsxs)("span", { className: 'selected-label', children: [item.icon && (0, jsx_runtime_1.jsx)("span", { className: 'margin-right-5', children: item.icon }), item.label] }), (0, jsx_runtime_1.jsx)("span", { className: 'removeIcon', onClick: event => {
+                        onRemoveItem(event, item.id);
+                    }, children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-remove' }) })] }, index));
+    };
+    const optionListClassNames = (0, classnames_1.default)(!showSelectedItemIcon && !showUnselectedItemIcons && 'selected-option-list', multiline && 'flex-wrap', hasInputAddon && 'margin-left-0', hasFilter && 'padding-left-1');
+    return ((0, jsx_runtime_1.jsxs)("span", { className: optionListClassNames, children: [options
+                .filter(option => (showUnselectedItemIcons ? !option.header : isItemSelected(option)))
+                .map((option, index) => renderSelectionItem(option, index)), children] }));
+};
+exports.default = MultiselectToggleSelection;

package/lib/es/src/components/selects/NoItemMessage.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export type NoItemMessageProps = {
+    noItemMessage: string | React.ReactNode;
+    className?: string;
+};
+declare const NoItemMessage: (props: NoItemMessageProps) => import("react/jsx-runtime").JSX.Element | null;
+export default NoItemMessage;

package/lib/es/src/components/selects/NoItemMessage.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const NoItemMessage = (props) => {
+    const { noItemMessage, className } = props;
+    if (!noItemMessage) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)("ul", { className: className, role: 'menu', children: (0, jsx_runtime_1.jsx)("li", { className: 'no-item-message disabled', role: 'presentation', children: (0, jsx_runtime_1.jsx)("a", { role: 'menuitem', children: (0, jsx_runtime_1.jsx)("i", { children: noItemMessage }) }) }) }));
+};
+exports.default = NoItemMessage;

package/lib/es/src/components/selects/Select.d.ts

@@ -0,0 +1,147 @@
+import React from 'react';
+import { type SelectOption } from './BaseSelectDropdown';
+import { type WithFeedbackAndAddonProps } from './WithFeedbackAndAddon';
+export type { SelectOption } from './BaseSelectDropdown';
+export type SelectProps<T extends SelectOption> = Omit<WithFeedbackAndAddonProps, 'bsSize'> & {
+    /**
+     * Passed through as HTML attribute to the toggle button.
+     */
+    name?: string;
+    /**
+     * Passed through as HTML attribute to the toggle button.
+     *
+     * @default Uses the value given to `name` if not provided explicitly.
+     */
+    id?: string;
+    /**
+     * The toggle label in front of the selected text.
+     */
+    label?: string | React.ReactNode;
+    /**
+     * Items to display in the dropdown menu.
+     *
+     * @default []
+     */
+    options?: T[];
+    /**
+     * Sets the ids of the selected options when the component is already mounted.
+     */
+    value?: string[];
+    /**
+     * Callback function triggered when an item is selected.
+     *
+     * @param selectedOption The option that was selected (or undefined if none was).
+     *
+     * @default () => {}
+     */
+    onChange?: (selectOption: T | undefined) => void;
+    /**
+     * Text to display when nothing is selected.
+     */
+    placeholder?: string | React.ReactNode;
+    /**
+     * Defines whether the dropdown opens upwards.
+     *
+     * Set to `true` additionally disables autoDrop feature.
+     *
+     * @default false
+     */
+    dropup?: boolean;
+    /**
+     * Defines whether the dropdown opens right aligned to the dropdown toggle.
+     *
+     * Set to 'true' additionally disables autoDrop feature.
+     *
+     * @default false
+     */
+    pullRight?: boolean;
+    /**
+     * Enables or disables the autoDrop positioning feature.
+     *
+     * When enabled, the option list opens below or above the input depending on the surrounding space.
+     *
+     * @default true
+     */
+    autoDropDirection?: boolean;
+    /**
+     * Defines the size of the select to be rendered.
+     *
+     * @default 'md'
+     */
+    bsSize?: 'sm' | 'md' | 'lg';
+    /**
+     * Option to disable the opening of the option list.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Sets the input's tabindex attribute.
+     *
+     * The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being
+     * sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for
+     * sequential focus navigation.
+     *
+     * @default 0
+     */
+    tabIndex?: number;
+    /**
+     * Defines whether the Bootstrap error classes shall be added to the toggle element.
+     *
+     * @default false
+     */
+    hasError?: boolean;
+    /**
+     * Defines whether the component should be filterable.
+     *
+     * @default false
+     */
+    useFilter?: boolean;
+    /**
+     * Set to show a clear button.
+     *
+     * @default false
+     */
+    useClear?: boolean;
+    /**
+     * Shows a loading spinner instead of the menu items if set to true.
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Text that shall be shown when not match was found when filtering.
+     */
+    noItemMessage?: string | React.ReactNode;
+    /**
+     * Text or node to be rendered on the toggle select instead of the selected item label.
+     */
+    selectedOptionText?: string | React.ReactNode;
+    /**
+     * Set to show only the icon and not the label of selected item.
+     *
+     * @default false
+     */
+    showSelectedItemIcon?: boolean;
+    /**
+     * Set to show all item icons within the toggle element.
+     *
+     * Selected items are highlighted and unselected items are shown as inactive.
+     *
+     * @default false
+     */
+    showUnselectedItemIcons?: boolean;
+    /**
+     * Additional classes to be set to the dropdown.
+     */
+    dropdownClassName?: string;
+    /**
+     * Additional classes to be set to the select/input.
+     */
+    btnClassName?: string;
+    /**
+     * Additional classes to be set to the select wrapper.
+     */
+    className?: string;
+};
+declare const Select: <T extends SelectOption>(props: SelectProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default Select;

package/lib/es/src/components/selects/Select.js

@@ -0,0 +1,145 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const isEqual_1 = tslib_1.__importDefault(require("lodash/fp/isEqual"));
+const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
+const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
+const BaseSelectDropdown_1 = tslib_1.__importStar(require("./BaseSelectDropdown"));
+const useClickOutside_1 = tslib_1.__importDefault(require("../../useClickOutside"));
+const useEffectOnce_1 = tslib_1.__importDefault(require("../../hooks/useEffectOnce"));
+const useMergeRefs_1 = tslib_1.__importDefault(require("../../hooks/useMergeRefs"));
+const ClearButton_1 = tslib_1.__importDefault(require("./ClearButton"));
+const SelectFilter_1 = tslib_1.__importDefault(require("./SelectFilter"));
+const SelectedOption_1 = tslib_1.__importDefault(require("./SelectedOption"));
+const WithFeedbackAndAddon_1 = tslib_1.__importDefault(require("./WithFeedbackAndAddon"));
+const DEFAULT_FOCUSED_ITEM_INDEX = -1;
+const Select = (props) => {
+    const { name, id = name, label, options = [], value, onChange = noop_1.default, placeholder, isLoading = false, dropup = false, pullRight = false, autoDropDirection = true, bsSize = 'md', disabled = false, tabIndex = 0, hasError = false, useFilter = false, useClear = false, noItemMessage, selectedOptionText, showSelectedItemIcon = false, showUnselectedItemIcons = false, dropdownClassName, btnClassName, className, inputAddon, errorMessage, warningMessage, messageWhiteSpace = 'normal', ...remainingProps } = props;
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const [selectedItem, setSelectedItem] = (0, react_1.useState)(null);
+    const [isFilterActive, setIsFilterActive] = (0, react_1.useState)(false);
+    const [filterValue, setFilterValue] = (0, react_1.useState)('');
+    const [filteredOptions, setFilteredOptions] = (0, react_1.useState)(options);
+    const [itemDOMValues, setItemDOMValues] = (0, react_1.useState)([]);
+    const [focusedItemIndex, setFocusedItemIndex] = (0, react_1.useState)(DEFAULT_FOCUSED_ITEM_INDEX);
+    const [keyboardUsed, setKeyboardUsed] = (0, react_1.useState)(false);
+    const refSelect = (0, react_1.useRef)();
+    const refToggle = (0, react_1.useRef)(null);
+    const ref = (0, useClickOutside_1.default)(() => closeMenu());
+    const mergedSelectRefs = (0, useMergeRefs_1.default)(refSelect, ref);
+    const updateSelectedItem = (selectOptions, updatedValue) => {
+        if (updatedValue && !(0, isEmpty_1.default)(updatedValue)) {
+            setSelectedItem(selectOptions.find(item => item.id === updatedValue[0]) || null);
+        }
+        else if (selectOptions) {
+            setSelectedItem(selectOptions.find(item => item.selected) || null);
+        }
+    };
+    (0, useEffectOnce_1.default)(() => {
+        updateSelectedItem(options, value);
+    });
+    const [previousOptions, setPreviousOptions] = (0, react_1.useState)(options);
+    if (!(0, isEqual_1.default)(options, previousOptions)) {
+        updateSelectedItem(options, value);
+        setFilteredOptions(options);
+        setPreviousOptions(options);
+    }
+    const [previousValue, setPreviousValue] = (0, react_1.useState)(value);
+    if (!(0, isEqual_1.default)(value, previousValue)) {
+        updateSelectedItem(options, value);
+        setPreviousValue(value);
+    }
+    const updateDOMValues = (itemDOMValuesToUpdated = []) => {
+        // preserve previous DOM values when empty
+        setItemDOMValues(prev => (itemDOMValuesToUpdated.length ? itemDOMValuesToUpdated : prev));
+    };
+    const handleClearSelectedItem = () => {
+        setSelectedItem(null);
+        setIsFilterActive(false);
+        setFilterValue('');
+        onChange(undefined);
+    };
+    const renderToggle = () => {
+        const toggleClasses = (0, classnames_1.default)('dropdown-toggle', 'form-control', 'text-left', btnClassName && btnClassName, bsSize === 'sm' && 'input-sm', bsSize === 'lg' && 'input-lg', disabled && 'disabled');
+        const toggleButton = ((0, jsx_runtime_1.jsxs)("button", { type: 'button', id: id, name: name, className: toggleClasses, "data-toggle": 'dropdown', tabIndex: tabIndex, "aria-haspopup": 'true', "aria-expanded": isOpen, onClick: onToggle, ref: refToggle, children: [useFilter && isOpen && ((0, jsx_runtime_1.jsx)(SelectFilter_1.default, { isFilterActive: isFilterActive, filterValue: filterValue, onChange: handleFilterChange })), selectedOptionText ? (selectedOptionText) : ((0, jsx_runtime_1.jsx)(SelectedOption_1.default, { label: label, placeholder: placeholder, selectedItem: selectedItem, options: options, showSelectedItemIcon: showSelectedItemIcon, showUnselectedItemIcons: showUnselectedItemIcons })), (0, jsx_runtime_1.jsx)(ClearButton_1.default, { showClear: useClear, selectedItem: selectedItem, onClear: handleClearSelectedItem }), (0, jsx_runtime_1.jsx)("span", { className: 'caret' })] }));
+        if (!inputAddon && !errorMessage && !warningMessage) {
+            return toggleButton;
+        }
+        return ((0, jsx_runtime_1.jsx)(WithFeedbackAndAddon_1.default, { bsSize: bsSize, inputAddon: inputAddon, errorMessage: errorMessage, warningMessage: warningMessage, messageWhiteSpace: messageWhiteSpace, children: toggleButton }));
+    };
+    const renderDropdownMenu = () => {
+        // When an option was already selected, highlight this option by setting the focusedItemIndex accordingly.
+        // In case there was nothing preselected, set the focusedItemIndex to the first item if keyboard was used.
+        let currentFocusedItemIndex = focusedItemIndex;
+        if (selectedItem) {
+            currentFocusedItemIndex = options.findIndex(option => {
+                return option.id === selectedItem.id;
+            });
+        }
+        else if (keyboardUsed) {
+            currentFocusedItemIndex = 0;
+        }
+        return ((0, jsx_runtime_1.jsx)(BaseSelectDropdown_1.default, { isOpen: isOpen, isLoading: isLoading, options: filteredOptions, focusedItemIndex: currentFocusedItemIndex, keyboardUsed: keyboardUsed, updateDOMValues: updateDOMValues, onSelect: onOptionChange, onClose: closeMenu, noItemMessage: noItemMessage, pullRight: pullRight, dropup: dropup, autoDropDirection: autoDropDirection, dropdownClassName: dropdownClassName }));
+    };
+    const handleFilterChange = (event) => {
+        event.preventDefault();
+        const targetFilterValue = event.currentTarget.value;
+        // if cleared: reset to defaults and bail early
+        if (targetFilterValue === '') {
+            setIsFilterActive(false);
+            setFilterValue('');
+            setFilteredOptions(options);
+            setKeyboardUsed(false);
+            setFocusedItemIndex(DEFAULT_FOCUSED_ITEM_INDEX);
+            return;
+        }
+        // otherwise: filter against the last known non-empty DOM snapshot
+        const currentFilteredOptions = (0, BaseSelectDropdown_1.filterOptions)(itemDOMValues, targetFilterValue, options);
+        // highlight the first item of the search result if at least one item was found
+        const newFocusedItemIndex = currentFilteredOptions.length > 0 ? 0 : DEFAULT_FOCUSED_ITEM_INDEX;
+        setIsFilterActive(true);
+        setFilterValue(targetFilterValue);
+        setFilteredOptions(currentFilteredOptions);
+        setKeyboardUsed(true);
+        setFocusedItemIndex(newFocusedItemIndex);
+    };
+    const onOptionChange = (currentSelectedItem) => {
+        setSelectedItem(currentSelectedItem || null);
+        setIsFilterActive(false);
+        setFilterValue('');
+        setFilteredOptions(options);
+        onChange(currentSelectedItem);
+        closeMenu();
+    };
+    const onToggle = (event) => {
+        // Don't toggle when component is disabled or
+        // when filter is active, means entering some filter value
+        // in order to avoid closing menu on space but allow to use it for filtering
+        if (disabled || isFilterActive) {
+            return;
+        }
+        // using the enter key on the toggle button will trigger a synthetic click event as all buttons are of
+        // type submit by default in HTML. In order to differentiate between real click and a synthetic event
+        // caused by they keyboard, use the event details. A synthetic event is always 0.
+        const isKeyboardUsed = event.detail === 0;
+        setIsOpen(!isOpen);
+        setKeyboardUsed(isKeyboardUsed);
+    };
+    const closeMenu = () => {
+        if (isOpen) {
+            setIsOpen(false);
+            setIsFilterActive(false);
+            setFilterValue('');
+            setFilteredOptions(options);
+            setKeyboardUsed(false);
+            setFocusedItemIndex(DEFAULT_FOCUSED_ITEM_INDEX);
+            refToggle.current?.focus();
+        }
+    };
+    const classes = (0, classnames_1.default)('select', 'dropdown', isOpen && 'open', hasError && 'has-error', className && className);
+    return ((0, jsx_runtime_1.jsxs)("div", { ...remainingProps, className: classes, ref: mergedSelectRefs, children: [renderToggle(), renderDropdownMenu()] }));
+};
+exports.default = Select;

package/lib/es/src/components/selects/SelectFilter.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export type SelectFilterProps = {
+    isFilterActive: boolean;
+    filterValue: string;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+};
+declare const SelectFilter: (props: SelectFilterProps) => import("react/jsx-runtime").JSX.Element;
+export default SelectFilter;

package/lib/es/src/components/selects/SelectFilter.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const SelectFilter = (props) => {
+    const { isFilterActive, filterValue, onChange } = props;
+    const inputClasses = (0, classnames_1.default)('select-filter-input', (isFilterActive || filterValue) && 'select-filter-input-active');
+    // biome-ignore lint/a11y/noAutofocus: autofocus is intentionally set to allow instant typing to filter
+    return (0, jsx_runtime_1.jsx)("input", { type: 'text', className: inputClasses, autoFocus: true, onChange: onChange, value: filterValue });
+};
+exports.default = SelectFilter;

package/lib/es/src/components/selects/SelectedOption.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { SelectOption } from './Select';
+export type SelectedOptionProps = {
+    label: string | React.ReactNode;
+    placeholder?: string | React.ReactNode;
+    selectedItem: SelectOption | null;
+    showSelectedItemIcon: boolean;
+    showUnselectedItemIcons: boolean;
+    options: SelectOption[];
+};
+declare const SelectedOption: (props: SelectedOptionProps) => import("react/jsx-runtime").JSX.Element;
+export default SelectedOption;

package/lib/es/src/components/selects/SelectedOption.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const SelectedOption = (props) => {
+    const { label, placeholder, selectedItem, options, showSelectedItemIcon, showUnselectedItemIcons } = props;
+    const renderUnselectedItemIcons = (optionsToRender, currentSelectedItem) => {
+        const optionSpans = optionsToRender
+            .filter(option => !option.header)
+            .map(option => ((0, jsx_runtime_1.jsx)("span", { className: `${currentSelectedItem && currentSelectedItem.id === option.id ? '' : 'inactiveIcon'}`, children: option.icon }, option.id)));
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: optionSpans });
+    };
+    const getSelectedItemLabel = (item, placeholderValue) => {
+        if (showUnselectedItemIcons) {
+            return renderUnselectedItemIcons(options, item);
+        }
+        if (!item) {
+            // render a placeholder or if there is none render a non-breaking space " "
+            return placeholderValue ? (0, jsx_runtime_1.jsx)("span", { className: 'placeholder', children: placeholderValue }) : '\u00a0';
+        }
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [item.icon && (0, jsx_runtime_1.jsx)("span", { children: item.icon }), !showSelectedItemIcon && item.label] }));
+    };
+    return ((0, jsx_runtime_1.jsxs)("span", { className: 'selected-option-text', children: [label && (0, jsx_runtime_1.jsxs)("span", { className: 'selected-option-text-label', children: [label, ":"] }), getSelectedItemLabel(selectedItem, placeholder)] }));
+};
+exports.default = SelectedOption;

package/lib/es/src/components/selects/WithFeedbackAndAddon.d.ts

@@ -0,0 +1,29 @@
+import React, { type PropsWithChildren } from 'react';
+export type WithFeedbackAndAddonProps = {
+    /**
+     * Defines the size of the select to be rendered.
+     *
+     * @default 'md'
+     */
+    bsSize?: 'sm' | 'md' | 'lg';
+    /**
+     * Option to add an icon as a leading input addon to the select or multiselect component.
+     */
+    inputAddon?: string;
+    /**
+     * Input error message.
+     */
+    errorMessage?: string | React.ReactNode;
+    /**
+     * Input warning message.
+     */
+    warningMessage?: string | React.ReactNode;
+    /**
+     * Optional warning message white-space setting.
+     *
+     * @default 'normal'
+     */
+    messageWhiteSpace?: 'normal' | 'nowrap' | 'pre-line';
+};
+declare const WithFeedbackAndAddon: (props: PropsWithChildren<WithFeedbackAndAddonProps>) => import("react/jsx-runtime").JSX.Element;
+export default WithFeedbackAndAddon;

package/lib/es/src/components/selects/WithFeedbackAndAddon.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const WithFeedbackAndAddon = (props) => {
+    const { bsSize = 'md', inputAddon, errorMessage, warningMessage, messageWhiteSpace = 'normal', children } = props;
+    const formGroupClassName = (0, classnames_1.default)('form-group margin-bottom-0', (errorMessage || warningMessage) && 'has-feedback', errorMessage && 'has-error', warningMessage && 'has-warning');
+    const inputGroupClassNames = (0, classnames_1.default)('input-group', bsSize === 'sm' && 'input-group-sm', bsSize === 'lg' && 'input-group-lg');
+    const hasFeedbackMessage = errorMessage || warningMessage;
+    return ((0, jsx_runtime_1.jsx)("div", { className: formGroupClassName, children: (0, jsx_runtime_1.jsxs)("div", { className: inputGroupClassNames, children: [inputAddon && ((0, jsx_runtime_1.jsx)("div", { className: 'input-group-addon', children: (0, jsx_runtime_1.jsx)("span", { className: inputAddon }) })), (0, jsx_runtime_1.jsxs)("div", { className: 'form-control-feedback-wrapper', children: [children, hasFeedbackMessage && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [errorMessage && (0, jsx_runtime_1.jsx)("span", { className: 'form-control-feedback rioglyph rioglyph-error-sign' }), warningMessage && ((0, jsx_runtime_1.jsx)("span", { className: 'form-control-feedback rioglyph rioglyph-warning-sign' })), (0, jsx_runtime_1.jsx)("span", { className: `help-block white-space-${messageWhiteSpace}`, children: (0, jsx_runtime_1.jsx)("span", { children: errorMessage || warningMessage }) })] }))] })] }) }));
+};
+exports.default = WithFeedbackAndAddon;

package/lib/es/src/components/sidebars/Sidebar.d.ts

@@ -0,0 +1,183 @@
+import React, { type PropsWithChildren } from 'react';
+import type { ObjectValues } from '../../utils/ObjectValues';
+declare const SidebarPosition: {
+    readonly LEFT: "left";
+    readonly RIGHT: "right";
+};
+export type SidebarProps = {
+    /**
+     * Defines if the component will overlap the body content.
+     * @default false
+     */
+    fly?: boolean;
+    /**
+     * Defines whether the component is hidden or not.
+     * @default false
+     */
+    closed?: boolean;
+    /**
+     * Hides the close button. This may be used when the sidebar is always visible and may not be closed.
+     * @default false
+     */
+    disableClose?: boolean;
+    /**
+     * Callback function triggered when clicking the close icon.
+     */
+    onClose?: VoidFunction;
+    /**
+     * The Footer content. For example a save button.
+     */
+    footer?: string | React.ReactNode;
+    /**
+     * Additional classes added to the Sidebar footer.
+     */
+    footerClassName?: string;
+    /**
+     * Additional buttons to be rendered in the header.
+     */
+    headerButtons?: React.ReactNode;
+    /**
+     * Additional classes added to the Sidebar header.
+     */
+    headerClassName?: string;
+    /**
+     * Shows a sidebar header border
+     */
+    showHeaderBorder?: boolean;
+    /**
+     * Defines the width of the component. The value is set as pixel value as inline style.
+     * Note: In the past, the type allowed to pass in a sting value like "400px" but that is not
+     * possible anymore due to internal width calculations. To be backwards compatible for non
+     * Typescript projects, the width is converted to a number.
+     * @default 350
+     */
+    width?: number;
+    /**
+     * Defines the minimum width in px of the component that will take effect when resizing.
+     * @default 100
+     */
+    minWidth?: number;
+    /**
+     * Defines the maximum width in px of the component that will take effect when resizing.
+     * @default 800
+     */
+    maxWidth?: number;
+    /**
+     * Opens Sidebar in fullscreen, means 100vw.
+     * @default false
+     */
+    openInFullscreen?: boolean;
+    /**
+     * Callback for when the fullscreen is toggled.
+     */
+    onFullScreenChange?: VoidFunction;
+    /**
+     * Enables the fullscreen functionality and shows the fullscreen toggle.
+     * @default false
+     */
+    enableFullscreenToggle?: boolean;
+    /**
+     * Translated tooltip text for the fullscreen toggle button.
+     */
+    fullscreenToggleTooltip?: string;
+    /**
+     * @deprecated Please use `headerButtons` instead. This allows to also add
+     * translated tooltips to the next and previous button
+     */
+    enableNavigationButtons?: boolean;
+    /**
+     * @deprecated Please use `enableFullscreenToggle` instead.
+     */
+    disableFullscreen?: boolean;
+    /**
+     * @deprecated Please use `openInFullscreen` instead.
+     */
+    fullscreen?: boolean;
+    /**
+     * Tells the sidebar where it is positioned. This will affect the resizing behavior
+     * respectively. Note: the position need to be set properly whe using the resize
+     * functionality to know on which side of the sidebar to attach the resizer handle.
+     *
+     * It is also relevant when the sidebar mode is set to 'fly' to properly animate
+     * the sidebar into the view.
+     *
+     * Possible values are:
+     * `left`, `right`, `Sidebar.LEFT` or `Sidebar.RIGHT`.
+     *
+     * @default 'left'
+     */
+    position?: ObjectValues<typeof SidebarPosition>;
+    /**
+     * Defines whether or not the sidebar is resizable.
+     * @default false
+     */
+    resizable?: boolean;
+    /**
+     * Callback for when the resize is done.
+     */
+    onResizeEnd?: VoidFunction;
+    /**
+     * Defines the breakpoint in pixel when the sidebar mode shall be changed. If the window width is lower
+     * than the given breakpoint the mode is set to `fly`. If the window width is higher the mode is set
+     * to `fluid`. This functionality is disabled by default and will be enabled when defining a breakpoint
+     * higher than 0.
+     */
+    switchModeBreakpoint?: number;
+    /**
+     * By default the fullscreen mode can be left with "esc". If this is unwanted it can be disabled.
+     * @default false
+     */
+    disableEsc?: boolean;
+    /**
+     * Defined whether or not a backdrop will be rendered behind the Sidebar to avoid clicks outside.
+     * @default false
+     */
+    hasBackdrop?: boolean;
+    /**
+     * Defined whether or not the UIKIT SmoothScrollbar is active
+     * @default false
+     */
+    hasSmoothScrollbar?: boolean;
+    /**
+     * Defined whether or not the backdrop is visible similar to the backdrop for modal dialogs.
+     * @default false
+     */
+    makeBackdropVisible?: boolean;
+    /**
+     * Callback for when the backdrop is clicked. This comes in handy when handling transient data from
+     * the sidebar which need to be saved first and handle clicks outside.
+     */
+    onBackdropClick?: VoidFunction;
+    /**
+     * Additional ref added to the Sidebar body.
+     */
+    bodyRef?: React.MutableRefObject<HTMLDivElement | null>;
+    /**
+     * Content that will be displayed in the components header.
+     */
+    title?: string | React.ReactNode;
+    /**
+     * Additional classes added to the Sidebar title.
+     */
+    titleClassName?: string;
+    /**
+     * Additional classes added to the Sidebar backdrop.
+     */
+    backdropClassName?: string;
+    /**
+     * Additional classes added to the Sidebar body.
+     */
+    bodyClassName?: string;
+    /**
+     * Additional classes added on the wrapper element.
+     */
+    className?: string;
+};
+declare const Sidebar: {
+    (props: PropsWithChildren<SidebarProps>): import("react/jsx-runtime").JSX.Element;
+    LEFT: "left";
+    RIGHT: "right";
+    MODE_FLY: string;
+    MODE_FLUID: string;
+};
+export default Sidebar;