xmlui 0.7.13 → 0.7.15

package/dist/scripts/src/components/App/AppNative.js

@@ -0,0 +1,204 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.App = App;
+exports.getAppLayoutOrientation = getAppLayoutOrientation;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("react");
+const AppLayoutContext_1 = require("./AppLayoutContext");
+const react_3 = require("@remix-run/react");
+const lodash_es_1 = require("lodash-es");
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const App_module_scss_1 = __importDefault(require("./App.module.scss"));
+const AppContext_1 = require("@components-core/AppContext");
+const Sheet_1 = require("@components/App/Sheet");
+const ScrollContext_1 = require("@components-core/ScrollContext");
+const hooks_1 = require("@components-core/utils/hooks");
+const ThemeContext_1 = require("@components-core/theming/ThemeContext");
+const AppHeaderNative_1 = require("@components/AppHeader/AppHeaderNative");
+const css_utils_1 = require("@components-core/utils/css-utils");
+const react_helmet_async_1 = require("react-helmet-async");
+function App({ children, style, layout, loggedInUser, scrollWholePage, noScrollbarGutters = false, onReady = lodash_es_1.noop, header, navPanel, footer, navPanelDef, logoContentDef, logo, logoDark, logoLight, defaultTone, defaultTheme, renderChild, name, }) {
+    const { getThemeVar } = (0, ThemeContext_1.useTheme)();
+    const { setActiveThemeTone, setActiveThemeId } = (0, ThemeContext_1.useThemes)();
+    const mounted = (0, react_2.useRef)(false);
+    const layoutWithDefaultValue = layout || getThemeVar("layout-App") || "condensed-sticky";
+    const safeLayout = layoutWithDefaultValue === null || layoutWithDefaultValue === void 0 ? void 0 : layoutWithDefaultValue.trim().replace(/[\u2013\u2014\u2011]/g, "-"); //It replaces all &ndash; (–) and &mdash; (—) and non-breaking hyphen '‑' symbols with simple dashes (-).
+    const { setLoggedInUser, mediaSize } = (0, AppContext_1.useAppContext)();
+    const hasRegisteredHeader = header !== undefined;
+    const hasRegisteredNavPanel = navPanelDef !== undefined;
+    const pagesWrapperInnerStyle = (0, react_2.useMemo)(() => {
+        const { padding, paddingLeft, paddingRight, paddingTop, paddingBottom } = style, rest = __rest(style, ["padding", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom"]);
+        return Object.assign(Object.assign({}, rest), { "--page-padding-left": padding || paddingLeft, "--page-padding-right": padding || paddingRight, "--page-padding-top": padding || paddingTop, "--page-padding-bottom": padding || paddingBottom });
+    }, [style]);
+    (0, react_2.useEffect)(() => {
+        setLoggedInUser(loggedInUser);
+    }, [loggedInUser, setLoggedInUser]);
+    (0, react_2.useEffect)(() => {
+        if (mounted.current)
+            return;
+        mounted.current = true;
+        if (defaultTone === "dark" || defaultTone === "light") {
+            setActiveThemeTone(defaultTone);
+        }
+        if (defaultTheme) {
+            setActiveThemeId(defaultTheme);
+        }
+        return () => {
+            mounted.current = false;
+        };
+    }, [defaultTone, defaultTheme, setActiveThemeTone, setActiveThemeId]);
+    (0, react_2.useEffect)(() => {
+        onReady();
+    }, [onReady]);
+    // --- We don't hide the nav panel if there's no header; in that case, we don't have a show drawer
+    // --- button. The exception is the condensed layout because we render a header in that case (otherwise,
+    // --- we couldn't show the NavPanel)
+    const navPanelVisible = mediaSize.largeScreen ||
+        (!hasRegisteredHeader && safeLayout !== "condensed" && safeLayout !== "condensed-sticky");
+    const scrollPageContainerRef = (0, react_2.useRef)(null);
+    const noScrollPageContainerRef = (0, react_2.useRef)(null);
+    const scrollContainerRef = scrollWholePage ? scrollPageContainerRef : noScrollPageContainerRef;
+    const [footerHeight, setFooterHeight] = (0, react_2.useState)(0);
+    const [headerHeight, setHeaderHeight] = (0, react_2.useState)(0);
+    const scrollbarWidth = (0, css_utils_1.useScrollbarWidth)();
+    const footerRef = (0, react_2.useRef)();
+    const footerRefCallback = (0, react_2.useCallback)((element) => {
+        footerRef.current = element;
+    }, []);
+    const headerRef = (0, react_2.useRef)();
+    const headerRefCallback = (0, react_2.useCallback)((element) => {
+        headerRef.current = element;
+    }, []);
+    (0, hooks_1.useResizeObserver)(footerRef, (0, react_2.useCallback)((entries) => {
+        var _a, _b;
+        setFooterHeight((_b = (_a = entries === null || entries === void 0 ? void 0 : entries[0]) === null || _a === void 0 ? void 0 : _a.contentRect) === null || _b === void 0 ? void 0 : _b.height);
+    }, []));
+    (0, hooks_1.useResizeObserver)(headerRef, (0, react_2.useCallback)((entries) => {
+        var _a, _b;
+        setHeaderHeight((_b = (_a = entries === null || entries === void 0 ? void 0 : entries[0]) === null || _a === void 0 ? void 0 : _a.contentRect) === null || _b === void 0 ? void 0 : _b.height);
+    }, []));
+    const styleWithHelpers = (0, react_2.useMemo)(() => {
+        return {
+            "--header-height": !scrollWholePage ? 0 : headerHeight + "px",
+            "--footer-height": !scrollWholePage ? 0 : footerHeight + "px",
+            "--scrollbar-width": scrollbarWidth + "px",
+        };
+    }, [footerHeight, headerHeight, scrollWholePage, scrollbarWidth]);
+    const [drawerVisible, setDrawerVisible] = (0, react_2.useState)(false);
+    const location = (0, react_3.useLocation)();
+    const toggleDrawer = (0, react_2.useCallback)(() => {
+        setDrawerVisible((prev) => !prev);
+    }, []);
+    (0, react_1.useLayoutEffect)(() => {
+        var _a;
+        (_a = scrollPageContainerRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo(0, 0);
+    }, [location.pathname]);
+    const layoutContextValue = (0, react_2.useMemo)(() => {
+        return {
+            hasRegisteredNavPanel,
+            hasRegisteredHeader,
+            navPanelVisible,
+            drawerVisible,
+            layout: safeLayout,
+            logo: logo,
+            logoDark: logoDark,
+            logoLight: logoLight,
+            showDrawer: () => {
+                setDrawerVisible(true);
+            },
+            hideDrawer: () => {
+                setDrawerVisible(false);
+            },
+            toggleDrawer,
+            navPanelDef,
+            logoContentDef,
+        };
+    }, [
+        hasRegisteredNavPanel,
+        hasRegisteredHeader,
+        navPanelVisible,
+        drawerVisible,
+        safeLayout,
+        logo,
+        logoDark,
+        logoLight,
+        toggleDrawer,
+        navPanelDef,
+        logoContentDef,
+    ]);
+    (0, react_2.useEffect)(() => {
+        if (navPanelVisible) {
+            setDrawerVisible(false);
+        }
+    }, [navPanelVisible]);
+    (0, react_2.useEffect)(() => {
+        setDrawerVisible(false);
+    }, [location, safeLayout]);
+    const wrapperBaseClasses = [
+        App_module_scss_1.default.wrapper,
+        {
+            [App_module_scss_1.default.scrollWholePage]: scrollWholePage,
+            [App_module_scss_1.default.noScrollbarGutters]: noScrollbarGutters,
+            "media-large": mediaSize.largeScreen,
+            "media-small": mediaSize.smallScreen,
+            "media-desktop": mediaSize.desktop,
+            "media-phone": mediaSize.phone,
+            "media-tablet": mediaSize.tablet,
+        },
+    ];
+    let content;
+    switch (safeLayout) {
+        case "vertical":
+            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.vertical), style: styleWithHelpers, children: [navPanelVisible && (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(App_module_scss_1.default.navPanelWrapper), children: navPanel }), (0, jsx_runtime_1.jsxs)("div", { className: App_module_scss_1.default.contentWrapper, ref: scrollPageContainerRef, children: [(0, jsx_runtime_1.jsx)("header", { ref: headerRefCallback, className: (0, classnames_1.default)(App_module_scss_1.default.headerWrapper), children: header }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapperInner, style: pagesWrapperInnerStyle, children: children }) }) }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] })] }));
+            break;
+        case "vertical-sticky":
+            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.vertical, App_module_scss_1.default.sticky), style: styleWithHelpers, children: [navPanelVisible && (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(App_module_scss_1.default.navPanelWrapper), children: navPanel }), (0, jsx_runtime_1.jsxs)("div", { className: App_module_scss_1.default.contentWrapper, ref: scrollPageContainerRef, children: [(0, jsx_runtime_1.jsx)("header", { ref: headerRefCallback, className: (0, classnames_1.default)(App_module_scss_1.default.headerWrapper, App_module_scss_1.default.sticky), children: header }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapperInner, style: pagesWrapperInnerStyle, children: children }) }) }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] })] }));
+            break;
+        case "vertical-full-header":
+            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.verticalFullHeader), style: styleWithHelpers, ref: scrollPageContainerRef, children: [(0, jsx_runtime_1.jsx)("header", { className: (0, classnames_1.default)(App_module_scss_1.default.headerWrapper, App_module_scss_1.default.sticky), ref: headerRefCallback, children: header }), (0, jsx_runtime_1.jsxs)("div", { className: App_module_scss_1.default.content, children: [navPanelVisible && (0, jsx_runtime_1.jsx)("aside", { className: App_module_scss_1.default.navPanelWrapper, children: navPanel }), (0, jsx_runtime_1.jsx)("main", { className: App_module_scss_1.default.contentWrapper, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapperInner, style: pagesWrapperInnerStyle, children: children }) }) }) })] }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] }));
+            break;
+        case "condensed":
+        case "condensed-sticky":
+            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.horizontal, {
+                    [App_module_scss_1.default.sticky]: safeLayout === "condensed-sticky",
+                }), style: styleWithHelpers, ref: scrollPageContainerRef, children: [(0, jsx_runtime_1.jsxs)("header", { className: (0, classnames_1.default)("app-layout-condensed", App_module_scss_1.default.headerWrapper, {
+                            [App_module_scss_1.default.sticky]: safeLayout === "condensed-sticky",
+                        }), ref: headerRefCallback, children: [!hasRegisteredHeader && hasRegisteredNavPanel && ((0, jsx_runtime_1.jsx)(AppHeaderNative_1.AppContextAwareAppHeader, { renderChild: renderChild })), header] }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapperInner, style: pagesWrapperInnerStyle, children: children }) }) }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] }));
+            break;
+        case "horizontal": {
+            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.horizontal), style: styleWithHelpers, ref: scrollPageContainerRef, children: [(0, jsx_runtime_1.jsxs)("header", { className: (0, classnames_1.default)(App_module_scss_1.default.headerWrapper), ref: headerRefCallback, children: [header, navPanelVisible && (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.navPanelWrapper, children: navPanel })] }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapperInner, style: pagesWrapperInnerStyle, children: children }) }) }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] }));
+            break;
+        }
+        case "horizontal-sticky":
+            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.horizontal, App_module_scss_1.default.sticky), style: styleWithHelpers, ref: scrollPageContainerRef, children: [(0, jsx_runtime_1.jsxs)("header", { className: (0, classnames_1.default)(App_module_scss_1.default.headerWrapper, App_module_scss_1.default.sticky), ref: headerRefCallback, children: [header, navPanelVisible && (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.navPanelWrapper, children: navPanel })] }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapperInner, style: pagesWrapperInnerStyle, children: children }) }) }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] }));
+            break;
+        default:
+            throw new Error("layout type not supported: " + safeLayout);
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [name !== undefined && (0, jsx_runtime_1.jsx)(react_helmet_async_1.Helmet, { defaultTitle: name, titleTemplate: `%s | ${name}` }), (0, jsx_runtime_1.jsxs)(AppLayoutContext_1.AppLayoutContext.Provider, { value: layoutContextValue, children: [(0, jsx_runtime_1.jsx)(Sheet_1.Sheet, { open: drawerVisible, onOpenChange: (open) => setDrawerVisible(open), children: (0, jsx_runtime_1.jsx)(Sheet_1.SheetContent, { side: "left", children: renderChild(navPanelDef, { inDrawer: true }) }) }), content] })] }));
+}
+function getAppLayoutOrientation(appLayout) {
+    switch (appLayout) {
+        case "vertical":
+        case "vertical-sticky":
+        case "vertical-full-header":
+            return "vertical";
+        default:
+            return "horizontal";
+    }
+}

package/dist/scripts/src/components/App/AppStateContext.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppStateContext = void 0;
+exports.useAppStateContextPart = useAppStateContextPart;
+const use_context_selector_1 = require("use-context-selector");
+exports.AppStateContext = (0, use_context_selector_1.createContext)(null);
+function useAppStateContextPart(selector) {
+    return (0, use_context_selector_1.useContextSelector)(exports.AppStateContext, selector);
+}

package/dist/scripts/src/components/App/Sheet.js

@@ -0,0 +1,99 @@
+"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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SheetContent = exports.Sheet = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const SheetPrimitive = __importStar(require("@radix-ui/react-dialog"));
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const IconNative_1 = require("@components/Icon/IconNative");
+const Sheet_module_scss_1 = __importDefault(require("./Sheet.module.scss"));
+const react_visually_hidden_1 = require("@radix-ui/react-visually-hidden");
+const ThemeContext_1 = require("@components-core/theming/ThemeContext");
+//based on this: https://ui.shadcn.com/docs/components/sheet
+const Sheet = SheetPrimitive.Root;
+exports.Sheet = Sheet;
+const SheetPortal = SheetPrimitive.Portal;
+const SheetOverlay = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return ((0, jsx_runtime_1.jsx)(SheetPrimitive.Overlay, Object.assign({ className: (0, classnames_1.default)(Sheet_module_scss_1.default.overlay, className) }, props, { ref: ref })));
+});
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+const SheetContent = React.forwardRef((_a, ref) => {
+    var { side = "left", className, children } = _a, props = __rest(_a, ["side", "className", "children"]);
+    const { root } = (0, ThemeContext_1.useTheme)();
+    return ((0, jsx_runtime_1.jsxs)(SheetPortal, { container: root, children: [(0, jsx_runtime_1.jsx)(SheetOverlay, {}), (0, jsx_runtime_1.jsxs)(SheetPrimitive.Content, Object.assign({ forceMount: true, ref: ref, className: (0, classnames_1.default)(Sheet_module_scss_1.default.sheetContent, {
+                    [Sheet_module_scss_1.default.top]: side === "top",
+                    [Sheet_module_scss_1.default.bottom]: side === "bottom",
+                    [Sheet_module_scss_1.default.left]: side === "left",
+                    [Sheet_module_scss_1.default.right]: side === "right",
+                }, className) }, props, { children: [children, (0, jsx_runtime_1.jsxs)(SheetPrimitive.Close, { className: Sheet_module_scss_1.default.close, children: [(0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "close" }), (0, jsx_runtime_1.jsx)(react_visually_hidden_1.VisuallyHidden, { children: "Close" })] })] }))] }));
+});
+exports.SheetContent = SheetContent;
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+const SheetHeader = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, classnames_1.default)("flex flex-col space-y-2 text-center sm:text-left", className) }, props)));
+};
+SheetHeader.displayName = "SheetHeader";
+const SheetFooter = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, classnames_1.default)("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className) }, props)));
+};
+SheetFooter.displayName = "SheetFooter";
+const SheetTitle = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return ((0, jsx_runtime_1.jsx)(SheetPrimitive.Title, Object.assign({ ref: ref, className: (0, classnames_1.default)("text-lg font-semibold text-foreground", className) }, props)));
+});
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+const SheetDescription = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return ((0, jsx_runtime_1.jsx)(SheetPrimitive.Description, Object.assign({ ref: ref, className: (0, classnames_1.default)("text-sm text-muted-foreground", className) }, props)));
+});
+SheetDescription.displayName = SheetPrimitive.Description.displayName;

package/dist/scripts/src/components/AppHeader/AppHeader.js

@@ -0,0 +1,59 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.appHeaderComponentRenderer = exports.AppHeaderMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const AppHeader_module_scss_1 = __importDefault(require("./AppHeader.module.scss"));
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const renderers_1 = require("@components-core/renderers");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const base_utils_1 = require("@components-core/theming/themes/base-utils");
+const AppHeaderNative_1 = require("./AppHeaderNative");
+const metadata_helpers_1 = require("@components/metadata-helpers");
+const slot_helpers_1 = require("@components/slot-helpers");
+const COMP = "AppHeader";
+exports.AppHeaderMd = (0, ComponentDefs_1.createMetadata)({
+    status: "experimental",
+    description: `\`${COMP}\` is a placeholder within \`App\` to define a custom application header.`,
+    props: {
+        profileMenuTemplate: (0, metadata_helpers_1.dComponent)(`This property makes the profile menu slot of the \`${COMP}\` component customizable.`),
+        logoTemplate: (0, metadata_helpers_1.dComponent)(`This property defines the template to use for the logo. With this property, you can ` +
+            `construct your custom logo instead of using a single image.`),
+        titleTemplate: (0, metadata_helpers_1.dComponent)(`This property defines the template to use for the title. With this property, you can ` +
+            `construct your custom title instead of using a single image.`),
+        title: (0, ComponentDefs_1.d)("Title for the application logo"),
+        showLogo: (0, ComponentDefs_1.d)("Show the logo in the header", null, "boolean", true),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(AppHeader_module_scss_1.default.themeVars),
+    defaultThemeVars: Object.assign(Object.assign(Object.assign(Object.assign({ "height-AppHeader": "$space-14", "max-content-width-AppHeader": "$max-content-width-App" }, (0, base_utils_1.borderSubject)("AppHeader", {
+        bottom: {
+            color: "$color-border",
+            thickness: "1px",
+            style: "solid",
+        },
+        all: {
+            color: "$color-border",
+            thickness: "0",
+            style: "solid",
+        },
+    })), (0, base_utils_1.paddingSubject)("logo-AppHeader", { horizontal: "$space-0", vertical: "$space-4" })), (0, base_utils_1.paddingSubject)("AppHeader", { horizontal: "$space-4", vertical: "$space-0" })), { "radius-AppHeader": "0px", light: {
+            "color-bg-AppHeader": "white",
+        }, dark: {
+            "color-bg-AppHeader": "$color-surface-900",
+        } }),
+});
+exports.appHeaderComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.AppHeaderMd, ({ node, renderChild, layoutCss, layoutContext, extractValue }) => {
+    var _a, _b;
+    // --- Convert the plain (text) logo template into component definition
+    const logoTemplate = node.props.logoTemplate || ((_a = node.slots) === null || _a === void 0 ? void 0 : _a.logoSlot);
+    const titleTemplate = node.props.titleTemplate || ((_b = node.slots) === null || _b === void 0 ? void 0 : _b.titleSlot);
+    return ((0, jsx_runtime_1.jsx)(AppHeaderNative_1.AppContextAwareAppHeader, { profileMenu: renderChild(extractValue(node.props.profileMenuTemplate, true)), title: extractValue(node.props.title), showLogo: extractValue.asOptionalBoolean(node.props.showLogo, true), titleContent: titleTemplate && ((0, jsx_runtime_1.jsx)(slot_helpers_1.SlotItem, { node: titleTemplate, renderChild: renderChild, slotProps: { title: extractValue(node.props.title) } })), logoContent: renderChild(logoTemplate, {
+            type: "Stack",
+            orientation: "horizontal",
+        }), style: layoutCss, className: layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.themeClassName, renderChild: renderChild, children: renderChild(node.children, {
+            // Since the AppHeader is a flex container, it's children should behave the same as in a stack
+            type: "Stack",
+        }) }));
+});

package/dist/scripts/src/components/AppHeader/AppHeaderNative.js

@@ -0,0 +1,58 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppHeader = void 0;
+exports.useLogoUrl = useLogoUrl;
+exports.AppContextAwareAppHeader = AppContextAwareAppHeader;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const AppHeader_module_scss_1 = __importDefault(require("./AppHeader.module.scss"));
+const IconNative_1 = require("@components/Icon/IconNative");
+const constants_1 = require("@components-core/constants");
+const LogoNative_1 = require("@components/Logo/LogoNative");
+const AppLayoutContext_1 = require("@components/App/AppLayoutContext");
+const ButtonNative_1 = require("@components/Button/ButtonNative");
+const ThemeContext_1 = require("@components-core/theming/ThemeContext");
+const NavLinkNative_1 = require("@components/NavLink/NavLinkNative");
+const AppContext_1 = require("@components-core/AppContext");
+function tryLoadImage(url, onLoaded, onError) {
+    const img = new Image();
+    img.src = url;
+    img.onload = () => {
+        onLoaded();
+    };
+    img.onerror = () => {
+        onError();
+    };
+}
+function useLogoUrl() {
+    const { logo, logoLight, logoDark } = (0, AppLayoutContext_1.useAppLayoutContext)() || {};
+    const logoUrlByTone = {
+        light: logoLight,
+        dark: logoDark,
+    };
+    const { activeThemeTone } = (0, ThemeContext_1.useTheme)();
+    const baseLogoUrl = (0, ThemeContext_1.useResourceUrl)("resource:logo") || logo;
+    const toneLogoUrl = (0, ThemeContext_1.useResourceUrl)(`resource:logo-${activeThemeTone}`) || logoUrlByTone[activeThemeTone];
+    return toneLogoUrl || baseLogoUrl;
+}
+const AppHeader = ({ children, profileMenu, style = constants_1.EMPTY_OBJECT, logoContent, className, canRestrictContentWidth, navPanelVisible = true, toggleDrawer, showLogo, hasRegisteredNavPanel, title, titleContent, }) => {
+    const { mediaSize } = (0, AppContext_1.useAppContext)();
+    const logoUrl = useLogoUrl();
+    const safeLogoTitle = mediaSize.sizeIndex < 2 ? null : !titleContent && title ? ((0, jsx_runtime_1.jsx)(NavLinkNative_1.NavLink, { to: "/", displayActive: false, style: { paddingLeft: 0 }, children: title })) : (titleContent);
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(AppHeader_module_scss_1.default.header, className), style: style, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(AppHeader_module_scss_1.default.headerInner, {
+                [AppHeader_module_scss_1.default.full]: !canRestrictContentWidth,
+            }), children: [!navPanelVisible && hasRegisteredNavPanel && ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: toggleDrawer, icon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "hamburger" }), variant: "ghost", style: { color: "inherit", flexShrink: 0 } })), (0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.logoAndTitle, children: (showLogo || !navPanelVisible) &&
+                        (logoContent ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.customLogoContainer, children: logoContent }), safeLogoTitle] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!!logoUrl && ((0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.logoContainer, children: (0, jsx_runtime_1.jsx)(NavLinkNative_1.NavLink, { to: "/", displayActive: false, style: { padding: 0, height: "100%" }, children: (0, jsx_runtime_1.jsx)(LogoNative_1.Logo, {}) }) })), safeLogoTitle] }))) }), (0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.childrenWrapper, children: children }), profileMenu && (0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.rightItems, children: profileMenu })] }) }));
+};
+exports.AppHeader = AppHeader;
+function AppContextAwareAppHeader({ children, logoContent, profileMenu, style, className, title, titleContent, showLogo = true, renderChild, }) {
+    const appLayoutContext = (0, AppLayoutContext_1.useAppLayoutContext)();
+    const { navPanelVisible, toggleDrawer, layout, hasRegisteredNavPanel, navPanelDef, logoContentDef, } = appLayoutContext || {};
+    // console.log("APP LAYOUT CONTEXT", appLayoutContext);
+    const displayLogo = layout !== "vertical" && layout !== "vertical-sticky" && showLogo;
+    const canRestrictContentWidth = layout !== "vertical-full-header";
+    return ((0, jsx_runtime_1.jsxs)(exports.AppHeader, { hasRegisteredNavPanel: hasRegisteredNavPanel, navPanelVisible: navPanelVisible, toggleDrawer: toggleDrawer, canRestrictContentWidth: canRestrictContentWidth, showLogo: displayLogo, logoContent: logoContent || renderChild(logoContentDef), profileMenu: profileMenu, style: style, className: className, title: title, titleContent: titleContent, children: [(layout === null || layout === void 0 ? void 0 : layout.startsWith("condensed")) && navPanelVisible && ((0, jsx_runtime_1.jsx)("div", { style: { minWidth: 0 }, children: renderChild(navPanelDef) })), children] }));
+}

package/dist/scripts/src/components/AppState/AppState.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.appStateComponentRenderer = exports.AppStateMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const renderers_1 = require("@components-core/renderers");
+const AppStateNative_1 = require("./AppStateNative");
+const COMP = "AppState";
+exports.AppStateMd = (0, ComponentDefs_1.createMetadata)({
+    description: `${COMP} is a functional component (without a visible user interface) that helps ` +
+        `store and manage the app's state.`,
+    props: {
+        bucket: (0, ComponentDefs_1.d)(`This property is the identifier of the bucket to which the \`${COMP}\` instance is bound. ` +
+            `Multiple \`${COMP}\` instances with the same bucket will share the same state object: any ` +
+            `of them updating the state will cause the other instances to view the new, updated state.`),
+        initialValue: (0, ComponentDefs_1.d)(`This property contains the initial state value. Though you can use multiple \`${COMP}\`` +
+            `component instances for the same bucket with their \`initialValue\` set, it may result ` +
+            `in faulty app logic. When xmlui instantiates an \`${COMP}\` with an explicit initial ` +
+            `value, that value is immediately set. Multiple initial values may result in ` +
+            `undesired initialization.`),
+    },
+    nonVisual: true,
+});
+exports.appStateComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.AppStateMd, ({ node, extractValue, updateState, registerComponentApi }) => {
+    return ((0, jsx_runtime_1.jsx)(AppStateNative_1.AppState, { bucket: extractValue(node.props.bucket), initialValue: extractValue(node.props.initialValue), updateState: updateState, registerComponentApi: registerComponentApi }));
+});

package/dist/scripts/src/components/AppState/AppStateNative.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppState = AppState;
+const hooks_1 = require("@components-core/utils/hooks");
+const AppStateContext_1 = require("@components/App/AppStateContext");
+function AppState({ bucket = "default", updateState, initialValue, registerComponentApi, }) {
+    const registerAppState = (0, AppStateContext_1.useAppStateContextPart)((value) => value.registerAppState);
+    const update = (0, AppStateContext_1.useAppStateContextPart)((value) => value.update);
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        if (initialValue !== undefined) {
+            registerAppState(bucket, initialValue);
+        }
+    }, [bucket, initialValue, registerAppState]);
+    const value = (0, AppStateContext_1.useAppStateContextPart)((value) => value.appState[bucket]);
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        updateState({ value });
+    }, [updateState, value]);
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        registerComponentApi({
+            update: (patch) => update(bucket, patch),
+        });
+    }, [bucket, registerComponentApi, update]);
+    return null;
+}

package/dist/scripts/src/components/AutoComplete/AutoComplete.js

@@ -0,0 +1,83 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.autoCompleteComponentRenderer = exports.AutoCompleteMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const renderers_1 = require("@components-core/renderers");
+const AutoComplete_module_scss_1 = __importDefault(require("@components/AutoComplete/AutoComplete.module.scss"));
+const container_helpers_1 = require("@components/container-helpers");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const metadata_helpers_1 = require("@components/metadata-helpers");
+const AutoCompleteNative_1 = require("@components/AutoComplete/AutoCompleteNative");
+const COMP = "AutoComplete";
+exports.AutoCompleteMd = (0, ComponentDefs_1.createMetadata)({
+    description: "This component is a dropdown with a list of options. According to the " +
+        "`multi` property, the user can select one or more items.",
+    status: "experimental",
+    props: {
+        placeholder: (0, metadata_helpers_1.dPlaceholder)(),
+        initialValue: (0, metadata_helpers_1.dInitialValue)(),
+        maxLength: (0, metadata_helpers_1.dMaxLength)(),
+        autoFocus: (0, metadata_helpers_1.dAutoFocus)(),
+        required: (0, metadata_helpers_1.dRequired)(),
+        readOnly: (0, metadata_helpers_1.dReadonly)(),
+        enabled: (0, metadata_helpers_1.dEnabled)(),
+        validationStatus: (0, metadata_helpers_1.dValidationStatus)(),
+        dropdownHeight: (0, ComponentDefs_1.d)("This property sets the height of the dropdown list."),
+        multi: (0, metadata_helpers_1.dMulti)(),
+        optionTemplate: (0, metadata_helpers_1.dComponent)(`This property enables the customization of list items. To access the attributes of ` +
+            `a list item use the \`$item\` context variable.`),
+        emptyListTemplate: (0, ComponentDefs_1.d)("This property defines the template to display when the list of options is empty."),
+    },
+    events: {
+        gotFocus: (0, metadata_helpers_1.dGotFocus)(COMP),
+        lostFocus: (0, metadata_helpers_1.dLostFocus)(COMP),
+        didChange: (0, metadata_helpers_1.dDidChange)(COMP),
+    },
+    apis: {
+        focus: (0, metadata_helpers_1.dFocus)(COMP),
+        value: (0, ComponentDefs_1.d)(`You can query the component's value. If no value is set, it will retrieve \`undefined\`.`),
+        setValue: (0, metadata_helpers_1.dSetValueApi)(),
+    },
+    contextVars: {
+        $item: (0, ComponentDefs_1.d)("This context value represents an item when you define an option item template. " +
+            "Use `$item.value` and `$item.label` to refer to the value and label of the " +
+            "particular option."),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(AutoComplete_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        [`color-bg-menu-${COMP}`]: "$color-bg-primary",
+        [`shadow-menu-${COMP}`]: "$shadow-md",
+        [`radius-menu-${COMP}`]: "$radius",
+        [`color-bg-item-${COMP}`]: "$color-bg-dropdown-item",
+        [`color-bg-item-${COMP}--hover`]: "$color-bg-dropdown-item--active",
+        [`color-bg-item-${COMP}--active`]: "$color-bg-dropdown-item--active",
+        [`min-height-Input`]: "39px",
+        [`color-bg-${COMP}-badge`]: "$color-primary-500",
+        [`font-size-${COMP}-badge`]: "$font-size-small",
+        [`padding-horizontal-${COMP}-badge`]: "$space-1",
+        [`padding-vertical-${COMP}-badge`]: "$space-1",
+        light: {
+            [`color-bg-${COMP}-badge--hover`]: "$color-primary-400",
+            [`color-bg-${COMP}-badge--active`]: "$color-primary-500",
+            [`color-text-item-${COMP}--disabled`]: "$color-surface-200",
+            [`color-text-${COMP}-badge`]: "$color-surface-50",
+        },
+        dark: {
+            [`color-bg-${COMP}-badge--hover`]: "$color-primary-600",
+            [`color-bg-${COMP}-badge--active`]: "$color-primary-500",
+            [`color-text-${COMP}-badge`]: "$color-surface-50",
+            [`color-text-item-${COMP}--disabled`]: "$color-surface-800",
+        },
+    },
+});
+exports.autoCompleteComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.AutoCompleteMd, ({ node, state, updateState, extractValue, renderChild, lookupEventHandler, layoutCss, registerComponentApi, }) => {
+    return ((0, jsx_runtime_1.jsx)(AutoCompleteNative_1.AutoComplete, { multi: extractValue.asOptionalBoolean(node.props.multi), style: layoutCss, updateState: updateState, initialValue: extractValue(node.props.initialValue), value: state === null || state === void 0 ? void 0 : state.value, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue.asOptionalString(node.props.placeholder), validationStatus: extractValue(node.props.validationStatus), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, emptyListTemplate: renderChild(node.props.emptyListTemplate), dropdownHeight: extractValue(node.props.dropdownHeight), optionRenderer: node.props.optionTemplate
+            ? (item) => {
+                return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.optionTemplate, item: item, renderChild: renderChild }));
+            }
+            : undefined, children: renderChild(node.children) }));
+});

package/dist/scripts/src/components/AutoComplete/AutoCompleteContext.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AutoCompleteContext = void 0;
+exports.useAutoComplete = useAutoComplete;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+exports.AutoCompleteContext = (0, react_1.createContext)({
+    value: null,
+    onChange: (selectedValue) => { },
+    optionRenderer: (option) => (0, jsx_runtime_1.jsx)("div", { children: option.label }),
+    inputValue: "",
+    options: new Set(),
+});
+function useAutoComplete() {
+    return (0, react_1.useContext)(exports.AutoCompleteContext);
+}