@webiny/app-admin 0.0.0-unstable.bca7b3e350 → 0.0.0-unstable.c27f4d8a31

package/components/SimpleUI/InputField.js

@@ -1,102 +1,72 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+import React from "react";
+import { css } from "@emotion/css";
+import classNames from "classnames";
+import omit from "lodash/omit.js";
+import { Typography } from "@webiny/ui/Typography/index.js";
+import { FormElementMessage } from "@webiny/ui/FormElementMessage/index.js";
+const inputStyle = /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
+  name: "182fb6",
+  styles: "box-sizing:border-box;border:1px solid var(--mdc-theme-on-background);width:100%;height:100%;padding:4px 8px;text-align:left;min-height:32px;background-color:var(--mdc-theme-surface);transition:150ms all ease-in-out;&:focus:not(:disabled){background-color:var(--mdc-theme-on-background);}&:hover:not(:disabled){background-color:var(--mdc-theme-on-background);}&:disabled{opacity:0.5;cursor:not-allowed;}&.text-center{text-align:center;padding:4px;}&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}"
+} : {
+  name: "k732d4-inputStyle",
+  styles: "box-sizing:border-box;border:1px solid var(--mdc-theme-on-background);width:100%;height:100%;padding:4px 8px;text-align:left;min-height:32px;background-color:var(--mdc-theme-surface);transition:150ms all ease-in-out;&:focus:not(:disabled){background-color:var(--mdc-theme-on-background);}&:hover:not(:disabled){background-color:var(--mdc-theme-on-background);}&:disabled{opacity:0.5;cursor:not-allowed;}&.text-center{text-align:center;padding:4px;}&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;};label:inputStyle;/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIklucHV0RmllbGQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU9tQiIsImZpbGUiOiJJbnB1dEZpZWxkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9jc3NcIjtcbmltcG9ydCBjbGFzc05hbWVzIGZyb20gXCJjbGFzc25hbWVzXCI7XG5pbXBvcnQgb21pdCBmcm9tIFwibG9kYXNoL29taXQuanNcIjtcbmltcG9ydCB7IFR5cG9ncmFwaHkgfSBmcm9tIFwiQHdlYmlueS91aS9UeXBvZ3JhcGh5L2luZGV4LmpzXCI7XG5pbXBvcnQgeyBGb3JtRWxlbWVudE1lc3NhZ2UgfSBmcm9tIFwiQHdlYmlueS91aS9Gb3JtRWxlbWVudE1lc3NhZ2UvaW5kZXguanNcIjtcblxuY29uc3QgaW5wdXRTdHlsZSA9IGNzcyh7XG4gICAgYm94U2l6aW5nOiBcImJvcmRlci1ib3hcIixcbiAgICBib3JkZXI6IFwiMXB4IHNvbGlkIHZhcigtLW1kYy10aGVtZS1vbi1iYWNrZ3JvdW5kKVwiLFxuICAgIHdpZHRoOiBcIjEwMCVcIixcbiAgICBoZWlnaHQ6IFwiMTAwJVwiLFxuICAgIHBhZGRpbmc6IFwiNHB4IDhweFwiLFxuICAgIHRleHRBbGlnbjogXCJsZWZ0XCIsXG4gICAgbWluSGVpZ2h0OiAzMixcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IFwidmFyKC0tbWRjLXRoZW1lLXN1cmZhY2UpXCIsXG4gICAgdHJhbnNpdGlvbjogXCIxNTBtcyBhbGwgZWFzZS1pbi1vdXRcIixcbiAgICBcIiY6Zm9jdXM6bm90KDpkaXNhYmxlZClcIjoge1xuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IFwidmFyKC0tbWRjLXRoZW1lLW9uLWJhY2tncm91bmQpXCJcbiAgICB9LFxuICAgIFwiJjpob3Zlcjpub3QoOmRpc2FibGVkKVwiOiB7XG4gICAgICAgIGJhY2tncm91bmRDb2xvcjogXCJ2YXIoLS1tZGMtdGhlbWUtb24tYmFja2dyb3VuZClcIlxuICAgIH0sXG4gICAgXCImOmRpc2FibGVkXCI6IHtcbiAgICAgICAgb3BhY2l0eTogMC41LFxuICAgICAgICBjdXJzb3I6IFwibm90LWFsbG93ZWRcIlxuICAgIH0sXG5cbiAgICBcIiYudGV4dC1jZW50ZXJcIjoge1xuICAgICAgICB0ZXh0QWxpZ246IFwiY2VudGVyXCIsXG4gICAgICAgIHBhZGRpbmc6IDRcbiAgICB9LFxuXG4gICAgXCImOjotd2Via2l0LWlubmVyLXNwaW4tYnV0dG9uXCI6IHtcbiAgICAgICAgV2Via2l0QXBwZWFyYW5jZTogXCJub25lXCIsXG4gICAgICAgIG1hcmdpbjogMFxuICAgIH0sXG4gICAgXCImOjotd2Via2l0LW91dGVyLXNwaW4tYnV0dG9uXCI6IHtcbiAgICAgICAgV2Via2l0QXBwZWFyYW5jZTogXCJub25lXCIsXG4gICAgICAgIG1hcmdpbjogMFxuICAgIH1cbn0pO1xuXG5jb25zdCBsYWJlbFN0eWxlID0gY3NzKHtcbiAgICBtYXJnaW5Cb3R0b206IDgsXG4gICAgcGFkZGluZzogXCIwcHggOHB4XCIsXG4gICAgXCImIHNwYW5cIjoge1xuICAgICAgICBjb2xvcjogXCJ2YXIoLS1tZGMtdGhlbWUtdGV4dC1wcmltYXJ5LW9uLWJhY2tncm91bmQpXCJcbiAgICB9XG59KTtcblxuaW50ZXJmYWNlIEdldFZhbHVlUGFyYW1zIHtcbiAgICB2YWx1ZTogc3RyaW5nIHwgbnVtYmVyIHwgdW5kZWZpbmVkO1xuICAgIGRlZmF1bHRWYWx1ZTogc3RyaW5nIHwgbnVtYmVyO1xuICAgIHR5cGU6IFwibnVtYmVyXCIgfCBcInN0cmluZ1wiO1xufVxuY29uc3QgZ2V0VmFsdWUgPSAocGFyYW1zOiBHZXRWYWx1ZVBhcmFtcyk6IHN0cmluZyA9PiB7XG4gICAgY29uc3QgeyB2YWx1ZSwgZGVmYXVsdFZhbHVlLCB0eXBlIH0gPSBwYXJhbXM7XG4gICAgaWYgKHR5cGUgPT09IFwibnVtYmVyXCIpIHtcbiAgICAgICAgcmV0dXJuIChpc05hTih2YWx1ZSBhcyBudW1iZXIpID8gZGVmYXVsdFZhbHVlIDogdmFsdWUpIGFzIHN0cmluZztcbiAgICB9XG4gICAgcmV0dXJuICh2YWx1ZSB8fCBkZWZhdWx0VmFsdWUpIGFzIHN0cmluZztcbn07XG5cbmV4cG9ydCB0eXBlIE9uS2V5RG93blByb3BzID0gUmVhY3QuU3ludGhldGljRXZlbnQ8SFRNTElucHV0RWxlbWVudCwgRXZlbnQ+ICZcbiAgICBSZWFjdC5LZXlib2FyZEV2ZW50PEhUTUxJbnB1dEVsZW1lbnQ+O1xuXG5pbnRlcmZhY2UgSW5wdXRCb3hQcm9wcyB7XG4gICAgdmFsdWU/OiBzdHJpbmcgfCBudW1iZXI7XG4gICAgb25DaGFuZ2U/OiAodmFsdWU6IGFueSkgPT4gdm9pZDtcbiAgICBvbktleURvd24/OiAoZTogT25LZXlEb3duUHJvcHMpID0+IGFueTtcbiAgICBkZWZhdWx0VmFsdWU/OiBzdHJpbmcgfCBudW1iZXI7XG4gICAgdHlwZT86IFwic3RyaW5nXCIgfCBcIm51bWJlclwiO1xuICAgIFtrZXk6IHN0cmluZ106IGFueTtcbn1cbmNvbnN0IElucHV0RmllbGQgPSAoe1xuICAgIGNsYXNzTmFtZSxcbiAgICB2YWx1ZSxcbiAgICBvbkNoYW5nZSxcbiAgICBvbktleURvd24sXG4gICAgbGFiZWwsXG4gICAgZGVzY3JpcHRpb24sXG4gICAgdmFsaWRhdGlvbiA9IHsgaXNWYWxpZDogdHJ1ZSB9LFxuICAgIGRlZmF1bHRWYWx1ZSA9IFwiXCIsXG4gICAgLi4ucHJvcHNcbn06IElucHV0Qm94UHJvcHMpID0+IHtcbiAgICByZXR1cm4gKFxuICAgICAgICA8UmVhY3QuRnJhZ21lbnQ+XG4gICAgICAgICAgICB7bGFiZWwgJiYgKFxuICAgICAgICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPXtsYWJlbFN0eWxlfT5cbiAgICAgICAgICAgICAgICAgICAgPFR5cG9ncmFwaHkgdXNlPXtcImJvZHkyXCJ9PntsYWJlbH08L1R5cG9ncmFwaHk+XG4gICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICApfVxuICAgICAgICAgICAgPGlucHV0XG4gICAgICAgICAgICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWVzKGlucHV0U3R5bGUsIGNsYXNzTmFtZSl9XG4gICAgICAgICAgICAgICAgdmFsdWU9e2dldFZhbHVlKHtcbiAgICAgICAgICAgICAgICAgICAgdmFsdWUsXG4gICAgICAgICAgICAgICAgICAgIHR5cGU6IHByb3BzLnR5cGUgfHwgXCJzdHJpbmdcIixcbiAgICAgICAgICAgICAgICAgICAgZGVmYXVsdFZhbHVlXG4gICAgICAgICAgICAgICAgfSl9XG4gICAgICAgICAgICAgICAgb25LZXlEb3duPXtvbktleURvd259XG4gICAgICAgICAgICAgICAgb25DaGFuZ2U9e2V2ID0+IHtcbiAgICAgICAgICAgICAgICAgICAgaWYgKCFvbkNoYW5nZSkge1xuICAgICAgICAgICAgICAgICAgICAgICAgcmV0dXJuO1xuICAgICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgICAgIG9uQ2hhbmdlKChldi50YXJnZXQudmFsdWUgfHwgXCJcIikudG9Mb3dlckNhc2UoKSk7XG4gICAgICAgICAgICAgICAgfX1cbiAgICAgICAgICAgICAgICB7Li4ub21pdChwcm9wcywgXCJ2YWxpZGF0ZVwiKX1cbiAgICAgICAgICAgIC8+XG4gICAgICAgICAgICB7dmFsaWRhdGlvbi5pc1ZhbGlkID09PSBmYWxzZSAmJiAoXG4gICAgICAgICAgICAgICAgPEZvcm1FbGVtZW50TWVzc2FnZSBlcnJvcj57dmFsaWRhdGlvbi5tZXNzYWdlfTwvRm9ybUVsZW1lbnRNZXNzYWdlPlxuICAgICAgICAgICAgKX1cbiAgICAgICAgICAgIHt2YWxpZGF0aW9uLmlzVmFsaWQgIT09IGZhbHNlICYmIGRlc2NyaXB0aW9uICYmIChcbiAgICAgICAgICAgICAgICA8Rm9ybUVsZW1lbnRNZXNzYWdlPntkZXNjcmlwdGlvbn08L0Zvcm1FbGVtZW50TWVzc2FnZT5cbiAgICAgICAgICAgICl9XG4gICAgICAgIDwvUmVhY3QuRnJhZ21lbnQ+XG4gICAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IFJlYWN0Lm1lbW8oSW5wdXRGaWVsZCk7XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-exports.default = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
-var _emotion = require("emotion");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _omit = _interopRequireDefault(require("lodash/omit"));
-var _Typography = require("@webiny/ui/Typography");
-var _FormElementMessage = require("@webiny/ui/FormElementMessage");
-var _excluded = ["className", "value", "onChange", "onKeyDown", "label", "description", "validation", "defaultValue"];
-var inputStyle = /*#__PURE__*/(0, _emotion.css)({
-  boxSizing: "border-box",
-  border: "1px solid var(--mdc-theme-on-background)",
-  width: "100%",
-  height: "100%",
-  padding: "4px 8px",
-  textAlign: "left",
-  minHeight: 32,
-  backgroundColor: "var(--mdc-theme-surface)",
-  transition: "150ms all ease-in-out",
-  "&:focus:not(:disabled)": {
-    backgroundColor: "var(--mdc-theme-on-background)"
-  },
-  "&:hover:not(:disabled)": {
-    backgroundColor: "var(--mdc-theme-on-background)"
-  },
-  "&:disabled": {
-    opacity: 0.5,
-    cursor: "not-allowed"
-  },
-  "&.text-center": {
-    textAlign: "center",
-    padding: 4
-  },
-  "&::-webkit-inner-spin-button": {
-    WebkitAppearance: "none",
-    margin: 0
-  },
-  "&::-webkit-outer-spin-button": {
-    WebkitAppearance: "none",
-    margin: 0
-  }
-}, "label:inputStyle;");
-var labelStyle = /*#__PURE__*/(0, _emotion.css)({
-  marginBottom: 8,
-  padding: "0px 8px",
-  "& span": {
-    color: "var(--mdc-theme-text-primary-on-background)"
-  }
-}, "label:labelStyle;");
-var getValue = function getValue(params) {
-  var value = params.value,
-    defaultValue = params.defaultValue,
-    type = params.type;
+const labelStyle = /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
+  name: "9dnmsz",
+  styles: "margin-bottom:8px;padding:0px 8px;& span{color:var(--mdc-theme-text-primary-on-background);}"
+} : {
+  name: "1yl4ooa-labelStyle",
+  styles: "margin-bottom:8px;padding:0px 8px;& span{color:var(--mdc-theme-text-primary-on-background);};label:labelStyle;/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIklucHV0RmllbGQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTJDbUIiLCJmaWxlIjoiSW5wdXRGaWVsZC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vY3NzXCI7XG5pbXBvcnQgY2xhc3NOYW1lcyBmcm9tIFwiY2xhc3NuYW1lc1wiO1xuaW1wb3J0IG9taXQgZnJvbSBcImxvZGFzaC9vbWl0LmpzXCI7XG5pbXBvcnQgeyBUeXBvZ3JhcGh5IH0gZnJvbSBcIkB3ZWJpbnkvdWkvVHlwb2dyYXBoeS9pbmRleC5qc1wiO1xuaW1wb3J0IHsgRm9ybUVsZW1lbnRNZXNzYWdlIH0gZnJvbSBcIkB3ZWJpbnkvdWkvRm9ybUVsZW1lbnRNZXNzYWdlL2luZGV4LmpzXCI7XG5cbmNvbnN0IGlucHV0U3R5bGUgPSBjc3Moe1xuICAgIGJveFNpemluZzogXCJib3JkZXItYm94XCIsXG4gICAgYm9yZGVyOiBcIjFweCBzb2xpZCB2YXIoLS1tZGMtdGhlbWUtb24tYmFja2dyb3VuZClcIixcbiAgICB3aWR0aDogXCIxMDAlXCIsXG4gICAgaGVpZ2h0OiBcIjEwMCVcIixcbiAgICBwYWRkaW5nOiBcIjRweCA4cHhcIixcbiAgICB0ZXh0QWxpZ246IFwibGVmdFwiLFxuICAgIG1pbkhlaWdodDogMzIsXG4gICAgYmFja2dyb3VuZENvbG9yOiBcInZhcigtLW1kYy10aGVtZS1zdXJmYWNlKVwiLFxuICAgIHRyYW5zaXRpb246IFwiMTUwbXMgYWxsIGVhc2UtaW4tb3V0XCIsXG4gICAgXCImOmZvY3VzOm5vdCg6ZGlzYWJsZWQpXCI6IHtcbiAgICAgICAgYmFja2dyb3VuZENvbG9yOiBcInZhcigtLW1kYy10aGVtZS1vbi1iYWNrZ3JvdW5kKVwiXG4gICAgfSxcbiAgICBcIiY6aG92ZXI6bm90KDpkaXNhYmxlZClcIjoge1xuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IFwidmFyKC0tbWRjLXRoZW1lLW9uLWJhY2tncm91bmQpXCJcbiAgICB9LFxuICAgIFwiJjpkaXNhYmxlZFwiOiB7XG4gICAgICAgIG9wYWNpdHk6IDAuNSxcbiAgICAgICAgY3Vyc29yOiBcIm5vdC1hbGxvd2VkXCJcbiAgICB9LFxuXG4gICAgXCImLnRleHQtY2VudGVyXCI6IHtcbiAgICAgICAgdGV4dEFsaWduOiBcImNlbnRlclwiLFxuICAgICAgICBwYWRkaW5nOiA0XG4gICAgfSxcblxuICAgIFwiJjo6LXdlYmtpdC1pbm5lci1zcGluLWJ1dHRvblwiOiB7XG4gICAgICAgIFdlYmtpdEFwcGVhcmFuY2U6IFwibm9uZVwiLFxuICAgICAgICBtYXJnaW46IDBcbiAgICB9LFxuICAgIFwiJjo6LXdlYmtpdC1vdXRlci1zcGluLWJ1dHRvblwiOiB7XG4gICAgICAgIFdlYmtpdEFwcGVhcmFuY2U6IFwibm9uZVwiLFxuICAgICAgICBtYXJnaW46IDBcbiAgICB9XG59KTtcblxuY29uc3QgbGFiZWxTdHlsZSA9IGNzcyh7XG4gICAgbWFyZ2luQm90dG9tOiA4LFxuICAgIHBhZGRpbmc6IFwiMHB4IDhweFwiLFxuICAgIFwiJiBzcGFuXCI6IHtcbiAgICAgICAgY29sb3I6IFwidmFyKC0tbWRjLXRoZW1lLXRleHQtcHJpbWFyeS1vbi1iYWNrZ3JvdW5kKVwiXG4gICAgfVxufSk7XG5cbmludGVyZmFjZSBHZXRWYWx1ZVBhcmFtcyB7XG4gICAgdmFsdWU6IHN0cmluZyB8IG51bWJlciB8IHVuZGVmaW5lZDtcbiAgICBkZWZhdWx0VmFsdWU6IHN0cmluZyB8IG51bWJlcjtcbiAgICB0eXBlOiBcIm51bWJlclwiIHwgXCJzdHJpbmdcIjtcbn1cbmNvbnN0IGdldFZhbHVlID0gKHBhcmFtczogR2V0VmFsdWVQYXJhbXMpOiBzdHJpbmcgPT4ge1xuICAgIGNvbnN0IHsgdmFsdWUsIGRlZmF1bHRWYWx1ZSwgdHlwZSB9ID0gcGFyYW1zO1xuICAgIGlmICh0eXBlID09PSBcIm51bWJlclwiKSB7XG4gICAgICAgIHJldHVybiAoaXNOYU4odmFsdWUgYXMgbnVtYmVyKSA/IGRlZmF1bHRWYWx1ZSA6IHZhbHVlKSBhcyBzdHJpbmc7XG4gICAgfVxuICAgIHJldHVybiAodmFsdWUgfHwgZGVmYXVsdFZhbHVlKSBhcyBzdHJpbmc7XG59O1xuXG5leHBvcnQgdHlwZSBPbktleURvd25Qcm9wcyA9IFJlYWN0LlN5bnRoZXRpY0V2ZW50PEhUTUxJbnB1dEVsZW1lbnQsIEV2ZW50PiAmXG4gICAgUmVhY3QuS2V5Ym9hcmRFdmVudDxIVE1MSW5wdXRFbGVtZW50PjtcblxuaW50ZXJmYWNlIElucHV0Qm94UHJvcHMge1xuICAgIHZhbHVlPzogc3RyaW5nIHwgbnVtYmVyO1xuICAgIG9uQ2hhbmdlPzogKHZhbHVlOiBhbnkpID0+IHZvaWQ7XG4gICAgb25LZXlEb3duPzogKGU6IE9uS2V5RG93blByb3BzKSA9PiBhbnk7XG4gICAgZGVmYXVsdFZhbHVlPzogc3RyaW5nIHwgbnVtYmVyO1xuICAgIHR5cGU/OiBcInN0cmluZ1wiIHwgXCJudW1iZXJcIjtcbiAgICBba2V5OiBzdHJpbmddOiBhbnk7XG59XG5jb25zdCBJbnB1dEZpZWxkID0gKHtcbiAgICBjbGFzc05hbWUsXG4gICAgdmFsdWUsXG4gICAgb25DaGFuZ2UsXG4gICAgb25LZXlEb3duLFxuICAgIGxhYmVsLFxuICAgIGRlc2NyaXB0aW9uLFxuICAgIHZhbGlkYXRpb24gPSB7IGlzVmFsaWQ6IHRydWUgfSxcbiAgICBkZWZhdWx0VmFsdWUgPSBcIlwiLFxuICAgIC4uLnByb3BzXG59OiBJbnB1dEJveFByb3BzKSA9PiB7XG4gICAgcmV0dXJuIChcbiAgICAgICAgPFJlYWN0LkZyYWdtZW50PlxuICAgICAgICAgICAge2xhYmVsICYmIChcbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT17bGFiZWxTdHlsZX0+XG4gICAgICAgICAgICAgICAgICAgIDxUeXBvZ3JhcGh5IHVzZT17XCJib2R5MlwifT57bGFiZWx9PC9UeXBvZ3JhcGh5PlxuICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgKX1cbiAgICAgICAgICAgIDxpbnB1dFxuICAgICAgICAgICAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lcyhpbnB1dFN0eWxlLCBjbGFzc05hbWUpfVxuICAgICAgICAgICAgICAgIHZhbHVlPXtnZXRWYWx1ZSh7XG4gICAgICAgICAgICAgICAgICAgIHZhbHVlLFxuICAgICAgICAgICAgICAgICAgICB0eXBlOiBwcm9wcy50eXBlIHx8IFwic3RyaW5nXCIsXG4gICAgICAgICAgICAgICAgICAgIGRlZmF1bHRWYWx1ZVxuICAgICAgICAgICAgICAgIH0pfVxuICAgICAgICAgICAgICAgIG9uS2V5RG93bj17b25LZXlEb3dufVxuICAgICAgICAgICAgICAgIG9uQ2hhbmdlPXtldiA9PiB7XG4gICAgICAgICAgICAgICAgICAgIGlmICghb25DaGFuZ2UpIHtcbiAgICAgICAgICAgICAgICAgICAgICAgIHJldHVybjtcbiAgICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgICAgICBvbkNoYW5nZSgoZXYudGFyZ2V0LnZhbHVlIHx8IFwiXCIpLnRvTG93ZXJDYXNlKCkpO1xuICAgICAgICAgICAgICAgIH19XG4gICAgICAgICAgICAgICAgey4uLm9taXQocHJvcHMsIFwidmFsaWRhdGVcIil9XG4gICAgICAgICAgICAvPlxuICAgICAgICAgICAge3ZhbGlkYXRpb24uaXNWYWxpZCA9PT0gZmFsc2UgJiYgKFxuICAgICAgICAgICAgICAgIDxGb3JtRWxlbWVudE1lc3NhZ2UgZXJyb3I+e3ZhbGlkYXRpb24ubWVzc2FnZX08L0Zvcm1FbGVtZW50TWVzc2FnZT5cbiAgICAgICAgICAgICl9XG4gICAgICAgICAgICB7dmFsaWRhdGlvbi5pc1ZhbGlkICE9PSBmYWxzZSAmJiBkZXNjcmlwdGlvbiAmJiAoXG4gICAgICAgICAgICAgICAgPEZvcm1FbGVtZW50TWVzc2FnZT57ZGVzY3JpcHRpb259PC9Gb3JtRWxlbWVudE1lc3NhZ2U+XG4gICAgICAgICAgICApfVxuICAgICAgICA8L1JlYWN0LkZyYWdtZW50PlxuICAgICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBSZWFjdC5tZW1vKElucHV0RmllbGQpO1xuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const getValue = params => {
+  const {
+    value,
+    defaultValue,
+    type
+  } = params;
   if (type === "number") {
     return isNaN(value) ? defaultValue : value;
   }
   return value || defaultValue;
 };
-var InputField = function InputField(_ref) {
-  var className = _ref.className,
-    value = _ref.value,
-    _onChange = _ref.onChange,
-    onKeyDown = _ref.onKeyDown,
-    label = _ref.label,
-    description = _ref.description,
-    _ref$validation = _ref.validation,
-    validation = _ref$validation === void 0 ? {
-      isValid: true
-    } : _ref$validation,
-    _ref$defaultValue = _ref.defaultValue,
-    defaultValue = _ref$defaultValue === void 0 ? "" : _ref$defaultValue,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, label && /*#__PURE__*/_react.default.createElement("div", {
+const InputField = ({
+  className,
+  value,
+  onChange,
+  onKeyDown,
+  label,
+  description,
+  validation = {
+    isValid: true
+  },
+  defaultValue = "",
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement("div", {
     className: labelStyle
-  }, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+  }, /*#__PURE__*/React.createElement(Typography, {
     use: "body2"
-  }, label)), /*#__PURE__*/_react.default.createElement("input", Object.assign({
-    className: (0, _classnames.default)(inputStyle, className),
+  }, label)), /*#__PURE__*/React.createElement("input", Object.assign({
+    className: classNames(inputStyle, className),
     value: getValue({
-      value: value,
+      value,
       type: props.type || "string",
-      defaultValue: defaultValue
+      defaultValue
     }),
     onKeyDown: onKeyDown,
-    onChange: function onChange(ev) {
-      if (!_onChange) {
+    onChange: ev => {
+      if (!onChange) {
         return;
       }
-      _onChange((ev.target.value || "").toLowerCase());
+      onChange((ev.target.value || "").toLowerCase());
     }
-  }, (0, _omit.default)(props, "validate"))), validation.isValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
+  }, omit(props, "validate"))), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
     error: true
-  }, validation.message), validation.isValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description));
+  }, validation.message), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
 };
-var _default = /*#__PURE__*/_react.default.memo(InputField);
-exports.default = _default;
+export default /*#__PURE__*/React.memo(InputField);
+
+//# sourceMappingURL=InputField.js.map

package/components/SimpleUI/InputField.js.map

@@ -1 +1 @@
-{"version":3,"names":["inputStyle","css","boxSizing","border","width","height","padding","textAlign","minHeight","backgroundColor","transition","opacity","cursor","WebkitAppearance","margin","labelStyle","marginBottom","color","getValue","params","value","defaultValue","type","isNaN","InputField","className","onChange","onKeyDown","label","description","validation","isValid","props","classNames","ev","target","toLowerCase","omit","message","React","memo"],"sources":["InputField.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\nimport omit from \"lodash/omit\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { FormElementMessage } from \"@webiny/ui/FormElementMessage\";\n\nconst inputStyle = css({\n    boxSizing: \"border-box\",\n    border: \"1px solid var(--mdc-theme-on-background)\",\n    width: \"100%\",\n    height: \"100%\",\n    padding: \"4px 8px\",\n    textAlign: \"left\",\n    minHeight: 32,\n    backgroundColor: \"var(--mdc-theme-surface)\",\n    transition: \"150ms all ease-in-out\",\n    \"&:focus:not(:disabled)\": {\n        backgroundColor: \"var(--mdc-theme-on-background)\"\n    },\n    \"&:hover:not(:disabled)\": {\n        backgroundColor: \"var(--mdc-theme-on-background)\"\n    },\n    \"&:disabled\": {\n        opacity: 0.5,\n        cursor: \"not-allowed\"\n    },\n\n    \"&.text-center\": {\n        textAlign: \"center\",\n        padding: 4\n    },\n\n    \"&::-webkit-inner-spin-button\": {\n        WebkitAppearance: \"none\",\n        margin: 0\n    },\n    \"&::-webkit-outer-spin-button\": {\n        WebkitAppearance: \"none\",\n        margin: 0\n    }\n});\n\nconst labelStyle = css({\n    marginBottom: 8,\n    padding: \"0px 8px\",\n    \"& span\": {\n        color: \"var(--mdc-theme-text-primary-on-background)\"\n    }\n});\n\ninterface GetValueParams {\n    value: string | number | undefined;\n    defaultValue: string | number;\n    type: \"number\" | \"string\";\n}\nconst getValue = (params: GetValueParams): string => {\n    const { value, defaultValue, type } = params;\n    if (type === \"number\") {\n        return (isNaN(value as number) ? defaultValue : value) as string;\n    }\n    return (value || defaultValue) as string;\n};\n\ninterface InputBoxProps {\n    value?: string | number;\n    onChange?: (value: any) => void;\n    onKeyDown?: (e: React.SyntheticEvent<HTMLInputElement>) => any;\n    defaultValue?: string | number;\n    type?: \"string\" | \"number\";\n    [key: string]: any;\n}\nconst InputField: React.FC<InputBoxProps> = ({\n    className,\n    value,\n    onChange,\n    onKeyDown,\n    label,\n    description,\n    validation = { isValid: true },\n    defaultValue = \"\",\n    ...props\n}) => {\n    return (\n        <React.Fragment>\n            {label && (\n                <div className={labelStyle}>\n                    <Typography use={\"body2\"}>{label}</Typography>\n                </div>\n            )}\n            <input\n                className={classNames(inputStyle, className)}\n                value={getValue({\n                    value,\n                    type: props.type || \"string\",\n                    defaultValue\n                })}\n                onKeyDown={onKeyDown}\n                onChange={ev => {\n                    if (!onChange) {\n                        return;\n                    }\n                    onChange((ev.target.value || \"\").toLowerCase());\n                }}\n                {...omit(props, \"validate\")}\n            />\n            {validation.isValid === false && (\n                <FormElementMessage error>{validation.message}</FormElementMessage>\n            )}\n            {validation.isValid !== false && description && (\n                <FormElementMessage>{description}</FormElementMessage>\n            )}\n        </React.Fragment>\n    );\n};\n\nexport default React.memo(InputField);\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAAmE;AAEnE,IAAMA,UAAU,gBAAG,IAAAC,YAAG,EAAC;EACnBC,SAAS,EAAE,YAAY;EACvBC,MAAM,EAAE,0CAA0C;EAClDC,KAAK,EAAE,MAAM;EACbC,MAAM,EAAE,MAAM;EACdC,OAAO,EAAE,SAAS;EAClBC,SAAS,EAAE,MAAM;EACjBC,SAAS,EAAE,EAAE;EACbC,eAAe,EAAE,0BAA0B;EAC3CC,UAAU,EAAE,uBAAuB;EACnC,wBAAwB,EAAE;IACtBD,eAAe,EAAE;EACrB,CAAC;EACD,wBAAwB,EAAE;IACtBA,eAAe,EAAE;EACrB,CAAC;EACD,YAAY,EAAE;IACVE,OAAO,EAAE,GAAG;IACZC,MAAM,EAAE;EACZ,CAAC;EAED,eAAe,EAAE;IACbL,SAAS,EAAE,QAAQ;IACnBD,OAAO,EAAE;EACb,CAAC;EAED,8BAA8B,EAAE;IAC5BO,gBAAgB,EAAE,MAAM;IACxBC,MAAM,EAAE;EACZ,CAAC;EACD,8BAA8B,EAAE;IAC5BD,gBAAgB,EAAE,MAAM;IACxBC,MAAM,EAAE;EACZ;AACJ,CAAC,sBAAC;AAEF,IAAMC,UAAU,gBAAG,IAAAd,YAAG,EAAC;EACnBe,YAAY,EAAE,CAAC;EACfV,OAAO,EAAE,SAAS;EAClB,QAAQ,EAAE;IACNW,KAAK,EAAE;EACX;AACJ,CAAC,sBAAC;AAOF,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,CAAIC,MAAsB,EAAa;EACjD,IAAQC,KAAK,GAAyBD,MAAM,CAApCC,KAAK;IAAEC,YAAY,GAAWF,MAAM,CAA7BE,YAAY;IAAEC,IAAI,GAAKH,MAAM,CAAfG,IAAI;EACjC,IAAIA,IAAI,KAAK,QAAQ,EAAE;IACnB,OAAQC,KAAK,CAACH,KAAK,CAAW,GAAGC,YAAY,GAAGD,KAAK;EACzD;EACA,OAAQA,KAAK,IAAIC,YAAY;AACjC,CAAC;AAUD,IAAMG,UAAmC,GAAG,SAAtCA,UAAmC,OAUnC;EAAA,IATFC,SAAS,QAATA,SAAS;IACTL,KAAK,QAALA,KAAK;IACLM,SAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACTC,KAAK,QAALA,KAAK;IACLC,WAAW,QAAXA,WAAW;IAAA,uBACXC,UAAU;IAAVA,UAAU,gCAAG;MAAEC,OAAO,EAAE;IAAK,CAAC;IAAA,yBAC9BV,YAAY;IAAZA,YAAY,kCAAG,EAAE;IACdW,KAAK;EAER,oBACI,6BAAC,cAAK,CAAC,QAAQ,QACVJ,KAAK,iBACF;IAAK,SAAS,EAAEb;EAAW,gBACvB,6BAAC,sBAAU;IAAC,GAAG,EAAE;EAAQ,GAAEa,KAAK,CAAc,CAErD,eACD;IACI,SAAS,EAAE,IAAAK,mBAAU,EAACjC,UAAU,EAAEyB,SAAS,CAAE;IAC7C,KAAK,EAAEP,QAAQ,CAAC;MACZE,KAAK,EAALA,KAAK;MACLE,IAAI,EAAEU,KAAK,CAACV,IAAI,IAAI,QAAQ;MAC5BD,YAAY,EAAZA;IACJ,CAAC,CAAE;IACH,SAAS,EAAEM,SAAU;IACrB,QAAQ,EAAE,kBAAAO,EAAE,EAAI;MACZ,IAAI,CAACR,SAAQ,EAAE;QACX;MACJ;MACAA,SAAQ,CAAC,CAACQ,EAAE,CAACC,MAAM,CAACf,KAAK,IAAI,EAAE,EAAEgB,WAAW,EAAE,CAAC;IACnD;EAAE,GACE,IAAAC,aAAI,EAACL,KAAK,EAAE,UAAU,CAAC,EAC7B,EACDF,UAAU,CAACC,OAAO,KAAK,KAAK,iBACzB,6BAAC,sCAAkB;IAAC,KAAK;EAAA,GAAED,UAAU,CAACQ,OAAO,CAChD,EACAR,UAAU,CAACC,OAAO,KAAK,KAAK,IAAIF,WAAW,iBACxC,6BAAC,sCAAkB,QAAEA,WAAW,CACnC,CACY;AAEzB,CAAC;AAAC,4BAEaU,cAAK,CAACC,IAAI,CAAChB,UAAU,CAAC;AAAA"}
+{"version":3,"names":["React","css","classNames","omit","Typography","FormElementMessage","inputStyle","process","env","NODE_ENV","name","styles","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","labelStyle","getValue","params","value","defaultValue","type","isNaN","InputField","className","onChange","onKeyDown","label","description","validation","isValid","props","createElement","Fragment","use","Object","assign","ev","target","toLowerCase","error","message","memo"],"sources":["InputField.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"@emotion/css\";\nimport classNames from \"classnames\";\nimport omit from \"lodash/omit.js\";\nimport { Typography } from \"@webiny/ui/Typography/index.js\";\nimport { FormElementMessage } from \"@webiny/ui/FormElementMessage/index.js\";\n\nconst inputStyle = css({\n    boxSizing: \"border-box\",\n    border: \"1px solid var(--mdc-theme-on-background)\",\n    width: \"100%\",\n    height: \"100%\",\n    padding: \"4px 8px\",\n    textAlign: \"left\",\n    minHeight: 32,\n    backgroundColor: \"var(--mdc-theme-surface)\",\n    transition: \"150ms all ease-in-out\",\n    \"&:focus:not(:disabled)\": {\n        backgroundColor: \"var(--mdc-theme-on-background)\"\n    },\n    \"&:hover:not(:disabled)\": {\n        backgroundColor: \"var(--mdc-theme-on-background)\"\n    },\n    \"&:disabled\": {\n        opacity: 0.5,\n        cursor: \"not-allowed\"\n    },\n\n    \"&.text-center\": {\n        textAlign: \"center\",\n        padding: 4\n    },\n\n    \"&::-webkit-inner-spin-button\": {\n        WebkitAppearance: \"none\",\n        margin: 0\n    },\n    \"&::-webkit-outer-spin-button\": {\n        WebkitAppearance: \"none\",\n        margin: 0\n    }\n});\n\nconst labelStyle = css({\n    marginBottom: 8,\n    padding: \"0px 8px\",\n    \"& span\": {\n        color: \"var(--mdc-theme-text-primary-on-background)\"\n    }\n});\n\ninterface GetValueParams {\n    value: string | number | undefined;\n    defaultValue: string | number;\n    type: \"number\" | \"string\";\n}\nconst getValue = (params: GetValueParams): string => {\n    const { value, defaultValue, type } = params;\n    if (type === \"number\") {\n        return (isNaN(value as number) ? defaultValue : value) as string;\n    }\n    return (value || defaultValue) as string;\n};\n\nexport type OnKeyDownProps = React.SyntheticEvent<HTMLInputElement, Event> &\n    React.KeyboardEvent<HTMLInputElement>;\n\ninterface InputBoxProps {\n    value?: string | number;\n    onChange?: (value: any) => void;\n    onKeyDown?: (e: OnKeyDownProps) => any;\n    defaultValue?: string | number;\n    type?: \"string\" | \"number\";\n    [key: string]: any;\n}\nconst InputField = ({\n    className,\n    value,\n    onChange,\n    onKeyDown,\n    label,\n    description,\n    validation = { isValid: true },\n    defaultValue = \"\",\n    ...props\n}: InputBoxProps) => {\n    return (\n        <React.Fragment>\n            {label && (\n                <div className={labelStyle}>\n                    <Typography use={\"body2\"}>{label}</Typography>\n                </div>\n            )}\n            <input\n                className={classNames(inputStyle, className)}\n                value={getValue({\n                    value,\n                    type: props.type || \"string\",\n                    defaultValue\n                })}\n                onKeyDown={onKeyDown}\n                onChange={ev => {\n                    if (!onChange) {\n                        return;\n                    }\n                    onChange((ev.target.value || \"\").toLowerCase());\n                }}\n                {...omit(props, \"validate\")}\n            />\n            {validation.isValid === false && (\n                <FormElementMessage error>{validation.message}</FormElementMessage>\n            )}\n            {validation.isValid !== false && description && (\n                <FormElementMessage>{description}</FormElementMessage>\n            )}\n        </React.Fragment>\n    );\n};\n\nexport default React.memo(InputField);\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,GAAG,QAAQ,cAAc;AAClC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,IAAI,MAAM,gBAAgB;AACjC,SAASC,UAAU,QAAQ,gCAAgC;AAC3D,SAASC,kBAAkB,QAAQ,wCAAwC;AAE3E,MAAMC,UAAU,gBAAGL,GAAG,CAAAM,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,QAAA,EAAAC;AAAA,CAkCrB,CAAC;AAEF,MAAMC,UAAU,gBAAGb,GAAG,CAAAM,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,QAAA,EAAAC;AAAA,CAMrB,CAAC;AAOF,MAAME,QAAQ,GAAIC,MAAsB,IAAa;EACjD,MAAM;IAAEC,KAAK;IAAEC,YAAY;IAAEC;EAAK,CAAC,GAAGH,MAAM;EAC5C,IAAIG,IAAI,KAAK,QAAQ,EAAE;IACnB,OAAQC,KAAK,CAACH,KAAe,CAAC,GAAGC,YAAY,GAAGD,KAAK;EACzD;EACA,OAAQA,KAAK,IAAIC,YAAY;AACjC,CAAC;AAaD,MAAMG,UAAU,GAAGA,CAAC;EAChBC,SAAS;EACTL,KAAK;EACLM,QAAQ;EACRC,SAAS;EACTC,KAAK;EACLC,WAAW;EACXC,UAAU,GAAG;IAAEC,OAAO,EAAE;EAAK,CAAC;EAC9BV,YAAY,GAAG,EAAE;EACjB,GAAGW;AACQ,CAAC,KAAK;EACjB,oBACI7B,KAAA,CAAA8B,aAAA,CAAC9B,KAAK,CAAC+B,QAAQ,QACVN,KAAK,iBACFzB,KAAA,CAAA8B,aAAA;IAAKR,SAAS,EAAER;EAAW,gBACvBd,KAAA,CAAA8B,aAAA,CAAC1B,UAAU;IAAC4B,GAAG,EAAE;EAAQ,GAAEP,KAAkB,CAC5C,CACR,eACDzB,KAAA,CAAA8B,aAAA,UAAAG,MAAA,CAAAC,MAAA;IACIZ,SAAS,EAAEpB,UAAU,CAACI,UAAU,EAAEgB,SAAS,CAAE;IAC7CL,KAAK,EAAEF,QAAQ,CAAC;MACZE,KAAK;MACLE,IAAI,EAAEU,KAAK,CAACV,IAAI,IAAI,QAAQ;MAC5BD;IACJ,CAAC,CAAE;IACHM,SAAS,EAAEA,SAAU;IACrBD,QAAQ,EAAEY,EAAE,IAAI;MACZ,IAAI,CAACZ,QAAQ,EAAE;QACX;MACJ;MACAA,QAAQ,CAAC,CAACY,EAAE,CAACC,MAAM,CAACnB,KAAK,IAAI,EAAE,EAAEoB,WAAW,CAAC,CAAC,CAAC;IACnD;EAAE,GACElC,IAAI,CAAC0B,KAAK,EAAE,UAAU,CAAC,CAC9B,CAAC,EACDF,UAAU,CAACC,OAAO,KAAK,KAAK,iBACzB5B,KAAA,CAAA8B,aAAA,CAACzB,kBAAkB;IAACiC,KAAK;EAAA,GAAEX,UAAU,CAACY,OAA4B,CACrE,EACAZ,UAAU,CAACC,OAAO,KAAK,KAAK,IAAIF,WAAW,iBACxC1B,KAAA,CAAA8B,aAAA,CAACzB,kBAAkB,QAAEqB,WAAgC,CAE7C,CAAC;AAEzB,CAAC;AAED,4BAAe1B,KAAK,CAACwC,IAAI,CAACnB,UAAU,CAAC","ignoreList":[]}

package/components/SingleImageUpload.d.ts

@@ -1,6 +1,7 @@
-import * as React from "react";
-import { FileManagerFileItem } from "./FileManager";
-import { FormComponentProps } from "@webiny/ui/types";
+import React from "react";
+import type { FileManagerFileItem } from "../index.js";
+import type { FormComponentProps } from "@webiny/ui/types.js";
+import { type FilePickerProps } from "@webiny/admin-ui";
 export interface SingleImageUploadProps extends FormComponentProps {
     /**
      * Accept types
@@ -32,7 +33,7 @@ export interface SingleImageUploadProps extends FormComponentProps {
      * It is marked as `optional` because this component is often used in conjunction with <Bind>, which injects the
      * `onChange` into its child element. In that case, that prop is not passed by the developer.
      */
-    onChange?: (value: FileManagerFileItem | null) => void;
+    onChange?: (value: Pick<FileManagerFileItem, "id" | "src"> | null) => void;
     /**
      * Optional custom props, passed to the preview image.
      */
@@ -43,13 +44,25 @@ export interface SingleImageUploadProps extends FormComponentProps {
     includeFileMeta?: boolean;
     /**
      * Is the wrapper round?
+     * @deprecated Provide a custom `renderImagePreview` instead.
      */
     round?: boolean;
     /**
-     * Define the properties that are returned on file(s) selection.
-     * @deprecated Pick the desired file attributes in the `onChange` callback, or `beforeChange` on the `<Bind>` element.
+     * Render the image preview.
      */
-    onChangePick?: string[];
+    renderFilePreview?: FilePickerProps["renderFilePreview"];
+    /**
+     * Render the trigger button.
+     */
+    renderTrigger?: FilePickerProps["renderTrigger"];
+    /**
+     * Component type.
+     */
+    type?: FilePickerProps["type"];
+    /**
+     * Component variant.
+     */
+    variant?: FilePickerProps["variant"];
 }
-declare const SingleImageUpload: React.FC<SingleImageUploadProps>;
+declare const SingleImageUpload: (props: SingleImageUploadProps) => React.JSX.Element;
 export default SingleImageUpload;

package/components/SingleImageUpload.js

@@ -1,52 +1,23 @@
-"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.default = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _Image = require("@webiny/app/components/Image");
-var Ui = _interopRequireWildcard(require("@webiny/ui/ImageUpload"));
-var _FileManager = require("./FileManager");
-var _FormElementMessage = require("@webiny/ui/FormElementMessage");
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-var ImageUploadWrapper = /*#__PURE__*/(0, _styled.default)("div", {
-  target: "ek1tjbh0",
-  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)"
-  }
-});
-var SingleImageUpload = function SingleImageUpload(props) {
-  var className = props.className,
-    value = props.value,
-    validation = props.validation,
-    label = props.label,
-    description = props.description,
-    accept = props.accept,
-    _props$includeFileMet = props.includeFileMeta,
-    includeFileMeta = _props$includeFileMet === void 0 ? false : _props$includeFileMet,
-    maxSize = props.maxSize,
-    imagePreviewProps = props.imagePreviewProps,
-    round = props.round;
-  var _ref = validation || {},
-    validationIsValid = _ref.isValid,
-    validationMessage = _ref.message;
-  var onChange = (0, React.useCallback)(function (value) {
+import React, { useCallback } from "react";
+import { FileManager } from "../index.js";
+import { FileItem, FilePicker } from "@webiny/admin-ui";
+const SingleImageUpload = props => {
+  const {
+    accept,
+    className,
+    description,
+    disabled,
+    includeFileMeta = false,
+    label,
+    maxSize,
+    renderFilePreview,
+    renderTrigger,
+    validation,
+    value,
+    variant,
+    type
+  } = props;
+  const onChange = useCallback(value => {
     if (!props.onChange) {
       return;
     }
@@ -63,36 +34,29 @@ var SingleImageUpload = function SingleImageUpload(props) {
     }
     props.onChange(null);
   }, [props.onChange]);
-  return /*#__PURE__*/React.createElement(ImageUploadWrapper, {
-    className: className
-  }, label && /*#__PURE__*/React.createElement("div", {
-    className: "mdc-floating-label mdc-floating-label--float-above"
-  }, label), /*#__PURE__*/React.createElement(_FileManager.FileManager, {
+  return /*#__PURE__*/React.createElement(FileManager, {
     onChange: onChange,
     accept: accept,
     images: !accept,
     maxSize: maxSize,
-    render: function render(_ref2) {
-      var showFileManager = _ref2.showFileManager;
-      return /*#__PURE__*/React.createElement(Ui.Image, {
-        renderImagePreview: function renderImagePreview(renderImageProps) {
-          return /*#__PURE__*/React.createElement(_Image.Image, Object.assign({}, renderImageProps, imagePreviewProps));
-        },
-        style: {
-          width: "100%",
-          height: "auto"
-        },
-        value: value,
-        uploadImage: showFileManager,
-        removeImage: function removeImage() {
-          return onChange(null);
-        },
-        round: round
-      });
-    }
-  }), validationIsValid === false && /*#__PURE__*/React.createElement(_FormElementMessage.FormElementMessage, {
-    error: true
-  }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/React.createElement(_FormElementMessage.FormElementMessage, null, description));
+    render: ({
+      showFileManager
+    }) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FilePicker, {
+      label: label,
+      description: description,
+      validation: validation,
+      className: className,
+      disabled: disabled,
+      value: value ? FileItem.createFromUrl(value.src) : null,
+      onSelectItem: showFileManager,
+      onRemoveItem: () => onChange(null),
+      renderFilePreview: renderFilePreview,
+      renderTrigger: renderTrigger,
+      variant: variant,
+      type: type
+    }))
+  });
 };
-var _default = SingleImageUpload;
-exports.default = _default;
+export default SingleImageUpload;
+
+//# sourceMappingURL=SingleImageUpload.js.map

package/components/SingleImageUpload.js.map

@@ -1 +1 @@
-{"version":3,"names":["ImageUploadWrapper","styled","position","opacity","pointerEvents","transform","top","left","color","SingleImageUpload","props","className","value","validation","label","description","accept","includeFileMeta","maxSize","imagePreviewProps","round","validationIsValid","isValid","validationMessage","message","onChange","useCallback","id","src","showFileManager","renderImageProps","width","height"],"sources":["SingleImageUpload.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Image } from \"@webiny/app/components/Image\";\nimport * as Ui from \"@webiny/ui/ImageUpload\";\nimport { FileManager, FileManagerFileItem } from \"./FileManager\";\nimport { FormComponentProps } from \"@webiny/ui/types\";\nimport { FormElementMessage } from \"@webiny/ui/FormElementMessage\";\nimport styled from \"@emotion/styled\";\nimport { useCallback } from \"react\";\n\nconst ImageUploadWrapper = styled(\"div\")({\n    position: \"relative\",\n    \".disabled\": {\n        opacity: 0.75,\n        pointerEvents: \"none\"\n    },\n    \".mdc-floating-label--float-above\": {\n        transform: \"scale(0.75)\",\n        top: 10,\n        left: 10,\n        color: \"var(--mdc-theme-text-secondary-on-background)\"\n    },\n    \".mdc-text-field-helper-text\": {\n        color: \"var(--mdc-theme-text-secondary-on-background)\"\n    }\n});\n\nexport interface SingleImageUploadProps extends FormComponentProps {\n    /**\n     * Accept types\n     */\n    accept?: string[];\n\n    /**\n     * Component label.\n     */\n    label?: string;\n\n    /**\n     * Is component disabled?\n     */\n    disabled?: boolean;\n\n    /**\n     * Description beneath the image.\n     */\n    description?: React.ReactNode;\n\n    /**\n     * A className for the root element.\n     */\n    className?: string;\n\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     */\n    maxSize?: number | string;\n\n    /**\n     * onChange callback when a file is set or unset.\n     * It is marked as `optional` because this component is often used in conjunction with <Bind>, which injects the\n     * `onChange` into its child element. In that case, that prop is not passed by the developer.\n     */\n    onChange?: (value: FileManagerFileItem | null) => void;\n\n    /**\n     * Optional custom props, passed to the preview image.\n     */\n    imagePreviewProps?: any;\n\n    /**\n     * By default, file meta is not included in the data passed to `onChange`. If you need it, set this flag to true.\n     */\n    includeFileMeta?: boolean;\n\n    /**\n     * Is the wrapper round?\n     */\n    round?: boolean;\n\n    /**\n     * Define the properties that are returned on file(s) selection.\n     * @deprecated Pick the desired file attributes in the `onChange` callback, or `beforeChange` on the `<Bind>` element.\n     */\n    onChangePick?: string[];\n}\n\nconst SingleImageUpload: React.FC<SingleImageUploadProps> = props => {\n    const {\n        className,\n        value,\n        validation,\n        label,\n        description,\n        accept,\n        includeFileMeta = false,\n        maxSize,\n        imagePreviewProps,\n        round\n    } = props;\n\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n    const onChange = useCallback(\n        (value: FileManagerFileItem | null) => {\n            if (!props.onChange) {\n                return;\n            }\n\n            if (value && !includeFileMeta) {\n                props.onChange({ id: value.id, src: value.src });\n                return;\n            }\n\n            if (value && includeFileMeta) {\n                props.onChange(value);\n                return;\n            }\n\n            props.onChange(null);\n        },\n        [props.onChange]\n    );\n\n    return (\n        <ImageUploadWrapper className={className}>\n            {label && (\n                <div className=\"mdc-floating-label mdc-floating-label--float-above\">{label}</div>\n            )}\n\n            <FileManager\n                onChange={onChange}\n                accept={accept}\n                images={!accept}\n                maxSize={maxSize}\n                render={({ showFileManager }) => (\n                    <Ui.Image\n                        renderImagePreview={renderImageProps => (\n                            <Image {...renderImageProps} {...imagePreviewProps} />\n                        )}\n                        style={{ width: \"100%\", height: \"auto\" }}\n                        value={value}\n                        uploadImage={showFileManager}\n                        removeImage={() => onChange(null)}\n                        round={round}\n                    />\n                )}\n            />\n\n            {validationIsValid === false && (\n                <FormElementMessage error>{validationMessage}</FormElementMessage>\n            )}\n            {validationIsValid !== false && description && (\n                <FormElementMessage>{description}</FormElementMessage>\n            )}\n        </ImageUploadWrapper>\n    );\n};\n\nexport default SingleImageUpload;\n"],"mappings":"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"}
+{"version":3,"names":["React","useCallback","FileManager","FileItem","FilePicker","SingleImageUpload","props","accept","className","description","disabled","includeFileMeta","label","maxSize","renderFilePreview","renderTrigger","validation","value","variant","type","onChange","id","src","createElement","images","render","showFileManager","Fragment","createFromUrl","onSelectItem","onRemoveItem"],"sources":["SingleImageUpload.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport type { FileManagerFileItem } from \"~/index.js\";\nimport { FileManager } from \"~/index.js\";\nimport type { FormComponentProps } from \"@webiny/ui/types.js\";\nimport { FileItem, FilePicker, type FilePickerProps } from \"@webiny/admin-ui\";\n\nexport interface SingleImageUploadProps extends FormComponentProps {\n    /**\n     * Accept types\n     */\n    accept?: string[];\n\n    /**\n     * Component label.\n     */\n    label?: string;\n\n    /**\n     * Is component disabled?\n     */\n    disabled?: boolean;\n\n    /**\n     * Description beneath the image.\n     */\n    description?: React.ReactNode;\n\n    /**\n     * A className for the root element.\n     */\n    className?: string;\n\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     */\n    maxSize?: number | string;\n\n    /**\n     * onChange callback when a file is set or unset.\n     * It is marked as `optional` because this component is often used in conjunction with <Bind>, which injects the\n     * `onChange` into its child element. In that case, that prop is not passed by the developer.\n     */\n    onChange?: (value: Pick<FileManagerFileItem, \"id\" | \"src\"> | null) => void;\n\n    /**\n     * Optional custom props, passed to the preview image.\n     */\n    imagePreviewProps?: any;\n\n    /**\n     * By default, file meta is not included in the data passed to `onChange`. If you need it, set this flag to true.\n     */\n    includeFileMeta?: boolean;\n\n    /**\n     * Is the wrapper round?\n     * @deprecated Provide a custom `renderImagePreview` instead.\n     */\n    round?: boolean;\n\n    /**\n     * Render the image preview.\n     */\n    renderFilePreview?: FilePickerProps[\"renderFilePreview\"];\n\n    /**\n     * Render the trigger button.\n     */\n    renderTrigger?: FilePickerProps[\"renderTrigger\"];\n\n    /**\n     * Component type.\n     */\n    type?: FilePickerProps[\"type\"];\n\n    /**\n     * Component variant.\n     */\n    variant?: FilePickerProps[\"variant\"];\n}\n\nconst SingleImageUpload = (props: SingleImageUploadProps) => {\n    const {\n        accept,\n        className,\n        description,\n        disabled,\n        includeFileMeta = false,\n        label,\n        maxSize,\n        renderFilePreview,\n        renderTrigger,\n        validation,\n        value,\n        variant,\n        type\n    } = props;\n\n    const onChange = useCallback(\n        (value: FileManagerFileItem | null) => {\n            if (!props.onChange) {\n                return;\n            }\n\n            if (value && !includeFileMeta) {\n                props.onChange({ id: value.id, src: value.src });\n                return;\n            }\n\n            if (value && includeFileMeta) {\n                props.onChange(value);\n                return;\n            }\n\n            props.onChange(null);\n        },\n        [props.onChange]\n    );\n\n    return (\n        <FileManager\n            onChange={onChange}\n            accept={accept}\n            images={!accept}\n            maxSize={maxSize}\n            render={({ showFileManager }) => (\n                <>\n                    <FilePicker\n                        label={label}\n                        description={description}\n                        validation={validation}\n                        className={className}\n                        disabled={disabled}\n                        value={value ? FileItem.createFromUrl(value.src) : null}\n                        onSelectItem={showFileManager}\n                        onRemoveItem={() => onChange(null)}\n                        renderFilePreview={renderFilePreview}\n                        renderTrigger={renderTrigger}\n                        variant={variant}\n                        type={type}\n                    />\n                </>\n            )}\n        />\n    );\n};\n\nexport default SingleImageUpload;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAE1C,SAASC,WAAW;AAEpB,SAASC,QAAQ,EAAEC,UAAU,QAA8B,kBAAkB;AA8E7E,MAAMC,iBAAiB,GAAIC,KAA6B,IAAK;EACzD,MAAM;IACFC,MAAM;IACNC,SAAS;IACTC,WAAW;IACXC,QAAQ;IACRC,eAAe,GAAG,KAAK;IACvBC,KAAK;IACLC,OAAO;IACPC,iBAAiB;IACjBC,aAAa;IACbC,UAAU;IACVC,KAAK;IACLC,OAAO;IACPC;EACJ,CAAC,GAAGb,KAAK;EAET,MAAMc,QAAQ,GAAGnB,WAAW,CACvBgB,KAAiC,IAAK;IACnC,IAAI,CAACX,KAAK,CAACc,QAAQ,EAAE;MACjB;IACJ;IAEA,IAAIH,KAAK,IAAI,CAACN,eAAe,EAAE;MAC3BL,KAAK,CAACc,QAAQ,CAAC;QAAEC,EAAE,EAAEJ,KAAK,CAACI,EAAE;QAAEC,GAAG,EAAEL,KAAK,CAACK;MAAI,CAAC,CAAC;MAChD;IACJ;IAEA,IAAIL,KAAK,IAAIN,eAAe,EAAE;MAC1BL,KAAK,CAACc,QAAQ,CAACH,KAAK,CAAC;MACrB;IACJ;IAEAX,KAAK,CAACc,QAAQ,CAAC,IAAI,CAAC;EACxB,CAAC,EACD,CAACd,KAAK,CAACc,QAAQ,CACnB,CAAC;EAED,oBACIpB,KAAA,CAAAuB,aAAA,CAACrB,WAAW;IACRkB,QAAQ,EAAEA,QAAS;IACnBb,MAAM,EAAEA,MAAO;IACfiB,MAAM,EAAE,CAACjB,MAAO;IAChBM,OAAO,EAAEA,OAAQ;IACjBY,MAAM,EAAEA,CAAC;MAAEC;IAAgB,CAAC,kBACxB1B,KAAA,CAAAuB,aAAA,CAAAvB,KAAA,CAAA2B,QAAA,qBACI3B,KAAA,CAAAuB,aAAA,CAACnB,UAAU;MACPQ,KAAK,EAAEA,KAAM;MACbH,WAAW,EAAEA,WAAY;MACzBO,UAAU,EAAEA,UAAW;MACvBR,SAAS,EAAEA,SAAU;MACrBE,QAAQ,EAAEA,QAAS;MACnBO,KAAK,EAAEA,KAAK,GAAGd,QAAQ,CAACyB,aAAa,CAACX,KAAK,CAACK,GAAG,CAAC,GAAG,IAAK;MACxDO,YAAY,EAAEH,eAAgB;MAC9BI,YAAY,EAAEA,CAAA,KAAMV,QAAQ,CAAC,IAAI,CAAE;MACnCN,iBAAiB,EAAEA,iBAAkB;MACrCC,aAAa,EAAEA,aAAc;MAC7BG,OAAO,EAAEA,OAAQ;MACjBC,IAAI,EAAEA;IAAK,CACd,CACH;EACJ,CACL,CAAC;AAEV,CAAC;AAED,eAAed,iBAAiB","ignoreList":[]}

package/components/SplitView/SplitView.d.ts

@@ -1,11 +1,13 @@
 import * as React from "react";
-import { CellProps } from "@webiny/ui/Grid";
-export declare const leftPanel: string;
-interface SplitViewProps {
-    children: React.ReactElement<any> | React.ReactElement<any>[];
-    className?: string;
+import type { ColumnProps } from "@webiny/admin-ui";
+import type { PanelProps, PanelGroupProps } from "../../components/ResizablePanels/index.js";
+interface SplitViewProps extends Omit<PanelGroupProps, "id"> {
+    namespace?: string;
 }
-declare const SplitView: React.FC<SplitViewProps>;
-declare const LeftPanel: React.FC<CellProps>;
-declare const RightPanel: React.FC<CellProps>;
-export { SplitView, LeftPanel, RightPanel };
+export declare const SplitView: ({ children, className, namespace, ...props }: SplitViewProps) => React.JSX.Element;
+interface SplitViewPanelProps extends Omit<PanelProps, "id"> {
+    span?: ColumnProps["span"];
+}
+export declare const LeftPanel: ({ children, className, ...props }: SplitViewPanelProps) => React.JSX.Element;
+export declare const RightPanel: ({ children, className, ...props }: SplitViewPanelProps) => React.JSX.Element;
+export {};

package/components/SplitView/SplitView.js

@@ -1,75 +1,65 @@
-"use strict";
+import * as React from "react";
+import { cn, Separator } from "@webiny/admin-ui";
+import { Panel, PanelGroup, PanelResizeHandle } from "../ResizablePanels/index.js";
+import { useLocalStorage, useLocalStorageValue } from "@webiny/app";
+import { useCallback } from "react";
+export const SplitView = ({
+  children,
+  className,
+  namespace = "splitView",
+  ...props
+}) => {
+  const localStorage = useLocalStorage();
+  const layout = useLocalStorageValue(namespace);
+  const saveLayout = useCallback(layout => {
+    localStorage.set(`${namespace}/panels`, layout);
+  }, [localStorage, namespace]);
+  return /*#__PURE__*/React.createElement(PanelGroup, Object.assign({
+    id: namespace,
+    defaultLayout: layout,
+    className: cn("webiny-split-view", className),
+    onLayoutChanged: saveLayout
+  }, props), children);
+};
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.leftPanel = exports.SplitView = exports.RightPanel = exports.LeftPanel = void 0;
-var _clone2 = _interopRequireDefault(require("lodash/clone"));
-var React = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _Grid = require("@webiny/ui/Grid");
-var _emotion = require("emotion");
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _Helpers = require("@webiny/ui/Helpers");
-var grid = /*#__PURE__*/(0, _emotion.css)({
-  "&.mdc-layout-grid": {
-    padding: 0,
-    backgroundColor: "var(--mdc-theme-background)",
-    ">.mdc-layout-grid__inner": {
-      gridGap: 0
-    }
-  }
-}, "label:grid;");
-var RightPanelWrapper = /*#__PURE__*/(0, _styled.default)("div", {
-  target: "em0s1980",
-  label: "RightPanelWrapper"
-})({
-  backgroundColor: "var(--mdc-theme-background)",
-  overflow: "auto",
-  height: "calc(100vh - 70px)"
-});
-var leftPanel = /*#__PURE__*/(0, _emotion.css)({
-  backgroundColor: "var(--mdc-theme-surface)",
-  ">.webiny-data-list": {
-    display: "flex",
-    flexDirection: "column",
-    height: "calc(100vh - 70px)",
-    ".mdc-list": {
-      overflow: "auto"
-    }
-  },
-  ">.mdc-list": {
-    display: "flex",
-    flexDirection: "column",
-    maxHeight: "calc(100vh - 70px)",
-    overflow: "auto"
-  }
-}, "label:leftPanel;");
-exports.leftPanel = leftPanel;
-var SplitView = function SplitView(props) {
-  return /*#__PURE__*/React.createElement(_Grid.Grid, {
-    className: (0, _classnames.default)(grid, props.className, "webiny-split-view")
-  }, props.children);
+// Get the default size for the panel:
+const getDefaultSize = span => {
+  const spanValue = typeof span === "number" && span > 0 && span <= 12 ? span : 6;
+  return spanValue / 12 * 100;
 };
-exports.SplitView = SplitView;
-var LeftPanel = function LeftPanel(props) {
-  var propList = (0, _clone2.default)(props);
-  if (!propList.hasOwnProperty("span")) {
-    propList.span = 5;
-  }
-  return /*#__PURE__*/React.createElement(_Grid.Cell, (0, _Helpers.getClasses)(propList, (0, _classnames.default)(leftPanel, props.className, "webiny-split-view__left-panel")), propList.children);
+export const LeftPanel = ({
+  children,
+  className,
+  ...props
+}) => {
+  const defaultSize = props.defaultSize ?? getDefaultSize(props.span || 5);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Panel, Object.assign({
+    defaultSize: defaultSize,
+    minSize: 10,
+    id: "leftPanel",
+    className: cn("webiny-split-view__right-panel", className)
+  }, props), children), /*#__PURE__*/React.createElement(PanelResizeHandle, {
+    className: "outline-0"
+  }, /*#__PURE__*/React.createElement(Separator, {
+    orientation: "vertical"
+  })));
 };
-exports.LeftPanel = LeftPanel;
-var RightPanel = function RightPanel(props) {
-  var propList = (0, _clone2.default)(props);
-  if (!propList.hasOwnProperty("span")) {
-    propList.span = 7;
-  }
-  return /*#__PURE__*/React.createElement(_Grid.Cell, (0, _Helpers.getClasses)(propList, "webiny-split-view__right-panel"), /*#__PURE__*/React.createElement(RightPanelWrapper, {
-    className: "webiny-split-view__right-panel-wrapper",
-    id: "webiny-split-view-right-panel"
-  }, propList.children));
+export const RightPanel = ({
+  children,
+  className,
+  ...props
+}) => {
+  const defaultSize = props.defaultSize ?? getDefaultSize(props.span || 7);
+  return /*#__PURE__*/React.createElement(Panel, Object.assign({
+    defaultSize: defaultSize,
+    minSize: 30,
+    id: "rightPanel",
+    className: cn("overflow-scroll! webiny-split-view__right-panel", className)
+  }, props, {
+    style: {
+      overflowY: "scroll"
+    }
+  }), children);
 };
-exports.RightPanel = RightPanel;
+
+//# sourceMappingURL=SplitView.js.map