@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.
@@ -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(false);
73309
+ this.updateFocusStateFromActiveElement();
73309
73310
  // Sets initial focus on the appropriate table content
73310
73311
  const actionMenuOpen = this.table.openActionMenuRecordId !== undefined;
73311
- if ((event.target === this.table
73312
- || this.focusType === TableFocusType.none)
73313
- && !actionMenuOpen) {
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 (focusHeader && !this.setFocusOnHeader()) {
73320
- // nothing to focus
73321
- this.table.blur();
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(false);
73345
+ this.updateFocusStateFromActiveElement();
73339
73346
  };
73340
73347
  this.onCellFocusIn = (event) => {
73341
73348
  event.stopPropagation();
73342
73349
  const cell = event.detail;
73343
- this.updateFocusStateFromActiveElement(true);
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(false);
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(setRowFocus) {
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.getActiveElement();
73898
- if (activeElement) {
73899
- const row = this.getContainingRow(activeElement);
73900
- if (row) {
73901
- if (!(row instanceof TableGroupRow)) {
73902
- const cell = this.getContainingCell(activeElement);
73903
- if (cell) {
73904
- const columnIndex = this.table.visibleColumns.indexOf(cell.column);
73905
- if (cell.actionMenuButton === activeElement) {
73906
- this.setCellActionMenuFocusState(row.resolvedRowIndex, columnIndex, false);
73907
- return;
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 (totalRowIndex >= 0 && totalRowIndex < this.table.tableData.length) {
73970
- switch (this.focusType) {
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
- return false;
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(true);
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(true);
74288
+ this.focusCurrentRow(!this.focusedViaPointer);
74261
74289
  }
74262
74290
  }
74263
74291
  isResolvedRowType(row) {