@hitachivantara/uikit-react-core 3.52.5

package/dist/modern/Header/Brand/styles.js

@@ -0,0 +1,15 @@
+const styles = theme => ({
+  root: {
+    display: "flex",
+    alignItems: "center"
+  },
+  separator: {
+    width: 1,
+    height: theme.hv.spacing.sm,
+    margin: theme.hvSpacing(0, "xs"),
+    backgroundColor: theme.hv.palette.accent.acce1
+  }
+});
+
+export default styles;
+//# sourceMappingURL=styles.js.map

package/dist/modern/Header/Brand/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/Header/Brand/styles.js"],"names":["styles","theme","root","display","alignItems","separator","width","height","hv","spacing","sm","margin","hvSpacing","backgroundColor","palette","accent","acce1"],"mappings":"AAAA,MAAMA,MAAM,GAAIC,KAAD,KAAY;AACzBC,EAAAA,IAAI,EAAE;AACJC,IAAAA,OAAO,EAAE,MADL;AAEJC,IAAAA,UAAU,EAAE;AAFR,GADmB;AAKzBC,EAAAA,SAAS,EAAE;AACTC,IAAAA,KAAK,EAAE,CADE;AAETC,IAAAA,MAAM,EAAEN,KAAK,CAACO,EAAN,CAASC,OAAT,CAAiBC,EAFhB;AAGTC,IAAAA,MAAM,EAAEV,KAAK,CAACW,SAAN,CAAgB,CAAhB,EAAmB,IAAnB,CAHC;AAITC,IAAAA,eAAe,EAAEZ,KAAK,CAACO,EAAN,CAASM,OAAT,CAAiBC,MAAjB,CAAwBC;AAJhC;AALc,CAAZ,CAAf;;AAaA,eAAehB,MAAf","sourcesContent":["const styles = (theme) => ({\n  root: {\n    display: \"flex\",\n    alignItems: \"center\",\n  },\n  separator: {\n    width: 1,\n    height: theme.hv.spacing.sm,\n    margin: theme.hvSpacing(0, \"xs\"),\n    backgroundColor: theme.hv.palette.accent.acce1,\n  },\n});\n\nexport default styles;\n"],"file":"styles.js"}

package/dist/modern/Header/Header.d.ts

@@ -0,0 +1,7 @@
+import { StandardProps, AppBarProps } from "@material-ui/core";
+
+export type HvHeaderClassKey = "root" | "header" | "backgroundColor";
+
+export type HvHeaderProps = StandardProps<AppBarProps, HvHeaderClassKey>;
+
+export default function HvHeader(props: HvHeaderProps): JSX.Element | null;

package/dist/modern/Header/Header.js

@@ -0,0 +1,72 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["classes", "position", "children"];
+import React from "react";
+import PropTypes from "prop-types";
+import { AppBar, withStyles } from "@material-ui/core";
+import styles from "./styles";
+/**
+ * The header should be informative and provide the most important information about the digital product so that users can scan it in split seconds.
+ *
+ * Our implementation of the Header is divided in:
+ * <ul>
+ * <li>Brand</li>
+ * <li>Navigation</li>
+ * <li>Actions</li>
+ * </ul>
+ */
+
+const HvHeader = _ref => {
+  let {
+    classes,
+    position = "fixed",
+    children
+  } = _ref,
+      others = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(AppBar, _extends({
+    classes: {
+      root: classes.root,
+      colorPrimary: classes.backgroundColor
+    },
+    position: position
+  }, others), /*#__PURE__*/React.createElement("div", {
+    className: classes.header
+  }, children));
+};
+
+HvHeader.propTypes = {
+  /**
+   * 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 header class.
+     */
+    header: PropTypes.string,
+
+    /**
+     * Styles applied to the component background color.
+     */
+    backgroundColor: PropTypes.string
+  }).isRequired,
+
+  /**
+   * Position of the component.
+   */
+  position: PropTypes.oneOf(["static", "relative", "fixed", "absolute", "sticky"]),
+
+  /**
+   * Children to be rendered.
+   */
+  children: PropTypes.node.isRequired
+};
+export default withStyles(styles, {
+  name: "HvHeader"
+})(HvHeader);
+//# sourceMappingURL=Header.js.map

package/dist/modern/Header/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Header/Header.js"],"names":["React","PropTypes","AppBar","withStyles","styles","HvHeader","classes","position","children","others","root","colorPrimary","backgroundColor","header","propTypes","shape","string","isRequired","oneOf","node","name"],"mappings":";;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,SAASC,MAAT,EAAiBC,UAAjB,QAAmC,mBAAnC;AACA,OAAOC,MAAP,MAAmB,UAAnB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,MAAMC,QAAQ,GAAG,QAA0D;AAAA,MAAzD;AAAEC,IAAAA,OAAF;AAAWC,IAAAA,QAAQ,GAAG,OAAtB;AAA+BC,IAAAA;AAA/B,GAAyD;AAAA,MAAbC,MAAa;;AACzE,sBACE,oBAAC,MAAD;AACE,IAAA,OAAO,EAAE;AAAEC,MAAAA,IAAI,EAAEJ,OAAO,CAACI,IAAhB;AAAsBC,MAAAA,YAAY,EAAEL,OAAO,CAACM;AAA5C,KADX;AAEE,IAAA,QAAQ,EAAEL;AAFZ,KAGME,MAHN,gBAKE;AAAK,IAAA,SAAS,EAAEH,OAAO,CAACO;AAAxB,KAAiCL,QAAjC,CALF,CADF;AASD,CAVD;;AAYAH,QAAQ,CAACS,SAAT,GAAqB;AACnB;AACF;AACA;AACER,EAAAA,OAAO,EAAEL,SAAS,CAACc,KAAV,CAAgB;AACvB;AACJ;AACA;AACIL,IAAAA,IAAI,EAAET,SAAS,CAACe,MAJO;;AAKvB;AACJ;AACA;AACIH,IAAAA,MAAM,EAAEZ,SAAS,CAACe,MARK;;AASvB;AACJ;AACA;AACIJ,IAAAA,eAAe,EAAEX,SAAS,CAACe;AAZJ,GAAhB,EAaNC,UAjBgB;;AAkBnB;AACF;AACA;AACEV,EAAAA,QAAQ,EAAEN,SAAS,CAACiB,KAAV,CAAgB,CAAC,QAAD,EAAW,UAAX,EAAuB,OAAvB,EAAgC,UAAhC,EAA4C,QAA5C,CAAhB,CArBS;;AAsBnB;AACF;AACA;AACEV,EAAAA,QAAQ,EAAEP,SAAS,CAACkB,IAAV,CAAeF;AAzBN,CAArB;AA4BA,eAAed,UAAU,CAACC,MAAD,EAAS;AAAEgB,EAAAA,IAAI,EAAE;AAAR,CAAT,CAAV,CAAyCf,QAAzC,CAAf","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { AppBar, withStyles } from \"@material-ui/core\";\nimport styles from \"./styles\";\n\n/**\n * The header should be informative and provide the most important information about the digital product so that users can scan it in split seconds.\n *\n * Our implementation of the Header is divided in:\n * <ul>\n * <li>Brand</li>\n * <li>Navigation</li>\n * <li>Actions</li>\n * </ul>\n */\nconst HvHeader = ({ classes, position = \"fixed\", children, ...others }) => {\n  return (\n    <AppBar\n      classes={{ root: classes.root, colorPrimary: classes.backgroundColor }}\n      position={position}\n      {...others}\n    >\n      <div className={classes.header}>{children}</div>\n    </AppBar>\n  );\n};\n\nHvHeader.propTypes = {\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 header class.\n     */\n    header: PropTypes.string,\n    /**\n     * Styles applied to the component background color.\n     */\n    backgroundColor: PropTypes.string,\n  }).isRequired,\n  /**\n   * Position of the component.\n   */\n  position: PropTypes.oneOf([\"static\", \"relative\", \"fixed\", \"absolute\", \"sticky\"]),\n  /**\n   * Children to be rendered.\n   */\n  children: PropTypes.node.isRequired,\n};\n\nexport default withStyles(styles, { name: \"HvHeader\" })(HvHeader);\n"],"file":"Header.js"}

package/dist/modern/Header/Navigation/MenuBar/MenuBar.js

@@ -0,0 +1,98 @@
+import React, { useContext } from "react";
+import clsx from "clsx";
+import PropTypes from "prop-types";
+import { withStyles } from "@material-ui/core";
+import SelectionContext from "../utils/SelectionContext";
+import MenuItem from "../MenuItem";
+import styles from "./styles";
+
+const MenuBar = ({
+  classes,
+  id,
+  data = [],
+  onClick,
+  type
+}) => {
+  const selectionPath = useContext(SelectionContext);
+  const isMenu = type === "menu";
+  const isActive = isMenu && data.filter(item => item.id === selectionPath[1]).length > 0;
+  return /*#__PURE__*/React.createElement("div", {
+    className: clsx(classes.root, classes[`${type}`], isMenu && classes.hidden, isActive && classes.active)
+  }, /*#__PURE__*/React.createElement("ul", {
+    id: id,
+    className: classes.list,
+    onFocus: () => {}
+  }, data.map(item => /*#__PURE__*/React.createElement(MenuItem, {
+    key: item.id,
+    item: item,
+    type: type,
+    onClick: onClick
+  }))));
+};
+
+MenuBar.propTypes = {
+  /**
+   * A Jss Object used to override or extend the styles applied.
+   */
+  classes: PropTypes.shape({
+    /**
+     * Styles applied to the root.
+     */
+    root: PropTypes.string,
+
+    /**
+     * Styles applied to the menu bar.
+     */
+    menubar: PropTypes.string,
+
+    /**
+     * Styles applied to the menu.
+     */
+    menu: PropTypes.string,
+
+    /**
+     * Styles applied when in menu mode.
+     */
+    hidden: PropTypes.string,
+
+    /**
+     * Styles applied when active.
+     */
+    active: PropTypes.string,
+
+    /**
+     * Styles applied to the list.
+     */
+    list: PropTypes.string
+  }).isRequired,
+
+  /**
+   * Id to be applied to the root node.
+   */
+  id: PropTypes.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: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired
+  })),
+
+  /**
+   * Callback triggered when item is clicked.
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * The type of menu.
+   */
+  type: PropTypes.oneOf(["menubar", "menu"]).isRequired
+};
+export default withStyles(styles, {
+  name: "HvHeaderMenuBar"
+})(MenuBar);
+//# sourceMappingURL=MenuBar.js.map

package/dist/modern/Header/Navigation/MenuBar/MenuBar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/Header/Navigation/MenuBar/MenuBar.js"],"names":["React","useContext","clsx","PropTypes","withStyles","SelectionContext","MenuItem","styles","MenuBar","classes","id","data","onClick","type","selectionPath","isMenu","isActive","filter","item","length","root","hidden","active","list","map","propTypes","shape","string","menubar","menu","isRequired","arrayOf","label","func","oneOf","name"],"mappings":"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","sourcesContent":["import React, { useContext } from \"react\";\nimport clsx from \"clsx\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@material-ui/core\";\nimport SelectionContext from \"../utils/SelectionContext\";\nimport MenuItem from \"../MenuItem\";\nimport styles from \"./styles\";\n\nconst MenuBar = ({ classes, id, data = [], onClick, type }) => {\n  const selectionPath = useContext(SelectionContext);\n\n  const isMenu = type === \"menu\";\n  const isActive = isMenu && data.filter((item) => item.id === selectionPath[1]).length > 0;\n\n  return (\n    <div\n      className={clsx(classes.root, classes[`${type}`], {\n        [classes.hidden]: isMenu,\n        [classes.active]: isActive,\n      })}\n    >\n      <ul id={id} className={classes.list} onFocus={() => {}}>\n        {data.map((item) => (\n          <MenuItem key={item.id} item={item} type={type} onClick={onClick} />\n        ))}\n      </ul>\n    </div>\n  );\n};\n\nMenuBar.propTypes = {\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the root.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the menu bar.\n     */\n    menubar: PropTypes.string,\n    /**\n     * Styles applied to the menu.\n     */\n    menu: PropTypes.string,\n    /**\n     * Styles applied when in menu mode.\n     */\n    hidden: PropTypes.string,\n    /**\n     * Styles applied when active.\n     */\n    active: PropTypes.string,\n    /**\n     * Styles applied to the list.\n     */\n    list: PropTypes.string,\n  }).isRequired,\n  /**\n   * Id to be applied to the root node.\n   */\n  id: PropTypes.string,\n  /**\n   * An array containing the data for each menu item.\n   *\n   * id - the id to be applied to the root element.\n   * label - the label to be rendered on the menu item.\n   */\n  data: PropTypes.arrayOf(\n    PropTypes.shape({\n      id: PropTypes.string.isRequired,\n      label: PropTypes.string.isRequired,\n    })\n  ),\n  /**\n   * Callback triggered when item is clicked.\n   */\n  onClick: PropTypes.func,\n  /**\n   * The type of menu.\n   */\n  type: PropTypes.oneOf([\"menubar\", \"menu\"]).isRequired,\n};\n\nexport default withStyles(styles, { name: \"HvHeaderMenuBar\" })(MenuBar);\n"],"file":"MenuBar.js"}

package/dist/modern/Header/Navigation/MenuBar/index.js

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

package/dist/modern/Header/Navigation/MenuBar/index.js.map

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

package/dist/modern/Header/Navigation/MenuBar/styles.js

@@ -0,0 +1,69 @@
+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; }
+
+import "focus-within-polyfill";
+
+const styles = theme => {
+  const show = {
+    top: 2 * theme.hv.spacing.sm,
+    transition: ["top"],
+    boxShadow: theme.hv.shadows[1],
+    transitionDuration: 500
+  };
+  const hide = {
+    top: 0,
+    transition: ["top"],
+    boxShadow: "none",
+    transitionDuration: 300
+  };
+  return {
+    root: {
+      left: 0,
+      width: "100%",
+      display: "flex",
+      justifyContent: "center"
+    },
+    menubar: {
+      position: "relative",
+      height: 2 * theme.hv.spacing.sm,
+      backgroundColor: theme.hv.palette.atmosphere.atmo1
+    },
+    menu: {
+      position: "absolute",
+      height: 2 * theme.hv.spacing.sm,
+      zIndex: -2,
+      backgroundColor: theme.hv.palette.atmosphere.atmo2,
+      "& li > div": {
+        marginTop: 4
+      }
+    },
+    hidden: _objectSpread({}, hide),
+    active: _objectSpread({}, show),
+    list: {
+      margin: 0,
+      padding: 0,
+      display: "inherit",
+      "&:hover $active": _objectSpread({}, hide),
+      "& li:hover > $hidden": _objectSpread({}, show),
+      // IE fallback code (using focus-within-polyfill)
+      "&.focus-within $active": _objectSpread(_objectSpread({}, hide), {}, {
+        zIndex: -2
+      }),
+      "& li.focus-within > $hidden": _objectSpread(_objectSpread({}, show), {}, {
+        zIndex: -1
+      }),
+      "&:focus-within $active": _objectSpread(_objectSpread({}, hide), {}, {
+        zIndex: -2
+      }),
+      "& li:focus-within> $hidden": _objectSpread(_objectSpread({}, show), {}, {
+        zIndex: -1
+      })
+    }
+  };
+};
+
+export default styles;
+//# sourceMappingURL=styles.js.map

package/dist/modern/Header/Navigation/MenuBar/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/Header/Navigation/MenuBar/styles.js"],"names":["styles","theme","show","top","hv","spacing","sm","transition","boxShadow","shadows","transitionDuration","hide","root","left","width","display","justifyContent","menubar","position","height","backgroundColor","palette","atmosphere","atmo1","menu","zIndex","atmo2","marginTop","hidden","active","list","margin","padding"],"mappings":";;;;;;AAAA,OAAO,uBAAP;;AAEA,MAAMA,MAAM,GAAIC,KAAD,IAAW;AACxB,QAAMC,IAAI,GAAG;AACXC,IAAAA,GAAG,EAAE,IAAIF,KAAK,CAACG,EAAN,CAASC,OAAT,CAAiBC,EADf;AAEXC,IAAAA,UAAU,EAAE,CAAC,KAAD,CAFD;AAGXC,IAAAA,SAAS,EAAEP,KAAK,CAACG,EAAN,CAASK,OAAT,CAAiB,CAAjB,CAHA;AAIXC,IAAAA,kBAAkB,EAAE;AAJT,GAAb;AAOA,QAAMC,IAAI,GAAG;AACXR,IAAAA,GAAG,EAAE,CADM;AAEXI,IAAAA,UAAU,EAAE,CAAC,KAAD,CAFD;AAGXC,IAAAA,SAAS,EAAE,MAHA;AAIXE,IAAAA,kBAAkB,EAAE;AAJT,GAAb;AAOA,SAAO;AACLE,IAAAA,IAAI,EAAE;AACJC,MAAAA,IAAI,EAAE,CADF;AAEJC,MAAAA,KAAK,EAAE,MAFH;AAGJC,MAAAA,OAAO,EAAE,MAHL;AAIJC,MAAAA,cAAc,EAAE;AAJZ,KADD;AAOLC,IAAAA,OAAO,EAAE;AACPC,MAAAA,QAAQ,EAAE,UADH;AAEPC,MAAAA,MAAM,EAAE,IAAIlB,KAAK,CAACG,EAAN,CAASC,OAAT,CAAiBC,EAFtB;AAGPc,MAAAA,eAAe,EAAEnB,KAAK,CAACG,EAAN,CAASiB,OAAT,CAAiBC,UAAjB,CAA4BC;AAHtC,KAPJ;AAYLC,IAAAA,IAAI,EAAE;AACJN,MAAAA,QAAQ,EAAE,UADN;AAEJC,MAAAA,MAAM,EAAE,IAAIlB,KAAK,CAACG,EAAN,CAASC,OAAT,CAAiBC,EAFzB;AAGJmB,MAAAA,MAAM,EAAE,CAAC,CAHL;AAIJL,MAAAA,eAAe,EAAEnB,KAAK,CAACG,EAAN,CAASiB,OAAT,CAAiBC,UAAjB,CAA4BI,KAJzC;AAKJ,oBAAc;AACZC,QAAAA,SAAS,EAAE;AADC;AALV,KAZD;AAqBLC,IAAAA,MAAM,oBACDjB,IADC,CArBD;AAwBLkB,IAAAA,MAAM,oBACD3B,IADC,CAxBD;AA2BL4B,IAAAA,IAAI,EAAE;AACJC,MAAAA,MAAM,EAAE,CADJ;AAEJC,MAAAA,OAAO,EAAE,CAFL;AAGJjB,MAAAA,OAAO,EAAE,SAHL;AAIJ,2CACKJ,IADL,CAJI;AAOJ,gDACKT,IADL,CAPI;AAWJ;AACA,gEACKS,IADL;AAEEc,QAAAA,MAAM,EAAE,CAAC;AAFX,QAZI;AAgBJ,qEACKvB,IADL;AAEEuB,QAAAA,MAAM,EAAE,CAAC;AAFX,QAhBI;AAqBJ,gEACKd,IADL;AAEEc,QAAAA,MAAM,EAAE,CAAC;AAFX,QArBI;AAyBJ,oEACKvB,IADL;AAEEuB,QAAAA,MAAM,EAAE,CAAC;AAFX;AAzBI;AA3BD,GAAP;AA0DD,CAzED;;AA2EA,eAAezB,MAAf","sourcesContent":["import \"focus-within-polyfill\";\n\nconst styles = (theme) => {\n  const show = {\n    top: 2 * theme.hv.spacing.sm,\n    transition: [\"top\"],\n    boxShadow: theme.hv.shadows[1],\n    transitionDuration: 500,\n  };\n\n  const hide = {\n    top: 0,\n    transition: [\"top\"],\n    boxShadow: \"none\",\n    transitionDuration: 300,\n  };\n\n  return {\n    root: {\n      left: 0,\n      width: \"100%\",\n      display: \"flex\",\n      justifyContent: \"center\",\n    },\n    menubar: {\n      position: \"relative\",\n      height: 2 * theme.hv.spacing.sm,\n      backgroundColor: theme.hv.palette.atmosphere.atmo1,\n    },\n    menu: {\n      position: \"absolute\",\n      height: 2 * theme.hv.spacing.sm,\n      zIndex: -2,\n      backgroundColor: theme.hv.palette.atmosphere.atmo2,\n      \"& li > div\": {\n        marginTop: 4,\n      },\n    },\n    hidden: {\n      ...hide,\n    },\n    active: {\n      ...show,\n    },\n    list: {\n      margin: 0,\n      padding: 0,\n      display: \"inherit\",\n      \"&:hover $active\": {\n        ...hide,\n      },\n      \"& li:hover > $hidden\": {\n        ...show,\n      },\n\n      // IE fallback code (using focus-within-polyfill)\n      \"&.focus-within $active\": {\n        ...hide,\n        zIndex: -2,\n      },\n      \"& li.focus-within > $hidden\": {\n        ...show,\n        zIndex: -1,\n      },\n\n      \"&:focus-within $active\": {\n        ...hide,\n        zIndex: -2,\n      },\n      \"& li:focus-within> $hidden\": {\n        ...show,\n        zIndex: -1,\n      },\n    },\n  };\n};\n\nexport default styles;\n"],"file":"styles.js"}

package/dist/modern/Header/Navigation/MenuItem/MenuItem.js

@@ -0,0 +1,146 @@
+import React, { useContext } from "react";
+import clsx from "clsx";
+import PropTypes from "prop-types";
+import { withStyles } from "@material-ui/core";
+import { KeyboardCodes, isKeypress } from "../../../utils/KeyboardUtils";
+import HvTypography from "../../../Typography";
+import SelectionContext from "../utils/SelectionContext";
+import { FocusContext } from "../utils/FocusContext";
+import ConditionalWrapper from "../../../utils/ConditionalWrapper";
+import MenuBar from "../MenuBar";
+import styles from "./styles";
+import isBrowser from "../../../utils/browser";
+
+const MenuItem = ({
+  classes,
+  id,
+  item,
+  type,
+  onClick
+}) => {
+  const selectionPath = useContext(SelectionContext);
+  const {
+    dispatch
+  } = useContext(FocusContext);
+  const {
+    data
+  } = item;
+  const isMenu = type === "menu";
+  const isSelected = selectionPath[isMenu ? 1 : 0] === item.id;
+  const hasSubLevel = data && data.length;
+
+  const actionHandler = event => {
+    if (event.type === "click" || isKeypress(event, KeyboardCodes.Enter) || isKeypress(event, KeyboardCodes.SpaceBar)) {
+      if (event.type === "click") {
+        event.currentTarget.blur();
+      }
+
+      onClick === null || onClick === void 0 ? void 0 : onClick(event, item);
+    }
+  };
+
+  const handleFocus = event => {
+    dispatch({
+      type: "setItemFocused",
+      itemFocused: event.currentTarget
+    });
+  };
+
+  const focusWrapper = childrenToWrap => /*#__PURE__*/React.createElement("div", {
+    className: classes.externalReference
+  }, childrenToWrap);
+
+  const isIe = isBrowser(["ie", "edge"]);
+  return /*#__PURE__*/React.createElement("li", {
+    id: id,
+    key: item.label,
+    className: clsx(classes.root, classes[`${type}Item`], !isMenu && (isSelected ? classes.selectedItem : classes.notSelectedItem))
+  }, /*#__PURE__*/React.createElement(ConditionalWrapper, {
+    condition: isIe,
+    wrapper: focusWrapper
+  }, /*#__PURE__*/React.createElement("div", {
+    role: "button",
+    className: clsx(classes.button),
+    onClick: actionHandler,
+    onKeyDown: actionHandler,
+    tabIndex: 0,
+    onFocus: handleFocus
+  }, /*#__PURE__*/React.createElement(HvTypography, {
+    variant: isSelected ? "selectedNavText" : "normalText"
+  }, item.label))), hasSubLevel && /*#__PURE__*/React.createElement(MenuBar, {
+    data: data,
+    onClick: onClick,
+    type: "menu"
+  }));
+};
+
+MenuItem.propTypes = {
+  /**
+   * A Jss Object used to override or extend the styles applied.
+   */
+  classes: PropTypes.shape({
+    /**
+     * Style applied to the first element in the hierarchy.
+     */
+    root: PropTypes.string,
+
+    /**
+     * Style applied to the li element when it is selected.
+     */
+    selectedItem: PropTypes.string,
+
+    /**
+     * Style applied to the li element when it isn't selected.
+     */
+    notSelectedItem: PropTypes.string,
+
+    /**
+     * Style applied to each item button.
+     */
+    button: PropTypes.string,
+
+    /**
+     * Style applied to the reference element used for ie focus.
+     */
+    externalReference: PropTypes.string,
+
+    /**
+     * Style applied to simulated a focus in ie.
+     */
+    falseFocus: PropTypes.string
+  }).isRequired,
+
+  /**
+   * Id to be applied to the root node.
+   */
+  id: PropTypes.string,
+
+  /**
+   * An object 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.
+   */
+  item: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+    data: PropTypes.arrayOf(PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      label: PropTypes.string.isRequired
+    }))
+  }).isRequired,
+
+  /**
+   * Callback triggered when item is clicked.
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * The type of menu.
+   */
+  type: PropTypes.oneOf(["menubar", "menu"]).isRequired
+};
+export default withStyles(styles, {
+  name: "HvHeaderMenuItem"
+})(MenuItem);
+//# sourceMappingURL=MenuItem.js.map

package/dist/modern/Header/Navigation/MenuItem/MenuItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/Header/Navigation/MenuItem/MenuItem.js"],"names":["React","useContext","clsx","PropTypes","withStyles","KeyboardCodes","isKeypress","HvTypography","SelectionContext","FocusContext","ConditionalWrapper","MenuBar","styles","isBrowser","MenuItem","classes","id","item","type","onClick","selectionPath","dispatch","data","isMenu","isSelected","hasSubLevel","length","actionHandler","event","Enter","SpaceBar","currentTarget","blur","handleFocus","itemFocused","focusWrapper","childrenToWrap","externalReference","isIe","label","root","selectedItem","notSelectedItem","button","propTypes","shape","string","falseFocus","isRequired","arrayOf","func","oneOf","name"],"mappings":"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","sourcesContent":["import React, { useContext } from \"react\";\nimport clsx from \"clsx\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@material-ui/core\";\nimport { KeyboardCodes, isKeypress } from \"../../../utils/KeyboardUtils\";\nimport HvTypography from \"../../../Typography\";\nimport SelectionContext from \"../utils/SelectionContext\";\nimport { FocusContext } from \"../utils/FocusContext\";\nimport ConditionalWrapper from \"../../../utils/ConditionalWrapper\";\nimport MenuBar from \"../MenuBar\";\nimport styles from \"./styles\";\nimport isBrowser from \"../../../utils/browser\";\n\nconst MenuItem = ({ classes, id, item, type, onClick }) => {\n  const selectionPath = useContext(SelectionContext);\n  const { dispatch } = useContext(FocusContext);\n\n  const { data } = item;\n  const isMenu = type === \"menu\";\n  const isSelected = selectionPath[isMenu ? 1 : 0] === item.id;\n  const hasSubLevel = data && data.length;\n\n  const actionHandler = (event) => {\n    if (\n      event.type === \"click\" ||\n      isKeypress(event, KeyboardCodes.Enter) ||\n      isKeypress(event, KeyboardCodes.SpaceBar)\n    ) {\n      if (event.type === \"click\") {\n        event.currentTarget.blur();\n      }\n\n      onClick?.(event, item);\n    }\n  };\n\n  const handleFocus = (event) => {\n    dispatch({ type: \"setItemFocused\", itemFocused: event.currentTarget });\n  };\n\n  const focusWrapper = (childrenToWrap) => (\n    <div className={classes.externalReference}>{childrenToWrap}</div>\n  );\n  const isIe = isBrowser([\"ie\", \"edge\"]);\n  return (\n    <li\n      id={id}\n      key={item.label}\n      className={clsx(classes.root, classes[`${type}Item`], {\n        [classes.selectedItem]: !isMenu && isSelected,\n        [classes.notSelectedItem]: !isMenu && !isSelected,\n      })}\n    >\n      <ConditionalWrapper condition={isIe} wrapper={focusWrapper}>\n        <div\n          role=\"button\"\n          className={clsx(classes.button)}\n          onClick={actionHandler}\n          onKeyDown={actionHandler}\n          tabIndex={0}\n          onFocus={handleFocus}\n        >\n          <HvTypography variant={isSelected ? \"selectedNavText\" : \"normalText\"}>\n            {item.label}\n          </HvTypography>\n        </div>\n      </ConditionalWrapper>\n      {hasSubLevel && <MenuBar data={data} onClick={onClick} type=\"menu\" />}\n    </li>\n  );\n};\n\nMenuItem.propTypes = {\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Style applied to the first element in the hierarchy.\n     */\n    root: PropTypes.string,\n    /**\n     * Style applied to the li element when it is selected.\n     */\n    selectedItem: PropTypes.string,\n    /**\n     * Style applied to the li element when it isn't selected.\n     */\n    notSelectedItem: PropTypes.string,\n    /**\n     * Style applied to each item button.\n     */\n    button: PropTypes.string,\n    /**\n     * Style applied to the reference element used for ie focus.\n     */\n    externalReference: PropTypes.string,\n    /**\n     * Style applied to simulated a focus in ie.\n     */\n    falseFocus: PropTypes.string,\n  }).isRequired,\n  /**\n   * Id to be applied to the root node.\n   */\n  id: PropTypes.string,\n  /**\n   * An object containing the data for each menu item.\n   *\n   * id - the id to be applied to the root element.\n   * label - the label to be rendered on the menu item.\n   */\n  item: PropTypes.shape({\n    id: PropTypes.string.isRequired,\n    label: PropTypes.string.isRequired,\n    data: PropTypes.arrayOf(\n      PropTypes.shape({\n        id: PropTypes.string.isRequired,\n        label: PropTypes.string.isRequired,\n      })\n    ),\n  }).isRequired,\n  /**\n   * Callback triggered when item is clicked.\n   */\n  onClick: PropTypes.func,\n  /**\n   * The type of menu.\n   */\n  type: PropTypes.oneOf([\"menubar\", \"menu\"]).isRequired,\n};\n\nexport default withStyles(styles, { name: \"HvHeaderMenuItem\" })(MenuItem);\n"],"file":"MenuItem.js"}

package/dist/modern/Header/Navigation/MenuItem/index.js

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

package/dist/modern/Header/Navigation/MenuItem/index.js.map

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

package/dist/modern/Header/Navigation/MenuItem/styles.js

@@ -0,0 +1,64 @@
+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; }
+
+import "focus-within-polyfill";
+import focusStyles, { outlineStyles } from "../../../Focus/styles";
+const {
+  externalReference,
+  falseFocus
+} = focusStyles;
+
+const styles = theme => {
+  const hoverColor = theme.hv.palette.atmosphere.atmo3;
+  return {
+    root: {
+      display: "inline",
+      "&:hover": {
+        "& > [role='button']": {
+          backgroundColor: hoverColor
+        },
+        "&:focus-within": {
+          "& > [role='button']": {
+            backgroundColor: hoverColor
+          }
+        }
+      },
+      // IE fallback code (using focus-within-polyfill)
+      "&.focus-within": {
+        "& > [role='button']": {
+          backgroundColor: hoverColor
+        }
+      }
+    },
+    selectedItem: {
+      borderTop: `2px solid ${theme.hv.palette.accent.acce3}`,
+      paddingTop: "2px"
+    },
+    notSelectedItem: {
+      marginTop: "4px"
+    },
+    button: {
+      border: "none",
+      cursor: "pointer",
+      padding: theme.hvSpacing("8px", "sm"),
+      "&:active": {
+        outline: "none"
+      },
+      "&:focus": {
+        outline: "none",
+        backgroundColor: hoverColor
+      },
+      "&.focus-visible": _objectSpread({}, outlineStyles)
+    },
+    externalReference: _objectSpread({}, externalReference),
+    falseFocus: _objectSpread(_objectSpread({}, falseFocus), {}, {
+      top: "4px"
+    })
+  };
+};
+
+export default styles;
+//# sourceMappingURL=styles.js.map

package/dist/modern/Header/Navigation/MenuItem/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/Header/Navigation/MenuItem/styles.js"],"names":["focusStyles","outlineStyles","externalReference","falseFocus","styles","theme","hoverColor","hv","palette","atmosphere","atmo3","root","display","backgroundColor","selectedItem","borderTop","accent","acce3","paddingTop","notSelectedItem","marginTop","button","border","cursor","padding","hvSpacing","outline","top"],"mappings":";;;;;;AAAA,OAAO,uBAAP;AACA,OAAOA,WAAP,IAAsBC,aAAtB,QAA2C,uBAA3C;AAEA,MAAM;AAAEC,EAAAA,iBAAF;AAAqBC,EAAAA;AAArB,IAAoCH,WAA1C;;AAEA,MAAMI,MAAM,GAAIC,KAAD,IAAW;AACxB,QAAMC,UAAU,GAAGD,KAAK,CAACE,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BC,KAA/C;AAEA,SAAO;AACLC,IAAAA,IAAI,EAAE;AACJC,MAAAA,OAAO,EAAE,QADL;AAEJ,iBAAW;AACT,+BAAuB;AACrBC,UAAAA,eAAe,EAAEP;AADI,SADd;AAIT,0BAAkB;AAChB,iCAAuB;AACrBO,YAAAA,eAAe,EAAEP;AADI;AADP;AAJT,OAFP;AAYJ;AACA,wBAAkB;AAChB,+BAAuB;AACrBO,UAAAA,eAAe,EAAEP;AADI;AADP;AAbd,KADD;AAoBLQ,IAAAA,YAAY,EAAE;AACZC,MAAAA,SAAS,EAAG,aAAYV,KAAK,CAACE,EAAN,CAASC,OAAT,CAAiBQ,MAAjB,CAAwBC,KAAM,EAD1C;AAEZC,MAAAA,UAAU,EAAE;AAFA,KApBT;AAwBLC,IAAAA,eAAe,EAAE;AACfC,MAAAA,SAAS,EAAE;AADI,KAxBZ;AA2BLC,IAAAA,MAAM,EAAE;AACNC,MAAAA,MAAM,EAAE,MADF;AAENC,MAAAA,MAAM,EAAE,SAFF;AAGNC,MAAAA,OAAO,EAAEnB,KAAK,CAACoB,SAAN,CAAgB,KAAhB,EAAuB,IAAvB,CAHH;AAIN,kBAAY;AACVC,QAAAA,OAAO,EAAE;AADC,OAJN;AAON,iBAAW;AACTA,QAAAA,OAAO,EAAE,MADA;AAETb,QAAAA,eAAe,EAAEP;AAFR,OAPL;AAWN,2CACKL,aADL;AAXM,KA3BH;AA0CLC,IAAAA,iBAAiB,oBACZA,iBADY,CA1CZ;AA6CLC,IAAAA,UAAU,kCACLA,UADK;AAERwB,MAAAA,GAAG,EAAE;AAFG;AA7CL,GAAP;AAkDD,CArDD;;AAuDA,eAAevB,MAAf","sourcesContent":["import \"focus-within-polyfill\";\nimport focusStyles, { outlineStyles } from \"../../../Focus/styles\";\n\nconst { externalReference, falseFocus } = focusStyles;\n\nconst styles = (theme) => {\n  const hoverColor = theme.hv.palette.atmosphere.atmo3;\n\n  return {\n    root: {\n      display: \"inline\",\n      \"&:hover\": {\n        \"& > [role='button']\": {\n          backgroundColor: hoverColor,\n        },\n        \"&:focus-within\": {\n          \"& > [role='button']\": {\n            backgroundColor: hoverColor,\n          },\n        },\n      },\n      // IE fallback code (using focus-within-polyfill)\n      \"&.focus-within\": {\n        \"& > [role='button']\": {\n          backgroundColor: hoverColor,\n        },\n      },\n    },\n    selectedItem: {\n      borderTop: `2px solid ${theme.hv.palette.accent.acce3}`,\n      paddingTop: \"2px\",\n    },\n    notSelectedItem: {\n      marginTop: \"4px\",\n    },\n    button: {\n      border: \"none\",\n      cursor: \"pointer\",\n      padding: theme.hvSpacing(\"8px\", \"sm\"),\n      \"&:active\": {\n        outline: \"none\",\n      },\n      \"&:focus\": {\n        outline: \"none\",\n        backgroundColor: hoverColor,\n      },\n      \"&.focus-visible\": {\n        ...outlineStyles,\n      },\n    },\n    externalReference: {\n      ...externalReference,\n    },\n    falseFocus: {\n      ...falseFocus,\n      top: \"4px\",\n    },\n  };\n};\n\nexport default styles;\n"],"file":"styles.js"}

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

@@ -0,0 +1,35 @@
+import React, { MouseEvent } from "react";
+import { StandardProps } from "@material-ui/core";
+
+export interface NavigationItemProp {
+  id: string;
+  label: string;
+  path?: string;
+}
+
+export type HvHeaderNavigationClassKey = "root";
+
+export interface HvHeaderNavigationProps
+  extends StandardProps<
+    React.HTMLAttributes<HTMLDivElement>,
+    HvHeaderNavigationClassKey,
+    "onClick"
+  > {
+  /**
+   * 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: NavigationItemProp[];
+  /**
+   * Menu item id selected.
+   */
+  selected?: string;
+  /**
+   * Callback triggered when any item is clicked.
+   */
+  onClick?: (event: MouseEvent, selection: NavigationItemProp) => void;
+}
+
+export default function HvHeaderNavigation(props: HvHeaderNavigationProps): JSX.Element | null;