xmlui 0.9.90 → 0.9.93

package/dist/scripts/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xmlui",
-    "version": "0.9.90",
+    "version": "0.9.93",
     "sideEffects": false,
     "scripts": {
         "start-test-bed": "cd src/testing/infrastructure && xmlui start",
@@ -13,6 +13,7 @@
         "test:e2e-non-smoke": "playwright test --project non-smoke",
         "test:e2e-smoke": "playwright test --project smoke",
         "test:e2e-ui": "playwright test --ui",
+        "test:e2e-summary": "node scripts/e2e-test-summary.js",
         "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
         "prepublishOnly": "clean-package",
         "postpublish": "clean-package restore",

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

@@ -90,8 +90,11 @@ exports.AutoCompleteMd = (0, metadata_helpers_1.createMetadata)({
 });
 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, creatable: extractValue.asOptionalBoolean(node.props.creatable), label: extractValue(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), 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), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), optionRenderer: node.props.optionTemplate
-            ? (item) => {
-                return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.optionTemplate, item: item, renderChild: renderChild }));
+            ? (item, val, inTrigger) => {
+                return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.optionTemplate, item: item, context: {
+                        $selectedValue: val,
+                        $inTrigger: inTrigger,
+                    }, renderChild: renderChild }));
             }
             : undefined, children: renderChild(node.children) }));
 });

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

@@ -2,16 +2,15 @@
 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(),
     open: false,
     setOpen: (open) => { },
+    optionRenderer: (option, selectedValue, inTrigger) => null,
 });
 function useAutoComplete() {
     return (0, react_1.useContext)(exports.AutoCompleteContext);

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

@@ -19,9 +19,6 @@ const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
 const react_popover_1 = require("@radix-ui/react-popover");
 const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
 const HiddenOption_1 = require("../Select/HiddenOption");
-function defaultRenderer(item) {
-    return (0, jsx_runtime_1.jsx)("div", { children: item.label });
-}
 function isOptionsExist(options, newOptions) {
     return newOptions.some((option) => Array.from(options).some((o) => o.value === option.value || o.label === option.label));
 }
@@ -33,13 +30,12 @@ exports.defaultProps = {
     required: false,
     validationStatus: "none",
     creatable: false,
-    optionRenderer: defaultRenderer,
     updateState: constants_1.noop,
     onDidChange: constants_1.noop,
     onFocus: constants_1.noop,
     onBlur: constants_1.noop,
 };
-exports.AutoComplete = (0, react_1.forwardRef)(function AutoComplete({ id, initialValue, value, enabled = exports.defaultProps.enabled, placeholder, updateState = exports.defaultProps.updateState, validationStatus = exports.defaultProps.validationStatus, onDidChange = exports.defaultProps.onDidChange, onFocus = exports.defaultProps.onFocus, onBlur = exports.defaultProps.onBlur, registerComponentApi, optionRenderer = exports.defaultProps.optionRenderer, emptyListTemplate, style, children, readOnly = exports.defaultProps.readOnly, autoFocus = exports.defaultProps.autoFocus, dropdownHeight, multi = exports.defaultProps.multi, label, labelPosition, labelWidth, labelBreak, required = exports.defaultProps.required, creatable = exports.defaultProps.creatable, }, forwardedRef) {
+exports.AutoComplete = (0, react_1.forwardRef)(function AutoComplete({ id, initialValue, value, enabled = exports.defaultProps.enabled, placeholder, updateState = exports.defaultProps.updateState, validationStatus = exports.defaultProps.validationStatus, onDidChange = exports.defaultProps.onDidChange, onFocus = exports.defaultProps.onFocus, onBlur = exports.defaultProps.onBlur, registerComponentApi, emptyListTemplate, style, children, readOnly = exports.defaultProps.readOnly, autoFocus = exports.defaultProps.autoFocus, dropdownHeight, multi = exports.defaultProps.multi, label, labelPosition, labelWidth, labelBreak, required = exports.defaultProps.required, creatable = exports.defaultProps.creatable, optionRenderer, }, forwardedRef) {
     const [referenceElement, setReferenceElement] = (0, react_1.useState)(null);
     const inputRef = (0, react_1.useRef)(null);
     const [open, setOpen] = (0, react_1.useState)(false);
@@ -154,14 +150,14 @@ exports.AutoComplete = (0, react_1.forwardRef)(function AutoComplete({ id, initi
             multi,
             value,
             onChange: toggleOption,
-            optionRenderer,
             options,
             inputValue,
             open,
             setOpen,
+            optionRenderer,
         };
-    }, [inputValue, multi, optionRenderer, options, toggleOption, value, open, setOpen]);
-    return ((0, jsx_runtime_1.jsx)(AutoCompleteContext_1.AutoCompleteContext.Provider, { value: autoCompleteContextValue, children: (0, jsx_runtime_1.jsx)(OptionTypeProvider_1.default, { Component: HiddenOption_1.HiddenOption, children: (0, jsx_runtime_1.jsxs)(OptionContext_1.OptionContext.Provider, { value: optionContextValue, children: [(0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { id: inputId, ref: forwardedRef, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, children: (0, jsx_runtime_1.jsx)(react_popover_1.Popover, { open: open, onOpenChange: (isOpen) => {
+    }, [inputValue, multi, options, toggleOption, value, open, setOpen, optionRenderer]);
+    return ((0, jsx_runtime_1.jsx)(AutoCompleteContext_1.AutoCompleteContext.Provider, { value: autoCompleteContextValue, children: (0, jsx_runtime_1.jsx)(OptionContext_1.OptionContext.Provider, { value: optionContextValue, children: (0, jsx_runtime_1.jsxs)(OptionTypeProvider_1.default, { Component: HiddenOption_1.HiddenOption, children: [(0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { id: inputId, ref: forwardedRef, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, children: (0, jsx_runtime_1.jsx)(react_popover_1.Popover, { open: open, onOpenChange: (isOpen) => {
                                 if (readOnly)
                                     return;
                                 setOpen(isOpen);
@@ -243,11 +239,12 @@ function CreatableItem() {
     }
     return (0, jsx_runtime_1.jsx)("span", { style: { display: "none" } });
 }
-function AutoCompleteOption({ value, label, enabled = true, keywords, readOnly }) {
+function AutoCompleteOption(option) {
+    const { value, label, enabled = true, keywords, readOnly, children } = option;
     const id = (0, react_1.useId)();
-    const { value: selectedValue, onChange, optionRenderer, multi, setOpen } = (0, AutoCompleteContext_1.useAutoComplete)();
+    const { value: selectedValue, onChange, multi, setOpen, optionRenderer } = (0, AutoCompleteContext_1.useAutoComplete)();
     const selected = multi ? selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.includes(value) : selectedValue === value;
-    return ((0, jsx_runtime_1.jsxs)(cmdk_1.CommandItem, { id: id, disabled: !enabled, value: `${value}`, className: (0, classnames_1.default)(AutoComplete_module_scss_1.default.autoCompleteOption, {
+    return ((0, jsx_runtime_1.jsx)(cmdk_1.CommandItem, { id: id, disabled: !enabled, value: `${value}`, className: (0, classnames_1.default)(AutoComplete_module_scss_1.default.autoCompleteOption, {
             [AutoComplete_module_scss_1.default.disabledOption]: !enabled,
         }), onMouseDown: (e) => {
             e.preventDefault();
@@ -256,5 +253,5 @@ function AutoCompleteOption({ value, label, enabled = true, keywords, readOnly }
             if (!readOnly && enabled)
                 onChange(value);
             setOpen(false);
-        }, "data-state": enabled ? (selected ? "checked" : undefined) : "disabled", keywords: keywords, children: [optionRenderer({ label, value }), selected && (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "checkmark" })] }, id));
+        }, "data-state": enabled ? (selected ? "checked" : undefined) : "disabled", keywords: keywords, children: children ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: AutoComplete_module_scss_1.default.autoCompleteOptionContent, children: children }), selected && (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "checkmark" })] })) : optionRenderer ? (optionRenderer({ label, value, enabled }, selectedValue, false)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: AutoComplete_module_scss_1.default.autoCompleteOptionContent, children: label }), selected && (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "checkmark" })] })) }, id));
 }

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

@@ -12,7 +12,7 @@ exports.BookmarkMd = (0, metadata_helpers_1.createMetadata)({
         "component has an \`id\` that you can use in links to navigate (scroll to) the bookmark's location.",
     opaque: true,
     props: {
-        uid: {
+        id: {
             description: "The unique identifier of the bookmark. You can use this identifier in links " +
                 "to navigate to this component's location. If this identifier is not set, you cannot " +
                 "programmatically visit this bookmark.",

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

@@ -15,7 +15,7 @@ const Button_1 = require("./Button/Button");
 const HelloWorld_1 = require("./HelloWorld/HelloWorld");
 const Heading_1 = require("./Heading/Heading");
 const Text_1 = require("./Text/Text");
-const Fragment_1 = require("../components-core/Fragment");
+const Fragment_1 = require("./Fragment/Fragment");
 const Table_1 = require("./Table/Table");
 const StickyBox_1 = require("./StickyBox/StickyBox");
 const Badge_1 = require("./Badge/Badge");
@@ -53,7 +53,7 @@ const Footer_1 = require("./Footer/Footer");
 const NavGroup_1 = require("./NavGroup/NavGroup");
 const Logo_1 = require("./Logo/Logo");
 const RadioGroup_1 = require("./RadioGroup/RadioGroup");
-const Slot_1 = require("../components-core/Slot");
+const Slot_1 = require("./Slot/Slot");
 const FileInput_1 = require("./FileInput/FileInput");
 const Spinner_1 = require("./Spinner/Spinner");
 const Markdown_1 = require("./Markdown/Markdown");

package/dist/scripts/src/{components-core → components/Fragment}/Fragment.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.fragmentComponentRenderer = exports.FragmentMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const renderers_1 = require("./renderers");
-const metadata_helpers_1 = require("../components/metadata-helpers");
+const renderers_1 = require("../../components-core/renderers");
+const metadata_helpers_1 = require("../metadata-helpers");
 const COMP = "Fragment";
 exports.FragmentMd = (0, metadata_helpers_1.createMetadata)({
     status: "stable",

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

@@ -17,26 +17,26 @@ exports.OptionMd = (0, metadata_helpers_1.createMetadata)({
     props: {
         label: (0, metadata_helpers_1.d)(`This property defines the text to display for the option. If \`label\` is not defined, ` +
             `\`Option\` will use the \`value\` as the label.`),
-        value: (0, metadata_helpers_1.d)("This property defines the value of the option. If \`value\` is not defined, " +
-            "\`Option\` will use the \`label\` as the value. If neither is defined, " +
+        value: (0, metadata_helpers_1.d)("This property defines the value of the option. If `value` is not defined, " +
+            "`Option` will use the `label` as the value. If neither is defined, " +
             "the option is not displayed."),
         enabled: {
             description: "This boolean property indicates whether the option is enabled or disabled.",
             valueType: "boolean",
             defaultValue: OptionNative_1.defaultProps.enabled,
         },
-        optionTemplate: (0, metadata_helpers_1.d)("This property is used to define a custom option template"),
     },
-    childrenAsTemplate: "optionTemplate",
 });
 exports.optionComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.OptionMd, ({ node, extractValue, layoutCss, renderChild, layoutContext }) => {
-    const optionTemplate = node.props.optionTemplate;
-    const label = extractValue.asOptionalString(node.props.label) || extractValue(node.props.value);
-    const value = extractValue.asOptionalString(node.props.value) || extractValue(node.props.label);
-    if (label === undefined) {
+    var _a, _b;
+    const label = extractValue.asOptionalString(node.props.label);
+    const value = extractValue.asOptionalString(node.props.value);
+    if (label === undefined && value === undefined) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(OptionNative_1.OptionNative, { optionRenderer: optionTemplate
-            ? (contextVars) => ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: optionTemplate, renderChild: renderChild, contextVars: contextVars, layoutContext: layoutContext }))
-            : undefined, label: label, value: value, enabled: extractValue.asOptionalBoolean(node.props.enabled), style: layoutCss }));
+    const hasTextNodeChild = ((_a = node.children) === null || _a === void 0 ? void 0 : _a.length) === 1 && (node.children[0].type === "TextNode" || node.children[0].type === "TextNodeCData");
+    const textNodeChild = hasTextNodeChild ? renderChild(node.children) : undefined;
+    return ((0, jsx_runtime_1.jsx)(OptionNative_1.OptionNative, { label: label || textNodeChild, value: value || label, enabled: extractValue.asOptionalBoolean(node.props.enabled), style: layoutCss, optionRenderer: ((_b = node.children) === null || _b === void 0 ? void 0 : _b.length) > 0
+            ? !hasTextNodeChild ? (contextVars) => ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.children, renderChild: renderChild, contextVars: contextVars, layoutContext: layoutContext })) : undefined
+            : undefined, children: !hasTextNodeChild && renderChild(node.children) }));
 });

package/dist/scripts/src/components/Select/HiddenOption.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const OptionContext_1 = require("./OptionContext");
 const react_1 = require("react");
 function HiddenOption(option) {
-    const { optionRenderer, label } = option;
+    const { label } = option;
     const { onOptionRemove, onOptionAdd } = (0, OptionContext_1.useOption)();
     const [node, setNode] = (0, react_1.useState)(null);
     const opt = (0, react_1.useMemo)(() => {
@@ -16,5 +16,5 @@ function HiddenOption(option) {
         onOptionAdd(opt);
         return () => onOptionRemove(opt);
     }, [opt, onOptionAdd, onOptionRemove]);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: (el) => setNode(el), style: { display: "none" }, children: optionRenderer === null || optionRenderer === void 0 ? void 0 : optionRenderer({}) }));
+    return ((0, jsx_runtime_1.jsx)("div", { ref: (el) => setNode(el), style: { display: "none" }, children: option.children }));
 }

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

@@ -111,9 +111,11 @@ exports.SelectMd = (0, metadata_helpers_1.createMetadata)({
 exports.selectComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.SelectMd, ({ node, state, updateState, extractValue, renderChild, lookupEventHandler, layoutCss, registerComponentApi, }) => {
     const multiSelect = extractValue.asOptionalBoolean(node.props.multiSelect);
     const searchable = extractValue.asOptionalBoolean(node.props.searchable);
-    return ((0, jsx_runtime_1.jsx)(SelectNative_1.Select, { multiSelect: multiSelect, style: layoutCss, inProgress: extractValue.asOptionalBoolean(node.props.inProgress), inProgressNotificationMessage: extractValue.asOptionalString(node.props.inProgressNotificationMessage), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), updateState: updateState, searchable: searchable, 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), 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), optionLabelRenderer: node.props.optionLabelTemplate
-            ? (item) => {
-                return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.optionLabelTemplate, item: item, renderChild: renderChild }));
+    return ((0, jsx_runtime_1.jsx)(SelectNative_1.Select, { multiSelect: multiSelect, style: layoutCss, inProgress: extractValue.asOptionalBoolean(node.props.inProgress), inProgressNotificationMessage: extractValue.asOptionalString(node.props.inProgressNotificationMessage), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), updateState: updateState, searchable: searchable, 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), 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), valueRenderer: node.props.valueTemplate
+            ? (item, removeItem) => {
+                return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { contextVars: {
+                        $itemContext: { removeItem },
+                    }, node: node.props.valueTemplate, item: item, renderChild: renderChild }));
             }
             : undefined, optionRenderer: node.props.optionTemplate
             ? (item, val, inTrigger) => {
@@ -122,11 +124,5 @@ exports.selectComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP,
                         $inTrigger: inTrigger,
                     }, renderChild: (...args) => multiSelect || searchable ? (renderChild(...args)) : ((0, jsx_runtime_1.jsx)(react_select_1.SelectItemText, { children: renderChild(...args) })) }));
             }
-            : undefined, valueRenderer: node.props.valueTemplate
-            ? (item, removeItem) => {
-                return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { contextVars: {
-                        $itemContext: { removeItem },
-                    }, node: node.props.valueTemplate, item: item, renderChild: renderChild }));
-            }
             : undefined, children: renderChild(node.children) }));
 });

package/dist/scripts/src/components/Select/SelectNative.js

@@ -71,32 +71,60 @@ exports.defaultProps = {
 };
 const SimpleSelect = (0, react_1.forwardRef)(function SimpleSelect(props, forwardedRef) {
     const { root } = (0, ThemeContext_1.useTheme)();
-    const { enabled, onBlur, autoFocus, onValueChange, validationStatus, value, height, style, placeholder, id, triggerRef, onFocus, options, children, readOnly, } = props;
+    const { enabled, onBlur, autoFocus, onValueChange, validationStatus, value, height, style, placeholder, id, triggerRef, onFocus, width, children, readOnly, emptyListNode, } = props;
+    // Compose refs for proper forwarding
     const ref = forwardedRef ? (0, react_compose_refs_1.composeRefs)(triggerRef, forwardedRef) : triggerRef;
+    const { options } = (0, SelectContext_1.useSelect)();
+    // Convert value to string for Radix UI compatibility
     const stringValue = (0, react_1.useMemo)(() => {
-        return value != undefined ? value + "" : undefined;
+        return value != undefined ? String(value) : undefined;
     }, [value]);
-    const selectedOption = (0, react_1.useMemo)(() => {
-        return Array.from(options).find((o) => `${o.value}` === stringValue);
-    }, [options, stringValue]);
-    const onValChange = (0, react_1.useCallback)((val) => {
-        var _a;
-        if (readOnly) {
+    // Handle value changes with proper type conversion
+    const handleValueChange = (0, react_1.useCallback)((val) => {
+        if (readOnly)
             return;
-        }
-        const match = Array.from(options).find((o) => `${o.value}` === val);
-        onValueChange((_a = match === null || match === void 0 ? void 0 : match.value) !== null && _a !== void 0 ? _a : val);
-    }, [onValueChange, options, readOnly]);
-    return ((0, jsx_runtime_1.jsxs)(react_select_1.Root, { value: stringValue, onValueChange: onValChange, children: [(0, jsx_runtime_1.jsxs)(react_select_1.Trigger, { id: id, "aria-haspopup": "listbox", style: style, onFocus: onFocus, onBlur: onBlur, disabled: !enabled, className: (0, classnames_1.default)(Select_module_scss_1.default.selectTrigger, {
+        onValueChange(val);
+    }, [onValueChange, readOnly]);
+    // Generate trigger class names based on validation status
+    const triggerClassName = (0, classnames_1.default)(Select_module_scss_1.default.selectTrigger, {
+        [Select_module_scss_1.default.error]: validationStatus === "error",
+        [Select_module_scss_1.default.warning]: validationStatus === "warning",
+        [Select_module_scss_1.default.valid]: validationStatus === "valid",
+    });
+    const optionsArray = (0, react_1.useMemo)(() => Array.from(options), [options]);
+    const selectedOption = (0, react_1.useMemo)(() => {
+        return optionsArray.find((option) => String(option.value) === String(value));
+    }, [optionsArray, value]);
+    return ((0, jsx_runtime_1.jsxs)(react_select_1.Root, { value: stringValue, onValueChange: handleValueChange, children: [(0, jsx_runtime_1.jsxs)(react_select_1.Trigger, { id: id, "aria-haspopup": "listbox", style: style, onFocus: onFocus, onBlur: onBlur, disabled: !enabled, className: (0, classnames_1.default)(Select_module_scss_1.default.selectTrigger, {
                     [Select_module_scss_1.default.error]: validationStatus === "error",
                     [Select_module_scss_1.default.warning]: validationStatus === "warning",
                     [Select_module_scss_1.default.valid]: validationStatus === "valid",
-                }), ref: ref, autoFocus: autoFocus, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(Select_module_scss_1.default.selectValue, {
-                            [Select_module_scss_1.default.selectValue]: selectedOption !== undefined,
-                            [Select_module_scss_1.default.placeholder]: selectedOption === undefined,
-                        }), children: selectedOption ? selectedOption.label : readOnly ? "" : placeholder }), (0, jsx_runtime_1.jsx)(react_select_1.Icon, { asChild: true, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" }) })] }), (0, jsx_runtime_1.jsx)(react_select_1.Portal, { container: root, children: (0, jsx_runtime_1.jsxs)(react_select_1.Content, { className: Select_module_scss_1.default.selectContent, position: "popper", style: { height: height }, children: [(0, jsx_runtime_1.jsx)(react_select_1.ScrollUpButton, { className: Select_module_scss_1.default.selectScrollUpButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevronup" }) }), (0, jsx_runtime_1.jsx)(react_select_1.SelectViewport, { className: Select_module_scss_1.default.selectViewport, role: "listbox", children: children }), (0, jsx_runtime_1.jsx)(react_select_1.ScrollDownButton, { className: Select_module_scss_1.default.selectScrollDownButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" }) })] }) })] }));
+                }), onClick: (event) => {
+                    // Prevent event propagation to parent elements (e.g., DropdownMenu)
+                    // This ensures that clicking the Select trigger doesn't close the containing DropdownMenu
+                    event.stopPropagation();
+                }, ref: ref, autoFocus: autoFocus, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(Select_module_scss_1.default.selectValue, {
+                            [Select_module_scss_1.default.selectValue]: value !== undefined,
+                            [Select_module_scss_1.default.placeholder]: value === undefined,
+                        }), children: selectedOption ? selectedOption.label : readOnly ? "" : placeholder }), (0, jsx_runtime_1.jsx)(react_select_1.Icon, { asChild: true, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" }) })] }), (0, jsx_runtime_1.jsx)(react_select_1.Portal, { container: root, children: (0, jsx_runtime_1.jsxs)(react_select_1.Content, { className: Select_module_scss_1.default.selectContent, position: "popper", style: { maxHeight: height, minWidth: width }, children: [(0, jsx_runtime_1.jsx)(react_select_1.ScrollUpButton, { className: Select_module_scss_1.default.selectScrollUpButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevronup" }) }), (0, jsx_runtime_1.jsxs)(react_select_1.SelectViewport, { className: Select_module_scss_1.default.selectViewport, role: "listbox", children: [children, optionsArray.length === 0 && emptyListNode] }), (0, jsx_runtime_1.jsx)(react_select_1.ScrollDownButton, { className: Select_module_scss_1.default.selectScrollDownButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" }) })] }) })] }));
 });
-exports.Select = (0, react_1.forwardRef)(function Select({ id, initialValue, value, enabled = exports.defaultProps.enabled, placeholder = exports.defaultProps.placeholder, updateState = constants_1.noop, validationStatus = exports.defaultProps.validationStatus, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, emptyListTemplate, optionLabelRenderer, optionRenderer, valueRenderer, style, dropdownHeight, children, autoFocus = exports.defaultProps.autoFocus, searchable = exports.defaultProps.searchable, multiSelect = exports.defaultProps.multiSelect, label, labelPosition, labelWidth, labelBreak = exports.defaultProps.labelBreak, required = exports.defaultProps.required, inProgress = exports.defaultProps.inProgress, inProgressNotificationMessage = exports.defaultProps.inProgressNotificationMessage, readOnly = false, }, ref) {
+exports.Select = (0, react_1.forwardRef)(function Select({ 
+// Basic props
+id, initialValue, value, enabled = exports.defaultProps.enabled, placeholder = exports.defaultProps.placeholder, autoFocus = exports.defaultProps.autoFocus, readOnly = false, required = exports.defaultProps.required, 
+// Styling
+style, dropdownHeight, 
+// Validation
+validationStatus = exports.defaultProps.validationStatus, 
+// Event handlers
+onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, 
+// Multi-select and search
+searchable = exports.defaultProps.searchable, multiSelect = exports.defaultProps.multiSelect, emptyListTemplate, valueRenderer, optionRenderer, 
+// Progress state
+inProgress = exports.defaultProps.inProgress, inProgressNotificationMessage = exports.defaultProps.inProgressNotificationMessage, 
+// Label configuration
+label, labelPosition, labelWidth, labelBreak = exports.defaultProps.labelBreak, 
+// Internal
+updateState = constants_1.noop, registerComponentApi, children, }, ref) {
     var _a;
     const [referenceElement, setReferenceElement] = (0, react_1.useState)(null);
     const [open, setOpen] = (0, react_1.useState)(false);
@@ -131,11 +159,11 @@ exports.Select = (0, react_1.forwardRef)(function Select({ id, initialValue, val
     const toggleOption = (0, react_1.useCallback)((selectedValue) => {
         const newSelectedValue = multiSelect
             ? Array.isArray(value)
-                ? value.includes(selectedValue)
-                    ? value.filter((v) => v !== selectedValue)
+                ? value.map((v) => String(v)).includes(String(selectedValue))
+                    ? value.filter((v) => String(v) !== String(selectedValue))
                     : [...value, selectedValue]
                 : [selectedValue]
-            : selectedValue === value
+            : String(selectedValue) === String(value)
                 ? null
                 : selectedValue;
         updateState({ value: newSelectedValue });
@@ -192,12 +220,17 @@ exports.Select = (0, react_1.forwardRef)(function Select({ id, initialValue, val
     const selectContextValue = (0, react_1.useMemo)(() => ({
         multiSelect,
         value,
-        optionLabelRenderer,
-        optionRenderer,
         onChange: toggleOption,
         setOpen,
-    }), [multiSelect, toggleOption, value, optionLabelRenderer, optionRenderer]);
-    return ((0, jsx_runtime_1.jsx)(SelectContext_1.SelectContext.Provider, { value: selectContextValue, children: (0, jsx_runtime_1.jsx)(OptionContext_1.OptionContext.Provider, { value: optionContextValue, children: (0, jsx_runtime_1.jsxs)(OptionTypeProvider_1.default, { Component: HiddenOption_1.HiddenOption, children: [(0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { ref: ref, id: inputId, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, children: searchable || multiSelect ? ((0, jsx_runtime_1.jsxs)(react_popover_1.Popover, { open: open, onOpenChange: setOpen, modal: false, children: [(0, jsx_runtime_1.jsxs)(react_popover_1.PopoverTrigger, { id: inputId, "aria-haspopup": "listbox", style: style, ref: setReferenceElement, onFocus: onFocus, onBlur: onBlur, disabled: !enabled, "aria-expanded": open, onClick: () => setOpen((prev) => !prev), className: (0, classnames_1.default)(Select_module_scss_1.default.selectTrigger, Select_module_scss_1.default[validationStatus], {
+        options,
+        optionRenderer,
+    }), [multiSelect, toggleOption, value, options]);
+    return ((0, jsx_runtime_1.jsx)(SelectContext_1.SelectContext.Provider, { value: selectContextValue, children: (0, jsx_runtime_1.jsx)(OptionContext_1.OptionContext.Provider, { value: optionContextValue, children: (0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { ref: ref, id: inputId, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, children: searchable || multiSelect ? ((0, jsx_runtime_1.jsxs)(OptionTypeProvider_1.default, { Component: HiddenOption_1.HiddenOption, children: [(0, jsx_runtime_1.jsxs)(react_popover_1.Popover, { open: open, onOpenChange: setOpen, modal: false, children: [(0, jsx_runtime_1.jsxs)(react_popover_1.PopoverTrigger, { id: inputId, "aria-haspopup": "listbox", style: style, ref: setReferenceElement, onFocus: onFocus, onBlur: onBlur, disabled: !enabled, "aria-expanded": open, onClick: (event) => {
+                                        // Prevent event propagation to parent elements (e.g., DropdownMenu)
+                                        // This ensures that clicking the Select trigger doesn't close the containing DropdownMenu
+                                        event.stopPropagation();
+                                        setOpen((prev) => !prev);
+                                    }, className: (0, classnames_1.default)(Select_module_scss_1.default.selectTrigger, Select_module_scss_1.default[validationStatus], {
                                         [Select_module_scss_1.default.disabled]: !enabled,
                                         [Select_module_scss_1.default.multi]: multiSelect,
                                     }), autoFocus: autoFocus, children: [multiSelect ? (Array.isArray(value) && value.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.badgeListContainer, children: (0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.badgeList, children: value.map((v) => {
@@ -211,7 +244,7 @@ exports.Select = (0, react_1.forwardRef)(function Select({ id, initialValue, val
                                                 }) }) })) : ((0, jsx_runtime_1.jsx)("span", { placeholder: placeholder, className: Select_module_scss_1.default.placeholder, children: placeholder }))) : value !== undefined && value !== null ? ((0, jsx_runtime_1.jsx)("div", { children: (_a = Array.from(options).find((o) => o.value === value)) === null || _a === void 0 ? void 0 : _a.label })) : ((0, jsx_runtime_1.jsx)("span", { "aria-placeholder": placeholder, className: Select_module_scss_1.default.placeholder, children: placeholder || "" })), (0, jsx_runtime_1.jsxs)("div", { className: Select_module_scss_1.default.actions, children: [multiSelect && Array.isArray(value) && value.length > 0 && ((0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "close", onClick: (event) => {
                                                         event.stopPropagation();
                                                         clearValue();
-                                                    } })), (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" })] })] }), open && ((0, jsx_runtime_1.jsx)(react_select_1.Portal, { container: root, children: (0, jsx_runtime_1.jsx)(react_focus_scope_1.FocusScope, { asChild: true, loop: true, trapped: true, children: (0, jsx_runtime_1.jsx)(react_popover_1.PopoverContent, { style: { width, height: dropdownHeight }, className: Select_module_scss_1.default.selectContent, children: (0, jsx_runtime_1.jsxs)(cmdk_1.Command, { className: Select_module_scss_1.default.command, shouldFilter: searchable, filter: (_, search, keywords) => {
+                                                    } })), (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" })] })] }), open && ((0, jsx_runtime_1.jsx)(react_popover_1.Portal, { container: root, children: (0, jsx_runtime_1.jsx)(react_focus_scope_1.FocusScope, { asChild: true, loop: true, trapped: true, children: (0, jsx_runtime_1.jsx)(react_popover_1.PopoverContent, { style: { minWidth: width, height: dropdownHeight }, className: Select_module_scss_1.default.selectContent, children: (0, jsx_runtime_1.jsxs)(cmdk_1.Command, { className: Select_module_scss_1.default.command, shouldFilter: searchable, filter: (_, search, keywords) => {
                                                     const lowSearch = search.toLowerCase();
                                                     for (const kw of keywords) {
                                                         if (kw.toLowerCase().includes(lowSearch))
@@ -220,16 +253,16 @@ exports.Select = (0, react_1.forwardRef)(function Select({ id, initialValue, val
                                                     return 0;
                                                 }, children: [searchable ? ((0, jsx_runtime_1.jsxs)("div", { className: Select_module_scss_1.default.commandInputContainer, children: [(0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "search" }), (0, jsx_runtime_1.jsx)(cmdk_1.CommandInput, { className: (0, classnames_1.default)(Select_module_scss_1.default.commandInput), placeholder: "Search..." })] })) : (
                                                     // https://github.com/pacocoursey/cmdk/issues/322#issuecomment-2444703817
-                                                    (0, jsx_runtime_1.jsx)("button", { autoFocus: true, "aria-hidden": "true", className: Select_module_scss_1.default.srOnly })), (0, jsx_runtime_1.jsxs)(cmdk_1.CommandList, { className: Select_module_scss_1.default.commandList, children: [inProgress && ((0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.loading, children: inProgressNotificationMessage })), Array.from(options).map(({ value, label, enabled, keywords }) => ((0, jsx_runtime_1.jsx)(exports.ComboboxOption, { readOnly: readOnly, value: value, label: label, enabled: enabled, keywords: keywords }, value))), !inProgress && (0, jsx_runtime_1.jsx)(cmdk_1.CommandEmpty, { children: emptyListNode })] })] }) }) }) }))] })) : ((0, jsx_runtime_1.jsx)(SimpleSelect, { readOnly: !!readOnly, ref: ref, value: value, options: options, onValueChange: toggleOption, id: inputId, style: style, onFocus: onFocus, onBlur: onBlur, enabled: enabled, validationStatus: validationStatus, triggerRef: setReferenceElement, autoFocus: autoFocus, placeholder: placeholder, height: dropdownHeight, children: renderOptionsOrDefault(options, emptyListNode) }, isInForm ? (value ? `status-${value}` : "status-initial") : undefined)) }), children] }) }) }));
+                                                    (0, jsx_runtime_1.jsx)("button", { autoFocus: true, "aria-hidden": "true", className: Select_module_scss_1.default.srOnly })), (0, jsx_runtime_1.jsxs)(cmdk_1.CommandList, { className: Select_module_scss_1.default.commandList, children: [inProgress && ((0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.loading, children: inProgressNotificationMessage })), Array.from(options).map(({ value, label, enabled, keywords }) => ((0, jsx_runtime_1.jsx)(exports.ComboboxOption, { readOnly: readOnly, value: value, label: label, enabled: enabled, keywords: keywords }, value))), !inProgress && (0, jsx_runtime_1.jsx)(cmdk_1.CommandEmpty, { children: emptyListNode })] })] }) }) }) }))] }), children] })) : ((0, jsx_runtime_1.jsx)(OptionTypeProvider_1.default, { Component: SelectOption, children: (0, jsx_runtime_1.jsx)(SimpleSelect, { readOnly: !!readOnly, ref: ref, value: value, onValueChange: toggleOption, id: inputId, style: style, onFocus: onFocus, onBlur: onBlur, enabled: enabled, validationStatus: validationStatus, triggerRef: setReferenceElement, autoFocus: autoFocus, placeholder: placeholder, height: dropdownHeight, width: width, emptyListNode: emptyListNode, children: children }, isInForm ? (value ? `status-${value}` : "status-initial") : undefined) })) }) }) }));
 });
 exports.ComboboxOption = (0, react_1.forwardRef)(function Combobox(option, forwardedRef) {
     const id = (0, react_1.useId)();
-    const { label, value, enabled = true, keywords, readOnly } = option;
-    const { value: selectedValue, onChange, multiSelect, optionLabelRenderer, optionRenderer, setOpen, } = (0, SelectContext_1.useSelect)();
+    const { label, value, enabled = true, keywords, readOnly, children } = option;
+    const { value: selectedValue, onChange, multiSelect, setOpen, optionRenderer } = (0, SelectContext_1.useSelect)();
     const selected = (0, react_1.useMemo)(() => {
         return Array.isArray(selectedValue) && multiSelect
-            ? selectedValue.includes(value)
-            : selectedValue === value;
+            ? selectedValue.map((v) => String(v)).includes(value)
+            : String(selectedValue) === String(value);
     }, [selectedValue, value, multiSelect]);
     return ((0, jsx_runtime_1.jsx)(cmdk_1.CommandItem, { id: id, ref: forwardedRef, disabled: !enabled, value: value, className: Select_module_scss_1.default.multiComboboxOption, onSelect: () => {
             if (readOnly) {
@@ -237,21 +270,38 @@ exports.ComboboxOption = (0, react_1.forwardRef)(function Combobox(option, forwa
                 return;
             }
             onChange(value);
-        }, "data-state": selected ? "checked" : undefined, keywords: [...keywords, label], children: (0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.multiComboboxOptionContent, children: optionRenderer ? (optionRenderer({ label, value, enabled, keywords }, selectedValue, false)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [optionLabelRenderer ? optionLabelRenderer({ label, value }) : label, selected && (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "checkmark" })] })) }) }, id));
+        }, onClick: (event) => {
+            event.stopPropagation();
+        }, "data-state": selected ? "checked" : undefined, keywords: [...keywords, label], children: (0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.multiComboboxOptionContent, children: optionRenderer ? (optionRenderer({ label, value, enabled, keywords }, selectedValue, false)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [children || label, selected && (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "checkmark" })] })) }) }, id));
 });
 const SelectOption = react_1.default.forwardRef((option, ref) => {
-    const { value, label, enabled = true } = option;
-    const { optionLabelRenderer, optionRenderer, value: selectedValue } = (0, SelectContext_1.useSelect)();
-    return ((0, jsx_runtime_1.jsx)(react_select_1.Item, { ref: ref, className: Select_module_scss_1.default.selectItem, value: value + "", disabled: !enabled, "data-state": selectedValue === value && "checked", children: (0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.selectItemContent, children: optionRenderer ? (optionRenderer({
-                label,
-                value,
-                enabled,
-            }, selectedValue, false)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_select_1.ItemText, { className: Select_module_scss_1.default.selectItemContent, children: optionLabelRenderer ? optionLabelRenderer({ value, label }) : label }), selectedValue === value && ((0, jsx_runtime_1.jsx)("span", { className: Select_module_scss_1.default.selectItemIndicator, children: (0, jsx_runtime_1.jsx)(react_select_1.ItemIndicator, { children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "checkmark" }) }) }))] })) }) }));
+    var _a;
+    const visibleContentRef = (0, react_1.useRef)(null);
+    const { value, label, enabled = true, children } = option;
+    const { value: selectedValue, optionRenderer } = (0, SelectContext_1.useSelect)();
+    const { onOptionRemove, onOptionAdd } = (0, OptionContext_1.useOption)();
+    const opt = (0, react_1.useMemo)(() => {
+        var _a, _b, _c, _d;
+        return Object.assign(Object.assign({}, option), { label: (_b = label !== null && label !== void 0 ? label : (_a = visibleContentRef.current) === null || _a === void 0 ? void 0 : _a.textContent) !== null && _b !== void 0 ? _b : "", keywords: [(_d = label !== null && label !== void 0 ? label : (_c = visibleContentRef.current) === null || _c === void 0 ? void 0 : _c.textContent) !== null && _d !== void 0 ? _d : ""] });
+    }, [option, label, visibleContentRef.current]);
+    (0, react_1.useEffect)(() => {
+        onOptionAdd(opt);
+        return () => onOptionRemove(opt);
+    }, [opt, onOptionAdd, onOptionRemove]);
+    return ((0, jsx_runtime_1.jsxs)(react_select_1.Item, { ref: ref, className: Select_module_scss_1.default.selectItem, value: value + "", textValue: label || ((_a = visibleContentRef.current) === null || _a === void 0 ? void 0 : _a.textContent), disabled: !enabled, onClick: (event) => {
+            event.stopPropagation();
+        }, onMouseEnter: (event) => {
+            // Ensure hover state is applied even in DropdownMenu context
+            const target = event.currentTarget;
+            target.setAttribute("data-highlighted", "");
+        }, onMouseLeave: (event) => {
+            // Remove hover state when mouse leaves
+            const target = event.currentTarget;
+            target.removeAttribute("data-highlighted");
+        }, "data-state": selectedValue === value && "checked", children: [(0, jsx_runtime_1.jsx)("span", { style: { display: "none" }, children: (0, jsx_runtime_1.jsx)(react_select_1.ItemText, { children: label }) }), children ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.selectItemContent, ref: visibleContentRef, children: children }), selectedValue === value && ((0, jsx_runtime_1.jsx)(react_select_1.ItemIndicator, { className: Select_module_scss_1.default.selectItemIndicator, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "checkmark" }) }))] })) : optionRenderer ? ((0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.selectItemContent, ref: visibleContentRef, children: optionRenderer({
+                    label,
+                    value,
+                    enabled,
+                }, selectedValue, false) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.selectItemContent, ref: visibleContentRef, children: label }), selectedValue === value && ((0, jsx_runtime_1.jsx)(react_select_1.ItemIndicator, { className: Select_module_scss_1.default.selectItemIndicator, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "checkmark" }) }))] }))] }));
 });
 SelectOption.displayName = "SelectOption";
-function renderOptionsOrDefault(options, default_) {
-    if (options.size === 0) {
-        return default_;
-    }
-    return Array.from(options).map((option) => ((0, jsx_runtime_1.jsx)(SelectOption, { value: option.value, label: option.label, enabled: option.enabled }, option.value)));
-}

package/dist/scripts/src/{components-core → components/Slot}/Slot.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SlotHolder = exports.SlotMd = void 0;
-const metadata_helpers_1 = require("../components/metadata-helpers");
-const renderers_1 = require("./renderers");
+const metadata_helpers_1 = require("../metadata-helpers");
+const renderers_1 = require("../../components-core/renderers");
 const COMP = "Slot";
 exports.SlotMd = (0, metadata_helpers_1.createMetadata)({
     status: "experimental",

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

@@ -29,3 +29,4 @@ exports.SlotItem = (0, react_1.memo)(({ node, renderChild, layoutContext, slotPr
     // --- Render the slot content
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: renderChild(nodeWithItem, layoutContext) });
 });
+exports.SlotItem.displayName = "SlotItem";

package/dist/scripts/src/components/Spinner/SpinnerNative.js

@@ -9,7 +9,7 @@ const react_1 = require("react");
 const Spinner_module_scss_1 = __importDefault(require("./Spinner.module.scss"));
 exports.defaultProps = {
     delay: 400,
-    fullScreen: false
+    fullScreen: false,
 };
 // source https://loading.io/css/
 exports.Spinner = (0, react_1.forwardRef)(function Spinner({ delay = exports.defaultProps.delay, fullScreen = exports.defaultProps.fullScreen, style }, forwardedRef) {
@@ -22,14 +22,13 @@ exports.Spinner = (0, react_1.forwardRef)(function Spinner({ delay = exports.def
             clearTimeout(timeout);
         };
     }, [delay]);
-    const spinner = ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: Spinner_module_scss_1.default["lds-ring"], style: style, ref: forwardedRef, children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {})] }) }));
     if (!pastDelay) {
         return null;
     }
     else {
         if (fullScreen) {
-            return (0, jsx_runtime_1.jsx)("div", { className: Spinner_module_scss_1.default.fullScreenSpinnerWrapper, children: spinner });
+            return ((0, jsx_runtime_1.jsx)("div", { role: "status", "aria-label": "Loading", className: Spinner_module_scss_1.default.fullScreenSpinnerWrapper, children: (0, jsx_runtime_1.jsxs)("div", { className: Spinner_module_scss_1.default["lds-ring"], style: style, ref: forwardedRef, children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {})] }) }));
         }
-        return spinner;
+        return ((0, jsx_runtime_1.jsxs)("div", { className: Spinner_module_scss_1.default["lds-ring"], role: "status", "aria-label": "Loading", style: style, ref: forwardedRef, children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {})] }));
     }
 });

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

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const renderers_1 = require("../../components-core/renderers");
 const TabItemNative_1 = require("./TabItemNative");
 const metadata_helpers_1 = require("../metadata-helpers");
+const container_helpers_1 = require("../container-helpers");
 const COMP = "TabItem";
 exports.TabItemMd = (0, metadata_helpers_1.createMetadata)({
     status: "stable",
@@ -15,9 +16,19 @@ 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."),
+    },
+    contextVars: {
+        $item: (0, metadata_helpers_1.d)("This context value represents an item when you define a tab item template."),
     },
 });
 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), children: renderChild(node.children) }));
+    return ((0, jsx_runtime_1.jsx)(TabItemNative_1.TabItemComponent, { label: extractValue(node.props.label), labelRenderer: node.props.labelTemplate
+            ? (item) => {
+                return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.labelTemplate, item: item, context: {
+                        $item: item,
+                    }, renderChild: renderChild }));
+            }
+            : undefined, children: renderChild(node.children) }));
 });

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

@@ -8,16 +8,17 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 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("../Tabs/TabContext");
-exports.TabItemComponent = (0, react_1.forwardRef)(function TabItemComponent({ children, label, style }, forwardedRef) {
+const TabContext_1 = require("./TabContext");
+exports.TabItemComponent = (0, react_1.forwardRef)(function TabItemComponent({ children, label, labelRenderer, style }, forwardedRef) {
     const id = (0, react_1.useId)();
     const { register, unRegister, activeTabId } = (0, TabContext_1.useTabContext)();
     (0, react_1.useEffect)(() => {
         register({
             label,
+            labelRenderer,
             id,
         });
-    }, [id, label, register]);
+    }, [id, label, labelRenderer, register]);
     (0, react_1.useEffect)(() => {
         return () => {
             unRegister(id);

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

@@ -53,7 +53,7 @@ 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)
+    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 }))
             : 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) }));
 });