@bikdotai/bik-component-library 0.0.833 → 0.0.834

package/dist/esm/components/multi-level-dropdown/MenuItem.js

@@ -1,45 +1,47 @@
-import { jsxs as a, jsx as n, Fragment as T } from "react/jsx-runtime";
-import x from "../../assets/icons/chevronRight2.svg.js";
-import d, { useRef as P } from "react";
+import { jsxs as c, jsx as n, Fragment as T } from "react/jsx-runtime";
+import P from "../../assets/icons/chevronRight2.svg.js";
+import u, { useRef as B } from "react";
 import { COLORS as t } from "../../constants/Theme.js";
-import { BodyCaption as B, BodyTiny as H } from "../TypographyStyle.js";
-import { MenuItemWrapper as L, MenuItemContainer as W, ContentContainer as j, LeadingIconContainer as k, TrailingIconContainer as C, SubMenuContainer as E, StyledSubMenuWrapper as _, SubMenuListContainer as w } from "./MultiLevelDropdown.styled.js";
-const G = ({
+import { BodyCaption as H, BodyTiny as L } from "../TypographyStyle.js";
+import { MenuItemWrapper as W, MenuItemContainer as j, ContentContainer as k, LeadingIconContainer as E, TrailingIconContainer as p, SubMenuContainer as _, StyledSubMenuWrapper as w, SubMenuListContainer as D } from "./MultiLevelDropdown.styled.js";
+const J = ({
   width: o,
-  onDropdownItemClick: u,
+  onDropdownItemClick: f,
   option: e,
-  parents: f,
-  allowParentSelection: v,
-  maxLevels: h,
+  parents: h,
+  allowParentSelection: y,
+  maxLevels: m,
   currentLevel: b,
-  renderNestedMenu: p
+  renderNestedMenu: I,
+  version: r
 }) => {
-  const [m, g] = d.useState(!1), [s, M] = d.useState(!1), [S, I] = d.useState({
+  const [g, M] = u.useState(!1), [l, S] = u.useState(!1), [C, v] = u.useState({
     top: 0,
     left: 0
-  }), y = P({ top: 0, left: 0 }), c = !!e.children && e.children.length > 0, i = c && (h === void 0 || b < h), O = () => {
-    !u || (e.disabled ?? !1) || (!c || v) && u(e, f);
-  }, R = (r) => {
-    const l = r.currentTarget.getBoundingClientRect();
-    I({
-      top: l.top,
-      left: l.right
-    }), y.current = {
-      top: l.top,
-      left: l.right
+  }), x = B({ top: 0, left: 0 }), i = !!e.children && e.children.length > 0, d = i && (m === void 0 || b < m), O = () => {
+    !f || (e.disabled ?? !1) || (!i || y) && f(e, h);
+  }, R = (s) => {
+    const a = s.currentTarget.getBoundingClientRect();
+    v({
+      top: a.top,
+      left: a.right
+    }), x.current = {
+      top: a.top,
+      left: a.right
     };
   };
-  return /* @__PURE__ */ a(
-    L,
+  return /* @__PURE__ */ c(
+    W,
     {
-      onMouseEnter: (r) => {
-        i && (g(!0), R(r));
+      version: r,
+      onMouseEnter: (s) => {
+        d && (M(!0), R(s));
       },
       onMouseLeave: () => {
-        g(!1);
+        M(!1);
       },
-      onClick: (r) => {
-        r.stopPropagation(), O();
+      onClick: (s) => {
+        s.stopPropagation(), O();
       },
       id: "menuItemWrapper",
       style: {
@@ -47,31 +49,32 @@ const G = ({
         backgroundColor: e.disabled ?? !1 ? t.surface.standard : "transparent"
       },
       children: [
-        e.customComponent ? e.customComponent : /* @__PURE__ */ a(
-          W,
+        e.customComponent ? e.customComponent : /* @__PURE__ */ c(
+          j,
           {
             isSelected: e.selected,
-            isSubMenuOpen: m,
-            isHovered: s,
+            isSubMenuOpen: g,
+            isHovered: l,
             isDisabled: e.disabled ?? !1,
+            version: r,
             children: [
-              /* @__PURE__ */ a(j, { children: [
-                e.leadingIcon && /* @__PURE__ */ n(k, { children: e.leadingIcon }),
-                /* @__PURE__ */ a("div", { children: [
+              /* @__PURE__ */ c(k, { children: [
+                e.leadingIcon && /* @__PURE__ */ n(E, { children: e.leadingIcon }),
+                /* @__PURE__ */ c("div", { children: [
                   /* @__PURE__ */ n(
-                    B,
+                    H,
                     {
                       style: {
-                        color: e.disabled ?? !1 ? t.content.inactive : e.selected || s ? t.content.positive : t.content.primary
+                        color: e.disabled ?? !1 ? t.content.inactive : e.selected || l ? r === "3.0" ? t.text.primary : t.content.positive : t.content.primary
                       },
                       children: e.label
                     }
                   ),
                   e.subText && /* @__PURE__ */ n(
-                    H,
+                    L,
                     {
                       style: {
-                        color: e.disabled ?? !1 ? t.content.inactive : e.selected || s ? t.content.positive : t.content.secondary,
+                        color: e.disabled ?? !1 ? t.content.inactive : e.selected || l ? r === "3.0" ? t.text.primary : t.content.positive : t.content.secondary,
                         marginTop: "2px"
                       },
                       children: e.subText
@@ -79,33 +82,33 @@ const G = ({
                   )
                 ] })
               ] }),
-              c ? /* @__PURE__ */ n(C, { children: /* @__PURE__ */ n(
-                x,
+              i ? /* @__PURE__ */ n(p, { children: /* @__PURE__ */ n(
+                P,
                 {
                   width: 16,
                   height: 16,
-                  color: !i || (e.disabled ?? !1) ? t.content.inactive : e.selected || s ? t.content.positive : t.content.primary
+                  color: !d || (e.disabled ?? !1) ? t.content.inactive : e.selected || l ? r === "3.0" ? t.text.primary : t.content.positive : t.content.primary
                 }
-              ) }) : e.trailingIcon ? /* @__PURE__ */ n(C, { children: e.trailingIcon }) : /* @__PURE__ */ n(T, {})
+              ) }) : e.trailingIcon ? /* @__PURE__ */ n(p, { children: e.trailingIcon }) : /* @__PURE__ */ n(T, {})
             ]
           }
         ),
-        !(e.disabled ?? !1) && e.children && e.children.length > 0 && i && m && /* @__PURE__ */ n(
-          E,
+        !(e.disabled ?? !1) && e.children && e.children.length > 0 && d && g && /* @__PURE__ */ n(
+          _,
           {
             width: o,
             className: "submenu",
-            onMouseEnter: () => M(!0),
-            onMouseLeave: () => M(!1),
+            onMouseEnter: () => S(!0),
+            onMouseLeave: () => S(!1),
             children: /* @__PURE__ */ n(
-              _,
+              w,
               {
                 width: o,
-                top: S.top,
-                left: S.left,
-                children: /* @__PURE__ */ n(w, { children: p(
+                top: C.top,
+                left: C.left,
+                children: /* @__PURE__ */ n(D, { version: r, children: I(
                   e.children,
-                  [...f, e],
+                  [...h, e],
                   b + 1
                 ) })
               }
@@ -117,6 +120,6 @@ const G = ({
   );
 };
 export {
-  G as MenuItem
+  J as MenuItem
 };
 //# sourceMappingURL=MenuItem.js.map

package/dist/esm/components/multi-level-dropdown/MenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.js","sources":["../../../../src/components/multi-level-dropdown/MenuItem.tsx"],"sourcesContent":["import ChevronRightIcon from '@src/assets/icons/chevronRight2.svg';\nimport React, { useRef } from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport { BodyCaption, BodyTiny } from '../TypographyStyle';\nimport {\n\tContentContainer,\n\tLeadingIconContainer,\n\tMenuItemContainer,\n\tMenuItemWrapper,\n\tStyledSubMenuWrapper,\n\tSubMenuContainer,\n\tSubMenuListContainer,\n\tTrailingIconContainer,\n} from './MultiLevelDropdown.styled';\nimport {\n\tMultiLevelDropdownOption,\n\tRenderNestedMenu,\n\tSingleOption,\n} from './type';\n\nexport const MenuItem: React.FC<{\n\twidth: string;\n\tonDropdownItemClick?: (\n\t\toption: MultiLevelDropdownOption,\n\t\tparents: MultiLevelDropdownOption[],\n\t) => void;\n\toption: SingleOption;\n\tparents: MultiLevelDropdownOption[];\n\tallowParentSelection?: boolean;\n\tmaxLevels?: number;\n\tcurrentLevel: number;\n\trenderNestedMenu: RenderNestedMenu;\n}> = ({\n\twidth,\n\tonDropdownItemClick,\n\toption,\n\tparents,\n\tallowParentSelection,\n\tmaxLevels,\n\tcurrentLevel,\n\trenderNestedMenu,\n}) => {\n\tconst [isSubMenuOpen, setIsSubMenuOpen] = React.useState(false);\n\tconst [isSubMenuHovered, setIsSubMenuHovered] = React.useState(false);\n\tconst [subMenuPosition, setSubMenuPosition] = React.useState({\n\t\ttop: 0,\n\t\tleft: 0,\n\t});\n\tconst positionRef = useRef<any>({ top: 0, left: 0 });\n\tconst hasChildren = !!option.children && option.children.length > 0;\n\tconst canOpenSubMenu =\n\t\thasChildren && (maxLevels === undefined || currentLevel < maxLevels);\n\n\tconst handleDropdownOptionClick = () => {\n\t\tif (!onDropdownItemClick || (option.disabled ?? false)) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!hasChildren || allowParentSelection) {\n\t\t\tonDropdownItemClick(option, parents);\n\t\t}\n\t};\n\n\tconst calculateSubMenuPosition = (event: React.MouseEvent) => {\n\t\tconst rect = (event.currentTarget as HTMLElement).getBoundingClientRect();\n\t\tsetSubMenuPosition({\n\t\t\ttop: rect.top,\n\t\t\tleft: rect.right,\n\t\t});\n\t\tpositionRef.current = {\n\t\t\ttop: rect.top,\n\t\t\tleft: rect.right,\n\t\t};\n\t};\n\n\treturn (\n\t\t<MenuItemWrapper\n\t\t\tonMouseEnter={(event) => {\n\t\t\t\tif (canOpenSubMenu) {\n\t\t\t\t\tsetIsSubMenuOpen(true);\n\t\t\t\t\tcalculateSubMenuPosition(event);\n\t\t\t\t}\n\t\t\t}}\n\t\t\tonMouseLeave={() => {\n\t\t\t\tsetIsSubMenuOpen(false);\n\t\t\t}}\n\t\t\tonClick={(e) => {\n\t\t\t\te.stopPropagation();\n\t\t\t\thandleDropdownOptionClick();\n\t\t\t}}\n\t\t\tid=\"menuItemWrapper\"\n\t\t\tstyle={{\n\t\t\t\tcursor: option.disabled ?? false ? 'not-allowed' : 'pointer',\n\t\t\t\tbackgroundColor:\n\t\t\t\t\toption.disabled ?? false ? COLORS.surface.standard : 'transparent',\n\t\t\t}}\n\t\t>\n\t\t\t{option.customComponent ? (\n\t\t\t\toption.customComponent\n\t\t\t) : (\n\t\t\t\t<MenuItemContainer\n\t\t\t\t\tisSelected={option.selected}\n\t\t\t\t\tisSubMenuOpen={isSubMenuOpen}\n\t\t\t\t\tisHovered={isSubMenuHovered}\n\t\t\t\t\tisDisabled={option.disabled ?? false}\n\t\t\t\t>\n\t\t\t\t\t<ContentContainer>\n\t\t\t\t\t\t{option.leadingIcon && (\n\t\t\t\t\t\t\t<LeadingIconContainer>{option.leadingIcon}</LeadingIconContainer>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\t\toption.disabled ?? false\n\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t\t: option.selected || isSubMenuHovered\n\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.positive\n\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.primary,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t{option.subText && (\n\t\t\t\t\t\t\t\t<BodyTiny\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\t\t\toption.disabled ?? false\n\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t\t\t: option.selected || isSubMenuHovered\n\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.positive\n\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.secondary,\n\t\t\t\t\t\t\t\t\t\tmarginTop: '2px',\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{option.subText}\n\t\t\t\t\t\t\t\t</BodyTiny>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</ContentContainer>\n\t\t\t\t\t{hasChildren ? (\n\t\t\t\t\t\t<TrailingIconContainer>\n\t\t\t\t\t\t\t<ChevronRightIcon\n\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\t\t\t!canOpenSubMenu || (option.disabled ?? false)\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t: option.selected || isSubMenuHovered\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.positive\n\t\t\t\t\t\t\t\t\t\t: COLORS.content.primary\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</TrailingIconContainer>\n\t\t\t\t\t) : option.trailingIcon ? (\n\t\t\t\t\t\t<TrailingIconContainer>{option.trailingIcon}</TrailingIconContainer>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<></>\n\t\t\t\t\t)}\n\t\t\t\t</MenuItemContainer>\n\t\t\t)}\n\n\t\t\t{!(option.disabled ?? false) &&\n\t\t\t\toption.children &&\n\t\t\t\toption.children.length > 0 &&\n\t\t\t\tcanOpenSubMenu &&\n\t\t\t\tisSubMenuOpen && (\n\t\t\t\t\t<SubMenuContainer\n\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\tclassName=\"submenu\"\n\t\t\t\t\t\tonMouseEnter={() => setIsSubMenuHovered(true)}\n\t\t\t\t\t\tonMouseLeave={() => setIsSubMenuHovered(false)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<StyledSubMenuWrapper\n\t\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\t\ttop={subMenuPosition.top}\n\t\t\t\t\t\t\tleft={subMenuPosition.left}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<SubMenuListContainer>\n\t\t\t\t\t\t\t\t{renderNestedMenu(\n\t\t\t\t\t\t\t\t\toption.children,\n\t\t\t\t\t\t\t\t\t[...parents, option],\n\t\t\t\t\t\t\t\t\tcurrentLevel + 1,\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</SubMenuListContainer>\n\t\t\t\t\t\t</StyledSubMenuWrapper>\n\t\t\t\t\t</SubMenuContainer>\n\t\t\t\t)}\n\t\t</MenuItemWrapper>\n\t);\n};\n"],"names":["MenuItem","width","onDropdownItemClick","option","parents","allowParentSelection","maxLevels","currentLevel","renderNestedMenu","isSubMenuOpen","setIsSubMenuOpen","React","isSubMenuHovered","setIsSubMenuHovered","subMenuPosition","setSubMenuPosition","positionRef","useRef","hasChildren","canOpenSubMenu","handleDropdownOptionClick","calculateSubMenuPosition","event","rect","jsxs","MenuItemWrapper","e","COLORS","MenuItemContainer","ContentContainer","jsx","LeadingIconContainer","BodyCaption","BodyTiny","TrailingIconContainer","ChevronRightIcon","Fragment","SubMenuContainer","StyledSubMenuWrapper","SubMenuListContainer"],"mappings":"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"}
+{"version":3,"file":"MenuItem.js","sources":["../../../../src/components/multi-level-dropdown/MenuItem.tsx"],"sourcesContent":["import ChevronRightIcon from '@src/assets/icons/chevronRight2.svg';\nimport React, { useRef } from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport { BodyCaption, BodyTiny } from '../TypographyStyle';\nimport {\n\tContentContainer,\n\tLeadingIconContainer,\n\tMenuItemContainer,\n\tMenuItemWrapper,\n\tStyledSubMenuWrapper,\n\tSubMenuContainer,\n\tSubMenuListContainer,\n\tTrailingIconContainer,\n} from './MultiLevelDropdown.styled';\nimport {\n\tMultiLevelDropdownOption,\n\tRenderNestedMenu,\n\tSingleOption,\n} from './type';\n\nexport const MenuItem: React.FC<{\n\twidth: string;\n\tonDropdownItemClick?: (\n\t\toption: MultiLevelDropdownOption,\n\t\tparents: MultiLevelDropdownOption[],\n\t) => void;\n\toption: SingleOption;\n\tparents: MultiLevelDropdownOption[];\n\tallowParentSelection?: boolean;\n\tmaxLevels?: number;\n\tcurrentLevel: number;\n\trenderNestedMenu: RenderNestedMenu;\n\tversion?: '1.0' | '2.0' | '3.0';\n}> = ({\n\twidth,\n\tonDropdownItemClick,\n\toption,\n\tparents,\n\tallowParentSelection,\n\tmaxLevels,\n\tcurrentLevel,\n\trenderNestedMenu,\n\tversion,\n}) => {\n\tconst [isSubMenuOpen, setIsSubMenuOpen] = React.useState(false);\n\tconst [isSubMenuHovered, setIsSubMenuHovered] = React.useState(false);\n\tconst [subMenuPosition, setSubMenuPosition] = React.useState({\n\t\ttop: 0,\n\t\tleft: 0,\n\t});\n\tconst positionRef = useRef<any>({ top: 0, left: 0 });\n\tconst hasChildren = !!option.children && option.children.length > 0;\n\tconst canOpenSubMenu =\n\t\thasChildren && (maxLevels === undefined || currentLevel < maxLevels);\n\n\tconst handleDropdownOptionClick = () => {\n\t\tif (!onDropdownItemClick || (option.disabled ?? false)) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!hasChildren || allowParentSelection) {\n\t\t\tonDropdownItemClick(option, parents);\n\t\t}\n\t};\n\n\tconst calculateSubMenuPosition = (event: React.MouseEvent) => {\n\t\tconst rect = (event.currentTarget as HTMLElement).getBoundingClientRect();\n\t\tsetSubMenuPosition({\n\t\t\ttop: rect.top,\n\t\t\tleft: rect.right,\n\t\t});\n\t\tpositionRef.current = {\n\t\t\ttop: rect.top,\n\t\t\tleft: rect.right,\n\t\t};\n\t};\n\n\treturn (\n\t\t<MenuItemWrapper\n\t\t\tversion={version}\n\t\t\tonMouseEnter={(event) => {\n\t\t\t\tif (canOpenSubMenu) {\n\t\t\t\t\tsetIsSubMenuOpen(true);\n\t\t\t\t\tcalculateSubMenuPosition(event);\n\t\t\t\t}\n\t\t\t}}\n\t\t\tonMouseLeave={() => {\n\t\t\t\tsetIsSubMenuOpen(false);\n\t\t\t}}\n\t\t\tonClick={(e) => {\n\t\t\t\te.stopPropagation();\n\t\t\t\thandleDropdownOptionClick();\n\t\t\t}}\n\t\t\tid=\"menuItemWrapper\"\n\t\t\tstyle={{\n\t\t\t\tcursor: option.disabled ?? false ? 'not-allowed' : 'pointer',\n\t\t\t\tbackgroundColor:\n\t\t\t\t\toption.disabled ?? false ? COLORS.surface.standard : 'transparent',\n\t\t\t}}\n\t\t>\n\t\t\t{option.customComponent ? (\n\t\t\t\toption.customComponent\n\t\t\t) : (\n\t\t\t\t<MenuItemContainer\n\t\t\t\t\tisSelected={option.selected}\n\t\t\t\t\tisSubMenuOpen={isSubMenuOpen}\n\t\t\t\t\tisHovered={isSubMenuHovered}\n\t\t\t\t\tisDisabled={option.disabled ?? false}\n\t\t\t\t\tversion={version}\n\t\t\t\t>\n\t\t\t\t\t<ContentContainer>\n\t\t\t\t\t\t{option.leadingIcon && (\n\t\t\t\t\t\t\t<LeadingIconContainer>{option.leadingIcon}</LeadingIconContainer>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\t\toption.disabled ?? false\n\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t\t: option.selected || isSubMenuHovered\n\t\t\t\t\t\t\t\t\t\t\t? version === '3.0'\n\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.text.primary\n\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.positive\n\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.primary,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t{option.subText && (\n\t\t\t\t\t\t\t\t<BodyTiny\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\t\t\toption.disabled ?? false\n\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t\t\t: option.selected || isSubMenuHovered\n\t\t\t\t\t\t\t\t\t\t\t\t? version === '3.0'\n\t\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.text.primary\n\t\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.positive\n\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.secondary,\n\t\t\t\t\t\t\t\t\t\tmarginTop: '2px',\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{option.subText}\n\t\t\t\t\t\t\t\t</BodyTiny>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</ContentContainer>\n\t\t\t\t\t{hasChildren ? (\n\t\t\t\t\t\t<TrailingIconContainer>\n\t\t\t\t\t\t\t<ChevronRightIcon\n\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\t\t\t!canOpenSubMenu || (option.disabled ?? false)\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t: option.selected || isSubMenuHovered\n\t\t\t\t\t\t\t\t\t\t? version === '3.0'\n\t\t\t\t\t\t\t\t\t\t\t? COLORS.text.primary\n\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.positive\n\t\t\t\t\t\t\t\t\t\t: COLORS.content.primary\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</TrailingIconContainer>\n\t\t\t\t\t) : option.trailingIcon ? (\n\t\t\t\t\t\t<TrailingIconContainer>{option.trailingIcon}</TrailingIconContainer>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<></>\n\t\t\t\t\t)}\n\t\t\t\t</MenuItemContainer>\n\t\t\t)}\n\n\t\t\t{!(option.disabled ?? false) &&\n\t\t\t\toption.children &&\n\t\t\t\toption.children.length > 0 &&\n\t\t\t\tcanOpenSubMenu &&\n\t\t\t\tisSubMenuOpen && (\n\t\t\t\t\t<SubMenuContainer\n\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\tclassName=\"submenu\"\n\t\t\t\t\t\tonMouseEnter={() => setIsSubMenuHovered(true)}\n\t\t\t\t\t\tonMouseLeave={() => setIsSubMenuHovered(false)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<StyledSubMenuWrapper\n\t\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\t\ttop={subMenuPosition.top}\n\t\t\t\t\t\t\tleft={subMenuPosition.left}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<SubMenuListContainer version={version}>\n\t\t\t\t\t\t\t\t{renderNestedMenu(\n\t\t\t\t\t\t\t\t\toption.children,\n\t\t\t\t\t\t\t\t\t[...parents, option],\n\t\t\t\t\t\t\t\t\tcurrentLevel + 1,\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</SubMenuListContainer>\n\t\t\t\t\t\t</StyledSubMenuWrapper>\n\t\t\t\t\t</SubMenuContainer>\n\t\t\t\t)}\n\t\t</MenuItemWrapper>\n\t);\n};\n"],"names":["MenuItem","width","onDropdownItemClick","option","parents","allowParentSelection","maxLevels","currentLevel","renderNestedMenu","version","isSubMenuOpen","setIsSubMenuOpen","React","isSubMenuHovered","setIsSubMenuHovered","subMenuPosition","setSubMenuPosition","positionRef","useRef","hasChildren","canOpenSubMenu","handleDropdownOptionClick","calculateSubMenuPosition","event","rect","jsxs","MenuItemWrapper","e","COLORS","MenuItemContainer","ContentContainer","jsx","LeadingIconContainer","BodyCaption","BodyTiny","TrailingIconContainer","ChevronRightIcon","Fragment","SubMenuContainer","StyledSubMenuWrapper","SubMenuListContainer"],"mappings":"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"}

package/dist/esm/components/multi-level-dropdown/MenuList.d.ts

@@ -9,4 +9,5 @@ export declare const MenuList: React.FC<{
     maxLevels?: number;
     hideGroupLabel?: boolean;
     currentLevel: number;
+    version?: '1.0' | '2.0' | '3.0';
 }>;

package/dist/esm/components/multi-level-dropdown/MenuList.js

@@ -1,65 +1,69 @@
-import { jsx as u } from "react/jsx-runtime";
-import { GroupedMenuList as y } from "./GroupedMenuList.js";
-import { MenuItem as N } from "./MenuItem.js";
-import { StyledMenuList as q } from "./MultiLevelDropdown.styled.js";
-const z = ({
-  width: t,
-  onDropdownItemClick: e,
-  options: g,
+import { jsx as t } from "react/jsx-runtime";
+import { GroupedMenuList as N } from "./GroupedMenuList.js";
+import { MenuItem as q } from "./MenuItem.js";
+import { StyledMenuList as z } from "./MultiLevelDropdown.styled.js";
+const A = ({
+  width: s,
+  onDropdownItemClick: f,
+  options: j,
   parents: n,
-  allowParentSelection: f,
-  maxLevels: m,
-  hideGroupLabel: M,
-  currentLevel: i
+  allowParentSelection: m,
+  maxLevels: M,
+  hideGroupLabel: p,
+  currentLevel: g,
+  version: e
 }) => {
-  const p = (r, s, j) => /* @__PURE__ */ u(
-    z,
+  const i = (r, u, y) => /* @__PURE__ */ t(
+    A,
     {
-      width: t,
-      onDropdownItemClick: e,
+      width: s,
+      onDropdownItemClick: f,
       options: r,
-      parents: s,
-      allowParentSelection: f,
-      maxLevels: m,
-      hideGroupLabel: M,
-      currentLevel: j
+      parents: u,
+      allowParentSelection: m,
+      maxLevels: M,
+      hideGroupLabel: p,
+      currentLevel: y,
+      version: e
     }
   );
-  return /* @__PURE__ */ u(q, { children: g.map((r, s) => {
+  return /* @__PURE__ */ t(z, { children: j.map((r, u) => {
     if ("value" in r)
-      return /* @__PURE__ */ u(
-        N,
+      return /* @__PURE__ */ t(
+        q,
         {
-          width: t,
-          onDropdownItemClick: e,
+          width: s,
+          onDropdownItemClick: f,
           option: r,
           parents: n,
-          allowParentSelection: f,
-          maxLevels: m,
-          currentLevel: i,
-          renderNestedMenu: p
+          allowParentSelection: m,
+          maxLevels: M,
+          currentLevel: g,
+          renderNestedMenu: i,
+          version: e
         },
-        s
+        u
       );
     if ("options" in r && r.options.length > 0)
-      return /* @__PURE__ */ u(
-        y,
+      return /* @__PURE__ */ t(
+        N,
         {
-          width: t,
-          onDropdownItemClick: e,
+          width: s,
+          onDropdownItemClick: f,
           option: r,
           parents: n,
-          allowParentSelection: f,
-          maxLevels: m,
-          hideGroupLabel: M,
-          currentLevel: i,
-          renderNestedMenu: p
+          allowParentSelection: m,
+          maxLevels: M,
+          hideGroupLabel: p,
+          currentLevel: g,
+          renderNestedMenu: i,
+          version: e
         },
-        s
+        u
       );
   }) });
 };
 export {
-  z as MenuList
+  A as MenuList
 };
 //# sourceMappingURL=MenuList.js.map

package/dist/esm/components/multi-level-dropdown/MenuList.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuList.js","sources":["../../../../src/components/multi-level-dropdown/MenuList.tsx"],"sourcesContent":["import React from 'react';\nimport { GroupedMenuList } from './GroupedMenuList';\nimport { MenuItem } from './MenuItem';\nimport { StyledMenuList } from './MultiLevelDropdown.styled';\nimport { MultiLevelDropdownOption, RenderNestedMenu } from './type';\n\nexport const MenuList: React.FC<{\n\twidth: string;\n\tonDropdownItemClick?: (\n\t\toption: MultiLevelDropdownOption,\n\t\tparents: MultiLevelDropdownOption[],\n\t) => void;\n\toptions: MultiLevelDropdownOption[];\n\tparents: MultiLevelDropdownOption[];\n\tallowParentSelection?: boolean;\n\tmaxLevels?: number;\n\thideGroupLabel?: boolean;\n\tcurrentLevel: number;\n}> = ({\n\twidth,\n\tonDropdownItemClick,\n\toptions,\n\tparents,\n\tallowParentSelection,\n\tmaxLevels,\n\thideGroupLabel,\n\tcurrentLevel,\n}) => {\n\tconst renderNestedMenu: RenderNestedMenu = (\n\t\tnestedOptions,\n\t\tnestedParents,\n\t\tnestedCurrentLevel,\n\t) => (\n\t\t<MenuList\n\t\t\twidth={width}\n\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\toptions={nestedOptions}\n\t\t\tparents={nestedParents}\n\t\t\tallowParentSelection={allowParentSelection}\n\t\t\tmaxLevels={maxLevels}\n\t\t\thideGroupLabel={hideGroupLabel}\n\t\t\tcurrentLevel={nestedCurrentLevel}\n\t\t/>\n\t);\n\n\treturn (\n\t\t<StyledMenuList>\n\t\t\t{options.map((option, index) => {\n\t\t\t\tif ('value' in option) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\t\t\t\t\toption={option}\n\t\t\t\t\t\t\tparents={parents}\n\t\t\t\t\t\t\tallowParentSelection={allowParentSelection}\n\t\t\t\t\t\t\tmaxLevels={maxLevels}\n\t\t\t\t\t\t\tcurrentLevel={currentLevel}\n\t\t\t\t\t\t\trenderNestedMenu={renderNestedMenu}\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t} else if ('options' in option && option.options.length > 0) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<GroupedMenuList\n\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\t\t\t\t\toption={option}\n\t\t\t\t\t\t\tparents={parents}\n\t\t\t\t\t\t\tallowParentSelection={allowParentSelection}\n\t\t\t\t\t\t\tmaxLevels={maxLevels}\n\t\t\t\t\t\t\thideGroupLabel={hideGroupLabel}\n\t\t\t\t\t\t\tcurrentLevel={currentLevel}\n\t\t\t\t\t\t\trenderNestedMenu={renderNestedMenu}\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t})}\n\t\t</StyledMenuList>\n\t);\n};\n"],"names":["MenuList","width","onDropdownItemClick","options","parents","allowParentSelection","maxLevels","hideGroupLabel","currentLevel","renderNestedMenu","nestedOptions","nestedParents","nestedCurrentLevel","jsx","StyledMenuList","option","index","MenuItem","GroupedMenuList"],"mappings":";;;;AAMO,MAAMA,IAYR,CAAC;AAAA,EACL,OAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,cAAAC;AACD,MAAM;AACL,QAAMC,IAAqC,CAC1CC,GACAC,GACAC,MAEA,gBAAAC;AAAA,IAACb;AAAA,IAAA;AAAA,MACA,OAAAC;AAAA,MACA,qBAAAC;AAAA,MACA,SAASQ;AAAA,MACT,SAASC;AAAA,MACT,sBAAAN;AAAA,MACA,WAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,cAAcK;AAAA,IAAA;AAAA,EAAA;AAIhB,2BACEE,GAAA,EACC,UAAAX,EAAQ,IAAI,CAACY,GAAQC,MAAU;AAC/B,QAAI,WAAWD;AACd,aACC,gBAAAF;AAAA,QAACI;AAAA,QAAA;AAAA,UAEA,OAAAhB;AAAA,UACA,qBAAAC;AAAA,UACA,QAAAa;AAAA,UACA,SAAAX;AAAA,UACA,sBAAAC;AAAA,UACA,WAAAC;AAAA,UACA,cAAAE;AAAA,UACA,kBAAAC;AAAA,QAAA;AAAA,QARKO;AAAA,MAAA;QAWG,aAAaD,KAAUA,EAAO,QAAQ,SAAS;AACzD,aACC,gBAAAF;AAAA,QAACK;AAAA,QAAA;AAAA,UAEA,OAAAjB;AAAA,UACA,qBAAAC;AAAA,UACA,QAAAa;AAAA,UACA,SAAAX;AAAA,UACA,sBAAAC;AAAA,UACA,WAAAC;AAAA,UACA,gBAAAC;AAAA,UACA,cAAAC;AAAA,UACA,kBAAAC;AAAA,QAAA;AAAA,QATKO;AAAA,MAAA;AAAA,EAaT,CAAC,EAAA,CACF;AAEF;"}
+{"version":3,"file":"MenuList.js","sources":["../../../../src/components/multi-level-dropdown/MenuList.tsx"],"sourcesContent":["import React from 'react';\nimport { GroupedMenuList } from './GroupedMenuList';\nimport { MenuItem } from './MenuItem';\nimport { StyledMenuList } from './MultiLevelDropdown.styled';\nimport { MultiLevelDropdownOption, RenderNestedMenu } from './type';\n\nexport const MenuList: React.FC<{\n\twidth: string;\n\tonDropdownItemClick?: (\n\t\toption: MultiLevelDropdownOption,\n\t\tparents: MultiLevelDropdownOption[],\n\t) => void;\n\toptions: MultiLevelDropdownOption[];\n\tparents: MultiLevelDropdownOption[];\n\tallowParentSelection?: boolean;\n\tmaxLevels?: number;\n\thideGroupLabel?: boolean;\n\tcurrentLevel: number;\n\tversion?: '1.0' | '2.0' | '3.0';\n}> = ({\n\twidth,\n\tonDropdownItemClick,\n\toptions,\n\tparents,\n\tallowParentSelection,\n\tmaxLevels,\n\thideGroupLabel,\n\tcurrentLevel,\n\tversion,\n}) => {\n\tconst renderNestedMenu: RenderNestedMenu = (\n\t\tnestedOptions,\n\t\tnestedParents,\n\t\tnestedCurrentLevel,\n\t) => (\n\t\t<MenuList\n\t\t\twidth={width}\n\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\toptions={nestedOptions}\n\t\t\tparents={nestedParents}\n\t\t\tallowParentSelection={allowParentSelection}\n\t\t\tmaxLevels={maxLevels}\n\t\t\thideGroupLabel={hideGroupLabel}\n\t\t\tcurrentLevel={nestedCurrentLevel}\n\t\t\tversion={version}\n\t\t/>\n\t);\n\n\treturn (\n\t\t<StyledMenuList>\n\t\t\t{options.map((option, index) => {\n\t\t\t\tif ('value' in option) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\t\t\t\t\toption={option}\n\t\t\t\t\t\t\tparents={parents}\n\t\t\t\t\t\t\tallowParentSelection={allowParentSelection}\n\t\t\t\t\t\t\tmaxLevels={maxLevels}\n\t\t\t\t\t\t\tcurrentLevel={currentLevel}\n\t\t\t\t\t\t\trenderNestedMenu={renderNestedMenu}\n\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t} else if ('options' in option && option.options.length > 0) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<GroupedMenuList\n\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\t\t\t\t\toption={option}\n\t\t\t\t\t\t\tparents={parents}\n\t\t\t\t\t\t\tallowParentSelection={allowParentSelection}\n\t\t\t\t\t\t\tmaxLevels={maxLevels}\n\t\t\t\t\t\t\thideGroupLabel={hideGroupLabel}\n\t\t\t\t\t\t\tcurrentLevel={currentLevel}\n\t\t\t\t\t\t\trenderNestedMenu={renderNestedMenu}\n\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t})}\n\t\t</StyledMenuList>\n\t);\n};\n"],"names":["MenuList","width","onDropdownItemClick","options","parents","allowParentSelection","maxLevels","hideGroupLabel","currentLevel","version","renderNestedMenu","nestedOptions","nestedParents","nestedCurrentLevel","jsx","StyledMenuList","option","index","MenuItem","GroupedMenuList"],"mappings":";;;;AAMO,MAAMA,IAaR,CAAC;AAAA,EACL,OAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,SAAAC;AACD,MAAM;AACL,QAAMC,IAAqC,CAC1CC,GACAC,GACAC,MAEA,gBAAAC;AAAA,IAACd;AAAA,IAAA;AAAA,MACA,OAAAC;AAAA,MACA,qBAAAC;AAAA,MACA,SAASS;AAAA,MACT,SAASC;AAAA,MACT,sBAAAP;AAAA,MACA,WAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,cAAcM;AAAA,MACd,SAAAJ;AAAA,IAAA;AAAA,EAAA;AAIF,2BACEM,GAAA,EACC,UAAAZ,EAAQ,IAAI,CAACa,GAAQC,MAAU;AAC/B,QAAI,WAAWD;AACd,aACC,gBAAAF;AAAA,QAACI;AAAA,QAAA;AAAA,UAEA,OAAAjB;AAAA,UACA,qBAAAC;AAAA,UACA,QAAAc;AAAA,UACA,SAAAZ;AAAA,UACA,sBAAAC;AAAA,UACA,WAAAC;AAAA,UACA,cAAAE;AAAA,UACA,kBAAAE;AAAA,UACA,SAAAD;AAAA,QAAA;AAAA,QATKQ;AAAA,MAAA;QAYG,aAAaD,KAAUA,EAAO,QAAQ,SAAS;AACzD,aACC,gBAAAF;AAAA,QAACK;AAAA,QAAA;AAAA,UAEA,OAAAlB;AAAA,UACA,qBAAAC;AAAA,UACA,QAAAc;AAAA,UACA,SAAAZ;AAAA,UACA,sBAAAC;AAAA,UACA,WAAAC;AAAA,UACA,gBAAAC;AAAA,UACA,cAAAC;AAAA,UACA,kBAAAE;AAAA,UACA,SAAAD;AAAA,QAAA;AAAA,QAVKQ;AAAA,MAAA;AAAA,EAcT,CAAC,EAAA,CACF;AAEF;"}

package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.js

@@ -1,43 +1,44 @@
-import { jsx as t, jsxs as E } from "react/jsx-runtime";
-import O, { useState as j, useEffect as h } from "react";
+import { jsx as t, jsxs as j } from "react/jsx-runtime";
+import v, { useState as z, useEffect as p } from "react";
 import { ZeroState as A } from "../zeroState/ZeroState.js";
-import { COLORS as F } from "../../constants/Theme.js";
-import { SearchBox as M } from "../dropdown/OpenedDropdown/components/searchbox/SearchBox.js";
-import { MenuList as N } from "./MenuList.js";
-import { DropdownContainer as _, OptionsContainer as q, NoResultsContainer as z } from "./MultiLevelDropdown.styled.js";
-import { Floater as B } from "../floater/floater.js";
-const Q = ({
-  options: n,
+import { COLORS as S } from "../../constants/Theme.js";
+import { SearchBox as F } from "../dropdown/OpenedDropdown/components/searchbox/SearchBox.js";
+import { MenuList as M } from "./MenuList.js";
+import { DropdownContainer as _, OptionsContainer as q, NoResultsContainer as B } from "./MultiLevelDropdown.styled.js";
+import { Floater as H } from "../floater/floater.js";
+const U = ({
+  options: l,
   width: i,
-  isSearchable: v,
-  onDropdownItemClick: y,
-  refElement: L,
-  topOffset: S,
-  leftOffset: C,
+  isSearchable: L,
+  onDropdownItemClick: b,
+  refElement: w,
+  topOffset: C,
+  leftOffset: R,
   isDropdownOpen: u,
-  onDropdownOutsideClick: l,
-  allowParentSelection: R,
-  maxLevels: b,
-  hideGroupLabel: w
+  onDropdownOutsideClick: o,
+  allowParentSelection: E,
+  maxLevels: N,
+  hideGroupLabel: O,
+  version: n = "1.0"
 }) => {
-  const c = O.useRef(null), [f, m] = j(n), p = (d) => {
-    const o = Array.isArray(n) ? [...n] : [], g = [];
-    for (; o.length > 0; ) {
-      const e = o.shift();
-      e && e.label.toLowerCase().includes(d.toLowerCase()) && g.push(e), e && "children" in e && e.children ? o.push(...e.children) : e && "options" in e && e.options && o.push(...e.options);
+  const d = v.useRef(null), [f, m] = z(l), x = (a) => {
+    const c = Array.isArray(l) ? [...l] : [], y = [];
+    for (; c.length > 0; ) {
+      const e = c.shift();
+      e && e.label.toLowerCase().includes(a.toLowerCase()) && y.push(e), e && "children" in e && e.children ? c.push(...e.children) : e && "options" in e && e.options && c.push(...e.options);
     }
-    const a = (e) => e.map((r) => {
-      if (g.includes(r))
+    const h = (e) => e.map((r) => {
+      if (y.includes(r))
         return r;
       if ("children" in r && r.children) {
-        const s = a(
+        const s = h(
           r.children
         );
         if (s.length > 0)
           return { ...r, children: s };
       }
       if ("options" in r && r.options) {
-        const s = a(
+        const s = h(
           r.options
         );
         if (s.length > 0)
@@ -45,54 +46,89 @@ const Q = ({
       }
       return null;
     }).filter((r) => r !== null);
-    m(a(n));
-  }, x = (d) => {
-    c.current && !c.current.contains(d.target) ? l && l(!0) : l && l(!1);
+    m(h(l));
+  }, g = (a) => {
+    d.current && !d.current.contains(a.target) ? o && o(!0) : o && o(!1);
   };
-  return h(() => {
-    u && p("");
-  }, [u]), h(() => (document.addEventListener("mousedown", x), () => {
-    document.removeEventListener("mousedown", x);
-  }), []), h(() => {
-    m(n);
-  }, [n]), /* @__PURE__ */ t(
-    B,
+  return p(() => {
+    u && x("");
+  }, [u]), p(() => (document.addEventListener("mousedown", g), () => {
+    document.removeEventListener("mousedown", g);
+  }), []), p(() => {
+    m(l);
+  }, [l]), /* @__PURE__ */ t(
+    H,
     {
-      refElement: L,
-      topOffset: S,
-      leftOffset: C,
+      refElement: w,
+      topOffset: C,
+      leftOffset: R,
       children: u && /* @__PURE__ */ t(
         "div",
         {
-          ref: c,
+          ref: d,
           style: {
-            backgroundColor: F.surface.standard,
+            backgroundColor: S.surface.standard,
             zIndex: 99999,
-            borderRadius: "8px",
+            borderRadius: n === "3.0" ? "4px" : "8px",
+            overflow: "hidden",
+            boxShadow: "0 2px 8px 0 rgba(0, 0, 0, 0.12)",
             whiteSpace: "normal"
           },
-          children: /* @__PURE__ */ E(_, { width: i, children: [
-            v && /* @__PURE__ */ t("div", { style: { padding: "4px", width: i ?? "200px" }, children: /* @__PURE__ */ t(M, { onSearch: p, version: "2.0" }) }),
-            /* @__PURE__ */ t(q, { width: i, children: (f ?? []).length > 0 && /* @__PURE__ */ t(
-              N,
+          children: /* @__PURE__ */ j(_, { width: i, version: n, children: [
+            L && /* @__PURE__ */ t(
+              "div",
+              {
+                style: {
+                  padding: n === "3.0" ? "0px" : "4px",
+                  width: i ?? "200px"
+                },
+                children: /* @__PURE__ */ t(
+                  F,
+                  {
+                    onSearch: x,
+                    version: n === "3.0" ? "3.0" : "2.0"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ t(q, { width: i, version: n, children: (f ?? []).length > 0 && /* @__PURE__ */ t(
+              M,
               {
                 width: i ?? "200px",
-                onDropdownItemClick: y,
+                onDropdownItemClick: b,
                 options: f,
                 parents: [],
-                allowParentSelection: R,
-                maxLevels: b,
-                hideGroupLabel: w,
-                currentLevel: 1
+                allowParentSelection: E,
+                maxLevels: N,
+                hideGroupLabel: O,
+                currentLevel: 1,
+                version: n
               }
             ) }),
-            (f ?? []).length === 0 && /* @__PURE__ */ t(z, { style: { width: i ?? "200px" }, children: /* @__PURE__ */ t(
-              A,
+            (f ?? []).length === 0 && /* @__PURE__ */ t(
+              B,
               {
-                title: "No results found!",
-                subTitle: "Sorry, we are unable to find any results for your search."
+                style: { width: i ?? "200px" },
+                version: n,
+                children: n === "3.0" ? /* @__PURE__ */ t(
+                  "span",
+                  {
+                    style: {
+                      fontSize: "12px",
+                      color: S.content.placeholder,
+                      lineHeight: "16px"
+                    },
+                    children: "No results found!"
+                  }
+                ) : /* @__PURE__ */ t(
+                  A,
+                  {
+                    title: "No results found!",
+                    subTitle: "Sorry, we are unable to find any results for your search."
+                  }
+                )
               }
-            ) })
+            )
           ] })
         }
       )
@@ -100,6 +136,6 @@ const Q = ({
   );
 };
 export {
-  Q as MultiLevelDropdown
+  U as MultiLevelDropdown
 };
 //# sourceMappingURL=MultiLevelDropdown.js.map

package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiLevelDropdown.js","sources":["../../../../src/components/multi-level-dropdown/MultiLevelDropdown.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { ZeroState } from '@src/components/zeroState/ZeroState';\nimport { COLORS } from '@src/constants/Theme';\nimport { SearchBox } from '../dropdown/OpenedDropdown/components/searchbox/SearchBox';\nimport { Floater } from '../floater';\nimport { MenuList } from './MenuList';\nimport {\n\tDropdownContainer,\n\tNoResultsContainer,\n\tOptionsContainer,\n} from './MultiLevelDropdown.styled';\nimport { MultiLevelDropdownOption, MultiLevelDropdownProps } from './type';\n\nexport const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({\n\toptions,\n\twidth,\n\tisSearchable,\n\tonDropdownItemClick,\n\trefElement,\n\ttopOffset,\n\tleftOffset,\n\tisDropdownOpen,\n\tonDropdownOutsideClick,\n\tallowParentSelection,\n\tmaxLevels,\n\thideGroupLabel,\n}) => {\n\tconst dropdownRef = React.useRef<HTMLDivElement>(null);\n\tconst [filteredOptions, setFilteredOptions] =\n\t\tuseState<MultiLevelDropdownOption[]>(options);\n\n\tconst search = (searchString: string) => {\n\t\tconst queue = Array.isArray(options) ? [...options] : [];\n\t\tconst result: MultiLevelDropdownOption[] = [];\n\n\t\twhile (queue.length > 0) {\n\t\t\tconst current = queue.shift();\n\t\t\tif (\n\t\t\t\tcurrent &&\n\t\t\t\tcurrent.label.toLowerCase().includes(searchString.toLowerCase())\n\t\t\t) {\n\t\t\t\tresult.push(current);\n\t\t\t}\n\t\t\tif (current && 'children' in current && current.children) {\n\t\t\t\tqueue.push(...current.children);\n\t\t\t} else if (current && 'options' in current && current.options) {\n\t\t\t\tqueue.push(...current.options);\n\t\t\t}\n\t\t}\n\n\t\tconst filterOptions = (options: MultiLevelDropdownOption[]) => {\n\t\t\treturn options\n\t\t\t\t.map((option: MultiLevelDropdownOption) => {\n\t\t\t\t\tif (result.includes(option)) {\n\t\t\t\t\t\treturn option;\n\t\t\t\t\t}\n\t\t\t\t\tif ('children' in option && option.children) {\n\t\t\t\t\t\tconst filteredChildren = filterOptions(\n\t\t\t\t\t\t\toption.children as MultiLevelDropdownOption[],\n\t\t\t\t\t\t);\n\t\t\t\t\t\tif (filteredChildren.length > 0) {\n\t\t\t\t\t\t\treturn { ...option, children: filteredChildren };\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tif ('options' in option && option.options) {\n\t\t\t\t\t\tconst filteredOptions = filterOptions(\n\t\t\t\t\t\t\toption.options as MultiLevelDropdownOption[],\n\t\t\t\t\t\t);\n\t\t\t\t\t\tif (filteredOptions.length > 0) {\n\t\t\t\t\t\t\treturn { ...option, options: filteredOptions };\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\treturn null;\n\t\t\t\t})\n\t\t\t\t.filter((option) => option !== null);\n\t\t};\n\n\t\tsetFilteredOptions(filterOptions(options) as MultiLevelDropdownOption[]);\n\t};\n\n\tconst handleClickOutside = (event: MouseEvent) => {\n\t\tif (\n\t\t\tdropdownRef.current &&\n\t\t\t!dropdownRef.current.contains(event.target as Node)\n\t\t) {\n\t\t\tif (onDropdownOutsideClick) {\n\t\t\t\tonDropdownOutsideClick(true);\n\t\t\t}\n\t\t} else {\n\t\t\tif (onDropdownOutsideClick) {\n\t\t\t\tonDropdownOutsideClick(false);\n\t\t\t}\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tif (isDropdownOpen) {\n\t\t\tsearch('');\n\t\t}\n\t}, [isDropdownOpen]);\n\n\tuseEffect(() => {\n\t\tdocument.addEventListener('mousedown', handleClickOutside);\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('mousedown', handleClickOutside);\n\t\t};\n\t}, []);\n\n\tuseEffect(() => {\n\t\tsetFilteredOptions(options);\n\t}, [options]);\n\n\treturn (\n\t\t<Floater\n\t\t\trefElement={refElement}\n\t\t\ttopOffset={topOffset}\n\t\t\tleftOffset={leftOffset}\n\t\t>\n\t\t\t{isDropdownOpen && (\n\t\t\t\t<div\n\t\t\t\t\tref={dropdownRef}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackgroundColor: COLORS.surface.standard,\n\t\t\t\t\t\tzIndex: 99999,\n\t\t\t\t\t\tborderRadius: '8px',\n\t\t\t\t\t\twhiteSpace: 'normal',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<DropdownContainer width={width}>\n\t\t\t\t\t\t{isSearchable && (\n\t\t\t\t\t\t\t<div style={{ padding: '4px', width: width ?? '200px' }}>\n\t\t\t\t\t\t\t\t<SearchBox onSearch={search} version={'2.0'} />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<OptionsContainer width={width}>\n\t\t\t\t\t\t\t{(filteredOptions ?? []).length > 0 && (\n\t\t\t\t\t\t\t\t<MenuList\n\t\t\t\t\t\t\t\t\twidth={width ?? '200px'}\n\t\t\t\t\t\t\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\t\t\t\t\t\t\toptions={filteredOptions}\n\t\t\t\t\t\t\t\t\tparents={[]}\n\t\t\t\t\t\t\t\t\tallowParentSelection={allowParentSelection}\n\t\t\t\t\t\t\t\t\tmaxLevels={maxLevels}\n\t\t\t\t\t\t\t\t\thideGroupLabel={hideGroupLabel}\n\t\t\t\t\t\t\t\t\tcurrentLevel={1}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</OptionsContainer>\n\n\t\t\t\t\t\t{(filteredOptions ?? []).length === 0 && (\n\t\t\t\t\t\t\t<NoResultsContainer style={{ width: width ?? '200px' }}>\n\t\t\t\t\t\t\t\t<ZeroState\n\t\t\t\t\t\t\t\t\ttitle=\"No results found!\"\n\t\t\t\t\t\t\t\t\tsubTitle={`Sorry, we are unable to find any results for your search.`}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</NoResultsContainer>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</DropdownContainer>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</Floater>\n\t);\n};\n"],"names":["MultiLevelDropdown","options","width","isSearchable","onDropdownItemClick","refElement","topOffset","leftOffset","isDropdownOpen","onDropdownOutsideClick","allowParentSelection","maxLevels","hideGroupLabel","dropdownRef","React","filteredOptions","setFilteredOptions","useState","search","searchString","queue","result","current","filterOptions","option","filteredChildren","handleClickOutside","event","useEffect","jsx","Floater","COLORS","jsxs","DropdownContainer","SearchBox","OptionsContainer","MenuList","NoResultsContainer","ZeroState"],"mappings":"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"}
+{"version":3,"file":"MultiLevelDropdown.js","sources":["../../../../src/components/multi-level-dropdown/MultiLevelDropdown.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { ZeroState } from '@src/components/zeroState/ZeroState';\nimport { COLORS } from '@src/constants/Theme';\nimport { SearchBox } from '../dropdown/OpenedDropdown/components/searchbox/SearchBox';\nimport { Floater } from '../floater';\nimport { MenuList } from './MenuList';\nimport {\n\tDropdownContainer,\n\tNoResultsContainer,\n\tOptionsContainer,\n} from './MultiLevelDropdown.styled';\nimport { MultiLevelDropdownOption, MultiLevelDropdownProps } from './type';\n\nexport const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({\n\toptions,\n\twidth,\n\tisSearchable,\n\tonDropdownItemClick,\n\trefElement,\n\ttopOffset,\n\tleftOffset,\n\tisDropdownOpen,\n\tonDropdownOutsideClick,\n\tallowParentSelection,\n\tmaxLevels,\n\thideGroupLabel,\n\tversion = '1.0',\n}) => {\n\tconst dropdownRef = React.useRef<HTMLDivElement>(null);\n\tconst [filteredOptions, setFilteredOptions] =\n\t\tuseState<MultiLevelDropdownOption[]>(options);\n\n\tconst search = (searchString: string) => {\n\t\tconst queue = Array.isArray(options) ? [...options] : [];\n\t\tconst result: MultiLevelDropdownOption[] = [];\n\n\t\twhile (queue.length > 0) {\n\t\t\tconst current = queue.shift();\n\t\t\tif (\n\t\t\t\tcurrent &&\n\t\t\t\tcurrent.label.toLowerCase().includes(searchString.toLowerCase())\n\t\t\t) {\n\t\t\t\tresult.push(current);\n\t\t\t}\n\t\t\tif (current && 'children' in current && current.children) {\n\t\t\t\tqueue.push(...current.children);\n\t\t\t} else if (current && 'options' in current && current.options) {\n\t\t\t\tqueue.push(...current.options);\n\t\t\t}\n\t\t}\n\n\t\tconst filterOptions = (options: MultiLevelDropdownOption[]) => {\n\t\t\treturn options\n\t\t\t\t.map((option: MultiLevelDropdownOption) => {\n\t\t\t\t\tif (result.includes(option)) {\n\t\t\t\t\t\treturn option;\n\t\t\t\t\t}\n\t\t\t\t\tif ('children' in option && option.children) {\n\t\t\t\t\t\tconst filteredChildren = filterOptions(\n\t\t\t\t\t\t\toption.children as MultiLevelDropdownOption[],\n\t\t\t\t\t\t);\n\t\t\t\t\t\tif (filteredChildren.length > 0) {\n\t\t\t\t\t\t\treturn { ...option, children: filteredChildren };\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tif ('options' in option && option.options) {\n\t\t\t\t\t\tconst filteredOptions = filterOptions(\n\t\t\t\t\t\t\toption.options as MultiLevelDropdownOption[],\n\t\t\t\t\t\t);\n\t\t\t\t\t\tif (filteredOptions.length > 0) {\n\t\t\t\t\t\t\treturn { ...option, options: filteredOptions };\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\treturn null;\n\t\t\t\t})\n\t\t\t\t.filter((option) => option !== null);\n\t\t};\n\n\t\tsetFilteredOptions(filterOptions(options) as MultiLevelDropdownOption[]);\n\t};\n\n\tconst handleClickOutside = (event: MouseEvent) => {\n\t\tif (\n\t\t\tdropdownRef.current &&\n\t\t\t!dropdownRef.current.contains(event.target as Node)\n\t\t) {\n\t\t\tif (onDropdownOutsideClick) {\n\t\t\t\tonDropdownOutsideClick(true);\n\t\t\t}\n\t\t} else {\n\t\t\tif (onDropdownOutsideClick) {\n\t\t\t\tonDropdownOutsideClick(false);\n\t\t\t}\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tif (isDropdownOpen) {\n\t\t\tsearch('');\n\t\t}\n\t}, [isDropdownOpen]);\n\n\tuseEffect(() => {\n\t\tdocument.addEventListener('mousedown', handleClickOutside);\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('mousedown', handleClickOutside);\n\t\t};\n\t}, []);\n\n\tuseEffect(() => {\n\t\tsetFilteredOptions(options);\n\t}, [options]);\n\n\treturn (\n\t\t<Floater\n\t\t\trefElement={refElement}\n\t\t\ttopOffset={topOffset}\n\t\t\tleftOffset={leftOffset}\n\t\t>\n\t\t\t{isDropdownOpen && (\n\t\t\t\t<div\n\t\t\t\t\tref={dropdownRef}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackgroundColor: COLORS.surface.standard,\n\t\t\t\t\t\tzIndex: 99999,\n\t\t\t\t\t\tborderRadius: version === '3.0' ? '4px' : '8px',\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\tboxShadow: '0 2px 8px 0 rgba(0, 0, 0, 0.12)',\n\t\t\t\t\t\twhiteSpace: 'normal',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<DropdownContainer width={width} version={version}>\n\t\t\t\t\t\t{isSearchable && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tpadding: version === '3.0' ? '0px' : '4px',\n\t\t\t\t\t\t\t\t\twidth: width ?? '200px',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<SearchBox\n\t\t\t\t\t\t\t\t\tonSearch={search}\n\t\t\t\t\t\t\t\t\tversion={version === '3.0' ? '3.0' : '2.0'}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<OptionsContainer width={width} version={version}>\n\t\t\t\t\t\t\t{(filteredOptions ?? []).length > 0 && (\n\t\t\t\t\t\t\t\t<MenuList\n\t\t\t\t\t\t\t\t\twidth={width ?? '200px'}\n\t\t\t\t\t\t\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\t\t\t\t\t\t\toptions={filteredOptions}\n\t\t\t\t\t\t\t\t\tparents={[]}\n\t\t\t\t\t\t\t\t\tallowParentSelection={allowParentSelection}\n\t\t\t\t\t\t\t\t\tmaxLevels={maxLevels}\n\t\t\t\t\t\t\t\t\thideGroupLabel={hideGroupLabel}\n\t\t\t\t\t\t\t\t\tcurrentLevel={1}\n\t\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</OptionsContainer>\n\n\t\t\t\t\t\t{(filteredOptions ?? []).length === 0 && (\n\t\t\t\t\t\t\t<NoResultsContainer\n\t\t\t\t\t\t\t\tstyle={{ width: width ?? '200px' }}\n\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{version === '3.0' ? (\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\tfontSize: '12px',\n\t\t\t\t\t\t\t\t\t\t\tcolor: COLORS.content.placeholder,\n\t\t\t\t\t\t\t\t\t\t\tlineHeight: '16px',\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\tNo results found!\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<ZeroState\n\t\t\t\t\t\t\t\t\t\ttitle=\"No results found!\"\n\t\t\t\t\t\t\t\t\t\tsubTitle={`Sorry, we are unable to find any results for your search.`}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</NoResultsContainer>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</DropdownContainer>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</Floater>\n\t);\n};\n"],"names":["MultiLevelDropdown","options","width","isSearchable","onDropdownItemClick","refElement","topOffset","leftOffset","isDropdownOpen","onDropdownOutsideClick","allowParentSelection","maxLevels","hideGroupLabel","version","dropdownRef","React","filteredOptions","setFilteredOptions","useState","search","searchString","queue","result","current","filterOptions","option","filteredChildren","handleClickOutside","event","useEffect","jsx","Floater","COLORS","jsxs","DropdownContainer","SearchBox","OptionsContainer","MenuList","NoResultsContainer","ZeroState"],"mappings":"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"}