xmlui 0.10.18 → 0.10.19

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.spec.js

@@ -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", () => {

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'" />