@quadrats/react 0.7.8 → 1.0.0

package/components/index.cjs.js

@@ -1,12 +1,15 @@
 'use strict';
 
-var tslib = require('tslib');
 var React = require('react');
-var ReactDOM = require('react-dom');
+var icons = require('@quadrats/icons');
 var clsx = require('clsx');
-var reactTransitionGroup = require('react-transition-group');
+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',
@@ -25,22 +28,643 @@ const Icon = React.forwardRef((_a, 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 Progress = React.forwardRef(function Progress(props, ref) {
-    const { className, percentage = 0 } = props;
-    const transform = `scaleX(${percentage / 100})`;
+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 = {
-        transform,
-        msTransform: transform,
+        opacity: 0,
+        transform: {
+            up: 'translate3d(0, 100%, 0)',
+            right: 'translate3d(-100%, 0, 0)',
+            down: 'translate3d(0, -100%, 0)',
+            left: 'translate3d(100%, 0, 0)',
+        }[direction],
     };
-    return (React.createElement("span", { ref: ref, className: clsx('qdr-progress', className) },
-        React.createElement("span", { className: "qdr-progress__backdrop" }),
-        React.createElement("span", { className: "qdr-progress__track", style: style })));
+    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;
@@ -222,7 +846,19 @@ function Tooltip({ children, triggers = defaultTriggers, popup, getContainer = d
         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;