@ni/nimble-components 19.4.3 → 19.4.5

package/dist/all-components-bundle.js

@@ -16232,7 +16232,7 @@
 
     /**
      * Do not edit directly
-     * Generated on Wed, 28 Jun 2023 22:20:50 GMT
+     * Generated on Thu, 13 Jul 2023 16:36:04 GMT
      */
     const Information100DarkUi = "#a46eff";
     const Information100LightUi = "#804ad9";
@@ -20623,6 +20623,10 @@
                 this.valueBeforeTextUpdate = this.value;
             }
             this.valueUpdatedByInput = true;
+            // This is a workaround for this FAST issue: https://github.com/microsoft/fast/issues/6776
+            if (this.value !== this.control.value) {
+                this.focusAndScrollOptionIntoView();
+            }
             this.value = this.control.value;
             return returnValue;
         }
@@ -28253,7 +28257,7 @@
             this.sortDirection = TableColumnSortDirection.none;
             this.sortingDisabled = false;
             /** @internal */
-            this.isValidContentAndHasOverflow = false;
+            this.hasOverflow = false;
         }
         checkValidity() {
             return this.columnInternals.validConfiguration;
@@ -28312,7 +28316,7 @@
     ], TableColumn.prototype, "sortingDisabled", void 0);
     __decorate$1([
         observable
-    ], TableColumn.prototype, "isValidContentAndHasOverflow", void 0);
+    ], TableColumn.prototype, "hasOverflow", void 0);
 
     /**
      * Helper class for the nimble-table to validate that the table's configuration
@@ -31361,20 +31365,68 @@
     }
 `;
 
+    /**
+     * The runtime behavior for template overflow detection.
+     * @public
+     */
+    class OverflowBehavior {
+        /**
+         * Creates an instance of OverflowBehavior.
+         * @param target - The element to check for overflow.
+         * @param propertyName - The name of the property to assign the overflow state to.
+         */
+        constructor(target, propertyName) {
+            this.target = target;
+            this.propertyName = propertyName;
+        }
+        /**
+         * Bind this behavior to the source.
+         * @param source - The source to bind to.
+         * @param context - The execution context that the binding is operating within.
+         */
+        bind(source) {
+            this.source = source;
+            this.setSourceValue(false);
+            this.mouseOverHandler = () => {
+                const hasOverflow = this.target.offsetWidth < this.target.scrollWidth;
+                this.setSourceValue(hasOverflow);
+            };
+            this.mouseOutHandler = () => {
+                this.setSourceValue(false);
+            };
+            this.target.addEventListener('mouseover', this.mouseOverHandler);
+            this.target.addEventListener('mouseout', this.mouseOutHandler);
+        }
+        /**
+         * Unbinds this behavior from the source.
+         * @param source - The source to unbind from.
+         */
+        unbind() {
+            this.source = undefined;
+            this.target.removeEventListener('mouseover', this.mouseOverHandler);
+            this.target.removeEventListener('mouseout', this.mouseOutHandler);
+        }
+        setSourceValue(value) {
+            // @ts-expect-error set property on source
+            this.source[this.propertyName] = value;
+        }
+    }
+    /**
+     * A directive that observes if an element has overflow and sets a flag.
+     * @param propertyName - The name of the property to assign the overflow flag.
+     * @public
+     */
+    function overflow(propertyName) {
+        return new AttachedBehaviorHTMLDirective('nimble-overflow', OverflowBehavior, propertyName);
+    }
+
     // prettier-ignore
     const template$8 = html `
     <template slot="${x => x.columnInternals.uniqueId}">
         <span
-            ${ref('headerSpan')}
+            ${overflow('hasOverflow')}
             class="header-content"
-            @mouseover="${x => {
-    x.isValidContentAndHasOverflow = !!x.headerTextContent
-        && x.headerSpan.offsetWidth < x.headerSpan.scrollWidth;
-}}"
-            @mouseout="${x => {
-    x.isValidContentAndHasOverflow = false;
-}}"
-            title=${x => (x.isValidContentAndHasOverflow ? x.headerTextContent : null)}
+            title=${x => (x.hasOverflow && x.headerTextContent ? x.headerTextContent : null)}
         >
             <slot ${ref('contentSlot')}></slot>
         </span>
@@ -31490,6 +31542,7 @@
         ${when(x => typeof x.cellRecord.href === 'string', html `
             <${anchorTag}
                 ${ref('anchor')}
+                ${overflow('hasOverflow')}
                 href="${x => x.cellRecord.href}"
                 hreflang="${x => x.columnConfig.hreflang}"
                 ping="${x => x.columnConfig.ping}"
@@ -31500,27 +31553,15 @@
                 download="${x => x.columnConfig.download}"
                 underline-hidden="${x => x.columnConfig.underlineHidden}"
                 appearance="${x => x.columnConfig.appearance}"
-                title=${x => (x.isValidContentAndHasOverflow ? x.content : null)}
-                @mouseover="${x => {
-    x.isValidContentAndHasOverflow = !!x.content && x.anchor.offsetWidth < x.anchor.scrollWidth;
-}}"
-                @mouseout="${x => {
-    x.isValidContentAndHasOverflow = false;
-}}"
+                title=${x => (x.hasOverflow && x.content ? x.content : null)}
             >
                 ${x => x.content}
             </${anchorTag}>`)}
         ${when(x => typeof x.cellRecord.href !== 'string', html `
             <span
-                ${ref('textSpan')}
+                ${overflow('hasOverflow')}
                 class="${x => (typeof x.cellRecord.label === 'string' ? '' : 'placeholder')}"
-                title=${x => (x.isValidContentAndHasOverflow ? x.content : null)}
-                @mouseover="${x => {
-    x.isValidContentAndHasOverflow = !!x.content && x.textSpan.offsetWidth < x.textSpan.scrollWidth;
-}}"
-                @mouseout="${x => {
-    x.isValidContentAndHasOverflow = false;
-}}"
+                title=${x => (x.hasOverflow && x.content ? x.content : null)}
             >
                 ${x => x.content}
             </span>`)}
@@ -31534,7 +31575,7 @@
         constructor() {
             super(...arguments);
             /** @internal */
-            this.isValidContentAndHasOverflow = false;
+            this.hasOverflow = false;
         }
         get content() {
             if (typeof this.cellRecord.label === 'string') {
@@ -31551,7 +31592,7 @@
     }
     __decorate$1([
         observable
-    ], TableColumnAnchorCellView.prototype, "isValidContentAndHasOverflow", void 0);
+    ], TableColumnAnchorCellView.prototype, "hasOverflow", void 0);
     __decorate$1([
         volatile
     ], TableColumnAnchorCellView.prototype, "content", null);
@@ -31587,14 +31628,6 @@
         get content() {
             return this.shouldUsePlaceholder ? this.placeholder : this.text;
         }
-        /** @internal */
-        updateTitleOverflow() {
-            this.hasOverflow = this.textSpan.offsetWidth < this.textSpan.scrollWidth;
-        }
-        /** @internal */
-        clearTitleOverflow() {
-            this.hasOverflow = false;
-        }
     }
     __decorate$1([
         observable
@@ -31614,10 +31647,8 @@
 
     const template$6 = html `
     <span
-        ${ref('textSpan')}
+        ${overflow('hasOverflow')}
         class="${x => (x.shouldUsePlaceholder ? 'placeholder' : '')}"
-        @mouseover="${x => x.updateTitleOverflow()}"
-        @mouseout="${x => x.clearTitleOverflow()}"
         title="${x => (x.hasOverflow && x.content ? x.content : undefined)}"
     >
         ${x => x.content}
@@ -31810,15 +31841,9 @@
 
     const template$5 = html `
     <span
-        ${ref('textSpan')}
+        ${overflow('hasOverflow')}
         class="${x => (x.shouldUsePlaceholder ? 'placeholder' : '')}"
-        @mouseover="${x => {
-    x.isValidContentAndHasOverflow = !!x.content && x.textSpan.offsetWidth < x.textSpan.scrollWidth;
-}}"
-        @mouseout="${x => {
-    x.isValidContentAndHasOverflow = false;
-}}"
-        title=${x => (x.isValidContentAndHasOverflow ? x.content : null)}
+        title=${x => (x.hasOverflow && x.content ? x.content : null)}
     >
         ${x => x.content}
     </span>
@@ -31845,7 +31870,7 @@
         constructor() {
             super(...arguments);
             /** @internal */
-            this.isValidContentAndHasOverflow = false;
+            this.hasOverflow = false;
             /**
              * Text to render in the cell when it contains a valid value (i.e. when shouldUsePlaceholder is false).
              */
@@ -31865,7 +31890,7 @@
     }
     __decorate$1([
         observable
-    ], TableColumnTextCellViewBase.prototype, "isValidContentAndHasOverflow", void 0);
+    ], TableColumnTextCellViewBase.prototype, "hasOverflow", void 0);
     __decorate$1([
         observable
     ], TableColumnTextCellViewBase.prototype, "text", void 0);