@fluentui/react-table 9.0.0-alpha.1 → 9.0.0-alpha.3

package/dist/index.d.ts

@@ -1,17 +1,29 @@
 /// <reference types="react" />
 
 import { ARIAButtonSlotProps } from '@fluentui/react-aria';
+import type { Checkbox } from '@fluentui/react-checkbox';
+import type { CheckboxProps } from '@fluentui/react-checkbox';
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
-import { ContextSelector } from '@fluentui/react-context-selector';
-import { FC } from 'react';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
-import { Provider } from 'react';
-import { ProviderProps } from 'react';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
+export declare interface ColumnDefinition<TItem> {
+    columnId: ColumnId;
+    compare?: (a: TItem, b: TItem) => number;
+}
+
+export declare type ColumnId = string | number;
+
+declare type OnSelectionChangeCallback = (selectedItems: Set<RowId>) => void;
+
+declare type OnSortChangeCallback = (state: {
+    sortColumn: ColumnId | undefined;
+    sortDirection: SortDirection;
+}) => void;
+
 /**
  * Render the final JSX of Table
  */
@@ -27,6 +39,16 @@ export declare const renderTableBody_unstable: (state: TableBodyState) => JSX.El
  */
 export declare const renderTableCell_unstable: (state: TableCellState) => JSX.Element;
 
+/**
+ * Render the final JSX of TableCellActions
+ */
+export declare const renderTableCellActions_unstable: (state: TableCellActionsState) => JSX.Element;
+
+/**
+ * Render the final JSX of TableCellLayout
+ */
+export declare const renderTableCellLayout_unstable: (state: TableCellLayoutState) => JSX.Element;
+
 /**
  * Render the final JSX of TableHeader
  */
@@ -42,12 +64,37 @@ export declare const renderTableHeaderCell_unstable: (state: TableHeaderCellStat
  */
 export declare const renderTableRow_unstable: (state: TableRowState) => JSX.Element;
 
+/**
+ * Render the final JSX of TableSelectionCell
+ */
+export declare const renderTableSelectionCell_unstable: (state: TableSelectionCellState) => JSX.Element;
+
+declare type RowEnhancer<TItem, TRowState extends RowState<TItem> = RowState<TItem>> = (row: RowState<TItem>, state: {
+    selection: TableSelectionState;
+    sort: TableSortState;
+}) => TRowState;
+
+export declare type RowId = string | number;
+
+export declare interface RowState<TItem> {
+    /**
+     * User provided data
+     */
+    item: TItem;
+    /**
+     * The row id, defaults to index position in the collection
+     */
+    rowId: RowId;
+}
+
+declare type SelectionMode_2 = 'single' | 'multiselect';
+
 export declare type SortDirection = 'ascending' | 'descending';
 
-declare type SortState = {
-    sortColumn: string | undefined;
-    sortDirection: 'ascending' | 'descending';
-};
+declare interface SortState {
+    sortColumn: ColumnId | undefined;
+    sortDirection: SortDirection;
+}
 
 /**
  * Table component - TODO: add more docs
@@ -82,10 +129,76 @@ export declare type TableBodyState = ComponentState<TableBodySlots>;
  */
 export declare const TableCell: ForwardRefComponent<TableCellProps>;
 
+/**
+ * TableCellActions component - TODO: add more docs
+ */
+export declare const TableCellActions: ForwardRefComponent<TableCellActionsProps>;
+
+export declare const tableCellActionsClassNames: SlotClassNames<TableCellActionsSlots>;
+
+/**
+ * TableCellActions Props
+ */
+export declare type TableCellActionsProps = ComponentProps<TableCellActionsSlots> & {
+    /**
+     * When true, the actions are always visible regardless of row hover.
+     * Can be useful keeping the actions visible when a popout surface is opened.
+     */
+    visible?: boolean;
+};
+
+export declare type TableCellActionsSlots = {
+    root: Slot<'div'>;
+};
+
+/**
+ * State used in rendering TableCellActions
+ */
+export declare type TableCellActionsState = ComponentState<TableCellActionsSlots> & Pick<Required<TableCellActionsProps>, 'visible'>;
+
 export declare const tableCellClassName = "fui-TableCell";
 
 export declare const tableCellClassNames: SlotClassNames<TableCellSlots>;
 
+/**
+ * TableCellLayout component - TODO: add more docs
+ */
+export declare const TableCellLayout: ForwardRefComponent<TableCellLayoutProps>;
+
+export declare const tableCellLayoutClassNames: SlotClassNames<TableCellLayoutSlots>;
+
+/**
+ * TableCellLayout Props
+ */
+export declare type TableCellLayoutProps = ComponentProps<Partial<TableCellLayoutSlots>> & {
+    appearance?: 'primary';
+};
+
+export declare type TableCellLayoutSlots = {
+    root: Slot<'div'>;
+    /**
+     * Slot for an icon or other visual element
+     */
+    media: Slot<'span'>;
+    /**
+     * Main text for the table cell. Children of the root slot are automatically rendered here
+     */
+    main: Slot<'span'>;
+    /**
+     * Secondary text that describes or complements the main text
+     */
+    description: Slot<'span'>;
+    /**
+     * A layout wrapper for the main and description slots
+     */
+    wrapper: Slot<'div'>;
+};
+
+/**
+ * State used in rendering TableCellLayout
+ */
+export declare type TableCellLayoutState = ComponentState<TableCellLayoutSlots> & Pick<TableCellLayoutProps, 'appearance'>;
+
 /**
  * TableCell Props
  */
@@ -93,7 +206,6 @@ export declare type TableCellProps = ComponentProps<TableCellSlots> & {};
 
 export declare type TableCellSlots = {
     root: Slot<'td', 'div'>;
-    media?: Slot<'span'>;
 };
 
 /**
@@ -105,7 +217,7 @@ export declare const tableClassName = "fui-Table";
 
 export declare const tableClassNames: SlotClassNames<TableSlots>;
 
-export declare const TableContextProvider: Provider<TableContextValue | undefined> & FC<ProviderProps<TableContextValue | undefined>>;
+export declare const TableContextProvider: React_2.Provider<TableContextValue | undefined>;
 
 export declare type TableContextValue = {
     size: 'small' | 'smaller' | 'medium';
@@ -175,16 +287,7 @@ export declare type TableHeaderState = ComponentState<TableHeaderSlots>;
 /**
  * Table Props
  */
-export declare type TableProps = ComponentProps<TableSlots> & {} & Partial<TableContextValue> & {
-    /**
-     * Called when the sorted column changes
-     */
-    onSortColumnChange?: (e: React_2.MouseEvent<HTMLElement> | React_2.KeyboardEvent<HTMLElement>, data: {
-        sortState: SortState;
-    }) => void;
-    sortState?: SortState;
-    defaultSortState?: SortState;
-};
+export declare type TableProps = ComponentProps<TableSlots> & Partial<TableContextValue>;
 
 /**
  * TableRow component - TODO: add more docs
@@ -211,15 +314,129 @@ export declare type TableRowState = ComponentState<TableRowSlots> & {
     size: TableState['size'];
 };
 
+/**
+ * TableSelectionCell component - TODO: add more docs
+ */
+export declare const TableSelectionCell: ForwardRefComponent<TableSelectionCellProps>;
+
+export declare const tableSelectionCellClassNames: SlotClassNames<TableSelectionCellSlots>;
+
+/**
+ * TableSelectionCell Props
+ */
+export declare type TableSelectionCellProps = ComponentProps<Partial<Omit<TableSelectionCellSlots, 'media'>>> & {
+    /**
+     * A table can have two kinds of selection modes
+     */
+    type?: 'checkbox' | 'radio';
+    checked?: CheckboxProps['checked'];
+};
+
+export declare type TableSelectionCellSlots = {
+    /**
+     * Selection indicator if selection type is checkbox
+     */
+    checkboxIndicator: Slot<typeof Checkbox>;
+    /**
+     * Selection indicator if selection type is radio
+     */
+    radioIndicator: Slot<'span'>;
+} & Pick<TableCellSlots, 'root'>;
+
+/**
+ * State used in rendering TableSelectionCell
+ */
+export declare type TableSelectionCellState = ComponentState<TableSelectionCellSlots> & Pick<Required<TableSelectionCellProps>, 'type' | 'checked'>;
+
+export declare interface TableSelectionState {
+    /**
+     * Clears all selected rows
+     */
+    clearRows: () => void;
+    /**
+     * Selects single row
+     */
+    selectRow: (rowId: RowId) => void;
+    /**
+     * De-selects single row
+     */
+    deselectRow: (rowId: RowId) => void;
+    /**
+     * Toggle selection of all rows
+     */
+    toggleAllRows: () => void;
+    /**
+     * Toggle selection of single row
+     */
+    toggleRow: (rowId: RowId) => void;
+    /**
+     * Collection of row ids corresponding to selected rows
+     */
+    selectedRows: RowId[];
+    /**
+     * Whether all rows are selected
+     */
+    allRowsSelected: boolean;
+    /**
+     * Whether some rows are selected
+     */
+    someRowsSelected: boolean;
+    /**
+     * Checks if a given rowId is selected
+     */
+    isRowSelected: (rowId: RowId) => boolean;
+}
+
 export declare type TableSlots = {
     root: Slot<'table', 'div'>;
 };
 
+export declare interface TableSortState {
+    /**
+     * Current sort direction
+     */
+    sortDirection: SortDirection;
+    /**
+     * Column id of the currently sorted column
+     */
+    sortColumn: ColumnId | undefined;
+    /**
+     * Set the sort direction for the specified column
+     */
+    setColumnSort: (columnId: ColumnId, sortDirection: SortDirection) => void;
+    /**
+     * Toggles the sort direction for specified column
+     */
+    toggleColumnSort: (columnId: ColumnId) => void;
+    /**
+     * Returns the sort direction if a column is sorted,
+     * returns undefined if the column is not sorted
+     */
+    getSortDirection: (columnId: ColumnId) => SortDirection | undefined;
+}
+
 /**
  * State used in rendering Table
  */
 export declare type TableState = ComponentState<TableSlots> & Pick<Required<TableProps>, 'size' | 'noNativeElements'> & TableContextValue;
 
+declare interface TableState_2<TItem, TRowState extends RowState<TItem> = RowState<TItem>> {
+    /**
+     * The row data for rendering
+     */
+    rows: TRowState[];
+    /**
+     * State and actions to manage row selection
+     */
+    selection: TableSelectionState;
+    /**
+     * State and actions to manage row sorting
+     */
+    sort: TableSortState;
+}
+
+export declare function useTable<TItem, TRowState extends RowState<TItem> = RowState<TItem>>(options: UseTableOptions<TItem, TRowState>): TableState_2<TItem, TRowState>;
+
 /**
  * Create the state required to render Table.
  *
@@ -258,12 +475,44 @@ export declare const useTableBodyStyles_unstable: (state: TableBodyState) => Tab
  */
 export declare const useTableCell_unstable: (props: TableCellProps, ref: React_2.Ref<HTMLElement>) => TableCellState;
 
+/**
+ * Create the state required to render TableCellActions.
+ *
+ * The returned state can be modified with hooks such as useTableCellActionsStyles_unstable,
+ * before being passed to renderTableCellActions_unstable.
+ *
+ * @param props - props from this instance of TableCellActions
+ * @param ref - reference to root HTMLElement of TableCellActions
+ */
+export declare const useTableCellActions_unstable: (props: TableCellActionsProps, ref: React_2.Ref<HTMLElement>) => TableCellActionsState;
+
+/**
+ * Apply styling to the TableCellActions slots based on the state
+ */
+export declare const useTableCellActionsStyles_unstable: (state: TableCellActionsState) => TableCellActionsState;
+
+/**
+ * Create the state required to render TableCellLayout.
+ *
+ * The returned state can be modified with hooks such as useTableCellLayoutStyles_unstable,
+ * before being passed to renderTableCellLayout_unstable.
+ *
+ * @param props - props from this instance of TableCellLayout
+ * @param ref - reference to root HTMLElement of TableCellLayout
+ */
+export declare const useTableCellLayout_unstable: (props: TableCellLayoutProps, ref: React_2.Ref<HTMLElement>) => TableCellLayoutState;
+
+/**
+ * Apply styling to the TableCellLayout slots based on the state
+ */
+export declare const useTableCellLayoutStyles_unstable: (state: TableCellLayoutState) => TableCellLayoutState;
+
 /**
  * Apply styling to the TableCell slots based on the state
  */
 export declare const useTableCellStyles_unstable: (state: TableCellState) => TableCellState;
 
-export declare const useTableContext: <T>(selector: ContextSelector<TableContextValue, T>) => T;
+export declare const useTableContext: () => TableContextValue;
 
 /**
  * Create the state required to render TableHeader.
@@ -297,6 +546,38 @@ export declare const useTableHeaderCellStyles_unstable: (state: TableHeaderCellS
  */
 export declare const useTableHeaderStyles_unstable: (state: TableHeaderState) => TableHeaderState;
 
+export declare interface UseTableOptions<TItem, TRowState extends RowState<TItem> = RowState<TItem>> {
+    columns: ColumnDefinition<TItem>[];
+    items: TItem[];
+    selectionMode?: SelectionMode_2;
+    /**
+     * Used in uncontrolled mode to set initial selected rows on mount
+     */
+    defaultSelectedRows?: Set<RowId>;
+    /**
+     * Used to control row selection
+     */
+    selectedRows?: Set<RowId>;
+    /**
+     * Called when selection changes
+     */
+    onSelectionChange?: OnSelectionChangeCallback;
+    /**
+     * Used to control sorting
+     */
+    sortState?: SortState;
+    /**
+     * Used in uncontrolled mode to set initial sort column and direction on mount
+     */
+    defaultSortState?: SortState;
+    /**
+     * Called when sort changes
+     */
+    onSortChange?: OnSortChangeCallback;
+    getRowId?: (item: TItem) => RowId;
+    rowEnhancer?: RowEnhancer<TItem, TRowState>;
+}
+
 /**
  * Create the state required to render TableRow.
  *
@@ -313,6 +594,22 @@ export declare const useTableRow_unstable: (props: TableRowProps, ref: React_2.R
  */
 export declare const useTableRowStyles_unstable: (state: TableRowState) => TableRowState;
 
+/**
+ * Create the state required to render TableSelectionCell.
+ *
+ * The returned state can be modified with hooks such as useTableSelectionCellStyles_unstable,
+ * before being passed to renderTableSelectionCell_unstable.
+ *
+ * @param props - props from this instance of TableSelectionCell
+ * @param ref - reference to root HTMLElement of TableSelectionCell
+ */
+export declare const useTableSelectionCell_unstable: (props: TableSelectionCellProps, ref: React_2.Ref<HTMLElement>) => TableSelectionCellState;
+
+/**
+ * Apply styling to the TableSelectionCell slots based on the state
+ */
+export declare const useTableSelectionCellStyles_unstable: (state: TableSelectionCellState) => TableSelectionCellState;
+
 /**
  * Apply styling to the Table slots based on the state
  */

package/lib/TableCellActions.js

@@ -0,0 +1,2 @@
+export * from './components/TableCellActions/index';
+//# sourceMappingURL=TableCellActions.js.map

package/lib/TableCellActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCellActions.js","sourceRoot":"../src/","sources":["TableCellActions.ts"],"names":[],"mappings":"AAAA,cAAc,qCAAqC,CAAC","sourcesContent":["export * from './components/TableCellActions/index';\n"]}

package/lib/TableCellLayout.js

@@ -0,0 +1,2 @@
+export * from './components/TableCellLayout/index';
+//# sourceMappingURL=TableCellLayout.js.map

package/lib/TableCellLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCellLayout.js","sourceRoot":"../src/","sources":["TableCellLayout.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAC","sourcesContent":["export * from './components/TableCellLayout/index';\n"]}

package/lib/TableCellPrimaryLayout.js

@@ -0,0 +1,2 @@
+export * from './components/TableCellLayout/index';
+//# sourceMappingURL=TableCellPrimaryLayout.js.map

package/lib/TableCellPrimaryLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCellPrimaryLayout.js","sourceRoot":"../src/","sources":["TableCellPrimaryLayout.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAC","sourcesContent":["export * from './components/TableCellLayout/index';\n"]}

package/lib/TableSelectionCell.js

@@ -0,0 +1,2 @@
+export * from './components/TableSelectionCell/index';
+//# sourceMappingURL=TableSelectionCell.js.map

package/lib/TableSelectionCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableSelectionCell.js","sourceRoot":"../src/","sources":["TableSelectionCell.ts"],"names":[],"mappings":"AAAA,cAAc,uCAAuC,CAAC","sourcesContent":["export * from './components/TableSelectionCell/index';\n"]}

package/lib/components/Table/Table.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.types.js","sourceRoot":"../src/","sources":["components/Table/Table.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type TableSlots = {\n  root: Slot<'table', 'div'>;\n};\n\nexport type TableContextValue = {\n  size: 'small' | 'smaller' | 'medium';\n\n  noNativeElements: boolean;\n\n  sortable: boolean;\n};\n\nexport type SortDirection = 'ascending' | 'descending';\nexport type SortState = {\n  sortColumn: string | undefined;\n  sortDirection: 'ascending' | 'descending';\n};\n\nexport type TableContextValues = {\n  table: TableContextValue;\n};\n\n/**\n * Table Props\n */\nexport type TableProps = ComponentProps<TableSlots> & {} & Partial<TableContextValue> & {\n    /**\n     * Called when the sorted column changes\n     */\n    onSortColumnChange?: (\n      e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n      data: { sortState: SortState },\n    ) => void;\n\n    sortState?: SortState;\n\n    defaultSortState?: SortState;\n  };\n\n/**\n * State used in rendering Table\n */\nexport type TableState = ComponentState<TableSlots> &\n  Pick<Required<TableProps>, 'size' | 'noNativeElements'> &\n  TableContextValue;\n"]}
+{"version":3,"file":"Table.types.js","sourceRoot":"../src/","sources":["components/Table/Table.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type TableSlots = {\n  root: Slot<'table', 'div'>;\n};\n\nexport type TableContextValue = {\n  size: 'small' | 'smaller' | 'medium';\n\n  noNativeElements: boolean;\n\n  sortable: boolean;\n};\n\nexport type SortDirection = 'ascending' | 'descending';\n\nexport type TableContextValues = {\n  table: TableContextValue;\n};\n\n/**\n * Table Props\n */\nexport type TableProps = ComponentProps<TableSlots> & Partial<TableContextValue>;\n\n/**\n * State used in rendering Table\n */\nexport type TableState = ComponentState<TableSlots> &\n  Pick<Required<TableProps>, 'size' | 'noNativeElements'> &\n  TableContextValue;\n"]}

package/lib/components/Table/useTableContextValues.js

@@ -1,15 +1,17 @@
+import * as React from 'react';
 export function useTableContextValues_unstable(state) {
   const {
     size,
     noNativeElements,
     sortable
   } = state;
+  const tableContext = React.useMemo(() => ({
+    noNativeElements,
+    size,
+    sortable
+  }), [noNativeElements, size, sortable]);
   return {
-    table: {
-      noNativeElements,
-      size,
-      sortable
-    }
+    table: tableContext
   };
 }
 //# sourceMappingURL=useTableContextValues.js.map

package/lib/components/Table/useTableContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Table/useTableContextValues.ts"],"names":[],"mappings":"AAEA,OAAM,SAAU,8BAAV,CAAyC,KAAzC,EAA0D;EAC9D,MAAM;IAAE,IAAF;IAAQ,gBAAR;IAA0B;EAA1B,IAAuC,KAA7C;EAEA,OAAO;IACL,KAAK,EAAE;MACL,gBADK;MAEL,IAFK;MAGL;IAHK;EADF,CAAP;AAOD","sourcesContent":["import { TableContextValues, TableState } from './Table.types';\n\nexport function useTableContextValues_unstable(state: TableState): TableContextValues {\n  const { size, noNativeElements, sortable } = state;\n\n  return {\n    table: {\n      noNativeElements,\n      size,\n      sortable,\n    },\n  };\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Table/useTableContextValues.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA,OAAM,SAAU,8BAAV,CAAyC,KAAzC,EAA0D;EAC9D,MAAM;IAAE,IAAF;IAAQ,gBAAR;IAA0B;EAA1B,IAAuC,KAA7C;EAEA,MAAM,YAAY,GAAG,KAAK,CAAC,OAAN,CACnB,OAAO;IACL,gBADK;IAEL,IAFK;IAGL;EAHK,CAAP,CADmB,EAMnB,CAAC,gBAAD,EAAmB,IAAnB,EAAyB,QAAzB,CANmB,CAArB;EASA,OAAO;IACL,KAAK,EAAE;EADF,CAAP;AAGD","sourcesContent":["import * as React from 'react';\nimport { TableContextValues, TableState } from './Table.types';\n\nexport function useTableContextValues_unstable(state: TableState): TableContextValues {\n  const { size, noNativeElements, sortable } = state;\n\n  const tableContext = React.useMemo(\n    () => ({\n      noNativeElements,\n      size,\n      sortable,\n    }),\n    [noNativeElements, size, sortable],\n  );\n\n  return {\n    table: tableContext,\n  };\n}\n"],"sourceRoot":"../src/"}

package/lib/components/Table/useTableStyles.js

@@ -1,4 +1,5 @@
 import { __styles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
 export const tableClassName = 'fui-Table';
 export const tableClassNames = {
   root: 'fui-Table'
@@ -9,10 +10,14 @@ export const tableClassNames = {
 
 const useStyles = /*#__PURE__*/__styles({
   "root": {
-    "a9b677": "fly5x3f"
+    "ha4doy": "fmrv4ls",
+    "po53p8": "fgkb47j",
+    "a9b677": "fly5x3f",
+    "mc9l5x": "f1w4nmp0",
+    "De3pzq": "fxugw4r"
   }
 }, {
-  "d": [".fly5x3f{width:100%;}"]
+  "d": [".fmrv4ls{vertical-align:middle;}", ".fgkb47j{border-collapse:collapse;}", ".fly5x3f{width:100%;}", ".f1w4nmp0{display:table;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}"]
 });
 /**
  * Apply styling to the Table slots based on the state

package/lib/components/Table/useTableStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Table/useTableStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AAIA,OAAO,MAAM,cAAc,GAAG,WAAvB;AACP,OAAO,MAAM,eAAe,GAA+B;EACzD,IAAI,EAAE;AADmD,CAApD;AAIP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAMA;;AAEG;;;AACH,OAAO,MAAM,uBAAuB,GAAI,KAAD,IAAkC;EACvE,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,cAAD,EAAiB,MAAM,CAAC,IAAxB,EAA8B,KAAK,CAAC,IAAN,CAAW,SAAzC,CAAnC;EAEA,OAAO,KAAP;AACD,CALM","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { TableSlots, TableState } from './Table.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tableClassName = 'fui-Table';\nexport const tableClassNames: SlotClassNames<TableSlots> = {\n  root: 'fui-Table',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    width: '100%',\n  },\n});\n\n/**\n * Apply styling to the Table slots based on the state\n */\nexport const useTableStyles_unstable = (state: TableState): TableState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(tableClassName, styles.root, state.root.className);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Table/useTableStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAIA,OAAO,MAAM,cAAc,GAAG,WAAvB;AACP,OAAO,MAAM,eAAe,GAA+B;EACzD,IAAI,EAAE;AADmD,CAApD;AAIP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAUA;;AAEG;;;AACH,OAAO,MAAM,uBAAuB,GAAI,KAAD,IAAkC;EACvE,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,cAAD,EAAiB,MAAM,CAAC,IAAxB,EAA8B,KAAK,CAAC,IAAN,CAAW,SAAzC,CAAnC;EAEA,OAAO,KAAP;AACD,CALM","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TableSlots, TableState } from './Table.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tableClassName = 'fui-Table';\nexport const tableClassNames: SlotClassNames<TableSlots> = {\n  root: 'fui-Table',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    verticalAlign: 'middle',\n    borderCollapse: 'collapse',\n    width: '100%',\n    display: 'table',\n    backgroundColor: tokens.colorNeutralBackground1,\n  },\n});\n\n/**\n * Apply styling to the Table slots based on the state\n */\nexport const useTableStyles_unstable = (state: TableState): TableState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(tableClassName, styles.root, state.root.className);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/TableBody/useTableBody.js

@@ -13,7 +13,9 @@ import { useTableContext } from '../../contexts/tableContext';
 export const useTableBody_unstable = (props, ref) => {
   var _a;
 
-  const noNativeElements = useTableContext(ctx => ctx.noNativeElements);
+  const {
+    noNativeElements
+  } = useTableContext();
   const rootComponent = ((_a = props.as) !== null && _a !== void 0 ? _a : noNativeElements) ? 'div' : 'tbody';
   return {
     components: {

package/lib/components/TableBody/useTableBody.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/TableBody/useTableBody.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAEA,SAAS,eAAT,QAAgC,6BAAhC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,qBAAqB,GAAG,CAAC,KAAD,EAAwB,GAAxB,KAAuE;;;EAC1G,MAAM,gBAAgB,GAAG,eAAe,CAAC,GAAG,IAAI,GAAG,CAAC,gBAAZ,CAAxC;EACA,MAAM,aAAa,GAAG,CAAA,CAAA,EAAA,GAAA,KAAK,CAAC,EAAN,MAAQ,IAAR,IAAQ,EAAA,KAAA,KAAA,CAAR,GAAQ,EAAR,GAAY,gBAAZ,IAA+B,KAA/B,GAAuC,OAA7D;EAEA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CADP;IAIL,IAAI,EAAE,qBAAqB,CAAC,aAAD,EAAgB;MACzC,GADyC;MAEzC,IAAI,EAAE,aAAa,KAAK,KAAlB,GAA0B,UAA1B,GAAuC,SAFJ;MAGzC,GAAG;IAHsC,CAAhB;EAJtB,CAAP;AAUD,CAdM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { TableBodyProps, TableBodyState } from './TableBody.types';\nimport { useTableContext } from '../../contexts/tableContext';\n\n/**\n * Create the state required to render TableBody.\n *\n * The returned state can be modified with hooks such as useTableBodyStyles_unstable,\n * before being passed to renderTableBody_unstable.\n *\n * @param props - props from this instance of TableBody\n * @param ref - reference to root HTMLElement of TableBody\n */\nexport const useTableBody_unstable = (props: TableBodyProps, ref: React.Ref<HTMLElement>): TableBodyState => {\n  const noNativeElements = useTableContext(ctx => ctx.noNativeElements);\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'tbody';\n\n  return {\n    components: {\n      root: rootComponent,\n    },\n    root: getNativeElementProps(rootComponent, {\n      ref,\n      role: rootComponent === 'div' ? 'rowgroup' : undefined,\n      ...props,\n    }),\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/TableBody/useTableBody.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAEA,SAAS,eAAT,QAAgC,6BAAhC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,qBAAqB,GAAG,CAAC,KAAD,EAAwB,GAAxB,KAAuE;;;EAC1G,MAAM;IAAE;EAAF,IAAuB,eAAe,EAA5C;EACA,MAAM,aAAa,GAAG,CAAA,CAAA,EAAA,GAAA,KAAK,CAAC,EAAN,MAAQ,IAAR,IAAQ,EAAA,KAAA,KAAA,CAAR,GAAQ,EAAR,GAAY,gBAAZ,IAA+B,KAA/B,GAAuC,OAA7D;EAEA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CADP;IAIL,IAAI,EAAE,qBAAqB,CAAC,aAAD,EAAgB;MACzC,GADyC;MAEzC,IAAI,EAAE,aAAa,KAAK,KAAlB,GAA0B,UAA1B,GAAuC,SAFJ;MAGzC,GAAG;IAHsC,CAAhB;EAJtB,CAAP;AAUD,CAdM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { TableBodyProps, TableBodyState } from './TableBody.types';\nimport { useTableContext } from '../../contexts/tableContext';\n\n/**\n * Create the state required to render TableBody.\n *\n * The returned state can be modified with hooks such as useTableBodyStyles_unstable,\n * before being passed to renderTableBody_unstable.\n *\n * @param props - props from this instance of TableBody\n * @param ref - reference to root HTMLElement of TableBody\n */\nexport const useTableBody_unstable = (props: TableBodyProps, ref: React.Ref<HTMLElement>): TableBodyState => {\n  const { noNativeElements } = useTableContext();\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'tbody';\n\n  return {\n    components: {\n      root: rootComponent,\n    },\n    root: getNativeElementProps(rootComponent, {\n      ref,\n      role: rootComponent === 'div' ? 'rowgroup' : undefined,\n      ...props,\n    }),\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib/components/TableBody/useTableBodyStyles.js

@@ -1,4 +1,13 @@
-import { mergeClasses } from '@griffel/react';
+import { mergeClasses, __styles } from '@griffel/react';
+
+const useStyles = /*#__PURE__*/__styles({
+  "root": {
+    "mc9l5x": "f1tp1avn"
+  }
+}, {
+  "d": [".f1tp1avn{display:table-row-group;}"]
+});
+
 export const tableBodyClassName = 'fui-TableBody';
 export const tableBodyClassNames = {
   root: 'fui-TableBody'
@@ -8,7 +17,8 @@ export const tableBodyClassNames = {
  */
 
 export const useTableBodyStyles_unstable = state => {
-  state.root.className = mergeClasses(tableBodyClassName, state.root.className);
+  const styles = useStyles();
+  state.root.className = mergeClasses(tableBodyClassName, styles.root, state.root.className);
   return state;
 };
 //# sourceMappingURL=useTableBodyStyles.js.map

package/lib/components/TableBody/useTableBodyStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/TableBody/useTableBodyStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,QAA6B,gBAA7B;AAIA,OAAO,MAAM,kBAAkB,GAAG,eAA3B;AACP,OAAO,MAAM,mBAAmB,GAAmC;EACjE,IAAI,EAAE;AAD2D,CAA5D;AAIP;;AAEG;;AACH,OAAO,MAAM,2BAA2B,GAAI,KAAD,IAA0C;EACnF,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,kBAAD,EAAqB,KAAK,CAAC,IAAN,CAAW,SAAhC,CAAnC;EAEA,OAAO,KAAP;AACD,CAJM","sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport type { TableBodySlots, TableBodyState } from './TableBody.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tableBodyClassName = 'fui-TableBody';\nexport const tableBodyClassNames: SlotClassNames<TableBodySlots> = {\n  root: 'fui-TableBody',\n};\n\n/**\n * Apply styling to the TableBody slots based on the state\n */\nexport const useTableBodyStyles_unstable = (state: TableBodyState): TableBodyState => {\n  state.root.className = mergeClasses(tableBodyClassName, state.root.className);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/TableBody/useTableBodyStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,kBAAyC,gBAAzC;;AAIA,MAAM,SAAS,gBAAG;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;;AAMA,OAAO,MAAM,kBAAkB,GAAG,eAA3B;AACP,OAAO,MAAM,mBAAmB,GAAmC;EACjE,IAAI,EAAE;AAD2D,CAA5D;AAIP;;AAEG;;AACH,OAAO,MAAM,2BAA2B,GAAI,KAAD,IAA0C;EACnF,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,kBAAD,EAAqB,MAAM,CAAC,IAA5B,EAAkC,KAAK,CAAC,IAAN,CAAW,SAA7C,CAAnC;EAEA,OAAO,KAAP;AACD,CALM","sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport type { TableBodySlots, TableBodyState } from './TableBody.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'table-row-group',\n  },\n});\n\nexport const tableBodyClassName = 'fui-TableBody';\nexport const tableBodyClassNames: SlotClassNames<TableBodySlots> = {\n  root: 'fui-TableBody',\n};\n\n/**\n * Apply styling to the TableBody slots based on the state\n */\nexport const useTableBodyStyles_unstable = (state: TableBodyState): TableBodyState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(tableBodyClassName, styles.root, state.root.className);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/TableCell/TableCell.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableCell.types.js","sourceRoot":"../src/","sources":["components/TableCell/TableCell.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type TableCellSlots = {\n  root: Slot<'td', 'div'>;\n\n  media?: Slot<'span'>;\n};\n\n/**\n * TableCell Props\n */\nexport type TableCellProps = ComponentProps<TableCellSlots> & {};\n\n/**\n * State used in rendering TableCell\n */\nexport type TableCellState = ComponentState<TableCellSlots>;\n"]}
+{"version":3,"file":"TableCell.types.js","sourceRoot":"../src/","sources":["components/TableCell/TableCell.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type TableCellSlots = {\n  root: Slot<'td', 'div'>;\n};\n\n/**\n * TableCell Props\n */\nexport type TableCellProps = ComponentProps<TableCellSlots> & {};\n\n/**\n * State used in rendering TableCell\n */\nexport type TableCellState = ComponentState<TableCellSlots>;\n"]}

package/lib/components/TableCell/renderTableCell.js

@@ -8,10 +8,8 @@ export const renderTableCell_unstable = state => {
   const {
     slots,
     slotProps
-  } = getSlots(state); // TODO Add additional slots in the appropriate place
-
+  } = getSlots(state);
   return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
-  }, slots.media && /*#__PURE__*/React.createElement(slots.media, { ...slotProps.media
-  }), " ", slotProps.root.children);
+  });
 };
 //# sourceMappingURL=renderTableCell.js.map

package/lib/components/TableCell/renderTableCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/TableCell/renderTableCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,wBAAwB,GAAI,KAAD,IAA0B;EAChE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAiB,KAAjB,CAArC,CADgE,CAGhE;;EACA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,KAAN,iBAAe,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CADlB,E,GAAA,EACyD,SAAS,CAAC,IAAV,CAAe,QADxE,CADF;AAKD,CATM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TableCellState, TableCellSlots } from './TableCell.types';\n\n/**\n * Render the final JSX of TableCell\n */\nexport const renderTableCell_unstable = (state: TableCellState) => {\n  const { slots, slotProps } = getSlots<TableCellSlots>(state);\n\n  // TODO Add additional slots in the appropriate place\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.media && <slots.media {...slotProps.media} />} {slotProps.root.children}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/TableCell/renderTableCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,wBAAwB,GAAI,KAAD,IAA0B;EAChE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAiB,KAAjB,CAArC;EAEA,oBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAAP;AACD,CAJM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TableCellState, TableCellSlots } from './TableCell.types';\n\n/**\n * Render the final JSX of TableCell\n */\nexport const renderTableCell_unstable = (state: TableCellState) => {\n  const { slots, slotProps } = getSlots<TableCellSlots>(state);\n\n  return <slots.root {...slotProps.root} />;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/TableCell/useTableCell.js

@@ -1,4 +1,4 @@
-import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
+import { getNativeElementProps } from '@fluentui/react-utilities';
 import { useTableContext } from '../../contexts/tableContext';
 /**
  * Create the state required to render TableCell.
@@ -13,14 +13,14 @@ import { useTableContext } from '../../contexts/tableContext';
 export const useTableCell_unstable = (props, ref) => {
   var _a;
 
-  const noNativeElements = useTableContext(ctx => ctx.noNativeElements);
+  const {
+    noNativeElements
+  } = useTableContext();
   const rootComponent = ((_a = props.as) !== null && _a !== void 0 ? _a : noNativeElements) ? 'div' : 'td';
   return {
     components: {
-      root: rootComponent,
-      media: 'span'
+      root: rootComponent
     },
-    media: resolveShorthand(props.media),
     root: getNativeElementProps(rootComponent, {
       ref,
       role: rootComponent === 'div' ? 'cell' : undefined,