xmlui 0.10.18 → 0.10.20

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

@@ -23,7 +23,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultProps = exports.Table = exports.TablePaginationControlsLocationValues = void 0;
+exports.defaultProps = exports.Table = exports.CheckboxToleranceValues = exports.TablePaginationControlsLocationValues = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_dom_1 = require("react-dom");
@@ -45,11 +45,53 @@ const IconNative_1 = require("../Icon/IconNative");
 const useRowSelection_1 = __importDefault(require("./useRowSelection"));
 const PaginationNative_1 = require("../Pagination/PaginationNative");
 exports.TablePaginationControlsLocationValues = ["top", "bottom", "both"];
+exports.CheckboxToleranceValues = ["none", "compact", "comfortable", "spacious"];
 function defaultIsRowDisabled(_) {
     return false;
 }
 const SELECT_COLUMN_WIDTH = 42;
 const DEFAULT_PAGE_SIZES = [10];
+/**
+ * Maps checkbox tolerance values to pixel values
+ * @param tolerance - The tolerance level
+ * @returns The number of pixels for the tolerance
+ */
+const getCheckboxTolerancePixels = (tolerance) => {
+    switch (tolerance) {
+        case "none":
+            return 0;
+        case "compact":
+            return 8;
+        case "comfortable":
+            return 12;
+        case "spacious":
+            return 16;
+        default:
+            return 8; // fallback to compact
+    }
+};
+/**
+ * Helper function to check if a point is within the checkbox boundary
+ * @param pointX - X coordinate of the point to check
+ * @param pointY - Y coordinate of the point to check
+ * @param checkboxRect - Bounding rectangle of the checkbox
+ * @param tolerancePixels - Number of pixels to extend the boundary
+ * @returns true if the point is within the checkbox or within tolerancePixels of its boundary
+ */
+const isWithinCheckboxBoundary = (pointX, pointY, checkboxRect, tolerancePixels) => {
+    // Calculate distance from point to checkbox boundaries
+    const distanceToLeft = Math.abs(pointX - checkboxRect.left);
+    const distanceToRight = Math.abs(pointX - checkboxRect.right);
+    const distanceToTop = Math.abs(pointY - checkboxRect.top);
+    const distanceToBottom = Math.abs(pointY - checkboxRect.bottom);
+    // Check if point is within the checkbox bounds or within boundary pixels of any edge
+    const withinHorizontalBounds = pointX >= checkboxRect.left && pointX <= checkboxRect.right;
+    const withinVerticalBounds = pointY >= checkboxRect.top && pointY <= checkboxRect.bottom;
+    const withinCheckbox = withinHorizontalBounds && withinVerticalBounds;
+    const nearHorizontalBoundary = (withinVerticalBounds && (distanceToLeft <= tolerancePixels || distanceToRight <= tolerancePixels));
+    const nearVerticalBoundary = (withinHorizontalBounds && (distanceToTop <= tolerancePixels || distanceToBottom <= tolerancePixels));
+    return withinCheckbox || nearHorizontalBoundary || nearVerticalBoundary;
+};
 //These are the important styles to make sticky column pinning work!
 //Apply styles like this using your CSS strategy of choice with this kind of logic to head cells, data cells, footer cells, etc.
 //View the index.css file for more needed styles such as border-collapse: separate
@@ -74,7 +116,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, 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"])
+    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, checkboxTolerance = exports.defaultProps.checkboxTolerance } = _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", "checkboxTolerance"])
     // cols
     ;
     const { getThemeVar } = (0, ThemeContext_1.useTheme)();
@@ -99,6 +141,12 @@ exports.Table = (0, react_1.forwardRef)((_a, forwardedRef) => {
     }, [autoFocus]);
     // --- Keep track of visible table rows
     const [visibleItems, setVisibleItems] = (0, react_1.useState)(constants_1.EMPTY_ARRAY);
+    // --- Track which row should show forced hover for checkbox
+    const [hoveredRowId, setHoveredRowId] = (0, react_1.useState)(null);
+    // --- Track if the header checkbox should show forced hover
+    const [headerCheckboxHovered, setHeaderCheckboxHovered] = (0, react_1.useState)(false);
+    // --- Calculate tolerance pixels from the prop
+    const tolerancePixels = getCheckboxTolerancePixels(checkboxTolerance);
     // --- Get the operations to manage selected rows in a table
     const { toggleRow, checkAllRows, focusedIndex, onKeyDown, selectedRowIdMap, idKey, selectionApi, } = (0, useRowSelection_1.default)({
         items: safeData,
@@ -221,18 +269,23 @@ exports.Table = (0, react_1.forwardRef)((_a, forwardedRef) => {
             },
             header: ({ table }) => enableMultiRowSelection ? ((0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { className: (0, classnames_1.default)(Table_module_scss_1.default.checkBoxWrapper, {
                     [Table_module_scss_1.default.showInHeader]: alwaysShowSelectionHeader,
+                    [Table_module_scss_1.default.forceHoverWrapper]: headerCheckboxHovered,
                 }),
                 value: table.getIsAllRowsSelected(),
                 indeterminate: table.getIsSomeRowsSelected(),
+                forceHover: headerCheckboxHovered,
                 onDidChange: () => {
                     const allSelected = table
                         .getRowModel()
                         .rows.every((row) => rowDisabledPredicate(row.original) || row.getIsSelected());
                     checkAllRows(!allSelected);
                 } })) : null,
-            cell: ({ row }) => ((0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { className: Table_module_scss_1.default.checkBoxWrapper,
+            cell: ({ row }) => ((0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { className: (0, classnames_1.default)(Table_module_scss_1.default.checkBoxWrapper, {
+                    [Table_module_scss_1.default.forceHoverWrapper]: hoveredRowId === row.id,
+                }),
                 value: row.getIsSelected(),
                 indeterminate: row.getIsSomeSelected(),
+                forceHover: hoveredRowId === row.id,
                 onDidChange: () => {
                     toggleRow(row.original, { metaKey: true });
                 } })),
@@ -246,6 +299,8 @@ exports.Table = (0, react_1.forwardRef)((_a, forwardedRef) => {
         checkAllRows,
         toggleRow,
         rowDisabledPredicate,
+        hoveredRowId,
+        headerCheckboxHovered,
     ]);
     // --- Set up page information (using the first page size option)
     // const [pagination, setPagination] = useState<PaginationState>();
@@ -396,7 +451,71 @@ exports.Table = (0, react_1.forwardRef)((_a, forwardedRef) => {
                 (paginationControlsLocation === "top" || paginationControlsLocation === "both") &&
                 paginationControls, (0, jsx_runtime_1.jsxs)("table", { className: Table_module_scss_1.default.table, ref: tableRef, children: [!hideHeader && ((0, jsx_runtime_1.jsx)("thead", { style: { height: headerHeight }, className: Table_module_scss_1.default.headerWrapper, children: table.getHeaderGroups().map((headerGroup, headerGroupIndex) => ((0, jsx_runtime_1.jsx)("tr", { className: (0, classnames_1.default)(Table_module_scss_1.default.headerRow, {
                                 [Table_module_scss_1.default.allSelected]: table.getIsAllRowsSelected(),
-                            }), children: headerGroup.headers.map((header, headerIndex) => {
+                            }), onClick: (event) => {
+                                const target = event.target;
+                                const headerCell = target.closest('th');
+                                // Only handle clicks for the select column header
+                                if (headerCell && rowsSelectable && enableMultiRowSelection) {
+                                    const header = headerGroup.headers.find(h => {
+                                        const headerElement = headerCell;
+                                        return (headerElement === null || headerElement === void 0 ? void 0 : headerElement.getAttribute('data-column-id')) === h.id || h.id === 'select';
+                                    });
+                                    if (header && header.id === 'select') {
+                                        const clickX = event.clientX;
+                                        const clickY = event.clientY;
+                                        const checkbox = headerCell.querySelector('input[type=\"checkbox\"]');
+                                        if (checkbox) {
+                                            const checkboxRect = checkbox.getBoundingClientRect();
+                                            if (isWithinCheckboxBoundary(clickX, clickY, checkboxRect, tolerancePixels)) {
+                                                // Prevent the default click and manually trigger the checkbox
+                                                event.preventDefault();
+                                                event.stopPropagation();
+                                                const allSelected = table
+                                                    .getRowModel()
+                                                    .rows.every((row) => rowDisabledPredicate(row.original) || row.getIsSelected());
+                                                checkAllRows(!allSelected);
+                                            }
+                                        }
+                                    }
+                                }
+                            }, onMouseMove: (event) => {
+                                if (rowsSelectable && enableMultiRowSelection) {
+                                    const target = event.target;
+                                    const headerCell = target.closest('th');
+                                    if (headerCell) {
+                                        const header = headerGroup.headers.find(h => {
+                                            const headerElement = headerCell;
+                                            return (headerElement === null || headerElement === void 0 ? void 0 : headerElement.getAttribute('data-column-id')) === h.id || h.id === 'select';
+                                        });
+                                        if (header && header.id === 'select') {
+                                            const mouseX = event.clientX;
+                                            const mouseY = event.clientY;
+                                            const checkbox = headerCell.querySelector('input[type=\"checkbox\"]');
+                                            if (checkbox) {
+                                                const checkboxRect = checkbox.getBoundingClientRect();
+                                                const shouldShowHover = isWithinCheckboxBoundary(mouseX, mouseY, checkboxRect, tolerancePixels);
+                                                if (shouldShowHover && !headerCheckboxHovered) {
+                                                    setHeaderCheckboxHovered(true);
+                                                    event.currentTarget.style.cursor = 'pointer';
+                                                }
+                                                else if (!shouldShowHover && headerCheckboxHovered) {
+                                                    setHeaderCheckboxHovered(false);
+                                                    event.currentTarget.style.cursor = '';
+                                                }
+                                            }
+                                        }
+                                        else if (headerCheckboxHovered) {
+                                            setHeaderCheckboxHovered(false);
+                                            event.currentTarget.style.cursor = '';
+                                        }
+                                    }
+                                }
+                            }, onMouseLeave: (event) => {
+                                if (headerCheckboxHovered) {
+                                    setHeaderCheckboxHovered(false);
+                                    event.currentTarget.style.cursor = '';
+                                }
+                            }, children: headerGroup.headers.map((header, headerIndex) => {
                                 var _a, _b, _c;
                                 const _d = ((_a = header.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.style) || {}, { width } = _d, style = __rest(_d, ["width"]);
                                 const size = header.getSize();
@@ -405,7 +524,7 @@ exports.Table = (0, react_1.forwardRef)((_a, forwardedRef) => {
                                     : cellVerticalAlign === "bottom"
                                         ? Table_module_scss_1.default.alignBottom
                                         : Table_module_scss_1.default.alignCenter;
-                                return ((0, jsx_runtime_1.jsxs)("th", { className: (0, classnames_1.default)(Table_module_scss_1.default.columnCell, alignmentClass), colSpan: header.colSpan, style: Object.assign({ position: "relative", width: size }, getCommonPinningStyles(header.column)), children: [(0, jsx_runtime_1.jsx)(ClickableHeader, { hasSorting: header.column.columnDef.enableSorting &&
+                                return ((0, jsx_runtime_1.jsxs)("th", { "data-column-id": header.id, className: (0, classnames_1.default)(Table_module_scss_1.default.columnCell, alignmentClass), colSpan: header.colSpan, style: Object.assign({ position: "relative", width: size }, getCommonPinningStyles(header.column)), children: [(0, jsx_runtime_1.jsx)(ClickableHeader, { hasSorting: header.column.columnDef.enableSorting &&
                                                 !!((_b = header.column.columnDef.meta) === null || _b === void 0 ? void 0 : _b.accessorKey), updateSorting: () => { var _a; return _updateSorting((_a = header.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.accessorKey); }, children: (0, jsx_runtime_1.jsxs)("div", { className: Table_module_scss_1.default.headerContent, style: style, children: [(0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext()), header.column.columnDef.enableSorting && ((0, jsx_runtime_1.jsx)("span", { style: { display: "inline-flex", maxWidth: 16 }, children: (0, jsx_runtime_1.jsx)(ColumnOrderingIndicator, { iconSortAsc: iconSortAsc, iconSortDesc: iconSortDesc, iconNoSort: iconNoSort, direction: ((_c = header.column.columnDef.meta) === null || _c === void 0 ? void 0 : _c.accessorKey) === _sortBy
                                                                 ? _sortingDirection
                                                                 : undefined }) }))] }) }), header.column.getCanResize() && ((0, jsx_runtime_1.jsx)("div", { onDoubleClick: () => {
@@ -449,7 +568,44 @@ exports.Table = (0, react_1.forwardRef)((_a, forwardedRef) => {
                                         if (target.tagName.toLowerCase() === "input") {
                                             return;
                                         }
+                                        // Check if click is within checkbox boundary
+                                        const currentRow = event.currentTarget;
+                                        const checkbox = currentRow.querySelector('input[type="checkbox"]');
+                                        if (checkbox) {
+                                            const checkboxRect = checkbox.getBoundingClientRect();
+                                            const clickX = event.clientX;
+                                            const clickY = event.clientY;
+                                            if (isWithinCheckboxBoundary(clickX, clickY, checkboxRect, tolerancePixels)) {
+                                                // Toggle the checkbox when clicking within the boundary
+                                                toggleRow(row.original, { metaKey: true });
+                                                return;
+                                            }
+                                        }
                                         toggleRow(row.original, event);
+                                    }, onMouseMove: (event) => {
+                                        // Change cursor and hover state when within checkbox boundary
+                                        const currentRow = event.currentTarget;
+                                        const checkbox = currentRow.querySelector('input[type="checkbox"]');
+                                        if (checkbox) {
+                                            const checkboxRect = checkbox.getBoundingClientRect();
+                                            const mouseX = event.clientX;
+                                            const mouseY = event.clientY;
+                                            const shouldShowHover = isWithinCheckboxBoundary(mouseX, mouseY, checkboxRect, tolerancePixels);
+                                            // Update hover state and cursor based on proximity to checkbox
+                                            if (shouldShowHover) {
+                                                setHoveredRowId(row.id);
+                                                currentRow.style.cursor = 'pointer';
+                                            }
+                                            else {
+                                                setHoveredRowId(null);
+                                                currentRow.style.cursor = '';
+                                            }
+                                        }
+                                    }, onMouseLeave: (event) => {
+                                        // Reset cursor and hover state when leaving the row
+                                        const currentRow = event.currentTarget;
+                                        currentRow.style.cursor = '';
+                                        setHoveredRowId(null);
                                     }, children: row.getVisibleCells().map((cell, i) => {
                                         var _a, _b;
                                         const cellRenderer = (_b = (_a = cell.column.columnDef) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.cellRenderer;
@@ -510,4 +666,5 @@ exports.defaultProps = {
     buttonRowPosition: "center",
     pageSizeSelectorPosition: "start",
     pageInfoPosition: "end",
+    checkboxTolerance: "compact",
 };

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

@@ -100,7 +100,7 @@ function useRowSelection({ items = constants_1.EMPTY_ARRAY, visibleItems = items
     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');
+    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)();
@@ -112,23 +112,23 @@ function useRowSelection({ items = constants_1.EMPTY_ARRAY, visibleItems = items
         if (!rowsSelectable ||
             !syncWithAppState ||
             !appStateSelection ||
-            syncState === 'updating_to_appstate') {
+            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';
+        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');
+            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';
+            lastUpdateSourceRef.current = "appstate";
             setSelectedRowIds(idsToSelect);
             setInitialSelectionApplied(true);
         }
@@ -147,9 +147,7 @@ function useRowSelection({ items = constants_1.EMPTY_ARRAY, visibleItems = items
     (0, react_1.useEffect)(() => {
         var _a;
         // Skip if not selectable, no sync, or currently updating from AppState
-        if (!rowsSelectable ||
-            !syncWithAppState ||
-            syncState === 'updating_from_appstate') {
+        if (!rowsSelectable || !syncWithAppState || syncState === "updating_from_appstate") {
             return;
         }
         const currentSelectionIds = selectedItems.map((item) => item[idKey]);
@@ -159,37 +157,30 @@ function useRowSelection({ items = constants_1.EMPTY_ARRAY, visibleItems = items
             JSON.stringify([...(lastTableSelectionRef.current || [])].sort());
         const isDifferentFromAppState = JSON.stringify([...currentSelectionIds].sort()) !==
             JSON.stringify([...appStateSelectionIds].sort());
-        const wasNotAppStateUpdate = lastUpdateSourceRef.current !== 'appstate';
+        const wasNotAppStateUpdate = lastUpdateSourceRef.current !== "appstate";
         if (tableChanged && isDifferentFromAppState && wasNotAppStateUpdate) {
             // Set state machine to indicate we're updating to AppState
-            setSyncState('updating_to_appstate');
+            setSyncState("updating_to_appstate");
             // Track what we're updating to prevent loop
             lastTableSelectionRef.current = [...currentSelectionIds];
             lastAppStateSelectionRef.current = [...currentSelectionIds];
-            lastUpdateSourceRef.current = 'table';
+            lastUpdateSourceRef.current = "table";
             (_a = syncWithAppState.update) === null || _a === void 0 ? void 0 : _a.call(syncWithAppState, { selectedIds: currentSelectionIds });
         }
-    }, [
-        selectedItems,
-        syncWithAppState,
-        appStateSelection,
-        idKey,
-        rowsSelectable,
-        syncState,
-    ]);
+    }, [selectedItems, syncWithAppState, appStateSelection, idKey, rowsSelectable, syncState]);
     // --- Reset sync state machine to idle when updates are complete
     (0, react_1.useEffect)(() => {
-        if (syncState !== 'idle') {
+        if (syncState !== "idle") {
             // Reset to idle state in the next tick to allow the current update to complete
             const resetTimer = requestAnimationFrame(() => {
-                setSyncState('idle');
+                setSyncState("idle");
             });
             return () => cancelAnimationFrame(resetTimer);
         }
     }, [syncState, appStateSelection, selectedItems]);
     // --- Clear update source when sync state becomes idle
     (0, react_1.useEffect)(() => {
-        if (syncState === 'idle') {
+        if (syncState === "idle") {
             // Use a separate frame to clear the source after the sync state is reset
             const clearTimer = requestAnimationFrame(() => {
                 lastUpdateSourceRef.current = null;
@@ -389,7 +380,7 @@ function useRowSelection({ items = constants_1.EMPTY_ARRAY, visibleItems = items
     });
     (0, react_1.useEffect)(() => {
         // console.log("selection DID CHANGE?");
-        onSelectionDidChange === null || onSelectionDidChange === void 0 ? void 0 : onSelectionDidChange(selectedItems);
+        void (onSelectionDidChange === null || onSelectionDidChange === void 0 ? void 0 : onSelectionDidChange(selectedItems));
     }, [selectedItems, onSelectionDidChange]);
     /**
      * This operation checks or clears all rows

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

@@ -98,7 +98,7 @@ fixtures_1.test.describe("Basic Functionality", () => {
         const textarea = page.getByRole("textbox");
         yield textarea.fill("Some content");
         yield (0, fixtures_1.expect)(textarea).toHaveValue("Some content");
-        (0, fixtures_1.expect)(textarea).toHaveAttribute("placeholder", "Enter comments");
+        yield (0, fixtures_1.expect)(textarea).toHaveAttribute("placeholder", "Enter comments");
     }));
     (0, fixtures_1.test)("maxLength limits input length", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         yield initTestBed(`<TextArea maxLength="10" />`);
@@ -275,7 +275,7 @@ fixtures_1.test.describe("Accessibility", () => {
     }));
     (0, fixtures_1.test)("component is keyboard accessible when interactive", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         const { testStateDriver } = yield initTestBed(`
-      <TextArea 
+      <TextArea
         label="Comments"
         onGotFocus="testState = 'keyboard-focused'"
       />
@@ -327,6 +327,57 @@ fixtures_1.test.describe("Accessibility", () => {
     }));
 });
 // =============================================================================
+// EVENT HANDLING TESTS
+// =============================================================================
+fixtures_1.test.describe("Event Handling", () => {
+    (0, fixtures_1.test)("didChange event fires on input change", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <TextArea onDidChange="testState = 'changed'" />
+    `);
+        yield page.getByRole("textbox").fill("test");
+        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("changed");
+    }));
+    (0, fixtures_1.test)("didChange event passes new value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <TextArea onDidChange="arg => testState = arg" />
+    `);
+        yield page.getByRole("textbox").fill("test value");
+        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("test value");
+    }));
+    (0, fixtures_1.test)("gotFocus event fires on focus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <TextArea onGotFocus="testState = 'focused'" />
+    `);
+        yield page.getByRole("textbox").focus();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("focused");
+    }));
+    (0, fixtures_1.test)("gotFocus event fires on label click", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <TextArea label="Comments" onGotFocus="testState = 'focused'" />
+    `);
+        yield page.getByText("Comments").click();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("focused");
+    }));
+    (0, fixtures_1.test)("lostFocus event fires on blur", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <TextArea onLostFocus="testState = 'blurred'" />
+    `);
+        const textarea = page.getByRole("textbox");
+        yield textarea.focus();
+        yield textarea.blur();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("blurred");
+    }));
+    (0, fixtures_1.test)("events do not fire when component is disabled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <TextArea enabled="false" onDidChange="testState = 'changed'" onGotFocus="testState = 'focused'" />
+    `);
+        const textarea = page.getByRole("textbox");
+        yield textarea.focus();
+        yield textarea.fill("test", { force: true });
+        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(null);
+    }));
+});
+// =============================================================================
 // VISUAL STATE TESTS
 // =============================================================================
 fixtures_1.test.describe("Visual States", () => {
@@ -357,7 +408,7 @@ fixtures_1.test.describe("Visual States", () => {
             testThemeVars: {
                 "backgroundColor-TextArea--disabled": "rgb(255, 0, 0)",
                 "textColor-TextArea--disabled": "rgb(0, 255, 0)",
-                "borderColor-TextArea--disabled": "rgb(0, 0, 255)"
+                "borderColor-TextArea--disabled": "rgb(0, 0, 255)",
             },
         });
         const textarea = page.getByRole("textbox");
@@ -459,15 +510,15 @@ fixtures_1.test.describe("Edge Cases", () => {
         yield (0, fixtures_1.expect)(textarea).toBeVisible();
         yield (0, fixtures_1.expect)(textarea).toHaveValue(longValue);
     }));
-    (0, fixtures_1.test)("component handles invalid maxRows/minRows combinations with autoSize", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("component handles invalid maxRows/minRows combinations with autoSize", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
         yield initTestBed(`<TextArea autoSize="true" maxRows="2" minRows="5" />`);
         yield (0, fixtures_1.expect)(page.getByRole("textbox")).toBeVisible();
     }));
-    (0, fixtures_1.test)("component handles zero maxRows/minRows values with autoSize", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("component handles zero maxRows/minRows values with autoSize", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
         yield initTestBed(`<TextArea autoSize="true" maxRows="0" minRows="0" />`);
         yield (0, fixtures_1.expect)(page.getByRole("textbox")).toBeVisible();
     }));
-    (0, fixtures_1.test)("component handles negative maxRows/minRows values with autoSize", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("component handles negative maxRows/minRows values with autoSize", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
         yield initTestBed(`<TextArea autoSize="true" maxRows="{-1}" minRows="{-1}" />`);
         yield (0, fixtures_1.expect)(page.getByRole("textbox")).toBeVisible();
     }));
@@ -478,7 +529,7 @@ fixtures_1.test.describe("Edge Cases", () => {
 fixtures_1.test.describe("Performance", () => {
     (0, fixtures_1.test)("component memoization prevents unnecessary re-renders", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         const { testStateDriver } = yield initTestBed(`
-      <TextArea 
+      <TextArea
         label="Performance Test"
         onDidChange="testState = ++testState || 1"
       />
@@ -569,7 +620,7 @@ fixtures_1.test.describe("Integration", () => {
     (0, fixtures_1.test)("component works with event handling chain", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         const { testStateDriver } = yield initTestBed(`
       <Fragment>
-        <TextArea 
+        <TextArea
           onGotFocus="testState = 'focused'"
           onLostFocus="testState = 'blurred'"
           onDidChange="(value) => testState = 'changed: ' + value"

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

@@ -257,6 +257,13 @@ fixtures_1.test.describe("Event Handling", () => {
         yield driver.input.focus();
         yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("focused");
     }));
+    (0, fixtures_1.test)("gotFocus event fires on label click", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <TextBox label="Username" onGotFocus="testState = 'focused'" />
+    `);
+        yield page.getByText("Username").click();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("focused");
+    }));
     (0, fixtures_1.test)("component lostFocus event fires on blur", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
         const { testStateDriver } = yield initTestBed(`
       <TextBox testId="test" onLostFocus="testState = 'blurred'" />

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

@@ -31,6 +31,7 @@ exports.ThemeMd = (0, metadata_helpers_1.createMetadata)({
             defaultValue: "light",
         },
         root: (0, metadata_helpers_1.d)(`This property indicates whether the component is at the root of the application.`, undefined, "boolean", ThemeNative_1.defaultProps.root),
+        applyIf: (0, metadata_helpers_1.d)(`This property controls whether the theme wrapper is applied. When true (default), the theme wraps the children. When false, children are rendered unwrapped.`, undefined, "boolean", true),
     },
     opaque: true,
 });
@@ -42,5 +43,5 @@ exports.themeComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP,
     if (themeTone && themeTone !== "dark") {
         themeTone = "light";
     }
-    return ((0, jsx_runtime_1.jsx)(ThemeNative_1.Theme, { id: extractValue.asOptionalString(node.props.themeId), isRoot: extractValue.asOptionalBoolean(node.props.root), layoutContext: layoutContext, renderChild: renderChild, tone: themeTone, toastDuration: toastDuration, themeVars: extractValue(restProps), node: node }));
+    return ((0, jsx_runtime_1.jsx)(ThemeNative_1.Theme, { id: extractValue.asOptionalString(node.props.themeId), isRoot: extractValue.asOptionalBoolean(node.props.root), applyIf: extractValue.asOptionalBoolean(node.props.applyIf), layoutContext: layoutContext, renderChild: renderChild, tone: themeTone, toastDuration: toastDuration, themeVars: extractValue(restProps), node: node }));
 });