@fluentui/react-table 9.0.0-alpha.5 → 9.0.0-alpha.7
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.json +117 -1
- package/CHANGELOG.md +32 -2
- package/dist/index.d.ts +19 -4
- package/lib/components/Table/useTableStyles.js +2 -2
- package/lib/components/Table/useTableStyles.js.map +1 -1
- package/lib/components/TableHeader/renderTableHeader.js +5 -2
- package/lib/components/TableHeader/renderTableHeader.js.map +1 -1
- package/lib/components/TableHeaderCell/useTableHeaderCellStyles.js +8 -2
- package/lib/components/TableHeaderCell/useTableHeaderCellStyles.js.map +1 -1
- package/lib/components/TableRow/TableRow.types.js.map +1 -1
- package/lib/components/TableRow/useTableRow.js +7 -4
- package/lib/components/TableRow/useTableRow.js.map +1 -1
- package/lib/components/TableRow/useTableRowStyles.js +158 -6
- package/lib/components/TableRow/useTableRowStyles.js.map +1 -1
- package/lib/components/TableSelectionCell/TableSelectionCell.types.js.map +1 -1
- package/lib/components/TableSelectionCell/useTableSelectionCell.js +13 -9
- package/lib/components/TableSelectionCell/useTableSelectionCell.js.map +1 -1
- package/lib/components/TableSelectionCell/useTableSelectionCellStyles.js +12 -3
- package/lib/components/TableSelectionCell/useTableSelectionCellStyles.js.map +1 -1
- package/lib/contexts/tableHeaderContext.js +6 -0
- package/lib/contexts/tableHeaderContext.js.map +1 -0
- package/lib-commonjs/components/Table/useTableStyles.js +2 -2
- package/lib-commonjs/components/Table/useTableStyles.js.map +1 -1
- package/lib-commonjs/components/TableHeader/renderTableHeader.js +6 -2
- package/lib-commonjs/components/TableHeader/renderTableHeader.js.map +1 -1
- package/lib-commonjs/components/TableHeaderCell/useTableHeaderCellStyles.js +8 -2
- package/lib-commonjs/components/TableHeaderCell/useTableHeaderCellStyles.js.map +1 -1
- package/lib-commonjs/components/TableRow/useTableRow.js +7 -3
- package/lib-commonjs/components/TableRow/useTableRow.js.map +1 -1
- package/lib-commonjs/components/TableRow/useTableRowStyles.js +161 -6
- package/lib-commonjs/components/TableRow/useTableRowStyles.js.map +1 -1
- package/lib-commonjs/components/TableSelectionCell/useTableSelectionCell.js +13 -10
- package/lib-commonjs/components/TableSelectionCell/useTableSelectionCell.js.map +1 -1
- package/lib-commonjs/components/TableSelectionCell/useTableSelectionCellStyles.js +13 -3
- package/lib-commonjs/components/TableSelectionCell/useTableSelectionCellStyles.js.map +1 -1
- package/lib-commonjs/contexts/tableHeaderContext.js +17 -0
- package/lib-commonjs/contexts/tableHeaderContext.js.map +1 -0
- package/package.json +14 -13
- package/lib/navigationModes/cell.js +0 -250
- package/lib/navigationModes/cell.js.map +0 -1
- package/lib/navigationModes/composite.js +0 -208
- package/lib/navigationModes/composite.js.map +0 -1
- package/lib/navigationModes/index.js +0 -3
- package/lib/navigationModes/index.js.map +0 -1
- package/lib/navigationModes/useNavigationMode.js +0 -42
- package/lib/navigationModes/useNavigationMode.js.map +0 -1
- package/lib-commonjs/navigationModes/cell.js +0 -259
- package/lib-commonjs/navigationModes/cell.js.map +0 -1
- package/lib-commonjs/navigationModes/composite.js +0 -217
- package/lib-commonjs/navigationModes/composite.js.map +0 -1
- package/lib-commonjs/navigationModes/index.js +0 -16
- package/lib-commonjs/navigationModes/index.js.map +0 -1
- package/lib-commonjs/navigationModes/useNavigationMode.js +0 -55
- package/lib-commonjs/navigationModes/useNavigationMode.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-table/src/components/TableRow/useTableRowStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAGA,SAAS,0BAAT,QAA2C,+CAA3C;AAEA,OAAO,MAAM,iBAAiB,GAAG,cAA1B;AACP,OAAO,MAAM,kBAAkB,GAAkC;EAC/D,IAAI,EAAE;AADyD,CAA1D;;AAIP,MAAM,oBAAoB,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA7B;;AAkBA,MAAM,mBAAmB,gBAAG;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA5B;AAmBA;;AAEG;;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;AAAA,EAAlB;
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-table/src/components/TableRow/useTableRowStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAGA,SAAS,0BAAT,QAA2C,+CAA3C;AACA,SAAS,4BAAT,QAA6C,mDAA7C;AACA,SAAS,+BAAT,QAAgD,yBAAhD;AACA,SAAS,kBAAT,QAAmC,mCAAnC;AAEA,OAAO,MAAM,iBAAiB,GAAG,cAA1B;AACP,OAAO,MAAM,kBAAkB,GAAkC;EAC/D,IAAI,EAAE;AADyD,CAA1D;;AAIP,MAAM,oBAAoB,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA7B;;AAkBA,MAAM,mBAAmB,gBAAG;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA5B;AAmBA;;AAEG;;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAAlB;AAwGA;;AAEG;;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAAwC;EAChF,MAAM,WAAW,GAAG,kBAAkB,EAAtC;EACA,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM,YAAY,GAAG;IACnB,KAAK,EAAE,oBAAoB,EADR;IAEnB,IAAI,EAAE,mBAAmB;EAFN,CAArB;EAIA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,kBAAkB,CAAC,IADc,EAEjC,MAAM,CAAC,IAF0B,EAGjC,CAAC,WAAD,IAAgB,MAAM,CAAC,eAHU,EAIjC,MAAM,CAAC,KAAK,CAAC,IAAP,CAJ2B,EAKjC,KAAK,CAAC,gBAAN,GAAyB,YAAY,CAAC,IAAb,CAAkB,IAA3C,GAAkD,YAAY,CAAC,KAAb,CAAmB,IALpC,EAMjC,KAAK,CAAC,gBAAN,GAAyB,YAAY,CAAC,IAAb,CAAkB,KAAK,CAAC,IAAxB,CAAzB,GAAyD,YAAY,CAAC,KAAb,CAAmB,KAAK,CAAC,IAAzB,CANxB,EAOjC,MAAM,CAAC,KAAK,CAAC,UAAP,CAP2B,EAQjC,KAAK,CAAC,IAAN,CAAW,SARsB,CAAnC;EAWA,OAAO,KAAP;AACD,CAnBM","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';\nimport { tableSelectionCellClassNames } from '../TableSelectionCell/useTableSelectionCellStyles';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\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 medium: {\n height: '44px',\n },\n\n small: {\n height: '34px',\n },\n\n smaller: {\n height: '24px',\n },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n },\n\n medium: {\n minHeight: '44px',\n },\n\n small: {\n minHeight: '34px',\n },\n\n smaller: {\n minHeight: '24px',\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 },\n { selector: 'focus-within' },\n ),\n ...createCustomFocusIndicatorStyle(\n {\n ...shorthands.outline('2px', 'solid'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n { selector: 'focus', enableOutline: true },\n ),\n },\n\n rootInteractive: {\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground1Pressed,\n [`& .${tableCellActionsClassNames.root}`]: {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n opacity: 1,\n },\n [`& .${tableSelectionCellClassNames.root}`]: {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n opacity: 1,\n },\n },\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground1Hover,\n [`& .${tableCellActionsClassNames.root}`]: {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n opacity: 1,\n },\n [`& .${tableSelectionCellClassNames.root}`]: {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n opacity: 1,\n },\n },\n },\n\n medium: {\n ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n },\n\n small: {\n ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n },\n\n smaller: {\n fontSize: tokens.fontSizeBase200,\n },\n\n brand: {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorNeutralForeground1Hover,\n ...shorthands.borderColor(tokens.colorNeutralStrokeOnBrand),\n ':hover': {\n backgroundColor: tokens.colorBrandBackground2,\n },\n ':active': {\n backgroundColor: tokens.colorBrandBackgroundInvertedSelected,\n },\n\n '@media(forced-colors: active)': {\n ...shorthands.border('2px', 'solid', 'transparent'),\n ...shorthands.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 ...shorthands.border('2px', 'solid', 'transparent'),\n ...shorthands.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\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 const isHeaderRow = useIsInTableHeader();\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 !isHeaderRow && styles.rootInteractive,\n styles[state.size],\n state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n state.noNativeElements ? layoutStyles.flex[state.size] : layoutStyles.table[state.size],\n styles[state.appearance],\n state.root.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableSelectionCell.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableSelectionCell/TableSelectionCell.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { Checkbox, CheckboxProps } from '@fluentui/react-checkbox';\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<
|
|
1
|
+
{"version":3,"file":"TableSelectionCell.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableSelectionCell/TableSelectionCell.types.ts"],"names":[],"mappings":"","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<Omit<TableSelectionCellSlots, 'media'>>> & {\n /**\n * A table can have two kinds of selection modes\n */\n type?: 'checkbox' | 'radio';\n checked?: CheckboxProps['checked'];\n /**\n * Only visible when checked or the parent row is hovered\n */\n subtle?: boolean;\n\n /**\n * Completely hides the selection cell visually but takes up the same space\n */\n hidden?: boolean;\n};\n\n/**\n * State used in rendering TableSelectionCell\n */\nexport type TableSelectionCellState = ComponentState<TableSelectionCellSlots> &\n Pick<Required<TableSelectionCellProps>, 'type' | 'checked' | 'subtle' | 'hidden'> &\n Pick<TableContextValue, 'noNativeElements'>;\n"]}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
1
|
import { resolveShorthand } from '@fluentui/react-utilities';
|
|
3
2
|
import { Checkbox } from '@fluentui/react-checkbox';
|
|
4
|
-
import {
|
|
3
|
+
import { Radio } from '@fluentui/react-radio';
|
|
5
4
|
import { useTableCell_unstable } from '../TableCell/useTableCell';
|
|
6
5
|
import { useTableContext } from '../../contexts/tableContext';
|
|
7
6
|
/**
|
|
@@ -15,17 +14,20 @@ import { useTableContext } from '../../contexts/tableContext';
|
|
|
15
14
|
*/
|
|
16
15
|
|
|
17
16
|
export const useTableSelectionCell_unstable = (props, ref) => {
|
|
18
|
-
var _a, _b;
|
|
19
|
-
|
|
20
17
|
const tableCellState = useTableCell_unstable(props, ref);
|
|
21
18
|
const {
|
|
22
19
|
noNativeElements
|
|
23
20
|
} = useTableContext();
|
|
24
|
-
const
|
|
21
|
+
const {
|
|
22
|
+
type = 'checkbox',
|
|
23
|
+
checked = false,
|
|
24
|
+
subtle = false,
|
|
25
|
+
hidden = false
|
|
26
|
+
} = props;
|
|
25
27
|
return { ...tableCellState,
|
|
26
28
|
components: { ...tableCellState.components,
|
|
27
29
|
checkboxIndicator: Checkbox,
|
|
28
|
-
radioIndicator:
|
|
30
|
+
radioIndicator: Radio
|
|
29
31
|
},
|
|
30
32
|
checkboxIndicator: resolveShorthand(props.checkboxIndicator, {
|
|
31
33
|
required: type === 'checkbox',
|
|
@@ -36,12 +38,14 @@ export const useTableSelectionCell_unstable = (props, ref) => {
|
|
|
36
38
|
radioIndicator: resolveShorthand(props.radioIndicator, {
|
|
37
39
|
required: type === 'radio',
|
|
38
40
|
defaultProps: {
|
|
39
|
-
|
|
41
|
+
checked: !!checked
|
|
40
42
|
}
|
|
41
43
|
}),
|
|
42
44
|
type,
|
|
43
|
-
checked
|
|
44
|
-
noNativeElements
|
|
45
|
+
checked,
|
|
46
|
+
noNativeElements,
|
|
47
|
+
subtle,
|
|
48
|
+
hidden
|
|
45
49
|
};
|
|
46
50
|
};
|
|
47
51
|
//# sourceMappingURL=useTableSelectionCell.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCell.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCell.tsx"],"names":[],"mappings":"AACA,SAAS,gBAAT,QAAiC,2BAAjC;AACA,SAAS,QAAT,QAAyB,0BAAzB;AACA,SAAS,KAAT,QAAsB,uBAAtB;AAEA,SAAS,qBAAT,QAAsC,2BAAtC;AACA,SAAS,eAAT,QAAgC,6BAAhC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,8BAA8B,GAAG,CAC5C,KAD4C,EAE5C,GAF4C,KAGjB;EAC3B,MAAM,cAAc,GAAG,qBAAqB,CAAC,KAAD,EAAQ,GAAR,CAA5C;EACA,MAAM;IAAE;EAAF,IAAuB,eAAe,EAA5C;EACA,MAAM;IAAE,IAAI,GAAG,UAAT;IAAqB,OAAO,GAAG,KAA/B;IAAsC,MAAM,GAAG,KAA/C;IAAsD,MAAM,GAAG;EAA/D,IAAyE,KAA/E;EAEA,OAAO,EACL,GAAG,cADE;IAEL,UAAU,EAAE,EACV,GAAG,cAAc,CAAC,UADR;MAEV,iBAAiB,EAAE,QAFT;MAGV,cAAc,EAAE;IAHN,CAFP;IAOL,iBAAiB,EAAE,gBAAgB,CAAC,KAAK,CAAC,iBAAP,EAA0B;MAC3D,QAAQ,EAAE,IAAI,KAAK,UADwC;MAE3D,YAAY,EAAE;QAAE,OAAO,EAAE,KAAK,CAAC;MAAjB;IAF6C,CAA1B,CAP9B;IAWL,cAAc,EAAE,gBAAgB,CAAC,KAAK,CAAC,cAAP,EAAuB;MACrD,QAAQ,EAAE,IAAI,KAAK,OADkC;MAErD,YAAY,EAAE;QAAE,OAAO,EAAE,CAAC,CAAC;MAAb;IAFuC,CAAvB,CAX3B;IAeL,IAfK;IAgBL,OAhBK;IAiBL,gBAjBK;IAkBL,MAlBK;IAmBL;EAnBK,CAAP;AAqBD,CA7BM","sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } 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';\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, ref);\n const { noNativeElements } = useTableContext();\n const { type = 'checkbox', checked = false, subtle = false, hidden = false } = props;\n\n return {\n ...tableCellState,\n components: {\n ...tableCellState.components,\n checkboxIndicator: Checkbox,\n radioIndicator: Radio,\n },\n checkboxIndicator: resolveShorthand(props.checkboxIndicator, {\n required: type === 'checkbox',\n defaultProps: { checked: props.checked },\n }),\n radioIndicator: resolveShorthand(props.radioIndicator, {\n required: type === 'radio',\n defaultProps: { checked: !!checked },\n }),\n type,\n checked,\n noNativeElements,\n subtle,\n hidden,\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { __styles, mergeClasses, shorthands } from '@griffel/react';
|
|
2
|
+
import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
|
|
2
3
|
export const tableSelectionCellClassNames = {
|
|
3
4
|
root: 'fui-TableSelectionCell',
|
|
4
5
|
checkboxIndicator: 'fui-TableSelectionCell__checkboxIndicator',
|
|
@@ -49,11 +50,19 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
49
50
|
"B5pe6w7": "f1cqkysu",
|
|
50
51
|
"p4uzdd": "f1sgf1mg"
|
|
51
52
|
},
|
|
53
|
+
"subtle": {
|
|
54
|
+
"abs64n": "fk73vx1",
|
|
55
|
+
"Brovlpu": "ftqa4ok",
|
|
56
|
+
"B486eqv": "f2hkw1w",
|
|
57
|
+
"B113ap8": "f1upwfw9"
|
|
58
|
+
},
|
|
52
59
|
"hidden": {
|
|
53
60
|
"Bcdw1i0": "fd7fpy0"
|
|
54
61
|
}
|
|
55
62
|
}, {
|
|
56
|
-
"d": [".f17mccla{text-align:center;}", ".fz5stix{white-space:nowrap;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1cqkysu svg{width:16px;}", ".f1sgf1mg svg{height:16px;}", ".fd7fpy0{visibility:hidden;}"]
|
|
63
|
+
"d": [".f17mccla{text-align:center;}", ".fz5stix{white-space:nowrap;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1cqkysu svg{width:16px;}", ".f1sgf1mg svg{height:16px;}", ".fk73vx1{opacity:0;}", ".f1upwfw9[data-fui-focus-visible]:focus-within{opacity:1;}", ".fd7fpy0{visibility:hidden;}"],
|
|
64
|
+
"f": [".ftqa4ok:focus{outline-style:none;}"],
|
|
65
|
+
"i": [".f2hkw1w:focus-visible{outline-style:none;}"]
|
|
57
66
|
});
|
|
58
67
|
/**
|
|
59
68
|
* Apply styling to the TableSelectionCell slots based on the state
|
|
@@ -66,14 +75,14 @@ export const useTableSelectionCellStyles_unstable = state => {
|
|
|
66
75
|
table: useTableLayoutStyles(),
|
|
67
76
|
flex: useFlexLayoutStyles()
|
|
68
77
|
};
|
|
69
|
-
state.root.className = mergeClasses(tableSelectionCellClassNames.root, styles.root, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.root.className);
|
|
78
|
+
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);
|
|
70
79
|
|
|
71
80
|
if (state.checkboxIndicator) {
|
|
72
81
|
state.checkboxIndicator.className = mergeClasses(tableSelectionCellClassNames.checkboxIndicator, state.checkboxIndicator.className);
|
|
73
82
|
}
|
|
74
83
|
|
|
75
84
|
if (state.radioIndicator) {
|
|
76
|
-
state.radioIndicator.className = mergeClasses(tableSelectionCellClassNames.radioIndicator, styles.radioIndicator, state.
|
|
85
|
+
state.radioIndicator.className = mergeClasses(tableSelectionCellClassNames.radioIndicator, styles.radioIndicator, state.radioIndicator.className);
|
|
77
86
|
}
|
|
78
87
|
|
|
79
88
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCellStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCellStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAGA,SAAS,+BAAT,QAAgD,yBAAhD;AAEA,OAAO,MAAM,4BAA4B,GAA4C;EACnF,IAAI,EAAE,wBAD6E;EAEnF,iBAAiB,EAAE,2CAFgE;EAGnF,cAAc,EAAE;AAHmE,CAA9E;;AAMP,MAAM,oBAAoB,gBAAG;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA7B;;AAOA,MAAM,mBAAmB,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA5B;AAUA;;AAEG;;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAAlB;AAiCA;;AAEG;;;AACH,OAAO,MAAM,oCAAoC,GAAI,KAAD,IAA4D;EAC9G,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM,YAAY,GAAG;IACnB,KAAK,EAAE,oBAAoB,EADR;IAEnB,IAAI,EAAE,mBAAmB;EAFN,CAArB;EAIA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,4BAA4B,CAAC,IADI,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,gBAAN,GAAyB,YAAY,CAAC,IAAb,CAAkB,IAA3C,GAAkD,YAAY,CAAC,KAAb,CAAmB,IAHpC,EAIjC,KAAK,CAAC,MAAN,IAAgB,KAAK,CAAC,OAAN,KAAkB,KAAlC,IAA2C,MAAM,CAAC,MAJjB,EAKjC,KAAK,CAAC,MAAN,IAAgB,MAAM,CAAC,MALU,EAMjC,KAAK,CAAC,IAAN,CAAW,SANsB,CAAnC;;EAQA,IAAI,KAAK,CAAC,iBAAV,EAA6B;IAC3B,KAAK,CAAC,iBAAN,CAAwB,SAAxB,GAAoC,YAAY,CAC9C,4BAA4B,CAAC,iBADiB,EAE9C,KAAK,CAAC,iBAAN,CAAwB,SAFsB,CAAhD;EAID;;EAED,IAAI,KAAK,CAAC,cAAV,EAA0B;IACxB,KAAK,CAAC,cAAN,CAAqB,SAArB,GAAiC,YAAY,CAC3C,4BAA4B,CAAC,cADc,EAE3C,MAAM,CAAC,cAFoC,EAG3C,KAAK,CAAC,cAAN,CAAqB,SAHsB,CAA7C;EAKD;;EAED,OAAO,KAAP;AACD,CA9BM","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { TableSelectionCellSlots, TableSelectionCellState } from './TableSelectionCell.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\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: '44px',\n },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n root: {\n display: 'flex',\n ...shorthands.flex(1, 1, '0px'),\n minWidth: '44px',\n maxWidth: '44px',\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 ...shorthands.padding(0),\n },\n\n radioIndicator: {\n display: 'flex',\n flexGrow: 1,\n alignItems: 'center',\n justifyContent: 'center',\n '& svg': {\n width: '16px',\n height: '16px',\n },\n },\n\n subtle: {\n opacity: 0,\n ...createCustomFocusIndicatorStyle(\n {\n opacity: 1,\n },\n { selector: 'focus-within' },\n ),\n },\n\n hidden: {\n visibility: 'hidden',\n },\n});\n\n/**\n * Apply styling to the TableSelectionCell slots based on the state\n */\nexport const useTableSelectionCellStyles_unstable = (state: TableSelectionCellState): TableSelectionCellState => {\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"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
const tableHeaderContext = /*#__PURE__*/React.createContext(undefined);
|
|
3
|
+
const tableHeaderContextDefaultValue = '';
|
|
4
|
+
export const TableHeaderContextProvider = tableHeaderContext.Provider;
|
|
5
|
+
export const useIsInTableHeader = () => React.useContext(tableHeaderContext) === tableHeaderContextDefaultValue;
|
|
6
|
+
//# sourceMappingURL=tableHeaderContext.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-table/src/contexts/tableHeaderContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,MAAM,kBAAkB,gBAAG,KAAK,CAAC,aAAN,CAAwC,SAAxC,CAA3B;AAEA,MAAM,8BAA8B,GAAG,EAAvC;AAEA,OAAO,MAAM,0BAA0B,GAAG,kBAAkB,CAAC,QAAtD;AACP,OAAO,MAAM,kBAAkB,GAAG,MAAM,KAAK,CAAC,UAAN,CAAiB,kBAAjB,MAAyC,8BAA1E","sourcesContent":["import * as React from 'react';\n\nconst tableHeaderContext = React.createContext<string | undefined>(undefined);\n\nconst tableHeaderContextDefaultValue = '';\n\nexport const TableHeaderContextProvider = tableHeaderContext.Provider;\nexport const useIsInTableHeader = () => React.useContext(tableHeaderContext) === tableHeaderContextDefaultValue;\n"],"sourceRoot":"../src/"}
|
|
@@ -40,10 +40,10 @@ const useFlexLayoutStyles = /*#__PURE__*/react_1.__styles({
|
|
|
40
40
|
const useStyles = /*#__PURE__*/react_1.__styles({
|
|
41
41
|
"root": {
|
|
42
42
|
"po53p8": "fgkb47j",
|
|
43
|
-
"De3pzq": "
|
|
43
|
+
"De3pzq": "fhovq9v"
|
|
44
44
|
}
|
|
45
45
|
}, {
|
|
46
|
-
"d": [".fgkb47j{border-collapse:collapse;}", ".
|
|
46
|
+
"d": [".fgkb47j{border-collapse:collapse;}", ".fhovq9v{background-color:var(--colorSubtleBackground);}"]
|
|
47
47
|
});
|
|
48
48
|
/**
|
|
49
49
|
* Apply styling to the Table slots based on the state
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-table/src/components/Table/useTableStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAIa,OAAA,CAAA,cAAA,GAAiB,WAAjB;AACA,OAAA,CAAA,eAAA,GAA8C;EACzD,IAAI,EAAE;AADmD,CAA9C;;AAIb,MAAM,oBAAoB,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA7B;;AASA,MAAM,mBAAmB,gBAAG,OAAA,SAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA5B;AAMA;;AAEG;;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAOA;;AAEG;;;AACI,MAAM,uBAAuB,GAAI,KAAD,IAAkC;EACvE,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM,YAAY,GAAG;IACnB,KAAK,EAAE,oBAAoB,EADR;IAEnB,IAAI,EAAE,mBAAmB;EAFN,CAArB;EAIA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,cADqB,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,gBAAN,GAAyB,YAAY,CAAC,IAAb,CAAkB,IAA3C,GAAkD,YAAY,CAAC,KAAb,CAAmB,IAHhD,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;EAOA,OAAO,KAAP;AACD,CAdM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TableSlots, TableState } from './Table.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tableClassName = 'fui-Table';\nexport const tableClassNames: SlotClassNames<TableSlots> = {\n root: 'fui-Table',\n};\n\nconst useTableLayoutStyles = makeStyles({\n root: {\n display: 'table',\n verticalAlign: 'middle',\n width: '100%',\n tableLayout: 'fixed',\n },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n root: {\n display: 'block',\n },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n borderCollapse: 'collapse',\n backgroundColor: tokens.
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-table/src/components/Table/useTableStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAIa,OAAA,CAAA,cAAA,GAAiB,WAAjB;AACA,OAAA,CAAA,eAAA,GAA8C;EACzD,IAAI,EAAE;AADmD,CAA9C;;AAIb,MAAM,oBAAoB,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA7B;;AASA,MAAM,mBAAmB,gBAAG,OAAA,SAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA5B;AAMA;;AAEG;;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAOA;;AAEG;;;AACI,MAAM,uBAAuB,GAAI,KAAD,IAAkC;EACvE,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM,YAAY,GAAG;IACnB,KAAK,EAAE,oBAAoB,EADR;IAEnB,IAAI,EAAE,mBAAmB;EAFN,CAArB;EAIA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,cADqB,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,gBAAN,GAAyB,YAAY,CAAC,IAAb,CAAkB,IAA3C,GAAkD,YAAY,CAAC,KAAb,CAAmB,IAHhD,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;EAOA,OAAO,KAAP;AACD,CAdM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TableSlots, TableState } from './Table.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tableClassName = 'fui-Table';\nexport const tableClassNames: SlotClassNames<TableSlots> = {\n root: 'fui-Table',\n};\n\nconst useTableLayoutStyles = makeStyles({\n root: {\n display: 'table',\n verticalAlign: 'middle',\n width: '100%',\n tableLayout: 'fixed',\n },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n root: {\n display: 'block',\n },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n borderCollapse: 'collapse',\n backgroundColor: tokens.colorSubtleBackground,\n },\n});\n\n/**\n * Apply styling to the Table slots based on the state\n */\nexport const useTableStyles_unstable = (state: TableState): TableState => {\n const styles = useStyles();\n const layoutStyles = {\n table: useTableLayoutStyles(),\n flex: useFlexLayoutStyles(),\n };\n state.root.className = mergeClasses(\n tableClassName,\n styles.root,\n state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n state.root.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -8,6 +8,8 @@ exports.renderTableHeader_unstable = void 0;
|
|
|
8
8
|
const React = /*#__PURE__*/require("react");
|
|
9
9
|
|
|
10
10
|
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
11
|
+
|
|
12
|
+
const tableHeaderContext_1 = /*#__PURE__*/require("../../contexts/tableHeaderContext");
|
|
11
13
|
/**
|
|
12
14
|
* Render the final JSX of TableHeader
|
|
13
15
|
*/
|
|
@@ -18,8 +20,10 @@ const renderTableHeader_unstable = state => {
|
|
|
18
20
|
slots,
|
|
19
21
|
slotProps
|
|
20
22
|
} = react_utilities_1.getSlots(state);
|
|
21
|
-
return React.createElement(
|
|
22
|
-
|
|
23
|
+
return React.createElement(tableHeaderContext_1.TableHeaderContextProvider, {
|
|
24
|
+
value: ""
|
|
25
|
+
}, React.createElement(slots.root, { ...slotProps.root
|
|
26
|
+
}));
|
|
23
27
|
};
|
|
24
28
|
|
|
25
29
|
exports.renderTableHeader_unstable = renderTableHeader_unstable;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-table/src/components/TableHeader/renderTableHeader.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,0BAA0B,GAAI,KAAD,IAA4B;EACpE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAA2B,KAA3B,CAA7B;EAEA,
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-table/src/components/TableHeader/renderTableHeader.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,oBAAA,gBAAA,OAAA,CAAA,mCAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,0BAA0B,GAAI,KAAD,IAA4B;EACpE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAA2B,KAA3B,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,oBAAA,CAAA,0BAAD,EAA2B;IAAC,KAAK,EAAC;EAAP,CAA3B,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CADF,CADF;AAKD,CARM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { TableHeaderContextProvider } from '../../contexts/tableHeaderContext';\nimport type { TableHeaderState, TableHeaderSlots } from './TableHeader.types';\n\n/**\n * Render the final JSX of TableHeader\n */\nexport const renderTableHeader_unstable = (state: TableHeaderState) => {\n const { slots, slotProps } = getSlots<TableHeaderSlots>(state);\n\n return (\n <TableHeaderContextProvider value=\"\">\n <slots.root {...slotProps.root} />\n </TableHeaderContextProvider>\n );\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -48,6 +48,10 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
48
48
|
"Byoj8tv": "f1ov4xf1",
|
|
49
49
|
"uwmqm3": ["f1f5gg8d", "f1vdfbxk"]
|
|
50
50
|
},
|
|
51
|
+
"rootInteractive": {
|
|
52
|
+
"Jwef8y": "f1t94bn6",
|
|
53
|
+
"ecr2s2": "f1wfn5kd"
|
|
54
|
+
},
|
|
51
55
|
"resetButton": {
|
|
52
56
|
"B3rzk8w": "fq6nmtn",
|
|
53
57
|
"B7ck84d": "f1e4lqlz",
|
|
@@ -90,7 +94,9 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
90
94
|
"Bt984gj": "f122n59"
|
|
91
95
|
}
|
|
92
96
|
}, {
|
|
93
|
-
"d": [".f1nbblvp{padding-top:0px;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1ov4xf1{padding-bottom:0px;}", ".fq6nmtn{resize:horizontal;}", ".f1e4lqlz{box-sizing:content-box;}", ".f1u2r49w{background-color:inherit;}", ".f1ym3bx4{color:inherit;}", ".f1mo0ibp{font-family:inherit;}", ".fjoy568{font-size:inherit;}", ".fytdu2e{line-height:normal;}", ".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f37px4s{-webkit-appearance:button;}", ".fgusgyc{text-align:unset;}", ".f10pi13n{position:relative;}", ".fly5x3f{width:100%;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1l02sjl{height:100%;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fsnqrgy{-webkit-column-gap:var(--spacingHorizontalS);column-gap:var(--spacingHorizontalS);}", ".fylz90v{row-gap:var(--spacingHorizontalS);}", ".f5pgtk9{min-height:44px;}", ".f1neuvcm{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}", ".fkjuxzh{-webkit-flex-basis:0px;-ms-flex-preferred-size:0px;flex-basis:0px;}", ".f1k6fduh{cursor:pointer;}"]
|
|
97
|
+
"d": [".f1nbblvp{padding-top:0px;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1ov4xf1{padding-bottom:0px;}", ".fq6nmtn{resize:horizontal;}", ".f1e4lqlz{box-sizing:content-box;}", ".f1u2r49w{background-color:inherit;}", ".f1ym3bx4{color:inherit;}", ".f1mo0ibp{font-family:inherit;}", ".fjoy568{font-size:inherit;}", ".fytdu2e{line-height:normal;}", ".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f37px4s{-webkit-appearance:button;}", ".fgusgyc{text-align:unset;}", ".f10pi13n{position:relative;}", ".fly5x3f{width:100%;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1l02sjl{height:100%;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fsnqrgy{-webkit-column-gap:var(--spacingHorizontalS);column-gap:var(--spacingHorizontalS);}", ".fylz90v{row-gap:var(--spacingHorizontalS);}", ".f5pgtk9{min-height:44px;}", ".f1neuvcm{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}", ".fkjuxzh{-webkit-flex-basis:0px;-ms-flex-preferred-size:0px;flex-basis:0px;}", ".f1k6fduh{cursor:pointer;}"],
|
|
98
|
+
"h": [".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}"],
|
|
99
|
+
"a": [".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}"]
|
|
94
100
|
});
|
|
95
101
|
/**
|
|
96
102
|
* Apply styling to the TableHeaderCell slots based on the state
|
|
@@ -103,7 +109,7 @@ const useTableHeaderCellStyles_unstable = state => {
|
|
|
103
109
|
table: useTableLayoutStyles(),
|
|
104
110
|
flex: useFlexLayoutStyles()
|
|
105
111
|
};
|
|
106
|
-
state.root.className = react_1.mergeClasses(exports.tableHeaderCellClassNames.root, styles.root, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.root.className);
|
|
112
|
+
state.root.className = react_1.mergeClasses(exports.tableHeaderCellClassNames.root, styles.root, state.sortable && styles.rootInteractive, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.root.className);
|
|
107
113
|
state.button.className = react_1.mergeClasses(exports.tableHeaderCellClassNames.button, styles.resetButton, styles.button, state.sortable && styles.sortable, state.button.className);
|
|
108
114
|
|
|
109
115
|
if (state.sortIcon) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAIa,OAAA,CAAA,wBAAA,GAA2B,qBAA3B;AACA,OAAA,CAAA,yBAAA,GAAkE;EAC7E,IAAI,EAAE,qBADuE;EAE7E,MAAM,EAAE,6BAFqE;EAG7E,QAAQ,EAAE;AAHmE,CAAlE;;AAMb,MAAM,oBAAoB,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA7B;;AAOA,MAAM,mBAAmB,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA5B;AAQA;;AAEG;;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAIa,OAAA,CAAA,wBAAA,GAA2B,qBAA3B;AACA,OAAA,CAAA,yBAAA,GAAkE;EAC7E,IAAI,EAAE,qBADuE;EAE7E,MAAM,EAAE,6BAFqE;EAG7E,QAAQ,EAAE;AAHmE,CAAlE;;AAMb,MAAM,oBAAoB,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA7B;;AAOA,MAAM,mBAAmB,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA5B;AAQA;;AAEG;;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAAlB;AAiDA;;AAEG;;;AACI,MAAM,iCAAiC,GAAI,KAAD,IAAsD;EACrG,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM,YAAY,GAAG;IACnB,KAAK,EAAE,oBAAoB,EADR;IAEnB,IAAI,EAAE,mBAAmB;EAFN,CAArB;EAIA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,yBAAA,CAA0B,IADL,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,eAHJ,EAIrB,KAAK,CAAC,gBAAN,GAAyB,YAAY,CAAC,IAAb,CAAkB,IAA3C,GAAkD,YAAY,CAAC,KAAb,CAAmB,IAJhD,EAKrB,KAAK,CAAC,IAAN,CAAW,SALU,CAAvB;EAOA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,OAAA,CAAA,YAAA,CACvB,OAAA,CAAA,yBAAA,CAA0B,MADH,EAEvB,MAAM,CAAC,WAFgB,EAGvB,MAAM,CAAC,MAHgB,EAIvB,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,QAJF,EAKvB,KAAK,CAAC,MAAN,CAAa,SALU,CAAzB;;EAQA,IAAI,KAAK,CAAC,QAAV,EAAoB;IAClB,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,OAAA,CAAA,YAAA,CACzB,OAAA,CAAA,yBAAA,CAA0B,QADD,EAEzB,MAAM,CAAC,QAFkB,EAGzB,KAAK,CAAC,QAAN,CAAe,SAHU,CAA3B;EAKD;;EAED,OAAO,KAAP;AACD,CA9BM;;AAAM,OAAA,CAAA,iCAAA,GAAiC,iCAAjC","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TableHeaderCellSlots, TableHeaderCellState } from './TableHeaderCell.types';\n\nexport const tableHeaderCellClassName = 'fui-TableHeaderCell';\nexport const tableHeaderCellClassNames: SlotClassNames<TableHeaderCellSlots> = {\n root: 'fui-TableHeaderCell',\n button: 'fui-TableHeaderCell__button',\n sortIcon: 'fui-TableHeaderCell__sortIcon',\n};\n\nconst useTableLayoutStyles = makeStyles({\n root: {\n display: 'table-cell',\n verticalAlign: 'middle',\n },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n root: {\n display: 'flex',\n ...shorthands.flex(1, 1, '0px'),\n minWidth: '0px',\n },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n ...shorthands.padding('0px', tokens.spacingHorizontalS),\n },\n\n rootInteractive: {\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n\n resetButton: {\n resize: 'horizontal',\n boxSizing: 'content-box',\n backgroundColor: 'inherit',\n color: 'inherit',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n lineHeight: 'normal',\n ...shorthands.overflow('visible'),\n ...shorthands.padding(0),\n ...shorthands.borderStyle('none'),\n WebkitAppearance: 'button',\n textAlign: 'unset',\n },\n button: {\n position: 'relative',\n width: '100%',\n display: 'flex',\n flexGrow: 1,\n height: '100%',\n alignItems: 'center',\n ...shorthands.gap(tokens.spacingHorizontalS),\n minHeight: '44px',\n ...shorthands.flex(1, 1, '0px'),\n },\n sortable: {\n cursor: 'pointer',\n },\n\n sortIcon: {\n display: 'flex',\n alignItems: 'center',\n },\n});\n\n/**\n * Apply styling to the TableHeaderCell slots based on the state\n */\nexport const useTableHeaderCellStyles_unstable = (state: TableHeaderCellState): TableHeaderCellState => {\n const styles = useStyles();\n const layoutStyles = {\n table: useTableLayoutStyles(),\n flex: useFlexLayoutStyles(),\n };\n state.root.className = mergeClasses(\n tableHeaderCellClassNames.root,\n styles.root,\n state.sortable && styles.rootInteractive,\n state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n state.root.className,\n );\n state.button.className = mergeClasses(\n tableHeaderCellClassNames.button,\n styles.resetButton,\n styles.button,\n state.sortable && styles.sortable,\n state.button.className,\n );\n\n if (state.sortIcon) {\n state.sortIcon.className = mergeClasses(\n tableHeaderCellClassNames.sortIcon,\n styles.sortIcon,\n state.sortIcon.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -8,6 +8,8 @@ exports.useTableRow_unstable = void 0;
|
|
|
8
8
|
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
9
9
|
|
|
10
10
|
const tableContext_1 = /*#__PURE__*/require("../../contexts/tableContext");
|
|
11
|
+
|
|
12
|
+
const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
|
|
11
13
|
/**
|
|
12
14
|
* Create the state required to render TableRow.
|
|
13
15
|
*
|
|
@@ -20,24 +22,26 @@ const tableContext_1 = /*#__PURE__*/require("../../contexts/tableContext");
|
|
|
20
22
|
|
|
21
23
|
|
|
22
24
|
const useTableRow_unstable = (props, ref) => {
|
|
23
|
-
var _a;
|
|
25
|
+
var _a, _b;
|
|
24
26
|
|
|
25
27
|
const {
|
|
26
28
|
noNativeElements,
|
|
27
29
|
size
|
|
28
30
|
} = tableContext_1.useTableContext();
|
|
29
31
|
const rootComponent = ((_a = props.as) !== null && _a !== void 0 ? _a : noNativeElements) ? 'div' : 'tr';
|
|
32
|
+
const focusVisibleRef = react_tabster_1.useFocusVisible();
|
|
30
33
|
return {
|
|
31
34
|
components: {
|
|
32
35
|
root: rootComponent
|
|
33
36
|
},
|
|
34
37
|
root: react_utilities_1.getNativeElementProps(rootComponent, {
|
|
35
|
-
ref,
|
|
38
|
+
ref: react_utilities_1.useMergedRefs(ref, focusVisibleRef),
|
|
36
39
|
role: rootComponent === 'div' ? 'row' : undefined,
|
|
37
40
|
...props
|
|
38
41
|
}),
|
|
39
42
|
size,
|
|
40
|
-
noNativeElements
|
|
43
|
+
noNativeElements,
|
|
44
|
+
appearance: (_b = props.appearance) !== null && _b !== void 0 ? _b : 'none'
|
|
41
45
|
};
|
|
42
46
|
};
|
|
43
47
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-table/src/components/TableRow/useTableRow.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,cAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,oBAAoB,GAAG,CAAC,KAAD,EAAuB,GAAvB,KAAqE;;;EACvG,MAAM;IAAE,gBAAF;IAAoB;EAApB,IAA6B,cAAA,CAAA,eAAA,EAAnC;EACA,MAAM,aAAa,GAAG,CAAA,CAAA,EAAA,GAAA,KAAK,CAAC,EAAN,MAAQ,IAAR,IAAQ,EAAA,KAAA,KAAA,CAAR,GAAQ,EAAR,GAAY,gBAAZ,IAA+B,KAA/B,GAAuC,IAA7D;EAEA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CADP;IAIL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,aAAtB,EAAqC;MACzC,
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-table/src/components/TableRow/useTableRow.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,cAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,oBAAoB,GAAG,CAAC,KAAD,EAAuB,GAAvB,KAAqE;;;EACvG,MAAM;IAAE,gBAAF;IAAoB;EAApB,IAA6B,cAAA,CAAA,eAAA,EAAnC;EACA,MAAM,aAAa,GAAG,CAAA,CAAA,EAAA,GAAA,KAAK,CAAC,EAAN,MAAQ,IAAR,IAAQ,EAAA,KAAA,KAAA,CAAR,GAAQ,EAAR,GAAY,gBAAZ,IAA+B,KAA/B,GAAuC,IAA7D;EACA,MAAM,eAAe,GAAG,eAAA,CAAA,eAAA,EAAxB;EAEA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CADP;IAIL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,aAAtB,EAAqC;MACzC,GAAG,EAAE,iBAAA,CAAA,aAAA,CAAc,GAAd,EAAmB,eAAnB,CADoC;MAEzC,IAAI,EAAE,aAAa,KAAK,KAAlB,GAA0B,KAA1B,GAAkC,SAFC;MAGzC,GAAG;IAHsC,CAArC,CAJD;IASL,IATK;IAUL,gBAVK;IAWL,UAAU,EAAE,CAAA,EAAA,GAAA,KAAK,CAAC,UAAN,MAAgB,IAAhB,IAAgB,EAAA,KAAA,KAAA,CAAhB,GAAgB,EAAhB,GAAoB;EAX3B,CAAP;AAaD,CAlBM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TableRowProps, TableRowState } from './TableRow.types';\nimport { useTableContext } from '../../contexts/tableContext';\nimport { useFocusVisible } from '@fluentui/react-tabster';\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\n return {\n components: {\n root: rootComponent,\n },\n root: getNativeElementProps(rootComponent, {\n ref: useMergedRefs(ref, focusVisibleRef),\n role: rootComponent === 'div' ? 'row' : undefined,\n ...props,\n }),\n size,\n noNativeElements,\n appearance: props.appearance ?? 'none',\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -11,6 +11,12 @@ const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
|
|
|
11
11
|
|
|
12
12
|
const useTableCellActionsStyles_1 = /*#__PURE__*/require("../TableCellActions/useTableCellActionsStyles");
|
|
13
13
|
|
|
14
|
+
const useTableSelectionCellStyles_1 = /*#__PURE__*/require("../TableSelectionCell/useTableSelectionCellStyles");
|
|
15
|
+
|
|
16
|
+
const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
|
|
17
|
+
|
|
18
|
+
const tableHeaderContext_1 = /*#__PURE__*/require("../../contexts/tableHeaderContext");
|
|
19
|
+
|
|
14
20
|
exports.tableRowClassName = 'fui-TableRow';
|
|
15
21
|
exports.tableRowClassNames = {
|
|
16
22
|
root: exports.tableRowClassName
|
|
@@ -58,11 +64,28 @@ const useFlexLayoutStyles = /*#__PURE__*/react_1.__styles({
|
|
|
58
64
|
const useStyles = /*#__PURE__*/react_1.__styles({
|
|
59
65
|
"root": {
|
|
60
66
|
"sj55zd": "f19n0e5",
|
|
61
|
-
"
|
|
67
|
+
"B7ck84d": "f1ewtqcl",
|
|
68
|
+
"Befpiv7": "fblfkud",
|
|
69
|
+
"Bn4voq9": "fz36nt7",
|
|
70
|
+
"g9k6zt": "f9znhxp",
|
|
71
|
+
"kdpuga": ["f1o2ludy", "f1kjnpwc"],
|
|
72
|
+
"Bw81rd7": ["f1kjnpwc", "f1o2ludy"],
|
|
73
|
+
"B6xbmo0": ["fxmnebo", "f1witrsb"],
|
|
74
|
+
"dm238s": ["f1witrsb", "fxmnebo"]
|
|
75
|
+
},
|
|
76
|
+
"rootInteractive": {
|
|
77
|
+
"ecr2s2": "f1wfn5kd",
|
|
78
|
+
"lj723h": "f1g4hkjv",
|
|
79
|
+
"Bw1l9kw": "flaujjr",
|
|
80
|
+
"B43xm9u": "f15ngxrw",
|
|
81
|
+
"Bs8fhbl": "fd28r7f",
|
|
82
|
+
"i921ia": "fjbbrdp",
|
|
83
|
+
"Jwef8y": "f1t94bn6",
|
|
62
84
|
"Bi91k9c": "feu1g3u",
|
|
63
85
|
"Bi7d7a3": "f1boln4s",
|
|
64
86
|
"Bpt6rm4": "f1uorfem",
|
|
65
|
-
"
|
|
87
|
+
"Bt8cqyk": "frasl6z",
|
|
88
|
+
"ff6mpl": "fw60kww"
|
|
66
89
|
},
|
|
67
90
|
"medium": {
|
|
68
91
|
"Bn0qgzm": "f1vxd6vx",
|
|
@@ -76,10 +99,141 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
76
99
|
},
|
|
77
100
|
"smaller": {
|
|
78
101
|
"Be2twd7": "fy9rknc"
|
|
79
|
-
}
|
|
102
|
+
},
|
|
103
|
+
"brand": {
|
|
104
|
+
"De3pzq": "f16xkysk",
|
|
105
|
+
"sj55zd": "f1cgsbmv",
|
|
106
|
+
"g2u3we": "frmsihh",
|
|
107
|
+
"h3c5rm": ["frttxa5", "f11o2r7f"],
|
|
108
|
+
"B9xav0g": "fem5et0",
|
|
109
|
+
"zhjwy3": ["f11o2r7f", "frttxa5"],
|
|
110
|
+
"Jwef8y": "f121v1wq",
|
|
111
|
+
"ecr2s2": "ftepret",
|
|
112
|
+
"gwxt9v": "fqlf3fd",
|
|
113
|
+
"v3aym": ["f9dpb3h", "fw2muls"],
|
|
114
|
+
"Bc736ss": "f1yat0gj",
|
|
115
|
+
"Bk6ri7n": ["fw2muls", "f9dpb3h"],
|
|
116
|
+
"Bk5ld8o": "f7nae3y",
|
|
117
|
+
"c4eypz": ["fkbere7", "fa97sf3"],
|
|
118
|
+
"felo30": "fmtyzcc",
|
|
119
|
+
"Eshu5l": ["fa97sf3", "fkbere7"],
|
|
120
|
+
"Bjwas2f": "fb6zhgp",
|
|
121
|
+
"Bn1d65q": ["fyowp6c", "fz08sq8"],
|
|
122
|
+
"Bxeuatn": "f9dii88",
|
|
123
|
+
"n51gp8": ["fz08sq8", "fyowp6c"],
|
|
124
|
+
"Beo2b4z": ["f1afxoft", "flqq2yx"],
|
|
125
|
+
"h6lo6r": ["flqq2yx", "f1afxoft"],
|
|
126
|
+
"Btyw6ap": ["f1b5xrmd", "f1831rx6"],
|
|
127
|
+
"w1pwid": ["f1831rx6", "f1b5xrmd"],
|
|
128
|
+
"Brwvgy3": "fd94n53",
|
|
129
|
+
"yadkgm": "f1e0wld5"
|
|
130
|
+
},
|
|
131
|
+
"neutral": {
|
|
132
|
+
"gwxt9v": "fqlf3fd",
|
|
133
|
+
"v3aym": ["f9dpb3h", "fw2muls"],
|
|
134
|
+
"Bc736ss": "f1yat0gj",
|
|
135
|
+
"Bk6ri7n": ["fw2muls", "f9dpb3h"],
|
|
136
|
+
"Bk5ld8o": "f7nae3y",
|
|
137
|
+
"c4eypz": ["fkbere7", "fa97sf3"],
|
|
138
|
+
"felo30": "fmtyzcc",
|
|
139
|
+
"Eshu5l": ["fa97sf3", "fkbere7"],
|
|
140
|
+
"Bjwas2f": "fb6zhgp",
|
|
141
|
+
"Bn1d65q": ["fyowp6c", "fz08sq8"],
|
|
142
|
+
"Bxeuatn": "f9dii88",
|
|
143
|
+
"n51gp8": ["fz08sq8", "fyowp6c"],
|
|
144
|
+
"Beo2b4z": ["f1afxoft", "flqq2yx"],
|
|
145
|
+
"h6lo6r": ["flqq2yx", "f1afxoft"],
|
|
146
|
+
"Btyw6ap": ["f1b5xrmd", "f1831rx6"],
|
|
147
|
+
"w1pwid": ["f1831rx6", "f1b5xrmd"],
|
|
148
|
+
"Brwvgy3": "fd94n53",
|
|
149
|
+
"yadkgm": "f1e0wld5",
|
|
150
|
+
"De3pzq": "fq5gl1p",
|
|
151
|
+
"sj55zd": "f1cgsbmv",
|
|
152
|
+
"Jwef8y": "f1uqaxdt",
|
|
153
|
+
"ecr2s2": "fa9o754",
|
|
154
|
+
"g2u3we": "frmsihh",
|
|
155
|
+
"h3c5rm": ["frttxa5", "f11o2r7f"],
|
|
156
|
+
"B9xav0g": "fem5et0",
|
|
157
|
+
"zhjwy3": ["f11o2r7f", "frttxa5"]
|
|
158
|
+
},
|
|
159
|
+
"none": {}
|
|
80
160
|
}, {
|
|
81
|
-
"d": [".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1ewtqcl{box-sizing:border-box;}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fg706s2{border-bottom-style:solid;}", ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}", ".fy9rknc{font-size:var(--fontSizeBase200);}"],
|
|
82
|
-
"
|
|
161
|
+
"d": [".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1ewtqcl{box-sizing:border-box;}", ".fblfkud[data-fui-focus-visible]:focus-within .fui-TableSelectionCell{opacity:1;}", ".fz36nt7[data-fui-focus-visible]{outline-width:2px;}", ".f9znhxp[data-fui-focus-visible]{outline-style:solid;}", ".f1o2ludy[data-fui-focus-visible]{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1kjnpwc[data-fui-focus-visible]{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fxmnebo[data-fui-focus-visible]{border-top-right-radius:var(--borderRadiusMedium);}", ".f1witrsb[data-fui-focus-visible]{border-top-left-radius:var(--borderRadiusMedium);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fg706s2{border-bottom-style:solid;}", ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}", ".f1cgsbmv{color:var(--colorNeutralForeground1Hover);}", ".frmsihh{border-top-color:var(--colorNeutralStrokeOnBrand);}", ".frttxa5{border-right-color:var(--colorNeutralStrokeOnBrand);}", ".f11o2r7f{border-left-color:var(--colorNeutralStrokeOnBrand);}", ".fem5et0{border-bottom-color:var(--colorNeutralStrokeOnBrand);}", ".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}"],
|
|
162
|
+
"a": [".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f1g4hkjv:active{color:var(--colorNeutralForeground1Pressed);}", ".flaujjr:active .fui-TableCellActions{background-color:var(--colorSubtleBackgroundPressed);}", ".f15ngxrw:active .fui-TableCellActions{opacity:1;}", ".fd28r7f:active .fui-TableSelectionCell{background-color:var(--colorNeutralBackground1Hover);}", ".fjbbrdp:active .fui-TableSelectionCell{opacity:1;}", ".ftepret:active{background-color:var(--colorBrandBackgroundInvertedSelected);}", ".fa9o754:active{background-color:var(--colorSubtleBackgroundSelected);}"],
|
|
163
|
+
"h": [".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f1boln4s:hover .fui-TableCellActions{background-color:var(--colorNeutralBackground1Hover);}", ".f1uorfem:hover .fui-TableCellActions{opacity:1;}", ".frasl6z:hover .fui-TableSelectionCell{background-color:var(--colorNeutralBackground1Hover);}", ".fw60kww:hover .fui-TableSelectionCell{opacity:1;}", ".f121v1wq:hover{background-color:var(--colorBrandBackground2);}", ".f1uqaxdt:hover{background-color:var(--colorSubtleBackgroundSelected);}"],
|
|
164
|
+
"m": [["@media (forced-colors: active){.fqlf3fd{border-top-width:2px;}}", {
|
|
165
|
+
"m": "(forced-colors: active)"
|
|
166
|
+
}], ["@media (forced-colors: active){.f9dpb3h{border-right-width:2px;}.fw2muls{border-left-width:2px;}}", {
|
|
167
|
+
"m": "(forced-colors: active)"
|
|
168
|
+
}], ["@media (forced-colors: active){.f1yat0gj{border-bottom-width:2px;}}", {
|
|
169
|
+
"m": "(forced-colors: active)"
|
|
170
|
+
}], ["@media (forced-colors: active){.fw2muls{border-left-width:2px;}.f9dpb3h{border-right-width:2px;}}", {
|
|
171
|
+
"m": "(forced-colors: active)"
|
|
172
|
+
}], ["@media (forced-colors: active){.f7nae3y{border-top-style:solid;}}", {
|
|
173
|
+
"m": "(forced-colors: active)"
|
|
174
|
+
}], ["@media (forced-colors: active){.fkbere7{border-right-style:solid;}.fa97sf3{border-left-style:solid;}}", {
|
|
175
|
+
"m": "(forced-colors: active)"
|
|
176
|
+
}], ["@media (forced-colors: active){.fmtyzcc{border-bottom-style:solid;}}", {
|
|
177
|
+
"m": "(forced-colors: active)"
|
|
178
|
+
}], ["@media (forced-colors: active){.fa97sf3{border-left-style:solid;}.fkbere7{border-right-style:solid;}}", {
|
|
179
|
+
"m": "(forced-colors: active)"
|
|
180
|
+
}], ["@media (forced-colors: active){.fb6zhgp{border-top-color:transparent;}}", {
|
|
181
|
+
"m": "(forced-colors: active)"
|
|
182
|
+
}], ["@media (forced-colors: active){.fyowp6c{border-right-color:transparent;}.fz08sq8{border-left-color:transparent;}}", {
|
|
183
|
+
"m": "(forced-colors: active)"
|
|
184
|
+
}], ["@media (forced-colors: active){.f9dii88{border-bottom-color:transparent;}}", {
|
|
185
|
+
"m": "(forced-colors: active)"
|
|
186
|
+
}], ["@media (forced-colors: active){.fz08sq8{border-left-color:transparent;}.fyowp6c{border-right-color:transparent;}}", {
|
|
187
|
+
"m": "(forced-colors: active)"
|
|
188
|
+
}], ["@media (forced-colors: active){.f1afxoft{border-bottom-right-radius:var(--borderRadiusMedium);}.flqq2yx{border-bottom-left-radius:var(--borderRadiusMedium);}}", {
|
|
189
|
+
"m": "(forced-colors: active)"
|
|
190
|
+
}], ["@media (forced-colors: active){.flqq2yx{border-bottom-left-radius:var(--borderRadiusMedium);}.f1afxoft{border-bottom-right-radius:var(--borderRadiusMedium);}}", {
|
|
191
|
+
"m": "(forced-colors: active)"
|
|
192
|
+
}], ["@media (forced-colors: active){.f1b5xrmd{border-top-right-radius:var(--borderRadiusMedium);}.f1831rx6{border-top-left-radius:var(--borderRadiusMedium);}}", {
|
|
193
|
+
"m": "(forced-colors: active)"
|
|
194
|
+
}], ["@media (forced-colors: active){.f1831rx6{border-top-left-radius:var(--borderRadiusMedium);}.f1b5xrmd{border-top-right-radius:var(--borderRadiusMedium);}}", {
|
|
195
|
+
"m": "(forced-colors: active)"
|
|
196
|
+
}], ["@media (forced-colors: active){.fd94n53{box-sizing:border-box;}}", {
|
|
197
|
+
"m": "(forced-colors: active)"
|
|
198
|
+
}], ["@media (forced-colors: active){.f1e0wld5:focus-visible{outline-offset:-4px;}}", {
|
|
199
|
+
"m": "(forced-colors: active)"
|
|
200
|
+
}], ["@media (forced-colors: active){.fqlf3fd{border-top-width:2px;}}", {
|
|
201
|
+
"m": "(forced-colors: active)"
|
|
202
|
+
}], ["@media (forced-colors: active){.f9dpb3h{border-right-width:2px;}.fw2muls{border-left-width:2px;}}", {
|
|
203
|
+
"m": "(forced-colors: active)"
|
|
204
|
+
}], ["@media (forced-colors: active){.f1yat0gj{border-bottom-width:2px;}}", {
|
|
205
|
+
"m": "(forced-colors: active)"
|
|
206
|
+
}], ["@media (forced-colors: active){.fw2muls{border-left-width:2px;}.f9dpb3h{border-right-width:2px;}}", {
|
|
207
|
+
"m": "(forced-colors: active)"
|
|
208
|
+
}], ["@media (forced-colors: active){.f7nae3y{border-top-style:solid;}}", {
|
|
209
|
+
"m": "(forced-colors: active)"
|
|
210
|
+
}], ["@media (forced-colors: active){.fkbere7{border-right-style:solid;}.fa97sf3{border-left-style:solid;}}", {
|
|
211
|
+
"m": "(forced-colors: active)"
|
|
212
|
+
}], ["@media (forced-colors: active){.fmtyzcc{border-bottom-style:solid;}}", {
|
|
213
|
+
"m": "(forced-colors: active)"
|
|
214
|
+
}], ["@media (forced-colors: active){.fa97sf3{border-left-style:solid;}.fkbere7{border-right-style:solid;}}", {
|
|
215
|
+
"m": "(forced-colors: active)"
|
|
216
|
+
}], ["@media (forced-colors: active){.fb6zhgp{border-top-color:transparent;}}", {
|
|
217
|
+
"m": "(forced-colors: active)"
|
|
218
|
+
}], ["@media (forced-colors: active){.fyowp6c{border-right-color:transparent;}.fz08sq8{border-left-color:transparent;}}", {
|
|
219
|
+
"m": "(forced-colors: active)"
|
|
220
|
+
}], ["@media (forced-colors: active){.f9dii88{border-bottom-color:transparent;}}", {
|
|
221
|
+
"m": "(forced-colors: active)"
|
|
222
|
+
}], ["@media (forced-colors: active){.fz08sq8{border-left-color:transparent;}.fyowp6c{border-right-color:transparent;}}", {
|
|
223
|
+
"m": "(forced-colors: active)"
|
|
224
|
+
}], ["@media (forced-colors: active){.f1afxoft{border-bottom-right-radius:var(--borderRadiusMedium);}.flqq2yx{border-bottom-left-radius:var(--borderRadiusMedium);}}", {
|
|
225
|
+
"m": "(forced-colors: active)"
|
|
226
|
+
}], ["@media (forced-colors: active){.flqq2yx{border-bottom-left-radius:var(--borderRadiusMedium);}.f1afxoft{border-bottom-right-radius:var(--borderRadiusMedium);}}", {
|
|
227
|
+
"m": "(forced-colors: active)"
|
|
228
|
+
}], ["@media (forced-colors: active){.f1b5xrmd{border-top-right-radius:var(--borderRadiusMedium);}.f1831rx6{border-top-left-radius:var(--borderRadiusMedium);}}", {
|
|
229
|
+
"m": "(forced-colors: active)"
|
|
230
|
+
}], ["@media (forced-colors: active){.f1831rx6{border-top-left-radius:var(--borderRadiusMedium);}.f1b5xrmd{border-top-right-radius:var(--borderRadiusMedium);}}", {
|
|
231
|
+
"m": "(forced-colors: active)"
|
|
232
|
+
}], ["@media (forced-colors: active){.fd94n53{box-sizing:border-box;}}", {
|
|
233
|
+
"m": "(forced-colors: active)"
|
|
234
|
+
}], ["@media (forced-colors: active){.f1e0wld5:focus-visible{outline-offset:-4px;}}", {
|
|
235
|
+
"m": "(forced-colors: active)"
|
|
236
|
+
}]]
|
|
83
237
|
});
|
|
84
238
|
/**
|
|
85
239
|
* Apply styling to the TableRow slots based on the state
|
|
@@ -87,12 +241,13 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
87
241
|
|
|
88
242
|
|
|
89
243
|
const useTableRowStyles_unstable = state => {
|
|
244
|
+
const isHeaderRow = tableHeaderContext_1.useIsInTableHeader();
|
|
90
245
|
const styles = useStyles();
|
|
91
246
|
const layoutStyles = {
|
|
92
247
|
table: useTableLayoutStyles(),
|
|
93
248
|
flex: useFlexLayoutStyles()
|
|
94
249
|
};
|
|
95
|
-
state.root.className = react_1.mergeClasses(exports.tableRowClassNames.root, styles.root, styles[state.size], state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.noNativeElements ? layoutStyles.flex[state.size] : layoutStyles.table[state.size], state.root.className);
|
|
250
|
+
state.root.className = react_1.mergeClasses(exports.tableRowClassNames.root, styles.root, !isHeaderRow && styles.rootInteractive, styles[state.size], state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.noNativeElements ? layoutStyles.flex[state.size] : layoutStyles.table[state.size], styles[state.appearance], state.root.className);
|
|
96
251
|
return state;
|
|
97
252
|
};
|
|
98
253
|
|