npm - @fluentui/react-table - Versions diffs - 9.0.0-rc.4 → 9.0.0-rc.5 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (86) hide show

package/CHANGELOG.json CHANGED Viewed

@@ -2,7 +2,52 @@
   "name": "@fluentui/react-table",
   "entries": [
     {
-      "date": "Tue, 31 Jan 2023 19:50:42 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": {
@@ -11,43 +56,43 @@
             "author": "beachball",
             "package": "@fluentui/react-table",
             "comment": "Bump @fluentui/react-aria to v9.3.7",
-            "commit": "22477ef4202cd24add6ebf823196b5888c9d8083"
+            "commit": "794d9e845cb952f597ba786e70cd8d248be62746"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-table",
             "comment": "Bump @fluentui/react-avatar to v9.3.1",
-            "commit": "22477ef4202cd24add6ebf823196b5888c9d8083"
+            "commit": "794d9e845cb952f597ba786e70cd8d248be62746"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-table",
             "comment": "Bump @fluentui/react-checkbox to v9.0.24",
-            "commit": "22477ef4202cd24add6ebf823196b5888c9d8083"
+            "commit": "794d9e845cb952f597ba786e70cd8d248be62746"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-table",
             "comment": "Bump @fluentui/react-context-selector to v9.1.7",
-            "commit": "22477ef4202cd24add6ebf823196b5888c9d8083"
+            "commit": "794d9e845cb952f597ba786e70cd8d248be62746"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-table",
             "comment": "Bump @fluentui/react-radio to v9.0.22",
-            "commit": "22477ef4202cd24add6ebf823196b5888c9d8083"
+            "commit": "794d9e845cb952f597ba786e70cd8d248be62746"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-table",
             "comment": "Bump @fluentui/react-tabster to v9.4.2",
-            "commit": "22477ef4202cd24add6ebf823196b5888c9d8083"
+            "commit": "794d9e845cb952f597ba786e70cd8d248be62746"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-table",
             "comment": "Bump @fluentui/react-utilities to v9.5.1",
-            "commit": "22477ef4202cd24add6ebf823196b5888c9d8083"
+            "commit": "794d9e845cb952f597ba786e70cd8d248be62746"
           }
         ]
       }

package/CHANGELOG.md CHANGED Viewed

@@ -1,23 +1,37 @@
 # Change Log - @fluentui/react-table
-This log was last generated on Tue, 31 Jan 2023 19:50:42 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:50:42 GMT
+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 #26491](https://github.com/microsoft/fluentui/pull/26491) by beachball)
-- Bump @fluentui/react-avatar to v9.3.1 ([PR #26491](https://github.com/microsoft/fluentui/pull/26491) by beachball)
-- Bump @fluentui/react-checkbox to v9.0.24 ([PR #26491](https://github.com/microsoft/fluentui/pull/26491) by beachball)
-- Bump @fluentui/react-context-selector to v9.1.7 ([PR #26491](https://github.com/microsoft/fluentui/pull/26491) by beachball)
-- Bump @fluentui/react-radio to v9.0.22 ([PR #26491](https://github.com/microsoft/fluentui/pull/26491) by beachball)
-- Bump @fluentui/react-tabster to v9.4.2 ([PR #26491](https://github.com/microsoft/fluentui/pull/26491) by beachball)
-- Bump @fluentui/react-utilities to v9.5.1 ([PR #26491](https://github.com/microsoft/fluentui/pull/26491) by beachball)
+- 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)

package/dist/index.d.ts CHANGED Viewed

@@ -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 ADDED Viewed

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

package/lib/TableResizeHandle.js.map ADDED Viewed

	@@ -0,0 +1 @@
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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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;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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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,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 CHANGED Viewed

	@@ -1 +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"]}
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 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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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,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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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,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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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,+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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

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

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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"]}