@webiny/app-admin 0.0.0-unstable.78f581c1d2 → 0.0.0-unstable.7be00a75a9

package/components/SimpleForm/SimpleForm.js

@@ -1,106 +1,62 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+import { Grid, Heading, Icon, cn, cva } from "@webiny/admin-ui";
+import * as __rspack_external_react from "react";
+const simpleFormInnerVariants = cva("mx-auto", {
+    variants: {
+        size: {
+            md: "max-w-[640px]",
+            lg: "max-w-[800px]",
+            xl: "max-w-[1200px]",
+            full: "max-w-full"
+        }
+    },
+    defaultVariants: {
+        size: "md"
+    }
 });
-exports.SimpleFormHeader = exports.SimpleFormFooter = exports.SimpleFormContent = exports.SimpleForm = void 0;
-
-var React = _interopRequireWildcard(require("react"));
-
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
-var _emotion = require("emotion");
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _Grid = require("@webiny/ui/Grid");
-
-var _Typography = require("@webiny/ui/Typography");
-
-var _Elevation = require("@webiny/ui/Elevation");
-
-var _Icon = require("@webiny/ui/Icon");
-
-var SimpleFormContainer = /*#__PURE__*/(0, _styled.default)("div", {
-  target: "ep5jo8l0",
-  label: "SimpleFormContainer"
-})({
-  position: "relative",
-  margin: "17px 50px"
+const SimpleForm = ({ children, className, size, ...props })=>/*#__PURE__*/ __rspack_external_react.createElement("div", {
+        ...props,
+        className: cn([
+            "webiny-data-list",
+            "mx-auto p-lg",
+            "relative"
+        ], className)
+    }, /*#__PURE__*/ __rspack_external_react.createElement("div", {
+        className: cn(simpleFormInnerVariants({
+            size
+        }))
+    }, children));
+const simpleFormHeaderVariants = cva("p-md pl-lg border-sm border-neutral-dimmed-darker", {
+    variants: {
+        rounded: {
+            true: "rounded-t-3xl"
+        }
+    },
+    defaultVariants: {
+        rounded: true
+    }
 });
-var header = /*#__PURE__*/(0, _emotion.css)({
-  borderBottom: "1px solid var(--mdc-theme-on-background)",
-  color: "var(--mdc-theme-text-primary-on-background)"
-}, "label:header;");
-var title = /*#__PURE__*/(0, _emotion.css)({
-  display: "flex",
-  alignItems: "center"
-}, "label:title;");
-var actions = /*#__PURE__*/(0, _emotion.css)({
-  display: "flex",
-  justifyContent: "flex-end",
-  alignItems: "center"
-}, "label:actions;");
-var icon = /*#__PURE__*/(0, _emotion.css)({
-  marginRight: 15,
-  color: "var(--mdc-theme-text-primary-on-background)"
-}, "label:icon;");
-var footer = /*#__PURE__*/(0, _emotion.css)({
-  borderTop: "1px solid var(--mdc-theme-on-background)",
-  color: "var(--mdc-theme-text-primary-on-background)",
-  textAlign: "right",
-  "&.mdc-layout-grid": {
-    padding: 25 // "25px 50px"
-
-  }
-}, "label:footer;");
-
-var SimpleForm = function SimpleForm(props) {
-  return /*#__PURE__*/React.createElement(SimpleFormContainer, {
-    className: (0, _classnames.default)("webiny-data-list", props.className),
-    "data-testid": props["data-testid"]
-  }, props.noElevation ? props.children : /*#__PURE__*/React.createElement(_Elevation.Elevation, {
-    z: 1
-  }, props.children));
-};
-
-exports.SimpleForm = SimpleForm;
-
-var SimpleFormHeader = function SimpleFormHeader(props) {
-  return /*#__PURE__*/React.createElement(_Grid.Grid, {
-    className: header
-  }, /*#__PURE__*/React.createElement(_Grid.Cell, {
-    span: props.children ? 6 : 12,
-    className: title
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, props.icon && /*#__PURE__*/React.createElement(_Icon.Icon, {
-    className: icon,
-    icon: props.icon
-  }), /*#__PURE__*/React.createElement(_Typography.Typography, {
-    use: "headline5"
-  }, props.title))), props.children && /*#__PURE__*/React.createElement(_Grid.Cell, {
-    span: 6,
-    className: actions
-  }, props.children));
-};
-
-exports.SimpleFormHeader = SimpleFormHeader;
-
-var SimpleFormFooter = function SimpleFormFooter(props) {
-  return /*#__PURE__*/React.createElement(_Grid.Grid, {
-    className: (0, _classnames.default)(footer, props.className)
-  }, /*#__PURE__*/React.createElement(_Grid.Cell, {
-    span: 12
-  }, props.children));
-};
-
-exports.SimpleFormFooter = SimpleFormFooter;
-
-var SimpleFormContent = function SimpleFormContent(props) {
-  return props.children;
-};
-
-exports.SimpleFormContent = SimpleFormContent;
+const SimpleFormHeader = ({ children, icon, title, className, rounded, ...props })=>/*#__PURE__*/ __rspack_external_react.createElement("div", {
+        className: cn(simpleFormHeaderVariants({
+            rounded
+        }), className),
+        "data-testid": props["data-testid"]
+    }, /*#__PURE__*/ __rspack_external_react.createElement(Grid, null, /*#__PURE__*/ __rspack_external_react.createElement(Grid.Column, {
+        span: children ? 6 : 12
+    }, /*#__PURE__*/ __rspack_external_react.createElement(__rspack_external_react.Fragment, null, icon && /*#__PURE__*/ __rspack_external_react.createElement(Icon, {
+        label: title,
+        icon: icon
+    }), /*#__PURE__*/ __rspack_external_react.createElement(Heading, {
+        level: 4,
+        className: "truncate"
+    }, title))), /*#__PURE__*/ __rspack_external_react.createElement(__rspack_external_react.Fragment, null, children ? /*#__PURE__*/ __rspack_external_react.createElement(Grid.Column, {
+        span: 6
+    }, children) : null)));
+const SimpleFormFooter = ({ children, className })=>/*#__PURE__*/ __rspack_external_react.createElement("div", {
+        className: cn("p-lg pt-none border-sm border-t-none border-neutral-dimmed-darker rounded-b-3xl", "flex justify-end gap-sm", className)
+    }, children);
+const SimpleFormContent = ({ children, className })=>/*#__PURE__*/ __rspack_external_react.createElement("div", {
+        className: cn("p-lg border-sm border-y-none border-neutral-dimmed-darker", className)
+    }, children);
+export { SimpleForm, SimpleFormContent, SimpleFormFooter, SimpleFormHeader };
+
+//# sourceMappingURL=SimpleForm.js.map

package/components/SimpleForm/SimpleForm.js.map

@@ -1 +1 @@
-{"version":3,"names":["SimpleFormContainer","styled","position","margin","header","css","borderBottom","color","title","display","alignItems","actions","justifyContent","icon","marginRight","footer","borderTop","textAlign","padding","SimpleForm","props","classNames","className","noElevation","children","SimpleFormHeader","SimpleFormFooter","SimpleFormContent"],"sources":["SimpleForm.tsx"],"sourcesContent":["import * as React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\nimport { Cell, Grid } from \"@webiny/ui/Grid\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { Elevation } from \"@webiny/ui/Elevation\";\nimport { Icon } from \"@webiny/ui/Icon\";\n\nconst SimpleFormContainer = styled(\"div\")({\n    position: \"relative\",\n    margin: \"17px 50px\"\n});\n\nconst header = css({\n    borderBottom: \"1px solid var(--mdc-theme-on-background)\",\n    color: \"var(--mdc-theme-text-primary-on-background)\"\n});\n\nconst title = css({\n    display: \"flex\",\n    alignItems: \"center\"\n});\n\nconst actions = css({\n    display: \"flex\",\n    justifyContent: \"flex-end\",\n    alignItems: \"center\"\n});\n\nconst icon = css({\n    marginRight: 15,\n    color: \"var(--mdc-theme-text-primary-on-background)\"\n});\n\nconst footer = css({\n    borderTop: \"1px solid var(--mdc-theme-on-background)\",\n    color: \"var(--mdc-theme-text-primary-on-background)\",\n    textAlign: \"right\",\n    \"&.mdc-layout-grid\": {\n        padding: 25 // \"25px 50px\"\n    }\n});\n\ninterface SimpleFormProps {\n    children: React.ReactNode;\n    \"data-testid\"?: string;\n    noElevation?: boolean;\n    className?: string;\n}\nexport const SimpleForm: React.FC<SimpleFormProps> = props => {\n    return (\n        <SimpleFormContainer\n            className={classNames(\"webiny-data-list\", props.className)}\n            data-testid={props[\"data-testid\"]}\n        >\n            {props.noElevation ? props.children : <Elevation z={1}>{props.children}</Elevation>}\n        </SimpleFormContainer>\n    );\n};\n\ninterface SimpleFormHeaderProps {\n    title: React.ReactNode;\n    icon?: React.ReactElement<any>;\n    children?: React.ReactNode;\n}\nexport const SimpleFormHeader: React.FC<SimpleFormHeaderProps> = props => {\n    return (\n        <Grid className={header}>\n            <Cell span={props.children ? 6 : 12} className={title}>\n                <React.Fragment>\n                    {props.icon && <Icon className={icon} icon={props.icon} />}\n                    <Typography use=\"headline5\">{props.title}</Typography>\n                </React.Fragment>\n            </Cell>\n            {props.children && (\n                <Cell span={6} className={actions}>\n                    {props.children}\n                </Cell>\n            )}\n        </Grid>\n    );\n};\n\ninterface SimpleFormFooterProps {\n    children: React.ReactNode;\n    className?: string;\n}\nexport const SimpleFormFooter: React.FC<SimpleFormFooterProps> = props => {\n    return (\n        <Grid className={classNames(footer, props.className)}>\n            <Cell span={12}>{props.children}</Cell>\n        </Grid>\n    );\n};\n\nexport const SimpleFormContent: React.FC = props => {\n    return props.children as unknown as React.ReactElement;\n};\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,mBAAmB,oBAAGC,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EACtCC,QAAQ,EAAE,UAD4B;EAEtCC,MAAM,EAAE;AAF8B,CAAjB,CAAzB;AAKA,IAAMC,MAAM,gBAAG,IAAAC,YAAA,EAAI;EACfC,YAAY,EAAE,0CADC;EAEfC,KAAK,EAAE;AAFQ,CAAJ,kBAAf;AAKA,IAAMC,KAAK,gBAAG,IAAAH,YAAA,EAAI;EACdI,OAAO,EAAE,MADK;EAEdC,UAAU,EAAE;AAFE,CAAJ,iBAAd;AAKA,IAAMC,OAAO,gBAAG,IAAAN,YAAA,EAAI;EAChBI,OAAO,EAAE,MADO;EAEhBG,cAAc,EAAE,UAFA;EAGhBF,UAAU,EAAE;AAHI,CAAJ,mBAAhB;AAMA,IAAMG,IAAI,gBAAG,IAAAR,YAAA,EAAI;EACbS,WAAW,EAAE,EADA;EAEbP,KAAK,EAAE;AAFM,CAAJ,gBAAb;AAKA,IAAMQ,MAAM,gBAAG,IAAAV,YAAA,EAAI;EACfW,SAAS,EAAE,0CADI;EAEfT,KAAK,EAAE,6CAFQ;EAGfU,SAAS,EAAE,OAHI;EAIf,qBAAqB;IACjBC,OAAO,EAAE,EADQ,CACL;;EADK;AAJN,CAAJ,kBAAf;;AAeO,IAAMC,UAAqC,GAAG,SAAxCA,UAAwC,CAAAC,KAAK,EAAI;EAC1D,oBACI,oBAAC,mBAAD;IACI,SAAS,EAAE,IAAAC,mBAAA,EAAW,kBAAX,EAA+BD,KAAK,CAACE,SAArC,CADf;IAEI,eAAaF,KAAK,CAAC,aAAD;EAFtB,GAIKA,KAAK,CAACG,WAAN,GAAoBH,KAAK,CAACI,QAA1B,gBAAqC,oBAAC,oBAAD;IAAW,CAAC,EAAE;EAAd,GAAkBJ,KAAK,CAACI,QAAxB,CAJ1C,CADJ;AAQH,CATM;;;;AAgBA,IAAMC,gBAAiD,GAAG,SAApDA,gBAAoD,CAAAL,KAAK,EAAI;EACtE,oBACI,oBAAC,UAAD;IAAM,SAAS,EAAEhB;EAAjB,gBACI,oBAAC,UAAD;IAAM,IAAI,EAAEgB,KAAK,CAACI,QAAN,GAAiB,CAAjB,GAAqB,EAAjC;IAAqC,SAAS,EAAEhB;EAAhD,gBACI,oBAAC,KAAD,CAAO,QAAP,QACKY,KAAK,CAACP,IAAN,iBAAc,oBAAC,UAAD;IAAM,SAAS,EAAEA,IAAjB;IAAuB,IAAI,EAAEO,KAAK,CAACP;EAAnC,EADnB,eAEI,oBAAC,sBAAD;IAAY,GAAG,EAAC;EAAhB,GAA6BO,KAAK,CAACZ,KAAnC,CAFJ,CADJ,CADJ,EAOKY,KAAK,CAACI,QAAN,iBACG,oBAAC,UAAD;IAAM,IAAI,EAAE,CAAZ;IAAe,SAAS,EAAEb;EAA1B,GACKS,KAAK,CAACI,QADX,CARR,CADJ;AAeH,CAhBM;;;;AAsBA,IAAME,gBAAiD,GAAG,SAApDA,gBAAoD,CAAAN,KAAK,EAAI;EACtE,oBACI,oBAAC,UAAD;IAAM,SAAS,EAAE,IAAAC,mBAAA,EAAWN,MAAX,EAAmBK,KAAK,CAACE,SAAzB;EAAjB,gBACI,oBAAC,UAAD;IAAM,IAAI,EAAE;EAAZ,GAAiBF,KAAK,CAACI,QAAvB,CADJ,CADJ;AAKH,CANM;;;;AAQA,IAAMG,iBAA2B,GAAG,SAA9BA,iBAA8B,CAAAP,KAAK,EAAI;EAChD,OAAOA,KAAK,CAACI,QAAb;AACH,CAFM"}
+{"version":3,"file":"components/SimpleForm/SimpleForm.js","sources":["../../../src/components/SimpleForm/SimpleForm.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, cva, Grid, Heading, Icon, type VariantProps } from \"@webiny/admin-ui\";\n\nconst simpleFormInnerVariants = cva(\"mx-auto\", {\n    variants: {\n        size: {\n            md: \"max-w-[640px]\",\n            lg: \"max-w-[800px]\",\n            xl: \"max-w-[1200px]\",\n            full: \"max-w-full\"\n        }\n    },\n    defaultVariants: {\n        size: \"md\"\n    }\n});\n\ninterface SimpleFormProps\n    extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof simpleFormInnerVariants> {\n    children: React.ReactNode;\n    noElevation?: boolean;\n    className?: string;\n}\n\nexport const SimpleForm = ({ children, className, size, ...props }: SimpleFormProps) => {\n    return (\n        <div {...props} className={cn([\"webiny-data-list\", \"mx-auto p-lg\", \"relative\"], className)}>\n            <div className={cn(simpleFormInnerVariants({ size }))}>{children}</div>\n        </div>\n    );\n};\n\nconst simpleFormHeaderVariants = cva(\"p-md pl-lg border-sm border-neutral-dimmed-darker\", {\n    variants: {\n        rounded: {\n            true: \"rounded-t-3xl\"\n        }\n    },\n    defaultVariants: {\n        rounded: true\n    }\n});\n\ninterface SimpleFormHeaderProps\n    extends\n        Omit<React.HTMLAttributes<HTMLDivElement>, \"title\">,\n        VariantProps<typeof simpleFormHeaderVariants> {\n    title: React.ReactNode;\n    icon?: React.ReactElement<any>;\n    children?: React.ReactNode;\n    [\"data-testid\"]?: string;\n}\n\nexport const SimpleFormHeader = ({\n    children,\n    icon,\n    title,\n    className,\n    rounded,\n    ...props\n}: SimpleFormHeaderProps) => {\n    return (\n        <div\n            className={cn(simpleFormHeaderVariants({ rounded }), className)}\n            data-testid={props[\"data-testid\"]}\n        >\n            <Grid>\n                <Grid.Column span={children ? 6 : 12}>\n                    <>\n                        {icon && <Icon label={title as string} icon={icon} />}\n                        <Heading level={4} className={\"truncate\"}>\n                            {title}\n                        </Heading>\n                    </>\n                </Grid.Column>\n                <>{children ? <Grid.Column span={6}>{children}</Grid.Column> : null}</>\n            </Grid>\n        </div>\n    );\n};\n\nexport interface SimpleFormFooterProps {\n    children: React.ReactNode;\n    className?: string;\n}\n\nexport const SimpleFormFooter = ({ children, className }: SimpleFormFooterProps) => {\n    return (\n        <div\n            className={cn(\n                \"p-lg pt-none border-sm border-t-none border-neutral-dimmed-darker rounded-b-3xl\",\n                \"flex justify-end gap-sm\",\n                className\n            )}\n        >\n            {children}\n        </div>\n    );\n};\n\ninterface SimpleFormContentProps {\n    children: React.ReactNode;\n    className?: string;\n}\n\nexport const SimpleFormContent = ({ children, className }: SimpleFormContentProps) => {\n    return (\n        <div className={cn(\"p-lg border-sm border-y-none border-neutral-dimmed-darker\", className)}>\n            {children}\n        </div>\n    );\n};\n"],"names":["simpleFormInnerVariants","cva","SimpleForm","children","className","size","props","cn","simpleFormHeaderVariants","SimpleFormHeader","icon","title","rounded","Grid","Icon","Heading","SimpleFormFooter","SimpleFormContent"],"mappings":";;AAGA,MAAMA,0BAA0BC,IAAI,WAAW;IAC3C,UAAU;QACN,MAAM;YACF,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,MAAM;QACV;IACJ;IACA,iBAAiB;QACb,MAAM;IACV;AACJ;AASO,MAAMC,aAAa,CAAC,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,IAAI,EAAE,GAAGC,OAAwB,GACxE,WAAP,GACI,sCAAC;QAAK,GAAGA,KAAK;QAAE,WAAWC,GAAG;YAAC;YAAoB;YAAgB;SAAW,EAAEH;qBAC5E,sCAAC;QAAI,WAAWG,GAAGP,wBAAwB;YAAEK;QAAK;OAAMF;AAKpE,MAAMK,2BAA2BP,IAAI,qDAAqD;IACtF,UAAU;QACN,SAAS;YACL,MAAM;QACV;IACJ;IACA,iBAAiB;QACb,SAAS;IACb;AACJ;AAYO,MAAMQ,mBAAmB,CAAC,EAC7BN,QAAQ,EACRO,IAAI,EACJC,KAAK,EACLP,SAAS,EACTQ,OAAO,EACP,GAAGN,OACiB,GACb,WAAP,GACI,sCAAC;QACG,WAAWC,GAAGC,yBAAyB;YAAEI;QAAQ,IAAIR;QACrD,eAAaE,KAAK,CAAC,cAAc;qBAEjC,sCAACO,MAAIA,MAAAA,WAAAA,GACD,sCAACA,KAAK,MAAM;QAAC,MAAMV,WAAW,IAAI;qBAC9B,8EACKO,QAAQ,WAARA,GAAQ,sCAACI,MAAIA;QAAC,OAAOH;QAAiB,MAAMD;sBAC7C,sCAACK,SAAOA;QAAC,OAAO;QAAG,WAAW;OACzBJ,UAAAA,WAAAA,GAIb,8EAAGR,WAAW,WAAXA,GAAW,sCAACU,KAAK,MAAM;QAAC,MAAM;OAAIV,YAA0B;AAWxE,MAAMa,mBAAmB,CAAC,EAAEb,QAAQ,EAAEC,SAAS,EAAyB,GACpE,WAAP,GACI,sCAAC;QACG,WAAWG,GACP,mFACA,2BACAH;OAGHD;AAUN,MAAMc,oBAAoB,CAAC,EAAEd,QAAQ,EAAEC,SAAS,EAA0B,GACtE,WAAP,GACI,sCAAC;QAAI,WAAWG,GAAG,6DAA6DH;OAC3ED"}

package/components/SimpleForm/index.d.ts

@@ -1 +1 @@
-export { SimpleForm, SimpleFormHeader, SimpleFormFooter, SimpleFormContent } from "./SimpleForm";
+export { SimpleForm, SimpleFormHeader, SimpleFormFooter, SimpleFormContent } from "./SimpleForm.js";

package/components/SimpleForm/index.js

@@ -1,31 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "SimpleForm", {
-  enumerable: true,
-  get: function get() {
-    return _SimpleForm.SimpleForm;
-  }
-});
-Object.defineProperty(exports, "SimpleFormContent", {
-  enumerable: true,
-  get: function get() {
-    return _SimpleForm.SimpleFormContent;
-  }
-});
-Object.defineProperty(exports, "SimpleFormFooter", {
-  enumerable: true,
-  get: function get() {
-    return _SimpleForm.SimpleFormFooter;
-  }
-});
-Object.defineProperty(exports, "SimpleFormHeader", {
-  enumerable: true,
-  get: function get() {
-    return _SimpleForm.SimpleFormHeader;
-  }
-});
-
-var _SimpleForm = require("./SimpleForm");
+export { SimpleForm, SimpleFormContent, SimpleFormFooter, SimpleFormHeader } from "./SimpleForm.js";

package/components/SimpleUI/InputField.d.ts

@@ -1,10 +1,12 @@
 import React from "react";
+export type OnKeyDownProps = React.SyntheticEvent<HTMLInputElement, Event> & React.KeyboardEvent<HTMLInputElement>;
 interface InputBoxProps {
     value?: string | number;
     onChange?: (value: any) => void;
+    onKeyDown?: (e: OnKeyDownProps) => any;
     defaultValue?: string | number;
     type?: "string" | "number";
     [key: string]: any;
 }
-declare const _default: React.NamedExoticComponent<InputBoxProps>;
+declare const _default: React.MemoExoticComponent<({ className, value, onChange, onKeyDown, label, description, validation, defaultValue, ...props }: InputBoxProps) => React.JSX.Element>;
 export default _default;

package/components/SimpleUI/InputField.js

@@ -1,116 +1,79 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+import react from "react";
+import { css } from "@emotion/css";
+import classnames from "classnames";
+import omit from "lodash/omit.js";
+import { FormComponentErrorMessage, FormComponentNote, Text } from "@webiny/admin-ui";
+const inputStyle = 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
+    }
 });
-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", "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;
-
-  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,
-      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", {
-    className: labelStyle
-  }, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
-    use: "body2"
-  }, label)), /*#__PURE__*/_react.default.createElement("input", Object.assign({
-    className: (0, _classnames.default)(inputStyle, className),
-    value: getValue({
-      value: value,
-      type: props.type || "string",
-      defaultValue: defaultValue
-    }),
-    onChange: function onChange(ev) {
-      if (!_onChange) {
-        return;
-      }
-
-      _onChange((ev.target.value || "").toLowerCase());
+const labelStyle = css({
+    marginBottom: 8,
+    padding: "0px 8px",
+    "& span": {
+        color: "var(--mdc-theme-text-primary-on-background)"
     }
-  }, (0, _omit.default)(props, "validate"))), validation.isValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
-    error: true
-  }, validation.message), validation.isValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description));
+});
+const getValue = (params)=>{
+    const { value, defaultValue, type } = params;
+    if ("number" === type) return isNaN(value) ? defaultValue : value;
+    return value || defaultValue;
 };
-
-var _default = /*#__PURE__*/_react.default.memo(InputField);
-
-exports.default = _default;
+const InputField = ({ className, value, onChange, onKeyDown, label, description, validation = {
+    isValid: true
+}, defaultValue = "", ...props })=>/*#__PURE__*/ react.createElement(react.Fragment, null, label && /*#__PURE__*/ react.createElement("div", {
+        className: labelStyle
+    }, /*#__PURE__*/ react.createElement(Text, {
+        size: "sm"
+    }, label)), /*#__PURE__*/ react.createElement("input", {
+        className: classnames(inputStyle, className),
+        value: getValue({
+            value,
+            type: props.type || "string",
+            defaultValue
+        }),
+        onKeyDown: onKeyDown,
+        onChange: (ev)=>{
+            if (!onChange) return;
+            onChange((ev.target.value || "").toLowerCase());
+        },
+        ...omit(props, "validate")
+    }), false === validation.isValid && /*#__PURE__*/ react.createElement(FormComponentErrorMessage, {
+        text: validation.message,
+        invalid: true
+    }), false !== validation.isValid && description && /*#__PURE__*/ react.createElement(FormComponentNote, {
+        text: description
+    }));
+const SimpleUI_InputField = /*#__PURE__*/ react.memo(InputField);
+export default SimpleUI_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","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    defaultValue?: string | number;\n    type?: \"string\" | \"number\";\n    [key: string]: any;\n}\nconst InputField: React.FC<InputBoxProps> = ({\n    className,\n    value,\n    onChange,\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                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":"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"}
+{"version":3,"file":"components/SimpleUI/InputField.js","sources":["../../../src/components/SimpleUI/InputField.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"@emotion/css\";\nimport classNames from \"classnames\";\nimport omit from \"lodash/omit.js\";\nimport { Text, FormComponentErrorMessage, FormComponentNote } from \"@webiny/admin-ui\";\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                    <Text size={\"sm\"}>{label}</Text>\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                <FormComponentErrorMessage text={validation.message} invalid={true} />\n            )}\n            {validation.isValid !== false && description && (\n                <FormComponentNote text={description} />\n            )}\n        </React.Fragment>\n    );\n};\n\nexport default React.memo(InputField);\n"],"names":["inputStyle","css","labelStyle","getValue","params","value","defaultValue","type","isNaN","InputField","className","onChange","onKeyDown","label","description","validation","props","React","Text","classNames","ev","omit","FormComponentErrorMessage","FormComponentNote"],"mappings":";;;;;AAMA,MAAMA,aAAaC,IAAI;IACnB,WAAW;IACX,QAAQ;IACR,OAAO;IACP,QAAQ;IACR,SAAS;IACT,WAAW;IACX,WAAW;IACX,iBAAiB;IACjB,YAAY;IACZ,0BAA0B;QACtB,iBAAiB;IACrB;IACA,0BAA0B;QACtB,iBAAiB;IACrB;IACA,cAAc;QACV,SAAS;QACT,QAAQ;IACZ;IAEA,iBAAiB;QACb,WAAW;QACX,SAAS;IACb;IAEA,gCAAgC;QAC5B,kBAAkB;QAClB,QAAQ;IACZ;IACA,gCAAgC;QAC5B,kBAAkB;QAClB,QAAQ;IACZ;AACJ;AAEA,MAAMC,aAAaD,IAAI;IACnB,cAAc;IACd,SAAS;IACT,UAAU;QACN,OAAO;IACX;AACJ;AAOA,MAAME,WAAW,CAACC;IACd,MAAM,EAAEC,KAAK,EAAEC,YAAY,EAAEC,IAAI,EAAE,GAAGH;IACtC,IAAIG,AAAS,aAATA,MACA,OAAQC,MAAMH,SAAmBC,eAAeD;IAEpD,OAAQA,SAASC;AACrB;AAaA,MAAMG,aAAa,CAAC,EAChBC,SAAS,EACTL,KAAK,EACLM,QAAQ,EACRC,SAAS,EACTC,KAAK,EACLC,WAAW,EACXC,aAAa;IAAE,SAAS;AAAK,CAAC,EAC9BT,eAAe,EAAE,EACjB,GAAGU,OACS,GACL,WAAP,GACI,oBAACC,MAAAA,QAAc,QACVJ,SAAS,WAATA,GACG,oBAAC;QAAI,WAAWX;qBACZ,oBAACgB,MAAIA;QAAC,MAAM;OAAOL,SAAAA,WAAAA,GAG3B,oBAAC;QACG,WAAWM,WAAWnB,YAAYU;QAClC,OAAOP,SAAS;YACZE;YACA,MAAMW,MAAM,IAAI,IAAI;YACpBV;QACJ;QACA,WAAWM;QACX,UAAUQ,CAAAA;YACN,IAAI,CAACT,UACD;YAEJA,SAAUS,AAAAA,CAAAA,GAAG,MAAM,CAAC,KAAK,IAAI,EAAC,EAAG,WAAW;QAChD;QACC,GAAGC,KAAKL,OAAO,WAAW;QAE9BD,AAAuB,UAAvBA,WAAW,OAAO,IAAc,WAAT,GACpB,oBAACO,2BAAyBA;QAAC,MAAMP,WAAW,OAAO;QAAE,SAAS;QAEjEA,AAAuB,UAAvBA,WAAW,OAAO,IAAcD,eAAe,WAAfA,GAC7B,oBAACS,mBAAiBA;QAAC,MAAMT;;AAMzC,0CAAeG,MAAAA,IAAU,CAACR"}

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 "../base/ui/FileManager.js";
+import type { FormComponentProps } from "@webiny/admin-ui";
+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;