@salt-ds/data-grid 1.0.0 → 1.0.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/dist-cjs/packages/grid/src/BaseCell.js +2 -6
- package/dist-cjs/packages/grid/src/BaseCell.js.map +1 -1
- package/dist-cjs/packages/grid/src/Grid.js +14 -16
- package/dist-cjs/packages/grid/src/Grid.js.map +1 -1
- package/dist-cjs/packages/grid/src/GroupHeaderCell.js +2 -6
- package/dist-cjs/packages/grid/src/GroupHeaderCell.js.map +1 -1
- package/dist-cjs/packages/grid/src/HeaderCell.js +4 -8
- package/dist-cjs/packages/grid/src/HeaderCell.js.map +1 -1
- package/dist-cjs/packages/grid/src/RowSelectionRadioHeaderCell.js +2 -6
- package/dist-cjs/packages/grid/src/RowSelectionRadioHeaderCell.js.map +1 -1
- package/dist-cjs/packages/grid/src/internal/Cell.js +2 -6
- package/dist-cjs/packages/grid/src/internal/Cell.js.map +1 -1
- package/dist-cjs/packages/grid/src/internal/DefaultCellValue.js +2 -6
- package/dist-cjs/packages/grid/src/internal/DefaultCellValue.js.map +1 -1
- package/dist-cjs/packages/grid/src/internal/LeftPart.js +2 -6
- package/dist-cjs/packages/grid/src/internal/LeftPart.js.map +1 -1
- package/dist-cjs/packages/grid/src/internal/RightPart.js +2 -6
- package/dist-cjs/packages/grid/src/internal/RightPart.js.map +1 -1
- package/dist-cjs/packages/grid/src/internal/Scrollable.js +27 -21
- package/dist-cjs/packages/grid/src/internal/Scrollable.js.map +1 -1
- package/dist-cjs/packages/grid/src/internal/TableRow.js +3 -6
- package/dist-cjs/packages/grid/src/internal/TableRow.js.map +1 -1
- package/dist-cjs/packages/grid/src/internal/TopLeftPart.js +2 -6
- package/dist-cjs/packages/grid/src/internal/TopLeftPart.js.map +1 -1
- package/dist-cjs/packages/grid/src/internal/TopPart.js +2 -6
- package/dist-cjs/packages/grid/src/internal/TopPart.js.map +1 -1
- package/dist-cjs/packages/grid/src/internal/TopRightPart.js +2 -6
- package/dist-cjs/packages/grid/src/internal/TopRightPart.js.map +1 -1
- package/dist-es/packages/grid/src/BaseCell.js +2 -2
- package/dist-es/packages/grid/src/BaseCell.js.map +1 -1
- package/dist-es/packages/grid/src/Grid.js +14 -12
- package/dist-es/packages/grid/src/Grid.js.map +1 -1
- package/dist-es/packages/grid/src/GroupHeaderCell.js +2 -2
- package/dist-es/packages/grid/src/GroupHeaderCell.js.map +1 -1
- package/dist-es/packages/grid/src/HeaderCell.js +6 -6
- package/dist-es/packages/grid/src/HeaderCell.js.map +1 -1
- package/dist-es/packages/grid/src/RowSelectionRadioHeaderCell.js +2 -2
- package/dist-es/packages/grid/src/RowSelectionRadioHeaderCell.js.map +1 -1
- package/dist-es/packages/grid/src/internal/Cell.js +2 -2
- package/dist-es/packages/grid/src/internal/Cell.js.map +1 -1
- package/dist-es/packages/grid/src/internal/DefaultCellValue.js +2 -2
- package/dist-es/packages/grid/src/internal/DefaultCellValue.js.map +1 -1
- package/dist-es/packages/grid/src/internal/LeftPart.js +2 -2
- package/dist-es/packages/grid/src/internal/LeftPart.js.map +1 -1
- package/dist-es/packages/grid/src/internal/RightPart.js +2 -2
- package/dist-es/packages/grid/src/internal/RightPart.js.map +1 -1
- package/dist-es/packages/grid/src/internal/Scrollable.js +27 -21
- package/dist-es/packages/grid/src/internal/Scrollable.js.map +1 -1
- package/dist-es/packages/grid/src/internal/TableRow.js +3 -2
- package/dist-es/packages/grid/src/internal/TableRow.js.map +1 -1
- package/dist-es/packages/grid/src/internal/TopLeftPart.js +2 -2
- package/dist-es/packages/grid/src/internal/TopLeftPart.js.map +1 -1
- package/dist-es/packages/grid/src/internal/TopPart.js +2 -2
- package/dist-es/packages/grid/src/internal/TopPart.js.map +1 -1
- package/dist-es/packages/grid/src/internal/TopRightPart.js +2 -2
- package/dist-es/packages/grid/src/internal/TopRightPart.js.map +1 -1
- package/dist-types/internal/Scrollable.d.ts +6 -1
- package/package.json +4 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Cell.js","sources":["../src/internal/Cell.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { forwardRef, HTMLAttributes } from \"react\";\nimport
|
|
1
|
+
{"version":3,"file":"Cell.js","sources":["../src/internal/Cell.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { forwardRef, HTMLAttributes } from \"react\";\nimport { clsx } from \"clsx\";\nimport \"./Cell.css\";\nimport { ColumnSeparatorType } from \"../Grid\";\n\nexport interface CellProps extends HTMLAttributes<HTMLTableCellElement> {\n isSelected?: boolean;\n isEditable?: boolean;\n separator?: ColumnSeparatorType;\n}\n\nconst withBaseName = makePrefixer(\"saltGridCell\");\n\nexport const Cell = forwardRef<HTMLTableCellElement, CellProps>(\n function CellFrame(props, ref) {\n const {\n children,\n separator,\n isSelected,\n isEditable,\n className,\n ...tdProps\n } = props;\n return (\n <td\n ref={ref}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"selected\")]: isSelected,\n [withBaseName(\"editable\")]: isEditable,\n [withBaseName(\"regularSeparator\")]:\n separator === \"regular\" || separator === \"groupEdge\",\n [withBaseName(\"pinnedSeparator\")]: separator === \"pinned\",\n },\n className\n )}\n {...tdProps}\n >\n <div className={withBaseName(\"body\")}>{props.children}</div>\n <div className={withBaseName(\"columnSeparator\")} />\n <div className={withBaseName(\"rowSeparator\")} />\n <div className={withBaseName(\"topSeparator\")} />\n </td>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","jsxs","clsx","jsx"],"mappings":";;;;;;;;;;AAYA,MAAM,YAAA,GAAeA,kBAAa,cAAc,CAAA,CAAA;AAEzC,MAAM,IAAO,GAAAC,gBAAA;AAAA,EAClB,SAAS,SAAU,CAAA,KAAA,EAAO,GAAK,EAAA;AAC7B,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,MACG,GAAA,OAAA;AAAA,KACD,GAAA,KAAA,CAAA;AACJ,IAAA,uBACGC,eAAA,CAAA,IAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,UAAA;AAAA,UAC5B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,UAAA;AAAA,UAC5B,CAAC,YAAa,CAAA,kBAAkB,CAC9B,GAAA,SAAA,KAAc,aAAa,SAAc,KAAA,WAAA;AAAA,UAC3C,CAAC,YAAA,CAAa,iBAAiB,CAAA,GAAI,SAAc,KAAA,QAAA;AAAA,SACnD;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACC,GAAG,OAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAACC,cAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,UAAI,QAAM,EAAA,KAAA,CAAA,QAAA;AAAA,SAAS,CAAA;AAAA,wBACrDA,cAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,SAAG,CAAA;AAAA,wBAChDA,cAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,SAAG,CAAA;AAAA,wBAC7CA,cAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,SAAG,CAAA;AAAA,OAAA;AAAA,KAChD,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -4,18 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
var core = require('@salt-ds/core');
|
|
7
|
-
var
|
|
7
|
+
var clsx = require('clsx');
|
|
8
8
|
require('./DefaultCellValue.css.js');
|
|
9
9
|
|
|
10
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
11
|
-
|
|
12
|
-
var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
|
|
13
|
-
|
|
14
10
|
const withBaseName = core.makePrefixer("saltGridDefaultCellValue");
|
|
15
11
|
function DefaultCellValue(props) {
|
|
16
12
|
const { value } = props;
|
|
17
13
|
return /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
18
|
-
className:
|
|
14
|
+
className: clsx.clsx(withBaseName(), {
|
|
19
15
|
[withBaseName("alignRight")]: props.column.info.props.align === "right"
|
|
20
16
|
}),
|
|
21
17
|
children: value
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DefaultCellValue.js","sources":["../src/internal/DefaultCellValue.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport { GridCellValueProps } from \"../GridColumn\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport
|
|
1
|
+
{"version":3,"file":"DefaultCellValue.js","sources":["../src/internal/DefaultCellValue.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport { GridCellValueProps } from \"../GridColumn\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport \"./DefaultCellValue.css\";\n\nconst withBaseName = makePrefixer(\"saltGridDefaultCellValue\");\n\n// Default component for cell value wrappers. Rendered as a child of cell\n// components (<td>s)\nexport function DefaultCellValue<T>(props: GridCellValueProps<T>) {\n const { value } = props;\n return (\n <div\n className={clsx(withBaseName(), {\n [withBaseName(\"alignRight\")]: props.column.info.props.align === \"right\",\n })}\n >\n {value as ReactNode}\n </div>\n );\n}\n"],"names":["makePrefixer","jsx","clsx"],"mappings":";;;;;;;;;AAMA,MAAM,YAAA,GAAeA,kBAAa,0BAA0B,CAAA,CAAA;AAIrD,SAAS,iBAAoB,KAA8B,EAAA;AAChE,EAAM,MAAA,EAAE,OAAU,GAAA,KAAA,CAAA;AAClB,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAA,EAAWC,SAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,MAC9B,CAAC,aAAa,YAAY,CAAA,GAAI,MAAM,MAAO,CAAA,IAAA,CAAK,MAAM,KAAU,KAAA,OAAA;AAAA,KACjE,CAAA;AAAA,IAEA,QAAA,EAAA,KAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -3,17 +3,13 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var
|
|
6
|
+
var clsx = require('clsx');
|
|
7
7
|
var TableColGroup = require('./TableColGroup.js');
|
|
8
8
|
var TableBody = require('./TableBody.js');
|
|
9
9
|
require('./LeftPart.css.js');
|
|
10
10
|
var core = require('@salt-ds/core');
|
|
11
11
|
var gridHooks = require('./gridHooks.js');
|
|
12
12
|
|
|
13
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
14
|
-
|
|
15
|
-
var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
|
|
16
|
-
|
|
17
13
|
const withBaseName = core.makePrefixer("saltGridLeftPart");
|
|
18
14
|
function LeftPart(props) {
|
|
19
15
|
const {
|
|
@@ -32,7 +28,7 @@ function LeftPart(props) {
|
|
|
32
28
|
}
|
|
33
29
|
return /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
34
30
|
ref: leftRef,
|
|
35
|
-
className:
|
|
31
|
+
className: clsx.clsx(withBaseName(), {
|
|
36
32
|
[withBaseName("rightShadow")]: rightShadow
|
|
37
33
|
}),
|
|
38
34
|
children: /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LeftPart.js","sources":["../src/internal/LeftPart.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"LeftPart.js","sources":["../src/internal/LeftPart.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { TableColGroup } from \"./TableColGroup\";\nimport { TableBody } from \"./TableBody\";\nimport { RefObject } from \"react\";\nimport \"./LeftPart.css\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { GridColumnModel, GridRowModel } from \"../Grid\";\nimport { useActiveOnWheel } from \"./gridHooks\";\n\nconst withBaseName = makePrefixer(\"saltGridLeftPart\");\n\nexport interface LeftPartProps<T> {\n leftRef: RefObject<HTMLDivElement>;\n onWheel: EventListener;\n rightShadow?: boolean;\n columns: GridColumnModel<T>[];\n rows: GridRowModel<T>[];\n hoverOverRowKey?: string;\n setHoverOverRowKey: (key: string | undefined) => void;\n zebra?: boolean;\n}\n\nexport function LeftPart<T>(props: LeftPartProps<T>) {\n const {\n leftRef,\n onWheel,\n rightShadow,\n columns,\n rows,\n hoverOverRowKey,\n setHoverOverRowKey,\n zebra,\n } = props;\n\n const tableRef = useActiveOnWheel(onWheel);\n\n if (columns.length === 0) {\n return null;\n }\n\n return (\n <div\n ref={leftRef}\n className={clsx(withBaseName(), {\n [withBaseName(\"rightShadow\")]: rightShadow,\n })}\n >\n <div className={withBaseName(\"space\")} data-testid=\"grid-left-part\">\n <table ref={tableRef} role=\"presentation\">\n <TableColGroup columns={columns} />\n <TableBody\n columns={columns}\n rows={rows}\n hoverRowKey={hoverOverRowKey}\n setHoverRowKey={setHoverOverRowKey}\n zebra={zebra}\n />\n </table>\n </div>\n </div>\n );\n}\n"],"names":["makePrefixer","useActiveOnWheel","jsx","clsx","jsxs","TableColGroup","TableBody"],"mappings":";;;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,kBAAa,kBAAkB,CAAA,CAAA;AAa7C,SAAS,SAAY,KAAyB,EAAA;AACnD,EAAM,MAAA;AAAA,IACJ,OAAA;AAAA,IACA,OAAA;AAAA,IACA,WAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,eAAA;AAAA,IACA,kBAAA;AAAA,IACA,KAAA;AAAA,GACE,GAAA,KAAA,CAAA;AAEJ,EAAM,MAAA,QAAA,GAAWC,2BAAiB,OAAO,CAAA,CAAA;AAEzC,EAAI,IAAA,OAAA,CAAQ,WAAW,CAAG,EAAA;AACxB,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,GAAK,EAAA,OAAA;AAAA,IACL,SAAA,EAAWC,SAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,MAC9B,CAAC,YAAa,CAAA,aAAa,CAAI,GAAA,WAAA;AAAA,KAChC,CAAA;AAAA,IAED,QAAC,kBAAAD,cAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,MAAG,aAAY,EAAA,gBAAA;AAAA,MACjD,QAAC,kBAAAE,eAAA,CAAA,OAAA,EAAA;AAAA,QAAM,GAAK,EAAA,QAAA;AAAA,QAAU,IAAK,EAAA,cAAA;AAAA,QACzB,QAAA,EAAA;AAAA,0BAACF,cAAA,CAAAG,2BAAA,EAAA;AAAA,YAAc,OAAA;AAAA,WAAkB,CAAA;AAAA,0BAChCH,cAAA,CAAAI,mBAAA,EAAA;AAAA,YACC,OAAA;AAAA,YACA,IAAA;AAAA,YACA,WAAa,EAAA,eAAA;AAAA,YACb,cAAgB,EAAA,kBAAA;AAAA,YAChB,KAAA;AAAA,WACF,CAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -3,17 +3,13 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var
|
|
6
|
+
var clsx = require('clsx');
|
|
7
7
|
var TableColGroup = require('./TableColGroup.js');
|
|
8
8
|
var TableBody = require('./TableBody.js');
|
|
9
9
|
require('./RightPart.css.js');
|
|
10
10
|
var core = require('@salt-ds/core');
|
|
11
11
|
var gridHooks = require('./gridHooks.js');
|
|
12
12
|
|
|
13
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
14
|
-
|
|
15
|
-
var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
|
|
16
|
-
|
|
17
13
|
const withBaseName = core.makePrefixer("saltGridRightPart");
|
|
18
14
|
function RightPart(props) {
|
|
19
15
|
const {
|
|
@@ -32,7 +28,7 @@ function RightPart(props) {
|
|
|
32
28
|
}
|
|
33
29
|
return /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
34
30
|
ref: rightRef,
|
|
35
|
-
className:
|
|
31
|
+
className: clsx.clsx(withBaseName(), {
|
|
36
32
|
[withBaseName("leftShadow")]: leftShadow
|
|
37
33
|
}),
|
|
38
34
|
"data-testid": "grid-right-part",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RightPart.js","sources":["../src/internal/RightPart.tsx"],"sourcesContent":["import { RefObject } from \"react\";\nimport
|
|
1
|
+
{"version":3,"file":"RightPart.js","sources":["../src/internal/RightPart.tsx"],"sourcesContent":["import { RefObject } from \"react\";\nimport { clsx } from \"clsx\";\nimport { TableColGroup } from \"./TableColGroup\";\nimport { TableBody } from \"./TableBody\";\nimport \"./RightPart.css\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { GridColumnModel, GridRowModel } from \"../Grid\";\nimport { useActiveOnWheel } from \"./gridHooks\";\n\nconst withBaseName = makePrefixer(\"saltGridRightPart\");\n\nexport interface RightPartProps<T> {\n rightRef: RefObject<HTMLDivElement>;\n onWheel: EventListener;\n leftShadow?: boolean;\n columns: GridColumnModel<T>[];\n rows: GridRowModel<T>[];\n hoverOverRowKey?: string;\n setHoverOverRowKey: (key: string | undefined) => void;\n zebra?: boolean;\n}\n\nexport function RightPart<T>(props: RightPartProps<T>) {\n const {\n rightRef,\n onWheel,\n columns,\n leftShadow,\n rows,\n hoverOverRowKey,\n setHoverOverRowKey,\n zebra,\n } = props;\n\n const tableRef = useActiveOnWheel(onWheel);\n\n if (columns.length === 0) {\n return null;\n }\n\n return (\n <div\n ref={rightRef}\n className={clsx(withBaseName(), {\n [withBaseName(\"leftShadow\")]: leftShadow,\n })}\n data-testid=\"grid-right-part\"\n >\n <div className={withBaseName(\"space\")}>\n <table ref={tableRef} role=\"presentation\">\n <TableColGroup columns={columns} />\n <TableBody\n columns={columns}\n rows={rows}\n hoverRowKey={hoverOverRowKey}\n setHoverRowKey={setHoverOverRowKey}\n zebra={zebra}\n />\n </table>\n </div>\n </div>\n );\n}\n"],"names":["makePrefixer","useActiveOnWheel","jsx","clsx","jsxs","TableColGroup","TableBody"],"mappings":";;;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA,CAAA;AAa9C,SAAS,UAAa,KAA0B,EAAA;AACrD,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,UAAA;AAAA,IACA,IAAA;AAAA,IACA,eAAA;AAAA,IACA,kBAAA;AAAA,IACA,KAAA;AAAA,GACE,GAAA,KAAA,CAAA;AAEJ,EAAM,MAAA,QAAA,GAAWC,2BAAiB,OAAO,CAAA,CAAA;AAEzC,EAAI,IAAA,OAAA,CAAQ,WAAW,CAAG,EAAA;AACxB,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,GAAK,EAAA,QAAA;AAAA,IACL,SAAA,EAAWC,SAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,MAC9B,CAAC,YAAa,CAAA,YAAY,CAAI,GAAA,UAAA;AAAA,KAC/B,CAAA;AAAA,IACD,aAAY,EAAA,iBAAA;AAAA,IAEZ,QAAC,kBAAAD,cAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,MAClC,QAAC,kBAAAE,eAAA,CAAA,OAAA,EAAA;AAAA,QAAM,GAAK,EAAA,QAAA;AAAA,QAAU,IAAK,EAAA,cAAA;AAAA,QACzB,QAAA,EAAA;AAAA,0BAACF,cAAA,CAAAG,2BAAA,EAAA;AAAA,YAAc,OAAA;AAAA,WAAkB,CAAA;AAAA,0BAChCH,cAAA,CAAAI,mBAAA,EAAA;AAAA,YACC,OAAA;AAAA,YACA,IAAA;AAAA,YACA,WAAa,EAAA,eAAA;AAAA,YACb,cAAgB,EAAA,kBAAA;AAAA,YAChB,KAAA;AAAA,WACF,CAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -16,50 +16,61 @@ function Scrollable(props) {
|
|
|
16
16
|
leftRef,
|
|
17
17
|
rightRef,
|
|
18
18
|
bottomRef,
|
|
19
|
-
resizeClient
|
|
19
|
+
resizeClient,
|
|
20
|
+
scrollLeft,
|
|
21
|
+
scrollTop,
|
|
22
|
+
scrollSource
|
|
20
23
|
} = props;
|
|
21
24
|
const onScroll = (event) => {
|
|
22
25
|
if (!scrollerRef.current) {
|
|
23
26
|
return;
|
|
24
27
|
}
|
|
25
|
-
const { scrollLeft, scrollTop } = scrollerRef.current;
|
|
28
|
+
const { scrollLeft: scrollLeft2, scrollTop: scrollTop2 } = scrollerRef.current;
|
|
26
29
|
const top = topRef.current;
|
|
27
30
|
const bottom = bottomRef.current;
|
|
28
31
|
if (top) {
|
|
29
|
-
top.scrollLeft =
|
|
32
|
+
top.scrollLeft = scrollLeft2;
|
|
30
33
|
}
|
|
31
34
|
if (bottom) {
|
|
32
|
-
bottom.scrollLeft =
|
|
35
|
+
bottom.scrollLeft = scrollLeft2;
|
|
33
36
|
}
|
|
34
37
|
const left = leftRef.current;
|
|
35
38
|
if (left) {
|
|
36
|
-
left.scrollTop =
|
|
39
|
+
left.scrollTop = scrollTop2;
|
|
37
40
|
}
|
|
38
41
|
const right = rightRef.current;
|
|
39
42
|
if (right) {
|
|
40
|
-
right.scrollTop =
|
|
43
|
+
right.scrollTop = scrollTop2;
|
|
41
44
|
}
|
|
42
45
|
const middle = middleRef.current;
|
|
43
46
|
if (middle) {
|
|
44
|
-
middle.scrollTop =
|
|
45
|
-
middle.scrollLeft =
|
|
47
|
+
middle.scrollTop = scrollTop2;
|
|
48
|
+
middle.scrollLeft = scrollLeft2;
|
|
46
49
|
}
|
|
47
|
-
props.scroll(
|
|
50
|
+
props.scroll(scrollLeft2, scrollTop2, "user");
|
|
48
51
|
};
|
|
49
52
|
react.useEffect(() => {
|
|
50
53
|
if (!scrollerRef.current) {
|
|
51
54
|
return;
|
|
52
55
|
}
|
|
53
|
-
const
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
56
|
+
const resizeObserver = new ResizeObserver(([entry]) => {
|
|
57
|
+
const { offsetWidth, offsetHeight, clientWidth, clientHeight } = entry.target;
|
|
58
|
+
const scrollBarWidth = offsetWidth - clientWidth;
|
|
59
|
+
const scrollBarHeight = offsetHeight - clientHeight;
|
|
60
|
+
resizeClient({
|
|
61
|
+
clientWidth,
|
|
62
|
+
clientHeight,
|
|
63
|
+
scrollBarWidth,
|
|
64
|
+
scrollBarHeight
|
|
65
|
+
});
|
|
66
|
+
});
|
|
67
|
+
resizeObserver.observe(scrollerRef.current);
|
|
68
|
+
return () => resizeObserver.disconnect();
|
|
69
|
+
}, [resizeClient, scrollerRef]);
|
|
58
70
|
react.useEffect(() => {
|
|
59
71
|
if (!scrollerRef.current) {
|
|
60
72
|
return;
|
|
61
73
|
}
|
|
62
|
-
const { scrollLeft, scrollTop, scrollSource } = props;
|
|
63
74
|
if (scrollSource === "table") {
|
|
64
75
|
if (scrollLeft !== scrollerRef.current.scrollLeft) {
|
|
65
76
|
scrollerRef.current.scrollLeft = scrollLeft;
|
|
@@ -68,12 +79,7 @@ function Scrollable(props) {
|
|
|
68
79
|
scrollerRef.current.scrollTop = scrollTop;
|
|
69
80
|
}
|
|
70
81
|
}
|
|
71
|
-
}, [
|
|
72
|
-
props.scrollLeft,
|
|
73
|
-
props.scrollTop,
|
|
74
|
-
props.scrollSource,
|
|
75
|
-
scrollerRef.current
|
|
76
|
-
]);
|
|
82
|
+
}, [scrollLeft, scrollTop, scrollSource, scrollerRef]);
|
|
77
83
|
return /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
78
84
|
ref: scrollerRef,
|
|
79
85
|
className: withBaseName(),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Scrollable.js","sources":["../src/internal/Scrollable.tsx"],"sourcesContent":["import { RefObject, UIEventHandler, useEffect } from \"react\";\nimport \"./Scrollable.css\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nconst withBaseName = makePrefixer(\"saltGridScrollable\");\n\nexport interface ScrollableProps<T> {\n resizeClient: (\n clientWidth: number
|
|
1
|
+
{"version":3,"file":"Scrollable.js","sources":["../src/internal/Scrollable.tsx"],"sourcesContent":["import { RefObject, UIEventHandler, useEffect } from \"react\";\nimport \"./Scrollable.css\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nconst withBaseName = makePrefixer(\"saltGridScrollable\");\n\nexport interface ScrollableProps<T> {\n resizeClient: (params: {\n clientWidth: number;\n clientHeight: number;\n scrollBarWidth: number;\n scrollBarHeight: number;\n }) => void;\n\n scrollLeft: number;\n scrollTop: number;\n scrollSource: \"user\" | \"table\";\n scroll: (left?: number, top?: number, source?: \"user\" | \"table\") => void;\n\n scrollerRef: RefObject<HTMLDivElement>;\n middleRef: RefObject<HTMLDivElement>;\n topRef: RefObject<HTMLDivElement>;\n leftRef: RefObject<HTMLDivElement>;\n rightRef: RefObject<HTMLDivElement>;\n bottomRef: RefObject<HTMLDivElement>;\n}\n\n// Provides scrollbars for the grid. Synchronizes scrolling across all parts\n// (pinned and unpinned).\nexport function Scrollable<T>(props: ScrollableProps<T>) {\n const {\n scrollerRef,\n middleRef,\n topRef,\n leftRef,\n rightRef,\n bottomRef,\n resizeClient,\n scrollLeft,\n scrollTop,\n scrollSource,\n } = props;\n\n const onScroll: UIEventHandler<HTMLDivElement> = (event) => {\n if (!scrollerRef.current) {\n return;\n }\n const { scrollLeft, scrollTop } = scrollerRef.current;\n const top = topRef.current;\n const bottom = bottomRef.current;\n if (top) {\n top.scrollLeft = scrollLeft;\n }\n if (bottom) {\n bottom.scrollLeft = scrollLeft;\n }\n const left = leftRef.current;\n if (left) {\n left.scrollTop = scrollTop;\n }\n const right = rightRef.current;\n if (right) {\n right.scrollTop = scrollTop;\n }\n const middle = middleRef.current;\n if (middle) {\n middle.scrollTop = scrollTop;\n middle.scrollLeft = scrollLeft;\n }\n props.scroll(scrollLeft, scrollTop, \"user\");\n };\n\n useEffect(() => {\n if (!scrollerRef.current) {\n return;\n }\n const resizeObserver = new ResizeObserver(([entry]) => {\n const { offsetWidth, offsetHeight, clientWidth, clientHeight } =\n entry.target as HTMLDivElement;\n const scrollBarWidth = offsetWidth - clientWidth;\n const scrollBarHeight = offsetHeight - clientHeight;\n resizeClient({\n clientWidth,\n clientHeight,\n scrollBarWidth,\n scrollBarHeight,\n });\n });\n\n resizeObserver.observe(scrollerRef.current);\n return () => resizeObserver.disconnect();\n }, [resizeClient, scrollerRef]);\n\n useEffect(() => {\n if (!scrollerRef.current) {\n return;\n }\n if (scrollSource === \"table\") {\n if (scrollLeft !== scrollerRef.current.scrollLeft) {\n scrollerRef.current.scrollLeft = scrollLeft;\n }\n if (scrollTop !== scrollerRef.current.scrollTop) {\n scrollerRef.current.scrollTop = scrollTop;\n }\n }\n }, [scrollLeft, scrollTop, scrollSource, scrollerRef]);\n\n return (\n <div\n ref={scrollerRef}\n className={withBaseName()}\n onScroll={onScroll}\n data-testid=\"grid-scrollable\"\n >\n <div className={withBaseName(\"space\")} />\n </div>\n );\n}\n"],"names":["makePrefixer","scrollLeft","scrollTop","useEffect","jsx"],"mappings":"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"}
|
|
@@ -7,15 +7,11 @@ var react = require('react');
|
|
|
7
7
|
require('./TableRow.css.js');
|
|
8
8
|
var BaseCell = require('../BaseCell.js');
|
|
9
9
|
var core = require('@salt-ds/core');
|
|
10
|
-
var
|
|
10
|
+
var clsx = require('clsx');
|
|
11
11
|
var FakeCell = require('./FakeCell.js');
|
|
12
12
|
var DefaultCellValue = require('./DefaultCellValue.js');
|
|
13
13
|
var GridContext = require('../GridContext.js');
|
|
14
14
|
|
|
15
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
16
|
-
|
|
17
|
-
var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
|
|
18
|
-
|
|
19
15
|
const withBaseName = core.makePrefixer("saltGridTableRow");
|
|
20
16
|
function TableRow(props) {
|
|
21
17
|
const {
|
|
@@ -40,7 +36,8 @@ function TableRow(props) {
|
|
|
40
36
|
const ariaRowIndex = headerIsFocusable ? row.index + 2 : row.index + 1;
|
|
41
37
|
return /* @__PURE__ */ jsxRuntime.jsxs("tr", {
|
|
42
38
|
"aria-rowindex": ariaRowIndex,
|
|
43
|
-
|
|
39
|
+
"aria-selected": isSelected ? true : void 0,
|
|
40
|
+
className: clsx.clsx(withBaseName(), {
|
|
44
41
|
[withBaseName("zebra")]: zebra,
|
|
45
42
|
[withBaseName("hover")]: isHoverOver,
|
|
46
43
|
[withBaseName("selected")]: isSelected,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableRow.js","sources":["../src/internal/TableRow.tsx"],"sourcesContent":["import {\n Children,\n cloneElement,\n isValidElement,\n MouseEventHandler,\n} from \"react\";\nimport \"./TableRow.css\";\nimport { BaseCell } from \"../BaseCell\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport
|
|
1
|
+
{"version":3,"file":"TableRow.js","sources":["../src/internal/TableRow.tsx"],"sourcesContent":["import {\n Children,\n cloneElement,\n isValidElement,\n MouseEventHandler,\n} from \"react\";\nimport \"./TableRow.css\";\nimport { BaseCell } from \"../BaseCell\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { GridColumnModel, GridRowModel } from \"../Grid\";\nimport { FakeCell } from \"./FakeCell\";\nimport { DefaultCellValue } from \"./DefaultCellValue\";\nimport { useGridContext } from \"../GridContext\";\n\nconst withBaseName = makePrefixer(\"saltGridTableRow\");\n\nexport interface TableRowProps<T> {\n row: GridRowModel<T>;\n isSelected?: boolean; // Render selected background and the bottom border. Top border is rendered by the previous row (it gets isFollowedBySelected = true)\n isFollowedBySelected?: boolean; // Next row is selected. Render the bottom border.\n isHoverOver?: boolean;\n zebra?: boolean;\n columns: GridColumnModel<T>[];\n cursorColIdx?: number;\n onMouseEnter?: MouseEventHandler<HTMLTableRowElement>;\n onMouseLeave?: MouseEventHandler<HTMLTableRowElement>;\n gap?: number;\n editorColIdx?: number;\n isCellSelected?: (rowIdx: number, colIdx: number) => boolean;\n headerIsFocusable?: boolean;\n}\n\nexport function TableRow<T>(props: TableRowProps<T>) {\n const {\n row,\n isSelected,\n isFollowedBySelected,\n zebra,\n isHoverOver,\n columns,\n onMouseEnter,\n onMouseLeave,\n cursorColIdx,\n gap,\n editorColIdx,\n isCellSelected,\n headerIsFocusable,\n } = props;\n\n const grid = useGridContext();\n\n if (!row.key) {\n throw new Error(`Invalid row`);\n }\n\n const ariaRowIndex = headerIsFocusable ? row.index + 2 : row.index + 1;\n\n return (\n <tr\n aria-rowindex={ariaRowIndex}\n aria-selected={isSelected ? true : undefined}\n className={clsx(withBaseName(), {\n [withBaseName(\"zebra\")]: zebra,\n [withBaseName(\"hover\")]: isHoverOver,\n [withBaseName(\"selected\")]: isSelected,\n [withBaseName(\"followedBySelected\")]:\n isFollowedBySelected && !isSelected,\n [withBaseName(\"first\")]: row.index === 0,\n })}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n data-row-index={row.index}\n data-row-key={row.key}\n role=\"row\"\n >\n {columns.map((column, i) => {\n const colKey = column.info.props.id;\n const editorInfo = grid.getEditor(column.info.props.id);\n const isEditable = !!editorInfo;\n\n if (editorColIdx === column.index) {\n if (isEditable) {\n if (isValidElement(editorInfo.children)) {\n const editorElement = Children.only(editorInfo.children);\n return cloneElement(editorElement, {\n key: colKey,\n row,\n column,\n } as any);\n }\n }\n }\n\n const Cell = column.info.props.cellComponent || BaseCell;\n const CellValue =\n column.info.props.cellValueComponent || DefaultCellValue;\n const value =\n column.info.props.getValue && row.data\n ? column.info.props.getValue(row.data)\n : null;\n const isFocused = cursorColIdx === column.index;\n const isSelected =\n isCellSelected && isCellSelected(row.index, column.index);\n\n return (\n <Cell\n key={colKey}\n row={row}\n column={column}\n isFocused={isFocused}\n isSelected={isSelected}\n isEditable={isEditable}\n >\n <CellValue\n column={column}\n row={row}\n value={value}\n isFocused={isFocused}\n />\n </Cell>\n );\n })}\n {gap !== undefined && gap > 0 ? <FakeCell row={row} /> : null}\n </tr>\n );\n}\n"],"names":["makePrefixer","useGridContext","jsxs","clsx","isValidElement","Children","cloneElement","BaseCell","DefaultCellValue","isSelected","jsx","FakeCell"],"mappings":"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"}
|
|
@@ -8,13 +8,9 @@ var TableColGroup = require('./TableColGroup.js');
|
|
|
8
8
|
var HeaderRow = require('./HeaderRow.js');
|
|
9
9
|
var core = require('@salt-ds/core');
|
|
10
10
|
var GroupHeaderRow = require('./GroupHeaderRow.js');
|
|
11
|
-
var
|
|
11
|
+
var clsx = require('clsx');
|
|
12
12
|
var gridHooks = require('./gridHooks.js');
|
|
13
13
|
|
|
14
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
15
|
-
|
|
16
|
-
var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
|
|
17
|
-
|
|
18
14
|
const withBaseName = core.makePrefixer("saltGridTopLeftPart");
|
|
19
15
|
function TopLeftPart(props) {
|
|
20
16
|
const { onWheel, columns, columnGroups, rightShadow, bottomShadow } = props;
|
|
@@ -23,7 +19,7 @@ function TopLeftPart(props) {
|
|
|
23
19
|
return null;
|
|
24
20
|
}
|
|
25
21
|
return /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
26
|
-
className:
|
|
22
|
+
className: clsx.clsx(withBaseName(), {
|
|
27
23
|
[withBaseName("rightShadow")]: rightShadow,
|
|
28
24
|
[withBaseName("bottomShadow")]: bottomShadow
|
|
29
25
|
}),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TopLeftPart.js","sources":["../src/internal/TopLeftPart.tsx"],"sourcesContent":["import \"./TopLeftPart.css\";\nimport { TableColGroup } from \"./TableColGroup\";\nimport { HeaderRow } from \"./HeaderRow\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { GridColumnGroupModel, GridColumnModel } from \"../Grid\";\nimport { GroupHeaderRow } from \"./GroupHeaderRow\";\nimport
|
|
1
|
+
{"version":3,"file":"TopLeftPart.js","sources":["../src/internal/TopLeftPart.tsx"],"sourcesContent":["import \"./TopLeftPart.css\";\nimport { TableColGroup } from \"./TableColGroup\";\nimport { HeaderRow } from \"./HeaderRow\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { GridColumnGroupModel, GridColumnModel } from \"../Grid\";\nimport { GroupHeaderRow } from \"./GroupHeaderRow\";\nimport { clsx } from \"clsx\";\nimport { useActiveOnWheel } from \"./gridHooks\";\n\nconst withBaseName = makePrefixer(\"saltGridTopLeftPart\");\n\nexport interface TopLeftPartProps<T> {\n onWheel: EventListener;\n columns: GridColumnModel<T>[];\n columnGroups: GridColumnGroupModel[];\n rightShadow?: boolean;\n bottomShadow?: boolean;\n}\n\nexport function TopLeftPart<T>(props: TopLeftPartProps<T>) {\n const { onWheel, columns, columnGroups, rightShadow, bottomShadow } = props;\n\n const tableRef = useActiveOnWheel(onWheel);\n\n if (columns.length === 0) {\n return null;\n }\n\n return (\n <div\n className={clsx(withBaseName(), {\n [withBaseName(\"rightShadow\")]: rightShadow,\n [withBaseName(\"bottomShadow\")]: bottomShadow,\n })}\n data-testid=\"grid-top-left-part\"\n >\n <table ref={tableRef} role=\"presentation\">\n <TableColGroup columns={columns} />\n <thead>\n <GroupHeaderRow groups={columnGroups} />\n <HeaderRow columns={columns} />\n </thead>\n </table>\n </div>\n );\n}\n"],"names":["makePrefixer","useActiveOnWheel","jsx","clsx","jsxs","TableColGroup","GroupHeaderRow","HeaderRow"],"mappings":";;;;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,kBAAa,qBAAqB,CAAA,CAAA;AAUhD,SAAS,YAAe,KAA4B,EAAA;AACzD,EAAA,MAAM,EAAE,OAAS,EAAA,OAAA,EAAS,YAAc,EAAA,WAAA,EAAa,cAAiB,GAAA,KAAA,CAAA;AAEtE,EAAM,MAAA,QAAA,GAAWC,2BAAiB,OAAO,CAAA,CAAA;AAEzC,EAAI,IAAA,OAAA,CAAQ,WAAW,CAAG,EAAA;AACxB,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAA,EAAWC,SAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,MAC9B,CAAC,YAAa,CAAA,aAAa,CAAI,GAAA,WAAA;AAAA,MAC/B,CAAC,YAAa,CAAA,cAAc,CAAI,GAAA,YAAA;AAAA,KACjC,CAAA;AAAA,IACD,aAAY,EAAA,oBAAA;AAAA,IAEZ,QAAC,kBAAAC,eAAA,CAAA,OAAA,EAAA;AAAA,MAAM,GAAK,EAAA,QAAA;AAAA,MAAU,IAAK,EAAA,cAAA;AAAA,MACzB,QAAA,EAAA;AAAA,wBAACF,cAAA,CAAAG,2BAAA,EAAA;AAAA,UAAc,OAAA;AAAA,SAAkB,CAAA;AAAA,wBAChCD,eAAA,CAAA,OAAA,EAAA;AAAA,UACC,QAAA,EAAA;AAAA,4BAACF,cAAA,CAAAI,6BAAA,EAAA;AAAA,cAAe,MAAQ,EAAA,YAAA;AAAA,aAAc,CAAA;AAAA,4BACrCJ,cAAA,CAAAK,mBAAA,EAAA;AAAA,cAAU,OAAA;AAAA,aAAkB,CAAA;AAAA,WAAA;AAAA,SAC/B,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -9,18 +9,14 @@ var core = require('@salt-ds/core');
|
|
|
9
9
|
var HeaderRow = require('./HeaderRow.js');
|
|
10
10
|
var GroupHeaderRow = require('./GroupHeaderRow.js');
|
|
11
11
|
var gridHooks = require('./gridHooks.js');
|
|
12
|
-
var
|
|
13
|
-
|
|
14
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
15
|
-
|
|
16
|
-
var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
|
|
12
|
+
var clsx = require('clsx');
|
|
17
13
|
|
|
18
14
|
const withBaseName = core.makePrefixer("saltGridTopPart");
|
|
19
15
|
function TopPart(props) {
|
|
20
16
|
const { topRef, onWheel, columns, columnGroups, midGap, bottomShadow } = props;
|
|
21
17
|
const tableRef = gridHooks.useActiveOnWheel(onWheel);
|
|
22
18
|
return /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
23
|
-
className:
|
|
19
|
+
className: clsx.clsx(withBaseName(), {
|
|
24
20
|
[withBaseName("bottomShadow")]: bottomShadow
|
|
25
21
|
}),
|
|
26
22
|
ref: topRef,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TopPart.js","sources":["../src/internal/TopPart.tsx"],"sourcesContent":["import { RefObject } from \"react\";\nimport { TableColGroup } from \"./TableColGroup\";\nimport \"./TopPart.css\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { GridColumnGroupModel, GridColumnModel } from \"../Grid\";\nimport { HeaderRow } from \"./HeaderRow\";\nimport { GroupHeaderRow } from \"./GroupHeaderRow\";\nimport { useActiveOnWheel } from \"./gridHooks\";\nimport
|
|
1
|
+
{"version":3,"file":"TopPart.js","sources":["../src/internal/TopPart.tsx"],"sourcesContent":["import { RefObject } from \"react\";\nimport { TableColGroup } from \"./TableColGroup\";\nimport \"./TopPart.css\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { GridColumnGroupModel, GridColumnModel } from \"../Grid\";\nimport { HeaderRow } from \"./HeaderRow\";\nimport { GroupHeaderRow } from \"./GroupHeaderRow\";\nimport { useActiveOnWheel } from \"./gridHooks\";\nimport { clsx } from \"clsx\";\n\nconst withBaseName = makePrefixer(\"saltGridTopPart\");\n\nexport interface TopPartProps<T> {\n topRef: RefObject<HTMLDivElement>;\n onWheel: EventListener;\n columns: GridColumnModel<T>[];\n columnGroups: GridColumnGroupModel[];\n midGap: number;\n bottomShadow?: boolean;\n}\n\nexport function TopPart<T>(props: TopPartProps<T>) {\n const { topRef, onWheel, columns, columnGroups, midGap, bottomShadow } =\n props;\n\n const tableRef = useActiveOnWheel(onWheel);\n\n return (\n <div\n className={clsx(withBaseName(), {\n [withBaseName(\"bottomShadow\")]: bottomShadow,\n })}\n ref={topRef}\n data-testid=\"grid-top-part\"\n >\n <div className={withBaseName(\"space\")}>\n <table ref={tableRef} role=\"presentation\">\n <TableColGroup columns={columns} gap={midGap} />\n <thead>\n <GroupHeaderRow groups={columnGroups} gap={midGap} />\n <HeaderRow columns={columns} gap={midGap} />\n </thead>\n </table>\n </div>\n </div>\n );\n}\n"],"names":["makePrefixer","useActiveOnWheel","jsx","clsx","jsxs","TableColGroup","GroupHeaderRow","HeaderRow"],"mappings":";;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAeA,kBAAa,iBAAiB,CAAA,CAAA;AAW5C,SAAS,QAAW,KAAwB,EAAA;AACjD,EAAA,MAAM,EAAE,MAAQ,EAAA,OAAA,EAAS,SAAS,YAAc,EAAA,MAAA,EAAQ,cACtD,GAAA,KAAA,CAAA;AAEF,EAAM,MAAA,QAAA,GAAWC,2BAAiB,OAAO,CAAA,CAAA;AAEzC,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAA,EAAWC,SAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,MAC9B,CAAC,YAAa,CAAA,cAAc,CAAI,GAAA,YAAA;AAAA,KACjC,CAAA;AAAA,IACD,GAAK,EAAA,MAAA;AAAA,IACL,aAAY,EAAA,eAAA;AAAA,IAEZ,QAAC,kBAAAD,cAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,MAClC,QAAC,kBAAAE,eAAA,CAAA,OAAA,EAAA;AAAA,QAAM,GAAK,EAAA,QAAA;AAAA,QAAU,IAAK,EAAA,cAAA;AAAA,QACzB,QAAA,EAAA;AAAA,0BAACF,cAAA,CAAAG,2BAAA,EAAA;AAAA,YAAc,OAAA;AAAA,YAAkB,GAAK,EAAA,MAAA;AAAA,WAAQ,CAAA;AAAA,0BAC7CD,eAAA,CAAA,OAAA,EAAA;AAAA,YACC,QAAA,EAAA;AAAA,8BAACF,cAAA,CAAAI,6BAAA,EAAA;AAAA,gBAAe,MAAQ,EAAA,YAAA;AAAA,gBAAc,GAAK,EAAA,MAAA;AAAA,eAAQ,CAAA;AAAA,8BAClDJ,cAAA,CAAAK,mBAAA,EAAA;AAAA,gBAAU,OAAA;AAAA,gBAAkB,GAAK,EAAA,MAAA;AAAA,eAAQ,CAAA;AAAA,aAAA;AAAA,WAC5C,CAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -8,13 +8,9 @@ var HeaderRow = require('./HeaderRow.js');
|
|
|
8
8
|
require('./TopRightPart.css.js');
|
|
9
9
|
var core = require('@salt-ds/core');
|
|
10
10
|
var GroupHeaderRow = require('./GroupHeaderRow.js');
|
|
11
|
-
var
|
|
11
|
+
var clsx = require('clsx');
|
|
12
12
|
var gridHooks = require('./gridHooks.js');
|
|
13
13
|
|
|
14
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
15
|
-
|
|
16
|
-
var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
|
|
17
|
-
|
|
18
14
|
const withBaseName = core.makePrefixer("saltGridTopRightPart");
|
|
19
15
|
function TopRightPart(props) {
|
|
20
16
|
const { onWheel, columns, columnGroups, leftShadow, bottomShadow } = props;
|
|
@@ -23,7 +19,7 @@ function TopRightPart(props) {
|
|
|
23
19
|
return null;
|
|
24
20
|
}
|
|
25
21
|
return /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
26
|
-
className:
|
|
22
|
+
className: clsx.clsx(withBaseName(), {
|
|
27
23
|
[withBaseName("leftShadow")]: leftShadow,
|
|
28
24
|
[withBaseName("bottomShadow")]: bottomShadow
|
|
29
25
|
}),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TopRightPart.js","sources":["../src/internal/TopRightPart.tsx"],"sourcesContent":["import { TableColGroup } from \"./TableColGroup\";\nimport { HeaderRow } from \"./HeaderRow\";\nimport \"./TopRightPart.css\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { GridColumnGroupModel, GridColumnModel } from \"../Grid\";\nimport { GroupHeaderRow } from \"./GroupHeaderRow\";\nimport
|
|
1
|
+
{"version":3,"file":"TopRightPart.js","sources":["../src/internal/TopRightPart.tsx"],"sourcesContent":["import { TableColGroup } from \"./TableColGroup\";\nimport { HeaderRow } from \"./HeaderRow\";\nimport \"./TopRightPart.css\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { GridColumnGroupModel, GridColumnModel } from \"../Grid\";\nimport { GroupHeaderRow } from \"./GroupHeaderRow\";\nimport { clsx } from \"clsx\";\nimport { useActiveOnWheel } from \"./gridHooks\";\n\nconst withBaseName = makePrefixer(\"saltGridTopRightPart\");\n\nexport interface TopRightPartProps<T> {\n onWheel: EventListener;\n columns: GridColumnModel<T>[];\n columnGroups: GridColumnGroupModel[];\n leftShadow?: boolean;\n bottomShadow?: boolean;\n}\n\nexport function TopRightPart<T>(props: TopRightPartProps<T>) {\n const { onWheel, columns, columnGroups, leftShadow, bottomShadow } = props;\n\n const tableRef = useActiveOnWheel(onWheel);\n\n if (columns.length === 0) {\n return null;\n }\n\n return (\n <div\n className={clsx(withBaseName(), {\n [withBaseName(\"leftShadow\")]: leftShadow,\n [withBaseName(\"bottomShadow\")]: bottomShadow,\n })}\n data-testid=\"grid-top-right-part\"\n >\n <table\n className={withBaseName(\"table\")}\n ref={tableRef}\n role=\"presentation\"\n >\n <TableColGroup columns={columns} />\n <thead>\n <GroupHeaderRow groups={columnGroups} />\n <HeaderRow columns={columns} />\n {/*TODO Do we need a toolbar?*/}\n {/*{showToolbar ? <HeaderToolbarRow columns={rightColumns} /> : null}*/}\n </thead>\n </table>\n </div>\n );\n}\n"],"names":["makePrefixer","useActiveOnWheel","jsx","clsx","jsxs","TableColGroup","GroupHeaderRow","HeaderRow"],"mappings":";;;;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,kBAAa,sBAAsB,CAAA,CAAA;AAUjD,SAAS,aAAgB,KAA6B,EAAA;AAC3D,EAAA,MAAM,EAAE,OAAS,EAAA,OAAA,EAAS,YAAc,EAAA,UAAA,EAAY,cAAiB,GAAA,KAAA,CAAA;AAErE,EAAM,MAAA,QAAA,GAAWC,2BAAiB,OAAO,CAAA,CAAA;AAEzC,EAAI,IAAA,OAAA,CAAQ,WAAW,CAAG,EAAA;AACxB,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAA,EAAWC,SAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,MAC9B,CAAC,YAAa,CAAA,YAAY,CAAI,GAAA,UAAA;AAAA,MAC9B,CAAC,YAAa,CAAA,cAAc,CAAI,GAAA,YAAA;AAAA,KACjC,CAAA;AAAA,IACD,aAAY,EAAA,qBAAA;AAAA,IAEZ,QAAC,kBAAAC,eAAA,CAAA,OAAA,EAAA;AAAA,MACC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,MAC/B,GAAK,EAAA,QAAA;AAAA,MACL,IAAK,EAAA,cAAA;AAAA,MAEL,QAAA,EAAA;AAAA,wBAACF,cAAA,CAAAG,2BAAA,EAAA;AAAA,UAAc,OAAA;AAAA,SAAkB,CAAA;AAAA,wBAChCD,eAAA,CAAA,OAAA,EAAA;AAAA,UACC,QAAA,EAAA;AAAA,4BAACF,cAAA,CAAAI,6BAAA,EAAA;AAAA,cAAe,MAAQ,EAAA,YAAA;AAAA,aAAc,CAAA;AAAA,4BACrCJ,cAAA,CAAAK,mBAAA,EAAA;AAAA,cAAU,OAAA;AAAA,aAAkB,CAAA;AAAA,WAAA;AAAA,SAG/B,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import
|
|
2
|
+
import { clsx } from 'clsx';
|
|
3
3
|
import './BaseCell.css.js';
|
|
4
4
|
import { makePrefixer } from '@salt-ds/core';
|
|
5
5
|
import { Cell } from './internal/Cell.js';
|
|
@@ -57,7 +57,7 @@ function BaseCell(props) {
|
|
|
57
57
|
onFocus,
|
|
58
58
|
children: [
|
|
59
59
|
/* @__PURE__ */ jsx("div", {
|
|
60
|
-
className:
|
|
60
|
+
className: clsx(withBaseName("valueContainer")),
|
|
61
61
|
children
|
|
62
62
|
}),
|
|
63
63
|
isFocused && isEditable && /* @__PURE__ */ jsx(CornerTag, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseCell.js","sources":["../src/BaseCell.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"BaseCell.js","sources":["../src/BaseCell.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport \"./BaseCell.css\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { GridCellProps } from \"./GridColumn\";\nimport { GridColumnModel } from \"./Grid\";\nimport { Cell, Cursor, useFocusableContent } from \"./internal\";\nimport { CornerTag } from \"./CornerTag\";\n\nconst withBaseName = makePrefixer(\"saltGridBaseCell\");\n\nexport function getCellId<T>(rowKey: string, column: GridColumnModel<T>) {\n return `R${rowKey}C${column.info.props.id}`;\n}\n\n// Default component for grid cells. Provides selection, on-hover highlighting,\n// cursor etc.\nexport function BaseCell<T>(props: GridCellProps<T>) {\n const {\n column,\n className,\n row,\n style,\n isFocused,\n isSelected,\n isEditable,\n children,\n } = props;\n\n const { ref, isFocusableContent, onFocus } =\n useFocusableContent<HTMLTableCellElement>();\n\n return (\n <Cell\n ref={ref}\n id={getCellId(row.key, column)}\n data-row-index={row.index}\n data-column-index={column.index}\n data-testid={isFocused ? \"grid-cell-focused\" : undefined}\n // aria-colindex uses one-based array indexing\n aria-colindex={column.index + 1}\n role=\"gridcell\"\n separator={column.separator}\n isSelected={isSelected}\n isEditable={isEditable}\n className={className}\n style={style}\n tabIndex={isFocused && !isFocusableContent ? 0 : -1}\n onFocus={onFocus}\n >\n <div className={clsx(withBaseName(\"valueContainer\"))}>{children}</div>\n {isFocused && isEditable && <CornerTag focusOnly={true} />}\n {isFocused && !isFocusableContent && <Cursor />}\n </Cell>\n );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAEpC,SAAA,SAAA,CAAa,QAAgB,MAA4B,EAAA;AACvE,EAAA,OAAO,CAAI,CAAA,EAAA,MAAA,CAAA,CAAA,EAAU,MAAO,CAAA,IAAA,CAAK,KAAM,CAAA,EAAA,CAAA,CAAA,CAAA;AACzC,CAAA;AAIO,SAAS,SAAY,KAAyB,EAAA;AACnD,EAAM,MAAA;AAAA,IACJ,MAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAA;AAAA,IACA,KAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,GACE,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,EAAE,GAAA,EAAK,kBAAoB,EAAA,OAAA,KAC/B,mBAA0C,EAAA,CAAA;AAE5C,EAAA,uBACG,IAAA,CAAA,IAAA,EAAA;AAAA,IACC,GAAA;AAAA,IACA,EAAI,EAAA,SAAA,CAAU,GAAI,CAAA,GAAA,EAAK,MAAM,CAAA;AAAA,IAC7B,kBAAgB,GAAI,CAAA,KAAA;AAAA,IACpB,qBAAmB,MAAO,CAAA,KAAA;AAAA,IAC1B,aAAA,EAAa,YAAY,mBAAsB,GAAA,KAAA,CAAA;AAAA,IAE/C,eAAA,EAAe,OAAO,KAAQ,GAAA,CAAA;AAAA,IAC9B,IAAK,EAAA,UAAA;AAAA,IACL,WAAW,MAAO,CAAA,SAAA;AAAA,IAClB,UAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAU,EAAA,SAAA,IAAa,CAAC,kBAAA,GAAqB,CAAI,GAAA,CAAA,CAAA;AAAA,IACjD,OAAA;AAAA,IAEA,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,gBAAgB,CAAC,CAAA;AAAA,QAAI,QAAA;AAAA,OAAS,CAAA;AAAA,MAC/D,SAAA,IAAa,8BAAe,GAAA,CAAA,SAAA,EAAA;AAAA,QAAU,SAAW,EAAA,IAAA;AAAA,OAAM,CAAA;AAAA,MACvD,SAAa,IAAA,CAAC,kBAAsB,oBAAA,GAAA,CAAC,MAAO,EAAA,EAAA,CAAA;AAAA,KAAA;AAAA,GAC/C,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
|
|
|
2
2
|
import { useRef, useState, useCallback, useMemo, useEffect } from 'react';
|
|
3
3
|
import { makePrefixer } from '@salt-ds/core';
|
|
4
4
|
import { GridContext } from './GridContext.js';
|
|
5
|
-
import
|
|
5
|
+
import { clsx } from 'clsx';
|
|
6
6
|
import './internal/Cell.js';
|
|
7
7
|
import { CellMeasure } from './internal/CellMeasure.js';
|
|
8
8
|
import './internal/Cursor.js';
|
|
@@ -68,10 +68,15 @@ const Grid = function Grid2(props) {
|
|
|
68
68
|
const [scrollLeft, setScrollLeft] = useState(0);
|
|
69
69
|
const [scrollTop, setScrollTop] = useState(0);
|
|
70
70
|
const [hoverRowKey, setHoverRowKey] = useState(void 0);
|
|
71
|
-
const [
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
71
|
+
const [
|
|
72
|
+
{ clientWidth, clientHeight, scrollBarHeight, scrollBarWidth },
|
|
73
|
+
setDimensions
|
|
74
|
+
] = useState({
|
|
75
|
+
clientWidth: 0,
|
|
76
|
+
clientHeight: 0,
|
|
77
|
+
scrollBarHeight: 0,
|
|
78
|
+
scrollBarWidth: 0
|
|
79
|
+
});
|
|
75
80
|
const [rowHeight, setRowHeight] = useState(0);
|
|
76
81
|
const [cursorRowIdx, setCursorRowIdx] = useState(0);
|
|
77
82
|
const [cursorColIdx, setCursorColIdx] = useState(0);
|
|
@@ -81,13 +86,10 @@ const Grid = function Grid2(props) {
|
|
|
81
86
|
const [editMode, setEditMode] = useState(false);
|
|
82
87
|
const [initialText, setInitialText] = useState(void 0);
|
|
83
88
|
const resizeClient = useCallback(
|
|
84
|
-
(
|
|
85
|
-
|
|
86
|
-
setClientWidth(clW);
|
|
87
|
-
setScrollBarHeight(sbH);
|
|
88
|
-
setScrollBarWidth(sbW);
|
|
89
|
+
(dimensions) => {
|
|
90
|
+
setDimensions(dimensions);
|
|
89
91
|
},
|
|
90
|
-
[
|
|
92
|
+
[]
|
|
91
93
|
);
|
|
92
94
|
const {
|
|
93
95
|
leftCols,
|
|
@@ -812,7 +814,7 @@ const Grid = function Grid2(props) {
|
|
|
812
814
|
children: [
|
|
813
815
|
props.children,
|
|
814
816
|
/* @__PURE__ */ jsxs("div", {
|
|
815
|
-
className:
|
|
817
|
+
className: clsx(
|
|
816
818
|
withBaseName(),
|
|
817
819
|
{
|
|
818
820
|
[withBaseName("zebra")]: zebra,
|