@webiny/ui 5.34.8 → 5.35.0-beta.1

package/Input/Input.js

@@ -1,124 +1,99 @@
 "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 _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;");
+
 /**
  * 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.
  */
-// IconProps directly passed to RMWC
 
+// 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;
-
+      rawOnChange = props.rawOnChange;
     if (!onChange) {
       return;
-    } // @ts-ignore
-
+    }
 
+    // @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;
-              }
-
-              // 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();
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            validate = props.validate, onBlur = props.onBlur;
+            if (!validate) {
               _context.next = 5;
-              return validate();
-
-            case 5:
-              onBlur && onBlur(e);
-
-            case 6:
-            case "end":
-              return _context.stop();
-          }
+              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();
         }
       }, _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);
+    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 = "";
   }
-
   var _ref2 = validation || {},
-      validationIsValid = _ref2.isValid,
-      validationMessage = _ref2.message;
-
+    validationIsValid = _ref2.isValid,
+    validationMessage = _ref2.message;
   var inputOnKeyDown = (0, _react.useCallback)(function (e) {
     if (typeof onEnter === "function" && e.key === "Enter") {
       onEnter();
     }
-
     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,
@@ -137,7 +112,6 @@ var Input = function Input(props) {
     error: true
   }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description));
 };
-
 exports.Input = Input;
 Input.defaultProps = {
   rawOnChange: false

package/Input/Input.js.map

@@ -1 +1 @@
-{"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(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\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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"}
+{"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":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AAGA;AACA;AAAoC;AAuCpC;AACA;AACA;AACA;AACA,IAAMA,iBAAiB,oBAAGC,YAAG,oIAI5B;;AAED;AACA;AACA;AACA;;AAEA;AACA,IAAMC,SAAS,GAAG,CACd,OAAO,EACP,MAAM,EACN,MAAM,EACN,UAAU,EACV,UAAU,EACV,aAAa,EACb,UAAU,EACV,WAAW,EACX,YAAY,EACZ,SAAS,EACT,SAAS,EACT,WAAW,EACX,WAAW,EACX,UAAU,EACV,WAAW,EACX,WAAW,EACX,gBAAgB,CACnB;AAEM,IAAMC,KAA2B,GAAG,SAA9BA,KAA2B,CAAGC,KAAK,EAAI;EAChD,IAAMC,QAAQ,GAAG,IAAAC,kBAAW,EACxB,UAACC,CAAyC,EAAK;IAC3C,IAAQF,QAAQ,GAAkBD,KAAK,CAA/BC,QAAQ;MAAEG,WAAW,GAAKJ,KAAK,CAArBI,WAAW;IAC7B,IAAI,CAACH,QAAQ,EAAE;MACX;IACJ;;IAEA;IACAA,QAAQ,CAACG,WAAW,GAAGD,CAAC,GAAGA,CAAC,CAACE,MAAM,CAACC,KAAK,CAAC;EAC9C,CAAC,EACD,CAACN,KAAK,CAACC,QAAQ,EAAED,KAAK,CAACI,WAAW,CAAC,CACtC;EAED,IAAMG,MAAM,GAAG,IAAAL,kBAAW;IAAA,kGACtB,iBAAOC,CAAyC;MAAA;MAAA;QAAA;UAAA;YACpCK,QAAQ,GAAaR,KAAK,CAA1BQ,QAAQ,EAAED,MAAM,GAAKP,KAAK,CAAhBO,MAAM;YAAA,KACpBC,QAAQ;cAAA;cAAA;YAAA;YACR;YACA;YACAL,CAAC,CAACM,OAAO,EAAE;YAAC;YAAA,OACND,QAAQ,EAAE;UAAA;YAEpBD,MAAM,IAAIA,MAAM,CAACJ,CAAC,CAAC;UAAC;UAAA;YAAA;QAAA;MAAA;IAAA,CACvB;IAAA;MAAA;IAAA;EAAA,KACD,CAACH,KAAK,CAACQ,QAAQ,EAAER,KAAK,CAACO,MAAM,CAAC,CACjC;EAED,IACIG,SAAS,GAWTV,KAAK,CAXLU,SAAS;IACTJ,KAAK,GAULN,KAAK,CAVLM,KAAK;IACLK,KAAK,GASLX,KAAK,CATLW,KAAK;IACLC,WAAW,GAQXZ,KAAK,CARLY,WAAW;IACXC,WAAW,GAOXb,KAAK,CAPLa,WAAW;IACXC,IAAI,GAMJd,KAAK,CANLc,IAAI;IACJC,UAAU,GAKVf,KAAK,CALLe,UAAU;IACVC,IAAI,GAIJhB,KAAK,CAJLgB,IAAI;IACJC,YAAY,GAGZjB,KAAK,CAHLiB,YAAY;IACZC,OAAO,GAEPlB,KAAK,CAFLkB,OAAO;IACJC,IAAI,0CACPnB,KAAK;EAET,IAAIoB,UAAU,GAAGd,KAAK;EACtB,IAAIA,KAAK,KAAK,IAAI,IAAI,OAAOA,KAAK,KAAK,WAAW,EAAE;IAChDc,UAAU,GAAG,EAAE;EACnB;EAEA,YAAmEL,UAAU,IAAI,CAAC,CAAC;IAAlEM,iBAAiB,SAA1BC,OAAO;IAA8BC,iBAAiB,SAA1BC,OAAO;EAE3C,IAAMC,cAAc,GAAG,IAAAvB,kBAAW,EAC9B,UAAAC,CAAC,EAAI;IACD,IAAI,OAAOe,OAAO,KAAK,UAAU,IAAIf,CAAC,CAACuB,GAAG,KAAK,OAAO,EAAE;MACpDR,OAAO,EAAE;IACb;IAEA,IAAI,OAAOC,IAAI,CAACQ,SAAS,KAAK,UAAU,EAAE;MACtC,OAAOR,IAAI,CAACQ,SAAS,CAACxB,CAAC,CAAC;IAC5B;EACJ,CAAC,EACD,CAACgB,IAAI,CAACQ,SAAS,CAAC,CACnB;EAED,oBACI,6BAAC,cAAK,CAAC,QAAQ,qBACX,6BAAC,oBAAS,oBACF,IAAAC,aAAI,EAACT,IAAI,EAAErB,SAAS,CAAC;IACzB,SAAS,EAAE2B,cAAe;IAC1B,SAAS,EAAEf,SAAU;IACrB,QAAQ,EAAEmB,OAAO,CAACf,IAAI,CAAE;IACxB,KAAK,EAAEM,UAAW;IAClB,QAAQ,EAAEnB,QAAS;IACnB,MAAM,EAAEM,MAAO;IACf,KAAK,EAAEI,KAAM;IACb,IAAI,EAAEK,IAAK;IACX,WAAW,EAAG,CAACL,KAAK,IAAIE,WAAW,IAAKiB,SAAU;IAClD,YAAY,EAAEb,YAAa;IAC3B,IAAI,EAAEH,IAAK;IACX,SAAS,EAAE,IAAAiB,mBAAU,EAAC,iBAAiB,EAAEnC,iBAAiB,CAAE;IAC5D,eAAaI,KAAK,CAAC,aAAa;EAAE,GACpC,EAEDqB,iBAAiB,KAAK,KAAK,iBACxB,6BAAC,sCAAkB;IAAC,KAAK;EAAA,GAAEE,iBAAiB,CAC/C,EACAF,iBAAiB,KAAK,KAAK,IAAIT,WAAW,iBACvC,6BAAC,sCAAkB,QAAEA,WAAW,CACnC,CACY;AAEzB,CAAC;AAAC;AAEFb,KAAK,CAACiC,YAAY,GAAG;EAAE5B,WAAW,EAAE;AAAM,CAAC"}

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 () {

package/List/CollapsibleList/CollapsibleList.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","readme","info","propTables","CollapsibleList","SimpleListItem"],"sources":["CollapsibleList.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 readme from \"./README.md\";\nimport { withKnobs } from \"@storybook/addon-knobs\";\n\nimport { CollapsibleList } from \"./index\";\nimport { SimpleListItem } from \"./../List\";\n\nconst story = storiesOf(\"Components/List\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"collapsible list\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n\n                <StorySandbox>\n                    <StorySandboxExample>\n                        <CollapsibleList handle={<SimpleListItem text=\"Fruits\" />}>\n                            <SimpleListItem text=\"Bananas\" />\n                            <SimpleListItem text=\"Grapes\" />\n                            <SimpleListItem text=\"Oranges\" />\n                        </CollapsibleList>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                         <CollapsibleList handle={<SimpleListItem text=\"Fruits\" />}>\n                            <SimpleListItem text=\"Bananas\" />\n                            <SimpleListItem text=\"Grapes\" />\n                            <SimpleListItem text=\"Oranges\" />\n                        </CollapsibleList>\n                      `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    {\n        info: {\n            propTables: [CollapsibleList, SimpleListItem]\n        }\n    }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AAOA;;AACA;;AAEA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,iBAAV,EAA6BC,MAA7B,CAAd;AACAF,KAAK,CAACG,YAAN,CAAmBC,qBAAnB;AAEAJ,KAAK,CAACK,GAAN,CACI,kBADJ,EAEI,YAAM;EACF,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAGI,6BAAC,mBAAD,qBACI,6BAAC,0BAAD,qBACI,6BAAC,sBAAD;IAAiB,MAAM,eAAE,6BAAC,oBAAD;MAAgB,IAAI,EAAC;IAArB;EAAzB,gBACI,6BAAC,oBAAD;IAAgB,IAAI,EAAC;EAArB,EADJ,eAEI,6BAAC,oBAAD;IAAgB,IAAI,EAAC;EAArB,EAFJ,eAGI,6BAAC,oBAAD;IAAgB,IAAI,EAAC;EAArB,EAHJ,CADJ,CADJ,eAQI,6BAAC,uBAAD,yWARJ,CAHJ,CADJ;AAwBH,CA3BL,EA4BI;EACIC,IAAI,EAAE;IACFC,UAAU,EAAE,CAACC,sBAAD,EAAkBC,oBAAlB;EADV;AADV,CA5BJ"}
+{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","readme","info","propTables","CollapsibleList","SimpleListItem"],"sources":["CollapsibleList.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 readme from \"./README.md\";\nimport { withKnobs } from \"@storybook/addon-knobs\";\n\nimport { CollapsibleList } from \"./index\";\nimport { SimpleListItem } from \"./../List\";\n\nconst story = storiesOf(\"Components/List\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"collapsible list\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n\n                <StorySandbox>\n                    <StorySandboxExample>\n                        <CollapsibleList handle={<SimpleListItem text=\"Fruits\" />}>\n                            <SimpleListItem text=\"Bananas\" />\n                            <SimpleListItem text=\"Grapes\" />\n                            <SimpleListItem text=\"Oranges\" />\n                        </CollapsibleList>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                         <CollapsibleList handle={<SimpleListItem text=\"Fruits\" />}>\n                            <SimpleListItem text=\"Bananas\" />\n                            <SimpleListItem text=\"Grapes\" />\n                            <SimpleListItem text=\"Oranges\" />\n                        </CollapsibleList>\n                      `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    {\n        info: {\n            propTables: [CollapsibleList, SimpleListItem]\n        }\n    }\n);\n"],"mappings":";;;AAAA;AACA;AACA;AAOA;AACA;AAEA;AACA;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAS,EAAC,iBAAiB,EAAEC,MAAM,CAAC;AAClDF,KAAK,CAACG,YAAY,CAACC,qBAAS,CAAC;AAE7BJ,KAAK,CAACK,GAAG,CACL,kBAAkB,EAClB,YAAM;EACF,oBACI,6BAAC,YAAK,qBACF,6BAAC,kBAAW,QAAEC,eAAM,CAAe,eAEnC,6BAAC,mBAAY,qBACT,6BAAC,0BAAmB,qBAChB,6BAAC,sBAAe;IAAC,MAAM,eAAE,6BAAC,oBAAc;MAAC,IAAI,EAAC;IAAQ;EAAI,gBACtD,6BAAC,oBAAc;IAAC,IAAI,EAAC;EAAS,EAAG,eACjC,6BAAC,oBAAc;IAAC,IAAI,EAAC;EAAQ,EAAG,eAChC,6BAAC,oBAAc;IAAC,IAAI,EAAC;EAAS,EAAG,CACnB,CACA,eACtB,6BAAC,uBAAgB,yWAQE,CACR,CACX;AAEhB,CAAC,EACD;EACIC,IAAI,EAAE;IACFC,UAAU,EAAE,CAACC,sBAAe,EAAEC,oBAAc;EAChD;AACJ,CAAC,CACJ"}

package/List/CollapsibleList/index.js

@@ -1,22 +1,16 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.CollapsibleList = void 0;
-
 require("./index.css");
-
 var _react = _interopRequireDefault(require("react"));
-
 var _list = require("@rmwc/list");
-
 var CollapsibleList = function CollapsibleList(props) {
   return /*#__PURE__*/_react.default.createElement(_list.CollapsibleList, props);
 };
-
 exports.CollapsibleList = CollapsibleList;
 var _default = CollapsibleList;
 exports.default = _default;

package/List/CollapsibleList/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["CollapsibleList","props"],"sources":["index.tsx"],"sourcesContent":["import \"./index.css\";\nimport React from \"react\";\nimport {\n    CollapsibleList as RmwcCollapsibleList,\n    CollapsibleListProps as RmwcCollapsibleListProps\n} from \"@rmwc/list\";\n\nexport type CollapsibleListProps = RmwcCollapsibleListProps & {\n    children: React.ReactNode;\n};\n\nexport const CollapsibleList: React.FC<CollapsibleListProps> = props => {\n    return <RmwcCollapsibleList {...props} />;\n};\n\nexport default CollapsibleList;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AASO,IAAMA,eAA+C,GAAG,SAAlDA,eAAkD,CAAAC,KAAK,EAAI;EACpE,oBAAO,6BAAC,qBAAD,EAAyBA,KAAzB,CAAP;AACH,CAFM;;;eAIQD,e"}
+{"version":3,"names":["CollapsibleList","props"],"sources":["index.tsx"],"sourcesContent":["import \"./index.css\";\nimport React from \"react\";\nimport {\n    CollapsibleList as RmwcCollapsibleList,\n    CollapsibleListProps as RmwcCollapsibleListProps\n} from \"@rmwc/list\";\n\nexport type CollapsibleListProps = RmwcCollapsibleListProps & {\n    children: React.ReactNode;\n};\n\nexport const CollapsibleList: React.FC<CollapsibleListProps> = props => {\n    return <RmwcCollapsibleList {...props} />;\n};\n\nexport default CollapsibleList;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AASO,IAAMA,eAA+C,GAAG,SAAlDA,eAA+C,CAAGC,KAAK,EAAI;EACpE,oBAAO,6BAAC,qBAAmB,EAAKA,KAAK,CAAI;AAC7C,CAAC;AAAC;AAAA,eAEaD,eAAe;AAAA"}