xmlui 0.7.20 → 0.7.22

package/dist/scripts/src/components-core/AppRoot.js

@@ -1,424 +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 });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
-const react_router_dom_1 = require("react-router-dom");
-const react_2 = require("@remix-run/react");
-const react_query_1 = require("@tanstack/react-query");
-const lodash_es_1 = require("lodash-es");
-const react_helmet_async_1 = require("react-helmet-async");
-const react_hot_toast_1 = __importDefault(require("react-hot-toast"));
-const immer_1 = require("immer");
-const ErrorBoundary_1 = require("./ErrorBoundary");
-const ThemeProvider_1 = __importDefault(require("@components-core//theming/ThemeProvider"));
-const Container_1 = require("./container/Container");
-const misc_1 = require("@components-core/utils/misc");
-const constants_1 = require("@components-core/constants");
-const IconProvider_1 = require("@components/IconProvider");
-const date_fns_1 = require("date-fns");
-const AppContext_1 = require("@components-core/AppContext");
-const useApiInterceptorContext_1 = require("@components-core/interception/useApiInterceptorContext");
-const themeVars_1 = require("@components-core/theming/themeVars");
-const reportEngineError_1 = require("@components-core/reportEngineError");
-const ThemeContext_1 = require("@components-core/theming/ThemeContext");
-const date_functions_1 = require("./appContext/date-functions");
-const misc_utils_1 = require("./appContext/misc-utils");
-const ComponentRegistryContext_1 = require("@components/ComponentRegistryContext");
-const abstractions_1 = require("@components-core/theming/abstractions");
-const ComponentProvider_1 = require("@components/ComponentProvider");
-const ConfirmationModalContextProvider_1 = require("@components/ModalDialog/ConfirmationModalContextProvider");
-const AppStateContext_1 = require("@components/App/AppStateContext");
-const hooks_1 = require("./utils/hooks");
-const InspectorContext_1 = require("@components-core/InspectorContext");
-const DebugViewProvider_1 = require("./DebugViewProvider");
-const package_json_1 = require("../../package.json");
-const math_function_1 = require("./appContext/math-function");
-// --- We want to enable the produce method of `immer` on Map objects
-(0, immer_1.enableMapSet)();
-// --- We use this object in the app context to represent the `QlientQuery`
-// --- of the react-query package.
-const queryClient = new react_query_1.QueryClient({
-    defaultOptions: {
-        queries: {
-            refetchOnWindowFocus: false,
-        },
-    },
-});
-// --- We pass these functions to the global app context
-const DateUtils = {
-    differenceInMinutes: (date1, date2) => {
-        return (0, date_fns_1.differenceInMinutes)(new Date(date1), new Date(date2));
-    },
-    isSameDay: (dateLeft, dateRight) => {
-        // console.log("IS SAME DAY", dateLeft, dateRight);
-        if (!dateLeft || !dateRight) {
-            return false;
-        }
-        return (0, date_fns_1.isSameDay)(new Date(dateLeft), new Date(dateRight));
-    },
-    isToday: (date) => {
-        return (0, date_fns_1.isToday)(new Date(date));
-    },
-    isThisYear: (date) => {
-        return (0, date_fns_1.isThisYear)(new Date(date));
-    },
-};
-// --- We pass this funtion to the global app context
-function signError(error) {
-    react_hot_toast_1.default.error(typeof error === "string" ? error : error.message || "Something went wrong");
-}
-/**
- *  This component wraps the entire app into a container with these particular
- *  responsibilities:
- *  - Managing the application state
- *  - Helping the app with viewport-related functionality (e.g., information
- *    of viewport size, supporting responsive apps)
- *  - Providing xmlui-defined methods and properties for apps, such as
- *    `activeThemeId`, `navigate`, `toast`, and many others.
- */
-function AppContent({ rootContainer, routerBaseName, globalProps, standalone, trackContainerHeight, decorateComponentsWithTestId, debugEnabled, }) {
-    const [loggedInUser, setLoggedInUser] = (0, react_1.useState)(null);
-    const debugView = (0, DebugViewProvider_1.useDebugView)();
-    const componentRegistry = (0, ComponentRegistryContext_1.useComponentRegistry)();
-    const navigate = (0, react_2.useNavigate)();
-    const { confirm } = (0, ConfirmationModalContextProvider_1.useConfirm)();
-    // --- Prepare theme-related variables. We will use them to manage the selected theme
-    // --- and also pass them to the app context.
-    const { activeThemeId, activeThemeTone, setActiveThemeId, setActiveThemeTone, availableThemeIds, root, toggleThemeTone, } = (0, ThemeContext_1.useThemes)();
-    // --- Handle special key combinations to change the theme and tone
-    (0, hooks_1.useDocumentKeydown)((event) => {
-        // --- Alt + Ctrl + Shift + T changes the current theme
-        if (event.code === "KeyT" && event.altKey && event.ctrlKey && event.shiftKey) {
-            setActiveThemeId(availableThemeIds[(availableThemeIds.indexOf(activeThemeId) + 1) % availableThemeIds.length]);
-        }
-        // --- Alt + Ctrl + Shift + O changes the current theme tone
-        if (event.code === "KeyO" && event.altKey && event.ctrlKey && event.shiftKey) {
-            setActiveThemeTone(abstractions_1.ThemeToneKeys[(abstractions_1.ThemeToneKeys.indexOf(activeThemeTone) + 1) % abstractions_1.ThemeToneKeys.length]);
-        }
-        // --- Alt + Ctrl + Shift + S toggles the current state view
-        if (event.code === "KeyS" && event.altKey && event.ctrlKey && event.shiftKey) {
-            debugView.setDisplayStateView(!debugView.displayStateView);
-        }
-    });
-    // --- We use the state variables to store the current media query values
-    const [maxWidthPhone, setMaxWidthPhone] = (0, react_1.useState)("0");
-    const [maxWidthPhoneLower, setMaxWidthPhoneLower] = (0, react_1.useState)("0");
-    const [maxWidthLandscapePhone, setMaxWidthLandscapePhone] = (0, react_1.useState)("0");
-    const [maxWidthLandscapePhoneLower, setMaxWidthLandscapePhoneLower] = (0, react_1.useState)("0");
-    const [maxWidthTablet, setMaxWidthTablet] = (0, react_1.useState)("0");
-    const [maxWidthTabletLower, setMaxWidthTabletLower] = (0, react_1.useState)("0");
-    const [maxWidthDesktop, setMaxWidthDesktop] = (0, react_1.useState)("0");
-    const [maxWidthDesktopLower, setMaxWidthDesktopLower] = (0, react_1.useState)("0");
-    const [maxWidthLargeDesktop, setMaxWidthLargeDesktop] = (0, react_1.useState)("0");
-    const [maxWidthLargeDesktopLower, setMaxWidthLargeDesktopLower] = (0, react_1.useState)("0");
-    // --- We create a lower dimension value for the media query using a range
-    const createLowerDimensionValue = (dimension) => {
-        const match = dimension.match(/^(\d+)px$/);
-        return match ? `${parseInt(match[1]) - 0.02}px` : "0";
-    };
-    // --- Whenever the size of the viewport changes, we update the values
-    // --- related to viewport size
-    const observer = (0, react_1.useRef)();
-    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
-        if (trackContainerHeight) {
-            if (root && root !== document.body) {
-                // --- We are already observing old element
-                if (observer === null || observer === void 0 ? void 0 : observer.current) {
-                    observer.current.unobserve(root);
-                }
-                observer.current = new ResizeObserver((entries) => {
-                    root.style.setProperty("--containerHeight", entries[0].contentRect.height + "px");
-                });
-                if (observer.current) {
-                    observer.current.observe(root);
-                }
-            }
-        }
-        return () => {
-            if (observer === null || observer === void 0 ? void 0 : observer.current) {
-                observer.current.unobserve(root);
-            }
-        };
-    }, [root, observer, trackContainerHeight]);
-    // --- Whenever the application root DOM object or the active theme changes, we sync
-    // --- with the theme variable values (because we can't use css var in media queries)
-    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
-        const mwPhone = getComputedStyle(root).getPropertyValue((0, themeVars_1.getVarKey)("media-max-width-phone"));
-        setMaxWidthPhone(mwPhone);
-        setMaxWidthPhoneLower(createLowerDimensionValue(mwPhone));
-        const mwLandscapePhone = getComputedStyle(root).getPropertyValue((0, themeVars_1.getVarKey)("media-max-width-landscape-phone"));
-        setMaxWidthLandscapePhone(mwLandscapePhone);
-        setMaxWidthLandscapePhoneLower(createLowerDimensionValue(mwLandscapePhone));
-        const mwTablet = getComputedStyle(root).getPropertyValue((0, themeVars_1.getVarKey)("media-max-width-tablet"));
-        setMaxWidthTablet(mwTablet);
-        setMaxWidthTabletLower(createLowerDimensionValue(mwTablet));
-        const mwDesktop = getComputedStyle(root).getPropertyValue((0, themeVars_1.getVarKey)("media-max-width-desktop"));
-        setMaxWidthDesktop(mwDesktop);
-        setMaxWidthDesktopLower(createLowerDimensionValue(mwDesktop));
-        const mwLargeDesktop = getComputedStyle(root).getPropertyValue((0, themeVars_1.getVarKey)("media-max-width-large-desktop"));
-        setMaxWidthLargeDesktop(mwLargeDesktop);
-        setMaxWidthLargeDesktopLower(createLowerDimensionValue(mwLargeDesktop));
-    }, [activeThemeId, root]);
-    // --- Set viewport size information
-    const isViewportPhone = (0, hooks_1.useMediaQuery)(`(max-width: ${maxWidthPhoneLower})`);
-    const isViewportLandscapePhone = (0, hooks_1.useMediaQuery)(`(min-width: ${maxWidthPhone}) and (max-width: ${maxWidthLandscapePhoneLower})`);
-    const isViewportTablet = (0, hooks_1.useMediaQuery)(`(min-width: ${maxWidthLandscapePhone}) and (max-width: ${maxWidthTabletLower})`);
-    const isViewportDesktop = (0, hooks_1.useMediaQuery)(`(min-width: ${maxWidthTablet}) and (max-width: ${maxWidthDesktopLower})`);
-    const isViewportLargeDesktop = (0, hooks_1.useMediaQuery)(`(min-width: ${maxWidthDesktop}) and (max-width: ${maxWidthLargeDesktopLower})`);
-    let vpSize = "xs";
-    let vpSizeIndex = 0;
-    const isViewportXlDesktop = (0, hooks_1.useMediaQuery)(`(min-width: ${maxWidthLargeDesktop})`);
-    if (isViewportXlDesktop) {
-        vpSize = "xxl";
-        vpSizeIndex = 5;
-    }
-    else if (isViewportLargeDesktop) {
-        vpSize = "xl";
-        vpSizeIndex = 4;
-    }
-    else if (isViewportDesktop) {
-        vpSize = "lg";
-        vpSizeIndex = 3;
-    }
-    else if (isViewportTablet) {
-        vpSize = "md";
-        vpSizeIndex = 2;
-    }
-    else if (isViewportLandscapePhone) {
-        vpSize = "sm";
-        vpSizeIndex = 1;
-    }
-    // --- Collect information about the current environment
-    const isInIFrame = (0, hooks_1.useIsInIFrame)();
-    const isWindowFocused = (0, hooks_1.useIsWindowFocused)();
-    const apiInterceptorContext = (0, useApiInterceptorContext_1.useApiInterceptorContext)();
-    const location = (0, react_2.useLocation)();
-    const lastHash = (0, react_1.useRef)("");
-    // listen to location change using useEffect with location as dependency
-    // https://jasonwatmore.com/react-router-v6-listen-to-location-route-change-without-history-listen
-    (0, react_1.useEffect)(() => {
-        if (location.hash) {
-            lastHash.current = location.hash.slice(1); // safe hash for further use after navigation
-        }
-        if (lastHash.current) {
-            setTimeout(() => {
-                var _a;
-                (_a = document
-                    .getElementById(lastHash.current)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: "instant", block: "start" });
-                lastHash.current = "";
-            }, 100);
-        }
-    }, [location]);
-    // --- We collect all the actions defined in the app and pass them to the app context
-    const Actions = (0, react_1.useMemo)(() => {
-        const ret = {
-            _SUPPORT_IMPLICIT_CONTEXT: true,
-        };
-        for (const [key, value] of componentRegistry.actionFunctions) {
-            ret[key] = value;
-        }
-        return ret;
-    }, [componentRegistry.actionFunctions]);
-    // --- We collect information about app embedding and pass it to the app context
-    const embed = (0, react_1.useMemo)(() => {
-        return {
-            isInIFrame: isInIFrame,
-        };
-    }, [isInIFrame]);
-    // --- We collect information about the current environment and pass it to the app context
-    const environment = (0, react_1.useMemo)(() => {
-        return {
-            isWindowFocused,
-        };
-    }, [isWindowFocused]);
-    // --- We collect information about the current media size and pass it to the app context
-    const mediaSize = (0, react_1.useMemo)(() => {
-        return {
-            phone: isViewportPhone,
-            landscapePhone: isViewportLandscapePhone,
-            tablet: isViewportTablet,
-            desktop: isViewportDesktop,
-            largeDesktop: isViewportLargeDesktop,
-            xlDesktop: isViewportXlDesktop,
-            smallScreen: isViewportPhone || isViewportLandscapePhone || isViewportTablet,
-            largeScreen: !(isViewportPhone || isViewportLandscapePhone || isViewportTablet),
-            size: vpSize,
-            sizeIndex: vpSizeIndex,
-        };
-    }, [
-        isViewportPhone,
-        isViewportLandscapePhone,
-        isViewportTablet,
-        isViewportDesktop,
-        isViewportLargeDesktop,
-        isViewportXlDesktop,
-        vpSize,
-        vpSizeIndex,
-    ]);
-    // --- We extract the global properties from the app configuration and pass them to the app context
-    const appGlobals = (0, react_1.useMemo)(() => {
-        return globalProps ? Object.assign({}, globalProps) : constants_1.EMPTY_OBJECT;
-    }, [globalProps]);
-    // --- We assemble the app context object form the collected information
-    const appContextValue = (0, react_1.useMemo)(() => {
-        const ret = Object.assign(Object.assign(Object.assign(Object.assign({ 
-            // --- Engine-related
-            version: package_json_1.version,
-            // --- Actions namespace
-            Actions,
-            // --- App-specific
-            appGlobals,
-            debugEnabled,
-            decorateComponentsWithTestId,
-            environment,
-            mediaSize,
-            queryClient,
-            standalone }, date_functions_1.dateFunctions), math_function_1.mathFunctions), { 
-            // --- File Utilities
-            formatFileSizeInBytes: misc_1.formatFileSizeInBytes,
-            getFileExtension: misc_1.getFileExtension,
-            // --- Navigation-related
-            navigate,
-            routerBaseName,
-            // --- Notifications and dialogs
-            confirm,
-            signError,
-            toast: react_hot_toast_1.default,
-            // --- Theme-related
-            activeThemeId,
-            activeThemeTone,
-            availableThemeIds, setTheme: setActiveThemeId, setThemeTone: setActiveThemeTone, toggleThemeTone,
-            // --- User-related
-            loggedInUser,
-            setLoggedInUser,
-            delay: misc_1.delay,
-            DateUtils,
-            embed,
-            apiInterceptorContext, getPropertyByPath: lodash_es_1.get }), misc_utils_1.miscellaneousUtils);
-        return ret;
-    }, [
-        Actions,
-        activeThemeId,
-        activeThemeTone,
-        apiInterceptorContext,
-        availableThemeIds,
-        confirm,
-        debugEnabled,
-        decorateComponentsWithTestId,
-        embed,
-        environment,
-        appGlobals,
-        loggedInUser,
-        mediaSize,
-        navigate,
-        routerBaseName,
-        setActiveThemeId,
-        setActiveThemeTone,
-        toggleThemeTone,
-        standalone,
-    ]);
-    // --- We prepare the helper infrastructure for the `AppState` component, which manages
-    // --- app-wide state using buckets (state sections).
-    const [appState, setAppState] = (0, react_1.useState)(constants_1.EMPTY_OBJECT);
-    const registerAppState = (0, react_1.useCallback)((bucket, initialValue) => {
-        setAppState((prev) => {
-            return Object.assign(Object.assign({}, prev), { [bucket]: initialValue });
-        });
-    }, []);
-    const update = (0, react_1.useCallback)((bucket, patch) => {
-        setAppState((prev) => {
-            return Object.assign(Object.assign({}, prev), { [bucket]: Object.assign(Object.assign({}, (prev[bucket] || {})), patch) });
-        });
-    }, []);
-    const appStateContextValue = (0, react_1.useMemo)(() => {
-        return {
-            registerAppState,
-            appState,
-            update,
-        };
-    }, [appState, registerAppState, update]);
-    const memoedVars = (0, react_1.useRef)(new Map());
-    return ((0, jsx_runtime_1.jsx)(AppContext_1.AppContext.Provider, { value: appContextValue, children: (0, jsx_runtime_1.jsx)(AppStateContext_1.AppStateContext.Provider, { value: appStateContextValue, children: (0, Container_1.renderRoot)(rootContainer, memoedVars) }) }));
-}
-/**
- * This React component is intended to be the root component in a browser window. It handles the application state
- * changes, routing, and theming, provides an error boundary, and handles a few other aspects.
- */
-const AppWrapper = ({ node, previewMode = false, servedFromSingleFile = false, routerBaseName: baseName = "", contributes = constants_1.EMPTY_OBJECT, globalProps, standalone, trackContainerHeight, decorateComponentsWithTestId, debugEnabled, defaultTheme, defaultTone, resources, resourceMap, sources, }) => {
-    var _a;
-    if (previewMode) {
-        //to prevent leaking the meta items to the parent document, if it lives in an iframe (e.g. docs)
-        react_helmet_async_1.HelmetProvider.canUseDOM = false;
-    }
-    const siteName = (globalProps === null || globalProps === void 0 ? void 0 : globalProps.name) || "XMLUI app";
-    const useHashBasedRouting = (_a = globalProps === null || globalProps === void 0 ? void 0 : globalProps.useHashBasedRouting) !== null && _a !== void 0 ? _a : true;
-    const dynamicChildren = ((0, jsx_runtime_1.jsxs)(react_helmet_async_1.HelmetProvider, { children: [(0, jsx_runtime_1.jsx)(react_helmet_async_1.Helmet, { defaultTitle: siteName, titleTemplate: `%s | ${siteName}` }), (0, jsx_runtime_1.jsx)(IconProvider_1.IconProvider, { children: (0, jsx_runtime_1.jsx)(ThemeProvider_1.default, { resourceMap: resourceMap, themes: contributes.themes, defaultTheme: defaultTheme, defaultTone: defaultTone, resources: resources, children: (0, jsx_runtime_1.jsx)(InspectorContext_1.InspectorProvider, { sources: sources, children: (0, jsx_runtime_1.jsx)(ConfirmationModalContextProvider_1.ConfirmationModalContextProvider, { children: (0, jsx_runtime_1.jsx)(AppContent, { rootContainer: node, routerBaseName: baseName, globalProps: globalProps, standalone: standalone, trackContainerHeight: trackContainerHeight, decorateComponentsWithTestId: decorateComponentsWithTestId, debugEnabled: debugEnabled }) }) }) }) })] }));
-    const Router = previewMode
-        ? react_router_dom_1.MemoryRouter
-        : servedFromSingleFile || useHashBasedRouting
-            ? react_router_dom_1.HashRouter
-            : react_router_dom_1.BrowserRouter;
-    return ((0, jsx_runtime_1.jsx)(react_1.default.StrictMode, { children: (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { node: node, location: "root-outer", children: (0, jsx_runtime_1.jsxs)(react_query_1.QueryClientProvider, { client: queryClient, children: [(typeof window === "undefined" || process.env.VITE_REMIX) && dynamicChildren, !(typeof window === "undefined" || process.env.VITE_REMIX) && ((0, jsx_runtime_1.jsx)(Router, { basename: Router === react_router_dom_1.HashRouter ? undefined : baseName, children: dynamicChildren }))] }) }) }));
-};
-/**
- * This component runs the app in the context of the registered components
- * (including the core xmlui components and external ones passed to this
- * component.
- */
-function AppRoot({ apiInterceptor, contributes, node, decorateComponentsWithTestId, debugEnabled, defaultTheme, defaultTone, resources, globalProps, standalone, trackContainerHeight, routerBaseName, previewMode, servedFromSingleFile, resourceMap, sources, componentManager, }) {
-    const rootNode = (0, react_1.useMemo)(() => {
-        const themedRoot = node.type === "Theme"
-            ? Object.assign(Object.assign({}, node), { props: Object.assign(Object.assign({}, node.props), { root: true }) }) : {
-            type: "Theme",
-            props: {
-                root: true,
-            },
-            children: [node],
-        };
-        return {
-            type: "Container",
-            uid: "root",
-            children: [themedRoot],
-            uses: [],
-        };
-    }, [node]);
-    (0, reportEngineError_1.resetErrors)();
-    return ((0, jsx_runtime_1.jsx)(ComponentProvider_1.ComponentProvider, { contributes: contributes, componentManager: componentManager, children: (0, jsx_runtime_1.jsx)(DebugViewProvider_1.DebugViewProvider, { debugConfig: globalProps === null || globalProps === void 0 ? void 0 : globalProps.debug, children: (0, jsx_runtime_1.jsx)(AppWrapper, { resourceMap: resourceMap, apiInterceptor: apiInterceptor, node: rootNode, contributes: contributes, resources: resources, routerBaseName: routerBaseName, decorateComponentsWithTestId: decorateComponentsWithTestId, debugEnabled: debugEnabled, defaultTheme: defaultTheme, defaultTone: defaultTone, globalProps: globalProps, standalone: standalone, trackContainerHeight: trackContainerHeight, previewMode: previewMode, servedFromSingleFile: servedFromSingleFile, sources: sources }) }) }));
-}
-exports.default = AppRoot;