@rio-cloud/rio-uikit 2.3.0 → 2.4.0
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/MapPreviousViewportButton.d.ts +2 -0
- package/MapPreviousViewportButton.js +5 -0
- package/MapPreviousViewportButton.js.map +1 -0
- package/Table.js +15 -14
- package/TableNext.js +15 -14
- package/components/map/components/Map.js +175 -157
- package/components/map/components/Map.js.map +1 -1
- package/components/map/components/MapContext.d.ts +2 -0
- package/components/map/components/MapContext.js +8 -6
- package/components/map/components/MapContext.js.map +1 -1
- package/components/map/components/MapPosition.d.ts +1 -1
- package/components/map/components/MapPosition.js +20 -13
- package/components/map/components/MapPosition.js.map +1 -1
- package/components/map/components/features/MapZoom.d.ts +0 -1
- package/components/map/components/features/MapZoom.js +12 -20
- package/components/map/components/features/MapZoom.js.map +1 -1
- package/components/map/components/features/settings/MapSettingsTile.d.ts +27 -0
- package/components/map/components/features/settings/MapSettingsTile.js +17 -17
- package/components/map/components/features/settings/MapSettingsTile.js.map +1 -1
- package/components/map/components/features/settings/buttons/MapPreviousViewportButton.d.ts +10 -0
- package/components/map/components/features/settings/buttons/MapPreviousViewportButton.js +23 -0
- package/components/map/components/features/settings/buttons/MapPreviousViewportButton.js.map +1 -0
- package/components/map/hooks/useMapViewportHistory.d.ts +19 -0
- package/components/map/hooks/useMapViewportHistory.js +116 -0
- package/components/map/hooks/useMapViewportHistory.js.map +1 -0
- package/components/map/icons/MapIcon.d.ts +1 -0
- package/components/map/icons/MapIcon.js +46 -37
- package/components/map/icons/MapIcon.js.map +1 -1
- package/components/map/utils/mapTypes.d.ts +6 -0
- package/components/map/utils/mapTypes.js.map +1 -1
- package/components/selects/Multiselect.d.ts +6 -0
- package/components/selects/Multiselect.js +85 -83
- package/components/selects/Multiselect.js.map +1 -1
- package/components/selects/Select.d.ts +6 -0
- package/components/selects/Select.js +79 -71
- package/components/selects/Select.js.map +1 -1
- package/components/table/Table.d.ts +2 -0
- package/components/table/Table.js +162 -158
- package/components/table/Table.js.map +1 -1
- package/components/table/Table.types.d.ts +6 -0
- package/components/table/TableExpandAllGroupsButton.d.ts +25 -0
- package/components/table/TableExpandAllGroupsButton.js +27 -0
- package/components/table/TableExpandAllGroupsButton.js.map +1 -0
- package/components/table/TableExpandedRow.js +77 -63
- package/components/table/TableExpandedRow.js.map +1 -1
- package/components/table/TableExpanderButton.js +11 -11
- package/components/table/TableExpanderButton.js.map +1 -1
- package/components/table/TableGroupRow.d.ts +13 -1
- package/components/table/TableGroupRow.js +57 -23
- package/components/table/TableGroupRow.js.map +1 -1
- package/components/table/TableHeader.js +40 -39
- package/components/table/TableHeader.js.map +1 -1
- package/components/table/TableRow.js +66 -52
- package/components/table/TableRow.js.map +1 -1
- package/components/table/context/TableRenderConfigContext.d.ts +2 -1
- package/components/table/context/TableRenderConfigContext.js.map +1 -1
- package/components/table/render/header/TableHeaderCellContent.js +4 -4
- package/components/table/render/header/TableHeaderCellContent.js.map +1 -1
- package/components/table/render/header/TableHeaderSelectionCell.d.ts +2 -0
- package/components/table/render/header/TableHeaderSelectionCell.js +22 -12
- package/components/table/render/header/TableHeaderSelectionCell.js.map +1 -1
- package/components/table/runtime/useRenderDraftState.js +1 -0
- package/components/table/runtime/useRenderDraftState.js.map +1 -1
- package/components/table/selection/useInternalTableSelectionState.js +12 -10
- package/components/table/selection/useInternalTableSelectionState.js.map +1 -1
- package/package.json +1 -1
- package/version.d.ts +1 -1
- package/version.js +1 -1
- package/version.js.map +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useSensors as N, useSensor as
|
|
1
|
+
import { jsxs as S, jsx as o } from "react/jsx-runtime";
|
|
2
|
+
import { useSensors as N, useSensor as V, PointerSensor as j, DndContext as B, DragOverlay as M } from "@dnd-kit/core";
|
|
3
3
|
import { restrictToHorizontalAxis as W } from "@dnd-kit/modifiers";
|
|
4
4
|
import { SortableContext as $, horizontalListSortingStrategy as G } from "@dnd-kit/sortable";
|
|
5
5
|
import { useRef as Y, useState as b, useLayoutEffect as q } from "react";
|
|
@@ -14,65 +14,65 @@ import { useOptionalTableLayoutContext as ee } from "./context/TableLayoutContex
|
|
|
14
14
|
import { useOptionalTableRenderConfigContext as te } from "./context/TableRenderConfigContext.js";
|
|
15
15
|
import { TableSectionContext as R, TableHeaderContext as w } from "./context/TableStructureContext.js";
|
|
16
16
|
import { useOptionalTableRenderContext as oe } from "./context/TableRenderContext.js";
|
|
17
|
-
const
|
|
18
|
-
const { children:
|
|
19
|
-
if (!s || !
|
|
17
|
+
const m = "--table-sticky-header-height", xe = (D) => {
|
|
18
|
+
const { children: u, className: H, sticky: i = !1, ...T } = D, s = oe(), c = te(), t = Z(), n = ee();
|
|
19
|
+
if (!s || !c || !t || !n)
|
|
20
20
|
return null;
|
|
21
|
-
const A = N(j
|
|
22
|
-
|
|
21
|
+
const A = N(V(j, { activationConstraint: { distance: 6 } })), r = Y(0), [g, , { blockSize: C }] = J();
|
|
22
|
+
r.current = 0;
|
|
23
23
|
const [h, f] = b(void 0), [E, v] = b(void 0), P = F(
|
|
24
|
-
|
|
24
|
+
n.tableHeadRowRef,
|
|
25
25
|
g
|
|
26
|
-
),
|
|
27
|
-
rowCount:
|
|
26
|
+
), k = !!n.onColumnDragEnd && (n.draggableColumnKeys?.length ?? 0) > 1, d = s.header, l = d?.rowCount ?? 1, I = d ?? {
|
|
27
|
+
rowCount: l,
|
|
28
28
|
totalColumnCount: s.columns.length,
|
|
29
29
|
columns: []
|
|
30
|
-
},
|
|
30
|
+
}, K = h ? d?.columns.find((e) => (e.columnKey ?? String(e.key)) === h) : void 0, p = () => {
|
|
31
31
|
f(void 0), v(void 0);
|
|
32
|
-
},
|
|
32
|
+
}, O = (e) => {
|
|
33
33
|
f(String(e.active.id)), v(e.active.rect.current.initial?.width ?? void 0);
|
|
34
34
|
}, z = (e) => {
|
|
35
35
|
p();
|
|
36
36
|
}, _ = (e) => {
|
|
37
|
-
p(),
|
|
37
|
+
p(), n.onColumnDragEnd?.(e);
|
|
38
38
|
};
|
|
39
39
|
q(() => {
|
|
40
|
-
const e = g.current,
|
|
41
|
-
if (!
|
|
40
|
+
const e = g.current, a = e?.closest(".table");
|
|
41
|
+
if (!a)
|
|
42
42
|
return;
|
|
43
43
|
if (!i || !e) {
|
|
44
|
-
|
|
44
|
+
a.style.removeProperty(m);
|
|
45
45
|
return;
|
|
46
46
|
}
|
|
47
47
|
const L = Math.max(C ?? e.getBoundingClientRect().height ?? 0, 0);
|
|
48
|
-
return
|
|
49
|
-
|
|
48
|
+
return a.style.setProperty(m, `${L}px`), () => {
|
|
49
|
+
a.style.removeProperty(m);
|
|
50
50
|
};
|
|
51
51
|
}, [C, i]);
|
|
52
|
-
const
|
|
53
|
-
|
|
52
|
+
const x = k && n.draggableColumnKeys ? /* @__PURE__ */ S(
|
|
53
|
+
B,
|
|
54
54
|
{
|
|
55
55
|
sensors: A,
|
|
56
56
|
collisionDetection: X,
|
|
57
57
|
modifiers: [W],
|
|
58
|
-
onDragStart:
|
|
58
|
+
onDragStart: O,
|
|
59
59
|
onDragCancel: z,
|
|
60
60
|
onDragEnd: _,
|
|
61
61
|
children: [
|
|
62
|
-
/* @__PURE__ */ o($, { items:
|
|
63
|
-
/* @__PURE__ */ o(
|
|
62
|
+
/* @__PURE__ */ o($, { items: n.draggableColumnKeys, strategy: G, children: u }),
|
|
63
|
+
/* @__PURE__ */ o(M, { adjustScale: !1, dropAnimation: null, children: /* @__PURE__ */ o(
|
|
64
64
|
Q,
|
|
65
65
|
{
|
|
66
|
-
column:
|
|
67
|
-
header:
|
|
66
|
+
column: K,
|
|
67
|
+
header: I,
|
|
68
68
|
showSelectionColumn: t.showSelectionColumn,
|
|
69
69
|
width: E
|
|
70
70
|
}
|
|
71
71
|
) })
|
|
72
72
|
]
|
|
73
73
|
}
|
|
74
|
-
) :
|
|
75
|
-
return
|
|
74
|
+
) : u;
|
|
75
|
+
return c.isTableView ? /* @__PURE__ */ o(
|
|
76
76
|
"div",
|
|
77
77
|
{
|
|
78
78
|
...T,
|
|
@@ -84,11 +84,11 @@ const d = "--table-sticky-header-height", Se = (D) => {
|
|
|
84
84
|
{
|
|
85
85
|
value: {
|
|
86
86
|
nextHeaderRowIndex: () => {
|
|
87
|
-
const e =
|
|
88
|
-
return
|
|
87
|
+
const e = r.current;
|
|
88
|
+
return r.current += 1, e;
|
|
89
89
|
}
|
|
90
90
|
},
|
|
91
|
-
children: /* @__PURE__ */
|
|
91
|
+
children: /* @__PURE__ */ S(
|
|
92
92
|
"div",
|
|
93
93
|
{
|
|
94
94
|
className: y(
|
|
@@ -96,8 +96,8 @@ const d = "--table-sticky-header-height", Se = (D) => {
|
|
|
96
96
|
t.selectionHeaderContent && "table-head-grid-custom-selection",
|
|
97
97
|
H
|
|
98
98
|
),
|
|
99
|
-
role:
|
|
100
|
-
style: { gridTemplateRows: `repeat(${
|
|
99
|
+
role: l === 1 ? "row" : "presentation",
|
|
100
|
+
style: { gridTemplateRows: `repeat(${l}, auto)` },
|
|
101
101
|
children: [
|
|
102
102
|
t.showSelectionColumn && /* @__PURE__ */ o(
|
|
103
103
|
U,
|
|
@@ -106,11 +106,12 @@ const d = "--table-sticky-header-height", Se = (D) => {
|
|
|
106
106
|
isSomeRowsSelected: t.isSomeRowsSelected,
|
|
107
107
|
onToggleAllSelection: t.onToggleAllSelection,
|
|
108
108
|
disabled: !t.hasSelectableRows,
|
|
109
|
-
rowCount:
|
|
110
|
-
selectionHeaderContent: t.selectionHeaderContent
|
|
109
|
+
rowCount: l,
|
|
110
|
+
selectionHeaderContent: t.selectionHeaderContent,
|
|
111
|
+
selectionCheckboxVerticalAlignment: c.selectionCheckboxVerticalAlignment
|
|
111
112
|
}
|
|
112
113
|
),
|
|
113
|
-
|
|
114
|
+
x
|
|
114
115
|
]
|
|
115
116
|
}
|
|
116
117
|
)
|
|
@@ -122,15 +123,15 @@ const d = "--table-sticky-header-height", Se = (D) => {
|
|
|
122
123
|
{
|
|
123
124
|
value: {
|
|
124
125
|
nextHeaderRowIndex: () => {
|
|
125
|
-
const e =
|
|
126
|
-
return
|
|
126
|
+
const e = r.current;
|
|
127
|
+
return r.current += 1, e;
|
|
127
128
|
}
|
|
128
129
|
},
|
|
129
|
-
children:
|
|
130
|
+
children: x
|
|
130
131
|
}
|
|
131
132
|
) });
|
|
132
133
|
};
|
|
133
134
|
export {
|
|
134
|
-
|
|
135
|
+
xe as default
|
|
135
136
|
};
|
|
136
137
|
//# sourceMappingURL=TableHeader.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableHeader.js","sources":["../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import {\n DndContext,\n DragOverlay,\n PointerSensor,\n type DragCancelEvent,\n type DragEndEvent,\n type DragStartEvent,\n useSensor,\n useSensors,\n} from '@dnd-kit/core';\nimport { restrictToHorizontalAxis } from '@dnd-kit/modifiers';\nimport { horizontalListSortingStrategy, SortableContext } from '@dnd-kit/sortable';\nimport { type MutableRefObject, type ReactNode, useLayoutEffect, useRef, useState } from 'react';\n\nimport useMergeRefs from '../../hooks/useMergeRefs';\nimport useResizeObserver from '../../useResizeObserver';\nimport classNames from '../../utils/classNames';\nimport type { TableHtmlAttributes, TableRowData } from './Table.types';\nimport TableHeaderDragOverlay from './render/header/TableHeaderDragOverlay';\nimport TableHeaderSelectionCell from './render/header/TableHeaderSelectionCell';\nimport { resolveColumnCollisionDetection } from './render/header/resolveColumnCollisionDetection';\nimport { useOptionalTableInteractionContext } from './context/TableInteractionContext';\nimport { useOptionalTableLayoutContext } from './context/TableLayoutContext';\nimport { useOptionalTableRenderConfigContext } from './context/TableRenderConfigContext';\nimport { TableHeaderContext, TableSectionContext } from './context/TableStructureContext';\nimport { useOptionalTableRenderContext } from './context/TableRenderContext';\n\nexport type TableHeaderProps<RowType extends TableRowData> = TableHtmlAttributes & {\n /**\n * Additional class names for the header grid wrapper.\n */\n className?: string;\n\n /**\n * Keeps the table header sticky while the page scrolls.\n * The sticky top reference follows `Table.stickyReference`.\n *\n * This applies in `TABLE` view only.\n *\n * @default false\n */\n sticky?: boolean;\n\n /**\n * Table header content.\n */\n children?: ReactNode;\n};\n\nconst TABLE_STICKY_HEADER_HEIGHT_VAR = '--table-sticky-header-height';\n\nconst TableHeader = <RowType extends TableRowData = TableRowData>(props: TableHeaderProps<RowType>) => {\n const { children, className, sticky = false, ...remainingProps } = props;\n\n const renderContext = useOptionalTableRenderContext<RowType>();\n const renderConfigContext = useOptionalTableRenderConfigContext<RowType>();\n const interactionContext = useOptionalTableInteractionContext<RowType>();\n const layoutContext = useOptionalTableLayoutContext();\n\n if (!renderContext || !renderConfigContext || !interactionContext || !layoutContext) {\n return null;\n }\n\n const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }));\n\n const headerRowIndexRef = useRef(0);\n const [headerElementRef, , { blockSize: headerBlockSize }] = useResizeObserver<HTMLDivElement>();\n headerRowIndexRef.current = 0;\n\n const [activeDraggedColumnKey, setActiveDraggedColumnKey] = useState<string | undefined>(undefined);\n const [activeDraggedColumnWidth, setActiveDraggedColumnWidth] = useState<number | undefined>(undefined);\n const mergedHeaderRefs = useMergeRefs(\n layoutContext.tableHeadRowRef as MutableRefObject<HTMLDivElement | null>,\n headerElementRef\n );\n\n const canDragColumns = !!layoutContext.onColumnDragEnd && (layoutContext.draggableColumnKeys?.length ?? 0) > 1;\n const header = renderContext.header;\n const headerRowCount = header?.rowCount ?? 1;\n const overlayHeader = header ?? {\n rowCount: headerRowCount,\n totalColumnCount: renderContext.columns.length,\n columns: [],\n };\n\n const activeDraggedColumn = activeDraggedColumnKey\n ? header?.columns.find(column => (column.columnKey ?? String(column.key)) === activeDraggedColumnKey)\n : undefined;\n\n const clearActiveDraggedColumn = () => {\n setActiveDraggedColumnKey(undefined);\n setActiveDraggedColumnWidth(undefined);\n };\n\n const handleDragStart = (event: DragStartEvent) => {\n setActiveDraggedColumnKey(String(event.active.id));\n setActiveDraggedColumnWidth(event.active.rect.current.initial?.width ?? undefined);\n };\n\n const handleDragCancel = (_event: DragCancelEvent) => {\n clearActiveDraggedColumn();\n };\n\n const handleDragEnd = (event: DragEndEvent) => {\n clearActiveDraggedColumn();\n layoutContext.onColumnDragEnd?.(event);\n };\n\n useLayoutEffect(() => {\n const headerElement = headerElementRef.current;\n const tableElement = headerElement?.closest<HTMLElement>('.table');\n\n if (!tableElement) {\n return;\n }\n\n if (!sticky || !headerElement) {\n tableElement.style.removeProperty(TABLE_STICKY_HEADER_HEIGHT_VAR);\n return;\n }\n\n const resolvedHeight = Math.max(headerBlockSize ?? headerElement.getBoundingClientRect().height ?? 0, 0);\n\n tableElement.style.setProperty(TABLE_STICKY_HEADER_HEIGHT_VAR, `${resolvedHeight}px`);\n\n return () => {\n tableElement.style.removeProperty(TABLE_STICKY_HEADER_HEIGHT_VAR);\n };\n }, [headerBlockSize, sticky]);\n\n const content =\n canDragColumns && layoutContext.draggableColumnKeys ? (\n <DndContext\n sensors={sensors}\n collisionDetection={resolveColumnCollisionDetection}\n modifiers={[restrictToHorizontalAxis]}\n onDragStart={handleDragStart}\n onDragCancel={handleDragCancel}\n onDragEnd={handleDragEnd}\n >\n <SortableContext items={layoutContext.draggableColumnKeys} strategy={horizontalListSortingStrategy}>\n {children}\n </SortableContext>\n <DragOverlay adjustScale={false} dropAnimation={null}>\n <TableHeaderDragOverlay\n column={activeDraggedColumn}\n header={overlayHeader}\n showSelectionColumn={interactionContext.showSelectionColumn}\n width={activeDraggedColumnWidth}\n />\n </DragOverlay>\n </DndContext>\n ) : (\n children\n );\n\n if (!renderConfigContext.isTableView) {\n return (\n <TableSectionContext.Provider value='header'>\n <TableHeaderContext.Provider\n value={{\n nextHeaderRowIndex: () => {\n const nextHeaderRowIndex = headerRowIndexRef.current;\n headerRowIndexRef.current += 1;\n return nextHeaderRowIndex;\n },\n }}\n >\n {content}\n </TableHeaderContext.Provider>\n </TableSectionContext.Provider>\n );\n }\n\n return (\n <div\n {...remainingProps}\n className={classNames('table-head', sticky && 'table-head-sticky')}\n role='rowgroup'\n ref={mergedHeaderRefs}\n >\n <TableSectionContext.Provider value='header'>\n <TableHeaderContext.Provider\n value={{\n nextHeaderRowIndex: () => {\n const nextHeaderRowIndex = headerRowIndexRef.current;\n headerRowIndexRef.current += 1;\n return nextHeaderRowIndex;\n },\n }}\n >\n <div\n className={classNames(\n 'table-head-grid',\n interactionContext.selectionHeaderContent && 'table-head-grid-custom-selection',\n className\n )}\n role={headerRowCount === 1 ? 'row' : 'presentation'}\n style={{ gridTemplateRows: `repeat(${headerRowCount}, auto)` }}\n >\n {interactionContext.showSelectionColumn && (\n <TableHeaderSelectionCell\n isAllSelected={interactionContext.isAllRowsSelected}\n isSomeRowsSelected={interactionContext.isSomeRowsSelected}\n onToggleAllSelection={interactionContext.onToggleAllSelection}\n disabled={!interactionContext.hasSelectableRows}\n rowCount={headerRowCount}\n selectionHeaderContent={interactionContext.selectionHeaderContent}\n />\n )}\n {content}\n </div>\n </TableHeaderContext.Provider>\n </TableSectionContext.Provider>\n </div>\n );\n};\n\nexport default TableHeader;\n"],"names":["TABLE_STICKY_HEADER_HEIGHT_VAR","TableHeader","props","children","className","sticky","remainingProps","renderContext","useOptionalTableRenderContext","renderConfigContext","useOptionalTableRenderConfigContext","interactionContext","useOptionalTableInteractionContext","layoutContext","useOptionalTableLayoutContext","sensors","useSensors","useSensor","PointerSensor","headerRowIndexRef","useRef","headerElementRef","headerBlockSize","useResizeObserver","activeDraggedColumnKey","setActiveDraggedColumnKey","useState","activeDraggedColumnWidth","setActiveDraggedColumnWidth","mergedHeaderRefs","useMergeRefs","canDragColumns","header","headerRowCount","overlayHeader","activeDraggedColumn","column","clearActiveDraggedColumn","handleDragStart","event","handleDragCancel","_event","handleDragEnd","useLayoutEffect","headerElement","tableElement","resolvedHeight","content","jsxs","DndContext","resolveColumnCollisionDetection","restrictToHorizontalAxis","jsx","SortableContext","horizontalListSortingStrategy","DragOverlay","TableHeaderDragOverlay","classNames","TableSectionContext","TableHeaderContext","nextHeaderRowIndex","TableHeaderSelectionCell"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TableHeader.js","sources":["../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import {\n DndContext,\n DragOverlay,\n PointerSensor,\n type DragCancelEvent,\n type DragEndEvent,\n type DragStartEvent,\n useSensor,\n useSensors,\n} from '@dnd-kit/core';\nimport { restrictToHorizontalAxis } from '@dnd-kit/modifiers';\nimport { horizontalListSortingStrategy, SortableContext } from '@dnd-kit/sortable';\nimport { type MutableRefObject, type ReactNode, useLayoutEffect, useRef, useState } from 'react';\n\nimport useMergeRefs from '../../hooks/useMergeRefs';\nimport useResizeObserver from '../../useResizeObserver';\nimport classNames from '../../utils/classNames';\nimport type { TableHtmlAttributes, TableRowData } from './Table.types';\nimport TableHeaderDragOverlay from './render/header/TableHeaderDragOverlay';\nimport TableHeaderSelectionCell from './render/header/TableHeaderSelectionCell';\nimport { resolveColumnCollisionDetection } from './render/header/resolveColumnCollisionDetection';\nimport { useOptionalTableInteractionContext } from './context/TableInteractionContext';\nimport { useOptionalTableLayoutContext } from './context/TableLayoutContext';\nimport { useOptionalTableRenderConfigContext } from './context/TableRenderConfigContext';\nimport { TableHeaderContext, TableSectionContext } from './context/TableStructureContext';\nimport { useOptionalTableRenderContext } from './context/TableRenderContext';\n\nexport type TableHeaderProps<RowType extends TableRowData> = TableHtmlAttributes & {\n /**\n * Additional class names for the header grid wrapper.\n */\n className?: string;\n\n /**\n * Keeps the table header sticky while the page scrolls.\n * The sticky top reference follows `Table.stickyReference`.\n *\n * This applies in `TABLE` view only.\n *\n * @default false\n */\n sticky?: boolean;\n\n /**\n * Table header content.\n */\n children?: ReactNode;\n};\n\nconst TABLE_STICKY_HEADER_HEIGHT_VAR = '--table-sticky-header-height';\n\nconst TableHeader = <RowType extends TableRowData = TableRowData>(props: TableHeaderProps<RowType>) => {\n const { children, className, sticky = false, ...remainingProps } = props;\n\n const renderContext = useOptionalTableRenderContext<RowType>();\n const renderConfigContext = useOptionalTableRenderConfigContext<RowType>();\n const interactionContext = useOptionalTableInteractionContext<RowType>();\n const layoutContext = useOptionalTableLayoutContext();\n\n if (!renderContext || !renderConfigContext || !interactionContext || !layoutContext) {\n return null;\n }\n\n const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }));\n\n const headerRowIndexRef = useRef(0);\n const [headerElementRef, , { blockSize: headerBlockSize }] = useResizeObserver<HTMLDivElement>();\n headerRowIndexRef.current = 0;\n\n const [activeDraggedColumnKey, setActiveDraggedColumnKey] = useState<string | undefined>(undefined);\n const [activeDraggedColumnWidth, setActiveDraggedColumnWidth] = useState<number | undefined>(undefined);\n const mergedHeaderRefs = useMergeRefs(\n layoutContext.tableHeadRowRef as MutableRefObject<HTMLDivElement | null>,\n headerElementRef\n );\n\n const canDragColumns = !!layoutContext.onColumnDragEnd && (layoutContext.draggableColumnKeys?.length ?? 0) > 1;\n const header = renderContext.header;\n const headerRowCount = header?.rowCount ?? 1;\n const overlayHeader = header ?? {\n rowCount: headerRowCount,\n totalColumnCount: renderContext.columns.length,\n columns: [],\n };\n\n const activeDraggedColumn = activeDraggedColumnKey\n ? header?.columns.find(column => (column.columnKey ?? String(column.key)) === activeDraggedColumnKey)\n : undefined;\n\n const clearActiveDraggedColumn = () => {\n setActiveDraggedColumnKey(undefined);\n setActiveDraggedColumnWidth(undefined);\n };\n\n const handleDragStart = (event: DragStartEvent) => {\n setActiveDraggedColumnKey(String(event.active.id));\n setActiveDraggedColumnWidth(event.active.rect.current.initial?.width ?? undefined);\n };\n\n const handleDragCancel = (_event: DragCancelEvent) => {\n clearActiveDraggedColumn();\n };\n\n const handleDragEnd = (event: DragEndEvent) => {\n clearActiveDraggedColumn();\n layoutContext.onColumnDragEnd?.(event);\n };\n\n useLayoutEffect(() => {\n const headerElement = headerElementRef.current;\n const tableElement = headerElement?.closest<HTMLElement>('.table');\n\n if (!tableElement) {\n return;\n }\n\n if (!sticky || !headerElement) {\n tableElement.style.removeProperty(TABLE_STICKY_HEADER_HEIGHT_VAR);\n return;\n }\n\n const resolvedHeight = Math.max(headerBlockSize ?? headerElement.getBoundingClientRect().height ?? 0, 0);\n\n tableElement.style.setProperty(TABLE_STICKY_HEADER_HEIGHT_VAR, `${resolvedHeight}px`);\n\n return () => {\n tableElement.style.removeProperty(TABLE_STICKY_HEADER_HEIGHT_VAR);\n };\n }, [headerBlockSize, sticky]);\n\n const content =\n canDragColumns && layoutContext.draggableColumnKeys ? (\n <DndContext\n sensors={sensors}\n collisionDetection={resolveColumnCollisionDetection}\n modifiers={[restrictToHorizontalAxis]}\n onDragStart={handleDragStart}\n onDragCancel={handleDragCancel}\n onDragEnd={handleDragEnd}\n >\n <SortableContext items={layoutContext.draggableColumnKeys} strategy={horizontalListSortingStrategy}>\n {children}\n </SortableContext>\n <DragOverlay adjustScale={false} dropAnimation={null}>\n <TableHeaderDragOverlay\n column={activeDraggedColumn}\n header={overlayHeader}\n showSelectionColumn={interactionContext.showSelectionColumn}\n width={activeDraggedColumnWidth}\n />\n </DragOverlay>\n </DndContext>\n ) : (\n children\n );\n\n if (!renderConfigContext.isTableView) {\n return (\n <TableSectionContext.Provider value='header'>\n <TableHeaderContext.Provider\n value={{\n nextHeaderRowIndex: () => {\n const nextHeaderRowIndex = headerRowIndexRef.current;\n headerRowIndexRef.current += 1;\n return nextHeaderRowIndex;\n },\n }}\n >\n {content}\n </TableHeaderContext.Provider>\n </TableSectionContext.Provider>\n );\n }\n\n return (\n <div\n {...remainingProps}\n className={classNames('table-head', sticky && 'table-head-sticky')}\n role='rowgroup'\n ref={mergedHeaderRefs}\n >\n <TableSectionContext.Provider value='header'>\n <TableHeaderContext.Provider\n value={{\n nextHeaderRowIndex: () => {\n const nextHeaderRowIndex = headerRowIndexRef.current;\n headerRowIndexRef.current += 1;\n return nextHeaderRowIndex;\n },\n }}\n >\n <div\n className={classNames(\n 'table-head-grid',\n interactionContext.selectionHeaderContent && 'table-head-grid-custom-selection',\n className\n )}\n role={headerRowCount === 1 ? 'row' : 'presentation'}\n style={{ gridTemplateRows: `repeat(${headerRowCount}, auto)` }}\n >\n {interactionContext.showSelectionColumn && (\n <TableHeaderSelectionCell\n isAllSelected={interactionContext.isAllRowsSelected}\n isSomeRowsSelected={interactionContext.isSomeRowsSelected}\n onToggleAllSelection={interactionContext.onToggleAllSelection}\n disabled={!interactionContext.hasSelectableRows}\n rowCount={headerRowCount}\n selectionHeaderContent={interactionContext.selectionHeaderContent}\n selectionCheckboxVerticalAlignment={\n renderConfigContext.selectionCheckboxVerticalAlignment\n }\n />\n )}\n {content}\n </div>\n </TableHeaderContext.Provider>\n </TableSectionContext.Provider>\n </div>\n );\n};\n\nexport default TableHeader;\n"],"names":["TABLE_STICKY_HEADER_HEIGHT_VAR","TableHeader","props","children","className","sticky","remainingProps","renderContext","useOptionalTableRenderContext","renderConfigContext","useOptionalTableRenderConfigContext","interactionContext","useOptionalTableInteractionContext","layoutContext","useOptionalTableLayoutContext","sensors","useSensors","useSensor","PointerSensor","headerRowIndexRef","useRef","headerElementRef","headerBlockSize","useResizeObserver","activeDraggedColumnKey","setActiveDraggedColumnKey","useState","activeDraggedColumnWidth","setActiveDraggedColumnWidth","mergedHeaderRefs","useMergeRefs","canDragColumns","header","headerRowCount","overlayHeader","activeDraggedColumn","column","clearActiveDraggedColumn","handleDragStart","event","handleDragCancel","_event","handleDragEnd","useLayoutEffect","headerElement","tableElement","resolvedHeight","content","jsxs","DndContext","resolveColumnCollisionDetection","restrictToHorizontalAxis","jsx","SortableContext","horizontalListSortingStrategy","DragOverlay","TableHeaderDragOverlay","classNames","TableSectionContext","TableHeaderContext","nextHeaderRowIndex","TableHeaderSelectionCell"],"mappings":";;;;;;;;;;;;;;;;AAiDA,MAAMA,IAAiC,gCAEjCC,KAAc,CAA8CC,MAAqC;AACnG,QAAM,EAAE,UAAAC,GAAU,WAAAC,GAAW,QAAAC,IAAS,IAAO,GAAGC,MAAmBJ,GAE7DK,IAAgBC,GAAA,GAChBC,IAAsBC,GAAA,GACtBC,IAAqBC,EAAA,GACrBC,IAAgBC,GAAA;AAEtB,MAAI,CAACP,KAAiB,CAACE,KAAuB,CAACE,KAAsB,CAACE;AAClE,WAAO;AAGX,QAAME,IAAUC,EAAWC,EAAUC,GAAe,EAAE,sBAAsB,EAAE,UAAU,EAAA,EAAE,CAAG,CAAC,GAExFC,IAAoBC,EAAO,CAAC,GAC5B,CAACC,KAAoB,EAAE,WAAWC,EAAA,CAAiB,IAAIC,EAAA;AAC7D,EAAAJ,EAAkB,UAAU;AAE5B,QAAM,CAACK,GAAwBC,CAAyB,IAAIC,EAA6B,MAAS,GAC5F,CAACC,GAA0BC,CAA2B,IAAIF,EAA6B,MAAS,GAChGG,IAAmBC;AAAA,IACrBjB,EAAc;AAAA,IACdQ;AAAA,EAAA,GAGEU,IAAiB,CAAC,CAAClB,EAAc,oBAAoBA,EAAc,qBAAqB,UAAU,KAAK,GACvGmB,IAASzB,EAAc,QACvB0B,IAAiBD,GAAQ,YAAY,GACrCE,IAAgBF,KAAU;AAAA,IAC5B,UAAUC;AAAA,IACV,kBAAkB1B,EAAc,QAAQ;AAAA,IACxC,SAAS,CAAA;AAAA,EAAC,GAGR4B,IAAsBX,IACtBQ,GAAQ,QAAQ,KAAK,CAAAI,OAAWA,EAAO,aAAa,OAAOA,EAAO,GAAG,OAAOZ,CAAsB,IAClG,QAEAa,IAA2B,MAAM;AACnC,IAAAZ,EAA0B,MAAS,GACnCG,EAA4B,MAAS;AAAA,EACzC,GAEMU,IAAkB,CAACC,MAA0B;AAC/C,IAAAd,EAA0B,OAAOc,EAAM,OAAO,EAAE,CAAC,GACjDX,EAA4BW,EAAM,OAAO,KAAK,QAAQ,SAAS,SAAS,MAAS;AAAA,EACrF,GAEMC,IAAmB,CAACC,MAA4B;AAClD,IAAAJ,EAAA;AAAA,EACJ,GAEMK,IAAgB,CAACH,MAAwB;AAC3C,IAAAF,EAAA,GACAxB,EAAc,kBAAkB0B,CAAK;AAAA,EACzC;AAEA,EAAAI,EAAgB,MAAM;AAClB,UAAMC,IAAgBvB,EAAiB,SACjCwB,IAAeD,GAAe,QAAqB,QAAQ;AAEjE,QAAI,CAACC;AACD;AAGJ,QAAI,CAACxC,KAAU,CAACuC,GAAe;AAC3B,MAAAC,EAAa,MAAM,eAAe7C,CAA8B;AAChE;AAAA,IACJ;AAEA,UAAM8C,IAAiB,KAAK,IAAIxB,KAAmBsB,EAAc,wBAAwB,UAAU,GAAG,CAAC;AAEvG,WAAAC,EAAa,MAAM,YAAY7C,GAAgC,GAAG8C,CAAc,IAAI,GAE7E,MAAM;AACT,MAAAD,EAAa,MAAM,eAAe7C,CAA8B;AAAA,IACpE;AAAA,EACJ,GAAG,CAACsB,GAAiBjB,CAAM,CAAC;AAE5B,QAAM0C,IACFhB,KAAkBlB,EAAc,sBAC5B,gBAAAmC;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,SAAAlC;AAAA,MACA,oBAAoBmC;AAAA,MACpB,WAAW,CAACC,CAAwB;AAAA,MACpC,aAAab;AAAA,MACb,cAAcE;AAAA,MACd,WAAWE;AAAA,MAEX,UAAA;AAAA,QAAA,gBAAAU,EAACC,KAAgB,OAAOxC,EAAc,qBAAqB,UAAUyC,GAChE,UAAAnD,GACL;AAAA,QACA,gBAAAiD,EAACG,GAAA,EAAY,aAAa,IAAO,eAAe,MAC5C,UAAA,gBAAAH;AAAA,UAACI;AAAA,UAAA;AAAA,YACG,QAAQrB;AAAA,YACR,QAAQD;AAAA,YACR,qBAAqBvB,EAAmB;AAAA,YACxC,OAAOgB;AAAA,UAAA;AAAA,QAAA,EACX,CACJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IAGJxB;AAGR,SAAKM,EAAoB,cAmBrB,gBAAA2C;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG9C;AAAA,MACJ,WAAWmD,EAAW,cAAcpD,KAAU,mBAAmB;AAAA,MACjE,MAAK;AAAA,MACL,KAAKwB;AAAA,MAEL,UAAA,gBAAAuB,EAACM,EAAoB,UAApB,EAA6B,OAAM,UAChC,UAAA,gBAAAN;AAAA,QAACO,EAAmB;AAAA,QAAnB;AAAA,UACG,OAAO;AAAA,YACH,oBAAoB,MAAM;AACtB,oBAAMC,IAAqBzC,EAAkB;AAC7C,qBAAAA,EAAkB,WAAW,GACtByC;AAAA,YACX;AAAA,UAAA;AAAA,UAGJ,UAAA,gBAAAZ;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,WAAWS;AAAA,gBACP;AAAA,gBACA9C,EAAmB,0BAA0B;AAAA,gBAC7CP;AAAA,cAAA;AAAA,cAEJ,MAAM6B,MAAmB,IAAI,QAAQ;AAAA,cACrC,OAAO,EAAE,kBAAkB,UAAUA,CAAc,UAAA;AAAA,cAElD,UAAA;AAAA,gBAAAtB,EAAmB,uBAChB,gBAAAyC;AAAA,kBAACS;AAAA,kBAAA;AAAA,oBACG,eAAelD,EAAmB;AAAA,oBAClC,oBAAoBA,EAAmB;AAAA,oBACvC,sBAAsBA,EAAmB;AAAA,oBACzC,UAAU,CAACA,EAAmB;AAAA,oBAC9B,UAAUsB;AAAA,oBACV,wBAAwBtB,EAAmB;AAAA,oBAC3C,oCACIF,EAAoB;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAI/BsC;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACL;AAAA,MAAA,EACJ,CACJ;AAAA,IAAA;AAAA,EAAA,IA1DA,gBAAAK,EAACM,EAAoB,UAApB,EAA6B,OAAM,UAChC,UAAA,gBAAAN;AAAA,IAACO,EAAmB;AAAA,IAAnB;AAAA,MACG,OAAO;AAAA,QACH,oBAAoB,MAAM;AACtB,gBAAMC,IAAqBzC,EAAkB;AAC7C,iBAAAA,EAAkB,WAAW,GACtByC;AAAA,QACX;AAAA,MAAA;AAAA,MAGH,UAAAb;AAAA,IAAA;AAAA,EAAA,GAET;AAiDZ;"}
|
|
@@ -1,34 +1,47 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as s, jsxs as O, Fragment as B } from "react/jsx-runtime";
|
|
2
2
|
import { motion as H } from "motion/react";
|
|
3
3
|
import { useRef as j } from "react";
|
|
4
4
|
import F from "../checkbox/Checkbox.js";
|
|
5
5
|
import N from "../../utils/classNames.js";
|
|
6
6
|
import { resolveRowKey as E, resolveRowClassName as M } from "./model/resolveRowMeta.js";
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
7
|
+
import { getVerticalAlignClassName as q } from "./shared/getAlignClassName.js";
|
|
8
|
+
import { getInteractiveRowProps as z } from "./shared/getInteractiveRowProps.js";
|
|
9
|
+
import { useOptionalTableInteractionContext as G } from "./context/TableInteractionContext.js";
|
|
10
|
+
import { useOptionalTableRenderConfigContext as J } from "./context/TableRenderConfigContext.js";
|
|
11
|
+
import { useOptionalTableSection as L, useTableBodyContext as Q, extractTableHtmlAttributes as T, TableRowContext as U } from "./context/TableStructureContext.js";
|
|
12
|
+
import { useOptionalTableRenderContext as W } from "./context/TableRenderContext.js";
|
|
13
|
+
const X = (p) => {
|
|
14
|
+
const {
|
|
15
|
+
isSelected: g,
|
|
16
|
+
isSelectable: l,
|
|
17
|
+
hideSelectionControl: x,
|
|
18
|
+
isTableView: m,
|
|
19
|
+
onToggleSelection: h,
|
|
20
|
+
cardCellClassName: b,
|
|
21
|
+
selectionCheckboxVerticalAlignment: a
|
|
22
|
+
} = p;
|
|
23
|
+
return /* @__PURE__ */ s(
|
|
15
24
|
"div",
|
|
16
25
|
{
|
|
17
|
-
className: N(
|
|
26
|
+
className: N(
|
|
27
|
+
"table-cell table-selection-cell",
|
|
28
|
+
q(a),
|
|
29
|
+
!m && b
|
|
30
|
+
),
|
|
18
31
|
role: "cell",
|
|
19
32
|
"aria-colindex": 1,
|
|
20
|
-
style:
|
|
21
|
-
onClick: (
|
|
22
|
-
onKeyDown: (
|
|
23
|
-
children: !x && /* @__PURE__ */
|
|
33
|
+
style: m ? { gridColumn: "1 / span 1", gridRow: "1 / span 1" } : void 0,
|
|
34
|
+
onClick: (e) => e.stopPropagation(),
|
|
35
|
+
onKeyDown: (e) => e.stopPropagation(),
|
|
36
|
+
children: !x && /* @__PURE__ */ s("div", { className: "table-selection-control", children: /* @__PURE__ */ s(F, { checked: g, disabled: !l, onChange: h }) })
|
|
24
37
|
}
|
|
25
38
|
);
|
|
26
|
-
},
|
|
27
|
-
const { children:
|
|
39
|
+
}, ae = (p) => {
|
|
40
|
+
const { children: g, disabled: l, className: x, noHover: m, selectable: h, sticky: b, ...a } = p, e = J(), c = W(), o = G(), I = L(), f = Q(), C = j(0);
|
|
28
41
|
if (C.current = 0, !c || !e || !o || c.columns.length === 0 || I !== "body" || !f)
|
|
29
42
|
return null;
|
|
30
|
-
const d =
|
|
31
|
-
isClickable: o.isClickable && !
|
|
43
|
+
const d = a, n = f.nextRowIndex(), t = E(d, n, e.rowKey), u = typeof e.rowAnimationProps == "function" ? e.rowAnimationProps(d, n) : e.rowAnimationProps, r = z({
|
|
44
|
+
isClickable: o.isClickable && !l,
|
|
32
45
|
onRowClick: (i, w) => {
|
|
33
46
|
o.onRowClick?.(i, w), o.onActiveRowChange?.(
|
|
34
47
|
o.activeRowId === t ? void 0 : t,
|
|
@@ -38,78 +51,79 @@ const W = (p) => {
|
|
|
38
51
|
},
|
|
39
52
|
row: d,
|
|
40
53
|
rowIndex: n
|
|
41
|
-
}),
|
|
42
|
-
|
|
54
|
+
}), R = o.selectableRowIdSet.has(t), v = R && o.selectedRowIdSet.has(t), P = o.showSelectionColumn && /* @__PURE__ */ s(
|
|
55
|
+
X,
|
|
43
56
|
{
|
|
44
57
|
isSelected: v,
|
|
45
|
-
isSelectable:
|
|
46
|
-
hideSelectionControl: !
|
|
58
|
+
isSelectable: R,
|
|
59
|
+
hideSelectionControl: !R && o.hideSelectionCheckboxesForExcludedRows,
|
|
47
60
|
isTableView: e.isTableView,
|
|
48
61
|
onToggleSelection: () => o.onToggleRowSelection?.(t),
|
|
49
|
-
cardCellClassName: e.cardClasses.cellClassName
|
|
62
|
+
cardCellClassName: e.cardClasses.cellClassName,
|
|
63
|
+
selectionCheckboxVerticalAlignment: e.selectionCheckboxVerticalAlignment
|
|
50
64
|
}
|
|
51
|
-
),
|
|
65
|
+
), A = !!c.renderDraft.bodyMaxHeight, y = N(
|
|
52
66
|
"table-row",
|
|
53
67
|
!e.isTableView && "divider-y-1 divider-color-lighter divider-style-solid",
|
|
54
68
|
o.activeRowId === t && "table-row-active",
|
|
55
|
-
|
|
69
|
+
l && "table-row-disabled",
|
|
56
70
|
v && "table-row-selected",
|
|
57
|
-
|
|
58
|
-
(
|
|
59
|
-
|
|
60
|
-
|
|
71
|
+
r.isClickableClassName,
|
|
72
|
+
(l || m) && "table-row-no-hover",
|
|
73
|
+
b && "table-row-sticky",
|
|
74
|
+
b && A && "table-row-sticky-in-container",
|
|
61
75
|
!e.isTableView && e.cardClasses.rowClassName,
|
|
62
76
|
x,
|
|
63
77
|
M(e.rowClassName, d, n)
|
|
64
|
-
),
|
|
78
|
+
), k = /* @__PURE__ */ O(B, { children: [
|
|
65
79
|
P,
|
|
66
|
-
|
|
67
|
-
] }),
|
|
68
|
-
...
|
|
80
|
+
g
|
|
81
|
+
] }), V = {
|
|
82
|
+
...T(a),
|
|
69
83
|
className: y,
|
|
70
84
|
"data-index": n,
|
|
71
85
|
"data-row-id": String(t),
|
|
72
|
-
onClick:
|
|
73
|
-
onKeyDown:
|
|
86
|
+
onClick: r.onClick,
|
|
87
|
+
onKeyDown: r.onKeyDown,
|
|
74
88
|
role: "row",
|
|
75
|
-
tabIndex:
|
|
76
|
-
},
|
|
77
|
-
...
|
|
89
|
+
tabIndex: r.tabIndex
|
|
90
|
+
}, D = {
|
|
91
|
+
...T(a),
|
|
78
92
|
className: y,
|
|
79
93
|
"data-index": n,
|
|
80
94
|
"data-row-id": String(t),
|
|
81
|
-
onClick:
|
|
82
|
-
onKeyDown:
|
|
95
|
+
onClick: r.onClick,
|
|
96
|
+
onKeyDown: r.onKeyDown,
|
|
83
97
|
role: "row",
|
|
84
|
-
tabIndex:
|
|
85
|
-
...
|
|
86
|
-
},
|
|
87
|
-
|
|
98
|
+
tabIndex: r.tabIndex,
|
|
99
|
+
...u
|
|
100
|
+
}, S = /* @__PURE__ */ s(
|
|
101
|
+
U.Provider,
|
|
88
102
|
{
|
|
89
103
|
value: {
|
|
90
104
|
nextColumnIndex: (i, w = 1) => {
|
|
91
105
|
if (i !== void 0 && i >= 0)
|
|
92
106
|
return C.current = i + w, i;
|
|
93
|
-
const
|
|
94
|
-
return C.current += w,
|
|
107
|
+
const K = C.current;
|
|
108
|
+
return C.current += w, K;
|
|
95
109
|
},
|
|
96
110
|
rowIndex: n,
|
|
97
111
|
rowId: t,
|
|
98
112
|
rowData: d
|
|
99
113
|
},
|
|
100
|
-
children:
|
|
114
|
+
children: u ? /* @__PURE__ */ s(H.div, { ...D, children: k }) : /* @__PURE__ */ s("div", { ...V, children: k })
|
|
101
115
|
}
|
|
102
116
|
);
|
|
103
117
|
return c.renderDraft.bodyRows.push({
|
|
104
118
|
rowId: t,
|
|
105
119
|
rowIndex: n,
|
|
106
120
|
kind: "data",
|
|
107
|
-
disabled:
|
|
108
|
-
selectable: !
|
|
109
|
-
render: () =>
|
|
110
|
-
}), c.isRegisteringBodyRows ? null :
|
|
121
|
+
disabled: l,
|
|
122
|
+
selectable: !l && h !== !1,
|
|
123
|
+
render: () => S
|
|
124
|
+
}), c.isRegisteringBodyRows ? null : S;
|
|
111
125
|
};
|
|
112
126
|
export {
|
|
113
|
-
|
|
127
|
+
ae as default
|
|
114
128
|
};
|
|
115
129
|
//# sourceMappingURL=TableRow.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableRow.js","sources":["../../../src/components/table/TableRow.tsx"],"sourcesContent":["import { motion, type HTMLMotionProps } from 'motion/react';\nimport { type ReactNode, useRef } from 'react';\n\nimport Checkbox from '../checkbox/Checkbox';\nimport classNames from '../../utils/classNames';\nimport { resolveRowClassName, resolveRowKey } from './model/resolveRowMeta';\nimport { getInteractiveRowProps } from './shared/getInteractiveRowProps';\nimport type { TableHtmlAttributes, TableRowData } from './Table.types';\nimport { useOptionalTableInteractionContext } from './context/TableInteractionContext';\nimport { useOptionalTableRenderConfigContext } from './context/TableRenderConfigContext';\nimport {\n extractTableHtmlAttributes,\n useTableBodyContext,\n TableRowContext,\n useOptionalTableSection,\n} from './context/TableStructureContext';\nimport { useOptionalTableRenderContext } from './context/TableRenderContext';\n\nexport type TableRowProps<RowType extends TableRowData> = TableHtmlAttributes &\n Partial<RowType> & {\n /**\n * Keeps the row sticky at the top of the current table scroll context.\n * When a sticky `TableHeader` is present, the row stacks below the measured header height.\n * `TableBody maxHeight` continues to pin the row inside the internal body scroller.\n *\n * @default false\n */\n sticky?: boolean;\n\n /**\n * Disables row interaction such as hover styles, clicks, and keyboard activation.\n *\n * @default false\n */\n disabled?: boolean;\n\n /**\n * Optional class names only for this row.\n */\n className?: string;\n\n /**\n * Excludes this row from table selection while keeping the row interactive.\n */\n selectable?: boolean;\n\n /**\n * Disable table hover styling for this row.\n */\n noHover?: boolean;\n\n /**\n * Table row content.\n */\n children?: ReactNode;\n };\n\ntype TableRowSelectionCellProps = {\n isSelected: boolean;\n isSelectable: boolean;\n hideSelectionControl?: boolean;\n isTableView: boolean;\n onToggleSelection?: () => void;\n cardCellClassName?: string;\n};\n\nconst TableRowSelectionCell = (props: TableRowSelectionCellProps) => {\n const { isSelected, isSelectable, hideSelectionControl, isTableView, onToggleSelection, cardCellClassName } = props;\n\n return (\n <div\n className={classNames('table-cell table-selection-cell', !isTableView && cardCellClassName)}\n role='cell'\n aria-colindex={1}\n style={isTableView ? { gridColumn: '1 / span 1', gridRow: '1 / span 1' } : undefined}\n onClick={event => event.stopPropagation()}\n onKeyDown={event => event.stopPropagation()}\n >\n {!hideSelectionControl && (\n <div className='table-selection-control'>\n <Checkbox checked={isSelected} disabled={!isSelectable} onChange={onToggleSelection} />\n </div>\n )}\n </div>\n );\n};\n\nconst TableRow = <RowType extends TableRowData = TableRowData>(props: TableRowProps<RowType>) => {\n const { children, disabled, className, noHover, selectable, sticky, ...remainingProps } = props;\n\n const renderConfigContext = useOptionalTableRenderConfigContext<RowType>();\n const renderContext = useOptionalTableRenderContext<RowType>();\n const interactionContext = useOptionalTableInteractionContext<RowType>();\n const section = useOptionalTableSection();\n const bodyContext = useTableBodyContext();\n\n const cellIndexRef = useRef(0);\n cellIndexRef.current = 0;\n\n if (\n !renderContext ||\n !renderConfigContext ||\n !interactionContext ||\n renderContext.columns.length === 0 ||\n section !== 'body' ||\n !bodyContext\n ) {\n return null;\n }\n\n const rowData = remainingProps as RowType;\n const rowIndex = bodyContext.nextRowIndex();\n const rowId = resolveRowKey(rowData, rowIndex, renderConfigContext.rowKey);\n\n const resolvedRowAnimationProps =\n typeof renderConfigContext.rowAnimationProps === 'function'\n ? renderConfigContext.rowAnimationProps(rowData, rowIndex)\n : renderConfigContext.rowAnimationProps;\n\n const interactiveRowProps = getInteractiveRowProps({\n isClickable: interactionContext.isClickable && !disabled,\n onRowClick: (clickedRow, clickedRowIndex) => {\n interactionContext.onRowClick?.(clickedRow, clickedRowIndex);\n interactionContext.onActiveRowChange?.(\n interactionContext.activeRowId === rowId ? undefined : rowId,\n clickedRow,\n clickedRowIndex\n );\n },\n row: rowData,\n rowIndex,\n });\n\n const isSelectable = interactionContext.selectableRowIdSet.has(rowId);\n const isSelected = isSelectable && interactionContext.selectedRowIdSet.has(rowId);\n const selectionCell = interactionContext.showSelectionColumn && (\n <TableRowSelectionCell\n isSelected={isSelected}\n isSelectable={isSelectable}\n hideSelectionControl={!isSelectable && interactionContext.hideSelectionCheckboxesForExcludedRows}\n isTableView={renderConfigContext.isTableView}\n onToggleSelection={() => interactionContext.onToggleRowSelection?.(rowId)}\n cardCellClassName={renderConfigContext.cardClasses.cellClassName}\n />\n );\n\n const stickyInBodyScrollContainer = !!renderContext.renderDraft.bodyMaxHeight;\n\n const rowClassName = classNames(\n 'table-row',\n !renderConfigContext.isTableView && 'divider-y-1 divider-color-lighter divider-style-solid',\n interactionContext.activeRowId === rowId && 'table-row-active',\n disabled && 'table-row-disabled',\n isSelected && 'table-row-selected',\n interactiveRowProps.isClickableClassName,\n (disabled || noHover) && 'table-row-no-hover',\n sticky && 'table-row-sticky',\n sticky && stickyInBodyScrollContainer && 'table-row-sticky-in-container',\n !renderConfigContext.isTableView && renderConfigContext.cardClasses.rowClassName,\n className,\n resolveRowClassName(renderConfigContext.rowClassName, rowData, rowIndex)\n );\n\n const rowContent = (\n <>\n {selectionCell}\n {children}\n </>\n );\n\n const staticRowProps = {\n ...extractTableHtmlAttributes(remainingProps),\n className: rowClassName,\n 'data-index': rowIndex,\n 'data-row-id': String(rowId),\n onClick: interactiveRowProps.onClick,\n onKeyDown: interactiveRowProps.onKeyDown,\n role: 'row' as const,\n tabIndex: interactiveRowProps.tabIndex,\n };\n\n const animatedRowProps = {\n ...(extractTableHtmlAttributes(remainingProps) as Omit<\n HTMLMotionProps<'div'>,\n 'children' | 'className' | 'data-index' | 'data-row-id' | 'onClick' | 'onKeyDown' | 'role' | 'tabIndex'\n >),\n className: rowClassName,\n 'data-index': rowIndex,\n 'data-row-id': String(rowId),\n onClick: interactiveRowProps.onClick,\n onKeyDown: interactiveRowProps.onKeyDown,\n role: 'row' as const,\n tabIndex: interactiveRowProps.tabIndex,\n ...resolvedRowAnimationProps,\n };\n\n const rowNode = (\n <TableRowContext.Provider\n value={{\n nextColumnIndex: (explicitColumnIndex, span = 1) => {\n if (explicitColumnIndex !== undefined && explicitColumnIndex >= 0) {\n cellIndexRef.current = explicitColumnIndex + span;\n return explicitColumnIndex;\n }\n\n const nextIndex = cellIndexRef.current;\n cellIndexRef.current += span;\n return nextIndex;\n },\n rowIndex,\n rowId,\n rowData,\n }}\n >\n {resolvedRowAnimationProps ? (\n <motion.div {...animatedRowProps}>{rowContent}</motion.div>\n ) : (\n <div {...staticRowProps}>{rowContent}</div>\n )}\n </TableRowContext.Provider>\n );\n\n renderContext.renderDraft.bodyRows.push({\n rowId,\n rowIndex,\n kind: 'data',\n disabled,\n selectable: !disabled && selectable !== false,\n render: () => rowNode,\n });\n\n return renderContext.isRegisteringBodyRows ? null : rowNode;\n};\n\nexport default TableRow;\n"],"names":["TableRowSelectionCell","props","isSelected","isSelectable","hideSelectionControl","isTableView","onToggleSelection","cardCellClassName","jsx","classNames","event","Checkbox","TableRow","children","disabled","className","noHover","selectable","sticky","remainingProps","renderConfigContext","useOptionalTableRenderConfigContext","renderContext","useOptionalTableRenderContext","interactionContext","useOptionalTableInteractionContext","section","useOptionalTableSection","bodyContext","useTableBodyContext","cellIndexRef","useRef","rowData","rowIndex","rowId","resolveRowKey","resolvedRowAnimationProps","interactiveRowProps","getInteractiveRowProps","clickedRow","clickedRowIndex","selectionCell","stickyInBodyScrollContainer","rowClassName","resolveRowClassName","rowContent","jsxs","Fragment","staticRowProps","extractTableHtmlAttributes","animatedRowProps","rowNode","TableRowContext","explicitColumnIndex","span","nextIndex","motion"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TableRow.js","sources":["../../../src/components/table/TableRow.tsx"],"sourcesContent":["import { motion, type HTMLMotionProps } from 'motion/react';\nimport { type ReactNode, useRef } from 'react';\n\nimport Checkbox from '../checkbox/Checkbox';\nimport classNames from '../../utils/classNames';\nimport { resolveRowClassName, resolveRowKey } from './model/resolveRowMeta';\nimport { getVerticalAlignClassName } from './shared/getAlignClassName';\nimport { getInteractiveRowProps } from './shared/getInteractiveRowProps';\nimport type { TableHtmlAttributes, TableRowData, TableVerticalAlign } from './Table.types';\nimport { useOptionalTableInteractionContext } from './context/TableInteractionContext';\nimport { useOptionalTableRenderConfigContext } from './context/TableRenderConfigContext';\nimport {\n extractTableHtmlAttributes,\n useTableBodyContext,\n TableRowContext,\n useOptionalTableSection,\n} from './context/TableStructureContext';\nimport { useOptionalTableRenderContext } from './context/TableRenderContext';\n\nexport type TableRowProps<RowType extends TableRowData> = TableHtmlAttributes &\n Partial<RowType> & {\n /**\n * Keeps the row sticky at the top of the current table scroll context.\n * When a sticky `TableHeader` is present, the row stacks below the measured header height.\n * `TableBody maxHeight` continues to pin the row inside the internal body scroller.\n *\n * @default false\n */\n sticky?: boolean;\n\n /**\n * Disables row interaction such as hover styles, clicks, and keyboard activation.\n *\n * @default false\n */\n disabled?: boolean;\n\n /**\n * Optional class names only for this row.\n */\n className?: string;\n\n /**\n * Excludes this row from table selection while keeping the row interactive.\n */\n selectable?: boolean;\n\n /**\n * Disable table hover styling for this row.\n */\n noHover?: boolean;\n\n /**\n * Table row content.\n */\n children?: ReactNode;\n };\n\ntype TableRowSelectionCellProps = {\n isSelected: boolean;\n isSelectable: boolean;\n hideSelectionControl?: boolean;\n isTableView: boolean;\n onToggleSelection?: () => void;\n cardCellClassName?: string;\n selectionCheckboxVerticalAlignment?: TableVerticalAlign;\n};\n\nconst TableRowSelectionCell = (props: TableRowSelectionCellProps) => {\n const {\n isSelected,\n isSelectable,\n hideSelectionControl,\n isTableView,\n onToggleSelection,\n cardCellClassName,\n selectionCheckboxVerticalAlignment,\n } = props;\n\n return (\n <div\n className={classNames(\n 'table-cell table-selection-cell',\n getVerticalAlignClassName(selectionCheckboxVerticalAlignment),\n !isTableView && cardCellClassName\n )}\n role='cell'\n aria-colindex={1}\n style={isTableView ? { gridColumn: '1 / span 1', gridRow: '1 / span 1' } : undefined}\n onClick={event => event.stopPropagation()}\n onKeyDown={event => event.stopPropagation()}\n >\n {!hideSelectionControl && (\n <div className='table-selection-control'>\n <Checkbox checked={isSelected} disabled={!isSelectable} onChange={onToggleSelection} />\n </div>\n )}\n </div>\n );\n};\n\nconst TableRow = <RowType extends TableRowData = TableRowData>(props: TableRowProps<RowType>) => {\n const { children, disabled, className, noHover, selectable, sticky, ...remainingProps } = props;\n\n const renderConfigContext = useOptionalTableRenderConfigContext<RowType>();\n const renderContext = useOptionalTableRenderContext<RowType>();\n const interactionContext = useOptionalTableInteractionContext<RowType>();\n const section = useOptionalTableSection();\n const bodyContext = useTableBodyContext();\n\n const cellIndexRef = useRef(0);\n cellIndexRef.current = 0;\n\n if (\n !renderContext ||\n !renderConfigContext ||\n !interactionContext ||\n renderContext.columns.length === 0 ||\n section !== 'body' ||\n !bodyContext\n ) {\n return null;\n }\n\n const rowData = remainingProps as RowType;\n const rowIndex = bodyContext.nextRowIndex();\n const rowId = resolveRowKey(rowData, rowIndex, renderConfigContext.rowKey);\n\n const resolvedRowAnimationProps =\n typeof renderConfigContext.rowAnimationProps === 'function'\n ? renderConfigContext.rowAnimationProps(rowData, rowIndex)\n : renderConfigContext.rowAnimationProps;\n\n const interactiveRowProps = getInteractiveRowProps({\n isClickable: interactionContext.isClickable && !disabled,\n onRowClick: (clickedRow, clickedRowIndex) => {\n interactionContext.onRowClick?.(clickedRow, clickedRowIndex);\n interactionContext.onActiveRowChange?.(\n interactionContext.activeRowId === rowId ? undefined : rowId,\n clickedRow,\n clickedRowIndex\n );\n },\n row: rowData,\n rowIndex,\n });\n\n const isSelectable = interactionContext.selectableRowIdSet.has(rowId);\n const isSelected = isSelectable && interactionContext.selectedRowIdSet.has(rowId);\n const selectionCell = interactionContext.showSelectionColumn && (\n <TableRowSelectionCell\n isSelected={isSelected}\n isSelectable={isSelectable}\n hideSelectionControl={!isSelectable && interactionContext.hideSelectionCheckboxesForExcludedRows}\n isTableView={renderConfigContext.isTableView}\n onToggleSelection={() => interactionContext.onToggleRowSelection?.(rowId)}\n cardCellClassName={renderConfigContext.cardClasses.cellClassName}\n selectionCheckboxVerticalAlignment={renderConfigContext.selectionCheckboxVerticalAlignment}\n />\n );\n\n const stickyInBodyScrollContainer = !!renderContext.renderDraft.bodyMaxHeight;\n\n const rowClassName = classNames(\n 'table-row',\n !renderConfigContext.isTableView && 'divider-y-1 divider-color-lighter divider-style-solid',\n interactionContext.activeRowId === rowId && 'table-row-active',\n disabled && 'table-row-disabled',\n isSelected && 'table-row-selected',\n interactiveRowProps.isClickableClassName,\n (disabled || noHover) && 'table-row-no-hover',\n sticky && 'table-row-sticky',\n sticky && stickyInBodyScrollContainer && 'table-row-sticky-in-container',\n !renderConfigContext.isTableView && renderConfigContext.cardClasses.rowClassName,\n className,\n resolveRowClassName(renderConfigContext.rowClassName, rowData, rowIndex)\n );\n\n const rowContent = (\n <>\n {selectionCell}\n {children}\n </>\n );\n\n const staticRowProps = {\n ...extractTableHtmlAttributes(remainingProps),\n className: rowClassName,\n 'data-index': rowIndex,\n 'data-row-id': String(rowId),\n onClick: interactiveRowProps.onClick,\n onKeyDown: interactiveRowProps.onKeyDown,\n role: 'row' as const,\n tabIndex: interactiveRowProps.tabIndex,\n };\n\n const animatedRowProps = {\n ...(extractTableHtmlAttributes(remainingProps) as Omit<\n HTMLMotionProps<'div'>,\n 'children' | 'className' | 'data-index' | 'data-row-id' | 'onClick' | 'onKeyDown' | 'role' | 'tabIndex'\n >),\n className: rowClassName,\n 'data-index': rowIndex,\n 'data-row-id': String(rowId),\n onClick: interactiveRowProps.onClick,\n onKeyDown: interactiveRowProps.onKeyDown,\n role: 'row' as const,\n tabIndex: interactiveRowProps.tabIndex,\n ...resolvedRowAnimationProps,\n };\n\n const rowNode = (\n <TableRowContext.Provider\n value={{\n nextColumnIndex: (explicitColumnIndex, span = 1) => {\n if (explicitColumnIndex !== undefined && explicitColumnIndex >= 0) {\n cellIndexRef.current = explicitColumnIndex + span;\n return explicitColumnIndex;\n }\n\n const nextIndex = cellIndexRef.current;\n cellIndexRef.current += span;\n return nextIndex;\n },\n rowIndex,\n rowId,\n rowData,\n }}\n >\n {resolvedRowAnimationProps ? (\n <motion.div {...animatedRowProps}>{rowContent}</motion.div>\n ) : (\n <div {...staticRowProps}>{rowContent}</div>\n )}\n </TableRowContext.Provider>\n );\n\n renderContext.renderDraft.bodyRows.push({\n rowId,\n rowIndex,\n kind: 'data',\n disabled,\n selectable: !disabled && selectable !== false,\n render: () => rowNode,\n });\n\n return renderContext.isRegisteringBodyRows ? null : rowNode;\n};\n\nexport default TableRow;\n"],"names":["TableRowSelectionCell","props","isSelected","isSelectable","hideSelectionControl","isTableView","onToggleSelection","cardCellClassName","selectionCheckboxVerticalAlignment","jsx","classNames","getVerticalAlignClassName","event","Checkbox","TableRow","children","disabled","className","noHover","selectable","sticky","remainingProps","renderConfigContext","useOptionalTableRenderConfigContext","renderContext","useOptionalTableRenderContext","interactionContext","useOptionalTableInteractionContext","section","useOptionalTableSection","bodyContext","useTableBodyContext","cellIndexRef","useRef","rowData","rowIndex","rowId","resolveRowKey","resolvedRowAnimationProps","interactiveRowProps","getInteractiveRowProps","clickedRow","clickedRowIndex","selectionCell","stickyInBodyScrollContainer","rowClassName","resolveRowClassName","rowContent","jsxs","Fragment","staticRowProps","extractTableHtmlAttributes","animatedRowProps","rowNode","TableRowContext","explicitColumnIndex","span","nextIndex","motion"],"mappings":";;;;;;;;;;;;AAoEA,MAAMA,IAAwB,CAACC,MAAsC;AACjE,QAAM;AAAA,IACF,YAAAC;AAAA,IACA,cAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,oCAAAC;AAAA,EAAA,IACAP;AAEJ,SACI,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWC;AAAA,QACP;AAAA,QACAC,EAA0BH,CAAkC;AAAA,QAC5D,CAACH,KAAeE;AAAA,MAAA;AAAA,MAEpB,MAAK;AAAA,MACL,iBAAe;AAAA,MACf,OAAOF,IAAc,EAAE,YAAY,cAAc,SAAS,iBAAiB;AAAA,MAC3E,SAAS,CAAAO,MAASA,EAAM,gBAAA;AAAA,MACxB,WAAW,CAAAA,MAASA,EAAM,gBAAA;AAAA,MAEzB,UAAA,CAACR,KACE,gBAAAK,EAAC,OAAA,EAAI,WAAU,2BACX,UAAA,gBAAAA,EAACI,GAAA,EAAS,SAASX,GAAY,UAAU,CAACC,GAAc,UAAUG,GAAmB,EAAA,CACzF;AAAA,IAAA;AAAA,EAAA;AAIhB,GAEMQ,KAAW,CAA8Cb,MAAkC;AAC7F,QAAM,EAAE,UAAAc,GAAU,UAAAC,GAAU,WAAAC,GAAW,SAAAC,GAAS,YAAAC,GAAY,QAAAC,GAAQ,GAAGC,EAAA,IAAmBpB,GAEpFqB,IAAsBC,EAAA,GACtBC,IAAgBC,EAAA,GAChBC,IAAqBC,EAAA,GACrBC,IAAUC,EAAA,GACVC,IAAcC,EAAA,GAEdC,IAAeC,EAAO,CAAC;AAG7B,MAFAD,EAAa,UAAU,GAGnB,CAACR,KACD,CAACF,KACD,CAACI,KACDF,EAAc,QAAQ,WAAW,KACjCI,MAAY,UACZ,CAACE;AAED,WAAO;AAGX,QAAMI,IAAUb,GACVc,IAAWL,EAAY,aAAA,GACvBM,IAAQC,EAAcH,GAASC,GAAUb,EAAoB,MAAM,GAEnEgB,IACF,OAAOhB,EAAoB,qBAAsB,aAC3CA,EAAoB,kBAAkBY,GAASC,CAAQ,IACvDb,EAAoB,mBAExBiB,IAAsBC,EAAuB;AAAA,IAC/C,aAAad,EAAmB,eAAe,CAACV;AAAA,IAChD,YAAY,CAACyB,GAAYC,MAAoB;AACzC,MAAAhB,EAAmB,aAAae,GAAYC,CAAe,GAC3DhB,EAAmB;AAAA,QACfA,EAAmB,gBAAgBU,IAAQ,SAAYA;AAAA,QACvDK;AAAA,QACAC;AAAA,MAAA;AAAA,IAER;AAAA,IACA,KAAKR;AAAA,IACL,UAAAC;AAAA,EAAA,CACH,GAEKhC,IAAeuB,EAAmB,mBAAmB,IAAIU,CAAK,GAC9DlC,IAAaC,KAAgBuB,EAAmB,iBAAiB,IAAIU,CAAK,GAC1EO,IAAgBjB,EAAmB,uBACrC,gBAAAjB;AAAA,IAACT;AAAA,IAAA;AAAA,MACG,YAAAE;AAAA,MACA,cAAAC;AAAA,MACA,sBAAsB,CAACA,KAAgBuB,EAAmB;AAAA,MAC1D,aAAaJ,EAAoB;AAAA,MACjC,mBAAmB,MAAMI,EAAmB,uBAAuBU,CAAK;AAAA,MACxE,mBAAmBd,EAAoB,YAAY;AAAA,MACnD,oCAAoCA,EAAoB;AAAA,IAAA;AAAA,EAAA,GAI1DsB,IAA8B,CAAC,CAACpB,EAAc,YAAY,eAE1DqB,IAAenC;AAAA,IACjB;AAAA,IACA,CAACY,EAAoB,eAAe;AAAA,IACpCI,EAAmB,gBAAgBU,KAAS;AAAA,IAC5CpB,KAAY;AAAA,IACZd,KAAc;AAAA,IACdqC,EAAoB;AAAA,KACnBvB,KAAYE,MAAY;AAAA,IACzBE,KAAU;AAAA,IACVA,KAAUwB,KAA+B;AAAA,IACzC,CAACtB,EAAoB,eAAeA,EAAoB,YAAY;AAAA,IACpEL;AAAA,IACA6B,EAAoBxB,EAAoB,cAAcY,GAASC,CAAQ;AAAA,EAAA,GAGrEY,IACF,gBAAAC,EAAAC,GAAA,EACK,UAAA;AAAA,IAAAN;AAAA,IACA5B;AAAA,EAAA,GACL,GAGEmC,IAAiB;AAAA,IACnB,GAAGC,EAA2B9B,CAAc;AAAA,IAC5C,WAAWwB;AAAA,IACX,cAAcV;AAAA,IACd,eAAe,OAAOC,CAAK;AAAA,IAC3B,SAASG,EAAoB;AAAA,IAC7B,WAAWA,EAAoB;AAAA,IAC/B,MAAM;AAAA,IACN,UAAUA,EAAoB;AAAA,EAAA,GAG5Ba,IAAmB;AAAA,IACrB,GAAID,EAA2B9B,CAAc;AAAA,IAI7C,WAAWwB;AAAA,IACX,cAAcV;AAAA,IACd,eAAe,OAAOC,CAAK;AAAA,IAC3B,SAASG,EAAoB;AAAA,IAC7B,WAAWA,EAAoB;AAAA,IAC/B,MAAM;AAAA,IACN,UAAUA,EAAoB;AAAA,IAC9B,GAAGD;AAAA,EAAA,GAGDe,IACF,gBAAA5C;AAAA,IAAC6C,EAAgB;AAAA,IAAhB;AAAA,MACG,OAAO;AAAA,QACH,iBAAiB,CAACC,GAAqBC,IAAO,MAAM;AAChD,cAAID,MAAwB,UAAaA,KAAuB;AAC5D,mBAAAvB,EAAa,UAAUuB,IAAsBC,GACtCD;AAGX,gBAAME,IAAYzB,EAAa;AAC/B,iBAAAA,EAAa,WAAWwB,GACjBC;AAAA,QACX;AAAA,QACA,UAAAtB;AAAA,QACA,OAAAC;AAAA,QACA,SAAAF;AAAA,MAAA;AAAA,MAGH,UAAAI,IACG,gBAAA7B,EAACiD,EAAO,KAAP,EAAY,GAAGN,GAAmB,UAAAL,EAAA,CAAW,IAE9C,gBAAAtC,EAAC,OAAA,EAAK,GAAGyC,GAAiB,UAAAH,EAAA,CAAW;AAAA,IAAA;AAAA,EAAA;AAKjD,SAAAvB,EAAc,YAAY,SAAS,KAAK;AAAA,IACpC,OAAAY;AAAA,IACA,UAAAD;AAAA,IACA,MAAM;AAAA,IACN,UAAAnB;AAAA,IACA,YAAY,CAACA,KAAYG,MAAe;AAAA,IACxC,QAAQ,MAAMkC;AAAA,EAAA,CACjB,GAEM7B,EAAc,wBAAwB,OAAO6B;AACxD;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
2
|
import { MotionProps } from 'motion/react';
|
|
3
|
-
import { TableCellClassName, TableExpandedRowAnimation, TableRowClassName, TableRowData, TableViewType } from '../Table.types';
|
|
3
|
+
import { TableCellClassName, TableExpandedRowAnimation, TableRowClassName, TableRowData, TableVerticalAlign, TableViewType } from '../Table.types';
|
|
4
4
|
import { TableViewCardClasses } from '../model/tableView.types';
|
|
5
5
|
/**
|
|
6
6
|
* Render-facing table configuration.
|
|
@@ -17,6 +17,7 @@ export type TableRenderConfigContextValue<RowType extends TableRowData> = {
|
|
|
17
17
|
rowKey?: keyof RowType | ((row: RowType, rowIndex: number) => string | number);
|
|
18
18
|
rowClassName?: TableRowClassName<RowType>;
|
|
19
19
|
cellClassName?: TableCellClassName<RowType>;
|
|
20
|
+
selectionCheckboxVerticalAlignment?: TableVerticalAlign;
|
|
20
21
|
rowAnimationProps?: MotionProps | ((row: RowType, rowIndex: number) => MotionProps);
|
|
21
22
|
expandedRowAnimation?: TableExpandedRowAnimation;
|
|
22
23
|
virtualizedRows?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableRenderConfigContext.js","sources":["../../../../src/components/table/context/TableRenderConfigContext.tsx"],"sourcesContent":["import { createContext, useContext, type ReactNode } from 'react';\nimport type { MotionProps } from 'motion/react';\n\nimport type {\n TableCellClassName,\n TableExpandedRowAnimation,\n TableRowClassName,\n TableRowData,\n TableViewType,\n} from '../Table.types';\nimport type { TableViewCardClasses } from '../model/tableView.types';\n\n/**\n * Render-facing table configuration.\n *\n * These values come from public table props and are forwarded into row/cell/header\n * components during rendering. They are separate from the normalized render model,\n * which lives in `TableRenderContext`.\n */\nexport type TableRenderConfigContextValue<RowType extends TableRowData> = {\n viewType: TableViewType;\n isTableView: boolean;\n cardClasses: TableViewCardClasses;\n noRowsState: ReactNode;\n rowKey?: keyof RowType | ((row: RowType, rowIndex: number) => string | number);\n rowClassName?: TableRowClassName<RowType>;\n cellClassName?: TableCellClassName<RowType>;\n rowAnimationProps?: MotionProps | ((row: RowType, rowIndex: number) => MotionProps);\n expandedRowAnimation?: TableExpandedRowAnimation;\n virtualizedRows?: boolean;\n virtualizationOverscan?: number;\n};\n\nexport const TableRenderConfigContext = createContext<TableRenderConfigContextValue<TableRowData> | null>(null);\n\nexport const useOptionalTableRenderConfigContext = <RowType extends TableRowData>() =>\n useContext(TableRenderConfigContext) as TableRenderConfigContextValue<RowType> | null;\n\nexport const useTableRenderConfigContext = <RowType extends TableRowData>() => {\n const context = useOptionalTableRenderConfigContext<RowType>();\n\n if (!context) {\n throw new Error('Table render config context is missing.');\n }\n\n return context;\n};\n"],"names":["TableRenderConfigContext","createContext","useOptionalTableRenderConfigContext","useContext"],"mappings":";
|
|
1
|
+
{"version":3,"file":"TableRenderConfigContext.js","sources":["../../../../src/components/table/context/TableRenderConfigContext.tsx"],"sourcesContent":["import { createContext, useContext, type ReactNode } from 'react';\nimport type { MotionProps } from 'motion/react';\n\nimport type {\n TableCellClassName,\n TableExpandedRowAnimation,\n TableRowClassName,\n TableRowData,\n TableVerticalAlign,\n TableViewType,\n} from '../Table.types';\nimport type { TableViewCardClasses } from '../model/tableView.types';\n\n/**\n * Render-facing table configuration.\n *\n * These values come from public table props and are forwarded into row/cell/header\n * components during rendering. They are separate from the normalized render model,\n * which lives in `TableRenderContext`.\n */\nexport type TableRenderConfigContextValue<RowType extends TableRowData> = {\n viewType: TableViewType;\n isTableView: boolean;\n cardClasses: TableViewCardClasses;\n noRowsState: ReactNode;\n rowKey?: keyof RowType | ((row: RowType, rowIndex: number) => string | number);\n rowClassName?: TableRowClassName<RowType>;\n cellClassName?: TableCellClassName<RowType>;\n selectionCheckboxVerticalAlignment?: TableVerticalAlign;\n rowAnimationProps?: MotionProps | ((row: RowType, rowIndex: number) => MotionProps);\n expandedRowAnimation?: TableExpandedRowAnimation;\n virtualizedRows?: boolean;\n virtualizationOverscan?: number;\n};\n\nexport const TableRenderConfigContext = createContext<TableRenderConfigContextValue<TableRowData> | null>(null);\n\nexport const useOptionalTableRenderConfigContext = <RowType extends TableRowData>() =>\n useContext(TableRenderConfigContext) as TableRenderConfigContextValue<RowType> | null;\n\nexport const useTableRenderConfigContext = <RowType extends TableRowData>() => {\n const context = useOptionalTableRenderConfigContext<RowType>();\n\n if (!context) {\n throw new Error('Table render config context is missing.');\n }\n\n return context;\n};\n"],"names":["TableRenderConfigContext","createContext","useOptionalTableRenderConfigContext","useContext"],"mappings":";AAmCO,MAAMA,IAA2BC,EAAkE,IAAI,GAEjGC,IAAsC,MAC/CC,EAAWH,CAAwB;"}
|
|
@@ -2,17 +2,17 @@ import { jsxs as r, jsx as a } from "react/jsx-runtime";
|
|
|
2
2
|
import l from "../../../../utils/classNames.js";
|
|
3
3
|
import p from "../../SortArrows.js";
|
|
4
4
|
const u = (c) => {
|
|
5
|
-
const { column: e, dragActivatorProps: t, dragActivatorRef: n, hideWhileDragging: d, onSortChange: b } = c,
|
|
5
|
+
const { column: e, dragActivatorProps: t, dragActivatorRef: n, hideWhileDragging: d, onSortChange: b } = c, s = e.hideLabel && typeof e.label == "string" ? e.label : void 0, i = e.hideLabel ? null : e.icon ? /* @__PURE__ */ r("span", { className: "display-flex align-items-center gap-5", children: [
|
|
6
6
|
/* @__PURE__ */ a("span", { className: l("text-color-dark rioglyph", e.icon) }),
|
|
7
7
|
/* @__PURE__ */ a("span", { children: e.label })
|
|
8
|
-
] }) : e.label, o =
|
|
8
|
+
] }) : e.label, o = i === null ? null : /* @__PURE__ */ a("span", { className: "table-head-label", children: i });
|
|
9
9
|
return /* @__PURE__ */ a("div", { className: l("table-head-cell-content", d && "table-head-cell-content-hidden"), children: /* @__PURE__ */ r("div", { className: "table-head-cell-content-row", children: [
|
|
10
10
|
e.sortable ? /* @__PURE__ */ a(
|
|
11
11
|
"button",
|
|
12
12
|
{
|
|
13
13
|
type: "button",
|
|
14
14
|
className: l("table-head-button", e.filter && "table-head-button-has-filter"),
|
|
15
|
-
"aria-label":
|
|
15
|
+
"aria-label": s,
|
|
16
16
|
onClick: (h) => b?.(
|
|
17
17
|
e.columnKey ?? String(e.key),
|
|
18
18
|
e.sortDirection === "asc" ? "desc" : "asc",
|
|
@@ -43,7 +43,7 @@ const u = (c) => {
|
|
|
43
43
|
e.filter && "table-head-label-wrapper-has-filter",
|
|
44
44
|
t && "table-head-drag-label"
|
|
45
45
|
),
|
|
46
|
-
"aria-label":
|
|
46
|
+
"aria-label": s,
|
|
47
47
|
...t,
|
|
48
48
|
children: o
|
|
49
49
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableHeaderCellContent.js","sources":["../../../../../src/components/table/render/header/TableHeaderCellContent.tsx"],"sourcesContent":["import classNames from '../../../../utils/classNames';\nimport SortArrows from '../../SortArrows';\nimport type { TableRowData } from '../../Table.types';\nimport type { SharedHeaderCellProps } from './TableHeader.types';\n\nconst TableHeaderCellContent = (props: SharedHeaderCellProps<TableRowData>) => {\n const { column, dragActivatorProps, dragActivatorRef, hideWhileDragging, onSortChange } = props;\n\n const ariaLabel = column.hideLabel && typeof column.label === 'string' ? column.label : undefined;\n\n const labelContent = column.hideLabel ? null : column.icon ? (\n <span className='display-
|
|
1
|
+
{"version":3,"file":"TableHeaderCellContent.js","sources":["../../../../../src/components/table/render/header/TableHeaderCellContent.tsx"],"sourcesContent":["import classNames from '../../../../utils/classNames';\nimport SortArrows from '../../SortArrows';\nimport type { TableRowData } from '../../Table.types';\nimport type { SharedHeaderCellProps } from './TableHeader.types';\n\nconst TableHeaderCellContent = (props: SharedHeaderCellProps<TableRowData>) => {\n const { column, dragActivatorProps, dragActivatorRef, hideWhileDragging, onSortChange } = props;\n\n const ariaLabel = column.hideLabel && typeof column.label === 'string' ? column.label : undefined;\n\n const labelContent = column.hideLabel ? null : column.icon ? (\n <span className='display-flex align-items-center gap-5'>\n <span className={classNames('text-color-dark rioglyph', column.icon)} />\n <span>{column.label}</span>\n </span>\n ) : (\n column.label\n );\n\n const wrappedLabelContent = labelContent === null ? null : <span className='table-head-label'>{labelContent}</span>;\n\n return (\n <div className={classNames('table-head-cell-content', hideWhileDragging && 'table-head-cell-content-hidden')}>\n <div className='table-head-cell-content-row'>\n {column.sortable ? (\n <button\n type='button'\n className={classNames('table-head-button', column.filter && 'table-head-button-has-filter')}\n aria-label={ariaLabel}\n onClick={event =>\n onSortChange?.(\n column.columnKey ?? String(column.key),\n column.sortDirection === 'asc' ? 'desc' : 'asc',\n event\n )\n }\n >\n <span\n ref={dragActivatorRef}\n className={classNames(\n 'table-head-button-label',\n dragActivatorProps && 'table-head-drag-label'\n )}\n {...dragActivatorProps}\n >\n <SortArrows direction={column.sortDirection} />\n {wrappedLabelContent}\n </span>\n </button>\n ) : (\n <span\n ref={dragActivatorRef}\n className={classNames(\n 'table-head-label-wrapper',\n column.filter && 'table-head-label-wrapper-has-filter',\n dragActivatorProps && 'table-head-drag-label'\n )}\n aria-label={ariaLabel}\n {...dragActivatorProps}\n >\n {wrappedLabelContent}\n </span>\n )}\n {column.filter && <span className='table-head-filter'>{column.filter}</span>}\n </div>\n </div>\n );\n};\n\nexport default TableHeaderCellContent;\n"],"names":["TableHeaderCellContent","props","column","dragActivatorProps","dragActivatorRef","hideWhileDragging","onSortChange","ariaLabel","labelContent","jsxs","jsx","classNames","wrappedLabelContent","event","SortArrows"],"mappings":";;;AAKA,MAAMA,IAAyB,CAACC,MAA+C;AAC3E,QAAM,EAAE,QAAAC,GAAQ,oBAAAC,GAAoB,kBAAAC,GAAkB,mBAAAC,GAAmB,cAAAC,MAAiBL,GAEpFM,IAAYL,EAAO,aAAa,OAAOA,EAAO,SAAU,WAAWA,EAAO,QAAQ,QAElFM,IAAeN,EAAO,YAAY,OAAOA,EAAO,OAClD,gBAAAO,EAAC,QAAA,EAAK,WAAU,yCACZ,UAAA;AAAA,IAAA,gBAAAC,EAAC,UAAK,WAAWC,EAAW,4BAA4BT,EAAO,IAAI,GAAG;AAAA,IACtE,gBAAAQ,EAAC,QAAA,EAAM,UAAAR,EAAO,MAAA,CAAM;AAAA,EAAA,EAAA,CACxB,IAEAA,EAAO,OAGLU,IAAsBJ,MAAiB,OAAO,yBAAQ,QAAA,EAAK,WAAU,oBAAoB,UAAAA,EAAA,CAAa;AAE5G,SACI,gBAAAE,EAAC,OAAA,EAAI,WAAWC,EAAW,2BAA2BN,KAAqB,gCAAgC,GACvG,UAAA,gBAAAI,EAAC,OAAA,EAAI,WAAU,+BACV,UAAA;AAAA,IAAAP,EAAO,WACJ,gBAAAQ;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAK;AAAA,QACL,WAAWC,EAAW,qBAAqBT,EAAO,UAAU,8BAA8B;AAAA,QAC1F,cAAYK;AAAA,QACZ,SAAS,CAAAM,MACLP;AAAA,UACIJ,EAAO,aAAa,OAAOA,EAAO,GAAG;AAAA,UACrCA,EAAO,kBAAkB,QAAQ,SAAS;AAAA,UAC1CW;AAAA,QAAA;AAAA,QAIR,UAAA,gBAAAJ;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,KAAKL;AAAA,YACL,WAAWO;AAAA,cACP;AAAA,cACAR,KAAsB;AAAA,YAAA;AAAA,YAEzB,GAAGA;AAAA,YAEJ,UAAA;AAAA,cAAA,gBAAAO,EAACI,GAAA,EAAW,WAAWZ,EAAO,cAAA,CAAe;AAAA,cAC5CU;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACL;AAAA,IAAA,IAGJ,gBAAAF;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAKN;AAAA,QACL,WAAWO;AAAA,UACP;AAAA,UACAT,EAAO,UAAU;AAAA,UACjBC,KAAsB;AAAA,QAAA;AAAA,QAE1B,cAAYI;AAAA,QACX,GAAGJ;AAAA,QAEH,UAAAS;AAAA,MAAA;AAAA,IAAA;AAAA,IAGRV,EAAO,UAAU,gBAAAQ,EAAC,UAAK,WAAU,qBAAqB,YAAO,OAAA,CAAO;AAAA,EAAA,EAAA,CACzE,EAAA,CACJ;AAER;"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { TableVerticalAlign } from '../../Table.types';
|
|
1
2
|
type TableHeaderSelectionCellProps = {
|
|
2
3
|
isAllSelected?: boolean;
|
|
3
4
|
isSomeRowsSelected?: boolean;
|
|
@@ -5,6 +6,7 @@ type TableHeaderSelectionCellProps = {
|
|
|
5
6
|
disabled?: boolean;
|
|
6
7
|
rowCount: number;
|
|
7
8
|
selectionHeaderContent?: React.ReactNode;
|
|
9
|
+
selectionCheckboxVerticalAlignment?: TableVerticalAlign;
|
|
8
10
|
};
|
|
9
11
|
declare const TableHeaderSelectionCell: (props: TableHeaderSelectionCellProps) => import("react/jsx-runtime").JSX.Element;
|
|
10
12
|
export default TableHeaderSelectionCell;
|