@hitachivantara/uikit-react-core 2.23.2

package/dist/modern/UserPreferences/UserPreferences.js

@@ -0,0 +1,214 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["className", "classes", "isOpen", "toggleOpenCallback", "children", "position", "closeOnExit", "userInfo"];
+import "core-js/modules/web.dom-collections.iterator.js";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import PropTypes from "prop-types";
+import ClickAwayListener from "@material-ui/core/ClickAwayListener";
+import { withStyles } from "@material-ui/core";
+import clsx from "clsx";
+import isNil from "lodash/isNil";
+import { getFirstAndLastFocus, isKeypress, KeyboardCodes } from "../utils";
+import styles from "./styles";
+import Typography from "../Typography";
+/**
+ * User preferences are a group of configurable settings that can be customized for a particular user.
+ *
+ * Our implementation of the user preferences is divided in:
+ * <ul>
+ * <li>Actions - container for actions</li>
+ * <li>Action - action button</li>
+ * <li>Options - container for options</li>
+ * <li>Group - creates a division between different sets of option, with the possibility of setting a label</li>
+ * <li>Label - Label typography.</li>
+ * <li>Option - Option button</li>
+ * </ul>
+ * To build the user preferences a composition of these elements should be used.
+ *
+ */
+
+const HvUserPreferences = _ref => {
+  let {
+    className,
+    classes,
+    isOpen = false,
+    toggleOpenCallback,
+    children,
+    position = "static",
+    closeOnExit = false,
+    userInfo
+  } = _ref,
+      others = _objectWithoutProperties(_ref, _excluded);
+
+  const [open, setOpen] = useState(isOpen);
+  const [prevPropOpen, setPrevPropOpen] = useState(null);
+  const containerRef = useRef(null);
+  const focusableList = useRef(null);
+
+  if (isOpen !== prevPropOpen) {
+    setOpen(isOpen);
+    setPrevPropOpen(isOpen);
+  }
+  /**
+   * Fills the object with the first and last focusable element inside the container.
+   * When the container is open the first focusable element is focus.
+   */
+
+
+  useEffect(() => {
+    setTimeout(() => {
+      if (open) {
+        focusableList.current = getFirstAndLastFocus(containerRef.current);
+        if (focusableList.current.first) focusableList.current.first.focus();
+      }
+    });
+  }, [open]);
+  /**
+   * Toggle the open state based on the received parameter.
+   */
+
+  const toggleOpen = useCallback((newState = null) => {
+    if (newState !== null) {
+      if (newState !== open) {
+        setOpen(newState);
+      } else {
+        return;
+      }
+    } else {
+      setOpen(prevState => !prevState);
+    }
+
+    toggleOpenCallback === null || toggleOpenCallback === void 0 ? void 0 : toggleOpenCallback(newState);
+  }, [toggleOpenCallback, open]);
+  /**
+   * Handler of keyboard clicks.
+   */
+
+  const handlerKeyContainer = useCallback(event => {
+    if (closeOnExit) {
+      if (isKeypress(event, KeyboardCodes.Tab) && !isNil(event.target) && !isNil(focusableList.current) && !isNil(focusableList.current.first)) {
+        if (event.shiftKey && event.target.id === focusableList.current.first.id || !event.shiftKey && event.target.id === focusableList.current.last.id) {
+          toggleOpen(false);
+        }
+      }
+
+      if (isKeypress(event, KeyboardCodes.Esc) === false) {
+        return;
+      }
+
+      toggleOpen(false);
+    }
+  }, [closeOnExit, toggleOpen]);
+  const renderedContainer = useMemo(() => /*#__PURE__*/React.createElement(ClickAwayListener, {
+    onClickAway: () => closeOnExit && toggleOpen(false)
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
+    className: classes.contentContainer,
+    onKeyDown: handlerKeyContainer
+  }, userInfo && /*#__PURE__*/React.createElement("div", {
+    className: classes.userInfo
+  }, /*#__PURE__*/React.createElement(Typography, {
+    variant: "highlightText"
+  }, userInfo.label1), /*#__PURE__*/React.createElement(Typography, {
+    variant: "sText"
+  }, userInfo.label2)), children)), [children, classes.userInfo, classes.contentContainer, handlerKeyContainer, userInfo, closeOnExit, toggleOpen]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: clsx(classes.root, className, {
+      "static": classes.static,
+      "relative": classes.relative,
+      "fixed": classes.fixed,
+      "absolute": classes.absolute
+    }[position])
+  }, /*#__PURE__*/React.createElement("div", _extends({
+    className: classes.container
+  }, others), open && renderedContainer));
+};
+
+process.env.NODE_ENV !== "production" ? HvUserPreferences.propTypes = {
+  /**
+   * 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 when position is fixed.
+     */
+    fixed: PropTypes.string,
+
+    /**
+     * Styles applied when position is relative.
+     */
+    relative: PropTypes.string,
+
+    /**
+     * Styles applied when position is absolute.
+     */
+    absolute: PropTypes.string,
+
+    /**
+     * Styles applied when position is static.
+     */
+    static: PropTypes.string,
+
+    /**
+     * Styles applied to the container.
+     */
+    container: PropTypes.string,
+
+    /**
+     * Styles applied to the inside of the container.
+     */
+    contentContainer: PropTypes.string,
+
+    /**
+     * Styles applied to the user information.
+     */
+    userInfo: PropTypes.string
+  }).isRequired,
+
+  /**
+   * Defines if the user preferences is shown.
+   */
+  isOpen: PropTypes.bool,
+
+  /**
+   * Position of the component.
+   */
+  position: PropTypes.oneOf(["static", "relative", "fixed", "absolute"]),
+
+  /**
+   * Children component.
+   */
+  children: PropTypes.node.isRequired,
+
+  /**
+   * Callback when the navigation toggles between open and close.
+   */
+  toggleOpenCallback: PropTypes.func,
+
+  /**
+   * Defines if the content pane should close when losing focus / clicking outside.
+   */
+  closeOnExit: PropTypes.bool,
+
+  /**
+   * User information.
+   */
+  userInfo: PropTypes.shape({
+    label1: PropTypes.string,
+    label2: PropTypes.string
+  })
+} : void 0;
+export default withStyles(styles, {
+  name: "HvUserPreferences"
+})(HvUserPreferences);
+//# sourceMappingURL=UserPreferences.js.map

package/dist/modern/UserPreferences/UserPreferences.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserPreferences.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","PropTypes","ClickAwayListener","withStyles","clsx","isNil","getFirstAndLastFocus","isKeypress","KeyboardCodes","styles","Typography","HvUserPreferences","className","classes","isOpen","toggleOpenCallback","children","position","closeOnExit","userInfo","others","open","setOpen","prevPropOpen","setPrevPropOpen","containerRef","focusableList","setTimeout","current","first","focus","toggleOpen","newState","prevState","handlerKeyContainer","event","Tab","target","shiftKey","id","last","Esc","renderedContainer","contentContainer","label1","label2","root","static","relative","fixed","absolute","container","propTypes","string","shape","isRequired","bool","oneOf","node","func","name"],"sources":["../../../src/UserPreferences/UserPreferences.js"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport ClickAwayListener from \"@material-ui/core/ClickAwayListener\";\nimport { withStyles } from \"@material-ui/core\";\nimport clsx from \"clsx\";\nimport isNil from \"lodash/isNil\";\nimport { getFirstAndLastFocus, isKeypress, KeyboardCodes } from \"../utils\";\nimport styles from \"./styles\";\nimport Typography from \"../Typography\";\n\n/**\n * User preferences are a group of configurable settings that can be customized for a particular user.\n *\n * Our implementation of the user preferences is divided in:\n * <ul>\n * <li>Actions - container for actions</li>\n * <li>Action - action button</li>\n * <li>Options - container for options</li>\n * <li>Group - creates a division between different sets of option, with the possibility of setting a label</li>\n * <li>Label - Label typography.</li>\n * <li>Option - Option button</li>\n * </ul>\n * To build the user preferences a composition of these elements should be used.\n *\n */\nconst HvUserPreferences = ({\n  className,\n  classes,\n  isOpen = false,\n  toggleOpenCallback,\n  children,\n  position = \"static\",\n  closeOnExit = false,\n  userInfo,\n  ...others\n}) => {\n  const [open, setOpen] = useState(isOpen);\n  const [prevPropOpen, setPrevPropOpen] = useState(null);\n  const containerRef = useRef(null);\n  const focusableList = useRef(null);\n\n  if (isOpen !== prevPropOpen) {\n    setOpen(isOpen);\n    setPrevPropOpen(isOpen);\n  }\n\n  /**\n   * Fills the object with the first and last focusable element inside the container.\n   * When the container is open the first focusable element is focus.\n   */\n  useEffect(() => {\n    setTimeout(() => {\n      if (open) {\n        focusableList.current = getFirstAndLastFocus(containerRef.current);\n        if (focusableList.current.first) focusableList.current.first.focus();\n      }\n    });\n  }, [open]);\n\n  /**\n   * Toggle the open state based on the received parameter.\n   */\n  const toggleOpen = useCallback(\n    (newState = null) => {\n      if (newState !== null) {\n        if (newState !== open) {\n          setOpen(newState);\n        } else {\n          return;\n        }\n      } else {\n        setOpen((prevState) => !prevState);\n      }\n      toggleOpenCallback?.(newState);\n    },\n    [toggleOpenCallback, open]\n  );\n\n  /**\n   * Handler of keyboard clicks.\n   */\n  const handlerKeyContainer = useCallback(\n    (event) => {\n      if (closeOnExit) {\n        if (\n          isKeypress(event, KeyboardCodes.Tab) &&\n          !isNil(event.target) &&\n          !isNil(focusableList.current) &&\n          !isNil(focusableList.current.first)\n        ) {\n          if (\n            (event.shiftKey && event.target.id === focusableList.current.first.id) ||\n            (!event.shiftKey && event.target.id === focusableList.current.last.id)\n          ) {\n            toggleOpen(false);\n          }\n        }\n        if (isKeypress(event, KeyboardCodes.Esc) === false) {\n          return;\n        }\n        toggleOpen(false);\n      }\n    },\n    [closeOnExit, toggleOpen]\n  );\n\n  const renderedContainer = useMemo(\n    () => (\n      <ClickAwayListener onClickAway={() => closeOnExit && toggleOpen(false)}>\n        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n        <div\n          ref={containerRef}\n          className={classes.contentContainer}\n          onKeyDown={handlerKeyContainer}\n        >\n          {userInfo && (\n            <div className={classes.userInfo}>\n              <Typography variant=\"highlightText\">{userInfo.label1}</Typography>\n              <Typography variant=\"sText\">{userInfo.label2}</Typography>\n            </div>\n          )}\n          {children}\n        </div>\n      </ClickAwayListener>\n    ),\n    [\n      children,\n      classes.userInfo,\n      classes.contentContainer,\n      handlerKeyContainer,\n      userInfo,\n      closeOnExit,\n      toggleOpen,\n    ]\n  );\n\n  return (\n    <div\n      className={clsx([\n        classes.root,\n        {\n          [classes.static]: position === \"static\",\n          [classes.relative]: position === \"relative\",\n          [classes.fixed]: position === \"fixed\",\n          [classes.absolute]: position === \"absolute\",\n        },\n        className,\n      ])}\n    >\n      <div className={classes.container} {...others}>\n        {open && renderedContainer}\n      </div>\n    </div>\n  );\n};\n\nHvUserPreferences.propTypes = {\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 when position is fixed.\n     */\n    fixed: PropTypes.string,\n    /**\n     * Styles applied when position is relative.\n     */\n    relative: PropTypes.string,\n    /**\n     * Styles applied when position is absolute.\n     */\n    absolute: PropTypes.string,\n    /**\n     * Styles applied when position is static.\n     */\n    static: PropTypes.string,\n    /**\n     * Styles applied to the container.\n     */\n    container: PropTypes.string,\n    /**\n     * Styles applied to the inside of the container.\n     */\n    contentContainer: PropTypes.string,\n    /**\n     * Styles applied to the user information.\n     */\n    userInfo: PropTypes.string,\n  }).isRequired,\n  /**\n   * Defines if the user preferences is shown.\n   */\n  isOpen: PropTypes.bool,\n  /**\n   * Position of the component.\n   */\n  position: PropTypes.oneOf([\"static\", \"relative\", \"fixed\", \"absolute\"]),\n  /**\n   * Children component.\n   */\n  children: PropTypes.node.isRequired,\n  /**\n   * Callback when the navigation toggles between open and close.\n   */\n  toggleOpenCallback: PropTypes.func,\n  /**\n   * Defines if the content pane should close when losing focus / clicking outside.\n   */\n  closeOnExit: PropTypes.bool,\n  /**\n   * User information.\n   */\n  userInfo: PropTypes.shape({\n    label1: PropTypes.string,\n    label2: PropTypes.string,\n  }),\n};\n\nexport default withStyles(styles, { name: \"HvUserPreferences\" })(HvUserPreferences);\n"],"mappings":";;;;AAAA,OAAOA,KAAP,IAAgBC,WAAhB,EAA6BC,SAA7B,EAAwCC,OAAxC,EAAiDC,MAAjD,EAAyDC,QAAzD,QAAyE,OAAzE;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,iBAAP,MAA8B,qCAA9B;AACA,SAASC,UAAT,QAA2B,mBAA3B;AACA,OAAOC,IAAP,MAAiB,MAAjB;AACA,OAAOC,KAAP,MAAkB,cAAlB;AACA,SAASC,oBAAT,EAA+BC,UAA/B,EAA2CC,aAA3C,QAAgE,UAAhE;AACA,OAAOC,MAAP,MAAmB,UAAnB;AACA,OAAOC,UAAP,MAAuB,eAAvB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,MAAMC,iBAAiB,GAAG,QAUpB;EAAA,IAVqB;IACzBC,SADyB;IAEzBC,OAFyB;IAGzBC,MAAM,GAAG,KAHgB;IAIzBC,kBAJyB;IAKzBC,QALyB;IAMzBC,QAAQ,GAAG,QANc;IAOzBC,WAAW,GAAG,KAPW;IAQzBC;EARyB,CAUrB;EAAA,IADDC,MACC;;EACJ,MAAM,CAACC,IAAD,EAAOC,OAAP,IAAkBtB,QAAQ,CAACc,MAAD,CAAhC;EACA,MAAM,CAACS,YAAD,EAAeC,eAAf,IAAkCxB,QAAQ,CAAC,IAAD,CAAhD;EACA,MAAMyB,YAAY,GAAG1B,MAAM,CAAC,IAAD,CAA3B;EACA,MAAM2B,aAAa,GAAG3B,MAAM,CAAC,IAAD,CAA5B;;EAEA,IAAIe,MAAM,KAAKS,YAAf,EAA6B;IAC3BD,OAAO,CAACR,MAAD,CAAP;IACAU,eAAe,CAACV,MAAD,CAAf;EACD;EAED;AACF;AACA;AACA;;;EACEjB,SAAS,CAAC,MAAM;IACd8B,UAAU,CAAC,MAAM;MACf,IAAIN,IAAJ,EAAU;QACRK,aAAa,CAACE,OAAd,GAAwBtB,oBAAoB,CAACmB,YAAY,CAACG,OAAd,CAA5C;QACA,IAAIF,aAAa,CAACE,OAAd,CAAsBC,KAA1B,EAAiCH,aAAa,CAACE,OAAd,CAAsBC,KAAtB,CAA4BC,KAA5B;MAClC;IACF,CALS,CAAV;EAMD,CAPQ,EAON,CAACT,IAAD,CAPM,CAAT;EASA;AACF;AACA;;EACE,MAAMU,UAAU,GAAGnC,WAAW,CAC5B,CAACoC,QAAQ,GAAG,IAAZ,KAAqB;IACnB,IAAIA,QAAQ,KAAK,IAAjB,EAAuB;MACrB,IAAIA,QAAQ,KAAKX,IAAjB,EAAuB;QACrBC,OAAO,CAACU,QAAD,CAAP;MACD,CAFD,MAEO;QACL;MACD;IACF,CAND,MAMO;MACLV,OAAO,CAAEW,SAAD,IAAe,CAACA,SAAjB,CAAP;IACD;;IACDlB,kBAAkB,SAAlB,IAAAA,kBAAkB,WAAlB,YAAAA,kBAAkB,CAAGiB,QAAH,CAAlB;EACD,CAZ2B,EAa5B,CAACjB,kBAAD,EAAqBM,IAArB,CAb4B,CAA9B;EAgBA;AACF;AACA;;EACE,MAAMa,mBAAmB,GAAGtC,WAAW,CACpCuC,KAAD,IAAW;IACT,IAAIjB,WAAJ,EAAiB;MACf,IACEX,UAAU,CAAC4B,KAAD,EAAQ3B,aAAa,CAAC4B,GAAtB,CAAV,IACA,CAAC/B,KAAK,CAAC8B,KAAK,CAACE,MAAP,CADN,IAEA,CAAChC,KAAK,CAACqB,aAAa,CAACE,OAAf,CAFN,IAGA,CAACvB,KAAK,CAACqB,aAAa,CAACE,OAAd,CAAsBC,KAAvB,CAJR,EAKE;QACA,IACGM,KAAK,CAACG,QAAN,IAAkBH,KAAK,CAACE,MAAN,CAAaE,EAAb,KAAoBb,aAAa,CAACE,OAAd,CAAsBC,KAAtB,CAA4BU,EAAnE,IACC,CAACJ,KAAK,CAACG,QAAP,IAAmBH,KAAK,CAACE,MAAN,CAAaE,EAAb,KAAoBb,aAAa,CAACE,OAAd,CAAsBY,IAAtB,CAA2BD,EAFrE,EAGE;UACAR,UAAU,CAAC,KAAD,CAAV;QACD;MACF;;MACD,IAAIxB,UAAU,CAAC4B,KAAD,EAAQ3B,aAAa,CAACiC,GAAtB,CAAV,KAAyC,KAA7C,EAAoD;QAClD;MACD;;MACDV,UAAU,CAAC,KAAD,CAAV;IACD;EACF,CArBoC,EAsBrC,CAACb,WAAD,EAAca,UAAd,CAtBqC,CAAvC;EAyBA,MAAMW,iBAAiB,GAAG5C,OAAO,CAC/B,mBACE,oBAAC,iBAAD;IAAmB,WAAW,EAAE,MAAMoB,WAAW,IAAIa,UAAU,CAAC,KAAD;EAA/D,gBAEE;IACE,GAAG,EAAEN,YADP;IAEE,SAAS,EAAEZ,OAAO,CAAC8B,gBAFrB;IAGE,SAAS,EAAET;EAHb,GAKGf,QAAQ,iBACP;IAAK,SAAS,EAAEN,OAAO,CAACM;EAAxB,gBACE,oBAAC,UAAD;IAAY,OAAO,EAAC;EAApB,GAAqCA,QAAQ,CAACyB,MAA9C,CADF,eAEE,oBAAC,UAAD;IAAY,OAAO,EAAC;EAApB,GAA6BzB,QAAQ,CAAC0B,MAAtC,CAFF,CANJ,EAWG7B,QAXH,CAFF,CAF6B,EAmB/B,CACEA,QADF,EAEEH,OAAO,CAACM,QAFV,EAGEN,OAAO,CAAC8B,gBAHV,EAIET,mBAJF,EAKEf,QALF,EAMED,WANF,EAOEa,UAPF,CAnB+B,CAAjC;EA8BA,oBACE;IACE,SAAS,EAAE3B,IAAI,CACbS,OAAO,CAACiC,IADK,EAQblC,SARa;MAGoB,QAHpB,EAGVC,OAAO,CAACkC,MAHE;MAIsB,UAJtB,EAIVlC,OAAO,CAACmC,QAJE;MAKmB,OALnB,EAKVnC,OAAO,CAACoC,KALE;MAMsB,UANtB,EAMVpC,OAAO,CAACqC;IANE,EAGOjC,QAHP;EADjB,gBAYE;IAAK,SAAS,EAAEJ,OAAO,CAACsC;EAAxB,GAAuC/B,MAAvC,GACGC,IAAI,IAAIqB,iBADX,CAZF,CADF;AAkBD,CAjID;;AAmIA,wCAAA/B,iBAAiB,CAACyC,SAAlB,GAA8B;EAC5B;AACF;AACA;EACExC,SAAS,EAAEX,SAAS,CAACoD,MAJO;;EAK5B;AACF;AACA;EACExC,OAAO,EAAEZ,SAAS,CAACqD,KAAV,CAAgB;IACvB;AACJ;AACA;IACIR,IAAI,EAAE7C,SAAS,CAACoD,MAJO;;IAKvB;AACJ;AACA;IACIJ,KAAK,EAAEhD,SAAS,CAACoD,MARM;;IASvB;AACJ;AACA;IACIL,QAAQ,EAAE/C,SAAS,CAACoD,MAZG;;IAavB;AACJ;AACA;IACIH,QAAQ,EAAEjD,SAAS,CAACoD,MAhBG;;IAiBvB;AACJ;AACA;IACIN,MAAM,EAAE9C,SAAS,CAACoD,MApBK;;IAqBvB;AACJ;AACA;IACIF,SAAS,EAAElD,SAAS,CAACoD,MAxBE;;IAyBvB;AACJ;AACA;IACIV,gBAAgB,EAAE1C,SAAS,CAACoD,MA5BL;;IA6BvB;AACJ;AACA;IACIlC,QAAQ,EAAElB,SAAS,CAACoD;EAhCG,CAAhB,EAiCNE,UAzCyB;;EA0C5B;AACF;AACA;EACEzC,MAAM,EAAEb,SAAS,CAACuD,IA7CU;;EA8C5B;AACF;AACA;EACEvC,QAAQ,EAAEhB,SAAS,CAACwD,KAAV,CAAgB,CAAC,QAAD,EAAW,UAAX,EAAuB,OAAvB,EAAgC,UAAhC,CAAhB,CAjDkB;;EAkD5B;AACF;AACA;EACEzC,QAAQ,EAAEf,SAAS,CAACyD,IAAV,CAAeH,UArDG;;EAsD5B;AACF;AACA;EACExC,kBAAkB,EAAEd,SAAS,CAAC0D,IAzDF;;EA0D5B;AACF;AACA;EACEzC,WAAW,EAAEjB,SAAS,CAACuD,IA7DK;;EA8D5B;AACF;AACA;EACErC,QAAQ,EAAElB,SAAS,CAACqD,KAAV,CAAgB;IACxBV,MAAM,EAAE3C,SAAS,CAACoD,MADM;IAExBR,MAAM,EAAE5C,SAAS,CAACoD;EAFM,CAAhB;AAjEkB,CAA9B;AAuEA,eAAelD,UAAU,CAACM,MAAD,EAAS;EAAEmD,IAAI,EAAE;AAAR,CAAT,CAAV,CAAkDjD,iBAAlD,CAAf"}

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

@@ -0,0 +1,4 @@
+export { default } from "./UserPreferences";
+
+export * from "./Actions";
+export * from "./Options";

package/dist/modern/UserPreferences/index.js

@@ -0,0 +1,6 @@
+export { default } from "./UserPreferences";
+export { default as Actions } from "./Actions";
+export * from "./Actions";
+export { default as Options } from "./Options";
+export * from "./Options";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["default","Actions","Options"],"sources":["../../../src/UserPreferences/index.js"],"sourcesContent":["export { default } from \"./UserPreferences\";\n\nexport { default as Actions } from \"./Actions\";\nexport * from \"./Actions\";\n\nexport { default as Options } from \"./Options\";\nexport * from \"./Options\";\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,mBAAxB;AAEA,SAASA,OAAO,IAAIC,OAApB,QAAmC,WAAnC;AACA,cAAc,WAAd;AAEA,SAASD,OAAO,IAAIE,OAApB,QAAmC,WAAnC;AACA,cAAc,WAAd"}

package/dist/modern/UserPreferences/styles.js

@@ -0,0 +1,46 @@
+const styles = theme => ({
+  root: {
+    display: "flex",
+    marginTop: "5px",
+    marginBottom: "0px",
+    zIndex: theme.zIndex.drawer
+  },
+  fixed: {
+    position: "fixed",
+    top: "50px",
+    bottom: 0
+  },
+  relative: {
+    position: "relative"
+  },
+  absolute: {
+    position: "absolute"
+  },
+  static: {
+    position: "static"
+  },
+  container: {
+    display: "flex",
+    zIndex: 20,
+    boxShadow: theme.hv.shadows[1]
+  },
+  contentContainer: {
+    paddingTop: theme.hv.spacing.sm,
+    paddingBottom: theme.hv.spacing.sm,
+    height: "100%",
+    minWidth: "320px",
+    overflow: "auto",
+    backgroundColor: theme.hv.palette.atmosphere.atmo1
+  },
+  userInfo: {
+    paddingLeft: theme.hv.spacing.sm,
+    paddingRight: theme.hv.spacing.sm,
+    marginBottom: theme.hv.spacing.xs,
+    " & > :not(:first-child)": {
+      paddingTop: "5px"
+    }
+  }
+});
+
+export default styles;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":["styles","theme","root","display","marginTop","marginBottom","zIndex","drawer","fixed","position","top","bottom","relative","absolute","static","container","boxShadow","hv","shadows","contentContainer","paddingTop","spacing","sm","paddingBottom","height","minWidth","overflow","backgroundColor","palette","atmosphere","atmo1","userInfo","paddingLeft","paddingRight","xs"],"sources":["../../../src/UserPreferences/styles.js"],"sourcesContent":["const styles = (theme) => ({\n  root: {\n    display: \"flex\",\n    marginTop: \"5px\",\n    marginBottom: \"0px\",\n    zIndex: theme.zIndex.drawer,\n  },\n  fixed: {\n    position: \"fixed\",\n    top: \"50px\",\n    bottom: 0,\n  },\n  relative: {\n    position: \"relative\",\n  },\n  absolute: {\n    position: \"absolute\",\n  },\n  static: {\n    position: \"static\",\n  },\n  container: {\n    display: \"flex\",\n    zIndex: 20,\n    boxShadow: theme.hv.shadows[1],\n  },\n  contentContainer: {\n    paddingTop: theme.hv.spacing.sm,\n    paddingBottom: theme.hv.spacing.sm,\n    height: \"100%\",\n    minWidth: \"320px\",\n    overflow: \"auto\",\n    backgroundColor: theme.hv.palette.atmosphere.atmo1,\n  },\n  userInfo: {\n    paddingLeft: theme.hv.spacing.sm,\n    paddingRight: theme.hv.spacing.sm,\n    marginBottom: theme.hv.spacing.xs,\n    \" & > :not(:first-child)\": {\n      paddingTop: \"5px\",\n    },\n  },\n});\n\nexport default styles;\n"],"mappings":"AAAA,MAAMA,MAAM,GAAIC,KAAD,KAAY;EACzBC,IAAI,EAAE;IACJC,OAAO,EAAE,MADL;IAEJC,SAAS,EAAE,KAFP;IAGJC,YAAY,EAAE,KAHV;IAIJC,MAAM,EAAEL,KAAK,CAACK,MAAN,CAAaC;EAJjB,CADmB;EAOzBC,KAAK,EAAE;IACLC,QAAQ,EAAE,OADL;IAELC,GAAG,EAAE,MAFA;IAGLC,MAAM,EAAE;EAHH,CAPkB;EAYzBC,QAAQ,EAAE;IACRH,QAAQ,EAAE;EADF,CAZe;EAezBI,QAAQ,EAAE;IACRJ,QAAQ,EAAE;EADF,CAfe;EAkBzBK,MAAM,EAAE;IACNL,QAAQ,EAAE;EADJ,CAlBiB;EAqBzBM,SAAS,EAAE;IACTZ,OAAO,EAAE,MADA;IAETG,MAAM,EAAE,EAFC;IAGTU,SAAS,EAAEf,KAAK,CAACgB,EAAN,CAASC,OAAT,CAAiB,CAAjB;EAHF,CArBc;EA0BzBC,gBAAgB,EAAE;IAChBC,UAAU,EAAEnB,KAAK,CAACgB,EAAN,CAASI,OAAT,CAAiBC,EADb;IAEhBC,aAAa,EAAEtB,KAAK,CAACgB,EAAN,CAASI,OAAT,CAAiBC,EAFhB;IAGhBE,MAAM,EAAE,MAHQ;IAIhBC,QAAQ,EAAE,OAJM;IAKhBC,QAAQ,EAAE,MALM;IAMhBC,eAAe,EAAE1B,KAAK,CAACgB,EAAN,CAASW,OAAT,CAAiBC,UAAjB,CAA4BC;EAN7B,CA1BO;EAkCzBC,QAAQ,EAAE;IACRC,WAAW,EAAE/B,KAAK,CAACgB,EAAN,CAASI,OAAT,CAAiBC,EADtB;IAERW,YAAY,EAAEhC,KAAK,CAACgB,EAAN,CAASI,OAAT,CAAiBC,EAFvB;IAGRjB,YAAY,EAAEJ,KAAK,CAACgB,EAAN,CAASI,OAAT,CAAiBa,EAHvB;IAIR,2BAA2B;MACzBd,UAAU,EAAE;IADa;EAJnB;AAlCe,CAAZ,CAAf;;AA4CA,eAAepB,MAAf"}

package/dist/modern/VerticalNavigation/Actions/Action.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { StandardProps } from "@material-ui/core";
+import { NavigationData } from "../Navigation";
+import { HvTypographyProps } from "../../Typography";
+
+export interface HvActionProps
+  extends StandardProps<HvTypographyProps, HvActionClassKey, "onClick"> {
+  /**
+   * Visual label.
+   */
+  label?: string;
+
+  /**
+   * Icon.
+   */
+  icon?: React.ReactNode;
+
+  /**
+   * Callback called when clicked.
+   */
+  onClick: (event: Event, selectedItem: NavigationData) => void;
+}
+
+export type HvActionClassKey = "action" | "noIcon";
+
+export default function HvVerticalNavigationAction(props: HvActionProps): JSX.Element | null;

package/dist/modern/VerticalNavigation/Actions/Action.js

@@ -0,0 +1,93 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["className", "classes", "id", "label", "icon", "onClick"];
+import React, { useCallback, useMemo } from "react";
+import PropTypes from "prop-types";
+import clsx from "clsx";
+import { withStyles } from "@material-ui/core";
+import { KeyboardCodes, isKeypress } from "../../utils/KeyboardUtils";
+import HvTypography from "../../Typography";
+import { setId } from "../../utils";
+import styles from "./styles";
+
+const Action = _ref => {
+  let {
+    className,
+    classes,
+    id,
+    label = "",
+    icon,
+    onClick
+  } = _ref,
+      others = _objectWithoutProperties(_ref, _excluded);
+
+  const handleKeyDown = useCallback(event => {
+    if (onClick == null || !isKeypress(event, KeyboardCodes.Enter) && !isKeypress(event, KeyboardCodes.SpaceBar)) {
+      return;
+    }
+
+    onClick(event);
+  }, [onClick]);
+  const renderedIcon = useMemo(() => icon && /*#__PURE__*/React.cloneElement(icon, {
+    boxStyles: {
+      width: "32px",
+      height: "32px"
+    }
+  }), [icon]);
+  return /*#__PURE__*/React.createElement(HvTypography, _extends({
+    id: setId(id, "button"),
+    component: "div",
+    variant: "normalText",
+    role: "button",
+    className: clsx(className, classes.action, !icon && classes.noIcon),
+    tabIndex: 0,
+    onKeyDown: handleKeyDown,
+    onClick: onClick
+  }, others), renderedIcon, label);
+};
+
+process.env.NODE_ENV !== "production" ? Action.propTypes = {
+  /**
+   * Class names to be applied.
+   */
+  className: PropTypes.string,
+
+  /**
+   * A Jss Object used to override or extend the styles applied to the component.
+   */
+  classes: PropTypes.shape({
+    /**
+     * Style applied to the component.
+     */
+    action: PropTypes.string,
+
+    /**
+     * Style applied when no icon is present.
+     */
+    noIcon: PropTypes.string
+  }).isRequired,
+
+  /**
+   * Id to be applied to the action.
+   */
+  id: PropTypes.string,
+
+  /**
+   * Visual label.
+   */
+  label: PropTypes.string,
+
+  /**
+   * Icon.
+   */
+  icon: PropTypes.node,
+
+  /**
+   * Callback called when clicked.
+   */
+  onClick: PropTypes.func
+} : void 0;
+export default withStyles(styles, {
+  name: "HvVerticalNavigationAction"
+})(Action);
+//# sourceMappingURL=Action.js.map

package/dist/modern/VerticalNavigation/Actions/Action.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Action.js","names":["React","useCallback","useMemo","PropTypes","clsx","withStyles","KeyboardCodes","isKeypress","HvTypography","setId","styles","Action","className","classes","id","label","icon","onClick","others","handleKeyDown","event","Enter","SpaceBar","renderedIcon","cloneElement","boxStyles","width","height","action","noIcon","propTypes","string","shape","isRequired","node","func","name"],"sources":["../../../../src/VerticalNavigation/Actions/Action.js"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport { withStyles } from \"@material-ui/core\";\nimport { KeyboardCodes, isKeypress } from \"../../utils/KeyboardUtils\";\nimport HvTypography from \"../../Typography\";\nimport { setId } from \"../../utils\";\nimport styles from \"./styles\";\n\nconst Action = ({ className, classes, id, label = \"\", icon, onClick, ...others }) => {\n  const handleKeyDown = useCallback(\n    (event) => {\n      if (\n        onClick == null ||\n        (!isKeypress(event, KeyboardCodes.Enter) && !isKeypress(event, KeyboardCodes.SpaceBar))\n      ) {\n        return;\n      }\n\n      onClick(event);\n    },\n    [onClick]\n  );\n\n  const renderedIcon = useMemo(\n    () =>\n      icon &&\n      React.cloneElement(icon, {\n        boxStyles: { width: \"32px\", height: \"32px\" },\n      }),\n    [icon]\n  );\n\n  return (\n    <HvTypography\n      id={setId(id, \"button\")}\n      component=\"div\"\n      variant=\"normalText\"\n      role=\"button\"\n      className={clsx(className, classes.action, { [classes.noIcon]: !icon })}\n      tabIndex={0}\n      onKeyDown={handleKeyDown}\n      onClick={onClick}\n      {...others}\n    >\n      {renderedIcon}\n      {label}\n    </HvTypography>\n  );\n};\n\nAction.propTypes = {\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 to the component.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Style applied to the component.\n     */\n    action: PropTypes.string,\n    /**\n     * Style applied when no icon is present.\n     */\n    noIcon: PropTypes.string,\n  }).isRequired,\n  /**\n   * Id to be applied to the action.\n   */\n  id: PropTypes.string,\n  /**\n   * Visual label.\n   */\n  label: PropTypes.string,\n  /**\n   * Icon.\n   */\n  icon: PropTypes.node,\n  /**\n   * Callback called when clicked.\n   */\n  onClick: PropTypes.func,\n};\n\nexport default withStyles(styles, { name: \"HvVerticalNavigationAction\" })(Action);\n"],"mappings":";;;AAAA,OAAOA,KAAP,IAAgBC,WAAhB,EAA6BC,OAA7B,QAA4C,OAA5C;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,IAAP,MAAiB,MAAjB;AACA,SAASC,UAAT,QAA2B,mBAA3B;AACA,SAASC,aAAT,EAAwBC,UAAxB,QAA0C,2BAA1C;AACA,OAAOC,YAAP,MAAyB,kBAAzB;AACA,SAASC,KAAT,QAAsB,aAAtB;AACA,OAAOC,MAAP,MAAmB,UAAnB;;AAEA,MAAMC,MAAM,GAAG,QAAsE;EAAA,IAArE;IAAEC,SAAF;IAAaC,OAAb;IAAsBC,EAAtB;IAA0BC,KAAK,GAAG,EAAlC;IAAsCC,IAAtC;IAA4CC;EAA5C,CAAqE;EAAA,IAAbC,MAAa;;EACnF,MAAMC,aAAa,GAAGlB,WAAW,CAC9BmB,KAAD,IAAW;IACT,IACEH,OAAO,IAAI,IAAX,IACC,CAACV,UAAU,CAACa,KAAD,EAAQd,aAAa,CAACe,KAAtB,CAAX,IAA2C,CAACd,UAAU,CAACa,KAAD,EAAQd,aAAa,CAACgB,QAAtB,CAFzD,EAGE;MACA;IACD;;IAEDL,OAAO,CAACG,KAAD,CAAP;EACD,CAV8B,EAW/B,CAACH,OAAD,CAX+B,CAAjC;EAcA,MAAMM,YAAY,GAAGrB,OAAO,CAC1B,MACEc,IAAI,iBACJhB,KAAK,CAACwB,YAAN,CAAmBR,IAAnB,EAAyB;IACvBS,SAAS,EAAE;MAAEC,KAAK,EAAE,MAAT;MAAiBC,MAAM,EAAE;IAAzB;EADY,CAAzB,CAHwB,EAM1B,CAACX,IAAD,CAN0B,CAA5B;EASA,oBACE,oBAAC,YAAD;IACE,EAAE,EAAEP,KAAK,CAACK,EAAD,EAAK,QAAL,CADX;IAEE,SAAS,EAAC,KAFZ;IAGE,OAAO,EAAC,YAHV;IAIE,IAAI,EAAC,QAJP;IAKE,SAAS,EAAEV,IAAI,CAACQ,SAAD,EAAYC,OAAO,CAACe,MAApB,EAAgD,CAACZ,IAAjD,IAA+BH,OAAO,CAACgB,MAAvC,CALjB;IAME,QAAQ,EAAE,CANZ;IAOE,SAAS,EAAEV,aAPb;IAQE,OAAO,EAAEF;EARX,GASMC,MATN,GAWGK,YAXH,EAYGR,KAZH,CADF;AAgBD,CAxCD;;AA0CA,wCAAAJ,MAAM,CAACmB,SAAP,GAAmB;EACjB;AACF;AACA;EACElB,SAAS,EAAET,SAAS,CAAC4B,MAJJ;;EAKjB;AACF;AACA;EACElB,OAAO,EAAEV,SAAS,CAAC6B,KAAV,CAAgB;IACvB;AACJ;AACA;IACIJ,MAAM,EAAEzB,SAAS,CAAC4B,MAJK;;IAKvB;AACJ;AACA;IACIF,MAAM,EAAE1B,SAAS,CAAC4B;EARK,CAAhB,EASNE,UAjBc;;EAkBjB;AACF;AACA;EACEnB,EAAE,EAAEX,SAAS,CAAC4B,MArBG;;EAsBjB;AACF;AACA;EACEhB,KAAK,EAAEZ,SAAS,CAAC4B,MAzBA;;EA0BjB;AACF;AACA;EACEf,IAAI,EAAEb,SAAS,CAAC+B,IA7BC;;EA8BjB;AACF;AACA;EACEjB,OAAO,EAAEd,SAAS,CAACgC;AAjCF,CAAnB;AAoCA,eAAe9B,UAAU,CAACK,MAAD,EAAS;EAAE0B,IAAI,EAAE;AAAR,CAAT,CAAV,CAA2DzB,MAA3D,CAAf"}

package/dist/modern/VerticalNavigation/Actions/Actions.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { StandardProps } from "@material-ui/core";
+
+export type HvActionsProps = StandardProps<React.HTMLAttributes<HTMLDivElement>, HvActionsClassKey>;
+
+export type HvActionsClassKey = "root";
+
+export default function HvVerticalNavigationActions(props: HvActionsProps): JSX.Element | null;

package/dist/modern/VerticalNavigation/Actions/Actions.js

@@ -0,0 +1,54 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["className", "classes", "id", "children"];
+import React from "react";
+import PropTypes from "prop-types";
+import { withStyles } from "@material-ui/core";
+import clsx from "clsx";
+import styles from "./styles";
+
+const Actions = _ref => {
+  let {
+    className,
+    classes,
+    id,
+    children
+  } = _ref,
+      others = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    id: id,
+    className: clsx(className, classes.root)
+  }, others), children);
+};
+
+process.env.NODE_ENV !== "production" ? Actions.propTypes = {
+  /**
+   * Class names to be applied.
+   */
+  className: PropTypes.string,
+
+  /**
+   * A Jss Object used to override or extend the styles applied to the component.
+   */
+  classes: PropTypes.shape({
+    /**
+     * Style applied to the component.
+     */
+    root: PropTypes.string
+  }).isRequired,
+
+  /**
+   * Id to be applied to the actions container.
+   */
+  id: PropTypes.string,
+
+  /**
+   * Node to be rendered
+   */
+  children: PropTypes.node
+} : void 0;
+export default withStyles(styles, {
+  name: "HvVerticalNavigationActions"
+})(Actions);
+//# sourceMappingURL=Actions.js.map

package/dist/modern/VerticalNavigation/Actions/Actions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Actions.js","names":["React","PropTypes","withStyles","clsx","styles","Actions","className","classes","id","children","others","root","propTypes","string","shape","isRequired","node","name"],"sources":["../../../../src/VerticalNavigation/Actions/Actions.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@material-ui/core\";\nimport clsx from \"clsx\";\nimport styles from \"./styles\";\n\nconst Actions = ({ className, classes, id, children, ...others }) => {\n  return (\n    <div id={id} className={clsx(className, classes.root)} {...others}>\n      {children}\n    </div>\n  );\n};\n\nActions.propTypes = {\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 to the component.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Style applied to the component.\n     */\n    root: PropTypes.string,\n  }).isRequired,\n  /**\n   * Id to be applied to the actions container.\n   */\n  id: PropTypes.string,\n  /**\n   * Node to be rendered\n   */\n  children: PropTypes.node,\n};\n\nexport default withStyles(styles, { name: \"HvVerticalNavigationActions\" })(Actions);\n"],"mappings":";;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,SAASC,UAAT,QAA2B,mBAA3B;AACA,OAAOC,IAAP,MAAiB,MAAjB;AACA,OAAOC,MAAP,MAAmB,UAAnB;;AAEA,MAAMC,OAAO,GAAG,QAAqD;EAAA,IAApD;IAAEC,SAAF;IAAaC,OAAb;IAAsBC,EAAtB;IAA0BC;EAA1B,CAAoD;EAAA,IAAbC,MAAa;;EACnE,oBACE;IAAK,EAAE,EAAEF,EAAT;IAAa,SAAS,EAAEL,IAAI,CAACG,SAAD,EAAYC,OAAO,CAACI,IAApB;EAA5B,GAA2DD,MAA3D,GACGD,QADH,CADF;AAKD,CAND;;AAQA,wCAAAJ,OAAO,CAACO,SAAR,GAAoB;EAClB;AACF;AACA;EACEN,SAAS,EAAEL,SAAS,CAACY,MAJH;;EAKlB;AACF;AACA;EACEN,OAAO,EAAEN,SAAS,CAACa,KAAV,CAAgB;IACvB;AACJ;AACA;IACIH,IAAI,EAAEV,SAAS,CAACY;EAJO,CAAhB,EAKNE,UAbe;;EAclB;AACF;AACA;EACEP,EAAE,EAAEP,SAAS,CAACY,MAjBI;;EAkBlB;AACF;AACA;EACEJ,QAAQ,EAAER,SAAS,CAACe;AArBF,CAApB;AAwBA,eAAed,UAAU,CAACE,MAAD,EAAS;EAAEa,IAAI,EAAE;AAAR,CAAT,CAAV,CAA4DZ,OAA5D,CAAf"}

package/dist/modern/VerticalNavigation/Actions/index.d.ts

@@ -0,0 +1,5 @@
+export { default } from "./Actions";
+export * from "./Actions";
+
+export { default as Action } from "./Action";
+export * from "./Action";

package/dist/modern/VerticalNavigation/Actions/index.js

@@ -0,0 +1,3 @@
+export { default } from "./Actions";
+export { default as Action } from "./Action";
+//# sourceMappingURL=index.js.map

package/dist/modern/VerticalNavigation/Actions/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["default","Action"],"sources":["../../../../src/VerticalNavigation/Actions/index.js"],"sourcesContent":["export { default } from \"./Actions\";\nexport { default as Action } from \"./Action\";\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,WAAxB;AACA,SAASA,OAAO,IAAIC,MAApB,QAAkC,UAAlC"}

package/dist/modern/VerticalNavigation/Actions/styles.js

@@ -0,0 +1,46 @@
+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); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import { outlineStyles } from "../../Focus/styles";
+
+const hover = theme => ({
+  background: theme.hv.palette.atmosphere.atmo4,
+  "& *": {
+    background: theme.hv.palette.atmosphere.atmo4
+  }
+});
+
+const styles = theme => ({
+  root: {
+    display: "block",
+    background: theme.hv.palette.atmosphere.atmo1,
+    "& :not(:last-child)": {
+      marginBottom: "8px"
+    }
+  },
+  action: {
+    width: "100%",
+    display: "flex",
+    justifyContent: "flex-start",
+    alignItems: "center",
+    height: "32px",
+    color: theme.hv.palette.atmosphere.acce1,
+    // hover
+    "&:hover": hover(theme),
+    "&:focus": _objectSpread(_objectSpread({}, outlineStyles), hover(theme)),
+    // cursor
+    cursor: "pointer",
+    "& *": {
+      cursor: "pointer"
+    }
+  },
+  noIcon: {
+    paddingLeft: `${theme.hv.spacing.xs}px`
+  }
+});
+
+export default styles;
+//# sourceMappingURL=styles.js.map

package/dist/modern/VerticalNavigation/Actions/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":["outlineStyles","hover","theme","background","hv","palette","atmosphere","atmo4","styles","root","display","atmo1","marginBottom","action","width","justifyContent","alignItems","height","color","acce1","cursor","noIcon","paddingLeft","spacing","xs"],"sources":["../../../../src/VerticalNavigation/Actions/styles.js"],"sourcesContent":["import { outlineStyles } from \"../../Focus/styles\";\n\nconst hover = (theme) => ({\n  background: theme.hv.palette.atmosphere.atmo4,\n  \"& *\": {\n    background: theme.hv.palette.atmosphere.atmo4,\n  },\n});\n\nconst styles = (theme) => ({\n  root: {\n    display: \"block\",\n    background: theme.hv.palette.atmosphere.atmo1,\n\n    \"& :not(:last-child)\": {\n      marginBottom: \"8px\",\n    },\n  },\n\n  action: {\n    width: \"100%\",\n    display: \"flex\",\n    justifyContent: \"flex-start\",\n    alignItems: \"center\",\n    height: \"32px\",\n    color: theme.hv.palette.atmosphere.acce1,\n\n    // hover\n    \"&:hover\": hover(theme),\n\n    \"&:focus\": {\n      ...outlineStyles,\n      ...hover(theme),\n    },\n\n    // cursor\n    cursor: \"pointer\",\n    \"& *\": {\n      cursor: \"pointer\",\n    },\n  },\n  noIcon: {\n    paddingLeft: `${theme.hv.spacing.xs}px`,\n  },\n});\n\nexport default styles;\n"],"mappings":";;;;;;AAAA,SAASA,aAAT,QAA8B,oBAA9B;;AAEA,MAAMC,KAAK,GAAIC,KAAD,KAAY;EACxBC,UAAU,EAAED,KAAK,CAACE,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BC,KADhB;EAExB,OAAO;IACLJ,UAAU,EAAED,KAAK,CAACE,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BC;EADnC;AAFiB,CAAZ,CAAd;;AAOA,MAAMC,MAAM,GAAIN,KAAD,KAAY;EACzBO,IAAI,EAAE;IACJC,OAAO,EAAE,OADL;IAEJP,UAAU,EAAED,KAAK,CAACE,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BK,KAFpC;IAIJ,uBAAuB;MACrBC,YAAY,EAAE;IADO;EAJnB,CADmB;EAUzBC,MAAM,EAAE;IACNC,KAAK,EAAE,MADD;IAENJ,OAAO,EAAE,MAFH;IAGNK,cAAc,EAAE,YAHV;IAINC,UAAU,EAAE,QAJN;IAKNC,MAAM,EAAE,MALF;IAMNC,KAAK,EAAEhB,KAAK,CAACE,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4Ba,KAN7B;IAQN;IACA,WAAWlB,KAAK,CAACC,KAAD,CATV;IAWN,2CACKF,aADL,GAEKC,KAAK,CAACC,KAAD,CAFV,CAXM;IAgBN;IACAkB,MAAM,EAAE,SAjBF;IAkBN,OAAO;MACLA,MAAM,EAAE;IADH;EAlBD,CAViB;EAgCzBC,MAAM,EAAE;IACNC,WAAW,EAAG,GAAEpB,KAAK,CAACE,EAAN,CAASmB,OAAT,CAAiBC,EAAG;EAD9B;AAhCiB,CAAZ,CAAf;;AAqCA,eAAehB,MAAf"}

package/dist/modern/VerticalNavigation/Navigation/Navigation.d.ts

@@ -0,0 +1,53 @@
+import React, { MouseEvent } from "react";
+import { StandardProps } from "@material-ui/core";
+
+export interface NavigationData {
+  /**
+   * the id to be applied to the root element.
+   */
+  id: string;
+  /**
+   * the label to be rendered on the menu item.
+   */
+  label: string;
+  /**
+   * Icon to be render.
+   */
+  icon?: React.ReactNode;
+  /**
+   * Data subset.
+   */
+  data?: NavigationData[];
+}
+
+export interface HvVerticalNavigationNavigationProps
+  extends StandardProps<React.HTMLAttributes<HTMLElement>, HvNavigationClassKey, "onClick"> {
+  /**
+   * Label.
+   */
+  label?: string;
+
+  /**
+   * An array containing the data for each menu item.
+   *
+   * id - the id to be applied to the root element.
+   * label - the label to be rendered on the menu item.
+   */
+  data?: NavigationData[];
+
+  /**
+   * Menu item id selected.
+   */
+  selected?: string;
+
+  /**
+   * Callback triggered when any item is clicked.
+   */
+  onClick?: (event: MouseEvent, selectedItem: NavigationData) => void;
+}
+
+export type HvNavigationClassKey = "root";
+
+export default function HvVerticalNavigationNavigation(
+  props: HvVerticalNavigationNavigationProps
+): JSX.Element | null;