@webiny/app-admin 0.0.0-unstable.6f45466a1d → 0.0.0-unstable.7be00a75a9

package/components/SimpleUI/InputField.js

@@ -1,95 +1,79 @@
-import React from "react";
-import { css } from "emotion";
-import classNames from "classnames";
+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";
+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
-  }
+    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
+    }
 });
 const labelStyle = css({
-  marginBottom: 8,
-  padding: "0px 8px",
-  "& span": {
-    color: "var(--mdc-theme-text-primary-on-background)"
-  }
+    marginBottom: 8,
+    padding: "0px 8px",
+    "& span": {
+        color: "var(--mdc-theme-text-primary-on-background)"
+    }
 });
-const getValue = params => {
-  const {
-    value,
-    defaultValue,
-    type
-  } = params;
-  if (type === "number") {
-    return isNaN(value) ? defaultValue : value;
-  }
-  return value || defaultValue;
+const getValue = (params)=>{
+    const { value, defaultValue, type } = params;
+    if ("number" === type) return isNaN(value) ? defaultValue : value;
+    return value || defaultValue;
 };
-const InputField = ({
-  className,
-  value,
-  onChange,
-  onKeyDown,
-  label,
-  description,
-  validation = {
+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.createElement(Typography, {
-    use: "body2"
-  }, label)), /*#__PURE__*/React.createElement("input", Object.assign({
-    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"))), 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);
+}, 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":["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.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":"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","ignoreList":[]}
+{"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,6 @@
 import React from "react";
-import type { FileManagerFileItem } from "../index.js";
-import type { FormComponentProps } from "@webiny/ui/types.js";
+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 {
     /**

package/components/SingleImageUpload.js

@@ -1,62 +1,41 @@
-import React, { useCallback } from "react";
-import { FileManager } from "../index.js";
+import react, { useCallback } from "react";
+import { FileManager } from "../base/ui/FileManager.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;
-    }
-    if (value && !includeFileMeta) {
-      props.onChange({
-        id: value.id,
-        src: value.src
-      });
-      return;
-    }
-    if (value && includeFileMeta) {
-      props.onChange(value);
-      return;
-    }
-    props.onChange(null);
-  }, [props.onChange]);
-  return /*#__PURE__*/React.createElement(FileManager, {
-    onChange: onChange,
-    accept: accept,
-    images: !accept,
-    maxSize: maxSize,
-    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
-    }))
-  });
+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;
+        if (value && !includeFileMeta) return void props.onChange({
+            id: value.id,
+            src: value.src
+        });
+        if (value && includeFileMeta) return void props.onChange(value);
+        props.onChange(null);
+    }, [
+        props.onChange
+    ]);
+    return /*#__PURE__*/ react.createElement(FileManager, {
+        onChange: onChange,
+        accept: accept,
+        images: !accept,
+        maxSize: maxSize,
+        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
+            }))
+    });
 };
-export default SingleImageUpload;
+const components_SingleImageUpload = SingleImageUpload;
+export default components_SingleImageUpload;
 
 //# sourceMappingURL=SingleImageUpload.js.map

package/components/SingleImageUpload.js.map

@@ -1 +1 @@
-{"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":[]}
+{"version":3,"file":"components/SingleImageUpload.js","sources":["../../src/components/SingleImageUpload.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport type { FileManagerFileItem } from \"~/base/ui/FileManager.js\";\nimport { FileManager } from \"~/base/ui/FileManager.js\";\nimport type { FormComponentProps } from \"@webiny/admin-ui\";\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"],"names":["SingleImageUpload","props","accept","className","description","disabled","includeFileMeta","label","maxSize","renderFilePreview","renderTrigger","validation","value","variant","type","onChange","useCallback","FileManager","showFileManager","FilePicker","FileItem"],"mappings":";;;AAkFA,MAAMA,oBAAoB,CAACC;IACvB,MAAM,EACFC,MAAM,EACNC,SAAS,EACTC,WAAW,EACXC,QAAQ,EACRC,kBAAkB,KAAK,EACvBC,KAAK,EACLC,OAAO,EACPC,iBAAiB,EACjBC,aAAa,EACbC,UAAU,EACVC,KAAK,EACLC,OAAO,EACPC,IAAI,EACP,GAAGb;IAEJ,MAAMc,WAAWC,YACb,CAACJ;QACG,IAAI,CAACX,MAAM,QAAQ,EACf;QAGJ,IAAIW,SAAS,CAACN,iBAAiB,YAC3BL,MAAM,QAAQ,CAAC;YAAE,IAAIW,MAAM,EAAE;YAAE,KAAKA,MAAM,GAAG;QAAC;QAIlD,IAAIA,SAASN,iBAAiB,YAC1BL,MAAM,QAAQ,CAACW;QAInBX,MAAM,QAAQ,CAAC;IACnB,GACA;QAACA,MAAM,QAAQ;KAAC;IAGpB,OAAO,WAAP,GACI,oBAACgB,aAAWA;QACR,UAAUF;QACV,QAAQb;QACR,QAAQ,CAACA;QACT,SAASM;QACT,QAAQ,CAAC,EAAEU,eAAe,EAAE,iBACxB,wDACI,oBAACC,YAAUA;gBACP,OAAOZ;gBACP,aAAaH;gBACb,YAAYO;gBACZ,WAAWR;gBACX,UAAUE;gBACV,OAAOO,QAAQQ,SAAS,aAAa,CAACR,MAAM,GAAG,IAAI;gBACnD,cAAcM;gBACd,cAAc,IAAMH,SAAS;gBAC7B,mBAAmBN;gBACnB,eAAeC;gBACf,SAASG;gBACT,MAAMC;;;AAM9B;AAEA,qCAAed"}

package/components/SplitView/SplitView.d.ts

@@ -1,13 +1,13 @@
 import * as React from "react";
 import type { ColumnProps } from "@webiny/admin-ui";
 import type { PanelProps, PanelGroupProps } from "../../components/ResizablePanels/index.js";
-interface SplitViewProps extends Omit<PanelGroupProps, "direction" | "id" | "autoSaveId"> {
-    layoutId?: string | null;
+interface SplitViewProps extends Omit<PanelGroupProps, "id"> {
+    namespace?: string;
 }
-declare const SplitView: ({ children, className, layoutId, ...props }: SplitViewProps) => React.JSX.Element;
+export declare const SplitView: ({ children, className, namespace, ...props }: SplitViewProps) => React.JSX.Element;
 interface SplitViewPanelProps extends Omit<PanelProps, "id"> {
     span?: ColumnProps["span"];
 }
-declare const LeftPanel: ({ children, className, ...props }: SplitViewPanelProps) => React.JSX.Element;
-declare const RightPanel: ({ children, className, ...props }: SplitViewPanelProps) => React.JSX.Element;
-export { SplitView, LeftPanel, RightPanel };
+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,57 +1,55 @@
-import * as React from "react";
-import { cn, Separator } from "@webiny/admin-ui";
+import { Separator, cn } from "@webiny/admin-ui";
 import { Panel, PanelGroup, PanelResizeHandle } from "../ResizablePanels/index.js";
-const SplitView = ({
-  children,
-  className,
-  layoutId,
-  ...props
-}) => {
-  return /*#__PURE__*/React.createElement(PanelGroup, Object.assign({
-    direction: "horizontal",
-    id: "splitView",
-    autoSaveId: layoutId,
-    className: cn("webiny-split-view", className)
-  }, props), children);
+import { useLocalStorage, useLocalStorageValue } from "@webiny/app";
+import * as __rspack_external_react from "react";
+const SplitView = ({ children, className, namespace = "splitView", ...props })=>{
+    const localStorage = useLocalStorage();
+    const layout = useLocalStorageValue(namespace);
+    const saveLayout = (0, __rspack_external_react.useCallback)((layout)=>{
+        localStorage.set(`${namespace}/panels`, layout);
+    }, [
+        localStorage,
+        namespace
+    ]);
+    return /*#__PURE__*/ __rspack_external_react.createElement(PanelGroup, {
+        id: namespace,
+        defaultLayout: layout,
+        className: cn("webiny-split-view", className),
+        onLayoutChanged: saveLayout,
+        ...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;
+const getDefaultSize = (span)=>{
+    const spanValue = "number" == typeof span && span > 0 && span <= 12 ? span : 6;
+    return spanValue / 12 * 100;
 };
-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, null, /*#__PURE__*/React.createElement(Separator, {
-    orientation: "vertical"
-  })));
+const LeftPanel = ({ children, className, ...props })=>{
+    const defaultSize = props.defaultSize ?? getDefaultSize(props.span || 5);
+    return /*#__PURE__*/ __rspack_external_react.createElement(__rspack_external_react.Fragment, null, /*#__PURE__*/ __rspack_external_react.createElement(Panel, {
+        defaultSize: defaultSize,
+        minSize: 10,
+        id: "leftPanel",
+        className: cn("webiny-split-view__right-panel", className),
+        ...props
+    }, children), /*#__PURE__*/ __rspack_external_react.createElement(PanelResizeHandle, {
+        className: "outline-0"
+    }, /*#__PURE__*/ __rspack_external_react.createElement(Separator, {
+        orientation: "vertical"
+    })));
 };
-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);
+const RightPanel = ({ children, className, ...props })=>{
+    const defaultSize = props.defaultSize ?? getDefaultSize(props.span || 7);
+    return /*#__PURE__*/ __rspack_external_react.createElement(Panel, {
+        defaultSize: defaultSize,
+        minSize: 30,
+        id: "rightPanel",
+        className: cn("overflow-scroll! webiny-split-view__right-panel", className),
+        ...props,
+        style: {
+            overflowY: "scroll"
+        }
+    }, children);
 };
-export { SplitView, LeftPanel, RightPanel };
+export { LeftPanel, RightPanel, SplitView };
 
 //# sourceMappingURL=SplitView.js.map

package/components/SplitView/SplitView.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cn","Separator","Panel","PanelGroup","PanelResizeHandle","SplitView","children","className","layoutId","props","createElement","Object","assign","direction","id","autoSaveId","getDefaultSize","span","spanValue","LeftPanel","defaultSize","Fragment","minSize","orientation","RightPanel","style","overflowY"],"sources":["SplitView.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { ColumnProps } from \"@webiny/admin-ui\";\nimport { cn, Separator } from \"@webiny/admin-ui\";\nimport type { PanelProps, PanelGroupProps } from \"~/components/ResizablePanels/index.js\";\nimport { Panel, PanelGroup, PanelResizeHandle } from \"~/components/ResizablePanels/index.js\";\n\ninterface SplitViewProps extends Omit<PanelGroupProps, \"direction\" | \"id\" | \"autoSaveId\"> {\n    layoutId?: string | null;\n}\n\nconst SplitView = ({ children, className, layoutId, ...props }: SplitViewProps) => {\n    return (\n        <PanelGroup\n            direction=\"horizontal\"\n            id=\"splitView\"\n            autoSaveId={layoutId}\n            className={cn(\"webiny-split-view\", className)}\n            {...props}\n        >\n            {children}\n        </PanelGroup>\n    );\n};\n\n// Get the default size for the panel:\nconst getDefaultSize = (span: ColumnProps[\"span\"]) => {\n    const spanValue = typeof span === \"number\" && span > 0 && span <= 12 ? span : 6;\n    return (spanValue / 12) * 100;\n};\n\ninterface SplitViewPanelProps extends Omit<PanelProps, \"id\"> {\n    span?: ColumnProps[\"span\"];\n}\n\nconst LeftPanel = ({ children, className, ...props }: SplitViewPanelProps) => {\n    const defaultSize = props.defaultSize ?? getDefaultSize(props.span || 5);\n\n    return (\n        <>\n            <Panel\n                defaultSize={defaultSize}\n                minSize={10}\n                id=\"leftPanel\"\n                className={cn(\"webiny-split-view__right-panel\", className)}\n                {...props}\n            >\n                {children}\n            </Panel>\n            <PanelResizeHandle>\n                <Separator orientation={\"vertical\"} />\n            </PanelResizeHandle>\n        </>\n    );\n};\n\nconst RightPanel = ({ children, className, ...props }: SplitViewPanelProps) => {\n    const defaultSize = props.defaultSize ?? getDefaultSize(props.span || 7);\n\n    return (\n        <Panel\n            defaultSize={defaultSize}\n            minSize={30}\n            id=\"rightPanel\"\n            className={cn(\"overflow-scroll! webiny-split-view__right-panel\", className)}\n            {...props}\n            style={{ overflowY: \"scroll\" }}\n        >\n            {children}\n        </Panel>\n    );\n};\n\nexport { SplitView, LeftPanel, RightPanel };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SAASC,EAAE,EAAEC,SAAS,QAAQ,kBAAkB;AAEhD,SAASC,KAAK,EAAEC,UAAU,EAAEC,iBAAiB;AAM7C,MAAMC,SAAS,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,SAAS;EAAEC,QAAQ;EAAE,GAAGC;AAAsB,CAAC,KAAK;EAC/E,oBACIV,KAAA,CAAAW,aAAA,CAACP,UAAU,EAAAQ,MAAA,CAAAC,MAAA;IACPC,SAAS,EAAC,YAAY;IACtBC,EAAE,EAAC,WAAW;IACdC,UAAU,EAAEP,QAAS;IACrBD,SAAS,EAAEP,EAAE,CAAC,mBAAmB,EAAEO,SAAS;EAAE,GAC1CE,KAAK,GAERH,QACO,CAAC;AAErB,CAAC;;AAED;AACA,MAAMU,cAAc,GAAIC,IAAyB,IAAK;EAClD,MAAMC,SAAS,GAAG,OAAOD,IAAI,KAAK,QAAQ,IAAIA,IAAI,GAAG,CAAC,IAAIA,IAAI,IAAI,EAAE,GAAGA,IAAI,GAAG,CAAC;EAC/E,OAAQC,SAAS,GAAG,EAAE,GAAI,GAAG;AACjC,CAAC;AAMD,MAAMC,SAAS,GAAGA,CAAC;EAAEb,QAAQ;EAAEC,SAAS;EAAE,GAAGE;AAA2B,CAAC,KAAK;EAC1E,MAAMW,WAAW,GAAGX,KAAK,CAACW,WAAW,IAAIJ,cAAc,CAACP,KAAK,CAACQ,IAAI,IAAI,CAAC,CAAC;EAExE,oBACIlB,KAAA,CAAAW,aAAA,CAAAX,KAAA,CAAAsB,QAAA,qBACItB,KAAA,CAAAW,aAAA,CAACR,KAAK,EAAAS,MAAA,CAAAC,MAAA;IACFQ,WAAW,EAAEA,WAAY;IACzBE,OAAO,EAAE,EAAG;IACZR,EAAE,EAAC,WAAW;IACdP,SAAS,EAAEP,EAAE,CAAC,gCAAgC,EAAEO,SAAS;EAAE,GACvDE,KAAK,GAERH,QACE,CAAC,eACRP,KAAA,CAAAW,aAAA,CAACN,iBAAiB,qBACdL,KAAA,CAAAW,aAAA,CAACT,SAAS;IAACsB,WAAW,EAAE;EAAW,CAAE,CACtB,CACrB,CAAC;AAEX,CAAC;AAED,MAAMC,UAAU,GAAGA,CAAC;EAAElB,QAAQ;EAAEC,SAAS;EAAE,GAAGE;AAA2B,CAAC,KAAK;EAC3E,MAAMW,WAAW,GAAGX,KAAK,CAACW,WAAW,IAAIJ,cAAc,CAACP,KAAK,CAACQ,IAAI,IAAI,CAAC,CAAC;EAExE,oBACIlB,KAAA,CAAAW,aAAA,CAACR,KAAK,EAAAS,MAAA,CAAAC,MAAA;IACFQ,WAAW,EAAEA,WAAY;IACzBE,OAAO,EAAE,EAAG;IACZR,EAAE,EAAC,YAAY;IACfP,SAAS,EAAEP,EAAE,CAAC,iDAAiD,EAAEO,SAAS;EAAE,GACxEE,KAAK;IACTgB,KAAK,EAAE;MAAEC,SAAS,EAAE;IAAS;EAAE,IAE9BpB,QACE,CAAC;AAEhB,CAAC;AAED,SAASD,SAAS,EAAEc,SAAS,EAAEK,UAAU","ignoreList":[]}
+{"version":3,"file":"components/SplitView/SplitView.js","sources":["../../../src/components/SplitView/SplitView.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { ColumnProps } from \"@webiny/admin-ui\";\nimport { cn, Separator } from \"@webiny/admin-ui\";\nimport type { PanelProps, PanelGroupProps } from \"~/components/ResizablePanels/index.js\";\nimport {\n    Panel,\n    PanelGroup,\n    PanelResizeHandle,\n    type Layout\n} from \"~/components/ResizablePanels/index.js\";\nimport { useLocalStorage, useLocalStorageValue } from \"@webiny/app\";\nimport { useCallback } from \"react\";\n\ninterface SplitViewProps extends Omit<PanelGroupProps, \"id\"> {\n    namespace?: string;\n}\n\nexport const SplitView = ({\n    children,\n    className,\n    namespace = \"splitView\",\n    ...props\n}: SplitViewProps) => {\n    const localStorage = useLocalStorage();\n\n    const layout = useLocalStorageValue<Layout>(namespace);\n\n    const saveLayout = useCallback(\n        (layout: Layout) => {\n            localStorage.set(`${namespace}/panels`, layout);\n        },\n        [localStorage, namespace]\n    );\n\n    return (\n        <PanelGroup\n            id={namespace}\n            defaultLayout={layout}\n            className={cn(\"webiny-split-view\", className)}\n            onLayoutChanged={saveLayout}\n            {...props}\n        >\n            {children}\n        </PanelGroup>\n    );\n};\n\n// Get the default size for the panel:\nconst getDefaultSize = (span: ColumnProps[\"span\"]) => {\n    const spanValue = typeof span === \"number\" && span > 0 && span <= 12 ? span : 6;\n    return (spanValue / 12) * 100;\n};\n\ninterface SplitViewPanelProps extends Omit<PanelProps, \"id\"> {\n    span?: ColumnProps[\"span\"];\n}\n\nexport const LeftPanel = ({ children, className, ...props }: SplitViewPanelProps) => {\n    const defaultSize = props.defaultSize ?? getDefaultSize(props.span || 5);\n\n    return (\n        <>\n            <Panel\n                defaultSize={defaultSize}\n                minSize={10}\n                id=\"leftPanel\"\n                className={cn(\"webiny-split-view__right-panel\", className)}\n                {...props}\n            >\n                {children}\n            </Panel>\n            <PanelResizeHandle className={\"outline-0\"}>\n                <Separator orientation={\"vertical\"} />\n            </PanelResizeHandle>\n        </>\n    );\n};\n\nexport const RightPanel = ({ children, className, ...props }: SplitViewPanelProps) => {\n    const defaultSize = props.defaultSize ?? getDefaultSize(props.span || 7);\n\n    return (\n        <Panel\n            defaultSize={defaultSize}\n            minSize={30}\n            id=\"rightPanel\"\n            className={cn(\"overflow-scroll! webiny-split-view__right-panel\", className)}\n            {...props}\n            style={{ overflowY: \"scroll\" }}\n        >\n            {children}\n        </Panel>\n    );\n};\n"],"names":["SplitView","children","className","namespace","props","localStorage","useLocalStorage","layout","useLocalStorageValue","saveLayout","useCallback","PanelGroup","cn","getDefaultSize","span","spanValue","LeftPanel","defaultSize","Panel","PanelResizeHandle","Separator","RightPanel"],"mappings":";;;;AAiBO,MAAMA,YAAY,CAAC,EACtBC,QAAQ,EACRC,SAAS,EACTC,YAAY,WAAW,EACvB,GAAGC,OACU;IACb,MAAMC,eAAeC;IAErB,MAAMC,SAASC,qBAA6BL;IAE5C,MAAMM,aAAaC,AAAAA,IAAAA,wBAAAA,WAAAA,AAAAA,EACf,CAACH;QACGF,aAAa,GAAG,CAAC,GAAGF,UAAU,OAAO,CAAC,EAAEI;IAC5C,GACA;QAACF;QAAcF;KAAU;IAG7B,OAAO,WAAP,GACI,sCAACQ,YAAUA;QACP,IAAIR;QACJ,eAAeI;QACf,WAAWK,GAAG,qBAAqBV;QACnC,iBAAiBO;QAChB,GAAGL,KAAK;OAERH;AAGb;AAGA,MAAMY,iBAAiB,CAACC;IACpB,MAAMC,YAAY,AAAgB,YAAhB,OAAOD,QAAqBA,OAAO,KAAKA,QAAQ,KAAKA,OAAO;IAC9E,OAAQC,YAAY,KAAM;AAC9B;AAMO,MAAMC,YAAY,CAAC,EAAEf,QAAQ,EAAEC,SAAS,EAAE,GAAGE,OAA4B;IAC5E,MAAMa,cAAcb,MAAM,WAAW,IAAIS,eAAeT,MAAM,IAAI,IAAI;IAEtE,OAAO,WAAP,GACI,4FACI,sCAACc,OAAKA;QACF,aAAaD;QACb,SAAS;QACT,IAAG;QACH,WAAWL,GAAG,kCAAkCV;QAC/C,GAAGE,KAAK;OAERH,WAAAA,WAAAA,GAEL,sCAACkB,mBAAiBA;QAAC,WAAW;qBAC1B,sCAACC,WAASA;QAAC,aAAa;;AAIxC;AAEO,MAAMC,aAAa,CAAC,EAAEpB,QAAQ,EAAEC,SAAS,EAAE,GAAGE,OAA4B;IAC7E,MAAMa,cAAcb,MAAM,WAAW,IAAIS,eAAeT,MAAM,IAAI,IAAI;IAEtE,OAAO,WAAP,GACI,sCAACc,OAAKA;QACF,aAAaD;QACb,SAAS;QACT,IAAG;QACH,WAAWL,GAAG,mDAAmDV;QAChE,GAAGE,KAAK;QACT,OAAO;YAAE,WAAW;QAAS;OAE5BH;AAGb"}

package/components/SplitView/index.js

@@ -1,3 +1 @@
-export { SplitView, LeftPanel, RightPanel } from "./SplitView.js";
-
-//# sourceMappingURL=index.js.map
+export { LeftPanel, RightPanel, SplitView } from "./SplitView.js";

package/components/TeamAutocomplete/graphql.js

@@ -1,5 +1,5 @@
-import gql from "graphql-tag";
-export const LIST_TEAMS = gql`
+import graphql_tag from "graphql-tag";
+const LIST_TEAMS = graphql_tag`
     query listTeams {
         security {
             teams: listTeams {
@@ -14,5 +14,6 @@ export const LIST_TEAMS = gql`
         }
     }
 `;
+export { LIST_TEAMS };
 
 //# sourceMappingURL=graphql.js.map

package/components/TeamAutocomplete/graphql.js.map

@@ -1 +1 @@
-{"version":3,"names":["gql","LIST_TEAMS"],"sources":["graphql.ts"],"sourcesContent":["import gql from \"graphql-tag\";\n\nexport const LIST_TEAMS = gql`\n    query listTeams {\n        security {\n            teams: listTeams {\n                data {\n                    id\n                    slug\n                    name\n                    description\n                    createdOn\n                }\n            }\n        }\n    }\n`;\n"],"mappings":"AAAA,OAAOA,GAAG,MAAM,aAAa;AAE7B,OAAO,MAAMC,UAAU,GAAGD,GAAG;AAC7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"components/TeamAutocomplete/graphql.js","sources":["../../../src/components/TeamAutocomplete/graphql.ts"],"sourcesContent":["import gql from \"graphql-tag\";\n\nexport const LIST_TEAMS = gql`\n    query listTeams {\n        security {\n            teams: listTeams {\n                data {\n                    id\n                    slug\n                    name\n                    description\n                    createdOn\n                }\n            }\n        }\n    }\n`;\n"],"names":["LIST_TEAMS","gql"],"mappings":";AAEO,MAAMA,aAAaC,WAAG,CAAC;;;;;;;;;;;;;;AAc9B,CAAC"}

package/components/TeamAutocomplete/index.d.ts

@@ -1,5 +1,7 @@
 import React from "react";
-import type { AutoCompleteProps } from "@webiny/ui/AutoComplete/index.js";
-type TeamAutocompleteProps = Partial<AutoCompleteProps>;
-export declare const TeamAutocomplete: (props: TeamAutocompleteProps) => React.JSX.Element;
+import { AutoComplete } from "@webiny/admin-ui";
+type TeamAutocompleteProps = Omit<React.ComponentProps<typeof AutoComplete>, "options" | "onValueChange"> & {
+    onChange?: (value: string) => void;
+};
+export declare const TeamAutocomplete: ({ onChange, value, ...props }: TeamAutocompleteProps) => React.JSX.Element;
 export {};

package/components/TeamAutocomplete/index.js

@@ -1,18 +1,26 @@
-import React from "react";
-import { AutoComplete } from "@webiny/ui/AutoComplete/index.js";
+import react, { useCallback, useMemo } from "react";
+import { AutoComplete } from "@webiny/admin-ui";
 import { LIST_TEAMS } from "./graphql.js";
 import { useQuery } from "@apollo/react-hooks";
-export const TeamAutocomplete = props => {
-  const {
-    data,
-    loading
-  } = useQuery(LIST_TEAMS);
-  const options = loading || !data ? [] : data.security.teams.data;
-  return /*#__PURE__*/React.createElement(AutoComplete, Object.assign({}, props, {
-    options: options,
-    valueProp: "id",
-    value: loading ? undefined : props.value
-  }));
+const TeamAutocomplete = ({ onChange, value, ...props })=>{
+    const { data, loading } = useQuery(LIST_TEAMS);
+    const rawOptions = loading || !data ? [] : data.security.teams.data;
+    const options = useMemo(()=>rawOptions.map((team)=>({
+                label: team.name,
+                value: team.id
+            })), [
+        rawOptions
+    ]);
+    const onValueChange = useCallback((id)=>onChange?.(id), [
+        onChange
+    ]);
+    return /*#__PURE__*/ react.createElement(AutoComplete, {
+        ...props,
+        options: options,
+        value: loading ? void 0 : value,
+        onValueChange: onValueChange
+    });
 };
+export { TeamAutocomplete };
 
 //# sourceMappingURL=index.js.map

package/components/TeamAutocomplete/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","AutoComplete","LIST_TEAMS","useQuery","TeamAutocomplete","props","data","loading","options","security","teams","createElement","Object","assign","valueProp","value","undefined"],"sources":["index.tsx"],"sourcesContent":["import React from \"react\";\nimport type { AutoCompleteProps } from \"@webiny/ui/AutoComplete/index.js\";\nimport { AutoComplete } from \"@webiny/ui/AutoComplete/index.js\";\nimport { LIST_TEAMS } from \"./graphql.js\";\nimport { useQuery } from \"@apollo/react-hooks\";\n\ntype TeamAutocompleteProps = Partial<AutoCompleteProps>;\nexport const TeamAutocomplete = (props: TeamAutocompleteProps) => {\n    const { data, loading } = useQuery(LIST_TEAMS);\n\n    const options = loading || !data ? [] : data.security.teams.data;\n\n    return (\n        <AutoComplete\n            {...props}\n            options={options}\n            valueProp={\"id\"}\n            value={loading ? undefined : props.value}\n        />\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,YAAY,QAAQ,kCAAkC;AAC/D,SAASC,UAAU;AACnB,SAASC,QAAQ,QAAQ,qBAAqB;AAG9C,OAAO,MAAMC,gBAAgB,GAAIC,KAA4B,IAAK;EAC9D,MAAM;IAAEC,IAAI;IAAEC;EAAQ,CAAC,GAAGJ,QAAQ,CAACD,UAAU,CAAC;EAE9C,MAAMM,OAAO,GAAGD,OAAO,IAAI,CAACD,IAAI,GAAG,EAAE,GAAGA,IAAI,CAACG,QAAQ,CAACC,KAAK,CAACJ,IAAI;EAEhE,oBACIN,KAAA,CAAAW,aAAA,CAACV,YAAY,EAAAW,MAAA,CAAAC,MAAA,KACLR,KAAK;IACTG,OAAO,EAAEA,OAAQ;IACjBM,SAAS,EAAE,IAAK;IAChBC,KAAK,EAAER,OAAO,GAAGS,SAAS,GAAGX,KAAK,CAACU;EAAM,EAC5C,CAAC;AAEV,CAAC","ignoreList":[]}
+{"version":3,"file":"components/TeamAutocomplete/index.js","sources":["../../../src/components/TeamAutocomplete/index.tsx"],"sourcesContent":["import React, { useMemo, useCallback } from \"react\";\nimport { AutoComplete } from \"@webiny/admin-ui\";\nimport { LIST_TEAMS } from \"./graphql.js\";\nimport { useQuery } from \"@apollo/react-hooks\";\n\ntype TeamAutocompleteProps = Omit<\n    React.ComponentProps<typeof AutoComplete>,\n    \"options\" | \"onValueChange\"\n> & {\n    onChange?: (value: string) => void;\n};\n\nexport const TeamAutocomplete = ({ onChange, value, ...props }: TeamAutocompleteProps) => {\n    const { data, loading } = useQuery(LIST_TEAMS);\n    const rawOptions = loading || !data ? [] : data.security.teams.data;\n\n    const options = useMemo(\n        () => rawOptions.map((team: any) => ({ label: team.name, value: team.id })),\n        [rawOptions]\n    );\n\n    const onValueChange = useCallback((id: string) => onChange?.(id), [onChange]);\n\n    return (\n        <AutoComplete\n            {...props}\n            options={options}\n            value={loading ? undefined : (value as string | undefined)}\n            onValueChange={onValueChange}\n        />\n    );\n};\n"],"names":["TeamAutocomplete","onChange","value","props","data","loading","useQuery","LIST_TEAMS","rawOptions","options","useMemo","team","onValueChange","useCallback","id","AutoComplete","undefined"],"mappings":";;;;AAYO,MAAMA,mBAAmB,CAAC,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGC,OAA8B;IACjF,MAAM,EAAEC,IAAI,EAAEC,OAAO,EAAE,GAAGC,SAASC;IACnC,MAAMC,aAAaH,WAAW,CAACD,OAAO,EAAE,GAAGA,KAAK,QAAQ,CAAC,KAAK,CAAC,IAAI;IAEnE,MAAMK,UAAUC,QACZ,IAAMF,WAAW,GAAG,CAAC,CAACG,OAAe;gBAAE,OAAOA,KAAK,IAAI;gBAAE,OAAOA,KAAK,EAAE;YAAC,KACxE;QAACH;KAAW;IAGhB,MAAMI,gBAAgBC,YAAY,CAACC,KAAeb,WAAWa,KAAK;QAACb;KAAS;IAE5E,OAAO,WAAP,GACI,oBAACc,cAAYA;QACR,GAAGZ,KAAK;QACT,SAASM;QACT,OAAOJ,UAAUW,SAAad;QAC9B,eAAeU;;AAG3B"}