xmlui 0.11.3 → 0.11.6

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

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectContext = void 0;
-exports.useSelect = useSelect;
-const react_1 = require("react");
-exports.SelectContext = (0, react_1.createContext)({
-    value: null,
-    onChange: (selectedValue) => { },
-    setOpen: (open) => { },
-    setSelectedIndex: (index) => { },
-    options: new Set(),
-    optionRenderer: undefined,
-});
-function useSelect() {
-    return (0, react_1.useContext)(exports.SelectContext);
-}

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

@@ -1,440 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Select = exports.defaultProps = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_popover_1 = require("@radix-ui/react-popover");
-const classnames_1 = __importDefault(require("classnames"));
-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");
-const IconNative_1 = __importDefault(require("../Icon/IconNative"));
-const SelectContext_1 = require("./SelectContext");
-const OptionTypeProvider_1 = __importDefault(require("../Option/OptionTypeProvider"));
-const OptionContext_1 = require("./OptionContext");
-const HiddenOption_1 = require("./HiddenOption");
-const PART_LIST_WRAPPER = "listWrapper";
-exports.defaultProps = {
-    enabled: true,
-    placeholder: "",
-    autoFocus: false,
-    searchable: false,
-    multiSelect: false,
-    required: false,
-    inProgress: false,
-    inProgressNotificationMessage: "",
-    readOnly: false,
-    validationStatus: "none",
-    labelBreak: false,
-};
-// Common trigger value display component
-const SelectTriggerValue = ({ value, placeholder, readOnly, multiSelect, options, valueRenderer, toggleOption, }) => {
-    if (multiSelect) {
-        if (Array.isArray(value) && value.length > 0) {
-            return ((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) => {
-                        var _a;
-                        return valueRenderer ? (valueRenderer(Array.from(options).find((o) => o.value === `${v}`), () => {
-                            toggleOption(v);
-                        })) : ((0, jsx_runtime_1.jsxs)("span", { className: Select_module_scss_1.default.badge, children: [(_a = Array.from(options).find((o) => o.value === `${v}`)) === null || _a === void 0 ? void 0 : _a.label, (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "close", size: "sm", onClick: (event) => {
-                                        event.stopPropagation();
-                                        toggleOption(v);
-                                    } })] }, v));
-                    }) }) }));
-        }
-        return ((0, jsx_runtime_1.jsx)("span", { placeholder: placeholder, className: Select_module_scss_1.default.placeholder, children: placeholder }));
-    }
-    // Single select
-    if (value !== undefined && value !== null && value !== "") {
-        const selectedOption = Array.from(options).find((o) => o.value === value);
-        return (0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.selectValue, children: selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label });
-    }
-    return ((0, jsx_runtime_1.jsx)("div", { "aria-placeholder": placeholder, className: Select_module_scss_1.default.placeholder, children: readOnly ? "" : placeholder || "" }));
-};
-const SelectTriggerActions = ({ value, multiSelect, enabled, readOnly, clearValue, showChevron = true, }) => {
-    const hasValue = multiSelect
-        ? Array.isArray(value) && value.length > 0
-        : value !== undefined && value !== null && value !== "";
-    return ((0, jsx_runtime_1.jsxs)("div", { className: Select_module_scss_1.default.actions, children: [hasValue && enabled && !readOnly && ((0, jsx_runtime_1.jsx)("span", { className: Select_module_scss_1.default.action, onClick: (event) => {
-                    event.stopPropagation();
-                    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_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, 
-    // Styling
-    style, className, 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, 
-    // 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_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_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_1.useMemo)(() => {
-        if (!searchTerm || searchTerm.trim() === "") {
-            return Array.from(options);
-        }
-        const searchLower = searchTerm.toLowerCase();
-        return Array.from(options).filter((option) => {
-            const extendedValue = option.value + " " + option.label + " " + (option.keywords || []).join(" ");
-            return extendedValue.toLowerCase().includes(searchLower);
-        });
-    }, [options, searchTerm]);
-    // Reset selected index when options change or dropdown closes
-    (0, react_1.useEffect)(() => {
-        if (!open) {
-            setSelectedIndex(-1);
-            setSearchTerm("");
-        }
-    }, [open]);
-    // Set initial state based on the initialValue prop
-    (0, react_1.useEffect)(() => {
-        if (initialValue !== undefined) {
-            updateState({ value: initialValue }, { initial: true });
-        }
-    }, [initialValue, updateState]);
-    // Observe the size of the reference element
-    (0, react_1.useEffect)(() => {
-        var _a;
-        const current = referenceElement;
-        (_a = observer.current) === null || _a === void 0 ? void 0 : _a.disconnect();
-        if (current) {
-            observer.current = new ResizeObserver(() => setWidth(current.clientWidth));
-            observer.current.observe(current);
-        }
-        return () => {
-            var _a;
-            (_a = observer.current) === null || _a === void 0 ? void 0 : _a.disconnect();
-        };
-    }, [referenceElement]);
-    // Handle option selection
-    const toggleOption = (0, react_1.useCallback)((selectedValue) => {
-        const newSelectedValue = multiSelect
-            ? Array.isArray(value)
-                ? value.map((v) => String(v)).includes(String(selectedValue))
-                    ? value.filter((v) => String(v) !== String(selectedValue))
-                    : [...value, selectedValue]
-                : [selectedValue]
-            : String(selectedValue) === String(value)
-                ? null
-                : selectedValue;
-        updateState({ value: newSelectedValue });
-        onDidChange(newSelectedValue);
-        if (!multiSelect) {
-            setOpen(false);
-        }
-    }, [multiSelect, value, updateState, onDidChange]);
-    // Clear selected value
-    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_1.useCallback)((currentIndex) => {
-        if (filteredOptions.length === 0)
-            return -1;
-        for (let i = currentIndex + 1; i < filteredOptions.length; i++) {
-            const item = filteredOptions[i];
-            if (item && item.enabled !== false) {
-                return i;
-            }
-        }
-        // Wrap around to beginning
-        for (let i = 0; i <= currentIndex; i++) {
-            const item = filteredOptions[i];
-            if (item && item.enabled !== false) {
-                return i;
-            }
-        }
-        return -1;
-    }, [filteredOptions]);
-    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 && item.enabled !== false) {
-                return i;
-            }
-        }
-        // Wrap around to end
-        for (let i = filteredOptions.length - 1; i >= currentIndex; i--) {
-            const item = filteredOptions[i];
-            if (item && item.enabled !== false) {
-                return i;
-            }
-        }
-        return -1;
-    }, [filteredOptions]);
-    // Keyboard navigation
-    const handleKeyDown = (0, react_1.useCallback)((event) => {
-        if (!open)
-            return;
-        switch (event.key) {
-            case "ArrowDown":
-                event.preventDefault();
-                setSelectedIndex((prev) => {
-                    const nextIndex = findNextEnabledIndex(prev);
-                    return nextIndex !== -1 ? nextIndex : prev;
-                });
-                break;
-            case "ArrowUp":
-                event.preventDefault();
-                setSelectedIndex((prev) => {
-                    const prevIndex = findPreviousEnabledIndex(prev);
-                    return prevIndex !== -1 ? prevIndex : prev;
-                });
-                break;
-            case "Enter":
-                event.preventDefault();
-                if (selectedIndex >= 0 && selectedIndex < filteredOptions.length) {
-                    const selectedItem = filteredOptions[selectedIndex];
-                    if (selectedItem && selectedItem.enabled !== false) {
-                        toggleOption(selectedItem.value);
-                        // Close dropdown after selecting in single-select mode
-                        if (!multiSelect) {
-                            setOpen(false);
-                        }
-                    }
-                }
-                break;
-            case "Escape":
-                event.preventDefault();
-                setOpen(false);
-                break;
-        }
-    }, [
-        open,
-        selectedIndex,
-        filteredOptions,
-        toggleOption,
-        multiSelect,
-        findNextEnabledIndex,
-        findPreviousEnabledIndex,
-    ]);
-    // Register component API for external interactions
-    const focus = (0, react_1.useCallback)(() => {
-        referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.focus();
-    }, [referenceElement]);
-    const setValue = (0, misc_1.useEvent)((newValue) => {
-        toggleOption(newValue);
-    });
-    const reset = (0, misc_1.useEvent)(() => {
-        if (initialValue !== undefined) {
-            updateState({ value: initialValue });
-            onDidChange(initialValue);
-        }
-        else {
-            clearValue();
-        }
-    });
-    (0, react_1.useEffect)(() => {
-        registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
-            focus,
-            setValue,
-            reset,
-        });
-    }, [focus, registerComponentApi, setValue, reset]);
-    // Render the "empty list" message
-    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_1.useCallback)((option) => {
-        setOptions((prev) => {
-            const optionsSet = new Set(prev);
-            optionsSet.delete(option);
-            return optionsSet;
-        });
-    }, []);
-    const optionContextValue = (0, react_1.useMemo)(() => ({
-        onOptionAdd,
-        onOptionRemove,
-    }), [onOptionAdd, onOptionRemove]);
-    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,
-        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,
-                                }), 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/SelectionStore/SelectionStore.js

@@ -1,25 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.selectionStoreComponentRenderer = exports.SelectionStoreMd = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const renderers_1 = require("../../components-core/renderers");
-const metadata_helpers_1 = require("../metadata-helpers");
-const SelectionStoreNative_1 = require("./SelectionStoreNative");
-const COMP = "SelectionStore";
-exports.SelectionStoreMd = (0, metadata_helpers_1.createMetadata)({
-    status: "deprecated",
-    description: `The \`${COMP}\` is a non-visual component that may wrap components (items) and manage ` +
-        `their selection state to accommodate the usage of other actions.`,
-    props: {
-        idKey: {
-            description: `The selected items in the selection store needs to have a unique ID to use as an ` +
-                `unambiguous key for that particular item. This property uniquely identifies the ` +
-                `selected object item via a given property. By default, the key attribute is \`"id"\`.`,
-            defaultValue: SelectionStoreNative_1.defaultProps.idKey,
-        },
-    },
-});
-exports.selectionStoreComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.SelectionStoreMd, (rendererContext) => {
-    const { node, state, updateState, renderChild, registerComponentApi } = rendererContext;
-    return ((0, jsx_runtime_1.jsx)(SelectionStoreNative_1.SelectionStore, { updateState: updateState, idKey: node.props.idKey, selectedItems: state === null || state === void 0 ? void 0 : state.value, registerComponentApi: registerComponentApi, children: renderChild(node.children) }));
-});

package/dist/scripts/src/components/SelectionStore/SelectionStoreNative.js

@@ -1,103 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectionStore = exports.StandaloneSelectionStore = exports.defaultProps = void 0;
-exports.useSelectionContext = useSelectionContext;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
-const lodash_es_1 = require("lodash-es");
-const misc_1 = require("../../components-core/utils/misc");
-const constants_1 = require("../../components-core/constants");
-exports.defaultProps = {
-    idKey: "id",
-    selectedItems: constants_1.EMPTY_ARRAY,
-};
-const EMPTY_SELECTION_STATE = {
-    value: constants_1.EMPTY_ARRAY,
-};
-const StandaloneSelectionStore = ({ children }) => {
-    const [selection, setSelection] = (0, react_1.useState)(EMPTY_SELECTION_STATE);
-    return ((0, jsx_runtime_1.jsx)(exports.SelectionStore, { updateState: setSelection, selectedItems: selection.value, children: children }));
-};
-exports.StandaloneSelectionStore = StandaloneSelectionStore;
-const SelectionStore = ({ updateState = lodash_es_1.noop, idKey = exports.defaultProps.idKey, children, selectedItems = exports.defaultProps.selectedItems, registerComponentApi = lodash_es_1.noop, }) => {
-    const [items, setItems] = (0, react_1.useState)(selectedItems);
-    const valueInitializedRef = (0, react_1.useRef)(false);
-    const currentItemsRef = (0, react_1.useRef)(selectedItems);
-    const refreshSelection = (0, misc_1.useEvent)((allItems = constants_1.EMPTY_ARRAY) => {
-        const safeAllItems = allItems || constants_1.EMPTY_ARRAY;
-        const safeSelectedItems = selectedItems || constants_1.EMPTY_ARRAY;
-        setItems(safeAllItems);
-        currentItemsRef.current = safeAllItems; // Update the ref synchronously
-        let value = safeAllItems.filter((item) => !!safeSelectedItems.find((si) => si && item && si[idKey] === item[idKey]));
-        if (!(0, lodash_es_1.isEqual)(safeSelectedItems, value) || !valueInitializedRef.current) {
-            valueInitializedRef.current = true;
-            updateState({
-                value,
-            });
-        }
-    });
-    const setSelectedRowIds = (0, misc_1.useEvent)((rowIds) => {
-        const safeItems = currentItemsRef.current || constants_1.EMPTY_ARRAY; // Use ref instead of state
-        updateState({ value: safeItems.filter((item) => rowIds.includes(item[idKey])) });
-    });
-    const clearSelection = (0, misc_1.useEvent)(() => {
-        setSelectedRowIds(constants_1.EMPTY_ARRAY);
-    });
-    (0, react_1.useLayoutEffect)(() => {
-        registerComponentApi({
-            clearSelection,
-            setSelectedRowIds,
-            refreshSelection,
-        });
-    }, [clearSelection, setSelectedRowIds, registerComponentApi, refreshSelection]);
-    // --- Pass this selection context to the provider
-    const contextValue = (0, react_1.useMemo)(() => {
-        return {
-            selectedItems,
-            setSelectedRowIds,
-            refreshSelection,
-            idKey,
-        };
-    }, [refreshSelection, selectedItems, setSelectedRowIds, idKey]);
-    return (0, jsx_runtime_1.jsx)(SelectionContext.Provider, { value: contextValue, children: children });
-};
-exports.SelectionStore = SelectionStore;
-// Represents the default selection context
-const SelectionContext = react_1.default.createContext(null);
-// This React hook takes care of retrieving the current selection context
-function useSelectionContext() {
-    return (0, react_1.useContext)(SelectionContext);
-}