xmlui 0.10.23 → 0.10.25

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

@@ -38,10 +38,10 @@ fixtures_1.test.describe("Basic Functionality", () => {
       </FormItem>
     </Form>`);
         const driver = yield createSelectDriver("mySelect");
-        yield (0, fixtures_1.expect)(driver.component.locator("select")).toHaveValue("opt1");
+        yield (0, fixtures_1.expect)(driver.component).toHaveText("first");
         yield driver.toggleOptionsVisibility();
         yield driver.selectLabel("second");
-        yield (0, fixtures_1.expect)(driver.component.locator("select")).toHaveValue("opt2");
+        yield (0, fixtures_1.expect)(driver.component).toHaveText("second");
     }));
     // --- initialValue prop
     (0, fixtures_1.test)("initialValue set to first valid value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
@@ -133,12 +133,10 @@ fixtures_1.test.describe("Basic Functionality", () => {
     </Select>
     `);
         const driver = yield createSelectDriver();
-        yield (0, fixtures_1.expect)(page.getByText("Two")).not.toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("One")).toBeVisible();
+        yield (0, fixtures_1.expect)(driver.component).toHaveText("One");
         yield driver.toggleOptionsVisibility();
         yield driver.selectLabel("Two");
-        yield (0, fixtures_1.expect)(page.getByText("Two")).not.toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("One")).toBeVisible();
+        yield (0, fixtures_1.expect)(driver.component).toHaveText("One");
         // verify dropdown is not visible but value is shown
     }));
     (0, fixtures_1.test)("readOnly multi-Select shows options, but value cannot be changed", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, createSelectDriver, }) {
@@ -622,3 +620,52 @@ fixtures_1.test.describe("Visual State", () => {
         (0, fixtures_1.expect)(width).toBe(200);
     }));
 });
+// =============================================================================
+// Z-INDEX AND MODAL LAYERING TESTS
+// =============================================================================
+fixtures_1.test.describe("Z-Index and Modal Layering", () => {
+    (0, fixtures_1.test)("Select dropdown in modal is visible and not covered by modal overlay", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver, }) {
+        yield initTestBed(`
+      <Fragment>
+        <Select testId="select">
+          <Option value="stuff1">option 1</Option>
+          <Option value="stuff2">option 2</Option>
+          <Button onClick="modal.open()">BLOW UP</Button>
+        </Select>
+        <ModalDialog id="modal" title="Example Dialog">
+          <Form data="{{ firstName: 'Billy', lastName: 'Bob' }}">
+            <FormItem bindTo="firstName" required="true" />
+            <FormItem bindTo="lastName" required="true" />
+            <FormItem
+              label="Field to Update"
+              type="select"
+              width="200px"
+              bindTo="fieldToUpdate"
+              required
+              initialValue="rate"
+              testId="modal-select"
+            >
+              <Option value="rate">Price</Option>
+              <Option value="description">Item Description</Option>
+              <Option value="account_id">Account</Option>
+            </FormItem>
+          </Form>
+        </ModalDialog>
+      </Fragment>
+    `);
+        const selectDriver = yield createSelectDriver("select");
+        yield selectDriver.click();
+        // Click button to open modal
+        const blowUpButton = page.getByText("BLOW UP");
+        yield blowUpButton.click();
+        // Wait for modal to be visible
+        yield (0, fixtures_1.expect)(page.getByRole("dialog", { name: "Example Dialog" })).toBeVisible();
+        // Open the select in the modal
+        const modalSelectDriver = yield createSelectDriver("modal-select");
+        yield modalSelectDriver.click();
+        // Check that all options are visible
+        yield (0, fixtures_1.expect)(page.getByRole("option", { name: "Price" })).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("option", { name: "Item Description" })).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("option", { name: "Account" })).toBeVisible();
+    }));
+});

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

@@ -15,15 +15,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Select = exports.defaultProps = void 0;
-const react_1 = require("react");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_2 = require("react");
-const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
+const react_1 = require("react");
 const react_popover_1 = require("@radix-ui/react-popover");
 const classnames_1 = __importDefault(require("classnames"));
-const react_focus_scope_1 = require("@radix-ui/react-focus-scope");
-const SelectOption_1 = require("./SelectOption");
 const Select_module_scss_1 = __importDefault(require("./Select.module.scss"));
+const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
 const constants_1 = require("../../components-core/constants");
 const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
 const misc_1 = require("../../components-core/utils/misc");
@@ -32,9 +29,7 @@ const SelectContext_1 = require("./SelectContext");
 const OptionTypeProvider_1 = __importDefault(require("../Option/OptionTypeProvider"));
 const OptionContext_1 = require("./OptionContext");
 const HiddenOption_1 = require("./HiddenOption");
-const FormContext_1 = require("../Form/FormContext");
-const SimpleSelect_1 = require("./SimpleSelect");
-const MultiSelectOption_1 = require("./MultiSelectOption");
+const PART_LIST_WRAPPER = "listWrapper";
 exports.defaultProps = {
     enabled: true,
     placeholder: "",
@@ -80,7 +75,7 @@ const SelectTriggerActions = ({ value, multiSelect, enabled, readOnly, clearValu
                     clearValue();
                 }, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "close" }) })), showChevron && ((0, jsx_runtime_1.jsx)("span", { className: Select_module_scss_1.default.action, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" }) }))] }));
 };
-exports.Select = (0, react_2.forwardRef)(function Select(_a, forwardedRef) {
+exports.Select = (0, react_1.forwardRef)(function Select(_a, forwardedRef) {
     var { 
     // Basic props
     id, initialValue, value, enabled = exports.defaultProps.enabled, placeholder = exports.defaultProps.placeholder, autoFocus = exports.defaultProps.autoFocus, readOnly = false, required = exports.defaultProps.required, 
@@ -96,17 +91,16 @@ exports.Select = (0, react_2.forwardRef)(function Select(_a, forwardedRef) {
     inProgress = exports.defaultProps.inProgress, inProgressNotificationMessage = exports.defaultProps.inProgressNotificationMessage, 
     // Internal
     updateState = constants_1.noop, registerComponentApi, children } = _a, rest = __rest(_a, ["id", "initialValue", "value", "enabled", "placeholder", "autoFocus", "readOnly", "required", "style", "className", "dropdownHeight", "validationStatus", "onDidChange", "onFocus", "onBlur", "searchable", "multiSelect", "emptyListTemplate", "valueRenderer", "optionRenderer", "inProgress", "inProgressNotificationMessage", "updateState", "registerComponentApi", "children"]);
-    const [referenceElement, setReferenceElement] = (0, react_2.useState)(null);
-    const [open, setOpen] = (0, react_2.useState)(false);
-    const [width, setWidth] = (0, react_2.useState)(0);
-    const observer = (0, react_2.useRef)();
+    const [referenceElement, setReferenceElement] = (0, react_1.useState)(null);
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const [width, setWidth] = (0, react_1.useState)(0);
+    const observer = (0, react_1.useRef)();
     const { root } = (0, ThemeContext_1.useTheme)();
-    const [options, setOptions] = (0, react_2.useState)(new Set());
-    const isInForm = (0, FormContext_1.useIsInsideForm)();
-    const [searchTerm, setSearchTerm] = (0, react_2.useState)("");
-    const [selectedIndex, setSelectedIndex] = (0, react_2.useState)(-1);
+    const [options, setOptions] = (0, react_1.useState)(new Set());
+    const [searchTerm, setSearchTerm] = (0, react_1.useState)("");
+    const [selectedIndex, setSelectedIndex] = (0, react_1.useState)(-1);
     // Filter options based on search term
-    const filteredOptions = (0, react_2.useMemo)(() => {
+    const filteredOptions = (0, react_1.useMemo)(() => {
         if (!searchTerm || searchTerm.trim() === "") {
             return Array.from(options);
         }
@@ -117,20 +111,20 @@ exports.Select = (0, react_2.forwardRef)(function Select(_a, forwardedRef) {
         });
     }, [options, searchTerm]);
     // Reset selected index when options change or dropdown closes
-    (0, react_2.useEffect)(() => {
+    (0, react_1.useEffect)(() => {
         if (!open) {
             setSelectedIndex(-1);
             setSearchTerm("");
         }
     }, [open]);
     // Set initial state based on the initialValue prop
-    (0, react_2.useEffect)(() => {
+    (0, react_1.useEffect)(() => {
         if (initialValue !== undefined) {
             updateState({ value: initialValue }, { initial: true });
         }
     }, [initialValue, updateState]);
     // Observe the size of the reference element
-    (0, react_2.useEffect)(() => {
+    (0, react_1.useEffect)(() => {
         var _a;
         const current = referenceElement;
         (_a = observer.current) === null || _a === void 0 ? void 0 : _a.disconnect();
@@ -144,7 +138,7 @@ exports.Select = (0, react_2.forwardRef)(function Select(_a, forwardedRef) {
         };
     }, [referenceElement]);
     // Handle option selection
-    const toggleOption = (0, react_2.useCallback)((selectedValue) => {
+    const toggleOption = (0, react_1.useCallback)((selectedValue) => {
         const newSelectedValue = multiSelect
             ? Array.isArray(value)
                 ? value.map((v) => String(v)).includes(String(selectedValue))
@@ -161,46 +155,50 @@ exports.Select = (0, react_2.forwardRef)(function Select(_a, forwardedRef) {
         }
     }, [multiSelect, value, updateState, onDidChange]);
     // Clear selected value
-    const clearValue = (0, react_2.useCallback)(() => {
+    const clearValue = (0, react_1.useCallback)(() => {
         const newValue = multiSelect ? [] : "";
         updateState({ value: newValue });
         onDidChange(newValue);
     }, [multiSelect, updateState, onDidChange]);
     // Helper functions to find next/previous enabled option
-    const findNextEnabledIndex = (0, react_2.useCallback)((currentIndex) => {
+    const findNextEnabledIndex = (0, react_1.useCallback)((currentIndex) => {
+        if (filteredOptions.length === 0)
+            return -1;
         for (let i = currentIndex + 1; i < filteredOptions.length; i++) {
             const item = filteredOptions[i];
-            if (item.enabled !== false) {
+            if (item && item.enabled !== false) {
                 return i;
             }
         }
         // Wrap around to beginning
         for (let i = 0; i <= currentIndex; i++) {
             const item = filteredOptions[i];
-            if (item.enabled !== false) {
+            if (item && item.enabled !== false) {
                 return i;
             }
         }
         return -1;
     }, [filteredOptions]);
-    const findPreviousEnabledIndex = (0, react_2.useCallback)((currentIndex) => {
+    const findPreviousEnabledIndex = (0, react_1.useCallback)((currentIndex) => {
+        if (filteredOptions.length === 0)
+            return -1;
         for (let i = currentIndex - 1; i >= 0; i--) {
             const item = filteredOptions[i];
-            if (item.enabled !== false) {
+            if (item && item.enabled !== false) {
                 return i;
             }
         }
         // Wrap around to end
         for (let i = filteredOptions.length - 1; i >= currentIndex; i--) {
             const item = filteredOptions[i];
-            if (item.enabled !== false) {
+            if (item && item.enabled !== false) {
                 return i;
             }
         }
         return -1;
     }, [filteredOptions]);
     // Keyboard navigation
-    const handleKeyDown = (0, react_2.useCallback)((event) => {
+    const handleKeyDown = (0, react_1.useCallback)((event) => {
         if (!open)
             return;
         switch (event.key) {
@@ -222,8 +220,12 @@ exports.Select = (0, react_2.forwardRef)(function Select(_a, forwardedRef) {
                 event.preventDefault();
                 if (selectedIndex >= 0 && selectedIndex < filteredOptions.length) {
                     const selectedItem = filteredOptions[selectedIndex];
-                    if (selectedItem.enabled !== false) {
+                    if (selectedItem && selectedItem.enabled !== false) {
                         toggleOption(selectedItem.value);
+                        // Close dropdown after selecting in single-select mode
+                        if (!multiSelect) {
+                            setOpen(false);
+                        }
                     }
                 }
                 break;
@@ -237,11 +239,12 @@ exports.Select = (0, react_2.forwardRef)(function Select(_a, forwardedRef) {
         selectedIndex,
         filteredOptions,
         toggleOption,
+        multiSelect,
         findNextEnabledIndex,
         findPreviousEnabledIndex,
     ]);
     // Register component API for external interactions
-    const focus = (0, react_2.useCallback)(() => {
+    const focus = (0, react_1.useCallback)(() => {
         referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.focus();
     }, [referenceElement]);
     const setValue = (0, misc_1.useEvent)((newValue) => {
@@ -256,7 +259,7 @@ exports.Select = (0, react_2.forwardRef)(function Select(_a, forwardedRef) {
             clearValue();
         }
     });
-    (0, react_2.useEffect)(() => {
+    (0, react_1.useEffect)(() => {
         registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
             focus,
             setValue,
@@ -264,37 +267,174 @@ exports.Select = (0, react_2.forwardRef)(function Select(_a, forwardedRef) {
         });
     }, [focus, registerComponentApi, setValue, reset]);
     // Render the "empty list" message
-    const emptyListNode = (0, react_2.useMemo)(() => emptyListTemplate !== null && emptyListTemplate !== void 0 ? emptyListTemplate : ((0, jsx_runtime_1.jsxs)("div", { className: Select_module_scss_1.default.selectEmpty, children: [(0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "noresult" }), (0, jsx_runtime_1.jsx)("span", { children: "List is empty" })] })), [emptyListTemplate]);
-    const onOptionAdd = (0, react_2.useCallback)((option) => {
-        setOptions((prev) => new Set(prev).add(option));
+    const emptyListNode = (0, react_1.useMemo)(() => emptyListTemplate !== null && emptyListTemplate !== void 0 ? emptyListTemplate : ((0, jsx_runtime_1.jsxs)("div", { className: Select_module_scss_1.default.selectEmpty, children: [(0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "noresult" }), (0, jsx_runtime_1.jsx)("span", { children: "List is empty" })] })), [emptyListTemplate]);
+    const onOptionAdd = (0, react_1.useCallback)((option) => {
+        setOptions((prev) => {
+            // Check if option with same value already exists
+            const exists = Array.from(prev).some((opt) => opt.value === option.value);
+            if (exists) {
+                return prev;
+            }
+            const newSet = new Set(prev);
+            newSet.add(option);
+            return newSet;
+        });
     }, []);
-    const onOptionRemove = (0, react_2.useCallback)((option) => {
+    const onOptionRemove = (0, react_1.useCallback)((option) => {
         setOptions((prev) => {
             const optionsSet = new Set(prev);
             optionsSet.delete(option);
             return optionsSet;
         });
     }, []);
-    const optionContextValue = (0, react_2.useMemo)(() => ({
+    const optionContextValue = (0, react_1.useMemo)(() => ({
         onOptionAdd,
         onOptionRemove,
     }), [onOptionAdd, onOptionRemove]);
-    const selectContextValue = (0, react_2.useMemo)(() => ({
+    const selectContextValue = (0, react_1.useMemo)(() => ({
         multiSelect,
+        readOnly,
         value,
         onChange: toggleOption,
         setOpen,
         setSelectedIndex,
         options,
+        highlightedValue: selectedIndex >= 0 &&
+            selectedIndex < filteredOptions.length &&
+            filteredOptions[selectedIndex]
+            ? filteredOptions[selectedIndex].value
+            : undefined,
         optionRenderer,
-    }), [multiSelect, toggleOption, value, options, 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: 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, Object.assign({}, rest, { ref: (0, react_compose_refs_1.composeRefs)(setReferenceElement, forwardedRef), id: id, "aria-haspopup": "listbox", style: style, 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], {
+    }), [
+        multiSelect,
+        readOnly,
+        value,
+        toggleOption,
+        options,
+        selectedIndex,
+        filteredOptions,
+        optionRenderer,
+    ]);
+    return ((0, jsx_runtime_1.jsx)(SelectContext_1.SelectContext.Provider, { value: selectContextValue, children: (0, jsx_runtime_1.jsxs)(OptionContext_1.OptionContext.Provider, { value: optionContextValue, children: [(0, jsx_runtime_1.jsx)(OptionTypeProvider_1.default, { Component: VisibleSelectOption, children: (0, jsx_runtime_1.jsxs)(react_popover_1.Popover, { open: open, onOpenChange: (isOpen) => {
+                            if (!enabled)
+                                return;
+                            setOpen(isOpen);
+                            // Reset highlighted option when dropdown closes
+                            setSelectedIndex(-1);
+                        }, modal: false, children: [(0, jsx_runtime_1.jsxs)(react_popover_1.PopoverTrigger, Object.assign({}, rest, { ref: (0, react_compose_refs_1.composeRefs)(setReferenceElement, forwardedRef), id: id, "aria-haspopup": "listbox", style: style, onFocus: onFocus, onBlur: onBlur, disabled: !enabled, "aria-expanded": open, "data-part-id": PART_LIST_WRAPPER, className: (0, classnames_1.default)(className, 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,
-                                }, className), autoFocus: autoFocus, children: [(0, jsx_runtime_1.jsx)(SelectTriggerValue, { value: value, placeholder: placeholder, readOnly: readOnly, multiSelect: multiSelect, options: options, valueRenderer: valueRenderer, toggleOption: toggleOption }), (0, jsx_runtime_1.jsx)(SelectTriggerActions, { value: value, multiSelect: multiSelect, enabled: enabled, readOnly: readOnly, clearValue: clearValue })] })), 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, onKeyDown: handleKeyDown, children: (0, jsx_runtime_1.jsxs)("div", { className: Select_module_scss_1.default.command, 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)("input", { role: "combobox", className: (0, classnames_1.default)(Select_module_scss_1.default.commandInput), placeholder: "Search...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), autoFocus: true })] })) : ((0, jsx_runtime_1.jsx)("button", { autoFocus: true, "aria-hidden": "true", className: Select_module_scss_1.default.srOnly })), (0, jsx_runtime_1.jsxs)("div", { role: "listbox", className: Select_module_scss_1.default.commandList, children: [inProgress && ((0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.loading, children: inProgressNotificationMessage })), filteredOptions.map(({ value, label, enabled, keywords }, index) => ((0, jsx_runtime_1.jsx)(MultiSelectOption_1.MultiSelectOption, { readOnly: readOnly, value: value, label: label, enabled: enabled, keywords: keywords, isHighlighted: selectedIndex === index, itemIndex: index }, value))), !inProgress && filteredOptions.length === 0 && ((0, jsx_runtime_1.jsx)("div", { children: emptyListNode }))] })] }) }) }) }))] }), children] })) : ((0, jsx_runtime_1.jsx)(OptionTypeProvider_1.default, { Component: SelectOption_1.SelectOption, children: (0, react_1.createElement)(SimpleSelect_1.SimpleSelect, Object.assign({}, rest, { readOnly: !!readOnly, ref: forwardedRef, key: isInForm ? (value ? `status-${value}` : "status-initial") : undefined, value: value, onValueChange: toggleOption, id: id, style: style, className: className, onFocus: onFocus, onBlur: onBlur, enabled: enabled, validationStatus: validationStatus, triggerRef: setReferenceElement, autoFocus: autoFocus, placeholder: placeholder, height: dropdownHeight, width: width, emptyListNode: emptyListNode }), children) })) }) }));
+                                }), role: "combobox", onClick: (event) => {
+                                    if (!enabled)
+                                        return;
+                                    event.stopPropagation();
+                                    setOpen((prev) => !prev);
+                                }, onKeyDown: (event) => {
+                                    if (!enabled || readOnly)
+                                        return;
+                                    // Handle opening dropdown with keyboard
+                                    if (!open &&
+                                        (event.key === "ArrowDown" ||
+                                            event.key === "ArrowUp" ||
+                                            event.key === " " ||
+                                            event.key === "Enter")) {
+                                        event.preventDefault();
+                                        setOpen(true);
+                                        // Set initial selectedIndex to first enabled option if options exist
+                                        if (filteredOptions.length > 0) {
+                                            const firstEnabledIndex = findNextEnabledIndex(-1);
+                                            setSelectedIndex(firstEnabledIndex !== -1 ? firstEnabledIndex : 0);
+                                        }
+                                        return;
+                                    }
+                                    // Handle keyboard navigation when dropdown is open
+                                    if (open) {
+                                        handleKeyDown(event);
+                                    }
+                                }, autoFocus: autoFocus, children: [(0, jsx_runtime_1.jsx)(SelectTriggerValue, { value: value, placeholder: placeholder, readOnly: readOnly, multiSelect: multiSelect, options: options, valueRenderer: valueRenderer, toggleOption: toggleOption }), (0, jsx_runtime_1.jsx)(SelectTriggerActions, { value: value, multiSelect: multiSelect, enabled: enabled, readOnly: readOnly, clearValue: clearValue })] })), open && ((0, jsx_runtime_1.jsx)(react_popover_1.Portal, { container: root, children: (0, jsx_runtime_1.jsx)(react_popover_1.PopoverContent, { style: { minWidth: width, height: dropdownHeight }, className: Select_module_scss_1.default.selectContent, onKeyDown: handleKeyDown, children: (0, jsx_runtime_1.jsxs)("div", { className: Select_module_scss_1.default.command, 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)("input", { role: "searchbox", className: (0, classnames_1.default)(Select_module_scss_1.default.commandInput), placeholder: "Search...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value) })] })) : ((0, jsx_runtime_1.jsx)("button", { "aria-hidden": "true", className: Select_module_scss_1.default.srOnly })), (0, jsx_runtime_1.jsx)("div", { role: "listbox", className: Select_module_scss_1.default.commandList, children: inProgress ? ((0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.loading, children: inProgressNotificationMessage })) : searchable && searchTerm ? (
+                                                // When searching, show only filtered options
+                                                filteredOptions.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { children: emptyListNode })) : (filteredOptions.map(({ value, label, enabled, keywords }, index) => ((0, jsx_runtime_1.jsx)(SelectOptionItem, { readOnly: readOnly, value: value, label: label, enabled: enabled, keywords: keywords, isHighlighted: selectedIndex === index, itemIndex: index }, value))))) : (
+                                                // When not searching, show all children (includes Options and other components like Button)
+                                                (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [children, options.size === 0 && (0, jsx_runtime_1.jsx)("div", { children: emptyListNode })] })) })] }) }) }))] }) }), !open && ((0, jsx_runtime_1.jsx)("div", { style: { display: "none" }, children: (0, jsx_runtime_1.jsx)(OptionTypeProvider_1.default, { Component: HiddenOption_1.HiddenOption, children: children }) }))] }) }));
 });
+// Visible option component for rendering items in the dropdown (used by OptionTypeProvider)
+function VisibleSelectOption(option) {
+    const { value, label, enabled = true, children } = option;
+    const { onOptionAdd } = (0, OptionContext_1.useOption)();
+    const { value: selectedValue, onChange, multiSelect, readOnly, setOpen, highlightedValue, optionRenderer, } = (0, SelectContext_1.useSelect)();
+    const optionRef = (0, react_1.useRef)(null);
+    const opt = (0, react_1.useMemo)(() => {
+        return Object.assign(Object.assign({}, option), { label: label !== null && label !== void 0 ? label : "", keywords: option.keywords || [label !== null && label !== void 0 ? label : ""] });
+    }, [option, label]);
+    (0, react_1.useEffect)(() => {
+        onOptionAdd(opt);
+        // Don't remove options when component unmounts - they should persist
+    }, [opt, onOptionAdd]);
+    const selected = (0, react_1.useMemo)(() => {
+        return Array.isArray(selectedValue) && multiSelect
+            ? selectedValue.map((v) => String(v)).includes(value)
+            : String(selectedValue) === String(value);
+    }, [selectedValue, value, multiSelect]);
+    const isHighlighted = (0, react_1.useMemo)(() => {
+        return highlightedValue !== undefined && String(highlightedValue) === String(value);
+    }, [highlightedValue, value]);
+    // Scroll into view when highlighted
+    (0, react_1.useEffect)(() => {
+        if (isHighlighted && optionRef.current) {
+            optionRef.current.scrollIntoView({ block: "nearest", behavior: "smooth" });
+        }
+    }, [isHighlighted]);
+    const handleClick = () => {
+        if (readOnly) {
+            setOpen(false);
+            return;
+        }
+        if (enabled) {
+            onChange(value);
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { ref: optionRef, role: "option", "aria-disabled": !enabled, "aria-selected": selected, className: (0, classnames_1.default)(Select_module_scss_1.default.multiSelectOption, {
+            [Select_module_scss_1.default.disabledOption]: !enabled,
+            [Select_module_scss_1.default.highlighted]: isHighlighted,
+        }), onMouseDown: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+        }, onClick: handleClick, "data-state": selected ? "checked" : undefined, children: (0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.multiSelectOptionContent, children: optionRenderer ? (optionRenderer({ label, value, enabled }, 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" })] })) }) }));
+}
+// Internal option component for rendering items in the dropdown
+function SelectOptionItem(option) {
+    const { value, label, enabled = true, readOnly, children, isHighlighted = false, itemIndex, } = option;
+    const { value: selectedValue, onChange, multiSelect, setOpen, setSelectedIndex, optionRenderer, } = (0, SelectContext_1.useSelect)();
+    const optionRef = (0, react_1.useRef)(null);
+    const selected = (0, react_1.useMemo)(() => {
+        return Array.isArray(selectedValue) && multiSelect
+            ? selectedValue.map((v) => String(v)).includes(value)
+            : String(selectedValue) === String(value);
+    }, [selectedValue, value, multiSelect]);
+    // Scroll into view when highlighted
+    (0, react_1.useEffect)(() => {
+        if (isHighlighted && optionRef.current) {
+            optionRef.current.scrollIntoView({ block: "nearest", behavior: "smooth" });
+        }
+    }, [isHighlighted]);
+    const handleClick = () => {
+        if (readOnly) {
+            setOpen(false);
+            return;
+        }
+        if (enabled) {
+            onChange(value);
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { ref: optionRef, role: "option", "aria-disabled": !enabled, "aria-selected": selected, className: (0, classnames_1.default)(Select_module_scss_1.default.multiSelectOption, {
+            [Select_module_scss_1.default.disabledOption]: !enabled,
+            [Select_module_scss_1.default.highlighted]: isHighlighted,
+        }), onMouseDown: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+        }, onMouseEnter: () => {
+            if (itemIndex !== undefined && setSelectedIndex && enabled) {
+                setSelectedIndex(itemIndex);
+            }
+        }, onClick: handleClick, "data-state": selected ? "checked" : undefined, children: (0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.multiSelectOptionContent, children: optionRenderer ? (optionRenderer({ label, value, enabled }, 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" })] })) }) }));
+}

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

@@ -179,10 +179,21 @@ const ComponentAdapter = (0, react_1.forwardRef)(function ComponentAdapter(_a, r
     const stableLayoutCss = (0, hooks_1.useShallowCompareMemoize)(cssProps);
     const className = (0, StyleContext_1.useComponentStyle)(stableLayoutCss);
     const { inspectId, refreshInspection } = (0, InspectorContext_1.useInspector)(safeNode, uid);
+    // --- Extract context variables (keys starting with "$") from state
+    const contextVars = (0, react_1.useMemo)(() => {
+        const vars = {};
+        for (const key of Object.keys(state)) {
+            if (key.startsWith("$")) {
+                vars[key] = state[key];
+            }
+        }
+        return vars;
+    }, [state]);
     // --- Assemble the renderer context we pass down the rendering chain
     const rendererContext = {
         node: safeNode,
         state: state[uid] || constants_1.EMPTY_OBJECT,
+        contextVars,
         updateState: memoedUpdateState,
         appContext,
         extractValue: valueExtractor,

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

@@ -124,7 +124,9 @@ exports.Container = (0, react_1.memo)((0, react_1.forwardRef)(function Container
     const runCodeAsync = (0, misc_1.useEvent)((source, componentUid, options, ...eventArgs) => __awaiter(this, void 0, void 0, function* () {
         var _a, _b, _c;
         // --- Check if the event handler can sign its lifecycle state
-        const canSignEventLifecycle = () => componentUid.description !== undefined && (options === null || options === void 0 ? void 0 : options.eventName) !== undefined;
+        const canSignEventLifecycle = () => {
+            return componentUid.description !== undefined && (options === null || options === void 0 ? void 0 : options.eventName) !== undefined;
+        };
         let changes = [];
         const getComponentStateClone = () => {
             changes.length = 0;
@@ -441,9 +443,6 @@ exports.Container = (0, react_1.memo)((0, react_1.forwardRef)(function Container
         registerComponentApi,
     ]);
     const cleanup = (0, misc_1.useEvent)((uid) => {
-        // console.log("CLEANUP CALLED FOR", node);
-        //TODO cleanup registered component api for that uid
-        //TODO cleanup state for that uid
         delete fnsRef.current[uid];
     });
     // --- The container wraps the `renderChild` function to provide that to the child components

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

@@ -45,7 +45,9 @@ exports.StateContainer = (0, react_1.memo)((0, react_1.forwardRef)(function Stat
     const [version, setVersion] = (0, react_1.useState)(0);
     const routingParams = useRoutingParams();
     const memoedVars = (0, react_1.useRef)(new Map());
-    const stateFromOutside = (0, hooks_1.useShallowCompareMemoize)((0, react_1.useMemo)(() => extractScopedState(parentState, node.uses), [node.uses, parentState]));
+    const stateFromOutside = (0, hooks_1.useShallowCompareMemoize)((0, react_1.useMemo)(() => {
+        return extractScopedState(parentState, node.uses);
+    }, [node.uses, parentState]));
     // --- All state manipulation happens through the container reducer, which is created here.
     // --- This reducer allow collecting state changes for debugging purposes. The `debugView`
     // --- contains the debug configuration; it may enable (or disable) logging.
@@ -56,10 +58,18 @@ exports.StateContainer = (0, react_1.memo)((0, react_1.forwardRef)(function Stat
     const [componentApis, setComponentApis] = (0, react_1.useState)(constants_1.EMPTY_OBJECT);
     const componentStateWithApis = (0, hooks_1.useShallowCompareMemoize)((0, react_1.useMemo)(() => {
         const ret = Object.assign({}, componentState);
+        // Get set of registered API keys - only these should have reducer state exposed as string keys
+        const registeredApiKeys = new Set(Object.getOwnPropertySymbols(componentApis)
+            .map(s => s.description)
+            .filter((d) => d !== undefined));
         for (const stateKey of Object.getOwnPropertySymbols(componentState)) {
             const value = componentState[stateKey];
             if (stateKey.description) {
-                ret[stateKey.description] = value;
+                // Only copy reducer state to string keys for APIs registered in THIS container
+                // This prevents child containers from inheriting reducer state for parent APIs
+                if (registeredApiKeys.has(stateKey.description)) {
+                    ret[stateKey.description] = value;
+                }
             }
         }
         if (Reflect.ownKeys(componentApis).length === 0) {
@@ -104,16 +114,17 @@ exports.StateContainer = (0, react_1.memo)((0, react_1.forwardRef)(function Stat
     const localVarsStateContextWithPreResolvedLocalVars = (0, hooks_1.useShallowCompareMemoize)(Object.assign(Object.assign({}, preResolvedLocalVars), localVarsStateContext));
     const resolvedLocalVars = useVars(varDefinitions, functionDeps, localVarsStateContextWithPreResolvedLocalVars, memoedVars);
     const mergedWithVars = useMergedState(resolvedLocalVars, componentStateWithApis);
-    const combinedState = useCombinedState(stateFromOutside, node.contextVars, mergedWithVars, routingParams);
+    const combinedState = useCombinedState(stateFromOutside, // Parent state (lower priority) - allows local vars to shadow
+    node.contextVars, // Context vars like $item
+    mergedWithVars, // Local vars and component state (higher priority) - enables shadowing
+    routingParams);
     const registerComponentApi = (0, react_1.useCallback)((uid, api) => {
         setComponentApis((0, immer_1.default)((draft) => {
-            // console.log("-----BUST----setComponentApis");
             if (!draft[uid]) {
                 draft[uid] = {};
             }
             Object.entries(api).forEach(([key, value]) => {
                 if (draft[uid][key] !== value) {
-                    // console.log(`-----BUST------new api for ${uid}`, draft[uid][key], value)
                     draft[uid][key] = value;
                 }
             });
@@ -185,11 +196,9 @@ function useCombinedState(...states) {
     const combined = (0, react_1.useMemo)(() => {
         let ret = {};
         states.forEach((state = constants_1.EMPTY_OBJECT) => {
-            // console.log("st", state);
             if (state !== constants_1.EMPTY_OBJECT) {
                 ret = Object.assign(Object.assign({}, ret), state);
             }
-            // console.log("ret", ret);
         });
         return ret;
     }, [states]);
@@ -244,7 +253,6 @@ function useVars(vars = constants_1.EMPTY_OBJECT, fnDeps = constants_1.EMPTY_OBJ
                                 if (isParsedValue(value)) {
                                     return (0, visitors_1.collectVariableDependencies)(value.tree, referenceTrackedApi);
                                 }
-                                // console.log(`GETTING DEPENDENCY FOR ${value} with:`, referenceTrackedApi);
                                 const params = (0, ParameterParser_1.parseParameterString)(value);
                                 let ret = new Set();
                                 params.forEach((param) => {
@@ -258,15 +266,6 @@ function useVars(vars = constants_1.EMPTY_OBJECT, fnDeps = constants_1.EMPTY_OBJ
                                 return Array.from(ret);
                             }),
                             obtainValue: (0, memoize_one_1.default)((value, state, appContext, strict, deps, appContextDeps) => {
-                                // console.log(
-                                //   "VARS, BUST, obtain value called with",
-                                //   value,
-                                //   { state, appContext },
-                                //   {
-                                //     deps,
-                                //     appContextDeps,
-                                //   }
-                                // );
                                 try {
                                     return isParsedValue(value)
                                         ? (0, eval_tree_sync_1.evalBinding)(value.tree, {
@@ -309,7 +308,6 @@ function useVars(vars = constants_1.EMPTY_OBJECT, fnDeps = constants_1.EMPTY_OBJ
                     }
                     const stateDepValues = (0, misc_1.pickFromObject)(stateContext, dependencies);
                     const appContextDepValues = (0, misc_1.pickFromObject)(appContext, dependencies);
-                    // console.log("VARS, obtain value called with", stateDepValues, appContextDepValues);
                     ret[key] = memoedVars.current
                         .get(value)
                         .obtainValue(value, stateContext, appContext, true, stateDepValues, appContextDepValues);

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

@@ -70,21 +70,24 @@ function createContainerReducer(debugView) {
             case containers_1.ContainerActionKind.EVENT_HANDLER_STARTED: {
                 const { eventName } = action.payload;
                 const inProgressFlagName = `${eventName}InProgress`;
-                state[uid] = Object.assign(Object.assign({}, state[uid]), { [inProgressFlagName]: true });
+                // Preserve existing state or use empty object
+                state[uid] = state[uid] ? Object.assign(Object.assign({}, state[uid]), { [inProgressFlagName]: true }) : { [inProgressFlagName]: true };
                 storeNextValue(state[uid]);
                 break;
             }
             case containers_1.ContainerActionKind.EVENT_HANDLER_COMPLETED: {
                 const { eventName } = action.payload;
                 const inProgressFlagName = `${eventName}InProgress`;
-                state[uid] = Object.assign(Object.assign({}, state[uid]), { [inProgressFlagName]: false });
+                // Preserve existing state or use empty object
+                state[uid] = state[uid] ? Object.assign(Object.assign({}, state[uid]), { [inProgressFlagName]: false }) : { [inProgressFlagName]: false };
                 storeNextValue(state[uid]);
                 break;
             }
             case containers_1.ContainerActionKind.EVENT_HANDLER_ERROR: {
                 const { eventName } = action.payload;
                 const inProgressFlagName = `${eventName}InProgress`;
-                state[uid] = Object.assign(Object.assign({}, state[uid]), { [inProgressFlagName]: false });
+                // Preserve existing state or use empty object
+                state[uid] = state[uid] ? Object.assign(Object.assign({}, state[uid]), { [inProgressFlagName]: false }) : { [inProgressFlagName]: false };
                 storeNextValue(state[uid]);
                 break;
             }