@hitachivantara/uikit-react-lab 3.38.0

package/dist/modern/ColorPicker/styles.js

@@ -0,0 +1,36 @@
+const styles = () => ({
+  headerColorValue: {
+    textTransform: "uppercase"
+  },
+  headerColorIcon: {
+    width: 24,
+    "& svg": {
+      marginLeft: 0
+    }
+  },
+  panel: {
+    width: "100%",
+    minWidth: 240,
+    display: "flex",
+    justifyContent: "center",
+    padding: "20px 15px 20px 20px"
+  },
+  colorPicker: {
+    width: 205
+  },
+  presetColors: {
+    borderTop: "none !important"
+  },
+  labelContainer: {
+    display: "flex",
+    alignItems: "flex-start"
+  },
+  label: {
+    paddingBottom: "6px",
+    display: "block"
+  },
+  description: {}
+});
+
+export default styles;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ColorPicker/styles.js"],"names":["styles","headerColorValue","textTransform","headerColorIcon","width","marginLeft","panel","minWidth","display","justifyContent","padding","colorPicker","presetColors","borderTop","labelContainer","alignItems","label","paddingBottom","description"],"mappings":"AAAA,MAAMA,MAAM,GAAG,OAAO;AACpBC,EAAAA,gBAAgB,EAAE;AAChBC,IAAAA,aAAa,EAAE;AADC,GADE;AAIpBC,EAAAA,eAAe,EAAE;AACfC,IAAAA,KAAK,EAAE,EADQ;AAEf,aAAS;AACPC,MAAAA,UAAU,EAAE;AADL;AAFM,GAJG;AAUpBC,EAAAA,KAAK,EAAE;AACLF,IAAAA,KAAK,EAAE,MADF;AAELG,IAAAA,QAAQ,EAAE,GAFL;AAGLC,IAAAA,OAAO,EAAE,MAHJ;AAILC,IAAAA,cAAc,EAAE,QAJX;AAKLC,IAAAA,OAAO,EAAE;AALJ,GAVa;AAiBpBC,EAAAA,WAAW,EAAE;AACXP,IAAAA,KAAK,EAAE;AADI,GAjBO;AAoBpBQ,EAAAA,YAAY,EAAE;AACZC,IAAAA,SAAS,EAAE;AADC,GApBM;AAuBpBC,EAAAA,cAAc,EAAE;AACdN,IAAAA,OAAO,EAAE,MADK;AAEdO,IAAAA,UAAU,EAAE;AAFE,GAvBI;AA2BpBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,aAAa,EAAE,KADV;AAELT,IAAAA,OAAO,EAAE;AAFJ,GA3Ba;AA+BpBU,EAAAA,WAAW,EAAE;AA/BO,CAAP,CAAf;;AAkCA,eAAelB,MAAf","sourcesContent":["const styles = () => ({\n  headerColorValue: {\n    textTransform: \"uppercase\",\n  },\n  headerColorIcon: {\n    width: 24,\n    \"& svg\": {\n      marginLeft: 0,\n    },\n  },\n  panel: {\n    width: \"100%\",\n    minWidth: 240,\n    display: \"flex\",\n    justifyContent: \"center\",\n    padding: \"20px 15px 20px 20px\",\n  },\n  colorPicker: {\n    width: 205,\n  },\n  presetColors: {\n    borderTop: \"none !important\",\n  },\n  labelContainer: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n  },\n  label: {\n    paddingBottom: \"6px\",\n    display: \"block\",\n  },\n  description: {},\n});\n\nexport default styles;\n"],"file":"styles.js"}

package/dist/modern/Drawer/Drawer.d.ts

@@ -0,0 +1,13 @@
+import { DrawerProps, StandardProps } from "@material-ui/core";
+
+
+export type HvDrawerClassKey = "root" | "background" | "paper" | "closeButton";
+
+export interface HvDrawerProps extends StandardProps<DrawerProps, HvDrawerClassKey> {
+    /**
+   * Title for the button close.
+   */
+     buttonTitle?: string;
+}
+
+export default function HvDrawer(props: HvDrawerProps): JSX.Element | null;

package/dist/modern/Drawer/Drawer.js

@@ -0,0 +1,128 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["className", "classes", "id", "children", "open", "onClose", "anchor", "buttonTitle"];
+import React from "react";
+import clsx from "clsx";
+import PropTypes from "prop-types";
+import { Drawer, withStyles } from "@material-ui/core";
+import { Close } from "@hitachivantara/uikit-react-icons";
+import { HvButton, withTooltip, setId } from "@hitachivantara/uikit-react-core";
+import styles from "./styles";
+/**
+ * The Drawer component provides a foundation to create a sliding pane.
+ * It only provides the pane with a close button, the rest of the
+ * content can be customized.
+ */
+
+const HvDrawer = _ref => {
+  let {
+    className,
+    classes,
+    id,
+    children,
+    open,
+    onClose,
+    anchor = "right",
+    buttonTitle = "Close"
+  } = _ref,
+      others = _objectWithoutProperties(_ref, _excluded);
+
+  const closeButtonDisplay = () => /*#__PURE__*/React.createElement(Close, {
+    role: "presentation"
+  });
+
+  const CloseButtonTooltipWrapper = buttonTitle ? withTooltip(closeButtonDisplay, buttonTitle, "top") : closeButtonDisplay;
+  return /*#__PURE__*/React.createElement(Drawer, _extends({
+    className: clsx(classes.root, className),
+    id: id,
+    anchor: anchor,
+    open: open,
+    PaperProps: {
+      classes: {
+        root: classes.paper
+      }
+    },
+    BackdropProps: {
+      classes: {
+        root: classes.background
+      }
+    },
+    onClose: (event, reason) => onClose(event, reason)
+  }, others), /*#__PURE__*/React.createElement(HvButton, {
+    id: setId(id, "close"),
+    className: classes.closeButton,
+    category: "ghost",
+    onClick: onClose,
+    "aria-label": buttonTitle
+  }, /*#__PURE__*/React.createElement(CloseButtonTooltipWrapper, null)), children);
+};
+
+HvDrawer.propTypes = {
+  /**
+   * Class names to be applied.
+   */
+  className: PropTypes.string,
+
+  /**
+   * Id to be applied to the root node.
+   */
+  id: PropTypes.string,
+
+  /**
+   * A Jss Object used to override or extend the styles applied.
+   */
+  classes: PropTypes.shape({
+    /**
+     * Style applied to the root of the component.
+     */
+    root: PropTypes.string,
+
+    /**
+     * Style applied to the background (outside) of the component.
+     */
+    background: PropTypes.string,
+
+    /**
+     * Style applied to the component (root).
+     */
+    paper: PropTypes.string,
+
+    /**
+     * Style applied to the close button.
+     */
+    closeButton: PropTypes.string
+  }).isRequired,
+
+  /**
+   * Components of the Drawer.
+   */
+  children: PropTypes.node.isRequired,
+
+  /**
+   * Current state of the Drawer.
+   */
+  open: PropTypes.bool.isRequired,
+
+  /**
+   * Function executed on close.
+   * Extended from Modal from material-ui
+   *
+   * @param {object} event The event source of the callback.
+   * @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`.
+   */
+  onClose: PropTypes.func.isRequired,
+
+  /**
+   * The side the drawer opens from.
+   */
+  anchor: PropTypes.oneOf(["left", "top", "right", "bottom"]),
+
+  /**
+   * Title for the button close.
+   */
+  buttonTitle: PropTypes.string
+};
+export default withStyles(styles, {
+  name: "HvDrawer"
+})(HvDrawer);
+//# sourceMappingURL=Drawer.js.map

package/dist/modern/Drawer/Drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Drawer/Drawer.js"],"names":["React","clsx","PropTypes","Drawer","withStyles","Close","HvButton","withTooltip","setId","styles","HvDrawer","className","classes","id","children","open","onClose","anchor","buttonTitle","others","closeButtonDisplay","CloseButtonTooltipWrapper","root","paper","background","event","reason","closeButton","propTypes","string","shape","isRequired","node","bool","func","oneOf","name"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport PropTypes from \"prop-types\";\nimport { Drawer, withStyles } from \"@material-ui/core\";\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport { HvButton, withTooltip, setId } from \"@hitachivantara/uikit-react-core\";\nimport styles from \"./styles\";\n\n/**\n * The Drawer component provides a foundation to create a sliding pane.\n * It only provides the pane with a close button, the rest of the\n * content can be customized.\n */\nconst HvDrawer = ({\n  className,\n  classes,\n  id,\n  children,\n  open,\n  onClose,\n  anchor = \"right\",\n  buttonTitle = \"Close\",\n  ...others\n}) => {\n  const closeButtonDisplay = () => <Close role=\"presentation\" />;\n\n  const CloseButtonTooltipWrapper = buttonTitle\n    ? withTooltip(closeButtonDisplay, buttonTitle, \"top\")\n    : closeButtonDisplay;\n\n  return (\n    <Drawer\n      className={clsx(classes.root, className)}\n      id={id}\n      anchor={anchor}\n      open={open}\n      PaperProps={{\n        classes: {\n          root: classes.paper,\n        },\n      }}\n      BackdropProps={{\n        classes: {\n          root: classes.background,\n        },\n      }}\n      onClose={(event, reason) => onClose(event, reason)}\n      {...others}\n    >\n      <HvButton\n        id={setId(id, \"close\")}\n        className={classes.closeButton}\n        category=\"ghost\"\n        onClick={onClose}\n        aria-label={buttonTitle}\n      >\n        <CloseButtonTooltipWrapper />\n      </HvButton>\n      {children}\n    </Drawer>\n  );\n};\n\nHvDrawer.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * Id to be applied to the root node.\n   */\n  id: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Style applied to the root of the component.\n     */\n    root: PropTypes.string,\n    /**\n     * Style applied to the background (outside) of the component.\n     */\n    background: PropTypes.string,\n    /**\n     * Style applied to the component (root).\n     */\n    paper: PropTypes.string,\n    /**\n     * Style applied to the close button.\n     */\n    closeButton: PropTypes.string,\n  }).isRequired,\n  /**\n   * Components of the Drawer.\n   */\n  children: PropTypes.node.isRequired,\n  /**\n   * Current state of the Drawer.\n   */\n  open: PropTypes.bool.isRequired,\n  /**\n   * Function executed on close.\n   * Extended from Modal from material-ui\n   *\n   * @param {object} event The event source of the callback.\n   * @param {string} reason Can be: `\"escapeKeyDown\"`, `\"backdropClick\"`.\n   */\n  onClose: PropTypes.func.isRequired,\n  /**\n   * The side the drawer opens from.\n   */\n  anchor: PropTypes.oneOf([\"left\", \"top\", \"right\", \"bottom\"]),\n  /**\n   * Title for the button close.\n   */\n  buttonTitle: PropTypes.string,\n};\n\nexport default withStyles(styles, { name: \"HvDrawer\" })(HvDrawer);\n"],"file":"Drawer.js"}

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

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

package/dist/modern/Drawer/index.js

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

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

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

package/dist/modern/Drawer/styles.js

@@ -0,0 +1,24 @@
+import { hexToRgb } from "@material-ui/core";
+import { alpha } from "@material-ui/core/styles";
+
+const styles = theme => ({
+  background: {
+    background: alpha(hexToRgb(theme.hv.palette.atmosphere.atmo4), 0.8)
+  },
+  paper: {
+    background: `${theme.hv.palette.atmosphere.atmo1}`,
+    padding: "0px",
+    overflow: "auto",
+    boxShadow: theme.hv.shadows[1]
+  },
+  closeButton: {
+    padding: 0,
+    minWidth: "inherit",
+    position: "absolute",
+    top: theme.hvSpacing("sm"),
+    right: theme.hvSpacing("sm")
+  }
+});
+
+export default styles;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Drawer/styles.js"],"names":["hexToRgb","alpha","styles","theme","background","hv","palette","atmosphere","atmo4","paper","atmo1","padding","overflow","boxShadow","shadows","closeButton","minWidth","position","top","hvSpacing","right"],"mappings":"AAAA,SAASA,QAAT,QAAyB,mBAAzB;AACA,SAASC,KAAT,QAAsB,0BAAtB;;AAEA,MAAMC,MAAM,GAAIC,KAAD,KAAY;AACzBC,EAAAA,UAAU,EAAE;AACVA,IAAAA,UAAU,EAAEH,KAAK,CAACD,QAAQ,CAACG,KAAK,CAACE,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BC,KAA7B,CAAT,EAA8C,GAA9C;AADP,GADa;AAIzBC,EAAAA,KAAK,EAAE;AACLL,IAAAA,UAAU,EAAG,GAAED,KAAK,CAACE,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BG,KAAM,EAD5C;AAELC,IAAAA,OAAO,EAAE,KAFJ;AAGLC,IAAAA,QAAQ,EAAE,MAHL;AAILC,IAAAA,SAAS,EAAEV,KAAK,CAACE,EAAN,CAASS,OAAT,CAAiB,CAAjB;AAJN,GAJkB;AAUzBC,EAAAA,WAAW,EAAE;AACXJ,IAAAA,OAAO,EAAE,CADE;AAEXK,IAAAA,QAAQ,EAAE,SAFC;AAGXC,IAAAA,QAAQ,EAAE,UAHC;AAIXC,IAAAA,GAAG,EAAEf,KAAK,CAACgB,SAAN,CAAgB,IAAhB,CAJM;AAKXC,IAAAA,KAAK,EAAEjB,KAAK,CAACgB,SAAN,CAAgB,IAAhB;AALI;AAVY,CAAZ,CAAf;;AAmBA,eAAejB,MAAf","sourcesContent":["import { hexToRgb } from \"@material-ui/core\";\nimport { alpha } from \"@material-ui/core/styles\";\n\nconst styles = (theme) => ({\n  background: {\n    background: alpha(hexToRgb(theme.hv.palette.atmosphere.atmo4), 0.8),\n  },\n  paper: {\n    background: `${theme.hv.palette.atmosphere.atmo1}`,\n    padding: \"0px\",\n    overflow: \"auto\",\n    boxShadow: theme.hv.shadows[1],\n  },\n  closeButton: {\n    padding: 0,\n    minWidth: \"inherit\",\n    position: \"absolute\",\n    top: theme.hvSpacing(\"sm\"),\n    right: theme.hvSpacing(\"sm\"),\n  },\n});\n\nexport default styles;\n"],"file":"styles.js"}

package/dist/modern/FormComposer/FormComposer.d.ts

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { StandardProps } from "@material-ui/core";
+
+interface FormGroup {
+  title: string;
+  children: React.ReactNode;
+}
+
+export type HvFormComposerClassKey =
+  | "root"
+  | "title"
+  | "mainContainer"
+  | "navContainer"
+  | "componentContainer"
+  | "footer";
+
+export interface HvFormComposerProps
+  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, HvFormComposerClassKey> {
+  /**
+   * Main title to be displayed.
+   */
+  mainTitle?: string;
+  /**
+   * The group of component that will be added to the Form composer.
+   */
+  groups: FormGroup[];
+  /**
+   * Shows navigation bar.
+   */
+  hasNavigation?: boolean;
+  /**
+   * Shows footer.
+   */
+  hasFooter?: boolean;
+  /**
+   * Content to be shown on the footer.
+   */
+  footerContent?: React.ReactNode;
+}
+
+export default function HvFormComposer(props: HvFormComposerProps): JSX.Element | null;

package/dist/modern/FormComposer/FormComposer.js

@@ -0,0 +1,183 @@
+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 React from "react";
+import PropTypes, { shape } from "prop-types";
+import { withStyles } from "@material-ui/core";
+import { HvTypography } from "@hitachivantara/uikit-react-core";
+import HvNavigationAnchors from "../NavigationAnchors";
+import styles from "./styles";
+/**
+ * A form composer component used to create a form dynamically, still in development
+ */
+
+class HvFormComposer extends React.Component {
+  constructor(props) {
+    super(props);
+
+    _defineProperty(this, "getInitialValuesFromComponents", groups => {
+      const componentValues = {};
+      groups.forEach(group => {
+        group.children.forEach(child => {
+          componentValues[child.props.name] = child.props.value;
+        });
+      });
+      return componentValues;
+    });
+
+    _defineProperty(this, "getValues", () => {
+      const {
+        componentValues
+      } = this.state;
+      return componentValues;
+    });
+
+    _defineProperty(this, "getValuesHandler", originalHandler => {
+      if (originalHandler !== undefined && typeof originalHandler === "function") {
+        originalHandler(this.getValues());
+      }
+    });
+
+    _defineProperty(this, "childOnChangeHandler", (value, name, onChange) => {
+      const {
+        componentValues
+      } = this.state;
+
+      const 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;
+    });
+
+    const {
+      groups: _groups
+    } = this.props;
+    this.state = {
+      componentValues: this.getInitialValuesFromComponents(_groups)
+    };
+  }
+  /**
+   * 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) }
+   */
+
+
+  render() {
+    const {
+      classes,
+      mainTitle,
+      groups,
+      hasNavigation,
+      hasFooter,
+      footerContent
+    } = this.props;
+    const footerElements = footerContent.map((child, i) => {
+      const key = `fc-${i}`;
+      return /*#__PURE__*/React.cloneElement(child, {
+        onClick: () => this.getValuesHandler(child.props.onClick),
+        key
+      });
+    });
+    const navigationOptions = [];
+    const groupedComponents = groups.map(group => {
+      navigationOptions.push({
+        label: group.title,
+        value: group.title
+      });
+      return /*#__PURE__*/React.createElement("div", {
+        key: group.title
+      }, /*#__PURE__*/React.createElement(HvTypography, {
+        id: group.title,
+        variant: "mTitle"
+      }, group.title), group.children.map((child, i) => {
+        const key = `fc-${group.title}-${i}`;
+        return /*#__PURE__*/React.createElement("div", {
+          key: key
+        }, /*#__PURE__*/React.cloneElement(child, {
+          onChange: (event, value) => this.childOnChangeHandler(value, child.props.name, child.props.onChange)
+        }));
+      }));
+    });
+    return /*#__PURE__*/React.createElement("div", {
+      className: classes.root
+    }, /*#__PURE__*/React.createElement(HvTypography, {
+      variant: "xlTitle",
+      className: classes.title
+    }, mainTitle), /*#__PURE__*/React.createElement("div", {
+      className: classes.mainContainer
+    }, hasNavigation && /*#__PURE__*/React.createElement("div", {
+      className: classes.navContainer
+    }, /*#__PURE__*/React.createElement(HvNavigationAnchors, {
+      options: navigationOptions,
+      floating: false
+    })), /*#__PURE__*/React.createElement("div", {
+      className: classes.componentContainer
+    }, groupedComponents)), hasFooter && /*#__PURE__*/React.createElement("div", {
+      className: classes.footer
+    }, footerElements));
+  }
+
+}
+
+HvFormComposer.propTypes = {
+  /**
+   * A Jss Object used to override or extend the styles applied to the form composer.
+   */
+  classes: PropTypes.instanceOf(Object).isRequired,
+
+  /**
+   * Main title to be displayed.
+   */
+  mainTitle: PropTypes.string,
+
+  /**
+   * The group of component that will be added to the Form composer.
+   */
+  groups: PropTypes.arrayOf(shape({
+    title: PropTypes.string,
+    children: PropTypes.node
+  })).isRequired,
+
+  /**
+   * Shows navigation bar.
+   */
+  hasNavigation: PropTypes.bool,
+
+  /**
+   * Shows footer.
+   */
+  hasFooter: PropTypes.bool,
+
+  /**
+   * Content to be shown on the footer.
+   */
+  footerContent: PropTypes.node
+};
+/**
+ * Default properties.
+ */
+
+HvFormComposer.defaultProps = {
+  mainTitle: "",
+  hasNavigation: false,
+  hasFooter: false,
+  footerContent: []
+};
+export default withStyles(styles, {
+  name: "HvFormComposer"
+})(HvFormComposer);
+//# sourceMappingURL=FormComposer.js.map

package/dist/modern/FormComposer/FormComposer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/FormComposer/FormComposer.js"],"names":["React","PropTypes","shape","withStyles","HvTypography","HvNavigationAnchors","styles","HvFormComposer","Component","constructor","props","groups","componentValues","forEach","group","children","child","name","value","state","originalHandler","undefined","getValues","onChange","newComponentValues","setState","getInitialValuesFromComponents","render","classes","mainTitle","hasNavigation","hasFooter","footerContent","footerElements","map","i","key","cloneElement","onClick","getValuesHandler","navigationOptions","groupedComponents","push","label","title","event","childOnChangeHandler","root","mainContainer","navContainer","componentContainer","footer","propTypes","instanceOf","Object","isRequired","string","arrayOf","node","bool","defaultProps"],"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/modern/FormComposer/index.d.ts

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

package/dist/modern/FormComposer/index.js

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

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

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

package/dist/modern/FormComposer/styles.js

@@ -0,0 +1,29 @@
+const styles = theme => ({
+  root: {
+    backgroundColor: theme.hv.palette.atmosphere.atmo2
+  },
+  mainContainer: {
+    display: "flex",
+    backgroundColor: theme.hv.palette.atmosphere.atmo3
+  },
+  navContainer: {
+    maxWidth: "200px",
+    paddingTop: `${theme.hv.spacing.md}px`
+  },
+  componentContainer: {
+    width: "100%",
+    maxHeight: "400px",
+    overflowY: "auto",
+    padding: `${theme.hv.spacing.md}px`
+  },
+  title: {
+    padding: `${theme.hv.spacing.sm}px 0`
+  },
+  footer: {
+    padding: `${theme.hv.spacing.sm}px`,
+    textAlign: "right"
+  }
+});
+
+export default styles;
+//# sourceMappingURL=styles.js.map

package/dist/modern/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,MAAMA,MAAM,GAAIC,KAAD,KAAY;AACzBC,EAAAA,IAAI,EAAE;AACJC,IAAAA,eAAe,EAAEF,KAAK,CAACG,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BC;AADzC,GADmB;AAIzBC,EAAAA,aAAa,EAAE;AACbC,IAAAA,OAAO,EAAE,MADI;AAEbN,IAAAA,eAAe,EAAEF,KAAK,CAACG,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BI;AAFhC,GAJU;AAQzBC,EAAAA,YAAY,EAAE;AACZC,IAAAA,QAAQ,EAAE,OADE;AAEZC,IAAAA,UAAU,EAAG,GAAEZ,KAAK,CAACG,EAAN,CAASU,OAAT,CAAiBC,EAAG;AAFvB,GARW;AAYzBC,EAAAA,kBAAkB,EAAE;AAClBC,IAAAA,KAAK,EAAE,MADW;AAElBC,IAAAA,SAAS,EAAE,OAFO;AAGlBC,IAAAA,SAAS,EAAE,MAHO;AAIlBC,IAAAA,OAAO,EAAG,GAAEnB,KAAK,CAACG,EAAN,CAASU,OAAT,CAAiBC,EAAG;AAJd,GAZK;AAkBzBM,EAAAA,KAAK,EAAE;AACLD,IAAAA,OAAO,EAAG,GAAEnB,KAAK,CAACG,EAAN,CAASU,OAAT,CAAiBQ,EAAG;AAD3B,GAlBkB;AAqBzBC,EAAAA,MAAM,EAAE;AACNH,IAAAA,OAAO,EAAG,GAAEnB,KAAK,CAACG,EAAN,CAASU,OAAT,CAAiBQ,EAAG,IAD1B;AAENE,IAAAA,SAAS,EAAE;AAFL;AArBiB,CAAZ,CAAf;;AA2BA,eAAexB,MAAf","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/modern/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;