@ni/nimble-components 19.4.2 → 19.4.4

package/dist/esm/src/table-column/anchor/cell-view/index.d.ts

@@ -11,11 +11,9 @@ declare global {
  */
 export declare class TableColumnAnchorCellView extends TableCellView<TableColumnAnchorCellRecord, TableColumnAnchorColumnConfig> {
     /** @internal */
-    isValidContentAndHasOverflow: boolean;
+    hasOverflow: boolean;
     /** @internal */
     anchor?: Anchor;
-    /** @internal */
-    textSpan?: HTMLSpanElement;
     get content(): string;
     focusedRecycleCallback(): void;
 }

package/dist/esm/src/table-column/base/index.d.ts

@@ -20,9 +20,7 @@ export declare abstract class TableColumn<TColumnConfig = unknown> extends Found
     sortDirection: TableColumnSortDirection;
     sortingDisabled: boolean;
     /** @internal */
-    isValidContentAndHasOverflow: boolean;
-    /** @internal */
-    headerSpan: HTMLSpanElement;
+    hasOverflow: boolean;
     /** @internal */
     contentSlot: HTMLSlotElement;
     checkValidity(): boolean;

package/dist/esm/src/table-column/text/cell-view/index.d.ts

@@ -9,8 +9,7 @@ declare global {
  * A cell view for displaying string fields as text
  */
 export declare class TableColumnTextCellView extends TableColumnTextCellViewBase<TableColumnTextCellRecord, TableColumnTextColumnConfig> {
-    get text(): string;
-    get placeholder(): string;
-    get shouldUsePlaceholder(): boolean;
+    private columnConfigChanged;
+    private cellRecordChanged;
 }
 export declare const tableColumnTextCellViewTag: string;

package/dist/esm/src/table-column/text/group-header-view/index.d.ts

@@ -10,8 +10,7 @@ declare global {
  * The group header view for displaying string fields as text.
  */
 export declare class TableColumnTextGroupHeaderView extends TableColumnTextGroupHeaderViewBase<TableStringFieldValue, TableColumnTextColumnConfig> {
-    get text(): string;
-    get placeholder(): string;
-    get shouldUsePlaceholder(): boolean;
+    private columnConfigChanged;
+    private groupHeaderValueChanged;
 }
 export declare const tableColumnTextGroupHeaderTag: string;

package/dist/esm/src/table-column/text-base/cell-view/index.d.ts

@@ -5,26 +5,18 @@ import type { TableCellRecord } from '../../base/types';
  */
 export declare abstract class TableColumnTextCellViewBase<TCellRecord extends TableCellRecord = TableCellRecord, TColumnConfig = unknown> extends TableCellView<TCellRecord, TColumnConfig> {
     /** @internal */
-    isValidContentAndHasOverflow: boolean;
-    /** @internal */
-    textSpan: HTMLElement;
+    hasOverflow: boolean;
     /**
-     * Returns the text to render in the cell when it contains a valid value (i.e. when shouldUsePlaceholder() is false).
-     * If the implementation has branching code paths then it must be marked with @volatile.
-     * https://www.fast.design/docs/fast-element/observables-and-state/#observable-features
+     * Text to render in the cell when it contains a valid value (i.e. when shouldUsePlaceholder is false).
      */
-    abstract get text(): string;
+    text: string;
     /**
-     * Returns the text to render in the cell when it contains an invalid value (i.e. when shouldUsePlaceholder() is true).
-     * If the implementation has branching code paths then it must be marked with @volatile.
-     * https://www.fast.design/docs/fast-element/observables-and-state/#observable-features
+     * Text to render in the cell when it contains an invalid value (i.e. when shouldUsePlaceholder is true).
      */
-    abstract get placeholder(): string;
+    placeholder: string;
     /**
      * Returns whether to display the placeholder value or the text value
-     * If the implementation has branching code paths then it must be marked with @volatile.
-     * https://www.fast.design/docs/fast-element/observables-and-state/#observable-features
-     * */
-    abstract get shouldUsePlaceholder(): boolean;
+     */
+    shouldUsePlaceholder: boolean;
     get content(): string;
 }

package/dist/esm/src/table-column/text-base/group-header-view/index.d.ts

@@ -5,31 +5,19 @@ import type { TableColumnWithPlaceholderColumnConfig } from '../../base/types';
  * The group header view base class for displaying fields of any type as text.
  */
 export declare abstract class TableColumnTextGroupHeaderViewBase<TGroupValue = TableFieldValue, TColumnConfig = TableColumnWithPlaceholderColumnConfig> extends TableGroupHeaderView<TGroupValue, TColumnConfig> {
-    /** @internal */
-    textSpan: HTMLElement;
     /** @internal */
     hasOverflow: boolean;
     /**
-     * Returns the text to render in the cell when it contains a valid value (i.e. when shouldUsePlaceholder() is false).
-     * If the implementation has branching code paths then it must be marked with @volatile.
-     * https://www.fast.design/docs/fast-element/observables-and-state/#observable-features
+     * Text to render in the cell when it contains a valid value (i.e. when shouldUsePlaceholder is false).
      */
-    abstract get text(): string;
+    text: string;
     /**
-     * Returns the text to render in the cell when it contains an invalid value (i.e. when shouldUsePlaceholder() is true).
-     * If the implementation has branching code paths then it must be marked with @volatile.
-     * https://www.fast.design/docs/fast-element/observables-and-state/#observable-features
+     * Text to render in the cell when it contains an invalid value (i.e. when shouldUsePlaceholder is true).
      */
-    abstract get placeholder(): string;
+    placeholder: string;
     /**
      * Returns whether to display the placeholder value or the text value
-     * If the implementation has branching code paths then it must be marked with @volatile.
-     * https://www.fast.design/docs/fast-element/observables-and-state/#observable-features
-     * */
-    abstract get shouldUsePlaceholder(): boolean;
+     */
+    shouldUsePlaceholder: boolean;
     get content(): string;
-    /** @internal */
-    updateTitleOverflow(): void;
-    /** @internal */
-    clearTitleOverflow(): void;
 }

package/dist/esm/src/utilities/directive/overflow.d.ts

@@ -0,0 +1,36 @@
+import { type Behavior, type CaptureType } from '@microsoft/fast-element';
+/**
+ * The runtime behavior for template overflow detection.
+ * @public
+ */
+export declare class OverflowBehavior implements Behavior {
+    private readonly target;
+    private propertyName;
+    private mouseOverHandler;
+    private mouseOutHandler;
+    private source;
+    /**
+     * 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: HTMLElement, propertyName: string);
+    /**
+     * 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: unknown): void;
+    /**
+     * Unbinds this behavior from the source.
+     * @param source - The source to unbind from.
+     */
+    unbind(): void;
+    private setSourceValue;
+}
+/**
+ * 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
+ */
+export declare function overflow<T = unknown>(propertyName: keyof T & string): CaptureType<T>;

package/dist/esm/table-column/anchor/cell-view/index.d.ts

@@ -11,11 +11,9 @@ declare global {
  */
 export declare class TableColumnAnchorCellView extends TableCellView<TableColumnAnchorCellRecord, TableColumnAnchorColumnConfig> {
     /** @internal */
-    isValidContentAndHasOverflow: boolean;
+    hasOverflow: boolean;
     /** @internal */
     anchor?: Anchor;
-    /** @internal */
-    textSpan?: HTMLSpanElement;
     get content(): string;
     focusedRecycleCallback(): void;
 }

package/dist/esm/table-column/anchor/cell-view/index.js

@@ -11,7 +11,7 @@ export class TableColumnAnchorCellView extends TableCellView {
     constructor() {
         super(...arguments);
         /** @internal */
-        this.isValidContentAndHasOverflow = false;
+        this.hasOverflow = false;
     }
     get content() {
         if (typeof this.cellRecord.label === 'string') {
@@ -28,7 +28,7 @@ export class TableColumnAnchorCellView extends TableCellView {
 }
 __decorate([
     observable
-], TableColumnAnchorCellView.prototype, "isValidContentAndHasOverflow", void 0);
+], TableColumnAnchorCellView.prototype, "hasOverflow", void 0);
 __decorate([
     volatile
 ], TableColumnAnchorCellView.prototype, "content", null);

package/dist/esm/table-column/anchor/cell-view/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table-column/anchor/cell-view/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAM1D,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;GAEG;AACH,MAAM,OAAO,yBAA0B,SAAQ,aAG9C;IAHD;;QAII,gBAAgB;QAET,iCAA4B,GAAG,KAAK,CAAC;IAqBhD,CAAC;IAbG,IAAW,OAAO;QACd,IAAI,OAAO,IAAI,CAAC,UAAU,CAAC,KAAK,KAAK,QAAQ,EAAE;YAC3C,OAAO,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;SAChC;QACD,IAAI,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,KAAK,QAAQ,EAAE;YAC1C,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;SAC/B;QACD,OAAO,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC;IACzC,CAAC;IAEe,sBAAsB;QAClC,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC;IACxB,CAAC;CACJ;AArBG;IADC,UAAU;+EACiC;AAQ5C;IADC,QAAQ;wDASR;AAOL,MAAM,cAAc,GAAG,yBAAyB,CAAC,OAAO,CAAC;IACrD,QAAQ,EAAE,+BAA+B;IACzC,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AACH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC,CAAC;AAC3E,MAAM,CAAC,MAAM,4BAA4B,GAAG,YAAY,CAAC,MAAM,CAC3D,yBAAyB,CAC5B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table-column/anchor/cell-view/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAM1D,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;GAEG;AACH,MAAM,OAAO,yBAA0B,SAAQ,aAG9C;IAHD;;QAII,gBAAgB;QAET,gBAAW,GAAG,KAAK,CAAC;IAmB/B,CAAC;IAbG,IAAW,OAAO;QACd,IAAI,OAAO,IAAI,CAAC,UAAU,CAAC,KAAK,KAAK,QAAQ,EAAE;YAC3C,OAAO,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;SAChC;QACD,IAAI,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,KAAK,QAAQ,EAAE;YAC1C,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;SAC/B;QACD,OAAO,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC;IACzC,CAAC;IAEe,sBAAsB;QAClC,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC;IACxB,CAAC;CACJ;AAnBG;IADC,UAAU;8DACgB;AAM3B;IADC,QAAQ;wDASR;AAOL,MAAM,cAAc,GAAG,yBAAyB,CAAC,OAAO,CAAC;IACrD,QAAQ,EAAE,+BAA+B;IACzC,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AACH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC,CAAC;AAC3E,MAAM,CAAC,MAAM,4BAA4B,GAAG,YAAY,CAAC,MAAM,CAC3D,yBAAyB,CAC5B,CAAC"}

package/dist/esm/table-column/anchor/cell-view/template.js

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/indent */
 import { html, ref, when } from '@microsoft/fast-element';
 import { anchorTag } from '../../../anchor';
+import { overflow } from '../../../utilities/directive/overflow';
 // prettier-ignore
 export const template = html `
     <template
@@ -14,6 +15,7 @@ export const template = html `
         ${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}"
@@ -24,27 +26,15 @@ export const template = html `
                 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>`)}

package/dist/esm/table-column/anchor/cell-view/template.js.map

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/table-column/anchor/cell-view/template.ts"],"names":[],"mappings":"AAAA,8CAA8C;AAC9C,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE1D,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAA2B;;kBAErC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;IACf,IAAI,OAAO,CAAC,CAAC,UAAU,CAAC,IAAI,KAAK,QAAQ,EAAE;QACvC,CAAC,CAAC,KAAK,CAAC,eAAe,EAAE,CAAC;KAC7B;IACD,OAAO,IAAI,CAAC;AAChB,CAAC;;UAEC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC,IAAI,KAAK,QAAQ,EAAE,IAAI,CAA2B;eAC3E,SAAS;kBACN,GAAG,CAAC,QAAQ,CAAC;wBACP,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI;4BAClB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,QAAQ;wBAChC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,IAAI;kCACd,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,cAAc;uBAC7C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,GAAG;0BACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM;wBAC5B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,IAAI;4BACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,QAAQ;oCACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,eAAe;8BACzC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,UAAU;wBACpC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC;8BAClD,CAAC,CAAC,EAAE;IACd,CAAC,CAAC,4BAA4B,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,MAAO,CAAC,WAAW,GAAG,CAAC,CAAC,MAAO,CAAC,WAAW,CAAC;AAClG,CAAC;6BACY,CAAC,CAAC,EAAE;IACb,CAAC,CAAC,4BAA4B,GAAG,KAAK,CAAC;AAC3C,CAAC;;kBAEC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO;gBAChB,SAAS,GAAG,CAAC;UACnB,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC,IAAI,KAAK,QAAQ,EAAE,IAAI,CAA2B;;kBAExE,GAAG,CAAC,UAAU,CAAC;yBACR,CAAC,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC;wBACnE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC;8BAClD,CAAC,CAAC,EAAE;IACd,CAAC,CAAC,4BAA4B,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,QAAS,CAAC,WAAW,GAAG,CAAC,CAAC,QAAS,CAAC,WAAW,CAAC;AACtG,CAAC;6BACY,CAAC,CAAC,EAAE;IACb,CAAC,CAAC,4BAA4B,GAAG,KAAK,CAAC;AAC3C,CAAC;;kBAEC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO;oBACZ,CAAC;;CAEpB,CAAC"}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/table-column/anchor/cell-view/template.ts"],"names":[],"mappings":"AAAA,8CAA8C;AAC9C,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE1D,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AAEjE,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAA2B;;kBAErC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;IACf,IAAI,OAAO,CAAC,CAAC,UAAU,CAAC,IAAI,KAAK,QAAQ,EAAE;QACvC,CAAC,CAAC,KAAK,CAAC,eAAe,EAAE,CAAC;KAC7B;IACD,OAAO,IAAI,CAAC;AAChB,CAAC;;UAEC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC,IAAI,KAAK,QAAQ,EAAE,IAAI,CAA2B;eAC3E,SAAS;kBACN,GAAG,CAAC,QAAQ,CAAC;kBACb,QAAQ,CAAC,aAAa,CAAC;wBACjB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI;4BAClB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,QAAQ;wBAChC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,IAAI;kCACd,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,cAAc;uBAC7C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,GAAG;0BACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM;wBAC5B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,IAAI;4BACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,QAAQ;oCACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,eAAe;8BACzC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,UAAU;wBACpC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC;;kBAE1D,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO;gBAChB,SAAS,GAAG,CAAC;UACnB,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC,IAAI,KAAK,QAAQ,EAAE,IAAI,CAA2B;;kBAExE,QAAQ,CAAC,aAAa,CAAC;yBAChB,CAAC,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC;wBACnE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC;;kBAE1D,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO;oBACZ,CAAC;;CAEpB,CAAC"}

package/dist/esm/table-column/base/index.d.ts

@@ -20,9 +20,7 @@ export declare abstract class TableColumn<TColumnConfig = unknown> extends Found
     sortDirection: TableColumnSortDirection;
     sortingDisabled: boolean;
     /** @internal */
-    isValidContentAndHasOverflow: boolean;
-    /** @internal */
-    headerSpan: HTMLSpanElement;
+    hasOverflow: boolean;
     /** @internal */
     contentSlot: HTMLSlotElement;
     checkValidity(): boolean;

package/dist/esm/table-column/base/index.js

@@ -19,7 +19,7 @@ export class TableColumn extends FoundationElement {
         this.sortDirection = TableColumnSortDirection.none;
         this.sortingDisabled = false;
         /** @internal */
-        this.isValidContentAndHasOverflow = false;
+        this.hasOverflow = false;
     }
     checkValidity() {
         return this.columnInternals.validConfiguration;
@@ -78,5 +78,5 @@ __decorate([
 ], TableColumn.prototype, "sortingDisabled", void 0);
 __decorate([
     observable
-], TableColumn.prototype, "isValidContentAndHasOverflow", void 0);
+], TableColumn.prototype, "hasOverflow", void 0);
 //# sourceMappingURL=index.js.map

package/dist/esm/table-column/base/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table-column/base/index.ts"],"names":[],"mappings":";AAAA,OAAO,EACH,IAAI,EACJ,uBAAuB,EACvB,UAAU,EACb,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,EACH,eAAe,EAElB,MAAM,2BAA2B,CAAC;AAGnC;;GAEG;AACH,MAAM,OAAgB,WAEpB,SAAQ,iBAAiB;IAF3B;;QAGI;;;;WAIG;QACa,oBAAe,GAAmC,IAAI,eAAe,CAAC,IAAI,CAAC,yBAAyB,EAAE,CAAC,CAAC;QAYjH,iBAAY,GAAG,KAAK,CAAC;QAMrB,kBAAa,GAA6B,wBAAwB,CAAC,IAAI,CAAC;QAGxE,oBAAe,GAAG,KAAK,CAAC;QAE/B,gBAAgB;QAET,iCAA4B,GAAG,KAAK,CAAC;IA+ChD,CAAC;IAvCU,aAAa;QAChB,OAAO,IAAI,CAAC,eAAe,CAAC,kBAAkB,CAAC;IACnD,CAAC;IAED,IAAW,QAAQ;QACf,OAAO,EAAE,CAAC;IACd,CAAC;IAED,gBAAgB;IAChB,IAAW,iBAAiB;QACxB,OAAO,IAAI,CAAC,WAAW;aAClB,aAAa,EAAE;aACf,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC;aACrC,IAAI,CAAC,GAAG,CAAC,CAAC;IACnB,CAAC;IAIS,oBAAoB;QAC1B,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;YACvB,IAAI,CAAC,eAAe,CAAC,oBAAoB,GAAG,IAAI,CAAC,aAAa,CAAC;SAClE;IACL,CAAC;IAES,gBAAgB;QACtB,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;YACvB,IAAI,CAAC,eAAe,CAAC,gBAAgB,GAAG,IAAI,CAAC,SAAS,CAAC;SAC1D;IACL,CAAC;IAES,sBAAsB;QAC5B,IAAI,IAAI,CAAC,eAAe,EAAE;YACtB,IAAI,CAAC,eAAe,CAAC,oBAAoB,GAAG,wBAAwB,CAAC,IAAI,CAAC;YAC1E,IAAI,CAAC,eAAe,CAAC,gBAAgB,GAAG,SAAS,CAAC;SACrD;aAAM;YACH,IAAI,CAAC,eAAe,CAAC,oBAAoB,GAAG,IAAI,CAAC,aAAa,CAAC;YAC/D,IAAI,CAAC,eAAe,CAAC,gBAAgB,GAAG,IAAI,CAAC,SAAS,CAAC;SAC1D;IACL,CAAC;CACJ;AArEG;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;6CACR;AAGzB;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;mDACT;AAG/B;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;oDACT;AAGhC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;iDAC1B;AAG5B;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;8CACrC;AAGjC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;kDACyC;AAG/E;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;oDAC1B;AAI/B;IADC,UAAU;iEACiC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table-column/base/index.ts"],"names":[],"mappings":";AAAA,OAAO,EACH,IAAI,EACJ,uBAAuB,EACvB,UAAU,EACb,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,EACH,eAAe,EAElB,MAAM,2BAA2B,CAAC;AAGnC;;GAEG;AACH,MAAM,OAAgB,WAEpB,SAAQ,iBAAiB;IAF3B;;QAGI;;;;WAIG;QACa,oBAAe,GAAmC,IAAI,eAAe,CAAC,IAAI,CAAC,yBAAyB,EAAE,CAAC,CAAC;QAYjH,iBAAY,GAAG,KAAK,CAAC;QAMrB,kBAAa,GAA6B,wBAAwB,CAAC,IAAI,CAAC;QAGxE,oBAAe,GAAG,KAAK,CAAC;QAE/B,gBAAgB;QAET,gBAAW,GAAG,KAAK,CAAC;IA4C/B,CAAC;IAvCU,aAAa;QAChB,OAAO,IAAI,CAAC,eAAe,CAAC,kBAAkB,CAAC;IACnD,CAAC;IAED,IAAW,QAAQ;QACf,OAAO,EAAE,CAAC;IACd,CAAC;IAED,gBAAgB;IAChB,IAAW,iBAAiB;QACxB,OAAO,IAAI,CAAC,WAAW;aAClB,aAAa,EAAE;aACf,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC;aACrC,IAAI,CAAC,GAAG,CAAC,CAAC;IACnB,CAAC;IAIS,oBAAoB;QAC1B,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;YACvB,IAAI,CAAC,eAAe,CAAC,oBAAoB,GAAG,IAAI,CAAC,aAAa,CAAC;SAClE;IACL,CAAC;IAES,gBAAgB;QACtB,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;YACvB,IAAI,CAAC,eAAe,CAAC,gBAAgB,GAAG,IAAI,CAAC,SAAS,CAAC;SAC1D;IACL,CAAC;IAES,sBAAsB;QAC5B,IAAI,IAAI,CAAC,eAAe,EAAE;YACtB,IAAI,CAAC,eAAe,CAAC,oBAAoB,GAAG,wBAAwB,CAAC,IAAI,CAAC;YAC1E,IAAI,CAAC,eAAe,CAAC,gBAAgB,GAAG,SAAS,CAAC;SACrD;aAAM;YACH,IAAI,CAAC,eAAe,CAAC,oBAAoB,GAAG,IAAI,CAAC,aAAa,CAAC;YAC/D,IAAI,CAAC,eAAe,CAAC,gBAAgB,GAAG,IAAI,CAAC,SAAS,CAAC;SAC1D;IACL,CAAC;CACJ;AAlEG;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;6CACR;AAGzB;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;mDACT;AAG/B;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;oDACT;AAGhC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;iDAC1B;AAG5B;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;8CACrC;AAGjC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;kDACyC;AAG/E;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;oDAC1B;AAI/B;IADC,UAAU;gDACgB"}

package/dist/esm/table-column/base/template.js

@@ -1,18 +1,12 @@
 import { html, ref } from '@microsoft/fast-element';
+import { overflow } from '../../utilities/directive/overflow';
 // prettier-ignore
 export const template = 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>

package/dist/esm/table-column/base/template.js.map

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/table-column/base/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAGpD,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAa;sBACnB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,QAAQ;;cAEvC,GAAG,CAAC,YAAY,CAAC;;0BAEL,CAAC,CAAC,EAAE;IACtB,CAAC,CAAC,4BAA4B,GAAG,CAAC,CAAC,CAAC,CAAC,iBAAiB;WACvC,CAAC,CAAC,UAAU,CAAC,WAAW,GAAG,CAAC,CAAC,UAAU,CAAC,WAAW,CAAC;AACvE,CAAC;yBACoB,CAAC,CAAC,EAAE;IACrB,CAAC,CAAC,4BAA4B,GAAG,KAAK,CAAC;AAC3C,CAAC;oBACe,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC;;oBAElE,GAAG,CAAC,aAAa,CAAC;;;CAGrC,CAAC"}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/table-column/base/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAEpD,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAE9D,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAa;sBACnB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,QAAQ;;cAEvC,QAAQ,CAAC,aAAa,CAAC;;oBAEjB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC;;oBAExE,GAAG,CAAC,aAAa,CAAC;;;CAGrC,CAAC"}

package/dist/esm/table-column/text/cell-view/index.d.ts

@@ -9,8 +9,7 @@ declare global {
  * A cell view for displaying string fields as text
  */
 export declare class TableColumnTextCellView extends TableColumnTextCellViewBase<TableColumnTextCellRecord, TableColumnTextColumnConfig> {
-    get text(): string;
-    get placeholder(): string;
-    get shouldUsePlaceholder(): boolean;
+    private columnConfigChanged;
+    private cellRecordChanged;
 }
 export declare const tableColumnTextCellViewTag: string;

package/dist/esm/table-column/text/cell-view/index.js

@@ -6,14 +6,18 @@ import { TableColumnTextCellViewBase } from '../../text-base/cell-view';
  * A cell view for displaying string fields as text
  */
 export class TableColumnTextCellView extends TableColumnTextCellViewBase {
-    get text() {
-        return this.cellRecord.value;
+    columnConfigChanged() {
+        this.placeholder = this.columnConfig.placeholder;
     }
-    get placeholder() {
-        return this.columnConfig.placeholder;
-    }
-    get shouldUsePlaceholder() {
-        return typeof this.cellRecord.value !== 'string';
+    cellRecordChanged() {
+        if (typeof this.cellRecord.value === 'string') {
+            this.text = this.cellRecord.value;
+            this.shouldUsePlaceholder = false;
+        }
+        else {
+            this.text = '';
+            this.shouldUsePlaceholder = true;
+        }
     }
 }
 const textCellView = TableColumnTextCellView.compose({

package/dist/esm/table-column/text/cell-view/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table-column/text/cell-view/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAK9D,OAAO,EAAE,MAAM,EAAE,MAAM,kCAAkC,CAAC;AAC1D,OAAO,EAAE,2BAA2B,EAAE,MAAM,2BAA2B,CAAC;AAQxE;;GAEG;AACH,MAAM,OAAO,uBAAwB,SAAQ,2BAG5C;IACG,IAAoB,IAAI;QACpB,OAAO,IAAI,CAAC,UAAU,CAAC,KAAM,CAAC;IAClC,CAAC;IAED,IAAoB,WAAW;QAC3B,OAAO,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC;IACzC,CAAC;IAED,IAAoB,oBAAoB;QACpC,OAAO,OAAO,IAAI,CAAC,UAAU,CAAC,KAAK,KAAK,QAAQ,CAAC;IACrD,CAAC;CACJ;AAED,MAAM,YAAY,GAAG,uBAAuB,CAAC,OAAO,CAAC;IACjD,QAAQ,EAAE,6BAA6B;IACvC,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AACH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC;AACzE,MAAM,CAAC,MAAM,0BAA0B,GAAG,YAAY,CAAC,MAAM,CACzD,uBAAuB,CAC1B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table-column/text/cell-view/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAK9D,OAAO,EAAE,MAAM,EAAE,MAAM,kCAAkC,CAAC;AAC1D,OAAO,EAAE,2BAA2B,EAAE,MAAM,2BAA2B,CAAC;AAQxE;;GAEG;AACH,MAAM,OAAO,uBAAwB,SAAQ,2BAG5C;IACW,mBAAmB;QACvB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC;IACrD,CAAC;IAEO,iBAAiB;QACrB,IAAI,OAAO,IAAI,CAAC,UAAU,CAAC,KAAK,KAAK,QAAQ,EAAE;YAC3C,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;YAClC,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC;SACrC;aAAM;YACH,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC;YACf,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC;SACpC;IACL,CAAC;CACJ;AAED,MAAM,YAAY,GAAG,uBAAuB,CAAC,OAAO,CAAC;IACjD,QAAQ,EAAE,6BAA6B;IACvC,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AACH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC;AACzE,MAAM,CAAC,MAAM,0BAA0B,GAAG,YAAY,CAAC,MAAM,CACzD,uBAAuB,CAC1B,CAAC"}

package/dist/esm/table-column/text/group-header-view/index.d.ts

@@ -10,8 +10,7 @@ declare global {
  * The group header view for displaying string fields as text.
  */
 export declare class TableColumnTextGroupHeaderView extends TableColumnTextGroupHeaderViewBase<TableStringFieldValue, TableColumnTextColumnConfig> {
-    get text(): string;
-    get placeholder(): string;
-    get shouldUsePlaceholder(): boolean;
+    private columnConfigChanged;
+    private groupHeaderValueChanged;
 }
 export declare const tableColumnTextGroupHeaderTag: string;

package/dist/esm/table-column/text/group-header-view/index.js

@@ -6,14 +6,18 @@ import { styles } from '../../text-base/group-header-view/styles';
  * The group header view for displaying string fields as text.
  */
 export class TableColumnTextGroupHeaderView extends TableColumnTextGroupHeaderViewBase {
-    get text() {
-        return this.groupHeaderValue;
+    columnConfigChanged() {
+        this.placeholder = this.columnConfig?.placeholder ?? '';
     }
-    get placeholder() {
-        return this.columnConfig?.placeholder ?? '';
-    }
-    get shouldUsePlaceholder() {
-        return typeof this.groupHeaderValue !== 'string';
+    groupHeaderValueChanged() {
+        if (typeof this.groupHeaderValue === 'string') {
+            this.text = this.groupHeaderValue;
+            this.shouldUsePlaceholder = false;
+        }
+        else {
+            this.text = '';
+            this.shouldUsePlaceholder = true;
+        }
     }
 }
 const tableColumnTextGroupHeaderView = TableColumnTextGroupHeaderView.compose({

package/dist/esm/table-column/text/group-header-view/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table-column/text/group-header-view/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,EAAE,kCAAkC,EAAE,MAAM,mCAAmC,CAAC;AACvF,OAAO,EAAE,QAAQ,EAAE,MAAM,4CAA4C,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAQlE;;GAEG;AACH,MAAM,OAAO,8BAA+B,SAAQ,kCAGnD;IACG,IAAoB,IAAI;QACpB,OAAO,IAAI,CAAC,gBAAiB,CAAC;IAClC,CAAC;IAED,IAAoB,WAAW;QAC3B,OAAO,IAAI,CAAC,YAAY,EAAE,WAAW,IAAI,EAAE,CAAC;IAChD,CAAC;IAED,IAAoB,oBAAoB;QACpC,OAAO,OAAO,IAAI,CAAC,gBAAgB,KAAK,QAAQ,CAAC;IACrD,CAAC;CACJ;AAED,MAAM,8BAA8B,GAAG,8BAA8B,CAAC,OAAO,CAAC;IAC1E,QAAQ,EAAE,gCAAgC;IAC1C,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AACH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,8BAA8B,EAAE,CAAC,CAAC;AAChD,MAAM,CAAC,MAAM,6BAA6B,GAAG,YAAY,CAAC,MAAM,CAC5D,8BAA8B,CACjC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table-column/text/group-header-view/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,EAAE,kCAAkC,EAAE,MAAM,mCAAmC,CAAC;AACvF,OAAO,EAAE,QAAQ,EAAE,MAAM,4CAA4C,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAQlE;;GAEG;AACH,MAAM,OAAO,8BAA+B,SAAQ,kCAGnD;IACW,mBAAmB;QACvB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,YAAY,EAAE,WAAW,IAAI,EAAE,CAAC;IAC5D,CAAC;IAEO,uBAAuB;QAC3B,IAAI,OAAO,IAAI,CAAC,gBAAgB,KAAK,QAAQ,EAAE;YAC3C,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,gBAAgB,CAAC;YAClC,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC;SACrC;aAAM;YACH,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC;YACf,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC;SACpC;IACL,CAAC;CACJ;AAED,MAAM,8BAA8B,GAAG,8BAA8B,CAAC,OAAO,CAAC;IAC1E,QAAQ,EAAE,gCAAgC;IAC1C,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AACH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,8BAA8B,EAAE,CAAC,CAAC;AAChD,MAAM,CAAC,MAAM,6BAA6B,GAAG,YAAY,CAAC,MAAM,CAC5D,8BAA8B,CACjC,CAAC"}

package/dist/esm/table-column/text-base/cell-view/index.d.ts

@@ -5,26 +5,18 @@ import type { TableCellRecord } from '../../base/types';
  */
 export declare abstract class TableColumnTextCellViewBase<TCellRecord extends TableCellRecord = TableCellRecord, TColumnConfig = unknown> extends TableCellView<TCellRecord, TColumnConfig> {
     /** @internal */
-    isValidContentAndHasOverflow: boolean;
-    /** @internal */
-    textSpan: HTMLElement;
+    hasOverflow: boolean;
     /**
-     * Returns the text to render in the cell when it contains a valid value (i.e. when shouldUsePlaceholder() is false).
-     * If the implementation has branching code paths then it must be marked with @volatile.
-     * https://www.fast.design/docs/fast-element/observables-and-state/#observable-features
+     * Text to render in the cell when it contains a valid value (i.e. when shouldUsePlaceholder is false).
      */
-    abstract get text(): string;
+    text: string;
     /**
-     * Returns the text to render in the cell when it contains an invalid value (i.e. when shouldUsePlaceholder() is true).
-     * If the implementation has branching code paths then it must be marked with @volatile.
-     * https://www.fast.design/docs/fast-element/observables-and-state/#observable-features
+     * Text to render in the cell when it contains an invalid value (i.e. when shouldUsePlaceholder is true).
      */
-    abstract get placeholder(): string;
+    placeholder: string;
     /**
      * Returns whether to display the placeholder value or the text value
-     * If the implementation has branching code paths then it must be marked with @volatile.
-     * https://www.fast.design/docs/fast-element/observables-and-state/#observable-features
-     * */
-    abstract get shouldUsePlaceholder(): boolean;
+     */
+    shouldUsePlaceholder: boolean;
     get content(): string;
 }

package/dist/esm/table-column/text-base/cell-view/index.js

@@ -8,7 +8,19 @@ export class TableColumnTextCellViewBase extends TableCellView {
     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).
+         */
+        this.text = '';
+        /**
+         * Text to render in the cell when it contains an invalid value (i.e. when shouldUsePlaceholder is true).
+         */
+        this.placeholder = '';
+        /**
+         * Returns whether to display the placeholder value or the text value
+         */
+        this.shouldUsePlaceholder = true;
     }
     get content() {
         return this.shouldUsePlaceholder ? this.placeholder : this.text;
@@ -16,7 +28,16 @@ export class TableColumnTextCellViewBase extends TableCellView {
 }
 __decorate([
     observable
-], TableColumnTextCellViewBase.prototype, "isValidContentAndHasOverflow", void 0);
+], TableColumnTextCellViewBase.prototype, "hasOverflow", void 0);
+__decorate([
+    observable
+], TableColumnTextCellViewBase.prototype, "text", void 0);
+__decorate([
+    observable
+], TableColumnTextCellViewBase.prototype, "placeholder", void 0);
+__decorate([
+    observable
+], TableColumnTextCellViewBase.prototype, "shouldUsePlaceholder", void 0);
 __decorate([
     volatile
 ], TableColumnTextCellViewBase.prototype, "content", null);

package/dist/esm/table-column/text-base/cell-view/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table-column/text-base/cell-view/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAGrD;;GAEG;AACH,MAAM,OAAgB,2BAGpB,SAAQ,aAAyC;IAHnD;;QAII,gBAAgB;QAET,iCAA4B,GAAG,KAAK,CAAC;IA8BhD,CAAC;IAHG,IAAW,OAAO;QACd,OAAO,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;IACpE,CAAC;CACJ;AA9BG;IADC,UAAU;iFACiC;AA2B5C;IADC,QAAQ;0DAGR"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table-column/text-base/cell-view/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAGrD;;GAEG;AACH,MAAM,OAAgB,2BAGpB,SAAQ,aAAyC;IAHnD;;QAII,gBAAgB;QAET,gBAAW,GAAG,KAAK,CAAC;QAE3B;;WAEG;QAEI,SAAI,GAAG,EAAE,CAAC;QAEjB;;WAEG;QAEI,gBAAW,GAAG,EAAE,CAAC;QAExB;;WAEG;QAEI,yBAAoB,GAAG,IAAI,CAAC;IAMvC,CAAC;IAHG,IAAW,OAAO;QACd,OAAO,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;IACpE,CAAC;CACJ;AAxBG;IADC,UAAU;gEACgB;AAM3B;IADC,UAAU;yDACM;AAMjB;IADC,UAAU;gEACa;AAMxB;IADC,UAAU;yEACwB;AAGnC;IADC,QAAQ;0DAGR"}

package/dist/esm/table-column/text-base/cell-view/template.js

@@ -1,15 +1,10 @@
-import { html, ref } from '@microsoft/fast-element';
+import { html } from '@microsoft/fast-element';
+import { overflow } from '../../../utilities/directive/overflow';
 export const template = 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>

package/dist/esm/table-column/text-base/cell-view/template.js.map

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/table-column/text-base/cell-view/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAIpD,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAA6B;;UAE/C,GAAG,CAAC,UAAU,CAAC;iBACR,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;sBAC7C,CAAC,CAAC,EAAE;IAClB,CAAC,CAAC,4BAA4B,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,QAAQ,CAAC,WAAW,GAAG,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC;AACpG,CAAC;qBACgB,CAAC,CAAC,EAAE;IACjB,CAAC,CAAC,4BAA4B,GAAG,KAAK,CAAC;AAC3C,CAAC;gBACW,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC;;UAE9D,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO;;CAEvB,CAAC"}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/table-column/text-base/cell-view/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG/C,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AAEjE,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAA6B;;UAE/C,QAAQ,CAAC,aAAa,CAAC;iBAChB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;gBACnD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC;;UAE1D,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO;;CAEvB,CAAC"}

package/dist/esm/table-column/text-base/group-header-view/index.d.ts

@@ -5,31 +5,19 @@ import type { TableColumnWithPlaceholderColumnConfig } from '../../base/types';
  * The group header view base class for displaying fields of any type as text.
  */
 export declare abstract class TableColumnTextGroupHeaderViewBase<TGroupValue = TableFieldValue, TColumnConfig = TableColumnWithPlaceholderColumnConfig> extends TableGroupHeaderView<TGroupValue, TColumnConfig> {
-    /** @internal */
-    textSpan: HTMLElement;
     /** @internal */
     hasOverflow: boolean;
     /**
-     * Returns the text to render in the cell when it contains a valid value (i.e. when shouldUsePlaceholder() is false).
-     * If the implementation has branching code paths then it must be marked with @volatile.
-     * https://www.fast.design/docs/fast-element/observables-and-state/#observable-features
+     * Text to render in the cell when it contains a valid value (i.e. when shouldUsePlaceholder is false).
      */
-    abstract get text(): string;
+    text: string;
     /**
-     * Returns the text to render in the cell when it contains an invalid value (i.e. when shouldUsePlaceholder() is true).
-     * If the implementation has branching code paths then it must be marked with @volatile.
-     * https://www.fast.design/docs/fast-element/observables-and-state/#observable-features
+     * Text to render in the cell when it contains an invalid value (i.e. when shouldUsePlaceholder is true).
      */
-    abstract get placeholder(): string;
+    placeholder: string;
     /**
      * Returns whether to display the placeholder value or the text value
-     * If the implementation has branching code paths then it must be marked with @volatile.
-     * https://www.fast.design/docs/fast-element/observables-and-state/#observable-features
-     * */
-    abstract get shouldUsePlaceholder(): boolean;
+     */
+    shouldUsePlaceholder: boolean;
     get content(): string;
-    /** @internal */
-    updateTitleOverflow(): void;
-    /** @internal */
-    clearTitleOverflow(): void;
 }

package/dist/esm/table-column/text-base/group-header-view/index.js

@@ -9,22 +9,35 @@ export class TableColumnTextGroupHeaderViewBase extends TableGroupHeaderView {
         super(...arguments);
         /** @internal */
         this.hasOverflow = false;
+        /**
+         * Text to render in the cell when it contains a valid value (i.e. when shouldUsePlaceholder is false).
+         */
+        this.text = '';
+        /**
+         * Text to render in the cell when it contains an invalid value (i.e. when shouldUsePlaceholder is true).
+         */
+        this.placeholder = '';
+        /**
+         * Returns whether to display the placeholder value or the text value
+         */
+        this.shouldUsePlaceholder = true;
     }
     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([
     observable
 ], TableColumnTextGroupHeaderViewBase.prototype, "hasOverflow", void 0);
+__decorate([
+    observable
+], TableColumnTextGroupHeaderViewBase.prototype, "text", void 0);
+__decorate([
+    observable
+], TableColumnTextGroupHeaderViewBase.prototype, "placeholder", void 0);
+__decorate([
+    observable
+], TableColumnTextGroupHeaderViewBase.prototype, "shouldUsePlaceholder", void 0);
 __decorate([
     volatile
 ], TableColumnTextGroupHeaderViewBase.prototype, "content", null);