@rio-cloud/rio-uikit 0.16.4-beta.7 → 1.0.0

package/lib/es/components/sidebars/Sidebar.js

@@ -2,218 +2,186 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-/* eslint-disable complexity, no-nested-ternary */
-const react_1 = tslib_1.__importStar(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
-const Resizer_1 = tslib_1.__importDefault(require("../resizer/Resizer"));
+const react_1 = require("react");
+const framer_motion_1 = require("framer-motion");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const throttle_1 = tslib_1.__importDefault(require("lodash/fp/throttle"));
-const head_1 = tslib_1.__importDefault(require("lodash/fp/head"));
-const addEventListener_1 = tslib_1.__importDefault(require("../../utils/addEventListener"));
-const ownerDocument_1 = tslib_1.__importDefault(require("../../utils/ownerDocument"));
-const logPropError_1 = tslib_1.__importDefault(require("../../utils/logPropError"));
-const errorProps = [
-    {
-        prop: 'disableFullscreen',
-        replacement: 'enableFullscreenToggle',
+const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
+const toNumber_1 = tslib_1.__importDefault(require("lodash/fp/toNumber"));
+const SidebarFooter_1 = tslib_1.__importDefault(require("./SidebarFooter"));
+const SidebarBackdrop_1 = tslib_1.__importDefault(require("./SidebarBackdrop"));
+const SidebarFullscreenToggle_1 = tslib_1.__importDefault(require("./SidebarFullscreenToggle"));
+const SidebarCloseButton_1 = tslib_1.__importDefault(require("./SidebarCloseButton"));
+const Resizer_1 = tslib_1.__importDefault(require("../resizer/Resizer"));
+const useWindowResize_1 = tslib_1.__importDefault(require("../../hooks/useWindowResize"));
+const useEsc_1 = tslib_1.__importDefault(require("../../hooks/useEsc"));
+const getWidthInBoundaries_1 = tslib_1.__importDefault(require("../../utils/getWidthInBoundaries"));
+const SmoothScrollbars_1 = tslib_1.__importDefault(require("../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,
+        };
     },
-    {
-        prop: 'fullscreen',
-        replacement: 'openInFullscreen',
+    sidebarVisible: ({ fromRight, closed }) => {
+        return {
+            x: !closed ? 0 : fromRight ? '100%' : '-100%',
+            opacity: closed ? 0 : 1,
+            display: closed ? 'none' : 'block',
+        };
     },
-];
-const renderFooter = (footer, footerClassName) => {
-    const footerClassNames = (0, classnames_1.default)('SidebarFooter', footerClassName && footerClassName);
-    return (0, jsx_runtime_1.jsx)("div", Object.assign({ className: footerClassNames }, { children: footer }));
-};
-const RESIZE_THROTTLE = 500;
-const getSidebarBodyByRef = sidebarRef => (0, head_1.default)(sidebarRef.getElementsByClassName('SidebarBody'));
-class Sidebar extends react_1.Component {
-    constructor(props) {
-        super(props);
-        const { width, fly, openInFullscreen } = this.props;
-        this.state = {
-            width,
-            sidebarMode: fly ? Sidebar.MODE_FLY : Sidebar.MODE_FLUID,
-            isFullscreen: openInFullscreen,
+    sidebarExit: ({ fromRight }) => {
+        return {
+            x: fromRight ? '100%' : '-100%',
+            opacity: 0,
         };
-        this.handleResizeStart = this.handleResizeStart.bind(this);
-        this.handleResize = this.handleResize.bind(this);
-        this.handleResizeEnd = this.handleResizeEnd.bind(this);
-        this.handleFullscreenChange = this.handleFullscreenChange.bind(this);
-        this.handleEscFullscreen = this.handleEscFullscreen.bind(this);
-        this.onWindowResize = (0, throttle_1.default)(RESIZE_THROTTLE, this.onWindowResize.bind(this));
-    }
-    componentDidMount() {
-        const { resizable, width, switchModeBreakpoint } = this.props;
-        this.setState({
-            width: resizable ? parseInt(width, 10) : width,
-        });
-        if (switchModeBreakpoint > 0) {
-            this.resizeListener = (0, addEventListener_1.default)(window, 'resize', this.onWindowResize);
-            // Initially check breakpoint after mounting the component
-            this.adaptSidebarMode();
-        }
-        const doc = (0, ownerDocument_1.default)(this);
-        this.onDocumentKeydownListener = (0, addEventListener_1.default)(doc, 'keydown', this.handleEscFullscreen);
-    }
-    componentWillUnmount() {
-        if (this.resizeListener) {
-            this.resizeListener.remove();
-        }
-        if (this.onDocumentKeydownListener) {
-            this.onDocumentKeydownListener.remove();
+    },
+};
+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_1.default, onResizeEnd = noop_1.default, onFullScreenChange = noop_1.default, onBackdropClick = noop_1.default, disableEsc = false, titleClassName = '', bodyClassName = '', headerClassName = '', footerClassName = '', backdropClassName = '', className = '', children } = props, remainingProps = tslib_1.__rest(props, ["fly", "closed", "title", "footer", "resizable", "position", "width", "minWidth", "maxWidth", "hasBackdrop", "hasSmoothScrollbar", "makeBackdropVisible", "enableFullscreenToggle", "fullscreenToggleTooltip", "openInFullscreen", "showHeaderBorder", "disableClose", "bodyRef", "headerButtons", "switchModeBreakpoint", "onClose", "onResizeEnd", "onFullScreenChange", "onBackdropClick", "disableEsc", "titleClassName", "bodyClassName", "headerClassName", "footerClassName", "backdropClassName", "className", "children"]);
+    const [internalWidth, setInternalWidth] = (0, react_1.useState)((0, toNumber_1.default)(width));
+    const [sidebarMode, setSidebarMode] = (0, react_1.useState)(fly ? Sidebar.MODE_FLY : Sidebar.MODE_FLUID);
+    const [isFullscreen, setIsFullscreen] = (0, react_1.useState)(openInFullscreen);
+    const [isResize, setIsResize] = (0, react_1.useState)(false);
+    const [isSplit, setIsSplit] = (0, react_1.useState)(false);
+    const [isRight, setIsRight] = (0, react_1.useState)(position === SidebarPosition.RIGHT);
+    const sidebarRef = (0, react_1.useRef)(null);
+    // Used to keep the external reference to the module-content to avoid querying the DOM
+    // periodically on window resize
+    const moduleContentRef = (0, react_1.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.
+    (0, react_1.useEffect)(() => {
+        if (sidebarRef.current && sidebarMode === Sidebar.MODE_FLY) {
+            const sidebarLayout = sidebarRef.current.parentNode;
+            if (sidebarLayout === null || sidebarLayout === void 0 ? void 0 : 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] = (0, react_1.useState)(closed);
+    if (previousClosed !== closed) {
+        setPreviousClosed(closed);
     }
-    onWindowResize() {
-        this.adaptSidebarMode();
+    // Update internal width from outside
+    const [previousWidth, setPreviousWidth] = (0, react_1.useState)(width);
+    if (previousWidth !== width) {
+        console.log('update internal width');
+        setInternalWidth((0, toNumber_1.default)(width));
+        setPreviousWidth(width);
     }
-    adaptSidebarMode() {
-        if (window.innerWidth <= this.props.switchModeBreakpoint) {
-            this.setState({
-                sidebarMode: Sidebar.MODE_FLY,
-            });
+    // Switch between mode "fly" and "fluid"
+    (0, useWindowResize_1.default)(() => adaptSidebarMode(), RESIZE_THROTTLE);
+    // Initially check breakpoint after mounting the component
+    (0, react_1.useEffect)(() => adaptSidebarMode(), []);
+    // When Sidebar opens, check for available module-content width and
+    // switch sidebar mode to fly in case
+    (0, react_1.useEffect)(() => {
+        if (!closed) {
+            setTimeout(() => adaptSidebarMode());
         }
-        else {
-            this.setState({
-                sidebarMode: Sidebar.MODE_FLUID,
-            });
+    }, [closed]);
+    (0, react_1.useEffect)(() => {
+        const moduleContent = document.querySelector('.module-content');
+        if (moduleContent) {
+            moduleContentRef.current = moduleContent;
         }
-    }
-    getWidthInBoundaries(minWidth, maxWidth, width) {
-        if (width > 0 && width < minWidth) {
-            return minWidth;
+    }, []);
+    // Close the fullscreen with "esc"
+    (0, useEsc_1.default)(() => {
+        if (!disableEsc && enableFullscreenToggle && isFullscreen) {
+            setIsFullscreen(false);
+            onFullScreenChange(false);
         }
-        if (width > 0 && width > maxWidth) {
-            return maxWidth;
+    });
+    const adaptSidebarMode = () => {
+        var _a;
+        const moduleContentWidth = (_a = moduleContentRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
+        if (fly || switchModeBreakpoint === DEFAULT_SWITCH_MODE_BREAKPOINT) {
+            return;
         }
-        if (width > 0 && width > maxWidth) {
-            return maxWidth;
+        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;
         }
-        return width;
-    }
-    handleResize(diff) {
-        const { maxWidth, minWidth, position } = this.props;
-        const { width, isSplit: wasSplit } = this.state;
+        // 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;
-        const updatedWidth = position === Sidebar.RIGHT ? width + diff : width - diff;
-        const newWidth = this.getWidthInBoundaries(minWidth, usedMaxWidth, updatedWidth);
-        const isSplit = newWidth === halfWindowWidth;
-        // Check for sidebar with if it is half window size. If it was before but the sidebar was resized so it is
-        // no longer walf window size, set the sidebar with to hals window size to avoid jumping sidebar to old width
-        this.setState({
-            isSplit,
-            width: wasSplit && !isSplit ? halfWindowWidth : newWidth,
+        // 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 = (0, getWidthInBoundaries_1.default)(minWidth, usedMaxWidth, updatedWidth);
+            const newIsSplit = newWidth === halfWindowWidth;
+            setIsSplit(newIsSplit);
+            return wasSplit && !isSplit ? halfWindowWidth : newWidth;
         });
-    }
-    handleResizeStart() {
-        const body = getSidebarBodyByRef(this.sidebarRef);
-        if (body) {
-            body.classList.add('pointer-events-none');
-        }
-        this.setState({ isResize: true });
-    }
-    handleResizeEnd() {
-        const body = getSidebarBodyByRef(this.sidebarRef);
-        if (body) {
-            body.classList.remove('pointer-events-none');
-        }
-        this.setState({ isResize: false });
-        this.props.onResizeEnd();
-    }
-    handleFullscreenChange() {
-        const { onFullScreenChange } = this.props;
-        const { isFullscreen } = this.state;
+        adaptSidebarMode();
+    };
+    const handleResizeStart = () => {
+        const body = document.body;
+        body === null || body === void 0 ? void 0 : body.classList.add('pointer-events-none');
+        setIsResize(true);
+    };
+    const handleResizeEnd = () => {
+        const body = document.body;
+        body === null || body === void 0 ? void 0 : body.classList.remove('pointer-events-none');
+        setIsResize(false);
+        onResizeEnd();
+    };
+    const handleFullscreenChange = () => {
         const newFullscreenState = !isFullscreen;
-        this.setState({ isFullscreen: newFullscreenState });
+        setIsFullscreen(newFullscreenState);
         onFullScreenChange(newFullscreenState);
-    }
-    handleEscFullscreen(event) {
-        const { disableEsc, enableFullscreenToggle, onFullScreenChange } = this.props;
-        const { isFullscreen } = this.state;
-        if (!disableEsc && enableFullscreenToggle && isFullscreen && event.keyCode === 27) {
-            this.setState({ isFullscreen: false });
-            onFullScreenChange(false);
-        }
-    }
-    handlePrevContent() { }
-    handleNextContent() { }
-    render() {
-        const { className, closed, title, headerClassName, showHeaderBorder, titleClassName, bodyClassName, footer, footerClassName, onClose, children, resizable, position, maxWidth, useBackdrop, makeBackdropVisible, onBackdropClick, backdropClassName, enableFullscreenToggle, enableNavigationButtons, disableClose, bodyRef, headerButtons, } = this.props;
-        const { width, isFullscreen, isSplit, isResize } = this.state;
-        (0, logPropError_1.default)(errorProps, this.props, 'Sidebar');
-        const classes = (0, classnames_1.default)('Sidebar', className, closed && 'closed', isFullscreen && 'width-100vw sidebar-fullscreen', isSplit && !isFullscreen && 'max-width-50vw width-50vw', this.state.sidebarMode === Sidebar.MODE_FLY ? 'fly' : isFullscreen ? 'fly' : 'fluid');
-        const headerClassNames = (0, classnames_1.default)('SidebarHeader', headerClassName && headerClassName, showHeaderBorder && 'show-border');
-        const titleClassNames = (0, classnames_1.default)('SidebarTitle', titleClassName && titleClassName);
-        const bodyClassNames = (0, classnames_1.default)('SidebarBody', bodyClassName && bodyClassName);
-        const backdropClassNames = (0, classnames_1.default)('SidebarBackdrop', makeBackdropVisible && 'sidebar-backdrop-bg', backdropClassName && backdropClassName);
-        const fullscreenIconClasses = (0, classnames_1.default)('rioglyph', isFullscreen ? 'rioglyph-resize-small' : 'rioglyph-resize-full');
-        const resizeLimitClasses = (0, classnames_1.default)('SidebarResizeLimit', isResize && 'display-block');
-        const isRight = position === Sidebar.RIGHT;
-        const resizeIndicatorPosition = maxWidth || window.innerWidth * 0.5;
-        const resizeLimitStyle = isRight ? { right: resizeIndicatorPosition } : { left: resizeIndicatorPosition };
-        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: classes, style: { width: width }, ref: node => (this.sidebarRef = node) }, { children: [(0, jsx_runtime_1.jsx)("div", { className: resizeLimitClasses, style: resizeLimitStyle }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'SidebarContent' }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: headerClassNames }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: titleClassNames }, { children: title ? title : '' })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'SidebarButtons non-printable close' }, { children: [headerButtons, enableNavigationButtons && ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", Object.assign({ className: 'btn btn-muted btn-icon-only', onClick: this.handlePrevContent }, { children: (0, jsx_runtime_1.jsx)("span", { className: ' rioglyph rioglyph-chevron-left' }) })), (0, jsx_runtime_1.jsx)("button", Object.assign({ className: 'btn btn-muted btn-icon-only', onClick: this.handleNextContent }, { children: (0, jsx_runtime_1.jsx)("span", { className: ' rioglyph rioglyph-chevron-right' }) }))] })), enableFullscreenToggle && ((0, jsx_runtime_1.jsx)("button", Object.assign({ className: 'btn btn-muted btn-icon-only', onClick: this.handleFullscreenChange }, { children: (0, jsx_runtime_1.jsx)("span", { className: fullscreenIconClasses }) }))), !disableClose && (headerButtons || enableNavigationButtons || enableFullscreenToggle) && ((0, jsx_runtime_1.jsx)("div", { className: 'SidebarButtons-spacer' })), !disableClose && ((0, jsx_runtime_1.jsx)("button", Object.assign({ className: 'btn btn-muted btn-icon-only', onClick: onClose }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-remove' }) })))] }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: bodyClassNames, ref: bodyRef }, { children: children })), footer && renderFooter(footer, footerClassName)] })), resizable && ((0, jsx_runtime_1.jsx)(Resizer_1.default, { onResizeStart: this.handleResizeStart, onResize: this.handleResize, onResizeEnd: this.handleResizeEnd, direction: Resizer_1.default.HORIZONTAL, position: isRight ? Resizer_1.default.LEFT : Resizer_1.default.RIGHT })), useBackdrop && !closed && (0, jsx_runtime_1.jsx)("div", { className: backdropClassNames, onClick: onBackdropClick })] })));
-    }
-}
-Sidebar.LEFT = 'left';
-Sidebar.RIGHT = 'right';
-Sidebar.MODE_FLY = 'fly';
-Sidebar.MODE_FLUID = 'fluid';
-Sidebar.defaultProps = {
-    closed: false,
-    width: 350,
-    minWidth: 100,
-    maxWidth: 0,
-    resizable: false,
-    onResizeEnd: () => { },
-    disableEsc: false,
-    enableFullscreenToggle: false,
-    enableNavigationButtons: false,
-    disableClose: false,
-    position: Sidebar.LEFT,
-    fly: false,
-    switchModeBreakpoint: 0,
-    onClose: () => { },
-    useBackdrop: false,
-    openInfullscreen: false,
-    onFullScreenChange: () => { },
-    makeBackdropVisible: false,
-    onBackdropClick: () => { },
-    backdropClassName: '',
-};
-Sidebar.propTypes = {
-    closed: prop_types_1.default.bool,
-    fly: prop_types_1.default.bool,
-    switchModeBreakpoint: prop_types_1.default.number,
-    resizable: prop_types_1.default.bool,
-    onResizeEnd: prop_types_1.default.func,
-    disableEsc: prop_types_1.default.bool,
-    position: prop_types_1.default.oneOf([Sidebar.LEFT, Sidebar.RIGHT]),
-    // When sidebar is resizable it will take the provided with in px only
-    width: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.number]),
-    minWidth: prop_types_1.default.number,
-    maxWidth: prop_types_1.default.number,
-    className: prop_types_1.default.string,
-    headerClassName: prop_types_1.default.string,
-    titleClassName: prop_types_1.default.string,
-    bodyClassName: prop_types_1.default.string,
-    footerClassName: prop_types_1.default.string,
-    title: prop_types_1.default.oneOfType([prop_types_1.default.node, prop_types_1.default.string]),
-    onClose: prop_types_1.default.func,
-    disableClose: prop_types_1.default.bool,
-    footer: prop_types_1.default.oneOfType([prop_types_1.default.node, prop_types_1.default.string]),
-    fullscreen: prop_types_1.default.bool,
-    openInFullscreen: prop_types_1.default.bool,
-    onFullScreenChange: prop_types_1.default.func,
-    disableFullscreen: prop_types_1.default.bool,
-    enableFullscreenToggle: prop_types_1.default.bool,
-    enableNavigationButtons: prop_types_1.default.bool,
-    useBackdrop: prop_types_1.default.bool,
-    makeBackdropVisible: prop_types_1.default.bool,
-    onBackdropClick: prop_types_1.default.func,
-    backdropClassName: prop_types_1.default.string,
-    bodyRef: prop_types_1.default.object,
-    headerButtons: prop_types_1.default.node,
+    };
+    const wrapperClasses = (0, classnames_1.default)('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 = (0, classnames_1.default)('SidebarHeader', headerClassName, showHeaderBorder && 'show-border');
+    const titleClassNames = (0, classnames_1.default)('SidebarTitle', titleClassName);
+    const bodyClassNames = (0, classnames_1.default)('SidebarBody', bodyClassName);
+    const resizeLimitClasses = (0, classnames_1.default)('SidebarResizeLimit', isResize && 'display-block');
+    const resizeIndicatorPosition = maxWidth || window.innerWidth * 0.5;
+    const resizeLimitStyle = isRight ? { right: resizeIndicatorPosition } : { left: resizeIndicatorPosition };
+    const sidebarContent = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: resizeLimitClasses, style: resizeLimitStyle }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'SidebarContent' }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: headerClassNames }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: titleClassNames }, { children: title })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'SidebarButtons non-printable close' }, { children: [headerButtons, enableFullscreenToggle && ((0, jsx_runtime_1.jsx)(SidebarFullscreenToggle_1.default, { isFullscreen: isFullscreen, onClick: handleFullscreenChange, tooltip: fullscreenToggleTooltip })), !disableClose && (headerButtons || enableFullscreenToggle) && ((0, jsx_runtime_1.jsx)("div", { className: 'SidebarButtons-spacer' })), !disableClose && (0, jsx_runtime_1.jsx)(SidebarCloseButton_1.default, { onClick: onClose })] }))] })), hasSmoothScrollbar ? ((0, jsx_runtime_1.jsx)(SmoothScrollbars_1.default, Object.assign({ slideIn: true, className: bodyClassNames, ref: bodyRef }, { children: children }))) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: bodyClassNames, ref: bodyRef }, { children: children }))), (0, jsx_runtime_1.jsx)(SidebarFooter_1.default, { footer: footer, className: footerClassName })] })), resizable && ((0, jsx_runtime_1.jsx)(Resizer_1.default, { onResizeStart: handleResizeStart, onResize: handleResize, onResizeEnd: handleResizeEnd, direction: Resizer_1.default.HORIZONTAL, position: isRight ? Resizer_1.default.LEFT : Resizer_1.default.RIGHT }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, Object.assign({ initial: true, exitBeforeEnter: true }, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, Object.assign({}, 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 && ((0, jsx_runtime_1.jsx)(SidebarBackdrop_1.default, { 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;
 exports.default = Sidebar;

package/lib/es/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/lib/es/components/sidebars/SidebarBackdrop.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");
+require("react");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
+const SidebarBackdrop = ({ onClick = noop_1.default, makeBackdropVisible = false, className = '' }) => {
+    const backdropClassNames = (0, classnames_1.default)('SidebarBackdrop', makeBackdropVisible && 'sidebar-backdrop-bg', className);
+    return (0, jsx_runtime_1.jsx)("div", { className: backdropClassNames, onClick: onClick, "data-testid": 'sidebarBackdrop' });
+};
+exports.default = SidebarBackdrop;

package/lib/es/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/lib/es/components/sidebars/SidebarCloseButton.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("react");
+const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
+const Button_1 = tslib_1.__importDefault(require("../button/Button"));
+const SidebarCloseButton = ({ onClick = noop_1.default }) => {
+    return ((0, jsx_runtime_1.jsx)(Button_1.default, Object.assign({ bsStyle: Button_1.default.MUTED, iconOnly: true, onClick: onClick, "data-testid": 'sidebarCloseButton' }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-remove' }) })));
+};
+exports.default = SidebarCloseButton;

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

package/lib/es/components/sidebars/SidebarFooter.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const SidebarFooter = ({ footer, className = '' }) => {
+    if (!footer) {
+        return null;
+    }
+    const footerClassNames = (0, classnames_1.default)('SidebarFooter', className);
+    return (0, jsx_runtime_1.jsx)("div", Object.assign({ className: footerClassNames }, { children: footer }));
+};
+exports.default = SidebarFooter;

package/lib/es/components/sidebars/SidebarFullscreenToggle.d.ts

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

package/lib/es/components/sidebars/SidebarFullscreenToggle.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("react");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
+const Button_1 = tslib_1.__importDefault(require("../button/Button"));
+const SimpleTooltip_1 = tslib_1.__importDefault(require("../tooltip/SimpleTooltip"));
+const SidebarFullscreenToggle = ({ isFullscreen, tooltip, onClick = noop_1.default }) => {
+    const fullscreenIconClasses = (0, classnames_1.default)('rioglyph', isFullscreen ? 'rioglyph-resize-small' : 'rioglyph-resize-full');
+    const button = ((0, jsx_runtime_1.jsx)(Button_1.default, Object.assign({ bsStyle: Button_1.default.MUTED, iconOnly: true, onClick: onClick, "data-testid": 'sidebarFullscreenToggle' }, { children: (0, jsx_runtime_1.jsx)("span", { className: fullscreenIconClasses }) })));
+    if (tooltip) {
+        return ((0, jsx_runtime_1.jsx)(SimpleTooltip_1.default, Object.assign({ content: tooltip, placement: 'bottom' }, { children: button })));
+    }
+    return button;
+};
+exports.default = SidebarFullscreenToggle;

package/lib/es/components/slider/RangeSlider.d.ts

@@ -1,33 +1,53 @@
+import React, { type HTMLAttributes } from 'react';
+export type RangeSliderProps = {
+    /**
+     * The current left value of the selected range.
+     */
+    leftValue?: number;
+    /**
+     * The current right value of the selected range.
+     */
+    rightValue?: number;
+    /**
+     * The lower limit.
+     *
+     * @default 0
+     */
+    minValue: number;
+    /**
+     * The upper limit.
+     *
+     * @default Number.MAX_VALUE
+     */
+    maxValue: number;
+    /**
+     * Whether to show the value labels.
+     *
+     * @default false
+     */
+    valueLabels?: boolean;
+    /**
+     * Additional unit used for the slider value labels.
+     */
+    valueLabelUnit?: string | React.ReactNode;
+    /**
+     * Selector step value.
+     *
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Disables all pointer events.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    onChange?: (newLeftValue: number, newRightValue: number) => void;
+    onDragEnd?: (newLeftValue: number, newRightValue: number) => void;
+    /**
+     * Additional classes to be set on the wrapper element.
+     */
+    className?: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'disabled' | 'onChange' | 'onDragEnd' | 'className'>;
+declare const RangeSlider: (props: RangeSliderProps) => import("react/jsx-runtime").JSX.Element;
 export default RangeSlider;
-declare function RangeSlider(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace RangeSlider {
-    namespace defaultProps {
-        const step: number;
-        const minValue: number;
-        const maxValue: number;
-        const valueLabels: boolean;
-        const disabled: boolean;
-        function onChange(): void;
-        function onDragEnd(): void;
-    }
-    namespace propTypes {
-        export const leftValue: PropTypes.Requireable<number>;
-        export const rightValue: PropTypes.Requireable<number>;
-        const minValue_1: PropTypes.Validator<number>;
-        export { minValue_1 as minValue };
-        const maxValue_1: PropTypes.Validator<number>;
-        export { maxValue_1 as maxValue };
-        const valueLabels_1: PropTypes.Requireable<boolean>;
-        export { valueLabels_1 as valueLabels };
-        const step_1: PropTypes.Requireable<number>;
-        export { step_1 as step };
-        const onChange_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onChange_1 as onChange };
-        const onDragEnd_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onDragEnd_1 as onDragEnd };
-        export const className: PropTypes.Requireable<string>;
-        const disabled_1: PropTypes.Requireable<boolean>;
-        export { disabled_1 as disabled };
-    }
-}
-import PropTypes from "prop-types";