xmlui 0.11.3 → 0.11.6

package/dist/scripts/src/components-core/utils/hooks.js

@@ -1,400 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStartMargin = exports.useRealBackground = exports.useScrollEventHandler = exports.useScrollParent = exports.useIsomorphicLayoutEffect = exports.useResizeObserver = void 0;
-exports.usePrevious = usePrevious;
-exports.useIsInIFrame = useIsInIFrame;
-exports.useIsWindowFocused = useIsWindowFocused;
-exports.useMediaQuery = useMediaQuery;
-exports.useDocumentKeydown = useDocumentKeydown;
-exports.useOnMount = useOnMount;
-exports.useShallowCompareMemoize = useShallowCompareMemoize;
-exports.useDeepCompareMemoize = useDeepCompareMemoize;
-exports.useColors = useColors;
-exports.useReferenceTrackedApi = useReferenceTrackedApi;
-exports.useHasExplicitHeight = useHasExplicitHeight;
-const react_1 = __importStar(require("react"));
-const lodash_es_1 = require("lodash-es");
-const misc_1 = require("../utils/misc");
-const ThemeContext_1 = require("../theming/ThemeContext");
-const constants_1 = require("../constants");
-const color_1 = __importDefault(require("color"));
-/**
- * This hook invokes a callback when the size of the specified DOM element changes.
- * @param element A DOM element to watch for size changes
- * @param callback The callback function to invoke on size changes
- */
-const useResizeObserver = (element, callback) => {
-    const current = element === null || element === void 0 ? void 0 : element.current;
-    const observer = (0, react_1.useRef)();
-    (0, react_1.useEffect)(() => {
-        // --- We are already observing old element
-        if ((observer === null || observer === void 0 ? void 0 : observer.current) && current) {
-            observer.current.unobserve(current);
-        }
-        observer.current = new ResizeObserver(callback);
-        if (element && element.current && observer.current) {
-            observer.current.observe(element.current);
-        }
-    }, [callback, current, element]);
-};
-exports.useResizeObserver = useResizeObserver;
-/**
- * This hook gets the previous state of the specified value (props, variable used in a React
- * function).
- *
- * @see {@link https://blog.logrocket.com/accessing-previous-props-state-react-hooks/}
- */
-function usePrevious(value) {
-    const ref = (0, react_1.useRef)();
-    (0, react_1.useEffect)(() => {
-        ref.current = value;
-    }, [value]);
-    return ref.current;
-}
-/**
- * This hook tests if the component is used within an iframe.
- * @returns True, if the component is used within an iframe; otherwise, false.
- */
-function useIsInIFrame() {
-    return (0, react_1.useMemo)(() => {
-        try {
-            return window.self !== window.top;
-        }
-        catch (e) {
-            return true;
-        }
-    }, []);
-}
-// --- Tests if the document has the focus
-const hasFocus = () => typeof document !== "undefined" && document.hasFocus();
-/**
- * This hook tests if the window has the focus.
- * @returns True, if the window has the focus; otherwise, false.
- */
-function useIsWindowFocused() {
-    const [focused, setFocused] = (0, react_1.useState)(hasFocus); // Focus for first render
-    (0, react_1.useEffect)(() => {
-        setFocused(hasFocus()); // Focus for additional renders
-        const onFocus = () => setFocused(true);
-        const onBlur = () => setFocused(false);
-        window.addEventListener("focus", onFocus);
-        window.addEventListener("blur", onBlur);
-        return () => {
-            window.removeEventListener("focus", onFocus);
-            window.removeEventListener("blur", onBlur);
-        };
-    }, []);
-    return focused;
-}
-/**
- * This hook allows running media queries.
- * @param query Media query to run
- */
-function useMediaQuery(query) {
-    const [matches, setMatches] = (0, react_1.useState)(false);
-    (0, react_1.useEffect)(() => {
-        if (!window) {
-            setMatches(false);
-            return;
-        }
-        const matchMedia = window.matchMedia(query);
-        // Triggered at the first client-side load and if query changes
-        handleChange();
-        matchMedia.addEventListener("change", handleChange);
-        return () => {
-            matchMedia.removeEventListener("change", handleChange);
-        };
-        function handleChange() {
-            setMatches(matchMedia.matches);
-        }
-    }, [query]);
-    return matches;
-}
-/**
- * This hook runs a callback function when a key is pressed in the document window.
- * @param onDocumentKeydown Callback function to run
- */
-function useDocumentKeydown(onDocumentKeydown) {
-    const onKeyDown = (0, misc_1.useEvent)(onDocumentKeydown);
-    (0, react_1.useEffect)(() => {
-        document.addEventListener("keydown", onKeyDown);
-        return () => {
-            document.removeEventListener("keydown", onKeyDown);
-        };
-    }, [onKeyDown]);
-}
-/**
- * This hook runs a function when the corresponding component has been mounted.
- * @param onMount
- */
-function useOnMount(onMount) {
-    const thizRef = (0, react_1.useRef)({ mountedFired: false });
-    (0, react_1.useEffect)(() => {
-        if (!thizRef.current.mountedFired) {
-            thizRef.current.mountedFired = true;
-            onMount === null || onMount === void 0 ? void 0 : onMount();
-        }
-    }, [onMount]);
-}
-/**
- * This hook memoizes the specified value. It uses a shallow comparison with the previously
- * stored value when checking for changes. So, while a shallow comparison shows equality,
- * it returns with the memoized value.
- * @param value Value to memoize
- */
-function useShallowCompareMemoize(value) {
-    const ref = react_1.default.useRef(value);
-    const signalRef = react_1.default.useRef(0);
-    if (!(0, misc_1.shallowCompare)(value, ref.current)) {
-        ref.current = value;
-        signalRef.current++;
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    return react_1.default.useMemo(() => ref.current, [signalRef.current]);
-}
-/**
- * This hook memoizes the specified value. When checking for changes, it uses a deep comparison
- * with the previously stored value. So, while a deep comparison shows equality, it returns with
- * the memoized value, even if value references differ.
- * @param value Value to memoize
- */
-function useDeepCompareMemoize(value) {
-    const ref = react_1.default.useRef(value);
-    const signalRef = react_1.default.useRef(0);
-    if (!(0, lodash_es_1.isEqual)(value, ref.current)) {
-        ref.current = value;
-        signalRef.current += 1;
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    return react_1.default.useMemo(() => ref.current, [signalRef.current]);
-}
-function useColors(...colorNames) {
-    const { getThemeVar } = (0, ThemeContext_1.useTheme)();
-    // const paramsRef = useRef(colorNames);
-    // const { themeStyles } = useTheme();
-    const colors = (0, react_1.useMemo)(() => {
-        const ret = {};
-        for (const color of colorNames) {
-            if (typeof color === "string") {
-                const col = getThemeVar(color);
-                ret[color] = (0, color_1.default)(col).toString();
-            }
-            else {
-                const col = getThemeVar(color.name);
-                ret[color.name] = (0, color_1.default)(col).hex().toString();
-            }
-        }
-        return ret;
-    }, [colorNames, getThemeVar]);
-    // useEffect(() => {
-    //   setColors(getColors(...paramsRef.current));
-    // }, [themeStyles]);
-    return colors;
-}
-function useReferenceTrackedApi(componentState) {
-    return useShallowCompareMemoize((0, react_1.useMemo)(() => {
-        const ret = {};
-        if (Reflect.ownKeys(componentState).length === 0) {
-            //skip containers with no registered apis
-            return constants_1.EMPTY_OBJECT;
-        }
-        for (const componentApiKey of Object.getOwnPropertySymbols(componentState)) {
-            const value = componentState[componentApiKey];
-            if (componentApiKey.description) {
-                ret[componentApiKey.description] = value;
-            }
-        }
-        return ret;
-    }, [componentState]));
-}
-/**
- * This hook uses either useLayoutEffect or useEffect based on the environment
- * (client-side or server-side).
- */
-exports.useIsomorphicLayoutEffect = typeof document !== "undefined" ? react_1.useLayoutEffect : react_1.useEffect;
-// https://stackoverflow.com/a/49186677
-function getScrollParent(element) {
-    let style = getComputedStyle(element);
-    const excludeStaticParent = style.position === "absolute";
-    const overflowRegex = /(auto|scroll)/;
-    if (style.position === "fixed") {
-        return document.body;
-    }
-    for (let parent = element;; parent = parent.parentElement) {
-        if (!parent) {
-            return null;
-        }
-        style = getComputedStyle(parent);
-        if (excludeStaticParent && style.position === "static") {
-            continue;
-        }
-        if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX)) {
-            return parent;
-        }
-    }
-    return document.body;
-}
-const useScrollParent = (element) => {
-    const [scrollParent, setScrollParent] = (0, react_1.useState)(null);
-    (0, exports.useIsomorphicLayoutEffect)(() => {
-        setScrollParent(element ? getScrollParent(element) : null);
-    }, [element]);
-    return scrollParent;
-};
-exports.useScrollParent = useScrollParent;
-// because safari doesn't support scrollend event...
-const useScrollEventHandler = (element, { onScrollStart, onScrollEnd, }) => {
-    const thisRef = (0, react_1.useRef)({ scrolling: false });
-    (0, exports.useIsomorphicLayoutEffect)(() => {
-        let timer;
-        let listener = () => {
-            if (!thisRef.current.scrolling) {
-                onScrollStart === null || onScrollStart === void 0 ? void 0 : onScrollStart();
-            }
-            thisRef.current.scrolling = true;
-            clearTimeout(timer);
-            timer = setTimeout(() => {
-                thisRef.current.scrolling = false;
-                onScrollEnd === null || onScrollEnd === void 0 ? void 0 : onScrollEnd();
-            }, 50);
-        };
-        element === null || element === void 0 ? void 0 : element.addEventListener("scroll", listener);
-        return () => {
-            element === null || element === void 0 ? void 0 : element.removeEventListener("scroll", listener);
-        };
-    }, [element, onScrollEnd, onScrollStart]);
-};
-exports.useScrollEventHandler = useScrollEventHandler;
-function realBackgroundColor(elem) {
-    let transparent = "rgba(0, 0, 0, 0)";
-    let transparentIE11 = "transparent";
-    if (!elem)
-        return transparent;
-    let bg = getComputedStyle(elem).backgroundColor;
-    if (bg === transparent || bg === transparentIE11) {
-        return realBackgroundColor(elem.parentElement);
-    }
-    else {
-        return bg;
-    }
-}
-const useRealBackground = (element) => {
-    const { activeThemeTone, activeThemeId } = (0, ThemeContext_1.useTheme)();
-    const [counter, setCounter] = (0, react_1.useState)(0);
-    (0, react_1.useEffect)(() => {
-        return setCounter((prev) => prev + 1);
-    }, [activeThemeTone, activeThemeId]);
-    return (0, react_1.useMemo)(() => (element ? realBackgroundColor(element) : "transparent"), [element]);
-};
-exports.useRealBackground = useRealBackground;
-// export const useIsInViewport = (ref, observerOptions) => {
-//   const [entered, setEntered] = useState(false);
-//   const observer = useRef(
-//     new IntersectionObserver(
-//       ([entry]) => setEntered(entry.isIntersecting),
-//       observerOptions
-//     )
-//   );
-//
-//   useEffect(() => {
-//     const element = ref.current;
-//     const ob = observer.current;
-//
-//     // stop observing once the element has entered the viewport for the first time.
-//     // if (entered) {
-//     //   ob.disconnect();
-//     //   return;
-//     // }
-//
-//     if (element) ob.observe(element);
-//
-//     return () => ob.disconnect();
-//   }, [entered, ref]);
-//
-//   return entered;
-// };
-const useStartMargin = (hasOutsideScroll, parentRef, scrollRef) => {
-    const [startMargin, setStartMargin] = (0, react_1.useState)(0);
-    const calculateStartMargin = (0, misc_1.useEvent)(() => {
-        if (!hasOutsideScroll) {
-            return 0;
-        }
-        const precedingElement = parentRef.current;
-        const scrollContainer = scrollRef.current;
-        if (precedingElement && scrollContainer) {
-            const precedingRect = precedingElement.getBoundingClientRect();
-            const scrollContainerRect = scrollContainer.getBoundingClientRect();
-            // It's important that scrollContainer is indeed the element whose scrollTop is relevant
-            const scrollTopOfScrollContainer = scrollContainer.scrollTop;
-            const calculatedMargin = precedingRect.top - scrollContainerRect.top + scrollTopOfScrollContainer;
-            return calculatedMargin;
-        }
-        return 0;
-    });
-    (0, exports.useResizeObserver)(scrollRef, () => {
-        setStartMargin(calculateStartMargin());
-    });
-    return startMargin;
-};
-exports.useStartMargin = useStartMargin;
-function useHasExplicitHeight(parentRef) {
-    const [hasHeight, setHasHeight] = (0, react_1.useState)(false);
-    (0, react_1.useLayoutEffect)(() => {
-        if (parentRef.current) {
-            const computedStyles = window.getComputedStyle(parentRef.current);
-            const hasMaxHeight = computedStyles.maxHeight !== "none";
-            // Get the original computed height
-            const originalHeight = window.getComputedStyle(parentRef.current).height;
-            // Store original inline style to restore it later
-            const originalInlineHeight = parentRef.current.style.height || "";
-            // Temporarily set height to auto and get the new computed height
-            parentRef.current.style.height = "auto";
-            const autoHeight = window.getComputedStyle(parentRef.current).height;
-            // Restore the original inline style immediately
-            parentRef.current.style.height = originalInlineHeight;
-            // If the original height is different from what the browser
-            // calculates for 'auto', it means a height was explicitly set.
-            // We also check if the inline style itself had a value.
-            let hasHeight = originalHeight !== autoHeight || !!originalInlineHeight;
-            const isFlex = computedStyles.display === "flex";
-            setHasHeight(hasMaxHeight || hasHeight || isFlex);
-        }
-    }, [parentRef]);
-    return hasHeight;
-}

package/dist/scripts/src/components-core/utils/mergeProps.js

@@ -1,45 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.mergeProps = mergeProps;
-/**
- * Merges child component props with rest props.
- * @param childProps Child component props
- * @param restProps Rest props
- * @returns
- *
- * The origin of this method is:
- * https://github.com/radix-ui/primitives/blob/c31c97274ff357aea99afe6c01c1c8c58b6356e0/packages/react/slot/src/Slot.tsx#L91
- */
-function mergeProps(childProps, restProps) {
-    // --- All child props should override
-    const overrideProps = Object.assign({}, restProps);
-    for (const propName in restProps) {
-        const childPropValue = childProps[propName];
-        const restPropValue = restProps[propName];
-        const isHandler = /^on[A-Z]/.test(propName);
-        if (isHandler) {
-            // --- If the handler exists on both, we compose them...
-            if (childPropValue && restPropValue) {
-                overrideProps[propName] = (...args) => {
-                    restPropValue(...args);
-                    childPropValue(...args);
-                };
-            }
-            // --- ...but if it exists only on the original, we use only this one
-            else if (childPropValue) {
-                overrideProps[propName] = childPropValue;
-            }
-        }
-        else if (propName === "style") {
-            // --- We merge `style`
-            overrideProps[propName] = restPropValue ? Object.assign(Object.assign({}, restPropValue), childPropValue) : childPropValue;
-        }
-        else if (propName === "className") {
-            // --- We merge `className`
-            overrideProps[propName] = restPropValue
-                ? [restPropValue, childPropValue].filter(Boolean).join(" ")
-                : childPropValue;
-        }
-    }
-    return Object.assign(Object.assign({}, childProps), overrideProps);
-}