@rio-cloud/rio-uikit 1.10.1 → 1.12.0

package/src/components/selects/Select.js

@@ -0,0 +1,142 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import classNames from 'classnames';
+import isEqual from 'lodash/fp/isEqual';
+import isEmpty from 'lodash/fp/isEmpty';
+import noop from 'lodash/fp/noop';
+import BaseSelectDropdown, { filterOptions } from './BaseSelectDropdown';
+import useClickOutside from '../../useClickOutside';
+import useEffectOnce from '../../hooks/useEffectOnce';
+import useMergeRefs from '../../hooks/useMergeRefs';
+import ClearButton from './ClearButton';
+import SelectFilter from './SelectFilter';
+import SelectedOption from './SelectedOption';
+import WithFeedbackAndAddon from './WithFeedbackAndAddon';
+const DEFAULT_FOCUSED_ITEM_INDEX = -1;
+const Select = (props) => {
+    const { name, id = name, label, options = [], value, onChange = noop, 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] = useState(false);
+    const [selectedItem, setSelectedItem] = useState(null);
+    const [isFilterActive, setIsFilterActive] = useState(false);
+    const [filterValue, setFilterValue] = useState('');
+    const [filteredOptions, setFilteredOptions] = useState(options);
+    const [itemDOMValues, setItemDOMValues] = useState([]);
+    const [focusedItemIndex, setFocusedItemIndex] = useState(DEFAULT_FOCUSED_ITEM_INDEX);
+    const [keyboardUsed, setKeyboardUsed] = useState(false);
+    const refSelect = useRef();
+    const refToggle = useRef(null);
+    const ref = useClickOutside(() => closeMenu());
+    const mergedSelectRefs = useMergeRefs(refSelect, ref);
+    const updateSelectedItem = (selectOptions, updatedValue) => {
+        if (updatedValue && !isEmpty(updatedValue)) {
+            setSelectedItem(selectOptions.find(item => item.id === updatedValue[0]) || null);
+        }
+        else if (selectOptions) {
+            setSelectedItem(selectOptions.find(item => item.selected) || null);
+        }
+    };
+    useEffectOnce(() => {
+        updateSelectedItem(options, value);
+    });
+    const [previousOptions, setPreviousOptions] = useState(options);
+    if (!isEqual(options, previousOptions)) {
+        updateSelectedItem(options, value);
+        setFilteredOptions(options);
+        setPreviousOptions(options);
+    }
+    const [previousValue, setPreviousValue] = useState(value);
+    if (!isEqual(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 = classNames('dropdown-toggle', 'form-control', 'text-left', btnClassName && btnClassName, bsSize === 'sm' && 'input-sm', bsSize === 'lg' && 'input-lg', disabled && 'disabled');
+        const toggleButton = (_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 && (_jsx(SelectFilter, { isFilterActive: isFilterActive, filterValue: filterValue, onChange: handleFilterChange })), selectedOptionText ? (selectedOptionText) : (_jsx(SelectedOption, { label: label, placeholder: placeholder, selectedItem: selectedItem, options: options, showSelectedItemIcon: showSelectedItemIcon, showUnselectedItemIcons: showUnselectedItemIcons })), _jsx(ClearButton, { showClear: useClear, selectedItem: selectedItem, onClear: handleClearSelectedItem }), _jsx("span", { className: 'caret' })] }));
+        if (!inputAddon && !errorMessage && !warningMessage) {
+            return toggleButton;
+        }
+        return (_jsx(WithFeedbackAndAddon, { 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 (_jsx(BaseSelectDropdown, { 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 = 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 = classNames('select', 'dropdown', isOpen && 'open', hasError && 'has-error', className && className);
+    return (_jsxs("div", { ...remainingProps, className: classes, ref: mergedSelectRefs, children: [renderToggle(), renderDropdownMenu()] }));
+};
+export default Select;

package/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/src/components/selects/SelectFilter.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+const SelectFilter = (props) => {
+    const { isFilterActive, filterValue, onChange } = props;
+    const inputClasses = classNames('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 _jsx("input", { type: 'text', className: inputClasses, autoFocus: true, onChange: onChange, value: filterValue });
+};
+export default SelectFilter;

package/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/src/components/selects/SelectedOption.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "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 => (_jsx("span", { className: `${currentSelectedItem && currentSelectedItem.id === option.id ? '' : 'inactiveIcon'}`, children: option.icon }, option.id)));
+        return _jsx(_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 ? _jsx("span", { className: 'placeholder', children: placeholderValue }) : '\u00a0';
+        }
+        return (_jsxs(_Fragment, { children: [item.icon && _jsx("span", { children: item.icon }), !showSelectedItemIcon && item.label] }));
+    };
+    return (_jsxs("span", { className: 'selected-option-text', children: [label && _jsxs("span", { className: 'selected-option-text-label', children: [label, ":"] }), getSelectedItemLabel(selectedItem, placeholder)] }));
+};
+export default SelectedOption;

package/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/src/components/selects/WithFeedbackAndAddon.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+const WithFeedbackAndAddon = (props) => {
+    const { bsSize = 'md', inputAddon, errorMessage, warningMessage, messageWhiteSpace = 'normal', children } = props;
+    const formGroupClassName = classNames('form-group margin-bottom-0', (errorMessage || warningMessage) && 'has-feedback', errorMessage && 'has-error', warningMessage && 'has-warning');
+    const inputGroupClassNames = classNames('input-group', bsSize === 'sm' && 'input-group-sm', bsSize === 'lg' && 'input-group-lg');
+    const hasFeedbackMessage = errorMessage || warningMessage;
+    return (_jsx("div", { className: formGroupClassName, children: _jsxs("div", { className: inputGroupClassNames, children: [inputAddon && (_jsx("div", { className: 'input-group-addon', children: _jsx("span", { className: inputAddon }) })), _jsxs("div", { className: 'form-control-feedback-wrapper', children: [children, hasFeedbackMessage && (_jsxs(_Fragment, { children: [errorMessage && _jsx("span", { className: 'form-control-feedback rioglyph rioglyph-error-sign' }), warningMessage && (_jsx("span", { className: 'form-control-feedback rioglyph rioglyph-warning-sign' })), _jsx("span", { className: `help-block white-space-${messageWhiteSpace}`, children: _jsx("span", { children: errorMessage || warningMessage }) })] }))] })] }) }));
+};
+export default WithFeedbackAndAddon;

package/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;

package/src/components/sidebars/Sidebar.js

@@ -0,0 +1,183 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import classNames from 'classnames';
+import noop from 'lodash/fp/noop';
+import toNumber from 'lodash/fp/toNumber';
+import SidebarFooter from './SidebarFooter';
+import SidebarBackdrop from './SidebarBackdrop';
+import SidebarFullscreenToggle from './SidebarFullscreenToggle';
+import SidebarCloseButton from './SidebarCloseButton';
+import Resizer from '../resizer/Resizer';
+import useWindowResize from '../../hooks/useWindowResize';
+import useEsc from '../../hooks/useEsc';
+import getWidthInBoundaries from '../../utils/getWidthInBoundaries';
+import SmoothScrollbars from '../smoothScrollbars/SmoothScrollbars';
+const DEFAULT_WIDTH = 350;
+const DEFAULT_MIN_WIDTH = 100;
+const DEFAULT_MAX_WIDTH = 800;
+const DEFAULT_SWITCH_MODE_BREAKPOINT = 0;
+// Values define the min and max width for the module-content
+// where the fluid sidebar automatically changes to "fly" and back.
+const MIN_MODULE_CONTENT_WIDTH = 400;
+const MAX_MODULE_CONTENT_WIDTH = 800;
+const ANIMATION_DURATION = 0.14;
+const RESIZE_THROTTLE = 500;
+const SidebarPosition = {
+    LEFT: 'left',
+    RIGHT: 'right',
+};
+const SidebarMode = {
+    MODE_FLY: 'fly',
+    MODE_FLUID: 'fluid',
+};
+const animationVariants = {
+    sidebarEnter: ({ fromRight }) => {
+        return {
+            x: fromRight ? '100%' : '-100%',
+            opacity: 0,
+        };
+    },
+    sidebarVisible: ({ fromRight, closed }) => {
+        return {
+            x: !closed ? 0 : fromRight ? '100%' : '-100%',
+            opacity: closed ? 0 : 1,
+            display: closed ? 'none' : 'block',
+        };
+    },
+    sidebarExit: ({ fromRight }) => {
+        return {
+            x: fromRight ? '100%' : '-100%',
+            opacity: 0,
+        };
+    },
+};
+const Sidebar = (props) => {
+    const { fly = false, closed = false, title = '', footer, resizable = false, position, width = DEFAULT_WIDTH, minWidth = DEFAULT_MIN_WIDTH, maxWidth = DEFAULT_MAX_WIDTH, hasBackdrop = false, hasSmoothScrollbar = false, makeBackdropVisible = false, enableFullscreenToggle = false, fullscreenToggleTooltip, openInFullscreen = false, showHeaderBorder = false, disableClose = false, bodyRef, headerButtons, switchModeBreakpoint = DEFAULT_SWITCH_MODE_BREAKPOINT, onClose = noop, onResizeEnd = noop, onFullScreenChange = noop, onBackdropClick = noop, disableEsc = false, titleClassName = '', bodyClassName = '', headerClassName = '', footerClassName = '', backdropClassName = '', className = '', children, ...remainingProps } = props;
+    const [internalWidth, setInternalWidth] = useState(toNumber(width));
+    const [sidebarMode, setSidebarMode] = useState(fly ? Sidebar.MODE_FLY : Sidebar.MODE_FLUID);
+    const [isFullscreen, setIsFullscreen] = useState(openInFullscreen);
+    const [isResize, setIsResize] = useState(false);
+    const [isSplit, setIsSplit] = useState(false);
+    const [isRight, setIsRight] = useState(position === SidebarPosition.RIGHT);
+    const sidebarRef = useRef(null);
+    // Used to keep the external reference to the module-content to avoid querying the DOM
+    // periodically on window resize
+    const moduleContentRef = useRef(null);
+    // Position fallback in case the position property is not defined but the sidebar mode is fly
+    // and we want to animate it, we nee to know the direction from where th sidebar is coming from.
+    // That's why we check the ApplicationLayoutSidebar class if the sidebar inside is right aligned
+    // or not and us this value instead.
+    // 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.
+    useEffect(() => {
+        if (sidebarRef.current && sidebarMode === Sidebar.MODE_FLY) {
+            const sidebarLayout = sidebarRef.current.parentNode;
+            if (sidebarLayout?.className.includes('right')) {
+                setIsRight(true);
+            }
+        }
+    }, [sidebarRef.current, sidebarMode]);
+    // Keep the previous closed state in order to prevent animation when switching sidebar mode
+    const [previousClosed, setPreviousClosed] = useState(closed);
+    if (previousClosed !== closed) {
+        setPreviousClosed(closed);
+    }
+    // Update internal width from outside
+    const [previousWidth, setPreviousWidth] = useState(width);
+    if (previousWidth !== width) {
+        console.log('update internal width');
+        setInternalWidth(toNumber(width));
+        setPreviousWidth(width);
+    }
+    // Switch between mode "fly" and "fluid"
+    useWindowResize(() => adaptSidebarMode(), RESIZE_THROTTLE);
+    // Initially check breakpoint after mounting the component
+    useEffect(() => adaptSidebarMode(), []);
+    // When Sidebar opens, check for available module-content width and
+    // switch sidebar mode to fly in case
+    useEffect(() => {
+        if (!closed) {
+            setTimeout(() => adaptSidebarMode());
+        }
+    }, [closed]);
+    useEffect(() => {
+        const moduleContent = document.querySelector('.module-content');
+        if (moduleContent) {
+            moduleContentRef.current = moduleContent;
+        }
+    }, []);
+    // Close the fullscreen with "esc"
+    useEsc(() => {
+        if (!disableEsc && enableFullscreenToggle && isFullscreen) {
+            setIsFullscreen(false);
+            onFullScreenChange(false);
+        }
+    });
+    const adaptSidebarMode = () => {
+        const moduleContentWidth = moduleContentRef.current?.clientWidth;
+        if (fly || switchModeBreakpoint === DEFAULT_SWITCH_MODE_BREAKPOINT) {
+            return;
+        }
+        const isModuleContentTooSmall = moduleContentWidth && moduleContentWidth <= MIN_MODULE_CONTENT_WIDTH;
+        const isModuleContentBigEnough = moduleContentWidth && moduleContentWidth > MAX_MODULE_CONTENT_WIDTH;
+        const isWindowSmallerThanBreakpoint = window.innerWidth <= switchModeBreakpoint;
+        // switch to fly when module-content is less than x pixel and back if it is bigger
+        if (isModuleContentTooSmall || isWindowSmallerThanBreakpoint) {
+            setSidebarMode(Sidebar.MODE_FLY);
+            return;
+        }
+        // if module-content is bigger and is initially fluid set back to initial fluid state
+        if (isModuleContentBigEnough && !isWindowSmallerThanBreakpoint) {
+            setSidebarMode(Sidebar.MODE_FLUID);
+            return;
+        }
+    };
+    const handleResize = (diff) => {
+        const wasSplit = isSplit;
+        const halfWindowWidth = window.innerWidth * 0.5;
+        const usedMaxWidth = maxWidth || halfWindowWidth;
+        // Check for sidebar width if it is half the window size. If it was before but the sidebar was resized so it is
+        // no longer half window size, set the sidebar with to half window size to avoid jumping sidebar to old width
+        setInternalWidth(oldWidth => {
+            const updatedWidth = position === Sidebar.RIGHT ? oldWidth + diff : oldWidth - diff;
+            const newWidth = getWidthInBoundaries(minWidth, usedMaxWidth, updatedWidth);
+            const newIsSplit = newWidth === halfWindowWidth;
+            setIsSplit(newIsSplit);
+            return wasSplit && !isSplit ? halfWindowWidth : newWidth;
+        });
+        adaptSidebarMode();
+    };
+    const handleResizeStart = () => {
+        const body = document.body;
+        body?.classList.add('pointer-events-none');
+        setIsResize(true);
+    };
+    const handleResizeEnd = () => {
+        const body = document.body;
+        body?.classList.remove('pointer-events-none');
+        setIsResize(false);
+        onResizeEnd();
+    };
+    const handleFullscreenChange = () => {
+        const newFullscreenState = !isFullscreen;
+        setIsFullscreen(newFullscreenState);
+        onFullScreenChange(newFullscreenState);
+    };
+    const wrapperClasses = classNames('Sidebar', className, closed && 'closed', isFullscreen && 'width-100vw sidebar-fullscreen', isSplit && !isFullscreen && 'max-width-50vw width-50vw', sidebarMode === SidebarMode.MODE_FLY ? 'fly' : isFullscreen ? 'fly' : 'fluid');
+    const headerClassNames = classNames('SidebarHeader', headerClassName, showHeaderBorder && 'show-border');
+    const titleClassNames = classNames('SidebarTitle', titleClassName);
+    const bodyClassNames = classNames('SidebarBody', bodyClassName);
+    const resizeLimitClasses = classNames('SidebarResizeLimit', isResize && 'display-block');
+    const resizeIndicatorPosition = maxWidth || window.innerWidth * 0.5;
+    const resizeLimitStyle = isRight ? { right: resizeIndicatorPosition } : { left: resizeIndicatorPosition };
+    const sidebarContent = (_jsxs(_Fragment, { children: [_jsx("div", { className: resizeLimitClasses, style: resizeLimitStyle }), _jsxs("div", { className: 'SidebarContent', children: [_jsxs("div", { className: headerClassNames, children: [_jsx("div", { className: titleClassNames, children: title }), _jsxs("div", { className: 'SidebarButtons non-printable close', children: [headerButtons, enableFullscreenToggle && (_jsx(SidebarFullscreenToggle, { isFullscreen: isFullscreen, onClick: handleFullscreenChange, tooltip: fullscreenToggleTooltip })), !disableClose && (headerButtons || enableFullscreenToggle) && (_jsx("div", { className: 'SidebarButtons-spacer' })), !disableClose && _jsx(SidebarCloseButton, { onClick: onClose })] })] }), hasSmoothScrollbar ? (_jsx(SmoothScrollbars, { slideIn: true, className: bodyClassNames, ref: bodyRef, children: children })) : (_jsx("div", { className: bodyClassNames, ref: bodyRef, children: children })), _jsx(SidebarFooter, { footer: footer, className: footerClassName })] }), resizable && (_jsx(Resizer, { onResizeStart: handleResizeStart, onResize: handleResize, onResizeEnd: handleResizeEnd, direction: Resizer.HORIZONTAL, position: isRight ? Resizer.LEFT : Resizer.RIGHT }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(AnimatePresence, { initial: true, exitBeforeEnter: true, children: _jsx(motion.div, { ...remainingProps, initial: previousClosed && 'sidebarEnter', animate: 'sidebarVisible', 
+                    // Cannot exit animation as sidebar is moved to offscreen by CSS class, means is still mounted
+                    exit: 'sidebarExit', variants: animationVariants, custom: { fromRight: isRight, closed }, transition: { duration: ANIMATION_DURATION }, className: wrapperClasses, style: { width: internalWidth }, ref: sidebarRef, children: sidebarContent }) }), hasBackdrop && !closed && (_jsx(SidebarBackdrop, { className: backdropClassName, makeBackdropVisible: makeBackdropVisible, onClick: onBackdropClick }))] }));
+};
+Sidebar.LEFT = SidebarPosition.LEFT;
+Sidebar.RIGHT = SidebarPosition.RIGHT;
+Sidebar.MODE_FLY = SidebarMode.MODE_FLY;
+Sidebar.MODE_FLUID = SidebarMode.MODE_FLUID;
+export default Sidebar;

package/src/components/sidebars/SidebarBackdrop.d.ts

@@ -0,0 +1,7 @@
+export type SidebarBackdropProps = {
+    makeBackdropVisible?: boolean;
+    onClick?: VoidFunction;
+    className?: string;
+};
+declare const SidebarBackdrop: ({ onClick, makeBackdropVisible, className }: SidebarBackdropProps) => import("react/jsx-runtime").JSX.Element;
+export default SidebarBackdrop;

package/src/components/sidebars/SidebarBackdrop.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import noop from 'lodash/fp/noop';
+const SidebarBackdrop = ({ onClick = noop, makeBackdropVisible = false, className = '' }) => {
+    const backdropClassNames = classNames('SidebarBackdrop', makeBackdropVisible && 'sidebar-backdrop-bg', className);
+    return _jsx("div", { className: backdropClassNames, onClick: onClick, "data-testid": 'sidebarBackdrop' });
+};
+export default SidebarBackdrop;

package/src/components/sidebars/SidebarCloseButton.d.ts

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

package/src/components/sidebars/SidebarCloseButton.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import noop from 'lodash/fp/noop';
+import Button from '../button/Button';
+const SidebarCloseButton = ({ onClick = noop }) => {
+    return (_jsx(Button, { bsStyle: Button.MUTED, iconOnly: true, onClick: onClick, "data-testid": 'sidebarCloseButton', children: _jsx("span", { className: 'rioglyph rioglyph-remove' }) }));
+};
+export default SidebarCloseButton;

package/src/components/sidebars/SidebarFooter.d.ts

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