@fluentui/react-table 9.0.0-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +80 -0
- package/CHANGELOG.md +36 -0
- package/LICENSE +15 -0
- package/README.md +5 -0
- package/Spec.md +63 -0
- package/dist/index.d.ts +321 -0
- package/dist/tsdoc-metadata.json +11 -0
- package/lib/Table.js +2 -0
- package/lib/Table.js.map +1 -0
- package/lib/TableBody.js +2 -0
- package/lib/TableBody.js.map +1 -0
- package/lib/TableCell.js +2 -0
- package/lib/TableCell.js.map +1 -0
- package/lib/TableHeader.js +2 -0
- package/lib/TableHeader.js.map +1 -0
- package/lib/TableHeaderCell.js +2 -0
- package/lib/TableHeaderCell.js.map +1 -0
- package/lib/TableRow.js +2 -0
- package/lib/TableRow.js.map +1 -0
- package/lib/components/Table/Table.js +16 -0
- package/lib/components/Table/Table.js.map +1 -0
- package/lib/components/Table/Table.types.js +2 -0
- package/lib/components/Table/Table.types.js.map +1 -0
- package/lib/components/Table/index.js +6 -0
- package/lib/components/Table/index.js.map +1 -0
- package/lib/components/Table/renderTable.js +18 -0
- package/lib/components/Table/renderTable.js.map +1 -0
- package/lib/components/Table/useTable.js +30 -0
- package/lib/components/Table/useTable.js.map +1 -0
- package/lib/components/Table/useTableContextValues.js +15 -0
- package/lib/components/Table/useTableContextValues.js.map +1 -0
- package/lib/components/Table/useTableStyles.js +27 -0
- package/lib/components/Table/useTableStyles.js.map +1 -0
- package/lib/components/TableBody/TableBody.js +15 -0
- package/lib/components/TableBody/TableBody.js.map +1 -0
- package/lib/components/TableBody/TableBody.types.js +2 -0
- package/lib/components/TableBody/TableBody.types.js.map +1 -0
- package/lib/components/TableBody/index.js +6 -0
- package/lib/components/TableBody/index.js.map +1 -0
- package/lib/components/TableBody/renderTableBody.js +16 -0
- package/lib/components/TableBody/renderTableBody.js.map +1 -0
- package/lib/components/TableBody/useTableBody.js +29 -0
- package/lib/components/TableBody/useTableBody.js.map +1 -0
- package/lib/components/TableBody/useTableBodyStyles.js +14 -0
- package/lib/components/TableBody/useTableBodyStyles.js.map +1 -0
- package/lib/components/TableCell/TableCell.js +15 -0
- package/lib/components/TableCell/TableCell.js.map +1 -0
- package/lib/components/TableCell/TableCell.types.js +2 -0
- package/lib/components/TableCell/TableCell.types.js.map +1 -0
- package/lib/components/TableCell/index.js +6 -0
- package/lib/components/TableCell/index.js.map +1 -0
- package/lib/components/TableCell/renderTableCell.js +17 -0
- package/lib/components/TableCell/renderTableCell.js.map +1 -0
- package/lib/components/TableCell/useTableCell.js +31 -0
- package/lib/components/TableCell/useTableCell.js.map +1 -0
- package/lib/components/TableCell/useTableCellStyles.js +48 -0
- package/lib/components/TableCell/useTableCellStyles.js.map +1 -0
- package/lib/components/TableHeader/TableHeader.js +15 -0
- package/lib/components/TableHeader/TableHeader.js.map +1 -0
- package/lib/components/TableHeader/TableHeader.types.js +2 -0
- package/lib/components/TableHeader/TableHeader.types.js.map +1 -0
- package/lib/components/TableHeader/index.js +6 -0
- package/lib/components/TableHeader/index.js.map +1 -0
- package/lib/components/TableHeader/renderTableHeader.js +15 -0
- package/lib/components/TableHeader/renderTableHeader.js.map +1 -0
- package/lib/components/TableHeader/useTableHeader.js +36 -0
- package/lib/components/TableHeader/useTableHeader.js.map +1 -0
- package/lib/components/TableHeader/useTableHeaderStyles.js +14 -0
- package/lib/components/TableHeader/useTableHeaderStyles.js.map +1 -0
- package/lib/components/TableHeaderCell/TableHeaderCell.js +15 -0
- package/lib/components/TableHeaderCell/TableHeaderCell.js.map +1 -0
- package/lib/components/TableHeaderCell/TableHeaderCell.types.js +2 -0
- package/lib/components/TableHeaderCell/TableHeaderCell.types.js.map +1 -0
- package/lib/components/TableHeaderCell/index.js +6 -0
- package/lib/components/TableHeaderCell/index.js.map +1 -0
- package/lib/components/TableHeaderCell/renderTableHeaderCell.js +17 -0
- package/lib/components/TableHeaderCell/renderTableHeaderCell.js.map +1 -0
- package/lib/components/TableHeaderCell/useTableHeaderCell.js +59 -0
- package/lib/components/TableHeaderCell/useTableHeaderCell.js.map +1 -0
- package/lib/components/TableHeaderCell/useTableHeaderCellStyles.js +80 -0
- package/lib/components/TableHeaderCell/useTableHeaderCellStyles.js.map +1 -0
- package/lib/components/TableRow/TableRow.js +15 -0
- package/lib/components/TableRow/TableRow.js.map +1 -0
- package/lib/components/TableRow/TableRow.types.js +2 -0
- package/lib/components/TableRow/TableRow.types.js.map +1 -0
- package/lib/components/TableRow/index.js +6 -0
- package/lib/components/TableRow/index.js.map +1 -0
- package/lib/components/TableRow/renderTableRow.js +16 -0
- package/lib/components/TableRow/renderTableRow.js.map +1 -0
- package/lib/components/TableRow/useTableRow.js +31 -0
- package/lib/components/TableRow/useTableRow.js.map +1 -0
- package/lib/components/TableRow/useTableRowStyles.js +47 -0
- package/lib/components/TableRow/useTableRowStyles.js.map +1 -0
- package/lib/contexts/tableContext.js +10 -0
- package/lib/contexts/tableContext.js.map +1 -0
- package/lib/index.js +8 -0
- package/lib/index.js.map +1 -0
- package/lib-commonjs/Table.js +10 -0
- package/lib-commonjs/Table.js.map +1 -0
- package/lib-commonjs/TableBody.js +10 -0
- package/lib-commonjs/TableBody.js.map +1 -0
- package/lib-commonjs/TableCell.js +10 -0
- package/lib-commonjs/TableCell.js.map +1 -0
- package/lib-commonjs/TableHeader.js +10 -0
- package/lib-commonjs/TableHeader.js.map +1 -0
- package/lib-commonjs/TableHeaderCell.js +10 -0
- package/lib-commonjs/TableHeaderCell.js.map +1 -0
- package/lib-commonjs/TableRow.js +10 -0
- package/lib-commonjs/TableRow.js.map +1 -0
- package/lib-commonjs/components/Table/Table.js +28 -0
- package/lib-commonjs/components/Table/Table.js.map +1 -0
- package/lib-commonjs/components/Table/Table.types.js +6 -0
- package/lib-commonjs/components/Table/Table.types.js.map +1 -0
- package/lib-commonjs/components/Table/index.js +18 -0
- package/lib-commonjs/components/Table/index.js.map +1 -0
- package/lib-commonjs/components/Table/renderTable.js +30 -0
- package/lib-commonjs/components/Table/renderTable.js.map +1 -0
- package/lib-commonjs/components/Table/useTable.js +40 -0
- package/lib-commonjs/components/Table/useTable.js.map +1 -0
- package/lib-commonjs/components/Table/useTableContextValues.js +24 -0
- package/lib-commonjs/components/Table/useTableContextValues.js.map +1 -0
- package/lib-commonjs/components/Table/useTableStyles.js +37 -0
- package/lib-commonjs/components/Table/useTableStyles.js.map +1 -0
- package/lib-commonjs/components/TableBody/TableBody.js +26 -0
- package/lib-commonjs/components/TableBody/TableBody.js.map +1 -0
- package/lib-commonjs/components/TableBody/TableBody.types.js +6 -0
- package/lib-commonjs/components/TableBody/TableBody.types.js.map +1 -0
- package/lib-commonjs/components/TableBody/index.js +18 -0
- package/lib-commonjs/components/TableBody/index.js.map +1 -0
- package/lib-commonjs/components/TableBody/renderTableBody.js +27 -0
- package/lib-commonjs/components/TableBody/renderTableBody.js.map +1 -0
- package/lib-commonjs/components/TableBody/useTableBody.js +40 -0
- package/lib-commonjs/components/TableBody/useTableBody.js.map +1 -0
- package/lib-commonjs/components/TableBody/useTableBodyStyles.js +24 -0
- package/lib-commonjs/components/TableBody/useTableBodyStyles.js.map +1 -0
- package/lib-commonjs/components/TableCell/TableCell.js +26 -0
- package/lib-commonjs/components/TableCell/TableCell.js.map +1 -0
- package/lib-commonjs/components/TableCell/TableCell.types.js +6 -0
- package/lib-commonjs/components/TableCell/TableCell.types.js.map +1 -0
- package/lib-commonjs/components/TableCell/index.js +18 -0
- package/lib-commonjs/components/TableCell/index.js.map +1 -0
- package/lib-commonjs/components/TableCell/renderTableCell.js +28 -0
- package/lib-commonjs/components/TableCell/renderTableCell.js.map +1 -0
- package/lib-commonjs/components/TableCell/useTableCell.js +42 -0
- package/lib-commonjs/components/TableCell/useTableCell.js.map +1 -0
- package/lib-commonjs/components/TableCell/useTableCellStyles.js +59 -0
- package/lib-commonjs/components/TableCell/useTableCellStyles.js.map +1 -0
- package/lib-commonjs/components/TableHeader/TableHeader.js +26 -0
- package/lib-commonjs/components/TableHeader/TableHeader.js.map +1 -0
- package/lib-commonjs/components/TableHeader/TableHeader.types.js +6 -0
- package/lib-commonjs/components/TableHeader/TableHeader.types.js.map +1 -0
- package/lib-commonjs/components/TableHeader/index.js +18 -0
- package/lib-commonjs/components/TableHeader/index.js.map +1 -0
- package/lib-commonjs/components/TableHeader/renderTableHeader.js +26 -0
- package/lib-commonjs/components/TableHeader/renderTableHeader.js.map +1 -0
- package/lib-commonjs/components/TableHeader/useTableHeader.js +48 -0
- package/lib-commonjs/components/TableHeader/useTableHeader.js.map +1 -0
- package/lib-commonjs/components/TableHeader/useTableHeaderStyles.js +24 -0
- package/lib-commonjs/components/TableHeader/useTableHeaderStyles.js.map +1 -0
- package/lib-commonjs/components/TableHeaderCell/TableHeaderCell.js +26 -0
- package/lib-commonjs/components/TableHeaderCell/TableHeaderCell.js.map +1 -0
- package/lib-commonjs/components/TableHeaderCell/TableHeaderCell.types.js +6 -0
- package/lib-commonjs/components/TableHeaderCell/TableHeaderCell.types.js.map +1 -0
- package/lib-commonjs/components/TableHeaderCell/index.js +18 -0
- package/lib-commonjs/components/TableHeaderCell/index.js.map +1 -0
- package/lib-commonjs/components/TableHeaderCell/renderTableHeaderCell.js +28 -0
- package/lib-commonjs/components/TableHeaderCell/renderTableHeaderCell.js.map +1 -0
- package/lib-commonjs/components/TableHeaderCell/useTableHeaderCell.js +73 -0
- package/lib-commonjs/components/TableHeaderCell/useTableHeaderCell.js.map +1 -0
- package/lib-commonjs/components/TableHeaderCell/useTableHeaderCellStyles.js +91 -0
- package/lib-commonjs/components/TableHeaderCell/useTableHeaderCellStyles.js.map +1 -0
- package/lib-commonjs/components/TableRow/TableRow.js +26 -0
- package/lib-commonjs/components/TableRow/TableRow.js.map +1 -0
- package/lib-commonjs/components/TableRow/TableRow.types.js +6 -0
- package/lib-commonjs/components/TableRow/TableRow.types.js.map +1 -0
- package/lib-commonjs/components/TableRow/index.js +18 -0
- package/lib-commonjs/components/TableRow/index.js.map +1 -0
- package/lib-commonjs/components/TableRow/renderTableRow.js +27 -0
- package/lib-commonjs/components/TableRow/renderTableRow.js.map +1 -0
- package/lib-commonjs/components/TableRow/useTableRow.js +42 -0
- package/lib-commonjs/components/TableRow/useTableRow.js.map +1 -0
- package/lib-commonjs/components/TableRow/useTableRowStyles.js +58 -0
- package/lib-commonjs/components/TableRow/useTableRowStyles.js.map +1 -0
- package/lib-commonjs/contexts/tableContext.js +21 -0
- package/lib-commonjs/contexts/tableContext.js.map +1 -0
- package/lib-commonjs/index.js +256 -0
- package/lib-commonjs/index.js.map +1 -0
- package/package.json +56 -0
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.TableHeaderCell = void 0;
|
|
7
|
+
|
|
8
|
+
const React = /*#__PURE__*/require("react");
|
|
9
|
+
|
|
10
|
+
const useTableHeaderCell_1 = /*#__PURE__*/require("./useTableHeaderCell");
|
|
11
|
+
|
|
12
|
+
const renderTableHeaderCell_1 = /*#__PURE__*/require("./renderTableHeaderCell");
|
|
13
|
+
|
|
14
|
+
const useTableHeaderCellStyles_1 = /*#__PURE__*/require("./useTableHeaderCellStyles");
|
|
15
|
+
/**
|
|
16
|
+
* TableHeaderCell component - TODO: add more docs
|
|
17
|
+
*/
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
exports.TableHeaderCell = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
21
|
+
const state = useTableHeaderCell_1.useTableHeaderCell_unstable(props, ref);
|
|
22
|
+
useTableHeaderCellStyles_1.useTableHeaderCellStyles_unstable(state);
|
|
23
|
+
return renderTableHeaderCell_1.renderTableHeaderCell_unstable(state);
|
|
24
|
+
});
|
|
25
|
+
exports.TableHeaderCell.displayName = 'TableHeaderCell';
|
|
26
|
+
//# sourceMappingURL=TableHeaderCell.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["components/TableHeaderCell/TableHeaderCell.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,oBAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,0BAAA,gBAAA,OAAA,CAAA,4BAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,eAAA,gBAA6D,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACxG,MAAM,KAAK,GAAG,oBAAA,CAAA,2BAAA,CAA4B,KAA5B,EAAmC,GAAnC,CAAd;EAEA,0BAAA,CAAA,iCAAA,CAAkC,KAAlC;EACA,OAAO,uBAAA,CAAA,8BAAA,CAA+B,KAA/B,CAAP;AACD,CALyE,CAA7D;AAOb,OAAA,CAAA,eAAA,CAAgB,WAAhB,GAA8B,iBAA9B","sourcesContent":["import * as React from 'react';\nimport { useTableHeaderCell_unstable } from './useTableHeaderCell';\nimport { renderTableHeaderCell_unstable } from './renderTableHeaderCell';\nimport { useTableHeaderCellStyles_unstable } from './useTableHeaderCellStyles';\nimport type { TableHeaderCellProps } from './TableHeaderCell.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * TableHeaderCell component - TODO: add more docs\n */\nexport const TableHeaderCell: ForwardRefComponent<TableHeaderCellProps> = React.forwardRef((props, ref) => {\n const state = useTableHeaderCell_unstable(props, ref);\n\n useTableHeaderCellStyles_unstable(state);\n return renderTableHeaderCell_unstable(state);\n});\n\nTableHeaderCell.displayName = 'TableHeaderCell';\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
|
|
7
|
+
const tslib_1 = /*#__PURE__*/require("tslib");
|
|
8
|
+
|
|
9
|
+
tslib_1.__exportStar(require("./TableHeaderCell"), exports);
|
|
10
|
+
|
|
11
|
+
tslib_1.__exportStar(require("./TableHeaderCell.types"), exports);
|
|
12
|
+
|
|
13
|
+
tslib_1.__exportStar(require("./renderTableHeaderCell"), exports);
|
|
14
|
+
|
|
15
|
+
tslib_1.__exportStar(require("./useTableHeaderCell"), exports);
|
|
16
|
+
|
|
17
|
+
tslib_1.__exportStar(require("./useTableHeaderCellStyles"), exports);
|
|
18
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["components/TableHeaderCell/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,yBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,yBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,sBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,4BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './TableHeaderCell';\nexport * from './TableHeaderCell.types';\nexport * from './renderTableHeaderCell';\nexport * from './useTableHeaderCell';\nexport * from './useTableHeaderCellStyles';\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.renderTableHeaderCell_unstable = void 0;
|
|
7
|
+
|
|
8
|
+
const React = /*#__PURE__*/require("react");
|
|
9
|
+
|
|
10
|
+
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
11
|
+
/**
|
|
12
|
+
* Render the final JSX of TableHeaderCell
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
const renderTableHeaderCell_unstable = state => {
|
|
17
|
+
const {
|
|
18
|
+
slots,
|
|
19
|
+
slotProps
|
|
20
|
+
} = react_utilities_1.getSlots(state);
|
|
21
|
+
return React.createElement(slots.root, { ...slotProps.root
|
|
22
|
+
}, React.createElement(slots.button, { ...slotProps.button
|
|
23
|
+
}, slotProps.root.children, slots.sortIcon && React.createElement(slots.sortIcon, { ...slotProps.sortIcon
|
|
24
|
+
})));
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
exports.renderTableHeaderCell_unstable = renderTableHeaderCell_unstable;
|
|
28
|
+
//# sourceMappingURL=renderTableHeaderCell.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["components/TableHeaderCell/renderTableHeaderCell.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,8BAA8B,GAAI,KAAD,IAAgC;EAC5E,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAA+B,KAA/B,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,EACG,SAAS,CAAC,IAAV,CAAe,QADlB,EAEG,KAAK,CAAC,QAAN,IAAkB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,EAAA,GAAK,SAAS,CAAC;EAAf,CAAf,CAFrB,CADF,CADF;AAQD,CAXM;;AAAM,OAAA,CAAA,8BAAA,GAA8B,8BAA9B","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TableHeaderCellState, TableHeaderCellSlots } from './TableHeaderCell.types';\n\n/**\n * Render the final JSX of TableHeaderCell\n */\nexport const renderTableHeaderCell_unstable = (state: TableHeaderCellState) => {\n const { slots, slotProps } = getSlots<TableHeaderCellSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n <slots.button {...slotProps.button}>\n {slotProps.root.children}\n {slots.sortIcon && <slots.sortIcon {...slotProps.sortIcon} />}\n </slots.button>\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.useTableHeaderCell_unstable = void 0;
|
|
7
|
+
|
|
8
|
+
const React = /*#__PURE__*/require("react");
|
|
9
|
+
|
|
10
|
+
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
11
|
+
|
|
12
|
+
const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
|
|
13
|
+
|
|
14
|
+
const tableContext_1 = /*#__PURE__*/require("../../contexts/tableContext");
|
|
15
|
+
|
|
16
|
+
const react_aria_1 = /*#__PURE__*/require("@fluentui/react-aria");
|
|
17
|
+
|
|
18
|
+
const sortIcons = {
|
|
19
|
+
ascending: /*#__PURE__*/React.createElement(react_icons_1.ArrowUpRegular, null),
|
|
20
|
+
descending: /*#__PURE__*/React.createElement(react_icons_1.ArrowDownRegular, null)
|
|
21
|
+
};
|
|
22
|
+
/**
|
|
23
|
+
* Create the state required to render TableHeaderCell.
|
|
24
|
+
*
|
|
25
|
+
* The returned state can be modified with hooks such as useTableHeaderCellStyles_unstable,
|
|
26
|
+
* before being passed to renderTableHeaderCell_unstable.
|
|
27
|
+
*
|
|
28
|
+
* @param props - props from this instance of TableHeaderCell
|
|
29
|
+
* @param ref - reference to root HTMLElement of TableHeaderCell
|
|
30
|
+
*/
|
|
31
|
+
|
|
32
|
+
const useTableHeaderCell_unstable = (props, ref) => {
|
|
33
|
+
var _a;
|
|
34
|
+
|
|
35
|
+
const noNativeElements = tableContext_1.useTableContext(ctx => ctx.noNativeElements);
|
|
36
|
+
const sortable = tableContext_1.useTableContext(ctx => ctx.sortable);
|
|
37
|
+
const rootComponent = ((_a = props.as) !== null && _a !== void 0 ? _a : noNativeElements) ? 'div' : 'th';
|
|
38
|
+
return {
|
|
39
|
+
components: {
|
|
40
|
+
root: rootComponent,
|
|
41
|
+
button: 'button',
|
|
42
|
+
sortIcon: 'span'
|
|
43
|
+
},
|
|
44
|
+
root: react_utilities_1.getNativeElementProps(rootComponent, {
|
|
45
|
+
ref,
|
|
46
|
+
role: rootComponent === 'div' ? 'columnheader' : undefined,
|
|
47
|
+
'aria-sort': props.sortDirection,
|
|
48
|
+
...props
|
|
49
|
+
}),
|
|
50
|
+
sortIcon: react_utilities_1.resolveShorthand(props.sortIcon, {
|
|
51
|
+
required: !!props.sortDirection,
|
|
52
|
+
defaultProps: {
|
|
53
|
+
children: props.sortDirection ? sortIcons[props.sortDirection] : undefined
|
|
54
|
+
}
|
|
55
|
+
}),
|
|
56
|
+
button: react_aria_1.useARIAButtonShorthand(props.button, {
|
|
57
|
+
required: true,
|
|
58
|
+
defaultProps: {
|
|
59
|
+
role: 'presentation',
|
|
60
|
+
tabIndex: -1,
|
|
61
|
+
type: 'button',
|
|
62
|
+
...(sortable && {
|
|
63
|
+
role: undefined,
|
|
64
|
+
tabIndex: undefined
|
|
65
|
+
})
|
|
66
|
+
}
|
|
67
|
+
}),
|
|
68
|
+
sortable
|
|
69
|
+
};
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
exports.useTableHeaderCell_unstable = useTableHeaderCell_unstable;
|
|
73
|
+
//# sourceMappingURL=useTableHeaderCell.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["components/TableHeaderCell/useTableHeaderCell.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAEA,MAAA,cAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;;AAEA,MAAM,SAAS,GAAG;EAChB,SAAS,eAAE,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,cAAD,EAAe,IAAf,CADK;EAEhB,UAAU,eAAE,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,gBAAD,EAAiB,IAAjB;AAFI,CAAlB;AAKA;;;;;;;;AAQG;;AACI,MAAM,2BAA2B,GAAG,CACzC,KADyC,EAEzC,GAFyC,KAGjB;;;EACxB,MAAM,gBAAgB,GAAG,cAAA,CAAA,eAAA,CAAgB,GAAG,IAAI,GAAG,CAAC,gBAA3B,CAAzB;EACA,MAAM,QAAQ,GAAG,cAAA,CAAA,eAAA,CAAgB,GAAG,IAAI,GAAG,CAAC,QAA3B,CAAjB;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,iBAAA,CAAA,qBAAA,CAAsB,aAAtB,EAAqC;MACzC,GADyC;MAEzC,IAAI,EAAE,aAAa,KAAK,KAAlB,GAA0B,cAA1B,GAA2C,SAFR;MAGzC,aAAa,KAAK,CAAC,aAHsB;MAIzC,GAAG;IAJsC,CAArC,CAND;IAYL,QAAQ,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,QAAvB,EAAiC;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,CAAjC,CAZL;IAgBL,MAAM,EAAE,YAAA,CAAA,sBAAA,CAAuB,KAAK,CAAC,MAA7B,EAAqC;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,CAArC,CAhBH;IA4BL;EA5BK,CAAP;AA8BD,CAtCM;;AAAM,OAAA,CAAA,2BAAA,GAA2B,2BAA3B","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 = useTableContext(ctx => ctx.noNativeElements);\n const sortable = useTableContext(ctx => ctx.sortable);\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/"}
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.useTableHeaderCellStyles_unstable = exports.tableHeaderCellClassNames = exports.tableHeaderCellClassName = void 0;
|
|
7
|
+
|
|
8
|
+
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
9
|
+
|
|
10
|
+
const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
|
|
11
|
+
|
|
12
|
+
exports.tableHeaderCellClassName = 'fui-TableHeaderCell';
|
|
13
|
+
exports.tableHeaderCellClassNames = {
|
|
14
|
+
root: 'fui-TableHeaderCell',
|
|
15
|
+
button: 'fui-TableHeaderCell__button',
|
|
16
|
+
sortIcon: 'fui-TableHeaderCell__sortIcon'
|
|
17
|
+
};
|
|
18
|
+
/**
|
|
19
|
+
* Styles for the root slot
|
|
20
|
+
*/
|
|
21
|
+
|
|
22
|
+
const useStyles = /*#__PURE__*/react_1.__styles({
|
|
23
|
+
"root": {
|
|
24
|
+
"sshi5w": "f5pgtk9",
|
|
25
|
+
"z8tnut": "f1nbblvp",
|
|
26
|
+
"z189sj": ["f1vdfbxk", "f1f5gg8d"],
|
|
27
|
+
"Byoj8tv": "f1ov4xf1",
|
|
28
|
+
"uwmqm3": ["f1f5gg8d", "f1vdfbxk"],
|
|
29
|
+
"mc9l5x": "f22iagw",
|
|
30
|
+
"Bt984gj": "f122n59",
|
|
31
|
+
"Bh6795r": "fqerorx",
|
|
32
|
+
"Bnnss6s": "f1neuvcm",
|
|
33
|
+
"xawz": "fkjuxzh"
|
|
34
|
+
},
|
|
35
|
+
"resetButton": {
|
|
36
|
+
"B7ck84d": "f1e4lqlz",
|
|
37
|
+
"De3pzq": "f1u2r49w",
|
|
38
|
+
"sj55zd": "f1ym3bx4",
|
|
39
|
+
"Bahqtrf": "f1mo0ibp",
|
|
40
|
+
"Be2twd7": "fjoy568",
|
|
41
|
+
"Bg96gwp": "fytdu2e",
|
|
42
|
+
"B68tc82": "f1mtd64y",
|
|
43
|
+
"Bmxbyg5": "f1y7q3j9",
|
|
44
|
+
"z8tnut": "f1g0x7ka",
|
|
45
|
+
"z189sj": ["fhxju0i", "f1cnd47f"],
|
|
46
|
+
"Byoj8tv": "f1qch9an",
|
|
47
|
+
"uwmqm3": ["f1cnd47f", "fhxju0i"],
|
|
48
|
+
"icvyot": "f1ern45e",
|
|
49
|
+
"vrafjx": ["f1n71otn", "f1deefiw"],
|
|
50
|
+
"oivjwe": "f1h8hb77",
|
|
51
|
+
"wvpqe5": ["f1deefiw", "f1n71otn"],
|
|
52
|
+
"Bv0vk6g": "f37px4s",
|
|
53
|
+
"fsow6f": "fgusgyc"
|
|
54
|
+
},
|
|
55
|
+
"button": {
|
|
56
|
+
"mc9l5x": "f22iagw",
|
|
57
|
+
"Bh6795r": "fqerorx",
|
|
58
|
+
"Bqenvij": "f1l02sjl",
|
|
59
|
+
"Bt984gj": "f122n59",
|
|
60
|
+
"i8kkvl": "fsnqrgy",
|
|
61
|
+
"Belr9w4": "fylz90v"
|
|
62
|
+
},
|
|
63
|
+
"sortable": {
|
|
64
|
+
"Bceei9c": "f1k6fduh"
|
|
65
|
+
},
|
|
66
|
+
"sortIcon": {
|
|
67
|
+
"mc9l5x": "f22iagw",
|
|
68
|
+
"Bt984gj": "f122n59"
|
|
69
|
+
}
|
|
70
|
+
}, {
|
|
71
|
+
"d": [".f5pgtk9{min-height:44px;}", ".f1nbblvp{padding-top:0px;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1ov4xf1{padding-bottom:0px;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".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;}", ".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;}", ".f1l02sjl{height:100%;}", ".fsnqrgy{-webkit-column-gap:var(--spacingHorizontalS);column-gap:var(--spacingHorizontalS);}", ".fylz90v{row-gap:var(--spacingHorizontalS);}", ".f1k6fduh{cursor:pointer;}"]
|
|
72
|
+
});
|
|
73
|
+
/**
|
|
74
|
+
* Apply styling to the TableHeaderCell slots based on the state
|
|
75
|
+
*/
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
const useTableHeaderCellStyles_unstable = state => {
|
|
79
|
+
const styles = useStyles();
|
|
80
|
+
state.root.className = react_1.mergeClasses(exports.tableHeaderCellClassNames.root, styles.root, state.root.className);
|
|
81
|
+
state.button.className = react_1.mergeClasses(exports.tableHeaderCellClassNames.button, styles.resetButton, styles.button, state.sortable && styles.sortable, state.button.className);
|
|
82
|
+
|
|
83
|
+
if (state.sortIcon) {
|
|
84
|
+
state.sortIcon.className = react_1.mergeClasses(exports.tableHeaderCellClassNames.sortIcon, styles.sortIcon, state.sortIcon.className);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
return state;
|
|
88
|
+
};
|
|
89
|
+
|
|
90
|
+
exports.useTableHeaderCellStyles_unstable = useTableHeaderCellStyles_unstable;
|
|
91
|
+
//# sourceMappingURL=useTableHeaderCellStyles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["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;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;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;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAuCA;;AAEG;;;AACI,MAAM,iCAAiC,GAAI,KAAD,IAAsD;EACrG,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,yBAAA,CAA0B,IAAvC,EAA6C,MAAM,CAAC,IAApD,EAA0D,KAAK,CAAC,IAAN,CAAW,SAArE,CAAvB;EACA,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,CApBM;;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\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n minHeight: '44px',\n ...shorthands.padding('0px', tokens.spacingHorizontalS),\n display: 'flex',\n alignItems: 'center',\n ...shorthands.flex(1, 1, '0px'),\n },\n\n resetButton: {\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 display: 'flex',\n flexGrow: 1,\n height: '100%',\n alignItems: 'center',\n ...shorthands.gap(tokens.spacingHorizontalS),\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/"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.TableRow = void 0;
|
|
7
|
+
|
|
8
|
+
const React = /*#__PURE__*/require("react");
|
|
9
|
+
|
|
10
|
+
const useTableRow_1 = /*#__PURE__*/require("./useTableRow");
|
|
11
|
+
|
|
12
|
+
const renderTableRow_1 = /*#__PURE__*/require("./renderTableRow");
|
|
13
|
+
|
|
14
|
+
const useTableRowStyles_1 = /*#__PURE__*/require("./useTableRowStyles");
|
|
15
|
+
/**
|
|
16
|
+
* TableRow component - TODO: add more docs
|
|
17
|
+
*/
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
exports.TableRow = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
21
|
+
const state = useTableRow_1.useTableRow_unstable(props, ref);
|
|
22
|
+
useTableRowStyles_1.useTableRowStyles_unstable(state);
|
|
23
|
+
return renderTableRow_1.renderTableRow_unstable(state);
|
|
24
|
+
});
|
|
25
|
+
exports.TableRow.displayName = 'TableRow';
|
|
26
|
+
//# sourceMappingURL=TableRow.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["components/TableRow/TableRow.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,QAAA,gBAA+C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC1F,MAAM,KAAK,GAAG,aAAA,CAAA,oBAAA,CAAqB,KAArB,EAA4B,GAA5B,CAAd;EAEA,mBAAA,CAAA,0BAAA,CAA2B,KAA3B;EACA,OAAO,gBAAA,CAAA,uBAAA,CAAwB,KAAxB,CAAP;AACD,CAL2D,CAA/C;AAOb,OAAA,CAAA,QAAA,CAAS,WAAT,GAAuB,UAAvB","sourcesContent":["import * as React from 'react';\nimport { useTableRow_unstable } from './useTableRow';\nimport { renderTableRow_unstable } from './renderTableRow';\nimport { useTableRowStyles_unstable } from './useTableRowStyles';\nimport type { TableRowProps } from './TableRow.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * TableRow component - TODO: add more docs\n */\nexport const TableRow: ForwardRefComponent<TableRowProps> = React.forwardRef((props, ref) => {\n const state = useTableRow_unstable(props, ref);\n\n useTableRowStyles_unstable(state);\n return renderTableRow_unstable(state);\n});\n\nTableRow.displayName = 'TableRow';\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
|
|
7
|
+
const tslib_1 = /*#__PURE__*/require("tslib");
|
|
8
|
+
|
|
9
|
+
tslib_1.__exportStar(require("./TableRow"), exports);
|
|
10
|
+
|
|
11
|
+
tslib_1.__exportStar(require("./TableRow.types"), exports);
|
|
12
|
+
|
|
13
|
+
tslib_1.__exportStar(require("./renderTableRow"), exports);
|
|
14
|
+
|
|
15
|
+
tslib_1.__exportStar(require("./useTableRow"), exports);
|
|
16
|
+
|
|
17
|
+
tslib_1.__exportStar(require("./useTableRowStyles"), exports);
|
|
18
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["components/TableRow/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './TableRow';\nexport * from './TableRow.types';\nexport * from './renderTableRow';\nexport * from './useTableRow';\nexport * from './useTableRowStyles';\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.renderTableRow_unstable = void 0;
|
|
7
|
+
|
|
8
|
+
const React = /*#__PURE__*/require("react");
|
|
9
|
+
|
|
10
|
+
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
11
|
+
/**
|
|
12
|
+
* Render the final JSX of TableRow
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
const renderTableRow_unstable = state => {
|
|
17
|
+
const {
|
|
18
|
+
slots,
|
|
19
|
+
slotProps
|
|
20
|
+
} = react_utilities_1.getSlots(state); // TODO Add additional slots in the appropriate place
|
|
21
|
+
|
|
22
|
+
return React.createElement(slots.root, { ...slotProps.root
|
|
23
|
+
});
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
exports.renderTableRow_unstable = renderTableRow_unstable;
|
|
27
|
+
//# sourceMappingURL=renderTableRow.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["components/TableRow/renderTableRow.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,uBAAuB,GAAI,KAAD,IAAyB;EAC9D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAwB,KAAxB,CAA7B,CAD8D,CAG9D;;EACA,OAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAAP;AACD,CALM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TableRowState, TableRowSlots } from './TableRow.types';\n\n/**\n * Render the final JSX of TableRow\n */\nexport const renderTableRow_unstable = (state: TableRowState) => {\n const { slots, slotProps } = getSlots<TableRowSlots>(state);\n\n // TODO Add additional slots in the appropriate place\n return <slots.root {...slotProps.root} />;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.useTableRow_unstable = void 0;
|
|
7
|
+
|
|
8
|
+
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
9
|
+
|
|
10
|
+
const tableContext_1 = /*#__PURE__*/require("../../contexts/tableContext");
|
|
11
|
+
/**
|
|
12
|
+
* Create the state required to render TableRow.
|
|
13
|
+
*
|
|
14
|
+
* The returned state can be modified with hooks such as useTableRowStyles_unstable,
|
|
15
|
+
* before being passed to renderTableRow_unstable.
|
|
16
|
+
*
|
|
17
|
+
* @param props - props from this instance of TableRow
|
|
18
|
+
* @param ref - reference to root HTMLElement of TableRow
|
|
19
|
+
*/
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
const useTableRow_unstable = (props, ref) => {
|
|
23
|
+
var _a;
|
|
24
|
+
|
|
25
|
+
const noNativeElements = tableContext_1.useTableContext(ctx => ctx.noNativeElements);
|
|
26
|
+
const size = tableContext_1.useTableContext(ctx => ctx.size);
|
|
27
|
+
const rootComponent = ((_a = props.as) !== null && _a !== void 0 ? _a : noNativeElements) ? 'div' : 'tr';
|
|
28
|
+
return {
|
|
29
|
+
components: {
|
|
30
|
+
root: rootComponent
|
|
31
|
+
},
|
|
32
|
+
root: react_utilities_1.getNativeElementProps(rootComponent, {
|
|
33
|
+
ref,
|
|
34
|
+
role: rootComponent === 'div' ? 'row' : undefined,
|
|
35
|
+
...props
|
|
36
|
+
}),
|
|
37
|
+
size
|
|
38
|
+
};
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
exports.useTableRow_unstable = useTableRow_unstable;
|
|
42
|
+
//# sourceMappingURL=useTableRow.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["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,gBAAgB,GAAG,cAAA,CAAA,eAAA,CAAgB,GAAG,IAAI,GAAG,CAAC,gBAA3B,CAAzB;EACA,MAAM,IAAI,GAAG,cAAA,CAAA,eAAA,CAAgB,GAAG,IAAI,GAAG,CAAC,IAA3B,CAAb;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,GADyC;MAEzC,IAAI,EAAE,aAAa,KAAK,KAAlB,GAA0B,KAA1B,GAAkC,SAFC;MAGzC,GAAG;IAHsC,CAArC,CAJD;IASL;EATK,CAAP;AAWD,CAhBM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","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 = useTableContext(ctx => ctx.noNativeElements);\n const size = useTableContext(ctx => ctx.size);\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/"}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.useTableRowStyles_unstable = exports.tableRowClassNames = exports.tableRowClassName = void 0;
|
|
7
|
+
|
|
8
|
+
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
9
|
+
|
|
10
|
+
const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
|
|
11
|
+
|
|
12
|
+
exports.tableRowClassName = 'fui-TableRow';
|
|
13
|
+
exports.tableRowClassNames = {
|
|
14
|
+
root: exports.tableRowClassName
|
|
15
|
+
};
|
|
16
|
+
/**
|
|
17
|
+
* Styles for the root slot
|
|
18
|
+
*/
|
|
19
|
+
|
|
20
|
+
const useStyles = /*#__PURE__*/react_1.__styles({
|
|
21
|
+
"root": {
|
|
22
|
+
"mc9l5x": "f22iagw",
|
|
23
|
+
"sj55zd": "f19n0e5",
|
|
24
|
+
"Jwef8y": "f1knas48"
|
|
25
|
+
},
|
|
26
|
+
"medium": {
|
|
27
|
+
"sshi5w": "f5pgtk9",
|
|
28
|
+
"Bn0qgzm": "f1vxd6vx",
|
|
29
|
+
"oivjwe": "fg706s2",
|
|
30
|
+
"B9xav0g": "frpde29"
|
|
31
|
+
},
|
|
32
|
+
"small": {
|
|
33
|
+
"sshi5w": "fcep9tg",
|
|
34
|
+
"Bn0qgzm": "f1vxd6vx",
|
|
35
|
+
"oivjwe": "fg706s2",
|
|
36
|
+
"B9xav0g": "frpde29"
|
|
37
|
+
},
|
|
38
|
+
"smaller": {
|
|
39
|
+
"sshi5w": "f1pha7fy",
|
|
40
|
+
"Be2twd7": "fy9rknc"
|
|
41
|
+
}
|
|
42
|
+
}, {
|
|
43
|
+
"d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f5pgtk9{min-height:44px;}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fg706s2{border-bottom-style:solid;}", ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}", ".fcep9tg{min-height:34px;}", ".f1pha7fy{min-height:24px;}", ".fy9rknc{font-size:var(--fontSizeBase200);}"],
|
|
44
|
+
"h": [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}"]
|
|
45
|
+
});
|
|
46
|
+
/**
|
|
47
|
+
* Apply styling to the TableRow slots based on the state
|
|
48
|
+
*/
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
const useTableRowStyles_unstable = state => {
|
|
52
|
+
const styles = useStyles();
|
|
53
|
+
state.root.className = react_1.mergeClasses(exports.tableRowClassNames.root, styles.root, styles[state.size], state.root.className);
|
|
54
|
+
return state;
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
exports.useTableRowStyles_unstable = useTableRowStyles_unstable;
|
|
58
|
+
//# sourceMappingURL=useTableRowStyles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["components/TableRow/useTableRowStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAIa,OAAA,CAAA,iBAAA,GAAoB,cAApB;AACA,OAAA,CAAA,kBAAA,GAAoD;EAC/D,IAAI,EAAE,OAAA,CAAA;AADyD,CAApD;AAIb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;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;AAyBA;;AAEG;;;AACI,MAAM,0BAA0B,GAAI,KAAD,IAAwC;EAChF,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,kBAAA,CAAmB,IAAhC,EAAsC,MAAM,CAAC,IAA7C,EAAmD,MAAM,CAAC,KAAK,CAAC,IAAP,CAAzD,EAAuE,KAAK,CAAC,IAAN,CAAW,SAAlF,CAAvB;EAEA,OAAO,KAAP;AACD,CALM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","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';\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: 'flex',\n color: tokens.colorNeutralForeground1,\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n },\n },\n\n medium: {\n minHeight: '44px',\n ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n },\n\n small: {\n minHeight: '34px',\n ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n },\n\n smaller: {\n minHeight: '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,21 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.useTableContext = exports.TableContextProvider = exports.tableContextDefaultValue = void 0;
|
|
7
|
+
|
|
8
|
+
const react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-selector");
|
|
9
|
+
|
|
10
|
+
const tableContext = /*#__PURE__*/react_context_selector_1.createContext(undefined);
|
|
11
|
+
exports.tableContextDefaultValue = {
|
|
12
|
+
size: 'medium',
|
|
13
|
+
noNativeElements: false,
|
|
14
|
+
sortable: false
|
|
15
|
+
};
|
|
16
|
+
exports.TableContextProvider = tableContext.Provider;
|
|
17
|
+
|
|
18
|
+
const useTableContext = selector => react_context_selector_1.useContextSelector(tableContext, (ctx = exports.tableContextDefaultValue) => selector(ctx));
|
|
19
|
+
|
|
20
|
+
exports.useTableContext = useTableContext;
|
|
21
|
+
//# sourceMappingURL=tableContext.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["contexts/tableContext.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AAGA,MAAM,YAAY,gBAAG,wBAAA,CAAA,aAAA,CAA6C,SAA7C,CAArB;AAEa,OAAA,CAAA,wBAAA,GAA8C;EACzD,IAAI,EAAE,QADmD;EAEzD,gBAAgB,EAAE,KAFuC;EAGzD,QAAQ,EAAE;AAH+C,CAA9C;AAMA,OAAA,CAAA,oBAAA,GAAuB,YAAY,CAAC,QAApC;;AACN,MAAM,eAAe,GAAO,QAAJ,IAC7B,wBAAA,CAAA,kBAAA,CAAmB,YAAnB,EAAiC,CAAC,GAAG,GAAG,OAAA,CAAA,wBAAP,KAAoC,QAAQ,CAAC,GAAD,CAA7E,CADK;;AAAM,OAAA,CAAA,eAAA,GAAe,eAAf","sourcesContent":["import { createContext, useContextSelector, ContextSelector } from '@fluentui/react-context-selector';\nimport { TableContextValue } from '../components/Table/Table.types';\n\nconst tableContext = 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 = <T>(selector: ContextSelector<TableContextValue, T>) =>\n useContextSelector(tableContext, (ctx = tableContextDefaultValue) => selector(ctx));\n"],"sourceRoot":"../src/"}
|