@rio-cloud/rio-uikit 2.5.1 → 3.0.0-beta.1

package/components/sidebars/Sidebar.js

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

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 { 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        x: fromRight ? '100%' : '-100%',\n        opacity: 0,\n    }),\n    sidebarVisible: ({ fromRight, closed }: AnimationVariantProps) => ({\n        x: !closed ? 0 : fromRight ? '100%' : '-100%',\n        opacity: closed ? 0 : 1,\n        display: closed ? 'none' : 'block',\n    }),\n    sidebarExit: ({ fromRight }: AnimationVariantProps) => ({\n        x: fromRight ? '100%' : '-100%',\n        opacity: 0,\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 title={title} 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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"}
+{"version":3,"file":"Sidebar.js","names":[],"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        x: fromRight ? '100%' : '-100%',\n        opacity: 0,\n    }),\n    sidebarVisible: ({ fromRight, closed }: AnimationVariantProps) => ({\n        x: !closed ? 0 : fromRight ? '100%' : '-100%',\n        opacity: closed ? 0 : 1,\n        display: closed ? 'none' : 'block',\n    }),\n    sidebarExit: ({ fromRight }: AnimationVariantProps) => ({\n        x: fromRight ? '100%' : '-100%',\n        opacity: 0,\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 title={title} 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"],"mappings":"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"}

package/components/sidebars/SidebarBackdrop.js

@@ -1,11 +1,13 @@
-import { jsx as d } from "react/jsx-runtime";
-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 {
-  m as default
-};
-//# sourceMappingURL=SidebarBackdrop.js.map
+import e from "../../utils/classNames.js";
+import { noop as t } from "es-toolkit/function";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/sidebars/SidebarBackdrop.tsx
+var r = ({ onClick: r = t, makeBackdropVisible: i = !1, className: a = "" }) => /* @__PURE__ */ n("div", {
+	className: e("SidebarBackdrop", i && "sidebar-backdrop-bg", a),
+	onClick: r,
+	"data-testid": "sidebarBackdrop"
+});
+//#endregion
+export { r as default };
+
+//# sourceMappingURL=SidebarBackdrop.js.map

package/components/sidebars/SidebarBackdrop.js.map

@@ -1 +1 @@
-{"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;"}
+{"version":3,"file":"SidebarBackdrop.js","names":[],"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"],"mappings":";;;;AAUA,IAAM,KAAmB,EAAE,aAAU,GAAM,yBAAsB,IAAO,eAAY,SAGzE,kBAAC,OAAD;CAAK,WAFe,EAAW,mBAAmB,KAAuB,uBAAuB,CAEhF;CAA6B;CAAS,eAAY;AAAmB,CAAA"}

package/components/sidebars/SidebarCloseButton.js

@@ -1,22 +1,20 @@
-import { jsx as t } from "react/jsx-runtime";
-import { noop as i } from "es-toolkit/function";
-import r from "../button/Button.js";
-import { getTrackingLabelFromNode as n } from "../../utils/analytics/getTrackingLabelFromNode.js";
-const d = ({ title: e, onClick: a = i }) => {
-  const o = n(e);
-  return /* @__PURE__ */ t(
-    r,
-    {
-      bsStyle: r.MUTED,
-      iconOnly: !0,
-      onClick: a,
-      autoTrackingKey: o && `sidebar::closed::${o}`,
-      "data-testid": "sidebarCloseButton",
-      children: /* @__PURE__ */ t("span", { className: "rioglyph rioglyph-remove" })
-    }
-  );
+import e from "../button/Button.js";
+import { getTrackingLabelFromNode as t } from "../../utils/analytics/getTrackingLabelFromNode.js";
+import { noop as n } from "es-toolkit/function";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/sidebars/SidebarCloseButton.tsx
+var i = ({ title: i, onClick: a = n }) => {
+	let o = t(i);
+	return /* @__PURE__ */ r(e, {
+		bsStyle: e.MUTED,
+		iconOnly: !0,
+		onClick: a,
+		autoTrackingKey: o && `sidebar::closed::${o}`,
+		"data-testid": "sidebarCloseButton",
+		children: /* @__PURE__ */ r("span", { className: "uikit-icon icon-remove" })
+	});
 };
-export {
-  d as default
-};
-//# sourceMappingURL=SidebarCloseButton.js.map
+//#endregion
+export { i as default };
+
+//# sourceMappingURL=SidebarCloseButton.js.map

package/components/sidebars/SidebarCloseButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarCloseButton.js","sources":["../../../src/components/sidebars/SidebarCloseButton.tsx"],"sourcesContent":["import { noop } from 'es-toolkit/function';\nimport type { ReactNode } from 'react';\n\nimport Button from '../button/Button';\nimport { getTrackingLabelFromNode } from '../../utils/analytics/getTrackingLabelFromNode';\n\nexport type SidebarCloseButtonProps = {\n    title?: ReactNode;\n    onClick?: VoidFunction;\n};\n\nconst SidebarCloseButton = ({ title, onClick = noop }: SidebarCloseButtonProps) => {\n    const titleTrackingValue = getTrackingLabelFromNode(title);\n\n    return (\n        <Button\n            bsStyle={Button.MUTED}\n            iconOnly\n            onClick={onClick}\n            autoTrackingKey={titleTrackingValue && `sidebar::closed::${titleTrackingValue}`}\n            data-testid='sidebarCloseButton'\n        >\n            <span className='rioglyph rioglyph-remove' />\n        </Button>\n    );\n};\n\nexport default SidebarCloseButton;\n"],"names":["SidebarCloseButton","title","onClick","noop","titleTrackingValue","getTrackingLabelFromNode","jsx","Button"],"mappings":";;;;AAWA,MAAMA,IAAqB,CAAC,EAAE,OAAAC,GAAO,SAAAC,IAAUC,QAAoC;AAC/E,QAAMC,IAAqBC,EAAyBJ,CAAK;AAEzD,SACI,gBAAAK;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,SAASA,EAAO;AAAA,MAChB,UAAQ;AAAA,MACR,SAAAL;AAAA,MACA,iBAAiBE,KAAsB,oBAAoBA,CAAkB;AAAA,MAC7E,eAAY;AAAA,MAEZ,UAAA,gBAAAE,EAAC,QAAA,EAAK,WAAU,2BAAA,CAA2B;AAAA,IAAA;AAAA,EAAA;AAGvD;"}
+{"version":3,"file":"SidebarCloseButton.js","names":[],"sources":["../../../src/components/sidebars/SidebarCloseButton.tsx"],"sourcesContent":["import { noop } from 'es-toolkit/function';\nimport type { ReactNode } from 'react';\n\nimport Button from '../button/Button';\nimport { getTrackingLabelFromNode } from '../../utils/analytics/getTrackingLabelFromNode';\n\nexport type SidebarCloseButtonProps = {\n    title?: ReactNode;\n    onClick?: VoidFunction;\n};\n\nconst SidebarCloseButton = ({ title, onClick = noop }: SidebarCloseButtonProps) => {\n    const titleTrackingValue = getTrackingLabelFromNode(title);\n\n    return (\n        <Button\n            bsStyle={Button.MUTED}\n            iconOnly\n            onClick={onClick}\n            autoTrackingKey={titleTrackingValue && `sidebar::closed::${titleTrackingValue}`}\n            data-testid='sidebarCloseButton'\n        >\n            <span className='uikit-icon icon-remove' />\n        </Button>\n    );\n};\n\nexport default SidebarCloseButton;\n"],"mappings":";;;;;AAWA,IAAM,KAAsB,EAAE,UAAO,aAAU,QAAoC;CAC/E,IAAM,IAAqB,EAAyB,CAAK;CAEzD,OACI,kBAAC,GAAD;EACI,SAAS,EAAO;EAChB,UAAA;EACS;EACT,iBAAiB,KAAsB,oBAAoB;EAC3D,eAAY;YAEZ,kBAAC,QAAD,EAAM,WAAU,yBAA0B,CAAA;CACtC,CAAA;AAEhB"}

package/components/sidebars/SidebarFooter.js

@@ -1,12 +1,11 @@
-import { jsx as o } from "react/jsx-runtime";
-import a from "../../utils/classNames.js";
-const l = ({ footer: r, className: e = "" }) => {
-  if (!r)
-    return null;
-  const s = a("SidebarFooter", e);
-  return /* @__PURE__ */ o("div", { className: s, children: r });
-};
-export {
-  l as default
-};
-//# sourceMappingURL=SidebarFooter.js.map
+import e from "../../utils/classNames.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/sidebars/SidebarFooter.tsx
+var n = ({ footer: n, className: r = "" }) => n ? /* @__PURE__ */ t("div", {
+	className: e("SidebarFooter", r),
+	children: n
+}) : null;
+//#endregion
+export { n as default };
+
+//# sourceMappingURL=SidebarFooter.js.map

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';\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;"}
+{"version":3,"file":"SidebarFooter.js","names":[],"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"],"mappings":";;;AASA,IAAM,KAAiB,EAAE,WAAQ,eAAY,SACpC,IAME,kBAAC,OAAD;CAAK,WAFa,EAAW,iBAAiB,CAE9B;WAAmB;AAAY,CAAA,IAL3C"}