@hitachivantara/uikit-react-core 3.52.5

package/dist/legacy/ScrollTo/Horizontal/ScrollToHorizontal.d.ts

@@ -0,0 +1,69 @@
+import { StandardProps } from "@material-ui/core";
+import React from "react";
+import { HvScrollToTooltipPositions } from "../tooltipPositions";
+
+interface Option {
+  key?: string;
+  label: string;
+  value: string;
+  offset?: number;
+}
+
+export type HvScrollToHorizontalClassKey = "root" | "positionSticky" | "positionFixed";
+export type HvScrollToHorizontalPositions = "sticky" | "fixed" | "relative";
+export type HvScrollToHorizontalTooltipPositions =  "left" | "right" | "top" | "bottom";
+type newStandardProps = Omit<
+  StandardProps<React.HTMLAttributes<HTMLDivElement>, HvScrollToHorizontalClassKey>,
+  "onChange" | "onClick"
+>;
+
+export interface HvScrollToHorizontalProps extends newStandardProps {
+  /**
+   * An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied
+   */
+  options: Option[];
+  /**
+   * True if the href location link should be applied. It will create an a element around every list item
+   */
+  href?: boolean;
+  /**
+   * Default selected index passed from the parent.
+   */
+  defaultSelectedIndex?: number;
+  /**
+   * The Id of the scrollable container containing displayed elements.
+   *
+   * Defaults to `window` if unspecified.
+   */
+  scrollElementId?: string;
+  /**
+   * Defines the offset from the top of each element for getting an optimal viewing region in the container.
+   * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)
+   * or to put more breathing room between the targeted element and the edges of the container.
+   *
+   * Each element can alse have a specific offset via the options property.
+   */
+  offset?: number;
+  /**
+   * Position of the Horizontal scroll to.
+   */
+  position?: HvScrollToHorizontalPositions;
+  /**
+   * Position of tooltip identifying the current item.
+   */
+   tooltipPosition?: HvScrollToTooltipPositions;
+  /**
+   * A function called each time the selected index changes.
+   */
+  onChange?: (event: React.SyntheticEvent | React.UIEvent, index: number) => void;
+  /**
+   * A function called each time an user clicks on a tab element.
+   */
+  onClick?: (event: React.MouseEventHandler<HTMLButtonElement>, index: number) => void;
+  /**
+   * A function called each time an user press enter on a tab element.
+   */
+  onEnter?: (event: React.KeyboardEvent<HTMLButtonElement>, index: number) => void;
+}
+
+export default function HvScrollToHorizontal(props: HvScrollToHorizontalProps): JSX.Element | null;

package/dist/legacy/ScrollTo/Horizontal/ScrollToHorizontal.js

@@ -0,0 +1,188 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["id", "defaultSelectedIndex", "scrollElementId", "href", "onChange", "onClick", "onEnter", "className", "classes", "options", "offset", "position", "tooltipPosition"];
+import "core-js/modules/es.array.map.js";
+import React, { useMemo } from "react";
+import PropTypes from "prop-types";
+import clsx from "clsx";
+import { withStyles } from "@material-ui/core";
+import { isKeypress, KeyboardCodes } from "../../utils";
+import HorizontalScrollListItem from "./HorizontalScrollListItem";
+import styles from "./styles";
+import useScrollTo from "../useScrollTo";
+import addTooltipToElement from "../withTooltip";
+import { useUniqueId, setId } from "../..";
+var Enter = KeyboardCodes.Enter;
+/**
+ * HorizontalScrollTo element used to quickly navigate in a page.
+ */
+
+var HvScrollToHorizontal = function HvScrollToHorizontal(props) {
+  var id = props.id,
+      _props$defaultSelecte = props.defaultSelectedIndex,
+      defaultSelectedIndex = _props$defaultSelecte === void 0 ? 0 : _props$defaultSelecte,
+      scrollElementId = props.scrollElementId,
+      _props$href = props.href,
+      href = _props$href === void 0 ? true : _props$href,
+      onChange = props.onChange,
+      _onClick = props.onClick,
+      onEnter = props.onEnter,
+      className = props.className,
+      classes = props.classes,
+      options = props.options,
+      _props$offset = props.offset,
+      offset = _props$offset === void 0 ? 0 : _props$offset,
+      _props$position = props.position,
+      position = _props$position === void 0 ? "relative" : _props$position,
+      _props$tooltipPositio = props.tooltipPosition,
+      tooltipPosition = _props$tooltipPositio === void 0 ? "top" : _props$tooltipPositio,
+      others = _objectWithoutProperties(props, _excluded);
+
+  var elementId = useUniqueId(id, "hvHorizontalScrollto");
+
+  var _useScrollTo = useScrollTo(defaultSelectedIndex, scrollElementId, href, offset, options, onChange),
+      _useScrollTo2 = _slicedToArray(_useScrollTo, 2),
+      selectedIndex = _useScrollTo2[0],
+      setScrollTo = _useScrollTo2[1];
+
+  var handleSelection = function handleSelection(event, value, index) {
+    event.preventDefault();
+
+    var wrappedOnChange = function wrappedOnChange() {
+      onChange === null || onChange === void 0 ? void 0 : onChange(event, index);
+    };
+
+    setScrollTo(event, value, index, wrappedOnChange);
+  };
+
+  var tooltipWrappers = useMemo(function () {
+    return options.map(function (option) {
+      return addTooltipToElement(option.label, "p", tooltipPosition);
+    });
+  }, [options, tooltipPosition]);
+  var tabs = options.map(function (option, index) {
+    var selected = selectedIndex === index;
+    var tooltipWrapper = tooltipWrappers[index];
+    return /*#__PURE__*/React.createElement(HorizontalScrollListItem, {
+      id: setId(elementId, "item-".concat(index)),
+      onClick: function onClick(event) {
+        handleSelection(event, option.value, index);
+        _onClick === null || _onClick === void 0 ? void 0 : _onClick(event, index);
+      },
+      onKeyDown: function onKeyDown(event) {
+        if (isKeypress(event, Enter) === true) {
+          handleSelection(event, option.value, index);
+          onEnter === null || onEnter === void 0 ? void 0 : onEnter(event, index);
+        }
+      },
+      tooltipWrapper: tooltipWrapper,
+      selected: selected,
+      key: option.key || option.label
+    }, option.label);
+  });
+  return /*#__PURE__*/React.createElement("ol", _extends({
+    className: clsx(className, classes.root, {
+      "sticky": classes.positionSticky,
+      "fixed": classes.positionFixed
+    }[position]),
+    id: elementId
+  }, others), tabs);
+};
+
+HvScrollToHorizontal.propTypes = {
+  /**
+   * Id to be applied to the element.
+   */
+  id: PropTypes.string,
+
+  /**
+   * Class names to be applied.
+   */
+  className: PropTypes.string,
+
+  /**
+   * A Jss Object used to override or extend the styles applied.
+   */
+  classes: PropTypes.shape({
+    /**
+     * Styles applied to the component root class.
+     */
+    root: PropTypes.string,
+
+    /**
+     * Styles applied to the component when it has a sticky position.
+     */
+    positionSticky: PropTypes.string,
+
+    /**
+     * Styles applied to the component when it has a fixed position.
+     */
+    positionFixed: PropTypes.string
+  }).isRequired,
+
+  /**
+   * A function called each time the selected index changes.
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * A function called each time an user clicks on a tab element.
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * A function called each time an user press enter on a tab element.
+   */
+  onEnter: PropTypes.func,
+
+  /**
+   * An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied
+   */
+  options: PropTypes.arrayOf(PropTypes.shape({
+    key: PropTypes.string,
+    value: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+    offset: PropTypes.number
+  })).isRequired,
+
+  /**
+   * default selected index passed from the parent.
+   */
+  defaultSelectedIndex: PropTypes.number,
+
+  /**
+   * The Id of the scrollable container containing displayed elements.
+   *
+   * Defaults to `window` if unspecified.
+   */
+  scrollElementId: PropTypes.string,
+
+  /*
+   * Defines the offset from the top of each element for getting an optimal viewing region in the container.
+   * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)
+   * or to put more breathing room between the targeted element and the edges of the container.
+   *
+   * Each element can also have a specific offset via the options property.
+   */
+  offset: PropTypes.number,
+
+  /**
+   * True if the href location link should be applied. It will create an a element around every list item
+   */
+  href: PropTypes.bool,
+
+  /**
+   * Position of the Horizontal scroll to.
+   */
+  position: PropTypes.oneOf(["sticky", "fixed", "relative"]),
+
+  /**
+   * Position of tooltip identifying the current item.
+   */
+  tooltipPosition: PropTypes.oneOf(["left", "right", "top", "bottom"])
+};
+export default withStyles(styles, {
+  name: "HvScrollToHorizontal"
+})(HvScrollToHorizontal);
+//# sourceMappingURL=ScrollToHorizontal.js.map

package/dist/legacy/ScrollTo/Horizontal/ScrollToHorizontal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/ScrollTo/Horizontal/ScrollToHorizontal.js"],"names":["React","useMemo","PropTypes","clsx","withStyles","isKeypress","KeyboardCodes","HorizontalScrollListItem","styles","useScrollTo","addTooltipToElement","useUniqueId","setId","Enter","HvScrollToHorizontal","props","id","defaultSelectedIndex","scrollElementId","href","onChange","onClick","onEnter","className","classes","options","offset","position","tooltipPosition","others","elementId","selectedIndex","setScrollTo","handleSelection","event","value","index","preventDefault","wrappedOnChange","tooltipWrappers","map","option","label","tabs","selected","tooltipWrapper","key","root","positionSticky","positionFixed","propTypes","string","shape","isRequired","func","arrayOf","number","bool","oneOf","name"],"mappings":"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","sourcesContent":["import React, { useMemo } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport { withStyles } from \"@material-ui/core\";\nimport { isKeypress, KeyboardCodes } from \"../../utils\";\nimport HorizontalScrollListItem from \"./HorizontalScrollListItem\";\nimport styles from \"./styles\";\nimport useScrollTo from \"../useScrollTo\";\nimport addTooltipToElement from \"../withTooltip\";\nimport { useUniqueId, setId } from \"../..\";\n\nconst { Enter } = KeyboardCodes;\n\n/**\n * HorizontalScrollTo element used to quickly navigate in a page.\n */\nconst HvScrollToHorizontal = (props) => {\n  const {\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  } = props;\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 = (event, value, index) => {\n    event.preventDefault();\n    const wrappedOnChange = () => {\n      onChange?.(event, index);\n    };\n    setScrollTo(event, value, index, wrappedOnChange);\n  };\n\n  const tooltipWrappers = useMemo(() => {\n    return options.map((option) => {\n      return addTooltipToElement(option.label, \"p\", tooltipPosition);\n    });\n  }, [options, tooltipPosition]);\n\n  const tabs = options.map((option, index) => {\n    const selected = selectedIndex === index;\n    const tooltipWrapper = tooltipWrappers[index];\n    return (\n      <HorizontalScrollListItem\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        {option.label}\n      </HorizontalScrollListItem>\n    );\n  });\n  return (\n    <ol\n      className={clsx(className, classes.root, {\n        [classes.positionSticky]: position === \"sticky\",\n        [classes.positionFixed]: position === \"fixed\",\n      })}\n      id={elementId}\n      {...others}\n    >\n      {tabs}\n    </ol>\n  );\n};\n\nHvScrollToHorizontal.propTypes = {\n  /**\n   * Id to be applied to the element.\n   */\n  id: PropTypes.string,\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component root class.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the component when it has a sticky position.\n     */\n    positionSticky: PropTypes.string,\n    /**\n     * Styles applied to the component when it has a fixed position.\n     */\n    positionFixed: PropTypes.string,\n  }).isRequired,\n  /**\n   * A function called each time the selected index changes.\n   */\n  onChange: PropTypes.func,\n  /**\n   * A function called each time an user clicks on a tab element.\n   */\n  onClick: PropTypes.func,\n  /**\n   * A function called each time an user press enter on a tab element.\n   */\n  onEnter: PropTypes.func,\n  /**\n   * An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied\n   */\n  options: PropTypes.arrayOf(\n    PropTypes.shape({\n      key: PropTypes.string,\n      value: PropTypes.string.isRequired,\n      label: PropTypes.string.isRequired,\n      offset: PropTypes.number,\n    })\n  ).isRequired,\n  /**\n   * default selected index passed from the parent.\n   */\n  defaultSelectedIndex: PropTypes.number,\n  /**\n   * The Id of the scrollable container containing displayed elements.\n   *\n   * Defaults to `window` if unspecified.\n   */\n  scrollElementId: PropTypes.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: PropTypes.number,\n  /**\n   * True if the href location link should be applied. It will create an a element around every list item\n   */\n  href: PropTypes.bool,\n  /**\n   * Position of the Horizontal scroll to.\n   */\n  position: PropTypes.oneOf([\"sticky\", \"fixed\", \"relative\"]),\n  /**\n   * Position of tooltip identifying the current item.\n   */\n  tooltipPosition: PropTypes.oneOf([\"left\", \"right\", \"top\", \"bottom\"]),\n};\n\nexport default withStyles(styles, { name: \"HvScrollToHorizontal\" })(HvScrollToHorizontal);\n"],"file":"ScrollToHorizontal.js"}

package/dist/legacy/ScrollTo/Horizontal/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./ScrollToHorizontal";
+export * from "./ScrollToHorizontal";

package/dist/legacy/ScrollTo/Horizontal/index.js

@@ -0,0 +1,2 @@
+export { default } from "./ScrollToHorizontal";
+//# sourceMappingURL=index.js.map

package/dist/legacy/ScrollTo/Horizontal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/ScrollTo/Horizontal/index.js"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,sBAAxB","sourcesContent":["export { default } from \"./ScrollToHorizontal\";\n"],"file":"index.js"}

package/dist/legacy/ScrollTo/Horizontal/styles.js

@@ -0,0 +1,43 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import fade from "../../utils/hexToRgbA";
+
+var styles = function styles(theme) {
+  var _positionFixed;
+
+  return {
+    root: {
+      display: "flex",
+      width: "100%",
+      padding: "0 30px",
+      backgroundColor: fade(theme.palette.atmo2, 0.8),
+      margin: 0,
+      listStyleType: "none",
+      flexWrap: "wrap"
+    },
+    positionSticky: {
+      width: "100%",
+      position: "sticky",
+      zIndex: theme.zIndex.appBar - 2,
+      top: 0,
+      left: 0
+    },
+    positionFixed: (_positionFixed = {
+      width: "100%",
+      position: "fixed",
+      zIndex: theme.zIndex.appBar - 2,
+      top: 0,
+      left: 0
+    }, _defineProperty(_positionFixed, theme.breakpoints.up("md"), {
+      width: "calc(100% - 2*".concat(theme.spacing(4), "px)"),
+      marginLeft: "".concat(theme.spacing(4), "px"),
+      marginRight: "".concat(theme.spacing(4), "px")
+    }), _defineProperty(_positionFixed, theme.breakpoints.down("sm"), {
+      width: "calc(100% - 2*".concat(theme.spacing(2), "px)"),
+      marginLeft: "".concat(theme.spacing(2), "px"),
+      marginRight: "".concat(theme.spacing(2), "px")
+    }), _positionFixed)
+  };
+};
+
+export default styles;
+//# sourceMappingURL=styles.js.map

package/dist/legacy/ScrollTo/Horizontal/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/ScrollTo/Horizontal/styles.js"],"names":["fade","styles","theme","root","display","width","padding","backgroundColor","palette","atmo2","margin","listStyleType","flexWrap","positionSticky","position","zIndex","appBar","top","left","positionFixed","breakpoints","up","spacing","marginLeft","marginRight","down"],"mappings":";AAAA,OAAOA,IAAP,MAAiB,uBAAjB;;AAEA,IAAMC,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA;;AAAA,SAAY;AACzBC,IAAAA,IAAI,EAAE;AACJC,MAAAA,OAAO,EAAE,MADL;AAEJC,MAAAA,KAAK,EAAE,MAFH;AAGJC,MAAAA,OAAO,EAAE,QAHL;AAIJC,MAAAA,eAAe,EAAEP,IAAI,CAACE,KAAK,CAACM,OAAN,CAAcC,KAAf,EAAsB,GAAtB,CAJjB;AAKJC,MAAAA,MAAM,EAAE,CALJ;AAMJC,MAAAA,aAAa,EAAE,MANX;AAOJC,MAAAA,QAAQ,EAAE;AAPN,KADmB;AAUzBC,IAAAA,cAAc,EAAE;AACdR,MAAAA,KAAK,EAAE,MADO;AAEdS,MAAAA,QAAQ,EAAE,QAFI;AAGdC,MAAAA,MAAM,EAAEb,KAAK,CAACa,MAAN,CAAaC,MAAb,GAAsB,CAHhB;AAIdC,MAAAA,GAAG,EAAE,CAJS;AAKdC,MAAAA,IAAI,EAAE;AALQ,KAVS;AAiBzBC,IAAAA,aAAa;AACXd,MAAAA,KAAK,EAAE,MADI;AAEXS,MAAAA,QAAQ,EAAE,OAFC;AAGXC,MAAAA,MAAM,EAAEb,KAAK,CAACa,MAAN,CAAaC,MAAb,GAAsB,CAHnB;AAIXC,MAAAA,GAAG,EAAE,CAJM;AAKXC,MAAAA,IAAI,EAAE;AALK,uCAMVhB,KAAK,CAACkB,WAAN,CAAkBC,EAAlB,CAAqB,IAArB,CANU,EAMmB;AAC5BhB,MAAAA,KAAK,0BAAmBH,KAAK,CAACoB,OAAN,CAAc,CAAd,CAAnB,QADuB;AAE5BC,MAAAA,UAAU,YAAKrB,KAAK,CAACoB,OAAN,CAAc,CAAd,CAAL,OAFkB;AAG5BE,MAAAA,WAAW,YAAKtB,KAAK,CAACoB,OAAN,CAAc,CAAd,CAAL;AAHiB,KANnB,mCAWVpB,KAAK,CAACkB,WAAN,CAAkBK,IAAlB,CAAuB,IAAvB,CAXU,EAWqB;AAC9BpB,MAAAA,KAAK,0BAAmBH,KAAK,CAACoB,OAAN,CAAc,CAAd,CAAnB,QADyB;AAE9BC,MAAAA,UAAU,YAAKrB,KAAK,CAACoB,OAAN,CAAc,CAAd,CAAL,OAFoB;AAG9BE,MAAAA,WAAW,YAAKtB,KAAK,CAACoB,OAAN,CAAc,CAAd,CAAL;AAHmB,KAXrB;AAjBY,GAAZ;AAAA,CAAf;;AAoCA,eAAerB,MAAf","sourcesContent":["import fade from \"../../utils/hexToRgbA\";\n\nconst styles = (theme) => ({\n  root: {\n    display: \"flex\",\n    width: \"100%\",\n    padding: \"0 30px\",\n    backgroundColor: fade(theme.palette.atmo2, 0.8),\n    margin: 0,\n    listStyleType: \"none\",\n    flexWrap: \"wrap\",\n  },\n  positionSticky: {\n    width: \"100%\",\n    position: \"sticky\",\n    zIndex: theme.zIndex.appBar - 2,\n    top: 0,\n    left: 0,\n  },\n  positionFixed: {\n    width: \"100%\",\n    position: \"fixed\",\n    zIndex: theme.zIndex.appBar - 2,\n    top: 0,\n    left: 0,\n    [theme.breakpoints.up(\"md\")]: {\n      width: `calc(100% - 2*${theme.spacing(4)}px)`,\n      marginLeft: `${theme.spacing(4)}px`,\n      marginRight: `${theme.spacing(4)}px`,\n    },\n    [theme.breakpoints.down(\"sm\")]: {\n      width: `calc(100% - 2*${theme.spacing(2)}px)`,\n      marginLeft: `${theme.spacing(2)}px`,\n      marginRight: `${theme.spacing(2)}px`,\n    },\n  },\n});\n\nexport default styles;\n"],"file":"styles.js"}

package/dist/legacy/ScrollTo/Vertical/ScrollToVertical.d.ts

@@ -0,0 +1,69 @@
+import { StandardProps } from "@material-ui/core";
+import React from "react";
+import { HvScrollToTooltipPositions } from "../tooltipPositions";
+
+interface Option {
+  key?: string;
+  label: string;
+  value: string;
+  offset?: number;
+}
+
+export type HvScrollToVerticalClassKey = "root" | "positionSticky" | "positionFixed";
+export type HvScrollToVerticalPositions = "absolute" | "fixed" | "relative";
+
+type newStandardProps = Omit<
+  StandardProps<React.HTMLAttributes<HTMLDivElement>, HvScrollToVerticalClassKey>,
+  "onChange" | "onClick"
+>;
+
+export interface HvScrollToVerticalProps extends newStandardProps {
+  /**
+   * An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied
+   */
+  options: Option[];
+  /**
+   * True if the href location link should be applied. It will create an a element around every list item
+   */
+  href?: boolean;
+  /**
+   * Default selected index passed from the parent.
+   */
+  defaultSelectedIndex?: number;
+  /**
+   * The Id of the scrollable container containing displayed elements.
+   *
+   * Defaults to `window` if unspecified.
+   */
+  scrollElementId?: string;
+  /**
+   * Defines the offset from the top of each element for getting an optimal viewing region in the container.
+   * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)
+   * or to put more breathing room between the targeted element and the edges of the container.
+   *
+   * Each element can alse have a specific offset via the options property.
+   */
+  offset?: number;
+  /**
+   * Position of the Vertical scroll to.
+   */
+  position?: HvScrollToVerticalPositions;
+  /**
+   * Position of tooltip identifying the current item.
+   */
+  tooltipPosition?: HvScrollToTooltipPositions;
+  /**
+   * A function called each time the selected index changes.
+   */
+  onChange?: (event: React.SyntheticEvent | React.UIEvent, index: number) => void;
+  /**
+   * A function called each time an user clicks on a tab element.
+   */
+  onClick?: (event: React.MouseEventHandler<HTMLButtonElement>, index: number) => void;
+  /**
+   * A function called each time an user press enter on a tab element.
+   */
+  onEnter?: (event: React.KeyboardEvent<HTMLButtonElement>, index: number) => void;
+}
+
+export default function HvScrollToVertical(props: HvScrollToVerticalProps): JSX.Element | null;

package/dist/legacy/ScrollTo/Vertical/ScrollToVertical.js

@@ -0,0 +1,191 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["id", "defaultSelectedIndex", "scrollElementId", "href", "onChange", "onClick", "onEnter", "className", "classes", "options", "offset", "position", "tooltipPosition"];
+import "core-js/modules/es.array.map.js";
+import React, { useMemo } from "react";
+import PropTypes from "prop-types";
+import clsx from "clsx";
+import { withStyles } from "@material-ui/core";
+import { isKeypress, KeyboardCodes } from "../../utils";
+import VerticalScrollListItem from "./VerticalScrollListItem";
+import styles, { generateDynamicStyles } from "./styles";
+import useScrollTo from "../useScrollTo";
+import addTooltipToElement from "../withTooltip";
+import { useUniqueId, setId } from "../..";
+var Enter = KeyboardCodes.Enter;
+/**
+ * VerticalScrollTo element used to quickly navigate in a page.
+ */
+
+var HvScrollToVertical = function HvScrollToVertical(props) {
+  var id = props.id,
+      _props$defaultSelecte = props.defaultSelectedIndex,
+      defaultSelectedIndex = _props$defaultSelecte === void 0 ? 0 : _props$defaultSelecte,
+      scrollElementId = props.scrollElementId,
+      _props$href = props.href,
+      href = _props$href === void 0 ? true : _props$href,
+      onChange = props.onChange,
+      _onClick = props.onClick,
+      onEnter = props.onEnter,
+      className = props.className,
+      classes = props.classes,
+      options = props.options,
+      _props$offset = props.offset,
+      offset = _props$offset === void 0 ? 0 : _props$offset,
+      _props$position = props.position,
+      position = _props$position === void 0 ? "relative" : _props$position,
+      _props$tooltipPositio = props.tooltipPosition,
+      tooltipPosition = _props$tooltipPositio === void 0 ? "left" : _props$tooltipPositio,
+      others = _objectWithoutProperties(props, _excluded);
+
+  var elementId = useUniqueId(id, "hvVerticalScrollto");
+
+  var _useScrollTo = useScrollTo(defaultSelectedIndex, scrollElementId, href, offset, options, onChange),
+      _useScrollTo2 = _slicedToArray(_useScrollTo, 2),
+      selectedIndex = _useScrollTo2[0],
+      setScrollTo = _useScrollTo2[1];
+
+  var dynamicClasses = generateDynamicStyles(options.length);
+
+  var handleSelection = function handleSelection(event, value, index) {
+    event.preventDefault();
+
+    var wrappedOnChange = function wrappedOnChange() {
+      onChange === null || onChange === void 0 ? void 0 : onChange(event, index);
+    };
+
+    setScrollTo(event, value, index, wrappedOnChange);
+  };
+
+  var tooltipWrappers = useMemo(function () {
+    return options.map(function (option) {
+      return addTooltipToElement(option.label, "div", tooltipPosition, false);
+    });
+  }, [options, tooltipPosition]);
+  var tabs = options.map(function (option, index) {
+    var selected = selectedIndex === index;
+    var tooltipWrapper = tooltipWrappers[index];
+    return /*#__PURE__*/React.createElement(VerticalScrollListItem, {
+      id: setId(elementId, "item-".concat(index)),
+      onClick: function onClick(event) {
+        handleSelection(event, option.value, index);
+        _onClick === null || _onClick === void 0 ? void 0 : _onClick(event, index);
+      },
+      onKeyDown: function onKeyDown(event) {
+        if (isKeypress(event, Enter) === true) {
+          handleSelection(event, option.value, index);
+          onEnter === null || onEnter === void 0 ? void 0 : onEnter(event, index);
+        }
+      },
+      tooltipWrapper: tooltipWrapper,
+      selected: selected,
+      key: option.key || option.label,
+      "aria-label": option.label
+    });
+  });
+  return /*#__PURE__*/React.createElement("ol", _extends({
+    className: clsx(className, classes.root, {
+      "absolute": dynamicClasses.positionAbsolute,
+      "fixed": dynamicClasses.positionFixed
+    }[position]),
+    id: elementId
+  }, others), tabs);
+};
+
+HvScrollToVertical.propTypes = {
+  /**
+   * Id to be applied to the element.
+   */
+  id: PropTypes.string,
+
+  /**
+   * Class names to be applied.
+   */
+  className: PropTypes.string,
+
+  /**
+   * A Jss Object used to override or extend the styles applied.
+   */
+  classes: PropTypes.shape({
+    /**
+     * Styles applied to the component root class.
+     */
+    root: PropTypes.string,
+
+    /**
+     * Styles applied to the component when it has a sticky position.
+     */
+    positionAbsolute: PropTypes.string,
+
+    /**
+     * Styles applied to the component when it has a fixed position.
+     */
+    positionFixed: PropTypes.string
+  }).isRequired,
+
+  /**
+   * A function called each time the selected index changes.
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * A function called each time an user clicks on a tab element.
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * A function called each time an user press enter on a tab element.
+   */
+  onEnter: PropTypes.func,
+
+  /**
+   * An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied
+   */
+  options: PropTypes.arrayOf(PropTypes.shape({
+    key: PropTypes.string,
+    value: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+    offset: PropTypes.number
+  })).isRequired,
+
+  /**
+   * default selected index passed from the parent.
+   */
+  defaultSelectedIndex: PropTypes.number,
+
+  /**
+   * The Id of the scrollable container containing displayed elements.
+   *
+   * Defaults to `window` if unspecified.
+   */
+  scrollElementId: PropTypes.string,
+
+  /*
+   * Defines the offset from the top of each element for getting an optimal viewing region in the container.
+   * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)
+   * or to put more breathing room between the targeted element and the edges of the container.
+   *
+   * Each element can also have a specific offset via the options property.
+   */
+  offset: PropTypes.number,
+
+  /**
+   * True if the href location link should be applied. It will create an a element around every list item
+   */
+  href: PropTypes.bool,
+
+  /**
+   * Position of the Vertical scroll to.
+   */
+  position: PropTypes.oneOf(["absolute", "fixed", "relative"]),
+
+  /**
+   * Position of tooltip identifying the current item.
+   */
+  tooltipPosition: PropTypes.oneOf(["left", "right", "top", "bottom"])
+};
+export default withStyles(styles, {
+  name: "HvScrollToVertical"
+})(HvScrollToVertical);
+//# sourceMappingURL=ScrollToVertical.js.map

package/dist/legacy/ScrollTo/Vertical/ScrollToVertical.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/ScrollTo/Vertical/ScrollToVertical.js"],"names":["React","useMemo","PropTypes","clsx","withStyles","isKeypress","KeyboardCodes","VerticalScrollListItem","styles","generateDynamicStyles","useScrollTo","addTooltipToElement","useUniqueId","setId","Enter","HvScrollToVertical","props","id","defaultSelectedIndex","scrollElementId","href","onChange","onClick","onEnter","className","classes","options","offset","position","tooltipPosition","others","elementId","selectedIndex","setScrollTo","dynamicClasses","length","handleSelection","event","value","index","preventDefault","wrappedOnChange","tooltipWrappers","map","option","label","tabs","selected","tooltipWrapper","key","root","positionAbsolute","positionFixed","propTypes","string","shape","isRequired","func","arrayOf","number","bool","oneOf","name"],"mappings":"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","sourcesContent":["import React, { useMemo } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport { withStyles } from \"@material-ui/core\";\nimport { isKeypress, KeyboardCodes } from \"../../utils\";\nimport VerticalScrollListItem from \"./VerticalScrollListItem\";\nimport styles, { generateDynamicStyles } from \"./styles\";\nimport useScrollTo from \"../useScrollTo\";\nimport addTooltipToElement from \"../withTooltip\";\nimport { useUniqueId, setId } from \"../..\";\n\nconst { Enter } = KeyboardCodes;\n\n/**\n * VerticalScrollTo element used to quickly navigate in a page.\n */\nconst HvScrollToVertical = (props) => {\n  const {\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  } = props;\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  const dynamicClasses = generateDynamicStyles(options.length);\n  const handleSelection = (event, value, index) => {\n    event.preventDefault();\n    const wrappedOnChange = () => {\n      onChange?.(event, index);\n    };\n    setScrollTo(event, value, index, wrappedOnChange);\n  };\n\n  const tooltipWrappers = useMemo(() => {\n    return options.map((option) => {\n      return addTooltipToElement(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    return (\n      <VerticalScrollListItem\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  return (\n    <ol\n      className={clsx(className, classes.root, {\n        [dynamicClasses.positionAbsolute]: position === \"absolute\",\n        [dynamicClasses.positionFixed]: position === \"fixed\",\n      })}\n      id={elementId}\n      {...others}\n    >\n      {tabs}\n    </ol>\n  );\n};\n\nHvScrollToVertical.propTypes = {\n  /**\n   * Id to be applied to the element.\n   */\n  id: PropTypes.string,\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component root class.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the component when it has a sticky position.\n     */\n    positionAbsolute: PropTypes.string,\n    /**\n     * Styles applied to the component when it has a fixed position.\n     */\n    positionFixed: PropTypes.string,\n  }).isRequired,\n  /**\n   * A function called each time the selected index changes.\n   */\n  onChange: PropTypes.func,\n  /**\n   * A function called each time an user clicks on a tab element.\n   */\n  onClick: PropTypes.func,\n  /**\n   * A function called each time an user press enter on a tab element.\n   */\n  onEnter: PropTypes.func,\n  /**\n   * An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied\n   */\n  options: PropTypes.arrayOf(\n    PropTypes.shape({\n      key: PropTypes.string,\n      value: PropTypes.string.isRequired,\n      label: PropTypes.string.isRequired,\n      offset: PropTypes.number,\n    })\n  ).isRequired,\n  /**\n   * default selected index passed from the parent.\n   */\n  defaultSelectedIndex: PropTypes.number,\n  /**\n   * The Id of the scrollable container containing displayed elements.\n   *\n   * Defaults to `window` if unspecified.\n   */\n  scrollElementId: PropTypes.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: PropTypes.number,\n  /**\n   * True if the href location link should be applied. It will create an a element around every list item\n   */\n  href: PropTypes.bool,\n  /**\n   * Position of the Vertical scroll to.\n   */\n  position: PropTypes.oneOf([\"absolute\", \"fixed\", \"relative\"]),\n  /**\n   * Position of tooltip identifying the current item.\n   */\n  tooltipPosition: PropTypes.oneOf([\"left\", \"right\", \"top\", \"bottom\"]),\n};\n\nexport default withStyles(styles, { name: \"HvScrollToVertical\" })(HvScrollToVertical);\n"],"file":"ScrollToVertical.js"}