@veeqo/ui 9.9.3 → 9.9.5
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/dist/_virtual/____insertStyle.cjs +14 -0
- package/dist/_virtual/____insertStyle.cjs.map +1 -0
- package/dist/_virtual/____insertStyle.js +12 -0
- package/dist/_virtual/____insertStyle.js.map +1 -0
- package/dist/components/DataGrid/DataGrid.module.scss.cjs +9 -0
- package/dist/components/DataGrid/DataGrid.module.scss.cjs.map +1 -0
- package/dist/components/DataGrid/DataGrid.module.scss.js +7 -0
- package/dist/components/DataGrid/DataGrid.module.scss.js.map +1 -0
- package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.cjs +6 -2
- package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.cjs.map +1 -1
- package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.js +6 -2
- package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.js.map +1 -1
- package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.module.scss.cjs +9 -0
- package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.module.scss.cjs.map +1 -0
- package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.module.scss.js +7 -0
- package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.module.scss.js.map +1 -0
- package/dist/components/DataGrid/components/CellContent/CellContent.cjs +1 -1
- package/dist/components/DataGrid/components/CellContent/CellContent.cjs.map +1 -1
- package/dist/components/DataGrid/components/CellContent/CellContent.js +2 -2
- package/dist/components/DataGrid/components/CellContent/CellContent.js.map +1 -1
- package/dist/components/DataGrid/components/CellContent/CellContent.module.scss.cjs +9 -0
- package/dist/components/DataGrid/components/CellContent/CellContent.module.scss.cjs.map +1 -0
- package/dist/components/DataGrid/components/CellContent/CellContent.module.scss.js +7 -0
- package/dist/components/DataGrid/components/CellContent/CellContent.module.scss.js.map +1 -0
- package/dist/components/DataGrid/components/Footer/FooterCell/FooterCell.cjs +1 -1
- package/dist/components/DataGrid/components/Footer/FooterCell/FooterCell.cjs.map +1 -1
- package/dist/components/DataGrid/components/Footer/FooterCell/FooterCell.js +2 -2
- package/dist/components/DataGrid/components/Footer/FooterCell/FooterCell.js.map +1 -1
- package/dist/components/DataGrid/components/Footer/FooterCell/FooterCell.module.scss.cjs +9 -0
- package/dist/components/DataGrid/components/Footer/FooterCell/FooterCell.module.scss.cjs.map +1 -0
- package/dist/components/DataGrid/components/Footer/FooterCell/FooterCell.module.scss.js +7 -0
- package/dist/components/DataGrid/components/Footer/FooterCell/FooterCell.module.scss.js.map +1 -0
- package/dist/components/DataGrid/components/GridContainer/Container/Container.cjs +1 -1
- package/dist/components/DataGrid/components/GridContainer/Container/Container.cjs.map +1 -1
- package/dist/components/DataGrid/components/GridContainer/Container/Container.js +5 -5
- package/dist/components/DataGrid/components/GridContainer/Container/Container.js.map +1 -1
- package/dist/components/DataGrid/components/GridContainer/Container/Container.module.scss.cjs +9 -0
- package/dist/components/DataGrid/components/GridContainer/Container/Container.module.scss.cjs.map +1 -0
- package/dist/components/DataGrid/components/GridContainer/Container/Container.module.scss.js +7 -0
- package/dist/components/DataGrid/components/GridContainer/Container/Container.module.scss.js.map +1 -0
- package/dist/components/DataGrid/components/GridContainer/GridContainer.cjs +1 -1
- package/dist/components/DataGrid/components/GridContainer/GridContainer.cjs.map +1 -1
- package/dist/components/DataGrid/components/GridContainer/GridContainer.js +2 -2
- package/dist/components/DataGrid/components/GridContainer/GridContainer.js.map +1 -1
- package/dist/components/DataGrid/components/GridContainer/GridContainer.module.scss.cjs +9 -0
- package/dist/components/DataGrid/components/GridContainer/GridContainer.module.scss.cjs.map +1 -0
- package/dist/components/DataGrid/components/GridContainer/GridContainer.module.scss.js +7 -0
- package/dist/components/DataGrid/components/GridContainer/GridContainer.module.scss.js.map +1 -0
- package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.cjs +1 -1
- package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.cjs.map +1 -1
- package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.js +4 -4
- package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.js.map +1 -1
- package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.module.scss.cjs +9 -0
- package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.module.scss.cjs.map +1 -0
- package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.module.scss.js +7 -0
- package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.module.scss.js.map +1 -0
- package/dist/components/DataGrid/components/Header/HeaderCell/SortIcon/SortIcon.cjs +1 -1
- package/dist/components/DataGrid/components/Header/HeaderCell/SortIcon/SortIcon.cjs.map +1 -1
- package/dist/components/DataGrid/components/Header/HeaderCell/SortIcon/SortIcon.js +2 -2
- package/dist/components/DataGrid/components/Header/HeaderCell/SortIcon/SortIcon.js.map +1 -1
- package/dist/components/DataGrid/components/Header/Resizer/Resizer.cjs +1 -1
- package/dist/components/DataGrid/components/Header/Resizer/Resizer.cjs.map +1 -1
- package/dist/components/DataGrid/components/Header/Resizer/Resizer.js +2 -2
- package/dist/components/DataGrid/components/Header/Resizer/Resizer.js.map +1 -1
- package/dist/components/DataGrid/components/Header/Resizer/Resizer.module.scss.cjs +9 -0
- package/dist/components/DataGrid/components/Header/Resizer/Resizer.module.scss.cjs.map +1 -0
- package/dist/components/DataGrid/components/Header/Resizer/Resizer.module.scss.js +7 -0
- package/dist/components/DataGrid/components/Header/Resizer/Resizer.module.scss.js.map +1 -0
- package/dist/components/DataGrid/utils/pinnedColumnUtils.cjs +1 -1
- package/dist/components/DataGrid/utils/pinnedColumnUtils.cjs.map +1 -1
- package/dist/components/DataGrid/utils/pinnedColumnUtils.js +3 -3
- package/dist/components/DataGrid/utils/pinnedColumnUtils.js.map +1 -1
- package/package.json +2 -1
- package/dist/components/DataGrid/DataGrid.module.css.cjs +0 -13
- package/dist/components/DataGrid/DataGrid.module.css.cjs.map +0 -1
- package/dist/components/DataGrid/DataGrid.module.css.js +0 -10
- package/dist/components/DataGrid/DataGrid.module.css.js.map +0 -1
- package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.module.css.cjs +0 -11
- package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.module.css.cjs.map +0 -1
- package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.module.css.js +0 -9
- package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.module.css.js.map +0 -1
- package/dist/components/DataGrid/components/CellContent/CellContent.module.css.cjs +0 -11
- package/dist/components/DataGrid/components/CellContent/CellContent.module.css.cjs.map +0 -1
- package/dist/components/DataGrid/components/CellContent/CellContent.module.css.js +0 -9
- package/dist/components/DataGrid/components/CellContent/CellContent.module.css.js.map +0 -1
- package/dist/components/DataGrid/components/Footer/FooterCell/FooterCell.module.css.cjs +0 -11
- package/dist/components/DataGrid/components/Footer/FooterCell/FooterCell.module.css.cjs.map +0 -1
- package/dist/components/DataGrid/components/Footer/FooterCell/FooterCell.module.css.js +0 -9
- package/dist/components/DataGrid/components/Footer/FooterCell/FooterCell.module.css.js.map +0 -1
- package/dist/components/DataGrid/components/GridContainer/Container/Container.module.css.cjs +0 -17
- package/dist/components/DataGrid/components/GridContainer/Container/Container.module.css.cjs.map +0 -1
- package/dist/components/DataGrid/components/GridContainer/Container/Container.module.css.js +0 -12
- package/dist/components/DataGrid/components/GridContainer/Container/Container.module.css.js.map +0 -1
- package/dist/components/DataGrid/components/GridContainer/GridContainer.module.css.cjs +0 -11
- package/dist/components/DataGrid/components/GridContainer/GridContainer.module.css.cjs.map +0 -1
- package/dist/components/DataGrid/components/GridContainer/GridContainer.module.css.js +0 -9
- package/dist/components/DataGrid/components/GridContainer/GridContainer.module.css.js.map +0 -1
- package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.module.css.cjs +0 -19
- package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.module.css.cjs.map +0 -1
- package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.module.css.js +0 -13
- package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.module.css.js.map +0 -1
- package/dist/components/DataGrid/components/Header/Resizer/Resizer.module.css.cjs +0 -11
- package/dist/components/DataGrid/components/Header/Resizer/Resizer.module.css.cjs.map +0 -1
- package/dist/components/DataGrid/components/Header/Resizer/Resizer.module.css.js +0 -9
- package/dist/components/DataGrid/components/Header/Resizer/Resizer.module.css.js.map +0 -1
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
function insertStyle(css) {
|
|
4
|
+
if (!css || typeof window === 'undefined')
|
|
5
|
+
return;
|
|
6
|
+
const style = document.createElement('style');
|
|
7
|
+
style.setAttribute('type', 'text/css');
|
|
8
|
+
style.innerHTML = css;
|
|
9
|
+
document.head.appendChild(style);
|
|
10
|
+
return css;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
module.exports = insertStyle;
|
|
14
|
+
//# sourceMappingURL=____insertStyle.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"____insertStyle.cjs","sources":["../../___$insertStyle"],"sourcesContent":["export default function insertStyle(css) {\n if (!css || typeof window === 'undefined')\n return;\n const style = document.createElement('style');\n style.setAttribute('type', 'text/css');\n style.innerHTML = css;\n document.head.appendChild(style);\n return css;\n}"],"names":[],"mappings":";;AAAe,SAAS,WAAW,CAAC,GAAG,EAAE;AACzC,IAAI,IAAI,CAAC,GAAG,IAAI,OAAO,MAAM,KAAK,WAAW;AAC7C,QAAQ;AACR,IAAI,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AACjD,IAAI,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC;AAC1C,IAAI,KAAK,CAAC,SAAS,GAAG,GAAG;AACzB,IAAI,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AACpC,IAAI,OAAO,GAAG;AACd;;;;"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
function insertStyle(css) {
|
|
2
|
+
if (!css || typeof window === 'undefined')
|
|
3
|
+
return;
|
|
4
|
+
const style = document.createElement('style');
|
|
5
|
+
style.setAttribute('type', 'text/css');
|
|
6
|
+
style.innerHTML = css;
|
|
7
|
+
document.head.appendChild(style);
|
|
8
|
+
return css;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
export { insertStyle as default };
|
|
12
|
+
//# sourceMappingURL=____insertStyle.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"____insertStyle.js","sources":["../../___$insertStyle"],"sourcesContent":["export default function insertStyle(css) {\n if (!css || typeof window === 'undefined')\n return;\n const style = document.createElement('style');\n style.setAttribute('type', 'text/css');\n style.innerHTML = css;\n document.head.appendChild(style);\n return css;\n}"],"names":[],"mappings":"AAAe,SAAS,WAAW,CAAC,GAAG,EAAE;AACzC,IAAI,IAAI,CAAC,GAAG,IAAI,OAAO,MAAM,KAAK,WAAW;AAC7C,QAAQ;AACR,IAAI,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AACjD,IAAI,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC;AAC1C,IAAI,KAAK,CAAC,SAAS,GAAG,GAAG;AACzB,IAAI,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AACpC,IAAI,OAAO,GAAG;AACd;;;;"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
|
|
4
|
+
|
|
5
|
+
___$insertStyle("._baseCell_t7iek_1 {\n position: relative;\n box-sizing: border-box;\n}\n._baseCell_t7iek_1:focus, ._baseCell_t7iek_1:focus-visible {\n outline: var(--sizes-none);\n box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n}\n\n._pinnedColumnBase_t7iek_10::after, ._pinnedColumnRight_t7iek_10::after, ._pinnedColumnLeft_t7iek_10::after {\n position: absolute;\n top: var(--sizes-none);\n bottom: -1px;\n width: 30px;\n content: \"\";\n pointer-events: none;\n box-sizing: border-box;\n}\n\n._pinnedColumnLeft_t7iek_10::after {\n transform: translate(100%);\n right: var(--sizes-none);\n box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n}\n\n._pinnedColumnRight_t7iek_10::after {\n transform: translate(-100%);\n left: var(--sizes-none);\n box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n}");
|
|
6
|
+
var styles = {"baseCell":"_baseCell_t7iek_1","pinnedColumnBase":"_pinnedColumnBase_t7iek_10","pinnedColumnRight":"_pinnedColumnRight_t7iek_10","pinnedColumnLeft":"_pinnedColumnLeft_t7iek_10"};
|
|
7
|
+
|
|
8
|
+
module.exports = styles;
|
|
9
|
+
//# sourceMappingURL=DataGrid.module.scss.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DataGrid.module.scss.cjs","sources":["../../../src/components/DataGrid/DataGrid.module.scss"],"sourcesContent":[".baseCell {\n position: relative;\n box-sizing: border-box;\n\n &:focus,\n &:focus-visible {\n outline: var(--sizes-none);\n box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n }\n}\n\n.pinnedColumnBase {\n &::after {\n position: absolute;\n\n top: var(--sizes-none);\n bottom: -1px;\n width: 30px;\n\n content: '';\n pointer-events: none;\n\n box-sizing: border-box;\n }\n}\n\n.pinnedColumnLeft {\n @extend .pinnedColumnBase;\n\n &::after {\n transform: translate(100%);\n\n right: var(--sizes-none);\n\n box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 25%);\n }\n}\n\n.pinnedColumnRight {\n @extend .pinnedColumnBase;\n\n &::after {\n transform: translate(-100%);\n\n left: var(--sizes-none);\n\n box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 25%);\n }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,k4BAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA;;;;"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import insertStyle from '../../_virtual/____insertStyle.js';
|
|
2
|
+
|
|
3
|
+
insertStyle("._baseCell_t7iek_1 {\n position: relative;\n box-sizing: border-box;\n}\n._baseCell_t7iek_1:focus, ._baseCell_t7iek_1:focus-visible {\n outline: var(--sizes-none);\n box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n}\n\n._pinnedColumnBase_t7iek_10::after, ._pinnedColumnRight_t7iek_10::after, ._pinnedColumnLeft_t7iek_10::after {\n position: absolute;\n top: var(--sizes-none);\n bottom: -1px;\n width: 30px;\n content: \"\";\n pointer-events: none;\n box-sizing: border-box;\n}\n\n._pinnedColumnLeft_t7iek_10::after {\n transform: translate(100%);\n right: var(--sizes-none);\n box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n}\n\n._pinnedColumnRight_t7iek_10::after {\n transform: translate(-100%);\n left: var(--sizes-none);\n box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n}");
|
|
4
|
+
var styles = {"baseCell":"_baseCell_t7iek_1","pinnedColumnBase":"_pinnedColumnBase_t7iek_10","pinnedColumnRight":"_pinnedColumnRight_t7iek_10","pinnedColumnLeft":"_pinnedColumnLeft_t7iek_10"};
|
|
5
|
+
|
|
6
|
+
export { styles as default };
|
|
7
|
+
//# sourceMappingURL=DataGrid.module.scss.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DataGrid.module.scss.js","sources":["../../../src/components/DataGrid/DataGrid.module.scss"],"sourcesContent":[".baseCell {\n position: relative;\n box-sizing: border-box;\n\n &:focus,\n &:focus-visible {\n outline: var(--sizes-none);\n box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n }\n}\n\n.pinnedColumnBase {\n &::after {\n position: absolute;\n\n top: var(--sizes-none);\n bottom: -1px;\n width: 30px;\n\n content: '';\n pointer-events: none;\n\n box-sizing: border-box;\n }\n}\n\n.pinnedColumnLeft {\n @extend .pinnedColumnBase;\n\n &::after {\n transform: translate(100%);\n\n right: var(--sizes-none);\n\n box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 25%);\n }\n}\n\n.pinnedColumnRight {\n @extend .pinnedColumnBase;\n\n &::after {\n transform: translate(-100%);\n\n left: var(--sizes-none);\n\n box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 25%);\n }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,k4BAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA;;;;"}
|
|
@@ -6,7 +6,7 @@ var buildClassnames = require('../../../../../utils/buildClassnames.cjs');
|
|
|
6
6
|
require('uid/secure');
|
|
7
7
|
var CellContent = require('../../CellContent/CellContent.cjs');
|
|
8
8
|
var usePinnedColumnStyles = require('../../../hooks/usePinnedColumnStyles.cjs');
|
|
9
|
-
var BodyCell_module = require('./BodyCell.module.
|
|
9
|
+
var BodyCell_module = require('./BodyCell.module.scss.cjs');
|
|
10
10
|
|
|
11
11
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
12
12
|
|
|
@@ -19,7 +19,11 @@ const BodyCell = ({ cell, ariaRoles }) => {
|
|
|
19
19
|
const { justifyContent, textAlign, rowHeader } = cell.column.columnDef.meta;
|
|
20
20
|
const CellElement = rowHeader ? 'th' : 'td';
|
|
21
21
|
const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles.usePinnedColumnStyles({ column: cell.column });
|
|
22
|
-
const bodyCellClassname = buildClassnames.buildClassnames([
|
|
22
|
+
const bodyCellClassname = buildClassnames.buildClassnames([
|
|
23
|
+
BodyCell_module.bodyCell,
|
|
24
|
+
pinnedCellClassName,
|
|
25
|
+
'data-grid-cell',
|
|
26
|
+
]);
|
|
23
27
|
return (React__default.default.createElement(CellElement, { className: bodyCellClassname, "aria-colindex": cell.column.getIndex() + 1, scope: rowHeader ? 'row' : undefined, role: rowHeader ? 'rowheader' : ariaRoles.cell, style: pinnedCellStyles },
|
|
24
28
|
React__default.default.createElement(CellContent.CellContent, { contentStyle: {
|
|
25
29
|
justifyContent,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BodyCell.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Cell, flexRender } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\nimport { usePinnedColumnStyles } from '../../../hooks';\n\nimport
|
|
1
|
+
{"version":3,"file":"BodyCell.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Cell, flexRender } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\nimport { usePinnedColumnStyles } from '../../../hooks';\n\nimport styles from './BodyCell.module.scss';\n\ntype ColumnCellProps = {\n /**\n * Cell within the TanStack Table instance.\n */\n cell: Cell<any, any>;\n\n /**\n * ARIA roles for the grid.\n */\n ariaRoles: AriaRoles;\n};\n\n/**\n * Renders a cell element, and its content, for a given column and row, within the grid body.\n */\nexport const BodyCell = ({ cell, ariaRoles }: ColumnCellProps) => {\n const { justifyContent, textAlign, rowHeader } = cell.column.columnDef.meta!;\n const CellElement = rowHeader ? 'th' : 'td';\n\n const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({ column: cell.column });\n\n const bodyCellClassname = buildClassnames([\n styles.bodyCell,\n pinnedCellClassName,\n 'data-grid-cell',\n ]);\n\n return (\n <CellElement\n className={bodyCellClassname}\n aria-colindex={cell.column.getIndex() + 1}\n scope={rowHeader ? 'row' : undefined}\n role={rowHeader ? 'rowheader' : ariaRoles.cell}\n style={pinnedCellStyles}\n >\n <CellContent\n contentStyle={\n {\n justifyContent,\n textAlign,\n } as React.CSSProperties\n }\n >\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </CellContent>\n </CellElement>\n );\n};\n"],"names":["usePinnedColumnStyles","buildClassnames","styles","React","CellContent","flexRender"],"mappings":";;;;;;;;;;;;;;AAwBA;;AAEG;AACU,MAAA,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,SAAS,EAAmB,KAAI;AAC/D,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;IAC5E,MAAM,WAAW,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI;AAE3C,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAGA,2CAAqB,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;IAEhG,MAAM,iBAAiB,GAAGC,+BAAe,CAAC;AACxC,QAAAC,eAAM,CAAC,QAAQ;QACf,mBAAmB;QACnB,gBAAgB;AACjB,KAAA,CAAC;IAEF,QACEC,qCAAC,WAAW,EAAA,EACV,SAAS,EAAE,iBAAiB,mBACb,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EACzC,KAAK,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,EACpC,IAAI,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC,IAAI,EAC9C,KAAK,EAAE,gBAAgB,EAAA;QAEvBA,sBAAC,CAAA,aAAA,CAAAC,uBAAW,EACV,EAAA,YAAY,EACV;gBACE,cAAc;gBACd,SAAS;AACa,aAAA,EAAA,EAGzBC,qBAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAC9C,CACF;AAElB;;;;"}
|
|
@@ -4,7 +4,7 @@ import { buildClassnames } from '../../../../../utils/buildClassnames.js';
|
|
|
4
4
|
import 'uid/secure';
|
|
5
5
|
import { CellContent } from '../../CellContent/CellContent.js';
|
|
6
6
|
import { usePinnedColumnStyles } from '../../../hooks/usePinnedColumnStyles.js';
|
|
7
|
-
import
|
|
7
|
+
import styles from './BodyCell.module.scss.js';
|
|
8
8
|
|
|
9
9
|
/**
|
|
10
10
|
* Renders a cell element, and its content, for a given column and row, within the grid body.
|
|
@@ -13,7 +13,11 @@ const BodyCell = ({ cell, ariaRoles }) => {
|
|
|
13
13
|
const { justifyContent, textAlign, rowHeader } = cell.column.columnDef.meta;
|
|
14
14
|
const CellElement = rowHeader ? 'th' : 'td';
|
|
15
15
|
const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({ column: cell.column });
|
|
16
|
-
const bodyCellClassname = buildClassnames([
|
|
16
|
+
const bodyCellClassname = buildClassnames([
|
|
17
|
+
styles.bodyCell,
|
|
18
|
+
pinnedCellClassName,
|
|
19
|
+
'data-grid-cell',
|
|
20
|
+
]);
|
|
17
21
|
return (React__default.createElement(CellElement, { className: bodyCellClassname, "aria-colindex": cell.column.getIndex() + 1, scope: rowHeader ? 'row' : undefined, role: rowHeader ? 'rowheader' : ariaRoles.cell, style: pinnedCellStyles },
|
|
18
22
|
React__default.createElement(CellContent, { contentStyle: {
|
|
19
23
|
justifyContent,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BodyCell.js","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Cell, flexRender } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\nimport { usePinnedColumnStyles } from '../../../hooks';\n\nimport
|
|
1
|
+
{"version":3,"file":"BodyCell.js","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Cell, flexRender } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\nimport { usePinnedColumnStyles } from '../../../hooks';\n\nimport styles from './BodyCell.module.scss';\n\ntype ColumnCellProps = {\n /**\n * Cell within the TanStack Table instance.\n */\n cell: Cell<any, any>;\n\n /**\n * ARIA roles for the grid.\n */\n ariaRoles: AriaRoles;\n};\n\n/**\n * Renders a cell element, and its content, for a given column and row, within the grid body.\n */\nexport const BodyCell = ({ cell, ariaRoles }: ColumnCellProps) => {\n const { justifyContent, textAlign, rowHeader } = cell.column.columnDef.meta!;\n const CellElement = rowHeader ? 'th' : 'td';\n\n const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({ column: cell.column });\n\n const bodyCellClassname = buildClassnames([\n styles.bodyCell,\n pinnedCellClassName,\n 'data-grid-cell',\n ]);\n\n return (\n <CellElement\n className={bodyCellClassname}\n aria-colindex={cell.column.getIndex() + 1}\n scope={rowHeader ? 'row' : undefined}\n role={rowHeader ? 'rowheader' : ariaRoles.cell}\n style={pinnedCellStyles}\n >\n <CellContent\n contentStyle={\n {\n justifyContent,\n textAlign,\n } as React.CSSProperties\n }\n >\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </CellContent>\n </CellElement>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;AAwBA;;AAEG;AACU,MAAA,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,SAAS,EAAmB,KAAI;AAC/D,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;IAC5E,MAAM,WAAW,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI;AAE3C,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAG,qBAAqB,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;IAEhG,MAAM,iBAAiB,GAAG,eAAe,CAAC;AACxC,QAAA,MAAM,CAAC,QAAQ;QACf,mBAAmB;QACnB,gBAAgB;AACjB,KAAA,CAAC;IAEF,QACEA,6BAAC,WAAW,EAAA,EACV,SAAS,EAAE,iBAAiB,mBACb,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EACzC,KAAK,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,EACpC,IAAI,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC,IAAI,EAC9C,KAAK,EAAE,gBAAgB,EAAA;QAEvBA,cAAC,CAAA,aAAA,CAAA,WAAW,EACV,EAAA,YAAY,EACV;gBACE,cAAc;gBACd,SAAS;AACa,aAAA,EAAA,EAGzB,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAC9C,CACF;AAElB;;;;"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var ___$insertStyle = require('../../../../../_virtual/____insertStyle.cjs');
|
|
4
|
+
|
|
5
|
+
___$insertStyle("._baseCell_1r4wp_1, ._bodyCell_1r4wp_1 {\n position: relative;\n box-sizing: border-box;\n}\n._baseCell_1r4wp_1:focus, ._bodyCell_1r4wp_1:focus, ._baseCell_1r4wp_1:focus-visible, ._bodyCell_1r4wp_1:focus-visible {\n outline: var(--sizes-none);\n box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n}\n\n._pinnedColumnBase_1r4wp_10::after, ._pinnedColumnRight_1r4wp_10::after, ._pinnedColumnLeft_1r4wp_10::after {\n position: absolute;\n top: var(--sizes-none);\n bottom: -1px;\n width: 30px;\n content: \"\";\n pointer-events: none;\n box-sizing: border-box;\n}\n\n._pinnedColumnLeft_1r4wp_10::after {\n transform: translate(100%);\n right: var(--sizes-none);\n box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n}\n\n._pinnedColumnRight_1r4wp_10::after {\n transform: translate(-100%);\n left: var(--sizes-none);\n box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n}\n\n._bodyCell_1r4wp_1 {\n background-color: white;\n color: var(--text-body-small-color);\n font-family: var(--text-body-small-font-family);\n font-size: var(--text-body-small-font-size);\n font-weight: var(--text-body-small-font-weight);\n line-height: var(--text-body-small-line-height);\n}\n\n.data-grid-row.striped:nth-of-type(odd) > ._bodyCell_1r4wp_1 {\n background-color: var(--colors-neutral-grey-lightest);\n}\n\n.data-grid-row.selected > ._bodyCell_1r4wp_1 {\n background-color: var(--colors-brand-blue-lightest);\n}\n\n.data-grid-row + .data-grid-row > ._bodyCell_1r4wp_1 {\n border-top: 1px solid var(--colors-neutral-grey-base);\n}");
|
|
6
|
+
var styles = {"baseCell":"_baseCell_1r4wp_1","bodyCell":"_bodyCell_1r4wp_1","pinnedColumnBase":"_pinnedColumnBase_1r4wp_10","pinnedColumnRight":"_pinnedColumnRight_1r4wp_10","pinnedColumnLeft":"_pinnedColumnLeft_1r4wp_10"};
|
|
7
|
+
|
|
8
|
+
module.exports = styles;
|
|
9
|
+
//# sourceMappingURL=BodyCell.module.scss.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BodyCell.module.scss.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.module.scss"],"sourcesContent":["@use '../../../DataGrid.module.scss';\n\n.bodyCell {\n @extend .baseCell;\n\n background-color: white;\n\n color: var(--text-body-small-color);\n font-family: var(--text-body-small-font-family);\n font-size: var(--text-body-small-font-size);\n font-weight: var(--text-body-small-font-weight);\n line-height: var(--text-body-small-line-height);\n}\n\n:global(.data-grid-row.striped:nth-of-type(odd)) > .bodyCell {\n background-color: var(--colors-neutral-grey-lightest);\n}\n\n:global(.data-grid-row.selected) > .bodyCell {\n background-color: var(--colors-brand-blue-lightest);\n}\n\n:global(.data-grid-row + .data-grid-row) > .bodyCell {\n border-top: 1px solid var(--colors-neutral-grey-base);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,gmDAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA;;;;"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import insertStyle from '../../../../../_virtual/____insertStyle.js';
|
|
2
|
+
|
|
3
|
+
insertStyle("._baseCell_1r4wp_1, ._bodyCell_1r4wp_1 {\n position: relative;\n box-sizing: border-box;\n}\n._baseCell_1r4wp_1:focus, ._bodyCell_1r4wp_1:focus, ._baseCell_1r4wp_1:focus-visible, ._bodyCell_1r4wp_1:focus-visible {\n outline: var(--sizes-none);\n box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n}\n\n._pinnedColumnBase_1r4wp_10::after, ._pinnedColumnRight_1r4wp_10::after, ._pinnedColumnLeft_1r4wp_10::after {\n position: absolute;\n top: var(--sizes-none);\n bottom: -1px;\n width: 30px;\n content: \"\";\n pointer-events: none;\n box-sizing: border-box;\n}\n\n._pinnedColumnLeft_1r4wp_10::after {\n transform: translate(100%);\n right: var(--sizes-none);\n box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n}\n\n._pinnedColumnRight_1r4wp_10::after {\n transform: translate(-100%);\n left: var(--sizes-none);\n box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n}\n\n._bodyCell_1r4wp_1 {\n background-color: white;\n color: var(--text-body-small-color);\n font-family: var(--text-body-small-font-family);\n font-size: var(--text-body-small-font-size);\n font-weight: var(--text-body-small-font-weight);\n line-height: var(--text-body-small-line-height);\n}\n\n.data-grid-row.striped:nth-of-type(odd) > ._bodyCell_1r4wp_1 {\n background-color: var(--colors-neutral-grey-lightest);\n}\n\n.data-grid-row.selected > ._bodyCell_1r4wp_1 {\n background-color: var(--colors-brand-blue-lightest);\n}\n\n.data-grid-row + .data-grid-row > ._bodyCell_1r4wp_1 {\n border-top: 1px solid var(--colors-neutral-grey-base);\n}");
|
|
4
|
+
var styles = {"baseCell":"_baseCell_1r4wp_1","bodyCell":"_bodyCell_1r4wp_1","pinnedColumnBase":"_pinnedColumnBase_1r4wp_10","pinnedColumnRight":"_pinnedColumnRight_1r4wp_10","pinnedColumnLeft":"_pinnedColumnLeft_1r4wp_10"};
|
|
5
|
+
|
|
6
|
+
export { styles as default };
|
|
7
|
+
//# sourceMappingURL=BodyCell.module.scss.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BodyCell.module.scss.js","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.module.scss"],"sourcesContent":["@use '../../../DataGrid.module.scss';\n\n.bodyCell {\n @extend .baseCell;\n\n background-color: white;\n\n color: var(--text-body-small-color);\n font-family: var(--text-body-small-font-family);\n font-size: var(--text-body-small-font-size);\n font-weight: var(--text-body-small-font-weight);\n line-height: var(--text-body-small-line-height);\n}\n\n:global(.data-grid-row.striped:nth-of-type(odd)) > .bodyCell {\n background-color: var(--colors-neutral-grey-lightest);\n}\n\n:global(.data-grid-row.selected) > .bodyCell {\n background-color: var(--colors-brand-blue-lightest);\n}\n\n:global(.data-grid-row + .data-grid-row) > .bodyCell {\n border-top: 1px solid var(--colors-neutral-grey-base);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,gmDAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA;;;;"}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
var buildClassnames = require('../../../../utils/buildClassnames.cjs');
|
|
5
5
|
require('uid/secure');
|
|
6
|
-
var CellContent_module = require('./CellContent.module.
|
|
6
|
+
var CellContent_module = require('./CellContent.module.scss.cjs');
|
|
7
7
|
|
|
8
8
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
9
9
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CellContent.cjs","sources":["../../../../../src/components/DataGrid/components/CellContent/CellContent.tsx"],"sourcesContent":["import React from 'react';\n\nimport { buildClassnames } from '../../../../utils';\n\nimport
|
|
1
|
+
{"version":3,"file":"CellContent.cjs","sources":["../../../../../src/components/DataGrid/components/CellContent/CellContent.tsx"],"sourcesContent":["import React from 'react';\n\nimport { buildClassnames } from '../../../../utils';\n\nimport styles from './CellContent.module.scss';\n\nexport interface CellContentProps {\n /**\n * Styles to be applied to the cell content wrapper.\n */\n contentStyle: Pick<React.CSSProperties, 'marginLeft' | 'justifyContent' | 'textAlign'>;\n\n /**\n * Child elements.\n */\n children?: React.ReactNode;\n}\n\nconst cellContentClassname = buildClassnames([styles.cellContent, 'data-grid-cell-content']);\n\n/**\n * Wrapper for content displayed within a non-header cell in the grid.\n */\nexport const CellContent = ({ contentStyle, children }: CellContentProps) => {\n return (\n <div data-testid=\"data-grid-cell-content\" className={cellContentClassname} style={contentStyle}>\n {children}\n </div>\n );\n};\n"],"names":["buildClassnames","styles","React"],"mappings":";;;;;;;;;;;AAkBA,MAAM,oBAAoB,GAAGA,+BAAe,CAAC,CAACC,kBAAM,CAAC,WAAW,EAAE,wBAAwB,CAAC,CAAC;AAE5F;;AAEG;AACU,MAAA,WAAW,GAAG,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAoB,KAAI;AAC1E,IAAA,QACEC,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAiB,wBAAwB,EAAC,SAAS,EAAE,oBAAoB,EAAE,KAAK,EAAE,YAAY,EAAA,EAC3F,QAAQ,CACL;AAEV;;;;"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import React__default from 'react';
|
|
2
2
|
import { buildClassnames } from '../../../../utils/buildClassnames.js';
|
|
3
3
|
import 'uid/secure';
|
|
4
|
-
import
|
|
4
|
+
import styles from './CellContent.module.scss.js';
|
|
5
5
|
|
|
6
|
-
const cellContentClassname = buildClassnames([cellContent, 'data-grid-cell-content']);
|
|
6
|
+
const cellContentClassname = buildClassnames([styles.cellContent, 'data-grid-cell-content']);
|
|
7
7
|
/**
|
|
8
8
|
* Wrapper for content displayed within a non-header cell in the grid.
|
|
9
9
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CellContent.js","sources":["../../../../../src/components/DataGrid/components/CellContent/CellContent.tsx"],"sourcesContent":["import React from 'react';\n\nimport { buildClassnames } from '../../../../utils';\n\nimport
|
|
1
|
+
{"version":3,"file":"CellContent.js","sources":["../../../../../src/components/DataGrid/components/CellContent/CellContent.tsx"],"sourcesContent":["import React from 'react';\n\nimport { buildClassnames } from '../../../../utils';\n\nimport styles from './CellContent.module.scss';\n\nexport interface CellContentProps {\n /**\n * Styles to be applied to the cell content wrapper.\n */\n contentStyle: Pick<React.CSSProperties, 'marginLeft' | 'justifyContent' | 'textAlign'>;\n\n /**\n * Child elements.\n */\n children?: React.ReactNode;\n}\n\nconst cellContentClassname = buildClassnames([styles.cellContent, 'data-grid-cell-content']);\n\n/**\n * Wrapper for content displayed within a non-header cell in the grid.\n */\nexport const CellContent = ({ contentStyle, children }: CellContentProps) => {\n return (\n <div data-testid=\"data-grid-cell-content\" className={cellContentClassname} style={contentStyle}>\n {children}\n </div>\n );\n};\n"],"names":["React"],"mappings":";;;;;AAkBA,MAAM,oBAAoB,GAAG,eAAe,CAAC,CAAC,MAAM,CAAC,WAAW,EAAE,wBAAwB,CAAC,CAAC;AAE5F;;AAEG;AACU,MAAA,WAAW,GAAG,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAoB,KAAI;AAC1E,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAiB,wBAAwB,EAAC,SAAS,EAAE,oBAAoB,EAAE,KAAK,EAAE,YAAY,EAAA,EAC3F,QAAQ,CACL;AAEV;;;;"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var ___$insertStyle = require('../../../../_virtual/____insertStyle.cjs');
|
|
4
|
+
|
|
5
|
+
___$insertStyle("._cellContent_un8dp_1 {\n display: flex;\n padding: var(--density);\n align-items: center;\n gap: var(--sizes-sm);\n}");
|
|
6
|
+
var styles = {"cellContent":"_cellContent_un8dp_1"};
|
|
7
|
+
|
|
8
|
+
module.exports = styles;
|
|
9
|
+
//# sourceMappingURL=CellContent.module.scss.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CellContent.module.scss.cjs","sources":["../../../../../src/components/DataGrid/components/CellContent/CellContent.module.scss"],"sourcesContent":[".cellContent {\n display: flex;\n padding: var(--density);\n align-items: center;\n gap: var(--sizes-sm);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,2HAAA;AACA,aAAA,CAAA,aAAA,CAAA,sBAAA;;;;"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import insertStyle from '../../../../_virtual/____insertStyle.js';
|
|
2
|
+
|
|
3
|
+
insertStyle("._cellContent_un8dp_1 {\n display: flex;\n padding: var(--density);\n align-items: center;\n gap: var(--sizes-sm);\n}");
|
|
4
|
+
var styles = {"cellContent":"_cellContent_un8dp_1"};
|
|
5
|
+
|
|
6
|
+
export { styles as default };
|
|
7
|
+
//# sourceMappingURL=CellContent.module.scss.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CellContent.module.scss.js","sources":["../../../../../src/components/DataGrid/components/CellContent/CellContent.module.scss"],"sourcesContent":[".cellContent {\n display: flex;\n padding: var(--density);\n align-items: center;\n gap: var(--sizes-sm);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,2HAAA;AACA,aAAA,CAAA,aAAA,CAAA,sBAAA;;;;"}
|
|
@@ -6,7 +6,7 @@ var buildClassnames = require('../../../../../utils/buildClassnames.cjs');
|
|
|
6
6
|
require('uid/secure');
|
|
7
7
|
var usePinnedColumnStyles = require('../../../hooks/usePinnedColumnStyles.cjs');
|
|
8
8
|
var CellContent = require('../../CellContent/CellContent.cjs');
|
|
9
|
-
var FooterCell_module = require('./FooterCell.module.
|
|
9
|
+
var FooterCell_module = require('./FooterCell.module.scss.cjs');
|
|
10
10
|
|
|
11
11
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
12
12
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FooterCell.cjs","sources":["../../../../../../src/components/DataGrid/components/Footer/FooterCell/FooterCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport { flexRender, Header } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { usePinnedColumnStyles } from '../../../hooks/usePinnedColumnStyles';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\n\nimport
|
|
1
|
+
{"version":3,"file":"FooterCell.cjs","sources":["../../../../../../src/components/DataGrid/components/Footer/FooterCell/FooterCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport { flexRender, Header } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { usePinnedColumnStyles } from '../../../hooks/usePinnedColumnStyles';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\n\nimport styles from './FooterCell.module.scss';\n\ntype FooterCellProps = {\n /**\n * The Header within the TanStack Table instance.\n */\n header: Header<any, any>;\n\n /**\n * ARIA roles used in the grid.\n */\n ariaRoles: AriaRoles;\n};\n\n/**\n * Renders a footer cell element, and its content, for a given column.\n */\nexport const FooterCell = ({ header, ariaRoles }: FooterCellProps) => {\n const { justifyContent, textAlign } = header.column.columnDef.meta!;\n\n const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n column: header.column,\n });\n\n const footerCellClassname = buildClassnames([\n styles.footerCell,\n pinnedCellClassName,\n 'data-grid-footer-cell',\n ]);\n\n return (\n <th\n scope=\"row\"\n role={ariaRoles.cell}\n aria-colindex={header.column.getIndex() + 1}\n className={footerCellClassname}\n style={pinnedCellStyles}\n >\n <CellContent contentStyle={{ justifyContent, textAlign } as React.CSSProperties}>\n {flexRender(header.column.columnDef.footer, header.getContext())}\n </CellContent>\n </th>\n );\n};\n"],"names":["usePinnedColumnStyles","buildClassnames","styles","React","CellContent","flexRender"],"mappings":";;;;;;;;;;;;;;AAyBA;;AAEG;AACU,MAAA,UAAU,GAAG,CAAC,EAAE,MAAM,EAAE,SAAS,EAAmB,KAAI;AACnE,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;AAEnE,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAGA,2CAAqB,CAAC;QACtE,MAAM,EAAE,MAAM,CAAC,MAAM;AACtB,KAAA,CAAC;IAEF,MAAM,mBAAmB,GAAGC,+BAAe,CAAC;AAC1C,QAAAC,iBAAM,CAAC,UAAU;QACjB,mBAAmB;QACnB,uBAAuB;AACxB,KAAA,CAAC;IAEF,QACEC,sBACE,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,KAAK,EAAC,KAAK,EACX,IAAI,EAAE,SAAS,CAAC,IAAI,EACL,eAAA,EAAA,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EAC3C,SAAS,EAAE,mBAAmB,EAC9B,KAAK,EAAE,gBAAgB,EAAA;AAEvB,QAAAA,sBAAA,CAAA,aAAA,CAACC,uBAAW,EAAA,EAAC,YAAY,EAAE,EAAE,cAAc,EAAE,SAAS,EAAyB,EAAA,EAC5EC,qBAAU,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,UAAU,EAAE,CAAC,CACpD,CACX;AAET;;;;"}
|
|
@@ -4,7 +4,7 @@ import { buildClassnames } from '../../../../../utils/buildClassnames.js';
|
|
|
4
4
|
import 'uid/secure';
|
|
5
5
|
import { usePinnedColumnStyles } from '../../../hooks/usePinnedColumnStyles.js';
|
|
6
6
|
import { CellContent } from '../../CellContent/CellContent.js';
|
|
7
|
-
import
|
|
7
|
+
import styles from './FooterCell.module.scss.js';
|
|
8
8
|
|
|
9
9
|
/**
|
|
10
10
|
* Renders a footer cell element, and its content, for a given column.
|
|
@@ -15,7 +15,7 @@ const FooterCell = ({ header, ariaRoles }) => {
|
|
|
15
15
|
column: header.column,
|
|
16
16
|
});
|
|
17
17
|
const footerCellClassname = buildClassnames([
|
|
18
|
-
footerCell,
|
|
18
|
+
styles.footerCell,
|
|
19
19
|
pinnedCellClassName,
|
|
20
20
|
'data-grid-footer-cell',
|
|
21
21
|
]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FooterCell.js","sources":["../../../../../../src/components/DataGrid/components/Footer/FooterCell/FooterCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport { flexRender, Header } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { usePinnedColumnStyles } from '../../../hooks/usePinnedColumnStyles';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\n\nimport
|
|
1
|
+
{"version":3,"file":"FooterCell.js","sources":["../../../../../../src/components/DataGrid/components/Footer/FooterCell/FooterCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport { flexRender, Header } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { usePinnedColumnStyles } from '../../../hooks/usePinnedColumnStyles';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\n\nimport styles from './FooterCell.module.scss';\n\ntype FooterCellProps = {\n /**\n * The Header within the TanStack Table instance.\n */\n header: Header<any, any>;\n\n /**\n * ARIA roles used in the grid.\n */\n ariaRoles: AriaRoles;\n};\n\n/**\n * Renders a footer cell element, and its content, for a given column.\n */\nexport const FooterCell = ({ header, ariaRoles }: FooterCellProps) => {\n const { justifyContent, textAlign } = header.column.columnDef.meta!;\n\n const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n column: header.column,\n });\n\n const footerCellClassname = buildClassnames([\n styles.footerCell,\n pinnedCellClassName,\n 'data-grid-footer-cell',\n ]);\n\n return (\n <th\n scope=\"row\"\n role={ariaRoles.cell}\n aria-colindex={header.column.getIndex() + 1}\n className={footerCellClassname}\n style={pinnedCellStyles}\n >\n <CellContent contentStyle={{ justifyContent, textAlign } as React.CSSProperties}>\n {flexRender(header.column.columnDef.footer, header.getContext())}\n </CellContent>\n </th>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;AAyBA;;AAEG;AACU,MAAA,UAAU,GAAG,CAAC,EAAE,MAAM,EAAE,SAAS,EAAmB,KAAI;AACnE,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;AAEnE,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAG,qBAAqB,CAAC;QACtE,MAAM,EAAE,MAAM,CAAC,MAAM;AACtB,KAAA,CAAC;IAEF,MAAM,mBAAmB,GAAG,eAAe,CAAC;AAC1C,QAAA,MAAM,CAAC,UAAU;QACjB,mBAAmB;QACnB,uBAAuB;AACxB,KAAA,CAAC;IAEF,QACEA,cACE,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,KAAK,EAAC,KAAK,EACX,IAAI,EAAE,SAAS,CAAC,IAAI,EACL,eAAA,EAAA,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EAC3C,SAAS,EAAE,mBAAmB,EAC9B,KAAK,EAAE,gBAAgB,EAAA;AAEvB,QAAAA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EAAC,YAAY,EAAE,EAAE,cAAc,EAAE,SAAS,EAAyB,EAAA,EAC5E,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,UAAU,EAAE,CAAC,CACpD,CACX;AAET;;;;"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var ___$insertStyle = require('../../../../../_virtual/____insertStyle.cjs');
|
|
4
|
+
|
|
5
|
+
___$insertStyle("._baseCell_1v1wo_1, ._footerCell_1v1wo_1 {\n position: relative;\n box-sizing: border-box;\n}\n._baseCell_1v1wo_1:focus, ._footerCell_1v1wo_1:focus, ._baseCell_1v1wo_1:focus-visible, ._footerCell_1v1wo_1:focus-visible {\n outline: var(--sizes-none);\n box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n}\n\n._pinnedColumnBase_1v1wo_10::after, ._pinnedColumnRight_1v1wo_10::after, ._pinnedColumnLeft_1v1wo_10::after {\n position: absolute;\n top: var(--sizes-none);\n bottom: -1px;\n width: 30px;\n content: \"\";\n pointer-events: none;\n box-sizing: border-box;\n}\n\n._pinnedColumnLeft_1v1wo_10::after {\n transform: translate(100%);\n right: var(--sizes-none);\n box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n}\n\n._pinnedColumnRight_1v1wo_10::after {\n transform: translate(-100%);\n left: var(--sizes-none);\n box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n}\n\n._footerCell_1v1wo_1 {\n color: var(--text-body-small-color);\n font-family: var(--text-body-small-font-family);\n font-style: var(--text-body-small-font-style);\n font-weight: var(--text-body-small-font-weight);\n line-height: var(--text-body-small-line-height);\n border-top: var(--sizes-line) solid var(--colors-secondary-blue-base);\n background-color: var(--colors-neutral-grey-lightest);\n}");
|
|
6
|
+
var styles = {"baseCell":"_baseCell_1v1wo_1","footerCell":"_footerCell_1v1wo_1","pinnedColumnBase":"_pinnedColumnBase_1v1wo_10","pinnedColumnRight":"_pinnedColumnRight_1v1wo_10","pinnedColumnLeft":"_pinnedColumnLeft_1v1wo_10"};
|
|
7
|
+
|
|
8
|
+
module.exports = styles;
|
|
9
|
+
//# sourceMappingURL=FooterCell.module.scss.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FooterCell.module.scss.cjs","sources":["../../../../../../src/components/DataGrid/components/Footer/FooterCell/FooterCell.module.scss"],"sourcesContent":["@use '../../../DataGrid.module.scss';\n\n.footerCell {\n @extend .baseCell;\n\n color: var(--text-body-small-color);\n font-family: var(--text-body-small-font-family);\n font-style: var(--text-body-small-font-style);\n font-weight: var(--text-body-small-font-weight);\n line-height: var(--text-body-small-line-height);\n\n border-top: var(--sizes-line) solid var(--colors-secondary-blue-base);\n background-color: var(--colors-neutral-grey-lightest);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,+2CAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,YAAA,CAAA,qBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA;;;;"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import insertStyle from '../../../../../_virtual/____insertStyle.js';
|
|
2
|
+
|
|
3
|
+
insertStyle("._baseCell_1v1wo_1, ._footerCell_1v1wo_1 {\n position: relative;\n box-sizing: border-box;\n}\n._baseCell_1v1wo_1:focus, ._footerCell_1v1wo_1:focus, ._baseCell_1v1wo_1:focus-visible, ._footerCell_1v1wo_1:focus-visible {\n outline: var(--sizes-none);\n box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n}\n\n._pinnedColumnBase_1v1wo_10::after, ._pinnedColumnRight_1v1wo_10::after, ._pinnedColumnLeft_1v1wo_10::after {\n position: absolute;\n top: var(--sizes-none);\n bottom: -1px;\n width: 30px;\n content: \"\";\n pointer-events: none;\n box-sizing: border-box;\n}\n\n._pinnedColumnLeft_1v1wo_10::after {\n transform: translate(100%);\n right: var(--sizes-none);\n box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n}\n\n._pinnedColumnRight_1v1wo_10::after {\n transform: translate(-100%);\n left: var(--sizes-none);\n box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n}\n\n._footerCell_1v1wo_1 {\n color: var(--text-body-small-color);\n font-family: var(--text-body-small-font-family);\n font-style: var(--text-body-small-font-style);\n font-weight: var(--text-body-small-font-weight);\n line-height: var(--text-body-small-line-height);\n border-top: var(--sizes-line) solid var(--colors-secondary-blue-base);\n background-color: var(--colors-neutral-grey-lightest);\n}");
|
|
4
|
+
var styles = {"baseCell":"_baseCell_1v1wo_1","footerCell":"_footerCell_1v1wo_1","pinnedColumnBase":"_pinnedColumnBase_1v1wo_10","pinnedColumnRight":"_pinnedColumnRight_1v1wo_10","pinnedColumnLeft":"_pinnedColumnLeft_1v1wo_10"};
|
|
5
|
+
|
|
6
|
+
export { styles as default };
|
|
7
|
+
//# sourceMappingURL=FooterCell.module.scss.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FooterCell.module.scss.js","sources":["../../../../../../src/components/DataGrid/components/Footer/FooterCell/FooterCell.module.scss"],"sourcesContent":["@use '../../../DataGrid.module.scss';\n\n.footerCell {\n @extend .baseCell;\n\n color: var(--text-body-small-color);\n font-family: var(--text-body-small-font-family);\n font-style: var(--text-body-small-font-style);\n font-weight: var(--text-body-small-font-weight);\n line-height: var(--text-body-small-line-height);\n\n border-top: var(--sizes-line) solid var(--colors-secondary-blue-base);\n background-color: var(--colors-neutral-grey-lightest);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,+2CAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,YAAA,CAAA,qBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA;;;;"}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
var buildClassnames = require('../../../../../utils/buildClassnames.cjs');
|
|
5
5
|
require('uid/secure');
|
|
6
|
-
var Container_module = require('./Container.module.
|
|
6
|
+
var Container_module = require('./Container.module.scss.cjs');
|
|
7
7
|
|
|
8
8
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
9
9
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Container.cjs","sources":["../../../../../../src/components/DataGrid/components/GridContainer/Container/Container.tsx"],"sourcesContent":["import React from 'react';\n\nimport { buildClassnames } from '../../../../../utils';\nimport { BorderMode } from '../../../types/enums';\n\nimport
|
|
1
|
+
{"version":3,"file":"Container.cjs","sources":["../../../../../../src/components/DataGrid/components/GridContainer/Container/Container.tsx"],"sourcesContent":["import React from 'react';\n\nimport { buildClassnames } from '../../../../../utils';\nimport { BorderMode } from '../../../types/enums';\n\nimport styles from './Container.module.scss';\n\ntype ContainerProps = {\n /**\n * Border mode.\n */\n borderMode: BorderMode;\n\n /**\n * Additional container styles.\n */\n style?: React.CSSProperties;\n\n /**\n * Child elements.\n */\n children: React.ReactNode;\n};\n\nconst borderModeClassMap = {\n full: styles.borderModeFull,\n vertical: styles.borderModeVertical,\n none: styles.borderModeNone,\n};\n\n/**\n * A container element, which wraps the grid and applies a border and overflow.\n */\nexport const Container = React.forwardRef<HTMLDivElement, ContainerProps>(\n ({ borderMode, style, children }, ref) => (\n <div\n ref={ref}\n className={buildClassnames([styles.container, borderModeClassMap[borderMode]])}\n style={style}\n >\n {children}\n </div>\n ),\n);\n"],"names":["styles","React","buildClassnames"],"mappings":";;;;;;;;;;;AAwBA,MAAM,kBAAkB,GAAG;IACzB,IAAI,EAAEA,gBAAM,CAAC,cAAc;IAC3B,QAAQ,EAAEA,gBAAM,CAAC,kBAAkB;IACnC,IAAI,EAAEA,gBAAM,CAAC,cAAc;CAC5B;AAED;;AAEG;MACU,SAAS,GAAGC,sBAAK,CAAC,UAAU,CACvC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,GAAG,MACnCA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAEC,+BAAe,CAAC,CAACF,gBAAM,CAAC,SAAS,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC,CAAC,EAC9E,KAAK,EAAE,KAAK,IAEX,QAAQ,CACL,CACP;;;;"}
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import React__default from 'react';
|
|
2
2
|
import { buildClassnames } from '../../../../../utils/buildClassnames.js';
|
|
3
3
|
import 'uid/secure';
|
|
4
|
-
import
|
|
4
|
+
import styles from './Container.module.scss.js';
|
|
5
5
|
|
|
6
6
|
const borderModeClassMap = {
|
|
7
|
-
full: borderModeFull,
|
|
8
|
-
vertical: borderModeVertical,
|
|
9
|
-
none: borderModeNone,
|
|
7
|
+
full: styles.borderModeFull,
|
|
8
|
+
vertical: styles.borderModeVertical,
|
|
9
|
+
none: styles.borderModeNone,
|
|
10
10
|
};
|
|
11
11
|
/**
|
|
12
12
|
* A container element, which wraps the grid and applies a border and overflow.
|
|
13
13
|
*/
|
|
14
|
-
const Container = React__default.forwardRef(({ borderMode, style, children }, ref) => (React__default.createElement("div", { ref: ref, className: buildClassnames([container, borderModeClassMap[borderMode]]), style: style }, children)));
|
|
14
|
+
const Container = React__default.forwardRef(({ borderMode, style, children }, ref) => (React__default.createElement("div", { ref: ref, className: buildClassnames([styles.container, borderModeClassMap[borderMode]]), style: style }, children)));
|
|
15
15
|
|
|
16
16
|
export { Container };
|
|
17
17
|
//# sourceMappingURL=Container.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Container.js","sources":["../../../../../../src/components/DataGrid/components/GridContainer/Container/Container.tsx"],"sourcesContent":["import React from 'react';\n\nimport { buildClassnames } from '../../../../../utils';\nimport { BorderMode } from '../../../types/enums';\n\nimport
|
|
1
|
+
{"version":3,"file":"Container.js","sources":["../../../../../../src/components/DataGrid/components/GridContainer/Container/Container.tsx"],"sourcesContent":["import React from 'react';\n\nimport { buildClassnames } from '../../../../../utils';\nimport { BorderMode } from '../../../types/enums';\n\nimport styles from './Container.module.scss';\n\ntype ContainerProps = {\n /**\n * Border mode.\n */\n borderMode: BorderMode;\n\n /**\n * Additional container styles.\n */\n style?: React.CSSProperties;\n\n /**\n * Child elements.\n */\n children: React.ReactNode;\n};\n\nconst borderModeClassMap = {\n full: styles.borderModeFull,\n vertical: styles.borderModeVertical,\n none: styles.borderModeNone,\n};\n\n/**\n * A container element, which wraps the grid and applies a border and overflow.\n */\nexport const Container = React.forwardRef<HTMLDivElement, ContainerProps>(\n ({ borderMode, style, children }, ref) => (\n <div\n ref={ref}\n className={buildClassnames([styles.container, borderModeClassMap[borderMode]])}\n style={style}\n >\n {children}\n </div>\n ),\n);\n"],"names":["React"],"mappings":";;;;;AAwBA,MAAM,kBAAkB,GAAG;IACzB,IAAI,EAAE,MAAM,CAAC,cAAc;IAC3B,QAAQ,EAAE,MAAM,CAAC,kBAAkB;IACnC,IAAI,EAAE,MAAM,CAAC,cAAc;CAC5B;AAED;;AAEG;MACU,SAAS,GAAGA,cAAK,CAAC,UAAU,CACvC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,GAAG,MACnCA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC,CAAC,EAC9E,KAAK,EAAE,KAAK,IAEX,QAAQ,CACL,CACP;;;;"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var ___$insertStyle = require('../../../../../_virtual/____insertStyle.cjs');
|
|
4
|
+
|
|
5
|
+
___$insertStyle("._container_1grno_1 {\n width: 100%;\n position: relative;\n border-style: solid;\n border-color: var(--colors-neutral-grey-dark);\n overflow-x: auto;\n overflow-y: hidden;\n}\n._container_1grno_1._borderModeFull_1grno_9 {\n border-width: var(--sizes-line);\n border-radius: var(--radius-base);\n}\n._container_1grno_1._borderModeVertical_1grno_13 {\n border-width: var(--sizes-none);\n border-left-width: var(--sizes-line);\n border-right-width: var(--sizes-line);\n}\n._container_1grno_1._borderModeNone_1grno_18 {\n border-width: var(--sizes-none);\n}");
|
|
6
|
+
var styles = {"container":"_container_1grno_1","borderModeFull":"_borderModeFull_1grno_9","borderModeVertical":"_borderModeVertical_1grno_13","borderModeNone":"_borderModeNone_1grno_18"};
|
|
7
|
+
|
|
8
|
+
module.exports = styles;
|
|
9
|
+
//# sourceMappingURL=Container.module.scss.cjs.map
|
package/dist/components/DataGrid/components/GridContainer/Container/Container.module.scss.cjs.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Container.module.scss.cjs","sources":["../../../../../../src/components/DataGrid/components/GridContainer/Container/Container.module.scss"],"sourcesContent":[".container {\n width: 100%;\n position: relative;\n border-style: solid;\n border-color: var(--colors-neutral-grey-dark);\n\n overflow-x: auto;\n overflow-y: hidden;\n\n &.borderModeFull {\n border-width: var(--sizes-line);\n border-radius: var(--radius-base);\n }\n\n &.borderModeVertical {\n border-width: var(--sizes-none);\n border-left-width: var(--sizes-line);\n border-right-width: var(--sizes-line);\n }\n\n &.borderModeNone {\n border-width: var(--sizes-none);\n }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,wjBAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,gBAAA,CAAA,yBAAA,CAAA,oBAAA,CAAA,8BAAA,CAAA,gBAAA,CAAA,0BAAA;;;;"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import insertStyle from '../../../../../_virtual/____insertStyle.js';
|
|
2
|
+
|
|
3
|
+
insertStyle("._container_1grno_1 {\n width: 100%;\n position: relative;\n border-style: solid;\n border-color: var(--colors-neutral-grey-dark);\n overflow-x: auto;\n overflow-y: hidden;\n}\n._container_1grno_1._borderModeFull_1grno_9 {\n border-width: var(--sizes-line);\n border-radius: var(--radius-base);\n}\n._container_1grno_1._borderModeVertical_1grno_13 {\n border-width: var(--sizes-none);\n border-left-width: var(--sizes-line);\n border-right-width: var(--sizes-line);\n}\n._container_1grno_1._borderModeNone_1grno_18 {\n border-width: var(--sizes-none);\n}");
|
|
4
|
+
var styles = {"container":"_container_1grno_1","borderModeFull":"_borderModeFull_1grno_9","borderModeVertical":"_borderModeVertical_1grno_13","borderModeNone":"_borderModeNone_1grno_18"};
|
|
5
|
+
|
|
6
|
+
export { styles as default };
|
|
7
|
+
//# sourceMappingURL=Container.module.scss.js.map
|
package/dist/components/DataGrid/components/GridContainer/Container/Container.module.scss.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Container.module.scss.js","sources":["../../../../../../src/components/DataGrid/components/GridContainer/Container/Container.module.scss"],"sourcesContent":[".container {\n width: 100%;\n position: relative;\n border-style: solid;\n border-color: var(--colors-neutral-grey-dark);\n\n overflow-x: auto;\n overflow-y: hidden;\n\n &.borderModeFull {\n border-width: var(--sizes-line);\n border-radius: var(--radius-base);\n }\n\n &.borderModeVertical {\n border-width: var(--sizes-none);\n border-left-width: var(--sizes-line);\n border-right-width: var(--sizes-line);\n }\n\n &.borderModeNone {\n border-width: var(--sizes-none);\n }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,wjBAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,gBAAA,CAAA,yBAAA,CAAA,oBAAA,CAAA,8BAAA,CAAA,gBAAA,CAAA,0BAAA;;;;"}
|
|
@@ -4,7 +4,7 @@ var React = require('react');
|
|
|
4
4
|
var index = require('../../../../theme/index.cjs');
|
|
5
5
|
var buildClassnames = require('../../../../utils/buildClassnames.cjs');
|
|
6
6
|
var Container = require('./Container/Container.cjs');
|
|
7
|
-
var GridContainer_module = require('./GridContainer.module.
|
|
7
|
+
var GridContainer_module = require('./GridContainer.module.scss.cjs');
|
|
8
8
|
var usePinnedColumnLayout = require('../../hooks/usePinnedColumnLayout.cjs');
|
|
9
9
|
|
|
10
10
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GridContainer.cjs","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.tsx"],"sourcesContent":["import React, { RefObject, CSSProperties, ReactNode, AriaAttributes } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { theme } from 'Theme';\nimport { SizeScale } from 'Theme/modules/sizes';\n\nimport { BorderMode } from '../../types/enums';\nimport { AriaRoles } from '../../types';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\n\nimport { Container } from './Container';\n\nimport
|
|
1
|
+
{"version":3,"file":"GridContainer.cjs","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.tsx"],"sourcesContent":["import React, { RefObject, CSSProperties, ReactNode, AriaAttributes } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { theme } from 'Theme';\nimport { SizeScale } from 'Theme/modules/sizes';\n\nimport { BorderMode } from '../../types/enums';\nimport { AriaRoles } from '../../types';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\n\nimport { Container } from './Container';\n\nimport styles from './GridContainer.module.scss';\nimport { usePinnedColumnLayout } from '../../hooks';\n\ntype GridContainerProps = Pick<AriaAttributes, 'aria-label'> & {\n /**\n * Reference to be used for the outer container element.\n */\n containerRef?: RefObject<HTMLDivElement>;\n\n /**\n * Reference to be used for the table element.\n */\n tableRef?: RefObject<HTMLTableElement>;\n\n /**\n * Border mode.\n */\n borderMode: BorderMode;\n\n /**\n * Additional container styles.\n */\n containerStyles?: CSSProperties;\n\n /**\n * ARIA roles used in the grid.\n */\n ariaRoles: AriaRoles;\n\n /**\n * Whether resizeable columns are enabled or not.\n */\n enableResizeableColumns: boolean;\n\n /**\n * Density of the grid.\n */\n density: keyof SizeScale;\n\n /**\n * The TanStack Table instance.\n */\n table: Table<any>;\n\n /**\n * Child elements (table contents).\n */\n children: ReactNode;\n};\n\nconst gridContainerClassname = buildClassnames([styles.dataGridStyle, 'data-grid']);\n\n/**\n * The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies\n * styling and sets table-specific CSS variables (such as density).\n */\nexport const GridContainer = ({\n containerRef,\n tableRef,\n borderMode,\n containerStyles,\n ariaRoles,\n enableResizeableColumns,\n density,\n table,\n children,\n 'aria-label': ariaLabel,\n}: GridContainerProps) => {\n const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n\n return (\n <Container ref={containerRef} borderMode={borderMode} style={containerStyles}>\n <table\n ref={tableRef}\n className={gridContainerClassname}\n role={ariaRoles.table}\n style={\n {\n tableLayout: enableResizeableColumns ? 'fixed' : 'auto',\n '--density': theme.sizes[density],\n ...pinnedColumnLayoutStyles,\n } as CSSProperties\n }\n aria-colcount={table.getFlatHeaders().length}\n aria-rowcount={table.getRowCount()}\n aria-label={ariaLabel}\n >\n {children}\n </table>\n </Container>\n );\n};\n"],"names":["buildClassnames","styles","usePinnedColumnLayout","React","Container","theme"],"mappings":";;;;;;;;;;;;;AA8DA,MAAM,sBAAsB,GAAGA,+BAAe,CAAC,CAACC,oBAAM,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;AAEnF;;;AAGG;AACI,MAAM,aAAa,GAAG,CAAC,EAC5B,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,eAAe,EACf,SAAS,EACT,uBAAuB,EACvB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,YAAY,EAAE,SAAS,GACJ,KAAI;IACvB,MAAM,EAAE,wBAAwB,EAAE,GAAGC,2CAAqB,CAAC,EAAE,KAAK,EAAE,CAAC;AAErE,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,mBAAS,EAAA,EAAC,GAAG,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,eAAe,EAAA;AAC1E,QAAAD,sBAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,sBAAsB,EACjC,IAAI,EAAE,SAAS,CAAC,KAAK,EACrB,KAAK,EACH;gBACE,WAAW,EAAE,uBAAuB,GAAG,OAAO,GAAG,MAAM;AACvD,gBAAA,WAAW,EAAEE,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC;AACjC,gBAAA,GAAG,wBAAwB;AACX,aAAA,EAAA,eAAA,EAEL,KAAK,CAAC,cAAc,EAAE,CAAC,MAAM,mBAC7B,KAAK,CAAC,WAAW,EAAE,gBACtB,SAAS,EAAA,EAEpB,QAAQ,CACH,CACE;AAEhB;;;;"}
|
|
@@ -2,10 +2,10 @@ import React__default from 'react';
|
|
|
2
2
|
import { theme } from '../../../../theme/index.js';
|
|
3
3
|
import { buildClassnames } from '../../../../utils/buildClassnames.js';
|
|
4
4
|
import { Container } from './Container/Container.js';
|
|
5
|
-
import
|
|
5
|
+
import styles from './GridContainer.module.scss.js';
|
|
6
6
|
import { usePinnedColumnLayout } from '../../hooks/usePinnedColumnLayout.js';
|
|
7
7
|
|
|
8
|
-
const gridContainerClassname = buildClassnames([dataGridStyle, 'data-grid']);
|
|
8
|
+
const gridContainerClassname = buildClassnames([styles.dataGridStyle, 'data-grid']);
|
|
9
9
|
/**
|
|
10
10
|
* The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies
|
|
11
11
|
* styling and sets table-specific CSS variables (such as density).
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GridContainer.js","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.tsx"],"sourcesContent":["import React, { RefObject, CSSProperties, ReactNode, AriaAttributes } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { theme } from 'Theme';\nimport { SizeScale } from 'Theme/modules/sizes';\n\nimport { BorderMode } from '../../types/enums';\nimport { AriaRoles } from '../../types';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\n\nimport { Container } from './Container';\n\nimport
|
|
1
|
+
{"version":3,"file":"GridContainer.js","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.tsx"],"sourcesContent":["import React, { RefObject, CSSProperties, ReactNode, AriaAttributes } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { theme } from 'Theme';\nimport { SizeScale } from 'Theme/modules/sizes';\n\nimport { BorderMode } from '../../types/enums';\nimport { AriaRoles } from '../../types';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\n\nimport { Container } from './Container';\n\nimport styles from './GridContainer.module.scss';\nimport { usePinnedColumnLayout } from '../../hooks';\n\ntype GridContainerProps = Pick<AriaAttributes, 'aria-label'> & {\n /**\n * Reference to be used for the outer container element.\n */\n containerRef?: RefObject<HTMLDivElement>;\n\n /**\n * Reference to be used for the table element.\n */\n tableRef?: RefObject<HTMLTableElement>;\n\n /**\n * Border mode.\n */\n borderMode: BorderMode;\n\n /**\n * Additional container styles.\n */\n containerStyles?: CSSProperties;\n\n /**\n * ARIA roles used in the grid.\n */\n ariaRoles: AriaRoles;\n\n /**\n * Whether resizeable columns are enabled or not.\n */\n enableResizeableColumns: boolean;\n\n /**\n * Density of the grid.\n */\n density: keyof SizeScale;\n\n /**\n * The TanStack Table instance.\n */\n table: Table<any>;\n\n /**\n * Child elements (table contents).\n */\n children: ReactNode;\n};\n\nconst gridContainerClassname = buildClassnames([styles.dataGridStyle, 'data-grid']);\n\n/**\n * The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies\n * styling and sets table-specific CSS variables (such as density).\n */\nexport const GridContainer = ({\n containerRef,\n tableRef,\n borderMode,\n containerStyles,\n ariaRoles,\n enableResizeableColumns,\n density,\n table,\n children,\n 'aria-label': ariaLabel,\n}: GridContainerProps) => {\n const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n\n return (\n <Container ref={containerRef} borderMode={borderMode} style={containerStyles}>\n <table\n ref={tableRef}\n className={gridContainerClassname}\n role={ariaRoles.table}\n style={\n {\n tableLayout: enableResizeableColumns ? 'fixed' : 'auto',\n '--density': theme.sizes[density],\n ...pinnedColumnLayoutStyles,\n } as CSSProperties\n }\n aria-colcount={table.getFlatHeaders().length}\n aria-rowcount={table.getRowCount()}\n aria-label={ariaLabel}\n >\n {children}\n </table>\n </Container>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;AA8DA,MAAM,sBAAsB,GAAG,eAAe,CAAC,CAAC,MAAM,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;AAEnF;;;AAGG;AACI,MAAM,aAAa,GAAG,CAAC,EAC5B,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,eAAe,EACf,SAAS,EACT,uBAAuB,EACvB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,YAAY,EAAE,SAAS,GACJ,KAAI;IACvB,MAAM,EAAE,wBAAwB,EAAE,GAAG,qBAAqB,CAAC,EAAE,KAAK,EAAE,CAAC;AAErE,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,GAAG,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,eAAe,EAAA;AAC1E,QAAAA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,sBAAsB,EACjC,IAAI,EAAE,SAAS,CAAC,KAAK,EACrB,KAAK,EACH;gBACE,WAAW,EAAE,uBAAuB,GAAG,OAAO,GAAG,MAAM;AACvD,gBAAA,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC;AACjC,gBAAA,GAAG,wBAAwB;AACX,aAAA,EAAA,eAAA,EAEL,KAAK,CAAC,cAAc,EAAE,CAAC,MAAM,mBAC7B,KAAK,CAAC,WAAW,EAAE,gBACtB,SAAS,EAAA,EAEpB,QAAQ,CACH,CACE;AAEhB;;;;"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var ___$insertStyle = require('../../../../_virtual/____insertStyle.cjs');
|
|
4
|
+
|
|
5
|
+
___$insertStyle("._dataGridStyle_1irlp_1 {\n position: relative;\n border-spacing: var(--sizes-none);\n box-sizing: border-box;\n inline-size: 100%;\n}");
|
|
6
|
+
var styles = {"dataGridStyle":"_dataGridStyle_1irlp_1"};
|
|
7
|
+
|
|
8
|
+
module.exports = styles;
|
|
9
|
+
//# sourceMappingURL=GridContainer.module.scss.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GridContainer.module.scss.cjs","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.module.scss"],"sourcesContent":[".dataGridStyle {\n position: relative;\n\n border-spacing: var(--sizes-none);\n box-sizing: border-box;\n\n inline-size: 100%;\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,4IAAA;AAEA,aAAA,CAAA,eAAA,CAAA,wBAAA;;;;"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import insertStyle from '../../../../_virtual/____insertStyle.js';
|
|
2
|
+
|
|
3
|
+
insertStyle("._dataGridStyle_1irlp_1 {\n position: relative;\n border-spacing: var(--sizes-none);\n box-sizing: border-box;\n inline-size: 100%;\n}");
|
|
4
|
+
var styles = {"dataGridStyle":"_dataGridStyle_1irlp_1"};
|
|
5
|
+
|
|
6
|
+
export { styles as default };
|
|
7
|
+
//# sourceMappingURL=GridContainer.module.scss.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GridContainer.module.scss.js","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.module.scss"],"sourcesContent":[".dataGridStyle {\n position: relative;\n\n border-spacing: var(--sizes-none);\n box-sizing: border-box;\n\n inline-size: 100%;\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,4IAAA;AAEA,aAAA,CAAA,eAAA,CAAA,wBAAA;;;;"}
|
|
@@ -7,7 +7,7 @@ require('uid/secure');
|
|
|
7
7
|
var isLastColumn = require('../../../utils/isLastColumn.cjs');
|
|
8
8
|
var usePinnedColumnStyles = require('../../../hooks/usePinnedColumnStyles.cjs');
|
|
9
9
|
var Resizer = require('../Resizer/Resizer.cjs');
|
|
10
|
-
var HeaderCell_module = require('./HeaderCell.module.
|
|
10
|
+
var HeaderCell_module = require('./HeaderCell.module.scss.cjs');
|
|
11
11
|
var SortIcon = require('./SortIcon/SortIcon.cjs');
|
|
12
12
|
|
|
13
13
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|