@webiny/app-admin 0.0.0-unstable.e53eceafb5 → 0.0.0-unstable.e6f0dc8ca7

package/components/LexicalEditor/LexicalEditor.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","FileManager","RichTextEditor","BaseEditor","useTheme","imagesOnly","LexicalEditor","props","theme","editorTheme","styles","emotionMap","createElement","accept","showFileManager","Object","assign","toolbarActionPlugins","targetAction","plugin"],"sources":["LexicalEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { FileManager } from \"~/components\";\nimport { RichTextEditor as BaseEditor } from \"@webiny/lexical-editor\";\nimport type { RichTextEditorProps } from \"@webiny/lexical-editor/types\";\nimport { useTheme } from \"@webiny/app-theme\";\nimport type { EditorTheme } from \"@webiny/lexical-theme\";\n\ninterface LexicalEditorProps extends Omit<RichTextEditorProps, \"theme\"> {\n    theme?: Partial<EditorTheme>;\n}\n\nconst imagesOnly = [\"image/*\"];\n\nexport const LexicalEditor = (props: LexicalEditorProps) => {\n    const { theme } = useTheme();\n\n    const editorTheme: EditorTheme = {\n        styles: {},\n        emotionMap: {},\n        ...theme,\n        ...(props.theme || {})\n    };\n\n    return (\n        <FileManager accept={imagesOnly}>\n            {({ showFileManager }) => (\n                <BaseEditor\n                    {...props}\n                    theme={editorTheme}\n                    toolbarActionPlugins={[\n                        ...(props.toolbarActionPlugins || []),\n                        { targetAction: \"image-action\", plugin: showFileManager }\n                    ]}\n                />\n            )}\n        </FileManager>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,WAAW;AACpB,SAASC,cAAc,IAAIC,UAAU,QAAQ,wBAAwB;AAErE,SAASC,QAAQ,QAAQ,mBAAmB;AAO5C,MAAMC,UAAU,GAAG,CAAC,SAAS,CAAC;AAE9B,OAAO,MAAMC,aAAa,GAAIC,KAAyB,IAAK;EACxD,MAAM;IAAEC;EAAM,CAAC,GAAGJ,QAAQ,CAAC,CAAC;EAE5B,MAAMK,WAAwB,GAAG;IAC7BC,MAAM,EAAE,CAAC,CAAC;IACVC,UAAU,EAAE,CAAC,CAAC;IACd,GAAGH,KAAK;IACR,IAAID,KAAK,CAACC,KAAK,IAAI,CAAC,CAAC;EACzB,CAAC;EAED,oBACIR,KAAA,CAAAY,aAAA,CAACX,WAAW;IAACY,MAAM,EAAER;EAAW,GAC3B,CAAC;IAAES;EAAgB,CAAC,kBACjBd,KAAA,CAAAY,aAAA,CAACT,UAAU,EAAAY,MAAA,CAAAC,MAAA,KACHT,KAAK;IACTC,KAAK,EAAEC,WAAY;IACnBQ,oBAAoB,EAAE,CAClB,IAAIV,KAAK,CAACU,oBAAoB,IAAI,EAAE,CAAC,EACrC;MAAEC,YAAY,EAAE,cAAc;MAAEC,MAAM,EAAEL;IAAgB,CAAC;EAC3D,EACL,CAEI,CAAC;AAEtB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useEffect","useMemo","useRef","FileManager","RichTextEditor","BaseEditor","DelayedOnChange","useAdminConfig","lexicalValueWithHtml","lexicalValueFromHtml","imagesOnly","noop","LexicalEditor","props","lexicalTheme","configRef","undefined","current","value","html","state","onChange","createElement","accept","render","showFileManager","Object","assign","theme","toolbarActionPlugins","targetAction","plugin"],"sources":["LexicalEditor.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } from \"react\";\nimport { FileManager } from \"~/components/index.js\";\nimport { RichTextEditor as BaseEditor } from \"@webiny/lexical-editor\";\nimport type { RichTextEditorProps } from \"@webiny/lexical-editor/types.js\";\nimport { DelayedOnChange } from \"@webiny/admin-ui\";\nimport { useAdminConfig } from \"~/config/AdminConfig.js\";\nimport { lexicalValueWithHtml, type RichTextValueWithHtml } from \"./lexicalValueWithHtml.js\";\nimport { lexicalValueFromHtml } from \"./lexicalValueFromHtml.js\";\n\nexport interface LexicalEditorProps extends Omit<\n    RichTextEditorProps,\n    \"value\" | \"onChange\" | \"theme\"\n> {\n    value?: RichTextValueWithHtml;\n    onChange?: (value: RichTextValueWithHtml) => void;\n    theme?: RichTextEditorProps[\"theme\"];\n}\n\nconst imagesOnly = [\"image/*\"];\nconst noop = () => {};\n\nexport const LexicalEditor = (props: LexicalEditorProps) => {\n    const { lexicalTheme } = useAdminConfig();\n    const configRef = useRef<BaseEditor.InitialConfig | undefined>(undefined);\n\n    useEffect(() => {\n        if (configRef.current && props.value?.html && !props.value.state && props.onChange) {\n            lexicalValueFromHtml(configRef, props.onChange)(props.value.html);\n        }\n    }, [configRef.current, props.value, props.onChange]);\n\n    const onChange = useMemo(() => {\n        return lexicalValueWithHtml(configRef, props.onChange ?? noop);\n    }, [props.onChange]);\n\n    return (\n        <FileManager\n            accept={imagesOnly}\n            render={({ showFileManager }) => (\n                <DelayedOnChange value={props.value?.state} onChange={onChange}>\n                    {({ value, onChange }) => (\n                        <BaseEditor\n                            {...props}\n                            value={value}\n                            onChange={onChange}\n                            theme={props.theme ?? lexicalTheme}\n                            configRef={configRef}\n                            toolbarActionPlugins={[\n                                ...(props.toolbarActionPlugins || []),\n                                { targetAction: \"image-action\", plugin: showFileManager }\n                            ]}\n                        />\n                    )}\n                </DelayedOnChange>\n            )}\n        />\n    );\n};\n\nexport namespace LexicalEditor {\n    export type Props = LexicalEditorProps;\n}\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AACzD,SAASC,WAAW;AACpB,SAASC,cAAc,IAAIC,UAAU,QAAQ,wBAAwB;AAErE,SAASC,eAAe,QAAQ,kBAAkB;AAClD,SAASC,cAAc;AACvB,SAASC,oBAAoB;AAC7B,SAASC,oBAAoB;AAW7B,MAAMC,UAAU,GAAG,CAAC,SAAS,CAAC;AAC9B,MAAMC,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;AAErB,OAAO,MAAMC,aAAa,GAAIC,KAAyB,IAAK;EACxD,MAAM;IAAEC;EAAa,CAAC,GAAGP,cAAc,CAAC,CAAC;EACzC,MAAMQ,SAAS,GAAGb,MAAM,CAAuCc,SAAS,CAAC;EAEzEhB,SAAS,CAAC,MAAM;IACZ,IAAIe,SAAS,CAACE,OAAO,IAAIJ,KAAK,CAACK,KAAK,EAAEC,IAAI,IAAI,CAACN,KAAK,CAACK,KAAK,CAACE,KAAK,IAAIP,KAAK,CAACQ,QAAQ,EAAE;MAChFZ,oBAAoB,CAACM,SAAS,EAAEF,KAAK,CAACQ,QAAQ,CAAC,CAACR,KAAK,CAACK,KAAK,CAACC,IAAI,CAAC;IACrE;EACJ,CAAC,EAAE,CAACJ,SAAS,CAACE,OAAO,EAAEJ,KAAK,CAACK,KAAK,EAAEL,KAAK,CAACQ,QAAQ,CAAC,CAAC;EAEpD,MAAMA,QAAQ,GAAGpB,OAAO,CAAC,MAAM;IAC3B,OAAOO,oBAAoB,CAACO,SAAS,EAAEF,KAAK,CAACQ,QAAQ,IAAIV,IAAI,CAAC;EAClE,CAAC,EAAE,CAACE,KAAK,CAACQ,QAAQ,CAAC,CAAC;EAEpB,oBACItB,KAAA,CAAAuB,aAAA,CAACnB,WAAW;IACRoB,MAAM,EAAEb,UAAW;IACnBc,MAAM,EAAEA,CAAC;MAAEC;IAAgB,CAAC,kBACxB1B,KAAA,CAAAuB,aAAA,CAAChB,eAAe;MAACY,KAAK,EAAEL,KAAK,CAACK,KAAK,EAAEE,KAAM;MAACC,QAAQ,EAAEA;IAAS,GAC1D,CAAC;MAAEH,KAAK;MAAEG;IAAS,CAAC,kBACjBtB,KAAA,CAAAuB,aAAA,CAACjB,UAAU,EAAAqB,MAAA,CAAAC,MAAA,KACHd,KAAK;MACTK,KAAK,EAAEA,KAAM;MACbG,QAAQ,EAAEA,QAAS;MACnBO,KAAK,EAAEf,KAAK,CAACe,KAAK,IAAId,YAAa;MACnCC,SAAS,EAAEA,SAAU;MACrBc,oBAAoB,EAAE,CAClB,IAAIhB,KAAK,CAACgB,oBAAoB,IAAI,EAAE,CAAC,EACrC;QAAEC,YAAY,EAAE,cAAc;QAAEC,MAAM,EAAEN;MAAgB,CAAC;IAC3D,EACL,CAEQ;EACnB,CACL,CAAC;AAEV,CAAC","ignoreList":[]}

package/components/LexicalEditor/LexicalLinkForm.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import type { FloatingLinkEditorPlugin } from "@webiny/lexical-editor";
+type LexicalLinkForm = NonNullable<React.ComponentProps<typeof FloatingLinkEditorPlugin>["LinkForm"]>;
+type LinkFormProps = React.ComponentProps<LexicalLinkForm>;
+export declare const LexicalLinkForm: ({ linkData, onSave, removeLink }: LinkFormProps) => React.JSX.Element;
+export {};

package/components/LexicalEditor/LexicalLinkForm.js

@@ -0,0 +1,94 @@
+import React, { useEffect, useRef } from "react";
+import { Button, Grid, Icon, IconButton, Input, Switch } from "@webiny/admin-ui";
+import { Form, useBind } from "@webiny/form";
+import { validation } from "@webiny/validation";
+import { ReactComponent as GlobeIcon } from "@webiny/icons/language.svg";
+import { ReactComponent as OpenInNew } from "@webiny/icons/open_in_new.svg";
+import { ReactComponent as RemoveLink } from "@webiny/icons/link_off.svg";
+export const LexicalLinkForm = ({
+  linkData,
+  onSave,
+  removeLink
+}) => {
+  const onSubmit = data => {
+    onSave(data);
+  };
+  return /*#__PURE__*/React.createElement(Form, {
+    data: linkData,
+    onSubmit: onSubmit,
+    validateOnFirstSubmit: true,
+    submitOnEnter: true
+  }, form => /*#__PURE__*/React.createElement("div", {
+    className: "p-md"
+  }, /*#__PURE__*/React.createElement(Grid, {
+    gap: "small"
+  }, /*#__PURE__*/React.createElement(Grid.Column, {
+    span: 12
+  }, /*#__PURE__*/React.createElement(UrlInput, null))), /*#__PURE__*/React.createElement("div", {
+    className: "flex w-full items-center justify-between mt-sm gap-sm"
+  }, /*#__PURE__*/React.createElement(TargetSwitch, null), /*#__PURE__*/React.createElement(Button, {
+    variant: "ghost",
+    text: `Remove link`,
+    className: "text-destructive-primary! [&_svg]:fill-destructive",
+    onClick: removeLink,
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      label: "Remove link",
+      icon: /*#__PURE__*/React.createElement(RemoveLink, null)
+    })
+  }), /*#__PURE__*/React.createElement(Button, {
+    variant: "primary",
+    text: `Save`,
+    onClick: form.submit
+  }))));
+};
+const UrlInput = () => {
+  const inputRef = useRef(null);
+  const urlBind = useBind({
+    name: "url",
+    validators: validation.create("required,url:allowRelative:allowHref")
+  });
+  useEffect(() => {
+    if (inputRef.current) {
+      setTimeout(() => {
+        inputRef.current?.focus();
+      }, 10);
+    }
+  }, []);
+  const openInNewTab = () => {
+    if (urlBind.validation.isValid !== false && urlBind.value) {
+      window.open(urlBind.value, "_blank");
+    }
+  };
+  return /*#__PURE__*/React.createElement(Input, Object.assign({}, urlBind, {
+    inputRef: ref => {
+      inputRef.current = ref;
+    },
+    variant: "secondary",
+    placeholder: "Enter link",
+    autoFocus: true,
+    startIcon: /*#__PURE__*/React.createElement(Icon, {
+      label: "globe",
+      icon: /*#__PURE__*/React.createElement(GlobeIcon, null)
+    }),
+    endIcon: /*#__PURE__*/React.createElement(IconButton, {
+      variant: "ghost",
+      icon: /*#__PURE__*/React.createElement(OpenInNew, null),
+      onClick: openInNewTab
+    })
+  }));
+};
+const TargetSwitch = () => {
+  const targetBind = useBind({
+    name: "target",
+    defaultValue: "_self"
+  });
+  return /*#__PURE__*/React.createElement(Switch, {
+    checked: targetBind.value === "_blank",
+    label: "Open in new tab",
+    onChange: value => {
+      targetBind.onChange(value === true ? "_blank" : "_self");
+    }
+  });
+};
+
+//# sourceMappingURL=LexicalLinkForm.js.map

package/components/LexicalEditor/LexicalLinkForm.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useRef","Button","Grid","Icon","IconButton","Input","Switch","Form","useBind","validation","ReactComponent","GlobeIcon","OpenInNew","RemoveLink","LexicalLinkForm","linkData","onSave","removeLink","onSubmit","data","createElement","validateOnFirstSubmit","submitOnEnter","form","className","gap","Column","span","UrlInput","TargetSwitch","variant","text","onClick","icon","label","submit","inputRef","urlBind","name","validators","create","current","setTimeout","focus","openInNewTab","isValid","value","window","open","Object","assign","ref","placeholder","autoFocus","startIcon","endIcon","targetBind","defaultValue","checked","onChange"],"sources":["LexicalLinkForm.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\nimport type { FloatingLinkEditorPlugin } from \"@webiny/lexical-editor\";\nimport { Button, Grid, Icon, IconButton, Input, Switch } from \"@webiny/admin-ui\";\nimport { Form, useBind } from \"@webiny/form\";\nimport { validation } from \"@webiny/validation\";\nimport { ReactComponent as GlobeIcon } from \"@webiny/icons/language.svg\";\nimport { ReactComponent as OpenInNew } from \"@webiny/icons/open_in_new.svg\";\nimport { ReactComponent as RemoveLink } from \"@webiny/icons/link_off.svg\";\n\ntype LexicalLinkForm = NonNullable<\n    React.ComponentProps<typeof FloatingLinkEditorPlugin>[\"LinkForm\"]\n>;\ntype LinkFormProps = React.ComponentProps<LexicalLinkForm>;\n\nexport const LexicalLinkForm = ({ linkData, onSave, removeLink }: LinkFormProps) => {\n    const onSubmit = (data: LinkFormProps[\"linkData\"]) => {\n        onSave(data);\n    };\n\n    return (\n        <Form data={linkData} onSubmit={onSubmit} validateOnFirstSubmit submitOnEnter>\n            {form => (\n                <div className={\"p-md\"}>\n                    <Grid gap={\"small\"}>\n                        <Grid.Column span={12}>\n                            <UrlInput />\n                        </Grid.Column>\n                    </Grid>\n                    <div className={\"flex w-full items-center justify-between mt-sm gap-sm\"}>\n                        <TargetSwitch />\n                        <Button\n                            variant={\"ghost\"}\n                            text={`Remove link`}\n                            className={\"text-destructive-primary! [&_svg]:fill-destructive\"}\n                            onClick={removeLink}\n                            icon={<Icon label={\"Remove link\"} icon={<RemoveLink />} />}\n                        />\n                        <Button variant={\"primary\"} text={`Save`} onClick={form.submit} />\n                    </div>\n                </div>\n            )}\n        </Form>\n    );\n};\n\nconst UrlInput = () => {\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    const urlBind = useBind({\n        name: \"url\",\n        validators: validation.create(\"required,url:allowRelative:allowHref\")\n    });\n\n    useEffect(() => {\n        if (inputRef.current) {\n            setTimeout(() => {\n                inputRef.current?.focus();\n            }, 10);\n        }\n    }, []);\n\n    const openInNewTab = () => {\n        if (urlBind.validation.isValid !== false && urlBind.value) {\n            window.open(urlBind.value, \"_blank\");\n        }\n    };\n\n    return (\n        <Input\n            {...urlBind}\n            inputRef={ref => {\n                inputRef.current = ref;\n            }}\n            variant={\"secondary\"}\n            placeholder={\"Enter link\"}\n            autoFocus={true}\n            startIcon={<Icon label=\"globe\" icon={<GlobeIcon />} />}\n            endIcon={<IconButton variant=\"ghost\" icon={<OpenInNew />} onClick={openInNewTab} />}\n        />\n    );\n};\n\nconst TargetSwitch = () => {\n    const targetBind = useBind({\n        name: \"target\",\n        defaultValue: \"_self\"\n    });\n\n    return (\n        <Switch\n            checked={targetBind.value === \"_blank\"}\n            label={\"Open in new tab\"}\n            onChange={value => {\n                targetBind.onChange(value === true ? \"_blank\" : \"_self\");\n            }}\n        />\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAEhD,SAASC,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAEC,UAAU,EAAEC,KAAK,EAAEC,MAAM,QAAQ,kBAAkB;AAChF,SAASC,IAAI,EAAEC,OAAO,QAAQ,cAAc;AAC5C,SAASC,UAAU,QAAQ,oBAAoB;AAC/C,SAASC,cAAc,IAAIC,SAAS,QAAQ,4BAA4B;AACxE,SAASD,cAAc,IAAIE,SAAS,QAAQ,+BAA+B;AAC3E,SAASF,cAAc,IAAIG,UAAU,QAAQ,4BAA4B;AAOzE,OAAO,MAAMC,eAAe,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,MAAM;EAAEC;AAA0B,CAAC,KAAK;EAChF,MAAMC,QAAQ,GAAIC,IAA+B,IAAK;IAClDH,MAAM,CAACG,IAAI,CAAC;EAChB,CAAC;EAED,oBACIrB,KAAA,CAAAsB,aAAA,CAACb,IAAI;IAACY,IAAI,EAAEJ,QAAS;IAACG,QAAQ,EAAEA,QAAS;IAACG,qBAAqB;IAACC,aAAa;EAAA,GACxEC,IAAI,iBACDzB,KAAA,CAAAsB,aAAA;IAAKI,SAAS,EAAE;EAAO,gBACnB1B,KAAA,CAAAsB,aAAA,CAAClB,IAAI;IAACuB,GAAG,EAAE;EAAQ,gBACf3B,KAAA,CAAAsB,aAAA,CAAClB,IAAI,CAACwB,MAAM;IAACC,IAAI,EAAE;EAAG,gBAClB7B,KAAA,CAAAsB,aAAA,CAACQ,QAAQ,MAAE,CACF,CACX,CAAC,eACP9B,KAAA,CAAAsB,aAAA;IAAKI,SAAS,EAAE;EAAwD,gBACpE1B,KAAA,CAAAsB,aAAA,CAACS,YAAY,MAAE,CAAC,eAChB/B,KAAA,CAAAsB,aAAA,CAACnB,MAAM;IACH6B,OAAO,EAAE,OAAQ;IACjBC,IAAI,EAAE,aAAc;IACpBP,SAAS,EAAE,oDAAqD;IAChEQ,OAAO,EAAEf,UAAW;IACpBgB,IAAI,eAAEnC,KAAA,CAAAsB,aAAA,CAACjB,IAAI;MAAC+B,KAAK,EAAE,aAAc;MAACD,IAAI,eAAEnC,KAAA,CAAAsB,aAAA,CAACP,UAAU,MAAE;IAAE,CAAE;EAAE,CAC9D,CAAC,eACFf,KAAA,CAAAsB,aAAA,CAACnB,MAAM;IAAC6B,OAAO,EAAE,SAAU;IAACC,IAAI,EAAE,MAAO;IAACC,OAAO,EAAET,IAAI,CAACY;EAAO,CAAE,CAChE,CACJ,CAEP,CAAC;AAEf,CAAC;AAED,MAAMP,QAAQ,GAAGA,CAAA,KAAM;EACnB,MAAMQ,QAAQ,GAAGpC,MAAM,CAA0B,IAAI,CAAC;EAEtD,MAAMqC,OAAO,GAAG7B,OAAO,CAAC;IACpB8B,IAAI,EAAE,KAAK;IACXC,UAAU,EAAE9B,UAAU,CAAC+B,MAAM,CAAC,sCAAsC;EACxE,CAAC,CAAC;EAEFzC,SAAS,CAAC,MAAM;IACZ,IAAIqC,QAAQ,CAACK,OAAO,EAAE;MAClBC,UAAU,CAAC,MAAM;QACbN,QAAQ,CAACK,OAAO,EAAEE,KAAK,CAAC,CAAC;MAC7B,CAAC,EAAE,EAAE,CAAC;IACV;EACJ,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,YAAY,GAAGA,CAAA,KAAM;IACvB,IAAIP,OAAO,CAAC5B,UAAU,CAACoC,OAAO,KAAK,KAAK,IAAIR,OAAO,CAACS,KAAK,EAAE;MACvDC,MAAM,CAACC,IAAI,CAACX,OAAO,CAACS,KAAK,EAAE,QAAQ,CAAC;IACxC;EACJ,CAAC;EAED,oBACIhD,KAAA,CAAAsB,aAAA,CAACf,KAAK,EAAA4C,MAAA,CAAAC,MAAA,KACEb,OAAO;IACXD,QAAQ,EAAEe,GAAG,IAAI;MACbf,QAAQ,CAACK,OAAO,GAAGU,GAAG;IAC1B,CAAE;IACFrB,OAAO,EAAE,WAAY;IACrBsB,WAAW,EAAE,YAAa;IAC1BC,SAAS,EAAE,IAAK;IAChBC,SAAS,eAAExD,KAAA,CAAAsB,aAAA,CAACjB,IAAI;MAAC+B,KAAK,EAAC,OAAO;MAACD,IAAI,eAAEnC,KAAA,CAAAsB,aAAA,CAACT,SAAS,MAAE;IAAE,CAAE,CAAE;IACvD4C,OAAO,eAAEzD,KAAA,CAAAsB,aAAA,CAAChB,UAAU;MAAC0B,OAAO,EAAC,OAAO;MAACG,IAAI,eAAEnC,KAAA,CAAAsB,aAAA,CAACR,SAAS,MAAE,CAAE;MAACoB,OAAO,EAAEY;IAAa,CAAE;EAAE,EACvF,CAAC;AAEV,CAAC;AAED,MAAMf,YAAY,GAAGA,CAAA,KAAM;EACvB,MAAM2B,UAAU,GAAGhD,OAAO,CAAC;IACvB8B,IAAI,EAAE,QAAQ;IACdmB,YAAY,EAAE;EAClB,CAAC,CAAC;EAEF,oBACI3D,KAAA,CAAAsB,aAAA,CAACd,MAAM;IACHoD,OAAO,EAAEF,UAAU,CAACV,KAAK,KAAK,QAAS;IACvCZ,KAAK,EAAE,iBAAkB;IACzByB,QAAQ,EAAEb,KAAK,IAAI;MACfU,UAAU,CAACG,QAAQ,CAACb,KAAK,KAAK,IAAI,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC5D;EAAE,CACL,CAAC;AAEV,CAAC","ignoreList":[]}

package/components/LexicalEditor/index.d.ts

@@ -1 +1,3 @@
-export { LexicalEditor } from "./LexicalEditor";
+export { LexicalEditor } from "./LexicalEditor.js";
+export { LexicalLinkForm } from "./LexicalLinkForm.js";
+export { lexicalValueWithHtml, type RichTextValueWithHtml } from "./lexicalValueWithHtml.js";

package/components/LexicalEditor/index.js

@@ -1,3 +1,5 @@
-export { LexicalEditor } from "./LexicalEditor";
+export { LexicalEditor } from "./LexicalEditor.js";
+export { LexicalLinkForm } from "./LexicalLinkForm.js";
+export { lexicalValueWithHtml } from "./lexicalValueWithHtml.js";
 
 //# sourceMappingURL=index.js.map

package/components/LexicalEditor/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["LexicalEditor"],"sources":["index.ts"],"sourcesContent":["export { LexicalEditor } from \"./LexicalEditor\";\n"],"mappings":"AAAA,SAASA,aAAa","ignoreList":[]}
+{"version":3,"names":["LexicalEditor","LexicalLinkForm","lexicalValueWithHtml"],"sources":["index.ts"],"sourcesContent":["export { LexicalEditor } from \"./LexicalEditor.js\";\nexport { LexicalLinkForm } from \"./LexicalLinkForm.js\";\nexport { lexicalValueWithHtml, type RichTextValueWithHtml } from \"./lexicalValueWithHtml.js\";\n"],"mappings":"AAAA,SAASA,aAAa;AACtB,SAASC,eAAe;AACxB,SAASC,oBAAoB","ignoreList":[]}

package/components/LexicalEditor/lexicalValueFromHtml.d.ts

@@ -0,0 +1,7 @@
+import { RichTextEditor } from "@webiny/lexical-editor";
+export type RichTextValueWithHtml = {
+    state: string;
+    html: string;
+};
+export type EditorConfigRef = React.MutableRefObject<RichTextEditor.InitialConfig | undefined>;
+export declare const lexicalValueFromHtml: (editorConfigRef: EditorConfigRef, onChange: (value: RichTextValueWithHtml) => void) => (value: string) => void;

package/components/LexicalEditor/lexicalValueFromHtml.js

@@ -0,0 +1,35 @@
+import { createHtmlToLexicalParser } from "@webiny/lexical-converter";
+import { lexicalValueWithHtml } from "./lexicalValueWithHtml.js";
+const parserCache = new Map();
+const getOrCreate = editorConfigRef => {
+  if (!editorConfigRef.current) {
+    return undefined;
+  }
+  const id = editorConfigRef.current.editorId;
+  if (!parserCache.has(id)) {
+    const parser = createHtmlToLexicalParser({
+      editorConfig: {
+        nodes: editorConfigRef.current.nodes,
+        theme: editorConfigRef.current.theme
+      }
+    });
+    parserCache.set(id, parser);
+  }
+  return parserCache.get(id);
+};
+export const lexicalValueFromHtml = (editorConfigRef, onChange) => {
+  return value => {
+    const parser = getOrCreate(editorConfigRef);
+    if (!parser) {
+      return;
+    }
+    const domParser = new DOMParser();
+    const state = parser(domParser.parseFromString(value, "text/html"));
+    if (!state) {
+      return;
+    }
+    lexicalValueWithHtml(editorConfigRef, onChange)(JSON.stringify(state));
+  };
+};
+
+//# sourceMappingURL=lexicalValueFromHtml.js.map

package/components/LexicalEditor/lexicalValueFromHtml.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createHtmlToLexicalParser","lexicalValueWithHtml","parserCache","Map","getOrCreate","editorConfigRef","current","undefined","id","editorId","has","parser","editorConfig","nodes","theme","set","get","lexicalValueFromHtml","onChange","value","domParser","DOMParser","state","parseFromString","JSON","stringify"],"sources":["lexicalValueFromHtml.ts"],"sourcesContent":["import { createHtmlToLexicalParser } from \"@webiny/lexical-converter\";\nimport { RichTextEditor } from \"@webiny/lexical-editor\";\nimport { lexicalValueWithHtml } from \"~/components/LexicalEditor/lexicalValueWithHtml.js\";\n\ntype LexicalHtmlTransformer = ReturnType<typeof createHtmlToLexicalParser>;\n\nexport type RichTextValueWithHtml = {\n    state: string;\n    html: string;\n};\n\nexport type EditorConfigRef = React.MutableRefObject<RichTextEditor.InitialConfig | undefined>;\n\nconst parserCache = new Map<string, LexicalHtmlTransformer>();\n\nconst getOrCreate = (editorConfigRef: EditorConfigRef) => {\n    if (!editorConfigRef.current) {\n        return undefined;\n    }\n\n    const id = editorConfigRef.current.editorId;\n\n    if (!parserCache.has(id)) {\n        const parser = createHtmlToLexicalParser({\n            editorConfig: {\n                nodes: editorConfigRef.current.nodes,\n                theme: editorConfigRef.current.theme\n            }\n        });\n\n        parserCache.set(id, parser);\n    }\n\n    return parserCache.get(id);\n};\n\nexport const lexicalValueFromHtml = (\n    editorConfigRef: EditorConfigRef,\n    onChange: (value: RichTextValueWithHtml) => void\n) => {\n    return (value: string) => {\n        const parser = getOrCreate(editorConfigRef);\n\n        if (!parser) {\n            return;\n        }\n\n        const domParser = new DOMParser();\n        const state = parser(domParser.parseFromString(value, \"text/html\"));\n\n        if (!state) {\n            return;\n        }\n\n        lexicalValueWithHtml(editorConfigRef, onChange)(JSON.stringify(state));\n    };\n};\n"],"mappings":"AAAA,SAASA,yBAAyB,QAAQ,2BAA2B;AAErE,SAASC,oBAAoB;AAW7B,MAAMC,WAAW,GAAG,IAAIC,GAAG,CAAiC,CAAC;AAE7D,MAAMC,WAAW,GAAIC,eAAgC,IAAK;EACtD,IAAI,CAACA,eAAe,CAACC,OAAO,EAAE;IAC1B,OAAOC,SAAS;EACpB;EAEA,MAAMC,EAAE,GAAGH,eAAe,CAACC,OAAO,CAACG,QAAQ;EAE3C,IAAI,CAACP,WAAW,CAACQ,GAAG,CAACF,EAAE,CAAC,EAAE;IACtB,MAAMG,MAAM,GAAGX,yBAAyB,CAAC;MACrCY,YAAY,EAAE;QACVC,KAAK,EAAER,eAAe,CAACC,OAAO,CAACO,KAAK;QACpCC,KAAK,EAAET,eAAe,CAACC,OAAO,CAACQ;MACnC;IACJ,CAAC,CAAC;IAEFZ,WAAW,CAACa,GAAG,CAACP,EAAE,EAAEG,MAAM,CAAC;EAC/B;EAEA,OAAOT,WAAW,CAACc,GAAG,CAACR,EAAE,CAAC;AAC9B,CAAC;AAED,OAAO,MAAMS,oBAAoB,GAAGA,CAChCZ,eAAgC,EAChCa,QAAgD,KAC/C;EACD,OAAQC,KAAa,IAAK;IACtB,MAAMR,MAAM,GAAGP,WAAW,CAACC,eAAe,CAAC;IAE3C,IAAI,CAACM,MAAM,EAAE;MACT;IACJ;IAEA,MAAMS,SAAS,GAAG,IAAIC,SAAS,CAAC,CAAC;IACjC,MAAMC,KAAK,GAAGX,MAAM,CAACS,SAAS,CAACG,eAAe,CAACJ,KAAK,EAAE,WAAW,CAAC,CAAC;IAEnE,IAAI,CAACG,KAAK,EAAE;MACR;IACJ;IAEArB,oBAAoB,CAACI,eAAe,EAAEa,QAAQ,CAAC,CAACM,IAAI,CAACC,SAAS,CAACH,KAAK,CAAC,CAAC;EAC1E,CAAC;AACL,CAAC","ignoreList":[]}

package/components/LexicalEditor/lexicalValueWithHtml.d.ts

@@ -0,0 +1,7 @@
+import { RichTextEditor } from "@webiny/lexical-editor";
+export type RichTextValueWithHtml = {
+    state: string;
+    html: string;
+};
+export type EditorConfigRef = React.MutableRefObject<RichTextEditor.InitialConfig | undefined>;
+export declare const lexicalValueWithHtml: (editorConfigRef: EditorConfigRef, onChange: (value: RichTextValueWithHtml) => void) => (value: string) => void;

package/components/LexicalEditor/lexicalValueWithHtml.js

@@ -0,0 +1,36 @@
+import { createLexicalStateTransformer } from "@webiny/lexical-converter";
+const transformerCache = new Map();
+const getOrCreate = editorConfigRef => {
+  if (!editorConfigRef.current) {
+    return undefined;
+  }
+  const id = editorConfigRef.current.editorId;
+  if (!transformerCache.has(id)) {
+    const transformer = createLexicalStateTransformer({
+      editorConfig: {
+        nodes: editorConfigRef.current.nodes,
+        theme: editorConfigRef.current.theme
+      }
+    });
+    transformerCache.set(id, transformer);
+  }
+  return transformerCache.get(id);
+};
+export const lexicalValueWithHtml = (editorConfigRef, onChange) => {
+  return value => {
+    const transformer = getOrCreate(editorConfigRef);
+    if (!transformer) {
+      onChange({
+        state: value,
+        html: ""
+      });
+      return;
+    }
+    onChange({
+      state: value,
+      html: transformer.toHtml(value)
+    });
+  };
+};
+
+//# sourceMappingURL=lexicalValueWithHtml.js.map

package/components/LexicalEditor/lexicalValueWithHtml.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createLexicalStateTransformer","transformerCache","Map","getOrCreate","editorConfigRef","current","undefined","id","editorId","has","transformer","editorConfig","nodes","theme","set","get","lexicalValueWithHtml","onChange","value","state","html","toHtml"],"sources":["lexicalValueWithHtml.ts"],"sourcesContent":["import { createLexicalStateTransformer } from \"@webiny/lexical-converter\";\nimport { RichTextEditor } from \"@webiny/lexical-editor\";\n\ntype LexicalStateTransformer = ReturnType<typeof createLexicalStateTransformer>;\n\nexport type RichTextValueWithHtml = {\n    state: string;\n    html: string;\n};\n\nexport type EditorConfigRef = React.MutableRefObject<RichTextEditor.InitialConfig | undefined>;\n\nconst transformerCache = new Map<string, LexicalStateTransformer>();\n\nconst getOrCreate = (editorConfigRef: EditorConfigRef) => {\n    if (!editorConfigRef.current) {\n        return undefined;\n    }\n\n    const id = editorConfigRef.current.editorId;\n\n    if (!transformerCache.has(id)) {\n        const transformer = createLexicalStateTransformer({\n            editorConfig: {\n                nodes: editorConfigRef.current.nodes,\n                theme: editorConfigRef.current.theme\n            }\n        });\n\n        transformerCache.set(id, transformer);\n    }\n\n    return transformerCache.get(id);\n};\n\nexport const lexicalValueWithHtml = (\n    editorConfigRef: EditorConfigRef,\n    onChange: (value: RichTextValueWithHtml) => void\n) => {\n    return (value: string) => {\n        const transformer = getOrCreate(editorConfigRef);\n\n        if (!transformer) {\n            onChange({\n                state: value,\n                html: \"\"\n            });\n            return;\n        }\n\n        onChange({\n            state: value,\n            html: transformer.toHtml(value)\n        });\n    };\n};\n"],"mappings":"AAAA,SAASA,6BAA6B,QAAQ,2BAA2B;AAYzE,MAAMC,gBAAgB,GAAG,IAAIC,GAAG,CAAkC,CAAC;AAEnE,MAAMC,WAAW,GAAIC,eAAgC,IAAK;EACtD,IAAI,CAACA,eAAe,CAACC,OAAO,EAAE;IAC1B,OAAOC,SAAS;EACpB;EAEA,MAAMC,EAAE,GAAGH,eAAe,CAACC,OAAO,CAACG,QAAQ;EAE3C,IAAI,CAACP,gBAAgB,CAACQ,GAAG,CAACF,EAAE,CAAC,EAAE;IAC3B,MAAMG,WAAW,GAAGV,6BAA6B,CAAC;MAC9CW,YAAY,EAAE;QACVC,KAAK,EAAER,eAAe,CAACC,OAAO,CAACO,KAAK;QACpCC,KAAK,EAAET,eAAe,CAACC,OAAO,CAACQ;MACnC;IACJ,CAAC,CAAC;IAEFZ,gBAAgB,CAACa,GAAG,CAACP,EAAE,EAAEG,WAAW,CAAC;EACzC;EAEA,OAAOT,gBAAgB,CAACc,GAAG,CAACR,EAAE,CAAC;AACnC,CAAC;AAED,OAAO,MAAMS,oBAAoB,GAAGA,CAChCZ,eAAgC,EAChCa,QAAgD,KAC/C;EACD,OAAQC,KAAa,IAAK;IACtB,MAAMR,WAAW,GAAGP,WAAW,CAACC,eAAe,CAAC;IAEhD,IAAI,CAACM,WAAW,EAAE;MACdO,QAAQ,CAAC;QACLE,KAAK,EAAED,KAAK;QACZE,IAAI,EAAE;MACV,CAAC,CAAC;MACF;IACJ;IAEAH,QAAQ,CAAC;MACLE,KAAK,EAAED,KAAK;MACZE,IAAI,EAAEV,WAAW,CAACW,MAAM,CAACH,KAAK;IAClC,CAAC,CAAC;EACN,CAAC;AACL,CAAC","ignoreList":[]}

package/components/NotAuthorizedError/NotAuthorizedError.d.ts

@@ -0,0 +1,2 @@
+import * as React from "react";
+export declare const NotAuthorizedError: () => React.JSX.Element;

package/components/NotAuthorizedError/NotAuthorizedError.js

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { Link, Text } from "@webiny/admin-ui";
+import authErrorImg from "./SecureRouteError.svg";
+export const NotAuthorizedError = () => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex-1"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "h-full flex flex-col items-center justify-center text-center gap-xs"
+  }, /*#__PURE__*/React.createElement("img", {
+    width: 200,
+    height: 200,
+    src: authErrorImg,
+    alt: "Not Authorized",
+    className: "mb-xl"
+  }), /*#__PURE__*/React.createElement(Text, null, "You are not authorized to view this route."), /*#__PURE__*/React.createElement(Text, null, "Please contact your administrator to request access."), /*#__PURE__*/React.createElement(Link, {
+    to: "/"
+  }, "Take me back.")));
+};
+
+//# sourceMappingURL=NotAuthorizedError.js.map

package/components/NotAuthorizedError/NotAuthorizedError.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Link","Text","authErrorImg","NotAuthorizedError","createElement","className","width","height","src","alt","to"],"sources":["NotAuthorizedError.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Link, Text } from \"@webiny/admin-ui\";\nimport authErrorImg from \"./SecureRouteError.svg\";\n\nexport const NotAuthorizedError = () => {\n    return (\n        <div className={\"flex-1\"}>\n            <div className={\"h-full flex flex-col items-center justify-center text-center gap-xs\"}>\n                <img\n                    width={200}\n                    height={200}\n                    src={authErrorImg}\n                    alt=\"Not Authorized\"\n                    className={\"mb-xl\"}\n                />\n                <Text>You are not authorized to view this route.</Text>\n                <Text>Please contact your administrator to request access.</Text>\n                <Link to=\"/\">Take me back.</Link>\n            </div>\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,IAAI,EAAEC,IAAI,QAAQ,kBAAkB;AAC7C,OAAOC,YAAY;AAEnB,OAAO,MAAMC,kBAAkB,GAAGA,CAAA,KAAM;EACpC,oBACIJ,KAAA,CAAAK,aAAA;IAAKC,SAAS,EAAE;EAAS,gBACrBN,KAAA,CAAAK,aAAA;IAAKC,SAAS,EAAE;EAAsE,gBAClFN,KAAA,CAAAK,aAAA;IACIE,KAAK,EAAE,GAAI;IACXC,MAAM,EAAE,GAAI;IACZC,GAAG,EAAEN,YAAa;IAClBO,GAAG,EAAC,gBAAgB;IACpBJ,SAAS,EAAE;EAAQ,CACtB,CAAC,eACFN,KAAA,CAAAK,aAAA,CAACH,IAAI,QAAC,4CAAgD,CAAC,eACvDF,KAAA,CAAAK,aAAA,CAACH,IAAI,QAAC,sDAA0D,CAAC,eACjEF,KAAA,CAAAK,aAAA,CAACJ,IAAI;IAACU,EAAE,EAAC;EAAG,GAAC,eAAmB,CAC/B,CACJ,CAAC;AAEd,CAAC","ignoreList":[]}

package/components/NotAuthorizedError/SecureRouteError.svg

@@ -0,0 +1 @@
+<svg id="ffa0e257-4b46-4632-a8d6-93195cbf254d" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="895.68" height="517.48" viewBox="0 0 895.68 517.48"><defs><linearGradient id="74471b12-b6be-488b-b2aa-2815e91483d9" x1="790.94" y1="640.76" x2="790.94" y2="264.76" gradientTransform="translate(1229.99 -336.2) rotate(90)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="gray" stop-opacity="0.25"/><stop offset="0.54" stop-color="gray" stop-opacity="0.12"/><stop offset="1" stop-color="gray" stop-opacity="0.1"/></linearGradient><linearGradient id="f5c756da-9879-448e-9194-9478f83d355f" x1="785.97" y1="446.14" x2="785.97" y2="321.91" gradientTransform="translate(1166.67 -399.94) rotate(90)" xlink:href="#74471b12-b6be-488b-b2aa-2815e91483d9"/><linearGradient id="5c9be04e-db0f-4829-87c1-2cfa193e30b8" x1="660.92" y1="518.19" x2="660.92" y2="494.17" gradientTransform="translate(1146.84 -172.9) rotate(90)" xlink:href="#74471b12-b6be-488b-b2aa-2815e91483d9"/><linearGradient id="b92f3a53-b4d2-4abd-916c-aeb632188996" x1="433.66" y1="605.23" x2="433.66" y2="235.23" gradientTransform="translate(13.58 8.51)" xlink:href="#74471b12-b6be-488b-b2aa-2815e91483d9"/><linearGradient id="44577794-7f8e-40ae-89fc-019e5bfac17e" x1="428.36" y1="413.71" x2="428.36" y2="291.46" gradientTransform="translate(-1.05 11.3)" xlink:href="#74471b12-b6be-488b-b2aa-2815e91483d9"/><linearGradient id="666bb7d3-84d0-4835-ad07-c313c2384f21" x1="295.22" y1="484.61" x2="295.22" y2="460.98" gradientTransform="translate(28.38 37.45)" xlink:href="#74471b12-b6be-488b-b2aa-2815e91483d9"/><linearGradient id="59939605-05af-4a9a-9980-f700897f3f8b" x1="455.07" y1="464.48" x2="455.07" y2="10.48" gradientTransform="matrix(1, 0, 0, 1, 0, 0)" xlink:href="#74471b12-b6be-488b-b2aa-2815e91483d9"/><linearGradient id="6c0ba2ee-2d81-48f4-b4cf-f21b525fcc13" x1="449.07" y1="229.48" x2="449.07" y2="79.48" gradientTransform="matrix(1, 0, 0, 1, 0, 0)" xlink:href="#74471b12-b6be-488b-b2aa-2815e91483d9"/><linearGradient id="45b0c09d-2995-447e-8cb2-7f6b59b5e20c" x1="298.07" y1="316.48" x2="298.07" y2="287.48" gradientTransform="matrix(1, 0, 0, 1, 0, 0)" xlink:href="#74471b12-b6be-488b-b2aa-2815e91483d9"/><linearGradient id="e5b0a96a-81f6-4370-afe3-5a7d6a35b55e" x1="457.07" y1="517.48" x2="457.07" y2="364.48" gradientTransform="matrix(1, 0, 0, 1, 0, 0)" xlink:href="#74471b12-b6be-488b-b2aa-2815e91483d9"/><linearGradient id="a1850e5a-cf77-4889-926a-0125112ab273" x1="611.23" y1="564.74" x2="611.23" y2="464.74" gradientTransform="matrix(1, 0, 0, 1, 0, 0)" xlink:href="#74471b12-b6be-488b-b2aa-2815e91483d9"/><linearGradient id="66998849-614e-4d8a-b9ff-f14bbc588ed8" x1="611.23" y1="660.74" x2="611.23" y2="602.74" gradientTransform="matrix(1, 0, 0, 1, 0, 0)" xlink:href="#74471b12-b6be-488b-b2aa-2815e91483d9"/></defs><title>safe</title><rect x="792.23" y="49.92" width="19.88" height="470.41" transform="translate(247.6 844.09) rotate(-81.36)" fill="#f5f5f5"/><rect x="589.23" y="209.59" width="376" height="490.29" transform="translate(58.72 963.57) rotate(-81.36)" fill="url(#74471b12-b6be-488b-b2aa-2815e91483d9)"/><rect x="603.48" y="229.23" width="342.87" height="470.41" transform="translate(47.16 969.52) rotate(-81.36)" fill="#f5f5f5"/><circle cx="580.99" cy="251.51" r="4.86" transform="translate(92.88 596.86) rotate(-81.36)" fill="#ff5252"/><circle cx="594.2" cy="253.52" r="4.86" transform="translate(102.12 611.62) rotate(-81.36)" fill="#ff0"/><circle cx="607.41" cy="255.53" r="4.86" transform="translate(111.36 626.39) rotate(-81.36)" fill="#69f0ae"/><rect x="720.53" y="174.84" width="124.23" height="422.38" transform="translate(131.25 910.54) rotate(-81.36)" fill="url(#f5c756da-9879-448e-9194-9478f83d355f)"/><rect x="576.36" y="328.95" width="413.27" height="115.12" transform="translate(-85.2 -304.51) rotate(8.64)" fill="#fa5a28"/><rect x="628.65" y="473.94" width="24.02" height="28.16" transform="translate(-90.24 856.82) rotate(-81.36)" fill="url(#5c9be04e-db0f-4829-87c1-2cfa193e30b8)"/><rect x="627.88" y="477.73" width="26.5" height="19.88" transform="translate(-71.61 -282.05) rotate(8.64)" fill="#fa5a28"/><rect x="622.77" y="511.3" width="26.5" height="19.88" transform="translate(-66.63 -280.9) rotate(8.64)" fill="#ff5252"/><rect x="617.67" y="544.87" width="26.5" height="19.88" transform="translate(-61.64 -279.75) rotate(8.64)" fill="#ff9800"/><rect x="696.41" y="506.51" width="213.67" height="11.59" transform="translate(-66.07 -306.13) rotate(8.64)" fill="#fa5a28" opacity="0.4"/><rect x="691.31" y="540.08" width="213.67" height="11.59" transform="translate(-61.09 -304.98) rotate(8.64)" fill="#fa5a28" opacity="0.4"/><rect x="686.21" y="573.65" width="213.67" height="11.59" transform="translate(-56.1 -303.83) rotate(8.64)" fill="#fa5a28" opacity="0.4"/><rect x="159.15" y="254.51" width="500.84" height="19.56" transform="translate(-199.95 -95.55) rotate(-12.6)" fill="#f5f5f5"/><rect x="186.23" y="243.74" width="522" height="370" transform="translate(-234.92 -83.38) rotate(-12.6)" fill="url(#b92f3a53-b4d2-4abd-916c-aeb632188996)"/><rect x="198.08" y="269.78" width="500.84" height="337.4" transform="translate(-237.01 -82.86) rotate(-12.6)" fill="#f5f5f5"/><ellipse cx="177.11" cy="316.25" rx="5.17" ry="4.78" transform="translate(-216.88 -145.01) rotate(-12.6)" fill="#ff5252"/><ellipse cx="191" cy="313.15" rx="5.17" ry="4.78" transform="translate(-215.87 -142.05) rotate(-12.6)" fill="#ff0"/><ellipse cx="204.88" cy="310.05" rx="5.17" ry="4.78" transform="translate(-214.86 -139.1) rotate(-12.6)" fill="#69f0ae"/><rect x="202.46" y="302.76" width="449.7" height="122.25" transform="translate(-221.25 -89.28) rotate(-12.6)" fill="url(#44577794-7f8e-40ae-89fc-019e5bfac17e)"/><rect x="207.83" y="307.54" width="440" height="113.28" transform="translate(-221.3 -89.16) rotate(-12.6)" fill="#fa5a28"/><rect x="308.61" y="498.42" width="29.98" height="23.63" transform="translate(-255.67 -108.38) rotate(-12.6)" fill="url(#666bb7d3-84d0-4835-ad07-c313c2384f21)"/><rect x="309.83" y="499.96" width="28.22" height="19.56" transform="matrix(0.98, -0.22, 0.22, 0.98, -255.56, -108.32)" fill="#fa5a28"/><rect x="317.12" y="532.57" width="28.22" height="19.56" transform="translate(-262.49 -105.94) rotate(-12.6)" fill="#ff5252"/><rect x="324.41" y="565.18" width="28.22" height="19.56" transform="matrix(0.98, -0.22, 0.22, 0.98, -269.43, -103.57)" fill="#ff9800"/><rect x="380.57" y="465.95" width="227.49" height="11.41" transform="translate(-243.14 -72.07) rotate(-12.6)" fill="#fa5a28" opacity="0.4"/><rect x="387.86" y="498.56" width="227.49" height="11.41" transform="translate(-250.08 -69.69) rotate(-12.6)" fill="#fa5a28" opacity="0.4"/><rect x="395.15" y="531.17" width="227.49" height="11.41" transform="translate(-257.02 -67.32) rotate(-12.6)" fill="#fa5a28" opacity="0.4"/><rect x="170.07" y="18.48" width="568" height="24" fill="#f5f5f5"/><rect x="159.07" y="10.48" width="592" height="454" fill="url(#59939605-05af-4a9a-9980-f700897f3f8b)"/><rect x="170.07" y="42.48" width="568" height="414" fill="#fff"/><circle cx="183.94" cy="30.48" r="5.87" fill="#ff5252"/><circle cx="200.07" cy="30.48" r="5.87" fill="#ff0"/><circle cx="216.2" cy="30.48" r="5.87" fill="#69f0ae"/><rect x="194.07" y="79.48" width="510" height="150" fill="url(#6c0ba2ee-2d81-48f4-b4cf-f21b525fcc13)"/><rect x="200.07" y="85.48" width="499" height="139" fill="#fa5a28"/><rect x="281.07" y="287.48" width="34" height="29" fill="url(#45b0c09d-2995-447e-8cb2-7f6b59b5e20c)"/><rect x="282.57" y="289.48" width="32" height="24" fill="#fa5a28"/><rect x="282.57" y="330.48" width="32" height="24" fill="#ff5252"/><rect x="282.57" y="371.48" width="32" height="24" fill="#ff9800"/><rect x="367.57" y="294.48" width="258" height="14" fill="#fa5a28" opacity="0.4"/><rect x="367.57" y="335.48" width="258" height="14" fill="#fa5a28" opacity="0.4"/><rect x="367.57" y="376.48" width="258" height="14" fill="#fa5a28" opacity="0.4"/><rect x="364.07" y="364.48" width="186" height="153" fill="url(#e5b0a96a-81f6-4370-afe3-5a7d6a35b55e)"/><path d="M559.15,531.41a52.08,52.08,0,0,1,104.17,0v33.33H677.9V531.41a66.67,66.67,0,1,0-133.33,0v33.33h14.58Z" transform="translate(-152.16 -191.26)" fill="url(#a1850e5a-cf77-4889-926a-0125112ab273)"/><path d="M561.23,530.74a50,50,0,0,1,100,0v32h14v-32a64,64,0,0,0-128,0v32h14Z" transform="translate(-152.16 -191.26)" fill="#fff"/><rect x="372.07" y="369.48" width="174" height="142" fill="#fa5a28"/><rect x="372.07" y="369.48" width="174" height="142" fill="#fff"/><rect x="372.07" y="397.48" width="174" height="86" fill="#fa5a28"/><path d="M624,615.5a12.76,12.76,0,1,0-22,8.74v27.22a9.28,9.28,0,0,0,18.56,0V624.24A12.7,12.7,0,0,0,624,615.5Z" transform="translate(-152.16 -191.26)" fill="url(#66998849-614e-4d8a-b9ff-f14bbc588ed8)"/><path d="M622.23,617.74a11,11,0,1,0-19,7.53v23.47a8,8,0,1,0,16,0V625.27A11,11,0,0,0,622.23,617.74Z" transform="translate(-152.16 -191.26)" opacity="0.2"/></svg>

package/components/NotAuthorizedError/index.d.ts

@@ -0,0 +1 @@
+export { NotAuthorizedError } from "./NotAuthorizedError.js";

package/components/NotAuthorizedError/index.js

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

package/components/NotAuthorizedError/index.js.map

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

package/components/OptionsMenu/OptionsMenu.d.ts

@@ -1,5 +1,10 @@
 import React from "react";
+import { IconButton } from "@webiny/admin-ui";
+type IconButtonProps = React.ComponentProps<typeof IconButton>;
 export interface OptionsMenuProps {
+    variant?: IconButtonProps["variant"];
+    size?: IconButtonProps["size"];
+    iconSize?: IconButtonProps["iconSize"];
     actions: {
         name: string;
         element: React.ReactElement;
@@ -8,3 +13,4 @@ export interface OptionsMenuProps {
     ["data-testid"]?: string;
 }
 export declare const OptionsMenu: (props: OptionsMenuProps) => React.JSX.Element | null;
+export {};

package/components/OptionsMenu/OptionsMenu.js

@@ -1,16 +1,16 @@
 import React, { Fragment } from "react";
 import { ReactComponent as MoreVerticalIcon } from "@webiny/icons/more_vert.svg";
 import { IconButton, DropdownMenu } from "@webiny/admin-ui";
-import { OptionsMenuItemProvider } from "./useOptionsMenuItem";
+import { OptionsMenuItemProvider } from "./useOptionsMenuItem.js";
 export const OptionsMenu = props => {
   if (!props.actions.length) {
     return null;
   }
   const trigger = props.trigger || /*#__PURE__*/React.createElement(IconButton, {
     icon: /*#__PURE__*/React.createElement(MoreVerticalIcon, null),
-    size: "sm",
-    iconSize: "lg",
-    variant: "ghost",
+    size: props.size ?? "md",
+    iconSize: props.iconSize ?? "default",
+    variant: props.variant ?? "ghost",
     "data-testid": props["data-testid"] || "more-options-icon"
   });
   return /*#__PURE__*/React.createElement(DropdownMenu, {

package/components/OptionsMenu/OptionsMenu.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Fragment","ReactComponent","MoreVerticalIcon","IconButton","DropdownMenu","OptionsMenuItemProvider","OptionsMenu","props","actions","length","trigger","createElement","icon","size","iconSize","variant","map","action","key","name","element"],"sources":["OptionsMenu.tsx"],"sourcesContent":["import React, { Fragment } from \"react\";\nimport { ReactComponent as MoreVerticalIcon } from \"@webiny/icons/more_vert.svg\";\nimport { IconButton, DropdownMenu } from \"@webiny/admin-ui\";\nimport { OptionsMenuItemProvider } from \"./useOptionsMenuItem\";\n\nexport interface OptionsMenuProps {\n    actions: {\n        name: string;\n        element: React.ReactElement;\n    }[];\n    trigger?: React.ReactElement;\n    [\"data-testid\"]?: string;\n}\n\nexport const OptionsMenu = (props: OptionsMenuProps) => {\n    if (!props.actions.length) {\n        return null;\n    }\n\n    const trigger = props.trigger || (\n        <IconButton\n            icon={<MoreVerticalIcon />}\n            size={\"sm\"}\n            iconSize={\"lg\"}\n            variant={\"ghost\"}\n            data-testid={props[\"data-testid\"] || \"more-options-icon\"}\n        />\n    );\n\n    return (\n        <DropdownMenu trigger={trigger}>\n            {props.actions.map(action => (\n                <Fragment key={action.name}>\n                    <OptionsMenuItemProvider>{action.element}</OptionsMenuItemProvider>\n                </Fragment>\n            ))}\n        </DropdownMenu>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,cAAc,IAAIC,gBAAgB,QAAQ,6BAA6B;AAChF,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,uBAAuB;AAWhC,OAAO,MAAMC,WAAW,GAAIC,KAAuB,IAAK;EACpD,IAAI,CAACA,KAAK,CAACC,OAAO,CAACC,MAAM,EAAE;IACvB,OAAO,IAAI;EACf;EAEA,MAAMC,OAAO,GAAGH,KAAK,CAACG,OAAO,iBACzBX,KAAA,CAAAY,aAAA,CAACR,UAAU;IACPS,IAAI,eAAEb,KAAA,CAAAY,aAAA,CAACT,gBAAgB,MAAE,CAAE;IAC3BW,IAAI,EAAE,IAAK;IACXC,QAAQ,EAAE,IAAK;IACfC,OAAO,EAAE,OAAQ;IACjB,eAAaR,KAAK,CAAC,aAAa,CAAC,IAAI;EAAoB,CAC5D,CACJ;EAED,oBACIR,KAAA,CAAAY,aAAA,CAACP,YAAY;IAACM,OAAO,EAAEA;EAAQ,GAC1BH,KAAK,CAACC,OAAO,CAACQ,GAAG,CAACC,MAAM,iBACrBlB,KAAA,CAAAY,aAAA,CAACX,QAAQ;IAACkB,GAAG,EAAED,MAAM,CAACE;EAAK,gBACvBpB,KAAA,CAAAY,aAAA,CAACN,uBAAuB,QAAEY,MAAM,CAACG,OAAiC,CAC5D,CACb,CACS,CAAC;AAEvB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Fragment","ReactComponent","MoreVerticalIcon","IconButton","DropdownMenu","OptionsMenuItemProvider","OptionsMenu","props","actions","length","trigger","createElement","icon","size","iconSize","variant","map","action","key","name","element"],"sources":["OptionsMenu.tsx"],"sourcesContent":["import React, { Fragment } from \"react\";\nimport { ReactComponent as MoreVerticalIcon } from \"@webiny/icons/more_vert.svg\";\nimport { IconButton, DropdownMenu } from \"@webiny/admin-ui\";\nimport { OptionsMenuItemProvider } from \"./useOptionsMenuItem.js\";\n\ntype IconButtonProps = React.ComponentProps<typeof IconButton>;\n\nexport interface OptionsMenuProps {\n    variant?: IconButtonProps[\"variant\"];\n    size?: IconButtonProps[\"size\"];\n    iconSize?: IconButtonProps[\"iconSize\"];\n    actions: {\n        name: string;\n        element: React.ReactElement;\n    }[];\n    trigger?: React.ReactElement;\n    [\"data-testid\"]?: string;\n}\n\nexport const OptionsMenu = (props: OptionsMenuProps) => {\n    if (!props.actions.length) {\n        return null;\n    }\n\n    const trigger = props.trigger || (\n        <IconButton\n            icon={<MoreVerticalIcon />}\n            size={props.size ?? \"md\"}\n            iconSize={props.iconSize ?? \"default\"}\n            variant={props.variant ?? \"ghost\"}\n            data-testid={props[\"data-testid\"] || \"more-options-icon\"}\n        />\n    );\n\n    return (\n        <DropdownMenu trigger={trigger}>\n            {props.actions.map(action => (\n                <Fragment key={action.name}>\n                    <OptionsMenuItemProvider>{action.element}</OptionsMenuItemProvider>\n                </Fragment>\n            ))}\n        </DropdownMenu>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,cAAc,IAAIC,gBAAgB,QAAQ,6BAA6B;AAChF,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,uBAAuB;AAgBhC,OAAO,MAAMC,WAAW,GAAIC,KAAuB,IAAK;EACpD,IAAI,CAACA,KAAK,CAACC,OAAO,CAACC,MAAM,EAAE;IACvB,OAAO,IAAI;EACf;EAEA,MAAMC,OAAO,GAAGH,KAAK,CAACG,OAAO,iBACzBX,KAAA,CAAAY,aAAA,CAACR,UAAU;IACPS,IAAI,eAAEb,KAAA,CAAAY,aAAA,CAACT,gBAAgB,MAAE,CAAE;IAC3BW,IAAI,EAAEN,KAAK,CAACM,IAAI,IAAI,IAAK;IACzBC,QAAQ,EAAEP,KAAK,CAACO,QAAQ,IAAI,SAAU;IACtCC,OAAO,EAAER,KAAK,CAACQ,OAAO,IAAI,OAAQ;IAClC,eAAaR,KAAK,CAAC,aAAa,CAAC,IAAI;EAAoB,CAC5D,CACJ;EAED,oBACIR,KAAA,CAAAY,aAAA,CAACP,YAAY;IAACM,OAAO,EAAEA;EAAQ,GAC1BH,KAAK,CAACC,OAAO,CAACQ,GAAG,CAACC,MAAM,iBACrBlB,KAAA,CAAAY,aAAA,CAACX,QAAQ;IAACkB,GAAG,EAAED,MAAM,CAACE;EAAK,gBACvBpB,KAAA,CAAAY,aAAA,CAACN,uBAAuB,QAAEY,MAAM,CAACG,OAAiC,CAC5D,CACb,CACS,CAAC;AAEvB,CAAC","ignoreList":[]}

package/components/OptionsMenu/index.d.ts

@@ -1,4 +1,4 @@
-export * from "./OptionsMenu";
-export * from "./OptionsMenuItem";
-export * from "./OptionsMenuLink";
-export { useOptionsMenuItem } from "./useOptionsMenuItem";
+export * from "./OptionsMenu.js";
+export * from "./OptionsMenuItem.js";
+export * from "./OptionsMenuLink.js";
+export { useOptionsMenuItem } from "./useOptionsMenuItem.js";

package/components/OptionsMenu/index.js

@@ -1,6 +1,6 @@
-export * from "./OptionsMenu";
-export * from "./OptionsMenuItem";
-export * from "./OptionsMenuLink";
-export { useOptionsMenuItem } from "./useOptionsMenuItem";
+export * from "./OptionsMenu.js";
+export * from "./OptionsMenuItem.js";
+export * from "./OptionsMenuLink.js";
+export { useOptionsMenuItem } from "./useOptionsMenuItem.js";
 
 //# sourceMappingURL=index.js.map

package/components/OptionsMenu/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["useOptionsMenuItem"],"sources":["index.ts"],"sourcesContent":["export * from \"./OptionsMenu\";\nexport * from \"./OptionsMenuItem\";\nexport * from \"./OptionsMenuLink\";\nexport { useOptionsMenuItem } from \"./useOptionsMenuItem\";\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,kBAAkB","ignoreList":[]}
+{"version":3,"names":["useOptionsMenuItem"],"sources":["index.ts"],"sourcesContent":["export * from \"./OptionsMenu.js\";\nexport * from \"./OptionsMenuItem.js\";\nexport * from \"./OptionsMenuLink.js\";\nexport { useOptionsMenuItem } from \"./useOptionsMenuItem.js\";\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,kBAAkB","ignoreList":[]}

package/components/OptionsMenu/useOptionsMenuItem.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import { OptionsMenuItem } from "./OptionsMenuItem";
-import { OptionsMenuLink } from "./OptionsMenuLink";
+import { OptionsMenuItem } from "./OptionsMenuItem.js";
+import { OptionsMenuLink } from "./OptionsMenuLink.js";
 export interface OptionsMenuItemProviderContext {
     OptionsMenuItem: typeof OptionsMenuItem;
     OptionsMenuLink: typeof OptionsMenuLink;

package/components/OptionsMenu/useOptionsMenuItem.js

@@ -1,6 +1,6 @@
 import React from "react";
-import { OptionsMenuItem } from "./OptionsMenuItem";
-import { OptionsMenuLink } from "./OptionsMenuLink";
+import { OptionsMenuItem } from "./OptionsMenuItem.js";
+import { OptionsMenuLink } from "./OptionsMenuLink.js";
 const OptionsMenuItemContext = /*#__PURE__*/React.createContext(undefined);
 export const OptionsMenuItemProvider = ({
   children

package/components/OptionsMenu/useOptionsMenuItem.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","OptionsMenuItem","OptionsMenuLink","OptionsMenuItemContext","createContext","undefined","OptionsMenuItemProvider","children","createElement","Provider","value","useOptionsMenuItem","context","useContext","Error"],"sources":["useOptionsMenuItem.tsx"],"sourcesContent":["import React from \"react\";\nimport { OptionsMenuItem } from \"./OptionsMenuItem\";\nimport { OptionsMenuLink } from \"./OptionsMenuLink\";\n\nexport interface OptionsMenuItemProviderContext {\n    OptionsMenuItem: typeof OptionsMenuItem;\n    OptionsMenuLink: typeof OptionsMenuLink;\n}\n\nconst OptionsMenuItemContext = React.createContext<OptionsMenuItemProviderContext | undefined>(\n    undefined\n);\n\ninterface OptionsMenuItemProviderProps {\n    children: React.ReactNode;\n}\n\nexport const OptionsMenuItemProvider = ({ children }: OptionsMenuItemProviderProps) => {\n    return (\n        <OptionsMenuItemContext.Provider value={{ OptionsMenuItem, OptionsMenuLink }}>\n            {children}\n        </OptionsMenuItemContext.Provider>\n    );\n};\n\nexport const useOptionsMenuItem = (): OptionsMenuItemProviderContext => {\n    const context = React.useContext(OptionsMenuItemContext);\n\n    if (!context) {\n        throw new Error(\"useOptionsMenuItem must be used within a OptionsMenuItemProvider\");\n    }\n\n    return context;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe;AACxB,SAASC,eAAe;AAOxB,MAAMC,sBAAsB,gBAAGH,KAAK,CAACI,aAAa,CAC9CC,SACJ,CAAC;AAMD,OAAO,MAAMC,uBAAuB,GAAGA,CAAC;EAAEC;AAAuC,CAAC,KAAK;EACnF,oBACIP,KAAA,CAAAQ,aAAA,CAACL,sBAAsB,CAACM,QAAQ;IAACC,KAAK,EAAE;MAAET,eAAe;MAAEC;IAAgB;EAAE,GACxEK,QAC4B,CAAC;AAE1C,CAAC;AAED,OAAO,MAAMI,kBAAkB,GAAGA,CAAA,KAAsC;EACpE,MAAMC,OAAO,GAAGZ,KAAK,CAACa,UAAU,CAACV,sBAAsB,CAAC;EAExD,IAAI,CAACS,OAAO,EAAE;IACV,MAAM,IAAIE,KAAK,CAAC,kEAAkE,CAAC;EACvF;EAEA,OAAOF,OAAO;AAClB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","OptionsMenuItem","OptionsMenuLink","OptionsMenuItemContext","createContext","undefined","OptionsMenuItemProvider","children","createElement","Provider","value","useOptionsMenuItem","context","useContext","Error"],"sources":["useOptionsMenuItem.tsx"],"sourcesContent":["import React from \"react\";\nimport { OptionsMenuItem } from \"./OptionsMenuItem.js\";\nimport { OptionsMenuLink } from \"./OptionsMenuLink.js\";\n\nexport interface OptionsMenuItemProviderContext {\n    OptionsMenuItem: typeof OptionsMenuItem;\n    OptionsMenuLink: typeof OptionsMenuLink;\n}\n\nconst OptionsMenuItemContext = React.createContext<OptionsMenuItemProviderContext | undefined>(\n    undefined\n);\n\ninterface OptionsMenuItemProviderProps {\n    children: React.ReactNode;\n}\n\nexport const OptionsMenuItemProvider = ({ children }: OptionsMenuItemProviderProps) => {\n    return (\n        <OptionsMenuItemContext.Provider value={{ OptionsMenuItem, OptionsMenuLink }}>\n            {children}\n        </OptionsMenuItemContext.Provider>\n    );\n};\n\nexport const useOptionsMenuItem = (): OptionsMenuItemProviderContext => {\n    const context = React.useContext(OptionsMenuItemContext);\n\n    if (!context) {\n        throw new Error(\"useOptionsMenuItem must be used within a OptionsMenuItemProvider\");\n    }\n\n    return context;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe;AACxB,SAASC,eAAe;AAOxB,MAAMC,sBAAsB,gBAAGH,KAAK,CAACI,aAAa,CAC9CC,SACJ,CAAC;AAMD,OAAO,MAAMC,uBAAuB,GAAGA,CAAC;EAAEC;AAAuC,CAAC,KAAK;EACnF,oBACIP,KAAA,CAAAQ,aAAA,CAACL,sBAAsB,CAACM,QAAQ;IAACC,KAAK,EAAE;MAAET,eAAe;MAAEC;IAAgB;EAAE,GACxEK,QAC4B,CAAC;AAE1C,CAAC;AAED,OAAO,MAAMI,kBAAkB,GAAGA,CAAA,KAAsC;EACpE,MAAMC,OAAO,GAAGZ,KAAK,CAACa,UAAU,CAACV,sBAAsB,CAAC;EAExD,IAAI,CAACS,OAAO,EAAE;IACV,MAAM,IAAIE,KAAK,CAAC,kEAAkE,CAAC;EACvF;EAEA,OAAOF,OAAO;AAClB,CAAC","ignoreList":[]}

package/components/OverlayLayout/OverlayLayout.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import type { ExitHandler } from "react-transition-group/Transition";
-import type { overlayHeaderVariants } from "./components";
+import type { overlayHeaderVariants } from "./components/index.js";
 import { type VariantProps } from "@webiny/admin-ui";
 export interface OverlayLayoutProps extends VariantProps<typeof overlayHeaderVariants> {
     barMiddle?: React.ReactNode;

package/components/OverlayLayout/OverlayLayout.js

@@ -1,9 +1,8 @@
 import React, { useCallback, useEffect, useState } from "react";
-import noop from "lodash/noop";
-import { OverlayView } from "../../ui/views/OverlayView";
-import { OverlayBackdrop, OverlayContent, OverlayHeader, OverlayRoot } from "./components";
+import noop from "lodash/noop.js";
+import { OverlayBackdrop, OverlayContent, OverlayHeader, OverlayRoot } from "./components/index.js";
 import { Portal } from "@webiny/admin-ui";
-const noScrollBodyClassNames = ["wby-overflow-hidden", "wby-h-screen"];
+const noScrollBodyClassNames = ["overflow-hidden", "h-screen"];
 export const OverlayLayout = ({
   barMiddle,
   barLeft,
@@ -15,19 +14,17 @@ export const OverlayLayout = ({
   const [visible, setVisible] = useState(true);
   const hideOverlay = useCallback(() => {
     setVisible(false);
-    if (OverlayView.openedViews === 0) {
-      noScrollBodyClassNames.forEach(className => document.body.classList.remove(className));
-    }
   }, []);
   useEffect(() => {
     noScrollBodyClassNames.forEach(className => document.body.classList.add(className));
     return () => {
-      if (OverlayView.openedViews === 0) {
-        noScrollBodyClassNames.forEach(className => document.body.classList.remove(className));
-      }
+      noScrollBodyClassNames.forEach(className => document.body.classList.remove(className));
     };
   }, []);
-  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(OverlayRoot, {
+  return /*#__PURE__*/React.createElement(Portal, {
+    "data-role": "overlay-layout",
+    className: "absolute z-overlay"
+  }, /*#__PURE__*/React.createElement(OverlayRoot, {
     visible: visible,
     onExited: onExited
   }, /*#__PURE__*/React.createElement(OverlayBackdrop, {

package/components/OverlayLayout/OverlayLayout.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useEffect","useState","noop","OverlayView","OverlayBackdrop","OverlayContent","OverlayHeader","OverlayRoot","Portal","noScrollBodyClassNames","OverlayLayout","barMiddle","barLeft","barRight","children","onExited","variant","visible","setVisible","hideOverlay","openedViews","forEach","className","document","body","classList","remove","add","createElement","Fragment","start","middle","end"],"sources":["OverlayLayout.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport noop from \"lodash/noop\";\nimport type { ExitHandler } from \"react-transition-group/Transition\";\nimport { OverlayView } from \"~/ui/views/OverlayView\";\nimport type { overlayHeaderVariants } from \"./components\";\nimport { OverlayBackdrop, OverlayContent, OverlayHeader, OverlayRoot } from \"./components\";\nimport { Portal, type VariantProps } from \"@webiny/admin-ui\";\n\nconst noScrollBodyClassNames = [\"wby-overflow-hidden\", \"wby-h-screen\"];\n\nexport interface OverlayLayoutProps extends VariantProps<typeof overlayHeaderVariants> {\n    barMiddle?: React.ReactNode;\n    barLeft?: React.ReactNode;\n    barRight?: React.ReactNode;\n    children: React.ReactNode;\n    onExited?: ExitHandler<HTMLElement>;\n}\n\nexport const OverlayLayout: React.FC<OverlayLayoutProps> = ({\n    barMiddle,\n    barLeft,\n    barRight,\n    children,\n    onExited = noop,\n    variant\n}) => {\n    const [visible, setVisible] = useState(true);\n\n    const hideOverlay = useCallback(() => {\n        setVisible(false);\n        if (OverlayView.openedViews === 0) {\n            noScrollBodyClassNames.forEach(className => document.body.classList.remove(className));\n        }\n    }, []);\n\n    useEffect(() => {\n        noScrollBodyClassNames.forEach(className => document.body.classList.add(className));\n        return () => {\n            if (OverlayView.openedViews === 0) {\n                noScrollBodyClassNames.forEach(className =>\n                    document.body.classList.remove(className)\n                );\n            }\n        };\n    }, []);\n\n    return (\n        <Portal>\n            <OverlayRoot visible={visible} onExited={onExited}>\n                <OverlayBackdrop visible={visible} hideOverlay={hideOverlay} />\n                <OverlayContent visible={visible}>\n                    <>\n                        <OverlayHeader\n                            start={barLeft}\n                            middle={barMiddle}\n                            end={barRight}\n                            variant={variant}\n                            hideOverlay={hideOverlay}\n                        />\n\n                        {children}\n                    </>\n                </OverlayContent>\n            </OverlayRoot>\n        </Portal>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC/D,OAAOC,IAAI,MAAM,aAAa;AAE9B,SAASC,WAAW;AAEpB,SAASC,eAAe,EAAEC,cAAc,EAAEC,aAAa,EAAEC,WAAW;AACpE,SAASC,MAAM,QAA2B,kBAAkB;AAE5D,MAAMC,sBAAsB,GAAG,CAAC,qBAAqB,EAAE,cAAc,CAAC;AAUtE,OAAO,MAAMC,aAA2C,GAAGA,CAAC;EACxDC,SAAS;EACTC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ,GAAGb,IAAI;EACfc;AACJ,CAAC,KAAK;EACF,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGjB,QAAQ,CAAC,IAAI,CAAC;EAE5C,MAAMkB,WAAW,GAAGpB,WAAW,CAAC,MAAM;IAClCmB,UAAU,CAAC,KAAK,CAAC;IACjB,IAAIf,WAAW,CAACiB,WAAW,KAAK,CAAC,EAAE;MAC/BX,sBAAsB,CAACY,OAAO,CAACC,SAAS,IAAIC,QAAQ,CAACC,IAAI,CAACC,SAAS,CAACC,MAAM,CAACJ,SAAS,CAAC,CAAC;IAC1F;EACJ,CAAC,EAAE,EAAE,CAAC;EAENtB,SAAS,CAAC,MAAM;IACZS,sBAAsB,CAACY,OAAO,CAACC,SAAS,IAAIC,QAAQ,CAACC,IAAI,CAACC,SAAS,CAACE,GAAG,CAACL,SAAS,CAAC,CAAC;IACnF,OAAO,MAAM;MACT,IAAInB,WAAW,CAACiB,WAAW,KAAK,CAAC,EAAE;QAC/BX,sBAAsB,CAACY,OAAO,CAACC,SAAS,IACpCC,QAAQ,CAACC,IAAI,CAACC,SAAS,CAACC,MAAM,CAACJ,SAAS,CAC5C,CAAC;MACL;IACJ,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,oBACIxB,KAAA,CAAA8B,aAAA,CAACpB,MAAM,qBACHV,KAAA,CAAA8B,aAAA,CAACrB,WAAW;IAACU,OAAO,EAAEA,OAAQ;IAACF,QAAQ,EAAEA;EAAS,gBAC9CjB,KAAA,CAAA8B,aAAA,CAACxB,eAAe;IAACa,OAAO,EAAEA,OAAQ;IAACE,WAAW,EAAEA;EAAY,CAAE,CAAC,eAC/DrB,KAAA,CAAA8B,aAAA,CAACvB,cAAc;IAACY,OAAO,EAAEA;EAAQ,gBAC7BnB,KAAA,CAAA8B,aAAA,CAAA9B,KAAA,CAAA+B,QAAA,qBACI/B,KAAA,CAAA8B,aAAA,CAACtB,aAAa;IACVwB,KAAK,EAAElB,OAAQ;IACfmB,MAAM,EAAEpB,SAAU;IAClBqB,GAAG,EAAEnB,QAAS;IACdG,OAAO,EAAEA,OAAQ;IACjBG,WAAW,EAAEA;EAAY,CAC5B,CAAC,EAEDL,QACH,CACU,CACP,CACT,CAAC;AAEjB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useCallback","useEffect","useState","noop","OverlayBackdrop","OverlayContent","OverlayHeader","OverlayRoot","Portal","noScrollBodyClassNames","OverlayLayout","barMiddle","barLeft","barRight","children","onExited","variant","visible","setVisible","hideOverlay","forEach","className","document","body","classList","add","remove","createElement","Fragment","start","middle","end"],"sources":["OverlayLayout.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport noop from \"lodash/noop.js\";\nimport type { ExitHandler } from \"react-transition-group/Transition\";\nimport type { overlayHeaderVariants } from \"./components/index.js\";\nimport { OverlayBackdrop, OverlayContent, OverlayHeader, OverlayRoot } from \"./components/index.js\";\nimport { Portal, type VariantProps } from \"@webiny/admin-ui\";\n\nconst noScrollBodyClassNames = [\"overflow-hidden\", \"h-screen\"];\n\nexport interface OverlayLayoutProps extends VariantProps<typeof overlayHeaderVariants> {\n    barMiddle?: React.ReactNode;\n    barLeft?: React.ReactNode;\n    barRight?: React.ReactNode;\n    children: React.ReactNode;\n    onExited?: ExitHandler<HTMLElement>;\n}\n\nexport const OverlayLayout: React.FC<OverlayLayoutProps> = ({\n    barMiddle,\n    barLeft,\n    barRight,\n    children,\n    onExited = noop,\n    variant\n}) => {\n    const [visible, setVisible] = useState(true);\n\n    const hideOverlay = useCallback(() => {\n        setVisible(false);\n    }, []);\n\n    useEffect(() => {\n        noScrollBodyClassNames.forEach(className => document.body.classList.add(className));\n\n        return () => {\n            noScrollBodyClassNames.forEach(className => document.body.classList.remove(className));\n        };\n    }, []);\n\n    return (\n        <Portal data-role=\"overlay-layout\" className={\"absolute z-overlay\"}>\n            <OverlayRoot visible={visible} onExited={onExited}>\n                <OverlayBackdrop visible={visible} hideOverlay={hideOverlay} />\n                <OverlayContent visible={visible}>\n                    <>\n                        <OverlayHeader\n                            start={barLeft}\n                            middle={barMiddle}\n                            end={barRight}\n                            variant={variant}\n                            hideOverlay={hideOverlay}\n                        />\n\n                        {children}\n                    </>\n                </OverlayContent>\n            </OverlayRoot>\n        </Portal>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC/D,OAAOC,IAAI,MAAM,gBAAgB;AAGjC,SAASC,eAAe,EAAEC,cAAc,EAAEC,aAAa,EAAEC,WAAW;AACpE,SAASC,MAAM,QAA2B,kBAAkB;AAE5D,MAAMC,sBAAsB,GAAG,CAAC,iBAAiB,EAAE,UAAU,CAAC;AAU9D,OAAO,MAAMC,aAA2C,GAAGA,CAAC;EACxDC,SAAS;EACTC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ,GAAGZ,IAAI;EACfa;AACJ,CAAC,KAAK;EACF,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGhB,QAAQ,CAAC,IAAI,CAAC;EAE5C,MAAMiB,WAAW,GAAGnB,WAAW,CAAC,MAAM;IAClCkB,UAAU,CAAC,KAAK,CAAC;EACrB,CAAC,EAAE,EAAE,CAAC;EAENjB,SAAS,CAAC,MAAM;IACZQ,sBAAsB,CAACW,OAAO,CAACC,SAAS,IAAIC,QAAQ,CAACC,IAAI,CAACC,SAAS,CAACC,GAAG,CAACJ,SAAS,CAAC,CAAC;IAEnF,OAAO,MAAM;MACTZ,sBAAsB,CAACW,OAAO,CAACC,SAAS,IAAIC,QAAQ,CAACC,IAAI,CAACC,SAAS,CAACE,MAAM,CAACL,SAAS,CAAC,CAAC;IAC1F,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,oBACItB,KAAA,CAAA4B,aAAA,CAACnB,MAAM;IAAC,aAAU,gBAAgB;IAACa,SAAS,EAAE;EAAqB,gBAC/DtB,KAAA,CAAA4B,aAAA,CAACpB,WAAW;IAACU,OAAO,EAAEA,OAAQ;IAACF,QAAQ,EAAEA;EAAS,gBAC9ChB,KAAA,CAAA4B,aAAA,CAACvB,eAAe;IAACa,OAAO,EAAEA,OAAQ;IAACE,WAAW,EAAEA;EAAY,CAAE,CAAC,eAC/DpB,KAAA,CAAA4B,aAAA,CAACtB,cAAc;IAACY,OAAO,EAAEA;EAAQ,gBAC7BlB,KAAA,CAAA4B,aAAA,CAAA5B,KAAA,CAAA6B,QAAA,qBACI7B,KAAA,CAAA4B,aAAA,CAACrB,aAAa;IACVuB,KAAK,EAAEjB,OAAQ;IACfkB,MAAM,EAAEnB,SAAU;IAClBoB,GAAG,EAAElB,QAAS;IACdG,OAAO,EAAEA,OAAQ;IACjBG,WAAW,EAAEA;EAAY,CAC5B,CAAC,EAEDL,QACH,CACU,CACP,CACT,CAAC;AAEjB,CAAC","ignoreList":[]}

package/components/OverlayLayout/components/OverlayBackdrop.js

@@ -7,7 +7,7 @@ const OverlayBackdrop = ({
   return /*#__PURE__*/React.createElement("div", {
     onClick: hideOverlay,
     "data-state": visible ? "open" : "closed",
-    className: cn("wby-fixed wby-inset-0 wby-bg-neutral-dark/50", "wby-transition wby-ease-in-out", "data-[state=open]:wby-animate-in data-[state=open]:wby-fade-in data-[state=open]:wby-duration-500", "data-[state=closed]:wby-animate-out data-[state=closed]:wby-fade-out data-[state=closed]:wby-duration-150")
+    className: cn("fixed inset-0 bg-neutral-dark/50 z-overlay-backdrop", "transition ease-in-out", "data-[state=open]:animate-in data-[state=open]:fade-in data-[state=open]:duration-500", "data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:duration-150")
   });
 };
 export { OverlayBackdrop };

package/components/OverlayLayout/components/OverlayBackdrop.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cn","OverlayBackdrop","hideOverlay","visible","createElement","onClick","className"],"sources":["OverlayBackdrop.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"@webiny/admin-ui\";\n\ninterface OverlayBackdropProps extends React.HTMLAttributes<HTMLDivElement> {\n    visible?: boolean;\n    hideOverlay: () => void;\n}\n\nconst OverlayBackdrop = ({ hideOverlay, visible }: OverlayBackdropProps) => {\n    return (\n        <div\n            onClick={hideOverlay}\n            data-state={visible ? \"open\" : \"closed\"}\n            className={cn(\n                \"wby-fixed wby-inset-0 wby-bg-neutral-dark/50\",\n                \"wby-transition wby-ease-in-out\",\n                \"data-[state=open]:wby-animate-in data-[state=open]:wby-fade-in data-[state=open]:wby-duration-500\",\n                \"data-[state=closed]:wby-animate-out data-[state=closed]:wby-fade-out data-[state=closed]:wby-duration-150\"\n            )}\n        />\n    );\n};\n\nexport { OverlayBackdrop, type OverlayBackdropProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,QAAQ,kBAAkB;AAOrC,MAAMC,eAAe,GAAGA,CAAC;EAAEC,WAAW;EAAEC;AAA8B,CAAC,KAAK;EACxE,oBACIJ,KAAA,CAAAK,aAAA;IACIC,OAAO,EAAEH,WAAY;IACrB,cAAYC,OAAO,GAAG,MAAM,GAAG,QAAS;IACxCG,SAAS,EAAEN,EAAE,CACT,8CAA8C,EAC9C,gCAAgC,EAChC,mGAAmG,EACnG,2GACJ;EAAE,CACL,CAAC;AAEV,CAAC;AAED,SAASC,eAAe","ignoreList":[]}
+{"version":3,"names":["React","cn","OverlayBackdrop","hideOverlay","visible","createElement","onClick","className"],"sources":["OverlayBackdrop.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"@webiny/admin-ui\";\n\ninterface OverlayBackdropProps extends React.HTMLAttributes<HTMLDivElement> {\n    visible?: boolean;\n    hideOverlay: () => void;\n}\n\nconst OverlayBackdrop = ({ hideOverlay, visible }: OverlayBackdropProps) => {\n    return (\n        <div\n            onClick={hideOverlay}\n            data-state={visible ? \"open\" : \"closed\"}\n            className={cn(\n                \"fixed inset-0 bg-neutral-dark/50 z-overlay-backdrop\",\n                \"transition ease-in-out\",\n                \"data-[state=open]:animate-in data-[state=open]:fade-in data-[state=open]:duration-500\",\n                \"data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:duration-150\"\n            )}\n        />\n    );\n};\n\nexport { OverlayBackdrop, type OverlayBackdropProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,QAAQ,kBAAkB;AAOrC,MAAMC,eAAe,GAAGA,CAAC;EAAEC,WAAW;EAAEC;AAA8B,CAAC,KAAK;EACxE,oBACIJ,KAAA,CAAAK,aAAA;IACIC,OAAO,EAAEH,WAAY;IACrB,cAAYC,OAAO,GAAG,MAAM,GAAG,QAAS;IACxCG,SAAS,EAAEN,EAAE,CACT,qDAAqD,EACrD,wBAAwB,EACxB,uFAAuF,EACvF,+FACJ;EAAE,CACL,CAAC;AAEV,CAAC;AAED,SAASC,eAAe","ignoreList":[]}

package/components/OverlayLayout/components/OverlayContent.js

@@ -9,7 +9,7 @@ const OverlayContent = ({
 }) => {
   return /*#__PURE__*/React.createElement("div", Object.assign({
     "data-state": visible ? "open" : "closed",
-    className: cn(["wby-fixed wby-inset-x-0 wby-top-lg", "wby-w-screen", "wby-rounded-t-lg wby-overflow-hidden", "wby-bg-neutral-base", "wby-transition wby-ease-in-out", "data-[state=open]:wby-animate-in data-[state=open]:wby-slide-in-from-bottom data-[state=open]:wby-fade-in data-[state=open]:wby-duration-500", "data-[state=closed]:wby-animate-out data-[state=closed]:wby-fade-out data-[state=closed]:wby-duration-150"], className),
+    className: cn(["fixed inset-x-0 top-lg z-overlay", "w-screen", "rounded-t-lg overflow-hidden", "bg-neutral-base", "transition ease-in-out", "data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom data-[state=open]:fade-in data-[state=open]:duration-500", "data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:duration-150"], className),
     style: {
       ...style,
       height: "calc(100vh - 24px)"

package/components/OverlayLayout/components/OverlayContent.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cn","OverlayContent","visible","className","style","children","props","createElement","Object","assign","height"],"sources":["OverlayContent.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"@webiny/admin-ui\";\n\ninterface OverlayContentProps extends React.HTMLAttributes<HTMLDivElement> {\n    visible?: boolean;\n}\n\nconst OverlayContent = ({ visible, className, style, children, ...props }: OverlayContentProps) => {\n    return (\n        <div\n            data-state={visible ? \"open\" : \"closed\"}\n            className={cn(\n                [\n                    \"wby-fixed wby-inset-x-0 wby-top-lg\",\n                    \"wby-w-screen\",\n                    \"wby-rounded-t-lg wby-overflow-hidden\",\n                    \"wby-bg-neutral-base\",\n                    \"wby-transition wby-ease-in-out\",\n                    \"data-[state=open]:wby-animate-in data-[state=open]:wby-slide-in-from-bottom data-[state=open]:wby-fade-in data-[state=open]:wby-duration-500\",\n                    \"data-[state=closed]:wby-animate-out data-[state=closed]:wby-fade-out data-[state=closed]:wby-duration-150\"\n                ],\n                className\n            )}\n            style={{ ...style, height: \"calc(100vh - 24px)\" }}\n            {...props}\n        >\n            {children}\n        </div>\n    );\n};\n\nexport { OverlayContent, type OverlayContentProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,QAAQ,kBAAkB;AAMrC,MAAMC,cAAc,GAAGA,CAAC;EAAEC,OAAO;EAAEC,SAAS;EAAEC,KAAK;EAAEC,QAAQ;EAAE,GAAGC;AAA2B,CAAC,KAAK;EAC/F,oBACIP,KAAA,CAAAQ,aAAA,QAAAC,MAAA,CAAAC,MAAA;IACI,cAAYP,OAAO,GAAG,MAAM,GAAG,QAAS;IACxCC,SAAS,EAAEH,EAAE,CACT,CACI,oCAAoC,EACpC,cAAc,EACd,sCAAsC,EACtC,qBAAqB,EACrB,gCAAgC,EAChC,8IAA8I,EAC9I,2GAA2G,CAC9G,EACDG,SACJ,CAAE;IACFC,KAAK,EAAE;MAAE,GAAGA,KAAK;MAAEM,MAAM,EAAE;IAAqB;EAAE,GAC9CJ,KAAK,GAERD,QACA,CAAC;AAEd,CAAC;AAED,SAASJ,cAAc","ignoreList":[]}
+{"version":3,"names":["React","cn","OverlayContent","visible","className","style","children","props","createElement","Object","assign","height"],"sources":["OverlayContent.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"@webiny/admin-ui\";\n\ninterface OverlayContentProps extends React.HTMLAttributes<HTMLDivElement> {\n    visible?: boolean;\n}\n\nconst OverlayContent = ({ visible, className, style, children, ...props }: OverlayContentProps) => {\n    return (\n        <div\n            data-state={visible ? \"open\" : \"closed\"}\n            className={cn(\n                [\n                    \"fixed inset-x-0 top-lg z-overlay\",\n                    \"w-screen\",\n                    \"rounded-t-lg overflow-hidden\",\n                    \"bg-neutral-base\",\n                    \"transition ease-in-out\",\n                    \"data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom data-[state=open]:fade-in data-[state=open]:duration-500\",\n                    \"data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:duration-150\"\n                ],\n                className\n            )}\n            style={{ ...style, height: \"calc(100vh - 24px)\" }}\n            {...props}\n        >\n            {children}\n        </div>\n    );\n};\n\nexport { OverlayContent, type OverlayContentProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,QAAQ,kBAAkB;AAMrC,MAAMC,cAAc,GAAGA,CAAC;EAAEC,OAAO;EAAEC,SAAS;EAAEC,KAAK;EAAEC,QAAQ;EAAE,GAAGC;AAA2B,CAAC,KAAK;EAC/F,oBACIP,KAAA,CAAAQ,aAAA,QAAAC,MAAA,CAAAC,MAAA;IACI,cAAYP,OAAO,GAAG,MAAM,GAAG,QAAS;IACxCC,SAAS,EAAEH,EAAE,CACT,CACI,kCAAkC,EAClC,UAAU,EACV,8BAA8B,EAC9B,iBAAiB,EACjB,wBAAwB,EACxB,8HAA8H,EAC9H,+FAA+F,CAClG,EACDG,SACJ,CAAE;IACFC,KAAK,EAAE;MAAE,GAAGA,KAAK;MAAEM,MAAM,EAAE;IAAqB;EAAE,GAC9CJ,KAAK,GAERD,QACA,CAAC;AAEd,CAAC;AAED,SAASJ,cAAc","ignoreList":[]}