@webiny/app-admin 0.0.0-mt-3 → 0.0.0-unstable.06b2ede40f

package/components/Routes.js

@@ -0,0 +1,34 @@
+import React from "react";
+import { plugins } from "@webiny/plugins";
+import { Routes as ReactRouterRoutes } from "@webiny/react-router";
+export const Routes = props => {
+  const routes = [...props.routes,
+  // For backwards compatibility, we need to support the RoutePlugin routes as well.
+  ...plugins.byType("route").map(({
+    route
+  }) => route)].sort((a, b) => {
+    const pathA = a.props.path || "*";
+    const pathB = b.props.path || "*";
+
+    // This will sort paths at the very bottom of the list
+    if (pathA === "/" && pathB === "*") {
+      return -1;
+    }
+
+    // This will push * and / to the bottom of the list
+    if (pathA === "*" || pathA === "/") {
+      return 1;
+    }
+
+    // This will push * and / to the bottom of the list
+    if (["*", "/"].includes(pathB)) {
+      return -1;
+    }
+    return 0;
+  });
+  return /*#__PURE__*/React.createElement(ReactRouterRoutes, null, routes.map((route, index) => /*#__PURE__*/React.cloneElement(route, {
+    key: `${route.props.path}:${index}`
+  })));
+};
+
+//# sourceMappingURL=Routes.js.map

package/components/Routes.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","plugins","Routes","ReactRouterRoutes","props","routes","byType","map","route","sort","a","b","pathA","path","pathB","includes","createElement","index","cloneElement","key"],"sources":["Routes.tsx"],"sourcesContent":["import React from \"react\";\nimport { plugins } from \"@webiny/plugins\";\nimport { Routes as ReactRouterRoutes } from \"@webiny/react-router\";\nimport type { RoutePlugin } from \"@webiny/app/types\";\n\ninterface RoutesProps {\n    routes: JSX.Element[];\n}\n\nexport const Routes = (props: RoutesProps) => {\n    const routes = [\n        ...props.routes,\n        // For backwards compatibility, we need to support the RoutePlugin routes as well.\n        ...plugins.byType<RoutePlugin>(\"route\").map(({ route }) => route)\n    ].sort((a, b) => {\n        const pathA = a.props.path || \"*\";\n        const pathB = b.props.path || \"*\";\n\n        // This will sort paths at the very bottom of the list\n        if (pathA === \"/\" && pathB === \"*\") {\n            return -1;\n        }\n\n        // This will push * and / to the bottom of the list\n        if (pathA === \"*\" || pathA === \"/\") {\n            return 1;\n        }\n\n        // This will push * and / to the bottom of the list\n        if ([\"*\", \"/\"].includes(pathB)) {\n            return -1;\n        }\n\n        return 0;\n    });\n\n    return (\n        <ReactRouterRoutes>\n            {routes.map((route, index) =>\n                React.cloneElement(route, { key: `${route.props.path}:${index}` })\n            )}\n        </ReactRouterRoutes>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,OAAO,QAAQ,iBAAiB;AACzC,SAASC,MAAM,IAAIC,iBAAiB,QAAQ,sBAAsB;AAOlE,OAAO,MAAMD,MAAM,GAAIE,KAAkB,IAAK;EAC1C,MAAMC,MAAM,GAAG,CACX,GAAGD,KAAK,CAACC,MAAM;EACf;EACA,GAAGJ,OAAO,CAACK,MAAM,CAAc,OAAO,CAAC,CAACC,GAAG,CAAC,CAAC;IAAEC;EAAM,CAAC,KAAKA,KAAK,CAAC,CACpE,CAACC,IAAI,CAAC,CAACC,CAAC,EAAEC,CAAC,KAAK;IACb,MAAMC,KAAK,GAAGF,CAAC,CAACN,KAAK,CAACS,IAAI,IAAI,GAAG;IACjC,MAAMC,KAAK,GAAGH,CAAC,CAACP,KAAK,CAACS,IAAI,IAAI,GAAG;;IAEjC;IACA,IAAID,KAAK,KAAK,GAAG,IAAIE,KAAK,KAAK,GAAG,EAAE;MAChC,OAAO,CAAC,CAAC;IACb;;IAEA;IACA,IAAIF,KAAK,KAAK,GAAG,IAAIA,KAAK,KAAK,GAAG,EAAE;MAChC,OAAO,CAAC;IACZ;;IAEA;IACA,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,CAACG,QAAQ,CAACD,KAAK,CAAC,EAAE;MAC5B,OAAO,CAAC,CAAC;IACb;IAEA,OAAO,CAAC;EACZ,CAAC,CAAC;EAEF,oBACId,KAAA,CAAAgB,aAAA,CAACb,iBAAiB,QACbE,MAAM,CAACE,GAAG,CAAC,CAACC,KAAK,EAAES,KAAK,kBACrBjB,KAAK,CAACkB,YAAY,CAACV,KAAK,EAAE;IAAEW,GAAG,EAAE,GAAGX,KAAK,CAACJ,KAAK,CAACS,IAAI,IAAII,KAAK;EAAG,CAAC,CACrE,CACe,CAAC;AAE5B,CAAC","ignoreList":[]}

package/components/SearchUI.d.ts

@@ -1,8 +1,10 @@
-/// <reference types="react" />
-export declare type SearchProps = {
+import React from "react";
+export interface SearchProps {
     value: string;
     onChange: (value: string) => void;
+    onEnter?: () => any;
     inputPlaceholder?: string;
-};
-declare const Search: ({ value, onChange, inputPlaceholder }: SearchProps) => JSX.Element;
+    dataTestId?: string;
+}
+declare const Search: ({ value, onChange, onEnter, dataTestId, inputPlaceholder }: SearchProps) => React.JSX.Element;
 export default Search;

package/components/SearchUI.js

@@ -1,59 +1,29 @@
 import React from "react";
-import styled from "@emotion/styled";
-import InputField from "./SimpleUI/InputField";
-import { ReactComponent as SearchIcon } from "@svgr/webpack!../assets/icons/search-24px.svg";
-var SearchWrapper = /*#__PURE__*/styled("div", {
-  target: "epa3kz70",
-  label: "SearchWrapper"
-})({
-  width: "100%",
-  height: "100%",
-  display: "flex",
-  position: "relative",
-  "& .search__icon": {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    bottom: 0,
-    pointerEvents: "none",
-    display: "flex",
-    alignItems: "center",
-    paddingLeft: "0.25rem",
-    color: "var(--mdc-theme-text-secondary-on-background)"
-  },
-  "& .search__input": {
-    width: "100%",
-    padding: "0.5rem 0.5rem 0.5rem 2.25rem",
-    outline: "none",
-    border: "none",
-    color: "var(--mdc-theme-text-primary-on-background)",
-    "&:focus": {
-      outline: "none"
-    },
-    "&::placeholder": {
-      textTransform: "uppercase",
-      letterSpacing: "0.05em",
-      color: "var(--mdc-theme-text-secondary-on-background)"
-    }
-  }
-});
-
-var Search = function Search(_ref) {
-  var value = _ref.value,
-      onChange = _ref.onChange,
-      _ref$inputPlaceholder = _ref.inputPlaceholder,
-      inputPlaceholder = _ref$inputPlaceholder === void 0 ? "Search..." : _ref$inputPlaceholder;
-  return /*#__PURE__*/React.createElement(SearchWrapper, {
-    "data-testid": "default-data-list.search"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "search__icon"
-  }, /*#__PURE__*/React.createElement(SearchIcon, null)), /*#__PURE__*/React.createElement(InputField, {
-    className: "search__input",
+import { ReactComponent as SearchIcon } from "@webiny/icons/search.svg";
+import { Icon, InputPrimitive } from "@webiny/admin-ui";
+const Search = ({
+  value,
+  onChange,
+  onEnter,
+  dataTestId,
+  inputPlaceholder = "Search..."
+}) => {
+  return /*#__PURE__*/React.createElement(InputPrimitive, {
+    id: "search-input",
     placeholder: inputPlaceholder,
     value: value,
     onChange: onChange,
-    autoComplete: "off"
-  }));
+    onEnter: onEnter,
+    autoComplete: "off",
+    startIcon: /*#__PURE__*/React.createElement(Icon, {
+      label: "Search",
+      icon: /*#__PURE__*/React.createElement(SearchIcon, null)
+    }),
+    variant: "ghost",
+    size: "md",
+    "data-testid": dataTestId
+  });
 };
+export default Search;
 
-export default Search;
+//# sourceMappingURL=SearchUI.js.map

package/components/SearchUI.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","ReactComponent","SearchIcon","Icon","InputPrimitive","Search","value","onChange","onEnter","dataTestId","inputPlaceholder","createElement","id","placeholder","autoComplete","startIcon","label","icon","variant","size"],"sources":["SearchUI.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { ReactComponent as SearchIcon } from \"@webiny/icons/search.svg\";\nimport { Icon, InputPrimitive } from \"@webiny/admin-ui\";\n\nexport interface SearchProps {\n    value: string;\n    onChange: (value: string) => void;\n    onEnter?: () => any;\n    inputPlaceholder?: string;\n    dataTestId?: string;\n}\n\nconst Search = ({\n    value,\n    onChange,\n    onEnter,\n    dataTestId,\n    inputPlaceholder = \"Search...\"\n}: SearchProps) => {\n    return (\n        <InputPrimitive\n            id={\"search-input\"}\n            placeholder={inputPlaceholder}\n            value={value}\n            onChange={onChange}\n            onEnter={onEnter}\n            autoComplete=\"off\"\n            startIcon={<Icon label={\"Search\"} icon={<SearchIcon />} />}\n            variant={\"ghost\"}\n            size={\"md\"}\n            data-testid={dataTestId}\n        />\n    );\n};\n\nexport default Search;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,cAAc,IAAIC,UAAU,QAAQ,0BAA0B;AACvE,SAASC,IAAI,EAAEC,cAAc,QAAQ,kBAAkB;AAUvD,MAAMC,MAAM,GAAGA,CAAC;EACZC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,UAAU;EACVC,gBAAgB,GAAG;AACV,CAAC,KAAK;EACf,oBACIV,KAAA,CAAAW,aAAA,CAACP,cAAc;IACXQ,EAAE,EAAE,cAAe;IACnBC,WAAW,EAAEH,gBAAiB;IAC9BJ,KAAK,EAAEA,KAAM;IACbC,QAAQ,EAAEA,QAAS;IACnBC,OAAO,EAAEA,OAAQ;IACjBM,YAAY,EAAC,KAAK;IAClBC,SAAS,eAAEf,KAAA,CAAAW,aAAA,CAACR,IAAI;MAACa,KAAK,EAAE,QAAS;MAACC,IAAI,eAAEjB,KAAA,CAAAW,aAAA,CAACT,UAAU,MAAE;IAAE,CAAE,CAAE;IAC3DgB,OAAO,EAAE,OAAQ;IACjBC,IAAI,EAAE,IAAK;IACX,eAAaV;EAAW,CAC3B,CAAC;AAEV,CAAC;AAED,eAAeJ,MAAM","ignoreList":[]}

package/components/SimpleForm/SimpleForm.d.ts

@@ -1,21 +1,32 @@
 import * as React from "react";
-declare const title: string;
-declare const icon: string;
-export declare const SimpleForm: (props: {
+import { type VariantProps } from "@webiny/admin-ui";
+declare const simpleFormInnerVariants: (props?: ({
+    size?: "full" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+interface SimpleFormProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof simpleFormInnerVariants> {
     children: React.ReactNode;
-    "data-testid"?: string;
     noElevation?: boolean;
     className?: string;
-}) => JSX.Element;
-export declare const SimpleFormHeader: (props: {
+}
+export declare const SimpleForm: ({ children, className, size, ...props }: SimpleFormProps) => React.JSX.Element;
+declare const simpleFormHeaderVariants: (props?: ({
+    rounded?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+interface SimpleFormHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof simpleFormHeaderVariants> {
     title: React.ReactNode;
     icon?: React.ReactElement<any>;
     children?: React.ReactNode;
-}) => JSX.Element;
-export declare const SimpleFormFooter: (props: {
+    ["data-testid"]?: string;
+}
+export declare const SimpleFormHeader: ({ children, icon, title, className, rounded, ...props }: SimpleFormHeaderProps) => React.JSX.Element;
+export interface SimpleFormFooterProps {
     children: React.ReactNode;
-}) => JSX.Element;
-export declare const SimpleFormContent: (props: {
-    children: any;
-}) => any;
+    className?: string;
+}
+export declare const SimpleFormFooter: ({ children, className }: SimpleFormFooterProps) => React.JSX.Element;
+interface SimpleFormContentProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const SimpleFormContent: ({ children, className }: SimpleFormContentProps) => React.JSX.Element;
 export {};

package/components/SimpleForm/SimpleForm.js

@@ -1,75 +1,81 @@
 import * as React from "react";
-import styled from "@emotion/styled";
-import { css } from "emotion";
-import classNames from "classnames";
-import { Cell, Grid } from "@webiny/ui/Grid";
-import { Typography } from "@webiny/ui/Typography";
-import { Elevation } from "@webiny/ui/Elevation";
-import { Icon } from "@webiny/ui/Icon";
-var SimpleFormContainer = /*#__PURE__*/styled("div", {
-  target: "ep5jo8l0",
-  label: "SimpleFormContainer"
-})({
-  position: "relative",
-  margin: "17px 50px"
+import { cn, cva, Grid, Heading, Icon } from "@webiny/admin-ui";
+const simpleFormInnerVariants = cva("wby-mx-auto", {
+  variants: {
+    size: {
+      md: "wby-max-w-[640px]",
+      lg: "wby-max-w-[800px]",
+      full: "wby-max-w-full"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
 });
-var header = /*#__PURE__*/css({
-  borderBottom: "1px solid var(--mdc-theme-on-background)",
-  color: "var(--mdc-theme-text-primary-on-background)"
-}, "label:header;");
-var title = /*#__PURE__*/css({
-  display: "flex",
-  alignItems: "center"
-}, "label:title;");
-var actions = /*#__PURE__*/css({
-  display: "flex",
-  justifyContent: "flex-end",
-  alignItems: "center"
-}, "label:actions;");
-var icon = /*#__PURE__*/css({
-  marginRight: 15,
-  color: "var(--mdc-theme-text-primary-on-background)"
-}, "label:icon;");
-var footer = /*#__PURE__*/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"
-
+export const SimpleForm = ({
+  children,
+  className,
+  size,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
+    className: cn(["webiny-data-list", "wby-mx-auto wby-p-lg", "wby-relative"], className)
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn(simpleFormInnerVariants({
+      size
+    }))
+  }, children));
+};
+const simpleFormHeaderVariants = cva("wby-p-md wby-pl-lg wby-border-sm wby-border-neutral-dimmed-darker", {
+  variants: {
+    rounded: {
+      true: "wby-rounded-t-3xl"
+    }
+  },
+  defaultVariants: {
+    rounded: true
   }
-}, "label:footer;");
-export var SimpleForm = function SimpleForm(props) {
-  return /*#__PURE__*/React.createElement(SimpleFormContainer, {
-    className: classNames("webiny-data-list", props.className),
+});
+export const SimpleFormHeader = ({
+  children,
+  icon,
+  title,
+  className,
+  rounded,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn(simpleFormHeaderVariants({
+      rounded
+    }), className),
     "data-testid": props["data-testid"]
-  }, props.noElevation ? props.children : /*#__PURE__*/React.createElement(Elevation, {
-    z: 1
-  }, props.children));
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Grid.Column, {
+    span: children ? 6 : 12
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.createElement(Icon, {
+    label: title,
+    icon: icon
+  }), /*#__PURE__*/React.createElement(Heading, {
+    level: 4,
+    className: "wby-truncate"
+  }, title))), /*#__PURE__*/React.createElement(React.Fragment, null, children ? /*#__PURE__*/React.createElement(Grid.Column, {
+    span: 6
+  }, children) : null)));
 };
-export var SimpleFormHeader = function SimpleFormHeader(props) {
-  return /*#__PURE__*/React.createElement(Grid, {
-    className: header
-  }, /*#__PURE__*/React.createElement(Cell, {
-    span: props.children ? 6 : 12,
-    className: title
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, props.icon && /*#__PURE__*/React.createElement(Icon, {
-    className: icon,
-    icon: props.icon
-  }), /*#__PURE__*/React.createElement(Typography, {
-    use: "headline5"
-  }, props.title))), props.children && /*#__PURE__*/React.createElement(Cell, {
-    span: 6,
-    className: actions
-  }, props.children));
+export const SimpleFormFooter = ({
+  children,
+  className
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn("wby-p-lg wby-pt-none wby-border-sm wby-border-t-none wby-border-neutral-dimmed-darker wby-rounded-b-3xl", "wby-flex wby-justify-end wby-gap-sm", className)
+  }, children);
 };
-export var SimpleFormFooter = function SimpleFormFooter(props) {
-  return /*#__PURE__*/React.createElement(Grid, {
-    className: footer
-  }, /*#__PURE__*/React.createElement(Cell, {
-    span: 12
-  }, props.children));
+export const SimpleFormContent = ({
+  children,
+  className
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn("wby-p-lg wby-border-sm wby-border-y-none wby-border-neutral-dimmed-darker", className)
+  }, children);
 };
-export var SimpleFormContent = function SimpleFormContent(props) {
-  return props.children;
-};
+
+//# sourceMappingURL=SimpleForm.js.map

package/components/SimpleForm/SimpleForm.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","cn","cva","Grid","Heading","Icon","simpleFormInnerVariants","variants","size","md","lg","full","defaultVariants","SimpleForm","children","className","props","createElement","Object","assign","simpleFormHeaderVariants","rounded","true","SimpleFormHeader","icon","title","Column","span","Fragment","label","level","SimpleFormFooter","SimpleFormContent"],"sources":["SimpleForm.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, cva, Grid, Heading, Icon, type VariantProps } from \"@webiny/admin-ui\";\n\nconst simpleFormInnerVariants = cva(\"wby-mx-auto\", {\n    variants: {\n        size: {\n            md: \"wby-max-w-[640px]\",\n            lg: \"wby-max-w-[800px]\",\n            full: \"wby-max-w-full\"\n        }\n    },\n    defaultVariants: {\n        size: \"md\"\n    }\n});\n\ninterface SimpleFormProps\n    extends React.HTMLAttributes<HTMLDivElement>,\n        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\n            {...props}\n            className={cn([\"webiny-data-list\", \"wby-mx-auto wby-p-lg\", \"wby-relative\"], className)}\n        >\n            <div className={cn(simpleFormInnerVariants({ size }))}>{children}</div>\n        </div>\n    );\n};\n\nconst simpleFormHeaderVariants = cva(\n    \"wby-p-md wby-pl-lg wby-border-sm wby-border-neutral-dimmed-darker\",\n    {\n        variants: {\n            rounded: {\n                true: \"wby-rounded-t-3xl\"\n            }\n        },\n        defaultVariants: {\n            rounded: true\n        }\n    }\n);\n\ninterface SimpleFormHeaderProps\n    extends 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={\"wby-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                \"wby-p-lg wby-pt-none wby-border-sm wby-border-t-none wby-border-neutral-dimmed-darker wby-rounded-b-3xl\",\n                \"wby-flex wby-justify-end wby-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\n            className={cn(\n                \"wby-p-lg wby-border-sm wby-border-y-none wby-border-neutral-dimmed-darker\",\n                className\n            )}\n        >\n            {children}\n        </div>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/components/SimpleForm/index.js

@@ -1 +1,3 @@
-export { SimpleForm, SimpleFormHeader, SimpleFormFooter, SimpleFormContent } from "./SimpleForm";
+export { SimpleForm, SimpleFormHeader, SimpleFormFooter, SimpleFormContent } from "./SimpleForm";
+
+//# sourceMappingURL=index.js.map

package/components/SimpleForm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["SimpleForm","SimpleFormHeader","SimpleFormFooter","SimpleFormContent"],"sources":["index.ts"],"sourcesContent":["export { SimpleForm, SimpleFormHeader, SimpleFormFooter, SimpleFormContent } from \"./SimpleForm\";\n"],"mappings":"AAAA,SAASA,UAAU,EAAEC,gBAAgB,EAAEC,gBAAgB,EAAEC,iBAAiB","ignoreList":[]}

package/components/SimpleUI/InputField.d.ts

@@ -1,9 +1,12 @@
 import React from "react";
-declare type InputBoxProps = {
+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.MemoExoticComponent<({ className, value, onChange, label, description, validation, defaultValue, ...props }: InputBoxProps) => JSX.Element>;
+}
+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,12 +1,10 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "value", "onChange", "label", "description", "validation", "defaultValue"];
 import React from "react";
 import { css } from "emotion";
 import classNames from "classnames";
 import omit from "lodash/omit";
 import { Typography } from "@webiny/ui/Typography";
 import { FormElementMessage } from "@webiny/ui/FormElementMessage";
-var inputStyle = /*#__PURE__*/css({
+const inputStyle = css({
   boxSizing: "border-box",
   border: "1px solid var(--mdc-theme-on-background)",
   width: "100%",
@@ -38,60 +36,60 @@ var inputStyle = /*#__PURE__*/css({
     WebkitAppearance: "none",
     margin: 0
   }
-}, "label:inputStyle;");
-var labelStyle = /*#__PURE__*/css({
+});
+const labelStyle = css({
   marginBottom: 8,
   padding: "0px 8px",
   "& span": {
     color: "var(--mdc-theme-text-primary-on-background)"
   }
-}, "label:labelStyle;");
-
-var getValue = function getValue(_ref) {
-  var value = _ref.value,
-      defaultValue = _ref.defaultValue,
-      type = _ref.type;
-
+});
+const getValue = params => {
+  const {
+    value,
+    defaultValue,
+    type
+  } = params;
   if (type === "number") {
     return isNaN(value) ? defaultValue : value;
   }
-
   return value || defaultValue;
 };
-
-var InputField = function InputField(_ref2) {
-  var className = _ref2.className,
-      value = _ref2.value,
-      _onChange = _ref2.onChange,
-      label = _ref2.label,
-      description = _ref2.description,
-      _ref2$validation = _ref2.validation,
-      validation = _ref2$validation === void 0 ? {
+const InputField = ({
+  className,
+  value,
+  onChange,
+  onKeyDown,
+  label,
+  description,
+  validation = {
     isValid: true
-  } : _ref2$validation,
-      _ref2$defaultValue = _ref2.defaultValue,
-      defaultValue = _ref2$defaultValue === void 0 ? "" : _ref2$defaultValue,
-      props = _objectWithoutProperties(_ref2, _excluded);
-
+  },
+  defaultValue = "",
+  ...props
+}) => {
   return /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement("div", {
     className: labelStyle
   }, /*#__PURE__*/React.createElement(Typography, {
-    use: "subtitle2"
+    use: "body2"
   }, label)), /*#__PURE__*/React.createElement("input", Object.assign({
     className: classNames(inputStyle, className),
     value: getValue({
-      value: value,
-      type: props.type,
-      defaultValue: defaultValue
+      value,
+      type: props.type || "string",
+      defaultValue
     }),
-    onChange: function onChange(_ref3) {
-      var value = _ref3.target.value;
-
-      _onChange(value.toLowerCase());
+    onKeyDown: onKeyDown,
+    onChange: ev => {
+      if (!onChange) {
+        return;
+      }
+      onChange((ev.target.value || "").toLowerCase());
     }
   }, omit(props, "validate"))), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
     error: true
   }, validation.message), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
 };
+export default /*#__PURE__*/React.memo(InputField);
 
-export default /*#__PURE__*/React.memo(InputField);
+//# sourceMappingURL=InputField.js.map

package/components/SimpleUI/InputField.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","css","classNames","omit","Typography","FormElementMessage","inputStyle","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","createElement","Fragment","use","Object","assign","ev","target","toLowerCase","error","message","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\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":"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","ignoreList":[]}

package/components/SingleImageUpload.d.ts

@@ -1,25 +1,73 @@
-import * as React from "react";
-import { FormComponentProps } from "@webiny/ui/types";
-declare type SingleImageUploadProps = FormComponentProps & {
+import React from "react";
+import type { FileManagerFileItem } from "../index";
+import type { FormComponentProps } from "@webiny/ui/types";
+import { type FilePickerProps } from "@webiny/admin-ui";
+export interface SingleImageUploadProps extends FormComponentProps {
+    /**
+     * Accept types
+     */
     accept?: string[];
+    /**
+     * Component label.
+     */
     label?: string;
+    /**
+     * Is component disabled?
+     */
     disabled?: boolean;
+    /**
+     * Description beneath the image.
+     */
     description?: React.ReactNode;
+    /**
+     * A className for the root element.
+     */
     className?: string;
+    /**
+     * Define file's max allowed size (default is "10mb").
+     * Uses "bytes" (https://www.npmjs.com/package/bytes) library to convert string notation to actual number.
+     */
     maxSize?: number | string;
-    multipleMaxCount?: number;
-    multipleMaxSize?: number | string;
-    onChange?: Function;
+    /**
+     * onChange callback when a file is set or unset.
+     * 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;
+    /**
+     * Optional custom props, passed to the preview image.
+     */
     imagePreviewProps?: any;
+    /**
+     * By default, file meta is not included in the data passed to `onChange`. If you need it, set this flag to true.
+     */
+    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.
+     */
     onChangePick?: string[];
-};
-export default class SingleImageUpload extends React.Component<SingleImageUploadProps> {
-    static defaultProps: {
-        validation: {
-            isValid: any;
-        };
-    };
-    render(): JSX.Element;
+    /**
+     * Render the image preview.
+     */
+    renderFilePreview?: FilePickerProps["renderFilePreview"];
+    /**
+     * Render the trigger button.
+     */
+    renderTrigger?: FilePickerProps["renderTrigger"];
+    /**
+     * Component type.
+     */
+    type?: FilePickerProps["type"];
+    /**
+     * Component variant.
+     */
+    variant?: FilePickerProps["variant"];
 }
-export {};
+declare const SingleImageUpload: (props: SingleImageUploadProps) => React.JSX.Element;
+export default SingleImageUpload;