@hitachivantara/uikit-react-core 2.23.2

package/dist/modern/TextArea/TextArea.js

@@ -0,0 +1,415 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+const _excluded = ["classes", "className", "id", "labels", "maxCharQuantity", "rows", "initialValue", "value", "disabled", "resizable", "autoScroll", "onChange", "blockMax", "countCharProps", "isRequired"];
+import React from "react";
+import PropTypes from "prop-types";
+import isNil from "lodash/isNil";
+import clsx from "clsx";
+import { withStyles } from "@material-ui/core";
+import HvTypography from "../Typography";
+import Input from "../Input";
+import styles from "./styles";
+import withLabels from "../withLabels";
+const DEFAULT_LABELS = {
+  startCount: "",
+  middleCount: "/",
+  endCount: ""
+};
+/**
+ * A text area component wrapping the input box, it allows the input of paragraph of text.
+ * alongside this it can provide a validation for the max character quantity
+ */
+
+class HvTextArea extends React.Component {
+  constructor(props) {
+    super(props);
+
+    _defineProperty(this, "isOverflow", value => {
+      const {
+        maxCharQuantity
+      } = this.props;
+      return isNil(maxCharQuantity) ? false : value.length > maxCharQuantity;
+    });
+
+    _defineProperty(this, "limitValue", value => {
+      const {
+        maxCharQuantity,
+        blockMax
+      } = this.props;
+      if (value === undefined || !blockMax) return value;
+      return !this.isOverflow(value) ? value : value.substring(0, maxCharQuantity);
+    });
+
+    _defineProperty(this, "isScrolledDown", () => {
+      const el = this.textInputRef.current;
+      return el == null || el.scrollHeight - el.scrollTop === el.clientHeight;
+    });
+
+    _defineProperty(this, "scrollDown", () => {
+      const el = this.textInputRef.current;
+
+      if (el != null) {
+        el.scrollTop = el.scrollHeight - el.clientHeight;
+      }
+    });
+
+    _defineProperty(this, "addScrollListener", () => {
+      const scrollHandler = {
+        handleEvent: () => {
+          this.setState({
+            autoScrolling: this.isScrolledDown()
+          });
+        }
+      };
+      this.textInputRef.current.addEventListener("scroll", scrollHandler);
+    });
+
+    _defineProperty(this, "onChangeHandler", (event, value) => {
+      var _onChange;
+
+      const {
+        onChange
+      } = this.props;
+      const newValue = (_onChange = onChange(event, this.limitValue(value))) !== null && _onChange !== void 0 ? _onChange : value;
+      const textAreaValue = this.limitValue(newValue);
+      this.setState({
+        currentValueLength: textAreaValue.length,
+        overflow: this.isOverflow(textAreaValue)
+      });
+      return textAreaValue;
+    });
+
+    const {
+      initialValue,
+      autoScroll
+    } = this.props;
+    this.state = {
+      currentValueLength: initialValue !== undefined ? this.limitValue(initialValue).length : 0,
+      autoScrolling: autoScroll,
+      overflow: initialValue ? this.isOverflow(initialValue) : false
+    };
+    this.textInputRef = /*#__PURE__*/React.createRef();
+  }
+
+  static getDerivedStateFromProps(nextProps, prevState) {
+    const {
+      value: nextValue,
+      maxCharQuantity,
+      blockMax
+    } = nextProps;
+    const {
+      currentValueLength: oldLength
+    } = prevState;
+
+    if (nextValue !== undefined) {
+      const isOverflow = nextValue.length > maxCharQuantity;
+      const nextLength = isOverflow && blockMax ? maxCharQuantity : nextValue.length;
+
+      if (nextLength !== oldLength) {
+        return {
+          currentValueLength: nextLength,
+          overflow: nextLength > maxCharQuantity && isOverflow
+        };
+      }
+    }
+
+    return null;
+  }
+
+  componentDidMount() {
+    const {
+      autoScroll
+    } = this.props;
+
+    if (autoScroll) {
+      this.addScrollListener();
+      this.scrollDown();
+    }
+  }
+
+  componentDidUpdate() {
+    const {
+      autoScrolling
+    } = this.state;
+
+    if (autoScrolling) {
+      this.scrollDown();
+    }
+  }
+
+  render() {
+    const _this$props = this.props,
+          {
+      classes,
+      className,
+      id,
+      labels,
+      maxCharQuantity,
+      rows,
+      initialValue,
+      value,
+      disabled,
+      resizable,
+      autoScroll,
+      onChange,
+      blockMax,
+      countCharProps,
+      isRequired
+    } = _this$props,
+          others = _objectWithoutProperties(_this$props, _excluded);
+
+    const {
+      currentValueLength,
+      overflow
+    } = this.state;
+    const val = initialValue;
+    return /*#__PURE__*/React.createElement("div", {
+      className: classes.root
+    }, /*#__PURE__*/React.createElement(Input, _extends({
+      classes: {
+        root: classes.container,
+        input: clsx(classes.input, resizable ? !disabled && classes.resize : classes.defaultWith),
+        inputRoot: classes.inputRoot,
+        inputRootDisabled: classes.inputRootDisabled,
+        inputRootFocused: classes.inputRootFocused,
+        infoText: clsx(maxCharQuantity != null && classes.infoText)
+      },
+      className: className,
+      id: id,
+      labels: labels,
+      initialValue: val && this.limitValue(val),
+      value: this.limitValue(value),
+      onChange: this.onChangeHandler,
+      multiline: true,
+      maxCharQuantity: maxCharQuantity,
+      rows: rows,
+      disabled: disabled,
+      showInfo: false,
+      validationIconVisible: false,
+      disableClear: true,
+      inputRef: this.textInputRef,
+      validationState: overflow && "invalid" || undefined,
+      "aria-invalid": overflow || undefined,
+      isRequired: isRequired
+    }, others)), maxCharQuantity && /*#__PURE__*/React.createElement("div", _extends({
+      className: classes.characterCounter,
+      "aria-live": "polite"
+    }, countCharProps), /*#__PURE__*/React.createElement(HvTypography, {
+      variant: "sText",
+      component: "span",
+      "aria-disabled": disabled,
+      className: clsx(disabled && classes.disabled, overflow && classes.invalid)
+    }, /*#__PURE__*/React.createElement(React.Fragment, null, labels.startCount, /*#__PURE__*/React.createElement("b", null, ` ${currentValueLength} `), `${labels.middleCount} ${maxCharQuantity} ${labels.endCount}`))));
+  }
+
+}
+
+process.env.NODE_ENV !== "production" ? HvTextArea.propTypes = {
+  /**
+   * Class names to be applied.
+   */
+  className: PropTypes.string,
+
+  /**
+   * Id to be applied to the root node.
+   */
+  id: PropTypes.string,
+
+  /**
+   *  Styles applied to the Drawer Paper element.
+   */
+  classes: PropTypes.PropTypes.shape({
+    /**
+     * Style applied on the text area input box.
+     */
+    input: PropTypes.string,
+
+    /**
+     * Style applied when resizable is `true`. Can be used to set max/min width.
+     */
+    resize: PropTypes.string,
+
+    /**
+     * Styles applied to input root which is comprising of everything but the labels and descriptions.
+     */
+    inputRoot: PropTypes.string,
+
+    /**
+     * Styles applied to input root when it is disabled.
+     */
+    inputRootDisabled: PropTypes.string,
+
+    /**
+     * Styles applied to input root when it is focused.
+     */
+    inputRootFocused: PropTypes.string,
+
+    /**
+     * Style applied defining the width when resizable is `false`.
+     */
+    defaultWith: PropTypes.string,
+
+    /**
+     * Style applied on the character counter.
+     */
+    characterCounter: PropTypes.string,
+
+    /**
+     * Style applied to the character counter when it is disabled.
+     */
+    disabled: PropTypes.string,
+
+    /**
+     * Style applied to the character counter when it the `maxCharQuantity` is reach.
+     */
+    invalid: PropTypes.string,
+
+    /**
+     * Style applied to the input container.
+     */
+    container: PropTypes.string,
+
+    /**
+     * Style applied container of the text area component.
+     */
+    root: PropTypes.string,
+
+    /**
+     * Styles applied to the max char count label.
+     */
+    infoText: PropTypes.string
+  }).isRequired,
+
+  /**
+   * An Object containing the various text associated with the input.
+   */
+  labels: PropTypes.shape({
+    /**
+     * The label on top of the input.
+     */
+    inputLabel: PropTypes.string,
+
+    /**
+     * The placeholder value of the input.
+     */
+    placeholder: PropTypes.string,
+
+    /**
+     * The default value of the info text below the input.
+     */
+    infoText: PropTypes.string,
+
+    /**
+     * The value when a validation fails.
+     */
+    warningText: PropTypes.string,
+
+    /**
+     * The message that appears when there are too many characters.
+     */
+    maxCharQuantityWarningText: PropTypes.string,
+
+    /**
+     * The message that appears when there are too few characters.
+     */
+    minCharQuantityWarningText: PropTypes.string,
+
+    /**
+     * The message that appears when the input is empty and required.
+     */
+    requiredWarningText: PropTypes.string,
+
+    /**
+     * Text before the current char counter.
+     */
+    startCount: PropTypes.string,
+
+    /**
+     * Text between the current char counter and max value.
+     */
+    middleCount: PropTypes.string,
+
+    /**
+     * Text after the max value.
+     */
+    endCount: PropTypes.string
+  }),
+
+  /**
+   * The maximum allowed length of the characters, if this value is null or undefined no check
+   * will be performed.
+   */
+  maxCharQuantity: PropTypes.number,
+
+  /**
+   * The number of rows of the text area
+   */
+  rows: PropTypes.number,
+
+  /**
+   * The input value to be set. If used it is the responsibility of the caller to maintain the state.
+   */
+  value: PropTypes.string,
+
+  /**
+   * The initial value of the input.
+   */
+  initialValue: PropTypes.string,
+
+  /**
+   * The function that will be executed onChange, allows modification of the input,
+   * it receives the value. If a new value should be presented it must returned it.
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * If ´true´ the text area is disabled.
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * If ´true´ the component is resizable.
+   */
+  resizable: PropTypes.bool,
+
+  /**
+   * Auto-scroll: automatically scroll to the end on value changes.
+   * Will stop if the user scrolls up and resume if scrolled to the bottom.
+   */
+  autoScroll: PropTypes.bool,
+
+  /**
+   * If true it isn't possible to pass the `maxCharQuantity`
+   */
+  blockMax: PropTypes.bool,
+
+  /**
+   * Props passed to the char count.
+   */
+  countCharProps: PropTypes.instanceOf(Object),
+
+  /**
+   * Indicates that user input is required on the form element.
+   */
+  isRequired: PropTypes.bool
+} : void 0;
+HvTextArea.defaultProps = {
+  className: "",
+  id: undefined,
+  rows: 1,
+  disabled: false,
+  value: undefined,
+  initialValue: undefined,
+  maxCharQuantity: undefined,
+  onChange: (event, value) => value,
+  autoScroll: false,
+  resizable: false,
+  blockMax: false,
+  countCharProps: {},
+  isRequired: false
+};
+export default withStyles(styles, {
+  name: "HvTextArea"
+})(withLabels(DEFAULT_LABELS)(HvTextArea));
+//# sourceMappingURL=TextArea.js.map

package/dist/modern/TextArea/TextArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.js","names":["React","PropTypes","isNil","clsx","withStyles","HvTypography","Input","styles","withLabels","DEFAULT_LABELS","startCount","middleCount","endCount","HvTextArea","Component","constructor","props","value","maxCharQuantity","length","blockMax","undefined","isOverflow","substring","el","textInputRef","current","scrollHeight","scrollTop","clientHeight","scrollHandler","handleEvent","setState","autoScrolling","isScrolledDown","addEventListener","event","onChange","newValue","limitValue","textAreaValue","currentValueLength","overflow","initialValue","autoScroll","state","createRef","getDerivedStateFromProps","nextProps","prevState","nextValue","oldLength","nextLength","componentDidMount","addScrollListener","scrollDown","componentDidUpdate","render","classes","className","id","labels","rows","disabled","resizable","countCharProps","isRequired","others","val","root","container","input","resize","defaultWith","inputRoot","inputRootDisabled","inputRootFocused","infoText","onChangeHandler","characterCounter","invalid","propTypes","string","shape","inputLabel","placeholder","warningText","maxCharQuantityWarningText","minCharQuantityWarningText","requiredWarningText","number","func","bool","instanceOf","Object","defaultProps","name"],"sources":["../../../src/TextArea/TextArea.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport isNil from \"lodash/isNil\";\nimport clsx from \"clsx\";\nimport { withStyles } from \"@material-ui/core\";\nimport HvTypography from \"../Typography\";\nimport Input from \"../Input\";\nimport styles from \"./styles\";\nimport withLabels from \"../withLabels\";\n\nconst DEFAULT_LABELS = {\n  startCount: \"\",\n  middleCount: \"/\",\n  endCount: \"\",\n};\n\n/**\n * A text area component wrapping the input box, it allows the input of paragraph of text.\n * alongside this it can provide a validation for the max character quantity\n */\nclass HvTextArea extends React.Component {\n  constructor(props) {\n    super(props);\n    const { initialValue, autoScroll } = this.props;\n\n    this.state = {\n      currentValueLength: initialValue !== undefined ? this.limitValue(initialValue).length : 0,\n      autoScrolling: autoScroll,\n      overflow: initialValue ? this.isOverflow(initialValue) : false,\n    };\n    this.textInputRef = React.createRef();\n  }\n\n  static getDerivedStateFromProps(nextProps, prevState) {\n    const { value: nextValue, maxCharQuantity, blockMax } = nextProps;\n    const { currentValueLength: oldLength } = prevState;\n\n    if (nextValue !== undefined) {\n      const isOverflow = nextValue.length > maxCharQuantity;\n\n      const nextLength = isOverflow && blockMax ? maxCharQuantity : nextValue.length;\n\n      if (nextLength !== oldLength) {\n        return {\n          currentValueLength: nextLength,\n          overflow: nextLength > maxCharQuantity && isOverflow,\n        };\n      }\n    }\n    return null;\n  }\n\n  componentDidMount() {\n    const { autoScroll } = this.props;\n    if (autoScroll) {\n      this.addScrollListener();\n      this.scrollDown();\n    }\n  }\n\n  componentDidUpdate() {\n    const { autoScrolling } = this.state;\n    if (autoScrolling) {\n      this.scrollDown();\n    }\n  }\n\n  isOverflow = (value) => {\n    const { maxCharQuantity } = this.props;\n    return isNil(maxCharQuantity) ? false : value.length > maxCharQuantity;\n  };\n\n  /**\n   * Limit the string to the maxCharQuantity length.\n   *\n   * @param value - string to evaluate\n   * @returns {string|*} - string according the limit\n   */\n  limitValue = (value) => {\n    const { maxCharQuantity, blockMax } = this.props;\n\n    if (value === undefined || !blockMax) return value;\n\n    return !this.isOverflow(value) ? value : value.substring(0, maxCharQuantity);\n  };\n\n  isScrolledDown = () => {\n    const el = this.textInputRef.current;\n    return el == null || el.scrollHeight - el.scrollTop === el.clientHeight;\n  };\n\n  scrollDown = () => {\n    const el = this.textInputRef.current;\n    if (el != null) {\n      el.scrollTop = el.scrollHeight - el.clientHeight;\n    }\n  };\n\n  addScrollListener = () => {\n    const scrollHandler = {\n      handleEvent: () => {\n        this.setState({ autoScrolling: this.isScrolledDown() });\n      },\n    };\n    this.textInputRef.current.addEventListener(\"scroll\", scrollHandler);\n  };\n\n  /**\n   * Updates the length of the string while is being inputted, also executes the user onChange\n   * allowing the customization of the input if required.\n   *\n   * @param {String} value - The value provided by the HvInput\n   */\n  onChangeHandler = (event, value) => {\n    const { onChange } = this.props;\n\n    const newValue = onChange(event, this.limitValue(value)) ?? value;\n\n    const textAreaValue = this.limitValue(newValue);\n\n    this.setState({\n      currentValueLength: textAreaValue.length,\n      overflow: this.isOverflow(textAreaValue),\n    });\n    return textAreaValue;\n  };\n\n  render() {\n    const {\n      classes,\n      className,\n      id,\n      labels,\n      maxCharQuantity,\n      rows,\n      initialValue,\n      value,\n      disabled,\n      resizable,\n      autoScroll,\n      onChange,\n      blockMax,\n      countCharProps,\n      isRequired,\n      ...others\n    } = this.props;\n\n    const { currentValueLength, overflow } = this.state;\n    const val = initialValue;\n\n    return (\n      <div className={classes.root}>\n        <Input\n          classes={{\n            root: classes.container,\n            input: clsx(classes.input, {\n              [classes.resize]: !disabled && resizable,\n              [classes.defaultWith]: !resizable,\n            }),\n            inputRoot: classes.inputRoot,\n            inputRootDisabled: classes.inputRootDisabled,\n            inputRootFocused: classes.inputRootFocused,\n            infoText: clsx({\n              [classes.infoText]: maxCharQuantity != null,\n            }),\n          }}\n          className={className}\n          id={id}\n          labels={labels}\n          initialValue={val && this.limitValue(val)}\n          value={this.limitValue(value)}\n          onChange={this.onChangeHandler}\n          multiline\n          maxCharQuantity={maxCharQuantity}\n          rows={rows}\n          disabled={disabled}\n          showInfo={false}\n          validationIconVisible={false}\n          disableClear\n          inputRef={this.textInputRef}\n          validationState={(overflow && \"invalid\") || undefined}\n          aria-invalid={overflow || undefined}\n          isRequired={isRequired}\n          {...others}\n        />\n        {maxCharQuantity && (\n          <div className={classes.characterCounter} aria-live=\"polite\" {...countCharProps}>\n            <HvTypography\n              variant=\"sText\"\n              component=\"span\"\n              aria-disabled={disabled}\n              className={clsx({\n                [classes.disabled]: disabled,\n                [classes.invalid]: overflow,\n              })}\n            >\n              <>\n                {labels.startCount}\n                <b>{` ${currentValueLength} `}</b>\n                {`${labels.middleCount} ${maxCharQuantity} ${labels.endCount}`}\n              </>\n            </HvTypography>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n\nHvTextArea.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   *  Styles applied to the Drawer Paper element.\n   */\n  classes: PropTypes.PropTypes.shape({\n    /**\n     * Style applied on the text area input box.\n     */\n    input: PropTypes.string,\n    /**\n     * Style applied when resizable is `true`. Can be used to set max/min width.\n     */\n    resize: PropTypes.string,\n    /**\n     * Styles applied to input root which is comprising of everything but the labels and descriptions.\n     */\n    inputRoot: PropTypes.string,\n    /**\n     * Styles applied to input root when it is disabled.\n     */\n    inputRootDisabled: PropTypes.string,\n    /**\n     * Styles applied to input root when it is focused.\n     */\n    inputRootFocused: PropTypes.string,\n    /**\n     * Style applied defining the width when resizable is `false`.\n     */\n    defaultWith: PropTypes.string,\n    /**\n     * Style applied on the character counter.\n     */\n    characterCounter: PropTypes.string,\n    /**\n     * Style applied to the character counter when it is disabled.\n     */\n    disabled: PropTypes.string,\n    /**\n     * Style applied to the character counter when it the `maxCharQuantity` is reach.\n     */\n    invalid: PropTypes.string,\n    /**\n     * Style applied to the input container.\n     */\n    container: PropTypes.string,\n    /**\n     * Style applied container of the text area component.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the max char count label.\n     */\n    infoText: PropTypes.string,\n  }).isRequired,\n  /**\n   * An Object containing the various text associated with the input.\n   */\n  labels: PropTypes.shape({\n    /**\n     * The label on top of the input.\n     */\n    inputLabel: PropTypes.string,\n    /**\n     * The placeholder value of the input.\n     */\n    placeholder: PropTypes.string,\n    /**\n     * The default value of the info text below the input.\n     */\n    infoText: PropTypes.string,\n    /**\n     * The value when a validation fails.\n     */\n    warningText: PropTypes.string,\n    /**\n     * The message that appears when there are too many characters.\n     */\n    maxCharQuantityWarningText: PropTypes.string,\n    /**\n     * The message that appears when there are too few characters.\n     */\n    minCharQuantityWarningText: PropTypes.string,\n    /**\n     * The message that appears when the input is empty and required.\n     */\n    requiredWarningText: PropTypes.string,\n    /**\n     * Text before the current char counter.\n     */\n    startCount: PropTypes.string,\n    /**\n     * Text between the current char counter and max value.\n     */\n    middleCount: PropTypes.string,\n    /**\n     * Text after the max value.\n     */\n    endCount: PropTypes.string,\n  }),\n  /**\n   * The maximum allowed length of the characters, if this value is null or undefined no check\n   * will be performed.\n   */\n  maxCharQuantity: PropTypes.number,\n  /**\n   * The number of rows of the text area\n   */\n  rows: PropTypes.number,\n  /**\n   * The input value to be set. If used it is the responsibility of the caller to maintain the state.\n   */\n  value: PropTypes.string,\n  /**\n   * The initial value of the input.\n   */\n  initialValue: PropTypes.string,\n  /**\n   * The function that will be executed onChange, allows modification of the input,\n   * it receives the value. If a new value should be presented it must returned it.\n   */\n  onChange: PropTypes.func,\n  /**\n   * If ´true´ the text area is disabled.\n   */\n  disabled: PropTypes.bool,\n  /**\n   * If ´true´ the component is resizable.\n   */\n  resizable: PropTypes.bool,\n  /**\n   * Auto-scroll: automatically scroll to the end on value changes.\n   * Will stop if the user scrolls up and resume if scrolled to the bottom.\n   */\n  autoScroll: PropTypes.bool,\n  /**\n   * If true it isn't possible to pass the `maxCharQuantity`\n   */\n  blockMax: PropTypes.bool,\n  /**\n   * Props passed to the char count.\n   */\n  countCharProps: PropTypes.instanceOf(Object),\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  isRequired: PropTypes.bool,\n};\n\nHvTextArea.defaultProps = {\n  className: \"\",\n  id: undefined,\n  rows: 1,\n  disabled: false,\n  value: undefined,\n  initialValue: undefined,\n  maxCharQuantity: undefined,\n  onChange: (event, value) => value,\n  autoScroll: false,\n  resizable: false,\n  blockMax: false,\n  countCharProps: {},\n  isRequired: false,\n};\n\nexport default withStyles(styles, { name: \"HvTextArea\" })(withLabels(DEFAULT_LABELS)(HvTextArea));\n"],"mappings":"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"}

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

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

package/dist/modern/TextArea/index.js

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

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

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

package/dist/modern/TextArea/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); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import { outlineStyles } from "../Focus/styles";
+
+const styles = theme => ({
+  root: {
+    display: "inline-block"
+  },
+  input: {
+    height: "auto",
+    padding: "5px 10px",
+    overflow: "auto",
+    marginLeft: "0px",
+    marginRight: "0px",
+    minHeight: "21px",
+    minWidth: "150px",
+    maxWidth: "610px"
+  },
+  resize: {
+    resize: "auto",
+    width: "100%"
+  },
+  defaultWith: {
+    width: "610px"
+  },
+  inputRoot: {
+    borderWidth: "1px",
+    "&:hover": {
+      borderWidth: "1px"
+    }
+  },
+  inputRootDisabled: {
+    background: theme.hv.palette.atmosphere.atmo2,
+    "&:hover": {
+      background: theme.hv.palette.atmosphere.atmo2
+    }
+  },
+  inputRootFocused: _objectSpread(_objectSpread({
+    borderWidth: "1px"
+  }, outlineStyles), {}, {
+    "&:hover": {
+      borderWidth: "1px"
+    }
+  }),
+  container: {},
+  characterCounter: {
+    textAlign: "right",
+    paddingTop: 8
+  },
+  disabled: _objectSpread({}, theme.hv.typography.infoText),
+  invalid: {
+    color: theme.hv.palette.semantic.sema4
+  },
+  infoText: {
+    float: "left"
+  }
+});
+
+export default styles;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":["outlineStyles","styles","theme","root","display","input","height","padding","overflow","marginLeft","marginRight","minHeight","minWidth","maxWidth","resize","width","defaultWith","inputRoot","borderWidth","inputRootDisabled","background","hv","palette","atmosphere","atmo2","inputRootFocused","container","characterCounter","textAlign","paddingTop","disabled","typography","infoText","invalid","color","semantic","sema4","float"],"sources":["../../../src/TextArea/styles.js"],"sourcesContent":["import { outlineStyles } from \"../Focus/styles\";\n\nconst styles = (theme) => ({\n  root: {\n    display: \"inline-block\",\n  },\n  input: {\n    height: \"auto\",\n    padding: \"5px 10px\",\n    overflow: \"auto\",\n    marginLeft: \"0px\",\n    marginRight: \"0px\",\n    minHeight: \"21px\",\n    minWidth: \"150px\",\n    maxWidth: \"610px\",\n  },\n  resize: {\n    resize: \"auto\",\n    width: \"100%\",\n  },\n  defaultWith: {\n    width: \"610px\",\n  },\n  inputRoot: {\n    borderWidth: \"1px\",\n    \"&:hover\": {\n      borderWidth: \"1px\",\n    },\n  },\n  inputRootDisabled: {\n    background: theme.hv.palette.atmosphere.atmo2,\n    \"&:hover\": {\n      background: theme.hv.palette.atmosphere.atmo2,\n    },\n  },\n  inputRootFocused: {\n    borderWidth: \"1px\",\n    ...outlineStyles,\n    \"&:hover\": {\n      borderWidth: \"1px\",\n    },\n  },\n  container: {},\n  characterCounter: {\n    textAlign: \"right\",\n    paddingTop: 8,\n  },\n  disabled: {\n    ...theme.hv.typography.infoText,\n  },\n  invalid: {\n    color: theme.hv.palette.semantic.sema4,\n  },\n  infoText: {\n    float: \"left\",\n  },\n});\n\nexport default styles;\n"],"mappings":";;;;;;AAAA,SAASA,aAAT,QAA8B,iBAA9B;;AAEA,MAAMC,MAAM,GAAIC,KAAD,KAAY;EACzBC,IAAI,EAAE;IACJC,OAAO,EAAE;EADL,CADmB;EAIzBC,KAAK,EAAE;IACLC,MAAM,EAAE,MADH;IAELC,OAAO,EAAE,UAFJ;IAGLC,QAAQ,EAAE,MAHL;IAILC,UAAU,EAAE,KAJP;IAKLC,WAAW,EAAE,KALR;IAMLC,SAAS,EAAE,MANN;IAOLC,QAAQ,EAAE,OAPL;IAQLC,QAAQ,EAAE;EARL,CAJkB;EAczBC,MAAM,EAAE;IACNA,MAAM,EAAE,MADF;IAENC,KAAK,EAAE;EAFD,CAdiB;EAkBzBC,WAAW,EAAE;IACXD,KAAK,EAAE;EADI,CAlBY;EAqBzBE,SAAS,EAAE;IACTC,WAAW,EAAE,KADJ;IAET,WAAW;MACTA,WAAW,EAAE;IADJ;EAFF,CArBc;EA2BzBC,iBAAiB,EAAE;IACjBC,UAAU,EAAElB,KAAK,CAACmB,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BC,KADvB;IAEjB,WAAW;MACTJ,UAAU,EAAElB,KAAK,CAACmB,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BC;IAD/B;EAFM,CA3BM;EAiCzBC,gBAAgB;IACdP,WAAW,EAAE;EADC,GAEXlB,aAFW;IAGd,WAAW;MACTkB,WAAW,EAAE;IADJ;EAHG,EAjCS;EAwCzBQ,SAAS,EAAE,EAxCc;EAyCzBC,gBAAgB,EAAE;IAChBC,SAAS,EAAE,OADK;IAEhBC,UAAU,EAAE;EAFI,CAzCO;EA6CzBC,QAAQ,oBACH5B,KAAK,CAACmB,EAAN,CAASU,UAAT,CAAoBC,QADjB,CA7CiB;EAgDzBC,OAAO,EAAE;IACPC,KAAK,EAAEhC,KAAK,CAACmB,EAAN,CAASC,OAAT,CAAiBa,QAAjB,CAA0BC;EAD1B,CAhDgB;EAmDzBJ,QAAQ,EAAE;IACRK,KAAK,EAAE;EADC;AAnDe,CAAZ,CAAf;;AAwDA,eAAepC,MAAf"}

package/dist/modern/ToggleButton/ToggleButton.d.ts

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { StandardProps } from "@material-ui/core";
+
+export type HvToggleButtonLabelsProp = {
+  /**
+   * Description for selected.
+   */
+  selectedTitle?: string;
+  /**
+   * Description for not selected.
+   */
+  notSelectedTitle?: string;
+};
+
+export interface HvToggleButtonProps
+  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, HvToggleButtonClassKey> {
+  /**
+   * Defines if it is a animated SVG.
+   */
+  animated?: boolean;
+  /**
+   * Denotes if component is active or not.
+   */
+  disabled?: boolean;
+  /**
+   * Defines if the button is selected.
+   */
+  selected?: boolean;
+  /**
+   * Labels.
+   */
+  labels?: HvToggleButtonLabelsProp;
+  /**
+   * Icon for when selected.
+   */
+  selectedIcon?: React.ComponentType<any>;
+  /**
+   * Icon for when not selected.
+   */
+  notSelectedIcon: React.ComponentType<any>;
+}
+
+export type HvToggleButtonClassKey = "root" | "icon" | "disabled";
+
+export default function HvToggleButton(props: HvToggleButtonProps): JSX.Element | null;