xmlui 0.7.14 → 0.7.16

package/dist/scripts/src/components/RealTimeAdapter/RealTimeAdapterNative.js

@@ -0,0 +1,131 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RealTimeAdapter = RealTimeAdapter;
+const react_1 = require("react");
+const RestApiProxy_1 = __importDefault(require("@components-core/RestApiProxy"));
+const misc_1 = require("@components-core/utils/misc");
+const AppContext_1 = require("@components-core/AppContext");
+class PollClient {
+    constructor(url, appContext) {
+        this.url = url;
+        this.appContext = appContext;
+        this.handlers = [];
+        this.tries = 0;
+        this.polling = false;
+        this.abortController = new AbortController();
+    }
+    refreshAppContext(appContext) {
+        this.appContext = appContext;
+    }
+    poll(abortSignal) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.polling || abortSignal.aborted) {
+                return;
+            }
+            try {
+                const response = yield new RestApiProxy_1.default(this.appContext).execute({
+                    abortSignal,
+                    operation: {
+                        url: this.url,
+                        method: "get",
+                        headers: {
+                            "Cache-Control": "no-cache, no-store",
+                        },
+                        queryParams: {
+                            lastEventId: this.lastEventId,
+                        },
+                    },
+                    resolveBindingExpressions: true,
+                });
+                this.eventArrived(response);
+                yield this.poll(abortSignal);
+            }
+            catch (e) {
+                if (this.tries < 100) {
+                    this.tries++;
+                    yield (0, misc_1.delay)(this.tries * 100); //TODO we should do some exponential fallback here
+                    yield this.poll(abortSignal);
+                }
+                else {
+                    this.stopPoll();
+                }
+            }
+        });
+    }
+    startPoll() {
+        if (this.polling) {
+            return;
+        }
+        this.polling = true;
+        this.tries = 0;
+        this.abortController = new AbortController();
+        // console.log("poll client: start polling", this.handlers);
+        this.poll(this.abortController.signal);
+    }
+    stopPoll() {
+        this.polling = false;
+        this.abortController.abort();
+        // console.log("poll client: stop polling");
+    }
+    eventArrived(response) {
+        if (!response) {
+            return;
+        }
+        let events = [response];
+        if (Array.isArray(response)) {
+            events = response;
+        }
+        this.lastEventId = events[events.length - 1].id;
+        this.handlers.forEach((handler) => {
+            handler(events);
+        });
+    }
+    subscribe(handler) {
+        // console.log("subscribe", handler);
+        this.handlers.push(handler);
+        this.startPoll();
+    }
+    unsubscribe(handler) {
+        // console.log("unsubscribe", handler);
+        this.handlers = this.handlers.filter((existingHandler) => handler !== existingHandler);
+        if (!this.handlers.length) {
+            this.stopPoll();
+        }
+    }
+}
+const clients = {};
+function createOrGetPollClient(url, appContext) {
+    if (!clients[url]) {
+        clients[url] = new PollClient(url, appContext);
+    }
+    clients[url].refreshAppContext(appContext);
+    return clients[url];
+}
+function RealTimeAdapter({ url, onEvent }) {
+    const appContext = (0, AppContext_1.useAppContext)();
+    (0, react_1.useEffect)(() => {
+        const pollClient = createOrGetPollClient(url, appContext);
+        const handler = (events) => {
+            events.forEach((event) => {
+                onEvent === null || onEvent === void 0 ? void 0 : onEvent(event);
+            });
+        };
+        pollClient.subscribe(handler);
+        return () => {
+            pollClient.unsubscribe(handler);
+        };
+    }, [appContext, onEvent, url]);
+    return null;
+}

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.redirectRenderer = exports.RedirectMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const renderers_1 = require("@components-core/renderers");
+const react_1 = require("@remix-run/react");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const component_utils_1 = require("../component-utils");
+const COMP = "Redirect";
+exports.RedirectMd = (0, ComponentDefs_1.createMetadata)({
+    description: `\`${COMP}\` is a component that immediately redirects the browser to the URL in its ` +
+        `\`to\` property when it gets visible (its \`when\` property gets \`true\`). The ` +
+        `redirection works only within the app.`,
+    props: {
+        to: (0, ComponentDefs_1.d)(`This property defines the URL to which this component is about to redirect requests.`),
+    },
+});
+exports.redirectRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.RedirectMd, ({ node, extractValue }) => {
+    return (0, jsx_runtime_1.jsx)(react_1.Navigate, { to: (0, component_utils_1.createUrlWithQueryParams)(extractValue(node.props.to)) });
+});

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OptionContext = void 0;
+exports.useOption = useOption;
+const react_1 = require("react");
+exports.OptionContext = (0, react_1.createContext)({
+    onOptionAdd: () => { },
+    onOptionRemove: () => { },
+});
+function useOption() {
+    return (0, react_1.useContext)(exports.OptionContext);
+}

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

@@ -0,0 +1,98 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.selectComponentRenderer = exports.SelectMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const renderers_1 = require("@components-core/renderers");
+const Select_module_scss_1 = __importDefault(require("@components/Select/Select.module.scss"));
+const themeVars_1 = require("@components-core/theming/themeVars");
+const metadata_helpers_1 = require("@components/metadata-helpers");
+const SelectNative_1 = require("@components/Select/SelectNative");
+const container_helpers_1 = require("@components/container-helpers");
+const COMP = "Select";
+exports.SelectMd = (0, ComponentDefs_1.createMetadata)({
+    description: "Provides a dropdown with a list of options to choose from.",
+    status: "experimental",
+    props: {
+        placeholder: (0, metadata_helpers_1.dPlaceholder)(),
+        initialValue: (0, metadata_helpers_1.dInitialValue)(),
+        maxLength: (0, metadata_helpers_1.dMaxLength)(),
+        autoFocus: (0, metadata_helpers_1.dAutoFocus)(),
+        required: (0, metadata_helpers_1.dRequired)(),
+        readOnly: (0, metadata_helpers_1.dReadonly)(),
+        enabled: (0, metadata_helpers_1.dEnabled)(),
+        validationStatus: (0, metadata_helpers_1.dValidationStatus)(),
+        label: (0, metadata_helpers_1.dLabel)(),
+        labelPosition: (0, metadata_helpers_1.dLabelPosition)("top"),
+        labelWidth: (0, metadata_helpers_1.dLabelWidth)(COMP),
+        labelBreak: (0, metadata_helpers_1.dLabelBreak)(COMP),
+        optionLabelTemplate: (0, metadata_helpers_1.dComponent)(`This property allows replacing the default template to display an option in the dropdown list.`),
+        valueTemplate: (0, metadata_helpers_1.dComponent)(`This property allows replacing the default template to display a selected value when ` +
+            `multiple selections (\`multiSelect\` is \`true\`) are enabled.`),
+        dropdownHeight: (0, ComponentDefs_1.d)("This property sets the height of the dropdown list."),
+        emptyListTemplate: (0, ComponentDefs_1.d)(`This optional property provides the ability to customize what is displayed when the ` +
+            `list of options is empty.`),
+        multiSelect: (0, metadata_helpers_1.dMulti)(),
+        searchable: (0, ComponentDefs_1.d)(`This property enables the search functionality in the dropdown list.`),
+    },
+    events: {
+        gotFocus: (0, metadata_helpers_1.dGotFocus)(COMP),
+        lostFocus: (0, metadata_helpers_1.dLostFocus)(COMP),
+        didChange: (0, metadata_helpers_1.dDidChange)(COMP),
+    },
+    apis: {
+        focus: (0, metadata_helpers_1.dFocus)(COMP),
+        setValue: (0, metadata_helpers_1.dSetValueApi)(),
+        value: (0, metadata_helpers_1.dValue)(),
+    },
+    contextVars: {
+        $item: (0, ComponentDefs_1.d)(`This property represents the value of an item in the dropdown list.`),
+        $itemContext: (0, ComponentDefs_1.d)(`This property provides a \`removeItem\` method to delete the particular value from the selection.`),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(Select_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        [`color-bg-menu-${COMP}`]: "$color-bg-primary",
+        [`shadow-menu-${COMP}`]: "$shadow-md",
+        [`radius-menu-${COMP}`]: "$radius",
+        [`thickness-border-menu-${COMP}`]: "1px",
+        [`color-border-menu-${COMP}`]: "$color-border",
+        [`color-bg-item-${COMP}`]: "$color-bg-dropdown-item",
+        [`color-bg-item-${COMP}--hover`]: "$color-bg-dropdown-item--active",
+        [`color-bg-item-${COMP}--active`]: "$color-bg-dropdown-item--active",
+        [`min-height-Input`]: "39px",
+        [`color-bg-${COMP}-badge`]: "$color-primary-500",
+        [`font-size-${COMP}-badge`]: "$font-size-small",
+        [`padding-horizontal-${COMP}-badge`]: "$space-1",
+        [`padding-vertical-${COMP}-badge`]: "$space-1",
+        [`opacity-text-item-${COMP}--disabled`]: "0.5",
+        [`opacity-${COMP}--disabled`]: "0.5",
+        light: {
+            [`color-bg-${COMP}-badge--hover`]: "$color-primary-400",
+            [`color-bg-${COMP}-badge--active`]: "$color-primary-500",
+            [`color-text-item-${COMP}--disabled`]: "$color-surface-200",
+            [`color-text-${COMP}-badge`]: "$color-surface-50",
+        },
+        dark: {
+            [`color-bg-${COMP}-badge--hover`]: "$color-primary-600",
+            [`color-bg-${COMP}-badge--active`]: "$color-primary-500",
+            [`color-text-${COMP}-badge`]: "$color-surface-50",
+            [`color-text-item-${COMP}--disabled`]: "$color-surface-800",
+        },
+    },
+});
+exports.selectComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.SelectMd, ({ node, state, updateState, extractValue, renderChild, lookupEventHandler, layoutCss, registerComponentApi, }) => {
+    return ((0, jsx_runtime_1.jsx)(SelectNative_1.Select, { multiSelect: extractValue.asOptionalBoolean(node.props.multiSelect), style: layoutCss, updateState: updateState, searchable: extractValue.asOptionalBoolean(node.props.searchable), initialValue: extractValue(node.props.initialValue), value: state === null || state === void 0 ? void 0 : state.value, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue.asOptionalString(node.props.placeholder), validationStatus: extractValue(node.props.validationStatus), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, emptyListTemplate: renderChild(node.props.emptyListTemplate), dropdownHeight: extractValue(node.props.dropdownHeight), label: extractValue(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required), optionLabelRenderer: node.props.optionLabelTemplate
+            ? (item) => {
+                return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.optionLabelTemplate, item: item, renderChild: renderChild }));
+            }
+            : undefined, valueRenderer: node.props.valueTemplate
+            ? (item, removeItem) => {
+                return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { contextVars: {
+                        $itemContext: { removeItem },
+                    }, node: node.props.valueTemplate, item: item, renderChild: renderChild }));
+            }
+            : undefined, children: renderChild(node.children) }));
+});

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

@@ -0,0 +1,9 @@
+"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)(null);
+function useSelect() {
+    return (0, react_1.useContext)(exports.SelectContext);
+}

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

@@ -0,0 +1,213 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComboboxOption = exports.Select = void 0;
+exports.HiddenOption = HiddenOption;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = __importStar(require("react"));
+const constants_1 = require("@components-core/constants");
+const react_select_1 = require("@radix-ui/react-select");
+const IconNative_1 = __importDefault(require("@components/Icon/IconNative"));
+const SelectContext_1 = require("@components/Select/SelectContext");
+const Select_module_scss_1 = __importDefault(require("./Select.module.scss"));
+const classnames_1 = __importDefault(require("classnames"));
+const ThemeContext_1 = require("@components-core/theming/ThemeContext");
+const OptionTypeProvider_1 = __importDefault(require("@components/Option/OptionTypeProvider"));
+const cmdk_1 = require("cmdk");
+const react_popover_1 = require("@radix-ui/react-popover");
+const misc_1 = require("@components-core/utils/misc");
+const OptionContext_1 = require("@components/Select/OptionContext");
+const ItemWithLabel_1 = require("@components/FormItem/ItemWithLabel");
+const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
+const SimpleSelect = (0, react_1.forwardRef)(function SimpleSelect(props, forwardedRef) {
+    const { root } = (0, ThemeContext_1.useTheme)();
+    const { enabled, onBlur, autoFocus, onValueChange, validationStatus, children, value, height, style, placeholder, id, triggerRef, onFocus, options, } = props;
+    const ref = forwardedRef ? (0, react_compose_refs_1.composeRefs)(triggerRef, forwardedRef) : triggerRef;
+    const stringValue = value + "";
+    const onValChange = (0, react_2.useCallback)((val) => {
+        var _a;
+        const valueWithMatchingType = (_a = Array.from(options.values()).find((o) => o.value + "" === val)) === null || _a === void 0 ? void 0 : _a.value;
+        onValueChange(valueWithMatchingType);
+    }, [onValueChange, options]);
+    return ((0, jsx_runtime_1.jsx)(OptionTypeProvider_1.default, { Component: SelectOption, children: (0, jsx_runtime_1.jsxs)(react_select_1.Root, { value: stringValue, onValueChange: onValChange, children: [(0, jsx_runtime_1.jsxs)(react_select_1.Trigger, { id: id, style: style, onFocus: onFocus, onBlur: onBlur, disabled: !enabled, className: (0, classnames_1.default)(Select_module_scss_1.default.selectTrigger, {
+                        [Select_module_scss_1.default.error]: validationStatus === "error",
+                        [Select_module_scss_1.default.warning]: validationStatus === "warning",
+                        [Select_module_scss_1.default.valid]: validationStatus === "valid",
+                    }), ref: ref, autoFocus: autoFocus, children: [(0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.selectValue, children: (0, jsx_runtime_1.jsx)(react_select_1.Value, { placeholder: placeholder }) }), (0, jsx_runtime_1.jsx)(react_select_1.Icon, { asChild: true, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" }) })] }), (0, jsx_runtime_1.jsx)(react_select_1.Portal, { container: root, children: (0, jsx_runtime_1.jsxs)(react_select_1.Content, { className: Select_module_scss_1.default.selectContent, position: "popper", style: { height: height }, children: [(0, jsx_runtime_1.jsx)(react_select_1.ScrollUpButton, { className: Select_module_scss_1.default.selectScrollUpButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevronup" }) }), (0, jsx_runtime_1.jsx)(react_select_1.Viewport, { className: (0, classnames_1.default)(Select_module_scss_1.default.selectViewport), children: children }), (0, jsx_runtime_1.jsx)(react_select_1.ScrollDownButton, { className: Select_module_scss_1.default.selectScrollDownButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" }) })] }) })] }) }));
+});
+exports.Select = (0, react_1.forwardRef)(function Select({ id, initialValue, value, enabled = true, placeholder, updateState = constants_1.noop, validationStatus = "none", onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, emptyListTemplate, optionLabelRenderer, valueRenderer, style, dropdownHeight, children, autoFocus = false, searchable = false, multiSelect = false, label, labelPosition, labelWidth, labelBreak, required = false, }, ref) {
+    var _a;
+    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 { root } = (0, ThemeContext_1.useTheme)();
+    const [options, setOptions] = (0, react_2.useState)(new Set());
+    // Set initial state based on the initialValue prop
+    (0, react_2.useEffect)(() => {
+        if (initialValue !== undefined) {
+            updateState({ value: initialValue }, { initial: true });
+        }
+    }, [initialValue, updateState]);
+    // Observe the size of the reference element
+    (0, react_2.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_2.useCallback)((selectedValue) => {
+        const newSelectedValue = multiSelect
+            ? Array.isArray(value)
+                ? value.includes(selectedValue)
+                    ? value.filter((v) => v !== selectedValue)
+                    : [...value, selectedValue]
+                : [selectedValue]
+            : selectedValue === value
+                ? null
+                : selectedValue;
+        updateState({ value: newSelectedValue });
+        onDidChange(newSelectedValue);
+        setOpen(false);
+    }, [multiSelect, value, updateState, onDidChange]);
+    // Clear selected value
+    const clearValue = (0, react_2.useCallback)(() => {
+        const newValue = multiSelect ? [] : "";
+        updateState({ value: newValue });
+        onDidChange(newValue);
+    }, [multiSelect, updateState, onDidChange]);
+    // Register component API for external interactions
+    const focus = (0, react_2.useCallback)(() => {
+        referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.focus();
+    }, [referenceElement]);
+    const setValue = (0, misc_1.useEvent)((newValue) => {
+        toggleOption(newValue);
+    });
+    (0, react_2.useEffect)(() => {
+        registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
+            focus,
+            setValue,
+        });
+    }, [focus, registerComponentApi, setValue]);
+    // 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 onOptionRemove = (0, react_2.useCallback)((option) => {
+        setOptions((prev) => {
+            const optionsSet = new Set(prev);
+            optionsSet.delete(option);
+            return optionsSet;
+        });
+    }, []);
+    const optionContextValue = (0, react_2.useMemo)(() => ({
+        onOptionAdd,
+        onOptionRemove,
+    }), [onOptionAdd, onOptionRemove]);
+    const selectContextValue = (0, react_2.useMemo)(() => ({
+        multiSelect,
+        value,
+        optionLabelRenderer,
+        onChange: toggleOption,
+    }), [multiSelect, toggleOption, value, optionLabelRenderer]);
+    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, children: [children, (0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { ref: ref, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, children: (0, jsx_runtime_1.jsxs)(react_popover_1.Popover, { open: open, onOpenChange: setOpen, modal: false, children: [(0, jsx_runtime_1.jsx)(react_popover_1.PopoverTrigger, { asChild: true, children: (0, jsx_runtime_1.jsxs)("button", { id: id, ref: setReferenceElement, onFocus: onFocus, onBlur: onBlur, disabled: !enabled, "aria-expanded": open, onClick: () => setOpen((prev) => !prev), className: (0, classnames_1.default)(Select_module_scss_1.default.selectTrigger, Select_module_scss_1.default[validationStatus], {
+                                            [Select_module_scss_1.default.disabled]: !enabled,
+                                            [Select_module_scss_1.default.multi]: multiSelect,
+                                        }), autoFocus: autoFocus, children: [multiSelect ? (Array.isArray(value) && value.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.badgeListContainer, children: (0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.badgeList, children: value.map((v) => {
+                                                        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));
+                                                    }) }) })) : ((0, jsx_runtime_1.jsx)("span", { className: Select_module_scss_1.default.placeholder, children: placeholder || "" }))) : value !== undefined && value !== null ? ((0, jsx_runtime_1.jsx)("div", { children: (_a = Array.from(options).find((o) => o.value === value)) === null || _a === void 0 ? void 0 : _a.label })) : ((0, jsx_runtime_1.jsx)("span", { className: Select_module_scss_1.default.placeholder, children: placeholder || "" })), (0, jsx_runtime_1.jsxs)("div", { className: Select_module_scss_1.default.actions, children: [multiSelect && Array.isArray(value) && value.length > 0 && ((0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "close", onClick: (event) => {
+                                                            event.stopPropagation();
+                                                            clearValue();
+                                                        } })), (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" })] })] }) }), (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: Select_module_scss_1.default.selectContent, children: (0, jsx_runtime_1.jsxs)(cmdk_1.Command, { className: Select_module_scss_1.default.command, shouldFilter: searchable, filter: (value, search, keywords) => {
+                                                const extendedValue = value + " " + keywords.join(" ");
+                                                if (extendedValue.toLowerCase().includes(search.toLowerCase()))
+                                                    return 1;
+                                                return 0;
+                                            }, children: [searchable ? ((0, jsx_runtime_1.jsxs)("div", { className: Select_module_scss_1.default.commandInputContainer, children: [(0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "search" }), (0, jsx_runtime_1.jsx)(cmdk_1.CommandInput, { className: (0, classnames_1.default)(Select_module_scss_1.default.commandInput), placeholder: "Search..." })] })) : (
+                                                // https://github.com/pacocoursey/cmdk/issues/322#issuecomment-2444703817
+                                                (0, jsx_runtime_1.jsx)("button", { autoFocus: true, "aria-hidden": "true", className: Select_module_scss_1.default.srOnly })), (0, jsx_runtime_1.jsxs)(cmdk_1.CommandList, { className: Select_module_scss_1.default.commandList, children: [Array.from(options).map(({ value, label, enabled, keywords }) => ((0, jsx_runtime_1.jsx)(exports.ComboboxOption, { value: value, label: label, enabled: enabled, keywords: keywords }, value))), (0, jsx_runtime_1.jsx)(cmdk_1.CommandEmpty, { children: emptyListNode })] })] }) }) })] }) })] })) : ((0, jsx_runtime_1.jsx)(SimpleSelect, { ref: ref, value: value, options: options, onValueChange: toggleOption, id: id, style: style, onFocus: onFocus, onBlur: onBlur, enabled: enabled, validationStatus: validationStatus, triggerRef: setReferenceElement, autoFocus: autoFocus, placeholder: placeholder, height: dropdownHeight, children: children || emptyListNode })) }) }));
+});
+exports.ComboboxOption = (0, react_1.forwardRef)(function Combobox(option, forwardedRef) {
+    const id = (0, react_2.useId)();
+    const { label, value, enabled = true, keywords } = option;
+    const { value: selectedValue, onChange, multi, optionLabelRenderer } = (0, SelectContext_1.useSelect)();
+    const selected = Array.isArray(selectedValue) && multi ? selectedValue.includes(value) : selectedValue === value;
+    return ((0, jsx_runtime_1.jsxs)(cmdk_1.CommandItem, { id: id, ref: forwardedRef, disabled: !enabled, value: value, className: Select_module_scss_1.default.multiComboboxOption, onSelect: () => {
+            onChange(value);
+        }, "data-state": selected ? "checked" : undefined, keywords: keywords, children: [optionLabelRenderer ? optionLabelRenderer({ label, value }) : label, selected && (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "checkmark" })] }, id));
+});
+function HiddenOption(option) {
+    const { onOptionRemove, onOptionAdd } = (0, OptionContext_1.useOption)();
+    const [node, setNode] = (0, react_2.useState)(null);
+    const opt = (0, react_2.useMemo)(() => {
+        var _a, _b;
+        return Object.assign(Object.assign({}, option), { labelText: (_a = node === null || node === void 0 ? void 0 : node.textContent) !== null && _a !== void 0 ? _a : "", keywords: [(_b = node === null || node === void 0 ? void 0 : node.textContent) !== null && _b !== void 0 ? _b : ""] });
+    }, [option, node]);
+    (0, react_2.useEffect)(() => {
+        onOptionAdd(opt);
+        return () => onOptionRemove(opt);
+    }, [opt, onOptionAdd, onOptionRemove]);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: (el) => setNode(el), style: { display: "none" }, children: option.label }));
+}
+const SelectOption = react_2.default.forwardRef((option, ref) => {
+    const { value, label, enabled = true } = option;
+    const { onOptionRemove, onOptionAdd } = (0, OptionContext_1.useOption)();
+    const { optionLabelRenderer } = (0, SelectContext_1.useSelect)();
+    (0, react_2.useLayoutEffect)(() => {
+        onOptionAdd(option);
+        return () => onOptionRemove(option);
+    }, [option, onOptionAdd, onOptionRemove]);
+    return ((0, jsx_runtime_1.jsxs)(react_select_1.Item, { ref: ref, className: Select_module_scss_1.default.selectItem, value: value + "", disabled: !enabled, children: [(0, jsx_runtime_1.jsx)(react_select_1.ItemText, { children: optionLabelRenderer ? optionLabelRenderer({ value, label }) : label }), (0, jsx_runtime_1.jsx)("span", { className: Select_module_scss_1.default.selectItemIndicator, children: (0, jsx_runtime_1.jsx)(react_select_1.ItemIndicator, { children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "checkmark" }) }) })] }));
+});
+SelectOption.displayName = "SelectOption";

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.selectionStoreComponentRenderer = exports.SelectionStoreMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const renderers_1 = require("@components-core/renderers");
+const SelectionStoreNative_1 = require("./SelectionStoreNative");
+const COMP = "SelectionStore";
+exports.SelectionStoreMd = (0, ComponentDefs_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: (0, ComponentDefs_1.d)(`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"\`.`),
+    },
+});
+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

@@ -0,0 +1,94 @@
+"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 = 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");
+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 = "id", children, selectedItems = constants_1.EMPTY_ARRAY, registerComponentApi = lodash_es_1.noop, }) => {
+    const [items, setItems] = (0, react_1.useState)(selectedItems);
+    const valueInitializedRef = (0, react_1.useRef)(false);
+    const refreshSelection = (0, misc_1.useEvent)((allItems = constants_1.EMPTY_ARRAY) => {
+        setItems(allItems);
+        let value = allItems.filter((item) => !!selectedItems.find((si) => si[idKey] === item[idKey]));
+        if (!(0, lodash_es_1.isEqual)(selectedItems, value) || !valueInitializedRef.current) {
+            valueInitializedRef.current = true;
+            updateState({
+                value: value,
+            });
+        }
+    });
+    const setSelectedRowIds = (0, misc_1.useEvent)((rowIds) => {
+        updateState({ value: items.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);
+}