@ni/ok-components 0.2.12 → 0.2.14

package/dist/all-components-bundle.js

@@ -73304,25 +73304,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;
@@ -73337,12 +73344,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
@@ -73413,6 +73426,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);
@@ -73448,6 +73467,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);
@@ -73459,6 +73481,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);
@@ -73550,6 +73575,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;
@@ -73721,7 +73753,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();
@@ -73893,35 +73925,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();
@@ -73952,13 +73988,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)
@@ -73968,20 +73997,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();
@@ -74049,7 +74077,7 @@ focus outline in that case.
                   break;
           }
           if (focusableElement) {
-              this.focusElement(focusableElement);
+              this.focusElement(focusableElement, { preventScroll: this.focusedViaPointer });
               return true;
           }
           return false;
@@ -74170,7 +74198,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;
@@ -74259,7 +74287,7 @@ focus outline in that case.
           this.rowIndex = rowIndex;
           this.columnIndex = columnIndex;
           if (focusElement) {
-              this.focusCurrentRow(true);
+              this.focusCurrentRow(!this.focusedViaPointer);
           }
       }
       isResolvedRowType(row) {
@@ -96975,6 +97003,7 @@ focus outline in that case.
 
   const styles$7 = css `
     ${display$1('flex')}
+    ${styles$Y}
 
     :host {
         width: 100%;
@@ -97016,6 +97045,22 @@ focus outline in that case.
         border-bottom-color: ${borderHoverColor};
     }
 
+    :host([error-visible]) .container::after {
+        border-bottom-color: ${failColor};
+    }
+        
+    :host([error-visible]) .container {
+        border-bottom-color: ${failColor};
+    }
+
+    :host([error-visible]:hover) .container::after {
+        border-bottom-color: ${failColor};
+    }
+
+    :host([error-visible]:focus-within) .container {
+        border-bottom-color: ${failColor};
+    }
+
     @media (prefers-reduced-motion) {
         .container::after {
             transition-duration: 0s;
@@ -97042,6 +97087,17 @@ focus outline in that case.
         color: ${controlLabelFontColor};
     }
 
+    :host([error-visible]) .error-icon {
+        display: none;
+    }
+
+    :host([error-visible]) .error-icon.scrollbar-width-calculated {
+        display: inline-flex;
+        position: absolute;
+        top: ${mediumPadding};
+        right: var(--ni-private-scrollbar-width);
+    }
+
     .action-button {
         align-self: flex-end;
         width: 80px;
@@ -97073,12 +97129,18 @@ focus outline in that case.
         ${x => (x.processing ? x.stopButtonLabel : x.sendButtonLabel)}
         ${when(x => x.processing, html `<${iconStopSquareTag} slot="start"></${iconStopSquareTag}>`, html `<${iconPaperPlaneTag} slot="start"></${iconPaperPlaneTag}>`)}
     </${buttonTag}>
+    <${iconExclamationMarkTag}
+        severity="error"
+        class="error-icon ${x => (x.scrollbarWidth >= 0 ? 'scrollbar-width-calculated' : '')}"
+        style="--ni-private-scrollbar-width: ${x => x.scrollbarWidth}px;"
+    ></${iconExclamationMarkTag}>
+    ${errorTextTemplate}
 </div>`;
 
   /**
    * A Spright component for composing and sending a chat message
    */
-  class ChatInput extends FoundationElement {
+  class ChatInput extends mixinErrorPattern(FoundationElement) {
       constructor() {
           super(...arguments);
           this.value = '';
@@ -97088,6 +97150,12 @@ focus outline in that case.
            * @internal
            */
           this.disableSendButton = true;
+          /**
+           * The width of the vertical scrollbar, if displayed.
+           * @internal
+           */
+          this.scrollbarWidth = -1;
+          this.updateScrollbarWidthQueued = false;
       }
       /**
        * @internal
@@ -97108,6 +97176,19 @@ focus outline in that case.
       textAreaInputHandler() {
           this.value = this.textArea.value;
           this.disableSendButton = this.shouldDisableSendButton();
+          this.queueUpdateScrollbarWidth();
+      }
+      // If a property can affect whether a scrollbar is visible, we need to
+      // call queueUpdateScrollbarWidth() when it changes. The exceptions are
+      // properties that affect size (e.g. height, width, cols, rows), because
+      // we already have a ResizeObserver handling those changes. Also,
+      // a change to errorVisible cannot cause scrollbar visibility to change,
+      // because we always reserve space for the error icon.
+      /**
+       * @internal
+       */
+      placeholderChanged() {
+          this.queueUpdateScrollbarWidth();
       }
       /**
        * @internal
@@ -97116,6 +97197,7 @@ focus outline in that case.
           if (this.textArea) {
               this.textArea.value = this.value;
               this.disableSendButton = this.shouldDisableSendButton();
+              this.queueUpdateScrollbarWidth();
           }
       }
       /**
@@ -97125,6 +97207,15 @@ focus outline in that case.
           super.connectedCallback();
           this.textArea.value = this.value;
           this.disableSendButton = this.shouldDisableSendButton();
+          this.resizeObserver = new ResizeObserver(() => this.onResize());
+          this.resizeObserver.observe(this);
+      }
+      /**
+       * @internal
+       */
+      disconnectedCallback() {
+          super.disconnectedCallback();
+          this.resizeObserver?.disconnect();
       }
       /**
        * @internal
@@ -97160,6 +97251,22 @@ focus outline in that case.
               this.textArea.focus();
           }
       }
+      onResize() {
+          this.scrollbarWidth = this.textArea.offsetWidth - this.textArea.clientWidth;
+      }
+      queueUpdateScrollbarWidth() {
+          if (!this.$fastController.isConnected) {
+              return;
+          }
+          if (!this.updateScrollbarWidthQueued) {
+              this.updateScrollbarWidthQueued = true;
+              DOM.queueUpdate(() => this.updateScrollbarWidth());
+          }
+      }
+      updateScrollbarWidth() {
+          this.updateScrollbarWidthQueued = false;
+          this.scrollbarWidth = this.textArea.offsetWidth - this.textArea.clientWidth;
+      }
   }
   __decorate([
       attr
@@ -97188,6 +97295,9 @@ focus outline in that case.
   __decorate([
       observable
   ], ChatInput.prototype, "disableSendButton", void 0);
+  __decorate([
+      observable
+  ], ChatInput.prototype, "scrollbarWidth", void 0);
   const sprightChatInput = ChatInput.compose({
       baseName: 'chat-input',
       template: template$7,