@hitachivantara/uikit-react-core 5.17.0 → 5.18.0

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalScrollListItem.styles.js","sources":["../../../../../../src/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.tsx"],"sourcesContent":["import { outlineStyles } from \"@core/utils\";\nimport { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport scrollToHorizontalClasses from \"../scrollToHorizontalClasses\";\nimport { HvHorizontalScrollListItemClasses } from \"./horizontalScrollListItemClasses\";\n\nexport const styles: Partial<\n  Record<keyof HvHorizontalScrollListItemClasses, CSSInterpolation>\n> = {\n  root: {\n    padding: \"10px 0\",\n  },\n  button: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    height: theme.scrollTo.horizontal.buttonHeight,\n    cursor: \"pointer\",\n    borderBottom: theme.scrollTo.horizontal.buttonBottomBorder,\n    \"&:hover\": {\n      backgroundColor: theme.scrollTo.horizontal.buttonHoverBackgroundColor,\n\n      [`& .${scrollToHorizontalClasses.notSelected}`]: {\n        height: theme.scrollTo.dotHoverSize,\n        width: theme.scrollTo.dotHoverSize,\n        backgroundColor: theme.scrollTo.dotHoverColor,\n      },\n\n      [`& .${scrollToHorizontalClasses.notSelectedRoot}`]: {\n        backgroundColor: theme.scrollTo.dotHoverBackgroundColor,\n      },\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n  },\n  text: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    height: theme.scrollTo.horizontal.buttonHeight,\n    borderBottom: theme.scrollTo.horizontal.buttonBottomBorder,\n\n    \"& p\": {\n      padding: theme.scrollTo.horizontal.textPadding,\n      maxWidth: theme.scrollTo.horizontal.textMaxWidth,\n      textOverflow: \"ellipsis\",\n      overflow: \"hidden\",\n    },\n  },\n  selected: {\n    borderBottom: theme.scrollTo.horizontal.selectedButtonBottomBorder,\n  },\n};\n"],"names":["styles","root","padding","button","display","justifyContent","alignItems","height","theme","scrollTo","horizontal","buttonHeight","cursor","borderBottom","buttonBottomBorder","backgroundColor","buttonHoverBackgroundColor","scrollToHorizontalClasses","notSelected","dotHoverSize","width","dotHoverColor","notSelectedRoot","dotHoverBackgroundColor","outline","outlineStyles","text","flexDirection","textPadding","maxWidth","textMaxWidth","textOverflow","overflow","selected","selectedButtonBottomBorder"],"mappings":";;;AAMO,MAAMA,SAET;AAAA,EACFC,MAAM;AAAA,IACJC,SAAS;AAAA,EACX;AAAA,EACAC,QAAQ;AAAA,IACNC,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZC,QAAQC,MAAMC,SAASC,WAAWC;AAAAA,IAClCC,QAAQ;AAAA,IACRC,cAAcL,MAAMC,SAASC,WAAWI;AAAAA,IACxC,WAAW;AAAA,MACTC,iBAAiBP,MAAMC,SAASC,WAAWM;AAAAA,MAE3C,CAAE,MAAKC,0BAA0BC,aAAa,GAAG;AAAA,QAC/CX,QAAQC,MAAMC,SAASU;AAAAA,QACvBC,OAAOZ,MAAMC,SAASU;AAAAA,QACtBJ,iBAAiBP,MAAMC,SAASY;AAAAA,MAClC;AAAA,MAEA,CAAE,MAAKJ,0BAA0BK,iBAAiB,GAAG;AAAA,QACnDP,iBAAiBP,MAAMC,SAASc;AAAAA,MAClC;AAAA,IACF;AAAA,IACA,WAAW;AAAA,MACTC,SAAS;AAAA,IACX;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAGC;AAAAA,IACL;AAAA,EACF;AAAA,EACAC,MAAM;AAAA,IACJtB,SAAS;AAAA,IACTuB,eAAe;AAAA,IACfrB,YAAY;AAAA,IACZD,gBAAgB;AAAA,IAChBE,QAAQC,MAAMC,SAASC,WAAWC;AAAAA,IAClCE,cAAcL,MAAMC,SAASC,WAAWI;AAAAA,IAExC,OAAO;AAAA,MACLZ,SAASM,MAAMC,SAASC,WAAWkB;AAAAA,MACnCC,UAAUrB,MAAMC,SAASC,WAAWoB;AAAAA,MACpCC,cAAc;AAAA,MACdC,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EACAC,UAAU;AAAA,IACRpB,cAAcL,MAAMC,SAASC,WAAWwB;AAAAA,EAC1C;AACF;"}
+{"version":3,"file":"HorizontalScrollListItem.styles.js","sources":["../../../../../../src/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.tsx"],"sourcesContent":["import { createClasses, outlineStyles } from \"@core/utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nconst name = \"HvHorizontalScrollListItem\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n  root: {\n    padding: \"10px 0\",\n  },\n  button: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    height: theme.scrollTo.horizontal.buttonHeight,\n    cursor: \"pointer\",\n    borderBottom: theme.scrollTo.horizontal.buttonBottomBorder,\n    \"&:hover\": {\n      backgroundColor: theme.scrollTo.horizontal.buttonHoverBackgroundColor,\n\n      \"& $notSelected\": {\n        height: theme.scrollTo.dotHoverSize,\n        width: theme.scrollTo.dotHoverSize,\n        backgroundColor: theme.scrollTo.dotHoverColor,\n      },\n\n      \"& $notSelectedRoot\": {\n        backgroundColor: theme.scrollTo.dotHoverBackgroundColor,\n      },\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n  },\n  text: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    height: theme.scrollTo.horizontal.buttonHeight,\n    borderBottom: theme.scrollTo.horizontal.buttonBottomBorder,\n\n    \"& p\": {\n      padding: theme.scrollTo.horizontal.textPadding,\n      maxWidth: theme.scrollTo.horizontal.textMaxWidth,\n      textOverflow: \"ellipsis\",\n      overflow: \"hidden\",\n    },\n  },\n  selected: {\n    borderBottom: theme.scrollTo.horizontal.selectedButtonBottomBorder,\n  },\n});\n"],"names":["name","staticClasses","useClasses","createClasses","root","padding","button","display","justifyContent","alignItems","height","theme","scrollTo","horizontal","buttonHeight","cursor","borderBottom","buttonBottomBorder","backgroundColor","buttonHoverBackgroundColor","dotHoverSize","width","dotHoverColor","dotHoverBackgroundColor","outline","outlineStyles","text","flexDirection","textPadding","maxWidth","textMaxWidth","textOverflow","overflow","selected","selectedButtonBottomBorder"],"mappings":";;;AAGA,MAAMA,OAAO;AAEA,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,cAAcH,MAAM;AAAA,EAC/DI,MAAM;AAAA,IACJC,SAAS;AAAA,EACX;AAAA,EACAC,QAAQ;AAAA,IACNC,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZC,QAAQC,MAAMC,SAASC,WAAWC;AAAAA,IAClCC,QAAQ;AAAA,IACRC,cAAcL,MAAMC,SAASC,WAAWI;AAAAA,IACxC,WAAW;AAAA,MACTC,iBAAiBP,MAAMC,SAASC,WAAWM;AAAAA,MAE3C,kBAAkB;AAAA,QAChBT,QAAQC,MAAMC,SAASQ;AAAAA,QACvBC,OAAOV,MAAMC,SAASQ;AAAAA,QACtBF,iBAAiBP,MAAMC,SAASU;AAAAA,MAClC;AAAA,MAEA,sBAAsB;AAAA,QACpBJ,iBAAiBP,MAAMC,SAASW;AAAAA,MAClC;AAAA,IACF;AAAA,IACA,WAAW;AAAA,MACTC,SAAS;AAAA,IACX;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAGC;AAAAA,IACL;AAAA,EACF;AAAA,EACAC,MAAM;AAAA,IACJnB,SAAS;AAAA,IACToB,eAAe;AAAA,IACflB,YAAY;AAAA,IACZD,gBAAgB;AAAA,IAChBE,QAAQC,MAAMC,SAASC,WAAWC;AAAAA,IAClCE,cAAcL,MAAMC,SAASC,WAAWI;AAAAA,IAExC,OAAO;AAAA,MACLZ,SAASM,MAAMC,SAASC,WAAWe;AAAAA,MACnCC,UAAUlB,MAAMC,SAASC,WAAWiB;AAAAA,MACpCC,cAAc;AAAA,MACdC,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EACAC,UAAU;AAAA,IACRjB,cAAcL,MAAMC,SAASC,WAAWqB;AAAAA,EAC1C;AACF,CAAC;"}

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

@@ -1,4 +1,3 @@
-import { ClassNames } from "@emotion/react";
 import { useMemo, useCallback } from "react";
 import { useTheme } from "@mui/material/styles";
 import { theme } from "@hitachivantara/uikit-styles";
@@ -7,8 +6,8 @@ import { CurrentStep } from "@hitachivantara/uikit-react-icons";
 import { useMediaQuery } from "@mui/material";
 import { withTooltip } from "../withTooltip.js";
 import { useScrollTo } from "../useScrollTo.js";
-import { styles } from "./ScrollToHorizontal.styles.js";
-import scrollToHorizontalClasses from "./scrollToHorizontalClasses.js";
+import { useClasses } from "./ScrollToHorizontal.styles.js";
+import { staticClasses } from "./ScrollToHorizontal.styles.js";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import useUniqueId from "../../../hooks/useUniqueId.js";
 import { HvHorizontalScrollListItem } from "./HorizontalScrollListItem/HorizontalScrollListItem.js";
@@ -28,13 +27,18 @@ const HvScrollToHorizontal = ({
   onClick,
   onEnter,
   className,
-  classes,
+  classes: classesProp,
   options,
   offset = 0,
   position = "relative",
   tooltipPosition = "top",
   ...others
 }) => {
+  const {
+    classes,
+    css,
+    cx
+  } = useClasses(classesProp);
   const muiTheme = useTheme();
   const downSm = useMediaQuery(muiTheme.breakpoints.down("sm"));
   const upMd = useMediaQuery(muiTheme.breakpoints.up("md"));
@@ -57,30 +61,20 @@ const HvScrollToHorizontal = ({
     });
   }, [options, tooltipPosition]);
   const NotSelected = useCallback(() => {
-    return /* @__PURE__ */ jsx(ClassNames, {
-      children: ({
-        css,
-        cx
-      }) => /* @__PURE__ */ jsx("div", {
-        className: cx(scrollToHorizontalClasses.notSelectedRoot, css(styles.notSelectedRoot), classes == null ? void 0 : classes.notSelectedRoot),
-        children: /* @__PURE__ */ jsx("div", {
-          className: cx(scrollToHorizontalClasses.notSelected, css(styles.notSelected), classes == null ? void 0 : classes.notSelected)
-        })
+    return /* @__PURE__ */ jsx("div", {
+      className: classes.notSelectedRoot,
+      children: /* @__PURE__ */ jsx("div", {
+        className: classes.notSelected
       })
     });
-  }, [classes == null ? void 0 : classes.notSelectedRoot, classes == null ? void 0 : classes.notSelected]);
+  }, [classes.notSelectedRoot, classes.notSelected]);
   const Selected = useCallback(() => {
-    return /* @__PURE__ */ jsx(ClassNames, {
-      children: ({
-        css,
-        cx
-      }) => /* @__PURE__ */ jsx(CurrentStep, {
-        height: activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize,
-        width: activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize,
-        className: cx(scrollToHorizontalClasses.selected, css(styles.selected), classes == null ? void 0 : classes.selected)
-      })
+    return /* @__PURE__ */ jsx(CurrentStep, {
+      height: activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize,
+      width: activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize,
+      className: classes.selected
     });
-  }, [classes == null ? void 0 : classes.selected, activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize]);
+  }, [classes.selected, activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize]);
   const tabs = options.map((option, index) => {
     const selected = selectedIndex === index;
     const tooltipWrapper = tooltipWrappers[index];
@@ -103,26 +97,25 @@ const HvScrollToHorizontal = ({
       }), selected ? /* @__PURE__ */ jsx(Selected, {}) : /* @__PURE__ */ jsx(NotSelected, {})]
     }, option.key || option.label);
   });
-  return /* @__PURE__ */ jsx(ClassNames, {
-    children: ({
-      css,
-      cx
-    }) => /* @__PURE__ */ jsx("ol", {
-      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" && 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
-    })
+  return /* @__PURE__ */ jsx("ol", {
+    className: cx(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)
+    }), className, classes.root, {
+      [classes.positionSticky]: position === "sticky",
+      [classes.positionFixed]: position === "fixed"
+    }),
+    id: elementId,
+    ...others,
+    children: tabs
   });
 };
 export {
-  HvScrollToHorizontal
+  HvScrollToHorizontal,
+  staticClasses as scrollToHorizontalClasses
 };
 //# sourceMappingURL=ScrollToHorizontal.js.map

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 { ClassNames } from \"@emotion/react\";\nimport { useTheme, useUniqueId } from \"@core/hooks\";\nimport { isKeypress, keyboardCodes, setId } from \"@core/utils\";\nimport { useCallback, useMemo } from \"react\";\nimport { useTheme as useMuiTheme } from \"@mui/material/styles\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport fade from \"@core/utils/hexToRgbA\";\nimport { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\nimport { useMediaQuery } from \"@mui/material\";\nimport { HvScrollToTooltipPositions } from \"../types\";\nimport { withTooltip } from \"../withTooltip\";\nimport { HvHorizontalScrollListItem } from \"./HorizontalScrollListItem\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { styles } from \"./ScrollToHorizontal.styles\";\nimport scrollToHorizontalClasses, {\n  HvScrollToHorizontalClasses,\n} from \"./scrollToHorizontalClasses\";\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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"}
+{"version":3,"file":"ScrollToHorizontal.js","sources":["../../../../../src/components/ScrollTo/Horizontal/ScrollToHorizontal.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types\";\nimport { useTheme, useUniqueId } from \"@core/hooks\";\nimport { ExtractNames, isKeypress, keyboardCodes, setId } from \"@core/utils\";\nimport { useCallback, useMemo } from \"react\";\nimport { useTheme as useMuiTheme } from \"@mui/material/styles\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport fade from \"@core/utils/hexToRgbA\";\nimport { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\nimport { useMediaQuery } from \"@mui/material\";\nimport { HvScrollToTooltipPositions } from \"../types\";\nimport { withTooltip } from \"../withTooltip\";\nimport { HvHorizontalScrollListItem } from \"./HorizontalScrollListItem\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { staticClasses, useClasses } from \"./ScrollToHorizontal.styles\";\n\nconst { Enter } = keyboardCodes;\n\nexport { staticClasses as scrollToHorizontalClasses };\n\nexport type HvScrollToHorizontalClasses = ExtractNames<typeof useClasses>;\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: classesProp,\n  options,\n  offset = 0,\n  position = \"relative\",\n  tooltipPosition = \"top\",\n  ...others\n}: HvScrollToHorizontalProps) => {\n  const { classes, css, cx } = useClasses(classesProp);\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      <div className={classes.notSelectedRoot}>\n        <div className={classes.notSelected} />\n      </div>\n    );\n  }, [classes.notSelectedRoot, classes.notSelected]);\n\n  const Selected = useCallback(() => {\n    return (\n      <CurrentStep\n        height={activeTheme?.scrollTo.dotSelectedSize}\n        width={activeTheme?.scrollTo.dotSelectedSize}\n        className={classes.selected}\n      />\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    <ol\n      className={cx(\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        className,\n        classes.root,\n        {\n          [classes.positionSticky]: position === \"sticky\",\n          [classes.positionFixed]: position === \"fixed\",\n        }\n      )}\n      id={elementId}\n      {...others}\n    >\n      {tabs}\n    </ol>\n  );\n};\n"],"names":["Enter","keyboardCodes","HvScrollToHorizontal","id","defaultSelectedIndex","scrollElementId","href","onChange","onClick","onEnter","className","classes","classesProp","options","offset","position","tooltipPosition","others","css","cx","useClasses","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","notSelectedRoot","children","notSelected","Selected","CurrentStep","height","scrollTo","dotSelectedSize","width","selected","tabs","tooltipWrapper","HvHorizontalScrollListItem","setId","onKeyDown","isKeypress","_jsx","key","theme","spacing","marginTop","marginBottom","marginRight","marginLeft","backgroundColor","fade","colors","modes","atmo2","backgroundColorOpacity","root","positionSticky","positionFixed"],"mappings":"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"}

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

@@ -1,5 +1,10 @@
 import { theme } from "@hitachivantara/uikit-styles";
-const styles = {
+import { createClasses } from "../../../utils/classes.js";
+const name = "HvScrollToHorizontal";
+const {
+  staticClasses,
+  useClasses
+} = createClasses(name, {
   root: {
     display: "flex",
     padding: "0 30px",
@@ -39,8 +44,9 @@ const styles = {
     height: theme.scrollTo.dotRootSize,
     width: theme.scrollTo.dotRootSize
   }
-};
+});
 export {
-  styles
+  staticClasses,
+  useClasses
 };
 //# sourceMappingURL=ScrollToHorizontal.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ScrollToHorizontal.styles.js","sources":["../../../../../src/components/ScrollTo/Horizontal/ScrollToHorizontal.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvScrollToHorizontalClasses } from \"./scrollToHorizontalClasses\";\n\nexport const styles: Partial<\n  Record<keyof HvScrollToHorizontalClasses, CSSInterpolation>\n> = {\n  root: {\n    display: \"flex\",\n    padding: \"0 30px\",\n    listStyleType: \"none\",\n    flexWrap: \"wrap\",\n    backdropFilter: `blur(${theme.scrollTo.backgroundColorBlur})`,\n  },\n  positionSticky: {\n    position: \"sticky\",\n    zIndex: `calc(${theme.zIndices.banner} - 2)`,\n    top: 0,\n    left: 0,\n  },\n  positionFixed: {\n    position: \"fixed\",\n    zIndex: `calc(${theme.zIndices.banner} - 2)`,\n    top: 0,\n    left: 0,\n  },\n  notSelectedRoot: {\n    display: theme.scrollTo.horizontal.dotDisplay,\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    height: theme.scrollTo.dotRootSize,\n    width: theme.scrollTo.dotRootSize,\n    borderRadius: theme.scrollTo.dotRootRadius,\n  },\n  notSelected: {\n    height: theme.scrollTo.dotNotSelectedSize,\n    width: theme.scrollTo.dotNotSelectedSize,\n    borderRadius: \"50%\",\n    display: \"inline-block\",\n    backgroundColor: theme.scrollTo.dotNotSelectedColor,\n  },\n  selected: {\n    display: theme.scrollTo.horizontal.dotDisplay,\n    height: theme.scrollTo.dotRootSize,\n    width: theme.scrollTo.dotRootSize,\n  },\n};\n"],"names":["styles","root","display","padding","listStyleType","flexWrap","backdropFilter","theme","scrollTo","backgroundColorBlur","positionSticky","position","zIndex","zIndices","banner","top","left","positionFixed","notSelectedRoot","horizontal","dotDisplay","justifyContent","alignItems","height","dotRootSize","width","borderRadius","dotRootRadius","notSelected","dotNotSelectedSize","backgroundColor","dotNotSelectedColor","selected"],"mappings":";AAIO,MAAMA,SAET;AAAA,EACFC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,UAAU;AAAA,IACVC,gBAAiB,QAAOC,MAAMC,SAASC;AAAAA,EACzC;AAAA,EACAC,gBAAgB;AAAA,IACdC,UAAU;AAAA,IACVC,QAAS,QAAOL,MAAMM,SAASC;AAAAA,IAC/BC,KAAK;AAAA,IACLC,MAAM;AAAA,EACR;AAAA,EACAC,eAAe;AAAA,IACbN,UAAU;AAAA,IACVC,QAAS,QAAOL,MAAMM,SAASC;AAAAA,IAC/BC,KAAK;AAAA,IACLC,MAAM;AAAA,EACR;AAAA,EACAE,iBAAiB;AAAA,IACfhB,SAASK,MAAMC,SAASW,WAAWC;AAAAA,IACnCC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZC,QAAQhB,MAAMC,SAASgB;AAAAA,IACvBC,OAAOlB,MAAMC,SAASgB;AAAAA,IACtBE,cAAcnB,MAAMC,SAASmB;AAAAA,EAC/B;AAAA,EACAC,aAAa;AAAA,IACXL,QAAQhB,MAAMC,SAASqB;AAAAA,IACvBJ,OAAOlB,MAAMC,SAASqB;AAAAA,IACtBH,cAAc;AAAA,IACdxB,SAAS;AAAA,IACT4B,iBAAiBvB,MAAMC,SAASuB;AAAAA,EAClC;AAAA,EACAC,UAAU;AAAA,IACR9B,SAASK,MAAMC,SAASW,WAAWC;AAAAA,IACnCG,QAAQhB,MAAMC,SAASgB;AAAAA,IACvBC,OAAOlB,MAAMC,SAASgB;AAAAA,EACxB;AACF;"}
+{"version":3,"file":"ScrollToHorizontal.styles.js","sources":["../../../../../src/components/ScrollTo/Horizontal/ScrollToHorizontal.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nconst name = \"HvScrollToHorizontal\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n  root: {\n    display: \"flex\",\n    padding: \"0 30px\",\n    listStyleType: \"none\",\n    flexWrap: \"wrap\",\n    backdropFilter: `blur(${theme.scrollTo.backgroundColorBlur})`,\n  },\n  positionSticky: {\n    position: \"sticky\",\n    zIndex: `calc(${theme.zIndices.banner} - 2)`,\n    top: 0,\n    left: 0,\n  },\n  positionFixed: {\n    position: \"fixed\",\n    zIndex: `calc(${theme.zIndices.banner} - 2)`,\n    top: 0,\n    left: 0,\n  },\n  notSelectedRoot: {\n    display: theme.scrollTo.horizontal.dotDisplay,\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    height: theme.scrollTo.dotRootSize,\n    width: theme.scrollTo.dotRootSize,\n    borderRadius: theme.scrollTo.dotRootRadius,\n  },\n  notSelected: {\n    height: theme.scrollTo.dotNotSelectedSize,\n    width: theme.scrollTo.dotNotSelectedSize,\n    borderRadius: \"50%\",\n    display: \"inline-block\",\n    backgroundColor: theme.scrollTo.dotNotSelectedColor,\n  },\n  selected: {\n    display: theme.scrollTo.horizontal.dotDisplay,\n    height: theme.scrollTo.dotRootSize,\n    width: theme.scrollTo.dotRootSize,\n  },\n});\n"],"names":["name","staticClasses","useClasses","createClasses","root","display","padding","listStyleType","flexWrap","backdropFilter","theme","scrollTo","backgroundColorBlur","positionSticky","position","zIndex","zIndices","banner","top","left","positionFixed","notSelectedRoot","horizontal","dotDisplay","justifyContent","alignItems","height","dotRootSize","width","borderRadius","dotRootRadius","notSelected","dotNotSelectedSize","backgroundColor","dotNotSelectedColor","selected"],"mappings":";;AAGA,MAAMA,OAAO;AAEA,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,cAAcH,MAAM;AAAA,EAC/DI,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,UAAU;AAAA,IACVC,gBAAiB,QAAOC,MAAMC,SAASC;AAAAA,EACzC;AAAA,EACAC,gBAAgB;AAAA,IACdC,UAAU;AAAA,IACVC,QAAS,QAAOL,MAAMM,SAASC;AAAAA,IAC/BC,KAAK;AAAA,IACLC,MAAM;AAAA,EACR;AAAA,EACAC,eAAe;AAAA,IACbN,UAAU;AAAA,IACVC,QAAS,QAAOL,MAAMM,SAASC;AAAAA,IAC/BC,KAAK;AAAA,IACLC,MAAM;AAAA,EACR;AAAA,EACAE,iBAAiB;AAAA,IACfhB,SAASK,MAAMC,SAASW,WAAWC;AAAAA,IACnCC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZC,QAAQhB,MAAMC,SAASgB;AAAAA,IACvBC,OAAOlB,MAAMC,SAASgB;AAAAA,IACtBE,cAAcnB,MAAMC,SAASmB;AAAAA,EAC/B;AAAA,EACAC,aAAa;AAAA,IACXL,QAAQhB,MAAMC,SAASqB;AAAAA,IACvBJ,OAAOlB,MAAMC,SAASqB;AAAAA,IACtBH,cAAc;AAAA,IACdxB,SAAS;AAAA,IACT4B,iBAAiBvB,MAAMC,SAASuB;AAAAA,EAClC;AAAA,EACAC,UAAU;AAAA,IACR9B,SAASK,MAAMC,SAASW,WAAWC;AAAAA,IACnCG,QAAQhB,MAAMC,SAASgB;AAAAA,IACvBC,OAAOlB,MAAMC,SAASgB;AAAAA,EACxB;AACF,CAAC;"}

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

@@ -1,8 +1,7 @@
 import { useMemo } from "react";
-import { ClassNames } from "@emotion/react";
 import fade from "../../../utils/hexToRgbA.js";
-import scrollToVerticalClasses from "./scrollToVerticalClasses.js";
-import { generateDynamicStyles, styles } from "./ScrollToVertical.styles.js";
+import { useClasses, calculateOffset } from "./ScrollToVertical.styles.js";
+import { staticClasses } from "./ScrollToVertical.styles.js";
 import { useScrollTo } from "../useScrollTo.js";
 import { withTooltip } from "../withTooltip.js";
 import { jsx } from "@emotion/react/jsx-runtime";
@@ -24,13 +23,19 @@ const HvScrollToVertical = ({
   onClick,
   onEnter,
   className,
-  classes,
+  classes: classesProp,
   options,
   offset = 0,
   position = "relative",
   tooltipPosition = "left",
+  style,
   ...others
 }) => {
+  const {
+    classes,
+    css,
+    cx
+  } = useClasses(classesProp);
   const {
     activeTheme,
     selectedMode
@@ -69,22 +74,26 @@ const HvScrollToVertical = ({
       "aria-label": option.label
     }, option.key || option.label);
   });
-  const dynamicClasses = generateDynamicStyles(options.length);
-  return /* @__PURE__ */ jsx(ClassNames, {
-    children: ({
-      css,
-      cx
-    }) => /* @__PURE__ */ jsx("ol", {
-      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" && 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
-    })
+  const positionOffset = calculateOffset(options.length);
+  const backgroundColor = fade(activeTheme == null ? void 0 : activeTheme.colors.modes[selectedMode].atmo2, activeTheme == null ? void 0 : activeTheme.scrollTo.backgroundColorOpacity);
+  return /* @__PURE__ */ jsx("ol", {
+    className: cx(css({
+      backgroundColor
+    }), className, classes.root, {
+      [classes.positionFixed]: position === "fixed",
+      [classes.positionAbsolute]: position === "absolute"
+    }),
+    style: {
+      top: `calc(50% - ${positionOffset}px)`,
+      ...style
+    },
+    id: elementId,
+    ...others,
+    children: tabs
   });
 };
 export {
-  HvScrollToVertical
+  HvScrollToVertical,
+  staticClasses as scrollToVerticalClasses
 };
 //# sourceMappingURL=ScrollToVertical.js.map

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 { useTheme, useUniqueId } from \"@core/hooks\";\nimport { isKeypress, keyboardCodes, setId } from \"@core/utils\";\nimport { useMemo } from \"react\";\nimport { ClassNames } from \"@emotion/react\";\nimport fade from \"@core/utils/hexToRgbA\";\nimport scrollToVerticalClasses, {\n  HvScrollToVerticalClasses,\n} from \"./scrollToVerticalClasses\";\nimport { generateDynamicStyles, styles } from \"./ScrollToVertical.styles\";\nimport { HvVerticalScrollListItem } from \"./VerticalScrollListItem\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { withTooltip } from \"../withTooltip\";\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,SAAS;AAEzCC,QAAAA,YAAYC,YAAYlB,IAAI,oBAAoB;AAEhD,QAAA,CAACmB,eAAeC,WAAW,IAAIC,YACnCpB,sBACAC,iBACAC,MACAO,QACAD,SACAL,QACF;AAEA,QAAMkB,kBAAkBA,CACtBC,OAGAC,OACAC,UACG;AACHF,UAAMG,eAAe;AAErB,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,KAE3B;AAAA,EAAA,CAEJ;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,sBACxB;AAAA,MACD,CAAA,GACDjD,aAAa,WAAWoC,IAAIL,eAAeS,aAAa,GACxDxC,aAAa,cAAcoC,IAAIL,eAAeU,gBAAgB,GAC9D7C,WACAC,mCAAS0C,MACTvC,aAAa,YAAWH,mCAAS2C,gBACjCxC,aAAa,eAAcH,mCAAS4C,iBACtC;AAAA,MACApD,IAAIiB;AAAAA,MAAU,GACVJ;AAAAA,MAAMiC,UAETZ;AAAAA,IAAAA,CACC;AAAA,EAAA,CAEI;AAEhB;"}
+{"version":3,"file":"ScrollToVertical.js","sources":["../../../../../src/components/ScrollTo/Vertical/ScrollToVertical.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types\";\nimport { useTheme, useUniqueId } from \"@core/hooks\";\nimport { ExtractNames, isKeypress, keyboardCodes, setId } from \"@core/utils\";\nimport { useMemo } from \"react\";\nimport fade from \"@core/utils/hexToRgbA\";\nimport {\n  staticClasses,\n  useClasses,\n  calculateOffset,\n} from \"./ScrollToVertical.styles\";\nimport { HvVerticalScrollListItem } from \"./VerticalScrollListItem\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { withTooltip } from \"../withTooltip\";\nimport { HvScrollToTooltipPositions } from \"../types\";\n\nconst { Enter } = keyboardCodes;\n\nexport { staticClasses as scrollToVerticalClasses };\n\nexport type HvScrollToVerticalClasses = ExtractNames<typeof useClasses>;\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: classesProp,\n  options,\n  offset = 0,\n  position = \"relative\",\n  tooltipPosition = \"left\",\n  style,\n  ...others\n}: HvScrollToVerticalProps) => {\n  const { classes, css, cx } = useClasses(classesProp);\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 positionOffset = calculateOffset(options.length);\n  const backgroundColor = fade(\n    activeTheme?.colors.modes[selectedMode].atmo2,\n    activeTheme?.scrollTo.backgroundColorOpacity\n  );\n\n  return (\n    <ol\n      className={cx(css({ backgroundColor }), className, classes.root, {\n        [classes.positionFixed]: position === \"fixed\",\n        [classes.positionAbsolute]: position === \"absolute\",\n      })}\n      style={{ top: `calc(50% - ${positionOffset}px)`, ...style }}\n      id={elementId}\n      {...others}\n    >\n      {tabs}\n    </ol>\n  );\n};\n"],"names":["Enter","keyboardCodes","HvScrollToVertical","id","defaultSelectedIndex","scrollElementId","href","onChange","onClick","onEnter","className","classes","classesProp","options","offset","position","tooltipPosition","style","others","css","cx","useClasses","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","positionOffset","calculateOffset","length","backgroundColor","fade","colors","modes","atmo2","scrollTo","backgroundColorOpacity","root","positionFixed","positionAbsolute","top","children"],"mappings":";;;;;;;;;;;;;AAeA,MAAM;AAAA,EAAEA;AAAM,IAAIC;AA4DX,MAAMC,qBAAqBA,CAAC;AAAA,EACjCC;AAAAA,EACAC,uBAAuB;AAAA,EACvBC;AAAAA,EACAC,OAAO;AAAA,EACPC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACAC,SAAS;AAAA,EACTC,WAAW;AAAA,EACXC,kBAAkB;AAAA,EAClBC;AAAAA,EACA,GAAGC;AACoB,MAAM;AACvB,QAAA;AAAA,IAAEP;AAAAA,IAASQ;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,WAAWT,WAAW;AAC7C,QAAA;AAAA,IAAEU;AAAAA,IAAaC;AAAAA,MAAiBC,SAAS;AAEzCC,QAAAA,YAAYC,YAAYvB,IAAI,oBAAoB;AAEhD,QAAA,CAACwB,eAAeC,WAAW,IAAIC,YACnCzB,sBACAC,iBACAC,MACAQ,QACAD,SACAN,QACF;AAEA,QAAMuB,kBAAkBA,CACtBC,OAGAC,OACAC,UACG;AACHF,UAAMG,eAAe;AAErB,UAAMC,kBAAkBA,MAAM;AAC5B5B,2CAAWwB,OAAOE;AAAAA,IAAK;AAGbF,gBAAAA,OAAOC,OAAOC,OAAOE,eAAe;AAAA,EAAA;AAG5CC,QAAAA,kBAAkBC,QAAQ,MAAM;AAC7BxB,WAAAA,QAAQyB,IAAKC,CAAW,WAAA;AAC7B,aAAOC,YAAYD,OAAOE,OAAO,OAAOzB,iBAAiB,KAAK;AAAA,IAAA,CAC/D;AAAA,EAAA,GACA,CAACH,SAASG,eAAe,CAAC;AAE7B,QAAM0B,OAAO7B,QAAQyB,IAAI,CAACC,QAAQN,UAAU;AAC1C,UAAMU,WAAWhB,kBAAkBM;AAC7BW,UAAAA,iBAAiBR,gBAAgBH,KAAK;AAE5C,+BACGY,0BAAwB;AAAA,MACvB1C,IAAI2C,MAAMrB,WAAY,QAAOQ,OAAO;AAAA,MACpCzB,SAAUuB,CAAU,UAAA;AACFA,wBAAAA,OAAOQ,OAAOP,OAAOC,KAAK;AAC1CzB,2CAAUuB,OAAOE;AAAAA,MACnB;AAAA,MACAc,WAAYhB,CAAU,UAAA;AACpB,YAAIiB,WAAWjB,OAAO/B,KAAK,MAAM,MAAM;AACrB+B,0BAAAA,OAAOQ,OAAOP,OAAOC,KAAK;AAC1CxB,6CAAUsB,OAAOE;AAAAA,QACnB;AAAA,MACF;AAAA,MACAW;AAAAA,MACAD;AAAAA,MAEA,cAAYJ,OAAOE;AAAAA,IADdF,GAAAA,OAAOU,OAAOV,OAAOE,KAE3B;AAAA,EAAA,CAEJ;AAEKS,QAAAA,iBAAiBC,gBAAgBtC,QAAQuC,MAAM;AAC/CC,QAAAA,kBAAkBC,KACtBhC,2CAAaiC,OAAOC,MAAMjC,cAAckC,OACxCnC,2CAAaoC,SAASC,sBACxB;AAEA,6BACE,MAAA;AAAA,IACEjD,WAAWU,GAAGD,IAAI;AAAA,MAAEkC;AAAAA,IAAAA,CAAiB,GAAG3C,WAAWC,QAAQiD,MAAM;AAAA,MAC/D,CAACjD,QAAQkD,aAAa,GAAG9C,aAAa;AAAA,MACtC,CAACJ,QAAQmD,gBAAgB,GAAG/C,aAAa;AAAA,IAAA,CAC1C;AAAA,IACDE,OAAO;AAAA,MAAE8C,KAAM,cAAab;AAAAA,MAAqB,GAAGjC;AAAAA,IAAM;AAAA,IAC1Dd,IAAIsB;AAAAA,IAAU,GACVP;AAAAA,IAAM8C,UAETtB;AAAAA,EAAAA,CACC;AAER;"}

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

@@ -1,5 +1,10 @@
 import { theme } from "@hitachivantara/uikit-styles";
-const styles = {
+import { createClasses } from "../../../utils/classes.js";
+const name = "HvScrollToVertical";
+const {
+  staticClasses,
+  useClasses
+} = createClasses(name, {
   root: {
     display: "flex",
     width: "32px",
@@ -9,35 +14,28 @@ const styles = {
     flexWrap: "wrap",
     flexDirection: "column",
     backdropFilter: `blur(${theme.scrollTo.backgroundColorBlur})`
+  },
+  positionAbsolute: {
+    width: "32px",
+    position: "absolute",
+    zIndex: `calc(${theme.zIndices.banner} - 2)`,
+    right: "0"
+  },
+  positionFixed: {
+    width: "32px",
+    position: "fixed",
+    zIndex: `calc(${theme.zIndices.banner} - 2)`,
+    right: "0"
   }
-};
+});
 const calculateOffset = (quantityOfOptions) => {
   const itemSize = 32;
   const halfOptions = Math.round(quantityOfOptions * 0.5);
   return halfOptions * itemSize;
 };
-const generateDynamicStyles = (quantityOfOptions) => {
-  const positionOffset = calculateOffset(quantityOfOptions);
-  const generatedStyles = {
-    positionAbsolute: {
-      width: "32px",
-      position: "absolute",
-      zIndex: `calc(${theme.zIndices.banner} - 2)`,
-      right: "0",
-      top: `calc(50% - ${positionOffset}px)`
-    },
-    positionFixed: {
-      width: "32px",
-      position: "fixed",
-      zIndex: `calc(${theme.zIndices.banner} - 2)`,
-      right: "0",
-      top: `calc(50% - ${positionOffset}px)`
-    }
-  };
-  return generatedStyles;
-};
 export {
-  generateDynamicStyles,
-  styles
+  calculateOffset,
+  staticClasses,
+  useClasses
 };
 //# sourceMappingURL=ScrollToVertical.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ScrollToVertical.styles.js","sources":["../../../../../src/components/ScrollTo/Vertical/ScrollToVertical.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { CSSInterpolation } from \"@emotion/serialize\";\nimport { HvScrollToVerticalClasses } from \"./scrollToVerticalClasses\";\n\nexport const styles: Partial<\n  Record<keyof HvScrollToVerticalClasses, CSSInterpolation>\n> = {\n  root: {\n    display: \"flex\",\n    width: \"32px\",\n    padding: \"0\",\n    margin: 0,\n    listStyleType: \"none\",\n    flexWrap: \"wrap\",\n    flexDirection: \"column\",\n    backdropFilter: `blur(${theme.scrollTo.backgroundColorBlur})`,\n  },\n};\n\nconst calculateOffset = (quantityOfOptions: number) => {\n  const itemSize = 32;\n  const halfOptions = Math.round(quantityOfOptions * 0.5);\n\n  return halfOptions * itemSize;\n};\n\nexport const generateDynamicStyles = (quantityOfOptions: number) => {\n  const positionOffset = calculateOffset(quantityOfOptions);\n\n  const generatedStyles: Partial<\n    Record<keyof HvScrollToVerticalClasses, CSSInterpolation>\n  > = {\n    positionAbsolute: {\n      width: \"32px\",\n      position: \"absolute\",\n      zIndex: `calc(${theme.zIndices.banner} - 2)`,\n      right: \"0\",\n      top: `calc(50% - ${positionOffset}px)`,\n    },\n    positionFixed: {\n      width: \"32px\",\n      position: \"fixed\",\n      zIndex: `calc(${theme.zIndices.banner} - 2)`,\n      right: \"0\",\n      top: `calc(50% - ${positionOffset}px)`,\n    },\n  };\n\n  return generatedStyles;\n};\n"],"names":["styles","root","display","width","padding","margin","listStyleType","flexWrap","flexDirection","backdropFilter","theme","scrollTo","backgroundColorBlur","calculateOffset","quantityOfOptions","itemSize","halfOptions","Math","round","generateDynamicStyles","positionOffset","generatedStyles","positionAbsolute","position","zIndex","zIndices","banner","right","top","positionFixed"],"mappings":";AAIO,MAAMA,SAET;AAAA,EACFC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,OAAO;AAAA,IACPC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,eAAe;AAAA,IACfC,UAAU;AAAA,IACVC,eAAe;AAAA,IACfC,gBAAiB,QAAOC,MAAMC,SAASC;AAAAA,EACzC;AACF;AAEA,MAAMC,kBAAkBA,CAACC,sBAA8B;AACrD,QAAMC,WAAW;AACjB,QAAMC,cAAcC,KAAKC,MAAMJ,oBAAoB,GAAG;AAEtD,SAAOE,cAAcD;AACvB;AAEaI,MAAAA,wBAAwBA,CAACL,sBAA8B;AAC5DM,QAAAA,iBAAiBP,gBAAgBC,iBAAiB;AAExD,QAAMO,kBAEF;AAAA,IACFC,kBAAkB;AAAA,MAChBnB,OAAO;AAAA,MACPoB,UAAU;AAAA,MACVC,QAAS,QAAOd,MAAMe,SAASC;AAAAA,MAC/BC,OAAO;AAAA,MACPC,KAAM,cAAaR;AAAAA,IACrB;AAAA,IACAS,eAAe;AAAA,MACb1B,OAAO;AAAA,MACPoB,UAAU;AAAA,MACVC,QAAS,QAAOd,MAAMe,SAASC;AAAAA,MAC/BC,OAAO;AAAA,MACPC,KAAM,cAAaR;AAAAA,IACrB;AAAA,EAAA;AAGKC,SAAAA;AACT;"}
+{"version":3,"file":"ScrollToVertical.styles.js","sources":["../../../../../src/components/ScrollTo/Vertical/ScrollToVertical.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { createClasses } from \"@core/utils\";\n\nconst name = \"HvScrollToVertical\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n  root: {\n    display: \"flex\",\n    width: \"32px\",\n    padding: \"0\",\n    margin: 0,\n    listStyleType: \"none\",\n    flexWrap: \"wrap\",\n    flexDirection: \"column\",\n    backdropFilter: `blur(${theme.scrollTo.backgroundColorBlur})`,\n  },\n  positionAbsolute: {\n    width: \"32px\",\n    position: \"absolute\",\n    zIndex: `calc(${theme.zIndices.banner} - 2)`,\n    right: \"0\",\n  },\n  positionFixed: {\n    width: \"32px\",\n    position: \"fixed\",\n    zIndex: `calc(${theme.zIndices.banner} - 2)`,\n    right: \"0\",\n  },\n});\n\nexport const calculateOffset = (quantityOfOptions: number) => {\n  const itemSize = 32;\n  const halfOptions = Math.round(quantityOfOptions * 0.5);\n\n  return halfOptions * itemSize;\n};\n"],"names":["name","staticClasses","useClasses","createClasses","root","display","width","padding","margin","listStyleType","flexWrap","flexDirection","backdropFilter","theme","scrollTo","backgroundColorBlur","positionAbsolute","position","zIndex","zIndices","banner","right","positionFixed","calculateOffset","quantityOfOptions","itemSize","halfOptions","Math","round"],"mappings":";;AAGA,MAAMA,OAAO;AAEA,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,cAAcH,MAAM;AAAA,EAC/DI,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,OAAO;AAAA,IACPC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,eAAe;AAAA,IACfC,UAAU;AAAA,IACVC,eAAe;AAAA,IACfC,gBAAiB,QAAOC,MAAMC,SAASC;AAAAA,EACzC;AAAA,EACAC,kBAAkB;AAAA,IAChBV,OAAO;AAAA,IACPW,UAAU;AAAA,IACVC,QAAS,QAAOL,MAAMM,SAASC;AAAAA,IAC/BC,OAAO;AAAA,EACT;AAAA,EACAC,eAAe;AAAA,IACbhB,OAAO;AAAA,IACPW,UAAU;AAAA,IACVC,QAAS,QAAOL,MAAMM,SAASC;AAAAA,IAC/BC,OAAO;AAAA,EACT;AACF,CAAC;AAEYE,MAAAA,kBAAkBA,CAACC,sBAA8B;AAC5D,QAAMC,WAAW;AACjB,QAAMC,cAAcC,KAAKC,MAAMJ,oBAAoB,GAAG;AAEtD,SAAOE,cAAcD;AACvB;"}

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

@@ -1,15 +1,13 @@
-import { ClassNames } from "@emotion/react";
-import { useCallback } from "react";
 import { CurrentStep } from "@hitachivantara/uikit-react-icons";
-import { styles } from "./VerticalScrollListItem.styles.js";
-import verticalScrollListItemClasses from "./verticalScrollListItemClasses.js";
+import { useClasses } from "./VerticalScrollListItem.styles.js";
+import { staticClasses } from "./VerticalScrollListItem.styles.js";
 import { jsx } from "@emotion/react/jsx-runtime";
 import { useTheme } from "../../../../hooks/useTheme.js";
 import { setId } from "../../../../utils/setId.js";
 const HvVerticalScrollListItem = ({
   id,
   className,
-  classes,
+  classes: classesProp,
   selected,
   "aria-label": ariaLabel,
   onClick,
@@ -17,6 +15,10 @@ const HvVerticalScrollListItem = ({
   tooltipWrapper,
   ...others
 }) => {
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
   const {
     activeTheme
   } = useTheme();
@@ -24,49 +26,37 @@ const HvVerticalScrollListItem = ({
   const labelId = setId(id, "label");
   const buttonId = setId(id, "button");
   const Tooltip = tooltipWrapper;
-  const NotSelected = useCallback(() => {
-    return /* @__PURE__ */ jsx(ClassNames, {
-      children: ({
-        css,
-        cx
-      }) => /* @__PURE__ */ jsx("div", {
-        className: cx(verticalScrollListItemClasses.notSelected, css(styles.notSelected), classes == null ? void 0 : classes.notSelected)
-      })
-    });
-  }, [classes == null ? void 0 : classes.notSelected]);
   const icon = selected ? /* @__PURE__ */ jsx(CurrentStep, {
     height: activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize,
     width: activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize
-  }) : /* @__PURE__ */ jsx(NotSelected, {});
-  return /* @__PURE__ */ jsx(ClassNames, {
-    children: ({
-      css,
-      cx
-    }) => /* @__PURE__ */ jsx("li", {
-      id,
-      className: cx(verticalScrollListItemClasses.root, css(styles.root), className, classes == null ? void 0 : classes.root),
-      "aria-current": selected,
-      children: /* @__PURE__ */ jsx("div", {
-        id: buttonId,
-        role: "button",
-        tabIndex: 0,
-        onClick,
-        onKeyDown,
-        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: cx(verticalScrollListItemClasses.text, css(styles.text), classes == null ? void 0 : classes.text),
-          variant,
-          children: icon
-        })
+  }) : /* @__PURE__ */ jsx("div", {
+    className: cx(classes.notSelected)
+  });
+  return /* @__PURE__ */ jsx("li", {
+    id,
+    className: cx(className, classes.root),
+    "aria-current": selected,
+    children: /* @__PURE__ */ jsx("div", {
+      id: buttonId,
+      role: "button",
+      tabIndex: 0,
+      onClick,
+      onKeyDown,
+      className: classes.button,
+      "aria-label": ariaLabel,
+      "aria-labelledby": labelId,
+      ...others,
+      children: /* @__PURE__ */ jsx(Tooltip, {
+        id: labelId,
+        className: classes.text,
+        variant,
+        children: icon
       })
     })
   });
 };
 export {
-  HvVerticalScrollListItem
+  HvVerticalScrollListItem,
+  staticClasses as verticalScrollListItemClasses
 };
 //# sourceMappingURL=VerticalScrollListItem.js.map

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 { ClassNames } from \"@emotion/react\";\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\";\nimport { styles } from \"./VerticalScrollListItem.styles\";\nimport verticalScrollListItemClasses, {\n  HvVerticalScrollListItemClasses,\n} from \"./verticalScrollListItemClasses\";\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,SAAS;AAE3BC,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,WACX;AAAA,MAAA,CACD;AAAA,IAAA,CAEO;AAAA,EAAA,GAEb,CAACrB,mCAASqB,WAAW,CAAC;AAEnBE,QAAAA,OAAOtB,WACXuB,oBAACC,aAAW;AAAA,IACVC,QAAQnB,2CAAaoB,SAASC;AAAAA,IAC9BC,OAAOtB,2CAAaoB,SAASC;AAAAA,EAC9B,CAAA,IAEAd,oBAAAA,eAAa;AAGhB,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,IACX;AAAA,MACA,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,MACX;AAAA,QACA,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,IACX;AAAA,UACAzB;AAAAA,UAAiBQ,UAEhBM;AAAAA,QAAAA,CACM;AAAA,MAAA,CACN;AAAA,IAAA,CACH;AAAA,EAAA,CAEI;AAEhB;"}
+{"version":3,"file":"VerticalScrollListItem.js","sources":["../../../../../../src/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types\";\nimport { HvTypographyProps } from \"@core/components\";\nimport { ExtractNames, setId } from \"@core/utils\";\nimport { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\nimport { useTheme } from \"@core/hooks\";\nimport { staticClasses, useClasses } from \"./VerticalScrollListItem.styles\";\n\nexport { staticClasses as verticalScrollListItemClasses };\n\nexport type HvVerticalScrollListItemClasses = ExtractNames<typeof useClasses>;\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: classesProp,\n  selected,\n  \"aria-label\": ariaLabel,\n  onClick,\n  onKeyDown,\n  tooltipWrapper,\n  ...others\n}: HvVerticalScrollListItemProps) => {\n  const { classes, cx } = useClasses(classesProp);\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 icon = selected ? (\n    <CurrentStep\n      height={activeTheme?.scrollTo.dotSelectedSize}\n      width={activeTheme?.scrollTo.dotSelectedSize}\n    />\n  ) : (\n    <div className={cx(classes.notSelected)} />\n  );\n\n  return (\n    <li id={id} className={cx(className, classes.root)} aria-current={selected}>\n      <div\n        id={buttonId}\n        role=\"button\"\n        tabIndex={0}\n        onClick={onClick}\n        onKeyDown={onKeyDown}\n        className={classes.button}\n        aria-label={ariaLabel}\n        aria-labelledby={labelId}\n        {...others}\n      >\n        <Tooltip id={labelId} className={classes.text} variant={variant}>\n          {icon}\n        </Tooltip>\n      </div>\n    </li>\n  );\n};\n"],"names":["HvVerticalScrollListItem","id","className","classes","classesProp","selected","ariaLabel","onClick","onKeyDown","tooltipWrapper","others","cx","useClasses","activeTheme","useTheme","variant","labelId","setId","buttonId","Tooltip","icon","_jsx","CurrentStep","height","scrollTo","dotSelectedSize","width","notSelected","root","children","role","tabIndex","button","text"],"mappings":";;;;;;AAgCO,MAAMA,2BAA2BA,CAAC;AAAA,EACvCC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACA,cAAcC;AAAAA,EACdC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AAC0B,MAAM;AAC7B,QAAA;AAAA,IAAEP;AAAAA,IAASQ;AAAAA,EAAAA,IAAOC,WAAWR,WAAW;AACxC,QAAA;AAAA,IAAES;AAAAA,MAAgBC,SAAS;AAE3BC,QAAAA,UAAwCV,WAAW,UAAU;AAE7DW,QAAAA,UAAUC,MAAMhB,IAAI,OAAO;AAE3BiB,QAAAA,WAAWD,MAAMhB,IAAI,QAAQ;AAEnC,QAAMkB,UAAUV;AAEVW,QAAAA,OAAOf,WACXgB,oBAACC,aAAW;AAAA,IACVC,QAAQV,2CAAaW,SAASC;AAAAA,IAC9BC,OAAOb,2CAAaW,SAASC;AAAAA,EAAAA,CAC9B,IAEDJ,oBAAA,OAAA;AAAA,IAAKnB,WAAWS,GAAGR,QAAQwB,WAAW;AAAA,EAAA,CAAI;AAG5C,6BACE,MAAA;AAAA,IAAI1B;AAAAA,IAAQC,WAAWS,GAAGT,WAAWC,QAAQyB,IAAI;AAAA,IAAG,gBAAcvB;AAAAA,IAASwB,8BACzE,OAAA;AAAA,MACE5B,IAAIiB;AAAAA,MACJY,MAAK;AAAA,MACLC,UAAU;AAAA,MACVxB;AAAAA,MACAC;AAAAA,MACAN,WAAWC,QAAQ6B;AAAAA,MACnB,cAAY1B;AAAAA,MACZ,mBAAiBU;AAAAA,MAAQ,GACrBN;AAAAA,MAAMmB,8BAETV,SAAO;AAAA,QAAClB,IAAIe;AAAAA,QAASd,WAAWC,QAAQ8B;AAAAA,QAAMlB;AAAAA,QAAiBc,UAC7DT;AAAAA,MAAAA,CACM;AAAA,IAAA,CACN;AAAA,EAAA,CACH;AAER;"}