@rio-cloud/rio-uikit 2.3.0-beta.2 → 2.3.0

package/components/datepicker/useStackedDayPickerCalendars.js

@@ -1,39 +1,39 @@
-import { useState as S, useCallback as E, useEffect as y } from "react";
-import R from "../../hooks/useResizeObserver.js";
-import W from "../../hooks/useWindowResize.js";
-const A = 480, B = (m = []) => {
-  const [r, , { inlineSize: a }] = R(), [f, n] = S(!1), o = E(() => {
-    const e = r.current;
-    if (!e || typeof window > "u")
+import { useState as A, useCallback as b, useEffect as B } from "react";
+import M from "../../hooks/useResizeObserver.js";
+import k from "../../hooks/useWindowResize.js";
+const q = 480, _ = (f = []) => {
+  const [l, , { inlineSize: u }] = M(), [g, o] = A(!1), s = b(() => {
+    const n = l.current;
+    if (!n || typeof window > "u")
       return;
-    const t = e.querySelector(".rdp-months"), s = t ? Array.from(t.querySelectorAll(".rdp-month")) : [], d = s[0];
-    if (!t || !d) {
-      n(!1);
+    const r = n.querySelector(".rdp-months"), d = r ? Array.from(r.querySelectorAll(".rdp-month")) : [], m = d[0];
+    if (!r || !m) {
+      o(!1);
       return;
     }
-    const l = e.parentElement, i = window.document.documentElement.clientWidth;
-    if (!l || !a || !i) {
-      n(!1);
+    const i = n.parentElement, a = i?.parentElement, h = a?.parentElement, c = window.document.documentElement.clientWidth;
+    if (!i || !a || !h || !u || !c) {
+      o(!1);
       return;
     }
-    if (i < A) {
-      n(!1);
+    if (c < q) {
+      o(!1);
       return;
     }
-    const h = Number.parseFloat(window.getComputedStyle(t).columnGap || "0") || 0, p = d.getBoundingClientRect().width, w = Math.max(
+    const p = Number.parseFloat(window.getComputedStyle(r).columnGap || "0") || 0, w = m.getBoundingClientRect().width, C = Math.max(
       0,
-      e.getBoundingClientRect().width - t.getBoundingClientRect().width
-    ), C = p * s.length + h * (s.length - 1) + w, g = Array.from(l.children).reduce((c, u) => u === e ? c : c + u.getBoundingClientRect().width, 0);
-    n(C + g > i - 32);
-  }, [a, r]);
-  return W(o), y(() => {
-    o();
-  }, [o, ...m]), {
-    calendarsRef: r,
-    stackCalendars: f
+      n.getBoundingClientRect().width - r.getBoundingClientRect().width
+    ), E = w * d.length + p * (d.length - 1) + C, S = Array.from(i.children).reduce((e, t) => t === n ? e : e + t.getBoundingClientRect().width, 0), R = Array.from(a.children).reduce((e, t) => t === i ? e : Math.max(e, t.getBoundingClientRect().width), 0), y = Array.from(h.children).reduce((e, t) => t === a ? e : e + t.getBoundingClientRect().width, 0), W = Math.max(E + S, R);
+    o(W + y > c - 32);
+  }, [u, l]);
+  return k(s), B(() => {
+    s();
+  }, [s, ...f]), {
+    calendarsRef: l,
+    stackCalendars: g
   };
 };
 export {
-  B as default
+  _ as default
 };
 //# sourceMappingURL=useStackedDayPickerCalendars.js.map

package/components/datepicker/useStackedDayPickerCalendars.js.map

@@ -1 +1 @@
-{"version":3,"file":"useStackedDayPickerCalendars.js","sources":["../../../src/components/datepicker/useStackedDayPickerCalendars.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\n\nimport useResizeObserver from '../../hooks/useResizeObserver';\nimport useWindowResize from '../../hooks/useWindowResize';\n\nconst STACKED_CALENDARS_XS_MAX = 480;\n\nconst useStackedDayPickerCalendars = (dependencies: readonly unknown[] = []) => {\n    const [calendarsRef, , { inlineSize: calendarsInlineSize }] = useResizeObserver<HTMLDivElement>();\n    const [stackCalendars, setStackCalendars] = useState(false);\n\n    const updateCalendarLayout = useCallback(() => {\n        const calendarsElement = calendarsRef.current;\n        if (!calendarsElement || typeof window === 'undefined') {\n            return;\n        }\n\n        const monthsWrapper = calendarsElement.querySelector<HTMLElement>('.rdp-months');\n        const monthElements = monthsWrapper\n            ? Array.from(monthsWrapper.querySelectorAll<HTMLElement>('.rdp-month'))\n            : [];\n        const firstMonthElement = monthElements[0];\n\n        if (!monthsWrapper || !firstMonthElement) {\n            setStackCalendars(false);\n            return;\n        }\n\n        const rowElement = calendarsElement.parentElement;\n        const viewportWidth = window.document.documentElement.clientWidth;\n\n        if (!rowElement || !calendarsInlineSize || !viewportWidth) {\n            setStackCalendars(false);\n            return;\n        }\n\n        // XS layouts are always stacked via CSS so Popper measures the compact layout immediately.\n        if (viewportWidth < STACKED_CALENDARS_XS_MAX) {\n            setStackCalendars(false);\n            return;\n        }\n\n        const monthsGap = Number.parseFloat(window.getComputedStyle(monthsWrapper).columnGap || '0') || 0;\n        const monthWidth = firstMonthElement.getBoundingClientRect().width;\n        const calendarsExtraWidth = Math.max(\n            0,\n            calendarsElement.getBoundingClientRect().width - monthsWrapper.getBoundingClientRect().width\n        );\n        const requiredCalendarsWidth =\n            monthWidth * monthElements.length + monthsGap * (monthElements.length - 1) + calendarsExtraWidth;\n        const siblingWidth = Array.from(rowElement.children).reduce((sum, child) => {\n            if (child === calendarsElement) {\n                return sum;\n            }\n\n            return sum + (child as HTMLElement).getBoundingClientRect().width;\n        }, 0);\n\n        setStackCalendars(requiredCalendarsWidth + siblingWidth > viewportWidth - 32);\n    }, [calendarsInlineSize, calendarsRef]);\n\n    useWindowResize(updateCalendarLayout);\n\n    useEffect(() => {\n        updateCalendarLayout();\n    }, [updateCalendarLayout, ...dependencies]);\n\n    return {\n        calendarsRef,\n        stackCalendars,\n    };\n};\n\nexport default useStackedDayPickerCalendars;\n"],"names":["STACKED_CALENDARS_XS_MAX","useStackedDayPickerCalendars","dependencies","calendarsRef","calendarsInlineSize","useResizeObserver","stackCalendars","setStackCalendars","useState","updateCalendarLayout","useCallback","calendarsElement","monthsWrapper","monthElements","firstMonthElement","rowElement","viewportWidth","monthsGap","monthWidth","calendarsExtraWidth","requiredCalendarsWidth","siblingWidth","sum","child","useWindowResize","useEffect"],"mappings":";;;AAKA,MAAMA,IAA2B,KAE3BC,IAA+B,CAACC,IAAmC,OAAO;AAC5E,QAAM,CAACC,KAAgB,EAAE,YAAYC,EAAA,CAAqB,IAAIC,EAAA,GACxD,CAACC,GAAgBC,CAAiB,IAAIC,EAAS,EAAK,GAEpDC,IAAuBC,EAAY,MAAM;AAC3C,UAAMC,IAAmBR,EAAa;AACtC,QAAI,CAACQ,KAAoB,OAAO,SAAW;AACvC;AAGJ,UAAMC,IAAgBD,EAAiB,cAA2B,aAAa,GACzEE,IAAgBD,IAChB,MAAM,KAAKA,EAAc,iBAA8B,YAAY,CAAC,IACpE,CAAA,GACAE,IAAoBD,EAAc,CAAC;AAEzC,QAAI,CAACD,KAAiB,CAACE,GAAmB;AACtC,MAAAP,EAAkB,EAAK;AACvB;AAAA,IACJ;AAEA,UAAMQ,IAAaJ,EAAiB,eAC9BK,IAAgB,OAAO,SAAS,gBAAgB;AAEtD,QAAI,CAACD,KAAc,CAACX,KAAuB,CAACY,GAAe;AACvD,MAAAT,EAAkB,EAAK;AACvB;AAAA,IACJ;AAGA,QAAIS,IAAgBhB,GAA0B;AAC1C,MAAAO,EAAkB,EAAK;AACvB;AAAA,IACJ;AAEA,UAAMU,IAAY,OAAO,WAAW,OAAO,iBAAiBL,CAAa,EAAE,aAAa,GAAG,KAAK,GAC1FM,IAAaJ,EAAkB,sBAAA,EAAwB,OACvDK,IAAsB,KAAK;AAAA,MAC7B;AAAA,MACAR,EAAiB,sBAAA,EAAwB,QAAQC,EAAc,wBAAwB;AAAA,IAAA,GAErFQ,IACFF,IAAaL,EAAc,SAASI,KAAaJ,EAAc,SAAS,KAAKM,GAC3EE,IAAe,MAAM,KAAKN,EAAW,QAAQ,EAAE,OAAO,CAACO,GAAKC,MAC1DA,MAAUZ,IACHW,IAGJA,IAAOC,EAAsB,sBAAA,EAAwB,OAC7D,CAAC;AAEJ,IAAAhB,EAAkBa,IAAyBC,IAAeL,IAAgB,EAAE;AAAA,EAChF,GAAG,CAACZ,GAAqBD,CAAY,CAAC;AAEtC,SAAAqB,EAAgBf,CAAoB,GAEpCgB,EAAU,MAAM;AACZ,IAAAhB,EAAA;AAAA,EACJ,GAAG,CAACA,GAAsB,GAAGP,CAAY,CAAC,GAEnC;AAAA,IACH,cAAAC;AAAA,IACA,gBAAAG;AAAA,EAAA;AAER;"}
+{"version":3,"file":"useStackedDayPickerCalendars.js","sources":["../../../src/components/datepicker/useStackedDayPickerCalendars.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\n\nimport useResizeObserver from '../../hooks/useResizeObserver';\nimport useWindowResize from '../../hooks/useWindowResize';\n\nconst STACKED_CALENDARS_XS_MAX = 480;\n\nconst useStackedDayPickerCalendars = (dependencies: readonly unknown[] = []) => {\n    const [calendarsRef, , { inlineSize: calendarsInlineSize }] = useResizeObserver<HTMLDivElement>();\n    const [stackCalendars, setStackCalendars] = useState(false);\n\n    const updateCalendarLayout = useCallback(() => {\n        const calendarsElement = calendarsRef.current;\n        if (!calendarsElement || typeof window === 'undefined') {\n            return;\n        }\n\n        const monthsWrapper = calendarsElement.querySelector<HTMLElement>('.rdp-months');\n        const monthElements = monthsWrapper\n            ? Array.from(monthsWrapper.querySelectorAll<HTMLElement>('.rdp-month'))\n            : [];\n        const firstMonthElement = monthElements[0];\n\n        if (!monthsWrapper || !firstMonthElement) {\n            setStackCalendars(false);\n            return;\n        }\n\n        const rowElement = calendarsElement.parentElement;\n        const mainColumnElement = rowElement?.parentElement;\n        const outerRowElement = mainColumnElement?.parentElement;\n        const viewportWidth = window.document.documentElement.clientWidth;\n\n        if (!rowElement || !mainColumnElement || !outerRowElement || !calendarsInlineSize || !viewportWidth) {\n            setStackCalendars(false);\n            return;\n        }\n\n        // XS layouts are always stacked via CSS so Popper measures the compact layout immediately.\n        if (viewportWidth < STACKED_CALENDARS_XS_MAX) {\n            setStackCalendars(false);\n            return;\n        }\n\n        const monthsGap = Number.parseFloat(window.getComputedStyle(monthsWrapper).columnGap || '0') || 0;\n        const monthWidth = firstMonthElement.getBoundingClientRect().width;\n\n        const calendarsExtraWidth = Math.max(\n            0,\n            calendarsElement.getBoundingClientRect().width - monthsWrapper.getBoundingClientRect().width\n        );\n\n        const requiredCalendarsWidth =\n            monthWidth * monthElements.length + monthsGap * (monthElements.length - 1) + calendarsExtraWidth;\n\n        const rowSiblingWidth = Array.from(rowElement.children).reduce((sum, child) => {\n            if (child === calendarsElement) {\n                return sum;\n            }\n\n            return sum + (child as HTMLElement).getBoundingClientRect().width;\n        }, 0);\n\n        const mainColumnSiblingWidth = Array.from(mainColumnElement.children).reduce((maxWidth, child) => {\n            if (child === rowElement) {\n                return maxWidth;\n            }\n\n            return Math.max(maxWidth, (child as HTMLElement).getBoundingClientRect().width);\n        }, 0);\n\n        const outerRowSiblingWidth = Array.from(outerRowElement.children).reduce((sum, child) => {\n            if (child === mainColumnElement) {\n                return sum;\n            }\n\n            return sum + (child as HTMLElement).getBoundingClientRect().width;\n        }, 0);\n\n        const requiredMainColumnWidth = Math.max(requiredCalendarsWidth + rowSiblingWidth, mainColumnSiblingWidth);\n\n        setStackCalendars(requiredMainColumnWidth + outerRowSiblingWidth > viewportWidth - 32);\n    }, [calendarsInlineSize, calendarsRef]);\n\n    useWindowResize(updateCalendarLayout);\n\n    useEffect(() => {\n        updateCalendarLayout();\n    }, [updateCalendarLayout, ...dependencies]);\n\n    return {\n        calendarsRef,\n        stackCalendars,\n    };\n};\n\nexport default useStackedDayPickerCalendars;\n"],"names":["STACKED_CALENDARS_XS_MAX","useStackedDayPickerCalendars","dependencies","calendarsRef","calendarsInlineSize","useResizeObserver","stackCalendars","setStackCalendars","useState","updateCalendarLayout","useCallback","calendarsElement","monthsWrapper","monthElements","firstMonthElement","rowElement","mainColumnElement","outerRowElement","viewportWidth","monthsGap","monthWidth","calendarsExtraWidth","requiredCalendarsWidth","rowSiblingWidth","sum","child","mainColumnSiblingWidth","maxWidth","outerRowSiblingWidth","requiredMainColumnWidth","useWindowResize","useEffect"],"mappings":";;;AAKA,MAAMA,IAA2B,KAE3BC,IAA+B,CAACC,IAAmC,OAAO;AAC5E,QAAM,CAACC,KAAgB,EAAE,YAAYC,EAAA,CAAqB,IAAIC,EAAA,GACxD,CAACC,GAAgBC,CAAiB,IAAIC,EAAS,EAAK,GAEpDC,IAAuBC,EAAY,MAAM;AAC3C,UAAMC,IAAmBR,EAAa;AACtC,QAAI,CAACQ,KAAoB,OAAO,SAAW;AACvC;AAGJ,UAAMC,IAAgBD,EAAiB,cAA2B,aAAa,GACzEE,IAAgBD,IAChB,MAAM,KAAKA,EAAc,iBAA8B,YAAY,CAAC,IACpE,CAAA,GACAE,IAAoBD,EAAc,CAAC;AAEzC,QAAI,CAACD,KAAiB,CAACE,GAAmB;AACtC,MAAAP,EAAkB,EAAK;AACvB;AAAA,IACJ;AAEA,UAAMQ,IAAaJ,EAAiB,eAC9BK,IAAoBD,GAAY,eAChCE,IAAkBD,GAAmB,eACrCE,IAAgB,OAAO,SAAS,gBAAgB;AAEtD,QAAI,CAACH,KAAc,CAACC,KAAqB,CAACC,KAAmB,CAACb,KAAuB,CAACc,GAAe;AACjG,MAAAX,EAAkB,EAAK;AACvB;AAAA,IACJ;AAGA,QAAIW,IAAgBlB,GAA0B;AAC1C,MAAAO,EAAkB,EAAK;AACvB;AAAA,IACJ;AAEA,UAAMY,IAAY,OAAO,WAAW,OAAO,iBAAiBP,CAAa,EAAE,aAAa,GAAG,KAAK,GAC1FQ,IAAaN,EAAkB,sBAAA,EAAwB,OAEvDO,IAAsB,KAAK;AAAA,MAC7B;AAAA,MACAV,EAAiB,sBAAA,EAAwB,QAAQC,EAAc,wBAAwB;AAAA,IAAA,GAGrFU,IACFF,IAAaP,EAAc,SAASM,KAAaN,EAAc,SAAS,KAAKQ,GAE3EE,IAAkB,MAAM,KAAKR,EAAW,QAAQ,EAAE,OAAO,CAACS,GAAKC,MAC7DA,MAAUd,IACHa,IAGJA,IAAOC,EAAsB,sBAAA,EAAwB,OAC7D,CAAC,GAEEC,IAAyB,MAAM,KAAKV,EAAkB,QAAQ,EAAE,OAAO,CAACW,GAAUF,MAChFA,MAAUV,IACHY,IAGJ,KAAK,IAAIA,GAAWF,EAAsB,sBAAA,EAAwB,KAAK,GAC/E,CAAC,GAEEG,IAAuB,MAAM,KAAKX,EAAgB,QAAQ,EAAE,OAAO,CAACO,GAAKC,MACvEA,MAAUT,IACHQ,IAGJA,IAAOC,EAAsB,sBAAA,EAAwB,OAC7D,CAAC,GAEEI,IAA0B,KAAK,IAAIP,IAAyBC,GAAiBG,CAAsB;AAEzG,IAAAnB,EAAkBsB,IAA0BD,IAAuBV,IAAgB,EAAE;AAAA,EACzF,GAAG,CAACd,GAAqBD,CAAY,CAAC;AAEtC,SAAA2B,EAAgBrB,CAAoB,GAEpCsB,EAAU,MAAM;AACZ,IAAAtB,EAAA;AAAA,EACJ,GAAG,CAACA,GAAsB,GAAGP,CAAY,CAAC,GAEnC;AAAA,IACH,cAAAC;AAAA,IACA,gBAAAG;AAAA,EAAA;AAER;"}

package/components/dropdown/ButtonDropdown.d.ts

@@ -7,6 +7,10 @@ export type ButtonDropdownProps<T extends DropdownToggleButtonType = 'button'> =
      * Unique button id. If not present a random id is generated.
      */
     id?: string;
+    /**
+     * Accessible label applied to the dropdown toggle button.
+     */
+    'aria-label'?: string;
     /**
      * The button title. This may be also a node, like a <span> or a <FormattedMessage>.
      */

package/components/dropdown/ButtonDropdown.js

@@ -1,124 +1,126 @@
 import { jsx as i, jsxs as h } from "react/jsx-runtime";
-import { forwardRef as so, useState as c, useEffect as lo } from "react";
+import { forwardRef as lo, useState as c, useEffect as ao } from "react";
 import po from "react-dom";
-import { usePopper as ao } from "react-popper";
+import { usePopper as io } from "react-popper";
 import { noop as u } from "es-toolkit/function";
-import { isNil as io } from "es-toolkit/predicate";
+import { isNil as co } from "es-toolkit/predicate";
 import P from "../../utils/classNames.js";
-import { getOrCreatePortalRoot as co } from "../../utils/portalRoot.js";
-import fo, { DEFAULT_EVENT_TYPES as mo } from "../../hooks/useClickOutside.js";
-import uo from "../menuItems/MenuItems.js";
-import go from "../menuItems/MenuItemList.js";
-import wo from "./DropdownToggleButton.js";
-import Co from "./SplitCaretButton.js";
+import { getOrCreatePortalRoot as fo } from "../../utils/portalRoot.js";
+import mo, { DEFAULT_EVENT_TYPES as uo } from "../../hooks/useClickOutside.js";
+import go from "../menuItems/MenuItems.js";
+import wo from "../menuItems/MenuItemList.js";
+import Co from "./DropdownToggleButton.js";
+import bo from "./SplitCaretButton.js";
 import Bo from "./Caret.js";
-const Do = (r, s) => r && s ? "top-end" : !r && s ? "top-start" : r && !s ? "bottom-end" : "bottom-start", No = () => so((r, s) => {
+const Do = (r, s) => r && s ? "top-end" : !r && s ? "top-start" : r && !s ? "bottom-end" : "bottom-start", No = () => lo((r, s) => {
   const {
     id: g = Math.random().toString(36).slice(2, 16),
-    items: R = [],
+    "aria-label": R,
+    items: T = [],
     bsSize: w = "md",
     bsStyle: C = "default",
-    variant: T,
-    disabled: B = !1,
-    iconName: k,
-    iconOnly: D = !1,
-    title: y,
-    splitButton: t = !1,
-    customDropdown: N,
-    open: e,
-    dropup: E = !1,
+    variant: k,
+    disabled: b = !1,
+    iconName: y,
+    iconOnly: B = !1,
+    title: E,
+    splitButton: e = !1,
+    customDropdown: D,
+    open: t,
+    dropup: L = !1,
     pullRight: f = !1,
-    noCaret: L = !1,
-    onOpen: x = u,
-    onClose: I = u,
-    onLabelButtonClick: j = u,
+    noCaret: x = !1,
+    onOpen: I = u,
+    onClose: j = u,
+    onLabelButtonClick: U = u,
     usePortal: l = !1,
-    popperConfig: U,
-    toggleButtonType: _ = "button",
-    toggleClassName: O = "",
-    dropdownClassName: v,
-    className: z = "",
-    ...A
-  } = r, [S, m] = c(e), [F, V] = c(null), [b, Y] = c(null), [q, G] = c(null), H = {
-    placement: Do(f, E),
+    popperConfig: _,
+    toggleButtonType: v = "button",
+    toggleClassName: N = "",
+    dropdownClassName: z,
+    className: A = "",
+    ...F
+  } = r, [O, m] = c(t), [V, Y] = c(null), [S, q] = c(null), [G, H] = c(null), J = {
+    placement: Do(f, L),
     modifiers: []
-  }, J = t && f ? q : F, { styles: K, attributes: Q } = ao(J, b, U || H), n = io(e), p = n ? S : e, W = fo(
+  }, K = e && f ? G : V, { styles: Q, attributes: W } = io(K, S, _ || J), n = co(t), a = n ? O : t, X = mo(
     (o) => {
-      l && b?.contains(o.target) || a();
+      l && S?.contains(o.target) || p();
     },
-    mo,
-    !!p
+    uo,
+    !!a
     // only listen to clicks outside when the dropdown is open
-  ), X = co(), Z = !L && !t && !D;
-  lo(() => {
-    n || m(e);
-  }, [n, e]);
+  ), Z = fo(), $ = !x && !e && !B;
+  ao(() => {
+    n || m(t);
+  }, [n, t]);
   const d = (o) => {
-    (n ? S : e) ? a() : $(o);
-  }, $ = (o) => {
-    n && m(!0), o && x(o);
-  }, a = () => {
-    n && m(!1), I();
-  }, oo = () => {
-    a(), j();
+    (n ? O : t) ? p() : oo(o);
+  }, oo = (o) => {
+    n && m(!0), o && I(o);
+  }, p = () => {
+    n && m(!1), j();
+  }, eo = () => {
+    p(), U();
   }, to = (o) => {
     d(o);
-  }, eo = (o) => {
-    t ? oo() : d(o);
-  }, no = P("dropdown", "btn-group", p && "open", z), ro = P(
+  }, no = (o) => {
+    e ? eo() : d(o);
+  }, ro = P("dropdown", "btn-group", a && "open", A), so = P(
     l && "dropdown-portal",
-    t && f && "pull-right",
-    v
+    e && f && "pull-right",
+    z
   ), M = /* @__PURE__ */ i(
-    go,
+    wo,
     {
-      className: ro,
-      ref: Y,
-      style: K.popper,
-      ...Q.popper,
-      children: N || /* @__PURE__ */ i(uo, { items: R, closeMenu: d })
+      className: so,
+      ref: q,
+      style: Q.popper,
+      ...W.popper,
+      children: D || /* @__PURE__ */ i(go, { items: T, closeMenu: d })
     }
   );
-  return /* @__PURE__ */ h("div", { ...A, className: no, ref: W, children: [
+  return /* @__PURE__ */ h("div", { ...F, className: ro, ref: X, children: [
     /* @__PURE__ */ h(
-      wo,
+      Co,
       {
         id: g,
-        splitButton: t,
+        "aria-label": R,
+        splitButton: e,
         bsStyle: C,
         bsSize: w,
-        variant: T,
-        iconOnly: D,
-        iconName: k,
-        disabled: B,
-        ref: V,
-        onClick: eo,
+        variant: k,
+        iconOnly: B,
+        iconName: y,
+        disabled: b,
+        ref: Y,
+        onClick: no,
         outerRef: s,
-        toggleButtonType: _,
-        className: O,
+        toggleButtonType: v,
+        className: N,
         children: [
-          y,
-          Z && /* @__PURE__ */ i(Bo, {})
+          E,
+          $ && /* @__PURE__ */ i(Bo, {})
         ]
       }
     ),
-    t && /* @__PURE__ */ i(
-      Co,
+    e && /* @__PURE__ */ i(
+      bo,
       {
         id: g,
         bsStyle: C,
         bsSize: w,
-        disabled: B,
-        className: O,
+        disabled: b,
+        className: N,
         onClick: to,
-        ref: G
+        ref: H
       }
     ),
-    p && l && po.createPortal(M, X),
-    p && !l && M
+    a && l && po.createPortal(M, Z),
+    a && !l && M
   ] });
-}), Uo = No();
+}), _o = No();
 export {
-  Uo as default
+  _o as default
 };
 //# sourceMappingURL=ButtonDropdown.js.map

package/components/dropdown/ButtonDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonDropdown.js","sources":["../../../src/components/dropdown/ButtonDropdown.tsx"],"sourcesContent":["import React, { useState, useEffect, forwardRef, type PropsWithChildren } from 'react';\nimport ReactDOM from 'react-dom';\nimport { usePopper } from 'react-popper';\nimport { noop } from 'es-toolkit/function';\nimport { isNil } from 'es-toolkit/predicate';\n\nimport classNames from '../../utils/classNames';\nimport { getOrCreatePortalRoot } from '../../utils/portalRoot';\nimport useClickOutside, { DEFAULT_EVENT_TYPES } from '../../hooks/useClickOutside';\nimport MenuItems from '../menuItems/MenuItems';\nimport MenuItemList from '../menuItems/MenuItemList';\nimport DropdownToggleButton, { type DropdownToggleEvent, type DropdownToggleButtonType } from './DropdownToggleButton';\nimport SplitCaretButton from './SplitCaretButton';\nimport Caret from './Caret';\nimport type { MenuItemProps as MenuItem } from '../menuItems/MenuItem';\nimport type { BUTTON_SIZE, BUTTON_STYLE, BUTTON_VARIANT } from '../button/Button';\n\nconst getPlacement = (pullRight: boolean, dropup: boolean) => {\n    if (pullRight && dropup) {\n        return 'top-end';\n    }\n    if (!pullRight && dropup) {\n        return 'top-start';\n    }\n    if (pullRight && !dropup) {\n        return 'bottom-end';\n    }\n    return 'bottom-start';\n};\n\nexport type ButtonDropdownProps<T extends DropdownToggleButtonType = 'button'> = {\n    /**\n     * Unique button id. If not present a random id is generated.\n     */\n    id?: string;\n\n    /**\n     * The button title. This may be also a node, like a <span> or a <FormattedMessage>.\n     */\n    title: string | React.ReactNode;\n\n    /**\n     * Defined weather or not the menu is rendered.\n     * Use this to control the component from the outside.\n     *\n     * @default undefined\n     */\n    open?: boolean;\n\n    /**\n     * Defines whether the dropdown opens above or below.\n     * Set it to \"true\" additionally disables the automatic position feature.\n     *\n     * @default false\n     */\n    dropup?: boolean;\n\n    /**\n     * Defines whether the dropdown opens right aligned to the dropdown or not.\n     */\n    pullRight?: boolean;\n\n    /**\n     * Defines how large the button will be rendered.\n     *\n     * Possible values are: `xs`, `sm`, `md`, `lg`\n     *\n     * @default 'md'\n     */\n    bsSize?: BUTTON_SIZE;\n\n    /**\n     * Defines the button color.\n     *\n     * Possible values are: `default`, `primary`, `secondary`, `info`, `warning`, `danger`, `success`, `muted`\n     *\n     * @default 'default'\n     */\n    bsStyle?: BUTTON_STYLE;\n\n    /**\n     * Defines the variation of the button design.\n     *\n     * Possible values are: `link`, `link-inline`, `outline`, `action`\n     */\n    variant?: BUTTON_VARIANT;\n\n    /**\n     * Specify the toggle element type.\n     * It supports the following types: \"button\" | \"tag\" | \"label\"\n     *\n     * @default 'button'\n     */\n    toggleButtonType?: DropdownToggleButtonType;\n\n    /**\n     * Optional prop to defines whether the dropdown title is icon only which\n     * applies different padding so the button is a square.\n     *\n     * @default false\n     */\n    iconOnly?: boolean;\n\n    /**\n     * Optional rioglyph icon name forwarded to the underlying button toggle.\n     */\n    iconName?: string;\n\n    /**\n     * Defines whether the caret is shown or not.\n     *\n     * @default false\n     */\n    noCaret?: boolean;\n\n    /**\n     * Defines whether the dropdown-toggle (with caret) should be in a separate button.\n     *\n     * @default false\n     */\n    splitButton?: boolean;\n\n    /**\n     * Renders the dropdown into a dedicated react portal\n     *\n     * @default false\n     */\n    usePortal?: boolean;\n\n    /**\n     * Items to display in the dropdown menu. If you use a custom dropdown you can skip this prop.\n     */\n    items?: MenuItem[];\n\n    /**\n     * Disables the dropdown button.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Callback for splitButton label button click.\n     */\n    onLabelButtonClick?: () => void;\n\n    /**\n     * Callback for when the toggle button was clicked to open it.\n     * @param event\n     * @returns\n     */\n    onOpen?: (event: DropdownToggleEvent<T>) => void;\n\n    /**\n     * Callback for when the toggle button was clicked to close it.\n     * @returns\n     */\n    onClose?: () => void;\n\n    /**\n     * Allows to pass in custom dropdown menu content.\n     */\n    customDropdown?: React.ReactNode;\n\n    /**\n     * Define custom popper.js configuration for dropdown placement and modifiers.\n     */\n    popperConfig?: object;\n\n    /**\n     * Additional classes to be set on the dropdown-toggle button.\n     */\n    toggleClassName?: string;\n\n    /**\n     * Additional classes to be set on the dropdown.\n     */\n    dropdownClassName?: string;\n\n    /**\n     * Additional classes to be set to the wrapper element.\n     */\n    className?: string;\n};\n\nconst createButtonDropdown = <T extends DropdownToggleButtonType = 'button'>() => {\n    return forwardRef<\n        T extends 'button' ? HTMLButtonElement : HTMLDivElement,\n        PropsWithChildren<ButtonDropdownProps<T>>\n    >((props, ref) => {\n        const {\n            id = Math.random().toString(36).slice(2, 16),\n            items = [],\n            bsSize = 'md',\n            bsStyle = 'default',\n            variant,\n            disabled = false,\n            iconName,\n            iconOnly = false,\n            title,\n            splitButton = false,\n            customDropdown,\n            open,\n            dropup = false,\n            pullRight = false,\n            noCaret = false,\n            onOpen = noop,\n            onClose = noop,\n            onLabelButtonClick = noop,\n            usePortal = false,\n            popperConfig,\n            toggleButtonType = 'button',\n            toggleClassName = '',\n            dropdownClassName,\n            className = '',\n            ...remainingProps\n        } = props;\n\n        const [internalOpen, setInternalOpen] = useState(open);\n\n        const [refDropdownToggle, setRefDropdownToggle] = useState<HTMLButtonElement | HTMLDivElement | null>(null);\n        const [refDropdownMenu, setRefDropdownMenu] = useState<HTMLUListElement | null>(null);\n        const [refSplitButtonToggle, setRefSplitButtonToggle] = useState<HTMLButtonElement | null>(null);\n\n        const defaultPopperConfig = {\n            placement: getPlacement(pullRight, dropup),\n            modifiers: [],\n        };\n\n        const popperParentRef = splitButton && pullRight ? refSplitButtonToggle : refDropdownToggle;\n\n        const { styles, attributes } = usePopper(popperParentRef, refDropdownMenu, popperConfig || defaultPopperConfig);\n\n        const isUncontrolled = isNil(open);\n        const isOpen = isUncontrolled ? internalOpen : open;\n\n        const wrapperRef = useClickOutside(\n            event => {\n                if (usePortal) {\n                    // In case the dropdown is rendered via portal the clickOutside the toggle button element is\n                    // triggered since the dropdown is not a child of the wrapper element.\n                    // In this case we need to check if the event target is inside the dropdown-menu and prevent closing\n                    // the dropdown\n                    if (!refDropdownMenu?.contains(event.target as Node)) {\n                        closeMenu();\n                    }\n                } else {\n                    closeMenu();\n                }\n            },\n            DEFAULT_EVENT_TYPES,\n            Boolean(isOpen) // only listen to clicks outside when the dropdown is open\n        );\n\n        const dropdownRoot = getOrCreatePortalRoot();\n\n        const shouldShowCaret = !noCaret && !splitButton && !iconOnly;\n\n        useEffect(() => {\n            if (!isUncontrolled) {\n                setInternalOpen(open);\n            }\n        }, [isUncontrolled, open]);\n\n        const toggleOpen = (event?: DropdownToggleEvent<T>) => {\n            const isDropdownOpen = isUncontrolled ? internalOpen : open;\n\n            if (isDropdownOpen) {\n                closeMenu();\n            } else {\n                openMenu(event);\n            }\n        };\n\n        const openMenu = (event?: DropdownToggleEvent<T>) => {\n            if (isUncontrolled) {\n                setInternalOpen(true);\n            }\n            if (event) {\n                onOpen(event);\n            }\n        };\n\n        const closeMenu = () => {\n            if (isUncontrolled) {\n                setInternalOpen(false);\n            }\n            onClose();\n        };\n\n        const handleSplitLabelButtonClick = () => {\n            closeMenu();\n            onLabelButtonClick();\n        };\n\n        const handleSplitCaretButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n            toggleOpen(event as DropdownToggleEvent<T>);\n        };\n\n        const handleDropdownButtonClick = (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => {\n            if (splitButton) {\n                handleSplitLabelButtonClick();\n            } else {\n                toggleOpen(event as DropdownToggleEvent<T>);\n            }\n        };\n\n        const wrapperClasses = classNames('dropdown', 'btn-group', isOpen && 'open', className);\n\n        const dropdownClasses = classNames(\n            usePortal && 'dropdown-portal',\n            splitButton && pullRight && 'pull-right',\n            dropdownClassName\n        );\n\n        const dropdownMenu = (\n            <MenuItemList\n                className={dropdownClasses}\n                ref={setRefDropdownMenu}\n                style={styles.popper}\n                {...attributes.popper}\n            >\n                {customDropdown ? customDropdown : <MenuItems items={items} closeMenu={toggleOpen} />}\n            </MenuItemList>\n        );\n\n        return (\n            <div {...remainingProps} className={wrapperClasses} ref={wrapperRef}>\n                <DropdownToggleButton\n                    id={id}\n                    splitButton={splitButton}\n                    bsStyle={bsStyle}\n                    bsSize={bsSize}\n                    variant={variant}\n                    iconOnly={iconOnly}\n                    iconName={iconName}\n                    disabled={disabled}\n                    ref={setRefDropdownToggle}\n                    onClick={handleDropdownButtonClick}\n                    outerRef={ref}\n                    toggleButtonType={toggleButtonType}\n                    className={toggleClassName}\n                >\n                    {title}\n                    {shouldShowCaret && <Caret />}\n                </DropdownToggleButton>\n                {splitButton && (\n                    <SplitCaretButton\n                        id={id}\n                        bsStyle={bsStyle}\n                        bsSize={bsSize}\n                        disabled={disabled}\n                        className={toggleClassName}\n                        onClick={handleSplitCaretButtonClick}\n                        ref={setRefSplitButtonToggle}\n                    />\n                )}\n                {isOpen && usePortal && ReactDOM.createPortal(dropdownMenu, dropdownRoot)}\n                {isOpen && !usePortal && dropdownMenu}\n            </div>\n        );\n    });\n};\n\nconst ButtonDropdown = createButtonDropdown();\n\nexport default ButtonDropdown;\n"],"names":["getPlacement","pullRight","dropup","createButtonDropdown","forwardRef","props","ref","id","items","bsSize","bsStyle","variant","disabled","iconName","iconOnly","title","splitButton","customDropdown","open","noCaret","onOpen","noop","onClose","onLabelButtonClick","usePortal","popperConfig","toggleButtonType","toggleClassName","dropdownClassName","className","remainingProps","internalOpen","setInternalOpen","useState","refDropdownToggle","setRefDropdownToggle","refDropdownMenu","setRefDropdownMenu","refSplitButtonToggle","setRefSplitButtonToggle","defaultPopperConfig","popperParentRef","styles","attributes","usePopper","isUncontrolled","isNil","isOpen","wrapperRef","useClickOutside","event","closeMenu","DEFAULT_EVENT_TYPES","dropdownRoot","getOrCreatePortalRoot","shouldShowCaret","useEffect","toggleOpen","openMenu","handleSplitLabelButtonClick","handleSplitCaretButtonClick","handleDropdownButtonClick","wrapperClasses","classNames","dropdownClasses","dropdownMenu","jsx","MenuItemList","MenuItems","jsxs","DropdownToggleButton","Caret","SplitCaretButton","ReactDOM","ButtonDropdown"],"mappings":"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"}
+{"version":3,"file":"ButtonDropdown.js","sources":["../../../src/components/dropdown/ButtonDropdown.tsx"],"sourcesContent":["import React, { useState, useEffect, forwardRef, type PropsWithChildren } from 'react';\nimport ReactDOM from 'react-dom';\nimport { usePopper } from 'react-popper';\nimport { noop } from 'es-toolkit/function';\nimport { isNil } from 'es-toolkit/predicate';\n\nimport classNames from '../../utils/classNames';\nimport { getOrCreatePortalRoot } from '../../utils/portalRoot';\nimport useClickOutside, { DEFAULT_EVENT_TYPES } from '../../hooks/useClickOutside';\nimport MenuItems from '../menuItems/MenuItems';\nimport MenuItemList from '../menuItems/MenuItemList';\nimport DropdownToggleButton, { type DropdownToggleEvent, type DropdownToggleButtonType } from './DropdownToggleButton';\nimport SplitCaretButton from './SplitCaretButton';\nimport Caret from './Caret';\nimport type { MenuItemProps as MenuItem } from '../menuItems/MenuItem';\nimport type { BUTTON_SIZE, BUTTON_STYLE, BUTTON_VARIANT } from '../button/Button';\n\nconst getPlacement = (pullRight: boolean, dropup: boolean) => {\n    if (pullRight && dropup) {\n        return 'top-end';\n    }\n    if (!pullRight && dropup) {\n        return 'top-start';\n    }\n    if (pullRight && !dropup) {\n        return 'bottom-end';\n    }\n    return 'bottom-start';\n};\n\nexport type ButtonDropdownProps<T extends DropdownToggleButtonType = 'button'> = {\n    /**\n     * Unique button id. If not present a random id is generated.\n     */\n    id?: string;\n\n    /**\n     * Accessible label applied to the dropdown toggle button.\n     */\n    'aria-label'?: string;\n\n    /**\n     * The button title. This may be also a node, like a <span> or a <FormattedMessage>.\n     */\n    title: string | React.ReactNode;\n\n    /**\n     * Defined weather or not the menu is rendered.\n     * Use this to control the component from the outside.\n     *\n     * @default undefined\n     */\n    open?: boolean;\n\n    /**\n     * Defines whether the dropdown opens above or below.\n     * Set it to \"true\" additionally disables the automatic position feature.\n     *\n     * @default false\n     */\n    dropup?: boolean;\n\n    /**\n     * Defines whether the dropdown opens right aligned to the dropdown or not.\n     */\n    pullRight?: boolean;\n\n    /**\n     * Defines how large the button will be rendered.\n     *\n     * Possible values are: `xs`, `sm`, `md`, `lg`\n     *\n     * @default 'md'\n     */\n    bsSize?: BUTTON_SIZE;\n\n    /**\n     * Defines the button color.\n     *\n     * Possible values are: `default`, `primary`, `secondary`, `info`, `warning`, `danger`, `success`, `muted`\n     *\n     * @default 'default'\n     */\n    bsStyle?: BUTTON_STYLE;\n\n    /**\n     * Defines the variation of the button design.\n     *\n     * Possible values are: `link`, `link-inline`, `outline`, `action`\n     */\n    variant?: BUTTON_VARIANT;\n\n    /**\n     * Specify the toggle element type.\n     * It supports the following types: \"button\" | \"tag\" | \"label\"\n     *\n     * @default 'button'\n     */\n    toggleButtonType?: DropdownToggleButtonType;\n\n    /**\n     * Optional prop to defines whether the dropdown title is icon only which\n     * applies different padding so the button is a square.\n     *\n     * @default false\n     */\n    iconOnly?: boolean;\n\n    /**\n     * Optional rioglyph icon name forwarded to the underlying button toggle.\n     */\n    iconName?: string;\n\n    /**\n     * Defines whether the caret is shown or not.\n     *\n     * @default false\n     */\n    noCaret?: boolean;\n\n    /**\n     * Defines whether the dropdown-toggle (with caret) should be in a separate button.\n     *\n     * @default false\n     */\n    splitButton?: boolean;\n\n    /**\n     * Renders the dropdown into a dedicated react portal\n     *\n     * @default false\n     */\n    usePortal?: boolean;\n\n    /**\n     * Items to display in the dropdown menu. If you use a custom dropdown you can skip this prop.\n     */\n    items?: MenuItem[];\n\n    /**\n     * Disables the dropdown button.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Callback for splitButton label button click.\n     */\n    onLabelButtonClick?: () => void;\n\n    /**\n     * Callback for when the toggle button was clicked to open it.\n     * @param event\n     * @returns\n     */\n    onOpen?: (event: DropdownToggleEvent<T>) => void;\n\n    /**\n     * Callback for when the toggle button was clicked to close it.\n     * @returns\n     */\n    onClose?: () => void;\n\n    /**\n     * Allows to pass in custom dropdown menu content.\n     */\n    customDropdown?: React.ReactNode;\n\n    /**\n     * Define custom popper.js configuration for dropdown placement and modifiers.\n     */\n    popperConfig?: object;\n\n    /**\n     * Additional classes to be set on the dropdown-toggle button.\n     */\n    toggleClassName?: string;\n\n    /**\n     * Additional classes to be set on the dropdown.\n     */\n    dropdownClassName?: string;\n\n    /**\n     * Additional classes to be set to the wrapper element.\n     */\n    className?: string;\n};\n\nconst createButtonDropdown = <T extends DropdownToggleButtonType = 'button'>() => {\n    return forwardRef<\n        T extends 'button' ? HTMLButtonElement : HTMLDivElement,\n        PropsWithChildren<ButtonDropdownProps<T>>\n    >((props, ref) => {\n        const {\n            id = Math.random().toString(36).slice(2, 16),\n            'aria-label': ariaLabel,\n            items = [],\n            bsSize = 'md',\n            bsStyle = 'default',\n            variant,\n            disabled = false,\n            iconName,\n            iconOnly = false,\n            title,\n            splitButton = false,\n            customDropdown,\n            open,\n            dropup = false,\n            pullRight = false,\n            noCaret = false,\n            onOpen = noop,\n            onClose = noop,\n            onLabelButtonClick = noop,\n            usePortal = false,\n            popperConfig,\n            toggleButtonType = 'button',\n            toggleClassName = '',\n            dropdownClassName,\n            className = '',\n            ...remainingProps\n        } = props;\n\n        const [internalOpen, setInternalOpen] = useState(open);\n\n        const [refDropdownToggle, setRefDropdownToggle] = useState<HTMLButtonElement | HTMLDivElement | null>(null);\n        const [refDropdownMenu, setRefDropdownMenu] = useState<HTMLUListElement | null>(null);\n        const [refSplitButtonToggle, setRefSplitButtonToggle] = useState<HTMLButtonElement | null>(null);\n\n        const defaultPopperConfig = {\n            placement: getPlacement(pullRight, dropup),\n            modifiers: [],\n        };\n\n        const popperParentRef = splitButton && pullRight ? refSplitButtonToggle : refDropdownToggle;\n\n        const { styles, attributes } = usePopper(popperParentRef, refDropdownMenu, popperConfig || defaultPopperConfig);\n\n        const isUncontrolled = isNil(open);\n        const isOpen = isUncontrolled ? internalOpen : open;\n\n        const wrapperRef = useClickOutside(\n            event => {\n                if (usePortal) {\n                    // In case the dropdown is rendered via portal the clickOutside the toggle button element is\n                    // triggered since the dropdown is not a child of the wrapper element.\n                    // In this case we need to check if the event target is inside the dropdown-menu and prevent closing\n                    // the dropdown\n                    if (!refDropdownMenu?.contains(event.target as Node)) {\n                        closeMenu();\n                    }\n                } else {\n                    closeMenu();\n                }\n            },\n            DEFAULT_EVENT_TYPES,\n            Boolean(isOpen) // only listen to clicks outside when the dropdown is open\n        );\n\n        const dropdownRoot = getOrCreatePortalRoot();\n\n        const shouldShowCaret = !noCaret && !splitButton && !iconOnly;\n\n        useEffect(() => {\n            if (!isUncontrolled) {\n                setInternalOpen(open);\n            }\n        }, [isUncontrolled, open]);\n\n        const toggleOpen = (event?: DropdownToggleEvent<T>) => {\n            const isDropdownOpen = isUncontrolled ? internalOpen : open;\n\n            if (isDropdownOpen) {\n                closeMenu();\n            } else {\n                openMenu(event);\n            }\n        };\n\n        const openMenu = (event?: DropdownToggleEvent<T>) => {\n            if (isUncontrolled) {\n                setInternalOpen(true);\n            }\n            if (event) {\n                onOpen(event);\n            }\n        };\n\n        const closeMenu = () => {\n            if (isUncontrolled) {\n                setInternalOpen(false);\n            }\n            onClose();\n        };\n\n        const handleSplitLabelButtonClick = () => {\n            closeMenu();\n            onLabelButtonClick();\n        };\n\n        const handleSplitCaretButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n            toggleOpen(event as DropdownToggleEvent<T>);\n        };\n\n        const handleDropdownButtonClick = (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => {\n            if (splitButton) {\n                handleSplitLabelButtonClick();\n            } else {\n                toggleOpen(event as DropdownToggleEvent<T>);\n            }\n        };\n\n        const wrapperClasses = classNames('dropdown', 'btn-group', isOpen && 'open', className);\n\n        const dropdownClasses = classNames(\n            usePortal && 'dropdown-portal',\n            splitButton && pullRight && 'pull-right',\n            dropdownClassName\n        );\n\n        const dropdownMenu = (\n            <MenuItemList\n                className={dropdownClasses}\n                ref={setRefDropdownMenu}\n                style={styles.popper}\n                {...attributes.popper}\n            >\n                {customDropdown ? customDropdown : <MenuItems items={items} closeMenu={toggleOpen} />}\n            </MenuItemList>\n        );\n\n        return (\n            <div {...remainingProps} className={wrapperClasses} ref={wrapperRef}>\n                <DropdownToggleButton\n                    id={id}\n                    aria-label={ariaLabel}\n                    splitButton={splitButton}\n                    bsStyle={bsStyle}\n                    bsSize={bsSize}\n                    variant={variant}\n                    iconOnly={iconOnly}\n                    iconName={iconName}\n                    disabled={disabled}\n                    ref={setRefDropdownToggle}\n                    onClick={handleDropdownButtonClick}\n                    outerRef={ref}\n                    toggleButtonType={toggleButtonType}\n                    className={toggleClassName}\n                >\n                    {title}\n                    {shouldShowCaret && <Caret />}\n                </DropdownToggleButton>\n                {splitButton && (\n                    <SplitCaretButton\n                        id={id}\n                        bsStyle={bsStyle}\n                        bsSize={bsSize}\n                        disabled={disabled}\n                        className={toggleClassName}\n                        onClick={handleSplitCaretButtonClick}\n                        ref={setRefSplitButtonToggle}\n                    />\n                )}\n                {isOpen && usePortal && ReactDOM.createPortal(dropdownMenu, dropdownRoot)}\n                {isOpen && !usePortal && dropdownMenu}\n            </div>\n        );\n    });\n};\n\nconst ButtonDropdown = createButtonDropdown();\n\nexport default ButtonDropdown;\n"],"names":["getPlacement","pullRight","dropup","createButtonDropdown","forwardRef","props","ref","id","ariaLabel","items","bsSize","bsStyle","variant","disabled","iconName","iconOnly","title","splitButton","customDropdown","open","noCaret","onOpen","noop","onClose","onLabelButtonClick","usePortal","popperConfig","toggleButtonType","toggleClassName","dropdownClassName","className","remainingProps","internalOpen","setInternalOpen","useState","refDropdownToggle","setRefDropdownToggle","refDropdownMenu","setRefDropdownMenu","refSplitButtonToggle","setRefSplitButtonToggle","defaultPopperConfig","popperParentRef","styles","attributes","usePopper","isUncontrolled","isNil","isOpen","wrapperRef","useClickOutside","event","closeMenu","DEFAULT_EVENT_TYPES","dropdownRoot","getOrCreatePortalRoot","shouldShowCaret","useEffect","toggleOpen","openMenu","handleSplitLabelButtonClick","handleSplitCaretButtonClick","handleDropdownButtonClick","wrapperClasses","classNames","dropdownClasses","dropdownMenu","jsx","MenuItemList","MenuItems","jsxs","DropdownToggleButton","Caret","SplitCaretButton","ReactDOM","ButtonDropdown"],"mappings":"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"}

package/components/listMenu/ListMenu.d.ts

@@ -1,6 +1,7 @@
 import { default as React, ReactNode } from 'react';
 import { ListMenuNavItem, ListMenuItem } from './ListMenuGroup';
 export type { ListMenuNavItem, ListMenuItem } from './ListMenuGroup';
+type ListMenuFilterFn<T extends ListMenuNavItem> = (items: ListMenuItem<T>[], value: string, filterKey: keyof T) => ListMenuItem<T>[];
 export type ListMenuProps<T extends ListMenuNavItem> = {
     /**
      * List of menu item groups to be shown.
@@ -68,6 +69,13 @@ export type ListMenuProps<T extends ListMenuNavItem> = {
      * Additional classes to be set on the wrapper element.
      */
     className?: string;
+    /**
+     * Optional custom filter function.
+     *
+     * Use this when filtering should do more than a simple substring match,
+     * for example fuzzy ranking or multi-field weighting.
+     */
+    filterFn?: ListMenuFilterFn<T>;
 };
 declare const ListMenu: <T extends ListMenuNavItem>(props: ListMenuProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default ListMenu;

package/components/listMenu/ListMenu.js

@@ -1,68 +1,76 @@
-import { jsxs as u, jsx as t } from "react/jsx-runtime";
-import { useState as i, useRef as b, useEffect as x } from "react";
-import { isEmpty as _ } from "es-toolkit/compat";
-import j from "../../utils/classNames.js";
-import A from "../../hooks/useEffectOnce.js";
-import D from "../clearableInput/ClearableInput.js";
-import G from "../expander/ExpanderPanel.js";
-import V from "./ListMenuGroup.js";
-import $ from "../../hooks/useEsc.js";
-import X from "../../hooks/useWindowResize.js";
-import Z from "../../hooks/useKey.js";
-import { debounce as q } from "es-toolkit/function";
-const J = 10, Q = 580, U = (n, s, r) => n.map((o) => ({
-  ...o,
-  navItems: o.navItems.filter(
-    (a) => a[r].toLowerCase().includes(s.toLowerCase())
+import { jsxs as f, jsx as t } from "react/jsx-runtime";
+import { useState as l, useRef as x, useEffect as v } from "react";
+import { isEmpty as j } from "es-toolkit/compat";
+import A from "../../utils/classNames.js";
+import D from "../../hooks/useEffectOnce.js";
+import G from "../../hooks/useSearchHighlight.js";
+import V from "../clearableInput/ClearableInput.js";
+import $ from "../expander/ExpanderPanel.js";
+import q from "./ListMenuGroup.js";
+import X from "../../hooks/useEsc.js";
+import Z from "../../hooks/useWindowResize.js";
+import J from "../../hooks/useKey.js";
+import { debounce as Q } from "es-toolkit/function";
+const U = 10, Y = 580, ee = (r, s, o) => r.map((n) => ({
+  ...n,
+  navItems: n.navItems.filter(
+    (c) => c[o].toLowerCase().includes(s.toLowerCase())
   )
-})), Y = (n) => n.find(({ navItems: s }) => !_(s)), pe = (n) => {
+})), te = (r) => r.find(({ navItems: s }) => !j(s)), he = (r) => {
   const {
     menuItems: s,
-    focusFilter: r = !1,
-    enableFilter: o = !1,
-    filterPlaceholder: a,
-    onFilterChange: v = () => {
+    focusFilter: o = !1,
+    enableFilter: n = !1,
+    filterPlaceholder: c,
+    onFilterChange: h = () => {
     },
     notFoundMessage: L,
     className: w = "",
-    groupClassName: k = "",
-    responsive: f = !0,
-    autoClose: F = !0,
-    filterKey: O = "key",
-    trailingInputAddon: h,
+    groupClassName: F = "",
+    responsive: g = !0,
+    autoClose: k = !0,
+    filterKey: H = "key",
+    trailingInputAddon: y,
+    filterFn: O,
     ...R
-  } = n, [l, g] = i(""), [T, H] = i(!1), [y, M] = i(!1), [K, S] = i(""), c = b(null), m = b(null), N = () => {
-    if (f && m.current) {
-      const [e] = m.current.getElementsByClassName("active");
-      S(
-        /* @__PURE__ */ u("div", { className: "display-flex align-items-center", children: [
+  } = r, [i, M] = l(""), [T, S] = l(!1), [N, E] = l(!1), [K, z] = l(""), m = x(null), a = x(null), I = () => {
+    if (g && a.current) {
+      const [e] = a.current.getElementsByClassName("active");
+      z(
+        /* @__PURE__ */ f("div", { className: "display-flex align-items-center", children: [
           /* @__PURE__ */ t("span", { className: "rioglyph rioglyph-menu-hamburger margin-right-10" }),
           /* @__PURE__ */ t("span", { children: e?.innerText })
         ] })
       );
     }
   };
-  $(() => {
-    o && c.current === document.activeElement && g("");
+  X(() => {
+    n && m.current === document.activeElement && (M(""), h(""));
   });
-  const E = q(() => {
-    N(), H(window.innerWidth < Q);
-  }, J);
-  x(E, []), X(E);
+  const C = Q(() => {
+    I(), S(window.innerWidth < Y);
+  }, U);
+  v(C, []), Z(C);
   const d = () => {
-    c.current?.focus();
+    m.current?.focus();
   };
-  Z((e) => {
+  J((e) => {
     (e.metaKey || e.ctrlKey) && e.key === "k" && (e.preventDefault(), d());
-  }), A(() => {
-    r && d();
-  }), x(() => N, [s]);
-  const z = () => r && d(), B = (e) => {
-    g(e), v(e);
-  }, I = U(s, l, O), P = (e) => {
-    const p = e.target.parentElement?.tagName.toLowerCase() === "li";
-    F && p && M(!1);
-  }, W = j(
+  }), D(() => {
+    o && d();
+  }), v(I, [s]);
+  const B = () => o && d(), P = (e) => {
+    M(e), h(e);
+  }, p = n ? (O ?? ee)(s, i, H) : s;
+  G({
+    ref: a,
+    query: n ? i : "",
+    deps: [p]
+  });
+  const W = (e) => {
+    const u = e.target.parentElement?.tagName.toLowerCase() === "li";
+    k && u && E(!1);
+  }, _ = A(
     "form-group",
     "margin-bottom-5",
     "padding-left-15",
@@ -71,38 +79,38 @@ const J = 10, Q = 580, U = (n, s, r) => n.map((o) => ({
     "position-sticky",
     "top-0",
     "z-index-1"
-  ), C = /* @__PURE__ */ u("div", { ...R, className: `ListMenu ${w} ${l ? "filtered" : ""}`, ref: m, children: [
-    o && /* @__PURE__ */ t("div", { className: W, children: /* @__PURE__ */ u("div", { className: "input-group width-100pct", children: [
+  ), b = /* @__PURE__ */ f("div", { ...R, className: `ListMenu ${w} ${i ? "filtered" : ""}`, ref: a, children: [
+    n && /* @__PURE__ */ t("div", { className: _, children: /* @__PURE__ */ f("div", { className: "input-group width-100pct", children: [
       /* @__PURE__ */ t("span", { className: "input-group-addon", children: /* @__PURE__ */ t("span", { className: "rioglyph rioglyph-search", "aria-hidden": "true" }) }),
       /* @__PURE__ */ t(
-        D,
+        V,
         {
-          value: l,
-          inputRef: c,
-          placeholder: a,
-          onChange: B,
-          onClear: z
+          value: i,
+          inputRef: m,
+          placeholder: c,
+          onChange: P,
+          onClear: B
         }
       ),
-      h && h
+      y && y
     ] }) }),
-    !Y(I) && /* @__PURE__ */ t("div", { className: "padding-top-25 text-center text-color-gray", children: L }),
-    I.map((e, p) => /* @__PURE__ */ t(V, { className: k, menuGroup: e }, p))
+    !te(p) && /* @__PURE__ */ t("div", { className: "padding-top-25 text-center text-color-gray", children: L }),
+    p.map((e, u) => /* @__PURE__ */ t(q, { className: F, menuGroup: e }, u))
   ] });
-  return f && T ? /* @__PURE__ */ t(
-    G,
+  return g && T ? /* @__PURE__ */ t(
+    $,
     {
       title: K,
       bsStyle: "default",
-      open: y,
-      onToggle: () => M(!y),
+      open: N,
+      onToggle: () => E(!N),
       unmountOnExit: !1,
       className: "shadow-default",
-      children: /* @__PURE__ */ t("div", { onClick: P, children: C })
+      children: /* @__PURE__ */ t("div", { onClick: W, children: b })
     }
-  ) : C;
+  ) : b;
 };
 export {
-  pe as default
+  he as default
 };
 //# sourceMappingURL=ListMenu.js.map