@webiny/app-admin 0.0.0-unstable.eb196ccd2f → 0.0.0-unstable.f6dc066313

package/components/IconPicker/plugins/customPlugin.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useApolloClient","observer","Button","FileManager","IconPickerTab","useIcon","useIconPicker","IconPickerConfig","LIST_CUSTOM_ICONS","CustomIcon","icon","size","createElement","width","height","src","value","alt","name","style","verticalAlign","IconFilePicker","onUpload","onChange","onUploadCompletion","file","scope","accept","showFileManager","variant","text","onClick","getNameOrId","meta","find","obj","key","id","CustomIconTab","presenter","onIconSelect","setIcon","closeMenu","onIconFileSelect","type","onIconFileUpload","addIcon","label","actions","CustomIconPlugin","client","IconPack","provider","data","response","query","variables","limit","Error","error","fileManager","listFiles","message","map","customIcon","IconType","Icon","element","Tab"],"sources":["customPlugin.tsx"],"sourcesContent":["import React from \"react\";\nimport { useApolloClient } from \"@apollo/react-hooks\";\nimport { observer } from \"mobx-react-lite\";\nimport { Button } from \"@webiny/admin-ui\";\nimport type { FileManagerFileItem } from \"~/base/ui/FileManager\";\nimport { FileManager } from \"~/base/ui/FileManager\";\nimport { IconPickerTab } from \"../IconPickerTab\";\nimport { useIcon } from \"..\";\nimport { useIconPicker } from \"../IconPickerPresenterProvider\";\nimport { IconPickerConfig } from \"../config\";\nimport type { ListCustomIconsQueryResponse } from \"./graphql\";\nimport { LIST_CUSTOM_ICONS } from \"./graphql\";\nimport type { Icon } from \"../types\";\n\n/**\n * NOTE: Avoid using `@emotion/styled` in icon renderer components across all plugins.\n * This is crucial for serializing component rendering into a string value as plain HTML,\n * which is necessary for usage in the website application. Please use inline styles here\n * to ensure proper serialization.\n */\n\nconst CustomIcon = () => {\n    const { icon, size } = useIcon<Icon>();\n\n    return (\n        <img\n            width={size}\n            height={size}\n            src={icon.value}\n            alt={icon.name}\n            style={{\n                verticalAlign: \"middle\"\n            }}\n        />\n    );\n};\n\ninterface IconFilePickerProps {\n    onUpload: (file: FileManagerFileItem) => void;\n    onChange: (file: FileManagerFileItem) => void;\n}\n\nconst IconFilePicker = ({ onUpload, onChange }: IconFilePickerProps) => {\n    return (\n        <FileManager\n            onUploadCompletion={([file]) => {\n                onUpload(file);\n            }}\n            onChange={onChange}\n            scope=\"scope:iconPicker\"\n            accept={[\"image/svg+xml\"]}\n        >\n            {({ showFileManager }) => (\n                <Button\n                    variant={\"primary\"}\n                    text={\"Browse\"}\n                    onClick={() => {\n                        showFileManager();\n                    }}\n                />\n            )}\n        </FileManager>\n    );\n};\n\nfunction getNameOrId(file: FileManagerFileItem): string {\n    const name = (file.meta || []).find(obj => obj.key === \"name\");\n\n    return name ? name.value : file.id;\n}\n\nconst CustomIconTab = observer(() => {\n    const presenter = useIconPicker();\n\n    const onIconSelect = (icon: Icon) => {\n        presenter.setIcon(icon);\n        presenter.closeMenu();\n    };\n\n    const onIconFileSelect = (file: FileManagerFileItem) => {\n        const name = getNameOrId(file);\n\n        presenter.setIcon({\n            type: \"custom\",\n            name,\n            value: file.src\n        });\n        presenter.closeMenu();\n    };\n\n    const onIconFileUpload = (file: FileManagerFileItem) => {\n        const name = getNameOrId(file);\n\n        const icon = {\n            type: \"custom\",\n            name,\n            value: file.src\n        };\n\n        presenter.addIcon(icon);\n        presenter.setIcon(icon);\n        presenter.closeMenu();\n    };\n\n    return (\n        <IconPickerTab\n            value={\"custom\"}\n            label={\"Custom\"}\n            onChange={onIconSelect}\n            actions={<IconFilePicker onChange={onIconFileSelect} onUpload={onIconFileUpload} />}\n        />\n    );\n});\n\nexport const CustomIconPlugin = () => {\n    const client = useApolloClient();\n\n    return (\n        <IconPickerConfig>\n            <IconPickerConfig.IconPack\n                name=\"custom\"\n                provider={async () => {\n                    const { data: response } = await client.query<ListCustomIconsQueryResponse>({\n                        query: LIST_CUSTOM_ICONS,\n                        variables: {\n                            limit: 10000\n                        }\n                    });\n\n                    if (!response) {\n                        throw new Error(\"Network error while listing custom icons.\");\n                    }\n\n                    const { data, error } = response.fileManager.listFiles;\n\n                    if (!data) {\n                        throw new Error(error?.message || \"Could not fetch custom icons.\");\n                    }\n\n                    return data.map(customIcon => ({\n                        type: \"custom\",\n                        name: customIcon.name,\n                        value: customIcon.src\n                    }));\n                }}\n            />\n            <IconPickerConfig.IconType name={\"custom\"}>\n                <IconPickerConfig.IconType.Icon element={<CustomIcon />} />\n                <IconPickerConfig.IconType.Tab element={<CustomIconTab />} />\n            </IconPickerConfig.IconType>\n        </IconPickerConfig>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useApolloClient","observer","Button","FileManager","IconPickerTab","useIcon","useIconPicker","IconPickerConfig","LIST_CUSTOM_ICONS","CustomIcon","icon","size","createElement","width","height","src","value","alt","name","style","verticalAlign","IconFilePicker","onUpload","onChange","onUploadCompletion","file","scope","accept","render","showFileManager","variant","text","onClick","CustomIconTab","presenter","onIconSelect","setIcon","closeMenu","onIconFileSelect","type","onIconFileUpload","addIcon","label","actions","CustomIconPlugin","client","IconPack","provider","data","response","query","variables","limit","Error","error","fileManager","listFiles","message","map","customIcon","IconType","Icon","element","Tab"],"sources":["customPlugin.tsx"],"sourcesContent":["import React from \"react\";\nimport { useApolloClient } from \"@apollo/react-hooks\";\nimport { observer } from \"mobx-react-lite\";\nimport { Button } from \"@webiny/admin-ui\";\nimport type { FileManagerFileItem } from \"~/base/ui/FileManager.js\";\nimport { FileManager } from \"~/base/ui/FileManager.js\";\nimport { IconPickerTab } from \"../IconPickerTab.js\";\nimport { useIcon } from \"../index.js\";\nimport { useIconPicker } from \"../IconPickerPresenterProvider.js\";\nimport { IconPickerConfig } from \"../config/index.js\";\nimport type { ListCustomIconsQueryResponse } from \"./graphql.js\";\nimport { LIST_CUSTOM_ICONS } from \"./graphql.js\";\nimport type { Icon } from \"../types.js\";\n\n/**\n * NOTE: Avoid using `@emotion/styled` in icon renderer components across all plugins.\n * This is crucial for serializing component rendering into a string value as plain HTML,\n * which is necessary for usage in the website application. Please use inline styles here\n * to ensure proper serialization.\n */\n\nconst CustomIcon = () => {\n    const { icon, size } = useIcon<Icon>();\n\n    return (\n        <img\n            width={size}\n            height={size}\n            src={icon.value}\n            alt={icon.name}\n            style={{\n                verticalAlign: \"middle\"\n            }}\n        />\n    );\n};\n\ninterface IconFilePickerProps {\n    onUpload: (file: FileManagerFileItem) => void;\n    onChange: (file: FileManagerFileItem) => void;\n}\n\nconst IconFilePicker = ({ onUpload, onChange }: IconFilePickerProps) => {\n    return (\n        <FileManager\n            onUploadCompletion={([file]) => {\n                onUpload(file);\n            }}\n            onChange={onChange}\n            scope=\"scope:iconPicker\"\n            accept={[\"image/svg+xml\"]}\n            render={({ showFileManager }) => (\n                <Button\n                    variant={\"primary\"}\n                    text={\"Browse\"}\n                    onClick={() => {\n                        showFileManager();\n                    }}\n                />\n            )}\n        ></FileManager>\n    );\n};\n\nconst CustomIconTab = observer(() => {\n    const presenter = useIconPicker();\n\n    const onIconSelect = (icon: Icon) => {\n        presenter.setIcon(icon);\n        presenter.closeMenu();\n    };\n\n    const onIconFileSelect = (file: FileManagerFileItem) => {\n        presenter.setIcon({\n            type: \"custom\",\n            name: file.name,\n            value: file.src\n        });\n        presenter.closeMenu();\n    };\n\n    const onIconFileUpload = (file: FileManagerFileItem) => {\n        const icon = {\n            type: \"custom\",\n            name: file.name,\n            value: file.src\n        };\n\n        presenter.addIcon(icon);\n        presenter.setIcon(icon);\n        presenter.closeMenu();\n    };\n\n    return (\n        <IconPickerTab\n            value={\"custom\"}\n            label={\"Custom\"}\n            onChange={onIconSelect}\n            actions={<IconFilePicker onChange={onIconFileSelect} onUpload={onIconFileUpload} />}\n        />\n    );\n});\n\nexport const CustomIconPlugin = () => {\n    const client = useApolloClient();\n\n    return (\n        <IconPickerConfig>\n            <IconPickerConfig.IconPack\n                name=\"custom\"\n                provider={async () => {\n                    const { data: response } = await client.query<ListCustomIconsQueryResponse>({\n                        query: LIST_CUSTOM_ICONS,\n                        variables: {\n                            limit: 10000\n                        }\n                    });\n\n                    if (!response) {\n                        throw new Error(\"Network error while listing custom icons.\");\n                    }\n\n                    const { data, error } = response.fileManager.listFiles;\n\n                    if (!data) {\n                        throw new Error(error?.message || \"Could not fetch custom icons.\");\n                    }\n\n                    return data.map(customIcon => ({\n                        type: \"custom\",\n                        name: customIcon.name,\n                        value: customIcon.src\n                    }));\n                }}\n            />\n            <IconPickerConfig.IconType name={\"custom\"}>\n                <IconPickerConfig.IconType.Icon element={<CustomIcon />} />\n                <IconPickerConfig.IconType.Tab element={<CustomIconTab />} />\n            </IconPickerConfig.IconType>\n        </IconPickerConfig>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/components/IconPicker/plugins/emojisPlugin.js

@@ -1,15 +1,15 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
 import { cn, PopoverPrimitive } from "@webiny/admin-ui";
-import { useIcon } from "..";
-import { IconPickerTab } from "../IconPickerTab";
-import { IconProvider } from "../IconRenderer";
-import { useIconPicker } from "../IconPickerPresenterProvider";
-import { IconPickerConfig } from "../config";
+import { useIcon } from "../index.js";
+import { IconPickerTab } from "../IconPickerTab.js";
+import { IconProvider } from "../IconRenderer.js";
+import { useIconPicker } from "../IconPickerPresenterProvider.js";
+import { IconPickerConfig } from "../config/index.js";
 const SKIN_TONES = ["", "\u{1f3fb}", "\u{1f3fc}", "\u{1f3fd}", "\u{1f3fe}", "\u{1f3ff}"];
 const SkinToneSelectWrapper = props => {
   return /*#__PURE__*/React.createElement("div", {
-    className: cn("wby-size-xl wby-rounded-sm wby-pointer wby-border-solid wby-border-sm wby-border-neutral-muted wby-flex wby-justify-center wby-items-center wby-text-center")
+    className: cn("size-xl rounded-sm pointer border-solid border-sm border-neutral-muted flex justify-center items-center text-center")
   }, props.children);
 };
 
@@ -55,18 +55,18 @@ const SkinToneSelect = ({
     open: open,
     onOpenChange: open => setOpen(open)
   }, /*#__PURE__*/React.createElement(PopoverPrimitive.Trigger, {
-    className: "wby-outline-none"
+    className: "outline-none"
   }, /*#__PURE__*/React.createElement(SkinToneSelectWrapper, null, /*#__PURE__*/React.createElement(IconProvider, {
     icon: icon,
     size: 24
   }, /*#__PURE__*/React.createElement(Emoji, null)))), /*#__PURE__*/React.createElement(PopoverPrimitive.Content, null, /*#__PURE__*/React.createElement("div", {
-    className: "wby-bg-neutral-base wby-grid wby-gap-xs wby-p-xs wby-text-center"
+    className: "bg-neutral-base grid gap-xs p-xs text-center"
   }, SKIN_TONES.map((skinTone, index) => /*#__PURE__*/React.createElement("div", {
     key: index,
     onClick: () => {
       onChange(skinTone);
     },
-    className: "wby-cursor-pointer"
+    className: "cursor-pointer"
   }, /*#__PURE__*/React.createElement(IconProvider, {
     icon: {
       ...icon,

package/components/IconPicker/plugins/emojisPlugin.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","observer","cn","PopoverPrimitive","useIcon","IconPickerTab","IconProvider","useIconPicker","IconPickerConfig","SKIN_TONES","SkinToneSelectWrapper","props","createElement","className","children","Emoji","icon","size","style","display","width","height","fontSize","lineHeight","color","skinTone","value","SkinToneSelect","hasSkinToneSupport","onChange","open","setOpen","isEmoji","onOpenChange","Trigger","Content","map","index","key","onClick","type","EmojiTab","presenter","selectedIcon","vm","onSkinToneChange","setIcon","onIconSelect","closeMenu","skinToneSupport","label","actions","EmojiPlugin","IconType","name","Icon","element","Tab"],"sources":["emojisPlugin.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { cn, PopoverPrimitive } from \"@webiny/admin-ui\";\nimport { useIcon } from \"..\";\nimport { IconPickerTab } from \"../IconPickerTab\";\nimport { IconProvider } from \"../IconRenderer\";\nimport { useIconPicker } from \"../IconPickerPresenterProvider\";\nimport { IconPickerConfig } from \"../config\";\nimport type { Icon } from \"../types\";\n\nconst SKIN_TONES = [\"\", \"\\u{1f3fb}\", \"\\u{1f3fc}\", \"\\u{1f3fd}\", \"\\u{1f3fe}\", \"\\u{1f3ff}\"];\n\nconst SkinToneSelectWrapper = (props: React.HTMLAttributes<HTMLDivElement>) => {\n    return (\n        <div\n            className={cn(\n                \"wby-size-xl wby-rounded-sm wby-pointer wby-border-solid wby-border-sm wby-border-neutral-muted wby-flex wby-justify-center wby-items-center wby-text-center\"\n            )}\n        >\n            {props.children}\n        </div>\n    );\n};\n\n/**\n * NOTE: Avoid using `@emotion/styled` in icon renderer components across all plugins.\n * This is crucial for serializing component rendering into a string value as plain HTML,\n * which is necessary for usage in the website application. Please use inline styles here\n * to ensure proper serialization.\n */\n\ninterface Emoji extends Icon {\n    skinTone: string;\n    skinToneSupport: boolean;\n}\n\nconst Emoji = () => {\n    const { icon, size } = useIcon<Emoji>();\n\n    return (\n        <div\n            style={{\n                display: \"inline-block\",\n                width: `${size}px`,\n                height: `${size}px`,\n                fontSize: `${(size * 4) / 5}px`,\n                lineHeight: `${size}px`,\n                color: \"black\"\n            }}\n        >\n            {icon.skinTone ? icon.value + icon.skinTone : icon.value}\n        </div>\n    );\n};\n\ninterface SkinToneSelectProps {\n    icon: Icon | null;\n    hasSkinToneSupport: boolean;\n    onChange: (skinTone: string) => void;\n}\n\nconst SkinToneSelect = ({ icon, hasSkinToneSupport, onChange }: SkinToneSelectProps) => {\n    const [open, setOpen] = useState(false);\n\n    if (!icon || !isEmoji(icon)) {\n        return <SkinToneSelectWrapper />;\n    }\n\n    if (!hasSkinToneSupport) {\n        return (\n            <SkinToneSelectWrapper>\n                <IconProvider icon={icon} size={24}>\n                    <Emoji />\n                </IconProvider>\n            </SkinToneSelectWrapper>\n        );\n    }\n\n    return (\n        <PopoverPrimitive open={open} onOpenChange={open => setOpen(open)}>\n            <PopoverPrimitive.Trigger className={\"wby-outline-none\"}>\n                <SkinToneSelectWrapper>\n                    <IconProvider icon={icon} size={24}>\n                        <Emoji />\n                    </IconProvider>\n                </SkinToneSelectWrapper>\n            </PopoverPrimitive.Trigger>\n            <PopoverPrimitive.Content>\n                <div className={\"wby-bg-neutral-base wby-grid wby-gap-xs wby-p-xs wby-text-center\"}>\n                    {SKIN_TONES.map((skinTone, index) => (\n                        <div\n                            key={index}\n                            onClick={() => {\n                                onChange(skinTone);\n                            }}\n                            className={\"wby-cursor-pointer\"}\n                        >\n                            <IconProvider icon={{ ...icon, skinTone }} size={24}>\n                                <Emoji />\n                            </IconProvider>\n                        </div>\n                    ))}\n                </div>\n            </PopoverPrimitive.Content>\n        </PopoverPrimitive>\n    );\n};\n\n/**\n * @see https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates\n */\nconst isEmoji = (icon: Icon | null): icon is Emoji => {\n    if (!icon) {\n        return false;\n    }\n    return icon.type === \"emoji\";\n};\n\nconst EmojiTab = observer(() => {\n    const presenter = useIconPicker();\n    const { selectedIcon } = presenter.vm;\n\n    const onSkinToneChange = (skinTone: string) => {\n        if (isEmoji(selectedIcon)) {\n            presenter.setIcon({ ...selectedIcon, skinTone });\n        }\n    };\n\n    const onIconSelect = (icon: Icon) => {\n        presenter.setIcon(icon);\n        presenter.closeMenu();\n    };\n\n    const hasSkinToneSupport = isEmoji(selectedIcon) ? selectedIcon.skinToneSupport : false;\n\n    return (\n        <IconPickerTab\n            value={\"emoji\"}\n            label={\"Emojis\"}\n            onChange={onIconSelect}\n            actions={\n                <SkinToneSelect\n                    icon={selectedIcon}\n                    hasSkinToneSupport={hasSkinToneSupport}\n                    onChange={onSkinToneChange}\n                />\n            }\n        />\n    );\n});\n\nexport const EmojiPlugin = () => {\n    return (\n        <IconPickerConfig>\n            <IconPickerConfig.IconType name={\"emoji\"}>\n                <IconPickerConfig.IconType.Icon element={<Emoji />} />\n                <IconPickerConfig.IconType.Tab element={<EmojiTab />} />\n            </IconPickerConfig.IconType>\n        </IconPickerConfig>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useState","observer","cn","PopoverPrimitive","useIcon","IconPickerTab","IconProvider","useIconPicker","IconPickerConfig","SKIN_TONES","SkinToneSelectWrapper","props","createElement","className","children","Emoji","icon","size","style","display","width","height","fontSize","lineHeight","color","skinTone","value","SkinToneSelect","hasSkinToneSupport","onChange","open","setOpen","isEmoji","onOpenChange","Trigger","Content","map","index","key","onClick","type","EmojiTab","presenter","selectedIcon","vm","onSkinToneChange","setIcon","onIconSelect","closeMenu","skinToneSupport","label","actions","EmojiPlugin","IconType","name","Icon","element","Tab"],"sources":["emojisPlugin.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { cn, PopoverPrimitive } from \"@webiny/admin-ui\";\nimport { useIcon } from \"../index.js\";\nimport { IconPickerTab } from \"../IconPickerTab.js\";\nimport { IconProvider } from \"../IconRenderer.js\";\nimport { useIconPicker } from \"../IconPickerPresenterProvider.js\";\nimport { IconPickerConfig } from \"../config/index.js\";\nimport type { Icon } from \"../types.js\";\n\nconst SKIN_TONES = [\"\", \"\\u{1f3fb}\", \"\\u{1f3fc}\", \"\\u{1f3fd}\", \"\\u{1f3fe}\", \"\\u{1f3ff}\"];\n\nconst SkinToneSelectWrapper = (props: React.HTMLAttributes<HTMLDivElement>) => {\n    return (\n        <div\n            className={cn(\n                \"size-xl rounded-sm pointer border-solid border-sm border-neutral-muted flex justify-center items-center text-center\"\n            )}\n        >\n            {props.children}\n        </div>\n    );\n};\n\n/**\n * NOTE: Avoid using `@emotion/styled` in icon renderer components across all plugins.\n * This is crucial for serializing component rendering into a string value as plain HTML,\n * which is necessary for usage in the website application. Please use inline styles here\n * to ensure proper serialization.\n */\n\ninterface Emoji extends Icon {\n    skinTone: string;\n    skinToneSupport: boolean;\n}\n\nconst Emoji = () => {\n    const { icon, size } = useIcon<Emoji>();\n\n    return (\n        <div\n            style={{\n                display: \"inline-block\",\n                width: `${size}px`,\n                height: `${size}px`,\n                fontSize: `${(size * 4) / 5}px`,\n                lineHeight: `${size}px`,\n                color: \"black\"\n            }}\n        >\n            {icon.skinTone ? icon.value + icon.skinTone : icon.value}\n        </div>\n    );\n};\n\ninterface SkinToneSelectProps {\n    icon: Icon | null;\n    hasSkinToneSupport: boolean;\n    onChange: (skinTone: string) => void;\n}\n\nconst SkinToneSelect = ({ icon, hasSkinToneSupport, onChange }: SkinToneSelectProps) => {\n    const [open, setOpen] = useState(false);\n\n    if (!icon || !isEmoji(icon)) {\n        return <SkinToneSelectWrapper />;\n    }\n\n    if (!hasSkinToneSupport) {\n        return (\n            <SkinToneSelectWrapper>\n                <IconProvider icon={icon} size={24}>\n                    <Emoji />\n                </IconProvider>\n            </SkinToneSelectWrapper>\n        );\n    }\n\n    return (\n        <PopoverPrimitive open={open} onOpenChange={open => setOpen(open)}>\n            <PopoverPrimitive.Trigger className={\"outline-none\"}>\n                <SkinToneSelectWrapper>\n                    <IconProvider icon={icon} size={24}>\n                        <Emoji />\n                    </IconProvider>\n                </SkinToneSelectWrapper>\n            </PopoverPrimitive.Trigger>\n            <PopoverPrimitive.Content>\n                <div className={\"bg-neutral-base grid gap-xs p-xs text-center\"}>\n                    {SKIN_TONES.map((skinTone, index) => (\n                        <div\n                            key={index}\n                            onClick={() => {\n                                onChange(skinTone);\n                            }}\n                            className={\"cursor-pointer\"}\n                        >\n                            <IconProvider icon={{ ...icon, skinTone }} size={24}>\n                                <Emoji />\n                            </IconProvider>\n                        </div>\n                    ))}\n                </div>\n            </PopoverPrimitive.Content>\n        </PopoverPrimitive>\n    );\n};\n\n/**\n * @see https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates\n */\nconst isEmoji = (icon: Icon | null): icon is Emoji => {\n    if (!icon) {\n        return false;\n    }\n    return icon.type === \"emoji\";\n};\n\nconst EmojiTab = observer(() => {\n    const presenter = useIconPicker();\n    const { selectedIcon } = presenter.vm;\n\n    const onSkinToneChange = (skinTone: string) => {\n        if (isEmoji(selectedIcon)) {\n            presenter.setIcon({ ...selectedIcon, skinTone });\n        }\n    };\n\n    const onIconSelect = (icon: Icon) => {\n        presenter.setIcon(icon);\n        presenter.closeMenu();\n    };\n\n    const hasSkinToneSupport = isEmoji(selectedIcon) ? selectedIcon.skinToneSupport : false;\n\n    return (\n        <IconPickerTab\n            value={\"emoji\"}\n            label={\"Emojis\"}\n            onChange={onIconSelect}\n            actions={\n                <SkinToneSelect\n                    icon={selectedIcon}\n                    hasSkinToneSupport={hasSkinToneSupport}\n                    onChange={onSkinToneChange}\n                />\n            }\n        />\n    );\n});\n\nexport const EmojiPlugin = () => {\n    return (\n        <IconPickerConfig>\n            <IconPickerConfig.IconType name={\"emoji\"}>\n                <IconPickerConfig.IconType.Icon element={<Emoji />} />\n                <IconPickerConfig.IconType.Tab element={<EmojiTab />} />\n            </IconPickerConfig.IconType>\n        </IconPickerConfig>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/components/IconPicker/plugins/iconsPlugin.js

@@ -1,10 +1,10 @@
 import React, { useState, useEffect } from "react";
 import { observer } from "mobx-react-lite";
 import { DelayedOnChange, ColorPicker } from "@webiny/admin-ui";
-import { useIcon } from "..";
-import { IconPickerTab } from "../IconPickerTab";
-import { useIconPicker } from "../IconPickerPresenterProvider";
-import { IconPickerConfig } from "../config";
+import { useIcon } from "../index.js";
+import { IconPickerTab } from "../IconPickerTab.js";
+import { useIconPicker } from "../IconPickerPresenterProvider.js";
+import { IconPickerConfig } from "../config/index.js";
 
 /**
  * NOTE: Avoid using `@emotion/styled` in icon renderer components across all plugins.

package/components/IconPicker/plugins/iconsPlugin.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","useEffect","observer","DelayedOnChange","ColorPicker","useIcon","IconPickerTab","useIconPicker","IconPickerConfig","IconSvg","icon","size","createElement","width","height","viewBox","color","dangerouslySetInnerHTML","__html","value","style","verticalAlign","IconColorPicker","onChange","align","isSimpleIcon","type","IconTab","presenter","selectedIcon","vm","setColor","onColorChange","setIcon","onIconSelect","closeMenu","label","cellDecorator","cell","actions","SimpleIconPlugin","IconType","name","Icon","element","Tab"],"sources":["iconsPlugin.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { DelayedOnChange, ColorPicker } from \"@webiny/admin-ui\";\n\nimport { useIcon } from \"..\";\nimport { IconPickerTab } from \"../IconPickerTab\";\nimport { useIconPicker } from \"../IconPickerPresenterProvider\";\nimport { IconPickerConfig } from \"../config\";\nimport type { Icon } from \"../types\";\n\n/**\n * NOTE: Avoid using `@emotion/styled` in icon renderer components across all plugins.\n * This is crucial for serializing component rendering into a string value as plain HTML,\n * which is necessary for usage in the website application. Please use inline styles here\n * to ensure proper serialization.\n */\n\ninterface SimpleIcon extends Icon {\n    color: string;\n}\n\nconst IconSvg = () => {\n    const { icon, size } = useIcon<SimpleIcon>();\n\n    return (\n        <svg\n            width={size}\n            height={size}\n            viewBox={`0 0 ${icon.width || 512} 512`}\n            color={icon?.color || \"inherit\"}\n            dangerouslySetInnerHTML={{ __html: icon.value || \"\" }}\n            style={{\n                verticalAlign: \"middle\",\n                width: \"100%\",\n                height: \"100%\"\n            }}\n        />\n    );\n};\n\ninterface IconColorPickerProps {\n    color: string;\n    onChange: (value: string) => void;\n}\n\nconst IconColorPicker = ({ color, onChange }: IconColorPickerProps) => {\n    return (\n        <DelayedOnChange value={color} onChange={onChange}>\n            {({ value, onChange }) => (\n                <ColorPicker align={\"end\"} value={value} onChange={onChange} />\n            )}\n        </DelayedOnChange>\n    );\n};\n\n/**\n * @see https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates\n */\nconst isSimpleIcon = (icon: Icon | null): icon is SimpleIcon => {\n    if (!icon) {\n        return false;\n    }\n    return icon.type === \"icon\";\n};\n\nconst IconTab = observer(() => {\n    const presenter = useIconPicker();\n    const { selectedIcon } = presenter.vm;\n\n    const [color, setColor] = useState(\"inherit\");\n\n    useEffect(() => {\n        if (color === \"inherit\" && isSimpleIcon(selectedIcon)) {\n            setColor(selectedIcon.color);\n        }\n    }, [selectedIcon]);\n\n    const onColorChange = (color: string) => {\n        setColor(color);\n\n        if (isSimpleIcon(selectedIcon)) {\n            presenter.setIcon({ ...selectedIcon, color });\n        }\n    };\n\n    const onIconSelect = (icon: Icon) => {\n        // Set icon and assign current color.\n        presenter.setIcon({ ...icon, color });\n        presenter.closeMenu();\n    };\n\n    return (\n        <IconPickerTab\n            value={\"icon\"}\n            label={\"Icons\"}\n            onChange={onIconSelect}\n            cellDecorator={cell => <span style={{ color }}>{cell}</span>}\n            actions={<IconColorPicker color={color} onChange={onColorChange} />}\n        />\n    );\n});\n\nexport const SimpleIconPlugin = () => {\n    return (\n        <IconPickerConfig>\n            <IconPickerConfig.IconType name={\"icon\"}>\n                <IconPickerConfig.IconType.Icon element={<IconSvg />} />\n                <IconPickerConfig.IconType.Tab element={<IconTab />} />\n            </IconPickerConfig.IconType>\n        </IconPickerConfig>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,EAAEC,SAAS,QAAQ,OAAO;AAClD,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,eAAe,EAAEC,WAAW,QAAQ,kBAAkB;AAE/D,SAASC,OAAO,QAAQ,IAAI;AAC5B,SAASC,aAAa;AACtB,SAASC,aAAa;AACtB,SAASC,gBAAgB;;AAGzB;AACA;AACA;AACA;AACA;AACA;;AAMA,MAAMC,OAAO,GAAGA,CAAA,KAAM;EAClB,MAAM;IAAEC,IAAI;IAAEC;EAAK,CAAC,GAAGN,OAAO,CAAa,CAAC;EAE5C,oBACIN,KAAA,CAAAa,aAAA;IACIC,KAAK,EAAEF,IAAK;IACZG,MAAM,EAAEH,IAAK;IACbI,OAAO,EAAE,OAAOL,IAAI,CAACG,KAAK,IAAI,GAAG,MAAO;IACxCG,KAAK,EAAEN,IAAI,EAAEM,KAAK,IAAI,SAAU;IAChCC,uBAAuB,EAAE;MAAEC,MAAM,EAAER,IAAI,CAACS,KAAK,IAAI;IAAG,CAAE;IACtDC,KAAK,EAAE;MACHC,aAAa,EAAE,QAAQ;MACvBR,KAAK,EAAE,MAAM;MACbC,MAAM,EAAE;IACZ;EAAE,CACL,CAAC;AAEV,CAAC;AAOD,MAAMQ,eAAe,GAAGA,CAAC;EAAEN,KAAK;EAAEO;AAA+B,CAAC,KAAK;EACnE,oBACIxB,KAAA,CAAAa,aAAA,CAACT,eAAe;IAACgB,KAAK,EAAEH,KAAM;IAACO,QAAQ,EAAEA;EAAS,GAC7C,CAAC;IAAEJ,KAAK;IAAEI;EAAS,CAAC,kBACjBxB,KAAA,CAAAa,aAAA,CAACR,WAAW;IAACoB,KAAK,EAAE,KAAM;IAACL,KAAK,EAAEA,KAAM;IAACI,QAAQ,EAAEA;EAAS,CAAE,CAErD,CAAC;AAE1B,CAAC;;AAED;AACA;AACA;AACA,MAAME,YAAY,GAAIf,IAAiB,IAAyB;EAC5D,IAAI,CAACA,IAAI,EAAE;IACP,OAAO,KAAK;EAChB;EACA,OAAOA,IAAI,CAACgB,IAAI,KAAK,MAAM;AAC/B,CAAC;AAED,MAAMC,OAAO,GAAGzB,QAAQ,CAAC,MAAM;EAC3B,MAAM0B,SAAS,GAAGrB,aAAa,CAAC,CAAC;EACjC,MAAM;IAAEsB;EAAa,CAAC,GAAGD,SAAS,CAACE,EAAE;EAErC,MAAM,CAACd,KAAK,EAAEe,QAAQ,CAAC,GAAG/B,QAAQ,CAAC,SAAS,CAAC;EAE7CC,SAAS,CAAC,MAAM;IACZ,IAAIe,KAAK,KAAK,SAAS,IAAIS,YAAY,CAACI,YAAY,CAAC,EAAE;MACnDE,QAAQ,CAACF,YAAY,CAACb,KAAK,CAAC;IAChC;EACJ,CAAC,EAAE,CAACa,YAAY,CAAC,CAAC;EAElB,MAAMG,aAAa,GAAIhB,KAAa,IAAK;IACrCe,QAAQ,CAACf,KAAK,CAAC;IAEf,IAAIS,YAAY,CAACI,YAAY,CAAC,EAAE;MAC5BD,SAAS,CAACK,OAAO,CAAC;QAAE,GAAGJ,YAAY;QAAEb;MAAM,CAAC,CAAC;IACjD;EACJ,CAAC;EAED,MAAMkB,YAAY,GAAIxB,IAAU,IAAK;IACjC;IACAkB,SAAS,CAACK,OAAO,CAAC;MAAE,GAAGvB,IAAI;MAAEM;IAAM,CAAC,CAAC;IACrCY,SAAS,CAACO,SAAS,CAAC,CAAC;EACzB,CAAC;EAED,oBACIpC,KAAA,CAAAa,aAAA,CAACN,aAAa;IACVa,KAAK,EAAE,MAAO;IACdiB,KAAK,EAAE,OAAQ;IACfb,QAAQ,EAAEW,YAAa;IACvBG,aAAa,EAAEC,IAAI,iBAAIvC,KAAA,CAAAa,aAAA;MAAMQ,KAAK,EAAE;QAAEJ;MAAM;IAAE,GAAEsB,IAAW,CAAE;IAC7DC,OAAO,eAAExC,KAAA,CAAAa,aAAA,CAACU,eAAe;MAACN,KAAK,EAAEA,KAAM;MAACO,QAAQ,EAAES;IAAc,CAAE;EAAE,CACvE,CAAC;AAEV,CAAC,CAAC;AAEF,OAAO,MAAMQ,gBAAgB,GAAGA,CAAA,KAAM;EAClC,oBACIzC,KAAA,CAAAa,aAAA,CAACJ,gBAAgB,qBACbT,KAAA,CAAAa,aAAA,CAACJ,gBAAgB,CAACiC,QAAQ;IAACC,IAAI,EAAE;EAAO,gBACpC3C,KAAA,CAAAa,aAAA,CAACJ,gBAAgB,CAACiC,QAAQ,CAACE,IAAI;IAACC,OAAO,eAAE7C,KAAA,CAAAa,aAAA,CAACH,OAAO,MAAE;EAAE,CAAE,CAAC,eACxDV,KAAA,CAAAa,aAAA,CAACJ,gBAAgB,CAACiC,QAAQ,CAACI,GAAG;IAACD,OAAO,eAAE7C,KAAA,CAAAa,aAAA,CAACe,OAAO,MAAE;EAAE,CAAE,CAC/B,CACb,CAAC;AAE3B,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useState","useEffect","observer","DelayedOnChange","ColorPicker","useIcon","IconPickerTab","useIconPicker","IconPickerConfig","IconSvg","icon","size","createElement","width","height","viewBox","color","dangerouslySetInnerHTML","__html","value","style","verticalAlign","IconColorPicker","onChange","align","isSimpleIcon","type","IconTab","presenter","selectedIcon","vm","setColor","onColorChange","setIcon","onIconSelect","closeMenu","label","cellDecorator","cell","actions","SimpleIconPlugin","IconType","name","Icon","element","Tab"],"sources":["iconsPlugin.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { DelayedOnChange, ColorPicker } from \"@webiny/admin-ui\";\n\nimport { useIcon } from \"../index.js\";\nimport { IconPickerTab } from \"../IconPickerTab.js\";\nimport { useIconPicker } from \"../IconPickerPresenterProvider.js\";\nimport { IconPickerConfig } from \"../config/index.js\";\nimport type { Icon } from \"../types.js\";\n\n/**\n * NOTE: Avoid using `@emotion/styled` in icon renderer components across all plugins.\n * This is crucial for serializing component rendering into a string value as plain HTML,\n * which is necessary for usage in the website application. Please use inline styles here\n * to ensure proper serialization.\n */\n\ninterface SimpleIcon extends Icon {\n    color: string;\n}\n\nconst IconSvg = () => {\n    const { icon, size } = useIcon<SimpleIcon>();\n\n    return (\n        <svg\n            width={size}\n            height={size}\n            viewBox={`0 0 ${icon.width || 512} 512`}\n            color={icon?.color || \"inherit\"}\n            dangerouslySetInnerHTML={{ __html: icon.value || \"\" }}\n            style={{\n                verticalAlign: \"middle\",\n                width: \"100%\",\n                height: \"100%\"\n            }}\n        />\n    );\n};\n\ninterface IconColorPickerProps {\n    color: string;\n    onChange: (value: string) => void;\n}\n\nconst IconColorPicker = ({ color, onChange }: IconColorPickerProps) => {\n    return (\n        <DelayedOnChange value={color} onChange={onChange}>\n            {({ value, onChange }) => (\n                <ColorPicker align={\"end\"} value={value} onChange={onChange} />\n            )}\n        </DelayedOnChange>\n    );\n};\n\n/**\n * @see https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates\n */\nconst isSimpleIcon = (icon: Icon | null): icon is SimpleIcon => {\n    if (!icon) {\n        return false;\n    }\n    return icon.type === \"icon\";\n};\n\nconst IconTab = observer(() => {\n    const presenter = useIconPicker();\n    const { selectedIcon } = presenter.vm;\n\n    const [color, setColor] = useState(\"inherit\");\n\n    useEffect(() => {\n        if (color === \"inherit\" && isSimpleIcon(selectedIcon)) {\n            setColor(selectedIcon.color);\n        }\n    }, [selectedIcon]);\n\n    const onColorChange = (color: string) => {\n        setColor(color);\n\n        if (isSimpleIcon(selectedIcon)) {\n            presenter.setIcon({ ...selectedIcon, color });\n        }\n    };\n\n    const onIconSelect = (icon: Icon) => {\n        // Set icon and assign current color.\n        presenter.setIcon({ ...icon, color });\n        presenter.closeMenu();\n    };\n\n    return (\n        <IconPickerTab\n            value={\"icon\"}\n            label={\"Icons\"}\n            onChange={onIconSelect}\n            cellDecorator={cell => <span style={{ color }}>{cell}</span>}\n            actions={<IconColorPicker color={color} onChange={onColorChange} />}\n        />\n    );\n});\n\nexport const SimpleIconPlugin = () => {\n    return (\n        <IconPickerConfig>\n            <IconPickerConfig.IconType name={\"icon\"}>\n                <IconPickerConfig.IconType.Icon element={<IconSvg />} />\n                <IconPickerConfig.IconType.Tab element={<IconTab />} />\n            </IconPickerConfig.IconType>\n        </IconPickerConfig>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/components/IconPicker/types.js.map

@@ -1 +1 @@
-{"version":3,"names":["ICON_PICKER_SIZE"],"sources":["types.ts"],"sourcesContent":["/**\n * We want to have an abstract type, which does not define specifics of each possible icon (like color or skin tone).\n */\nexport type Icon = {\n    // eslint-disable-next-line @typescript-eslint/ban-types\n    type: \"icon\" | \"emoji\" | \"custom\" | (string & {});\n    name: string;\n    value?: string;\n    [key: string]: any;\n};\n\ntype IconsRow = {\n    type: \"icons\";\n    icons: Icon[];\n};\n\ntype CategoryNameRow = {\n    type: \"category-name\";\n    name: string;\n};\n\nexport type IconPickerGridRow = IconsRow | CategoryNameRow;\n\nexport enum ICON_PICKER_SIZE {\n    SMALL = \"sm\"\n}\n"],"mappings":"AAAA;AACA;AACA;;AAqBA,WAAYA,gBAAgB,0BAAhBA,gBAAgB;EAAhBA,gBAAgB;EAAA,OAAhBA,gBAAgB;AAAA","ignoreList":[]}
+{"version":3,"names":["ICON_PICKER_SIZE"],"sources":["types.ts"],"sourcesContent":["/**\n * We want to have an abstract type, which does not define specifics of each possible icon (like color or skin tone).\n */\nexport type Icon = {\n    type: \"icon\" | \"emoji\" | \"custom\" | (string & {});\n    name: string;\n    value?: string;\n    [key: string]: any;\n};\n\ntype IconsRow = {\n    type: \"icons\";\n    icons: Icon[];\n};\n\ntype CategoryNameRow = {\n    type: \"category-name\";\n    name: string;\n};\n\nexport type IconPickerGridRow = IconsRow | CategoryNameRow;\n\nexport enum ICON_PICKER_SIZE {\n    SMALL = \"sm\"\n}\n"],"mappings":"AAAA;AACA;AACA;;AAoBA,WAAYA,gBAAgB,0BAAhBA,gBAAgB;EAAhBA,gBAAgB;EAAA,OAAhBA,gBAAgB;AAAA","ignoreList":[]}

package/components/LexicalEditor/LexicalEditor.d.ts

@@ -1,8 +1,12 @@
 import React from "react";
-import type { RichTextEditorProps } from "@webiny/lexical-editor/types";
-import type { EditorTheme } from "@webiny/lexical-theme";
-interface LexicalEditorProps extends Omit<RichTextEditorProps, "theme"> {
-    theme?: Partial<EditorTheme>;
+import type { RichTextEditorProps } from "@webiny/lexical-editor/types.js";
+import { type RichTextValueWithHtml } from "./lexicalValueWithHtml.js";
+export interface LexicalEditorProps extends Omit<RichTextEditorProps, "value" | "onChange" | "theme"> {
+    value?: RichTextValueWithHtml;
+    onChange?: (value: RichTextValueWithHtml) => void;
+    theme?: RichTextEditorProps["theme"];
 }
 export declare const LexicalEditor: (props: LexicalEditorProps) => React.JSX.Element;
-export {};
+export declare namespace LexicalEditor {
+    type Props = LexicalEditorProps;
+}

package/components/LexicalEditor/LexicalEditor.js

@@ -1,29 +1,40 @@
-import React from "react";
-import { FileManager } from "./..";
+import React, { useMemo, useRef } from "react";
+import { FileManager } from "../index.js";
 import { RichTextEditor as BaseEditor } from "@webiny/lexical-editor";
-import { useTheme } from "@webiny/app-theme";
+import { DelayedOnChange } from "@webiny/admin-ui";
+import { useAdminConfig } from "../../config/AdminConfig.js";
+import { lexicalValueWithHtml } from "./lexicalValueWithHtml.js";
 const imagesOnly = ["image/*"];
+const noop = () => {};
 export const LexicalEditor = props => {
   const {
-    theme
-  } = useTheme();
-  const editorTheme = {
-    styles: {},
-    emotionMap: {},
-    ...theme,
-    ...(props.theme || {})
-  };
+    lexicalTheme
+  } = useAdminConfig();
+  const configRef = useRef(undefined);
+  const onChange = useMemo(() => {
+    return lexicalValueWithHtml(configRef, props.onChange ?? noop);
+  }, [props.onChange]);
   return /*#__PURE__*/React.createElement(FileManager, {
-    accept: imagesOnly
-  }, ({
-    showFileManager
-  }) => /*#__PURE__*/React.createElement(BaseEditor, Object.assign({}, props, {
-    theme: editorTheme,
-    toolbarActionPlugins: [...(props.toolbarActionPlugins || []), {
-      targetAction: "image-action",
-      plugin: showFileManager
-    }]
-  })));
+    accept: imagesOnly,
+    render: ({
+      showFileManager
+    }) => /*#__PURE__*/React.createElement(DelayedOnChange, {
+      value: props.value?.state,
+      onChange: onChange
+    }, ({
+      value,
+      onChange
+    }) => /*#__PURE__*/React.createElement(BaseEditor, Object.assign({}, props, {
+      value: value,
+      onChange: onChange,
+      theme: props.theme ?? lexicalTheme,
+      configRef: configRef,
+      toolbarActionPlugins: [...(props.toolbarActionPlugins || []), {
+        targetAction: "image-action",
+        plugin: showFileManager
+      }]
+    })))
+  });
 };
 
 //# sourceMappingURL=LexicalEditor.js.map

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","useMemo","useRef","FileManager","RichTextEditor","BaseEditor","DelayedOnChange","useAdminConfig","lexicalValueWithHtml","imagesOnly","noop","LexicalEditor","props","lexicalTheme","configRef","undefined","onChange","createElement","accept","render","showFileManager","value","state","Object","assign","theme","toolbarActionPlugins","targetAction","plugin"],"sources":["LexicalEditor.tsx"],"sourcesContent":["import React, { 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\";\n\nexport interface LexicalEditorProps\n    extends Omit<RichTextEditorProps, \"value\" | \"onChange\" | \"theme\"> {\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    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,OAAO,EAAEC,MAAM,QAAQ,OAAO;AAC9C,SAASC,WAAW;AACpB,SAASC,cAAc,IAAIC,UAAU,QAAQ,wBAAwB;AAErE,SAASC,eAAe,QAAQ,kBAAkB;AAClD,SAASC,cAAc;AACvB,SAASC,oBAAoB;AAS7B,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,GAAGN,cAAc,CAAC,CAAC;EACzC,MAAMO,SAAS,GAAGZ,MAAM,CAAuCa,SAAS,CAAC;EAEzE,MAAMC,QAAQ,GAAGf,OAAO,CAAC,MAAM;IAC3B,OAAOO,oBAAoB,CAACM,SAAS,EAAEF,KAAK,CAACI,QAAQ,IAAIN,IAAI,CAAC;EAClE,CAAC,EAAE,CAACE,KAAK,CAACI,QAAQ,CAAC,CAAC;EAEpB,oBACIhB,KAAA,CAAAiB,aAAA,CAACd,WAAW;IACRe,MAAM,EAAET,UAAW;IACnBU,MAAM,EAAEA,CAAC;MAAEC;IAAgB,CAAC,kBACxBpB,KAAA,CAAAiB,aAAA,CAACX,eAAe;MAACe,KAAK,EAAET,KAAK,CAACS,KAAK,EAAEC,KAAM;MAACN,QAAQ,EAAEA;IAAS,GAC1D,CAAC;MAAEK,KAAK;MAAEL;IAAS,CAAC,kBACjBhB,KAAA,CAAAiB,aAAA,CAACZ,UAAU,EAAAkB,MAAA,CAAAC,MAAA,KACHZ,KAAK;MACTS,KAAK,EAAEA,KAAM;MACbL,QAAQ,EAAEA,QAAS;MACnBS,KAAK,EAAEb,KAAK,CAACa,KAAK,IAAIZ,YAAa;MACnCC,SAAS,EAAEA,SAAU;MACrBY,oBAAoB,EAAE,CAClB,IAAId,KAAK,CAACc,oBAAoB,IAAI,EAAE,CAAC,EACrC;QAAEC,YAAY,EAAE,cAAc;QAAEC,MAAM,EAAER;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,92 @@
+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 => (inputRef.current = ref)}\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":"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","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/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/NavigationPrompt.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+interface NavigationPromptProps {
+    when: boolean | (() => boolean);
+    message: React.ReactNode;
+    confirmLabel?: string;
+    cancelLabel?: string;
+}
+export declare const NavigationPrompt: (({ when, message, confirmLabel, cancelLabel }: NavigationPromptProps) => null) & {
+    original: ({ when, message, confirmLabel, cancelLabel }: NavigationPromptProps) => null;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ when, message, confirmLabel, cancelLabel }: NavigationPromptProps) => null) & {
+        original: ({ when, message, confirmLabel, cancelLabel }: NavigationPromptProps) => null;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/app").ComponentDecorator<(({ when, message, confirmLabel, cancelLabel }: NavigationPromptProps) => null) & {
+        original: ({ when, message, confirmLabel, cancelLabel }: NavigationPromptProps) => null;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export {};

package/components/NavigationPrompt.js

@@ -0,0 +1,39 @@
+import { useEffect, useRef } from "react";
+import { useRouter } from "@webiny/app";
+import { makeDecoratable } from "@webiny/react-composition";
+import { useDialogs } from "./Dialogs/useDialogs.js";
+export const NavigationPrompt = makeDecoratable("NavigationPrompt", ({
+  when,
+  message,
+  confirmLabel,
+  cancelLabel
+}) => {
+  const whenRef = useRef(when);
+  const router = useRouter();
+  const dialogs = useDialogs();
+
+  // Update the ref synchronously on every render to ensure we always have the latest value
+  whenRef.current = when;
+  useEffect(() => {
+    router.onRouteExit(transition => {
+      const condition = whenRef.current;
+      const shouldConfirm = typeof condition === "function" ? condition() : condition;
+      if (shouldConfirm) {
+        dialogs.showDialog({
+          title: "Confirm Navigation",
+          content: message,
+          acceptLabel: confirmLabel ?? "Yes!",
+          cancelLabel: cancelLabel ?? "No, stay here.",
+          onAccept: () => {
+            transition.continue();
+          }
+        });
+      } else {
+        transition.continue();
+      }
+    });
+  }, []);
+  return null;
+});
+
+//# sourceMappingURL=NavigationPrompt.js.map

package/components/NavigationPrompt.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useRef","useRouter","makeDecoratable","useDialogs","NavigationPrompt","when","message","confirmLabel","cancelLabel","whenRef","router","dialogs","current","onRouteExit","transition","condition","shouldConfirm","showDialog","title","content","acceptLabel","onAccept","continue"],"sources":["NavigationPrompt.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\nimport { useRouter } from \"@webiny/app\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\nimport { useDialogs } from \"~/components/Dialogs/useDialogs.js\";\n\ninterface NavigationPromptProps {\n    when: boolean | (() => boolean);\n    message: React.ReactNode;\n    confirmLabel?: string;\n    cancelLabel?: string;\n}\n\nexport const NavigationPrompt = makeDecoratable(\n    \"NavigationPrompt\",\n    ({ when, message, confirmLabel, cancelLabel }: NavigationPromptProps) => {\n        const whenRef = useRef(when);\n        const router = useRouter();\n        const dialogs = useDialogs();\n\n        // Update the ref synchronously on every render to ensure we always have the latest value\n        whenRef.current = when;\n\n        useEffect(() => {\n            router.onRouteExit(transition => {\n                const condition = whenRef.current;\n                const shouldConfirm = typeof condition === \"function\" ? condition() : condition;\n\n                if (shouldConfirm) {\n                    dialogs.showDialog({\n                        title: \"Confirm Navigation\",\n                        content: message,\n                        acceptLabel: confirmLabel ?? \"Yes!\",\n                        cancelLabel: cancelLabel ?? \"No, stay here.\",\n                        onAccept: () => {\n                            transition.continue();\n                        }\n                    });\n                } else {\n                    transition.continue();\n                }\n            });\n        }, []);\n\n        return null;\n    }\n);\n"],"mappings":"AAAA,SAAgBA,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAChD,SAASC,SAAS,QAAQ,aAAa;AACvC,SAASC,eAAe,QAAQ,2BAA2B;AAC3D,SAASC,UAAU;AASnB,OAAO,MAAMC,gBAAgB,GAAGF,eAAe,CAC3C,kBAAkB,EAClB,CAAC;EAAEG,IAAI;EAAEC,OAAO;EAAEC,YAAY;EAAEC;AAAmC,CAAC,KAAK;EACrE,MAAMC,OAAO,GAAGT,MAAM,CAACK,IAAI,CAAC;EAC5B,MAAMK,MAAM,GAAGT,SAAS,CAAC,CAAC;EAC1B,MAAMU,OAAO,GAAGR,UAAU,CAAC,CAAC;;EAE5B;EACAM,OAAO,CAACG,OAAO,GAAGP,IAAI;EAEtBN,SAAS,CAAC,MAAM;IACZW,MAAM,CAACG,WAAW,CAACC,UAAU,IAAI;MAC7B,MAAMC,SAAS,GAAGN,OAAO,CAACG,OAAO;MACjC,MAAMI,aAAa,GAAG,OAAOD,SAAS,KAAK,UAAU,GAAGA,SAAS,CAAC,CAAC,GAAGA,SAAS;MAE/E,IAAIC,aAAa,EAAE;QACfL,OAAO,CAACM,UAAU,CAAC;UACfC,KAAK,EAAE,oBAAoB;UAC3BC,OAAO,EAAEb,OAAO;UAChBc,WAAW,EAAEb,YAAY,IAAI,MAAM;UACnCC,WAAW,EAAEA,WAAW,IAAI,gBAAgB;UAC5Ca,QAAQ,EAAEA,CAAA,KAAM;YACZP,UAAU,CAACQ,QAAQ,CAAC,CAAC;UACzB;QACJ,CAAC,CAAC;MACN,CAAC,MAAM;QACHR,UAAU,CAACQ,QAAQ,CAAC,CAAC;MACzB;IACJ,CAAC,CAAC;EACN,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO,IAAI;AACf,CACJ,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