@rio-cloud/rio-uikit 2.1.0 → 2.2.0

package/components/sidebars/Sidebar.js

@@ -1,25 +1,25 @@
-import { jsxs as c, Fragment as Y, jsx as s } from "react/jsx-runtime";
-import { useState as o, useRef as G, useEffect as b } from "react";
-import { AnimatePresence as We, motion as Oe } from "motion/react";
-import m from "classnames";
+import { jsxs as c, Fragment as G, jsx as s } from "react/jsx-runtime";
+import { useState as i, useRef as P, useEffect as b } from "react";
+import { motion as We } from "motion/react";
 import { noop as p } from "es-toolkit/function";
 import { toNumber as V } from "es-toolkit/compat";
-import ge from "./SidebarFooter.js";
-import ve from "./SidebarBackdrop.js";
-import ze from "./SidebarFullscreenToggle.js";
-import He from "./SidebarCloseButton.js";
+import m from "../../utils/classNames.js";
+import Oe from "./SidebarFooter.js";
+import ge from "./SidebarBackdrop.js";
+import ve from "./SidebarFullscreenToggle.js";
+import ze from "./SidebarCloseButton.js";
 import E from "../resizer/Resizer.js";
-import Be from "../../hooks/useWindowResize.js";
-import ke from "../../hooks/useEsc.js";
-import xe from "../../utils/getWidthInBoundaries.js";
-import Ae from "../smoothScrollbars/SmoothScrollbars.js";
-const Ue = 350, Pe = 100, Ye = 800, j = 0, Ge = 400, Ve = 800, je = 0.14, Xe = 500, C = {
+import He from "../../hooks/useWindowResize.js";
+import Be from "../../hooks/useEsc.js";
+import ke from "../../utils/getWidthInBoundaries.js";
+import xe from "../smoothScrollbars/SmoothScrollbars.js";
+const Ue = 350, Ae = 100, Ye = 800, j = 0, Ge = 400, Pe = 800, Ve = 0.14, je = 500, C = {
   LEFT: "left",
   RIGHT: "right"
 }, D = {
   MODE_FLY: "fly",
   MODE_FLUID: "fluid"
-}, Ze = {
+}, Xe = {
   sidebarEnter: ({ fromRight: n }) => ({
     x: n ? "100%" : "-100%",
     opacity: 0
@@ -36,13 +36,13 @@ const Ue = 350, Pe = 100, Ye = 800, j = 0, Ge = 400, Ve = 800, je = 0.14, Xe = 5
 }, t = (n) => {
   const {
     fly: r = !1,
-    closed: i = !1,
+    closed: o = !1,
     title: X = "",
     footer: Z,
     resizable: q = !1,
     position: F,
     width: l = Ue,
-    minWidth: K = Pe,
+    minWidth: K = Ae,
     maxWidth: R = Ye,
     hasBackdrop: J = !1,
     hasSmoothScrollbar: Q = !1,
@@ -51,12 +51,12 @@ const Ue = 350, Pe = 100, Ye = 800, j = 0, Ge = 400, Ve = 800, je = 0.14, Xe = 5
     fullscreenToggleTooltip: ee,
     openInFullscreen: se = !1,
     showHeaderBorder: te = !1,
-    disableClose: w = !1,
-    bodyRef: M,
-    headerButtons: _,
+    disableClose: M = !1,
+    bodyRef: _,
+    headerButtons: w,
     switchModeBreakpoint: y = j,
-    onClose: ie = p,
-    onResizeEnd: oe = p,
+    onClose: oe = p,
+    onResizeEnd: ie = p,
     onFullScreenChange: W = p,
     onBackdropClick: ne = p,
     disableEsc: re = !1,
@@ -68,26 +68,26 @@ const Ue = 350, Pe = 100, Ye = 800, j = 0, Ge = 400, Ve = 800, je = 0.14, Xe = 5
     className: ue = "",
     children: O,
     ...fe
-  } = n, [he, g] = o(V(l)), [S, v] = o(r ? t.MODE_FLY : t.MODE_FLUID), [a, z] = o(se), [be, H] = o(!1), [I, pe] = o(!1), [N, Ee] = o(F === C.RIGHT), u = G(null), B = G(null);
+  } = n, [he, g] = i(V(l)), [S, v] = i(r ? t.MODE_FLY : t.MODE_FLUID), [a, z] = i(se), [be, H] = i(!1), [I, pe] = i(!1), [N, Ee] = i(F === C.RIGHT), u = P(null), B = P(null);
   b(() => {
     u.current && S === t.MODE_FLY && u.current.parentNode?.className.includes("right") && Ee(!0);
   }, [u.current, S]);
-  const [k, Te] = o(i);
-  k !== i && Te(i);
-  const [Se, Ie] = o(l);
-  Se !== l && (console.log("update internal width"), g(V(l)), Ie(l)), Be(() => f(), Xe), b(() => f(), []), b(() => {
-    i || setTimeout(() => f());
-  }, [i]), b(() => {
+  const [k, Te] = i(o);
+  k !== o && Te(o);
+  const [Se, Ie] = i(l);
+  Se !== l && (console.log("update internal width"), g(V(l)), Ie(l)), He(() => f(), je), b(() => f(), []), b(() => {
+    o || setTimeout(() => f());
+  }, [o]), b(() => {
     const e = document.querySelector(".module-content");
     e && (B.current = e);
-  }, []), ke(() => {
+  }, []), Be(() => {
     !re && T && a && (z(!1), W(!1));
   });
   const f = () => {
     const e = B.current?.clientWidth;
     if (r || y === j)
       return;
-    const L = e && e <= Ge, d = e && e > Ve, h = window.innerWidth <= y;
+    const L = e && e <= Ge, d = e && e > Pe, h = window.innerWidth <= y;
     if (L || h) {
       v(t.MODE_FLY);
       return;
@@ -98,45 +98,45 @@ const Ue = 350, Pe = 100, Ye = 800, j = 0, Ge = 400, Ve = 800, je = 0.14, Xe = 5
     }
   }, Ne = (e) => {
     const L = I, d = window.innerWidth * 0.5, h = R || d;
-    g((U) => {
-      const ye = F === t.RIGHT ? U + e : U - e, P = xe(K, h, ye);
-      return pe(P === d), L && !I ? d : P;
+    g((A) => {
+      const ye = F === t.RIGHT ? A + e : A - e, Y = ke(K, h, ye);
+      return pe(Y === d), L && !I ? d : Y;
     }), f();
   }, Le = () => {
     document.body?.classList.add("pointer-events-none"), H(!0);
   }, Ce = () => {
-    document.body?.classList.remove("pointer-events-none"), H(!1), oe();
+    document.body?.classList.remove("pointer-events-none"), H(!1), ie();
   }, De = () => {
     const e = !a;
     z(e), W(e);
   }, Fe = m(
     "Sidebar",
     ue,
-    i && "closed",
+    o && "closed",
     a && "width-100vw sidebar-fullscreen",
     I && !a && "max-width-50vw width-50vw",
     S === D.MODE_FLY || a ? "fly" : "fluid"
-  ), Re = m("SidebarHeader", de, te && "show-border"), we = m("SidebarTitle", ae), x = m("SidebarBody", le), Me = m("SidebarResizeLimit", be && "display-block"), A = R || window.innerWidth * 0.5, _e = /* @__PURE__ */ c(Y, { children: [
-    /* @__PURE__ */ s("div", { className: Me, style: N ? { right: A } : { left: A } }),
+  ), Re = m("SidebarHeader", de, te && "show-border"), Me = m("SidebarTitle", ae), x = m("SidebarBody", le), _e = m("SidebarResizeLimit", be && "display-block"), U = R || window.innerWidth * 0.5, we = /* @__PURE__ */ c(G, { children: [
+    /* @__PURE__ */ s("div", { className: _e, style: N ? { right: U } : { left: U } }),
     /* @__PURE__ */ c("div", { className: "SidebarContent", children: [
       /* @__PURE__ */ c("div", { className: Re, children: [
-        /* @__PURE__ */ s("div", { className: we, children: X }),
+        /* @__PURE__ */ s("div", { className: Me, children: X }),
         /* @__PURE__ */ c("div", { className: "SidebarButtons non-printable close", children: [
-          _,
+          w,
           T && /* @__PURE__ */ s(
-            ze,
+            ve,
             {
               isFullscreen: a,
               onClick: De,
               tooltip: ee
             }
           ),
-          !w && (_ || T) && /* @__PURE__ */ s("div", { className: "SidebarButtons-spacer" }),
-          !w && /* @__PURE__ */ s(He, { onClick: ie })
+          !M && (w || T) && /* @__PURE__ */ s("div", { className: "SidebarButtons-spacer" }),
+          !M && /* @__PURE__ */ s(ze, { onClick: oe })
         ] })
       ] }),
-      Q ? /* @__PURE__ */ s(Ae, { slideIn: !0, className: x, ref: M, children: O }) : /* @__PURE__ */ s("div", { className: x, ref: M, children: O }),
-      /* @__PURE__ */ s(ge, { footer: Z, className: ce })
+      Q ? /* @__PURE__ */ s(xe, { slideIn: !0, className: x, ref: _, children: O }) : /* @__PURE__ */ s("div", { className: x, ref: _, children: O }),
+      /* @__PURE__ */ s(Oe, { footer: Z, className: ce })
     ] }),
     q && /* @__PURE__ */ s(
       E,
@@ -149,25 +149,25 @@ const Ue = 350, Pe = 100, Ye = 800, j = 0, Ge = 400, Ve = 800, je = 0.14, Xe = 5
       }
     )
   ] });
-  return /* @__PURE__ */ c(Y, { children: [
-    /* @__PURE__ */ s(We, { initial: !0, mode: "wait", children: /* @__PURE__ */ s(
-      Oe.div,
+  return /* @__PURE__ */ c(G, { children: [
+    /* @__PURE__ */ s(
+      We.div,
       {
         ...fe,
         initial: k && "sidebarEnter",
         animate: "sidebarVisible",
         exit: "sidebarExit",
-        variants: Ze,
-        custom: { fromRight: N, closed: i },
-        transition: { duration: je },
+        variants: Xe,
+        custom: { fromRight: N, closed: o },
+        transition: { duration: Ve },
         className: Fe,
         style: { width: he },
         ref: u,
-        children: _e
+        children: we
       }
-    ) }),
-    J && !i && /* @__PURE__ */ s(
-      ve,
+    ),
+    J && !o && /* @__PURE__ */ s(
+      ge,
       {
         className: me,
         makeBackdropVisible: $,

package/components/sidebars/Sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.js","sources":["../../../src/components/sidebars/Sidebar.tsx"],"sourcesContent":["import React, { type PropsWithChildren, useEffect, useRef, useState } from 'react';\nimport { AnimatePresence, motion } from 'motion/react';\nimport classNames from 'classnames';\nimport { noop } from 'es-toolkit/function';\nimport { toNumber } from 'es-toolkit/compat';\n\nimport SidebarFooter from './SidebarFooter';\nimport SidebarBackdrop from './SidebarBackdrop';\nimport SidebarFullscreenToggle from './SidebarFullscreenToggle';\nimport SidebarCloseButton from './SidebarCloseButton';\nimport Resizer from '../resizer/Resizer';\nimport useWindowResize from '../../hooks/useWindowResize';\nimport useEsc from '../../hooks/useEsc';\nimport getWidthInBoundaries from '../../utils/getWidthInBoundaries';\nimport type { ObjectValues } from '../../utils/ObjectValues';\nimport SmoothScrollbars from '../smoothScrollbars/SmoothScrollbars';\n\nconst DEFAULT_WIDTH = 350;\nconst DEFAULT_MIN_WIDTH = 100;\nconst DEFAULT_MAX_WIDTH = 800;\nconst DEFAULT_SWITCH_MODE_BREAKPOINT = 0;\n\n// Values define the min and max width for the module-content\n// where the fluid sidebar automatically changes to \"fly\" and back.\nconst MIN_MODULE_CONTENT_WIDTH = 400;\nconst MAX_MODULE_CONTENT_WIDTH = 800;\n\nconst ANIMATION_DURATION = 0.14;\nconst RESIZE_THROTTLE = 500;\n\nconst SidebarPosition = {\n    LEFT: 'left',\n    RIGHT: 'right',\n} as const;\n\nconst SidebarMode = {\n    MODE_FLY: 'fly',\n    MODE_FLUID: 'fluid',\n};\n\ntype AnimationVariantProps = {\n    fromRight: boolean;\n    closed?: boolean;\n};\n\nconst animationVariants = {\n    sidebarEnter: ({ fromRight }: AnimationVariantProps) => {\n        return {\n            x: fromRight ? '100%' : '-100%',\n            opacity: 0,\n        };\n    },\n    sidebarVisible: ({ fromRight, closed }: AnimationVariantProps) => {\n        return {\n            x: !closed ? 0 : fromRight ? '100%' : '-100%',\n            opacity: closed ? 0 : 1,\n            display: closed ? 'none' : 'block',\n        };\n    },\n    sidebarExit: ({ fromRight }: AnimationVariantProps) => {\n        return {\n            x: fromRight ? '100%' : '-100%',\n            opacity: 0,\n        };\n    },\n};\n\nexport type SidebarProps = {\n    /**\n     * Defines if the component will overlap the body content.\n     *\n     * @default false\n     */\n    fly?: boolean;\n\n    /**\n     * Defines whether the component is hidden or not.\n     *\n     * @default false\n     */\n    closed?: boolean;\n\n    /**\n     * Hides the close button. This may be used when the sidebar is always visible and may not be closed.\n     *\n     * @default false\n     */\n    disableClose?: boolean;\n\n    /**\n     * Callback function triggered when clicking the close icon.\n     */\n    onClose?: VoidFunction;\n\n    /**\n     * The Footer content. For example a save button.\n     */\n    footer?: string | React.ReactNode;\n\n    /**\n     * Additional classes added to the Sidebar footer.\n     */\n    footerClassName?: string;\n\n    /**\n     * Additional buttons to be rendered in the header.\n     */\n    headerButtons?: React.ReactNode;\n\n    /**\n     * Additional classes added to the Sidebar header.\n     */\n    headerClassName?: string;\n\n    /**\n     * Shows a sidebar header border\n     */\n    showHeaderBorder?: boolean;\n\n    /**\n     * Defines the width of the component. The value is set as pixel value as inline style.\n     * Note: In the past, the type allowed to pass in a sting value like \"400px\" but that is not\n     * possible anymore due to internal width calculations. To be backwards compatible for non\n     * Typescript projects, the width is converted to a number.\n     *\n     * @default 350\n     */\n    width?: number;\n\n    /**\n     * Defines the minimum width in px of the component that will take effect when resizing.\n     *\n     * @default 100\n     */\n    minWidth?: number;\n\n    /**\n     * Defines the maximum width in px of the component that will take effect when resizing.\n     *\n     * @default 800\n     */\n    maxWidth?: number;\n\n    /**\n     * Opens Sidebar in fullscreen, means 100vw.\n     *\n     * @default false\n     */\n    openInFullscreen?: boolean;\n\n    /**\n     * Callback for when the fullscreen is toggled.\n     */\n    onFullScreenChange?: (newFullscreenState: boolean) => void;\n\n    /**\n     * Enables the fullscreen functionality and shows the fullscreen toggle.\n     *\n     * @default false\n     */\n    enableFullscreenToggle?: boolean;\n\n    /**\n     * Translated tooltip text for the fullscreen toggle button.\n     */\n    fullscreenToggleTooltip?: string;\n\n    /**\n     * Tells the sidebar where it is positioned. This will affect the resizing behavior\n     * respectively. Note: the position need to be set properly whe using the resize\n     * functionality to know on which side of the sidebar to attach the resizer handle.\n     *\n     * It is also relevant when the sidebar mode is set to `fly` to properly animate\n     * the sidebar into the view.\n     *\n     * Possible values are:\n     *\n     * - `'left'`\n     * - `'right'`\n     * - `Sidebar.LEFT`\n     * - `Sidebar.RIGHT`\n     *\n     * @default 'left'\n     */\n    position?: ObjectValues<typeof SidebarPosition>;\n\n    /**\n     * Defines whether or not the sidebar is resizable.\n     * @default false\n     */\n    resizable?: boolean;\n\n    /**\n     * Callback for when the resize is done.\n     */\n    onResizeEnd?: VoidFunction;\n\n    /**\n     * Defines the breakpoint in pixel when the sidebar mode shall be changed. If the window width is lower\n     * than the given breakpoint the mode is set to `fly`. If the window width is higher the mode is set\n     * to `fluid`. This functionality is disabled by default and will be enabled when defining a breakpoint\n     * higher than 0.\n     */\n    switchModeBreakpoint?: number;\n\n    /**\n     * By default the fullscreen mode can be left with \"esc\". If this is unwanted it can be disabled.\n     *\n     * @default false\n     */\n    disableEsc?: boolean;\n\n    /**\n     * Defined whether or not a backdrop will be rendered behind the Sidebar to avoid clicks outside.\n     *\n     * @default false\n     */\n    hasBackdrop?: boolean;\n\n    /**\n     * Defined whether or not the UIKIT SmoothScrollbar is active.\n     *\n     * @default false\n     */\n    hasSmoothScrollbar?: boolean;\n\n    /**\n     * Defined whether or not the backdrop is visible similar to the backdrop for modal dialogs.\n     *\n     * @default false\n     */\n    makeBackdropVisible?: boolean;\n\n    /**\n     * Callback for when the backdrop is clicked. This comes in handy when handling transient data from\n     * the sidebar which need to be saved first and handle clicks outside.\n     */\n    onBackdropClick?: VoidFunction;\n\n    /**\n     * Additional ref added to the Sidebar body.\n     */\n    bodyRef?: React.MutableRefObject<HTMLDivElement | null>;\n\n    /**\n     * Content that will be displayed in the components header.\n     */\n    title?: string | React.ReactNode;\n\n    /**\n     * Additional classes added to the Sidebar title.\n     */\n    titleClassName?: string;\n\n    /**\n     * Additional classes added to the Sidebar backdrop.\n     */\n    backdropClassName?: string;\n\n    /**\n     * Additional classes added to the Sidebar body.\n     */\n    bodyClassName?: string;\n\n    /**\n     * Additional classes added on the wrapper element.\n     */\n    className?: string;\n};\n\nconst Sidebar = (props: PropsWithChildren<SidebarProps>) => {\n    const {\n        fly = false,\n        closed = false,\n        title = '',\n        footer,\n        resizable = false,\n        position,\n        width = DEFAULT_WIDTH,\n        minWidth = DEFAULT_MIN_WIDTH,\n        maxWidth = DEFAULT_MAX_WIDTH,\n        hasBackdrop = false,\n        hasSmoothScrollbar = false,\n        makeBackdropVisible = false,\n        enableFullscreenToggle = false,\n        fullscreenToggleTooltip,\n        openInFullscreen = false,\n        showHeaderBorder = false,\n        disableClose = false,\n        bodyRef,\n        headerButtons,\n        switchModeBreakpoint = DEFAULT_SWITCH_MODE_BREAKPOINT,\n        onClose = noop,\n        onResizeEnd = noop,\n        onFullScreenChange = noop,\n        onBackdropClick = noop,\n        disableEsc = false,\n        titleClassName = '',\n        bodyClassName = '',\n        headerClassName = '',\n        footerClassName = '',\n        backdropClassName = '',\n        className = '',\n        children,\n        ...remainingProps\n    } = props;\n\n    const [internalWidth, setInternalWidth] = useState(toNumber(width));\n    const [sidebarMode, setSidebarMode] = useState(fly ? Sidebar.MODE_FLY : Sidebar.MODE_FLUID);\n    const [isFullscreen, setIsFullscreen] = useState(openInFullscreen);\n    const [isResize, setIsResize] = useState(false);\n    const [isSplit, setIsSplit] = useState(false);\n    const [isRight, setIsRight] = useState(position === SidebarPosition.RIGHT);\n\n    const sidebarRef = useRef<HTMLDivElement>(null);\n\n    // Used to keep the external reference to the module-content to avoid querying the DOM\n    // periodically on window resize\n    const moduleContentRef: React.MutableRefObject<HTMLDivElement | null> = useRef(null);\n\n    // Position fallback in case the position property is not defined but the sidebar mode is fly\n    // and we want to animate it, we nee to know the direction from where th sidebar is coming from.\n    // That's why we check the ApplicationLayoutSidebar class if the sidebar inside is right aligned\n    // or not and us this value instead.\n    // Note: the position need to be set properly whe using the resize functionality to know on which\n    // side of the sidebar to attach the resizer handle.\n    useEffect(() => {\n        if (sidebarRef.current && sidebarMode === Sidebar.MODE_FLY) {\n            const sidebarLayout = sidebarRef.current.parentNode as HTMLDivElement;\n            if (sidebarLayout?.className.includes('right')) {\n                setIsRight(true);\n            }\n        }\n    }, [sidebarRef.current, sidebarMode]);\n\n    // Keep the previous closed state in order to prevent animation when switching sidebar mode\n    const [previousClosed, setPreviousClosed] = useState(closed);\n    if (previousClosed !== closed) {\n        setPreviousClosed(closed);\n    }\n\n    // Update internal width from outside\n    const [previousWidth, setPreviousWidth] = useState(width);\n    if (previousWidth !== width) {\n        console.log('update internal width');\n        setInternalWidth(toNumber(width));\n        setPreviousWidth(width);\n    }\n\n    // Switch between mode \"fly\" and \"fluid\"\n    useWindowResize(() => adaptSidebarMode(), RESIZE_THROTTLE);\n\n    // Initially check breakpoint after mounting the component\n    useEffect(() => adaptSidebarMode(), []);\n\n    // When Sidebar opens, check for available module-content width and\n    // switch sidebar mode to fly in case\n    useEffect(() => {\n        if (!closed) {\n            setTimeout(() => adaptSidebarMode());\n        }\n    }, [closed]);\n\n    useEffect(() => {\n        const moduleContent = document.querySelector('.module-content');\n        if (moduleContent) {\n            moduleContentRef.current = moduleContent as HTMLDivElement;\n        }\n    }, []);\n\n    // Close the fullscreen with \"esc\"\n    useEsc(() => {\n        if (!disableEsc && enableFullscreenToggle && isFullscreen) {\n            setIsFullscreen(false);\n            onFullScreenChange(false);\n        }\n    });\n\n    const adaptSidebarMode = () => {\n        const moduleContentWidth = moduleContentRef.current?.clientWidth;\n\n        if (fly || switchModeBreakpoint === DEFAULT_SWITCH_MODE_BREAKPOINT) {\n            return;\n        }\n\n        const isModuleContentTooSmall = moduleContentWidth && moduleContentWidth <= MIN_MODULE_CONTENT_WIDTH;\n        const isModuleContentBigEnough = moduleContentWidth && moduleContentWidth > MAX_MODULE_CONTENT_WIDTH;\n\n        const isWindowSmallerThanBreakpoint = window.innerWidth <= switchModeBreakpoint;\n\n        // switch to fly when module-content is less than x pixel and back if it is bigger\n        if (isModuleContentTooSmall || isWindowSmallerThanBreakpoint) {\n            setSidebarMode(Sidebar.MODE_FLY);\n            return;\n        }\n\n        // if module-content is bigger and is initially fluid set back to initial fluid state\n        if (isModuleContentBigEnough && !isWindowSmallerThanBreakpoint) {\n            setSidebarMode(Sidebar.MODE_FLUID);\n            return;\n        }\n    };\n\n    const handleResize = (diff: number) => {\n        const wasSplit = isSplit;\n        const halfWindowWidth = window.innerWidth * 0.5;\n        const usedMaxWidth = maxWidth || halfWindowWidth;\n\n        // Check for sidebar width if it is half the window size. If it was before but the sidebar was resized so it is\n        // no longer half window size, set the sidebar with to half window size to avoid jumping sidebar to old width\n        setInternalWidth(oldWidth => {\n            const updatedWidth = position === Sidebar.RIGHT ? oldWidth + diff : oldWidth - diff;\n            const newWidth = getWidthInBoundaries(minWidth, usedMaxWidth, updatedWidth);\n\n            const newIsSplit = newWidth === halfWindowWidth;\n            setIsSplit(newIsSplit);\n\n            return wasSplit && !isSplit ? halfWindowWidth : newWidth;\n        });\n\n        adaptSidebarMode();\n    };\n\n    const handleResizeStart = () => {\n        const body = document.body;\n        body?.classList.add('pointer-events-none');\n        setIsResize(true);\n    };\n\n    const handleResizeEnd = () => {\n        const body = document.body;\n        body?.classList.remove('pointer-events-none');\n        setIsResize(false);\n        onResizeEnd();\n    };\n\n    const handleFullscreenChange = () => {\n        const newFullscreenState = !isFullscreen;\n        setIsFullscreen(newFullscreenState);\n        onFullScreenChange(newFullscreenState);\n    };\n\n    const wrapperClasses = classNames(\n        'Sidebar',\n        className,\n        closed && 'closed',\n        isFullscreen && 'width-100vw sidebar-fullscreen',\n        isSplit && !isFullscreen && 'max-width-50vw width-50vw',\n        sidebarMode === SidebarMode.MODE_FLY ? 'fly' : isFullscreen ? 'fly' : 'fluid'\n    );\n\n    const headerClassNames = classNames('SidebarHeader', headerClassName, showHeaderBorder && 'show-border');\n    const titleClassNames = classNames('SidebarTitle', titleClassName);\n    const bodyClassNames = classNames('SidebarBody', bodyClassName);\n\n    const resizeLimitClasses = classNames('SidebarResizeLimit', isResize && 'display-block');\n\n    const resizeIndicatorPosition = maxWidth || window.innerWidth * 0.5;\n    const resizeLimitStyle = isRight ? { right: resizeIndicatorPosition } : { left: resizeIndicatorPosition };\n\n    const sidebarContent = (\n        <>\n            <div className={resizeLimitClasses} style={resizeLimitStyle} />\n            <div className='SidebarContent'>\n                <div className={headerClassNames}>\n                    <div className={titleClassNames}>{title}</div>\n                    <div className='SidebarButtons non-printable close'>\n                        {headerButtons}\n                        {enableFullscreenToggle && (\n                            <SidebarFullscreenToggle\n                                isFullscreen={isFullscreen}\n                                onClick={handleFullscreenChange}\n                                tooltip={fullscreenToggleTooltip}\n                            />\n                        )}\n                        {!disableClose && (headerButtons || enableFullscreenToggle) && (\n                            <div className='SidebarButtons-spacer' />\n                        )}\n                        {!disableClose && <SidebarCloseButton onClick={onClose} />}\n                    </div>\n                </div>\n                {hasSmoothScrollbar ? (\n                    <SmoothScrollbars slideIn className={bodyClassNames} ref={bodyRef}>\n                        {children}\n                    </SmoothScrollbars>\n                ) : (\n                    <div className={bodyClassNames} ref={bodyRef}>\n                        {children}\n                    </div>\n                )}\n\n                <SidebarFooter footer={footer} className={footerClassName} />\n            </div>\n            {resizable && (\n                <Resizer\n                    onResizeStart={handleResizeStart}\n                    onResize={handleResize}\n                    onResizeEnd={handleResizeEnd}\n                    direction={Resizer.HORIZONTAL}\n                    position={isRight ? Resizer.LEFT : Resizer.RIGHT}\n                />\n            )}\n        </>\n    );\n\n    return (\n        <>\n            <AnimatePresence initial mode='wait'>\n                <motion.div\n                    {...remainingProps}\n                    initial={previousClosed && 'sidebarEnter'}\n                    animate='sidebarVisible'\n                    // Cannot exit animation as sidebar is moved to offscreen by CSS class, means is still mounted\n                    exit='sidebarExit'\n                    variants={animationVariants}\n                    custom={{ fromRight: isRight, closed }}\n                    transition={{ duration: ANIMATION_DURATION }}\n                    className={wrapperClasses}\n                    style={{ width: internalWidth }}\n                    ref={sidebarRef}\n                >\n                    {sidebarContent}\n                </motion.div>\n            </AnimatePresence>\n            {hasBackdrop && !closed && (\n                <SidebarBackdrop\n                    className={backdropClassName}\n                    makeBackdropVisible={makeBackdropVisible}\n                    onClick={onBackdropClick}\n                />\n            )}\n        </>\n    );\n};\n\nSidebar.LEFT = SidebarPosition.LEFT;\nSidebar.RIGHT = SidebarPosition.RIGHT;\n\nSidebar.MODE_FLY = SidebarMode.MODE_FLY;\nSidebar.MODE_FLUID = SidebarMode.MODE_FLUID;\n\nexport default Sidebar;\n"],"names":["DEFAULT_WIDTH","DEFAULT_MIN_WIDTH","DEFAULT_MAX_WIDTH","DEFAULT_SWITCH_MODE_BREAKPOINT","MIN_MODULE_CONTENT_WIDTH","MAX_MODULE_CONTENT_WIDTH","ANIMATION_DURATION","RESIZE_THROTTLE","SidebarPosition","SidebarMode","animationVariants","fromRight","closed","Sidebar","props","fly","title","footer","resizable","position","width","minWidth","maxWidth","hasBackdrop","hasSmoothScrollbar","makeBackdropVisible","enableFullscreenToggle","fullscreenToggleTooltip","openInFullscreen","showHeaderBorder","disableClose","bodyRef","headerButtons","switchModeBreakpoint","onClose","noop","onResizeEnd","onFullScreenChange","onBackdropClick","disableEsc","titleClassName","bodyClassName","headerClassName","footerClassName","backdropClassName","className","children","remainingProps","internalWidth","setInternalWidth","useState","toNumber","sidebarMode","setSidebarMode","isFullscreen","setIsFullscreen","isResize","setIsResize","isSplit","setIsSplit","isRight","setIsRight","sidebarRef","useRef","moduleContentRef","useEffect","previousClosed","setPreviousClosed","previousWidth","setPreviousWidth","useWindowResize","adaptSidebarMode","moduleContent","useEsc","moduleContentWidth","isModuleContentTooSmall","isModuleContentBigEnough","isWindowSmallerThanBreakpoint","handleResize","diff","wasSplit","halfWindowWidth","usedMaxWidth","oldWidth","updatedWidth","newWidth","getWidthInBoundaries","handleResizeStart","handleResizeEnd","handleFullscreenChange","newFullscreenState","wrapperClasses","classNames","headerClassNames","titleClassNames","bodyClassNames","resizeLimitClasses","resizeIndicatorPosition","sidebarContent","jsxs","Fragment","jsx","SidebarFullscreenToggle","SidebarCloseButton","SmoothScrollbars","SidebarFooter","Resizer","AnimatePresence","motion","SidebarBackdrop"],"mappings":"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"}
+{"version":3,"file":"Sidebar.js","sources":["../../../src/components/sidebars/Sidebar.tsx"],"sourcesContent":["import React, { type PropsWithChildren, useEffect, useRef, useState } from 'react';\nimport { motion } from 'motion/react';\nimport { noop } from 'es-toolkit/function';\nimport { toNumber } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport SidebarFooter from './SidebarFooter';\nimport SidebarBackdrop from './SidebarBackdrop';\nimport SidebarFullscreenToggle from './SidebarFullscreenToggle';\nimport SidebarCloseButton from './SidebarCloseButton';\nimport Resizer from '../resizer/Resizer';\nimport useWindowResize from '../../hooks/useWindowResize';\nimport useEsc from '../../hooks/useEsc';\nimport getWidthInBoundaries from '../../utils/getWidthInBoundaries';\nimport type { ObjectValues } from '../../utils/ObjectValues';\nimport SmoothScrollbars from '../smoothScrollbars/SmoothScrollbars';\n\nconst DEFAULT_WIDTH = 350;\nconst DEFAULT_MIN_WIDTH = 100;\nconst DEFAULT_MAX_WIDTH = 800;\nconst DEFAULT_SWITCH_MODE_BREAKPOINT = 0;\n\n// Values define the min and max width for the module-content\n// where the fluid sidebar automatically changes to \"fly\" and back.\nconst MIN_MODULE_CONTENT_WIDTH = 400;\nconst MAX_MODULE_CONTENT_WIDTH = 800;\n\nconst ANIMATION_DURATION = 0.14;\nconst RESIZE_THROTTLE = 500;\n\nconst SidebarPosition = {\n    LEFT: 'left',\n    RIGHT: 'right',\n} as const;\n\nconst SidebarMode = {\n    MODE_FLY: 'fly',\n    MODE_FLUID: 'fluid',\n};\n\ntype AnimationVariantProps = {\n    fromRight: boolean;\n    closed?: boolean;\n};\n\nconst animationVariants = {\n    sidebarEnter: ({ fromRight }: AnimationVariantProps) => {\n        return {\n            x: fromRight ? '100%' : '-100%',\n            opacity: 0,\n        };\n    },\n    sidebarVisible: ({ fromRight, closed }: AnimationVariantProps) => {\n        return {\n            x: !closed ? 0 : fromRight ? '100%' : '-100%',\n            opacity: closed ? 0 : 1,\n            display: closed ? 'none' : 'block',\n        };\n    },\n    sidebarExit: ({ fromRight }: AnimationVariantProps) => {\n        return {\n            x: fromRight ? '100%' : '-100%',\n            opacity: 0,\n        };\n    },\n};\n\nexport type SidebarProps = {\n    /**\n     * Defines if the component will overlap the body content.\n     *\n     * @default false\n     */\n    fly?: boolean;\n\n    /**\n     * Defines whether the component is hidden or not.\n     *\n     * @default false\n     */\n    closed?: boolean;\n\n    /**\n     * Hides the close button. This may be used when the sidebar is always visible and may not be closed.\n     *\n     * @default false\n     */\n    disableClose?: boolean;\n\n    /**\n     * Callback function triggered when clicking the close icon.\n     */\n    onClose?: VoidFunction;\n\n    /**\n     * The Footer content. For example a save button.\n     */\n    footer?: string | React.ReactNode;\n\n    /**\n     * Additional classes added to the Sidebar footer.\n     */\n    footerClassName?: string;\n\n    /**\n     * Additional buttons to be rendered in the header.\n     */\n    headerButtons?: React.ReactNode;\n\n    /**\n     * Additional classes added to the Sidebar header.\n     */\n    headerClassName?: string;\n\n    /**\n     * Shows a sidebar header border\n     */\n    showHeaderBorder?: boolean;\n\n    /**\n     * Defines the width of the component. The value is set as pixel value as inline style.\n     * Note: In the past, the type allowed to pass in a sting value like \"400px\" but that is not\n     * possible anymore due to internal width calculations. To be backwards compatible for non\n     * Typescript projects, the width is converted to a number.\n     *\n     * @default 350\n     */\n    width?: number;\n\n    /**\n     * Defines the minimum width in px of the component that will take effect when resizing.\n     *\n     * @default 100\n     */\n    minWidth?: number;\n\n    /**\n     * Defines the maximum width in px of the component that will take effect when resizing.\n     *\n     * @default 800\n     */\n    maxWidth?: number;\n\n    /**\n     * Opens Sidebar in fullscreen, means 100vw.\n     *\n     * @default false\n     */\n    openInFullscreen?: boolean;\n\n    /**\n     * Callback for when the fullscreen is toggled.\n     */\n    onFullScreenChange?: (newFullscreenState: boolean) => void;\n\n    /**\n     * Enables the fullscreen functionality and shows the fullscreen toggle.\n     *\n     * @default false\n     */\n    enableFullscreenToggle?: boolean;\n\n    /**\n     * Translated tooltip text for the fullscreen toggle button.\n     */\n    fullscreenToggleTooltip?: string;\n\n    /**\n     * Tells the sidebar where it is positioned. This will affect the resizing behavior\n     * respectively. Note: the position need to be set properly whe using the resize\n     * functionality to know on which side of the sidebar to attach the resizer handle.\n     *\n     * It is also relevant when the sidebar mode is set to `fly` to properly animate\n     * the sidebar into the view.\n     *\n     * Possible values are:\n     *\n     * - `'left'`\n     * - `'right'`\n     * - `Sidebar.LEFT`\n     * - `Sidebar.RIGHT`\n     *\n     * @default 'left'\n     */\n    position?: ObjectValues<typeof SidebarPosition>;\n\n    /**\n     * Defines whether or not the sidebar is resizable.\n     * @default false\n     */\n    resizable?: boolean;\n\n    /**\n     * Callback for when the resize is done.\n     */\n    onResizeEnd?: VoidFunction;\n\n    /**\n     * Defines the breakpoint in pixel when the sidebar mode shall be changed. If the window width is lower\n     * than the given breakpoint the mode is set to `fly`. If the window width is higher the mode is set\n     * to `fluid`. This functionality is disabled by default and will be enabled when defining a breakpoint\n     * higher than 0.\n     */\n    switchModeBreakpoint?: number;\n\n    /**\n     * By default the fullscreen mode can be left with \"esc\". If this is unwanted it can be disabled.\n     *\n     * @default false\n     */\n    disableEsc?: boolean;\n\n    /**\n     * Defined whether or not a backdrop will be rendered behind the Sidebar to avoid clicks outside.\n     *\n     * @default false\n     */\n    hasBackdrop?: boolean;\n\n    /**\n     * Defined whether or not the UIKIT SmoothScrollbar is active.\n     *\n     * @default false\n     */\n    hasSmoothScrollbar?: boolean;\n\n    /**\n     * Defined whether or not the backdrop is visible similar to the backdrop for modal dialogs.\n     *\n     * @default false\n     */\n    makeBackdropVisible?: boolean;\n\n    /**\n     * Callback for when the backdrop is clicked. This comes in handy when handling transient data from\n     * the sidebar which need to be saved first and handle clicks outside.\n     */\n    onBackdropClick?: VoidFunction;\n\n    /**\n     * Additional ref added to the Sidebar body.\n     */\n    bodyRef?: React.MutableRefObject<HTMLDivElement | null>;\n\n    /**\n     * Content that will be displayed in the components header.\n     */\n    title?: string | React.ReactNode;\n\n    /**\n     * Additional classes added to the Sidebar title.\n     */\n    titleClassName?: string;\n\n    /**\n     * Additional classes added to the Sidebar backdrop.\n     */\n    backdropClassName?: string;\n\n    /**\n     * Additional classes added to the Sidebar body.\n     */\n    bodyClassName?: string;\n\n    /**\n     * Additional classes added on the wrapper element.\n     */\n    className?: string;\n};\n\nconst Sidebar = (props: PropsWithChildren<SidebarProps>) => {\n    const {\n        fly = false,\n        closed = false,\n        title = '',\n        footer,\n        resizable = false,\n        position,\n        width = DEFAULT_WIDTH,\n        minWidth = DEFAULT_MIN_WIDTH,\n        maxWidth = DEFAULT_MAX_WIDTH,\n        hasBackdrop = false,\n        hasSmoothScrollbar = false,\n        makeBackdropVisible = false,\n        enableFullscreenToggle = false,\n        fullscreenToggleTooltip,\n        openInFullscreen = false,\n        showHeaderBorder = false,\n        disableClose = false,\n        bodyRef,\n        headerButtons,\n        switchModeBreakpoint = DEFAULT_SWITCH_MODE_BREAKPOINT,\n        onClose = noop,\n        onResizeEnd = noop,\n        onFullScreenChange = noop,\n        onBackdropClick = noop,\n        disableEsc = false,\n        titleClassName = '',\n        bodyClassName = '',\n        headerClassName = '',\n        footerClassName = '',\n        backdropClassName = '',\n        className = '',\n        children,\n        ...remainingProps\n    } = props;\n\n    const [internalWidth, setInternalWidth] = useState(toNumber(width));\n    const [sidebarMode, setSidebarMode] = useState(fly ? Sidebar.MODE_FLY : Sidebar.MODE_FLUID);\n    const [isFullscreen, setIsFullscreen] = useState(openInFullscreen);\n    const [isResize, setIsResize] = useState(false);\n    const [isSplit, setIsSplit] = useState(false);\n    const [isRight, setIsRight] = useState(position === SidebarPosition.RIGHT);\n\n    const sidebarRef = useRef<HTMLDivElement>(null);\n\n    // Used to keep the external reference to the module-content to avoid querying the DOM\n    // periodically on window resize\n    const moduleContentRef: React.MutableRefObject<HTMLDivElement | null> = useRef(null);\n\n    // Position fallback in case the position property is not defined but the sidebar mode is fly\n    // and we want to animate it, we nee to know the direction from where th sidebar is coming from.\n    // That's why we check the ApplicationLayoutSidebar class if the sidebar inside is right aligned\n    // or not and us this value instead.\n    // Note: the position need to be set properly whe using the resize functionality to know on which\n    // side of the sidebar to attach the resizer handle.\n    useEffect(() => {\n        if (sidebarRef.current && sidebarMode === Sidebar.MODE_FLY) {\n            const sidebarLayout = sidebarRef.current.parentNode as HTMLDivElement;\n            if (sidebarLayout?.className.includes('right')) {\n                setIsRight(true);\n            }\n        }\n    }, [sidebarRef.current, sidebarMode]);\n\n    // Keep the previous closed state in order to prevent animation when switching sidebar mode\n    const [previousClosed, setPreviousClosed] = useState(closed);\n    if (previousClosed !== closed) {\n        setPreviousClosed(closed);\n    }\n\n    // Update internal width from outside\n    const [previousWidth, setPreviousWidth] = useState(width);\n    if (previousWidth !== width) {\n        console.log('update internal width');\n        setInternalWidth(toNumber(width));\n        setPreviousWidth(width);\n    }\n\n    // Switch between mode \"fly\" and \"fluid\"\n    useWindowResize(() => adaptSidebarMode(), RESIZE_THROTTLE);\n\n    // Initially check breakpoint after mounting the component\n    useEffect(() => adaptSidebarMode(), []);\n\n    // When Sidebar opens, check for available module-content width and\n    // switch sidebar mode to fly in case\n    useEffect(() => {\n        if (!closed) {\n            setTimeout(() => adaptSidebarMode());\n        }\n    }, [closed]);\n\n    useEffect(() => {\n        const moduleContent = document.querySelector('.module-content');\n        if (moduleContent) {\n            moduleContentRef.current = moduleContent as HTMLDivElement;\n        }\n    }, []);\n\n    // Close the fullscreen with \"esc\"\n    useEsc(() => {\n        if (!disableEsc && enableFullscreenToggle && isFullscreen) {\n            setIsFullscreen(false);\n            onFullScreenChange(false);\n        }\n    });\n\n    const adaptSidebarMode = () => {\n        const moduleContentWidth = moduleContentRef.current?.clientWidth;\n\n        if (fly || switchModeBreakpoint === DEFAULT_SWITCH_MODE_BREAKPOINT) {\n            return;\n        }\n\n        const isModuleContentTooSmall = moduleContentWidth && moduleContentWidth <= MIN_MODULE_CONTENT_WIDTH;\n        const isModuleContentBigEnough = moduleContentWidth && moduleContentWidth > MAX_MODULE_CONTENT_WIDTH;\n\n        const isWindowSmallerThanBreakpoint = window.innerWidth <= switchModeBreakpoint;\n\n        // switch to fly when module-content is less than x pixel and back if it is bigger\n        if (isModuleContentTooSmall || isWindowSmallerThanBreakpoint) {\n            setSidebarMode(Sidebar.MODE_FLY);\n            return;\n        }\n\n        // if module-content is bigger and is initially fluid set back to initial fluid state\n        if (isModuleContentBigEnough && !isWindowSmallerThanBreakpoint) {\n            setSidebarMode(Sidebar.MODE_FLUID);\n            return;\n        }\n    };\n\n    const handleResize = (diff: number) => {\n        const wasSplit = isSplit;\n        const halfWindowWidth = window.innerWidth * 0.5;\n        const usedMaxWidth = maxWidth || halfWindowWidth;\n\n        // Check for sidebar width if it is half the window size. If it was before but the sidebar was resized so it is\n        // no longer half window size, set the sidebar with to half window size to avoid jumping sidebar to old width\n        setInternalWidth(oldWidth => {\n            const updatedWidth = position === Sidebar.RIGHT ? oldWidth + diff : oldWidth - diff;\n            const newWidth = getWidthInBoundaries(minWidth, usedMaxWidth, updatedWidth);\n\n            const newIsSplit = newWidth === halfWindowWidth;\n            setIsSplit(newIsSplit);\n\n            return wasSplit && !isSplit ? halfWindowWidth : newWidth;\n        });\n\n        adaptSidebarMode();\n    };\n\n    const handleResizeStart = () => {\n        const body = document.body;\n        body?.classList.add('pointer-events-none');\n        setIsResize(true);\n    };\n\n    const handleResizeEnd = () => {\n        const body = document.body;\n        body?.classList.remove('pointer-events-none');\n        setIsResize(false);\n        onResizeEnd();\n    };\n\n    const handleFullscreenChange = () => {\n        const newFullscreenState = !isFullscreen;\n        setIsFullscreen(newFullscreenState);\n        onFullScreenChange(newFullscreenState);\n    };\n\n    const wrapperClasses = classNames(\n        'Sidebar',\n        className,\n        closed && 'closed',\n        isFullscreen && 'width-100vw sidebar-fullscreen',\n        isSplit && !isFullscreen && 'max-width-50vw width-50vw',\n        sidebarMode === SidebarMode.MODE_FLY ? 'fly' : isFullscreen ? 'fly' : 'fluid'\n    );\n\n    const headerClassNames = classNames('SidebarHeader', headerClassName, showHeaderBorder && 'show-border');\n    const titleClassNames = classNames('SidebarTitle', titleClassName);\n    const bodyClassNames = classNames('SidebarBody', bodyClassName);\n\n    const resizeLimitClasses = classNames('SidebarResizeLimit', isResize && 'display-block');\n\n    const resizeIndicatorPosition = maxWidth || window.innerWidth * 0.5;\n    const resizeLimitStyle = isRight ? { right: resizeIndicatorPosition } : { left: resizeIndicatorPosition };\n\n    const sidebarContent = (\n        <>\n            <div className={resizeLimitClasses} style={resizeLimitStyle} />\n            <div className='SidebarContent'>\n                <div className={headerClassNames}>\n                    <div className={titleClassNames}>{title}</div>\n                    <div className='SidebarButtons non-printable close'>\n                        {headerButtons}\n                        {enableFullscreenToggle && (\n                            <SidebarFullscreenToggle\n                                isFullscreen={isFullscreen}\n                                onClick={handleFullscreenChange}\n                                tooltip={fullscreenToggleTooltip}\n                            />\n                        )}\n                        {!disableClose && (headerButtons || enableFullscreenToggle) && (\n                            <div className='SidebarButtons-spacer' />\n                        )}\n                        {!disableClose && <SidebarCloseButton onClick={onClose} />}\n                    </div>\n                </div>\n                {hasSmoothScrollbar ? (\n                    <SmoothScrollbars slideIn className={bodyClassNames} ref={bodyRef}>\n                        {children}\n                    </SmoothScrollbars>\n                ) : (\n                    <div className={bodyClassNames} ref={bodyRef}>\n                        {children}\n                    </div>\n                )}\n\n                <SidebarFooter footer={footer} className={footerClassName} />\n            </div>\n            {resizable && (\n                <Resizer\n                    onResizeStart={handleResizeStart}\n                    onResize={handleResize}\n                    onResizeEnd={handleResizeEnd}\n                    direction={Resizer.HORIZONTAL}\n                    position={isRight ? Resizer.LEFT : Resizer.RIGHT}\n                />\n            )}\n        </>\n    );\n\n    return (\n        <>\n            <motion.div\n                {...remainingProps}\n                initial={previousClosed && 'sidebarEnter'}\n                animate='sidebarVisible'\n                // Cannot exit animation as sidebar is moved to offscreen by CSS class, means is still mounted\n                exit='sidebarExit'\n                variants={animationVariants}\n                custom={{ fromRight: isRight, closed }}\n                transition={{ duration: ANIMATION_DURATION }}\n                className={wrapperClasses}\n                style={{ width: internalWidth }}\n                ref={sidebarRef}\n            >\n                {sidebarContent}\n            </motion.div>\n            {hasBackdrop && !closed && (\n                <SidebarBackdrop\n                    className={backdropClassName}\n                    makeBackdropVisible={makeBackdropVisible}\n                    onClick={onBackdropClick}\n                />\n            )}\n        </>\n    );\n};\n\nSidebar.LEFT = SidebarPosition.LEFT;\nSidebar.RIGHT = SidebarPosition.RIGHT;\n\nSidebar.MODE_FLY = SidebarMode.MODE_FLY;\nSidebar.MODE_FLUID = SidebarMode.MODE_FLUID;\n\nexport default Sidebar;\n"],"names":["DEFAULT_WIDTH","DEFAULT_MIN_WIDTH","DEFAULT_MAX_WIDTH","DEFAULT_SWITCH_MODE_BREAKPOINT","MIN_MODULE_CONTENT_WIDTH","MAX_MODULE_CONTENT_WIDTH","ANIMATION_DURATION","RESIZE_THROTTLE","SidebarPosition","SidebarMode","animationVariants","fromRight","closed","Sidebar","props","fly","title","footer","resizable","position","width","minWidth","maxWidth","hasBackdrop","hasSmoothScrollbar","makeBackdropVisible","enableFullscreenToggle","fullscreenToggleTooltip","openInFullscreen","showHeaderBorder","disableClose","bodyRef","headerButtons","switchModeBreakpoint","onClose","noop","onResizeEnd","onFullScreenChange","onBackdropClick","disableEsc","titleClassName","bodyClassName","headerClassName","footerClassName","backdropClassName","className","children","remainingProps","internalWidth","setInternalWidth","useState","toNumber","sidebarMode","setSidebarMode","isFullscreen","setIsFullscreen","isResize","setIsResize","isSplit","setIsSplit","isRight","setIsRight","sidebarRef","useRef","moduleContentRef","useEffect","previousClosed","setPreviousClosed","previousWidth","setPreviousWidth","useWindowResize","adaptSidebarMode","moduleContent","useEsc","moduleContentWidth","isModuleContentTooSmall","isModuleContentBigEnough","isWindowSmallerThanBreakpoint","handleResize","diff","wasSplit","halfWindowWidth","usedMaxWidth","oldWidth","updatedWidth","newWidth","getWidthInBoundaries","handleResizeStart","handleResizeEnd","handleFullscreenChange","newFullscreenState","wrapperClasses","classNames","headerClassNames","titleClassNames","bodyClassNames","resizeLimitClasses","resizeIndicatorPosition","sidebarContent","jsxs","Fragment","jsx","SidebarFullscreenToggle","SidebarCloseButton","SmoothScrollbars","SidebarFooter","Resizer","motion","SidebarBackdrop"],"mappings":"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"}

package/components/sidebars/SidebarBackdrop.js

@@ -1,8 +1,8 @@
 import { jsx as d } from "react/jsx-runtime";
-import e from "classnames";
-import { noop as t } from "es-toolkit/function";
-const m = ({ onClick: a = t, makeBackdropVisible: r = !1, className: o = "" }) => {
-  const s = e("SidebarBackdrop", r && "sidebar-backdrop-bg", o);
+import { noop as e } from "es-toolkit/function";
+import t from "../../utils/classNames.js";
+const m = ({ onClick: a = e, makeBackdropVisible: r = !1, className: o = "" }) => {
+  const s = t("SidebarBackdrop", r && "sidebar-backdrop-bg", o);
   return /* @__PURE__ */ d("div", { className: s, onClick: a, "data-testid": "sidebarBackdrop" });
 };
 export {

package/components/sidebars/SidebarBackdrop.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarBackdrop.js","sources":["../../../src/components/sidebars/SidebarBackdrop.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { noop } from 'es-toolkit/function';\n\nexport type SidebarBackdropProps = {\n    makeBackdropVisible?: boolean;\n    onClick?: VoidFunction;\n    className?: string;\n};\n\nconst SidebarBackdrop = ({ onClick = noop, makeBackdropVisible = false, className = '' }: SidebarBackdropProps) => {\n    const backdropClassNames = classNames('SidebarBackdrop', makeBackdropVisible && 'sidebar-backdrop-bg', className);\n\n    return <div className={backdropClassNames} onClick={onClick} data-testid='sidebarBackdrop' />;\n};\n\nexport default SidebarBackdrop;\n"],"names":["SidebarBackdrop","onClick","noop","makeBackdropVisible","className","backdropClassNames","classNames"],"mappings":";;;AASA,MAAMA,IAAkB,CAAC,EAAE,SAAAC,IAAUC,GAAM,qBAAAC,IAAsB,IAAO,WAAAC,IAAY,SAA+B;AAC/G,QAAMC,IAAqBC,EAAW,mBAAmBH,KAAuB,uBAAuBC,CAAS;AAEhH,2BAAQ,OAAA,EAAI,WAAWC,GAAoB,SAAAJ,GAAkB,eAAY,mBAAkB;AAC/F;"}
+{"version":3,"file":"SidebarBackdrop.js","sources":["../../../src/components/sidebars/SidebarBackdrop.tsx"],"sourcesContent":["import { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\n\nexport type SidebarBackdropProps = {\n    makeBackdropVisible?: boolean;\n    onClick?: VoidFunction;\n    className?: string;\n};\n\nconst SidebarBackdrop = ({ onClick = noop, makeBackdropVisible = false, className = '' }: SidebarBackdropProps) => {\n    const backdropClassNames = classNames('SidebarBackdrop', makeBackdropVisible && 'sidebar-backdrop-bg', className);\n\n    return <div className={backdropClassNames} onClick={onClick} data-testid='sidebarBackdrop' />;\n};\n\nexport default SidebarBackdrop;\n"],"names":["SidebarBackdrop","onClick","noop","makeBackdropVisible","className","backdropClassNames","classNames"],"mappings":";;;AAUA,MAAMA,IAAkB,CAAC,EAAE,SAAAC,IAAUC,GAAM,qBAAAC,IAAsB,IAAO,WAAAC,IAAY,SAA+B;AAC/G,QAAMC,IAAqBC,EAAW,mBAAmBH,KAAuB,uBAAuBC,CAAS;AAEhH,2BAAQ,OAAA,EAAI,WAAWC,GAAoB,SAAAJ,GAAkB,eAAY,mBAAkB;AAC/F;"}

package/components/sidebars/SidebarFooter.js

@@ -1,5 +1,5 @@
 import { jsx as o } from "react/jsx-runtime";
-import a from "classnames";
+import a from "../../utils/classNames.js";
 const l = ({ footer: r, className: e = "" }) => {
   if (!r)
     return null;

package/components/sidebars/SidebarFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarFooter.js","sources":["../../../src/components/sidebars/SidebarFooter.tsx"],"sourcesContent":["import type React from 'react';\nimport classNames from 'classnames';\n\nexport type SidebarFooterProps = {\n    footer?: React.ReactNode;\n    className?: string;\n};\n\nconst SidebarFooter = ({ footer, className = '' }: SidebarFooterProps) => {\n    if (!footer) {\n        return null;\n    }\n\n    const footerClassNames = classNames('SidebarFooter', className);\n\n    return <div className={footerClassNames}>{footer}</div>;\n};\n\nexport default SidebarFooter;\n"],"names":["SidebarFooter","footer","className","footerClassNames","classNames","jsx"],"mappings":";;AAQA,MAAMA,IAAgB,CAAC,EAAE,QAAAC,GAAQ,WAAAC,IAAY,SAA6B;AACtE,MAAI,CAACD;AACD,WAAO;AAGX,QAAME,IAAmBC,EAAW,iBAAiBF,CAAS;AAE9D,SAAO,gBAAAG,EAAC,OAAA,EAAI,WAAWF,GAAmB,UAAAF,GAAO;AACrD;"}
+{"version":3,"file":"SidebarFooter.js","sources":["../../../src/components/sidebars/SidebarFooter.tsx"],"sourcesContent":["import type React from 'react';\n\nimport classNames from '../../utils/classNames';\n\nexport type SidebarFooterProps = {\n    footer?: React.ReactNode;\n    className?: string;\n};\n\nconst SidebarFooter = ({ footer, className = '' }: SidebarFooterProps) => {\n    if (!footer) {\n        return null;\n    }\n\n    const footerClassNames = classNames('SidebarFooter', className);\n\n    return <div className={footerClassNames}>{footer}</div>;\n};\n\nexport default SidebarFooter;\n"],"names":["SidebarFooter","footer","className","footerClassNames","classNames","jsx"],"mappings":";;AASA,MAAMA,IAAgB,CAAC,EAAE,QAAAC,GAAQ,WAAAC,IAAY,SAA6B;AACtE,MAAI,CAACD;AACD,WAAO;AAGX,QAAME,IAAmBC,EAAW,iBAAiBF,CAAS;AAE9D,SAAO,gBAAAG,EAAC,OAAA,EAAI,WAAWF,GAAmB,UAAAF,GAAO;AACrD;"}

package/components/sidebars/SidebarFullscreenToggle.js

@@ -1,10 +1,10 @@
 import { jsx as e } from "react/jsx-runtime";
-import i from "classnames";
-import { noop as m } from "es-toolkit/function";
+import { noop as i } from "es-toolkit/function";
+import m from "../../utils/classNames.js";
 import l from "../button/Button.js";
 import a from "../tooltip/SimpleTooltip.js";
-const g = ({ isFullscreen: t, tooltip: o, onClick: s = m }) => {
-  const n = i(
+const g = ({ isFullscreen: t, tooltip: o, onClick: s = i }) => {
+  const n = m(
     "rioglyph",
     t ? "rioglyph-resize-small" : "rioglyph-resize-full"
   ), r = /* @__PURE__ */ e(l, { bsStyle: l.MUTED, iconOnly: !0, onClick: s, "data-testid": "sidebarFullscreenToggle", children: /* @__PURE__ */ e("span", { className: n }) });

package/components/sidebars/SidebarFullscreenToggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarFullscreenToggle.js","sources":["../../../src/components/sidebars/SidebarFullscreenToggle.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { noop } from 'es-toolkit/function';\n\nimport Button from '../button/Button';\nimport SimpleTooltip from '../tooltip/SimpleTooltip';\n\nexport type SidebarFullscreenToggleProps = {\n    isFullscreen?: boolean;\n    tooltip?: string;\n    onClick?: VoidFunction;\n};\n\nconst SidebarFullscreenToggle = ({ isFullscreen, tooltip, onClick = noop }: SidebarFullscreenToggleProps) => {\n    const fullscreenIconClasses = classNames(\n        'rioglyph',\n        isFullscreen ? 'rioglyph-resize-small' : 'rioglyph-resize-full'\n    );\n\n    const button = (\n        <Button bsStyle={Button.MUTED} iconOnly onClick={onClick} data-testid='sidebarFullscreenToggle'>\n            <span className={fullscreenIconClasses} />\n        </Button>\n    );\n\n    if (tooltip) {\n        return (\n            <SimpleTooltip content={tooltip} placement='bottom'>\n                {button}\n            </SimpleTooltip>\n        );\n    }\n\n    return button;\n};\n\nexport default SidebarFullscreenToggle;\n"],"names":["SidebarFullscreenToggle","isFullscreen","tooltip","onClick","noop","fullscreenIconClasses","classNames","button","jsx","Button","SimpleTooltip"],"mappings":";;;;;AAYA,MAAMA,IAA0B,CAAC,EAAE,cAAAC,GAAc,SAAAC,GAAS,SAAAC,IAAUC,QAAyC;AACzG,QAAMC,IAAwBC;AAAA,IAC1B;AAAA,IACAL,IAAe,0BAA0B;AAAA,EAAA,GAGvCM,IACF,gBAAAC,EAACC,GAAA,EAAO,SAASA,EAAO,OAAO,UAAQ,IAAC,SAAAN,GAAkB,eAAY,2BAClE,UAAA,gBAAAK,EAAC,QAAA,EAAK,WAAWH,GAAuB,GAC5C;AAGJ,SAAIH,sBAEKQ,GAAA,EAAc,SAASR,GAAS,WAAU,UACtC,UAAAK,GACL,IAIDA;AACX;"}
+{"version":3,"file":"SidebarFullscreenToggle.js","sources":["../../../src/components/sidebars/SidebarFullscreenToggle.tsx"],"sourcesContent":["import { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport Button from '../button/Button';\nimport SimpleTooltip from '../tooltip/SimpleTooltip';\n\nexport type SidebarFullscreenToggleProps = {\n    isFullscreen?: boolean;\n    tooltip?: string;\n    onClick?: VoidFunction;\n};\n\nconst SidebarFullscreenToggle = ({ isFullscreen, tooltip, onClick = noop }: SidebarFullscreenToggleProps) => {\n    const fullscreenIconClasses = classNames(\n        'rioglyph',\n        isFullscreen ? 'rioglyph-resize-small' : 'rioglyph-resize-full'\n    );\n\n    const button = (\n        <Button bsStyle={Button.MUTED} iconOnly onClick={onClick} data-testid='sidebarFullscreenToggle'>\n            <span className={fullscreenIconClasses} />\n        </Button>\n    );\n\n    if (tooltip) {\n        return (\n            <SimpleTooltip content={tooltip} placement='bottom'>\n                {button}\n            </SimpleTooltip>\n        );\n    }\n\n    return button;\n};\n\nexport default SidebarFullscreenToggle;\n"],"names":["SidebarFullscreenToggle","isFullscreen","tooltip","onClick","noop","fullscreenIconClasses","classNames","button","jsx","Button","SimpleTooltip"],"mappings":";;;;;AAYA,MAAMA,IAA0B,CAAC,EAAE,cAAAC,GAAc,SAAAC,GAAS,SAAAC,IAAUC,QAAyC;AACzG,QAAMC,IAAwBC;AAAA,IAC1B;AAAA,IACAL,IAAe,0BAA0B;AAAA,EAAA,GAGvCM,IACF,gBAAAC,EAACC,GAAA,EAAO,SAASA,EAAO,OAAO,UAAQ,IAAC,SAAAN,GAAkB,eAAY,2BAClE,UAAA,gBAAAK,EAAC,QAAA,EAAK,WAAWH,GAAuB,GAC5C;AAGJ,SAAIH,sBAEKQ,GAAA,EAAc,SAASR,GAAS,WAAU,UACtC,UAAAK,GACL,IAIDA;AACX;"}

package/components/slider/RangeSlider.js

@@ -1,7 +1,7 @@
 import { jsxs as W, jsx as c } from "react/jsx-runtime";
 import { useState as u, useEffect as Z } from "react";
-import ee from "classnames";
 import { noop as A } from "es-toolkit/compat";
+import ee from "../../utils/classNames.js";
 import { getCurrentBackgroundColor as te } from "../../utils/currentColors.js";
 const M = (r, t) => {
   const o = t <= r ? t : r, m = r >= t ? r : t;

package/components/slider/RangeSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"RangeSlider.js","sources":["../../../src/components/slider/RangeSlider.tsx"],"sourcesContent":["import React, { type ChangeEvent, type HTMLAttributes, type MouseEvent, useEffect, useState } from 'react';\nimport classNames from 'classnames';\nimport { noop } from 'es-toolkit/compat';\n\nimport { getCurrentBackgroundColor, type CurrentColor } from '../../utils/currentColors';\n\nconst getRangeValues = (valueLeft: number, valueRight: number) => {\n    const finalLeftValue = valueRight <= valueLeft ? valueRight : valueLeft;\n    const finalRightValue = valueLeft >= valueRight ? valueLeft : valueRight;\n    return [finalLeftValue, finalRightValue];\n};\n\nexport type RangeSliderProps = {\n    /**\n     * The current left value of the selected range.\n     */\n    leftValue?: number;\n\n    /**\n     * The current right value of the selected range.\n     */\n    rightValue?: number;\n\n    /**\n     * The lower limit.\n     *\n     * @default 0\n     */\n    minValue: number;\n\n    /**\n     * The upper limit.\n     *\n     * @default Number.MAX_VALUE\n     */\n    maxValue: number;\n\n    /**\n     * Whether to show the value labels.\n     *\n     * @default false\n     */\n    valueLabels?: boolean;\n\n    /**\n     * Additional unit used for the slider value labels.\n     */\n    valueLabelUnit?: string | React.ReactNode;\n\n    /**\n     * Selector step value.\n     *\n     * @default 1\n     */\n    step?: number;\n\n    /**\n     * Defines the color of the slider.\n     *\n     * Possible values are:\n     *\n     * - `'primary'`\n     * - `'secondary'`\n     * - `'info'`\n     * - `'warning'`\n     * - `'danger'`\n     * - `'success'`\n     *\n     * @default 'primary'\n     */\n    color?: CurrentColor;\n\n    /**\n     * Disables all pointer events.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Callback to get the new value every time it changes.\n     */\n    onChange?: (newLeftValue: number, newRightValue: number) => void;\n\n    /**\n     * Callback to get the value after the slider ended dragging.\n     */\n    onDragEnd?: (newLeftValue: number, newRightValue: number) => void;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'disabled' | 'onChange' | 'onDragEnd' | 'className'>;\n\nconst RangeSlider = (props: RangeSliderProps) => {\n    const {\n        minValue = 0,\n        maxValue = Number.MAX_VALUE,\n        valueLabels = false,\n        valueLabelUnit,\n        step = 1,\n        color = 'primary',\n        leftValue,\n        rightValue,\n        className,\n        disabled = false,\n        onChange = noop,\n        onDragEnd = noop,\n        ...remainingProps\n    } = props;\n\n    const [activeLeft, setActiveLeft] = useState(false);\n    const [activeRight, setActiveRight] = useState(false);\n    const [valueLeft, setValueLeft] = useState(leftValue ? leftValue : minValue);\n    const [valueRight, setValueRight] = useState(rightValue ? rightValue : maxValue);\n    const [isChangingLeft, setIsChangingLeft] = useState(false);\n    const [isChangingRight, setIsChangingRight] = useState(false);\n\n    useEffect(() => {\n        if (valueLeft >= minValue && valueLeft <= maxValue && valueRight >= minValue && valueRight <= maxValue) {\n            setValueLeft(valueLeft);\n            setValueRight(valueRight);\n        }\n    }, [valueLeft, valueRight, minValue, maxValue]);\n\n    const changeValues = (newValues: { valueLeft?: number; valueRight?: number }) => {\n        const newValueLeft = newValues.valueLeft ? newValues.valueLeft : valueLeft;\n        const newValueRight = newValues.valueRight ? newValues.valueRight : valueRight;\n\n        setValueLeft(newValueLeft);\n        setValueRight(newValueRight);\n\n        setIsChangingLeft(!!newValues.valueLeft);\n        setIsChangingRight(!!newValues.valueRight);\n\n        const [newLeftValue, newRightValue] = getRangeValues(newValueLeft, newValueRight);\n        onChange(newLeftValue, newRightValue);\n    };\n\n    const handleChangeValueLeft = (event: ChangeEvent<HTMLInputElement>) => {\n        changeValues({ valueLeft: Number.parseInt(event.target.value, 10) });\n    };\n\n    const handleChangeValueRight = (event: ChangeEvent<HTMLInputElement>) => {\n        changeValues({ valueRight: Number.parseInt(event.target.value, 10) });\n    };\n\n    const onMouseDownLeft = () => {\n        setIsChangingLeft(true);\n        setIsChangingRight(false);\n    };\n\n    const onMouseDownRight = () => {\n        setIsChangingLeft(false);\n        setIsChangingRight(true);\n    };\n\n    const getTrackMiddlePosition = (targetWidth: number) => {\n        const trackValueLeftRelative = (valueLeft - minValue) / (maxValue - minValue);\n        const trackValueRightRelative = (valueRight - minValue) / (maxValue - minValue);\n        const trackMiddleRelative = (trackValueLeftRelative + trackValueRightRelative) / 2;\n\n        return trackMiddleRelative * targetWidth;\n    };\n\n    const onMouseMoveLeft = (event: MouseEvent<HTMLInputElement>) => {\n        const target = event.target as HTMLInputElement;\n        if (!isChangingLeft) {\n            const clientRect = target.getBoundingClientRect();\n            const mouseHover = event.clientX - clientRect.left;\n            const targetWidth = target.offsetWidth;\n\n            const trackMiddlePosition = getTrackMiddlePosition(targetWidth);\n\n            if (valueRight > valueLeft && mouseHover > trackMiddlePosition) {\n                setActiveLeft(false);\n                setActiveRight(true);\n            }\n\n            if (valueRight < valueLeft && mouseHover < trackMiddlePosition) {\n                setActiveLeft(false);\n                setActiveRight(true);\n            }\n        }\n    };\n\n    const onMouseMoveRight = (event: MouseEvent<HTMLInputElement>) => {\n        const target = event.target as HTMLInputElement;\n        if (!isChangingRight) {\n            const clientRect = target.getBoundingClientRect();\n            const mouseHover = event.clientX - clientRect.left;\n            const targetWidth = target.offsetWidth;\n\n            const trackMiddlePosition = getTrackMiddlePosition(targetWidth);\n\n            if (valueRight > valueLeft && mouseHover < trackMiddlePosition) {\n                setActiveLeft(true);\n                setActiveRight(false);\n            }\n\n            if (valueRight < valueLeft && mouseHover > trackMiddlePosition) {\n                setActiveLeft(true);\n                setActiveRight(false);\n            }\n        }\n    };\n\n    const onMouseUpLeft = () => {\n        setIsChangingLeft(false);\n        setIsChangingRight(false);\n\n        const [newLeftValue, newRightValue] = getRangeValues(valueLeft, valueRight);\n        onDragEnd(newLeftValue, newRightValue);\n    };\n\n    const onMouseUpRight = () => {\n        setIsChangingLeft(false);\n        setIsChangingRight(false);\n\n        const [newLeftValue, newRightValue] = getRangeValues(valueLeft, valueRight);\n        onDragEnd(newLeftValue, newRightValue);\n    };\n\n    const [finalLeftValue, finalRightValue] = getRangeValues(valueLeft, valueRight);\n\n    const trackWidth = (100 * (finalRightValue - finalLeftValue)) / (maxValue - minValue);\n    const trackLeft = (100 * (finalLeftValue - minValue)) / (maxValue - minValue);\n\n    const wrapperClassNames = classNames(\n        'range-slider',\n        disabled && 'disabled',\n        valueLabels && 'show-value-labels',\n        className && className\n    );\n\n    const sliderBackgroundColor = getCurrentBackgroundColor(color);\n\n    return (\n        <div {...remainingProps} className={wrapperClassNames} style={{ color: sliderBackgroundColor }}>\n            <div className='range-whole-track' />\n            <div className='range-track' style={{ width: `${trackWidth}%`, left: `${trackLeft}%` }}>\n                {valueLabels && (\n                    <div className='user-select-none'>\n                        <div className='range-value'>\n                            <span>{valueLabelUnit ? `${finalLeftValue} ${valueLabelUnit}` : finalLeftValue}</span>\n                        </div>\n                        <div className='range-value'>\n                            <span>{valueLabelUnit ? `${finalRightValue} ${valueLabelUnit}` : finalRightValue}</span>\n                        </div>\n                    </div>\n                )}\n            </div>\n            <input\n                className={`${isChangingLeft ? 'changing' : ''}`}\n                style={{ zIndex: activeLeft ? '6' : '5' }}\n                value={valueLeft}\n                min={minValue}\n                max={maxValue}\n                step={step}\n                type='range'\n                onChange={handleChangeValueLeft}\n                onMouseDown={onMouseDownLeft}\n                onMouseMove={onMouseMoveLeft}\n                onMouseUp={onMouseUpLeft}\n            />\n            <input\n                className={`${isChangingRight ? 'changing' : ''}`}\n                style={{ zIndex: activeRight ? '6' : '5' }}\n                value={valueRight}\n                min={minValue}\n                max={maxValue}\n                step={step}\n                type='range'\n                onChange={handleChangeValueRight}\n                onMouseDown={onMouseDownRight}\n                onMouseMove={onMouseMoveRight}\n                onMouseUp={onMouseUpRight}\n            />\n        </div>\n    );\n};\n\nexport default RangeSlider;\n"],"names":["getRangeValues","valueLeft","valueRight","finalLeftValue","finalRightValue","RangeSlider","props","minValue","maxValue","valueLabels","valueLabelUnit","step","color","leftValue","rightValue","className","disabled","onChange","noop","onDragEnd","remainingProps","activeLeft","setActiveLeft","useState","activeRight","setActiveRight","setValueLeft","setValueRight","isChangingLeft","setIsChangingLeft","isChangingRight","setIsChangingRight","useEffect","changeValues","newValues","newValueLeft","newValueRight","newLeftValue","newRightValue","handleChangeValueLeft","event","handleChangeValueRight","onMouseDownLeft","onMouseDownRight","getTrackMiddlePosition","targetWidth","trackValueLeftRelative","trackValueRightRelative","onMouseMoveLeft","target","clientRect","mouseHover","trackMiddlePosition","onMouseMoveRight","onMouseUpLeft","onMouseUpRight","trackWidth","trackLeft","wrapperClassNames","classNames","sliderBackgroundColor","getCurrentBackgroundColor","jsxs","jsx"],"mappings":"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"}
+{"version":3,"file":"RangeSlider.js","sources":["../../../src/components/slider/RangeSlider.tsx"],"sourcesContent":["import React, { type ChangeEvent, type HTMLAttributes, type MouseEvent, useEffect, useState } from 'react';\nimport { noop } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport { getCurrentBackgroundColor, type CurrentColor } from '../../utils/currentColors';\n\nconst getRangeValues = (valueLeft: number, valueRight: number) => {\n    const finalLeftValue = valueRight <= valueLeft ? valueRight : valueLeft;\n    const finalRightValue = valueLeft >= valueRight ? valueLeft : valueRight;\n    return [finalLeftValue, finalRightValue];\n};\n\nexport type RangeSliderProps = {\n    /**\n     * The current left value of the selected range.\n     */\n    leftValue?: number;\n\n    /**\n     * The current right value of the selected range.\n     */\n    rightValue?: number;\n\n    /**\n     * The lower limit.\n     *\n     * @default 0\n     */\n    minValue: number;\n\n    /**\n     * The upper limit.\n     *\n     * @default Number.MAX_VALUE\n     */\n    maxValue: number;\n\n    /**\n     * Whether to show the value labels.\n     *\n     * @default false\n     */\n    valueLabels?: boolean;\n\n    /**\n     * Additional unit used for the slider value labels.\n     */\n    valueLabelUnit?: string | React.ReactNode;\n\n    /**\n     * Selector step value.\n     *\n     * @default 1\n     */\n    step?: number;\n\n    /**\n     * Defines the color of the slider.\n     *\n     * Possible values are:\n     *\n     * - `'primary'`\n     * - `'secondary'`\n     * - `'info'`\n     * - `'warning'`\n     * - `'danger'`\n     * - `'success'`\n     *\n     * @default 'primary'\n     */\n    color?: CurrentColor;\n\n    /**\n     * Disables all pointer events.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Callback to get the new value every time it changes.\n     */\n    onChange?: (newLeftValue: number, newRightValue: number) => void;\n\n    /**\n     * Callback to get the value after the slider ended dragging.\n     */\n    onDragEnd?: (newLeftValue: number, newRightValue: number) => void;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'disabled' | 'onChange' | 'onDragEnd' | 'className'>;\n\nconst RangeSlider = (props: RangeSliderProps) => {\n    const {\n        minValue = 0,\n        maxValue = Number.MAX_VALUE,\n        valueLabels = false,\n        valueLabelUnit,\n        step = 1,\n        color = 'primary',\n        leftValue,\n        rightValue,\n        className,\n        disabled = false,\n        onChange = noop,\n        onDragEnd = noop,\n        ...remainingProps\n    } = props;\n\n    const [activeLeft, setActiveLeft] = useState(false);\n    const [activeRight, setActiveRight] = useState(false);\n    const [valueLeft, setValueLeft] = useState(leftValue ? leftValue : minValue);\n    const [valueRight, setValueRight] = useState(rightValue ? rightValue : maxValue);\n    const [isChangingLeft, setIsChangingLeft] = useState(false);\n    const [isChangingRight, setIsChangingRight] = useState(false);\n\n    useEffect(() => {\n        if (valueLeft >= minValue && valueLeft <= maxValue && valueRight >= minValue && valueRight <= maxValue) {\n            setValueLeft(valueLeft);\n            setValueRight(valueRight);\n        }\n    }, [valueLeft, valueRight, minValue, maxValue]);\n\n    const changeValues = (newValues: { valueLeft?: number; valueRight?: number }) => {\n        const newValueLeft = newValues.valueLeft ? newValues.valueLeft : valueLeft;\n        const newValueRight = newValues.valueRight ? newValues.valueRight : valueRight;\n\n        setValueLeft(newValueLeft);\n        setValueRight(newValueRight);\n\n        setIsChangingLeft(!!newValues.valueLeft);\n        setIsChangingRight(!!newValues.valueRight);\n\n        const [newLeftValue, newRightValue] = getRangeValues(newValueLeft, newValueRight);\n        onChange(newLeftValue, newRightValue);\n    };\n\n    const handleChangeValueLeft = (event: ChangeEvent<HTMLInputElement>) => {\n        changeValues({ valueLeft: Number.parseInt(event.target.value, 10) });\n    };\n\n    const handleChangeValueRight = (event: ChangeEvent<HTMLInputElement>) => {\n        changeValues({ valueRight: Number.parseInt(event.target.value, 10) });\n    };\n\n    const onMouseDownLeft = () => {\n        setIsChangingLeft(true);\n        setIsChangingRight(false);\n    };\n\n    const onMouseDownRight = () => {\n        setIsChangingLeft(false);\n        setIsChangingRight(true);\n    };\n\n    const getTrackMiddlePosition = (targetWidth: number) => {\n        const trackValueLeftRelative = (valueLeft - minValue) / (maxValue - minValue);\n        const trackValueRightRelative = (valueRight - minValue) / (maxValue - minValue);\n        const trackMiddleRelative = (trackValueLeftRelative + trackValueRightRelative) / 2;\n\n        return trackMiddleRelative * targetWidth;\n    };\n\n    const onMouseMoveLeft = (event: MouseEvent<HTMLInputElement>) => {\n        const target = event.target as HTMLInputElement;\n        if (!isChangingLeft) {\n            const clientRect = target.getBoundingClientRect();\n            const mouseHover = event.clientX - clientRect.left;\n            const targetWidth = target.offsetWidth;\n\n            const trackMiddlePosition = getTrackMiddlePosition(targetWidth);\n\n            if (valueRight > valueLeft && mouseHover > trackMiddlePosition) {\n                setActiveLeft(false);\n                setActiveRight(true);\n            }\n\n            if (valueRight < valueLeft && mouseHover < trackMiddlePosition) {\n                setActiveLeft(false);\n                setActiveRight(true);\n            }\n        }\n    };\n\n    const onMouseMoveRight = (event: MouseEvent<HTMLInputElement>) => {\n        const target = event.target as HTMLInputElement;\n        if (!isChangingRight) {\n            const clientRect = target.getBoundingClientRect();\n            const mouseHover = event.clientX - clientRect.left;\n            const targetWidth = target.offsetWidth;\n\n            const trackMiddlePosition = getTrackMiddlePosition(targetWidth);\n\n            if (valueRight > valueLeft && mouseHover < trackMiddlePosition) {\n                setActiveLeft(true);\n                setActiveRight(false);\n            }\n\n            if (valueRight < valueLeft && mouseHover > trackMiddlePosition) {\n                setActiveLeft(true);\n                setActiveRight(false);\n            }\n        }\n    };\n\n    const onMouseUpLeft = () => {\n        setIsChangingLeft(false);\n        setIsChangingRight(false);\n\n        const [newLeftValue, newRightValue] = getRangeValues(valueLeft, valueRight);\n        onDragEnd(newLeftValue, newRightValue);\n    };\n\n    const onMouseUpRight = () => {\n        setIsChangingLeft(false);\n        setIsChangingRight(false);\n\n        const [newLeftValue, newRightValue] = getRangeValues(valueLeft, valueRight);\n        onDragEnd(newLeftValue, newRightValue);\n    };\n\n    const [finalLeftValue, finalRightValue] = getRangeValues(valueLeft, valueRight);\n\n    const trackWidth = (100 * (finalRightValue - finalLeftValue)) / (maxValue - minValue);\n    const trackLeft = (100 * (finalLeftValue - minValue)) / (maxValue - minValue);\n\n    const wrapperClassNames = classNames(\n        'range-slider',\n        disabled && 'disabled',\n        valueLabels && 'show-value-labels',\n        className && className\n    );\n\n    const sliderBackgroundColor = getCurrentBackgroundColor(color);\n\n    return (\n        <div {...remainingProps} className={wrapperClassNames} style={{ color: sliderBackgroundColor }}>\n            <div className='range-whole-track' />\n            <div className='range-track' style={{ width: `${trackWidth}%`, left: `${trackLeft}%` }}>\n                {valueLabels && (\n                    <div className='user-select-none'>\n                        <div className='range-value'>\n                            <span>{valueLabelUnit ? `${finalLeftValue} ${valueLabelUnit}` : finalLeftValue}</span>\n                        </div>\n                        <div className='range-value'>\n                            <span>{valueLabelUnit ? `${finalRightValue} ${valueLabelUnit}` : finalRightValue}</span>\n                        </div>\n                    </div>\n                )}\n            </div>\n            <input\n                className={`${isChangingLeft ? 'changing' : ''}`}\n                style={{ zIndex: activeLeft ? '6' : '5' }}\n                value={valueLeft}\n                min={minValue}\n                max={maxValue}\n                step={step}\n                type='range'\n                onChange={handleChangeValueLeft}\n                onMouseDown={onMouseDownLeft}\n                onMouseMove={onMouseMoveLeft}\n                onMouseUp={onMouseUpLeft}\n            />\n            <input\n                className={`${isChangingRight ? 'changing' : ''}`}\n                style={{ zIndex: activeRight ? '6' : '5' }}\n                value={valueRight}\n                min={minValue}\n                max={maxValue}\n                step={step}\n                type='range'\n                onChange={handleChangeValueRight}\n                onMouseDown={onMouseDownRight}\n                onMouseMove={onMouseMoveRight}\n                onMouseUp={onMouseUpRight}\n            />\n        </div>\n    );\n};\n\nexport default RangeSlider;\n"],"names":["getRangeValues","valueLeft","valueRight","finalLeftValue","finalRightValue","RangeSlider","props","minValue","maxValue","valueLabels","valueLabelUnit","step","color","leftValue","rightValue","className","disabled","onChange","noop","onDragEnd","remainingProps","activeLeft","setActiveLeft","useState","activeRight","setActiveRight","setValueLeft","setValueRight","isChangingLeft","setIsChangingLeft","isChangingRight","setIsChangingRight","useEffect","changeValues","newValues","newValueLeft","newValueRight","newLeftValue","newRightValue","handleChangeValueLeft","event","handleChangeValueRight","onMouseDownLeft","onMouseDownRight","getTrackMiddlePosition","targetWidth","trackValueLeftRelative","trackValueRightRelative","onMouseMoveLeft","target","clientRect","mouseHover","trackMiddlePosition","onMouseMoveRight","onMouseUpLeft","onMouseUpRight","trackWidth","trackLeft","wrapperClassNames","classNames","sliderBackgroundColor","getCurrentBackgroundColor","jsxs","jsx"],"mappings":";;;;;AAMA,MAAMA,IAAiB,CAACC,GAAmBC,MAAuB;AAC9D,QAAMC,IAAiBD,KAAcD,IAAYC,IAAaD,GACxDG,IAAkBH,KAAaC,IAAaD,IAAYC;AAC9D,SAAO,CAACC,GAAgBC,CAAe;AAC3C,GAqFMC,KAAc,CAACC,MAA4B;AAC7C,QAAM;AAAA,IACF,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW,OAAO;AAAA,IAClB,aAAAC,IAAc;AAAA,IACd,gBAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,WAAAC;AAAA,IACA,YAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAWC;AAAA,IACX,WAAAC,IAAYD;AAAA,IACZ,GAAGE;AAAA,EAAA,IACHd,GAEE,CAACe,GAAYC,CAAa,IAAIC,EAAS,EAAK,GAC5C,CAACC,GAAaC,CAAc,IAAIF,EAAS,EAAK,GAC9C,CAACtB,GAAWyB,CAAY,IAAIH,EAASV,KAAwBN,CAAQ,GACrE,CAACL,GAAYyB,CAAa,IAAIJ,EAAST,KAA0BN,CAAQ,GACzE,CAACoB,GAAgBC,CAAiB,IAAIN,EAAS,EAAK,GACpD,CAACO,GAAiBC,CAAkB,IAAIR,EAAS,EAAK;AAE5D,EAAAS,EAAU,MAAM;AACZ,IAAI/B,KAAaM,KAAYN,KAAaO,KAAYN,KAAcK,KAAYL,KAAcM,MAC1FkB,EAAazB,CAAS,GACtB0B,EAAczB,CAAU;AAAA,EAEhC,GAAG,CAACD,GAAWC,GAAYK,GAAUC,CAAQ,CAAC;AAE9C,QAAMyB,IAAe,CAACC,MAA2D;AAC7E,UAAMC,IAAeD,EAAU,YAAYA,EAAU,YAAYjC,GAC3DmC,IAAgBF,EAAU,aAAaA,EAAU,aAAahC;AAEpE,IAAAwB,EAAaS,CAAY,GACzBR,EAAcS,CAAa,GAE3BP,EAAkB,CAAC,CAACK,EAAU,SAAS,GACvCH,EAAmB,CAAC,CAACG,EAAU,UAAU;AAEzC,UAAM,CAACG,GAAcC,CAAa,IAAItC,EAAemC,GAAcC,CAAa;AAChF,IAAAnB,EAASoB,GAAcC,CAAa;AAAA,EACxC,GAEMC,IAAwB,CAACC,MAAyC;AACpE,IAAAP,EAAa,EAAE,WAAW,OAAO,SAASO,EAAM,OAAO,OAAO,EAAE,GAAG;AAAA,EACvE,GAEMC,IAAyB,CAACD,MAAyC;AACrE,IAAAP,EAAa,EAAE,YAAY,OAAO,SAASO,EAAM,OAAO,OAAO,EAAE,GAAG;AAAA,EACxE,GAEME,IAAkB,MAAM;AAC1B,IAAAb,EAAkB,EAAI,GACtBE,EAAmB,EAAK;AAAA,EAC5B,GAEMY,IAAmB,MAAM;AAC3B,IAAAd,EAAkB,EAAK,GACvBE,EAAmB,EAAI;AAAA,EAC3B,GAEMa,IAAyB,CAACC,MAAwB;AACpD,UAAMC,KAA0B7C,IAAYM,MAAaC,IAAWD,IAC9DwC,KAA2B7C,IAAaK,MAAaC,IAAWD;AAGtE,YAF6BuC,IAAyBC,KAA2B,IAEpDF;AAAA,EACjC,GAEMG,IAAkB,CAACR,MAAwC;AAC7D,UAAMS,IAAST,EAAM;AACrB,QAAI,CAACZ,GAAgB;AACjB,YAAMsB,IAAaD,EAAO,sBAAA,GACpBE,IAAaX,EAAM,UAAUU,EAAW,MACxCL,IAAcI,EAAO,aAErBG,IAAsBR,EAAuBC,CAAW;AAE9D,MAAI3C,IAAaD,KAAakD,IAAaC,MACvC9B,EAAc,EAAK,GACnBG,EAAe,EAAI,IAGnBvB,IAAaD,KAAakD,IAAaC,MACvC9B,EAAc,EAAK,GACnBG,EAAe,EAAI;AAAA,IAE3B;AAAA,EACJ,GAEM4B,IAAmB,CAACb,MAAwC;AAC9D,UAAMS,IAAST,EAAM;AACrB,QAAI,CAACV,GAAiB;AAClB,YAAMoB,IAAaD,EAAO,sBAAA,GACpBE,IAAaX,EAAM,UAAUU,EAAW,MACxCL,IAAcI,EAAO,aAErBG,IAAsBR,EAAuBC,CAAW;AAE9D,MAAI3C,IAAaD,KAAakD,IAAaC,MACvC9B,EAAc,EAAI,GAClBG,EAAe,EAAK,IAGpBvB,IAAaD,KAAakD,IAAaC,MACvC9B,EAAc,EAAI,GAClBG,EAAe,EAAK;AAAA,IAE5B;AAAA,EACJ,GAEM6B,IAAgB,MAAM;AACxB,IAAAzB,EAAkB,EAAK,GACvBE,EAAmB,EAAK;AAExB,UAAM,CAACM,GAAcC,CAAa,IAAItC,EAAeC,GAAWC,CAAU;AAC1E,IAAAiB,EAAUkB,GAAcC,CAAa;AAAA,EACzC,GAEMiB,IAAiB,MAAM;AACzB,IAAA1B,EAAkB,EAAK,GACvBE,EAAmB,EAAK;AAExB,UAAM,CAACM,GAAcC,CAAa,IAAItC,EAAeC,GAAWC,CAAU;AAC1E,IAAAiB,EAAUkB,GAAcC,CAAa;AAAA,EACzC,GAEM,CAACnC,GAAgBC,CAAe,IAAIJ,EAAeC,GAAWC,CAAU,GAExEsD,IAAc,OAAOpD,IAAkBD,MAAoBK,IAAWD,IACtEkD,IAAa,OAAOtD,IAAiBI,MAAcC,IAAWD,IAE9DmD,IAAoBC;AAAA,IACtB;AAAA,IACA3C,KAAY;AAAA,IACZP,KAAe;AAAA,IACfM,KAAaA;AAAA,EAAA,GAGX6C,IAAwBC,GAA0BjD,CAAK;AAE7D,SACI,gBAAAkD,EAAC,OAAA,EAAK,GAAG1C,GAAgB,WAAWsC,GAAmB,OAAO,EAAE,OAAOE,EAAA,GACnE,UAAA;AAAA,IAAA,gBAAAG,EAAC,OAAA,EAAI,WAAU,oBAAA,CAAoB;AAAA,sBAClC,OAAA,EAAI,WAAU,eAAc,OAAO,EAAE,OAAO,GAAGP,CAAU,KAAK,MAAM,GAAGC,CAAS,IAAA,GAC5E,eACG,gBAAAK,EAAC,OAAA,EAAI,WAAU,oBACX,UAAA;AAAA,MAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,eACX,UAAA,gBAAAA,EAAC,QAAA,EAAM,UAAArD,IAAiB,GAAGP,CAAc,IAAIO,CAAc,KAAKP,EAAA,CAAe,GACnF;AAAA,MACA,gBAAA4D,EAAC,OAAA,EAAI,WAAU,eACX,UAAA,gBAAAA,EAAC,QAAA,EAAM,UAAArD,IAAiB,GAAGN,CAAe,IAAIM,CAAc,KAAKN,GAAgB,EAAA,CACrF;AAAA,IAAA,EAAA,CACJ,EAAA,CAER;AAAA,IACA,gBAAA2D;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,GAAGnC,IAAiB,aAAa,EAAE;AAAA,QAC9C,OAAO,EAAE,QAAQP,IAAa,MAAM,IAAA;AAAA,QACpC,OAAOpB;AAAA,QACP,KAAKM;AAAA,QACL,KAAKC;AAAA,QACL,MAAAG;AAAA,QACA,MAAK;AAAA,QACL,UAAU4B;AAAA,QACV,aAAaG;AAAA,QACb,aAAaM;AAAA,QACb,WAAWM;AAAA,MAAA;AAAA,IAAA;AAAA,IAEf,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,GAAGjC,IAAkB,aAAa,EAAE;AAAA,QAC/C,OAAO,EAAE,QAAQN,IAAc,MAAM,IAAA;AAAA,QACrC,OAAOtB;AAAA,QACP,KAAKK;AAAA,QACL,KAAKC;AAAA,QACL,MAAAG;AAAA,QACA,MAAK;AAAA,QACL,UAAU8B;AAAA,QACV,aAAaE;AAAA,QACb,aAAaU;AAAA,QACb,WAAWE;AAAA,MAAA;AAAA,IAAA;AAAA,EACf,GACJ;AAER;"}

package/components/slider/Slider.js

@@ -1,7 +1,7 @@
 import { jsxs as M, jsx as l } from "react/jsx-runtime";
 import { useState as m, useEffect as U } from "react";
-import j from "classnames";
 import { noop as d } from "es-toolkit/compat";
+import j from "../../utils/classNames.js";
 import { getCurrentBackgroundColor as A } from "../../utils/currentColors.js";
 const X = (g) => {
   const {

package/components/slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../../../src/components/slider/Slider.tsx"],"sourcesContent":["import React, { type ChangeEvent, type HTMLAttributes, useEffect, useState } from 'react';\nimport classNames from 'classnames';\nimport { noop } from 'es-toolkit/compat';\n\nimport { getCurrentBackgroundColor, type CurrentColor } from '../../utils/currentColors';\n\nexport type SliderProps = {\n    /**\n     * The current value.\n     *\n     * @default 0\n     */\n    value?: number;\n\n    /**\n     * The lower limit.\n     *\n     * @default 0\n     */\n    minValue?: number;\n\n    /**\n     * The upper limit.\n     *\n     * @default Number.MAX_VALUE\n     */\n    maxValue?: number;\n\n    /**\n     * Whether to show the value labels.\n     *\n     * @default false\n     */\n    valueLabels?: boolean;\n\n    /**\n     * Additional unit used for the slider value label.\n     */\n    valueLabelUnit?: string | React.ReactNode;\n\n    /**\n     * Whether to hide the dark-colored value bar.\n     *\n     * @default false\n     */\n    hideValueBar?: boolean;\n\n    /**\n     * Whether to show larger value labels instead of the normal ones.\n     *\n     * @default false\n     */\n    largeValueLabels?: boolean;\n\n    /**\n     * Selector step value.\n     *\n     * @default 1\n     */\n    step?: number;\n\n    /**\n     * Defines the color of the slider.\n     *\n     * Possible values are:\n     *\n     * - `'primary'`\n     * - `'secondary'`\n     * - `'info'`\n     * - `'warning'`\n     * - `'danger'`\n     * - `'success'`\n     *\n     * @default 'primary'\n     */\n    color?: CurrentColor;\n\n    /**\n     * Disables all pointer events.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Callback to get the new value every time it changes.\n     */\n    onChange?: (newValue: number) => void;\n\n    /**\n     * Callback to get the value after the slider ended dragging.\n     */\n    onDragEnd?: (newValue: number) => void;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'disabled' | 'onChange' | 'onDragEnd' | 'className'>;\n\nconst Slider = (props: SliderProps) => {\n    const {\n        value = 0,\n        minValue = 0,\n        maxValue = Number.MAX_VALUE,\n        valueLabels = false,\n        valueLabelUnit,\n        largeValueLabels = false,\n        hideValueBar = false,\n        color = 'primary',\n        step = 1,\n        onChange = noop,\n        onDragEnd = noop,\n        className,\n        disabled = false,\n        ...remainingProps\n    } = props;\n\n    const [currentValue, setCurrentValue] = useState(value ? value : minValue);\n    const [isChanging, setIsChanging] = useState(false);\n\n    useEffect(() => {\n        if (value >= minValue && value <= maxValue) {\n            setCurrentValue(value);\n        }\n    }, [value, minValue, maxValue]);\n\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n        const newValue = Number.parseInt(event.target.value, 10);\n        setCurrentValue(newValue);\n        setIsChanging(true);\n        onChange(newValue);\n    };\n\n    const onMouseUp = () => {\n        setIsChanging(false);\n        onDragEnd(currentValue);\n    };\n\n    const onMouseDown = () => {\n        setIsChanging(true);\n    };\n\n    const wrapperClassNames = classNames(\n        'range-slider',\n        disabled && 'disabled',\n        valueLabels && 'show-value-labels',\n        hideValueBar && 'hide-value-bar',\n        largeValueLabels && 'large-value-labels',\n        className && className\n    );\n\n    const trackWidth = (100 * (currentValue - minValue)) / (maxValue - minValue);\n\n    const sliderBackgroundColor = getCurrentBackgroundColor(color);\n\n    return (\n        <div {...remainingProps} className={wrapperClassNames} style={{ color: sliderBackgroundColor }}>\n            <div className='range-whole-track' />\n            <div className='range-track' style={{ width: `${trackWidth}%` }}>\n                {valueLabels && (\n                    <div className='range-value'>\n                        <span>{valueLabelUnit ? `${currentValue} ${valueLabelUnit}` : currentValue}</span>\n                    </div>\n                )}\n            </div>\n            <input\n                className={`${isChanging ? 'changing' : ''}`}\n                value={currentValue}\n                min={minValue}\n                max={maxValue}\n                step={step}\n                type='range'\n                onChange={handleChange}\n                onMouseDown={onMouseDown}\n                onMouseUp={onMouseUp}\n            />\n        </div>\n    );\n};\n\nexport default Slider;\n"],"names":["Slider","props","value","minValue","maxValue","valueLabels","valueLabelUnit","largeValueLabels","hideValueBar","color","step","onChange","noop","onDragEnd","className","disabled","remainingProps","currentValue","setCurrentValue","useState","isChanging","setIsChanging","useEffect","handleChange","event","newValue","onMouseUp","onMouseDown","wrapperClassNames","classNames","trackWidth","sliderBackgroundColor","getCurrentBackgroundColor","jsxs","jsx"],"mappings":";;;;;AAoGA,MAAMA,IAAS,CAACC,MAAuB;AACnC,QAAM;AAAA,IACF,OAAAC,IAAQ;AAAA,IACR,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW,OAAO;AAAA,IAClB,aAAAC,IAAc;AAAA,IACd,gBAAAC;AAAA,IACA,kBAAAC,IAAmB;AAAA,IACnB,cAAAC,IAAe;AAAA,IACf,OAAAC,IAAQ;AAAA,IACR,MAAAC,IAAO;AAAA,IACP,UAAAC,IAAWC;AAAA,IACX,WAAAC,IAAYD;AAAA,IACZ,WAAAE;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,GAAGC;AAAA,EAAA,IACHf,GAEE,CAACgB,GAAcC,CAAe,IAAIC,EAASjB,KAAgBC,CAAQ,GACnE,CAACiB,GAAYC,CAAa,IAAIF,EAAS,EAAK;AAElD,EAAAG,EAAU,MAAM;AACZ,IAAIpB,KAASC,KAAYD,KAASE,KAC9Bc,EAAgBhB,CAAK;AAAA,EAE7B,GAAG,CAACA,GAAOC,GAAUC,CAAQ,CAAC;AAE9B,QAAMmB,IAAe,CAACC,MAAyC;AAC3D,UAAMC,IAAW,OAAO,SAASD,EAAM,OAAO,OAAO,EAAE;AACvD,IAAAN,EAAgBO,CAAQ,GACxBJ,EAAc,EAAI,GAClBV,EAASc,CAAQ;AAAA,EACrB,GAEMC,IAAY,MAAM;AACpB,IAAAL,EAAc,EAAK,GACnBR,EAAUI,CAAY;AAAA,EAC1B,GAEMU,IAAc,MAAM;AACtB,IAAAN,EAAc,EAAI;AAAA,EACtB,GAEMO,IAAoBC;AAAA,IACtB;AAAA,IACAd,KAAY;AAAA,IACZV,KAAe;AAAA,IACfG,KAAgB;AAAA,IAChBD,KAAoB;AAAA,IACpBO,KAAaA;AAAA,EAAA,GAGXgB,IAAc,OAAOb,IAAed,MAAcC,IAAWD,IAE7D4B,IAAwBC,EAA0BvB,CAAK;AAE7D,SACI,gBAAAwB,EAAC,OAAA,EAAK,GAAGjB,GAAgB,WAAWY,GAAmB,OAAO,EAAE,OAAOG,EAAA,GACnE,UAAA;AAAA,IAAA,gBAAAG,EAAC,OAAA,EAAI,WAAU,oBAAA,CAAoB;AAAA,IACnC,gBAAAA,EAAC,OAAA,EAAI,WAAU,eAAc,OAAO,EAAE,OAAO,GAAGJ,CAAU,IAAA,GACrD,UAAAzB,KACG,gBAAA6B,EAAC,SAAI,WAAU,eACX,UAAA,gBAAAA,EAAC,QAAA,EAAM,UAAA5B,IAAiB,GAAGW,CAAY,IAAIX,CAAc,KAAKW,EAAA,CAAa,EAAA,CAC/E,GAER;AAAA,IACA,gBAAAiB;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,GAAGd,IAAa,aAAa,EAAE;AAAA,QAC1C,OAAOH;AAAA,QACP,KAAKd;AAAA,QACL,KAAKC;AAAA,QACL,MAAAM;AAAA,QACA,MAAK;AAAA,QACL,UAAUa;AAAA,QACV,aAAAI;AAAA,QACA,WAAAD;AAAA,MAAA;AAAA,IAAA;AAAA,EACJ,GACJ;AAER;"}
+{"version":3,"file":"Slider.js","sources":["../../../src/components/slider/Slider.tsx"],"sourcesContent":["import React, { type ChangeEvent, type HTMLAttributes, useEffect, useState } from 'react';\nimport { noop } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport { getCurrentBackgroundColor, type CurrentColor } from '../../utils/currentColors';\n\nexport type SliderProps = {\n    /**\n     * The current value.\n     *\n     * @default 0\n     */\n    value?: number;\n\n    /**\n     * The lower limit.\n     *\n     * @default 0\n     */\n    minValue?: number;\n\n    /**\n     * The upper limit.\n     *\n     * @default Number.MAX_VALUE\n     */\n    maxValue?: number;\n\n    /**\n     * Whether to show the value labels.\n     *\n     * @default false\n     */\n    valueLabels?: boolean;\n\n    /**\n     * Additional unit used for the slider value label.\n     */\n    valueLabelUnit?: string | React.ReactNode;\n\n    /**\n     * Whether to hide the dark-colored value bar.\n     *\n     * @default false\n     */\n    hideValueBar?: boolean;\n\n    /**\n     * Whether to show larger value labels instead of the normal ones.\n     *\n     * @default false\n     */\n    largeValueLabels?: boolean;\n\n    /**\n     * Selector step value.\n     *\n     * @default 1\n     */\n    step?: number;\n\n    /**\n     * Defines the color of the slider.\n     *\n     * Possible values are:\n     *\n     * - `'primary'`\n     * - `'secondary'`\n     * - `'info'`\n     * - `'warning'`\n     * - `'danger'`\n     * - `'success'`\n     *\n     * @default 'primary'\n     */\n    color?: CurrentColor;\n\n    /**\n     * Disables all pointer events.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Callback to get the new value every time it changes.\n     */\n    onChange?: (newValue: number) => void;\n\n    /**\n     * Callback to get the value after the slider ended dragging.\n     */\n    onDragEnd?: (newValue: number) => void;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'disabled' | 'onChange' | 'onDragEnd' | 'className'>;\n\nconst Slider = (props: SliderProps) => {\n    const {\n        value = 0,\n        minValue = 0,\n        maxValue = Number.MAX_VALUE,\n        valueLabels = false,\n        valueLabelUnit,\n        largeValueLabels = false,\n        hideValueBar = false,\n        color = 'primary',\n        step = 1,\n        onChange = noop,\n        onDragEnd = noop,\n        className,\n        disabled = false,\n        ...remainingProps\n    } = props;\n\n    const [currentValue, setCurrentValue] = useState(value ? value : minValue);\n    const [isChanging, setIsChanging] = useState(false);\n\n    useEffect(() => {\n        if (value >= minValue && value <= maxValue) {\n            setCurrentValue(value);\n        }\n    }, [value, minValue, maxValue]);\n\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n        const newValue = Number.parseInt(event.target.value, 10);\n        setCurrentValue(newValue);\n        setIsChanging(true);\n        onChange(newValue);\n    };\n\n    const onMouseUp = () => {\n        setIsChanging(false);\n        onDragEnd(currentValue);\n    };\n\n    const onMouseDown = () => {\n        setIsChanging(true);\n    };\n\n    const wrapperClassNames = classNames(\n        'range-slider',\n        disabled && 'disabled',\n        valueLabels && 'show-value-labels',\n        hideValueBar && 'hide-value-bar',\n        largeValueLabels && 'large-value-labels',\n        className && className\n    );\n\n    const trackWidth = (100 * (currentValue - minValue)) / (maxValue - minValue);\n\n    const sliderBackgroundColor = getCurrentBackgroundColor(color);\n\n    return (\n        <div {...remainingProps} className={wrapperClassNames} style={{ color: sliderBackgroundColor }}>\n            <div className='range-whole-track' />\n            <div className='range-track' style={{ width: `${trackWidth}%` }}>\n                {valueLabels && (\n                    <div className='range-value'>\n                        <span>{valueLabelUnit ? `${currentValue} ${valueLabelUnit}` : currentValue}</span>\n                    </div>\n                )}\n            </div>\n            <input\n                className={`${isChanging ? 'changing' : ''}`}\n                value={currentValue}\n                min={minValue}\n                max={maxValue}\n                step={step}\n                type='range'\n                onChange={handleChange}\n                onMouseDown={onMouseDown}\n                onMouseUp={onMouseUp}\n            />\n        </div>\n    );\n};\n\nexport default Slider;\n"],"names":["Slider","props","value","minValue","maxValue","valueLabels","valueLabelUnit","largeValueLabels","hideValueBar","color","step","onChange","noop","onDragEnd","className","disabled","remainingProps","currentValue","setCurrentValue","useState","isChanging","setIsChanging","useEffect","handleChange","event","newValue","onMouseUp","onMouseDown","wrapperClassNames","classNames","trackWidth","sliderBackgroundColor","getCurrentBackgroundColor","jsxs","jsx"],"mappings":";;;;;AAoGA,MAAMA,IAAS,CAACC,MAAuB;AACnC,QAAM;AAAA,IACF,OAAAC,IAAQ;AAAA,IACR,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW,OAAO;AAAA,IAClB,aAAAC,IAAc;AAAA,IACd,gBAAAC;AAAA,IACA,kBAAAC,IAAmB;AAAA,IACnB,cAAAC,IAAe;AAAA,IACf,OAAAC,IAAQ;AAAA,IACR,MAAAC,IAAO;AAAA,IACP,UAAAC,IAAWC;AAAA,IACX,WAAAC,IAAYD;AAAA,IACZ,WAAAE;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,GAAGC;AAAA,EAAA,IACHf,GAEE,CAACgB,GAAcC,CAAe,IAAIC,EAASjB,KAAgBC,CAAQ,GACnE,CAACiB,GAAYC,CAAa,IAAIF,EAAS,EAAK;AAElD,EAAAG,EAAU,MAAM;AACZ,IAAIpB,KAASC,KAAYD,KAASE,KAC9Bc,EAAgBhB,CAAK;AAAA,EAE7B,GAAG,CAACA,GAAOC,GAAUC,CAAQ,CAAC;AAE9B,QAAMmB,IAAe,CAACC,MAAyC;AAC3D,UAAMC,IAAW,OAAO,SAASD,EAAM,OAAO,OAAO,EAAE;AACvD,IAAAN,EAAgBO,CAAQ,GACxBJ,EAAc,EAAI,GAClBV,EAASc,CAAQ;AAAA,EACrB,GAEMC,IAAY,MAAM;AACpB,IAAAL,EAAc,EAAK,GACnBR,EAAUI,CAAY;AAAA,EAC1B,GAEMU,IAAc,MAAM;AACtB,IAAAN,EAAc,EAAI;AAAA,EACtB,GAEMO,IAAoBC;AAAA,IACtB;AAAA,IACAd,KAAY;AAAA,IACZV,KAAe;AAAA,IACfG,KAAgB;AAAA,IAChBD,KAAoB;AAAA,IACpBO,KAAaA;AAAA,EAAA,GAGXgB,IAAc,OAAOb,IAAed,MAAcC,IAAWD,IAE7D4B,IAAwBC,EAA0BvB,CAAK;AAE7D,SACI,gBAAAwB,EAAC,OAAA,EAAK,GAAGjB,GAAgB,WAAWY,GAAmB,OAAO,EAAE,OAAOG,EAAA,GACnE,UAAA;AAAA,IAAA,gBAAAG,EAAC,OAAA,EAAI,WAAU,oBAAA,CAAoB;AAAA,IACnC,gBAAAA,EAAC,OAAA,EAAI,WAAU,eAAc,OAAO,EAAE,OAAO,GAAGJ,CAAU,IAAA,GACrD,UAAAzB,KACG,gBAAA6B,EAAC,SAAI,WAAU,eACX,UAAA,gBAAAA,EAAC,QAAA,EAAM,UAAA5B,IAAiB,GAAGW,CAAY,IAAIX,CAAc,KAAKW,EAAA,CAAa,EAAA,CAC/E,GAER;AAAA,IACA,gBAAAiB;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,GAAGd,IAAa,aAAa,EAAE;AAAA,QAC1C,OAAOH;AAAA,QACP,KAAKd;AAAA,QACL,KAAKC;AAAA,QACL,MAAAM;AAAA,QACA,MAAK;AAAA,QACL,UAAUa;AAAA,QACV,aAAAI;AAAA,QACA,WAAAD;AAAA,MAAA;AAAA,IAAA;AAAA,EACJ,GACJ;AAER;"}

package/components/smoothScrollbars/SmoothScrollbars.js

@@ -1,8 +1,8 @@
 import { jsx as e } from "react/jsx-runtime";
 import { forwardRef as R, useRef as n, useImperativeHandle as S, useEffect as V } from "react";
 import { Scrollbars as I } from "react-custom-scrollbars-4";
-import s from "classnames";
 import { noop as O, debounce as x } from "es-toolkit/function";
+import s from "../../utils/classNames.js";
 const E = 100, P = R(
   (i, m) => {
     const {

package/components/smoothScrollbars/SmoothScrollbars.js.map

@@ -1 +1 @@
-{"version":3,"file":"SmoothScrollbars.js","sources":["../../../src/components/smoothScrollbars/SmoothScrollbars.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    type ForwardedRef,\n    type PropsWithChildren,\n} from 'react';\nimport { Scrollbars } from 'react-custom-scrollbars-4';\nimport classNames from 'classnames';\nimport { debounce, noop } from 'es-toolkit/function';\n\nexport type SmoothScrollbarsProps = {\n    /**\n     * Defines whether the scrollbars should slide in on hover.\n     *\n     * @default false\n     */\n    slideIn?: boolean;\n\n    /**\n     * Defines whether the scrollbars should be slightly larger.\n     *\n     * @default false\n     */\n    largeTrack?: boolean;\n\n    /**\n     * Defines whether the scrollbars should have an offset.\n     *\n     * @default false\n     */\n    trackOffset?: boolean;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n\n    /**\n     * Tag name used for the scroll container.\n     *\n     * @default 'div'\n     */\n    tagName?: string;\n\n    /**\n     * Enable auto-height behavior.\n     *\n     * @default false\n     */\n    autoHeight?: boolean;\n\n    /**\n     * Minimum height when auto-height is enabled.\n     *\n     * @default 0\n     */\n    autoHeightMin?: number;\n\n    /**\n     * Maximum height when auto-height is enabled.\n     *\n     * @default 200\n     */\n    autoHeightMax?: number;\n\n    /**\n     * Scroll callback, forwarded to the underlying scrollbars instance.\n     */\n    onScroll?: (event: React.UIEvent<any> | undefined) => void;\n\n    /**\n     * Inline styles for the scroll container.\n     */\n    style?: React.CSSProperties;\n};\n\ntype ScrollbarsWithUpdate = Scrollbars & {\n    update: () => void;\n};\n\nconst RESIZE_THROTTLING = 100;\n\nconst SmoothScrollbars = forwardRef(\n    (componentProps: PropsWithChildren<SmoothScrollbarsProps>, ref: ForwardedRef<any>) => {\n        const {\n            slideIn = false,\n            largeTrack = false,\n            trackOffset = false,\n            className = '',\n            onScroll = noop,\n            tagName = 'div',\n            autoHeight = false,\n            autoHeightMin = 0,\n            autoHeightMax = 200,\n            children,\n            style,\n            ...remainingProps\n        } = componentProps;\n\n        const scrollbarsRef = useRef<Scrollbars>(null);\n        const contentRef = useRef<HTMLDivElement>(null);\n\n        useImperativeHandle(ref, () => scrollbarsRef.current as Scrollbars);\n\n        useEffect(() => {\n            if (!contentRef.current || !scrollbarsRef.current) {\n                return;\n            }\n\n            const updateScrollbars = debounce(() => {\n                if (scrollbarsRef.current) {\n                    // Trigger a update for the scrollbars.\n                    // This is needed since the lib does not automatically update on content height changes\n                    // See: https://github.com/RobPethick/react-custom-scrollbars-2/issues/12\n\n                    // Use type assertion to tell TypeScript that 'update' exists\n                    (scrollbarsRef.current as ScrollbarsWithUpdate).update();\n                }\n            }, RESIZE_THROTTLING);\n\n            const resizeObserver = new ResizeObserver(updateScrollbars);\n            resizeObserver.observe(contentRef.current);\n\n            return () => {\n                resizeObserver.disconnect();\n                updateScrollbars.cancel();\n            };\n        }, []);\n\n        const wrapperClassNames = classNames(className, slideIn && 'scrollbar-fly-in', 'smooth-scrollbar-wrapper');\n\n        const renderTrackVerticalNames = classNames(\n            'scrollbar-track-vertical',\n            largeTrack && 'scrollbar-track-size-large',\n            trackOffset && 'scrollbar-track-offset'\n        );\n\n        const renderThumbVerticalNames = classNames(\n            'scrollbar-thumb-vertical',\n            largeTrack && 'scrollbar-thumb-size-large'\n        );\n\n        const renderTrackHorizontalNames = classNames(\n            'scrollbar-track-horizontal',\n            largeTrack && 'scrollbar-track-size-large',\n            trackOffset && 'scrollbar-track-offset'\n        );\n\n        const renderThumbHorizontalNames = classNames(\n            'scrollbar-thumb-horizontal',\n            largeTrack && 'scrollbar-thumb-size-large'\n        );\n\n        return (\n            <Scrollbars\n                {...remainingProps}\n                ref={scrollbarsRef}\n                tagName={tagName}\n                onScroll={onScroll}\n                className={wrapperClassNames}\n                hideTracksWhenNotNeeded\n                autoHeight={autoHeight}\n                autoHeightMin={autoHeightMin}\n                autoHeightMax={autoHeightMax}\n                renderView={props => {\n                    return <div {...props} className='scrollbar-view' />;\n                }}\n                renderTrackVertical={props => {\n                    return <div {...props} className={renderTrackVerticalNames} />;\n                }}\n                renderThumbVertical={props => {\n                    return <div {...props} className={renderThumbVerticalNames} />;\n                }}\n                renderTrackHorizontal={props => {\n                    return <div {...props} className={renderTrackHorizontalNames} />;\n                }}\n                renderThumbHorizontal={props => {\n                    return <div {...props} className={renderThumbHorizontalNames} />;\n                }}\n            >\n                <div className='scrollbar-content-wrapper' ref={contentRef}>\n                    {children}\n                </div>\n            </Scrollbars>\n        );\n    }\n);\n\nexport default SmoothScrollbars;\n"],"names":["RESIZE_THROTTLING","SmoothScrollbars","forwardRef","componentProps","ref","slideIn","largeTrack","trackOffset","className","onScroll","noop","tagName","autoHeight","autoHeightMin","autoHeightMax","children","style","remainingProps","scrollbarsRef","useRef","contentRef","useImperativeHandle","useEffect","updateScrollbars","debounce","resizeObserver","wrapperClassNames","classNames","renderTrackVerticalNames","renderThumbVerticalNames","renderTrackHorizontalNames","renderThumbHorizontalNames","jsx","Scrollbars","props"],"mappings":";;;;;AAkFA,MAAMA,IAAoB,KAEpBC,IAAmBC;AAAA,EACrB,CAACC,GAA0DC,MAA2B;AAClF,UAAM;AAAA,MACF,SAAAC,IAAU;AAAA,MACV,YAAAC,IAAa;AAAA,MACb,aAAAC,IAAc;AAAA,MACd,WAAAC,IAAY;AAAA,MACZ,UAAAC,IAAWC;AAAA,MACX,SAAAC,IAAU;AAAA,MACV,YAAAC,IAAa;AAAA,MACb,eAAAC,IAAgB;AAAA,MAChB,eAAAC,IAAgB;AAAA,MAChB,UAAAC;AAAA,MACA,OAAAC;AAAA,MACA,GAAGC;AAAA,IAAA,IACHd,GAEEe,IAAgBC,EAAmB,IAAI,GACvCC,IAAaD,EAAuB,IAAI;AAE9C,IAAAE,EAAoBjB,GAAK,MAAMc,EAAc,OAAqB,GAElEI,EAAU,MAAM;AACZ,UAAI,CAACF,EAAW,WAAW,CAACF,EAAc;AACtC;AAGJ,YAAMK,IAAmBC,EAAS,MAAM;AACpC,QAAIN,EAAc,WAMbA,EAAc,QAAiC,OAAA;AAAA,MAExD,GAAGlB,CAAiB,GAEdyB,IAAiB,IAAI,eAAeF,CAAgB;AAC1D,aAAAE,EAAe,QAAQL,EAAW,OAAO,GAElC,MAAM;AACT,QAAAK,EAAe,WAAA,GACfF,EAAiB,OAAA;AAAA,MACrB;AAAA,IACJ,GAAG,CAAA,CAAE;AAEL,UAAMG,IAAoBC,EAAWnB,GAAWH,KAAW,oBAAoB,0BAA0B,GAEnGuB,IAA2BD;AAAA,MAC7B;AAAA,MACArB,KAAc;AAAA,MACdC,KAAe;AAAA,IAAA,GAGbsB,IAA2BF;AAAA,MAC7B;AAAA,MACArB,KAAc;AAAA,IAAA,GAGZwB,IAA6BH;AAAA,MAC/B;AAAA,MACArB,KAAc;AAAA,MACdC,KAAe;AAAA,IAAA,GAGbwB,IAA6BJ;AAAA,MAC/B;AAAA,MACArB,KAAc;AAAA,IAAA;AAGlB,WACI,gBAAA0B;AAAA,MAACC;AAAA,MAAA;AAAA,QACI,GAAGhB;AAAA,QACJ,KAAKC;AAAA,QACL,SAAAP;AAAA,QACA,UAAAF;AAAA,QACA,WAAWiB;AAAA,QACX,yBAAuB;AAAA,QACvB,YAAAd;AAAA,QACA,eAAAC;AAAA,QACA,eAAAC;AAAA,QACA,YAAY,CAAAoB,MACD,gBAAAF,EAAC,OAAA,EAAK,GAAGE,GAAO,WAAU,kBAAiB;AAAA,QAEtD,qBAAqB,CAAAA,MACV,gBAAAF,EAAC,OAAA,EAAK,GAAGE,GAAO,WAAWN,GAA0B;AAAA,QAEhE,qBAAqB,CAAAM,MACV,gBAAAF,EAAC,OAAA,EAAK,GAAGE,GAAO,WAAWL,GAA0B;AAAA,QAEhE,uBAAuB,CAAAK,MACZ,gBAAAF,EAAC,OAAA,EAAK,GAAGE,GAAO,WAAWJ,GAA4B;AAAA,QAElE,uBAAuB,CAAAI,MACZ,gBAAAF,EAAC,OAAA,EAAK,GAAGE,GAAO,WAAWH,GAA4B;AAAA,QAGlE,4BAAC,OAAA,EAAI,WAAU,6BAA4B,KAAKX,GAC3C,UAAAL,EAAA,CACL;AAAA,MAAA;AAAA,IAAA;AAAA,EAGZ;AACJ;"}
+{"version":3,"file":"SmoothScrollbars.js","sources":["../../../src/components/smoothScrollbars/SmoothScrollbars.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    type ForwardedRef,\n    type PropsWithChildren,\n} from 'react';\nimport { Scrollbars } from 'react-custom-scrollbars-4';\nimport { debounce, noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\n\nexport type SmoothScrollbarsProps = {\n    /**\n     * Defines whether the scrollbars should slide in on hover.\n     *\n     * @default false\n     */\n    slideIn?: boolean;\n\n    /**\n     * Defines whether the scrollbars should be slightly larger.\n     *\n     * @default false\n     */\n    largeTrack?: boolean;\n\n    /**\n     * Defines whether the scrollbars should have an offset.\n     *\n     * @default false\n     */\n    trackOffset?: boolean;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n\n    /**\n     * Tag name used for the scroll container.\n     *\n     * @default 'div'\n     */\n    tagName?: string;\n\n    /**\n     * Enable auto-height behavior.\n     *\n     * @default false\n     */\n    autoHeight?: boolean;\n\n    /**\n     * Minimum height when auto-height is enabled.\n     *\n     * @default 0\n     */\n    autoHeightMin?: number;\n\n    /**\n     * Maximum height when auto-height is enabled.\n     *\n     * @default 200\n     */\n    autoHeightMax?: number;\n\n    /**\n     * Scroll callback, forwarded to the underlying scrollbars instance.\n     */\n    onScroll?: (event: React.UIEvent<any> | undefined) => void;\n\n    /**\n     * Inline styles for the scroll container.\n     */\n    style?: React.CSSProperties;\n};\n\ntype ScrollbarsWithUpdate = Scrollbars & {\n    update: () => void;\n};\n\nconst RESIZE_THROTTLING = 100;\n\nconst SmoothScrollbars = forwardRef(\n    (componentProps: PropsWithChildren<SmoothScrollbarsProps>, ref: ForwardedRef<any>) => {\n        const {\n            slideIn = false,\n            largeTrack = false,\n            trackOffset = false,\n            className = '',\n            onScroll = noop,\n            tagName = 'div',\n            autoHeight = false,\n            autoHeightMin = 0,\n            autoHeightMax = 200,\n            children,\n            style,\n            ...remainingProps\n        } = componentProps;\n\n        const scrollbarsRef = useRef<Scrollbars>(null);\n        const contentRef = useRef<HTMLDivElement>(null);\n\n        useImperativeHandle(ref, () => scrollbarsRef.current as Scrollbars);\n\n        useEffect(() => {\n            if (!contentRef.current || !scrollbarsRef.current) {\n                return;\n            }\n\n            const updateScrollbars = debounce(() => {\n                if (scrollbarsRef.current) {\n                    // Trigger a update for the scrollbars.\n                    // This is needed since the lib does not automatically update on content height changes\n                    // See: https://github.com/RobPethick/react-custom-scrollbars-2/issues/12\n\n                    // Use type assertion to tell TypeScript that 'update' exists\n                    (scrollbarsRef.current as ScrollbarsWithUpdate).update();\n                }\n            }, RESIZE_THROTTLING);\n\n            const resizeObserver = new ResizeObserver(updateScrollbars);\n            resizeObserver.observe(contentRef.current);\n\n            return () => {\n                resizeObserver.disconnect();\n                updateScrollbars.cancel();\n            };\n        }, []);\n\n        const wrapperClassNames = classNames(className, slideIn && 'scrollbar-fly-in', 'smooth-scrollbar-wrapper');\n\n        const renderTrackVerticalNames = classNames(\n            'scrollbar-track-vertical',\n            largeTrack && 'scrollbar-track-size-large',\n            trackOffset && 'scrollbar-track-offset'\n        );\n\n        const renderThumbVerticalNames = classNames(\n            'scrollbar-thumb-vertical',\n            largeTrack && 'scrollbar-thumb-size-large'\n        );\n\n        const renderTrackHorizontalNames = classNames(\n            'scrollbar-track-horizontal',\n            largeTrack && 'scrollbar-track-size-large',\n            trackOffset && 'scrollbar-track-offset'\n        );\n\n        const renderThumbHorizontalNames = classNames(\n            'scrollbar-thumb-horizontal',\n            largeTrack && 'scrollbar-thumb-size-large'\n        );\n\n        return (\n            <Scrollbars\n                {...remainingProps}\n                ref={scrollbarsRef}\n                tagName={tagName}\n                onScroll={onScroll}\n                className={wrapperClassNames}\n                hideTracksWhenNotNeeded\n                autoHeight={autoHeight}\n                autoHeightMin={autoHeightMin}\n                autoHeightMax={autoHeightMax}\n                renderView={props => {\n                    return <div {...props} className='scrollbar-view' />;\n                }}\n                renderTrackVertical={props => {\n                    return <div {...props} className={renderTrackVerticalNames} />;\n                }}\n                renderThumbVertical={props => {\n                    return <div {...props} className={renderThumbVerticalNames} />;\n                }}\n                renderTrackHorizontal={props => {\n                    return <div {...props} className={renderTrackHorizontalNames} />;\n                }}\n                renderThumbHorizontal={props => {\n                    return <div {...props} className={renderThumbHorizontalNames} />;\n                }}\n            >\n                <div className='scrollbar-content-wrapper' ref={contentRef}>\n                    {children}\n                </div>\n            </Scrollbars>\n        );\n    }\n);\n\nexport default SmoothScrollbars;\n"],"names":["RESIZE_THROTTLING","SmoothScrollbars","forwardRef","componentProps","ref","slideIn","largeTrack","trackOffset","className","onScroll","noop","tagName","autoHeight","autoHeightMin","autoHeightMax","children","style","remainingProps","scrollbarsRef","useRef","contentRef","useImperativeHandle","useEffect","updateScrollbars","debounce","resizeObserver","wrapperClassNames","classNames","renderTrackVerticalNames","renderThumbVerticalNames","renderTrackHorizontalNames","renderThumbHorizontalNames","jsx","Scrollbars","props"],"mappings":";;;;;AAmFA,MAAMA,IAAoB,KAEpBC,IAAmBC;AAAA,EACrB,CAACC,GAA0DC,MAA2B;AAClF,UAAM;AAAA,MACF,SAAAC,IAAU;AAAA,MACV,YAAAC,IAAa;AAAA,MACb,aAAAC,IAAc;AAAA,MACd,WAAAC,IAAY;AAAA,MACZ,UAAAC,IAAWC;AAAA,MACX,SAAAC,IAAU;AAAA,MACV,YAAAC,IAAa;AAAA,MACb,eAAAC,IAAgB;AAAA,MAChB,eAAAC,IAAgB;AAAA,MAChB,UAAAC;AAAA,MACA,OAAAC;AAAA,MACA,GAAGC;AAAA,IAAA,IACHd,GAEEe,IAAgBC,EAAmB,IAAI,GACvCC,IAAaD,EAAuB,IAAI;AAE9C,IAAAE,EAAoBjB,GAAK,MAAMc,EAAc,OAAqB,GAElEI,EAAU,MAAM;AACZ,UAAI,CAACF,EAAW,WAAW,CAACF,EAAc;AACtC;AAGJ,YAAMK,IAAmBC,EAAS,MAAM;AACpC,QAAIN,EAAc,WAMbA,EAAc,QAAiC,OAAA;AAAA,MAExD,GAAGlB,CAAiB,GAEdyB,IAAiB,IAAI,eAAeF,CAAgB;AAC1D,aAAAE,EAAe,QAAQL,EAAW,OAAO,GAElC,MAAM;AACT,QAAAK,EAAe,WAAA,GACfF,EAAiB,OAAA;AAAA,MACrB;AAAA,IACJ,GAAG,CAAA,CAAE;AAEL,UAAMG,IAAoBC,EAAWnB,GAAWH,KAAW,oBAAoB,0BAA0B,GAEnGuB,IAA2BD;AAAA,MAC7B;AAAA,MACArB,KAAc;AAAA,MACdC,KAAe;AAAA,IAAA,GAGbsB,IAA2BF;AAAA,MAC7B;AAAA,MACArB,KAAc;AAAA,IAAA,GAGZwB,IAA6BH;AAAA,MAC/B;AAAA,MACArB,KAAc;AAAA,MACdC,KAAe;AAAA,IAAA,GAGbwB,IAA6BJ;AAAA,MAC/B;AAAA,MACArB,KAAc;AAAA,IAAA;AAGlB,WACI,gBAAA0B;AAAA,MAACC;AAAA,MAAA;AAAA,QACI,GAAGhB;AAAA,QACJ,KAAKC;AAAA,QACL,SAAAP;AAAA,QACA,UAAAF;AAAA,QACA,WAAWiB;AAAA,QACX,yBAAuB;AAAA,QACvB,YAAAd;AAAA,QACA,eAAAC;AAAA,QACA,eAAAC;AAAA,QACA,YAAY,CAAAoB,MACD,gBAAAF,EAAC,OAAA,EAAK,GAAGE,GAAO,WAAU,kBAAiB;AAAA,QAEtD,qBAAqB,CAAAA,MACV,gBAAAF,EAAC,OAAA,EAAK,GAAGE,GAAO,WAAWN,GAA0B;AAAA,QAEhE,qBAAqB,CAAAM,MACV,gBAAAF,EAAC,OAAA,EAAK,GAAGE,GAAO,WAAWL,GAA0B;AAAA,QAEhE,uBAAuB,CAAAK,MACZ,gBAAAF,EAAC,OAAA,EAAK,GAAGE,GAAO,WAAWJ,GAA4B;AAAA,QAElE,uBAAuB,CAAAI,MACZ,gBAAAF,EAAC,OAAA,EAAK,GAAGE,GAAO,WAAWH,GAA4B;AAAA,QAGlE,4BAAC,OAAA,EAAI,WAAU,6BAA4B,KAAKX,GAC3C,UAAAL,EAAA,CACL;AAAA,MAAA;AAAA,IAAA;AAAA,EAGZ;AACJ;"}