@rio-cloud/rio-uikit 2.3.0 → 2.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/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/layers/overlayLayers/IncidentsLayer.d.ts +1 -0
- package/components/map/components/features/layers/overlayLayers/IncidentsLayer.js +64 -62
- package/components/map/components/features/layers/overlayLayers/IncidentsLayer.js.map +1 -1
- package/components/map/components/features/layers/overlayLayers/TrafficLayer.js +1 -1
- package/components/map/components/features/layers/overlayLayers/TrafficLayer.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/BaseSelectDropdown.js +72 -76
- package/components/selects/BaseSelectDropdown.js.map +1 -1
- package/components/selects/Multiselect.d.ts +6 -0
- package/components/selects/Multiselect.js +131 -125
- 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
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TableExpandAllGroupsButton.js","sources":["../../../src/components/table/TableExpandAllGroupsButton.tsx"],"sourcesContent":["import type { MouseEventHandler } from 'react';\n\nimport Button from '../button/Button';\nimport classNames from '../../utils/classNames';\n\nexport type TableExpandAllGroupsButtonProps = {\n /**\n * Controls whether all related groups are currently expanded.\n *\n * @default false\n */\n expanded?: boolean;\n\n /**\n * Disables the expand all groups button.\n *\n * @default false\n */\n disabled?: boolean;\n\n /**\n * Callback triggered when the expand all groups button is clicked.\n */\n onClick?: MouseEventHandler<HTMLButtonElement>;\n\n /**\n * Optional additional class names for the button element.\n */\n className?: string;\n};\n\nconst TableExpandAllGroupsButton = (props: TableExpandAllGroupsButtonProps) => {\n const { expanded = false, disabled = false, onClick, className, ...remainingProps } = props;\n\n return (\n <Button\n {...remainingProps}\n bsStyle='muted'\n bsSize='sm'\n iconOnly\n disabled={disabled}\n className={classNames(\n 'table-expand-all-groups-button',\n expanded && 'table-expand-all-groups-button-expanded',\n className\n )}\n onClick={onClick}\n >\n <span className='rioglyph rioglyph-angle-double-down text-size-16' />\n </Button>\n );\n};\n\nexport default TableExpandAllGroupsButton;\n"],"names":["TableExpandAllGroupsButton","props","expanded","disabled","onClick","className","remainingProps","jsx","Button","classNames"],"mappings":";;;AA+BA,MAAMA,IAA6B,CAACC,MAA2C;AAC3E,QAAM,EAAE,UAAAC,IAAW,IAAO,UAAAC,IAAW,IAAO,SAAAC,GAAS,WAAAC,GAAW,GAAGC,EAAA,IAAmBL;AAEtF,SACI,gBAAAM;AAAA,IAACC;AAAA,IAAA;AAAA,MACI,GAAGF;AAAA,MACJ,SAAQ;AAAA,MACR,QAAO;AAAA,MACP,UAAQ;AAAA,MACR,UAAAH;AAAA,MACA,WAAWM;AAAA,QACP;AAAA,QACAP,KAAY;AAAA,QACZG;AAAA,MAAA;AAAA,MAEJ,SAAAD;AAAA,MAEA,UAAA,gBAAAG,EAAC,QAAA,EAAK,WAAU,mDAAA,CAAmD;AAAA,IAAA;AAAA,EAAA;AAG/E;"}
|
|
@@ -1,41 +1,54 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as r, jsxs as M, Fragment as j } from "react/jsx-runtime";
|
|
2
2
|
import { useReducedMotion as B, motion as H } from "motion/react";
|
|
3
3
|
import { useRef as U, useState as L, useMemo as W } from "react";
|
|
4
4
|
import X from "../checkbox/Checkbox.js";
|
|
5
|
-
import
|
|
5
|
+
import k from "../../utils/classNames.js";
|
|
6
6
|
import { resolveRowKey as q, resolveRowClassName as z } from "./model/resolveRowMeta.js";
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
7
|
+
import { getVerticalAlignClassName as G } from "./shared/getAlignClassName.js";
|
|
8
|
+
import { useOptionalTableInteractionContext as J } from "./context/TableInteractionContext.js";
|
|
9
|
+
import { useOptionalTableRenderConfigContext as Q } from "./context/TableRenderConfigContext.js";
|
|
10
|
+
import { useOptionalTableSection as Y, useTableBodyContext as Z, extractTableHtmlAttributes as I, TableRowContext as $ } from "./context/TableStructureContext.js";
|
|
11
|
+
import { useOptionalTableRenderContext as ee } from "./context/TableRenderContext.js";
|
|
12
|
+
import { getInteractiveRowProps as oe } from "./shared/getInteractiveRowProps.js";
|
|
13
|
+
const C = 0.18, te = (b) => {
|
|
14
|
+
const {
|
|
15
|
+
isSelected: p,
|
|
16
|
+
isSelectable: u,
|
|
17
|
+
hideSelectionControl: x,
|
|
18
|
+
isTableView: g,
|
|
19
|
+
onToggleSelection: h,
|
|
20
|
+
cardCellClassName: l,
|
|
21
|
+
selectionCheckboxVerticalAlignment: e
|
|
22
|
+
} = b;
|
|
23
|
+
return /* @__PURE__ */ r(
|
|
15
24
|
"div",
|
|
16
25
|
{
|
|
17
|
-
className:
|
|
26
|
+
className: k(
|
|
27
|
+
"table-cell table-selection-cell",
|
|
28
|
+
G(e),
|
|
29
|
+
!g && l
|
|
30
|
+
),
|
|
18
31
|
role: "cell",
|
|
19
32
|
"aria-colindex": 1,
|
|
20
|
-
style:
|
|
21
|
-
onClick: (
|
|
22
|
-
onKeyDown: (
|
|
23
|
-
children: !
|
|
33
|
+
style: g ? { gridColumn: "1 / span 1", gridRow: "1 / span 1" } : void 0,
|
|
34
|
+
onClick: (n) => n.stopPropagation(),
|
|
35
|
+
onKeyDown: (n) => n.stopPropagation(),
|
|
36
|
+
children: !x && /* @__PURE__ */ r("div", { className: "table-selection-control", children: /* @__PURE__ */ r(X, { checked: p, disabled: !u, onChange: h }) })
|
|
24
37
|
}
|
|
25
38
|
);
|
|
26
39
|
}, pe = (b) => {
|
|
27
|
-
const { children:
|
|
40
|
+
const { children: p, className: u, noHover: x, parentKey: g, selectable: h, ...l } = b, e = Q(), n = ee(), o = J(), P = Y(), y = Z(), m = U(0);
|
|
28
41
|
m.current = 0;
|
|
29
42
|
const [D, f] = L(!0), v = B(), O = W(
|
|
30
43
|
() => v ? {
|
|
31
44
|
initial: { opacity: 0 },
|
|
32
45
|
animate: {
|
|
33
46
|
opacity: 1,
|
|
34
|
-
transition: { duration:
|
|
47
|
+
transition: { duration: C, ease: "easeInOut" }
|
|
35
48
|
},
|
|
36
49
|
exit: {
|
|
37
50
|
opacity: 0,
|
|
38
|
-
transition: { duration:
|
|
51
|
+
transition: { duration: C, ease: "easeInOut" }
|
|
39
52
|
}
|
|
40
53
|
} : {
|
|
41
54
|
initial: { opacity: 0, height: 0, y: -8 },
|
|
@@ -43,78 +56,79 @@ const p = 0.18, oe = (b) => {
|
|
|
43
56
|
opacity: 1,
|
|
44
57
|
height: "auto",
|
|
45
58
|
y: 0,
|
|
46
|
-
transition: { duration:
|
|
59
|
+
transition: { duration: C, ease: "easeOut" }
|
|
47
60
|
},
|
|
48
61
|
exit: {
|
|
49
62
|
opacity: 0,
|
|
50
63
|
height: 0,
|
|
51
64
|
y: -8,
|
|
52
|
-
transition: { duration:
|
|
65
|
+
transition: { duration: C, ease: "easeInOut" }
|
|
53
66
|
}
|
|
54
67
|
},
|
|
55
68
|
[v]
|
|
56
69
|
);
|
|
57
|
-
if (!
|
|
70
|
+
if (!n || !e || !o || n.columns.length === 0 || P !== "body" || !y)
|
|
58
71
|
return null;
|
|
59
|
-
const c =
|
|
72
|
+
const c = l, i = y.nextRowIndex(), t = q(c, i, e.rowKey), K = typeof e.rowAnimationProps == "function" ? e.rowAnimationProps(c, i) : e.rowAnimationProps, a = oe({
|
|
60
73
|
isClickable: o.isClickable,
|
|
61
|
-
onRowClick: (
|
|
62
|
-
o.onRowClick?.(
|
|
74
|
+
onRowClick: (s, d) => {
|
|
75
|
+
o.onRowClick?.(s, d), o.onActiveRowChange?.(
|
|
63
76
|
o.activeRowId === t ? void 0 : t,
|
|
64
|
-
|
|
77
|
+
s,
|
|
65
78
|
d
|
|
66
79
|
);
|
|
67
80
|
},
|
|
68
81
|
row: c,
|
|
69
|
-
rowIndex:
|
|
82
|
+
rowIndex: i
|
|
70
83
|
});
|
|
71
84
|
let w;
|
|
72
85
|
e.expandedRowAnimation !== !1 && (w = {
|
|
73
86
|
...O,
|
|
74
87
|
...K
|
|
75
88
|
});
|
|
76
|
-
const
|
|
89
|
+
const R = o.selectableRowIdSet.has(t), A = R && o.selectedRowIdSet.has(t), S = k(
|
|
77
90
|
"table-row",
|
|
78
91
|
"table-row-expanded-data",
|
|
79
92
|
!e.isTableView && "divider-y-1 divider-color-lighter divider-style-solid",
|
|
80
93
|
o.activeRowId === t && "table-row-active",
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
94
|
+
A && "table-row-selected",
|
|
95
|
+
a.isClickableClassName,
|
|
96
|
+
x && "table-row-no-hover",
|
|
84
97
|
!e.isTableView && e.cardClasses.rowClassName,
|
|
85
98
|
u,
|
|
86
|
-
z(e.rowClassName, c,
|
|
87
|
-
),
|
|
88
|
-
|
|
99
|
+
z(e.rowClassName, c, i)
|
|
100
|
+
), V = o.showSelectionColumn && /* @__PURE__ */ r(
|
|
101
|
+
te,
|
|
89
102
|
{
|
|
90
|
-
isSelected:
|
|
91
|
-
isSelectable:
|
|
92
|
-
hideSelectionControl: !
|
|
103
|
+
isSelected: A,
|
|
104
|
+
isSelectable: R,
|
|
105
|
+
hideSelectionControl: !R && o.hideSelectionCheckboxesForExcludedRows,
|
|
93
106
|
isTableView: e.isTableView,
|
|
94
107
|
onToggleSelection: () => o.onToggleRowSelection?.(t),
|
|
95
|
-
cardCellClassName: e.cardClasses.cellClassName
|
|
108
|
+
cardCellClassName: e.cardClasses.cellClassName,
|
|
109
|
+
selectionCheckboxVerticalAlignment: e.selectionCheckboxVerticalAlignment
|
|
96
110
|
}
|
|
97
|
-
),
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
] }),
|
|
101
|
-
...
|
|
102
|
-
className:
|
|
103
|
-
"data-index":
|
|
111
|
+
), T = /* @__PURE__ */ M(j, { children: [
|
|
112
|
+
V,
|
|
113
|
+
p
|
|
114
|
+
] }), E = {
|
|
115
|
+
...I(l),
|
|
116
|
+
className: S,
|
|
117
|
+
"data-index": i,
|
|
104
118
|
"data-row-id": String(t),
|
|
105
|
-
onClick:
|
|
106
|
-
onKeyDown:
|
|
119
|
+
onClick: a.onClick,
|
|
120
|
+
onKeyDown: a.onKeyDown,
|
|
107
121
|
role: "row",
|
|
108
|
-
tabIndex:
|
|
122
|
+
tabIndex: a.tabIndex
|
|
109
123
|
}, _ = {
|
|
110
|
-
...
|
|
111
|
-
className:
|
|
112
|
-
"data-index":
|
|
124
|
+
...I(l),
|
|
125
|
+
className: S,
|
|
126
|
+
"data-index": i,
|
|
113
127
|
"data-row-id": String(t),
|
|
114
|
-
onClick:
|
|
115
|
-
onKeyDown:
|
|
128
|
+
onClick: a.onClick,
|
|
129
|
+
onKeyDown: a.onKeyDown,
|
|
116
130
|
role: "row",
|
|
117
|
-
tabIndex:
|
|
131
|
+
tabIndex: a.tabIndex,
|
|
118
132
|
onAnimationStart: () => f(!0),
|
|
119
133
|
onAnimationComplete: () => f(!1),
|
|
120
134
|
...w,
|
|
@@ -122,30 +136,30 @@ const p = 0.18, oe = (b) => {
|
|
|
122
136
|
...w?.style ?? {},
|
|
123
137
|
overflow: D ? "hidden" : "visible"
|
|
124
138
|
}
|
|
125
|
-
}, N = /* @__PURE__ */
|
|
126
|
-
|
|
139
|
+
}, N = /* @__PURE__ */ r(
|
|
140
|
+
$.Provider,
|
|
127
141
|
{
|
|
128
142
|
value: {
|
|
129
|
-
nextColumnIndex: (
|
|
130
|
-
if (
|
|
131
|
-
return m.current =
|
|
143
|
+
nextColumnIndex: (s, d = 1) => {
|
|
144
|
+
if (s !== void 0 && s >= 0)
|
|
145
|
+
return m.current = s + d, s;
|
|
132
146
|
const F = m.current;
|
|
133
147
|
return m.current += d, F;
|
|
134
148
|
},
|
|
135
|
-
rowIndex:
|
|
149
|
+
rowIndex: i,
|
|
136
150
|
rowId: t,
|
|
137
151
|
rowData: c
|
|
138
152
|
},
|
|
139
|
-
children: w ? /* @__PURE__ */
|
|
153
|
+
children: w ? /* @__PURE__ */ r(H.div, { ..._, children: T }) : /* @__PURE__ */ r("div", { ...E, children: T })
|
|
140
154
|
}
|
|
141
155
|
);
|
|
142
|
-
return
|
|
156
|
+
return n.renderDraft.hasExpandableRows = !0, n.renderDraft.bodyRows.push({
|
|
143
157
|
rowId: t,
|
|
144
|
-
rowIndex:
|
|
158
|
+
rowIndex: i,
|
|
145
159
|
kind: "expanded",
|
|
146
160
|
selectable: h !== !1,
|
|
147
161
|
render: () => N
|
|
148
|
-
}),
|
|
162
|
+
}), n.isRegisteringBodyRows ? null : N;
|
|
149
163
|
};
|
|
150
164
|
export {
|
|
151
165
|
pe as default
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableExpandedRow.js","sources":["../../../src/components/table/TableExpandedRow.tsx"],"sourcesContent":["import { motion, type HTMLMotionProps, useReducedMotion, type MotionProps } from 'motion/react';\nimport { useMemo, useRef, useState, type ReactNode } from 'react';\n\nimport Checkbox from '../checkbox/Checkbox';\nimport classNames from '../../utils/classNames';\nimport type { TableHtmlAttributes, TableRowData } from './Table.types';\nimport { resolveRowClassName, resolveRowKey } from './model/resolveRowMeta';\nimport { useOptionalTableInteractionContext } from './context/TableInteractionContext';\nimport { useOptionalTableRenderConfigContext } from './context/TableRenderConfigContext';\nimport {\n extractTableHtmlAttributes,\n TableRowContext,\n useTableBodyContext,\n useOptionalTableSection,\n} from './context/TableStructureContext';\nimport { useOptionalTableRenderContext } from './context/TableRenderContext';\nimport { getInteractiveRowProps } from './shared/getInteractiveRowProps';\n\nconst DEFAULT_EXPANDED_ROW_DURATION = 0.18;\n\nexport type TableExpandedRowProps<RowType extends TableRowData> = TableHtmlAttributes &\n Partial<RowType> & {\n /**\n * Parent row key used to associate this expanded row with its parent.\n */\n parentKey: string | number;\n\n /**\n * Optional class names only for this expanded 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 TableExpandedRowSelectionCellProps = {\n isSelected: boolean;\n isSelectable: boolean;\n hideSelectionControl?: boolean;\n isTableView: boolean;\n onToggleSelection?: () => void;\n cardCellClassName?: string;\n};\n\nconst TableExpandedRowSelectionCell = (props: TableExpandedRowSelectionCellProps) => {\n const { isSelected, isSelectable, hideSelectionControl, isTableView, onToggleSelection, cardCellClassName } = props;\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 TableExpandedRow = <RowType extends TableRowData = TableRowData>(props: TableExpandedRowProps<RowType>) => {\n const { children, className, noHover, parentKey: _parentKey, selectable, ...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 const [isAnimating, setIsAnimating] = useState(true);\n const shouldReduceMotion = useReducedMotion();\n\n const animation = useMemo(\n () =>\n shouldReduceMotion\n ? {\n initial: { opacity: 0 },\n animate: {\n opacity: 1,\n transition: { duration: DEFAULT_EXPANDED_ROW_DURATION, ease: 'easeInOut' as const },\n },\n exit: {\n opacity: 0,\n transition: { duration: DEFAULT_EXPANDED_ROW_DURATION, ease: 'easeInOut' as const },\n },\n }\n : {\n initial: { opacity: 0, height: 0, y: -8 },\n animate: {\n opacity: 1,\n height: 'auto',\n y: 0,\n transition: { duration: DEFAULT_EXPANDED_ROW_DURATION, ease: 'easeOut' as const },\n },\n exit: {\n opacity: 0,\n height: 0,\n y: -8,\n transition: { duration: DEFAULT_EXPANDED_ROW_DURATION, ease: 'easeInOut' as const },\n },\n },\n [shouldReduceMotion]\n );\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 unknown 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,\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 let mergedRowAnimationProps: MotionProps | undefined;\n\n if (renderConfigContext.expandedRowAnimation !== false) {\n mergedRowAnimationProps = {\n ...animation,\n ...resolvedRowAnimationProps,\n };\n }\n\n const isSelectable = interactionContext.selectableRowIdSet.has(rowId);\n const isSelected = isSelectable && interactionContext.selectedRowIdSet.has(rowId);\n\n const rowClassNames = classNames(\n 'table-row',\n 'table-row-expanded-data',\n !renderConfigContext.isTableView && 'divider-y-1 divider-color-lighter divider-style-solid',\n interactionContext.activeRowId === rowId && 'table-row-active',\n isSelected && 'table-row-selected',\n interactiveRowProps.isClickableClassName,\n noHover && 'table-row-no-hover',\n !renderConfigContext.isTableView && renderConfigContext.cardClasses.rowClassName,\n className,\n resolveRowClassName(renderConfigContext.rowClassName, rowData, rowIndex)\n );\n\n const selectionCell = interactionContext.showSelectionColumn && (\n <TableExpandedRowSelectionCell\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 rowContent = (\n <>\n {selectionCell}\n {children}\n </>\n );\n\n const staticRowProps = {\n ...extractTableHtmlAttributes(remainingProps),\n className: rowClassNames,\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-row-id' | 'onClick' | 'onKeyDown' | 'role' | 'style' | 'tabIndex'\n >),\n className: rowClassNames,\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 onAnimationStart: () => setIsAnimating(true),\n onAnimationComplete: () => setIsAnimating(false),\n ...mergedRowAnimationProps,\n style: {\n ...(mergedRowAnimationProps?.style ?? {}),\n overflow: isAnimating ? 'hidden' : 'visible',\n },\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 {mergedRowAnimationProps ? (\n <motion.div {...animatedRowProps}>{rowContent}</motion.div>\n ) : (\n <div {...staticRowProps}>{rowContent}</div>\n )}\n </TableRowContext.Provider>\n );\n\n renderContext.renderDraft.hasExpandableRows = true;\n renderContext.renderDraft.bodyRows.push({\n rowId,\n rowIndex,\n kind: 'expanded',\n selectable: selectable !== false,\n render: () => rowNode,\n });\n\n return renderContext.isRegisteringBodyRows ? null : rowNode;\n};\n\nexport default TableExpandedRow;\n"],"names":["DEFAULT_EXPANDED_ROW_DURATION","TableExpandedRowSelectionCell","props","isSelected","isSelectable","hideSelectionControl","isTableView","onToggleSelection","cardCellClassName","jsx","classNames","event","Checkbox","TableExpandedRow","children","className","noHover","_parentKey","selectable","remainingProps","renderConfigContext","useOptionalTableRenderConfigContext","renderContext","useOptionalTableRenderContext","interactionContext","useOptionalTableInteractionContext","section","useOptionalTableSection","bodyContext","useTableBodyContext","cellIndexRef","useRef","isAnimating","setIsAnimating","useState","shouldReduceMotion","useReducedMotion","animation","useMemo","rowData","rowIndex","rowId","resolveRowKey","resolvedRowAnimationProps","interactiveRowProps","getInteractiveRowProps","clickedRow","clickedRowIndex","mergedRowAnimationProps","rowClassNames","resolveRowClassName","selectionCell","rowContent","jsxs","Fragment","staticRowProps","extractTableHtmlAttributes","animatedRowProps","rowNode","TableRowContext","explicitColumnIndex","span","nextIndex","motion"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TableExpandedRow.js","sources":["../../../src/components/table/TableExpandedRow.tsx"],"sourcesContent":["import { motion, type HTMLMotionProps, useReducedMotion, type MotionProps } from 'motion/react';\nimport { useMemo, useRef, useState, type ReactNode } from 'react';\n\nimport Checkbox from '../checkbox/Checkbox';\nimport classNames from '../../utils/classNames';\nimport type { TableHtmlAttributes, TableRowData } from './Table.types';\nimport { resolveRowClassName, resolveRowKey } from './model/resolveRowMeta';\nimport { getVerticalAlignClassName } from './shared/getAlignClassName';\nimport { useOptionalTableInteractionContext } from './context/TableInteractionContext';\nimport { useOptionalTableRenderConfigContext } from './context/TableRenderConfigContext';\nimport {\n extractTableHtmlAttributes,\n TableRowContext,\n useTableBodyContext,\n useOptionalTableSection,\n} from './context/TableStructureContext';\nimport { useOptionalTableRenderContext } from './context/TableRenderContext';\nimport { getInteractiveRowProps } from './shared/getInteractiveRowProps';\nimport type { TableVerticalAlign } from './Table.types';\n\nconst DEFAULT_EXPANDED_ROW_DURATION = 0.18;\n\nexport type TableExpandedRowProps<RowType extends TableRowData> = TableHtmlAttributes &\n Partial<RowType> & {\n /**\n * Parent row key used to associate this expanded row with its parent.\n */\n parentKey: string | number;\n\n /**\n * Optional class names only for this expanded 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 TableExpandedRowSelectionCellProps = {\n isSelected: boolean;\n isSelectable: boolean;\n hideSelectionControl?: boolean;\n isTableView: boolean;\n onToggleSelection?: () => void;\n cardCellClassName?: string;\n selectionCheckboxVerticalAlignment?: TableVerticalAlign;\n};\n\nconst TableExpandedRowSelectionCell = (props: TableExpandedRowSelectionCellProps) => {\n const {\n isSelected,\n isSelectable,\n hideSelectionControl,\n isTableView,\n onToggleSelection,\n cardCellClassName,\n selectionCheckboxVerticalAlignment,\n } = props;\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 TableExpandedRow = <RowType extends TableRowData = TableRowData>(props: TableExpandedRowProps<RowType>) => {\n const { children, className, noHover, parentKey: _parentKey, selectable, ...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 const [isAnimating, setIsAnimating] = useState(true);\n const shouldReduceMotion = useReducedMotion();\n\n const animation = useMemo(\n () =>\n shouldReduceMotion\n ? {\n initial: { opacity: 0 },\n animate: {\n opacity: 1,\n transition: { duration: DEFAULT_EXPANDED_ROW_DURATION, ease: 'easeInOut' as const },\n },\n exit: {\n opacity: 0,\n transition: { duration: DEFAULT_EXPANDED_ROW_DURATION, ease: 'easeInOut' as const },\n },\n }\n : {\n initial: { opacity: 0, height: 0, y: -8 },\n animate: {\n opacity: 1,\n height: 'auto',\n y: 0,\n transition: { duration: DEFAULT_EXPANDED_ROW_DURATION, ease: 'easeOut' as const },\n },\n exit: {\n opacity: 0,\n height: 0,\n y: -8,\n transition: { duration: DEFAULT_EXPANDED_ROW_DURATION, ease: 'easeInOut' as const },\n },\n },\n [shouldReduceMotion]\n );\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 unknown 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,\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 let mergedRowAnimationProps: MotionProps | undefined;\n\n if (renderConfigContext.expandedRowAnimation !== false) {\n mergedRowAnimationProps = {\n ...animation,\n ...resolvedRowAnimationProps,\n };\n }\n\n const isSelectable = interactionContext.selectableRowIdSet.has(rowId);\n const isSelected = isSelectable && interactionContext.selectedRowIdSet.has(rowId);\n\n const rowClassNames = classNames(\n 'table-row',\n 'table-row-expanded-data',\n !renderConfigContext.isTableView && 'divider-y-1 divider-color-lighter divider-style-solid',\n interactionContext.activeRowId === rowId && 'table-row-active',\n isSelected && 'table-row-selected',\n interactiveRowProps.isClickableClassName,\n noHover && 'table-row-no-hover',\n !renderConfigContext.isTableView && renderConfigContext.cardClasses.rowClassName,\n className,\n resolveRowClassName(renderConfigContext.rowClassName, rowData, rowIndex)\n );\n\n const selectionCell = interactionContext.showSelectionColumn && (\n <TableExpandedRowSelectionCell\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 rowContent = (\n <>\n {selectionCell}\n {children}\n </>\n );\n\n const staticRowProps = {\n ...extractTableHtmlAttributes(remainingProps),\n className: rowClassNames,\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-row-id' | 'onClick' | 'onKeyDown' | 'role' | 'style' | 'tabIndex'\n >),\n className: rowClassNames,\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 onAnimationStart: () => setIsAnimating(true),\n onAnimationComplete: () => setIsAnimating(false),\n ...mergedRowAnimationProps,\n style: {\n ...(mergedRowAnimationProps?.style ?? {}),\n overflow: isAnimating ? 'hidden' : 'visible',\n },\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 {mergedRowAnimationProps ? (\n <motion.div {...animatedRowProps}>{rowContent}</motion.div>\n ) : (\n <div {...staticRowProps}>{rowContent}</div>\n )}\n </TableRowContext.Provider>\n );\n\n renderContext.renderDraft.hasExpandableRows = true;\n renderContext.renderDraft.bodyRows.push({\n rowId,\n rowIndex,\n kind: 'expanded',\n selectable: selectable !== false,\n render: () => rowNode,\n });\n\n return renderContext.isRegisteringBodyRows ? null : rowNode;\n};\n\nexport default TableExpandedRow;\n"],"names":["DEFAULT_EXPANDED_ROW_DURATION","TableExpandedRowSelectionCell","props","isSelected","isSelectable","hideSelectionControl","isTableView","onToggleSelection","cardCellClassName","selectionCheckboxVerticalAlignment","jsx","classNames","getVerticalAlignClassName","event","Checkbox","TableExpandedRow","children","className","noHover","_parentKey","selectable","remainingProps","renderConfigContext","useOptionalTableRenderConfigContext","renderContext","useOptionalTableRenderContext","interactionContext","useOptionalTableInteractionContext","section","useOptionalTableSection","bodyContext","useTableBodyContext","cellIndexRef","useRef","isAnimating","setIsAnimating","useState","shouldReduceMotion","useReducedMotion","animation","useMemo","rowData","rowIndex","rowId","resolveRowKey","resolvedRowAnimationProps","interactiveRowProps","getInteractiveRowProps","clickedRow","clickedRowIndex","mergedRowAnimationProps","rowClassNames","resolveRowClassName","selectionCell","rowContent","jsxs","Fragment","staticRowProps","extractTableHtmlAttributes","animatedRowProps","rowNode","TableRowContext","explicitColumnIndex","span","nextIndex","motion"],"mappings":"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"}
|
|
@@ -1,24 +1,24 @@
|
|
|
1
1
|
import { jsx as l } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import { useOptionalTableRenderContext as
|
|
5
|
-
const
|
|
6
|
-
const { expanded:
|
|
2
|
+
import d from "../button/Button.js";
|
|
3
|
+
import i from "../../utils/classNames.js";
|
|
4
|
+
import { useOptionalTableRenderContext as m } from "./context/TableRenderContext.js";
|
|
5
|
+
const u = (t) => {
|
|
6
|
+
const { expanded: n = !1, disabled: a = !1, onClick: o, className: r, ...s } = t, e = m();
|
|
7
7
|
return e && (e.renderDraft.hasExpandableRows = !0), /* @__PURE__ */ l(
|
|
8
|
-
|
|
8
|
+
d,
|
|
9
9
|
{
|
|
10
10
|
...s,
|
|
11
11
|
bsStyle: "muted",
|
|
12
12
|
bsSize: "xs",
|
|
13
13
|
iconOnly: !0,
|
|
14
|
-
disabled:
|
|
15
|
-
iconName:
|
|
16
|
-
className:
|
|
17
|
-
onClick:
|
|
14
|
+
disabled: a,
|
|
15
|
+
iconName: "rioglyph-chevron-down",
|
|
16
|
+
className: i("table-expander-button", n && "table-expander-button-expanded", r),
|
|
17
|
+
onClick: o
|
|
18
18
|
}
|
|
19
19
|
);
|
|
20
20
|
};
|
|
21
21
|
export {
|
|
22
|
-
|
|
22
|
+
u as default
|
|
23
23
|
};
|
|
24
24
|
//# sourceMappingURL=TableExpanderButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableExpanderButton.js","sources":["../../../src/components/table/TableExpanderButton.tsx"],"sourcesContent":["import type { MouseEventHandler } from 'react';\n\nimport Button from '../button/Button';\nimport classNames from '../../utils/classNames';\nimport { useOptionalTableRenderContext } from './context/TableRenderContext';\n\nexport type TableExpanderButtonProps = {\n /**\n * Controls whether the related row is currently expanded.\n *\n * @default false\n */\n expanded?: boolean;\n\n /**\n * Disables the expander button.\n *\n * @default false\n */\n disabled?: boolean;\n\n /**\n * Callback triggered when the expander button is clicked.\n */\n onClick?: MouseEventHandler<HTMLButtonElement>;\n\n /**\n * Optional additional class names for the button element.\n */\n className?: string;\n};\n\nconst TableExpanderButton = (props: TableExpanderButtonProps) => {\n const { expanded = false, disabled = false, onClick, className, ...remainingProps } = props;\n\n const renderContext = useOptionalTableRenderContext();\n\n if (renderContext) {\n renderContext.renderDraft.hasExpandableRows = true;\n }\n\n return (\n <Button\n {...remainingProps}\n bsStyle='muted'\n bsSize='xs'\n iconOnly\n disabled={disabled}\n iconName=
|
|
1
|
+
{"version":3,"file":"TableExpanderButton.js","sources":["../../../src/components/table/TableExpanderButton.tsx"],"sourcesContent":["import type { MouseEventHandler } from 'react';\n\nimport Button from '../button/Button';\nimport classNames from '../../utils/classNames';\nimport { useOptionalTableRenderContext } from './context/TableRenderContext';\n\nexport type TableExpanderButtonProps = {\n /**\n * Controls whether the related row is currently expanded.\n *\n * @default false\n */\n expanded?: boolean;\n\n /**\n * Disables the expander button.\n *\n * @default false\n */\n disabled?: boolean;\n\n /**\n * Callback triggered when the expander button is clicked.\n */\n onClick?: MouseEventHandler<HTMLButtonElement>;\n\n /**\n * Optional additional class names for the button element.\n */\n className?: string;\n};\n\nconst TableExpanderButton = (props: TableExpanderButtonProps) => {\n const { expanded = false, disabled = false, onClick, className, ...remainingProps } = props;\n\n const renderContext = useOptionalTableRenderContext();\n\n if (renderContext) {\n renderContext.renderDraft.hasExpandableRows = true;\n }\n\n return (\n <Button\n {...remainingProps}\n bsStyle='muted'\n bsSize='xs'\n iconOnly\n disabled={disabled}\n iconName='rioglyph-chevron-down'\n className={classNames('table-expander-button', expanded && 'table-expander-button-expanded', className)}\n onClick={onClick}\n />\n );\n};\n\nexport default TableExpanderButton;\n"],"names":["TableExpanderButton","props","expanded","disabled","onClick","className","remainingProps","renderContext","useOptionalTableRenderContext","jsx","Button","classNames"],"mappings":";;;;AAgCA,MAAMA,IAAsB,CAACC,MAAoC;AAC7D,QAAM,EAAE,UAAAC,IAAW,IAAO,UAAAC,IAAW,IAAO,SAAAC,GAAS,WAAAC,GAAW,GAAGC,EAAA,IAAmBL,GAEhFM,IAAgBC,EAAA;AAEtB,SAAID,MACAA,EAAc,YAAY,oBAAoB,KAI9C,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACI,GAAGJ;AAAA,MACJ,SAAQ;AAAA,MACR,QAAO;AAAA,MACP,UAAQ;AAAA,MACR,UAAAH;AAAA,MACA,UAAS;AAAA,MACT,WAAWQ,EAAW,yBAAyBT,KAAY,kCAAkCG,CAAS;AAAA,MACtG,SAAAD;AAAA,IAAA;AAAA,EAAA;AAGZ;"}
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
|
-
import { TableHtmlAttributes } from './Table.types';
|
|
2
|
+
import { TableHtmlAttributes, TableRowId } from './Table.types';
|
|
3
3
|
export type TableGroupRowProps = TableHtmlAttributes & {
|
|
4
|
+
/**
|
|
5
|
+
* Stable row key for selectable group rows.
|
|
6
|
+
*/
|
|
7
|
+
id?: TableRowId;
|
|
4
8
|
/**
|
|
5
9
|
* The content of the full-width group row.
|
|
6
10
|
*/
|
|
@@ -17,6 +21,14 @@ export type TableGroupRowProps = TableHtmlAttributes & {
|
|
|
17
21
|
* Optional class names only for this group row.
|
|
18
22
|
*/
|
|
19
23
|
className?: string;
|
|
24
|
+
/**
|
|
25
|
+
* Includes this group row in table selection.
|
|
26
|
+
*
|
|
27
|
+
* Group rows are not selectable by default so existing grouped tables keep their current full-width layout.
|
|
28
|
+
*
|
|
29
|
+
* @default false
|
|
30
|
+
*/
|
|
31
|
+
selectable?: boolean;
|
|
20
32
|
/**
|
|
21
33
|
* Disable table hover styling for this row.
|
|
22
34
|
*/
|
|
@@ -1,37 +1,71 @@
|
|
|
1
|
-
import { jsx as t } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
import { jsx as t, jsxs as k } from "react/jsx-runtime";
|
|
2
|
+
import T from "../checkbox/Checkbox.js";
|
|
3
|
+
import h from "../../utils/classNames.js";
|
|
4
|
+
import { getVerticalAlignClassName as N } from "./shared/getAlignClassName.js";
|
|
5
|
+
import { useOptionalTableInteractionContext as v } from "./context/TableInteractionContext.js";
|
|
6
|
+
import { useOptionalTableSection as I, useTableBodyContext as A } from "./context/TableStructureContext.js";
|
|
7
|
+
import { useOptionalTableRenderContext as O } from "./context/TableRenderContext.js";
|
|
8
|
+
import { useOptionalTableRenderConfigContext as V } from "./context/TableRenderConfigContext.js";
|
|
9
|
+
const B = (r) => {
|
|
10
|
+
const { isSelected: c, onToggleSelection: s, selectionCheckboxVerticalAlignment: i } = r;
|
|
11
|
+
return /* @__PURE__ */ t(
|
|
12
|
+
"div",
|
|
13
|
+
{
|
|
14
|
+
className: h(
|
|
15
|
+
"table-cell table-selection-cell",
|
|
16
|
+
N(i)
|
|
17
|
+
),
|
|
18
|
+
role: "cell",
|
|
19
|
+
"aria-colindex": 1,
|
|
20
|
+
style: { gridColumn: "1 / span 1", gridRow: "1 / span 1" },
|
|
21
|
+
onClick: (n) => n.stopPropagation(),
|
|
22
|
+
onKeyDown: (n) => n.stopPropagation(),
|
|
23
|
+
children: /* @__PURE__ */ t("div", { className: "table-selection-control", children: /* @__PURE__ */ t(T, { checked: c, onChange: s }) })
|
|
24
|
+
}
|
|
25
|
+
);
|
|
26
|
+
}, q = (r) => {
|
|
27
|
+
const { children: c, className: s, id: i, noHover: n, selectable: m = !1, sticky: b, ...x } = r, g = V(), e = O(), o = v(), f = I(), p = A();
|
|
28
|
+
if (!e || !g || !o || e.columns.length === 0 || f !== "body" || !p)
|
|
9
29
|
return null;
|
|
10
|
-
const
|
|
30
|
+
const a = p.nextRowIndex(), l = i ?? `group-${a}`, u = m && o.selectableRowIdSet.has(l), C = u && o.selectedRowIdSet.has(l), d = o.showSelectionColumn && u, S = e.columns.length + (o.showSelectionColumn && !d ? 1 : 0), y = !!e.renderDraft.bodyMaxHeight, R = d && /* @__PURE__ */ t(
|
|
31
|
+
B,
|
|
32
|
+
{
|
|
33
|
+
isSelected: C,
|
|
34
|
+
onToggleSelection: () => o.onToggleRowSelection?.(l),
|
|
35
|
+
selectionCheckboxVerticalAlignment: g.selectionCheckboxVerticalAlignment
|
|
36
|
+
}
|
|
37
|
+
), w = /* @__PURE__ */ k(
|
|
11
38
|
"div",
|
|
12
39
|
{
|
|
13
|
-
...
|
|
14
|
-
className:
|
|
40
|
+
...x,
|
|
41
|
+
className: h(
|
|
15
42
|
"table-row",
|
|
16
43
|
"table-row-group",
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
44
|
+
d && "table-row-group-selectable",
|
|
45
|
+
b && "table-row-group-sticky",
|
|
46
|
+
b && y && "table-row-sticky-in-container",
|
|
47
|
+
C && "table-row-selected",
|
|
48
|
+
n && "table-row-no-hover",
|
|
49
|
+
s
|
|
21
50
|
),
|
|
22
|
-
"data-index":
|
|
51
|
+
"data-index": a,
|
|
52
|
+
"data-row-id": String(l),
|
|
23
53
|
role: "row",
|
|
24
|
-
children:
|
|
54
|
+
children: [
|
|
55
|
+
R,
|
|
56
|
+
/* @__PURE__ */ t("div", { className: "table-cell table-group-cell", role: "cell", "aria-colspan": S, children: /* @__PURE__ */ t("div", { className: "table-cell-content", children: c }) })
|
|
57
|
+
]
|
|
25
58
|
}
|
|
26
59
|
);
|
|
27
|
-
return
|
|
28
|
-
rowId:
|
|
29
|
-
rowIndex:
|
|
60
|
+
return e.renderDraft.bodyRows.push({
|
|
61
|
+
rowId: l,
|
|
62
|
+
rowIndex: a,
|
|
30
63
|
kind: "group",
|
|
31
|
-
|
|
32
|
-
|
|
64
|
+
selectable: m,
|
|
65
|
+
render: () => w
|
|
66
|
+
}), e.isRegisteringBodyRows ? null : w;
|
|
33
67
|
};
|
|
34
68
|
export {
|
|
35
|
-
|
|
69
|
+
q as default
|
|
36
70
|
};
|
|
37
71
|
//# sourceMappingURL=TableGroupRow.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableGroupRow.js","sources":["../../../src/components/table/TableGroupRow.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport classNames from '../../utils/classNames';\nimport type { TableHtmlAttributes } from './Table.types';\nimport { useOptionalTableInteractionContext } from './context/TableInteractionContext';\nimport { useTableBodyContext, useOptionalTableSection } from './context/TableStructureContext';\nimport { useOptionalTableRenderContext } from './context/TableRenderContext';\n\nexport type TableGroupRowProps = TableHtmlAttributes & {\n /**\n * The content of the full-width group row.\n */\n children?: ReactNode;\n\n /**\n * Keeps the group 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 * Optional class names only for this group row.\n */\n className?: string;\n\n /**\n * Disable table hover styling for this row.\n */\n noHover?: boolean;\n};\n\nconst TableGroupRow = (props: TableGroupRowProps) => {\n const { children, className, noHover, sticky, ...remainingProps } = props;\n\n const renderContext = useOptionalTableRenderContext();\n const interactionContext = useOptionalTableInteractionContext();\n const section = useOptionalTableSection();\n const bodyContext = useTableBodyContext();\n\n if (\n !renderContext ||\n !interactionContext ||\n renderContext.columns.length === 0 ||\n section !== 'body' ||\n !bodyContext\n ) {\n return null;\n }\n\n const rowIndex = bodyContext.nextRowIndex();\n const
|
|
1
|
+
{"version":3,"file":"TableGroupRow.js","sources":["../../../src/components/table/TableGroupRow.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport Checkbox from '../checkbox/Checkbox';\nimport classNames from '../../utils/classNames';\nimport type { TableHtmlAttributes, TableRowId, TableVerticalAlign } from './Table.types';\nimport { getVerticalAlignClassName } from './shared/getAlignClassName';\nimport { useOptionalTableInteractionContext } from './context/TableInteractionContext';\nimport { useTableBodyContext, useOptionalTableSection } from './context/TableStructureContext';\nimport { useOptionalTableRenderContext } from './context/TableRenderContext';\nimport { useOptionalTableRenderConfigContext } from './context/TableRenderConfigContext';\n\nexport type TableGroupRowProps = TableHtmlAttributes & {\n /**\n * Stable row key for selectable group rows.\n */\n id?: TableRowId;\n\n /**\n * The content of the full-width group row.\n */\n children?: ReactNode;\n\n /**\n * Keeps the group 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 * Optional class names only for this group row.\n */\n className?: string;\n\n /**\n * Includes this group row in table selection.\n *\n * Group rows are not selectable by default so existing grouped tables keep their current full-width layout.\n *\n * @default false\n */\n selectable?: boolean;\n\n /**\n * Disable table hover styling for this row.\n */\n noHover?: boolean;\n};\n\ntype TableGroupRowSelectionCellProps = {\n isSelected: boolean;\n onToggleSelection?: () => void;\n selectionCheckboxVerticalAlignment?: TableVerticalAlign;\n};\n\nconst TableGroupRowSelectionCell = (props: TableGroupRowSelectionCellProps) => {\n const { isSelected, onToggleSelection, selectionCheckboxVerticalAlignment } = props;\n\n return (\n <div\n className={classNames(\n 'table-cell table-selection-cell',\n getVerticalAlignClassName(selectionCheckboxVerticalAlignment)\n )}\n role='cell'\n aria-colindex={1}\n style={{ gridColumn: '1 / span 1', gridRow: '1 / span 1' }}\n onClick={event => event.stopPropagation()}\n onKeyDown={event => event.stopPropagation()}\n >\n <div className='table-selection-control'>\n <Checkbox checked={isSelected} onChange={onToggleSelection} />\n </div>\n </div>\n );\n};\n\nconst TableGroupRow = (props: TableGroupRowProps) => {\n const { children, className, id, noHover, selectable = false, sticky, ...remainingProps } = props;\n\n const renderConfigContext = useOptionalTableRenderConfigContext();\n const renderContext = useOptionalTableRenderContext();\n const interactionContext = useOptionalTableInteractionContext();\n const section = useOptionalTableSection();\n const bodyContext = useTableBodyContext();\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 rowIndex = bodyContext.nextRowIndex();\n const rowId = id ?? `group-${rowIndex}`;\n const isSelectable = selectable && interactionContext.selectableRowIdSet.has(rowId);\n const isSelected = isSelectable && interactionContext.selectedRowIdSet.has(rowId);\n const hasSelectionCell = interactionContext.showSelectionColumn && isSelectable;\n const columnCount =\n renderContext.columns.length + (interactionContext.showSelectionColumn && !hasSelectionCell ? 1 : 0);\n const stickyInBodyScrollContainer = !!renderContext.renderDraft.bodyMaxHeight;\n const selectionCell = hasSelectionCell && (\n <TableGroupRowSelectionCell\n isSelected={isSelected}\n onToggleSelection={() => interactionContext.onToggleRowSelection?.(rowId)}\n selectionCheckboxVerticalAlignment={renderConfigContext.selectionCheckboxVerticalAlignment}\n />\n );\n\n const rowNode = (\n <div\n {...remainingProps}\n className={classNames(\n 'table-row',\n 'table-row-group',\n hasSelectionCell && 'table-row-group-selectable',\n sticky && 'table-row-group-sticky',\n sticky && stickyInBodyScrollContainer && 'table-row-sticky-in-container',\n isSelected && 'table-row-selected',\n noHover && 'table-row-no-hover',\n className\n )}\n data-index={rowIndex}\n data-row-id={String(rowId)}\n role='row'\n >\n {selectionCell}\n <div className='table-cell table-group-cell' role='cell' aria-colspan={columnCount}>\n <div className='table-cell-content'>{children}</div>\n </div>\n </div>\n );\n\n renderContext.renderDraft.bodyRows.push({\n rowId,\n rowIndex,\n kind: 'group',\n selectable,\n render: () => rowNode,\n });\n\n return renderContext.isRegisteringBodyRows ? null : rowNode;\n};\n\nexport default TableGroupRow;\n"],"names":["TableGroupRowSelectionCell","props","isSelected","onToggleSelection","selectionCheckboxVerticalAlignment","jsx","classNames","getVerticalAlignClassName","event","Checkbox","TableGroupRow","children","className","id","noHover","selectable","sticky","remainingProps","renderConfigContext","useOptionalTableRenderConfigContext","renderContext","useOptionalTableRenderContext","interactionContext","useOptionalTableInteractionContext","section","useOptionalTableSection","bodyContext","useTableBodyContext","rowIndex","rowId","isSelectable","hasSelectionCell","columnCount","stickyInBodyScrollContainer","selectionCell","rowNode","jsxs"],"mappings":";;;;;;;;AAyDA,MAAMA,IAA6B,CAACC,MAA2C;AAC3E,QAAM,EAAE,YAAAC,GAAY,mBAAAC,GAAmB,oCAAAC,EAAA,IAAuCH;AAE9E,SACI,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWC;AAAA,QACP;AAAA,QACAC,EAA0BH,CAAkC;AAAA,MAAA;AAAA,MAEhE,MAAK;AAAA,MACL,iBAAe;AAAA,MACf,OAAO,EAAE,YAAY,cAAc,SAAS,aAAA;AAAA,MAC5C,SAAS,CAAAI,MAASA,EAAM,gBAAA;AAAA,MACxB,WAAW,CAAAA,MAASA,EAAM,gBAAA;AAAA,MAE1B,UAAA,gBAAAH,EAAC,OAAA,EAAI,WAAU,2BACX,UAAA,gBAAAA,EAACI,KAAS,SAASP,GAAY,UAAUC,EAAA,CAAmB,EAAA,CAChE;AAAA,IAAA;AAAA,EAAA;AAGZ,GAEMO,IAAgB,CAACT,MAA8B;AACjD,QAAM,EAAE,UAAAU,GAAU,WAAAC,GAAW,IAAAC,GAAI,SAAAC,GAAS,YAAAC,IAAa,IAAO,QAAAC,GAAQ,GAAGC,EAAA,IAAmBhB,GAEtFiB,IAAsBC,EAAA,GACtBC,IAAgBC,EAAA,GAChBC,IAAqBC,EAAA,GACrBC,IAAUC,EAAA,GACVC,IAAcC,EAAA;AAEpB,MACI,CAACP,KACD,CAACF,KACD,CAACI,KACDF,EAAc,QAAQ,WAAW,KACjCI,MAAY,UACZ,CAACE;AAED,WAAO;AAGX,QAAME,IAAWF,EAAY,aAAA,GACvBG,IAAQhB,KAAM,SAASe,CAAQ,IAC/BE,IAAef,KAAcO,EAAmB,mBAAmB,IAAIO,CAAK,GAC5E3B,IAAa4B,KAAgBR,EAAmB,iBAAiB,IAAIO,CAAK,GAC1EE,IAAmBT,EAAmB,uBAAuBQ,GAC7DE,IACFZ,EAAc,QAAQ,UAAUE,EAAmB,uBAAuB,CAACS,IAAmB,IAAI,IAChGE,IAA8B,CAAC,CAACb,EAAc,YAAY,eAC1Dc,IAAgBH,KAClB,gBAAA1B;AAAA,IAACL;AAAA,IAAA;AAAA,MACG,YAAAE;AAAA,MACA,mBAAmB,MAAMoB,EAAmB,uBAAuBO,CAAK;AAAA,MACxE,oCAAoCX,EAAoB;AAAA,IAAA;AAAA,EAAA,GAI1DiB,IACF,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGnB;AAAA,MACJ,WAAWX;AAAA,QACP;AAAA,QACA;AAAA,QACAyB,KAAoB;AAAA,QACpBf,KAAU;AAAA,QACVA,KAAUiB,KAA+B;AAAA,QACzC/B,KAAc;AAAA,QACdY,KAAW;AAAA,QACXF;AAAA,MAAA;AAAA,MAEJ,cAAYgB;AAAA,MACZ,eAAa,OAAOC,CAAK;AAAA,MACzB,MAAK;AAAA,MAEJ,UAAA;AAAA,QAAAK;AAAA,QACD,gBAAA7B,EAAC,OAAA,EAAI,WAAU,+BAA8B,MAAK,QAAO,gBAAc2B,GACnE,UAAA,gBAAA3B,EAAC,OAAA,EAAI,WAAU,sBAAsB,UAAAM,GAAS,EAAA,CAClD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,SAAAS,EAAc,YAAY,SAAS,KAAK;AAAA,IACpC,OAAAS;AAAA,IACA,UAAAD;AAAA,IACA,MAAM;AAAA,IACN,YAAAb;AAAA,IACA,QAAQ,MAAMoB;AAAA,EAAA,CACjB,GAEMf,EAAc,wBAAwB,OAAOe;AACxD;"}
|