@ni/nimble-components 29.8.1 → 29.9.0

package/dist/all-components-bundle.js

@@ -16333,7 +16333,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Thu, 11 Jul 2024 17:27:02 GMT
+   * Generated on Mon, 15 Jul 2024 21:06:17 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -16755,7 +16755,6 @@
   const keyFunction2 = "F2";
   const keyPageDown = "PageDown";
   const keyPageUp = "PageUp";
-  const keyShift = "Shift";
   const keySpace = " ";
   const keyTab = "Tab";
 
@@ -54475,16 +54474,32 @@ img.ProseMirror-separator {
           return this.trackedItems[key];
       }
       track(key) {
-          this.trackedItems[key] = true;
+          const wasTracked = this.trackedItems[key];
+          if (!wasTracked) {
+              this.trackedItems[key] = true;
+              this.onTrackingChange();
+          }
       }
       untrack(key) {
-          this.trackedItems[key] = false;
+          const wasTracked = this.trackedItems[key];
+          if (wasTracked) {
+              this.trackedItems[key] = false;
+              this.onTrackingChange();
+          }
       }
       trackAll() {
+          if (this.allTracked()) {
+              return;
+          }
           this.setAllKeys(true);
+          this.onTrackingChange();
       }
       untrackAll() {
+          if (this.noneTracked()) {
+              return;
+          }
           this.setAllKeys(false);
+          this.onTrackingChange();
       }
       allTracked() {
           return Object.values(this.trackedItems).every(x => x);
@@ -54495,6 +54510,7 @@ img.ProseMirror-separator {
       noneTracked() {
           return Object.values(this.trackedItems).every(x => !x);
       }
+      onTrackingChange() { }
       setAllKeys(value) {
           this.trackedItems = Object.keys(this.trackedItems).reduce((r, key) => {
               return {
@@ -66389,7 +66405,7 @@ focus outline in that case.
         aria-multiselectable="${x => x.ariaMultiSelectable}"
         ${children$1({ property: 'childItems', filter: elements() })}
     >
-        <div class="table-container ${x => (x.documentShiftKeyDown ? 'disable-select' : '')}"
+        <div class="table-container ${x => (x.windowShiftKeyDown ? 'disable-select' : '')}"
             style="
             --ni-private-table-scroll-x: -${x => x.scrollX}px;
             --ni-private-table-header-container-margin-right: ${x => x.virtualizer.headerContainerMarginRight}px;
@@ -68458,6 +68474,10 @@ focus outline in that case.
       getValidity() {
           return this.getValidationFlags();
       }
+      onTrackingChange() {
+          super.onTrackingChange();
+          this.isColumnValid = this.isValid();
+      }
       /**
        * Sets a particular validity condition flag's value, e.g. "hasInvalidFooValue" = true
        */
@@ -68468,10 +68488,6 @@ focus outline in that case.
           else {
               this.untrack(name);
           }
-          this.updateColumnInternalsFlag();
-      }
-      updateColumnInternalsFlag() {
-          this.isColumnValid = this.isValid();
       }
   }
   __decorate$1([
@@ -69527,7 +69543,7 @@ focus outline in that case.
            * space through a column resize operation.
            */
           this.tableScrollableMinWidth = 0;
-          this.documentShiftKeyDown = false;
+          this.windowShiftKeyDown = false;
           this.tableValidator = new TableValidator();
           this.tableUpdateTracker = new TableUpdateTracker(this);
           this.columnNotifiers = [];
@@ -69544,14 +69560,13 @@ focus outline in that case.
               this.scrollX = event.target.scrollLeft;
           };
           this.onKeyDown = (event) => {
-              if (event.key === keyShift) {
-                  this.documentShiftKeyDown = true;
-              }
+              this.windowShiftKeyDown = event.shiftKey;
           };
           this.onKeyUp = (event) => {
-              if (event.key === keyShift) {
-                  this.documentShiftKeyDown = false;
-              }
+              this.windowShiftKeyDown = event.shiftKey;
+          };
+          this.onBlur = () => {
+              this.windowShiftKeyDown = false;
           };
           this.getRowCanExpand = (row) => {
               return this.expansionManager.isRowExpandable(row);
@@ -69649,16 +69664,18 @@ focus outline in that case.
               passive: true
           });
           this.keyboardNavigationManager.connect();
-          document.addEventListener('keydown', this.onKeyDown);
-          document.addEventListener('keyup', this.onKeyUp);
+          window.addEventListener('keydown', this.onKeyDown);
+          window.addEventListener('keyup', this.onKeyUp);
+          window.addEventListener('blur', this.onBlur);
       }
       disconnectedCallback() {
           super.disconnectedCallback();
           this.virtualizer.disconnect();
           this.keyboardNavigationManager.disconnect();
           this.viewport.removeEventListener('scroll', this.onViewPortScroll);
-          document.removeEventListener('keydown', this.onKeyDown);
-          document.removeEventListener('keyup', this.onKeyUp);
+          window.removeEventListener('keydown', this.onKeyDown);
+          window.removeEventListener('keyup', this.onKeyUp);
+          window.removeEventListener('blur', this.onBlur);
       }
       checkValidity() {
           return this.tableValidator.isValid();
@@ -69691,7 +69708,7 @@ focus outline in that case.
       /** @internal */
       onRowSelectionToggle(rowIndex, event) {
           event.stopImmediatePropagation();
-          const selectionChanged = this.selectionManager.handleRowSelectionToggle(this.tableData[rowIndex], event.detail.newState, this.documentShiftKeyDown);
+          const selectionChanged = this.selectionManager.handleRowSelectionToggle(this.tableData[rowIndex], event.detail.newState, this.windowShiftKeyDown);
           if (selectionChanged) {
               void this.emitSelectionChangeEvent();
           }
@@ -70367,7 +70384,7 @@ focus outline in that case.
   ], Table$1.prototype, "tableScrollableMinWidth", void 0);
   __decorate$1([
       observable
-  ], Table$1.prototype, "documentShiftKeyDown", void 0);
+  ], Table$1.prototype, "windowShiftKeyDown", void 0);
   const nimbleTable = Table$1.compose({
       baseName: 'table',
       template: template$g,
@@ -70760,25 +70777,105 @@ focus outline in that case.
       return SortableColumn;
   }
 
+  // As the returned class is internal to the function, we can't write a signature that uses is directly, so rely on inference
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type
+  function mixinCustomSortOrderColumnAPI(base) {
+      /**
+       * The Mixin that provides a concrete column with the API to allow sorting
+       * by a field other than the default for that column.
+       */
+      class CustomSortOrderColumn extends base {
+          constructor() {
+              super(...arguments);
+              /** @internal */
+              this.customSortOrderColumnChangeHandler = {
+                  handleChange: this.handleCustomSortOrderColumnChange.bind(this)
+              };
+          }
+          getResolvedOperandDataRecordFieldName(initialOperandFieldName) {
+              return typeof this.sortByFieldName === 'string'
+                  ? this.sortByFieldName
+                  : initialOperandFieldName;
+          }
+          getResolvedSortOperation(initialSortOperation) {
+              return typeof this.sortByFieldName === 'string'
+                  ? TableColumnSortOperation.basic
+                  : initialSortOperation;
+          }
+          /** @internal */
+          sortByFieldNameChanged() {
+              this.handleSortConfigurationChange();
+              this.updateCustomColumnSortingValidity();
+              if (typeof this.sortByFieldName === 'string'
+                  && !this.customSortOrderColumnNotifier) {
+                  this.customSortOrderColumnNotifier = Observable.getNotifier(this.columnInternals);
+                  this.customSortOrderColumnNotifier.subscribe(this.customSortOrderColumnChangeHandler);
+              }
+              else {
+                  this.customSortOrderColumnNotifier?.unsubscribe(this.customSortOrderColumnChangeHandler);
+                  this.customSortOrderColumnNotifier = undefined;
+              }
+          }
+          /** @internal */
+          handleCustomSortOrderColumnChange(_source, args) {
+              if (args === 'groupingDisabled') {
+                  this.updateCustomColumnSortingValidity();
+              }
+          }
+          /** @internal */
+          updateCustomColumnSortingValidity() {
+              const hasCustomColumnSorting = typeof this.sortByFieldName === 'string';
+              const isGroupingEnabled = !this.columnInternals.groupingDisabled;
+              const isValid = !isGroupingEnabled || !hasCustomColumnSorting;
+              if (isValid) {
+                  this.columnInternals.validator.untrack('invalidCustomSortWithGrouping');
+              }
+              else {
+                  this.columnInternals.validator.track('invalidCustomSortWithGrouping');
+              }
+          }
+      }
+      attr({ attribute: 'sort-by-field-name' })(
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+      CustomSortOrderColumn.prototype, 'sortByFieldName');
+      return CustomSortOrderColumn;
+  }
+
+  const columnAnchorValidityFlagNames = [
+      'invalidCustomSortWithGrouping'
+  ];
+  /**
+   * Validator class for the anchor table column.
+   */
+  class TableColumnAnchorValidator extends ColumnValidator {
+      constructor() {
+          super(columnAnchorValidityFlagNames);
+      }
+  }
+
   /**
    * A table column for displaying links.
    */
-  class TableColumnAnchor extends mixinGroupableColumnAPI(mixinFractionalWidthColumnAPI(mixinColumnWithPlaceholderAPI(mixinSortableColumnAPI((TableColumn))))) {
+  class TableColumnAnchor extends mixinGroupableColumnAPI(mixinFractionalWidthColumnAPI(mixinColumnWithPlaceholderAPI(mixinSortableColumnAPI(mixinCustomSortOrderColumnAPI((TableColumn)))))) {
       constructor() {
           super(...arguments);
           this.underlineHidden = false;
+          this.defaultSortOperation = TableColumnSortOperation.localeAwareCaseSensitive;
       }
       placeholderChanged() {
           this.updateColumnConfig();
       }
+      handleSortConfigurationChange() {
+          this.updateColumnInternalsSortConfiguration();
+      }
       getColumnInternalsOptions() {
           return {
               cellRecordFieldNames: ['label', 'href'],
               cellViewTag: tableColumnAnchorCellViewTag,
               groupHeaderViewTag: tableColumnTextGroupHeaderViewTag,
               delegatedEvents: ['click'],
-              sortOperation: TableColumnSortOperation.localeAwareCaseSensitive,
-              validator: new ColumnValidator([])
+              sortOperation: this.getResolvedSortOperation(this.defaultSortOperation),
+              validator: new TableColumnAnchorValidator()
           };
       }
       labelFieldNameChanged() {
@@ -70786,7 +70883,7 @@ focus outline in that case.
               this.labelFieldName,
               this.hrefFieldName
           ];
-          this.columnInternals.operandDataRecordFieldName = this.labelFieldName;
+          this.updateColumnInternalsSortConfiguration();
       }
       hrefFieldNameChanged() {
           this.columnInternals.dataRecordFieldNames = [
@@ -70835,6 +70932,10 @@ focus outline in that case.
               placeholder: this.placeholder
           };
       }
+      updateColumnInternalsSortConfiguration() {
+          this.columnInternals.operandDataRecordFieldName = this.getResolvedOperandDataRecordFieldName(this.labelFieldName);
+          this.columnInternals.sortOperation = this.getResolvedSortOperation(this.defaultSortOperation);
+      }
   }
   __decorate$1([
       attr({ attribute: 'label-field-name' })
@@ -72852,25 +72953,52 @@ focus outline in that case.
   DesignSystem.getOrCreate().withPrefix('nimble').register(textCellView());
   const tableColumnTextCellViewTag = 'nimble-table-column-text-cell-view';
 
+  const columnTextValidityFlagNames = [
+      'invalidCustomSortWithGrouping'
+  ];
+  /**
+   * Validator class for the text table column.
+   */
+  class TableColumnTextValidator extends ColumnValidator {
+      constructor() {
+          super(columnTextValidityFlagNames);
+      }
+  }
+
   /**
    * The table column for displaying string fields as text.
    */
-  class TableColumnText extends mixinTextBase((TableColumnTextBase)) {
+  class TableColumnText extends mixinCustomSortOrderColumnAPI(mixinTextBase((TableColumnTextBase))) {
+      constructor() {
+          super(...arguments);
+          this.defaultSortOperation = TableColumnSortOperation.localeAwareCaseSensitive;
+      }
       placeholderChanged() {
           this.columnInternals.columnConfig = {
               placeholder: this.placeholder
           };
       }
+      handleSortConfigurationChange() {
+          this.updateColumnInternalsSortConfiguration();
+      }
       getColumnInternalsOptions() {
           return {
               cellRecordFieldNames: ['value'],
               cellViewTag: tableColumnTextCellViewTag,
               groupHeaderViewTag: tableColumnTextGroupHeaderViewTag,
               delegatedEvents: [],
-              sortOperation: TableColumnSortOperation.localeAwareCaseSensitive,
-              validator: new ColumnValidator([])
+              sortOperation: this.getResolvedSortOperation(this.defaultSortOperation),
+              validator: new TableColumnTextValidator()
           };
       }
+      fieldNameChanged() {
+          this.columnInternals.dataRecordFieldNames = [this.fieldName];
+          this.updateColumnInternalsSortConfiguration();
+      }
+      updateColumnInternalsSortConfiguration() {
+          this.columnInternals.operandDataRecordFieldName = this.getResolvedOperandDataRecordFieldName(this.fieldName);
+          this.columnInternals.sortOperation = this.getResolvedSortOperation(this.defaultSortOperation);
+      }
   }
   const nimbleTableColumnText = TableColumnText.compose({
       baseName: 'table-column-text',