xmlui 0.9.76 → 0.9.78

package/dist/scripts/src/components-core/rendering/AppContent.js

@@ -90,7 +90,7 @@ function AppContent({ rootContainer, routerBaseName, globalProps, standalone, tr
                     observer.current.unobserve(root);
                 }
                 if (trackContainerHeight === "auto") {
-                    root.style.setProperty("--containerHeight", 'auto');
+                    root.style.setProperty("--containerHeight", "auto");
                 }
                 else {
                     observer.current = new ResizeObserver((entries) => {
@@ -191,14 +191,28 @@ function AppContent({ rootContainer, routerBaseName, globalProps, standalone, tr
         if (lastHash.current !== hash) {
             lastHash.current = hash;
             if (!((_a = location.state) === null || _a === void 0 ? void 0 : _a.preventHashScroll)) {
+                const rootNode = root === null || root === void 0 ? void 0 : root.getRootNode();
+                const scrollBehavior = "instant";
                 requestAnimationFrame(() => {
                     var _a;
-                    (_a = document
-                        .getElementById(lastHash.current)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: "instant", block: "start" });
+                    if (!rootNode)
+                        return;
+                    // --- If element is in shadow DOM
+                    if (rootNode instanceof ShadowRoot) {
+                        const el = rootNode.getElementById(lastHash.current);
+                        if (!el)
+                            return;
+                        scrollAncestorsToView(el, scrollBehavior);
+                    }
+                    else {
+                        // --- If element is in light DOM
+                        (_a = document
+                            .getElementById(lastHash.current)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: scrollBehavior, block: "start" });
+                    }
                 });
             }
         }
-    }, [location, scrollForceRefresh]);
+    }, [location, scrollForceRefresh, root]);
     const forceRefreshAnchorScroll = (0, react_1.useCallback)(() => {
         lastHash.current = "";
         setScrollForceRefresh((prev) => prev + 1);
@@ -345,7 +359,7 @@ function AppContent({ rootContainer, routerBaseName, globalProps, standalone, tr
         cleanup: constants_1.noop,
         memoedVarsRef,
     });
-    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: (!!children && (0, react_1.isValidElement)(renderedRoot))
+    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: !!children && (0, react_1.isValidElement)(renderedRoot)
                 ? (0, react_1.cloneElement)(renderedRoot, null, children)
                 : renderedRoot }) }));
 }
@@ -353,3 +367,49 @@ function AppContent({ rootContainer, routerBaseName, globalProps, standalone, tr
 function signError(error) {
     react_hot_toast_1.default.error(typeof error === "string" ? error : error.message || "Something went wrong");
 }
+/**
+ * Scrolls all ancestors of the specified element into view up to the first shadow root the element is in.
+ * @param target The element to scroll to, can be in the light or shadow DOM
+ * @param scrollBehavior The scroll behavior
+ */
+function scrollAncestorsToView(target, scrollBehavior) {
+    const scrollables = getScrollableAncestors(target);
+    // It's important to start from the outermost and work inwards.
+    scrollables.reverse().forEach((container) => {
+        // Compute the position of target relative to container
+        const targetRect = target.getBoundingClientRect();
+        const containerRect = container.getBoundingClientRect();
+        // Scroll so that the target is visible in this container
+        if (targetRect.top < containerRect.top || targetRect.bottom > containerRect.bottom) {
+            // Only scroll vertically, add more logic for horizontal if needed
+            const offset = targetRect.top - containerRect.top + container.scrollTop;
+            container.scrollTo({ top: offset, behavior: scrollBehavior });
+        }
+        // Optionally handle horizontal scrolling similarly
+    });
+    function getScrollableAncestors(el) {
+        const scrollables = [];
+        let current = el;
+        while (current) {
+            let parent = current.parentElement;
+            // If no parentElement, might be in shadow DOM
+            if (!parent && current.getRootNode) {
+                break;
+                // NOTE: Disregard shadow DOM, because we will scroll everything otherwise
+                /* const root = current.getRootNode();
+                if (root && root instanceof ShadowRoot && root.host) {
+                  parent = root.host as (HTMLElement | null);
+                } */
+            }
+            if (!parent)
+                break;
+            // Check if this parent is scrollable
+            const style = getComputedStyle(parent);
+            if (/(auto|scroll|overlay)/.test(style.overflow + style.overflowY + style.overflowX)) {
+                scrollables.push(parent);
+            }
+            current = parent;
+        }
+        return scrollables;
+    }
+}

package/dist/standalone/xmlui-standalone.es.d.ts

@@ -1061,6 +1061,14 @@ declare type Props_3 = {
     distributeEvenly?: boolean;
 };
 
+/**
+ * TextBox component that supports text input with various configurations.
+ * Features:
+ * - Standard text, password, and search input types
+ * - Input validation states
+ * - Start/end adornments (icons and text)
+ * - Password visibility toggle option
+ */
 declare type Props_4 = {
     id?: string;
     type?: "text" | "password" | "search";
@@ -1090,6 +1098,21 @@ declare type Props_4 = {
     labelWidth?: string;
     labelBreak?: boolean;
     required?: boolean;
+    /**
+     * When true and type is "password", displays a toggle icon to show/hide password text
+     * Default: false
+     */
+    showPasswordToggle?: boolean;
+    /**
+     * The icon to show when the password is visible
+     * Default: "eye"
+     */
+    passwordVisibleIcon?: string;
+    /**
+     * The icon to show when the password is hidden
+     * Default: "eye-off"
+     */
+    passwordHiddenIcon?: string;
 };
 
 declare type REACTIVE_VAR_DECLARATION = typeof T_REACTIVE_VAR_DECLARATION;
@@ -1370,6 +1393,9 @@ declare const standaloneExports: {
         labelWidth?: string;
         labelBreak?: boolean;
         required?: boolean;
+        showPasswordToggle?: boolean;
+        passwordVisibleIcon?: string;
+        passwordHiddenIcon?: string;
     } & default_2.RefAttributes<HTMLDivElement>>;
     NestedApp: typeof xmluiExports.NestedApp;
     VisuallyHidden: ({ children, ...props }: {