xmlui 0.9.90 → 0.9.93

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,19 +6,29 @@ 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, tabRenderer, 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);
+    // 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;
@@ -63,8 +40,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]);
@@ -79,13 +56,15 @@ exports.Tabs = (0, react_1.forwardRef)(function Tabs({ activeTab = exports.defau
             next,
         });
     }, [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) => {
+    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);
                 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, 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, {
+                                [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, {
+                                [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] }) }));
 });

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/abstractions.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.httpMethodNames = exports.VariantPropsKeys = exports.variantOptionsMd = exports.TextVariantElement = exports.orderingValues = exports.scrollAnchoringNames = exports.scrollAnchoringValues = exports.validationStatusMd = exports.validationStatusNames = exports.validationStatusValues = exports.triggerPositionNames = exports.labelPositionMd = exports.labelPositionNames = exports.labelPositionValues = exports.placementMd = exports.placementNames = exports.statusColorMd = exports.statusColorNames = exports.iconPositionMd = exports.iconPositionNames = exports.iconPositionValues = exports.orientationOptionMd = exports.orientationOptionNames = exports.alignmentOptionMd = exports.alignmentOptionNames = exports.alignmentOptionValues = exports.buttonAriaNames = exports.buttonVariantMd = exports.buttonVariantNames = exports.buttonVariantValues = exports.buttonTypesMd = exports.buttonTypeNames = exports.buttonTypeValues = exports.buttonThemeMd = exports.buttonThemeNames = exports.buttonThemeValues = exports.sizeNames = exports.sizeMd = exports.viewportSizeNames = exports.viewportSizeMd = exports.LinkTargetMd = exports.LinkTargetNames = void 0;
+exports.httpMethodNames = exports.VariantPropsKeys = exports.variantOptionsMd = exports.TextVariantElement = exports.orderingValues = exports.scrollAnchoringNames = exports.scrollAnchoringValues = exports.validationStatusMd = exports.validationStatusNames = exports.validationStatusValues = exports.triggerPositionNames = exports.labelPositionMd = exports.labelPositionNames = exports.labelPositionValues = exports.placementMd = exports.placementNames = exports.statusColorMd = exports.statusColorNames = exports.iconPositionMd = exports.iconPositionNames = exports.iconPositionValues = exports.orientationOptionMd = exports.orientationOptionNames = exports.alignmentOptionMd = exports.alignmentOptionNames = exports.alignmentOptionValues = exports.buttonAriaNames = exports.buttonVariantMd = exports.buttonVariantNames = exports.buttonVariantValues = exports.buttonTypesMd = exports.buttonTypeNames = exports.buttonTypeValues = exports.buttonThemeMd = exports.buttonThemeNames = exports.buttonThemeValues = exports.sizeMd = exports.sizeNames = exports.viewportSizeNames = exports.viewportSizeMd = exports.LinkTargetMd = exports.LinkTargetNames = void 0;
 exports.LinkTargetNames = ["_self", "_blank", "_parent", "_top", "_unfencedTop"];
 exports.LinkTargetMd = [
     {
@@ -38,14 +38,14 @@ exports.viewportSizeMd = [
 ];
 exports.viewportSizeNames = Object.keys(exports.viewportSizeMd);
 // --- Available button sizes
+exports.sizeNames = ["xs", "sm", "md", "lg"];
 exports.sizeMd = [
-    { value: "xs", description: "Extra small button" },
-    { value: "sm", description: "Small button" },
-    { value: "md", description: "Medium button" },
-    { value: "lg", description: "Large button" },
+    { value: "xs", description: "Extra small" },
+    { value: "sm", description: "Small" },
+    { value: "md", description: "Medium" },
+    { value: "lg", description: "Large" },
 ];
 const sizeValues = Object.keys(exports.sizeMd);
-exports.sizeNames = [...sizeValues];
 // --- Available button themes
 exports.buttonThemeValues = ["attention", "primary", "secondary"];
 exports.buttonThemeNames = [...exports.buttonThemeValues];
@@ -219,6 +219,25 @@ const TextVariantKeys = [
     "tableheading", // use a H3 with some specific defaults
     "secondary", // use a secondary text style
 ];
+const TextVariantMapping = [
+    "abbr",
+    "cite",
+    "code",
+    "del",
+    "em",
+    "ins",
+    "kbd",
+    "mark",
+    "p",
+    "pre",
+    "samp",
+    "strong",
+    "sub",
+    "sup",
+    "var",
+    "h6",
+    "span",
+];
 exports.TextVariantElement = {
     abbr: "abbr",
     cite: "cite",

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/ComponentAdapter.js

@@ -135,10 +135,6 @@ const ComponentAdapter = (0, react_1.forwardRef)(function ComponentAdapter(_a, r
     // --- Obtain the component renderer and descriptor from the component registry
     const componentRegistry = (0, ComponentRegistryContext_1.useComponentRegistry)();
     const { renderer, descriptor, isCompoundComponent } = componentRegistry.lookupComponentRenderer(safeNode.type) || {};
-    // if (safeNode.type.startsWith("Component")) {
-    //   console.log("renderer", renderer, safeNode.type);
-    //   console.log("registry", componentRegistry.getRegisteredComponentKeys().length);
-    // }
     // --- Obtain a function that can lookup an event handler, which is bound to a
     // --- particular event of this component instance
     const memoedLookupEventHandler = (0, react_1.useCallback)((eventName, actionOptions) => {
@@ -299,7 +295,10 @@ function slotRenderer({ node, extractValue, renderChild, lookupAction, layoutCon
             // --- The slot is not named
             if (!slotProps) {
                 // --- simply render the children from the parent
-                return parentRenderContext.renderChild(parentRenderContext.children, layoutContext);
+                // --- The parent does not provide a template for the slot.
+                if (parentRenderContext.children) {
+                    return parentRenderContext.renderChild(parentRenderContext.children, layoutContext);
+                }
             }
             else {
                 // --- The slot has properties; let's render the children with the slot properties

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 });