@fluentui/react-table 9.15.12 → 9.15.14
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.
- package/CHANGELOG.md +26 -2
- package/dist/index.d.ts +2 -2
- package/lib/components/TableResizeHandle/useTableResizeHandleStyles.styles.js +9 -9
- package/lib/components/TableResizeHandle/useTableResizeHandleStyles.styles.js.map +1 -1
- package/lib/hooks/types.js.map +1 -1
- package/lib-commonjs/components/TableResizeHandle/useTableResizeHandleStyles.styles.js +19 -19
- package/lib-commonjs/components/TableResizeHandle/useTableResizeHandleStyles.styles.js.map +1 -1
- package/lib-commonjs/hooks/types.js.map +1 -1
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,36 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-table
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 15 Aug 2024 08:18:56 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.15.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.15.14)
|
|
8
|
+
|
|
9
|
+
Thu, 15 Aug 2024 08:18:56 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.15.13..@fluentui/react-table_v9.15.14)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- chore: change :after to ::after ([PR #32236](https://github.com/microsoft/fluentui/pull/32236) by seanmonahan@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-aria to v9.13.3 ([PR #31885](https://github.com/microsoft/fluentui/pull/31885) by beachball)
|
|
16
|
+
- Bump @fluentui/react-avatar to v9.6.36 ([PR #31885](https://github.com/microsoft/fluentui/pull/31885) by beachball)
|
|
17
|
+
- Bump @fluentui/react-checkbox to v9.2.34 ([PR #31885](https://github.com/microsoft/fluentui/pull/31885) by beachball)
|
|
18
|
+
- Bump @fluentui/react-radio to v9.2.29 ([PR #31885](https://github.com/microsoft/fluentui/pull/31885) by beachball)
|
|
19
|
+
- Bump @fluentui/react-tabster to v9.22.4 ([PR #31885](https://github.com/microsoft/fluentui/pull/31885) by beachball)
|
|
20
|
+
|
|
21
|
+
## [9.15.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.15.13)
|
|
22
|
+
|
|
23
|
+
Mon, 05 Aug 2024 22:33:04 GMT
|
|
24
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.15.12..@fluentui/react-table_v9.15.13)
|
|
25
|
+
|
|
26
|
+
### Patches
|
|
27
|
+
|
|
28
|
+
- bugfix: removes Partial from TableProps usage ([PR #32159](https://github.com/microsoft/fluentui/pull/32159) by bernardo.sunderhus@gmail.com)
|
|
29
|
+
- Bump @fluentui/react-avatar to v9.6.35 ([PR #32077](https://github.com/microsoft/fluentui/pull/32077) by beachball)
|
|
30
|
+
|
|
7
31
|
## [9.15.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.15.12)
|
|
8
32
|
|
|
9
|
-
Tue, 30 Jul 2024 18:
|
|
33
|
+
Tue, 30 Jul 2024 18:47:35 GMT
|
|
10
34
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.15.11..@fluentui/react-table_v9.15.12)
|
|
11
35
|
|
|
12
36
|
### Patches
|
package/dist/index.d.ts
CHANGED
|
@@ -28,7 +28,7 @@ declare type ColumnSizingTableCellProps = Pick<TableHeaderCellProps, 'style'>;
|
|
|
28
28
|
|
|
29
29
|
declare type ColumnSizingTableHeaderCellProps = Pick<TableHeaderCellProps, 'style' | 'aside'>;
|
|
30
30
|
|
|
31
|
-
declare type ColumnSizingTableProps =
|
|
31
|
+
declare type ColumnSizingTableProps = TableProps;
|
|
32
32
|
|
|
33
33
|
declare interface ColumnWidthState {
|
|
34
34
|
columnId: TableColumnId;
|
|
@@ -556,7 +556,7 @@ declare interface TableColumnSizingState {
|
|
|
556
556
|
getOnMouseDown: (columnId: TableColumnId) => (e: React_2.MouseEvent | React_2.TouchEvent) => void;
|
|
557
557
|
setColumnWidth: (columnId: TableColumnId, newSize: number) => void;
|
|
558
558
|
getColumnWidths: () => ColumnWidthState[];
|
|
559
|
-
getTableProps: (props?:
|
|
559
|
+
getTableProps: (props?: TableProps) => ColumnSizingTableProps;
|
|
560
560
|
getTableHeaderCellProps: (columnId: TableColumnId) => ColumnSizingTableHeaderCellProps;
|
|
561
561
|
getTableCellProps: (columnId: TableColumnId) => ColumnSizingTableCellProps;
|
|
562
562
|
enableKeyboardMode: (columnId: TableColumnId, onChange?: EnableKeyboardModeOnChangeCallback) => (e: React_2.MouseEvent | React_2.TouchEvent) => void;
|
|
@@ -26,19 +26,19 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
26
26
|
B3cna0y: "f1tkae59",
|
|
27
27
|
Brovlpu: "ftqa4ok",
|
|
28
28
|
B7zu5sd: "f15pjodv",
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
29
|
+
Bsft5z2: "f1rcdj94",
|
|
30
|
+
ap17g6: "f2gz7yw",
|
|
31
|
+
a2br6o: "ff2ryt5",
|
|
32
|
+
E3zdtr: "f1mdlcz9",
|
|
33
|
+
Eqx8gd: ["f10awi5f", "f1nzedbg"],
|
|
34
|
+
bn5sak: "frwkxtg",
|
|
35
|
+
By385i5: "fo72kxq",
|
|
36
|
+
Bjyk6c5: "fdlpgxj"
|
|
37
37
|
}
|
|
38
38
|
}, {
|
|
39
39
|
d: [".f1euv43f{position:absolute;}", ".f1e31b4d{right:0;}", ".f1vgc2s3{left:0;}", ".f15twtuk{top:0;}", ".f1yab3r1{bottom:0;}", ".fjw5fx7{width:16px;}", [".fg06o1j{margin:0 -8px;}", {
|
|
40
40
|
p: -1
|
|
41
|
-
}], ".fc3en1c{cursor:col-resize;}", ".fk73vx1{opacity:0;}", ".f13u1uyl{transition-property:opacity;}", ".fezquic{transition-duration:.2s;}", ".f19g0ac{z-index:1;}", ".
|
|
41
|
+
}], ".fc3en1c{cursor:col-resize;}", ".fk73vx1{opacity:0;}", ".f13u1uyl{transition-property:opacity;}", ".fezquic{transition-duration:.2s;}", ".f19g0ac{z-index:1;}", ".f1rcdj94::after{content:\" \";}", ".f2gz7yw::after{display:block;}", ".ff2ryt5::after{width:1px;}", ".f1mdlcz9::after{position:absolute;}", ".f10awi5f::after{left:50%;}", ".f1nzedbg::after{right:50%;}", ".frwkxtg::after{top:0;}", ".fo72kxq::after{bottom:0;}", ".fdlpgxj::after{background-color:var(--colorNeutralStroke1);}"],
|
|
42
42
|
f: [".f1tkae59:focus{opacity:1;}", ".ftqa4ok:focus{outline-style:none;}"],
|
|
43
43
|
h: [".f15pjodv:hover{opacity:1;}"]
|
|
44
44
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","tokens","tableResizeHandleClassNames","root","useStyles","qhf8xq","j35jbq","Bhzewxz","B5kzvoi","a9b677","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Bceei9c","abs64n","Bmy1vo4","B3o57yi","Bj3rh1h","B3cna0y","Brovlpu","B7zu5sd","
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","tokens","tableResizeHandleClassNames","root","useStyles","qhf8xq","j35jbq","Bhzewxz","B5kzvoi","a9b677","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Bceei9c","abs64n","Bmy1vo4","B3o57yi","Bj3rh1h","B3cna0y","Brovlpu","B7zu5sd","Bsft5z2","ap17g6","a2br6o","E3zdtr","Eqx8gd","bn5sak","By385i5","Bjyk6c5","d","p","f","h","useTableResizeHandleStyles_unstable","state","styles","className"],"sources":["useTableResizeHandleStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const tableResizeHandleClassNames = {\n root: 'fui-TableResizeHandle'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n position: 'absolute',\n right: 0,\n top: 0,\n bottom: 0,\n width: '16px',\n margin: '0 -8px',\n cursor: 'col-resize',\n opacity: 0,\n transitionProperty: 'opacity',\n transitionDuration: '.2s',\n zIndex: 1,\n // If mouse users focus on the resize handle through a context menu, we want the handle\n // to be visible because the mouse might not be hovering over the handle\n ':focus': {\n opacity: 1,\n outlineStyle: 'none'\n },\n ':hover': {\n opacity: 1\n },\n '::after': {\n content: '\" \"',\n display: 'block',\n width: '1px',\n position: 'absolute',\n left: '50%',\n top: 0,\n bottom: 0,\n backgroundColor: tokens.colorNeutralStroke1\n }\n }\n});\n/**\n * Apply styling to the TableResizeHandle slots based on the state\n */ export const useTableResizeHandleStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(tableResizeHandleClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,2BAA2B,GAAG;EACvCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CAiCrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,mCAAmC,GAAIC,KAAK,IAAG;EAC5D,aAAa;;EACb,MAAMC,MAAM,GAAGjC,SAAS,CAAC,CAAC;EAC1BgC,KAAK,CAACjC,IAAI,CAACmC,SAAS,GAAGtC,YAAY,CAACE,2BAA2B,CAACC,IAAI,EAAEkC,MAAM,CAAClC,IAAI,EAAEiC,KAAK,CAACjC,IAAI,CAACmC,SAAS,CAAC;EACxG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
|
package/lib/hooks/types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["types.ts"],"sourcesContent":["import * as React from 'react';\nimport { SortDirection, TableProps } from '../components/Table/Table.types';\nimport { TableHeaderCellProps } from '../components/TableHeaderCell/TableHeaderCell.types';\nimport { SelectionMode } from '@fluentui/react-utilities';\n\nexport type TableRowId = string | number;\nexport type TableColumnId = string | number;\n\nexport interface SortState {\n sortColumn: TableColumnId | undefined;\n sortDirection: SortDirection;\n}\n\nexport interface OnSelectionChangeData {\n selectedItems: Set<TableRowId>;\n}\n\nexport interface CreateTableColumnOptions<TItem> extends Partial<TableColumnDefinition<TItem>> {\n columnId: TableColumnId;\n}\n\nexport interface TableColumnDefinition<TItem> {\n columnId: TableColumnId;\n compare: (a: TItem, b: TItem) => number;\n renderHeaderCell: (data?: unknown) => React.ReactNode;\n renderCell: (item: TItem) => React.ReactNode;\n}\n\nexport type RowEnhancer<TItem, TRowState extends TableRowData<TItem> = TableRowData<TItem>> = (\n row: TableRowData<TItem>,\n) => TRowState;\n\nexport interface TableSortState<TItem> {\n /**\n * Current sort direction\n */\n sortDirection: SortDirection;\n /**\n * Column id of the currently sorted column\n */\n sortColumn: TableColumnId | undefined;\n /**\n * Set the sort direction for the specified column\n */\n setColumnSort: (event: React.SyntheticEvent, columnId: TableColumnId, sortDirection: SortDirection) => void;\n /**\n * Toggles the sort direction for specified column\n */\n toggleColumnSort: (event: React.SyntheticEvent, columnId: TableColumnId) => void;\n /**\n * Returns the sort direction if a column is sorted,\n * returns undefined if the column is not sorted\n */\n getSortDirection: (columnId: TableColumnId) => SortDirection | undefined;\n\n /**\n * Sorts rows and returns a **shallow** copy of original items\n */\n sort: <TRowState extends TableRowData<TItem>>(rows: TRowState[]) => TRowState[];\n}\n\nexport interface TableSelectionState {\n /**\n * Clears all selected rows\n */\n clearRows: (e: React.SyntheticEvent) => void;\n /**\n * Selects single row\n */\n selectRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n /**\n * De-selects single row\n */\n deselectRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n /**\n * Toggle selection of all rows\n */\n toggleAllRows: (e: React.SyntheticEvent) => void;\n /**\n * Toggle selection of single row\n */\n toggleRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n /**\n * Collection of row ids corresponding to selected rows\n */\n selectedRows: Set<TableRowId>;\n /**\n * Whether all rows are selected\n */\n allRowsSelected: boolean;\n /**\n * Whether some rows are selected\n */\n someRowsSelected: boolean;\n\n /**\n * Checks if a given rowId is selected\n */\n isRowSelected: (rowId: TableRowId) => boolean;\n\n selectionMode: SelectionMode;\n}\n\nexport interface TableRowData<TItem> {\n /**\n * User provided data\n */\n item: TItem;\n /**\n * The row id, defaults to index position in the collection\n */\n rowId: TableRowId;\n}\n\nexport interface TableFeaturesState<TItem> extends Pick<UseTableFeaturesOptions<TItem>, 'items' | 'getRowId'> {\n /**\n * The row data for rendering\n * @param rowEnhancer - Enhances the row with extra user data\n */\n getRows: <TRowState extends TableRowData<TItem> = TableRowData<TItem>>(\n rowEnhancer?: RowEnhancer<TItem, TRowState>,\n ) => TRowState[];\n\n /**\n * State and actions to manage row selection\n */\n selection: TableSelectionState;\n /**\n * State and actions to manage row sorting\n */\n sort: TableSortState<TItem>;\n /**\n * Table columns\n */\n columns: TableColumnDefinition<TItem>[];\n /**\n * State and actions to manage column resizing\n */\n // eslint-disable-next-line @typescript-eslint/naming-convention\n columnSizing_unstable: TableColumnSizingState;\n /**\n * A React.Ref object to be set as a ref for the table.\n * Used with column resizing.\n */\n tableRef: React.Ref<HTMLDivElement>;\n}\n\nexport interface UseTableSortOptions {\n /**\n * Used to control sorting\n */\n sortState?: SortState;\n /**\n * Used in uncontrolled mode to set initial sort column and direction on mount\n */\n defaultSortState?: SortState;\n /**\n * Called when sort changes\n */\n onSortChange?(e: React.SyntheticEvent, state: SortState): void;\n}\n\nexport interface UseTableFeaturesOptions<TItem> {\n columns: TableColumnDefinition<TItem>[];\n items: TItem[];\n getRowId?: (item: TItem) => TableRowId;\n}\n\nexport type TableFeaturePlugin = <TItem>(tableState: TableFeaturesState<TItem>) => TableFeaturesState<TItem>;\n\nexport interface ColumnWidthState {\n columnId: TableColumnId;\n width: number;\n minWidth: number;\n idealWidth: number;\n padding: number;\n}\n\nexport type ColumnSizingTableProps =
|
|
1
|
+
{"version":3,"sources":["types.ts"],"sourcesContent":["import * as React from 'react';\nimport { SortDirection, TableProps } from '../components/Table/Table.types';\nimport { TableHeaderCellProps } from '../components/TableHeaderCell/TableHeaderCell.types';\nimport { SelectionMode } from '@fluentui/react-utilities';\n\nexport type TableRowId = string | number;\nexport type TableColumnId = string | number;\n\nexport interface SortState {\n sortColumn: TableColumnId | undefined;\n sortDirection: SortDirection;\n}\n\nexport interface OnSelectionChangeData {\n selectedItems: Set<TableRowId>;\n}\n\nexport interface CreateTableColumnOptions<TItem> extends Partial<TableColumnDefinition<TItem>> {\n columnId: TableColumnId;\n}\n\nexport interface TableColumnDefinition<TItem> {\n columnId: TableColumnId;\n compare: (a: TItem, b: TItem) => number;\n renderHeaderCell: (data?: unknown) => React.ReactNode;\n renderCell: (item: TItem) => React.ReactNode;\n}\n\nexport type RowEnhancer<TItem, TRowState extends TableRowData<TItem> = TableRowData<TItem>> = (\n row: TableRowData<TItem>,\n) => TRowState;\n\nexport interface TableSortState<TItem> {\n /**\n * Current sort direction\n */\n sortDirection: SortDirection;\n /**\n * Column id of the currently sorted column\n */\n sortColumn: TableColumnId | undefined;\n /**\n * Set the sort direction for the specified column\n */\n setColumnSort: (event: React.SyntheticEvent, columnId: TableColumnId, sortDirection: SortDirection) => void;\n /**\n * Toggles the sort direction for specified column\n */\n toggleColumnSort: (event: React.SyntheticEvent, columnId: TableColumnId) => void;\n /**\n * Returns the sort direction if a column is sorted,\n * returns undefined if the column is not sorted\n */\n getSortDirection: (columnId: TableColumnId) => SortDirection | undefined;\n\n /**\n * Sorts rows and returns a **shallow** copy of original items\n */\n sort: <TRowState extends TableRowData<TItem>>(rows: TRowState[]) => TRowState[];\n}\n\nexport interface TableSelectionState {\n /**\n * Clears all selected rows\n */\n clearRows: (e: React.SyntheticEvent) => void;\n /**\n * Selects single row\n */\n selectRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n /**\n * De-selects single row\n */\n deselectRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n /**\n * Toggle selection of all rows\n */\n toggleAllRows: (e: React.SyntheticEvent) => void;\n /**\n * Toggle selection of single row\n */\n toggleRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n /**\n * Collection of row ids corresponding to selected rows\n */\n selectedRows: Set<TableRowId>;\n /**\n * Whether all rows are selected\n */\n allRowsSelected: boolean;\n /**\n * Whether some rows are selected\n */\n someRowsSelected: boolean;\n\n /**\n * Checks if a given rowId is selected\n */\n isRowSelected: (rowId: TableRowId) => boolean;\n\n selectionMode: SelectionMode;\n}\n\nexport interface TableRowData<TItem> {\n /**\n * User provided data\n */\n item: TItem;\n /**\n * The row id, defaults to index position in the collection\n */\n rowId: TableRowId;\n}\n\nexport interface TableFeaturesState<TItem> extends Pick<UseTableFeaturesOptions<TItem>, 'items' | 'getRowId'> {\n /**\n * The row data for rendering\n * @param rowEnhancer - Enhances the row with extra user data\n */\n getRows: <TRowState extends TableRowData<TItem> = TableRowData<TItem>>(\n rowEnhancer?: RowEnhancer<TItem, TRowState>,\n ) => TRowState[];\n\n /**\n * State and actions to manage row selection\n */\n selection: TableSelectionState;\n /**\n * State and actions to manage row sorting\n */\n sort: TableSortState<TItem>;\n /**\n * Table columns\n */\n columns: TableColumnDefinition<TItem>[];\n /**\n * State and actions to manage column resizing\n */\n // eslint-disable-next-line @typescript-eslint/naming-convention\n columnSizing_unstable: TableColumnSizingState;\n /**\n * A React.Ref object to be set as a ref for the table.\n * Used with column resizing.\n */\n tableRef: React.Ref<HTMLDivElement>;\n}\n\nexport interface UseTableSortOptions {\n /**\n * Used to control sorting\n */\n sortState?: SortState;\n /**\n * Used in uncontrolled mode to set initial sort column and direction on mount\n */\n defaultSortState?: SortState;\n /**\n * Called when sort changes\n */\n onSortChange?(e: React.SyntheticEvent, state: SortState): void;\n}\n\nexport interface UseTableFeaturesOptions<TItem> {\n columns: TableColumnDefinition<TItem>[];\n items: TItem[];\n getRowId?: (item: TItem) => TableRowId;\n}\n\nexport type TableFeaturePlugin = <TItem>(tableState: TableFeaturesState<TItem>) => TableFeaturesState<TItem>;\n\nexport interface ColumnWidthState {\n columnId: TableColumnId;\n width: number;\n minWidth: number;\n idealWidth: number;\n padding: number;\n}\n\nexport type ColumnSizingTableProps = TableProps;\nexport type ColumnSizingTableHeaderCellProps = Pick<TableHeaderCellProps, 'style' | 'aside'>;\nexport type ColumnSizingTableCellProps = Pick<TableHeaderCellProps, 'style'>;\n\nexport type EnableKeyboardModeOnChangeCallback = (columnId: TableColumnId, isKeyboardMode: boolean) => void;\n\nexport interface TableColumnSizingState {\n getOnMouseDown: (columnId: TableColumnId) => (e: React.MouseEvent | React.TouchEvent) => void;\n setColumnWidth: (columnId: TableColumnId, newSize: number) => void;\n getColumnWidths: () => ColumnWidthState[];\n getTableProps: (props?: TableProps) => ColumnSizingTableProps;\n getTableHeaderCellProps: (columnId: TableColumnId) => ColumnSizingTableHeaderCellProps;\n getTableCellProps: (columnId: TableColumnId) => ColumnSizingTableCellProps;\n enableKeyboardMode: (\n columnId: TableColumnId,\n onChange?: EnableKeyboardModeOnChangeCallback,\n ) => (e: React.MouseEvent | React.TouchEvent) => void;\n}\n\nexport type ColumnResizeState = {\n getColumnWidth: (columnId: TableColumnId) => number;\n setColumnWidth: (\n e: KeyboardEvent | TouchEvent | MouseEvent | undefined,\n data: { columnId: TableColumnId; width: number },\n ) => void;\n getColumnById: (columnId: TableColumnId) => ColumnWidthState | undefined;\n getColumns: () => ColumnWidthState[];\n};\n\nexport type TableColumnSizingOptions = Record<\n TableColumnId,\n Partial<Pick<ColumnWidthState, 'minWidth' | 'idealWidth' | 'padding'>> & {\n defaultWidth?: number;\n autoFitColumns?: boolean;\n }\n>;\n\nexport type UseTableColumnSizingParams = {\n columnSizingOptions?: TableColumnSizingOptions;\n onColumnResize?: (\n e: KeyboardEvent | TouchEvent | MouseEvent | undefined,\n data: { columnId: TableColumnId; width: number },\n ) => void;\n containerWidthOffset?: number;\n autoFitColumns?: boolean;\n};\n"],"names":["React"],"rangeMappings":"","mappings":"AAAA,YAAYA,WAAW,QAAQ"}
|
|
@@ -45,17 +45,17 @@ const tableResizeHandleClassNames = {
|
|
|
45
45
|
B3cna0y: "f1tkae59",
|
|
46
46
|
Brovlpu: "ftqa4ok",
|
|
47
47
|
B7zu5sd: "f15pjodv",
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
"
|
|
54
|
-
"
|
|
48
|
+
Bsft5z2: "f1rcdj94",
|
|
49
|
+
ap17g6: "f2gz7yw",
|
|
50
|
+
a2br6o: "ff2ryt5",
|
|
51
|
+
E3zdtr: "f1mdlcz9",
|
|
52
|
+
Eqx8gd: [
|
|
53
|
+
"f10awi5f",
|
|
54
|
+
"f1nzedbg"
|
|
55
55
|
],
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
56
|
+
bn5sak: "frwkxtg",
|
|
57
|
+
By385i5: "fo72kxq",
|
|
58
|
+
Bjyk6c5: "fdlpgxj"
|
|
59
59
|
}
|
|
60
60
|
}, {
|
|
61
61
|
d: [
|
|
@@ -76,15 +76,15 @@ const tableResizeHandleClassNames = {
|
|
|
76
76
|
".f13u1uyl{transition-property:opacity;}",
|
|
77
77
|
".fezquic{transition-duration:.2s;}",
|
|
78
78
|
".f19g0ac{z-index:1;}",
|
|
79
|
-
".
|
|
80
|
-
".
|
|
81
|
-
".
|
|
82
|
-
".
|
|
83
|
-
".
|
|
84
|
-
".
|
|
85
|
-
".
|
|
86
|
-
".
|
|
87
|
-
".
|
|
79
|
+
".f1rcdj94::after{content:\" \";}",
|
|
80
|
+
".f2gz7yw::after{display:block;}",
|
|
81
|
+
".ff2ryt5::after{width:1px;}",
|
|
82
|
+
".f1mdlcz9::after{position:absolute;}",
|
|
83
|
+
".f10awi5f::after{left:50%;}",
|
|
84
|
+
".f1nzedbg::after{right:50%;}",
|
|
85
|
+
".frwkxtg::after{top:0;}",
|
|
86
|
+
".fo72kxq::after{bottom:0;}",
|
|
87
|
+
".fdlpgxj::after{background-color:var(--colorNeutralStroke1);}"
|
|
88
88
|
],
|
|
89
89
|
f: [
|
|
90
90
|
".f1tkae59:focus{opacity:1;}",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTableResizeHandleStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const tableResizeHandleClassNames = {\n root: 'fui-TableResizeHandle'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n position: 'absolute',\n right: 0,\n top: 0,\n bottom: 0,\n width: '16px',\n margin: '0 -8px',\n cursor: 'col-resize',\n opacity: 0,\n transitionProperty: 'opacity',\n transitionDuration: '.2s',\n zIndex: 1,\n // If mouse users focus on the resize handle through a context menu, we want the handle\n // to be visible because the mouse might not be hovering over the handle\n ':focus': {\n opacity: 1,\n outlineStyle: 'none'\n },\n ':hover': {\n opacity: 1\n },\n '
|
|
1
|
+
{"version":3,"sources":["useTableResizeHandleStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const tableResizeHandleClassNames = {\n root: 'fui-TableResizeHandle'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n position: 'absolute',\n right: 0,\n top: 0,\n bottom: 0,\n width: '16px',\n margin: '0 -8px',\n cursor: 'col-resize',\n opacity: 0,\n transitionProperty: 'opacity',\n transitionDuration: '.2s',\n zIndex: 1,\n // If mouse users focus on the resize handle through a context menu, we want the handle\n // to be visible because the mouse might not be hovering over the handle\n ':focus': {\n opacity: 1,\n outlineStyle: 'none'\n },\n ':hover': {\n opacity: 1\n },\n '::after': {\n content: '\" \"',\n display: 'block',\n width: '1px',\n position: 'absolute',\n left: '50%',\n top: 0,\n bottom: 0,\n backgroundColor: tokens.colorNeutralStroke1\n }\n }\n});\n/**\n * Apply styling to the TableResizeHandle slots based on the state\n */ export const useTableResizeHandleStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(tableResizeHandleClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"names":["tableResizeHandleClassNames","useTableResizeHandleStyles_unstable","root","useStyles","__styles","qhf8xq","j35jbq","Bhzewxz","B5kzvoi","a9b677","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Bceei9c","abs64n","Bmy1vo4","B3o57yi","Bj3rh1h","B3cna0y","Brovlpu","B7zu5sd","Bsft5z2","ap17g6","a2br6o","E3zdtr","Eqx8gd","bn5sak","By385i5","Bjyk6c5","d","p","f","h","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEaA,2BAA2B;eAA3BA;;IAyCIC,mCAAmC;eAAnCA;;;uBA3CwB;AAElC,MAAMD,8BAA8B;IACvCE,MAAM;AACV;AACA;;CAEA,GAAI,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAF,MAAA;QAAAG,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;KAAA;AAAA;AAoCX,MAAMjC,sCAAuCkC,CAAAA;IACpD;IACA,MAAMC,SAASjC;IACfgC,MAAMjC,IAAI,CAACmC,SAAS,GAAGC,IAAAA,mBAAY,EAACtC,4BAA4BE,IAAI,EAAEkC,OAAOlC,IAAI,EAAEiC,MAAMjC,IAAI,CAACmC,SAAS;IACvG,OAAOF;AACX"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["types.ts"],"sourcesContent":["import * as React from 'react';\nimport { SortDirection, TableProps } from '../components/Table/Table.types';\nimport { TableHeaderCellProps } from '../components/TableHeaderCell/TableHeaderCell.types';\nimport { SelectionMode } from '@fluentui/react-utilities';\n\nexport type TableRowId = string | number;\nexport type TableColumnId = string | number;\n\nexport interface SortState {\n sortColumn: TableColumnId | undefined;\n sortDirection: SortDirection;\n}\n\nexport interface OnSelectionChangeData {\n selectedItems: Set<TableRowId>;\n}\n\nexport interface CreateTableColumnOptions<TItem> extends Partial<TableColumnDefinition<TItem>> {\n columnId: TableColumnId;\n}\n\nexport interface TableColumnDefinition<TItem> {\n columnId: TableColumnId;\n compare: (a: TItem, b: TItem) => number;\n renderHeaderCell: (data?: unknown) => React.ReactNode;\n renderCell: (item: TItem) => React.ReactNode;\n}\n\nexport type RowEnhancer<TItem, TRowState extends TableRowData<TItem> = TableRowData<TItem>> = (\n row: TableRowData<TItem>,\n) => TRowState;\n\nexport interface TableSortState<TItem> {\n /**\n * Current sort direction\n */\n sortDirection: SortDirection;\n /**\n * Column id of the currently sorted column\n */\n sortColumn: TableColumnId | undefined;\n /**\n * Set the sort direction for the specified column\n */\n setColumnSort: (event: React.SyntheticEvent, columnId: TableColumnId, sortDirection: SortDirection) => void;\n /**\n * Toggles the sort direction for specified column\n */\n toggleColumnSort: (event: React.SyntheticEvent, columnId: TableColumnId) => void;\n /**\n * Returns the sort direction if a column is sorted,\n * returns undefined if the column is not sorted\n */\n getSortDirection: (columnId: TableColumnId) => SortDirection | undefined;\n\n /**\n * Sorts rows and returns a **shallow** copy of original items\n */\n sort: <TRowState extends TableRowData<TItem>>(rows: TRowState[]) => TRowState[];\n}\n\nexport interface TableSelectionState {\n /**\n * Clears all selected rows\n */\n clearRows: (e: React.SyntheticEvent) => void;\n /**\n * Selects single row\n */\n selectRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n /**\n * De-selects single row\n */\n deselectRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n /**\n * Toggle selection of all rows\n */\n toggleAllRows: (e: React.SyntheticEvent) => void;\n /**\n * Toggle selection of single row\n */\n toggleRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n /**\n * Collection of row ids corresponding to selected rows\n */\n selectedRows: Set<TableRowId>;\n /**\n * Whether all rows are selected\n */\n allRowsSelected: boolean;\n /**\n * Whether some rows are selected\n */\n someRowsSelected: boolean;\n\n /**\n * Checks if a given rowId is selected\n */\n isRowSelected: (rowId: TableRowId) => boolean;\n\n selectionMode: SelectionMode;\n}\n\nexport interface TableRowData<TItem> {\n /**\n * User provided data\n */\n item: TItem;\n /**\n * The row id, defaults to index position in the collection\n */\n rowId: TableRowId;\n}\n\nexport interface TableFeaturesState<TItem> extends Pick<UseTableFeaturesOptions<TItem>, 'items' | 'getRowId'> {\n /**\n * The row data for rendering\n * @param rowEnhancer - Enhances the row with extra user data\n */\n getRows: <TRowState extends TableRowData<TItem> = TableRowData<TItem>>(\n rowEnhancer?: RowEnhancer<TItem, TRowState>,\n ) => TRowState[];\n\n /**\n * State and actions to manage row selection\n */\n selection: TableSelectionState;\n /**\n * State and actions to manage row sorting\n */\n sort: TableSortState<TItem>;\n /**\n * Table columns\n */\n columns: TableColumnDefinition<TItem>[];\n /**\n * State and actions to manage column resizing\n */\n // eslint-disable-next-line @typescript-eslint/naming-convention\n columnSizing_unstable: TableColumnSizingState;\n /**\n * A React.Ref object to be set as a ref for the table.\n * Used with column resizing.\n */\n tableRef: React.Ref<HTMLDivElement>;\n}\n\nexport interface UseTableSortOptions {\n /**\n * Used to control sorting\n */\n sortState?: SortState;\n /**\n * Used in uncontrolled mode to set initial sort column and direction on mount\n */\n defaultSortState?: SortState;\n /**\n * Called when sort changes\n */\n onSortChange?(e: React.SyntheticEvent, state: SortState): void;\n}\n\nexport interface UseTableFeaturesOptions<TItem> {\n columns: TableColumnDefinition<TItem>[];\n items: TItem[];\n getRowId?: (item: TItem) => TableRowId;\n}\n\nexport type TableFeaturePlugin = <TItem>(tableState: TableFeaturesState<TItem>) => TableFeaturesState<TItem>;\n\nexport interface ColumnWidthState {\n columnId: TableColumnId;\n width: number;\n minWidth: number;\n idealWidth: number;\n padding: number;\n}\n\nexport type ColumnSizingTableProps =
|
|
1
|
+
{"version":3,"sources":["types.ts"],"sourcesContent":["import * as React from 'react';\nimport { SortDirection, TableProps } from '../components/Table/Table.types';\nimport { TableHeaderCellProps } from '../components/TableHeaderCell/TableHeaderCell.types';\nimport { SelectionMode } from '@fluentui/react-utilities';\n\nexport type TableRowId = string | number;\nexport type TableColumnId = string | number;\n\nexport interface SortState {\n sortColumn: TableColumnId | undefined;\n sortDirection: SortDirection;\n}\n\nexport interface OnSelectionChangeData {\n selectedItems: Set<TableRowId>;\n}\n\nexport interface CreateTableColumnOptions<TItem> extends Partial<TableColumnDefinition<TItem>> {\n columnId: TableColumnId;\n}\n\nexport interface TableColumnDefinition<TItem> {\n columnId: TableColumnId;\n compare: (a: TItem, b: TItem) => number;\n renderHeaderCell: (data?: unknown) => React.ReactNode;\n renderCell: (item: TItem) => React.ReactNode;\n}\n\nexport type RowEnhancer<TItem, TRowState extends TableRowData<TItem> = TableRowData<TItem>> = (\n row: TableRowData<TItem>,\n) => TRowState;\n\nexport interface TableSortState<TItem> {\n /**\n * Current sort direction\n */\n sortDirection: SortDirection;\n /**\n * Column id of the currently sorted column\n */\n sortColumn: TableColumnId | undefined;\n /**\n * Set the sort direction for the specified column\n */\n setColumnSort: (event: React.SyntheticEvent, columnId: TableColumnId, sortDirection: SortDirection) => void;\n /**\n * Toggles the sort direction for specified column\n */\n toggleColumnSort: (event: React.SyntheticEvent, columnId: TableColumnId) => void;\n /**\n * Returns the sort direction if a column is sorted,\n * returns undefined if the column is not sorted\n */\n getSortDirection: (columnId: TableColumnId) => SortDirection | undefined;\n\n /**\n * Sorts rows and returns a **shallow** copy of original items\n */\n sort: <TRowState extends TableRowData<TItem>>(rows: TRowState[]) => TRowState[];\n}\n\nexport interface TableSelectionState {\n /**\n * Clears all selected rows\n */\n clearRows: (e: React.SyntheticEvent) => void;\n /**\n * Selects single row\n */\n selectRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n /**\n * De-selects single row\n */\n deselectRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n /**\n * Toggle selection of all rows\n */\n toggleAllRows: (e: React.SyntheticEvent) => void;\n /**\n * Toggle selection of single row\n */\n toggleRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n /**\n * Collection of row ids corresponding to selected rows\n */\n selectedRows: Set<TableRowId>;\n /**\n * Whether all rows are selected\n */\n allRowsSelected: boolean;\n /**\n * Whether some rows are selected\n */\n someRowsSelected: boolean;\n\n /**\n * Checks if a given rowId is selected\n */\n isRowSelected: (rowId: TableRowId) => boolean;\n\n selectionMode: SelectionMode;\n}\n\nexport interface TableRowData<TItem> {\n /**\n * User provided data\n */\n item: TItem;\n /**\n * The row id, defaults to index position in the collection\n */\n rowId: TableRowId;\n}\n\nexport interface TableFeaturesState<TItem> extends Pick<UseTableFeaturesOptions<TItem>, 'items' | 'getRowId'> {\n /**\n * The row data for rendering\n * @param rowEnhancer - Enhances the row with extra user data\n */\n getRows: <TRowState extends TableRowData<TItem> = TableRowData<TItem>>(\n rowEnhancer?: RowEnhancer<TItem, TRowState>,\n ) => TRowState[];\n\n /**\n * State and actions to manage row selection\n */\n selection: TableSelectionState;\n /**\n * State and actions to manage row sorting\n */\n sort: TableSortState<TItem>;\n /**\n * Table columns\n */\n columns: TableColumnDefinition<TItem>[];\n /**\n * State and actions to manage column resizing\n */\n // eslint-disable-next-line @typescript-eslint/naming-convention\n columnSizing_unstable: TableColumnSizingState;\n /**\n * A React.Ref object to be set as a ref for the table.\n * Used with column resizing.\n */\n tableRef: React.Ref<HTMLDivElement>;\n}\n\nexport interface UseTableSortOptions {\n /**\n * Used to control sorting\n */\n sortState?: SortState;\n /**\n * Used in uncontrolled mode to set initial sort column and direction on mount\n */\n defaultSortState?: SortState;\n /**\n * Called when sort changes\n */\n onSortChange?(e: React.SyntheticEvent, state: SortState): void;\n}\n\nexport interface UseTableFeaturesOptions<TItem> {\n columns: TableColumnDefinition<TItem>[];\n items: TItem[];\n getRowId?: (item: TItem) => TableRowId;\n}\n\nexport type TableFeaturePlugin = <TItem>(tableState: TableFeaturesState<TItem>) => TableFeaturesState<TItem>;\n\nexport interface ColumnWidthState {\n columnId: TableColumnId;\n width: number;\n minWidth: number;\n idealWidth: number;\n padding: number;\n}\n\nexport type ColumnSizingTableProps = TableProps;\nexport type ColumnSizingTableHeaderCellProps = Pick<TableHeaderCellProps, 'style' | 'aside'>;\nexport type ColumnSizingTableCellProps = Pick<TableHeaderCellProps, 'style'>;\n\nexport type EnableKeyboardModeOnChangeCallback = (columnId: TableColumnId, isKeyboardMode: boolean) => void;\n\nexport interface TableColumnSizingState {\n getOnMouseDown: (columnId: TableColumnId) => (e: React.MouseEvent | React.TouchEvent) => void;\n setColumnWidth: (columnId: TableColumnId, newSize: number) => void;\n getColumnWidths: () => ColumnWidthState[];\n getTableProps: (props?: TableProps) => ColumnSizingTableProps;\n getTableHeaderCellProps: (columnId: TableColumnId) => ColumnSizingTableHeaderCellProps;\n getTableCellProps: (columnId: TableColumnId) => ColumnSizingTableCellProps;\n enableKeyboardMode: (\n columnId: TableColumnId,\n onChange?: EnableKeyboardModeOnChangeCallback,\n ) => (e: React.MouseEvent | React.TouchEvent) => void;\n}\n\nexport type ColumnResizeState = {\n getColumnWidth: (columnId: TableColumnId) => number;\n setColumnWidth: (\n e: KeyboardEvent | TouchEvent | MouseEvent | undefined,\n data: { columnId: TableColumnId; width: number },\n ) => void;\n getColumnById: (columnId: TableColumnId) => ColumnWidthState | undefined;\n getColumns: () => ColumnWidthState[];\n};\n\nexport type TableColumnSizingOptions = Record<\n TableColumnId,\n Partial<Pick<ColumnWidthState, 'minWidth' | 'idealWidth' | 'padding'>> & {\n defaultWidth?: number;\n autoFitColumns?: boolean;\n }\n>;\n\nexport type UseTableColumnSizingParams = {\n columnSizingOptions?: TableColumnSizingOptions;\n onColumnResize?: (\n e: KeyboardEvent | TouchEvent | MouseEvent | undefined,\n data: { columnId: TableColumnId; width: number },\n ) => void;\n containerWidthOffset?: number;\n autoFitColumns?: boolean;\n};\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-table",
|
|
3
|
-
"version": "9.15.
|
|
3
|
+
"version": "9.15.14",
|
|
4
4
|
"description": "React components for building web experiences",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -36,14 +36,14 @@
|
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@fluentui/keyboard-keys": "^9.0.7",
|
|
39
|
-
"@fluentui/react-aria": "^9.13.
|
|
40
|
-
"@fluentui/react-avatar": "^9.6.
|
|
41
|
-
"@fluentui/react-checkbox": "^9.2.
|
|
39
|
+
"@fluentui/react-aria": "^9.13.3",
|
|
40
|
+
"@fluentui/react-avatar": "^9.6.36",
|
|
41
|
+
"@fluentui/react-checkbox": "^9.2.34",
|
|
42
42
|
"@fluentui/react-context-selector": "^9.1.65",
|
|
43
43
|
"@fluentui/react-icons": "^2.0.245",
|
|
44
|
-
"@fluentui/react-radio": "^9.2.
|
|
44
|
+
"@fluentui/react-radio": "^9.2.29",
|
|
45
45
|
"@fluentui/react-shared-contexts": "^9.20.0",
|
|
46
|
-
"@fluentui/react-tabster": "^9.22.
|
|
46
|
+
"@fluentui/react-tabster": "^9.22.4",
|
|
47
47
|
"@fluentui/react-theme": "^9.1.19",
|
|
48
48
|
"@fluentui/react-utilities": "^9.18.13",
|
|
49
49
|
"@fluentui/react-jsx-runtime": "^9.0.42",
|