@ni/nimble-components 30.0.0 → 30.0.2

package/dist/all-components-bundle.js

@@ -16333,7 +16333,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Tue, 16 Jul 2024 22:15:12 GMT
+   * Generated on Wed, 17 Jul 2024 17:49:16 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -64816,12 +64816,6 @@ img.ProseMirror-separator {
       get tabbableChildren() {
           return [];
       }
-      /**
-       * Called if an element inside this cell view has focus, and this row/cell is being recycled.
-       * Expected implementation is to commit changes as needed, and blur the focusable element (or close
-       * the menu/popup/etc).
-       */
-      focusedRecycleCallback() { }
       columnChanged() {
           for (const eventName of this.delegatedEvents) {
               this.removeEventListener(eventName, this.delegatedEventHandler);
@@ -66067,14 +66061,6 @@ focus outline in that case.
           this.menuOpen = event.detail.newState;
           this.emitActionMenuToggleEvent('row-action-menu-toggle', event.detail, column);
       }
-      closeOpenActionMenus() {
-          if (this.menuOpen) {
-              const cellWithMenuOpen = Array.from(this.cellContainer.children).find(c => c instanceof TableCell && c.menuOpen);
-              if (cellWithMenuOpen?.actionMenuButton?.open) {
-                  cellWithMenuOpen.actionMenuButton.toggleButton.control.click();
-              }
-          }
-      }
       /** @internal */
       handleChange(source, args) {
           if (source instanceof ColumnInternals
@@ -66681,15 +66667,7 @@ focus outline in that case.
                                         @row-slots-request="${(_, c) => c.parent.onRowSlotsRequest(c.event)}"
                                         @row-expand-toggle="${(x, c) => c.parent.handleRowExpanded(x.index)}"
                                     >
-                                    ${when((x, c) => c.parent.openActionMenuRecordId === c.parent.tableData[x.index]?.id, html `
-                                        ${repeat((_, c) => c.parent.actionMenuSlots, html `
-                                            <slot
-                                                name="${x => x}"
-                                                slot="${x => `row-action-menu-${x}`}">
-                                            </slot>
-                                        `)}
-                                    `)}
-                                    ${repeat((x, c) => (c.parent.tableData[x.index]?.slots || []), html `
+                                    ${repeat((x, c) => (c.parent.tableData[x.index]?.requestedSlots || []), html `
                                         <slot
                                             name="${x => x.name}"
                                             slot="${x => x.slot}"
@@ -67513,7 +67491,6 @@ focus outline in that case.
           };
       }
       handleVirtualizerChange() {
-          this.table.handleFocusedCellRecycling();
           const virtualizer = this.virtualizer;
           this.visibleItems = virtualizer.getVirtualItems();
           this.scrollHeight = virtualizer.getTotalSize();
@@ -68831,9 +68808,10 @@ focus outline in that case.
               }
           }
           if (focusRowAndCell) {
-              // Focusable elements in cells, and action menus, are both blurred on scroll. To maintain our row/cell focus state,
-              // we focus the cell instead here. (We also don't want to refocus the cell content when the focusedRecycleCallback just
-              // blurred it.)
+              // We want open action menus to be closed, and focused interactive cell content blurred, on scroll. We also don't want to
+              // refocus the interactive cell content after the scroll, as the element no longer represents the same table data at that
+              // point. So in both those cases, we focus the cell here. This also lets us maintain what row/ cell the user had focused
+              // previously.
               if (this.focusType === TableFocusType.cellActionMenu
                   || this.focusType === TableFocusType.cellContent) {
                   this.setCellFocusState(this.columnIndex, this.rowIndex, false);
@@ -68860,11 +68838,6 @@ focus outline in that case.
               }
           }
       }
-      handleFocusedCellRecycling(hadRowOrCellFocus) {
-          if (hadRowOrCellFocus && !this.focusWithinTable) {
-              this.focusCurrentRow(false);
-          }
-      }
       onRowFocusIn(event) {
           if (this.isCurrentlyFocusingElement) {
               return;
@@ -69643,10 +69616,6 @@ focus outline in that case.
            * @internal
            */
           this.rowElements = [];
-          /**
-           * @internal
-           */
-          this.actionMenuSlots = [];
           /**
            * @internal
            */
@@ -69685,7 +69654,8 @@ focus outline in that case.
           this.ignoreSelectionChangeEvents = false;
           // Map from the external slot name to the record ID of the row that should have the slot
           // and the unique slot name that the slot should be slotted into.
-          this.columnRequestedSlots = new Map();
+          this.requestedSlots = new Map();
+          this.actionMenuSlots = [];
           this.onViewPortScroll = (event) => {
               this.scrollX = event.target.scrollLeft;
           };
@@ -69883,7 +69853,7 @@ focus outline in that case.
           event.stopImmediatePropagation();
           for (const slotMetadata of event.detail.slots) {
               const uniqueSlot = uniquifySlotNameForColumnId(event.detail.columnInternalId, slotMetadata.slot);
-              this.columnRequestedSlots.set(slotMetadata.name, {
+              this.requestedSlots.set(slotMetadata.name, {
                   recordId: event.detail.recordId,
                   uniqueSlot
               });
@@ -70037,29 +70007,6 @@ focus outline in that case.
           }
           return tanStackUpdates;
       }
-      /** @internal */
-      handleFocusedCellRecycling() {
-          const hadActiveRowOrCellFocus = this.keyboardNavigationManager.hasActiveRowOrCellFocus;
-          let tableFocusedElement = this.shadowRoot.activeElement;
-          while (tableFocusedElement !== null
-              && !(tableFocusedElement instanceof TableCellView)) {
-              if (tableFocusedElement.shadowRoot) {
-                  tableFocusedElement = tableFocusedElement.shadowRoot.activeElement;
-              }
-              else {
-                  break;
-              }
-          }
-          if (tableFocusedElement instanceof TableCellView) {
-              tableFocusedElement.focusedRecycleCallback();
-          }
-          if (this.openActionMenuRecordId !== undefined) {
-              const activeRow = this.rowElements.find(row => row instanceof TableRow
-                  && row.recordId === this.openActionMenuRecordId);
-              activeRow?.closeOpenActionMenus();
-          }
-          this.keyboardNavigationManager.handleFocusedCellRecycling(hadActiveRowOrCellFocus);
-      }
       selectionModeChanged(_prev, _next) {
           if (!this.$fastController.isConnected) {
               return;
@@ -70085,9 +70032,12 @@ focus outline in that case.
           this.observeColumns();
           this.tableUpdateTracker.trackColumnInstancesChanged();
       }
-      removeActionMenuSlotsFromColumnRequestedSlots() {
+      updateRequestedSlotsForOpeningActionMenu(openActionMenuRecordId) {
           for (const actionMenuSlot of this.actionMenuSlots) {
-              this.columnRequestedSlots.delete(actionMenuSlot);
+              this.requestedSlots.set(actionMenuSlot, {
+                  recordId: openActionMenuRecordId,
+                  uniqueSlot: `row-action-menu-${actionMenuSlot}`
+              });
           }
           this.refreshRows();
       }
@@ -70097,7 +70047,7 @@ focus outline in that case.
               await this.emitSelectionChangeEvent();
           }
           this.openActionMenuRecordId = event.detail.recordIds[0];
-          this.removeActionMenuSlotsFromColumnRequestedSlots();
+          this.updateRequestedSlotsForOpeningActionMenu(this.openActionMenuRecordId);
           const detail = await this.getActionMenuToggleEventDetail(event);
           this.$emit('action-menu-beforetoggle', detail);
       }
@@ -70225,6 +70175,13 @@ focus outline in that case.
           this.updateTableOptions(updatedOptions);
       }
       updateActionMenuSlots() {
+          if (this.openActionMenuRecordId !== undefined) {
+              // If the action menu is open, delete all the slots associated
+              // with the old action menu slots.
+              for (const actionMenuSlot of this.actionMenuSlots) {
+                  this.requestedSlots.delete(actionMenuSlot);
+              }
+          }
           const slots = new Set();
           for (const column of this.columns) {
               if (column.actionMenuSlot) {
@@ -70232,6 +70189,11 @@ focus outline in that case.
               }
           }
           this.actionMenuSlots = Array.from(slots);
+          if (this.openActionMenuRecordId !== undefined) {
+              // If the action menu is open, create slots for all the new
+              // action menu slots.
+              this.updateRequestedSlotsForOpeningActionMenu(this.openActionMenuRecordId);
+          }
       }
       validate() {
           this.tableValidator.validateIdFieldConfiguration(this.selectionMode, this.idFieldName, this.parentIdFieldName);
@@ -70316,7 +70278,7 @@ focus outline in that case.
                   groupColumn: this.getGroupRowColumn(row),
                   resolvedRowIndex: row.index,
                   isLoadingChildren: this.expansionManager.isLoadingChildren(row.id),
-                  slots: slotsByRecordId[row.id] ?? []
+                  requestedSlots: slotsByRecordId[row.id] ?? []
               };
               hasDataHierarchy = hasDataHierarchy || isParent;
               return rowState;
@@ -70328,7 +70290,7 @@ focus outline in that case.
       getRequestedSlotsByRecordId() {
           const slotsByRecordId = {};
           for (const [slotName, { recordId, uniqueSlot }] of this
-              .columnRequestedSlots) {
+              .requestedSlots) {
               if (!Object.prototype.hasOwnProperty.call(slotsByRecordId, recordId)) {
                   slotsByRecordId[recordId] = [];
               }
@@ -70476,9 +70438,6 @@ focus outline in that case.
   __decorate$1([
       observable
   ], Table$1.prototype, "rowElements", void 0);
-  __decorate$1([
-      observable
-  ], Table$1.prototype, "actionMenuSlots", void 0);
   __decorate$1([
       observable
   ], Table$1.prototype, "openActionMenuRecordId", void 0);
@@ -70714,9 +70673,6 @@ focus outline in that case.
       get showAnchor() {
           return typeof this.cellRecord?.href === 'string';
       }
-      focusedRecycleCallback() {
-          this.anchor?.blur();
-      }
       get tabbableChildren() {
           if (this.showAnchor) {
               return [this.anchor];