@hitachivantara/uikit-react-core 5.39.1 → 5.39.2

package/dist/esm/components/Header/Brand/Brand.js

@@ -11,10 +11,7 @@ const HvHeaderBrand = (props) => {
     className,
     ...others
   } = useDefaultProps("HvHeaderBrand", props);
-  const {
-    classes,
-    cx
-  } = useClasses(classesProp);
+  const { classes, cx } = useClasses(classesProp);
   return /* @__PURE__ */ jsxs("div", { className: cx(classes.root, className), ...others, children: [
     logo,
     logo && name && /* @__PURE__ */ jsx("div", { className: classes.separator }),

package/dist/esm/components/Header/Brand/Brand.js.map

@@ -1 +1 @@
-{"version":3,"file":"Brand.js","sources":["../../../../../src/components/Header/Brand/Brand.tsx"],"sourcesContent":["import { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvTypography } from \"@core/components/Typography\";\n\nimport { staticClasses, useClasses } from \"./Brand.styles\";\n\nexport { staticClasses as headerBrandClasses };\n\nexport type HvHeaderBrandClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvHeaderBrandProps extends HvBaseProps {\n  logo?: React.ReactNode;\n  name?: string;\n  classes?: HvHeaderBrandClasses;\n}\n\n/**\n * Header component is used to render a header bar with logo and brand name, navigation and actions.\n */\nexport const HvHeaderBrand = (props: HvHeaderBrandProps) => {\n  const {\n    classes: classesProp,\n    logo,\n    name,\n    className,\n    ...others\n  } = useDefaultProps(\"HvHeaderBrand\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <div className={cx(classes.root, className)} {...others}>\n      {logo}\n      {logo && name && <div className={classes.separator} />}\n      {name && (\n        <HvTypography className={classes.brandName} variant=\"label\">\n          {name}\n        </HvTypography>\n      )}\n    </div>\n  );\n};\n"],"names":["HvHeaderBrand","props","classes","classesProp","logo","name","className","others","useDefaultProps","cx","useClasses","root","separator","brandName"],"mappings":";;;;;AAoBaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,iBAAiBP,KAAK;AAEpC,QAAA;AAAA,IAAEC;AAAAA,IAASO;AAAAA,EAAAA,IAAOC,WAAWP,WAAW;AAG5C,SAAA,qBAAC,SAAI,WAAWM,GAAGP,QAAQS,MAAML,SAAS,GAAG,GAAIC,QAC9CH,UAAAA;AAAAA,IAAAA;AAAAA,IACAA,QAAQC,QAAQ,oBAAC,OAAI,EAAA,WAAWH,QAAQU,WAAa;AAAA,IACrDP,4BACE,cAAa,EAAA,WAAWH,QAAQW,WAAW,SAAQ,SACjDR,UACH,KAAA,CAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"Brand.js","sources":["../../../../../src/components/Header/Brand/Brand.tsx"],"sourcesContent":["import { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvTypography } from \"@core/components/Typography\";\n\nimport { staticClasses, useClasses } from \"./Brand.styles\";\n\nexport { staticClasses as headerBrandClasses };\n\nexport type HvHeaderBrandClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvHeaderBrandProps extends HvBaseProps {\n  logo?: React.ReactNode;\n  name?: string;\n  classes?: HvHeaderBrandClasses;\n}\n\n/**\n * Header component is used to render a header bar with logo and brand name, navigation and actions.\n */\nexport const HvHeaderBrand = (props: HvHeaderBrandProps) => {\n  const {\n    classes: classesProp,\n    logo,\n    name,\n    className,\n    ...others\n  } = useDefaultProps(\"HvHeaderBrand\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <div className={cx(classes.root, className)} {...others}>\n      {logo}\n      {logo && name && <div className={classes.separator} />}\n      {name && (\n        <HvTypography className={classes.brandName} variant=\"label\">\n          {name}\n        </HvTypography>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;AAoBa,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAE1C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA,qBAAC,SAAI,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QAC9C,UAAA;AAAA,IAAA;AAAA,IACA,QAAQ,QAAQ,oBAAC,OAAI,EAAA,WAAW,QAAQ,WAAW;AAAA,IACnD,4BACE,cAAa,EAAA,WAAW,QAAQ,WAAW,SAAQ,SACjD,UACH,KAAA,CAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}

package/dist/esm/components/Header/Brand/Brand.styles.js

@@ -1,13 +1,7 @@
 import { theme } from "@hitachivantara/uikit-styles";
 import { createClasses } from "../../../utils/classes.js";
-const {
-  staticClasses,
-  useClasses
-} = createClasses("HvHeader-Brand", {
-  root: {
-    display: "flex",
-    alignItems: "center"
-  },
+const { staticClasses, useClasses } = createClasses("HvHeader-Brand", {
+  root: { display: "flex", alignItems: "center" },
   separator: {
     width: 1,
     height: theme.space.sm,

package/dist/esm/components/Header/Brand/Brand.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Brand.styles.js","sources":["../../../../../src/components/Header/Brand/Brand.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvHeader-Brand\", {\n  root: { display: \"flex\", alignItems: \"center\" },\n  separator: {\n    width: 1,\n    height: theme.space.sm,\n    margin: theme.space.xs,\n    backgroundColor: theme.colors.secondary,\n  },\n  brandName: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","alignItems","separator","width","height","theme","space","sm","margin","xs","backgroundColor","colors","secondary","brandName"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,kBAAkB;AAAA,EAC3EC,MAAM;AAAA,IAAEC,SAAS;AAAA,IAAQC,YAAY;AAAA,EAAS;AAAA,EAC9CC,WAAW;AAAA,IACTC,OAAO;AAAA,IACPC,QAAQC,MAAMC,MAAMC;AAAAA,IACpBC,QAAQH,MAAMC,MAAMG;AAAAA,IACpBC,iBAAiBL,MAAMM,OAAOC;AAAAA,EAChC;AAAA,EACAC,WAAW,CAAC;AACd,CAAC;"}
+{"version":3,"file":"Brand.styles.js","sources":["../../../../../src/components/Header/Brand/Brand.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvHeader-Brand\", {\n  root: { display: \"flex\", alignItems: \"center\" },\n  separator: {\n    width: 1,\n    height: theme.space.sm,\n    margin: theme.space.xs,\n    backgroundColor: theme.colors.secondary,\n  },\n  brandName: {},\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA,EAC3E,MAAM,EAAE,SAAS,QAAQ,YAAY,SAAS;AAAA,EAC9C,WAAW;AAAA,IACT,OAAO;AAAA,IACP,QAAQ,MAAM,MAAM;AAAA,IACpB,QAAQ,MAAM,MAAM;AAAA,IACpB,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,WAAW,CAAC;AACd,CAAC;"}

package/dist/esm/components/Header/Header.js

@@ -10,19 +10,27 @@ const HvHeader = (props) => {
     position = "fixed",
     ...others
   } = useDefaultProps("HvHeader", props);
-  const {
-    classes,
-    cx,
-    css
-  } = useClasses(classesProp);
-  return /* @__PURE__ */ jsx("header", { className: cx(classes.root, classes.backgroundColor, css({
-    position,
-    ...position === "fixed" && {
-      top: 0,
-      left: "auto",
-      right: 0
+  const { classes, cx, css } = useClasses(classesProp);
+  return /* @__PURE__ */ jsx(
+    "header",
+    {
+      className: cx(
+        classes.root,
+        classes.backgroundColor,
+        css({
+          position,
+          ...position === "fixed" && {
+            top: 0,
+            left: "auto",
+            right: 0
+          }
+        }),
+        className
+      ),
+      ...others,
+      children: /* @__PURE__ */ jsx("div", { className: classes.header, children })
     }
-  }), className), ...others, children: /* @__PURE__ */ jsx("div", { className: classes.header, children }) });
+  );
 };
 export {
   HvHeader,

package/dist/esm/components/Header/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../../../../src/components/Header/Header.tsx"],"sourcesContent":["import { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useClasses, staticClasses } from \"./Header.styles\";\n\nexport { staticClasses as headerClasses };\n\nexport type HvHeaderClasses = ExtractNames<typeof useClasses>;\n\nexport type HvHeaderPosition =\n  | \"fixed\"\n  | \"absolute\"\n  | \"sticky\"\n  | \"static\"\n  | \"relative\";\n\nexport interface HvHeaderProps extends HvBaseProps {\n  /** The position of the header bar */\n  position?: HvHeaderPosition;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvHeaderClasses;\n}\n\n/**\n * Header component is used to render a header bar with logo and brand name, navigation and actions.\n */\nexport const HvHeader = (props: HvHeaderProps) => {\n  const {\n    className,\n    classes: classesProp,\n    children,\n    position = \"fixed\",\n    ...others\n  } = useDefaultProps(\"HvHeader\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  return (\n    <header\n      className={cx(\n        classes.root,\n        classes.backgroundColor,\n        css({\n          position,\n          ...(position === \"fixed\" && {\n            top: 0,\n            left: \"auto\",\n            right: 0,\n          }),\n        }),\n        className\n      )}\n      {...others}\n    >\n      <div className={classes.header}>{children}</div>\n    </header>\n  );\n};\n"],"names":["HvHeader","props","className","classes","classesProp","children","position","others","useDefaultProps","cx","css","useClasses","root","backgroundColor","top","left","right","header"],"mappings":";;;;AA2BaA,MAAAA,WAAWA,CAACC,UAAyB;AAC1C,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC,WAAW;AAAA,IACX,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,YAAYP,KAAK;AAE/B,QAAA;AAAA,IAAEE;AAAAA,IAASM;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,WAAWP,WAAW;AAGjD,SAAA,oBAAC,YACC,WAAWK,GACTN,QAAQS,MACRT,QAAQU,iBACRH,IAAI;AAAA,IACFJ;AAAAA,IACA,GAAIA,aAAa,WAAW;AAAA,MAC1BQ,KAAK;AAAA,MACLC,MAAM;AAAA,MACNC,OAAO;AAAA,IACT;AAAA,EACD,CAAA,GACDd,SACF,GACA,GAAIK,QAEJ,UAAC,oBAAA,OAAA,EAAI,WAAWJ,QAAQc,QAASZ,SAAS,CAAA,EAC5C,CAAA;AAEJ;"}
+{"version":3,"file":"Header.js","sources":["../../../../src/components/Header/Header.tsx"],"sourcesContent":["import { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useClasses, staticClasses } from \"./Header.styles\";\n\nexport { staticClasses as headerClasses };\n\nexport type HvHeaderClasses = ExtractNames<typeof useClasses>;\n\nexport type HvHeaderPosition =\n  | \"fixed\"\n  | \"absolute\"\n  | \"sticky\"\n  | \"static\"\n  | \"relative\";\n\nexport interface HvHeaderProps extends HvBaseProps {\n  /** The position of the header bar */\n  position?: HvHeaderPosition;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvHeaderClasses;\n}\n\n/**\n * Header component is used to render a header bar with logo and brand name, navigation and actions.\n */\nexport const HvHeader = (props: HvHeaderProps) => {\n  const {\n    className,\n    classes: classesProp,\n    children,\n    position = \"fixed\",\n    ...others\n  } = useDefaultProps(\"HvHeader\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  return (\n    <header\n      className={cx(\n        classes.root,\n        classes.backgroundColor,\n        css({\n          position,\n          ...(position === \"fixed\" && {\n            top: 0,\n            left: \"auto\",\n            right: 0,\n          }),\n        }),\n        className\n      )}\n      {...others}\n    >\n      <div className={classes.header}>{children}</div>\n    </header>\n  );\n};\n"],"names":[],"mappings":";;;;AA2Ba,MAAA,WAAW,CAAC,UAAyB;AAC1C,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AAErC,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AAGjD,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,IAAI;AAAA,UACF;AAAA,UACA,GAAI,aAAa,WAAW;AAAA,YAC1B,KAAK;AAAA,YACL,MAAM;AAAA,YACN,OAAO;AAAA,UACT;AAAA,QAAA,CACD;AAAA,QACD;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,QAAS,UAAS;AAAA,IAAA;AAAA,EAAA;AAGhD;"}

package/dist/esm/components/Header/Header.styles.js

@@ -1,9 +1,6 @@
 import { theme } from "@hitachivantara/uikit-styles";
 import { createClasses } from "../../utils/classes.js";
-const {
-  staticClasses,
-  useClasses
-} = createClasses("HvHeader", {
+const { staticClasses, useClasses } = createClasses("HvHeader", {
   root: {
     height: theme.header.height,
     backgroundColor: theme.colors.atmo1,

package/dist/esm/components/Header/Header.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.styles.js","sources":["../../../../src/components/Header/Header.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvHeader\", {\n  root: {\n    height: theme.header.height,\n    backgroundColor: theme.colors.atmo1,\n    display: \"flex\",\n    flexDirection: \"column\",\n    width: \"100%\",\n    boxSizing: \"border-box\",\n    flexShrink: 0,\n    zIndex: theme.zIndices.banner,\n    color: theme.colors.atmo1,\n    boxShadow: theme.colors.shadow,\n    borderTop: \"none\",\n  },\n  header: {\n    display: \"flex\",\n    alignItems: \"center\",\n    width: \"100%\",\n    height: \"100%\",\n    padding: `0 ${theme.space.sm}`,\n    boxShadow: theme.colors.shadow,\n    \"& > *:not(nav)\": {\n      zIndex: 2,\n    },\n  },\n  backgroundColor: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","height","theme","header","backgroundColor","colors","atmo1","display","flexDirection","width","boxSizing","flexShrink","zIndex","zIndices","banner","color","boxShadow","shadow","borderTop","alignItems","padding","space","sm"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,YAAY;AAAA,EACrEC,MAAM;AAAA,IACJC,QAAQC,MAAMC,OAAOF;AAAAA,IACrBG,iBAAiBF,MAAMG,OAAOC;AAAAA,IAC9BC,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,OAAO;AAAA,IACPC,WAAW;AAAA,IACXC,YAAY;AAAA,IACZC,QAAQV,MAAMW,SAASC;AAAAA,IACvBC,OAAOb,MAAMG,OAAOC;AAAAA,IACpBU,WAAWd,MAAMG,OAAOY;AAAAA,IACxBC,WAAW;AAAA,EACb;AAAA,EACAf,QAAQ;AAAA,IACNI,SAAS;AAAA,IACTY,YAAY;AAAA,IACZV,OAAO;AAAA,IACPR,QAAQ;AAAA,IACRmB,SAAU,KAAIlB,MAAMmB,MAAMC,EAAG;AAAA,IAC7BN,WAAWd,MAAMG,OAAOY;AAAAA,IACxB,kBAAkB;AAAA,MAChBL,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAR,iBAAiB,CAAC;AACpB,CAAC;"}
+{"version":3,"file":"Header.styles.js","sources":["../../../../src/components/Header/Header.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvHeader\", {\n  root: {\n    height: theme.header.height,\n    backgroundColor: theme.colors.atmo1,\n    display: \"flex\",\n    flexDirection: \"column\",\n    width: \"100%\",\n    boxSizing: \"border-box\",\n    flexShrink: 0,\n    zIndex: theme.zIndices.banner,\n    color: theme.colors.atmo1,\n    boxShadow: theme.colors.shadow,\n    borderTop: \"none\",\n  },\n  header: {\n    display: \"flex\",\n    alignItems: \"center\",\n    width: \"100%\",\n    height: \"100%\",\n    padding: `0 ${theme.space.sm}`,\n    boxShadow: theme.colors.shadow,\n    \"& > *:not(nav)\": {\n      zIndex: 2,\n    },\n  },\n  backgroundColor: {},\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,YAAY;AAAA,EACrE,MAAM;AAAA,IACJ,QAAQ,MAAM,OAAO;AAAA,IACrB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,SAAS;AAAA,IACT,eAAe;AAAA,IACf,OAAO;AAAA,IACP,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,QAAQ,MAAM,SAAS;AAAA,IACvB,OAAO,MAAM,OAAO;AAAA,IACpB,WAAW,MAAM,OAAO;AAAA,IACxB,WAAW;AAAA,EACb;AAAA,EACA,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS,KAAK,MAAM,MAAM,EAAE;AAAA,IAC5B,WAAW,MAAM,OAAO;AAAA,IACxB,kBAAkB;AAAA,MAChB,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,iBAAiB,CAAC;AACpB,CAAC;"}

package/dist/esm/components/Header/Navigation/MenuBar/Bar.js

@@ -13,18 +13,26 @@ const Bar = (props) => {
     children,
     classes: classesProp
   } = useDefaultProps("HvHeaderMenuBarBar", props);
-  const {
-    classes,
-    cx
-  } = useClasses(classesProp);
+  const { classes, cx } = useClasses(classesProp);
   const selectionPath = useContext(SelectionContext);
   const isMenu = type === "menu";
   const isActive = isMenu && data.filter((item) => item.id === selectionPath?.[1]).length > 0;
-  return /* @__PURE__ */ jsx("div", { className: cx(classes.root, classes[type], {
-    [classes.hidden]: isMenu,
-    [classes.active]: isActive
-  }, className), children: /* @__PURE__ */ jsx("ul", { className: classes.list, id, onFocus: () => {
-  }, children }) });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx(
+        classes.root,
+        classes[type],
+        {
+          [classes.hidden]: isMenu,
+          [classes.active]: isActive
+        },
+        className
+      ),
+      children: /* @__PURE__ */ jsx("ul", { className: classes.list, id, onFocus: () => {
+      }, children })
+    }
+  );
 };
 export {
   Bar,

package/dist/esm/components/Header/Navigation/MenuBar/Bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Bar.js","sources":["../../../../../../src/components/Header/Navigation/MenuBar/Bar.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useDefaultProps } from \"@core/hooks\";\n\nimport { SelectionContext } from \"../utils/SelectionContext\";\nimport { staticClasses, useClasses } from \"./Bar.styles\";\nimport { HvHeaderNavigationItemProp } from \"../useSelectionPath\";\n\nexport { staticClasses as headerMenuBarClasses };\n\nexport type HvHeaderMenuBarClasses = ExtractNames<typeof useClasses>;\n\nexport interface BarProps extends HvBaseProps {\n  data: HvHeaderNavigationItemProp[];\n  type?: \"menubar\" | \"menu\";\n  classes?: HvHeaderMenuBarClasses;\n}\n\nexport const Bar = (props: BarProps) => {\n  const {\n    id,\n    data = [],\n    type = \"menubar\",\n    className,\n    children,\n    classes: classesProp,\n  } = useDefaultProps(\"HvHeaderMenuBarBar\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const selectionPath = useContext(SelectionContext);\n\n  const isMenu = type === \"menu\";\n\n  const isActive =\n    isMenu && data.filter((item) => item.id === selectionPath?.[1]).length > 0;\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        classes[type],\n        {\n          [classes.hidden]: isMenu,\n          [classes.active]: isActive,\n        },\n        className\n      )}\n    >\n      <ul className={classes.list} id={id} onFocus={() => {}}>\n        {children}\n      </ul>\n    </div>\n  );\n};\n"],"names":["Bar","props","id","data","type","className","children","classes","classesProp","useDefaultProps","cx","useClasses","selectionPath","useContext","SelectionContext","isMenu","isActive","filter","item","length","root","hidden","active","list"],"mappings":";;;;;;AAqBaA,MAAAA,MAAMA,CAACC,UAAoB;AAChC,QAAA;AAAA,IACJC;AAAAA,IACAC,OAAO,CAAE;AAAA,IACTC,OAAO;AAAA,IACPC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,EAAAA,IACPC,gBAAgB,sBAAsBR,KAAK;AACzC,QAAA;AAAA,IAAEM;AAAAA,IAASG;AAAAA,EAAAA,IAAOC,WAAWH,WAAW;AAExCI,QAAAA,gBAAgBC,WAAWC,gBAAgB;AAEjD,QAAMC,SAASX,SAAS;AAElBY,QAAAA,WACJD,UAAUZ,KAAKc,OAAQC,CAAAA,SAASA,KAAKhB,OAAOU,gBAAgB,CAAC,CAAC,EAAEO,SAAS;AAGzE,SAAA,oBAAC,SACC,WAAWT,GACTH,QAAQa,MACRb,QAAQH,IAAI,GACZ;AAAA,IACE,CAACG,QAAQc,MAAM,GAAGN;AAAAA,IAClB,CAACR,QAAQe,MAAM,GAAGN;AAAAA,EACpB,GACAX,SACF,GAEA,UAAC,oBAAA,MAAA,EAAG,WAAWE,QAAQgB,MAAM,IAAQ,SAAS,MAAM;AAAA,EAAA,GACjDjB,UACH,EACF,CAAA;AAEJ;"}
+{"version":3,"file":"Bar.js","sources":["../../../../../../src/components/Header/Navigation/MenuBar/Bar.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useDefaultProps } from \"@core/hooks\";\n\nimport { SelectionContext } from \"../utils/SelectionContext\";\nimport { staticClasses, useClasses } from \"./Bar.styles\";\nimport { HvHeaderNavigationItemProp } from \"../useSelectionPath\";\n\nexport { staticClasses as headerMenuBarClasses };\n\nexport type HvHeaderMenuBarClasses = ExtractNames<typeof useClasses>;\n\nexport interface BarProps extends HvBaseProps {\n  data: HvHeaderNavigationItemProp[];\n  type?: \"menubar\" | \"menu\";\n  classes?: HvHeaderMenuBarClasses;\n}\n\nexport const Bar = (props: BarProps) => {\n  const {\n    id,\n    data = [],\n    type = \"menubar\",\n    className,\n    children,\n    classes: classesProp,\n  } = useDefaultProps(\"HvHeaderMenuBarBar\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const selectionPath = useContext(SelectionContext);\n\n  const isMenu = type === \"menu\";\n\n  const isActive =\n    isMenu && data.filter((item) => item.id === selectionPath?.[1]).length > 0;\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        classes[type],\n        {\n          [classes.hidden]: isMenu,\n          [classes.active]: isActive,\n        },\n        className\n      )}\n    >\n      <ul className={classes.list} id={id} onFocus={() => {}}>\n        {children}\n      </ul>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAqBa,MAAA,MAAM,CAAC,UAAoB;AAChC,QAAA;AAAA,IACJ;AAAA,IACA,OAAO,CAAC;AAAA,IACR,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAAA,IACP,gBAAgB,sBAAsB,KAAK;AAC/C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,gBAAgB,WAAW,gBAAgB;AAEjD,QAAM,SAAS,SAAS;AAExB,QAAM,WACJ,UAAU,KAAK,OAAO,CAAC,SAAS,KAAK,OAAO,gBAAgB,CAAC,CAAC,EAAE,SAAS;AAGzE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ,IAAI;AAAA,QACZ;AAAA,UACE,CAAC,QAAQ,MAAM,GAAG;AAAA,UAClB,CAAC,QAAQ,MAAM,GAAG;AAAA,QACpB;AAAA,QACA;AAAA,MACF;AAAA,MAEA,8BAAC,MAAG,EAAA,WAAW,QAAQ,MAAM,IAAQ,SAAS,MAAM;AAAA,SACjD,SACH,CAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/esm/components/Header/Navigation/MenuBar/Bar.styles.js

@@ -13,10 +13,7 @@ const hide = {
   boxShadow: "none",
   transitionDuration: "300ms"
 };
-const {
-  staticClasses,
-  useClasses
-} = createClasses("HvHeader-MenuBar", {
+const { staticClasses, useClasses } = createClasses("HvHeader-MenuBar", {
   root: {
     left: 0,
     width: "100%",
@@ -38,12 +35,8 @@ const {
     position: "relative",
     backgroundColor: theme.colors.atmo1
   },
-  hidden: {
-    ...hide
-  },
-  active: {
-    ...show
-  },
+  hidden: { ...hide },
+  active: { ...show },
   list: {
     margin: 0,
     padding: 0,

package/dist/esm/components/Header/Navigation/MenuBar/Bar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Bar.styles.js","sources":["../../../../../../src/components/Header/Navigation/MenuBar/Bar.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nconst show = {\n  top: theme.header.height,\n  transition: [\"top\"],\n  boxShadow: theme.colors.shadow,\n  transitionDuration: \"500ms\",\n  backgroundColor: theme.colors.atmo2,\n};\n\nconst hide = {\n  top: 0,\n  transition: [\"top\"],\n  boxShadow: \"none\",\n  transitionDuration: \"300ms\",\n};\n\nexport const { staticClasses, useClasses } = createClasses(\"HvHeader-MenuBar\", {\n  root: {\n    left: 0,\n    width: \"100%\",\n    height: \"100%\",\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n  },\n  menu: {\n    position: \"absolute\",\n    zIndex: -2,\n    height: theme.header.secondLevelHeight,\n    backgroundColor: theme.colors.atmo2,\n    \"& li > div\": {\n      marginTop: 0,\n    },\n  },\n  menubar: {\n    position: \"relative\",\n    backgroundColor: theme.colors.atmo1,\n  },\n  hidden: { ...hide },\n  active: { ...show },\n  list: {\n    margin: 0,\n    padding: 0,\n    display: \"inherit\",\n    alignItems: \"center\",\n    height: \"100%\",\n    \"&:hover $active\": {\n      ...hide,\n    },\n    \"& li:hover > $hidden\": {\n      ...show,\n    },\n\n    \"&:focus-within $active\": {\n      ...hide,\n      zIndex: -2,\n    },\n    \"& li:focus-within > $hidden\": {\n      ...show,\n      zIndex: -1,\n    },\n  },\n});\n"],"names":["show","top","theme","header","height","transition","boxShadow","colors","shadow","transitionDuration","backgroundColor","atmo2","hide","staticClasses","useClasses","createClasses","root","left","width","display","justifyContent","alignItems","menu","position","zIndex","secondLevelHeight","marginTop","menubar","atmo1","hidden","active","list","margin","padding"],"mappings":";;AAIA,MAAMA,OAAO;AAAA,EACXC,KAAKC,MAAMC,OAAOC;AAAAA,EAClBC,YAAY,CAAC,KAAK;AAAA,EAClBC,WAAWJ,MAAMK,OAAOC;AAAAA,EACxBC,oBAAoB;AAAA,EACpBC,iBAAiBR,MAAMK,OAAOI;AAChC;AAEA,MAAMC,OAAO;AAAA,EACXX,KAAK;AAAA,EACLI,YAAY,CAAC,KAAK;AAAA,EAClBC,WAAW;AAAA,EACXG,oBAAoB;AACtB;AAEa,MAAA;AAAA,EAAEI;AAAAA,EAAeC;AAAW,IAAIC,cAAc,oBAAoB;AAAA,EAC7EC,MAAM;AAAA,IACJC,MAAM;AAAA,IACNC,OAAO;AAAA,IACPd,QAAQ;AAAA,IACRe,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,EACd;AAAA,EACAC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,QAAQ;AAAA,IACRpB,QAAQF,MAAMC,OAAOsB;AAAAA,IACrBf,iBAAiBR,MAAMK,OAAOI;AAAAA,IAC9B,cAAc;AAAA,MACZe,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACAC,SAAS;AAAA,IACPJ,UAAU;AAAA,IACVb,iBAAiBR,MAAMK,OAAOqB;AAAAA,EAChC;AAAA,EACAC,QAAQ;AAAA,IAAE,GAAGjB;AAAAA,EAAK;AAAA,EAClBkB,QAAQ;AAAA,IAAE,GAAG9B;AAAAA,EAAK;AAAA,EAClB+B,MAAM;AAAA,IACJC,QAAQ;AAAA,IACRC,SAAS;AAAA,IACTd,SAAS;AAAA,IACTE,YAAY;AAAA,IACZjB,QAAQ;AAAA,IACR,mBAAmB;AAAA,MACjB,GAAGQ;AAAAA,IACL;AAAA,IACA,wBAAwB;AAAA,MACtB,GAAGZ;AAAAA,IACL;AAAA,IAEA,0BAA0B;AAAA,MACxB,GAAGY;AAAAA,MACHY,QAAQ;AAAA,IACV;AAAA,IACA,+BAA+B;AAAA,MAC7B,GAAGxB;AAAAA,MACHwB,QAAQ;AAAA,IACV;AAAA,EACF;AACF,CAAC;"}
+{"version":3,"file":"Bar.styles.js","sources":["../../../../../../src/components/Header/Navigation/MenuBar/Bar.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nconst show = {\n  top: theme.header.height,\n  transition: [\"top\"],\n  boxShadow: theme.colors.shadow,\n  transitionDuration: \"500ms\",\n  backgroundColor: theme.colors.atmo2,\n};\n\nconst hide = {\n  top: 0,\n  transition: [\"top\"],\n  boxShadow: \"none\",\n  transitionDuration: \"300ms\",\n};\n\nexport const { staticClasses, useClasses } = createClasses(\"HvHeader-MenuBar\", {\n  root: {\n    left: 0,\n    width: \"100%\",\n    height: \"100%\",\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n  },\n  menu: {\n    position: \"absolute\",\n    zIndex: -2,\n    height: theme.header.secondLevelHeight,\n    backgroundColor: theme.colors.atmo2,\n    \"& li > div\": {\n      marginTop: 0,\n    },\n  },\n  menubar: {\n    position: \"relative\",\n    backgroundColor: theme.colors.atmo1,\n  },\n  hidden: { ...hide },\n  active: { ...show },\n  list: {\n    margin: 0,\n    padding: 0,\n    display: \"inherit\",\n    alignItems: \"center\",\n    height: \"100%\",\n    \"&:hover $active\": {\n      ...hide,\n    },\n    \"& li:hover > $hidden\": {\n      ...show,\n    },\n\n    \"&:focus-within $active\": {\n      ...hide,\n      zIndex: -2,\n    },\n    \"& li:focus-within > $hidden\": {\n      ...show,\n      zIndex: -1,\n    },\n  },\n});\n"],"names":[],"mappings":";;AAIA,MAAM,OAAO;AAAA,EACX,KAAK,MAAM,OAAO;AAAA,EAClB,YAAY,CAAC,KAAK;AAAA,EAClB,WAAW,MAAM,OAAO;AAAA,EACxB,oBAAoB;AAAA,EACpB,iBAAiB,MAAM,OAAO;AAChC;AAEA,MAAM,OAAO;AAAA,EACX,KAAK;AAAA,EACL,YAAY,CAAC,KAAK;AAAA,EAClB,WAAW;AAAA,EACX,oBAAoB;AACtB;AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,oBAAoB;AAAA,EAC7E,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,EACd;AAAA,EACA,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,QAAQ,MAAM,OAAO;AAAA,IACrB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,cAAc;AAAA,MACZ,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACA,SAAS;AAAA,IACP,UAAU;AAAA,IACV,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,QAAQ,EAAE,GAAG,KAAK;AAAA,EAClB,QAAQ,EAAE,GAAG,KAAK;AAAA,EAClB,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,mBAAmB;AAAA,MACjB,GAAG;AAAA,IACL;AAAA,IACA,wBAAwB;AAAA,MACtB,GAAG;AAAA,IACL;AAAA,IAEA,0BAA0B;AAAA,MACxB,GAAG;AAAA,MACH,QAAQ;AAAA,IACV;AAAA,IACA,+BAA+B;AAAA,MAC7B,GAAG;AAAA,MACH,QAAQ;AAAA,IACV;AAAA,EACF;AACF,CAAC;"}

package/dist/esm/components/Header/Navigation/MenuBar/MenuBar.js

@@ -12,7 +12,17 @@ const HvHeaderMenuBar = (props) => {
     classes,
     ...others
   } = useDefaultProps("HvHeaderMenuBar", props);
-  return /* @__PURE__ */ jsx(Bar, { data, type, classes, ...others, children: data.map((item) => /* @__PURE__ */ jsx(HvHeaderMenuItem, { item, type, onClick, levels, currentLevel }, item.id)) });
+  return /* @__PURE__ */ jsx(Bar, { data, type, classes, ...others, children: data.map((item) => /* @__PURE__ */ jsx(
+    HvHeaderMenuItem,
+    {
+      item,
+      type,
+      onClick,
+      levels,
+      currentLevel
+    },
+    item.id
+  )) });
 };
 export {
   HvHeaderMenuBar

package/dist/esm/components/Header/Navigation/MenuBar/MenuBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuBar.js","sources":["../../../../../../src/components/Header/Navigation/MenuBar/MenuBar.tsx"],"sourcesContent":["import { MouseEvent } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\n\nimport { useDefaultProps } from \"@core/hooks\";\n\nimport { HvHeaderMenuItem } from \"../MenuItem\";\nimport { HvHeaderNavigationItemProp } from \"../useSelectionPath\";\nimport { Bar, BarProps, HvHeaderMenuBarClasses } from \"./Bar\";\n\nexport interface HvHeaderMenuBarProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  data: HvHeaderNavigationItemProp[];\n  type?: BarProps[\"type\"];\n  onClick?: (event: MouseEvent, selection: HvHeaderNavigationItemProp) => void;\n  levels: number;\n  currentLevel: number;\n  classes?: HvHeaderMenuBarClasses;\n}\n\nexport const HvHeaderMenuBar = (props: HvHeaderMenuBarProps) => {\n  const {\n    data = [],\n    onClick,\n    type = \"menubar\",\n    levels,\n    currentLevel,\n    classes,\n    ...others\n  } = useDefaultProps(\"HvHeaderMenuBar\", props);\n  return (\n    <Bar data={data} type={type} classes={classes} {...others}>\n      {data.map((item: HvHeaderNavigationItemProp) => (\n        <HvHeaderMenuItem\n          key={item.id}\n          item={item}\n          type={type}\n          onClick={onClick}\n          levels={levels}\n          currentLevel={currentLevel}\n        />\n      ))}\n    </Bar>\n  );\n};\n"],"names":["HvHeaderMenuBar","props","data","onClick","type","levels","currentLevel","classes","others","useDefaultProps","map","item","id"],"mappings":";;;;AAoBaA,MAAAA,kBAAkBA,CAACC,UAAgC;AACxD,QAAA;AAAA,IACJC,OAAO,CAAE;AAAA,IACTC;AAAAA,IACAC,OAAO;AAAA,IACPC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,mBAAmBR,KAAK;AAE1C,SAAA,oBAAC,OAAI,MAAY,MAAY,SAAsBO,GAAAA,QAChDN,eAAKQ,IAAI,CAACC,SACR,oBAAA,kBAAA,EAEC,MACA,MACA,SACA,QACA,aALKA,GAAAA,KAAKC,EAKiB,CAE9B,EACH,CAAA;AAEJ;"}
+{"version":3,"file":"MenuBar.js","sources":["../../../../../../src/components/Header/Navigation/MenuBar/MenuBar.tsx"],"sourcesContent":["import { MouseEvent } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\n\nimport { useDefaultProps } from \"@core/hooks\";\n\nimport { HvHeaderMenuItem } from \"../MenuItem\";\nimport { HvHeaderNavigationItemProp } from \"../useSelectionPath\";\nimport { Bar, BarProps, HvHeaderMenuBarClasses } from \"./Bar\";\n\nexport interface HvHeaderMenuBarProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  data: HvHeaderNavigationItemProp[];\n  type?: BarProps[\"type\"];\n  onClick?: (event: MouseEvent, selection: HvHeaderNavigationItemProp) => void;\n  levels: number;\n  currentLevel: number;\n  classes?: HvHeaderMenuBarClasses;\n}\n\nexport const HvHeaderMenuBar = (props: HvHeaderMenuBarProps) => {\n  const {\n    data = [],\n    onClick,\n    type = \"menubar\",\n    levels,\n    currentLevel,\n    classes,\n    ...others\n  } = useDefaultProps(\"HvHeaderMenuBar\", props);\n  return (\n    <Bar data={data} type={type} classes={classes} {...others}>\n      {data.map((item: HvHeaderNavigationItemProp) => (\n        <HvHeaderMenuItem\n          key={item.id}\n          item={item}\n          type={type}\n          onClick={onClick}\n          levels={levels}\n          currentLevel={currentLevel}\n        />\n      ))}\n    </Bar>\n  );\n};\n"],"names":[],"mappings":";;;;AAoBa,MAAA,kBAAkB,CAAC,UAAgC;AACxD,QAAA;AAAA,IACJ,OAAO,CAAC;AAAA,IACR;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,mBAAmB,KAAK;AAE1C,SAAA,oBAAC,KAAI,EAAA,MAAY,MAAY,SAAmB,GAAG,QAChD,UAAA,KAAK,IAAI,CAAC,SACT;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IALK,KAAK;AAAA,EAOb,CAAA,EACH,CAAA;AAEJ;"}

package/dist/esm/components/Header/Navigation/MenuItem/MenuItem.js

@@ -26,10 +26,7 @@ const traverseItem = (node) => {
       i += 1;
     }
   }
-  return {
-    href,
-    target
-  };
+  return { href, target };
 };
 const HvHeaderMenuItem = (props) => {
   const {
@@ -42,17 +39,10 @@ const HvHeaderMenuItem = (props) => {
     classes: classesProp,
     className
   } = useDefaultProps("HvHeaderMenuItem", props);
-  const {
-    classes,
-    cx
-  } = useClasses(classesProp);
+  const { classes, cx } = useClasses(classesProp);
   const selectionPath = useContext(SelectionContext);
-  const {
-    dispatch
-  } = useContext(FocusContext);
-  const {
-    data
-  } = item;
+  const { dispatch } = useContext(FocusContext);
+  const { data } = item;
   const hasSubLevel = data && data.length;
   const isMenu = type === "menu";
   const isSelected = selectionPath?.[isMenu ? 1 : 0] === item.id;
@@ -66,50 +56,84 @@ const HvHeaderMenuItem = (props) => {
     }
   };
   const handleFocus = (event) => {
-    dispatch?.({
-      type: "setItemFocused",
-      itemFocused: event.currentTarget
-    });
+    dispatch?.({ type: "setItemFocused", itemFocused: event.currentTarget });
   };
   const itemProps = {
     onClick: actionHandler,
     onKeyDown: actionHandler,
     onFocus: handleFocus
   };
-  const label = /* @__PURE__ */ jsx(HvTypography, { component: "span", variant: isSelected ? "label" : "body", "data-text": item.label, children: item.label });
+  const label = /* @__PURE__ */ jsx(
+    HvTypography,
+    {
+      component: "span",
+      variant: isSelected ? "label" : "body",
+      "data-text": item.label,
+      children: item.label
+    }
+  );
   let itemHref = item?.href;
   let itemTarget = item?.target;
   if (item?.href == null) {
-    const {
-      href,
-      target
-    } = traverseItem(item);
+    const { href, target } = traverseItem(item);
     itemHref = href;
     itemTarget = target;
   }
-  return /* @__PURE__ */ jsxs("li", { id, className: cx(classes.root, {
-    [classes.menu]: isMenu,
-    [classes.menubar]: !isMenu,
-    [classes.selected]: !!isSelected
-  }, className), children: [
-    itemHref ? /* @__PURE__ */ jsx(
-      "a",
-      {
-        className: classes.link,
-        href: itemHref,
-        target: itemTarget,
-        ...itemProps,
-        "aria-current": isCurrent,
-        "aria-label": item.label,
-        children: label
-      }
-    ) : (
-      // keeping this code path for backwards compatibility, but
-      // shouldn't really be used as it's not accessible
-      /* @__PURE__ */ jsx("div", { className: classes.button, role: "button", ...itemProps, tabIndex: 0, "aria-current": isCurrent, children: label })
-    ),
-    hasSubLevel && currentLevel < levels && currentLevel < 2 && /* @__PURE__ */ jsx(Bar, { data, type: "menu", children: data.map((itm) => /* @__PURE__ */ jsx(HvHeaderMenuItem, { item: itm, type: "menu", onClick, levels, currentLevel: currentLevel + 1 }, itm.id)) })
-  ] }, item.label);
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      id,
+      className: cx(
+        classes.root,
+        {
+          [classes.menu]: isMenu,
+          [classes.menubar]: !isMenu,
+          [classes.selected]: !!isSelected
+        },
+        className
+      ),
+      children: [
+        itemHref ? /* @__PURE__ */ jsx(
+          "a",
+          {
+            className: classes.link,
+            href: itemHref,
+            target: itemTarget,
+            ...itemProps,
+            "aria-current": isCurrent,
+            "aria-label": item.label,
+            children: label
+          }
+        ) : (
+          // keeping this code path for backwards compatibility, but
+          // shouldn't really be used as it's not accessible
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: classes.button,
+              role: "button",
+              ...itemProps,
+              tabIndex: 0,
+              "aria-current": isCurrent,
+              children: label
+            }
+          )
+        ),
+        hasSubLevel && currentLevel < levels && currentLevel < 2 && /* @__PURE__ */ jsx(Bar, { data, type: "menu", children: data.map((itm) => /* @__PURE__ */ jsx(
+          HvHeaderMenuItem,
+          {
+            item: itm,
+            type: "menu",
+            onClick,
+            levels,
+            currentLevel: currentLevel + 1
+          },
+          itm.id
+        )) })
+      ]
+    },
+    item.label
+  );
 };
 export {
   HvHeaderMenuItem,

package/dist/esm/components/Header/Navigation/MenuItem/MenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.js","sources":["../../../../../../src/components/Header/Navigation/MenuItem/MenuItem.tsx"],"sourcesContent":["import React, { MouseEvent, useContext } from \"react\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useDefaultProps } from \"@core/hooks\";\n\nimport { FocusContext } from \"../utils/FocusContext\";\nimport { SelectionContext } from \"../utils/SelectionContext\";\nimport { useClasses, staticClasses } from \"./MenuItem.styles\";\nimport { HvHeaderNavigationItemProp } from \"../useSelectionPath\";\nimport { Bar } from \"../MenuBar/Bar\";\n\nexport { staticClasses as headerMenuItemClasses };\n\nexport type HvHeaderMenuItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvHeaderMenuItemProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  item: HvHeaderNavigationItemProp;\n  type?: string;\n  onClick?: (event: MouseEvent, selection: HvHeaderNavigationItemProp) => void;\n  levels: number;\n  currentLevel: number;\n  classes?: HvHeaderMenuItemClasses;\n}\n\n// Traverse the tree of items and return the first href it finds\nconst traverseItem = (\n  node: HvHeaderNavigationItemProp\n): { href?: string; target?: string } => {\n  let href: string | undefined;\n  let target: string | undefined;\n\n  if (node?.href) {\n    href = node?.href;\n    target = node?.target;\n  } else if (node?.data != null && node?.data?.length > 0) {\n    let i = 0;\n    while (href == null && i < node.data.length) {\n      const childNavItem = traverseItem(node?.data[i]);\n      if (childNavItem?.href != null) {\n        href = childNavItem?.href;\n        target = childNavItem?.target;\n        break;\n      }\n\n      i += 1;\n    }\n  }\n\n  return { href, target };\n};\n\nexport const HvHeaderMenuItem = (props: HvHeaderMenuItemProps) => {\n  const {\n    id,\n    item,\n    type,\n    onClick,\n    levels,\n    currentLevel,\n    classes: classesProp,\n    className,\n  } = useDefaultProps(\"HvHeaderMenuItem\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const selectionPath = useContext(SelectionContext);\n\n  const { dispatch } = useContext(FocusContext);\n\n  const { data } = item;\n\n  const hasSubLevel = data && data.length;\n\n  const isMenu = type === \"menu\";\n\n  const isSelected = selectionPath?.[isMenu ? 1 : 0] === item.id;\n\n  // true: if the item is part of the selection path but is not the current page the user is seeing, i.e has more sub levels\n  // page: used when the selected item is actually the current page the user is seeing\n  const isCurrent = isSelected ? (hasSubLevel ? true : \"page\") : undefined;\n\n  const actionHandler = (event: any) => {\n    if (\n      event.type === \"click\" ||\n      isKey(event, \"Enter\") ||\n      isKey(event, \"Space\")\n    ) {\n      if (event.type === \"click\") {\n        event.currentTarget.blur();\n      }\n\n      onClick?.(event, item);\n    }\n  };\n\n  const handleFocus = (event: React.FocusEvent) => {\n    dispatch?.({ type: \"setItemFocused\", itemFocused: event.currentTarget });\n  };\n\n  const itemProps = {\n    onClick: actionHandler,\n    onKeyDown: actionHandler,\n    onFocus: handleFocus,\n  };\n\n  const label = (\n    <HvTypography\n      component=\"span\"\n      variant={isSelected ? \"label\" : \"body\"}\n      data-text={item.label}\n    >\n      {item.label}\n    </HvTypography>\n  );\n\n  let itemHref = item?.href;\n  let itemTarget = item?.target;\n\n  // apps should configure the href even on parent items without content\n  // so the fallback logic is theirs, but if not we'll do our best to find a link\n  if (item?.href == null) {\n    const { href, target } = traverseItem(item);\n    itemHref = href;\n    itemTarget = target;\n  }\n\n  return (\n    <li\n      id={id}\n      key={item.label}\n      className={cx(\n        classes.root,\n        {\n          [classes.menu]: isMenu,\n          [classes.menubar]: !isMenu,\n          [classes.selected]: !!isSelected,\n        },\n        className\n      )}\n    >\n      {itemHref ? (\n        <a\n          className={classes.link}\n          href={itemHref}\n          target={itemTarget}\n          {...itemProps}\n          aria-current={isCurrent}\n          // Fix for a possible bug in playwright where, even though hidden from screen readers and not appearing in the accessibility\n          // tree, due to the styling duplication (span::after - using 'data-text'), locators have to double the name.\n          aria-label={item.label}\n        >\n          {label}\n        </a>\n      ) : (\n        // keeping this code path for backwards compatibility, but\n        // shouldn't really be used as it's not accessible\n        <div\n          className={classes.button}\n          role=\"button\"\n          {...itemProps}\n          tabIndex={0}\n          aria-current={isCurrent}\n        >\n          {label}\n        </div>\n      )}\n      {/* Limits levels to no more than 2. More than that is not expected and not in DS. */}\n      {hasSubLevel && currentLevel < levels && currentLevel < 2 && (\n        <Bar data={data} type=\"menu\">\n          {data.map((itm: HvHeaderNavigationItemProp) => (\n            <HvHeaderMenuItem\n              key={itm.id}\n              item={itm}\n              type=\"menu\"\n              onClick={onClick}\n              levels={levels}\n              currentLevel={currentLevel + 1}\n            />\n          ))}\n        </Bar>\n      )}\n    </li>\n  );\n};\n"],"names":["traverseItem","node","href","target","data","length","i","childNavItem","HvHeaderMenuItem","props","id","item","type","onClick","levels","currentLevel","classes","classesProp","className","useDefaultProps","cx","useClasses","selectionPath","useContext","SelectionContext","dispatch","FocusContext","hasSubLevel","isMenu","isSelected","isCurrent","undefined","actionHandler","event","isKey","currentTarget","blur","handleFocus","itemFocused","itemProps","onKeyDown","onFocus","label","itemHref","itemTarget","root","menu","menubar","selected","link","button","map","itm"],"mappings":"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"}
+{"version":3,"file":"MenuItem.js","sources":["../../../../../../src/components/Header/Navigation/MenuItem/MenuItem.tsx"],"sourcesContent":["import React, { MouseEvent, useContext } from \"react\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useDefaultProps } from \"@core/hooks\";\n\nimport { FocusContext } from \"../utils/FocusContext\";\nimport { SelectionContext } from \"../utils/SelectionContext\";\nimport { useClasses, staticClasses } from \"./MenuItem.styles\";\nimport { HvHeaderNavigationItemProp } from \"../useSelectionPath\";\nimport { Bar } from \"../MenuBar/Bar\";\n\nexport { staticClasses as headerMenuItemClasses };\n\nexport type HvHeaderMenuItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvHeaderMenuItemProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  item: HvHeaderNavigationItemProp;\n  type?: string;\n  onClick?: (event: MouseEvent, selection: HvHeaderNavigationItemProp) => void;\n  levels: number;\n  currentLevel: number;\n  classes?: HvHeaderMenuItemClasses;\n}\n\n// Traverse the tree of items and return the first href it finds\nconst traverseItem = (\n  node: HvHeaderNavigationItemProp\n): { href?: string; target?: string } => {\n  let href: string | undefined;\n  let target: string | undefined;\n\n  if (node?.href) {\n    href = node?.href;\n    target = node?.target;\n  } else if (node?.data != null && node?.data?.length > 0) {\n    let i = 0;\n    while (href == null && i < node.data.length) {\n      const childNavItem = traverseItem(node?.data[i]);\n      if (childNavItem?.href != null) {\n        href = childNavItem?.href;\n        target = childNavItem?.target;\n        break;\n      }\n\n      i += 1;\n    }\n  }\n\n  return { href, target };\n};\n\nexport const HvHeaderMenuItem = (props: HvHeaderMenuItemProps) => {\n  const {\n    id,\n    item,\n    type,\n    onClick,\n    levels,\n    currentLevel,\n    classes: classesProp,\n    className,\n  } = useDefaultProps(\"HvHeaderMenuItem\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const selectionPath = useContext(SelectionContext);\n\n  const { dispatch } = useContext(FocusContext);\n\n  const { data } = item;\n\n  const hasSubLevel = data && data.length;\n\n  const isMenu = type === \"menu\";\n\n  const isSelected = selectionPath?.[isMenu ? 1 : 0] === item.id;\n\n  // true: if the item is part of the selection path but is not the current page the user is seeing, i.e has more sub levels\n  // page: used when the selected item is actually the current page the user is seeing\n  const isCurrent = isSelected ? (hasSubLevel ? true : \"page\") : undefined;\n\n  const actionHandler = (event: any) => {\n    if (\n      event.type === \"click\" ||\n      isKey(event, \"Enter\") ||\n      isKey(event, \"Space\")\n    ) {\n      if (event.type === \"click\") {\n        event.currentTarget.blur();\n      }\n\n      onClick?.(event, item);\n    }\n  };\n\n  const handleFocus = (event: React.FocusEvent) => {\n    dispatch?.({ type: \"setItemFocused\", itemFocused: event.currentTarget });\n  };\n\n  const itemProps = {\n    onClick: actionHandler,\n    onKeyDown: actionHandler,\n    onFocus: handleFocus,\n  };\n\n  const label = (\n    <HvTypography\n      component=\"span\"\n      variant={isSelected ? \"label\" : \"body\"}\n      data-text={item.label}\n    >\n      {item.label}\n    </HvTypography>\n  );\n\n  let itemHref = item?.href;\n  let itemTarget = item?.target;\n\n  // apps should configure the href even on parent items without content\n  // so the fallback logic is theirs, but if not we'll do our best to find a link\n  if (item?.href == null) {\n    const { href, target } = traverseItem(item);\n    itemHref = href;\n    itemTarget = target;\n  }\n\n  return (\n    <li\n      id={id}\n      key={item.label}\n      className={cx(\n        classes.root,\n        {\n          [classes.menu]: isMenu,\n          [classes.menubar]: !isMenu,\n          [classes.selected]: !!isSelected,\n        },\n        className\n      )}\n    >\n      {itemHref ? (\n        <a\n          className={classes.link}\n          href={itemHref}\n          target={itemTarget}\n          {...itemProps}\n          aria-current={isCurrent}\n          // Fix for a possible bug in playwright where, even though hidden from screen readers and not appearing in the accessibility\n          // tree, due to the styling duplication (span::after - using 'data-text'), locators have to double the name.\n          aria-label={item.label}\n        >\n          {label}\n        </a>\n      ) : (\n        // keeping this code path for backwards compatibility, but\n        // shouldn't really be used as it's not accessible\n        <div\n          className={classes.button}\n          role=\"button\"\n          {...itemProps}\n          tabIndex={0}\n          aria-current={isCurrent}\n        >\n          {label}\n        </div>\n      )}\n      {/* Limits levels to no more than 2. More than that is not expected and not in DS. */}\n      {hasSubLevel && currentLevel < levels && currentLevel < 2 && (\n        <Bar data={data} type=\"menu\">\n          {data.map((itm: HvHeaderNavigationItemProp) => (\n            <HvHeaderMenuItem\n              key={itm.id}\n              item={itm}\n              type=\"menu\"\n              onClick={onClick}\n              levels={levels}\n              currentLevel={currentLevel + 1}\n            />\n          ))}\n        </Bar>\n      )}\n    </li>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/components/Header/Navigation/MenuItem/MenuItem.styles.js

@@ -36,65 +36,65 @@ const item = {
     }
   }
 };
-const {
-  staticClasses,
-  useClasses
-} = createClasses("HvHeader-MenuItem", {
-  root: {
-    display: "inline",
-    "&:hover": {
-      backgroundColor: theme.colors.containerBackgroundHover
+const { staticClasses, useClasses } = createClasses(
+  "HvHeader-MenuItem",
+  {
+    root: {
+      display: "inline",
+      "&:hover": {
+        backgroundColor: theme.colors.containerBackgroundHover
+      },
+      "&:focus-within": {
+        backgroundColor: theme.colors.containerBackgroundHover
+      }
     },
-    "&:focus-within": {
-      backgroundColor: theme.colors.containerBackgroundHover
-    }
-  },
-  menu: {
-    marginTop: 0,
-    paddingBottom: "4px",
-    paddingTop: "4px",
-    height: "100%",
-    borderTop: "none",
-    borderBottom: `4px solid ${theme.colors.atmo2}`
-  },
-  menubar: {
-    marginTop: "0px",
-    paddingBottom: "4px",
-    paddingTop: "4px",
-    height: "100%",
-    borderTop: `0px solid ${theme.colors.atmo1}`,
-    borderBottom: `${"4px"} solid ${theme.colors.atmo1}`
-  },
-  selected: {
-    "&$menu": {
+    menu: {
       marginTop: 0,
-      paddingBottom: 0,
+      paddingBottom: "4px",
+      paddingTop: "4px",
+      height: "100%",
       borderTop: "none",
-      borderBottom: `4px solid ${theme.colors.secondary}`,
+      borderBottom: `4px solid ${theme.colors.atmo2}`
+    },
+    menubar: {
+      marginTop: "0px",
+      paddingBottom: "4px",
       paddingTop: "4px",
       height: "100%",
-      "& > * > span": {
-        color: theme.colors.secondary
+      borderTop: `0px solid ${theme.colors.atmo1}`,
+      borderBottom: `${"4px"} solid ${theme.colors.atmo1}`
+    },
+    selected: {
+      "&$menu": {
+        marginTop: 0,
+        paddingBottom: 0,
+        borderTop: "none",
+        borderBottom: `4px solid ${theme.colors.secondary}`,
+        paddingTop: "4px",
+        height: "100%",
+        "& > * > span": {
+          color: theme.colors.secondary
+        }
+      },
+      "&$menubar": {
+        marginTop: 0,
+        paddingBottom: 0,
+        borderTop: "none",
+        borderBottom: `4px solid ${theme.colors.secondary}`,
+        paddingTop: "4px",
+        height: "100%"
       }
     },
-    "&$menubar": {
-      marginTop: 0,
-      paddingBottom: 0,
-      borderTop: "none",
-      borderBottom: `4px solid ${theme.colors.secondary}`,
-      paddingTop: "4px",
-      height: "100%"
+    link: {
+      textDecoration: "none",
+      ...item
+    },
+    button: {
+      color: "inherit",
+      ...item
     }
-  },
-  link: {
-    textDecoration: "none",
-    ...item
-  },
-  button: {
-    color: "inherit",
-    ...item
   }
-});
+);
 export {
   staticClasses,
   useClasses