@ni/nimble-components 29.7.8 → 29.8.0

package/dist/esm/table/types.d.ts

@@ -186,10 +186,10 @@ export interface TableRowState<TData extends TableRecord = TableRecord> {
     groupColumn?: TableColumn;
     isParentRow: boolean;
     isLoadingChildren: boolean;
+    slots: SlotMetadata[];
     resolvedRowIndex?: number;
 }
 /**
- * @internal
  * Table keyboard focus types
  */
 export declare const TableFocusType: {
@@ -215,10 +215,30 @@ export interface TableRowFocusableElements {
     }[];
 }
 /**
- * @internal
  * Focusable elements of a table's header
  */
 export interface TableHeaderFocusableElements {
     headerActions: HTMLElement[];
     columnHeaders: HTMLElement[];
 }
+/**
+ * @internal
+ */
+export interface CellViewSlotRequestEventDetail {
+    slots: SlotMetadata[];
+}
+/**
+ * @internal
+ */
+export interface RowSlotRequestEventDetail {
+    columnInternalId: string;
+    recordId: string;
+    slots: SlotMetadata[];
+}
+/**
+ * @internal
+ */
+export interface SlotMetadata {
+    slot: string;
+    name: string;
+}

package/dist/esm/table/types.js

@@ -30,7 +30,6 @@ export const TableRowSelectionState = {
     partiallySelected: 'partially-selected'
 };
 /**
- * @internal
  * Table keyboard focus types
  */
 export const TableFocusType = {

package/dist/esm/table/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/table/types.ts"],"names":[],"mappings":"AAkGA,MAAM,CAAC,MAAM,gCAAgC,GAAG;IAC5C,IAAI,EAAE,SAAS;IACf,eAAe,EAAE,mBAAmB;IACpC,eAAe,EAAE,kBAAkB;CAC7B,CAAC;AAWX;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG;IACpC,IAAI,EAAE,SAAS;IACf,SAAS,EAAE,WAAW;IACtB,UAAU,EAAE,YAAY;CAClB,CAAC;AAIX;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACjC,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,QAAQ;IAChB,QAAQ,EAAE,UAAU;CACd,CAAC;AAIX;;;;GAIG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG;IAClC,WAAW,EAAE,cAAc;IAC3B,QAAQ,EAAE,UAAU;IACpB,iBAAiB,EAAE,oBAAoB;CACjC,CAAC;AA2EX;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG;IAC1B,IAAI,EAAE,MAAM;IACZ,YAAY,EAAE,cAAc;IAC5B,aAAa,EAAE,eAAe;IAC9B,GAAG,EAAE,KAAK;IACV,oBAAoB,EAAE,sBAAsB;IAC5C,IAAI,EAAE,MAAM;IACZ,cAAc,EAAE,gBAAgB;IAChC,WAAW,EAAE,aAAa;CACpB,CAAC","sourcesContent":["import type { Checkbox } from '../checkbox';\nimport type { MenuButton } from '../menu-button';\nimport type { TableColumn } from '../table-column/base';\nimport type { ValidityObject } from '../utilities/models/validator';\nimport type { TableCell } from './components/cell';\n\n/**\n * TableFieldName describes the type associated with keys within\n * a table's records.\n */\nexport type TableFieldName = string;\n\n/**\n * TableFieldValue describes the type associated with values within\n * a table's records.\n */\nexport type TableFieldValue = string | number | boolean | null | undefined;\n\n/**\n * TableStringFieldValue describes the type associated with values within\n * a table's string records.\n */\nexport type TableStringFieldValue = string | null | undefined;\n\n/**\n * TableBooleanFieldValue describes the type associated with values within\n * a table's boolean records.\n */\nexport type TableBooleanFieldValue = boolean | null | undefined;\n\n/**\n * TableNumberFieldValue describes the type associated with values within\n * a table's number records.\n */\nexport type TableNumberFieldValue = number | null | undefined;\n\n/**\n * TableRecord describes the data structure that backs a single row in a table.\n * It is made up of fields, which are key/value pairs that have a key of type\n * TableFieldName and a value of type TableFieldValue.\n */\nexport interface TableRecord {\n    [key: TableFieldName]: TableFieldValue;\n}\n\n/**\n * @internal\n *\n * Describes a hierarchical data structure that is used for\n * the internal representation of the data, and allows us to represent data with\n * parent-child relationships within Tanstack.\n */\nexport interface TableNode<TRecord extends TableRecord = TableRecord> {\n    subRows?: TableNode<TRecord>[];\n    originalIndex: number;\n    clientRecord: TRecord;\n}\n\nexport type TableStringField<FieldName extends TableFieldName> = {\n    [name in FieldName]: TableStringFieldValue;\n};\n\nexport type TableBooleanField<FieldName extends TableFieldName> = {\n    [name in FieldName]: TableBooleanFieldValue;\n};\n\nexport type TableNumberField<FieldName extends TableFieldName> = {\n    [name in FieldName]: TableNumberFieldValue;\n};\n\nexport interface TableValidity extends ValidityObject {\n    readonly duplicateRecordId: boolean;\n    readonly missingRecordId: boolean;\n    readonly invalidRecordId: boolean;\n    readonly duplicateColumnId: boolean;\n    readonly missingColumnId: boolean;\n    readonly duplicateSortIndex: boolean;\n    readonly duplicateGroupIndex: boolean;\n    readonly idFieldNameNotConfigured: boolean;\n    readonly invalidColumnConfiguration: boolean;\n    readonly invalidParentIdConfiguration: boolean;\n}\n\n/**\n * The hierarachy options for a record in the table.\n */\nexport interface TableSetRecordHierarchyOptions {\n    recordId: string;\n    options: TableRecordHierarchyOptions;\n}\n\n/**\n * Describes the hierarchy options that can be configured for a record in the table.\n */\nexport interface TableRecordHierarchyOptions {\n    delayedHierarchyState: TableRecordDelayedHierarchyState;\n}\n\nexport const TableRecordDelayedHierarchyState = {\n    none: undefined,\n    canLoadChildren: 'can-load-children',\n    loadingChildren: 'loading-children'\n} as const;\nexport type TableRecordDelayedHierarchyState =\n    (typeof TableRecordDelayedHierarchyState)[keyof typeof TableRecordDelayedHierarchyState];\n\nexport interface TableActionMenuToggleEventDetail {\n    newState: boolean;\n    oldState: boolean;\n    recordIds: string[];\n    columnId?: string;\n}\n\n/**\n * The possible directions a table column can be sorted in.\n */\nexport const TableColumnSortDirection = {\n    none: undefined,\n    ascending: 'ascending',\n    descending: 'descending'\n} as const;\nexport type TableColumnSortDirection =\n    (typeof TableColumnSortDirection)[keyof typeof TableColumnSortDirection];\n\n/**\n * The selection modes of rows in the table.\n */\nexport const TableRowSelectionMode = {\n    none: undefined,\n    single: 'single',\n    multiple: 'multiple'\n} as const;\nexport type TableRowSelectionMode =\n    (typeof TableRowSelectionMode)[keyof typeof TableRowSelectionMode];\n\n/**\n * @internal\n *\n * The possible selection states that the table or a table row can be in.\n */\nexport const TableRowSelectionState = {\n    notSelected: 'not-selected',\n    selected: 'selected',\n    partiallySelected: 'partially-selected'\n} as const;\nexport type TableRowSelectionState =\n    (typeof TableRowSelectionState)[keyof typeof TableRowSelectionState];\n\n/**\n * @internal\n *\n * Internal event detail type for a row's selection state changing\n */\nexport interface TableRowSelectionToggleEventDetail {\n    oldState: boolean;\n    newState: boolean;\n}\n\n/**\n * Event detail type for row selection events in the table.\n */\nexport interface TableRowSelectionEventDetail {\n    selectedRecordIds: string[];\n}\n\n/**\n * Event detail type for row toggle events in the table.\n */\nexport interface TableRowExpansionToggleEventDetail {\n    oldState: boolean;\n    newState: boolean;\n    recordId: string;\n}\n\n/**\n * Event detail type for interactive column configuration changes.\n *\n * The column-configuration-change event is emitted when a column's configuration\n * is modified programmatically, such as by clicking on the column's header to sort\n * the column. The items in the `columns` array are specified in the same order as\n * the columns are listed in the DOM.\n */\nexport interface TableColumnConfigurationChangeEventDetail {\n    columns: TableColumnConfiguration[];\n}\n\n/**\n * A representation of the current configuration of a column within the table.\n */\nexport interface TableColumnConfiguration {\n    columnId?: string;\n    sortIndex?: number;\n    sortDirection: TableColumnSortDirection;\n    groupIndex?: number;\n    hidden: boolean;\n    fractionalWidth: number;\n    pixelWidth?: number;\n}\n\n/**\n * @internal\n *\n * Internal representation of a row in the table\n */\nexport interface TableRowState<TData extends TableRecord = TableRecord> {\n    record: TData;\n    id: string;\n    selectionState: TableRowSelectionState;\n    isGroupRow: boolean;\n    groupRowValue?: unknown;\n    isExpanded: boolean;\n    nestingLevel?: number;\n    immediateChildCount?: number;\n    groupColumn?: TableColumn;\n    isParentRow: boolean;\n    isLoadingChildren: boolean;\n    resolvedRowIndex?: number;\n}\n\n/**\n * @internal\n * Table keyboard focus types\n */\nexport const TableFocusType = {\n    none: 'none',\n    columnHeader: 'columnHeader',\n    headerActions: 'headerActions',\n    row: 'row',\n    rowSelectionCheckbox: 'rowSelectionCheckbox',\n    cell: 'cell',\n    cellActionMenu: 'cellActionMenu',\n    cellContent: 'cellContent'\n} as const;\nexport type TableFocusType =\n    (typeof TableFocusType)[keyof typeof TableFocusType];\n\n/**\n * @internal\n * Focusable elements of a table row\n */\nexport interface TableRowFocusableElements {\n    selectionCheckbox?: Checkbox;\n    cells: {\n        cell: TableCell,\n        actionMenuButton?: MenuButton\n    }[];\n}\n\n/**\n * @internal\n * Focusable elements of a table's header\n */\nexport interface TableHeaderFocusableElements {\n    headerActions: HTMLElement[];\n    columnHeaders: HTMLElement[];\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/table/types.ts"],"names":[],"mappings":"AAkGA,MAAM,CAAC,MAAM,gCAAgC,GAAG;IAC5C,IAAI,EAAE,SAAS;IACf,eAAe,EAAE,mBAAmB;IACpC,eAAe,EAAE,kBAAkB;CAC7B,CAAC;AAWX;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG;IACpC,IAAI,EAAE,SAAS;IACf,SAAS,EAAE,WAAW;IACtB,UAAU,EAAE,YAAY;CAClB,CAAC;AAIX;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACjC,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,QAAQ;IAChB,QAAQ,EAAE,UAAU;CACd,CAAC;AAIX;;;;GAIG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG;IAClC,WAAW,EAAE,cAAc;IAC3B,QAAQ,EAAE,UAAU;IACpB,iBAAiB,EAAE,oBAAoB;CACjC,CAAC;AA2EX;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG;IAC1B,IAAI,EAAE,MAAM;IACZ,YAAY,EAAE,cAAc;IAC5B,aAAa,EAAE,eAAe;IAC9B,GAAG,EAAE,KAAK;IACV,oBAAoB,EAAE,sBAAsB;IAC5C,IAAI,EAAE,MAAM;IACZ,cAAc,EAAE,gBAAgB;IAChC,WAAW,EAAE,aAAa;CACpB,CAAC","sourcesContent":["import type { Checkbox } from '../checkbox';\nimport type { MenuButton } from '../menu-button';\nimport type { TableColumn } from '../table-column/base';\nimport type { ValidityObject } from '../utilities/models/validator';\nimport type { TableCell } from './components/cell';\n\n/**\n * TableFieldName describes the type associated with keys within\n * a table's records.\n */\nexport type TableFieldName = string;\n\n/**\n * TableFieldValue describes the type associated with values within\n * a table's records.\n */\nexport type TableFieldValue = string | number | boolean | null | undefined;\n\n/**\n * TableStringFieldValue describes the type associated with values within\n * a table's string records.\n */\nexport type TableStringFieldValue = string | null | undefined;\n\n/**\n * TableBooleanFieldValue describes the type associated with values within\n * a table's boolean records.\n */\nexport type TableBooleanFieldValue = boolean | null | undefined;\n\n/**\n * TableNumberFieldValue describes the type associated with values within\n * a table's number records.\n */\nexport type TableNumberFieldValue = number | null | undefined;\n\n/**\n * TableRecord describes the data structure that backs a single row in a table.\n * It is made up of fields, which are key/value pairs that have a key of type\n * TableFieldName and a value of type TableFieldValue.\n */\nexport interface TableRecord {\n    [key: TableFieldName]: TableFieldValue;\n}\n\n/**\n * @internal\n *\n * Describes a hierarchical data structure that is used for\n * the internal representation of the data, and allows us to represent data with\n * parent-child relationships within Tanstack.\n */\nexport interface TableNode<TRecord extends TableRecord = TableRecord> {\n    subRows?: TableNode<TRecord>[];\n    originalIndex: number;\n    clientRecord: TRecord;\n}\n\nexport type TableStringField<FieldName extends TableFieldName> = {\n    [name in FieldName]: TableStringFieldValue;\n};\n\nexport type TableBooleanField<FieldName extends TableFieldName> = {\n    [name in FieldName]: TableBooleanFieldValue;\n};\n\nexport type TableNumberField<FieldName extends TableFieldName> = {\n    [name in FieldName]: TableNumberFieldValue;\n};\n\nexport interface TableValidity extends ValidityObject {\n    readonly duplicateRecordId: boolean;\n    readonly missingRecordId: boolean;\n    readonly invalidRecordId: boolean;\n    readonly duplicateColumnId: boolean;\n    readonly missingColumnId: boolean;\n    readonly duplicateSortIndex: boolean;\n    readonly duplicateGroupIndex: boolean;\n    readonly idFieldNameNotConfigured: boolean;\n    readonly invalidColumnConfiguration: boolean;\n    readonly invalidParentIdConfiguration: boolean;\n}\n\n/**\n * The hierarachy options for a record in the table.\n */\nexport interface TableSetRecordHierarchyOptions {\n    recordId: string;\n    options: TableRecordHierarchyOptions;\n}\n\n/**\n * Describes the hierarchy options that can be configured for a record in the table.\n */\nexport interface TableRecordHierarchyOptions {\n    delayedHierarchyState: TableRecordDelayedHierarchyState;\n}\n\nexport const TableRecordDelayedHierarchyState = {\n    none: undefined,\n    canLoadChildren: 'can-load-children',\n    loadingChildren: 'loading-children'\n} as const;\nexport type TableRecordDelayedHierarchyState =\n    (typeof TableRecordDelayedHierarchyState)[keyof typeof TableRecordDelayedHierarchyState];\n\nexport interface TableActionMenuToggleEventDetail {\n    newState: boolean;\n    oldState: boolean;\n    recordIds: string[];\n    columnId?: string;\n}\n\n/**\n * The possible directions a table column can be sorted in.\n */\nexport const TableColumnSortDirection = {\n    none: undefined,\n    ascending: 'ascending',\n    descending: 'descending'\n} as const;\nexport type TableColumnSortDirection =\n    (typeof TableColumnSortDirection)[keyof typeof TableColumnSortDirection];\n\n/**\n * The selection modes of rows in the table.\n */\nexport const TableRowSelectionMode = {\n    none: undefined,\n    single: 'single',\n    multiple: 'multiple'\n} as const;\nexport type TableRowSelectionMode =\n    (typeof TableRowSelectionMode)[keyof typeof TableRowSelectionMode];\n\n/**\n * @internal\n *\n * The possible selection states that the table or a table row can be in.\n */\nexport const TableRowSelectionState = {\n    notSelected: 'not-selected',\n    selected: 'selected',\n    partiallySelected: 'partially-selected'\n} as const;\nexport type TableRowSelectionState =\n    (typeof TableRowSelectionState)[keyof typeof TableRowSelectionState];\n\n/**\n * @internal\n *\n * Internal event detail type for a row's selection state changing\n */\nexport interface TableRowSelectionToggleEventDetail {\n    oldState: boolean;\n    newState: boolean;\n}\n\n/**\n * Event detail type for row selection events in the table.\n */\nexport interface TableRowSelectionEventDetail {\n    selectedRecordIds: string[];\n}\n\n/**\n * Event detail type for row toggle events in the table.\n */\nexport interface TableRowExpansionToggleEventDetail {\n    oldState: boolean;\n    newState: boolean;\n    recordId: string;\n}\n\n/**\n * Event detail type for interactive column configuration changes.\n *\n * The column-configuration-change event is emitted when a column's configuration\n * is modified programmatically, such as by clicking on the column's header to sort\n * the column. The items in the `columns` array are specified in the same order as\n * the columns are listed in the DOM.\n */\nexport interface TableColumnConfigurationChangeEventDetail {\n    columns: TableColumnConfiguration[];\n}\n\n/**\n * A representation of the current configuration of a column within the table.\n */\nexport interface TableColumnConfiguration {\n    columnId?: string;\n    sortIndex?: number;\n    sortDirection: TableColumnSortDirection;\n    groupIndex?: number;\n    hidden: boolean;\n    fractionalWidth: number;\n    pixelWidth?: number;\n}\n\n/**\n * @internal\n *\n * Internal representation of a row in the table\n */\nexport interface TableRowState<TData extends TableRecord = TableRecord> {\n    record: TData;\n    id: string;\n    selectionState: TableRowSelectionState;\n    isGroupRow: boolean;\n    groupRowValue?: unknown;\n    isExpanded: boolean;\n    nestingLevel?: number;\n    immediateChildCount?: number;\n    groupColumn?: TableColumn;\n    isParentRow: boolean;\n    isLoadingChildren: boolean;\n    slots: SlotMetadata[];\n    resolvedRowIndex?: number;\n}\n/**\n * Table keyboard focus types\n */\nexport const TableFocusType = {\n    none: 'none',\n    columnHeader: 'columnHeader',\n    headerActions: 'headerActions',\n    row: 'row',\n    rowSelectionCheckbox: 'rowSelectionCheckbox',\n    cell: 'cell',\n    cellActionMenu: 'cellActionMenu',\n    cellContent: 'cellContent'\n} as const;\nexport type TableFocusType =\n    (typeof TableFocusType)[keyof typeof TableFocusType];\n\n/**\n * @internal\n * Focusable elements of a table row\n */\nexport interface TableRowFocusableElements {\n    selectionCheckbox?: Checkbox;\n    cells: {\n        cell: TableCell,\n        actionMenuButton?: MenuButton\n    }[];\n}\n\n/**\n * Focusable elements of a table's header\n */\nexport interface TableHeaderFocusableElements {\n    headerActions: HTMLElement[];\n    columnHeaders: HTMLElement[];\n}\n\n/**\n * @internal\n */\nexport interface CellViewSlotRequestEventDetail {\n    slots: SlotMetadata[];\n}\n\n/**\n * @internal\n */\nexport interface RowSlotRequestEventDetail {\n    columnInternalId: string;\n    recordId: string;\n    slots: SlotMetadata[];\n}\n\n/**\n * @internal\n */\nexport interface SlotMetadata {\n    slot: string;\n    name: string;\n}\n"]}

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

@@ -1,5 +1,6 @@
-import { html } from '@microsoft/fast-element';
+import { html, repeat } from '@microsoft/fast-element';
 import { TableCellView } from '.';
+import { uniquifySlotNameForColumn } from '../../../table/models/utilities';
 const validateCellViewTemplate = (cellViewTag) => {
     let instance;
     try {
@@ -12,6 +13,7 @@ const validateCellViewTemplate = (cellViewTag) => {
         throw new Error(`Cell view tag name (${cellViewTag}) must evaluate to an element extending TableCellView`);
     }
 };
+// prettier-ignore
 export const createCellViewTemplate = (cellViewTag) => {
     validateCellViewTemplate(cellViewTag);
     return html `
@@ -22,6 +24,12 @@ export const createCellViewTemplate = (cellViewTag) => {
             :recordId="${y => y.recordId}"
             class="cell-view"
         >
+            ${repeat(y => y.column?.columnInternals.slotNames || [], html `
+                <slot
+                    name="${(x, c) => uniquifySlotNameForColumn(c.parent.column, x)}"
+                    slot="${x => x}"
+                ></slot>
+            `)}
         </${cellViewTag}>
     `;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/table-column/base/cell-view/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAElE,OAAO,EAAE,aAAa,EAAE,MAAM,GAAG,CAAC;AAElC,MAAM,wBAAwB,GAAG,CAAC,WAAmB,EAAQ,EAAE;IAC3D,IAAI,QAAQ,CAAC;IACb,IAAI;QACA,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;KAClD;IAAC,OAAO,EAAE,EAAE;QACT,oDAAoD;KACvD;IACD,IAAI,CAAC,CAAC,QAAQ,YAAY,aAAa,CAAC,EAAE;QACtC,MAAM,IAAI,KAAK,CACX,uBAAuB,WAAW,uDAAuD,CAC5F,CAAC;KACL;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAClC,WAAmB,EACI,EAAE;IACzB,wBAAwB,CAAC,WAAW,CAAC,CAAC;IACtC,OAAO,IAAI,CAAW;WACf,WAAW;2BACK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,UAAU;6BAC1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,YAAY;uBACpC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM;yBACX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;;;YAG5B,WAAW;KAClB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { type ViewTemplate, html } from '@microsoft/fast-element';\nimport type { TableCell } from '../../../table/components/cell';\nimport { TableCellView } from '.';\n\nconst validateCellViewTemplate = (cellViewTag: string): void => {\n    let instance;\n    try {\n        instance = document.createElement(cellViewTag);\n    } catch (ex) {\n        // Swallow construction error to report a better one\n    }\n    if (!(instance instanceof TableCellView)) {\n        throw new Error(\n            `Cell view tag name (${cellViewTag}) must evaluate to an element extending TableCellView`\n        );\n    }\n};\n\nexport const createCellViewTemplate = (\n    cellViewTag: string\n): ViewTemplate<TableCell> => {\n    validateCellViewTemplate(cellViewTag);\n    return html<TableCell>`\n        <${cellViewTag}\n            :cellRecord=\"${y => y.cellState?.cellRecord}\"\n            :columnConfig=\"${y => y.cellState?.columnConfig}\"\n            :column=\"${y => y.column}\"\n            :recordId=\"${y => y.recordId}\"\n            class=\"cell-view\"\n        >\n        </${cellViewTag}>\n    `;\n};\n"]}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/table-column/base/cell-view/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,IAAI,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAE1E,OAAO,EAAE,aAAa,EAAE,MAAM,GAAG,CAAC;AAClC,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AAE5E,MAAM,wBAAwB,GAAG,CAAC,WAAmB,EAAQ,EAAE;IAC3D,IAAI,QAAQ,CAAC;IACb,IAAI;QACA,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;KAClD;IAAC,OAAO,EAAE,EAAE;QACT,oDAAoD;KACvD;IACD,IAAI,CAAC,CAAC,QAAQ,YAAY,aAAa,CAAC,EAAE;QACtC,MAAM,IAAI,KAAK,CACX,uBAAuB,WAAW,uDAAuD,CAC5F,CAAC;KACL;AACL,CAAC,CAAC;AAEF,kBAAkB;AAClB,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAClC,WAAmB,EACI,EAAE;IACzB,wBAAwB,CAAC,WAAW,CAAC,CAAC;IACtC,OAAO,IAAI,CAAW;WACf,WAAW;2BACK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,UAAU;6BAC1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,YAAY;uBACpC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM;yBACX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;;;cAG1B,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,EAAE,eAAe,CAAC,SAAS,IAAI,EAAE,EAAE,IAAI,CAAmB;;4BAEhE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,yBAAyB,CAAC,CAAC,CAAC,MAAM,CAAC,MAAO,EAAE,CAAC,CAAC;4BACxD,CAAC,CAAC,EAAE,CAAC,CAAC;;aAErB,CAAC;YACF,WAAW;KAClB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { type ViewTemplate, html, repeat } from '@microsoft/fast-element';\nimport type { TableCell } from '../../../table/components/cell';\nimport { TableCellView } from '.';\nimport { uniquifySlotNameForColumn } from '../../../table/models/utilities';\n\nconst validateCellViewTemplate = (cellViewTag: string): void => {\n    let instance;\n    try {\n        instance = document.createElement(cellViewTag);\n    } catch (ex) {\n        // Swallow construction error to report a better one\n    }\n    if (!(instance instanceof TableCellView)) {\n        throw new Error(\n            `Cell view tag name (${cellViewTag}) must evaluate to an element extending TableCellView`\n        );\n    }\n};\n\n// prettier-ignore\nexport const createCellViewTemplate = (\n    cellViewTag: string\n): ViewTemplate<TableCell> => {\n    validateCellViewTemplate(cellViewTag);\n    return html<TableCell>`\n        <${cellViewTag}\n            :cellRecord=\"${y => y.cellState?.cellRecord}\"\n            :columnConfig=\"${y => y.cellState?.columnConfig}\"\n            :column=\"${y => y.column}\"\n            :recordId=\"${y => y.recordId}\"\n            class=\"cell-view\"\n        >\n            ${repeat(y => y.column?.columnInternals.slotNames || [], html<string, TableCell>`\n                <slot\n                    name=\"${(x, c) => uniquifySlotNameForColumn(c.parent.column!, x)}\"\n                    slot=\"${x => x}\"\n                ></slot>\n            `)}\n        </${cellViewTag}>\n    `;\n};\n"]}

package/dist/esm/table-column/base/models/column-internals.d.ts

@@ -19,11 +19,15 @@ export interface ColumnInternalsOptions<TColumnValidator extends ColumnValidator
      * The tag to use to render the group header content for a column.
      * The element this tag refers to must derive from TableGroupHeaderView.
      */
-    readonly groupHeaderViewTag: string;
+    readonly groupHeaderViewTag?: string;
     /**
      * The names of events that should be delegated from the cell view to the column.
      */
     readonly delegatedEvents: readonly string[];
+    /**
+     * The names of slots that need to be forwarded into a cell.
+     */
+    readonly slotNames?: readonly string[];
     /**
      * The sort operation to use for the column (defaults to TableColumnSortOperation.basic)
      */
@@ -54,6 +58,10 @@ export declare class ColumnInternals<TColumnConfig, TColumnValidator extends Col
      * The names of events that should be delegated from the cell view to the column.
      */
     readonly delegatedEvents: readonly string[];
+    /**
+     * The names of slots that need to be forwarded into a cell.
+     */
+    readonly slotNames: readonly string[];
     /**
      * The relevant, static configuration a column requires its cell view to have access to.
      */
@@ -74,7 +82,7 @@ export declare class ColumnInternals<TColumnConfig, TColumnValidator extends Col
     /**
      * Template for the group header view
      */
-    readonly groupHeaderViewTemplate: ViewTemplate<TableGroupRow>;
+    readonly groupHeaderViewTemplate?: ViewTemplate<TableGroupRow>;
     /**
      * Whether or not this column can be used to group rows by
      */

package/dist/esm/table-column/base/models/column-internals.js

@@ -27,7 +27,7 @@ export class ColumnInternals {
         /**
          * Whether or not this column can be used to group rows by
          */
-        this.groupingDisabled = false;
+        this.groupingDisabled = true;
         /**
          * Used by column plugins to size a column proportionally to the available
          * width of a row. Sets currentFractionalWidth when changed.
@@ -54,7 +54,7 @@ export class ColumnInternals {
         /**
          * Whether or not this column can be sorted
          */
-        this.sortingDisabled = false;
+        this.sortingDisabled = true;
         /**
          * @internal Do not write to this value directly. It is used by the Table in order to store
          * the resolved value of the sortDirection after programmatic or interactive updates.
@@ -62,8 +62,11 @@ export class ColumnInternals {
         this.currentSortDirection = TableColumnSortDirection.none;
         this.cellRecordFieldNames = options.cellRecordFieldNames;
         this.cellViewTemplate = createCellViewTemplate(options.cellViewTag);
-        this.groupHeaderViewTemplate = createGroupHeaderViewTemplate(options.groupHeaderViewTag);
+        if (options.groupHeaderViewTag) {
+            this.groupHeaderViewTemplate = createGroupHeaderViewTemplate(options.groupHeaderViewTag);
+        }
         this.delegatedEvents = options.delegatedEvents;
+        this.slotNames = options.slotNames ?? [];
         this.sortOperation = options.sortOperation ?? TableColumnSortOperation.basic;
         this.validator = options.validator;
     }

package/dist/esm/table-column/base/models/column-internals.js.map

@@ -1 +1 @@
-{"version":3,"file":"column-internals.js","sourceRoot":"","sources":["../../../../../src/table-column/base/models/column-internals.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAgB,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,EAAE,wBAAwB,EAAkB,MAAM,sBAAsB,CAAC;AAEhF,OAAO,EACH,wBAAwB,EACxB,sBAAsB,EACtB,oBAAoB,EACvB,MAAM,UAAU,CAAC;AAElB,OAAO,EAAE,6BAA6B,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAwC/D;;;GAGG;AACH,MAAM,OAAO,eAAe;IAwIxB,YAAmB,OAAiD;QA/HpE;;WAEG;QACa,aAAQ,GAAG,QAAQ,CAAC,mBAAmB,CAAC,CAAC;QAwBzD;;WAEG;QAEI,kBAAa,GAA6B,wBAAwB,CAAC,KAAK,CAAC;QAEhF;;;WAGG;QAEI,yBAAoB,GAA4C,EAAE,CAAC;QAO1E;;WAEG;QAEI,qBAAgB,GAAG,KAAK,CAAC;QAgBhC;;;WAGG;QAEI,oBAAe,GAAG,sBAAsB,CAAC;QAEhD;;WAEG;QAEI,kBAAa,GAAG,oBAAoB,CAAC;QAE5C;;WAEG;QAEI,qBAAgB,GAAG,KAAK,CAAC;QAEhC;;;WAGG;QAEI,yBAAoB,GAAG,KAAK,CAAC;QAEpC;;;WAGG;QAEI,2BAAsB,GAAG,sBAAsB,CAAC;QASvD;;WAEG;QAEI,oBAAe,GAAG,KAAK,CAAC;QAS/B;;;WAGG;QAEI,yBAAoB,GAA6B,wBAAwB,CAAC,IAAI,CAAC;QAKlF,IAAI,CAAC,oBAAoB,GAAG,OAAO,CAAC,oBAAoB,CAAC;QACzD,IAAI,CAAC,gBAAgB,GAAG,sBAAsB,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;QACpE,IAAI,CAAC,uBAAuB,GAAG,6BAA6B,CACxD,OAAO,CAAC,kBAAkB,CAC7B,CAAC;QACF,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC,eAAe,CAAC;QAC/C,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC,aAAa,IAAI,wBAAwB,CAAC,KAAK,CAAC;QAC7E,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,SAAS,CAAC;IACvC,CAAC;IAES,sBAAsB;QAC5B,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,eAAe,CAAC;IACvD,CAAC;IAES,iBAAiB;QACvB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,UAAU,CAAC;IAC7C,CAAC;CACJ;AA9HU;IADN,UAAU;qDACyB;AAM7B;IADN,UAAU;mEACwC;AAM5C;IADN,UAAU;sDACqE;AAOzE;IADN,UAAU;6DAC+D;AAWnE;IADN,UAAU;yDACqB;AAQzB;IADN,UAAU;mDACgB;AAMpB;IADN,UAAU;mDACgB;AAOpB;IADN,UAAU;wDACqC;AAMzC;IADN,UAAU;sDACiC;AAMrC;IADN,UAAU;yDACqB;AAOzB;IADN,UAAU;6DACyB;AAO7B;IADN,UAAU;+DAC4C;AAOhD;IADN,UAAU;0DACuB;AAM3B;IADN,UAAU;wDACoB;AAOxB;IADN,UAAU;yDACsB;AAO1B;IADN,UAAU;6DAC2E;AAwB1F,MAAM,UAAU,yBAAyB,CACrC,eAAuB,EACvB,GAAG,IAA6D;IAEhE,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE;QACpB,IAAI,eAAe,KAAK,GAAG,EAAE;YACzB,OAAO,IAAI,CAAC;SACf;KACJ;IACD,OAAO,KAAK,CAAC;AACjB,CAAC","sourcesContent":["import { uniqueId } from '@microsoft/fast-web-utilities';\nimport { ViewTemplate, observable } from '@microsoft/fast-element';\nimport { TableColumnSortDirection, TableFieldName } from '../../../table/types';\nimport type { TableCell } from '../../../table/components/cell';\nimport {\n    TableColumnSortOperation,\n    defaultFractionalWidth,\n    defaultMinPixelWidth\n} from '../types';\nimport type { TableGroupRow } from '../../../table/components/group-row';\nimport { createGroupHeaderViewTemplate } from '../group-header-view/template';\nimport { createCellViewTemplate } from '../cell-view/template';\nimport type { ColumnValidator } from './column-validator';\n\nexport interface ColumnInternalsOptions<\n    TColumnValidator extends ColumnValidator<[]> = ColumnValidator<[]>\n> {\n    /**\n     * The tag (element name) of the custom element that renders the cell content for the column.\n     * That element should derive from TableCellView<TCellRecord, TColumnConfig>.\n     */\n    readonly cellViewTag: string;\n\n    /**\n     * The names of the fields that should be present in TCellRecord.\n     * This array is parallel with the field names specified by `dataRecordFieldNames`.\n     */\n    readonly cellRecordFieldNames: readonly TableFieldName[];\n\n    /**\n     * The tag to use to render the group header content for a column.\n     * The element this tag refers to must derive from TableGroupHeaderView.\n     */\n    readonly groupHeaderViewTag: string;\n\n    /**\n     * The names of events that should be delegated from the cell view to the column.\n     */\n    readonly delegatedEvents: readonly string[];\n\n    /**\n     * The sort operation to use for the column (defaults to TableColumnSortOperation.basic)\n     */\n    readonly sortOperation?: TableColumnSortOperation;\n\n    /**\n     * The validator for the column\n     */\n    readonly validator: TColumnValidator;\n}\n\n/**\n * Internal column state configured by plugin authors\n * @internal\n */\nexport class ColumnInternals<\n    TColumnConfig,\n    TColumnValidator extends ColumnValidator<[]>\n> {\n    /**\n     * @see ColumnInternalsOptions.cellRecordFieldNames\n     */\n    public readonly cellRecordFieldNames: readonly TableFieldName[];\n\n    /**\n     * A unique id used internally in the table to identify specific column instances\n     */\n    public readonly uniqueId = uniqueId('table-column-slot');\n\n    /**\n     * Template for the cell view\n     */\n    public readonly cellViewTemplate: ViewTemplate<TableCell>;\n\n    /**\n     * The names of events that should be delegated from the cell view to the column.\n     */\n    public readonly delegatedEvents: readonly string[];\n\n    /**\n     * The relevant, static configuration a column requires its cell view to have access to.\n     */\n    @observable\n    public columnConfig?: TColumnConfig;\n\n    /**\n     * The name of the data field that will be used for operations on the table, such as sorting and grouping.\n     */\n    @observable\n    public operandDataRecordFieldName?: TableFieldName;\n\n    /**\n     * The operation to use when sorting the table by this column.\n     */\n    @observable\n    public sortOperation: TableColumnSortOperation = TableColumnSortOperation.basic;\n\n    /**\n     * The names of the fields from the row's record that correlate to the data that will be in TCellRecord.\n     * This array is parallel with the field names specified by `cellRecordFieldNames`.\n     */\n    @observable\n    public dataRecordFieldNames: readonly (TableFieldName | undefined)[] = [];\n\n    /**\n     * Template for the group header view\n     */\n    public readonly groupHeaderViewTemplate: ViewTemplate<TableGroupRow>;\n\n    /**\n     * Whether or not this column can be used to group rows by\n     */\n    @observable\n    public groupingDisabled = false;\n\n    /**\n     * Specifies the grouping precedence of the column within the set of all columns participating in grouping.\n     * Columns are rendered in the grouping tree from lowest group-index as the tree root to highest\n     * group-index as tree leaves.\n     */\n    @observable\n    public groupIndex?: number;\n\n    /**\n     * Used by column plugins to set a specific pixel width. Sets currentPixelWidth when changed.\n     */\n    @observable\n    public pixelWidth?: number;\n\n    /**\n     * Used by column plugins to size a column proportionally to the available\n     * width of a row. Sets currentFractionalWidth when changed.\n     */\n    @observable\n    public fractionalWidth = defaultFractionalWidth;\n\n    /**\n     * The minimum size in pixels according to the design doc\n     */\n    @observable\n    public minPixelWidth = defaultMinPixelWidth;\n\n    /**\n     * Whether or not resizing the column has been disabled.\n     */\n    @observable\n    public resizingDisabled = false;\n\n    /**\n     * Whether or not the grouping and sorting indicators should be hidden in the column header\n     * when the column is grouped or sorted.\n     */\n    @observable\n    public hideHeaderIndicators = false;\n\n    /**\n     * @internal Do not write to this value directly. It is used by the Table in order to store\n     * the resolved value of the fractionalWidth after updates programmatic or interactive updates.\n     */\n    @observable\n    public currentFractionalWidth = defaultFractionalWidth;\n\n    /**\n     * @internal Do not write to this value directly. It is used by the Table in order to store\n     * the resolved value of the pixelWidth after programmatic or interactive updates.\n     */\n    @observable\n    public currentPixelWidth?: number;\n\n    /**\n     * Whether or not this column can be sorted\n     */\n    @observable\n    public sortingDisabled = false;\n\n    /**\n     * @internal Do not write to this value directly. It is used by the Table in order to store\n     * the resolved value of the sortIndex after programmatic or interactive updates.\n     */\n    @observable\n    public currentSortIndex?: number;\n\n    /**\n     * @internal Do not write to this value directly. It is used by the Table in order to store\n     * the resolved value of the sortDirection after programmatic or interactive updates.\n     */\n    @observable\n    public currentSortDirection: TableColumnSortDirection = TableColumnSortDirection.none;\n\n    public readonly validator: TColumnValidator;\n\n    public constructor(options: ColumnInternalsOptions<TColumnValidator>) {\n        this.cellRecordFieldNames = options.cellRecordFieldNames;\n        this.cellViewTemplate = createCellViewTemplate(options.cellViewTag);\n        this.groupHeaderViewTemplate = createGroupHeaderViewTemplate(\n            options.groupHeaderViewTag\n        );\n        this.delegatedEvents = options.delegatedEvents;\n        this.sortOperation = options.sortOperation ?? TableColumnSortOperation.basic;\n        this.validator = options.validator;\n    }\n\n    protected fractionalWidthChanged(): void {\n        this.currentFractionalWidth = this.fractionalWidth;\n    }\n\n    protected pixelWidthChanged(): void {\n        this.currentPixelWidth = this.pixelWidth;\n    }\n}\n\nexport function isColumnInternalsProperty(\n    changedProperty: string,\n    ...args: (keyof ColumnInternals<unknown, ColumnValidator<[]>>)[]\n): boolean {\n    for (const arg of args) {\n        if (changedProperty === arg) {\n            return true;\n        }\n    }\n    return false;\n}\n"]}
+{"version":3,"file":"column-internals.js","sourceRoot":"","sources":["../../../../../src/table-column/base/models/column-internals.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAgB,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,EAAE,wBAAwB,EAAkB,MAAM,sBAAsB,CAAC;AAEhF,OAAO,EACH,wBAAwB,EACxB,sBAAsB,EACtB,oBAAoB,EACvB,MAAM,UAAU,CAAC;AAElB,OAAO,EAAE,6BAA6B,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AA6C/D;;;GAGG;AACH,MAAM,OAAO,eAAe;IA6IxB,YAAmB,OAAiD;QApIpE;;WAEG;QACa,aAAQ,GAAG,QAAQ,CAAC,mBAAmB,CAAC,CAAC;QA6BzD;;WAEG;QAEI,kBAAa,GAA6B,wBAAwB,CAAC,KAAK,CAAC;QAEhF;;;WAGG;QAEI,yBAAoB,GAA4C,EAAE,CAAC;QAO1E;;WAEG;QAEI,qBAAgB,GAAG,IAAI,CAAC;QAgB/B;;;WAGG;QAEI,oBAAe,GAAG,sBAAsB,CAAC;QAEhD;;WAEG;QAEI,kBAAa,GAAG,oBAAoB,CAAC;QAE5C;;WAEG;QAEI,qBAAgB,GAAG,KAAK,CAAC;QAEhC;;;WAGG;QAEI,yBAAoB,GAAG,KAAK,CAAC;QAEpC;;;WAGG;QAEI,2BAAsB,GAAG,sBAAsB,CAAC;QASvD;;WAEG;QAEI,oBAAe,GAAG,IAAI,CAAC;QAS9B;;;WAGG;QAEI,yBAAoB,GAA6B,wBAAwB,CAAC,IAAI,CAAC;QAKlF,IAAI,CAAC,oBAAoB,GAAG,OAAO,CAAC,oBAAoB,CAAC;QACzD,IAAI,CAAC,gBAAgB,GAAG,sBAAsB,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;QACpE,IAAI,OAAO,CAAC,kBAAkB,EAAE;YAC5B,IAAI,CAAC,uBAAuB,GAAG,6BAA6B,CACxD,OAAO,CAAC,kBAAkB,CAC7B,CAAC;SACL;QACD,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC,eAAe,CAAC;QAC/C,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,SAAS,IAAI,EAAE,CAAC;QACzC,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC,aAAa,IAAI,wBAAwB,CAAC,KAAK,CAAC;QAC7E,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,SAAS,CAAC;IACvC,CAAC;IAES,sBAAsB;QAC5B,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,eAAe,CAAC;IACvD,CAAC;IAES,iBAAiB;QACvB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,UAAU,CAAC;IAC7C,CAAC;CACJ;AAjIU;IADN,UAAU;qDACyB;AAM7B;IADN,UAAU;mEACwC;AAM5C;IADN,UAAU;sDACqE;AAOzE;IADN,UAAU;6DAC+D;AAWnE;IADN,UAAU;yDACoB;AAQxB;IADN,UAAU;mDACgB;AAMpB;IADN,UAAU;mDACgB;AAOpB;IADN,UAAU;wDACqC;AAMzC;IADN,UAAU;sDACiC;AAMrC;IADN,UAAU;yDACqB;AAOzB;IADN,UAAU;6DACyB;AAO7B;IADN,UAAU;+DAC4C;AAOhD;IADN,UAAU;0DACuB;AAM3B;IADN,UAAU;wDACmB;AAOvB;IADN,UAAU;yDACsB;AAO1B;IADN,UAAU;6DAC2E;AA2B1F,MAAM,UAAU,yBAAyB,CACrC,eAAuB,EACvB,GAAG,IAA6D;IAEhE,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE;QACpB,IAAI,eAAe,KAAK,GAAG,EAAE;YACzB,OAAO,IAAI,CAAC;SACf;KACJ;IACD,OAAO,KAAK,CAAC;AACjB,CAAC","sourcesContent":["import { uniqueId } from '@microsoft/fast-web-utilities';\nimport { ViewTemplate, observable } from '@microsoft/fast-element';\nimport { TableColumnSortDirection, TableFieldName } from '../../../table/types';\nimport type { TableCell } from '../../../table/components/cell';\nimport {\n    TableColumnSortOperation,\n    defaultFractionalWidth,\n    defaultMinPixelWidth\n} from '../types';\nimport type { TableGroupRow } from '../../../table/components/group-row';\nimport { createGroupHeaderViewTemplate } from '../group-header-view/template';\nimport { createCellViewTemplate } from '../cell-view/template';\nimport type { ColumnValidator } from './column-validator';\n\nexport interface ColumnInternalsOptions<\n    TColumnValidator extends ColumnValidator<[]> = ColumnValidator<[]>\n> {\n    /**\n     * The tag (element name) of the custom element that renders the cell content for the column.\n     * That element should derive from TableCellView<TCellRecord, TColumnConfig>.\n     */\n    readonly cellViewTag: string;\n\n    /**\n     * The names of the fields that should be present in TCellRecord.\n     * This array is parallel with the field names specified by `dataRecordFieldNames`.\n     */\n    readonly cellRecordFieldNames: readonly TableFieldName[];\n\n    /**\n     * The tag to use to render the group header content for a column.\n     * The element this tag refers to must derive from TableGroupHeaderView.\n     */\n    readonly groupHeaderViewTag?: string;\n\n    /**\n     * The names of events that should be delegated from the cell view to the column.\n     */\n    readonly delegatedEvents: readonly string[];\n\n    /**\n     * The names of slots that need to be forwarded into a cell.\n     */\n    readonly slotNames?: readonly string[];\n\n    /**\n     * The sort operation to use for the column (defaults to TableColumnSortOperation.basic)\n     */\n    readonly sortOperation?: TableColumnSortOperation;\n\n    /**\n     * The validator for the column\n     */\n    readonly validator: TColumnValidator;\n}\n\n/**\n * Internal column state configured by plugin authors\n * @internal\n */\nexport class ColumnInternals<\n    TColumnConfig,\n    TColumnValidator extends ColumnValidator<[]>\n> {\n    /**\n     * @see ColumnInternalsOptions.cellRecordFieldNames\n     */\n    public readonly cellRecordFieldNames: readonly TableFieldName[];\n\n    /**\n     * A unique id used internally in the table to identify specific column instances\n     */\n    public readonly uniqueId = uniqueId('table-column-slot');\n\n    /**\n     * Template for the cell view\n     */\n    public readonly cellViewTemplate: ViewTemplate<TableCell>;\n\n    /**\n     * The names of events that should be delegated from the cell view to the column.\n     */\n    public readonly delegatedEvents: readonly string[];\n\n    /**\n     * The names of slots that need to be forwarded into a cell.\n     */\n    public readonly slotNames: readonly string[];\n\n    /**\n     * The relevant, static configuration a column requires its cell view to have access to.\n     */\n    @observable\n    public columnConfig?: TColumnConfig;\n\n    /**\n     * The name of the data field that will be used for operations on the table, such as sorting and grouping.\n     */\n    @observable\n    public operandDataRecordFieldName?: TableFieldName;\n\n    /**\n     * The operation to use when sorting the table by this column.\n     */\n    @observable\n    public sortOperation: TableColumnSortOperation = TableColumnSortOperation.basic;\n\n    /**\n     * The names of the fields from the row's record that correlate to the data that will be in TCellRecord.\n     * This array is parallel with the field names specified by `cellRecordFieldNames`.\n     */\n    @observable\n    public dataRecordFieldNames: readonly (TableFieldName | undefined)[] = [];\n\n    /**\n     * Template for the group header view\n     */\n    public readonly groupHeaderViewTemplate?: ViewTemplate<TableGroupRow>;\n\n    /**\n     * Whether or not this column can be used to group rows by\n     */\n    @observable\n    public groupingDisabled = true;\n\n    /**\n     * Specifies the grouping precedence of the column within the set of all columns participating in grouping.\n     * Columns are rendered in the grouping tree from lowest group-index as the tree root to highest\n     * group-index as tree leaves.\n     */\n    @observable\n    public groupIndex?: number;\n\n    /**\n     * Used by column plugins to set a specific pixel width. Sets currentPixelWidth when changed.\n     */\n    @observable\n    public pixelWidth?: number;\n\n    /**\n     * Used by column plugins to size a column proportionally to the available\n     * width of a row. Sets currentFractionalWidth when changed.\n     */\n    @observable\n    public fractionalWidth = defaultFractionalWidth;\n\n    /**\n     * The minimum size in pixels according to the design doc\n     */\n    @observable\n    public minPixelWidth = defaultMinPixelWidth;\n\n    /**\n     * Whether or not resizing the column has been disabled.\n     */\n    @observable\n    public resizingDisabled = false;\n\n    /**\n     * Whether or not the grouping and sorting indicators should be hidden in the column header\n     * when the column is grouped or sorted.\n     */\n    @observable\n    public hideHeaderIndicators = false;\n\n    /**\n     * @internal Do not write to this value directly. It is used by the Table in order to store\n     * the resolved value of the fractionalWidth after updates programmatic or interactive updates.\n     */\n    @observable\n    public currentFractionalWidth = defaultFractionalWidth;\n\n    /**\n     * @internal Do not write to this value directly. It is used by the Table in order to store\n     * the resolved value of the pixelWidth after programmatic or interactive updates.\n     */\n    @observable\n    public currentPixelWidth?: number;\n\n    /**\n     * Whether or not this column can be sorted\n     */\n    @observable\n    public sortingDisabled = true;\n\n    /**\n     * @internal Do not write to this value directly. It is used by the Table in order to store\n     * the resolved value of the sortIndex after programmatic or interactive updates.\n     */\n    @observable\n    public currentSortIndex?: number;\n\n    /**\n     * @internal Do not write to this value directly. It is used by the Table in order to store\n     * the resolved value of the sortDirection after programmatic or interactive updates.\n     */\n    @observable\n    public currentSortDirection: TableColumnSortDirection = TableColumnSortDirection.none;\n\n    public readonly validator: TColumnValidator;\n\n    public constructor(options: ColumnInternalsOptions<TColumnValidator>) {\n        this.cellRecordFieldNames = options.cellRecordFieldNames;\n        this.cellViewTemplate = createCellViewTemplate(options.cellViewTag);\n        if (options.groupHeaderViewTag) {\n            this.groupHeaderViewTemplate = createGroupHeaderViewTemplate(\n                options.groupHeaderViewTag\n            );\n        }\n        this.delegatedEvents = options.delegatedEvents;\n        this.slotNames = options.slotNames ?? [];\n        this.sortOperation = options.sortOperation ?? TableColumnSortOperation.basic;\n        this.validator = options.validator;\n    }\n\n    protected fractionalWidthChanged(): void {\n        this.currentFractionalWidth = this.fractionalWidth;\n    }\n\n    protected pixelWidthChanged(): void {\n        this.currentPixelWidth = this.pixelWidth;\n    }\n}\n\nexport function isColumnInternalsProperty(\n    changedProperty: string,\n    ...args: (keyof ColumnInternals<unknown, ColumnValidator<[]>>)[]\n): boolean {\n    for (const arg of args) {\n        if (changedProperty === arg) {\n            return true;\n        }\n    }\n    return false;\n}\n"]}

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

@@ -0,0 +1,32 @@
+import { TableCellView } from '../../base/cell-view';
+import type { TableColumnMenuButtonCellRecord, TableColumnMenuButtonColumnConfig } from '..';
+import type { MenuButton } from '../../../menu-button';
+import type { MenuButtonToggleEventDetail } from '../../../menu-button/types';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-table-column-menu-button-cell-view': TableColumnMenuButtonCellView;
+    }
+}
+/**
+ * The cell view base class for displaying a string field as a menu button.
+ */
+export declare class TableColumnMenuButtonCellView extends TableCellView<TableColumnMenuButtonCellRecord, TableColumnMenuButtonColumnConfig> {
+    /** @internal */
+    menuButton?: MenuButton;
+    /** @internal */
+    valueSpan?: HTMLSpanElement;
+    /** @internal */
+    hasOverflow: boolean;
+    /** @internal */
+    get showMenuButton(): boolean;
+    get tabbableChildren(): HTMLElement[];
+    /** @internal */
+    onMenuButtonBeforeToggle(event: CustomEvent<MenuButtonToggleEventDetail>): boolean;
+    /** @internal */
+    onMenuButtonMouseOver(): void;
+    /** @internal */
+    onMenuButtonMouseOut(): void;
+    /** @internal */
+    onMenuButtonClick(e: Event): void;
+}
+export declare const tableColumnMenuButtonCellViewTag = "nimble-table-column-menu-button-cell-view";

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

@@ -0,0 +1,70 @@
+import { __decorate } from "tslib";
+import { DesignSystem } from '@microsoft/fast-foundation';
+import { observable, volatile } from '@microsoft/fast-element';
+import { TableCellView } from '../../base/cell-view';
+import { template } from './templates';
+import { styles } from './styles';
+import { cellViewMenuSlotName } from '../types';
+/**
+ * The cell view base class for displaying a string field as a menu button.
+ */
+export class TableColumnMenuButtonCellView extends TableCellView {
+    constructor() {
+        super(...arguments);
+        /** @internal */
+        this.hasOverflow = false;
+    }
+    /** @internal */
+    get showMenuButton() {
+        return !!this.cellRecord?.value;
+    }
+    get tabbableChildren() {
+        if (this.showMenuButton) {
+            return [this.menuButton];
+        }
+        return [];
+    }
+    /** @internal */
+    onMenuButtonBeforeToggle(event) {
+        const configuredSlotName = this.columnConfig?.menuSlot;
+        if (configuredSlotName && event.detail.newState) {
+            const eventDetail = {
+                slots: [
+                    { name: configuredSlotName, slot: cellViewMenuSlotName }
+                ]
+            };
+            this.$emit('cell-view-slots-request', eventDetail);
+        }
+        return true;
+    }
+    /** @internal */
+    onMenuButtonMouseOver() {
+        if (this.valueSpan) {
+            this.hasOverflow = this.valueSpan.offsetWidth < this.valueSpan.scrollWidth;
+        }
+    }
+    /** @internal */
+    onMenuButtonMouseOut() {
+        this.hasOverflow = false;
+    }
+    /** @internal */
+    onMenuButtonClick(e) {
+        // Stop propagation of the click event to prevent clicking the menu button
+        // from affecting row selection.
+        e.stopPropagation();
+    }
+}
+__decorate([
+    observable
+], TableColumnMenuButtonCellView.prototype, "hasOverflow", void 0);
+__decorate([
+    volatile
+], TableColumnMenuButtonCellView.prototype, "showMenuButton", null);
+const menuButtonCellView = TableColumnMenuButtonCellView.compose({
+    baseName: 'table-column-menu-button-cell-view',
+    template,
+    styles
+});
+DesignSystem.getOrCreate().withPrefix('nimble').register(menuButtonCellView());
+export const tableColumnMenuButtonCellViewTag = 'nimble-table-column-menu-button-cell-view';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table-column/menu-button/cell-view/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAKrD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAIlC,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAQhD;;GAEG;AACH,MAAM,OAAO,6BAA8B,SAAQ,aAGlD;IAHD;;QAUI,gBAAgB;QAET,gBAAW,GAAG,KAAK,CAAC;IAiD/B,CAAC;IA/CG,gBAAgB;IAEhB,IAAW,cAAc;QACrB,OAAO,CAAC,CAAC,IAAI,CAAC,UAAU,EAAE,KAAK,CAAC;IACpC,CAAC;IAED,IAAoB,gBAAgB;QAChC,IAAI,IAAI,CAAC,cAAc,EAAE;YACrB,OAAO,CAAC,IAAI,CAAC,UAAW,CAAC,CAAC;SAC7B;QACD,OAAO,EAAE,CAAC;IACd,CAAC;IAED,gBAAgB;IACT,wBAAwB,CAC3B,KAA+C;QAE/C,MAAM,kBAAkB,GAAG,IAAI,CAAC,YAAY,EAAE,QAAQ,CAAC;QACvD,IAAI,kBAAkB,IAAI,KAAK,CAAC,MAAM,CAAC,QAAQ,EAAE;YAC7C,MAAM,WAAW,GAAmC;gBAChD,KAAK,EAAE;oBACH,EAAE,IAAI,EAAE,kBAAkB,EAAE,IAAI,EAAE,oBAAoB,EAAE;iBAC3D;aACJ,CAAC;YACF,IAAI,CAAC,KAAK,CAAC,yBAAyB,EAAE,WAAW,CAAC,CAAC;SACtD;QACD,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,gBAAgB;IACT,qBAAqB;QACxB,IAAI,IAAI,CAAC,SAAS,EAAE;YAChB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC;SAC9E;IACL,CAAC;IAED,gBAAgB;IACT,oBAAoB;QACvB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;IAC7B,CAAC;IAED,gBAAgB;IACT,iBAAiB,CAAC,CAAQ;QAC7B,0EAA0E;QAC1E,gCAAgC;QAChC,CAAC,CAAC,eAAe,EAAE,CAAC;IACxB,CAAC;CACJ;AAjDU;IADN,UAAU;kEACgB;AAI3B;IADC,QAAQ;mEAGR;AA6CL,MAAM,kBAAkB,GAAG,6BAA6B,CAAC,OAAO,CAAC;IAC7D,QAAQ,EAAE,oCAAoC;IAC9C,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AACH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,kBAAkB,EAAE,CAAC,CAAC;AAC/E,MAAM,CAAC,MAAM,gCAAgC,GAAG,2CAA2C,CAAC","sourcesContent":["import { DesignSystem } from '@microsoft/fast-foundation';\nimport { observable, volatile } from '@microsoft/fast-element';\nimport { TableCellView } from '../../base/cell-view';\nimport type {\n    TableColumnMenuButtonCellRecord,\n    TableColumnMenuButtonColumnConfig\n} from '..';\nimport { template } from './templates';\nimport { styles } from './styles';\nimport type { MenuButton } from '../../../menu-button';\nimport type { MenuButtonToggleEventDetail } from '../../../menu-button/types';\nimport type { CellViewSlotRequestEventDetail } from '../../../table/types';\nimport { cellViewMenuSlotName } from '../types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-table-column-menu-button-cell-view': TableColumnMenuButtonCellView;\n    }\n}\n\n/**\n * The cell view base class for displaying a string field as a menu button.\n */\nexport class TableColumnMenuButtonCellView extends TableCellView<\nTableColumnMenuButtonCellRecord,\nTableColumnMenuButtonColumnConfig\n> {\n    /** @internal */\n    public menuButton?: MenuButton;\n\n    /** @internal */\n    public valueSpan?: HTMLSpanElement;\n\n    /** @internal */\n    @observable\n    public hasOverflow = false;\n\n    /** @internal */\n    @volatile\n    public get showMenuButton(): boolean {\n        return !!this.cellRecord?.value;\n    }\n\n    public override get tabbableChildren(): HTMLElement[] {\n        if (this.showMenuButton) {\n            return [this.menuButton!];\n        }\n        return [];\n    }\n\n    /** @internal */\n    public onMenuButtonBeforeToggle(\n        event: CustomEvent<MenuButtonToggleEventDetail>\n    ): boolean {\n        const configuredSlotName = this.columnConfig?.menuSlot;\n        if (configuredSlotName && event.detail.newState) {\n            const eventDetail: CellViewSlotRequestEventDetail = {\n                slots: [\n                    { name: configuredSlotName, slot: cellViewMenuSlotName }\n                ]\n            };\n            this.$emit('cell-view-slots-request', eventDetail);\n        }\n        return true;\n    }\n\n    /** @internal */\n    public onMenuButtonMouseOver(): void {\n        if (this.valueSpan) {\n            this.hasOverflow = this.valueSpan.offsetWidth < this.valueSpan.scrollWidth;\n        }\n    }\n\n    /** @internal */\n    public onMenuButtonMouseOut(): void {\n        this.hasOverflow = false;\n    }\n\n    /** @internal */\n    public onMenuButtonClick(e: Event): void {\n        // Stop propagation of the click event to prevent clicking the menu button\n        // from affecting row selection.\n        e.stopPropagation();\n    }\n}\n\nconst menuButtonCellView = TableColumnMenuButtonCellView.compose({\n    baseName: 'table-column-menu-button-cell-view',\n    template,\n    styles\n});\nDesignSystem.getOrCreate().withPrefix('nimble').register(menuButtonCellView());\nexport const tableColumnMenuButtonCellViewTag = 'nimble-table-column-menu-button-cell-view';\n"]}

package/dist/esm/table-column/menu-button/cell-view/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/table-column/menu-button/cell-view/styles.js

@@ -0,0 +1,21 @@
+import { css } from '@microsoft/fast-element';
+import { controlSlimHeight } from '../../../theme-provider/design-tokens';
+export const styles = css `
+    :host {
+        align-self: center;
+        width: 100%;
+    }
+
+    nimble-menu-button {
+        height: ${controlSlimHeight};
+        width: 100%;
+    }
+
+    .value-label {
+        margin-right: auto;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/table-column/menu-button/cell-view/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table-column/menu-button/cell-view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AAE1E,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;kBAOP,iBAAiB;;;;;;;;;;CAUlC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { controlSlimHeight } from '../../../theme-provider/design-tokens';\n\nexport const styles = css`\n    :host {\n        align-self: center;\n        width: 100%;\n    }\n\n    nimble-menu-button {\n        height: ${controlSlimHeight};\n        width: 100%;\n    }\n\n    .value-label {\n        margin-right: auto;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n`;\n"]}

package/dist/esm/table-column/menu-button/cell-view/templates.d.ts

@@ -0,0 +1,2 @@
+import type { TableColumnMenuButtonCellView } from '.';
+export declare const template: import("@microsoft/fast-element").ViewTemplate<TableColumnMenuButtonCellView, any>;

package/dist/esm/table-column/menu-button/cell-view/templates.js

@@ -0,0 +1,25 @@
+import { html, ref, when } from '@microsoft/fast-element';
+import { menuButtonTag } from '../../../menu-button';
+import { ButtonAppearance } from '../../../menu-button/types';
+import { iconArrowExpanderDownTag } from '../../../icons/arrow-expander-down';
+import { cellViewMenuSlotName } from '../types';
+// prettier-ignore
+export const template = html `
+    ${when(x => x.showMenuButton, html `
+        <${menuButtonTag}
+            ${ref('menuButton')}
+            appearance="${ButtonAppearance.ghost}"
+            @beforetoggle="${(x, c) => x.onMenuButtonBeforeToggle(c.event)}"
+            @mouseover="${x => x.onMenuButtonMouseOver()}"
+            @mouseout="${x => x.onMenuButtonMouseOut()}"
+            @click="${(x, c) => x.onMenuButtonClick(c.event)}"
+            title=${x => (x.hasOverflow ? x.cellRecord.value : null)}
+        >
+            <span ${ref('valueSpan')} class="value-label">${x => x.cellRecord.value}</span>
+            <${iconArrowExpanderDownTag} slot="end"></${iconArrowExpanderDownTag}>
+
+            <slot name="${cellViewMenuSlotName}" slot="menu"></slot>
+        </${menuButtonTag}>
+    `)}
+`;
+//# sourceMappingURL=templates.js.map

package/dist/esm/table-column/menu-button/cell-view/templates.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"templates.js","sourceRoot":"","sources":["../../../../../src/table-column/menu-button/cell-view/templates.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE1D,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EACH,gBAAgB,EAEnB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,wBAAwB,EAAE,MAAM,oCAAoC,CAAC;AAC9E,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAEhD,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAA+B;MACrD,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,IAAI,CAA+B;WAC1D,aAAa;cACV,GAAG,CAAC,YAAY,CAAC;0BACL,gBAAgB,CAAC,KAAK;6BACnB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,KAAiD,CAAC;0BAC5F,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,qBAAqB,EAAE;yBAC/B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,oBAAoB,EAAE;sBAChC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAK,CAAC;oBACxC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,UAAW,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;;oBAEjD,GAAG,CAAC,WAAW,CAAC,wBAAwB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAW,CAAC,KAAK;eACrE,wBAAwB,iBAAiB,wBAAwB;;0BAEtD,oBAAoB;YAClC,aAAa;KACpB,CAAC;CACL,CAAC","sourcesContent":["import { html, ref, when } from '@microsoft/fast-element';\nimport type { TableColumnMenuButtonCellView } from '.';\nimport { menuButtonTag } from '../../../menu-button';\nimport {\n    ButtonAppearance,\n    type MenuButtonToggleEventDetail\n} from '../../../menu-button/types';\nimport { iconArrowExpanderDownTag } from '../../../icons/arrow-expander-down';\nimport { cellViewMenuSlotName } from '../types';\n\n// prettier-ignore\nexport const template = html<TableColumnMenuButtonCellView>`\n    ${when(x => x.showMenuButton, html<TableColumnMenuButtonCellView>`\n        <${menuButtonTag}\n            ${ref('menuButton')}\n            appearance=\"${ButtonAppearance.ghost}\"\n            @beforetoggle=\"${(x, c) => x.onMenuButtonBeforeToggle(c.event as CustomEvent<MenuButtonToggleEventDetail>)}\"\n            @mouseover=\"${x => x.onMenuButtonMouseOver()}\"\n            @mouseout=\"${x => x.onMenuButtonMouseOut()}\"\n            @click=\"${(x, c) => x.onMenuButtonClick(c.event)}\"\n            title=${x => (x.hasOverflow ? x.cellRecord!.value : null)}\n        >\n            <span ${ref('valueSpan')} class=\"value-label\">${x => x.cellRecord!.value}</span>\n            <${iconArrowExpanderDownTag} slot=\"end\"></${iconArrowExpanderDownTag}>\n\n            <slot name=\"${cellViewMenuSlotName}\" slot=\"menu\"></slot>\n        </${menuButtonTag}>\n    `)}\n`;\n"]}

package/dist/esm/table-column/menu-button/index.d.ts

@@ -0,0 +1,42 @@
+import type { TableStringField } from '../../table/types';
+import type { ColumnInternalsOptions } from '../base/models/column-internals';
+import { ColumnValidator } from '../base/models/column-validator';
+import { TableColumn } from '../base';
+export type TableColumnMenuButtonCellRecord = TableStringField<'value'>;
+export interface TableColumnMenuButtonColumnConfig {
+    menuSlot?: string;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-table-column-menu-button': TableColumnMenuButton;
+    }
+}
+declare const TableColumnMenuButton_base: (abstract new (...args: any[]) => {
+    fractionalWidth?: number | null | undefined;
+    minPixelWidth?: number | null | undefined;
+    fractionalWidthChanged(): void;
+    minPixelWidthChanged(): void;
+    readonly columnInternals: import("../base/models/column-internals").ColumnInternals<unknown, ColumnValidator<[]>>;
+}) & ((abstract new () => TableColumn<TableColumnMenuButtonColumnConfig, ColumnValidator<[]>>) & {
+    compose<T extends import("@microsoft/fast-foundation").FoundationElementDefinition = import("@microsoft/fast-foundation").FoundationElementDefinition, K extends import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement> = import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>(this: K, elementDefinition: T): (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<T> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<T, K>;
+    from<TBase extends {
+        new (): HTMLElement;
+        prototype: HTMLElement;
+    }>(BaseType: TBase): new () => InstanceType<TBase> & import("@microsoft/fast-element").FASTElement;
+    define<TType extends Function>(type: TType, nameOrDef?: string | import("@microsoft/fast-element").PartialFASTElementDefinition | undefined): TType;
+});
+/**
+ * The table column for displaying string fields as the content within a menu button.
+ */
+export declare class TableColumnMenuButton extends TableColumnMenuButton_base {
+    fieldName?: string;
+    menuSlot?: string;
+    /** @internal */
+    onDelegatedEvent(e: Event): void;
+    protected getColumnInternalsOptions(): ColumnInternalsOptions;
+    protected fieldNameChanged(): void;
+    protected menuSlotChanged(): void;
+    private updateColumnConfig;
+}
+export declare const tableColumnMenuButtonTag = "nimble-table-column-menu-button";
+export {};

package/dist/esm/table-column/menu-button/index.js

@@ -0,0 +1,68 @@
+import { __decorate } from "tslib";
+import { DesignSystem } from '@microsoft/fast-foundation';
+import { attr } from '@microsoft/fast-element';
+import { template } from './template';
+import { styles } from '../base/styles';
+import { tableColumnMenuButtonCellViewTag } from './cell-view';
+import { ColumnValidator } from '../base/models/column-validator';
+import { mixinFractionalWidthColumnAPI } from '../mixins/fractional-width-column';
+import { TableColumn } from '../base';
+import { cellViewMenuSlotName } from './types';
+/**
+ * The table column for displaying string fields as the content within a menu button.
+ */
+export class TableColumnMenuButton extends mixinFractionalWidthColumnAPI((TableColumn)) {
+    /** @internal */
+    onDelegatedEvent(e) {
+        e.stopImmediatePropagation();
+        const event = e;
+        const originalEvent = event.detail.originalEvent;
+        if (originalEvent.type === 'beforetoggle'
+            || originalEvent.type === 'toggle') {
+            const newEventName = `menu-button-column-${originalEvent.type}`;
+            const originalToggleEvent = originalEvent;
+            const detail = {
+                ...originalToggleEvent.detail,
+                recordId: event.detail.recordId
+            };
+            this.$emit(newEventName, detail);
+        }
+    }
+    getColumnInternalsOptions() {
+        return {
+            cellRecordFieldNames: ['value'],
+            cellViewTag: tableColumnMenuButtonCellViewTag,
+            delegatedEvents: ['beforetoggle', 'toggle'],
+            slotNames: [cellViewMenuSlotName],
+            validator: new ColumnValidator([])
+        };
+    }
+    fieldNameChanged() {
+        this.columnInternals.dataRecordFieldNames = [this.fieldName];
+        this.columnInternals.operandDataRecordFieldName = this.fieldName;
+    }
+    menuSlotChanged() {
+        this.updateColumnConfig();
+    }
+    updateColumnConfig() {
+        this.columnInternals.columnConfig = {
+            menuSlot: this.menuSlot
+        };
+    }
+}
+__decorate([
+    attr({ attribute: 'field-name' })
+], TableColumnMenuButton.prototype, "fieldName", void 0);
+__decorate([
+    attr({ attribute: 'menu-slot' })
+], TableColumnMenuButton.prototype, "menuSlot", void 0);
+const nimbleTableColumnMenuButton = TableColumnMenuButton.compose({
+    baseName: 'table-column-menu-button',
+    template,
+    styles
+});
+DesignSystem.getOrCreate()
+    .withPrefix('nimble')
+    .register(nimbleTableColumnMenuButton());
+export const tableColumnMenuButtonTag = 'nimble-table-column-menu-button';
+//# sourceMappingURL=index.js.map

package/dist/esm/table-column/menu-button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table-column/menu-button/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAExC,OAAO,EAAE,gCAAgC,EAAE,MAAM,aAAa,CAAC;AAE/D,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,6BAA6B,EAAE,MAAM,mCAAmC,CAAC;AAClF,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACtC,OAAO,EAEH,oBAAoB,EACvB,MAAM,SAAS,CAAC;AAgBjB;;GAEG;AACH,MAAM,OAAO,qBAAsB,SAAQ,6BAA6B,CACpE,CAAA,WAA8C,CAAA,CACjD;IAOG,gBAAgB;IACT,gBAAgB,CAAC,CAAQ;QAC5B,CAAC,CAAC,wBAAwB,EAAE,CAAC;QAE7B,MAAM,KAAK,GAAG,CAA4C,CAAC;QAC3D,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC;QACjD,IACI,aAAa,CAAC,IAAI,KAAK,cAAc;eAClC,aAAa,CAAC,IAAI,KAAK,QAAQ,EACpC;YACE,MAAM,YAAY,GAAG,sBAAsB,aAAa,CAAC,IAAI,EAAE,CAAC;YAChE,MAAM,mBAAmB,GAAG,aAAyD,CAAC;YACtF,MAAM,MAAM,GAAsC;gBAC9C,GAAG,mBAAmB,CAAC,MAAM;gBAC7B,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,QAAQ;aAClC,CAAC;YACF,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;SACpC;IACL,CAAC;IAEkB,yBAAyB;QACxC,OAAO;YACH,oBAAoB,EAAE,CAAC,OAAO,CAAC;YAC/B,WAAW,EAAE,gCAAgC;YAC7C,eAAe,EAAE,CAAC,cAAc,EAAE,QAAQ,CAAC;YAC3C,SAAS,EAAE,CAAC,oBAAoB,CAAC;YACjC,SAAS,EAAE,IAAI,eAAe,CAAK,EAAE,CAAC;SACzC,CAAC;IACN,CAAC;IAES,gBAAgB;QACtB,IAAI,CAAC,eAAe,CAAC,oBAAoB,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC7D,IAAI,CAAC,eAAe,CAAC,0BAA0B,GAAG,IAAI,CAAC,SAAS,CAAC;IACrE,CAAC;IAES,eAAe;QACrB,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC9B,CAAC;IAEO,kBAAkB;QACtB,IAAI,CAAC,eAAe,CAAC,YAAY,GAAG;YAChC,QAAQ,EAAE,IAAI,CAAC,QAAQ;SAC1B,CAAC;IACN,CAAC;CACJ;AAjDU;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;wDACR;AAGnB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;uDACR;AAgD7B,MAAM,2BAA2B,GAAG,qBAAqB,CAAC,OAAO,CAAC;IAC9D,QAAQ,EAAE,0BAA0B;IACpC,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,2BAA2B,EAAE,CAAC,CAAC;AAC7C,MAAM,CAAC,MAAM,wBAAwB,GAAG,iCAAiC,CAAC","sourcesContent":["import { DesignSystem } from '@microsoft/fast-foundation';\nimport { attr } from '@microsoft/fast-element';\nimport { template } from './template';\nimport { styles } from '../base/styles';\nimport type { TableStringField } from '../../table/types';\nimport { tableColumnMenuButtonCellViewTag } from './cell-view';\nimport type { ColumnInternalsOptions } from '../base/models/column-internals';\nimport { ColumnValidator } from '../base/models/column-validator';\nimport { mixinFractionalWidthColumnAPI } from '../mixins/fractional-width-column';\nimport { TableColumn } from '../base';\nimport {\n    MenuButtonColumnToggleEventDetail,\n    cellViewMenuSlotName\n} from './types';\nimport type { DelegatedEventEventDetails } from '../base/types';\nimport type { MenuButtonToggleEventDetail } from '../../menu-button/types';\n\nexport type TableColumnMenuButtonCellRecord = TableStringField<'value'>;\n\nexport interface TableColumnMenuButtonColumnConfig {\n    menuSlot?: string;\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-table-column-menu-button': TableColumnMenuButton;\n    }\n}\n\n/**\n * The table column for displaying string fields as the content within a menu button.\n */\nexport class TableColumnMenuButton extends mixinFractionalWidthColumnAPI(\n    TableColumn<TableColumnMenuButtonColumnConfig>\n) {\n    @attr({ attribute: 'field-name' })\n    public fieldName?: string;\n\n    @attr({ attribute: 'menu-slot' })\n    public menuSlot?: string;\n\n    /** @internal */\n    public onDelegatedEvent(e: Event): void {\n        e.stopImmediatePropagation();\n\n        const event = e as CustomEvent<DelegatedEventEventDetails>;\n        const originalEvent = event.detail.originalEvent;\n        if (\n            originalEvent.type === 'beforetoggle'\n            || originalEvent.type === 'toggle'\n        ) {\n            const newEventName = `menu-button-column-${originalEvent.type}`;\n            const originalToggleEvent = originalEvent as CustomEvent<MenuButtonToggleEventDetail>;\n            const detail: MenuButtonColumnToggleEventDetail = {\n                ...originalToggleEvent.detail,\n                recordId: event.detail.recordId\n            };\n            this.$emit(newEventName, detail);\n        }\n    }\n\n    protected override getColumnInternalsOptions(): ColumnInternalsOptions {\n        return {\n            cellRecordFieldNames: ['value'],\n            cellViewTag: tableColumnMenuButtonCellViewTag,\n            delegatedEvents: ['beforetoggle', 'toggle'],\n            slotNames: [cellViewMenuSlotName],\n            validator: new ColumnValidator<[]>([])\n        };\n    }\n\n    protected fieldNameChanged(): void {\n        this.columnInternals.dataRecordFieldNames = [this.fieldName];\n        this.columnInternals.operandDataRecordFieldName = this.fieldName;\n    }\n\n    protected menuSlotChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    private updateColumnConfig(): void {\n        this.columnInternals.columnConfig = {\n            menuSlot: this.menuSlot\n        };\n    }\n}\n\nconst nimbleTableColumnMenuButton = TableColumnMenuButton.compose({\n    baseName: 'table-column-menu-button',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate()\n    .withPrefix('nimble')\n    .register(nimbleTableColumnMenuButton());\nexport const tableColumnMenuButtonTag = 'nimble-table-column-menu-button';\n"]}

package/dist/esm/table-column/menu-button/template.d.ts

@@ -0,0 +1,2 @@
+import type { TableColumnMenuButton } from '.';
+export declare const template: import("@microsoft/fast-element").ViewTemplate<TableColumnMenuButton, any>;

package/dist/esm/table-column/menu-button/template.js

@@ -0,0 +1,8 @@
+import { html } from '@microsoft/fast-element';
+import { template as baseTemplate } from '../base/template';
+export const template = html `
+    <template @delegated-event="${(x, c) => x.onDelegatedEvent(c.event)}"
+        >${baseTemplate}</template
+    >
+`;
+//# sourceMappingURL=template.js.map

package/dist/esm/table-column/menu-button/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/table-column/menu-button/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE/C,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAE5D,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAuB;kCACjB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC;WAC5D,YAAY;;CAEtB,CAAC","sourcesContent":["import { html } from '@microsoft/fast-element';\nimport type { TableColumnMenuButton } from '.';\nimport { template as baseTemplate } from '../base/template';\n\nexport const template = html<TableColumnMenuButton>`\n    <template @delegated-event=\"${(x, c) => x.onDelegatedEvent(c.event)}\"\n        >${baseTemplate}</template\n    >\n`;\n"]}

package/dist/esm/table-column/menu-button/testing/table-column-menu-button.pageobject.d.ts

@@ -0,0 +1,11 @@
+import { MenuButtonPageObject } from '../../../menu-button/testing/menu-button.pageobject';
+import type { TablePageObject } from '../../../table/testing/table.pageobject';
+import type { TableRecord } from '../../../table/types';
+/**
+ * Page object for `nimble-table-column-menu-button`.
+ */
+export declare class TableColumnMenuButtonPageObject<T extends TableRecord> {
+    private readonly tablePageObject;
+    constructor(tablePageObject: TablePageObject<T>);
+    getMenuButton(rowIndex: number, columnIndex: number): MenuButtonPageObject | null;
+}

package/dist/esm/table-column/menu-button/testing/table-column-menu-button.pageobject.js

@@ -0,0 +1,18 @@
+import { menuButtonTag } from '../../../menu-button';
+import { MenuButtonPageObject } from '../../../menu-button/testing/menu-button.pageobject';
+/**
+ * Page object for `nimble-table-column-menu-button`.
+ */
+export class TableColumnMenuButtonPageObject {
+    constructor(tablePageObject) {
+        this.tablePageObject = tablePageObject;
+    }
+    getMenuButton(rowIndex, columnIndex) {
+        const cellView = this.tablePageObject.getRenderedCellView(rowIndex, columnIndex);
+        const menuButtonElement = cellView.shadowRoot.querySelector(menuButtonTag);
+        return menuButtonElement
+            ? new MenuButtonPageObject(menuButtonElement)
+            : null;
+    }
+}
+//# sourceMappingURL=table-column-menu-button.pageobject.js.map