@fluentui/react-table 9.0.0-alpha.1 → 9.0.0-alpha.2
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 +135 -4
- package/CHANGELOG.md +31 -5
- package/dist/index.d.ts +312 -21
- package/lib/TableCellActions.js +2 -0
- package/lib/TableCellActions.js.map +1 -0
- package/lib/TableCellLayout.js +2 -0
- package/lib/TableCellLayout.js.map +1 -0
- package/lib/TableCellPrimaryLayout.js +2 -0
- package/lib/TableCellPrimaryLayout.js.map +1 -0
- package/lib/TableSelectionCell.js +2 -0
- package/lib/TableSelectionCell.js.map +1 -0
- package/lib/components/Table/Table.types.js.map +1 -1
- package/lib/components/Table/useTableContextValues.js +7 -5
- package/lib/components/Table/useTableContextValues.js.map +1 -1
- package/lib/components/Table/useTableStyles.js +7 -2
- package/lib/components/Table/useTableStyles.js.map +1 -1
- package/lib/components/TableBody/useTableBody.js +3 -1
- package/lib/components/TableBody/useTableBody.js.map +1 -1
- package/lib/components/TableBody/useTableBodyStyles.js +12 -2
- package/lib/components/TableBody/useTableBodyStyles.js.map +1 -1
- package/lib/components/TableCell/TableCell.types.js.map +1 -1
- package/lib/components/TableCell/renderTableCell.js +2 -4
- package/lib/components/TableCell/renderTableCell.js.map +1 -1
- package/lib/components/TableCell/useTableCell.js +5 -5
- package/lib/components/TableCell/useTableCell.js.map +1 -1
- package/lib/components/TableCell/useTableCellStyles.js +6 -20
- package/lib/components/TableCell/useTableCellStyles.js.map +1 -1
- package/lib/components/TableCellActions/TableCellActions.js +15 -0
- package/lib/components/TableCellActions/TableCellActions.js.map +1 -0
- package/lib/components/TableCellActions/TableCellActions.types.js +2 -0
- package/lib/components/TableCellActions/TableCellActions.types.js.map +1 -0
- package/lib/components/TableCellActions/index.js +6 -0
- package/lib/components/TableCellActions/index.js.map +1 -0
- package/lib/components/TableCellActions/renderTableCellActions.js +16 -0
- package/lib/components/TableCellActions/renderTableCellActions.js.map +1 -0
- package/lib/components/TableCellActions/useTableCellActions.js +24 -0
- package/lib/components/TableCellActions/useTableCellActions.js.map +1 -0
- package/lib/components/TableCellActions/useTableCellActionsStyles.js +39 -0
- package/lib/components/TableCellActions/useTableCellActionsStyles.js.map +1 -0
- package/lib/components/TableCellLayout/TableCellLayout.js +15 -0
- package/lib/components/TableCellLayout/TableCellLayout.js.map +1 -0
- package/lib/components/TableCellLayout/TableCellLayout.types.js +2 -0
- package/lib/components/TableCellLayout/TableCellLayout.types.js.map +1 -0
- package/lib/components/TableCellLayout/index.js +6 -0
- package/lib/components/TableCellLayout/index.js.map +1 -0
- package/lib/components/TableCellLayout/renderTableCellLayout.js +19 -0
- package/lib/components/TableCellLayout/renderTableCellLayout.js.map +1 -0
- package/lib/components/TableCellLayout/useTableCellLayout.js +36 -0
- package/lib/components/TableCellLayout/useTableCellLayout.js.map +1 -0
- package/lib/components/TableCellLayout/useTableCellLayoutStyles.js +74 -0
- package/lib/components/TableCellLayout/useTableCellLayoutStyles.js.map +1 -0
- package/lib/components/TableHeader/useTableHeader.js +4 -2
- package/lib/components/TableHeader/useTableHeader.js.map +1 -1
- package/lib/components/TableHeader/useTableHeaderStyles.js +12 -2
- package/lib/components/TableHeader/useTableHeaderStyles.js.map +1 -1
- package/lib/components/TableHeaderCell/useTableHeaderCell.js +4 -2
- package/lib/components/TableHeaderCell/useTableHeaderCell.js.map +1 -1
- package/lib/components/TableHeaderCell/useTableHeaderCellStyles.js +10 -9
- package/lib/components/TableHeaderCell/useTableHeaderCellStyles.js.map +1 -1
- package/lib/components/TableRow/useTableRow.js +4 -2
- package/lib/components/TableRow/useTableRow.js.map +1 -1
- package/lib/components/TableRow/useTableRowStyles.js +9 -7
- package/lib/components/TableRow/useTableRowStyles.js.map +1 -1
- package/lib/components/TableSelectionCell/TableSelectionCell.js +15 -0
- package/lib/components/TableSelectionCell/TableSelectionCell.js.map +1 -0
- package/lib/components/TableSelectionCell/TableSelectionCell.types.js +2 -0
- package/lib/components/TableSelectionCell/TableSelectionCell.types.js.map +1 -0
- package/lib/components/TableSelectionCell/index.js +6 -0
- package/lib/components/TableSelectionCell/index.js.map +1 -0
- package/lib/components/TableSelectionCell/renderTableSelectionCell.js +17 -0
- package/lib/components/TableSelectionCell/renderTableSelectionCell.js.map +1 -0
- package/lib/components/TableSelectionCell/useTableSelectionCell.js +42 -0
- package/lib/components/TableSelectionCell/useTableSelectionCell.js.map +1 -0
- package/lib/components/TableSelectionCell/useTableSelectionCellStyles.js +55 -0
- package/lib/components/TableSelectionCell/useTableSelectionCellStyles.js.map +1 -0
- package/lib/contexts/tableContext.js +7 -3
- package/lib/contexts/tableContext.js.map +1 -1
- package/lib/hooks/index.js +3 -0
- package/lib/hooks/index.js.map +1 -0
- package/lib/hooks/selectionManager.js +89 -0
- package/lib/hooks/selectionManager.js.map +1 -0
- package/lib/hooks/types.js +2 -0
- package/lib/hooks/types.js.map +1 -0
- package/lib/hooks/useSelection.js +47 -0
- package/lib/hooks/useSelection.js.map +1 -0
- package/lib/hooks/useSort.js +72 -0
- package/lib/hooks/useSort.js.map +1 -0
- package/lib/hooks/useTable.js +87 -0
- package/lib/hooks/useTable.js.map +1 -0
- package/lib/index.js +4 -0
- package/lib/index.js.map +1 -1
- package/lib/navigationModes/cell.js +250 -0
- package/lib/navigationModes/cell.js.map +1 -0
- package/lib/navigationModes/composite.js +208 -0
- package/lib/navigationModes/composite.js.map +1 -0
- package/lib/navigationModes/index.js +3 -0
- package/lib/navigationModes/index.js.map +1 -0
- package/lib/navigationModes/useNavigationMode.js +42 -0
- package/lib/navigationModes/useNavigationMode.js.map +1 -0
- package/lib-commonjs/TableCellActions.js +10 -0
- package/lib-commonjs/TableCellActions.js.map +1 -0
- package/lib-commonjs/TableCellLayout.js +10 -0
- package/lib-commonjs/TableCellLayout.js.map +1 -0
- package/lib-commonjs/TableCellPrimaryLayout.js +10 -0
- package/lib-commonjs/TableCellPrimaryLayout.js.map +1 -0
- package/lib-commonjs/TableSelectionCell.js +10 -0
- package/lib-commonjs/TableSelectionCell.js.map +1 -0
- package/lib-commonjs/components/Table/useTableContextValues.js +8 -5
- package/lib-commonjs/components/Table/useTableContextValues.js.map +1 -1
- package/lib-commonjs/components/Table/useTableStyles.js +8 -2
- package/lib-commonjs/components/Table/useTableStyles.js.map +1 -1
- package/lib-commonjs/components/TableBody/useTableBody.js +3 -1
- package/lib-commonjs/components/TableBody/useTableBody.js.map +1 -1
- package/lib-commonjs/components/TableBody/useTableBodyStyles.js +10 -1
- package/lib-commonjs/components/TableBody/useTableBodyStyles.js.map +1 -1
- package/lib-commonjs/components/TableCell/renderTableCell.js +2 -4
- package/lib-commonjs/components/TableCell/renderTableCell.js.map +1 -1
- package/lib-commonjs/components/TableCell/useTableCell.js +4 -4
- package/lib-commonjs/components/TableCell/useTableCell.js.map +1 -1
- package/lib-commonjs/components/TableCell/useTableCellStyles.js +6 -20
- package/lib-commonjs/components/TableCell/useTableCellStyles.js.map +1 -1
- package/lib-commonjs/components/TableCellActions/TableCellActions.js +26 -0
- package/lib-commonjs/components/TableCellActions/TableCellActions.js.map +1 -0
- package/lib-commonjs/components/TableCellActions/TableCellActions.types.js +6 -0
- package/lib-commonjs/components/TableCellActions/TableCellActions.types.js.map +1 -0
- package/lib-commonjs/components/TableCellActions/index.js +18 -0
- package/lib-commonjs/components/TableCellActions/index.js.map +1 -0
- package/lib-commonjs/components/TableCellActions/renderTableCellActions.js +27 -0
- package/lib-commonjs/components/TableCellActions/renderTableCellActions.js.map +1 -0
- package/lib-commonjs/components/TableCellActions/useTableCellActions.js +35 -0
- package/lib-commonjs/components/TableCellActions/useTableCellActions.js.map +1 -0
- package/lib-commonjs/components/TableCellActions/useTableCellActionsStyles.js +51 -0
- package/lib-commonjs/components/TableCellActions/useTableCellActionsStyles.js.map +1 -0
- package/lib-commonjs/components/TableCellLayout/TableCellLayout.js +26 -0
- package/lib-commonjs/components/TableCellLayout/TableCellLayout.js.map +1 -0
- package/lib-commonjs/components/TableCellLayout/TableCellLayout.types.js +6 -0
- package/lib-commonjs/components/TableCellLayout/TableCellLayout.types.js.map +1 -0
- package/lib-commonjs/components/TableCellLayout/index.js +18 -0
- package/lib-commonjs/components/TableCellLayout/index.js.map +1 -0
- package/lib-commonjs/components/TableCellLayout/renderTableCellLayout.js +30 -0
- package/lib-commonjs/components/TableCellLayout/renderTableCellLayout.js.map +1 -0
- package/lib-commonjs/components/TableCellLayout/useTableCellLayout.js +46 -0
- package/lib-commonjs/components/TableCellLayout/useTableCellLayout.js.map +1 -0
- package/lib-commonjs/components/TableCellLayout/useTableCellLayoutStyles.js +85 -0
- package/lib-commonjs/components/TableCellLayout/useTableCellLayoutStyles.js.map +1 -0
- package/lib-commonjs/components/TableHeader/useTableHeader.js +4 -2
- package/lib-commonjs/components/TableHeader/useTableHeader.js.map +1 -1
- package/lib-commonjs/components/TableHeader/useTableHeaderStyles.js +11 -1
- package/lib-commonjs/components/TableHeader/useTableHeaderStyles.js.map +1 -1
- package/lib-commonjs/components/TableHeaderCell/useTableHeaderCell.js +4 -2
- package/lib-commonjs/components/TableHeaderCell/useTableHeaderCell.js.map +1 -1
- package/lib-commonjs/components/TableHeaderCell/useTableHeaderCellStyles.js +10 -9
- package/lib-commonjs/components/TableHeaderCell/useTableHeaderCellStyles.js.map +1 -1
- package/lib-commonjs/components/TableRow/useTableRow.js +4 -2
- package/lib-commonjs/components/TableRow/useTableRow.js.map +1 -1
- package/lib-commonjs/components/TableRow/useTableRowStyles.js +10 -7
- package/lib-commonjs/components/TableRow/useTableRowStyles.js.map +1 -1
- package/lib-commonjs/components/TableSelectionCell/TableSelectionCell.js +26 -0
- package/lib-commonjs/components/TableSelectionCell/TableSelectionCell.js.map +1 -0
- package/lib-commonjs/components/TableSelectionCell/TableSelectionCell.types.js +6 -0
- package/lib-commonjs/components/TableSelectionCell/TableSelectionCell.types.js.map +1 -0
- package/lib-commonjs/components/TableSelectionCell/index.js +18 -0
- package/lib-commonjs/components/TableSelectionCell/index.js.map +1 -0
- package/lib-commonjs/components/TableSelectionCell/renderTableSelectionCell.js +28 -0
- package/lib-commonjs/components/TableSelectionCell/renderTableSelectionCell.js.map +1 -0
- package/lib-commonjs/components/TableSelectionCell/useTableSelectionCell.js +56 -0
- package/lib-commonjs/components/TableSelectionCell/useTableSelectionCell.js.map +1 -0
- package/lib-commonjs/components/TableSelectionCell/useTableSelectionCellStyles.js +65 -0
- package/lib-commonjs/components/TableSelectionCell/useTableSelectionCellStyles.js.map +1 -0
- package/lib-commonjs/contexts/tableContext.js +7 -3
- package/lib-commonjs/contexts/tableContext.js.map +1 -1
- package/lib-commonjs/hooks/index.js +12 -0
- package/lib-commonjs/hooks/index.js.map +1 -0
- package/lib-commonjs/hooks/selectionManager.js +98 -0
- package/lib-commonjs/hooks/selectionManager.js.map +1 -0
- package/lib-commonjs/hooks/types.js +6 -0
- package/lib-commonjs/hooks/types.js.map +1 -0
- package/lib-commonjs/hooks/useSelection.js +59 -0
- package/lib-commonjs/hooks/useSelection.js.map +1 -0
- package/lib-commonjs/hooks/useSort.js +82 -0
- package/lib-commonjs/hooks/useSort.js.map +1 -0
- package/lib-commonjs/hooks/useTable.js +99 -0
- package/lib-commonjs/hooks/useTable.js.map +1 -0
- package/lib-commonjs/index.js +110 -1
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/navigationModes/cell.js +259 -0
- package/lib-commonjs/navigationModes/cell.js.map +1 -0
- package/lib-commonjs/navigationModes/composite.js +217 -0
- package/lib-commonjs/navigationModes/composite.js.map +1 -0
- package/lib-commonjs/navigationModes/index.js +16 -0
- package/lib-commonjs/navigationModes/index.js.map +1 -0
- package/lib-commonjs/navigationModes/useNavigationMode.js +55 -0
- package/lib-commonjs/navigationModes/useNavigationMode.js.map +1 -0
- package/package.json +9 -9
- package/dist/tsdoc-metadata.json +0 -11
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["components/TableCellLayout/useTableCellLayoutStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAIA,OAAO,MAAM,yBAAyB,GAAyC;EAC7E,IAAI,EAAE,qBADuE;EAE7E,KAAK,EAAE,4BAFsE;EAG7E,IAAI,EAAE,2BAHuE;EAI7E,WAAW,EAAE,kCAJgE;EAK7E,OAAO,EAAE;AALoE,CAAxE;AAQP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAkCA;;AAEG;;;AACH,OAAO,MAAM,iCAAiC,GAAI,KAAD,IAAsD;EACrG,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,yBAAyB,CAAC,IAA3B,EAAiC,MAAM,CAAC,IAAxC,EAA8C,KAAK,CAAC,IAAN,CAAW,SAAzD,CAAnC;EACA,MAAM,OAAO,GAAG,KAAK,CAAC,UAAN,KAAqB,SAArC;;EAEA,IAAI,KAAK,CAAC,KAAV,EAAiB;IACf,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,YAAY,CAClC,yBAAyB,CAAC,KADQ,EAElC,MAAM,CAAC,KAF2B,EAGlC,OAAO,IAAI,MAAM,CAAC,YAHgB,EAIlC,KAAK,CAAC,KAAN,CAAY,SAJsB,CAApC;EAMD;;EAED,IAAI,KAAK,CAAC,IAAV,EAAgB;IACd,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,yBAAyB,CAAC,IADO,EAEjC,OAAO,IAAI,MAAM,CAAC,WAFe,EAGjC,KAAK,CAAC,IAAN,CAAW,SAHsB,CAAnC;EAKD;;EAED,IAAI,KAAK,CAAC,WAAV,EAAuB;IACrB,KAAK,CAAC,WAAN,CAAkB,SAAlB,GAA8B,YAAY,CACxC,yBAAyB,CAAC,WADc,EAExC,MAAM,CAAC,WAFiC,EAGxC,KAAK,CAAC,WAAN,CAAkB,SAHsB,CAA1C;EAKD;;EAED,IAAI,KAAK,CAAC,OAAV,EAAmB;IACjB,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,YAAY,CAAC,yBAAyB,CAAC,OAA3B,EAAoC,MAAM,CAAC,OAA3C,EAAoD,KAAK,CAAC,OAAN,CAAc,SAAlE,CAAtC;EACD;;EAED,OAAO,KAAP;AACD,CAnCM","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TableCellLayoutSlots, TableCellLayoutState } from './TableCellLayout.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tableCellLayoutClassNames: SlotClassNames<TableCellLayoutSlots> = {\n root: 'fui-TableCellLayout',\n media: 'fui-TableCellLayout__media',\n main: 'fui-TableCellLayout__main',\n description: 'fui-TableCellLayout__description',\n wrapper: 'fui-TableCellLayout__wrapper',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n ...shorthands.gap(tokens.spacingHorizontalS),\n ...shorthands.flex(1, 1, '0px'),\n },\n wrapper: {\n display: 'flex',\n flexDirection: 'column',\n },\n\n media: {\n display: 'flex',\n alignItems: 'center',\n },\n\n mediaPrimary: {\n '& svg': {\n width: '28px',\n height: '28px',\n },\n },\n\n mainPrimary: {\n fontWeight: tokens.fontWeightSemibold,\n },\n\n description: {\n fontSize: tokens.fontSizeBase300,\n color: tokens.colorNeutralForeground2,\n },\n});\n\n/**\n * Apply styling to the TableCellLayout slots based on the state\n */\nexport const useTableCellLayoutStyles_unstable = (state: TableCellLayoutState): TableCellLayoutState => {\n const styles = useStyles();\n state.root.className = mergeClasses(tableCellLayoutClassNames.root, styles.root, state.root.className);\n const primary = state.appearance === 'primary';\n\n if (state.media) {\n state.media.className = mergeClasses(\n tableCellLayoutClassNames.media,\n styles.media,\n primary && styles.mediaPrimary,\n state.media.className,\n );\n }\n\n if (state.main) {\n state.main.className = mergeClasses(\n tableCellLayoutClassNames.main,\n primary && styles.mainPrimary,\n state.main.className,\n );\n }\n\n if (state.description) {\n state.description.className = mergeClasses(\n tableCellLayoutClassNames.description,\n styles.description,\n state.description.className,\n );\n }\n\n if (state.wrapper) {\n state.wrapper.className = mergeClasses(tableCellLayoutClassNames.wrapper, styles.wrapper, state.wrapper.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -14,8 +14,10 @@ import { useTableContext } from '../../contexts/tableContext';
|
|
|
14
14
|
export const useTableHeader_unstable = (props, ref) => {
|
|
15
15
|
var _a;
|
|
16
16
|
|
|
17
|
-
const
|
|
18
|
-
|
|
17
|
+
const {
|
|
18
|
+
noNativeElements,
|
|
19
|
+
sortable
|
|
20
|
+
} = useTableContext();
|
|
19
21
|
const keyboardNavAttr = useArrowNavigationGroup({
|
|
20
22
|
axis: 'horizontal',
|
|
21
23
|
circular: true
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/TableHeader/useTableHeader.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AACA,SAAS,uBAAT,QAAwC,yBAAxC;AAEA,SAAS,eAAT,QAAgC,6BAAhC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;;;EAChH,MAAM,
|
|
1
|
+
{"version":3,"sources":["components/TableHeader/useTableHeader.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AACA,SAAS,uBAAT,QAAwC,yBAAxC;AAEA,SAAS,eAAT,QAAgC,6BAAhC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;;;EAChH,MAAM;IAAE,gBAAF;IAAoB;EAApB,IAAiC,eAAe,EAAtD;EACA,MAAM,eAAe,GAAG,uBAAuB,CAAC;IAAE,IAAI,EAAE,YAAR;IAAsB,QAAQ,EAAE;EAAhC,CAAD,CAA/C;EAEA,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,OAA7D;EACA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CADP;IAIL,IAAI,EAAE,qBAAqB,CAAC,aAAD,EAAgB;MACzC,GADyC;MAEzC,IAAI,EAAE,aAAa,KAAK,KAAlB,GAA0B,UAA1B,GAAuC,SAFJ;MAGzC,IAAI,QAAQ,IAAI,eAAhB,CAHyC;MAIzC,GAAG;IAJsC,CAAhB;EAJtB,CAAP;AAWD,CAhBM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport type { TableHeaderProps, TableHeaderState } from './TableHeader.types';\nimport { useTableContext } from '../../contexts/tableContext';\n\n/**\n * Create the state required to render TableHeader.\n *\n * The returned state can be modified with hooks such as useTableHeaderStyles_unstable,\n * before being passed to renderTableHeader_unstable.\n *\n * @param props - props from this instance of TableHeader\n * @param ref - reference to root HTMLElement of TableHeader\n */\nexport const useTableHeader_unstable = (props: TableHeaderProps, ref: React.Ref<HTMLElement>): TableHeaderState => {\n const { noNativeElements, sortable } = useTableContext();\n const keyboardNavAttr = useArrowNavigationGroup({ axis: 'horizontal', circular: true });\n\n const rootComponent = props.as ?? noNativeElements ? 'div' : 'thead';\n return {\n components: {\n root: rootComponent,\n },\n root: getNativeElementProps(rootComponent, {\n ref,\n role: rootComponent === 'div' ? 'rowgroup' : undefined,\n ...(sortable && keyboardNavAttr),\n ...props,\n }),\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,14 +1,24 @@
|
|
|
1
|
-
import { mergeClasses } from '@griffel/react';
|
|
1
|
+
import { mergeClasses, __styles } from '@griffel/react';
|
|
2
2
|
export const tableHeaderClassName = 'fui-TableHeader';
|
|
3
3
|
export const tableHeaderClassNames = {
|
|
4
4
|
root: 'fui-TableHeader'
|
|
5
5
|
};
|
|
6
|
+
|
|
7
|
+
const useStyles = /*#__PURE__*/__styles({
|
|
8
|
+
"root": {
|
|
9
|
+
"mc9l5x": "f1tp1avn"
|
|
10
|
+
}
|
|
11
|
+
}, {
|
|
12
|
+
"d": [".f1tp1avn{display:table-row-group;}"]
|
|
13
|
+
});
|
|
6
14
|
/**
|
|
7
15
|
* Apply styling to the TableHeader slots based on the state
|
|
8
16
|
*/
|
|
9
17
|
|
|
18
|
+
|
|
10
19
|
export const useTableHeaderStyles_unstable = state => {
|
|
11
|
-
|
|
20
|
+
const styles = useStyles();
|
|
21
|
+
state.root.className = mergeClasses(tableHeaderClassName, styles.root, state.root.className);
|
|
12
22
|
return state;
|
|
13
23
|
};
|
|
14
24
|
//# sourceMappingURL=useTableHeaderStyles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/TableHeader/useTableHeaderStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,
|
|
1
|
+
{"version":3,"sources":["components/TableHeader/useTableHeaderStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,kBAAyC,gBAAzC;AAIA,OAAO,MAAM,oBAAoB,GAAG,iBAA7B;AACP,OAAO,MAAM,qBAAqB,GAAqC;EACrE,IAAI,EAAE;AAD+D,CAAhE;;AAIP,MAAM,SAAS,gBAAG;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAMA;;AAEG;;;AACH,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA8C;EACzF,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,oBAAD,EAAuB,MAAM,CAAC,IAA9B,EAAoC,KAAK,CAAC,IAAN,CAAW,SAA/C,CAAnC;EAEA,OAAO,KAAP;AACD,CALM","sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport type { TableHeaderSlots, TableHeaderState } from './TableHeader.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tableHeaderClassName = 'fui-TableHeader';\nexport const tableHeaderClassNames: SlotClassNames<TableHeaderSlots> = {\n root: 'fui-TableHeader',\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'table-row-group',\n },\n});\n\n/**\n * Apply styling to the TableHeader slots based on the state\n */\nexport const useTableHeaderStyles_unstable = (state: TableHeaderState): TableHeaderState => {\n const styles = useStyles();\n state.root.className = mergeClasses(tableHeaderClassName, styles.root, state.root.className);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -20,8 +20,10 @@ const sortIcons = {
|
|
|
20
20
|
export const useTableHeaderCell_unstable = (props, ref) => {
|
|
21
21
|
var _a;
|
|
22
22
|
|
|
23
|
-
const
|
|
24
|
-
|
|
23
|
+
const {
|
|
24
|
+
noNativeElements,
|
|
25
|
+
sortable
|
|
26
|
+
} = useTableContext();
|
|
25
27
|
const rootComponent = ((_a = props.as) !== null && _a !== void 0 ? _a : noNativeElements) ? 'div' : 'th';
|
|
26
28
|
return {
|
|
27
29
|
components: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/TableHeaderCell/useTableHeaderCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AACA,SAAS,cAAT,EAAyB,gBAAzB,QAAiD,uBAAjD;AAEA,SAAS,eAAT,QAAgC,6BAAhC;AACA,SAAS,sBAAT,QAAuC,sBAAvC;AAEA,MAAM,SAAS,GAAG;EAChB,SAAS,eAAE,KAAA,CAAA,aAAA,CAAC,cAAD,EAAe,IAAf,CADK;EAEhB,UAAU,eAAE,KAAA,CAAA,aAAA,CAAC,gBAAD,EAAiB,IAAjB;AAFI,CAAlB;AAKA;;;;;;;;AAQG;;AACH,OAAO,MAAM,2BAA2B,GAAG,CACzC,KADyC,EAEzC,GAFyC,KAGjB;;;EACxB,MAAM,
|
|
1
|
+
{"version":3,"sources":["components/TableHeaderCell/useTableHeaderCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AACA,SAAS,cAAT,EAAyB,gBAAzB,QAAiD,uBAAjD;AAEA,SAAS,eAAT,QAAgC,6BAAhC;AACA,SAAS,sBAAT,QAAuC,sBAAvC;AAEA,MAAM,SAAS,GAAG;EAChB,SAAS,eAAE,KAAA,CAAA,aAAA,CAAC,cAAD,EAAe,IAAf,CADK;EAEhB,UAAU,eAAE,KAAA,CAAA,aAAA,CAAC,gBAAD,EAAiB,IAAjB;AAFI,CAAlB;AAKA;;;;;;;;AAQG;;AACH,OAAO,MAAM,2BAA2B,GAAG,CACzC,KADyC,EAEzC,GAFyC,KAGjB;;;EACxB,MAAM;IAAE,gBAAF;IAAoB;EAApB,IAAiC,eAAe,EAAtD;EAEA,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,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE,aADI;MAEV,MAAM,EAAE,QAFE;MAGV,QAAQ,EAAE;IAHA,CADP;IAML,IAAI,EAAE,qBAAqB,CAAC,aAAD,EAAgB;MACzC,GADyC;MAEzC,IAAI,EAAE,aAAa,KAAK,KAAlB,GAA0B,cAA1B,GAA2C,SAFR;MAGzC,aAAa,KAAK,CAAC,aAHsB;MAIzC,GAAG;IAJsC,CAAhB,CANtB;IAYL,QAAQ,EAAE,gBAAgB,CAAC,KAAK,CAAC,QAAP,EAAiB;MACzC,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC,aADuB;MAEzC,YAAY,EAAE;QAAE,QAAQ,EAAE,KAAK,CAAC,aAAN,GAAsB,SAAS,CAAC,KAAK,CAAC,aAAP,CAA/B,GAAuD;MAAnE;IAF2B,CAAjB,CAZrB;IAgBL,MAAM,EAAE,sBAAsB,CAAC,KAAK,CAAC,MAAP,EAAe;MAC3C,QAAQ,EAAE,IADiC;MAE3C,YAAY,EAAE;QACZ,IAAI,EAAE,cADM;QAEZ,QAAQ,EAAE,CAAC,CAFC;QAGZ,IAAI,EAAE,QAHM;QAIZ,IAAI,QAAQ,IAAI;UACd,IAAI,EAAE,SADQ;UAEd,QAAQ,EAAE;QAFI,CAAhB;MAJY;IAF6B,CAAf,CAhBzB;IA4BL;EA5BK,CAAP;AA8BD,CArCM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport { ArrowUpRegular, ArrowDownRegular } from '@fluentui/react-icons';\nimport type { TableHeaderCellProps, TableHeaderCellState } from './TableHeaderCell.types';\nimport { useTableContext } from '../../contexts/tableContext';\nimport { useARIAButtonShorthand } from '@fluentui/react-aria';\n\nconst sortIcons = {\n ascending: <ArrowUpRegular />,\n descending: <ArrowDownRegular />,\n};\n\n/**\n * Create the state required to render TableHeaderCell.\n *\n * The returned state can be modified with hooks such as useTableHeaderCellStyles_unstable,\n * before being passed to renderTableHeaderCell_unstable.\n *\n * @param props - props from this instance of TableHeaderCell\n * @param ref - reference to root HTMLElement of TableHeaderCell\n */\nexport const useTableHeaderCell_unstable = (\n props: TableHeaderCellProps,\n ref: React.Ref<HTMLElement>,\n): TableHeaderCellState => {\n const { noNativeElements, sortable } = useTableContext();\n\n const rootComponent = props.as ?? noNativeElements ? 'div' : 'th';\n return {\n components: {\n root: rootComponent,\n button: 'button',\n sortIcon: 'span',\n },\n root: getNativeElementProps(rootComponent, {\n ref,\n role: rootComponent === 'div' ? 'columnheader' : undefined,\n 'aria-sort': props.sortDirection,\n ...props,\n }),\n sortIcon: resolveShorthand(props.sortIcon, {\n required: !!props.sortDirection,\n defaultProps: { children: props.sortDirection ? sortIcons[props.sortDirection] : undefined },\n }),\n button: useARIAButtonShorthand(props.button, {\n required: true,\n defaultProps: {\n role: 'presentation',\n tabIndex: -1,\n type: 'button',\n ...(sortable && {\n role: undefined,\n tabIndex: undefined,\n }),\n },\n }),\n sortable,\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -12,18 +12,15 @@ export const tableHeaderCellClassNames = {
|
|
|
12
12
|
|
|
13
13
|
const useStyles = /*#__PURE__*/__styles({
|
|
14
14
|
"root": {
|
|
15
|
-
"
|
|
15
|
+
"mc9l5x": "f15pt5es",
|
|
16
|
+
"ha4doy": "fmrv4ls",
|
|
16
17
|
"z8tnut": "f1nbblvp",
|
|
17
18
|
"z189sj": ["f1vdfbxk", "f1f5gg8d"],
|
|
18
19
|
"Byoj8tv": "f1ov4xf1",
|
|
19
|
-
"uwmqm3": ["f1f5gg8d", "f1vdfbxk"]
|
|
20
|
-
"mc9l5x": "f22iagw",
|
|
21
|
-
"Bt984gj": "f122n59",
|
|
22
|
-
"Bh6795r": "fqerorx",
|
|
23
|
-
"Bnnss6s": "f1neuvcm",
|
|
24
|
-
"xawz": "fkjuxzh"
|
|
20
|
+
"uwmqm3": ["f1f5gg8d", "f1vdfbxk"]
|
|
25
21
|
},
|
|
26
22
|
"resetButton": {
|
|
23
|
+
"B3rzk8w": "fq6nmtn",
|
|
27
24
|
"B7ck84d": "f1e4lqlz",
|
|
28
25
|
"De3pzq": "f1u2r49w",
|
|
29
26
|
"sj55zd": "f1ym3bx4",
|
|
@@ -44,12 +41,16 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
44
41
|
"fsow6f": "fgusgyc"
|
|
45
42
|
},
|
|
46
43
|
"button": {
|
|
44
|
+
"a9b677": "fly5x3f",
|
|
47
45
|
"mc9l5x": "f22iagw",
|
|
48
46
|
"Bh6795r": "fqerorx",
|
|
49
47
|
"Bqenvij": "f1l02sjl",
|
|
50
48
|
"Bt984gj": "f122n59",
|
|
51
49
|
"i8kkvl": "fsnqrgy",
|
|
52
|
-
"Belr9w4": "fylz90v"
|
|
50
|
+
"Belr9w4": "fylz90v",
|
|
51
|
+
"sshi5w": "f5pgtk9",
|
|
52
|
+
"Bnnss6s": "f1neuvcm",
|
|
53
|
+
"xawz": "fkjuxzh"
|
|
53
54
|
},
|
|
54
55
|
"sortable": {
|
|
55
56
|
"Bceei9c": "f1k6fduh"
|
|
@@ -59,7 +60,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
59
60
|
"Bt984gj": "f122n59"
|
|
60
61
|
}
|
|
61
62
|
}, {
|
|
62
|
-
"d": [".
|
|
63
|
+
"d": [".f15pt5es{display:table-cell;}", ".fmrv4ls{vertical-align:middle;}", ".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;}", ".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;}"]
|
|
63
64
|
});
|
|
64
65
|
/**
|
|
65
66
|
* Apply styling to the TableHeaderCell slots based on the state
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/TableHeaderCell/useTableHeaderCellStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAIA,OAAO,MAAM,wBAAwB,GAAG,qBAAjC;AACP,OAAO,MAAM,yBAAyB,GAAyC;EAC7E,IAAI,EAAE,qBADuE;EAE7E,MAAM,EAAE,6BAFqE;EAG7E,QAAQ,EAAE;AAHmE,CAAxE;AAMP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;
|
|
1
|
+
{"version":3,"sources":["components/TableHeaderCell/useTableHeaderCellStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAIA,OAAO,MAAM,wBAAwB,GAAG,qBAAjC;AACP,OAAO,MAAM,yBAAyB,GAAyC;EAC7E,IAAI,EAAE,qBADuE;EAE7E,MAAM,EAAE,6BAFqE;EAG7E,QAAQ,EAAE;AAHmE,CAAxE;AAMP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;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;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAyCA;;AAEG;;;AACH,OAAO,MAAM,iCAAiC,GAAI,KAAD,IAAsD;EACrG,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,yBAAyB,CAAC,IAA3B,EAAiC,MAAM,CAAC,IAAxC,EAA8C,KAAK,CAAC,IAAN,CAAW,SAAzD,CAAnC;EACA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CACnC,yBAAyB,CAAC,MADS,EAEnC,MAAM,CAAC,WAF4B,EAGnC,MAAM,CAAC,MAH4B,EAInC,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,QAJU,EAKnC,KAAK,CAAC,MAAN,CAAa,SALsB,CAArC;;EAQA,IAAI,KAAK,CAAC,QAAV,EAAoB;IAClB,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,YAAY,CACrC,yBAAyB,CAAC,QADW,EAErC,MAAM,CAAC,QAF8B,EAGrC,KAAK,CAAC,QAAN,CAAe,SAHsB,CAAvC;EAKD;;EAED,OAAO,KAAP;AACD,CApBM","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\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'table-cell',\n verticalAlign: 'middle',\n ...shorthands.padding('0px', tokens.spacingHorizontalS),\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 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 state.root.className = mergeClasses(tableHeaderCellClassNames.root, styles.root, state.root.className);\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/"}
|
|
@@ -13,8 +13,10 @@ import { useTableContext } from '../../contexts/tableContext';
|
|
|
13
13
|
export const useTableRow_unstable = (props, ref) => {
|
|
14
14
|
var _a;
|
|
15
15
|
|
|
16
|
-
const
|
|
17
|
-
|
|
16
|
+
const {
|
|
17
|
+
noNativeElements,
|
|
18
|
+
size
|
|
19
|
+
} = useTableContext();
|
|
18
20
|
const rootComponent = ((_a = props.as) !== null && _a !== void 0 ? _a : noNativeElements) ? 'div' : 'tr';
|
|
19
21
|
return {
|
|
20
22
|
components: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/TableRow/useTableRow.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAEA,SAAS,eAAT,QAAgC,6BAAhC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,oBAAoB,GAAG,CAAC,KAAD,EAAuB,GAAvB,KAAqE;;;EACvG,MAAM,
|
|
1
|
+
{"version":3,"sources":["components/TableRow/useTableRow.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAEA,SAAS,eAAT,QAAgC,6BAAhC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,oBAAoB,GAAG,CAAC,KAAD,EAAuB,GAAvB,KAAqE;;;EACvG,MAAM;IAAE,gBAAF;IAAoB;EAApB,IAA6B,eAAe,EAAlD;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,qBAAqB,CAAC,aAAD,EAAgB;MACzC,GADyC;MAEzC,IAAI,EAAE,aAAa,KAAK,KAAlB,GAA0B,KAA1B,GAAkC,SAFC;MAGzC,GAAG;IAHsC,CAAhB,CAJtB;IASL;EATK,CAAP;AAWD,CAfM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { TableRowProps, TableRowState } from './TableRow.types';\nimport { useTableContext } from '../../contexts/tableContext';\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\n return {\n components: {\n root: rootComponent,\n },\n root: getNativeElementProps(rootComponent, {\n ref,\n role: rootComponent === 'div' ? 'row' : undefined,\n ...props,\n }),\n size,\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { __styles, mergeClasses, shorthands } from '@griffel/react';
|
|
2
2
|
import { tokens } from '@fluentui/react-theme';
|
|
3
|
+
import { tableCellActionsClassNames } from '../TableCellActions/useTableCellActionsStyles';
|
|
3
4
|
export const tableRowClassName = 'fui-TableRow';
|
|
4
5
|
export const tableRowClassNames = {
|
|
5
6
|
root: tableRowClassName
|
|
@@ -10,29 +11,30 @@ export const tableRowClassNames = {
|
|
|
10
11
|
|
|
11
12
|
const useStyles = /*#__PURE__*/__styles({
|
|
12
13
|
"root": {
|
|
13
|
-
"mc9l5x": "
|
|
14
|
+
"mc9l5x": "f1u0rzck",
|
|
14
15
|
"sj55zd": "f19n0e5",
|
|
15
|
-
"Jwef8y": "f1knas48"
|
|
16
|
+
"Jwef8y": "f1knas48",
|
|
17
|
+
"Bpt6rm4": "f1uorfem"
|
|
16
18
|
},
|
|
17
19
|
"medium": {
|
|
18
|
-
"
|
|
20
|
+
"Bqenvij": "f1ft4266",
|
|
19
21
|
"Bn0qgzm": "f1vxd6vx",
|
|
20
22
|
"oivjwe": "fg706s2",
|
|
21
23
|
"B9xav0g": "frpde29"
|
|
22
24
|
},
|
|
23
25
|
"small": {
|
|
24
|
-
"
|
|
26
|
+
"Bqenvij": "fbsu25e",
|
|
25
27
|
"Bn0qgzm": "f1vxd6vx",
|
|
26
28
|
"oivjwe": "fg706s2",
|
|
27
29
|
"B9xav0g": "frpde29"
|
|
28
30
|
},
|
|
29
31
|
"smaller": {
|
|
30
|
-
"
|
|
32
|
+
"Bqenvij": "frvgh55",
|
|
31
33
|
"Be2twd7": "fy9rknc"
|
|
32
34
|
}
|
|
33
35
|
}, {
|
|
34
|
-
"d": [".
|
|
35
|
-
"h": [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}"]
|
|
36
|
+
"d": [".f1u0rzck{display:table-row;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1ft4266{height:44px;}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fg706s2{border-bottom-style:solid;}", ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}", ".fbsu25e{height:34px;}", ".frvgh55{height:24px;}", ".fy9rknc{font-size:var(--fontSizeBase200);}"],
|
|
37
|
+
"h": [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".f1uorfem:hover .fui-TableCellActions{opacity:1;}"]
|
|
36
38
|
});
|
|
37
39
|
/**
|
|
38
40
|
* Apply styling to the TableRow slots based on the state
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/TableRow/useTableRowStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;
|
|
1
|
+
{"version":3,"sources":["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;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;AAAA,EAAlB;AA4BA;;AAEG;;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAAwC;EAChF,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,kBAAkB,CAAC,IAApB,EAA0B,MAAM,CAAC,IAAjC,EAAuC,MAAM,CAAC,KAAK,CAAC,IAAP,CAA7C,EAA2D,KAAK,CAAC,IAAN,CAAW,SAAtE,CAAnC;EAEA,OAAO,KAAP;AACD,CALM","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';\n\nexport const tableRowClassName = 'fui-TableRow';\nexport const tableRowClassNames: SlotClassNames<TableRowSlots> = {\n root: tableRowClassName,\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'table-row',\n color: tokens.colorNeutralForeground1,\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n [`& .${tableCellActionsClassNames.root}`]: {\n opacity: 1,\n },\n },\n },\n\n medium: {\n height: '44px',\n ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n },\n\n small: {\n height: '34px',\n ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n },\n\n smaller: {\n height: '24px',\n fontSize: tokens.fontSizeBase200,\n },\n});\n\n/**\n * Apply styling to the TableRow slots based on the state\n */\nexport const useTableRowStyles_unstable = (state: TableRowState): TableRowState => {\n const styles = useStyles();\n state.root.className = mergeClasses(tableRowClassNames.root, styles.root, styles[state.size], state.root.className);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { useTableSelectionCell_unstable } from './useTableSelectionCell';
|
|
3
|
+
import { renderTableSelectionCell_unstable } from './renderTableSelectionCell';
|
|
4
|
+
import { useTableSelectionCellStyles_unstable } from './useTableSelectionCellStyles';
|
|
5
|
+
/**
|
|
6
|
+
* TableSelectionCell component - TODO: add more docs
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
export const TableSelectionCell = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
10
|
+
const state = useTableSelectionCell_unstable(props, ref);
|
|
11
|
+
useTableSelectionCellStyles_unstable(state);
|
|
12
|
+
return renderTableSelectionCell_unstable(state);
|
|
13
|
+
});
|
|
14
|
+
TableSelectionCell.displayName = 'TableSelectionCell';
|
|
15
|
+
//# sourceMappingURL=TableSelectionCell.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["components/TableSelectionCell/TableSelectionCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,8BAAT,QAA+C,yBAA/C;AACA,SAAS,iCAAT,QAAkD,4BAAlD;AACA,SAAS,oCAAT,QAAqD,+BAArD;AAIA;;AAEG;;AACH,OAAO,MAAM,kBAAkB,gBAAiD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC9G,MAAM,KAAK,GAAG,8BAA8B,CAAC,KAAD,EAAQ,GAAR,CAA5C;EAEA,oCAAoC,CAAC,KAAD,CAApC;EACA,OAAO,iCAAiC,CAAC,KAAD,CAAxC;AACD,CAL+E,CAAzE;AAOP,kBAAkB,CAAC,WAAnB,GAAiC,oBAAjC","sourcesContent":["import * as React from 'react';\nimport { useTableSelectionCell_unstable } from './useTableSelectionCell';\nimport { renderTableSelectionCell_unstable } from './renderTableSelectionCell';\nimport { useTableSelectionCellStyles_unstable } from './useTableSelectionCellStyles';\nimport type { TableSelectionCellProps } from './TableSelectionCell.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * TableSelectionCell component - TODO: add more docs\n */\nexport const TableSelectionCell: ForwardRefComponent<TableSelectionCellProps> = React.forwardRef((props, ref) => {\n const state = useTableSelectionCell_unstable(props, ref);\n\n useTableSelectionCellStyles_unstable(state);\n return renderTableSelectionCell_unstable(state);\n});\n\nTableSelectionCell.displayName = 'TableSelectionCell';\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TableSelectionCell.types.js","sourceRoot":"../src/","sources":["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';\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<'span'>;\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\n/**\n * State used in rendering TableSelectionCell\n */\nexport type TableSelectionCellState = ComponentState<TableSelectionCellSlots> &\n Pick<Required<TableSelectionCellProps>, 'type' | 'checked'>;\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/TableSelectionCell/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,+BAA+B,CAAC","sourcesContent":["export * from './TableSelectionCell';\nexport * from './TableSelectionCell.types';\nexport * from './renderTableSelectionCell';\nexport * from './useTableSelectionCell';\nexport * from './useTableSelectionCellStyles';\n"]}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { getSlots } from '@fluentui/react-utilities';
|
|
3
|
+
/**
|
|
4
|
+
* Render the final JSX of TableSelectionCell
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
export const renderTableSelectionCell_unstable = state => {
|
|
8
|
+
const {
|
|
9
|
+
slots,
|
|
10
|
+
slotProps
|
|
11
|
+
} = getSlots(state);
|
|
12
|
+
return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
|
|
13
|
+
}, state.type === 'checkbox' && slots.checkboxIndicator && /*#__PURE__*/React.createElement(slots.checkboxIndicator, { ...slotProps.checkboxIndicator
|
|
14
|
+
}), state.type === 'radio' && slots.radioIndicator && /*#__PURE__*/React.createElement(slots.radioIndicator, { ...slotProps.radioIndicator
|
|
15
|
+
}));
|
|
16
|
+
};
|
|
17
|
+
//# sourceMappingURL=renderTableSelectionCell.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["components/TableSelectionCell/renderTableSelectionCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,iCAAiC,GAAI,KAAD,IAAmC;EAClF,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAA0B,KAA1B,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,IAAN,KAAe,UAAf,IAA6B,KAAK,CAAC,iBAAnC,iBACC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,iBAAP,EAAwB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAxB,CAFJ,EAIG,KAAK,CAAC,IAAN,KAAe,OAAf,IAA0B,KAAK,CAAC,cAAhC,iBAAkD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,cAAP,EAAqB,EAAA,GAAK,SAAS,CAAC;EAAf,CAArB,CAJrD,CADF;AAQD,CAXM","sourcesContent":["import * as React from 'react';\nimport { getSlots } 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 const { slots, slotProps } = getSlots<TableSelectionCellSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n {state.type === 'checkbox' && slots.checkboxIndicator && (\n <slots.checkboxIndicator {...slotProps.checkboxIndicator} />\n )}\n {state.type === 'radio' && slots.radioIndicator && <slots.radioIndicator {...slotProps.radioIndicator} />}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { resolveShorthand } from '@fluentui/react-utilities';
|
|
3
|
+
import { Checkbox } from '@fluentui/react-checkbox';
|
|
4
|
+
import { CheckmarkFilled } from '@fluentui/react-icons';
|
|
5
|
+
import { useTableCell_unstable } from '../TableCell/useTableCell';
|
|
6
|
+
/**
|
|
7
|
+
* Create the state required to render TableSelectionCell.
|
|
8
|
+
*
|
|
9
|
+
* The returned state can be modified with hooks such as useTableSelectionCellStyles_unstable,
|
|
10
|
+
* before being passed to renderTableSelectionCell_unstable.
|
|
11
|
+
*
|
|
12
|
+
* @param props - props from this instance of TableSelectionCell
|
|
13
|
+
* @param ref - reference to root HTMLElement of TableSelectionCell
|
|
14
|
+
*/
|
|
15
|
+
|
|
16
|
+
export const useTableSelectionCell_unstable = (props, ref) => {
|
|
17
|
+
var _a, _b;
|
|
18
|
+
|
|
19
|
+
const tableCellState = useTableCell_unstable(props, ref);
|
|
20
|
+
const type = (_a = props.type) !== null && _a !== void 0 ? _a : 'checkbox';
|
|
21
|
+
return { ...tableCellState,
|
|
22
|
+
components: { ...tableCellState.components,
|
|
23
|
+
checkboxIndicator: Checkbox,
|
|
24
|
+
radioIndicator: 'span'
|
|
25
|
+
},
|
|
26
|
+
checkboxIndicator: resolveShorthand(props.checkboxIndicator, {
|
|
27
|
+
required: type === 'checkbox',
|
|
28
|
+
defaultProps: {
|
|
29
|
+
checked: props.checked
|
|
30
|
+
}
|
|
31
|
+
}),
|
|
32
|
+
radioIndicator: resolveShorthand(props.radioIndicator, {
|
|
33
|
+
required: type === 'radio',
|
|
34
|
+
defaultProps: {
|
|
35
|
+
children: /*#__PURE__*/React.createElement(CheckmarkFilled, null)
|
|
36
|
+
}
|
|
37
|
+
}),
|
|
38
|
+
type,
|
|
39
|
+
checked: (_b = props.checked) !== null && _b !== void 0 ? _b : false
|
|
40
|
+
};
|
|
41
|
+
};
|
|
42
|
+
//# sourceMappingURL=useTableSelectionCell.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["components/TableSelectionCell/useTableSelectionCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,gBAAT,QAAiC,2BAAjC;AACA,SAAS,QAAT,QAAyB,0BAAzB;AACA,SAAS,eAAT,QAAgC,uBAAhC;AAEA,SAAS,qBAAT,QAAsC,2BAAtC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,8BAA8B,GAAG,CAC5C,KAD4C,EAE5C,GAF4C,KAGjB;;;EAC3B,MAAM,cAAc,GAAG,qBAAqB,CAAC,KAAD,EAAQ,GAAR,CAA5C;EACA,MAAM,IAAI,GAAG,CAAA,EAAA,GAAA,KAAK,CAAC,IAAN,MAAU,IAAV,IAAU,EAAA,KAAA,KAAA,CAAV,GAAU,EAAV,GAAc,UAA3B;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,QAAQ,eAAE,KAAA,CAAA,aAAA,CAAC,eAAD,EAAgB,IAAhB;MAAZ;IAFuC,CAAvB,CAX3B;IAeL,IAfK;IAgBL,OAAO,EAAE,CAAA,EAAA,GAAA,KAAK,CAAC,OAAN,MAAa,IAAb,IAAa,EAAA,KAAA,KAAA,CAAb,GAAa,EAAb,GAAiB;EAhBrB,CAAP;AAkBD,CAzBM","sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport { CheckmarkFilled } from '@fluentui/react-icons';\nimport type { TableSelectionCellProps, TableSelectionCellState } from './TableSelectionCell.types';\nimport { useTableCell_unstable } from '../TableCell/useTableCell';\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 type = props.type ?? 'checkbox';\n\n return {\n ...tableCellState,\n components: {\n ...tableCellState.components,\n checkboxIndicator: Checkbox,\n radioIndicator: 'span',\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: { children: <CheckmarkFilled /> },\n }),\n type,\n checked: props.checked ?? false,\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { __styles, mergeClasses, shorthands } from '@griffel/react';
|
|
2
|
+
export const tableSelectionCellClassNames = {
|
|
3
|
+
root: 'fui-TableSelectionCell',
|
|
4
|
+
checkboxIndicator: 'fui-TableSelectionCell__checkboxIndicator',
|
|
5
|
+
radioIndicator: 'fui-TableSelectionCell__radioIndicator'
|
|
6
|
+
};
|
|
7
|
+
/**
|
|
8
|
+
* Styles for the root slot
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
const useStyles = /*#__PURE__*/__styles({
|
|
12
|
+
"root": {
|
|
13
|
+
"a9b677": "fksc0bp",
|
|
14
|
+
"fsow6f": "f17mccla",
|
|
15
|
+
"Huce71": "fz5stix",
|
|
16
|
+
"z8tnut": "f1g0x7ka",
|
|
17
|
+
"z189sj": ["fhxju0i", "f1cnd47f"],
|
|
18
|
+
"Byoj8tv": "f1qch9an",
|
|
19
|
+
"uwmqm3": ["f1cnd47f", "fhxju0i"],
|
|
20
|
+
"mc9l5x": "f15pt5es"
|
|
21
|
+
},
|
|
22
|
+
"radioIndicator": {
|
|
23
|
+
"mc9l5x": "f22iagw",
|
|
24
|
+
"Bh6795r": "fqerorx",
|
|
25
|
+
"Bt984gj": "f122n59",
|
|
26
|
+
"Brf1p80": "f4d9j23",
|
|
27
|
+
"B5pe6w7": "f1cqkysu",
|
|
28
|
+
"p4uzdd": "f1sgf1mg"
|
|
29
|
+
},
|
|
30
|
+
"hidden": {
|
|
31
|
+
"Bcdw1i0": "fd7fpy0"
|
|
32
|
+
}
|
|
33
|
+
}, {
|
|
34
|
+
"d": [".fksc0bp{width:44px;}", ".f17mccla{text-align:center;}", ".fz5stix{white-space:nowrap;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f15pt5es{display:table-cell;}", ".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;}"]
|
|
35
|
+
});
|
|
36
|
+
/**
|
|
37
|
+
* Apply styling to the TableSelectionCell slots based on the state
|
|
38
|
+
*/
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
export const useTableSelectionCellStyles_unstable = state => {
|
|
42
|
+
const styles = useStyles();
|
|
43
|
+
state.root.className = mergeClasses(tableSelectionCellClassNames.root, styles.root, state.root.className);
|
|
44
|
+
|
|
45
|
+
if (state.checkboxIndicator) {
|
|
46
|
+
state.checkboxIndicator.className = mergeClasses(tableSelectionCellClassNames.checkboxIndicator, state.checkboxIndicator.className);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
if (state.radioIndicator) {
|
|
50
|
+
state.radioIndicator.className = mergeClasses(tableSelectionCellClassNames.radioIndicator, styles.radioIndicator, state.checked === false && styles.hidden, state.radioIndicator.className);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
return state;
|
|
54
|
+
};
|
|
55
|
+
//# sourceMappingURL=useTableSelectionCellStyles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["components/TableSelectionCell/useTableSelectionCellStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAIA,OAAO,MAAM,4BAA4B,GAA4C;EACnF,IAAI,EAAE,wBAD6E;EAEnF,iBAAiB,EAAE,2CAFgE;EAGnF,cAAc,EAAE;AAHmE,CAA9E;AAMP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAyBA;;AAEG;;;AACH,OAAO,MAAM,oCAAoC,GAAI,KAAD,IAA4D;EAC9G,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,4BAA4B,CAAC,IAA9B,EAAoC,MAAM,CAAC,IAA3C,EAAiD,KAAK,CAAC,IAAN,CAAW,SAA5D,CAAnC;;EACA,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,OAAN,KAAkB,KAAlB,IAA2B,MAAM,CAAC,MAHS,EAI3C,KAAK,CAAC,cAAN,CAAqB,SAJsB,CAA7C;EAMD;;EAED,OAAO,KAAP;AACD,CApBM","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { TableSelectionCellSlots, TableSelectionCellState } from './TableSelectionCell.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tableSelectionCellClassNames: SlotClassNames<TableSelectionCellSlots> = {\n root: 'fui-TableSelectionCell',\n checkboxIndicator: 'fui-TableSelectionCell__checkboxIndicator',\n radioIndicator: 'fui-TableSelectionCell__radioIndicator',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n width: '44px',\n textAlign: 'center',\n whiteSpace: 'nowrap',\n ...shorthands.padding(0),\n display: 'table-cell',\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 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 state.root.className = mergeClasses(tableSelectionCellClassNames.root, styles.root, state.root.className);\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.checked === false && styles.hidden,\n state.radioIndicator.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,10 +1,14 @@
|
|
|
1
|
-
import
|
|
2
|
-
const tableContext = /*#__PURE__*/createContext(undefined);
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
const tableContext = /*#__PURE__*/React.createContext(undefined);
|
|
3
3
|
export const tableContextDefaultValue = {
|
|
4
4
|
size: 'medium',
|
|
5
5
|
noNativeElements: false,
|
|
6
6
|
sortable: false
|
|
7
7
|
};
|
|
8
8
|
export const TableContextProvider = tableContext.Provider;
|
|
9
|
-
export const useTableContext =
|
|
9
|
+
export const useTableContext = () => {
|
|
10
|
+
var _a;
|
|
11
|
+
|
|
12
|
+
return (_a = React.useContext(tableContext)) !== null && _a !== void 0 ? _a : tableContextDefaultValue;
|
|
13
|
+
};
|
|
10
14
|
//# sourceMappingURL=tableContext.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["contexts/tableContext.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"sources":["contexts/tableContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA,MAAM,YAAY,gBAAG,KAAK,CAAC,aAAN,CAAmD,SAAnD,CAArB;AAEA,OAAO,MAAM,wBAAwB,GAAsB;EACzD,IAAI,EAAE,QADmD;EAEzD,gBAAgB,EAAE,KAFuC;EAGzD,QAAQ,EAAE;AAH+C,CAApD;AAMP,OAAO,MAAM,oBAAoB,GAAG,YAAY,CAAC,QAA1C;AACP,OAAO,MAAM,eAAe,GAAG,MAAK;EAAA,IAAA,EAAA;;EAAC,OAAA,CAAA,EAAA,GAAA,KAAK,CAAC,UAAN,CAAiB,YAAjB,CAAA,MAA8B,IAA9B,IAA8B,EAAA,KAAA,KAAA,CAA9B,GAA8B,EAA9B,GAAkC,wBAAlC;AAA0D,CAAxF","sourcesContent":["import * as React from 'react';\nimport { TableContextValue } from '../components/Table/Table.types';\n\nconst tableContext = React.createContext<TableContextValue | undefined>(undefined);\n\nexport const tableContextDefaultValue: TableContextValue = {\n size: 'medium',\n noNativeElements: false,\n sortable: false,\n};\n\nexport const TableContextProvider = tableContext.Provider;\nexport const useTableContext = () => React.useContext(tableContext) ?? tableContextDefaultValue;\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC","sourcesContent":["export * from './types';\nexport * from './useTable';\n"]}
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
export function createSelectionManager(mode, onSelectionChange = () => undefined) {
|
|
2
|
+
const managerFactory = mode === 'multiselect' ? createMultipleSelectionManager : createSingleSelectionManager;
|
|
3
|
+
return managerFactory(onSelectionChange);
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
function createMultipleSelectionManager(onSelectionChange) {
|
|
7
|
+
const toggleAllItems = (itemIds, selectedItems) => {
|
|
8
|
+
const allItemsSelected = itemIds.every(itemId => selectedItems.has(itemId));
|
|
9
|
+
|
|
10
|
+
if (allItemsSelected) {
|
|
11
|
+
selectedItems.clear();
|
|
12
|
+
} else {
|
|
13
|
+
itemIds.forEach(itemId => selectedItems.add(itemId));
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
onSelectionChange(new Set(selectedItems));
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
const toggleItem = (itemId, selectedItems) => {
|
|
20
|
+
if (selectedItems.has(itemId)) {
|
|
21
|
+
selectedItems.delete(itemId);
|
|
22
|
+
} else {
|
|
23
|
+
selectedItems.add(itemId);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
onSelectionChange(new Set(selectedItems));
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
const selectItem = (itemId, selectedItems) => {
|
|
30
|
+
selectedItems.add(itemId);
|
|
31
|
+
onSelectionChange(new Set(selectedItems));
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
const deselectItem = (itemId, selectedItems) => {
|
|
35
|
+
selectedItems.delete(itemId);
|
|
36
|
+
onSelectionChange(new Set(selectedItems));
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
const clearItems = () => {
|
|
40
|
+
onSelectionChange(new Set());
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
const isSelected = (itemId, selectedItems) => {
|
|
44
|
+
return selectedItems.has(itemId);
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
return {
|
|
48
|
+
toggleItem,
|
|
49
|
+
selectItem,
|
|
50
|
+
deselectItem,
|
|
51
|
+
clearItems,
|
|
52
|
+
isSelected,
|
|
53
|
+
toggleAllItems
|
|
54
|
+
};
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
function createSingleSelectionManager(onSelectionChange) {
|
|
58
|
+
const toggleItem = itemId => {
|
|
59
|
+
onSelectionChange(new Set([itemId]));
|
|
60
|
+
};
|
|
61
|
+
|
|
62
|
+
const clearItems = () => {
|
|
63
|
+
onSelectionChange(new Set());
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
const isSelected = (itemId, selectedItems) => {
|
|
67
|
+
return selectedItems.has(itemId);
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
const selectItem = itemId => {
|
|
71
|
+
onSelectionChange(new Set([itemId]));
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
return {
|
|
75
|
+
deselectItem: clearItems,
|
|
76
|
+
selectItem,
|
|
77
|
+
toggleAllItems: () => {
|
|
78
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
79
|
+
throw new Error('[react-table]: `toggleAllItems` should not be used in single selection mode');
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
return undefined;
|
|
83
|
+
},
|
|
84
|
+
toggleItem,
|
|
85
|
+
clearItems,
|
|
86
|
+
isSelected
|
|
87
|
+
};
|
|
88
|
+
}
|
|
89
|
+
//# sourceMappingURL=selectionManager.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["hooks/selectionManager.ts"],"names":[],"mappings":"AAeA,OAAM,SAAU,sBAAV,CACJ,IADI,EAEJ,iBAAA,GAA+C,MAAM,SAFjD,EAE0D;EAE9D,MAAM,cAAc,GAAG,IAAI,KAAK,aAAT,GAAyB,8BAAzB,GAA0D,4BAAjF;EAEA,OAAO,cAAc,CAAC,iBAAD,CAArB;AACD;;AAED,SAAS,8BAAT,CAAwC,iBAAxC,EAAoF;EAClF,MAAM,cAAc,GAAG,CAAC,OAAD,EAA6B,aAA7B,KAAoE;IACzF,MAAM,gBAAgB,GAAG,OAAO,CAAC,KAAR,CAAc,MAAM,IAAI,aAAa,CAAC,GAAd,CAAkB,MAAlB,CAAxB,CAAzB;;IAEA,IAAI,gBAAJ,EAAsB;MACpB,aAAa,CAAC,KAAd;IACD,CAFD,MAEO;MACL,OAAO,CAAC,OAAR,CAAgB,MAAM,IAAI,aAAa,CAAC,GAAd,CAAkB,MAAlB,CAA1B;IACD;;IAED,iBAAiB,CAAC,IAAI,GAAJ,CAAQ,aAAR,CAAD,CAAjB;EACD,CAVD;;EAYA,MAAM,UAAU,GAAG,CAAC,MAAD,EAA0B,aAA1B,KAAiE;IAClF,IAAI,aAAa,CAAC,GAAd,CAAkB,MAAlB,CAAJ,EAA+B;MAC7B,aAAa,CAAC,MAAd,CAAqB,MAArB;IACD,CAFD,MAEO;MACL,aAAa,CAAC,GAAd,CAAkB,MAAlB;IACD;;IAED,iBAAiB,CAAC,IAAI,GAAJ,CAAQ,aAAR,CAAD,CAAjB;EACD,CARD;;EAUA,MAAM,UAAU,GAAG,CAAC,MAAD,EAA0B,aAA1B,KAAiE;IAClF,aAAa,CAAC,GAAd,CAAkB,MAAlB;IACA,iBAAiB,CAAC,IAAI,GAAJ,CAAQ,aAAR,CAAD,CAAjB;EACD,CAHD;;EAKA,MAAM,YAAY,GAAG,CAAC,MAAD,EAA0B,aAA1B,KAAiE;IACpF,aAAa,CAAC,MAAd,CAAqB,MAArB;IACA,iBAAiB,CAAC,IAAI,GAAJ,CAAQ,aAAR,CAAD,CAAjB;EACD,CAHD;;EAKA,MAAM,UAAU,GAAG,MAAK;IACtB,iBAAiB,CAAC,IAAI,GAAJ,EAAD,CAAjB;EACD,CAFD;;EAIA,MAAM,UAAU,GAAG,CAAC,MAAD,EAA0B,aAA1B,KAAiE;IAClF,OAAO,aAAa,CAAC,GAAd,CAAkB,MAAlB,CAAP;EACD,CAFD;;EAIA,OAAO;IACL,UADK;IAEL,UAFK;IAGL,YAHK;IAIL,UAJK;IAKL,UALK;IAML;EANK,CAAP;AAQD;;AAED,SAAS,4BAAT,CAAsC,iBAAtC,EAAkF;EAChF,MAAM,UAAU,GAAI,MAAD,IAA4B;IAC7C,iBAAiB,CAAC,IAAI,GAAJ,CAAQ,CAAC,MAAD,CAAR,CAAD,CAAjB;EACD,CAFD;;EAIA,MAAM,UAAU,GAAG,MAAK;IACtB,iBAAiB,CAAC,IAAI,GAAJ,EAAD,CAAjB;EACD,CAFD;;EAIA,MAAM,UAAU,GAAG,CAAC,MAAD,EAA0B,aAA1B,KAAiE;IAClF,OAAO,aAAa,CAAC,GAAd,CAAkB,MAAlB,CAAP;EACD,CAFD;;EAIA,MAAM,UAAU,GAAI,MAAD,IAA4B;IAC7C,iBAAiB,CAAC,IAAI,GAAJ,CAAQ,CAAC,MAAD,CAAR,CAAD,CAAjB;EACD,CAFD;;EAIA,OAAO;IACL,YAAY,EAAE,UADT;IAEL,UAFK;IAGL,cAAc,EAAE,MAAK;MACnB,IAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAA7B,EAA2C;QACzC,MAAM,IAAI,KAAJ,CAAU,6EAAV,CAAN;MACD;;MAED,OAAO,SAAP;IACD,CATI;IAUL,UAVK;IAWL,UAXK;IAYL;EAZK,CAAP;AAcD","sourcesContent":["import { SelectionMode } from './types';\n\ntype OnSelectionChangeCallback = (selectedItems: Set<SelectionItemId>) => void;\n\nexport interface SelectionManager {\n toggleItem(id: SelectionItemId, selectedItems: Set<SelectionItemId>): void;\n selectItem(id: SelectionItemId, selectedItems: Set<SelectionItemId>): void;\n deselectItem(id: SelectionItemId, selectedItems: Set<SelectionItemId>): void;\n clearItems(): void;\n isSelected(id: SelectionItemId, selectedItems: Set<SelectionItemId>): boolean;\n toggleAllItems(itemIds: SelectionItemId[], selectedItems: Set<SelectionItemId>): void;\n}\n\nexport type SelectionItemId = string | number;\n\nexport function createSelectionManager(\n mode: SelectionMode,\n onSelectionChange: OnSelectionChangeCallback = () => undefined,\n): SelectionManager {\n const managerFactory = mode === 'multiselect' ? createMultipleSelectionManager : createSingleSelectionManager;\n\n return managerFactory(onSelectionChange);\n}\n\nfunction createMultipleSelectionManager(onSelectionChange: OnSelectionChangeCallback): SelectionManager {\n const toggleAllItems = (itemIds: SelectionItemId[], selectedItems: Set<SelectionItemId>) => {\n const allItemsSelected = itemIds.every(itemId => selectedItems.has(itemId));\n\n if (allItemsSelected) {\n selectedItems.clear();\n } else {\n itemIds.forEach(itemId => selectedItems.add(itemId));\n }\n\n onSelectionChange(new Set(selectedItems));\n };\n\n const toggleItem = (itemId: SelectionItemId, selectedItems: Set<SelectionItemId>) => {\n if (selectedItems.has(itemId)) {\n selectedItems.delete(itemId);\n } else {\n selectedItems.add(itemId);\n }\n\n onSelectionChange(new Set(selectedItems));\n };\n\n const selectItem = (itemId: SelectionItemId, selectedItems: Set<SelectionItemId>) => {\n selectedItems.add(itemId);\n onSelectionChange(new Set(selectedItems));\n };\n\n const deselectItem = (itemId: SelectionItemId, selectedItems: Set<SelectionItemId>) => {\n selectedItems.delete(itemId);\n onSelectionChange(new Set(selectedItems));\n };\n\n const clearItems = () => {\n onSelectionChange(new Set());\n };\n\n const isSelected = (itemId: SelectionItemId, selectedItems: Set<SelectionItemId>) => {\n return selectedItems.has(itemId);\n };\n\n return {\n toggleItem,\n selectItem,\n deselectItem,\n clearItems,\n isSelected,\n toggleAllItems,\n };\n}\n\nfunction createSingleSelectionManager(onSelectionChange: OnSelectionChangeCallback): SelectionManager {\n const toggleItem = (itemId: SelectionItemId) => {\n onSelectionChange(new Set([itemId]));\n };\n\n const clearItems = () => {\n onSelectionChange(new Set<SelectionItemId>());\n };\n\n const isSelected = (itemId: SelectionItemId, selectedItems: Set<SelectionItemId>) => {\n return selectedItems.has(itemId);\n };\n\n const selectItem = (itemId: SelectionItemId) => {\n onSelectionChange(new Set([itemId]));\n };\n\n return {\n deselectItem: clearItems,\n selectItem,\n toggleAllItems: () => {\n if (process.env.NODE_ENV !== 'production') {\n throw new Error('[react-table]: `toggleAllItems` should not be used in single selection mode');\n }\n\n return undefined;\n },\n toggleItem,\n clearItems,\n isSelected,\n };\n}\n"],"sourceRoot":"../src/"}
|