@webiny/ui 0.0.0-mt-2 → 0.0.0-unstable.06b2ede40f

package/ImageUpload/SingleImageUpload.js

@@ -1,224 +1,14 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _createSuper from "@babel/runtime/helpers/createSuper";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-import * as React from "react";
-import BrowseFiles from "react-butterfiles";
-import { FormElementMessage } from "../FormElementMessage";
-import styled from "@emotion/styled";
-import classNames from "classnames";
-import Image from "./Image";
-import ImageEditorDialog from "./ImageEditorDialog";
-var ImageUploadWrapper = /*#__PURE__*/styled("div", {
-  target: "e96x95k0",
-  label: "ImageUploadWrapper"
-})({
-  position: "relative",
-  ".disabled": {
-    opacity: 0.75,
-    pointerEvents: "none"
-  },
-  ".mdc-floating-label--float-above": {
-    transform: "scale(0.75)",
-    top: 10,
-    left: 10,
-    color: "var(--mdc-theme-text-secondary-on-background)"
-  },
-  ".mdc-text-field-helper-text": {
-    color: "var(--mdc-theme-text-secondary-on-background)"
-  }
-});
-// Do not apply editing for following image types.
-var noImageEditingTypes = ["image/svg+xml", "image/gif"];
-export var SingleImageUpload = /*#__PURE__*/function (_React$Component) {
-  _inherits(SingleImageUpload, _React$Component);
-
-  var _super = _createSuper(SingleImageUpload);
-
-  function SingleImageUpload() {
-    var _this;
-
-    _classCallCheck(this, SingleImageUpload);
-
-    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));
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      loading: false,
-      error: null,
-      imageEditor: {
-        open: false,
-        image: null
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleFiles", function (images) {
-      var _this$props = _this.props,
-          onChange = _this$props.onChange,
-          imageEditor = _this$props.imageEditor;
-      var image = {
-        name: images[0].name,
-        type: images[0].type,
-        size: images[0].size,
-        src: images[0].src.base64
-      };
-
-      _this.setState({
-        error: null
-      }, function () {
-        if (imageEditor && !noImageEditingTypes.includes(image.type)) {
-          _this.setState({
-            imageEditor: {
-              image: image,
-              open: true
-            }
-          });
-        } else {
-          onChange && onChange(image);
-        }
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleErrors", function (errors) {
-      var _errors = _slicedToArray(errors, 1),
-          error = _errors[0];
-
-      _this.setState({
-        error: error
-      });
-    });
-
-    return _this;
-  }
-
-  _createClass(SingleImageUpload, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props2 = this.props,
-          className = _this$props2.className,
-          value = _this$props2.value,
-          validation = _this$props2.validation,
-          label = _this$props2.label,
-          description = _this$props2.description,
-          accept = _this$props2.accept,
-          maxSize = _this$props2.maxSize,
-          onChange = _this$props2.onChange,
-          imageEditor = _this$props2.imageEditor,
-          showRemoveImageButton = _this$props2.showRemoveImageButton,
-          renderImagePreview = _this$props2.renderImagePreview;
-      var imageEditorImageSrc = "";
-
-      if (this.state.imageEditor.image) {
-        imageEditorImageSrc = this.state.imageEditor.image.src;
-      }
-
-      var src = value ? value.src : null;
-      return /*#__PURE__*/React.createElement(ImageUploadWrapper, {
-        className: classNames(className)
-      }, label && !src && /*#__PURE__*/React.createElement("div", {
-        className: "mdc-floating-label mdc-floating-label--float-above"
-      }, label), /*#__PURE__*/React.createElement(ImageEditorDialog, {
-        options: imageEditor,
-        open: this.state.imageEditor.open,
-        src: imageEditorImageSrc,
-        onClose: function onClose() {
-          _this2.setState(function (state) {
-            state.imageEditor.open = false;
-            return state;
-          });
-        },
-        onAccept: function onAccept(src) {
-          // We wrapped everything into setTimeout - prevents dialog freeze when larger image is selected.
-          setTimeout(function () {
-            _this2.setState({
-              loading: true
-            }, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-              return _regeneratorRuntime.wrap(function _callee$(_context) {
-                while (1) {
-                  switch (_context.prev = _context.next) {
-                    case 0:
-                      _context.t0 = onChange;
-
-                      if (!_context.t0) {
-                        _context.next = 4;
-                        break;
-                      }
-
-                      _context.next = 4;
-                      return onChange(_objectSpread(_objectSpread({}, _this2.state.imageEditor.image), {}, {
-                        src: src
-                      }));
-
-                    case 4:
-                      _this2.setState({
-                        loading: false,
-                        imageEditor: {
-                          image: null,
-                          open: false
-                        }
-                      });
-
-                    case 5:
-                    case "end":
-                      return _context.stop();
-                  }
-                }
-              }, _callee);
-            })));
-          });
-        }
-      }), /*#__PURE__*/React.createElement(BrowseFiles, {
-        accept: accept,
-        maxSize: maxSize,
-        convertToBase64: true,
-        onSuccess: this.handleFiles,
-        onError: this.handleErrors
-      }, function (_ref2) {
-        var browseFiles = _ref2.browseFiles,
-            getDropZoneProps = _ref2.getDropZoneProps;
-        return /*#__PURE__*/React.createElement("div", getDropZoneProps(), /*#__PURE__*/React.createElement(Image, {
-          renderImagePreview: renderImagePreview,
-          loading: _this2.state.loading,
-          value: value,
-          removeImage: showRemoveImageButton ? onChange : null,
-          uploadImage: browseFiles,
-          editImage: browseFiles
-        }));
-      }), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
-        error: true
-      }, validation.message), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description), this.state.error && /*#__PURE__*/React.createElement(FormElementMessage, {
-        error: true
-      }, this.props.errorMessages[this.state.error.type] || this.props.errorMessages.default));
-    }
-  }]);
-
-  return SingleImageUpload;
-}(React.Component);
-
-_defineProperty(SingleImageUpload, "defaultProps", {
-  validation: {
-    isValid: null
-  },
-  maxSize: "10mb",
-  imageEditor: {},
-  accept: ["image/jpeg", "image/png", "image/gif", "image/svg+xml"],
-  showRemoveImageButton: true,
-  errorMessages: {
-    maxSizeExceeded: "Max size exceeded.",
-    multipleMaxSizeExceeded: "Selected fields exceed max file size.",
-    multipleNotAllowed: "Multiple selection not allowed.",
-    unsupportedFileType: "Unsupported file type.",
-    default: "An error occurred."
-  }
-});
+import React from "react";
+import { Alert } from "@webiny/admin-ui";
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please check the `FilePicker` component inside the `@webiny/admin-ui` package instead.
+ */
+export const SingleImageUpload = ({}) => {
+  return /*#__PURE__*/React.createElement(Alert, {
+    type: "danger",
+    variant: "strong"
+  }, "Deprecated component! The original code has been moved to `@webiny/admin-ui` package.");
+};
+
+//# sourceMappingURL=SingleImageUpload.js.map

package/ImageUpload/SingleImageUpload.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Alert","SingleImageUpload","createElement","type","variant"],"sources":["SingleImageUpload.tsx"],"sourcesContent":["import React from \"react\";\nimport type { FormComponentProps } from \"~/types\";\nimport { Alert } from \"@webiny/admin-ui\";\n\ninterface SingleImageUploadProps extends FormComponentProps {\n    // Component label.\n    label?: string;\n\n    // Is component disabled?\n    disabled?: boolean;\n\n    // Description beneath the image.\n    description?: string;\n\n    // A className for the root element.\n    className?: string;\n\n    // Define a list of accepted image types.\n    accept?: string[];\n\n    // Define file's max allowed size (default is \"10mb\").\n    // Uses \"bytes\" (https://www.npmjs.com/package/bytes) library to convert string notation to actual number.\n    maxSize: string;\n\n    // Image editor options.\n    // Please check the docs of ImageEditor component for the list of all available options.\n    imageEditor?: {\n        [key: string]: any;\n    };\n\n    // Custom image preview renderer. By default images are rendered via simple <img> element.\n    renderImagePreview?: () => React.ReactElement<any>;\n\n    // Should remove image button (top right ✕) be shown? Default is set to `true`.\n    showRemoveImageButton?: boolean;\n\n    // Use these to customize error messages (eg. if i18n supported is needed).\n    errorMessages: {\n        maxSizeExceeded: string;\n        unsupportedFileType: string;\n        default: string;\n        multipleNotAllowed: string;\n        multipleMaxSizeExceeded: string;\n    };\n}\n\n/**\n * @deprecated This component is deprecated and will be removed in future releases.\n * Please check the `FilePicker` component inside the `@webiny/admin-ui` package instead.\n */\nexport const SingleImageUpload = ({}: SingleImageUploadProps) => {\n    return (\n        <Alert type=\"danger\" variant={\"strong\"}>\n            {\n                \"Deprecated component! The original code has been moved to `@webiny/admin-ui` package.\"\n            }\n        </Alert>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,KAAK,QAAQ,kBAAkB;AA4CxC;AACA;AACA;AACA;AACA,OAAO,MAAMC,iBAAiB,GAAGA,CAAC,CAAyB,CAAC,KAAK;EAC7D,oBACIF,KAAA,CAAAG,aAAA,CAACF,KAAK;IAACG,IAAI,EAAC,QAAQ;IAACC,OAAO,EAAE;EAAS,GAE/B,uFAED,CAAC;AAEhB,CAAC","ignoreList":[]}

package/ImageUpload/index.d.ts

@@ -1,4 +1,4 @@
 export { SingleImageUpload } from "./SingleImageUpload";
 export { MultiImageUpload } from "./MultiImageUpload";
-export { default as Image } from "./Image";
-export { default as ImageEditorDialog } from "./ImageEditorDialog";
+export { Image } from "./Image";
+export { ImageEditorDialog } from "./ImageEditorDialog";

package/ImageUpload/index.js

@@ -1,4 +1,6 @@
 export { SingleImageUpload } from "./SingleImageUpload";
 export { MultiImageUpload } from "./MultiImageUpload";
-export { default as Image } from "./Image";
-export { default as ImageEditorDialog } from "./ImageEditorDialog";
+export { Image } from "./Image";
+export { ImageEditorDialog } from "./ImageEditorDialog";
+
+//# sourceMappingURL=index.js.map

package/ImageUpload/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["SingleImageUpload","MultiImageUpload","Image","ImageEditorDialog"],"sources":["index.ts"],"sourcesContent":["export { SingleImageUpload } from \"./SingleImageUpload\";\nexport { MultiImageUpload } from \"./MultiImageUpload\";\nexport { Image } from \"./Image\";\nexport { ImageEditorDialog } from \"./ImageEditorDialog\";\n"],"mappings":"AAAA,SAASA,iBAAiB;AAC1B,SAASC,gBAAgB;AACzB,SAASC,KAAK;AACd,SAASC,iBAAiB","ignoreList":[]}

package/Input/Input.d.ts

@@ -1,8 +1,59 @@
-import * as React from "react";
-import { TextFieldProps } from "@rmwc/textfield";
-import { FormComponentProps } from "../types";
-import { ReactElement } from "react";
-export declare type InputProps = FormComponentProps & TextFieldProps & {
+import type { ReactElement } from "react";
+import React from "react";
+import type { FormComponentProps } from "../types";
+export interface TextFieldHelperTextProps {
+    /** Make the help text always visible */
+    persistent?: boolean;
+    /** Make the help a validation message style */
+    validationMsg?: boolean;
+    /** Content for the help text */
+    children: React.ReactNode;
+}
+export interface TextFieldProps {
+    /** Sets the value for controlled TextFields. */
+    value?: string | number;
+    /** Adds help text to the field */
+    helpText?: React.ReactNode | TextFieldHelperTextProps;
+    /** Shows the character count, must be used in conjunction with maxLength. */
+    characterCount?: boolean;
+    /** Makes the TextField visually invalid. This is sometimes automatically applied in cases where required or pattern is used.  */
+    invalid?: boolean;
+    /** Makes the Textfield disabled. */
+    disabled?: boolean;
+    /** Makes the Textfield required. */
+    required?: boolean;
+    /** Outline the TextField. */
+    outlined?: boolean;
+    /** How to align the text inside the TextField. Defaults to 'start'. */
+    align?: "start" | "end";
+    /** A label for the input. */
+    label?: React.ReactNode;
+    /** The label floats automatically based on value, but you can use this prop for manual control. */
+    floatLabel?: boolean;
+    /** Makes a multiline TextField. */
+    textarea?: boolean;
+    /** Makes the TextField fullwidth. */
+    fullwidth?: boolean;
+    /** Add a leading icon. */
+    icon?: any;
+    /** Add a trailing icon. */
+    trailingIcon?: any;
+    /** By default, props spread to the input. These props are for the component's root container. */
+    rootProps?: any;
+    /** A reference to the native input or textarea. */
+    inputRef?: React.Ref<HTMLInputElement | HTMLTextAreaElement | null>;
+    /** The type of input field to render, search, number, etc */
+    type?: string;
+    /** Add prefix. */
+    prefix?: string;
+    /** Add suffix. */
+    suffix?: string;
+    /** Advanced: A reference to the MDCFoundation. */
+    foundationRef?: any;
+    /** Make textarea resizeable */
+    resizeable?: boolean;
+}
+export type InputProps<TValue = any> = FormComponentProps<TValue> & TextFieldProps & {
     autoComplete?: string;
     rawOnChange?: boolean;
     autoFocus?: boolean;
@@ -10,25 +61,16 @@ export declare type InputProps = FormComponentProps & TextFieldProps & {
     description?: string | ReactElement;
     rows?: number;
     maxLength?: number;
-    onBlur?: (e: React.SyntheticEvent<HTMLInputElement>) => any;
-    onKeyDown?: (e: React.SyntheticEvent<HTMLInputElement>) => any;
+    onBlur?: (e: React.SyntheticEvent<any>) => any;
+    onKeyDown?: (e: React.SyntheticEvent<any>) => any;
     onEnter?: () => any;
     className?: string;
+    "data-testid"?: string;
+    size?: "small" | "medium" | "large";
+    children?: React.ReactNode;
 };
 /**
- * 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.
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Input` component from the `@webiny/admin-ui` package instead.
  */
-export declare class Input extends React.Component<InputProps> {
-    static defaultProps: {
-        rawOnChange: boolean;
-        validation: {
-            isValid: any;
-            message: any;
-        };
-    };
-    static rmwcProps: string[];
-    onChange: (e: React.SyntheticEvent<HTMLInputElement>) => void;
-    onBlur: (e: React.SyntheticEvent<HTMLInputElement>) => Promise<void>;
-    render(): JSX.Element;
-}
+export declare const Input: (props: InputProps) => React.JSX.Element;

package/Input/Input.js

@@ -1,152 +1,89 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _createSuper from "@babel/runtime/helpers/createSuper";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["autoFocus", "value", "label", "description", "placeholder", "rows", "validation", "icon", "trailingIcon", "onEnter"];
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-import * as React from "react";
-import { TextField } from "@rmwc/textfield";
-import { FormElementMessage } from "../FormElementMessage";
+import React, { useCallback, useMemo } from "react";
 import pick from "lodash/pick";
-
+import { Input as AdminInput, Textarea as AdminTextarea } from "@webiny/admin-ui";
 /**
  * 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.
  */
-export var Input = /*#__PURE__*/function (_React$Component) {
-  _inherits(Input, _React$Component);
-
-  var _super = _createSuper(Input);
-
-  function Input() {
-    var _this;
-
-    _classCallCheck(this, Input);
-
-    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));
-
-    _defineProperty(_assertThisInitialized(_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);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onBlur", /*#__PURE__*/function () {
-      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(e) {
-        var _this$props2, validate, onBlur;
-
-        return _regeneratorRuntime.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);
+// IconProps directly passed to RMWC
+const rmwcProps = ["label", "type", "disabled", "readOnly", "placeholder", "onKeyDown", "onEnter", "onKeyPress", "onKeyUp", "onFocus", "className", "maxLength", "characterCount", "autoComplete", "maxLength"];
 
-              case 6:
-              case "end":
-                return _context.stop();
-            }
-          }
-        }, _callee);
-      }));
-
-      return function (_x) {
-        return _ref.apply(this, arguments);
-      };
-    }());
-
-    return _this;
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Input` component from the `@webiny/admin-ui` package instead.
+ */
+export const Input = props => {
+  const {
+    autoFocus,
+    value,
+    description,
+    placeholder,
+    rows,
+    validation,
+    icon,
+    trailingIcon,
+    onBlur,
+    onChange,
+    rawOnChange,
+    required,
+    inputRef,
+    ...rest
+  } = props;
+  let inputValue = value;
+  if (value === null || typeof value === "undefined") {
+    inputValue = "";
   }
-
-  _createClass(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 = _objectWithoutProperties(_this$props3, _excluded);
-
-      var inputValue = value;
-
-      if (value === null || typeof value === "undefined") {
-        inputValue = "";
-      }
-
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextField, Object.assign({}, pick(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
-      })), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
-        error: true
-      }, validation.message), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
+  const size = useMemo(() => {
+    if (props.size === "medium") {
+      return "md";
     }
-  }]);
-
-  return Input;
-}(React.Component);
-
-_defineProperty(Input, "defaultProps", {
-  rawOnChange: false,
-  validation: {
-    isValid: null,
-    message: null
+    if (props.size === "large") {
+      return "lg";
+    }
+    return "lg";
+  }, [props.size]);
+  const getValidIcon = useCallback(icon => {
+    if (/*#__PURE__*/React.isValidElement(icon)) {
+      return icon;
+    }
+    return undefined;
+  }, []);
+  if (Boolean(rows)) {
+    return /*#__PURE__*/React.createElement(AdminTextarea, Object.assign({}, pick(rest, rmwcProps), {
+      autoFocus: autoFocus,
+      value: inputValue,
+      onChange: onChange,
+      placeholder: placeholder,
+      size: size,
+      className: "webiny-ui-input",
+      "data-testid": props["data-testid"],
+      validation: validation,
+      description: description,
+      required: required,
+      rows: rows,
+      forwardEventOnChange: rawOnChange,
+      textareaRef: inputRef,
+      onBlur: onBlur
+    }));
   }
-});
-
-_defineProperty(Input, "rmwcProps", ["label", "type", "step", "disabled", "readOnly", "placeholder", "outlined", "onKeyDown", "onKeyPress", "onKeyUp", "onFocus", "rootProps", "fullwidth", "inputRef", "className", "maxLength", "characterCount"]);
+  return /*#__PURE__*/React.createElement(AdminInput, Object.assign({}, pick(rest, rmwcProps), {
+    autoFocus: autoFocus,
+    value: inputValue,
+    onChange: onChange,
+    startIcon: getValidIcon(icon),
+    endIcon: getValidIcon(trailingIcon),
+    placeholder: placeholder,
+    size: size,
+    className: "webiny-ui-input",
+    "data-testid": props["data-testid"],
+    validation: validation,
+    description: description,
+    required: required,
+    forwardEventOnChange: rawOnChange,
+    inputRef: inputRef,
+    onBlur: onBlur
+  }));
+};
+
+//# sourceMappingURL=Input.js.map

package/Input/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useMemo","pick","Input","AdminInput","Textarea","AdminTextarea","rmwcProps","props","autoFocus","value","description","placeholder","rows","validation","icon","trailingIcon","onBlur","onChange","rawOnChange","required","inputRef","rest","inputValue","size","getValidIcon","isValidElement","undefined","Boolean","createElement","Object","assign","className","forwardEventOnChange","textareaRef","startIcon","endIcon"],"sources":["Input.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport React, { useCallback, useMemo } from \"react\";\nimport pick from \"lodash/pick\";\nimport type { FormComponentProps } from \"~/types\";\nimport { Input as AdminInput, Textarea as AdminTextarea } from \"@webiny/admin-ui\";\n\nexport interface TextFieldHelperTextProps {\n    /** Make the help text always visible */\n    persistent?: boolean;\n    /** Make the help a validation message style */\n    validationMsg?: boolean;\n    /** Content for the help text */\n    children: React.ReactNode;\n}\n\nexport interface TextFieldProps {\n    /** Sets the value for controlled TextFields. */\n    value?: string | number;\n    /** Adds help text to the field */\n    helpText?: React.ReactNode | TextFieldHelperTextProps;\n    /** Shows the character count, must be used in conjunction with maxLength. */\n    characterCount?: boolean;\n    /** Makes the TextField visually invalid. This is sometimes automatically applied in cases where required or pattern is used.  */\n    invalid?: boolean;\n    /** Makes the Textfield disabled. */\n    disabled?: boolean;\n    /** Makes the Textfield required. */\n    required?: boolean;\n    /** Outline the TextField. */\n    outlined?: boolean;\n    /** How to align the text inside the TextField. Defaults to 'start'. */\n    align?: \"start\" | \"end\";\n    /** A label for the input. */\n    label?: React.ReactNode;\n    /** The label floats automatically based on value, but you can use this prop for manual control. */\n    floatLabel?: boolean;\n    /** Makes a multiline TextField. */\n    textarea?: boolean;\n    /** Makes the TextField fullwidth. */\n    fullwidth?: boolean;\n    /** Add a leading icon. */\n    icon?: any;\n    /** Add a trailing icon. */\n    trailingIcon?: any;\n    /** By default, props spread to the input. These props are for the component's root container. */\n    rootProps?: any;\n    /** A reference to the native input or textarea. */\n    inputRef?: React.Ref<HTMLInputElement | HTMLTextAreaElement | null>;\n    /** The type of input field to render, search, number, etc */\n    type?: string;\n    /** Add prefix. */\n    prefix?: string;\n    /** Add suffix. */\n    suffix?: string;\n    /** Advanced: A reference to the MDCFoundation. */\n    foundationRef?: any;\n    /** Make textarea resizeable */\n    resizeable?: boolean;\n}\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<any>) => any;\n\n        onKeyDown?: (e: React.SyntheticEvent<any>) => 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        // Size - small, medium or large\n        size?: \"small\" | \"medium\" | \"large\";\n\n        children?: React.ReactNode;\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    \"disabled\",\n    \"readOnly\",\n    \"placeholder\",\n    \"onKeyDown\",\n    \"onEnter\",\n    \"onKeyPress\",\n    \"onKeyUp\",\n    \"onFocus\",\n    \"className\",\n    \"maxLength\",\n    \"characterCount\",\n    \"autoComplete\",\n    \"maxLength\"\n];\n\n/**\n * @deprecated This component is deprecated and will be removed in future releases.\n * Please use the `Input` component from the `@webiny/admin-ui` package instead.\n */\nexport const Input = (props: InputProps) => {\n    const {\n        autoFocus,\n        value,\n        description,\n        placeholder,\n        rows,\n        validation,\n        icon,\n        trailingIcon,\n        onBlur,\n        onChange,\n        rawOnChange,\n        required,\n        inputRef,\n        ...rest\n    } = props;\n\n    let inputValue = value;\n    if (value === null || typeof value === \"undefined\") {\n        inputValue = \"\";\n    }\n\n    const size = useMemo(() => {\n        if (props.size === \"medium\") {\n            return \"md\";\n        }\n\n        if (props.size === \"large\") {\n            return \"lg\";\n        }\n\n        return \"lg\";\n    }, [props.size]);\n\n    const getValidIcon = useCallback((icon: React.ReactNode) => {\n        if (React.isValidElement(icon)) {\n            return icon;\n        }\n\n        return undefined;\n    }, []);\n\n    if (Boolean(rows)) {\n        return (\n            <AdminTextarea\n                {...pick(rest, rmwcProps)}\n                autoFocus={autoFocus}\n                value={inputValue}\n                onChange={onChange}\n                placeholder={placeholder}\n                size={size}\n                className={\"webiny-ui-input\"}\n                data-testid={props[\"data-testid\"]}\n                validation={validation}\n                description={description}\n                required={required}\n                rows={rows}\n                forwardEventOnChange={rawOnChange}\n                textareaRef={inputRef as React.Ref<HTMLTextAreaElement> | undefined}\n                onBlur={onBlur}\n            />\n        );\n    }\n\n    return (\n        <AdminInput\n            {...pick(rest, rmwcProps)}\n            autoFocus={autoFocus}\n            value={inputValue}\n            onChange={onChange}\n            startIcon={getValidIcon(icon)}\n            endIcon={getValidIcon(trailingIcon)}\n            placeholder={placeholder}\n            size={size}\n            className={\"webiny-ui-input\"}\n            data-testid={props[\"data-testid\"]}\n            validation={validation}\n            description={description}\n            required={required}\n            forwardEventOnChange={rawOnChange}\n            inputRef={inputRef as React.Ref<HTMLInputElement> | undefined}\n            onBlur={onBlur}\n        />\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/Input/index.js

@@ -1 +1,3 @@
-export * from "./Input";
+export * from "./Input";
+
+//# sourceMappingURL=index.js.map

package/Input/index.js.map

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

package/List/CollapsibleList/index.d.ts

@@ -1,8 +1,22 @@
-import "./index.css";
-import * as React from "react";
-import { CollapsibleListProps as RmwcCollapsibleListProps } from "@rmwc/list";
-export declare type CollapsibleListProps = RmwcCollapsibleListProps & {
+import React from "react";
+export interface CollapsibleListProps {
+    /** The handle that opens and closes the collapsible section. Usually a ListItem. */
+    handle: React.ReactElement<any>;
+    /** Starts the collapsible list as open. */
+    defaultOpen?: boolean;
+    /** Callback for when the collapsible list opens. */
+    onOpen?: () => void;
+    /** Callback for when the collapsible list closes. */
+    onClose?: () => void;
+    /** CollapsibleState */
+    open: boolean;
+    childrenStyle: React.CSSProperties;
+    /** Component props */
     children: React.ReactNode;
-};
-export declare const CollapsibleList: (props: CollapsibleListProps) => JSX.Element;
+}
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `List` component from the `@webiny/admin-ui` package instead.
+ */
+export declare const CollapsibleList: (props: CollapsibleListProps) => React.JSX.Element;
 export default CollapsibleList;