xmlui 0.9.93 → 0.9.94

package/dist/scripts/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xmlui",
-    "version": "0.9.93",
+    "version": "0.9.94",
     "sideEffects": false,
     "scripts": {
         "start-test-bed": "cd src/testing/infrastructure && xmlui start",

package/dist/scripts/src/components/Tabs/TabContext.js

@@ -11,7 +11,7 @@ const immer_1 = __importDefault(require("immer"));
 const constants_1 = require("../../components-core/constants");
 exports.TabContext = (0, react_1.createContext)({
     register: (tabItem) => { },
-    unRegister: (id) => { },
+    unRegister: (innerId) => { },
     activeTabId: "",
 });
 function useTabContextValue() {
@@ -19,20 +19,20 @@ function useTabContextValue() {
     const [activeTabId, setActiveTabId] = (0, react_1.useState)("");
     const tabContextValue = (0, react_1.useMemo)(() => {
         return {
-            register: (column) => {
+            register: (tabItem) => {
                 setTabItems((0, immer_1.default)((draft) => {
-                    const existing = draft.findIndex((col) => col.id === column.id);
+                    const existing = draft.findIndex((col) => col.innerId === tabItem.innerId);
                     if (existing < 0) {
-                        draft.push(column);
+                        draft.push(tabItem);
                     }
                     else {
-                        draft[existing] = column;
+                        draft[existing] = tabItem;
                     }
                 }));
             },
-            unRegister: (id) => {
+            unRegister: (innerId) => {
                 setTabItems((0, immer_1.default)((draft) => {
-                    return draft.filter((col) => col.id !== id);
+                    return draft.filter((col) => col.innerId !== innerId);
                 }));
             },
             activeTabId,

package/dist/scripts/src/components/Tabs/TabItem.js

@@ -16,18 +16,23 @@ exports.TabItemMd = (0, metadata_helpers_1.createMetadata)({
     docFolder: "Tabs",
     props: {
         label: (0, metadata_helpers_1.dLabel)(),
-        labelTemplate: (0, metadata_helpers_1.dComponent)("This property allows the customization of the TabItem label."),
+        headerTemplate: (0, metadata_helpers_1.dComponent)("This property allows the customization of the TabItem header."),
     },
     contextVars: {
-        $item: (0, metadata_helpers_1.d)("This context value represents an item when you define a tab item template."),
+        $header: (0, metadata_helpers_1.d)("This context value represents the header context with props: id (optional), index, label, isActive."),
     },
 });
 exports.tabItemComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.TabItemMd, (rendererContext) => {
     const { node, renderChild, extractValue } = rendererContext;
-    return ((0, jsx_runtime_1.jsx)(TabItemNative_1.TabItemComponent, { label: extractValue(node.props.label), labelRenderer: node.props.labelTemplate
+    return ((0, jsx_runtime_1.jsx)(TabItemNative_1.TabItemComponent, { id: extractValue(node.uid), label: extractValue(node.props.label), headerRenderer: node.props.headerTemplate
             ? (item) => {
-                return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.labelTemplate, item: item, context: {
-                        $item: item,
+                return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.headerTemplate, itemKey: "$header", contextVars: {
+                        $header: {
+                            id: item.id,
+                            index: item.index,
+                            label: item.label,
+                            isActive: item.isActive,
+                        },
                     }, renderChild: renderChild }));
             }
             : undefined, children: renderChild(node.children) }));

package/dist/scripts/src/components/Tabs/TabItemNative.js

@@ -9,22 +9,23 @@ const react_1 = require("react");
 const react_tabs_1 = require("@radix-ui/react-tabs");
 const Tabs_module_scss_1 = __importDefault(require("../Tabs/Tabs.module.scss"));
 const TabContext_1 = require("./TabContext");
-exports.TabItemComponent = (0, react_1.forwardRef)(function TabItemComponent({ children, label, labelRenderer, style }, forwardedRef) {
-    const id = (0, react_1.useId)();
+exports.TabItemComponent = (0, react_1.forwardRef)(function TabItemComponent({ children, label, headerRenderer, style, id }, forwardedRef) {
+    const innerId = (0, react_1.useId)();
     const { register, unRegister, activeTabId } = (0, TabContext_1.useTabContext)();
     (0, react_1.useEffect)(() => {
         register({
             label,
-            labelRenderer,
-            id,
+            headerRenderer,
+            innerId,
+            id, // Store the external id (can be undefined)
         });
-    }, [id, label, labelRenderer, register]);
+    }, [innerId, id, label, headerRenderer, register]);
     (0, react_1.useEffect)(() => {
         return () => {
-            unRegister(id);
+            unRegister(innerId);
         };
-    }, [id, unRegister]);
-    if (activeTabId !== id)
+    }, [innerId, unRegister]);
+    if (activeTabId !== innerId)
         return null;
-    return ((0, jsx_runtime_1.jsx)(react_tabs_1.Content, { value: id, className: Tabs_module_scss_1.default.tabsContent, ref: forwardedRef, style: style, children: children }, id));
+    return ((0, jsx_runtime_1.jsx)(react_tabs_1.Content, { value: innerId, className: Tabs_module_scss_1.default.tabsContent, ref: forwardedRef, style: style, children: children }, innerId));
 });

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

@@ -29,13 +29,25 @@ exports.TabsMd = (0, metadata_helpers_1.createMetadata)({
             defaultValue: TabsNative_1.defaultProps.orientation,
             valueType: "string",
         },
-        tabTemplate: Object.assign(Object.assign({}, (0, metadata_helpers_1.dComponent)(`This property declares the template for the clickable tab area.`)), { isInternal: true }),
+        headerTemplate: Object.assign({}, (0, metadata_helpers_1.dComponent)(`This property declares the template for the clickable tab area.`)),
     },
     apis: {
         next: {
             description: `This method selects the next tab. If the current tab is the last one, it wraps around to the first tab.`,
             signature: "next(): void",
         },
+        prev: {
+            description: `This method selects the previous tab. If the current tab is the first one, it wraps around to the last tab.`,
+            signature: "prev(): void",
+        },
+        setActiveTabIndex: {
+            description: `This method sets the active tab by index (0-based).`,
+            signature: "setActiveTabIndex(index: number): void",
+        },
+        setActiveTabById: {
+            description: `This method sets the active tab by its ID.`,
+            signature: "setActiveTabById(id: string): void",
+        },
     },
     themeVars: (0, themeVars_1.parseScssVar)(Tabs_module_scss_1.default.themeVars),
     defaultThemeVars: {
@@ -53,7 +65,9 @@ exports.TabsMd = (0, metadata_helpers_1.createMetadata)({
 });
 exports.tabsComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.TabsMd, ({ extractValue, node, renderChild, layoutCss, registerComponentApi }) => {
     var _a, _b, _c;
-    return ((0, jsx_runtime_1.jsx)(TabsNative_1.Tabs, { id: node === null || node === void 0 ? void 0 : node.uid, style: layoutCss, tabRenderer: !!((_a = node === null || node === void 0 ? void 0 : node.props) === null || _a === void 0 ? void 0 : _a.tabTemplate)
-            ? (item) => ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.tabTemplate, item: item, renderChild: renderChild }))
+    return ((0, jsx_runtime_1.jsx)(TabsNative_1.Tabs, { id: node === null || node === void 0 ? void 0 : node.uid, style: layoutCss, headerRenderer: !!((_a = node === null || node === void 0 ? void 0 : node.props) === null || _a === void 0 ? void 0 : _a.headerTemplate)
+            ? (item) => ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.headerTemplate, itemKey: "$header", contextVars: {
+                    $header: item,
+                }, renderChild: renderChild }))
             : undefined, activeTab: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.activeTab), orientation: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.orientation), registerComponentApi: registerComponentApi, children: renderChild(node.children) }));
 });

package/dist/scripts/src/components/Tabs/TabsNative.js

@@ -16,8 +16,9 @@ exports.defaultProps = {
     orientation: "horizontal",
     distributeEvenly: false,
 };
-exports.Tabs = (0, react_1.forwardRef)(function Tabs({ activeTab = exports.defaultProps.activeTab, orientation = exports.defaultProps.orientation, tabRenderer, style, children, id, registerComponentApi, className, distributeEvenly = exports.defaultProps.distributeEvenly, }, forwardedRef) {
+exports.Tabs = (0, react_1.forwardRef)(function Tabs({ activeTab = exports.defaultProps.activeTab, orientation = exports.defaultProps.orientation, headerRenderer, style, children, id, registerComponentApi, className, distributeEvenly = exports.defaultProps.distributeEvenly, }, forwardedRef) {
     const { tabItems, tabContextValue } = (0, TabContext_1.useTabContextValue)();
+    const tabsId = id || (0, react_1.useId)();
     // Ensure activeTab is within valid bounds
     const validActiveTab = (0, react_1.useMemo)(() => {
         if (tabItems.length === 0)
@@ -31,7 +32,7 @@ exports.Tabs = (0, react_1.forwardRef)(function Tabs({ activeTab = exports.defau
     const [activeIndex, setActiveIndex] = (0, react_1.useState)(validActiveTab);
     const currentTab = (0, react_1.useMemo)(() => {
         var _a;
-        return (_a = tabItems[activeIndex]) === null || _a === void 0 ? void 0 : _a.id;
+        return (_a = tabItems[activeIndex]) === null || _a === void 0 ? void 0 : _a.innerId;
     }, [activeIndex, tabItems]);
     (0, react_1.useEffect)(() => {
         tabContextValue.setActiveTabId(currentTab);
@@ -51,20 +52,44 @@ exports.Tabs = (0, react_1.forwardRef)(function Tabs({ activeTab = exports.defau
             return prevIndex >= maxIndex ? 0 : prevIndex + 1;
         });
     });
+    const prev = (0, misc_1.useEvent)(() => {
+        setActiveIndex((prevIndex) => {
+            const maxIndex = tabItems.length - 1;
+            return prevIndex <= 0 ? maxIndex : prevIndex - 1;
+        });
+    });
+    const setActiveTabIndex = (0, misc_1.useEvent)((index) => {
+        if (index >= 0 && index < tabItems.length) {
+            setActiveIndex(index);
+        }
+    });
+    const setActiveTabById = (0, misc_1.useEvent)((tabId) => {
+        // First try to find by external id, then by innerId
+        let index = tabItems.findIndex((item) => item.id === tabId);
+        if (index === -1) {
+            index = tabItems.findIndex((item) => item.innerId === tabId);
+        }
+        if (index !== -1) {
+            setActiveIndex(index);
+        }
+    });
     (0, react_1.useEffect)(() => {
         registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
             next,
+            prev,
+            setActiveTabIndex,
+            setActiveTabById,
         });
-    }, [next, registerComponentApi]);
-    return ((0, jsx_runtime_1.jsx)(TabContext_1.TabContext.Provider, { value: tabContextValue, children: (0, jsx_runtime_1.jsxs)(react_tabs_1.Root, { id: id, ref: forwardedRef, className: (0, classnames_1.default)(Tabs_module_scss_1.default.tabs, className), value: `${currentTab}`, onValueChange: (tab) => {
-                const newIndex = tabItems.findIndex((item) => item.id === tab);
+    }, [next, prev, setActiveTabIndex, setActiveTabById, registerComponentApi]);
+    return ((0, jsx_runtime_1.jsx)(TabContext_1.TabContext.Provider, { value: tabContextValue, children: (0, jsx_runtime_1.jsxs)(react_tabs_1.Root, { id: tabsId, ref: forwardedRef, className: (0, classnames_1.default)(Tabs_module_scss_1.default.tabs, className), value: `${currentTab}`, onValueChange: (tab) => {
+                const newIndex = tabItems.findIndex((item) => item.innerId === tab);
                 if (newIndex !== activeIndex) {
                     tabContextValue.setActiveTabId(tab);
                     setActiveIndex(newIndex);
                 }
-            }, orientation: orientation, style: style, children: [(0, jsx_runtime_1.jsxs)(react_tabs_1.List, { className: Tabs_module_scss_1.default.tabsList, children: [tabItems.map((tab) => tab.labelRenderer ? ((0, jsx_runtime_1.jsx)(react_tabs_1.Trigger, { role: "tab", className: (0, classnames_1.default)(Tabs_module_scss_1.default.tabTrigger, {
+            }, orientation: orientation, style: style, children: [(0, jsx_runtime_1.jsxs)(react_tabs_1.List, { className: Tabs_module_scss_1.default.tabsList, role: "tablist", children: [tabItems.map((tab, index) => tab.headerRenderer ? ((0, jsx_runtime_1.jsx)(react_tabs_1.Trigger, { role: "tab", "aria-label": tab.label, className: (0, classnames_1.default)(Tabs_module_scss_1.default.tabTrigger, {
                                 [Tabs_module_scss_1.default.distributeEvenly]: distributeEvenly,
-                            }), value: tab.id, children: tab.labelRenderer(Object.assign(Object.assign({}, tab), { isActive: tab.id === currentTab })) }, tab.id)) : tabRenderer ? ((0, jsx_runtime_1.jsx)(react_tabs_1.Trigger, { value: tab.id, asChild: true, role: "tab", children: tabRenderer(Object.assign(Object.assign({}, tab), { isActive: tab.id === currentTab })) }, tab.id)) : ((0, jsx_runtime_1.jsx)(react_tabs_1.Trigger, { role: "tab", className: (0, classnames_1.default)(Tabs_module_scss_1.default.tabTrigger, {
+                            }), value: tab.innerId, children: tab.headerRenderer(Object.assign(Object.assign({}, (tab.id !== undefined && { id: tab.id })), { index, label: tab.label, isActive: tab.innerId === currentTab })) }, tab.innerId)) : headerRenderer ? ((0, jsx_runtime_1.jsx)(react_tabs_1.Trigger, { value: tab.innerId, role: "tab", "aria-label": tab.label, children: headerRenderer(Object.assign(Object.assign({}, (tab.id !== undefined && { id: tab.id })), { index, label: tab.label, isActive: tab.innerId === currentTab })) }, tab.innerId)) : ((0, jsx_runtime_1.jsx)(react_tabs_1.Trigger, { role: "tab", "aria-label": tab.label, className: (0, classnames_1.default)(Tabs_module_scss_1.default.tabTrigger, {
                                 [Tabs_module_scss_1.default.distributeEvenly]: distributeEvenly,
-                            }), value: tab.id, children: tab.label }, tab.id))), !distributeEvenly && !tabRenderer && ((0, jsx_runtime_1.jsx)("div", { className: Tabs_module_scss_1.default.filler, "data-orientation": orientation }))] }), children] }) }));
+                            }), value: tab.innerId, children: tab.label }, tab.innerId))), !distributeEvenly && !headerRenderer && ((0, jsx_runtime_1.jsx)("div", { className: Tabs_module_scss_1.default.filler, "data-orientation": orientation }))] }), children] }) }));
 });

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

@@ -1079,7 +1079,9 @@ declare type Props_3 = {
     id?: string;
     activeTab?: number;
     orientation?: "horizontal" | "vertical";
-    tabRenderer?: (item: {
+    headerRenderer?: (item: {
+        id?: string;
+        index: number;
         label: string;
         isActive: boolean;
     }) => ReactNode;
@@ -1362,7 +1364,9 @@ declare const standaloneExports: {
         id?: string;
         activeTab?: number;
         orientation?: "horizontal" | "vertical";
-        tabRenderer?: (item: {
+        headerRenderer?: (item: {
+            id?: string;
+            index: number;
             label: string;
             isActive: boolean;
         }) => default_2.ReactNode;
@@ -1631,8 +1635,9 @@ declare const T_VAR_STATEMENT: number;
 declare const T_WHILE_STATEMENT: number;
 
 declare type Tab = {
+    id?: string;
     label: string;
-    labelRenderer?: (contextVars: any) => ReactNode;
+    headerRenderer?: (contextVars: any) => ReactNode;
     children?: ReactNode;
     style?: CSSProperties;
 };