@quadrats/react 1.1.8 → 1.1.9

package/carousel/toolbar/useCarouselTool.js

@@ -0,0 +1,32 @@
+import { useEffect } from 'react';
+import { useSlateStatic, useModal } from '@quadrats/react';
+
+function useCarouselTool(controller) {
+    const editor = useSlateStatic();
+    const { setCarouselModalConfig, isModalClosed, setIsModalClosed } = useModal();
+    useEffect(() => {
+        if (isModalClosed) {
+            setTimeout(() => {
+                controller.removeCarouselPlaceholder(editor);
+                setIsModalClosed(false);
+            }, 250);
+        }
+    }, [controller, editor, isModalClosed, setIsModalClosed]);
+    return {
+        onClick: () => {
+            controller.insertCarouselPlaceholder(editor);
+            setCarouselModalConfig({
+                controller,
+                onConfirm: (items) => {
+                    controller.insertCarousel({
+                        editor,
+                        items,
+                    });
+                    controller.removeCarouselPlaceholder(editor);
+                },
+            });
+        },
+    };
+}
+
+export { useCarouselTool };

package/carousel/typings.d.ts

@@ -0,0 +1,27 @@
+import { Dispatch, SetStateAction } from 'react';
+import { Carousel, CarouselElement, CarouselImagesElement, CarouselCaptionElement, CarouselPlaceholderElement, CarouselTypeKey, CarouselImagesTypeKey, CarouselCaptionTypeKey } from '@quadrats/common/carousel';
+import { RenderElementProps, Editor, WithCreateRenderElement, Handlers, ConfirmModalConfig } from '@quadrats/react';
+import { LocaleDefinition } from '@quadrats/locales';
+export type CarouselContextType = {
+    activeIndex: number;
+    setActiveIndex: Dispatch<SetStateAction<number>>;
+};
+export interface RenderCarouselElementProps extends RenderElementProps<CarouselElement> {
+    controller: Carousel<Editor>;
+}
+export interface RenderCarouselImagesElementProps extends RenderElementProps<CarouselImagesElement> {
+}
+export type RenderCarouselCaptionElementProps = RenderElementProps<CarouselCaptionElement>;
+export interface RenderCarouselPlaceholderElementProps extends RenderElementProps<CarouselPlaceholderElement> {
+}
+export type RenderCarouselPlaceholderElement = (props: RenderCarouselPlaceholderElementProps) => JSX.Element | null | undefined;
+export type CarouselRenderElements = Record<CarouselTypeKey, (props: RenderCarouselElementProps) => JSX.Element | null | undefined> & Record<CarouselImagesTypeKey, (props: RenderCarouselImagesElementProps) => JSX.Element | null | undefined> & Record<CarouselCaptionTypeKey, (props: RenderCarouselCaptionElementProps) => JSX.Element | null | undefined>;
+export type ReactCarouselCreateRenderElementOptions = {
+    [K in CarouselTypeKey | CarouselImagesTypeKey | CarouselCaptionTypeKey]?: CarouselRenderElements[K];
+};
+export interface ReactCarousel extends Carousel<Editor>, WithCreateRenderElement<[ReactCarouselCreateRenderElementOptions?]> {
+    createHandlers: (setNeedConfirmModal?: Dispatch<SetStateAction<ConfirmModalConfig | null>>, locale?: LocaleDefinition) => Handlers;
+    createRenderPlaceholderElement: (params_0?: {
+        render?: RenderCarouselPlaceholderElement;
+    }) => (props: RenderElementProps) => JSX.Element | null | undefined;
+}

package/components/BaseField/index.d.ts

@@ -0,0 +1,11 @@
+import React, { ReactNode } from 'react';
+export interface BaseFieldProps {
+    label?: string;
+    className?: string;
+    width?: number;
+    children: ReactNode;
+    required?: boolean;
+    errorMessage?: string;
+}
+declare const BaseField: ({ label, className, width, children, required, errorMessage }: BaseFieldProps) => React.JSX.Element;
+export default BaseField;

package/components/BaseField/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Error } from '@quadrats/icons';
+import clsx from 'clsx';
+import Icon from '../Icon/index.js';
+
+const BaseField = ({ label, className, width, children, required = false, errorMessage }) => {
+    return (React.createElement("div", { className: clsx('qdr-base-field', className), style: { width } },
+        label && (React.createElement("p", { className: "qdr-base-field__label" },
+            label,
+            required && React.createElement("span", { className: "qdr-base-field__required-mark" }, "*"))),
+        children,
+        errorMessage && (React.createElement("div", { className: "qdr-base-field__error-message" },
+            React.createElement(Icon, { icon: Error, width: 16, height: 16 }),
+            React.createElement("span", null, errorMessage)))));
+};
+
+export { BaseField as default };

package/components/Button/index.d.ts

@@ -0,0 +1,14 @@
+import React, { ReactNode, MouseEventHandler } from 'react';
+export interface ButtonProps {
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    className?: string;
+    type?: 'submit' | 'reset' | 'button';
+    variant?: 'primary' | 'secondary' | 'outlined' | 'dashed' | 'tertiary';
+    size?: 'small' | 'medium' | 'large';
+    prefix?: ReactNode;
+    danger?: boolean;
+    disabled?: boolean;
+    children: ReactNode;
+}
+declare const Button: ({ onClick, className, type, variant, size, prefix, danger, disabled, children, }: ButtonProps) => React.JSX.Element;
+export default Button;

package/components/Button/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import clsx from 'clsx';
+
+const Button = ({ onClick, className, type = 'button', variant = 'primary', size = 'small', prefix, danger = false, disabled, children, }) => {
+    return (React.createElement("button", { className: clsx('qdr-button', `qdr-button--${variant}`, `qdr-button--${size}`, {
+            'qdr-button--danger': danger,
+        }, className), type: type, disabled: disabled, onClick: onClick },
+        prefix,
+        children));
+};
+
+export { Button as default };

package/components/Hint/index.d.ts

@@ -0,0 +1,15 @@
+import React, { CSSProperties } from 'react';
+export interface HintProps {
+    children: string;
+    variant?: 'info' | 'success' | 'warning' | 'error';
+}
+declare const Hint: ({ children, variant }: HintProps) => React.JSX.Element;
+export interface HintsProps {
+    hints: {
+        text: string;
+        variant?: 'info' | 'success' | 'warning' | 'error';
+    }[];
+    style?: CSSProperties;
+}
+export declare const Hints: ({ hints, style }: HintsProps) => React.JSX.Element;
+export default Hint;

package/components/Hint/index.js

@@ -0,0 +1,30 @@
+import React, { useMemo } from 'react';
+import clsx from 'clsx';
+import { Info, Error, Warning, Success } from '@quadrats/icons';
+import Icon from '../Icon/index.js';
+
+const Hint = ({ children, variant = 'info' }) => {
+    const icon = useMemo(() => {
+        switch (variant) {
+            case 'info':
+                return Info;
+            case 'success':
+                return Success;
+            case 'warning':
+                return Warning;
+            case 'error':
+                return Error;
+            default:
+                return Info;
+        }
+    }, [variant]);
+    return (React.createElement("div", { className: "qdr-hint" },
+        React.createElement("div", { className: clsx('qdr-hint__icon', `qdr-hint__icon--${variant}`) },
+            React.createElement(Icon, { icon: icon, width: 16, height: 16 })),
+        React.createElement("div", { className: clsx('qdr-hint__children', `qdr-hint__children--${variant}`) }, children)));
+};
+const Hints = ({ hints, style }) => {
+    return (React.createElement("div", { className: "qdr-hints", style: style }, hints.map((hint, index) => (React.createElement(Hint, { key: index, variant: hint.variant }, hint.text)))));
+};
+
+export { Hints, Hint as default };

package/components/Icon/index.d.ts

@@ -0,0 +1,15 @@
+import React, { SVGProps } from 'react';
+import { IconDefinition } from '@quadrats/icons';
+export interface IconProps extends SVGProps<SVGSVGElement> {
+    /**
+     * The `IconDefinition` will be rendered.
+     */
+    icon: IconDefinition;
+    /**
+     * Provide `fontSize` by `em` to control size of icon.
+     * @default 1
+     */
+    size?: number;
+}
+declare const Icon: React.ForwardRefExoticComponent<Omit<IconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export default Icon;

package/components/Icon/index.js

@@ -0,0 +1,21 @@
+import { __rest } from 'tslib';
+import React, { forwardRef } from 'react';
+
+const svgBaseProps = {
+    width: '1em',
+    height: '1em',
+    'aria-hidden': true,
+    focusable: false,
+};
+const Icon = forwardRef((_a, ref) => {
+    var { children, style, icon, size = 1 } = _a, props = __rest(_a, ["children", "style", "icon", "size"]);
+    if (!icon) {
+        throw new Error('The icon definition is needed.');
+    }
+    const { definition } = icon;
+    const svgProps = Object.assign(Object.assign(Object.assign(Object.assign({}, svgBaseProps), definition.svg), props), { style: Object.assign(Object.assign({}, style), { fontSize: `${size}em` }) });
+    return (React.createElement("svg", Object.assign({}, svgProps, { ref: ref }),
+        React.createElement("path", Object.assign({}, definition.path))));
+});
+
+export { Icon as default };

package/components/ImageUploader/index.d.ts

@@ -0,0 +1,25 @@
+import React, { Dispatch, SetStateAction } from 'react';
+import { FileUploaderGetBody, FileUploaderGetHeaders, FileUploaderGetUrl, FileUploaderImplement, ImageAccept } from '@quadrats/common/file-uploader';
+import { BaseFieldProps } from '../BaseField';
+export type ImageUploaderItem = {
+    file: File;
+    progress: number;
+    preview: string;
+    url: string;
+};
+export interface ImageUploaderProps extends Omit<BaseFieldProps, 'children'> {
+    getBody: FileUploaderGetBody;
+    getHeaders?: FileUploaderGetHeaders;
+    getUrl: FileUploaderGetUrl;
+    uploader?: FileUploaderImplement;
+    imageUploaderItem: ImageUploaderItem | null;
+    setImageUploaderItem: Dispatch<SetStateAction<ImageUploaderItem | null>>;
+    accept?: ImageAccept[];
+    ratio?: [number, number];
+    limitSize?: number;
+    disabled?: boolean;
+    onOverLimitSize?: VoidFunction;
+    onErrorAccept?: VoidFunction;
+}
+declare const ImageUploader: ({ label, className, getBody, getHeaders, getUrl, uploader, imageUploaderItem, setImageUploaderItem, width, accept, ratio, limitSize, disabled, required, errorMessage, onOverLimitSize, onErrorAccept, }: ImageUploaderProps) => React.JSX.Element;
+export default ImageUploader;

package/components/ImageUploader/index.js

@@ -0,0 +1,174 @@
+import { __awaiter } from 'tslib';
+import React, { useState, useCallback, useMemo } from 'react';
+import { readFileAsBase64, upload } from '@quadrats/react/utils';
+import { Trash, Image, Plus } from '@quadrats/icons';
+import clsx from 'clsx';
+import BaseField from '../BaseField/index.js';
+import Icon from '../Icon/index.js';
+import { Hints } from '../Hint/index.js';
+import Progress from '../Progress/index.js';
+
+// TODO: i18n
+const ImageUploader = ({ label, className, getBody, getHeaders, getUrl, uploader, imageUploaderItem, setImageUploaderItem, width = 140, accept = ['image/jpeg', 'image/jpg', 'image/png'], ratio, limitSize = 5, disabled = false, required, errorMessage, onOverLimitSize, onErrorAccept, }) => {
+    const [isDragging, setIsDragging] = useState(false);
+    const [isError, setIsError] = useState(false);
+    const onProgress = useCallback((p) => {
+        setImageUploaderItem((prev) => {
+            if (prev) {
+                return Object.assign(Object.assign({}, prev), { progress: p });
+            }
+            return prev;
+        });
+    }, [setImageUploaderItem]);
+    const onUpload = useCallback((file) => __awaiter(void 0, void 0, void 0, function* () {
+        if (file) {
+            if (file.size > limitSize * 1024 * 1024) {
+                setIsError(true);
+                onOverLimitSize === null || onOverLimitSize === void 0 ? void 0 : onOverLimitSize();
+            }
+            else {
+                const base64 = yield readFileAsBase64(file);
+                setImageUploaderItem(() => ({
+                    file,
+                    preview: base64,
+                    url: '',
+                    progress: 0,
+                }));
+                try {
+                    const url = yield upload({
+                        file,
+                        getBody,
+                        getHeaders,
+                        getUrl,
+                        uploader,
+                        onProgress,
+                    });
+                    setImageUploaderItem((prev) => {
+                        if (prev) {
+                            return Object.assign(Object.assign({}, prev), { preview: url, url });
+                        }
+                        return prev;
+                    });
+                }
+                catch (error) {
+                    setIsError(true);
+                    setImageUploaderItem(() => null);
+                }
+            }
+        }
+    }), [getBody, getHeaders, getUrl, limitSize, onOverLimitSize, onProgress, setImageUploaderItem, uploader]);
+    const onSelectFile = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        if (!disabled && !imageUploaderItem) {
+            setIsError(false);
+            return new Promise((resolve) => {
+                const inputEl = document.createElement('input');
+                if (accept) {
+                    inputEl.accept = accept.join(',');
+                }
+                inputEl.multiple = false;
+                inputEl.type = 'file';
+                inputEl.addEventListener('cancel', () => {
+                    resolve(undefined);
+                });
+                inputEl.addEventListener('change', () => {
+                    const { files: fileList } = inputEl;
+                    if (!fileList || !fileList.length) {
+                        resolve(undefined);
+                    }
+                    else {
+                        resolve(fileList[0]);
+                    }
+                });
+                inputEl.click();
+            });
+        }
+    }), [accept, disabled, imageUploaderItem]);
+    const handleDrop = useCallback((event) => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b;
+        if (((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) === null || _b === void 0 ? void 0 : _b.includes('Files')) && !disabled && !imageUploaderItem) {
+            event.preventDefault();
+            setIsDragging(false);
+            setIsError(false);
+            const files = Array.from(event.dataTransfer.files);
+            const targetFile = files[0];
+            if (targetFile.size > limitSize * 1024 * 1024) {
+                setIsError(true);
+                onOverLimitSize === null || onOverLimitSize === void 0 ? void 0 : onOverLimitSize();
+                return;
+            }
+            if (!accept.find((a) => a === targetFile.type)) {
+                setIsError(true);
+                onErrorAccept === null || onErrorAccept === void 0 ? void 0 : onErrorAccept();
+                return;
+            }
+            yield onUpload(targetFile);
+        }
+    }), [accept, disabled, imageUploaderItem, limitSize, onErrorAccept, onOverLimitSize, onUpload]);
+    const acceptText = useMemo(() => {
+        if (accept.find((a) => a === 'image/jpeg' || a === 'image/jpg') && accept.find((a) => a === 'image/png')) {
+            return 'JPG 或 PNG';
+        }
+        else if (accept.find((a) => a === 'image/png')) {
+            return 'PNG';
+        }
+        else if (accept.find((a) => a === 'image/jpeg' || a === 'image/jpg')) {
+            return 'JPG';
+        }
+        return '';
+    }, [accept]);
+    return (React.createElement(BaseField, { className: className, label: label, required: required, width: width, errorMessage: errorMessage },
+        React.createElement("div", { className: "qdr-image-uploader__wrapper" },
+            imageUploaderItem ? (React.createElement("div", { className: "qdr-image-uploader qdr-image-uploader__previewer", style: { width, aspectRatio: ratio ? `${ratio[0]} / ${ratio[1]}` : '1 / 1' } },
+                React.createElement("div", { className: "qdr-image-uploader__image-wrapper" },
+                    imageUploaderItem.progress !== 100 && React.createElement(Progress, { percentage: imageUploaderItem.progress }),
+                    React.createElement("div", { contentEditable: false, className: clsx('qdr-inline-toolbar', 'qdr-image-uploader__inline-toolbar') },
+                        React.createElement(Icon, { className: clsx('qdr-inline-toolbar__icon', {
+                                'qdr-inline-toolbar__icon--disabled': disabled,
+                            }), icon: Trash, width: 24, height: 24, onClick: () => {
+                                if (!disabled) {
+                                    setImageUploaderItem(() => null);
+                                }
+                            } })),
+                    React.createElement("img", { src: imageUploaderItem.url || imageUploaderItem.preview, className: "qdr-image-uploader__image", style: {
+                            objectFit: ratio ? 'cover' : 'contain',
+                            aspectRatio: ratio ? `${ratio[0]} / ${ratio[1]}` : '1 / 1',
+                        } })))) : (React.createElement("div", { className: clsx('qdr-image-uploader', {
+                    'qdr-image-uploader--dragging': isDragging,
+                    'qdr-image-uploader--error': isError,
+                    'qdr-image-uploader--disabled': disabled,
+                }), style: isDragging ? undefined : { width, aspectRatio: ratio ? `${ratio[0]} / ${ratio[1]}` : '1 / 1' }, onClick: () => __awaiter(void 0, void 0, void 0, function* () {
+                    const file = yield onSelectFile();
+                    yield onUpload(file);
+                }), onDragOver: (e) => {
+                    var _a, _b;
+                    e.preventDefault();
+                    if ((_b = (_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) === null || _b === void 0 ? void 0 : _b.includes('Files')) {
+                        setIsDragging(true);
+                        setIsError(false);
+                    }
+                }, onDragLeave: () => {
+                    setIsDragging(false);
+                    setIsError(false);
+                }, onDrop: handleDrop }, isError ? (React.createElement(React.Fragment, null,
+                React.createElement(Icon, { icon: Image, width: 24, height: 24, className: "qdr-image-uploader__icon" }),
+                React.createElement("span", { className: "qdr-image-uploader__main-text" }, "\u4E0A\u50B3\u932F\u8AA4"))) : (React.createElement(React.Fragment, null,
+                React.createElement(Icon, { icon: Plus, width: 24, height: 24, className: "qdr-image-uploader__icon" }),
+                isDragging ? (React.createElement("div", { className: "qdr-image-uploader__dragging-wrapper" },
+                    React.createElement("span", { className: "qdr-image-uploader__main-text" }, "\u9EDE\u64CA\u6216\u62D6\u66F3\u6A94\u6848\u5230\u6B64\u4E0A\u50B3"),
+                    React.createElement("span", { className: "qdr-image-uploader__info-text" }, ratio
+                        ? `僅能上傳 ${acceptText}；建議比例為 ${ratio[0]}:${ratio[1]} 且寬度至少達 2000px 以上；檔案大小不可超過 ${limitSize}MB`
+                        : `僅能上傳 ${acceptText}；檔案大小不可超過 ${limitSize}MB`))) : (React.createElement("span", { className: "qdr-image-uploader__main-text" }, "\u4E0A\u50B3")))))),
+            React.createElement(Hints, { style: { width }, hints: [
+                    {
+                        text: `檔案格式：限 ${acceptText}。`,
+                    },
+                    ratio && {
+                        text: `檔案尺寸：最佳比例為 ${ratio[0]}:${ratio[1]}。建議圖片寬度達 2000px 以上，高度不限。`,
+                    },
+                    {
+                        text: `檔案大小：不可大於 ${limitSize} MB。`,
+                    },
+                ].filter((h) => !!h) }))));
+};
+
+export { ImageUploader as default };

package/components/Input/index.d.ts

@@ -0,0 +1,14 @@
+import React, { Ref } from 'react';
+import { BaseFieldProps } from '../BaseField';
+export interface InputProps extends Omit<BaseFieldProps, 'children'> {
+    value?: string;
+    onChange?: (value: string) => void;
+    inputRef?: Ref<HTMLInputElement>;
+    placeholder?: string;
+    disabled?: boolean;
+    isError?: boolean;
+    hint?: string;
+    maxLength?: number;
+}
+declare const Input: ({ label, className, width, value, onChange, inputRef, placeholder, disabled, isError, hint, maxLength, errorMessage, required, }: InputProps) => React.JSX.Element;
+export default Input;

package/components/Input/index.js

@@ -0,0 +1,24 @@
+import React, { useMemo } from 'react';
+import clsx from 'clsx';
+import BaseField from '../BaseField/index.js';
+
+const Input = ({ label, className, width, value = '', onChange, inputRef, placeholder, disabled, isError, hint, maxLength, errorMessage, required = false, }) => {
+    const isLimited = useMemo(() => maxLength && value && value.length >= maxLength, [maxLength, value]);
+    return (React.createElement(BaseField, { className: className, label: label, required: required, width: width, errorMessage: errorMessage },
+        React.createElement("div", { className: "qdr-input" },
+            React.createElement("input", { ref: inputRef, className: clsx('qdr-input__input', {
+                    'qdr-input__input--error': isError,
+                }), value: value, onChange: (e) => {
+                    onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value);
+                }, type: "text", maxLength: maxLength, placeholder: placeholder, disabled: disabled }),
+            hint && (React.createElement("div", { className: "qdr-input__hint-wrapper" },
+                React.createElement("span", { className: "qdr-input__hint" }, hint))),
+            maxLength && (React.createElement("span", { className: clsx('qdr-input__counter', {
+                    'qdr-input__counter--have-hint': hint,
+                    'qdr-input__counter--limited': isLimited,
+                    'qdr-input__counter--error': isError,
+                    'qdr-input__counter--disabled': disabled,
+                }) }, `${value ? value.length : 0}/${maxLength}`)))));
+};
+
+export { Input as default };

package/components/Message/index.d.ts

@@ -0,0 +1,18 @@
+import { FC, Key } from 'react';
+import { ThemeProps } from '@quadrats/react/configs';
+import { Notifier, NotifierData, NotifierConfig } from '../Notifier/typings';
+import { SlideFadeProps } from '../Transition/SlideFade';
+import { IconDefinition } from '@quadrats/icons';
+export interface MessageConfigProps extends Pick<NotifierConfig, 'duration'>, Pick<SlideFadeProps, 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited' | 'easing' | 'direction'> {
+}
+export type MessageSeverity = 'success' | 'warning' | 'error' | 'info';
+export interface MessageData extends Omit<NotifierData, 'onClose'>, MessageConfigProps {
+    duration?: NotifierData['duration'];
+    icon?: IconDefinition;
+    reference?: Key;
+    severity?: MessageSeverity;
+    theme: ThemeProps;
+}
+export type MessageType = FC<MessageData> & Notifier<MessageData, MessageConfigProps> & Record<string, (message: MessageData['children'], theme: ThemeProps, props?: Omit<MessageData, 'children' | 'theme' | 'severity' | 'icon'>) => Key>;
+declare const Message: MessageType;
+export default Message;

package/components/Message/index.js

@@ -0,0 +1,72 @@
+import { __rest } from 'tslib';
+import React, { useState, useEffect } from 'react';
+import clsx from 'clsx';
+import Icon from '../Icon/index.js';
+import { createNotifier } from '../Notifier/createNotifier.js';
+import SlideFade from '../Transition/SlideFade.js';
+import { Success, Warning, Error, Info } from '@quadrats/icons';
+
+const Message = ((props) => {
+    const { children, theme, duration, icon, reference, severity, onExited: onExitedProp } = props, restTransitionProps = __rest(props, ["children", "theme", "duration", "icon", "reference", "severity", "onExited"]);
+    const [open, setOpen] = useState(true);
+    useEffect(() => {
+        if (open && duration) {
+            const timer = window.setTimeout(() => {
+                setOpen(false);
+            }, duration);
+            return () => {
+                window.clearTimeout(timer);
+            };
+        }
+    }, [open, duration]);
+    const onExited = (node) => {
+        if (onExitedProp) {
+            onExitedProp(node);
+        }
+        if (reference)
+            Message.remove(reference);
+    };
+    return (React.createElement(SlideFade, Object.assign({ in: open, appear: true, onExited: onExited }, restTransitionProps),
+        React.createElement("div", { className: clsx('qdr-message', {
+                [`qdr-message--${severity}`]: !!severity,
+            }, theme.className), style: theme.style },
+            icon ? React.createElement(Icon, { className: "qdr-message__icon", icon: icon, width: 24, height: 24 }) : null,
+            React.createElement("span", { className: "qdr-message__content" }, children))));
+});
+const { add, config, destroy, remove } = createNotifier({
+    duration: 3000,
+    render: (message) => React.createElement(Message, Object.assign({}, message, { key: undefined })),
+    setRoot: (root) => {
+        root === null || root === void 0 ? void 0 : root.setAttribute('class', 'qdr-message__root');
+    },
+});
+Message.add = add;
+Message.config = config;
+Message.destroy = destroy;
+Message.remove = remove;
+const severities = [
+    {
+        key: 'success',
+        icon: Success,
+    },
+    {
+        key: 'warning',
+        icon: Warning,
+    },
+    {
+        key: 'error',
+        icon: Error,
+    },
+    {
+        key: 'info',
+        icon: Info,
+    },
+];
+const validSeverities = ['success', 'warning', 'error', 'info'];
+severities.forEach((severity) => {
+    Message[severity.key] = (message, theme, props) => Message.add(Object.assign(Object.assign({}, props), { children: message, theme, severity: validSeverities.includes(severity.key)
+            ? severity.key
+            : undefined, icon: severity.icon }));
+});
+
+export { Message as default };

package/components/Modal/index.d.ts

@@ -0,0 +1,28 @@
+import React, { ReactNode } from 'react';
+export interface ModalProps {
+    title?: string | ReactNode;
+    className?: string;
+    closable?: boolean;
+    children: ReactNode;
+    mainAreaClassName?: string;
+    sideAreaClassName?: string;
+    mask?: boolean;
+    maskClosable?: boolean;
+    escToExit?: boolean;
+    haveFooter?: boolean;
+    sideChildren?: ReactNode;
+    size?: 'small' | 'medium' | 'large' | 'extraLarge';
+    isOpen: boolean;
+    haveCloseButton?: boolean;
+    haveConfirmButton?: boolean;
+    disabledCloseButton?: boolean;
+    disabledConfirmButton?: boolean;
+    dangerConfirmButton?: boolean;
+    closeText?: string;
+    confirmText?: string;
+    onClose: () => void;
+    onConfirm?: () => void;
+    customizedFooterElement?: ReactNode;
+}
+declare const Modal: ({ title, className, closable, children, mainAreaClassName, sideAreaClassName, mask, maskClosable, escToExit, haveFooter, sideChildren, size, isOpen, haveCloseButton, haveConfirmButton, disabledCloseButton, disabledConfirmButton, dangerConfirmButton, closeText, confirmText, onClose, onConfirm, customizedFooterElement, }: ModalProps) => React.JSX.Element;
+export default Modal;

package/components/Modal/index.js

@@ -0,0 +1,61 @@
+import React, { useRef, useContext, useEffect, useMemo } from 'react';
+import clsx from 'clsx';
+import { CSSTransition } from 'react-transition-group';
+import { useLocale, ThemeContext } from '@quadrats/react/configs';
+import { Cancel } from '@quadrats/icons';
+import Portal from '../Portal/index.js';
+import Button from '../Button/index.js';
+import Icon from '../Icon/index.js';
+
+const Modal = ({ title, className, closable = false, children, mainAreaClassName, sideAreaClassName, mask = true, maskClosable = true, escToExit = true, haveFooter = true, sideChildren, size = 'medium', isOpen, haveCloseButton = true, haveConfirmButton = true, disabledCloseButton = false, disabledConfirmButton = false, dangerConfirmButton = false, closeText, confirmText, onClose, onConfirm, customizedFooterElement = React.createElement("div", null), }) => {
+    const locale = useLocale();
+    const nodeRef = useRef(null);
+    const { props: themeProps } = useContext(ThemeContext);
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape' && escToExit) {
+                onClose();
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [onClose, escToExit]);
+    const renderFooter = useMemo(() => (React.createElement("div", { className: "qdr-modal__footer" },
+        customizedFooterElement,
+        React.createElement("div", { className: "qdr-modal__footer__actions" },
+            haveCloseButton && (React.createElement(Button, { variant: "secondary", disabled: disabledCloseButton, onClick: onClose }, closeText || locale.editor.cancel)),
+            haveConfirmButton && (React.createElement(Button, { variant: "primary", danger: dangerConfirmButton, disabled: disabledConfirmButton, onClick: onConfirm }, confirmText || locale.editor.confirm))))), [
+        customizedFooterElement,
+        haveCloseButton,
+        disabledCloseButton,
+        dangerConfirmButton,
+        onClose,
+        closeText,
+        locale.editor.cancel,
+        locale.editor.confirm,
+        haveConfirmButton,
+        disabledConfirmButton,
+        onConfirm,
+        confirmText,
+    ]);
+    return (React.createElement(Portal, null,
+        React.createElement("div", { className: clsx('qdr-modal', {
+                'qdr-modal--opened': isOpen,
+                'qdr-modal--mask': mask,
+            }, themeProps.className, className), style: themeProps.style, onClick: maskClosable ? onClose : undefined },
+            React.createElement(CSSTransition, { in: isOpen, nodeRef: nodeRef, timeout: 250, classNames: "qdr-modal__transition", unmountOnExit: true },
+                React.createElement("div", { ref: nodeRef, className: clsx('qdr-modal__container', `qdr-modal__container--${size}`), onClick: (e) => e.stopPropagation() },
+                    title && (React.createElement("div", { className: "qdr-modal__header" },
+                        title,
+                        closable && (React.createElement(Icon, { className: "qdr-modal__header__cancel", icon: Cancel, width: 24, height: 24, onClick: onClose })))),
+                    React.createElement("div", { className: clsx('qdr-modal__body', {
+                            'qdr-modal__body--have-footer-height': haveFooter && !sideChildren,
+                        }) },
+                        sideChildren && (React.createElement("div", { className: "qdr-modal__side-body" },
+                            React.createElement("div", { className: clsx('qdr-modal__side', sideAreaClassName) }, sideChildren),
+                            haveFooter && renderFooter)),
+                        React.createElement("div", { className: clsx('qdr-modal__main', mainAreaClassName) }, children)),
+                    haveFooter && !sideChildren && renderFooter)))));
+};
+
+export { Modal as default };

package/components/Notifier/NotifierManager.d.ts

@@ -0,0 +1,17 @@
+import React, { Key, RefObject } from 'react';
+import { NotifierData, NotifierConfig, RenderNotifier } from './typings';
+export interface NotifierController<N extends NotifierData> {
+    add: (notifier: N & {
+        key: Key;
+    }) => void;
+    remove: (key: Key) => void;
+}
+export interface NotifierManagerProps<N extends NotifierData> extends Pick<NotifierConfig, 'maxCount'> {
+    controllerRef: RefObject<NotifierController<N> | null>;
+    defaultNotifiers?: (N & {
+        key: Key;
+    })[];
+    render: RenderNotifier<N>;
+}
+declare function NotifierManager<N extends NotifierData>(props: NotifierManagerProps<N>): React.JSX.Element;
+export default NotifierManager;