@pibit.ai/cure-design-system 0.3.43 → 0.3.48
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/applications/loading-indicator/index.d.ts +2 -0
- package/dist/applications/loading-indicator/index.d.ts.map +1 -0
- package/dist/applications/loading-indicator/loading-indicator.d.ts +1 -2
- package/dist/applications/loading-indicator/loading-indicator.d.ts.map +1 -1
- package/dist/index.d.ts +4 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +175 -162
- package/dist/patterns/table/TableWrapper.d.ts.map +1 -1
- package/dist/patterns/table/TableWrapper.js +538 -564
- package/dist/patterns/table/TableZoomControl.d.ts +12 -0
- package/dist/patterns/table/TableZoomControl.d.ts.map +1 -0
- package/dist/patterns/table/TableZoomControl.js +58 -0
- package/dist/patterns/table/index.d.ts +2 -0
- package/dist/patterns/table/index.d.ts.map +1 -1
- package/dist/patterns/table/tableZoomLayout.d.ts +23 -1
- package/dist/patterns/table/tableZoomLayout.d.ts.map +1 -1
- package/dist/patterns/table/tableZoomLayout.js +39 -27
- package/dist/patterns/table/types.d.ts +3 -0
- package/dist/patterns/table/types.d.ts.map +1 -1
- package/dist/patterns/table-component/TableComponent.d.ts +6 -0
- package/dist/patterns/table-component/TableComponent.d.ts.map +1 -0
- package/dist/patterns/table-component/TableComponent.js +814 -0
- package/dist/patterns/table-component/buildTableColumns.d.ts +10 -0
- package/dist/patterns/table-component/buildTableColumns.d.ts.map +1 -0
- package/dist/patterns/table-component/buildTableColumns.js +65 -0
- package/dist/patterns/table-component/buildTableColumns.test.d.ts +2 -0
- package/dist/patterns/table-component/buildTableColumns.test.d.ts.map +1 -0
- package/dist/patterns/table-component/index.d.ts +5 -0
- package/dist/patterns/table-component/index.d.ts.map +1 -0
- package/dist/patterns/table-component/rowMetrics.d.ts +11 -0
- package/dist/patterns/table-component/rowMetrics.d.ts.map +1 -0
- package/dist/patterns/table-component/rowMetrics.js +15 -0
- package/dist/patterns/table-component/tableFeatures.d.ts +12 -0
- package/dist/patterns/table-component/tableFeatures.d.ts.map +1 -0
- package/dist/patterns/table-component/tableFeatures.js +14 -0
- package/dist/patterns/table-component/types.d.ts +207 -0
- package/dist/patterns/table-component/types.d.ts.map +1 -0
- package/dist/patterns/table-component/useCellRangeSelection.d.ts +50 -0
- package/dist/patterns/table-component/useCellRangeSelection.d.ts.map +1 -0
- package/dist/patterns/table-component/useCellRangeSelection.js +218 -0
- package/dist/patterns/table-component/useRowReorderDrag.d.ts +17 -0
- package/dist/patterns/table-component/useRowReorderDrag.d.ts.map +1 -0
- package/dist/patterns/table-component/useRowReorderDrag.js +109 -0
- package/dist/primitives/input/hint-text.d.ts +1 -2
- package/dist/primitives/input/hint-text.d.ts.map +1 -1
- package/dist/primitives/input/index.d.ts +3 -1
- package/dist/primitives/input/index.d.ts.map +1 -1
- package/dist/primitives/input/input.d.ts +1 -1
- package/dist/primitives/input/input.d.ts.map +1 -1
- package/dist/primitives/input/input.js +135 -129
- package/dist/primitives/input/label.d.ts +1 -2
- package/dist/primitives/input/label.d.ts.map +1 -1
- package/dist/primitives/select/index.d.ts +1 -0
- package/dist/primitives/select/index.d.ts.map +1 -1
- package/dist/primitives/select/select-item.d.ts +1 -2
- package/dist/primitives/select/select-item.d.ts.map +1 -1
- package/dist/styles/components.css +1 -1
- package/dist/styles/theme.css +1 -1
- package/package.json +6 -1
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { ColumnDef } from '@tanstack/react-table';
|
|
2
|
+
import { TableComponentFeatures } from './tableFeatures';
|
|
3
|
+
import { TableComponentColumn, TableComponentHeaderGroup } from './types';
|
|
4
|
+
export type TableComponentColumnMeta = {
|
|
5
|
+
columnId?: string;
|
|
6
|
+
groupId?: string;
|
|
7
|
+
};
|
|
8
|
+
export type TableComponentColumnDef<TData extends object> = ColumnDef<TableComponentFeatures, TData, unknown>;
|
|
9
|
+
export declare const buildTableComponentColumns: <TData extends object>(columns: TableComponentColumn<TData>[], headerGroups?: TableComponentHeaderGroup[]) => TableComponentColumnDef<TData>[];
|
|
10
|
+
//# sourceMappingURL=buildTableColumns.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"buildTableColumns.d.ts","sourceRoot":"","sources":["../../../src/patterns/table-component/buildTableColumns.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAC9D,OAAO,KAAK,EAAE,oBAAoB,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAC;AAE/E,MAAM,MAAM,wBAAwB,GAAG;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,uBAAuB,CAAC,KAAK,SAAS,MAAM,IAAI,SAAS,CACnE,sBAAsB,EACtB,KAAK,EACL,OAAO,CACR,CAAC;AA4EF,eAAO,MAAM,0BAA0B,GAAI,KAAK,SAAS,MAAM,EAC7D,SAAS,oBAAoB,CAAC,KAAK,CAAC,EAAE,EACtC,eAAe,yBAAyB,EAAE,KACzC,uBAAuB,CAAC,KAAK,CAAC,EA+BhC,CAAC"}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
const i = (e) => {
|
|
2
|
+
const o = e.spanRows, r = e.spanColumns;
|
|
3
|
+
return {
|
|
4
|
+
id: e.id,
|
|
5
|
+
header: () => e.header,
|
|
6
|
+
accessorFn: e.accessor,
|
|
7
|
+
enableSorting: e.enableSorting,
|
|
8
|
+
sortDescFirst: !1,
|
|
9
|
+
enableHiding: e.enableHiding,
|
|
10
|
+
spanRows: typeof o == "function" ? ({ anchorRow: t, row: a, anchorValue: n, value: l }) => o({
|
|
11
|
+
anchorRow: t.original,
|
|
12
|
+
row: a.original,
|
|
13
|
+
anchorValue: n,
|
|
14
|
+
value: l
|
|
15
|
+
}) : o,
|
|
16
|
+
spanColumns: typeof r == "function" ? ({ row: t }) => r(t.original) : r,
|
|
17
|
+
meta: { columnId: e.id }
|
|
18
|
+
};
|
|
19
|
+
}, d = (e, o) => {
|
|
20
|
+
const r = /* @__PURE__ */ new Set(), t = /* @__PURE__ */ new Set(), a = (n) => {
|
|
21
|
+
var s, c;
|
|
22
|
+
if (r.has(n.id))
|
|
23
|
+
throw new Error(
|
|
24
|
+
`TableComponent header node id "${n.id}" is duplicated.`
|
|
25
|
+
);
|
|
26
|
+
if (r.add(n.id), !!((s = n.children) != null && s.length) === !!n.columnId)
|
|
27
|
+
throw new Error(
|
|
28
|
+
`TableComponent header node "${n.id}" must have either children or columnId, but not both.`
|
|
29
|
+
);
|
|
30
|
+
if (n.columnId) {
|
|
31
|
+
if (!o.has(n.columnId))
|
|
32
|
+
throw new Error(
|
|
33
|
+
`TableComponent header node "${n.id}" references unknown column "${n.columnId}".`
|
|
34
|
+
);
|
|
35
|
+
if (t.has(n.columnId))
|
|
36
|
+
throw new Error(
|
|
37
|
+
`TableComponent column "${n.columnId}" appears more than once in headerGroups.`
|
|
38
|
+
);
|
|
39
|
+
t.add(n.columnId);
|
|
40
|
+
}
|
|
41
|
+
(c = n.children) == null || c.forEach(a);
|
|
42
|
+
};
|
|
43
|
+
return e.forEach(a), t;
|
|
44
|
+
}, m = (e, o) => {
|
|
45
|
+
const r = /* @__PURE__ */ new Map();
|
|
46
|
+
for (const n of e) {
|
|
47
|
+
if (r.has(n.id))
|
|
48
|
+
throw new Error(`TableComponent column id "${n.id}" is duplicated.`);
|
|
49
|
+
r.set(n.id, n);
|
|
50
|
+
}
|
|
51
|
+
if (!(o != null && o.length)) return e.map(i);
|
|
52
|
+
const t = d(o, r), a = (n) => n.columnId ? i(r.get(n.columnId)) : {
|
|
53
|
+
id: n.id,
|
|
54
|
+
header: () => n.label,
|
|
55
|
+
columns: n.children.map(a),
|
|
56
|
+
meta: { groupId: n.id }
|
|
57
|
+
};
|
|
58
|
+
return [
|
|
59
|
+
...o.map(a),
|
|
60
|
+
...e.filter((n) => !t.has(n.id)).map(i)
|
|
61
|
+
];
|
|
62
|
+
};
|
|
63
|
+
export {
|
|
64
|
+
m as buildTableComponentColumns
|
|
65
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"buildTableColumns.test.d.ts","sourceRoot":"","sources":["../../../src/patterns/table-component/buildTableColumns.test.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export { TableComponent } from './TableComponent';
|
|
2
|
+
export { buildTableComponentColumns } from './buildTableColumns';
|
|
3
|
+
export type { TableComponentAlignment, TableComponentCellAddress, TableComponentCellContext, TableComponentColumn, TableComponentExpandedRowContext, TableComponentGroupHeaderContext, TableComponentHeaderGroup, TableComponentProps, TableComponentRowGroup, TableComponentSelectionMode, TableComponentSize, TableComponentStickyPosition, TableComponentToolbarContext, } from './types';
|
|
4
|
+
export type { ColumnOrderState, ColumnVisibilityState, ExpandedState, RowSelectionState, SortingState, } from '@tanstack/react-table';
|
|
5
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/patterns/table-component/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,0BAA0B,EAAE,MAAM,qBAAqB,CAAC;AACjE,YAAY,EACV,uBAAuB,EACvB,yBAAyB,EACzB,yBAAyB,EACzB,oBAAoB,EACpB,gCAAgC,EAChC,gCAAgC,EAChC,yBAAyB,EACzB,mBAAmB,EACnB,sBAAsB,EACtB,2BAA2B,EAC3B,kBAAkB,EAClB,4BAA4B,EAC5B,4BAA4B,GAC7B,MAAM,SAAS,CAAC;AACjB,YAAY,EACV,gBAAgB,EAChB,qBAAqB,EACrB,aAAa,EACb,iBAAiB,EACjB,YAAY,GACb,MAAM,uBAAuB,CAAC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { TableComponentSize } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* xs = 36px, sm = 40px. `height` on a `<tr>` behaves as a *minimum* — a row takes the greater of
|
|
4
|
+
* its specified height and its tallest cell — so this sets the resting height without capping
|
|
5
|
+
* growth. (`min-height` is not applied to table rows at all.)
|
|
6
|
+
*/
|
|
7
|
+
export declare const ROW_HEIGHT_CLASS: Record<TableComponentSize, string>;
|
|
8
|
+
export declare const HEADER_PADDING_CLASS: Record<TableComponentSize, string>;
|
|
9
|
+
/** Vertical padding stays at 0 so the row's height is the single source of the metric. */
|
|
10
|
+
export declare const CELL_PADDING_CLASS: Record<TableComponentSize, string>;
|
|
11
|
+
//# sourceMappingURL=rowMetrics.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"rowMetrics.d.ts","sourceRoot":"","sources":["../../../src/patterns/table-component/rowMetrics.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,kBAAkB,EAAE,MAAM,CAG/D,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,kBAAkB,EAAE,MAAM,CAGnE,CAAC;AAEF,0FAA0F;AAC1F,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,kBAAkB,EAAE,MAAM,CAGjE,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
const p = {
|
|
2
|
+
xs: "h-9",
|
|
3
|
+
sm: "h-10"
|
|
4
|
+
}, s = {
|
|
5
|
+
xs: "px-3 py-0",
|
|
6
|
+
sm: "px-4 py-0"
|
|
7
|
+
}, x = {
|
|
8
|
+
xs: "p-0 px-3 py-0 text-xs",
|
|
9
|
+
sm: "p-0 px-4 py-0 text-sm"
|
|
10
|
+
};
|
|
11
|
+
export {
|
|
12
|
+
x as CELL_PADDING_CLASS,
|
|
13
|
+
s as HEADER_PADDING_CLASS,
|
|
14
|
+
p as ROW_HEIGHT_CLASS
|
|
15
|
+
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export declare const tableComponentFeatures: {
|
|
2
|
+
rowSortingFeature: import('@tanstack/table-core').TableFeature;
|
|
3
|
+
sortedRowModel: (table: import('@tanstack/table-core').Table<any, any>) => () => import('@tanstack/table-core').RowModel<any, any>;
|
|
4
|
+
rowExpandingFeature: import('@tanstack/table-core').TableFeature;
|
|
5
|
+
expandedRowModel: (table: import('@tanstack/table-core').Table<any, any>) => () => import('@tanstack/table-core').RowModel<any, any>;
|
|
6
|
+
rowSelectionFeature: import('@tanstack/table-core').TableFeature;
|
|
7
|
+
columnVisibilityFeature: import('@tanstack/table-core').TableFeature;
|
|
8
|
+
columnOrderingFeature: import('@tanstack/table-core').TableFeature;
|
|
9
|
+
cellSpanningFeature: import('@tanstack/table-core').TableFeature;
|
|
10
|
+
};
|
|
11
|
+
export type TableComponentFeatures = typeof tableComponentFeatures;
|
|
12
|
+
//# sourceMappingURL=tableFeatures.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tableFeatures.d.ts","sourceRoot":"","sources":["../../../src/patterns/table-component/tableFeatures.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,sBAAsB;;;;;;;;;CASjC,CAAC;AAEH,MAAM,MAAM,sBAAsB,GAAG,OAAO,sBAAsB,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { tableFeatures as e, cellSpanningFeature as o, columnOrderingFeature as r, columnVisibilityFeature as t, rowSelectionFeature as a, createExpandedRowModel as n, rowExpandingFeature as d, createSortedRowModel as l, rowSortingFeature as i } from "@tanstack/react-table";
|
|
2
|
+
const F = e({
|
|
3
|
+
rowSortingFeature: i,
|
|
4
|
+
sortedRowModel: l(),
|
|
5
|
+
rowExpandingFeature: d,
|
|
6
|
+
expandedRowModel: n(),
|
|
7
|
+
rowSelectionFeature: a,
|
|
8
|
+
columnVisibilityFeature: t,
|
|
9
|
+
columnOrderingFeature: r,
|
|
10
|
+
cellSpanningFeature: o
|
|
11
|
+
});
|
|
12
|
+
export {
|
|
13
|
+
F as tableComponentFeatures
|
|
14
|
+
};
|
|
@@ -0,0 +1,207 @@
|
|
|
1
|
+
import { CSSProperties, ReactNode } from 'react';
|
|
2
|
+
import { TableCellRangeRect, TableCellSelection } from '../table/cellRangeSelection';
|
|
3
|
+
import { TableZoomConfig } from '../table/types';
|
|
4
|
+
import { ColumnOrderState, ColumnVisibilityState, ExpandedState, RowSelectionState, SortingState } from '@tanstack/react-table';
|
|
5
|
+
/**
|
|
6
|
+
* Two sizes only. `xs` (the default) is a 36px row with xs text; `sm` is a 40px row with sm text.
|
|
7
|
+
* The former `md` size had no consumers and was dropped.
|
|
8
|
+
*/
|
|
9
|
+
export type TableComponentSize = "xs" | "sm";
|
|
10
|
+
export type TableComponentSelectionMode = "none" | "single" | "multiple";
|
|
11
|
+
export type TableComponentAlignment = "left" | "center" | "right";
|
|
12
|
+
export type TableComponentStickyPosition = "left" | "right";
|
|
13
|
+
export type TableComponentCellAddress = {
|
|
14
|
+
rowId: string;
|
|
15
|
+
columnId: string;
|
|
16
|
+
};
|
|
17
|
+
export type TableComponentCellContext<TData extends object> = TableComponentCellAddress & {
|
|
18
|
+
row: TData;
|
|
19
|
+
value: unknown;
|
|
20
|
+
rowIndex: number;
|
|
21
|
+
sourceIndex: number | null;
|
|
22
|
+
/**
|
|
23
|
+
* Begins a row-reorder drag. Present only when `onReorderRows` is set; attach it to a handle's
|
|
24
|
+
* `onPointerDown`. Undefined when reorder is off, so a handle can hide itself.
|
|
25
|
+
*/
|
|
26
|
+
startRowDrag?: (event: import('react').PointerEvent<HTMLElement>) => void;
|
|
27
|
+
/** True while this row is the active drag source. */
|
|
28
|
+
isRowDragging?: boolean;
|
|
29
|
+
};
|
|
30
|
+
/**
|
|
31
|
+
* A group of rows rendered under a group-header row. Membership is by row id so the table's own
|
|
32
|
+
* row model stays authoritative — sorting, selection and spans keep working inside groups.
|
|
33
|
+
*/
|
|
34
|
+
export type TableComponentRowGroup = {
|
|
35
|
+
id: string;
|
|
36
|
+
label: ReactNode;
|
|
37
|
+
rowIds: string[];
|
|
38
|
+
};
|
|
39
|
+
export type TableComponentGroupHeaderContext = {
|
|
40
|
+
id: string;
|
|
41
|
+
label: ReactNode;
|
|
42
|
+
/** Rows present in this group that survived the current row model. */
|
|
43
|
+
rowCount: number;
|
|
44
|
+
isCollapsed: boolean;
|
|
45
|
+
toggle: () => void;
|
|
46
|
+
};
|
|
47
|
+
export type TableComponentExpandedRowContext<TData extends object> = {
|
|
48
|
+
row: TData;
|
|
49
|
+
rowId: string;
|
|
50
|
+
colSpan: number;
|
|
51
|
+
collapse: () => void;
|
|
52
|
+
};
|
|
53
|
+
export type TableComponentToolbarContext = {
|
|
54
|
+
/** The design-system zoom control, or `null` when zoom is not enabled/supported. */
|
|
55
|
+
zoomControl: ReactNode;
|
|
56
|
+
zoomPercent: number;
|
|
57
|
+
};
|
|
58
|
+
export type TableComponentColumn<TData extends object> = {
|
|
59
|
+
/** Stable identifier used for state, persistence, and callbacks. */
|
|
60
|
+
id: string;
|
|
61
|
+
header: ReactNode;
|
|
62
|
+
accessor: (row: TData, index: number) => unknown;
|
|
63
|
+
renderCell?: (context: TableComponentCellContext<TData>) => ReactNode;
|
|
64
|
+
renderHeader?: (context: {
|
|
65
|
+
columnId: string;
|
|
66
|
+
label: ReactNode;
|
|
67
|
+
}) => ReactNode;
|
|
68
|
+
enableSorting?: boolean;
|
|
69
|
+
enableHiding?: boolean;
|
|
70
|
+
/** Merge adjacent visible rows whose values are equal, or provide a custom predicate. */
|
|
71
|
+
spanRows?: boolean | ((input: {
|
|
72
|
+
anchorRow: TData;
|
|
73
|
+
row: TData;
|
|
74
|
+
anchorValue: unknown;
|
|
75
|
+
value: unknown;
|
|
76
|
+
}) => boolean);
|
|
77
|
+
/** Merge this cell across visible columns for a row. */
|
|
78
|
+
spanColumns?: number | ((row: TData) => number);
|
|
79
|
+
align?: TableComponentAlignment;
|
|
80
|
+
sticky?: TableComponentStickyPosition;
|
|
81
|
+
stickyOffset?: number;
|
|
82
|
+
width?: CSSProperties["width"];
|
|
83
|
+
minWidth?: CSSProperties["minWidth"];
|
|
84
|
+
maxWidth?: CSSProperties["maxWidth"];
|
|
85
|
+
headerClassName?: string;
|
|
86
|
+
cellClassName?: string;
|
|
87
|
+
};
|
|
88
|
+
/**
|
|
89
|
+
* Declarative header tree. Leaf nodes reference a stable column ID. Numeric
|
|
90
|
+
* row/column spans are derived from the visible leaf columns at render time.
|
|
91
|
+
*/
|
|
92
|
+
export type TableComponentHeaderGroup = {
|
|
93
|
+
id: string;
|
|
94
|
+
label: ReactNode;
|
|
95
|
+
columnId?: string;
|
|
96
|
+
children?: TableComponentHeaderGroup[];
|
|
97
|
+
};
|
|
98
|
+
export type TableComponentProps<TData extends object> = {
|
|
99
|
+
data: TData[];
|
|
100
|
+
columns: TableComponentColumn<TData>[];
|
|
101
|
+
getRowId: (row: TData, index: number) => string;
|
|
102
|
+
ariaLabel: string;
|
|
103
|
+
headerGroups?: TableComponentHeaderGroup[];
|
|
104
|
+
size?: TableComponentSize;
|
|
105
|
+
loading?: boolean;
|
|
106
|
+
loadingRowCount?: number;
|
|
107
|
+
emptyState?: ReactNode;
|
|
108
|
+
showBorders?: boolean;
|
|
109
|
+
removeRowBorders?: boolean;
|
|
110
|
+
/**
|
|
111
|
+
* Flexible columns share the container width equally (`table-layout: fixed`); the table falls
|
|
112
|
+
* back to horizontal scrolling once the columns' minimum widths exceed the container. A column
|
|
113
|
+
* counts as fixed when it pins itself right and declares a px `maxWidth`.
|
|
114
|
+
*/
|
|
115
|
+
fillWidth?: boolean;
|
|
116
|
+
/**
|
|
117
|
+
* Enables Excel-style whole-grid zoom. The header, body, merged cells, expanded rows, and
|
|
118
|
+
* interactive hit areas scale together. Uses the same control and configuration as TableWrapper.
|
|
119
|
+
* Text grows gradually as the user zooms out (14px just below 100%, up to 18px at 60%)
|
|
120
|
+
* and then holds at 18px. At 100% and above, authored font sizes are preserved.
|
|
121
|
+
*/
|
|
122
|
+
zoom?: TableZoomConfig;
|
|
123
|
+
/** Disables the zoom control without removing the current zoom level. */
|
|
124
|
+
zoomDisabled?: boolean;
|
|
125
|
+
className?: string;
|
|
126
|
+
rootClassName?: string;
|
|
127
|
+
tableClassName?: string;
|
|
128
|
+
headerClassName?: string;
|
|
129
|
+
getRowClassName?: (row: TData) => string | undefined;
|
|
130
|
+
onRowClick?: (row: TData) => void;
|
|
131
|
+
onRowHover?: (row: TData, isHovered: boolean) => void;
|
|
132
|
+
toolbar?: ReactNode;
|
|
133
|
+
/**
|
|
134
|
+
* Composes table-owned controls into a consumer-owned toolbar. Prefer this over `toolbar` when
|
|
135
|
+
* zoom should sit inside an existing toolbar rather than in a separate control row.
|
|
136
|
+
*/
|
|
137
|
+
renderToolbar?: (context: TableComponentToolbarContext) => ReactNode;
|
|
138
|
+
pagination?: ReactNode;
|
|
139
|
+
/** Rendered as the last body row, after every group. */
|
|
140
|
+
summaryRow?: ReactNode;
|
|
141
|
+
/**
|
|
142
|
+
* When set, rows render grouped under header rows in this order. Rows not claimed by any group
|
|
143
|
+
* still render, after the groups — grouping never silently drops data.
|
|
144
|
+
*/
|
|
145
|
+
rowGroups?: TableComponentRowGroup[];
|
|
146
|
+
renderGroupHeader?: (context: TableComponentGroupHeaderContext) => ReactNode;
|
|
147
|
+
collapsedGroupIds?: string[];
|
|
148
|
+
defaultCollapsedGroupIds?: string[];
|
|
149
|
+
onCollapsedGroupIdsChange?: (ids: string[]) => void;
|
|
150
|
+
enableSorting?: boolean;
|
|
151
|
+
sorting?: SortingState;
|
|
152
|
+
defaultSorting?: SortingState;
|
|
153
|
+
onSortingChange?: (sorting: SortingState) => void;
|
|
154
|
+
columnVisibility?: ColumnVisibilityState;
|
|
155
|
+
defaultColumnVisibility?: ColumnVisibilityState;
|
|
156
|
+
onColumnVisibilityChange?: (visibility: ColumnVisibilityState) => void;
|
|
157
|
+
columnOrder?: ColumnOrderState;
|
|
158
|
+
defaultColumnOrder?: ColumnOrderState;
|
|
159
|
+
onColumnOrderChange?: (order: ColumnOrderState) => void;
|
|
160
|
+
selectionMode?: TableComponentSelectionMode;
|
|
161
|
+
rowSelection?: RowSelectionState;
|
|
162
|
+
defaultRowSelection?: RowSelectionState;
|
|
163
|
+
onRowSelectionChange?: (selection: RowSelectionState) => void;
|
|
164
|
+
expanded?: ExpandedState;
|
|
165
|
+
defaultExpanded?: ExpandedState;
|
|
166
|
+
onExpandedChange?: (expanded: ExpandedState) => void;
|
|
167
|
+
expansionMode?: "single" | "multiple";
|
|
168
|
+
getRowCanExpand?: (row: TData) => boolean;
|
|
169
|
+
renderExpandedContent?: (context: TableComponentExpandedRowContext<TData>) => ReactNode;
|
|
170
|
+
/**
|
|
171
|
+
* Controlled Excel-style rectangular cell selection. Opt-in: supply both `cellSelection` and
|
|
172
|
+
* `onCellSelectionChange`. Enables drag and Shift+click range selection plus the clipboard
|
|
173
|
+
* hooks below.
|
|
174
|
+
*/
|
|
175
|
+
cellSelection?: TableCellSelection | null;
|
|
176
|
+
onCellSelectionChange?: (selection: TableCellSelection | null) => void;
|
|
177
|
+
onCopyCells?: (payload: {
|
|
178
|
+
selection: TableCellSelection;
|
|
179
|
+
rect: TableCellRangeRect;
|
|
180
|
+
event: ClipboardEvent;
|
|
181
|
+
}) => void;
|
|
182
|
+
onPasteCells?: (payload: {
|
|
183
|
+
selection: TableCellSelection;
|
|
184
|
+
rect: TableCellRangeRect;
|
|
185
|
+
text: string;
|
|
186
|
+
event: ClipboardEvent;
|
|
187
|
+
}) => void;
|
|
188
|
+
onClearCells?: (payload: {
|
|
189
|
+
selection: TableCellSelection;
|
|
190
|
+
rect: TableCellRangeRect;
|
|
191
|
+
event: KeyboardEvent;
|
|
192
|
+
}) => void;
|
|
193
|
+
/**
|
|
194
|
+
* Drag-to-reorder. Indices are positions in the consumer's own data (source indices), never
|
|
195
|
+
* display positions. Rendering the handle is the consumer's job — see `renderRowDragHandle`.
|
|
196
|
+
*/
|
|
197
|
+
onReorderRows?: (fromSourceIndex: number, toSourceIndex: number, row: TData) => void;
|
|
198
|
+
enableRowReorder?: boolean;
|
|
199
|
+
/** Open the editor on a plain click instead of requiring a double-click (Excel-style). */
|
|
200
|
+
activateOnSingleClick?: boolean;
|
|
201
|
+
onCellClick?: (context: TableComponentCellContext<TData>) => void;
|
|
202
|
+
onCellDoubleClick?: (context: TableComponentCellContext<TData>) => void;
|
|
203
|
+
onCellActivate?: (context: TableComponentCellContext<TData>) => void;
|
|
204
|
+
};
|
|
205
|
+
export type { TableCellRangeRect, TableCellSelection };
|
|
206
|
+
export type { ColumnOrderState, ColumnVisibilityState, ExpandedState, RowSelectionState, SortingState, };
|
|
207
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/patterns/table-component/types.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { MouseEvent as ReactMouseEvent, PointerEvent as ReactPointerEvent } from 'react';
|
|
2
|
+
import { buildCellRangeRect, TableCellCoord, TableCellSelection } from '../table/cellRangeSelection';
|
|
3
|
+
export type UseCellRangeSelectionOptions = {
|
|
4
|
+
/** Range selection is opt-in: it turns on only when the consumer controls the selection. */
|
|
5
|
+
enabled: boolean;
|
|
6
|
+
selection: TableCellSelection | null | undefined;
|
|
7
|
+
onSelectionChange?: (selection: TableCellSelection | null) => void;
|
|
8
|
+
onCopyCells?: (payload: {
|
|
9
|
+
selection: TableCellSelection;
|
|
10
|
+
rect: ReturnType<typeof buildCellRangeRect> & object;
|
|
11
|
+
event: ClipboardEvent;
|
|
12
|
+
}) => void;
|
|
13
|
+
onPasteCells?: (payload: {
|
|
14
|
+
selection: TableCellSelection;
|
|
15
|
+
rect: ReturnType<typeof buildCellRangeRect> & object;
|
|
16
|
+
text: string;
|
|
17
|
+
event: ClipboardEvent;
|
|
18
|
+
}) => void;
|
|
19
|
+
onClearCells?: (payload: {
|
|
20
|
+
selection: TableCellSelection;
|
|
21
|
+
rect: ReturnType<typeof buildCellRangeRect> & object;
|
|
22
|
+
event: KeyboardEvent;
|
|
23
|
+
}) => void;
|
|
24
|
+
containerRef: {
|
|
25
|
+
current: HTMLElement | null;
|
|
26
|
+
};
|
|
27
|
+
/**
|
|
28
|
+
* Enter on the focused cell. Handled here, at the container, rather than per-cell: the cell the
|
|
29
|
+
* user is on rarely holds DOM focus itself, so a per-`<td>` handler misses almost every real
|
|
30
|
+
* keystroke. This mirrors the legacy renderer's `handleGridNavKeyDownCapture`.
|
|
31
|
+
*/
|
|
32
|
+
onActivateCell?: (coord: TableCellCoord) => void;
|
|
33
|
+
/**
|
|
34
|
+
* Open the editor on a plain click rather than requiring a double-click. Drag-to-select still
|
|
35
|
+
* works: activation happens on click only when the pointer never crossed the drag threshold.
|
|
36
|
+
*/
|
|
37
|
+
activateOnSingleClick?: boolean;
|
|
38
|
+
/** Row ids and column keys in display order — the axes the rectangle is resolved against. */
|
|
39
|
+
rowIds: readonly string[];
|
|
40
|
+
columnKeys: readonly string[];
|
|
41
|
+
};
|
|
42
|
+
export type UseCellRangeSelectionResult = {
|
|
43
|
+
onPointerDownCapture: (event: ReactPointerEvent<HTMLElement>) => void;
|
|
44
|
+
onClickCapture: (event: ReactMouseEvent<HTMLElement>) => void;
|
|
45
|
+
onKeyDownCapture: (event: React.KeyboardEvent<HTMLElement>) => void;
|
|
46
|
+
onDoubleClickCapture: (event: ReactMouseEvent<HTMLElement>) => void;
|
|
47
|
+
isDragging: boolean;
|
|
48
|
+
};
|
|
49
|
+
export declare function useCellRangeSelection({ enabled, selection, onSelectionChange, onCopyCells, onPasteCells, onClearCells, onActivateCell, activateOnSingleClick, containerRef, rowIds, columnKeys, }: UseCellRangeSelectionOptions): UseCellRangeSelectionResult;
|
|
50
|
+
//# sourceMappingURL=useCellRangeSelection.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useCellRangeSelection.d.ts","sourceRoot":"","sources":["../../../src/patterns/table-component/useCellRangeSelection.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,EAKL,KAAK,UAAU,IAAI,eAAe,EAClC,KAAK,YAAY,IAAI,iBAAiB,EACvC,MAAM,OAAO,CAAC;AACf,OAAO,EAEL,kBAAkB,EAMlB,KAAK,cAAc,EACnB,KAAK,kBAAkB,EACxB,MAAM,6BAA6B,CAAC;AAyBrC,MAAM,MAAM,4BAA4B,GAAG;IACzC,4FAA4F;IAC5F,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,kBAAkB,GAAG,IAAI,GAAG,SAAS,CAAC;IACjD,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,kBAAkB,GAAG,IAAI,KAAK,IAAI,CAAC;IACnE,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE;QACtB,SAAS,EAAE,kBAAkB,CAAC;QAC9B,IAAI,EAAE,UAAU,CAAC,OAAO,kBAAkB,CAAC,GAAG,MAAM,CAAC;QACrD,KAAK,EAAE,cAAc,CAAC;KACvB,KAAK,IAAI,CAAC;IACX,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE;QACvB,SAAS,EAAE,kBAAkB,CAAC;QAC9B,IAAI,EAAE,UAAU,CAAC,OAAO,kBAAkB,CAAC,GAAG,MAAM,CAAC;QACrD,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,cAAc,CAAC;KACvB,KAAK,IAAI,CAAC;IACX,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE;QACvB,SAAS,EAAE,kBAAkB,CAAC;QAC9B,IAAI,EAAE,UAAU,CAAC,OAAO,kBAAkB,CAAC,GAAG,MAAM,CAAC;QACrD,KAAK,EAAE,aAAa,CAAC;KACtB,KAAK,IAAI,CAAC;IACX,YAAY,EAAE;QAAE,OAAO,EAAE,WAAW,GAAG,IAAI,CAAA;KAAE,CAAC;IAC9C;;;;OAIG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IACjD;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,6FAA6F;IAC7F,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC;IAC1B,UAAU,EAAE,SAAS,MAAM,EAAE,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG;IACxC,oBAAoB,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACtE,cAAc,EAAE,CAAC,KAAK,EAAE,eAAe,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC9D,gBAAgB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACpE,oBAAoB,EAAE,CAAC,KAAK,EAAE,eAAe,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACpE,UAAU,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,wBAAgB,qBAAqB,CAAC,EACpC,OAAO,EACP,SAAS,EACT,iBAAiB,EACjB,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,cAAc,EACd,qBAA6B,EAC7B,YAAY,EACZ,MAAM,EACN,UAAU,GACX,EAAE,4BAA4B,GAAG,2BAA2B,CA+V5D"}
|
|
@@ -0,0 +1,218 @@
|
|
|
1
|
+
import { useRef as T, useState as W, useCallback as D, useEffect as h } from "react";
|
|
2
|
+
import { canStartCellRangeFromTarget as G, resolveCellCoordFromElement as y, selectionFromSingleCell as Y, buildCellRangeRect as X, nextKeyboardCellSelection as q, CELL_RANGE_DRAG_THRESHOLD_PX as B, hitTestGridCell as U } from "../table/cellRangeSelection.js";
|
|
3
|
+
import { isWithinCellEditor as I, getGridTabNeighbor as j, getGridNeighbor as z, focusGridCell as A } from "../table/useGridKeyboardNavigation.js";
|
|
4
|
+
const J = {
|
|
5
|
+
ArrowUp: "up",
|
|
6
|
+
ArrowDown: "down",
|
|
7
|
+
ArrowLeft: "left",
|
|
8
|
+
ArrowRight: "right"
|
|
9
|
+
};
|
|
10
|
+
function $({
|
|
11
|
+
enabled: i,
|
|
12
|
+
selection: u,
|
|
13
|
+
onSelectionChange: b,
|
|
14
|
+
onCopyCells: x,
|
|
15
|
+
onPasteCells: k,
|
|
16
|
+
onClearCells: K,
|
|
17
|
+
onActivateCell: d,
|
|
18
|
+
activateOnSingleClick: F = !1,
|
|
19
|
+
containerRef: s,
|
|
20
|
+
rowIds: l,
|
|
21
|
+
columnKeys: w
|
|
22
|
+
}) {
|
|
23
|
+
const E = T(null), P = T(!1), [S, M] = W(!1), L = T({ selection: u, rowIds: l, columnKeys: w, onSelectionChange: b });
|
|
24
|
+
L.current = { selection: u, rowIds: l, columnKeys: w, onSelectionChange: b };
|
|
25
|
+
const a = D((r) => {
|
|
26
|
+
var e, t;
|
|
27
|
+
(t = (e = L.current).onSelectionChange) == null || t.call(e, r);
|
|
28
|
+
}, []), _ = D(
|
|
29
|
+
(r) => {
|
|
30
|
+
if (!i || r.button !== 0) return;
|
|
31
|
+
const e = G(
|
|
32
|
+
r.target,
|
|
33
|
+
s.current
|
|
34
|
+
);
|
|
35
|
+
if (!e) return;
|
|
36
|
+
const t = y(e);
|
|
37
|
+
if (!t) return;
|
|
38
|
+
const n = L.current.selection, o = r.shiftKey && n != null, c = o ? n.anchor : t;
|
|
39
|
+
P.current = !1, E.current = {
|
|
40
|
+
pointerId: r.pointerId,
|
|
41
|
+
startX: r.clientX,
|
|
42
|
+
startY: r.clientY,
|
|
43
|
+
active: !1,
|
|
44
|
+
anchor: c,
|
|
45
|
+
focus: t
|
|
46
|
+
}, a(o ? { anchor: c, focus: t } : Y(t));
|
|
47
|
+
},
|
|
48
|
+
[i, s, a]
|
|
49
|
+
);
|
|
50
|
+
h(() => {
|
|
51
|
+
if (!i) return;
|
|
52
|
+
const r = (n, o) => {
|
|
53
|
+
const c = E.current, f = s.current;
|
|
54
|
+
if (!c || !f) return;
|
|
55
|
+
const g = U(f, n, o);
|
|
56
|
+
if (!g) return;
|
|
57
|
+
const m = y(g);
|
|
58
|
+
m && (m.rowId === c.focus.rowId && m.columnKey === c.focus.columnKey || (c.focus = m, a({ anchor: c.anchor, focus: m })));
|
|
59
|
+
}, e = (n) => {
|
|
60
|
+
const o = E.current;
|
|
61
|
+
if (!(!o || n.pointerId !== o.pointerId)) {
|
|
62
|
+
if (!o.active) {
|
|
63
|
+
if (Math.abs(n.clientX - o.startX) + Math.abs(n.clientY - o.startY) < B) return;
|
|
64
|
+
o.active = !0, P.current = !0, M(!0);
|
|
65
|
+
}
|
|
66
|
+
n.preventDefault(), r(n.clientX, n.clientY);
|
|
67
|
+
}
|
|
68
|
+
}, t = (n) => {
|
|
69
|
+
const o = E.current;
|
|
70
|
+
!o || n.pointerId !== o.pointerId || (E.current = null, M(!1));
|
|
71
|
+
};
|
|
72
|
+
return window.addEventListener("pointermove", e), window.addEventListener("pointerup", t), window.addEventListener("pointercancel", t), () => {
|
|
73
|
+
window.removeEventListener("pointermove", e), window.removeEventListener("pointerup", t), window.removeEventListener("pointercancel", t);
|
|
74
|
+
};
|
|
75
|
+
}, [i, s, a]), h(() => {
|
|
76
|
+
if (!i || !u) return;
|
|
77
|
+
const r = (e) => {
|
|
78
|
+
const t = s.current;
|
|
79
|
+
t && !t.contains(e.target) && a(null);
|
|
80
|
+
};
|
|
81
|
+
return document.addEventListener("pointerdown", r, !0), () => document.removeEventListener("pointerdown", r, !0);
|
|
82
|
+
}, [i, u, s, a]), h(() => {
|
|
83
|
+
if (!S) return;
|
|
84
|
+
const r = document.body.style.userSelect;
|
|
85
|
+
return document.body.style.userSelect = "none", () => {
|
|
86
|
+
document.body.style.userSelect = r;
|
|
87
|
+
};
|
|
88
|
+
}, [S]), h(() => {
|
|
89
|
+
if (!i || !u) return;
|
|
90
|
+
const r = (n) => {
|
|
91
|
+
const o = s.current;
|
|
92
|
+
if (!o || I(n.target)) return !1;
|
|
93
|
+
const c = document.activeElement;
|
|
94
|
+
return c && o.contains(c) ? !0 : n.target instanceof Node && o.contains(n.target);
|
|
95
|
+
}, e = (n) => {
|
|
96
|
+
if (!x || !r(n)) return;
|
|
97
|
+
const o = X(u, l, w);
|
|
98
|
+
o && (n.preventDefault(), x({ selection: u, rect: o, event: n }));
|
|
99
|
+
}, t = (n) => {
|
|
100
|
+
var c;
|
|
101
|
+
if (!k || !r(n)) return;
|
|
102
|
+
const o = X(u, l, w);
|
|
103
|
+
o && (n.preventDefault(), k({
|
|
104
|
+
selection: u,
|
|
105
|
+
rect: o,
|
|
106
|
+
text: ((c = n.clipboardData) == null ? void 0 : c.getData("text/plain")) ?? "",
|
|
107
|
+
event: n
|
|
108
|
+
}));
|
|
109
|
+
};
|
|
110
|
+
return document.addEventListener("copy", e), document.addEventListener("paste", t), () => {
|
|
111
|
+
document.removeEventListener("copy", e), document.removeEventListener("paste", t);
|
|
112
|
+
};
|
|
113
|
+
}, [
|
|
114
|
+
i,
|
|
115
|
+
u,
|
|
116
|
+
l,
|
|
117
|
+
w,
|
|
118
|
+
x,
|
|
119
|
+
k,
|
|
120
|
+
s
|
|
121
|
+
]);
|
|
122
|
+
const H = D(
|
|
123
|
+
(r) => {
|
|
124
|
+
var m;
|
|
125
|
+
if (!i || I(r.target)) return;
|
|
126
|
+
const { rowIds: e, columnKeys: t } = L.current;
|
|
127
|
+
if (r.key === "Enter" && d) {
|
|
128
|
+
const p = r.target instanceof HTMLElement ? r.target.closest("[data-grid-cell]") : null, N = (u == null ? void 0 : u.focus) ?? (p ? y(p) : null);
|
|
129
|
+
if (!N) return;
|
|
130
|
+
r.preventDefault(), r.stopPropagation(), d(N);
|
|
131
|
+
return;
|
|
132
|
+
}
|
|
133
|
+
if (u && K && (r.key === "Delete" || r.key === "Backspace")) {
|
|
134
|
+
const p = X(u, e, t);
|
|
135
|
+
if (!p) return;
|
|
136
|
+
r.preventDefault(), K({ selection: u, rect: p, event: r.nativeEvent });
|
|
137
|
+
return;
|
|
138
|
+
}
|
|
139
|
+
if (r.key === "Escape") {
|
|
140
|
+
if (!u) return;
|
|
141
|
+
r.preventDefault(), r.stopPropagation(), a(null);
|
|
142
|
+
const p = document.activeElement;
|
|
143
|
+
p instanceof HTMLElement && ((m = s.current) != null && m.contains(p)) && p.blur();
|
|
144
|
+
return;
|
|
145
|
+
}
|
|
146
|
+
const n = J[r.key], o = r.key === "Tab";
|
|
147
|
+
if (!n && !o || !u) return;
|
|
148
|
+
const c = u.focus, f = o ? j(
|
|
149
|
+
s.current,
|
|
150
|
+
e,
|
|
151
|
+
t,
|
|
152
|
+
c.rowId,
|
|
153
|
+
c.columnKey,
|
|
154
|
+
!r.shiftKey
|
|
155
|
+
) : z(
|
|
156
|
+
s.current,
|
|
157
|
+
e,
|
|
158
|
+
t,
|
|
159
|
+
c.rowId,
|
|
160
|
+
c.columnKey,
|
|
161
|
+
n
|
|
162
|
+
);
|
|
163
|
+
if (!f && o) return;
|
|
164
|
+
const g = q(
|
|
165
|
+
c,
|
|
166
|
+
f ? {
|
|
167
|
+
rowId: f.rowId,
|
|
168
|
+
columnKey: f.columnKey,
|
|
169
|
+
sourceIndex: f.sourceIndex
|
|
170
|
+
} : null,
|
|
171
|
+
u,
|
|
172
|
+
!o && r.shiftKey
|
|
173
|
+
);
|
|
174
|
+
!g || g === u || (r.preventDefault(), r.stopPropagation(), a(g), f && requestAnimationFrame(
|
|
175
|
+
() => A(
|
|
176
|
+
s.current,
|
|
177
|
+
f.rowId,
|
|
178
|
+
f.columnKey
|
|
179
|
+
)
|
|
180
|
+
));
|
|
181
|
+
},
|
|
182
|
+
[i, u, K, d, s, a]
|
|
183
|
+
), O = D(
|
|
184
|
+
(r) => {
|
|
185
|
+
if (!i || !F || !d || P.current || I(r.target)) return;
|
|
186
|
+
const e = G(
|
|
187
|
+
r.target,
|
|
188
|
+
s.current
|
|
189
|
+
);
|
|
190
|
+
if (!e) return;
|
|
191
|
+
const t = y(e);
|
|
192
|
+
t && (r.preventDefault(), r.stopPropagation(), d(t));
|
|
193
|
+
},
|
|
194
|
+
[i, F, d, s]
|
|
195
|
+
), C = D(
|
|
196
|
+
(r) => {
|
|
197
|
+
if (!i || !d || I(r.target)) return;
|
|
198
|
+
const e = G(
|
|
199
|
+
r.target,
|
|
200
|
+
s.current
|
|
201
|
+
);
|
|
202
|
+
if (!e) return;
|
|
203
|
+
const t = y(e);
|
|
204
|
+
t && (r.preventDefault(), r.stopPropagation(), a(Y(t)), d(t));
|
|
205
|
+
},
|
|
206
|
+
[i, d, s, a]
|
|
207
|
+
);
|
|
208
|
+
return {
|
|
209
|
+
onPointerDownCapture: _,
|
|
210
|
+
onClickCapture: O,
|
|
211
|
+
onKeyDownCapture: H,
|
|
212
|
+
onDoubleClickCapture: C,
|
|
213
|
+
isDragging: S
|
|
214
|
+
};
|
|
215
|
+
}
|
|
216
|
+
export {
|
|
217
|
+
$ as useCellRangeSelection
|
|
218
|
+
};
|