@fluentui/react-table 9.17.7 → 9.18.1
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 +32 -2
- package/lib/DataGrid.js.map +1 -1
- package/lib/DataGridBody.js.map +1 -1
- package/lib/DataGridCell.js.map +1 -1
- package/lib/DataGridHeader.js.map +1 -1
- package/lib/DataGridHeaderCell.js.map +1 -1
- package/lib/DataGridRow.js.map +1 -1
- package/lib/DataGridSelectionCell.js.map +1 -1
- package/lib/Table.js.map +1 -1
- package/lib/TableBody.js.map +1 -1
- package/lib/TableCell.js.map +1 -1
- package/lib/TableCellActions.js.map +1 -1
- package/lib/TableCellLayout.js.map +1 -1
- package/lib/TableCellPrimaryLayout.js.map +1 -1
- package/lib/TableHeader.js.map +1 -1
- package/lib/TableHeaderCell.js.map +1 -1
- package/lib/TableResizeHandle.js.map +1 -1
- package/lib/TableRow.js.map +1 -1
- package/lib/TableSelectionCell.js.map +1 -1
- package/lib/components/DataGrid/DataGrid.js.map +1 -1
- package/lib/components/DataGrid/DataGrid.types.js.map +1 -1
- package/lib/components/DataGrid/index.js.map +1 -1
- package/lib/components/DataGrid/renderDataGrid.js.map +1 -1
- package/lib/components/DataGrid/useDataGrid.js.map +1 -1
- package/lib/components/DataGrid/useDataGridContextValues.js.map +1 -1
- package/lib/components/DataGrid/useDataGridStyles.styles.raw.js +13 -0
- package/lib/components/DataGrid/useDataGridStyles.styles.raw.js.map +1 -0
- package/lib/components/DataGridBody/DataGridBody.js.map +1 -1
- package/lib/components/DataGridBody/DataGridBody.types.js.map +1 -1
- package/lib/components/DataGridBody/index.js.map +1 -1
- package/lib/components/DataGridBody/renderDataGridBody.js.map +1 -1
- package/lib/components/DataGridBody/useDataGridBody.js.map +1 -1
- package/lib/components/DataGridBody/useDataGridBodyStyles.styles.raw.js +13 -0
- package/lib/components/DataGridBody/useDataGridBodyStyles.styles.raw.js.map +1 -0
- package/lib/components/DataGridCell/DataGridCell.js.map +1 -1
- package/lib/components/DataGridCell/DataGridCell.types.js.map +1 -1
- package/lib/components/DataGridCell/index.js.map +1 -1
- package/lib/components/DataGridCell/renderDataGridCell.js.map +1 -1
- package/lib/components/DataGridCell/useDataGridCell.js.map +1 -1
- package/lib/components/DataGridCell/useDataGridCellStyles.styles.raw.js +13 -0
- package/lib/components/DataGridCell/useDataGridCellStyles.styles.raw.js.map +1 -0
- package/lib/components/DataGridHeader/DataGridHeader.js.map +1 -1
- package/lib/components/DataGridHeader/DataGridHeader.types.js.map +1 -1
- package/lib/components/DataGridHeader/index.js.map +1 -1
- package/lib/components/DataGridHeader/renderDataGridHeader.js.map +1 -1
- package/lib/components/DataGridHeader/useDataGridHeader.js.map +1 -1
- package/lib/components/DataGridHeader/useDataGridHeaderStyles.styles.raw.js +13 -0
- package/lib/components/DataGridHeader/useDataGridHeaderStyles.styles.raw.js.map +1 -0
- package/lib/components/DataGridHeaderCell/DataGridHeaderCell.js.map +1 -1
- package/lib/components/DataGridHeaderCell/DataGridHeaderCell.types.js.map +1 -1
- package/lib/components/DataGridHeaderCell/index.js.map +1 -1
- package/lib/components/DataGridHeaderCell/renderDataGridHeaderCell.js.map +1 -1
- package/lib/components/DataGridHeaderCell/useDataGridHeaderCell.js.map +1 -1
- package/lib/components/DataGridHeaderCell/useDataGridHeaderCellStyles.styles.raw.js +25 -0
- package/lib/components/DataGridHeaderCell/useDataGridHeaderCellStyles.styles.raw.js.map +1 -0
- package/lib/components/DataGridRow/DataGridRow.js.map +1 -1
- package/lib/components/DataGridRow/DataGridRow.types.js.map +1 -1
- package/lib/components/DataGridRow/index.js.map +1 -1
- package/lib/components/DataGridRow/renderDataGridRow.js.map +1 -1
- package/lib/components/DataGridRow/useDataGridRow.js.map +1 -1
- package/lib/components/DataGridRow/useDataGridRowStyles.styles.raw.js +55 -0
- package/lib/components/DataGridRow/useDataGridRowStyles.styles.raw.js.map +1 -0
- package/lib/components/DataGridSelectionCell/DataGridSelectionCell.js.map +1 -1
- package/lib/components/DataGridSelectionCell/DataGridSelectionCell.types.js.map +1 -1
- package/lib/components/DataGridSelectionCell/index.js.map +1 -1
- package/lib/components/DataGridSelectionCell/renderDataGridSelectionCell.js.map +1 -1
- package/lib/components/DataGridSelectionCell/useDataGridSelectionCell.js.map +1 -1
- package/lib/components/DataGridSelectionCell/useDataGridSelectionCellStyles.styles.raw.js +21 -0
- package/lib/components/DataGridSelectionCell/useDataGridSelectionCellStyles.styles.raw.js.map +1 -0
- package/lib/components/Table/Table.js.map +1 -1
- package/lib/components/Table/Table.types.js.map +1 -1
- package/lib/components/Table/index.js.map +1 -1
- package/lib/components/Table/renderTable.js.map +1 -1
- package/lib/components/Table/useTable.js.map +1 -1
- package/lib/components/Table/useTableContextValues.js.map +1 -1
- package/lib/components/Table/useTableStyles.styles.raw.js +39 -0
- package/lib/components/Table/useTableStyles.styles.raw.js.map +1 -0
- package/lib/components/TableBody/TableBody.js.map +1 -1
- package/lib/components/TableBody/TableBody.types.js.map +1 -1
- package/lib/components/TableBody/index.js.map +1 -1
- package/lib/components/TableBody/renderTableBody.js.map +1 -1
- package/lib/components/TableBody/useTableBody.js.map +1 -1
- package/lib/components/TableBody/useTableBodyStyles.styles.raw.js +26 -0
- package/lib/components/TableBody/useTableBodyStyles.styles.raw.js.map +1 -0
- package/lib/components/TableCell/TableCell.js.map +1 -1
- package/lib/components/TableCell/TableCell.types.js.map +1 -1
- package/lib/components/TableCell/index.js.map +1 -1
- package/lib/components/TableCell/renderTableCell.js.map +1 -1
- package/lib/components/TableCell/useTableCell.js.map +1 -1
- package/lib/components/TableCell/useTableCellStyles.styles.raw.js +65 -0
- package/lib/components/TableCell/useTableCellStyles.styles.raw.js.map +1 -0
- package/lib/components/TableCellActions/TableCellActions.js.map +1 -1
- package/lib/components/TableCellActions/TableCellActions.types.js.map +1 -1
- package/lib/components/TableCellActions/index.js.map +1 -1
- package/lib/components/TableCellActions/renderTableCellActions.js.map +1 -1
- package/lib/components/TableCellActions/useTableCellActions.js.map +1 -1
- package/lib/components/TableCellActions/useTableCellActionsStyles.styles.raw.js +28 -0
- package/lib/components/TableCellActions/useTableCellActionsStyles.styles.raw.js.map +1 -0
- package/lib/components/TableCellLayout/TableCellLayout.js.map +1 -1
- package/lib/components/TableCellLayout/TableCellLayout.types.js.map +1 -1
- package/lib/components/TableCellLayout/index.js.map +1 -1
- package/lib/components/TableCellLayout/renderTableCellLayout.js.map +1 -1
- package/lib/components/TableCellLayout/useTableCellLayout.js.map +1 -1
- package/lib/components/TableCellLayout/useTableCellLayoutContextValues.js.map +1 -1
- package/lib/components/TableCellLayout/useTableCellLayoutStyles.styles.raw.js +82 -0
- package/lib/components/TableCellLayout/useTableCellLayoutStyles.styles.raw.js.map +1 -0
- package/lib/components/TableHeader/TableHeader.js.map +1 -1
- package/lib/components/TableHeader/TableHeader.types.js.map +1 -1
- package/lib/components/TableHeader/index.js.map +1 -1
- package/lib/components/TableHeader/renderTableHeader.js.map +1 -1
- package/lib/components/TableHeader/useTableHeader.js.map +1 -1
- package/lib/components/TableHeader/useTableHeaderStyles.styles.raw.js +26 -0
- package/lib/components/TableHeader/useTableHeaderStyles.styles.raw.js.map +1 -0
- package/lib/components/TableHeaderCell/TableHeaderCell.js.map +1 -1
- package/lib/components/TableHeaderCell/TableHeaderCell.types.js.map +1 -1
- package/lib/components/TableHeaderCell/index.js.map +1 -1
- package/lib/components/TableHeaderCell/renderTableHeaderCell.js.map +1 -1
- package/lib/components/TableHeaderCell/useTableHeaderCell.js.map +1 -1
- package/lib/components/TableHeaderCell/useTableHeaderCellStyles.styles.raw.js +101 -0
- package/lib/components/TableHeaderCell/useTableHeaderCellStyles.styles.raw.js.map +1 -0
- package/lib/components/TableResizeHandle/TableResizeHandle.js.map +1 -1
- package/lib/components/TableResizeHandle/TableResizeHandle.types.js.map +1 -1
- package/lib/components/TableResizeHandle/index.js.map +1 -1
- package/lib/components/TableResizeHandle/renderTableResizeHandle.js.map +1 -1
- package/lib/components/TableResizeHandle/useTableResizeHandle.js.map +1 -1
- package/lib/components/TableResizeHandle/useTableResizeHandleStyles.styles.raw.js +49 -0
- package/lib/components/TableResizeHandle/useTableResizeHandleStyles.styles.raw.js.map +1 -0
- package/lib/components/TableRow/TableRow.js.map +1 -1
- package/lib/components/TableRow/TableRow.types.js.map +1 -1
- package/lib/components/TableRow/index.js.map +1 -1
- package/lib/components/TableRow/renderTableRow.js.map +1 -1
- package/lib/components/TableRow/useTableRow.js.map +1 -1
- package/lib/components/TableRow/useTableRowStyles.styles.raw.js +137 -0
- package/lib/components/TableRow/useTableRowStyles.styles.raw.js.map +1 -0
- package/lib/components/TableSelectionCell/TableSelectionCell.js.map +1 -1
- package/lib/components/TableSelectionCell/TableSelectionCell.types.js.map +1 -1
- package/lib/components/TableSelectionCell/index.js.map +1 -1
- package/lib/components/TableSelectionCell/renderTableSelectionCell.js.map +1 -1
- package/lib/components/TableSelectionCell/useTableSelectionCell.js.map +1 -1
- package/lib/components/TableSelectionCell/useTableSelectionCellStyles.styles.raw.js +74 -0
- package/lib/components/TableSelectionCell/useTableSelectionCellStyles.styles.raw.js.map +1 -0
- package/lib/contexts/columnIdContext.js.map +1 -1
- package/lib/contexts/dataGridContext.js.map +1 -1
- package/lib/contexts/rowIdContext.js.map +1 -1
- package/lib/contexts/tableContext.js.map +1 -1
- package/lib/contexts/tableHeaderContext.js.map +1 -1
- package/lib/hooks/createColumn.js.map +1 -1
- package/lib/hooks/index.js.map +1 -1
- package/lib/hooks/types.js.map +1 -1
- package/lib/hooks/useKeyboardResizing.js.map +1 -1
- package/lib/hooks/useMeasureElement.js.map +1 -1
- package/lib/hooks/useTableColumnResizeMouseHandler.js.map +1 -1
- package/lib/hooks/useTableColumnResizeState.js.map +1 -1
- package/lib/hooks/useTableColumnSizing.js.map +1 -1
- package/lib/hooks/useTableCompositeNavigation.js.map +1 -1
- package/lib/hooks/useTableFeatures.js.map +1 -1
- package/lib/hooks/useTableSelection.js.map +1 -1
- package/lib/hooks/useTableSort.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib/utils/columnResizeUtils.js.map +1 -1
- package/lib/utils/isColumnSortable.js.map +1 -1
- package/lib-commonjs/DataGrid.js.map +1 -1
- package/lib-commonjs/DataGridBody.js.map +1 -1
- package/lib-commonjs/DataGridCell.js.map +1 -1
- package/lib-commonjs/DataGridHeader.js.map +1 -1
- package/lib-commonjs/DataGridHeaderCell.js.map +1 -1
- package/lib-commonjs/DataGridRow.js.map +1 -1
- package/lib-commonjs/DataGridSelectionCell.js.map +1 -1
- package/lib-commonjs/Table.js.map +1 -1
- package/lib-commonjs/TableBody.js.map +1 -1
- package/lib-commonjs/TableCell.js.map +1 -1
- package/lib-commonjs/TableCellActions.js.map +1 -1
- package/lib-commonjs/TableCellLayout.js.map +1 -1
- package/lib-commonjs/TableCellPrimaryLayout.js.map +1 -1
- package/lib-commonjs/TableHeader.js.map +1 -1
- package/lib-commonjs/TableHeaderCell.js.map +1 -1
- package/lib-commonjs/TableResizeHandle.js.map +1 -1
- package/lib-commonjs/TableRow.js.map +1 -1
- package/lib-commonjs/TableSelectionCell.js.map +1 -1
- package/lib-commonjs/components/DataGrid/DataGrid.js.map +1 -1
- package/lib-commonjs/components/DataGrid/DataGrid.types.js.map +1 -1
- package/lib-commonjs/components/DataGrid/index.js.map +1 -1
- package/lib-commonjs/components/DataGrid/renderDataGrid.js.map +1 -1
- package/lib-commonjs/components/DataGrid/useDataGrid.js.map +1 -1
- package/lib-commonjs/components/DataGrid/useDataGridContextValues.js.map +1 -1
- package/lib-commonjs/components/DataGrid/useDataGridStyles.styles.js.map +1 -1
- package/lib-commonjs/components/DataGrid/useDataGridStyles.styles.raw.js +29 -0
- package/lib-commonjs/components/DataGrid/useDataGridStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/DataGridBody/DataGridBody.js.map +1 -1
- package/lib-commonjs/components/DataGridBody/DataGridBody.types.js.map +1 -1
- package/lib-commonjs/components/DataGridBody/index.js.map +1 -1
- package/lib-commonjs/components/DataGridBody/renderDataGridBody.js.map +1 -1
- package/lib-commonjs/components/DataGridBody/useDataGridBody.js.map +1 -1
- package/lib-commonjs/components/DataGridBody/useDataGridBodyStyles.styles.js.map +1 -1
- package/lib-commonjs/components/DataGridBody/useDataGridBodyStyles.styles.raw.js +29 -0
- package/lib-commonjs/components/DataGridBody/useDataGridBodyStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/DataGridCell/DataGridCell.js.map +1 -1
- package/lib-commonjs/components/DataGridCell/DataGridCell.types.js.map +1 -1
- package/lib-commonjs/components/DataGridCell/index.js.map +1 -1
- package/lib-commonjs/components/DataGridCell/renderDataGridCell.js.map +1 -1
- package/lib-commonjs/components/DataGridCell/useDataGridCell.js.map +1 -1
- package/lib-commonjs/components/DataGridCell/useDataGridCellStyles.styles.js.map +1 -1
- package/lib-commonjs/components/DataGridCell/useDataGridCellStyles.styles.raw.js +29 -0
- package/lib-commonjs/components/DataGridCell/useDataGridCellStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/DataGridHeader/DataGridHeader.js.map +1 -1
- package/lib-commonjs/components/DataGridHeader/DataGridHeader.types.js.map +1 -1
- package/lib-commonjs/components/DataGridHeader/index.js.map +1 -1
- package/lib-commonjs/components/DataGridHeader/renderDataGridHeader.js.map +1 -1
- package/lib-commonjs/components/DataGridHeader/useDataGridHeader.js.map +1 -1
- package/lib-commonjs/components/DataGridHeader/useDataGridHeaderStyles.styles.js.map +1 -1
- package/lib-commonjs/components/DataGridHeader/useDataGridHeaderStyles.styles.raw.js +29 -0
- package/lib-commonjs/components/DataGridHeader/useDataGridHeaderStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/DataGridHeaderCell/DataGridHeaderCell.js.map +1 -1
- package/lib-commonjs/components/DataGridHeaderCell/DataGridHeaderCell.types.js.map +1 -1
- package/lib-commonjs/components/DataGridHeaderCell/index.js.map +1 -1
- package/lib-commonjs/components/DataGridHeaderCell/renderDataGridHeaderCell.js.map +1 -1
- package/lib-commonjs/components/DataGridHeaderCell/useDataGridHeaderCell.js.map +1 -1
- package/lib-commonjs/components/DataGridHeaderCell/useDataGridHeaderCellStyles.styles.js.map +1 -1
- package/lib-commonjs/components/DataGridHeaderCell/useDataGridHeaderCellStyles.styles.raw.js +41 -0
- package/lib-commonjs/components/DataGridHeaderCell/useDataGridHeaderCellStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/DataGridRow/DataGridRow.js.map +1 -1
- package/lib-commonjs/components/DataGridRow/DataGridRow.types.js.map +1 -1
- package/lib-commonjs/components/DataGridRow/index.js.map +1 -1
- package/lib-commonjs/components/DataGridRow/renderDataGridRow.js.map +1 -1
- package/lib-commonjs/components/DataGridRow/useDataGridRow.js.map +1 -1
- package/lib-commonjs/components/DataGridRow/useDataGridRowStyles.styles.js.map +1 -1
- package/lib-commonjs/components/DataGridRow/useDataGridRowStyles.styles.raw.js +71 -0
- package/lib-commonjs/components/DataGridRow/useDataGridRowStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/DataGridSelectionCell/DataGridSelectionCell.js.map +1 -1
- package/lib-commonjs/components/DataGridSelectionCell/DataGridSelectionCell.types.js.map +1 -1
- package/lib-commonjs/components/DataGridSelectionCell/index.js.map +1 -1
- package/lib-commonjs/components/DataGridSelectionCell/renderDataGridSelectionCell.js.map +1 -1
- package/lib-commonjs/components/DataGridSelectionCell/useDataGridSelectionCell.js.map +1 -1
- package/lib-commonjs/components/DataGridSelectionCell/useDataGridSelectionCellStyles.styles.js.map +1 -1
- package/lib-commonjs/components/DataGridSelectionCell/useDataGridSelectionCellStyles.styles.raw.js +37 -0
- package/lib-commonjs/components/DataGridSelectionCell/useDataGridSelectionCellStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/Table/Table.js.map +1 -1
- package/lib-commonjs/components/Table/Table.types.js.map +1 -1
- package/lib-commonjs/components/Table/index.js.map +1 -1
- package/lib-commonjs/components/Table/renderTable.js.map +1 -1
- package/lib-commonjs/components/Table/useTable.js.map +1 -1
- package/lib-commonjs/components/Table/useTableContextValues.js.map +1 -1
- package/lib-commonjs/components/Table/useTableStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Table/useTableStyles.styles.raw.js +58 -0
- package/lib-commonjs/components/Table/useTableStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/TableBody/TableBody.js.map +1 -1
- package/lib-commonjs/components/TableBody/TableBody.types.js.map +1 -1
- package/lib-commonjs/components/TableBody/index.js.map +1 -1
- package/lib-commonjs/components/TableBody/renderTableBody.js.map +1 -1
- package/lib-commonjs/components/TableBody/useTableBody.js.map +1 -1
- package/lib-commonjs/components/TableBody/useTableBodyStyles.styles.js.map +1 -1
- package/lib-commonjs/components/TableBody/useTableBodyStyles.styles.raw.js +45 -0
- package/lib-commonjs/components/TableBody/useTableBodyStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/TableCell/TableCell.js.map +1 -1
- package/lib-commonjs/components/TableCell/TableCell.types.js.map +1 -1
- package/lib-commonjs/components/TableCell/index.js.map +1 -1
- package/lib-commonjs/components/TableCell/renderTableCell.js.map +1 -1
- package/lib-commonjs/components/TableCell/useTableCell.js.map +1 -1
- package/lib-commonjs/components/TableCell/useTableCellStyles.styles.js.map +1 -1
- package/lib-commonjs/components/TableCell/useTableCellStyles.styles.raw.js +84 -0
- package/lib-commonjs/components/TableCell/useTableCellStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/TableCellActions/TableCellActions.js.map +1 -1
- package/lib-commonjs/components/TableCellActions/TableCellActions.types.js.map +1 -1
- package/lib-commonjs/components/TableCellActions/index.js.map +1 -1
- package/lib-commonjs/components/TableCellActions/renderTableCellActions.js.map +1 -1
- package/lib-commonjs/components/TableCellActions/useTableCellActions.js.map +1 -1
- package/lib-commonjs/components/TableCellActions/useTableCellActionsStyles.styles.js.map +1 -1
- package/lib-commonjs/components/TableCellActions/useTableCellActionsStyles.styles.raw.js +44 -0
- package/lib-commonjs/components/TableCellActions/useTableCellActionsStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/TableCellLayout/TableCellLayout.js.map +1 -1
- package/lib-commonjs/components/TableCellLayout/TableCellLayout.types.js.map +1 -1
- package/lib-commonjs/components/TableCellLayout/index.js.map +1 -1
- package/lib-commonjs/components/TableCellLayout/renderTableCellLayout.js.map +1 -1
- package/lib-commonjs/components/TableCellLayout/useTableCellLayout.js.map +1 -1
- package/lib-commonjs/components/TableCellLayout/useTableCellLayoutContextValues.js.map +1 -1
- package/lib-commonjs/components/TableCellLayout/useTableCellLayoutStyles.styles.js.map +1 -1
- package/lib-commonjs/components/TableCellLayout/useTableCellLayoutStyles.styles.raw.js +97 -0
- package/lib-commonjs/components/TableCellLayout/useTableCellLayoutStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/TableHeader/TableHeader.js.map +1 -1
- package/lib-commonjs/components/TableHeader/TableHeader.types.js.map +1 -1
- package/lib-commonjs/components/TableHeader/index.js.map +1 -1
- package/lib-commonjs/components/TableHeader/renderTableHeader.js.map +1 -1
- package/lib-commonjs/components/TableHeader/useTableHeader.js.map +1 -1
- package/lib-commonjs/components/TableHeader/useTableHeaderStyles.styles.js.map +1 -1
- package/lib-commonjs/components/TableHeader/useTableHeaderStyles.styles.raw.js +45 -0
- package/lib-commonjs/components/TableHeader/useTableHeaderStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/TableHeaderCell/TableHeaderCell.js.map +1 -1
- package/lib-commonjs/components/TableHeaderCell/TableHeaderCell.types.js.map +1 -1
- package/lib-commonjs/components/TableHeaderCell/index.js.map +1 -1
- package/lib-commonjs/components/TableHeaderCell/renderTableHeaderCell.js.map +1 -1
- package/lib-commonjs/components/TableHeaderCell/useTableHeaderCell.js.map +1 -1
- package/lib-commonjs/components/TableHeaderCell/useTableHeaderCellStyles.styles.js.map +1 -1
- package/lib-commonjs/components/TableHeaderCell/useTableHeaderCellStyles.styles.raw.js +120 -0
- package/lib-commonjs/components/TableHeaderCell/useTableHeaderCellStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/TableResizeHandle/TableResizeHandle.js.map +1 -1
- package/lib-commonjs/components/TableResizeHandle/TableResizeHandle.types.js.map +1 -1
- package/lib-commonjs/components/TableResizeHandle/index.js.map +1 -1
- package/lib-commonjs/components/TableResizeHandle/renderTableResizeHandle.js.map +1 -1
- package/lib-commonjs/components/TableResizeHandle/useTableResizeHandle.js.map +1 -1
- package/lib-commonjs/components/TableResizeHandle/useTableResizeHandleStyles.styles.js.map +1 -1
- package/lib-commonjs/components/TableResizeHandle/useTableResizeHandleStyles.styles.raw.js +65 -0
- package/lib-commonjs/components/TableResizeHandle/useTableResizeHandleStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/TableRow/TableRow.js.map +1 -1
- package/lib-commonjs/components/TableRow/TableRow.types.js.map +1 -1
- package/lib-commonjs/components/TableRow/index.js.map +1 -1
- package/lib-commonjs/components/TableRow/renderTableRow.js.map +1 -1
- package/lib-commonjs/components/TableRow/useTableRow.js.map +1 -1
- package/lib-commonjs/components/TableRow/useTableRowStyles.styles.js.map +1 -1
- package/lib-commonjs/components/TableRow/useTableRowStyles.styles.raw.js +156 -0
- package/lib-commonjs/components/TableRow/useTableRowStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/TableSelectionCell/TableSelectionCell.js.map +1 -1
- package/lib-commonjs/components/TableSelectionCell/TableSelectionCell.types.js.map +1 -1
- package/lib-commonjs/components/TableSelectionCell/index.js.map +1 -1
- package/lib-commonjs/components/TableSelectionCell/renderTableSelectionCell.js.map +1 -1
- package/lib-commonjs/components/TableSelectionCell/useTableSelectionCell.js.map +1 -1
- package/lib-commonjs/components/TableSelectionCell/useTableSelectionCellStyles.styles.js.map +1 -1
- package/lib-commonjs/components/TableSelectionCell/useTableSelectionCellStyles.styles.raw.js +93 -0
- package/lib-commonjs/components/TableSelectionCell/useTableSelectionCellStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/contexts/columnIdContext.js.map +1 -1
- package/lib-commonjs/contexts/dataGridContext.js.map +1 -1
- package/lib-commonjs/contexts/rowIdContext.js.map +1 -1
- package/lib-commonjs/contexts/tableContext.js.map +1 -1
- package/lib-commonjs/contexts/tableHeaderContext.js.map +1 -1
- package/lib-commonjs/hooks/createColumn.js.map +1 -1
- package/lib-commonjs/hooks/index.js.map +1 -1
- package/lib-commonjs/hooks/types.js.map +1 -1
- package/lib-commonjs/hooks/useKeyboardResizing.js.map +1 -1
- package/lib-commonjs/hooks/useMeasureElement.js.map +1 -1
- package/lib-commonjs/hooks/useTableColumnResizeMouseHandler.js.map +1 -1
- package/lib-commonjs/hooks/useTableColumnResizeState.js.map +1 -1
- package/lib-commonjs/hooks/useTableColumnSizing.js.map +1 -1
- package/lib-commonjs/hooks/useTableCompositeNavigation.js.map +1 -1
- package/lib-commonjs/hooks/useTableFeatures.js.map +1 -1
- package/lib-commonjs/hooks/useTableSelection.js.map +1 -1
- package/lib-commonjs/hooks/useTableSort.js.map +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/utils/columnResizeUtils.js.map +1 -1
- package/lib-commonjs/utils/isColumnSortable.js.map +1 -1
- package/package.json +9 -9
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: all[name]
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
tableResizeHandleClassNames: function() {
|
|
13
|
+
return tableResizeHandleClassNames;
|
|
14
|
+
},
|
|
15
|
+
useTableResizeHandleStyles_unstable: function() {
|
|
16
|
+
return useTableResizeHandleStyles_unstable;
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
const _react = require("@griffel/react");
|
|
20
|
+
const _reacttheme = require("@fluentui/react-theme");
|
|
21
|
+
const tableResizeHandleClassNames = {
|
|
22
|
+
root: 'fui-TableResizeHandle'
|
|
23
|
+
};
|
|
24
|
+
/**
|
|
25
|
+
* Styles for the root slot
|
|
26
|
+
*/ const useStyles = (0, _react.makeStyles)({
|
|
27
|
+
root: {
|
|
28
|
+
position: 'absolute',
|
|
29
|
+
right: 0,
|
|
30
|
+
top: 0,
|
|
31
|
+
bottom: 0,
|
|
32
|
+
width: '16px',
|
|
33
|
+
margin: '0 -8px',
|
|
34
|
+
cursor: 'col-resize',
|
|
35
|
+
opacity: 0,
|
|
36
|
+
transitionProperty: 'opacity',
|
|
37
|
+
transitionDuration: '.2s',
|
|
38
|
+
zIndex: 1,
|
|
39
|
+
// If mouse users focus on the resize handle through a context menu, we want the handle
|
|
40
|
+
// to be visible because the mouse might not be hovering over the handle
|
|
41
|
+
':focus': {
|
|
42
|
+
opacity: 1,
|
|
43
|
+
outlineStyle: 'none'
|
|
44
|
+
},
|
|
45
|
+
':hover': {
|
|
46
|
+
opacity: 1
|
|
47
|
+
},
|
|
48
|
+
'::after': {
|
|
49
|
+
content: '" "',
|
|
50
|
+
display: 'block',
|
|
51
|
+
width: '1px',
|
|
52
|
+
position: 'absolute',
|
|
53
|
+
left: '50%',
|
|
54
|
+
top: 0,
|
|
55
|
+
bottom: 0,
|
|
56
|
+
backgroundColor: _reacttheme.tokens.colorNeutralStroke1
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
});
|
|
60
|
+
const useTableResizeHandleStyles_unstable = (state)=>{
|
|
61
|
+
'use no memo';
|
|
62
|
+
const styles = useStyles();
|
|
63
|
+
state.root.className = (0, _react.mergeClasses)(tableResizeHandleClassNames.root, styles.root, state.root.className);
|
|
64
|
+
return state;
|
|
65
|
+
};
|
package/lib-commonjs/components/TableResizeHandle/useTableResizeHandleStyles.styles.raw.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/TableResizeHandle/useTableResizeHandleStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { TableResizeHandleSlots, TableResizeHandleState } from './TableResizeHandle.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const tableResizeHandleClassNames: SlotClassNames<TableResizeHandleSlots> = {\n root: 'fui-TableResizeHandle',\n // TODO: add class names for all slots on TableResizeHandleSlots.\n // Should be of the form `<slotName>: 'fui-TableResizeHandle__<slotName>`\n};\n\n/**\n * Styles for the root slot\n */\nconst 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\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\n ':hover': {\n opacity: 1,\n },\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/**\n * Apply styling to the TableResizeHandle slots based on the state\n */\nexport const useTableResizeHandleStyles_unstable = (state: TableResizeHandleState): TableResizeHandleState => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(tableResizeHandleClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","tableResizeHandleClassNames","root","useStyles","position","right","top","bottom","width","margin","cursor","opacity","transitionProperty","transitionDuration","zIndex","outlineStyle","content","display","left","backgroundColor","colorNeutralStroke1","useTableResizeHandleStyles_unstable","state","styles","className"],"mappings":";;;;;;;;;;;IAKaG,2BAAAA;;;uCAkDAoB;;;;uBAvD4B,iBAAiB;4BAGnC,wBAAwB;AAExC,oCAA4E;IACjFnB,MAAM;AAGR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYL,iBAAAA,EAAW;IAC3BI,MAAM;QACJE,UAAU;QACVC,OAAO;QACPC,KAAK;QACLC,QAAQ;QACRC,OAAO;QACPC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,oBAAoB;QACpBC,oBAAoB;QACpBC,QAAQ;QAER,uFAAuF;QACvF,wEAAwE;QACxE,UAAU;YACRH,SAAS;YACTI,cAAc;QAChB;QAEA,UAAU;YACRJ,SAAS;QACX;QAEA,WAAW;YACTK,SAAS;YACTC,SAAS;YACTT,OAAO;YACPJ,UAAU;YACVc,MAAM;YACNZ,KAAK;YACLC,QAAQ;YACRY,iBAAiBnB,kBAAAA,CAAOoB,mBAAmB;QAC7C;IACF;AACF;AAKO,MAAMC,sCAAsC,CAACC;IAClD;IAEA,MAAMC,SAASpB;IACfmB,MAAMpB,IAAI,CAACsB,SAAS,OAAGzB,mBAAAA,EAAaE,4BAA4BC,IAAI,EAAEqB,OAAOrB,IAAI,EAAEoB,MAAMpB,IAAI,CAACsB,SAAS;IACvG,OAAOF;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TableRow/TableRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTableRow_unstable } from './useTableRow';\nimport { renderTableRow_unstable } from './renderTableRow';\nimport { useTableRowStyles_unstable } from './useTableRowStyles.styles';\nimport type { TableRowProps } from './TableRow.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TableRow component\n */\nexport const TableRow: ForwardRefComponent<TableRowProps> = React.forwardRef((props, ref) => {\n const state = useTableRow_unstable(props, ref);\n\n useTableRowStyles_unstable(state);\n\n useCustomStyleHook_unstable('useTableRowStyles_unstable')(state);\n\n return renderTableRow_unstable(state);\n});\n\nTableRow.displayName = 'TableRow';\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/components/TableRow/TableRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTableRow_unstable } from './useTableRow';\nimport { renderTableRow_unstable } from './renderTableRow';\nimport { useTableRowStyles_unstable } from './useTableRowStyles.styles';\nimport type { TableRowProps } from './TableRow.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TableRow component\n */\nexport const TableRow: ForwardRefComponent<TableRowProps> = React.forwardRef((props, ref) => {\n const state = useTableRow_unstable(props, ref);\n\n useTableRowStyles_unstable(state);\n\n useCustomStyleHook_unstable('useTableRowStyles_unstable')(state);\n\n return renderTableRow_unstable(state);\n});\n\nTableRow.displayName = 'TableRow';\n"],"names":["React","useTableRow_unstable","renderTableRow_unstable","useTableRowStyles_unstable","useCustomStyleHook_unstable","TableRow","forwardRef","props","ref","state","displayName"],"mappings":";;;;+BAWaK;;;;;;;iEAXU,QAAQ;6BACM,gBAAgB;gCACb,mBAAmB;yCAChB,6BAA6B;qCAG5B,kCAAkC;AAKvE,iBAAMA,WAAAA,GAA+CL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQR,qCAAAA,EAAqBM,OAAOC;QAE1CL,mDAAAA,EAA2BM;QAE3BL,gDAAAA,EAA4B,8BAA8BK;IAE1D,WAAOP,uCAAAA,EAAwBO;AACjC,GAAG;AAEHJ,SAASK,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TableRow/TableRow.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { TableContextValue } from '../Table/Table.types';\n\nexport type TableRowSlots = {\n root: Slot<'tr', 'div'>;\n};\n\n/**\n * TableRow Props\n */\nexport type TableRowProps = ComponentProps<TableRowSlots> & {\n /**\n * A table row can have different variants. These appearances are\n * intended to be used with selection.\n * @default none\n */\n appearance?: 'brand' | 'neutral' | 'none';\n};\n\n/**\n * State used in rendering TableRow\n */\nexport type TableRowState = ComponentState<TableRowSlots> &\n Pick<TableContextValue, 'noNativeElements' | 'size'> &\n Pick<Required<TableRowProps>, 'appearance'> & {\n isHeaderRow: boolean;\n };\n"],"names":[],"
|
|
1
|
+
{"version":3,"sources":["../src/components/TableRow/TableRow.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { TableContextValue } from '../Table/Table.types';\n\nexport type TableRowSlots = {\n root: Slot<'tr', 'div'>;\n};\n\n/**\n * TableRow Props\n */\nexport type TableRowProps = ComponentProps<TableRowSlots> & {\n /**\n * A table row can have different variants. These appearances are\n * intended to be used with selection.\n * @default none\n */\n appearance?: 'brand' | 'neutral' | 'none';\n};\n\n/**\n * State used in rendering TableRow\n */\nexport type TableRowState = ComponentState<TableRowSlots> &\n Pick<TableContextValue, 'noNativeElements' | 'size'> &\n Pick<Required<TableRowProps>, 'appearance'> & {\n isHeaderRow: boolean;\n };\n"],"names":[],"mappings":"AAmBA;;CAEC,GACD,WAII"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TableRow/index.ts"],"sourcesContent":["export { TableRow } from './TableRow';\nexport type { TableRowProps, TableRowSlots, TableRowState } from './TableRow.types';\nexport { renderTableRow_unstable } from './renderTableRow';\nexport { useTableRow_unstable } from './useTableRow';\nexport { tableRowClassName, tableRowClassNames, useTableRowStyles_unstable } from './useTableRowStyles.styles';\n"],"names":["TableRow","renderTableRow_unstable","tableRowClassName","tableRowClassNames","useTableRowStyles_unstable"
|
|
1
|
+
{"version":3,"sources":["../src/components/TableRow/index.ts"],"sourcesContent":["export { TableRow } from './TableRow';\nexport type { TableRowProps, TableRowSlots, TableRowState } from './TableRow.types';\nexport { renderTableRow_unstable } from './renderTableRow';\nexport { useTableRow_unstable } from './useTableRow';\nexport { tableRowClassName, tableRowClassNames, useTableRowStyles_unstable } from './useTableRowStyles.styles';\n"],"names":["TableRow","renderTableRow_unstable","useTableRow_unstable","tableRowClassName","tableRowClassNames","useTableRowStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,kBAAQ;;;eAERC,uCAAuB;;;eAEvBE,0CAAiB;;;eAAEC,2CAAkB;;;eAAEC,mDAA0B;;;eADjEH,iCAAoB;;;0BAHJ,aAAa;gCAEE,mBAAmB;6BACtB,gBAAgB;yCAC6B,6BAA6B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TableRow/renderTableRow.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { TableRowState, TableRowSlots } from './TableRow.types';\n\n/**\n * Render the final JSX of TableRow\n */\nexport const renderTableRow_unstable = (state: TableRowState) => {\n assertSlots<TableRowSlots>(state);\n\n return <state.root />;\n};\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/components/TableRow/renderTableRow.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { TableRowState, TableRowSlots } from './TableRow.types';\n\n/**\n * Render the final JSX of TableRow\n */\nexport const renderTableRow_unstable = (state: TableRowState) => {\n assertSlots<TableRowSlots>(state);\n\n return <state.root />;\n};\n"],"names":["assertSlots","renderTableRow_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCACrB,4BAA4B;AAMjD,MAAMC,0BAA0B,CAACC;QACtCF,2BAAAA,EAA2BE;IAE3B,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TableRow/useTableRow.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useFocusVisible, useFocusWithin } from '@fluentui/react-tabster';\nimport type { TableRowProps, TableRowState } from './TableRow.types';\nimport { useTableContext } from '../../contexts/tableContext';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\n\n/**\n * Create the state required to render TableRow.\n *\n * The returned state can be modified with hooks such as useTableRowStyles_unstable,\n * before being passed to renderTableRow_unstable.\n *\n * @param props - props from this instance of TableRow\n * @param ref - reference to root HTMLElement of TableRow\n */\nexport const useTableRow_unstable = (props: TableRowProps, ref: React.Ref<HTMLElement>): TableRowState => {\n const { noNativeElements, size } = useTableContext();\n const rootComponent = props.as ?? noNativeElements ? 'div' : 'tr';\n const focusVisibleRef = useFocusVisible();\n const focusWithinRef = useFocusWithin();\n const isHeaderRow = useIsInTableHeader();\n\n return {\n components: {\n root: rootComponent,\n },\n root: slot.always(\n getIntrinsicElementProps(rootComponent, {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs(ref, focusVisibleRef, focusWithinRef) as React.Ref<HTMLDivElement>,\n role: rootComponent === 'div' ? 'row' : undefined,\n ...props,\n }),\n { elementType: rootComponent },\n ),\n size,\n noNativeElements,\n appearance: props.appearance ?? 'none',\n isHeaderRow,\n };\n};\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/components/TableRow/useTableRow.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useFocusVisible, useFocusWithin } from '@fluentui/react-tabster';\nimport type { TableRowProps, TableRowState } from './TableRow.types';\nimport { useTableContext } from '../../contexts/tableContext';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\n\n/**\n * Create the state required to render TableRow.\n *\n * The returned state can be modified with hooks such as useTableRowStyles_unstable,\n * before being passed to renderTableRow_unstable.\n *\n * @param props - props from this instance of TableRow\n * @param ref - reference to root HTMLElement of TableRow\n */\nexport const useTableRow_unstable = (props: TableRowProps, ref: React.Ref<HTMLElement>): TableRowState => {\n const { noNativeElements, size } = useTableContext();\n const rootComponent = props.as ?? noNativeElements ? 'div' : 'tr';\n const focusVisibleRef = useFocusVisible();\n const focusWithinRef = useFocusWithin();\n const isHeaderRow = useIsInTableHeader();\n\n return {\n components: {\n root: rootComponent,\n },\n root: slot.always(\n getIntrinsicElementProps(rootComponent, {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs(ref, focusVisibleRef, focusWithinRef) as React.Ref<HTMLDivElement>,\n role: rootComponent === 'div' ? 'row' : undefined,\n ...props,\n }),\n { elementType: rootComponent },\n ),\n size,\n noNativeElements,\n appearance: props.appearance ?? 'none',\n isHeaderRow,\n };\n};\n"],"names":["React","getIntrinsicElementProps","useMergedRefs","slot","useFocusVisible","useFocusWithin","useTableContext","useIsInTableHeader","useTableRow_unstable","props","ref","noNativeElements","size","rootComponent","as","focusVisibleRef","focusWithinRef","isHeaderRow","components","root","always","role","undefined","elementType","appearance"],"mappings":";;;;+BAgBaQ;;;;;;;iEAhBU,QAAQ;gCAC+B,4BAA4B;8BAC1C,0BAA0B;8BAE1C,8BAA8B;oCAC3B,oCAAoC;AAWhE,6BAA6B,CAACC,OAAsBC;IACzD,MAAM,EAAEC,gBAAgB,EAAEC,IAAI,EAAE,OAAGN,6BAAAA;QACbG;IAAtB,MAAMI,gBAAgBJ,CAAAA,CAAAA,YAAAA,MAAMK,EAAAA,AAAE,MAAA,QAARL,cAAAA,KAAAA,IAAAA,YAAYE,gBAAAA,CAAe,GAAI,QAAQ;IAC7D,MAAMI,sBAAkBX,6BAAAA;IACxB,MAAMY,qBAAiBX,4BAAAA;IACvB,MAAMY,kBAAcV,sCAAAA;QAmBNE;IAjBd,OAAO;QACLS,YAAY;YACVC,MAAMN;QACR;QACAM,MAAMhB,oBAAAA,CAAKiB,MAAM,KACfnB,wCAAAA,EAAyBY,eAAe;YACtC,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FH,SAAKR,6BAAAA,EAAcQ,KAAKK,iBAAiBC;YACzCK,MAAMR,kBAAkB,QAAQ,QAAQS;YACxC,GAAGb,KAAK;QACV,IACA;YAAEc,aAAaV;QAAc;QAE/BD;QACAD;QACAa,YAAYf,CAAAA,oBAAAA,MAAMe,UAAAA,AAAU,MAAA,QAAhBf,sBAAAA,KAAAA,IAAAA,oBAAoB;QAChCQ;IACF;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTableRowStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { tableCellActionsClassNames } from '../TableCellActions/useTableCellActionsStyles.styles';\nimport { tableSelectionCellClassNames } from '../TableSelectionCell/useTableSelectionCellStyles.styles';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const tableRowClassName = 'fui-TableRow';\nexport const tableRowClassNames = {\n root: tableRowClassName\n};\nconst useTableLayoutStyles = makeStyles({\n root: {\n display: 'table-row'\n }\n});\nconst useFlexLayoutStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center'\n }\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n color: tokens.colorNeutralForeground1,\n boxSizing: 'border-box',\n ...createCustomFocusIndicatorStyle({\n [`& .${tableSelectionCellClassNames.root}`]: {\n opacity: 1\n },\n [`& .${tableCellActionsClassNames.root}`]: {\n opacity: 1\n }\n }, {\n selector: 'focus-within'\n }),\n ...createCustomFocusIndicatorStyle({\n outline: `2px solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium\n }, {\n selector: 'focus'\n })\n },\n rootInteractive: {\n ...createCustomFocusIndicatorStyle({\n [`& .${tableCellActionsClassNames.root}`]: {\n opacity: 1\n }\n }, {\n selector: 'focus-within'\n }),\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground1Pressed,\n [`& .${tableCellActionsClassNames.root}`]: {\n opacity: 1\n },\n [`& .${tableSelectionCellClassNames.root}`]: {\n opacity: 1\n }\n },\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground1Hover,\n [`& .${tableCellActionsClassNames.root}`]: {\n opacity: 1\n },\n [`& .${tableSelectionCellClassNames.root}`]: {\n opacity: 1\n }\n },\n // High contrast styles\n '@media (forced-colors: active)': {\n ':hover': {\n color: 'Highlight',\n ...shorthands.borderColor('Highlight')\n }\n }\n },\n medium: {\n borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`\n },\n small: {\n borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`\n },\n 'extra-small': {\n fontSize: tokens.fontSizeBase200\n },\n brand: {\n backgroundColor: tokens.colorBrandBackground2,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n ':active': {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorNeutralForeground1\n },\n '@media(forced-colors: active)': {\n border: '2px solid transparent',\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n ':focus-visible': {\n outlineOffset: '-4px'\n }\n }\n },\n neutral: {\n '@media(forced-colors: active)': {\n border: '2px solid transparent',\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n ':focus-visible': {\n outlineOffset: '-4px'\n }\n },\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground1Hover,\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundSelected\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundSelected\n },\n ...shorthands.borderColor(tokens.colorNeutralStrokeOnBrand)\n },\n none: {}\n});\n/**\n * Apply styling to the TableRow slots based on the state\n */ export const useTableRowStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const layoutStyles = {\n table: useTableLayoutStyles(),\n flex: useFlexLayoutStyles()\n };\n state.root.className = mergeClasses(tableRowClassNames.root, styles.root, !state.isHeaderRow && styles.rootInteractive, styles[state.size], state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, styles[state.appearance], state.root.className);\n return state;\n};\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["useTableRowStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { tableCellActionsClassNames } from '../TableCellActions/useTableCellActionsStyles.styles';\nimport { tableSelectionCellClassNames } from '../TableSelectionCell/useTableSelectionCellStyles.styles';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const tableRowClassName = 'fui-TableRow';\nexport const tableRowClassNames = {\n root: tableRowClassName\n};\nconst useTableLayoutStyles = makeStyles({\n root: {\n display: 'table-row'\n }\n});\nconst useFlexLayoutStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center'\n }\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n color: tokens.colorNeutralForeground1,\n boxSizing: 'border-box',\n ...createCustomFocusIndicatorStyle({\n [`& .${tableSelectionCellClassNames.root}`]: {\n opacity: 1\n },\n [`& .${tableCellActionsClassNames.root}`]: {\n opacity: 1\n }\n }, {\n selector: 'focus-within'\n }),\n ...createCustomFocusIndicatorStyle({\n outline: `2px solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium\n }, {\n selector: 'focus'\n })\n },\n rootInteractive: {\n ...createCustomFocusIndicatorStyle({\n [`& .${tableCellActionsClassNames.root}`]: {\n opacity: 1\n }\n }, {\n selector: 'focus-within'\n }),\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground1Pressed,\n [`& .${tableCellActionsClassNames.root}`]: {\n opacity: 1\n },\n [`& .${tableSelectionCellClassNames.root}`]: {\n opacity: 1\n }\n },\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground1Hover,\n [`& .${tableCellActionsClassNames.root}`]: {\n opacity: 1\n },\n [`& .${tableSelectionCellClassNames.root}`]: {\n opacity: 1\n }\n },\n // High contrast styles\n '@media (forced-colors: active)': {\n ':hover': {\n color: 'Highlight',\n ...shorthands.borderColor('Highlight')\n }\n }\n },\n medium: {\n borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`\n },\n small: {\n borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`\n },\n 'extra-small': {\n fontSize: tokens.fontSizeBase200\n },\n brand: {\n backgroundColor: tokens.colorBrandBackground2,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n ':active': {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorNeutralForeground1\n },\n '@media(forced-colors: active)': {\n border: '2px solid transparent',\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n ':focus-visible': {\n outlineOffset: '-4px'\n }\n }\n },\n neutral: {\n '@media(forced-colors: active)': {\n border: '2px solid transparent',\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n ':focus-visible': {\n outlineOffset: '-4px'\n }\n },\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground1Hover,\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundSelected\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundSelected\n },\n ...shorthands.borderColor(tokens.colorNeutralStrokeOnBrand)\n },\n none: {}\n});\n/**\n * Apply styling to the TableRow slots based on the state\n */ export const useTableRowStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const layoutStyles = {\n table: useTableLayoutStyles(),\n flex: useFlexLayoutStyles()\n };\n state.root.className = mergeClasses(tableRowClassNames.root, styles.root, !state.isHeaderRow && styles.rootInteractive, styles[state.size], state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, styles[state.appearance], state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","shorthands","tokens","tableCellActionsClassNames","tableSelectionCellClassNames","createCustomFocusIndicatorStyle","tableRowClassName","tableRowClassNames","root","useTableLayoutStyles","mc9l5x","d","useFlexLayoutStyles","Bt984gj","useStyles","sj55zd","B7ck84d","Bconypa","B6guboy","Bfpq7zp","g9k6zt","Bn4voq9","giviqs","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","rootInteractive","ecr2s2","lj723h","B43xm9u","i921ia","Jwef8y","Bi91k9c","Bpt6rm4","ff6mpl","ze5xyy","pgvf35","Bh7lczh","dpv3f4","Bpnjhaq","medium","B9xav0g","oivjwe","Bn0qgzm","Bgfg5da","small","Be2twd7","brand","De3pzq","g2u3we","h3c5rm","zhjwy3","uu68id","Bxeuatn","felo30","Bc736ss","Bhz882k","n51gp8","Eshu5l","Bk6ri7n","v49c4f","Bn1d65q","c4eypz","v3aym","hft9gk","Bjwas2f","Bk5ld8o","gwxt9v","B6k8go","h6lo6r","Beo2b4z","w1pwid","Btyw6ap","Hkxhyr","Brwvgy3","yadkgm","neutral","none","p","a","h","m","useTableRowStyles_unstable","state","styles","layoutStyles","table","flex","className","isHeaderRow","size","noNativeElements","appearance"],"mappings":"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"}
|
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: all[name]
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
tableRowClassName: function() {
|
|
13
|
+
return tableRowClassName;
|
|
14
|
+
},
|
|
15
|
+
tableRowClassNames: function() {
|
|
16
|
+
return tableRowClassNames;
|
|
17
|
+
},
|
|
18
|
+
useTableRowStyles_unstable: function() {
|
|
19
|
+
return useTableRowStyles_unstable;
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
const _react = require("@griffel/react");
|
|
23
|
+
const _reacttheme = require("@fluentui/react-theme");
|
|
24
|
+
const _useTableCellActionsStylesstyles = require("../TableCellActions/useTableCellActionsStyles.styles");
|
|
25
|
+
const _useTableSelectionCellStylesstyles = require("../TableSelectionCell/useTableSelectionCellStyles.styles");
|
|
26
|
+
const _reacttabster = require("@fluentui/react-tabster");
|
|
27
|
+
const tableRowClassName = 'fui-TableRow';
|
|
28
|
+
const tableRowClassNames = {
|
|
29
|
+
root: tableRowClassName
|
|
30
|
+
};
|
|
31
|
+
const useTableLayoutStyles = (0, _react.makeStyles)({
|
|
32
|
+
root: {
|
|
33
|
+
display: 'table-row'
|
|
34
|
+
}
|
|
35
|
+
});
|
|
36
|
+
const useFlexLayoutStyles = (0, _react.makeStyles)({
|
|
37
|
+
root: {
|
|
38
|
+
display: 'flex',
|
|
39
|
+
alignItems: 'center'
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
/**
|
|
43
|
+
* Styles for the root slot
|
|
44
|
+
*/ const useStyles = (0, _react.makeStyles)({
|
|
45
|
+
root: {
|
|
46
|
+
color: _reacttheme.tokens.colorNeutralForeground1,
|
|
47
|
+
boxSizing: 'border-box',
|
|
48
|
+
...(0, _reacttabster.createCustomFocusIndicatorStyle)({
|
|
49
|
+
[`& .${_useTableSelectionCellStylesstyles.tableSelectionCellClassNames.root}`]: {
|
|
50
|
+
opacity: 1
|
|
51
|
+
},
|
|
52
|
+
[`& .${_useTableCellActionsStylesstyles.tableCellActionsClassNames.root}`]: {
|
|
53
|
+
opacity: 1
|
|
54
|
+
}
|
|
55
|
+
}, {
|
|
56
|
+
selector: 'focus-within'
|
|
57
|
+
}),
|
|
58
|
+
...(0, _reacttabster.createCustomFocusIndicatorStyle)({
|
|
59
|
+
outline: `2px solid ${_reacttheme.tokens.colorStrokeFocus2}`,
|
|
60
|
+
borderRadius: _reacttheme.tokens.borderRadiusMedium
|
|
61
|
+
}, {
|
|
62
|
+
selector: 'focus'
|
|
63
|
+
})
|
|
64
|
+
},
|
|
65
|
+
rootInteractive: {
|
|
66
|
+
...(0, _reacttabster.createCustomFocusIndicatorStyle)({
|
|
67
|
+
[`& .${_useTableCellActionsStylesstyles.tableCellActionsClassNames.root}`]: {
|
|
68
|
+
opacity: 1
|
|
69
|
+
}
|
|
70
|
+
}, {
|
|
71
|
+
selector: 'focus-within'
|
|
72
|
+
}),
|
|
73
|
+
':active': {
|
|
74
|
+
backgroundColor: _reacttheme.tokens.colorSubtleBackgroundPressed,
|
|
75
|
+
color: _reacttheme.tokens.colorNeutralForeground1Pressed,
|
|
76
|
+
[`& .${_useTableCellActionsStylesstyles.tableCellActionsClassNames.root}`]: {
|
|
77
|
+
opacity: 1
|
|
78
|
+
},
|
|
79
|
+
[`& .${_useTableSelectionCellStylesstyles.tableSelectionCellClassNames.root}`]: {
|
|
80
|
+
opacity: 1
|
|
81
|
+
}
|
|
82
|
+
},
|
|
83
|
+
':hover': {
|
|
84
|
+
backgroundColor: _reacttheme.tokens.colorSubtleBackgroundHover,
|
|
85
|
+
color: _reacttheme.tokens.colorNeutralForeground1Hover,
|
|
86
|
+
[`& .${_useTableCellActionsStylesstyles.tableCellActionsClassNames.root}`]: {
|
|
87
|
+
opacity: 1
|
|
88
|
+
},
|
|
89
|
+
[`& .${_useTableSelectionCellStylesstyles.tableSelectionCellClassNames.root}`]: {
|
|
90
|
+
opacity: 1
|
|
91
|
+
}
|
|
92
|
+
},
|
|
93
|
+
// High contrast styles
|
|
94
|
+
'@media (forced-colors: active)': {
|
|
95
|
+
':hover': {
|
|
96
|
+
color: 'Highlight',
|
|
97
|
+
..._react.shorthands.borderColor('Highlight')
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
},
|
|
101
|
+
medium: {
|
|
102
|
+
borderBottom: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorNeutralStroke2}`
|
|
103
|
+
},
|
|
104
|
+
small: {
|
|
105
|
+
borderBottom: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorNeutralStroke2}`
|
|
106
|
+
},
|
|
107
|
+
'extra-small': {
|
|
108
|
+
fontSize: _reacttheme.tokens.fontSizeBase200
|
|
109
|
+
},
|
|
110
|
+
brand: {
|
|
111
|
+
backgroundColor: _reacttheme.tokens.colorBrandBackground2,
|
|
112
|
+
..._react.shorthands.borderColor(_reacttheme.tokens.colorTransparentStrokeInteractive),
|
|
113
|
+
':active': {
|
|
114
|
+
backgroundColor: _reacttheme.tokens.colorBrandBackground2,
|
|
115
|
+
color: _reacttheme.tokens.colorNeutralForeground1
|
|
116
|
+
},
|
|
117
|
+
'@media(forced-colors: active)': {
|
|
118
|
+
border: '2px solid transparent',
|
|
119
|
+
borderRadius: _reacttheme.tokens.borderRadiusMedium,
|
|
120
|
+
boxSizing: 'border-box',
|
|
121
|
+
':focus-visible': {
|
|
122
|
+
outlineOffset: '-4px'
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
},
|
|
126
|
+
neutral: {
|
|
127
|
+
'@media(forced-colors: active)': {
|
|
128
|
+
border: '2px solid transparent',
|
|
129
|
+
borderRadius: _reacttheme.tokens.borderRadiusMedium,
|
|
130
|
+
boxSizing: 'border-box',
|
|
131
|
+
':focus-visible': {
|
|
132
|
+
outlineOffset: '-4px'
|
|
133
|
+
}
|
|
134
|
+
},
|
|
135
|
+
backgroundColor: _reacttheme.tokens.colorSubtleBackgroundSelected,
|
|
136
|
+
color: _reacttheme.tokens.colorNeutralForeground1Hover,
|
|
137
|
+
':hover': {
|
|
138
|
+
backgroundColor: _reacttheme.tokens.colorSubtleBackgroundSelected
|
|
139
|
+
},
|
|
140
|
+
':active': {
|
|
141
|
+
backgroundColor: _reacttheme.tokens.colorSubtleBackgroundSelected
|
|
142
|
+
},
|
|
143
|
+
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStrokeOnBrand)
|
|
144
|
+
},
|
|
145
|
+
none: {}
|
|
146
|
+
});
|
|
147
|
+
const useTableRowStyles_unstable = (state)=>{
|
|
148
|
+
'use no memo';
|
|
149
|
+
const styles = useStyles();
|
|
150
|
+
const layoutStyles = {
|
|
151
|
+
table: useTableLayoutStyles(),
|
|
152
|
+
flex: useFlexLayoutStyles()
|
|
153
|
+
};
|
|
154
|
+
state.root.className = (0, _react.mergeClasses)(tableRowClassNames.root, styles.root, !state.isHeaderRow && styles.rootInteractive, styles[state.size], state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, styles[state.appearance], state.root.className);
|
|
155
|
+
return state;
|
|
156
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/TableRow/useTableRowStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TableRowSlots, TableRowState } from './TableRow.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tableCellActionsClassNames } from '../TableCellActions/useTableCellActionsStyles.styles';\nimport { tableSelectionCellClassNames } from '../TableSelectionCell/useTableSelectionCellStyles.styles';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\n\nexport const tableRowClassName = 'fui-TableRow';\nexport const tableRowClassNames: SlotClassNames<TableRowSlots> = {\n root: tableRowClassName,\n};\n\nconst useTableLayoutStyles = makeStyles({\n root: {\n display: 'table-row',\n },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n color: tokens.colorNeutralForeground1,\n boxSizing: 'border-box',\n ...createCustomFocusIndicatorStyle(\n {\n [`& .${tableSelectionCellClassNames.root}`]: {\n opacity: 1,\n },\n [`& .${tableCellActionsClassNames.root}`]: {\n opacity: 1,\n },\n },\n { selector: 'focus-within' },\n ),\n ...createCustomFocusIndicatorStyle(\n { outline: `2px solid ${tokens.colorStrokeFocus2}`, borderRadius: tokens.borderRadiusMedium },\n { selector: 'focus' },\n ),\n },\n\n rootInteractive: {\n ...createCustomFocusIndicatorStyle(\n {\n [`& .${tableCellActionsClassNames.root}`]: {\n opacity: 1,\n },\n },\n { selector: 'focus-within' },\n ),\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground1Pressed,\n [`& .${tableCellActionsClassNames.root}`]: {\n opacity: 1,\n },\n [`& .${tableSelectionCellClassNames.root}`]: {\n opacity: 1,\n },\n },\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground1Hover,\n [`& .${tableCellActionsClassNames.root}`]: {\n opacity: 1,\n },\n [`& .${tableSelectionCellClassNames.root}`]: {\n opacity: 1,\n },\n },\n // High contrast styles\n '@media (forced-colors: active)': {\n ':hover': {\n color: 'Highlight',\n ...shorthands.borderColor('Highlight'),\n },\n },\n },\n\n medium: { borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}` },\n\n small: { borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}` },\n\n 'extra-small': {\n fontSize: tokens.fontSizeBase200,\n },\n\n brand: {\n backgroundColor: tokens.colorBrandBackground2,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n ':active': {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorNeutralForeground1,\n },\n\n '@media(forced-colors: active)': {\n border: '2px solid transparent',\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n ':focus-visible': {\n outlineOffset: '-4px',\n },\n },\n },\n\n neutral: {\n '@media(forced-colors: active)': {\n border: '2px solid transparent',\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n ':focus-visible': {\n outlineOffset: '-4px',\n },\n },\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground1Hover,\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n },\n\n ...shorthands.borderColor(tokens.colorNeutralStrokeOnBrand),\n },\n\n none: {},\n});\n\n/**\n * Apply styling to the TableRow slots based on the state\n */\nexport const useTableRowStyles_unstable = (state: TableRowState): TableRowState => {\n 'use no memo';\n\n const styles = useStyles();\n const layoutStyles = {\n table: useTableLayoutStyles(),\n flex: useFlexLayoutStyles(),\n };\n state.root.className = mergeClasses(\n tableRowClassNames.root,\n styles.root,\n !state.isHeaderRow && styles.rootInteractive,\n styles[state.size],\n state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n styles[state.appearance],\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","tableCellActionsClassNames","tableSelectionCellClassNames","createCustomFocusIndicatorStyle","tableRowClassName","tableRowClassNames","root","useTableLayoutStyles","display","useFlexLayoutStyles","alignItems","useStyles","color","colorNeutralForeground1","boxSizing","opacity","selector","outline","colorStrokeFocus2","borderRadius","borderRadiusMedium","rootInteractive","backgroundColor","colorSubtleBackgroundPressed","colorNeutralForeground1Pressed","colorSubtleBackgroundHover","colorNeutralForeground1Hover","borderColor","medium","borderBottom","strokeWidthThin","colorNeutralStroke2","small","fontSize","fontSizeBase200","brand","colorBrandBackground2","colorTransparentStrokeInteractive","border","outlineOffset","neutral","colorSubtleBackgroundSelected","colorNeutralStrokeOnBrand","none","useTableRowStyles_unstable","state","styles","layoutStyles","table","flex","className","isHeaderRow","size","noNativeElements","appearance"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TableSelectionCell/TableSelectionCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTableSelectionCell_unstable } from './useTableSelectionCell';\nimport { renderTableSelectionCell_unstable } from './renderTableSelectionCell';\nimport { useTableSelectionCellStyles_unstable } from './useTableSelectionCellStyles.styles';\nimport type { TableSelectionCellProps } from './TableSelectionCell.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TableSelectionCell component\n */\nexport const TableSelectionCell: ForwardRefComponent<TableSelectionCellProps> = React.forwardRef((props, ref) => {\n const state = useTableSelectionCell_unstable(props, ref);\n\n useTableSelectionCellStyles_unstable(state);\n\n useCustomStyleHook_unstable('useTableSelectionCellStyles_unstable')(state);\n\n return renderTableSelectionCell_unstable(state);\n});\n\nTableSelectionCell.displayName = 'TableSelectionCell';\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/components/TableSelectionCell/TableSelectionCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTableSelectionCell_unstable } from './useTableSelectionCell';\nimport { renderTableSelectionCell_unstable } from './renderTableSelectionCell';\nimport { useTableSelectionCellStyles_unstable } from './useTableSelectionCellStyles.styles';\nimport type { TableSelectionCellProps } from './TableSelectionCell.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TableSelectionCell component\n */\nexport const TableSelectionCell: ForwardRefComponent<TableSelectionCellProps> = React.forwardRef((props, ref) => {\n const state = useTableSelectionCell_unstable(props, ref);\n\n useTableSelectionCellStyles_unstable(state);\n\n useCustomStyleHook_unstable('useTableSelectionCellStyles_unstable')(state);\n\n return renderTableSelectionCell_unstable(state);\n});\n\nTableSelectionCell.displayName = 'TableSelectionCell';\n"],"names":["React","useTableSelectionCell_unstable","renderTableSelectionCell_unstable","useTableSelectionCellStyles_unstable","useCustomStyleHook_unstable","TableSelectionCell","forwardRef","props","ref","state","displayName"],"mappings":";;;;+BAWaK;;;;;;;iEAXU,QAAQ;uCACgB,0BAA0B;0CACvB,6BAA6B;mDAC1B,uCAAuC;qCAGhD,kCAAkC;AAKvE,2BAAMA,WAAAA,GAAmEL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACvG,MAAMC,QAAQR,yDAAAA,EAA+BM,OAAOC;QAEpDL,uEAAAA,EAAqCM;QAErCL,gDAAAA,EAA4B,wCAAwCK;IAEpE,WAAOP,2DAAAA,EAAkCO;AAC3C,GAAG;AAEHJ,mBAAmBK,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TableSelectionCell/TableSelectionCell.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { Checkbox, CheckboxProps } from '@fluentui/react-checkbox';\nimport type { Radio } from '@fluentui/react-radio';\nimport { TableCellSlots } from '../TableCell/TableCell.types';\nimport { TableContextValue } from '../Table/Table.types';\n\nexport type TableSelectionCellSlots = {\n /**\n * Selection indicator if selection type is checkbox\n */\n checkboxIndicator: Slot<typeof Checkbox>;\n /**\n * Selection indicator if selection type is radio\n */\n radioIndicator: Slot<typeof Radio>;\n} & Pick<TableCellSlots, 'root'>;\n\n/**\n * TableSelectionCell Props\n */\nexport type TableSelectionCellProps = ComponentProps<Partial<TableSelectionCellSlots>> & {\n /**\n * A table can have two kinds of selection modes.\n * @default checkbox\n */\n type?: 'checkbox' | 'radio';\n\n /**\n * @default false\n */\n checked?: CheckboxProps['checked'];\n\n /**\n * Only visible when checked or the parent row is hovered/focused\n * @default false\n */\n subtle?: boolean;\n\n /**\n * Completely hides the selection cell\n * @deprecated cells should never use hidden, since doing so breaks table structure and screen reader navigation. Use `invisible` instead.\n */\n hidden?: boolean;\n\n /**\n * Hides the selection cell visually but takes up the same space\n * @default false\n */\n invisible?: boolean;\n};\n\n/**\n * State used in rendering TableSelectionCell\n */\nexport type TableSelectionCellState = ComponentState<TableSelectionCellSlots> &\n Pick<Required<TableSelectionCellProps>, 'type' | 'checked' | 'subtle'> &\n Pick<TableContextValue, 'noNativeElements'> & {\n /* Visually hides the selection cell; not deprecated on state */\n hidden: boolean;\n };\n"],"names":[],"
|
|
1
|
+
{"version":3,"sources":["../src/components/TableSelectionCell/TableSelectionCell.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { Checkbox, CheckboxProps } from '@fluentui/react-checkbox';\nimport type { Radio } from '@fluentui/react-radio';\nimport { TableCellSlots } from '../TableCell/TableCell.types';\nimport { TableContextValue } from '../Table/Table.types';\n\nexport type TableSelectionCellSlots = {\n /**\n * Selection indicator if selection type is checkbox\n */\n checkboxIndicator: Slot<typeof Checkbox>;\n /**\n * Selection indicator if selection type is radio\n */\n radioIndicator: Slot<typeof Radio>;\n} & Pick<TableCellSlots, 'root'>;\n\n/**\n * TableSelectionCell Props\n */\nexport type TableSelectionCellProps = ComponentProps<Partial<TableSelectionCellSlots>> & {\n /**\n * A table can have two kinds of selection modes.\n * @default checkbox\n */\n type?: 'checkbox' | 'radio';\n\n /**\n * @default false\n */\n checked?: CheckboxProps['checked'];\n\n /**\n * Only visible when checked or the parent row is hovered/focused\n * @default false\n */\n subtle?: boolean;\n\n /**\n * Completely hides the selection cell\n * @deprecated cells should never use hidden, since doing so breaks table structure and screen reader navigation. Use `invisible` instead.\n */\n hidden?: boolean;\n\n /**\n * Hides the selection cell visually but takes up the same space\n * @default false\n */\n invisible?: boolean;\n};\n\n/**\n * State used in rendering TableSelectionCell\n */\nexport type TableSelectionCellState = ComponentState<TableSelectionCellSlots> &\n Pick<Required<TableSelectionCellProps>, 'type' | 'checked' | 'subtle'> &\n Pick<TableContextValue, 'noNativeElements'> & {\n /* Visually hides the selection cell; not deprecated on state */\n hidden: boolean;\n };\n"],"names":[],"mappings":"AAmDA;;CAEC,GACD,WAKI"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TableSelectionCell/index.ts"],"sourcesContent":["export { TableSelectionCell } from './TableSelectionCell';\nexport type {\n TableSelectionCellProps,\n TableSelectionCellSlots,\n TableSelectionCellState,\n} from './TableSelectionCell.types';\nexport { renderTableSelectionCell_unstable } from './renderTableSelectionCell';\nexport { useTableSelectionCell_unstable } from './useTableSelectionCell';\nexport {\n CELL_WIDTH,\n tableSelectionCellClassNames,\n useTableSelectionCellStyles_unstable,\n} from './useTableSelectionCellStyles.styles';\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/components/TableSelectionCell/index.ts"],"sourcesContent":["export { TableSelectionCell } from './TableSelectionCell';\nexport type {\n TableSelectionCellProps,\n TableSelectionCellSlots,\n TableSelectionCellState,\n} from './TableSelectionCell.types';\nexport { renderTableSelectionCell_unstable } from './renderTableSelectionCell';\nexport { useTableSelectionCell_unstable } from './useTableSelectionCell';\nexport {\n CELL_WIDTH,\n tableSelectionCellClassNames,\n useTableSelectionCellStyles_unstable,\n} from './useTableSelectionCellStyles.styles';\n"],"names":["TableSelectionCell","renderTableSelectionCell_unstable","useTableSelectionCell_unstable","CELL_WIDTH","tableSelectionCellClassNames","useTableSelectionCellStyles_unstable"],"mappings":";;;;;;;;;;;;eASEG,6CAAU;;;eATHH,sCAAkB;;;eAMlBC,2DAAiC;;;eAIxCG,+DAA4B;;;eAC5BC,uEAAoC;;;eAJ7BH,qDAA8B;;;oCAPJ,uBAAuB;0CAMR,6BAA6B;uCAChC,0BAA0B;mDAKlE,uCAAuC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TableSelectionCell/renderTableSelectionCell.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { TableSelectionCellState, TableSelectionCellSlots } from './TableSelectionCell.types';\n\n/**\n * Render the final JSX of TableSelectionCell\n */\nexport const renderTableSelectionCell_unstable = (state: TableSelectionCellState) => {\n assertSlots<TableSelectionCellSlots>(state);\n\n return (\n <state.root>\n {state.type === 'checkbox' && state.checkboxIndicator && <state.checkboxIndicator />}\n\n {state.type === 'radio' && state.radioIndicator && <state.radioIndicator />}\n </state.root>\n );\n};\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/components/TableSelectionCell/renderTableSelectionCell.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { TableSelectionCellState, TableSelectionCellSlots } from './TableSelectionCell.types';\n\n/**\n * Render the final JSX of TableSelectionCell\n */\nexport const renderTableSelectionCell_unstable = (state: TableSelectionCellState) => {\n assertSlots<TableSelectionCellSlots>(state);\n\n return (\n <state.root>\n {state.type === 'checkbox' && state.checkboxIndicator && <state.checkboxIndicator />}\n\n {state.type === 'radio' && state.radioIndicator && <state.radioIndicator />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderTableSelectionCell_unstable","state","root","type","checkboxIndicator","radioIndicator"],"mappings":";;;;+BAQaC;;;;;;4BAPb,iCAAiD;gCACrB,4BAA4B;AAMjD,0CAA0C,CAACC;QAChDF,2BAAAA,EAAqCE;IAErC,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAME,IAAI,KAAK,cAAcF,MAAMG,iBAAiB,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMG,iBAAiB,EAAA,CAAA;YAEhFH,MAAME,IAAI,KAAK,WAAWF,MAAMI,cAAc,IAAA,WAAA,OAAI,eAAA,EAACJ,MAAMI,cAAc,EAAA,CAAA;;;AAG9E,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TableSelectionCell/useTableSelectionCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useId, slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport { Radio } from '@fluentui/react-radio';\nimport type { TableSelectionCellProps, TableSelectionCellState } from './TableSelectionCell.types';\nimport { useTableCell_unstable } from '../TableCell/useTableCell';\nimport { useTableContext } from '../../contexts/tableContext';\nimport { useFocusWithin } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render TableSelectionCell.\n *\n * The returned state can be modified with hooks such as useTableSelectionCellStyles_unstable,\n * before being passed to renderTableSelectionCell_unstable.\n *\n * @param props - props from this instance of TableSelectionCell\n * @param ref - reference to root HTMLElement of TableSelectionCell\n */\nexport const useTableSelectionCell_unstable = (\n props: TableSelectionCellProps,\n ref: React.Ref<HTMLElement>,\n): TableSelectionCellState => {\n const tableCellState = useTableCell_unstable(props, useMergedRefs(ref, useFocusWithin()));\n const { noNativeElements } = useTableContext();\n const {\n type = 'checkbox',\n checked = false,\n subtle = false,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n hidden = false,\n invisible = false,\n } = props;\n\n return {\n ...tableCellState,\n components: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ...tableCellState.components,\n checkboxIndicator: Checkbox,\n radioIndicator: Radio,\n },\n checkboxIndicator: slot.optional(props.checkboxIndicator, {\n renderByDefault: type === 'checkbox',\n defaultProps: { checked: props.checked },\n elementType: Checkbox,\n }),\n radioIndicator: slot.optional(props.radioIndicator, {\n renderByDefault: type === 'radio',\n defaultProps: { checked: !!checked, input: { name: useId('table-selection-radio') } },\n elementType: Radio,\n }),\n type,\n checked,\n noNativeElements,\n subtle,\n hidden: invisible || hidden,\n };\n};\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/components/TableSelectionCell/useTableSelectionCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useId, slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport { Radio } from '@fluentui/react-radio';\nimport type { TableSelectionCellProps, TableSelectionCellState } from './TableSelectionCell.types';\nimport { useTableCell_unstable } from '../TableCell/useTableCell';\nimport { useTableContext } from '../../contexts/tableContext';\nimport { useFocusWithin } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render TableSelectionCell.\n *\n * The returned state can be modified with hooks such as useTableSelectionCellStyles_unstable,\n * before being passed to renderTableSelectionCell_unstable.\n *\n * @param props - props from this instance of TableSelectionCell\n * @param ref - reference to root HTMLElement of TableSelectionCell\n */\nexport const useTableSelectionCell_unstable = (\n props: TableSelectionCellProps,\n ref: React.Ref<HTMLElement>,\n): TableSelectionCellState => {\n const tableCellState = useTableCell_unstable(props, useMergedRefs(ref, useFocusWithin()));\n const { noNativeElements } = useTableContext();\n const {\n type = 'checkbox',\n checked = false,\n subtle = false,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n hidden = false,\n invisible = false,\n } = props;\n\n return {\n ...tableCellState,\n components: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ...tableCellState.components,\n checkboxIndicator: Checkbox,\n radioIndicator: Radio,\n },\n checkboxIndicator: slot.optional(props.checkboxIndicator, {\n renderByDefault: type === 'checkbox',\n defaultProps: { checked: props.checked },\n elementType: Checkbox,\n }),\n radioIndicator: slot.optional(props.radioIndicator, {\n renderByDefault: type === 'radio',\n defaultProps: { checked: !!checked, input: { name: useId('table-selection-radio') } },\n elementType: Radio,\n }),\n type,\n checked,\n noNativeElements,\n subtle,\n hidden: invisible || hidden,\n };\n};\n"],"names":["React","useId","slot","useMergedRefs","Checkbox","Radio","useTableCell_unstable","useTableContext","useFocusWithin","useTableSelectionCell_unstable","props","ref","tableCellState","noNativeElements","type","checked","subtle","hidden","invisible","components","checkboxIndicator","radioIndicator","optional","renderByDefault","defaultProps","elementType","input","name"],"mappings":";;;;+BAkBaS;;;;;;;iEAlBU,QAAQ;gCACY,4BAA4B;+BAC9C,2BAA2B;4BAC9B,wBAAwB;8BAER,4BAA4B;8BAClC,8BAA8B;8BAC/B,0BAA0B;AAWlD,uCAAuC,CAC5CC,OACAC;IAEA,MAAMC,qBAAiBN,mCAAAA,EAAsBI,WAAOP,6BAAAA,EAAcQ,KAAKH,gCAAAA;IACvE,MAAM,EAAEK,gBAAgB,EAAE,OAAGN,6BAAAA;IAC7B,MAAM,EACJO,OAAO,UAAU,EACjBC,UAAU,KAAK,EACfC,SAAS,KAAK,EACd,AACAC,SAAS,KAAK,EACdC,YAAY,KAAK,EAClB,GAAGR,sBAH0D;IAK9D,OAAO;QACL,GAAGE,cAAc;QACjBO,YAAY;YACV,4DAA4D;YAC5D,GAAGP,eAAeO,UAAU;YAC5BC,mBAAmBhB,uBAAAA;YACnBiB,gBAAgBhB,iBAAAA;QAClB;QACAe,mBAAmBlB,oBAAAA,CAAKoB,QAAQ,CAACZ,MAAMU,iBAAiB,EAAE;YACxDG,iBAAiBT,SAAS;YAC1BU,cAAc;gBAAET,SAASL,MAAMK,OAAO;YAAC;YACvCU,aAAarB,uBAAAA;QACf;QACAiB,gBAAgBnB,oBAAAA,CAAKoB,QAAQ,CAACZ,MAAMW,cAAc,EAAE;YAClDE,iBAAiBT,SAAS;YAC1BU,cAAc;gBAAET,SAAS,CAAC,CAACA;gBAASW,OAAO;oBAAEC,UAAM1B,qBAAAA,EAAM;gBAAyB;YAAE;YACpFwB,aAAapB,iBAAAA;QACf;QACAS;QACAC;QACAF;QACAG;QACAC,QAAQC,aAAaD;IACvB;AACF,EAAE"}
|
package/lib-commonjs/components/TableSelectionCell/useTableSelectionCellStyles.styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTableSelectionCellStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const CELL_WIDTH = 44;\nexport const tableSelectionCellClassNames = {\n root: 'fui-TableSelectionCell',\n checkboxIndicator: 'fui-TableSelectionCell__checkboxIndicator',\n radioIndicator: 'fui-TableSelectionCell__radioIndicator'\n};\nconst useTableLayoutStyles = makeStyles({\n root: {\n display: 'table-cell',\n width: `${CELL_WIDTH}px`\n }\n});\nconst useFlexLayoutStyles = makeStyles({\n root: {\n display: 'flex',\n flex: '1 1 0px',\n minWidth: `${CELL_WIDTH}px`,\n maxWidth: `${CELL_WIDTH}px`,\n justifyContent: 'center'\n }\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n textAlign: 'center',\n whiteSpace: 'nowrap',\n padding: '0',\n ...createCustomFocusIndicatorStyle({\n outline: `2px solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium\n }, {\n selector: 'focus'\n })\n },\n radioIndicator: {\n display: 'flex',\n flexGrow: 1,\n alignItems: 'center',\n justifyContent: 'center'\n },\n subtle: {\n opacity: 0,\n ...createCustomFocusIndicatorStyle({\n opacity: 1\n }, {\n selector: 'focus-within'\n })\n },\n hidden: {\n opacity: 0\n }\n});\n/**\n * Apply styling to the TableSelectionCell slots based on the state\n */ export const useTableSelectionCellStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const layoutStyles = {\n table: useTableLayoutStyles(),\n flex: useFlexLayoutStyles()\n };\n state.root.className = mergeClasses(tableSelectionCellClassNames.root, styles.root, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.subtle && state.checked === false && styles.subtle, state.hidden && styles.hidden, state.root.className);\n if (state.checkboxIndicator) {\n state.checkboxIndicator.className = mergeClasses(tableSelectionCellClassNames.checkboxIndicator, state.checkboxIndicator.className);\n }\n if (state.radioIndicator) {\n state.radioIndicator.className = mergeClasses(tableSelectionCellClassNames.radioIndicator, styles.radioIndicator, state.radioIndicator.className);\n }\n return state;\n};\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["useTableSelectionCellStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const CELL_WIDTH = 44;\nexport const tableSelectionCellClassNames = {\n root: 'fui-TableSelectionCell',\n checkboxIndicator: 'fui-TableSelectionCell__checkboxIndicator',\n radioIndicator: 'fui-TableSelectionCell__radioIndicator'\n};\nconst useTableLayoutStyles = makeStyles({\n root: {\n display: 'table-cell',\n width: `${CELL_WIDTH}px`\n }\n});\nconst useFlexLayoutStyles = makeStyles({\n root: {\n display: 'flex',\n flex: '1 1 0px',\n minWidth: `${CELL_WIDTH}px`,\n maxWidth: `${CELL_WIDTH}px`,\n justifyContent: 'center'\n }\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n textAlign: 'center',\n whiteSpace: 'nowrap',\n padding: '0',\n ...createCustomFocusIndicatorStyle({\n outline: `2px solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium\n }, {\n selector: 'focus'\n })\n },\n radioIndicator: {\n display: 'flex',\n flexGrow: 1,\n alignItems: 'center',\n justifyContent: 'center'\n },\n subtle: {\n opacity: 0,\n ...createCustomFocusIndicatorStyle({\n opacity: 1\n }, {\n selector: 'focus-within'\n })\n },\n hidden: {\n opacity: 0\n }\n});\n/**\n * Apply styling to the TableSelectionCell slots based on the state\n */ export const useTableSelectionCellStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const layoutStyles = {\n table: useTableLayoutStyles(),\n flex: useFlexLayoutStyles()\n };\n state.root.className = mergeClasses(tableSelectionCellClassNames.root, styles.root, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.subtle && state.checked === false && styles.subtle, state.hidden && styles.hidden, state.root.className);\n if (state.checkboxIndicator) {\n state.checkboxIndicator.className = mergeClasses(tableSelectionCellClassNames.checkboxIndicator, state.checkboxIndicator.className);\n }\n if (state.radioIndicator) {\n state.radioIndicator.className = mergeClasses(tableSelectionCellClassNames.radioIndicator, styles.radioIndicator, state.radioIndicator.className);\n }\n return state;\n};\n"],"names":["__styles","mergeClasses","createCustomFocusIndicatorStyle","tokens","CELL_WIDTH","tableSelectionCellClassNames","root","checkboxIndicator","radioIndicator","useTableLayoutStyles","mc9l5x","a9b677","d","useFlexLayoutStyles","xawz","Bh6795r","Bnnss6s","fkmc3a","Bf4jedk","B2u0y6b","Brf1p80","p","useStyles","fsow6f","Huce71","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Bfpq7zp","g9k6zt","Bn4voq9","giviqs","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","Bt984gj","subtle","abs64n","B8a84jv","hidden","useTableSelectionCellStyles_unstable","state","styles","layoutStyles","table","flex","className","noNativeElements","checked"],"mappings":"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"}
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: all[name]
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
CELL_WIDTH: function() {
|
|
13
|
+
return CELL_WIDTH;
|
|
14
|
+
},
|
|
15
|
+
tableSelectionCellClassNames: function() {
|
|
16
|
+
return tableSelectionCellClassNames;
|
|
17
|
+
},
|
|
18
|
+
useTableSelectionCellStyles_unstable: function() {
|
|
19
|
+
return useTableSelectionCellStyles_unstable;
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
const _react = require("@griffel/react");
|
|
23
|
+
const _reacttabster = require("@fluentui/react-tabster");
|
|
24
|
+
const _reacttheme = require("@fluentui/react-theme");
|
|
25
|
+
const CELL_WIDTH = 44;
|
|
26
|
+
const tableSelectionCellClassNames = {
|
|
27
|
+
root: 'fui-TableSelectionCell',
|
|
28
|
+
checkboxIndicator: 'fui-TableSelectionCell__checkboxIndicator',
|
|
29
|
+
radioIndicator: 'fui-TableSelectionCell__radioIndicator'
|
|
30
|
+
};
|
|
31
|
+
const useTableLayoutStyles = (0, _react.makeStyles)({
|
|
32
|
+
root: {
|
|
33
|
+
display: 'table-cell',
|
|
34
|
+
width: `${CELL_WIDTH}px`
|
|
35
|
+
}
|
|
36
|
+
});
|
|
37
|
+
const useFlexLayoutStyles = (0, _react.makeStyles)({
|
|
38
|
+
root: {
|
|
39
|
+
display: 'flex',
|
|
40
|
+
flex: '1 1 0px',
|
|
41
|
+
minWidth: `${CELL_WIDTH}px`,
|
|
42
|
+
maxWidth: `${CELL_WIDTH}px`,
|
|
43
|
+
justifyContent: 'center'
|
|
44
|
+
}
|
|
45
|
+
});
|
|
46
|
+
/**
|
|
47
|
+
* Styles for the root slot
|
|
48
|
+
*/ const useStyles = (0, _react.makeStyles)({
|
|
49
|
+
root: {
|
|
50
|
+
textAlign: 'center',
|
|
51
|
+
whiteSpace: 'nowrap',
|
|
52
|
+
padding: '0',
|
|
53
|
+
...(0, _reacttabster.createCustomFocusIndicatorStyle)({
|
|
54
|
+
outline: `2px solid ${_reacttheme.tokens.colorStrokeFocus2}`,
|
|
55
|
+
borderRadius: _reacttheme.tokens.borderRadiusMedium
|
|
56
|
+
}, {
|
|
57
|
+
selector: 'focus'
|
|
58
|
+
})
|
|
59
|
+
},
|
|
60
|
+
radioIndicator: {
|
|
61
|
+
display: 'flex',
|
|
62
|
+
flexGrow: 1,
|
|
63
|
+
alignItems: 'center',
|
|
64
|
+
justifyContent: 'center'
|
|
65
|
+
},
|
|
66
|
+
subtle: {
|
|
67
|
+
opacity: 0,
|
|
68
|
+
...(0, _reacttabster.createCustomFocusIndicatorStyle)({
|
|
69
|
+
opacity: 1
|
|
70
|
+
}, {
|
|
71
|
+
selector: 'focus-within'
|
|
72
|
+
})
|
|
73
|
+
},
|
|
74
|
+
hidden: {
|
|
75
|
+
opacity: 0
|
|
76
|
+
}
|
|
77
|
+
});
|
|
78
|
+
const useTableSelectionCellStyles_unstable = (state)=>{
|
|
79
|
+
'use no memo';
|
|
80
|
+
const styles = useStyles();
|
|
81
|
+
const layoutStyles = {
|
|
82
|
+
table: useTableLayoutStyles(),
|
|
83
|
+
flex: useFlexLayoutStyles()
|
|
84
|
+
};
|
|
85
|
+
state.root.className = (0, _react.mergeClasses)(tableSelectionCellClassNames.root, styles.root, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.subtle && state.checked === false && styles.subtle, state.hidden && styles.hidden, state.root.className);
|
|
86
|
+
if (state.checkboxIndicator) {
|
|
87
|
+
state.checkboxIndicator.className = (0, _react.mergeClasses)(tableSelectionCellClassNames.checkboxIndicator, state.checkboxIndicator.className);
|
|
88
|
+
}
|
|
89
|
+
if (state.radioIndicator) {
|
|
90
|
+
state.radioIndicator.className = (0, _react.mergeClasses)(tableSelectionCellClassNames.radioIndicator, styles.radioIndicator, state.radioIndicator.className);
|
|
91
|
+
}
|
|
92
|
+
return state;
|
|
93
|
+
};
|
package/lib-commonjs/components/TableSelectionCell/useTableSelectionCellStyles.styles.raw.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/TableSelectionCell/useTableSelectionCellStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { TableSelectionCellSlots, TableSelectionCellState } from './TableSelectionCell.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const CELL_WIDTH = 44;\n\nexport const tableSelectionCellClassNames: SlotClassNames<TableSelectionCellSlots> = {\n root: 'fui-TableSelectionCell',\n checkboxIndicator: 'fui-TableSelectionCell__checkboxIndicator',\n radioIndicator: 'fui-TableSelectionCell__radioIndicator',\n};\n\nconst useTableLayoutStyles = makeStyles({\n root: {\n display: 'table-cell',\n width: `${CELL_WIDTH}px`,\n },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n root: {\n display: 'flex',\n flex: '1 1 0px',\n minWidth: `${CELL_WIDTH}px`,\n maxWidth: `${CELL_WIDTH}px`,\n justifyContent: 'center',\n },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n textAlign: 'center',\n whiteSpace: 'nowrap',\n padding: '0',\n ...createCustomFocusIndicatorStyle(\n { outline: `2px solid ${tokens.colorStrokeFocus2}`, borderRadius: tokens.borderRadiusMedium },\n { selector: 'focus' },\n ),\n },\n\n radioIndicator: {\n display: 'flex',\n flexGrow: 1,\n alignItems: 'center',\n justifyContent: 'center',\n },\n\n subtle: {\n opacity: 0,\n ...createCustomFocusIndicatorStyle(\n {\n opacity: 1,\n },\n { selector: 'focus-within' },\n ),\n },\n\n hidden: {\n opacity: 0,\n },\n});\n\n/**\n * Apply styling to the TableSelectionCell slots based on the state\n */\nexport const useTableSelectionCellStyles_unstable = (state: TableSelectionCellState): TableSelectionCellState => {\n 'use no memo';\n\n const styles = useStyles();\n const layoutStyles = {\n table: useTableLayoutStyles(),\n flex: useFlexLayoutStyles(),\n };\n state.root.className = mergeClasses(\n tableSelectionCellClassNames.root,\n styles.root,\n state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n state.subtle && state.checked === false && styles.subtle,\n state.hidden && styles.hidden,\n state.root.className,\n );\n if (state.checkboxIndicator) {\n state.checkboxIndicator.className = mergeClasses(\n tableSelectionCellClassNames.checkboxIndicator,\n state.checkboxIndicator.className,\n );\n }\n\n if (state.radioIndicator) {\n state.radioIndicator.className = mergeClasses(\n tableSelectionCellClassNames.radioIndicator,\n styles.radioIndicator,\n state.radioIndicator.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","CELL_WIDTH","tableSelectionCellClassNames","root","checkboxIndicator","radioIndicator","useTableLayoutStyles","display","width","useFlexLayoutStyles","flex","minWidth","maxWidth","justifyContent","useStyles","textAlign","whiteSpace","padding","outline","colorStrokeFocus2","borderRadius","borderRadiusMedium","selector","flexGrow","alignItems","subtle","opacity","hidden","useTableSelectionCellStyles_unstable","state","styles","layoutStyles","table","className","noNativeElements","checked"],"mappings":";;;;;;;;;;;IAMaI,UAAAA;;;IAEAC,4BAAAA;;;wCA8DA0B;eAAAA;;;uBAtE4B,iBAAiB;8BAGV,0BAA0B;4BACnD,wBAAwB;AAExC,mBAAmB,GAAG;AAEtB,qCAA8E;IACnFzB,MAAM;IACNC,mBAAmB;IACnBC,gBAAgB;AAClB,EAAE;AAEF,MAAMC,2BAAuBT,iBAAAA,EAAW;IACtCM,MAAM;QACJI,SAAS;QACTC,OAAO,GAAGP,WAAW,EAAE,CAAC;IAC1B;AACF;AAEA,MAAMQ,0BAAsBZ,iBAAAA,EAAW;IACrCM,MAAM;QACJI,SAAS;QACTG,MAAM;QACNC,UAAU,GAAGV,WAAW,EAAE,CAAC;QAC3BW,UAAU,GAAGX,WAAW,EAAE,CAAC;QAC3BY,gBAAgB;IAClB;AACF;AAEA;;CAEC,GACD,MAAMC,gBAAYjB,iBAAAA,EAAW;IAC3BM,MAAM;QACJY,WAAW;QACXC,YAAY;QACZC,SAAS;QACT,OAAGlB,6CAAAA,EACD;YAAEmB,SAAS,CAAC,UAAU,EAAElB,kBAAAA,CAAOmB,iBAAiB,EAAE;YAAEC,cAAcpB,kBAAAA,CAAOqB,kBAAkB;QAAC,GAC5F;YAAEC,UAAU;QAAQ,EACrB;IACH;IAEAjB,gBAAgB;QACdE,SAAS;QACTgB,UAAU;QACVC,YAAY;QACZX,gBAAgB;IAClB;IAEAY,QAAQ;QACNC,SAAS;QACT,GAAG3B,iDAAAA,EACD;YACE2B,SAAS;QACX,GACA;YAAEJ,UAAU;QAAe,EAC5B;IACH;IAEAK,QAAQ;QACND,SAAS;IACX;AACF;AAKO,6CAA6C,CAACG;IACnD;IAEA,MAAMC,SAAShB;IACf,MAAMiB,eAAe;QACnBC,OAAO1B;QACPI,MAAMD;IACR;IACAoB,MAAM1B,IAAI,CAAC8B,SAAS,OAAGnC,mBAAAA,EACrBI,6BAA6BC,IAAI,EACjC2B,OAAO3B,IAAI,EACX0B,MAAMK,gBAAgB,GAAGH,aAAarB,IAAI,CAACP,IAAI,GAAG4B,aAAaC,KAAK,CAAC7B,IAAI,EACzE0B,MAAMJ,MAAM,IAAII,MAAMM,OAAO,KAAK,SAASL,OAAOL,MAAM,EACxDI,MAAMF,MAAM,IAAIG,OAAOH,MAAM,EAC7BE,MAAM1B,IAAI,CAAC8B,SAAS;IAEtB,IAAIJ,MAAMzB,iBAAiB,EAAE;QAC3ByB,MAAMzB,iBAAiB,CAAC6B,SAAS,OAAGnC,mBAAAA,EAClCI,6BAA6BE,iBAAiB,EAC9CyB,MAAMzB,iBAAiB,CAAC6B,SAAS;IAErC;IAEA,IAAIJ,MAAMxB,cAAc,EAAE;QACxBwB,MAAMxB,cAAc,CAAC4B,SAAS,OAAGnC,mBAAAA,EAC/BI,6BAA6BG,cAAc,EAC3CyB,OAAOzB,cAAc,EACrBwB,MAAMxB,cAAc,CAAC4B,SAAS;IAElC;IAEA,OAAOJ;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/contexts/columnIdContext.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TableColumnId } from '../hooks/';\n\nconst columnIdContext = React.createContext<TableColumnId | undefined>(undefined);\n\nexport const columnIdContextDefaultValue = '';\n\nexport const useColumnIdContext = () => React.useContext(columnIdContext) ?? columnIdContextDefaultValue;\n\nexport const ColumnIdContextProvider = columnIdContext.Provider;\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/contexts/columnIdContext.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TableColumnId } from '../hooks/';\n\nconst columnIdContext = React.createContext<TableColumnId | undefined>(undefined);\n\nexport const columnIdContextDefaultValue = '';\n\nexport const useColumnIdContext = () => React.useContext(columnIdContext) ?? columnIdContextDefaultValue;\n\nexport const ColumnIdContextProvider = columnIdContext.Provider;\n"],"names":["React","columnIdContext","createContext","undefined","columnIdContextDefaultValue","useColumnIdContext","useContext","ColumnIdContextProvider","Provider"],"mappings":";;;;;;;;;;;2BASaO;;;+BAJAH;;;sBAEAC;;;;;iEAPU,QAAQ;AAG/B,MAAMJ,gCAAkBD,OAAME,aAAa,CAA4BC;AAEhE,MAAMC,8BAA8B,GAAG;AAEvC,MAAMC,qBAAqB;QAAML;WAAAA,CAAAA,oBAAAA,OAAMM,UAAU,CAACL,gBAAAA,MAAAA,QAAjBD,sBAAAA,KAAAA,IAAAA,oBAAqCI;EAA4B;AAElG,MAAMG,0BAA0BN,gBAAgBO,QAAQ,CAAC"}
|