xmlui 0.10.14 → 0.10.16

package/dist/scripts/src/components/NumberBox/NumberBoxNative.js

@@ -86,6 +86,8 @@ exports.NumberBox = (0, react_1.forwardRef)(function NumberBox(_a, forwardedRef)
     // Ensure the provided minimum is not smaller than the 0 if zeroOrPositive is set to true
     min = Math.max(zeroOrPositive ? 0 : -numberbox_abstractions_1.NUMBERBOX_MAX_VALUE, min);
     // Step must be an integer since floating point arithmetic needs a deeper dive.
+    // probably some way to integrate with https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+    // since there are footguns, like 0.1 + 0.2 = 0.0000...04
     const _step = (_b = (0, numberbox_abstractions_1.toUsableNumber)(step, true)) !== null && _b !== void 0 ? _b : numberbox_abstractions_1.DEFAULT_STEP;
     const inputRef = (0, react_1.useRef)(null);
     const upButton = (0, react_1.useRef)(null);
@@ -414,10 +416,22 @@ exports.NumberBox = (0, react_1.forwardRef)(function NumberBox(_a, forwardedRef)
         if (!integersOnly && currentInputValue.endsWith(numberbox_abstractions_1.DECIMAL_SEPARATOR)) {
             // --- Add trailing zero if the value ends with decimal separator
             finalValue = currentInputValue + "0";
-            // --- Update the input and state with the new value
-            if (inputRef.current) {
-                inputRef.current.value = finalValue;
+        }
+        // --- Convert to number and clamp to min/max bounds
+        const numericValue = (0, numberbox_abstractions_1.toUsableNumber)(finalValue, integersOnly);
+        if (!(0, numberbox_abstractions_1.isEmptyLike)(numericValue)) {
+            const clampedValue = (0, numberbox_abstractions_1.clamp)(numericValue, min, max);
+            if (clampedValue !== numericValue) {
+                const clampedString = clampedValue.toString();
+                finalValue = clampedString;
+                // --- Update the input field immediately
+                if (inputRef.current) {
+                    inputRef.current.value = clampedString;
+                }
             }
+        }
+        // --- Update the state if the final value is different from current input
+        if (finalValue !== currentInputValue) {
             updateValue(finalValue, finalValue);
         }
         else {
@@ -425,7 +439,7 @@ exports.NumberBox = (0, react_1.forwardRef)(function NumberBox(_a, forwardedRef)
             setValueStrRep((0, numberbox_abstractions_1.mapToRepresentation)(value));
         }
         onBlur === null || onBlur === void 0 ? void 0 : onBlur();
-    }, [value, onBlur, integersOnly, updateValue]);
+    }, [value, onBlur, integersOnly, updateValue, min, max]);
     const focus = (0, react_1.useCallback)(() => {
         var _a;
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();

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

@@ -25,6 +25,8 @@ exports.OptionMd = (0, metadata_helpers_1.createMetadata)({
             valueType: "boolean",
             defaultValue: OptionNative_1.defaultProps.enabled,
         },
+        keywords: (0, metadata_helpers_1.d)("An array of keywords that can be used for searching and filtering the option. " +
+            "These keywords are not displayed but help users find the option through search."),
     },
 });
 exports.optionComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.OptionMd, ({ node, extractValue, className, renderChild, layoutContext }) => {
@@ -36,7 +38,7 @@ exports.optionComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP,
     }
     const hasTextNodeChild = ((_a = node.children) === null || _a === void 0 ? void 0 : _a.length) === 1 && (node.children[0].type === "TextNode" || node.children[0].type === "TextNodeCData");
     const textNodeChild = hasTextNodeChild ? renderChild(node.children) : undefined;
-    return ((0, jsx_runtime_1.jsx)(OptionNative_1.OptionNative, { label: label || textNodeChild, value: value !== undefined && value !== "" ? value : label, enabled: extractValue.asOptionalBoolean(node.props.enabled), className: className, optionRenderer: ((_b = node.children) === null || _b === void 0 ? void 0 : _b.length) > 0
+    return ((0, jsx_runtime_1.jsx)(OptionNative_1.OptionNative, { label: label || textNodeChild, value: value !== undefined && value !== "" ? value : label, enabled: extractValue.asOptionalBoolean(node.props.enabled), keywords: extractValue.asOptionalStringArray(node.props.keywords), className: className, optionRenderer: ((_b = node.children) === null || _b === void 0 ? void 0 : _b.length) > 0
             ? !hasTextNodeChild ? (contextVars) => ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.children, renderChild: renderChild, contextVars: contextVars, layoutContext: layoutContext })) : undefined
             : undefined, children: !hasTextNodeChild && renderChild(node.children) }));
 });

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

@@ -10,7 +10,7 @@ function HiddenOption(option) {
     const [node, setNode] = (0, react_1.useState)(null);
     const opt = (0, react_1.useMemo)(() => {
         var _a, _b;
-        return Object.assign(Object.assign({}, option), { label: (_a = label !== null && label !== void 0 ? label : node === null || node === void 0 ? void 0 : node.textContent) !== null && _a !== void 0 ? _a : "", keywords: [(_b = label !== null && label !== void 0 ? label : node === null || node === void 0 ? void 0 : node.textContent) !== null && _b !== void 0 ? _b : ""] });
+        return Object.assign(Object.assign({}, option), { label: (_a = label !== null && label !== void 0 ? label : node === null || node === void 0 ? void 0 : node.textContent) !== null && _a !== void 0 ? _a : "", keywords: option.keywords || [(_b = label !== null && label !== void 0 ? label : node === null || node === void 0 ? void 0 : node.textContent) !== null && _b !== void 0 ? _b : ""] });
     }, [option, node, label]);
     (0, react_1.useEffect)(() => {
         onOptionAdd(opt);

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

@@ -55,10 +55,12 @@ exports.StandaloneSelectionStore = StandaloneSelectionStore;
 const SelectionStore = ({ updateState = lodash_es_1.noop, idKey = exports.defaultProps.idKey, children, selectedItems = exports.defaultProps.selectedItems, registerComponentApi = lodash_es_1.noop, }) => {
     const [items, setItems] = (0, react_1.useState)(selectedItems);
     const valueInitializedRef = (0, react_1.useRef)(false);
+    const currentItemsRef = (0, react_1.useRef)(selectedItems);
     const refreshSelection = (0, misc_1.useEvent)((allItems = constants_1.EMPTY_ARRAY) => {
         const safeAllItems = allItems || constants_1.EMPTY_ARRAY;
         const safeSelectedItems = selectedItems || constants_1.EMPTY_ARRAY;
         setItems(safeAllItems);
+        currentItemsRef.current = safeAllItems; // Update the ref synchronously
         let value = safeAllItems.filter((item) => !!safeSelectedItems.find((si) => si && item && si[idKey] === item[idKey]));
         if (!(0, lodash_es_1.isEqual)(safeSelectedItems, value) || !valueInitializedRef.current) {
             valueInitializedRef.current = true;
@@ -68,7 +70,7 @@ const SelectionStore = ({ updateState = lodash_es_1.noop, idKey = exports.defaul
         }
     });
     const setSelectedRowIds = (0, misc_1.useEvent)((rowIds) => {
-        const safeItems = items || constants_1.EMPTY_ARRAY;
+        const safeItems = currentItemsRef.current || constants_1.EMPTY_ARRAY; // Use ref instead of state
         updateState({ value: safeItems.filter((item) => rowIds.includes(item[idKey])) });
     });
     const clearSelection = (0, misc_1.useEvent)(() => {

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

@@ -141,29 +141,62 @@ fixtures_1.test.describe("Basic Functionality", () => {
         yield slider.press("ArrowRight");
         yield (0, fixtures_1.expect)(page.getByTestId("slider-value")).toHaveText("0.1");
     }));
-    fixtures_1.test.fixme("minStepsBetweenThumbs maintains thumb separation", component_test_helpers_1.SKIP_REASON.TO_BE_IMPLEMENTED("Need to test actual thumb separation logic"), (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Slider initialValue="{[2, 7]}" minStepsBetweenThumbs="5" />`);
-        // Test that thumbs maintain minimum separation
-        yield (0, fixtures_1.expect)(page.getByRole("slider")).toBeVisible();
+    (0, fixtures_1.test)("component handles multiple thumbs", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Slider initialValue="{[2, 4]}" />`);
+        const thumbs = page.getByRole("slider");
+        yield (0, fixtures_1.expect)(thumbs).toHaveCount(2);
+    }));
+    (0, fixtures_1.test)("all thumbs are interactable via mouse", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createSliderDriver, page, }) {
+        yield initTestBed(`
+      <Fragment>
+        <Slider id="slider" initialValue="{[2, 4]}" minValue="0" maxValue="10" />
+        <Text testId="sliderValue0">{slider.value[0]}</Text>
+        <Text testId="sliderValue1">{slider.value[1]}</Text>
+      </Fragment>
+    `);
+        const driver = yield createSliderDriver("slider");
+        yield driver.dragThumbByMouse("start", 0);
+        yield driver.dragThumbByMouse("end", 1);
+        yield (0, fixtures_1.expect)(page.getByTestId("sliderValue0")).toHaveText("0");
+        yield (0, fixtures_1.expect)(page.getByTestId("sliderValue1")).toHaveText("10");
+    }));
+    (0, fixtures_1.test)("all thumbs are interactable via keyboard", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createSliderDriver, page }) {
+        yield initTestBed(`
+      <Fragment>
+        <Slider id="slider" initialValue="{[2, 4]}" minValue="0" maxValue="10" />
+        <Text testId="sliderValue0">{slider.value[0]}</Text>
+        <Text testId="sliderValue1">{slider.value[1]}</Text>
+      </Fragment>
+    `);
+        const driver = yield createSliderDriver("slider");
+        yield driver.stepThumbByKeyboard("ArrowLeft", 0);
+        yield driver.stepThumbByKeyboard("ArrowRight", 1);
+        yield (0, fixtures_1.expect)(page.getByTestId("sliderValue0")).toHaveText("1");
+        yield (0, fixtures_1.expect)(page.getByTestId("sliderValue1")).toHaveText("5");
+    }));
+    (0, fixtures_1.test)("minStepsBetweenThumbs maintains thumb separation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createSliderDriver, page }) {
+        yield initTestBed(`
+      <Fragment>
+        <Slider id="slider" initialValue="{[0, 5]}" minStepsBetweenThumbs="3" minValue="0" maxValue="10" />
+        <Text testId="sliderValue1">{slider.value[1]}</Text>
+      </Fragment>
+    `);
+        const driver = yield createSliderDriver("slider");
+        yield driver.stepThumbByKeyboard("ArrowLeft", 1, 3); // Try to move left by 3 steps
+        yield (0, fixtures_1.expect)(page.getByTestId("sliderValue1")).toHaveText("3");
     }));
     (0, fixtures_1.test)("enabled=false disables control", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         yield initTestBed(`<Slider enabled="false" />`);
         yield (0, fixtures_1.expect)(page.getByRole("slider")).toBeDisabled();
     }));
-    (0, fixtures_1.test)("readOnly prevents interaction", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("readOnly prevents interaction", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSliderDriver }) {
         yield initTestBed(`
       <Fragment>
         <Slider id="mySlider" readOnly="true" />
         <Text testId="slider-value" value="{mySlider.value}" />
       </Fragment>`);
-        const slider = page.getByRole("slider");
-        const sliderOffsetWidth = yield page.locator("[data-track]").evaluate((el) => {
-            return el.getBoundingClientRect().width;
-        });
-        yield slider.hover();
-        yield page.mouse.down({ button: "left" });
-        yield page.mouse.move(sliderOffsetWidth, 0); // Attempt to drag to end
-        yield page.mouse.up();
+        const driver = yield createSliderDriver("mySlider");
+        yield driver.dragThumbByMouse("end");
         yield (0, fixtures_1.expect)(page.getByTestId("slider-value")).toHaveText("0"); // Value should remain unchanged
     }));
     fixtures_1.test.fixme("autoFocus focuses slider on mount", component_test_helpers_1.SKIP_REASON.XMLUI_BUG("autoFocus does not seem to work with radix-ui, need to double-check"), (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {

package/dist/scripts/src/components/Slider/SliderNative.js

@@ -108,7 +108,7 @@ exports.Slider = (0, react_2.forwardRef)((_a, forwardedRef) => {
     id = id || _id;
     const inputRef = (0, react_1.useRef)(null);
     const tooltipRef = (0, react_1.useRef)(null);
-    const thumbRef = (0, react_1.useRef)(null);
+    const thumbsRef = (0, react_1.useRef)([]);
     min = parseValue(min, exports.defaultProps.min);
     max = parseValue(max, exports.defaultProps.max);
     // Initialize localValue properly
@@ -181,18 +181,22 @@ exports.Slider = (0, react_2.forwardRef)((_a, forwardedRef) => {
     }, [updateValue, readOnly]);
     // Component APIs
     const handleOnFocus = (0, react_1.useCallback)((ev) => {
-        var _a;
-        (_a = thumbRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        onShowTooltip();
         onFocus === null || onFocus === void 0 ? void 0 : onFocus(ev);
-    }, [onFocus]);
+    }, [onFocus, onShowTooltip]);
     const handleOnBlur = (0, react_1.useCallback)((ev) => {
-        var _a;
-        (_a = thumbRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(ev);
     }, [onBlur]);
     const focus = (0, react_1.useCallback)(() => {
         var _a;
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        // Focus the first available thumb
+        const firstThumb = thumbsRef.current.find(thumb => thumb !== null);
+        if (firstThumb) {
+            firstThumb.focus();
+        }
+        else {
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
     }, []);
     const setValue = (0, misc_1.useEvent)((newValue) => {
         if (readOnly || !enabled) {
@@ -210,6 +214,10 @@ exports.Slider = (0, react_2.forwardRef)((_a, forwardedRef) => {
     }, [focus, registerComponentApi, setValue]);
     // Ensure we always have at least one thumb
     const displayValue = localValue.length > 0 ? localValue : formatValue(undefined, min, min, max);
+    // Clean up thumbs ref array when number of thumbs changes
+    (0, react_1.useEffect)(() => {
+        thumbsRef.current = thumbsRef.current.slice(0, displayValue.length);
+    }, [displayValue.length]);
     return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, Object.assign({}, rest, { labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, className: className, ref: forwardedRef, id: id, isInputTemplateUsed: true, children: (0, jsx_runtime_1.jsx)("div", { className: Slider_module_scss_1.default.sliderContainer, "data-slider-container": true, children: (0, jsx_runtime_1.jsxs)(react_slider_1.Root, { minStepsBetweenThumbs: minStepsBetweenThumbs, ref: inputRef, tabIndex: tabIndex, "aria-readonly": readOnly, className: (0, classnames_1.default)(className, Slider_module_scss_1.default.sliderRoot, {
                     [Slider_module_scss_1.default.disabled]: !enabled,
                     [Slider_module_scss_1.default.readOnly]: readOnly,
@@ -221,8 +229,10 @@ exports.Slider = (0, react_2.forwardRef)((_a, forwardedRef) => {
                             [Slider_module_scss_1.default.valid]: validationStatus === "valid",
                         }), style: rangeStyle ? Object.assign({}, rangeStyle) : undefined, children: (0, jsx_runtime_1.jsx)(react_slider_1.Range, { "data-range": true, className: (0, classnames_1.default)(Slider_module_scss_1.default.sliderRange, {
                                 [Slider_module_scss_1.default.disabled]: !enabled,
-                            }) }) }), displayValue.map((_, index) => ((0, jsx_runtime_1.jsx)(TooltipNative_1.Tooltip, { ref: tooltipRef, text: valueFormat(displayValue[index]), delayDuration: 100, open: showValues && showTooltip, children: (0, jsx_runtime_1.jsx)(react_slider_1.Thumb, { ref: index === 0 ? thumbRef : null, className: (0, classnames_1.default)(Slider_module_scss_1.default.sliderThumb, {
+                            }) }) }), displayValue.map((_, index) => ((0, jsx_runtime_1.jsx)(TooltipNative_1.Tooltip, { ref: tooltipRef, text: valueFormat(displayValue[index]), delayDuration: 100, open: showValues && showTooltip, children: (0, jsx_runtime_1.jsx)(react_slider_1.Thumb, { id: id, "aria-required": required, ref: (el) => {
+                                thumbsRef.current[index] = el;
+                            }, className: (0, classnames_1.default)(Slider_module_scss_1.default.sliderThumb, {
                                 [Slider_module_scss_1.default.disabled]: !enabled,
-                            }), style: thumbStyle ? Object.assign({}, thumbStyle) : undefined, id: id, "data-thumb-index": index, autoFocus: autoFocus, "aria-required": required }) }, index)))] }) }) })));
+                            }), style: thumbStyle ? Object.assign({}, thumbStyle) : undefined, "data-thumb-index": index, autoFocus: autoFocus && index === 0 }) }, index)))] }) }) })));
 });
 exports.Slider.displayName = "Slider";

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

@@ -37,6 +37,12 @@ exports.TableMd = (0, metadata_helpers_1.createMetadata)({
             `property is useful when data is loaded conditionally or receiving it takes some time.`),
         headerHeight: (0, metadata_helpers_1.d)(`This optional property is used to specify the height of the table header.`),
         rowsSelectable: (0, metadata_helpers_1.d)(`Indicates whether the rows are selectable (\`true\`) or not (\`false\`).`),
+        initiallySelected: (0, metadata_helpers_1.d)(`An array of IDs that should be initially selected when the table is rendered. ` +
+            `This property only has an effect when the rowsSelectable property is set to \`true\`.`),
+        syncWithAppState: (0, metadata_helpers_1.d)(`An AppState instance to synchronize the table's selection state with. The table will ` +
+            `read from and write to the 'selectedIds' property of the AppState object. When provided, ` +
+            `this takes precedence over the initiallySelected property for initial selection. ` +
+            `You can use the AppState's didUpdate event to receive notifications when the selection changes.`),
         pageSize: (0, metadata_helpers_1.d)(`This property defines the number of rows to display per page when pagination is enabled.`),
         pageSizeOptions: {
             description: "This property holds an array of page sizes (numbers) the user can select for " +
@@ -240,7 +246,7 @@ const TableWithColumns = (0, react_1.memo)((0, react_1.forwardRef)(({ extractVal
     const tableContent = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TableContext_1.TableContext.Provider, { value: tableContextValue, children: renderChild(node.children) }, tableKey), (0, jsx_runtime_1.jsx)(TableContext_1.TableContext.Provider, { value: columnRefresherContextValue, children: renderChild(node.children) }), (0, jsx_runtime_1.jsx)(TableNative_1.Table, { className: className, ref: ref, data: data, columns: columns, pageSizeOptions: extractValue(node.props.pageSizeOptions), pageSize: extractValue.asOptionalNumber(node.props.pageSize), rowsSelectable: extractValue.asOptionalBoolean(node.props.rowsSelectable), registerComponentApi: registerComponentApi, noDataRenderer: node.props.noDataTemplate &&
                     (() => {
                         return renderChild(node.props.noDataTemplate);
-                    }), hideNoDataView: node.props.noDataTemplate === null || node.props.noDataTemplate === "", loading: extractValue.asOptionalBoolean(node.props.loading), isPaginated: extractValue.asOptionalBoolean((_a = node.props) === null || _a === void 0 ? void 0 : _a.isPaginated), headerHeight: extractValue.asSize(node.props.headerHeight), rowDisabledPredicate: lookupSyncCallback(node.props.rowDisabledPredicate), sortBy: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.sortBy), sortingDirection: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.sortDirection), iconSortAsc: extractValue.asOptionalString((_d = node.props) === null || _d === void 0 ? void 0 : _d.iconSortAsc), iconSortDesc: extractValue.asOptionalString((_e = node.props) === null || _e === void 0 ? void 0 : _e.iconSortDesc), iconNoSort: extractValue.asOptionalString((_f = node.props) === null || _f === void 0 ? void 0 : _f.iconNoSort), sortingDidChange: lookupEventHandler("sortingDidChange"), onSelectionDidChange: lookupEventHandler("selectionDidChange"), willSort: lookupEventHandler("willSort"), uid: node.uid, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), hideHeader: extractValue.asOptionalBoolean(node.props.hideHeader), enableMultiRowSelection: extractValue.asOptionalBoolean(node.props.enableMultiRowSelection), alwaysShowSelectionHeader: extractValue.asOptionalBoolean(node.props.alwaysShowSelectionHeader), noBottomBorder: extractValue.asOptionalBoolean(node.props.noBottomBorder), paginationControlsLocation: extractValue.asOptionalString(node.props.paginationControlsLocation), cellVerticalAlign: extractValue.asOptionalString(node.props.cellVerticalAlign), buttonRowPosition: extractValue.asOptionalString(node.props.buttonRowPosition), pageSizeSelectorPosition: extractValue.asOptionalString(node.props.pageSizeSelectorPosition), pageInfoPosition: extractValue.asOptionalString(node.props.pageInfoPosition), showCurrentPage: extractValue.asOptionalBoolean(node.props.showCurrentPage), showPageInfo: extractValue.asOptionalBoolean(node.props.showPageInfo), showPageSizeSelector: extractValue.asOptionalBoolean(node.props.showPageSizeSelector) })] }));
+                    }), hideNoDataView: node.props.noDataTemplate === null || node.props.noDataTemplate === "", loading: extractValue.asOptionalBoolean(node.props.loading), isPaginated: extractValue.asOptionalBoolean((_a = node.props) === null || _a === void 0 ? void 0 : _a.isPaginated), headerHeight: extractValue.asSize(node.props.headerHeight), rowDisabledPredicate: lookupSyncCallback(node.props.rowDisabledPredicate), sortBy: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.sortBy), sortingDirection: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.sortDirection), iconSortAsc: extractValue.asOptionalString((_d = node.props) === null || _d === void 0 ? void 0 : _d.iconSortAsc), iconSortDesc: extractValue.asOptionalString((_e = node.props) === null || _e === void 0 ? void 0 : _e.iconSortDesc), iconNoSort: extractValue.asOptionalString((_f = node.props) === null || _f === void 0 ? void 0 : _f.iconNoSort), sortingDidChange: lookupEventHandler("sortingDidChange"), onSelectionDidChange: lookupEventHandler("selectionDidChange"), willSort: lookupEventHandler("willSort"), uid: node.uid, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), hideHeader: extractValue.asOptionalBoolean(node.props.hideHeader), enableMultiRowSelection: extractValue.asOptionalBoolean(node.props.enableMultiRowSelection), alwaysShowSelectionHeader: extractValue.asOptionalBoolean(node.props.alwaysShowSelectionHeader), noBottomBorder: extractValue.asOptionalBoolean(node.props.noBottomBorder), paginationControlsLocation: extractValue.asOptionalString(node.props.paginationControlsLocation), cellVerticalAlign: extractValue.asOptionalString(node.props.cellVerticalAlign), buttonRowPosition: extractValue.asOptionalString(node.props.buttonRowPosition), pageSizeSelectorPosition: extractValue.asOptionalString(node.props.pageSizeSelectorPosition), pageInfoPosition: extractValue.asOptionalString(node.props.pageInfoPosition), showCurrentPage: extractValue.asOptionalBoolean(node.props.showCurrentPage), showPageInfo: extractValue.asOptionalBoolean(node.props.showPageInfo), showPageSizeSelector: extractValue.asOptionalBoolean(node.props.showPageSizeSelector), initiallySelected: extractValue(node.props.initiallySelected), syncWithAppState: extractValue(node.props.syncWithAppState) })] }));
     if (selectionContext === null) {
         return (0, jsx_runtime_1.jsx)(SelectionStoreNative_1.StandaloneSelectionStore, { children: tableContent });
     }

package/dist/scripts/src/components/Table/TableNative.js

@@ -74,7 +74,7 @@ const getCommonPinningStyles = (column) => {
 // eslint-disable-next-line react/display-name
 exports.Table = (0, react_1.forwardRef)((_a, forwardedRef) => {
     var _b, _c, _d, _e, _f;
-    var { data = exports.defaultProps.data, columns = exports.defaultProps.columns, isPaginated = exports.defaultProps.isPaginated, loading = exports.defaultProps.loading, headerHeight, rowsSelectable = exports.defaultProps.rowsSelectable, enableMultiRowSelection = exports.defaultProps.enableMultiRowSelection, pageSizeOptions = exports.defaultProps.pageSizeOptions, pageSize = (pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : pageSizeOptions[0]) || DEFAULT_PAGE_SIZES[0], currentPageIndex = 0, rowDisabledPredicate = defaultIsRowDisabled, sortBy, sortingDirection = exports.defaultProps.sortingDirection, iconSortAsc, iconSortDesc, iconNoSort, sortingDidChange, willSort, style, className, noDataRenderer, autoFocus = exports.defaultProps.autoFocus, hideHeader = exports.defaultProps.hideHeader, hideNoDataView = exports.defaultProps.hideNoDataView, alwaysShowSelectionHeader = exports.defaultProps.alwaysShowSelectionHeader, registerComponentApi, onSelectionDidChange, noBottomBorder = exports.defaultProps.noBottomBorder, paginationControlsLocation = exports.defaultProps.paginationControlsLocation, cellVerticalAlign = exports.defaultProps.cellVerticalAlign, buttonRowPosition = exports.defaultProps.buttonRowPosition, pageSizeSelectorPosition = exports.defaultProps.pageSizeSelectorPosition, pageInfoPosition = exports.defaultProps.pageInfoPosition, showCurrentPage = exports.defaultProps.showCurrentPage, showPageInfo = exports.defaultProps.showPageInfo, showPageSizeSelector = exports.defaultProps.showPageSizeSelector } = _a, rest = __rest(_a, ["data", "columns", "isPaginated", "loading", "headerHeight", "rowsSelectable", "enableMultiRowSelection", "pageSizeOptions", "pageSize", "currentPageIndex", "rowDisabledPredicate", "sortBy", "sortingDirection", "iconSortAsc", "iconSortDesc", "iconNoSort", "sortingDidChange", "willSort", "style", "className", "noDataRenderer", "autoFocus", "hideHeader", "hideNoDataView", "alwaysShowSelectionHeader", "registerComponentApi", "onSelectionDidChange", "noBottomBorder", "paginationControlsLocation", "cellVerticalAlign", "buttonRowPosition", "pageSizeSelectorPosition", "pageInfoPosition", "showCurrentPage", "showPageInfo", "showPageSizeSelector"])
+    var { data = exports.defaultProps.data, columns = exports.defaultProps.columns, isPaginated = exports.defaultProps.isPaginated, loading = exports.defaultProps.loading, headerHeight, rowsSelectable = exports.defaultProps.rowsSelectable, enableMultiRowSelection = exports.defaultProps.enableMultiRowSelection, initiallySelected = exports.defaultProps.initiallySelected, syncWithAppState, pageSizeOptions = exports.defaultProps.pageSizeOptions, pageSize = (pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : pageSizeOptions[0]) || DEFAULT_PAGE_SIZES[0], currentPageIndex = 0, rowDisabledPredicate = defaultIsRowDisabled, sortBy, sortingDirection = exports.defaultProps.sortingDirection, iconSortAsc, iconSortDesc, iconNoSort, sortingDidChange, willSort, style, className, noDataRenderer, autoFocus = exports.defaultProps.autoFocus, hideHeader = exports.defaultProps.hideHeader, hideNoDataView = exports.defaultProps.hideNoDataView, alwaysShowSelectionHeader = exports.defaultProps.alwaysShowSelectionHeader, registerComponentApi, onSelectionDidChange, noBottomBorder = exports.defaultProps.noBottomBorder, paginationControlsLocation = exports.defaultProps.paginationControlsLocation, cellVerticalAlign = exports.defaultProps.cellVerticalAlign, buttonRowPosition = exports.defaultProps.buttonRowPosition, pageSizeSelectorPosition = exports.defaultProps.pageSizeSelectorPosition, pageInfoPosition = exports.defaultProps.pageInfoPosition, showCurrentPage = exports.defaultProps.showCurrentPage, showPageInfo = exports.defaultProps.showPageInfo, showPageSizeSelector = exports.defaultProps.showPageSizeSelector } = _a, rest = __rest(_a, ["data", "columns", "isPaginated", "loading", "headerHeight", "rowsSelectable", "enableMultiRowSelection", "initiallySelected", "syncWithAppState", "pageSizeOptions", "pageSize", "currentPageIndex", "rowDisabledPredicate", "sortBy", "sortingDirection", "iconSortAsc", "iconSortDesc", "iconNoSort", "sortingDidChange", "willSort", "style", "className", "noDataRenderer", "autoFocus", "hideHeader", "hideNoDataView", "alwaysShowSelectionHeader", "registerComponentApi", "onSelectionDidChange", "noBottomBorder", "paginationControlsLocation", "cellVerticalAlign", "buttonRowPosition", "pageSizeSelectorPosition", "pageInfoPosition", "showCurrentPage", "showPageInfo", "showPageSizeSelector"])
     // cols
     ;
     const { getThemeVar } = (0, ThemeContext_1.useTheme)();
@@ -107,6 +107,8 @@ exports.Table = (0, react_1.forwardRef)((_a, forwardedRef) => {
         enableMultiRowSelection,
         rowDisabledPredicate,
         onSelectionDidChange,
+        initiallySelected,
+        syncWithAppState,
     });
     // --- Create data with order information whenever the items in the table change
     const dataWithOrder = (0, react_1.useMemo)(() => {
@@ -492,6 +494,7 @@ exports.defaultProps = {
     loading: false,
     rowsSelectable: false,
     enableMultiRowSelection: true,
+    initiallySelected: constants_1.EMPTY_ARRAY,
     pageSizeOptions: [5, 10, 15],
     sortingDirection: "ascending",
     autoFocus: false,

package/dist/scripts/src/components/Table/useRowSelection.js

@@ -7,7 +7,76 @@ const misc_1 = require("../../components-core/utils/misc");
 const constants_1 = require("../../components-core/constants");
 const hooks_1 = require("../../components-core/utils/hooks");
 const SelectionStoreNative_1 = require("../SelectionStore/SelectionStoreNative");
-function useRowSelection({ items = constants_1.EMPTY_ARRAY, visibleItems = items, rowsSelectable, enableMultiRowSelection, rowDisabledPredicate, onSelectionDidChange, }) {
+/**
+ * Hook for managing table row selection with optional bidirectional AppState synchronization.
+ *
+ * ## AppState Synchronization Mechanism
+ *
+ * When `syncWithAppState` is provided, this hook implements a robust bidirectional synchronization
+ * between the table's selection state and an AppState instance. The synchronization prevents
+ * infinite loops using a state machine approach.
+ *
+ * ### State Machine Design
+ *
+ * The sync operates through three states:
+ * - `idle`: Normal state, ready to respond to changes from either side
+ * - `updating_to_appstate`: Currently propagating table selection → AppState (blocks AppState → table)
+ * - `updating_from_appstate`: Currently propagating AppState → table selection (blocks table → AppState)
+ *
+ * ### Synchronization Flow
+ *
+ * **AppState → Table (External Updates)**:
+ * 1. AppState.value.selectedIds changes externally (e.g., from another component)
+ * 2. Effect detects change and validates it's not from our own update (using source tracking)
+ * 3. Sets state to `updating_from_appstate` to block reverse sync
+ * 4. Updates table selection via setSelectedRowIds()
+ * 5. Uses requestAnimationFrame to reset state to `idle` after update completes
+ *
+ * **Table → AppState (User Interaction)**:
+ * 1. User interacts with table (clicks, keyboard navigation)
+ * 2. selectedItems changes through normal table selection logic
+ * 3. Effect detects change and validates it's different from AppState
+ * 4. Sets state to `updating_to_appstate` to block reverse sync
+ * 5. Calls syncWithAppState.update({ selectedIds: [...] })
+ * 6. Uses requestAnimationFrame to reset state to `idle` after update completes
+ *
+ * ### Loop Prevention Strategy
+ *
+ * Multiple mechanisms prevent infinite loops:
+ * - **State Machine**: Directional blocking prevents simultaneous updates
+ * - **Source Tracking**: lastUpdateSourceRef tracks whether the last change came from 'table' or 'appstate'
+ * - **Value Tracking**: lastAppStateSelectionRef and lastTableSelectionRef track last known values
+ * - **Change Detection**: Only triggers updates when values actually differ using JSON.stringify comparison
+ * - **Frame-Based Reset**: Uses requestAnimationFrame instead of setTimeout for deterministic timing
+ *
+ * ### Usage with AppState
+ *
+ * ```typescript
+ * // In your component
+ * const appState = useAppState('myBucket');
+ *
+ * // Pass to Table
+ * <Table
+ *   items={data}
+ *   syncWithAppState={appState}
+ *   // ... other props
+ * />
+ *
+ * // AppState will contain: { selectedIds: ['id1', 'id2', ...] }
+ * // Changes from either side are automatically synchronized
+ * ```
+ *
+ * ### Precedence Rules
+ *
+ * - When both `initiallySelected` and `syncWithAppState` are provided, `syncWithAppState` takes precedence
+ * - Multi-row selection limits are respected (single selection truncates to first ID)
+ * - Only valid item IDs (present in current `items` array) are synchronized
+ *
+ * @param options Configuration object for row selection behavior
+ * @returns Row selection operations and state management interface
+ */
+function useRowSelection({ items = constants_1.EMPTY_ARRAY, visibleItems = items, rowsSelectable, enableMultiRowSelection, rowDisabledPredicate, onSelectionDidChange, initiallySelected = constants_1.EMPTY_ARRAY, syncWithAppState, }) {
+    var _a;
     // --- The focused index in the row source (if there is any)
     const [focusedIndex, setFocusedIndex] = (0, react_1.useState)(-1);
     // --- The current selection interval
@@ -18,10 +87,155 @@ function useRowSelection({ items = constants_1.EMPTY_ARRAY, visibleItems = items
     const walkableList = (0, react_1.useMemo)(() => {
         return visibleItems.map((item) => item[idKey]);
     }, [idKey, visibleItems]);
+    // --- Track if initial selection has been applied
+    const [initialSelectionApplied, setInitialSelectionApplied] = (0, react_1.useState)(false);
     // --- If the items change, refresh the selectable items (if the rows are selectable)
     (0, react_1.useEffect)(() => {
         refreshSelection(rowsSelectable ? items : constants_1.EMPTY_ARRAY);
     }, [refreshSelection, items, rowsSelectable]);
+    // --- Handle AppState synchronization
+    // This implements bidirectional sync between Table selection and AppState.
+    // The approach uses React's useEffect pattern which is appropriate for React-to-React communication.
+    // The new AppState didUpdate event is more useful for non-React integrations.
+    const appStateSelection = (_a = syncWithAppState === null || syncWithAppState === void 0 ? void 0 : syncWithAppState.value) === null || _a === void 0 ? void 0 : _a.selectedIds;
+    const prevAppStateSelection = (0, hooks_1.usePrevious)(appStateSelection);
+    // --- State machine for sync direction control
+    const [syncState, setSyncState] = (0, react_1.useState)('idle');
+    // --- Use refs to track the last known selections to prevent update loops
+    const lastAppStateSelectionRef = (0, react_1.useRef)();
+    const lastTableSelectionRef = (0, react_1.useRef)();
+    // --- Track the source of the last update to prevent echoing
+    const lastUpdateSourceRef = (0, react_1.useRef)(null);
+    // --- Sync from AppState to table selection (when AppState changes externally)
+    (0, react_1.useEffect)(() => {
+        // Skip if not selectable, no sync, no selection, or we're currently updating to AppState
+        if (!rowsSelectable ||
+            !syncWithAppState ||
+            !appStateSelection ||
+            syncState === 'updating_to_appstate') {
+            return;
+        }
+        // Only update if AppState selection actually changed and this wasn't caused by our own table update
+        const appStateChanged = appStateSelection !== prevAppStateSelection;
+        const isDifferentFromLastKnown = JSON.stringify([...(appStateSelection || [])].sort()) !==
+            JSON.stringify([...(lastAppStateSelectionRef.current || [])].sort());
+        const wasNotOurUpdate = lastUpdateSourceRef.current !== 'table';
+        if (appStateChanged && isDifferentFromLastKnown && wasNotOurUpdate && items.length > 0) {
+            // Set state machine to indicate we're updating from AppState
+            setSyncState('updating_from_appstate');
+            const validIds = appStateSelection.filter((id) => items.some((item) => item[idKey] === id));
+            const idsToSelect = enableMultiRowSelection ? validIds : validIds.slice(0, 1);
+            // Track what we're setting to prevent loop
+            lastAppStateSelectionRef.current = [...appStateSelection];
+            lastTableSelectionRef.current = [...idsToSelect];
+            lastUpdateSourceRef.current = 'appstate';
+            setSelectedRowIds(idsToSelect);
+            setInitialSelectionApplied(true);
+        }
+    }, [
+        appStateSelection,
+        prevAppStateSelection,
+        items,
+        rowsSelectable,
+        syncWithAppState,
+        idKey,
+        enableMultiRowSelection,
+        setSelectedRowIds,
+        syncState,
+    ]);
+    // --- Sync from table selection to AppState (when user interacts with table)
+    (0, react_1.useEffect)(() => {
+        var _a;
+        // Skip if not selectable, no sync, or currently updating from AppState
+        if (!rowsSelectable ||
+            !syncWithAppState ||
+            syncState === 'updating_from_appstate') {
+            return;
+        }
+        const currentSelectionIds = selectedItems.map((item) => item[idKey]);
+        const appStateSelectionIds = appStateSelection || [];
+        // Only update if table selection is different from AppState, different from our last update, and wasn't caused by AppState
+        const tableChanged = JSON.stringify([...currentSelectionIds].sort()) !==
+            JSON.stringify([...(lastTableSelectionRef.current || [])].sort());
+        const isDifferentFromAppState = JSON.stringify([...currentSelectionIds].sort()) !==
+            JSON.stringify([...appStateSelectionIds].sort());
+        const wasNotAppStateUpdate = lastUpdateSourceRef.current !== 'appstate';
+        if (tableChanged && isDifferentFromAppState && wasNotAppStateUpdate) {
+            // Set state machine to indicate we're updating to AppState
+            setSyncState('updating_to_appstate');
+            // Track what we're updating to prevent loop
+            lastTableSelectionRef.current = [...currentSelectionIds];
+            lastAppStateSelectionRef.current = [...currentSelectionIds];
+            lastUpdateSourceRef.current = 'table';
+            (_a = syncWithAppState.update) === null || _a === void 0 ? void 0 : _a.call(syncWithAppState, { selectedIds: currentSelectionIds });
+        }
+    }, [
+        selectedItems,
+        syncWithAppState,
+        appStateSelection,
+        idKey,
+        rowsSelectable,
+        syncState,
+    ]);
+    // --- Reset sync state machine to idle when updates are complete
+    (0, react_1.useEffect)(() => {
+        if (syncState !== 'idle') {
+            // Reset to idle state in the next tick to allow the current update to complete
+            const resetTimer = requestAnimationFrame(() => {
+                setSyncState('idle');
+            });
+            return () => cancelAnimationFrame(resetTimer);
+        }
+    }, [syncState, appStateSelection, selectedItems]);
+    // --- Clear update source when sync state becomes idle
+    (0, react_1.useEffect)(() => {
+        if (syncState === 'idle') {
+            // Use a separate frame to clear the source after the sync state is reset
+            const clearTimer = requestAnimationFrame(() => {
+                lastUpdateSourceRef.current = null;
+            });
+            return () => cancelAnimationFrame(clearTimer);
+        }
+    }, [syncState]);
+    // --- Set initial selection when component mounts and items are available
+    // Use a separate effect that runs after the refresh to ensure timing is correct
+    (0, react_1.useEffect)(() => {
+        // If we have AppState sync, don't use initiallySelected
+        if (syncWithAppState) {
+            return;
+        }
+        if (!rowsSelectable ||
+            !initiallySelected ||
+            initiallySelected.length === 0 ||
+            initialSelectionApplied) {
+            return;
+        }
+        // Only set initial selection when items are available and we haven't applied it yet
+        if (items.length > 0) {
+            // Use requestAnimationFrame to ensure this runs after the refreshSelection effect
+            const frameId = requestAnimationFrame(() => {
+                // Filter initiallySelected to only include IDs that exist in current items
+                const validIds = initiallySelected.filter((id) => items.some((item) => item[idKey] === id));
+                if (validIds.length > 0) {
+                    // If multi-row selection is disabled, only select the first valid ID
+                    const idsToSelect = enableMultiRowSelection ? validIds : [validIds[0]];
+                    setSelectedRowIds(idsToSelect);
+                    setInitialSelectionApplied(true);
+                }
+            });
+            return () => cancelAnimationFrame(frameId);
+        }
+    }, [
+        items,
+        initiallySelected,
+        rowsSelectable,
+        idKey,
+        enableMultiRowSelection,
+        setSelectedRowIds,
+        initialSelectionApplied,
+        selectedItems,
+        syncWithAppState,
+    ]);
     // --- If the multi-row selection switches to disabled, keep only the first selected item
     const prevEnableMultiRowSelection = (0, hooks_1.usePrevious)(enableMultiRowSelection);
     (0, react_1.useEffect)(() => {

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

@@ -33,10 +33,6 @@ exports.TextBoxMd = (0, metadata_helpers_1.createMetadata)({
     props: {
         placeholder: (0, metadata_helpers_1.dPlaceholder)(),
         initialValue: Object.assign(Object.assign({}, (0, metadata_helpers_1.dInitialValue)()), { defaultValue: TextBoxNative_1.defaultProps.initialValue }),
-        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),
         maxLength: (0, metadata_helpers_1.dMaxLength)(),
         autoFocus: (0, metadata_helpers_1.dAutoFocus)(),
         required: (0, metadata_helpers_1.dRequired)(),
@@ -123,7 +119,7 @@ exports.TextBoxMd = (0, metadata_helpers_1.createMetadata)({
 function renderTextBox(className, state, updateState, extractValue, node, lookupEventHandler, registerComponentApi, type = "text") {
     // TODO: How can we use the gap from the className?
     //delete layoutCss.gap;
-    return ((0, jsx_runtime_1.jsx)(TextBoxNative_1.TextBox, { type: type, className: className, value: state.value, updateState: updateState, initialValue: extractValue(node.props.initialValue), maxLength: extractValue(node.props.maxLength), 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, startText: extractValue.asOptionalString(node.props.startText), startIcon: extractValue.asOptionalString(node.props.startIcon), endText: extractValue.asOptionalString(node.props.endText), endIcon: extractValue.asOptionalString(node.props.endIcon), gap: extractValue.asOptionalString(node.props.gap), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), label: extractValue.asOptionalString(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue.asOptionalString(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required), showPasswordToggle: extractValue.asOptionalBoolean(node.props.showPasswordToggle, false), passwordVisibleIcon: extractValue.asOptionalString(node.props.passwordVisibleIcon), passwordHiddenIcon: extractValue.asOptionalString(node.props.passwordHiddenIcon) }));
+    return ((0, jsx_runtime_1.jsx)(TextBoxNative_1.TextBox, { type: type, className: className, value: state.value, updateState: updateState, initialValue: extractValue(node.props.initialValue), maxLength: extractValue(node.props.maxLength), 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, startText: extractValue.asOptionalString(node.props.startText), startIcon: extractValue.asOptionalString(node.props.startIcon), endText: extractValue.asOptionalString(node.props.endText), endIcon: extractValue.asOptionalString(node.props.endIcon), gap: extractValue.asOptionalString(node.props.gap), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), required: extractValue.asOptionalBoolean(node.props.required), showPasswordToggle: extractValue.asOptionalBoolean(node.props.showPasswordToggle, false), passwordVisibleIcon: extractValue.asOptionalString(node.props.passwordVisibleIcon), passwordHiddenIcon: extractValue.asOptionalString(node.props.passwordHiddenIcon) }));
 }
 exports.textBoxComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.TextBoxMd, ({ node, state, updateState, lookupEventHandler, extractValue, className, registerComponentApi, }) => {
     return renderTextBox(className, state, updateState, extractValue, node, lookupEventHandler, registerComponentApi);