@hitachivantara/uikit-react-core 3.52.5

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

@@ -0,0 +1,81 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["classes", "className", "data", "selected", "onClick"];
+import React from "react";
+import PropTypes from "prop-types";
+import clsx from "clsx";
+import { withStyles } from "@material-ui/core";
+import { FocusProvider } from "./utils/FocusContext";
+import SelectionContext from "./utils/SelectionContext";
+import useSelectionPath from "./utils/useSelectionPath";
+import MenuBar from "./MenuBar";
+import styles from "./styles";
+
+const Navigation = _ref => {
+  let {
+    classes,
+    className,
+    data,
+    selected,
+    onClick
+  } = _ref,
+      others = _objectWithoutProperties(_ref, _excluded);
+
+  const selectionPath = useSelectionPath(data, selected);
+
+  const handleClick = (event, selection) => {
+    onClick === null || onClick === void 0 ? void 0 : onClick(event, selection);
+  };
+
+  return /*#__PURE__*/React.createElement(SelectionContext.Provider, {
+    value: selectionPath
+  }, /*#__PURE__*/React.createElement(FocusProvider, null, /*#__PURE__*/React.createElement("nav", _extends({
+    className: clsx(className, classes.root)
+  }, others), /*#__PURE__*/React.createElement(MenuBar, {
+    data: data,
+    onClick: handleClick,
+    type: "menubar"
+  }))));
+};
+
+Navigation.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
+  }).isRequired,
+
+  /**
+   * Class names to be applied.
+   */
+  className: 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
+  })).isRequired,
+
+  /**
+   * Menu item id selected.
+   */
+  selected: PropTypes.string,
+
+  /**
+   * Callback triggered when any item is clicked.
+   */
+  onClick: PropTypes.func
+};
+export default withStyles(styles, {
+  name: "HvHeaderNavigation"
+})(Navigation);
+//# sourceMappingURL=Navigation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/Header/Navigation/Navigation.js"],"names":["React","PropTypes","clsx","withStyles","FocusProvider","SelectionContext","useSelectionPath","MenuBar","styles","Navigation","classes","className","data","selected","onClick","others","selectionPath","handleClick","event","selection","root","propTypes","shape","string","isRequired","arrayOf","id","label","func","name"],"mappings":";;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,IAAP,MAAiB,MAAjB;AACA,SAASC,UAAT,QAA2B,mBAA3B;AACA,SAASC,aAAT,QAA8B,sBAA9B;AACA,OAAOC,gBAAP,MAA6B,0BAA7B;AACA,OAAOC,gBAAP,MAA6B,0BAA7B;AACA,OAAOC,OAAP,MAAoB,WAApB;AACA,OAAOC,MAAP,MAAmB,UAAnB;;AAEA,MAAMC,UAAU,GAAG,QAAgE;AAAA,MAA/D;AAAEC,IAAAA,OAAF;AAAWC,IAAAA,SAAX;AAAsBC,IAAAA,IAAtB;AAA4BC,IAAAA,QAA5B;AAAsCC,IAAAA;AAAtC,GAA+D;AAAA,MAAbC,MAAa;;AACjF,QAAMC,aAAa,GAAGV,gBAAgB,CAACM,IAAD,EAAOC,QAAP,CAAtC;;AAEA,QAAMI,WAAW,GAAG,CAACC,KAAD,EAAQC,SAAR,KAAsB;AACxCL,IAAAA,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO,CAAGI,KAAH,EAAUC,SAAV,CAAP;AACD,GAFD;;AAIA,sBACE,oBAAC,gBAAD,CAAkB,QAAlB;AAA2B,IAAA,KAAK,EAAEH;AAAlC,kBACE,oBAAC,aAAD,qBACE;AAAK,IAAA,SAAS,EAAEd,IAAI,CAACS,SAAD,EAAYD,OAAO,CAACU,IAApB;AAApB,KAAmDL,MAAnD,gBACE,oBAAC,OAAD;AAAS,IAAA,IAAI,EAAEH,IAAf;AAAqB,IAAA,OAAO,EAAEK,WAA9B;AAA2C,IAAA,IAAI,EAAC;AAAhD,IADF,CADF,CADF,CADF;AASD,CAhBD;;AAkBAR,UAAU,CAACY,SAAX,GAAuB;AACrB;AACF;AACA;AACEX,EAAAA,OAAO,EAAET,SAAS,CAACqB,KAAV,CAAgB;AACvB;AACJ;AACA;AACIF,IAAAA,IAAI,EAAEnB,SAAS,CAACsB;AAJO,GAAhB,EAKNC,UATkB;;AAUrB;AACF;AACA;AACEb,EAAAA,SAAS,EAAEV,SAAS,CAACsB,MAbA;;AAcrB;AACF;AACA;AACA;AACA;AACA;AACEX,EAAAA,IAAI,EAAEX,SAAS,CAACwB,OAAV,CACJxB,SAAS,CAACqB,KAAV,CAAgB;AACdI,IAAAA,EAAE,EAAEzB,SAAS,CAACsB,MAAV,CAAiBC,UADP;AAEdG,IAAAA,KAAK,EAAE1B,SAAS,CAACsB,MAAV,CAAiBC;AAFV,GAAhB,CADI,EAKJA,UAzBmB;;AA0BrB;AACF;AACA;AACEX,EAAAA,QAAQ,EAAEZ,SAAS,CAACsB,MA7BC;;AA8BrB;AACF;AACA;AACET,EAAAA,OAAO,EAAEb,SAAS,CAAC2B;AAjCE,CAAvB;AAoCA,eAAezB,UAAU,CAACK,MAAD,EAAS;AAAEqB,EAAAA,IAAI,EAAE;AAAR,CAAT,CAAV,CAAmDpB,UAAnD,CAAf","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport { withStyles } from \"@material-ui/core\";\nimport { FocusProvider } from \"./utils/FocusContext\";\nimport SelectionContext from \"./utils/SelectionContext\";\nimport useSelectionPath from \"./utils/useSelectionPath\";\nimport MenuBar from \"./MenuBar\";\nimport styles from \"./styles\";\n\nconst Navigation = ({ classes, className, data, selected, onClick, ...others }) => {\n  const selectionPath = useSelectionPath(data, selected);\n\n  const handleClick = (event, selection) => {\n    onClick?.(event, selection);\n  };\n\n  return (\n    <SelectionContext.Provider value={selectionPath}>\n      <FocusProvider>\n        <nav className={clsx(className, classes.root)} {...others}>\n          <MenuBar data={data} onClick={handleClick} type=\"menubar\" />\n        </nav>\n      </FocusProvider>\n    </SelectionContext.Provider>\n  );\n};\n\nNavigation.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  }).isRequired,\n  /**\n   * Class names to be applied.\n   */\n  className: 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  ).isRequired,\n  /**\n   * Menu item id selected.\n   */\n  selected: PropTypes.string,\n  /**\n   * Callback triggered when any item is clicked.\n   */\n  onClick: PropTypes.func,\n};\n\nexport default withStyles(styles, { name: \"HvHeaderNavigation\" })(Navigation);\n"],"file":"Navigation.js"}

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

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

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

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

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

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

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

@@ -0,0 +1,11 @@
+const styles = {
+  root: {
+    position: "absolute",
+    width: "100%",
+    zIndex: 1,
+    top: "0px",
+    left: "0px"
+  }
+};
+export default styles;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/Header/Navigation/styles.js"],"names":["styles","root","position","width","zIndex","top","left"],"mappings":"AAAA,MAAMA,MAAM,GAAG;AACbC,EAAAA,IAAI,EAAE;AACJC,IAAAA,QAAQ,EAAE,UADN;AAEJC,IAAAA,KAAK,EAAE,MAFH;AAGJC,IAAAA,MAAM,EAAE,CAHJ;AAIJC,IAAAA,GAAG,EAAE,KAJD;AAKJC,IAAAA,IAAI,EAAE;AALF;AADO,CAAf;AAUA,eAAeN,MAAf","sourcesContent":["const styles = {\n  root: {\n    position: \"absolute\",\n    width: \"100%\",\n    zIndex: 1,\n    top: \"0px\",\n    left: \"0px\",\n  },\n};\n\nexport default styles;\n"],"file":"styles.js"}

package/dist/modern/Header/Navigation/utils/FocusContext.js

@@ -0,0 +1,45 @@
+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 "core-js/modules/web.dom-collections.iterator.js";
+import React, { createContext, useMemo, useReducer } from "react";
+import PropTypes from "prop-types";
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case "setItemFocused":
+      return {
+        itemFocused: action.itemFocused
+      };
+
+    default:
+      return state;
+  }
+};
+
+const initialState = {
+  itemFocused: null
+};
+const FocusContext = /*#__PURE__*/createContext(initialState);
+
+const FocusProvider = props => {
+  const [state, dispatch] = useReducer(reducer, initialState);
+  const contextValue = useMemo(() => _objectSpread(_objectSpread({}, state), {}, {
+    dispatch
+  }), [state, dispatch]);
+  const {
+    children
+  } = props;
+  return /*#__PURE__*/React.createElement(FocusContext.Provider, {
+    value: contextValue
+  }, children);
+};
+
+FocusProvider.propTypes = {
+  children: PropTypes.node.isRequired
+};
+export { FocusContext, FocusProvider };
+//# sourceMappingURL=FocusContext.js.map

package/dist/modern/Header/Navigation/utils/FocusContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/Header/Navigation/utils/FocusContext.js"],"names":["React","createContext","useMemo","useReducer","PropTypes","reducer","state","action","type","itemFocused","initialState","FocusContext","FocusProvider","props","dispatch","contextValue","children","propTypes","node","isRequired"],"mappings":";;;;;;;AAAA,OAAOA,KAAP,IAAgBC,aAAhB,EAA+BC,OAA/B,EAAwCC,UAAxC,QAA0D,OAA1D;AACA,OAAOC,SAAP,MAAsB,YAAtB;;AAEA,MAAMC,OAAO,GAAG,CAACC,KAAD,EAAQC,MAAR,KAAmB;AACjC,UAAQA,MAAM,CAACC,IAAf;AACE,SAAK,gBAAL;AACE,aAAO;AAAEC,QAAAA,WAAW,EAAEF,MAAM,CAACE;AAAtB,OAAP;;AACF;AACE,aAAOH,KAAP;AAJJ;AAMD,CAPD;;AASA,MAAMI,YAAY,GAAG;AAAED,EAAAA,WAAW,EAAE;AAAf,CAArB;AACA,MAAME,YAAY,gBAAGV,aAAa,CAACS,YAAD,CAAlC;;AAEA,MAAME,aAAa,GAAIC,KAAD,IAAW;AAC/B,QAAM,CAACP,KAAD,EAAQQ,QAAR,IAAoBX,UAAU,CAACE,OAAD,EAAUK,YAAV,CAApC;AACA,QAAMK,YAAY,GAAGb,OAAO,CAAC,sCAAYI,KAAZ;AAAmBQ,IAAAA;AAAnB,IAAD,EAAiC,CAACR,KAAD,EAAQQ,QAAR,CAAjC,CAA5B;AACA,QAAM;AAAEE,IAAAA;AAAF,MAAeH,KAArB;AAEA,sBAAO,oBAAC,YAAD,CAAc,QAAd;AAAuB,IAAA,KAAK,EAAEE;AAA9B,KAA6CC,QAA7C,CAAP;AACD,CAND;;AAQAJ,aAAa,CAACK,SAAd,GAA0B;AACxBD,EAAAA,QAAQ,EAAEZ,SAAS,CAACc,IAAV,CAAeC;AADD,CAA1B;AAIA,SAASR,YAAT,EAAuBC,aAAvB","sourcesContent":["import React, { createContext, useMemo, useReducer } from \"react\";\nimport PropTypes from \"prop-types\";\n\nconst reducer = (state, action) => {\n  switch (action.type) {\n    case \"setItemFocused\":\n      return { itemFocused: action.itemFocused };\n    default:\n      return state;\n  }\n};\n\nconst initialState = { itemFocused: null };\nconst FocusContext = createContext(initialState);\n\nconst FocusProvider = (props) => {\n  const [state, dispatch] = useReducer(reducer, initialState);\n  const contextValue = useMemo(() => ({ ...state, dispatch }), [state, dispatch]);\n  const { children } = props;\n\n  return <FocusContext.Provider value={contextValue}>{children}</FocusContext.Provider>;\n};\n\nFocusProvider.propTypes = {\n  children: PropTypes.node.isRequired,\n};\n\nexport { FocusContext, FocusProvider };\n"],"file":"FocusContext.js"}

package/dist/modern/Header/Navigation/utils/SelectionContext.js

@@ -0,0 +1,4 @@
+import { createContext } from "react";
+const SelectionContext = /*#__PURE__*/createContext(null);
+export default SelectionContext;
+//# sourceMappingURL=SelectionContext.js.map

package/dist/modern/Header/Navigation/utils/SelectionContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/Header/Navigation/utils/SelectionContext.js"],"names":["createContext","SelectionContext"],"mappings":"AAAA,SAASA,aAAT,QAA8B,OAA9B;AAEA,MAAMC,gBAAgB,gBAAGD,aAAa,CAAC,IAAD,CAAtC;AAEA,eAAeC,gBAAf","sourcesContent":["import { createContext } from \"react\";\n\nconst SelectionContext = createContext(null);\n\nexport default SelectionContext;\n"],"file":"SelectionContext.js"}

package/dist/modern/Header/Navigation/utils/useSelectionPath.js

@@ -0,0 +1,24 @@
+import "core-js/modules/web.dom-collections.iterator.js";
+import { useState, useEffect } from "react";
+
+const getSelectionPath = (data, selectedId, selection = [], idx = -1, parent = []) => {
+  data.forEach((item, i) => {
+    const hasData = item.data && item.data.length;
+    const isSelected = item.id === selectedId;
+    if (isSelected) selection.push(...(idx > -1 ? [parent[idx].id] : []), item.id);
+    if (hasData) getSelectionPath(item.data, selectedId, selection, i, data);
+  });
+  return selection;
+};
+
+const useSelectionPath = (data, selectedId) => {
+  const [selectionPath, setSelectionPath] = useState("");
+  useEffect(() => {
+    const path = getSelectionPath(data, selectedId);
+    setSelectionPath(path);
+  }, [data, selectedId]);
+  return selectionPath;
+};
+
+export default useSelectionPath;
+//# sourceMappingURL=useSelectionPath.js.map

package/dist/modern/Header/Navigation/utils/useSelectionPath.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/Header/Navigation/utils/useSelectionPath.js"],"names":["useState","useEffect","getSelectionPath","data","selectedId","selection","idx","parent","forEach","item","i","hasData","length","isSelected","id","push","useSelectionPath","selectionPath","setSelectionPath","path"],"mappings":";AAAA,SAASA,QAAT,EAAmBC,SAAnB,QAAoC,OAApC;;AAEA,MAAMC,gBAAgB,GAAG,CAACC,IAAD,EAAOC,UAAP,EAAmBC,SAAS,GAAG,EAA/B,EAAmCC,GAAG,GAAG,CAAC,CAA1C,EAA6CC,MAAM,GAAG,EAAtD,KAA6D;AACpFJ,EAAAA,IAAI,CAACK,OAAL,CAAa,CAACC,IAAD,EAAOC,CAAP,KAAa;AACxB,UAAMC,OAAO,GAAGF,IAAI,CAACN,IAAL,IAAaM,IAAI,CAACN,IAAL,CAAUS,MAAvC;AACA,UAAMC,UAAU,GAAGJ,IAAI,CAACK,EAAL,KAAYV,UAA/B;AAEA,QAAIS,UAAJ,EAAgBR,SAAS,CAACU,IAAV,CAAe,IAAIT,GAAG,GAAG,CAAC,CAAP,GAAW,CAACC,MAAM,CAACD,GAAD,CAAN,CAAYQ,EAAb,CAAX,GAA8B,EAAlC,CAAf,EAAsDL,IAAI,CAACK,EAA3D;AAChB,QAAIH,OAAJ,EAAaT,gBAAgB,CAACO,IAAI,CAACN,IAAN,EAAYC,UAAZ,EAAwBC,SAAxB,EAAmCK,CAAnC,EAAsCP,IAAtC,CAAhB;AACd,GAND;AAQA,SAAOE,SAAP;AACD,CAVD;;AAYA,MAAMW,gBAAgB,GAAG,CAACb,IAAD,EAAOC,UAAP,KAAsB;AAC7C,QAAM,CAACa,aAAD,EAAgBC,gBAAhB,IAAoClB,QAAQ,CAAC,EAAD,CAAlD;AAEAC,EAAAA,SAAS,CAAC,MAAM;AACd,UAAMkB,IAAI,GAAGjB,gBAAgB,CAACC,IAAD,EAAOC,UAAP,CAA7B;AACAc,IAAAA,gBAAgB,CAACC,IAAD,CAAhB;AACD,GAHQ,EAGN,CAAChB,IAAD,EAAOC,UAAP,CAHM,CAAT;AAKA,SAAOa,aAAP;AACD,CATD;;AAWA,eAAeD,gBAAf","sourcesContent":["import { useState, useEffect } from \"react\";\n\nconst getSelectionPath = (data, selectedId, selection = [], idx = -1, parent = []) => {\n  data.forEach((item, i) => {\n    const hasData = item.data && item.data.length;\n    const isSelected = item.id === selectedId;\n\n    if (isSelected) selection.push(...(idx > -1 ? [parent[idx].id] : []), item.id);\n    if (hasData) getSelectionPath(item.data, selectedId, selection, i, data);\n  });\n\n  return selection;\n};\n\nconst useSelectionPath = (data, selectedId) => {\n  const [selectionPath, setSelectionPath] = useState(\"\");\n\n  useEffect(() => {\n    const path = getSelectionPath(data, selectedId);\n    setSelectionPath(path);\n  }, [data, selectedId]);\n\n  return selectionPath;\n};\n\nexport default useSelectionPath;\n"],"file":"useSelectionPath.js"}

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

@@ -0,0 +1,11 @@
+export { default } from "./Header";
+export * from "./Header";
+
+export { default as HvHeaderActions } from "./Actions";
+export * from "./Actions";
+
+export { default as HvHeaderBrand } from "./Brand";
+export * from "./Brand";
+
+export { default as HvHeaderNavigation } from "./Navigation";
+export * from "./Navigation";

package/dist/modern/Header/index.js

@@ -0,0 +1,5 @@
+export { default } from "./Header";
+export { default as HvHeaderBrand } from "./Brand";
+export { default as HvHeaderActions } from "./Actions";
+export { default as HvHeaderNavigation } from "./Navigation";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Header/index.js"],"names":["default","HvHeaderBrand","HvHeaderActions","HvHeaderNavigation"],"mappings":"AAAA,SAASA,OAAT,QAAwB,UAAxB;AACA,SAASA,OAAO,IAAIC,aAApB,QAAyC,SAAzC;AACA,SAASD,OAAO,IAAIE,eAApB,QAA2C,WAA3C;AACA,SAASF,OAAO,IAAIG,kBAApB,QAA8C,cAA9C","sourcesContent":["export { default } from \"./Header\";\nexport { default as HvHeaderBrand } from \"./Brand\";\nexport { default as HvHeaderActions } from \"./Actions\";\nexport { default as HvHeaderNavigation } from \"./Navigation\";\n"],"file":"index.js"}

package/dist/modern/Header/styles.js

@@ -0,0 +1,22 @@
+const styles = theme => ({
+  root: {
+    height: 44
+  },
+  backgroundColor: {
+    backgroundColor: theme.hv.palette.atmosphere.atmo1
+  },
+  header: {
+    display: "flex",
+    alignItems: "center",
+    width: "100%",
+    height: "100%",
+    padding: theme.hvSpacing(0, "sm"),
+    boxShadow: theme.hv.shadows[1],
+    "& > *:not(nav)": {
+      zIndex: 2
+    }
+  }
+});
+
+export default styles;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Header/styles.js"],"names":["styles","theme","root","height","backgroundColor","hv","palette","atmosphere","atmo1","header","display","alignItems","width","padding","hvSpacing","boxShadow","shadows","zIndex"],"mappings":"AAAA,MAAMA,MAAM,GAAIC,KAAD,KAAY;AACzBC,EAAAA,IAAI,EAAE;AACJC,IAAAA,MAAM,EAAE;AADJ,GADmB;AAIzBC,EAAAA,eAAe,EAAE;AACfA,IAAAA,eAAe,EAAEH,KAAK,CAACI,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BC;AAD9B,GAJQ;AAOzBC,EAAAA,MAAM,EAAE;AACNC,IAAAA,OAAO,EAAE,MADH;AAENC,IAAAA,UAAU,EAAE,QAFN;AAGNC,IAAAA,KAAK,EAAE,MAHD;AAINT,IAAAA,MAAM,EAAE,MAJF;AAKNU,IAAAA,OAAO,EAAEZ,KAAK,CAACa,SAAN,CAAgB,CAAhB,EAAmB,IAAnB,CALH;AAMNC,IAAAA,SAAS,EAAEd,KAAK,CAACI,EAAN,CAASW,OAAT,CAAiB,CAAjB,CANL;AAON,sBAAkB;AAChBC,MAAAA,MAAM,EAAE;AADQ;AAPZ;AAPiB,CAAZ,CAAf;;AAoBA,eAAejB,MAAf","sourcesContent":["const styles = (theme) => ({\n  root: {\n    height: 44,\n  },\n  backgroundColor: {\n    backgroundColor: theme.hv.palette.atmosphere.atmo1,\n  },\n  header: {\n    display: \"flex\",\n    alignItems: \"center\",\n    width: \"100%\",\n    height: \"100%\",\n    padding: theme.hvSpacing(0, \"sm\"),\n    boxShadow: theme.hv.shadows[1],\n    \"& > *:not(nav)\": {\n      zIndex: 2,\n    },\n  },\n});\n\nexport default styles;\n"],"file":"styles.js"}

package/dist/modern/Input/Input.d.ts

@@ -0,0 +1,182 @@
+import { StandardProps } from "@material-ui/core";
+
+import { HvBaseInputProps, HvBaseInputValidationMessagesProps } from "../BaseInput";
+
+import { HvFormStatus } from "../Forms/FormElement";
+
+export interface InputSuggestion {
+  id: string;
+  label: string;
+  value: string;
+}
+
+export interface InputLabelsProp {
+  /**
+   * The label of the clear button.
+   */
+  clearButtonLabel?: string;
+
+  /**
+   * The label of the reveal password button.
+   */
+  revealPasswordButtonLabel?: string;
+  /**
+   * The tooltip of the reveal password button when the password is hidden.
+   */
+  revealPasswordButtonClickToShowTooltip?: string;
+  /**
+   * The tooltip of the reveal password button when the password is revealed.
+   */
+  revealPasswordButtonClickToHideTooltip?: string;
+
+  /**
+   * The label of the search button.
+   */
+  searchButtonLabel?: string;
+}
+
+export type HvInputClassKey =
+  | "root"
+  | "hasSuggestions"
+  | "inputRoot"
+  | "inputBorderContainer"
+  | "inputRootFocused"
+  | "inputRootDisabled"
+  | "inputRootMultiline"
+  | "input"
+  | "labelContainer"
+  | "label"
+  | "description"
+  | "error"
+  | "adornmentsBox"
+  | "adornmentButton"
+  | "icon"
+  | "iconClear"
+  | "inputExtension"
+  | "suggestionsContainer"
+  | "suggestionList";
+
+export interface HvInputProps
+  extends StandardProps<HvBaseInputProps, HvInputClassKey, "onChange" | "onBlur"> {
+  /**
+   * The label of the form element.
+   *
+   * The form element must be labeled for accessibility reasons.
+   * If not provided, an aria-label or aria-labelledby must be provided instead.
+   */
+  label?: React.ReactNode;
+  /**
+   * @ignore
+   */
+  "aria-label"?: string;
+  /**
+   * @ignore
+   */
+  "aria-labelledby"?: string;
+  /**
+   * Provide additional descriptive text for the form element.
+   */
+  description?: React.ReactNode;
+
+  /**
+   * The status of the form element.
+   *
+   * Valid is correct, invalid is incorrect and standBy means no validations have run.
+   *
+   * When uncontrolled and unspecified it will default to "standBy" and change to either "valid"
+   * or "invalid" after any change to the state.
+   */
+  status?: HvFormStatus;
+  /**
+   * The error message to show when `status` is "invalid".
+   */
+  statusMessage?: React.ReactNode;
+  /**
+   * Identifies the element that provides an error message for the input.
+   *
+   * Will only be used when the validation status is invalid.
+   */
+  "aria-errormessage"?: string;
+
+  /**
+   * Internal labels.
+   */
+  labels?: InputLabelsProp;
+
+  /**
+   * An Object containing the various texts associated with the input.
+   */
+  validationMessages?: HvBaseInputValidationMessagesProps;
+
+  /**
+   * The function that will be executed to received an array of objects that has a label and id to create list of suggestion
+   */
+  suggestionListCallback?: (value: string) => InputSuggestion[];
+
+  /**
+   * The custom validation function, it receives the value and must return
+   * either `true` for valid or `false` for invalid, default validations would only
+   * occur if this function is null or undefined
+   */
+  validation?: (value: string) => boolean;
+
+  /**
+   * If `true` it should autofocus.
+   */
+  autoFocus?: boolean;
+
+  /**
+   * If `true` the clear button is disabled if `false` is enable
+   */
+  disableClear?: boolean;
+
+  /**
+   * If `true` the validation icon adorment is visible. Defaults to `false`.
+   *
+   * Currently, DS specifications define only a positive feedback icon;
+   * errors are signaled through the border style and by displaying the error message.
+   */
+  showValidationIcon?: boolean;
+
+  /**
+   * a custom icon to be added into the input.
+   */
+  endAdornment?: React.ReactNode;
+
+  /**
+   * The maximum allowed length of the characters, if this value is null no check
+   * will be performed.
+   */
+  maxCharQuantity?: number;
+  /**
+   * The minimum allowed length of the characters, if this value is null no check
+   * will be perform.
+   */
+  minCharQuantity?: number;
+
+  /**
+   * Called back when the value is changed.
+   */
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: string) => void;
+
+  /**
+   * Callback called when the user submits the value by pressing Enter/Return.
+   *
+   * Also called when the search button is clicked (when type is "search").
+   */
+  onEnter?: (
+    event: React.KeyboardEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement>,
+    value: string
+  ) => void;
+
+  /**
+   * Called back when the value is changed.
+   */
+  onBlur?: (
+    event: React.FocusEvent<HTMLInputElement>,
+    value: string,
+    validationState: string
+  ) => void;
+}
+
+export default function HvInput(props: HvInputProps): JSX.Element | null;