@quadrats/react 1.1.7 → 1.1.8

package/components/index.cjs.js

@@ -1,867 +0,0 @@
-'use strict';
-
-var React = require('react');
-var icons = require('@quadrats/icons');
-var clsx = require('clsx');
-var tslib = require('tslib');
-var utils = require('@quadrats/react/utils');
-var reactTransitionGroup = require('react-transition-group');
-var configs = require('@quadrats/react/configs');
-var ReactDOM = require('react-dom');
-var client = require('react-dom/client');
-var ReactTransition = require('react-transition-group/Transition');
-
-const svgBaseProps = {
-    width: '1em',
-    height: '1em',
-    'aria-hidden': true,
-    focusable: false,
-};
-const Icon = React.forwardRef((_a, ref) => {
-    var { children, style, icon, size = 1 } = _a, props = tslib.__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))));
-});
-
-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: icons.Error, width: 16, height: 16 }),
-            React.createElement("span", null, errorMessage)))));
-};
-
-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));
-};
-
-const Hint = ({ children, variant = 'info' }) => {
-    const icon = React.useMemo(() => {
-        switch (variant) {
-            case 'info':
-                return icons.Info;
-            case 'success':
-                return icons.Success;
-            case 'warning':
-                return icons.Warning;
-            case 'error':
-                return icons.Error;
-            default:
-                return icons.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)))));
-};
-
-const Progress = React.forwardRef(function Progress(props, ref) {
-    const { className, percentage = 0 } = props;
-    const size = 16;
-    const strokeWidth = 2;
-    const radius = (size - strokeWidth) / 2;
-    const circumference = 2 * Math.PI * radius;
-    const offset = circumference * (1 - percentage / 100);
-    return (React.createElement("div", { ref: ref, className: clsx('qdr-progress', className) },
-        React.createElement("div", { className: "qdr-progress__wrapper" },
-            React.createElement("div", { className: "qdr-progress__spinner-wrapper" },
-                React.createElement("svg", { width: size, height: size },
-                    React.createElement("circle", { className: "qdr-progress__backdrop", cx: size / 2, cy: size / 2, r: radius, strokeWidth: strokeWidth, fill: "none" }),
-                    React.createElement("circle", { className: "qdr-progress__track", cx: size / 2, cy: size / 2, r: radius, strokeWidth: strokeWidth, fill: "none", strokeDasharray: circumference, strokeDashoffset: offset }))),
-            React.createElement("p", { className: "qdr-progress__percentage" }, `${percentage}%`))));
-});
-
-// 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] = React.useState(false);
-    const [isError, setIsError] = React.useState(false);
-    const onProgress = React.useCallback((p) => {
-        setImageUploaderItem((prev) => {
-            if (prev) {
-                return Object.assign(Object.assign({}, prev), { progress: p });
-            }
-            return prev;
-        });
-    }, [setImageUploaderItem]);
-    const onUpload = React.useCallback((file) => tslib.__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 utils.readFileAsBase64(file);
-                setImageUploaderItem(() => ({
-                    file,
-                    preview: base64,
-                    url: '',
-                    progress: 0,
-                }));
-                try {
-                    const url = yield utils.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 = React.useCallback(() => tslib.__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 = React.useCallback((event) => tslib.__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 = React.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: icons.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: () => tslib.__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: icons.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: icons.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) }))));
-};
-
-const Input = ({ label, className, width, value = '', onChange, inputRef, placeholder, disabled, isError, hint, maxLength, errorMessage, required = false, }) => {
-    const isLimited = React.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}`)))));
-};
-
-const Textarea = ({ label, className, width, value = '', onChange, textareaRef, placeholder, height, disabled, isError, hint, maxLength, errorMessage, required = false, }) => {
-    const isLimited = React.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-textarea" },
-            React.createElement("textarea", { ref: textareaRef, style: { height }, className: clsx('qdr-textarea__textarea', {
-                    'qdr-textarea__textarea--error': isError,
-                }), value: value, onChange: (e) => {
-                    onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value);
-                }, maxLength: maxLength, placeholder: placeholder, disabled: disabled }),
-            hint && (React.createElement("div", { className: "qdr-textarea__hint-wrapper" },
-                React.createElement("span", { className: "qdr-textarea__hint" }, hint))),
-            maxLength && (React.createElement("span", { className: clsx('qdr-textarea__counter', {
-                    'qdr-textarea__counter--have-hint': hint,
-                    'qdr-textarea__counter--limited': isLimited,
-                    'qdr-textarea__counter--error': isError,
-                    'qdr-textarea__counter--disabled': disabled,
-                }) }, `${value ? value.length : 0}/${maxLength}`)))));
-};
-
-const Portal = ({ getContainer, children }) => {
-    const container = getContainer ? getContainer() : document.body;
-    return ReactDOM.createPortal(children, container);
-};
-
-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 = configs.useLocale();
-    const nodeRef = React.useRef(null);
-    const { props: themeProps } = React.useContext(configs.ThemeContext);
-    React.useEffect(() => {
-        const handleKeyDown = (e) => {
-            if (e.key === 'Escape' && escToExit) {
-                onClose();
-            }
-        };
-        window.addEventListener('keydown', handleKeyDown);
-        return () => window.removeEventListener('keydown', handleKeyDown);
-    }, [onClose, escToExit]);
-    const renderFooter = React.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(reactTransitionGroup.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: icons.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)))));
-};
-
-function NotifierManager(props) {
-    const { controllerRef, defaultNotifiers = [], maxCount, render } = props;
-    const [notifiers, setNotifiers] = React.useState(defaultNotifiers);
-    const notifiersShouldRendered = typeof maxCount === 'number' && notifiers.length > maxCount ? notifiers.slice(0, maxCount) : notifiers;
-    const controller = React.useMemo(() => ({
-        add(notifier) {
-            setNotifiers((prev) => {
-                const notifierIndex = prev.findIndex(({ key }) => key === notifier.key);
-                return ~notifierIndex
-                    ? [...prev.slice(0, notifierIndex), notifier, ...prev.slice(notifierIndex + 1, prev.length)]
-                    : [...prev, notifier];
-            });
-        },
-        remove(key) {
-            setNotifiers((prev) => prev.filter((m) => m.key !== key));
-        },
-    }), []);
-    React.useImperativeHandle(controllerRef, () => controller, [controller]);
-    return (React.createElement(React.Fragment, null, notifiersShouldRendered.map((notifier) => (React.createElement(React.Fragment, { key: notifier.key }, render(notifier))))));
-}
-
-/**
- * The utility factory for `mezzanine` to create a notifier.
- *
- * When APIs are called, Notifier will dynamically render a new react instance by `ReactDOM.render` method.
- */
-function createNotifier(props) {
-    const { config: configProp, render: renderNotifier, setRoot, duration, maxCount } = props, restNotifierProps = tslib.__rest(props, ["config", "render", "setRoot", "duration", "maxCount"]);
-    const container = typeof document === 'undefined' ? null : document.createElement('div');
-    const root = container ? client.createRoot(container) : null;
-    const controllerRef = React.createRef();
-    let currentConfig = Object.assign({ duration,
-        maxCount }, configProp);
-    if (setRoot && container) {
-        setRoot(container);
-    }
-    return {
-        add(notifier) {
-            var _a, _b;
-            if (container === null)
-                return 'NOT_SET';
-            document.body.appendChild(container);
-            const key = (_a = notifier.key) !== null && _a !== void 0 ? _a : Date.now();
-            const resolvedNotifier = Object.assign(Object.assign(Object.assign(Object.assign({}, restNotifierProps), notifier), currentConfig), { duration: (_b = notifier.duration) !== null && _b !== void 0 ? _b : currentConfig.duration, key, instanceKey: key });
-            if (controllerRef.current) {
-                controllerRef.current.add(resolvedNotifier);
-            }
-            else {
-                root === null || root === void 0 ? void 0 : root.render(React.createElement(NotifierManager, { controllerRef: controllerRef, defaultNotifiers: [resolvedNotifier], maxCount: currentConfig.maxCount, render: renderNotifier }));
-            }
-            return resolvedNotifier.key;
-        },
-        remove(key) {
-            if (controllerRef.current) {
-                controllerRef.current.remove(key);
-            }
-        },
-        destroy() {
-            if (container === null)
-                return;
-            // when useEffect(() => () => { root.unmount() }, []), will be show "Rendered more hooks than during the previous render." issue.
-            root === null || root === void 0 ? void 0 : root.render(null);
-            if (container.parentNode) {
-                container.parentNode.removeChild(container);
-            }
-        },
-        config(config) {
-            currentConfig = Object.assign(Object.assign({}, currentConfig), config);
-        },
-        getConfig() {
-            return currentConfig;
-        },
-    };
-}
-
-/**
- * The react component for `mezzanine` transition.
- */
-function Transition(props) {
-    const { addEndListener, appear = true, children, duration, in: inProp = false, keepMount = false, lazyMount = true, nodeRef, onEnter, onEntering, onEntered, onExit, onExiting, onExited, } = props;
-    const addNodeToCallback = (callback) => {
-        if (!callback) {
-            return;
-        }
-        return (...args) => {
-            const node = nodeRef.current;
-            if (node) {
-                callback(node, ...args);
-            }
-        };
-    };
-    return (React.createElement(ReactTransition
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    , { 
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        addEndListener: addNodeToCallback(addEndListener), appear: appear, in: inProp, mountOnEnter: lazyMount, nodeRef: nodeRef, onEnter: addNodeToCallback(onEnter), onEntering: addNodeToCallback(onEntering), onEntered: addNodeToCallback(onEntered), onExit: addNodeToCallback(onExit), onExiting: addNodeToCallback(onExiting), onExited: addNodeToCallback(onExited), timeout: duration === 'auto' ? undefined : duration, unmountOnExit: !keepMount }, children));
-}
-
-function getTransitionDuration(mode, duration, resolveAuto) {
-    if (duration !== 'auto') {
-        return typeof duration === 'number' ? duration : duration[mode] || 0;
-    }
-    if (typeof resolveAuto === 'function') {
-        return resolveAuto(mode);
-    }
-    return resolveAuto !== null && resolveAuto !== void 0 ? resolveAuto : 0;
-}
-function getTransitionTimingFunction(mode, easing) {
-    return typeof easing === 'string' ? easing : easing[mode] || 'ease';
-}
-function getTransitionDelay(mode, delay) {
-    return typeof delay === 'number' ? delay : delay[mode] || 0;
-}
-function getTransitionStyleProps(mode, props) {
-    const { delay, duration, easing, resolveAutoDuration } = props;
-    return {
-        delay: getTransitionDelay(mode, delay),
-        duration: getTransitionDuration(mode, duration, resolveAutoDuration),
-        timingFunction: getTransitionTimingFunction(mode, easing),
-    };
-}
-
-function useSetNodeTransition(props, style) {
-    /* eslint-disable no-param-reassign */
-    const setNodeTransition = (node, mode) => {
-        const transitionProps = getTransitionStyleProps(mode, props);
-        const { properties } = props;
-        node.style.transition = properties
-            .map((propertyOrConfig) => {
-            let property;
-            let resolvedTransitionProps = transitionProps;
-            if (typeof propertyOrConfig === 'string') {
-                property = propertyOrConfig;
-            }
-            else {
-                const [, overrideTransitionProps] = propertyOrConfig;
-                [property] = propertyOrConfig;
-                resolvedTransitionProps = overrideTransitionProps(resolvedTransitionProps, mode);
-            }
-            const { delay, duration, timingFunction } = resolvedTransitionProps;
-            return `${property} ${duration}ms ${timingFunction} ${delay}ms`;
-        })
-            .join(',');
-    };
-    const resetNodeTransition = (node) => {
-        const { transition } = style || {};
-        if (transition) {
-            node.style.transition = transition;
-        }
-    };
-    /* eslint-enable no-param-reassign */
-    return [setNodeTransition, resetNodeTransition];
-}
-
-const MOTION_DURATION = {
-    shorter: 200,
-    short: 250};
-const MOTION_EASING = {
-    decelerated: 'cubic-bezier(0, 0, 0.3, 1)',
-    accelerated: 'cubic-bezier(0.32, 0, 0.67, 0)',
-};
-function reflow(node) {
-    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    node.scrollTop;
-}
-function getStyle(state, inProp, direction) {
-    if (state === 'entering' || state === 'entered') {
-        return {
-            opacity: 1,
-            transform: 'translate3d(0, 0, 0)',
-        };
-    }
-    const style = {
-        opacity: 0,
-        transform: {
-            up: 'translate3d(0, 100%, 0)',
-            right: 'translate3d(-100%, 0, 0)',
-            down: 'translate3d(0, -100%, 0)',
-            left: 'translate3d(100%, 0, 0)',
-        }[direction],
-    };
-    if (state === 'exited' && !inProp) {
-        style.visibility = 'hidden';
-    }
-    return style;
-}
-const defaultDuration = {
-    enter: MOTION_DURATION.short,
-    exit: MOTION_DURATION.shorter,
-};
-const defaultEasing = {
-    enter: MOTION_EASING.decelerated,
-    exit: MOTION_EASING.accelerated,
-};
-/**
- * The react component for `mezzanine` transition slide fade.
- */
-const SlideFade = React.forwardRef(function SlideFade(props, ref) {
-    const { children, direction = 'down', delay = 0, duration: durationProp = defaultDuration, easing = defaultEasing, in: inProp = false, onEnter, onEntered, onExit, onExited } = props, rest = tslib.__rest(props, ["children", "direction", "delay", "duration", "easing", "in", "onEnter", "onEntered", "onExit", "onExited"]);
-    const duration = durationProp === 'auto' ? defaultDuration : durationProp;
-    const nodeRef = React.useRef(null);
-    const composedNodeRef = utils.composeRefs([ref, nodeRef]);
-    const [setNodeTransition, resetNodeTransition] = useSetNodeTransition({
-        delay,
-        duration,
-        easing,
-        properties: ['opacity', 'transform'],
-    }, children === null || children === void 0 ? void 0 : children.props.style);
-    const transitionProps = Object.assign(Object.assign({}, rest), { duration, in: inProp, nodeRef,
-        onEnter(node, isAppearing) {
-            setNodeTransition(node, 'enter');
-            reflow(node);
-            if (onEnter) {
-                onEnter(node, isAppearing);
-            }
-        },
-        onEntered(node, isAppearing) {
-            resetNodeTransition(node);
-            if (onEntered) {
-                onEntered(node, isAppearing);
-            }
-        },
-        onExit(node) {
-            setNodeTransition(node, 'exit');
-            if (onExit) {
-                onExit(node);
-            }
-        },
-        onExited(node) {
-            resetNodeTransition(node);
-            if (onExited) {
-                onExited(node);
-            }
-        } });
-    return (React.createElement(Transition, Object.assign({}, transitionProps), children &&
-        ((state) => React.cloneElement(children, Object.assign(Object.assign({}, children.props), { ref: composedNodeRef, style: Object.assign(Object.assign({}, getStyle(state, inProp, direction)), children.props.style) })))));
-});
-
-const Message = ((props) => {
-    const { children, theme, duration, icon, reference, severity, onExited: onExitedProp } = props, restTransitionProps = tslib.__rest(props, ["children", "theme", "duration", "icon", "reference", "severity", "onExited"]);
-    const [open, setOpen] = React.useState(true);
-    React.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: icons.Success,
-    },
-    {
-        key: 'warning',
-        icon: icons.Warning,
-    },
-    {
-        key: 'error',
-        icon: icons.Error,
-    },
-    {
-        key: 'info',
-        icon: icons.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 }));
-});
-
-const SegmentedControl = ({ options, value, onChange, disabled }) => {
-    return (React.createElement("div", { className: clsx('qdr-segmented-control', {
-            'qdr-segmented-control--disabled': disabled || options.filter((o) => o.disabled).length === options.length,
-        }) }, options.map((option) => (React.createElement("button", { key: option.value, type: "button", disabled: disabled || option.disabled, className: clsx('qdr-segmented-control__button', {
-            'qdr-segmented-control__button--active': value === option.value,
-        }), onClick: () => {
-            onChange(option.value);
-        } }, option.label)))));
-};
-
-const Toggle = ({ onChange, checked, disabled }) => {
-    return (React.createElement("div", { className: clsx('qdr-toggle', {
-            'qdr-toggle--checked': checked,
-            'qdr-toggle--disabled': disabled,
-        }) },
-        React.createElement("div", { className: "qdr-toggle__control" }),
-        React.createElement("input", { "aria-checked": checked, "aria-disabled": disabled, checked: checked, className: "qdr-toggle__input", disabled: disabled, onChange: (e) => {
-                onChange(e.target.checked);
-            }, type: "checkbox" })));
-};
-
-function isContainerAsDocument(container) {
-    return container === document.documentElement || container === document.body;
-}
-function getTargetRect(container, targetEl) {
-    const triggerRect = targetEl.getBoundingClientRect();
-    if (isContainerAsDocument(container)) {
-        return triggerRect;
-    }
-    const containerRect = container.getBoundingClientRect();
-    const { width, height } = triggerRect;
-    const top = triggerRect.top - containerRect.top;
-    const left = triggerRect.left - containerRect.left;
-    return {
-        width,
-        height,
-        top,
-        bottom: top + height,
-        left,
-        right: left + width,
-    };
-}
-function getScrollLeftAndTop(container) {
-    const isAsDocument = isContainerAsDocument(container);
-    return {
-        scrollTop: isAsDocument ? document.documentElement.scrollTop + document.body.scrollTop : container.scrollTop,
-        scrollLeft: isAsDocument ? document.documentElement.scrollLeft + document.body.scrollLeft : container.scrollLeft,
-    };
-}
-function calculatePosition(props, triggerEl, popupEl) {
-    const { placement, getContainer, horizontalOffset, verticalOffset, } = props;
-    const isTop = placement.includes('top');
-    const isBottom = placement.includes('bottom');
-    const isLeft = placement.includes('left');
-    const isRight = placement.includes('right');
-    const container = getContainer();
-    const triggerRect = getTargetRect(container, triggerEl);
-    const { width: popupWidth, height: popupHeight } = popupEl.getBoundingClientRect();
-    let { scrollTop: top, scrollLeft: left } = getScrollLeftAndTop(container);
-    /**
-     * position
-     */
-    if (isLeft) {
-        left += triggerRect.left;
-    }
-    else if (isRight) {
-        left += triggerRect.right - popupWidth;
-    }
-    else {
-        left += triggerRect.left + (triggerRect.width - popupWidth) / 2;
-    }
-    if (isTop) {
-        top += triggerRect.top - popupHeight;
-    }
-    else if (isBottom) {
-        top += triggerRect.bottom;
-    }
-    else {
-        top += triggerRect.top + (triggerRect.height - popupHeight) / 2;
-        left += isLeft ? -popupWidth : popupWidth;
-    }
-    /**
-     * offset
-     */
-    top += isTop ? -verticalOffset : verticalOffset;
-    left += isLeft ? -horizontalOffset : horizontalOffset;
-    return { top, left };
-}
-
-const clsPrefix = 'qdr-tooltip';
-const defaultTriggers = ['hover'];
-const defaultGetContainer = () => document.body;
-const defaultTransitionClassNames = {
-    enter: `${clsPrefix}__fade--enter`,
-    enterActive: `${clsPrefix}__fade--enter-active`,
-    exit: `${clsPrefix}__fade--exit`,
-    exitActive: `${clsPrefix}__fade--exit-active`,
-};
-/**
- * @todo
- * To implement all placement.
- * Extract Popup from Tooltip.
- */
-function Tooltip({ children, triggers = defaultTriggers, popup, getContainer = defaultGetContainer, placement = 'top', horizontalOffset = 0, verticalOffset = 0, transitionClassNames = defaultTransitionClassNames, mouseEnterDelay = 0, mouseLeaveDelay = 0.1, }) {
-    const { props: themeProps } = React.useContext(configs.ThemeContext);
-    const [visible, setVisible] = React.useState(false);
-    const delayTimer = React.useRef(NaN);
-    const nodeRef = React.useRef(null);
-    const clearDelayTimer = React.useCallback(() => {
-        if (delayTimer.current) {
-            window.clearTimeout(delayTimer.current);
-            delayTimer.current = NaN;
-        }
-    }, []);
-    const delaySetVisible = React.useCallback((setVisibleAction, delay) => {
-        clearDelayTimer();
-        if (delay) {
-            delayTimer.current = window.setTimeout(() => {
-                setVisible(setVisibleAction);
-                clearDelayTimer();
-            }, delay * 1000);
-        }
-        else {
-            setVisible(setVisibleAction);
-        }
-    }, [clearDelayTimer]);
-    const triggerRef = React.useRef(null);
-    const popupRef = React.useRef(null);
-    const [firstPlacement, secondPlacement] = placement.split('-');
-    const child = React.Children.only(children);
-    const triggerProps = {};
-    const popupProps = {};
-    if (triggers.includes('click')) {
-        triggerProps.onClick = (event) => {
-            var _a, _b;
-            delaySetVisible((prevVisible) => !prevVisible, 0);
-            (_b = (_a = child.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
-        };
-    }
-    if (triggers.includes('hover')) {
-        popupProps.onMouseEnter = clearDelayTimer;
-        popupProps.onMouseLeave = (event) => {
-            var _a;
-            if (!(event.relatedTarget instanceof Node && ((_a = popupRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget)))) {
-                delaySetVisible(false, mouseLeaveDelay);
-            }
-        };
-        triggerProps.onMouseEnter = (event) => {
-            var _a, _b;
-            delaySetVisible(true, mouseEnterDelay);
-            (_b = (_a = child.props).onMouseEnter) === null || _b === void 0 ? void 0 : _b.call(_a, event);
-        };
-        triggerProps.onMouseLeave = (event) => {
-            var _a, _b;
-            delaySetVisible(false, mouseLeaveDelay);
-            (_b = (_a = child.props).onMouseLeave) === null || _b === void 0 ? void 0 : _b.call(_a, event);
-        };
-    }
-    const trigger = React.cloneElement(child, Object.assign(Object.assign({}, triggerProps), { ref: utils.composeRefs([triggerRef, child.ref]) }));
-    React.useLayoutEffect(() => {
-        const triggerEl = triggerRef.current;
-        const popupEl = popupRef.current;
-        if (!(visible && triggerEl && popupEl)) {
-            return;
-        }
-        const { top, left } = calculatePosition({
-            placement,
-            getContainer,
-            horizontalOffset,
-            verticalOffset,
-        }, triggerEl, popupEl);
-        popupEl.style.top = `${top}px`;
-        popupEl.style.left = `${left}px`;
-    }, [visible, placement, getContainer, horizontalOffset, verticalOffset]);
-    React.useLayoutEffect(() => {
-        if (!visible) {
-            return;
-        }
-        function clickOutSideHandler(event) {
-            event.preventDefault();
-            const popupEl = popupRef.current;
-            const targetEl = event.target;
-            const targetUnmount = targetEl.offsetParent === null;
-            if (!((popupEl === null || popupEl === void 0 ? void 0 : popupEl.contains(targetEl)) || targetUnmount)) {
-                setVisible(false);
-            }
-        }
-        document.addEventListener('click', clickOutSideHandler);
-        return () => {
-            document.removeEventListener('click', clickOutSideHandler);
-        };
-    }, [visible]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Portal, { getContainer: getContainer },
-            React.createElement(reactTransitionGroup.CSSTransition, { nodeRef: nodeRef, in: visible, classNames: transitionClassNames, timeout: 200, unmountOnExit: true },
-                React.createElement("div", { ref: nodeRef, className: `${clsPrefix}__mask` },
-                    React.createElement("div", Object.assign({ className: clsx(themeProps.className, `${clsPrefix}__popup`, `${clsPrefix}__popup--${firstPlacement}`), ref: popupRef, style: themeProps.style }, popupProps),
-                        React.createElement("div", { className: clsx(`${clsPrefix}__arrow`, `${clsPrefix}__arrow--${firstPlacement}`, {
-                                [`${clsPrefix}__arrow--${placement}`]: secondPlacement,
-                            }) }),
-                        React.createElement("div", { className: `${clsPrefix}__content` }, popup))))),
-        trigger));
-}
-
-exports.BaseField = BaseField;
-exports.Button = Button;
-exports.Hint = Hint;
-exports.Hints = Hints;
-exports.Icon = Icon;
-exports.ImageUploader = ImageUploader;
-exports.Input = Input;
-exports.Message = Message;
-exports.Modal = Modal;
-exports.Portal = Portal;
-exports.Progress = Progress;
-exports.SegmentedControl = SegmentedControl;
-exports.Textarea = Textarea;
-exports.Toggle = Toggle;
-exports.Tooltip = Tooltip;
-exports.createNotifier = createNotifier;