@hitachivantara/uikit-react-core 5.22.1 → 5.24.0

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

@@ -1,5 +1,6 @@
 import { forwardRef } from "react";
 import { useTheme } from "../../hooks/useTheme.js";
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { mapVariant } from "./utils.js";
 import { useClasses } from "./Typography.styles.js";
 import { staticClasses } from "./Typography.styles.js";
@@ -40,7 +41,7 @@ const HvTypography = forwardRef((props, ref) => {
     noWrap = false,
     paragraph = false,
     ...others
-  } = props;
+  } = useDefaultProps("HvTypography", props);
   const {
     classes,
     cx

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

@@ -1 +1 @@
-{"version":3,"file":"Typography.js","sources":["../../../../src/components/Typography/Typography.tsx"],"sourcesContent":["import { forwardRef, AllHTMLAttributes, Ref } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useTheme } from \"@core/hooks/useTheme\";\n\nimport {\n  HvTypographyLegacyVariants,\n  HvTypographyVariants,\n  mapVariant,\n} from \"./utils\";\nimport { staticClasses, useClasses } from \"./Typography.styles\";\n\nexport { staticClasses as typographyClasses };\n\nexport type HvTypographyClasses = ExtractNames<typeof useClasses>;\n\nconst HvTypographyMap = {\n  display: \"h1\",\n  title1: \"h1\",\n  title2: \"h2\",\n  title3: \"h3\",\n  title4: \"h4\",\n  body: \"p\",\n  label: \"span\",\n  caption1: \"p\",\n  caption2: \"p\",\n  // LEGACY\n  \"5xlTitle\": \"h1\",\n  \"4xlTitle\": \"h1\",\n  xxlTitle: \"h1\",\n  lTitle: \"h2\",\n  sTitle: \"h4\",\n  xxsTitle: \"h6\",\n  sectionTitle: \"p\",\n  placeholderText: \"p\",\n  link: \"p\",\n  disabledText: \"p\",\n  selectedNavText: \"p\",\n  vizTextDisabled: \"p\",\n  xsInlineLink: \"p\",\n} as const;\n\nexport interface HvTypographyProps\n  extends Omit<AllHTMLAttributes<HTMLElement>, \"disabled\">,\n    HvBaseProps<HTMLElement> {\n  component?: React.ElementType;\n  /** Use the variant prop to change the visual style of the Typography. */\n  variant?: HvTypographyVariants | HvTypographyLegacyVariants;\n  /** If `true` the typography will display the look of a link. */\n  link?: boolean;\n  /** If `true` the typography will display the look of a disabled state. */\n  disabled?: boolean;\n  /** If `true`, the text will have a bottom margin. */\n  paragraph?: boolean;\n  /**\n   * If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis.\n   *\n   * Note that text overflow can only happen with block or inline-block level elements\n   * (the element needs to have a width in order to overflow).\n   */\n  noWrap?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTypographyClasses;\n}\n\n/**\n * Typography component is used to render text and paragraphs within an interface.\n */\nexport const HvTypography = forwardRef(\n  (props: HvTypographyProps, ref: Ref<HTMLElement>) => {\n    const {\n      className,\n      component: ComponentProp,\n      classes: classesProp,\n      variant: variantProp = \"body\",\n      link = false,\n      disabled = false,\n      noWrap = false,\n      paragraph = false,\n      ...others\n    } = props;\n    const { classes, cx } = useClasses(classesProp);\n    const { activeTheme } = useTheme();\n\n    const variant = mapVariant(variantProp, activeTheme?.name);\n\n    const Component =\n      ComponentProp || (paragraph && \"p\") || HvTypographyMap[variant] || \"span\";\n\n    return (\n      <Component\n        ref={ref}\n        className={cx(classes.root, classes[variant], className, {\n          [classes.isLink]: link,\n          [classes.noWrap]: noWrap,\n          [classes.disabled]: disabled,\n        })}\n        {...others}\n      />\n    );\n  }\n);\n"],"names":["HvTypographyMap","display","title1","title2","title3","title4","body","label","caption1","caption2","xxlTitle","lTitle","sTitle","xxsTitle","sectionTitle","placeholderText","link","disabledText","selectedNavText","vizTextDisabled","xsInlineLink","HvTypography","forwardRef","props","ref","className","component","ComponentProp","classes","classesProp","variant","variantProp","disabled","noWrap","paragraph","others","cx","useClasses","activeTheme","useTheme","mapVariant","name","Component","root","isLink"],"mappings":";;;;;;AAiBA,MAAMA,kBAAkB;AAAA,EACtBC,SAAS;AAAA,EACTC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,MAAM;AAAA,EACNC,OAAO;AAAA,EACPC,UAAU;AAAA,EACVC,UAAU;AAAA;AAAA,EAEV,YAAY;AAAA,EACZ,YAAY;AAAA,EACZC,UAAU;AAAA,EACVC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,UAAU;AAAA,EACVC,cAAc;AAAA,EACdC,iBAAiB;AAAA,EACjBC,MAAM;AAAA,EACNC,cAAc;AAAA,EACdC,iBAAiB;AAAA,EACjBC,iBAAiB;AAAA,EACjBC,cAAc;AAChB;AA4BO,MAAMC,eAAeC,WAC1B,CAACC,OAA0BC,QAA0B;AAC7C,QAAA;AAAA,IACJC;AAAAA,IACAC,WAAWC;AAAAA,IACXC,SAASC;AAAAA,IACTC,SAASC,cAAc;AAAA,IACvBf,OAAO;AAAA,IACPgB,WAAW;AAAA,IACXC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZ,GAAGC;AAAAA,EACDZ,IAAAA;AACE,QAAA;AAAA,IAAEK;AAAAA,IAASQ;AAAAA,EAAAA,IAAOC,WAAWR,WAAW;AACxC,QAAA;AAAA,IAAES;AAAAA,MAAgBC,SAAS;AAEjC,QAAMT,UAAUU,WAAWT,aAAaO,2CAAaG,IAAI;AAEzD,QAAMC,YACJf,iBAAkBO,aAAa,OAAQlC,gBAAgB8B,OAAO,KAAK;AAErE,6BACGY,WAAS;AAAA,IACRlB;AAAAA,IACAC,WAAWW,GAAGR,QAAQe,MAAMf,QAAQE,OAAO,GAAGL,WAAW;AAAA,MACvD,CAACG,QAAQgB,MAAM,GAAG5B;AAAAA,MAClB,CAACY,QAAQK,MAAM,GAAGA;AAAAA,MAClB,CAACL,QAAQI,QAAQ,GAAGA;AAAAA,IAAAA,CACrB;AAAA,IAAE,GACCG;AAAAA,EAAAA,CACL;AAEL,CACF;"}
+{"version":3,"file":"Typography.js","sources":["../../../../src/components/Typography/Typography.tsx"],"sourcesContent":["import { forwardRef, AllHTMLAttributes, Ref } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport {\n  HvTypographyLegacyVariants,\n  HvTypographyVariants,\n  mapVariant,\n} from \"./utils\";\nimport { staticClasses, useClasses } from \"./Typography.styles\";\n\nexport { staticClasses as typographyClasses };\n\nexport type HvTypographyClasses = ExtractNames<typeof useClasses>;\n\nconst HvTypographyMap = {\n  display: \"h1\",\n  title1: \"h1\",\n  title2: \"h2\",\n  title3: \"h3\",\n  title4: \"h4\",\n  body: \"p\",\n  label: \"span\",\n  caption1: \"p\",\n  caption2: \"p\",\n  // LEGACY\n  \"5xlTitle\": \"h1\",\n  \"4xlTitle\": \"h1\",\n  xxlTitle: \"h1\",\n  lTitle: \"h2\",\n  sTitle: \"h4\",\n  xxsTitle: \"h6\",\n  sectionTitle: \"p\",\n  placeholderText: \"p\",\n  link: \"p\",\n  disabledText: \"p\",\n  selectedNavText: \"p\",\n  vizTextDisabled: \"p\",\n  xsInlineLink: \"p\",\n} as const;\n\nexport interface HvTypographyProps\n  extends Omit<AllHTMLAttributes<HTMLElement>, \"disabled\">,\n    HvBaseProps<HTMLElement> {\n  component?: React.ElementType;\n  /** Use the variant prop to change the visual style of the Typography. */\n  variant?: HvTypographyVariants | HvTypographyLegacyVariants;\n  /** If `true` the typography will display the look of a link. */\n  link?: boolean;\n  /** If `true` the typography will display the look of a disabled state. */\n  disabled?: boolean;\n  /** If `true`, the text will have a bottom margin. */\n  paragraph?: boolean;\n  /**\n   * If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis.\n   *\n   * Note that text overflow can only happen with block or inline-block level elements\n   * (the element needs to have a width in order to overflow).\n   */\n  noWrap?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTypographyClasses;\n}\n\n/**\n * Typography component is used to render text and paragraphs within an interface.\n */\nexport const HvTypography = forwardRef(\n  (props: HvTypographyProps, ref: Ref<HTMLElement>) => {\n    const {\n      className,\n      component: ComponentProp,\n      classes: classesProp,\n      variant: variantProp = \"body\",\n      link = false,\n      disabled = false,\n      noWrap = false,\n      paragraph = false,\n      ...others\n    } = useDefaultProps(\"HvTypography\", props);\n    const { classes, cx } = useClasses(classesProp);\n    const { activeTheme } = useTheme();\n\n    const variant = mapVariant(variantProp, activeTheme?.name);\n\n    const Component =\n      ComponentProp || (paragraph && \"p\") || HvTypographyMap[variant] || \"span\";\n\n    return (\n      <Component\n        ref={ref}\n        className={cx(classes.root, classes[variant], className, {\n          [classes.isLink]: link,\n          [classes.noWrap]: noWrap,\n          [classes.disabled]: disabled,\n        })}\n        {...others}\n      />\n    );\n  }\n);\n"],"names":["HvTypographyMap","display","title1","title2","title3","title4","body","label","caption1","caption2","xxlTitle","lTitle","sTitle","xxsTitle","sectionTitle","placeholderText","link","disabledText","selectedNavText","vizTextDisabled","xsInlineLink","HvTypography","forwardRef","props","ref","className","component","ComponentProp","classes","classesProp","variant","variantProp","disabled","noWrap","paragraph","others","useDefaultProps","cx","useClasses","activeTheme","useTheme","mapVariant","name","Component","root","isLink"],"mappings":";;;;;;;AAkBA,MAAMA,kBAAkB;AAAA,EACtBC,SAAS;AAAA,EACTC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,MAAM;AAAA,EACNC,OAAO;AAAA,EACPC,UAAU;AAAA,EACVC,UAAU;AAAA;AAAA,EAEV,YAAY;AAAA,EACZ,YAAY;AAAA,EACZC,UAAU;AAAA,EACVC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,UAAU;AAAA,EACVC,cAAc;AAAA,EACdC,iBAAiB;AAAA,EACjBC,MAAM;AAAA,EACNC,cAAc;AAAA,EACdC,iBAAiB;AAAA,EACjBC,iBAAiB;AAAA,EACjBC,cAAc;AAChB;AA4BO,MAAMC,eAAeC,WAC1B,CAACC,OAA0BC,QAA0B;AAC7C,QAAA;AAAA,IACJC;AAAAA,IACAC,WAAWC;AAAAA,IACXC,SAASC;AAAAA,IACTC,SAASC,cAAc;AAAA,IACvBf,OAAO;AAAA,IACPgB,WAAW;AAAA,IACXC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZ,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAgBb,KAAK;AACnC,QAAA;AAAA,IAAEK;AAAAA,IAASS;AAAAA,EAAAA,IAAOC,WAAWT,WAAW;AACxC,QAAA;AAAA,IAAEU;AAAAA,MAAgBC,SAAS;AAEjC,QAAMV,UAAUW,WAAWV,aAAaQ,2CAAaG,IAAI;AAEzD,QAAMC,YACJhB,iBAAkBO,aAAa,OAAQlC,gBAAgB8B,OAAO,KAAK;AAErE,6BACGa,WAAS;AAAA,IACRnB;AAAAA,IACAC,WAAWY,GAAGT,QAAQgB,MAAMhB,QAAQE,OAAO,GAAGL,WAAW;AAAA,MACvD,CAACG,QAAQiB,MAAM,GAAG7B;AAAAA,MAClB,CAACY,QAAQK,MAAM,GAAGA;AAAAA,MAClB,CAACL,QAAQI,QAAQ,GAAGA;AAAAA,IAAAA,CACrB;AAAA,IAAE,GACCG;AAAAA,EAAAA,CACL;AAEL,CACF;"}

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

@@ -37,8 +37,8 @@ const HvVerticalNavigationHeader = ({
     ...others,
     children: [isOpen && headerTitle && slider && /* @__PURE__ */ jsx(HvButton, {
       icon: true,
-      variant: "secondaryGhost",
       onClick: backButtonClickHandler,
+      "aria-label": "Back",
       ...backButtonProps,
       children: /* @__PURE__ */ jsx(Backwards, {
         iconSize: "XS"
@@ -48,7 +48,6 @@ const HvVerticalNavigationHeader = ({
       children: headerTitle && slider ? headerTitle : title
     }), onCollapseButtonClick && /* @__PURE__ */ jsx(StyledCollapseButton, {
       icon: true,
-      variant: "secondaryGhost",
       onClick: onCollapseButtonClick,
       classes: {
         root: isOpen ? "" : verticalNavigationHeaderClasses.minimized

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

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

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

@@ -81,6 +81,7 @@ const HvVerticalNavigationTree = ({
   selected: selectedProp,
   defaultSelected,
   onChange,
+  sliderForwardButtonAriaLabel = "Navigate to submenu",
   ...others
 }) => {
   const [selected, setSelected] = useControlled(selectedProp, defaultSelected);
@@ -205,7 +206,8 @@ const HvVerticalNavigationTree = ({
       data: parentItem.data || withParentData,
       selected,
       onNavigateToTarget: navigateToTargetHandler,
-      onNavigateToChild: navigateToChildHandler
+      onNavigateToChild: navigateToChildHandler,
+      forwardButtonAriaLabel: sliderForwardButtonAriaLabel
     }) : /* @__PURE__ */ jsxs(HvVerticalNavigationTreeView, {
       id: setId(id, "tree"),
       className: clsx(verticalNavigationTreeClasses.list, classes == null ? void 0 : classes.list),

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

@@ -1 +1 @@
-{"version":3,"file":"Navigation.js","sources":["../../../../../src/components/VerticalNavigation/Navigation/Navigation.tsx"],"sourcesContent":["import { useCallback, useMemo, useContext, useEffect, useState } from \"react\";\n\nimport { clsx } from \"clsx\";\n\nimport uniqueId from \"lodash/uniqueId\";\n\nimport { wrapperTooltip } from \"@core/utils/wrapperTooltip\";\nimport { setId } from \"@core/utils/setId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { HvBaseProps } from \"@core/types/generic\";\n\nimport {\n  HvVerticalNavigationTreeView,\n  HvVerticalNavigationTreeViewItem,\n  NavigationMode,\n} from \"../TreeView\";\nimport verticalNavigationTreeClasses, {\n  HvVerticalNavigationTreeClasses,\n} from \"./navigationClasses\";\nimport { StyledNav } from \"./Navigation.styles\";\nimport { HvVerticalNavigationSlider } from \"../NavigationSlider\";\nimport {\n  VerticalNavigationContext,\n  NavigationData,\n} from \"../VerticalNavigationContext\";\nimport { getParentItemById } from \"../NavigationSlider/utils/NavigationSlider.utils\";\nimport { NavigationPopupContainer } from \"../NavigationPopup/NavigationPopupContainer\";\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\nconst createListHierarchy = (\n  items,\n  id,\n  classes?: HvVerticalNavigationTreeClasses,\n  mouseEnterHandler?: (event, item) => void,\n  disableTooltip = false\n) =>\n  items.map((item) => {\n    const {\n      id: itemId,\n      label: itemLabel,\n      icon,\n      data: children,\n      selectable,\n      disabled,\n      href,\n      target,\n    } = item;\n\n    const ItemText = wrapperTooltip(true, itemLabel, itemLabel);\n\n    const itemMouseEnterHandler = (event) => {\n      mouseEnterHandler?.(event, item);\n    };\n\n    return (\n      <HvVerticalNavigationTreeViewItem\n        id={setId(id, itemId)}\n        className={classes?.listItem}\n        href={href}\n        target={target}\n        key={itemId}\n        nodeId={itemId}\n        label={<ItemText />}\n        icon={icon}\n        payload={item}\n        selectable={selectable}\n        disabled={disabled}\n        onMouseEnter={itemMouseEnterHandler}\n        disableTooltip={disableTooltip}\n      >\n        {children\n          ? createListHierarchy(\n              children,\n              id,\n              classes,\n              mouseEnterHandler,\n              disableTooltip\n            )\n          : undefined}\n      </HvVerticalNavigationTreeViewItem>\n    );\n  });\n\nconst getAllParents = (items) => {\n  const parents = items.filter(\n    (item) => item.data != null && item.data.length > 0\n  );\n  const childParents = parents.flatMap((item) => getAllParents(item.data));\n\n  return [...parents, ...childParents];\n};\n\nfunction pathToElement(data, targetId) {\n  const path: string[] = [];\n\n  if (data != null && data.length > 0) {\n    for (let i = 0; i !== data.length; ++i) {\n      const item = data[i];\n      if (item.id === targetId) {\n        path.push(item.id);\n        break;\n      }\n\n      const subPaths = pathToElement(item.data, targetId);\n      if (subPaths.length > 0) {\n        path.push(item.id);\n        path.push(...subPaths);\n        break;\n      }\n    }\n  }\n\n  return path;\n}\n\nexport const HvVerticalNavigationTree = ({\n  id,\n\n  className,\n  classes,\n\n  data,\n\n  mode = \"navigation\",\n\n  collapsible = false,\n  expanded: expandedProp,\n  defaultExpanded,\n  onToggle,\n\n  selected: selectedProp,\n  defaultSelected,\n  onChange,\n\n  ...others\n}: HvVerticalNavigationTreeProps) => {\n  const [selected, setSelected] = useControlled(selectedProp, defaultSelected);\n  const [expanded, setExpanded] = useControlled(expandedProp, () => {\n    if (defaultExpanded === true) {\n      // all parent nodes will be expanded by default\n      return getAllParents(data).map((item) => item.id);\n    }\n\n    if (defaultExpanded === false) {\n      // all parent nodes will be collapsed by default\n      return [];\n    }\n\n    if (defaultExpanded == null) {\n      if (selected != null) {\n        // the path to the selected node will be expanded (default behaviour)\n        const path = pathToElement(data, selected);\n        return path.slice(0, -1);\n      }\n\n      // nothing is expanded\n      return [];\n    }\n\n    return defaultExpanded;\n  });\n\n  const {\n    isOpen,\n    useIcons,\n    slider,\n\n    parentItem,\n    setParentItem,\n    withParentData,\n    navigateToChildHandler,\n\n    setParentData,\n    setParentSelected,\n  } = useContext(VerticalNavigationContext);\n\n  const [navigationPopup, setNavigationPopup] = useState<{\n    // This value is needed to guarantee that the NavigationPopup is fully re-rendered with keeping any previous values\n    uniqueKey: string;\n    anchorEl: HTMLButtonElement | null;\n    fixedMode: boolean;\n    data: NavigationData[];\n  } | null>(null);\n\n  const handleChange = useCallback(\n    (event, selectedId, selectedItem) => {\n      if (useIcons && !isOpen && selectedItem.data) {\n        const currentEventTarget = event.currentTarget;\n        setNavigationPopup((prevState) => {\n          // We want to close the popup in case the clicked element is the same as the previous one\n          return prevState?.anchorEl === currentEventTarget\n            ? null\n            : {\n                uniqueKey: uniqueId(),\n                anchorEl: currentEventTarget,\n                fixedMode: true,\n                data: selectedItem.data,\n              };\n        });\n\n        // We need this stopPropagation or else the Popup will close due to the clickaway being triggered\n        event.stopPropagation();\n      } else {\n        setSelected(selectedId);\n        setExpanded((prevState) => {\n          if (!isOpen) {\n            return [...prevState, ...pathToElement(data, selectedId)];\n          }\n          return [...prevState];\n        });\n        setNavigationPopup(null);\n        if (onChange) {\n          onChange(event, selectedItem);\n        }\n      }\n    },\n    [onChange, setSelected, setExpanded, isOpen, useIcons, data]\n  );\n\n  const treeViewItemMouseEnterHandler = useCallback(\n    (event, item) => {\n      const isCollapsed = useIcons && !isOpen;\n\n      if (isCollapsed && item.data && !navigationPopup?.fixedMode) {\n        const currentEventTarget = event.currentTarget;\n\n        setNavigationPopup?.({\n          uniqueKey: uniqueId(),\n          anchorEl: currentEventTarget,\n          fixedMode: false,\n          data: item.data,\n        });\n      } else if (isCollapsed && !item.data && !navigationPopup?.fixedMode) {\n        setNavigationPopup(null);\n      }\n    },\n    [isOpen, useIcons, navigationPopup]\n  );\n\n  const handleToggle = useCallback(\n    (event, newExpanded) => {\n      setExpanded(newExpanded);\n\n      if (onToggle) {\n        onToggle(event, newExpanded);\n      }\n    },\n    [onToggle, setExpanded]\n  );\n\n  const children = useMemo(\n    () =>\n      data &&\n      createListHierarchy(\n        data,\n        id,\n        classes,\n        treeViewItemMouseEnterHandler,\n        navigationPopup?.fixedMode\n      ),\n    [classes, data, id, navigationPopup, treeViewItemMouseEnterHandler]\n  );\n\n  useEffect(() => {\n    if (!isOpen) {\n      setNavigationPopup?.(null);\n    }\n  }, [isOpen]);\n\n  useEffect(() => {\n    if (setParentSelected) setParentSelected(selected);\n  }, [selected, setSelected, setParentSelected]);\n\n  useEffect(() => {\n    if (setParentData) setParentData(data);\n  }, [data, setParentData]);\n\n  useEffect(() => {\n    if (\n      withParentData &&\n      selected &&\n      setParentItem &&\n      getParentItemById(withParentData, selected)\n    ) {\n      setParentItem(getParentItemById(withParentData, selected));\n    }\n  }, [withParentData, selected, setParentItem]);\n\n  // navigation slider\n  const navigateToTargetHandler = (event, selectedItem) => {\n    handleChange(event, selectedItem.id, selectedItem);\n  };\n\n  const handleNavigationPopupClose = () => {\n    setNavigationPopup(null);\n  };\n\n  const handleStyledNavMouseLeave = () => {\n    if (useIcons && !isOpen && !navigationPopup?.fixedMode) {\n      setNavigationPopup(null);\n    }\n  };\n\n  const handleNavigationPopupMouseLeave = () => {\n    if (!navigationPopup?.fixedMode) {\n      handleNavigationPopupClose();\n    }\n  };\n\n  const handleNavigationPopupChange = (event, selectedItem) => {\n    handleChange(event, selectedItem.id, selectedItem);\n  };\n\n  return (\n    <StyledNav\n      id={id}\n      className={clsx(\n        className,\n        verticalNavigationTreeClasses.root,\n        classes?.root,\n        !isOpen &&\n          !useIcons &&\n          clsx(verticalNavigationTreeClasses.collapsed, classes?.collapsed)\n      )}\n      onMouseLeave={handleStyledNavMouseLeave}\n      {...others}\n    >\n      {slider ? (\n        <HvVerticalNavigationSlider\n          data={parentItem.data || withParentData}\n          selected={selected}\n          onNavigateToTarget={navigateToTargetHandler}\n          onNavigateToChild={navigateToChildHandler}\n        />\n      ) : (\n        <HvVerticalNavigationTreeView\n          id={setId(id, \"tree\")}\n          className={clsx(verticalNavigationTreeClasses.list, classes?.list)}\n          selectable\n          mode={mode}\n          collapsible={collapsible}\n          selected={selected}\n          onChange={handleChange}\n          expanded={expanded}\n          onToggle={handleToggle}\n        >\n          {useIcons && !isOpen && navigationPopup && (\n            <NavigationPopupContainer\n              anchorEl={navigationPopup.anchorEl}\n              onClose={handleNavigationPopupClose}\n              key={navigationPopup.uniqueKey}\n              className={clsx(\n                verticalNavigationTreeClasses.navigationPopup,\n                classes?.navigationPopup\n              )}\n            >\n              <HvVerticalNavigationTree\n                className={clsx(verticalNavigationTreeClasses.popup)}\n                id={setId(id, \"navigation-popup-tree\")}\n                collapsible\n                defaultExpanded\n                selected={selected}\n                data={navigationPopup.data}\n                onChange={handleNavigationPopupChange}\n                onMouseLeave={handleNavigationPopupMouseLeave}\n              />\n            </NavigationPopupContainer>\n          )}\n          {children}\n        </HvVerticalNavigationTreeView>\n      )}\n    </StyledNav>\n  );\n};\n"],"names":["createListHierarchy","items","id","classes","mouseEnterHandler","disableTooltip","map","item","itemId","label","itemLabel","icon","data","children","selectable","disabled","href","target","ItemText","wrapperTooltip","itemMouseEnterHandler","event","HvVerticalNavigationTreeViewItem","setId","className","listItem","nodeId","_jsx","payload","onMouseEnter","undefined","getAllParents","parents","filter","length","childParents","flatMap","pathToElement","targetId","path","i","push","subPaths","HvVerticalNavigationTree","mode","collapsible","expanded","expandedProp","defaultExpanded","onToggle","selected","selectedProp","defaultSelected","onChange","others","setSelected","useControlled","setExpanded","slice","isOpen","useIcons","slider","parentItem","setParentItem","withParentData","navigateToChildHandler","setParentData","setParentSelected","useContext","VerticalNavigationContext","navigationPopup","setNavigationPopup","useState","handleChange","useCallback","selectedId","selectedItem","currentEventTarget","currentTarget","prevState","anchorEl","uniqueKey","uniqueId","fixedMode","stopPropagation","treeViewItemMouseEnterHandler","isCollapsed","handleToggle","newExpanded","useMemo","useEffect","getParentItemById","navigateToTargetHandler","handleNavigationPopupClose","handleStyledNavMouseLeave","handleNavigationPopupMouseLeave","handleNavigationPopupChange","StyledNav","clsx","verticalNavigationTreeClasses","root","collapsed","onMouseLeave","HvVerticalNavigationSlider","onNavigateToTarget","onNavigateToChild","_jsxs","HvVerticalNavigationTreeView","list","NavigationPopupContainer","onClose","popup"],"mappings":"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"}
+{"version":3,"file":"Navigation.js","sources":["../../../../../src/components/VerticalNavigation/Navigation/Navigation.tsx"],"sourcesContent":["import { useCallback, useMemo, useContext, useEffect, useState } from \"react\";\n\nimport { clsx } from \"clsx\";\n\nimport uniqueId from \"lodash/uniqueId\";\n\nimport { wrapperTooltip } from \"@core/utils/wrapperTooltip\";\nimport { setId } from \"@core/utils/setId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { HvBaseProps } from \"@core/types/generic\";\n\nimport {\n  HvVerticalNavigationTreeView,\n  HvVerticalNavigationTreeViewItem,\n  NavigationMode,\n} from \"../TreeView\";\nimport verticalNavigationTreeClasses, {\n  HvVerticalNavigationTreeClasses,\n} from \"./navigationClasses\";\nimport { StyledNav } from \"./Navigation.styles\";\nimport { HvVerticalNavigationSlider } from \"../NavigationSlider\";\nimport {\n  VerticalNavigationContext,\n  NavigationData,\n} from \"../VerticalNavigationContext\";\nimport { getParentItemById } from \"../NavigationSlider/utils/NavigationSlider.utils\";\nimport { NavigationPopupContainer } from \"../NavigationPopup/NavigationPopupContainer\";\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  /** Aria label to apply to the navigate to submenu button on the navigation slider list items. */\n  sliderForwardButtonAriaLabel?: string;\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  sliderForwardButtonAriaLabel = \"Navigate to submenu\",\n\n  ...others\n}: HvVerticalNavigationTreeProps) => {\n  const [selected, setSelected] = useControlled(selectedProp, defaultSelected);\n  const [expanded, setExpanded] = useControlled(expandedProp, () => {\n    if (defaultExpanded === true) {\n      // all parent nodes will be expanded by default\n      return getAllParents(data).map((item) => item.id);\n    }\n\n    if (defaultExpanded === false) {\n      // all parent nodes will be collapsed by default\n      return [];\n    }\n\n    if (defaultExpanded == null) {\n      if (selected != null) {\n        // the path to the selected node will be expanded (default behaviour)\n        const path = pathToElement(data, selected);\n        return path.slice(0, -1);\n      }\n\n      // nothing is expanded\n      return [];\n    }\n\n    return defaultExpanded;\n  });\n\n  const {\n    isOpen,\n    useIcons,\n    slider,\n\n    parentItem,\n    setParentItem,\n    withParentData,\n    navigateToChildHandler,\n\n    setParentData,\n    setParentSelected,\n  } = useContext(VerticalNavigationContext);\n\n  const [navigationPopup, setNavigationPopup] = useState<{\n    // This value is needed to guarantee that the NavigationPopup is fully re-rendered with keeping any previous values\n    uniqueKey: string;\n    anchorEl: HTMLButtonElement | null;\n    fixedMode: boolean;\n    data: NavigationData[];\n  } | null>(null);\n\n  const handleChange = useCallback(\n    (event, selectedId, selectedItem) => {\n      if (useIcons && !isOpen && selectedItem.data) {\n        const currentEventTarget = event.currentTarget;\n        setNavigationPopup((prevState) => {\n          // We want to close the popup in case the clicked element is the same as the previous one\n          return prevState?.anchorEl === currentEventTarget\n            ? null\n            : {\n                uniqueKey: uniqueId(),\n                anchorEl: currentEventTarget,\n                fixedMode: true,\n                data: selectedItem.data,\n              };\n        });\n\n        // We need this stopPropagation or else the Popup will close due to the clickaway being triggered\n        event.stopPropagation();\n      } else {\n        setSelected(selectedId);\n        setExpanded((prevState) => {\n          if (!isOpen) {\n            return [...prevState, ...pathToElement(data, selectedId)];\n          }\n          return [...prevState];\n        });\n        setNavigationPopup(null);\n        if (onChange) {\n          onChange(event, selectedItem);\n        }\n      }\n    },\n    [onChange, setSelected, setExpanded, isOpen, useIcons, data]\n  );\n\n  const treeViewItemMouseEnterHandler = useCallback(\n    (event, item) => {\n      const isCollapsed = useIcons && !isOpen;\n\n      if (isCollapsed && item.data && !navigationPopup?.fixedMode) {\n        const currentEventTarget = event.currentTarget;\n\n        setNavigationPopup?.({\n          uniqueKey: uniqueId(),\n          anchorEl: currentEventTarget,\n          fixedMode: false,\n          data: item.data,\n        });\n      } else if (isCollapsed && !item.data && !navigationPopup?.fixedMode) {\n        setNavigationPopup(null);\n      }\n    },\n    [isOpen, useIcons, navigationPopup]\n  );\n\n  const handleToggle = useCallback(\n    (event, newExpanded) => {\n      setExpanded(newExpanded);\n\n      if (onToggle) {\n        onToggle(event, newExpanded);\n      }\n    },\n    [onToggle, setExpanded]\n  );\n\n  const children = useMemo(\n    () =>\n      data &&\n      createListHierarchy(\n        data,\n        id,\n        classes,\n        treeViewItemMouseEnterHandler,\n        navigationPopup?.fixedMode\n      ),\n    [classes, data, id, navigationPopup, treeViewItemMouseEnterHandler]\n  );\n\n  useEffect(() => {\n    if (!isOpen) {\n      setNavigationPopup?.(null);\n    }\n  }, [isOpen]);\n\n  useEffect(() => {\n    if (setParentSelected) setParentSelected(selected);\n  }, [selected, setSelected, setParentSelected]);\n\n  useEffect(() => {\n    if (setParentData) setParentData(data);\n  }, [data, setParentData]);\n\n  useEffect(() => {\n    if (\n      withParentData &&\n      selected &&\n      setParentItem &&\n      getParentItemById(withParentData, selected)\n    ) {\n      setParentItem(getParentItemById(withParentData, selected));\n    }\n  }, [withParentData, selected, setParentItem]);\n\n  // navigation slider\n  const navigateToTargetHandler = (event, selectedItem) => {\n    handleChange(event, selectedItem.id, selectedItem);\n  };\n\n  const handleNavigationPopupClose = () => {\n    setNavigationPopup(null);\n  };\n\n  const handleStyledNavMouseLeave = () => {\n    if (useIcons && !isOpen && !navigationPopup?.fixedMode) {\n      setNavigationPopup(null);\n    }\n  };\n\n  const handleNavigationPopupMouseLeave = () => {\n    if (!navigationPopup?.fixedMode) {\n      handleNavigationPopupClose();\n    }\n  };\n\n  const handleNavigationPopupChange = (event, selectedItem) => {\n    handleChange(event, selectedItem.id, selectedItem);\n  };\n\n  return (\n    <StyledNav\n      id={id}\n      className={clsx(\n        className,\n        verticalNavigationTreeClasses.root,\n        classes?.root,\n        !isOpen &&\n          !useIcons &&\n          clsx(verticalNavigationTreeClasses.collapsed, classes?.collapsed)\n      )}\n      onMouseLeave={handleStyledNavMouseLeave}\n      {...others}\n    >\n      {slider ? (\n        <HvVerticalNavigationSlider\n          data={parentItem.data || withParentData}\n          selected={selected}\n          onNavigateToTarget={navigateToTargetHandler}\n          onNavigateToChild={navigateToChildHandler}\n          forwardButtonAriaLabel={sliderForwardButtonAriaLabel}\n        />\n      ) : (\n        <HvVerticalNavigationTreeView\n          id={setId(id, \"tree\")}\n          className={clsx(verticalNavigationTreeClasses.list, classes?.list)}\n          selectable\n          mode={mode}\n          collapsible={collapsible}\n          selected={selected}\n          onChange={handleChange}\n          expanded={expanded}\n          onToggle={handleToggle}\n        >\n          {useIcons && !isOpen && navigationPopup && (\n            <NavigationPopupContainer\n              anchorEl={navigationPopup.anchorEl}\n              onClose={handleNavigationPopupClose}\n              key={navigationPopup.uniqueKey}\n              className={clsx(\n                verticalNavigationTreeClasses.navigationPopup,\n                classes?.navigationPopup\n              )}\n            >\n              <HvVerticalNavigationTree\n                className={clsx(verticalNavigationTreeClasses.popup)}\n                id={setId(id, \"navigation-popup-tree\")}\n                collapsible\n                defaultExpanded\n                selected={selected}\n                data={navigationPopup.data}\n                onChange={handleNavigationPopupChange}\n                onMouseLeave={handleNavigationPopupMouseLeave}\n              />\n            </NavigationPopupContainer>\n          )}\n          {children}\n        </HvVerticalNavigationTreeView>\n      )}\n    </StyledNav>\n  );\n};\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","sliderForwardButtonAriaLabel","others","setSelected","useControlled","setExpanded","slice","isOpen","useIcons","slider","parentItem","setParentItem","withParentData","navigateToChildHandler","setParentData","setParentSelected","useContext","VerticalNavigationContext","navigationPopup","setNavigationPopup","useState","handleChange","useCallback","selectedId","selectedItem","currentEventTarget","currentTarget","prevState","anchorEl","uniqueKey","uniqueId","fixedMode","stopPropagation","treeViewItemMouseEnterHandler","isCollapsed","handleToggle","newExpanded","useMemo","useEffect","getParentItemById","navigateToTargetHandler","handleNavigationPopupClose","handleStyledNavMouseLeave","handleNavigationPopupMouseLeave","handleNavigationPopupChange","StyledNav","clsx","verticalNavigationTreeClasses","root","collapsed","onMouseLeave","HvVerticalNavigationSlider","onNavigateToTarget","onNavigateToChild","forwardButtonAriaLabel","_jsxs","HvVerticalNavigationTreeView","list","NavigationPopupContainer","onClose","popup"],"mappings":"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"}

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

@@ -12,7 +12,8 @@ const HvVerticalNavigationSlider = ({
   data,
   selected,
   onNavigateToTarget,
-  onNavigateToChild
+  onNavigateToChild,
+  forwardButtonAriaLabel = "Navigate to submenu"
 }) => {
   return /* @__PURE__ */ jsx(HvListContainer, {
     interactive: true,
@@ -32,11 +33,11 @@ const HvVerticalNavigationSlider = ({
         children: item.icon
       }) : void 0,
       endAdornment: item.data && item.data.length > 0 ? /* @__PURE__ */ jsx(HvButton, {
-        variant: "secondaryGhost",
         icon: true,
         onClick: (event) => {
           onNavigateToChild == null ? void 0 : onNavigateToChild(event, item);
         },
+        "aria-label": forwardButtonAriaLabel,
         children: /* @__PURE__ */ jsx(DropRightXS, {})
       }) : void 0,
       children: /* @__PURE__ */ jsx(HvOverflowTooltip, {

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationSlider.js","sources":["../../../../../src/components/VerticalNavigation/NavigationSlider/NavigationSlider.tsx"],"sourcesContent":["import { DropRightXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { clsx } from \"clsx\";\n\nimport { HvButton } from \"@core/components/Button\";\nimport { HvListContainer } from \"@core/components/ListContainer\";\nimport { HvOverflowTooltip } from \"@core/components/OverflowTooltip\";\n\nimport { StyledListItem } from \"./NavigationSlider.styles\";\nimport verticalNavigationSliderClasses, {\n  HvVerticalNavigationSliderClasses,\n} from \"./navigationSliderClasses\";\nimport { NavigationData } from \"../VerticalNavigationContext\";\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={item.icon ? <div>{item.icon}</div> : undefined}\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","_jsx","endAdornment","length","HvButton","variant","DropRightXS","HvOverflowTooltip"],"mappings":";;;;;;;;AAsDO,MAAMA,6BAA6BA,CAAC;AAAA,EACzCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAC+B,MAAM;AACrC,6BACGC,iBAAe;AAAA,IAACC,aAAW;AAAA,IAACP;AAAAA,IAAOQ,UACjCN,QACCA,KAAKO,IAAKC,CAAAA,6BACPC,gBAAc;AAAA,MAEbV,SAAS;AAAA,QACPW,MAAMX,mCAASW;AAAAA,QACfT,UAAUU,KACRZ,mCAASa,kBACTC,gCAAgCD,gBAClC;AAAA,MACF;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,gBAAgBX,KAAKY,OAAOC,oBAAA,OAAA;AAAA,QAAAf,UAAME,KAAKY;AAAAA,MAAU,CAAA,IAAIF;AAAAA,MACrDI,cACEd,KAAKR,QAAQQ,KAAKR,KAAKuB,SAAS,wBAC7BC,UAAQ;AAAA,QACPC,SAAQ;AAAA,QACRL,MAAI;AAAA,QACJN,SAAUC,CAAU,UAAA;AAClBZ,iEAAoBY,OAAOP;AAAAA,QAC7B;AAAA,QAAEF,UAEFe,oBAACK,aAAa,EAAA;AAAA,MACN,CAAA,IACRR;AAAAA,MACLZ,8BAEAqB,mBAAiB;AAAA,QAAC3B,MAAMQ,KAAKQ;AAAAA,MAAAA,CAAQ;AAAA,IAAA,GA/BjCR,KAAKV,EAgCI,CACjB;AAAA,EAAA,CACY;AAErB;"}
+{"version":3,"file":"NavigationSlider.js","sources":["../../../../../src/components/VerticalNavigation/NavigationSlider/NavigationSlider.tsx"],"sourcesContent":["import { DropRightXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { clsx } from \"clsx\";\n\nimport { HvButton } from \"@core/components/Button\";\nimport { HvListContainer } from \"@core/components/ListContainer\";\nimport { HvOverflowTooltip } from \"@core/components/OverflowTooltip\";\n\nimport { StyledListItem } from \"./NavigationSlider.styles\";\nimport verticalNavigationSliderClasses, {\n  HvVerticalNavigationSliderClasses,\n} from \"./navigationSliderClasses\";\nimport { NavigationData } from \"../VerticalNavigationContext\";\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  /** Aria label to apply to the navigate to submenu button on the list items. */\n  forwardButtonAriaLabel?: string;\n}\n\nexport const HvVerticalNavigationSlider = ({\n  id,\n  classes,\n  data,\n  selected,\n  onNavigateToTarget,\n  onNavigateToChild,\n  forwardButtonAriaLabel = \"Navigate to submenu\",\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={item.icon ? <div>{item.icon}</div> : undefined}\n            endAdornment={\n              item.data && item.data.length > 0 ? (\n                <HvButton\n                  icon\n                  onClick={(event) => {\n                    onNavigateToChild?.(event, item);\n                  }}\n                  aria-label={forwardButtonAriaLabel}\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","forwardButtonAriaLabel","HvListContainer","interactive","children","map","item","StyledListItem","root","clsx","listItemSelected","verticalNavigationSliderClasses","onClick","event","label","href","undefined","startAdornment","icon","_jsx","endAdornment","length","HvButton","DropRightXS","HvOverflowTooltip"],"mappings":";;;;;;;;AAwDO,MAAMA,6BAA6BA,CAAC;AAAA,EACzCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,yBAAyB;AACM,MAAM;AACrC,6BACGC,iBAAe;AAAA,IAACC,aAAW;AAAA,IAACR;AAAAA,IAAOS,UACjCP,QACCA,KAAKQ,IAAKC,CAAAA,6BACPC,gBAAc;AAAA,MAEbX,SAAS;AAAA,QACPY,MAAMZ,mCAASY;AAAAA,QACfV,UAAUW,KACRb,mCAASc,kBACTC,gCAAgCD,gBAClC;AAAA,MACF;AAAA,MACAE,SAAUC,CAAU,UAAA;AAClBd,iEAAqBc,OAAOP;AAAAA,MAC9B;AAAA,MACA,cAAYA,KAAKQ;AAAAA,MACjB,gBACEhB,aAAaQ,KAAKX,KAAMW,KAAKS,OAAO,SAAS,OAAQC;AAAAA,MAEvDlB,UAAUA,aAAaQ,KAAKX;AAAAA,MAC5BsB,gBAAgBX,KAAKY,OAAOC,oBAAA,OAAA;AAAA,QAAAf,UAAME,KAAKY;AAAAA,MAAU,CAAA,IAAIF;AAAAA,MACrDI,cACEd,KAAKT,QAAQS,KAAKT,KAAKwB,SAAS,wBAC7BC,UAAQ;AAAA,QACPJ,MAAI;AAAA,QACJN,SAAUC,CAAU,UAAA;AAClBb,iEAAoBa,OAAOP;AAAAA,QAC7B;AAAA,QACA,cAAYL;AAAAA,QAAuBG,UAEnCe,oBAACI,aAAa,EAAA;AAAA,MACN,CAAA,IACRP;AAAAA,MACLZ,8BAEAoB,mBAAiB;AAAA,QAAC3B,MAAMS,KAAKQ;AAAAA,MAAAA,CAAQ;AAAA,IAAA,GA/BjCR,KAAKX,EAgCI,CACjB;AAAA,EAAA,CACY;AAErB;"}

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

@@ -1,4 +1,5 @@
 import { clsx } from "clsx";
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { useState, useMemo, useEffect, useCallback } from "react";
 import { StyledRoot } from "./VerticalNavigation.styles.js";
 import verticalNavigationClasses from "./verticalNavigationClasses.js";
@@ -6,16 +7,17 @@ import { VerticalNavigationContext } from "./VerticalNavigationContext.js";
 import { hasChildNavigationItems } from "./utils/VerticalNavigation.utils.js";
 import { jsx } from "@emotion/react/jsx-runtime";
 import { fillDataWithParentId, getParentItemById, getNavigationItemById } from "./NavigationSlider/utils/NavigationSlider.utils.js";
-const HvVerticalNavigation = ({
-  id,
-  className,
-  classes,
-  children,
-  open = true,
-  slider = false,
-  useIcons = false,
-  ...others
-}) => {
+const HvVerticalNavigation = (props) => {
+  const {
+    id,
+    className,
+    classes,
+    children,
+    open = true,
+    slider = false,
+    useIcons = false,
+    ...others
+  } = useDefaultProps("HvVerticalNavigation", props);
   const [parentData, setParentData] = useState([]);
   const [parentSelected, setParentSelected] = useState();
   const [headerTitle, setHeaderTitle] = useState();

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

@@ -1 +1 @@
-{"version":3,"file":"VerticalNavigation.js","sources":["../../../../src/components/VerticalNavigation/VerticalNavigation.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\n\nimport { useCallback, useEffect, useMemo, useState } from \"react\";\n\nimport { StyledRoot } from \"./VerticalNavigation.styles\";\nimport verticalNavigationClasses, {\n  HvVerticalNavigationClasses,\n} from \"./verticalNavigationClasses\";\nimport {\n  VerticalNavigationContext,\n  NavigationData,\n} from \"./VerticalNavigationContext\";\nimport {\n  fillDataWithParentId,\n  getNavigationItemById,\n  getParentItemById,\n} from \"./NavigationSlider/utils\";\nimport { hasChildNavigationItems } from \"./utils/VerticalNavigation.utils\";\n\nexport interface HvVerticalNavigationProps {\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 to the component.\n   */\n  classes?: HvVerticalNavigationClasses;\n  /**\n   * Current State of the Vertical Navigation Collapse\n   */\n  open?: boolean;\n  /**\n   * Collpased Mode for the Vertical Navigation, the default value is \"simple\".\n   *\n   * @deprecated - `useIcons` property should be used instead.\n   */\n  collapsedMode?: HvVerticalNavigationMode;\n  /**\n   * Boolean to determine if treeview is in slider mode (for mobile navigation), the default value is false.\n   */\n  slider?: boolean;\n  /**\n   * The content inside the actions container.\n   */\n  children?: React.ReactNode;\n  /**\n   * Boolean to determine if icons should be displayed in the navigation menu.\n   * When `true` a icon will always be displayed, if no icon is provided the first letter of the label will be\n   * displayed inside an Avatar component.\n   * When `false` no icons will be shown, even if an icon is provided.\n   */\n  useIcons?: boolean;\n}\n\n/**\n * Navigation enables users to move through an app to complete tasks.\n *\n * It is recommended to use vertical navigation when your application requires global navigation that is displayed on the left.\n * While vertical navigation menus generally consume more space than their horizontal counterparts, they have become more popular as desktop monitors move to wide-screen formats.\n *\n * Although both the hierarchically organized data and the visual style resemble a treeview-like structure, the [Treeview Design Pattern](https://w3c.github.io/aria-practices/#TreeView)\n * isn't necessarily the most appropriate.\n *\n * The tree role provides complex functionality that is not needed for typical site navigation, and changes the most common keyboard navigation using TAB.\n *\n * The [Disclosure Design Pattern](https://w3c.github.io/aria-practices/#disclosure) is more suited for typical site navigation, with expandable groups of links.\n * However it can be tedious to TAB through all navigation items to reach the actions panel.\n *\n * Both modes are available via the `mode` property and each app should choose the most appropriate.\n */\nexport const HvVerticalNavigation = ({\n  id,\n  className,\n  classes,\n\n  children,\n\n  open = true,\n\n  slider = false,\n\n  useIcons = false,\n\n  ...others\n}: HvVerticalNavigationProps) => {\n  const [parentData, setParentData] = useState<NavigationData[]>([]);\n\n  const [parentSelected, setParentSelected] = useState();\n\n  const [headerTitle, setHeaderTitle] = useState<string | undefined>();\n\n  // navigationSlider\n  const withParentData = useMemo(\n    () => fillDataWithParentId(parentData),\n    [parentData]\n  );\n\n  const initialParentItem = useMemo(\n    () => getParentItemById(withParentData, parentSelected),\n    [withParentData, parentSelected]\n  );\n\n  const [parentItem, setParentItem] = useState(initialParentItem);\n\n  const hasAnyChildWithData = useMemo(\n    () => hasChildNavigationItems(parentData),\n    [parentData]\n  );\n\n  useEffect(\n    () => setHeaderTitle(parentItem?.label),\n    [parentItem, setParentItem]\n  );\n\n  const navigateToParentHandler = useCallback(() => {\n    setParentItem(getParentItemById(withParentData, parentItem.id));\n  }, [parentItem, setParentItem, withParentData]);\n\n  const navigateToChildHandler = useCallback(\n    (event, item) => {\n      setParentItem(getNavigationItemById(withParentData, item.id));\n      event.stopPropagation();\n    },\n    [setParentItem, withParentData]\n  );\n\n  const value = useMemo(\n    () => ({\n      isOpen: open,\n      useIcons,\n      slider,\n      headerTitle,\n      setHeaderTitle,\n\n      parentItem,\n      setParentItem,\n      withParentData,\n      navigateToChildHandler,\n      navigateToParentHandler,\n\n      parentData,\n      setParentData,\n      parentSelected,\n      setParentSelected,\n      hasAnyChildWithData,\n    }),\n    [\n      open,\n      useIcons,\n      slider,\n      headerTitle,\n      setHeaderTitle,\n      parentItem,\n      setParentItem,\n      withParentData,\n      navigateToChildHandler,\n      navigateToParentHandler,\n      hasAnyChildWithData,\n      parentData,\n      parentSelected,\n    ]\n  );\n\n  const content = (\n    <VerticalNavigationContext.Provider value={value}>\n      <StyledRoot\n        id={id}\n        className={clsx(\n          className,\n          verticalNavigationClasses.root,\n          classes?.root,\n          !open && verticalNavigationClasses.collapsed,\n          slider && verticalNavigationClasses.slider,\n          classes?.collapsed\n        )}\n        hasAnyChildWithData={hasAnyChildWithData}\n        {...others}\n      >\n        {children}\n      </StyledRoot>\n    </VerticalNavigationContext.Provider>\n  );\n\n  return content;\n};\n\nexport type HvVerticalNavigationMode = \"icon\" | \"simple\";\n\nexport type HvVerticalNavigationPosition =\n  | \"static\"\n  | \"relative\"\n  | \"fixed\"\n  | \"absolute\";\n"],"names":["HvVerticalNavigation","id","className","classes","children","open","slider","useIcons","others","parentData","setParentData","useState","parentSelected","setParentSelected","headerTitle","setHeaderTitle","withParentData","useMemo","fillDataWithParentId","initialParentItem","getParentItemById","parentItem","setParentItem","hasAnyChildWithData","hasChildNavigationItems","label","navigateToParentHandler","useCallback","navigateToChildHandler","event","item","getNavigationItemById","stopPropagation","value","isOpen","content","VerticalNavigationContext","Provider","StyledRoot","clsx","verticalNavigationClasses","root","collapsed"],"mappings":";;;;;;;;AA2EO,MAAMA,uBAAuBA,CAAC;AAAA,EACnCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EAEAC;AAAAA,EAEAC,OAAO;AAAA,EAEPC,SAAS;AAAA,EAETC,WAAW;AAAA,EAEX,GAAGC;AACsB,MAAM;AAC/B,QAAM,CAACC,YAAYC,aAAa,IAAIC,SAA2B,CAAE,CAAA;AAEjE,QAAM,CAACC,gBAAgBC,iBAAiB,IAAIF,SAAS;AAErD,QAAM,CAACG,aAAaC,cAAc,IAAIJ,SAA6B;AAG7DK,QAAAA,iBAAiBC,QACrB,MAAMC,qBAAqBT,UAAU,GACrC,CAACA,UAAU,CACb;AAEMU,QAAAA,oBAAoBF,QACxB,MAAMG,kBAAkBJ,gBAAgBJ,cAAc,GACtD,CAACI,gBAAgBJ,cAAc,CACjC;AAEA,QAAM,CAACS,YAAYC,aAAa,IAAIX,SAASQ,iBAAiB;AAExDI,QAAAA,sBAAsBN,QAC1B,MAAMO,wBAAwBf,UAAU,GACxC,CAACA,UAAU,CACb;AAGE,YAAA,MAAMM,eAAeM,yCAAYI,KAAK,GACtC,CAACJ,YAAYC,aAAa,CAC5B;AAEMI,QAAAA,0BAA0BC,YAAY,MAAM;AAChDL,kBAAcF,kBAAkBJ,gBAAgBK,WAAWpB,EAAE,CAAC;AAAA,EAC7D,GAAA,CAACoB,YAAYC,eAAeN,cAAc,CAAC;AAE9C,QAAMY,yBAAyBD,YAC7B,CAACE,OAAOC,SAAS;AACfR,kBAAcS,sBAAsBf,gBAAgBc,KAAK7B,EAAE,CAAC;AAC5D4B,UAAMG,gBAAgB;AAAA,EAAA,GAExB,CAACV,eAAeN,cAAc,CAChC;AAEMiB,QAAAA,QAAQhB,QACZ,OAAO;AAAA,IACLiB,QAAQ7B;AAAAA,IACRE;AAAAA,IACAD;AAAAA,IACAQ;AAAAA,IACAC;AAAAA,IAEAM;AAAAA,IACAC;AAAAA,IACAN;AAAAA,IACAY;AAAAA,IACAF;AAAAA,IAEAjB;AAAAA,IACAC;AAAAA,IACAE;AAAAA,IACAC;AAAAA,IACAU;AAAAA,EAAAA,IAEF,CACElB,MACAE,UACAD,QACAQ,aACAC,gBACAM,YACAC,eACAN,gBACAY,wBACAF,yBACAH,qBACAd,YACAG,cAAc,CAElB;AAEMuB,QAAAA,UACHC,oBAAAA,0BAA0BC,UAAQ;AAAA,IAACJ;AAAAA,IAAa7B,8BAC9CkC,YAAU;AAAA,MACTrC;AAAAA,MACAC,WAAWqC,KACTrC,WACAsC,0BAA0BC,MAC1BtC,mCAASsC,MACT,CAACpC,QAAQmC,0BAA0BE,WACnCpC,UAAUkC,0BAA0BlC,QACpCH,mCAASuC,SACX;AAAA,MACAnB;AAAAA,MAAyC,GACrCf;AAAAA,MAAMJ;AAAAA,IAAAA,CAGA;AAAA,EAAA,CACsB;AAG/B+B,SAAAA;AACT;"}
+{"version":3,"file":"VerticalNavigation.js","sources":["../../../../src/components/VerticalNavigation/VerticalNavigation.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { useCallback, useEffect, useMemo, useState } from \"react\";\n\nimport { StyledRoot } from \"./VerticalNavigation.styles\";\nimport verticalNavigationClasses, {\n  HvVerticalNavigationClasses,\n} from \"./verticalNavigationClasses\";\nimport {\n  VerticalNavigationContext,\n  NavigationData,\n} from \"./VerticalNavigationContext\";\nimport {\n  fillDataWithParentId,\n  getNavigationItemById,\n  getParentItemById,\n} from \"./NavigationSlider/utils\";\nimport { hasChildNavigationItems } from \"./utils/VerticalNavigation.utils\";\n\nexport interface HvVerticalNavigationProps {\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 to the component.\n   */\n  classes?: HvVerticalNavigationClasses;\n  /**\n   * Current State of the Vertical Navigation Collapse\n   */\n  open?: boolean;\n  /**\n   * Collpased Mode for the Vertical Navigation, the default value is \"simple\".\n   *\n   * @deprecated - `useIcons` property should be used instead.\n   */\n  collapsedMode?: HvVerticalNavigationMode;\n  /**\n   * Boolean to determine if treeview is in slider mode (for mobile navigation), the default value is false.\n   */\n  slider?: boolean;\n  /**\n   * The content inside the actions container.\n   */\n  children?: React.ReactNode;\n  /**\n   * Boolean to determine if icons should be displayed in the navigation menu.\n   * When `true` a icon will always be displayed, if no icon is provided the first letter of the label will be\n   * displayed inside an Avatar component.\n   * When `false` no icons will be shown, even if an icon is provided.\n   */\n  useIcons?: boolean;\n}\n\n/**\n * Navigation enables users to move through an app to complete tasks.\n *\n * It is recommended to use vertical navigation when your application requires global navigation that is displayed on the left.\n * While vertical navigation menus generally consume more space than their horizontal counterparts, they have become more popular as desktop monitors move to wide-screen formats.\n *\n * Although both the hierarchically organized data and the visual style resemble a treeview-like structure, the [Treeview Design Pattern](https://w3c.github.io/aria-practices/#TreeView)\n * isn't necessarily the most appropriate.\n *\n * The tree role provides complex functionality that is not needed for typical site navigation, and changes the most common keyboard navigation using TAB.\n *\n * The [Disclosure Design Pattern](https://w3c.github.io/aria-practices/#disclosure) is more suited for typical site navigation, with expandable groups of links.\n * However it can be tedious to TAB through all navigation items to reach the actions panel.\n *\n * Both modes are available via the `mode` property and each app should choose the most appropriate.\n */\nexport const HvVerticalNavigation = (props: HvVerticalNavigationProps) => {\n  const {\n    id,\n    className,\n    classes,\n\n    children,\n\n    open = true,\n\n    slider = false,\n\n    useIcons = false,\n\n    ...others\n  } = useDefaultProps(\"HvVerticalNavigation\", props);\n\n  const [parentData, setParentData] = useState<NavigationData[]>([]);\n\n  const [parentSelected, setParentSelected] = useState();\n\n  const [headerTitle, setHeaderTitle] = useState<string | undefined>();\n\n  // navigationSlider\n  const withParentData = useMemo(\n    () => fillDataWithParentId(parentData),\n    [parentData]\n  );\n\n  const initialParentItem = useMemo(\n    () => getParentItemById(withParentData, parentSelected),\n    [withParentData, parentSelected]\n  );\n\n  const [parentItem, setParentItem] = useState(initialParentItem);\n\n  const hasAnyChildWithData = useMemo(\n    () => hasChildNavigationItems(parentData),\n    [parentData]\n  );\n\n  useEffect(\n    () => setHeaderTitle(parentItem?.label),\n    [parentItem, setParentItem]\n  );\n\n  const navigateToParentHandler = useCallback(() => {\n    setParentItem(getParentItemById(withParentData, parentItem.id));\n  }, [parentItem, setParentItem, withParentData]);\n\n  const navigateToChildHandler = useCallback(\n    (event, item) => {\n      setParentItem(getNavigationItemById(withParentData, item.id));\n      event.stopPropagation();\n    },\n    [setParentItem, withParentData]\n  );\n\n  const value = useMemo(\n    () => ({\n      isOpen: open,\n      useIcons,\n      slider,\n      headerTitle,\n      setHeaderTitle,\n\n      parentItem,\n      setParentItem,\n      withParentData,\n      navigateToChildHandler,\n      navigateToParentHandler,\n\n      parentData,\n      setParentData,\n      parentSelected,\n      setParentSelected,\n      hasAnyChildWithData,\n    }),\n    [\n      open,\n      useIcons,\n      slider,\n      headerTitle,\n      setHeaderTitle,\n      parentItem,\n      setParentItem,\n      withParentData,\n      navigateToChildHandler,\n      navigateToParentHandler,\n      hasAnyChildWithData,\n      parentData,\n      parentSelected,\n    ]\n  );\n\n  const content = (\n    <VerticalNavigationContext.Provider value={value}>\n      <StyledRoot\n        id={id}\n        className={clsx(\n          className,\n          verticalNavigationClasses.root,\n          classes?.root,\n          !open && verticalNavigationClasses.collapsed,\n          slider && verticalNavigationClasses.slider,\n          classes?.collapsed\n        )}\n        hasAnyChildWithData={hasAnyChildWithData}\n        {...others}\n      >\n        {children}\n      </StyledRoot>\n    </VerticalNavigationContext.Provider>\n  );\n\n  return content;\n};\n\nexport type HvVerticalNavigationMode = \"icon\" | \"simple\";\n\nexport type HvVerticalNavigationPosition =\n  | \"static\"\n  | \"relative\"\n  | \"fixed\"\n  | \"absolute\";\n"],"names":["HvVerticalNavigation","props","id","className","classes","children","open","slider","useIcons","others","useDefaultProps","parentData","setParentData","useState","parentSelected","setParentSelected","headerTitle","setHeaderTitle","withParentData","useMemo","fillDataWithParentId","initialParentItem","getParentItemById","parentItem","setParentItem","hasAnyChildWithData","hasChildNavigationItems","label","navigateToParentHandler","useCallback","navigateToChildHandler","event","item","getNavigationItemById","stopPropagation","value","isOpen","content","VerticalNavigationContext","Provider","StyledRoot","clsx","verticalNavigationClasses","root","collapsed"],"mappings":";;;;;;;;;AA4EaA,MAAAA,uBAAuBA,CAACC,UAAqC;AAClE,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IAEAC;AAAAA,IAEAC,OAAO;AAAA,IAEPC,SAAS;AAAA,IAETC,WAAW;AAAA,IAEX,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,wBAAwBT,KAAK;AAEjD,QAAM,CAACU,YAAYC,aAAa,IAAIC,SAA2B,CAAE,CAAA;AAEjE,QAAM,CAACC,gBAAgBC,iBAAiB,IAAIF,SAAS;AAErD,QAAM,CAACG,aAAaC,cAAc,IAAIJ,SAA6B;AAG7DK,QAAAA,iBAAiBC,QACrB,MAAMC,qBAAqBT,UAAU,GACrC,CAACA,UAAU,CACb;AAEMU,QAAAA,oBAAoBF,QACxB,MAAMG,kBAAkBJ,gBAAgBJ,cAAc,GACtD,CAACI,gBAAgBJ,cAAc,CACjC;AAEA,QAAM,CAACS,YAAYC,aAAa,IAAIX,SAASQ,iBAAiB;AAExDI,QAAAA,sBAAsBN,QAC1B,MAAMO,wBAAwBf,UAAU,GACxC,CAACA,UAAU,CACb;AAGE,YAAA,MAAMM,eAAeM,yCAAYI,KAAK,GACtC,CAACJ,YAAYC,aAAa,CAC5B;AAEMI,QAAAA,0BAA0BC,YAAY,MAAM;AAChDL,kBAAcF,kBAAkBJ,gBAAgBK,WAAWrB,EAAE,CAAC;AAAA,EAC7D,GAAA,CAACqB,YAAYC,eAAeN,cAAc,CAAC;AAE9C,QAAMY,yBAAyBD,YAC7B,CAACE,OAAOC,SAAS;AACfR,kBAAcS,sBAAsBf,gBAAgBc,KAAK9B,EAAE,CAAC;AAC5D6B,UAAMG,gBAAgB;AAAA,EAAA,GAExB,CAACV,eAAeN,cAAc,CAChC;AAEMiB,QAAAA,QAAQhB,QACZ,OAAO;AAAA,IACLiB,QAAQ9B;AAAAA,IACRE;AAAAA,IACAD;AAAAA,IACAS;AAAAA,IACAC;AAAAA,IAEAM;AAAAA,IACAC;AAAAA,IACAN;AAAAA,IACAY;AAAAA,IACAF;AAAAA,IAEAjB;AAAAA,IACAC;AAAAA,IACAE;AAAAA,IACAC;AAAAA,IACAU;AAAAA,EAAAA,IAEF,CACEnB,MACAE,UACAD,QACAS,aACAC,gBACAM,YACAC,eACAN,gBACAY,wBACAF,yBACAH,qBACAd,YACAG,cAAc,CAElB;AAEMuB,QAAAA,UACHC,oBAAAA,0BAA0BC,UAAQ;AAAA,IAACJ;AAAAA,IAAa9B,8BAC9CmC,YAAU;AAAA,MACTtC;AAAAA,MACAC,WAAWsC,KACTtC,WACAuC,0BAA0BC,MAC1BvC,mCAASuC,MACT,CAACrC,QAAQoC,0BAA0BE,WACnCrC,UAAUmC,0BAA0BnC,QACpCH,mCAASwC,SACX;AAAA,MACAnB;AAAAA,MAAyC,GACrChB;AAAAA,MAAMJ;AAAAA,IAAAA,CAGA;AAAA,EAAA,CACsB;AAG/BgC,SAAAA;AACT;"}

package/dist/esm/hooks/useDefaultProps.js

@@ -0,0 +1,41 @@
+import { useMemo } from "react";
+import { useCss } from "./useCss.js";
+import { useTheme } from "./useTheme.js";
+function filterProps(props) {
+  return Object.keys(props).reduce((acc, key) => {
+    if (props[key] !== void 0) {
+      acc[key] = props[key];
+    }
+    return acc;
+  }, {});
+}
+function useDefaultProps(componentName, props) {
+  var _a;
+  const {
+    activeTheme
+  } = useTheme();
+  const {
+    css,
+    cx
+  } = useCss();
+  const themeDefaultProps = (_a = activeTheme == null ? void 0 : activeTheme.components) == null ? void 0 : _a[componentName];
+  const classes = useMemo(() => {
+    const themeClasses = (themeDefaultProps == null ? void 0 : themeDefaultProps.classes) || {};
+    const propsClasses = (props == null ? void 0 : props.classes) || {};
+    const classKeys = [...Object.keys(themeClasses), ...Object.keys(propsClasses)];
+    return classKeys.reduce((acc, key) => {
+      acc[key] = cx(themeClasses[key] && css(themeClasses[key]), propsClasses[key]);
+      return acc;
+    }, {});
+  }, [css, cx, props == null ? void 0 : props.classes, themeDefaultProps == null ? void 0 : themeDefaultProps.classes]);
+  return {
+    ...themeDefaultProps,
+    ...filterProps(props),
+    classes
+  };
+}
+export {
+  filterProps,
+  useDefaultProps
+};
+//# sourceMappingURL=useDefaultProps.js.map

package/dist/esm/hooks/useDefaultProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDefaultProps.js","sources":["../../../src/hooks/useDefaultProps.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useCss } from \"./useCss\";\nimport { useTheme } from \"./useTheme\";\n\n/** Filter out `undefined` entries from `props` object. */\nexport function filterProps(props: Record<string, any>) {\n  return Object.keys(props).reduce((acc, key) => {\n    if (props[key] !== undefined) {\n      acc[key] = props[key];\n    }\n    return acc;\n  }, {} as typeof props);\n}\n\n/** Injects into `props` the props defined in the theme `componentName`. */\nexport function useDefaultProps<T extends Record<string, any>>(\n  /** Name of the theme component key to inject defaultProps */\n  componentName: string, // keyof HvThemeComponents,\n  props: T\n): T {\n  const { activeTheme } = useTheme();\n  const { css, cx } = useCss();\n\n  const themeDefaultProps = activeTheme?.components?.[componentName];\n\n  const classes = useMemo(() => {\n    const themeClasses = themeDefaultProps?.classes || {};\n    const propsClasses = props?.classes || {};\n    const classKeys = [\n      ...Object.keys(themeClasses),\n      ...Object.keys(propsClasses),\n    ];\n    return classKeys.reduce((acc, key) => {\n      acc[key] = cx(\n        themeClasses[key] && css(themeClasses[key]),\n        propsClasses[key]\n      );\n      return acc;\n    }, {} as Record<string, string>);\n  }, [css, cx, props?.classes, themeDefaultProps?.classes]);\n\n  return {\n    ...themeDefaultProps,\n    ...filterProps(props),\n    classes,\n  };\n}\n"],"names":["filterProps","props","Object","keys","reduce","acc","key","undefined","useDefaultProps","componentName","activeTheme","useTheme","css","cx","useCss","themeDefaultProps","components","classes","useMemo","themeClasses","propsClasses","classKeys"],"mappings":";;;AAKO,SAASA,YAAYC,OAA4B;AACtD,SAAOC,OAAOC,KAAKF,KAAK,EAAEG,OAAO,CAACC,KAAKC,QAAQ;AACzCL,QAAAA,MAAMK,GAAG,MAAMC,QAAW;AACxBD,UAAAA,GAAG,IAAIL,MAAMK,GAAG;AAAA,IACtB;AACOD,WAAAA;AAAAA,EACT,GAAG,CAAmB,CAAA;AACxB;AAGgBG,SAAAA,gBAEdC,eACAR,OACG;;AACG,QAAA;AAAA,IAAES;AAAAA,MAAgBC,SAAS;AAC3B,QAAA;AAAA,IAAEC;AAAAA,IAAKC;AAAAA,MAAOC,OAAO;AAErBC,QAAAA,qBAAoBL,gDAAaM,eAAbN,mBAA0BD;AAE9CQ,QAAAA,UAAUC,QAAQ,MAAM;AACtBC,UAAAA,gBAAeJ,uDAAmBE,YAAW;AAC7CG,UAAAA,gBAAenB,+BAAOgB,YAAW;AACjCI,UAAAA,YAAY,CAChB,GAAGnB,OAAOC,KAAKgB,YAAY,GAC3B,GAAGjB,OAAOC,KAAKiB,YAAY,CAAC;AAE9B,WAAOC,UAAUjB,OAAO,CAACC,KAAKC,QAAQ;AACpCD,UAAIC,GAAG,IAAIO,GACTM,aAAab,GAAG,KAAKM,IAAIO,aAAab,GAAG,CAAC,GAC1Cc,aAAad,GAAG,CAClB;AACOD,aAAAA;AAAAA,IACT,GAAG,CAA6B,CAAA;AAAA,EAAA,GAC/B,CAACO,KAAKC,IAAIZ,+BAAOgB,SAASF,uDAAmBE,OAAO,CAAC;AAEjD,SAAA;AAAA,IACL,GAAGF;AAAAA,IACH,GAAGf,YAAYC,KAAK;AAAA,IACpBgB;AAAAA,EAAAA;AAEJ;"}