xmlui 0.4.0

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

@@ -0,0 +1,144 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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.radioGroupRenderer = exports.radioGroupOptionRenderer = exports.RadioGroupOption = exports.RadioGroup = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const RadioGroup_module_scss_1 = __importDefault(require("./RadioGroup.module.scss"));
+const renderers_1 = require("@components-core/renderers");
+const constants_1 = require("@components-core/constants");
+const input_abstractions_1 = require("@components/Input/input-abstractions");
+const InnerRadioGroup = __importStar(require("@radix-ui/react-radio-group"));
+const descriptorHelper_1 = require("@components-core/descriptorHelper");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const misc_1 = require("@components-core/utils/misc");
+// =====================================================================================================================
+// React RadioGroup component implementation
+const RadioGroupValidationStatusContext = (0, react_1.createContext)({
+    status: "none",
+});
+const RadioGroup = ({ id, value = "", initialValue = "", enabled = true, validationStatus = "none", updateState = constants_1.noop, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, children, registerComponentApi, }) => {
+    const [focused, setFocused] = react_1.default.useState(false);
+    // --- Initialize the related field with the input's initial value
+    (0, react_1.useEffect)(() => {
+        updateState({ value: initialValue });
+    }, [initialValue, updateState]);
+    // --- Handle the value change events for this input
+    const updateValue = (0, react_1.useCallback)((value) => {
+        updateState({ value });
+        onDidChange(value);
+    }, [onDidChange, updateState]);
+    const onInputChange = (0, react_1.useCallback)((value) => {
+        updateValue(value);
+    }, [updateValue]);
+    // --- Manage obtaining and losing the focus
+    const handleOnFocus = (0, react_1.useCallback)(() => {
+        setFocused(true);
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    }, [onFocus]);
+    const handleOnBlur = (0, react_1.useCallback)(() => {
+        setFocused(false);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    }, [onBlur]);
+    const setValue = (0, misc_1.useEvent)((val) => {
+        updateValue(val);
+    });
+    (0, react_1.useEffect)(() => {
+        registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
+            //focus,
+            setValue,
+        });
+    }, [/* focus, */ registerComponentApi, setValue]);
+    const contextValue = (0, react_1.useMemo)(() => {
+        return { value, status: validationStatus };
+    }, [value, validationStatus]);
+    return ((0, jsx_runtime_1.jsx)(RadioGroupValidationStatusContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)(InnerRadioGroup.Root, { id: id, onBlur: handleOnBlur, onFocus: handleOnFocus, onValueChange: onInputChange, value: value, disabled: !enabled, className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.radioGroupContainer, {
+                [RadioGroup_module_scss_1.default.focused]: focused,
+                [RadioGroup_module_scss_1.default.disabled]: !enabled,
+            }), children: children }) }));
+};
+exports.RadioGroup = RadioGroup;
+const RadioGroupOption = ({ value, label, enabled = true }) => {
+    const id = (0, react_1.useId)();
+    const validationContext = (0, react_1.useContext)(RadioGroupValidationStatusContext);
+    const statusStyles = {
+        [RadioGroup_module_scss_1.default.disabled]: !enabled,
+        [RadioGroup_module_scss_1.default.error]: value === validationContext.value && validationContext.status === "error",
+        [RadioGroup_module_scss_1.default.warning]: value === validationContext.value && validationContext.status === "warning",
+        [RadioGroup_module_scss_1.default.valid]: value === validationContext.value && validationContext.status === "valid",
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: RadioGroup_module_scss_1.default.radioOptionContainer, children: [(0, jsx_runtime_1.jsx)(InnerRadioGroup.Item, { className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.radioOption, statusStyles), value: value, disabled: !enabled, id: id, children: (0, jsx_runtime_1.jsx)(InnerRadioGroup.Indicator, { className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.indicator, statusStyles) }) }), (0, jsx_runtime_1.jsx)("label", { htmlFor: id, className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.label, statusStyles), children: label !== null && label !== void 0 ? label : value })] }, id));
+};
+exports.RadioGroupOption = RadioGroupOption;
+const radioGroupOptionMetadata = {
+    displayName: "RadioGroupOption",
+    description: "A single radio button within a radio button group",
+    props: {
+        enabled: (0, descriptorHelper_1.desc)("Is the particular option enabled?"),
+        value: (0, descriptorHelper_1.desc)("The value of the option"),
+        label: (0, descriptorHelper_1.desc)("The option's label"),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(RadioGroup_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        "gap-RadioGroupOption": "$space-1_5",
+        "thickness-border-RadioGroupOption": "2px",
+        "color-bg-checked-RadioGroupOption-default": "$color-border-RadioGroupOption-default--active",
+        "color-bg-checked-RadioGroupOption--disabled": "$color-border-RadioGroupOption--disabled",
+        "color-bg-checked-RadioGroupOption-error": "$color-border-RadioGroupOption-error",
+        "color-bg-checked-RadioGroupOption-warning": "$color-border-RadioGroupOption-warning",
+        "color-bg-checked-RadioGroupOption-success": "$color-border-RadioGroupOption-success",
+        "font-size-RadioGroupOption": "$font-size-small",
+        "font-weight-RadioGroupOption": "$font-weight-bold",
+        "color-text-RadioGroupOption-error": "$color-border-RadioGroupOption-error",
+        "color-text-RadioGroupOption-warning": "$color-border-RadioGroupOption-warning",
+        "color-text-RadioGroupOption-success": "$color-border-RadioGroupOption-success",
+        light: {
+            "color-border-RadioGroupOption-default": "$color-surface-500",
+            "color-border-RadioGroupOption-default--hover": "$color-surface-700",
+            "color-border-RadioGroupOption-default--active": "$color-primary-500",
+        },
+        dark: {
+            "color-border-RadioGroupOption-default": "$color-surface-500",
+            "color-border-RadioGroupOption-default--hover": "$color-surface-300",
+            "color-border-RadioGroupOption-default--active": "$color-primary-400",
+        },
+    },
+};
+exports.radioGroupOptionRenderer = (0, renderers_1.createComponentRenderer)("RadioGroupOption", ({ node, extractValue }) => {
+    return ((0, jsx_runtime_1.jsx)(exports.RadioGroupOption, { value: extractValue.asString(node.props.value), label: extractValue.asOptionalString(node.props.label), enabled: extractValue.asOptionalBoolean(node.props.enabled) }));
+}, radioGroupOptionMetadata);
+const radioGroupMetadata = {
+    displayName: "RadioGroup",
+    description: "A group of radio buttons (mutually exclusive selection)",
+    props: Object.assign({}, input_abstractions_1.inputComponentPropertyDescriptors),
+    events: input_abstractions_1.inputComponentEventDescriptors,
+};
+exports.radioGroupRenderer = (0, renderers_1.createComponentRenderer)("RadioGroup", ({ node, extractValue, layoutCss, state, updateState, lookupEventHandler, renderChild, registerComponentApi }) => {
+    return ((0, jsx_runtime_1.jsx)(exports.RadioGroup, { enabled: extractValue.asOptionalBoolean(node.props.enabled), layout: layoutCss, initialValue: extractValue(node.props.initialValue), value: state === null || state === void 0 ? void 0 : state.value, updateState: updateState, validationStatus: extractValue(node.props.validationStatus), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, children: renderChild(node.children) }));
+}, radioGroupMetadata);

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

@@ -0,0 +1,147 @@
+"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.realTimeAdapterComponentRenderer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const renderers_1 = require("@components-core/renderers");
+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");
+const descriptorHelper_1 = require("@components-core/descriptorHelper");
+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;
+}
+const metadata = {
+    displayName: "RealTimeAdapter",
+    description: "A non-visual component listening to real time change events through long-polling",
+    props: {
+        url: (0, descriptorHelper_1.desc)("URL to listen to for changes"),
+    },
+    events: {
+        eventArrived: (0, descriptorHelper_1.desc)("An event arrived that the adapter should process"),
+    },
+};
+exports.realTimeAdapterComponentRenderer = (0, renderers_1.createComponentRenderer)("RealTimeAdapter", ({ node, lookupEventHandler, extractValue }) => {
+    return (0, jsx_runtime_1.jsx)(RealTimeAdapter, { url: extractValue(node.props.url), onEvent: lookupEventHandler("eventArrived") });
+}, metadata);

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.redirectRenderer = 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 component_utils_1 = require("../component-utils");
+exports.redirectRenderer = (0, renderers_1.createComponentRenderer)("Redirect", ({ 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/Select.js

@@ -0,0 +1,139 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.selectComponentRenderer = void 0;
+exports.Select = Select;
+const react_1 = require("react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const downshift_1 = require("downshift");
+const react_2 = require("react");
+const constants_1 = require("@components-core/constants");
+const renderers_1 = require("@components-core/renderers");
+const misc_1 = require("@components-core/utils/misc");
+const Select_module_scss_1 = __importDefault(require("@components/Select/Select.module.scss"));
+const Icon_1 = require("@components/Icon/Icon");
+const container_helpers_1 = require("@components/container-helpers");
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const react_popper_1 = require("react-popper");
+const ThemeContext_1 = require("@components-core/theming/ThemeContext");
+const react_dom_1 = require("react-dom");
+const input_abstractions_1 = require("@components/Input/input-abstractions");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const descriptorHelper_1 = require("@components-core/descriptorHelper");
+const SelectContext_1 = require("./SelectContext");
+const ChevronDownIcon_1 = require("@components/Icon/ChevronDownIcon");
+const ChevronUpIcon_1 = require("@components/Icon/ChevronUpIcon");
+function defaultRenderer(item) {
+    return (0, jsx_runtime_1.jsx)("div", { children: item.label });
+}
+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, optionRenderer = defaultRenderer, emptyListTemplate, layout, children, }) {
+    const { options, selectContextValue } = (0, SelectContext_1.useSelectContextValue)();
+    const [referenceElement, setReferenceElement] = (0, react_2.useState)(null);
+    const [popperElement, setPopperElement] = (0, react_2.useState)(null);
+    const { styles: popperStyles, attributes } = (0, react_popper_1.usePopper)(referenceElement, popperElement, {
+        placement: "bottom-start",
+    });
+    const { root } = (0, ThemeContext_1.useTheme)();
+    const { isOpen, selectedItem, getToggleButtonProps, getMenuProps, highlightedIndex, getItemProps } = (0, downshift_1.useSelect)({
+        //labelId: id,
+        toggleButtonId: id,
+        items: options,
+        itemToString(item) {
+            return item ? item.value + "" : "";
+        },
+        onSelectedItemChange: ({ selectedItem: newSelectedItem }) => {
+            if (newSelectedItem)
+                onInputChange(newSelectedItem);
+        },
+        initialSelectedItem: options.find((item) => item.value === value) || null,
+        selectedItem: options.find((item) => item.value === value) || null,
+        isItemDisabled: (item) => item.disabled,
+    });
+    // --- Initialize the related field with the input's initial value
+    (0, react_2.useEffect)(() => {
+        updateState({ value: initialValue });
+    }, [initialValue, updateState]);
+    const updateValue = (0, react_2.useCallback)((value) => {
+        updateState({ value });
+        onDidChange(value);
+    }, [onDidChange, updateState]);
+    const onInputChange = (0, react_2.useCallback)((selectedOption) => updateValue(selectedOption.value), [updateValue]);
+    // --- Manage obtaining and losing the focus
+    const handleOnFocus = (0, react_2.useCallback)(() => {
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    }, [onFocus]);
+    const handleOnBlur = (0, react_2.useCallback)(() => {
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    }, [onBlur]);
+    const focus = (0, react_2.useCallback)(() => {
+        referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.focus();
+    }, [referenceElement]);
+    const setValue = (0, misc_1.useEvent)((newValue) => {
+        updateValue(newValue);
+    });
+    (0, react_2.useEffect)(() => {
+        registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
+            focus,
+            setValue,
+        });
+    }, [focus, registerComponentApi, setValue]);
+    // Sizing the dropdown list width to the reference button size
+    const [width, setWidth] = (0, react_2.useState)(0);
+    const observer = (0, react_2.useRef)();
+    (0, react_2.useEffect)(() => {
+        const current = referenceElement;
+        // --- We are already observing old element
+        if ((observer === null || observer === void 0 ? void 0 : observer.current) && current) {
+            observer.current.unobserve(current);
+        }
+        observer.current = new ResizeObserver(() => referenceElement && setWidth(referenceElement.clientWidth));
+        if (current && observer.current) {
+            observer.current.observe(referenceElement);
+        }
+    }, [referenceElement]);
+    return ((0, jsx_runtime_1.jsxs)(SelectContext_1.SelectContext.Provider, { value: selectContextValue, children: [children, (0, jsx_runtime_1.jsxs)("div", { className: Select_module_scss_1.default.selectContainer, style: layout, children: [(0, jsx_runtime_1.jsxs)("button", Object.assign({ type: "button", disabled: !enabled, className: (0, classnames_1.default)(Select_module_scss_1.default.selectToggleButton, Select_module_scss_1.default[validationStatus], {
+                            [Select_module_scss_1.default.disabled]: !enabled,
+                        }) }, getToggleButtonProps({ ref: (el) => setReferenceElement(el) }), { onFocus: handleOnFocus, onBlur: handleOnBlur, children: [selectedItem ? (0, jsx_runtime_1.jsx)("span", { children: selectedItem.label }) : (0, jsx_runtime_1.jsx)("span", { className: Select_module_scss_1.default.placeholder, children: placeholder }), (0, jsx_runtime_1.jsx)("span", { "aria-label": "toggle menu", className: Select_module_scss_1.default.indicator, children: isOpen ? (0, jsx_runtime_1.jsx)(ChevronUpIcon_1.ChevronUpIcon, {}) : (0, jsx_runtime_1.jsx)(ChevronDownIcon_1.ChevronDownIcon, {}) })] })), (0, jsx_runtime_1.jsx)("div", Object.assign({}, getMenuProps(), { children: isOpen &&
+                            root &&
+                            (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("ul", Object.assign({ className: Select_module_scss_1.default.selectMenu, ref: (el) => setPopperElement(el), style: Object.assign(Object.assign({}, popperStyles.popper), { width }) }, attributes.popper, { children: options.length > 0 ? (options.map((item, index) => {
+                                    const props = getItemProps({ item, index });
+                                    return ((0, react_1.createElement)("li", Object.assign({}, props, { key: index, className: (0, classnames_1.default)(Select_module_scss_1.default.item, Select_module_scss_1.default.selectable, {
+                                            [Select_module_scss_1.default.itemActive]: highlightedIndex === index,
+                                            [Select_module_scss_1.default.itemSelected]: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) === item.value,
+                                            [Select_module_scss_1.default.itemDisabled]: item.disabled,
+                                        }) }), optionRenderer(item)));
+                                })) : ((0, jsx_runtime_1.jsx)("li", { className: Select_module_scss_1.default.item, children: emptyListTemplate !== null && emptyListTemplate !== void 0 ? emptyListTemplate : ((0, jsx_runtime_1.jsxs)("span", { className: Select_module_scss_1.default.empty, children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "noresult" }), "List is empty"] })) })) })), root) }))] })] }));
+}
+const defaultOptionRenderer = {
+    type: "Text",
+    props: {
+        value: "{$item.label}",
+    },
+};
+const metadata = {
+    displayName: "Select",
+    description: "A dropdown list of options",
+    props: Object.assign(Object.assign({}, input_abstractions_1.inputComponentPropertyDescriptors), { options: (0, descriptorHelper_1.desc)("List of options to display"), optionTemplate: (0, descriptorHelper_1.desc)("Template to render each option"), emptyListTemplate: (0, descriptorHelper_1.desc)("Template to render when the list is empty") }),
+    events: input_abstractions_1.inputComponentEventDescriptors,
+    themeVars: (0, themeVars_1.parseScssVar)(Select_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        "color-bg-menu-Select": "$color-bg-primary",
+        "shadow-menu-Select": "$shadow-md",
+        "radius-menu-Select": "$radius",
+        "color-bg-item-Select": "$color-bg-dropdown-item",
+        "color-bg-item-Select--hover": "$color-bg-dropdown-item--active",
+        light: {
+            "color-text-item-Select--disabled": "$color-surface-200",
+        },
+        dark: {
+            "color-text-item-Select--disabled": "$color-surface-800",
+        },
+    },
+};
+exports.selectComponentRenderer = (0, renderers_1.createComponentRenderer)("Select", ({ node, state, updateState, extractValue, renderChild, lookupEventHandler, layoutCss, registerComponentApi }) => {
+    return ((0, jsx_runtime_1.jsx)(Select, { layout: layoutCss, updateState: updateState, initialValue: extractValue(node.props.initialValue), value: state === null || state === void 0 ? void 0 : state.value, 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), optionRenderer: (item) => {
+            return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.optionTemplate || defaultOptionRenderer, item: item, renderChild: renderChild }));
+        }, children: renderChild(node.children) }));
+}, metadata);

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

@@ -0,0 +1,45 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectContext = void 0;
+exports.useSelectContextValue = useSelectContextValue;
+exports.useSelectContext = useSelectContext;
+const react_1 = require("react");
+const immer_1 = __importDefault(require("immer"));
+const constants_1 = require("@components-core/constants");
+exports.SelectContext = (0, react_1.createContext)({
+    register: (col) => { },
+    unRegister: (id) => { },
+});
+function useSelectContextValue() {
+    const [options, setOptions] = (0, react_1.useState)(constants_1.EMPTY_ARRAY);
+    const selectContextValue = (0, react_1.useMemo)(() => {
+        return {
+            register: (column) => {
+                setOptions((0, immer_1.default)((draft) => {
+                    const existing = draft.findIndex((col) => col.id === column.id);
+                    if (existing < 0) {
+                        draft.push(column);
+                    }
+                    else {
+                        draft[existing] = column;
+                    }
+                }));
+            },
+            unRegister: (id) => {
+                setOptions((0, immer_1.default)((draft) => {
+                    return draft.filter((col) => col.id !== id);
+                }));
+            },
+        };
+    }, [setOptions]);
+    return {
+        options,
+        selectContextValue,
+    };
+}
+function useSelectContext() {
+    return (0, react_1.useContext)(exports.SelectContext);
+}

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

@@ -0,0 +1,88 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.selectionStoreComponentRenderer = 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 renderers_1 = require("@components-core/renderers");
+const constants_1 = require("@components-core/constants");
+const descriptorHelper_1 = require("@components-core/descriptorHelper");
+const SelectionStore = ({ updateState = lodash_es_1.noop, idKey = "id", children, selectedItems = constants_1.EMPTY_ARRAY, registerComponentApi, }) => {
+    const [items, setItems] = (0, react_1.useState)(selectedItems);
+    const refreshSelection = (0, misc_1.useEvent)((allItems = constants_1.EMPTY_ARRAY) => {
+        setItems(allItems);
+        updateState({
+            value: allItems.filter((item) => !!selectedItems.find((si) => si[idKey] === item[idKey])),
+        });
+    });
+    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 });
+};
+// Represents the default selection context
+const SelectionContext = react_1.default.createContext({
+    selectedItems: [],
+    setSelectedRowIds: lodash_es_1.noop,
+    refreshSelection: lodash_es_1.noop,
+    idKey: "id",
+});
+const metadata = {
+    displayName: "SelectionStore",
+    description: "A component providing services to store the selection state of items in a list",
+    props: {
+        idKey: (0, descriptorHelper_1.desc)("The name of the property holding the unique ID of an item"),
+    },
+};
+exports.selectionStoreComponentRenderer = (0, renderers_1.createComponentRenderer)("SelectionStore", (rendererContext) => {
+    const { node, state, updateState, renderChild, registerComponentApi } = rendererContext;
+    return ((0, jsx_runtime_1.jsx)(SelectionStore, { updateState: updateState, idKey: node.props.idKey, selectedItems: state === null || state === void 0 ? void 0 : state.value, registerComponentApi: registerComponentApi, children: renderChild(node.children) }));
+}, metadata);
+// This React hook takes care of retrieving the current selection context
+function useSelectionContext() {
+    return (0, react_1.useContext)(SelectionContext);
+}

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

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.spaceFillerComponentRenderer = exports.SpaceFiller = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const renderers_1 = require("@components-core/renderers");
+const SpaceFiller_module_scss_1 = __importDefault(require("./SpaceFiller.module.scss"));
+const themeVars_1 = require("@components-core/theming/themeVars");
+// =====================================================================================================================
+// React SpaceFiller component implementation
+const SpaceFiller = () => {
+    return (0, jsx_runtime_1.jsx)("div", { className: SpaceFiller_module_scss_1.default.spacer });
+};
+exports.SpaceFiller = SpaceFiller;
+const metadata = {
+    displayName: "SpaceFiller",
+    description: "Fills the space between two components in a Stack or FlowLayout container.",
+    themeVars: (0, themeVars_1.parseScssVar)(SpaceFiller_module_scss_1.default.themeVars),
+};
+exports.spaceFillerComponentRenderer = (0, renderers_1.createComponentRenderer)("SpaceFiller", () => (0, jsx_runtime_1.jsx)(exports.SpaceFiller, {}), metadata);

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

@@ -0,0 +1,59 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.spinnerComponentRenderer = void 0;
+exports.Spinner = Spinner;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Spinner_module_scss_1 = __importDefault(require("./Spinner.module.scss"));
+const react_1 = require("react");
+const renderers_1 = require("@components-core/renderers");
+const themeVars_1 = require("@components-core/theming/themeVars");
+// source https://loading.io/css/
+function Spinner({ delay = 400, fullScreen = false, style, }) {
+    const [pastDelay, setPastDelay] = (0, react_1.useState)(delay === 0);
+    (0, react_1.useEffect)(() => {
+        const timeout = setTimeout(() => {
+            setPastDelay(true);
+        }, delay);
+        return () => {
+            clearTimeout(timeout);
+        };
+    }, [delay]);
+    const spinner = ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { style: style, children: (0, jsx_runtime_1.jsxs)("div", { className: Spinner_module_scss_1.default["lds-ring"], children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {})] }) }) }));
+    if (!pastDelay) {
+        return null;
+    }
+    else {
+        if (fullScreen) {
+            return (0, jsx_runtime_1.jsx)("div", { className: Spinner_module_scss_1.default.fullScreenSpinnerWrapper, children: spinner });
+        }
+        return spinner;
+    }
+}
+const metadata = {
+    displayName: "Spinner",
+    description: "Component representing progress",
+    props: {},
+    themeVars: (0, themeVars_1.parseScssVar)(Spinner_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        "size-Spinner": "$space-10",
+        "thickness-Spinner": "$space-0_5",
+        light: {
+            "color-border-Spinner": "$color-surface-400",
+        },
+        dark: {
+            "color-border-Spinner": "$color-surface-600",
+        },
+    },
+};
+exports.spinnerComponentRenderer = (0, renderers_1.createComponentRenderer)("Spinner", ({ node, layoutCss, extractValue }) => {
+    delete layoutCss.width;
+    delete layoutCss.minWidth;
+    delete layoutCss.maxWidth;
+    delete layoutCss.height;
+    delete layoutCss.minHeight;
+    delete layoutCss.maxHeight;
+    return ((0, jsx_runtime_1.jsx)(Spinner, { style: layoutCss, delay: extractValue.asOptionalNumber(node.props.delay), fullScreen: extractValue.asOptionalBoolean(node.props.fullScreen) }));
+}, metadata);