xmlui 0.11.4 → 0.11.6

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

@@ -1,498 +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.AutoComplete = exports.defaultProps = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const classnames_1 = __importDefault(require("classnames"));
-const constants_1 = require("../../components-core/constants");
-const misc_1 = require("../../components-core/utils/misc");
-const AutoComplete_module_scss_1 = __importDefault(require("../../components/AutoComplete/AutoComplete.module.scss"));
-const IconNative_1 = __importDefault(require("../../components/Icon/IconNative"));
-const OptionTypeProvider_1 = __importDefault(require("../../components/Option/OptionTypeProvider"));
-const AutoCompleteContext_1 = require("./AutoCompleteContext");
-const OptionContext_1 = require("../Select/OptionContext");
-const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
-const react_popover_1 = require("@radix-ui/react-popover");
-const HiddenOption_1 = require("../Select/HiddenOption");
-const parts_1 = require("../../components-core/parts");
-const PART_LIST_WRAPPER = "listWrapper";
-function isOptionsExist(options, newOptions) {
-    return newOptions.some((option) => Array.from(options).some((o) => o.value === option.value || o.label === option.label));
-}
-exports.defaultProps = {
-    enabled: true,
-    readOnly: false,
-    autoFocus: false,
-    multi: false,
-    required: false,
-    validationStatus: "none",
-    creatable: false,
-    updateState: constants_1.noop,
-    onDidChange: constants_1.noop,
-    onFocus: constants_1.noop,
-    onBlur: constants_1.noop,
-    onItemCreated: constants_1.noop,
-    initiallyOpen: false,
-};
-exports.AutoComplete = (0, react_1.forwardRef)(function AutoComplete(_a, forwardedRef) {
-    var { 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, onItemCreated = exports.defaultProps.onItemCreated, registerComponentApi, emptyListTemplate, style, className, children, readOnly = exports.defaultProps.readOnly, autoFocus = exports.defaultProps.autoFocus, dropdownHeight, multi = exports.defaultProps.multi, required = exports.defaultProps.required, creatable = exports.defaultProps.creatable, optionRenderer, initiallyOpen = exports.defaultProps.initiallyOpen } = _a, rest = __rest(_a, ["id", "initialValue", "value", "enabled", "placeholder", "updateState", "validationStatus", "onDidChange", "onFocus", "onBlur", "onItemCreated", "registerComponentApi", "emptyListTemplate", "style", "className", "children", "readOnly", "autoFocus", "dropdownHeight", "multi", "required", "creatable", "optionRenderer", "initiallyOpen"]);
-    const [referenceElement, setReferenceElement] = (0, react_1.useState)(null);
-    const inputRef = (0, react_1.useRef)(null);
-    const [open, setOpen] = (0, react_1.useState)(initiallyOpen);
-    const [options, setOptions] = (0, react_1.useState)(new Set());
-    const [inputValue, setInputValue] = (0, react_1.useState)("");
-    const { root } = (0, ThemeContext_1.useTheme)();
-    const [width, setWidth] = (0, react_1.useState)(0);
-    const observer = (0, react_1.useRef)();
-    const [searchTerm, setSearchTerm] = (0, react_1.useState)("");
-    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
-    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]);
-    // Check if we should show creatable item
-    const shouldShowCreatable = (0, react_1.useMemo)(() => {
-        if (!creatable || !searchTerm || searchTerm.trim() === "")
-            return false;
-        // Check if the search term already exists as an option
-        const searchTermExists = Array.from(options).some((option) => option.value === searchTerm || option.label === searchTerm);
-        if (searchTermExists)
-            return false;
-        // Check if it's already selected
-        if (Array.isArray(value) && value.includes(searchTerm))
-            return false;
-        if (value === searchTerm)
-            return false;
-        // Only show creatable if there are no matching filtered options
-        return filteredOptions.length === 0;
-    }, [creatable, searchTerm, options, value, filteredOptions]);
-    // 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]);
-    const selectedValue = (0, react_1.useMemo)(() => {
-        const optionsArray = Array.from(options);
-        if (Array.isArray(value)) {
-            if (value.length === 0)
-                return [];
-            return optionsArray.filter((o) => value.includes(`${o.value}`));
-        }
-        return optionsArray.find((o) => `${o.value}` === `${value}`);
-    }, [value, options]);
-    const toggleOption = (0, react_1.useCallback)((selectedItem) => {
-        var _a;
-        if (selectedItem === "")
-            return;
-        // Check if the option is enabled
-        const option = Array.from(options).find((opt) => opt.value === selectedItem);
-        if (option && option.enabled === false)
-            return;
-        const newSelectedValue = multi
-            ? Array.isArray(value)
-                ? value.includes(selectedItem)
-                    ? value.filter((v) => v !== selectedItem)
-                    : [...value, selectedItem]
-                : [selectedItem]
-            : selectedItem === value
-                ? null
-                : selectedItem;
-        updateState({ value: newSelectedValue });
-        onDidChange(newSelectedValue);
-        if (multi) {
-            setInputValue("");
-            setSearchTerm("");
-            // Keep dropdown open for multi-select
-        }
-        else {
-            // Close dropdown for single select
-            setOpen(false);
-            setSearchTerm("");
-        }
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, [multi, value, updateState, onDidChange, options]);
-    (0, react_1.useEffect)(() => {
-        if (!Array.isArray(selectedValue)) {
-            setInputValue((selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.label) || "");
-            setSearchTerm("");
-        }
-    }, [multi, selectedValue]);
-    // Clear selected value
-    const clearValue = (0, react_1.useCallback)(() => {
-        const newValue = multi ? [] : "";
-        setInputValue("");
-        updateState({ value: newValue });
-        onDidChange(newValue);
-    }, [multi, updateState, onDidChange]);
-    const onOptionAdd = (0, react_1.useCallback)((option) => {
-        setOptions((prev) => {
-            const newSet = new Set(prev);
-            // Remove old version if exists, then add the new one to ensure updates
-            const existing = Array.from(prev).find((opt) => opt.value === option.value);
-            if (existing) {
-                newSet.delete(existing);
-            }
-            newSet.add(option);
-            return newSet;
-        });
-    }, []);
-    const onOptionRemove = (0, react_1.useCallback)((option) => {
-        setOptions((prev) => {
-            const optionsSet = new Set(prev);
-            optionsSet.delete(option);
-            return optionsSet;
-        });
-    }, []);
-    // Combined list of all items (creatable + filtered options)
-    const allItems = (0, react_1.useMemo)(() => {
-        const items = [];
-        if (shouldShowCreatable) {
-            items.push({ type: "creatable", value: searchTerm, label: `Create "${searchTerm}"` });
-        }
-        filteredOptions.forEach((option) => {
-            items.push(Object.assign({ type: "option" }, option));
-        });
-        return items;
-    }, [shouldShowCreatable, searchTerm, filteredOptions]);
-    // Helper functions to find next/previous enabled option
-    const findNextEnabledIndex = (0, react_1.useCallback)((currentIndex) => {
-        for (let i = currentIndex + 1; i < allItems.length; i++) {
-            const item = allItems[i];
-            if (item.type === "creatable" || item.enabled !== false) {
-                return i;
-            }
-        }
-        // Wrap around to beginning
-        for (let i = 0; i <= currentIndex; i++) {
-            const item = allItems[i];
-            if (item.type === "creatable" || item.enabled !== false) {
-                return i;
-            }
-        }
-        return -1;
-    }, [allItems]);
-    const findPreviousEnabledIndex = (0, react_1.useCallback)((currentIndex) => {
-        for (let i = currentIndex - 1; i >= 0; i--) {
-            const item = allItems[i];
-            if (item.type === "creatable" || item.enabled !== false) {
-                return i;
-            }
-        }
-        // Wrap around to end
-        for (let i = allItems.length - 1; i >= currentIndex; i--) {
-            const item = allItems[i];
-            if (item.type === "creatable" || item.enabled !== false) {
-                return i;
-            }
-        }
-        return -1;
-    }, [allItems]);
-    // Reset selected index when options change, but select matching option when dropdown opens
-    (0, react_1.useEffect)(() => {
-        if (!open) {
-            setSelectedIndex(-1);
-        }
-        else if (!multi && open && inputValue) {
-            // For single-select, when dropdown opens and there's an input value, try to find and select the matching option
-            const matchingIndex = allItems.findIndex((item) => {
-                var _a, _b;
-                if (item.type === "creatable")
-                    return false;
-                return (((_a = item.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === inputValue.toLowerCase() ||
-                    ((_b = item.value) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === inputValue.toLowerCase());
-            });
-            if (matchingIndex !== -1) {
-                setSelectedIndex(matchingIndex);
-            }
-            else {
-                setSelectedIndex(-1);
-            }
-        }
-        else if (!multi && open && !inputValue) {
-            setSelectedIndex(-1);
-        }
-        // For multi-select, don't reset selectedIndex when dropdown is open - preserve keyboard navigation
-    }, [allItems, multi, open, inputValue]);
-    // 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 < allItems.length) {
-                    const selectedItem = allItems[selectedIndex];
-                    if (selectedItem.type === "creatable") {
-                        const newOption = { value: searchTerm, label: searchTerm, enabled: true };
-                        onOptionAdd(newOption);
-                        onItemCreated(searchTerm);
-                        toggleOption(searchTerm);
-                    }
-                    else if (selectedItem.enabled !== false) {
-                        // Only toggle if the option is enabled
-                        toggleOption(selectedItem.value);
-                    }
-                }
-                else if (allItems.length === 1) {
-                    // If there's only one item (creatable or regular) and no selection, select it
-                    const singleItem = allItems[0];
-                    if (singleItem.type === "creatable") {
-                        const newOption = { value: searchTerm, label: searchTerm, enabled: true };
-                        onOptionAdd(newOption);
-                        onItemCreated(searchTerm);
-                        toggleOption(searchTerm);
-                    }
-                    else if (singleItem.enabled !== false) {
-                        // Only toggle if the option is enabled
-                        toggleOption(singleItem.value);
-                    }
-                }
-                break;
-            case "Escape":
-                event.preventDefault();
-                setOpen(false);
-                break;
-        }
-    }, [
-        open,
-        selectedIndex,
-        allItems,
-        searchTerm,
-        onOptionAdd,
-        onItemCreated,
-        toggleOption,
-        setOpen,
-        findNextEnabledIndex,
-        findPreviousEnabledIndex,
-    ]);
-    // Render the "empty list" message
-    const emptyListNode = (0, react_1.useMemo)(() => emptyListTemplate !== null && emptyListTemplate !== void 0 ? emptyListTemplate : ((0, jsx_runtime_1.jsxs)("div", { className: AutoComplete_module_scss_1.default.autoCompleteEmpty, children: [(0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "noresult" }), (0, jsx_runtime_1.jsx)("span", { children: "List is empty" })] })), [emptyListTemplate]);
-    // Register component API for external interactions
-    const focus = (0, react_1.useCallback)(() => {
-        var _a;
-        (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, [inputRef]);
-    const setValue = (0, misc_1.useEvent)((newValue) => {
-        updateState({ value: newValue });
-    });
-    (0, react_1.useEffect)(() => {
-        registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
-            focus,
-            setValue,
-        });
-    }, [focus, registerComponentApi, setValue]);
-    const optionContextValue = (0, react_1.useMemo)(() => ({
-        onOptionAdd,
-        onOptionRemove,
-    }), [onOptionAdd, onOptionRemove]);
-    const autoCompleteContextValue = (0, react_1.useMemo)(() => {
-        return {
-            multi,
-            value,
-            onChange: toggleOption,
-            options,
-            inputValue,
-            searchTerm,
-            open,
-            setOpen,
-            setSelectedIndex,
-            optionRenderer,
-        };
-    }, [
-        inputValue,
-        searchTerm,
-        multi,
-        options,
-        toggleOption,
-        value,
-        open,
-        setOpen,
-        setSelectedIndex,
-        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.jsxs)(react_popover_1.Popover, { open: open, onOpenChange: (isOpen) => {
-                            if (readOnly)
-                                return;
-                            setOpen(isOpen);
-                            if (!isOpen) {
-                                // Reset highlighted option when dropdown closes
-                                setSelectedIndex(-1);
-                            }
-                        }, modal: false, children: [(0, jsx_runtime_1.jsx)(react_popover_1.PopoverTrigger, { asChild: true, ref: setReferenceElement, children: (0, jsx_runtime_1.jsxs)("div", { ref: forwardedRef, style: style, "data-part-id": PART_LIST_WRAPPER, className: (0, classnames_1.default)(className, AutoComplete_module_scss_1.default.badgeListWrapper, AutoComplete_module_scss_1.default[validationStatus], {
-                                        [AutoComplete_module_scss_1.default.disabled]: !enabled,
-                                        [AutoComplete_module_scss_1.default.focused]: isFocused,
-                                    }), "aria-expanded": open, onClick: (event) => {
-                                        if (readOnly)
-                                            return;
-                                        // In multi mode, only open the dropdown, don't toggle
-                                        // In single mode, toggle as usual
-                                        if (multi && open) {
-                                            return; // Already open, don't close
-                                        }
-                                        event.stopPropagation();
-                                        setOpen((prev) => !prev);
-                                    }, children: [Array.isArray(selectedValue) && selectedValue.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: AutoComplete_module_scss_1.default.badgeList, children: selectedValue.map((v, index) => ((0, jsx_runtime_1.jsxs)("span", { className: AutoComplete_module_scss_1.default.badge, children: [v === null || v === void 0 ? void 0 : v.label, !readOnly && ((0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "close", size: "sm", onClick: (event) => {
-                                                            event.stopPropagation();
-                                                            toggleOption(v.value);
-                                                        } }))] }, index))) })), (0, jsx_runtime_1.jsxs)("div", { className: AutoComplete_module_scss_1.default.inputWrapper, children: [(0, jsx_runtime_1.jsx)("input", Object.assign({}, rest, { role: "combobox", id: id, ref: inputRef, onFocus: (ev) => {
-                                                        setIsFocused(true);
-                                                        onFocus(ev);
-                                                    }, onBlur: (ev) => {
-                                                        if (inputValue === "" && !multi) {
-                                                            clearValue();
-                                                        }
-                                                        else {
-                                                            if (!Array.isArray(selectedValue) && selectedValue) {
-                                                                setInputValue(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.label);
-                                                            }
-                                                            else {
-                                                                setInputValue("");
-                                                            }
-                                                        }
-                                                        onBlur(ev);
-                                                        setIsFocused(false);
-                                                    }, onKeyDown: (event) => {
-                                                        if (readOnly)
-                                                            return;
-                                                        // Handle opening dropdown
-                                                        if (event.key === "ArrowDown" && !open) {
-                                                            setOpen(true);
-                                                            return;
-                                                        }
-                                                        // Handle keyboard navigation when dropdown is open
-                                                        if (open) {
-                                                            handleKeyDown(event);
-                                                        }
-                                                        else if (event.key === "Enter") {
-                                                            setOpen(true);
-                                                        }
-                                                    }, "data-part-id": parts_1.PART_INPUT, readOnly: readOnly, autoFocus: autoFocus, "aria-autocomplete": "list", value: inputValue, disabled: !enabled, onChange: (event) => {
-                                                        setOpen(true);
-                                                        setInputValue(event.target.value);
-                                                        setSearchTerm(event.target.value);
-                                                    }, placeholder: !readOnly ? placeholder : "", className: AutoComplete_module_scss_1.default.commandInput })), (0, jsx_runtime_1.jsxs)("div", { className: AutoComplete_module_scss_1.default.actions, children: [(value === null || value === void 0 ? void 0 : value.length) > 0 && enabled && !readOnly && ((0, jsx_runtime_1.jsx)("span", { className: AutoComplete_module_scss_1.default.action, onClick: (event) => {
-                                                                event.stopPropagation();
-                                                                clearValue();
-                                                            }, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "close" }) })), (0, jsx_runtime_1.jsx)("span", { className: AutoComplete_module_scss_1.default.action, onClick: () => {
-                                                                var _a;
-                                                                if (readOnly)
-                                                                    return;
-                                                                setOpen(!open);
-                                                                // Focus the input after opening dropdown
-                                                                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                                                            }, children: (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_popover_1.PopoverContent, { style: { width, height: dropdownHeight }, className: AutoComplete_module_scss_1.default.popoverContent, align: "start", onOpenAutoFocus: (e) => e.preventDefault(), children: (0, jsx_runtime_1.jsxs)("div", { role: "listbox", className: AutoComplete_module_scss_1.default.commandList, style: { height: dropdownHeight }, children: [filteredOptions.length === 0 && !shouldShowCreatable && ((0, jsx_runtime_1.jsx)("div", { children: emptyListNode })), shouldShowCreatable && ((0, jsx_runtime_1.jsx)(CreatableItem, { onNewItem: onItemCreated, isHighlighted: selectedIndex === 0 })), (0, jsx_runtime_1.jsx)("div", { children: filteredOptions.map(({ value, label, enabled, keywords }, index) => {
-                                                    const itemIndex = shouldShowCreatable ? index + 1 : index;
-                                                    return ((0, jsx_runtime_1.jsx)(AutoCompleteOption, { value: value, label: label, enabled: enabled, keywords: keywords, readOnly: readOnly, isHighlighted: selectedIndex === itemIndex, itemIndex: itemIndex }, value));
-                                                }) })] }) }) }))] }), children] }) }) }));
-});
-function CreatableItem({ onNewItem, isHighlighted = false }) {
-    const { value, options, searchTerm, onChange, setOpen, setSelectedIndex, multi } = (0, AutoCompleteContext_1.useAutoComplete)();
-    const { onOptionAdd } = (0, OptionContext_1.useOption)();
-    if (isOptionsExist(options, [{ value: searchTerm, label: searchTerm }]) ||
-        (Array.isArray(value) && (value === null || value === void 0 ? void 0 : value.find((s) => s === searchTerm))) ||
-        searchTerm === value) {
-        return (0, jsx_runtime_1.jsx)("span", { style: { display: "none" } });
-    }
-    const handleClick = () => {
-        const newOption = { value: searchTerm, label: searchTerm, enabled: true };
-        onOptionAdd(newOption);
-        onNewItem === null || onNewItem === void 0 ? void 0 : onNewItem(searchTerm);
-        onChange(searchTerm);
-        // Only close dropdown for single select mode
-        if (!multi) {
-            setOpen(false);
-        }
-    };
-    const Item = ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(AutoComplete_module_scss_1.default.autoCompleteOption, {
-            [AutoComplete_module_scss_1.default.highlighted]: isHighlighted,
-        }), onMouseDown: (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-        }, onMouseEnter: () => {
-            if (setSelectedIndex) {
-                setSelectedIndex(0); // CreatableItem is always at index 0
-            }
-        }, onClick: handleClick, role: "option", "aria-selected": false, children: `Create "${searchTerm}"` }));
-    // For normal creatable
-    if (searchTerm.length > 0) {
-        return Item;
-    }
-    return (0, jsx_runtime_1.jsx)("span", { style: { display: "none" } });
-}
-function AutoCompleteOption(option) {
-    const { value, label, enabled = true, readOnly, children, isHighlighted = false, itemIndex, } = option;
-    const id = (0, react_1.useId)();
-    const { value: selectedValue, onChange, multi, setOpen, setSelectedIndex, optionRenderer, } = (0, AutoCompleteContext_1.useAutoComplete)();
-    const selected = multi ? selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.includes(value) : selectedValue === value;
-    const handleClick = () => {
-        if (!readOnly && enabled) {
-            onChange(value);
-            // Only close dropdown for single select mode
-            if (!multi) {
-                setOpen(false);
-            }
-        }
-    };
-    return ((0, jsx_runtime_1.jsx)("div", { id: id, role: "option", "aria-disabled": !enabled, "aria-selected": selected, className: (0, classnames_1.default)(AutoComplete_module_scss_1.default.autoCompleteOption, {
-            [AutoComplete_module_scss_1.default.disabledOption]: !enabled,
-            [AutoComplete_module_scss_1.default.highlighted]: isHighlighted,
-        }), onMouseDown: (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-        }, onMouseEnter: () => {
-            if (itemIndex !== undefined && setSelectedIndex && enabled) {
-                setSelectedIndex(itemIndex);
-            }
-        }, onClick: handleClick, 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" })] })) }));
-}

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

@@ -1,55 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.avatarComponentRenderer = exports.AvatarMd = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Avatar_module_scss_1 = __importDefault(require("./Avatar.module.scss"));
-const renderers_1 = require("../../components-core/renderers");
-const themeVars_1 = require("../../components-core/theming/themeVars");
-const abstractions_1 = require("../../components/abstractions");
-const AvatarNative_1 = require("./AvatarNative");
-const metadata_helpers_1 = require("../metadata-helpers");
-const COMP = "Avatar";
-exports.AvatarMd = (0, metadata_helpers_1.createMetadata)({
-    status: "stable",
-    description: "`Avatar` displays a user or entity's profile picture as a circular image, " +
-        "with automatic fallback to initials when no image is provided. It's commonly " +
-        "used in headers, user lists, comments, and anywhere you need to represent a " +
-        "person or organization.",
-    props: {
-        size: {
-            description: `This property defines the display size of the ${COMP}.`,
-            availableValues: abstractions_1.sizeMd,
-            valueType: "string",
-            defaultValue: AvatarNative_1.defaultProps.size,
-        },
-        name: {
-            description: `This property sets the name value the ${COMP} uses to display initials. If neither ` +
-                "this property nor \`url\` is defined, an empty avatar is displayed.",
-            valueType: "string",
-        },
-        url: {
-            description: `This property specifies the URL of the image to display in the ${COMP}. ` +
-                "If neither this property nor \`name\` is defined, an empty avatar is displayed.",
-            valueType: "string",
-        },
-    },
-    events: {
-        click: (0, metadata_helpers_1.d)("This event is triggered when the avatar is clicked."),
-    },
-    themeVars: (0, themeVars_1.parseScssVar)(Avatar_module_scss_1.default.themeVars),
-    defaultThemeVars: {
-        [`borderRadius-${COMP}`]: "4px",
-        [`boxShadow-${COMP}`]: "inset 0 0 0 1px rgba(4,32,69,0.1)",
-        [`textColor-${COMP}`]: "$textColor-secondary",
-        [`fontWeight-${COMP}`]: "$fontWeight-bold",
-        [`border-${COMP}`]: "0px solid $color-surface-400A80",
-        [`backgroundColor-${COMP}`]: "$color-surface-100",
-    },
-});
-exports.avatarComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.AvatarMd, ({ node, extractValue, lookupEventHandler, className, extractResourceUrl }) => {
-    var _a;
-    return ((0, jsx_runtime_1.jsx)(AvatarNative_1.Avatar, { className: className, size: (_a = node.props) === null || _a === void 0 ? void 0 : _a.size, url: node.props.url ? extractResourceUrl(node.props.url) : undefined, name: extractValue(node.props.name), onClick: lookupEventHandler("click") }));
-});