@hitachivantara/uikit-react-core 5.7.4 → 5.8.0

package/dist/cjs/components/Typography/Typography.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Typography.cjs","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 { mapVariant } from \"./utils\";\nimport typographyClasses, { HvTypographyClasses } from \"./typographyClasses\";\nimport { clsx } from \"clsx\";\nimport { useTheme } from \"@core/hooks\";\n\nexport type HvTypographyVariants =\n  | \"display\"\n  | \"title1\"\n  | \"title2\"\n  | \"title3\"\n  | \"title4\"\n  | \"body\"\n  | \"label\"\n  | \"caption1\"\n  | \"caption2\";\n\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":"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"}
+{"version":3,"file":"Typography.cjs","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":"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"}

package/dist/cjs/components/VerticalNavigation/Actions/Action.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Action.cjs","sources":["../../../../../src/components/VerticalNavigation/Actions/Action.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { MouseEventHandler, useCallback, useContext } from \"react\";\nimport { isKeypress, keyboardCodes, setId } from \"@core/utils\";\nimport { VerticalNavigationContext } from \"../\";\nimport { StyledAction } from \"./Action.styles\";\nimport actionClasses, {\n  HvVerticalNavigationActionClasses,\n} from \"./actionClasses\";\n\nexport interface HvVerticalNavigationActionProps {\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?: HvVerticalNavigationActionClasses;\n  /**\n   * Id to be applied to the action.\n   */\n  id?: string;\n  /**\n   * Visual label.\n   */\n  label?: string;\n  /**\n   * Icon.\n   */\n  icon?: React.ReactNode;\n  /**\n   * Callback called when clicked.\n   */\n  onClick?: MouseEventHandler<HTMLElement>;\n}\n\nexport const HvVerticalNavigationAction = ({\n  className,\n  classes,\n  id,\n  label = \"\",\n  icon,\n  onClick,\n  ...others\n}: HvVerticalNavigationActionProps) => {\n  const { isOpen } = useContext(VerticalNavigationContext);\n\n  const handleKeyDown = useCallback(\n    (event) => {\n      if (\n        onClick == null ||\n        (!isKeypress(event, keyboardCodes.Enter) &&\n          !isKeypress(event, keyboardCodes.SpaceBar))\n      ) {\n        return;\n      }\n\n      onClick(event);\n    },\n    [onClick]\n  );\n\n  return (\n    <StyledAction\n      id={setId(id, \"button\")}\n      component=\"div\"\n      role=\"button\"\n      className={clsx(\n        className,\n        actionClasses.action,\n        classes?.action,\n        !icon && clsx(actionClasses.noIcon, classes?.noIcon),\n        !isOpen && clsx(actionClasses.minimized, classes?.action)\n      )}\n      tabIndex={0}\n      onKeyDown={handleKeyDown}\n      onClick={onClick}\n      {...others}\n    >\n      {icon}\n      {isOpen && label}\n    </StyledAction>\n  );\n};\n"],"names":["HvVerticalNavigationAction","className","classes","id","label","icon","onClick","others","isOpen","useContext","VerticalNavigationContext","handleKeyDown","useCallback","event","isKeypress","keyboardCodes","Enter","SpaceBar","StyledAction","setId","component","role","clsx","actionClasses","action","noIcon","minimized","tabIndex","onKeyDown","children"],"mappings":";;;;;;;;;;;AAoCO,MAAMA,6BAA6BA,CAAC;AAAA,EACzCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,QAAQ;AAAA,EACRC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AAC4B,MAAM;AAC/B,QAAA;AAAA,IAAEC;AAAAA,EAAAA,IAAWC,MAAAA,WAAWC,0BAAAA,yBAAyB;AAEjDC,QAAAA,gBAAgBC,kBACnBC,CAAU,UAAA;AACT,QACEP,WAAW,QACV,CAACQ,SAAAA,WAAWD,OAAOE,cAAAA,cAAcC,KAAK,KACrC,CAACF,SAAAA,WAAWD,OAAOE,cAAAA,cAAcE,QAAQ,GAC3C;AACA;AAAA,IACF;AAEAX,YAAQO,KAAK;AAAA,EAAA,GAEf,CAACP,OAAO,CAAC;AAGX,yCACGY,cAAAA,cAAY;AAAA,IACXf,IAAIgB,MAAAA,MAAMhB,IAAI,QAAQ;AAAA,IACtBiB,WAAU;AAAA,IACVC,MAAK;AAAA,IACLpB,WAAWqB,KAAAA,KACTrB,WACAsB,sBAAcC,QACdtB,mCAASsB,QACT,CAACnB,QAAQiB,UAAKC,cAAAA,QAAcE,QAAQvB,mCAASuB,MAAM,GACnD,CAACjB,UAAUc,UAAKC,cAAAA,QAAcG,WAAWxB,mCAASsB,MAAM,CAAC;AAAA,IAE3DG,UAAU;AAAA,IACVC,WAAWjB;AAAAA,IACXL;AAAAA,IAAiB,GACbC;AAAAA,IAAMsB,UAETxB,CAAAA,MACAG,UAAUJ,KAAK;AAAA,EAAA,CACH;AAEnB;;"}
+{"version":3,"file":"Action.cjs","sources":["../../../../../src/components/VerticalNavigation/Actions/Action.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { MouseEventHandler, useCallback, useContext } from \"react\";\nimport { isKeypress, keyboardCodes, setId } from \"@core/utils\";\nimport { VerticalNavigationContext } from \"..\";\nimport { StyledAction } from \"./Action.styles\";\nimport actionClasses, {\n  HvVerticalNavigationActionClasses,\n} from \"./actionClasses\";\n\nexport interface HvVerticalNavigationActionProps {\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?: HvVerticalNavigationActionClasses;\n  /**\n   * Id to be applied to the action.\n   */\n  id?: string;\n  /**\n   * Visual label.\n   */\n  label?: string;\n  /**\n   * Icon.\n   */\n  icon?: React.ReactNode;\n  /**\n   * Callback called when clicked.\n   */\n  onClick?: MouseEventHandler<HTMLElement>;\n}\n\nexport const HvVerticalNavigationAction = ({\n  className,\n  classes,\n  id,\n  label = \"\",\n  icon,\n  onClick,\n  ...others\n}: HvVerticalNavigationActionProps) => {\n  const { isOpen } = useContext(VerticalNavigationContext);\n\n  const handleKeyDown = useCallback(\n    (event) => {\n      if (\n        onClick == null ||\n        (!isKeypress(event, keyboardCodes.Enter) &&\n          !isKeypress(event, keyboardCodes.SpaceBar))\n      ) {\n        return;\n      }\n\n      onClick(event);\n    },\n    [onClick]\n  );\n\n  return (\n    <StyledAction\n      id={setId(id, \"button\")}\n      component=\"div\"\n      role=\"button\"\n      className={clsx(\n        className,\n        actionClasses.action,\n        classes?.action,\n        !icon && clsx(actionClasses.noIcon, classes?.noIcon),\n        !isOpen && clsx(actionClasses.minimized, classes?.action)\n      )}\n      tabIndex={0}\n      onKeyDown={handleKeyDown}\n      onClick={onClick}\n      {...others}\n    >\n      {icon}\n      {isOpen && label}\n    </StyledAction>\n  );\n};\n"],"names":["HvVerticalNavigationAction","className","classes","id","label","icon","onClick","others","isOpen","useContext","VerticalNavigationContext","handleKeyDown","useCallback","event","isKeypress","keyboardCodes","Enter","SpaceBar","StyledAction","setId","component","role","clsx","actionClasses","action","noIcon","minimized","tabIndex","onKeyDown","children"],"mappings":";;;;;;;;;;;AAoCO,MAAMA,6BAA6BA,CAAC;AAAA,EACzCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,QAAQ;AAAA,EACRC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AAC4B,MAAM;AAC/B,QAAA;AAAA,IAAEC;AAAAA,EAAAA,IAAWC,MAAAA,WAAWC,0BAAAA,yBAAyB;AAEjDC,QAAAA,gBAAgBC,kBACnBC,CAAU,UAAA;AACT,QACEP,WAAW,QACV,CAACQ,SAAAA,WAAWD,OAAOE,cAAAA,cAAcC,KAAK,KACrC,CAACF,SAAAA,WAAWD,OAAOE,cAAAA,cAAcE,QAAQ,GAC3C;AACA;AAAA,IACF;AAEAX,YAAQO,KAAK;AAAA,EAAA,GAEf,CAACP,OAAO,CAAC;AAGX,yCACGY,cAAAA,cAAY;AAAA,IACXf,IAAIgB,MAAAA,MAAMhB,IAAI,QAAQ;AAAA,IACtBiB,WAAU;AAAA,IACVC,MAAK;AAAA,IACLpB,WAAWqB,KAAAA,KACTrB,WACAsB,sBAAcC,QACdtB,mCAASsB,QACT,CAACnB,QAAQiB,UAAKC,cAAAA,QAAcE,QAAQvB,mCAASuB,MAAM,GACnD,CAACjB,UAAUc,UAAKC,cAAAA,QAAcG,WAAWxB,mCAASsB,MAAM,CAAC;AAAA,IAE3DG,UAAU;AAAA,IACVC,WAAWjB;AAAAA,IACXL;AAAAA,IAAiB,GACbC;AAAAA,IAAMsB,UAETxB,CAAAA,MACAG,UAAUJ,KAAK;AAAA,EAAA,CACH;AAEnB;;"}

package/dist/cjs/components/VerticalNavigation/Actions/Actions.cjs

@@ -19,7 +19,7 @@ const HvVerticalNavigationActions = ({
   } = React.useContext(VerticalNavigationContext.VerticalNavigationContext);
   return /* @__PURE__ */ jsxRuntime.jsx(Actions_styles.StyledRoot, {
     id,
-    className: clsx.clsx(className, actionsClasses.default.root, classes == null ? void 0 : classes.root, !isOpen && collapsedMode == "simple" && clsx.clsx(actionsClasses.default.hide, classes == null ? void 0 : classes.hide)),
+    className: clsx.clsx(className, actionsClasses.default.root, classes == null ? void 0 : classes.root, !isOpen && collapsedMode === "simple" && clsx.clsx(actionsClasses.default.hide, classes == null ? void 0 : classes.hide)),
     ...others,
     children
   });

package/dist/cjs/components/VerticalNavigation/Actions/Actions.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Actions.cjs","sources":["../../../../../src/components/VerticalNavigation/Actions/Actions.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useContext } from \"react\";\nimport { VerticalNavigationContext } from \"../\";\nimport { StyledRoot } from \"./Actions.styles\";\nimport actionsClasses, {\n  HvVerticalNavigationActionsClasses,\n} from \"./actionsClasses\";\n\nexport interface HvVerticalNavigationActionsProps {\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?: HvVerticalNavigationActionsClasses;\n  /**\n   * Id to be applied to the actions container.\n   */\n  id?: string;\n  /**\n   * Node to be rendered\n   */\n  children?: React.ReactNode;\n}\n\nexport const HvVerticalNavigationActions = ({\n  className,\n  classes,\n  id,\n  children,\n  ...others\n}: HvVerticalNavigationActionsProps) => {\n  const { isOpen, collapsedMode } = useContext(VerticalNavigationContext);\n\n  return (\n    <StyledRoot\n      id={id}\n      className={clsx(\n        className,\n        actionsClasses.root,\n        classes?.root,\n        !isOpen &&\n          collapsedMode == \"simple\" &&\n          clsx(actionsClasses.hide, classes?.hide)\n      )}\n      {...others}\n    >\n      {children}\n    </StyledRoot>\n  );\n};\n"],"names":["HvVerticalNavigationActions","className","classes","id","children","others","isOpen","collapsedMode","useContext","VerticalNavigationContext","StyledRoot","clsx","actionsClasses","root","hide"],"mappings":";;;;;;;;AA2BO,MAAMA,8BAA8BA,CAAC;AAAA,EAC1CC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AAC6B,MAAM;AAChC,QAAA;AAAA,IAAEC;AAAAA,IAAQC;AAAAA,EAAAA,IAAkBC,MAAAA,WAAWC,0BAAAA,yBAAyB;AAEtE,wCACGC,eAAAA,YAAU;AAAA,IACTP;AAAAA,IACAF,WAAWU,KACTV,KAAAA,WACAW,eAAeC,QAAAA,MACfX,mCAASW,MACT,CAACP,UACCC,iBAAiB,YACjBI,UAAKC,eAAAA,QAAeE,MAAMZ,mCAASY,IAAI,CAAC;AAAA,IAC1C,GACET;AAAAA,IAAMD;AAAAA,EAAAA,CAGC;AAEjB;;"}
+{"version":3,"file":"Actions.cjs","sources":["../../../../../src/components/VerticalNavigation/Actions/Actions.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useContext } from \"react\";\nimport { VerticalNavigationContext } from \"..\";\nimport { StyledRoot } from \"./Actions.styles\";\nimport actionsClasses, {\n  HvVerticalNavigationActionsClasses,\n} from \"./actionsClasses\";\n\nexport interface HvVerticalNavigationActionsProps {\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?: HvVerticalNavigationActionsClasses;\n  /**\n   * Id to be applied to the actions container.\n   */\n  id?: string;\n  /**\n   * Node to be rendered\n   */\n  children?: React.ReactNode;\n}\n\nexport const HvVerticalNavigationActions = ({\n  className,\n  classes,\n  id,\n  children,\n  ...others\n}: HvVerticalNavigationActionsProps) => {\n  const { isOpen, collapsedMode } = useContext(VerticalNavigationContext);\n\n  return (\n    <StyledRoot\n      id={id}\n      className={clsx(\n        className,\n        actionsClasses.root,\n        classes?.root,\n        !isOpen &&\n          collapsedMode === \"simple\" &&\n          clsx(actionsClasses.hide, classes?.hide)\n      )}\n      {...others}\n    >\n      {children}\n    </StyledRoot>\n  );\n};\n"],"names":["HvVerticalNavigationActions","className","classes","id","children","others","isOpen","collapsedMode","useContext","VerticalNavigationContext","StyledRoot","clsx","actionsClasses","root","hide"],"mappings":";;;;;;;;AA2BO,MAAMA,8BAA8BA,CAAC;AAAA,EAC1CC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AAC6B,MAAM;AAChC,QAAA;AAAA,IAAEC;AAAAA,IAAQC;AAAAA,EAAAA,IAAkBC,MAAAA,WAAWC,0BAAAA,yBAAyB;AAEtE,wCACGC,eAAAA,YAAU;AAAA,IACTP;AAAAA,IACAF,WAAWU,KACTV,KAAAA,WACAW,eAAeC,QAAAA,MACfX,mCAASW,MACT,CAACP,UACCC,kBAAkB,YAClBI,UAAKC,eAAAA,QAAeE,MAAMZ,mCAASY,IAAI,CAAC;AAAA,IAC1C,GACET;AAAAA,IAAMD;AAAAA,EAAAA,CAGC;AAEjB;;"}

package/dist/cjs/components/VerticalNavigation/Header/Header.cjs

@@ -25,14 +25,16 @@ const HvVerticalNavigationHeader = ({
     collapsedMode,
     headerTitle,
     slider,
-    navigateToParentHandler
+    navigateToParentHandler,
+    parentItem
   } = React.useContext(VerticalNavigationContext.VerticalNavigationContext);
   openIcon = collapsedMode === "simple" ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Menu, {}) : openIcon;
   const backButtonClickHandler = () => {
     if (navigateToParentHandler)
       navigateToParentHandler();
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(Header_styles.StyledHeader, {
+  const shouldShowTitle = React.useMemo(() => !slider || slider && !Array.isArray(parentItem), [parentItem]);
+  return shouldShowTitle ? /* @__PURE__ */ jsxRuntime.jsxs(Header_styles.StyledHeader, {
     className: clsx.clsx(className, headerClasses.default.root, classes == null ? void 0 : classes.root, !isOpen && clsx.clsx(headerClasses.default.minimized, classes == null ? void 0 : classes.minimized)),
     ...others,
     children: [isOpen && headerTitle && slider && /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, {
@@ -56,7 +58,7 @@ const HvVerticalNavigationHeader = ({
       ...collapseButtonProps,
       children: isOpen ? closeIcon : openIcon
     })]
-  });
+  }) : null;
 };
 exports.HvVerticalNavigationHeader = HvVerticalNavigationHeader;
 //# sourceMappingURL=Header.cjs.map

package/dist/cjs/components/VerticalNavigation/Header/Header.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Header.cjs","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 } 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    collapsedMode,\n    headerTitle,\n    slider,\n    navigateToParentHandler,\n  } = useContext(VerticalNavigationContext);\n\n  openIcon = collapsedMode === \"simple\" ? <Menu /> : openIcon;\n\n  const backButtonClickHandler = () => {\n    if (navigateToParentHandler) navigateToParentHandler();\n  };\n\n  return (\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  );\n};\n"],"names":["HvVerticalNavigationHeader","title","openIcon","_jsx","Forwards","closeIcon","Backwards","collapseButtonProps","backButtonProps","className","classes","onCollapseButtonClick","others","isOpen","collapsedMode","headerTitle","slider","navigateToParentHandler","useContext","VerticalNavigationContext","Menu","backButtonClickHandler","StyledHeader","clsx","verticalNavigationHeaderClasses","root","minimized","children","HvButton","icon","variant","onClick","iconSize","HvTypography","StyledCollapseButton"],"mappings":";;;;;;;;;;;AAiDO,MAAMA,6BAA6BA,CAAC;AAAA,EACzCC;AAAAA,EACAC,WAAWC,2BAAAA,IAACC,gBAAW,UAAA,EAAA;AAAA,EACvBC,YAAYF,2BAAAA,IAACG,gBAAY,WAAA,EAAA;AAAA,EACzBC;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,EAAAA,IACEC,MAAAA,WAAWC,0BAAAA,yBAAyB;AAExCjB,aAAWY,kBAAkB,WAAWX,2BAAAA,IAACiB,gBAAAA,MAAO,CAAA,CAAA,IAAGlB;AAEnD,QAAMmB,yBAAyBA,MAAM;AAC/BJ,QAAAA;AAAkD;EAAA;AAGxD,yCACGK,cAAAA,cAAY;AAAA,IACXb,WAAWc,KAAAA,KACTd,WACAe,cAAAA,QAAgCC,MAChCf,mCAASe,MACT,CAACZ,UACCU,KAAKC,KAAAA,cAAAA,QAAgCE,WAAWhB,mCAASgB,SAAS,CAAC;AAAA,IACrE,GACEd;AAAAA,IAAMe,UAAA,CAETd,UAAUE,eAAeC,yCACvBY,OAAAA,UAAQ;AAAA,MACPC,MAAI;AAAA,MACJC,SAAQ;AAAA,MACRC,SAASV;AAAAA,MAAuB,GAC5Bb;AAAAA,MAAemB,yCAElBrB,2BAAS;AAAA,QAAC0B,UAAS;AAAA,MAAA,CAAI;AAAA,IAAA,CAAG,GAG9BnB,UACCV,2BAAAA,IAAC8B,yBAAY;AAAA,MAACH,SAASd,SAAS,UAAU;AAAA,MAASW,UAChDZ,eAAeC,SAASD,cAAcd;AAAAA,IAAAA,CAAK,GAG/CU,yBACCR,2BAAAA,IAAC+B,oCAAoB;AAAA,MACnBL,MAAI;AAAA,MACJC,SAAQ;AAAA,MACRC,SAASpB;AAAAA,MACTD,SAAS;AAAA,QACPe,MAAMZ,SAAS,KAAKW,cAAAA,QAAgCE;AAAAA,MACtD;AAAA,MAAE,GACEnB;AAAAA,MAAmBoB,UAEtBd,SAASR,YAAYH;AAAAA,IAAAA,CAEzB,CAAA;AAAA,EAAA,CACY;AAEnB;;"}
+{"version":3,"file":"Header.cjs","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    collapsedMode,\n    headerTitle,\n    slider,\n    navigateToParentHandler,\n    parentItem,\n  } = useContext(VerticalNavigationContext);\n\n  openIcon = collapsedMode === \"simple\" ? <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","collapsedMode","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,2BAAAA,IAACC,gBAAW,UAAA,EAAA;AAAA,EACvBC,YAAYF,2BAAAA,IAACG,gBAAY,WAAA,EAAA;AAAA,EACzBC;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,MAAAA,WAAWC,0BAAAA,yBAAyB;AAExClB,aAAWY,kBAAkB,WAAWX,2BAAAA,IAACkB,gBAAAA,MAAO,CAAA,CAAA,IAAGnB;AAEnD,QAAMoB,yBAAyBA,MAAM;AAC/BL,QAAAA;AAAkD;EAAA;AAKxD,QAAMM,kBAAkBC,MAAAA,QACtB,MAAM,CAACR,UAAWA,UAAU,CAACS,MAAMC,QAAQR,UAAU,GACrD,CAACA,UAAU,CAAC;AAGPK,SAAAA,kDACJI,4BAAY;AAAA,IACXlB,WAAWmB,KAAAA,KACTnB,WACAoB,cAAAA,QAAgCC,MAChCpB,mCAASoB,MACT,CAACjB,UACCe,KAAKC,KAAAA,cAAAA,QAAgCE,WAAWrB,mCAASqB,SAAS,CAAC;AAAA,IACrE,GACEnB;AAAAA,IAAMoB,UAAA,CAETnB,UAAUE,eAAeC,yCACvBiB,OAAAA,UAAQ;AAAA,MACPC,MAAI;AAAA,MACJC,SAAQ;AAAA,MACRC,SAASd;AAAAA,MAAuB,GAC5Bd;AAAAA,MAAewB,yCAElB1B,2BAAS;AAAA,QAAC+B,UAAS;AAAA,MAAA,CAAI;AAAA,IAAA,CAAG,GAG9BxB,UACCV,2BAAAA,IAACmC,yBAAY;AAAA,MAACH,SAASnB,SAAS,UAAU;AAAA,MAASgB,UAChDjB,eAAeC,SAASD,cAAcd;AAAAA,IAAAA,CAAK,GAG/CU,yBACCR,2BAAAA,IAACoC,oCAAoB;AAAA,MACnBL,MAAI;AAAA,MACJC,SAAQ;AAAA,MACRC,SAASzB;AAAAA,MACTD,SAAS;AAAA,QACPoB,MAAMjB,SAAS,KAAKgB,cAAAA,QAAgCE;AAAAA,MACtD;AAAA,MAAE,GACExB;AAAAA,MAAmByB,UAEtBnB,SAASR,YAAYH;AAAAA,IAAAA,CAEzB,CAAA;AAAA,EAAA,CAAA,IAED;AACN;;"}

package/dist/cjs/components/VerticalNavigation/Header/Header.styles.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const _styled = require("@emotion/styled/base");
-const headerClasses = require("./headerClasses.cjs");
 const React = require("react");
+const headerClasses = require("./headerClasses.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const Button = require("../../Button/Button.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
@@ -21,7 +21,7 @@ const StyledHeader = /* @__PURE__ */ _styled__default.default("div", process.env
     justifyContent: "center",
     paddingRight: 0
   }
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL0hlYWRlci9IZWFkZXIuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLNEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9WZXJ0aWNhbE5hdmlnYXRpb24vSGVhZGVyL0hlYWRlci5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBIdkJ1dHRvbiwgSHZCdXR0b25Qcm9wcyB9IGZyb20gXCJAY29yZS9jb21wb25lbnRzXCI7XG5pbXBvcnQgdmVydGljYWxOYXZpZ2F0aW9uSGVhZGVyQ2xhc3NlcyBmcm9tIFwiLi9oZWFkZXJDbGFzc2VzXCI7XG5pbXBvcnQgeyBmb3J3YXJkUmVmLCBSZWYgfSBmcm9tIFwicmVhY3RcIjtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEhlYWRlciA9IHN0eWxlZChcImRpdlwiKSh7XG4gIHdpZHRoOiBcIjEwMCVcIixcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIG1hcmdpblRvcDogXCIxMnB4XCIsXG4gIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsXG5cbiAgW2AmLiR7dmVydGljYWxOYXZpZ2F0aW9uSGVhZGVyQ2xhc3Nlcy5taW5pbWl6ZWR9YF06IHtcbiAgICBqdXN0aWZ5Q29udGVudDogXCJjZW50ZXJcIixcbiAgICBwYWRkaW5nUmlnaHQ6IDAsXG4gIH0sXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENvbGxhcHNlQnV0dG9uID0gc3R5bGVkKFxuICBmb3J3YXJkUmVmKChwcm9wczogSHZCdXR0b25Qcm9wcywgcmVmPzogUmVmPEhUTUxCdXR0b25FbGVtZW50PikgPT4ge1xuICAgIHJldHVybiA8SHZCdXR0b24gey4uLnByb3BzfSByZWY9e3JlZn0gLz47XG4gIH0pXG4pKHtcbiAgbWFyZ2luTGVmdDogXCJhdXRvXCIsXG5cbiAgW2AmLiR7dmVydGljYWxOYXZpZ2F0aW9uSGVhZGVyQ2xhc3Nlcy5taW5pbWl6ZWR9YF06IHtcbiAgICBtYXJnaW5MZWZ0OiAwLFxuICB9LFxufSk7XG4iXX0= */");
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL0hlYWRlci9IZWFkZXIuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLNEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9WZXJ0aWNhbE5hdmlnYXRpb24vSGVhZGVyL0hlYWRlci5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBIdkJ1dHRvbiwgSHZCdXR0b25Qcm9wcyB9IGZyb20gXCJAY29yZS9jb21wb25lbnRzXCI7XG5pbXBvcnQgeyBmb3J3YXJkUmVmLCBSZWYgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB2ZXJ0aWNhbE5hdmlnYXRpb25IZWFkZXJDbGFzc2VzIGZyb20gXCIuL2hlYWRlckNsYXNzZXNcIjtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEhlYWRlciA9IHN0eWxlZChcImRpdlwiKSh7XG4gIHdpZHRoOiBcIjEwMCVcIixcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIG1hcmdpblRvcDogXCIxMnB4XCIsXG4gIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsXG5cbiAgW2AmLiR7dmVydGljYWxOYXZpZ2F0aW9uSGVhZGVyQ2xhc3Nlcy5taW5pbWl6ZWR9YF06IHtcbiAgICBqdXN0aWZ5Q29udGVudDogXCJjZW50ZXJcIixcbiAgICBwYWRkaW5nUmlnaHQ6IDAsXG4gIH0sXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENvbGxhcHNlQnV0dG9uID0gc3R5bGVkKFxuICBmb3J3YXJkUmVmKChwcm9wczogSHZCdXR0b25Qcm9wcywgcmVmPzogUmVmPEhUTUxCdXR0b25FbGVtZW50PikgPT4ge1xuICAgIHJldHVybiA8SHZCdXR0b24gey4uLnByb3BzfSByZWY9e3JlZn0gLz47XG4gIH0pXG4pKHtcbiAgbWFyZ2luTGVmdDogXCJhdXRvXCIsXG5cbiAgW2AmLiR7dmVydGljYWxOYXZpZ2F0aW9uSGVhZGVyQ2xhc3Nlcy5taW5pbWl6ZWR9YF06IHtcbiAgICBtYXJnaW5MZWZ0OiAwLFxuICB9LFxufSk7XG4iXX0= */");
 const StyledCollapseButton = /* @__PURE__ */ _styled__default.default(React.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, {
     ...props,
@@ -37,7 +37,7 @@ const StyledCollapseButton = /* @__PURE__ */ _styled__default.default(React.forw
   [`&.${headerClasses.default.minimized}`]: {
     marginLeft: 0
   }
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL0hlYWRlci9IZWFkZXIuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQm9DIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL0hlYWRlci9IZWFkZXIuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgSHZCdXR0b24sIEh2QnV0dG9uUHJvcHMgfSBmcm9tIFwiQGNvcmUvY29tcG9uZW50c1wiO1xuaW1wb3J0IHZlcnRpY2FsTmF2aWdhdGlvbkhlYWRlckNsYXNzZXMgZnJvbSBcIi4vaGVhZGVyQ2xhc3Nlc1wiO1xuaW1wb3J0IHsgZm9yd2FyZFJlZiwgUmVmIH0gZnJvbSBcInJlYWN0XCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRIZWFkZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICB3aWR0aDogXCIxMDAlXCIsXG4gIGRpc3BsYXk6IFwiZmxleFwiLFxuICBtYXJnaW5Ub3A6IFwiMTJweFwiLFxuICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuXG4gIFtgJi4ke3ZlcnRpY2FsTmF2aWdhdGlvbkhlYWRlckNsYXNzZXMubWluaW1pemVkfWBdOiB7XG4gICAganVzdGlmeUNvbnRlbnQ6IFwiY2VudGVyXCIsXG4gICAgcGFkZGluZ1JpZ2h0OiAwLFxuICB9LFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRDb2xsYXBzZUJ1dHRvbiA9IHN0eWxlZChcbiAgZm9yd2FyZFJlZigocHJvcHM6IEh2QnV0dG9uUHJvcHMsIHJlZj86IFJlZjxIVE1MQnV0dG9uRWxlbWVudD4pID0+IHtcbiAgICByZXR1cm4gPEh2QnV0dG9uIHsuLi5wcm9wc30gcmVmPXtyZWZ9IC8+O1xuICB9KVxuKSh7XG4gIG1hcmdpbkxlZnQ6IFwiYXV0b1wiLFxuXG4gIFtgJi4ke3ZlcnRpY2FsTmF2aWdhdGlvbkhlYWRlckNsYXNzZXMubWluaW1pemVkfWBdOiB7XG4gICAgbWFyZ2luTGVmdDogMCxcbiAgfSxcbn0pO1xuIl19 */");
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL0hlYWRlci9IZWFkZXIuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQm9DIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL0hlYWRlci9IZWFkZXIuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgSHZCdXR0b24sIEh2QnV0dG9uUHJvcHMgfSBmcm9tIFwiQGNvcmUvY29tcG9uZW50c1wiO1xuaW1wb3J0IHsgZm9yd2FyZFJlZiwgUmVmIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgdmVydGljYWxOYXZpZ2F0aW9uSGVhZGVyQ2xhc3NlcyBmcm9tIFwiLi9oZWFkZXJDbGFzc2VzXCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRIZWFkZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICB3aWR0aDogXCIxMDAlXCIsXG4gIGRpc3BsYXk6IFwiZmxleFwiLFxuICBtYXJnaW5Ub3A6IFwiMTJweFwiLFxuICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuXG4gIFtgJi4ke3ZlcnRpY2FsTmF2aWdhdGlvbkhlYWRlckNsYXNzZXMubWluaW1pemVkfWBdOiB7XG4gICAganVzdGlmeUNvbnRlbnQ6IFwiY2VudGVyXCIsXG4gICAgcGFkZGluZ1JpZ2h0OiAwLFxuICB9LFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRDb2xsYXBzZUJ1dHRvbiA9IHN0eWxlZChcbiAgZm9yd2FyZFJlZigocHJvcHM6IEh2QnV0dG9uUHJvcHMsIHJlZj86IFJlZjxIVE1MQnV0dG9uRWxlbWVudD4pID0+IHtcbiAgICByZXR1cm4gPEh2QnV0dG9uIHsuLi5wcm9wc30gcmVmPXtyZWZ9IC8+O1xuICB9KVxuKSh7XG4gIG1hcmdpbkxlZnQ6IFwiYXV0b1wiLFxuXG4gIFtgJi4ke3ZlcnRpY2FsTmF2aWdhdGlvbkhlYWRlckNsYXNzZXMubWluaW1pemVkfWBdOiB7XG4gICAgbWFyZ2luTGVmdDogMCxcbiAgfSxcbn0pO1xuIl19 */");
 exports.StyledCollapseButton = StyledCollapseButton;
 exports.StyledHeader = StyledHeader;
 //# sourceMappingURL=Header.styles.cjs.map

package/dist/cjs/components/VerticalNavigation/Header/Header.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Header.styles.cjs","sources":["../../../../../src/components/VerticalNavigation/Header/Header.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { HvButton, HvButtonProps } from \"@core/components\";\nimport verticalNavigationHeaderClasses from \"./headerClasses\";\nimport { forwardRef, Ref } from \"react\";\n\nexport const StyledHeader = styled(\"div\")({\n  width: \"100%\",\n  display: \"flex\",\n  marginTop: \"12px\",\n  alignItems: \"center\",\n\n  [`&.${verticalNavigationHeaderClasses.minimized}`]: {\n    justifyContent: \"center\",\n    paddingRight: 0,\n  },\n});\n\nexport const StyledCollapseButton = styled(\n  forwardRef((props: HvButtonProps, ref?: Ref<HTMLButtonElement>) => {\n    return <HvButton {...props} ref={ref} />;\n  })\n)({\n  marginLeft: \"auto\",\n\n  [`&.${verticalNavigationHeaderClasses.minimized}`]: {\n    marginLeft: 0,\n  },\n});\n"],"names":["StyledHeader","_styled","process","env","NODE_ENV","target","label","width","display","marginTop","alignItems","verticalNavigationHeaderClasses","minimized","justifyContent","paddingRight","StyledCollapseButton","forwardRef","props","ref","HvButton","marginLeft"],"mappings":";;;;;;;;;AAKO,MAAMA,eAAsBC,iCAAA,QAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACxCC,OAAO;AAAA,EACPC,SAAS;AAAA,EACTC,WAAW;AAAA,EACXC,YAAY;AAAA,EAEZ,CAAE,KAAIC,sBAAgCC,WAAW,GAAG;AAAA,IAClDC,gBAAgB;AAAA,IAChBC,cAAc;AAAA,EAChB;AACF,GAACZ,QAAAC,IAAAC,aAAC,eAAA,KAAA,qgDAAA;AAEK,MAAMW,uBAAuBd,iCAAAA,QAClCe,MAAAA,WAAW,CAACC,OAAsBC,QAAiC;AACjE,wCAAQC,OAAAA,UAAQ;AAAA,IAAA,GAAKF;AAAAA,IAAOC;AAAAA,EAAAA,CAAY;AAC1C,CAAC,GAAChB,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EACF;AAAA,EACAc,YAAY;AAAA,EAEZ,CAAE,KAAIT,sBAAgCC,WAAW,GAAG;AAAA,IAClDQ,YAAY;AAAA,EACd;AACF,GAAClB,QAAAC,IAAAC,aAAC,eAAA,KAAA,qgDAAA;;;"}
+{"version":3,"file":"Header.styles.cjs","sources":["../../../../../src/components/VerticalNavigation/Header/Header.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { HvButton, HvButtonProps } from \"@core/components\";\nimport { forwardRef, Ref } from \"react\";\nimport verticalNavigationHeaderClasses from \"./headerClasses\";\n\nexport const StyledHeader = styled(\"div\")({\n  width: \"100%\",\n  display: \"flex\",\n  marginTop: \"12px\",\n  alignItems: \"center\",\n\n  [`&.${verticalNavigationHeaderClasses.minimized}`]: {\n    justifyContent: \"center\",\n    paddingRight: 0,\n  },\n});\n\nexport const StyledCollapseButton = styled(\n  forwardRef((props: HvButtonProps, ref?: Ref<HTMLButtonElement>) => {\n    return <HvButton {...props} ref={ref} />;\n  })\n)({\n  marginLeft: \"auto\",\n\n  [`&.${verticalNavigationHeaderClasses.minimized}`]: {\n    marginLeft: 0,\n  },\n});\n"],"names":["StyledHeader","_styled","process","env","NODE_ENV","target","label","width","display","marginTop","alignItems","verticalNavigationHeaderClasses","minimized","justifyContent","paddingRight","StyledCollapseButton","forwardRef","props","ref","HvButton","marginLeft"],"mappings":";;;;;;;;;AAKO,MAAMA,eAAsBC,iCAAA,QAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACxCC,OAAO;AAAA,EACPC,SAAS;AAAA,EACTC,WAAW;AAAA,EACXC,YAAY;AAAA,EAEZ,CAAE,KAAIC,sBAAgCC,WAAW,GAAG;AAAA,IAClDC,gBAAgB;AAAA,IAChBC,cAAc;AAAA,EAChB;AACF,GAACZ,QAAAC,IAAAC,aAAC,eAAA,KAAA,qgDAAA;AAEK,MAAMW,uBAAuBd,iCAAAA,QAClCe,MAAAA,WAAW,CAACC,OAAsBC,QAAiC;AACjE,wCAAQC,OAAAA,UAAQ;AAAA,IAAA,GAAKF;AAAAA,IAAOC;AAAAA,EAAAA,CAAY;AAC1C,CAAC,GAAChB,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EACF;AAAA,EACAc,YAAY;AAAA,EAEZ,CAAE,KAAIT,sBAAgCC,WAAW,GAAG;AAAA,IAClDQ,YAAY;AAAA,EACd;AACF,GAAClB,QAAAC,IAAAC,aAAC,eAAA,KAAA,qgDAAA;;;"}

package/dist/cjs/components/VerticalNavigation/Navigation/Navigation.cjs

@@ -187,7 +187,7 @@ const HvVerticalNavigationTree = ({
   };
   return /* @__PURE__ */ jsxRuntime.jsx(Navigation_styles.StyledNav, {
     id,
-    className: clsx.clsx(className, navigationClasses.default.root, classes == null ? void 0 : classes.root, !isOpen && collapsedMode == "simple" && clsx.clsx(navigationClasses.default.collapsed, classes == null ? void 0 : classes.collapsed)),
+    className: clsx.clsx(className, navigationClasses.default.root, classes == null ? void 0 : classes.root, !isOpen && collapsedMode === "simple" && clsx.clsx(navigationClasses.default.collapsed, classes == null ? void 0 : classes.collapsed)),
     onMouseLeave: handleStyledNavMouseLeave,
     ...others,
     children: slider ? /* @__PURE__ */ jsxRuntime.jsx(NavigationSlider.HvVerticalNavigationSlider, {
@@ -212,7 +212,8 @@ const HvVerticalNavigationTree = ({
         fixedMode: navigationPopup.fixedMode,
         data: navigationPopup.data,
         onClose: handleNavigationPopupClose,
-        onChange: handleChange
+        onChange: handleChange,
+        className: clsx.clsx(navigationClasses.default.navigationPopup, classes == null ? void 0 : classes.navigationPopup)
       }, navigationPopup.uniqueKey), children]
     })
   });

package/dist/cjs/components/VerticalNavigation/Navigation/Navigation.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Navigation.cjs","sources":["../../../../../src/components/VerticalNavigation/Navigation/Navigation.tsx"],"sourcesContent":["import { useCallback, useMemo, useContext, useEffect, useState } 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\";\n\nexport interface NavigationData {\n  /**\n   * the id to be applied to the root element.\n   */\n  id: string;\n  /**\n   * the label to be rendered on the menu item.\n   */\n  label: string;\n  /**\n   * The url for the link.\n   */\n  href?: string;\n  /**\n   * The behavior when opening a link.\n   */\n  target?: string;\n  /**\n   * Icon to be render.\n   */\n  icon?: React.ReactNode;\n  /**\n   * Data subset.\n   */\n  data?: NavigationData[];\n  /**\n   * if `true` the item is disabled and is not interactive.\n   */\n  disabled?: boolean;\n  /**\n   * if `true` the item doesn't have a selected state.\n   */\n  selectable?: boolean;\n  /**\n   * Any other properties.\n   */\n  [otherProperty: string]: any;\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    collapsedMode,\n    slider,\n\n    parentItem,\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 (collapsedMode === \"icon\" && !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 isCollapsedMode = collapsedMode === \"icon\" && !isOpen;\n\n    if (isCollapsedMode && 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 (isCollapsedMode && !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  //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 (collapsedMode === \"icon\" && !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          collapsedMode == \"simple\" &&\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          {collapsedMode === \"icon\" && !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            />\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","collapsedMode","slider","parentItem","withParentData","navigateToChildHandler","setParentData","setParentSelected","useContext","VerticalNavigationContext","navigationPopup","setNavigationPopup","useState","handleChange","useCallback","selectedId","selectedItem","currentEventTarget","currentTarget","prevState","anchorEl","uniqueKey","uniqueId","fixedMode","stopPropagation","treeViewItemMouseEnterHandler","isCollapsedMode","handleToggle","newExpanded","useMemo","useEffect","navigateToTargetHandler","handleNavigationPopupClose","handleStyledNavMouseLeave","StyledNav","clsx","verticalNavigationTreeClasses","root","collapsed","onMouseLeave","HvVerticalNavigationSlider","onNavigateToTarget","onNavigateToChild","_jsxs","HvVerticalNavigationTreeView","list","HvVerticalNavigationPopup","onClose"],"mappings":";;;;;;;;;;;;;;;;;;AAyDA,MAAMA,sBAAsBA,CAC1BC,OACAC,IACAC,SACAC,mBACAC,iBAAiB,UAEjBJ,MAAMK,IAAKC,CAAS,SAAA;AACZ,QAAA;AAAA,IACJL,IAAIM;AAAAA,IACJC,OAAOC;AAAAA,IACPC;AAAAA,IACAC,MAAMC;AAAAA,IACNC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,EACEV,IAAAA;AAEJ,QAAMW,WAAWC,eAAAA,eAAe,MAAMT,WAAWA,SAAS;AAE1D,QAAMU,wBAAyBC,CAAU,UAAA;AACvCjB,2DAAoBiB,OAAOd;AAAAA,EAAI;AAGjC,wCACGe,aAAAA,kCAAgC;AAAA,IAC/BpB,IAAIqB,MAAAA,MAAMrB,IAAIM,MAAM;AAAA,IACpBgB,WAAWrB,mCAASsB;AAAAA,IACpBT;AAAAA,IACAC;AAAAA,IAEAS,QAAQlB;AAAAA,IACRC,OAAOkB,2BAAAA,IAACT,UAAY,EAAA;AAAA,IACpBP;AAAAA,IACAiB,SAASrB;AAAAA,IACTO;AAAAA,IACAC;AAAAA,IACAc,cAAcT;AAAAA,IACdf;AAAAA,IAA+BQ,UAE9BA,WACGb,oBACEa,UACAX,IACAC,SACAC,mBACAC,cAAc,IAEhByB;AAAAA,KAlBCtB,MAAM;AAqBjB,CAAC;AAEH,MAAMuB,gBAAiB9B,CAAU,UAAA;AACzB+B,QAAAA,UAAU/B,MAAMgC,OACnB1B,CAASA,SAAAA,KAAKK,QAAQ,QAAQL,KAAKK,KAAKsB,SAAS,CAAC;AAErD,QAAMC,eAAeH,QAAQI,QAAS7B,UAASwB,cAAcxB,KAAKK,IAAI,CAAC;AAEvE,SAAO,CAAC,GAAGoB,SAAS,GAAGG,YAAY;AACrC;AAEA,SAASE,cAAczB,MAAM0B,UAAU;AACrC,QAAMC,OAAiB,CAAA;AAEvB,MAAI3B,QAAQ,QAAQA,KAAKsB,SAAS,GAAG;AACnC,aAASM,IAAI,GAAGA,MAAM5B,KAAKsB,QAAQ,EAAEM,GAAG;AAChCjC,YAAAA,OAAOK,KAAK4B,CAAC;AACfjC,UAAAA,KAAKL,OAAOoC,UAAU;AACnBG,aAAAA,KAAKlC,KAAKL,EAAE;AACjB;AAAA,MACF;AAEA,YAAMwC,WAAWL,cAAc9B,KAAKK,MAAM0B,QAAQ;AAC9CI,UAAAA,SAASR,SAAS,GAAG;AAClBO,aAAAA,KAAKlC,KAAKL,EAAE;AACZuC,aAAAA,KAAK,GAAGC,QAAQ;AACrB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEOH,SAAAA;AACT;AAEO,MAAMI,2BAA2BA,CAAC;AAAA,EACvCzC;AAAAA,EAEAsB;AAAAA,EACArB;AAAAA,EAEAS;AAAAA,EAEAgC,OAAO;AAAA,EAEPC,cAAc;AAAA,EACdC,UAAUC;AAAAA,EACVC;AAAAA,EACAC;AAAAA,EAEAC,UAAUC;AAAAA,EACVC;AAAAA,EACAC;AAAAA,EAEA,GAAGC;AAC0B,MAAM;AACnC,QAAM,CAACJ,UAAUK,WAAW,IAAIC,cAAAA,cAAcL,cAAcC,eAAe;AAC3E,QAAM,CAACN,UAAUW,WAAW,IAAID,cAAAA,cAAcT,cAAc,MAAM;AAChE,QAAIC,oBAAoB,MAAM;AAE5B,aAAOjB,cAAcnB,IAAI,EAAEN,IAAKC,CAAAA,SAASA,KAAKL,EAAE;AAAA,IAClD;AAEA,QAAI8C,oBAAoB,OAAO;AAE7B,aAAO;IACT;AAEA,QAAIA,mBAAmB,MAAM;AAC3B,UAAIE,YAAY,MAAM;AAEdX,cAAAA,OAAOF,cAAczB,MAAMsC,QAAQ;AAClCX,eAAAA,KAAKmB,MAAM,GAAG,EAAE;AAAA,MACzB;AAGA,aAAO;IACT;AAEOV,WAAAA;AAAAA,EAAAA,CACR;AAEK,QAAA;AAAA,IACJW;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IAEAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IAEAC;AAAAA,IACAC;AAAAA,EAAAA,IACEC,MAAAA,WAAWC,0BAAAA,yBAAyB;AAExC,QAAM,CAACC,iBAAiBC,kBAAkB,IAAIC,eAMpC,IAAI;AAEd,QAAMC,eAAeC,MAAAA,YACnB,CAACpD,OAAOqD,YAAYC,iBAAiB;AACnC,QAAIf,kBAAkB,UAAU,CAACD,UAAUgB,aAAa/D,MAAM;AAC5D,YAAMgE,qBAAqBvD,MAAMwD;AACjCP,yBAAoBQ,CAAc,cAAA;AAEzBA,gBAAAA,uCAAWC,cAAaH,qBAC3B,OACA;AAAA,UACEI,WAAWC,kBAAAA,QAAU;AAAA,UACrBF,UAAUH;AAAAA,UACVM,WAAW;AAAA,UACXtE,MAAM+D,aAAa/D;AAAAA,QAAAA;AAAAA,MACrB,CACL;AAGDS,YAAM8D,gBAAiB;AAAA,IAAA,OAClB;AACL5B,kBAAYmB,UAAU;AACtBjB,kBAAaqB,CAAc,cAAA;AACzB,YAAI,CAACnB,QAAQ;AACX,iBAAO,CAAC,GAAGmB,WAAW,GAAGzC,cAAczB,MAAM8D,UAAU,CAAC;AAAA,QAC1D;AACO,eAAA,CAAC,GAAGI,SAAS;AAAA,MAAA,CACrB;AACDR,yBAAmB,IAAI;AACvB,UAAIjB,UAAU;AACZA,iBAAShC,OAAOsD,YAAY;AAAA,MAC9B;AAAA,IACF;AAAA,EAAA,GAEF,CAACtB,UAAUE,WAAW,CAAC;AAGnB6B,QAAAA,gCAAgCA,CAAC/D,OAAOd,SAAS;AAC/C8E,UAAAA,kBAAkBzB,kBAAkB,UAAU,CAACD;AAErD,QAAI0B,mBAAmB9E,KAAKK,QAAQ,EAACyD,mDAAiBa,YAAW;AAC/D,YAAMN,qBAAqBvD,MAAMwD;AAEZ,+DAAA;AAAA,QACnBG,WAAWC,kBAAAA,QAAU;AAAA,QACrBF,UAAUH;AAAAA,QACVM,WAAW;AAAA,QACXtE,MAAML,KAAKK;AAAAA,MAAAA;AAAAA,IACZ,WACQyE,mBAAmB,CAAC9E,KAAKK,QAAQ,EAACyD,mDAAiBa,YAAW;AACvEZ,yBAAmB,IAAI;AAAA,IACzB;AAAA,EAAA;AAGF,QAAMgB,eAAeb,MAAAA,YACnB,CAACpD,OAAOkE,gBAAgB;AACtB9B,gBAAY8B,WAAW;AAEvB,QAAItC,UAAU;AACZA,eAAS5B,OAAOkE,WAAW;AAAA,IAC7B;AAAA,EAAA,GAEF,CAACtC,UAAUQ,WAAW,CAAC;AAGzB,QAAM5C,WAAW2E,MAAAA,QACf,MACE5E,QACAZ,oBACEY,MACAV,IACAC,SACAiF,+BACAf,mDAAiBa,SAAS,GAE9B,CAAC/E,SAASS,MAAMV,IAAImE,iBAAiBV,MAAM,CAAC;AAG9C8B,QAAAA,UAAU,MAAM;AACd,QAAI,CAAC9B,QAAQ;AACXW,+DAAqB;AAAA,IACvB;AAAA,EAAA,GACC,CAACX,MAAM,CAAC;AAEX8B,QAAAA,UAAU,MAAM;AACVvB,QAAAA;AAAmBA,wBAAkBhB,QAAQ;AAAA,EAAA,GAChD,CAACA,UAAUK,WAAW,CAAC;AAE1BkC,QAAAA,UAAU,MAAM;AACVxB,QAAAA;AAAeA,oBAAcrD,IAAI;AAAA,EAAA,GACpC,CAACA,IAAI,CAAC;AAGH8E,QAAAA,0BAA0BA,CAACrE,OAAOsD,iBAAiB;AAC1CtD,iBAAAA,OAAOsD,aAAazE,IAAIyE,YAAY;AAAA,EAAA;AAGnD,QAAMgB,6BAA6BA,MAAM;AACvCrB,uBAAmB,IAAI;AAAA,EAAA;AAGzB,QAAMsB,4BAA4BA,MAAM;AACtC,QAAIhC,kBAAkB,UAAU,CAACD,UAAU,EAACU,mDAAiBa,YAAW;AACtEZ,yBAAmB,IAAI;AAAA,IACzB;AAAA,EAAA;AAGF,wCACGuB,kBAAAA,WAAS;AAAA,IACR3F;AAAAA,IACAsB,WAAWsE,KACTtE,KAAAA,WACAuE,kBAA8BC,QAAAA,MAC9B7F,mCAAS6F,MACT,CAACrC,UACCC,iBAAiB,YACjBkC,UAAKC,kBAAAA,QAA8BE,WAAW9F,mCAAS8F,SAAS,CAAC;AAAA,IAErEC,cAAcN;AAAAA,IAA0B,GACpCtC;AAAAA,IAAMzC,UAETgD,SACClC,2BAAAA,IAACwE,6CAA0B;AAAA,MACzBvF,MAAMkD,WAAWlD,QAAQmD;AAAAA,MACzBb;AAAAA,MACAkD,oBAAoBV;AAAAA,MACpBW,mBAAmBrC;AAAAA,IAAAA,CACnB,IAEFsC,2BAAAA,KAACC,uCAA4B;AAAA,MAC3BrG,IAAIqB,MAAAA,MAAMrB,IAAI,MAAM;AAAA,MACpBsB,WAAWsE,KAAAA,KAAKC,kBAAAA,QAA8BS,MAAMrG,mCAASqG,IAAI;AAAA,MACjE1F,YAAU;AAAA,MACV8B;AAAAA,MACAC;AAAAA,MACAK;AAAAA,MACAG,UAAUmB;AAAAA,MACV1B;AAAAA,MACAG,UAAUqC;AAAAA,MAAazE,UAEtB+C,CAAAA,kBAAkB,UAAU,CAACD,UAAUU,kDACrCoC,2CAAyB;AAAA,QACxBvG,IAAIqB,MAAAA,MAAMrB,IAAI,kBAAkB;AAAA,QAEhC6E,UAAUV,gBAAgBU;AAAAA,QAC1B7B;AAAAA,QACAgC,WAAWb,gBAAgBa;AAAAA,QAC3BtE,MAAMyD,gBAAgBzD;AAAAA,QACtB8F,SAASf;AAAAA,QACTtC,UAAUmB;AAAAA,MAAAA,GANLH,gBAAgBW,SAAS,GASjCnE,QAAQ;AAAA,IAAA,CAAA;AAAA,EAAA,CAGH;AAEhB;;"}
+{"version":3,"file":"Navigation.cjs","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\";\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    collapsedMode,\n    slider,\n\n    parentItem,\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 (collapsedMode === \"icon\" && !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 isCollapsedMode = collapsedMode === \"icon\" && !isOpen;\n\n    if (isCollapsedMode && 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 (isCollapsedMode && !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  // 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 (collapsedMode === \"icon\" && !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          collapsedMode === \"simple\" &&\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          {collapsedMode === \"icon\" && !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","collapsedMode","slider","parentItem","withParentData","navigateToChildHandler","setParentData","setParentSelected","useContext","VerticalNavigationContext","navigationPopup","setNavigationPopup","useState","handleChange","useCallback","selectedId","selectedItem","currentEventTarget","currentTarget","prevState","anchorEl","uniqueKey","uniqueId","fixedMode","stopPropagation","treeViewItemMouseEnterHandler","isCollapsedMode","handleToggle","newExpanded","useMemo","useEffect","navigateToTargetHandler","handleNavigationPopupClose","handleStyledNavMouseLeave","StyledNav","clsx","verticalNavigationTreeClasses","root","collapsed","onMouseLeave","HvVerticalNavigationSlider","onNavigateToTarget","onNavigateToChild","_jsxs","HvVerticalNavigationTreeView","list","HvVerticalNavigationPopup","onClose"],"mappings":"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"}

package/dist/cjs/components/VerticalNavigation/Navigation/navigationClasses.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const classes = require("../../../utils/classes.cjs");
-const classKeys = ["root", "list", "listItem", "collapsed", "popup"];
+const classKeys = ["root", "list", "listItem", "collapsed", "popup", "navigationPopup"];
 const verticalNavigationTreeClasses = classes.getClasses(classKeys, "HvVerticalNavigationTree");
 const verticalNavigationTreeClasses$1 = verticalNavigationTreeClasses;
 exports.default = verticalNavigationTreeClasses$1;

package/dist/cjs/components/VerticalNavigation/Navigation/navigationClasses.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"navigationClasses.cjs","sources":["../../../../../src/components/VerticalNavigation/Navigation/navigationClasses.ts"],"sourcesContent":["import { getClasses } from \"@core/utils\";\n\nexport interface HvVerticalNavigationTreeClasses {\n  root?: string;\n  list?: string;\n  listItem?: string;\n  collapsed?: string;\n  popup?: string;\n}\n\nconst classKeys: (keyof HvVerticalNavigationTreeClasses)[] = [\n  \"root\",\n  \"list\",\n  \"listItem\",\n  \"collapsed\",\n  \"popup\",\n];\n\nconst verticalNavigationTreeClasses = getClasses(\n  classKeys,\n  \"HvVerticalNavigationTree\"\n);\n\nexport default verticalNavigationTreeClasses;\n"],"names":["classKeys","verticalNavigationTreeClasses","getClasses"],"mappings":";;;AAUA,MAAMA,YAAuD,CAC3D,QACA,QACA,YACA,aACA,OAAO;AAGT,MAAMC,gCAAgCC,QACpCF,WAAAA,WACA,0BAA0B;AAG5B,MAAA,kCAAeC;;"}
+{"version":3,"file":"navigationClasses.cjs","sources":["../../../../../src/components/VerticalNavigation/Navigation/navigationClasses.ts"],"sourcesContent":["import { getClasses } from \"@core/utils\";\n\nexport interface HvVerticalNavigationTreeClasses {\n  root?: string;\n  list?: string;\n  listItem?: string;\n  collapsed?: string;\n  popup?: string;\n  navigationPopup?: string;\n}\n\nconst classKeys: (keyof HvVerticalNavigationTreeClasses)[] = [\n  \"root\",\n  \"list\",\n  \"listItem\",\n  \"collapsed\",\n  \"popup\",\n  \"navigationPopup\",\n];\n\nconst verticalNavigationTreeClasses = getClasses(\n  classKeys,\n  \"HvVerticalNavigationTree\"\n);\n\nexport default verticalNavigationTreeClasses;\n"],"names":["classKeys","verticalNavigationTreeClasses","getClasses"],"mappings":";;;AAWA,MAAMA,YAAuD,CAC3D,QACA,QACA,YACA,aACA,SACA,iBAAiB;AAGnB,MAAMC,gCAAgCC,QACpCF,WAAAA,WACA,0BAA0B;AAG5B,MAAA,kCAAeC;;"}

package/dist/cjs/components/VerticalNavigation/NavigationPopup/NavigationPopup.cjs

@@ -15,7 +15,8 @@ const HvVerticalNavigationPopup = ({
   onClose,
   data,
   selected,
-  onChange
+  onChange,
+  ...others
 }) => {
   const handleClickAway = () => {
     onClose == null ? void 0 : onClose();
@@ -32,6 +33,7 @@ const HvVerticalNavigationPopup = ({
     open: true,
     anchorEl,
     placement: "right-start",
+    ...others,
     children: /* @__PURE__ */ jsxRuntime.jsx(material.ClickAwayListener, {
       onClickAway: handleClickAway,
       children: /* @__PURE__ */ jsxRuntime.jsx(NavigationPopup_styles.StyledPopupContainer, {

package/dist/cjs/components/VerticalNavigation/NavigationPopup/NavigationPopup.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationPopup.cjs","sources":["../../../../../src/components/VerticalNavigation/NavigationPopup/NavigationPopup.tsx"],"sourcesContent":["import { ClickAwayListener } from \"@mui/material\";\nimport { clsx } from \"clsx\";\n\nimport {\n  NavigationData,\n  HvVerticalNavigationTree,\n  HvVerticalNavigation,\n  verticalNavigationTreeClasses,\n} from \"@core/components\";\nimport { setId } from \"@core/utils\";\n\nimport { StyledPopper, StyledPopupContainer } from \"./NavigationPopup.styles\";\n\nexport interface HvVerticalNavigationPopupProps {\n  id?: string;\n  anchorEl?: HTMLElement | null;\n  fixedMode?: boolean;\n  data?: NavigationData[];\n  selected?: string;\n  onClose?: () => void;\n  onChange?: any;\n}\n\nexport const HvVerticalNavigationPopup = ({\n  id,\n  anchorEl,\n  fixedMode,\n  onClose,\n  data,\n  selected,\n  onChange,\n}: HvVerticalNavigationPopupProps) => {\n  const handleClickAway = () => {\n    onClose?.();\n  };\n\n  const handleChange = (event, selectedItem) => {\n    onChange(event, selectedItem.id, selectedItem);\n  };\n\n  const handleMouseLeave = () => {\n    if (!fixedMode) {\n      onClose?.();\n    }\n  };\n\n  return (\n    <StyledPopper open anchorEl={anchorEl} placement=\"right-start\">\n      <ClickAwayListener onClickAway={handleClickAway}>\n        <StyledPopupContainer>\n          <HvVerticalNavigation open>\n            <HvVerticalNavigationTree\n              className={clsx(verticalNavigationTreeClasses.popup)}\n              id={setId(id, \"tree\")}\n              collapsible\n              defaultExpanded\n              selected={selected}\n              onChange={handleChange}\n              data={data}\n              onMouseLeave={handleMouseLeave}\n            />\n          </HvVerticalNavigation>\n        </StyledPopupContainer>\n      </ClickAwayListener>\n    </StyledPopper>\n  );\n};\n"],"names":["HvVerticalNavigationPopup","id","anchorEl","fixedMode","onClose","data","selected","onChange","handleClickAway","handleChange","event","selectedItem","handleMouseLeave","StyledPopper","open","placement","children","ClickAwayListener","onClickAway","StyledPopupContainer","HvVerticalNavigation","HvVerticalNavigationTree","className","clsx","verticalNavigationTreeClasses","popup","setId","collapsible","defaultExpanded","onMouseLeave"],"mappings":";;;;;;;;;;AAuBO,MAAMA,4BAA4BA,CAAC;AAAA,EACxCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAC8B,MAAM;AACpC,QAAMC,kBAAkBA,MAAM;AACjB;AAAA,EAAA;AAGPC,QAAAA,eAAeA,CAACC,OAAOC,iBAAiB;AACnCD,aAAAA,OAAOC,aAAaV,IAAIU,YAAY;AAAA,EAAA;AAG/C,QAAMC,mBAAmBA,MAAM;AAC7B,QAAI,CAACT,WAAW;AACH;AAAA,IACb;AAAA,EAAA;AAGF,wCACGU,uBAAAA,cAAY;AAAA,IAACC,MAAI;AAAA,IAACZ;AAAAA,IAAoBa,WAAU;AAAA,IAAaC,yCAC3DC,4BAAiB;AAAA,MAACC,aAAaV;AAAAA,MAAgBQ,yCAC7CG,6CAAoB;AAAA,QAAAH,yCAClBI,yCAAoB;AAAA,UAACN,MAAI;AAAA,UAAAE,yCACvBK,qCAAwB;AAAA,YACvBC,WAAWC,KAAAA,KAAKC,kBAAAA,QAA8BC,KAAK;AAAA,YACnDxB,IAAIyB,MAAAA,MAAMzB,IAAI,MAAM;AAAA,YACpB0B,aAAW;AAAA,YACXC,iBAAe;AAAA,YACftB;AAAAA,YACAC,UAAUE;AAAAA,YACVJ;AAAAA,YACAwB,cAAcjB;AAAAA,UAAAA,CAAiB;AAAA,QAAA,CAC/B;AAAA,MAAA,CACmB;AAAA,IAAA,CACF;AAAA,EAAA,CAEZ;AAEnB;;"}
+{"version":3,"file":"NavigationPopup.cjs","sources":["../../../../../src/components/VerticalNavigation/NavigationPopup/NavigationPopup.tsx"],"sourcesContent":["import { ClickAwayListener } from \"@mui/material\";\nimport { clsx } from \"clsx\";\n\nimport {\n  NavigationData,\n  HvVerticalNavigationTree,\n  HvVerticalNavigation,\n  verticalNavigationTreeClasses,\n} from \"@core/components\";\nimport { HvBaseProps } from \"@core/types\";\nimport { setId } from \"@core/utils\";\n\nimport { StyledPopper, StyledPopupContainer } from \"./NavigationPopup.styles\";\n\nexport interface HvVerticalNavigationPopupProps\n  extends HvBaseProps<HTMLDivElement> {\n  id?: string;\n  anchorEl?: HTMLElement | null;\n  fixedMode?: boolean;\n  data?: NavigationData[];\n  selected?: string;\n  onClose?: () => void;\n  onChange?: any;\n}\n\nexport const HvVerticalNavigationPopup = ({\n  id,\n  anchorEl,\n  fixedMode,\n  onClose,\n  data,\n  selected,\n  onChange,\n\n  ...others\n}: HvVerticalNavigationPopupProps) => {\n  const handleClickAway = () => {\n    onClose?.();\n  };\n\n  const handleChange = (event, selectedItem) => {\n    onChange(event, selectedItem.id, selectedItem);\n  };\n\n  const handleMouseLeave = () => {\n    if (!fixedMode) {\n      onClose?.();\n    }\n  };\n\n  return (\n    <StyledPopper open anchorEl={anchorEl} placement=\"right-start\" {...others}>\n      <ClickAwayListener onClickAway={handleClickAway}>\n        <StyledPopupContainer>\n          <HvVerticalNavigation open>\n            <HvVerticalNavigationTree\n              className={clsx(verticalNavigationTreeClasses.popup)}\n              id={setId(id, \"tree\")}\n              collapsible\n              defaultExpanded\n              selected={selected}\n              onChange={handleChange}\n              data={data}\n              onMouseLeave={handleMouseLeave}\n            />\n          </HvVerticalNavigation>\n        </StyledPopupContainer>\n      </ClickAwayListener>\n    </StyledPopper>\n  );\n};\n"],"names":["HvVerticalNavigationPopup","id","anchorEl","fixedMode","onClose","data","selected","onChange","others","handleClickAway","handleChange","event","selectedItem","handleMouseLeave","StyledPopper","open","placement","children","ClickAwayListener","onClickAway","StyledPopupContainer","HvVerticalNavigation","HvVerticalNavigationTree","className","clsx","verticalNavigationTreeClasses","popup","setId","collapsible","defaultExpanded","onMouseLeave"],"mappings":";;;;;;;;;;AAyBO,MAAMA,4BAA4BA,CAAC;AAAA,EACxCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EAEA,GAAGC;AAC2B,MAAM;AACpC,QAAMC,kBAAkBA,MAAM;AACjB;AAAA,EAAA;AAGPC,QAAAA,eAAeA,CAACC,OAAOC,iBAAiB;AACnCD,aAAAA,OAAOC,aAAaX,IAAIW,YAAY;AAAA,EAAA;AAG/C,QAAMC,mBAAmBA,MAAM;AAC7B,QAAI,CAACV,WAAW;AACH;AAAA,IACb;AAAA,EAAA;AAGF,wCACGW,uBAAAA,cAAY;AAAA,IAACC,MAAI;AAAA,IAACb;AAAAA,IAAoBc,WAAU;AAAA,IAAa,GAAKR;AAAAA,IAAMS,yCACtEC,4BAAiB;AAAA,MAACC,aAAaV;AAAAA,MAAgBQ,yCAC7CG,6CAAoB;AAAA,QAAAH,yCAClBI,yCAAoB;AAAA,UAACN,MAAI;AAAA,UAAAE,yCACvBK,qCAAwB;AAAA,YACvBC,WAAWC,KAAAA,KAAKC,kBAAAA,QAA8BC,KAAK;AAAA,YACnDzB,IAAI0B,MAAAA,MAAM1B,IAAI,MAAM;AAAA,YACpB2B,aAAW;AAAA,YACXC,iBAAe;AAAA,YACfvB;AAAAA,YACAC,UAAUG;AAAAA,YACVL;AAAAA,YACAyB,cAAcjB;AAAAA,UAAAA,CAAiB;AAAA,QAAA,CAC/B;AAAA,MAAA,CACmB;AAAA,IAAA,CACF;AAAA,EAAA,CAEZ;AAEnB;;"}

package/dist/cjs/components/VerticalNavigation/NavigationSlider/NavigationSlider.cjs

@@ -25,9 +25,10 @@ const HvVerticalNavigationSlider = ({
         selected: clsx.clsx(classes == null ? void 0 : classes.listItemSelected, navigationSliderClasses.default.listItemSelected)
       },
       onClick: (event) => {
-        if (onNavigateToTarget)
-          onNavigateToTarget(event, item);
+        onNavigateToTarget == null ? void 0 : onNavigateToTarget(event, item);
       },
+      "aria-label": item.label,
+      "aria-current": selected === item.id ? item.href ? "page" : true : void 0,
       selected: selected === item.id,
       startAdornment: /* @__PURE__ */ jsxRuntime.jsx("div", {
         children: item.icon
@@ -36,8 +37,7 @@ const HvVerticalNavigationSlider = ({
         variant: "secondaryGhost",
         icon: true,
         onClick: (event) => {
-          if (onNavigateToChild)
-            onNavigateToChild(event, item);
+          onNavigateToChild == null ? void 0 : onNavigateToChild(event, item);
         },
         children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropRightXS, {})
       }) : void 0,

package/dist/cjs/components/VerticalNavigation/NavigationSlider/NavigationSlider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationSlider.cjs","sources":["../../../../../src/components/VerticalNavigation/NavigationSlider/NavigationSlider.tsx"],"sourcesContent":["import { DropRightXS } from \"@hitachivantara/uikit-react-icons\";\nimport { clsx } from \"clsx\";\nimport {\n  HvButton,\n  HvListContainer,\n  HvOverflowTooltip,\n  NavigationData,\n} from \"@core/components\";\nimport { StyledListItem } from \"./NavigationSlider.styles\";\nimport verticalNavigationSliderClasses, {\n  HvVerticalNavigationSliderClasses,\n} from \"./navigationSliderClasses\";\n\nexport interface HvVerticalNavigationSliderProps {\n  /**\n   * Id to be applied to the root node of the panel.\n   */\n  id?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvVerticalNavigationSliderClasses;\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   * icon - the icon react element\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   * The selected item id.\n   */\n  selected?: string;\n  /**\n   * Triggered when the item is clicked.\n   */\n  onNavigateToTarget?: (\n    event: React.MouseEvent<HTMLLIElement>,\n    item: NavigationData\n  ) => void;\n  /**\n   * Triggered when the navigate to child button is clicked.\n   */\n  onNavigateToChild?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    item: NavigationData\n  ) => void;\n}\n\nexport const HvVerticalNavigationSlider = ({\n  id,\n  classes,\n  data,\n  selected,\n  onNavigateToTarget,\n  onNavigateToChild,\n}: HvVerticalNavigationSliderProps) => {\n  return (\n    <HvListContainer interactive id={id}>\n      {data &&\n        data.map((item) => (\n          <StyledListItem\n            key={item.id}\n            classes={{\n              root: classes?.root,\n              selected: clsx(\n                classes?.listItemSelected,\n                verticalNavigationSliderClasses.listItemSelected\n              ),\n            }}\n            onClick={(event) => {\n              if (onNavigateToTarget) onNavigateToTarget(event, item);\n            }}\n            selected={selected === item.id}\n            startAdornment={<div>{item.icon}</div>}\n            endAdornment={\n              item.data && item.data.length > 0 ? (\n                <HvButton\n                  variant=\"secondaryGhost\"\n                  icon\n                  onClick={(event) => {\n                    if (onNavigateToChild) onNavigateToChild(event, item);\n                  }}\n                >\n                  <DropRightXS />\n                </HvButton>\n              ) : undefined\n            }\n          >\n            <HvOverflowTooltip data={item.label} />\n          </StyledListItem>\n        ))}\n    </HvListContainer>\n  );\n};\n"],"names":["HvVerticalNavigationSlider","id","classes","data","selected","onNavigateToTarget","onNavigateToChild","HvListContainer","interactive","children","map","item","StyledListItem","root","clsx","listItemSelected","verticalNavigationSliderClasses","onClick","event","startAdornment","icon","endAdornment","length","HvButton","variant","_jsx","DropRightXS","undefined","HvOverflowTooltip","label"],"mappings":";;;;;;;;;;AAqDO,MAAMA,6BAA6BA,CAAC;AAAA,EACzCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAC+B,MAAM;AACrC,wCACGC,cAAAA,iBAAe;AAAA,IAACC,aAAW;AAAA,IAACP;AAAAA,IAAOQ,UACjCN,QACCA,KAAKO,IAAKC,CAAAA,wCACPC,wCAAc;AAAA,MAEbV,SAAS;AAAA,QACPW,MAAMX,mCAASW;AAAAA,QACfT,UAAUU,KAAAA,KACRZ,mCAASa,kBACTC,wBAAAA,QAAgCD,gBAAgB;AAAA,MAEpD;AAAA,MACAE,SAAUC,CAAU,UAAA;AACdb,YAAAA;AAAoBA,6BAAmBa,OAAOP,IAAI;AAAA,MACxD;AAAA,MACAP,UAAUA,aAAaO,KAAKV;AAAAA,MAC5BkB,+CAAgB,OAAA;AAAA,QAAAV,UAAME,KAAKS;AAAAA,MAAAA,CAAY;AAAA,MACvCC,cACEV,KAAKR,QAAQQ,KAAKR,KAAKmB,SAAS,mCAC7BC,iBAAQ;AAAA,QACPC,SAAQ;AAAA,QACRJ,MAAI;AAAA,QACJH,SAAUC,CAAU,UAAA;AACdZ,cAAAA;AAAmBA,8BAAkBY,OAAOP,IAAI;AAAA,QACtD;AAAA,QAAEF,UAEFgB,2BAAAA,IAACC,gBAAW,aAAA,EAAA;AAAA,MAAG,CAAA,IAEfC;AAAAA,MACLlB,yCAEAmB,mCAAiB;AAAA,QAACzB,MAAMQ,KAAKkB;AAAAA,MAAAA,CAAM;AAAA,IAAA,GA3B/BlB,KAAKV,EAAE,CA6Bf;AAAA,EAAA,CACa;AAEtB;;"}
+{"version":3,"file":"NavigationSlider.cjs","sources":["../../../../../src/components/VerticalNavigation/NavigationSlider/NavigationSlider.tsx"],"sourcesContent":["import { DropRightXS } from \"@hitachivantara/uikit-react-icons\";\nimport { clsx } from \"clsx\";\nimport {\n  HvButton,\n  HvListContainer,\n  HvOverflowTooltip,\n  NavigationData,\n} from \"@core/components\";\nimport { StyledListItem } from \"./NavigationSlider.styles\";\nimport verticalNavigationSliderClasses, {\n  HvVerticalNavigationSliderClasses,\n} from \"./navigationSliderClasses\";\n\nexport interface HvVerticalNavigationSliderProps {\n  /**\n   * Id to be applied to the root node of the panel.\n   */\n  id?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvVerticalNavigationSliderClasses;\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   * icon - the icon react element\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   * The selected item id.\n   */\n  selected?: string;\n  /**\n   * Triggered when the item is clicked.\n   */\n  onNavigateToTarget?: (\n    event: React.MouseEvent<HTMLLIElement>,\n    item: NavigationData\n  ) => void;\n  /**\n   * Triggered when the navigate to child button is clicked.\n   */\n  onNavigateToChild?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    item: NavigationData\n  ) => void;\n}\n\nexport const HvVerticalNavigationSlider = ({\n  id,\n  classes,\n  data,\n  selected,\n  onNavigateToTarget,\n  onNavigateToChild,\n}: HvVerticalNavigationSliderProps) => {\n  return (\n    <HvListContainer interactive id={id}>\n      {data &&\n        data.map((item) => (\n          <StyledListItem\n            key={item.id}\n            classes={{\n              root: classes?.root,\n              selected: clsx(\n                classes?.listItemSelected,\n                verticalNavigationSliderClasses.listItemSelected\n              ),\n            }}\n            onClick={(event) => {\n              onNavigateToTarget?.(event, item);\n            }}\n            aria-label={item.label}\n            aria-current={\n              selected === item.id ? (item.href ? \"page\" : true) : undefined\n            }\n            selected={selected === item.id}\n            startAdornment={<div>{item.icon}</div>}\n            endAdornment={\n              item.data && item.data.length > 0 ? (\n                <HvButton\n                  variant=\"secondaryGhost\"\n                  icon\n                  onClick={(event) => {\n                    onNavigateToChild?.(event, item);\n                  }}\n                >\n                  <DropRightXS />\n                </HvButton>\n              ) : undefined\n            }\n          >\n            <HvOverflowTooltip data={item.label} />\n          </StyledListItem>\n        ))}\n    </HvListContainer>\n  );\n};\n"],"names":["HvVerticalNavigationSlider","id","classes","data","selected","onNavigateToTarget","onNavigateToChild","HvListContainer","interactive","children","map","item","StyledListItem","root","clsx","listItemSelected","verticalNavigationSliderClasses","onClick","event","label","href","undefined","startAdornment","icon","endAdornment","length","HvButton","variant","_jsx","DropRightXS","HvOverflowTooltip"],"mappings":";;;;;;;;;;AAqDO,MAAMA,6BAA6BA,CAAC;AAAA,EACzCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAC+B,MAAM;AACrC,wCACGC,cAAAA,iBAAe;AAAA,IAACC,aAAW;AAAA,IAACP;AAAAA,IAAOQ,UACjCN,QACCA,KAAKO,IAAKC,CAAAA,wCACPC,wCAAc;AAAA,MAEbV,SAAS;AAAA,QACPW,MAAMX,mCAASW;AAAAA,QACfT,UAAUU,KAAAA,KACRZ,mCAASa,kBACTC,wBAAAA,QAAgCD,gBAAgB;AAAA,MAEpD;AAAA,MACAE,SAAUC,CAAU,UAAA;AAClBb,iEAAqBa,OAAOP;AAAAA,MAC9B;AAAA,MACA,cAAYA,KAAKQ;AAAAA,MACjB,gBACEf,aAAaO,KAAKV,KAAMU,KAAKS,OAAO,SAAS,OAAQC;AAAAA,MAEvDjB,UAAUA,aAAaO,KAAKV;AAAAA,MAC5BqB,+CAAgB,OAAA;AAAA,QAAAb,UAAME,KAAKY;AAAAA,MAAAA,CAAY;AAAA,MACvCC,cACEb,KAAKR,QAAQQ,KAAKR,KAAKsB,SAAS,mCAC7BC,iBAAQ;AAAA,QACPC,SAAQ;AAAA,QACRJ,MAAI;AAAA,QACJN,SAAUC,CAAU,UAAA;AAClBZ,iEAAoBY,OAAOP;AAAAA,QAC7B;AAAA,QAAEF,UAEFmB,2BAAAA,IAACC,gBAAW,aAAA,EAAA;AAAA,MAAG,CAAA,IAEfR;AAAAA,MACLZ,yCAEAqB,mCAAiB;AAAA,QAAC3B,MAAMQ,KAAKQ;AAAAA,MAAAA,CAAM;AAAA,IAAA,GA/B/BR,KAAKV,EAAE,CAiCf;AAAA,EAAA,CACa;AAEtB;;"}

package/dist/cjs/components/VerticalNavigation/TreeView/TreeViewItem.cjs

@@ -160,14 +160,10 @@ const HvVerticalNavigationTreeViewItem = React.forwardRef((props, ref) => {
             return selectRange(event, {
               end: nodeId
             });
-        } else {
-          if (selectNode)
-            return selectNode(event, nodeId, true);
-        }
-      } else {
-        if (selectNode)
-          return selectNode(event, nodeId);
-      }
+        } else if (selectNode)
+          return selectNode(event, nodeId, true);
+      } else if (selectNode)
+        return selectNode(event, nodeId);
     } else {
       return false;
     }
@@ -221,21 +217,21 @@ const HvVerticalNavigationTreeViewItem = React.forwardRef((props, ref) => {
     target,
     ref: contentRef,
     className: clsx.clsx(treeViewItemClasses.default.content, classes == null ? void 0 : classes.content, href != null && clsx.clsx(treeViewItemClasses.default.link, classes == null ? void 0 : classes.link), !isOpen && clsx.clsx(treeViewItemClasses.default.minimized, classes == null ? void 0 : classes.minimized)),
-    variant: disabled ? "placeholderText" : "body",
+    variant: "body",
+    disabled,
     onClick: handleClick,
     onMouseDown: handleMouseDown,
     style: {
       paddingLeft: (expandable || icon != null || !isOpen ? 0 : 10) + level * (collapsible ? 32 : 10)
     },
+    role: href ? void 0 : "button",
     ...treeviewMode ? {
-      role: "button",
       tabIndex: -1,
       onFocus: handleFocus
     } : {
-      role: "button",
       tabIndex: selectable || expandable ? 0 : -1,
       onKeyDown: handleKeyDown,
-      "aria-current": selectable && selected || !isOpen && (isChildSelected == null ? void 0 : isChildSelected(nodeId)) ? "page" : void 0,
+      "aria-current": selectable && selected || !isOpen && (isChildSelected == null ? void 0 : isChildSelected(nodeId)) ? href ? "page" : true : void 0,
       "aria-expanded": expandable ? expanded : void 0,
       "aria-controls": expandable ? setId.setId(id, "group") : void 0,
       "aria-label": payload == null ? void 0 : payload.label
@@ -258,7 +254,7 @@ const HvVerticalNavigationTreeViewItem = React.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(TreeViewItem_styles.StyledNode, {
     ref: handleRef,
     id: id ?? void 0,
-    className: clsx.clsx((_a = treeViewItemClasses.default) == null ? void 0 : _a.node, classes == null ? void 0 : classes.node, className, disabled && clsx.clsx(treeViewItemClasses.default.disabled, classes == null ? void 0 : classes.disabled), expandable && clsx.clsx(treeViewItemClasses.default.expandable, classes == null ? void 0 : classes.expandable), expandable && !expanded && clsx.clsx(treeViewItemClasses.default.collapsed, classes == null ? void 0 : classes.collapsed), expandable && expanded && clsx.clsx(treeViewItemClasses.default.expanded, classes == null ? void 0 : classes.expanded), selectable && !disabled && clsx.clsx(treeViewItemClasses.default.selectable, classes == null ? void 0 : classes.selectable), !disabled && !selectable && clsx.clsx(treeViewItemClasses.default.unselectable, classes == null ? void 0 : classes.unselectable), !disabled && selectable && selected && clsx.clsx(treeViewItemClasses.default.selected, classes == null ? void 0 : classes.selected), !disabled && selectable && !selected && clsx.clsx(treeViewItemClasses.default.unselected, classes == null ? void 0 : classes.unselected), focused && clsx.clsx(treeViewItemClasses.default.focused, classes == null ? void 0 : classes.focused), !isOpen && collapsedMode == "simple" && clsx.clsx(treeViewItemClasses.default.hide, classes == null ? void 0 : classes.hide), !isOpen && collapsedMode == "icon" && isChildSelected && isChildSelected(nodeId) && clsx.clsx(treeViewItemClasses.default.selected, classes == null ? void 0 : classes.selected)),
+    className: clsx.clsx((_a = treeViewItemClasses.default) == null ? void 0 : _a.node, classes == null ? void 0 : classes.node, className, disabled && clsx.clsx(treeViewItemClasses.default.disabled, classes == null ? void 0 : classes.disabled), expandable && clsx.clsx(treeViewItemClasses.default.expandable, classes == null ? void 0 : classes.expandable), expandable && !expanded && clsx.clsx(treeViewItemClasses.default.collapsed, classes == null ? void 0 : classes.collapsed), expandable && expanded && clsx.clsx(treeViewItemClasses.default.expanded, classes == null ? void 0 : classes.expanded), selectable && !disabled && clsx.clsx(treeViewItemClasses.default.selectable, classes == null ? void 0 : classes.selectable), !disabled && !selectable && clsx.clsx(treeViewItemClasses.default.unselectable, classes == null ? void 0 : classes.unselectable), !disabled && selectable && selected && clsx.clsx(treeViewItemClasses.default.selected, classes == null ? void 0 : classes.selected), !disabled && selectable && !selected && clsx.clsx(treeViewItemClasses.default.unselected, classes == null ? void 0 : classes.unselected), focused && clsx.clsx(treeViewItemClasses.default.focused, classes == null ? void 0 : classes.focused), !isOpen && collapsedMode === "simple" && clsx.clsx(treeViewItemClasses.default.hide, classes == null ? void 0 : classes.hide), !isOpen && collapsedMode === "icon" && isChildSelected && isChildSelected(nodeId) && clsx.clsx(treeViewItemClasses.default.selected, classes == null ? void 0 : classes.selected)),
     "data-hasicon": icon != null ? true : void 0,
     ...mode === "treeview" && {
       role: "treeitem",