xmlui 0.9.92 → 0.9.94

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, { 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

@@ -1,37 +1,4 @@
 "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 };
 };
@@ -39,22 +6,33 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tabs = exports.defaultProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const RTabs = __importStar(require("@radix-ui/react-tabs"));
+const react_tabs_1 = require("@radix-ui/react-tabs");
 const Tabs_module_scss_1 = __importDefault(require("./Tabs.module.scss"));
 const misc_1 = require("../../components-core/utils/misc");
-const TabContext_1 = require("../Tabs/TabContext");
+const TabContext_1 = require("./TabContext");
 const classnames_1 = __importDefault(require("classnames"));
 exports.defaultProps = {
     activeTab: 0,
     orientation: "horizontal",
     distributeEvenly: false,
 };
-exports.Tabs = (0, react_1.forwardRef)(function Tabs({ activeTab = exports.defaultProps.activeTab, orientation = exports.defaultProps.orientation, tabRenderer, style, children, 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 [activeIndex, setActiveIndex] = (0, react_1.useState)(activeTab);
+    const tabsId = id || (0, react_1.useId)();
+    // Ensure activeTab is within valid bounds
+    const validActiveTab = (0, react_1.useMemo)(() => {
+        if (tabItems.length === 0)
+            return 0;
+        if (activeTab < 0)
+            return 0;
+        if (activeTab >= tabItems.length)
+            return 0; // Default to first tab if out of bounds
+        return activeTab;
+    }, [activeTab, tabItems.length]);
+    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);
@@ -63,8 +41,8 @@ exports.Tabs = (0, react_1.forwardRef)(function Tabs({ activeTab = exports.defau
         if (activeTab !== undefined) {
             setActiveIndex(() => {
                 const maxIndex = tabItems.length - 1;
-                const newIndex = activeTab - 1;
-                return newIndex < 0 ? 0 : newIndex > maxIndex ? maxIndex : newIndex;
+                const newIndex = activeTab; // activeTab should be 0-based index
+                return newIndex < 0 ? 0 : newIndex > maxIndex ? 0 : newIndex; // Default to first tab (0) when out of bounds
             });
         }
     }, [activeTab, tabItems.length]);
@@ -74,18 +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)(RTabs.Root, { 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)(RTabs.List, { className: Tabs_module_scss_1.default.tabsList, children: [tabItems.map((tab) => tabRenderer ? ((0, jsx_runtime_1.jsx)(RTabs.Trigger, { value: tab.id, asChild: true, children: tabRenderer({ label: tab.label, isActive: tab.id === currentTab }) }, tab.id)) : ((0, jsx_runtime_1.jsx)(RTabs.Trigger, { 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] }) }));
+            }, 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.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.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/scripts/src/components/TextArea/TextArea.js

@@ -85,6 +85,5 @@ exports.TextAreaMd = (0, metadata_helpers_1.createMetadata)({
     themeVars: (0, themeVars_1.parseScssVar)(TextArea_module_scss_1.default.themeVars),
 });
 exports.textAreaComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.TextAreaMd, ({ node, extractValue, state, updateState, layoutCss, registerComponentApi, lookupEventHandler, }) => {
-    const initialValue = extractValue(node.props.initialValue);
-    return ((0, jsx_runtime_1.jsx)(TextAreaNative_1.TextArea, { value: state === null || state === void 0 ? void 0 : state.value, initialValue: initialValue, updateState: updateState, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue(node.props.placeholder), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), resize: node.props.resize, enterSubmits: extractValue.asOptionalBoolean(node.props.enterSubmits), escResets: extractValue.asOptionalBoolean(node.props.escResets), style: layoutCss, registerComponentApi: registerComponentApi, maxRows: extractValue.asOptionalNumber(node.props.maxRows), minRows: extractValue.asOptionalNumber(node.props.minRows), maxLength: extractValue.asOptionalNumber(node.props.maxLength), rows: extractValue.asOptionalNumber(node.props.rows), autoSize: extractValue.asOptionalBoolean(node.props.autoSize), validationStatus: extractValue(node.props.validationStatus), label: extractValue(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required) }, `${node.uid}-${initialValue}`));
+    return ((0, jsx_runtime_1.jsx)(TextAreaNative_1.TextArea, { value: state === null || state === void 0 ? void 0 : state.value, initialValue: extractValue(node.props.initialValue), updateState: updateState, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue(node.props.placeholder), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), resize: node.props.resize, enterSubmits: extractValue.asOptionalBoolean(node.props.enterSubmits), escResets: extractValue.asOptionalBoolean(node.props.escResets), style: layoutCss, registerComponentApi: registerComponentApi, maxRows: extractValue.asOptionalNumber(node.props.maxRows), minRows: extractValue.asOptionalNumber(node.props.minRows), maxLength: extractValue.asOptionalNumber(node.props.maxLength), rows: extractValue.asOptionalNumber(node.props.rows), autoSize: extractValue.asOptionalBoolean(node.props.autoSize), validationStatus: extractValue(node.props.validationStatus), label: extractValue(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required) }));
 });

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

@@ -57,8 +57,29 @@ exports.Toggle = (0, react_3.forwardRef)(function Toggle({ id, initialValue = ex
     const generatedId = (0, react_1.useId)();
     const inputId = id || generatedId;
     const innerRef = react_3.default.useRef(null);
+    const transformToLegitValue = (inp) => {
+        if (typeof inp === "undefined" || inp === null) {
+            return false;
+        }
+        if (typeof inp === "boolean") {
+            return inp;
+        }
+        if (typeof inp === "number") {
+            return !isNaN(inp) && !!inp;
+        }
+        if (typeof inp === "string") {
+            return inp.trim() !== "" && inp.toLowerCase() !== "false";
+        }
+        if (Array.isArray(inp)) {
+            return inp.length > 0;
+        }
+        if (typeof inp === "object") {
+            return Object.keys(inp).length > 0;
+        }
+        return false;
+    };
     (0, react_3.useEffect)(() => {
-        updateState({ value: initialValue }, { initial: true });
+        updateState({ value: transformToLegitValue(initialValue) }, { initial: true });
     }, [initialValue, updateState]);
     const updateValue = (0, react_3.useCallback)((value) => {
         var _a;
@@ -95,7 +116,7 @@ exports.Toggle = (0, react_3.forwardRef)(function Toggle({ id, initialValue = ex
         }
     }, [focus, autoFocus]);
     const setValue = (0, misc_1.useEvent)((newValue) => {
-        updateValue(newValue);
+        updateValue(transformToLegitValue(newValue));
     });
     (0, react_3.useEffect)(() => {
         registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
@@ -103,13 +124,16 @@ exports.Toggle = (0, react_3.forwardRef)(function Toggle({ id, initialValue = ex
             setValue,
         });
     }, [focus, registerComponentApi, setValue]);
-    const input = (0, react_2.useMemo)(() => ((0, jsx_runtime_1.jsx)("input", { id: inputId, ref: innerRef, type: "checkbox", role: variant, checked: value, disabled: !enabled, required: required, readOnly: readOnly, "aria-readonly": readOnly, "aria-checked": indeterminate ? "mixed" : value, "aria-required": required, "aria-disabled": !enabled, onChange: onInputChange, onFocus: handleOnFocus, onBlur: handleOnBlur, autoFocus: autoFocus, className: (0, classnames_1.default)(Toggle_module_scss_1.default.resetAppearance, className, {
-            [Toggle_module_scss_1.default.checkbox]: variant === "checkbox",
-            [Toggle_module_scss_1.default.switch]: variant === "switch",
-            [Toggle_module_scss_1.default.error]: validationStatus === "error",
-            [Toggle_module_scss_1.default.warning]: validationStatus === "warning",
-            [Toggle_module_scss_1.default.valid]: validationStatus === "valid",
-        }) })), [
+    const input = (0, react_2.useMemo)(() => {
+        const legitValue = transformToLegitValue(value);
+        return ((0, jsx_runtime_1.jsx)("input", { id: inputId, ref: innerRef, type: "checkbox", role: variant, checked: legitValue, disabled: !enabled, required: required, readOnly: readOnly, "aria-readonly": readOnly, "aria-checked": indeterminate ? "mixed" : legitValue, "aria-required": required, "aria-disabled": !enabled, onChange: onInputChange, onFocus: handleOnFocus, onBlur: handleOnBlur, autoFocus: autoFocus, className: (0, classnames_1.default)(Toggle_module_scss_1.default.resetAppearance, className, {
+                [Toggle_module_scss_1.default.checkbox]: variant === "checkbox",
+                [Toggle_module_scss_1.default.switch]: variant === "switch",
+                [Toggle_module_scss_1.default.error]: validationStatus === "error",
+                [Toggle_module_scss_1.default.warning]: validationStatus === "warning",
+                [Toggle_module_scss_1.default.valid]: validationStatus === "valid",
+            }) }));
+    }, [
         inputId,
         className,
         enabled,
@@ -125,7 +149,7 @@ exports.Toggle = (0, react_3.forwardRef)(function Toggle({ id, initialValue = ex
         autoFocus,
     ]);
     return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { ref: forwardedRef, id: inputId, label: label, style: style, labelPosition: labelPosition, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, isInputTemplateUsed: !!inputRenderer, shrinkToLabel: true, labelStyle: { pointerEvents: readOnly ? "none" : undefined }, children: inputRenderer ? ((0, jsx_runtime_1.jsxs)("label", { className: Toggle_module_scss_1.default.label, children: [(0, jsx_runtime_1.jsx)("div", { className: Toggle_module_scss_1.default.inputContainer, children: input }), inputRenderer({
-                    $checked: value,
+                    $checked: transformToLegitValue(value),
                     $setChecked: setValue,
                 })] })) : (input) }));
 });

package/dist/scripts/src/components/container-helpers.js

@@ -20,6 +20,7 @@ exports.MemoizedItem = (0, react_1.memo)(({ node, item, context, renderChild, la
             contextVars: Object.assign({ [itemKey]: item, [contextKey]: context }, shallowMemoedContextVars),
             children: Array.isArray(node) ? node : [node],
         };
-    }, [context, item, node, shallowMemoedContextVars]);
+    }, [context, item, node, shallowMemoedContextVars, itemKey, contextKey]);
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: renderChild(nodeWithItem, layoutContext) });
 });
+exports.MemoizedItem.displayName = "MemoizedItem";

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

@@ -65,13 +65,14 @@ exports.ComponentWrapper = (0, react_1.memo)((0, react_1.forwardRef)(function Co
     }
 }));
 function transformNodeWithChildrenAsTemplate(node, childrenAsTemplate) {
+    var _a;
     if (!childrenAsTemplate) {
         return node;
     }
     if (!node.children || node.children.length === 0) {
         return node;
     }
-    if (node.props[childrenAsTemplate]) {
+    if ((_a = node.props) === null || _a === void 0 ? void 0 : _a[childrenAsTemplate]) {
         throw Error("'" + childrenAsTemplate + "' is already used as a property.");
     }
     return Object.assign(Object.assign({}, node), { props: Object.assign(Object.assign({}, node.props), { [childrenAsTemplate]: node.children }), children: constants_1.EMPTY_ARRAY });