@rio-cloud/rio-uikit 2.3.0-beta.1 → 2.3.0-beta.3

package/components/dropdown/DropdownToggleButton.js

@@ -1,25 +1,26 @@
 import { jsx as i } from "react/jsx-runtime";
-import { forwardRef as x } from "react";
-import B from "../button/Button.js";
-import C from "../../hooks/useMergeRefs.js";
+import { forwardRef as B } from "react";
+import C from "../button/Button.js";
+import R from "../../hooks/useMergeRefs.js";
 import c from "../../utils/classNames.js";
-const j = x((f, u) => {
+const z = B((f, u) => {
   const {
     id: e,
     disabled: t,
+    iconName: d,
     bsSize: g,
     bsStyle: m,
-    variant: d,
+    variant: b,
     splitButton: o = !1,
     onClick: s,
     toggleButtonType: p = "button",
     className: n = "",
-    as: R,
+    as: h,
     children: r,
-    outerRef: b,
-    iconOnly: y,
+    outerRef: y,
+    iconOnly: N,
     ...l
-  } = f, a = C(b, u), v = c(!o && "dropdown-toggle", !o && n), w = c(
+  } = f, a = R(y, u), v = c(!o && "dropdown-toggle", !o && n), w = c(
     "dropdown-toggle",
     "label",
     `label-${m}`,
@@ -27,7 +28,7 @@ const j = x((f, u) => {
     "user-select-none cursor-pointer",
     t && "pointer-events-none",
     n
-  ), N = c(
+  ), x = c(
     "dropdown-toggle",
     "tag",
     "clickable height-auto",
@@ -44,7 +45,7 @@ const j = x((f, u) => {
       id: e,
       ref: a,
       onClick: s,
-      className: N,
+      className: x,
       children: r
     }
   ) : p === "label" ? /* @__PURE__ */ i(
@@ -58,7 +59,7 @@ const j = x((f, u) => {
       children: r
     }
   ) : /* @__PURE__ */ i(
-    B,
+    C,
     {
       ...l,
       id: o ? `button-${e}` : e,
@@ -67,15 +68,16 @@ const j = x((f, u) => {
       disabled: t,
       bsStyle: m,
       bsSize: g,
-      variant: d,
+      variant: b,
       onClick: s,
-      iconOnly: y,
+      iconName: d,
+      iconOnly: N,
       className: v,
       children: r
     }
   );
 });
 export {
-  j as default
+  z as default
 };
 //# sourceMappingURL=DropdownToggleButton.js.map

package/components/dropdown/DropdownToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownToggleButton.js","sources":["../../../src/components/dropdown/DropdownToggleButton.tsx"],"sourcesContent":["import { forwardRef, type HTMLProps, type PropsWithChildren } from 'react';\n\nimport Button, { type BUTTON_VARIANT, type BUTTON_SIZE, type BUTTON_STYLE } from '../button/Button';\nimport useMergeRefs from '../../hooks/useMergeRefs';\nimport classNames from '../../utils/classNames';\n\nexport type DropdownToggleButtonType = 'button' | 'tag' | 'label';\n\nexport type DropdownToggleEvent<T extends DropdownToggleButtonType = 'button'> = T extends 'button'\n    ? React.MouseEvent<HTMLButtonElement>\n    : React.MouseEvent<HTMLDivElement>;\n\nexport type DropdownToggleButtonProps = HTMLProps<HTMLButtonElement> & {\n    id?: string;\n    disabled?: boolean;\n    splitButton?: boolean;\n    iconOnly?: boolean;\n    onClick: (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;\n    bsSize: BUTTON_SIZE;\n    bsStyle: BUTTON_STYLE;\n    variant?: BUTTON_VARIANT;\n    toggleButtonType?: DropdownToggleButtonType;\n    outerRef?: React.Ref<HTMLButtonElement | HTMLDivElement>;\n    className?: string;\n};\n\nconst DropdownToggleButton = forwardRef<\n    HTMLButtonElement | HTMLDivElement,\n    PropsWithChildren<DropdownToggleButtonProps>\n>((props, ref) => {\n    const {\n        id,\n        disabled,\n        bsSize,\n        bsStyle,\n        variant,\n        splitButton = false,\n        onClick,\n        toggleButtonType = 'button',\n        className = '',\n        as: _as,\n        children,\n        outerRef,\n        iconOnly,\n        ...remainingProps\n    } = props;\n\n    const toggleRef = useMergeRefs(outerRef, ref);\n\n    const buttonClasses = classNames(!splitButton && 'dropdown-toggle', !splitButton && className);\n\n    const labelClasses = classNames(\n        'dropdown-toggle',\n        'label',\n        `label-${bsStyle}`,\n        'display-flex align-items-center',\n        'user-select-none cursor-pointer',\n        disabled && 'pointer-events-none',\n        className\n    );\n    const tagClasses = classNames(\n        'dropdown-toggle',\n        'tag',\n        'clickable height-auto',\n        bsSize === 'sm' && 'tag-small',\n        'display-flex align-items-center',\n        'user-select-none cursor-pointer',\n        disabled && 'pointer-events-none',\n        className\n    );\n\n    if (toggleButtonType === 'tag') {\n        return (\n            <div\n                {...(remainingProps as typeof HTMLDivElement)}\n                id={id}\n                ref={toggleRef}\n                onClick={onClick}\n                className={tagClasses}\n            >\n                {children}\n            </div>\n        );\n    }\n\n    if (toggleButtonType === 'label') {\n        return (\n            <div\n                {...(remainingProps as typeof HTMLDivElement)}\n                id={id}\n                ref={toggleRef}\n                onClick={onClick}\n                className={labelClasses}\n            >\n                {children}\n            </div>\n        );\n    }\n\n    return (\n        <Button\n            {...remainingProps}\n            id={splitButton ? `button-${id}` : id}\n            type='button'\n            ref={toggleRef}\n            disabled={disabled}\n            bsStyle={bsStyle}\n            bsSize={bsSize}\n            variant={variant}\n            onClick={onClick}\n            iconOnly={iconOnly}\n            className={buttonClasses}\n        >\n            {children}\n        </Button>\n    );\n});\n\nexport default DropdownToggleButton;\n"],"names":["DropdownToggleButton","forwardRef","props","ref","id","disabled","bsSize","bsStyle","variant","splitButton","onClick","toggleButtonType","className","_as","children","outerRef","iconOnly","remainingProps","toggleRef","useMergeRefs","buttonClasses","classNames","labelClasses","tagClasses","jsx","Button"],"mappings":";;;;;AA0BA,MAAMA,IAAuBC,EAG3B,CAACC,GAAOC,MAAQ;AACd,QAAM;AAAA,IACF,IAAAC;AAAA,IACA,UAAAC;AAAA,IACA,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,SAAAC;AAAA,IACA,kBAAAC,IAAmB;AAAA,IACnB,WAAAC,IAAY;AAAA,IACZ,IAAIC;AAAA,IACJ,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHf,GAEEgB,IAAYC,EAAaJ,GAAUZ,CAAG,GAEtCiB,IAAgBC,EAAW,CAACZ,KAAe,mBAAmB,CAACA,KAAeG,CAAS,GAEvFU,IAAeD;AAAA,IACjB;AAAA,IACA;AAAA,IACA,SAASd,CAAO;AAAA,IAChB;AAAA,IACA;AAAA,IACAF,KAAY;AAAA,IACZO;AAAA,EAAA,GAEEW,IAAaF;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACAf,MAAW,QAAQ;AAAA,IACnB;AAAA,IACA;AAAA,IACAD,KAAY;AAAA,IACZO;AAAA,EAAA;AAGJ,SAAID,MAAqB,QAEjB,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAIP;AAAA,MACL,IAAAb;AAAA,MACA,KAAKc;AAAA,MACL,SAAAR;AAAA,MACA,WAAWa;AAAA,MAEV,UAAAT;AAAA,IAAA;AAAA,EAAA,IAKTH,MAAqB,UAEjB,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAIP;AAAA,MACL,IAAAb;AAAA,MACA,KAAKc;AAAA,MACL,SAAAR;AAAA,MACA,WAAWY;AAAA,MAEV,UAAAR;AAAA,IAAA;AAAA,EAAA,IAMT,gBAAAU;AAAA,IAACC;AAAA,IAAA;AAAA,MACI,GAAGR;AAAA,MACJ,IAAIR,IAAc,UAAUL,CAAE,KAAKA;AAAA,MACnC,MAAK;AAAA,MACL,KAAKc;AAAA,MACL,UAAAb;AAAA,MACA,SAAAE;AAAA,MACA,QAAAD;AAAA,MACA,SAAAE;AAAA,MACA,SAAAE;AAAA,MACA,UAAAM;AAAA,MACA,WAAWI;AAAA,MAEV,UAAAN;AAAA,IAAA;AAAA,EAAA;AAGb,CAAC;"}
+{"version":3,"file":"DropdownToggleButton.js","sources":["../../../src/components/dropdown/DropdownToggleButton.tsx"],"sourcesContent":["import { forwardRef, type HTMLProps, type PropsWithChildren } from 'react';\n\nimport Button, { type BUTTON_VARIANT, type BUTTON_SIZE, type BUTTON_STYLE } from '../button/Button';\nimport useMergeRefs from '../../hooks/useMergeRefs';\nimport classNames from '../../utils/classNames';\n\nexport type DropdownToggleButtonType = 'button' | 'tag' | 'label';\n\nexport type DropdownToggleEvent<T extends DropdownToggleButtonType = 'button'> = T extends 'button'\n    ? React.MouseEvent<HTMLButtonElement>\n    : React.MouseEvent<HTMLDivElement>;\n\nexport type DropdownToggleButtonProps = HTMLProps<HTMLButtonElement> & {\n    id?: string;\n    disabled?: boolean;\n    iconName?: string;\n    splitButton?: boolean;\n    iconOnly?: boolean;\n    onClick: (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;\n    bsSize: BUTTON_SIZE;\n    bsStyle: BUTTON_STYLE;\n    variant?: BUTTON_VARIANT;\n    toggleButtonType?: DropdownToggleButtonType;\n    outerRef?: React.Ref<HTMLButtonElement | HTMLDivElement>;\n    className?: string;\n};\n\nconst DropdownToggleButton = forwardRef<\n    HTMLButtonElement | HTMLDivElement,\n    PropsWithChildren<DropdownToggleButtonProps>\n>((props, ref) => {\n    const {\n        id,\n        disabled,\n        iconName,\n        bsSize,\n        bsStyle,\n        variant,\n        splitButton = false,\n        onClick,\n        toggleButtonType = 'button',\n        className = '',\n        as: _as,\n        children,\n        outerRef,\n        iconOnly,\n        ...remainingProps\n    } = props;\n\n    const toggleRef = useMergeRefs(outerRef, ref);\n\n    const buttonClasses = classNames(!splitButton && 'dropdown-toggle', !splitButton && className);\n\n    const labelClasses = classNames(\n        'dropdown-toggle',\n        'label',\n        `label-${bsStyle}`,\n        'display-flex align-items-center',\n        'user-select-none cursor-pointer',\n        disabled && 'pointer-events-none',\n        className\n    );\n    const tagClasses = classNames(\n        'dropdown-toggle',\n        'tag',\n        'clickable height-auto',\n        bsSize === 'sm' && 'tag-small',\n        'display-flex align-items-center',\n        'user-select-none cursor-pointer',\n        disabled && 'pointer-events-none',\n        className\n    );\n\n    if (toggleButtonType === 'tag') {\n        return (\n            <div\n                {...(remainingProps as typeof HTMLDivElement)}\n                id={id}\n                ref={toggleRef}\n                onClick={onClick}\n                className={tagClasses}\n            >\n                {children}\n            </div>\n        );\n    }\n\n    if (toggleButtonType === 'label') {\n        return (\n            <div\n                {...(remainingProps as typeof HTMLDivElement)}\n                id={id}\n                ref={toggleRef}\n                onClick={onClick}\n                className={labelClasses}\n            >\n                {children}\n            </div>\n        );\n    }\n\n    return (\n        <Button\n            {...remainingProps}\n            id={splitButton ? `button-${id}` : id}\n            type='button'\n            ref={toggleRef}\n            disabled={disabled}\n            bsStyle={bsStyle}\n            bsSize={bsSize}\n            variant={variant}\n            onClick={onClick}\n            iconName={iconName}\n            iconOnly={iconOnly}\n            className={buttonClasses}\n        >\n            {children}\n        </Button>\n    );\n});\n\nexport default DropdownToggleButton;\n"],"names":["DropdownToggleButton","forwardRef","props","ref","id","disabled","iconName","bsSize","bsStyle","variant","splitButton","onClick","toggleButtonType","className","_as","children","outerRef","iconOnly","remainingProps","toggleRef","useMergeRefs","buttonClasses","classNames","labelClasses","tagClasses","jsx","Button"],"mappings":";;;;;AA2BA,MAAMA,IAAuBC,EAG3B,CAACC,GAAOC,MAAQ;AACd,QAAM;AAAA,IACF,IAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,SAAAC;AAAA,IACA,kBAAAC,IAAmB;AAAA,IACnB,WAAAC,IAAY;AAAA,IACZ,IAAIC;AAAA,IACJ,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHhB,GAEEiB,IAAYC,EAAaJ,GAAUb,CAAG,GAEtCkB,IAAgBC,EAAW,CAACZ,KAAe,mBAAmB,CAACA,KAAeG,CAAS,GAEvFU,IAAeD;AAAA,IACjB;AAAA,IACA;AAAA,IACA,SAASd,CAAO;AAAA,IAChB;AAAA,IACA;AAAA,IACAH,KAAY;AAAA,IACZQ;AAAA,EAAA,GAEEW,IAAaF;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACAf,MAAW,QAAQ;AAAA,IACnB;AAAA,IACA;AAAA,IACAF,KAAY;AAAA,IACZQ;AAAA,EAAA;AAGJ,SAAID,MAAqB,QAEjB,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAIP;AAAA,MACL,IAAAd;AAAA,MACA,KAAKe;AAAA,MACL,SAAAR;AAAA,MACA,WAAWa;AAAA,MAEV,UAAAT;AAAA,IAAA;AAAA,EAAA,IAKTH,MAAqB,UAEjB,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAIP;AAAA,MACL,IAAAd;AAAA,MACA,KAAKe;AAAA,MACL,SAAAR;AAAA,MACA,WAAWY;AAAA,MAEV,UAAAR;AAAA,IAAA;AAAA,EAAA,IAMT,gBAAAU;AAAA,IAACC;AAAA,IAAA;AAAA,MACI,GAAGR;AAAA,MACJ,IAAIR,IAAc,UAAUN,CAAE,KAAKA;AAAA,MACnC,MAAK;AAAA,MACL,KAAKe;AAAA,MACL,UAAAd;AAAA,MACA,SAAAG;AAAA,MACA,QAAAD;AAAA,MACA,SAAAE;AAAA,MACA,SAAAE;AAAA,MACA,UAAAL;AAAA,MACA,UAAAW;AAAA,MACA,WAAWI;AAAA,MAEV,UAAAN;AAAA,IAAA;AAAA,EAAA;AAGb,CAAC;"}

package/components/fade/FadeExpander.js

@@ -11,26 +11,23 @@ const E = 200, b = (r) => {
   const f = () => {
     e && setTimeout(() => i("visible"), h.current * 1e3 + E);
   };
-  return (
-    // @ts-expect-error
-    /* @__PURE__ */ s(y, { onExitComplete: () => i("hidden"), children: m && /* @__PURE__ */ s(
-      x.div,
-      {
-        initial: { height: 0, opacity: 0 },
-        animate: { height: "auto", opacity: 1 },
-        exit: { height: 0, opacity: 0 },
-        transition: {
-          height: { duration: t, delay: o },
-          opacity: { duration: t, delay: o },
-          ease: "easeIn"
-        },
-        style: { overflow: d },
-        onAnimationComplete: f,
-        className: c,
-        children: l
-      }
-    ) })
-  );
+  return /* @__PURE__ */ s(y, { onExitComplete: () => i("hidden"), children: m && /* @__PURE__ */ s(
+    x.div,
+    {
+      initial: { height: 0, opacity: 0 },
+      animate: { height: "auto", opacity: 1 },
+      exit: { height: 0, opacity: 0 },
+      transition: {
+        height: { duration: t, delay: o },
+        opacity: { duration: t, delay: o },
+        ease: "easeIn"
+      },
+      style: { overflow: d },
+      onAnimationComplete: f,
+      className: c,
+      children: l
+    }
+  ) });
 };
 export {
   b as default

package/components/fade/FadeExpander.js.map

@@ -1 +1 @@
-{"version":3,"file":"FadeExpander.js","sources":["../../../src/components/fade/FadeExpander.tsx"],"sourcesContent":["import { useState, useEffect, type PropsWithChildren, useRef } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\n\ntype FadeExpanderProps = {\n    /**\n     * Defines if the content is shown or not.\n     *\n     * @default false\n     */\n    show: boolean;\n\n    /**\n     * Allows customization of animation duration.\n     *\n     * @default 0.2\n     */\n    duration?: number;\n\n    /**\n     * Delay in seconds before starting the animation.\n     *\n     * @default 0\n     */\n    delay?: number;\n\n    /**\n     * Additional classes set to the wrapper element.\n     */\n    className?: string;\n};\n\nconst THRESHOLD_TIMEOUT_MS = 200;\n\nconst FadeExpander = (props: PropsWithChildren<FadeExpanderProps>) => {\n    const { children, show = false, duration = 0.2, delay = 0, className = '' } = props;\n\n    const [isVisible, setIsVisible] = useState(show);\n    const [overflow, setOverflow] = useState('hidden'); // Start with hidden overflow\n\n    const durationRef = useRef(duration);\n\n    // Effect to manage visibility based on show prop\n    useEffect(() => {\n        if (show) {\n            // Set to visible when show is true\n            setIsVisible(true);\n        } else {\n            // Set overflow to hidden immediately when show is false\n            setOverflow('hidden');\n\n            // Delay setting isVisible to false so the overflow can change before\n            setTimeout(() => {\n                setIsVisible(false);\n            }, 0);\n        }\n    }, [show]);\n\n    const handleAnimationComplete = () => {\n        if (show) {\n            // Set overflow to visible after animation is done\n            setTimeout(() => setOverflow('visible'), durationRef.current * 1000 + THRESHOLD_TIMEOUT_MS);\n        }\n    };\n\n    return (\n        // @ts-expect-error\n        <AnimatePresence onExitComplete={() => setOverflow('hidden')}>\n            {isVisible && (\n                <motion.div\n                    initial={{ height: 0, opacity: 0 }}\n                    animate={{ height: 'auto', opacity: 1 }}\n                    exit={{ height: 0, opacity: 0 }}\n                    transition={{\n                        height: { duration, delay },\n                        opacity: { duration, delay },\n                        ease: 'easeIn',\n                    }}\n                    // To ensures smooth height transition, the overflow should be \"hidden\" during the animation\n                    style={{ overflow }}\n                    onAnimationComplete={handleAnimationComplete}\n                    className={className}\n                >\n                    {children}\n                </motion.div>\n            )}\n        </AnimatePresence>\n    );\n};\n\nexport default FadeExpander;\n"],"names":["THRESHOLD_TIMEOUT_MS","FadeExpander","props","children","show","duration","delay","className","isVisible","setIsVisible","useState","overflow","setOverflow","durationRef","useRef","useEffect","handleAnimationComplete","AnimatePresence","jsx","motion"],"mappings":";;;AA+BA,MAAMA,IAAuB,KAEvBC,IAAe,CAACC,MAAgD;AAClE,QAAM,EAAE,UAAAC,GAAU,MAAAC,IAAO,IAAO,UAAAC,IAAW,KAAK,OAAAC,IAAQ,GAAG,WAAAC,IAAY,GAAA,IAAOL,GAExE,CAACM,GAAWC,CAAY,IAAIC,EAASN,CAAI,GACzC,CAACO,GAAUC,CAAW,IAAIF,EAAS,QAAQ,GAE3CG,IAAcC,EAAOT,CAAQ;AAGnC,EAAAU,EAAU,MAAM;AACZ,IAAIX,IAEAK,EAAa,EAAI,KAGjBG,EAAY,QAAQ,GAGpB,WAAW,MAAM;AACb,MAAAH,EAAa,EAAK;AAAA,IACtB,GAAG,CAAC;AAAA,EAEZ,GAAG,CAACL,CAAI,CAAC;AAET,QAAMY,IAA0B,MAAM;AAClC,IAAIZ,KAEA,WAAW,MAAMQ,EAAY,SAAS,GAAGC,EAAY,UAAU,MAAOb,CAAoB;AAAA,EAElG;AAEA;AAAA;AAAA,sBAEKiB,GAAA,EAAgB,gBAAgB,MAAML,EAAY,QAAQ,GACtD,UAAAJ,KACG,gBAAAU;AAAA,MAACC,EAAO;AAAA,MAAP;AAAA,QACG,SAAS,EAAE,QAAQ,GAAG,SAAS,EAAA;AAAA,QAC/B,SAAS,EAAE,QAAQ,QAAQ,SAAS,EAAA;AAAA,QACpC,MAAM,EAAE,QAAQ,GAAG,SAAS,EAAA;AAAA,QAC5B,YAAY;AAAA,UACR,QAAQ,EAAE,UAAAd,GAAU,OAAAC,EAAA;AAAA,UACpB,SAAS,EAAE,UAAAD,GAAU,OAAAC,EAAA;AAAA,UACrB,MAAM;AAAA,QAAA;AAAA,QAGV,OAAO,EAAE,UAAAK,EAAA;AAAA,QACT,qBAAqBK;AAAA,QACrB,WAAAT;AAAA,QAEC,UAAAJ;AAAA,MAAA;AAAA,IAAA,EACL,CAER;AAAA;AAER;"}
+{"version":3,"file":"FadeExpander.js","sources":["../../../src/components/fade/FadeExpander.tsx"],"sourcesContent":["import { useState, useEffect, type PropsWithChildren, useRef } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\n\ntype FadeExpanderProps = {\n    /**\n     * Defines if the content is shown or not.\n     *\n     * @default false\n     */\n    show: boolean;\n\n    /**\n     * Allows customization of animation duration.\n     *\n     * @default 0.2\n     */\n    duration?: number;\n\n    /**\n     * Delay in seconds before starting the animation.\n     *\n     * @default 0\n     */\n    delay?: number;\n\n    /**\n     * Additional classes set to the wrapper element.\n     */\n    className?: string;\n};\n\nconst THRESHOLD_TIMEOUT_MS = 200;\n\nconst FadeExpander = (props: PropsWithChildren<FadeExpanderProps>) => {\n    const { children, show = false, duration = 0.2, delay = 0, className = '' } = props;\n\n    const [isVisible, setIsVisible] = useState(show);\n    const [overflow, setOverflow] = useState('hidden'); // Start with hidden overflow\n\n    const durationRef = useRef(duration);\n\n    // Effect to manage visibility based on show prop\n    useEffect(() => {\n        if (show) {\n            // Set to visible when show is true\n            setIsVisible(true);\n        } else {\n            // Set overflow to hidden immediately when show is false\n            setOverflow('hidden');\n\n            // Delay setting isVisible to false so the overflow can change before\n            setTimeout(() => {\n                setIsVisible(false);\n            }, 0);\n        }\n    }, [show]);\n\n    const handleAnimationComplete = () => {\n        if (show) {\n            // Set overflow to visible after animation is done\n            setTimeout(() => setOverflow('visible'), durationRef.current * 1000 + THRESHOLD_TIMEOUT_MS);\n        }\n    };\n\n    return (\n        <AnimatePresence onExitComplete={() => setOverflow('hidden')}>\n            {isVisible && (\n                <motion.div\n                    initial={{ height: 0, opacity: 0 }}\n                    animate={{ height: 'auto', opacity: 1 }}\n                    exit={{ height: 0, opacity: 0 }}\n                    transition={{\n                        height: { duration, delay },\n                        opacity: { duration, delay },\n                        ease: 'easeIn',\n                    }}\n                    // To ensures smooth height transition, the overflow should be \"hidden\" during the animation\n                    style={{ overflow }}\n                    onAnimationComplete={handleAnimationComplete}\n                    className={className}\n                >\n                    {children}\n                </motion.div>\n            )}\n        </AnimatePresence>\n    );\n};\n\nexport default FadeExpander;\n"],"names":["THRESHOLD_TIMEOUT_MS","FadeExpander","props","children","show","duration","delay","className","isVisible","setIsVisible","useState","overflow","setOverflow","durationRef","useRef","useEffect","handleAnimationComplete","AnimatePresence","jsx","motion"],"mappings":";;;AA+BA,MAAMA,IAAuB,KAEvBC,IAAe,CAACC,MAAgD;AAClE,QAAM,EAAE,UAAAC,GAAU,MAAAC,IAAO,IAAO,UAAAC,IAAW,KAAK,OAAAC,IAAQ,GAAG,WAAAC,IAAY,GAAA,IAAOL,GAExE,CAACM,GAAWC,CAAY,IAAIC,EAASN,CAAI,GACzC,CAACO,GAAUC,CAAW,IAAIF,EAAS,QAAQ,GAE3CG,IAAcC,EAAOT,CAAQ;AAGnC,EAAAU,EAAU,MAAM;AACZ,IAAIX,IAEAK,EAAa,EAAI,KAGjBG,EAAY,QAAQ,GAGpB,WAAW,MAAM;AACb,MAAAH,EAAa,EAAK;AAAA,IACtB,GAAG,CAAC;AAAA,EAEZ,GAAG,CAACL,CAAI,CAAC;AAET,QAAMY,IAA0B,MAAM;AAClC,IAAIZ,KAEA,WAAW,MAAMQ,EAAY,SAAS,GAAGC,EAAY,UAAU,MAAOb,CAAoB;AAAA,EAElG;AAEA,2BACKiB,GAAA,EAAgB,gBAAgB,MAAML,EAAY,QAAQ,GACtD,UAAAJ,KACG,gBAAAU;AAAA,IAACC,EAAO;AAAA,IAAP;AAAA,MACG,SAAS,EAAE,QAAQ,GAAG,SAAS,EAAA;AAAA,MAC/B,SAAS,EAAE,QAAQ,QAAQ,SAAS,EAAA;AAAA,MACpC,MAAM,EAAE,QAAQ,GAAG,SAAS,EAAA;AAAA,MAC5B,YAAY;AAAA,QACR,QAAQ,EAAE,UAAAd,GAAU,OAAAC,EAAA;AAAA,QACpB,SAAS,EAAE,UAAAD,GAAU,OAAAC,EAAA;AAAA,QACrB,MAAM;AAAA,MAAA;AAAA,MAGV,OAAO,EAAE,UAAAK,EAAA;AAAA,MACT,qBAAqBK;AAAA,MACrB,WAAAT;AAAA,MAEC,UAAAJ;AAAA,IAAA;AAAA,EAAA,GAGb;AAER;"}

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

package/components/listMenu/ListMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListMenu.js","sources":["../../../src/components/listMenu/ListMenu.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState, type MouseEvent, type ReactNode } from 'react';\nimport { isEmpty } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport useEffectOnce from '../../hooks/useEffectOnce';\nimport ClearableInput from '../clearableInput/ClearableInput';\nimport ExpanderPanel from '../expander/ExpanderPanel';\nimport ListMenuGroup, { type ListMenuNavItem, type ListMenuItem } from './ListMenuGroup';\nimport useEsc from '../../hooks/useEsc';\nimport useWindowResize from '../../hooks/useWindowResize';\nimport useKey from '../../hooks/useKey';\nimport { debounce } from 'es-toolkit/function';\n\nexport type { ListMenuNavItem, ListMenuItem } from './ListMenuGroup';\n\nconst RESIZE_THROTTLING = 10;\nconst MOBILE_MAX_WIDTH = 580;\n\nconst filterMenuItems = <T extends ListMenuNavItem>(\n    items: ListMenuItem<T>[],\n    value: string,\n    filterKey: keyof T\n): ListMenuItem<T>[] =>\n    items.map(item => ({\n        ...item,\n        navItems: item.navItems.filter(navItem =>\n            (navItem[filterKey] as string).toLowerCase().includes(value.toLowerCase())\n        ),\n    }));\n\nconst hasMenuItems = <T extends ListMenuNavItem>(items: ListMenuItem<T>[]) =>\n    items.find(({ navItems }) => !isEmpty(navItems));\n\nexport type ListMenuProps<T extends ListMenuNavItem> = {\n    /**\n     * List of menu item groups to be shown.\n     */\n    menuItems: ListMenuItem<T>[];\n\n    /**\n     * Enables the filter.\n     *\n     * @default false\n     */\n    enableFilter?: boolean;\n\n    /**\n     * Focus the filter input.\n     *\n     * @default false\n     */\n    focusFilter?: boolean;\n\n    /**\n     * Define the attribute key for filtering.\n     *\n     * @default 'key'\n     */\n    filterKey?: keyof T;\n\n    /**\n     * The placeholder text for the filter input.\n     */\n    filterPlaceholder?: string;\n\n    /**\n     * Gets called when the filter input changes.\n     *\n     * @param value\n     * @returns\n     */\n    onFilterChange?: (value: string) => void;\n\n    /**\n     * A localized message to be shown when the filter result is empty.\n     */\n    notFoundMessage?: string | ReactNode;\n\n    /**\n     * The menu uses collapses on smaller screens using an expander panel.\n     *\n     * @default true\n     */\n    responsive?: boolean;\n\n    /**\n     * Enables automatic closing of the expander panel.\n     *\n     * Only relevant when using the `responsive` flag. Note: Make sure to not stop the events from bubbling up when\n     * clicking on a list item!\n     *\n     * Using `event.stopPropagation()` will prevent the panel from closing.\n     *\n     * @default true\n     */\n    autoClose?: boolean;\n\n    /**\n     * Additional classes to be set on the menu group element.\n     */\n    groupClassName?: string;\n\n    /**\n     * Additional addon for the input group.\n     */\n    trailingInputAddon?: React.ReactNode;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n};\n\nconst ListMenu = <T extends ListMenuNavItem>(props: ListMenuProps<T>) => {\n    const {\n        menuItems,\n        focusFilter = false,\n        enableFilter = false,\n        filterPlaceholder,\n        onFilterChange = () => {},\n        notFoundMessage,\n        className = '',\n        groupClassName = '',\n        responsive = true,\n        autoClose = true,\n        filterKey = 'key',\n        trailingInputAddon,\n        ...remainingProps\n    } = props;\n\n    const [filterValue, setFilterValue] = useState('');\n    const [isMobileMode, setIsMobileMode] = useState(false);\n    const [isExpanderOpen, setIsExpanderOpen] = useState(false);\n    const [mobileHeader, setMobileHeader] = useState<ReactNode>('');\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const listRef = useRef<HTMLDivElement>(null);\n\n    const buildMobileHeader = () => {\n        if (responsive && listRef.current) {\n            const [activeElement] = listRef.current.getElementsByClassName('active') as HTMLCollectionOf<HTMLElement>;\n            setMobileHeader(\n                <div className='display-flex align-items-center'>\n                    <span className='rioglyph rioglyph-menu-hamburger margin-right-10' />\n                    <span>{activeElement?.innerText}</span>\n                </div>\n            );\n        }\n    };\n\n    // clear filter input on esc\n    useEsc(() => {\n        if (enableFilter && inputRef.current === document.activeElement) {\n            setFilterValue('');\n        }\n    });\n\n    // Convert the menu to an expandable panel for smaller screens\n    const handleMobileSize = debounce(() => {\n        buildMobileHeader();\n        setIsMobileMode(window.innerWidth < MOBILE_MAX_WIDTH);\n    }, RESIZE_THROTTLING);\n\n    // Render a dropdown menu on mobile on mount\n    useEffect(handleMobileSize, []);\n\n    useWindowResize(handleMobileSize);\n\n    const focusInput = () => {\n        inputRef.current?.focus();\n    };\n\n    useKey((event: KeyboardEvent) => {\n        if ((event.metaKey || event.ctrlKey) && event.key === 'k') {\n            event.preventDefault();\n            focusInput();\n        }\n    });\n\n    // Focus filter input if requested\n    useEffectOnce(() => {\n        focusFilter && focusInput();\n    });\n\n    useEffect(() => buildMobileHeader, [menuItems]);\n\n    const handleClear = () => focusFilter && focusInput();\n\n    const handleFilterChange = (value: string) => {\n        setFilterValue(value);\n        onFilterChange(value);\n    };\n\n    const filteredMenuItems = filterMenuItems(menuItems, filterValue, filterKey);\n\n    const handleExpanderBodyClick = (event: MouseEvent) => {\n        const isListItem = (event.target as HTMLDivElement).parentElement?.tagName.toLowerCase() === 'li';\n        if (autoClose && isListItem) {\n            setIsExpanderOpen(false);\n        }\n    };\n\n    const formClassNames = classNames(\n        'form-group',\n        'margin-bottom-5',\n        'padding-left-15',\n        'padding-right-15',\n        'padding-bottom-15',\n        'position-sticky',\n        'top-0',\n        'z-index-1'\n    );\n\n    const listMenu = (\n        <div {...remainingProps} className={`ListMenu ${className} ${filterValue ? 'filtered' : ''}`} ref={listRef}>\n            {enableFilter && (\n                <div className={formClassNames}>\n                    <div className='input-group width-100pct'>\n                        <span className='input-group-addon'>\n                            <span className='rioglyph rioglyph-search' aria-hidden='true' />\n                        </span>\n                        <ClearableInput\n                            value={filterValue}\n                            inputRef={inputRef}\n                            placeholder={filterPlaceholder}\n                            onChange={handleFilterChange}\n                            onClear={handleClear}\n                        />\n                        {trailingInputAddon && trailingInputAddon}\n                    </div>\n                </div>\n            )}\n\n            {!hasMenuItems(filteredMenuItems) && (\n                <div className='padding-top-25 text-center text-color-gray'>{notFoundMessage}</div>\n            )}\n\n            {filteredMenuItems.map((menuGroup, index) => (\n                <ListMenuGroup key={index} className={groupClassName} menuGroup={menuGroup} />\n            ))}\n        </div>\n    );\n\n    if (responsive && isMobileMode) {\n        return (\n            <ExpanderPanel\n                title={mobileHeader}\n                bsStyle='default'\n                open={isExpanderOpen}\n                onToggle={() => setIsExpanderOpen(!isExpanderOpen)}\n                unmountOnExit={false}\n                className='shadow-default'\n            >\n                <div onClick={handleExpanderBodyClick}>{listMenu}</div>\n            </ExpanderPanel>\n        );\n    }\n\n    return listMenu;\n};\n\nexport default ListMenu;\n"],"names":["RESIZE_THROTTLING","MOBILE_MAX_WIDTH","filterMenuItems","items","value","filterKey","item","navItem","hasMenuItems","navItems","isEmpty","ListMenu","props","menuItems","focusFilter","enableFilter","filterPlaceholder","onFilterChange","notFoundMessage","className","groupClassName","responsive","autoClose","trailingInputAddon","remainingProps","filterValue","setFilterValue","useState","isMobileMode","setIsMobileMode","isExpanderOpen","setIsExpanderOpen","mobileHeader","setMobileHeader","inputRef","useRef","listRef","buildMobileHeader","activeElement","jsxs","jsx","useEsc","handleMobileSize","debounce","useEffect","useWindowResize","focusInput","useKey","event","useEffectOnce","handleClear","handleFilterChange","filteredMenuItems","handleExpanderBodyClick","isListItem","formClassNames","classNames","listMenu","ClearableInput","menuGroup","index","ListMenuGroup","ExpanderPanel"],"mappings":"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"}
+{"version":3,"file":"ListMenu.js","sources":["../../../src/components/listMenu/ListMenu.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState, type MouseEvent, type ReactNode } from 'react';\nimport { isEmpty } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport useEffectOnce from '../../hooks/useEffectOnce';\nimport useSearchHighlight from '../../hooks/useSearchHighlight';\nimport ClearableInput from '../clearableInput/ClearableInput';\nimport ExpanderPanel from '../expander/ExpanderPanel';\nimport ListMenuGroup, { type ListMenuNavItem, type ListMenuItem } from './ListMenuGroup';\nimport useEsc from '../../hooks/useEsc';\nimport useWindowResize from '../../hooks/useWindowResize';\nimport useKey from '../../hooks/useKey';\nimport { debounce } from 'es-toolkit/function';\n\nexport type { ListMenuNavItem, ListMenuItem } from './ListMenuGroup';\n\nconst RESIZE_THROTTLING = 10;\nconst MOBILE_MAX_WIDTH = 580;\n\nconst filterMenuItems = <T extends ListMenuNavItem>(\n    items: ListMenuItem<T>[],\n    value: string,\n    filterKey: keyof T\n): ListMenuItem<T>[] =>\n    items.map(item => ({\n        ...item,\n        navItems: item.navItems.filter(navItem =>\n            (navItem[filterKey] as string).toLowerCase().includes(value.toLowerCase())\n        ),\n    }));\n\nconst hasMenuItems = <T extends ListMenuNavItem>(items: ListMenuItem<T>[]) =>\n    items.find(({ navItems }) => !isEmpty(navItems));\n\ntype ListMenuFilterFn<T extends ListMenuNavItem> = (\n    items: ListMenuItem<T>[],\n    value: string,\n    filterKey: keyof T\n) => ListMenuItem<T>[];\n\nexport type ListMenuProps<T extends ListMenuNavItem> = {\n    /**\n     * List of menu item groups to be shown.\n     */\n    menuItems: ListMenuItem<T>[];\n\n    /**\n     * Enables the filter.\n     *\n     * @default false\n     */\n    enableFilter?: boolean;\n\n    /**\n     * Focus the filter input.\n     *\n     * @default false\n     */\n    focusFilter?: boolean;\n\n    /**\n     * Define the attribute key for filtering.\n     *\n     * @default 'key'\n     */\n    filterKey?: keyof T;\n\n    /**\n     * The placeholder text for the filter input.\n     */\n    filterPlaceholder?: string;\n\n    /**\n     * Gets called when the filter input changes.\n     *\n     * @param value\n     * @returns\n     */\n    onFilterChange?: (value: string) => void;\n\n    /**\n     * A localized message to be shown when the filter result is empty.\n     */\n    notFoundMessage?: string | ReactNode;\n\n    /**\n     * The menu uses collapses on smaller screens using an expander panel.\n     *\n     * @default true\n     */\n    responsive?: boolean;\n\n    /**\n     * Enables automatic closing of the expander panel.\n     *\n     * Only relevant when using the `responsive` flag. Note: Make sure to not stop the events from bubbling up when\n     * clicking on a list item!\n     *\n     * Using `event.stopPropagation()` will prevent the panel from closing.\n     *\n     * @default true\n     */\n    autoClose?: boolean;\n\n    /**\n     * Additional classes to be set on the menu group element.\n     */\n    groupClassName?: string;\n\n    /**\n     * Additional addon for the input group.\n     */\n    trailingInputAddon?: React.ReactNode;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n\n    /**\n     * Optional custom filter function.\n     *\n     * Use this when filtering should do more than a simple substring match,\n     * for example fuzzy ranking or multi-field weighting.\n     */\n    filterFn?: ListMenuFilterFn<T>;\n};\n\nconst ListMenu = <T extends ListMenuNavItem>(props: ListMenuProps<T>) => {\n    const {\n        menuItems,\n        focusFilter = false,\n        enableFilter = false,\n        filterPlaceholder,\n        onFilterChange = () => {},\n        notFoundMessage,\n        className = '',\n        groupClassName = '',\n        responsive = true,\n        autoClose = true,\n        filterKey = 'key',\n        trailingInputAddon,\n        filterFn,\n        ...remainingProps\n    } = props;\n\n    const [filterValue, setFilterValue] = useState('');\n    const [isMobileMode, setIsMobileMode] = useState(false);\n    const [isExpanderOpen, setIsExpanderOpen] = useState(false);\n    const [mobileHeader, setMobileHeader] = useState<ReactNode>('');\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const listRef = useRef<HTMLDivElement>(null);\n\n    const buildMobileHeader = () => {\n        if (responsive && listRef.current) {\n            const [activeElement] = listRef.current.getElementsByClassName('active') as HTMLCollectionOf<HTMLElement>;\n            setMobileHeader(\n                <div className='display-flex align-items-center'>\n                    <span className='rioglyph rioglyph-menu-hamburger margin-right-10' />\n                    <span>{activeElement?.innerText}</span>\n                </div>\n            );\n        }\n    };\n\n    // clear filter input on esc\n    useEsc(() => {\n        if (enableFilter && inputRef.current === document.activeElement) {\n            setFilterValue('');\n            onFilterChange('');\n        }\n    });\n\n    // Convert the menu to an expandable panel for smaller screens\n    const handleMobileSize = debounce(() => {\n        buildMobileHeader();\n        setIsMobileMode(window.innerWidth < MOBILE_MAX_WIDTH);\n    }, RESIZE_THROTTLING);\n\n    // Render a dropdown menu on mobile on mount\n    useEffect(handleMobileSize, []);\n\n    useWindowResize(handleMobileSize);\n\n    const focusInput = () => {\n        inputRef.current?.focus();\n    };\n\n    useKey((event: KeyboardEvent) => {\n        if ((event.metaKey || event.ctrlKey) && event.key === 'k') {\n            event.preventDefault();\n            focusInput();\n        }\n    });\n\n    // Focus filter input if requested\n    useEffectOnce(() => {\n        focusFilter && focusInput();\n    });\n\n    useEffect(buildMobileHeader, [menuItems]);\n\n    const handleClear = () => focusFilter && focusInput();\n\n    const handleFilterChange = (value: string) => {\n        setFilterValue(value);\n        onFilterChange(value);\n    };\n\n    const filteredMenuItems = enableFilter\n        ? (filterFn ?? filterMenuItems)(menuItems, filterValue, filterKey)\n        : menuItems;\n\n    useSearchHighlight({\n        ref: listRef,\n        query: enableFilter ? filterValue : '',\n        deps: [filteredMenuItems],\n    });\n\n    const handleExpanderBodyClick = (event: MouseEvent) => {\n        const isListItem = (event.target as HTMLDivElement).parentElement?.tagName.toLowerCase() === 'li';\n        if (autoClose && isListItem) {\n            setIsExpanderOpen(false);\n        }\n    };\n\n    const formClassNames = classNames(\n        'form-group',\n        'margin-bottom-5',\n        'padding-left-15',\n        'padding-right-15',\n        'padding-bottom-15',\n        'position-sticky',\n        'top-0',\n        'z-index-1'\n    );\n\n    const listMenu = (\n        <div {...remainingProps} className={`ListMenu ${className} ${filterValue ? 'filtered' : ''}`} ref={listRef}>\n            {enableFilter && (\n                <div className={formClassNames}>\n                    <div className='input-group width-100pct'>\n                        <span className='input-group-addon'>\n                            <span className='rioglyph rioglyph-search' aria-hidden='true' />\n                        </span>\n                        <ClearableInput\n                            value={filterValue}\n                            inputRef={inputRef}\n                            placeholder={filterPlaceholder}\n                            onChange={handleFilterChange}\n                            onClear={handleClear}\n                        />\n                        {trailingInputAddon && trailingInputAddon}\n                    </div>\n                </div>\n            )}\n\n            {!hasMenuItems(filteredMenuItems) && (\n                <div className='padding-top-25 text-center text-color-gray'>{notFoundMessage}</div>\n            )}\n\n            {filteredMenuItems.map((menuGroup, index) => (\n                <ListMenuGroup key={index} className={groupClassName} menuGroup={menuGroup} />\n            ))}\n        </div>\n    );\n\n    if (responsive && isMobileMode) {\n        return (\n            <ExpanderPanel\n                title={mobileHeader}\n                bsStyle='default'\n                open={isExpanderOpen}\n                onToggle={() => setIsExpanderOpen(!isExpanderOpen)}\n                unmountOnExit={false}\n                className='shadow-default'\n            >\n                <div onClick={handleExpanderBodyClick}>{listMenu}</div>\n            </ExpanderPanel>\n        );\n    }\n\n    return listMenu;\n};\n\nexport default ListMenu;\n"],"names":["RESIZE_THROTTLING","MOBILE_MAX_WIDTH","filterMenuItems","items","value","filterKey","item","navItem","hasMenuItems","navItems","isEmpty","ListMenu","props","menuItems","focusFilter","enableFilter","filterPlaceholder","onFilterChange","notFoundMessage","className","groupClassName","responsive","autoClose","trailingInputAddon","filterFn","remainingProps","filterValue","setFilterValue","useState","isMobileMode","setIsMobileMode","isExpanderOpen","setIsExpanderOpen","mobileHeader","setMobileHeader","inputRef","useRef","listRef","buildMobileHeader","activeElement","jsxs","jsx","useEsc","handleMobileSize","debounce","useEffect","useWindowResize","focusInput","useKey","event","useEffectOnce","handleClear","handleFilterChange","filteredMenuItems","useSearchHighlight","handleExpanderBodyClick","isListItem","formClassNames","classNames","listMenu","ClearableInput","menuGroup","index","ListMenuGroup","ExpanderPanel"],"mappings":"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"}

package/components/loadMore/LoadMoreProgress.js

@@ -4,16 +4,16 @@ import o from "../../utils/classNames.js";
 const t = {
   WHITE: "white",
   GRAY: "gray"
-}, p = ({ loaded: e = 0, total: s = 0, progressBarStyle: a = t.WHITE }) => {
+}, p = ({ loaded: e = 0, total: s = 0, progressBarStyle: i = t.WHITE }) => {
   if (!e || !s)
     return null;
-  const i = `${e / s * 100}%`, n = o(
+  const a = `${e / s * 100}%`, n = o(
     "progress",
     "height-2 margin-bottom-10",
-    a === t.GRAY ? "bg-lighter" : "bg-white"
+    i === t.GRAY ? "bg-lighter" : "bg-white"
   ), c = o(
     "progress-bar",
-    a === t.GRAY && i !== "100%" && "border border-right-only border-color-white border-width-2"
+    i === t.GRAY && a !== "100%" && "border border-right-only border-color-white border-width-2"
   );
   return /* @__PURE__ */ m(l.Fragment, { children: [
     /* @__PURE__ */ m("div", { className: "text-center margin-bottom-3", children: [
@@ -21,11 +21,10 @@ const t = {
       /* @__PURE__ */ r("span", { className: "margin-left-5 margin-right-5", children: "/" }),
       /* @__PURE__ */ r("span", { className: "text-medium", children: s })
     ] }),
-    /* @__PURE__ */ r("div", { className: n, children: /* @__PURE__ */ r("div", { className: c, style: { width: i } }) })
+    /* @__PURE__ */ r("div", { className: n, children: /* @__PURE__ */ r("div", { className: c, style: { width: a } }) })
   ] });
 };
 export {
-  p as LoadMoreProgress,
-  p as default
+  p as LoadMoreProgress
 };
 //# sourceMappingURL=LoadMoreProgress.js.map