@hitachivantara/uikit-react-core 5.7.0 → 5.7.2

package/dist/esm/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalScrollListItem.js","sources":["../../../../../../src/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types\";\nimport horizontalScrollListItemClasses, {\n  HvHorizontalScrollListItemClasses,\n} from \"./horizontalScrollListItemClasses\";\nimport { ClassNames } from \"@emotion/react\";\nimport { clsx } from \"clsx\";\nimport { setId } from \"@core/utils\";\nimport { HvTypographyProps } from \"@core/components\";\nimport { styles } from \"./HorizontalScrollListItem.styles\";\n\nexport interface HvVerticalScrollListItemProps extends HvBaseProps {\n  /** The text to render.  */\n  children: React.ReactNode;\n  /** A function component that renders a typography wrapped with a tooltip. */\n  tooltipWrapper: React.FunctionComponent<{\n    id?: string;\n    className?: string;\n    variant?: HvTypographyProps[\"variant\"];\n    children?: React.ReactNode;\n  }>;\n  /** Whether the element is selected. */\n  selected?: boolean;\n  /** The function to be executed when the element is clicked. */\n  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;\n  /** The function to be executed when the element is clicked. */\n  onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvHorizontalScrollListItemClasses;\n}\n\n/**\n * HvHorizontalScrollListItem a focusable item to be used as part of the horizontal scroll\n */\nexport const HvHorizontalScrollListItem = ({\n  id,\n  className,\n  classes,\n  selected,\n  children,\n  onClick,\n  onKeyDown,\n  tooltipWrapper,\n  ...others\n}: HvVerticalScrollListItemProps) => {\n  const variant = selected ? \"label\" : \"body\";\n  const labelId = setId(id, \"label\");\n  const buttonId = setId(id, \"button\");\n  const Tooltip = tooltipWrapper;\n\n  return (\n    <ClassNames>\n      {({ css }) => (\n        <li\n          id={id}\n          className={clsx(\n            className,\n            classes?.root,\n            horizontalScrollListItemClasses.root,\n            css(styles.root)\n          )}\n          aria-current={selected}\n        >\n          <div\n            id={buttonId}\n            role=\"button\"\n            tabIndex={0}\n            onClick={onClick}\n            onKeyDown={onKeyDown}\n            className={clsx(\n              classes?.button,\n              horizontalScrollListItemClasses.button,\n              css(styles.button)\n            )}\n            aria-labelledby={labelId}\n            {...others}\n          >\n            <Tooltip\n              id={labelId}\n              className={clsx(\n                classes?.text,\n                horizontalScrollListItemClasses.text,\n                css(styles.text),\n                selected &&\n                  clsx(\n                    classes?.selected,\n                    horizontalScrollListItemClasses.selected,\n                    css(styles.selected)\n                  )\n              )}\n              variant={variant}\n            >\n              {children}\n            </Tooltip>\n          </div>\n        </li>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["HvHorizontalScrollListItem","id","className","classes","selected","children","onClick","onKeyDown","tooltipWrapper","others","variant","labelId","setId","buttonId","Tooltip","ClassNames","css","clsx","root","horizontalScrollListItemClasses","styles","role","tabIndex","button","text"],"mappings":";;;;;;AAiCO,MAAMA,6BAA6BA,CAAC;AAAA,EACzCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AAC0B,MAAM;AAC7BC,QAAAA,UAAUN,WAAW,UAAU;AAC/BO,QAAAA,UAAUC,MAAMX,IAAI,OAAO;AAC3BY,QAAAA,WAAWD,MAAMX,IAAI,QAAQ;AACnC,QAAMa,UAAUN;AAEhB,6BACGO,YAAU;AAAA,IAAAV,UACRA,CAAC;AAAA,MAAEW;AAAAA,IAAAA,0BACF,MAAA;AAAA,MACEf;AAAAA,MACAC,WAAWe,KACTf,WACAC,mCAASe,MACTC,gCAAgCD,MAChCF,IAAII,OAAOF,IAAI,CAAC;AAAA,MAElB,gBAAcd;AAAAA,MAASC,8BAEvB,OAAA;AAAA,QACEJ,IAAIY;AAAAA,QACJQ,MAAK;AAAA,QACLC,UAAU;AAAA,QACVhB;AAAAA,QACAC;AAAAA,QACAL,WAAWe,KACTd,mCAASoB,QACTJ,gCAAgCI,QAChCP,IAAII,OAAOG,MAAM,CAAC;AAAA,QAEpB,mBAAiBZ;AAAAA,QAAQ,GACrBF;AAAAA,QAAMJ,8BAETS,SAAO;AAAA,UACNb,IAAIU;AAAAA,UACJT,WAAWe,KACTd,mCAASqB,MACTL,gCAAgCK,MAChCR,IAAII,OAAOI,IAAI,GACfpB,YACEa,KACEd,mCAASC,UACTe,gCAAgCf,UAChCY,IAAII,OAAOhB,QAAQ,CAAC,CACrB;AAAA,UAELM;AAAAA,UAAiBL;AAAAA,QAAAA,CAER;AAAA,MAAA,CACD;AAAA,IAAA,CACN;AAAA,EAAA,CAGC;AAEjB;"}
+{"version":3,"file":"HorizontalScrollListItem.js","sources":["../../../../../../src/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types\";\nimport horizontalScrollListItemClasses, {\n  HvHorizontalScrollListItemClasses,\n} from \"./horizontalScrollListItemClasses\";\nimport { ClassNames } from \"@emotion/react\";\nimport { setId } from \"@core/utils\";\nimport { HvTypographyProps } from \"@core/components\";\nimport { styles } from \"./HorizontalScrollListItem.styles\";\n\nexport interface HvVerticalScrollListItemProps extends HvBaseProps {\n  /** The text to render.  */\n  children: React.ReactNode;\n  /** A function component that renders a typography wrapped with a tooltip. */\n  tooltipWrapper: React.FunctionComponent<{\n    id?: string;\n    className?: string;\n    variant?: HvTypographyProps[\"variant\"];\n    children?: React.ReactNode;\n  }>;\n  /** Whether the element is selected. */\n  selected?: boolean;\n  /** The function to be executed when the element is clicked. */\n  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;\n  /** The function to be executed when the element is clicked. */\n  onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvHorizontalScrollListItemClasses;\n}\n\n/**\n * HvHorizontalScrollListItem a focusable item to be used as part of the horizontal scroll\n */\nexport const HvHorizontalScrollListItem = ({\n  id,\n  className,\n  classes,\n  selected,\n  children,\n  onClick,\n  onKeyDown,\n  tooltipWrapper,\n  ...others\n}: HvVerticalScrollListItemProps) => {\n  const variant = selected ? \"label\" : \"body\";\n  const labelId = setId(id, \"label\");\n  const buttonId = setId(id, \"button\");\n  const Tooltip = tooltipWrapper;\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <li\n          id={id}\n          className={cx(\n            horizontalScrollListItemClasses.root,\n            css(styles.root),\n            className,\n            classes?.root\n          )}\n          aria-current={selected}\n        >\n          <div\n            id={buttonId}\n            role=\"button\"\n            tabIndex={0}\n            onClick={onClick}\n            onKeyDown={onKeyDown}\n            className={cx(\n              horizontalScrollListItemClasses.button,\n              css(styles.button),\n              classes?.button\n            )}\n            aria-labelledby={labelId}\n            {...others}\n          >\n            <Tooltip\n              id={labelId}\n              className={cx(\n                horizontalScrollListItemClasses.text,\n                selected && horizontalScrollListItemClasses.selected,\n                css(styles.text),\n                selected && css(styles.selected),\n                classes?.text,\n                selected && classes?.selected\n              )}\n              variant={variant}\n            >\n              {children}\n            </Tooltip>\n          </div>\n        </li>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["HvHorizontalScrollListItem","id","className","classes","selected","children","onClick","onKeyDown","tooltipWrapper","others","variant","labelId","setId","buttonId","Tooltip","ClassNames","css","cx","horizontalScrollListItemClasses","root","styles","role","tabIndex","button","text"],"mappings":";;;;;AAgCO,MAAMA,6BAA6BA,CAAC;AAAA,EACzCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AAC0B,MAAM;AAC7BC,QAAAA,UAAUN,WAAW,UAAU;AAC/BO,QAAAA,UAAUC,MAAMX,IAAI,OAAO;AAC3BY,QAAAA,WAAWD,MAAMX,IAAI,QAAQ;AACnC,QAAMa,UAAUN;AAEhB,6BACGO,YAAU;AAAA,IAAAV,UACRA,CAAC;AAAA,MAAEW;AAAAA,MAAKC;AAAAA,IAAAA,0BACP,MAAA;AAAA,MACEhB;AAAAA,MACAC,WAAWe,GACTC,gCAAgCC,MAChCH,IAAII,OAAOD,IAAI,GACfjB,WACAC,mCAASgB,IAAI;AAAA,MAEf,gBAAcf;AAAAA,MAASC,8BAEvB,OAAA;AAAA,QACEJ,IAAIY;AAAAA,QACJQ,MAAK;AAAA,QACLC,UAAU;AAAA,QACVhB;AAAAA,QACAC;AAAAA,QACAL,WAAWe,GACTC,gCAAgCK,QAChCP,IAAII,OAAOG,MAAM,GACjBpB,mCAASoB,MAAM;AAAA,QAEjB,mBAAiBZ;AAAAA,QAAQ,GACrBF;AAAAA,QAAMJ,8BAETS,SAAO;AAAA,UACNb,IAAIU;AAAAA,UACJT,WAAWe,GACTC,gCAAgCM,MAChCpB,YAAYc,gCAAgCd,UAC5CY,IAAII,OAAOI,IAAI,GACfpB,YAAYY,IAAII,OAAOhB,QAAQ,GAC/BD,mCAASqB,MACTpB,aAAYD,mCAASC,SAAQ;AAAA,UAE/BM;AAAAA,UAAiBL;AAAAA,QAAAA,CAER;AAAA,MAAA,CACD;AAAA,IAAA,CACN;AAAA,EAAA,CAGC;AAEjB;"}

package/dist/esm/components/ScrollTo/Horizontal/ScrollToHorizontal.js

@@ -1,6 +1,5 @@
 import scrollToHorizontalClasses from "./scrollToHorizontalClasses.js";
 import { ClassNames } from "@emotion/react";
-import { clsx } from "clsx";
 import { styles } from "./ScrollToHorizontal.styles.js";
 import { useScrollTo } from "../useScrollTo.js";
 import { useMemo, useCallback } from "react";
@@ -60,11 +59,12 @@ const HvScrollToHorizontal = ({
   const NotSelected = useCallback(() => {
     return /* @__PURE__ */ jsx(ClassNames, {
       children: ({
-        css
+        css,
+        cx
       }) => /* @__PURE__ */ jsx("div", {
-        className: clsx(classes == null ? void 0 : classes.notSelectedRoot, scrollToHorizontalClasses.notSelectedRoot, css(styles.notSelectedRoot)),
+        className: cx(scrollToHorizontalClasses.notSelectedRoot, css(styles.notSelectedRoot), classes == null ? void 0 : classes.notSelectedRoot),
         children: /* @__PURE__ */ jsx("div", {
-          className: clsx(classes == null ? void 0 : classes.notSelected, scrollToHorizontalClasses.notSelected, css(styles.notSelected))
+          className: cx(scrollToHorizontalClasses.notSelected, css(styles.notSelected), classes == null ? void 0 : classes.notSelected)
         })
       })
     });
@@ -72,11 +72,12 @@ const HvScrollToHorizontal = ({
   const Selected = useCallback(() => {
     return /* @__PURE__ */ jsx(ClassNames, {
       children: ({
-        css
+        css,
+        cx
       }) => /* @__PURE__ */ jsx(CurrentStep, {
         height: activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize,
         width: activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize,
-        className: clsx(classes == null ? void 0 : classes.selected, scrollToHorizontalClasses.selected, css(styles.selected))
+        className: cx(scrollToHorizontalClasses.selected, css(styles.selected), classes == null ? void 0 : classes.selected)
       })
     });
   }, [classes == null ? void 0 : classes.selected, activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize]);
@@ -104,16 +105,17 @@ const HvScrollToHorizontal = ({
   });
   return /* @__PURE__ */ jsx(ClassNames, {
     children: ({
-      css
+      css,
+      cx
     }) => /* @__PURE__ */ jsx("ol", {
-      className: clsx(className, classes == null ? void 0 : classes.root, scrollToHorizontalClasses.root, css(styles.root), css({
+      className: cx(scrollToHorizontalClasses.root, position === "sticky" && scrollToHorizontalClasses.positionSticky, position === "fixed" && scrollToHorizontalClasses.positionFixed, css(styles.root), css({
         width: position === "fixed" && (upMd || downSm) ? `calc(100% - 2*${theme.spacing(upMd ? 4 : 2)})` : "100%",
         marginTop: 0,
         marginBottom: 0,
         marginRight: position === "fixed" && (upMd || downSm) ? theme.spacing(upMd ? 4 : 2) : 0,
         marginLeft: position === "fixed" && (upMd || downSm) ? theme.spacing(upMd ? 4 : 2) : 0,
         backgroundColor: fade(activeTheme == null ? void 0 : activeTheme.colors.modes[selectedMode].atmo2, activeTheme == null ? void 0 : activeTheme.scrollTo.backgroundColorOpacity)
-      }), position === "sticky" && clsx(classes == null ? void 0 : classes.positionSticky, scrollToHorizontalClasses.positionSticky, css(styles.positionSticky)), position === "fixed" && clsx(classes == null ? void 0 : classes.positionFixed, scrollToHorizontalClasses.positionFixed, css(styles.positionFixed))),
+      }), position === "sticky" && css(styles.positionSticky), position === "fixed" && css(styles.positionFixed), className, classes == null ? void 0 : classes.root, position === "sticky" && (classes == null ? void 0 : classes.positionSticky), position === "fixed" && (classes == null ? void 0 : classes.positionFixed)),
       id: elementId,
       ...others,
       children: tabs

package/dist/esm/components/ScrollTo/Horizontal/ScrollToHorizontal.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollToHorizontal.js","sources":["../../../../../src/components/ScrollTo/Horizontal/ScrollToHorizontal.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types\";\nimport scrollToHorizontalClasses, {\n  HvScrollToHorizontalClasses,\n} from \"./scrollToHorizontalClasses\";\nimport { ClassNames } from \"@emotion/react\";\nimport { clsx } from \"clsx\";\nimport { useTheme, useUniqueId } from \"@core/hooks\";\nimport { styles } from \"./ScrollToHorizontal.styles\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { HvHorizontalScrollListItem } from \"./HorizontalScrollListItem\";\nimport { isKeypress, keyboardCodes, setId } from \"@core/utils\";\nimport { useCallback, useMemo } from \"react\";\nimport { withTooltip } from \"../withTooltip\";\nimport { useTheme as useMuiTheme } from \"@mui/material/styles\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport fade from \"@core/utils/hexToRgbA\";\nimport { HvScrollToTooltipPositions } from \"../types\";\nimport { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\nimport { useMediaQuery } from \"@mui/material\";\n\nconst { Enter } = keyboardCodes;\n\nexport interface HvScrollToHorizontalOption {\n  key?: string;\n  label: string;\n  value: string;\n  offset?: number;\n}\n\nexport type HvScrollToHorizontalPositions = \"sticky\" | \"fixed\" | \"relative\";\n\nexport interface HvScrollToHorizontalProps\n  extends HvBaseProps<HTMLOListElement, \"onChange\" | \"onClick\"> {\n  /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied */\n  options: HvScrollToHorizontalOption[];\n  /** True if the href location link should be applied. It will create an a element around every list item */\n  href?: boolean;\n  /** Default selected index passed from the parent. */\n  defaultSelectedIndex?: number;\n  /**\n   * The Id of the scrollable container containing displayed elements.\n   *\n   * Defaults to `window` if unspecified.\n   */\n  scrollElementId?: string;\n  /**\n   * Defines the offset from the top of each element for getting an optimal viewing region in the container.\n   * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)\n   * or to put more breathing room between the targeted element and the edges of the container.\n   *\n   * Each element can also have a specific offset via the options property.\n   */\n  offset?: number;\n  /** Position of the Horizontal scroll to. */\n  position?: HvScrollToHorizontalPositions;\n  /** Position of tooltip identifying the current item. */\n  tooltipPosition?: HvScrollToTooltipPositions;\n  /** A function called each time the selected index changes. */\n  onChange?: (\n    event:\n      | Event\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    index: number\n  ) => void;\n  /** A function called each time an user clicks on a tab element. */\n  onClick?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;\n  /** A function called each time an user press enter on a tab element. */\n  onEnter?: (event: React.KeyboardEvent<HTMLDivElement>, index: number) => void;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvScrollToHorizontalClasses;\n}\n\n/**\n * The horizontal scroll to element can be used to quickly navigate in a page.\n */\nexport const HvScrollToHorizontal = ({\n  id,\n  defaultSelectedIndex = 0,\n  scrollElementId,\n  href = true,\n  onChange,\n  onClick,\n  onEnter,\n  className,\n  classes,\n  options,\n  offset = 0,\n  position = \"relative\",\n  tooltipPosition = \"top\",\n  ...others\n}: HvScrollToHorizontalProps) => {\n  const muiTheme = useMuiTheme();\n\n  const downSm = useMediaQuery(muiTheme.breakpoints.down(\"sm\"));\n  const upMd = useMediaQuery(muiTheme.breakpoints.up(\"md\"));\n\n  const { activeTheme, selectedMode } = useTheme();\n\n  const elementId = useUniqueId(id, \"hvHorizontalScrollto\");\n\n  const [selectedIndex, setScrollTo] = useScrollTo(\n    defaultSelectedIndex,\n    scrollElementId,\n    href,\n    offset,\n    options,\n    onChange\n  );\n\n  const handleSelection = (\n    event:\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    value: string,\n    index: number\n  ) => {\n    event.preventDefault();\n\n    const wrappedOnChange = () => {\n      onChange?.(event, index);\n    };\n\n    setScrollTo(event, value, index, wrappedOnChange);\n  };\n\n  const tooltipWrappers = useMemo(() => {\n    return options.map((option) => {\n      return withTooltip(option.label, \"div\", tooltipPosition);\n    });\n  }, [options, tooltipPosition]);\n\n  const NotSelected = useCallback(() => {\n    return (\n      <ClassNames>\n        {({ css }) => (\n          <div\n            className={clsx(\n              classes?.notSelectedRoot,\n              scrollToHorizontalClasses.notSelectedRoot,\n              css(styles.notSelectedRoot)\n            )}\n          >\n            <div\n              className={clsx(\n                classes?.notSelected,\n                scrollToHorizontalClasses.notSelected,\n                css(styles.notSelected)\n              )}\n            />\n          </div>\n        )}\n      </ClassNames>\n    );\n  }, [classes?.notSelectedRoot, classes?.notSelected]);\n\n  const Selected = useCallback(() => {\n    return (\n      <ClassNames>\n        {({ css }) => (\n          <CurrentStep\n            height={activeTheme?.scrollTo.dotSelectedSize}\n            width={activeTheme?.scrollTo.dotSelectedSize}\n            className={clsx(\n              classes?.selected,\n              scrollToHorizontalClasses.selected,\n              css(styles.selected)\n            )}\n          />\n        )}\n      </ClassNames>\n    );\n  }, [classes?.selected, activeTheme?.scrollTo.dotSelectedSize]);\n\n  const tabs = options.map((option, index) => {\n    const selected = selectedIndex === index;\n    const tooltipWrapper = tooltipWrappers[index];\n\n    return (\n      <HvHorizontalScrollListItem\n        id={setId(elementId, `item-${index}`)}\n        onClick={(event) => {\n          handleSelection(event, option.value, index);\n          onClick?.(event, index);\n        }}\n        onKeyDown={(event) => {\n          if (isKeypress(event, Enter) === true) {\n            handleSelection(event, option.value, index);\n            onEnter?.(event, index);\n          }\n        }}\n        tooltipWrapper={tooltipWrapper}\n        selected={selected}\n        key={option.key || option.label}\n      >\n        <p>{option.label}</p>\n        {selected ? <Selected /> : <NotSelected />}\n      </HvHorizontalScrollListItem>\n    );\n  });\n\n  return (\n    <ClassNames>\n      {({ css }) => (\n        <ol\n          className={clsx(\n            className,\n            classes?.root,\n            scrollToHorizontalClasses.root,\n            css(styles.root),\n            css({\n              width:\n                position === \"fixed\" && (upMd || downSm)\n                  ? `calc(100% - 2*${theme.spacing(upMd ? 4 : 2)})`\n                  : \"100%\",\n              marginTop: 0,\n              marginBottom: 0,\n              marginRight:\n                position === \"fixed\" && (upMd || downSm)\n                  ? theme.spacing(upMd ? 4 : 2)\n                  : 0,\n              marginLeft:\n                position === \"fixed\" && (upMd || downSm)\n                  ? theme.spacing(upMd ? 4 : 2)\n                  : 0,\n              backgroundColor: fade(\n                activeTheme?.colors.modes[selectedMode].atmo2,\n                activeTheme?.scrollTo.backgroundColorOpacity\n              ),\n            }),\n            position === \"sticky\" &&\n              clsx(\n                classes?.positionSticky,\n                scrollToHorizontalClasses.positionSticky,\n                css(styles.positionSticky)\n              ),\n            position === \"fixed\" &&\n              clsx(\n                classes?.positionFixed,\n                scrollToHorizontalClasses.positionFixed,\n                css(styles.positionFixed)\n              )\n          )}\n          id={elementId}\n          {...others}\n        >\n          {tabs}\n        </ol>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["Enter","keyboardCodes","HvScrollToHorizontal","id","defaultSelectedIndex","scrollElementId","href","onChange","onClick","onEnter","className","classes","options","offset","position","tooltipPosition","others","muiTheme","useMuiTheme","downSm","useMediaQuery","breakpoints","down","upMd","up","activeTheme","selectedMode","useTheme","elementId","useUniqueId","selectedIndex","setScrollTo","useScrollTo","handleSelection","event","value","index","preventDefault","wrappedOnChange","tooltipWrappers","useMemo","map","option","withTooltip","label","NotSelected","useCallback","ClassNames","children","css","clsx","notSelectedRoot","scrollToHorizontalClasses","styles","notSelected","Selected","CurrentStep","height","scrollTo","dotSelectedSize","width","selected","tabs","tooltipWrapper","HvHorizontalScrollListItem","setId","onKeyDown","isKeypress","_jsx","key","root","theme","spacing","marginTop","marginBottom","marginRight","marginLeft","backgroundColor","fade","colors","modes","atmo2","backgroundColorOpacity","positionSticky","positionFixed"],"mappings":"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"}
+{"version":3,"file":"ScrollToHorizontal.js","sources":["../../../../../src/components/ScrollTo/Horizontal/ScrollToHorizontal.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types\";\nimport scrollToHorizontalClasses, {\n  HvScrollToHorizontalClasses,\n} from \"./scrollToHorizontalClasses\";\nimport { ClassNames } from \"@emotion/react\";\nimport { useTheme, useUniqueId } from \"@core/hooks\";\nimport { styles } from \"./ScrollToHorizontal.styles\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { HvHorizontalScrollListItem } from \"./HorizontalScrollListItem\";\nimport { isKeypress, keyboardCodes, setId } from \"@core/utils\";\nimport { useCallback, useMemo } from \"react\";\nimport { withTooltip } from \"../withTooltip\";\nimport { useTheme as useMuiTheme } from \"@mui/material/styles\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport fade from \"@core/utils/hexToRgbA\";\nimport { HvScrollToTooltipPositions } from \"../types\";\nimport { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\nimport { useMediaQuery } from \"@mui/material\";\n\nconst { Enter } = keyboardCodes;\n\nexport interface HvScrollToHorizontalOption {\n  key?: string;\n  label: string;\n  value: string;\n  offset?: number;\n}\n\nexport type HvScrollToHorizontalPositions = \"sticky\" | \"fixed\" | \"relative\";\n\nexport interface HvScrollToHorizontalProps\n  extends HvBaseProps<HTMLOListElement, \"onChange\" | \"onClick\"> {\n  /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied */\n  options: HvScrollToHorizontalOption[];\n  /** True if the href location link should be applied. It will create an a element around every list item */\n  href?: boolean;\n  /** Default selected index passed from the parent. */\n  defaultSelectedIndex?: number;\n  /**\n   * The Id of the scrollable container containing displayed elements.\n   *\n   * Defaults to `window` if unspecified.\n   */\n  scrollElementId?: string;\n  /**\n   * Defines the offset from the top of each element for getting an optimal viewing region in the container.\n   * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)\n   * or to put more breathing room between the targeted element and the edges of the container.\n   *\n   * Each element can also have a specific offset via the options property.\n   */\n  offset?: number;\n  /** Position of the Horizontal scroll to. */\n  position?: HvScrollToHorizontalPositions;\n  /** Position of tooltip identifying the current item. */\n  tooltipPosition?: HvScrollToTooltipPositions;\n  /** A function called each time the selected index changes. */\n  onChange?: (\n    event:\n      | Event\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    index: number\n  ) => void;\n  /** A function called each time an user clicks on a tab element. */\n  onClick?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;\n  /** A function called each time an user press enter on a tab element. */\n  onEnter?: (event: React.KeyboardEvent<HTMLDivElement>, index: number) => void;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvScrollToHorizontalClasses;\n}\n\n/**\n * The horizontal scroll to element can be used to quickly navigate in a page.\n */\nexport const HvScrollToHorizontal = ({\n  id,\n  defaultSelectedIndex = 0,\n  scrollElementId,\n  href = true,\n  onChange,\n  onClick,\n  onEnter,\n  className,\n  classes,\n  options,\n  offset = 0,\n  position = \"relative\",\n  tooltipPosition = \"top\",\n  ...others\n}: HvScrollToHorizontalProps) => {\n  const muiTheme = useMuiTheme();\n\n  const downSm = useMediaQuery(muiTheme.breakpoints.down(\"sm\"));\n  const upMd = useMediaQuery(muiTheme.breakpoints.up(\"md\"));\n\n  const { activeTheme, selectedMode } = useTheme();\n\n  const elementId = useUniqueId(id, \"hvHorizontalScrollto\");\n\n  const [selectedIndex, setScrollTo] = useScrollTo(\n    defaultSelectedIndex,\n    scrollElementId,\n    href,\n    offset,\n    options,\n    onChange\n  );\n\n  const handleSelection = (\n    event:\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    value: string,\n    index: number\n  ) => {\n    event.preventDefault();\n\n    const wrappedOnChange = () => {\n      onChange?.(event, index);\n    };\n\n    setScrollTo(event, value, index, wrappedOnChange);\n  };\n\n  const tooltipWrappers = useMemo(() => {\n    return options.map((option) => {\n      return withTooltip(option.label, \"div\", tooltipPosition);\n    });\n  }, [options, tooltipPosition]);\n\n  const NotSelected = useCallback(() => {\n    return (\n      <ClassNames>\n        {({ css, cx }) => (\n          <div\n            className={cx(\n              scrollToHorizontalClasses.notSelectedRoot,\n              css(styles.notSelectedRoot),\n              classes?.notSelectedRoot\n            )}\n          >\n            <div\n              className={cx(\n                scrollToHorizontalClasses.notSelected,\n                css(styles.notSelected),\n                classes?.notSelected\n              )}\n            />\n          </div>\n        )}\n      </ClassNames>\n    );\n  }, [classes?.notSelectedRoot, classes?.notSelected]);\n\n  const Selected = useCallback(() => {\n    return (\n      <ClassNames>\n        {({ css, cx }) => (\n          <CurrentStep\n            height={activeTheme?.scrollTo.dotSelectedSize}\n            width={activeTheme?.scrollTo.dotSelectedSize}\n            className={cx(\n              scrollToHorizontalClasses.selected,\n              css(styles.selected),\n              classes?.selected\n            )}\n          />\n        )}\n      </ClassNames>\n    );\n  }, [classes?.selected, activeTheme?.scrollTo.dotSelectedSize]);\n\n  const tabs = options.map((option, index) => {\n    const selected = selectedIndex === index;\n    const tooltipWrapper = tooltipWrappers[index];\n\n    return (\n      <HvHorizontalScrollListItem\n        id={setId(elementId, `item-${index}`)}\n        onClick={(event) => {\n          handleSelection(event, option.value, index);\n          onClick?.(event, index);\n        }}\n        onKeyDown={(event) => {\n          if (isKeypress(event, Enter) === true) {\n            handleSelection(event, option.value, index);\n            onEnter?.(event, index);\n          }\n        }}\n        tooltipWrapper={tooltipWrapper}\n        selected={selected}\n        key={option.key || option.label}\n      >\n        <p>{option.label}</p>\n        {selected ? <Selected /> : <NotSelected />}\n      </HvHorizontalScrollListItem>\n    );\n  });\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <ol\n          className={cx(\n            scrollToHorizontalClasses.root,\n            position === \"sticky\" && scrollToHorizontalClasses.positionSticky,\n            position === \"fixed\" && scrollToHorizontalClasses.positionFixed,\n            css(styles.root),\n            css({\n              width:\n                position === \"fixed\" && (upMd || downSm)\n                  ? `calc(100% - 2*${theme.spacing(upMd ? 4 : 2)})`\n                  : \"100%\",\n              marginTop: 0,\n              marginBottom: 0,\n              marginRight:\n                position === \"fixed\" && (upMd || downSm)\n                  ? theme.spacing(upMd ? 4 : 2)\n                  : 0,\n              marginLeft:\n                position === \"fixed\" && (upMd || downSm)\n                  ? theme.spacing(upMd ? 4 : 2)\n                  : 0,\n              backgroundColor: fade(\n                activeTheme?.colors.modes[selectedMode].atmo2,\n                activeTheme?.scrollTo.backgroundColorOpacity\n              ),\n            }),\n            position === \"sticky\" && css(styles.positionSticky),\n            position === \"fixed\" && css(styles.positionFixed),\n            className,\n            classes?.root,\n            position === \"sticky\" && classes?.positionSticky,\n            position === \"fixed\" && classes?.positionFixed\n          )}\n          id={elementId}\n          {...others}\n        >\n          {tabs}\n        </ol>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["Enter","keyboardCodes","HvScrollToHorizontal","id","defaultSelectedIndex","scrollElementId","href","onChange","onClick","onEnter","className","classes","options","offset","position","tooltipPosition","others","muiTheme","useMuiTheme","downSm","useMediaQuery","breakpoints","down","upMd","up","activeTheme","selectedMode","useTheme","elementId","useUniqueId","selectedIndex","setScrollTo","useScrollTo","handleSelection","event","value","index","preventDefault","wrappedOnChange","tooltipWrappers","useMemo","map","option","withTooltip","label","NotSelected","useCallback","ClassNames","children","css","cx","scrollToHorizontalClasses","notSelectedRoot","styles","notSelected","Selected","CurrentStep","height","scrollTo","dotSelectedSize","width","selected","tabs","tooltipWrapper","HvHorizontalScrollListItem","setId","onKeyDown","isKeypress","_jsx","key","root","positionSticky","positionFixed","theme","spacing","marginTop","marginBottom","marginRight","marginLeft","backgroundColor","fade","colors","modes","atmo2","backgroundColorOpacity"],"mappings":"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"}

package/dist/esm/components/ScrollTo/Vertical/ScrollToVertical.js

@@ -1,6 +1,5 @@
 import scrollToVerticalClasses from "./scrollToVerticalClasses.js";
 import { generateDynamicStyles, styles } from "./ScrollToVertical.styles.js";
-import { clsx } from "clsx";
 import { useScrollTo } from "../useScrollTo.js";
 import { useMemo } from "react";
 import { withTooltip } from "../withTooltip.js";
@@ -73,11 +72,12 @@ const HvScrollToVertical = ({
   const dynamicClasses = generateDynamicStyles(options.length);
   return /* @__PURE__ */ jsx(ClassNames, {
     children: ({
-      css
+      css,
+      cx
     }) => /* @__PURE__ */ jsx("ol", {
-      className: clsx(className, classes == null ? void 0 : classes.root, scrollToVerticalClasses.root, css(styles.root), css({
+      className: cx(scrollToVerticalClasses.root, position === "fixed" && scrollToVerticalClasses.positionFixed, position === "absolute" && scrollToVerticalClasses.positionAbsolute, css(styles.root), css({
         backgroundColor: fade(activeTheme == null ? void 0 : activeTheme.colors.modes[selectedMode].atmo2, activeTheme == null ? void 0 : activeTheme.scrollTo.backgroundColorOpacity)
-      }), position === "fixed" && clsx(classes == null ? void 0 : classes.positionFixed, scrollToVerticalClasses.positionFixed, css(dynamicClasses.positionFixed)), position === "absolute" && clsx(classes == null ? void 0 : classes.positionAbsolute, scrollToVerticalClasses.positionAbsolute, css(dynamicClasses.positionAbsolute))),
+      }), position === "fixed" && css(dynamicClasses.positionFixed), position === "absolute" && css(dynamicClasses.positionAbsolute), className, classes == null ? void 0 : classes.root, position === "fixed" && (classes == null ? void 0 : classes.positionFixed), position === "absolute" && (classes == null ? void 0 : classes.positionAbsolute)),
       id: elementId,
       ...others,
       children: tabs

package/dist/esm/components/ScrollTo/Vertical/ScrollToVertical.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollToVertical.js","sources":["../../../../../src/components/ScrollTo/Vertical/ScrollToVertical.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types\";\nimport scrollToVerticalClasses, {\n  HvScrollToVerticalClasses,\n} from \"./scrollToVerticalClasses\";\nimport { generateDynamicStyles, styles } from \"./ScrollToVertical.styles\";\nimport { clsx } from \"clsx\";\nimport { useTheme, useUniqueId } from \"@core/hooks\";\nimport { HvVerticalScrollListItem } from \"./VerticalScrollListItem\";\nimport { isKeypress, keyboardCodes, setId } from \"@core/utils\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { useMemo } from \"react\";\nimport { withTooltip } from \"../withTooltip\";\nimport { ClassNames } from \"@emotion/react\";\nimport fade from \"@core/utils/hexToRgbA\";\nimport { HvScrollToTooltipPositions } from \"../types\";\n\nconst { Enter } = keyboardCodes;\n\nexport interface HvScrollToVerticalOption {\n  key?: string;\n  label: string;\n  value: string;\n  offset?: number;\n}\n\nexport type HvScrollToVerticalPositions = \"absolute\" | \"fixed\" | \"relative\";\n\nexport interface HvScrollToVerticalProps\n  extends HvBaseProps<HTMLOListElement, \"onChange\" | \"onClick\"> {\n  /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied */\n  options: HvScrollToVerticalOption[];\n  /** True if the href location link should be applied. It will create an a element around every list item */\n  href?: boolean;\n  /** Default selected index passed from the parent. */\n  defaultSelectedIndex?: number;\n  /**\n   * The Id of the scrollable container containing displayed elements.\n   *\n   * Defaults to `window` if unspecified.\n   */\n  scrollElementId?: string;\n  /**\n   * Defines the offset from the top of each element for getting an optimal viewing region in the container.\n   * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)\n   * or to put more breathing room between the targeted element and the edges of the container.\n   *\n   * Each element can also have a specific offset via the options property.\n   */\n  offset?: number;\n  /** Position of the Vertical scroll to. */\n  position?: HvScrollToVerticalPositions;\n  /** Position of tooltip identifying the current item. */\n  tooltipPosition?: HvScrollToTooltipPositions;\n  /** A function called each time the selected index changes. */\n  onChange?: (\n    event:\n      | Event\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    index: number\n  ) => void;\n  /** A function called each time an user clicks on a tab element. */\n  onClick?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;\n  /** A function called each time an user press enter on a tab element. */\n  onEnter?: (event: React.KeyboardEvent<HTMLDivElement>, index: number) => void;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvScrollToVerticalClasses;\n}\n\n/**\n * The vertical scroll to element can be used to quickly navigate in a page.\n */\nexport const HvScrollToVertical = ({\n  id,\n  defaultSelectedIndex = 0,\n  scrollElementId,\n  href = true,\n  onChange,\n  onClick,\n  onEnter,\n  className,\n  classes,\n  options,\n  offset = 0,\n  position = \"relative\",\n  tooltipPosition = \"left\",\n  ...others\n}: HvScrollToVerticalProps) => {\n  const { activeTheme, selectedMode } = useTheme();\n\n  const elementId = useUniqueId(id, \"hvVerticalScrollto\");\n\n  const [selectedIndex, setScrollTo] = useScrollTo(\n    defaultSelectedIndex,\n    scrollElementId,\n    href,\n    offset,\n    options,\n    onChange\n  );\n\n  const handleSelection = (\n    event:\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    value: string,\n    index: number\n  ) => {\n    event.preventDefault();\n\n    const wrappedOnChange = () => {\n      onChange?.(event, index);\n    };\n\n    setScrollTo(event, value, index, wrappedOnChange);\n  };\n\n  const tooltipWrappers = useMemo(() => {\n    return options.map((option) => {\n      return withTooltip(option.label, \"div\", tooltipPosition, false);\n    });\n  }, [options, tooltipPosition]);\n\n  const tabs = options.map((option, index) => {\n    const selected = selectedIndex === index;\n    const tooltipWrapper = tooltipWrappers[index];\n\n    return (\n      <HvVerticalScrollListItem\n        id={setId(elementId, `item-${index}`)}\n        onClick={(event) => {\n          handleSelection(event, option.value, index);\n          onClick?.(event, index);\n        }}\n        onKeyDown={(event) => {\n          if (isKeypress(event, Enter) === true) {\n            handleSelection(event, option.value, index);\n            onEnter?.(event, index);\n          }\n        }}\n        tooltipWrapper={tooltipWrapper}\n        selected={selected}\n        key={option.key || option.label}\n        aria-label={option.label}\n      />\n    );\n  });\n\n  const dynamicClasses = generateDynamicStyles(options.length);\n\n  return (\n    <ClassNames>\n      {({ css }) => (\n        <ol\n          className={clsx(\n            className,\n            classes?.root,\n            scrollToVerticalClasses.root,\n            css(styles.root),\n            css({\n              backgroundColor: fade(\n                activeTheme?.colors.modes[selectedMode].atmo2,\n                activeTheme?.scrollTo.backgroundColorOpacity\n              ),\n            }),\n            position === \"fixed\" &&\n              clsx(\n                classes?.positionFixed,\n                scrollToVerticalClasses.positionFixed,\n                css(dynamicClasses.positionFixed)\n              ),\n            position === \"absolute\" &&\n              clsx(\n                classes?.positionAbsolute,\n                scrollToVerticalClasses.positionAbsolute,\n                css(dynamicClasses.positionAbsolute)\n              )\n          )}\n          id={elementId}\n          {...others}\n        >\n          {tabs}\n        </ol>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["Enter","keyboardCodes","HvScrollToVertical","id","defaultSelectedIndex","scrollElementId","href","onChange","onClick","onEnter","className","classes","options","offset","position","tooltipPosition","others","activeTheme","selectedMode","useTheme","elementId","useUniqueId","selectedIndex","setScrollTo","useScrollTo","handleSelection","event","value","index","preventDefault","wrappedOnChange","tooltipWrappers","useMemo","map","option","withTooltip","label","tabs","selected","tooltipWrapper","HvVerticalScrollListItem","setId","onKeyDown","isKeypress","key","dynamicClasses","generateDynamicStyles","length","ClassNames","children","css","clsx","root","scrollToVerticalClasses","styles","backgroundColor","fade","colors","modes","atmo2","scrollTo","backgroundColorOpacity","positionFixed","positionAbsolute"],"mappings":";;;;;;;;;;;;;;;AAgBA,MAAM;AAAA,EAAEA;AAAM,IAAIC;AAwDX,MAAMC,qBAAqBA,CAAC;AAAA,EACjCC;AAAAA,EACAC,uBAAuB;AAAA,EACvBC;AAAAA,EACAC,OAAO;AAAA,EACPC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAAS;AAAA,EACTC,WAAW;AAAA,EACXC,kBAAkB;AAAA,EAClB,GAAGC;AACoB,MAAM;AACvB,QAAA;AAAA,IAAEC;AAAAA,IAAaC;AAAAA,MAAiBC,SAAU;AAE1CC,QAAAA,YAAYC,YAAYlB,IAAI,oBAAoB;AAEhD,QAAA,CAACmB,eAAeC,WAAW,IAAIC,YACnCpB,sBACAC,iBACAC,MACAO,QACAD,SACAL,QAAQ;AAGV,QAAMkB,kBAAkBA,CACtBC,OAGAC,OACAC,UACG;AACHF,UAAMG,eAAgB;AAEtB,UAAMC,kBAAkBA,MAAM;AAC5BvB,2CAAWmB,OAAOE;AAAAA,IAAK;AAGbF,gBAAAA,OAAOC,OAAOC,OAAOE,eAAe;AAAA,EAAA;AAG5CC,QAAAA,kBAAkBC,QAAQ,MAAM;AAC7BpB,WAAAA,QAAQqB,IAAKC,CAAW,WAAA;AAC7B,aAAOC,YAAYD,OAAOE,OAAO,OAAOrB,iBAAiB,KAAK;AAAA,IAAA,CAC/D;AAAA,EAAA,GACA,CAACH,SAASG,eAAe,CAAC;AAE7B,QAAMsB,OAAOzB,QAAQqB,IAAI,CAACC,QAAQN,UAAU;AAC1C,UAAMU,WAAWhB,kBAAkBM;AAC7BW,UAAAA,iBAAiBR,gBAAgBH,KAAK;AAE5C,+BACGY,0BAAwB;AAAA,MACvBrC,IAAIsC,MAAMrB,WAAY,QAAOQ,OAAO;AAAA,MACpCpB,SAAUkB,CAAU,UAAA;AACFA,wBAAAA,OAAOQ,OAAOP,OAAOC,KAAK;AAC1CpB,2CAAUkB,OAAOE;AAAAA,MACnB;AAAA,MACAc,WAAYhB,CAAU,UAAA;AACpB,YAAIiB,WAAWjB,OAAO1B,KAAK,MAAM,MAAM;AACrB0B,0BAAAA,OAAOQ,OAAOP,OAAOC,KAAK;AAC1CnB,6CAAUiB,OAAOE;AAAAA,QACnB;AAAA,MACF;AAAA,MACAW;AAAAA,MACAD;AAAAA,MAEA,cAAYJ,OAAOE;AAAAA,IADdF,GAAAA,OAAOU,OAAOV,OAAOE,KAAK;AAAA,EAAA,CAIpC;AAEKS,QAAAA,iBAAiBC,sBAAsBlC,QAAQmC,MAAM;AAE3D,6BACGC,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,IAAAA,0BACF,MAAA;AAAA,MACExC,WAAWyC,KACTzC,WACAC,mCAASyC,MACTC,wBAAwBD,MACxBF,IAAII,OAAOF,IAAI,GACfF,IAAI;AAAA,QACFK,iBAAiBC,KACfvC,2CAAawC,OAAOC,MAAMxC,cAAcyC,OACxC1C,2CAAa2C,SAASC,sBAAsB;AAAA,MAE/C,CAAA,GACD/C,aAAa,WACXqC,KACExC,mCAASmD,eACTT,wBAAwBS,eACxBZ,IAAIL,eAAeiB,aAAa,CAAC,GAErChD,aAAa,cACXqC,KACExC,mCAASoD,kBACTV,wBAAwBU,kBACxBb,IAAIL,eAAekB,gBAAgB,CAAC,CACrC;AAAA,MAEL5D,IAAIiB;AAAAA,MAAU,GACVJ;AAAAA,MAAMiC,UAETZ;AAAAA,IAAAA,CAAI;AAAA,EAAA,CAGE;AAEjB;"}
+{"version":3,"file":"ScrollToVertical.js","sources":["../../../../../src/components/ScrollTo/Vertical/ScrollToVertical.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types\";\nimport scrollToVerticalClasses, {\n  HvScrollToVerticalClasses,\n} from \"./scrollToVerticalClasses\";\nimport { generateDynamicStyles, styles } from \"./ScrollToVertical.styles\";\nimport { useTheme, useUniqueId } from \"@core/hooks\";\nimport { HvVerticalScrollListItem } from \"./VerticalScrollListItem\";\nimport { isKeypress, keyboardCodes, setId } from \"@core/utils\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { useMemo } from \"react\";\nimport { withTooltip } from \"../withTooltip\";\nimport { ClassNames } from \"@emotion/react\";\nimport fade from \"@core/utils/hexToRgbA\";\nimport { HvScrollToTooltipPositions } from \"../types\";\n\nconst { Enter } = keyboardCodes;\n\nexport interface HvScrollToVerticalOption {\n  key?: string;\n  label: string;\n  value: string;\n  offset?: number;\n}\n\nexport type HvScrollToVerticalPositions = \"absolute\" | \"fixed\" | \"relative\";\n\nexport interface HvScrollToVerticalProps\n  extends HvBaseProps<HTMLOListElement, \"onChange\" | \"onClick\"> {\n  /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied */\n  options: HvScrollToVerticalOption[];\n  /** True if the href location link should be applied. It will create an a element around every list item */\n  href?: boolean;\n  /** Default selected index passed from the parent. */\n  defaultSelectedIndex?: number;\n  /**\n   * The Id of the scrollable container containing displayed elements.\n   *\n   * Defaults to `window` if unspecified.\n   */\n  scrollElementId?: string;\n  /**\n   * Defines the offset from the top of each element for getting an optimal viewing region in the container.\n   * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)\n   * or to put more breathing room between the targeted element and the edges of the container.\n   *\n   * Each element can also have a specific offset via the options property.\n   */\n  offset?: number;\n  /** Position of the Vertical scroll to. */\n  position?: HvScrollToVerticalPositions;\n  /** Position of tooltip identifying the current item. */\n  tooltipPosition?: HvScrollToTooltipPositions;\n  /** A function called each time the selected index changes. */\n  onChange?: (\n    event:\n      | Event\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    index: number\n  ) => void;\n  /** A function called each time an user clicks on a tab element. */\n  onClick?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;\n  /** A function called each time an user press enter on a tab element. */\n  onEnter?: (event: React.KeyboardEvent<HTMLDivElement>, index: number) => void;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvScrollToVerticalClasses;\n}\n\n/**\n * The vertical scroll to element can be used to quickly navigate in a page.\n */\nexport const HvScrollToVertical = ({\n  id,\n  defaultSelectedIndex = 0,\n  scrollElementId,\n  href = true,\n  onChange,\n  onClick,\n  onEnter,\n  className,\n  classes,\n  options,\n  offset = 0,\n  position = \"relative\",\n  tooltipPosition = \"left\",\n  ...others\n}: HvScrollToVerticalProps) => {\n  const { activeTheme, selectedMode } = useTheme();\n\n  const elementId = useUniqueId(id, \"hvVerticalScrollto\");\n\n  const [selectedIndex, setScrollTo] = useScrollTo(\n    defaultSelectedIndex,\n    scrollElementId,\n    href,\n    offset,\n    options,\n    onChange\n  );\n\n  const handleSelection = (\n    event:\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    value: string,\n    index: number\n  ) => {\n    event.preventDefault();\n\n    const wrappedOnChange = () => {\n      onChange?.(event, index);\n    };\n\n    setScrollTo(event, value, index, wrappedOnChange);\n  };\n\n  const tooltipWrappers = useMemo(() => {\n    return options.map((option) => {\n      return withTooltip(option.label, \"div\", tooltipPosition, false);\n    });\n  }, [options, tooltipPosition]);\n\n  const tabs = options.map((option, index) => {\n    const selected = selectedIndex === index;\n    const tooltipWrapper = tooltipWrappers[index];\n\n    return (\n      <HvVerticalScrollListItem\n        id={setId(elementId, `item-${index}`)}\n        onClick={(event) => {\n          handleSelection(event, option.value, index);\n          onClick?.(event, index);\n        }}\n        onKeyDown={(event) => {\n          if (isKeypress(event, Enter) === true) {\n            handleSelection(event, option.value, index);\n            onEnter?.(event, index);\n          }\n        }}\n        tooltipWrapper={tooltipWrapper}\n        selected={selected}\n        key={option.key || option.label}\n        aria-label={option.label}\n      />\n    );\n  });\n\n  const dynamicClasses = generateDynamicStyles(options.length);\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <ol\n          className={cx(\n            scrollToVerticalClasses.root,\n            position === \"fixed\" && scrollToVerticalClasses.positionFixed,\n            position === \"absolute\" && scrollToVerticalClasses.positionAbsolute,\n            css(styles.root),\n            css({\n              backgroundColor: fade(\n                activeTheme?.colors.modes[selectedMode].atmo2,\n                activeTheme?.scrollTo.backgroundColorOpacity\n              ),\n            }),\n            position === \"fixed\" && css(dynamicClasses.positionFixed),\n            position === \"absolute\" && css(dynamicClasses.positionAbsolute),\n            className,\n            classes?.root,\n            position === \"fixed\" && classes?.positionFixed,\n            position === \"absolute\" && classes?.positionAbsolute\n          )}\n          id={elementId}\n          {...others}\n        >\n          {tabs}\n        </ol>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["Enter","keyboardCodes","HvScrollToVertical","id","defaultSelectedIndex","scrollElementId","href","onChange","onClick","onEnter","className","classes","options","offset","position","tooltipPosition","others","activeTheme","selectedMode","useTheme","elementId","useUniqueId","selectedIndex","setScrollTo","useScrollTo","handleSelection","event","value","index","preventDefault","wrappedOnChange","tooltipWrappers","useMemo","map","option","withTooltip","label","tabs","selected","tooltipWrapper","HvVerticalScrollListItem","setId","onKeyDown","isKeypress","key","dynamicClasses","generateDynamicStyles","length","ClassNames","children","css","cx","scrollToVerticalClasses","root","positionFixed","positionAbsolute","styles","backgroundColor","fade","colors","modes","atmo2","scrollTo","backgroundColorOpacity"],"mappings":";;;;;;;;;;;;;;AAeA,MAAM;AAAA,EAAEA;AAAM,IAAIC;AAwDX,MAAMC,qBAAqBA,CAAC;AAAA,EACjCC;AAAAA,EACAC,uBAAuB;AAAA,EACvBC;AAAAA,EACAC,OAAO;AAAA,EACPC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAAS;AAAA,EACTC,WAAW;AAAA,EACXC,kBAAkB;AAAA,EAClB,GAAGC;AACoB,MAAM;AACvB,QAAA;AAAA,IAAEC;AAAAA,IAAaC;AAAAA,MAAiBC,SAAU;AAE1CC,QAAAA,YAAYC,YAAYlB,IAAI,oBAAoB;AAEhD,QAAA,CAACmB,eAAeC,WAAW,IAAIC,YACnCpB,sBACAC,iBACAC,MACAO,QACAD,SACAL,QAAQ;AAGV,QAAMkB,kBAAkBA,CACtBC,OAGAC,OACAC,UACG;AACHF,UAAMG,eAAgB;AAEtB,UAAMC,kBAAkBA,MAAM;AAC5BvB,2CAAWmB,OAAOE;AAAAA,IAAK;AAGbF,gBAAAA,OAAOC,OAAOC,OAAOE,eAAe;AAAA,EAAA;AAG5CC,QAAAA,kBAAkBC,QAAQ,MAAM;AAC7BpB,WAAAA,QAAQqB,IAAKC,CAAW,WAAA;AAC7B,aAAOC,YAAYD,OAAOE,OAAO,OAAOrB,iBAAiB,KAAK;AAAA,IAAA,CAC/D;AAAA,EAAA,GACA,CAACH,SAASG,eAAe,CAAC;AAE7B,QAAMsB,OAAOzB,QAAQqB,IAAI,CAACC,QAAQN,UAAU;AAC1C,UAAMU,WAAWhB,kBAAkBM;AAC7BW,UAAAA,iBAAiBR,gBAAgBH,KAAK;AAE5C,+BACGY,0BAAwB;AAAA,MACvBrC,IAAIsC,MAAMrB,WAAY,QAAOQ,OAAO;AAAA,MACpCpB,SAAUkB,CAAU,UAAA;AACFA,wBAAAA,OAAOQ,OAAOP,OAAOC,KAAK;AAC1CpB,2CAAUkB,OAAOE;AAAAA,MACnB;AAAA,MACAc,WAAYhB,CAAU,UAAA;AACpB,YAAIiB,WAAWjB,OAAO1B,KAAK,MAAM,MAAM;AACrB0B,0BAAAA,OAAOQ,OAAOP,OAAOC,KAAK;AAC1CnB,6CAAUiB,OAAOE;AAAAA,QACnB;AAAA,MACF;AAAA,MACAW;AAAAA,MACAD;AAAAA,MAEA,cAAYJ,OAAOE;AAAAA,IADdF,GAAAA,OAAOU,OAAOV,OAAOE,KAAK;AAAA,EAAA,CAIpC;AAEKS,QAAAA,iBAAiBC,sBAAsBlC,QAAQmC,MAAM;AAE3D,6BACGC,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,0BACP,MAAA;AAAA,MACEzC,WAAWyC,GACTC,wBAAwBC,MACxBvC,aAAa,WAAWsC,wBAAwBE,eAChDxC,aAAa,cAAcsC,wBAAwBG,kBACnDL,IAAIM,OAAOH,IAAI,GACfH,IAAI;AAAA,QACFO,iBAAiBC,KACfzC,2CAAa0C,OAAOC,MAAM1C,cAAc2C,OACxC5C,2CAAa6C,SAASC,sBAAsB;AAAA,MAE/C,CAAA,GACDjD,aAAa,WAAWoC,IAAIL,eAAeS,aAAa,GACxDxC,aAAa,cAAcoC,IAAIL,eAAeU,gBAAgB,GAC9D7C,WACAC,mCAAS0C,MACTvC,aAAa,YAAWH,mCAAS2C,gBACjCxC,aAAa,eAAcH,mCAAS4C,iBAAgB;AAAA,MAEtDpD,IAAIiB;AAAAA,MAAU,GACVJ;AAAAA,MAAMiC,UAETZ;AAAAA,IAAAA,CAAI;AAAA,EAAA,CAGE;AAEjB;"}

package/dist/esm/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.js

@@ -1,6 +1,5 @@
 import verticalScrollListItemClasses from "./verticalScrollListItemClasses.js";
 import { ClassNames } from "@emotion/react";
-import { clsx } from "clsx";
 import { styles } from "./VerticalScrollListItem.styles.js";
 import { useCallback } from "react";
 import { CurrentStep } from "@hitachivantara/uikit-react-icons";
@@ -28,9 +27,10 @@ const HvVerticalScrollListItem = ({
   const NotSelected = useCallback(() => {
     return /* @__PURE__ */ jsx(ClassNames, {
       children: ({
-        css
+        css,
+        cx
       }) => /* @__PURE__ */ jsx("div", {
-        className: clsx(classes == null ? void 0 : classes.notSelected, verticalScrollListItemClasses.notSelected, css(styles.notSelected))
+        className: cx(verticalScrollListItemClasses.notSelected, css(styles.notSelected), classes == null ? void 0 : classes.notSelected)
       })
     });
   }, [classes == null ? void 0 : classes.notSelected]);
@@ -40,10 +40,11 @@ const HvVerticalScrollListItem = ({
   }) : /* @__PURE__ */ jsx(NotSelected, {});
   return /* @__PURE__ */ jsx(ClassNames, {
     children: ({
-      css
+      css,
+      cx
     }) => /* @__PURE__ */ jsx("li", {
       id,
-      className: clsx(className, classes == null ? void 0 : classes.root, verticalScrollListItemClasses.root, css(styles.root)),
+      className: cx(verticalScrollListItemClasses.root, css(styles.root), className, classes == null ? void 0 : classes.root),
       "aria-current": selected,
       children: /* @__PURE__ */ jsx("div", {
         id: buttonId,
@@ -51,13 +52,13 @@ const HvVerticalScrollListItem = ({
         tabIndex: 0,
         onClick,
         onKeyDown,
-        className: clsx(classes == null ? void 0 : classes.button, verticalScrollListItemClasses.button, css(styles.button)),
+        className: cx(verticalScrollListItemClasses.button, css(styles.button), classes == null ? void 0 : classes.button),
         "aria-label": ariaLabel,
         "aria-labelledby": labelId,
         ...others,
         children: /* @__PURE__ */ jsx(Tooltip, {
           id: labelId,
-          className: clsx(classes == null ? void 0 : classes.text, verticalScrollListItemClasses.text, css(styles.text)),
+          className: cx(verticalScrollListItemClasses.text, css(styles.text), classes == null ? void 0 : classes.text),
           variant,
           children: icon
         })

package/dist/esm/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"VerticalScrollListItem.js","sources":["../../../../../../src/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types\";\nimport verticalScrollListItemClasses, {\n  HvVerticalScrollListItemClasses,\n} from \"./verticalScrollListItemClasses\";\nimport { ClassNames } from \"@emotion/react\";\nimport { clsx } from \"clsx\";\nimport { styles } from \"./VerticalScrollListItem.styles\";\nimport { HvTypographyProps } from \"@core/components\";\nimport { setId } from \"@core/utils\";\nimport { useCallback } from \"react\";\nimport { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\nimport { useTheme } from \"@core/hooks\";\n\nexport interface HvVerticalScrollListItemProps extends HvBaseProps {\n  /** A function component that renders a typography wrapped with a tooltip. */\n  tooltipWrapper: React.FunctionComponent<{\n    id?: string;\n    className?: string;\n    variant?: HvTypographyProps[\"variant\"];\n    children?: React.ReactNode;\n  }>;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvVerticalScrollListItemClasses;\n  /** Whether the element is selected. */\n  selected?: boolean;\n  /** The function to be executed when the element is clicked. */\n  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;\n  /** The function to be executed when the element is clicked. */\n  onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n}\n\n/**\n * HvVerticalScrollListItem a focusable item to be used as part of the vertical scroll\n */\nexport const HvVerticalScrollListItem = ({\n  id,\n  className,\n  classes,\n  selected,\n  \"aria-label\": ariaLabel,\n  onClick,\n  onKeyDown,\n  tooltipWrapper,\n  ...others\n}: HvVerticalScrollListItemProps) => {\n  const { activeTheme } = useTheme();\n\n  const variant: HvTypographyProps[\"variant\"] = selected ? \"label\" : \"body\";\n\n  const labelId = setId(id, \"label\");\n\n  const buttonId = setId(id, \"button\");\n\n  const Tooltip = tooltipWrapper;\n\n  const NotSelected = useCallback(() => {\n    return (\n      <ClassNames>\n        {({ css }) => (\n          <div\n            className={clsx(\n              classes?.notSelected,\n              verticalScrollListItemClasses.notSelected,\n              css(styles.notSelected)\n            )}\n          />\n        )}\n      </ClassNames>\n    );\n  }, [classes?.notSelected]);\n\n  const icon = selected ? (\n    <CurrentStep\n      height={activeTheme?.scrollTo.dotSelectedSize}\n      width={activeTheme?.scrollTo.dotSelectedSize}\n    />\n  ) : (\n    <NotSelected />\n  );\n\n  return (\n    <ClassNames>\n      {({ css }) => (\n        <li\n          id={id}\n          className={clsx(\n            className,\n            classes?.root,\n            verticalScrollListItemClasses.root,\n            css(styles.root)\n          )}\n          aria-current={selected}\n        >\n          <div\n            id={buttonId}\n            role=\"button\"\n            tabIndex={0}\n            onClick={onClick}\n            onKeyDown={onKeyDown}\n            className={clsx(\n              classes?.button,\n              verticalScrollListItemClasses.button,\n              css(styles.button)\n            )}\n            aria-label={ariaLabel}\n            aria-labelledby={labelId}\n            {...others}\n          >\n            <Tooltip\n              id={labelId}\n              className={clsx(\n                classes?.text,\n                verticalScrollListItemClasses.text,\n                css(styles.text)\n              )}\n              variant={variant}\n            >\n              {icon}\n            </Tooltip>\n          </div>\n        </li>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["HvVerticalScrollListItem","id","className","classes","selected","ariaLabel","onClick","onKeyDown","tooltipWrapper","others","activeTheme","useTheme","variant","labelId","setId","buttonId","Tooltip","NotSelected","useCallback","ClassNames","children","css","clsx","notSelected","verticalScrollListItemClasses","styles","icon","_jsx","CurrentStep","height","scrollTo","dotSelectedSize","width","root","role","tabIndex","button","text"],"mappings":";;;;;;;;;AAkCO,MAAMA,2BAA2BA,CAAC;AAAA,EACvCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,cAAcC;AAAAA,EACdC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AAC0B,MAAM;AAC7B,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAU;AAE5BC,QAAAA,UAAwCR,WAAW,UAAU;AAE7DS,QAAAA,UAAUC,MAAMb,IAAI,OAAO;AAE3Bc,QAAAA,WAAWD,MAAMb,IAAI,QAAQ;AAEnC,QAAMe,UAAUR;AAEVS,QAAAA,cAAcC,YAAY,MAAM;AACpC,+BACGC,YAAU;AAAA,MAAAC,UACRA,CAAC;AAAA,QAAEC;AAAAA,MAAAA,0BACF,OAAA;AAAA,QACEnB,WAAWoB,KACTnB,mCAASoB,aACTC,8BAA8BD,aAC9BF,IAAII,OAAOF,WAAW,CAAC;AAAA,MAAA,CACvB;AAAA,IAAA,CAGK;AAAA,EAAA,GAEd,CAACpB,mCAASoB,WAAW,CAAC;AAEnBG,QAAAA,OAAOtB,WACXuB,oBAACC,aAAW;AAAA,IACVC,QAAQnB,2CAAaoB,SAASC;AAAAA,IAC9BC,OAAOtB,2CAAaoB,SAASC;AAAAA,EAAgB,CAAA,IAG9Cd,oBAAAA,aACF,CAAA,CAAA;AAED,6BACGE,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,IAAAA,0BACF,MAAA;AAAA,MACEpB;AAAAA,MACAC,WAAWoB,KACTpB,WACAC,mCAAS8B,MACTT,8BAA8BS,MAC9BZ,IAAII,OAAOQ,IAAI,CAAC;AAAA,MAElB,gBAAc7B;AAAAA,MAASgB,8BAEvB,OAAA;AAAA,QACEnB,IAAIc;AAAAA,QACJmB,MAAK;AAAA,QACLC,UAAU;AAAA,QACV7B;AAAAA,QACAC;AAAAA,QACAL,WAAWoB,KACTnB,mCAASiC,QACTZ,8BAA8BY,QAC9Bf,IAAII,OAAOW,MAAM,CAAC;AAAA,QAEpB,cAAY/B;AAAAA,QACZ,mBAAiBQ;AAAAA,QAAQ,GACrBJ;AAAAA,QAAMW,8BAETJ,SAAO;AAAA,UACNf,IAAIY;AAAAA,UACJX,WAAWoB,KACTnB,mCAASkC,MACTb,8BAA8Ba,MAC9BhB,IAAII,OAAOY,IAAI,CAAC;AAAA,UAElBzB;AAAAA,UAAiBQ,UAEhBM;AAAAA,QAAAA,CAAI;AAAA,MAAA,CACG;AAAA,IAAA,CACN;AAAA,EAAA,CAGC;AAEjB;"}
+{"version":3,"file":"VerticalScrollListItem.js","sources":["../../../../../../src/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types\";\nimport verticalScrollListItemClasses, {\n  HvVerticalScrollListItemClasses,\n} from \"./verticalScrollListItemClasses\";\nimport { ClassNames } from \"@emotion/react\";\nimport { styles } from \"./VerticalScrollListItem.styles\";\nimport { HvTypographyProps } from \"@core/components\";\nimport { setId } from \"@core/utils\";\nimport { useCallback } from \"react\";\nimport { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\nimport { useTheme } from \"@core/hooks\";\n\nexport interface HvVerticalScrollListItemProps extends HvBaseProps {\n  /** A function component that renders a typography wrapped with a tooltip. */\n  tooltipWrapper: React.FunctionComponent<{\n    id?: string;\n    className?: string;\n    variant?: HvTypographyProps[\"variant\"];\n    children?: React.ReactNode;\n  }>;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvVerticalScrollListItemClasses;\n  /** Whether the element is selected. */\n  selected?: boolean;\n  /** The function to be executed when the element is clicked. */\n  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;\n  /** The function to be executed when the element is clicked. */\n  onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n}\n\n/**\n * HvVerticalScrollListItem a focusable item to be used as part of the vertical scroll\n */\nexport const HvVerticalScrollListItem = ({\n  id,\n  className,\n  classes,\n  selected,\n  \"aria-label\": ariaLabel,\n  onClick,\n  onKeyDown,\n  tooltipWrapper,\n  ...others\n}: HvVerticalScrollListItemProps) => {\n  const { activeTheme } = useTheme();\n\n  const variant: HvTypographyProps[\"variant\"] = selected ? \"label\" : \"body\";\n\n  const labelId = setId(id, \"label\");\n\n  const buttonId = setId(id, \"button\");\n\n  const Tooltip = tooltipWrapper;\n\n  const NotSelected = useCallback(() => {\n    return (\n      <ClassNames>\n        {({ css, cx }) => (\n          <div\n            className={cx(\n              verticalScrollListItemClasses.notSelected,\n              css(styles.notSelected),\n              classes?.notSelected\n            )}\n          />\n        )}\n      </ClassNames>\n    );\n  }, [classes?.notSelected]);\n\n  const icon = selected ? (\n    <CurrentStep\n      height={activeTheme?.scrollTo.dotSelectedSize}\n      width={activeTheme?.scrollTo.dotSelectedSize}\n    />\n  ) : (\n    <NotSelected />\n  );\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <li\n          id={id}\n          className={cx(\n            verticalScrollListItemClasses.root,\n            css(styles.root),\n            className,\n            classes?.root\n          )}\n          aria-current={selected}\n        >\n          <div\n            id={buttonId}\n            role=\"button\"\n            tabIndex={0}\n            onClick={onClick}\n            onKeyDown={onKeyDown}\n            className={cx(\n              verticalScrollListItemClasses.button,\n              css(styles.button),\n              classes?.button\n            )}\n            aria-label={ariaLabel}\n            aria-labelledby={labelId}\n            {...others}\n          >\n            <Tooltip\n              id={labelId}\n              className={cx(\n                verticalScrollListItemClasses.text,\n                css(styles.text),\n                classes?.text\n              )}\n              variant={variant}\n            >\n              {icon}\n            </Tooltip>\n          </div>\n        </li>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["HvVerticalScrollListItem","id","className","classes","selected","ariaLabel","onClick","onKeyDown","tooltipWrapper","others","activeTheme","useTheme","variant","labelId","setId","buttonId","Tooltip","NotSelected","useCallback","ClassNames","children","css","cx","verticalScrollListItemClasses","notSelected","styles","icon","_jsx","CurrentStep","height","scrollTo","dotSelectedSize","width","root","role","tabIndex","button","text"],"mappings":";;;;;;;;AAiCO,MAAMA,2BAA2BA,CAAC;AAAA,EACvCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,cAAcC;AAAAA,EACdC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AAC0B,MAAM;AAC7B,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAU;AAE5BC,QAAAA,UAAwCR,WAAW,UAAU;AAE7DS,QAAAA,UAAUC,MAAMb,IAAI,OAAO;AAE3Bc,QAAAA,WAAWD,MAAMb,IAAI,QAAQ;AAEnC,QAAMe,UAAUR;AAEVS,QAAAA,cAAcC,YAAY,MAAM;AACpC,+BACGC,YAAU;AAAA,MAAAC,UACRA,CAAC;AAAA,QAAEC;AAAAA,QAAKC;AAAAA,MAAAA,0BACP,OAAA;AAAA,QACEpB,WAAWoB,GACTC,8BAA8BC,aAC9BH,IAAII,OAAOD,WAAW,GACtBrB,mCAASqB,WAAW;AAAA,MAAA,CACpB;AAAA,IAAA,CAGK;AAAA,EAAA,GAEd,CAACrB,mCAASqB,WAAW,CAAC;AAEnBE,QAAAA,OAAOtB,WACXuB,oBAACC,aAAW;AAAA,IACVC,QAAQnB,2CAAaoB,SAASC;AAAAA,IAC9BC,OAAOtB,2CAAaoB,SAASC;AAAAA,EAAgB,CAAA,IAG9Cd,oBAAAA,aACF,CAAA,CAAA;AAED,6BACGE,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,0BACP,MAAA;AAAA,MACErB;AAAAA,MACAC,WAAWoB,GACTC,8BAA8BU,MAC9BZ,IAAII,OAAOQ,IAAI,GACf/B,WACAC,mCAAS8B,IAAI;AAAA,MAEf,gBAAc7B;AAAAA,MAASgB,8BAEvB,OAAA;AAAA,QACEnB,IAAIc;AAAAA,QACJmB,MAAK;AAAA,QACLC,UAAU;AAAA,QACV7B;AAAAA,QACAC;AAAAA,QACAL,WAAWoB,GACTC,8BAA8Ba,QAC9Bf,IAAII,OAAOW,MAAM,GACjBjC,mCAASiC,MAAM;AAAA,QAEjB,cAAY/B;AAAAA,QACZ,mBAAiBQ;AAAAA,QAAQ,GACrBJ;AAAAA,QAAMW,8BAETJ,SAAO;AAAA,UACNf,IAAIY;AAAAA,UACJX,WAAWoB,GACTC,8BAA8Bc,MAC9BhB,IAAII,OAAOY,IAAI,GACflC,mCAASkC,IAAI;AAAA,UAEfzB;AAAAA,UAAiBQ,UAEhBM;AAAAA,QAAAA,CAAI;AAAA,MAAA,CACG;AAAA,IAAA,CACN;AAAA,EAAA,CAGC;AAEjB;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "5.7.0",
+  "version": "5.7.2",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Core React components for the NEXT Design System.",
@@ -30,9 +30,9 @@
   },
   "dependencies": {
     "@emotion/cache": "^11.10.5",
-    "@hitachivantara/uikit-react-icons": "^5.1.5",
-    "@hitachivantara/uikit-react-shared": "^5.0.9",
-    "@hitachivantara/uikit-styles": "^5.6.0",
+    "@hitachivantara/uikit-react-icons": "^5.1.6",
+    "@hitachivantara/uikit-react-shared": "^5.0.10",
+    "@hitachivantara/uikit-styles": "^5.6.1",
     "@popperjs/core": "^2.11.6",
     "@types/react-table": "^7.7.14",
     "attr-accept": "^2.2.2",
@@ -57,7 +57,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "70863685a81d8e910d8b1c36c044e978e7d9a6bc",
+  "gitHead": "fb34c79ad1d84a7e75393430ded908c63ef29b5c",
   "main": "dist/cjs/index.cjs",
   "exports": {
     ".": {