@hitachivantara/uikit-react-core 5.18.0 → 5.18.2

package/dist/esm/components/Typography/Typography.js

@@ -1,26 +1,10 @@
-import _styled from "@emotion/styled/base";
-import { forwardRef, useMemo } from "react";
-import { transientOptions } from "../../utils/transientOptions.js";
-import { theme } from "@hitachivantara/uikit-styles";
-import { clsx } from "clsx";
+import { forwardRef } from "react";
 import { mapVariant } from "./utils.js";
-import typographyClasses from "./typographyClasses.js";
+import { useClasses } from "./Typography.styles.js";
+import { staticClasses } from "./Typography.styles.js";
 import { jsx } from "@emotion/react/jsx-runtime";
 import { useTheme } from "../../hooks/useTheme.js";
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
+const typographyVariants = ["display", "title1", "title2", "title3", "title4", "body", "label", "caption1", "caption2"];
 const HvTypographyMap = {
   display: "h1",
   title1: "h1",
@@ -46,134 +30,40 @@ const HvTypographyMap = {
   vizTextDisabled: "p",
   xsInlineLink: "p"
 };
-const getStyledComponent = (c) => /* @__PURE__ */ _styled(c, process.env.NODE_ENV === "production" ? _extends({}, {
-  target: "e1tnpalo0"
-}, transientOptions) : _extends({}, {
-  target: "e1tnpalo0",
-  label: "getStyledComponent"
-}, transientOptions))(({
-  $variant,
-  $link = false,
-  $disabled = false,
-  $noWrap = false
-}) => ({
-  ...$variant === "display" && {
-    ...theme.typography.display
-  },
-  ...$variant === "title1" && {
-    ...theme.typography.title1
-  },
-  ...$variant === "title2" && {
-    ...theme.typography.title2
-  },
-  ...$variant === "title3" && {
-    ...theme.typography.title3
-  },
-  ...$variant === "title4" && {
-    ...theme.typography.title4
-  },
-  ...$variant === "body" && {
-    ...theme.typography.body
-  },
-  ...$variant === "label" && {
-    ...theme.typography.label
-  },
-  ...$variant === "caption1" && {
-    ...theme.typography.caption1
-  },
-  ...$variant === "caption2" && {
-    ...theme.typography.caption2
-  },
-  // LEGACY
-  ...$variant === "5xlTitle" && {
-    ...theme.typography["5xlTitle"]
-  },
-  ...$variant === "4xlTitle" && {
-    ...theme.typography["4xlTitle"]
-  },
-  ...$variant === "xxlTitle" && {
-    ...theme.typography.xxlTitle
-  },
-  ...$variant === "lTitle" && {
-    ...theme.typography.lTitle
-  },
-  ...$variant === "sTitle" && {
-    ...theme.typography.sTitle
-  },
-  ...$variant === "xxsTitle" && {
-    ...theme.typography.xxsTitle
-  },
-  ...$variant === "sectionTitle" && {
-    ...theme.typography.sectionTitle,
-    textTransform: "uppercase"
-  },
-  ...$variant === "placeholderText" && {
-    ...theme.typography.placeholderText
-  },
-  ...$variant === "link" && {
-    ...theme.typography.link,
-    textDecoration: "underline",
-    cursor: "pointer"
-  },
-  ...$variant === "disabledText" && {
-    ...theme.typography.disabledText
-  },
-  ...$variant === "selectedNavText" && {
-    ...theme.typography.selectedNavText
-  },
-  ...$variant === "vizTextDisabled" && {
-    ...theme.typography.vizTextDisabled
-  },
-  ...$variant === "xsInlineLink" && {
-    ...theme.typography.xsInlineLink
-  },
-  fontFamily: theme.fontFamily.body,
-  // ADDED PROPS
-  ...$link && {
-    color: theme.colors.primary,
-    textDecoration: "underline",
-    cursor: "pointer"
-  },
-  ...$disabled && {
-    color: theme.colors.secondary_60
-  },
-  ...$noWrap && {
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap"
-  }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVHlwb2dyYXBoeS9UeXBvZ3JhcGh5LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE2RUUiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9UeXBvZ3JhcGh5L1R5cG9ncmFwaHkudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgZm9yd2FyZFJlZixcbiAgdXNlTWVtbyxcbiAgQ1NTUHJvcGVydGllcyxcbiAgQWxsSFRNTEF0dHJpYnV0ZXMsXG4gIFJlZixcbn0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyBIdkJhc2VQcm9wcyB9IGZyb20gXCJAY29yZS90eXBlc1wiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyB0cmFuc2llbnRPcHRpb25zIH0gZnJvbSBcIkBjb3JlL3V0aWxzL3RyYW5zaWVudE9wdGlvbnNcIjtcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcbmltcG9ydCB7IGNsc3ggfSBmcm9tIFwiY2xzeFwiO1xuaW1wb3J0IHsgdXNlVGhlbWUgfSBmcm9tIFwiQGNvcmUvaG9va3NcIjtcbmltcG9ydCB7IG1hcFZhcmlhbnQgfSBmcm9tIFwiLi91dGlsc1wiO1xuaW1wb3J0IHR5cG9ncmFwaHlDbGFzc2VzLCB7IEh2VHlwb2dyYXBoeUNsYXNzZXMgfSBmcm9tIFwiLi90eXBvZ3JhcGh5Q2xhc3Nlc1wiO1xuXG5leHBvcnQgdHlwZSBIdlR5cG9ncmFwaHlWYXJpYW50cyA9XG4gIHwgXCJkaXNwbGF5XCJcbiAgfCBcInRpdGxlMVwiXG4gIHwgXCJ0aXRsZTJcIlxuICB8IFwidGl0bGUzXCJcbiAgfCBcInRpdGxlNFwiXG4gIHwgXCJib2R5XCJcbiAgfCBcImxhYmVsXCJcbiAgfCBcImNhcHRpb24xXCJcbiAgfCBcImNhcHRpb24yXCI7XG5cbi8qKiBAZGVwcmVjYXRlZCAqL1xuZXhwb3J0IHR5cGUgSHZUeXBvZ3JhcGh5TGVnYWN5VmFyaWFudHMgPVxuICB8IFwiNXhsVGl0bGVcIlxuICB8IFwiNHhsVGl0bGVcIlxuICB8IFwiM3hsVGl0bGVcIlxuICB8IFwieHhsVGl0bGVcIlxuICB8IFwieGxUaXRsZVwiXG4gIHwgXCJsVGl0bGVcIlxuICB8IFwibVRpdGxlXCJcbiAgfCBcInNUaXRsZVwiXG4gIHwgXCJ4c1RpdGxlXCJcbiAgfCBcInh4c1RpdGxlXCJcbiAgfCBcInNlY3Rpb25UaXRsZVwiXG4gIHwgXCJoaWdobGlnaHRUZXh0XCJcbiAgfCBcIm5vcm1hbFRleHRcIlxuICB8IFwicGxhY2Vob2xkZXJUZXh0XCJcbiAgfCBcImxpbmtcIlxuICB8IFwiZGlzYWJsZWRUZXh0XCJcbiAgfCBcInNlbGVjdGVkTmF2VGV4dFwiXG4gIHwgXCJ2aXpUZXh0XCJcbiAgfCBcInZpelRleHREaXNhYmxlZFwiXG4gIHwgXCJ4c0lubGluZUxpbmtcIjtcblxuY29uc3QgSHZUeXBvZ3JhcGh5TWFwID0ge1xuICBkaXNwbGF5OiBcImgxXCIsXG4gIHRpdGxlMTogXCJoMVwiLFxuICB0aXRsZTI6IFwiaDJcIixcbiAgdGl0bGUzOiBcImgzXCIsXG4gIHRpdGxlNDogXCJoNFwiLFxuICBib2R5OiBcInBcIixcbiAgbGFiZWw6IFwibGFiZWxcIixcbiAgY2FwdGlvbjE6IFwicFwiLFxuICBjYXB0aW9uMjogXCJwXCIsXG4gIC8vIExFR0FDWVxuICBcIjV4bFRpdGxlXCI6IFwiaDFcIixcbiAgXCI0eGxUaXRsZVwiOiBcImgxXCIsXG4gIHh4bFRpdGxlOiBcImgxXCIsXG4gIGxUaXRsZTogXCJoMlwiLFxuICBzVGl0bGU6IFwiaDRcIixcbiAgeHhzVGl0bGU6IFwiaDZcIixcbiAgc2VjdGlvblRpdGxlOiBcInBcIixcbiAgcGxhY2Vob2xkZXJUZXh0OiBcInBcIixcbiAgbGluazogXCJwXCIsXG4gIGRpc2FibGVkVGV4dDogXCJwXCIsXG4gIHNlbGVjdGVkTmF2VGV4dDogXCJwXCIsXG4gIHZpelRleHREaXNhYmxlZDogXCJwXCIsXG4gIHhzSW5saW5lTGluazogXCJwXCIsXG59IGFzIGNvbnN0O1xuXG5jb25zdCBnZXRTdHlsZWRDb21wb25lbnQgPSA8VCBleHRlbmRzIGtleW9mIEpTWC5JbnRyaW5zaWNFbGVtZW50cz4oYzogVCkgPT5cbiAgc3R5bGVkKFxuICAgIGMsXG4gICAgdHJhbnNpZW50T3B0aW9uc1xuICApKFxuICAgICh7XG4gICAgICAkdmFyaWFudCxcbiAgICAgICRsaW5rID0gZmFsc2UsXG4gICAgICAkZGlzYWJsZWQgPSBmYWxzZSxcbiAgICAgICRub1dyYXAgPSBmYWxzZSxcbiAgICB9OiB7XG4gICAgICAkdmFyaWFudDogSHZUeXBvZ3JhcGh5VmFyaWFudHMgfCBIdlR5cG9ncmFwaHlMZWdhY3lWYXJpYW50cztcbiAgICAgICRsaW5rPzogYm9vbGVhbjtcbiAgICAgICRkaXNhYmxlZD86IGJvb2xlYW47XG4gICAgICAkbm9XcmFwPzogYm9vbGVhbjtcbiAgICB9KSA9PiAoe1xuICAgICAgLi4uKCR2YXJpYW50ID09PSBcImRpc3BsYXlcIiAmJiB7XG4gICAgICAgIC4uLih0aGVtZS50eXBvZ3JhcGh5LmRpc3BsYXkgYXMgQ1NTUHJvcGVydGllcyksXG4gICAgICB9KSxcbiAgICAgIC4uLigkdmFyaWFudCA9PT0gXCJ0aXRsZTFcIiAmJiB7XG4gICAgICAgIC4uLih0aGVtZS50eXBvZ3JhcGh5LnRpdGxlMSBhcyBDU1NQcm9wZXJ0aWVzKSxcbiAgICAgIH0pLFxuICAgICAgLi4uKCR2YXJpYW50ID09PSBcInRpdGxlMlwiICYmIHtcbiAgICAgICAgLi4uKHRoZW1lLnR5cG9ncmFwaHkudGl0bGUyIGFzIENTU1Byb3BlcnRpZXMpLFxuICAgICAgfSksXG4gICAgICAuLi4oJHZhcmlhbnQgPT09IFwidGl0bGUzXCIgJiYge1xuICAgICAgICAuLi4odGhlbWUudHlwb2dyYXBoeS50aXRsZTMgYXMgQ1NTUHJvcGVydGllcyksXG4gICAgICB9KSxcbiAgICAgIC4uLigkdmFyaWFudCA9PT0gXCJ0aXRsZTRcIiAmJiB7XG4gICAgICAgIC4uLih0aGVtZS50eXBvZ3JhcGh5LnRpdGxlNCBhcyBDU1NQcm9wZXJ0aWVzKSxcbiAgICAgIH0pLFxuICAgICAgLi4uKCR2YXJpYW50ID09PSBcImJvZHlcIiAmJiB7XG4gICAgICAgIC4uLih0aGVtZS50eXBvZ3JhcGh5LmJvZHkgYXMgQ1NTUHJvcGVydGllcyksXG4gICAgICB9KSxcbiAgICAgIC4uLigkdmFyaWFudCA9PT0gXCJsYWJlbFwiICYmIHtcbiAgICAgICAgLi4uKHRoZW1lLnR5cG9ncmFwaHkubGFiZWwgYXMgQ1NTUHJvcGVydGllcyksXG4gICAgICB9KSxcbiAgICAgIC4uLigkdmFyaWFudCA9PT0gXCJjYXB0aW9uMVwiICYmIHtcbiAgICAgICAgLi4uKHRoZW1lLnR5cG9ncmFwaHkuY2FwdGlvbjEgYXMgQ1NTUHJvcGVydGllcyksXG4gICAgICB9KSxcbiAgICAgIC4uLigkdmFyaWFudCA9PT0gXCJjYXB0aW9uMlwiICYmIHtcbiAgICAgICAgLi4uKHRoZW1lLnR5cG9ncmFwaHkuY2FwdGlvbjIgYXMgQ1NTUHJvcGVydGllcyksXG4gICAgICB9KSxcbiAgICAgIC8vIExFR0FDWVxuICAgICAgLi4uKCR2YXJpYW50ID09PSBcIjV4bFRpdGxlXCIgJiYge1xuICAgICAgICAuLi4odGhlbWUudHlwb2dyYXBoeVtcIjV4bFRpdGxlXCJdIGFzIENTU1Byb3BlcnRpZXMpLFxuICAgICAgfSksXG4gICAgICAuLi4oJHZhcmlhbnQgPT09IFwiNHhsVGl0bGVcIiAmJiB7XG4gICAgICAgIC4uLih0aGVtZS50eXBvZ3JhcGh5W1wiNHhsVGl0bGVcIl0gYXMgQ1NTUHJvcGVydGllcyksXG4gICAgICB9KSxcbiAgICAgIC4uLigkdmFyaWFudCA9PT0gXCJ4eGxUaXRsZVwiICYmIHtcbiAgICAgICAgLi4uKHRoZW1lLnR5cG9ncmFwaHkueHhsVGl0bGUgYXMgQ1NTUHJvcGVydGllcyksXG4gICAgICB9KSxcbiAgICAgIC4uLigkdmFyaWFudCA9PT0gXCJsVGl0bGVcIiAmJiB7XG4gICAgICAgIC4uLih0aGVtZS50eXBvZ3JhcGh5LmxUaXRsZSBhcyBDU1NQcm9wZXJ0aWVzKSxcbiAgICAgIH0pLFxuICAgICAgLi4uKCR2YXJpYW50ID09PSBcInNUaXRsZVwiICYmIHtcbiAgICAgICAgLi4uKHRoZW1lLnR5cG9ncmFwaHkuc1RpdGxlIGFzIENTU1Byb3BlcnRpZXMpLFxuICAgICAgfSksXG4gICAgICAuLi4oJHZhcmlhbnQgPT09IFwieHhzVGl0bGVcIiAmJiB7XG4gICAgICAgIC4uLih0aGVtZS50eXBvZ3JhcGh5Lnh4c1RpdGxlIGFzIENTU1Byb3BlcnRpZXMpLFxuICAgICAgfSksXG4gICAgICAuLi4oJHZhcmlhbnQgPT09IFwic2VjdGlvblRpdGxlXCIgJiYge1xuICAgICAgICAuLi4odGhlbWUudHlwb2dyYXBoeS5zZWN0aW9uVGl0bGUgYXMgQ1NTUHJvcGVydGllcyksXG4gICAgICAgIHRleHRUcmFuc2Zvcm06IFwidXBwZXJjYXNlXCIsXG4gICAgICB9KSxcbiAgICAgIC4uLigkdmFyaWFudCA9PT0gXCJwbGFjZWhvbGRlclRleHRcIiAmJiB7XG4gICAgICAgIC4uLih0aGVtZS50eXBvZ3JhcGh5LnBsYWNlaG9sZGVyVGV4dCBhcyBDU1NQcm9wZXJ0aWVzKSxcbiAgICAgIH0pLFxuICAgICAgLi4uKCR2YXJpYW50ID09PSBcImxpbmtcIiAmJiB7XG4gICAgICAgIC4uLih0aGVtZS50eXBvZ3JhcGh5LmxpbmsgYXMgQ1NTUHJvcGVydGllcyksXG4gICAgICAgIHRleHREZWNvcmF0aW9uOiBcInVuZGVybGluZVwiLFxuICAgICAgICBjdXJzb3I6IFwicG9pbnRlclwiLFxuICAgICAgfSksXG4gICAgICAuLi4oJHZhcmlhbnQgPT09IFwiZGlzYWJsZWRUZXh0XCIgJiYge1xuICAgICAgICAuLi4odGhlbWUudHlwb2dyYXBoeS5kaXNhYmxlZFRleHQgYXMgQ1NTUHJvcGVydGllcyksXG4gICAgICB9KSxcbiAgICAgIC4uLigkdmFyaWFudCA9PT0gXCJzZWxlY3RlZE5hdlRleHRcIiAmJiB7XG4gICAgICAgIC4uLih0aGVtZS50eXBvZ3JhcGh5LnNlbGVjdGVkTmF2VGV4dCBhcyBDU1NQcm9wZXJ0aWVzKSxcbiAgICAgIH0pLFxuICAgICAgLi4uKCR2YXJpYW50ID09PSBcInZpelRleHREaXNhYmxlZFwiICYmIHtcbiAgICAgICAgLi4uKHRoZW1lLnR5cG9ncmFwaHkudml6VGV4dERpc2FibGVkIGFzIENTU1Byb3BlcnRpZXMpLFxuICAgICAgfSksXG4gICAgICAuLi4oJHZhcmlhbnQgPT09IFwieHNJbmxpbmVMaW5rXCIgJiYge1xuICAgICAgICAuLi4odGhlbWUudHlwb2dyYXBoeS54c0lubGluZUxpbmsgYXMgQ1NTUHJvcGVydGllcyksXG4gICAgICB9KSxcbiAgICAgIGZvbnRGYW1pbHk6IHRoZW1lLmZvbnRGYW1pbHkuYm9keSxcbiAgICAgIC8vIEFEREVEIFBST1BTXG4gICAgICAuLi4oJGxpbmsgJiYge1xuICAgICAgICBjb2xvcjogdGhlbWUuY29sb3JzLnByaW1hcnksXG4gICAgICAgIHRleHREZWNvcmF0aW9uOiBcInVuZGVybGluZVwiLFxuICAgICAgICBjdXJzb3I6IFwicG9pbnRlclwiLFxuICAgICAgfSksXG4gICAgICAuLi4oJGRpc2FibGVkICYmIHtcbiAgICAgICAgY29sb3I6IHRoZW1lLmNvbG9ycy5zZWNvbmRhcnlfNjAsXG4gICAgICB9KSxcbiAgICAgIC4uLigkbm9XcmFwICYmIHtcbiAgICAgICAgb3ZlcmZsb3c6IFwiaGlkZGVuXCIsXG4gICAgICAgIHRleHRPdmVyZmxvdzogXCJlbGxpcHNpc1wiLFxuICAgICAgICB3aGl0ZVNwYWNlOiBcIm5vd3JhcFwiLFxuICAgICAgfSksXG4gICAgfSlcbiAgKTtcblxuZXhwb3J0IGludGVyZmFjZSBIdlR5cG9ncmFwaHlQcm9wc1xuICBleHRlbmRzIE9taXQ8QWxsSFRNTEF0dHJpYnV0ZXM8SFRNTEVsZW1lbnQ+LCBcImRpc2FibGVkXCI+LFxuICAgIEh2QmFzZVByb3BzPEhUTUxFbGVtZW50PiB7XG4gIGNvbXBvbmVudD86IFJlYWN0LlJlYWN0Tm9kZSB8IFJlYWN0LkVsZW1lbnRUeXBlO1xuICAvKiogVXNlIHRoZSB2YXJpYW50IHByb3AgdG8gY2hhbmdlIHRoZSB2aXN1YWwgc3R5bGUgb2YgdGhlIFR5cG9ncmFwaHkuICovXG4gIHZhcmlhbnQ/OiBIdlR5cG9ncmFwaHlWYXJpYW50cyB8IEh2VHlwb2dyYXBoeUxlZ2FjeVZhcmlhbnRzO1xuICAvKiogSWYgYHRydWVgIHRoZSB0eXBvZ3JhcGh5IHdpbGwgZGlzcGxheSB0aGUgbG9vayBvZiBhIGxpbmsuICovXG4gIGxpbms/OiBib29sZWFuO1xuICAvKiogSWYgYHRydWVgIHRoZSB0eXBvZ3JhcGh5IHdpbGwgZGlzcGxheSB0aGUgbG9vayBvZiBhIGRpc2FibGVkIHN0YXRlLiAqL1xuICBkaXNhYmxlZD86IGJvb2xlYW47XG4gIC8qKiBJZiBgdHJ1ZWAsIHRoZSB0ZXh0IHdpbGwgaGF2ZSBhIGJvdHRvbSBtYXJnaW4uICovXG4gIHBhcmFncmFwaD86IGJvb2xlYW47XG4gIC8qKlxuICAgKiBJZiBgdHJ1ZWAsIHRoZSB0ZXh0IHdpbGwgbm90IHdyYXAsIGJ1dCBpbnN0ZWFkIHdpbGwgdHJ1bmNhdGUgd2l0aCBhIHRleHQgb3ZlcmZsb3cgZWxsaXBzaXMuXG4gICAqXG4gICAqIE5vdGUgdGhhdCB0ZXh0IG92ZXJmbG93IGNhbiBvbmx5IGhhcHBlbiB3aXRoIGJsb2NrIG9yIGlubGluZS1ibG9jayBsZXZlbCBlbGVtZW50c1xuICAgKiAodGhlIGVsZW1lbnQgbmVlZHMgdG8gaGF2ZSBhIHdpZHRoIGluIG9yZGVyIHRvIG92ZXJmbG93KS5cbiAgICovXG4gIG5vV3JhcD86IGJvb2xlYW47XG4gIC8qKiBBIEpzcyBPYmplY3QgdXNlZCB0byBvdmVycmlkZSBvciBleHRlbmQgdGhlIHN0eWxlcyBhcHBsaWVkIHRvIHRoZSBjb21wb25lbnQuICovXG4gIGNsYXNzZXM/OiBIdlR5cG9ncmFwaHlDbGFzc2VzO1xufVxuXG4vKipcbiAqIFR5cG9ncmFwaHkgY29tcG9uZW50IGlzIHVzZWQgdG8gcmVuZGVyIHRleHQgYW5kIHBhcmFncmFwaHMgd2l0aGluIGFuIGludGVyZmFjZS5cbiAqL1xuZXhwb3J0IGNvbnN0IEh2VHlwb2dyYXBoeSA9IGZvcndhcmRSZWYoXG4gIChwcm9wczogSHZUeXBvZ3JhcGh5UHJvcHMsIHJlZjogUmVmPEhUTUxFbGVtZW50PikgPT4ge1xuICAgIGNvbnN0IHtcbiAgICAgIGNoaWxkcmVuLFxuICAgICAgY2xhc3NOYW1lLFxuICAgICAgY29tcG9uZW50LFxuICAgICAgY2xhc3NlcyxcbiAgICAgIHZhcmlhbnQgPSBcImJvZHlcIixcbiAgICAgIGxpbmsgPSBmYWxzZSxcbiAgICAgIGRpc2FibGVkID0gZmFsc2UsXG4gICAgICBub1dyYXAgPSBmYWxzZSxcbiAgICAgIHBhcmFncmFwaCA9IGZhbHNlLFxuICAgICAgLi4ub3RoZXJzXG4gICAgfSA9IHByb3BzO1xuICAgIGNvbnN0IHsgYWN0aXZlVGhlbWUgfSA9IHVzZVRoZW1lKCk7XG5cbiAgICBjb25zdCBtYXBwZWRWYXJpYW50ID0gbWFwVmFyaWFudCh2YXJpYW50LCBhY3RpdmVUaGVtZT8ubmFtZSk7XG5cbiAgICBjb25zdCBjb21wID1cbiAgICAgIGNvbXBvbmVudCB8fCAocGFyYWdyYXBoID8gXCJwXCIgOiBIdlR5cG9ncmFwaHlNYXBbbWFwcGVkVmFyaWFudF0gfHwgXCJzcGFuXCIpO1xuXG4gICAgY29uc3QgU3R5bGVkQ29tcG9uZW50ID0gdXNlTWVtbyhcbiAgICAgICgpID0+IGdldFN0eWxlZENvbXBvbmVudChjb21wIHx8IFwicFwiKSxcbiAgICAgIFtjb21wXVxuICAgICk7XG5cbiAgICByZXR1cm4gKFxuICAgICAgPFN0eWxlZENvbXBvbmVudFxuICAgICAgICByZWY9e3JlZn1cbiAgICAgICAgY2xhc3NOYW1lPXtjbHN4KFxuICAgICAgICAgIGNsYXNzTmFtZSxcbiAgICAgICAgICBjbGFzc2VzPy5yb290LFxuICAgICAgICAgIHR5cG9ncmFwaHlDbGFzc2VzLnJvb3QsXG4gICAgICAgICAgY2xhc3Nlcz8uW3ZhcmlhbnRdLFxuICAgICAgICAgIHR5cG9ncmFwaHlDbGFzc2VzW3ZhcmlhbnRdLFxuICAgICAgICAgIG5vV3JhcCAmJiBjbHN4KHR5cG9ncmFwaHlDbGFzc2VzLm5vV3JhcCwgY2xhc3Nlcz8ubm9XcmFwKVxuICAgICAgICApfVxuICAgICAgICAkdmFyaWFudD17XG4gICAgICAgICAgbWFwcGVkVmFyaWFudCBhcyBIdlR5cG9ncmFwaHlWYXJpYW50cyB8IEh2VHlwb2dyYXBoeUxlZ2FjeVZhcmlhbnRzXG4gICAgICAgIH1cbiAgICAgICAgJGxpbms9e2xpbmt9XG4gICAgICAgICRkaXNhYmxlZD17ZGlzYWJsZWR9XG4gICAgICAgICRub1dyYXA9e25vV3JhcH1cbiAgICAgICAgey4uLm90aGVyc31cbiAgICAgID5cbiAgICAgICAge2NoaWxkcmVufVxuICAgICAgPC9TdHlsZWRDb21wb25lbnQ+XG4gICAgKTtcbiAgfVxuKTtcbiJdfQ== */");
 const HvTypography = forwardRef((props, ref) => {
   const {
-    children,
     className,
-    component,
-    classes,
-    variant = "body",
+    component: ComponentProp,
+    classes: classesProp,
+    variant: variantProp = "body",
     link = false,
     disabled = false,
     noWrap = false,
     paragraph = false,
     ...others
   } = props;
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
   const {
     activeTheme
   } = useTheme();
-  const mappedVariant = mapVariant(variant, activeTheme == null ? void 0 : activeTheme.name);
-  const comp = component || (paragraph ? "p" : HvTypographyMap[mappedVariant] || "span");
-  const StyledComponent = useMemo(() => getStyledComponent(comp || "p"), [comp]);
-  return /* @__PURE__ */ jsx(StyledComponent, {
+  const variant = mapVariant(variantProp, activeTheme == null ? void 0 : activeTheme.name);
+  const Component = ComponentProp || paragraph && "p" || HvTypographyMap[variant] || "span";
+  return /* @__PURE__ */ jsx(Component, {
     ref,
-    className: clsx(className, classes == null ? void 0 : classes.root, typographyClasses.root, classes == null ? void 0 : classes[variant], typographyClasses[variant], noWrap && clsx(typographyClasses.noWrap, classes == null ? void 0 : classes.noWrap)),
-    $variant: mappedVariant,
-    $link: link,
-    $disabled: disabled,
-    $noWrap: noWrap,
-    ...others,
-    children
+    className: cx(classes.root, classes[variant], className, {
+      [classes.isLink]: link,
+      [classes.noWrap]: noWrap,
+      [classes.disabled]: disabled
+    }),
+    ...others
   });
 });
 export {
-  HvTypography
+  HvTypography,
+  staticClasses as typographyClasses,
+  typographyVariants
 };
 //# sourceMappingURL=Typography.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Typography.js","sources":["../../../../src/components/Typography/Typography.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useMemo,\n  CSSProperties,\n  AllHTMLAttributes,\n  Ref,\n} from \"react\";\nimport { HvBaseProps } from \"@core/types\";\nimport styled from \"@emotion/styled\";\nimport { transientOptions } from \"@core/utils/transientOptions\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { clsx } from \"clsx\";\nimport { useTheme } from \"@core/hooks\";\nimport { mapVariant } from \"./utils\";\nimport typographyClasses, { HvTypographyClasses } from \"./typographyClasses\";\n\nexport type HvTypographyVariants =\n  | \"display\"\n  | \"title1\"\n  | \"title2\"\n  | \"title3\"\n  | \"title4\"\n  | \"body\"\n  | \"label\"\n  | \"caption1\"\n  | \"caption2\";\n\n/** @deprecated */\nexport type HvTypographyLegacyVariants =\n  | \"5xlTitle\"\n  | \"4xlTitle\"\n  | \"3xlTitle\"\n  | \"xxlTitle\"\n  | \"xlTitle\"\n  | \"lTitle\"\n  | \"mTitle\"\n  | \"sTitle\"\n  | \"xsTitle\"\n  | \"xxsTitle\"\n  | \"sectionTitle\"\n  | \"highlightText\"\n  | \"normalText\"\n  | \"placeholderText\"\n  | \"link\"\n  | \"disabledText\"\n  | \"selectedNavText\"\n  | \"vizText\"\n  | \"vizTextDisabled\"\n  | \"xsInlineLink\";\n\nconst HvTypographyMap = {\n  display: \"h1\",\n  title1: \"h1\",\n  title2: \"h2\",\n  title3: \"h3\",\n  title4: \"h4\",\n  body: \"p\",\n  label: \"label\",\n  caption1: \"p\",\n  caption2: \"p\",\n  // LEGACY\n  \"5xlTitle\": \"h1\",\n  \"4xlTitle\": \"h1\",\n  xxlTitle: \"h1\",\n  lTitle: \"h2\",\n  sTitle: \"h4\",\n  xxsTitle: \"h6\",\n  sectionTitle: \"p\",\n  placeholderText: \"p\",\n  link: \"p\",\n  disabledText: \"p\",\n  selectedNavText: \"p\",\n  vizTextDisabled: \"p\",\n  xsInlineLink: \"p\",\n} as const;\n\nconst getStyledComponent = <T extends keyof JSX.IntrinsicElements>(c: T) =>\n  styled(\n    c,\n    transientOptions\n  )(\n    ({\n      $variant,\n      $link = false,\n      $disabled = false,\n      $noWrap = false,\n    }: {\n      $variant: HvTypographyVariants | HvTypographyLegacyVariants;\n      $link?: boolean;\n      $disabled?: boolean;\n      $noWrap?: boolean;\n    }) => ({\n      ...($variant === \"display\" && {\n        ...(theme.typography.display as CSSProperties),\n      }),\n      ...($variant === \"title1\" && {\n        ...(theme.typography.title1 as CSSProperties),\n      }),\n      ...($variant === \"title2\" && {\n        ...(theme.typography.title2 as CSSProperties),\n      }),\n      ...($variant === \"title3\" && {\n        ...(theme.typography.title3 as CSSProperties),\n      }),\n      ...($variant === \"title4\" && {\n        ...(theme.typography.title4 as CSSProperties),\n      }),\n      ...($variant === \"body\" && {\n        ...(theme.typography.body as CSSProperties),\n      }),\n      ...($variant === \"label\" && {\n        ...(theme.typography.label as CSSProperties),\n      }),\n      ...($variant === \"caption1\" && {\n        ...(theme.typography.caption1 as CSSProperties),\n      }),\n      ...($variant === \"caption2\" && {\n        ...(theme.typography.caption2 as CSSProperties),\n      }),\n      // LEGACY\n      ...($variant === \"5xlTitle\" && {\n        ...(theme.typography[\"5xlTitle\"] as CSSProperties),\n      }),\n      ...($variant === \"4xlTitle\" && {\n        ...(theme.typography[\"4xlTitle\"] as CSSProperties),\n      }),\n      ...($variant === \"xxlTitle\" && {\n        ...(theme.typography.xxlTitle as CSSProperties),\n      }),\n      ...($variant === \"lTitle\" && {\n        ...(theme.typography.lTitle as CSSProperties),\n      }),\n      ...($variant === \"sTitle\" && {\n        ...(theme.typography.sTitle as CSSProperties),\n      }),\n      ...($variant === \"xxsTitle\" && {\n        ...(theme.typography.xxsTitle as CSSProperties),\n      }),\n      ...($variant === \"sectionTitle\" && {\n        ...(theme.typography.sectionTitle as CSSProperties),\n        textTransform: \"uppercase\",\n      }),\n      ...($variant === \"placeholderText\" && {\n        ...(theme.typography.placeholderText as CSSProperties),\n      }),\n      ...($variant === \"link\" && {\n        ...(theme.typography.link as CSSProperties),\n        textDecoration: \"underline\",\n        cursor: \"pointer\",\n      }),\n      ...($variant === \"disabledText\" && {\n        ...(theme.typography.disabledText as CSSProperties),\n      }),\n      ...($variant === \"selectedNavText\" && {\n        ...(theme.typography.selectedNavText as CSSProperties),\n      }),\n      ...($variant === \"vizTextDisabled\" && {\n        ...(theme.typography.vizTextDisabled as CSSProperties),\n      }),\n      ...($variant === \"xsInlineLink\" && {\n        ...(theme.typography.xsInlineLink as CSSProperties),\n      }),\n      fontFamily: theme.fontFamily.body,\n      // ADDED PROPS\n      ...($link && {\n        color: theme.colors.primary,\n        textDecoration: \"underline\",\n        cursor: \"pointer\",\n      }),\n      ...($disabled && {\n        color: theme.colors.secondary_60,\n      }),\n      ...($noWrap && {\n        overflow: \"hidden\",\n        textOverflow: \"ellipsis\",\n        whiteSpace: \"nowrap\",\n      }),\n    })\n  );\n\nexport interface HvTypographyProps\n  extends Omit<AllHTMLAttributes<HTMLElement>, \"disabled\">,\n    HvBaseProps<HTMLElement> {\n  component?: React.ReactNode | React.ElementType;\n  /** Use the variant prop to change the visual style of the Typography. */\n  variant?: HvTypographyVariants | HvTypographyLegacyVariants;\n  /** If `true` the typography will display the look of a link. */\n  link?: boolean;\n  /** If `true` the typography will display the look of a disabled state. */\n  disabled?: boolean;\n  /** If `true`, the text will have a bottom margin. */\n  paragraph?: boolean;\n  /**\n   * If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis.\n   *\n   * Note that text overflow can only happen with block or inline-block level elements\n   * (the element needs to have a width in order to overflow).\n   */\n  noWrap?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTypographyClasses;\n}\n\n/**\n * Typography component is used to render text and paragraphs within an interface.\n */\nexport const HvTypography = forwardRef(\n  (props: HvTypographyProps, ref: Ref<HTMLElement>) => {\n    const {\n      children,\n      className,\n      component,\n      classes,\n      variant = \"body\",\n      link = false,\n      disabled = false,\n      noWrap = false,\n      paragraph = false,\n      ...others\n    } = props;\n    const { activeTheme } = useTheme();\n\n    const mappedVariant = mapVariant(variant, activeTheme?.name);\n\n    const comp =\n      component || (paragraph ? \"p\" : HvTypographyMap[mappedVariant] || \"span\");\n\n    const StyledComponent = useMemo(\n      () => getStyledComponent(comp || \"p\"),\n      [comp]\n    );\n\n    return (\n      <StyledComponent\n        ref={ref}\n        className={clsx(\n          className,\n          classes?.root,\n          typographyClasses.root,\n          classes?.[variant],\n          typographyClasses[variant],\n          noWrap && clsx(typographyClasses.noWrap, classes?.noWrap)\n        )}\n        $variant={\n          mappedVariant as HvTypographyVariants | HvTypographyLegacyVariants\n        }\n        $link={link}\n        $disabled={disabled}\n        $noWrap={noWrap}\n        {...others}\n      >\n        {children}\n      </StyledComponent>\n    );\n  }\n);\n"],"names":["HvTypographyMap","display","title1","title2","title3","title4","body","label","caption1","caption2","xxlTitle","lTitle","sTitle","xxsTitle","sectionTitle","placeholderText","link","disabledText","selectedNavText","vizTextDisabled","xsInlineLink","getStyledComponent","c","process","env","NODE_ENV","_extends","target","transientOptions","$variant","$link","$disabled","$noWrap","theme","typography","textTransform","textDecoration","cursor","fontFamily","color","colors","primary","secondary_60","overflow","textOverflow","whiteSpace","HvTypography","forwardRef","props","ref","children","className","component","classes","variant","disabled","noWrap","paragraph","others","activeTheme","useTheme","mappedVariant","mapVariant","name","comp","StyledComponent","useMemo","clsx","root","typographyClasses"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAkDA,MAAMA,kBAAkB;AAAA,EACtBC,SAAS;AAAA,EACTC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,MAAM;AAAA,EACNC,OAAO;AAAA,EACPC,UAAU;AAAA,EACVC,UAAU;AAAA;AAAA,EAEV,YAAY;AAAA,EACZ,YAAY;AAAA,EACZC,UAAU;AAAA,EACVC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,UAAU;AAAA,EACVC,cAAc;AAAA,EACdC,iBAAiB;AAAA,EACjBC,MAAM;AAAA,EACNC,cAAc;AAAA,EACdC,iBAAiB;AAAA,EACjBC,iBAAiB;AAAA,EACjBC,cAAc;AAChB;AAEA,MAAMC,qBAAqB,CAAwCC,MAE/DA,wBAAAA,GAACC,QAAAC,IAAAC,aAAA,eAAAC,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,GACDC,gBAAgB,IAAAF,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,EAAApB,OAAA;AAAA,GAAhBqB,gBAAgB,CAClB,EACE,CAAC;AAAA,EACCC;AAAAA,EACAC,QAAQ;AAAA,EACRC,YAAY;AAAA,EACZC,UAAU;AAMZ,OAAO;AAAA,EACL,GAAIH,aAAa,aAAa;AAAA,IAC5B,GAAII,MAAMC,WAAWjC;AAAAA,EACvB;AAAA,EACA,GAAI4B,aAAa,YAAY;AAAA,IAC3B,GAAII,MAAMC,WAAWhC;AAAAA,EACvB;AAAA,EACA,GAAI2B,aAAa,YAAY;AAAA,IAC3B,GAAII,MAAMC,WAAW/B;AAAAA,EACvB;AAAA,EACA,GAAI0B,aAAa,YAAY;AAAA,IAC3B,GAAII,MAAMC,WAAW9B;AAAAA,EACvB;AAAA,EACA,GAAIyB,aAAa,YAAY;AAAA,IAC3B,GAAII,MAAMC,WAAW7B;AAAAA,EACvB;AAAA,EACA,GAAIwB,aAAa,UAAU;AAAA,IACzB,GAAII,MAAMC,WAAW5B;AAAAA,EACvB;AAAA,EACA,GAAIuB,aAAa,WAAW;AAAA,IAC1B,GAAII,MAAMC,WAAW3B;AAAAA,EACvB;AAAA,EACA,GAAIsB,aAAa,cAAc;AAAA,IAC7B,GAAII,MAAMC,WAAW1B;AAAAA,EACvB;AAAA,EACA,GAAIqB,aAAa,cAAc;AAAA,IAC7B,GAAII,MAAMC,WAAWzB;AAAAA,EACvB;AAAA;AAAA,EAEA,GAAIoB,aAAa,cAAc;AAAA,IAC7B,GAAII,MAAMC,WAAW,UAAU;AAAA,EACjC;AAAA,EACA,GAAIL,aAAa,cAAc;AAAA,IAC7B,GAAII,MAAMC,WAAW,UAAU;AAAA,EACjC;AAAA,EACA,GAAIL,aAAa,cAAc;AAAA,IAC7B,GAAII,MAAMC,WAAWxB;AAAAA,EACvB;AAAA,EACA,GAAImB,aAAa,YAAY;AAAA,IAC3B,GAAII,MAAMC,WAAWvB;AAAAA,EACvB;AAAA,EACA,GAAIkB,aAAa,YAAY;AAAA,IAC3B,GAAII,MAAMC,WAAWtB;AAAAA,EACvB;AAAA,EACA,GAAIiB,aAAa,cAAc;AAAA,IAC7B,GAAII,MAAMC,WAAWrB;AAAAA,EACvB;AAAA,EACA,GAAIgB,aAAa,kBAAkB;AAAA,IACjC,GAAII,MAAMC,WAAWpB;AAAAA,IACrBqB,eAAe;AAAA,EACjB;AAAA,EACA,GAAIN,aAAa,qBAAqB;AAAA,IACpC,GAAII,MAAMC,WAAWnB;AAAAA,EACvB;AAAA,EACA,GAAIc,aAAa,UAAU;AAAA,IACzB,GAAII,MAAMC,WAAWlB;AAAAA,IACrBoB,gBAAgB;AAAA,IAChBC,QAAQ;AAAA,EACV;AAAA,EACA,GAAIR,aAAa,kBAAkB;AAAA,IACjC,GAAII,MAAMC,WAAWjB;AAAAA,EACvB;AAAA,EACA,GAAIY,aAAa,qBAAqB;AAAA,IACpC,GAAII,MAAMC,WAAWhB;AAAAA,EACvB;AAAA,EACA,GAAIW,aAAa,qBAAqB;AAAA,IACpC,GAAII,MAAMC,WAAWf;AAAAA,EACvB;AAAA,EACA,GAAIU,aAAa,kBAAkB;AAAA,IACjC,GAAII,MAAMC,WAAWd;AAAAA,EACvB;AAAA,EACAkB,YAAYL,MAAMK,WAAWhC;AAAAA;AAAAA,EAE7B,GAAIwB,SAAS;AAAA,IACXS,OAAON,MAAMO,OAAOC;AAAAA,IACpBL,gBAAgB;AAAA,IAChBC,QAAQ;AAAA,EACV;AAAA,EACA,GAAIN,aAAa;AAAA,IACfQ,OAAON,MAAMO,OAAOE;AAAAA,EACtB;AAAA,EACA,GAAIV,WAAW;AAAA,IACbW,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,YAAY;AAAA,EACd;AACF,IAAEtB,QAAAC,IAAAC,stUACJ;AA4BK,MAAMqB,eAAeC,WAC1B,CAACC,OAA0BC,QAA0B;AAC7C,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,UAAU;AAAA,IACVtC,OAAO;AAAA,IACPuC,WAAW;AAAA,IACXC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZ,GAAGC;AAAAA,EACDV,IAAAA;AACE,QAAA;AAAA,IAAEW;AAAAA,MAAgBC,SAAS;AAEjC,QAAMC,gBAAgBC,WAAWR,SAASK,2CAAaI,IAAI;AAE3D,QAAMC,OACJZ,cAAcK,YAAY,MAAMzD,gBAAgB6D,aAAa,KAAK;AAE9DI,QAAAA,kBAAkBC,QACtB,MAAM7C,mBAAmB2C,QAAQ,GAAG,GACpC,CAACA,IAAI,CACP;AAEA,6BACGC,iBAAe;AAAA,IACdhB;AAAAA,IACAE,WAAWgB,KACThB,WACAE,mCAASe,MACTC,kBAAkBD,MAClBf,mCAAUC,UACVe,kBAAkBf,OAAO,GACzBE,UAAUW,KAAKE,kBAAkBb,QAAQH,mCAASG,MAAM,CAC1D;AAAA,IACA3B,UACEgC;AAAAA,IAEF/B,OAAOd;AAAAA,IACPe,WAAWwB;AAAAA,IACXvB,SAASwB;AAAAA,IAAO,GACZE;AAAAA,IAAMR;AAAAA,EAAAA,CAGK;AAErB,CACF;"}
+{"version":3,"file":"Typography.js","sources":["../../../../src/components/Typography/Typography.tsx"],"sourcesContent":["import { forwardRef, AllHTMLAttributes, Ref } from \"react\";\nimport { HvBaseProps } from \"@core/types\";\nimport { ExtractNames } from \"@core/utils\";\nimport { useTheme } from \"@core/hooks\";\nimport { mapVariant } from \"./utils\";\nimport { staticClasses, useClasses } from \"./Typography.styles\";\n\nexport { staticClasses as typographyClasses };\n\nexport type HvTypographyClasses = ExtractNames<typeof useClasses>;\n\nexport const typographyVariants = [\n  \"display\",\n  \"title1\",\n  \"title2\",\n  \"title3\",\n  \"title4\",\n  \"body\",\n  \"label\",\n  \"caption1\",\n  \"caption2\",\n] as const;\n\nexport type HvTypographyVariants = (typeof typographyVariants)[number];\n\n/** @deprecated */\nexport type HvTypographyLegacyVariants =\n  | \"5xlTitle\"\n  | \"4xlTitle\"\n  | \"3xlTitle\"\n  | \"xxlTitle\"\n  | \"xlTitle\"\n  | \"lTitle\"\n  | \"mTitle\"\n  | \"sTitle\"\n  | \"xsTitle\"\n  | \"xxsTitle\"\n  | \"sectionTitle\"\n  | \"highlightText\"\n  | \"normalText\"\n  | \"placeholderText\"\n  | \"link\"\n  | \"disabledText\"\n  | \"selectedNavText\"\n  | \"vizText\"\n  | \"vizTextDisabled\"\n  | \"xsInlineLink\";\n\nconst HvTypographyMap = {\n  display: \"h1\",\n  title1: \"h1\",\n  title2: \"h2\",\n  title3: \"h3\",\n  title4: \"h4\",\n  body: \"p\",\n  label: \"label\",\n  caption1: \"p\",\n  caption2: \"p\",\n  // LEGACY\n  \"5xlTitle\": \"h1\",\n  \"4xlTitle\": \"h1\",\n  xxlTitle: \"h1\",\n  lTitle: \"h2\",\n  sTitle: \"h4\",\n  xxsTitle: \"h6\",\n  sectionTitle: \"p\",\n  placeholderText: \"p\",\n  link: \"p\",\n  disabledText: \"p\",\n  selectedNavText: \"p\",\n  vizTextDisabled: \"p\",\n  xsInlineLink: \"p\",\n} as const;\n\nexport interface HvTypographyProps\n  extends Omit<AllHTMLAttributes<HTMLElement>, \"disabled\">,\n    HvBaseProps<HTMLElement> {\n  component?: React.ElementType;\n  /** Use the variant prop to change the visual style of the Typography. */\n  variant?: HvTypographyVariants | HvTypographyLegacyVariants;\n  /** If `true` the typography will display the look of a link. */\n  link?: boolean;\n  /** If `true` the typography will display the look of a disabled state. */\n  disabled?: boolean;\n  /** If `true`, the text will have a bottom margin. */\n  paragraph?: boolean;\n  /**\n   * If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis.\n   *\n   * Note that text overflow can only happen with block or inline-block level elements\n   * (the element needs to have a width in order to overflow).\n   */\n  noWrap?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTypographyClasses;\n}\n\n/**\n * Typography component is used to render text and paragraphs within an interface.\n */\nexport const HvTypography = forwardRef(\n  (props: HvTypographyProps, ref: Ref<HTMLElement>) => {\n    const {\n      className,\n      component: ComponentProp,\n      classes: classesProp,\n      variant: variantProp = \"body\",\n      link = false,\n      disabled = false,\n      noWrap = false,\n      paragraph = false,\n      ...others\n    } = props;\n    const { classes, cx } = useClasses(classesProp);\n    const { activeTheme } = useTheme();\n\n    const variant = mapVariant(variantProp, activeTheme?.name);\n\n    const Component =\n      ComponentProp || (paragraph && \"p\") || HvTypographyMap[variant] || \"span\";\n\n    return (\n      <Component\n        ref={ref}\n        className={cx(classes.root, classes[variant], className, {\n          [classes.isLink]: link,\n          [classes.noWrap]: noWrap,\n          [classes.disabled]: disabled,\n        })}\n        {...others}\n      />\n    );\n  }\n);\n"],"names":["typographyVariants","HvTypographyMap","display","title1","title2","title3","title4","body","label","caption1","caption2","xxlTitle","lTitle","sTitle","xxsTitle","sectionTitle","placeholderText","link","disabledText","selectedNavText","vizTextDisabled","xsInlineLink","HvTypography","forwardRef","props","ref","className","component","ComponentProp","classes","classesProp","variant","variantProp","disabled","noWrap","paragraph","others","cx","useClasses","activeTheme","useTheme","mapVariant","name","Component","root","isLink"],"mappings":";;;;;;AAWaA,MAAAA,qBAAqB,CAChC,WACA,UACA,UACA,UACA,UACA,QACA,SACA,YACA,UAAU;AA4BZ,MAAMC,kBAAkB;AAAA,EACtBC,SAAS;AAAA,EACTC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,MAAM;AAAA,EACNC,OAAO;AAAA,EACPC,UAAU;AAAA,EACVC,UAAU;AAAA;AAAA,EAEV,YAAY;AAAA,EACZ,YAAY;AAAA,EACZC,UAAU;AAAA,EACVC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,UAAU;AAAA,EACVC,cAAc;AAAA,EACdC,iBAAiB;AAAA,EACjBC,MAAM;AAAA,EACNC,cAAc;AAAA,EACdC,iBAAiB;AAAA,EACjBC,iBAAiB;AAAA,EACjBC,cAAc;AAChB;AA4BO,MAAMC,eAAeC,WAC1B,CAACC,OAA0BC,QAA0B;AAC7C,QAAA;AAAA,IACJC;AAAAA,IACAC,WAAWC;AAAAA,IACXC,SAASC;AAAAA,IACTC,SAASC,cAAc;AAAA,IACvBf,OAAO;AAAA,IACPgB,WAAW;AAAA,IACXC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZ,GAAGC;AAAAA,EACDZ,IAAAA;AACE,QAAA;AAAA,IAAEK;AAAAA,IAASQ;AAAAA,EAAAA,IAAOC,WAAWR,WAAW;AACxC,QAAA;AAAA,IAAES;AAAAA,MAAgBC,SAAS;AAEjC,QAAMT,UAAUU,WAAWT,aAAaO,2CAAaG,IAAI;AAEzD,QAAMC,YACJf,iBAAkBO,aAAa,OAAQlC,gBAAgB8B,OAAO,KAAK;AAErE,6BACGY,WAAS;AAAA,IACRlB;AAAAA,IACAC,WAAWW,GAAGR,QAAQe,MAAMf,QAAQE,OAAO,GAAGL,WAAW;AAAA,MACvD,CAACG,QAAQgB,MAAM,GAAG5B;AAAAA,MAClB,CAACY,QAAQK,MAAM,GAAGA;AAAAA,MAClB,CAACL,QAAQI,QAAQ,GAAGA;AAAAA,IAAAA,CACrB;AAAA,IAAE,GACCG;AAAAA,EAAAA,CACL;AAEL,CACF;"}

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

@@ -0,0 +1,107 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../../utils/classes.js";
+const {
+  useClasses,
+  staticClasses
+} = createClasses("HvTypography", {
+  root: {
+    fontFamily: theme.fontFamily.body
+  },
+  disabled: {
+    color: theme.colors.secondary_60
+  },
+  isLink: {
+    color: theme.colors.primary,
+    textDecoration: "underline"
+  },
+  noWrap: {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  // variants
+  display: {
+    ...theme.typography.display
+  },
+  title1: {
+    ...theme.typography.title1
+  },
+  title2: {
+    ...theme.typography.title2
+  },
+  title3: {
+    ...theme.typography.title3
+  },
+  title4: {
+    ...theme.typography.title4
+  },
+  body: {
+    ...theme.typography.body
+  },
+  label: {
+    ...theme.typography.label
+  },
+  caption1: {
+    ...theme.typography.caption1
+  },
+  caption2: {
+    ...theme.typography.caption2
+  },
+  // legacy variants
+  "5xlTitle": {
+    ...theme.typography["5xlTitle"]
+  },
+  "4xlTitle": {
+    ...theme.typography["4xlTitle"]
+  },
+  "3xlTitle": {
+    ...theme.typography["3xlTitle"]
+  },
+  xxlTitle: {
+    ...theme.typography.xxlTitle
+  },
+  xlTitle: {},
+  lTitle: {
+    ...theme.typography.lTitle
+  },
+  mTitle: {},
+  sTitle: {
+    ...theme.typography.sTitle
+  },
+  xsTitle: {},
+  xxsTitle: {
+    ...theme.typography.xxsTitle
+  },
+  sectionTitle: {
+    ...theme.typography.sectionTitle,
+    textTransform: "uppercase"
+  },
+  highlightText: {},
+  normalText: {},
+  placeholderText: {
+    ...theme.typography.placeholderText
+  },
+  link: {
+    ...theme.typography.link,
+    cursor: "pointer",
+    textDecoration: "underline"
+  },
+  disabledText: {
+    ...theme.typography.disabledText
+  },
+  selectedNavText: {
+    ...theme.typography.selectedNavText
+  },
+  vizText: {},
+  vizTextDisabled: {
+    ...theme.typography.vizTextDisabled
+  },
+  xsInlineLink: {
+    ...theme.typography.xsInlineLink
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Typography.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.styles.js","sources":["../../../../src/components/Typography/Typography.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { createClasses } from \"../../utils\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvTypography\", {\n  root: {\n    fontFamily: theme.fontFamily.body,\n  },\n  disabled: {\n    color: theme.colors.secondary_60,\n  },\n  isLink: {\n    color: theme.colors.primary,\n    textDecoration: \"underline\",\n  },\n  noWrap: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  // variants\n  display: { ...theme.typography.display },\n  title1: { ...theme.typography.title1 },\n  title2: { ...theme.typography.title2 },\n  title3: { ...theme.typography.title3 },\n  title4: { ...theme.typography.title4 },\n  body: { ...theme.typography.body },\n  label: { ...theme.typography.label },\n  caption1: { ...theme.typography.caption1 },\n  caption2: { ...theme.typography.caption2 },\n  // legacy variants\n  \"5xlTitle\": { ...theme.typography[\"5xlTitle\"] },\n  \"4xlTitle\": { ...theme.typography[\"4xlTitle\"] },\n  \"3xlTitle\": { ...theme.typography[\"3xlTitle\"] },\n  xxlTitle: { ...theme.typography.xxlTitle },\n  xlTitle: {},\n  lTitle: { ...theme.typography.lTitle },\n  mTitle: {},\n  sTitle: { ...theme.typography.sTitle },\n  xsTitle: {},\n  xxsTitle: { ...theme.typography.xxsTitle },\n  sectionTitle: {\n    ...theme.typography.sectionTitle,\n    textTransform: \"uppercase\",\n  },\n  highlightText: {},\n  normalText: {},\n  placeholderText: { ...theme.typography.placeholderText },\n  link: {\n    ...theme.typography.link,\n    cursor: \"pointer\",\n    textDecoration: \"underline\",\n  },\n  disabledText: { ...theme.typography.disabledText },\n  selectedNavText: { ...theme.typography.selectedNavText },\n  vizText: {},\n  vizTextDisabled: { ...theme.typography.vizTextDisabled },\n  xsInlineLink: { ...theme.typography.xsInlineLink },\n});\n"],"names":["useClasses","staticClasses","createClasses","root","fontFamily","theme","body","disabled","color","colors","secondary_60","isLink","primary","textDecoration","noWrap","overflow","textOverflow","whiteSpace","display","typography","title1","title2","title3","title4","label","caption1","caption2","xxlTitle","xlTitle","lTitle","mTitle","sTitle","xsTitle","xxsTitle","sectionTitle","textTransform","highlightText","normalText","placeholderText","link","cursor","disabledText","selectedNavText","vizText","vizTextDisabled","xsInlineLink"],"mappings":";;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,cAAc,gBAAgB;AAAA,EACzEC,MAAM;AAAA,IACJC,YAAYC,MAAMD,WAAWE;AAAAA,EAC/B;AAAA,EACAC,UAAU;AAAA,IACRC,OAAOH,MAAMI,OAAOC;AAAAA,EACtB;AAAA,EACAC,QAAQ;AAAA,IACNH,OAAOH,MAAMI,OAAOG;AAAAA,IACpBC,gBAAgB;AAAA,EAClB;AAAA,EACAC,QAAQ;AAAA,IACNC,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,YAAY;AAAA,EACd;AAAA;AAAA,EAEAC,SAAS;AAAA,IAAE,GAAGb,MAAMc,WAAWD;AAAAA,EAAQ;AAAA,EACvCE,QAAQ;AAAA,IAAE,GAAGf,MAAMc,WAAWC;AAAAA,EAAO;AAAA,EACrCC,QAAQ;AAAA,IAAE,GAAGhB,MAAMc,WAAWE;AAAAA,EAAO;AAAA,EACrCC,QAAQ;AAAA,IAAE,GAAGjB,MAAMc,WAAWG;AAAAA,EAAO;AAAA,EACrCC,QAAQ;AAAA,IAAE,GAAGlB,MAAMc,WAAWI;AAAAA,EAAO;AAAA,EACrCjB,MAAM;AAAA,IAAE,GAAGD,MAAMc,WAAWb;AAAAA,EAAK;AAAA,EACjCkB,OAAO;AAAA,IAAE,GAAGnB,MAAMc,WAAWK;AAAAA,EAAM;AAAA,EACnCC,UAAU;AAAA,IAAE,GAAGpB,MAAMc,WAAWM;AAAAA,EAAS;AAAA,EACzCC,UAAU;AAAA,IAAE,GAAGrB,MAAMc,WAAWO;AAAAA,EAAS;AAAA;AAAA,EAEzC,YAAY;AAAA,IAAE,GAAGrB,MAAMc,WAAW,UAAU;AAAA,EAAE;AAAA,EAC9C,YAAY;AAAA,IAAE,GAAGd,MAAMc,WAAW,UAAU;AAAA,EAAE;AAAA,EAC9C,YAAY;AAAA,IAAE,GAAGd,MAAMc,WAAW,UAAU;AAAA,EAAE;AAAA,EAC9CQ,UAAU;AAAA,IAAE,GAAGtB,MAAMc,WAAWQ;AAAAA,EAAS;AAAA,EACzCC,SAAS,CAAC;AAAA,EACVC,QAAQ;AAAA,IAAE,GAAGxB,MAAMc,WAAWU;AAAAA,EAAO;AAAA,EACrCC,QAAQ,CAAC;AAAA,EACTC,QAAQ;AAAA,IAAE,GAAG1B,MAAMc,WAAWY;AAAAA,EAAO;AAAA,EACrCC,SAAS,CAAC;AAAA,EACVC,UAAU;AAAA,IAAE,GAAG5B,MAAMc,WAAWc;AAAAA,EAAS;AAAA,EACzCC,cAAc;AAAA,IACZ,GAAG7B,MAAMc,WAAWe;AAAAA,IACpBC,eAAe;AAAA,EACjB;AAAA,EACAC,eAAe,CAAC;AAAA,EAChBC,YAAY,CAAC;AAAA,EACbC,iBAAiB;AAAA,IAAE,GAAGjC,MAAMc,WAAWmB;AAAAA,EAAgB;AAAA,EACvDC,MAAM;AAAA,IACJ,GAAGlC,MAAMc,WAAWoB;AAAAA,IACpBC,QAAQ;AAAA,IACR3B,gBAAgB;AAAA,EAClB;AAAA,EACA4B,cAAc;AAAA,IAAE,GAAGpC,MAAMc,WAAWsB;AAAAA,EAAa;AAAA,EACjDC,iBAAiB;AAAA,IAAE,GAAGrC,MAAMc,WAAWuB;AAAAA,EAAgB;AAAA,EACvDC,SAAS,CAAC;AAAA,EACVC,iBAAiB;AAAA,IAAE,GAAGvC,MAAMc,WAAWyB;AAAAA,EAAgB;AAAA,EACvDC,cAAc;AAAA,IAAE,GAAGxC,MAAMc,WAAW0B;AAAAA,EAAa;AACnD,CAAC;"}

package/dist/esm/components/Typography/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../src/components/Typography/utils.ts"],"sourcesContent":["const mappableVariants = new Map([\n  [\"3xlTitle\", \"display\"],\n  [\"xlTitle\", \"title1\"],\n  [\"mTitle\", \"title2\"],\n  [\"xsTitle\", \"title3\"],\n  [\"highlightText\", \"label\"],\n  [\"normalText\", \"body\"],\n  [\"vizText\", \"caption1\"],\n]);\n\nconst isLegacyVariant = (variant: string) => {\n  return [\n    \"5xlTitle\",\n    \"4xlTitle\",\n    \"3xlTitle\",\n    \"xxlTitle\",\n    \"xlTitle\",\n    \"lTitle\",\n    \"mTitle\",\n    \"sTitle\",\n    \"xsTitle\",\n    \"xxsTitle\",\n    \"sectionTitle\",\n    \"highlightText\",\n    \"normalText\",\n    \"placeholderText\",\n    \"link\",\n    \"disabledText\",\n    \"selectedNavText\",\n    \"vizText\",\n    \"vizTextDisabled\",\n    \"xsInlineLink\",\n  ].includes(variant);\n};\n\nexport const mapVariant = (variant: string, theme?: string) => {\n  const mappedVariant = mappableVariants.get(variant);\n\n  if (theme !== \"ds3\") {\n    if (mappedVariant) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        `The typography variant ${variant} is deprecated. You should use ${mappedVariant} instead.`\n      );\n      return mappedVariant;\n    }\n    if (isLegacyVariant(variant)) {\n      // eslint-disable-next-line no-console\n      console.warn(`The typography variant ${variant} is deprecated.`);\n    }\n  }\n\n  return variant;\n};\n"],"names":["mappableVariants","Map","isLegacyVariant","variant","includes","mapVariant","theme","mappedVariant","get","warn"],"mappings":"AAAA,MAAMA,mBAAmB,oBAAIC,IAAI,CAC/B,CAAC,YAAY,SAAS,GACtB,CAAC,WAAW,QAAQ,GACpB,CAAC,UAAU,QAAQ,GACnB,CAAC,WAAW,QAAQ,GACpB,CAAC,iBAAiB,OAAO,GACzB,CAAC,cAAc,MAAM,GACrB,CAAC,WAAW,UAAU,CAAC,CACxB;AAED,MAAMC,kBAAkBA,CAACC,YAAoB;AACpC,SAAA,CACL,YACA,YACA,YACA,YACA,WACA,UACA,UACA,UACA,WACA,YACA,gBACA,iBACA,cACA,mBACA,QACA,gBACA,mBACA,WACA,mBACA,cAAc,EACdC,SAASD,OAAO;AACpB;AAEaE,MAAAA,aAAaA,CAACF,SAAiBG,UAAmB;AACvDC,QAAAA,gBAAgBP,iBAAiBQ,IAAIL,OAAO;AAElD,MAAIG,UAAU,OAAO;AACnB,QAAIC,eAAe;AAETE,cAAAA,KACL,0BAAyBN,yCAAyCI,wBACrE;AACOA,aAAAA;AAAAA,IACT;AACIL,QAAAA,gBAAgBC,OAAO,GAAG;AAEpBM,cAAAA,KAAM,0BAAyBN,wBAAwB;AAAA,IACjE;AAAA,EACF;AAEOA,SAAAA;AACT;"}
+{"version":3,"file":"utils.js","sources":["../../../../src/components/Typography/utils.ts"],"sourcesContent":["import { HvTypographyLegacyVariants, HvTypographyVariants } from \".\";\n\ntype Variant = HvTypographyVariants | HvTypographyLegacyVariants;\n\nconst mappableVariants = new Map<Variant, HvTypographyVariants>([\n  [\"3xlTitle\", \"display\"],\n  [\"xlTitle\", \"title1\"],\n  [\"mTitle\", \"title2\"],\n  [\"xsTitle\", \"title3\"],\n  [\"highlightText\", \"label\"],\n  [\"normalText\", \"body\"],\n  [\"vizText\", \"caption1\"],\n]);\n\nconst isLegacyVariant = (variant: string) => {\n  return [\n    \"5xlTitle\",\n    \"4xlTitle\",\n    \"3xlTitle\",\n    \"xxlTitle\",\n    \"xlTitle\",\n    \"lTitle\",\n    \"mTitle\",\n    \"sTitle\",\n    \"xsTitle\",\n    \"xxsTitle\",\n    \"sectionTitle\",\n    \"highlightText\",\n    \"normalText\",\n    \"placeholderText\",\n    \"link\",\n    \"disabledText\",\n    \"selectedNavText\",\n    \"vizText\",\n    \"vizTextDisabled\",\n    \"xsInlineLink\",\n  ].includes(variant);\n};\n\nexport const mapVariant = (variant: Variant, theme?: string) => {\n  const mappedVariant = mappableVariants.get(variant);\n\n  if (theme !== \"ds3\") {\n    if (mappedVariant) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        `The typography variant ${variant} is deprecated. You should use ${mappedVariant} instead.`\n      );\n      return mappedVariant;\n    }\n    if (isLegacyVariant(variant)) {\n      // eslint-disable-next-line no-console\n      console.warn(`The typography variant ${variant} is deprecated.`);\n    }\n  }\n\n  return variant;\n};\n"],"names":["mappableVariants","Map","isLegacyVariant","variant","includes","mapVariant","theme","mappedVariant","get","warn"],"mappings":"AAIA,MAAMA,mBAAmB,oBAAIC,IAAmC,CAC9D,CAAC,YAAY,SAAS,GACtB,CAAC,WAAW,QAAQ,GACpB,CAAC,UAAU,QAAQ,GACnB,CAAC,WAAW,QAAQ,GACpB,CAAC,iBAAiB,OAAO,GACzB,CAAC,cAAc,MAAM,GACrB,CAAC,WAAW,UAAU,CAAC,CACxB;AAED,MAAMC,kBAAkBA,CAACC,YAAoB;AACpC,SAAA,CACL,YACA,YACA,YACA,YACA,WACA,UACA,UACA,UACA,WACA,YACA,gBACA,iBACA,cACA,mBACA,QACA,gBACA,mBACA,WACA,mBACA,cAAc,EACdC,SAASD,OAAO;AACpB;AAEaE,MAAAA,aAAaA,CAACF,SAAkBG,UAAmB;AACxDC,QAAAA,gBAAgBP,iBAAiBQ,IAAIL,OAAO;AAElD,MAAIG,UAAU,OAAO;AACnB,QAAIC,eAAe;AAETE,cAAAA,KACL,0BAAyBN,yCAAyCI,wBACrE;AACOA,aAAAA;AAAAA,IACT;AACIL,QAAAA,gBAAgBC,OAAO,GAAG;AAEpBM,cAAAA,KAAM,0BAAyBN,wBAAwB;AAAA,IACjE;AAAA,EACF;AAEOA,SAAAA;AACT;"}

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

@@ -31,7 +31,7 @@ const HvVerticalNavigationHeader = ({
     if (navigateToParentHandler)
       navigateToParentHandler();
   };
-  const shouldShowTitle = useMemo(() => !slider || slider && !Array.isArray(parentItem), [parentItem]);
+  const shouldShowTitle = useMemo(() => !slider || slider && !Array.isArray(parentItem), [parentItem, slider]);
   return shouldShowTitle ? /* @__PURE__ */ jsxs(StyledHeader, {
     className: clsx(className, verticalNavigationHeaderClasses.root, classes == null ? void 0 : classes.root, !isOpen && clsx(verticalNavigationHeaderClasses.minimized, classes == null ? void 0 : classes.minimized)),
     ...others,

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

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../../../../../src/components/VerticalNavigation/Header/Header.tsx"],"sourcesContent":["import { Backwards, Forwards, Menu } from \"@hitachivantara/uikit-react-icons\";\nimport { clsx } from \"clsx\";\nimport { HvButton, HvButtonProps, HvTypography } from \"@core/components\";\nimport { MouseEventHandler, useContext, useMemo } from \"react\";\nimport { VerticalNavigationContext } from \"../VerticalNavigationContext\";\nimport { StyledCollapseButton, StyledHeader } from \"./Header.styles\";\nimport verticalNavigationHeaderClasses, {\n  HvVerticalNavigationHeaderClasses,\n} from \"./headerClasses\";\n\nexport interface HvVerticalNavigationHeaderProps {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * The title text to show on Header.\n   */\n  title?: string;\n  /**\n   * Icon to show when Vertical Navigation is collapsed.\n   */\n  openIcon?: React.ReactNode;\n  /**\n   * Icon to show when Vertical Navigation is expanded.\n   */\n  closeIcon?: React.ReactNode;\n  /**\n   * Props for the collapse button.\n   */\n  collapseButtonProps?: HvButtonProps;\n  /**\n   * Props for the back button.\n   */\n  backButtonProps?: HvButtonProps;\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvVerticalNavigationHeaderClasses;\n  /**\n   * Handler for the collapse button.\n   */\n  onCollapseButtonClick?: MouseEventHandler<HTMLElement>;\n}\n\nexport const HvVerticalNavigationHeader = ({\n  title,\n  openIcon = <Forwards />,\n  closeIcon = <Backwards />,\n  collapseButtonProps,\n  backButtonProps,\n  className,\n  classes,\n  onCollapseButtonClick,\n  ...others\n}: HvVerticalNavigationHeaderProps) => {\n  const {\n    isOpen,\n    useIcons,\n    headerTitle,\n    slider,\n    navigateToParentHandler,\n    parentItem,\n  } = useContext(VerticalNavigationContext);\n\n  openIcon = !useIcons ? <Menu /> : openIcon;\n\n  const backButtonClickHandler = () => {\n    if (navigateToParentHandler) navigateToParentHandler();\n  };\n\n  // whenever we're in a sublevel, the parentItem is always a single item.\n  // In the first level it's always an array with the first level elements.\n  const shouldShowTitle = useMemo(\n    () => !slider || (slider && !Array.isArray(parentItem)),\n    [parentItem]\n  );\n\n  return shouldShowTitle ? (\n    <StyledHeader\n      className={clsx(\n        className,\n        verticalNavigationHeaderClasses.root,\n        classes?.root,\n        !isOpen &&\n          clsx(verticalNavigationHeaderClasses.minimized, classes?.minimized)\n      )}\n      {...others}\n    >\n      {isOpen && headerTitle && slider && (\n        <HvButton\n          icon\n          variant=\"secondaryGhost\"\n          onClick={backButtonClickHandler}\n          {...backButtonProps}\n        >\n          <Backwards iconSize=\"XS\" />\n        </HvButton>\n      )}\n      {isOpen && (\n        <HvTypography variant={slider ? \"label\" : \"title3\"}>\n          {headerTitle && slider ? headerTitle : title}\n        </HvTypography>\n      )}\n      {onCollapseButtonClick && (\n        <StyledCollapseButton\n          icon\n          variant=\"secondaryGhost\"\n          onClick={onCollapseButtonClick}\n          classes={{\n            root: isOpen ? \"\" : verticalNavigationHeaderClasses.minimized,\n          }}\n          {...collapseButtonProps}\n        >\n          {isOpen ? closeIcon : openIcon}\n        </StyledCollapseButton>\n      )}\n    </StyledHeader>\n  ) : null;\n};\n"],"names":["HvVerticalNavigationHeader","title","openIcon","_jsx","Forwards","closeIcon","Backwards","collapseButtonProps","backButtonProps","className","classes","onCollapseButtonClick","others","isOpen","useIcons","headerTitle","slider","navigateToParentHandler","parentItem","useContext","VerticalNavigationContext","Menu","backButtonClickHandler","shouldShowTitle","useMemo","Array","isArray","StyledHeader","clsx","verticalNavigationHeaderClasses","root","minimized","children","HvButton","icon","variant","onClick","iconSize","HvTypography","StyledCollapseButton"],"mappings":";;;;;;;;;AAiDO,MAAMA,6BAA6BA,CAAC;AAAA,EACzCC;AAAAA,EACAC,WAAWC,oBAACC,YAAU;AAAA,EACtBC,YAAYF,oBAACG,aAAW;AAAA,EACxBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AAC4B,MAAM;AAC/B,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,EAAAA,IACEC,WAAWC,yBAAyB;AAExClB,aAAW,CAACY,WAAWX,oBAACkB,MAAI,CAAA,CAAE,IAAInB;AAElC,QAAMoB,yBAAyBA,MAAM;AAC/BL,QAAAA;AAAiD;EAAA;AAKvD,QAAMM,kBAAkBC,QACtB,MAAM,CAACR,UAAWA,UAAU,CAACS,MAAMC,QAAQR,UAAU,GACrD,CAACA,UAAU,CACb;AAEOK,SAAAA,uCACJI,cAAY;AAAA,IACXlB,WAAWmB,KACTnB,WACAoB,gCAAgCC,MAChCpB,mCAASoB,MACT,CAACjB,UACCe,KAAKC,gCAAgCE,WAAWrB,mCAASqB,SAAS,CACtE;AAAA,IAAE,GACEnB;AAAAA,IAAMoB,UAAA,CAETnB,UAAUE,eAAeC,8BACvBiB,UAAQ;AAAA,MACPC,MAAI;AAAA,MACJC,SAAQ;AAAA,MACRC,SAASd;AAAAA,MAAuB,GAC5Bd;AAAAA,MAAewB,8BAElB1B,WAAS;AAAA,QAAC+B,UAAS;AAAA,MAAA,CAAM;AAAA,IAAA,CAClB,GAEXxB,UACCV,oBAACmC,cAAY;AAAA,MAACH,SAASnB,SAAS,UAAU;AAAA,MAASgB,UAChDjB,eAAeC,SAASD,cAAcd;AAAAA,IAAAA,CAC3B,GAEfU,yBACCR,oBAACoC,sBAAoB;AAAA,MACnBL,MAAI;AAAA,MACJC,SAAQ;AAAA,MACRC,SAASzB;AAAAA,MACTD,SAAS;AAAA,QACPoB,MAAMjB,SAAS,KAAKgB,gCAAgCE;AAAAA,MACtD;AAAA,MAAE,GACExB;AAAAA,MAAmByB,UAEtBnB,SAASR,YAAYH;AAAAA,IAAAA,CACF,CACvB;AAAA,EACW,CAAA,IACZ;AACN;"}
+{"version":3,"file":"Header.js","sources":["../../../../../src/components/VerticalNavigation/Header/Header.tsx"],"sourcesContent":["import { Backwards, Forwards, Menu } from \"@hitachivantara/uikit-react-icons\";\nimport { clsx } from \"clsx\";\nimport { HvButton, HvButtonProps, HvTypography } from \"@core/components\";\nimport { MouseEventHandler, useContext, useMemo } from \"react\";\nimport { VerticalNavigationContext } from \"../VerticalNavigationContext\";\nimport { StyledCollapseButton, StyledHeader } from \"./Header.styles\";\nimport verticalNavigationHeaderClasses, {\n  HvVerticalNavigationHeaderClasses,\n} from \"./headerClasses\";\n\nexport interface HvVerticalNavigationHeaderProps {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * The title text to show on Header.\n   */\n  title?: string;\n  /**\n   * Icon to show when Vertical Navigation is collapsed.\n   */\n  openIcon?: React.ReactNode;\n  /**\n   * Icon to show when Vertical Navigation is expanded.\n   */\n  closeIcon?: React.ReactNode;\n  /**\n   * Props for the collapse button.\n   */\n  collapseButtonProps?: HvButtonProps;\n  /**\n   * Props for the back button.\n   */\n  backButtonProps?: HvButtonProps;\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvVerticalNavigationHeaderClasses;\n  /**\n   * Handler for the collapse button.\n   */\n  onCollapseButtonClick?: MouseEventHandler<HTMLElement>;\n}\n\nexport const HvVerticalNavigationHeader = ({\n  title,\n  openIcon = <Forwards />,\n  closeIcon = <Backwards />,\n  collapseButtonProps,\n  backButtonProps,\n  className,\n  classes,\n  onCollapseButtonClick,\n  ...others\n}: HvVerticalNavigationHeaderProps) => {\n  const {\n    isOpen,\n    useIcons,\n    headerTitle,\n    slider,\n    navigateToParentHandler,\n    parentItem,\n  } = useContext(VerticalNavigationContext);\n\n  openIcon = !useIcons ? <Menu /> : openIcon;\n\n  const backButtonClickHandler = () => {\n    if (navigateToParentHandler) navigateToParentHandler();\n  };\n\n  // whenever we're in a sublevel, the parentItem is always a single item.\n  // In the first level it's always an array with the first level elements.\n  const shouldShowTitle = useMemo(\n    () => !slider || (slider && !Array.isArray(parentItem)),\n    [parentItem, slider]\n  );\n\n  return shouldShowTitle ? (\n    <StyledHeader\n      className={clsx(\n        className,\n        verticalNavigationHeaderClasses.root,\n        classes?.root,\n        !isOpen &&\n          clsx(verticalNavigationHeaderClasses.minimized, classes?.minimized)\n      )}\n      {...others}\n    >\n      {isOpen && headerTitle && slider && (\n        <HvButton\n          icon\n          variant=\"secondaryGhost\"\n          onClick={backButtonClickHandler}\n          {...backButtonProps}\n        >\n          <Backwards iconSize=\"XS\" />\n        </HvButton>\n      )}\n      {isOpen && (\n        <HvTypography variant={slider ? \"label\" : \"title3\"}>\n          {headerTitle && slider ? headerTitle : title}\n        </HvTypography>\n      )}\n      {onCollapseButtonClick && (\n        <StyledCollapseButton\n          icon\n          variant=\"secondaryGhost\"\n          onClick={onCollapseButtonClick}\n          classes={{\n            root: isOpen ? \"\" : verticalNavigationHeaderClasses.minimized,\n          }}\n          {...collapseButtonProps}\n        >\n          {isOpen ? closeIcon : openIcon}\n        </StyledCollapseButton>\n      )}\n    </StyledHeader>\n  ) : null;\n};\n"],"names":["HvVerticalNavigationHeader","title","openIcon","_jsx","Forwards","closeIcon","Backwards","collapseButtonProps","backButtonProps","className","classes","onCollapseButtonClick","others","isOpen","useIcons","headerTitle","slider","navigateToParentHandler","parentItem","useContext","VerticalNavigationContext","Menu","backButtonClickHandler","shouldShowTitle","useMemo","Array","isArray","StyledHeader","clsx","verticalNavigationHeaderClasses","root","minimized","children","HvButton","icon","variant","onClick","iconSize","HvTypography","StyledCollapseButton"],"mappings":";;;;;;;;;AAiDO,MAAMA,6BAA6BA,CAAC;AAAA,EACzCC;AAAAA,EACAC,WAAWC,oBAACC,YAAU;AAAA,EACtBC,YAAYF,oBAACG,aAAW;AAAA,EACxBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AAC4B,MAAM;AAC/B,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,EAAAA,IACEC,WAAWC,yBAAyB;AAExClB,aAAW,CAACY,WAAWX,oBAACkB,MAAI,CAAA,CAAE,IAAInB;AAElC,QAAMoB,yBAAyBA,MAAM;AAC/BL,QAAAA;AAAiD;EAAA;AAKvD,QAAMM,kBAAkBC,QACtB,MAAM,CAACR,UAAWA,UAAU,CAACS,MAAMC,QAAQR,UAAU,GACrD,CAACA,YAAYF,MAAM,CACrB;AAEOO,SAAAA,uCACJI,cAAY;AAAA,IACXlB,WAAWmB,KACTnB,WACAoB,gCAAgCC,MAChCpB,mCAASoB,MACT,CAACjB,UACCe,KAAKC,gCAAgCE,WAAWrB,mCAASqB,SAAS,CACtE;AAAA,IAAE,GACEnB;AAAAA,IAAMoB,UAAA,CAETnB,UAAUE,eAAeC,8BACvBiB,UAAQ;AAAA,MACPC,MAAI;AAAA,MACJC,SAAQ;AAAA,MACRC,SAASd;AAAAA,MAAuB,GAC5Bd;AAAAA,MAAewB,8BAElB1B,WAAS;AAAA,QAAC+B,UAAS;AAAA,MAAA,CAAM;AAAA,IAAA,CAClB,GAEXxB,UACCV,oBAACmC,cAAY;AAAA,MAACH,SAASnB,SAAS,UAAU;AAAA,MAASgB,UAChDjB,eAAeC,SAASD,cAAcd;AAAAA,IAAAA,CAC3B,GAEfU,yBACCR,oBAACoC,sBAAoB;AAAA,MACnBL,MAAI;AAAA,MACJC,SAAQ;AAAA,MACRC,SAASzB;AAAAA,MACTD,SAAS;AAAA,QACPoB,MAAMjB,SAAS,KAAKgB,gCAAgCE;AAAAA,MACtD;AAAA,MAAE,GACExB;AAAAA,MAAmByB,UAEtBnB,SAASR,YAAYH;AAAAA,IAAAA,CACF,CACvB;AAAA,EACW,CAAA,IACZ;AACN;"}

package/dist/esm/components/VerticalNavigation/Navigation/Navigation.js

@@ -137,8 +137,8 @@ const HvVerticalNavigationTree = ({
         onChange(event, selectedItem);
       }
     }
-  }, [onChange, setSelected]);
-  const treeViewItemMouseEnterHandler = (event, item) => {
+  }, [onChange, setSelected, setExpanded, isOpen, useIcons, data]);
+  const treeViewItemMouseEnterHandler = useCallback((event, item) => {
     const isCollapsed = useIcons && !isOpen;
     if (isCollapsed && item.data && !(navigationPopup == null ? void 0 : navigationPopup.fixedMode)) {
       const currentEventTarget = event.currentTarget;
@@ -151,14 +151,14 @@ const HvVerticalNavigationTree = ({
     } else if (isCollapsed && !item.data && !(navigationPopup == null ? void 0 : navigationPopup.fixedMode)) {
       setNavigationPopup(null);
     }
-  };
+  }, [isOpen, useIcons, navigationPopup]);
   const handleToggle = useCallback((event, newExpanded) => {
     setExpanded(newExpanded);
     if (onToggle) {
       onToggle(event, newExpanded);
     }
   }, [onToggle, setExpanded]);
-  const children = useMemo(() => data && createListHierarchy(data, id, classes, treeViewItemMouseEnterHandler, navigationPopup == null ? void 0 : navigationPopup.fixedMode), [classes, data, id, navigationPopup, isOpen]);
+  const children = useMemo(() => data && createListHierarchy(data, id, classes, treeViewItemMouseEnterHandler, navigationPopup == null ? void 0 : navigationPopup.fixedMode), [classes, data, id, navigationPopup, treeViewItemMouseEnterHandler]);
   useEffect(() => {
     if (!isOpen) {
       setNavigationPopup == null ? void 0 : setNavigationPopup(null);
@@ -167,16 +167,16 @@ const HvVerticalNavigationTree = ({
   useEffect(() => {
     if (setParentSelected)
       setParentSelected(selected);
-  }, [selected, setSelected]);
+  }, [selected, setSelected, setParentSelected]);
   useEffect(() => {
     if (setParentData)
       setParentData(data);
-  }, [data]);
+  }, [data, setParentData]);
   useEffect(() => {
     if (withParentData && selected && setParentItem && getParentItemById(withParentData, selected)) {
       setParentItem(getParentItemById(withParentData, selected));
     }
-  }, [withParentData]);
+  }, [withParentData, selected, setParentItem]);
   const navigateToTargetHandler = (event, selectedItem) => {
     handleChange(event, selectedItem.id, selectedItem);
   };

package/dist/esm/components/VerticalNavigation/Navigation/Navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"Navigation.js","sources":["../../../../../src/components/VerticalNavigation/Navigation/Navigation.tsx"],"sourcesContent":["import {\n  useCallback,\n  useMemo,\n  useContext,\n  useEffect,\n  useState,\n  ComponentProps,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport uniqueId from \"lodash/uniqueId\";\nimport { setId, wrapperTooltip } from \"@core/utils\";\nimport { useControlled } from \"@core/hooks\";\nimport { HvBaseProps } from \"@core/types\";\nimport {\n  HvVerticalNavigationTreeView,\n  HvVerticalNavigationTreeViewItem,\n} from \"../TreeView\";\nimport verticalNavigationTreeClasses, {\n  HvVerticalNavigationTreeClasses,\n} from \"./navigationClasses\";\nimport { StyledNav } from \"./Navigation.styles\";\nimport { HvVerticalNavigationSlider } from \"..\";\nimport { VerticalNavigationContext } from \"../VerticalNavigationContext\";\nimport { HvVerticalNavigationPopup } from \"../NavigationPopup/NavigationPopup\";\nimport { getParentItemById } from \"../NavigationSlider/utils/NavigationSlider.utils\";\n\nexport type NavigationData<T extends React.ElementType = \"a\"> =\n  ComponentProps<T> &\n    Record<string, any> & {\n      /** The id to be applied to the root element. */\n      id: string;\n      /** The label to be rendered on the menu item. */\n      label: string;\n      /** The icon to be rendered. */\n      icon?: React.ReactNode;\n      /** The Data children subset. */\n      data?: NavigationData<T>[];\n      /** Whether the item is disabled and not interactive. */\n      disabled?: boolean;\n      /** Whether the item has a selected state. */\n      selectable?: boolean;\n    };\n\nconst createListHierarchy = (\n  items,\n  id,\n  classes?: HvVerticalNavigationTreeClasses,\n  mouseEnterHandler?: (event, item) => void,\n  disableTooltip = false\n) =>\n  items.map((item) => {\n    const {\n      id: itemId,\n      label: itemLabel,\n      icon,\n      data: children,\n      selectable,\n      disabled,\n      href,\n      target,\n    } = item;\n\n    const ItemText = wrapperTooltip(true, itemLabel, itemLabel);\n\n    const itemMouseEnterHandler = (event) => {\n      mouseEnterHandler?.(event, item);\n    };\n\n    return (\n      <HvVerticalNavigationTreeViewItem\n        id={setId(id, itemId)}\n        className={classes?.listItem}\n        href={href}\n        target={target}\n        key={itemId}\n        nodeId={itemId}\n        label={<ItemText />}\n        icon={icon}\n        payload={item}\n        selectable={selectable}\n        disabled={disabled}\n        onMouseEnter={itemMouseEnterHandler}\n        disableTooltip={disableTooltip}\n      >\n        {children\n          ? createListHierarchy(\n              children,\n              id,\n              classes,\n              mouseEnterHandler,\n              disableTooltip\n            )\n          : undefined}\n      </HvVerticalNavigationTreeViewItem>\n    );\n  });\n\nconst getAllParents = (items) => {\n  const parents = items.filter(\n    (item) => item.data != null && item.data.length > 0\n  );\n  const childParents = parents.flatMap((item) => getAllParents(item.data));\n\n  return [...parents, ...childParents];\n};\n\nfunction pathToElement(data, targetId) {\n  const path: string[] = [];\n\n  if (data != null && data.length > 0) {\n    for (let i = 0; i !== data.length; ++i) {\n      const item = data[i];\n      if (item.id === targetId) {\n        path.push(item.id);\n        break;\n      }\n\n      const subPaths = pathToElement(item.data, targetId);\n      if (subPaths.length > 0) {\n        path.push(item.id);\n        path.push(...subPaths);\n        break;\n      }\n    }\n  }\n\n  return path;\n}\n\nexport const HvVerticalNavigationTree = ({\n  id,\n\n  className,\n  classes,\n\n  data,\n\n  mode = \"navigation\",\n\n  collapsible = false,\n  expanded: expandedProp,\n  defaultExpanded,\n  onToggle,\n\n  selected: selectedProp,\n  defaultSelected,\n  onChange,\n\n  ...others\n}: HvVerticalNavigationTreeProps) => {\n  const [selected, setSelected] = useControlled(selectedProp, defaultSelected);\n  const [expanded, setExpanded] = useControlled(expandedProp, () => {\n    if (defaultExpanded === true) {\n      // all parent nodes will be expanded by default\n      return getAllParents(data).map((item) => item.id);\n    }\n\n    if (defaultExpanded === false) {\n      // all parent nodes will be collapsed by default\n      return [];\n    }\n\n    if (defaultExpanded == null) {\n      if (selected != null) {\n        // the path to the selected node will be expanded (default behaviour)\n        const path = pathToElement(data, selected);\n        return path.slice(0, -1);\n      }\n\n      // nothing is expanded\n      return [];\n    }\n\n    return defaultExpanded;\n  });\n\n  const {\n    isOpen,\n    useIcons,\n    slider,\n\n    parentItem,\n    setParentItem,\n    withParentData,\n    navigateToChildHandler,\n\n    setParentData,\n    setParentSelected,\n  } = useContext(VerticalNavigationContext);\n\n  const [navigationPopup, setNavigationPopup] = useState<{\n    // This value is needed to guarantee that the NavigationPopup is fully re-rendered with keeping any previous values\n    uniqueKey: string;\n    anchorEl: HTMLButtonElement | null;\n    fixedMode: boolean;\n    data: NavigationData[];\n  } | null>(null);\n\n  const handleChange = useCallback(\n    (event, selectedId, selectedItem) => {\n      if (useIcons && !isOpen && selectedItem.data) {\n        const currentEventTarget = event.currentTarget;\n        setNavigationPopup((prevState) => {\n          // We want to close the popup in case the clicked element is the same as the previous one\n          return prevState?.anchorEl === currentEventTarget\n            ? null\n            : {\n                uniqueKey: uniqueId(),\n                anchorEl: currentEventTarget,\n                fixedMode: true,\n                data: selectedItem.data,\n              };\n        });\n\n        // We need this stopPropagation or else the Popup will close due to the clickaway being triggered\n        event.stopPropagation();\n      } else {\n        setSelected(selectedId);\n        setExpanded((prevState) => {\n          if (!isOpen) {\n            return [...prevState, ...pathToElement(data, selectedId)];\n          }\n          return [...prevState];\n        });\n        setNavigationPopup(null);\n        if (onChange) {\n          onChange(event, selectedItem);\n        }\n      }\n    },\n    [onChange, setSelected]\n  );\n\n  const treeViewItemMouseEnterHandler = (event, item) => {\n    const isCollapsed = useIcons && !isOpen;\n\n    if (isCollapsed && item.data && !navigationPopup?.fixedMode) {\n      const currentEventTarget = event.currentTarget;\n\n      setNavigationPopup?.({\n        uniqueKey: uniqueId(),\n        anchorEl: currentEventTarget,\n        fixedMode: false,\n        data: item.data,\n      });\n    } else if (isCollapsed && !item.data && !navigationPopup?.fixedMode) {\n      setNavigationPopup(null);\n    }\n  };\n\n  const handleToggle = useCallback(\n    (event, newExpanded) => {\n      setExpanded(newExpanded);\n\n      if (onToggle) {\n        onToggle(event, newExpanded);\n      }\n    },\n    [onToggle, setExpanded]\n  );\n\n  const children = useMemo(\n    () =>\n      data &&\n      createListHierarchy(\n        data,\n        id,\n        classes,\n        treeViewItemMouseEnterHandler,\n        navigationPopup?.fixedMode\n      ),\n    [classes, data, id, navigationPopup, isOpen]\n  );\n\n  useEffect(() => {\n    if (!isOpen) {\n      setNavigationPopup?.(null);\n    }\n  }, [isOpen]);\n\n  useEffect(() => {\n    if (setParentSelected) setParentSelected(selected);\n  }, [selected, setSelected]);\n\n  useEffect(() => {\n    if (setParentData) setParentData(data);\n  }, [data]);\n\n  useEffect(() => {\n    if (\n      withParentData &&\n      selected &&\n      setParentItem &&\n      getParentItemById(withParentData, selected)\n    ) {\n      setParentItem(getParentItemById(withParentData, selected));\n    }\n  }, [withParentData]);\n\n  // navigation slider\n  const navigateToTargetHandler = (event, selectedItem) => {\n    handleChange(event, selectedItem.id, selectedItem);\n  };\n\n  const handleNavigationPopupClose = () => {\n    setNavigationPopup(null);\n  };\n\n  const handleStyledNavMouseLeave = () => {\n    if (useIcons && !isOpen && !navigationPopup?.fixedMode) {\n      setNavigationPopup(null);\n    }\n  };\n\n  return (\n    <StyledNav\n      id={id}\n      className={clsx(\n        className,\n        verticalNavigationTreeClasses.root,\n        classes?.root,\n        !isOpen &&\n          !useIcons &&\n          clsx(verticalNavigationTreeClasses.collapsed, classes?.collapsed)\n      )}\n      onMouseLeave={handleStyledNavMouseLeave}\n      {...others}\n    >\n      {slider ? (\n        <HvVerticalNavigationSlider\n          data={parentItem.data || withParentData}\n          selected={selected}\n          onNavigateToTarget={navigateToTargetHandler}\n          onNavigateToChild={navigateToChildHandler}\n        />\n      ) : (\n        <HvVerticalNavigationTreeView\n          id={setId(id, \"tree\")}\n          className={clsx(verticalNavigationTreeClasses.list, classes?.list)}\n          selectable\n          mode={mode}\n          collapsible={collapsible}\n          selected={selected}\n          onChange={handleChange}\n          expanded={expanded}\n          onToggle={handleToggle}\n        >\n          {useIcons && !isOpen && navigationPopup && (\n            <HvVerticalNavigationPopup\n              id={setId(id, \"navigation-popup\")}\n              key={navigationPopup.uniqueKey}\n              anchorEl={navigationPopup.anchorEl}\n              selected={selected}\n              fixedMode={navigationPopup.fixedMode}\n              data={navigationPopup.data}\n              onClose={handleNavigationPopupClose}\n              onChange={handleChange}\n              className={clsx(\n                verticalNavigationTreeClasses.navigationPopup,\n                classes?.navigationPopup\n              )}\n            />\n          )}\n          {children}\n        </HvVerticalNavigationTreeView>\n      )}\n    </StyledNav>\n  );\n};\n\nexport interface HvVerticalNavigationTreeProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvVerticalNavigationTreeClasses;\n  /**\n   * Modus operandi (role) of the widget instance.\n   */\n  mode?: NavigationMode;\n  /**\n   * Can non-leaf nodes be collapsed / expanded.\n   */\n  collapsible?: boolean;\n  /**\n   * The ID of the selected page.\n   */\n  selected?: string;\n  /**\n   * When uncontrolled, defines the initial selected page ID.\n   */\n  defaultSelected?: string;\n  /**\n   * Callback fired when a navigation item is selected.\n   *\n   * @param {object} event The event source of the callback.\n   * @param {object} page The data of the selected page.\n   */\n  onChange?: (event, page) => void;\n  /**\n   * Expanded nodes' ids.\n   */\n  expanded?: string[];\n  /**\n   * When uncontrolled, defines the initial expanded nodes' ids.\n   *\n   * It also supports `true` for starting with all nodes expanded.\n   * With `false` all nodes will be collapsed.\n   *\n   * By default it expands the needed nodes to display the current selection, if any.\n   */\n  defaultExpanded?: string[] | boolean;\n  /**\n   * Callback fired when tree items are expanded/collapsed.\n   *\n   * @param {object} event The event source of the callback.\n   * @param {array} nodeIds The ids of the expanded nodes (old and new).\n   */\n  onToggle?: (event, nodeIds) => void;\n  /**\n   * An array containing the data for each menu item.\n   *\n   * id - the id to be applied to the root element.\n   * label - the label to be rendered on the menu item.\n   * data - sub-menu items\n   * href - the url used for navigation.\n   * target - the behavior when opening an url.\n   */\n  data?: NavigationData[];\n}\n\nexport type NavigationMode = \"treeview\" | \"navigation\" | \"slider\";\n"],"names":["createListHierarchy","items","id","classes","mouseEnterHandler","disableTooltip","map","item","itemId","label","itemLabel","icon","data","children","selectable","disabled","href","target","ItemText","wrapperTooltip","itemMouseEnterHandler","event","HvVerticalNavigationTreeViewItem","setId","className","listItem","nodeId","_jsx","payload","onMouseEnter","undefined","getAllParents","parents","filter","length","childParents","flatMap","pathToElement","targetId","path","i","push","subPaths","HvVerticalNavigationTree","mode","collapsible","expanded","expandedProp","defaultExpanded","onToggle","selected","selectedProp","defaultSelected","onChange","others","setSelected","useControlled","setExpanded","slice","isOpen","useIcons","slider","parentItem","setParentItem","withParentData","navigateToChildHandler","setParentData","setParentSelected","useContext","VerticalNavigationContext","navigationPopup","setNavigationPopup","useState","handleChange","useCallback","selectedId","selectedItem","currentEventTarget","currentTarget","prevState","anchorEl","uniqueKey","uniqueId","fixedMode","stopPropagation","treeViewItemMouseEnterHandler","isCollapsed","handleToggle","newExpanded","useMemo","useEffect","getParentItemById","navigateToTargetHandler","handleNavigationPopupClose","handleStyledNavMouseLeave","StyledNav","clsx","verticalNavigationTreeClasses","root","collapsed","onMouseLeave","HvVerticalNavigationSlider","onNavigateToTarget","onNavigateToChild","_jsxs","HvVerticalNavigationTreeView","list","HvVerticalNavigationPopup","onClose"],"mappings":"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"}
+{"version":3,"file":"Navigation.js","sources":["../../../../../src/components/VerticalNavigation/Navigation/Navigation.tsx"],"sourcesContent":["import {\n  useCallback,\n  useMemo,\n  useContext,\n  useEffect,\n  useState,\n  ComponentProps,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport uniqueId from \"lodash/uniqueId\";\nimport { setId, wrapperTooltip } from \"@core/utils\";\nimport { useControlled } from \"@core/hooks\";\nimport { HvBaseProps } from \"@core/types\";\nimport {\n  HvVerticalNavigationTreeView,\n  HvVerticalNavigationTreeViewItem,\n} from \"../TreeView\";\nimport verticalNavigationTreeClasses, {\n  HvVerticalNavigationTreeClasses,\n} from \"./navigationClasses\";\nimport { StyledNav } from \"./Navigation.styles\";\nimport { HvVerticalNavigationSlider } from \"..\";\nimport { VerticalNavigationContext } from \"../VerticalNavigationContext\";\nimport { HvVerticalNavigationPopup } from \"../NavigationPopup/NavigationPopup\";\nimport { getParentItemById } from \"../NavigationSlider/utils/NavigationSlider.utils\";\n\nexport type NavigationData<T extends React.ElementType = \"a\"> =\n  ComponentProps<T> &\n    Record<string, any> & {\n      /** The id to be applied to the root element. */\n      id: string;\n      /** The label to be rendered on the menu item. */\n      label: string;\n      /** The icon to be rendered. */\n      icon?: React.ReactNode;\n      /** The Data children subset. */\n      data?: NavigationData<T>[];\n      /** Whether the item is disabled and not interactive. */\n      disabled?: boolean;\n      /** Whether the item has a selected state. */\n      selectable?: boolean;\n    };\n\nconst createListHierarchy = (\n  items,\n  id,\n  classes?: HvVerticalNavigationTreeClasses,\n  mouseEnterHandler?: (event, item) => void,\n  disableTooltip = false\n) =>\n  items.map((item) => {\n    const {\n      id: itemId,\n      label: itemLabel,\n      icon,\n      data: children,\n      selectable,\n      disabled,\n      href,\n      target,\n    } = item;\n\n    const ItemText = wrapperTooltip(true, itemLabel, itemLabel);\n\n    const itemMouseEnterHandler = (event) => {\n      mouseEnterHandler?.(event, item);\n    };\n\n    return (\n      <HvVerticalNavigationTreeViewItem\n        id={setId(id, itemId)}\n        className={classes?.listItem}\n        href={href}\n        target={target}\n        key={itemId}\n        nodeId={itemId}\n        label={<ItemText />}\n        icon={icon}\n        payload={item}\n        selectable={selectable}\n        disabled={disabled}\n        onMouseEnter={itemMouseEnterHandler}\n        disableTooltip={disableTooltip}\n      >\n        {children\n          ? createListHierarchy(\n              children,\n              id,\n              classes,\n              mouseEnterHandler,\n              disableTooltip\n            )\n          : undefined}\n      </HvVerticalNavigationTreeViewItem>\n    );\n  });\n\nconst getAllParents = (items) => {\n  const parents = items.filter(\n    (item) => item.data != null && item.data.length > 0\n  );\n  const childParents = parents.flatMap((item) => getAllParents(item.data));\n\n  return [...parents, ...childParents];\n};\n\nfunction pathToElement(data, targetId) {\n  const path: string[] = [];\n\n  if (data != null && data.length > 0) {\n    for (let i = 0; i !== data.length; ++i) {\n      const item = data[i];\n      if (item.id === targetId) {\n        path.push(item.id);\n        break;\n      }\n\n      const subPaths = pathToElement(item.data, targetId);\n      if (subPaths.length > 0) {\n        path.push(item.id);\n        path.push(...subPaths);\n        break;\n      }\n    }\n  }\n\n  return path;\n}\n\nexport const HvVerticalNavigationTree = ({\n  id,\n\n  className,\n  classes,\n\n  data,\n\n  mode = \"navigation\",\n\n  collapsible = false,\n  expanded: expandedProp,\n  defaultExpanded,\n  onToggle,\n\n  selected: selectedProp,\n  defaultSelected,\n  onChange,\n\n  ...others\n}: HvVerticalNavigationTreeProps) => {\n  const [selected, setSelected] = useControlled(selectedProp, defaultSelected);\n  const [expanded, setExpanded] = useControlled(expandedProp, () => {\n    if (defaultExpanded === true) {\n      // all parent nodes will be expanded by default\n      return getAllParents(data).map((item) => item.id);\n    }\n\n    if (defaultExpanded === false) {\n      // all parent nodes will be collapsed by default\n      return [];\n    }\n\n    if (defaultExpanded == null) {\n      if (selected != null) {\n        // the path to the selected node will be expanded (default behaviour)\n        const path = pathToElement(data, selected);\n        return path.slice(0, -1);\n      }\n\n      // nothing is expanded\n      return [];\n    }\n\n    return defaultExpanded;\n  });\n\n  const {\n    isOpen,\n    useIcons,\n    slider,\n\n    parentItem,\n    setParentItem,\n    withParentData,\n    navigateToChildHandler,\n\n    setParentData,\n    setParentSelected,\n  } = useContext(VerticalNavigationContext);\n\n  const [navigationPopup, setNavigationPopup] = useState<{\n    // This value is needed to guarantee that the NavigationPopup is fully re-rendered with keeping any previous values\n    uniqueKey: string;\n    anchorEl: HTMLButtonElement | null;\n    fixedMode: boolean;\n    data: NavigationData[];\n  } | null>(null);\n\n  const handleChange = useCallback(\n    (event, selectedId, selectedItem) => {\n      if (useIcons && !isOpen && selectedItem.data) {\n        const currentEventTarget = event.currentTarget;\n        setNavigationPopup((prevState) => {\n          // We want to close the popup in case the clicked element is the same as the previous one\n          return prevState?.anchorEl === currentEventTarget\n            ? null\n            : {\n                uniqueKey: uniqueId(),\n                anchorEl: currentEventTarget,\n                fixedMode: true,\n                data: selectedItem.data,\n              };\n        });\n\n        // We need this stopPropagation or else the Popup will close due to the clickaway being triggered\n        event.stopPropagation();\n      } else {\n        setSelected(selectedId);\n        setExpanded((prevState) => {\n          if (!isOpen) {\n            return [...prevState, ...pathToElement(data, selectedId)];\n          }\n          return [...prevState];\n        });\n        setNavigationPopup(null);\n        if (onChange) {\n          onChange(event, selectedItem);\n        }\n      }\n    },\n    [onChange, setSelected, setExpanded, isOpen, useIcons, data]\n  );\n\n  const treeViewItemMouseEnterHandler = useCallback(\n    (event, item) => {\n      const isCollapsed = useIcons && !isOpen;\n\n      if (isCollapsed && item.data && !navigationPopup?.fixedMode) {\n        const currentEventTarget = event.currentTarget;\n\n        setNavigationPopup?.({\n          uniqueKey: uniqueId(),\n          anchorEl: currentEventTarget,\n          fixedMode: false,\n          data: item.data,\n        });\n      } else if (isCollapsed && !item.data && !navigationPopup?.fixedMode) {\n        setNavigationPopup(null);\n      }\n    },\n    [isOpen, useIcons, navigationPopup]\n  );\n\n  const handleToggle = useCallback(\n    (event, newExpanded) => {\n      setExpanded(newExpanded);\n\n      if (onToggle) {\n        onToggle(event, newExpanded);\n      }\n    },\n    [onToggle, setExpanded]\n  );\n\n  const children = useMemo(\n    () =>\n      data &&\n      createListHierarchy(\n        data,\n        id,\n        classes,\n        treeViewItemMouseEnterHandler,\n        navigationPopup?.fixedMode\n      ),\n    [classes, data, id, navigationPopup, treeViewItemMouseEnterHandler]\n  );\n\n  useEffect(() => {\n    if (!isOpen) {\n      setNavigationPopup?.(null);\n    }\n  }, [isOpen]);\n\n  useEffect(() => {\n    if (setParentSelected) setParentSelected(selected);\n  }, [selected, setSelected, setParentSelected]);\n\n  useEffect(() => {\n    if (setParentData) setParentData(data);\n  }, [data, setParentData]);\n\n  useEffect(() => {\n    if (\n      withParentData &&\n      selected &&\n      setParentItem &&\n      getParentItemById(withParentData, selected)\n    ) {\n      setParentItem(getParentItemById(withParentData, selected));\n    }\n  }, [withParentData, selected, setParentItem]);\n\n  // navigation slider\n  const navigateToTargetHandler = (event, selectedItem) => {\n    handleChange(event, selectedItem.id, selectedItem);\n  };\n\n  const handleNavigationPopupClose = () => {\n    setNavigationPopup(null);\n  };\n\n  const handleStyledNavMouseLeave = () => {\n    if (useIcons && !isOpen && !navigationPopup?.fixedMode) {\n      setNavigationPopup(null);\n    }\n  };\n\n  return (\n    <StyledNav\n      id={id}\n      className={clsx(\n        className,\n        verticalNavigationTreeClasses.root,\n        classes?.root,\n        !isOpen &&\n          !useIcons &&\n          clsx(verticalNavigationTreeClasses.collapsed, classes?.collapsed)\n      )}\n      onMouseLeave={handleStyledNavMouseLeave}\n      {...others}\n    >\n      {slider ? (\n        <HvVerticalNavigationSlider\n          data={parentItem.data || withParentData}\n          selected={selected}\n          onNavigateToTarget={navigateToTargetHandler}\n          onNavigateToChild={navigateToChildHandler}\n        />\n      ) : (\n        <HvVerticalNavigationTreeView\n          id={setId(id, \"tree\")}\n          className={clsx(verticalNavigationTreeClasses.list, classes?.list)}\n          selectable\n          mode={mode}\n          collapsible={collapsible}\n          selected={selected}\n          onChange={handleChange}\n          expanded={expanded}\n          onToggle={handleToggle}\n        >\n          {useIcons && !isOpen && navigationPopup && (\n            <HvVerticalNavigationPopup\n              id={setId(id, \"navigation-popup\")}\n              key={navigationPopup.uniqueKey}\n              anchorEl={navigationPopup.anchorEl}\n              selected={selected}\n              fixedMode={navigationPopup.fixedMode}\n              data={navigationPopup.data}\n              onClose={handleNavigationPopupClose}\n              onChange={handleChange}\n              className={clsx(\n                verticalNavigationTreeClasses.navigationPopup,\n                classes?.navigationPopup\n              )}\n            />\n          )}\n          {children}\n        </HvVerticalNavigationTreeView>\n      )}\n    </StyledNav>\n  );\n};\n\nexport interface HvVerticalNavigationTreeProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvVerticalNavigationTreeClasses;\n  /**\n   * Modus operandi (role) of the widget instance.\n   */\n  mode?: NavigationMode;\n  /**\n   * Can non-leaf nodes be collapsed / expanded.\n   */\n  collapsible?: boolean;\n  /**\n   * The ID of the selected page.\n   */\n  selected?: string;\n  /**\n   * When uncontrolled, defines the initial selected page ID.\n   */\n  defaultSelected?: string;\n  /**\n   * Callback fired when a navigation item is selected.\n   *\n   * @param {object} event The event source of the callback.\n   * @param {object} page The data of the selected page.\n   */\n  onChange?: (event, page) => void;\n  /**\n   * Expanded nodes' ids.\n   */\n  expanded?: string[];\n  /**\n   * When uncontrolled, defines the initial expanded nodes' ids.\n   *\n   * It also supports `true` for starting with all nodes expanded.\n   * With `false` all nodes will be collapsed.\n   *\n   * By default it expands the needed nodes to display the current selection, if any.\n   */\n  defaultExpanded?: string[] | boolean;\n  /**\n   * Callback fired when tree items are expanded/collapsed.\n   *\n   * @param {object} event The event source of the callback.\n   * @param {array} nodeIds The ids of the expanded nodes (old and new).\n   */\n  onToggle?: (event, nodeIds) => void;\n  /**\n   * An array containing the data for each menu item.\n   *\n   * id - the id to be applied to the root element.\n   * label - the label to be rendered on the menu item.\n   * data - sub-menu items\n   * href - the url used for navigation.\n   * target - the behavior when opening an url.\n   */\n  data?: NavigationData[];\n}\n\nexport type NavigationMode = \"treeview\" | \"navigation\" | \"slider\";\n"],"names":["createListHierarchy","items","id","classes","mouseEnterHandler","disableTooltip","map","item","itemId","label","itemLabel","icon","data","children","selectable","disabled","href","target","ItemText","wrapperTooltip","itemMouseEnterHandler","event","HvVerticalNavigationTreeViewItem","setId","className","listItem","nodeId","_jsx","payload","onMouseEnter","undefined","getAllParents","parents","filter","length","childParents","flatMap","pathToElement","targetId","path","i","push","subPaths","HvVerticalNavigationTree","mode","collapsible","expanded","expandedProp","defaultExpanded","onToggle","selected","selectedProp","defaultSelected","onChange","others","setSelected","useControlled","setExpanded","slice","isOpen","useIcons","slider","parentItem","setParentItem","withParentData","navigateToChildHandler","setParentData","setParentSelected","useContext","VerticalNavigationContext","navigationPopup","setNavigationPopup","useState","handleChange","useCallback","selectedId","selectedItem","currentEventTarget","currentTarget","prevState","anchorEl","uniqueKey","uniqueId","fixedMode","stopPropagation","treeViewItemMouseEnterHandler","isCollapsed","handleToggle","newExpanded","useMemo","useEffect","getParentItemById","navigateToTargetHandler","handleNavigationPopupClose","handleStyledNavMouseLeave","StyledNav","clsx","verticalNavigationTreeClasses","root","collapsed","onMouseLeave","HvVerticalNavigationSlider","onNavigateToTarget","onNavigateToChild","_jsxs","HvVerticalNavigationTreeView","list","HvVerticalNavigationPopup","onClose"],"mappings":"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"}

package/dist/esm/components/VerticalNavigation/TreeView/TreeViewItem.js

@@ -145,7 +145,7 @@ const HvVerticalNavigationTreeViewItem = forwardRef((props, ref) => {
           toggleExpansion(event, nodeId);
       }
     }
-  }, [disabled, expandable, focus, focused, isExpanded, multiSelect, nodeId, toggleExpansion, treeviewMode]);
+  }, [disabled, expandable, focus, focused, isExpanded, multiSelect, nodeId, toggleExpansion, treeviewMode, isOpen]);
   const handleSelection = useCallback((event) => {
     if (selectable && !disabled) {
       if (treeviewMode && !focused && focus) {
@@ -184,7 +184,7 @@ const HvVerticalNavigationTreeViewItem = forwardRef((props, ref) => {
     if (onClick) {
       onClick(event);
     }
-  }, [disabled, expandable, handleExpansion, handleSelection, onClick, selectable]);
+  }, [disabled, expandable, handleExpansion, handleSelection, onClick, selectable, isOpen]);
   const handleKeyDown = useCallback((event) => {
     let isEventHandled = false;
     const {
@@ -207,7 +207,7 @@ const HvVerticalNavigationTreeViewItem = forwardRef((props, ref) => {
         event.stopPropagation();
       }
     }
-  }, [expandable, handleExpansion, handleSelection, selectable]);
+  }, [expandable, handleExpansion, handleSelection, selectable, isOpen]);
   const renderedContent = useMemo(() => /* @__PURE__ */ jsxs(StyledContent, {
     id: setId(id, "button"),
     component: href ? "a" : "div",
@@ -245,13 +245,13 @@ const HvVerticalNavigationTreeViewItem = forwardRef((props, ref) => {
       $expandable: !!expandable,
       children: label
     }), isOpen && expandable && (expanded ? /* @__PURE__ */ jsx(DropUpXS, {}) : /* @__PURE__ */ jsx(DropDownXS, {}))]
-  }), [id, href, target, classes == null ? void 0 : classes.content, treeViewItemClasses.content, classes == null ? void 0 : classes.link, treeViewItemClasses.link, classes == null ? void 0 : classes.minimized, treeViewItemClasses.minimized, disabled, handleClick, handleMouseDown, expandable, icon, level, collapsible, treeviewMode, handleFocus, selectable, handleKeyDown, selected, expanded, label, disableTooltip]);
+  }), [id, href, target, classes == null ? void 0 : classes.content, classes == null ? void 0 : classes.link, classes == null ? void 0 : classes.minimized, disabled, handleClick, handleMouseDown, expandable, icon, level, collapsible, treeviewMode, handleFocus, selectable, handleKeyDown, selected, expanded, label, disableTooltip, payload == null ? void 0 : payload.label, children, isOpen, useIcons, isChildSelected, nodeId]);
   const renderedChildren = useMemo(() => children && /* @__PURE__ */ jsx(StyledGroup, {
     id: setId(id, "group"),
     className: clsx(treeViewItemClasses.group, classes == null ? void 0 : classes.group),
     role: treeviewMode ? "group" : void 0,
     children
-  }), [children, treeViewItemClasses.group, classes == null ? void 0 : classes.group, id, treeviewMode]);
+  }), [children, classes == null ? void 0 : classes.group, id, treeviewMode]);
   return /* @__PURE__ */ jsxs(StyledNode, {
     ref: handleRef,
     id: id ?? void 0,