@hitachivantara/uikit-react-lab 3.38.0

package/dist/FormComposer/FormComposer.js

@@ -0,0 +1,258 @@
+"use strict";
+
+require("core-js/modules/es.reflect.construct.js");
+
+require("core-js/modules/es.object.keys.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.array.filter.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.weak-map.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/web.dom-collections.for-each.js");
+
+require("core-js/modules/es.function.name.js");
+
+require("core-js/modules/es.array.map.js");
+
+require("core-js/modules/es.array.concat.js");
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireWildcard(require("prop-types"));
+
+var _core = require("@material-ui/core");
+
+var _uikitReactCore = require("@hitachivantara/uikit-react-core");
+
+var _NavigationAnchors = _interopRequireDefault(require("../NavigationAnchors"));
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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) { (0, _defineProperty2.default)(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; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+/**
+ * A form composer component used to create a form dynamically, still in development
+ */
+var HvFormComposer = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(HvFormComposer, _React$Component);
+
+  var _super = _createSuper(HvFormComposer);
+
+  function HvFormComposer(props) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, HvFormComposer);
+    _this = _super.call(this, props);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getInitialValuesFromComponents", function (groups) {
+      var componentValues = {};
+      groups.forEach(function (group) {
+        group.children.forEach(function (child) {
+          componentValues[child.props.name] = child.props.value;
+        });
+      });
+      return componentValues;
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getValues", function () {
+      var componentValues = _this.state.componentValues;
+      return componentValues;
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getValuesHandler", function (originalHandler) {
+      if (originalHandler !== undefined && typeof originalHandler === "function") {
+        originalHandler(_this.getValues());
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "childOnChangeHandler", function (value, name, onChange) {
+      var componentValues = _this.state.componentValues;
+
+      var newComponentValues = _objectSpread({}, componentValues);
+
+      newComponentValues[name] = value;
+
+      _this.setState({
+        componentValues: newComponentValues
+      });
+
+      if (onChange !== undefined && typeof onChange === "function") {
+        return onChange(value);
+      } // The UI-KIT input forced to have the value explicitly returned on the onChanged function.
+
+
+      return value;
+    });
+    var _groups = _this.props.groups;
+    _this.state = {
+      componentValues: _this.getInitialValuesFromComponents(_groups)
+    };
+    return _this;
+  }
+  /**
+   * Gets the values that are set on each component inside the groups.
+   *
+   * @param {Object} groups - Initial group object containing all the component elements.
+   * @return {Object} - { key (Component name): value (Value set on the component) }
+   */
+
+
+  (0, _createClass2.default)(HvFormComposer, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          mainTitle = _this$props.mainTitle,
+          groups = _this$props.groups,
+          hasNavigation = _this$props.hasNavigation,
+          hasFooter = _this$props.hasFooter,
+          footerContent = _this$props.footerContent;
+      var footerElements = footerContent.map(function (child, i) {
+        var key = "fc-".concat(i);
+        return /*#__PURE__*/_react.default.cloneElement(child, {
+          onClick: function onClick() {
+            return _this2.getValuesHandler(child.props.onClick);
+          },
+          key: key
+        });
+      });
+      var navigationOptions = [];
+      var groupedComponents = groups.map(function (group) {
+        navigationOptions.push({
+          label: group.title,
+          value: group.title
+        });
+        return /*#__PURE__*/_react.default.createElement("div", {
+          key: group.title
+        }, /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvTypography, {
+          id: group.title,
+          variant: "mTitle"
+        }, group.title), group.children.map(function (child, i) {
+          var key = "fc-".concat(group.title, "-").concat(i);
+          return /*#__PURE__*/_react.default.createElement("div", {
+            key: key
+          }, /*#__PURE__*/_react.default.cloneElement(child, {
+            onChange: function onChange(event, value) {
+              return _this2.childOnChangeHandler(value, child.props.name, child.props.onChange);
+            }
+          }));
+        }));
+      });
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: classes.root
+      }, /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvTypography, {
+        variant: "xlTitle",
+        className: classes.title
+      }, mainTitle), /*#__PURE__*/_react.default.createElement("div", {
+        className: classes.mainContainer
+      }, hasNavigation && /*#__PURE__*/_react.default.createElement("div", {
+        className: classes.navContainer
+      }, /*#__PURE__*/_react.default.createElement(_NavigationAnchors.default, {
+        options: navigationOptions,
+        floating: false
+      })), /*#__PURE__*/_react.default.createElement("div", {
+        className: classes.componentContainer
+      }, groupedComponents)), hasFooter && /*#__PURE__*/_react.default.createElement("div", {
+        className: classes.footer
+      }, footerElements));
+    }
+  }]);
+  return HvFormComposer;
+}(_react.default.Component);
+
+HvFormComposer.propTypes = {
+  /**
+   * A Jss Object used to override or extend the styles applied to the form composer.
+   */
+  classes: _propTypes.default.instanceOf(Object).isRequired,
+
+  /**
+   * Main title to be displayed.
+   */
+  mainTitle: _propTypes.default.string,
+
+  /**
+   * The group of component that will be added to the Form composer.
+   */
+  groups: _propTypes.default.arrayOf((0, _propTypes.shape)({
+    title: _propTypes.default.string,
+    children: _propTypes.default.node
+  })).isRequired,
+
+  /**
+   * Shows navigation bar.
+   */
+  hasNavigation: _propTypes.default.bool,
+
+  /**
+   * Shows footer.
+   */
+  hasFooter: _propTypes.default.bool,
+
+  /**
+   * Content to be shown on the footer.
+   */
+  footerContent: _propTypes.default.node
+};
+/**
+ * Default properties.
+ */
+
+HvFormComposer.defaultProps = {
+  mainTitle: "",
+  hasNavigation: false,
+  hasFooter: false,
+  footerContent: []
+};
+
+var _default = (0, _core.withStyles)(_styles.default, {
+  name: "HvFormComposer"
+})(HvFormComposer);
+
+exports.default = _default;
+//# sourceMappingURL=FormComposer.js.map

package/dist/FormComposer/FormComposer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/FormComposer/FormComposer.js"],"names":["HvFormComposer","props","groups","componentValues","forEach","group","children","child","name","value","state","originalHandler","undefined","getValues","onChange","newComponentValues","setState","getInitialValuesFromComponents","classes","mainTitle","hasNavigation","hasFooter","footerContent","footerElements","map","i","key","React","cloneElement","onClick","getValuesHandler","navigationOptions","groupedComponents","push","label","title","event","childOnChangeHandler","root","mainContainer","navContainer","componentContainer","footer","Component","propTypes","PropTypes","instanceOf","Object","isRequired","string","arrayOf","node","bool","defaultProps","styles"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport PropTypes, { shape } from \"prop-types\";\nimport { withStyles } from \"@material-ui/core\";\nimport { HvTypography } from \"@hitachivantara/uikit-react-core\";\nimport HvNavigationAnchors from \"../NavigationAnchors\";\nimport styles from \"./styles\";\n\n/**\n * A form composer component used to create a form dynamically, still in development\n */\nclass HvFormComposer extends React.Component {\n  constructor(props) {\n    super(props);\n\n    const { groups } = this.props;\n\n    this.state = {\n      componentValues: this.getInitialValuesFromComponents(groups),\n    };\n  }\n\n  /**\n   * Gets the values that are set on each component inside the groups.\n   *\n   * @param {Object} groups - Initial group object containing all the component elements.\n   * @return {Object} - { key (Component name): value (Value set on the component) }\n   */\n  getInitialValuesFromComponents = (groups) => {\n    const componentValues = {};\n    groups.forEach((group) => {\n      group.children.forEach((child) => {\n        componentValues[child.props.name] = child.props.value;\n      });\n    });\n\n    return componentValues;\n  };\n\n  /**\n   * Gets the values stored in the state of each component.\n   */\n  getValues = () => {\n    const { componentValues } = this.state;\n    return componentValues;\n  };\n\n  /**\n   * Handler to retrieve the values.\n   *\n   * @param {Function} originalHandler - The handler that was originally triggered.\n   */\n  getValuesHandler = (originalHandler) => {\n    if (originalHandler !== undefined && typeof originalHandler === \"function\") {\n      originalHandler(this.getValues());\n    }\n  };\n\n  /**\n   * Stores the value on the state when a child component onChange event is triggered.\n   *\n   * @param {*} value - Value that will be stored on the state.\n   * @param {string} name - Name of the component.\n   * @param {Function} onChange - Original function triggered by the component.\n   */\n  childOnChangeHandler = (value, name, onChange) => {\n    const { componentValues } = this.state;\n\n    const newComponentValues = { ...componentValues };\n    newComponentValues[name] = value;\n\n    this.setState({ componentValues: newComponentValues });\n\n    if (onChange !== undefined && typeof onChange === \"function\") {\n      return onChange(value);\n    }\n    // The UI-KIT input forced to have the value explicitly returned on the onChanged function.\n    return value;\n  };\n\n  render() {\n    const { classes, mainTitle, groups, hasNavigation, hasFooter, footerContent } = this.props;\n\n    const footerElements = footerContent.map((child, i) => {\n      const key = `fc-${i}`;\n      return React.cloneElement(child, {\n        onClick: () => this.getValuesHandler(child.props.onClick),\n        key,\n      });\n    });\n\n    const navigationOptions = [];\n\n    const groupedComponents = groups.map((group) => {\n      navigationOptions.push({ label: group.title, value: group.title });\n\n      return (\n        <div key={group.title}>\n          <HvTypography id={group.title} variant=\"mTitle\">\n            {group.title}\n          </HvTypography>\n          {group.children.map((child, i) => {\n            const key = `fc-${group.title}-${i}`;\n            return (\n              <div key={key}>\n                {React.cloneElement(child, {\n                  onChange: (event, value) =>\n                    this.childOnChangeHandler(value, child.props.name, child.props.onChange),\n                })}\n              </div>\n            );\n          })}\n        </div>\n      );\n    });\n\n    return (\n      <div className={classes.root}>\n        <HvTypography variant=\"xlTitle\" className={classes.title}>\n          {mainTitle}\n        </HvTypography>\n        <div className={classes.mainContainer}>\n          {hasNavigation && (\n            <div className={classes.navContainer}>\n              <HvNavigationAnchors options={navigationOptions} floating={false} />\n            </div>\n          )}\n          <div className={classes.componentContainer}>{groupedComponents}</div>\n        </div>\n        {hasFooter && <div className={classes.footer}>{footerElements}</div>}\n      </div>\n    );\n  }\n}\n\nHvFormComposer.propTypes = {\n  /**\n   * A Jss Object used to override or extend the styles applied to the form composer.\n   */\n  classes: PropTypes.instanceOf(Object).isRequired,\n  /**\n   * Main title to be displayed.\n   */\n  mainTitle: PropTypes.string,\n  /**\n   * The group of component that will be added to the Form composer.\n   */\n  groups: PropTypes.arrayOf(\n    shape({\n      title: PropTypes.string,\n      children: PropTypes.node,\n    })\n  ).isRequired,\n  /**\n   * Shows navigation bar.\n   */\n  hasNavigation: PropTypes.bool,\n  /**\n   * Shows footer.\n   */\n  hasFooter: PropTypes.bool,\n  /**\n   * Content to be shown on the footer.\n   */\n  footerContent: PropTypes.node,\n};\n\n/**\n * Default properties.\n */\nHvFormComposer.defaultProps = {\n  mainTitle: \"\",\n  hasNavigation: false,\n  hasFooter: false,\n  footerContent: [],\n};\n\nexport default withStyles(styles, { name: \"HvFormComposer\" })(HvFormComposer);\n"],"file":"FormComposer.js"}

package/dist/FormComposer/index.d.ts

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

package/dist/FormComposer/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _FormComposer.default;
+  }
+});
+
+var _FormComposer = _interopRequireDefault(require("./FormComposer"));
+//# sourceMappingURL=index.js.map

package/dist/FormComposer/index.js.map

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

package/dist/FormComposer/styles.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var styles = function styles(theme) {
+  return {
+    root: {
+      backgroundColor: theme.hv.palette.atmosphere.atmo2
+    },
+    mainContainer: {
+      display: "flex",
+      backgroundColor: theme.hv.palette.atmosphere.atmo3
+    },
+    navContainer: {
+      maxWidth: "200px",
+      paddingTop: "".concat(theme.hv.spacing.md, "px")
+    },
+    componentContainer: {
+      width: "100%",
+      maxHeight: "400px",
+      overflowY: "auto",
+      padding: "".concat(theme.hv.spacing.md, "px")
+    },
+    title: {
+      padding: "".concat(theme.hv.spacing.sm, "px 0")
+    },
+    footer: {
+      padding: "".concat(theme.hv.spacing.sm, "px"),
+      textAlign: "right"
+    }
+  };
+};
+
+var _default = styles;
+exports.default = _default;
+//# sourceMappingURL=styles.js.map

package/dist/FormComposer/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/FormComposer/styles.js"],"names":["styles","theme","root","backgroundColor","hv","palette","atmosphere","atmo2","mainContainer","display","atmo3","navContainer","maxWidth","paddingTop","spacing","md","componentContainer","width","maxHeight","overflowY","padding","title","sm","footer","textAlign"],"mappings":";;;;;;;AAAA,IAAMA,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAY;AACzBC,IAAAA,IAAI,EAAE;AACJC,MAAAA,eAAe,EAAEF,KAAK,CAACG,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BC;AADzC,KADmB;AAIzBC,IAAAA,aAAa,EAAE;AACbC,MAAAA,OAAO,EAAE,MADI;AAEbN,MAAAA,eAAe,EAAEF,KAAK,CAACG,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BI;AAFhC,KAJU;AAQzBC,IAAAA,YAAY,EAAE;AACZC,MAAAA,QAAQ,EAAE,OADE;AAEZC,MAAAA,UAAU,YAAKZ,KAAK,CAACG,EAAN,CAASU,OAAT,CAAiBC,EAAtB;AAFE,KARW;AAYzBC,IAAAA,kBAAkB,EAAE;AAClBC,MAAAA,KAAK,EAAE,MADW;AAElBC,MAAAA,SAAS,EAAE,OAFO;AAGlBC,MAAAA,SAAS,EAAE,MAHO;AAIlBC,MAAAA,OAAO,YAAKnB,KAAK,CAACG,EAAN,CAASU,OAAT,CAAiBC,EAAtB;AAJW,KAZK;AAkBzBM,IAAAA,KAAK,EAAE;AACLD,MAAAA,OAAO,YAAKnB,KAAK,CAACG,EAAN,CAASU,OAAT,CAAiBQ,EAAtB;AADF,KAlBkB;AAqBzBC,IAAAA,MAAM,EAAE;AACNH,MAAAA,OAAO,YAAKnB,KAAK,CAACG,EAAN,CAASU,OAAT,CAAiBQ,EAAtB,OADD;AAENE,MAAAA,SAAS,EAAE;AAFL;AArBiB,GAAZ;AAAA,CAAf;;eA2BexB,M","sourcesContent":["const styles = (theme) => ({\n  root: {\n    backgroundColor: theme.hv.palette.atmosphere.atmo2,\n  },\n  mainContainer: {\n    display: \"flex\",\n    backgroundColor: theme.hv.palette.atmosphere.atmo3,\n  },\n  navContainer: {\n    maxWidth: \"200px\",\n    paddingTop: `${theme.hv.spacing.md}px`,\n  },\n  componentContainer: {\n    width: \"100%\",\n    maxHeight: \"400px\",\n    overflowY: \"auto\",\n    padding: `${theme.hv.spacing.md}px`,\n  },\n  title: {\n    padding: `${theme.hv.spacing.sm}px 0`,\n  },\n  footer: {\n    padding: `${theme.hv.spacing.sm}px`,\n    textAlign: \"right\",\n  },\n});\n\nexport default styles;\n"],"file":"styles.js"}

package/dist/InlineEditor/InlineEditor.d.ts

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { StandardProps } from "@material-ui/core";
+import {
+  HvBaseInputProps,
+  HvButtonProps,
+  HvTypographyKeys,
+  HvTypographyProps,
+} from "@hitachivantara/uikit-react-core";
+
+export type HvInlineEditorClassKey =
+  | "root"
+  | "input"
+  | "inputRoot"
+  | "inputBorderContainer"
+  | "text"
+  | "textEmpty"
+  | "button"
+  | "icon"
+  | "iconVisible"
+  | "largeText";
+
+export interface HvInlineEditorProps
+  extends StandardProps<HvBaseInputProps, HvInlineEditorClassKey, "onBlur"> {
+  /**
+   * Whether the Edit icon should always be visible
+   */
+  showIcon?: boolean;
+  /**
+   * Component to use as the input. The component "inherit" from `HvBaseInput` (such as `HvInput` or `HvTextArea`)
+   */
+  component?: React.ElementType;
+  /**
+   * Variant of the HvTypography to display
+   */
+  variant?: HvTypographyKeys;
+  /**
+   * Called when the input is blurred.
+   */
+  onBlur?: (event: React.FocusEvent<HTMLTextAreaElement | HTMLInputElement>, value: string) => void;
+  /**
+   * Props passed to the HvButton component
+   */
+  buttonProps?: HvButtonProps;
+  /**
+   * Props passed to the HvTypography text component
+   */
+  typographyProps?: HvTypographyProps;
+}
+
+export default function HvInlineEditor(props: HvInlineEditorProps): JSX.Element | null;

package/dist/InlineEditor/InlineEditor.js

@@ -0,0 +1,260 @@
+"use strict";
+
+require("core-js/modules/es.object.keys.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.array.filter.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+require("core-js/modules/web.dom-collections.for-each.js");
+
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.weak-map.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _core = require("@material-ui/core");
+
+var _uikitReactCore = require("@hitachivantara/uikit-react-core");
+
+var _uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+var _excluded = ["className", "classes", "value", "defaultValue", "showIcon", "component", "variant", "placeholder", "onBlur", "onChange", "onKeyDown", "buttonProps", "typographyProps"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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) { (0, _defineProperty2.default)(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; }
+
+/**
+ * An Inline Editor allows the user to edit a record without making a major switch
+ * between viewing and editing, making it an efficient method of updating a record.
+ */
+var HvInlineEditor = function HvInlineEditor(props) {
+  var className = props.className,
+      classes = props.classes,
+      valueProp = props.value,
+      defaultValue = props.defaultValue,
+      showIcon = props.showIcon,
+      _props$component = props.component,
+      InputComponent = _props$component === void 0 ? _uikitReactCore.HvInput : _props$component,
+      _props$variant = props.variant,
+      variant = _props$variant === void 0 ? "normalText" : _props$variant,
+      _props$placeholder = props.placeholder,
+      placeholder = _props$placeholder === void 0 ? "Enter text" : _props$placeholder,
+      onBlur = props.onBlur,
+      onChange = props.onChange,
+      onKeyDown = props.onKeyDown,
+      buttonProps = props.buttonProps,
+      typographyProps = props.typographyProps,
+      others = (0, _objectWithoutProperties2.default)(props, _excluded);
+
+  var _useControlled = (0, _uikitReactCore.useControlled)(valueProp, defaultValue),
+      _useControlled2 = (0, _slicedToArray2.default)(_useControlled, 2),
+      value = _useControlled2[0],
+      setValue = _useControlled2[1];
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      editMode = _useState2[0],
+      setEditMode = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(value),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      cachedValue = _useState4[0],
+      setCachedValue = _useState4[1];
+
+  var inputRef = (0, _react.useRef)();
+  var theme = (0, _core.useTheme)();
+  var typographyStyles = theme.hv.typography[variant] || {};
+  var lineHeight = typographyStyles.lineHeight;
+  (0, _react.useLayoutEffect)(function () {
+    var input = inputRef.current;
+
+    if (editMode && input) {
+      input.focus();
+      input.select();
+    }
+  }, [editMode]);
+
+  var handleClick = function handleClick() {
+    setEditMode(true);
+    setCachedValue(value);
+  };
+
+  var handleBlur = function handleBlur(event) {
+    setEditMode(false);
+    var newValue = value || cachedValue; // empty values should be ignored
+
+    setValue(newValue);
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(event, newValue);
+  };
+
+  var handleKeyDown = function handleKeyDown(event) {
+    if ((0, _uikitReactCore.isKeypress)(event, _uikitReactCore.KeyboardCodes.Esc)) {
+      setEditMode(false);
+      setValue(cachedValue);
+    }
+
+    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+  };
+
+  var handleChange = function handleChange(event, val) {
+    setValue(val);
+    onChange === null || onChange === void 0 ? void 0 : onChange(event, val);
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)(className, classes.root)
+  }, editMode ? /*#__PURE__*/_react.default.createElement(InputComponent, (0, _extends2.default)({
+    inputRef: inputRef,
+    classes: {
+      root: classes.inputRoot,
+      input: classes.input,
+      inputBorderContainer: classes.inputBorderContainer
+    },
+    inputProps: {
+      style: _objectSpread(_objectSpread({}, typographyStyles), {}, {
+        height: InputComponent === _uikitReactCore.HvInput ? lineHeight : undefined
+      })
+    },
+    value: value,
+    onBlur: handleBlur,
+    onChange: handleChange,
+    onKeyDown: handleKeyDown
+  }, others)) : /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvButton, (0, _extends2.default)({
+    category: "ghost",
+    overrideIconColors: false,
+    className: (0, _clsx.default)(classes.button, parseInt(lineHeight, 10) >= 28 && classes.largeText),
+    onClick: handleClick
+  }, buttonProps), /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvTypography, (0, _extends2.default)({
+    variant: variant,
+    className: (0, _clsx.default)(classes.text, !value && classes.textEmpty)
+  }, typographyProps), value || placeholder), /*#__PURE__*/_react.default.createElement(_uikitReactIcons.Edit, {
+    color: "atmo5",
+    role: "presentation",
+    className: (0, _clsx.default)(classes.icon, showIcon && classes.iconVisible)
+  })));
+};
+
+HvInlineEditor.propTypes = {
+  /**
+   * Class names to be applied.
+   */
+  className: _propTypes.default.string,
+
+  /**
+   * A Jss Object used to override or extend the component styles applied.
+   */
+  classes: _propTypes.default.shape({
+    root: _propTypes.default.string,
+    input: _propTypes.default.string,
+    inputRoot: _propTypes.default.string,
+    inputBorderContainer: _propTypes.default.string,
+    text: _propTypes.default.string,
+    textEmpty: _propTypes.default.string,
+    button: _propTypes.default.string,
+    icon: _propTypes.default.string,
+    iconVisible: _propTypes.default.string,
+    largeText: _propTypes.default.string
+  }).isRequired,
+
+  /**
+   * The value of the input element, for controlled usage.
+   */
+  value: _propTypes.default.string,
+
+  /**
+   * The default value of the input element, for uncontrolled usage.
+   */
+  defaultValue: _propTypes.default.string,
+
+  /**
+   * Whether the Edit icon should always be visible
+   */
+  showIcon: _propTypes.default.bool,
+
+  /**
+   * Component to use as the input. The component "inherit" from `HvBaseInput` (such as `HvInput` or `HvTextArea`)
+   */
+  component: _propTypes.default.elementType,
+
+  /**
+   * Variant of the HvTypography to display
+   */
+  variant: _propTypes.default.string,
+
+  /**
+   * The placeholder value of the HvTypography.
+   */
+  placeholder: _propTypes.default.string,
+
+  /**
+   * Called when the input is blurred.
+   */
+  onBlur: _propTypes.default.func,
+
+  /**
+   * Called when the input value is changed.
+   */
+  onChange: _propTypes.default.func,
+
+  /**
+   * Called when a key is pressed on the input.
+   */
+  onKeyDown: _propTypes.default.func,
+
+  /**
+   * Props passed to the HvButton component
+   */
+  buttonProps: _propTypes.default.instanceOf(Object),
+
+  /**
+   * Props passed to the HvTypography text component
+   */
+  typographyProps: _propTypes.default.instanceOf(Object)
+};
+
+var _default = (0, _core.withStyles)(_styles.default, {
+  name: "HvInlineEditor"
+})(HvInlineEditor);
+
+exports.default = _default;
+//# sourceMappingURL=InlineEditor.js.map