@rio-cloud/rio-uikit 2.5.0-beta.1 → 2.5.0

package/CountedInput.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/countedInput/CountedInput';
+export * from './components/countedInput/CountedInput';

package/CountedInput.js

@@ -0,0 +1,5 @@
+import { default as o } from "./components/countedInput/CountedInput.js";
+export {
+  o as default
+};
+//# sourceMappingURL=CountedInput.js.map

package/CountedInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CountedInput.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/TabbedPanel.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/tabbedPanel/TabbedPanel';
+export * from './components/tabbedPanel/TabbedPanel';

package/TabbedPanel.js

@@ -0,0 +1,5 @@
+import { default as o } from "./components/tabbedPanel/TabbedPanel.js";
+export {
+  o as default
+};
+//# sourceMappingURL=TabbedPanel.js.map

package/TabbedPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabbedPanel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/components/applicationHeader/NavItems.js

@@ -1,66 +1,78 @@
-import { jsx as i } from "react/jsx-runtime";
-import { useState as m, useRef as b, useEffect as L, useLayoutEffect as V } from "react";
-import { isEmpty as j } from "es-toolkit/compat";
-import q from "../../utils/classNames.js";
+import { jsx as f } from "react/jsx-runtime";
+import { useState as o, useRef as p, useLayoutEffect as v } from "react";
+import { isEmpty as V } from "es-toolkit/compat";
+import j from "../../utils/classNames.js";
 import z from "../../hooks/useClickOutside.js";
-import B from "./CollapsedNavItem.js";
-const $ = 50, F = 15, Q = (C) => {
-  const { navItems: n = [], actionBarItems: d = [], containerWidth: k } = C, [o, a] = m(!1), [u, W] = m([]), [y, g] = m([]), w = z(() => a(!1)), f = b(null), t = b(!0);
-  L(() => {
-    t.current = !0;
-  }, [n, d, k]), V(() => {
-    t.current && E();
+import $ from "./CollapsedNavItem.js";
+const G = 50, H = 15, J = [], K = [], Z = (M) => {
+  const {
+    navItems: n = J,
+    actionBarItems: I = K,
+    containerWidth: S
+  } = M, [i, r] = o(!1), [N, h] = o([]), [D, b] = o([]), [l, s] = o(!0), F = z(() => r(!1)), C = p(null), a = p(null), c = p(1), w = () => {
+    a.current !== null && (window.cancelAnimationFrame(a.current), a.current = null);
+  };
+  v(() => {
+    w(), c.current = 1, s(!0);
+  }, [n, I, S]), v(() => () => w(), []), v(() => {
+    l && (x(), c.current > 0 && (c.current -= 1, a.current = window.requestAnimationFrame(() => {
+      a.current = null, s(!0);
+    })));
   });
-  const D = (e) => e.scrollWidth - $ - F, E = () => {
-    const e = f.current;
-    if (!e)
+  const R = (e) => e.scrollWidth - G - H, x = () => {
+    const e = C.current;
+    if (!e) {
+      s(!1);
       return;
-    const s = [...e.children || []], v = D(e);
-    if (v < 0)
+    }
+    const t = [...e.children || []], k = R(e);
+    if (k < 0) {
+      b([]), h(n), s(!1);
       return;
-    let r = 0;
-    const I = [], N = [];
-    s.forEach((l) => {
-      if (!l.className)
+    }
+    let m = 0;
+    const y = [], W = [];
+    t.forEach((u) => {
+      if (!u.className)
         return;
-      r = r + l.scrollWidth;
-      const c = n.find((A) => {
-        const h = l.attributes.getNamedItem("data-nav-item-key");
-        return h && A.key === h.value;
+      m = m + u.scrollWidth;
+      const d = n.find((B) => {
+        const A = u.attributes.getNamedItem("data-nav-item-key");
+        return A && B.key === A.value;
       });
-      c && (v > r ? I.push(c) : N.push(c));
-    }), t.current = !1, g(I), W(N);
-  }, O = () => {
-    a(!o);
-  }, S = () => {
-    o && a(!1);
-  }, p = (e, s) => /* @__PURE__ */ i(
+      d && (k > m ? y.push(d) : W.push(d));
+    }), b(y), h(W), s(!1);
+  }, E = () => {
+    r(!i);
+  }, L = () => {
+    i && r(!1);
+  }, g = (e, t) => /* @__PURE__ */ f(
     "li",
     {
-      className: `submodule ${s ? "offscreen" : ""}`,
+      className: `submodule ${t ? "offscreen" : ""}`,
       "data-nav-item-key": e.key,
       children: e.route
     },
     e.key
-  ), x = () => !t.current && !j(u) ? [
-    ...y.map((s) => p(s, t.current)),
-    /* @__PURE__ */ i(
-      B,
+  ), O = () => !l && !V(N) ? [
+    ...D.map((t) => g(t, l)),
+    /* @__PURE__ */ f(
+      $,
       {
-        ref: w,
-        show: o,
-        navItems: u,
-        actionBarItems: d,
-        onDropdownClick: O,
-        onItemClick: S
+        ref: F,
+        show: i,
+        navItems: N,
+        actionBarItems: I,
+        onDropdownClick: E,
+        onItemClick: L
       },
       "CollapsedNavItem"
     )
-  ] : n.map((e) => p(e, t.current)), R = q("SubmoduleNavigation", "nav");
-  return /* @__PURE__ */ i("ul", { className: R, ref: f, children: x() });
+  ] : n.map((e) => g(e, l)), q = j("SubmoduleNavigation", "nav");
+  return /* @__PURE__ */ f("ul", { className: q, ref: C, children: O() });
 };
 export {
-  Q as NavItems,
-  Q as default
+  Z as NavItems,
+  Z as default
 };
 //# sourceMappingURL=NavItems.js.map

package/components/applicationHeader/NavItems.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavItems.js","sources":["../../../src/components/applicationHeader/NavItems.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState, useEffect, useLayoutEffect, useRef } from 'react';\nimport { isEmpty } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport useClickOutside from '../../hooks/useClickOutside';\nimport CollapsedNavItem from './CollapsedNavItem';\nimport type { ModulePropType } from './ApplicationHeader';\n\nconst collapsedDropdownWidth = 50;\nconst paddingLeft = 15;\n\nexport type NavItemsProps = {\n    navItems?: ModulePropType[];\n    containerWidth: number;\n    actionBarItems?: React.ReactNode[];\n};\n\nexport const NavItems = (props: NavItemsProps) => {\n    const { navItems: externalNavItems = [], actionBarItems = [], containerWidth } = props;\n\n    const [isCollapsedNavItemOpen, setIsCollapsedNavItemOpen] = useState(false);\n    const [collapsedNavItems, setCollapsedNavItems] = useState<ModulePropType[]>([]);\n    const [visibleNavItems, setVisibleNavItems] = useState<ModulePropType[]>([]);\n\n    const collapsedDropdownRef = useClickOutside(() => setIsCollapsedNavItemOpen(false));\n\n    const navigationRef = useRef(null);\n    const isOffscreen = useRef(true);\n\n    // console.log({ containerWidth });\n\n    // Before any new changes are applied\n    useEffect(() => {\n        // After the component received new props, every nav item has to be rendered offscreen\n        // again without collapsing them into the dropdown to measure its width\n        isOffscreen.current = true;\n    }, [externalNavItems, actionBarItems, containerWidth]);\n\n    // After the component has been rendered\n    useLayoutEffect(() => {\n        // After every nav item was rendered offscreen again we need to recalculate the width\n        // of the items again and render the result with possible collapsible dropdown.\n        if (isOffscreen.current) {\n            computeNavItems();\n        }\n    });\n\n    const getAvailableWidth = (element: HTMLElement) => {\n        // Get relevant elements\n        // const parent = element.parentNode;\n\n        // const actionBar = head(parent.getElementsByClassName('ApplicationActionBar'));\n        // const actionBarWidth = actionBar && actionBar.childElementCount > 0 ? actionBar.scrollWidth : 0;\n\n        // Since the collapsed dropdown has not been rendered yet,\n        // use the fixed with for it to compute available width\n        const availableWidth = element.scrollWidth - collapsedDropdownWidth - paddingLeft;\n        return availableWidth;\n    };\n\n    const computeNavItems = () => {\n        const element: HTMLElement | null = navigationRef.current;\n\n        if (!element) {\n            return;\n        }\n\n        const navItems = [...((element as HTMLElement).children || [])];\n\n        const availableWidth = getAvailableWidth(element);\n\n        if (availableWidth < 0) {\n            return;\n        }\n\n        // Iterate over all rendered navItems to figure out their widths in order to figure out\n        // which navItems need to be rendered in the collapsed dropdown\n        let requiredNavItemsSize = 0;\n\n        const updatedVisibleItems: ModulePropType[] = [];\n        const updatedCollapsedItems: ModulePropType[] = [];\n\n        navItems.forEach(item => {\n            if (!item.className) {\n                return;\n            }\n\n            // Calculate the remaining width\n            requiredNavItemsSize = requiredNavItemsSize + item.scrollWidth;\n\n            // console.log({ requiredNavItemsSize });\n\n            // Use the navItems.key to find corresponding navItems for each DOM node\n            const matchedNavItem = externalNavItems.find(navItem => {\n                const dataAttr = item.attributes.getNamedItem('data-nav-item-key');\n                return dataAttr && navItem.key === dataAttr.value;\n            });\n\n            if (!matchedNavItem) {\n                return;\n            }\n\n            // Add navItems to the visible group until the available with exceeds.\n            // All other navItems will be added to the collapsed group\n            if (availableWidth > requiredNavItemsSize) {\n                updatedVisibleItems.push(matchedNavItem);\n            } else {\n                updatedCollapsedItems.push(matchedNavItem);\n            }\n        });\n\n        // Set the state to render the navItems again\n        isOffscreen.current = false;\n\n        setVisibleNavItems(updatedVisibleItems);\n        setCollapsedNavItems(updatedCollapsedItems);\n    };\n\n    const handleCollapsedDropdown = () => {\n        // When the dropdown is open, set showCollapsedNavItems to false so all submodule items\n        // are rendered and their size can be computed\n        if (isCollapsedNavItemOpen) {\n            setIsCollapsedNavItemOpen(false);\n        } else {\n            // When the dropdown is closed, just set the flag to open is enough\n            setIsCollapsedNavItemOpen(true);\n        }\n    };\n\n    const handleCollapsedNavItemSelected = () => {\n        // Close collapsed dropdown on item select\n        if (isCollapsedNavItemOpen) {\n            setIsCollapsedNavItemOpen(false);\n        }\n    };\n\n    const renderNavItem = (navItem: ModulePropType, isItemOffscreen: boolean) => (\n        <li\n            key={navItem.key}\n            className={`submodule ${isItemOffscreen ? 'offscreen' : ''}`}\n            data-nav-item-key={navItem.key}\n        >\n            {navItem.route}\n        </li>\n    );\n\n    const renderNavItems = () => {\n        if (!isOffscreen.current && !isEmpty(collapsedNavItems)) {\n            const visibleItems = visibleNavItems.map(navItem => renderNavItem(navItem, isOffscreen.current));\n\n            return [\n                ...visibleItems,\n                <CollapsedNavItem\n                    key='CollapsedNavItem'\n                    ref={collapsedDropdownRef}\n                    show={isCollapsedNavItemOpen}\n                    navItems={collapsedNavItems}\n                    actionBarItems={actionBarItems}\n                    onDropdownClick={handleCollapsedDropdown}\n                    onItemClick={handleCollapsedNavItemSelected}\n                />,\n            ];\n        }\n\n        return externalNavItems.map(navItem => renderNavItem(navItem, isOffscreen.current));\n    };\n\n    // As all navItems need to be added to the DOM first in order to get their real size\n    // the computation whether a navItem need to be shown under the collapsed dropdown or not\n    // needs to be done after the component did mount to the DOM.\n\n    const classes = classNames('SubmoduleNavigation', 'nav');\n\n    return (\n        <ul className={classes} ref={navigationRef}>\n            {renderNavItems()}\n        </ul>\n    );\n};\n\nexport default NavItems;\n"],"names":["collapsedDropdownWidth","paddingLeft","NavItems","props","externalNavItems","actionBarItems","containerWidth","isCollapsedNavItemOpen","setIsCollapsedNavItemOpen","useState","collapsedNavItems","setCollapsedNavItems","visibleNavItems","setVisibleNavItems","collapsedDropdownRef","useClickOutside","navigationRef","useRef","isOffscreen","useEffect","useLayoutEffect","computeNavItems","getAvailableWidth","element","navItems","availableWidth","requiredNavItemsSize","updatedVisibleItems","updatedCollapsedItems","item","matchedNavItem","navItem","dataAttr","handleCollapsedDropdown","handleCollapsedNavItemSelected","renderNavItem","isItemOffscreen","jsx","renderNavItems","isEmpty","CollapsedNavItem","classes","classNames"],"mappings":";;;;;;AASA,MAAMA,IAAyB,IACzBC,IAAc,IAQPC,IAAW,CAACC,MAAyB;AAC9C,QAAM,EAAE,UAAUC,IAAmB,CAAA,GAAI,gBAAAC,IAAiB,CAAA,GAAI,gBAAAC,EAAA,IAAmBH,GAE3E,CAACI,GAAwBC,CAAyB,IAAIC,EAAS,EAAK,GACpE,CAACC,GAAmBC,CAAoB,IAAIF,EAA2B,CAAA,CAAE,GACzE,CAACG,GAAiBC,CAAkB,IAAIJ,EAA2B,CAAA,CAAE,GAErEK,IAAuBC,EAAgB,MAAMP,EAA0B,EAAK,CAAC,GAE7EQ,IAAgBC,EAAO,IAAI,GAC3BC,IAAcD,EAAO,EAAI;AAK/B,EAAAE,EAAU,MAAM;AAGZ,IAAAD,EAAY,UAAU;AAAA,EAC1B,GAAG,CAACd,GAAkBC,GAAgBC,CAAc,CAAC,GAGrDc,EAAgB,MAAM;AAGlB,IAAIF,EAAY,WACZG,EAAA;AAAA,EAER,CAAC;AAED,QAAMC,IAAoB,CAACC,MASAA,EAAQ,cAAcvB,IAAyBC,GAIpEoB,IAAkB,MAAM;AAC1B,UAAME,IAA8BP,EAAc;AAElD,QAAI,CAACO;AACD;AAGJ,UAAMC,IAAW,CAAC,GAAKD,EAAwB,YAAY,CAAA,CAAG,GAExDE,IAAiBH,EAAkBC,CAAO;AAEhD,QAAIE,IAAiB;AACjB;AAKJ,QAAIC,IAAuB;AAE3B,UAAMC,IAAwC,CAAA,GACxCC,IAA0C,CAAA;AAEhD,IAAAJ,EAAS,QAAQ,CAAAK,MAAQ;AACrB,UAAI,CAACA,EAAK;AACN;AAIJ,MAAAH,IAAuBA,IAAuBG,EAAK;AAKnD,YAAMC,IAAiB1B,EAAiB,KAAK,CAAA2B,MAAW;AACpD,cAAMC,IAAWH,EAAK,WAAW,aAAa,mBAAmB;AACjE,eAAOG,KAAYD,EAAQ,QAAQC,EAAS;AAAA,MAChD,CAAC;AAED,MAAKF,MAMDL,IAAiBC,IACjBC,EAAoB,KAAKG,CAAc,IAEvCF,EAAsB,KAAKE,CAAc;AAAA,IAEjD,CAAC,GAGDZ,EAAY,UAAU,IAEtBL,EAAmBc,CAAmB,GACtChB,EAAqBiB,CAAqB;AAAA,EAC9C,GAEMK,IAA0B,MAAM;AAGlC,IACIzB,EADA,CAAAD,CAC+B;AAAA,EAKvC,GAEM2B,IAAiC,MAAM;AAEzC,IAAI3B,KACAC,EAA0B,EAAK;AAAA,EAEvC,GAEM2B,IAAgB,CAACJ,GAAyBK,MAC5C,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MAEG,WAAW,aAAaD,IAAkB,cAAc,EAAE;AAAA,MAC1D,qBAAmBL,EAAQ;AAAA,MAE1B,UAAAA,EAAQ;AAAA,IAAA;AAAA,IAJJA,EAAQ;AAAA,EAAA,GAQfO,IAAiB,MACf,CAACpB,EAAY,WAAW,CAACqB,EAAQ7B,CAAiB,IAG3C;AAAA,IACH,GAHiBE,EAAgB,IAAI,CAAAmB,MAAWI,EAAcJ,GAASb,EAAY,OAAO,CAAC;AAAA,IAI3F,gBAAAmB;AAAA,MAACG;AAAA,MAAA;AAAA,QAEG,KAAK1B;AAAA,QACL,MAAMP;AAAA,QACN,UAAUG;AAAA,QACV,gBAAAL;AAAA,QACA,iBAAiB4B;AAAA,QACjB,aAAaC;AAAA,MAAA;AAAA,MANT;AAAA,IAAA;AAAA,EAOR,IAID9B,EAAiB,IAAI,CAAA2B,MAAWI,EAAcJ,GAASb,EAAY,OAAO,CAAC,GAOhFuB,IAAUC,EAAW,uBAAuB,KAAK;AAEvD,2BACK,MAAA,EAAG,WAAWD,GAAS,KAAKzB,GACxB,eACL;AAER;"}
+{"version":3,"file":"NavItems.js","sources":["../../../src/components/applicationHeader/NavItems.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState, useLayoutEffect, useRef } from 'react';\nimport { isEmpty } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport useClickOutside from '../../hooks/useClickOutside';\nimport CollapsedNavItem from './CollapsedNavItem';\nimport type { ModulePropType } from './ApplicationHeader';\n\nconst collapsedDropdownWidth = 50;\nconst paddingLeft = 15;\nconst defaultNavItems: ModulePropType[] = [];\nconst defaultActionBarItems: React.ReactNode[] = [];\n\nexport type NavItemsProps = {\n    navItems?: ModulePropType[];\n    containerWidth: number;\n    actionBarItems?: React.ReactNode[];\n};\n\nexport const NavItems = (props: NavItemsProps) => {\n    const {\n        navItems: externalNavItems = defaultNavItems,\n        actionBarItems = defaultActionBarItems,\n        containerWidth,\n    } = props;\n\n    const [isCollapsedNavItemOpen, setIsCollapsedNavItemOpen] = useState(false);\n    const [collapsedNavItems, setCollapsedNavItems] = useState<ModulePropType[]>([]);\n    const [visibleNavItems, setVisibleNavItems] = useState<ModulePropType[]>([]);\n    const [isMeasuring, setIsMeasuring] = useState(true);\n\n    const collapsedDropdownRef = useClickOutside(() => setIsCollapsedNavItemOpen(false));\n\n    const navigationRef = useRef(null);\n    const scheduledMeasurementFrame = useRef<number | null>(null);\n    const postLayoutMeasurementsRemaining = useRef(1);\n\n    const cancelScheduledMeasurementFrame = () => {\n        if (scheduledMeasurementFrame.current !== null) {\n            window.cancelAnimationFrame(scheduledMeasurementFrame.current);\n            scheduledMeasurementFrame.current = null;\n        }\n    };\n\n    // Before any new changes are applied\n    useLayoutEffect(() => {\n        // After the component received new props, every nav item has to be rendered offscreen\n        // again without collapsing them into the dropdown to measure its width\n        cancelScheduledMeasurementFrame();\n        postLayoutMeasurementsRemaining.current = 1;\n        setIsMeasuring(true);\n    }, [externalNavItems, actionBarItems, containerWidth]);\n\n    useLayoutEffect(() => () => cancelScheduledMeasurementFrame(), []);\n\n    // After the component has been rendered\n    useLayoutEffect(() => {\n        // After every nav item was rendered offscreen again we need to recalculate the width\n        // of the items again and render the result with possible collapsible dropdown.\n        if (isMeasuring) {\n            computeNavItems();\n\n            if (postLayoutMeasurementsRemaining.current > 0) {\n                postLayoutMeasurementsRemaining.current -= 1;\n                scheduledMeasurementFrame.current = window.requestAnimationFrame(() => {\n                    scheduledMeasurementFrame.current = null;\n                    setIsMeasuring(true);\n                });\n            }\n        }\n    });\n\n    const getAvailableWidth = (element: HTMLElement) => {\n        // Get relevant elements\n        // const parent = element.parentNode;\n\n        // const actionBar = head(parent.getElementsByClassName('ApplicationActionBar'));\n        // const actionBarWidth = actionBar && actionBar.childElementCount > 0 ? actionBar.scrollWidth : 0;\n\n        // Since the collapsed dropdown has not been rendered yet,\n        // use the fixed with for it to compute available width\n        const availableWidth = element.scrollWidth - collapsedDropdownWidth - paddingLeft;\n        return availableWidth;\n    };\n\n    const computeNavItems = () => {\n        const element: HTMLElement | null = navigationRef.current;\n\n        if (!element) {\n            setIsMeasuring(false);\n            return;\n        }\n\n        const navItems = [...((element as HTMLElement).children || [])];\n\n        const availableWidth = getAvailableWidth(element);\n\n        if (availableWidth < 0) {\n            setVisibleNavItems([]);\n            setCollapsedNavItems(externalNavItems);\n            setIsMeasuring(false);\n            return;\n        }\n\n        // Iterate over all rendered navItems to figure out their widths in order to figure out\n        // which navItems need to be rendered in the collapsed dropdown\n        let requiredNavItemsSize = 0;\n\n        const updatedVisibleItems: ModulePropType[] = [];\n        const updatedCollapsedItems: ModulePropType[] = [];\n\n        navItems.forEach(item => {\n            if (!item.className) {\n                return;\n            }\n\n            // Calculate the remaining width\n            requiredNavItemsSize = requiredNavItemsSize + item.scrollWidth;\n\n            // console.log({ requiredNavItemsSize });\n\n            // Use the navItems.key to find corresponding navItems for each DOM node\n            const matchedNavItem = externalNavItems.find(navItem => {\n                const dataAttr = item.attributes.getNamedItem('data-nav-item-key');\n                return dataAttr && navItem.key === dataAttr.value;\n            });\n\n            if (!matchedNavItem) {\n                return;\n            }\n\n            // Add navItems to the visible group until the available with exceeds.\n            // All other navItems will be added to the collapsed group\n            if (availableWidth > requiredNavItemsSize) {\n                updatedVisibleItems.push(matchedNavItem);\n            } else {\n                updatedCollapsedItems.push(matchedNavItem);\n            }\n        });\n\n        // Set the state to render the navItems again\n        setVisibleNavItems(updatedVisibleItems);\n        setCollapsedNavItems(updatedCollapsedItems);\n        setIsMeasuring(false);\n    };\n\n    const handleCollapsedDropdown = () => {\n        // When the dropdown is open, set showCollapsedNavItems to false so all submodule items\n        // are rendered and their size can be computed\n        if (isCollapsedNavItemOpen) {\n            setIsCollapsedNavItemOpen(false);\n        } else {\n            // When the dropdown is closed, just set the flag to open is enough\n            setIsCollapsedNavItemOpen(true);\n        }\n    };\n\n    const handleCollapsedNavItemSelected = () => {\n        // Close collapsed dropdown on item select\n        if (isCollapsedNavItemOpen) {\n            setIsCollapsedNavItemOpen(false);\n        }\n    };\n\n    const renderNavItem = (navItem: ModulePropType, isItemOffscreen: boolean) => (\n        <li\n            key={navItem.key}\n            className={`submodule ${isItemOffscreen ? 'offscreen' : ''}`}\n            data-nav-item-key={navItem.key}\n        >\n            {navItem.route}\n        </li>\n    );\n\n    const renderNavItems = () => {\n        if (!isMeasuring && !isEmpty(collapsedNavItems)) {\n            const visibleItems = visibleNavItems.map(navItem => renderNavItem(navItem, isMeasuring));\n\n            return [\n                ...visibleItems,\n                <CollapsedNavItem\n                    key='CollapsedNavItem'\n                    ref={collapsedDropdownRef}\n                    show={isCollapsedNavItemOpen}\n                    navItems={collapsedNavItems}\n                    actionBarItems={actionBarItems}\n                    onDropdownClick={handleCollapsedDropdown}\n                    onItemClick={handleCollapsedNavItemSelected}\n                />,\n            ];\n        }\n\n        return externalNavItems.map(navItem => renderNavItem(navItem, isMeasuring));\n    };\n\n    // As all navItems need to be added to the DOM first in order to get their real size\n    // the computation whether a navItem need to be shown under the collapsed dropdown or not\n    // needs to be done after the component did mount to the DOM.\n\n    const classes = classNames('SubmoduleNavigation', 'nav');\n\n    return (\n        <ul className={classes} ref={navigationRef}>\n            {renderNavItems()}\n        </ul>\n    );\n};\n\nexport default NavItems;\n"],"names":["collapsedDropdownWidth","paddingLeft","defaultNavItems","defaultActionBarItems","NavItems","props","externalNavItems","actionBarItems","containerWidth","isCollapsedNavItemOpen","setIsCollapsedNavItemOpen","useState","collapsedNavItems","setCollapsedNavItems","visibleNavItems","setVisibleNavItems","isMeasuring","setIsMeasuring","collapsedDropdownRef","useClickOutside","navigationRef","useRef","scheduledMeasurementFrame","postLayoutMeasurementsRemaining","cancelScheduledMeasurementFrame","useLayoutEffect","computeNavItems","getAvailableWidth","element","navItems","availableWidth","requiredNavItemsSize","updatedVisibleItems","updatedCollapsedItems","item","matchedNavItem","navItem","dataAttr","handleCollapsedDropdown","handleCollapsedNavItemSelected","renderNavItem","isItemOffscreen","jsx","renderNavItems","isEmpty","CollapsedNavItem","classes","classNames"],"mappings":"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"}

package/components/applicationLayout/ApplicationLayoutBody.d.ts

@@ -32,7 +32,7 @@ export type ApplicationLayoutBodyProps = {
     /**
      * Height of the bottomBar in pixel.
      *
-     * @default 54
+     * @default 54 when bottomBar is set
      */
     bottomBarHeight?: number;
     /**

package/components/applicationLayout/ApplicationLayoutBody.js

@@ -1,62 +1,62 @@
-import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { jsxs as c, jsx as t } from "react/jsx-runtime";
 import I, { forwardRef as O, useState as x, useRef as h, useImperativeHandle as _, useEffect as T } from "react";
 import { debounce as k } from "es-toolkit/compat";
 import a from "../../utils/classNames.js";
 import F from "../smoothScrollbars/SmoothScrollbars.js";
-const j = 200, G = 54, Z = O((g, y) => {
+const P = 200, j = 54, Z = O((y, g) => {
   const {
-    className: b,
+    className: N,
     innerClassName: i,
-    forceScrollbar: N = !0,
+    forceScrollbar: b = !0,
     enableScrollToTop: B = !0,
     banner: p,
     navigation: m,
-    bottomBar: s,
-    bottomBarHeight: u = G,
+    bottomBar: e,
+    bottomBarHeight: u = j,
     scrollResetTrigger: S,
-    children: R,
-    ...E
-  } = g, [H, n] = x(0), o = h(null), r = h(null);
-  _(y, () => r?.current, []), T(() => {
-    o.current && (o.current.scrollTop(0), n(0));
+    children: H,
+    ...L
+  } = y, [R, s] = x(0), o = h(null), r = h(null);
+  _(g, () => r?.current, []), T(() => {
+    o.current && (o.current.scrollTop(0), s(0));
   }, [S]), T(() => {
-    r.current?.parentNode instanceof HTMLElement && r.current.parentNode.style.setProperty(
+    r.current?.parentNode instanceof HTMLElement && (e ? r.current.parentNode.style.setProperty(
       "--ApplicationLayoutBodyBottomBarHeight",
       `${u}px`
-    );
-  }, [u]);
-  const L = k(() => {
-    o.current && n(o.current.getScrollTop());
-  }, j), d = () => {
+    ) : r.current.parentNode.style.removeProperty("--ApplicationLayoutBodyBottomBarHeight"));
+  }, [e, u]);
+  const E = k(() => {
+    o.current && s(o.current.getScrollTop());
+  }, P), d = () => {
     if (!o.current)
       return;
-    const l = o.current.container, f = l.firstElementChild, t = f?.scrollTop ?? 0;
-    t > 10 ? (window.requestAnimationFrame(d), f?.scrollTo(0, t - t / 5), l.classList.add("is-scrolling-to-top"), n(t)) : l.classList.remove("is-scrolling-to-top");
-  }, w = a("ApplicationLayoutBody", s ? "has-footer" : "", b), v = a(
+    const l = o.current.container, f = l.firstElementChild, n = f?.scrollTop ?? 0;
+    n > 10 ? (window.requestAnimationFrame(d), f?.scrollTo(0, n - n / 5), l.classList.add("is-scrolling-to-top"), s(n)) : l.classList.remove("is-scrolling-to-top");
+  }, v = a("ApplicationLayoutBody", e ? "has-footer" : "", N), w = a(
     "module-content",
     i && i
-  ), A = window.innerHeight * 0.1, C = a("scroll-to-top", H > A && "in");
+  ), A = window.innerHeight * 0.1, C = a("scroll-to-top", R > A && "in");
   return /* @__PURE__ */ c(I.Fragment, { children: [
-    /* @__PURE__ */ c("div", { ...E, ref: r, className: w, children: [
+    /* @__PURE__ */ c("div", { ...L, ref: r, className: v, children: [
       /* @__PURE__ */ c("div", { className: "module-content-wrapper", children: [
         m && m,
         p && p,
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ t(
           F,
           {
             ref: o,
-            slideIn: !N,
+            slideIn: !b,
             largeTrack: !0,
             trackOffset: !0,
-            className: v,
-            onScroll: L,
-            children: /* @__PURE__ */ e("div", { className: "scrollbar-content", children: R })
+            className: w,
+            onScroll: E,
+            children: /* @__PURE__ */ t("div", { className: "scrollbar-content", children: H })
           }
         )
       ] }),
-      B && /* @__PURE__ */ e("span", { className: C, children: /* @__PURE__ */ e("button", { type: "button", className: "btn btn-primary btn-icon-only", onClick: d, children: /* @__PURE__ */ e("span", { className: "rioglyph rioglyph-arrow-up" }) }) })
+      B && /* @__PURE__ */ t("span", { className: C, children: /* @__PURE__ */ t("button", { type: "button", className: "btn btn-primary btn-icon-only", onClick: d, children: /* @__PURE__ */ t("span", { className: "rioglyph rioglyph-arrow-up" }) }) })
     ] }),
-    s && s
+    e && e
   ] });
 });
 export {

package/components/applicationLayout/ApplicationLayoutBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"ApplicationLayoutBody.js","sources":["../../../src/components/applicationLayout/ApplicationLayoutBody.tsx"],"sourcesContent":["import React, {\n    useState,\n    useRef,\n    useEffect,\n    forwardRef,\n    useImperativeHandle,\n    type PropsWithChildren,\n    type ForwardedRef,\n} from 'react';\nimport { debounce } from 'es-toolkit/compat';\n\nimport type Scrollbars from 'react-custom-scrollbars-4';\n\nimport classNames from '../../utils/classNames';\nimport SmoothScrollbars from '../smoothScrollbars/SmoothScrollbars';\n\nconst RESIZE_THROTTLING = 200;\nconst DEFAULT_BOTTOM_BAR_HEIGHT = 54;\n\nexport type ApplicationLayoutBodyProps = {\n    /**\n     * Show scroll to top button after scrolling the content.\n     *\n     * @default true\n     */\n    enableScrollToTop?: boolean;\n\n    /**\n     * Always show vertical scrollbar to prevent the content from jumping.\n     *\n     * @default true\n     */\n    forceScrollbar?: boolean;\n\n    /**\n     * Prop to trigger scroll reset from outside. This comes in handy when changing the body content\n     * and to reset the scrolling like when the pathname changes from an body internal menu.\n     */\n    scrollResetTrigger?: any;\n\n    /**\n     * The ApplicationLayoutBodyBanner component.\n     */\n    banner?: React.ReactNode;\n\n    /**\n     * The `ApplicationLayoutBodyNavigation` component.\n     */\n    navigation?: React.ReactNode;\n\n    /**\n     * Optional bottom bar component or a simple string.\n     */\n    bottomBar?: React.ReactNode;\n\n    /**\n     * Height of the bottomBar in pixel.\n     *\n     * @default 54\n     */\n    bottomBarHeight?: number;\n\n    /**\n     * Additional class names that are added to the inner module-content component.\n     */\n    innerClassName?: string;\n\n    /**\n     * Additional class names that are added to the respective component.\n     */\n    className?: string;\n};\n\ntype Ref = ForwardedRef<HTMLDivElement>;\ntype Props = PropsWithChildren<ApplicationLayoutBodyProps>;\n\nconst ApplicationLayoutBody = forwardRef((props: Props, ref: Ref) => {\n    const {\n        className,\n        innerClassName,\n        forceScrollbar = true,\n        enableScrollToTop = true,\n        banner,\n        navigation,\n        bottomBar,\n        bottomBarHeight = DEFAULT_BOTTOM_BAR_HEIGHT,\n        scrollResetTrigger,\n        children,\n        ...remainingProps\n    } = props;\n\n    const [offset, setOffset] = useState(0);\n    const moduleContentRef = useRef<Scrollbars>(null);\n    const layoutBodyRef = useRef<HTMLDivElement | null>(null);\n\n    // Use imperative handle to expose the internal layout ref. Usually this is used to\n    // expose internal function without exposing the underlying DOM element.\n    // In this case however, we want access to the element to trigger functions like scrollIntoView()\n    useImperativeHandle<HTMLDivElement, any>(ref, () => layoutBodyRef?.current, []);\n\n    // Reset scroll position when children are different. This fixes the issue of\n    // changing body content (like in another route) and still having the same scroll position\n    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>\n    useEffect(() => {\n        if (moduleContentRef.current) {\n            moduleContentRef.current.scrollTop(0);\n            setOffset(0);\n        }\n    }, [scrollResetTrigger]);\n\n    useEffect(() => {\n        if (layoutBodyRef.current?.parentNode instanceof HTMLElement) {\n            layoutBodyRef.current.parentNode.style.setProperty(\n                '--ApplicationLayoutBodyBottomBarHeight',\n                `${bottomBarHeight}px`\n            );\n        }\n    }, [bottomBarHeight]);\n\n    const handleScroll = debounce(() => {\n        if (moduleContentRef.current) {\n            setOffset(moduleContentRef.current.getScrollTop());\n        }\n    }, RESIZE_THROTTLING);\n\n    const handleToTop = () => {\n        if (!moduleContentRef.current) {\n            return;\n        }\n\n        const scrollWrapper = moduleContentRef.current.container;\n        const scrollingElement = scrollWrapper.firstElementChild;\n        const currentScroll = scrollingElement?.scrollTop ?? 0;\n        const scrollThreshold = 10;\n\n        if (currentScroll > scrollThreshold) {\n            window.requestAnimationFrame(handleToTop);\n            scrollingElement?.scrollTo(0, currentScroll - currentScroll / 5);\n            scrollWrapper.classList.add('is-scrolling-to-top');\n            setOffset(currentScroll);\n        } else {\n            scrollWrapper.classList.remove('is-scrolling-to-top');\n        }\n    };\n\n    const classes = classNames('ApplicationLayoutBody', bottomBar ? 'has-footer' : '', className);\n\n    const innerClasses = classNames(\n        'module-content',\n\n        innerClassName && innerClassName\n    );\n\n    const offsetThreshold = window.innerHeight * 0.1;\n\n    const scrollToTopClasses = classNames('scroll-to-top', offset > offsetThreshold && 'in');\n\n    return (\n        <React.Fragment>\n            <div {...remainingProps} ref={layoutBodyRef} className={classes}>\n                <div className='module-content-wrapper'>\n                    {navigation && navigation}\n                    {banner && banner}\n\n                    <SmoothScrollbars\n                        ref={moduleContentRef}\n                        slideIn={!forceScrollbar}\n                        largeTrack\n                        trackOffset\n                        className={innerClasses}\n                        onScroll={handleScroll}\n                    >\n                        <div className='scrollbar-content'>{children}</div>\n                    </SmoothScrollbars>\n                </div>\n\n                {enableScrollToTop && (\n                    <span className={scrollToTopClasses}>\n                        <button type='button' className='btn btn-primary btn-icon-only' onClick={handleToTop}>\n                            <span className='rioglyph rioglyph-arrow-up' />\n                        </button>\n                    </span>\n                )}\n            </div>\n\n            {bottomBar && bottomBar}\n        </React.Fragment>\n    );\n});\n\nexport default ApplicationLayoutBody;\n"],"names":["RESIZE_THROTTLING","DEFAULT_BOTTOM_BAR_HEIGHT","ApplicationLayoutBody","forwardRef","props","ref","className","innerClassName","forceScrollbar","enableScrollToTop","banner","navigation","bottomBar","bottomBarHeight","scrollResetTrigger","children","remainingProps","offset","setOffset","useState","moduleContentRef","useRef","layoutBodyRef","useImperativeHandle","useEffect","handleScroll","debounce","handleToTop","scrollWrapper","scrollingElement","currentScroll","classes","classNames","innerClasses","offsetThreshold","scrollToTopClasses","jsxs","React","jsx","SmoothScrollbars"],"mappings":";;;;;AAgBA,MAAMA,IAAoB,KACpBC,IAA4B,IA2D5BC,IAAwBC,EAAW,CAACC,GAAcC,MAAa;AACjE,QAAM;AAAA,IACF,WAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,IACjB,mBAAAC,IAAoB;AAAA,IACpB,QAAAC;AAAA,IACA,YAAAC;AAAA,IACA,WAAAC;AAAA,IACA,iBAAAC,IAAkBZ;AAAA,IAClB,oBAAAa;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHZ,GAEE,CAACa,GAAQC,CAAS,IAAIC,EAAS,CAAC,GAChCC,IAAmBC,EAAmB,IAAI,GAC1CC,IAAgBD,EAA8B,IAAI;AAKxD,EAAAE,EAAyClB,GAAK,MAAMiB,GAAe,SAAS,CAAA,CAAE,GAK9EE,EAAU,MAAM;AACZ,IAAIJ,EAAiB,YACjBA,EAAiB,QAAQ,UAAU,CAAC,GACpCF,EAAU,CAAC;AAAA,EAEnB,GAAG,CAACJ,CAAkB,CAAC,GAEvBU,EAAU,MAAM;AACZ,IAAIF,EAAc,SAAS,sBAAsB,eAC7CA,EAAc,QAAQ,WAAW,MAAM;AAAA,MACnC;AAAA,MACA,GAAGT,CAAe;AAAA,IAAA;AAAA,EAG9B,GAAG,CAACA,CAAe,CAAC;AAEpB,QAAMY,IAAeC,EAAS,MAAM;AAChC,IAAIN,EAAiB,WACjBF,EAAUE,EAAiB,QAAQ,cAAc;AAAA,EAEzD,GAAGpB,CAAiB,GAEd2B,IAAc,MAAM;AACtB,QAAI,CAACP,EAAiB;AAClB;AAGJ,UAAMQ,IAAgBR,EAAiB,QAAQ,WACzCS,IAAmBD,EAAc,mBACjCE,IAAgBD,GAAkB,aAAa;AAGrD,IAAIC,IAFoB,MAGpB,OAAO,sBAAsBH,CAAW,GACxCE,GAAkB,SAAS,GAAGC,IAAgBA,IAAgB,CAAC,GAC/DF,EAAc,UAAU,IAAI,qBAAqB,GACjDV,EAAUY,CAAa,KAEvBF,EAAc,UAAU,OAAO,qBAAqB;AAAA,EAE5D,GAEMG,IAAUC,EAAW,yBAAyBpB,IAAY,eAAe,IAAIN,CAAS,GAEtF2B,IAAeD;AAAA,IACjB;AAAA,IAEAzB,KAAkBA;AAAA,EAAA,GAGhB2B,IAAkB,OAAO,cAAc,KAEvCC,IAAqBH,EAAW,iBAAiBf,IAASiB,KAAmB,IAAI;AAEvF,SACI,gBAAAE,EAACC,EAAM,UAAN,EACG,UAAA;AAAA,IAAA,gBAAAD,EAAC,SAAK,GAAGpB,GAAgB,KAAKM,GAAe,WAAWS,GACpD,UAAA;AAAA,MAAA,gBAAAK,EAAC,OAAA,EAAI,WAAU,0BACV,UAAA;AAAA,QAAAzB,KAAcA;AAAA,QACdD,KAAUA;AAAA,QAEX,gBAAA4B;AAAA,UAACC;AAAA,UAAA;AAAA,YACG,KAAKnB;AAAA,YACL,SAAS,CAACZ;AAAA,YACV,YAAU;AAAA,YACV,aAAW;AAAA,YACX,WAAWyB;AAAA,YACX,UAAUR;AAAA,YAEV,UAAA,gBAAAa,EAAC,OAAA,EAAI,WAAU,qBAAqB,UAAAvB,EAAA,CAAS;AAAA,UAAA;AAAA,QAAA;AAAA,MACjD,GACJ;AAAA,MAECN,KACG,gBAAA6B,EAAC,QAAA,EAAK,WAAWH,GACb,UAAA,gBAAAG,EAAC,YAAO,MAAK,UAAS,WAAU,iCAAgC,SAASX,GACrE,UAAA,gBAAAW,EAAC,UAAK,WAAU,8BAA6B,GACjD,EAAA,CACJ;AAAA,IAAA,GAER;AAAA,IAEC1B,KAAaA;AAAA,EAAA,GAClB;AAER,CAAC;"}
+{"version":3,"file":"ApplicationLayoutBody.js","sources":["../../../src/components/applicationLayout/ApplicationLayoutBody.tsx"],"sourcesContent":["import React, {\n    useState,\n    useRef,\n    useEffect,\n    forwardRef,\n    useImperativeHandle,\n    type PropsWithChildren,\n    type ForwardedRef,\n} from 'react';\nimport { debounce } from 'es-toolkit/compat';\n\nimport type Scrollbars from 'react-custom-scrollbars-4';\n\nimport classNames from '../../utils/classNames';\nimport SmoothScrollbars from '../smoothScrollbars/SmoothScrollbars';\n\nconst RESIZE_THROTTLING = 200;\nconst DEFAULT_BOTTOM_BAR_HEIGHT = 54;\n\nexport type ApplicationLayoutBodyProps = {\n    /**\n     * Show scroll to top button after scrolling the content.\n     *\n     * @default true\n     */\n    enableScrollToTop?: boolean;\n\n    /**\n     * Always show vertical scrollbar to prevent the content from jumping.\n     *\n     * @default true\n     */\n    forceScrollbar?: boolean;\n\n    /**\n     * Prop to trigger scroll reset from outside. This comes in handy when changing the body content\n     * and to reset the scrolling like when the pathname changes from an body internal menu.\n     */\n    scrollResetTrigger?: any;\n\n    /**\n     * The ApplicationLayoutBodyBanner component.\n     */\n    banner?: React.ReactNode;\n\n    /**\n     * The `ApplicationLayoutBodyNavigation` component.\n     */\n    navigation?: React.ReactNode;\n\n    /**\n     * Optional bottom bar component or a simple string.\n     */\n    bottomBar?: React.ReactNode;\n\n    /**\n     * Height of the bottomBar in pixel.\n     *\n     * @default 54 when bottomBar is set\n     */\n    bottomBarHeight?: number;\n\n    /**\n     * Additional class names that are added to the inner module-content component.\n     */\n    innerClassName?: string;\n\n    /**\n     * Additional class names that are added to the respective component.\n     */\n    className?: string;\n};\n\ntype Ref = ForwardedRef<HTMLDivElement>;\ntype Props = PropsWithChildren<ApplicationLayoutBodyProps>;\n\nconst ApplicationLayoutBody = forwardRef((props: Props, ref: Ref) => {\n    const {\n        className,\n        innerClassName,\n        forceScrollbar = true,\n        enableScrollToTop = true,\n        banner,\n        navigation,\n        bottomBar,\n        bottomBarHeight = DEFAULT_BOTTOM_BAR_HEIGHT,\n        scrollResetTrigger,\n        children,\n        ...remainingProps\n    } = props;\n\n    const [offset, setOffset] = useState(0);\n    const moduleContentRef = useRef<Scrollbars>(null);\n    const layoutBodyRef = useRef<HTMLDivElement | null>(null);\n\n    // Use imperative handle to expose the internal layout ref. Usually this is used to\n    // expose internal function without exposing the underlying DOM element.\n    // In this case however, we want access to the element to trigger functions like scrollIntoView()\n    useImperativeHandle<HTMLDivElement, any>(ref, () => layoutBodyRef?.current, []);\n\n    // Reset scroll position when children are different. This fixes the issue of\n    // changing body content (like in another route) and still having the same scroll position\n    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>\n    useEffect(() => {\n        if (moduleContentRef.current) {\n            moduleContentRef.current.scrollTop(0);\n            setOffset(0);\n        }\n    }, [scrollResetTrigger]);\n\n    useEffect(() => {\n        if (layoutBodyRef.current?.parentNode instanceof HTMLElement) {\n            if (bottomBar) {\n                layoutBodyRef.current.parentNode.style.setProperty(\n                    '--ApplicationLayoutBodyBottomBarHeight',\n                    `${bottomBarHeight}px`\n                );\n            } else {\n                layoutBodyRef.current.parentNode.style.removeProperty('--ApplicationLayoutBodyBottomBarHeight');\n            }\n        }\n    }, [bottomBar, bottomBarHeight]);\n\n    const handleScroll = debounce(() => {\n        if (moduleContentRef.current) {\n            setOffset(moduleContentRef.current.getScrollTop());\n        }\n    }, RESIZE_THROTTLING);\n\n    const handleToTop = () => {\n        if (!moduleContentRef.current) {\n            return;\n        }\n\n        const scrollWrapper = moduleContentRef.current.container;\n        const scrollingElement = scrollWrapper.firstElementChild;\n        const currentScroll = scrollingElement?.scrollTop ?? 0;\n        const scrollThreshold = 10;\n\n        if (currentScroll > scrollThreshold) {\n            window.requestAnimationFrame(handleToTop);\n            scrollingElement?.scrollTo(0, currentScroll - currentScroll / 5);\n            scrollWrapper.classList.add('is-scrolling-to-top');\n            setOffset(currentScroll);\n        } else {\n            scrollWrapper.classList.remove('is-scrolling-to-top');\n        }\n    };\n\n    const classes = classNames('ApplicationLayoutBody', bottomBar ? 'has-footer' : '', className);\n\n    const innerClasses = classNames(\n        'module-content',\n\n        innerClassName && innerClassName\n    );\n\n    const offsetThreshold = window.innerHeight * 0.1;\n\n    const scrollToTopClasses = classNames('scroll-to-top', offset > offsetThreshold && 'in');\n\n    return (\n        <React.Fragment>\n            <div {...remainingProps} ref={layoutBodyRef} className={classes}>\n                <div className='module-content-wrapper'>\n                    {navigation && navigation}\n                    {banner && banner}\n\n                    <SmoothScrollbars\n                        ref={moduleContentRef}\n                        slideIn={!forceScrollbar}\n                        largeTrack\n                        trackOffset\n                        className={innerClasses}\n                        onScroll={handleScroll}\n                    >\n                        <div className='scrollbar-content'>{children}</div>\n                    </SmoothScrollbars>\n                </div>\n\n                {enableScrollToTop && (\n                    <span className={scrollToTopClasses}>\n                        <button type='button' className='btn btn-primary btn-icon-only' onClick={handleToTop}>\n                            <span className='rioglyph rioglyph-arrow-up' />\n                        </button>\n                    </span>\n                )}\n            </div>\n\n            {bottomBar && bottomBar}\n        </React.Fragment>\n    );\n});\n\nexport default ApplicationLayoutBody;\n"],"names":["RESIZE_THROTTLING","DEFAULT_BOTTOM_BAR_HEIGHT","ApplicationLayoutBody","forwardRef","props","ref","className","innerClassName","forceScrollbar","enableScrollToTop","banner","navigation","bottomBar","bottomBarHeight","scrollResetTrigger","children","remainingProps","offset","setOffset","useState","moduleContentRef","useRef","layoutBodyRef","useImperativeHandle","useEffect","handleScroll","debounce","handleToTop","scrollWrapper","scrollingElement","currentScroll","classes","classNames","innerClasses","offsetThreshold","scrollToTopClasses","jsxs","React","jsx","SmoothScrollbars"],"mappings":";;;;;AAgBA,MAAMA,IAAoB,KACpBC,IAA4B,IA2D5BC,IAAwBC,EAAW,CAACC,GAAcC,MAAa;AACjE,QAAM;AAAA,IACF,WAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,IACjB,mBAAAC,IAAoB;AAAA,IACpB,QAAAC;AAAA,IACA,YAAAC;AAAA,IACA,WAAAC;AAAA,IACA,iBAAAC,IAAkBZ;AAAA,IAClB,oBAAAa;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHZ,GAEE,CAACa,GAAQC,CAAS,IAAIC,EAAS,CAAC,GAChCC,IAAmBC,EAAmB,IAAI,GAC1CC,IAAgBD,EAA8B,IAAI;AAKxD,EAAAE,EAAyClB,GAAK,MAAMiB,GAAe,SAAS,CAAA,CAAE,GAK9EE,EAAU,MAAM;AACZ,IAAIJ,EAAiB,YACjBA,EAAiB,QAAQ,UAAU,CAAC,GACpCF,EAAU,CAAC;AAAA,EAEnB,GAAG,CAACJ,CAAkB,CAAC,GAEvBU,EAAU,MAAM;AACZ,IAAIF,EAAc,SAAS,sBAAsB,gBACzCV,IACAU,EAAc,QAAQ,WAAW,MAAM;AAAA,MACnC;AAAA,MACA,GAAGT,CAAe;AAAA,IAAA,IAGtBS,EAAc,QAAQ,WAAW,MAAM,eAAe,wCAAwC;AAAA,EAG1G,GAAG,CAACV,GAAWC,CAAe,CAAC;AAE/B,QAAMY,IAAeC,EAAS,MAAM;AAChC,IAAIN,EAAiB,WACjBF,EAAUE,EAAiB,QAAQ,cAAc;AAAA,EAEzD,GAAGpB,CAAiB,GAEd2B,IAAc,MAAM;AACtB,QAAI,CAACP,EAAiB;AAClB;AAGJ,UAAMQ,IAAgBR,EAAiB,QAAQ,WACzCS,IAAmBD,EAAc,mBACjCE,IAAgBD,GAAkB,aAAa;AAGrD,IAAIC,IAFoB,MAGpB,OAAO,sBAAsBH,CAAW,GACxCE,GAAkB,SAAS,GAAGC,IAAgBA,IAAgB,CAAC,GAC/DF,EAAc,UAAU,IAAI,qBAAqB,GACjDV,EAAUY,CAAa,KAEvBF,EAAc,UAAU,OAAO,qBAAqB;AAAA,EAE5D,GAEMG,IAAUC,EAAW,yBAAyBpB,IAAY,eAAe,IAAIN,CAAS,GAEtF2B,IAAeD;AAAA,IACjB;AAAA,IAEAzB,KAAkBA;AAAA,EAAA,GAGhB2B,IAAkB,OAAO,cAAc,KAEvCC,IAAqBH,EAAW,iBAAiBf,IAASiB,KAAmB,IAAI;AAEvF,SACI,gBAAAE,EAACC,EAAM,UAAN,EACG,UAAA;AAAA,IAAA,gBAAAD,EAAC,SAAK,GAAGpB,GAAgB,KAAKM,GAAe,WAAWS,GACpD,UAAA;AAAA,MAAA,gBAAAK,EAAC,OAAA,EAAI,WAAU,0BACV,UAAA;AAAA,QAAAzB,KAAcA;AAAA,QACdD,KAAUA;AAAA,QAEX,gBAAA4B;AAAA,UAACC;AAAA,UAAA;AAAA,YACG,KAAKnB;AAAA,YACL,SAAS,CAACZ;AAAA,YACV,YAAU;AAAA,YACV,aAAW;AAAA,YACX,WAAWyB;AAAA,YACX,UAAUR;AAAA,YAEV,UAAA,gBAAAa,EAAC,OAAA,EAAI,WAAU,qBAAqB,UAAAvB,EAAA,CAAS;AAAA,UAAA;AAAA,QAAA;AAAA,MACjD,GACJ;AAAA,MAECN,KACG,gBAAA6B,EAAC,QAAA,EAAK,WAAWH,GACb,UAAA,gBAAAG,EAAC,YAAO,MAAK,UAAS,WAAU,iCAAgC,SAASX,GACrE,UAAA,gBAAAW,EAAC,UAAK,WAAU,8BAA6B,GACjD,EAAA,CACJ;AAAA,IAAA,GAER;AAAA,IAEC1B,KAAaA;AAAA,EAAA,GAClB;AAER,CAAC;"}

package/components/applicationLayout/ApplicationLayoutHeader.js

@@ -1,11 +1,26 @@
-import { jsx as i } from "react/jsx-runtime";
-import { forwardRef as c } from "react";
-import p from "../../utils/classNames.js";
-const d = c((a, o) => {
-  const { className: r, children: e, ...s } = a, t = p("ApplicationLayoutHeader", r);
-  return /* @__PURE__ */ i("div", { ref: o, ...s, className: t, id: "ApplicationLayoutHeader", children: e });
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as H, useRef as c, useImperativeHandle as y, useLayoutEffect as L } from "react";
+import g from "../../utils/classNames.js";
+const N = H((d, l) => {
+  const { className: m, children: r, ...u } = d, e = c(null), a = c(null);
+  y(l, () => e.current, [e]), L(() => {
+    const t = e.current?.parentNode;
+    if (!(t instanceof HTMLElement))
+      return;
+    t.style.removeProperty("--ApplicationLayoutHeaderHeight");
+    const f = window.requestAnimationFrame(() => {
+      const o = a.current, h = o?.firstElementChild instanceof HTMLElement && Number.parseFloat(window.getComputedStyle(o.firstElementChild).borderBottomWidth) || 0, n = o?.offsetHeight ?? e.current?.offsetHeight, i = n ? Math.max(0, n - h) : 0;
+      i && t.style.setProperty(
+        "--ApplicationLayoutHeaderHeight",
+        `${i}px`
+      );
+    });
+    return () => window.cancelAnimationFrame(f);
+  }, [r]);
+  const p = g("ApplicationLayoutHeader", m);
+  return /* @__PURE__ */ s("div", { ref: e, ...u, className: p, id: "ApplicationLayoutHeader", children: /* @__PURE__ */ s("div", { ref: a, className: "ApplicationLayoutHeaderContent", children: r }) });
 });
 export {
-  d as default
+  N as default
 };
 //# sourceMappingURL=ApplicationLayoutHeader.js.map

package/components/applicationLayout/ApplicationLayoutHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ApplicationLayoutHeader.js","sources":["../../../src/components/applicationLayout/ApplicationLayoutHeader.tsx"],"sourcesContent":["import { type ForwardedRef, type PropsWithChildren, forwardRef } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nexport type ApplicationLayoutHeaderProps = {\n    /**\n     * Additional class names that are added to the respective component.\n     */\n    className?: string;\n};\n\ntype Ref = ForwardedRef<HTMLDivElement>;\ntype Props = PropsWithChildren<ApplicationLayoutHeaderProps>;\n\nconst ApplicationLayoutHeader = forwardRef((props: Props, ref: Ref) => {\n    const { className, children, ...remainingProps } = props;\n\n    const classes = classNames('ApplicationLayoutHeader', className);\n\n    return (\n        <div ref={ref} {...remainingProps} className={classes} id='ApplicationLayoutHeader'>\n            {children}\n        </div>\n    );\n});\n\nexport default ApplicationLayoutHeader;\n"],"names":["ApplicationLayoutHeader","forwardRef","props","ref","className","children","remainingProps","classes","classNames","jsx"],"mappings":";;;AAcA,MAAMA,IAA0BC,EAAW,CAACC,GAAcC,MAAa;AACnE,QAAM,EAAE,WAAAC,GAAW,UAAAC,GAAU,GAAGC,MAAmBJ,GAE7CK,IAAUC,EAAW,2BAA2BJ,CAAS;AAE/D,SACI,gBAAAK,EAAC,SAAI,KAAAN,GAAW,GAAGG,GAAgB,WAAWC,GAAS,IAAG,2BACrD,UAAAF,EAAA,CACL;AAER,CAAC;"}
+{"version":3,"file":"ApplicationLayoutHeader.js","sources":["../../../src/components/applicationLayout/ApplicationLayoutHeader.tsx"],"sourcesContent":["import {\n    type ForwardedRef,\n    type PropsWithChildren,\n    forwardRef,\n    useImperativeHandle,\n    useLayoutEffect,\n    useRef,\n} from 'react';\n\nimport classNames from '../../utils/classNames';\n\nexport type ApplicationLayoutHeaderProps = {\n    /**\n     * Additional class names that are added to the respective component.\n     */\n    className?: string;\n};\n\ntype Ref = ForwardedRef<HTMLDivElement>;\ntype Props = PropsWithChildren<ApplicationLayoutHeaderProps>;\n\nconst ApplicationLayoutHeader = forwardRef((props: Props, ref: Ref) => {\n    const { className, children, ...remainingProps } = props;\n\n    const layoutHeaderRef = useRef<HTMLDivElement | null>(null);\n    const layoutHeaderContentRef = useRef<HTMLDivElement | null>(null);\n\n    useImperativeHandle(ref, () => layoutHeaderRef.current as HTMLDivElement, [layoutHeaderRef]);\n\n    useLayoutEffect(() => {\n        const applicationLayout = layoutHeaderRef.current?.parentNode;\n\n        if (!(applicationLayout instanceof HTMLElement)) {\n            return;\n        }\n\n        applicationLayout.style.removeProperty('--ApplicationLayoutHeaderHeight');\n\n        const animationFrameId = window.requestAnimationFrame(() => {\n            const headerContent = layoutHeaderContentRef.current;\n            const headerBorderWidth =\n                headerContent?.firstElementChild instanceof HTMLElement\n                    ? Number.parseFloat(window.getComputedStyle(headerContent.firstElementChild).borderBottomWidth) || 0\n                    : 0;\n            const headerHeight = headerContent?.offsetHeight ?? layoutHeaderRef.current?.offsetHeight;\n            const headerHeightWithoutBorder = headerHeight ? Math.max(0, headerHeight - headerBorderWidth) : 0;\n\n            if (headerHeightWithoutBorder) {\n                applicationLayout.style.setProperty(\n                    '--ApplicationLayoutHeaderHeight',\n                    `${headerHeightWithoutBorder}px`\n                );\n            }\n        });\n\n        return () => window.cancelAnimationFrame(animationFrameId);\n    }, [children]);\n\n    const classes = classNames('ApplicationLayoutHeader', className);\n\n    return (\n        <div ref={layoutHeaderRef} {...remainingProps} className={classes} id='ApplicationLayoutHeader'>\n            <div ref={layoutHeaderContentRef} className='ApplicationLayoutHeaderContent'>\n                {children}\n            </div>\n        </div>\n    );\n});\n\nexport default ApplicationLayoutHeader;\n"],"names":["ApplicationLayoutHeader","forwardRef","props","ref","className","children","remainingProps","layoutHeaderRef","useRef","layoutHeaderContentRef","useImperativeHandle","useLayoutEffect","applicationLayout","animationFrameId","headerContent","headerBorderWidth","headerHeight","headerHeightWithoutBorder","classes","classNames"],"mappings":";;;AAqBA,MAAMA,IAA0BC,EAAW,CAACC,GAAcC,MAAa;AACnE,QAAM,EAAE,WAAAC,GAAW,UAAAC,GAAU,GAAGC,MAAmBJ,GAE7CK,IAAkBC,EAA8B,IAAI,GACpDC,IAAyBD,EAA8B,IAAI;AAEjE,EAAAE,EAAoBP,GAAK,MAAMI,EAAgB,SAA2B,CAACA,CAAe,CAAC,GAE3FI,EAAgB,MAAM;AAClB,UAAMC,IAAoBL,EAAgB,SAAS;AAEnD,QAAI,EAAEK,aAA6B;AAC/B;AAGJ,IAAAA,EAAkB,MAAM,eAAe,iCAAiC;AAExE,UAAMC,IAAmB,OAAO,sBAAsB,MAAM;AACxD,YAAMC,IAAgBL,EAAuB,SACvCM,IACFD,GAAe,6BAA6B,eACtC,OAAO,WAAW,OAAO,iBAAiBA,EAAc,iBAAiB,EAAE,iBAAiB,KAAK,GAErGE,IAAeF,GAAe,gBAAgBP,EAAgB,SAAS,cACvEU,IAA4BD,IAAe,KAAK,IAAI,GAAGA,IAAeD,CAAiB,IAAI;AAEjG,MAAIE,KACAL,EAAkB,MAAM;AAAA,QACpB;AAAA,QACA,GAAGK,CAAyB;AAAA,MAAA;AAAA,IAGxC,CAAC;AAED,WAAO,MAAM,OAAO,qBAAqBJ,CAAgB;AAAA,EAC7D,GAAG,CAACR,CAAQ,CAAC;AAEb,QAAMa,IAAUC,EAAW,2BAA2Bf,CAAS;AAE/D,2BACK,OAAA,EAAI,KAAKG,GAAkB,GAAGD,GAAgB,WAAWY,GAAS,IAAG,2BAClE,4BAAC,OAAA,EAAI,KAAKT,GAAwB,WAAU,kCACvC,UAAAJ,GACL,GACJ;AAER,CAAC;"}

package/components/assetTree/useTreeHeight.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTreeHeight.js","sources":["../../../src/components/assetTree/useTreeHeight.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nconst DEFAULT_TREE_ROOT_HEIGHT = 300;\n\nexport const useTreeHeight = (treeRef: React.RefObject<HTMLDivElement>, scrollHeight?: number) => {\n    const [containerHeight, setContainerHeight] = useState<number>(350);\n\n    // Enhanced height calculation with multiple fallback strategies\n    useEffect(() => {\n        const calculateHeight = () => {\n            if (!treeRef.current) {\n                return DEFAULT_TREE_ROOT_HEIGHT;\n            }\n\n            const parentElement = treeRef.current;\n            const treeHeaderElement = parentElement.querySelector('.TreeHeader');\n\n            if (scrollHeight) {\n                // Use scrollHeight prop if provided\n                return scrollHeight;\n            }\n\n            const treeRoot = treeRef.current.querySelector('.TreeRoot');\n            return treeRoot?.clientHeight ?? DEFAULT_TREE_ROOT_HEIGHT;\n        };\n\n        const updateHeight = () => {\n            const newHeight = calculateHeight();\n            setContainerHeight(newHeight);\n        };\n\n        // Debounce height updates to avoid excessive recalculations\n        let timeoutId: NodeJS.Timeout;\n        const debouncedUpdate = () => {\n            clearTimeout(timeoutId);\n            timeoutId = setTimeout(updateHeight, 16); // ~60fps\n        };\n\n        // Initial calculation with small delay to ensure DOM is ready\n        const initialTimeout = setTimeout(updateHeight, 50);\n\n        // Set up observers\n        const resizeObserver = new ResizeObserver(debouncedUpdate);\n        const mutationObserver = new MutationObserver(debouncedUpdate);\n\n        if (treeRef.current) {\n            // Watch parent for size changes\n            resizeObserver.observe(treeRef.current);\n            if (treeRef.current.parentElement) {\n                resizeObserver.observe(treeRef.current.parentElement);\n            }\n\n            // Watch for DOM changes that might affect layout\n            mutationObserver.observe(treeRef.current, {\n                childList: true,\n                subtree: true,\n                attributes: true,\n                attributeFilter: ['style', 'class'],\n            });\n        }\n\n        // Window resize listener\n        window.addEventListener('resize', debouncedUpdate);\n\n        return () => {\n            clearTimeout(initialTimeout);\n            clearTimeout(timeoutId);\n            resizeObserver.disconnect();\n            mutationObserver.disconnect();\n            window.removeEventListener('resize', debouncedUpdate);\n        };\n    }, [scrollHeight, treeRef]); // Re-run if scrollHeight prop changes or treeRef changes\n\n    return containerHeight;\n};\n"],"names":["DEFAULT_TREE_ROOT_HEIGHT","useTreeHeight","treeRef","scrollHeight","containerHeight","setContainerHeight","useState","useEffect","calculateHeight","updateHeight","newHeight","timeoutId","debouncedUpdate","initialTimeout","resizeObserver","mutationObserver"],"mappings":";AAEA,MAAMA,IAA2B,KAEpBC,IAAgB,CAACC,GAA0CC,MAA0B;AAC9F,QAAM,CAACC,GAAiBC,CAAkB,IAAIC,EAAiB,GAAG;AAGlE,SAAAC,EAAU,MAAM;AACZ,UAAMC,IAAkB,MACfN,EAAQ,WAISA,EAAQ,QACU,cAAc,aAAa,GAE/DC,MAKaD,EAAQ,QAAQ,cAAc,WAAW,GACzC,gBAAgBF,MAZtBA,GAeTS,IAAe,MAAM;AACvB,YAAMC,IAAYF,EAAA;AAClB,MAAAH,EAAmBK,CAAS;AAAA,IAChC;AAGA,QAAIC;AACJ,UAAMC,IAAkB,MAAM;AAC1B,mBAAaD,CAAS,GACtBA,IAAY,WAAWF,GAAc,EAAE;AAAA,IAC3C,GAGMI,IAAiB,WAAWJ,GAAc,EAAE,GAG5CK,IAAiB,IAAI,eAAeF,CAAe,GACnDG,IAAmB,IAAI,iBAAiBH,CAAe;AAE7D,WAAIV,EAAQ,YAERY,EAAe,QAAQZ,EAAQ,OAAO,GAClCA,EAAQ,QAAQ,iBAChBY,EAAe,QAAQZ,EAAQ,QAAQ,aAAa,GAIxDa,EAAiB,QAAQb,EAAQ,SAAS;AAAA,MACtC,WAAW;AAAA,MACX,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,iBAAiB,CAAC,SAAS,OAAO;AAAA,IAAA,CACrC,IAIL,OAAO,iBAAiB,UAAUU,CAAe,GAE1C,MAAM;AACT,mBAAaC,CAAc,GAC3B,aAAaF,CAAS,GACtBG,EAAe,WAAA,GACfC,EAAiB,WAAA,GACjB,OAAO,oBAAoB,UAAUH,CAAe;AAAA,IACxD;AAAA,EACJ,GAAG,CAACT,GAAcD,CAAO,CAAC,GAEnBE;AACX;"}
+{"version":3,"file":"useTreeHeight.js","sources":["../../../src/components/assetTree/useTreeHeight.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nconst DEFAULT_TREE_ROOT_HEIGHT = 300;\n\nexport const useTreeHeight = (treeRef: React.RefObject<HTMLDivElement>, scrollHeight?: number) => {\n    const [containerHeight, setContainerHeight] = useState<number>(350);\n\n    // Enhanced height calculation with multiple fallback strategies\n    useEffect(() => {\n        const calculateHeight = () => {\n            if (!treeRef.current) {\n                return DEFAULT_TREE_ROOT_HEIGHT;\n            }\n\n            const parentElement = treeRef.current;\n            const treeHeaderElement = parentElement.querySelector('.TreeHeader');\n\n            if (scrollHeight) {\n                // Use scrollHeight prop if provided\n                return scrollHeight;\n            }\n\n            const treeRoot = treeRef.current.querySelector('.TreeRoot');\n            return treeRoot?.clientHeight ?? DEFAULT_TREE_ROOT_HEIGHT;\n        };\n\n        const updateHeight = () => {\n            const newHeight = calculateHeight();\n            setContainerHeight(newHeight);\n        };\n\n        // Debounce height updates to avoid excessive recalculations\n        let timeoutId: number | undefined;\n        const debouncedUpdate = () => {\n            clearTimeout(timeoutId);\n            timeoutId = setTimeout(updateHeight, 16); // ~60fps\n        };\n\n        // Initial calculation with small delay to ensure DOM is ready\n        const initialTimeout = setTimeout(updateHeight, 50);\n\n        // Set up observers\n        const resizeObserver = new ResizeObserver(debouncedUpdate);\n        const mutationObserver = new MutationObserver(debouncedUpdate);\n\n        if (treeRef.current) {\n            // Watch parent for size changes\n            resizeObserver.observe(treeRef.current);\n            if (treeRef.current.parentElement) {\n                resizeObserver.observe(treeRef.current.parentElement);\n            }\n\n            // Watch for DOM changes that might affect layout\n            mutationObserver.observe(treeRef.current, {\n                childList: true,\n                subtree: true,\n                attributes: true,\n                attributeFilter: ['style', 'class'],\n            });\n        }\n\n        // Window resize listener\n        window.addEventListener('resize', debouncedUpdate);\n\n        return () => {\n            clearTimeout(initialTimeout);\n            clearTimeout(timeoutId);\n            resizeObserver.disconnect();\n            mutationObserver.disconnect();\n            window.removeEventListener('resize', debouncedUpdate);\n        };\n    }, [scrollHeight, treeRef]); // Re-run if scrollHeight prop changes or treeRef changes\n\n    return containerHeight;\n};\n"],"names":["DEFAULT_TREE_ROOT_HEIGHT","useTreeHeight","treeRef","scrollHeight","containerHeight","setContainerHeight","useState","useEffect","calculateHeight","updateHeight","newHeight","timeoutId","debouncedUpdate","initialTimeout","resizeObserver","mutationObserver"],"mappings":";AAEA,MAAMA,IAA2B,KAEpBC,IAAgB,CAACC,GAA0CC,MAA0B;AAC9F,QAAM,CAACC,GAAiBC,CAAkB,IAAIC,EAAiB,GAAG;AAGlE,SAAAC,EAAU,MAAM;AACZ,UAAMC,IAAkB,MACfN,EAAQ,WAISA,EAAQ,QACU,cAAc,aAAa,GAE/DC,MAKaD,EAAQ,QAAQ,cAAc,WAAW,GACzC,gBAAgBF,MAZtBA,GAeTS,IAAe,MAAM;AACvB,YAAMC,IAAYF,EAAA;AAClB,MAAAH,EAAmBK,CAAS;AAAA,IAChC;AAGA,QAAIC;AACJ,UAAMC,IAAkB,MAAM;AAC1B,mBAAaD,CAAS,GACtBA,IAAY,WAAWF,GAAc,EAAE;AAAA,IAC3C,GAGMI,IAAiB,WAAWJ,GAAc,EAAE,GAG5CK,IAAiB,IAAI,eAAeF,CAAe,GACnDG,IAAmB,IAAI,iBAAiBH,CAAe;AAE7D,WAAIV,EAAQ,YAERY,EAAe,QAAQZ,EAAQ,OAAO,GAClCA,EAAQ,QAAQ,iBAChBY,EAAe,QAAQZ,EAAQ,QAAQ,aAAa,GAIxDa,EAAiB,QAAQb,EAAQ,SAAS;AAAA,MACtC,WAAW;AAAA,MACX,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,iBAAiB,CAAC,SAAS,OAAO;AAAA,IAAA,CACrC,IAIL,OAAO,iBAAiB,UAAUU,CAAe,GAE1C,MAAM;AACT,mBAAaC,CAAc,GAC3B,aAAaF,CAAS,GACtBG,EAAe,WAAA,GACfC,EAAiB,WAAA,GACjB,OAAO,oBAAoB,UAAUH,CAAe;AAAA,IACxD;AAAA,EACJ,GAAG,CAACT,GAAcD,CAAO,CAAC,GAEnBE;AACX;"}

package/components/button/Button.d.ts

@@ -82,8 +82,12 @@ type BaseButtonProps = {
      */
     iconRight?: boolean;
     /**
-     * Optional rio-glyph icon name that comes in handy for icon only buttons for not adding
-     * a span tag for the icon which reduces boilerplate code.
+     * Optional RIOglyph icon class name that comes in handy for icon-only buttons without adding
+     * a separate icon span.
+     *
+     * Use only exact existing `rioglyph-*` classes from the generated UIKIT icon contract,
+     * for example `rioglyph-download`. Do not compose or guess semantic icon names; an unknown
+     * icon class renders as a filled rectangle.
      */
     iconName?: string;
     /**
@@ -143,7 +147,11 @@ type NativeButtonProps = Omit<HTMLProps<HTMLButtonElement>, 'as' | 'type' | 'onC
      */
     as?: 'button';
     /**
-     * Defines the type of the button. This may be used for form submit buttons.
+     * Defines the native button type.
+     *
+     * The Button component renders a native `<button>` with `type="button"` by default.
+     * Only set `type="submit"` when the button should submit a form. Do not add
+     * `type="button"` defensively unless local code style requires explicit defaults.
      *
      * @default 'button'
      */

package/components/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    type ForwardRefExoticComponent,\n    type HTMLProps,\n    type PropsWithChildren,\n    type RefAttributes,\n    useRef,\n    useState,\n} from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport { createButtonRipple } from '../../utils/buttonEffect';\nimport useMergeRefs from '../../hooks/useMergeRefs';\nimport type { ObjectValues } from '../../utils/ObjectValues';\nimport { getAutoTrackingAttributes } from '../../utils/analytics/autoTracking';\n\nexport const STYLES_MAP = {\n    DEFAULT: 'default',\n    UNSTYLED: 'unstyled',\n    PRIMARY: 'primary',\n    SECONDARY: 'secondary',\n    INFO: 'info',\n    WARNING: 'warning',\n    DANGER: 'danger',\n    SUCCESS: 'success',\n    MUTED: 'muted',\n    MUTED_FILLED: 'muted-filled',\n} as const;\n\n// export for convenient usage on client side\nexport type BUTTON_STYLE = ObjectValues<typeof STYLES_MAP>;\n\nexport const VARIANTS_MAP = {\n    VARIANT_LINK: 'link',\n    VARIANT_LINK_INLINE: 'link-inline',\n    VARIANT_OUTLINE: 'outline',\n    VARIANT_ACTION: 'action',\n} as const;\n\nexport type BUTTON_VARIANT = ObjectValues<typeof VARIANTS_MAP>;\n\nexport const SIZES_MAP = {\n    XS: 'xs',\n    SM: 'sm',\n    MD: 'md',\n    LG: 'lg',\n} as const;\n\nexport type BUTTON_SIZE = ObjectValues<typeof SIZES_MAP>;\n\n/*\n *  ATTENTION: We're typing the onClick handler based on the value of `asToggle`.\n *\n *  It does not fully work here inside of this file, though. Therefore, we have to apply some explicit casts below.\n *  In code _using_ the Button component, however, the parameter type of the onClick handler must either be a boolean or\n *  a React.MouseEvent, respectively.\n */\n\ntype RegularButton = {\n    /**\n     * Use the button as a toggle button. The toggle state can be controlled via the `active` prop.\n     *\n     * @default false\n     */\n    asToggle?: false;\n\n    /**\n     * Callback function triggered when clicking the button.\n     *\n     * @param event The MouseEvent that triggered the click.\n     */\n    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n};\n\ntype ToggleButton = {\n    /**\n     * Use the button as a toggle button. The toggle state can be controlled via the `active` prop.\n     *\n     * @default false\n     */\n    asToggle: true;\n\n    /**\n     * Callback function triggered when clicking the button.\n     *\n     * @param value The new value of the toggle button.\n     */\n    onClick?: (value: boolean) => void;\n};\n\ntype BaseButtonProps = {\n    /**\n     * Whether the button should be disabled.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Set the button toggled. Should be used in combination with \"asToggle\" prop.\n     *\n     * @default false\n     */\n    active?: boolean;\n\n    /**\n     * Use when the content of the button is an icon only to adapt the button spacing accordingly.\n     *\n     * @default false\n     */\n    iconOnly?: boolean;\n\n    /**\n     * Adds right side spacing for an icon. This should be used when having navigation buttons\n     * that use an icon on the right side.\n     *\n     * @default false\n     */\n    iconRight?: boolean;\n\n    /**\n     * Optional rio-glyph icon name that comes in handy for icon only buttons for not adding\n     * a span tag for the icon which reduces boilerplate code.\n     */\n    iconName?: string;\n\n    /**\n     * Defines whether the button text break into multiple lines when the button space exceeds.\n     *\n     * Multiline buttons should be used as exception only.\n     *\n     * @default false\n     */\n    multiline?: boolean;\n\n    /**\n     * Defines whether the button takes up the full width of the parent element.\n     *\n     * @default false\n     */\n    block?: boolean;\n\n    /**\n     * Sets the button style.\n     * @default 'default'\n     */\n    bsStyle?: BUTTON_STYLE;\n\n    /**\n     * Sets the button size.\n     */\n    bsSize?: BUTTON_SIZE;\n\n    /**\n     * Sets the button variant.\n     */\n    variant?: BUTTON_VARIANT;\n\n    /**\n     * Whether the \"ripple\" effect should be suppressed on this button.\n     */\n    noRippleEffect?: boolean;\n\n    /**\n     * Optional key used to generate automatic GA tracking attributes when no explicit\n     * tracking attributes are provided.\n     *\n     * Resulting label format: `button::<autoTrackingKey>`.\n     */\n    autoTrackingKey?: string;\n\n    /**\n     * Number of the index used for keyboard support.\n     *\n     * @default 0\n     */\n    tabIndex?: number;\n\n    /**\n     * Additional classes to be set on the button element.\n     */\n    className?: string;\n};\n\ntype NativeButtonProps = Omit<HTMLProps<HTMLButtonElement>, 'as' | 'type' | 'onClick' | 'ref'> &\n    BaseButtonProps & {\n        /**\n         * Defines this component as a native button element.\n         *\n         * @default 'button'\n         */\n        as?: 'button';\n\n        /**\n         * Defines the type of the button. This may be used for form submit buttons.\n         *\n         * @default 'button'\n         */\n        type?: 'button' | 'submit';\n    } & (RegularButton | ToggleButton);\n\ntype LinkButtonProps = Omit<HTMLProps<HTMLAnchorElement>, 'as' | 'type' | 'onClick' | 'ref'> &\n    BaseButtonProps & {\n        /**\n         * Defines this component as a link element.\n         */\n        as: 'a';\n\n        /**\n         * Native button type is not supported when using `as=\"a\"`.\n         */\n        type?: never;\n\n        /**\n         * Defines the destination URL for the link button.\n         */\n        href: string;\n\n        /**\n         * Toggle behavior is not supported when using `as=\"a\"`.\n         *\n         * @default false\n         */\n        asToggle?: false;\n\n        /**\n         * Callback function triggered when clicking the link.\n         *\n         * @param event The MouseEvent that triggered the click.\n         */\n        onClick?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;\n    };\n\nexport type ButtonProps = NativeButtonProps | LinkButtonProps;\n\ntype Props = PropsWithChildren<ButtonProps>;\n\n// Define statics to be used as \"Button.PRIMARY\"\ntype ButtonType = ForwardRefExoticComponent<Props & RefAttributes<HTMLButtonElement>> & {\n    DEFAULT: 'default';\n    UNSTYLED: 'unstyled';\n    PRIMARY: 'primary';\n    SECONDARY: 'secondary';\n    INFO: 'info';\n    WARNING: 'warning';\n    DANGER: 'danger';\n    SUCCESS: 'success';\n    MUTED: 'muted';\n    MUTED_FILLED: 'muted-filled';\n\n    VARIANT_LINK: 'link';\n    VARIANT_LINK_INLINE: 'link-inline';\n    VARIANT_OUTLINE: 'outline';\n    VARIANT_ACTION: 'action';\n\n    XS: 'xs';\n    SM: 'sm';\n    MD: 'md';\n    LG: 'lg';\n};\n\nconst Button = forwardRef<HTMLButtonElement, Props>((props, ref) => {\n    const {\n        as = 'button',\n        active = false,\n        disabled = false,\n        asToggle = false,\n        onClick = noop,\n        bsStyle = 'default',\n        bsSize,\n        variant,\n        iconOnly = false,\n        iconName,\n        iconRight = false,\n        multiline = false,\n        block = false,\n        className = '',\n        noRippleEffect = false,\n        autoTrackingKey,\n        type = 'button',\n        tabIndex = 0,\n        children,\n        ...remainingProps\n    } = props;\n\n    const autoTrackingAttributes = getAutoTrackingAttributes({\n        autoTrackingKey,\n        props: remainingProps as Record<string, unknown>,\n        source: 'button',\n    });\n\n    const [isToggled, setIsToggled] = useState(active);\n\n    const btnRef = useRef<HTMLButtonElement>(null);\n\n    const buttonRef = useMergeRefs(btnRef, ref);\n\n    // Update internal toggle state when used as controlled component and outside toggle state changes\n    // Note, using the usePrevious hook resulted in an endless loop, hence the useState here\n    const [previousActive, setPreviousActive] = useState(active);\n    if (active !== previousActive) {\n        setIsToggled(active);\n        setPreviousActive(active);\n    }\n\n    const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n        if (!noRippleEffect) {\n            createButtonRipple(event.nativeEvent, event.currentTarget);\n        }\n\n        if (asToggle) {\n            // Intercept click handler only for toggle button to update internal state and blur after click\n            const newIsToggled = !isToggled;\n            setIsToggled(newIsToggled);\n\n            if (newIsToggled) {\n                btnRef.current?.blur();\n            }\n\n            (onClick as (x: boolean) => void)(newIsToggled);\n        } else {\n            (onClick as (x: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void)(event);\n        }\n    };\n\n    const handleLinkClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n        if (disabled) {\n            event.preventDefault();\n            return;\n        }\n\n        if (!noRippleEffect) {\n            createButtonRipple(event.nativeEvent, event.currentTarget);\n        }\n\n        (onClick as (x: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void)(event);\n    };\n\n    const buttonClassNames = classNames(\n        'btn',\n        `btn-${bsStyle}`,\n        variant === VARIANTS_MAP.VARIANT_LINK && 'btn-link',\n        variant === VARIANTS_MAP.VARIANT_LINK_INLINE && 'btn-link btn-link-inline',\n        variant === VARIANTS_MAP.VARIANT_OUTLINE && 'btn-outline',\n        variant === VARIANTS_MAP.VARIANT_ACTION && 'btn-action',\n        bsSize && `btn-${bsSize}`,\n        asToggle && 'btn-toggle',\n        isToggled && 'active',\n        iconOnly && 'btn-icon-only',\n        iconRight && 'btn-icon-right',\n        multiline && 'btn-multiline',\n        block && 'btn-block',\n        as === 'a' && 'gap-0',\n        as === 'a' && disabled && 'disabled',\n        'btn-component',\n        className\n    );\n\n    if (as === 'a') {\n        return (\n            <a\n                ref={buttonRef as React.Ref<HTMLAnchorElement>}\n                {...(remainingProps as Omit<HTMLProps<HTMLAnchorElement>, 'as' | 'type' | 'onClick' | 'ref'>)}\n                {...autoTrackingAttributes}\n                className={buttonClassNames}\n                onClick={handleLinkClick}\n                aria-disabled={disabled || undefined}\n                tabIndex={disabled ? -1 : tabIndex}\n            >\n                {iconName && <span className={`rioglyph ${iconName}`} />}\n                {children}\n            </a>\n        );\n    }\n\n    return (\n        <button\n            ref={buttonRef}\n            type={type}\n            {...(remainingProps as Omit<HTMLProps<HTMLButtonElement>, 'as' | 'type' | 'onClick' | 'ref'>)}\n            {...autoTrackingAttributes}\n            className={buttonClassNames}\n            onClick={handleButtonClick}\n            disabled={disabled}\n            tabIndex={tabIndex}\n        >\n            {iconName && <span className={`rioglyph ${iconName}`} />}\n            {children}\n        </button>\n    );\n}) as ButtonType;\n\nObject.assign(Button, STYLES_MAP);\nObject.assign(Button, VARIANTS_MAP);\nObject.assign(Button, SIZES_MAP);\n\nexport default Button;\n"],"names":["STYLES_MAP","VARIANTS_MAP","SIZES_MAP","Button","forwardRef","props","ref","as","active","disabled","asToggle","onClick","noop","bsStyle","bsSize","variant","iconOnly","iconName","iconRight","multiline","block","className","noRippleEffect","autoTrackingKey","type","tabIndex","children","remainingProps","autoTrackingAttributes","getAutoTrackingAttributes","isToggled","setIsToggled","useState","btnRef","useRef","buttonRef","useMergeRefs","previousActive","setPreviousActive","handleButtonClick","event","createButtonRipple","newIsToggled","handleLinkClick","buttonClassNames","classNames","jsxs","jsx"],"mappings":"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"}
+{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    type ForwardRefExoticComponent,\n    type HTMLProps,\n    type PropsWithChildren,\n    type RefAttributes,\n    useRef,\n    useState,\n} from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport { createButtonRipple } from '../../utils/buttonEffect';\nimport useMergeRefs from '../../hooks/useMergeRefs';\nimport type { ObjectValues } from '../../utils/ObjectValues';\nimport { getAutoTrackingAttributes } from '../../utils/analytics/autoTracking';\n\nexport const STYLES_MAP = {\n    DEFAULT: 'default',\n    UNSTYLED: 'unstyled',\n    PRIMARY: 'primary',\n    SECONDARY: 'secondary',\n    INFO: 'info',\n    WARNING: 'warning',\n    DANGER: 'danger',\n    SUCCESS: 'success',\n    MUTED: 'muted',\n    MUTED_FILLED: 'muted-filled',\n} as const;\n\n// export for convenient usage on client side\nexport type BUTTON_STYLE = ObjectValues<typeof STYLES_MAP>;\n\nexport const VARIANTS_MAP = {\n    VARIANT_LINK: 'link',\n    VARIANT_LINK_INLINE: 'link-inline',\n    VARIANT_OUTLINE: 'outline',\n    VARIANT_ACTION: 'action',\n} as const;\n\nexport type BUTTON_VARIANT = ObjectValues<typeof VARIANTS_MAP>;\n\nexport const SIZES_MAP = {\n    XS: 'xs',\n    SM: 'sm',\n    MD: 'md',\n    LG: 'lg',\n} as const;\n\nexport type BUTTON_SIZE = ObjectValues<typeof SIZES_MAP>;\n\n/*\n *  ATTENTION: We're typing the onClick handler based on the value of `asToggle`.\n *\n *  It does not fully work here inside of this file, though. Therefore, we have to apply some explicit casts below.\n *  In code _using_ the Button component, however, the parameter type of the onClick handler must either be a boolean or\n *  a React.MouseEvent, respectively.\n */\n\ntype RegularButton = {\n    /**\n     * Use the button as a toggle button. The toggle state can be controlled via the `active` prop.\n     *\n     * @default false\n     */\n    asToggle?: false;\n\n    /**\n     * Callback function triggered when clicking the button.\n     *\n     * @param event The MouseEvent that triggered the click.\n     */\n    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n};\n\ntype ToggleButton = {\n    /**\n     * Use the button as a toggle button. The toggle state can be controlled via the `active` prop.\n     *\n     * @default false\n     */\n    asToggle: true;\n\n    /**\n     * Callback function triggered when clicking the button.\n     *\n     * @param value The new value of the toggle button.\n     */\n    onClick?: (value: boolean) => void;\n};\n\ntype BaseButtonProps = {\n    /**\n     * Whether the button should be disabled.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Set the button toggled. Should be used in combination with \"asToggle\" prop.\n     *\n     * @default false\n     */\n    active?: boolean;\n\n    /**\n     * Use when the content of the button is an icon only to adapt the button spacing accordingly.\n     *\n     * @default false\n     */\n    iconOnly?: boolean;\n\n    /**\n     * Adds right side spacing for an icon. This should be used when having navigation buttons\n     * that use an icon on the right side.\n     *\n     * @default false\n     */\n    iconRight?: boolean;\n\n    /**\n     * Optional RIOglyph icon class name that comes in handy for icon-only buttons without adding\n     * a separate icon span.\n     *\n     * Use only exact existing `rioglyph-*` classes from the generated UIKIT icon contract,\n     * for example `rioglyph-download`. Do not compose or guess semantic icon names; an unknown\n     * icon class renders as a filled rectangle.\n     */\n    iconName?: string;\n\n    /**\n     * Defines whether the button text break into multiple lines when the button space exceeds.\n     *\n     * Multiline buttons should be used as exception only.\n     *\n     * @default false\n     */\n    multiline?: boolean;\n\n    /**\n     * Defines whether the button takes up the full width of the parent element.\n     *\n     * @default false\n     */\n    block?: boolean;\n\n    /**\n     * Sets the button style.\n     * @default 'default'\n     */\n    bsStyle?: BUTTON_STYLE;\n\n    /**\n     * Sets the button size.\n     */\n    bsSize?: BUTTON_SIZE;\n\n    /**\n     * Sets the button variant.\n     */\n    variant?: BUTTON_VARIANT;\n\n    /**\n     * Whether the \"ripple\" effect should be suppressed on this button.\n     */\n    noRippleEffect?: boolean;\n\n    /**\n     * Optional key used to generate automatic GA tracking attributes when no explicit\n     * tracking attributes are provided.\n     *\n     * Resulting label format: `button::<autoTrackingKey>`.\n     */\n    autoTrackingKey?: string;\n\n    /**\n     * Number of the index used for keyboard support.\n     *\n     * @default 0\n     */\n    tabIndex?: number;\n\n    /**\n     * Additional classes to be set on the button element.\n     */\n    className?: string;\n};\n\ntype NativeButtonProps = Omit<HTMLProps<HTMLButtonElement>, 'as' | 'type' | 'onClick' | 'ref'> &\n    BaseButtonProps & {\n        /**\n         * Defines this component as a native button element.\n         *\n         * @default 'button'\n         */\n        as?: 'button';\n\n        /**\n         * Defines the native button type.\n         *\n         * The Button component renders a native `<button>` with `type=\"button\"` by default.\n         * Only set `type=\"submit\"` when the button should submit a form. Do not add\n         * `type=\"button\"` defensively unless local code style requires explicit defaults.\n         *\n         * @default 'button'\n         */\n        type?: 'button' | 'submit';\n    } & (RegularButton | ToggleButton);\n\ntype LinkButtonProps = Omit<HTMLProps<HTMLAnchorElement>, 'as' | 'type' | 'onClick' | 'ref'> &\n    BaseButtonProps & {\n        /**\n         * Defines this component as a link element.\n         */\n        as: 'a';\n\n        /**\n         * Native button type is not supported when using `as=\"a\"`.\n         */\n        type?: never;\n\n        /**\n         * Defines the destination URL for the link button.\n         */\n        href: string;\n\n        /**\n         * Toggle behavior is not supported when using `as=\"a\"`.\n         *\n         * @default false\n         */\n        asToggle?: false;\n\n        /**\n         * Callback function triggered when clicking the link.\n         *\n         * @param event The MouseEvent that triggered the click.\n         */\n        onClick?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;\n    };\n\nexport type ButtonProps = NativeButtonProps | LinkButtonProps;\n\ntype Props = PropsWithChildren<ButtonProps>;\n\n// Define statics to be used as \"Button.PRIMARY\"\ntype ButtonType = ForwardRefExoticComponent<Props & RefAttributes<HTMLButtonElement>> & {\n    DEFAULT: 'default';\n    UNSTYLED: 'unstyled';\n    PRIMARY: 'primary';\n    SECONDARY: 'secondary';\n    INFO: 'info';\n    WARNING: 'warning';\n    DANGER: 'danger';\n    SUCCESS: 'success';\n    MUTED: 'muted';\n    MUTED_FILLED: 'muted-filled';\n\n    VARIANT_LINK: 'link';\n    VARIANT_LINK_INLINE: 'link-inline';\n    VARIANT_OUTLINE: 'outline';\n    VARIANT_ACTION: 'action';\n\n    XS: 'xs';\n    SM: 'sm';\n    MD: 'md';\n    LG: 'lg';\n};\n\nconst Button = forwardRef<HTMLButtonElement, Props>((props, ref) => {\n    const {\n        as = 'button',\n        active = false,\n        disabled = false,\n        asToggle = false,\n        onClick = noop,\n        bsStyle = 'default',\n        bsSize,\n        variant,\n        iconOnly = false,\n        iconName,\n        iconRight = false,\n        multiline = false,\n        block = false,\n        className = '',\n        noRippleEffect = false,\n        autoTrackingKey,\n        type = 'button',\n        tabIndex = 0,\n        children,\n        ...remainingProps\n    } = props;\n\n    const autoTrackingAttributes = getAutoTrackingAttributes({\n        autoTrackingKey,\n        props: remainingProps as Record<string, unknown>,\n        source: 'button',\n    });\n\n    const [isToggled, setIsToggled] = useState(active);\n\n    const btnRef = useRef<HTMLButtonElement>(null);\n\n    const buttonRef = useMergeRefs(btnRef, ref);\n\n    // Update internal toggle state when used as controlled component and outside toggle state changes\n    // Note, using the usePrevious hook resulted in an endless loop, hence the useState here\n    const [previousActive, setPreviousActive] = useState(active);\n    if (active !== previousActive) {\n        setIsToggled(active);\n        setPreviousActive(active);\n    }\n\n    const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n        if (!noRippleEffect) {\n            createButtonRipple(event.nativeEvent, event.currentTarget);\n        }\n\n        if (asToggle) {\n            // Intercept click handler only for toggle button to update internal state and blur after click\n            const newIsToggled = !isToggled;\n            setIsToggled(newIsToggled);\n\n            if (newIsToggled) {\n                btnRef.current?.blur();\n            }\n\n            (onClick as (x: boolean) => void)(newIsToggled);\n        } else {\n            (onClick as (x: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void)(event);\n        }\n    };\n\n    const handleLinkClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n        if (disabled) {\n            event.preventDefault();\n            return;\n        }\n\n        if (!noRippleEffect) {\n            createButtonRipple(event.nativeEvent, event.currentTarget);\n        }\n\n        (onClick as (x: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void)(event);\n    };\n\n    const buttonClassNames = classNames(\n        'btn',\n        `btn-${bsStyle}`,\n        variant === VARIANTS_MAP.VARIANT_LINK && 'btn-link',\n        variant === VARIANTS_MAP.VARIANT_LINK_INLINE && 'btn-link btn-link-inline',\n        variant === VARIANTS_MAP.VARIANT_OUTLINE && 'btn-outline',\n        variant === VARIANTS_MAP.VARIANT_ACTION && 'btn-action',\n        bsSize && `btn-${bsSize}`,\n        asToggle && 'btn-toggle',\n        isToggled && 'active',\n        iconOnly && 'btn-icon-only',\n        iconRight && 'btn-icon-right',\n        multiline && 'btn-multiline',\n        block && 'btn-block',\n        as === 'a' && 'gap-0',\n        as === 'a' && disabled && 'disabled',\n        'btn-component',\n        className\n    );\n\n    if (as === 'a') {\n        return (\n            <a\n                ref={buttonRef as React.Ref<HTMLAnchorElement>}\n                {...(remainingProps as Omit<HTMLProps<HTMLAnchorElement>, 'as' | 'type' | 'onClick' | 'ref'>)}\n                {...autoTrackingAttributes}\n                className={buttonClassNames}\n                onClick={handleLinkClick}\n                aria-disabled={disabled || undefined}\n                tabIndex={disabled ? -1 : tabIndex}\n            >\n                {iconName && <span className={`rioglyph ${iconName}`} />}\n                {children}\n            </a>\n        );\n    }\n\n    return (\n        <button\n            ref={buttonRef}\n            type={type}\n            {...(remainingProps as Omit<HTMLProps<HTMLButtonElement>, 'as' | 'type' | 'onClick' | 'ref'>)}\n            {...autoTrackingAttributes}\n            className={buttonClassNames}\n            onClick={handleButtonClick}\n            disabled={disabled}\n            tabIndex={tabIndex}\n        >\n            {iconName && <span className={`rioglyph ${iconName}`} />}\n            {children}\n        </button>\n    );\n}) as ButtonType;\n\nObject.assign(Button, STYLES_MAP);\nObject.assign(Button, VARIANTS_MAP);\nObject.assign(Button, SIZES_MAP);\n\nexport default Button;\n"],"names":["STYLES_MAP","VARIANTS_MAP","SIZES_MAP","Button","forwardRef","props","ref","as","active","disabled","asToggle","onClick","noop","bsStyle","bsSize","variant","iconOnly","iconName","iconRight","multiline","block","className","noRippleEffect","autoTrackingKey","type","tabIndex","children","remainingProps","autoTrackingAttributes","getAutoTrackingAttributes","isToggled","setIsToggled","useState","btnRef","useRef","buttonRef","useMergeRefs","previousActive","setPreviousActive","handleButtonClick","event","createButtonRipple","newIsToggled","handleLinkClick","buttonClassNames","classNames","jsxs","jsx"],"mappings":"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"}

package/components/clearableInput/ClearableInput.d.ts

@@ -163,6 +163,10 @@ export type ClearableInputProps = {
      * Parses the masked string representation back to a typed date value.
      */
     parse?: (value: string, masked: unknown) => Date | null;
+    /**
+     * Custom IMask blocks for pattern masks.
+     */
+    blocks?: Record<string, unknown>;
     /**
      * Enables IMask autofix behavior for date and number masks.
      */