@ni/nimble-components 35.3.0 → 35.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/all-components-bundle.js +90 -62
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +25 -23
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/esm/table/models/keyboard-navigation-manager.d.ts +6 -1
- package/dist/esm/table/models/keyboard-navigation-manager.js +90 -64
- package/dist/esm/table/models/keyboard-navigation-manager.js.map +1 -1
- package/package.json +1 -1
|
@@ -73302,25 +73302,32 @@ focus outline in that case.
|
|
|
73302
73302
|
this.columnIndex = -1;
|
|
73303
73303
|
this.focusWithinTable = false;
|
|
73304
73304
|
this.isCurrentlyFocusingElement = false;
|
|
73305
|
+
this.focusedViaPointer = false;
|
|
73305
73306
|
this.visibleRowNotifiers = [];
|
|
73306
73307
|
this.onTableFocusIn = (event) => {
|
|
73307
73308
|
this.focusWithinTable = true;
|
|
73308
|
-
this.updateFocusStateFromActiveElement(
|
|
73309
|
+
this.updateFocusStateFromActiveElement();
|
|
73309
73310
|
// Sets initial focus on the appropriate table content
|
|
73310
73311
|
const actionMenuOpen = this.table.openActionMenuRecordId !== undefined;
|
|
73311
|
-
if (
|
|
73312
|
-
|
|
73313
|
-
|
|
73314
|
-
let focusHeader = true;
|
|
73315
|
-
if (this.hasRowOrCellFocusType()
|
|
73316
|
-
&& this.scrollToAndFocusRow(this.rowIndex)) {
|
|
73317
|
-
focusHeader = false;
|
|
73312
|
+
if (!actionMenuOpen) {
|
|
73313
|
+
if (this.focusType === TableFocusType.none) {
|
|
73314
|
+
this.focusSomethingOtherThanTheTable();
|
|
73318
73315
|
}
|
|
73319
|
-
if (
|
|
73320
|
-
//
|
|
73321
|
-
this.
|
|
73316
|
+
else if (event.target === this.table) {
|
|
73317
|
+
// restore focus to last focused element
|
|
73318
|
+
if (this.hasRowOrCellFocusType() && this.rowIndexIsValid(this.rowIndex)) {
|
|
73319
|
+
this.scrollToAndFocusRow(this.rowIndex);
|
|
73320
|
+
}
|
|
73321
|
+
else if (this.hasHeaderFocusType()) {
|
|
73322
|
+
this.focusHeaderElement();
|
|
73323
|
+
}
|
|
73324
|
+
else {
|
|
73325
|
+
// should only get here if focusType was row/cell, but rowIndex was invalid
|
|
73326
|
+
this.focusSomethingOtherThanTheTable();
|
|
73327
|
+
}
|
|
73322
73328
|
}
|
|
73323
73329
|
}
|
|
73330
|
+
this.focusedViaPointer = false;
|
|
73324
73331
|
};
|
|
73325
73332
|
this.onTableFocusOut = () => {
|
|
73326
73333
|
this.focusWithinTable = false;
|
|
@@ -73335,12 +73342,18 @@ focus outline in that case.
|
|
|
73335
73342
|
};
|
|
73336
73343
|
this.onCellViewFocusIn = (event) => {
|
|
73337
73344
|
event.stopPropagation();
|
|
73338
|
-
this.updateFocusStateFromActiveElement(
|
|
73345
|
+
this.updateFocusStateFromActiveElement();
|
|
73339
73346
|
};
|
|
73340
73347
|
this.onCellFocusIn = (event) => {
|
|
73341
73348
|
event.stopPropagation();
|
|
73342
73349
|
const cell = event.detail;
|
|
73343
|
-
this.updateFocusStateFromActiveElement(
|
|
73350
|
+
const row = this.updateFocusStateFromActiveElement();
|
|
73351
|
+
if (row) {
|
|
73352
|
+
if (this.hasRowOrCellFocusType()
|
|
73353
|
+
&& this.rowIndex !== row.resolvedRowIndex) {
|
|
73354
|
+
this.setRowFocusState(row.resolvedRowIndex);
|
|
73355
|
+
}
|
|
73356
|
+
}
|
|
73344
73357
|
// Currently, clicking a non-interactive cell only updates the focus state to that row, it
|
|
73345
73358
|
// doesn't focus the cell. If we revisit this, we most likely need to set the cells to tabindex=-1
|
|
73346
73359
|
// upfront too, so their focusing behavior is consistent whether they've been previously keyboard
|
|
@@ -73411,6 +73424,12 @@ focus outline in that case.
|
|
|
73411
73424
|
}
|
|
73412
73425
|
}
|
|
73413
73426
|
};
|
|
73427
|
+
this.onPointerDown = () => {
|
|
73428
|
+
this.focusedViaPointer = true;
|
|
73429
|
+
};
|
|
73430
|
+
this.onPointerUpOrCancel = () => {
|
|
73431
|
+
this.focusedViaPointer = false;
|
|
73432
|
+
};
|
|
73414
73433
|
this.onViewportKeyDown = (event) => {
|
|
73415
73434
|
let handleEvent = !this.inNavigationMode
|
|
73416
73435
|
&& (event.key === keyArrowUp || event.key === keyArrowDown);
|
|
@@ -73446,6 +73465,9 @@ focus outline in that case.
|
|
|
73446
73465
|
connect() {
|
|
73447
73466
|
this.table.addEventListener('keydown', this.onCaptureKeyDown, { capture: true });
|
|
73448
73467
|
this.table.addEventListener('keydown', this.onKeyDown);
|
|
73468
|
+
this.table.addEventListener('pointerdown', this.onPointerDown);
|
|
73469
|
+
this.table.addEventListener('pointerup', this.onPointerUpOrCancel);
|
|
73470
|
+
this.table.addEventListener('pointercancel', this.onPointerUpOrCancel);
|
|
73449
73471
|
this.table.addEventListener('focusin', this.onTableFocusIn);
|
|
73450
73472
|
this.table.addEventListener('focusout', this.onTableFocusOut);
|
|
73451
73473
|
this.table.viewport.addEventListener('keydown', this.onViewportKeyDown);
|
|
@@ -73457,6 +73479,9 @@ focus outline in that case.
|
|
|
73457
73479
|
disconnect() {
|
|
73458
73480
|
this.table.removeEventListener('keydown', this.onCaptureKeyDown, { capture: true });
|
|
73459
73481
|
this.table.removeEventListener('keydown', this.onKeyDown);
|
|
73482
|
+
this.table.removeEventListener('pointerdown', this.onPointerDown);
|
|
73483
|
+
this.table.removeEventListener('pointerup', this.onPointerUpOrCancel);
|
|
73484
|
+
this.table.removeEventListener('pointercancel', this.onPointerUpOrCancel);
|
|
73460
73485
|
this.table.removeEventListener('focusin', this.onTableFocusIn);
|
|
73461
73486
|
this.table.removeEventListener('focusout', this.onTableFocusOut);
|
|
73462
73487
|
this.table.viewport.removeEventListener('keydown', this.onViewportKeyDown);
|
|
@@ -73548,6 +73573,13 @@ focus outline in that case.
|
|
|
73548
73573
|
this.setCellActionMenuFocusState(row.resolvedRowIndex, columnIndex, false);
|
|
73549
73574
|
}
|
|
73550
73575
|
}
|
|
73576
|
+
focusSomethingOtherThanTheTable() {
|
|
73577
|
+
this.setDefaultFocus();
|
|
73578
|
+
if (this.focusType === TableFocusType.none) {
|
|
73579
|
+
// nothing within the table to focus
|
|
73580
|
+
this.table.blur();
|
|
73581
|
+
}
|
|
73582
|
+
}
|
|
73551
73583
|
onEnterPressed(ctrlKey) {
|
|
73552
73584
|
let row;
|
|
73553
73585
|
let rowElements;
|
|
@@ -73719,7 +73751,7 @@ focus outline in that case.
|
|
|
73719
73751
|
this.headerActionIndex = nextFocusState.headerActionIndex ?? this.headerActionIndex;
|
|
73720
73752
|
this.cellContentIndex = nextFocusState.cellContentIndex ?? this.cellContentIndex;
|
|
73721
73753
|
if (this.hasRowOrCellFocusType()) {
|
|
73722
|
-
this.focusCurrentRow(
|
|
73754
|
+
this.focusCurrentRow(!this.focusedViaPointer);
|
|
73723
73755
|
}
|
|
73724
73756
|
else {
|
|
73725
73757
|
this.focusHeaderElement();
|
|
@@ -73891,35 +73923,39 @@ focus outline in that case.
|
|
|
73891
73923
|
}
|
|
73892
73924
|
return false;
|
|
73893
73925
|
}
|
|
73894
|
-
updateFocusStateFromActiveElement(
|
|
73926
|
+
updateFocusStateFromActiveElement() {
|
|
73895
73927
|
// If the user is interacting with the table with non-keyboard methods (like mouse), we need to
|
|
73896
73928
|
// update our focus state based on the current active/focused element
|
|
73897
|
-
const activeElement = this.
|
|
73898
|
-
if (
|
|
73899
|
-
|
|
73900
|
-
|
|
73901
|
-
|
|
73902
|
-
|
|
73903
|
-
|
|
73904
|
-
|
|
73905
|
-
|
|
73906
|
-
|
|
73907
|
-
|
|
73908
|
-
|
|
73909
|
-
const contentIndex = cell.cellView.tabbableChildren.indexOf(activeElement);
|
|
73910
|
-
if (contentIndex > -1) {
|
|
73911
|
-
this.setCellContentFocusState(contentIndex, row.resolvedRowIndex, columnIndex, false);
|
|
73912
|
-
return;
|
|
73913
|
-
}
|
|
73914
|
-
}
|
|
73915
|
-
}
|
|
73916
|
-
if (setRowFocus
|
|
73917
|
-
&& this.hasRowOrCellFocusType()
|
|
73918
|
-
&& this.rowIndex !== row.resolvedRowIndex) {
|
|
73919
|
-
this.setRowFocusState(row.resolvedRowIndex);
|
|
73920
|
-
}
|
|
73929
|
+
const { activeElement, row, cell } = this.getActiveElementCellAndRow();
|
|
73930
|
+
if (!cell) {
|
|
73931
|
+
return row;
|
|
73932
|
+
}
|
|
73933
|
+
const columnIndex = this.table.visibleColumns.indexOf(cell.column);
|
|
73934
|
+
if (cell.actionMenuButton === activeElement) {
|
|
73935
|
+
this.setCellActionMenuFocusState(row.resolvedRowIndex, columnIndex, false);
|
|
73936
|
+
}
|
|
73937
|
+
else {
|
|
73938
|
+
const contentIndex = cell.cellView.tabbableChildren.indexOf(activeElement);
|
|
73939
|
+
if (contentIndex > -1) {
|
|
73940
|
+
this.setCellContentFocusState(contentIndex, row.resolvedRowIndex, columnIndex, false);
|
|
73921
73941
|
}
|
|
73922
73942
|
}
|
|
73943
|
+
return row;
|
|
73944
|
+
}
|
|
73945
|
+
getActiveElementCellAndRow() {
|
|
73946
|
+
const activeElement = this.getActiveElement();
|
|
73947
|
+
if (!activeElement) {
|
|
73948
|
+
return {};
|
|
73949
|
+
}
|
|
73950
|
+
const row = this.getContainingRow(activeElement);
|
|
73951
|
+
if (!row) {
|
|
73952
|
+
return { activeElement };
|
|
73953
|
+
}
|
|
73954
|
+
if (row instanceof TableGroupRow) {
|
|
73955
|
+
return { activeElement, row };
|
|
73956
|
+
}
|
|
73957
|
+
const cell = this.getContainingCell(activeElement);
|
|
73958
|
+
return { activeElement, row, cell };
|
|
73923
73959
|
}
|
|
73924
73960
|
focusElement(element, focusOptions) {
|
|
73925
73961
|
const previousActiveElement = this.getActiveElement();
|
|
@@ -73950,13 +73986,6 @@ focus outline in that case.
|
|
|
73950
73986
|
menuButton.classList.remove('cell-action-menu-focused');
|
|
73951
73987
|
}
|
|
73952
73988
|
}
|
|
73953
|
-
setFocusOnHeader() {
|
|
73954
|
-
if (this.hasHeaderFocusType()) {
|
|
73955
|
-
return this.focusHeaderElement();
|
|
73956
|
-
}
|
|
73957
|
-
this.setDefaultFocus();
|
|
73958
|
-
return this.focusType !== TableFocusType.none;
|
|
73959
|
-
}
|
|
73960
73989
|
setDefaultFocus() {
|
|
73961
73990
|
const headerElements = this.getTableHeaderFocusableElements();
|
|
73962
73991
|
if (!this.trySetHeaderActionFocus(headerElements, 0)
|
|
@@ -73966,20 +73995,19 @@ focus outline in that case.
|
|
|
73966
73995
|
}
|
|
73967
73996
|
}
|
|
73968
73997
|
scrollToAndFocusRow(totalRowIndex, scrollOptions) {
|
|
73969
|
-
if (
|
|
73970
|
-
|
|
73971
|
-
case TableFocusType.none:
|
|
73972
|
-
case TableFocusType.headerActions:
|
|
73973
|
-
case TableFocusType.columnHeader:
|
|
73974
|
-
this.setRowFocusState(totalRowIndex);
|
|
73975
|
-
break;
|
|
73976
|
-
}
|
|
73977
|
-
this.rowIndex = totalRowIndex;
|
|
73978
|
-
this.virtualizer.scrollToIndex(totalRowIndex, scrollOptions);
|
|
73979
|
-
this.focusCurrentRow(true);
|
|
73980
|
-
return true;
|
|
73998
|
+
if (!this.rowIndexIsValid(totalRowIndex)) {
|
|
73999
|
+
return false;
|
|
73981
74000
|
}
|
|
73982
|
-
|
|
74001
|
+
if (!this.hasRowOrCellFocusType()) {
|
|
74002
|
+
this.setRowFocusState();
|
|
74003
|
+
}
|
|
74004
|
+
this.rowIndex = totalRowIndex;
|
|
74005
|
+
this.virtualizer.scrollToIndex(totalRowIndex, scrollOptions);
|
|
74006
|
+
this.focusCurrentRow(!this.focusedViaPointer);
|
|
74007
|
+
return true;
|
|
74008
|
+
}
|
|
74009
|
+
rowIndexIsValid(rowIndex) {
|
|
74010
|
+
return rowIndex >= 0 && rowIndex < this.table.tableData.length;
|
|
73983
74011
|
}
|
|
73984
74012
|
focusCurrentRow(allowScroll) {
|
|
73985
74013
|
const visibleRowIndex = this.getCurrentRowVisibleIndex();
|
|
@@ -74047,7 +74075,7 @@ focus outline in that case.
|
|
|
74047
74075
|
break;
|
|
74048
74076
|
}
|
|
74049
74077
|
if (focusableElement) {
|
|
74050
|
-
this.focusElement(focusableElement);
|
|
74078
|
+
this.focusElement(focusableElement, { preventScroll: this.focusedViaPointer });
|
|
74051
74079
|
return true;
|
|
74052
74080
|
}
|
|
74053
74081
|
return false;
|
|
@@ -74168,7 +74196,7 @@ focus outline in that case.
|
|
|
74168
74196
|
trySetRowSelectionCheckboxFocus(rowElements) {
|
|
74169
74197
|
if (rowElements?.selectionCheckbox) {
|
|
74170
74198
|
this.focusType = TableFocusType.rowSelectionCheckbox;
|
|
74171
|
-
this.focusCurrentRow(
|
|
74199
|
+
this.focusCurrentRow(!this.focusedViaPointer);
|
|
74172
74200
|
return true;
|
|
74173
74201
|
}
|
|
74174
74202
|
return false;
|
|
@@ -74257,7 +74285,7 @@ focus outline in that case.
|
|
|
74257
74285
|
this.rowIndex = rowIndex;
|
|
74258
74286
|
this.columnIndex = columnIndex;
|
|
74259
74287
|
if (focusElement) {
|
|
74260
|
-
this.focusCurrentRow(
|
|
74288
|
+
this.focusCurrentRow(!this.focusedViaPointer);
|
|
74261
74289
|
}
|
|
74262
74290
|
}
|
|
74263
74291
|
isResolvedRowType(row) {
|