@hitachivantara/uikit-react-lab 3.38.0

package/dist/modern/InlineEditor/InlineEditor.js

@@ -0,0 +1,199 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["className", "classes", "value", "defaultValue", "showIcon", "component", "variant", "placeholder", "onBlur", "onChange", "onKeyDown", "buttonProps", "typographyProps"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import "core-js/modules/web.dom-collections.iterator.js";
+import React, { useLayoutEffect, useRef, useState } from "react";
+import PropTypes from "prop-types";
+import clsx from "clsx";
+import { withStyles, useTheme } from "@material-ui/core";
+import { HvButton, HvInput, HvTypography, isKeypress, KeyboardCodes, useControlled } from "@hitachivantara/uikit-react-core";
+import { Edit } from "@hitachivantara/uikit-react-icons";
+import styles from "./styles";
+/**
+ * An Inline Editor allows the user to edit a record without making a major switch
+ * between viewing and editing, making it an efficient method of updating a record.
+ */
+
+const HvInlineEditor = props => {
+  const {
+    className,
+    classes,
+    value: valueProp,
+    defaultValue,
+    showIcon,
+    component: InputComponent = HvInput,
+    variant = "normalText",
+    placeholder = "Enter text",
+    onBlur,
+    onChange,
+    onKeyDown,
+    buttonProps,
+    typographyProps
+  } = props,
+        others = _objectWithoutProperties(props, _excluded);
+
+  const [value, setValue] = useControlled(valueProp, defaultValue);
+  const [editMode, setEditMode] = useState(false);
+  const [cachedValue, setCachedValue] = useState(value);
+  const inputRef = useRef();
+  const theme = useTheme();
+  const typographyStyles = theme.hv.typography[variant] || {};
+  const {
+    lineHeight
+  } = typographyStyles;
+  useLayoutEffect(() => {
+    const input = inputRef.current;
+
+    if (editMode && input) {
+      input.focus();
+      input.select();
+    }
+  }, [editMode]);
+
+  const handleClick = () => {
+    setEditMode(true);
+    setCachedValue(value);
+  };
+
+  const handleBlur = event => {
+    setEditMode(false);
+    const newValue = value || cachedValue; // empty values should be ignored
+
+    setValue(newValue);
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(event, newValue);
+  };
+
+  const handleKeyDown = event => {
+    if (isKeypress(event, KeyboardCodes.Esc)) {
+      setEditMode(false);
+      setValue(cachedValue);
+    }
+
+    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+  };
+
+  const handleChange = (event, val) => {
+    setValue(val);
+    onChange === null || onChange === void 0 ? void 0 : onChange(event, val);
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: clsx(className, classes.root)
+  }, editMode ? /*#__PURE__*/React.createElement(InputComponent, _extends({
+    inputRef: inputRef,
+    classes: {
+      root: classes.inputRoot,
+      input: classes.input,
+      inputBorderContainer: classes.inputBorderContainer
+    },
+    inputProps: {
+      style: _objectSpread(_objectSpread({}, typographyStyles), {}, {
+        height: InputComponent === HvInput ? lineHeight : undefined
+      })
+    },
+    value: value,
+    onBlur: handleBlur,
+    onChange: handleChange,
+    onKeyDown: handleKeyDown
+  }, others)) : /*#__PURE__*/React.createElement(HvButton, _extends({
+    category: "ghost",
+    overrideIconColors: false,
+    className: clsx(classes.button, parseInt(lineHeight, 10) >= 28 && classes.largeText),
+    onClick: handleClick
+  }, buttonProps), /*#__PURE__*/React.createElement(HvTypography, _extends({
+    variant: variant,
+    className: clsx(classes.text, !value && classes.textEmpty)
+  }, typographyProps), value || placeholder), /*#__PURE__*/React.createElement(Edit, {
+    color: "atmo5",
+    role: "presentation",
+    className: clsx(classes.icon, showIcon && classes.iconVisible)
+  })));
+};
+
+HvInlineEditor.propTypes = {
+  /**
+   * Class names to be applied.
+   */
+  className: PropTypes.string,
+
+  /**
+   * A Jss Object used to override or extend the component styles applied.
+   */
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+    input: PropTypes.string,
+    inputRoot: PropTypes.string,
+    inputBorderContainer: PropTypes.string,
+    text: PropTypes.string,
+    textEmpty: PropTypes.string,
+    button: PropTypes.string,
+    icon: PropTypes.string,
+    iconVisible: PropTypes.string,
+    largeText: PropTypes.string
+  }).isRequired,
+
+  /**
+   * The value of the input element, for controlled usage.
+   */
+  value: PropTypes.string,
+
+  /**
+   * The default value of the input element, for uncontrolled usage.
+   */
+  defaultValue: PropTypes.string,
+
+  /**
+   * Whether the Edit icon should always be visible
+   */
+  showIcon: PropTypes.bool,
+
+  /**
+   * Component to use as the input. The component "inherit" from `HvBaseInput` (such as `HvInput` or `HvTextArea`)
+   */
+  component: PropTypes.elementType,
+
+  /**
+   * Variant of the HvTypography to display
+   */
+  variant: PropTypes.string,
+
+  /**
+   * The placeholder value of the HvTypography.
+   */
+  placeholder: PropTypes.string,
+
+  /**
+   * Called when the input is blurred.
+   */
+  onBlur: PropTypes.func,
+
+  /**
+   * Called when the input value is changed.
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Called when a key is pressed on the input.
+   */
+  onKeyDown: PropTypes.func,
+
+  /**
+   * Props passed to the HvButton component
+   */
+  buttonProps: PropTypes.instanceOf(Object),
+
+  /**
+   * Props passed to the HvTypography text component
+   */
+  typographyProps: PropTypes.instanceOf(Object)
+};
+export default withStyles(styles, {
+  name: "HvInlineEditor"
+})(HvInlineEditor);
+//# sourceMappingURL=InlineEditor.js.map

package/dist/modern/InlineEditor/InlineEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/InlineEditor/InlineEditor.js"],"names":["React","useLayoutEffect","useRef","useState","PropTypes","clsx","withStyles","useTheme","HvButton","HvInput","HvTypography","isKeypress","KeyboardCodes","useControlled","Edit","styles","HvInlineEditor","props","className","classes","value","valueProp","defaultValue","showIcon","component","InputComponent","variant","placeholder","onBlur","onChange","onKeyDown","buttonProps","typographyProps","others","setValue","editMode","setEditMode","cachedValue","setCachedValue","inputRef","theme","typographyStyles","hv","typography","lineHeight","input","current","focus","select","handleClick","handleBlur","event","newValue","handleKeyDown","Esc","handleChange","val","root","inputRoot","inputBorderContainer","style","height","undefined","button","parseInt","largeText","text","textEmpty","icon","iconVisible","propTypes","string","shape","isRequired","bool","elementType","func","instanceOf","Object","name"],"mappings":"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","sourcesContent":["import React, { useLayoutEffect, useRef, useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\n\nimport { withStyles, useTheme } from \"@material-ui/core\";\nimport {\n  HvButton,\n  HvInput,\n  HvTypography,\n  isKeypress,\n  KeyboardCodes,\n  useControlled,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Edit } from \"@hitachivantara/uikit-react-icons\";\n\nimport styles from \"./styles\";\n\n/**\n * An Inline Editor allows the user to edit a record without making a major switch\n * between viewing and editing, making it an efficient method of updating a record.\n */\nconst HvInlineEditor = (props) => {\n  const {\n    className,\n    classes,\n    value: valueProp,\n    defaultValue,\n    showIcon,\n    component: InputComponent = HvInput,\n    variant = \"normalText\",\n    placeholder = \"Enter text\",\n    onBlur,\n    onChange,\n    onKeyDown,\n    buttonProps,\n    typographyProps,\n    ...others\n  } = props;\n  const [value, setValue] = useControlled(valueProp, defaultValue);\n  const [editMode, setEditMode] = useState(false);\n  const [cachedValue, setCachedValue] = useState(value);\n  const inputRef = useRef();\n  const theme = useTheme();\n\n  const typographyStyles = theme.hv.typography[variant] || {};\n  const { lineHeight } = typographyStyles;\n\n  useLayoutEffect(() => {\n    const input = inputRef.current;\n    if (editMode && input) {\n      input.focus();\n      input.select();\n    }\n  }, [editMode]);\n\n  const handleClick = () => {\n    setEditMode(true);\n    setCachedValue(value);\n  };\n\n  const handleBlur = (event) => {\n    setEditMode(false);\n\n    const newValue = value || cachedValue; // empty values should be ignored\n    setValue(newValue);\n    onBlur?.(event, newValue);\n  };\n\n  const handleKeyDown = (event) => {\n    if (isKeypress(event, KeyboardCodes.Esc)) {\n      setEditMode(false);\n      setValue(cachedValue);\n    }\n    onKeyDown?.(event);\n  };\n\n  const handleChange = (event, val) => {\n    setValue(val);\n    onChange?.(event, val);\n  };\n\n  return (\n    <div className={clsx(className, classes.root)}>\n      {editMode ? (\n        <InputComponent\n          inputRef={inputRef}\n          classes={{\n            root: classes.inputRoot,\n            input: classes.input,\n            inputBorderContainer: classes.inputBorderContainer,\n          }}\n          inputProps={{\n            style: {\n              ...typographyStyles,\n              height: InputComponent === HvInput ? lineHeight : undefined,\n            },\n          }}\n          value={value}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          {...others}\n        />\n      ) : (\n        <HvButton\n          category=\"ghost\"\n          overrideIconColors={false}\n          className={clsx(classes.button, {\n            [classes.largeText]: parseInt(lineHeight, 10) >= 28,\n          })}\n          onClick={handleClick}\n          {...buttonProps}\n        >\n          <HvTypography\n            variant={variant}\n            className={clsx(classes.text, { [classes.textEmpty]: !value })}\n            {...typographyProps}\n          >\n            {value || placeholder}\n          </HvTypography>\n          <Edit\n            color=\"atmo5\"\n            role=\"presentation\"\n            className={clsx(classes.icon, {\n              [classes.iconVisible]: showIcon,\n            })}\n          />\n        </HvButton>\n      )}\n    </div>\n  );\n};\n\nHvInlineEditor.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes: PropTypes.shape({\n    root: PropTypes.string,\n    input: PropTypes.string,\n    inputRoot: PropTypes.string,\n    inputBorderContainer: PropTypes.string,\n    text: PropTypes.string,\n    textEmpty: PropTypes.string,\n    button: PropTypes.string,\n    icon: PropTypes.string,\n    iconVisible: PropTypes.string,\n    largeText: PropTypes.string,\n  }).isRequired,\n  /**\n   * The value of the input element, for controlled usage.\n   */\n  value: PropTypes.string,\n  /**\n   * The default value of the input element, for uncontrolled usage.\n   */\n  defaultValue: PropTypes.string,\n  /**\n   * Whether the Edit icon should always be visible\n   */\n  showIcon: PropTypes.bool,\n  /**\n   * Component to use as the input. The component \"inherit\" from `HvBaseInput` (such as `HvInput` or `HvTextArea`)\n   */\n  component: PropTypes.elementType,\n  /**\n   * Variant of the HvTypography to display\n   */\n  variant: PropTypes.string,\n  /**\n   * The placeholder value of the HvTypography.\n   */\n  placeholder: PropTypes.string,\n  /**\n   * Called when the input is blurred.\n   */\n  onBlur: PropTypes.func,\n  /**\n   * Called when the input value is changed.\n   */\n  onChange: PropTypes.func,\n  /**\n   * Called when a key is pressed on the input.\n   */\n  onKeyDown: PropTypes.func,\n  /**\n   * Props passed to the HvButton component\n   */\n  buttonProps: PropTypes.instanceOf(Object),\n  /**\n   * Props passed to the HvTypography text component\n   */\n  typographyProps: PropTypes.instanceOf(Object),\n};\n\nexport default withStyles(styles, { name: \"HvInlineEditor\" })(HvInlineEditor);\n"],"file":"InlineEditor.js"}

package/dist/modern/InlineEditor/index.d.ts

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

package/dist/modern/InlineEditor/index.js

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

package/dist/modern/InlineEditor/index.js.map

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

package/dist/modern/InlineEditor/styles.js

@@ -0,0 +1,54 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+const truncateStyles = {
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+};
+
+const styles = theme => ({
+  root: {},
+  inputRoot: {},
+  inputBorderContainer: {
+    top: "unset",
+    bottom: 0
+  },
+  input: {
+    padding: theme.hvSpacing("8px", 0)
+  },
+  text: _objectSpread({}, truncateStyles),
+  textEmpty: {
+    color: theme.hv.typography.placeholderText.color
+  },
+  button: {
+    cursor: "text",
+    height: "100%",
+    width: "100%",
+    maxWidth: "100%",
+    justifyContent: "flex-start",
+    backgroundColor: "transparent",
+    "&:hover, &:active, &:focus": {
+      backgroundColor: "transparent",
+      "& $icon": {
+        visibility: "visible"
+      }
+    }
+  },
+  icon: {
+    cursor: "pointer",
+    visibility: "hidden"
+  },
+  iconVisible: {
+    visibility: "visible"
+  },
+  largeText: {
+    margin: theme.hvSpacing("8px", 0)
+  }
+});
+
+export default styles;
+//# sourceMappingURL=styles.js.map

package/dist/modern/InlineEditor/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/InlineEditor/styles.js"],"names":["truncateStyles","overflow","textOverflow","whiteSpace","styles","theme","root","inputRoot","inputBorderContainer","top","bottom","input","padding","hvSpacing","text","textEmpty","color","hv","typography","placeholderText","button","cursor","height","width","maxWidth","justifyContent","backgroundColor","visibility","icon","iconVisible","largeText","margin"],"mappings":";;;;;;AAAA,MAAMA,cAAc,GAAG;AACrBC,EAAAA,QAAQ,EAAE,QADW;AAErBC,EAAAA,YAAY,EAAE,UAFO;AAGrBC,EAAAA,UAAU,EAAE;AAHS,CAAvB;;AAMA,MAAMC,MAAM,GAAIC,KAAD,KAAY;AACzBC,EAAAA,IAAI,EAAE,EADmB;AAEzBC,EAAAA,SAAS,EAAE,EAFc;AAGzBC,EAAAA,oBAAoB,EAAE;AACpBC,IAAAA,GAAG,EAAE,OADe;AAEpBC,IAAAA,MAAM,EAAE;AAFY,GAHG;AAOzBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,OAAO,EAAEP,KAAK,CAACQ,SAAN,CAAgB,KAAhB,EAAuB,CAAvB;AADJ,GAPkB;AAUzBC,EAAAA,IAAI,oBACCd,cADD,CAVqB;AAazBe,EAAAA,SAAS,EAAE;AACTC,IAAAA,KAAK,EAAEX,KAAK,CAACY,EAAN,CAASC,UAAT,CAAoBC,eAApB,CAAoCH;AADlC,GAbc;AAgBzBI,EAAAA,MAAM,EAAE;AACNC,IAAAA,MAAM,EAAE,MADF;AAENC,IAAAA,MAAM,EAAE,MAFF;AAGNC,IAAAA,KAAK,EAAE,MAHD;AAINC,IAAAA,QAAQ,EAAE,MAJJ;AAKNC,IAAAA,cAAc,EAAE,YALV;AAONC,IAAAA,eAAe,EAAE,aAPX;AAQN,kCAA8B;AAC5BA,MAAAA,eAAe,EAAE,aADW;AAE5B,iBAAW;AACTC,QAAAA,UAAU,EAAE;AADH;AAFiB;AARxB,GAhBiB;AA+BzBC,EAAAA,IAAI,EAAE;AACJP,IAAAA,MAAM,EAAE,SADJ;AAEJM,IAAAA,UAAU,EAAE;AAFR,GA/BmB;AAmCzBE,EAAAA,WAAW,EAAE;AACXF,IAAAA,UAAU,EAAE;AADD,GAnCY;AAsCzBG,EAAAA,SAAS,EAAE;AACTC,IAAAA,MAAM,EAAE1B,KAAK,CAACQ,SAAN,CAAgB,KAAhB,EAAuB,CAAvB;AADC;AAtCc,CAAZ,CAAf;;AA2CA,eAAeT,MAAf","sourcesContent":["const truncateStyles = {\n  overflow: \"hidden\",\n  textOverflow: \"ellipsis\",\n  whiteSpace: \"nowrap\",\n};\n\nconst styles = (theme) => ({\n  root: {},\n  inputRoot: {},\n  inputBorderContainer: {\n    top: \"unset\",\n    bottom: 0,\n  },\n  input: {\n    padding: theme.hvSpacing(\"8px\", 0),\n  },\n  text: {\n    ...truncateStyles,\n  },\n  textEmpty: {\n    color: theme.hv.typography.placeholderText.color,\n  },\n  button: {\n    cursor: \"text\",\n    height: \"100%\",\n    width: \"100%\",\n    maxWidth: \"100%\",\n    justifyContent: \"flex-start\",\n\n    backgroundColor: \"transparent\",\n    \"&:hover, &:active, &:focus\": {\n      backgroundColor: \"transparent\",\n      \"& $icon\": {\n        visibility: \"visible\",\n      },\n    },\n  },\n  icon: {\n    cursor: \"pointer\",\n    visibility: \"hidden\",\n  },\n  iconVisible: {\n    visibility: \"visible\",\n  },\n  largeText: {\n    margin: theme.hvSpacing(\"8px\", 0),\n  },\n});\n\nexport default styles;\n"],"file":"styles.js"}

package/dist/modern/NavigationAnchors/NavigationAnchors.d.ts

@@ -0,0 +1,49 @@
+import { StandardProps } from "@material-ui/core";
+import { HvListContainerProps } from "@hitachivantara/uikit-react-core";
+
+interface Option {
+  key?: string;
+  label: string;
+  value: string;
+  offset?: number;
+}
+
+export type HvNavigationAnchorsClassKey = "root" | "listItemGutters" | "listItemSelected";
+
+export interface HvNavigationAnchorsProps
+  extends StandardProps<HvListContainerProps, HvNavigationAnchorsClassKey> {
+  /**
+   * 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;
+  /**
+   * Whether the anchors are always in a fixed position
+   *
+   * @deprecated Currently does nothing. Style the component instead.
+   */
+  floating?: boolean;
+  /**
+   * Currently selected index passed from the parent.
+   */
+  selectedIndex?: 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;
+}
+
+export default function HvNavigationAnchors(props: HvNavigationAnchorsProps): JSX.Element | null;

package/dist/modern/NavigationAnchors/NavigationAnchors.js

@@ -0,0 +1,309 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["selectedIndex", "scrollElementId", "href", "onClick", "className", "classes", "options", "floating", "offset"];
+import "core-js/modules/web.dom-collections.iterator.js";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import PropTypes from "prop-types";
+import clsx from "clsx";
+import { deprecatedPropType, withStyles } from "@material-ui/core";
+import { HvListContainer, HvListItem } from "@hitachivantara/uikit-react-core";
+import styles from "./styles";
+import navigationOption from "./NavigationOption";
+const RETRY_MAX = 5;
+
+const getScrollTop = (c = window) => {
+  if (c === window) {
+    return window.scrollY || window.pageYOffset || document.documentElement && document.documentElement.scrollTop || document.body.scrollTop;
+  }
+
+  return c.scrollTop;
+};
+
+const verticalScrollOffset = (t, c = window) => {
+  if (c === window) {
+    var _t$getBoundingClientR;
+
+    return ((t === null || t === void 0 ? void 0 : (_t$getBoundingClientR = t.getBoundingClientRect) === null || _t$getBoundingClientR === void 0 ? void 0 : _t$getBoundingClientR.call(t).top) || 0) + (window.scrollY || window.pageYOffset);
+  }
+
+  if (getComputedStyle(c).position !== "static") {
+    return t.offsetTop;
+  }
+
+  return t.offsetTop - c.offsetTop;
+};
+
+const scrollElement = (element, container, offset = 0) => {
+  const elemTop = verticalScrollOffset(element, container);
+  container.scrollTo({
+    top: elemTop - offset,
+    behavior: "smooth"
+  });
+};
+
+const isScrolledToTheBottom = container => {
+  const containerScrollTop = getScrollTop(container);
+
+  if (container === window) {
+    // accounting for cases where html/body are set to height:100%
+    const scrollHeight = document.documentElement && document.documentElement.scrollHeight || document.body.scrollHeight;
+    return containerScrollTop + window.innerHeight >= scrollHeight;
+  }
+
+  return containerScrollTop + container.offsetHeight >= container.scrollHeight;
+}; // find the last nav item that whose top scrolled out of the container's visible area
+
+
+const findFirstVisibleElement = (container, options, offset) => {
+  const boundsTop = verticalScrollOffset(container);
+  let i = 0; // find index of first element whose top is still visible inside the container
+
+  for (; i < options.length; i += 1) {
+    const ele = document.getElementById(options[i].value);
+
+    if (ele) {
+      const elemTop = verticalScrollOffset(ele) - (options[i].offset || offset);
+
+      if (elemTop > boundsTop) {
+        break;
+      }
+    }
+  } // return the previous index, the element that last scrolled past the top
+
+
+  return i - 1;
+};
+/**
+ * A navigation component to help in changing views, still in development
+ */
+
+
+const NavigationAnchors = _ref => {
+  let {
+    selectedIndex: selectedIndexProp = 0,
+    scrollElementId,
+    href = true,
+    onClick,
+    className,
+    classes,
+    options,
+    floating,
+    offset = 0
+  } = _ref,
+      other = _objectWithoutProperties(_ref, _excluded);
+
+  const [selectedIndex, setSelectedIndex] = useState(selectedIndexProp);
+  const scrollEle = useRef();
+  const requestedAnimationFrame = useRef(0);
+  const lastContainerScrollTop = useRef(); // ref to use a often-changing value in useCallback, has recommended in
+  // https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback
+
+  const selectedIndexRef = useRef(selectedIndex);
+  useEffect(() => {
+    selectedIndexRef.current = selectedIndex;
+  }, [selectedIndex]); // get and store the container's dom element
+
+  useEffect(() => {
+    scrollEle.current = scrollElementId && document.getElementById(scrollElementId) || window;
+    lastContainerScrollTop.current = verticalScrollOffset(scrollEle.current);
+  }, [scrollElementId]);
+  const checkScroll = useCallback(() => {
+    var _window;
+
+    if (requestedAnimationFrame.current === 0 && (_window = window) !== null && _window !== void 0 && _window.requestAnimationFrame) {
+      requestedAnimationFrame.current = window.requestAnimationFrame(() => {
+        requestedAnimationFrame.current = 0;
+        const firstVisibleElementIndex = findFirstVisibleElement(scrollEle.current, options, offset);
+        let newSelectedIndex = firstVisibleElementIndex; // select the first element when all elements are bellow the container's top
+
+        if (firstVisibleElementIndex < 0) {
+          newSelectedIndex = 0;
+        } // if the user has reached the bottom of the container, select the first nav item still visible
+        // (usually this selects the last nav item, when it can't reach the top the container)
+        // in theory only needed when scrolling down, but no... because of the Safari bouncing behaviour
+
+
+        if (newSelectedIndex < options.length - 1 && isScrolledToTheBottom(scrollEle.current)) {
+          newSelectedIndex += 1;
+        }
+
+        const containerScrollTop = getScrollTop(scrollEle.current);
+        const isScrollingDown = containerScrollTop > lastContainerScrollTop.current;
+        lastContainerScrollTop.current = containerScrollTop; // only update the selected item if the scroll direction is moving away from it
+
+        if (isScrollingDown) {
+          if (newSelectedIndex < selectedIndexRef.current) {
+            newSelectedIndex = selectedIndexRef.current;
+          }
+        } else if (newSelectedIndex > selectedIndexRef.current) {
+          newSelectedIndex = selectedIndexRef.current;
+        }
+
+        setSelectedIndex(newSelectedIndex);
+      });
+    }
+  }, [offset, options]); // registers and unregisters the scroll listener
+
+  useEffect(() => {
+    if (scrollEle.current) {
+      scrollEle.current.addEventListener("scroll", checkScroll, false);
+    }
+
+    return () => {
+      if (scrollEle.current) {
+        scrollEle.current.removeEventListener("scroll", checkScroll);
+      }
+
+      if (requestedAnimationFrame.current !== 0) {
+        window.cancelAnimationFrame(requestedAnimationFrame.current);
+        requestedAnimationFrame.current = 0;
+      }
+    };
+  }, [checkScroll]); // waits for the elements to be rendered and scrolls to the one referenced
+  // in the URL hash, if any
+
+  useEffect(() => {
+    let checkRenderedInterval;
+
+    if (href) {
+      const hashValue = document.location.hash.split("#")[1] || "";
+      const option = options.find(o => o.value === hashValue);
+
+      if (option) {
+        let retry = 0;
+        checkRenderedInterval = setInterval(() => {
+          const ele = document.getElementById(option.value);
+
+          if (ele) {
+            scrollElement(ele, scrollEle.current, option.offset || offset);
+            clearInterval(checkRenderedInterval);
+          } else {
+            retry += 1;
+
+            if (retry === RETRY_MAX) {
+              clearInterval(checkRenderedInterval);
+            }
+          }
+        }, 1000);
+      }
+    }
+
+    return () => {
+      clearInterval(checkRenderedInterval);
+    }; // we really want to run this just in the first load
+    // in fact this doesn't even belong here, the logic should be external
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleListItemClick = (event, id, index) => {
+    const option = options.find(o => o.value === id);
+
+    if (option) {
+      const ele = document.getElementById(id);
+
+      if (ele) {
+        scrollElement(ele, scrollEle.current, option.offset || offset);
+      }
+
+      if (!href && onClick) {
+        onClick(event, index, option);
+      } else if (href) {
+        window.history.pushState({}, "", `#${options[index].value}`);
+      }
+
+      setSelectedIndex(index); // Safari scrolls immediately (no smooth scroll support),
+      // so this ref value must be updated asap
+
+      selectedIndexRef.current = index;
+    }
+  };
+
+  const navOptions = useMemo(() => {
+    return options.map(option => {
+      return navigationOption(option.label);
+    });
+  }, [options]);
+  return /*#__PURE__*/React.createElement(HvListContainer, _extends({
+    interactive: true,
+    className: clsx(className, classes.root)
+  }, other), options.map((option, index) => {
+    const NavOpt = navOptions[index];
+    return /*#__PURE__*/React.createElement(HvListItem, {
+      classes: {
+        selected: classes.listItemSelected,
+        gutters: classes.listItemGutters
+      },
+      key: option.key || option.label,
+      onClick: event => handleListItemClick(event, option.value, index),
+      selected: selectedIndex === index
+    }, /*#__PURE__*/React.createElement(NavOpt, null));
+  }));
+};
+
+NavigationAnchors.propTypes = {
+  /**
+   * Class names to be applied.
+   */
+  className: PropTypes.string,
+
+  /**
+   * A Jss Object used to override or extend the styles applied.
+   */
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+    listItemGutters: PropTypes.string,
+    listItemSelected: PropTypes.string
+  }).isRequired,
+
+  /**
+   * 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,
+
+  /**
+   * True if the href location link should be applied. It will create an a element around every list item
+   */
+  href: PropTypes.bool,
+
+  /**
+   * A callback called on click of every list item, if the href is false
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * Whether the anchors are always in a fixed position
+   *
+   * @deprecated Currently does nothing. Style the component instead.
+   */
+  floating: deprecatedPropType(PropTypes.bool),
+
+  /**
+   * Currently selected index passed from the parent.
+   */
+  selectedIndex: 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
+};
+export default withStyles(styles, {
+  name: "HvNavigationAnchors"
+})(NavigationAnchors);
+//# sourceMappingURL=NavigationAnchors.js.map