@bikdotai/bik-component-library 0.0.821-beta.13 → 0.0.821-beta.14

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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"}

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

@@ -1,25 +1,35 @@
 export declare const DropdownContainer: import('styled-components').StyledComponent<"div", any, {
     width?: string | undefined;
+    version?: "1.0" | "2.0" | "3.0" | undefined;
 }, never>;
 export declare const OptionsContainer: import('styled-components').StyledComponent<"div", any, {
     width?: string | undefined;
+    version?: "1.0" | "2.0" | "3.0" | undefined;
 }, never>;
 export declare const NoResultsContainer: import('styled-components').StyledComponent<"div", any, {
     width?: string | undefined;
+    version?: "1.0" | "2.0" | "3.0" | undefined;
+}, never>;
+export declare const GroupedMenuListContainer: import('styled-components').StyledComponent<"div", any, {
+    version?: "1.0" | "2.0" | "3.0" | undefined;
 }, never>;
-export declare const GroupedMenuListContainer: import('styled-components').StyledComponent<"div", any, {}, never>;
 export declare const StyledMenuList: import('styled-components').StyledComponent<"div", any, {}, never>;
-export declare const MenuItemWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const MenuItemWrapper: import('styled-components').StyledComponent<"div", any, {
+    version?: "1.0" | "2.0" | "3.0" | undefined;
+}, never>;
 export interface MenuItemContainerProps {
     isSelected?: boolean;
     isHovered?: boolean;
     isSubMenuOpen?: boolean;
     isDisabled?: boolean;
+    version?: '1.0' | '2.0' | '3.0';
 }
 export declare const MenuItemContainer: import('styled-components').StyledComponent<"div", any, MenuItemContainerProps, never>;
 export declare const ContentContainer: import('styled-components').StyledComponent<"div", any, {}, never>;
 export declare const SubMenuWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
-export declare const SubMenuListContainer: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const SubMenuListContainer: import('styled-components').StyledComponent<"div", any, {
+    version?: "1.0" | "2.0" | "3.0" | undefined;
+}, never>;
 export declare const LeadingIconContainer: import('styled-components').StyledComponent<"div", any, {}, never>;
 export declare const TrailingIconContainer: import('styled-components').StyledComponent<"div", any, {}, never>;
 export declare const SubMenuContainer: import('styled-components').StyledComponent<"div", any, {

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

@@ -1,117 +1,126 @@
-import e from "styled-components";
-import { COLORS as i } from "../../constants/Theme.js";
-const s = e.div`
+import n from "styled-components";
+import { COLORS as e } from "../../constants/Theme.js";
+const c = n.div`
 	position: relative;
-	border-radius: 8px;
+	border-radius: ${({ version: t }) => t === "3.0" ? 4 : 8}px;
 	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
-	padding-bottom: 4px;
-`, c = e.div`
+	padding-bottom: ${({ version: t }) => t === "3.0" ? 0 : 4}px;
+`, x = n.div`
 	width: ${({ width: t }) => t || "200px"};
 	max-width: 300px;
 	max-height: 280px;
 	overflow-y: scroll;
-	padding: 4px 0 0;
+	padding: ${({ version: t }) => t === "3.0" ? "0" : "4px 0 0"};
 	&::-webkit-scrollbar {
 		width: 0px;
 	}
-`, x = e.div`
-	margin-top: 64px;
-	height: 200px;
+`, l = n.div`
+	margin-top: ${({ version: t }) => t === "3.0" ? 0 : 64}px;
+	height: ${({ version: t }) => t === "3.0" ? 236 : 200}px;
 	width: ${({ width: t }) => t || "200px"};
-`, l = e.div`
+	display: ${({ version: t }) => t === "3.0" ? "flex" : "block"};
+	align-items: center;
+	justify-content: center;
+`, u = n.div`
 	width: 100%;
 	justify-content: center;
 	cursor: pointer;
 	align-items: center;
 	justify-content: space-between;
-	margin: 4px 0;
-`, u = e.div`
+	margin: ${({ version: t }) => t === "3.0" ? "0" : "4px 0"};
+`, g = n.div`
 	z-index: 1000;
 	position: relative;
 	margin: 0px;
 	padding: 0px;
 	width: 100%;
-`, g = e.div`
+`, b = n.div`
 	position: relative;
-	padding: 1px 4px;
+	padding: ${({ version: t }) => t === "3.0" ? "0px" : "1px 4px"};
 	cursor: pointer;
 	width: 100%;
 	&:hover > .submenu,
 	&:focus-within > .submenu {
 		display: block;
 	}
-`, h = e.div`
+`, h = n.div`
 	position: relative;
-	padding: 4px 8px 4px 8px;
+	padding: ${({ version: t }) => t === "3.0" ? "8px" : "4px 8px"};
 	transition: background-color 0.2s;
 	width: 100%;
-	border-radius: 8px;
+	border-radius: ${({ version: t }) => t === "3.0" ? 0 : 8}px;
 	justify-content: center;
-	background-color: ${({ isSelected: t, isHovered: n, isSubMenuOpen: o, isDisabled: r }) => r ? i.surface.standard : t || o ? i.background.positive.light : n ? i.surface.hovered : i.surface.standard};
-	color: ${({ isSelected: t, isSubMenuOpen: n }) => t || n ? i.content.positive : i.content.primary};
+	background-color: ${({
+  isSelected: t,
+  isHovered: i,
+  isSubMenuOpen: o,
+  isDisabled: r,
+  version: a
+}) => r ? e.surface.standard : t || o ? a === "3.0" ? e.background.brandLight : e.background.positive.light : i ? e.surface.hovered : e.surface.standard};
+	color: ${({ isSelected: t, isSubMenuOpen: i, version: o }) => t || i ? o === "3.0" ? e.text.primary : e.content.positive : e.content.primary};
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
 
 	&:hover {
-		background-color: ${({ isSelected: t, isDisabled: n }) => n ? i.surface.standard : t ? i.background.positive.light : i.surface.hovered};
+		background-color: ${({ isSelected: t, isDisabled: i, version: o }) => i ? e.surface.standard : t ? o === "3.0" ? e.background.brandLight : e.background.positive.light : e.surface.hovered};
 	}
-`, b = e.div`
+`, f = n.div`
 	display: flex;
 	align-items: center;
 	gap: 8px;
-`, p = e.div`
+`, p = n.div`
 	z-index: 1001;
 	position: fixed;
 	border-left: 4px solid transparent;
-`, f = e.div`
+`, m = n.div`
 	margin: 4px;
-	background-color: ${i.surface.standard};
+	background-color: ${e.surface.standard};
 	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
-	border-radius: 8px;
-	padding-top: 4px;
+	border-radius: ${({ version: t }) => t === "3.0" ? 4 : 8}px;
+	padding-top: ${({ version: t }) => t === "3.0" ? 0 : 4}px;
 	max-height: 480px;
-	padding-bottom: 4px;
+	padding-bottom: ${({ version: t }) => t === "3.0" ? 0 : 4}px;
 	overflow-y: scroll;
 
 	&::-webkit-scrollbar {
 		display: none;
 	}
-`, v = e.div`
+`, v = n.div`
 	width: 16px;
 	height: 16px;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	margin-right: 4px;
-`, m = e.div`
+`, $ = n.div`
 	width: 16px;
 	height: 16px;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	margin-left: 4px;
-`, w = e.div`
+`, w = n.div`
 	width: ${(t) => t.width};
-`, y = e(p)`
+`, y = n(p)`
 	width: ${(t) => t.width};
 	top: ${(t) => t.top}px;
 	left: ${(t) => t.left}px;
 `;
 export {
-  b as ContentContainer,
-  s as DropdownContainer,
-  l as GroupedMenuListContainer,
+  f as ContentContainer,
+  c as DropdownContainer,
+  u as GroupedMenuListContainer,
   v as LeadingIconContainer,
   h as MenuItemContainer,
-  g as MenuItemWrapper,
-  x as NoResultsContainer,
-  c as OptionsContainer,
-  u as StyledMenuList,
+  b as MenuItemWrapper,
+  l as NoResultsContainer,
+  x as OptionsContainer,
+  g as StyledMenuList,
   y as StyledSubMenuWrapper,
   w as SubMenuContainer,
-  f as SubMenuListContainer,
+  m as SubMenuListContainer,
   p as SubMenuWrapper,
-  m as TrailingIconContainer
+  $ as TrailingIconContainer
 };
 //# sourceMappingURL=MultiLevelDropdown.styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MultiLevelDropdown.styled.js","sources":["../../../../src/components/multi-level-dropdown/MultiLevelDropdown.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const DropdownContainer = styled.div<{ width?: string }>`\n\tposition: relative;\n\tborder-radius: 8px;\n\tbox-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);\n\tpadding-bottom: 4px;\n`;\n\nexport const OptionsContainer = styled.div<{ width?: string }>`\n\twidth: ${({ width }) => (width ? width : '200px')};\n\tmax-width: 300px;\n\tmax-height: 280px;\n\toverflow-y: scroll;\n\tpadding: 4px 0 0;\n\t&::-webkit-scrollbar {\n\t\twidth: 0px;\n\t}\n`;\n\nexport const NoResultsContainer = styled.div<{ width?: string }>`\n\tmargin-top: 64px;\n\theight: 200px;\n\twidth: ${({ width }) => (width ? width : '200px')};\n`;\n\nexport const GroupedMenuListContainer = styled.div`\n\twidth: 100%;\n\tjustify-content: center;\n\tcursor: pointer;\n\talign-items: center;\n\tjustify-content: space-between;\n\tmargin: 4px 0;\n`;\n\nexport const StyledMenuList = styled.div`\n\tz-index: 1000;\n\tposition: relative;\n\tmargin: 0px;\n\tpadding: 0px;\n\twidth: 100%;\n`;\n\nexport const MenuItemWrapper = styled.div`\n\tposition: relative;\n\tpadding: 1px 4px;\n\tcursor: pointer;\n\twidth: 100%;\n\t&:hover > .submenu,\n\t&:focus-within > .submenu {\n\t\tdisplay: block;\n\t}\n`;\n\nexport interface MenuItemContainerProps {\n\tisSelected?: boolean;\n\tisHovered?: boolean;\n\tisSubMenuOpen?: boolean;\n\tisDisabled?: boolean;\n}\n\nexport const MenuItemContainer = styled.div<MenuItemContainerProps>`\n\tposition: relative;\n\tpadding: 4px 8px 4px 8px;\n\ttransition: background-color 0.2s;\n\twidth: 100%;\n\tborder-radius: 8px;\n\tjustify-content: center;\n\tbackground-color: ${({ isSelected, isHovered, isSubMenuOpen, isDisabled }) =>\n\t\tisDisabled\n\t\t\t? COLORS.surface.standard\n\t\t\t: isSelected || isSubMenuOpen\n\t\t\t? COLORS.background.positive.light\n\t\t\t: isHovered\n\t\t\t? COLORS.surface.hovered\n\t\t\t: COLORS.surface.standard};\n\tcolor: ${({ isSelected, isSubMenuOpen }) =>\n\t\tisSelected || isSubMenuOpen\n\t\t\t? COLORS.content.positive\n\t\t\t: COLORS.content.primary};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\n\t&:hover {\n\t\tbackground-color: ${({ isSelected, isDisabled }) =>\n\t\t\tisDisabled\n\t\t\t\t? COLORS.surface.standard\n\t\t\t\t: isSelected\n\t\t\t\t? COLORS.background.positive.light\n\t\t\t\t: COLORS.surface.hovered};\n\t}\n`;\n\nexport const ContentContainer = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n`;\n\nexport const SubMenuWrapper = styled.div`\n\tz-index: 1001;\n\tposition: fixed;\n\tborder-left: 4px solid transparent;\n`;\n\nexport const SubMenuListContainer = styled.div`\n\tmargin: 4px;\n\tbackground-color: ${COLORS.surface.standard};\n\tbox-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);\n\tborder-radius: 8px;\n\tpadding-top: 4px;\n\tmax-height: 480px;\n\tpadding-bottom: 4px;\n\toverflow-y: scroll;\n\n\t&::-webkit-scrollbar {\n\t\tdisplay: none;\n\t}\n`;\n\nexport const LeadingIconContainer = styled.div`\n\twidth: 16px;\n\theight: 16px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmargin-right: 4px;\n`;\n\nexport const TrailingIconContainer = styled.div`\n\twidth: 16px;\n\theight: 16px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmargin-left: 4px;\n`;\n\nexport const SubMenuContainer = styled.div<{ width: string }>`\n\twidth: ${(props) => props.width};\n`;\n\nexport const StyledSubMenuWrapper = styled(SubMenuWrapper)<{\n\twidth: string;\n\ttop: number;\n\tleft: number;\n}>`\n\twidth: ${(props) => props.width};\n\ttop: ${(props) => props.top}px;\n\tleft: ${(props) => props.left}px;\n`;\n"],"names":["DropdownContainer","styled","OptionsContainer","width","NoResultsContainer","GroupedMenuListContainer","StyledMenuList","MenuItemWrapper","MenuItemContainer","isSelected","isHovered","isSubMenuOpen","isDisabled","COLORS","ContentContainer","SubMenuWrapper","SubMenuListContainer","LeadingIconContainer","TrailingIconContainer","SubMenuContainer","props","StyledSubMenuWrapper"],"mappings":";;AAGO,MAAMA,IAAoBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAO3BC,IAAmBD,EAAO;AAAA,UAC7B,CAAC,EAAE,OAAAE,EAAA,MAAaA,KAAgB,OAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAUrCC,IAAqBH,EAAO;AAAA;AAAA;AAAA,UAG/B,CAAC,EAAE,OAAAE,EAAA,MAAaA,KAAgB,OAAQ;AAAA,GAGrCE,IAA2BJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASlCK,IAAiBL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQxBM,IAAkBN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAkBzBO,IAAoBP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAOnB,CAAC,EAAE,YAAAQ,GAAY,WAAAC,GAAW,eAAAC,GAAe,YAAAC,QAC5DA,IACGC,EAAO,QAAQ,WACfJ,KAAcE,IACdE,EAAO,WAAW,SAAS,QAC3BH,IACAG,EAAO,QAAQ,UACfA,EAAO,QAAQ,QAAQ;AAAA,UAClB,CAAC,EAAE,YAAAJ,GAAY,eAAAE,EAAA,MACvBF,KAAcE,IACXE,EAAO,QAAQ,WACfA,EAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAML,CAAC,EAAE,YAAAJ,GAAY,YAAAG,EAAA,MAClCA,IACGC,EAAO,QAAQ,WACfJ,IACAI,EAAO,WAAW,SAAS,QAC3BA,EAAO,QAAQ,OAAO;AAAA;AAAA,GAIfC,IAAmBb,EAAO;AAAA;AAAA;AAAA;AAAA,GAM1Bc,IAAiBd,EAAO;AAAA;AAAA;AAAA;AAAA,GAMxBe,IAAuBf,EAAO;AAAA;AAAA,qBAEtBY,EAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAa/BI,IAAuBhB,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAS9BiB,IAAwBjB,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAS/BkB,IAAmBlB,EAAO;AAAA,UAC7B,CAACmB,MAAUA,EAAM,KAAK;AAAA,GAGnBC,IAAuBpB,EAAOc,CAAc;AAAA,UAK/C,CAACK,MAAUA,EAAM,KAAK;AAAA,QACxB,CAACA,MAAUA,EAAM,GAAG;AAAA,SACnB,CAACA,MAAUA,EAAM,IAAI;AAAA;"}
+{"version":3,"file":"MultiLevelDropdown.styled.js","sources":["../../../../src/components/multi-level-dropdown/MultiLevelDropdown.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const DropdownContainer = styled.div<{\n\twidth?: string;\n\tversion?: '1.0' | '2.0' | '3.0';\n}>`\n\tposition: relative;\n\tborder-radius: ${({ version }) => (version === '3.0' ? 4 : 8)}px;\n\tbox-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);\n\tpadding-bottom: ${({ version }) => (version === '3.0' ? 0 : 4)}px;\n`;\n\nexport const OptionsContainer = styled.div<{\n\twidth?: string;\n\tversion?: '1.0' | '2.0' | '3.0';\n}>`\n\twidth: ${({ width }) => (width ? width : '200px')};\n\tmax-width: 300px;\n\tmax-height: 280px;\n\toverflow-y: scroll;\n\tpadding: ${({ version }) => (version === '3.0' ? '0' : '4px 0 0')};\n\t&::-webkit-scrollbar {\n\t\twidth: 0px;\n\t}\n`;\n\nexport const NoResultsContainer = styled.div<{\n\twidth?: string;\n\tversion?: '1.0' | '2.0' | '3.0';\n}>`\n\tmargin-top: ${({ version }) => (version === '3.0' ? 0 : 64)}px;\n\theight: ${({ version }) => (version === '3.0' ? 236 : 200)}px;\n\twidth: ${({ width }) => (width ? width : '200px')};\n\tdisplay: ${({ version }) => (version === '3.0' ? 'flex' : 'block')};\n\talign-items: center;\n\tjustify-content: center;\n`;\n\nexport const GroupedMenuListContainer = styled.div<{\n\tversion?: '1.0' | '2.0' | '3.0';\n}>`\n\twidth: 100%;\n\tjustify-content: center;\n\tcursor: pointer;\n\talign-items: center;\n\tjustify-content: space-between;\n\tmargin: ${({ version }) => (version === '3.0' ? '0' : '4px 0')};\n`;\n\nexport const StyledMenuList = styled.div`\n\tz-index: 1000;\n\tposition: relative;\n\tmargin: 0px;\n\tpadding: 0px;\n\twidth: 100%;\n`;\n\nexport const MenuItemWrapper = styled.div<{ version?: '1.0' | '2.0' | '3.0' }>`\n\tposition: relative;\n\tpadding: ${({ version }) => (version === '3.0' ? '0px' : '1px 4px')};\n\tcursor: pointer;\n\twidth: 100%;\n\t&:hover > .submenu,\n\t&:focus-within > .submenu {\n\t\tdisplay: block;\n\t}\n`;\n\nexport interface MenuItemContainerProps {\n\tisSelected?: boolean;\n\tisHovered?: boolean;\n\tisSubMenuOpen?: boolean;\n\tisDisabled?: boolean;\n\tversion?: '1.0' | '2.0' | '3.0';\n}\n\nexport const MenuItemContainer = styled.div<MenuItemContainerProps>`\n\tposition: relative;\n\tpadding: ${({ version }) => (version === '3.0' ? '8px' : '4px 8px')};\n\ttransition: background-color 0.2s;\n\twidth: 100%;\n\tborder-radius: ${({ version }) => (version === '3.0' ? 0 : 8)}px;\n\tjustify-content: center;\n\tbackground-color: ${({\n\t\tisSelected,\n\t\tisHovered,\n\t\tisSubMenuOpen,\n\t\tisDisabled,\n\t\tversion,\n\t}) =>\n\t\tisDisabled\n\t\t\t? COLORS.surface.standard\n\t\t\t: isSelected || isSubMenuOpen\n\t\t\t? version === '3.0'\n\t\t\t\t? COLORS.background.brandLight\n\t\t\t\t: COLORS.background.positive.light\n\t\t\t: isHovered\n\t\t\t? COLORS.surface.hovered\n\t\t\t: COLORS.surface.standard};\n\tcolor: ${({ isSelected, isSubMenuOpen, version }) =>\n\t\tisSelected || isSubMenuOpen\n\t\t\t? version === '3.0'\n\t\t\t\t? COLORS.text.primary\n\t\t\t\t: COLORS.content.positive\n\t\t\t: COLORS.content.primary};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\n\t&:hover {\n\t\tbackground-color: ${({ isSelected, isDisabled, version }) =>\n\t\t\tisDisabled\n\t\t\t\t? COLORS.surface.standard\n\t\t\t\t: isSelected\n\t\t\t\t? version === '3.0'\n\t\t\t\t\t? COLORS.background.brandLight\n\t\t\t\t\t: COLORS.background.positive.light\n\t\t\t\t: COLORS.surface.hovered};\n\t}\n`;\n\nexport const ContentContainer = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n`;\n\nexport const SubMenuWrapper = styled.div`\n\tz-index: 1001;\n\tposition: fixed;\n\tborder-left: 4px solid transparent;\n`;\n\nexport const SubMenuListContainer = styled.div<{\n\tversion?: '1.0' | '2.0' | '3.0';\n}>`\n\tmargin: 4px;\n\tbackground-color: ${COLORS.surface.standard};\n\tbox-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);\n\tborder-radius: ${({ version }) => (version === '3.0' ? 4 : 8)}px;\n\tpadding-top: ${({ version }) => (version === '3.0' ? 0 : 4)}px;\n\tmax-height: 480px;\n\tpadding-bottom: ${({ version }) => (version === '3.0' ? 0 : 4)}px;\n\toverflow-y: scroll;\n\n\t&::-webkit-scrollbar {\n\t\tdisplay: none;\n\t}\n`;\n\nexport const LeadingIconContainer = styled.div`\n\twidth: 16px;\n\theight: 16px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmargin-right: 4px;\n`;\n\nexport const TrailingIconContainer = styled.div`\n\twidth: 16px;\n\theight: 16px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmargin-left: 4px;\n`;\n\nexport const SubMenuContainer = styled.div<{ width: string }>`\n\twidth: ${(props) => props.width};\n`;\n\nexport const StyledSubMenuWrapper = styled(SubMenuWrapper)<{\n\twidth: string;\n\ttop: number;\n\tleft: number;\n}>`\n\twidth: ${(props) => props.width};\n\ttop: ${(props) => props.top}px;\n\tleft: ${(props) => props.left}px;\n`;\n"],"names":["DropdownContainer","styled","version","OptionsContainer","width","NoResultsContainer","GroupedMenuListContainer","StyledMenuList","MenuItemWrapper","MenuItemContainer","isSelected","isHovered","isSubMenuOpen","isDisabled","COLORS","ContentContainer","SubMenuWrapper","SubMenuListContainer","LeadingIconContainer","TrailingIconContainer","SubMenuContainer","props","StyledSubMenuWrapper"],"mappings":";;AAGO,MAAMA,IAAoBC,EAAO;AAAA;AAAA,kBAKtB,CAAC,EAAE,SAAAC,EAAA,MAAeA,MAAY,QAAQ,IAAI,CAAE;AAAA;AAAA,mBAE3C,CAAC,EAAE,SAAAA,EAAA,MAAeA,MAAY,QAAQ,IAAI,CAAE;AAAA,GAGlDC,IAAmBF,EAAO;AAAA,UAI7B,CAAC,EAAE,OAAAG,EAAA,MAAaA,KAAgB,OAAQ;AAAA;AAAA;AAAA;AAAA,YAItC,CAAC,EAAE,SAAAF,EAAA,MAAeA,MAAY,QAAQ,MAAM,SAAU;AAAA;AAAA;AAAA;AAAA,GAMrDG,IAAqBJ,EAAO;AAAA,eAI1B,CAAC,EAAE,SAAAC,EAAA,MAAeA,MAAY,QAAQ,IAAI,EAAG;AAAA,WACjD,CAAC,EAAE,SAAAA,EAAA,MAAeA,MAAY,QAAQ,MAAM,GAAI;AAAA,UACjD,CAAC,EAAE,OAAAE,EAAA,MAAaA,KAAgB,OAAQ;AAAA,YACtC,CAAC,EAAE,SAAAF,EAAA,MAAeA,MAAY,QAAQ,SAAS,OAAQ;AAAA;AAAA;AAAA,GAKtDI,IAA2BL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQpC,CAAC,EAAE,SAAAC,EAAA,MAAeA,MAAY,QAAQ,MAAM,OAAQ;AAAA,GAGlDK,IAAiBN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQxBO,IAAkBP,EAAO;AAAA;AAAA,YAE1B,CAAC,EAAE,SAAAC,EAAA,MAAeA,MAAY,QAAQ,QAAQ,SAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAiBvDO,IAAoBR,EAAO;AAAA;AAAA,YAE5B,CAAC,EAAE,SAAAC,EAAA,MAAeA,MAAY,QAAQ,QAAQ,SAAU;AAAA;AAAA;AAAA,kBAGlD,CAAC,EAAE,SAAAA,EAAA,MAAeA,MAAY,QAAQ,IAAI,CAAE;AAAA;AAAA,qBAEzC,CAAC;AAAA,EACpB,YAAAQ;AAAA,EACA,WAAAC;AAAA,EACA,eAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAX;AACD,MACCW,IACGC,EAAO,QAAQ,WACfJ,KAAcE,IACdV,MAAY,QACXY,EAAO,WAAW,aAClBA,EAAO,WAAW,SAAS,QAC5BH,IACAG,EAAO,QAAQ,UACfA,EAAO,QAAQ,QAAQ;AAAA,UAClB,CAAC,EAAE,YAAAJ,GAAY,eAAAE,GAAe,SAAAV,EAAA,MACtCQ,KAAcE,IACXV,MAAY,QACXY,EAAO,KAAK,UACZA,EAAO,QAAQ,WAChBA,EAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAML,CAAC,EAAE,YAAAJ,GAAY,YAAAG,GAAY,SAAAX,QAC9CW,IACGC,EAAO,QAAQ,WACfJ,IACAR,MAAY,QACXY,EAAO,WAAW,aAClBA,EAAO,WAAW,SAAS,QAC5BA,EAAO,QAAQ,OAAO;AAAA;AAAA,GAIfC,IAAmBd,EAAO;AAAA;AAAA;AAAA;AAAA,GAM1Be,IAAiBf,EAAO;AAAA;AAAA;AAAA;AAAA,GAMxBgB,IAAuBhB,EAAO;AAAA;AAAA,qBAItBa,EAAO,QAAQ,QAAQ;AAAA;AAAA,kBAE1B,CAAC,EAAE,SAAAZ,EAAA,MAAeA,MAAY,QAAQ,IAAI,CAAE;AAAA,gBAC9C,CAAC,EAAE,SAAAA,EAAA,MAAeA,MAAY,QAAQ,IAAI,CAAE;AAAA;AAAA,mBAEzC,CAAC,EAAE,SAAAA,EAAA,MAAeA,MAAY,QAAQ,IAAI,CAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQlDgB,IAAuBjB,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAS9BkB,IAAwBlB,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAS/BmB,IAAmBnB,EAAO;AAAA,UAC7B,CAACoB,MAAUA,EAAM,KAAK;AAAA,GAGnBC,IAAuBrB,EAAOe,CAAc;AAAA,UAK/C,CAACK,MAAUA,EAAM,KAAK;AAAA,QACxB,CAACA,MAAUA,EAAM,GAAG;AAAA,SACnB,CAACA,MAAUA,EAAM,IAAI;AAAA;"}