@ni/nimble-components 35.2.3 → 35.3.1

package/dist/all-components-bundle.js

@@ -14876,7 +14876,25 @@
       calendarEventFillBlockedColor: 'calendar-event-fill-blocked-color',
       calendarGrabHandleBackgroundColor: 'calendar-grab-handle-background-color',
       calendarGridBorderColor: 'calendar-grid-border-color',
-      calendarGroupHeaderBackgroundColor: 'calendar-group-header-background-color'
+      calendarGroupHeaderBackgroundColor: 'calendar-group-header-background-color',
+      calendarEventBackgroundJobColor: 'calendar-event-background-job-color',
+      calendarEventBackgroundHoverJobColor: 'calendar-event-background-hover-job-color',
+      calendarEventBorderJobColor: 'calendar-event-border-job-color',
+      calendarEventJobFontColor: 'calendar-event-job-font-color',
+      calendarEventBackgroundMaintenanceColor: 'calendar-event-background-maintenance-color',
+      calendarEventBackgroundHoverMaintenanceColor: 'calendar-event-background-hover-maintenance-color',
+      calendarEventBorderMaintenanceColor: 'calendar-event-border-maintenance-color',
+      calendarEventBackgroundCalibrationColor: 'calendar-event-background-calibration-color',
+      calendarEventBackgroundHoverCalibrationColor: 'calendar-event-background-hover-calibration-color',
+      calendarEventBorderCalibrationColor: 'calendar-event-border-calibration-color',
+      calendarEventBackgroundReservationColor: 'calendar-event-background-reservation-color',
+      calendarEventBackgroundHoverReservationColor: 'calendar-event-background-hover-reservation-color',
+      calendarEventBorderReservationColor: 'calendar-event-border-reservation-color',
+      calendarEventBackgroundTransportOrderColor: 'calendar-event-background-transport-order-color',
+      calendarEventBackgroundHoverTransportOrderColor: 'calendar-event-background-hover-transport-order-color',
+      calendarEventBorderTransportOrderColor: 'calendar-event-border-transport-order-color',
+      calendarEventBackgroundAggregateAvailabilityColor: 'calendar-event-background-aggregate-availability-color',
+      calendarEventBorderAggregateAvailabilityColor: 'calendar-event-border-aggregate-availability-color'
   };
   const prefix = 'ni-nimble';
   const styleNameFromTokenName = (tokenName) => `${prefix}-${tokenName}`;
@@ -16111,7 +16129,16 @@
 
   const Information100DarkUi = "#a46eff";
   const Information100LightUi = "#804ad9";
+  const InformationLight10 = "#f3edfc";
+  const InformationDark10 = "#413d4c";
+  const InformationLight30 = "#d9c9f4";
+  const InformationDark30 = "#574873";
+  const InformationDarkTypography = "#c9abff";
   const Warning100DarkUi = "#ff8126";
+  const WarningLight10 = "#ffede6";
+  const WarningDark10 = "#4a3e36";
+  const WarningLight20 = "#ffdbcc";
+  const WarningDark20 = "#5e4635";
   const Pass100LightUi = "#009921";
   const Pass100DarkUi = "#00c12b";
   const Fail100LightUi = "#c4000c";
@@ -16132,6 +16159,8 @@
   const NiSky = "#3cb4e7";
   const BannerFail100DarkUi = "#d63434";
   const Warning100LightUi = "#ff4b00";
+  const Black91V10 = "#e8e8e8";
+  const Black82V100 = "#6e6f70";
   const DigitalGreenDark = "#008557";
   const DigitalGreenDark105 = "#00734b";
   const DigitalGreenDark110 = "#00613f";
@@ -16150,10 +16179,25 @@
   const NiSea = "#00aba5";
   const NiSeaLight = "#a5d8c8";
   const NiTulip = "#e54c8a";
+  const NiTulip10 = "#fdeef4";
+  const NiTulipDark10 = "#483a41";
+  const NiTulip20 = "#fadbe8";
+  const NiTulipDark20 = "#593b49";
   const NiIndigo = "#8e78b7";
   const NiPlumDark1 = "#8c459a";
   const NiIndigoDark2 = "#312e7f";
   const NiSeaDark2 = "#00685f";
+  const NiSpec10 = "#e6f6fb";
+  const NiSpecDark10 = "#304147";
+  const NiSpec20 = "#ccecf6";
+  const NiSpecDark20 = "#2b4c57";
+  const NiSpec = "#00a1d4";
+  const BrownLight10 = "#f1eeeb";
+  const BrownDark10 = "#403e3d";
+  const BrownLight20 = "#e2dcd7";
+  const BrownDark20 = "#4a4440";
+  const BrownLight = "#6f4e37";
+  const BrownDark = "#9b7a60";
   const Title2Family = "Source Sans Pro";
   const Title2Weight = "400";
   const ControlLabel1Family = "Source Sans Pro";
@@ -16312,6 +16356,24 @@
       calendarGrabHandleBackgroundColor: createThemeColor(DigitalGreenLight, PowerGreen, PowerGreen),
       calendarGridBorderColor: createThemeColor(Black22, Black80, Black80),
       calendarGroupHeaderBackgroundColor: createThemeColor(Black7, hexToRgbaCssColor(Black91, 0.1), hexToRgbaCssColor(Black91, 0.1)),
+      calendarEventBackgroundJobColor: createThemeColor(InformationLight10, InformationDark10, InformationDark10),
+      calendarEventBackgroundHoverJobColor: createThemeColor(InformationLight30, InformationDark30, InformationDark30),
+      calendarEventBorderJobColor: createThemeColor(Information100LightUi, Information100DarkUi, Information100DarkUi),
+      calendarEventJobFontColor: createThemeColor(Information100LightUi, InformationDarkTypography, InformationDarkTypography),
+      calendarEventBackgroundMaintenanceColor: createThemeColor(WarningLight10, WarningDark10, WarningDark10),
+      calendarEventBackgroundHoverMaintenanceColor: createThemeColor(WarningLight20, WarningDark20, WarningDark20),
+      calendarEventBorderMaintenanceColor: createThemeColor(Warning100LightUi, Warning100DarkUi, Warning100DarkUi),
+      calendarEventBackgroundCalibrationColor: createThemeColor(NiTulip10, NiTulipDark10, NiTulipDark10),
+      calendarEventBackgroundHoverCalibrationColor: createThemeColor(NiTulip20, NiTulipDark20, NiTulipDark20),
+      calendarEventBorderCalibrationColor: createThemeColor(NiTulip, NiTulip, NiTulip),
+      calendarEventBackgroundReservationColor: createThemeColor(NiSpec10, NiSpecDark10, NiSpecDark10),
+      calendarEventBackgroundHoverReservationColor: createThemeColor(NiSpec20, NiSpecDark20, NiSpecDark20),
+      calendarEventBorderReservationColor: createThemeColor(NiSpec, NiSpec, NiSpec),
+      calendarEventBackgroundTransportOrderColor: createThemeColor(BrownLight10, BrownDark10, BrownDark10),
+      calendarEventBackgroundHoverTransportOrderColor: createThemeColor(BrownLight20, BrownDark20, BrownDark20),
+      calendarEventBorderTransportOrderColor: createThemeColor(BrownLight, BrownDark, BrownDark),
+      calendarEventBackgroundAggregateAvailabilityColor: createThemeColor(Black91V10, Black82, Black82),
+      calendarEventBorderAggregateAvailabilityColor: hexToRgbaCssThemeColor(createThemeColor(Black91, Black82V100, Black82V100), 0.5, 1, 1),
       controlHeight: '32px',
       controlSlimHeight: '24px',
       smallPadding: '4px',
@@ -16467,6 +16529,24 @@
   createThemeColorToken(tokenNames.calendarGrabHandleBackgroundColor, tokenValues.calendarGrabHandleBackgroundColor);
   createThemeColorToken(tokenNames.calendarGridBorderColor, tokenValues.calendarGridBorderColor);
   createThemeColorToken(tokenNames.calendarGroupHeaderBackgroundColor, tokenValues.calendarGroupHeaderBackgroundColor);
+  createThemeColorToken(tokenNames.calendarEventBackgroundJobColor, tokenValues.calendarEventBackgroundJobColor);
+  createThemeColorToken(tokenNames.calendarEventBackgroundHoverJobColor, tokenValues.calendarEventBackgroundHoverJobColor);
+  createThemeColorToken(tokenNames.calendarEventBorderJobColor, tokenValues.calendarEventBorderJobColor);
+  createThemeColorToken(tokenNames.calendarEventJobFontColor, tokenValues.calendarEventJobFontColor);
+  createThemeColorToken(tokenNames.calendarEventBackgroundMaintenanceColor, tokenValues.calendarEventBackgroundMaintenanceColor);
+  createThemeColorToken(tokenNames.calendarEventBackgroundHoverMaintenanceColor, tokenValues.calendarEventBackgroundHoverMaintenanceColor);
+  createThemeColorToken(tokenNames.calendarEventBorderMaintenanceColor, tokenValues.calendarEventBorderMaintenanceColor);
+  createThemeColorToken(tokenNames.calendarEventBackgroundCalibrationColor, tokenValues.calendarEventBackgroundCalibrationColor);
+  createThemeColorToken(tokenNames.calendarEventBackgroundHoverCalibrationColor, tokenValues.calendarEventBackgroundHoverCalibrationColor);
+  createThemeColorToken(tokenNames.calendarEventBorderCalibrationColor, tokenValues.calendarEventBorderCalibrationColor);
+  createThemeColorToken(tokenNames.calendarEventBackgroundReservationColor, tokenValues.calendarEventBackgroundReservationColor);
+  createThemeColorToken(tokenNames.calendarEventBackgroundHoverReservationColor, tokenValues.calendarEventBackgroundHoverReservationColor);
+  createThemeColorToken(tokenNames.calendarEventBorderReservationColor, tokenValues.calendarEventBorderReservationColor);
+  createThemeColorToken(tokenNames.calendarEventBackgroundTransportOrderColor, tokenValues.calendarEventBackgroundTransportOrderColor);
+  createThemeColorToken(tokenNames.calendarEventBackgroundHoverTransportOrderColor, tokenValues.calendarEventBackgroundHoverTransportOrderColor);
+  createThemeColorToken(tokenNames.calendarEventBorderTransportOrderColor, tokenValues.calendarEventBorderTransportOrderColor);
+  createThemeColorToken(tokenNames.calendarEventBackgroundAggregateAvailabilityColor, tokenValues.calendarEventBackgroundAggregateAvailabilityColor);
+  createThemeColorToken(tokenNames.calendarEventBorderAggregateAvailabilityColor, tokenValues.calendarEventBorderAggregateAvailabilityColor);
   // #endregion
   // #region size tokens
   const controlHeight = createStringToken(tokenNames.controlHeight, tokenValues.controlHeight);
@@ -73222,25 +73302,32 @@ focus outline in that case.
           this.columnIndex = -1;
           this.focusWithinTable = false;
           this.isCurrentlyFocusingElement = false;
+          this.focusedViaPointer = false;
           this.visibleRowNotifiers = [];
           this.onTableFocusIn = (event) => {
               this.focusWithinTable = true;
-              this.updateFocusStateFromActiveElement(false);
+              this.updateFocusStateFromActiveElement();
               // Sets initial focus on the appropriate table content
               const actionMenuOpen = this.table.openActionMenuRecordId !== undefined;
-              if ((event.target === this.table
-                  || this.focusType === TableFocusType.none)
-                  && !actionMenuOpen) {
-                  let focusHeader = true;
-                  if (this.hasRowOrCellFocusType()
-                      && this.scrollToAndFocusRow(this.rowIndex)) {
-                      focusHeader = false;
+              if (!actionMenuOpen) {
+                  if (this.focusType === TableFocusType.none) {
+                      this.focusSomethingOtherThanTheTable();
                   }
-                  if (focusHeader && !this.setFocusOnHeader()) {
-                      // nothing to focus
-                      this.table.blur();
+                  else if (event.target === this.table) {
+                      // restore focus to last focused element
+                      if (this.hasRowOrCellFocusType() && this.rowIndexIsValid(this.rowIndex)) {
+                          this.scrollToAndFocusRow(this.rowIndex);
+                      }
+                      else if (this.hasHeaderFocusType()) {
+                          this.focusHeaderElement();
+                      }
+                      else {
+                          // should only get here if focusType was row/cell, but rowIndex was invalid
+                          this.focusSomethingOtherThanTheTable();
+                      }
                   }
               }
+              this.focusedViaPointer = false;
           };
           this.onTableFocusOut = () => {
               this.focusWithinTable = false;
@@ -73255,12 +73342,18 @@ focus outline in that case.
           };
           this.onCellViewFocusIn = (event) => {
               event.stopPropagation();
-              this.updateFocusStateFromActiveElement(false);
+              this.updateFocusStateFromActiveElement();
           };
           this.onCellFocusIn = (event) => {
               event.stopPropagation();
               const cell = event.detail;
-              this.updateFocusStateFromActiveElement(true);
+              const row = this.updateFocusStateFromActiveElement();
+              if (row) {
+                  if (this.hasRowOrCellFocusType()
+                      && this.rowIndex !== row.resolvedRowIndex) {
+                      this.setRowFocusState(row.resolvedRowIndex);
+                  }
+              }
               // Currently, clicking a non-interactive cell only updates the focus state to that row, it
               // doesn't focus the cell. If we revisit this, we most likely need to set the cells to tabindex=-1
               // upfront too, so their focusing behavior is consistent whether they've been previously keyboard
@@ -73331,6 +73424,12 @@ focus outline in that case.
                   }
               }
           };
+          this.onPointerDown = () => {
+              this.focusedViaPointer = true;
+          };
+          this.onPointerUpOrCancel = () => {
+              this.focusedViaPointer = false;
+          };
           this.onViewportKeyDown = (event) => {
               let handleEvent = !this.inNavigationMode
                   && (event.key === keyArrowUp || event.key === keyArrowDown);
@@ -73366,6 +73465,9 @@ focus outline in that case.
       connect() {
           this.table.addEventListener('keydown', this.onCaptureKeyDown, { capture: true });
           this.table.addEventListener('keydown', this.onKeyDown);
+          this.table.addEventListener('pointerdown', this.onPointerDown);
+          this.table.addEventListener('pointerup', this.onPointerUpOrCancel);
+          this.table.addEventListener('pointercancel', this.onPointerUpOrCancel);
           this.table.addEventListener('focusin', this.onTableFocusIn);
           this.table.addEventListener('focusout', this.onTableFocusOut);
           this.table.viewport.addEventListener('keydown', this.onViewportKeyDown);
@@ -73377,6 +73479,9 @@ focus outline in that case.
       disconnect() {
           this.table.removeEventListener('keydown', this.onCaptureKeyDown, { capture: true });
           this.table.removeEventListener('keydown', this.onKeyDown);
+          this.table.removeEventListener('pointerdown', this.onPointerDown);
+          this.table.removeEventListener('pointerup', this.onPointerUpOrCancel);
+          this.table.removeEventListener('pointercancel', this.onPointerUpOrCancel);
           this.table.removeEventListener('focusin', this.onTableFocusIn);
           this.table.removeEventListener('focusout', this.onTableFocusOut);
           this.table.viewport.removeEventListener('keydown', this.onViewportKeyDown);
@@ -73468,6 +73573,13 @@ focus outline in that case.
               this.setCellActionMenuFocusState(row.resolvedRowIndex, columnIndex, false);
           }
       }
+      focusSomethingOtherThanTheTable() {
+          this.setDefaultFocus();
+          if (this.focusType === TableFocusType.none) {
+              // nothing within the table to focus
+              this.table.blur();
+          }
+      }
       onEnterPressed(ctrlKey) {
           let row;
           let rowElements;
@@ -73639,7 +73751,7 @@ focus outline in that case.
               this.headerActionIndex = nextFocusState.headerActionIndex ?? this.headerActionIndex;
               this.cellContentIndex = nextFocusState.cellContentIndex ?? this.cellContentIndex;
               if (this.hasRowOrCellFocusType()) {
-                  this.focusCurrentRow(false);
+                  this.focusCurrentRow(!this.focusedViaPointer);
               }
               else {
                   this.focusHeaderElement();
@@ -73811,35 +73923,39 @@ focus outline in that case.
           }
           return false;
       }
-      updateFocusStateFromActiveElement(setRowFocus) {
+      updateFocusStateFromActiveElement() {
           // If the user is interacting with the table with non-keyboard methods (like mouse), we need to
           // update our focus state based on the current active/focused element
-          const activeElement = this.getActiveElement();
-          if (activeElement) {
-              const row = this.getContainingRow(activeElement);
-              if (row) {
-                  if (!(row instanceof TableGroupRow)) {
-                      const cell = this.getContainingCell(activeElement);
-                      if (cell) {
-                          const columnIndex = this.table.visibleColumns.indexOf(cell.column);
-                          if (cell.actionMenuButton === activeElement) {
-                              this.setCellActionMenuFocusState(row.resolvedRowIndex, columnIndex, false);
-                              return;
-                          }
-                          const contentIndex = cell.cellView.tabbableChildren.indexOf(activeElement);
-                          if (contentIndex > -1) {
-                              this.setCellContentFocusState(contentIndex, row.resolvedRowIndex, columnIndex, false);
-                              return;
-                          }
-                      }
-                  }
-                  if (setRowFocus
-                      && this.hasRowOrCellFocusType()
-                      && this.rowIndex !== row.resolvedRowIndex) {
-                      this.setRowFocusState(row.resolvedRowIndex);
-                  }
+          const { activeElement, row, cell } = this.getActiveElementCellAndRow();
+          if (!cell) {
+              return row;
+          }
+          const columnIndex = this.table.visibleColumns.indexOf(cell.column);
+          if (cell.actionMenuButton === activeElement) {
+              this.setCellActionMenuFocusState(row.resolvedRowIndex, columnIndex, false);
+          }
+          else {
+              const contentIndex = cell.cellView.tabbableChildren.indexOf(activeElement);
+              if (contentIndex > -1) {
+                  this.setCellContentFocusState(contentIndex, row.resolvedRowIndex, columnIndex, false);
               }
           }
+          return row;
+      }
+      getActiveElementCellAndRow() {
+          const activeElement = this.getActiveElement();
+          if (!activeElement) {
+              return {};
+          }
+          const row = this.getContainingRow(activeElement);
+          if (!row) {
+              return { activeElement };
+          }
+          if (row instanceof TableGroupRow) {
+              return { activeElement, row };
+          }
+          const cell = this.getContainingCell(activeElement);
+          return { activeElement, row, cell };
       }
       focusElement(element, focusOptions) {
           const previousActiveElement = this.getActiveElement();
@@ -73870,13 +73986,6 @@ focus outline in that case.
               menuButton.classList.remove('cell-action-menu-focused');
           }
       }
-      setFocusOnHeader() {
-          if (this.hasHeaderFocusType()) {
-              return this.focusHeaderElement();
-          }
-          this.setDefaultFocus();
-          return this.focusType !== TableFocusType.none;
-      }
       setDefaultFocus() {
           const headerElements = this.getTableHeaderFocusableElements();
           if (!this.trySetHeaderActionFocus(headerElements, 0)
@@ -73886,20 +73995,19 @@ focus outline in that case.
           }
       }
       scrollToAndFocusRow(totalRowIndex, scrollOptions) {
-          if (totalRowIndex >= 0 && totalRowIndex < this.table.tableData.length) {
-              switch (this.focusType) {
-                  case TableFocusType.none:
-                  case TableFocusType.headerActions:
-                  case TableFocusType.columnHeader:
-                      this.setRowFocusState(totalRowIndex);
-                      break;
-              }
-              this.rowIndex = totalRowIndex;
-              this.virtualizer.scrollToIndex(totalRowIndex, scrollOptions);
-              this.focusCurrentRow(true);
-              return true;
+          if (!this.rowIndexIsValid(totalRowIndex)) {
+              return false;
           }
-          return false;
+          if (!this.hasRowOrCellFocusType()) {
+              this.setRowFocusState();
+          }
+          this.rowIndex = totalRowIndex;
+          this.virtualizer.scrollToIndex(totalRowIndex, scrollOptions);
+          this.focusCurrentRow(!this.focusedViaPointer);
+          return true;
+      }
+      rowIndexIsValid(rowIndex) {
+          return rowIndex >= 0 && rowIndex < this.table.tableData.length;
       }
       focusCurrentRow(allowScroll) {
           const visibleRowIndex = this.getCurrentRowVisibleIndex();
@@ -73967,7 +74075,7 @@ focus outline in that case.
                   break;
           }
           if (focusableElement) {
-              this.focusElement(focusableElement);
+              this.focusElement(focusableElement, { preventScroll: this.focusedViaPointer });
               return true;
           }
           return false;
@@ -74088,7 +74196,7 @@ focus outline in that case.
       trySetRowSelectionCheckboxFocus(rowElements) {
           if (rowElements?.selectionCheckbox) {
               this.focusType = TableFocusType.rowSelectionCheckbox;
-              this.focusCurrentRow(true);
+              this.focusCurrentRow(!this.focusedViaPointer);
               return true;
           }
           return false;
@@ -74177,7 +74285,7 @@ focus outline in that case.
           this.rowIndex = rowIndex;
           this.columnIndex = columnIndex;
           if (focusElement) {
-              this.focusCurrentRow(true);
+              this.focusCurrentRow(!this.focusedViaPointer);
           }
       }
       isResolvedRowType(row) {