@webiny/ui 0.0.0-unstable.40876133bb → 0.0.0-unstable.496cf268ac

package/Input/Input.js

@@ -1,181 +1,118 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Input = void 0;
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
-
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-
-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 _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _react = _interopRequireDefault(require("react"));
-
+var _react = _interopRequireWildcard(require("react"));
 var _textfield = require("@rmwc/textfield");
-
 var _FormElementMessage = require("../FormElementMessage");
-
 var _pick = _interopRequireDefault(require("lodash/pick"));
-
 var _emotion = require("emotion");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _excluded = ["autoFocus", "value", "label", "description", "placeholder", "rows", "validation", "icon", "trailingIcon", "onEnter"];
-
 /**
  * fix label position when autofilled
  * @type {string}
  */
-var webinyInputStyles = /*#__PURE__*/(0, _emotion.css)(".mdc-text-field__input:-webkit-autofill + .mdc-floating-label{transform:translateY(-106%) scale(0.75);}}label:webinyInputStyles;");
+var webinyInputStyles = /*#__PURE__*/(0, _emotion.css)(".mdc-text-field__input:-webkit-autofill + .mdc-floating-label{transform:translateY(-106%) scale(0.75);}label:webinyInputStyles;");
+
 /**
  * Use Input component to store short string values, like first name, last name, e-mail etc.
  * Additionally, with rows prop, it can also be turned into a text area, to store longer strings.
  */
 
-var Input = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(Input, _React$Component);
-
-  var _super = (0, _createSuper2.default)(Input);
-
-  function Input() {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, Input);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+// IconProps directly passed to RMWC
+var rmwcProps = ["label", "type", "step", "disabled", "readOnly", "placeholder", "outlined", "onKeyDown", "onKeyPress", "onKeyUp", "onFocus", "rootProps", "fullwidth", "inputRef", "className", "maxLength", "characterCount"];
+var Input = function Input(props) {
+  var onChange = (0, _react.useCallback)(function (e) {
+    var onChange = props.onChange,
+      rawOnChange = props.rawOnChange;
+    if (!onChange) {
+      return;
     }
 
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onChange", function (e) {
-      var _this$props = _this.props,
-          onChange = _this$props.onChange,
-          rawOnChange = _this$props.rawOnChange;
-
-      if (!onChange) {
-        return;
-      } // @ts-ignore
-
-
-      onChange(rawOnChange ? e : e.target.value);
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onBlur", /*#__PURE__*/function () {
-      var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(e) {
-        var _this$props2, validate, onBlur;
-
-        return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                _this$props2 = _this.props, validate = _this$props2.validate, onBlur = _this$props2.onBlur;
-
-                if (!validate) {
-                  _context.next = 5;
-                  break;
-                }
-
-                // Since we are accessing event in an async operation, we need to persist it.
-                // See https://reactjs.org/docs/events.html#event-pooling.
-                e.persist();
-                _context.next = 5;
-                return validate();
-
-              case 5:
-                onBlur && onBlur(e);
-
-              case 6:
-              case "end":
-                return _context.stop();
+    // @ts-ignore
+    onChange(rawOnChange ? e : e.target.value);
+  }, [props.onChange, props.rawOnChange]);
+  var onBlur = (0, _react.useCallback)( /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(e) {
+      var validate, onBlur;
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            validate = props.validate, onBlur = props.onBlur;
+            if (!validate) {
+              _context.next = 5;
+              break;
             }
-          }
-        }, _callee);
-      }));
-
-      return function (_x) {
-        return _ref.apply(this, arguments);
-      };
-    }());
-    return _this;
+            // Since we are accessing event in an async operation, we need to persist it.
+            // See https://reactjs.org/docs/events.html#event-pooling.
+            e.persist();
+            _context.next = 5;
+            return validate();
+          case 5:
+            onBlur && onBlur(e);
+          case 6:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x) {
+      return _ref.apply(this, arguments);
+    };
+  }(), [props.validate, props.onBlur]);
+  var autoFocus = props.autoFocus,
+    value = props.value,
+    label = props.label,
+    description = props.description,
+    placeholder = props.placeholder,
+    rows = props.rows,
+    validation = props.validation,
+    icon = props.icon,
+    trailingIcon = props.trailingIcon,
+    onEnter = props.onEnter,
+    rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var inputValue = value;
+  if (value === null || typeof value === "undefined") {
+    inputValue = "";
   }
-
-  (0, _createClass2.default)(Input, [{
-    key: "render",
-    value: function render() {
-      var _this$props3 = this.props,
-          autoFocus = _this$props3.autoFocus,
-          value = _this$props3.value,
-          label = _this$props3.label,
-          description = _this$props3.description,
-          placeholder = _this$props3.placeholder,
-          rows = _this$props3.rows,
-          validation = _this$props3.validation,
-          icon = _this$props3.icon,
-          trailingIcon = _this$props3.trailingIcon,
-          onEnter = _this$props3.onEnter,
-          props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
-      var inputValue = value;
-
-      if (value === null || typeof value === "undefined") {
-        inputValue = "";
-      }
-
-      var _ref2 = validation || {},
-          validationIsValid = _ref2.isValid,
-          validationMessage = _ref2.message;
-
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_textfield.TextField, Object.assign({}, (0, _pick.default)(props, Input.rmwcProps), {
-        onKeyDown: function onKeyDown(e) {
-          if (typeof onEnter === "function" && e.key === "Enter") {
-            onEnter();
-          }
-
-          if (typeof props.onKeyDown === "function") {
-            for (var _len2 = arguments.length, rest = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-              rest[_key2 - 1] = arguments[_key2];
-            }
-
-            return props.onKeyDown.apply(props, [e].concat(rest));
-          }
-        },
-        autoFocus: autoFocus,
-        textarea: Boolean(rows),
-        value: inputValue,
-        onChange: this.onChange,
-        onBlur: this.onBlur,
-        label: label,
-        icon: icon,
-        placeholder: !label && placeholder || undefined,
-        trailingIcon: trailingIcon,
-        rows: this.props.rows,
-        className: (0, _classnames.default)("webiny-ui-input", webinyInputStyles),
-        "data-testid": props["data-testid"]
-      })), validationIsValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
-        error: true
-      }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description));
+  var _ref2 = validation || {},
+    validationIsValid = _ref2.isValid,
+    validationMessage = _ref2.message;
+  var inputOnKeyDown = (0, _react.useCallback)(function (e) {
+    if (typeof onEnter === "function" && e.key === "Enter") {
+      onEnter();
     }
-  }]);
-  return Input;
-}(_react.default.Component);
-
+    if (typeof rest.onKeyDown === "function") {
+      return rest.onKeyDown(e);
+    }
+  }, [rest.onKeyDown]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_textfield.TextField, Object.assign({}, (0, _pick.default)(rest, rmwcProps), {
+    onKeyDown: inputOnKeyDown,
+    autoFocus: autoFocus,
+    textarea: Boolean(rows),
+    value: inputValue,
+    onChange: onChange,
+    onBlur: onBlur,
+    label: label,
+    icon: icon,
+    placeholder: !label && placeholder || undefined,
+    trailingIcon: trailingIcon,
+    rows: rows,
+    className: (0, _classnames.default)("webiny-ui-input", webinyInputStyles),
+    "data-testid": props["data-testid"]
+  })), validationIsValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
+    error: true
+  }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description));
+};
 exports.Input = Input;
-(0, _defineProperty2.default)(Input, "defaultProps", {
+Input.defaultProps = {
   rawOnChange: false
-});
-(0, _defineProperty2.default)(Input, "rmwcProps", ["label", "type", "step", "disabled", "readOnly", "placeholder", "outlined", "onKeyDown", "onKeyPress", "onKeyUp", "onFocus", "rootProps", "fullwidth", "inputRef", "className", "maxLength", "characterCount"]);
+};

package/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"names":["webinyInputStyles","css","Input","e","props","onChange","rawOnChange","target","value","validate","onBlur","persist","autoFocus","label","description","placeholder","rows","validation","icon","trailingIcon","onEnter","inputValue","validationIsValid","isValid","validationMessage","message","pick","rmwcProps","key","onKeyDown","rest","Boolean","undefined","classNames","React","Component"],"sources":["Input.tsx"],"sourcesContent":["import React from \"react\";\nimport { TextField, TextFieldProps } from \"@rmwc/textfield\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport pick from \"lodash/pick\";\nimport { FormComponentProps } from \"~/types\";\nimport { ReactElement } from \"react\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\n\nexport type InputProps = FormComponentProps &\n    TextFieldProps & {\n        // Should this input be filled with browser values\n        autoComplete?: string;\n\n        // If true, will pass native `event` to the `onChange` callback\n        rawOnChange?: boolean;\n\n        // Auto-focus input\n        autoFocus?: boolean;\n\n        // Input placeholder\n        placeholder?: string;\n\n        // Description beneath the input.\n        description?: string | ReactElement;\n\n        // Converts input into a text area with given number of rows.\n        rows?: number;\n\n        maxLength?: number;\n\n        // A callback that is executed when input focus is lost.\n        onBlur?: (e: React.SyntheticEvent<HTMLInputElement>) => any;\n\n        onKeyDown?: (e: React.SyntheticEvent<HTMLInputElement>) => any;\n\n        // A callback that gets triggered when the user presses the \"Enter\" key.\n        onEnter?: () => any;\n\n        // CSS class name\n        className?: string;\n\n        // For testing purposes.\n        \"data-testid\"?: string;\n    };\n\n/**\n * fix label position when autofilled\n * @type {string}\n */\nconst webinyInputStyles = css`\n    .mdc-text-field__input:-webkit-autofill + .mdc-floating-label {\n            transform: translateY(-106%) scale(0.75);\n        }\n    }\n`;\n\n/**\n * Use Input component to store short string values, like first name, last name, e-mail etc.\n * Additionally, with rows prop, it can also be turned into a text area, to store longer strings.\n */\n\nexport class Input extends React.Component<InputProps> {\n    static defaultProps: InputProps = {\n        rawOnChange: false\n    };\n\n    // IconProps directly passed to RMWC\n    static rmwcProps = [\n        \"label\",\n        \"type\",\n        \"step\",\n        \"disabled\",\n        \"readOnly\",\n        \"placeholder\",\n        \"outlined\",\n        \"onKeyDown\",\n        \"onKeyPress\",\n        \"onKeyUp\",\n        \"onFocus\",\n        \"rootProps\",\n        \"fullwidth\",\n        \"inputRef\",\n        \"className\",\n        \"maxLength\",\n        \"characterCount\"\n    ];\n\n    onChange = (e: React.SyntheticEvent<HTMLInputElement>) => {\n        const { onChange, rawOnChange } = this.props;\n        if (!onChange) {\n            return;\n        }\n\n        // @ts-ignore\n        onChange(rawOnChange ? e : e.target.value);\n    };\n\n    onBlur = async (e: React.SyntheticEvent<HTMLInputElement>) => {\n        const { validate, onBlur } = this.props;\n        if (validate) {\n            // Since we are accessing event in an async operation, we need to persist it.\n            // See https://reactjs.org/docs/events.html#event-pooling.\n            e.persist();\n            await validate();\n        }\n        onBlur && onBlur(e);\n    };\n\n    public override render() {\n        const {\n            autoFocus,\n            value,\n            label,\n            description,\n            placeholder,\n            rows,\n            validation,\n            icon,\n            trailingIcon,\n            onEnter,\n            ...props\n        } = this.props;\n\n        let inputValue = value;\n        if (value === null || typeof value === \"undefined\") {\n            inputValue = \"\";\n        }\n\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n        return (\n            <React.Fragment>\n                <TextField\n                    {...pick(props, Input.rmwcProps)}\n                    onKeyDown={(e, ...rest) => {\n                        if (typeof onEnter === \"function\" && e.key === \"Enter\") {\n                            onEnter();\n                        }\n\n                        if (typeof props.onKeyDown === \"function\") {\n                            return props.onKeyDown(e, ...rest);\n                        }\n                    }}\n                    autoFocus={autoFocus}\n                    textarea={Boolean(rows)}\n                    value={inputValue}\n                    onChange={this.onChange}\n                    onBlur={this.onBlur}\n                    label={label}\n                    icon={icon}\n                    placeholder={(!label && placeholder) || undefined}\n                    trailingIcon={trailingIcon}\n                    rows={this.props.rows}\n                    className={classNames(\"webiny-ui-input\", webinyInputStyles)}\n                    data-testid={props[\"data-testid\"]}\n                />\n\n                {validationIsValid === false && (\n                    <FormElementMessage error>{validationMessage}</FormElementMessage>\n                )}\n                {validationIsValid !== false && description && (\n                    <FormElementMessage>{description}</FormElementMessage>\n                )}\n            </React.Fragment>\n        );\n    }\n}\n"],"mappings":"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"}
+{"version":3,"names":["webinyInputStyles","css","rmwcProps","Input","props","onChange","useCallback","e","rawOnChange","target","value","onBlur","validate","persist","autoFocus","label","description","placeholder","rows","validation","icon","trailingIcon","onEnter","rest","inputValue","validationIsValid","isValid","validationMessage","message","inputOnKeyDown","key","onKeyDown","pick","Boolean","undefined","classNames","defaultProps"],"sources":["Input.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { TextField, TextFieldProps } from \"@rmwc/textfield\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport pick from \"lodash/pick\";\nimport { FormComponentProps } from \"~/types\";\nimport { ReactElement } from \"react\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\n\nexport type InputProps<TValue = any> = FormComponentProps<TValue> &\n    TextFieldProps & {\n        // Should this input be filled with browser values\n        autoComplete?: string;\n\n        // If true, will pass native `event` to the `onChange` callback\n        rawOnChange?: boolean;\n\n        // Auto-focus input\n        autoFocus?: boolean;\n\n        // Input placeholder\n        placeholder?: string;\n\n        // Description beneath the input.\n        description?: string | ReactElement;\n\n        // Converts input into a text area with given number of rows.\n        rows?: number;\n\n        maxLength?: number;\n\n        // A callback that is executed when input focus is lost.\n        onBlur?: (e: React.SyntheticEvent<HTMLInputElement>) => any;\n\n        onKeyDown?: (e: React.SyntheticEvent<HTMLInputElement>) => any;\n\n        // A callback that gets triggered when the user presses the \"Enter\" key.\n        onEnter?: () => any;\n\n        // CSS class name\n        className?: string;\n\n        // For testing purposes.\n        \"data-testid\"?: string;\n    };\n\n/**\n * fix label position when autofilled\n * @type {string}\n */\nconst webinyInputStyles = css`\n    .mdc-text-field__input:-webkit-autofill + .mdc-floating-label {\n        transform: translateY(-106%) scale(0.75);\n    }\n`;\n\n/**\n * Use Input component to store short string values, like first name, last name, e-mail etc.\n * Additionally, with rows prop, it can also be turned into a text area, to store longer strings.\n */\n\n// IconProps directly passed to RMWC\nconst rmwcProps = [\n    \"label\",\n    \"type\",\n    \"step\",\n    \"disabled\",\n    \"readOnly\",\n    \"placeholder\",\n    \"outlined\",\n    \"onKeyDown\",\n    \"onKeyPress\",\n    \"onKeyUp\",\n    \"onFocus\",\n    \"rootProps\",\n    \"fullwidth\",\n    \"inputRef\",\n    \"className\",\n    \"maxLength\",\n    \"characterCount\"\n];\n\nexport const Input: React.FC<InputProps> = props => {\n    const onChange = useCallback(\n        (e: React.SyntheticEvent<HTMLInputElement>) => {\n            const { onChange, rawOnChange } = props;\n            if (!onChange) {\n                return;\n            }\n\n            // @ts-ignore\n            onChange(rawOnChange ? e : e.target.value);\n        },\n        [props.onChange, props.rawOnChange]\n    );\n\n    const onBlur = useCallback(\n        async (e: React.SyntheticEvent<HTMLInputElement>) => {\n            const { validate, onBlur } = props;\n            if (validate) {\n                // Since we are accessing event in an async operation, we need to persist it.\n                // See https://reactjs.org/docs/events.html#event-pooling.\n                e.persist();\n                await validate();\n            }\n            onBlur && onBlur(e);\n        },\n        [props.validate, props.onBlur]\n    );\n\n    const {\n        autoFocus,\n        value,\n        label,\n        description,\n        placeholder,\n        rows,\n        validation,\n        icon,\n        trailingIcon,\n        onEnter,\n        ...rest\n    } = props;\n\n    let inputValue = value;\n    if (value === null || typeof value === \"undefined\") {\n        inputValue = \"\";\n    }\n\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n    const inputOnKeyDown = useCallback(\n        e => {\n            if (typeof onEnter === \"function\" && e.key === \"Enter\") {\n                onEnter();\n            }\n\n            if (typeof rest.onKeyDown === \"function\") {\n                return rest.onKeyDown(e);\n            }\n        },\n        [rest.onKeyDown]\n    );\n\n    return (\n        <React.Fragment>\n            <TextField\n                {...pick(rest, rmwcProps)}\n                onKeyDown={inputOnKeyDown}\n                autoFocus={autoFocus}\n                textarea={Boolean(rows)}\n                value={inputValue}\n                onChange={onChange}\n                onBlur={onBlur}\n                label={label}\n                icon={icon}\n                placeholder={(!label && placeholder) || undefined}\n                trailingIcon={trailingIcon}\n                rows={rows}\n                className={classNames(\"webiny-ui-input\", webinyInputStyles)}\n                data-testid={props[\"data-testid\"]}\n            />\n\n            {validationIsValid === false && (\n                <FormElementMessage error>{validationMessage}</FormElementMessage>\n            )}\n            {validationIsValid !== false && description && (\n                <FormElementMessage>{description}</FormElementMessage>\n            )}\n        </React.Fragment>\n    );\n};\n\nInput.defaultProps = { rawOnChange: false };\n"],"mappings":"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"}

package/Input/Input.stories.js

@@ -1,31 +1,18 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _react2 = require("@storybook/react");
-
 var _Story = require("@webiny/storybook-utils/Story");
-
 var _addonKnobs = require("@storybook/addon-knobs");
-
 var _README = _interopRequireDefault(require("./../Input/README.md"));
-
 var _baselineAutorenew24px = require("./svg/baseline-autorenew-24px.svg");
-
 var _baselineCloud_done24px = require("./svg/baseline-cloud_done-24px.svg");
-
 var _baselineDelete24px = require("./svg/baseline-delete-24px.svg");
-
 var _baselineDone24px = require("./svg/baseline-done-24px.svg");
-
 var _form = require("@webiny/form");
-
 var _Input = require("./Input");
-
 var _validation = require("@webiny/validation");
-
 var story = (0, _react2.storiesOf)("Components/Input", module);
 story.addDecorator(_addonKnobs.withKnobs);
 story.add("usage", function () {

package/Input/Input.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","bindProps","name","validators","validation","create","disabled","boolean","readme","Bind","info","propTables","Input"],"sources":["Input.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n    Story,\n    StoryReadme,\n    StorySandboxCode,\n    StorySandbox,\n    StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport { withKnobs, boolean } from \"@storybook/addon-knobs\";\nimport readme from \"./../Input/README.md\";\nimport { ReactComponent as AutoRenewIcon } from \"./svg/baseline-autorenew-24px.svg\";\nimport { ReactComponent as CloudDoneIcon } from \"./svg/baseline-cloud_done-24px.svg\";\nimport { ReactComponent as BaselineDeleteIcon } from \"./svg/baseline-delete-24px.svg\";\nimport { ReactComponent as BaselineDoneIcon } from \"./svg/baseline-done-24px.svg\";\n\nimport { Form } from \"@webiny/form\";\nimport { Input } from \"./Input\";\nimport { validation } from \"@webiny/validation\";\n\nconst story = storiesOf(\"Components/Input\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"usage\",\n    () => {\n        const bindProps = {\n            name: \"name\",\n            validators: validation.create(\"required,minLength:3\")\n        };\n\n        const disabled = boolean(\"Disabled\", false);\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample title={\"Label, description and validation\"}>\n                        <Form>\n                            {({ Bind }) => (\n                                <Bind {...bindProps}>\n                                    <Input\n                                        label={\"Your name\"}\n                                        disabled={disabled}\n                                        description={\"This is your profile name\"}\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                    <Form>\n                        {({ Bind }) => (\n                            <Bind\n                                name=\"name\"\n                                validators={validation.create(\"required,minLength:3\")}>\n                                <Input label={\"Your name\"} disabled={${disabled}} description={\"This is your profile name\"}/>\n                            </Bind>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n                <StorySandbox>\n                    <StorySandboxExample title={\"With icon (box)\"}>\n                        <Form>\n                            {({ Bind }) => (\n                                <React.Fragment>\n                                    <Bind name=\"phone\">\n                                        <Input\n                                            icon={<AutoRenewIcon />}\n                                            label={\"Your phone number\"}\n                                            description={\"Please enter a real number\"}\n                                            disabled={disabled}\n                                        />\n                                    </Bind>\n                                    <Bind name=\"mobile\">\n                                        <Input\n                                            trailingIcon={<CloudDoneIcon />}\n                                            label={\"Your mobile number\"}\n                                            description={\"An SMS will be sent to this number\"}\n                                            disabled={disabled}\n                                        />\n                                    </Bind>\n                                </React.Fragment>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                    <Form>\n                        {({ Bind }) => (\n                            <React.Fragment>\n                                <Bind name=\"phone\">\n                                    <Input\n                                        icon={<AutoRenewIcon />}\n                                        label={\"Your phone number\"}\n                                        description={\"Please enter a real number\"}\n                                        disabled={${disabled}}\n                                    />\n                                </Bind>\n                                <Bind name=\"mobile\">\n                                    <Input\n                                        trailingIcon={<CloudDoneIcon />}\n                                        label={\"Your mobile number\"}\n                                        description={\"An SMS will be sent to this number\"}\n                                        disabled={${disabled}}\n                                    />\n                                </Bind>\n                            </React.Fragment>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n                <StorySandbox>\n                    <StorySandboxExample title={\"With icon (outlined)\"}>\n                        <Form>\n                            {({ Bind }) => (\n                                <React.Fragment>\n                                    <Bind name=\"phone\">\n                                        <Input\n                                            outlined\n                                            icon={<BaselineDeleteIcon />}\n                                            label={\"Your phone number\"}\n                                            description={\"Please enter a real number\"}\n                                            disabled={disabled}\n                                        />\n                                    </Bind>\n                                    <Bind name=\"mobile\">\n                                        <Input\n                                            outlined\n                                            trailingIcon={<BaselineDoneIcon />}\n                                            label={\"Your mobile number\"}\n                                            description={\"An SMS will be sent to this number\"}\n                                            disabled={disabled}\n                                        />\n                                    </Bind>\n                                </React.Fragment>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                    <Form>\n                        {({ Bind }) => (\n                            <React.Fragment>\n                                <Bind name=\"phone\">\n                                    <Input\n                                        outlined\n                                        icon={<BaselineDeleteIcon />}\n                                        label={\"Your phone number\"}\n                                        description={\"Please enter a real number\"}\n                                        disabled={${disabled}}\n                                    />\n                                </Bind>\n                                <Bind name=\"mobile\">\n                                    <Input\n                                        outlined\n                                        trailingIcon={<BaselineDoneIcon />}\n                                        label={\"Your mobile number\"}\n                                        description={\"An SMS will be sent to this number\"}\n                                        disabled={${disabled}}\n                                    />\n                                </Bind>\n                            </React.Fragment>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n                <StorySandbox>\n                    <StorySandboxExample title={\"Full width\"}>\n                        <Form>\n                            {({ Bind }) => (\n                                <Bind {...bindProps}>\n                                    <Input\n                                        placeholder={\"Your name\"}\n                                        fullwidth\n                                        disabled={disabled}\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                    <Form>\n                        {({ Bind }) => (\n                            <Bind\n                                name=\"name\"\n                                validators={validation.create(\"required,minLength:3\")}>\n                                <Input placeholder={\"Your name\"} fullwidth disabled={${disabled}}/>\n                            </Bind>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n                <StorySandbox>\n                    <StorySandboxExample title={\"Textarea\"}>\n                        <Form>\n                            {({ Bind }) => (\n                                <React.Fragment>\n                                    <Bind name=\"info\">\n                                        <Input\n                                            rows={6}\n                                            placeholder={\"Tell us something...\"}\n                                            description={\"Just a little bit about yourself.\"}\n                                            disabled={disabled}\n                                        />\n                                    </Bind>\n                                    <Bind name=\"description\">\n                                        <Input\n                                            fullwidth\n                                            rows={6}\n                                            placeholder={\"How's the weather today?\"}\n                                            description={\"We actually need to know.\"}\n                                            disabled={disabled}\n                                        />\n                                    </Bind>\n                                </React.Fragment>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                    <Form>\n                        {({ Bind }) => (\n                            <React.Fragment>\n                                <Bind name=\"info\">\n                                    <Input\n                                        rows={6}\n                                        placeholder={\"Tell us something...\"}\n                                        description={\"Just a little bit about yourself.\"}\n                                        disabled={${disabled}}\n                                    />\n                                </Bind>\n                                <Bind name=\"description\">\n                                    <Input\n                                        fullwidth\n                                        rows={6}\n                                        placeholder={\"How's the weather today?\"}\n                                        description={\"We actually need to know.\"}\n                                        disabled={${disabled}}\n                                    />\n                                </Bind>\n                            </React.Fragment>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Input] } }\n);\n"],"mappings":"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"}
+{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","bindProps","name","validators","validation","create","disabled","boolean","readme","Bind","info","propTables","Input"],"sources":["Input.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n    Story,\n    StoryReadme,\n    StorySandboxCode,\n    StorySandbox,\n    StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport { withKnobs, boolean } from \"@storybook/addon-knobs\";\nimport readme from \"./../Input/README.md\";\nimport { ReactComponent as AutoRenewIcon } from \"./svg/baseline-autorenew-24px.svg\";\nimport { ReactComponent as CloudDoneIcon } from \"./svg/baseline-cloud_done-24px.svg\";\nimport { ReactComponent as BaselineDeleteIcon } from \"./svg/baseline-delete-24px.svg\";\nimport { ReactComponent as BaselineDoneIcon } from \"./svg/baseline-done-24px.svg\";\n\nimport { Form } from \"@webiny/form\";\nimport { Input } from \"./Input\";\nimport { validation } from \"@webiny/validation\";\n\nconst story = storiesOf(\"Components/Input\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"usage\",\n    () => {\n        const bindProps = {\n            name: \"name\",\n            validators: validation.create(\"required,minLength:3\")\n        };\n\n        const disabled = boolean(\"Disabled\", false);\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample title={\"Label, description and validation\"}>\n                        <Form>\n                            {({ Bind }) => (\n                                <Bind {...bindProps}>\n                                    <Input\n                                        label={\"Your name\"}\n                                        disabled={disabled}\n                                        description={\"This is your profile name\"}\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                    <Form>\n                        {({ Bind }) => (\n                            <Bind\n                                name=\"name\"\n                                validators={validation.create(\"required,minLength:3\")}>\n                                <Input label={\"Your name\"} disabled={${disabled}} description={\"This is your profile name\"}/>\n                            </Bind>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n                <StorySandbox>\n                    <StorySandboxExample title={\"With icon (box)\"}>\n                        <Form>\n                            {({ Bind }) => (\n                                <React.Fragment>\n                                    <Bind name=\"phone\">\n                                        <Input\n                                            icon={<AutoRenewIcon />}\n                                            label={\"Your phone number\"}\n                                            description={\"Please enter a real number\"}\n                                            disabled={disabled}\n                                        />\n                                    </Bind>\n                                    <Bind name=\"mobile\">\n                                        <Input\n                                            trailingIcon={<CloudDoneIcon />}\n                                            label={\"Your mobile number\"}\n                                            description={\"An SMS will be sent to this number\"}\n                                            disabled={disabled}\n                                        />\n                                    </Bind>\n                                </React.Fragment>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                    <Form>\n                        {({ Bind }) => (\n                            <React.Fragment>\n                                <Bind name=\"phone\">\n                                    <Input\n                                        icon={<AutoRenewIcon />}\n                                        label={\"Your phone number\"}\n                                        description={\"Please enter a real number\"}\n                                        disabled={${disabled}}\n                                    />\n                                </Bind>\n                                <Bind name=\"mobile\">\n                                    <Input\n                                        trailingIcon={<CloudDoneIcon />}\n                                        label={\"Your mobile number\"}\n                                        description={\"An SMS will be sent to this number\"}\n                                        disabled={${disabled}}\n                                    />\n                                </Bind>\n                            </React.Fragment>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n                <StorySandbox>\n                    <StorySandboxExample title={\"With icon (outlined)\"}>\n                        <Form>\n                            {({ Bind }) => (\n                                <React.Fragment>\n                                    <Bind name=\"phone\">\n                                        <Input\n                                            outlined\n                                            icon={<BaselineDeleteIcon />}\n                                            label={\"Your phone number\"}\n                                            description={\"Please enter a real number\"}\n                                            disabled={disabled}\n                                        />\n                                    </Bind>\n                                    <Bind name=\"mobile\">\n                                        <Input\n                                            outlined\n                                            trailingIcon={<BaselineDoneIcon />}\n                                            label={\"Your mobile number\"}\n                                            description={\"An SMS will be sent to this number\"}\n                                            disabled={disabled}\n                                        />\n                                    </Bind>\n                                </React.Fragment>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                    <Form>\n                        {({ Bind }) => (\n                            <React.Fragment>\n                                <Bind name=\"phone\">\n                                    <Input\n                                        outlined\n                                        icon={<BaselineDeleteIcon />}\n                                        label={\"Your phone number\"}\n                                        description={\"Please enter a real number\"}\n                                        disabled={${disabled}}\n                                    />\n                                </Bind>\n                                <Bind name=\"mobile\">\n                                    <Input\n                                        outlined\n                                        trailingIcon={<BaselineDoneIcon />}\n                                        label={\"Your mobile number\"}\n                                        description={\"An SMS will be sent to this number\"}\n                                        disabled={${disabled}}\n                                    />\n                                </Bind>\n                            </React.Fragment>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n                <StorySandbox>\n                    <StorySandboxExample title={\"Full width\"}>\n                        <Form>\n                            {({ Bind }) => (\n                                <Bind {...bindProps}>\n                                    <Input\n                                        placeholder={\"Your name\"}\n                                        fullwidth\n                                        disabled={disabled}\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                    <Form>\n                        {({ Bind }) => (\n                            <Bind\n                                name=\"name\"\n                                validators={validation.create(\"required,minLength:3\")}>\n                                <Input placeholder={\"Your name\"} fullwidth disabled={${disabled}}/>\n                            </Bind>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n                <StorySandbox>\n                    <StorySandboxExample title={\"Textarea\"}>\n                        <Form>\n                            {({ Bind }) => (\n                                <React.Fragment>\n                                    <Bind name=\"info\">\n                                        <Input\n                                            rows={6}\n                                            placeholder={\"Tell us something...\"}\n                                            description={\"Just a little bit about yourself.\"}\n                                            disabled={disabled}\n                                        />\n                                    </Bind>\n                                    <Bind name=\"description\">\n                                        <Input\n                                            fullwidth\n                                            rows={6}\n                                            placeholder={\"How's the weather today?\"}\n                                            description={\"We actually need to know.\"}\n                                            disabled={disabled}\n                                        />\n                                    </Bind>\n                                </React.Fragment>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                    <Form>\n                        {({ Bind }) => (\n                            <React.Fragment>\n                                <Bind name=\"info\">\n                                    <Input\n                                        rows={6}\n                                        placeholder={\"Tell us something...\"}\n                                        description={\"Just a little bit about yourself.\"}\n                                        disabled={${disabled}}\n                                    />\n                                </Bind>\n                                <Bind name=\"description\">\n                                    <Input\n                                        fullwidth\n                                        rows={6}\n                                        placeholder={\"How's the weather today?\"}\n                                        description={\"We actually need to know.\"}\n                                        disabled={${disabled}}\n                                    />\n                                </Bind>\n                            </React.Fragment>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Input] } }\n);\n"],"mappings":"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"}

package/Input/__tests__/Input.test.js

@@ -1,31 +1,18 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-
 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 _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _index = require("../index");
-
 require("jest-dom/extend-expect");
-
 var _react2 = require("@testing-library/react");
-
 afterEach(_react2.cleanup);
-
 function setup() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var renderArg = {
@@ -40,21 +27,15 @@ function setup() {
   var onChange = props.onChange ? props.onChange : function () {
     return void 0;
   };
-
   var Test = /*#__PURE__*/function (_React$Component) {
     (0, _inherits2.default)(Test, _React$Component);
-
     var _super = (0, _createSuper2.default)(Test);
-
     function Test() {
       var _this;
-
       (0, _classCallCheck2.default)(this, Test);
-
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
         args[_key] = arguments[_key];
       }
-
       _this = _super.call.apply(_super, [this].concat(args));
       (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
         value: "init-value"
@@ -66,7 +47,6 @@ function setup() {
       });
       return _this;
     }
-
     (0, _createClass2.default)(Test, [{
       key: "render",
       value: function render() {
@@ -78,12 +58,12 @@ function setup() {
     }]);
     return Test;
   }(_react.default.Component);
-
   var utils = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(Test, null));
   return (0, _objectSpread2.default)({
     renderArg: renderArg
   }, utils);
 }
+
 /**
  * This return a function that will call all the given functions with
  * the arguments with which it's called. It does a null-check before
@@ -91,36 +71,30 @@ function setup() {
  * @param {...Function} fns the functions to call
  * @return {Function} the function that calls all the functions
  */
-
-
 function callAll() {
   for (var _len2 = arguments.length, fns = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
     fns[_key2] = arguments[_key2];
   }
-
   return function () {
     for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
       args[_key3] = arguments[_key3];
     }
-
     fns.forEach(function (fn) {
       fn && fn.apply(void 0, args);
     });
   };
 }
-
 describe("Input tests", function () {
   test("passes expected props to render prop", function () {
     var _setup = setup(),
-        renderArg = _setup.renderArg; // @ts-ignore
-
+      renderArg = _setup.renderArg;
 
+    // @ts-ignore
     expect(renderArg).toContainKeys(["value", "validation", "onChange", "onBlur"]);
   });
   test("updates value via onChange", function () {
     var _setup2 = setup(),
-        renderArg = _setup2.renderArg;
-
+      renderArg = _setup2.renderArg;
     expect(renderArg.value).toBe("init-value");
     renderArg.onChange("new-value");
     expect(renderArg.value).toBe("new-value");

package/Input/__tests__/Input.test.js.map

@@ -1 +1 @@
-{"version":3,"names":["afterEach","cleanup","setup","props","renderArg","onChange","_","value","renderProp","jest","fn","controllerArg","Object","assign","Test","setState","state","callAll","React","Component","utils","render","fns","args","forEach","describe","test","expect","toContainKeys","toBe"],"sources":["Input.test.tsx"],"sourcesContent":["import React from \"react\";\nimport { Input } from \"../index\";\nimport \"jest-dom/extend-expect\";\nimport { render, cleanup } from \"@testing-library/react\";\n\nafterEach(cleanup);\n\ninterface SetupProps {\n    onChange?: () => void;\n}\nfunction setup(props: SetupProps = {}) {\n    const renderArg = {\n        // eslint-disable-next-line\n        onChange: (_: string) => {},\n        value: null\n    };\n    const renderProp = jest.fn(controllerArg => {\n        Object.assign(renderArg, controllerArg);\n        return null;\n    });\n\n    const onChange = props.onChange\n        ? props.onChange\n        : () => {\n              return void 0;\n          };\n\n    class Test extends React.Component {\n        public override state = { value: \"init-value\" };\n\n        onChange = (value: string) => {\n            this.setState({ value });\n        };\n\n        public override render() {\n            return (\n                <Input\n                    {...props}\n                    value={this.state.value}\n                    onChange={callAll(onChange, this.onChange)}\n                >\n                    {renderProp}\n                </Input>\n            );\n        }\n    }\n\n    const utils = render(<Test />);\n\n    return { renderArg, ...utils };\n}\n\n/**\n * This return a function that will call all the given functions with\n * the arguments with which it's called. It does a null-check before\n * attempting to call the functions and can take any number of functions.\n * @param {...Function} fns the functions to call\n * @return {Function} the function that calls all the functions\n */\nfunction callAll(...fns: Function[]) {\n    return (...args: any) => {\n        fns.forEach(fn => {\n            fn && fn(...args);\n        });\n    };\n}\n\ndescribe(\"Input tests\", () => {\n    test(\"passes expected props to render prop\", () => {\n        const { renderArg } = setup();\n\n        // @ts-ignore\n        expect(renderArg).toContainKeys([\"value\", \"validation\", \"onChange\", \"onBlur\"]);\n    });\n\n    test(\"updates value via onChange\", () => {\n        const { renderArg } = setup();\n        expect(renderArg.value).toBe(\"init-value\");\n        renderArg.onChange(\"new-value\");\n        expect(renderArg.value).toBe(\"new-value\");\n        renderArg.onChange(\"third-value\");\n        expect(renderArg.value).toBe(\"third-value\");\n    });\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEAA,SAAS,CAACC,eAAD,CAAT;;AAKA,SAASC,KAAT,GAAuC;EAAA,IAAxBC,KAAwB,uEAAJ,EAAI;EACnC,IAAMC,SAAS,GAAG;IACd;IACAC,QAAQ,EAAE,kBAACC,CAAD,EAAe,CAAE,CAFb;IAGdC,KAAK,EAAE;EAHO,CAAlB;EAKA,IAAMC,UAAU,GAAGC,IAAI,CAACC,EAAL,CAAQ,UAAAC,aAAa,EAAI;IACxCC,MAAM,CAACC,MAAP,CAAcT,SAAd,EAAyBO,aAAzB;IACA,OAAO,IAAP;EACH,CAHkB,CAAnB;EAKA,IAAMN,QAAQ,GAAGF,KAAK,CAACE,QAAN,GACXF,KAAK,CAACE,QADK,GAEX,YAAM;IACF,OAAO,KAAK,CAAZ;EACH,CAJP;;EAXmC,IAiB7BS,IAjB6B;IAAA;;IAAA;;IAAA;MAAA;;MAAA;;MAAA;QAAA;MAAA;;MAAA;MAAA,oFAkBP;QAAEP,KAAK,EAAE;MAAT,CAlBO;MAAA,uFAoBpB,UAACA,KAAD,EAAmB;QAC1B,MAAKQ,QAAL,CAAc;UAAER,KAAK,EAALA;QAAF,CAAd;MACH,CAtB8B;MAAA;IAAA;;IAAA;MAAA;MAAA,OAwB/B,kBAAyB;QACrB,oBACI,6BAAC,YAAD,oBACQJ,KADR;UAEI,KAAK,EAAE,KAAKa,KAAL,CAAWT,KAFtB;UAGI,QAAQ,EAAEU,OAAO,CAACZ,QAAD,EAAW,KAAKA,QAAhB;QAHrB,IAKKG,UALL,CADJ;MASH;IAlC8B;IAAA;EAAA,EAiBhBU,cAAA,CAAMC,SAjBU;;EAqCnC,IAAMC,KAAK,GAAG,IAAAC,cAAA,gBAAO,6BAAC,IAAD,OAAP,CAAd;EAEA;IAASjB,SAAS,EAATA;EAAT,GAAuBgB,KAAvB;AACH;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,SAASH,OAAT,GAAqC;EAAA,mCAAjBK,GAAiB;IAAjBA,GAAiB;EAAA;;EACjC,OAAO,YAAkB;IAAA,mCAAdC,IAAc;MAAdA,IAAc;IAAA;;IACrBD,GAAG,CAACE,OAAJ,CAAY,UAAAd,EAAE,EAAI;MACdA,EAAE,IAAIA,EAAE,MAAF,SAAMa,IAAN,CAAN;IACH,CAFD;EAGH,CAJD;AAKH;;AAEDE,QAAQ,CAAC,aAAD,EAAgB,YAAM;EAC1BC,IAAI,CAAC,sCAAD,EAAyC,YAAM;IAC/C,aAAsBxB,KAAK,EAA3B;IAAA,IAAQE,SAAR,UAAQA,SAAR,CAD+C,CAG/C;;;IACAuB,MAAM,CAACvB,SAAD,CAAN,CAAkBwB,aAAlB,CAAgC,CAAC,OAAD,EAAU,YAAV,EAAwB,UAAxB,EAAoC,QAApC,CAAhC;EACH,CALG,CAAJ;EAOAF,IAAI,CAAC,4BAAD,EAA+B,YAAM;IACrC,cAAsBxB,KAAK,EAA3B;IAAA,IAAQE,SAAR,WAAQA,SAAR;;IACAuB,MAAM,CAACvB,SAAS,CAACG,KAAX,CAAN,CAAwBsB,IAAxB,CAA6B,YAA7B;IACAzB,SAAS,CAACC,QAAV,CAAmB,WAAnB;IACAsB,MAAM,CAACvB,SAAS,CAACG,KAAX,CAAN,CAAwBsB,IAAxB,CAA6B,WAA7B;IACAzB,SAAS,CAACC,QAAV,CAAmB,aAAnB;IACAsB,MAAM,CAACvB,SAAS,CAACG,KAAX,CAAN,CAAwBsB,IAAxB,CAA6B,aAA7B;EACH,CAPG,CAAJ;AAQH,CAhBO,CAAR"}
+{"version":3,"names":["afterEach","cleanup","setup","props","renderArg","onChange","_","value","renderProp","jest","fn","controllerArg","Object","assign","Test","setState","state","callAll","React","Component","utils","render","fns","args","forEach","describe","test","expect","toContainKeys","toBe"],"sources":["Input.test.tsx"],"sourcesContent":["import React from \"react\";\nimport { Input } from \"../index\";\nimport \"jest-dom/extend-expect\";\nimport { render, cleanup } from \"@testing-library/react\";\n\nafterEach(cleanup);\n\ninterface SetupProps {\n    onChange?: () => void;\n}\nfunction setup(props: SetupProps = {}) {\n    const renderArg = {\n        // eslint-disable-next-line\n        onChange: (_: string) => {},\n        value: null\n    };\n    const renderProp = jest.fn(controllerArg => {\n        Object.assign(renderArg, controllerArg);\n        return null;\n    });\n\n    const onChange = props.onChange\n        ? props.onChange\n        : () => {\n              return void 0;\n          };\n\n    class Test extends React.Component {\n        public override state = { value: \"init-value\" };\n\n        onChange = (value: string) => {\n            this.setState({ value });\n        };\n\n        public override render() {\n            return (\n                <Input\n                    {...props}\n                    value={this.state.value}\n                    onChange={callAll(onChange, this.onChange)}\n                >\n                    {renderProp}\n                </Input>\n            );\n        }\n    }\n\n    const utils = render(<Test />);\n\n    return { renderArg, ...utils };\n}\n\n/**\n * This return a function that will call all the given functions with\n * the arguments with which it's called. It does a null-check before\n * attempting to call the functions and can take any number of functions.\n * @param {...Function} fns the functions to call\n * @return {Function} the function that calls all the functions\n */\nfunction callAll(...fns: Function[]) {\n    return (...args: any) => {\n        fns.forEach(fn => {\n            fn && fn(...args);\n        });\n    };\n}\n\ndescribe(\"Input tests\", () => {\n    test(\"passes expected props to render prop\", () => {\n        const { renderArg } = setup();\n\n        // @ts-ignore\n        expect(renderArg).toContainKeys([\"value\", \"validation\", \"onChange\", \"onBlur\"]);\n    });\n\n    test(\"updates value via onChange\", () => {\n        const { renderArg } = setup();\n        expect(renderArg.value).toBe(\"init-value\");\n        renderArg.onChange(\"new-value\");\n        expect(renderArg.value).toBe(\"new-value\");\n        renderArg.onChange(\"third-value\");\n        expect(renderArg.value).toBe(\"third-value\");\n    });\n});\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AAEAA,SAAS,CAACC,eAAO,CAAC;AAKlB,SAASC,KAAK,GAAyB;EAAA,IAAxBC,KAAiB,uEAAG,CAAC,CAAC;EACjC,IAAMC,SAAS,GAAG;IACd;IACAC,QAAQ,EAAE,kBAACC,CAAS,EAAK,CAAC,CAAC;IAC3BC,KAAK,EAAE;EACX,CAAC;EACD,IAAMC,UAAU,GAAGC,IAAI,CAACC,EAAE,CAAC,UAAAC,aAAa,EAAI;IACxCC,MAAM,CAACC,MAAM,CAACT,SAAS,EAAEO,aAAa,CAAC;IACvC,OAAO,IAAI;EACf,CAAC,CAAC;EAEF,IAAMN,QAAQ,GAAGF,KAAK,CAACE,QAAQ,GACzBF,KAAK,CAACE,QAAQ,GACd,YAAM;IACF,OAAO,KAAK,CAAC;EACjB,CAAC;EAAC,IAEFS,IAAI;IAAA;IAAA;IAAA;MAAA;MAAA;MAAA;QAAA;MAAA;MAAA;MAAA,oFACkB;QAAEP,KAAK,EAAE;MAAa,CAAC;MAAA,uFAEpC,UAACA,KAAa,EAAK;QAC1B,MAAKQ,QAAQ,CAAC;UAAER,KAAK,EAALA;QAAM,CAAC,CAAC;MAC5B,CAAC;MAAA;IAAA;IAAA;MAAA;MAAA,OAED,kBAAyB;QACrB,oBACI,6BAAC,YAAK,oBACEJ,KAAK;UACT,KAAK,EAAE,IAAI,CAACa,KAAK,CAACT,KAAM;UACxB,QAAQ,EAAEU,OAAO,CAACZ,QAAQ,EAAE,IAAI,CAACA,QAAQ;QAAE,IAE1CG,UAAU,CACP;MAEhB;IAAC;IAAA;EAAA,EAjBcU,cAAK,CAACC,SAAS;EAoBlC,IAAMC,KAAK,GAAG,IAAAC,cAAM,gBAAC,6BAAC,IAAI,OAAG,CAAC;EAE9B;IAASjB,SAAS,EAATA;EAAS,GAAKgB,KAAK;AAChC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASH,OAAO,GAAqB;EAAA,mCAAjBK,GAAG;IAAHA,GAAG;EAAA;EACnB,OAAO,YAAkB;IAAA,mCAAdC,IAAI;MAAJA,IAAI;IAAA;IACXD,GAAG,CAACE,OAAO,CAAC,UAAAd,EAAE,EAAI;MACdA,EAAE,IAAIA,EAAE,eAAIa,IAAI,CAAC;IACrB,CAAC,CAAC;EACN,CAAC;AACL;AAEAE,QAAQ,CAAC,aAAa,EAAE,YAAM;EAC1BC,IAAI,CAAC,sCAAsC,EAAE,YAAM;IAC/C,aAAsBxB,KAAK,EAAE;MAArBE,SAAS,UAATA,SAAS;;IAEjB;IACAuB,MAAM,CAACvB,SAAS,CAAC,CAACwB,aAAa,CAAC,CAAC,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC;EAClF,CAAC,CAAC;EAEFF,IAAI,CAAC,4BAA4B,EAAE,YAAM;IACrC,cAAsBxB,KAAK,EAAE;MAArBE,SAAS,WAATA,SAAS;IACjBuB,MAAM,CAACvB,SAAS,CAACG,KAAK,CAAC,CAACsB,IAAI,CAAC,YAAY,CAAC;IAC1CzB,SAAS,CAACC,QAAQ,CAAC,WAAW,CAAC;IAC/BsB,MAAM,CAACvB,SAAS,CAACG,KAAK,CAAC,CAACsB,IAAI,CAAC,WAAW,CAAC;IACzCzB,SAAS,CAACC,QAAQ,CAAC,aAAa,CAAC;IACjCsB,MAAM,CAACvB,SAAS,CAACG,KAAK,CAAC,CAACsB,IAAI,CAAC,aAAa,CAAC;EAC/C,CAAC,CAAC;AACN,CAAC,CAAC"}

package/Input/index.js

@@ -3,9 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 var _Input = require("./Input");
-
 Object.keys(_Input).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _Input[key]) return;

package/Input/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Input\";\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Input\";\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/List/CollapsibleList/CollapsibleList.stories.js

@@ -1,21 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _react2 = require("@storybook/react");
-
 var _Story = require("@webiny/storybook-utils/Story");
-
 var _README = _interopRequireDefault(require("./README.md"));
-
 var _addonKnobs = require("@storybook/addon-knobs");
-
 var _index = require("./index");
-
 var _List = require("./../List");
-
 var story = (0, _react2.storiesOf)("Components/List", module);
 story.addDecorator(_addonKnobs.withKnobs);
 story.add("collapsible list", function () {