react-ui89 0.60.0 → 0.62.0

package/dist/esm/index.js

@@ -1,9 +1,8 @@
 import * as React from 'react';
-import React__default, { createContext, useState, useContext, useEffect, useRef, useMemo, useImperativeHandle, useCallback } from 'react';
-import DatePicker from 'react-datepicker';
-import Timeout from 'smart-timeout';
-import { useFloating, size, autoUpdate, useClick, useDismiss, useRole, useInteractions, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
+import React__default, { createContext, useState, useContext, useEffect, useRef, useImperativeHandle, useMemo, useCallback } from 'react';
 import { createPortal } from 'react-dom';
+import { useFloating, size, autoUpdate, useClick, useDismiss, useRole, useInteractions, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
+import Timeout from 'smart-timeout';
 import { toast, ToastContainer } from 'react-toastify';
 
 var Ui89Theme;
@@ -24,15 +23,16 @@ var Ui89Look;
 const Ui89Context = createContext({
     currentZIndex: 1,
     nextZIndex: () => 1,
+    createPortal: createPortal,
 });
-const Ui89Provider = ({ routerPush, children, }) => {
+const Ui89Provider = ({ routerPush, children, createPortal: createPortal$1 = createPortal, }) => {
     const [zIndex, setZIndex] = useState(1);
     function nextZIndex() {
         const next = zIndex + 1;
         setZIndex(next);
         return next;
     }
-    return (React__default.createElement(Ui89Context.Provider, { value: { routerPush, currentZIndex: zIndex, nextZIndex } }, children));
+    return (React__default.createElement(Ui89Context.Provider, { value: { routerPush, currentZIndex: zIndex, nextZIndex, createPortal: createPortal$1 } }, children));
 };
 const useUi89 = () => {
     return useContext(Ui89Context);
@@ -207,33 +207,123 @@ function Ui89CardHorizontalConnection({ children, overflow, }) {
     return (React__default.createElement("div", { className: `ui89-card__horizontal-connection ${overflow ? "ui89-card__horizontal-connection--overflow" : ""}` }, children));
 }
 
-function Ui89DateTimePicker(props) {
-    function datepickerOnChange(value) {
-        if (props.onChange) {
-            props.onChange(value);
-        }
-    }
-    return (React__default.createElement("span", { className: "ui89-date-time-picker" },
-        React__default.createElement(DatePicker, { className: ["ui89-input-box"].join(" "), calendarClassName: "ui89-typo-normal", showTimeSelect: true, dateFormat: props.dateFormat ?? "yyyy/MM/dd HH:mm:ss", timeFormat: "HH:mm", selected: props.value, onChange: datepickerOnChange, popperPlacement: "bottom-start" })));
+function Ui89Scene({ look = Ui89Look.main, children }) {
+    return (React__default.createElement("div", { className: `ui89-scene ui-89-look-${look} ui89-typo-normal ui89-scrollbar` }, children));
 }
 
-const TimeAnimation = ({ children }) => {
-    const [currentTime, setCurrentTime] = useState(new Date());
+function useZIndexer(open) {
+    const overrides = useUi89();
+    const [value, setValue] = useState(overrides.currentZIndex);
     useEffect(() => {
-        const tick = () => {
-            const now = new Date();
-            setCurrentTime(now);
-            // Calculate time until the next exact second
-            const msUntilNextSecond = 1000 - now.getMilliseconds();
-            setTimeout(tick, msUntilNextSecond);
-        };
-        // Start the first tick
-        const msUntilNextSecond = 1000 - currentTime.getMilliseconds();
-        const timeoutId = setTimeout(tick, msUntilNextSecond);
-        return () => clearTimeout(timeoutId);
-    }, []);
-    return React__default.createElement(React__default.Fragment, null, children({ now: currentTime }));
-};
+        if (open) {
+            setValue(overrides.nextZIndex());
+        }
+    }, [open]);
+    return {
+        value,
+    };
+}
+
+var Ui89PopoverPropsPlacement;
+(function (Ui89PopoverPropsPlacement) {
+    Ui89PopoverPropsPlacement["top"] = "top";
+    Ui89PopoverPropsPlacement["topStart"] = "topStart";
+    Ui89PopoverPropsPlacement["topEnd"] = "topEnd";
+    Ui89PopoverPropsPlacement["right"] = "right";
+    Ui89PopoverPropsPlacement["rightStart"] = "rightStart";
+    Ui89PopoverPropsPlacement["rightEnd"] = "rightEnd";
+    Ui89PopoverPropsPlacement["bottom"] = "bottom";
+    Ui89PopoverPropsPlacement["bottomStart"] = "bottomStart";
+    Ui89PopoverPropsPlacement["bottomEnd"] = "bottomEnd";
+    Ui89PopoverPropsPlacement["left"] = "left";
+    Ui89PopoverPropsPlacement["leftStart"] = "leftStart";
+    Ui89PopoverPropsPlacement["leftEnd"] = "leftEnd";
+})(Ui89PopoverPropsPlacement || (Ui89PopoverPropsPlacement = {}));
+function toFloatingUiPlacement(placement) {
+    switch (placement) {
+        case Ui89PopoverPropsPlacement.top:
+            return "top";
+        case Ui89PopoverPropsPlacement.topStart:
+            return "top-start";
+        case Ui89PopoverPropsPlacement.topEnd:
+            return "top-end";
+        case Ui89PopoverPropsPlacement.right:
+            return "right";
+        case Ui89PopoverPropsPlacement.rightStart:
+            return "right-start";
+        case Ui89PopoverPropsPlacement.rightEnd:
+            return "right-end";
+        case Ui89PopoverPropsPlacement.bottom:
+            return "bottom";
+        case Ui89PopoverPropsPlacement.bottomStart:
+            return "bottom-start";
+        case Ui89PopoverPropsPlacement.bottomEnd:
+            return "bottom-end";
+        case Ui89PopoverPropsPlacement.left:
+            return "left";
+        case Ui89PopoverPropsPlacement.leftStart:
+            return "left-start";
+        case Ui89PopoverPropsPlacement.leftEnd:
+            return "left-end";
+        default:
+            throw new Error(`Unknown placement: ${placement}`);
+    }
+}
+function Ui89Popover(props) {
+    const zIndexer = useZIndexer(props.open);
+    const { refs, floatingStyles, context } = useFloating({
+        open: props.open,
+        onOpenChange: props.onOpenChange,
+        middleware: [
+            size({
+                apply({ availableWidth, availableHeight, elements }) {
+                    let width = elements.reference.getBoundingClientRect().width;
+                    if (props.popoverOverflowMaxWidth !== undefined) {
+                        if (props.popoverOverflowMaxWidth > width) {
+                            width = props.popoverOverflowMaxWidth;
+                        }
+                    }
+                    const style = {
+                        maxWidth: `${width}px`,
+                        maxHeight: `${Math.max(0, availableHeight)}px`,
+                    };
+                    if (props.popoverOverflowForce) {
+                        style.width = `${availableWidth}px`;
+                    }
+                    // Change styles, e.g.
+                    Object.assign(elements.floating.style, style);
+                },
+            }),
+        ],
+        whileElementsMounted: autoUpdate,
+        placement: toFloatingUiPlacement(props.placement ?? Ui89PopoverPropsPlacement.bottomStart),
+        strategy: "fixed",
+    });
+    const click = useClick(context, {
+        keyboardHandlers: false,
+    });
+    const dismiss = useDismiss(context);
+    const role = useRole(context);
+    const { getReferenceProps, getFloatingProps } = useInteractions([
+        click,
+        dismiss,
+        role,
+    ]);
+    return (React__default.createElement(React__default.Fragment, null,
+        props.renderContainer({
+            setRef: refs.setReference,
+            props: getReferenceProps(),
+        }),
+        props.open && (React__default.createElement(FloatingPortal, null,
+            React__default.createElement(FloatingFocusManager, { context: context, modal: false, initialFocus: -1 },
+                React__default.createElement(Ui89Scene, null,
+                    React__default.createElement("div", { ref: refs.setFloating, style: {
+                            ...floatingStyles,
+                            zIndex: zIndexer.value,
+                            display: "flex",
+                            flexDirection: "column",
+                        } }, props.renderPopover())))))));
+}
 
 function dateFormat(date, format) {
     const placeholders = {
@@ -254,83 +344,458 @@ function dateFormat(date, format) {
     return formattedDate;
 }
 
-function Ui89DigitalClock({ format = "HH:mm:ss", }) {
-    function render({ now }) {
-        return dateFormat(now, format);
-    }
-    return (React__default.createElement("span", { className: "ui89-typo-special" },
-        React__default.createElement(TimeAnimation, null, render)));
-}
-
-function Ui89HighlightText({ theme, block, children, }) {
-    return (React__default.createElement("span", { className: `ui89-highlight-text ui89-chosen-theme-${theme} ${block ? "ui89-highlight-text--block" : null}` }, children));
-}
-
-var Ui89HrPropsLook;
-(function (Ui89HrPropsLook) {
-    Ui89HrPropsLook["straight"] = "straight";
-    Ui89HrPropsLook["dotted"] = "dotted";
-    Ui89HrPropsLook["dashed"] = "dashed";
-    Ui89HrPropsLook["double"] = "double";
-})(Ui89HrPropsLook || (Ui89HrPropsLook = {}));
-function Ui89Hr({ look = "straight", theme }) {
-    return (React__default.createElement("div", { className: `ui-89-hr ${`ui-89-hr--${look}`} ${theme !== undefined ? "ui-89-hr--use-theme" : ""} ${theme !== undefined ? `ui89-chosen-theme-${theme}` : ""}` },
-        React__default.createElement("div", { className: "ui-89-hr__double" })));
-}
-
-function Ui89SpacePadding(props) {
-    const gap = props.gap ?? 1;
-    const style = {
-        paddingTop: `calc(var(--ui89-safe-space) * ${props.gapTop ?? props.gapVertical ?? gap})`,
-        paddingRight: `calc(var(--ui89-safe-space) * ${props.gapRight ?? props.gapHorizontal ?? gap})`,
-        paddingBottom: `calc(var(--ui89-safe-space) * ${props.gapBottom ?? props.gapVertical ?? gap})`,
-        paddingLeft: `calc(var(--ui89-safe-space) * ${props.gapLeft ?? props.gapHorizontal ?? gap})`,
+let uniqueId = 0;
+function throttledTimeout() {
+    const id = String(uniqueId++);
+    let callback;
+    return {
+        call(delay, f) {
+            callback = f;
+            if (Timeout.pending(id)) {
+                Timeout.restart(id);
+            }
+            else {
+                Timeout.set(id, () => callback(), delay);
+            }
+        },
+        /**
+         * If there is a call that has been scheduled, remove it from the queue.
+         */
+        abort() {
+            Timeout.clear(id, true);
+        },
+        /**
+         * Lets you know whether a call is pending.
+         */
+        isPending() {
+            return Timeout.pending(id);
+        },
     };
-    return React__default.createElement("div", { style: style }, props.children);
 }
 
-function Ui89Indent(props) {
-    const gap = props.gap ?? 1;
-    return (React__default.createElement(Ui89SpacePadding, { gap: 0, gapLeft: gap }, props.children));
+function useUpdatedRef(value) {
+    const valueRef = useRef(value);
+    useEffect(() => {
+        valueRef.current = value;
+    }, [value]);
+    return valueRef;
 }
 
-function Ui89InputCheckBox(props) {
-    function toggle() {
-        if (props.onChange) {
-            props.onChange(!props.value);
+const LAST_VALUE_CHANGED = Symbol("LAST_VALUE_CHANGED");
+const OVERRIDEN_VALUE_UNDEFINED = Symbol("OVERRIDEN_VALUE_UNDEFINED");
+function useDelayedOnChange(props) {
+    const valueRef = useUpdatedRef(props.value);
+    const onChangeRef = useUpdatedRef(props.onChange);
+    const [intermediateValue, setIntermediateValue] = useState(props.defaultValue || props.value);
+    useEffect(() => {
+        stateRef.current.setValue(props.value);
+    }, [props.value]);
+    function callOnChange() {
+        let newVal = stateRef.current.value;
+        if (props.filter !== undefined) {
+            newVal = props.filter(newVal);
         }
+        if (newVal !== valueRef.current) {
+            onChangeRef.current?.call(null, newVal);
+        }
+        return newVal;
     }
-    return (React__default.createElement("span", { className: "ui89-input-check-box", onClick: toggle, role: "checkbox", "aria-checked": props.value ? "true" : "false" },
-        React__default.createElement("span", { className: "ui89-input-check-box__x" }, props.value ? React__default.createElement(React__default.Fragment, null, "X") : React__default.createElement(React__default.Fragment, null, "\u00A0"))));
-}
-
-const useResizeObserver = (ref) => {
-    const [size, setSize] = useState({ width: 0, height: 0 });
-    useEffect(() => {
-        const observer = new ResizeObserver((entries) => {
-            for (let entry of entries) {
-                setSize({
-                    width: entry.borderBoxSize?.[0]?.inlineSize ?? entry.contentRect.width,
-                    height: entry.borderBoxSize?.[0]?.blockSize ?? entry.contentRect.height,
-                });
-            }
-        });
-        if (ref.current) {
-            observer.observe(ref.current);
+    class StateUnknown {
+        state = "unknown";
+        value;
+        throttledTimeout;
+        constructor() {
+            this.throttledTimeout = throttledTimeout();
         }
-        return () => {
-            observer.disconnect();
-        };
-    }, [ref.current]);
-    return {
-        size,
-    };
-};
-
-const useScrollYPosition = (ref) => {
-    const [scrollY, setScrollY] = useState(0);
-    const ticking = useRef(false);
-    const observer = useRef(null);
+        setValue(newVal) {
+            setIntermediateValue(newVal);
+        }
+        onChange(newVal) {
+            setIntermediateValue(newVal);
+            stateRef.current.throttledTimeout.call(300, callOnChange);
+        }
+        onFocus() {
+            let newState = new StateFocus();
+            newState.value = stateRef.current.value;
+            newState.lastValue = newState.value;
+            setState(newState);
+        }
+        onBlur() { }
+        onConfirm() {
+            callOnChange();
+        }
+    }
+    class StateFocus {
+        state = "focus";
+        value;
+        lastValue;
+        /**
+         * If we receive a new value, we keep track of it here. We set this to
+         * OVERRIDEN_VALUE_UNDEFINED if the value is meant to be discarded.
+         */
+        overridenValue;
+        throttledTimeout;
+        constructor() {
+            this.overridenValue = OVERRIDEN_VALUE_UNDEFINED;
+            this.throttledTimeout = throttledTimeout();
+        }
+        setValue(newVal) {
+            if (stateRef.current.value === stateRef.current.lastValue) {
+                // No changes.
+                setIntermediateValue(newVal);
+                // Making sure we keep updating.
+                stateRef.current.lastValue = newVal;
+            }
+            else {
+                // There have been changes. Let's not bother the user.
+                stateRef.current.overridenValue = newVal;
+            }
+        }
+        onChange(newVal) {
+            // Discard last setValue call
+            stateRef.current.overridenValue = OVERRIDEN_VALUE_UNDEFINED;
+            stateRef.current.lastValue = LAST_VALUE_CHANGED;
+            setIntermediateValue(newVal);
+            stateRef.current.throttledTimeout.call(300, callOnChange);
+        }
+        onFocus() { }
+        onBlur() {
+            // We need to make sure that we emit immediately. Do not want to leave
+            // user waiting.
+            // We can cancel this one.
+            stateRef.current.throttledTimeout.abort();
+            if (stateRef.current.overridenValue !== OVERRIDEN_VALUE_UNDEFINED) {
+                stateRef.current.value = stateRef.current.overridenValue;
+            }
+            let newVal = callOnChange();
+            setIntermediateValue(newVal);
+            let newState = new StateUnknown();
+            newState.value = newVal;
+            setState(newState);
+        }
+        onConfirm() {
+            callOnChange();
+        }
+    }
+    const [state, setState] = useState(() => {
+        let newState = new StateUnknown();
+        newState.value = intermediateValue;
+        return newState;
+    });
+    const stateRef = useUpdatedRef(state);
+    stateRef.current.value = intermediateValue;
+    return state;
+}
+
+const Ui89InputText = React__default.forwardRef(function Ui89InputText({ value, placeholder, autoTrim = true, disabled, textAlign, onChange, onTyping, onFocus, onBlur, }, ref) {
+    const inputRef = useRef(null);
+    const delayedState = useDelayedOnChange({
+        defaultValue: "",
+        value,
+        onChange,
+        filter(value) {
+            if (autoTrim) {
+                if (typeof value === "string") {
+                    value = value.replace(/\s+/g, " ").trim();
+                }
+            }
+            return value;
+        },
+    });
+    useImperativeHandle(ref, () => ({
+        focus: () => {
+            inputRef.current?.focus();
+        },
+    }));
+    return (React__default.createElement("div", null,
+        React__default.createElement("input", { ref: inputRef, className: [
+                "ui89-input-box",
+                disabled ? "ui89-input-box--disabled" : "",
+            ].join(" "), style: { textAlign }, type: "text", disabled: disabled, value: delayedState.value, onChange: (e) => delayedState.onChange(e.target.value), onBlur: delayedState.onBlur, onFocus: delayedState.onFocus, onKeyDown: (e) => {
+                if (e.key === "Enter") {
+                    delayedState.onConfirm();
+                }
+            }, placeholder: placeholder })));
+});
+
+function stringRemoveAllWhitespace(str) {
+    return str.replace(/\s+/g, "");
+}
+
+function isTextNumber(text) {
+    return /^\d+(\.\d+)?$/.test(text);
+}
+function displayText(value) {
+    if (value === undefined) {
+        // No idea how to display this.
+        return "";
+    }
+    else if (isNaN(value)) {
+        // No idea what to display.
+        return "";
+    }
+    return value.toString();
+}
+function dotsMakeMoreSense(value) {
+    return value.replaceAll(",", ".");
+}
+function Ui89InputTextNumber(props) {
+    const wrappedValue = useMemo(() => {
+        return displayText(props.value);
+    }, [props.value]);
+    function implOnChange(value) {
+        if (props.onChange === undefined) {
+            return;
+        }
+        if (value === "") {
+            // Use empty value.
+            props.onChange(props.emptyValue);
+            return;
+        }
+        value = stringRemoveAllWhitespace(value);
+        value = dotsMakeMoreSense(value);
+        if (!isTextNumber(value)) {
+            // We end here.
+            return;
+        }
+        const numberValue = Number(value);
+        if (props.min !== undefined) {
+            if (numberValue <= props.min) {
+                value = String(props.min);
+            }
+        }
+        if (props.max !== undefined) {
+            if (numberValue >= props.max) {
+                value = String(props.max);
+            }
+        }
+        props.onChange(value);
+    }
+    return (React__default.createElement(Ui89InputText, { value: wrappedValue, onChange: implOnChange, disabled: props.disabled, textAlign: props.textAlign }));
+}
+
+function Ui89DateTimePicker(props) {
+    const [open, setOpen] = useState(false);
+    const [inputValue, setInputValue] = useState("");
+    const [viewDate, setViewDate] = useState(new Date());
+    const dateFormat$1 = props.dateFormat ?? "YYYY/MM/DD HH:mm:ss";
+    useEffect(() => {
+        if (props.value) {
+            setInputValue(dateFormat(props.value, dateFormat$1));
+            setViewDate(props.value);
+        }
+        else {
+            setInputValue("");
+        }
+    }, [props.value, dateFormat$1]);
+    function handleInputChange(val) {
+        setInputValue(val);
+        const date = new Date(val);
+        if (!isNaN(date.getTime())) {
+            if (props.onChange)
+                props.onChange(date);
+            setViewDate(date);
+        }
+        else if (val.trim() === "") {
+            if (props.onChange)
+                props.onChange(null);
+        }
+    }
+    function adjustMonth(offset) {
+        const newDate = new Date(viewDate);
+        newDate.setMonth(newDate.getMonth() + offset);
+        setViewDate(newDate);
+    }
+    function handleDayClick(day) {
+        const newDate = new Date(day);
+        if (props.value) {
+            newDate.setHours(props.value.getHours());
+            newDate.setMinutes(props.value.getMinutes());
+            newDate.setSeconds(props.value.getSeconds());
+        }
+        else {
+            newDate.setHours(12, 0, 0, 0);
+        }
+        if (props.onChange)
+            props.onChange(newDate);
+    }
+    function handleTimeChange(type, val) {
+        if (!props.value)
+            return;
+        const num = parseInt(val, 10);
+        if (isNaN(num))
+            return;
+        const newDate = new Date(props.value);
+        if (type === "h")
+            newDate.setHours(Math.min(23, Math.max(0, num)));
+        if (type === "m")
+            newDate.setMinutes(Math.min(59, Math.max(0, num)));
+        if (type === "s")
+            newDate.setSeconds(Math.min(59, Math.max(0, num)));
+        if (props.onChange)
+            props.onChange(newDate);
+    }
+    function renderCalendar() {
+        const year = viewDate.getFullYear();
+        const month = viewDate.getMonth();
+        const firstDay = new Date(year, month, 1);
+        const startDay = firstDay.getDay();
+        const startDate = new Date(year, month, 1 - startDay);
+        const days = [];
+        const current = new Date(startDate);
+        for (let i = 0; i < 42; i++) {
+            days.push(new Date(current));
+            current.setDate(current.getDate() + 1);
+        }
+        return (React__default.createElement("div", { style: { width: "300px", padding: "10px" } },
+            React__default.createElement("div", { style: {
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    marginBottom: "10px",
+                } },
+                React__default.createElement(Ui89Button, { size: Ui89ButtonPropsSize.square, onClick: () => adjustMonth(-1) }, "<"),
+                React__default.createElement("div", { className: "ui89-typo-normal" }, dateFormat(viewDate, "MM/YYYY")),
+                React__default.createElement(Ui89Button, { size: Ui89ButtonPropsSize.square, onClick: () => adjustMonth(1) }, ">")),
+            React__default.createElement("div", { style: {
+                    display: "grid",
+                    gridTemplateColumns: "repeat(7, 1fr)",
+                    gap: "2px",
+                } },
+                ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((d) => (React__default.createElement("div", { key: d, className: "ui89-typo-small-bold", style: { textAlign: "center", padding: "5px" } }, d))),
+                days.map((d, i) => {
+                    const isSelected = props.value &&
+                        d.getDate() === props.value.getDate() &&
+                        d.getMonth() === props.value.getMonth() &&
+                        d.getFullYear() === props.value.getFullYear();
+                    const isCurrentMonth = d.getMonth() === month;
+                    return (React__default.createElement("div", { key: i, className: "ui89-typo-normal", onClick: () => handleDayClick(d), style: {
+                            textAlign: "center",
+                            padding: "5px",
+                            cursor: "pointer",
+                            backgroundColor: isSelected
+                                ? "var(--ui89-theme-primary-bg-color)"
+                                : "transparent",
+                            opacity: isCurrentMonth ? 1 : 0.3,
+                        } }, d.getDate()));
+                })),
+            props.value && (React__default.createElement("div", { style: {
+                    display: "flex",
+                    gap: "5px",
+                    marginTop: "10px",
+                    justifyContent: "center",
+                    alignItems: "center",
+                } },
+                React__default.createElement("div", { style: { width: "35px" } },
+                    React__default.createElement(Ui89InputTextNumber, { value: props.value.getHours(), onChange: (val) => handleTimeChange("h", val), min: 0, max: 23, textAlign: "right" })),
+                ":",
+                React__default.createElement("div", { style: { width: "35px" } },
+                    React__default.createElement(Ui89InputTextNumber, { value: props.value.getMinutes(), onChange: (val) => handleTimeChange("m", val), min: 0, max: 59, textAlign: "right" })),
+                ":",
+                React__default.createElement("div", { style: { width: "35px" } },
+                    React__default.createElement(Ui89InputTextNumber, { value: props.value.getSeconds(), onChange: (val) => handleTimeChange("s", val), min: 0, max: 59, textAlign: "right" }))))));
+    }
+    return (React__default.createElement(Ui89Popover, { open: open, onOpenChange: setOpen, popoverOverflowMaxWidth: 360, renderContainer: ({ setRef, props: popoverProps }) => (React__default.createElement("div", { className: "ui89-date-time-picker", ref: setRef, ...popoverProps },
+            React__default.createElement(Ui89InputText, { value: inputValue, onChange: handleInputChange, placeholder: dateFormat$1 }))), renderPopover: () => (React__default.createElement("div", { style: { maxWidth: "360px" } },
+            React__default.createElement(HoverShadow, null,
+                React__default.createElement(Ui89Card, null, renderCalendar())))) }));
+}
+
+const TimeAnimation = ({ children }) => {
+    const [currentTime, setCurrentTime] = useState(new Date());
+    useEffect(() => {
+        const tick = () => {
+            const now = new Date();
+            setCurrentTime(now);
+            // Calculate time until the next exact second
+            const msUntilNextSecond = 1000 - now.getMilliseconds();
+            setTimeout(tick, msUntilNextSecond);
+        };
+        // Start the first tick
+        const msUntilNextSecond = 1000 - currentTime.getMilliseconds();
+        const timeoutId = setTimeout(tick, msUntilNextSecond);
+        return () => clearTimeout(timeoutId);
+    }, []);
+    return React__default.createElement(React__default.Fragment, null, children({ now: currentTime }));
+};
+
+function Ui89DigitalClock({ format = "HH:mm:ss", }) {
+    function render({ now }) {
+        return dateFormat(now, format);
+    }
+    return (React__default.createElement("span", { className: "ui89-typo-special" },
+        React__default.createElement(TimeAnimation, null, render)));
+}
+
+function Ui89HighlightText({ theme, block, children, }) {
+    return (React__default.createElement("span", { className: `ui89-highlight-text ui89-chosen-theme-${theme} ${block ? "ui89-highlight-text--block" : null}` }, children));
+}
+
+var Ui89HrPropsLook;
+(function (Ui89HrPropsLook) {
+    Ui89HrPropsLook["straight"] = "straight";
+    Ui89HrPropsLook["dotted"] = "dotted";
+    Ui89HrPropsLook["dashed"] = "dashed";
+    Ui89HrPropsLook["double"] = "double";
+})(Ui89HrPropsLook || (Ui89HrPropsLook = {}));
+function Ui89Hr({ look = "straight", theme }) {
+    return (React__default.createElement("div", { className: `ui-89-hr ${`ui-89-hr--${look}`} ${theme !== undefined ? "ui-89-hr--use-theme" : ""} ${theme !== undefined ? `ui89-chosen-theme-${theme}` : ""}` },
+        React__default.createElement("div", { className: "ui-89-hr__double" })));
+}
+
+function Ui89SpacePadding(props) {
+    const gap = props.gap ?? 1;
+    const style = {
+        paddingTop: `calc(var(--ui89-safe-space) * ${props.gapTop ?? props.gapVertical ?? gap})`,
+        paddingRight: `calc(var(--ui89-safe-space) * ${props.gapRight ?? props.gapHorizontal ?? gap})`,
+        paddingBottom: `calc(var(--ui89-safe-space) * ${props.gapBottom ?? props.gapVertical ?? gap})`,
+        paddingLeft: `calc(var(--ui89-safe-space) * ${props.gapLeft ?? props.gapHorizontal ?? gap})`,
+    };
+    return React__default.createElement("div", { style: style }, props.children);
+}
+
+function Ui89Indent(props) {
+    const gap = props.gap ?? 1;
+    return (React__default.createElement(Ui89SpacePadding, { gap: 0, gapLeft: gap }, props.children));
+}
+
+function Ui89InputCheckBox(props) {
+    function toggle() {
+        if (props.onChange) {
+            props.onChange(!props.value);
+        }
+    }
+    return (React__default.createElement("span", { className: "ui89-input-check-box", onClick: toggle, role: "checkbox", "aria-checked": props.value ? "true" : "false" },
+        React__default.createElement("span", { className: "ui89-input-check-box__x" }, props.value ? React__default.createElement(React__default.Fragment, null, "X") : React__default.createElement(React__default.Fragment, null, "\u00A0"))));
+}
+
+const useResizeObserver = (ref) => {
+    const [size, setSize] = useState({ width: 0, height: 0 });
+    useEffect(() => {
+        const observer = new ResizeObserver((entries) => {
+            for (let entry of entries) {
+                setSize({
+                    width: entry.borderBoxSize?.[0]?.inlineSize ?? entry.contentRect.width,
+                    height: entry.borderBoxSize?.[0]?.blockSize ?? entry.contentRect.height,
+                });
+            }
+        });
+        if (ref.current) {
+            observer.observe(ref.current);
+        }
+        return () => {
+            observer.disconnect();
+        };
+    }, [ref.current]);
+    return {
+        size,
+    };
+};
+
+const useScrollYPosition = (ref) => {
+    const [scrollY, setScrollY] = useState(0);
+    const ticking = useRef(false);
+    const observer = useRef(null);
     useEffect(() => {
         const element = ref.current;
         if (!element)
@@ -468,384 +933,97 @@ function Ui89InputCheckList(props) {
             ? props.getValueKey(value)
             : String(value);
     }
-    const valueSet = useMemo(() => {
-        const set = new Set();
-        for (const value of props.value) {
-            set.add(getValueKey(value));
-        }
-        return set;
-    }, [props.value]);
-    const renderRow = (props2) => {
-        const key = getValueKey(props2.row);
-        const value = valueSet.has(key);
-        const label = props.renderOption !== undefined
-            ? props.renderOption({ option: props2.row, index: props2.index })
-            : String(props2.row);
-        function onChange(checked) {
-            if (checked) {
-                if (props.onSelect !== undefined) {
-                    props.onSelect(props2.row);
-                }
-            }
-            else {
-                if (props.onDeselect !== undefined) {
-                    props.onDeselect(props2.row);
-                }
-            }
-            if (props.onChange !== undefined) {
-                if (checked) {
-                    props.onChange([...props.value, props2.row]);
-                }
-                else {
-                    props.onChange(props.value.filter((item) => getValueKey(item) !== key));
-                }
-            }
-        }
-        function toggle() {
-            onChange(!value);
-        }
-        return (React__default.createElement("div", { style: {
-                display: "flex",
-                alignItems: "center",
-                gap: "var(--ui89-safe-space)",
-                height: "100%",
-            } },
-            React__default.createElement(Ui89InputCheckBox, { value: value, onChange: onChange }),
-            React__default.createElement("div", { className: "ui89-text-ellipsis", style: { minWidth: 0, cursor: "pointer" }, onClick: toggle }, label)));
-    };
-    return (React__default.createElement("div", { style: {
-            display: "flex",
-            flexDirection: "column",
-            maxHeight: props.maxHeight,
-        } },
-        React__default.createElement(Ui89VirtualList, { rows: props.options, renderRow: renderRow, getRowKey: props.getValueKey, rowHeight: props.optionHeight ?? 40, maxHeight: "100%" })));
-}
-
-function Ui89InputCheckText(props) {
-    function toggle() {
-        if (props.onChange) {
-            props.onChange(!props.value);
-        }
-    }
-    return (React__default.createElement("span", { className: "ui89-input-check-text", onClick: toggle }, props.value ? "[X]" : "[ ]"));
-}
-
-function Ui89InputFileUpload(props) {
-    const inputRef = useRef(null);
-    function implOnChange(e) {
-        if (!props.onChange) {
-            return;
-        }
-        if (e.target.files === null) {
-            props.onChange(null);
-            return;
-        }
-        if (e.target.files.length === 0) {
-            props.onChange(null);
-            return;
-        }
-        props.onChange(e.target.files[0]);
-        // Reset the file input's value to allow selecting the same file again.
-        e.target.value = "";
-    }
-    function onClick() {
-        if (inputRef.current === null) {
-            return;
-        }
-        inputRef.current.click();
-    }
-    return (React__default.createElement("div", null,
-        React__default.createElement("input", { ref: inputRef, className: "ui89-typo-special", type: "file", onChange: implOnChange, accept: props.accept, hidden: true }),
-        props.value ? (React__default.createElement("div", { className: "ui89-input-file-upload" },
-            React__default.createElement(Ui89Button, { onClick: onClick }, "Change"),
-            React__default.createElement("span", { className: `ui89-input-file-upload__info ui89-text-single-line ui89-text-single-line--ellipsis-left`, title: props.value.name }, props.value.name))) : (React__default.createElement(Ui89Button, { onClick: onClick }, "Upload"))));
-}
-
-let uniqueId = 0;
-function throttledTimeout() {
-    const id = String(uniqueId++);
-    let callback;
-    return {
-        call(delay, f) {
-            callback = f;
-            if (Timeout.pending(id)) {
-                Timeout.restart(id);
-            }
-            else {
-                Timeout.set(id, () => callback(), delay);
-            }
-        },
-        /**
-         * If there is a call that has been scheduled, remove it from the queue.
-         */
-        abort() {
-            Timeout.clear(id, true);
-        },
-        /**
-         * Lets you know whether a call is pending.
-         */
-        isPending() {
-            return Timeout.pending(id);
-        },
-    };
-}
-
-function useUpdatedRef(value) {
-    const valueRef = useRef(value);
-    useEffect(() => {
-        valueRef.current = value;
-    }, [value]);
-    return valueRef;
-}
-
-const LAST_VALUE_CHANGED = Symbol("LAST_VALUE_CHANGED");
-const OVERRIDEN_VALUE_UNDEFINED = Symbol("OVERRIDEN_VALUE_UNDEFINED");
-function useDelayedOnChange(props) {
-    const valueRef = useUpdatedRef(props.value);
-    const onChangeRef = useUpdatedRef(props.onChange);
-    const [intermediateValue, setIntermediateValue] = useState(props.defaultValue || props.value);
-    useEffect(() => {
-        stateRef.current.setValue(props.value);
-    }, [props.value]);
-    function callOnChange() {
-        let newVal = stateRef.current.value;
-        if (props.filter !== undefined) {
-            newVal = props.filter(newVal);
-        }
-        if (newVal !== valueRef.current) {
-            onChangeRef.current?.call(null, newVal);
-        }
-        return newVal;
-    }
-    class StateUnknown {
-        state = "unknown";
-        value;
-        throttledTimeout;
-        constructor() {
-            this.throttledTimeout = throttledTimeout();
-        }
-        setValue(newVal) {
-            setIntermediateValue(newVal);
-        }
-        onChange(newVal) {
-            setIntermediateValue(newVal);
-            stateRef.current.throttledTimeout.call(300, callOnChange);
-        }
-        onFocus() {
-            let newState = new StateFocus();
-            newState.value = stateRef.current.value;
-            newState.lastValue = newState.value;
-            setState(newState);
-        }
-        onBlur() { }
-        onConfirm() {
-            callOnChange();
-        }
-    }
-    class StateFocus {
-        state = "focus";
-        value;
-        lastValue;
-        /**
-         * If we receive a new value, we keep track of it here. We set this to
-         * OVERRIDEN_VALUE_UNDEFINED if the value is meant to be discarded.
-         */
-        overridenValue;
-        throttledTimeout;
-        constructor() {
-            this.overridenValue = OVERRIDEN_VALUE_UNDEFINED;
-            this.throttledTimeout = throttledTimeout();
-        }
-        setValue(newVal) {
-            if (stateRef.current.value === stateRef.current.lastValue) {
-                // No changes.
-                setIntermediateValue(newVal);
-                // Making sure we keep updating.
-                stateRef.current.lastValue = newVal;
-            }
-            else {
-                // There have been changes. Let's not bother the user.
-                stateRef.current.overridenValue = newVal;
-            }
-        }
-        onChange(newVal) {
-            // Discard last setValue call
-            stateRef.current.overridenValue = OVERRIDEN_VALUE_UNDEFINED;
-            stateRef.current.lastValue = LAST_VALUE_CHANGED;
-            setIntermediateValue(newVal);
-            stateRef.current.throttledTimeout.call(300, callOnChange);
-        }
-        onFocus() { }
-        onBlur() {
-            // We need to make sure that we emit immediately. Do not want to leave
-            // user waiting.
-            // We can cancel this one.
-            stateRef.current.throttledTimeout.abort();
-            if (stateRef.current.overridenValue !== OVERRIDEN_VALUE_UNDEFINED) {
-                stateRef.current.value = stateRef.current.overridenValue;
-            }
-            let newVal = callOnChange();
-            setIntermediateValue(newVal);
-            let newState = new StateUnknown();
-            newState.value = newVal;
-            setState(newState);
-        }
-        onConfirm() {
-            callOnChange();
-        }
-    }
-    const [state, setState] = useState(() => {
-        let newState = new StateUnknown();
-        newState.value = intermediateValue;
-        return newState;
-    });
-    const stateRef = useUpdatedRef(state);
-    stateRef.current.value = intermediateValue;
-    return state;
-}
-
-const Ui89InputText = React__default.forwardRef(function Ui89InputText({ value, placeholder, autoTrim = true, disabled, onChange, onTyping, onFocus, onBlur, }, ref) {
-    const inputRef = useRef(null);
-    const delayedState = useDelayedOnChange({
-        defaultValue: "",
-        value,
-        onChange,
-        filter(value) {
-            if (autoTrim) {
-                if (typeof value === "string") {
-                    value = value.replace(/\s+/g, " ").trim();
+    const valueSet = useMemo(() => {
+        const set = new Set();
+        for (const value of props.value) {
+            set.add(getValueKey(value));
+        }
+        return set;
+    }, [props.value]);
+    const renderRow = (props2) => {
+        const key = getValueKey(props2.row);
+        const value = valueSet.has(key);
+        const label = props.renderOption !== undefined
+            ? props.renderOption({ option: props2.row, index: props2.index })
+            : String(props2.row);
+        function onChange(checked) {
+            if (checked) {
+                if (props.onSelect !== undefined) {
+                    props.onSelect(props2.row);
                 }
             }
-            return value;
-        },
-    });
-    useImperativeHandle(ref, () => ({
-        focus: () => {
-            inputRef.current?.focus();
-        },
-    }));
-    return (React__default.createElement("div", null,
-        React__default.createElement("input", { ref: inputRef, className: [
-                "ui89-input-box",
-                disabled ? "ui89-input-box--disabled" : "",
-            ].join(" "), type: "text", disabled: disabled, value: delayedState.value, onChange: (e) => delayedState.onChange(e.target.value), onBlur: delayedState.onBlur, onFocus: delayedState.onFocus, onKeyDown: (e) => {
-                if (e.key === "Enter") {
-                    delayedState.onConfirm();
+            else {
+                if (props.onDeselect !== undefined) {
+                    props.onDeselect(props2.row);
                 }
-            }, placeholder: placeholder })));
-});
-
-function Ui89Scene({ look = Ui89Look.main, children }) {
-    return (React__default.createElement("div", { className: `ui89-scene ui-89-look-${look} ui89-typo-normal ui89-scrollbar` }, children));
-}
-
-function useZIndexer(open) {
-    const overrides = useUi89();
-    const [value, setValue] = useState(overrides.currentZIndex);
-    useEffect(() => {
-        if (open) {
-            setValue(overrides.nextZIndex());
+            }
+            if (props.onChange !== undefined) {
+                if (checked) {
+                    props.onChange([...props.value, props2.row]);
+                }
+                else {
+                    props.onChange(props.value.filter((item) => getValueKey(item) !== key));
+                }
+            }
         }
-    }, [open]);
-    return {
-        value,
+        function toggle() {
+            onChange(!value);
+        }
+        return (React__default.createElement("div", { style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "var(--ui89-safe-space)",
+                height: "100%",
+            } },
+            React__default.createElement(Ui89InputCheckBox, { value: value, onChange: onChange }),
+            React__default.createElement("div", { className: "ui89-text-ellipsis", style: { minWidth: 0, cursor: "pointer" }, onClick: toggle }, label)));
     };
+    return (React__default.createElement("div", { style: {
+            display: "flex",
+            flexDirection: "column",
+            maxHeight: props.maxHeight,
+        } },
+        React__default.createElement(Ui89VirtualList, { rows: props.options, renderRow: renderRow, getRowKey: props.getValueKey, rowHeight: props.optionHeight ?? 40, maxHeight: "100%" })));
 }
 
-var Ui89PopoverPropsPlacement;
-(function (Ui89PopoverPropsPlacement) {
-    Ui89PopoverPropsPlacement["top"] = "top";
-    Ui89PopoverPropsPlacement["topStart"] = "topStart";
-    Ui89PopoverPropsPlacement["topEnd"] = "topEnd";
-    Ui89PopoverPropsPlacement["right"] = "right";
-    Ui89PopoverPropsPlacement["rightStart"] = "rightStart";
-    Ui89PopoverPropsPlacement["rightEnd"] = "rightEnd";
-    Ui89PopoverPropsPlacement["bottom"] = "bottom";
-    Ui89PopoverPropsPlacement["bottomStart"] = "bottomStart";
-    Ui89PopoverPropsPlacement["bottomEnd"] = "bottomEnd";
-    Ui89PopoverPropsPlacement["left"] = "left";
-    Ui89PopoverPropsPlacement["leftStart"] = "leftStart";
-    Ui89PopoverPropsPlacement["leftEnd"] = "leftEnd";
-})(Ui89PopoverPropsPlacement || (Ui89PopoverPropsPlacement = {}));
-function toFloatingUiPlacement(placement) {
-    switch (placement) {
-        case Ui89PopoverPropsPlacement.top:
-            return "top";
-        case Ui89PopoverPropsPlacement.topStart:
-            return "top-start";
-        case Ui89PopoverPropsPlacement.topEnd:
-            return "top-end";
-        case Ui89PopoverPropsPlacement.right:
-            return "right";
-        case Ui89PopoverPropsPlacement.rightStart:
-            return "right-start";
-        case Ui89PopoverPropsPlacement.rightEnd:
-            return "right-end";
-        case Ui89PopoverPropsPlacement.bottom:
-            return "bottom";
-        case Ui89PopoverPropsPlacement.bottomStart:
-            return "bottom-start";
-        case Ui89PopoverPropsPlacement.bottomEnd:
-            return "bottom-end";
-        case Ui89PopoverPropsPlacement.left:
-            return "left";
-        case Ui89PopoverPropsPlacement.leftStart:
-            return "left-start";
-        case Ui89PopoverPropsPlacement.leftEnd:
-            return "left-end";
-        default:
-            throw new Error(`Unknown placement: ${placement}`);
+function Ui89InputCheckText(props) {
+    function toggle() {
+        if (props.onChange) {
+            props.onChange(!props.value);
+        }
     }
+    return (React__default.createElement("span", { className: "ui89-input-check-text", onClick: toggle }, props.value ? "[X]" : "[ ]"));
 }
-function Ui89Popover(props) {
-    const zIndexer = useZIndexer(props.open);
-    const { refs, floatingStyles, context } = useFloating({
-        open: props.open,
-        onOpenChange: props.onOpenChange,
-        middleware: [
-            size({
-                apply({ availableWidth, availableHeight, elements }) {
-                    let width = elements.reference.getBoundingClientRect().width;
-                    if (props.popoverOverflowMaxWidth !== undefined) {
-                        if (props.popoverOverflowMaxWidth > width) {
-                            width = props.popoverOverflowMaxWidth;
-                        }
-                    }
-                    // Change styles, e.g.
-                    Object.assign(elements.floating.style, {
-                        width: `${availableWidth}px`,
-                        maxWidth: `${width}px`,
-                        maxHeight: `${Math.max(0, availableHeight)}px`,
-                    });
-                },
-            }),
-        ],
-        whileElementsMounted: autoUpdate,
-        placement: toFloatingUiPlacement(props.placement ?? Ui89PopoverPropsPlacement.bottomStart),
-        strategy: "fixed",
-    });
-    const click = useClick(context);
-    const dismiss = useDismiss(context);
-    const role = useRole(context);
-    const { getReferenceProps, getFloatingProps } = useInteractions([
-        click,
-        dismiss,
-        role,
-    ]);
-    return (React__default.createElement(React__default.Fragment, null,
-        props.renderContainer({
-            setRef: refs.setReference,
-            props: getReferenceProps(),
-        }),
-        props.open && (React__default.createElement(FloatingPortal, null,
-            React__default.createElement(FloatingFocusManager, { context: context, modal: false, initialFocus: -1 },
-                React__default.createElement(Ui89Scene, null,
-                    React__default.createElement("div", { ref: refs.setFloating, style: {
-                            ...floatingStyles,
-                            zIndex: zIndexer.value,
-                            display: "flex",
-                            flexDirection: "column",
-                        } }, props.renderPopover())))))));
+
+function Ui89InputFileUpload(props) {
+    const inputRef = useRef(null);
+    function implOnChange(e) {
+        if (!props.onChange) {
+            return;
+        }
+        if (e.target.files === null) {
+            props.onChange(null);
+            return;
+        }
+        if (e.target.files.length === 0) {
+            props.onChange(null);
+            return;
+        }
+        props.onChange(e.target.files[0]);
+        // Reset the file input's value to allow selecting the same file again.
+        e.target.value = "";
+    }
+    function onClick() {
+        if (inputRef.current === null) {
+            return;
+        }
+        inputRef.current.click();
+    }
+    return (React__default.createElement("div", null,
+        React__default.createElement("input", { ref: inputRef, className: "ui89-typo-special", type: "file", onChange: implOnChange, accept: props.accept, hidden: true }),
+        props.value ? (React__default.createElement("div", { className: "ui89-input-file-upload" },
+            React__default.createElement(Ui89Button, { onClick: onClick }, "Change"),
+            React__default.createElement("span", { className: `ui89-input-file-upload__info ui89-text-single-line ui89-text-single-line--ellipsis-left`, title: props.value.name }, props.value.name))) : (React__default.createElement(Ui89Button, { onClick: onClick }, "Upload"))));
 }
 
 /**
@@ -919,7 +1097,7 @@ function Ui89InputSelect(props) {
         searchInput.current?.focus();
     }
     return (React__default.createElement("div", { className: "ui89-input-select" },
-        React__default.createElement(Ui89Popover, { open: isOpen, onOpenChange: setIsOpen, popoverOverflowMaxWidth: props.menuOverflowMaxWidth, renderContainer: (props2) => (React__default.createElement("div", { ref: props2.setRef, className: [
+        React__default.createElement(Ui89Popover, { open: isOpen, onOpenChange: setIsOpen, popoverOverflowForce: true, popoverOverflowMaxWidth: props.menuOverflowMaxWidth, renderContainer: (props2) => (React__default.createElement("div", { ref: props2.setRef, className: [
                     "ui89-input-box",
                     "ui89-input-box--unselectable",
                     "ui89-input-box--clickable",
@@ -935,62 +1113,6 @@ function Ui89InputSelect(props) {
                     ].join(" ") }, "<empty>")))) })));
 }
 
-function stringRemoveAllWhitespace(str) {
-    return str.replace(/\s+/g, "");
-}
-
-function isTextNumber(text) {
-    return /^\d+(\.\d+)?$/.test(text);
-}
-function displayText(value) {
-    if (value === undefined) {
-        // No idea how to display this.
-        return "";
-    }
-    else if (isNaN(value)) {
-        // No idea what to display.
-        return "";
-    }
-    return value.toString();
-}
-function dotsMakeMoreSense(value) {
-    return value.replaceAll(",", ".");
-}
-function Ui89InputTextNumber(props) {
-    const wrappedValue = useMemo(() => {
-        return displayText(props.value);
-    }, [props.value]);
-    function implOnChange(value) {
-        if (props.onChange === undefined) {
-            return;
-        }
-        if (value === "") {
-            // Use empty value.
-            props.onChange(props.emptyValue);
-            return;
-        }
-        value = stringRemoveAllWhitespace(value);
-        value = dotsMakeMoreSense(value);
-        if (!isTextNumber(value)) {
-            // We end here.
-            return;
-        }
-        const numberValue = Number(value);
-        if (props.min !== undefined) {
-            if (numberValue <= props.min) {
-                value = String(props.min);
-            }
-        }
-        if (props.max !== undefined) {
-            if (numberValue >= props.max) {
-                value = String(props.max);
-            }
-        }
-        props.onChange(value);
-    }
-    return (React__default.createElement(Ui89InputText, { value: wrappedValue, onChange: implOnChange, disabled: props.disabled }));
-}
-
 function Ui89InputNumber(props) {
     const wrappedValue = useMemo(() => {
         if (props.value !== undefined && props.value !== null) {
@@ -1017,7 +1139,7 @@ function Ui89InputNumber(props) {
             }
         }
     }
-    return (React__default.createElement(Ui89InputTextNumber, { emptyValue: props.emptyValue, value: wrappedValue, onChange: wrappedOnChange, min: props.min, max: props.max, disabled: props.disabled, precision: props.precision }));
+    return (React__default.createElement(Ui89InputTextNumber, { emptyValue: props.emptyValue, value: wrappedValue, onChange: wrappedOnChange, min: props.min, max: props.max, disabled: props.disabled, precision: props.precision, textAlign: props.textAlign }));
 }
 
 function Ui89InputPassword({ value, placeholder, disabled, onChange, }) {
@@ -1088,6 +1210,7 @@ function ScrollContainer({ children, }) {
 const portalRoot = typeof document !== "undefined" ? document.body : null;
 function Ui89ModalDialog({ open, size = "medium", children, topCenter, onRequestClose, }) {
     const zIndexer = useZIndexer(open);
+    const { createPortal } = useUi89();
     const dialogClass = useMemo(() => {
         return ["ui89-modal-dialog", open ? "ui89-modal-dialog--open" : ""].join(" ");
     }, [size, open]);