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

package/dist/esm/components/list-item/ListItem.js

@@ -1,34 +1,36 @@
-import { jsx as e, Fragment as l, jsxs as s } from "react/jsx-runtime";
-import { forwardRef as w } from "react";
-import { getColor as v } from "./themes.js";
-import { BodySecondary as L, BodyCaption as g } from "../TypographyStyle.js";
-import { COLORS as m } from "../../constants/Theme.js";
-import { ListItem as C } from "./ListItem.styled.js";
-const O = w(
+import { jsx as e, Fragment as o, jsxs as s } from "react/jsx-runtime";
+import { forwardRef as L } from "react";
+import { getColor as g } from "./themes.js";
+import { BodySecondary as C, BodyCaption as O } from "../TypographyStyle.js";
+import { COLORS as y } from "../../constants/Theme.js";
+import { ListItem as j } from "./ListItem.styled.js";
+const k = L(
   ({
     id: a,
-    onSelect: o,
+    onSelect: t,
     variant: r = "default",
-    trailingIcon: t,
-    leadingIcon: d,
-    subText: c,
-    listItem: i,
-    borderBottom: y,
-    customComponent: f,
-    customListItemLabel: n,
-    version: p,
-    ...h
-  }, x) => /* @__PURE__ */ e(
-    C,
+    trailingIcon: d,
+    leadingIcon: f,
+    subText: p,
+    listItem: l,
+    borderBottom: h,
+    customComponent: c,
+    customListItemLabel: m,
+    version: i,
+    brandSelectedRow: n,
+    ...x
+  }, w) => /* @__PURE__ */ e(
+    j,
     {
-      ref: x,
+      ref: w,
       id: a,
       variant: r,
-      onClick: () => o && o(i),
-      borderBottom: y,
-      version: p,
-      ...h,
-      children: f ? /* @__PURE__ */ e(l, { children: f }) : /* @__PURE__ */ s(
+      onClick: () => t && t(l),
+      borderBottom: h,
+      version: i,
+      brandSelectedRow: n,
+      ...x,
+      children: c ? /* @__PURE__ */ e(o, { children: c }) : /* @__PURE__ */ s(
         "div",
         {
           style: {
@@ -38,7 +40,7 @@ const O = w(
             width: "100%"
           },
           children: [
-            !!d && d,
+            !!f && f,
             /* @__PURE__ */ s(
               "div",
               {
@@ -49,39 +51,39 @@ const O = w(
                   overflow: "hidden"
                 },
                 children: [
-                  n ? /* @__PURE__ */ e(l, { children: n }) : /* @__PURE__ */ e(l, { children: !!i && /* @__PURE__ */ e(
-                    L,
+                  m ? /* @__PURE__ */ e(o, { children: m }) : /* @__PURE__ */ e(o, { children: !!l && /* @__PURE__ */ e(
+                    C,
                     {
                       style: {
-                        fontSize: `${p === "2.0" ? 12 : 14}px`,
-                        color: v(r),
+                        fontSize: `${i === "2.0" || i === "3.0" ? 12 : 14}px`,
+                        color: g(r, i, n),
                         textOverflow: "ellipsis",
                         display: "block"
                       },
-                      children: i.label
+                      children: l.label
                     }
                   ) }),
-                  !!c && /* @__PURE__ */ e(
-                    g,
+                  !!p && /* @__PURE__ */ e(
+                    O,
                     {
                       style: {
-                        color: r === "inactive" ? m.content.inactive : m.text.secondary
+                        color: r === "inactive" ? y.content.inactive : y.text.secondary
                       },
-                      children: c
+                      children: p
                     }
                   )
                 ]
               }
             ),
-            !!t && /* @__PURE__ */ e("div", { style: { display: "flex", marginLeft: "auto" }, children: t })
+            !!d && /* @__PURE__ */ e("div", { style: { display: "flex", marginLeft: "auto" }, children: d })
           ]
         }
       )
     }
   )
 );
-O.displayName = "ListItem";
+k.displayName = "ListItem";
 export {
-  O as ListItem
+  k as ListItem
 };
 //# sourceMappingURL=ListItem.js.map

package/dist/esm/components/list-item/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","sources":["../../../../src/components/list-item/ListItem.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { getColor } from '@src/components/list-item/themes';\nimport { BodyCaption, BodySecondary } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { ListItemProps } from './List.model';\nimport * as Sc from './ListItem.styled';\n\nexport const ListItem = forwardRef<HTMLDivElement, ListItemProps>(\n\t(\n\t\t{\n\t\t\tid,\n\t\t\tonSelect,\n\t\t\tvariant = 'default',\n\t\t\ttrailingIcon,\n\t\t\tleadingIcon,\n\t\t\tsubText,\n\t\t\tlistItem,\n\t\t\tborderBottom,\n\t\t\tcustomComponent,\n\t\t\tcustomListItemLabel,\n\t\t\tversion,\n\t\t\t...rest\n\t\t},\n\t\tref,\n\t) => {\n\t\treturn (\n\t\t\t<Sc.ListItem\n\t\t\t\tref={ref}\n\t\t\t\tid={id}\n\t\t\t\tvariant={variant}\n\t\t\t\tonClick={() => onSelect && onSelect(listItem)}\n\t\t\t\tborderBottom={borderBottom}\n\t\t\t\tversion={version}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{customComponent ? (\n\t\t\t\t\t<>{customComponent}</>\n\t\t\t\t) : (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\tgap: 8,\n\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{!!leadingIcon && leadingIcon}\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\trowGap: '4px',\n\t\t\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{customListItemLabel ? (\n\t\t\t\t\t\t\t\t<>{customListItemLabel}</>\n\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{!!listItem && (\n\t\t\t\t\t\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\tfontSize: `${version === '2.0' ? 12 : 14}px`,\n\t\t\t\t\t\t\t\t\t\t\t\tcolor: getColor(variant),\n\t\t\t\t\t\t\t\t\t\t\t\ttextOverflow: 'ellipsis',\n\t\t\t\t\t\t\t\t\t\t\t\tdisplay: 'block',\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{listItem.label}\n\t\t\t\t\t\t\t\t\t\t</BodySecondary>\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)}\n\n\t\t\t\t\t\t\t{!!subText && (\n\t\t\t\t\t\t\t\t<BodyCaption\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\tvariant === 'inactive'\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: COLORS.text.secondary,\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{subText}\n\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{!!trailingIcon && (\n\t\t\t\t\t\t\t<div style={{ display: 'flex', marginLeft: 'auto' }}>\n\t\t\t\t\t\t\t\t{trailingIcon}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Sc.ListItem>\n\t\t);\n\t},\n);\n\nListItem.displayName = 'ListItem';\n"],"names":["ListItem","forwardRef","id","onSelect","variant","trailingIcon","leadingIcon","subText","listItem","borderBottom","customComponent","customListItemLabel","version","rest","ref","jsx","Sc.ListItem","Fragment","jsxs","BodySecondary","getColor","BodyCaption","COLORS"],"mappings":";;;;;;AAOO,MAAMA,IAAWC;AAAA,EACvB,CACC;AAAA,IACC,IAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,cAAAC;AAAA,IACA,aAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,SAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAEJC,MAGC,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACA,KAAAF;AAAA,MACA,IAAAZ;AAAA,MACA,SAAAE;AAAA,MACA,SAAS,MAAMD,KAAYA,EAASK,CAAQ;AAAA,MAC5C,cAAAC;AAAA,MACA,SAAAG;AAAA,MACC,GAAGC;AAAA,MAEH,UAAAH,IACA,gBAAAK,EAAAE,GAAA,EAAG,UAAAP,EAAA,CAAgB,IAEnB,gBAAAQ;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,OAAO;AAAA,YACN,SAAS;AAAA,YACT,YAAY;AAAA,YACZ,KAAK;AAAA,YACL,OAAO;AAAA,UAAA;AAAA,UAGP,UAAA;AAAA,YAAA,CAAC,CAACZ,KAAeA;AAAA,YAClB,gBAAAY;AAAA,cAAC;AAAA,cAAA;AAAA,gBACA,OAAO;AAAA,kBACN,SAAS;AAAA,kBACT,QAAQ;AAAA,kBACR,eAAe;AAAA,kBACf,UAAU;AAAA,gBAAA;AAAA,gBAGV,UAAA;AAAA,kBAAAP,2BACG,UAAAA,EAAA,CAAoB,IAEvB,gBAAAI,EAAAE,GAAA,EACE,UAAA,CAAC,CAACT,KACF,gBAAAO;AAAA,oBAACI;AAAA,oBAAA;AAAA,sBACA,OAAO;AAAA,wBACN,UAAU,GAAGP,MAAY,QAAQ,KAAK,EAAE;AAAA,wBACxC,OAAOQ,EAAShB,CAAO;AAAA,wBACvB,cAAc;AAAA,wBACd,SAAS;AAAA,sBAAA;AAAA,sBAGT,UAAAI,EAAS;AAAA,oBAAA;AAAA,kBAAA,GAGb;AAAA,kBAGA,CAAC,CAACD,KACF,gBAAAQ;AAAA,oBAACM;AAAA,oBAAA;AAAA,sBACA,OAAO;AAAA,wBACN,OACCjB,MAAY,aACTkB,EAAO,QAAQ,WACfA,EAAO,KAAK;AAAA,sBAAA;AAAA,sBAGhB,UAAAf;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBACF;AAAA,cAAA;AAAA,YAAA;AAAA,YAGD,CAAC,CAACF,KACF,gBAAAU,EAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,UACzC,UAAAV,EAAA,CACF;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAEF;AAAA,EAAA;AAKL;AAEAL,EAAS,cAAc;"}
+{"version":3,"file":"ListItem.js","sources":["../../../../src/components/list-item/ListItem.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { getColor } from '@src/components/list-item/themes';\nimport { BodyCaption, BodySecondary } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { ListItemProps } from './List.model';\nimport * as Sc from './ListItem.styled';\n\nexport const ListItem = forwardRef<HTMLDivElement, ListItemProps>(\n\t(\n\t\t{\n\t\t\tid,\n\t\t\tonSelect,\n\t\t\tvariant = 'default',\n\t\t\ttrailingIcon,\n\t\t\tleadingIcon,\n\t\t\tsubText,\n\t\t\tlistItem,\n\t\t\tborderBottom,\n\t\t\tcustomComponent,\n\t\t\tcustomListItemLabel,\n\t\t\tversion,\n\t\t\tbrandSelectedRow,\n\t\t\t...rest\n\t\t},\n\t\tref,\n\t) => {\n\t\treturn (\n\t\t\t<Sc.ListItem\n\t\t\t\tref={ref}\n\t\t\t\tid={id}\n\t\t\t\tvariant={variant}\n\t\t\t\tonClick={() => onSelect && onSelect(listItem)}\n\t\t\t\tborderBottom={borderBottom}\n\t\t\t\tversion={version}\n\t\t\t\tbrandSelectedRow={brandSelectedRow}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{customComponent ? (\n\t\t\t\t\t<>{customComponent}</>\n\t\t\t\t) : (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\tgap: 8,\n\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{!!leadingIcon && leadingIcon}\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\trowGap: '4px',\n\t\t\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{customListItemLabel ? (\n\t\t\t\t\t\t\t\t<>{customListItemLabel}</>\n\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{!!listItem && (\n\t\t\t\t\t\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\tfontSize: `${\n\t\t\t\t\t\t\t\t\t\t\t\t\tversion === '2.0' || version === '3.0' ? 12 : 14\n\t\t\t\t\t\t\t\t\t\t\t\t}px`,\n\t\t\t\t\t\t\t\t\t\t\t\tcolor: getColor(variant, version, brandSelectedRow),\n\t\t\t\t\t\t\t\t\t\t\t\ttextOverflow: 'ellipsis',\n\t\t\t\t\t\t\t\t\t\t\t\tdisplay: 'block',\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{listItem.label}\n\t\t\t\t\t\t\t\t\t\t</BodySecondary>\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)}\n\n\t\t\t\t\t\t\t{!!subText && (\n\t\t\t\t\t\t\t\t<BodyCaption\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\tvariant === 'inactive'\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: COLORS.text.secondary,\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{subText}\n\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{!!trailingIcon && (\n\t\t\t\t\t\t\t<div style={{ display: 'flex', marginLeft: 'auto' }}>\n\t\t\t\t\t\t\t\t{trailingIcon}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Sc.ListItem>\n\t\t);\n\t},\n);\n\nListItem.displayName = 'ListItem';\n"],"names":["ListItem","forwardRef","id","onSelect","variant","trailingIcon","leadingIcon","subText","listItem","borderBottom","customComponent","customListItemLabel","version","brandSelectedRow","rest","ref","jsx","Sc.ListItem","Fragment","jsxs","BodySecondary","getColor","BodyCaption","COLORS"],"mappings":";;;;;;AAOO,MAAMA,IAAWC;AAAA,EACvB,CACC;AAAA,IACC,IAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,cAAAC;AAAA,IACA,aAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,SAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAEJC,MAGC,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACA,KAAAF;AAAA,MACA,IAAAb;AAAA,MACA,SAAAE;AAAA,MACA,SAAS,MAAMD,KAAYA,EAASK,CAAQ;AAAA,MAC5C,cAAAC;AAAA,MACA,SAAAG;AAAA,MACA,kBAAAC;AAAA,MACC,GAAGC;AAAA,MAEH,UAAAJ,IACA,gBAAAM,EAAAE,GAAA,EAAG,UAAAR,EAAA,CAAgB,IAEnB,gBAAAS;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,OAAO;AAAA,YACN,SAAS;AAAA,YACT,YAAY;AAAA,YACZ,KAAK;AAAA,YACL,OAAO;AAAA,UAAA;AAAA,UAGP,UAAA;AAAA,YAAA,CAAC,CAACb,KAAeA;AAAA,YAClB,gBAAAa;AAAA,cAAC;AAAA,cAAA;AAAA,gBACA,OAAO;AAAA,kBACN,SAAS;AAAA,kBACT,QAAQ;AAAA,kBACR,eAAe;AAAA,kBACf,UAAU;AAAA,gBAAA;AAAA,gBAGV,UAAA;AAAA,kBAAAR,2BACG,UAAAA,EAAA,CAAoB,IAEvB,gBAAAK,EAAAE,GAAA,EACE,UAAA,CAAC,CAACV,KACF,gBAAAQ;AAAA,oBAACI;AAAA,oBAAA;AAAA,sBACA,OAAO;AAAA,wBACN,UAAU,GACTR,MAAY,SAASA,MAAY,QAAQ,KAAK,EAC/C;AAAA,wBACA,OAAOS,EAASjB,GAASQ,GAASC,CAAgB;AAAA,wBAClD,cAAc;AAAA,wBACd,SAAS;AAAA,sBAAA;AAAA,sBAGT,UAAAL,EAAS;AAAA,oBAAA;AAAA,kBAAA,GAGb;AAAA,kBAGA,CAAC,CAACD,KACF,gBAAAS;AAAA,oBAACM;AAAA,oBAAA;AAAA,sBACA,OAAO;AAAA,wBACN,OACClB,MAAY,aACTmB,EAAO,QAAQ,WACfA,EAAO,KAAK;AAAA,sBAAA;AAAA,sBAGhB,UAAAhB;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBACF;AAAA,cAAA;AAAA,YAAA;AAAA,YAGD,CAAC,CAACF,KACF,gBAAAW,EAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,UACzC,UAAAX,EAAA,CACF;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAEF;AAAA,EAAA;AAKL;AAEAL,EAAS,cAAc;"}

package/dist/esm/components/list-item/ListItem.styled.d.ts

@@ -2,5 +2,6 @@ import { Variant } from './List.model';
 export declare const ListItem: import('styled-components').StyledComponent<"div", any, {
     variant: Variant;
     borderBottom?: string | undefined;
-    version?: "1.0" | "2.0" | undefined;
+    version?: "1.0" | "2.0" | "3.0" | undefined;
+    brandSelectedRow?: boolean | undefined;
 }, never>;

package/dist/esm/components/list-item/ListItem.styled.js

@@ -1,17 +1,17 @@
 import t from "styled-components";
-import { COLORS as o } from "../../constants/Theme.js";
-import { getTheme as e } from "./themes.js";
-const s = t.div`
-	border-bottom: ${(r) => r.borderBottom || `${r.version === "2.0" ? 0 : 1}px solid ${o.stroke.primary}`};
+import { COLORS as r } from "../../constants/Theme.js";
+import { getTheme as o } from "./themes.js";
+const m = t.div`
+	border-bottom: ${(e) => e.borderBottom || `${e.version === "2.0" || e.version === "3.0" ? 0 : 1}px solid ${r.stroke.primary}`};
 	display: flex;
 	align-items: center;
 	justify-content: start;
 	column-gap: 12px;
-	padding: ${(r) => r.version === "2.0" ? "8px 12px" : "12px 16px"};
-	${(r) => e(r.variant, r.version)};
-	border-radius: ${(r) => r.version === "2.0" ? 8 : 0}px;
+	padding: ${(e) => e.version === "2.0" ? "8px 12px" : "12px 16px"};
+	${(e) => o(e.variant, e.version, e.brandSelectedRow)};
+	border-radius: ${(e) => e.brandSelectedRow ? 0 : e.version === "2.0" ? 8 : 0}px;
 `;
 export {
-  s as ListItem
+  m as ListItem
 };
 //# sourceMappingURL=ListItem.styled.js.map

package/dist/esm/components/list-item/ListItem.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.styled.js","sources":["../../../../src/components/list-item/ListItem.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport type { Variant } from './List.model';\nimport { getTheme } from './themes';\n\nexport const ListItem = styled.div<{\n\tvariant: Variant;\n\tborderBottom?: string;\n\tversion?: '1.0' | '2.0';\n}>`\n\tborder-bottom: ${(props) =>\n\t\tprops.borderBottom ||\n\t\t`${props.version === '2.0' ? 0 : 1}px solid ${COLORS.stroke.primary}`};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: start;\n\tcolumn-gap: 12px;\n\tpadding: ${(props) => (props.version === '2.0' ? '8px 12px' : '12px 16px')};\n\t${(props) => getTheme(props.variant, props.version)};\n\tborder-radius: ${(props) => (props.version === '2.0' ? 8 : 0)}px;\n`;\n"],"names":["ListItem","styled","props","COLORS","getTheme"],"mappings":";;;AAKO,MAAMA,IAAWC,EAAO;AAAA,kBAKb,CAACC,MACjBA,EAAM,gBACN,GAAGA,EAAM,YAAY,QAAQ,IAAI,CAAC,YAAYC,EAAO,OAAO,OAAO,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,YAK3D,CAACD,MAAWA,EAAM,YAAY,QAAQ,aAAa,WAAY;AAAA,GACxE,CAACA,MAAUE,EAASF,EAAM,SAASA,EAAM,OAAO,CAAC;AAAA,kBAClC,CAACA,MAAWA,EAAM,YAAY,QAAQ,IAAI,CAAE;AAAA;"}
+{"version":3,"file":"ListItem.styled.js","sources":["../../../../src/components/list-item/ListItem.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport type { Variant } from './List.model';\nimport { getTheme } from './themes';\n\nexport const ListItem = styled.div<{\n\tvariant: Variant;\n\tborderBottom?: string;\n\tversion?: '1.0' | '2.0' | '3.0';\n\tbrandSelectedRow?: boolean;\n}>`\n\tborder-bottom: ${(props) =>\n\t\tprops.borderBottom ||\n\t\t`${props.version === '2.0' || props.version === '3.0' ? 0 : 1}px solid ${\n\t\t\tCOLORS.stroke.primary\n\t\t}`};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: start;\n\tcolumn-gap: 12px;\n\tpadding: ${(props) => (props.version === '2.0' ? '8px 12px' : '12px 16px')};\n\t${(props) => getTheme(props.variant, props.version, props.brandSelectedRow)};\n\tborder-radius: ${(props) =>\n\t\tprops.brandSelectedRow ? 0 : props.version === '2.0' ? 8 : 0}px;\n`;\n"],"names":["ListItem","styled","props","COLORS","getTheme"],"mappings":";;;AAKO,MAAMA,IAAWC,EAAO;AAAA,kBAMb,CAACC,MACjBA,EAAM,gBACN,GAAGA,EAAM,YAAY,SAASA,EAAM,YAAY,QAAQ,IAAI,CAAC,YAC5DC,EAAO,OAAO,OACf,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,YAKQ,CAACD,MAAWA,EAAM,YAAY,QAAQ,aAAa,WAAY;AAAA,GACxE,CAACA,MAAUE,EAASF,EAAM,SAASA,EAAM,SAASA,EAAM,gBAAgB,CAAC;AAAA,kBAC1D,CAACA,MACjBA,EAAM,mBAAmB,IAAIA,EAAM,YAAY,QAAQ,IAAI,CAAC;AAAA;"}

package/dist/esm/components/list-item/themes.d.ts

@@ -1,3 +1,3 @@
 import { Variant } from './List.model';
-export declare function getColor(variant: Variant): string;
-export declare function getTheme(variant: Variant, version?: '1.0' | '2.0'): import('styled-components').FlattenSimpleInterpolation;
+export declare function getColor(variant: Variant, version?: '1.0' | '2.0' | '3.0', brandSelectedRow?: boolean): string;
+export declare function getTheme(variant: Variant, version?: '1.0' | '2.0' | '3.0', brandSelectedRow?: boolean): import('styled-components').FlattenSimpleInterpolation;

package/dist/esm/components/list-item/themes.js

@@ -1,12 +1,12 @@
 import { css as e } from "styled-components";
 import { COLORS as r } from "../../constants/Theme.js";
-function n(o) {
+function u(o, t, c) {
   switch (o) {
     case "default":
     case "readonly":
       return `${r.text.primary}`;
     case "selected":
-      return `${r.content.positive}`;
+      return t === "3.0" || c ? `${r.text.primary}` : `${r.content.positive}`;
     case "inactive":
       return `${r.content.inactive}`;
     case "error":
@@ -17,7 +17,15 @@ function n(o) {
       return `${r.text.primary}`;
   }
 }
-function u(o, t) {
+function d(o, t, c) {
+  if (c && o === "selected")
+    return e`
+			color: ${r.text.primary};
+			background: ${r.background.brandLight};
+			&:hover {
+				background: ${r.background.brandLight};
+			}
+		`;
   switch (o) {
     case "default":
       return e`
@@ -29,7 +37,13 @@ function u(o, t) {
 				}
 			`;
     case "selected":
-      return e`
+      return t === "3.0" ? e`
+					color: ${r.text.primary};
+					background: ${r.background.brandLight};
+					&:hover {
+						background: ${r.background.brandLight};
+					}
+				` : e`
 				color: ${r.content.positive};
 				background: ${r.background.positive.light};
 				box-shadow: ${t === "2.0" ? "0" : "0 2px 8px rgba(0, 0, 0, 0.12)"};
@@ -62,7 +76,7 @@ function u(o, t) {
   }
 }
 export {
-  n as getColor,
-  u as getTheme
+  u as getColor,
+  d as getTheme
 };
 //# sourceMappingURL=themes.js.map

package/dist/esm/components/list-item/themes.js.map

@@ -1 +1 @@
-{"version":3,"file":"themes.js","sources":["../../../../src/components/list-item/themes.tsx"],"sourcesContent":["import { css } from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport type { Variant } from './List.model';\n\nexport function getColor(variant: Variant) {\n\tswitch (variant) {\n\t\tcase 'default':\n\t\tcase 'readonly':\n\t\t\treturn `${COLORS.text.primary}`;\n\t\tcase 'selected':\n\t\t\treturn `${COLORS.content.positive}`;\n\t\tcase 'inactive':\n\t\t\treturn `${COLORS.content.inactive}`;\n\t\tcase 'error':\n\t\t\treturn `${COLORS.content.negative}`;\n\t\tcase 'placeholder':\n\t\t\treturn `${COLORS.content.placeholder}`;\n\t\tdefault:\n\t\t\treturn `${COLORS.text.primary}`;\n\t}\n}\n\nexport function getTheme(variant: Variant, version?: '1.0' | '2.0') {\n\tswitch (variant) {\n\t\tcase 'default':\n\t\t\treturn css`\n\t\t\t\tcursor: pointer;\n\t\t\t\tcolor: ${COLORS.text.primary};\n\t\t\t\tbackground-color: ${COLORS.surface.standard};\n\t\t\t\t&:hover {\n\t\t\t\t\tbackground-color: ${COLORS.surface.hovered};\n\t\t\t\t}\n\t\t\t`;\n\t\tcase 'selected':\n\t\t\treturn css`\n\t\t\t\tcolor: ${COLORS.content.positive};\n\t\t\t\tbackground: ${COLORS.background.positive.light};\n\t\t\t\tbox-shadow: ${version === '2.0'\n\t\t\t\t\t? '0'\n\t\t\t\t\t: '0 2px 8px rgba(0, 0, 0, 0.12)'};\n\t\t\t`;\n\t\tcase 'inactive':\n\t\t\treturn css`\n\t\t\t\tcolor: ${COLORS.content.inactive};\n\t\t\t\tbackground-color: ${COLORS.surface.standard};\n\t\t\t\tcursor: not-allowed;\n\t\t\t`;\n\t\tcase 'readonly':\n\t\t\treturn css`\n\t\t\t\tcolor: ${COLORS.text.primary};\n\t\t\t`;\n\t\tcase 'separator':\n\t\t\treturn css`\n\t\t\t\tcolor: ${COLORS.content.inactive};\n\t\t\t\tbackground-color: ${COLORS.background.base};\n\t\t\t\tcursor: none;\n\t\t\t\tpadding: 8px 16px;\n\t\t\t`;\n\t\tdefault:\n\t\t\treturn css`\n\t\t\t\tcolor: ${COLORS.text.primary};\n\t\t\t\tbackground-color: ${COLORS.surface.standard};\n\t\t\t\t&:hover {\n\t\t\t\t\tbackground-color: ${COLORS.surface.hovered};\n\t\t\t\t}\n\t\t\t`;\n\t}\n}\n"],"names":["getColor","variant","COLORS","getTheme","version","css"],"mappings":";;AAIO,SAASA,EAASC,GAAkB;AAC1C,UAAQA,GAAA;AAAA,IACP,KAAK;AAAA,IACL,KAAK;AACJ,aAAO,GAAGC,EAAO,KAAK,OAAO;AAAA,IAC9B,KAAK;AACJ,aAAO,GAAGA,EAAO,QAAQ,QAAQ;AAAA,IAClC,KAAK;AACJ,aAAO,GAAGA,EAAO,QAAQ,QAAQ;AAAA,IAClC,KAAK;AACJ,aAAO,GAAGA,EAAO,QAAQ,QAAQ;AAAA,IAClC,KAAK;AACJ,aAAO,GAAGA,EAAO,QAAQ,WAAW;AAAA,IACrC;AACC,aAAO,GAAGA,EAAO,KAAK,OAAO;AAAA,EAAA;AAEhC;AAEO,SAASC,EAASF,GAAkBG,GAAyB;AACnE,UAAQH,GAAA;AAAA,IACP,KAAK;AACJ,aAAOI;AAAA;AAAA,aAEGH,EAAO,KAAK,OAAO;AAAA,wBACRA,EAAO,QAAQ,QAAQ;AAAA;AAAA,yBAEtBA,EAAO,QAAQ,OAAO;AAAA;AAAA;AAAA,IAG7C,KAAK;AACJ,aAAOG;AAAA,aACGH,EAAO,QAAQ,QAAQ;AAAA,kBAClBA,EAAO,WAAW,SAAS,KAAK;AAAA,kBAChCE,MAAY,QACvB,MACA,+BAA+B;AAAA;AAAA,IAEpC,KAAK;AACJ,aAAOC;AAAA,aACGH,EAAO,QAAQ,QAAQ;AAAA,wBACZA,EAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA,IAG7C,KAAK;AACJ,aAAOG;AAAA,aACGH,EAAO,KAAK,OAAO;AAAA;AAAA,IAE9B,KAAK;AACJ,aAAOG;AAAA,aACGH,EAAO,QAAQ,QAAQ;AAAA,wBACZA,EAAO,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA,IAI5C;AACC,aAAOG;AAAA,aACGH,EAAO,KAAK,OAAO;AAAA,wBACRA,EAAO,QAAQ,QAAQ;AAAA;AAAA,yBAEtBA,EAAO,QAAQ,OAAO;AAAA;AAAA;AAAA,EAAA;AAI/C;"}
+{"version":3,"file":"themes.js","sources":["../../../../src/components/list-item/themes.tsx"],"sourcesContent":["import { css } from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport type { Variant } from './List.model';\n\nexport function getColor(\n\tvariant: Variant,\n\tversion?: '1.0' | '2.0' | '3.0',\n\tbrandSelectedRow?: boolean,\n) {\n\tswitch (variant) {\n\t\tcase 'default':\n\t\tcase 'readonly':\n\t\t\treturn `${COLORS.text.primary}`;\n\t\tcase 'selected':\n\t\t\tif (version === '3.0' || brandSelectedRow)\n\t\t\t\treturn `${COLORS.text.primary}`;\n\t\t\treturn `${COLORS.content.positive}`;\n\t\tcase 'inactive':\n\t\t\treturn `${COLORS.content.inactive}`;\n\t\tcase 'error':\n\t\t\treturn `${COLORS.content.negative}`;\n\t\tcase 'placeholder':\n\t\t\treturn `${COLORS.content.placeholder}`;\n\t\tdefault:\n\t\t\treturn `${COLORS.text.primary}`;\n\t}\n}\n\nexport function getTheme(\n\tvariant: Variant,\n\tversion?: '1.0' | '2.0' | '3.0',\n\tbrandSelectedRow?: boolean,\n) {\n\tif (brandSelectedRow && variant === 'selected') {\n\t\treturn css`\n\t\t\tcolor: ${COLORS.text.primary};\n\t\t\tbackground: ${COLORS.background.brandLight};\n\t\t\t&:hover {\n\t\t\t\tbackground: ${COLORS.background.brandLight};\n\t\t\t}\n\t\t`;\n\t}\n\tswitch (variant) {\n\t\tcase 'default':\n\t\t\treturn css`\n\t\t\t\tcursor: pointer;\n\t\t\t\tcolor: ${COLORS.text.primary};\n\t\t\t\tbackground-color: ${COLORS.surface.standard};\n\t\t\t\t&:hover {\n\t\t\t\t\tbackground-color: ${COLORS.surface.hovered};\n\t\t\t\t}\n\t\t\t`;\n\t\tcase 'selected':\n\t\t\tif (version === '3.0') {\n\t\t\t\treturn css`\n\t\t\t\t\tcolor: ${COLORS.text.primary};\n\t\t\t\t\tbackground: ${COLORS.background.brandLight};\n\t\t\t\t\t&:hover {\n\t\t\t\t\t\tbackground: ${COLORS.background.brandLight};\n\t\t\t\t\t}\n\t\t\t\t`;\n\t\t\t}\n\t\t\treturn css`\n\t\t\t\tcolor: ${COLORS.content.positive};\n\t\t\t\tbackground: ${COLORS.background.positive.light};\n\t\t\t\tbox-shadow: ${version === '2.0'\n\t\t\t\t\t? '0'\n\t\t\t\t\t: '0 2px 8px rgba(0, 0, 0, 0.12)'};\n\t\t\t`;\n\t\tcase 'inactive':\n\t\t\treturn css`\n\t\t\t\tcolor: ${COLORS.content.inactive};\n\t\t\t\tbackground-color: ${COLORS.surface.standard};\n\t\t\t\tcursor: not-allowed;\n\t\t\t`;\n\t\tcase 'readonly':\n\t\t\treturn css`\n\t\t\t\tcolor: ${COLORS.text.primary};\n\t\t\t`;\n\t\tcase 'separator':\n\t\t\treturn css`\n\t\t\t\tcolor: ${COLORS.content.inactive};\n\t\t\t\tbackground-color: ${COLORS.background.base};\n\t\t\t\tcursor: none;\n\t\t\t\tpadding: 8px 16px;\n\t\t\t`;\n\t\tdefault:\n\t\t\treturn css`\n\t\t\t\tcolor: ${COLORS.text.primary};\n\t\t\t\tbackground-color: ${COLORS.surface.standard};\n\t\t\t\t&:hover {\n\t\t\t\t\tbackground-color: ${COLORS.surface.hovered};\n\t\t\t\t}\n\t\t\t`;\n\t}\n}\n"],"names":["getColor","variant","version","brandSelectedRow","COLORS","getTheme","css"],"mappings":";;AAIO,SAASA,EACfC,GACAC,GACAC,GACC;AACD,UAAQF,GAAA;AAAA,IACP,KAAK;AAAA,IACL,KAAK;AACJ,aAAO,GAAGG,EAAO,KAAK,OAAO;AAAA,IAC9B,KAAK;AACJ,aAAIF,MAAY,SAASC,IACjB,GAAGC,EAAO,KAAK,OAAO,KACvB,GAAGA,EAAO,QAAQ,QAAQ;AAAA,IAClC,KAAK;AACJ,aAAO,GAAGA,EAAO,QAAQ,QAAQ;AAAA,IAClC,KAAK;AACJ,aAAO,GAAGA,EAAO,QAAQ,QAAQ;AAAA,IAClC,KAAK;AACJ,aAAO,GAAGA,EAAO,QAAQ,WAAW;AAAA,IACrC;AACC,aAAO,GAAGA,EAAO,KAAK,OAAO;AAAA,EAAA;AAEhC;AAEO,SAASC,EACfJ,GACAC,GACAC,GACC;AACD,MAAIA,KAAoBF,MAAY;AACnC,WAAOK;AAAA,YACGF,EAAO,KAAK,OAAO;AAAA,iBACdA,EAAO,WAAW,UAAU;AAAA;AAAA,kBAE3BA,EAAO,WAAW,UAAU;AAAA;AAAA;AAI7C,UAAQH,GAAA;AAAA,IACP,KAAK;AACJ,aAAOK;AAAA;AAAA,aAEGF,EAAO,KAAK,OAAO;AAAA,wBACRA,EAAO,QAAQ,QAAQ;AAAA;AAAA,yBAEtBA,EAAO,QAAQ,OAAO;AAAA;AAAA;AAAA,IAG7C,KAAK;AACJ,aAAIF,MAAY,QACRI;AAAA,cACGF,EAAO,KAAK,OAAO;AAAA,mBACdA,EAAO,WAAW,UAAU;AAAA;AAAA,oBAE3BA,EAAO,WAAW,UAAU;AAAA;AAAA,QAItCE;AAAA,aACGF,EAAO,QAAQ,QAAQ;AAAA,kBAClBA,EAAO,WAAW,SAAS,KAAK;AAAA,kBAChCF,MAAY,QACvB,MACA,+BAA+B;AAAA;AAAA,IAEpC,KAAK;AACJ,aAAOI;AAAA,aACGF,EAAO,QAAQ,QAAQ;AAAA,wBACZA,EAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA,IAG7C,KAAK;AACJ,aAAOE;AAAA,aACGF,EAAO,KAAK,OAAO;AAAA;AAAA,IAE9B,KAAK;AACJ,aAAOE;AAAA,aACGF,EAAO,QAAQ,QAAQ;AAAA,wBACZA,EAAO,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA,IAI5C;AACC,aAAOE;AAAA,aACGF,EAAO,KAAK,OAAO;AAAA,wBACRA,EAAO,QAAQ,QAAQ;AAAA;AAAA,yBAEtBA,EAAO,QAAQ,OAAO;AAAA;AAAA;AAAA,EAAA;AAI/C;"}

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

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

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

@@ -1,46 +1,48 @@
-import { jsxs as c, jsx as r } from "react/jsx-runtime";
-import { COLORS as x } from "../../constants/Theme.js";
-import { BodyTiny as a } from "../TypographyStyle.js";
-import { MenuItem as f } from "./MenuItem.js";
-import { GroupedMenuListContainer as h } from "./MultiLevelDropdown.styled.js";
-const G = ({
+import { jsxs as x, jsx as t } from "react/jsx-runtime";
+import { COLORS as a } from "../../constants/Theme.js";
+import { BodyTiny as f } from "../TypographyStyle.js";
+import { MenuItem as h } from "./MenuItem.js";
+import { GroupedMenuListContainer as y } from "./MultiLevelDropdown.styled.js";
+const O = ({
   width: e,
-  onDropdownItemClick: t,
+  onDropdownItemClick: p,
   option: o,
-  parents: p,
-  allowParentSelection: n,
-  maxLevels: i,
-  hideGroupLabel: m,
-  currentLevel: d,
-  renderNestedMenu: l
-}) => /* @__PURE__ */ c(h, { children: [
-  !m && /* @__PURE__ */ r(
-    a,
+  parents: n,
+  allowParentSelection: i,
+  maxLevels: m,
+  hideGroupLabel: d,
+  currentLevel: l,
+  renderNestedMenu: s,
+  version: r
+}) => /* @__PURE__ */ x(y, { version: r, children: [
+  !d && /* @__PURE__ */ t(
+    f,
     {
       style: {
         padding: "4px 8px 4px 12px",
         cursor: "default"
       },
-      color: x.content.placeholder,
+      color: a.content.placeholder,
       children: o.label
     }
   ),
-  o.options.map((s, u) => /* @__PURE__ */ r(
-    f,
+  o.options.map((u, c) => /* @__PURE__ */ t(
+    h,
     {
       width: e,
-      onDropdownItemClick: t,
-      option: s,
-      parents: p,
-      allowParentSelection: n,
-      maxLevels: i,
-      currentLevel: d,
-      renderNestedMenu: l
+      onDropdownItemClick: p,
+      option: u,
+      parents: n,
+      allowParentSelection: i,
+      maxLevels: m,
+      currentLevel: l,
+      renderNestedMenu: s,
+      version: r
     },
-    u
+    c
   ))
 ] });
 export {
-  G as GroupedMenuList
+  O as GroupedMenuList
 };
 //# sourceMappingURL=GroupedMenuList.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"GroupedMenuList.js","sources":["../../../../src/components/multi-level-dropdown/GroupedMenuList.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport { BodyTiny } from '../TypographyStyle';\nimport { MenuItem } from './MenuItem';\nimport { GroupedMenuListContainer } from './MultiLevelDropdown.styled';\nimport {\n\tGroupedOption,\n\tMultiLevelDropdownOption,\n\tRenderNestedMenu,\n} from './type';\n\nexport const GroupedMenuList: React.FC<{\n\twidth: string;\n\tonDropdownItemClick?: (\n\t\toption: MultiLevelDropdownOption,\n\t\tparents: MultiLevelDropdownOption[],\n\t) => void;\n\toption: GroupedOption;\n\tparents: MultiLevelDropdownOption[];\n\tallowParentSelection?: boolean;\n\tmaxLevels?: number;\n\thideGroupLabel?: boolean;\n\tcurrentLevel: number;\n\trenderNestedMenu: RenderNestedMenu;\n}> = ({\n\twidth,\n\tonDropdownItemClick,\n\toption,\n\tparents,\n\tallowParentSelection,\n\tmaxLevels,\n\thideGroupLabel,\n\tcurrentLevel,\n\trenderNestedMenu,\n}) => {\n\treturn (\n\t\t<GroupedMenuListContainer>\n\t\t\t{!hideGroupLabel && (\n\t\t\t\t<BodyTiny\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tpadding: '4px 8px 4px 12px',\n\t\t\t\t\t\tcursor: 'default',\n\t\t\t\t\t}}\n\t\t\t\t\tcolor={COLORS.content.placeholder}\n\t\t\t\t>\n\t\t\t\t\t{option.label}\n\t\t\t\t</BodyTiny>\n\t\t\t)}\n\t\t\t{option.options.map((option, index) => (\n\t\t\t\t<MenuItem\n\t\t\t\t\tkey={index}\n\t\t\t\t\twidth={width}\n\t\t\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\t\t\toption={option}\n\t\t\t\t\tparents={parents}\n\t\t\t\t\tallowParentSelection={allowParentSelection}\n\t\t\t\t\tmaxLevels={maxLevels}\n\t\t\t\t\tcurrentLevel={currentLevel}\n\t\t\t\t\trenderNestedMenu={renderNestedMenu}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</GroupedMenuListContainer>\n\t);\n};\n"],"names":["GroupedMenuList","width","onDropdownItemClick","option","parents","allowParentSelection","maxLevels","hideGroupLabel","currentLevel","renderNestedMenu","GroupedMenuListContainer","jsx","BodyTiny","COLORS","index","MenuItem"],"mappings":";;;;;AAWO,MAAMA,IAaR,CAAC;AAAA,EACL,OAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,kBAAAC;AACD,wBAEGC,GAAA,EACC,UAAA;AAAA,EAAA,CAACH,KACD,gBAAAI;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,OAAO;AAAA,QACN,SAAS;AAAA,QACT,QAAQ;AAAA,MAAA;AAAA,MAET,OAAOC,EAAO,QAAQ;AAAA,MAErB,UAAAV,EAAO;AAAA,IAAA;AAAA,EAAA;AAAA,EAGTA,EAAO,QAAQ,IAAI,CAACA,GAAQW,MAC5B,gBAAAH;AAAA,IAACI;AAAA,IAAA;AAAA,MAEA,OAAAd;AAAA,MACA,qBAAAC;AAAA,MACA,QAAQC;AAAAA,MACR,SAAAC;AAAA,MACA,sBAAAC;AAAA,MACA,WAAAC;AAAA,MACA,cAAAE;AAAA,MACA,kBAAAC;AAAA,IAAA;AAAA,IARKK;AAAA,EAAA,CAUN;AAAA,GACF;"}
+{"version":3,"file":"GroupedMenuList.js","sources":["../../../../src/components/multi-level-dropdown/GroupedMenuList.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport { BodyTiny } from '../TypographyStyle';\nimport { MenuItem } from './MenuItem';\nimport { GroupedMenuListContainer } from './MultiLevelDropdown.styled';\nimport {\n\tGroupedOption,\n\tMultiLevelDropdownOption,\n\tRenderNestedMenu,\n} from './type';\n\nexport const GroupedMenuList: React.FC<{\n\twidth: string;\n\tonDropdownItemClick?: (\n\t\toption: MultiLevelDropdownOption,\n\t\tparents: MultiLevelDropdownOption[],\n\t) => void;\n\toption: GroupedOption;\n\tparents: MultiLevelDropdownOption[];\n\tallowParentSelection?: boolean;\n\tmaxLevels?: number;\n\thideGroupLabel?: boolean;\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\thideGroupLabel,\n\tcurrentLevel,\n\trenderNestedMenu,\n\tversion,\n}) => {\n\treturn (\n\t\t<GroupedMenuListContainer version={version}>\n\t\t\t{!hideGroupLabel && (\n\t\t\t\t<BodyTiny\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tpadding: '4px 8px 4px 12px',\n\t\t\t\t\t\tcursor: 'default',\n\t\t\t\t\t}}\n\t\t\t\t\tcolor={COLORS.content.placeholder}\n\t\t\t\t>\n\t\t\t\t\t{option.label}\n\t\t\t\t</BodyTiny>\n\t\t\t)}\n\t\t\t{option.options.map((option, index) => (\n\t\t\t\t<MenuItem\n\t\t\t\t\tkey={index}\n\t\t\t\t\twidth={width}\n\t\t\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\t\t\toption={option}\n\t\t\t\t\tparents={parents}\n\t\t\t\t\tallowParentSelection={allowParentSelection}\n\t\t\t\t\tmaxLevels={maxLevels}\n\t\t\t\t\tcurrentLevel={currentLevel}\n\t\t\t\t\trenderNestedMenu={renderNestedMenu}\n\t\t\t\t\tversion={version}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</GroupedMenuListContainer>\n\t);\n};\n"],"names":["GroupedMenuList","width","onDropdownItemClick","option","parents","allowParentSelection","maxLevels","hideGroupLabel","currentLevel","renderNestedMenu","version","jsxs","GroupedMenuListContainer","jsx","BodyTiny","COLORS","index","MenuItem"],"mappings":";;;;;AAWO,MAAMA,IAcR,CAAC;AAAA,EACL,OAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,SAAAC;AACD,MAEE,gBAAAC,EAACC,KAAyB,SAAAF,GACxB,UAAA;AAAA,EAAA,CAACH,KACD,gBAAAM;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,OAAO;AAAA,QACN,SAAS;AAAA,QACT,QAAQ;AAAA,MAAA;AAAA,MAET,OAAOC,EAAO,QAAQ;AAAA,MAErB,UAAAZ,EAAO;AAAA,IAAA;AAAA,EAAA;AAAA,EAGTA,EAAO,QAAQ,IAAI,CAACA,GAAQa,MAC5B,gBAAAH;AAAA,IAACI;AAAA,IAAA;AAAA,MAEA,OAAAhB;AAAA,MACA,qBAAAC;AAAA,MACA,QAAQC;AAAAA,MACR,SAAAC;AAAA,MACA,sBAAAC;AAAA,MACA,WAAAC;AAAA,MACA,cAAAE;AAAA,MACA,kBAAAC;AAAA,MACA,SAAAC;AAAA,IAAA;AAAA,IATKM;AAAA,EAAA,CAWN;AAAA,GACF;"}

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

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

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';
 }>;