@hitachivantara/uikit-react-core 5.23.0 → 5.24.0

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,
@@ -36,6 +37,7 @@ const HvVerticalNavigationSlider = ({
         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                  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","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,QACPJ,MAAI;AAAA,QACJN,SAAUC,CAAU,UAAA;AAClBZ,iEAAoBY,OAAOP;AAAAA,QAC7B;AAAA,QAAEF,UAEFe,oBAACI,aAAa,EAAA;AAAA,MACN,CAAA,IACRP;AAAAA,MACLZ,8BAEAoB,mBAAiB;AAAA,QAAC1B,MAAMQ,KAAKQ;AAAAA,MAAAA,CAAQ;AAAA,IAAA,GA9BjCR,KAAKV,EA+BI,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;"}