@fluentui/react-table 9.0.0-rc.3 → 9.0.0-rc.5

package/CHANGELOG.json

@@ -2,7 +2,103 @@
   "name": "@fluentui/react-table",
   "entries": [
     {
-      "date": "Thu, 26 Jan 2023 13:27:51 GMT",
+      "date": "Tue, 07 Feb 2023 14:10:44 GMT",
+      "tag": "@fluentui/react-table_v9.0.0-rc.5",
+      "version": "9.0.0-rc.5",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-table",
+            "commit": "0b35790d67cad33bd1d52d2418fcca6ef8b4a710",
+            "comment": "feat: exports `useDataGridContextValues_unstable`"
+          },
+          {
+            "author": "jirivyhnalek@microsoft.com",
+            "package": "@fluentui/react-table",
+            "commit": "c625afa508c0dead93ea2d3cb698b41dc67ec187",
+            "comment": "Add support for column resizing"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-avatar to v9.3.2",
+            "commit": "8a1405562b3328c408f15e3bf511d3eb6a0c0e66"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-checkbox to v9.0.25",
+            "commit": "8a1405562b3328c408f15e3bf511d3eb6a0c0e66"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-radio to v9.0.23",
+            "commit": "8a1405562b3328c408f15e3bf511d3eb6a0c0e66"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-tabster to v9.5.0",
+            "commit": "8a1405562b3328c408f15e3bf511d3eb6a0c0e66"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 31 Jan 2023 19:53:58 GMT",
+      "tag": "@fluentui/react-table_v9.0.0-rc.4",
+      "version": "9.0.0-rc.4",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-aria to v9.3.7",
+            "commit": "794d9e845cb952f597ba786e70cd8d248be62746"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-avatar to v9.3.1",
+            "commit": "794d9e845cb952f597ba786e70cd8d248be62746"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-checkbox to v9.0.24",
+            "commit": "794d9e845cb952f597ba786e70cd8d248be62746"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.7",
+            "commit": "794d9e845cb952f597ba786e70cd8d248be62746"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-radio to v9.0.22",
+            "commit": "794d9e845cb952f597ba786e70cd8d248be62746"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-tabster to v9.4.2",
+            "commit": "794d9e845cb952f597ba786e70cd8d248be62746"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-utilities to v9.5.1",
+            "commit": "794d9e845cb952f597ba786e70cd8d248be62746"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 26 Jan 2023 13:31:01 GMT",
       "tag": "@fluentui/react-table_v9.0.0-rc.3",
       "version": "9.0.0-rc.3",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,41 @@
 # Change Log - @fluentui/react-table
 
-This log was last generated on Thu, 26 Jan 2023 13:27:51 GMT and should not be manually modified.
+This log was last generated on Tue, 07 Feb 2023 14:10:44 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-rc.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.0.0-rc.5)
+
+Tue, 07 Feb 2023 14:10:44 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.0.0-rc.4..@fluentui/react-table_v9.0.0-rc.5)
+
+### Changes
+
+- feat: exports `useDataGridContextValues_unstable` ([PR #26627](https://github.com/microsoft/fluentui/pull/26627) by lingfangao@hotmail.com)
+- Add support for column resizing ([PR #26477](https://github.com/microsoft/fluentui/pull/26477) by jirivyhnalek@microsoft.com)
+- Bump @fluentui/react-avatar to v9.3.2 ([PR #26732](https://github.com/microsoft/fluentui/pull/26732) by beachball)
+- Bump @fluentui/react-checkbox to v9.0.25 ([PR #26732](https://github.com/microsoft/fluentui/pull/26732) by beachball)
+- Bump @fluentui/react-radio to v9.0.23 ([PR #26732](https://github.com/microsoft/fluentui/pull/26732) by beachball)
+- Bump @fluentui/react-tabster to v9.5.0 ([PR #26732](https://github.com/microsoft/fluentui/pull/26732) by beachball)
+
+## [9.0.0-rc.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.0.0-rc.4)
+
+Tue, 31 Jan 2023 19:53:58 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.0.0-rc.3..@fluentui/react-table_v9.0.0-rc.4)
+
+### Changes
+
+- Bump @fluentui/react-aria to v9.3.7 ([PR #26557](https://github.com/microsoft/fluentui/pull/26557) by beachball)
+- Bump @fluentui/react-avatar to v9.3.1 ([PR #26557](https://github.com/microsoft/fluentui/pull/26557) by beachball)
+- Bump @fluentui/react-checkbox to v9.0.24 ([PR #26557](https://github.com/microsoft/fluentui/pull/26557) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.7 ([PR #26557](https://github.com/microsoft/fluentui/pull/26557) by beachball)
+- Bump @fluentui/react-radio to v9.0.22 ([PR #26557](https://github.com/microsoft/fluentui/pull/26557) by beachball)
+- Bump @fluentui/react-tabster to v9.4.2 ([PR #26557](https://github.com/microsoft/fluentui/pull/26557) by beachball)
+- Bump @fluentui/react-utilities to v9.5.1 ([PR #26557](https://github.com/microsoft/fluentui/pull/26557) by beachball)
+
 ## [9.0.0-rc.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.0.0-rc.3)
 
-Thu, 26 Jan 2023 13:27:51 GMT 
+Thu, 26 Jan 2023 13:31:01 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.0.0-rc.2..@fluentui/react-table_v9.0.0-rc.3)
 
 ### Changes

package/dist/index.d.ts

@@ -15,6 +15,18 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 
 export declare type CellRenderFunction<TItem = unknown> = (column: TableColumnDefinition<TItem>) => React_2.ReactNode;
 
+declare type ColumnSizingTableCellProps = Pick<TableHeaderCellProps, 'style'>;
+
+declare type ColumnSizingTableHeaderCellProps = Pick<TableHeaderCellProps, 'style' | 'aside'>;
+
+declare interface ColumnWidthState {
+    columnId: TableColumnId;
+    width: number;
+    minWidth: number;
+    idealWidth: number;
+    padding: number;
+}
+
 /**
  * Helper function to create column definition with defaults
  * @param options - column definition options
@@ -296,6 +308,11 @@ export declare const renderTableHeader_unstable: (state: TableHeaderState) => JS
  */
 export declare const renderTableHeaderCell_unstable: (state: TableHeaderCellState) => JSX.Element;
 
+/**
+ * Render the final JSX of TableResizeHandle
+ */
+export declare const renderTableResizeHandle_unstable: (state: TableResizeHandleState) => JSX.Element;
+
 /**
  * Render the final JSX of TableRow
  */
@@ -461,6 +478,18 @@ export declare interface TableColumnDefinition<TItem> {
 
 export declare type TableColumnId = string | number;
 
+export declare type TableColumnSizingOptions = Record<TableColumnId, Partial<Pick<ColumnWidthState, 'minWidth' | 'idealWidth' | 'padding'>> & {
+    defaultWidth?: number;
+}>;
+
+declare interface TableColumnSizingState {
+    getOnMouseDown: (columnId: TableColumnId) => (e: React_2.MouseEvent<HTMLElement>) => void;
+    setColumnWidth: (columnId: TableColumnId, newSize: number) => void;
+    getColumnWidths: () => ColumnWidthState[];
+    getTableHeaderCellProps: (columnId: TableColumnId) => ColumnSizingTableHeaderCellProps;
+    getTableCellProps: (columnId: TableColumnId) => ColumnSizingTableCellProps;
+}
+
 export declare const TableContextProvider: React_2.Provider<TableContextValue | undefined>;
 
 export declare type TableContextValue = {
@@ -506,6 +535,15 @@ export declare interface TableFeaturesState<TItem> extends Pick<UseTableFeatures
      * Table columns
      */
     columns: TableColumnDefinition<TItem>[];
+    /**
+     * State and actions to manage column resizing
+     */
+    columnSizing_unstable: TableColumnSizingState;
+    /**
+     * A React.Ref object to be set as a ref for the table.
+     * Used with column resizing.
+     */
+    tableRef: React_2.Ref<HTMLDivElement>;
 }
 
 /**
@@ -539,6 +577,10 @@ export declare type TableHeaderCellSlots = {
      * Button handles correct narration and interactions for sorting;
      */
     button: NonNullable<Slot<ARIAButtonSlotProps>>;
+    /**
+     * aside content for anything that should be after main content of the table header cell
+     */
+    aside: Slot<'span'>;
 };
 
 /**
@@ -569,6 +611,27 @@ export declare type TableHeaderState = ComponentState<TableHeaderSlots> & Pick<T
  */
 export declare type TableProps = ComponentProps<TableSlots> & Partial<TableContextValue>;
 
+/**
+ * TableResizeHandle component - TODO: add more docs
+ */
+export declare const TableResizeHandle: ForwardRefComponent<TableResizeHandleProps>;
+
+export declare const tableResizeHandleClassNames: SlotClassNames<TableResizeHandleSlots>;
+
+/**
+ * TableResizeHandle Props
+ */
+export declare type TableResizeHandleProps = ComponentProps<TableResizeHandleSlots> & {};
+
+export declare type TableResizeHandleSlots = {
+    root: Slot<'div'>;
+};
+
+/**
+ * State used in rendering TableResizeHandle
+ */
+export declare type TableResizeHandleState = ComponentState<TableResizeHandleSlots>;
+
 /**
  * TableRow component
  */
@@ -784,6 +847,8 @@ export declare const useDataGridCell_unstable: (props: DataGridCellProps, ref: R
  */
 export declare const useDataGridCellStyles_unstable: (state: DataGridCellState) => DataGridCellState;
 
+export declare function useDataGridContextValues_unstable(state: DataGridState): DataGridContextValues;
+
 /**
  * Create the state required to render DataGridHeader.
  *
@@ -928,6 +993,13 @@ export declare const useTableCellLayoutStyles_unstable: (state: TableCellLayoutS
  */
 export declare const useTableCellStyles_unstable: (state: TableCellState) => TableCellState;
 
+export declare function useTableColumnSizing_unstable<TItem>(params?: UseTableColumnSizingParams): (tableState: TableFeaturesState<TItem>) => TableFeaturesState<TItem>;
+
+declare type UseTableColumnSizingParams = {
+    columnSizingOptions?: TableColumnSizingOptions;
+    onColumnResize?: (columnId: TableColumnId, width: number) => void;
+};
+
 export declare const useTableContext: () => TableContextValue;
 
 export declare function useTableFeatures<TItem>(options: UseTableFeaturesOptions<TItem>, plugins?: TableFeaturePlugin[]): TableFeaturesState<TItem>;
@@ -970,6 +1042,22 @@ export declare const useTableHeaderCellStyles_unstable: (state: TableHeaderCellS
  */
 export declare const useTableHeaderStyles_unstable: (state: TableHeaderState) => TableHeaderState;
 
+/**
+ * Create the state required to render TableResizeHandle.
+ *
+ * The returned state can be modified with hooks such as useTableResizeHandleStyles_unstable,
+ * before being passed to renderTableResizeHandle_unstable.
+ *
+ * @param props - props from this instance of TableResizeHandle
+ * @param ref - reference to root HTMLElement of TableResizeHandle
+ */
+export declare const useTableResizeHandle_unstable: (props: TableResizeHandleProps, ref: React_2.Ref<HTMLElement>) => TableResizeHandleState;
+
+/**
+ * Apply styling to the TableResizeHandle slots based on the state
+ */
+export declare const useTableResizeHandleStyles_unstable: (state: TableResizeHandleState) => TableResizeHandleState;
+
 /**
  * Create the state required to render TableRow.
  *

package/lib/TableResizeHandle.js

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

package/lib/TableResizeHandle.js.map

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

package/lib/components/DataGrid/index.js

@@ -3,4 +3,5 @@ export * from './DataGrid.types';
 export * from './renderDataGrid';
 export * from './useDataGrid';
 export * from './useDataGridStyles';
+export * from './useDataGridContextValues';
 //# sourceMappingURL=index.js.map

package/lib/components/DataGrid/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGrid/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC","sourcesContent":["export * from './DataGrid';\nexport * from './DataGrid.types';\nexport * from './renderDataGrid';\nexport * from './useDataGrid';\nexport * from './useDataGridStyles';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGrid/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,4BAA4B,CAAC","sourcesContent":["export * from './DataGrid';\nexport * from './DataGrid.types';\nexport * from './renderDataGrid';\nexport * from './useDataGrid';\nexport * from './useDataGridStyles';\nexport * from './useDataGridContextValues';\n"]}

package/lib/components/DataGridHeaderCell/useDataGridHeaderCellStyles.js

@@ -3,7 +3,8 @@ import { useTableHeaderCellStyles_unstable } from '../TableHeaderCell/useTableHe
 export const dataGridHeaderCellClassNames = {
   root: 'fui-DataGridHeaderCell',
   button: 'fui-DataGridHeaderCell__button',
-  sortIcon: 'fui-DataGridHeaderCell__sortIcon'
+  sortIcon: 'fui-DataGridHeaderCell__sortIcon',
+  aside: 'fui-DataGridHeaderCell__aside'
 };
 /**
  * Apply styling to the DataGridHeaderCell slots based on the state
@@ -17,6 +18,9 @@ export const useDataGridHeaderCellStyles_unstable = state => {
   if (state.sortIcon) {
     state.sortIcon.className = mergeClasses(dataGridHeaderCellClassNames.sortIcon, state.sortIcon.className);
   }
+  if (state.aside) {
+    state.aside.className = mergeClasses(dataGridHeaderCellClassNames.aside, state.aside.className);
+  }
   return state;
 };
 //# sourceMappingURL=useDataGridHeaderCellStyles.js.map

package/lib/components/DataGridHeaderCell/useDataGridHeaderCellStyles.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,SAASA,YAAY,QAAQ,gBAAgB;AAG7C,SAASC,iCAAiC,QAAQ,6CAA6C;AAE/F,OAAO,MAAMC,4BAA4B,GAA4C;EACnFC,IAAI,EAAE,wBAAwB;EAC9BC,MAAM,EAAE,gCAAgC;EACxCC,QAAQ,EAAE;CACX;AAED;;;AAGA,OAAO,MAAMC,oCAAoC,GAAIC,KAA8B,IAA6B;EAC9GN,iCAAiC,CAACM,KAAK,CAAC;EACxCA,KAAK,CAACJ,IAAI,CAACK,SAAS,GAAGR,YAAY,CAACE,4BAA4B,CAACC,IAAI,EAAEI,KAAK,CAACJ,IAAI,CAACK,SAAS,CAAC;EAE5F,IAAID,KAAK,CAACH,MAAM,EAAE;IAChBG,KAAK,CAACH,MAAM,CAACI,SAAS,GAAGR,YAAY,CAACE,4BAA4B,CAACE,MAAM,EAAEG,KAAK,CAACH,MAAM,CAACI,SAAS,CAAC;;EAGpG,IAAID,KAAK,CAACF,QAAQ,EAAE;IAClBE,KAAK,CAACF,QAAQ,CAACG,SAAS,GAAGR,YAAY,CAACE,4BAA4B,CAACG,QAAQ,EAAEE,KAAK,CAACF,QAAQ,CAACG,SAAS,CAAC;;EAG1G,OAAOD,KAAK;AACd,CAAC","names":["mergeClasses","useTableHeaderCellStyles_unstable","dataGridHeaderCellClassNames","root","button","sortIcon","useDataGridHeaderCellStyles_unstable","state","className"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridHeaderCell/useDataGridHeaderCellStyles.ts"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport type { DataGridHeaderCellSlots, DataGridHeaderCellState } from './DataGridHeaderCell.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTableHeaderCellStyles_unstable } from '../TableHeaderCell/useTableHeaderCellStyles';\n\nexport const dataGridHeaderCellClassNames: SlotClassNames<DataGridHeaderCellSlots> = {\n  root: 'fui-DataGridHeaderCell',\n  button: 'fui-DataGridHeaderCell__button',\n  sortIcon: 'fui-DataGridHeaderCell__sortIcon',\n};\n\n/**\n * Apply styling to the DataGridHeaderCell slots based on the state\n */\nexport const useDataGridHeaderCellStyles_unstable = (state: DataGridHeaderCellState): DataGridHeaderCellState => {\n  useTableHeaderCellStyles_unstable(state);\n  state.root.className = mergeClasses(dataGridHeaderCellClassNames.root, state.root.className);\n\n  if (state.button) {\n    state.button.className = mergeClasses(dataGridHeaderCellClassNames.button, state.button.className);\n  }\n\n  if (state.sortIcon) {\n    state.sortIcon.className = mergeClasses(dataGridHeaderCellClassNames.sortIcon, state.sortIcon.className);\n  }\n\n  return state;\n};\n"]}
+{"version":3,"mappings":"AAAA,SAASA,YAAY,QAAQ,gBAAgB;AAG7C,SAASC,iCAAiC,QAAQ,6CAA6C;AAE/F,OAAO,MAAMC,4BAA4B,GAA4C;EACnFC,IAAI,EAAE,wBAAwB;EAC9BC,MAAM,EAAE,gCAAgC;EACxCC,QAAQ,EAAE,kCAAkC;EAC5CC,KAAK,EAAE;CACR;AAED;;;AAGA,OAAO,MAAMC,oCAAoC,GAAIC,KAA8B,IAA6B;EAC9GP,iCAAiC,CAACO,KAAK,CAAC;EACxCA,KAAK,CAACL,IAAI,CAACM,SAAS,GAAGT,YAAY,CAACE,4BAA4B,CAACC,IAAI,EAAEK,KAAK,CAACL,IAAI,CAACM,SAAS,CAAC;EAE5F,IAAID,KAAK,CAACJ,MAAM,EAAE;IAChBI,KAAK,CAACJ,MAAM,CAACK,SAAS,GAAGT,YAAY,CAACE,4BAA4B,CAACE,MAAM,EAAEI,KAAK,CAACJ,MAAM,CAACK,SAAS,CAAC;;EAGpG,IAAID,KAAK,CAACH,QAAQ,EAAE;IAClBG,KAAK,CAACH,QAAQ,CAACI,SAAS,GAAGT,YAAY,CAACE,4BAA4B,CAACG,QAAQ,EAAEG,KAAK,CAACH,QAAQ,CAACI,SAAS,CAAC;;EAG1G,IAAID,KAAK,CAACF,KAAK,EAAE;IACfE,KAAK,CAACF,KAAK,CAACG,SAAS,GAAGT,YAAY,CAACE,4BAA4B,CAACI,KAAK,EAAEE,KAAK,CAACF,KAAK,CAACG,SAAS,CAAC;;EAGjG,OAAOD,KAAK;AACd,CAAC","names":["mergeClasses","useTableHeaderCellStyles_unstable","dataGridHeaderCellClassNames","root","button","sortIcon","aside","useDataGridHeaderCellStyles_unstable","state","className"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridHeaderCell/useDataGridHeaderCellStyles.ts"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport type { DataGridHeaderCellSlots, DataGridHeaderCellState } from './DataGridHeaderCell.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTableHeaderCellStyles_unstable } from '../TableHeaderCell/useTableHeaderCellStyles';\n\nexport const dataGridHeaderCellClassNames: SlotClassNames<DataGridHeaderCellSlots> = {\n  root: 'fui-DataGridHeaderCell',\n  button: 'fui-DataGridHeaderCell__button',\n  sortIcon: 'fui-DataGridHeaderCell__sortIcon',\n  aside: 'fui-DataGridHeaderCell__aside',\n};\n\n/**\n * Apply styling to the DataGridHeaderCell slots based on the state\n */\nexport const useDataGridHeaderCellStyles_unstable = (state: DataGridHeaderCellState): DataGridHeaderCellState => {\n  useTableHeaderCellStyles_unstable(state);\n  state.root.className = mergeClasses(dataGridHeaderCellClassNames.root, state.root.className);\n\n  if (state.button) {\n    state.button.className = mergeClasses(dataGridHeaderCellClassNames.button, state.button.className);\n  }\n\n  if (state.sortIcon) {\n    state.sortIcon.className = mergeClasses(dataGridHeaderCellClassNames.sortIcon, state.sortIcon.className);\n  }\n\n  if (state.aside) {\n    state.aside.className = mergeClasses(dataGridHeaderCellClassNames.aside, state.aside.className);\n  }\n\n  return state;\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"TableHeaderCell.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableHeaderCell/TableHeaderCell.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport { SortDirection, TableContextValue } from '../Table/Table.types';\n\nexport type TableHeaderCellSlots = {\n  root: Slot<'th', 'div'>;\n\n  sortIcon: Slot<'span'>;\n\n  /**\n   * Button handles correct narration and interactions for sorting;\n   */\n  button: NonNullable<Slot<ARIAButtonSlotProps>>;\n};\n\n/**\n * TableHeaderCell Props\n */\nexport type TableHeaderCellProps = ComponentProps<Partial<TableHeaderCellSlots>> & {\n  /**\n   * @default undefined\n   */\n  sortDirection?: SortDirection;\n};\n\n/**\n * State used in rendering TableHeaderCell\n */\nexport type TableHeaderCellState = ComponentState<TableHeaderCellSlots> &\n  Pick<TableContextValue, 'noNativeElements' | 'sortable'>;\n"]}
+{"version":3,"file":"TableHeaderCell.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableHeaderCell/TableHeaderCell.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport { SortDirection, TableContextValue } from '../Table/Table.types';\n\nexport type TableHeaderCellSlots = {\n  root: Slot<'th', 'div'>;\n\n  sortIcon: Slot<'span'>;\n\n  /**\n   * Button handles correct narration and interactions for sorting;\n   */\n  button: NonNullable<Slot<ARIAButtonSlotProps>>;\n  /**\n   * aside content for anything that should be after main content of the table header cell\n   */\n  aside: Slot<'span'>;\n};\n\n/**\n * TableHeaderCell Props\n */\nexport type TableHeaderCellProps = ComponentProps<Partial<TableHeaderCellSlots>> & {\n  /**\n   * @default undefined\n   */\n  sortDirection?: SortDirection;\n};\n\n/**\n * State used in rendering TableHeaderCell\n */\nexport type TableHeaderCellState = ComponentState<TableHeaderCellSlots> &\n  Pick<TableContextValue, 'noNativeElements' | 'sortable'>;\n"]}

package/lib/components/TableHeaderCell/renderTableHeaderCell.js

@@ -14,6 +14,8 @@ export const renderTableHeaderCell_unstable = state => {
     ...slotProps.button
   }, slotProps.root.children, slots.sortIcon && /*#__PURE__*/React.createElement(slots.sortIcon, {
     ...slotProps.sortIcon
-  })));
+  })), slots.aside && /*#__PURE__*/React.createElement(slots.aside, {
+    ...slotProps.aside
+  }));
 };
 //# sourceMappingURL=renderTableHeaderCell.js.map

package/lib/components/TableHeaderCell/renderTableHeaderCell.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,8BAA8B,GAAIC,KAA2B,IAAI;EAC5E,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAuBE,KAAK,CAAC;EAElE,oBACEH,oBAACI,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,gBAC5BN,oBAACI,KAAK,CAACG,MAAM;IAAA,GAAKF,SAAS,CAACE;EAAM,GAC/BF,SAAS,CAACC,IAAI,CAACE,QAAQ,EACvBJ,KAAK,CAACK,QAAQ,iBAAIT,oBAACI,KAAK,CAACK,QAAQ;IAAA,GAAKJ,SAAS,CAACI;EAAQ,EAAI,CAChD,CACJ;AAEjB,CAAC","names":["React","getSlots","renderTableHeaderCell_unstable","state","slots","slotProps","root","button","children","sortIcon"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableHeaderCell/renderTableHeaderCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TableHeaderCellState, TableHeaderCellSlots } from './TableHeaderCell.types';\n\n/**\n * Render the final JSX of TableHeaderCell\n */\nexport const renderTableHeaderCell_unstable = (state: TableHeaderCellState) => {\n  const { slots, slotProps } = getSlots<TableHeaderCellSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.button {...slotProps.button}>\n        {slotProps.root.children}\n        {slots.sortIcon && <slots.sortIcon {...slotProps.sortIcon} />}\n      </slots.button>\n    </slots.root>\n  );\n};\n"]}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,8BAA8B,GAAIC,KAA2B,IAAI;EAC5E,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAuBE,KAAK,CAAC;EAElE,oBACEH,oBAACI,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,gBAC5BN,oBAACI,KAAK,CAACG,MAAM;IAAA,GAAKF,SAAS,CAACE;EAAM,GAC/BF,SAAS,CAACC,IAAI,CAACE,QAAQ,EACvBJ,KAAK,CAACK,QAAQ,iBAAIT,oBAACI,KAAK,CAACK,QAAQ;IAAA,GAAKJ,SAAS,CAACI;EAAQ,EAAI,CAChD,EACdL,KAAK,CAACM,KAAK,iBAAIV,oBAACI,KAAK,CAACM,KAAK;IAAA,GAAKL,SAAS,CAACK;EAAK,EAAI,CACzC;AAEjB,CAAC","names":["React","getSlots","renderTableHeaderCell_unstable","state","slots","slotProps","root","button","children","sortIcon","aside"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableHeaderCell/renderTableHeaderCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TableHeaderCellState, TableHeaderCellSlots } from './TableHeaderCell.types';\n\n/**\n * Render the final JSX of TableHeaderCell\n */\nexport const renderTableHeaderCell_unstable = (state: TableHeaderCellState) => {\n  const { slots, slotProps } = getSlots<TableHeaderCellSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.button {...slotProps.button}>\n        {slotProps.root.children}\n        {slots.sortIcon && <slots.sortIcon {...slotProps.sortIcon} />}\n      </slots.button>\n      {slots.aside && <slots.aside {...slotProps.aside} />}\n    </slots.root>\n  );\n};\n"]}

package/lib/components/TableHeaderCell/useTableHeaderCell.js

@@ -32,7 +32,8 @@ export const useTableHeaderCell_unstable = (props, ref) => {
     components: {
       root: rootComponent,
       button: 'button',
-      sortIcon: 'span'
+      sortIcon: 'span',
+      aside: 'span'
     },
     root: getNativeElementProps(rootComponent, {
       ref: useMergedRefs(ref, useFocusWithin()),
@@ -40,6 +41,7 @@ export const useTableHeaderCell_unstable = (props, ref) => {
       'aria-sort': sortable ? (_b = props.sortDirection) !== null && _b !== void 0 ? _b : 'none' : undefined,
       ...props
     }),
+    aside: resolveShorthand(props.aside),
     sortIcon: resolveShorthand(props.sortIcon, {
       required: !!props.sortDirection,
       defaultProps: {

package/lib/components/TableHeaderCell/useTableHeaderCell.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,2BAA2B;AAClG,SAASC,cAAc,QAAQ,yBAAyB;AACxD,SAASC,cAAc,EAAEC,gBAAgB,QAAQ,uBAAuB;AAExE,SAASC,eAAe,QAAQ,6BAA6B;AAC7D,SAASC,sBAAsB,QAAQ,sBAAsB;AAE7D,MAAMC,SAAS,GAAG;EAChBC,SAAS,eAAEV,oBAACK,cAAc;IAACM,QAAQ,EAAE;EAAE,EAAI;EAC3CC,UAAU,eAAEZ,oBAACM,gBAAgB;IAACK,QAAQ,EAAE;EAAE;CAC3C;AAED;;;;;;;;;AASA,OAAO,MAAME,2BAA2B,GAAG,CACzCC,KAA2B,EAC3BC,GAA2B,KACH;;EACxB,MAAM;IAAEC,gBAAgB;IAAEC;EAAQ,CAAE,GAAGV,eAAe,EAAE;EAExD,MAAMW,aAAa,GAAG,YAAK,CAACC,EAAE,mCAAIH,gBAAgB,IAAG,KAAK,GAAG,IAAI;EACjE,OAAO;IACLI,UAAU,EAAE;MACVC,IAAI,EAAEH,aAAa;MACnBI,MAAM,EAAE,QAAQ;MAChBC,QAAQ,EAAE;KACX;IACDF,IAAI,EAAEpB,qBAAqB,CAACiB,aAAa,EAAE;MACzCH,GAAG,EAAEZ,aAAa,CAACY,GAAG,EAAEX,cAAc,EAAE,CAAC;MACzCoB,IAAI,EAAEN,aAAa,KAAK,KAAK,GAAG,cAAc,GAAGO,SAAS;MAC1D,WAAW,EAAER,QAAQ,GAAG,WAAK,CAACS,aAAa,mCAAI,MAAM,GAAGD,SAAS;MACjE,GAAGX;KACJ,CAAC;IACFS,QAAQ,EAAErB,gBAAgB,CAACY,KAAK,CAACS,QAAQ,EAAE;MACzCI,QAAQ,EAAE,CAAC,CAACb,KAAK,CAACY,aAAa;MAC/BE,YAAY,EAAE;QAAEC,QAAQ,EAAEf,KAAK,CAACY,aAAa,GAAGjB,SAAS,CAACK,KAAK,CAACY,aAAa,CAAC,GAAGD;MAAS;KAC3F,CAAC;IACFH,MAAM,EAAEd,sBAAsB,CAACM,KAAK,CAACQ,MAAM,EAAE;MAC3CK,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZJ,IAAI,EAAE,cAAc;QACpBM,QAAQ,EAAE,CAAC,CAAC;QACZC,IAAI,EAAE,QAAQ;QACd,IAAId,QAAQ,IAAI;UACdO,IAAI,EAAEC,SAAS;UACfK,QAAQ,EAAEL;SACX;;KAEJ,CAAC;IACFR,QAAQ;IACRD;GACD;AACH,CAAC","names":["React","getNativeElementProps","resolveShorthand","useMergedRefs","useFocusWithin","ArrowUpRegular","ArrowDownRegular","useTableContext","useARIAButtonShorthand","sortIcons","ascending","fontSize","descending","useTableHeaderCell_unstable","props","ref","noNativeElements","sortable","rootComponent","as","components","root","button","sortIcon","role","undefined","sortDirection","required","defaultProps","children","tabIndex","type"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport { ArrowUpRegular, ArrowDownRegular } from '@fluentui/react-icons';\nimport type { TableHeaderCellProps, TableHeaderCellState } from './TableHeaderCell.types';\nimport { useTableContext } from '../../contexts/tableContext';\nimport { useARIAButtonShorthand } from '@fluentui/react-aria';\n\nconst sortIcons = {\n  ascending: <ArrowUpRegular fontSize={12} />,\n  descending: <ArrowDownRegular fontSize={12} />,\n};\n\n/**\n * Create the state required to render TableHeaderCell.\n *\n * The returned state can be modified with hooks such as useTableHeaderCellStyles_unstable,\n * before being passed to renderTableHeaderCell_unstable.\n *\n * @param props - props from this instance of TableHeaderCell\n * @param ref - reference to root HTMLElement of TableHeaderCell\n */\nexport const useTableHeaderCell_unstable = (\n  props: TableHeaderCellProps,\n  ref: React.Ref<HTMLElement>,\n): TableHeaderCellState => {\n  const { noNativeElements, sortable } = useTableContext();\n\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'th';\n  return {\n    components: {\n      root: rootComponent,\n      button: 'button',\n      sortIcon: 'span',\n    },\n    root: getNativeElementProps(rootComponent, {\n      ref: useMergedRefs(ref, useFocusWithin()),\n      role: rootComponent === 'div' ? 'columnheader' : undefined,\n      'aria-sort': sortable ? props.sortDirection ?? 'none' : undefined,\n      ...props,\n    }),\n    sortIcon: resolveShorthand(props.sortIcon, {\n      required: !!props.sortDirection,\n      defaultProps: { children: props.sortDirection ? sortIcons[props.sortDirection] : undefined },\n    }),\n    button: useARIAButtonShorthand(props.button, {\n      required: true,\n      defaultProps: {\n        role: 'presentation',\n        tabIndex: -1,\n        type: 'button',\n        ...(sortable && {\n          role: undefined,\n          tabIndex: undefined,\n        }),\n      },\n    }),\n    sortable,\n    noNativeElements,\n  };\n};\n"]}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,2BAA2B;AAClG,SAASC,cAAc,QAAQ,yBAAyB;AACxD,SAASC,cAAc,EAAEC,gBAAgB,QAAQ,uBAAuB;AAExE,SAASC,eAAe,QAAQ,6BAA6B;AAC7D,SAASC,sBAAsB,QAAQ,sBAAsB;AAE7D,MAAMC,SAAS,GAAG;EAChBC,SAAS,eAAEV,oBAACK,cAAc;IAACM,QAAQ,EAAE;EAAE,EAAI;EAC3CC,UAAU,eAAEZ,oBAACM,gBAAgB;IAACK,QAAQ,EAAE;EAAE;CAC3C;AAED;;;;;;;;;AASA,OAAO,MAAME,2BAA2B,GAAG,CACzCC,KAA2B,EAC3BC,GAA2B,KACH;;EACxB,MAAM;IAAEC,gBAAgB;IAAEC;EAAQ,CAAE,GAAGV,eAAe,EAAE;EAExD,MAAMW,aAAa,GAAG,YAAK,CAACC,EAAE,mCAAIH,gBAAgB,IAAG,KAAK,GAAG,IAAI;EACjE,OAAO;IACLI,UAAU,EAAE;MACVC,IAAI,EAAEH,aAAa;MACnBI,MAAM,EAAE,QAAQ;MAChBC,QAAQ,EAAE,MAAM;MAChBC,KAAK,EAAE;KACR;IACDH,IAAI,EAAEpB,qBAAqB,CAACiB,aAAa,EAAE;MACzCH,GAAG,EAAEZ,aAAa,CAACY,GAAG,EAAEX,cAAc,EAAE,CAAC;MACzCqB,IAAI,EAAEP,aAAa,KAAK,KAAK,GAAG,cAAc,GAAGQ,SAAS;MAC1D,WAAW,EAAET,QAAQ,GAAG,WAAK,CAACU,aAAa,mCAAI,MAAM,GAAGD,SAAS;MACjE,GAAGZ;KACJ,CAAC;IACFU,KAAK,EAAEtB,gBAAgB,CAACY,KAAK,CAACU,KAAK,CAAC;IACpCD,QAAQ,EAAErB,gBAAgB,CAACY,KAAK,CAACS,QAAQ,EAAE;MACzCK,QAAQ,EAAE,CAAC,CAACd,KAAK,CAACa,aAAa;MAC/BE,YAAY,EAAE;QAAEC,QAAQ,EAAEhB,KAAK,CAACa,aAAa,GAAGlB,SAAS,CAACK,KAAK,CAACa,aAAa,CAAC,GAAGD;MAAS;KAC3F,CAAC;IACFJ,MAAM,EAAEd,sBAAsB,CAACM,KAAK,CAACQ,MAAM,EAAE;MAC3CM,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZJ,IAAI,EAAE,cAAc;QACpBM,QAAQ,EAAE,CAAC,CAAC;QACZC,IAAI,EAAE,QAAQ;QACd,IAAIf,QAAQ,IAAI;UACdQ,IAAI,EAAEC,SAAS;UACfK,QAAQ,EAAEL;SACX;;KAEJ,CAAC;IACFT,QAAQ;IACRD;GACD;AACH,CAAC","names":["React","getNativeElementProps","resolveShorthand","useMergedRefs","useFocusWithin","ArrowUpRegular","ArrowDownRegular","useTableContext","useARIAButtonShorthand","sortIcons","ascending","fontSize","descending","useTableHeaderCell_unstable","props","ref","noNativeElements","sortable","rootComponent","as","components","root","button","sortIcon","aside","role","undefined","sortDirection","required","defaultProps","children","tabIndex","type"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport { ArrowUpRegular, ArrowDownRegular } from '@fluentui/react-icons';\nimport type { TableHeaderCellProps, TableHeaderCellState } from './TableHeaderCell.types';\nimport { useTableContext } from '../../contexts/tableContext';\nimport { useARIAButtonShorthand } from '@fluentui/react-aria';\n\nconst sortIcons = {\n  ascending: <ArrowUpRegular fontSize={12} />,\n  descending: <ArrowDownRegular fontSize={12} />,\n};\n\n/**\n * Create the state required to render TableHeaderCell.\n *\n * The returned state can be modified with hooks such as useTableHeaderCellStyles_unstable,\n * before being passed to renderTableHeaderCell_unstable.\n *\n * @param props - props from this instance of TableHeaderCell\n * @param ref - reference to root HTMLElement of TableHeaderCell\n */\nexport const useTableHeaderCell_unstable = (\n  props: TableHeaderCellProps,\n  ref: React.Ref<HTMLElement>,\n): TableHeaderCellState => {\n  const { noNativeElements, sortable } = useTableContext();\n\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'th';\n  return {\n    components: {\n      root: rootComponent,\n      button: 'button',\n      sortIcon: 'span',\n      aside: 'span',\n    },\n    root: getNativeElementProps(rootComponent, {\n      ref: useMergedRefs(ref, useFocusWithin()),\n      role: rootComponent === 'div' ? 'columnheader' : undefined,\n      'aria-sort': sortable ? props.sortDirection ?? 'none' : undefined,\n      ...props,\n    }),\n    aside: resolveShorthand(props.aside),\n    sortIcon: resolveShorthand(props.sortIcon, {\n      required: !!props.sortDirection,\n      defaultProps: { children: props.sortDirection ? sortIcons[props.sortDirection] : undefined },\n    }),\n    button: useARIAButtonShorthand(props.button, {\n      required: true,\n      defaultProps: {\n        role: 'presentation',\n        tabIndex: -1,\n        type: 'button',\n        ...(sortable && {\n          role: undefined,\n          tabIndex: undefined,\n        }),\n      },\n    }),\n    sortable,\n    noNativeElements,\n  };\n};\n"]}

package/lib/components/TableHeaderCell/useTableHeaderCellStyles.js

@@ -5,7 +5,8 @@ export const tableHeaderCellClassName = 'fui-TableHeaderCell';
 export const tableHeaderCellClassNames = {
   root: 'fui-TableHeaderCell',
   button: 'fui-TableHeaderCell__button',
-  sortIcon: 'fui-TableHeaderCell__sortIcon'
+  sortIcon: 'fui-TableHeaderCell__sortIcon',
+  aside: 'fui-TableHeaderCell__aside'
 };
 const useTableLayoutStyles = /*#__PURE__*/__styles({
   root: {
@@ -41,7 +42,8 @@ const useStyles = /*#__PURE__*/__styles({
     pehzd3: ["fs9qmxf", "f187m4uq"],
     B8osjzx: ["f187m4uq", "fs9qmxf"],
     u7xebq: ["f145mzao", "f1uha7eq"],
-    Blsv9te: ["f1uha7eq", "f145mzao"]
+    Blsv9te: ["f1uha7eq", "f145mzao"],
+    qhf8xq: "f10pi13n"
   },
   rootInteractive: {
     Jwef8y: "f1t94bn6",
@@ -89,9 +91,10 @@ const useStyles = /*#__PURE__*/__styles({
     mc9l5x: "f22iagw",
     Bt984gj: "f122n59",
     z8tnut: "fclwglc"
-  }
+  },
+  resizeHandle: {}
 }, {
-  d: [".f1nbblvp{padding-top:0px;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1ov4xf1{padding-bottom:0px;}", ".fhix6mv[data-fui-focus-within]:focus-within{outline-width:2px;}", ".fha7anx[data-fui-focus-within]:focus-within{outline-style:solid;}", ".f1fmzww4[data-fui-focus-within]:focus-within{outline-color:var(--colorStrokeFocus2);}", ".fs9qmxf[data-fui-focus-within]:focus-within{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f187m4uq[data-fui-focus-within]:focus-within{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f145mzao[data-fui-focus-within]:focus-within{border-top-right-radius:var(--borderRadiusMedium);}", ".f1uha7eq[data-fui-focus-within]:focus-within{border-top-left-radius:var(--borderRadiusMedium);}", ".fq6nmtn{resize:horizontal;}", ".f1e4lqlz{box-sizing:content-box;}", ".f1u2r49w{background-color:inherit;}", ".f1ym3bx4{color:inherit;}", ".f1mo0ibp{font-family:inherit;}", ".fjoy568{font-size:inherit;}", ".fytdu2e{line-height:normal;}", ".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f37px4s{-webkit-appearance:button;}", ".fgusgyc{text-align:unset;}", ".f10pi13n{position:relative;}", ".fly5x3f{width:100%;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1l02sjl{height:100%;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1ufnopg{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}", ".f14sijuj{row-gap:var(--spacingHorizontalXS);}", ".f1nxs5xn{min-height:32px;}", ".f1neuvcm{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}", ".fkjuxzh{-webkit-flex-basis:0px;-ms-flex-preferred-size:0px;flex-basis:0px;}", ".f1s6fcnf{outline-style:none;}", ".f1k6fduh{cursor:pointer;}", ".fclwglc{padding-top:var(--spacingVerticalXXS);}"],
+  d: [".f1nbblvp{padding-top:0px;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1ov4xf1{padding-bottom:0px;}", ".fhix6mv[data-fui-focus-within]:focus-within{outline-width:2px;}", ".fha7anx[data-fui-focus-within]:focus-within{outline-style:solid;}", ".f1fmzww4[data-fui-focus-within]:focus-within{outline-color:var(--colorStrokeFocus2);}", ".fs9qmxf[data-fui-focus-within]:focus-within{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f187m4uq[data-fui-focus-within]:focus-within{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f145mzao[data-fui-focus-within]:focus-within{border-top-right-radius:var(--borderRadiusMedium);}", ".f1uha7eq[data-fui-focus-within]:focus-within{border-top-left-radius:var(--borderRadiusMedium);}", ".f10pi13n{position:relative;}", ".fq6nmtn{resize:horizontal;}", ".f1e4lqlz{box-sizing:content-box;}", ".f1u2r49w{background-color:inherit;}", ".f1ym3bx4{color:inherit;}", ".f1mo0ibp{font-family:inherit;}", ".fjoy568{font-size:inherit;}", ".fytdu2e{line-height:normal;}", ".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f37px4s{-webkit-appearance:button;}", ".fgusgyc{text-align:unset;}", ".fly5x3f{width:100%;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1l02sjl{height:100%;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1ufnopg{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}", ".f14sijuj{row-gap:var(--spacingHorizontalXS);}", ".f1nxs5xn{min-height:32px;}", ".f1neuvcm{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}", ".fkjuxzh{-webkit-flex-basis:0px;-ms-flex-preferred-size:0px;flex-basis:0px;}", ".f1s6fcnf{outline-style:none;}", ".f1k6fduh{cursor:pointer;}", ".fclwglc{padding-top:var(--spacingVerticalXXS);}"],
   h: [".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}"],
   a: [".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}"]
 });
@@ -109,6 +112,9 @@ export const useTableHeaderCellStyles_unstable = state => {
   if (state.sortIcon) {
     state.sortIcon.className = mergeClasses(tableHeaderCellClassNames.sortIcon, styles.sortIcon, state.sortIcon.className);
   }
+  if (state.aside) {
+    state.aside.className = mergeClasses(tableHeaderCellClassNames.aside, styles.resizeHandle, state.aside.className);
+  }
   return state;
 };
 //# sourceMappingURL=useTableHeaderCellStyles.js.map

package/lib/components/TableHeaderCell/useTableHeaderCellStyles.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,mBAAqBA,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAE9C,SAASC,+BAA+B,QAAQ,yBAAyB;AAGzE,OAAO,MAAMC,wBAAwB,GAAG,qBAAqB;AAC7D,OAAO,MAAMC,yBAAyB,GAAyC;EAC7EC,IAAI,EAAE,qBAAqB;EAC3BC,MAAM,EAAE,6BAA6B;EACrCC,QAAQ,EAAE;CACX;AAED,MAAMC,oBAAoB,gBAAG;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAK3B;AAEF,MAAMC,mBAAmB,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAM1B;AAEF;;;AAGA,MAAMC,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAwDhB;AAEF;;;AAGA,OAAO,MAAMC,iCAAiC,GAAIC,KAA2B,IAA0B;EACrG,MAAMC,MAAM,GAAGH,SAAS,EAAE;EAC1B,MAAMI,YAAY,GAAG;IACnBC,KAAK,EAAEP,oBAAoB,EAAE;IAC7BQ,IAAI,EAAEP,mBAAmB;GAC1B;EACDG,KAAK,CAACP,IAAI,CAACY,SAAS,GAAGlB,YAAY,CACjCK,yBAAyB,CAACC,IAAI,EAC9BQ,MAAM,CAACR,IAAI,EACXO,KAAK,CAACM,QAAQ,IAAIL,MAAM,CAACM,eAAe,EACxCP,KAAK,CAACQ,gBAAgB,GAAGN,YAAY,CAACE,IAAI,CAACX,IAAI,GAAGS,YAAY,CAACC,KAAK,CAACV,IAAI,EACzEO,KAAK,CAACP,IAAI,CAACY,SAAS,CACrB;EACDL,KAAK,CAACN,MAAM,CAACW,SAAS,GAAGlB,YAAY,CACnCK,yBAAyB,CAACE,MAAM,EAChCO,MAAM,CAACQ,WAAW,EAClBR,MAAM,CAACP,MAAM,EACbM,KAAK,CAACM,QAAQ,IAAIL,MAAM,CAACK,QAAQ,EACjCN,KAAK,CAACN,MAAM,CAACW,SAAS,CACvB;EAED,IAAIL,KAAK,CAACL,QAAQ,EAAE;IAClBK,KAAK,CAACL,QAAQ,CAACU,SAAS,GAAGlB,YAAY,CACrCK,yBAAyB,CAACG,QAAQ,EAClCM,MAAM,CAACN,QAAQ,EACfK,KAAK,CAACL,QAAQ,CAACU,SAAS,CACzB;;EAGH,OAAOL,KAAK;AACd,CAAC","names":["mergeClasses","shorthands","tokens","createCustomFocusIndicatorStyle","tableHeaderCellClassName","tableHeaderCellClassNames","root","button","sortIcon","useTableLayoutStyles","useFlexLayoutStyles","useStyles","useTableHeaderCellStyles_unstable","state","styles","layoutStyles","table","flex","className","sortable","rootInteractive","noNativeElements","resetButton"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport type { TableHeaderCellSlots, TableHeaderCellState } from './TableHeaderCell.types';\n\nexport const tableHeaderCellClassName = 'fui-TableHeaderCell';\nexport const tableHeaderCellClassNames: SlotClassNames<TableHeaderCellSlots> = {\n  root: 'fui-TableHeaderCell',\n  button: 'fui-TableHeaderCell__button',\n  sortIcon: 'fui-TableHeaderCell__sortIcon',\n};\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table-cell',\n    verticalAlign: 'middle',\n  },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'flex',\n    ...shorthands.flex(1, 1, '0px'),\n    minWidth: '0px',\n  },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    ...shorthands.padding('0px', tokens.spacingHorizontalS),\n    ...createCustomFocusIndicatorStyle(\n      {\n        ...shorthands.outline('2px', 'solid', tokens.colorStrokeFocus2),\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      },\n      { selector: 'focus-within', enableOutline: true },\n    ),\n  },\n\n  rootInteractive: {\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n    },\n  },\n\n  resetButton: {\n    resize: 'horizontal',\n    boxSizing: 'content-box',\n    backgroundColor: 'inherit',\n    color: 'inherit',\n    fontFamily: 'inherit',\n    fontSize: 'inherit',\n    lineHeight: 'normal',\n    ...shorthands.overflow('visible'),\n    ...shorthands.padding(0),\n    ...shorthands.borderStyle('none'),\n    WebkitAppearance: 'button',\n    textAlign: 'unset',\n  },\n  button: {\n    position: 'relative',\n    width: '100%',\n    display: 'flex',\n    flexGrow: 1,\n    height: '100%',\n    alignItems: 'center',\n    ...shorthands.gap(tokens.spacingHorizontalXS),\n    minHeight: '32px',\n    ...shorthands.flex(1, 1, '0px'),\n    outlineStyle: 'none',\n  },\n  sortable: {\n    cursor: 'pointer',\n  },\n\n  sortIcon: {\n    display: 'flex',\n    alignItems: 'center',\n    paddingTop: tokens.spacingVerticalXXS,\n  },\n});\n\n/**\n * Apply styling to the TableHeaderCell slots based on the state\n */\nexport const useTableHeaderCellStyles_unstable = (state: TableHeaderCellState): TableHeaderCellState => {\n  const styles = useStyles();\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  state.root.className = mergeClasses(\n    tableHeaderCellClassNames.root,\n    styles.root,\n    state.sortable && styles.rootInteractive,\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.root.className,\n  );\n  state.button.className = mergeClasses(\n    tableHeaderCellClassNames.button,\n    styles.resetButton,\n    styles.button,\n    state.sortable && styles.sortable,\n    state.button.className,\n  );\n\n  if (state.sortIcon) {\n    state.sortIcon.className = mergeClasses(\n      tableHeaderCellClassNames.sortIcon,\n      styles.sortIcon,\n      state.sortIcon.className,\n    );\n  }\n\n  return state;\n};\n"]}
+{"version":3,"mappings":"AAAA,mBAAqBA,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAE9C,SAASC,+BAA+B,QAAQ,yBAAyB;AAGzE,OAAO,MAAMC,wBAAwB,GAAG,qBAAqB;AAC7D,OAAO,MAAMC,yBAAyB,GAAyC;EAC7EC,IAAI,EAAE,qBAAqB;EAC3BC,MAAM,EAAE,6BAA6B;EACrCC,QAAQ,EAAE,+BAA+B;EACzCC,KAAK,EAAE;CACR;AAED,MAAMC,oBAAoB,gBAAG;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAK3B;AAEF,MAAMC,mBAAmB,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAM1B;AAEF;;;AAGA,MAAMC,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EA6DhB;AAEF;;;AAGA,OAAO,MAAMC,iCAAiC,GAAIC,KAA2B,IAA0B;EACrG,MAAMC,MAAM,GAAGH,SAAS,EAAE;EAC1B,MAAMI,YAAY,GAAG;IACnBC,KAAK,EAAEP,oBAAoB,EAAE;IAC7BQ,IAAI,EAAEP,mBAAmB;GAC1B;EACDG,KAAK,CAACR,IAAI,CAACa,SAAS,GAAGnB,YAAY,CACjCK,yBAAyB,CAACC,IAAI,EAC9BS,MAAM,CAACT,IAAI,EACXQ,KAAK,CAACM,QAAQ,IAAIL,MAAM,CAACM,eAAe,EACxCP,KAAK,CAACQ,gBAAgB,GAAGN,YAAY,CAACE,IAAI,CAACZ,IAAI,GAAGU,YAAY,CAACC,KAAK,CAACX,IAAI,EACzEQ,KAAK,CAACR,IAAI,CAACa,SAAS,CACrB;EACDL,KAAK,CAACP,MAAM,CAACY,SAAS,GAAGnB,YAAY,CACnCK,yBAAyB,CAACE,MAAM,EAChCQ,MAAM,CAACQ,WAAW,EAClBR,MAAM,CAACR,MAAM,EACbO,KAAK,CAACM,QAAQ,IAAIL,MAAM,CAACK,QAAQ,EACjCN,KAAK,CAACP,MAAM,CAACY,SAAS,CACvB;EAED,IAAIL,KAAK,CAACN,QAAQ,EAAE;IAClBM,KAAK,CAACN,QAAQ,CAACW,SAAS,GAAGnB,YAAY,CACrCK,yBAAyB,CAACG,QAAQ,EAClCO,MAAM,CAACP,QAAQ,EACfM,KAAK,CAACN,QAAQ,CAACW,SAAS,CACzB;;EAGH,IAAIL,KAAK,CAACL,KAAK,EAAE;IACfK,KAAK,CAACL,KAAK,CAACU,SAAS,GAAGnB,YAAY,CAACK,yBAAyB,CAACI,KAAK,EAAEM,MAAM,CAACS,YAAY,EAAEV,KAAK,CAACL,KAAK,CAACU,SAAS,CAAC;;EAGnH,OAAOL,KAAK;AACd,CAAC","names":["mergeClasses","shorthands","tokens","createCustomFocusIndicatorStyle","tableHeaderCellClassName","tableHeaderCellClassNames","root","button","sortIcon","aside","useTableLayoutStyles","useFlexLayoutStyles","useStyles","useTableHeaderCellStyles_unstable","state","styles","layoutStyles","table","flex","className","sortable","rootInteractive","noNativeElements","resetButton","resizeHandle"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport type { TableHeaderCellSlots, TableHeaderCellState } from './TableHeaderCell.types';\n\nexport const tableHeaderCellClassName = 'fui-TableHeaderCell';\nexport const tableHeaderCellClassNames: SlotClassNames<TableHeaderCellSlots> = {\n  root: 'fui-TableHeaderCell',\n  button: 'fui-TableHeaderCell__button',\n  sortIcon: 'fui-TableHeaderCell__sortIcon',\n  aside: 'fui-TableHeaderCell__aside',\n};\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table-cell',\n    verticalAlign: 'middle',\n  },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'flex',\n    ...shorthands.flex(1, 1, '0px'),\n    minWidth: '0px',\n  },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    ...shorthands.padding('0px', tokens.spacingHorizontalS),\n    ...createCustomFocusIndicatorStyle(\n      {\n        ...shorthands.outline('2px', 'solid', tokens.colorStrokeFocus2),\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      },\n      { selector: 'focus-within', enableOutline: true },\n    ),\n    position: 'relative',\n  },\n\n  rootInteractive: {\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n    },\n  },\n\n  resetButton: {\n    resize: 'horizontal',\n    boxSizing: 'content-box',\n    backgroundColor: 'inherit',\n    color: 'inherit',\n    fontFamily: 'inherit',\n    fontSize: 'inherit',\n    lineHeight: 'normal',\n    ...shorthands.overflow('visible'),\n    ...shorthands.padding(0),\n    ...shorthands.borderStyle('none'),\n    WebkitAppearance: 'button',\n    textAlign: 'unset',\n  },\n\n  button: {\n    position: 'relative',\n    width: '100%',\n    display: 'flex',\n    flexGrow: 1,\n    height: '100%',\n    alignItems: 'center',\n    ...shorthands.gap(tokens.spacingHorizontalXS),\n    minHeight: '32px',\n    ...shorthands.flex(1, 1, '0px'),\n    outlineStyle: 'none',\n  },\n\n  sortable: {\n    cursor: 'pointer',\n  },\n\n  sortIcon: {\n    display: 'flex',\n    alignItems: 'center',\n    paddingTop: tokens.spacingVerticalXXS,\n  },\n\n  resizeHandle: {},\n});\n\n/**\n * Apply styling to the TableHeaderCell slots based on the state\n */\nexport const useTableHeaderCellStyles_unstable = (state: TableHeaderCellState): TableHeaderCellState => {\n  const styles = useStyles();\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  state.root.className = mergeClasses(\n    tableHeaderCellClassNames.root,\n    styles.root,\n    state.sortable && styles.rootInteractive,\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.root.className,\n  );\n  state.button.className = mergeClasses(\n    tableHeaderCellClassNames.button,\n    styles.resetButton,\n    styles.button,\n    state.sortable && styles.sortable,\n    state.button.className,\n  );\n\n  if (state.sortIcon) {\n    state.sortIcon.className = mergeClasses(\n      tableHeaderCellClassNames.sortIcon,\n      styles.sortIcon,\n      state.sortIcon.className,\n    );\n  }\n\n  if (state.aside) {\n    state.aside.className = mergeClasses(tableHeaderCellClassNames.aside, styles.resizeHandle, state.aside.className);\n  }\n\n  return state;\n};\n"]}

package/lib/components/TableResizeHandle/TableResizeHandle.js

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { useTableResizeHandle_unstable } from './useTableResizeHandle';
+import { renderTableResizeHandle_unstable } from './renderTableResizeHandle';
+import { useTableResizeHandleStyles_unstable } from './useTableResizeHandleStyles';
+/**
+ * TableResizeHandle component - TODO: add more docs
+ */
+export const TableResizeHandle = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useTableResizeHandle_unstable(props, ref);
+  useTableResizeHandleStyles_unstable(state);
+  return renderTableResizeHandle_unstable(state);
+});
+TableResizeHandle.displayName = 'TableResizeHandle';
+//# sourceMappingURL=TableResizeHandle.js.map

package/lib/components/TableResizeHandle/TableResizeHandle.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,gCAAgC,QAAQ,2BAA2B;AAC5E,SAASC,mCAAmC,QAAQ,8BAA8B;AAIlF;;;AAGA,OAAO,MAAMC,iBAAiB,gBAAgDJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC5G,MAAMC,KAAK,GAAGP,6BAA6B,CAACK,KAAK,EAAEC,GAAG,CAAC;EAEvDJ,mCAAmC,CAACK,KAAK,CAAC;EAC1C,OAAON,gCAAgC,CAACM,KAAK,CAAC;AAChD,CAAC,CAAC;AAEFJ,iBAAiB,CAACK,WAAW,GAAG,mBAAmB","names":["React","useTableResizeHandle_unstable","renderTableResizeHandle_unstable","useTableResizeHandleStyles_unstable","TableResizeHandle","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableResizeHandle/TableResizeHandle.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTableResizeHandle_unstable } from './useTableResizeHandle';\nimport { renderTableResizeHandle_unstable } from './renderTableResizeHandle';\nimport { useTableResizeHandleStyles_unstable } from './useTableResizeHandleStyles';\nimport type { TableResizeHandleProps } from './TableResizeHandle.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * TableResizeHandle component - TODO: add more docs\n */\nexport const TableResizeHandle: ForwardRefComponent<TableResizeHandleProps> = React.forwardRef((props, ref) => {\n  const state = useTableResizeHandle_unstable(props, ref);\n\n  useTableResizeHandleStyles_unstable(state);\n  return renderTableResizeHandle_unstable(state);\n});\n\nTableResizeHandle.displayName = 'TableResizeHandle';\n"]}

package/lib/components/TableResizeHandle/TableResizeHandle.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TableResizeHandle.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableResizeHandle.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableResizeHandle/TableResizeHandle.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type TableResizeHandleSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * TableResizeHandle Props\n */\nexport type TableResizeHandleProps = ComponentProps<TableResizeHandleSlots> & {};\n\n/**\n * State used in rendering TableResizeHandle\n */\nexport type TableResizeHandleState = ComponentState<TableResizeHandleSlots>;\n"]}

package/lib/components/TableResizeHandle/index.js

@@ -0,0 +1,6 @@
+export * from './TableResizeHandle';
+export * from './TableResizeHandle.types';
+export * from './renderTableResizeHandle';
+export * from './useTableResizeHandle';
+export * from './useTableResizeHandleStyles';
+//# sourceMappingURL=index.js.map

package/lib/components/TableResizeHandle/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableResizeHandle/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC","sourcesContent":["export * from './TableResizeHandle';\nexport * from './TableResizeHandle.types';\nexport * from './renderTableResizeHandle';\nexport * from './useTableResizeHandle';\nexport * from './useTableResizeHandleStyles';\n"]}

package/lib/components/TableResizeHandle/renderTableResizeHandle.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of TableResizeHandle
+ */
+export const renderTableResizeHandle_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = getSlots(state);
+  return /*#__PURE__*/React.createElement(slots.root, {
+    ...slotProps.root
+  });
+};
+//# sourceMappingURL=renderTableResizeHandle.js.map

package/lib/components/TableResizeHandle/renderTableResizeHandle.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,gCAAgC,GAAIC,KAA6B,IAAI;EAChF,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAyBE,KAAK,CAAC;EACpE,oBAAOH,oBAACI,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,EAAI;AAC3C,CAAC","names":["React","getSlots","renderTableResizeHandle_unstable","state","slots","slotProps","root"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableResizeHandle/renderTableResizeHandle.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TableResizeHandleState, TableResizeHandleSlots } from './TableResizeHandle.types';\n\n/**\n * Render the final JSX of TableResizeHandle\n */\nexport const renderTableResizeHandle_unstable = (state: TableResizeHandleState) => {\n  const { slots, slotProps } = getSlots<TableResizeHandleSlots>(state);\n  return <slots.root {...slotProps.root} />;\n};\n"]}

package/lib/components/TableResizeHandle/useTableResizeHandle.js

@@ -0,0 +1,28 @@
+import { getNativeElementProps, useEventCallback } from '@fluentui/react-utilities';
+/**
+ * Create the state required to render TableResizeHandle.
+ *
+ * The returned state can be modified with hooks such as useTableResizeHandleStyles_unstable,
+ * before being passed to renderTableResizeHandle_unstable.
+ *
+ * @param props - props from this instance of TableResizeHandle
+ * @param ref - reference to root HTMLElement of TableResizeHandle
+ */
+export const useTableResizeHandle_unstable = (props, ref) => {
+  const onClick = useEventCallback(event => {
+    var _a;
+    (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, event);
+    event.stopPropagation();
+  });
+  return {
+    components: {
+      root: 'div'
+    },
+    root: getNativeElementProps('div', {
+      ref,
+      ...props,
+      onClick
+    })
+  };
+};
+//# sourceMappingURL=useTableResizeHandle.js.map

package/lib/components/TableResizeHandle/useTableResizeHandle.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AACA,SAASA,qBAAqB,EAAEC,gBAAgB,QAAQ,2BAA2B;AAGnF;;;;;;;;;AASA,OAAO,MAAMC,6BAA6B,GAAG,CAC3CC,KAA6B,EAC7BC,GAA2B,KACD;EAC1B,MAAMC,OAAO,GAAGJ,gBAAgB,CAAEK,KAAuC,IAAI;;IAC3E,WAAK,CAACD,OAAO,+CAAbF,KAAK,EAAWG,KAAK,CAAC;IACtBA,KAAK,CAACC,eAAe,EAAE;EACzB,CAAC,CAAC;EACF,OAAO;IACLC,UAAU,EAAE;MACVC,IAAI,EAAE;KACP;IACDA,IAAI,EAAET,qBAAqB,CAAC,KAAK,EAAE;MACjCI,GAAG;MACH,GAAGD,KAAK;MACRE;KACD;GACF;AACH,CAAC","names":["getNativeElementProps","useEventCallback","useTableResizeHandle_unstable","props","ref","onClick","event","stopPropagation","components","root"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableResizeHandle/useTableResizeHandle.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useEventCallback } from '@fluentui/react-utilities';\nimport type { TableResizeHandleProps, TableResizeHandleState } from './TableResizeHandle.types';\n\n/**\n * Create the state required to render TableResizeHandle.\n *\n * The returned state can be modified with hooks such as useTableResizeHandleStyles_unstable,\n * before being passed to renderTableResizeHandle_unstable.\n *\n * @param props - props from this instance of TableResizeHandle\n * @param ref - reference to root HTMLElement of TableResizeHandle\n */\nexport const useTableResizeHandle_unstable = (\n  props: TableResizeHandleProps,\n  ref: React.Ref<HTMLElement>,\n): TableResizeHandleState => {\n  const onClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    props.onClick?.(event);\n    event.stopPropagation();\n  });\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n      onClick,\n    }),\n  };\n};\n"]}