xmlui 0.10.16 → 0.10.19

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

@@ -220,6 +220,278 @@ fixtures_1.test.describe("Basic Functionality", () => {
             yield (0, fixtures_1.expect)(table).toBeFocused();
         }));
     });
+    fixtures_1.test.describe("checkboxTolerance property", () => {
+        (0, fixtures_1.test)("allows checkbox interaction within compact tolerance boundary", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Table data='{${JSON.stringify(sampleData)}}' 
+               rowsSelectable="true" 
+               checkboxTolerance="compact"
+               onSelectionDidChange="testState = 'selection changed'"
+               testId="table">
+          <Column bindTo="name"/>
+          <Column bindTo="quantity"/>
+        </Table>
+      `);
+            // Get first row checkbox - checkboxes exist but are hidden via CSS
+            const firstRowCheckbox = page.locator("input[type='checkbox']").nth(1); // Skip header checkbox
+            // Verify checkbox exists (even if hidden)
+            yield (0, fixtures_1.expect)(firstRowCheckbox).toBeAttached();
+            // Get the first table row to interact with
+            const firstDataRow = page.locator("tbody tr").first();
+            yield (0, fixtures_1.expect)(firstDataRow).toBeVisible();
+            // Get row bounds for calculation
+            const rowBounds = yield firstDataRow.boundingBox();
+            // Click near the left edge of the row (where checkbox would be with tolerance)
+            // This simulates clicking within the 8px compact tolerance of the checkbox
+            const clickX = rowBounds.x + 15; // Slightly to the right of where checkbox would be
+            const clickY = rowBounds.y + rowBounds.height / 2;
+            // Click within tolerance boundary should trigger selection due to checkboxTolerance="compact"
+            yield page.mouse.click(clickX, clickY);
+            // Verify checkbox is now checked (using force since it's hidden)
+            yield (0, fixtures_1.expect)(firstRowCheckbox).toBeChecked();
+            // Verify selection event was fired
+            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual('selection changed');
+        }));
+        (0, fixtures_1.test)("allows header checkbox interaction within compact tolerance boundary", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Table data='{${JSON.stringify(sampleData)}}' 
+               rowsSelectable="true" 
+               enableMultiRowSelection="true"
+               checkboxTolerance="compact"
+               onSelectionDidChange="testState = 'header selection changed'"
+               testId="table">
+          <Column bindTo="name"/>
+          <Column bindTo="quantity"/>
+        </Table>
+      `);
+            // Get header checkbox (select all checkbox)
+            const headerCheckbox = page.locator("input[type='checkbox']").first(); // Header checkbox is first
+            // Verify checkbox exists (even if hidden)
+            yield (0, fixtures_1.expect)(headerCheckbox).toBeAttached();
+            // Get the header row to interact with
+            const headerRow = page.locator("thead tr").first();
+            yield (0, fixtures_1.expect)(headerRow).toBeVisible();
+            // Get header row bounds for calculation
+            const headerBounds = yield headerRow.boundingBox();
+            // Click near the left edge of the header row (where checkbox would be with tolerance)
+            // This simulates clicking within the 8px compact tolerance of the header checkbox
+            const clickX = headerBounds.x + 15; // Slightly to the right of where checkbox would be
+            const clickY = headerBounds.y + headerBounds.height / 2;
+            // Click within tolerance boundary should trigger "select all" due to checkboxTolerance="compact"
+            yield page.mouse.click(clickX, clickY);
+            // Verify header checkbox is now checked (select all)
+            yield (0, fixtures_1.expect)(headerCheckbox).toBeChecked();
+            // Verify all row checkboxes are also checked (select all behavior)
+            const allCheckboxes = page.locator("input[type='checkbox']");
+            const checkboxCount = yield allCheckboxes.count();
+            for (let i = 0; i < checkboxCount; i++) {
+                yield (0, fixtures_1.expect)(allCheckboxes.nth(i)).toBeChecked();
+            }
+            // Verify selection event was fired
+            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual('header selection changed');
+        }));
+        (0, fixtures_1.test)("allows checkbox interaction within none tolerance boundary", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Table data='{${JSON.stringify(sampleData)}}' 
+               rowsSelectable="true" 
+               checkboxTolerance="none"
+               onSelectionDidChange="testState = 'none selection changed'"
+               testId="table">
+          <Column bindTo="name"/>
+          <Column bindTo="quantity"/>
+        </Table>
+      `);
+            // Get first row checkbox - checkboxes exist but are hidden via CSS
+            const firstRowCheckbox = page.locator("input[type='checkbox']").nth(1); // Skip header checkbox
+            // Verify checkbox exists (even if hidden)
+            yield (0, fixtures_1.expect)(firstRowCheckbox).toBeAttached();
+            // Get the first table row to interact with
+            const firstDataRow = page.locator("tbody tr").first();
+            yield (0, fixtures_1.expect)(firstDataRow).toBeVisible();
+            // Get row bounds for calculation
+            const rowBounds = yield firstDataRow.boundingBox();
+            // For "none" tolerance, we need to click precisely on the checkbox
+            // Since checkboxes are hidden, click on their expected position
+            yield firstRowCheckbox.click({ force: true });
+            // Verify checkbox is now checked
+            yield (0, fixtures_1.expect)(firstRowCheckbox).toBeChecked();
+            // Verify selection event was fired
+            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual('none selection changed');
+        }));
+        (0, fixtures_1.test)("allows header checkbox interaction within none tolerance boundary", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Table data='{${JSON.stringify(sampleData)}}' 
+               rowsSelectable="true" 
+               enableMultiRowSelection="true"
+               checkboxTolerance="none"
+               onSelectionDidChange="testState = 'header none selection changed'"
+               testId="table">
+          <Column bindTo="name"/>
+          <Column bindTo="quantity"/>
+        </Table>
+      `);
+            // Get header checkbox (select all checkbox)
+            const headerCheckbox = page.locator("input[type='checkbox']").first(); // Header checkbox is first
+            // Verify checkbox exists (even if hidden)
+            yield (0, fixtures_1.expect)(headerCheckbox).toBeAttached();
+            // Get the header row to interact with
+            const headerRow = page.locator("thead tr").first();
+            yield (0, fixtures_1.expect)(headerRow).toBeVisible();
+            // Get header row bounds for calculation
+            const headerBounds = yield headerRow.boundingBox();
+            // For "none" tolerance, we need to click precisely on the checkbox
+            // Since checkboxes are hidden, click on their expected position
+            yield headerCheckbox.click({ force: true });
+            // Verify header checkbox is now checked (select all)
+            yield (0, fixtures_1.expect)(headerCheckbox).toBeChecked();
+            // Verify all row checkboxes are also checked (select all behavior)
+            const allCheckboxes = page.locator("input[type='checkbox']");
+            const checkboxCount = yield allCheckboxes.count();
+            for (let i = 0; i < checkboxCount; i++) {
+                yield (0, fixtures_1.expect)(allCheckboxes.nth(i)).toBeChecked();
+            }
+            // Verify selection event was fired
+            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual('header none selection changed');
+        }));
+        (0, fixtures_1.test)("allows checkbox interaction within comfortable tolerance boundary", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Table data='{${JSON.stringify(sampleData)}}' 
+               rowsSelectable="true" 
+               checkboxTolerance="comfortable"
+               onSelectionDidChange="testState = 'comfortable selection changed'"
+               testId="table">
+          <Column bindTo="name"/>
+          <Column bindTo="quantity"/>
+        </Table>
+      `);
+            // Get first row checkbox - checkboxes exist but are hidden via CSS
+            const firstRowCheckbox = page.locator("input[type='checkbox']").nth(1); // Skip header checkbox
+            // Verify checkbox exists (even if hidden)
+            yield (0, fixtures_1.expect)(firstRowCheckbox).toBeAttached();
+            // Get the first table row to interact with
+            const firstDataRow = page.locator("tbody tr").first();
+            yield (0, fixtures_1.expect)(firstDataRow).toBeVisible();
+            // Get row bounds for calculation
+            const rowBounds = yield firstDataRow.boundingBox();
+            // Click near the left edge of the row (where checkbox would be with tolerance)
+            // This simulates clicking within the 12px comfortable tolerance of the checkbox
+            const clickX = rowBounds.x + 20; // Further right to test 12px tolerance
+            const clickY = rowBounds.y + rowBounds.height / 2;
+            // Click within tolerance boundary should trigger selection due to checkboxTolerance="comfortable"
+            yield page.mouse.click(clickX, clickY);
+            // Verify checkbox is now checked
+            yield (0, fixtures_1.expect)(firstRowCheckbox).toBeChecked();
+            // Verify selection event was fired
+            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual('comfortable selection changed');
+        }));
+        (0, fixtures_1.test)("allows header checkbox interaction within comfortable tolerance boundary", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Table data='{${JSON.stringify(sampleData)}}' 
+               rowsSelectable="true" 
+               enableMultiRowSelection="true"
+               checkboxTolerance="comfortable"
+               onSelectionDidChange="testState = 'header comfortable selection changed'"
+               testId="table">
+          <Column bindTo="name"/>
+          <Column bindTo="quantity"/>
+        </Table>
+      `);
+            // Get header checkbox (select all checkbox)
+            const headerCheckbox = page.locator("input[type='checkbox']").first(); // Header checkbox is first
+            // Verify checkbox exists (even if hidden)
+            yield (0, fixtures_1.expect)(headerCheckbox).toBeAttached();
+            // Get the header row to interact with
+            const headerRow = page.locator("thead tr").first();
+            yield (0, fixtures_1.expect)(headerRow).toBeVisible();
+            // Get header row bounds for calculation
+            const headerBounds = yield headerRow.boundingBox();
+            // Click near the left edge of the header row (where checkbox would be with tolerance)
+            // This simulates clicking within the 12px comfortable tolerance of the header checkbox
+            const clickX = headerBounds.x + 20; // Further right to test 12px tolerance
+            const clickY = headerBounds.y + headerBounds.height / 2;
+            // Click within tolerance boundary should trigger "select all" due to checkboxTolerance="comfortable"
+            yield page.mouse.click(clickX, clickY);
+            // Verify header checkbox is now checked (select all)
+            yield (0, fixtures_1.expect)(headerCheckbox).toBeChecked();
+            // Verify all row checkboxes are also checked (select all behavior)
+            const allCheckboxes = page.locator("input[type='checkbox']");
+            const checkboxCount = yield allCheckboxes.count();
+            for (let i = 0; i < checkboxCount; i++) {
+                yield (0, fixtures_1.expect)(allCheckboxes.nth(i)).toBeChecked();
+            }
+            // Verify selection event was fired
+            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual('header comfortable selection changed');
+        }));
+        (0, fixtures_1.test)("allows checkbox interaction within spacious tolerance boundary", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Table data='{${JSON.stringify(sampleData)}}' 
+               rowsSelectable="true" 
+               checkboxTolerance="spacious"
+               onSelectionDidChange="testState = 'spacious selection changed'"
+               testId="table">
+          <Column bindTo="name"/>
+          <Column bindTo="quantity"/>
+        </Table>
+      `);
+            // Get first row checkbox - checkboxes exist but are hidden via CSS
+            const firstRowCheckbox = page.locator("input[type='checkbox']").nth(1); // Skip header checkbox
+            // Verify checkbox exists (even if hidden)
+            yield (0, fixtures_1.expect)(firstRowCheckbox).toBeAttached();
+            // Get the first table row to interact with
+            const firstDataRow = page.locator("tbody tr").first();
+            yield (0, fixtures_1.expect)(firstDataRow).toBeVisible();
+            // Get row bounds for calculation
+            const rowBounds = yield firstDataRow.boundingBox();
+            // Click near the left edge of the row (where checkbox would be with tolerance)
+            // This simulates clicking within the 16px spacious tolerance of the checkbox
+            const clickX = rowBounds.x + 24; // Even further right to test 16px tolerance
+            const clickY = rowBounds.y + rowBounds.height / 2;
+            // Click within tolerance boundary should trigger selection due to checkboxTolerance="spacious"
+            yield page.mouse.click(clickX, clickY);
+            // Verify checkbox is now checked
+            yield (0, fixtures_1.expect)(firstRowCheckbox).toBeChecked();
+            // Verify selection event was fired
+            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual('spacious selection changed');
+        }));
+        (0, fixtures_1.test)("allows header checkbox interaction within spacious tolerance boundary", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Table data='{${JSON.stringify(sampleData)}}' 
+               rowsSelectable="true" 
+               enableMultiRowSelection="true"
+               checkboxTolerance="spacious"
+               onSelectionDidChange="testState = 'header spacious selection changed'"
+               testId="table">
+          <Column bindTo="name"/>
+          <Column bindTo="quantity"/>
+        </Table>
+      `);
+            // Get header checkbox (select all checkbox)
+            const headerCheckbox = page.locator("input[type='checkbox']").first(); // Header checkbox is first
+            // Verify checkbox exists (even if hidden)
+            yield (0, fixtures_1.expect)(headerCheckbox).toBeAttached();
+            // Get the header row to interact with
+            const headerRow = page.locator("thead tr").first();
+            yield (0, fixtures_1.expect)(headerRow).toBeVisible();
+            // Get header row bounds for calculation
+            const headerBounds = yield headerRow.boundingBox();
+            // Click near the left edge of the header row (where checkbox would be with tolerance)
+            // This simulates clicking within the 16px spacious tolerance of the header checkbox
+            const clickX = headerBounds.x + 24; // Even further right to test 16px tolerance
+            const clickY = headerBounds.y + headerBounds.height / 2;
+            // Click within tolerance boundary should trigger "select all" due to checkboxTolerance="spacious"
+            yield page.mouse.click(clickX, clickY);
+            // Verify header checkbox is now checked (select all)
+            yield (0, fixtures_1.expect)(headerCheckbox).toBeChecked();
+            // Verify all row checkboxes are also checked (select all behavior)
+            const allCheckboxes = page.locator("input[type='checkbox']");
+            const checkboxCount = yield allCheckboxes.count();
+            for (let i = 0; i < checkboxCount; i++) {
+                yield (0, fixtures_1.expect)(allCheckboxes.nth(i)).toBeChecked();
+            }
+            // Verify selection event was fired
+            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual('header spacious selection changed');
+        }));
+    });
     fixtures_1.test.describe("noDataTemplate property", () => {
         (0, fixtures_1.test)("shows custom no data template when data is empty", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
             yield initTestBed(`

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/TextArea/TextArea.js

@@ -64,10 +64,6 @@ exports.TextAreaMd = (0, metadata_helpers_1.createMetadata)({
         },
         placeholder: (0, metadata_helpers_1.dPlaceholder)(),
         initialValue: (0, metadata_helpers_1.dInitialValue)(),
-        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)(),
@@ -103,5 +99,5 @@ exports.TextAreaMd = (0, metadata_helpers_1.createMetadata)({
     },
 });
 exports.textAreaComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.TextAreaMd, ({ node, extractValue, state, updateState, className, registerComponentApi, lookupEventHandler, }) => {
-    return ((0, jsx_runtime_1.jsx)(TextAreaNative_1.TextArea, { value: state === null || state === void 0 ? void 0 : state.value, initialValue: extractValue(node.props.initialValue), updateState: updateState, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue(node.props.placeholder), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), resize: node.props.resize, enterSubmits: extractValue.asOptionalBoolean(node.props.enterSubmits), escResets: extractValue.asOptionalBoolean(node.props.escResets), className: className, registerComponentApi: registerComponentApi, maxRows: extractValue.asOptionalNumber(node.props.maxRows), minRows: extractValue.asOptionalNumber(node.props.minRows), maxLength: extractValue.asOptionalNumber(node.props.maxLength), rows: extractValue.asOptionalNumber(node.props.rows), autoSize: extractValue.asOptionalBoolean(node.props.autoSize), validationStatus: extractValue(node.props.validationStatus), label: extractValue(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required) }));
+    return ((0, jsx_runtime_1.jsx)(TextAreaNative_1.TextArea, { value: state === null || state === void 0 ? void 0 : state.value, initialValue: extractValue(node.props.initialValue), updateState: updateState, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue(node.props.placeholder), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), resize: node.props.resize, enterSubmits: extractValue.asOptionalBoolean(node.props.enterSubmits), escResets: extractValue.asOptionalBoolean(node.props.escResets), className: className, registerComponentApi: registerComponentApi, maxRows: extractValue.asOptionalNumber(node.props.maxRows), minRows: extractValue.asOptionalNumber(node.props.minRows), maxLength: extractValue.asOptionalNumber(node.props.maxLength), rows: extractValue.asOptionalNumber(node.props.rows), autoSize: extractValue.asOptionalBoolean(node.props.autoSize), validationStatus: extractValue(node.props.validationStatus), required: extractValue.asOptionalBoolean(node.props.required) }));
 });