@squiz/formatted-text-editor 2.3.0 → 2.5.0

package/lib/index.d.ts

@@ -0,0 +1,8 @@
+import Editor from './Editor/Editor';
+import { EditorContext } from './Editor/EditorContext';
+import { remirrorNodeToSquizNode } from './utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode';
+import { squizNodeToRemirrorNode } from './utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode';
+import { htmlToSquizNode } from './utils/converters/htmlToSquizNode/htmlToSquizNode';
+import { ResolveNodeType, ResolveNodeToUrl } from './types';
+export { Editor, EditorContext, remirrorNodeToSquizNode, squizNodeToRemirrorNode, htmlToSquizNode };
+export type { ResolveNodeType, ResolveNodeToUrl };

package/lib/index.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.htmlToSquizNode = exports.squizNodeToRemirrorNode = exports.remirrorNodeToSquizNode = exports.EditorContext = exports.Editor = void 0;
+const Editor_1 = __importDefault(require("./Editor/Editor"));
+exports.Editor = Editor_1.default;
+const EditorContext_1 = require("./Editor/EditorContext");
+Object.defineProperty(exports, "EditorContext", { enumerable: true, get: function () { return EditorContext_1.EditorContext; } });
+const remirrorNodeToSquizNode_1 = require("./utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode");
+Object.defineProperty(exports, "remirrorNodeToSquizNode", { enumerable: true, get: function () { return remirrorNodeToSquizNode_1.remirrorNodeToSquizNode; } });
+const squizNodeToRemirrorNode_1 = require("./utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode");
+Object.defineProperty(exports, "squizNodeToRemirrorNode", { enumerable: true, get: function () { return squizNodeToRemirrorNode_1.squizNodeToRemirrorNode; } });
+const htmlToSquizNode_1 = require("./utils/converters/htmlToSquizNode/htmlToSquizNode");
+Object.defineProperty(exports, "htmlToSquizNode", { enumerable: true, get: function () { return htmlToSquizNode_1.htmlToSquizNode; } });

package/lib/types.d.ts

@@ -0,0 +1,7 @@
+export type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends Array<infer U> ? Array<DeepPartial<U>> : T[P] extends ReadonlyArray<infer U> ? ReadonlyArray<DeepPartial<U>> : DeepPartial<T[P]>;
+};
+export type ResolveNodeType = {
+    [attr: string]: any;
+};
+export type ResolveNodeToUrl = (node: ResolveNodeType) => Promise<string>;

package/lib/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/ui/Button/Button.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactElement } from 'react';
+type ButtonProps = {
+    handleOnClick: () => void;
+    isDisabled?: boolean;
+    isActive: boolean;
+    label: string;
+    text?: string;
+    icon?: ReactElement;
+    className?: string;
+};
+declare const Button: ({ handleOnClick, isDisabled, isActive, label, text, icon, className }: ButtonProps) => React.JSX.Element;
+export default Button;

package/lib/ui/Button/Button.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const clsx_1 = __importDefault(require("clsx"));
+const Button = ({ handleOnClick, isDisabled, isActive, label, text, icon, className }) => {
+    return (react_1.default.createElement("button", { "aria-label": label, title: label, type: "button", onClick: handleOnClick, disabled: isDisabled, className: (0, clsx_1.default)('squiz-fte-btn', isActive && 'squiz-fte-btn--is-active', icon && ' squiz-fte-btn--is-icon', className) },
+        text && react_1.default.createElement("span", null, text),
+        icon && icon));
+};
+exports.default = Button;

package/lib/ui/CollapseBox/CollapseBox.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { NodeViewComponentProps } from '@remirror/react';
+export interface CollapseBoxProps {
+    node: NodeViewComponentProps['node'];
+}
+declare const CollapseBox: React.FC<CollapseBoxProps>;
+export default CollapseBox;

package/lib/ui/CollapseBox/CollapseBox.js

@@ -0,0 +1,48 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const MotionPhotosOffOutlined_1 = __importDefault(require("@mui/icons-material/MotionPhotosOffOutlined"));
+const UnfoldLessOutlined_1 = __importDefault(require("@mui/icons-material/UnfoldLessOutlined"));
+const UnfoldMoreOutlined_1 = __importDefault(require("@mui/icons-material/UnfoldMoreOutlined"));
+const CollapseBox = ({ node }) => {
+    const [isVisible, setIsVisible] = (0, react_1.useState)(true);
+    const label = 'This section cannot be displayed here due to unsupported HTML elements. The front-end view of your page won’t be affected.';
+    const errorMessage = node?.attrs?.errorMessage;
+    const errorNode = JSON.stringify(node?.attrs?.originalNode, null, 3);
+    return (react_1.default.createElement("div", { className: "collapse-box", suppressContentEditableWarning: true, contentEditable: false },
+        react_1.default.createElement("button", { className: "collapse-box__header", onClick: () => setIsVisible(!isVisible), type: 'button' },
+            react_1.default.createElement(MotionPhotosOffOutlined_1.default, { className: "collapse-box__icon--warning" }),
+            react_1.default.createElement("div", { className: "collapse-box__label" }, label),
+            isVisible ? react_1.default.createElement(UnfoldLessOutlined_1.default, null) : react_1.default.createElement(UnfoldMoreOutlined_1.default, null)),
+        react_1.default.createElement("div", { className: "collapse-box__content", hidden: isVisible, "data-testid": "content" },
+            errorMessage,
+            react_1.default.createElement("br", null),
+            errorNode)));
+};
+exports.default = CollapseBox;

package/lib/ui/EditorInput/EditorInput.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { EditorInputProps } from './EditorInput.props';
+export declare const EditorInput: ({ container, ...other }: EditorInputProps) => React.JSX.Element;

package/lib/ui/EditorInput/EditorInput.js

@@ -0,0 +1,49 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditorInput = void 0;
+const react_1 = require("@remirror/react");
+const react_2 = __importStar(require("react"));
+const react_dom_1 = require("react-dom");
+const EditorInput = ({ container, ...other }) => {
+    const { getRootProps } = (0, react_1.useRemirrorContext)();
+    const { key, ...rootProps } = getRootProps();
+    const preventImagePaste = (0, react_2.useCallback)((event) => {
+        const { clipboardData } = event;
+        const pastedData = clipboardData?.files[0];
+        if (pastedData?.type &&
+            pastedData?.type.startsWith('image/') &&
+            // Still allow paste of any text that came through (Word, etc)
+            !clipboardData?.types.includes('text/plain')) {
+            event.preventDefault();
+        }
+        // Allow other paste event handlers to be run.
+        return false;
+    }, []);
+    const input = react_2.default.createElement("div", { key: key, ...rootProps, ...other });
+    (0, react_1.useEditorEvent)('paste', preventImagePaste);
+    return container ? (0, react_dom_1.createPortal)(input, container) : input;
+};
+exports.EditorInput = EditorInput;

package/lib/ui/EditorInput/EditorInput.props.d.ts

@@ -0,0 +1,4 @@
+import { HTMLAttributes } from 'react';
+export type EditorInputProps = HTMLAttributes<HTMLDivElement> & {
+    container?: Element | null;
+};

package/lib/ui/EditorInput/EditorInput.props.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/ui/Fields/Checkbox/Checkbox.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export type CheckboxProps<TChecked, TUnchecked> = {
+    label: string;
+    onChange: (value: TChecked | TUnchecked) => void;
+    defaultChecked?: boolean;
+    unchecked: TUnchecked;
+    checked: TChecked;
+};
+export declare const Checkbox: <TChecked, TUnchecked>({ label, onChange, defaultChecked, unchecked, checked, }: CheckboxProps<TChecked, TUnchecked>) => React.JSX.Element;

package/lib/ui/Fields/Checkbox/Checkbox.js

@@ -0,0 +1,47 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = void 0;
+const react_1 = __importStar(require("react"));
+const CheckRounded_1 = __importDefault(require("@mui/icons-material/CheckRounded"));
+const Checkbox = ({ label, onChange, defaultChecked = false, unchecked, checked, }) => {
+    const [toggled, setToggled] = (0, react_1.useState)(defaultChecked);
+    (0, react_1.useEffect)(() => {
+        if (toggled) {
+            onChange(checked);
+        }
+        else {
+            onChange(unchecked);
+        }
+    }, [toggled]);
+    const toggleCheckbox = () => setToggled(!toggled);
+    return (react_1.default.createElement("div", { className: "squiz-fte-checkbox" },
+        react_1.default.createElement("button", { type: "button", role: "checkbox", "aria-label": label, "aria-checked": toggled, className: "checkbox", onClick: toggleCheckbox }, toggled && react_1.default.createElement(CheckRounded_1.default, null)),
+        react_1.default.createElement("button", { type: "button", className: "label", onClick: toggleCheckbox, tabIndex: -1 }, label)));
+};
+exports.Checkbox = Checkbox;

package/lib/ui/Fields/Input/Input.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { InputContainerProps } from '../InputContainer/InputContainer';
+export declare const Input: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & Omit<InputContainerProps, "children"> & React.RefAttributes<HTMLInputElement>>;

package/lib/ui/Fields/Input/Input.js

@@ -0,0 +1,33 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = void 0;
+const react_1 = __importStar(require("react"));
+const InputContainer_1 = require("../InputContainer/InputContainer");
+const InputInternal = ({ name, label, type = 'text', error, required, ...rest }, ref) => {
+    return (react_1.default.createElement(InputContainer_1.InputContainer, { name: name, label: label, error: error, required: required },
+        react_1.default.createElement("input", { ref: ref, id: name, name: name, type: type, "aria-invalid": !!error, className: "squiz-fte-form-control", ...rest })));
+};
+exports.Input = (0, react_1.forwardRef)(InputInternal);

package/lib/ui/Fields/InputContainer/InputContainer.d.ts

@@ -0,0 +1,9 @@
+import React, { ReactNode } from 'react';
+export type InputContainerProps = {
+    name?: string;
+    label?: string;
+    error?: string;
+    required?: boolean;
+    children: ReactNode;
+};
+export declare const InputContainer: ({ name, label, error, required, children }: InputContainerProps) => React.JSX.Element;

package/lib/ui/Fields/InputContainer/InputContainer.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputContainer = void 0;
+const react_1 = __importDefault(require("react"));
+const clsx_1 = __importDefault(require("clsx"));
+const InputContainer = ({ name, label, error, required, children }) => {
+    return (react_1.default.createElement("div", { className: (0, clsx_1.default)(error && 'squiz-fte-invalid-form-field') },
+        label && (react_1.default.createElement("label", { htmlFor: name, className: "squiz-fte-form-label" }, label)),
+        label && required && (react_1.default.createElement("span", { className: "text-gray-600", "aria-label": "Required field" }, "*")),
+        children,
+        error && react_1.default.createElement("div", { className: "squiz-fte-form-error" }, error)));
+};
+exports.InputContainer = InputContainer;

package/lib/ui/Fields/MatrixAsset/MatrixAsset.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { InputContainerProps } from '../InputContainer/InputContainer';
+type MatrixAssetValue = {
+    matrixIdentifier?: string;
+    matrixAssetId?: string;
+    url?: string;
+};
+export type MatrixAssetProps<T extends MatrixAssetValue> = Omit<InputContainerProps, 'children'> & {
+    modalTitle: string;
+    allowedTypes?: string[];
+    value?: T | null;
+    onChange: (value: {
+        target: {
+            value: T;
+        };
+    }) => void;
+};
+export declare const MatrixAsset: <T extends MatrixAssetValue>({ modalTitle, allowedTypes, value, onChange, ...props }: MatrixAssetProps<T>) => React.JSX.Element;
+export {};

package/lib/ui/Fields/MatrixAsset/MatrixAsset.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MatrixAsset = void 0;
+const react_1 = __importDefault(require("react"));
+const resource_browser_1 = require("@squiz/resource-browser");
+const InputContainer_1 = require("../InputContainer/InputContainer");
+const MatrixAsset = ({ modalTitle, allowedTypes, value, onChange, ...props }) => {
+    return (react_1.default.createElement(InputContainer_1.InputContainer, { ...props },
+        react_1.default.createElement(resource_browser_1.ResourceBrowser, { modalTitle: modalTitle, allowedTypes: allowedTypes, value: value && value.matrixIdentifier && value.matrixAssetId
+                ? {
+                    sourceId: value.matrixIdentifier,
+                    resourceId: value.matrixAssetId,
+                }
+                : null, onChange: (resource) => {
+                onChange({
+                    target: {
+                        value: {
+                            ...value,
+                            matrixIdentifier: resource?.source?.id,
+                            matrixAssetId: resource?.id,
+                            url: resource?.url,
+                        },
+                    },
+                });
+            } })));
+};
+exports.MatrixAsset = MatrixAsset;

package/lib/ui/Fields/ResourceBrowserSelector/ResourceBrowserSelector.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { InputContainerProps } from '../InputContainer/InputContainer';
+import { NodeName } from '../../../Extensions/Extensions';
+type MatrixAsset = {
+    matrixIdentifier?: string;
+    matrixAssetId?: string;
+};
+type DAMAsset = {
+    damSystemIdentifier?: string;
+    damObjectId?: string;
+    damSystemType?: string;
+};
+type ResourceBrowserSelectorValue = MatrixAsset & DAMAsset & {
+    nodeType?: NodeName;
+    url?: string;
+};
+export type ResourceBrowserSelectorProps<T extends ResourceBrowserSelectorValue> = Omit<InputContainerProps, 'children'> & {
+    modalTitle: string;
+    allowedTypes?: string[];
+    value?: T | null;
+    onChange: (value: {
+        target: {
+            value: T;
+        };
+    }) => void;
+};
+export declare const ResourceBrowserSelector: <T extends ResourceBrowserSelectorValue>({ modalTitle, allowedTypes, value, onChange, ...props }: ResourceBrowserSelectorProps<T>) => React.JSX.Element;
+export {};

package/lib/ui/Fields/ResourceBrowserSelector/ResourceBrowserSelector.js

@@ -0,0 +1,88 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResourceBrowserSelector = void 0;
+const react_1 = __importStar(require("react"));
+const resource_browser_1 = require("@squiz/resource-browser");
+const InputContainer_1 = require("../InputContainer/InputContainer");
+const Extensions_1 = require("../../../Extensions/Extensions");
+const ResourceBrowserSelector = ({ modalTitle, allowedTypes, value, onChange, ...props }) => {
+    const convertFormDataToResourceBrowserValue = (0, react_1.useCallback)((value) => {
+        if (value?.matrixIdentifier && value?.matrixAssetId) {
+            return {
+                sourceId: value.matrixIdentifier,
+                resourceId: value.matrixAssetId,
+            };
+        }
+        else if (value?.damSystemIdentifier && value?.damObjectId) {
+            return {
+                sourceId: value.damSystemIdentifier,
+                resourceId: value.damObjectId,
+            };
+        }
+        return null;
+    }, []);
+    const handleResourceChange = (0, react_1.useCallback)((resource) => {
+        // Clear out any key properties for clear resource use case
+        let onChangeData = {
+            ...value,
+            matrixIdentifier: undefined,
+            matrixAssetId: undefined,
+            damSystemIdentifier: undefined,
+            damObjectId: undefined,
+            damSystemType: undefined,
+            url: undefined,
+        };
+        if (resource?.source?.type === 'matrix') {
+            onChangeData = {
+                ...value,
+                matrixIdentifier: resource?.source?.id,
+                matrixAssetId: resource?.id,
+                url: resource?.url,
+                nodeType: Extensions_1.NodeName.AssetImage,
+            };
+        }
+        else if (resource?.source?.type === 'dam') {
+            onChangeData = {
+                ...value,
+                damSystemIdentifier: resource?.source?.id,
+                damObjectId: resource?.id,
+                damSystemType: (resource?.source).configuration.externalType,
+                url: resource?.url,
+                nodeType: Extensions_1.NodeName.DAMImage,
+            };
+        }
+        onChange({
+            target: {
+                value: {
+                    ...onChangeData,
+                },
+            },
+        });
+    }, []);
+    return (react_1.default.createElement(InputContainer_1.InputContainer, { ...props },
+        react_1.default.createElement(resource_browser_1.ResourceBrowser, { modalTitle: modalTitle, allowedTypes: allowedTypes, value: convertFormDataToResourceBrowserValue(value), onChange: handleResourceChange })));
+};
+exports.ResourceBrowserSelector = ResourceBrowserSelector;

package/lib/ui/Modal/FormModal.d.ts

@@ -0,0 +1,5 @@
+import { ReactElement } from 'react';
+import { ModalProps } from './Modal';
+type FormModalProps = Omit<ModalProps, 'onSubmit'>;
+declare const FormModal: (props: FormModalProps) => ReactElement;
+export default FormModal;

package/lib/ui/Modal/FormModal.js

@@ -0,0 +1,39 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const Modal_1 = __importDefault(require("./Modal"));
+const FormModal = (props) => {
+    const ref = (0, react_1.createRef)();
+    const handleSubmit = () => {
+        const form = ref.current?.querySelector('form');
+        form?.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
+    };
+    return react_1.default.createElement(Modal_1.default, { ref: ref, ...props, onSubmit: handleSubmit });
+};
+exports.default = FormModal;

package/lib/ui/Modal/Modal.d.ts

@@ -0,0 +1,11 @@
+import React, { ReactElement } from 'react';
+export type ModalProps = {
+    title: string;
+    icon: ReactElement;
+    children: ReactElement;
+    onCancel: () => void;
+    onSubmit?: () => void;
+    className?: string;
+};
+declare const _default: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/lib/ui/Modal/Modal.js

@@ -0,0 +1,79 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_dom_1 = require("react-dom");
+const CloseRounded_1 = __importDefault(require("@mui/icons-material/CloseRounded"));
+const base_1 = require("@mui/base");
+const clsx_1 = __importDefault(require("clsx"));
+const Modal = ({ children, title, icon, onCancel, onSubmit, className }, ref) => {
+    const content = (0, react_1.useRef)(null);
+    const container = (0, react_1.useMemo)(() => {
+        const element = document.createElement('div');
+        element.classList.add('squiz-fte-scope');
+        return element;
+    }, []);
+    const keydown = (e) => {
+        if (e.key === 'Escape') {
+            onCancel();
+        }
+        if (e.key === 'Enter') {
+            onSubmit && onSubmit();
+        }
+    };
+    // register key listeners for Enter/Escape on key up so the editor doesn't handle the event as well
+    (0, react_1.useEffect)(() => {
+        window.addEventListener('keydown', keydown);
+        return () => window.removeEventListener('keydown', keydown);
+    }, []);
+    // add/remove the modal container from the DOM and focus on the first input
+    (0, react_1.useEffect)(() => {
+        const firstInput = content.current?.querySelector('input:not([type=hidden]), button');
+        document.body.appendChild(container);
+        firstInput?.focus();
+        return () => {
+            document.body.removeChild(container);
+        };
+    }, [container]);
+    return (0, react_dom_1.createPortal)(react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(base_1.FocusTrap, { open: true },
+            react_1.default.createElement("div", { ref: ref, className: (0, clsx_1.default)('squiz-fte-modal-wrapper', className), tabIndex: -1 },
+                react_1.default.createElement("div", { className: "w-modal-sm my-6 mx-auto" },
+                    react_1.default.createElement("div", { className: "squiz-fte-modal" },
+                        react_1.default.createElement("div", { className: "squiz-fte-modal-header p-6 pb-4" },
+                            react_1.default.createElement("div", { className: "squiz-fte-modal-header-icon mr-1.5 mt-[-1px]" }, icon),
+                            react_1.default.createElement("h2", { className: "font-semibold text-gray-900 text-heading-2" }, title),
+                            react_1.default.createElement("button", { type: "button", className: "ml-auto -mr-3 -mt-3 bg-transparent border-0 text-gray-600 font-semibold outline-none focus:outline-none hover:text-color-gray-800", onClick: onCancel, "aria-label": "Close" },
+                                react_1.default.createElement(CloseRounded_1.default, null))),
+                        react_1.default.createElement("div", { className: "squiz-fte-modal-content", ref: content }, children),
+                        react_1.default.createElement("div", { className: "squiz-fte-modal-footer p-6 pt-3" },
+                            react_1.default.createElement("button", { className: "squiz-fte-modal-footer__button bg-gray-200 text-gray-700 mr-2 hover:bg-gray-300", type: "button", onClick: onCancel, "aria-label": "Cancel" }, "Cancel"),
+                            onSubmit && (react_1.default.createElement("button", { className: "squiz-fte-modal-footer__button bg-blue-300 text-white hover:bg-blue-400", type: "button", onClick: onSubmit, "aria-label": "Apply" }, "Apply"))))))),
+        react_1.default.createElement("div", { className: "opacity-25 fixed inset-0 z-40 bg-black" })), container);
+};
+exports.default = (0, react_1.forwardRef)(Modal);

package/lib/ui/Tabs/Tabs.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export type TabOptions = Record<string, TabOption>;
+export type TabOption = {
+    label: string;
+};
+export type TabsProps = {
+    value: string;
+    options: TabOptions;
+    onChange?: (value: string) => void;
+};
+export declare const Tabs: ({ value, options, onChange }: TabsProps) => React.JSX.Element;