@rio-cloud/rio-uikit 1.12.0 → 1.13.1

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

@@ -1,186 +0,0 @@
-"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 framer_motion_1 = require("framer-motion");
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-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,
-        };
-    },
-    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_1.default, onResizeEnd = noop_1.default, onFullScreenChange = noop_1.default, onBackdropClick = noop_1.default, disableEsc = false, titleClassName = '', bodyClassName = '', headerClassName = '', footerClassName = '', backdropClassName = '', className = '', children, ...remainingProps } = props;
-    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?.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);
-    }
-    // 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);
-    }
-    // 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());
-        }
-    }, [closed]);
-    (0, react_1.useEffect)(() => {
-        const moduleContent = document.querySelector('.module-content');
-        if (moduleContent) {
-            moduleContentRef.current = moduleContent;
-        }
-    }, []);
-    // Close the fullscreen with "esc"
-    (0, useEsc_1.default)(() => {
-        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 = (0, getWidthInBoundaries_1.default)(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 = (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", { className: 'SidebarContent', children: [(0, jsx_runtime_1.jsxs)("div", { className: headerClassNames, children: [(0, jsx_runtime_1.jsx)("div", { className: titleClassNames, children: title }), (0, jsx_runtime_1.jsxs)("div", { 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, { slideIn: true, className: bodyClassNames, ref: bodyRef, children: children })) : ((0, jsx_runtime_1.jsx)("div", { 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, { initial: true, exitBeforeEnter: true, children: (0, jsx_runtime_1.jsx)(framer_motion_1.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 && ((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/src/components/sidebars/SidebarBackdrop.d.ts

@@ -1,7 +0,0 @@
-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/src/components/sidebars/SidebarBackdrop.js

@@ -1,11 +0,0 @@
-"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 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/src/components/sidebars/SidebarCloseButton.d.ts

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

package/lib/es/src/components/sidebars/SidebarCloseButton.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-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, { 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/src/components/sidebars/SidebarFooter.d.ts

@@ -1,7 +0,0 @@
-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/src/components/sidebars/SidebarFooter.js

@@ -1,13 +0,0 @@
-"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 SidebarFooter = ({ footer, className = '' }) => {
-    if (!footer) {
-        return null;
-    }
-    const footerClassNames = (0, classnames_1.default)('SidebarFooter', className);
-    return (0, jsx_runtime_1.jsx)("div", { className: footerClassNames, children: footer });
-};
-exports.default = SidebarFooter;

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

@@ -1,7 +0,0 @@
-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/src/components/sidebars/SidebarFullscreenToggle.js

@@ -1,17 +0,0 @@
-"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 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, { 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, { content: tooltip, placement: 'bottom', children: button }));
-    }
-    return button;
-};
-exports.default = SidebarFullscreenToggle;

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

@@ -1,60 +0,0 @@
-import React, { type HTMLAttributes } from 'react';
-import { type CurrentColor } from '../../utils/currentColors';
-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;
-    /**
-     * Defines the color of the slider.
-     *
-     * @default 'primary'
-     */
-    color?: CurrentColor;
-    /**
-     * 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;

package/lib/es/src/components/slider/RangeSlider.js

@@ -1,111 +0,0 @@
-"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 noop_1 = tslib_1.__importDefault(require("lodash/noop"));
-const currentColors_1 = require("../../utils/currentColors");
-const getRangeValues = (valueLeft, valueRight) => {
-    const finalLeftValue = valueRight <= valueLeft ? valueRight : valueLeft;
-    const finalRightValue = valueLeft >= valueRight ? valueLeft : valueRight;
-    return [finalLeftValue, finalRightValue];
-};
-const RangeSlider = (props) => {
-    const { minValue = 0, maxValue = Number.MAX_VALUE, valueLabels = false, valueLabelUnit, step = 1, color = 'primary', leftValue, rightValue, className, disabled = false, onChange = noop_1.default, onDragEnd = noop_1.default, ...remainingProps } = props;
-    const [activeLeft, setActiveLeft] = (0, react_1.useState)(false);
-    const [activeRight, setActiveRight] = (0, react_1.useState)(false);
-    const [valueLeft, setValueLeft] = (0, react_1.useState)(leftValue ? leftValue : minValue);
-    const [valueRight, setValueRight] = (0, react_1.useState)(rightValue ? rightValue : maxValue);
-    const [isChangingLeft, setIsChangingLeft] = (0, react_1.useState)(false);
-    const [isChangingRight, setIsChangingRight] = (0, react_1.useState)(false);
-    (0, react_1.useEffect)(() => {
-        if (valueLeft >= minValue && valueLeft <= maxValue && valueRight >= minValue && valueRight <= maxValue) {
-            setValueLeft(valueLeft);
-            setValueRight(valueRight);
-        }
-    }, [valueLeft, valueRight, minValue, maxValue]);
-    const changeValues = (newValues) => {
-        const newValueLeft = newValues.valueLeft ? newValues.valueLeft : valueLeft;
-        const newValueRight = newValues.valueRight ? newValues.valueRight : valueRight;
-        setValueLeft(newValueLeft);
-        setValueRight(newValueRight);
-        setIsChangingLeft(!!newValues.valueLeft);
-        setIsChangingRight(!!newValues.valueRight);
-        const [newLeftValue, newRightValue] = getRangeValues(newValueLeft, newValueRight);
-        onChange(newLeftValue, newRightValue);
-    };
-    const handleChangeValueLeft = (event) => {
-        changeValues({ valueLeft: Number.parseInt(event.target.value, 10) });
-    };
-    const handleChangeValueRight = (event) => {
-        changeValues({ valueRight: Number.parseInt(event.target.value, 10) });
-    };
-    const onMouseDownLeft = () => {
-        setIsChangingLeft(true);
-        setIsChangingRight(false);
-    };
-    const onMouseDownRight = () => {
-        setIsChangingLeft(false);
-        setIsChangingRight(true);
-    };
-    const getTrackMiddlePosition = (targetWidth) => {
-        const trackValueLeftRelative = (valueLeft - minValue) / (maxValue - minValue);
-        const trackValueRightRelative = (valueRight - minValue) / (maxValue - minValue);
-        const trackMiddleRelative = (trackValueLeftRelative + trackValueRightRelative) / 2;
-        return trackMiddleRelative * targetWidth;
-    };
-    const onMouseMoveLeft = (event) => {
-        const target = event.target;
-        if (!isChangingLeft) {
-            const clientRect = target.getBoundingClientRect();
-            const mouseHover = event.clientX - clientRect.left;
-            const targetWidth = target.offsetWidth;
-            const trackMiddlePosition = getTrackMiddlePosition(targetWidth);
-            if (valueRight > valueLeft && mouseHover > trackMiddlePosition) {
-                setActiveLeft(false);
-                setActiveRight(true);
-            }
-            if (valueRight < valueLeft && mouseHover < trackMiddlePosition) {
-                setActiveLeft(false);
-                setActiveRight(true);
-            }
-        }
-    };
-    const onMouseMoveRight = (event) => {
-        const target = event.target;
-        if (!isChangingRight) {
-            const clientRect = target.getBoundingClientRect();
-            const mouseHover = event.clientX - clientRect.left;
-            const targetWidth = target.offsetWidth;
-            const trackMiddlePosition = getTrackMiddlePosition(targetWidth);
-            if (valueRight > valueLeft && mouseHover < trackMiddlePosition) {
-                setActiveLeft(true);
-                setActiveRight(false);
-            }
-            if (valueRight < valueLeft && mouseHover > trackMiddlePosition) {
-                setActiveLeft(true);
-                setActiveRight(false);
-            }
-        }
-    };
-    const onMouseUpLeft = () => {
-        setIsChangingLeft(false);
-        setIsChangingRight(false);
-        const [newLeftValue, newRightValue] = getRangeValues(valueLeft, valueRight);
-        onDragEnd(newLeftValue, newRightValue);
-    };
-    const onMouseUpRight = () => {
-        setIsChangingLeft(false);
-        setIsChangingRight(false);
-        const [newLeftValue, newRightValue] = getRangeValues(valueLeft, valueRight);
-        onDragEnd(newLeftValue, newRightValue);
-    };
-    const [finalLeftValue, finalRightValue] = getRangeValues(valueLeft, valueRight);
-    const trackWidth = (100 * (finalRightValue - finalLeftValue)) / (maxValue - minValue);
-    const trackLeft = (100 * (finalLeftValue - minValue)) / (maxValue - minValue);
-    const wrapperClassNames = (0, classnames_1.default)('range-slider', disabled && 'disabled', valueLabels && 'show-value-labels', className && className);
-    const sliderBackgroundColor = (0, currentColors_1.getCurrentBackgroundColor)(color);
-    return ((0, jsx_runtime_1.jsxs)("div", { ...remainingProps, className: wrapperClassNames, style: { color: sliderBackgroundColor }, children: [(0, jsx_runtime_1.jsx)("div", { className: 'range-whole-track' }), (0, jsx_runtime_1.jsx)("div", { className: 'range-track', style: { width: `${trackWidth}%`, left: `${trackLeft}%` }, children: valueLabels && ((0, jsx_runtime_1.jsxs)("div", { className: 'user-select-none', children: [(0, jsx_runtime_1.jsx)("div", { className: 'range-value', children: (0, jsx_runtime_1.jsx)("span", { children: valueLabelUnit ? `${finalLeftValue} ${valueLabelUnit}` : finalLeftValue }) }), (0, jsx_runtime_1.jsx)("div", { className: 'range-value', children: (0, jsx_runtime_1.jsx)("span", { children: valueLabelUnit ? `${finalRightValue} ${valueLabelUnit}` : finalRightValue }) })] })) }), (0, jsx_runtime_1.jsx)("input", { className: `${isChangingLeft ? 'changing' : ''}`, style: { zIndex: activeLeft ? '6' : '5' }, value: valueLeft, min: minValue, max: maxValue, step: step, type: 'range', onChange: handleChangeValueLeft, onMouseDown: onMouseDownLeft, onMouseMove: onMouseMoveLeft, onMouseUp: onMouseUpLeft }), (0, jsx_runtime_1.jsx)("input", { className: `${isChangingRight ? 'changing' : ''}`, style: { zIndex: activeRight ? '6' : '5' }, value: valueRight, min: minValue, max: maxValue, step: step, type: 'range', onChange: handleChangeValueRight, onMouseDown: onMouseDownRight, onMouseMove: onMouseMoveRight, onMouseUp: onMouseUpRight })] }));
-};
-exports.default = RangeSlider;

package/lib/es/src/components/slider/Slider.d.ts

@@ -1,76 +0,0 @@
-import React, { type HTMLAttributes } from 'react';
-import { type CurrentColor } from '../../utils/currentColors';
-export type SliderProps = {
-    /**
-     * The current value.
-     *
-     * @default 0
-     */
-    value?: 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 label.
-     */
-    valueLabelUnit?: string | React.ReactNode;
-    /**
-     * Whether to hide the dark-colored value bar.
-     *
-     * @default false
-     */
-    hideValueBar?: boolean;
-    /**
-     * Whether to show larger value labels instead of the normal ones.
-     *
-     * @default false
-     */
-    largeValueLabels?: boolean;
-    /**
-     * Selector step value.
-     *
-     * @default 1
-     */
-    step?: number;
-    /**
-     * Defines the color of the slider.
-     *
-     * @default 'primary'
-     */
-    color?: CurrentColor;
-    /**
-     * Disables all pointer events.
-     *
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Callback to get the new value every time it changes.
-     */
-    onChange?: (newValue: number) => void;
-    /**
-     * Callback to get the value after the slider ended dragging.
-     */
-    onDragEnd?: (newValue: number) => void;
-    /**
-     * Additional classes to be set on the wrapper element.
-     */
-    className?: string;
-} & Omit<HTMLAttributes<HTMLDivElement>, 'disabled' | 'onChange' | 'onDragEnd' | 'className'>;
-declare const Slider: (props: SliderProps) => import("react/jsx-runtime").JSX.Element;
-export default Slider;

package/lib/es/src/components/slider/Slider.js

@@ -1,36 +0,0 @@
-"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 noop_1 = tslib_1.__importDefault(require("lodash/noop"));
-const currentColors_1 = require("../../utils/currentColors");
-const Slider = (props) => {
-    const { value = 0, minValue = 0, maxValue = Number.MAX_VALUE, valueLabels = false, valueLabelUnit, largeValueLabels = false, hideValueBar = false, color = 'primary', step = 1, onChange = noop_1.default, onDragEnd = noop_1.default, className, disabled = false, ...remainingProps } = props;
-    const [currentValue, setCurrentValue] = (0, react_1.useState)(value ? value : minValue);
-    const [isChanging, setIsChanging] = (0, react_1.useState)(false);
-    (0, react_1.useEffect)(() => {
-        if (value >= minValue && value <= maxValue) {
-            setCurrentValue(value);
-        }
-    }, [value, minValue, maxValue]);
-    const handleChange = (event) => {
-        const newValue = Number.parseInt(event.target.value, 10);
-        setCurrentValue(newValue);
-        setIsChanging(true);
-        onChange(newValue);
-    };
-    const onMouseUp = () => {
-        setIsChanging(false);
-        onDragEnd(currentValue);
-    };
-    const onMouseDown = () => {
-        setIsChanging(true);
-    };
-    const wrapperClassNames = (0, classnames_1.default)('range-slider', disabled && 'disabled', valueLabels && 'show-value-labels', hideValueBar && 'hide-value-bar', largeValueLabels && 'large-value-labels', className && className);
-    const trackWidth = (100 * (currentValue - minValue)) / (maxValue - minValue);
-    const sliderBackgroundColor = (0, currentColors_1.getCurrentBackgroundColor)(color);
-    return ((0, jsx_runtime_1.jsxs)("div", { ...remainingProps, className: wrapperClassNames, style: { color: sliderBackgroundColor }, children: [(0, jsx_runtime_1.jsx)("div", { className: 'range-whole-track' }), (0, jsx_runtime_1.jsx)("div", { className: 'range-track', style: { width: `${trackWidth}%` }, children: valueLabels && ((0, jsx_runtime_1.jsx)("div", { className: 'range-value', children: (0, jsx_runtime_1.jsx)("span", { children: valueLabelUnit ? `${currentValue} ${valueLabelUnit}` : currentValue }) })) }), (0, jsx_runtime_1.jsx)("input", { className: `${isChanging ? 'changing' : ''}`, value: currentValue, min: minValue, max: maxValue, step: step, type: 'range', onChange: handleChange, onMouseDown: onMouseDown, onMouseUp: onMouseUp })] }));
-};
-exports.default = Slider;

package/lib/es/src/components/smoothScrollbars/SmoothScrollbars.d.ts

@@ -1,17 +0,0 @@
-import React from 'react';
-export type SmoothScrollbarsProps = {
-    slideIn?: boolean;
-    largeTrack?: boolean;
-    trackOffset?: boolean;
-    className?: string;
-    tagName?: string;
-    autoHeight?: boolean;
-    autoHeightMin?: number;
-    autoHeightMax?: number;
-    onScroll?: (event: React.UIEvent<any> | undefined) => void;
-    style?: React.CSSProperties;
-};
-declare const SmoothScrollbars: React.ForwardRefExoticComponent<SmoothScrollbarsProps & {
-    children?: React.ReactNode | undefined;
-} & React.RefAttributes<any>>;
-export default SmoothScrollbars;

package/lib/es/src/components/smoothScrollbars/SmoothScrollbars.js

@@ -1,54 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
-const react_1 = require("react");
-const react_custom_scrollbars_2_1 = require("react-custom-scrollbars-2");
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
-const debounce_1 = tslib_1.__importDefault(require("lodash/fp/debounce"));
-const RESIZE_THROTTLING = 100;
-const SmoothScrollbars = (0, react_1.forwardRef)((componentProps, ref) => {
-    const { slideIn = false, largeTrack = false, trackOffset = false, className = '', onScroll = noop_1.default, tagName = 'div', autoHeight = false, autoHeightMin = 0, autoHeightMax = 200, children, style, ...remainingProps } = componentProps;
-    const scrollbarsRef = (0, react_1.useRef)(null);
-    const contentRef = (0, react_1.useRef)(null);
-    (0, react_1.useImperativeHandle)(ref, () => scrollbarsRef.current);
-    (0, react_1.useEffect)(() => {
-        if (!contentRef.current || !scrollbarsRef.current) {
-            return;
-        }
-        const updateScrollbars = (0, debounce_1.default)(RESIZE_THROTTLING)(() => {
-            if (scrollbarsRef.current) {
-                // Trigger a update for the scrollbars.
-                // This is needed since the lib does not automatically update on content height changes
-                // See: https://github.com/RobPethick/react-custom-scrollbars-2/issues/12
-                // Use type assertion to tell TypeScript that 'update' exists
-                scrollbarsRef.current.update();
-            }
-        });
-        const resizeObserver = new ResizeObserver(updateScrollbars);
-        resizeObserver.observe(contentRef.current);
-        return () => {
-            resizeObserver.disconnect();
-            updateScrollbars.cancel();
-        };
-    }, []);
-    const wrapperClassNames = (0, classnames_1.default)(className, slideIn && 'scrollbar-fly-in', 'smooth-scrollbar-wrapper');
-    const renderTrackVerticalNames = (0, classnames_1.default)('scrollbar-track-vertical', largeTrack && 'scrollbar-track-size-large', trackOffset && 'scrollbar-track-offset');
-    const renderThumbVerticalNames = (0, classnames_1.default)('scrollbar-thumb-vertical', largeTrack && 'scrollbar-thumb-size-large');
-    const renderTrackHorizontalNames = (0, classnames_1.default)('scrollbar-track-horizontal', largeTrack && 'scrollbar-track-size-large', trackOffset && 'scrollbar-track-offset');
-    const renderThumbHorizontalNames = (0, classnames_1.default)('scrollbar-thumb-horizontal', largeTrack && 'scrollbar-thumb-size-large');
-    return ((0, jsx_runtime_1.jsx)(react_custom_scrollbars_2_1.Scrollbars, { ...remainingProps, ref: scrollbarsRef, tagName: tagName, onScroll: onScroll, className: wrapperClassNames, hideTracksWhenNotNeeded: true, autoHeight: autoHeight, autoHeightMin: autoHeightMin, autoHeightMax: autoHeightMax, renderView: props => {
-            return (0, jsx_runtime_1.jsx)("div", { ...props, className: 'scrollbar-view' });
-        }, renderTrackVertical: props => {
-            return (0, jsx_runtime_1.jsx)("div", { ...props, className: renderTrackVerticalNames });
-        }, renderThumbVertical: props => {
-            return (0, jsx_runtime_1.jsx)("div", { ...props, className: renderThumbVerticalNames });
-        }, renderTrackHorizontal: props => {
-            return (0, jsx_runtime_1.jsx)("div", { ...props, className: renderTrackHorizontalNames });
-        }, renderThumbHorizontal: props => {
-            return (0, jsx_runtime_1.jsx)("div", { ...props, className: renderThumbHorizontalNames });
-        }, children: (0, jsx_runtime_1.jsx)("div", { className: 'scrollbar-content-wrapper', ref: contentRef, children: children }) }));
-});
-exports.default = SmoothScrollbars;