@rio-cloud/rio-uikit 2.0.1 → 2.2.0

package/components/assetTree/TreeNode.js

@@ -1,40 +1,40 @@
-import { jsxs as c, jsx as a } from "react/jsx-runtime";
-import T from "react";
-import C from "classnames";
-import g from "../checkbox/Checkbox.js";
-import { withRioglyphPrefix as i } from "./treeUtils.js";
-const j = T.memo((t) => {
+import { jsxs as n, jsx as a } from "react/jsx-runtime";
+import b from "react";
+import f from "../../utils/classNames.js";
+import x from "../checkbox/Checkbox.js";
+import T from "./TreeIcon.js";
+const y = b.memo((c) => {
   const {
     node: e,
     hasMultiselect: r = !1,
-    isSelected: s = !1,
-    isOpen: d = !1,
-    isIndeterminate: l = !1,
-    onToggleNode: m,
-    onSelect: h
-  } = t, p = C(
+    isSelected: l = !1,
+    isOpen: t = !1,
+    isIndeterminate: s = !1,
+    onToggleNode: i,
+    onSelect: d
+  } = c, m = f(
     "TreeNode",
     "from-group",
-    s && "checked",
+    l && "checked",
     e.className && e.className
-  ), o = !!e.items.length, N = e.expandedIcon || e.icon, n = d ? i(N) : i(e.icon), b = () => {
-    h(e, l);
-  }, f = (x) => {
-    x.target.closest(".TreeCheckbox") || o && m(e.id);
+  ), o = !!e.items.length, h = () => {
+    d(e, s);
+  }, N = (p) => {
+    p.target.closest(".TreeCheckbox") || o && i(e.id);
   };
-  return /* @__PURE__ */ c("div", { className: p, "data-key": e.id, onClick: f, children: [
+  return /* @__PURE__ */ n("div", { className: m, "data-key": e.id, onClick: N, children: [
     r && /* @__PURE__ */ a(
-      g,
+      x,
       {
         className: "TreeCheckbox",
-        checked: s,
+        checked: l,
         disabled: e.disabled,
-        indeterminate: l,
-        onClick: b
+        indeterminate: s,
+        onClick: h
       }
     ),
-    /* @__PURE__ */ c("span", { className: "TreeLabel TreeLabelName", children: [
-      n && /* @__PURE__ */ a("span", { className: `rioglyph ${n}` }),
+    /* @__PURE__ */ n("span", { className: "TreeLabel TreeLabelName", children: [
+      /* @__PURE__ */ a(T, { icon: e.icon, expandedIcon: e.expandedIcon, isOpen: t }),
       /* @__PURE__ */ a("span", { className: "TreeLabelNameText", children: /* @__PURE__ */ a("span", { className: "TreeLabelNameTextHeadline", children: e.name }) }),
       /* @__PURE__ */ a("span", { className: "TreeLabelCount label label-muted label-filled label-condensed", children: e.items.length }),
       /* @__PURE__ */ a(
@@ -47,6 +47,6 @@ const j = T.memo((t) => {
   ] });
 });
 export {
-  j as default
+  y as default
 };
 //# sourceMappingURL=TreeNode.js.map

package/components/assetTree/TreeNode.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeNode.js","sources":["../../../src/components/assetTree/TreeNode.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\n\nimport Checkbox from '../checkbox/Checkbox';\nimport { withRioglyphPrefix } from './treeUtils';\nimport type { GroupedItem } from './Tree';\n\nexport type TreeNodeProps = {\n    node: GroupedItem;\n    hasMultiselect?: boolean;\n    isSelected?: boolean;\n    isOpen?: boolean;\n    isIndeterminate?: boolean;\n    onToggleNode: (nodeId: string) => void;\n    onSelect: (node: GroupedItem, isIndeterminate: boolean) => void;\n    className?: string;\n};\n\nconst TreeNode = React.memo((props: TreeNodeProps) => {\n    const {\n        node,\n        hasMultiselect = false,\n        isSelected = false,\n        isOpen = false,\n        isIndeterminate = false,\n        onToggleNode,\n        onSelect,\n    } = props;\n\n    const treeNodeClassNames = classNames(\n        'TreeNode',\n        'from-group',\n        isSelected && 'checked',\n        node.className && node.className\n    );\n\n    const hasChildren = !!node.items.length;\n\n    const expandedIcon = node.expandedIcon || node.icon;\n    const iconName = isOpen ? withRioglyphPrefix(expandedIcon) : withRioglyphPrefix(node.icon);\n\n    const handleNodeSelection = () => {\n        onSelect(node, isIndeterminate);\n    };\n\n    const handleContainerClick = (event: React.MouseEvent<HTMLDivElement>) => {\n        // Ignore clicks on checkboxes and don't expand or collapse on checkbox clicks\n        const isCheckbox = (event.target as HTMLElement).closest('.TreeCheckbox');\n        if (isCheckbox) {\n            return;\n        }\n\n        if (hasChildren) {\n            onToggleNode(node.id);\n        }\n    };\n\n    return (\n        <div className={treeNodeClassNames} data-key={node.id} onClick={handleContainerClick}>\n            {hasMultiselect && (\n                <Checkbox\n                    className='TreeCheckbox'\n                    checked={isSelected}\n                    disabled={node.disabled}\n                    indeterminate={isIndeterminate}\n                    onClick={handleNodeSelection}\n                />\n            )}\n            <span className='TreeLabel TreeLabelName'>\n                {iconName && <span className={`rioglyph ${iconName}`} />}\n                <span className='TreeLabelNameText'>\n                    <span className='TreeLabelNameTextHeadline'>{node.name}</span>\n                </span>\n                <span className='TreeLabelCount label label-muted label-filled label-condensed'>\n                    {node.items.length}\n                </span>\n                <span\n                    className={`TreeLabelExpander rioglyph rioglyph-chevron-down ${\n                        hasChildren ? '' : 'text-color-light'\n                    }`}\n                />\n            </span>\n        </div>\n    );\n});\n\nexport default TreeNode;\n"],"names":["TreeNode","React","props","node","hasMultiselect","isSelected","isOpen","isIndeterminate","onToggleNode","onSelect","treeNodeClassNames","classNames","hasChildren","expandedIcon","iconName","withRioglyphPrefix","handleNodeSelection","handleContainerClick","event","jsxs","jsx","Checkbox"],"mappings":";;;;;AAkBA,MAAMA,IAAWC,EAAM,KAAK,CAACC,MAAyB;AAClD,QAAM;AAAA,IACF,MAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,IACjB,YAAAC,IAAa;AAAA,IACb,QAAAC,IAAS;AAAA,IACT,iBAAAC,IAAkB;AAAA,IAClB,cAAAC;AAAA,IACA,UAAAC;AAAA,EAAA,IACAP,GAEEQ,IAAqBC;AAAA,IACvB;AAAA,IACA;AAAA,IACAN,KAAc;AAAA,IACdF,EAAK,aAAaA,EAAK;AAAA,EAAA,GAGrBS,IAAc,CAAC,CAACT,EAAK,MAAM,QAE3BU,IAAeV,EAAK,gBAAgBA,EAAK,MACzCW,IAAWR,IAASS,EAAmBF,CAAY,IAAIE,EAAmBZ,EAAK,IAAI,GAEnFa,IAAsB,MAAM;AAC9B,IAAAP,EAASN,GAAMI,CAAe;AAAA,EAClC,GAEMU,IAAuB,CAACC,MAA4C;AAGtE,IADoBA,EAAM,OAAuB,QAAQ,eAAe,KAKpEN,KACAJ,EAAaL,EAAK,EAAE;AAAA,EAE5B;AAEA,SACI,gBAAAgB,EAAC,SAAI,WAAWT,GAAoB,YAAUP,EAAK,IAAI,SAASc,GAC3D,UAAA;AAAA,IAAAb,KACG,gBAAAgB;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,WAAU;AAAA,QACV,SAAShB;AAAA,QACT,UAAUF,EAAK;AAAA,QACf,eAAeI;AAAA,QACf,SAASS;AAAA,MAAA;AAAA,IAAA;AAAA,IAGjB,gBAAAG,EAAC,QAAA,EAAK,WAAU,2BACX,UAAA;AAAA,MAAAL,KAAY,gBAAAM,EAAC,QAAA,EAAK,WAAW,YAAYN,CAAQ,IAAI;AAAA,MACtD,gBAAAM,EAAC,QAAA,EAAK,WAAU,qBACZ,UAAA,gBAAAA,EAAC,UAAK,WAAU,6BAA6B,UAAAjB,EAAK,KAAA,CAAK,EAAA,CAC3D;AAAA,wBACC,QAAA,EAAK,WAAU,iEACX,UAAAA,EAAK,MAAM,QAChB;AAAA,MACA,gBAAAiB;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAW,oDACPR,IAAc,KAAK,kBACvB;AAAA,QAAA;AAAA,MAAA;AAAA,IACJ,EAAA,CACJ;AAAA,EAAA,GACJ;AAER,CAAC;"}
+{"version":3,"file":"TreeNode.js","sources":["../../../src/components/assetTree/TreeNode.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from '../../utils/classNames';\nimport Checkbox from '../checkbox/Checkbox';\nimport type { GroupedItem } from './Tree';\nimport TreeIcon from './TreeIcon';\n\nexport type TreeNodeProps = {\n    node: GroupedItem;\n    hasMultiselect?: boolean;\n    isSelected?: boolean;\n    isOpen?: boolean;\n    isIndeterminate?: boolean;\n    onToggleNode: (nodeId: string) => void;\n    onSelect: (node: GroupedItem, isIndeterminate: boolean) => void;\n    className?: string;\n};\n\nconst TreeNode = React.memo((props: TreeNodeProps) => {\n    const {\n        node,\n        hasMultiselect = false,\n        isSelected = false,\n        isOpen = false,\n        isIndeterminate = false,\n        onToggleNode,\n        onSelect,\n    } = props;\n\n    const treeNodeClassNames = classNames(\n        'TreeNode',\n        'from-group',\n        isSelected && 'checked',\n        node.className && node.className\n    );\n\n    const hasChildren = !!node.items.length;\n\n    const handleNodeSelection = () => {\n        onSelect(node, isIndeterminate);\n    };\n\n    const handleContainerClick = (event: React.MouseEvent<HTMLDivElement>) => {\n        // Ignore clicks on checkboxes and don't expand or collapse on checkbox clicks\n        const isCheckbox = (event.target as HTMLElement).closest('.TreeCheckbox');\n        if (isCheckbox) {\n            return;\n        }\n\n        if (hasChildren) {\n            onToggleNode(node.id);\n        }\n    };\n\n    return (\n        <div className={treeNodeClassNames} data-key={node.id} onClick={handleContainerClick}>\n            {hasMultiselect && (\n                <Checkbox\n                    className='TreeCheckbox'\n                    checked={isSelected}\n                    disabled={node.disabled}\n                    indeterminate={isIndeterminate}\n                    onClick={handleNodeSelection}\n                />\n            )}\n            <span className='TreeLabel TreeLabelName'>\n                <TreeIcon icon={node.icon} expandedIcon={node.expandedIcon} isOpen={isOpen} />\n                <span className='TreeLabelNameText'>\n                    <span className='TreeLabelNameTextHeadline'>{node.name}</span>\n                </span>\n                <span className='TreeLabelCount label label-muted label-filled label-condensed'>\n                    {node.items.length}\n                </span>\n                <span\n                    className={`TreeLabelExpander rioglyph rioglyph-chevron-down ${\n                        hasChildren ? '' : 'text-color-light'\n                    }`}\n                />\n            </span>\n        </div>\n    );\n});\n\nexport default TreeNode;\n"],"names":["TreeNode","React","props","node","hasMultiselect","isSelected","isOpen","isIndeterminate","onToggleNode","onSelect","treeNodeClassNames","classNames","hasChildren","handleNodeSelection","handleContainerClick","event","jsxs","jsx","Checkbox","TreeIcon"],"mappings":";;;;;AAkBA,MAAMA,IAAWC,EAAM,KAAK,CAACC,MAAyB;AAClD,QAAM;AAAA,IACF,MAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,IACjB,YAAAC,IAAa;AAAA,IACb,QAAAC,IAAS;AAAA,IACT,iBAAAC,IAAkB;AAAA,IAClB,cAAAC;AAAA,IACA,UAAAC;AAAA,EAAA,IACAP,GAEEQ,IAAqBC;AAAA,IACvB;AAAA,IACA;AAAA,IACAN,KAAc;AAAA,IACdF,EAAK,aAAaA,EAAK;AAAA,EAAA,GAGrBS,IAAc,CAAC,CAACT,EAAK,MAAM,QAE3BU,IAAsB,MAAM;AAC9B,IAAAJ,EAASN,GAAMI,CAAe;AAAA,EAClC,GAEMO,IAAuB,CAACC,MAA4C;AAGtE,IADoBA,EAAM,OAAuB,QAAQ,eAAe,KAKpEH,KACAJ,EAAaL,EAAK,EAAE;AAAA,EAE5B;AAEA,SACI,gBAAAa,EAAC,SAAI,WAAWN,GAAoB,YAAUP,EAAK,IAAI,SAASW,GAC3D,UAAA;AAAA,IAAAV,KACG,gBAAAa;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,WAAU;AAAA,QACV,SAASb;AAAA,QACT,UAAUF,EAAK;AAAA,QACf,eAAeI;AAAA,QACf,SAASM;AAAA,MAAA;AAAA,IAAA;AAAA,IAGjB,gBAAAG,EAAC,QAAA,EAAK,WAAU,2BACZ,UAAA;AAAA,MAAA,gBAAAC,EAACE,KAAS,MAAMhB,EAAK,MAAM,cAAcA,EAAK,cAAc,QAAAG,GAAgB;AAAA,MAC5E,gBAAAW,EAAC,QAAA,EAAK,WAAU,qBACZ,UAAA,gBAAAA,EAAC,UAAK,WAAU,6BAA6B,UAAAd,EAAK,KAAA,CAAK,EAAA,CAC3D;AAAA,wBACC,QAAA,EAAK,WAAU,iEACX,UAAAA,EAAK,MAAM,QAChB;AAAA,MACA,gBAAAc;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAW,oDACPL,IAAc,KAAK,kBACvB;AAAA,QAAA;AAAA,MAAA;AAAA,IACJ,EAAA,CACJ;AAAA,EAAA,GACJ;AAER,CAAC;"}

package/components/assetTree/TreeNodeContainer.js

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import a from "classnames";
+import a from "../../utils/classNames.js";
 const c = (e) => {
   const { isOpen: o, groupId: n, disableAnimation: i, children: r } = e, s = a(
     "TreeNodeContainer",

package/components/assetTree/TreeNodeContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeNodeContainer.js","sources":["../../../src/components/assetTree/TreeNodeContainer.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\nimport classNames from 'classnames';\n\nexport type TreeNodeContainerProps = {\n    isOpen: boolean;\n    groupId?: string;\n    disableAnimation: boolean;\n};\n\nconst TreeNodeContainer = (props: PropsWithChildren<TreeNodeContainerProps>) => {\n    const { isOpen, groupId, disableAnimation, children } = props;\n\n    const treeNodeContainerClasses = classNames(\n        'TreeNodeContainer',\n        'user-select-none overflow-hidden',\n        isOpen && 'open'\n    );\n\n    return (\n        <div className={treeNodeContainerClasses} data-id={groupId}>\n            {children}\n        </div>\n    );\n};\n\nexport default TreeNodeContainer;\n"],"names":["TreeNodeContainer","props","isOpen","groupId","disableAnimation","children","treeNodeContainerClasses","classNames"],"mappings":";;AASA,MAAMA,IAAoB,CAACC,MAAqD;AAC5E,QAAM,EAAE,QAAAC,GAAQ,SAAAC,GAAS,kBAAAC,GAAkB,UAAAC,MAAaJ,GAElDK,IAA2BC;AAAA,IAC7B;AAAA,IACA;AAAA,IACAL,KAAU;AAAA,EAAA;AAGd,2BACK,OAAA,EAAI,WAAWI,GAA0B,WAASH,GAC9C,UAAAE,GACL;AAER;"}
+{"version":3,"file":"TreeNodeContainer.js","sources":["../../../src/components/assetTree/TreeNodeContainer.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\nimport classNames from '../../utils/classNames';\n\nexport type TreeNodeContainerProps = {\n    isOpen: boolean;\n    groupId?: string;\n    disableAnimation: boolean;\n};\n\nconst TreeNodeContainer = (props: PropsWithChildren<TreeNodeContainerProps>) => {\n    const { isOpen, groupId, disableAnimation, children } = props;\n\n    const treeNodeContainerClasses = classNames(\n        'TreeNodeContainer',\n        'user-select-none overflow-hidden',\n        isOpen && 'open'\n    );\n\n    return (\n        <div className={treeNodeContainerClasses} data-id={groupId}>\n            {children}\n        </div>\n    );\n};\n\nexport default TreeNodeContainer;\n"],"names":["TreeNodeContainer","props","isOpen","groupId","disableAnimation","children","treeNodeContainerClasses","classNames"],"mappings":";;AASA,MAAMA,IAAoB,CAACC,MAAqD;AAC5E,QAAM,EAAE,QAAAC,GAAQ,SAAAC,GAAS,kBAAAC,GAAkB,UAAAC,MAAaJ,GAElDK,IAA2BC;AAAA,IAC7B;AAAA,IACA;AAAA,IACAL,KAAU;AAAA,EAAA;AAGd,2BACK,OAAA,EAAI,WAAWI,GAA0B,WAASH,GAC9C,UAAAE,GACL;AAER;"}

package/components/assetTree/TreeOption.js

@@ -1,9 +1,9 @@
 import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import l from "classnames";
-import { noop as p } from "es-toolkit/function";
+import { noop as l } from "es-toolkit/function";
+import p from "../../utils/classNames.js";
 import m from "../switch/Switch.js";
 const x = (s) => {
-  const { isChecked: n = !1, className: o, label: t, onChange: a = p, ...r } = s, i = l(
+  const { isChecked: n = !1, className: o, label: t, onChange: a = l, ...r } = s, i = p(
     "TreeOption",
     "display-flex",
     "justify-content-start",

package/components/assetTree/TreeOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeOption.js","sources":["../../../src/components/assetTree/TreeOption.tsx"],"sourcesContent":["import type React from 'react';\nimport classNames from 'classnames';\nimport { noop } from 'es-toolkit/function';\n\nimport Switch from '../switch/Switch';\n\nexport type TreeOptionProps = {\n    /**\n     * Defines whether the option is set.\n     *\n     * @default false\n     */\n    isChecked?: boolean;\n\n    /**\n     * Callback triggered when option is selected.\n     * @param event\n     * @returns\n     */\n    onChange?: (event: React.MouseEvent<HTMLDivElement>) => void;\n\n    /**\n     * The label for the option.\n     */\n    label: string | React.ReactNode;\n\n    /**\n     * Additional classes added to the wrapping element.\n     */\n    className?: string;\n};\n\nconst TreeOption = (props: TreeOptionProps) => {\n    const { isChecked = false, className, label, onChange = noop, ...remainingProps } = props;\n\n    const optionClasses = classNames(\n        'TreeOption',\n        'display-flex',\n        'justify-content-start',\n        'align-items-center',\n        'gap-10',\n        'cursor-pointer',\n        className\n    );\n\n    return (\n        <div {...remainingProps} className={optionClasses} onClick={onChange}>\n            <span className='flex-1-1'>{label}</span>\n            <span className='pointer-events-none scale-80'>\n                <Switch keyName='TreeOption-switch' checked={isChecked} />\n            </span>\n        </div>\n    );\n};\n\nexport default TreeOption;\n"],"names":["TreeOption","props","isChecked","className","label","onChange","noop","remainingProps","optionClasses","classNames","jsx","Switch"],"mappings":";;;;AAgCA,MAAMA,IAAa,CAACC,MAA2B;AAC3C,QAAM,EAAE,WAAAC,IAAY,IAAO,WAAAC,GAAW,OAAAC,GAAO,UAAAC,IAAWC,GAAM,GAAGC,EAAA,IAAmBN,GAE9EO,IAAgBC;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACAN;AAAA,EAAA;AAGJ,2BACK,OAAA,EAAK,GAAGI,GAAgB,WAAWC,GAAe,SAASH,GACxD,UAAA;AAAA,IAAA,gBAAAK,EAAC,QAAA,EAAK,WAAU,YAAY,UAAAN,GAAM;AAAA,IAClC,gBAAAM,EAAC,QAAA,EAAK,WAAU,gCACZ,UAAA,gBAAAA,EAACC,KAAO,SAAQ,qBAAoB,SAAST,EAAA,CAAW,EAAA,CAC5D;AAAA,EAAA,GACJ;AAER;"}
+{"version":3,"file":"TreeOption.js","sources":["../../../src/components/assetTree/TreeOption.tsx"],"sourcesContent":["import type React from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport Switch from '../switch/Switch';\n\nexport type TreeOptionProps = {\n    /**\n     * Defines whether the option is set.\n     *\n     * @default false\n     */\n    isChecked?: boolean;\n\n    /**\n     * Callback triggered when option is selected.\n     * @param event\n     * @returns\n     */\n    onChange?: (event: React.MouseEvent<HTMLDivElement>) => void;\n\n    /**\n     * The label for the option.\n     */\n    label: string | React.ReactNode;\n\n    /**\n     * Additional classes added to the wrapping element.\n     */\n    className?: string;\n};\n\nconst TreeOption = (props: TreeOptionProps) => {\n    const { isChecked = false, className, label, onChange = noop, ...remainingProps } = props;\n\n    const optionClasses = classNames(\n        'TreeOption',\n        'display-flex',\n        'justify-content-start',\n        'align-items-center',\n        'gap-10',\n        'cursor-pointer',\n        className\n    );\n\n    return (\n        <div {...remainingProps} className={optionClasses} onClick={onChange}>\n            <span className='flex-1-1'>{label}</span>\n            <span className='pointer-events-none scale-80'>\n                <Switch keyName='TreeOption-switch' checked={isChecked} />\n            </span>\n        </div>\n    );\n};\n\nexport default TreeOption;\n"],"names":["TreeOption","props","isChecked","className","label","onChange","noop","remainingProps","optionClasses","classNames","jsx","Switch"],"mappings":";;;;AAgCA,MAAMA,IAAa,CAACC,MAA2B;AAC3C,QAAM,EAAE,WAAAC,IAAY,IAAO,WAAAC,GAAW,OAAAC,GAAO,UAAAC,IAAWC,GAAM,GAAGC,EAAA,IAAmBN,GAE9EO,IAAgBC;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACAN;AAAA,EAAA;AAGJ,2BACK,OAAA,EAAK,GAAGI,GAAgB,WAAWC,GAAe,SAASH,GACxD,UAAA;AAAA,IAAA,gBAAAK,EAAC,QAAA,EAAK,WAAU,YAAY,UAAAN,GAAM;AAAA,IAClC,gBAAAM,EAAC,QAAA,EAAK,WAAU,gCACZ,UAAA,gBAAAA,EAACC,KAAO,SAAQ,qBAAoB,SAAST,EAAA,CAAW,EAAA,CAC5D;AAAA,EAAA,GACJ;AAER;"}

package/components/assetTree/TreeOptions.js

@@ -1,13 +1,13 @@
 import { jsx as o } from "react/jsx-runtime";
-import l from "classnames";
-import { isEmpty as p } from "es-toolkit/compat";
+import { isEmpty as l } from "es-toolkit/compat";
+import p from "../../utils/classNames.js";
 import a from "../dropdown/ButtonDropdown.js";
 import d from "../tooltip/SimpleTooltip.js";
 const w = (i) => {
   const { treeOptions: e = [], treeOptionsTooltip: t, className: s } = i;
-  if (p(e))
+  if (l(e))
     return null;
-  const n = l("display-flex flex-column gap-10", "width-250", "padding-15", s), r = /* @__PURE__ */ o(
+  const n = p("display-flex flex-column gap-10", "width-250", "padding-15", s), r = /* @__PURE__ */ o(
     a,
     {
       title: /* @__PURE__ */ o("span", { className: "rioglyph rioglyph-option-vertical", "aria-hidden": "true" }),

package/components/assetTree/TreeOptions.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeOptions.js","sources":["../../../src/components/assetTree/TreeOptions.tsx"],"sourcesContent":["import type React from 'react';\nimport classNames from 'classnames';\nimport { isEmpty } from 'es-toolkit/compat';\n\nimport ButtonDropdown from '../dropdown/ButtonDropdown';\nimport SimpleTooltip from '../tooltip/SimpleTooltip';\n\nexport type TreeOptionsProps = {\n    treeOptions?: React.ReactNode[];\n    treeOptionsTooltip?: React.ReactNode;\n    className?: string;\n};\n\nconst TreeOptions = (props: TreeOptionsProps) => {\n    const { treeOptions = [], treeOptionsTooltip, className } = props;\n\n    if (isEmpty(treeOptions)) {\n        return null;\n    }\n\n    const dropdownClasses = classNames('display-flex flex-column gap-10', 'width-250', 'padding-15', className);\n\n    const customDropdown = <div className={dropdownClasses}>{treeOptions}</div>;\n\n    const dropdown = (\n        <ButtonDropdown\n            title={<span className='rioglyph rioglyph-option-vertical' aria-hidden='true' />}\n            bsStyle='default'\n            bsSize='sm'\n            customDropdown={customDropdown}\n            toggleClassName='hover-bg-white border-none text-color-gray hover-text-color-dark'\n            className='TreeHeaderOptions height-20'\n            pullRight\n            iconOnly\n        />\n    );\n\n    if (treeOptionsTooltip) {\n        return (\n            <SimpleTooltip\n                content={treeOptionsTooltip}\n                placement='bottom-end'\n                delay={{ show: 1000, hide: 0 }}\n                popperConfig={{\n                    modifiers: [\n                        {\n                            name: 'offset',\n                            options: {\n                                offset: [10, 5],\n                            },\n                        },\n                        {\n                            name: 'arrow',\n                            options: {},\n                        },\n                    ],\n                }}\n            >\n                <div>{dropdown}</div>\n            </SimpleTooltip>\n        );\n    }\n\n    return dropdown;\n};\n\nexport default TreeOptions;\n"],"names":["TreeOptions","props","treeOptions","treeOptionsTooltip","className","isEmpty","dropdownClasses","classNames","dropdown","jsx","ButtonDropdown","SimpleTooltip"],"mappings":";;;;;AAaA,MAAMA,IAAc,CAACC,MAA4B;AAC7C,QAAM,EAAE,aAAAC,IAAc,CAAA,GAAI,oBAAAC,GAAoB,WAAAC,MAAcH;AAE5D,MAAII,EAAQH,CAAW;AACnB,WAAO;AAGX,QAAMI,IAAkBC,EAAW,mCAAmC,aAAa,cAAcH,CAAS,GAIpGI,IACF,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,OAAO,gBAAAD,EAAC,QAAA,EAAK,WAAU,qCAAoC,eAAY,QAAO;AAAA,MAC9E,SAAQ;AAAA,MACR,QAAO;AAAA,MACP,gBAPe,gBAAAA,EAAC,OAAA,EAAI,WAAWH,GAAkB,UAAAJ,GAAY;AAAA,MAQ7D,iBAAgB;AAAA,MAChB,WAAU;AAAA,MACV,WAAS;AAAA,MACT,UAAQ;AAAA,IAAA;AAAA,EAAA;AAIhB,SAAIC,IAEI,gBAAAM;AAAA,IAACE;AAAA,IAAA;AAAA,MACG,SAASR;AAAA,MACT,WAAU;AAAA,MACV,OAAO,EAAE,MAAM,KAAM,MAAM,EAAA;AAAA,MAC3B,cAAc;AAAA,QACV,WAAW;AAAA,UACP;AAAA,YACI,MAAM;AAAA,YACN,SAAS;AAAA,cACL,QAAQ,CAAC,IAAI,CAAC;AAAA,YAAA;AAAA,UAClB;AAAA,UAEJ;AAAA,YACI,MAAM;AAAA,YACN,SAAS,CAAA;AAAA,UAAC;AAAA,QACd;AAAA,MACJ;AAAA,MAGJ,UAAA,gBAAAM,EAAC,SAAK,UAAAD,EAAA,CAAS;AAAA,IAAA;AAAA,EAAA,IAKpBA;AACX;"}
+{"version":3,"file":"TreeOptions.js","sources":["../../../src/components/assetTree/TreeOptions.tsx"],"sourcesContent":["import type React from 'react';\nimport { isEmpty } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport ButtonDropdown from '../dropdown/ButtonDropdown';\nimport SimpleTooltip from '../tooltip/SimpleTooltip';\n\nexport type TreeOptionsProps = {\n    treeOptions?: React.ReactNode[];\n    treeOptionsTooltip?: React.ReactNode;\n    className?: string;\n};\n\nconst TreeOptions = (props: TreeOptionsProps) => {\n    const { treeOptions = [], treeOptionsTooltip, className } = props;\n\n    if (isEmpty(treeOptions)) {\n        return null;\n    }\n\n    const dropdownClasses = classNames('display-flex flex-column gap-10', 'width-250', 'padding-15', className);\n\n    const customDropdown = <div className={dropdownClasses}>{treeOptions}</div>;\n\n    const dropdown = (\n        <ButtonDropdown\n            title={<span className='rioglyph rioglyph-option-vertical' aria-hidden='true' />}\n            bsStyle='default'\n            bsSize='sm'\n            customDropdown={customDropdown}\n            toggleClassName='hover-bg-white border-none text-color-gray hover-text-color-dark'\n            className='TreeHeaderOptions height-20'\n            pullRight\n            iconOnly\n        />\n    );\n\n    if (treeOptionsTooltip) {\n        return (\n            <SimpleTooltip\n                content={treeOptionsTooltip}\n                placement='bottom-end'\n                delay={{ show: 1000, hide: 0 }}\n                popperConfig={{\n                    modifiers: [\n                        {\n                            name: 'offset',\n                            options: {\n                                offset: [10, 5],\n                            },\n                        },\n                        {\n                            name: 'arrow',\n                            options: {},\n                        },\n                    ],\n                }}\n            >\n                <div>{dropdown}</div>\n            </SimpleTooltip>\n        );\n    }\n\n    return dropdown;\n};\n\nexport default TreeOptions;\n"],"names":["TreeOptions","props","treeOptions","treeOptionsTooltip","className","isEmpty","dropdownClasses","classNames","dropdown","jsx","ButtonDropdown","SimpleTooltip"],"mappings":";;;;;AAaA,MAAMA,IAAc,CAACC,MAA4B;AAC7C,QAAM,EAAE,aAAAC,IAAc,CAAA,GAAI,oBAAAC,GAAoB,WAAAC,MAAcH;AAE5D,MAAII,EAAQH,CAAW;AACnB,WAAO;AAGX,QAAMI,IAAkBC,EAAW,mCAAmC,aAAa,cAAcH,CAAS,GAIpGI,IACF,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,OAAO,gBAAAD,EAAC,QAAA,EAAK,WAAU,qCAAoC,eAAY,QAAO;AAAA,MAC9E,SAAQ;AAAA,MACR,QAAO;AAAA,MACP,gBAPe,gBAAAA,EAAC,OAAA,EAAI,WAAWH,GAAkB,UAAAJ,GAAY;AAAA,MAQ7D,iBAAgB;AAAA,MAChB,WAAU;AAAA,MACV,WAAS;AAAA,MACT,UAAQ;AAAA,IAAA;AAAA,EAAA;AAIhB,SAAIC,IAEI,gBAAAM;AAAA,IAACE;AAAA,IAAA;AAAA,MACG,SAASR;AAAA,MACT,WAAU;AAAA,MACV,OAAO,EAAE,MAAM,KAAM,MAAM,EAAA;AAAA,MAC3B,cAAc;AAAA,QACV,WAAW;AAAA,UACP;AAAA,YACI,MAAM;AAAA,YACN,SAAS;AAAA,cACL,QAAQ,CAAC,IAAI,CAAC;AAAA,YAAA;AAAA,UAClB;AAAA,UAEJ;AAAA,YACI,MAAM;AAAA,YACN,SAAS,CAAA;AAAA,UAAC;AAAA,QACd;AAAA,MACJ;AAAA,MAGJ,UAAA,gBAAAM,EAAC,SAAK,UAAAD,EAAA,CAAS;AAAA,IAAA;AAAA,EAAA,IAKpBA;AACX;"}

package/components/assetTree/TreeRoot.js

@@ -1,8 +1,8 @@
 import { jsx as a } from "react/jsx-runtime";
-import l from "classnames";
-import { useAutoAnimate as m } from "@formkit/auto-animate/react";
+import { useAutoAnimate as l } from "@formkit/auto-animate/react";
+import m from "../../utils/classNames.js";
 const u = ({ maxHeight: e, disableAnimation: o, children: t }) => {
-  const s = l("TreeRoot", "user-select-none", e ? "overflow-auto" : "overflow-hidden"), [r, n] = m();
+  const s = m("TreeRoot", "user-select-none", e ? "overflow-auto" : "overflow-hidden"), [r, n] = l();
   return n(!o), /* @__PURE__ */ a("div", { ref: r, className: s, style: { maxHeight: e }, children: t });
 };
 export {

package/components/assetTree/TreeRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeRoot.js","sources":["../../../src/components/assetTree/TreeRoot.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\nimport classNames from 'classnames';\nimport { useAutoAnimate } from '@formkit/auto-animate/react';\n\nexport type TreeRootProps = {\n    disableAnimation: boolean;\n    maxHeight?: number;\n};\n\nconst TreeRoot = ({ maxHeight, disableAnimation, children }: PropsWithChildren<TreeRootProps>) => {\n    const treeRootClasses = classNames('TreeRoot', 'user-select-none', maxHeight ? 'overflow-auto' : 'overflow-hidden');\n\n    const [parent, enableAnimations] = useAutoAnimate();\n    enableAnimations(!disableAnimation);\n\n    return (\n        <div ref={parent} className={treeRootClasses} style={{ maxHeight }}>\n            {children}\n        </div>\n    );\n};\n\nexport default TreeRoot;\n"],"names":["TreeRoot","maxHeight","disableAnimation","children","treeRootClasses","classNames","parent","enableAnimations","useAutoAnimate","jsx"],"mappings":";;;AASA,MAAMA,IAAW,CAAC,EAAE,WAAAC,GAAW,kBAAAC,GAAkB,UAAAC,QAAiD;AAC9F,QAAMC,IAAkBC,EAAW,YAAY,oBAAoBJ,IAAY,kBAAkB,iBAAiB,GAE5G,CAACK,GAAQC,CAAgB,IAAIC,EAAA;AACnC,SAAAD,EAAiB,CAACL,CAAgB,GAG9B,gBAAAO,EAAC,OAAA,EAAI,KAAKH,GAAQ,WAAWF,GAAiB,OAAO,EAAE,WAAAH,EAAA,GAClD,UAAAE,EAAA,CACL;AAER;"}
+{"version":3,"file":"TreeRoot.js","sources":["../../../src/components/assetTree/TreeRoot.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\nimport { useAutoAnimate } from '@formkit/auto-animate/react';\n\nimport classNames from '../../utils/classNames';\n\nexport type TreeRootProps = {\n    disableAnimation: boolean;\n    maxHeight?: number;\n};\n\nconst TreeRoot = ({ maxHeight, disableAnimation, children }: PropsWithChildren<TreeRootProps>) => {\n    const treeRootClasses = classNames('TreeRoot', 'user-select-none', maxHeight ? 'overflow-auto' : 'overflow-hidden');\n\n    const [parent, enableAnimations] = useAutoAnimate();\n    enableAnimations(!disableAnimation);\n\n    return (\n        <div ref={parent} className={treeRootClasses} style={{ maxHeight }}>\n            {children}\n        </div>\n    );\n};\n\nexport default TreeRoot;\n"],"names":["TreeRoot","maxHeight","disableAnimation","children","treeRootClasses","classNames","parent","enableAnimations","useAutoAnimate","jsx"],"mappings":";;;AAUA,MAAMA,IAAW,CAAC,EAAE,WAAAC,GAAW,kBAAAC,GAAkB,UAAAC,QAAiD;AAC9F,QAAMC,IAAkBC,EAAW,YAAY,oBAAoBJ,IAAY,kBAAkB,iBAAiB,GAE5G,CAACK,GAAQC,CAAgB,IAAIC,EAAA;AACnC,SAAAD,EAAiB,CAACL,CAAgB,GAG9B,gBAAAO,EAAC,OAAA,EAAI,KAAKH,GAAQ,WAAWF,GAAiB,OAAO,EAAE,WAAAH,EAAA,GAClD,UAAAE,EAAA,CACL;AAER;"}

package/components/assetTree/TreeSearch.d.ts

@@ -6,6 +6,8 @@ export type TreeSearchProps = {
     value?: string;
     /**
      * Callback for when the search value changes.
+     *
+     * @default () => {}
      * @param newValue
      * @param event
      * @returns

package/components/assetTree/TreeSearch.js

@@ -1,10 +1,10 @@
 import { jsx as e, jsxs as m } from "react/jsx-runtime";
 import n from "react";
-import p from "classnames";
-import { noop as i } from "es-toolkit/function";
+import { noop as p } from "es-toolkit/function";
+import i from "../../utils/classNames.js";
 import t from "../clearableInput/ClearableInput.js";
 const g = n.memo((a) => {
-  const { value: r, className: s, placeholder: o, onChange: l = i } = a, c = p("TreeSearch", s);
+  const { value: r, className: s, placeholder: o, onChange: l = p } = a, c = i("TreeSearch", s);
   return /* @__PURE__ */ e("div", { className: c, children: /* @__PURE__ */ m("div", { className: "input-group flex-1-0", children: [
     /* @__PURE__ */ e("span", { className: "input-group-addon", children: /* @__PURE__ */ e("span", { className: "rioglyph rioglyph-search", "aria-hidden": "true" }) }),
     /* @__PURE__ */ e(t, { value: r, onChange: l, placeholder: o })

package/components/assetTree/TreeSearch.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeSearch.js","sources":["../../../src/components/assetTree/TreeSearch.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { noop } from 'es-toolkit/function';\n\nimport ClearableInput from '../clearableInput/ClearableInput';\n\nexport type TreeSearchProps = {\n    /**\n     * The search value to be shown and used for the search.\n     */\n    value?: string;\n\n    /**\n     * Callback for when the search value changes.\n     * @param newValue\n     * @param event\n     * @returns\n     */\n    onChange?: (newValue: string, event: React.ChangeEvent | React.MouseEvent) => void;\n\n    /**\n     * The placeholder text used for the input field.\n     */\n    placeholder?: string;\n\n    /**\n     * Additional classes added to the wrapping element.\n     */\n    className?: string;\n};\n\nconst TreeSearch = React.memo((props: TreeSearchProps) => {\n    const { value, className, placeholder, onChange = noop } = props;\n\n    const classes = classNames('TreeSearch', className);\n\n    return (\n        <div className={classes}>\n            <div className='input-group flex-1-0'>\n                <span className='input-group-addon'>\n                    <span className='rioglyph rioglyph-search' aria-hidden='true' />\n                </span>\n                <ClearableInput value={value} onChange={onChange} placeholder={placeholder} />\n            </div>\n        </div>\n    );\n});\n\nexport default TreeSearch;\n"],"names":["TreeSearch","React","props","value","className","placeholder","onChange","noop","classes","classNames","jsxs","jsx","ClearableInput"],"mappings":";;;;;AA+BA,MAAMA,IAAaC,EAAM,KAAK,CAACC,MAA2B;AACtD,QAAM,EAAE,OAAAC,GAAO,WAAAC,GAAW,aAAAC,GAAa,UAAAC,IAAWC,MAASL,GAErDM,IAAUC,EAAW,cAAcL,CAAS;AAElD,2BACK,OAAA,EAAI,WAAWI,GACZ,UAAA,gBAAAE,EAAC,OAAA,EAAI,WAAU,wBACX,UAAA;AAAA,IAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,qBACZ,UAAA,gBAAAA,EAAC,UAAK,WAAU,4BAA2B,eAAY,OAAA,CAAO,EAAA,CAClE;AAAA,IACA,gBAAAA,EAACC,GAAA,EAAe,OAAAT,GAAc,UAAAG,GAAoB,aAAAD,EAAA,CAA0B;AAAA,EAAA,EAAA,CAChF,EAAA,CACJ;AAER,CAAC;"}
+{"version":3,"file":"TreeSearch.js","sources":["../../../src/components/assetTree/TreeSearch.tsx"],"sourcesContent":["import React from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport ClearableInput from '../clearableInput/ClearableInput';\n\nexport type TreeSearchProps = {\n    /**\n     * The search value to be shown and used for the search.\n     */\n    value?: string;\n\n    /**\n     * Callback for when the search value changes.\n     *\n     * @default () => {}\n     * @param newValue\n     * @param event\n     * @returns\n     */\n    onChange?: (newValue: string, event: React.ChangeEvent | React.MouseEvent) => void;\n\n    /**\n     * The placeholder text used for the input field.\n     */\n    placeholder?: string;\n\n    /**\n     * Additional classes added to the wrapping element.\n     */\n    className?: string;\n};\n\nconst TreeSearch = React.memo((props: TreeSearchProps) => {\n    const { value, className, placeholder, onChange = noop } = props;\n\n    const classes = classNames('TreeSearch', className);\n\n    return (\n        <div className={classes}>\n            <div className='input-group flex-1-0'>\n                <span className='input-group-addon'>\n                    <span className='rioglyph rioglyph-search' aria-hidden='true' />\n                </span>\n                <ClearableInput value={value} onChange={onChange} placeholder={placeholder} />\n            </div>\n        </div>\n    );\n});\n\nexport default TreeSearch;\n"],"names":["TreeSearch","React","props","value","className","placeholder","onChange","noop","classes","classNames","jsxs","jsx","ClearableInput"],"mappings":";;;;;AAiCA,MAAMA,IAAaC,EAAM,KAAK,CAACC,MAA2B;AACtD,QAAM,EAAE,OAAAC,GAAO,WAAAC,GAAW,aAAAC,GAAa,UAAAC,IAAWC,MAASL,GAErDM,IAAUC,EAAW,cAAcL,CAAS;AAElD,2BACK,OAAA,EAAI,WAAWI,GACZ,UAAA,gBAAAE,EAAC,OAAA,EAAI,WAAU,wBACX,UAAA;AAAA,IAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,qBACZ,UAAA,gBAAAA,EAAC,UAAK,WAAU,4BAA2B,eAAY,OAAA,CAAO,EAAA,CAClE;AAAA,IACA,gBAAAA,EAACC,GAAA,EAAe,OAAAT,GAAc,UAAAG,GAAoB,aAAAD,EAAA,CAA0B;AAAA,EAAA,EAAA,CAChF,EAAA,CACJ;AAER,CAAC;"}

package/components/assetTree/TreeSidebar.js

@@ -1,7 +1,7 @@
 import { jsxs as m, jsx as e } from "react/jsx-runtime";
 import l from "react";
 import { noop as c } from "es-toolkit/function";
-import t from "classnames";
+import t from "../../utils/classNames.js";
 import n from "./TreeSidebarCategories.js";
 const h = l.memo((a) => {
   const { className: s, onClick: r = c, ...o } = a, i = t("TreeSidebar", s);

package/components/assetTree/TreeSidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeSidebar.js","sources":["../../../src/components/assetTree/TreeSidebar.tsx"],"sourcesContent":["import React from 'react';\nimport { noop } from 'es-toolkit/function';\nimport classNames from 'classnames';\n\nimport TreeSidebarCategories from './TreeSidebarCategories';\nimport type { TreeCategoryNode } from './TreeCategory';\n\nexport type TreeSidebarProps = {\n    currentCategoryId?: string;\n    onSelectCategory?: (selectedCategory: string) => void;\n    onClick?: VoidFunction;\n    className?: string;\n    children?: TreeCategoryNode[];\n};\n\nconst TreeSidebar = React.memo((props: TreeSidebarProps) => {\n    const { className, onClick = noop, ...remainingProps } = props;\n\n    const classes = classNames('TreeSidebar', className);\n\n    return (\n        <div className={classes}>\n            <ul className='TreeSidebarNavigation' onClick={onClick}>\n                <TreeSidebarCategories {...remainingProps} />\n            </ul>\n            <div className='TreeSidebarToggle' onClick={onClick}>\n                <span className='rioglyph rioglyph-chevron-left' />\n            </div>\n        </div>\n    );\n});\n\nexport default TreeSidebar;\n"],"names":["TreeSidebar","React","props","className","onClick","noop","remainingProps","classes","classNames","jsxs","jsx","TreeSidebarCategories"],"mappings":";;;;;AAeA,MAAMA,IAAcC,EAAM,KAAK,CAACC,MAA4B;AACxD,QAAM,EAAE,WAAAC,GAAW,SAAAC,IAAUC,GAAM,GAAGC,MAAmBJ,GAEnDK,IAAUC,EAAW,eAAeL,CAAS;AAEnD,SACI,gBAAAM,EAAC,OAAA,EAAI,WAAWF,GACZ,UAAA;AAAA,IAAA,gBAAAG,EAAC,MAAA,EAAG,WAAU,yBAAwB,SAAAN,GAClC,4BAACO,GAAA,EAAuB,GAAGL,GAAgB,EAAA,CAC/C;AAAA,IACA,gBAAAI,EAAC,SAAI,WAAU,qBAAoB,SAAAN,GAC/B,UAAA,gBAAAM,EAAC,QAAA,EAAK,WAAU,iCAAA,CAAiC,EAAA,CACrD;AAAA,EAAA,GACJ;AAER,CAAC;"}
+{"version":3,"file":"TreeSidebar.js","sources":["../../../src/components/assetTree/TreeSidebar.tsx"],"sourcesContent":["import React from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport TreeSidebarCategories from './TreeSidebarCategories';\nimport type { TreeCategoryNode } from './TreeCategory';\n\nexport type TreeSidebarProps = {\n    currentCategoryId?: string;\n    onSelectCategory?: (selectedCategory: string) => void;\n    onClick?: VoidFunction;\n    className?: string;\n    children?: TreeCategoryNode[];\n};\n\nconst TreeSidebar = React.memo((props: TreeSidebarProps) => {\n    const { className, onClick = noop, ...remainingProps } = props;\n\n    const classes = classNames('TreeSidebar', className);\n\n    return (\n        <div className={classes}>\n            <ul className='TreeSidebarNavigation' onClick={onClick}>\n                <TreeSidebarCategories {...remainingProps} />\n            </ul>\n            <div className='TreeSidebarToggle' onClick={onClick}>\n                <span className='rioglyph rioglyph-chevron-left' />\n            </div>\n        </div>\n    );\n});\n\nexport default TreeSidebar;\n"],"names":["TreeSidebar","React","props","className","onClick","noop","remainingProps","classes","classNames","jsxs","jsx","TreeSidebarCategories"],"mappings":";;;;;AAeA,MAAMA,IAAcC,EAAM,KAAK,CAACC,MAA4B;AACxD,QAAM,EAAE,WAAAC,GAAW,SAAAC,IAAUC,GAAM,GAAGC,MAAmBJ,GAEnDK,IAAUC,EAAW,eAAeL,CAAS;AAEnD,SACI,gBAAAM,EAAC,OAAA,EAAI,WAAWF,GACZ,UAAA;AAAA,IAAA,gBAAAG,EAAC,MAAA,EAAG,WAAU,yBAAwB,SAAAN,GAClC,4BAACO,GAAA,EAAuB,GAAGL,GAAgB,EAAA,CAC/C;AAAA,IACA,gBAAAI,EAAC,SAAI,WAAU,qBAAoB,SAAAN,GAC/B,UAAA,gBAAAM,EAAC,QAAA,EAAK,WAAU,iCAAA,CAAiC,EAAA,CACrD;AAAA,EAAA,GACJ;AAER,CAAC;"}

package/components/assetTree/TreeSidebarCategories.js

@@ -1,12 +1,12 @@
 import { jsx as e, Fragment as g } from "react/jsx-runtime";
-import h from "classnames";
-import { noop as C } from "es-toolkit/function";
+import { noop as h } from "es-toolkit/function";
+import C from "../../utils/classNames.js";
 import u from "../overlay/OverlayTrigger.js";
 import s from "../tooltip/Tooltip.js";
 const y = "active", S = "selected", f = 1500, _ = (l) => {
-  const { children: r, currentCategoryId: c, onSelectCategory: i = C } = l;
+  const { children: r, currentCategoryId: c, onSelectCategory: i = h } = l;
   return r ? /* @__PURE__ */ e(g, { children: r.map((o) => {
-    const t = o.props.id, p = o.props.icon || "", a = o.props.label, m = h(
+    const t = o.props.id, p = o.props.icon || "", a = o.props.label, m = C(
       c === t ? y : "",
       o.props.hasSelection && S
     ), n = /* @__PURE__ */ e("li", { onClick: (d) => {

package/components/assetTree/TreeSidebarCategories.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeSidebarCategories.js","sources":["../../../src/components/assetTree/TreeSidebarCategories.tsx"],"sourcesContent":["import type React from 'react';\nimport classNames from 'classnames';\nimport { noop } from 'es-toolkit/function';\n\nimport OverlayTrigger from '../overlay/OverlayTrigger';\nimport Tooltip from '../tooltip/Tooltip';\nimport type { TreeCategoryNode } from './TreeCategory';\n\nconst ACTIVE_CLASS_NAME = 'active';\nconst SELECTED_CLASS_NAME = 'selected';\n\nconst TOOLTIP_DELAY = 1500;\n\nexport type TreeSidebarCategoriesProps = {\n    currentCategoryId?: string;\n    onSelectCategory?: (selectedCategory: string) => void;\n    children?: TreeCategoryNode[];\n};\n\nconst TreeSidebarCategories = (props: TreeSidebarCategoriesProps) => {\n    const { children, currentCategoryId, onSelectCategory = noop } = props;\n\n    if (!children) {\n        return null;\n    }\n\n    return (\n        <>\n            {children.map(child => {\n                const id = child.props.id;\n                const icon = child.props.icon || '';\n                const label = child.props.label;\n\n                const statusClassName = classNames(\n                    currentCategoryId === id ? ACTIVE_CLASS_NAME : '',\n                    child.props.hasSelection && SELECTED_CLASS_NAME\n                );\n\n                const handleSelectCategory = (event: React.MouseEvent<HTMLLIElement>) => {\n                    event.stopPropagation();\n                    onSelectCategory(id);\n                };\n\n                const category = (\n                    <li key={id} onClick={handleSelectCategory} className={statusClassName}>\n                        <div className='selection-bubble'>\n                            <span className={`rioglyph ${icon}`} />\n                        </div>\n                    </li>\n                );\n\n                if (label) {\n                    return (\n                        <OverlayTrigger\n                            key={`category-tooltip-${id}`}\n                            placement={Tooltip.RIGHT}\n                            delay={{ show: TOOLTIP_DELAY, hide: 0 }}\n                            overlay={\n                                <Tooltip id='tooltip' width='auto'>\n                                    <span>{label}</span>\n                                </Tooltip>\n                            }\n                        >\n                            {category}\n                        </OverlayTrigger>\n                    );\n                }\n\n                return category;\n            })}\n        </>\n    );\n};\n\nexport default TreeSidebarCategories;\n"],"names":["ACTIVE_CLASS_NAME","SELECTED_CLASS_NAME","TOOLTIP_DELAY","TreeSidebarCategories","props","children","currentCategoryId","onSelectCategory","noop","jsx","Fragment","child","id","icon","label","statusClassName","classNames","category","event","OverlayTrigger","Tooltip"],"mappings":";;;;;AAQA,MAAMA,IAAoB,UACpBC,IAAsB,YAEtBC,IAAgB,MAQhBC,IAAwB,CAACC,MAAsC;AACjE,QAAM,EAAE,UAAAC,GAAU,mBAAAC,GAAmB,kBAAAC,IAAmBC,MAASJ;AAEjE,SAAKC,IAKD,gBAAAI,EAAAC,GAAA,EACK,UAAAL,EAAS,IAAI,CAAAM,MAAS;AACnB,UAAMC,IAAKD,EAAM,MAAM,IACjBE,IAAOF,EAAM,MAAM,QAAQ,IAC3BG,IAAQH,EAAM,MAAM,OAEpBI,IAAkBC;AAAA,MACpBV,MAAsBM,IAAKZ,IAAoB;AAAA,MAC/CW,EAAM,MAAM,gBAAgBV;AAAA,IAAA,GAQ1BgB,IACF,gBAAAR,EAAC,MAAA,EAAY,SANY,CAACS,MAA2C;AACrE,MAAAA,EAAM,gBAAA,GACNX,EAAiBK,CAAE;AAAA,IACvB,GAGgD,WAAWG,GACnD,UAAA,gBAAAN,EAAC,OAAA,EAAI,WAAU,oBACX,UAAA,gBAAAA,EAAC,UAAK,WAAW,YAAYI,CAAI,GAAA,CAAI,GACzC,KAHKD,CAIT;AAGJ,WAAIE,IAEI,gBAAAL;AAAA,MAACU;AAAA,MAAA;AAAA,QAEG,WAAWC,EAAQ;AAAA,QACnB,OAAO,EAAE,MAAMlB,GAAe,MAAM,EAAA;AAAA,QACpC,SACI,gBAAAO,EAACW,GAAA,EAAQ,IAAG,WAAU,OAAM,QACxB,UAAA,gBAAAX,EAAC,QAAA,EAAM,UAAAK,EAAA,CAAM,EAAA,CACjB;AAAA,QAGH,UAAAG;AAAA,MAAA;AAAA,MATI,oBAAoBL,CAAE;AAAA,IAAA,IAchCK;AAAA,EACX,CAAC,EAAA,CACL,IA/CO;AAiDf;"}
+{"version":3,"file":"TreeSidebarCategories.js","sources":["../../../src/components/assetTree/TreeSidebarCategories.tsx"],"sourcesContent":["import type React from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport OverlayTrigger from '../overlay/OverlayTrigger';\nimport Tooltip from '../tooltip/Tooltip';\nimport type { TreeCategoryNode } from './TreeCategory';\n\nconst ACTIVE_CLASS_NAME = 'active';\nconst SELECTED_CLASS_NAME = 'selected';\n\nconst TOOLTIP_DELAY = 1500;\n\nexport type TreeSidebarCategoriesProps = {\n    currentCategoryId?: string;\n    onSelectCategory?: (selectedCategory: string) => void;\n    children?: TreeCategoryNode[];\n};\n\nconst TreeSidebarCategories = (props: TreeSidebarCategoriesProps) => {\n    const { children, currentCategoryId, onSelectCategory = noop } = props;\n\n    if (!children) {\n        return null;\n    }\n\n    return (\n        <>\n            {children.map(child => {\n                const id = child.props.id;\n                const icon = child.props.icon || '';\n                const label = child.props.label;\n\n                const statusClassName = classNames(\n                    currentCategoryId === id ? ACTIVE_CLASS_NAME : '',\n                    child.props.hasSelection && SELECTED_CLASS_NAME\n                );\n\n                const handleSelectCategory = (event: React.MouseEvent<HTMLLIElement>) => {\n                    event.stopPropagation();\n                    onSelectCategory(id);\n                };\n\n                const category = (\n                    <li key={id} onClick={handleSelectCategory} className={statusClassName}>\n                        <div className='selection-bubble'>\n                            <span className={`rioglyph ${icon}`} />\n                        </div>\n                    </li>\n                );\n\n                if (label) {\n                    return (\n                        <OverlayTrigger\n                            key={`category-tooltip-${id}`}\n                            placement={Tooltip.RIGHT}\n                            delay={{ show: TOOLTIP_DELAY, hide: 0 }}\n                            overlay={\n                                <Tooltip id='tooltip' width='auto'>\n                                    <span>{label}</span>\n                                </Tooltip>\n                            }\n                        >\n                            {category}\n                        </OverlayTrigger>\n                    );\n                }\n\n                return category;\n            })}\n        </>\n    );\n};\n\nexport default TreeSidebarCategories;\n"],"names":["ACTIVE_CLASS_NAME","SELECTED_CLASS_NAME","TOOLTIP_DELAY","TreeSidebarCategories","props","children","currentCategoryId","onSelectCategory","noop","jsx","Fragment","child","id","icon","label","statusClassName","classNames","category","event","OverlayTrigger","Tooltip"],"mappings":";;;;;AAQA,MAAMA,IAAoB,UACpBC,IAAsB,YAEtBC,IAAgB,MAQhBC,IAAwB,CAACC,MAAsC;AACjE,QAAM,EAAE,UAAAC,GAAU,mBAAAC,GAAmB,kBAAAC,IAAmBC,MAASJ;AAEjE,SAAKC,IAKD,gBAAAI,EAAAC,GAAA,EACK,UAAAL,EAAS,IAAI,CAAAM,MAAS;AACnB,UAAMC,IAAKD,EAAM,MAAM,IACjBE,IAAOF,EAAM,MAAM,QAAQ,IAC3BG,IAAQH,EAAM,MAAM,OAEpBI,IAAkBC;AAAA,MACpBV,MAAsBM,IAAKZ,IAAoB;AAAA,MAC/CW,EAAM,MAAM,gBAAgBV;AAAA,IAAA,GAQ1BgB,IACF,gBAAAR,EAAC,MAAA,EAAY,SANY,CAACS,MAA2C;AACrE,MAAAA,EAAM,gBAAA,GACNX,EAAiBK,CAAE;AAAA,IACvB,GAGgD,WAAWG,GACnD,UAAA,gBAAAN,EAAC,OAAA,EAAI,WAAU,oBACX,UAAA,gBAAAA,EAAC,UAAK,WAAW,YAAYI,CAAI,GAAA,CAAI,GACzC,KAHKD,CAIT;AAGJ,WAAIE,IAEI,gBAAAL;AAAA,MAACU;AAAA,MAAA;AAAA,QAEG,WAAWC,EAAQ;AAAA,QACnB,OAAO,EAAE,MAAMlB,GAAe,MAAM,EAAA;AAAA,QACpC,SACI,gBAAAO,EAACW,GAAA,EAAQ,IAAG,WAAU,OAAM,QACxB,UAAA,gBAAAX,EAAC,QAAA,EAAM,UAAAK,EAAA,CAAM,EAAA,CACjB;AAAA,QAGH,UAAAG;AAAA,MAAA;AAAA,MATI,oBAAoBL,CAAE;AAAA,IAAA,IAchCK;AAAA,EACX,CAAC,EAAA,CACL,IA/CO;AAiDf;"}

package/components/assetTree/TreeSummary.js

@@ -1,6 +1,6 @@
 import { jsx as e, jsxs as u, Fragment as c } from "react/jsx-runtime";
 import m from "react";
-import d from "classnames";
+import d from "../../utils/classNames.js";
 import r from "./TypeCounter.js";
 import { TreeSummaryRow as p } from "./TreeSummaryRow.js";
 const v = ({ assetCounts: a }) => {

package/components/assetTree/TreeSummary.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeSummary.js","sources":["../../../src/components/assetTree/TreeSummary.tsx"],"sourcesContent":["import React, { type PropsWithChildren } from 'react';\nimport classNames from 'classnames';\n\nimport TypeCounter from './TypeCounter';\nimport TreeSummaryRow from './TreeSummaryRow';\n\nexport type AssetType = 'truck' | 'trailer' | 'bus' | 'van' | 'driver' | 'car';\n\nexport type TreeSummaryCounts = {\n    /**\n     * The amount of trucks\n     */\n    truck?: number;\n\n    /**\n     * The amount of trailers\n     */\n    trailer?: number;\n\n    /**\n     * The amount of buses\n     */\n    bus?: number;\n\n    /**\n     * The amount of vans\n     */\n    van?: number;\n\n    /**\n     * The amount of cars\n     */\n    car?: number;\n\n    /**\n     * The amount of drivers\n     */\n    driver?: number;\n};\n\nexport type DefaultAssetCountsProps = {\n    assetCounts: TreeSummaryCounts;\n};\n\nconst DefaultAssetCounts = ({ assetCounts }: DefaultAssetCountsProps) => {\n    const { truck, bus, van, trailer, car, driver } = assetCounts;\n    return (\n        <>\n            <TypeCounter hideOnZero icon='truck-baseline' value={truck} />\n            <TypeCounter hideOnZero icon='trailer-baseline' value={trailer} />\n            <TypeCounter hideOnZero icon='bus-baseline' value={bus} />\n            <TypeCounter hideOnZero icon='van-baseline' value={van} />\n            <TypeCounter hideOnZero icon='car-baseline' value={car} />\n            <TypeCounter hideOnZero icon='driver' value={driver} />\n        </>\n    );\n};\n\nexport type TreeSummaryProps = {\n    /**\n     * The object containing various asset type counter.\n     */\n    assetCounts?: TreeSummaryCounts;\n\n    /**\n     * The number of grid columns used for the built-in `TreeSummaryRow`.\n     *\n     * @default 4\n     */\n    gridCols?: number;\n\n    /**\n     * Additional classes added to the wrapping element.\n     */\n    className?: string;\n};\n\nconst TreeSummary = React.memo((props: PropsWithChildren<TreeSummaryProps>) => {\n    const { className = '', assetCounts = {}, gridCols, children } = props;\n\n    const classes = classNames(\n        'TreeSummary',\n        'display-flex flex-wrap',\n        'align-items-center',\n        'gap-10',\n        'padding-left-3',\n        className\n    );\n\n    return (\n        <div className={classes}>\n            {children || (\n                <TreeSummaryRow gridCols={gridCols}>\n                    <DefaultAssetCounts assetCounts={assetCounts} />\n                </TreeSummaryRow>\n            )}\n        </div>\n    );\n});\n\nexport default TreeSummary;\n"],"names":["DefaultAssetCounts","assetCounts","truck","bus","van","trailer","car","driver","jsxs","Fragment","jsx","TypeCounter","TreeSummary","React","props","className","gridCols","children","classes","classNames","TreeSummaryRow"],"mappings":";;;;;AA4CA,MAAMA,IAAqB,CAAC,EAAE,aAAAC,QAA2C;AACrE,QAAM,EAAE,OAAAC,GAAO,KAAAC,GAAK,KAAAC,GAAK,SAAAC,GAAS,KAAAC,GAAK,QAAAC,MAAWN;AAClD,SACI,gBAAAO,EAAAC,GAAA,EACI,UAAA;AAAA,IAAA,gBAAAC,EAACC,KAAY,YAAU,IAAC,MAAK,kBAAiB,OAAOT,GAAO;AAAA,sBAC3DS,GAAA,EAAY,YAAU,IAAC,MAAK,oBAAmB,OAAON,GAAS;AAAA,sBAC/DM,GAAA,EAAY,YAAU,IAAC,MAAK,gBAAe,OAAOR,GAAK;AAAA,sBACvDQ,GAAA,EAAY,YAAU,IAAC,MAAK,gBAAe,OAAOP,GAAK;AAAA,sBACvDO,GAAA,EAAY,YAAU,IAAC,MAAK,gBAAe,OAAOL,GAAK;AAAA,sBACvDK,GAAA,EAAY,YAAU,IAAC,MAAK,UAAS,OAAOJ,EAAA,CAAQ;AAAA,EAAA,GACzD;AAER,GAqBMK,IAAcC,EAAM,KAAK,CAACC,MAA+C;AAC3E,QAAM,EAAE,WAAAC,IAAY,IAAI,aAAAd,IAAc,CAAA,GAAI,UAAAe,GAAU,UAAAC,MAAaH,GAE3DI,IAAUC;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACAJ;AAAA,EAAA;AAGJ,SACI,gBAAAL,EAAC,OAAA,EAAI,WAAWQ,GACX,UAAAD,KACG,gBAAAP,EAACU,GAAA,EAAe,UAAAJ,GACZ,UAAA,gBAAAN,EAACV,GAAA,EAAmB,aAAAC,EAAA,CAA0B,EAAA,CAClD,GAER;AAER,CAAC;"}
+{"version":3,"file":"TreeSummary.js","sources":["../../../src/components/assetTree/TreeSummary.tsx"],"sourcesContent":["import React, { type PropsWithChildren } from 'react';\n\nimport classNames from '../../utils/classNames';\nimport TypeCounter from './TypeCounter';\nimport TreeSummaryRow from './TreeSummaryRow';\n\nexport type AssetType = 'truck' | 'trailer' | 'bus' | 'van' | 'driver' | 'car';\n\nexport type TreeSummaryCounts = {\n    /**\n     * The amount of trucks\n     */\n    truck?: number;\n\n    /**\n     * The amount of trailers\n     */\n    trailer?: number;\n\n    /**\n     * The amount of buses\n     */\n    bus?: number;\n\n    /**\n     * The amount of vans\n     */\n    van?: number;\n\n    /**\n     * The amount of cars\n     */\n    car?: number;\n\n    /**\n     * The amount of drivers\n     */\n    driver?: number;\n};\n\nexport type DefaultAssetCountsProps = {\n    assetCounts: TreeSummaryCounts;\n};\n\nconst DefaultAssetCounts = ({ assetCounts }: DefaultAssetCountsProps) => {\n    const { truck, bus, van, trailer, car, driver } = assetCounts;\n    return (\n        <>\n            <TypeCounter hideOnZero icon='truck-baseline' value={truck} />\n            <TypeCounter hideOnZero icon='trailer-baseline' value={trailer} />\n            <TypeCounter hideOnZero icon='bus-baseline' value={bus} />\n            <TypeCounter hideOnZero icon='van-baseline' value={van} />\n            <TypeCounter hideOnZero icon='car-baseline' value={car} />\n            <TypeCounter hideOnZero icon='driver' value={driver} />\n        </>\n    );\n};\n\nexport type TreeSummaryProps = {\n    /**\n     * The object containing various asset type counter.\n     */\n    assetCounts?: TreeSummaryCounts;\n\n    /**\n     * The number of grid columns used for the built-in `TreeSummaryRow`.\n     *\n     * @default 4\n     */\n    gridCols?: number;\n\n    /**\n     * Additional classes added to the wrapping element.\n     */\n    className?: string;\n};\n\nconst TreeSummary = React.memo((props: PropsWithChildren<TreeSummaryProps>) => {\n    const { className = '', assetCounts = {}, gridCols, children } = props;\n\n    const classes = classNames(\n        'TreeSummary',\n        'display-flex flex-wrap',\n        'align-items-center',\n        'gap-10',\n        'padding-left-3',\n        className\n    );\n\n    return (\n        <div className={classes}>\n            {children || (\n                <TreeSummaryRow gridCols={gridCols}>\n                    <DefaultAssetCounts assetCounts={assetCounts} />\n                </TreeSummaryRow>\n            )}\n        </div>\n    );\n});\n\nexport default TreeSummary;\n"],"names":["DefaultAssetCounts","assetCounts","truck","bus","van","trailer","car","driver","jsxs","Fragment","jsx","TypeCounter","TreeSummary","React","props","className","gridCols","children","classes","classNames","TreeSummaryRow"],"mappings":";;;;;AA4CA,MAAMA,IAAqB,CAAC,EAAE,aAAAC,QAA2C;AACrE,QAAM,EAAE,OAAAC,GAAO,KAAAC,GAAK,KAAAC,GAAK,SAAAC,GAAS,KAAAC,GAAK,QAAAC,MAAWN;AAClD,SACI,gBAAAO,EAAAC,GAAA,EACI,UAAA;AAAA,IAAA,gBAAAC,EAACC,KAAY,YAAU,IAAC,MAAK,kBAAiB,OAAOT,GAAO;AAAA,sBAC3DS,GAAA,EAAY,YAAU,IAAC,MAAK,oBAAmB,OAAON,GAAS;AAAA,sBAC/DM,GAAA,EAAY,YAAU,IAAC,MAAK,gBAAe,OAAOR,GAAK;AAAA,sBACvDQ,GAAA,EAAY,YAAU,IAAC,MAAK,gBAAe,OAAOP,GAAK;AAAA,sBACvDO,GAAA,EAAY,YAAU,IAAC,MAAK,gBAAe,OAAOL,GAAK;AAAA,sBACvDK,GAAA,EAAY,YAAU,IAAC,MAAK,UAAS,OAAOJ,EAAA,CAAQ;AAAA,EAAA,GACzD;AAER,GAqBMK,IAAcC,EAAM,KAAK,CAACC,MAA+C;AAC3E,QAAM,EAAE,WAAAC,IAAY,IAAI,aAAAd,IAAc,CAAA,GAAI,UAAAe,GAAU,UAAAC,MAAaH,GAE3DI,IAAUC;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACAJ;AAAA,EAAA;AAGJ,SACI,gBAAAL,EAAC,OAAA,EAAI,WAAWQ,GACX,UAAAD,KACG,gBAAAP,EAACU,GAAA,EAAe,UAAAJ,GACZ,UAAA,gBAAAN,EAACV,GAAA,EAAmB,aAAAC,EAAA,CAA0B,EAAA,CAClD,GAER;AAER,CAAC;"}

package/components/assetTree/TypeCounter.js

@@ -1,7 +1,7 @@
 import { jsxs as v, jsx as t } from "react/jsx-runtime";
 import { forwardRef as x, useRef as N } from "react";
-import i from "classnames";
 import { noop as R } from "es-toolkit/function";
+import i from "../../utils/classNames.js";
 import k from "../../hooks/useHover.js";
 import w from "../../utils/mergeRefs.js";
 import { withRioglyphPrefix as T } from "./treeUtils.js";

package/components/assetTree/TypeCounter.js.map

@@ -1 +1 @@
-{"version":3,"file":"TypeCounter.js","sources":["../../../src/components/assetTree/TypeCounter.tsx"],"sourcesContent":["import type React from 'react';\nimport { forwardRef, useRef } from 'react';\nimport classNames from 'classnames';\nimport { noop } from 'es-toolkit/function';\n\nimport useHover from '../../hooks/useHover';\nimport mergeRefs from '../../utils/mergeRefs';\nimport { withRioglyphPrefix } from './treeUtils';\n\nexport type TypeCounterProps = {\n    /**\n     * The item type for that counter. This will be used as a return value for the onClick callback.\n     */\n    type?: string;\n\n    /**\n     * The icon name. Note, when using the built-in generic type counter, the icon name will the\n     * same as the item type. So make sure there is a corresponding icon for the defined type.\n     */\n    icon?: string;\n\n    /**\n     * Sets the active styling if active\n     */\n    isActive?: boolean;\n\n    /**\n     * Should be set when there is a type filter set in the tree to style the counter accordingly.\n     *\n     * @default false\n     */\n    hasFilter?: boolean;\n\n    /**\n     * Allows for interactivity. Use this prop when you allow clicking on the counter.\n     *\n     * @default false\n     */\n    enableActivity?: boolean;\n\n    /**\n     * Defines if the counter is rendered at all when the value is not defined ot 0.\n     *\n     * @default false\n     */\n    hideOnZero?: boolean;\n\n    /**\n     * Callback function when the counter is clicked. It returns the type value.\n     * Make sure the \"type\" prop is defined to receive the value in the callback.\n     *\n     * @param type\n     * @returns\n     */\n    onClick?: (type: string) => void;\n\n    /**\n     * A custom value to be shown in the counter.\n     */\n    value?: string | React.ReactNode | number;\n};\n\nconst TypeCounter = forwardRef<HTMLDivElement, TypeCounterProps>((props, ref) => {\n    const {\n        icon,\n        value,\n        isActive,\n        hasFilter = false,\n        enableActivity = false,\n        onClick = noop,\n        type,\n        hideOnZero = false,\n        ...remainingProps\n    } = props;\n\n    const internalRef = useRef<HTMLDivElement>(null);\n    const mergedRef = mergeRefs([ref, internalRef]);\n\n    const isHover = useHover(internalRef);\n\n    const wrapperClassName = classNames(\n        'TypeCounter',\n        'display-flex align-items-center',\n        'user-select-none',\n        'margin-right-2',\n        enableActivity ? 'cursor-pointer' : 'pointer-events-none',\n        enableActivity && hasFilter && !isActive && !isHover && 'opacity-50'\n    );\n\n    const counterClassNames = classNames(\n        'TreeLabelCount',\n        'label label-condensed',\n        isHover && !isActive && 'bg-white text-color-darker',\n        isHover && !isActive && 'border-color-gray',\n        isHover && isActive && 'border-color-primary',\n        isActive ? 'label-primary' : 'label-muted label-filled'\n    );\n\n    const handleClick = () => type && onClick(type);\n\n    if (hideOnZero && !value) {\n        return null;\n    }\n\n    const iconName = withRioglyphPrefix(icon);\n\n    return (\n        <div ref={mergedRef} {...remainingProps} className={wrapperClassName} onClick={handleClick}>\n            <span className={`rioglyph ${iconName} text-size-16 margin-right-2`} />\n            <span className={counterClassNames}>{value || 0}</span>\n        </div>\n    );\n});\n\nexport default TypeCounter;\n"],"names":["TypeCounter","forwardRef","props","ref","icon","value","isActive","hasFilter","enableActivity","onClick","noop","type","hideOnZero","remainingProps","internalRef","useRef","mergedRef","mergeRefs","isHover","useHover","wrapperClassName","classNames","counterClassNames","handleClick","iconName","withRioglyphPrefix","jsxs","jsx"],"mappings":";;;;;;;AA8DA,MAAMA,IAAcC,EAA6C,CAACC,GAAOC,MAAQ;AAC7E,QAAM;AAAA,IACF,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,gBAAAC,IAAiB;AAAA,IACjB,SAAAC,IAAUC;AAAA,IACV,MAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,GAAGC;AAAA,EAAA,IACHX,GAEEY,IAAcC,EAAuB,IAAI,GACzCC,IAAYC,EAAU,CAACd,GAAKW,CAAW,CAAC,GAExCI,IAAUC,EAASL,CAAW,GAE9BM,IAAmBC;AAAA,IACrB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACAb,IAAiB,mBAAmB;AAAA,IACpCA,KAAkBD,KAAa,CAACD,KAAY,CAACY,KAAW;AAAA,EAAA,GAGtDI,IAAoBD;AAAA,IACtB;AAAA,IACA;AAAA,IACAH,KAAW,CAACZ,KAAY;AAAA,IACxBY,KAAW,CAACZ,KAAY;AAAA,IACxBY,KAAWZ,KAAY;AAAA,IACvBA,IAAW,kBAAkB;AAAA,EAAA,GAG3BiB,IAAc,MAAMZ,KAAQF,EAAQE,CAAI;AAE9C,MAAIC,KAAc,CAACP;AACf,WAAO;AAGX,QAAMmB,IAAWC,EAAmBrB,CAAI;AAExC,SACI,gBAAAsB,EAAC,SAAI,KAAKV,GAAY,GAAGH,GAAgB,WAAWO,GAAkB,SAASG,GAC3E,UAAA;AAAA,IAAA,gBAAAI,EAAC,QAAA,EAAK,WAAW,YAAYH,CAAQ,gCAAgC;AAAA,IACrE,gBAAAG,EAAC,QAAA,EAAK,WAAWL,GAAoB,eAAS,EAAA,CAAE;AAAA,EAAA,GACpD;AAER,CAAC;"}
+{"version":3,"file":"TypeCounter.js","sources":["../../../src/components/assetTree/TypeCounter.tsx"],"sourcesContent":["import type React from 'react';\nimport { forwardRef, useRef } from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport useHover from '../../hooks/useHover';\nimport mergeRefs from '../../utils/mergeRefs';\nimport { withRioglyphPrefix } from './treeUtils';\n\nexport type TypeCounterProps = {\n    /**\n     * The item type for that counter. This will be used as a return value for the onClick callback.\n     */\n    type?: string;\n\n    /**\n     * The icon name. Note, when using the built-in generic type counter, the icon name will the\n     * same as the item type. So make sure there is a corresponding icon for the defined type.\n     */\n    icon?: string;\n\n    /**\n     * Sets the active styling if active\n     */\n    isActive?: boolean;\n\n    /**\n     * Should be set when there is a type filter set in the tree to style the counter accordingly.\n     *\n     * @default false\n     */\n    hasFilter?: boolean;\n\n    /**\n     * Allows for interactivity. Use this prop when you allow clicking on the counter.\n     *\n     * @default false\n     */\n    enableActivity?: boolean;\n\n    /**\n     * Defines if the counter is rendered at all when the value is not defined ot 0.\n     *\n     * @default false\n     */\n    hideOnZero?: boolean;\n\n    /**\n     * Callback function when the counter is clicked. It returns the type value.\n     * Make sure the \"type\" prop is defined to receive the value in the callback.\n     *\n     * @param type\n     * @returns\n     */\n    onClick?: (type: string) => void;\n\n    /**\n     * A custom value to be shown in the counter.\n     */\n    value?: string | React.ReactNode | number;\n};\n\nconst TypeCounter = forwardRef<HTMLDivElement, TypeCounterProps>((props, ref) => {\n    const {\n        icon,\n        value,\n        isActive,\n        hasFilter = false,\n        enableActivity = false,\n        onClick = noop,\n        type,\n        hideOnZero = false,\n        ...remainingProps\n    } = props;\n\n    const internalRef = useRef<HTMLDivElement>(null);\n    const mergedRef = mergeRefs([ref, internalRef]);\n\n    const isHover = useHover(internalRef);\n\n    const wrapperClassName = classNames(\n        'TypeCounter',\n        'display-flex align-items-center',\n        'user-select-none',\n        'margin-right-2',\n        enableActivity ? 'cursor-pointer' : 'pointer-events-none',\n        enableActivity && hasFilter && !isActive && !isHover && 'opacity-50'\n    );\n\n    const counterClassNames = classNames(\n        'TreeLabelCount',\n        'label label-condensed',\n        isHover && !isActive && 'bg-white text-color-darker',\n        isHover && !isActive && 'border-color-gray',\n        isHover && isActive && 'border-color-primary',\n        isActive ? 'label-primary' : 'label-muted label-filled'\n    );\n\n    const handleClick = () => type && onClick(type);\n\n    if (hideOnZero && !value) {\n        return null;\n    }\n\n    const iconName = withRioglyphPrefix(icon);\n\n    return (\n        <div ref={mergedRef} {...remainingProps} className={wrapperClassName} onClick={handleClick}>\n            <span className={`rioglyph ${iconName} text-size-16 margin-right-2`} />\n            <span className={counterClassNames}>{value || 0}</span>\n        </div>\n    );\n});\n\nexport default TypeCounter;\n"],"names":["TypeCounter","forwardRef","props","ref","icon","value","isActive","hasFilter","enableActivity","onClick","noop","type","hideOnZero","remainingProps","internalRef","useRef","mergedRef","mergeRefs","isHover","useHover","wrapperClassName","classNames","counterClassNames","handleClick","iconName","withRioglyphPrefix","jsxs","jsx"],"mappings":";;;;;;;AA8DA,MAAMA,IAAcC,EAA6C,CAACC,GAAOC,MAAQ;AAC7E,QAAM;AAAA,IACF,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,gBAAAC,IAAiB;AAAA,IACjB,SAAAC,IAAUC;AAAA,IACV,MAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,GAAGC;AAAA,EAAA,IACHX,GAEEY,IAAcC,EAAuB,IAAI,GACzCC,IAAYC,EAAU,CAACd,GAAKW,CAAW,CAAC,GAExCI,IAAUC,EAASL,CAAW,GAE9BM,IAAmBC;AAAA,IACrB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACAb,IAAiB,mBAAmB;AAAA,IACpCA,KAAkBD,KAAa,CAACD,KAAY,CAACY,KAAW;AAAA,EAAA,GAGtDI,IAAoBD;AAAA,IACtB;AAAA,IACA;AAAA,IACAH,KAAW,CAACZ,KAAY;AAAA,IACxBY,KAAW,CAACZ,KAAY;AAAA,IACxBY,KAAWZ,KAAY;AAAA,IACvBA,IAAW,kBAAkB;AAAA,EAAA,GAG3BiB,IAAc,MAAMZ,KAAQF,EAAQE,CAAI;AAE9C,MAAIC,KAAc,CAACP;AACf,WAAO;AAGX,QAAMmB,IAAWC,EAAmBrB,CAAI;AAExC,SACI,gBAAAsB,EAAC,SAAI,KAAKV,GAAY,GAAGH,GAAgB,WAAWO,GAAkB,SAASG,GAC3E,UAAA;AAAA,IAAA,gBAAAI,EAAC,QAAA,EAAK,WAAW,YAAYH,CAAQ,gCAAgC;AAAA,IACrE,gBAAAG,EAAC,QAAA,EAAK,WAAWL,GAAoB,eAAS,EAAA,CAAE;AAAA,EAAA,GACpD;AAER,CAAC;"}

package/components/autosuggest/AutoSuggest.js

@@ -1,9 +1,9 @@
 import { jsxs as _, jsx as d } from "react/jsx-runtime";
 import { useState as h, useRef as E, useEffect as F } from "react";
-import j from "classnames";
 import { isEmpty as ge } from "es-toolkit/compat";
 import { noop as a } from "es-toolkit/function";
 import { isNil as fe } from "es-toolkit/predicate";
+import j from "../../utils/classNames.js";
 import he from "../clearableInput/ClearableInput.js";
 import { DOWN as B, scrollItemIntoView as Se, UP as Ie } from "../../utils/scrollItemIntoView.js";
 import { useDropDirection as be } from "../../utils/useDropDirection.js";

package/components/autosuggest/AutoSuggest.js.map

@@ -1 +1 @@
-{"version":3,"file":"AutoSuggest.js","sources":["../../../src/components/autosuggest/AutoSuggest.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { isEmpty } from 'es-toolkit/compat';\nimport { noop } from 'es-toolkit/function';\nimport { isNil } from 'es-toolkit/predicate';\n\nimport ClearableInput from '../clearableInput/ClearableInput';\nimport { scrollItemIntoView, UP, DOWN } from '../../utils/scrollItemIntoView';\nimport { useDropDirection } from '../../utils/useDropDirection';\nimport DropdownHeader from '../selects/DropdownHeader';\nimport MenuItem from '../menuItems/MenuItem';\nimport useClickOutside from '../../hooks/useClickOutside';\nimport AutoSuggestAddons from './AutoSuggestAddons';\nimport DropdownSpinner from './DropdownSpinner';\nimport NoItemMessage from './NoItemMessage';\n\nexport type AutoSuggestSuggestion = {\n    /**\n     * The text label for a suggestion item. If present, this will be returned when selecting the suggestion.\n     */\n    label?: string;\n\n    /**\n     * Set to disable the suggestion and disallow selecting it.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Optional custom suggestion node that will be rendered as given. Example, this is used by the TagManager\n     * to render a placeholder with an icon next to it.\n     */\n    customSuggestion?: React.ReactNode;\n\n    /**\n     * Additional key-value pairs that are not relevant for rendering but may be handled on your side.\n     */\n    [name: string]: string | React.ReactNode;\n};\n\nexport type SelectedSuggestion = {\n    suggestionValue: string | React.ReactElement;\n    suggestion: AutoSuggestSuggestion;\n};\n\nexport type AutoSuggestInputProps = {\n    /**\n     * A native input id attribute. Passed through as HTML attribute to the input element.\n     */\n    id?: string;\n\n    /**\n     * The value to be set for the input. Using this prop the input can be controlled from the outside.\n     */\n    value?: string;\n\n    /**\n     * String that will be displayed inside the input when nothing is typed in.\n     * @default `Start typing ...`\n     */\n    placeholder?: string | React.ReactNode;\n\n    /**\n     * Icon class name that shall be used. If defined, the input element is wrapped in an input-group\n     * and the icon will be set in an input-addon. Example: `rioglyph-search`.\n     */\n    icon?: string;\n\n    /**\n     * Callback function which will be called when the input changes. __This is usually not needed__ as\n     * the \"onSuggestionsFetchRequested\" callback takes care of any input change. It is listed here\n     * for completeness and for certain edge cases.\n     *\n     * __Note:__ It might be removed in the future when not needed.'\n     * @deprecated please use `onSuggestionsFetchRequested` instead\n     * @param changeEvent\n     * @param changeProps\n     * @returns\n     */\n    onChange?: (changeEvent: React.SyntheticEvent, changeProps: { newValue: string }) => void;\n\n    /**\n     * Callback function which gets triggered when the input gaines focus.\n     */\n    onFocus?: VoidFunction;\n\n    /**\n     * Callback function which gets triggered when the input looses the focus.\n     */\n    onBlur?: VoidFunction;\n\n    /**\n     * Callback function which will be called when the input is cleared. __This is usually not needed__ as\n     * the \"onSuggestionsFetchRequested\" callback takes care of any input change. It is listed here\n     * for completeness and for certain edge cases.\n     *\n     * __Note:__ It might be removed in the future when not needed.\n     */\n    onClear?: VoidFunction;\n\n    /**\n     * Boolean value that adds the class `has-error` to the input\n     * component. Use this for validation use cases. The Autosuggest component\n     * should be wrapped in a `form-group` element with the class `has-feedback`.\n     * @default false\n     */\n    hasError?: boolean;\n\n    /**\n     * Defines the tab index to be added to the input element.\n     * @default 0\n     */\n    tabIndex?: number;\n\n    /**\n     * Boolean value that disabled the input component.\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * The React ref for the underlying input.\n     */\n    inputRef?: React.MutableRefObject<HTMLInputElement>;\n\n    /**\n     * Additional class names that are added to the input component.\n     */\n    className?: string;\n};\n\nexport type AutoSuggestProps<T = AutoSuggestSuggestion> = {\n    /**\n     * A native input id attribute on the component root. Passed through as HTML attribute to the input element.\n     */\n    id?: string;\n\n    /**\n     * Object to define properties for the input component. For the input, the ClearableInput\n     * component is used.\n     */\n    inputProps?: AutoSuggestInputProps;\n\n    /**\n     * Array of items which will be displayed. Items can be arbitrary objects as long as they\n     * have a label defined.\n     *\n     * __Important__: in case you specify your own custom renderer via `renderSuggestion` prop, you\n     * can pass our own object that does not need to have a label. In this case you may want to\n     * specify the `customSuggestionKey` to avoid react throwing an error of rendering menu items with the same key.\n     */\n    suggestions?: AutoSuggestSuggestion[];\n\n    /**\n     * Text that will be shown when there is not match found. If nothing is defined the dropdown-menu\n     * will not be rendered.\n     */\n    noItemMessage?: string | React.ReactNode;\n\n    /**\n     * Callback function which will be called every time you need to recalculate suggestions e.i.\n     * when the filter is updates after each input. It will also be called when the input is\n     * cleared. The value would be an empty string in this case.\n     * @param result\n     * @returns\n     */\n    onSuggestionsFetchRequested?: (result: { value: string }) => void;\n\n    /**\n     * Callback function which will be called when a suggestion is selected from the dropdown menu.\n     * @param event\n     * @param selectedSuggestion\n     * @returns\n     */\n    onSuggestionSelected?: (\n        event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLDivElement>,\n        selectedSuggestion: SelectedSuggestion\n    ) => void;\n\n    /**\n     * Callback function which will be called every time the highlighted selection changes.\n     * @param suggestion\n     * @returns\n     */\n    onSuggestionHighlighted?: (suggestion: AutoSuggestSuggestion | null) => void;\n\n    /**\n     * Function that returns a string which will be displayed inside the input.\n     * This is required when a custom render function for suggestions is provided.\n     * Overwrite this function to provide the value to be used for a suggestion.\n     * Default implementation is: `suggestion => suggestion.label`\n     *\n     * @param suggestion\n     * @returns\n     */\n    getSuggestionValue?: (suggestion: AutoSuggestSuggestion) => string;\n\n    /**\n     * Function that defines how suggestions are rendered on the dropdown-menu.\n     * Use this to customize the appearance for instance when you want to show an icon\n     * for a suggestion.\n     * Default implementation is: `suggestion => suggestion.label`\n     *\n     * @param suggestion\n     * @returns\n     */\n    renderSuggestion?: (suggestion: AutoSuggestSuggestion) => React.ReactNode;\n\n    /**\n     * When rendering your own custom suggestions that do not have the `label` attribute, use this prop to specify\n     * a unique value for each suggestion which will be used as a react key for the individual menu items.\n     */\n    customSuggestionKey?: string;\n\n    /**\n     * Boolean that disabled autoDropDirection and opens the dropdown-menu be above the toggle.\n     * @default false\n     */\n    dropup?: boolean;\n\n    /**\n     * Defines whether the dropdown opens right aligned or not.\n     * Set to true additionally disables autoDrop feature.\n     * @default false\n     */\n    pullRight?: boolean;\n\n    /**\n     * Boolean that enables autoDrop feature.\n     * @default true\n     */\n    autoDropDirection?: boolean;\n\n    /**\n     * Shows a loading spinner instead of the items if set to true.\n     * @default false\n     */\n    isLoading?: boolean;\n\n    /**\n     * Boolean that enables opening the dropdown menu when gaining focus.\n     * @default false\n     */\n    openOnFocus?: boolean;\n\n    /**\n     * Boolean that enables the selection of an item to close the dropdown or not.\n     * @default true\n     */\n    closeOnSelect?: boolean;\n\n    /**\n     * Defines whether or not a selected item is shown in the input after it was selected.\n     * @default true\n     */\n    showSelectedItemsInInput?: boolean;\n\n    /**\n     * Sets autocomplete value for autosuggest forms.\n     */\n    autoComplete?: string;\n\n    /**\n     * Adds a list of input-addons elements in front of the input.\n     */\n    leadingInputAddons?: React.ReactNode[];\n\n    /**\n     * Adds a list of input-addons elements after the input.\n     */\n    trailingInputAddons?: React.ReactNode[];\n\n    /**\n     * Additional class names that are added to the dropdown element.\n     */\n    dropdownClassName?: string;\n\n    /**\n     * Additional class names that are added to the wrapping element.\n     */\n    className?: string;\n};\n\nexport const AutoSuggest = (props: AutoSuggestProps) => {\n    const {\n        id,\n        onSuggestionSelected = noop,\n        onSuggestionsFetchRequested = noop,\n        onSuggestionHighlighted = noop,\n        renderSuggestion,\n        customSuggestionKey,\n        getSuggestionValue,\n        suggestions = [],\n        autoDropDirection = true,\n        pullRight = false,\n        dropup = false,\n        isLoading = false,\n        openOnFocus = false,\n        closeOnSelect = true,\n        showSelectedItemsInInput = true,\n        autoComplete = 'off',\n        inputProps = {\n            id,\n            disabled: false,\n            onChange: noop,\n            onClear: noop,\n            onBlur: noop,\n            onFocus: noop,\n            placeholder: 'Start typing',\n            hasError: false,\n            tabIndex: 0,\n            value: undefined,\n            icon: undefined,\n        },\n        leadingInputAddons,\n        trailingInputAddons,\n        noItemMessage,\n        dropdownClassName = '',\n        className = '',\n        ...remainingProps\n    } = props;\n\n    const [isOpen, setIsOpen] = useState(false);\n    const [value, setValue] = useState(inputProps.value || '');\n    const [highlightedItemIndex, setHighlightedItemIndex] = useState(-1);\n    const [direction, setDirection] = useState(DOWN);\n\n    const componentRef = useClickOutside(() => closeMenu());\n    const dropdownMenuRef = useRef<HTMLUListElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const optionNodesRef = useRef<HTMLLIElement[]>([]);\n\n    // Update internal value state from outside when external input value is given.\n    // This is important for when this component is used as a controlled component\n    const externalValue = inputProps.value;\n    if (!isNil(externalValue) && value !== externalValue) {\n        setValue(externalValue ?? '');\n    }\n\n    // Fetch suggestions on mounting the component by using the external\n    // fetch callback\n    useEffect(() => onSuggestionsFetchRequested({ value }), []);\n\n    // When a new suggestion is highlighted it may be not in view as the dropdown menu\n    // has an overflow and can scroll. In this case, we need to scroll to the highlighted suggestion\n    // so the user can see it\n    useEffect(() => {\n        const focusedItem = getFocusedOptionNode();\n        scrollItemIntoView(direction, dropdownMenuRef.current, focusedItem);\n    }, [highlightedItemIndex, direction]);\n\n    // Used to store the list item reference to allow highlighting a single node.\n    // Update that list of nodes again when the suggestions change from the outside.\n    useEffect(() => {\n        const optionNodes = Array.from(dropdownMenuRef.current?.getElementsByTagName('li') || []);\n        optionNodesRef.current = optionNodes;\n    }, [suggestions]);\n\n    // Overwrite position of dropdown menu in case auto drop is enabled\n    const dropDirection = useDropDirection({ pullRight, dropup, autoDropDirection, dropdownMenuRef }, [suggestions]);\n\n    const openMenu = () => {\n        if (isOpen) {\n            return;\n        }\n        setIsOpen(true);\n    };\n\n    const closeMenu = () => {\n        setIsOpen(false);\n    };\n\n    const handleFocus = (_event: React.FocusEvent<HTMLInputElement>) => {\n        if (openOnFocus) {\n            openMenu();\n        }\n        if (inputProps.onFocus) {\n            inputProps.onFocus();\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n        switch (event.key) {\n            case 'ArrowDown': {\n                // select below on arrow down key\n                const newHighlightedIndex = highlightedItemIndex + 1;\n                if (isOpen && suggestions.length > newHighlightedIndex) {\n                    setHighlightedItemIndex(newHighlightedIndex);\n                    handleHighlightedSuggestionChanged(Number(newHighlightedIndex));\n                    setDirection(DOWN);\n                }\n                return;\n            }\n            case 'ArrowUp':\n                // select above on arrow up key\n                if (isOpen && highlightedItemIndex > 0) {\n                    const newHighlightedIndex = highlightedItemIndex - 1;\n                    setHighlightedItemIndex(newHighlightedIndex);\n                    handleHighlightedSuggestionChanged(Number(newHighlightedIndex));\n                    setDirection(UP);\n                }\n                return;\n            case 'Enter':\n                // select on enter\n                if (isOpen && suggestions[highlightedItemIndex]) {\n                    onSuggestionClicked(event, suggestions[highlightedItemIndex]);\n                } else {\n                    openMenu();\n                }\n                break;\n            case 'Escape':\n            case 'Tab':\n                // close on esc key or on tab\n                closeMenu();\n                break;\n            default:\n                break;\n        }\n    };\n\n    const getFocusedOptionNode = () => {\n        return [...optionNodesRef.current].find((item: HTMLLIElement) => item.className.includes('active'));\n    };\n\n    const handleInputChange = (\n        newValue: string,\n        event: React.MouseEvent<HTMLSpanElement, MouseEvent> | React.ChangeEvent<HTMLInputElement>\n    ) => {\n        if (value !== newValue) {\n            updateInputValue(newValue, event);\n        }\n    };\n\n    const updateInputValue = (\n        newValue: string,\n        event:\n            | React.MouseEvent<HTMLSpanElement, MouseEvent>\n            | React.ChangeEvent<HTMLInputElement>\n            | React.KeyboardEvent<HTMLDivElement>,\n        shouldCloseMenu = false\n    ) => {\n        const closeMenuEventually = shouldCloseMenu ? false : isOpen;\n\n        setIsOpen(!isOpen ? true : closeMenuEventually);\n        setValue(newValue);\n        setHighlightedItemIndex(-1);\n\n        // Fire callback so the parent component can filter the suggestions accordingly\n        onSuggestionsFetchRequested({ value: newValue });\n\n        handleHighlightedSuggestionChanged(-1);\n\n        // Trigger onChange callback to notify usage component only when value has actually changed\n        const { value: newExternalValue, onChange = () => {} } = inputProps;\n        if (newValue !== newExternalValue) {\n            onChange(event, { newValue });\n        }\n    };\n\n    const handleHighlightedSuggestionChanged = (currentHighlightedItemIndex: number) => {\n        const currentHighlightedSuggestion =\n            currentHighlightedItemIndex === -1 ? null : suggestions[currentHighlightedItemIndex];\n        onSuggestionHighlighted(currentHighlightedSuggestion);\n    };\n\n    const clearInputValue = (_event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {\n        setValue('');\n        setHighlightedItemIndex(-1);\n\n        // Focus the input field after clearing it's value in order to allow\n        // entering new values right away\n        if (inputRef.current) {\n            inputRef.current.focus();\n        }\n\n        // Reset filter value so all suggestions are shown again\n        onSuggestionsFetchRequested({ value: '' });\n\n        handleHighlightedSuggestionChanged(-1);\n\n        // Additionally, fire the onClear callback as the service may react on it\n        if (inputProps.onClear) {\n            inputProps.onClear();\n        }\n    };\n\n    const getDefaultSuggestionValue = (suggestion: AutoSuggestSuggestion): string => {\n        return suggestion.label ?? (suggestion[customSuggestionKey ?? ''] as string) ?? '';\n    };\n\n    const onSuggestionClicked = (\n        event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLDivElement>,\n        suggestion: AutoSuggestSuggestion\n    ) => {\n        const getSuggestionValueFunction = getSuggestionValue ? getSuggestionValue : getDefaultSuggestionValue;\n\n        const suggestionValue = getSuggestionValueFunction(suggestion);\n\n        updateInputValue(suggestionValue, event, closeOnSelect);\n\n        // fire callback with the selected item\n        onSuggestionSelected(event, {\n            suggestion,\n            suggestionValue,\n        });\n    };\n\n    const renderInput = () => {\n        const { id: inputPropId, icon, value: ignoredExternalValue, ...remainingInputProps } = inputProps;\n        const clearableProps = { id: id ?? inputPropId, ...remainingInputProps };\n\n        const input = (\n            <ClearableInput\n                {...clearableProps}\n                ref={inputRef}\n                autoComplete={autoComplete}\n                onChange={handleInputChange}\n                onClear={clearInputValue}\n                onFocus={handleFocus}\n                onClick={openMenu}\n                value={showSelectedItemsInInput ? value : ''}\n            />\n        );\n\n        if (icon || leadingInputAddons || trailingInputAddons) {\n            return (\n                <AutoSuggestAddons\n                    icon={icon}\n                    leadingInputAddons={leadingInputAddons}\n                    trailingInputAddons={trailingInputAddons}\n                >\n                    {input}\n                </AutoSuggestAddons>\n            );\n        }\n\n        return input;\n    };\n\n    const renderDefaultSuggestion = (suggestion: AutoSuggestSuggestion): React.ReactNode => suggestion.label;\n\n    const renderDropdownMenu = () => {\n        const dropdownMenuClasses = classNames(\n            'dropdown-menu',\n            dropDirection.pullRight && 'pull-right',\n            dropdownClassName\n        );\n\n        if (isLoading) {\n            return <DropdownSpinner className={dropdownMenuClasses} />;\n        }\n\n        const hasNoSuggestions = isEmpty(suggestions);\n\n        if (hasNoSuggestions && !noItemMessage) {\n            return null;\n        }\n\n        return (\n            <ul role='menu' className={dropdownMenuClasses} ref={dropdownMenuRef}>\n                {hasNoSuggestions && noItemMessage && <NoItemMessage key='NoItemMessage' message={noItemMessage} />}\n                {suggestions.map((suggestion, index) => {\n                    // In case a custom renderer is used but the customSuggestionKey is not set, throw an error\n                    if (renderSuggestion && !suggestion.label && !customSuggestionKey) {\n                        throw new Error(\n                            'The \"customSuggestionKey\" need to be set when using a custom renderer ' +\n                                'and not using the \"label\" prop for suggestions'\n                        );\n                    }\n\n                    const key = `index-${suggestion.label ?? suggestion[customSuggestionKey ?? '']}`;\n\n                    if (suggestion.header && suggestion.label) {\n                        return <DropdownHeader key={key} label={(suggestion as AutoSuggestSuggestion).label} />;\n                    }\n\n                    const renderFunction = renderSuggestion ? renderSuggestion : renderDefaultSuggestion;\n\n                    return (\n                        <MenuItem\n                            key={key}\n                            active={index === highlightedItemIndex}\n                            disabled={suggestion.disabled}\n                            value={\n                                suggestion.customSuggestion ? suggestion.customSuggestion : renderFunction(suggestion)\n                            }\n                            onSelect={(_: number | undefined, event: React.MouseEvent<HTMLLIElement>) =>\n                                onSuggestionClicked(event, suggestion)\n                            }\n                            index={index}\n                        />\n                    );\n                })}\n            </ul>\n        );\n    };\n\n    const classes = classNames(\n        'AutoSuggest',\n        'dropdown',\n        isOpen && 'open',\n        dropDirection.dropup && 'dropup',\n        className\n    );\n\n    return (\n        <div {...remainingProps} className={classes} onKeyDown={handleKeyDown} ref={componentRef}>\n            {renderInput()}\n            {renderDropdownMenu()}\n        </div>\n    );\n};\n\nexport default AutoSuggest;\n"],"names":["AutoSuggest","props","id","onSuggestionSelected","noop","onSuggestionsFetchRequested","onSuggestionHighlighted","renderSuggestion","customSuggestionKey","getSuggestionValue","suggestions","autoDropDirection","pullRight","dropup","isLoading","openOnFocus","closeOnSelect","showSelectedItemsInInput","autoComplete","inputProps","leadingInputAddons","trailingInputAddons","noItemMessage","dropdownClassName","className","remainingProps","isOpen","setIsOpen","useState","value","setValue","highlightedItemIndex","setHighlightedItemIndex","direction","setDirection","DOWN","componentRef","useClickOutside","closeMenu","dropdownMenuRef","useRef","inputRef","optionNodesRef","externalValue","isNil","useEffect","focusedItem","getFocusedOptionNode","scrollItemIntoView","optionNodes","dropDirection","useDropDirection","openMenu","handleFocus","_event","handleKeyDown","event","newHighlightedIndex","handleHighlightedSuggestionChanged","UP","onSuggestionClicked","item","handleInputChange","newValue","updateInputValue","shouldCloseMenu","newExternalValue","onChange","currentHighlightedItemIndex","currentHighlightedSuggestion","clearInputValue","getDefaultSuggestionValue","suggestion","suggestionValue","renderInput","inputPropId","icon","ignoredExternalValue","remainingInputProps","clearableProps","input","jsx","ClearableInput","AutoSuggestAddons","renderDefaultSuggestion","renderDropdownMenu","dropdownMenuClasses","classNames","DropdownSpinner","hasNoSuggestions","isEmpty","NoItemMessage","index","key","DropdownHeader","renderFunction","MenuItem","_","classes","jsxs"],"mappings":"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"}
+{"version":3,"file":"AutoSuggest.js","sources":["../../../src/components/autosuggest/AutoSuggest.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { isEmpty } from 'es-toolkit/compat';\nimport { noop } from 'es-toolkit/function';\nimport { isNil } from 'es-toolkit/predicate';\n\nimport classNames from '../../utils/classNames';\nimport ClearableInput from '../clearableInput/ClearableInput';\nimport { scrollItemIntoView, UP, DOWN } from '../../utils/scrollItemIntoView';\nimport { useDropDirection } from '../../utils/useDropDirection';\nimport DropdownHeader from '../selects/DropdownHeader';\nimport MenuItem from '../menuItems/MenuItem';\nimport useClickOutside from '../../hooks/useClickOutside';\nimport AutoSuggestAddons from './AutoSuggestAddons';\nimport DropdownSpinner from './DropdownSpinner';\nimport NoItemMessage from './NoItemMessage';\n\nexport type AutoSuggestSuggestion = {\n    /**\n     * The text label for a suggestion item. If present, this will be returned when selecting the suggestion.\n     */\n    label?: string;\n\n    /**\n     * Set to disable the suggestion and disallow selecting it.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Optional custom suggestion node that will be rendered as given. Example, this is used by the TagManager\n     * to render a placeholder with an icon next to it.\n     */\n    customSuggestion?: React.ReactNode;\n\n    /**\n     * Additional key-value pairs that are not relevant for rendering but may be handled on your side.\n     */\n    [name: string]: string | React.ReactNode;\n};\n\nexport type SelectedSuggestion = {\n    suggestionValue: string | React.ReactElement;\n    suggestion: AutoSuggestSuggestion;\n};\n\nexport type AutoSuggestInputProps = {\n    /**\n     * A native input id attribute. Passed through as HTML attribute to the input element.\n     */\n    id?: string;\n\n    /**\n     * The value to be set for the input. Using this prop the input can be controlled from the outside.\n     */\n    value?: string;\n\n    /**\n     * String that will be displayed inside the input when nothing is typed in.\n     * @default `Start typing ...`\n     */\n    placeholder?: string | React.ReactNode;\n\n    /**\n     * Icon class name that shall be used. If defined, the input element is wrapped in an input-group\n     * and the icon will be set in an input-addon. Example: `rioglyph-search`.\n     */\n    icon?: string;\n\n    /**\n     * Callback function which will be called when the input changes. __This is usually not needed__ as\n     * the \"onSuggestionsFetchRequested\" callback takes care of any input change. It is listed here\n     * for completeness and for certain edge cases.\n     *\n     * __Note:__ It might be removed in the future when not needed.'\n     * @deprecated please use `onSuggestionsFetchRequested` instead\n     * @param changeEvent\n     * @param changeProps\n     * @returns\n     */\n    onChange?: (changeEvent: React.SyntheticEvent, changeProps: { newValue: string }) => void;\n\n    /**\n     * Callback function which gets triggered when the input gaines focus.\n     */\n    onFocus?: VoidFunction;\n\n    /**\n     * Callback function which gets triggered when the input looses the focus.\n     */\n    onBlur?: VoidFunction;\n\n    /**\n     * Callback function which will be called when the input is cleared. __This is usually not needed__ as\n     * the \"onSuggestionsFetchRequested\" callback takes care of any input change. It is listed here\n     * for completeness and for certain edge cases.\n     *\n     * __Note:__ It might be removed in the future when not needed.\n     */\n    onClear?: VoidFunction;\n\n    /**\n     * Boolean value that adds the class `has-error` to the input\n     * component. Use this for validation use cases. The Autosuggest component\n     * should be wrapped in a `form-group` element with the class `has-feedback`.\n     * @default false\n     */\n    hasError?: boolean;\n\n    /**\n     * Defines the tab index to be added to the input element.\n     * @default 0\n     */\n    tabIndex?: number;\n\n    /**\n     * Boolean value that disabled the input component.\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * The React ref for the underlying input.\n     */\n    inputRef?: React.MutableRefObject<HTMLInputElement>;\n\n    /**\n     * Additional class names that are added to the input component.\n     */\n    className?: string;\n};\n\nexport type AutoSuggestProps<T = AutoSuggestSuggestion> = {\n    /**\n     * A native input id attribute on the component root. Passed through as HTML attribute to the input element.\n     */\n    id?: string;\n\n    /**\n     * Object to define properties for the input component. For the input, the ClearableInput\n     * component is used.\n     */\n    inputProps?: AutoSuggestInputProps;\n\n    /**\n     * Array of items which will be displayed. Items can be arbitrary objects as long as they\n     * have a label defined.\n     *\n     * __Important__: in case you specify your own custom renderer via `renderSuggestion` prop, you\n     * can pass our own object that does not need to have a label. In this case you may want to\n     * specify the `customSuggestionKey` to avoid react throwing an error of rendering menu items with the same key.\n     */\n    suggestions?: AutoSuggestSuggestion[];\n\n    /**\n     * Text that will be shown when there is not match found. If nothing is defined the dropdown-menu\n     * will not be rendered.\n     */\n    noItemMessage?: string | React.ReactNode;\n\n    /**\n     * Callback function which will be called every time you need to recalculate suggestions e.i.\n     * when the filter is updates after each input. It will also be called when the input is\n     * cleared. The value would be an empty string in this case.\n     * @param result\n     * @returns\n     */\n    onSuggestionsFetchRequested?: (result: { value: string }) => void;\n\n    /**\n     * Callback function which will be called when a suggestion is selected from the dropdown menu.\n     * @param event\n     * @param selectedSuggestion\n     * @returns\n     */\n    onSuggestionSelected?: (\n        event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLDivElement>,\n        selectedSuggestion: SelectedSuggestion\n    ) => void;\n\n    /**\n     * Callback function which will be called every time the highlighted selection changes.\n     * @param suggestion\n     * @returns\n     */\n    onSuggestionHighlighted?: (suggestion: AutoSuggestSuggestion | null) => void;\n\n    /**\n     * Function that returns a string which will be displayed inside the input.\n     * This is required when a custom render function for suggestions is provided.\n     * Overwrite this function to provide the value to be used for a suggestion.\n     * Default implementation is: `suggestion => suggestion.label`\n     *\n     * @param suggestion\n     * @returns\n     */\n    getSuggestionValue?: (suggestion: AutoSuggestSuggestion) => string;\n\n    /**\n     * Function that defines how suggestions are rendered on the dropdown-menu.\n     * Use this to customize the appearance for instance when you want to show an icon\n     * for a suggestion.\n     * Default implementation is: `suggestion => suggestion.label`\n     *\n     * @param suggestion\n     * @returns\n     */\n    renderSuggestion?: (suggestion: AutoSuggestSuggestion) => React.ReactNode;\n\n    /**\n     * When rendering your own custom suggestions that do not have the `label` attribute, use this prop to specify\n     * a unique value for each suggestion which will be used as a react key for the individual menu items.\n     */\n    customSuggestionKey?: string;\n\n    /**\n     * Boolean that disabled autoDropDirection and opens the dropdown-menu be above the toggle.\n     * @default false\n     */\n    dropup?: boolean;\n\n    /**\n     * Defines whether the dropdown opens right aligned or not.\n     * Set to true additionally disables autoDrop feature.\n     * @default false\n     */\n    pullRight?: boolean;\n\n    /**\n     * Boolean that enables autoDrop feature.\n     * @default true\n     */\n    autoDropDirection?: boolean;\n\n    /**\n     * Shows a loading spinner instead of the items if set to true.\n     * @default false\n     */\n    isLoading?: boolean;\n\n    /**\n     * Boolean that enables opening the dropdown menu when gaining focus.\n     * @default false\n     */\n    openOnFocus?: boolean;\n\n    /**\n     * Boolean that enables the selection of an item to close the dropdown or not.\n     * @default true\n     */\n    closeOnSelect?: boolean;\n\n    /**\n     * Defines whether or not a selected item is shown in the input after it was selected.\n     * @default true\n     */\n    showSelectedItemsInInput?: boolean;\n\n    /**\n     * Sets autocomplete value for autosuggest forms.\n     */\n    autoComplete?: string;\n\n    /**\n     * Adds a list of input-addons elements in front of the input.\n     */\n    leadingInputAddons?: React.ReactNode[];\n\n    /**\n     * Adds a list of input-addons elements after the input.\n     */\n    trailingInputAddons?: React.ReactNode[];\n\n    /**\n     * Additional class names that are added to the dropdown element.\n     */\n    dropdownClassName?: string;\n\n    /**\n     * Additional class names that are added to the wrapping element.\n     */\n    className?: string;\n};\n\nexport const AutoSuggest = (props: AutoSuggestProps) => {\n    const {\n        id,\n        onSuggestionSelected = noop,\n        onSuggestionsFetchRequested = noop,\n        onSuggestionHighlighted = noop,\n        renderSuggestion,\n        customSuggestionKey,\n        getSuggestionValue,\n        suggestions = [],\n        autoDropDirection = true,\n        pullRight = false,\n        dropup = false,\n        isLoading = false,\n        openOnFocus = false,\n        closeOnSelect = true,\n        showSelectedItemsInInput = true,\n        autoComplete = 'off',\n        inputProps = {\n            id,\n            disabled: false,\n            onChange: noop,\n            onClear: noop,\n            onBlur: noop,\n            onFocus: noop,\n            placeholder: 'Start typing',\n            hasError: false,\n            tabIndex: 0,\n            value: undefined,\n            icon: undefined,\n        },\n        leadingInputAddons,\n        trailingInputAddons,\n        noItemMessage,\n        dropdownClassName = '',\n        className = '',\n        ...remainingProps\n    } = props;\n\n    const [isOpen, setIsOpen] = useState(false);\n    const [value, setValue] = useState(inputProps.value || '');\n    const [highlightedItemIndex, setHighlightedItemIndex] = useState(-1);\n    const [direction, setDirection] = useState(DOWN);\n\n    const componentRef = useClickOutside(() => closeMenu());\n    const dropdownMenuRef = useRef<HTMLUListElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const optionNodesRef = useRef<HTMLLIElement[]>([]);\n\n    // Update internal value state from outside when external input value is given.\n    // This is important for when this component is used as a controlled component\n    const externalValue = inputProps.value;\n    if (!isNil(externalValue) && value !== externalValue) {\n        setValue(externalValue ?? '');\n    }\n\n    // Fetch suggestions on mounting the component by using the external\n    // fetch callback\n    useEffect(() => onSuggestionsFetchRequested({ value }), []);\n\n    // When a new suggestion is highlighted it may be not in view as the dropdown menu\n    // has an overflow and can scroll. In this case, we need to scroll to the highlighted suggestion\n    // so the user can see it\n    useEffect(() => {\n        const focusedItem = getFocusedOptionNode();\n        scrollItemIntoView(direction, dropdownMenuRef.current, focusedItem);\n    }, [highlightedItemIndex, direction]);\n\n    // Used to store the list item reference to allow highlighting a single node.\n    // Update that list of nodes again when the suggestions change from the outside.\n    useEffect(() => {\n        const optionNodes = Array.from(dropdownMenuRef.current?.getElementsByTagName('li') || []);\n        optionNodesRef.current = optionNodes;\n    }, [suggestions]);\n\n    // Overwrite position of dropdown menu in case auto drop is enabled\n    const dropDirection = useDropDirection({ pullRight, dropup, autoDropDirection, dropdownMenuRef }, [suggestions]);\n\n    const openMenu = () => {\n        if (isOpen) {\n            return;\n        }\n        setIsOpen(true);\n    };\n\n    const closeMenu = () => {\n        setIsOpen(false);\n    };\n\n    const handleFocus = (_event: React.FocusEvent<HTMLInputElement>) => {\n        if (openOnFocus) {\n            openMenu();\n        }\n        if (inputProps.onFocus) {\n            inputProps.onFocus();\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n        switch (event.key) {\n            case 'ArrowDown': {\n                // select below on arrow down key\n                const newHighlightedIndex = highlightedItemIndex + 1;\n                if (isOpen && suggestions.length > newHighlightedIndex) {\n                    setHighlightedItemIndex(newHighlightedIndex);\n                    handleHighlightedSuggestionChanged(Number(newHighlightedIndex));\n                    setDirection(DOWN);\n                }\n                return;\n            }\n            case 'ArrowUp':\n                // select above on arrow up key\n                if (isOpen && highlightedItemIndex > 0) {\n                    const newHighlightedIndex = highlightedItemIndex - 1;\n                    setHighlightedItemIndex(newHighlightedIndex);\n                    handleHighlightedSuggestionChanged(Number(newHighlightedIndex));\n                    setDirection(UP);\n                }\n                return;\n            case 'Enter':\n                // select on enter\n                if (isOpen && suggestions[highlightedItemIndex]) {\n                    onSuggestionClicked(event, suggestions[highlightedItemIndex]);\n                } else {\n                    openMenu();\n                }\n                break;\n            case 'Escape':\n            case 'Tab':\n                // close on esc key or on tab\n                closeMenu();\n                break;\n            default:\n                break;\n        }\n    };\n\n    const getFocusedOptionNode = () => {\n        return [...optionNodesRef.current].find((item: HTMLLIElement) => item.className.includes('active'));\n    };\n\n    const handleInputChange = (\n        newValue: string,\n        event: React.MouseEvent<HTMLSpanElement, MouseEvent> | React.ChangeEvent<HTMLInputElement>\n    ) => {\n        if (value !== newValue) {\n            updateInputValue(newValue, event);\n        }\n    };\n\n    const updateInputValue = (\n        newValue: string,\n        event:\n            | React.MouseEvent<HTMLSpanElement, MouseEvent>\n            | React.ChangeEvent<HTMLInputElement>\n            | React.KeyboardEvent<HTMLDivElement>,\n        shouldCloseMenu = false\n    ) => {\n        const closeMenuEventually = shouldCloseMenu ? false : isOpen;\n\n        setIsOpen(!isOpen ? true : closeMenuEventually);\n        setValue(newValue);\n        setHighlightedItemIndex(-1);\n\n        // Fire callback so the parent component can filter the suggestions accordingly\n        onSuggestionsFetchRequested({ value: newValue });\n\n        handleHighlightedSuggestionChanged(-1);\n\n        // Trigger onChange callback to notify usage component only when value has actually changed\n        const { value: newExternalValue, onChange = () => {} } = inputProps;\n        if (newValue !== newExternalValue) {\n            onChange(event, { newValue });\n        }\n    };\n\n    const handleHighlightedSuggestionChanged = (currentHighlightedItemIndex: number) => {\n        const currentHighlightedSuggestion =\n            currentHighlightedItemIndex === -1 ? null : suggestions[currentHighlightedItemIndex];\n        onSuggestionHighlighted(currentHighlightedSuggestion);\n    };\n\n    const clearInputValue = (_event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {\n        setValue('');\n        setHighlightedItemIndex(-1);\n\n        // Focus the input field after clearing it's value in order to allow\n        // entering new values right away\n        if (inputRef.current) {\n            inputRef.current.focus();\n        }\n\n        // Reset filter value so all suggestions are shown again\n        onSuggestionsFetchRequested({ value: '' });\n\n        handleHighlightedSuggestionChanged(-1);\n\n        // Additionally, fire the onClear callback as the service may react on it\n        if (inputProps.onClear) {\n            inputProps.onClear();\n        }\n    };\n\n    const getDefaultSuggestionValue = (suggestion: AutoSuggestSuggestion): string => {\n        return suggestion.label ?? (suggestion[customSuggestionKey ?? ''] as string) ?? '';\n    };\n\n    const onSuggestionClicked = (\n        event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLDivElement>,\n        suggestion: AutoSuggestSuggestion\n    ) => {\n        const getSuggestionValueFunction = getSuggestionValue ? getSuggestionValue : getDefaultSuggestionValue;\n\n        const suggestionValue = getSuggestionValueFunction(suggestion);\n\n        updateInputValue(suggestionValue, event, closeOnSelect);\n\n        // fire callback with the selected item\n        onSuggestionSelected(event, {\n            suggestion,\n            suggestionValue,\n        });\n    };\n\n    const renderInput = () => {\n        const { id: inputPropId, icon, value: ignoredExternalValue, ...remainingInputProps } = inputProps;\n        const clearableProps = { id: id ?? inputPropId, ...remainingInputProps };\n\n        const input = (\n            <ClearableInput\n                {...clearableProps}\n                ref={inputRef}\n                autoComplete={autoComplete}\n                onChange={handleInputChange}\n                onClear={clearInputValue}\n                onFocus={handleFocus}\n                onClick={openMenu}\n                value={showSelectedItemsInInput ? value : ''}\n            />\n        );\n\n        if (icon || leadingInputAddons || trailingInputAddons) {\n            return (\n                <AutoSuggestAddons\n                    icon={icon}\n                    leadingInputAddons={leadingInputAddons}\n                    trailingInputAddons={trailingInputAddons}\n                >\n                    {input}\n                </AutoSuggestAddons>\n            );\n        }\n\n        return input;\n    };\n\n    const renderDefaultSuggestion = (suggestion: AutoSuggestSuggestion): React.ReactNode => suggestion.label;\n\n    const renderDropdownMenu = () => {\n        const dropdownMenuClasses = classNames(\n            'dropdown-menu',\n            dropDirection.pullRight && 'pull-right',\n            dropdownClassName\n        );\n\n        if (isLoading) {\n            return <DropdownSpinner className={dropdownMenuClasses} />;\n        }\n\n        const hasNoSuggestions = isEmpty(suggestions);\n\n        if (hasNoSuggestions && !noItemMessage) {\n            return null;\n        }\n\n        return (\n            <ul role='menu' className={dropdownMenuClasses} ref={dropdownMenuRef}>\n                {hasNoSuggestions && noItemMessage && <NoItemMessage key='NoItemMessage' message={noItemMessage} />}\n                {suggestions.map((suggestion, index) => {\n                    // In case a custom renderer is used but the customSuggestionKey is not set, throw an error\n                    if (renderSuggestion && !suggestion.label && !customSuggestionKey) {\n                        throw new Error(\n                            'The \"customSuggestionKey\" need to be set when using a custom renderer ' +\n                                'and not using the \"label\" prop for suggestions'\n                        );\n                    }\n\n                    const key = `index-${suggestion.label ?? suggestion[customSuggestionKey ?? '']}`;\n\n                    if (suggestion.header && suggestion.label) {\n                        return <DropdownHeader key={key} label={(suggestion as AutoSuggestSuggestion).label} />;\n                    }\n\n                    const renderFunction = renderSuggestion ? renderSuggestion : renderDefaultSuggestion;\n\n                    return (\n                        <MenuItem\n                            key={key}\n                            active={index === highlightedItemIndex}\n                            disabled={suggestion.disabled}\n                            value={\n                                suggestion.customSuggestion ? suggestion.customSuggestion : renderFunction(suggestion)\n                            }\n                            onSelect={(_: number | undefined, event: React.MouseEvent<HTMLLIElement>) =>\n                                onSuggestionClicked(event, suggestion)\n                            }\n                            index={index}\n                        />\n                    );\n                })}\n            </ul>\n        );\n    };\n\n    const classes = classNames(\n        'AutoSuggest',\n        'dropdown',\n        isOpen && 'open',\n        dropDirection.dropup && 'dropup',\n        className\n    );\n\n    return (\n        <div {...remainingProps} className={classes} onKeyDown={handleKeyDown} ref={componentRef}>\n            {renderInput()}\n            {renderDropdownMenu()}\n        </div>\n    );\n};\n\nexport default AutoSuggest;\n"],"names":["AutoSuggest","props","id","onSuggestionSelected","noop","onSuggestionsFetchRequested","onSuggestionHighlighted","renderSuggestion","customSuggestionKey","getSuggestionValue","suggestions","autoDropDirection","pullRight","dropup","isLoading","openOnFocus","closeOnSelect","showSelectedItemsInInput","autoComplete","inputProps","leadingInputAddons","trailingInputAddons","noItemMessage","dropdownClassName","className","remainingProps","isOpen","setIsOpen","useState","value","setValue","highlightedItemIndex","setHighlightedItemIndex","direction","setDirection","DOWN","componentRef","useClickOutside","closeMenu","dropdownMenuRef","useRef","inputRef","optionNodesRef","externalValue","isNil","useEffect","focusedItem","getFocusedOptionNode","scrollItemIntoView","optionNodes","dropDirection","useDropDirection","openMenu","handleFocus","_event","handleKeyDown","event","newHighlightedIndex","handleHighlightedSuggestionChanged","UP","onSuggestionClicked","item","handleInputChange","newValue","updateInputValue","shouldCloseMenu","newExternalValue","onChange","currentHighlightedItemIndex","currentHighlightedSuggestion","clearInputValue","getDefaultSuggestionValue","suggestion","suggestionValue","renderInput","inputPropId","icon","ignoredExternalValue","remainingInputProps","clearableProps","input","jsx","ClearableInput","AutoSuggestAddons","renderDefaultSuggestion","renderDropdownMenu","dropdownMenuClasses","classNames","DropdownSpinner","hasNoSuggestions","isEmpty","NoItemMessage","index","key","DropdownHeader","renderFunction","MenuItem","_","classes","jsxs"],"mappings":"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"}

package/components/avatar/Avatar.js

@@ -1,5 +1,5 @@
 import { jsx as o } from "react/jsx-runtime";
-import _ from "classnames";
+import _ from "../../utils/classNames.js";
 import g from "../tooltip/SimpleTooltip.js";
 import I from "./AvatarContent.js";
 const N = 100, O = 0, M = (s) => {

package/components/avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport classNames from 'classnames';\n\nimport SimpleTooltip from '../tooltip/SimpleTooltip';\nimport AvatarContent from './AvatarContent';\n\nconst TOOLTIP_SHOW_TIMEOUT_IN_MS = 100;\nconst TOOLTIP_HIDE_TIMEOUT_IN_MS = 0;\n\nexport type AvatarProps = ComponentProps<'div'> & {\n    /**\n     * When a name is provided, the Avatar automatically generates and displays the initials of that name.\n     * The name also appears in a tooltip when hovered over.\n     */\n    name?: string;\n\n    /**\n     * The abbreviation can also be defined manually. It is recommended to limit abbreviations\n     * to a maximum of 2 to 3 characters.\n     */\n    abbr?: string;\n\n    /**\n     * The image to be shown. When an image is displayed, the abbreviation is not shown.\n     */\n    image?: string;\n\n    /**\n     * The image alt text. If not given, the name will be used.\n     */\n    alt?: string;\n\n    /**\n     * The name of an icon that should be shown instead of initials. If nothing is provided,\n     * a default icon will be shown.\n     *\n     * @default 'user'\n     */\n    iconName?: string;\n\n    /**\n     * The height and width of the component.\n     *\n     * @default 40\n     */\n    size?: number;\n\n    /**\n     * The background color for the component. By default, the text and icon color is derived from the background color.\n     *\n     * @default 'bg-lighter'\n     */\n    backgroundColor?: string;\n\n    /**\n     * The content of the Avatars tooltip. if nothing is provided, the name is used.\n     */\n    tooltip?: string | JSX.Element;\n\n    /**\n     * Additional classes set to the icon element.\n     */\n    iconClassName?: string;\n\n    /**\n     * Additional classes set to the wrapper element.\n     */\n    className?: string;\n};\n\nconst Avatar = (props: AvatarProps) => {\n    const {\n        name,\n        abbr,\n        image,\n        alt,\n        iconName = 'user',\n        size = 40,\n        backgroundColor = 'bg-lighter',\n        tooltip,\n        iconClassName,\n        className = '',\n        ...remainingProps\n    } = props;\n\n    const classes = classNames('Avatar', backgroundColor, className);\n\n    const tooltipContent = tooltip || name;\n\n    const wrapWithTooltip = (content: JSX.Element) =>\n        tooltipContent ? (\n            <SimpleTooltip\n                content={tooltipContent}\n                placement='bottom'\n                delay={{ show: TOOLTIP_SHOW_TIMEOUT_IN_MS, hide: TOOLTIP_HIDE_TIMEOUT_IN_MS }}\n                popperConfig={{\n                    modifiers: [\n                        {\n                            name: 'offset',\n                            options: {\n                                offset: [0, 5],\n                            },\n                        },\n                        {\n                            name: 'arrow',\n                            options: {},\n                        },\n                    ],\n                }}\n            >\n                {content}\n            </SimpleTooltip>\n        ) : (\n            content\n        );\n\n    return wrapWithTooltip(\n        <div {...remainingProps} className={classes} style={{ height: `${size}px` }}>\n            <AvatarContent\n                name={name}\n                abbr={abbr}\n                image={image}\n                alt={alt}\n                iconName={iconName}\n                iconClassName={iconClassName}\n            />\n        </div>\n    );\n};\n\nexport default Avatar;\n"],"names":["TOOLTIP_SHOW_TIMEOUT_IN_MS","TOOLTIP_HIDE_TIMEOUT_IN_MS","Avatar","props","name","abbr","image","alt","iconName","size","backgroundColor","tooltip","iconClassName","className","remainingProps","classes","classNames","tooltipContent","content","jsx","SimpleTooltip","AvatarContent"],"mappings":";;;;AAMA,MAAMA,IAA6B,KAC7BC,IAA6B,GA+D7BC,IAAS,CAACC,MAAuB;AACnC,QAAM;AAAA,IACF,MAAAC;AAAA,IACA,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,KAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,MAAAC,IAAO;AAAA,IACP,iBAAAC,IAAkB;AAAA,IAClB,SAAAC;AAAA,IACA,eAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,GAAGC;AAAA,EAAA,IACHX,GAEEY,IAAUC,EAAW,UAAUN,GAAiBG,CAAS,GAEzDI,IAAiBN,KAAWP;AA6BlC,UA3BwB,CAACc,MACrBD,IACI,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,SAASH;AAAA,MACT,WAAU;AAAA,MACV,OAAO,EAAE,MAAMjB,GAA4B,MAAMC,EAAA;AAAA,MACjD,cAAc;AAAA,QACV,WAAW;AAAA,UACP;AAAA,YACI,MAAM;AAAA,YACN,SAAS;AAAA,cACL,QAAQ,CAAC,GAAG,CAAC;AAAA,YAAA;AAAA,UACjB;AAAA,UAEJ;AAAA,YACI,MAAM;AAAA,YACN,SAAS,CAAA;AAAA,UAAC;AAAA,QACd;AAAA,MACJ;AAAA,MAGH,UAAAiB;AAAA,IAAA;AAAA,EAAA,IAGLA;AAAA,IAIJ,gBAAAC,EAAC,OAAA,EAAK,GAAGL,GAAgB,WAAWC,GAAS,OAAO,EAAE,QAAQ,GAAGN,CAAI,KAAA,GACjE,UAAA,gBAAAU;AAAA,MAACE;AAAA,MAAA;AAAA,QACG,MAAAjB;AAAA,QACA,MAAAC;AAAA,QACA,OAAAC;AAAA,QACA,KAAAC;AAAA,QACA,UAAAC;AAAA,QACA,eAAAI;AAAA,MAAA;AAAA,IAAA,EACJ,CACJ;AAAA,EAAA;AAER;"}
+{"version":3,"file":"Avatar.js","sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport classNames from '../../utils/classNames';\nimport SimpleTooltip from '../tooltip/SimpleTooltip';\nimport AvatarContent from './AvatarContent';\n\nconst TOOLTIP_SHOW_TIMEOUT_IN_MS = 100;\nconst TOOLTIP_HIDE_TIMEOUT_IN_MS = 0;\n\nexport type AvatarProps = ComponentProps<'div'> & {\n    /**\n     * When a name is provided, the Avatar automatically generates and displays the initials of that name.\n     * The name also appears in a tooltip when hovered over.\n     */\n    name?: string;\n\n    /**\n     * The abbreviation can also be defined manually. It is recommended to limit abbreviations\n     * to a maximum of 2 to 3 characters.\n     */\n    abbr?: string;\n\n    /**\n     * The image to be shown. When an image is displayed, the abbreviation is not shown.\n     */\n    image?: string;\n\n    /**\n     * The image alt text. If not given, the name will be used.\n     */\n    alt?: string;\n\n    /**\n     * The name of an icon that should be shown instead of initials. If nothing is provided,\n     * a default icon will be shown.\n     *\n     * @default 'user'\n     */\n    iconName?: string;\n\n    /**\n     * The height and width of the component.\n     *\n     * @default 40\n     */\n    size?: number;\n\n    /**\n     * The background color for the component. By default, the text and icon color is derived from the background color.\n     *\n     * @default 'bg-lighter'\n     */\n    backgroundColor?: string;\n\n    /**\n     * The content of the Avatars tooltip. if nothing is provided, the name is used.\n     */\n    tooltip?: string | JSX.Element;\n\n    /**\n     * Additional classes set to the icon element.\n     */\n    iconClassName?: string;\n\n    /**\n     * Additional classes set to the wrapper element.\n     */\n    className?: string;\n};\n\nconst Avatar = (props: AvatarProps) => {\n    const {\n        name,\n        abbr,\n        image,\n        alt,\n        iconName = 'user',\n        size = 40,\n        backgroundColor = 'bg-lighter',\n        tooltip,\n        iconClassName,\n        className = '',\n        ...remainingProps\n    } = props;\n\n    const classes = classNames('Avatar', backgroundColor, className);\n\n    const tooltipContent = tooltip || name;\n\n    const wrapWithTooltip = (content: JSX.Element) =>\n        tooltipContent ? (\n            <SimpleTooltip\n                content={tooltipContent}\n                placement='bottom'\n                delay={{ show: TOOLTIP_SHOW_TIMEOUT_IN_MS, hide: TOOLTIP_HIDE_TIMEOUT_IN_MS }}\n                popperConfig={{\n                    modifiers: [\n                        {\n                            name: 'offset',\n                            options: {\n                                offset: [0, 5],\n                            },\n                        },\n                        {\n                            name: 'arrow',\n                            options: {},\n                        },\n                    ],\n                }}\n            >\n                {content}\n            </SimpleTooltip>\n        ) : (\n            content\n        );\n\n    return wrapWithTooltip(\n        <div {...remainingProps} className={classes} style={{ height: `${size}px` }}>\n            <AvatarContent\n                name={name}\n                abbr={abbr}\n                image={image}\n                alt={alt}\n                iconName={iconName}\n                iconClassName={iconClassName}\n            />\n        </div>\n    );\n};\n\nexport default Avatar;\n"],"names":["TOOLTIP_SHOW_TIMEOUT_IN_MS","TOOLTIP_HIDE_TIMEOUT_IN_MS","Avatar","props","name","abbr","image","alt","iconName","size","backgroundColor","tooltip","iconClassName","className","remainingProps","classes","classNames","tooltipContent","content","jsx","SimpleTooltip","AvatarContent"],"mappings":";;;;AAMA,MAAMA,IAA6B,KAC7BC,IAA6B,GA+D7BC,IAAS,CAACC,MAAuB;AACnC,QAAM;AAAA,IACF,MAAAC;AAAA,IACA,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,KAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,MAAAC,IAAO;AAAA,IACP,iBAAAC,IAAkB;AAAA,IAClB,SAAAC;AAAA,IACA,eAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,GAAGC;AAAA,EAAA,IACHX,GAEEY,IAAUC,EAAW,UAAUN,GAAiBG,CAAS,GAEzDI,IAAiBN,KAAWP;AA6BlC,UA3BwB,CAACc,MACrBD,IACI,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,SAASH;AAAA,MACT,WAAU;AAAA,MACV,OAAO,EAAE,MAAMjB,GAA4B,MAAMC,EAAA;AAAA,MACjD,cAAc;AAAA,QACV,WAAW;AAAA,UACP;AAAA,YACI,MAAM;AAAA,YACN,SAAS;AAAA,cACL,QAAQ,CAAC,GAAG,CAAC;AAAA,YAAA;AAAA,UACjB;AAAA,UAEJ;AAAA,YACI,MAAM;AAAA,YACN,SAAS,CAAA;AAAA,UAAC;AAAA,QACd;AAAA,MACJ;AAAA,MAGH,UAAAiB;AAAA,IAAA;AAAA,EAAA,IAGLA;AAAA,IAIJ,gBAAAC,EAAC,OAAA,EAAK,GAAGL,GAAgB,WAAWC,GAAS,OAAO,EAAE,QAAQ,GAAGN,CAAI,KAAA,GACjE,UAAA,gBAAAU;AAAA,MAACE;AAAA,MAAA;AAAA,QACG,MAAAjB;AAAA,QACA,MAAAC;AAAA,QACA,OAAAC;AAAA,QACA,KAAAC;AAAA,QACA,UAAAC;AAAA,QACA,eAAAI;AAAA,MAAA;AAAA,IAAA,EACJ,CACJ;AAAA,EAAA;AAER;"}