@kopexa/table 0.0.5 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chunk-DE7P7UPE.mjs +224 -0
- package/dist/{chunk-XZPIY5WV.mjs → chunk-Q2IBTYJF.mjs} +3 -1
- package/dist/index.js +86 -3
- package/dist/index.mjs +2 -2
- package/dist/namespace.d.mts +3 -3
- package/dist/namespace.d.ts +3 -3
- package/dist/namespace.js +87 -3
- package/dist/namespace.mjs +4 -2
- package/dist/table.d.mts +17 -1
- package/dist/table.d.ts +17 -1
- package/dist/table.js +87 -3
- package/dist/table.mjs +3 -1
- package/package.json +7 -4
- package/dist/chunk-TNTMVIA6.mjs +0 -141
|
@@ -0,0 +1,224 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __export = (target, all) => {
|
|
4
|
+
for (var name in all)
|
|
5
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
6
|
+
};
|
|
7
|
+
|
|
8
|
+
// src/table.tsx
|
|
9
|
+
import { Avatar } from "@kopexa/avatar";
|
|
10
|
+
import { Button } from "@kopexa/button";
|
|
11
|
+
import { ChevronRightIcon, PlusIcon } from "@kopexa/icons";
|
|
12
|
+
import { createContext, mergeRefs } from "@kopexa/react-utils";
|
|
13
|
+
import { callAllHandlers, cn, dataAttr } from "@kopexa/shared-utils";
|
|
14
|
+
import {
|
|
15
|
+
table
|
|
16
|
+
} from "@kopexa/theme";
|
|
17
|
+
import { useHover } from "@kopexa/use-hover";
|
|
18
|
+
import { useMemo, useRef } from "react";
|
|
19
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
20
|
+
var [Provider, useTableContext] = createContext(
|
|
21
|
+
{}
|
|
22
|
+
);
|
|
23
|
+
var TableRoot = (props) => {
|
|
24
|
+
const {
|
|
25
|
+
className,
|
|
26
|
+
children,
|
|
27
|
+
isSelectable,
|
|
28
|
+
onRowClick,
|
|
29
|
+
layout,
|
|
30
|
+
fullWidth,
|
|
31
|
+
overscroll,
|
|
32
|
+
variant,
|
|
33
|
+
bleed,
|
|
34
|
+
classNames,
|
|
35
|
+
...rest
|
|
36
|
+
} = props;
|
|
37
|
+
const styles = table({
|
|
38
|
+
isSelectable,
|
|
39
|
+
layout,
|
|
40
|
+
fullWidth,
|
|
41
|
+
variant,
|
|
42
|
+
overscroll,
|
|
43
|
+
bleed
|
|
44
|
+
});
|
|
45
|
+
return /* @__PURE__ */ jsx(Provider, { value: { styles, onRowClick }, children: /* @__PURE__ */ jsx("div", { className: styles.container({ className: classNames == null ? void 0 : classNames.container }), children: /* @__PURE__ */ jsx("div", { className: styles.wrapper({ className: classNames == null ? void 0 : classNames.wrapper }), children: /* @__PURE__ */ jsx(
|
|
46
|
+
"table",
|
|
47
|
+
{
|
|
48
|
+
className: styles.table({
|
|
49
|
+
className: cn(className, classNames == null ? void 0 : classNames.table)
|
|
50
|
+
}),
|
|
51
|
+
...rest,
|
|
52
|
+
children
|
|
53
|
+
}
|
|
54
|
+
) }) }) });
|
|
55
|
+
};
|
|
56
|
+
function TableHead(props) {
|
|
57
|
+
const { className, ...rest } = props;
|
|
58
|
+
const { styles } = useTableContext();
|
|
59
|
+
return /* @__PURE__ */ jsx(
|
|
60
|
+
"thead",
|
|
61
|
+
{
|
|
62
|
+
"data-slot": "table-head",
|
|
63
|
+
className: styles.thead({
|
|
64
|
+
className
|
|
65
|
+
}),
|
|
66
|
+
...rest
|
|
67
|
+
}
|
|
68
|
+
);
|
|
69
|
+
}
|
|
70
|
+
function TableBody(props) {
|
|
71
|
+
const { className, ...rest } = props;
|
|
72
|
+
const { styles } = useTableContext();
|
|
73
|
+
return /* @__PURE__ */ jsx(
|
|
74
|
+
"tbody",
|
|
75
|
+
{
|
|
76
|
+
"data-slot": "table-body",
|
|
77
|
+
className: styles.tbody({
|
|
78
|
+
className
|
|
79
|
+
}),
|
|
80
|
+
...rest
|
|
81
|
+
}
|
|
82
|
+
);
|
|
83
|
+
}
|
|
84
|
+
function TableRow(props) {
|
|
85
|
+
const {
|
|
86
|
+
className,
|
|
87
|
+
ref,
|
|
88
|
+
isSelected = false,
|
|
89
|
+
onClick,
|
|
90
|
+
hasSelect,
|
|
91
|
+
hasActions,
|
|
92
|
+
...rest
|
|
93
|
+
} = props;
|
|
94
|
+
const { styles, onRowClick } = useTableContext();
|
|
95
|
+
const innerRef = useRef(null);
|
|
96
|
+
const isHover = useHover(innerRef);
|
|
97
|
+
return /* @__PURE__ */ jsx(
|
|
98
|
+
"tr",
|
|
99
|
+
{
|
|
100
|
+
"data-slot": "table-row",
|
|
101
|
+
"data-hover": dataAttr(isHover),
|
|
102
|
+
"aria-selected": isSelected,
|
|
103
|
+
className: styles.tr({
|
|
104
|
+
className,
|
|
105
|
+
hasSelect,
|
|
106
|
+
hasActions
|
|
107
|
+
}),
|
|
108
|
+
ref: mergeRefs(innerRef, ref),
|
|
109
|
+
onClick: callAllHandlers(onRowClick, onClick),
|
|
110
|
+
...rest
|
|
111
|
+
}
|
|
112
|
+
);
|
|
113
|
+
}
|
|
114
|
+
function TableHeaderCell(props) {
|
|
115
|
+
const { className, isSelectCell, isActionCell, isStickyCell, ...rest } = props;
|
|
116
|
+
const { styles } = useTableContext();
|
|
117
|
+
return /* @__PURE__ */ jsx(
|
|
118
|
+
"th",
|
|
119
|
+
{
|
|
120
|
+
"data-slot": "table-header-cell",
|
|
121
|
+
className: styles.th({
|
|
122
|
+
className,
|
|
123
|
+
isSelectCell,
|
|
124
|
+
isActionCell,
|
|
125
|
+
isStickyCell
|
|
126
|
+
}),
|
|
127
|
+
...rest
|
|
128
|
+
}
|
|
129
|
+
);
|
|
130
|
+
}
|
|
131
|
+
function TableCell(props) {
|
|
132
|
+
const { className, isSelectCell, isActionCell, isStickyCell, ...rest } = props;
|
|
133
|
+
const { styles } = useTableContext();
|
|
134
|
+
return /* @__PURE__ */ jsx(
|
|
135
|
+
"td",
|
|
136
|
+
{
|
|
137
|
+
"data-slot": "table-cell",
|
|
138
|
+
className: styles.td({
|
|
139
|
+
className,
|
|
140
|
+
isSelectCell,
|
|
141
|
+
isActionCell,
|
|
142
|
+
isStickyCell
|
|
143
|
+
}),
|
|
144
|
+
...rest
|
|
145
|
+
}
|
|
146
|
+
);
|
|
147
|
+
}
|
|
148
|
+
var defaultOwnerTranslations = {
|
|
149
|
+
unassigned: "Unassigned",
|
|
150
|
+
assignNow: "Assign now"
|
|
151
|
+
};
|
|
152
|
+
function TableOwnerCellValue({
|
|
153
|
+
className,
|
|
154
|
+
owner,
|
|
155
|
+
description,
|
|
156
|
+
onClick,
|
|
157
|
+
translations,
|
|
158
|
+
...rest
|
|
159
|
+
}) {
|
|
160
|
+
const { styles } = useTableContext();
|
|
161
|
+
const ownerName = useMemo(() => {
|
|
162
|
+
if (owner == null ? void 0 : owner.name) {
|
|
163
|
+
return owner.name;
|
|
164
|
+
}
|
|
165
|
+
if ((owner == null ? void 0 : owner.firstName) && (owner == null ? void 0 : owner.lastName)) {
|
|
166
|
+
return `${owner.firstName} ${owner.lastName}`;
|
|
167
|
+
}
|
|
168
|
+
return "";
|
|
169
|
+
}, [owner]);
|
|
170
|
+
const i18n = useMemo(() => {
|
|
171
|
+
return {
|
|
172
|
+
...defaultOwnerTranslations,
|
|
173
|
+
...translations
|
|
174
|
+
};
|
|
175
|
+
}, [translations]);
|
|
176
|
+
const hasOwner = useMemo(() => {
|
|
177
|
+
return !!owner;
|
|
178
|
+
}, [owner]);
|
|
179
|
+
return /* @__PURE__ */ jsx(
|
|
180
|
+
"div",
|
|
181
|
+
{
|
|
182
|
+
"data-slot": "table-owner-cell",
|
|
183
|
+
className: styles.ownerCell({ className }),
|
|
184
|
+
...rest,
|
|
185
|
+
children: hasOwner ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
186
|
+
/* @__PURE__ */ jsx(
|
|
187
|
+
Avatar,
|
|
188
|
+
{
|
|
189
|
+
src: owner == null ? void 0 : owner.avatar,
|
|
190
|
+
alt: owner == null ? void 0 : owner.name,
|
|
191
|
+
name: ownerName,
|
|
192
|
+
size: "sm",
|
|
193
|
+
className: styles.ownerCellAvatar()
|
|
194
|
+
}
|
|
195
|
+
),
|
|
196
|
+
/* @__PURE__ */ jsxs("div", { className: styles.ownerCelltextWrapper(), children: [
|
|
197
|
+
/* @__PURE__ */ jsx("span", { className: styles.ownerCellName(), children: ownerName }),
|
|
198
|
+
/* @__PURE__ */ jsx("span", { className: styles.ownerCellDescription(), children: description != null ? description : owner == null ? void 0 : owner.email })
|
|
199
|
+
] })
|
|
200
|
+
] }) : onClick ? /* @__PURE__ */ jsx(
|
|
201
|
+
Button,
|
|
202
|
+
{
|
|
203
|
+
onClick,
|
|
204
|
+
variant: "ghost",
|
|
205
|
+
size: "sm",
|
|
206
|
+
startContent: /* @__PURE__ */ jsx(PlusIcon, {}),
|
|
207
|
+
endContent: /* @__PURE__ */ jsx(ChevronRightIcon, {}),
|
|
208
|
+
children: i18n.assignNow
|
|
209
|
+
}
|
|
210
|
+
) : /* @__PURE__ */ jsx("span", { className: styles.ownerCellUnassigned(), children: i18n.unassigned })
|
|
211
|
+
}
|
|
212
|
+
);
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
export {
|
|
216
|
+
__export,
|
|
217
|
+
TableRoot,
|
|
218
|
+
TableHead,
|
|
219
|
+
TableBody,
|
|
220
|
+
TableRow,
|
|
221
|
+
TableHeaderCell,
|
|
222
|
+
TableCell,
|
|
223
|
+
TableOwnerCellValue
|
|
224
|
+
};
|
|
@@ -4,10 +4,11 @@ import {
|
|
|
4
4
|
TableCell,
|
|
5
5
|
TableHead,
|
|
6
6
|
TableHeaderCell,
|
|
7
|
+
TableOwnerCellValue,
|
|
7
8
|
TableRoot,
|
|
8
9
|
TableRow,
|
|
9
10
|
__export
|
|
10
|
-
} from "./chunk-
|
|
11
|
+
} from "./chunk-DE7P7UPE.mjs";
|
|
11
12
|
|
|
12
13
|
// src/namespace.ts
|
|
13
14
|
var namespace_exports = {};
|
|
@@ -16,6 +17,7 @@ __export(namespace_exports, {
|
|
|
16
17
|
Cell: () => TableCell,
|
|
17
18
|
Head: () => TableHead,
|
|
18
19
|
HeaderCell: () => TableHeaderCell,
|
|
20
|
+
OwnerCellValue: () => TableOwnerCellValue,
|
|
19
21
|
Root: () => TableRoot,
|
|
20
22
|
Row: () => TableRow
|
|
21
23
|
});
|
package/dist/index.js
CHANGED
|
@@ -32,11 +32,15 @@ __export(namespace_exports, {
|
|
|
32
32
|
Cell: () => TableCell,
|
|
33
33
|
Head: () => TableHead,
|
|
34
34
|
HeaderCell: () => TableHeaderCell,
|
|
35
|
+
OwnerCellValue: () => TableOwnerCellValue,
|
|
35
36
|
Root: () => TableRoot,
|
|
36
37
|
Row: () => TableRow
|
|
37
38
|
});
|
|
38
39
|
|
|
39
40
|
// src/table.tsx
|
|
41
|
+
var import_avatar = require("@kopexa/avatar");
|
|
42
|
+
var import_button = require("@kopexa/button");
|
|
43
|
+
var import_icons = require("@kopexa/icons");
|
|
40
44
|
var import_react_utils = require("@kopexa/react-utils");
|
|
41
45
|
var import_shared_utils = require("@kopexa/shared-utils");
|
|
42
46
|
var import_theme = require("@kopexa/theme");
|
|
@@ -55,16 +59,29 @@ var TableRoot = (props) => {
|
|
|
55
59
|
layout,
|
|
56
60
|
fullWidth,
|
|
57
61
|
overscroll,
|
|
62
|
+
variant,
|
|
63
|
+
bleed,
|
|
64
|
+
classNames,
|
|
58
65
|
...rest
|
|
59
66
|
} = props;
|
|
60
67
|
const styles = (0, import_theme.table)({
|
|
61
|
-
className,
|
|
62
68
|
isSelectable,
|
|
63
69
|
layout,
|
|
64
70
|
fullWidth,
|
|
65
|
-
|
|
71
|
+
variant,
|
|
72
|
+
overscroll,
|
|
73
|
+
bleed
|
|
66
74
|
});
|
|
67
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider, { value: { styles, onRowClick }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("
|
|
75
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider, { value: { styles, onRowClick }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.container({ className: classNames == null ? void 0 : classNames.container }), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.wrapper({ className: classNames == null ? void 0 : classNames.wrapper }), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
76
|
+
"table",
|
|
77
|
+
{
|
|
78
|
+
className: styles.table({
|
|
79
|
+
className: (0, import_shared_utils.cn)(className, classNames == null ? void 0 : classNames.table)
|
|
80
|
+
}),
|
|
81
|
+
...rest,
|
|
82
|
+
children
|
|
83
|
+
}
|
|
84
|
+
) }) }) });
|
|
68
85
|
};
|
|
69
86
|
function TableHead(props) {
|
|
70
87
|
const { className, ...rest } = props;
|
|
@@ -158,6 +175,72 @@ function TableCell(props) {
|
|
|
158
175
|
}
|
|
159
176
|
);
|
|
160
177
|
}
|
|
178
|
+
var defaultOwnerTranslations = {
|
|
179
|
+
unassigned: "Unassigned",
|
|
180
|
+
assignNow: "Assign now"
|
|
181
|
+
};
|
|
182
|
+
function TableOwnerCellValue({
|
|
183
|
+
className,
|
|
184
|
+
owner,
|
|
185
|
+
description,
|
|
186
|
+
onClick,
|
|
187
|
+
translations,
|
|
188
|
+
...rest
|
|
189
|
+
}) {
|
|
190
|
+
const { styles } = useTableContext();
|
|
191
|
+
const ownerName = (0, import_react.useMemo)(() => {
|
|
192
|
+
if (owner == null ? void 0 : owner.name) {
|
|
193
|
+
return owner.name;
|
|
194
|
+
}
|
|
195
|
+
if ((owner == null ? void 0 : owner.firstName) && (owner == null ? void 0 : owner.lastName)) {
|
|
196
|
+
return `${owner.firstName} ${owner.lastName}`;
|
|
197
|
+
}
|
|
198
|
+
return "";
|
|
199
|
+
}, [owner]);
|
|
200
|
+
const i18n = (0, import_react.useMemo)(() => {
|
|
201
|
+
return {
|
|
202
|
+
...defaultOwnerTranslations,
|
|
203
|
+
...translations
|
|
204
|
+
};
|
|
205
|
+
}, [translations]);
|
|
206
|
+
const hasOwner = (0, import_react.useMemo)(() => {
|
|
207
|
+
return !!owner;
|
|
208
|
+
}, [owner]);
|
|
209
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
210
|
+
"div",
|
|
211
|
+
{
|
|
212
|
+
"data-slot": "table-owner-cell",
|
|
213
|
+
className: styles.ownerCell({ className }),
|
|
214
|
+
...rest,
|
|
215
|
+
children: hasOwner ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
216
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
217
|
+
import_avatar.Avatar,
|
|
218
|
+
{
|
|
219
|
+
src: owner == null ? void 0 : owner.avatar,
|
|
220
|
+
alt: owner == null ? void 0 : owner.name,
|
|
221
|
+
name: ownerName,
|
|
222
|
+
size: "sm",
|
|
223
|
+
className: styles.ownerCellAvatar()
|
|
224
|
+
}
|
|
225
|
+
),
|
|
226
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.ownerCelltextWrapper(), children: [
|
|
227
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles.ownerCellName(), children: ownerName }),
|
|
228
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles.ownerCellDescription(), children: description != null ? description : owner == null ? void 0 : owner.email })
|
|
229
|
+
] })
|
|
230
|
+
] }) : onClick ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
231
|
+
import_button.Button,
|
|
232
|
+
{
|
|
233
|
+
onClick,
|
|
234
|
+
variant: "ghost",
|
|
235
|
+
size: "sm",
|
|
236
|
+
startContent: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.PlusIcon, {}),
|
|
237
|
+
endContent: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ChevronRightIcon, {}),
|
|
238
|
+
children: i18n.assignNow
|
|
239
|
+
}
|
|
240
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles.ownerCellUnassigned(), children: i18n.unassigned })
|
|
241
|
+
}
|
|
242
|
+
);
|
|
243
|
+
}
|
|
161
244
|
// Annotate the CommonJS export names for ESM import in node:
|
|
162
245
|
0 && (module.exports = {
|
|
163
246
|
Table
|
package/dist/index.mjs
CHANGED
package/dist/namespace.d.mts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { TableBody, TableBodyProps, TableCell, TableCellProps, TableHead, TableHeadProps, TableHeaderCell, TableHeaderCellProps, TableRoot, TableRootProps, TableRow, TableRowProps } from './table.mjs';
|
|
1
|
+
import { TableBody, TableBodyProps, TableCell, TableCellProps, TableHead, TableHeadProps, TableHeaderCell, TableHeaderCellProps, TableOwnerCellValue, TableOwnerCellValueProps, TableRoot, TableRootProps, TableRow, TableRowProps } from './table.mjs';
|
|
2
2
|
import 'react/jsx-runtime';
|
|
3
3
|
import '@kopexa/theme';
|
|
4
4
|
import 'react';
|
|
5
5
|
|
|
6
6
|
declare namespace namespace {
|
|
7
|
-
export { TableBody as Body, TableBodyProps as BodyProps, TableCell as Cell, TableCellProps as CellProps, TableHead as Head, TableHeadProps as HeadProps, TableHeaderCell as HeaderCell, TableHeaderCellProps as HeaderCellProps, TableRoot as Root, TableRootProps as RootProps, TableRow as Row, TableRowProps as RowProps };
|
|
7
|
+
export { TableBody as Body, TableBodyProps as BodyProps, TableCell as Cell, TableCellProps as CellProps, TableHead as Head, TableHeadProps as HeadProps, TableHeaderCell as HeaderCell, TableHeaderCellProps as HeaderCellProps, TableOwnerCellValue as OwnerCellValue, TableOwnerCellValueProps as OwnerCellValueProps, TableRoot as Root, TableRootProps as RootProps, TableRow as Row, TableRowProps as RowProps };
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
-
export { TableBody as Body, TableBodyProps as BodyProps, TableCell as Cell, TableCellProps as CellProps, TableHead as Head, TableHeadProps as HeadProps, TableHeaderCell as HeaderCell, TableHeaderCellProps as HeaderCellProps, TableRoot as Root, TableRootProps as RootProps, TableRow as Row, TableRowProps as RowProps, namespace as n };
|
|
10
|
+
export { TableBody as Body, TableBodyProps as BodyProps, TableCell as Cell, TableCellProps as CellProps, TableHead as Head, TableHeadProps as HeadProps, TableHeaderCell as HeaderCell, TableHeaderCellProps as HeaderCellProps, TableOwnerCellValue as OwnerCellValue, TableOwnerCellValueProps as OwnerCellValueProps, TableRoot as Root, TableRootProps as RootProps, TableRow as Row, TableRowProps as RowProps, namespace as n };
|
package/dist/namespace.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { TableBody, TableBodyProps, TableCell, TableCellProps, TableHead, TableHeadProps, TableHeaderCell, TableHeaderCellProps, TableRoot, TableRootProps, TableRow, TableRowProps } from './table.js';
|
|
1
|
+
import { TableBody, TableBodyProps, TableCell, TableCellProps, TableHead, TableHeadProps, TableHeaderCell, TableHeaderCellProps, TableOwnerCellValue, TableOwnerCellValueProps, TableRoot, TableRootProps, TableRow, TableRowProps } from './table.js';
|
|
2
2
|
import 'react/jsx-runtime';
|
|
3
3
|
import '@kopexa/theme';
|
|
4
4
|
import 'react';
|
|
5
5
|
|
|
6
6
|
declare namespace namespace {
|
|
7
|
-
export { TableBody as Body, TableBodyProps as BodyProps, TableCell as Cell, TableCellProps as CellProps, TableHead as Head, TableHeadProps as HeadProps, TableHeaderCell as HeaderCell, TableHeaderCellProps as HeaderCellProps, TableRoot as Root, TableRootProps as RootProps, TableRow as Row, TableRowProps as RowProps };
|
|
7
|
+
export { TableBody as Body, TableBodyProps as BodyProps, TableCell as Cell, TableCellProps as CellProps, TableHead as Head, TableHeadProps as HeadProps, TableHeaderCell as HeaderCell, TableHeaderCellProps as HeaderCellProps, TableOwnerCellValue as OwnerCellValue, TableOwnerCellValueProps as OwnerCellValueProps, TableRoot as Root, TableRootProps as RootProps, TableRow as Row, TableRowProps as RowProps };
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
-
export { TableBody as Body, TableBodyProps as BodyProps, TableCell as Cell, TableCellProps as CellProps, TableHead as Head, TableHeadProps as HeadProps, TableHeaderCell as HeaderCell, TableHeaderCellProps as HeaderCellProps, TableRoot as Root, TableRootProps as RootProps, TableRow as Row, TableRowProps as RowProps, namespace as n };
|
|
10
|
+
export { TableBody as Body, TableBodyProps as BodyProps, TableCell as Cell, TableCellProps as CellProps, TableHead as Head, TableHeadProps as HeadProps, TableHeaderCell as HeaderCell, TableHeaderCellProps as HeaderCellProps, TableOwnerCellValue as OwnerCellValue, TableOwnerCellValueProps as OwnerCellValueProps, TableRoot as Root, TableRootProps as RootProps, TableRow as Row, TableRowProps as RowProps, namespace as n };
|
package/dist/namespace.js
CHANGED
|
@@ -25,12 +25,16 @@ __export(namespace_exports, {
|
|
|
25
25
|
Cell: () => TableCell,
|
|
26
26
|
Head: () => TableHead,
|
|
27
27
|
HeaderCell: () => TableHeaderCell,
|
|
28
|
+
OwnerCellValue: () => TableOwnerCellValue,
|
|
28
29
|
Root: () => TableRoot,
|
|
29
30
|
Row: () => TableRow
|
|
30
31
|
});
|
|
31
32
|
module.exports = __toCommonJS(namespace_exports);
|
|
32
33
|
|
|
33
34
|
// src/table.tsx
|
|
35
|
+
var import_avatar = require("@kopexa/avatar");
|
|
36
|
+
var import_button = require("@kopexa/button");
|
|
37
|
+
var import_icons = require("@kopexa/icons");
|
|
34
38
|
var import_react_utils = require("@kopexa/react-utils");
|
|
35
39
|
var import_shared_utils = require("@kopexa/shared-utils");
|
|
36
40
|
var import_theme = require("@kopexa/theme");
|
|
@@ -49,16 +53,29 @@ var TableRoot = (props) => {
|
|
|
49
53
|
layout,
|
|
50
54
|
fullWidth,
|
|
51
55
|
overscroll,
|
|
56
|
+
variant,
|
|
57
|
+
bleed,
|
|
58
|
+
classNames,
|
|
52
59
|
...rest
|
|
53
60
|
} = props;
|
|
54
61
|
const styles = (0, import_theme.table)({
|
|
55
|
-
className,
|
|
56
62
|
isSelectable,
|
|
57
63
|
layout,
|
|
58
64
|
fullWidth,
|
|
59
|
-
|
|
65
|
+
variant,
|
|
66
|
+
overscroll,
|
|
67
|
+
bleed
|
|
60
68
|
});
|
|
61
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider, { value: { styles, onRowClick }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("
|
|
69
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider, { value: { styles, onRowClick }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.container({ className: classNames == null ? void 0 : classNames.container }), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.wrapper({ className: classNames == null ? void 0 : classNames.wrapper }), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
70
|
+
"table",
|
|
71
|
+
{
|
|
72
|
+
className: styles.table({
|
|
73
|
+
className: (0, import_shared_utils.cn)(className, classNames == null ? void 0 : classNames.table)
|
|
74
|
+
}),
|
|
75
|
+
...rest,
|
|
76
|
+
children
|
|
77
|
+
}
|
|
78
|
+
) }) }) });
|
|
62
79
|
};
|
|
63
80
|
function TableHead(props) {
|
|
64
81
|
const { className, ...rest } = props;
|
|
@@ -152,12 +169,79 @@ function TableCell(props) {
|
|
|
152
169
|
}
|
|
153
170
|
);
|
|
154
171
|
}
|
|
172
|
+
var defaultOwnerTranslations = {
|
|
173
|
+
unassigned: "Unassigned",
|
|
174
|
+
assignNow: "Assign now"
|
|
175
|
+
};
|
|
176
|
+
function TableOwnerCellValue({
|
|
177
|
+
className,
|
|
178
|
+
owner,
|
|
179
|
+
description,
|
|
180
|
+
onClick,
|
|
181
|
+
translations,
|
|
182
|
+
...rest
|
|
183
|
+
}) {
|
|
184
|
+
const { styles } = useTableContext();
|
|
185
|
+
const ownerName = (0, import_react.useMemo)(() => {
|
|
186
|
+
if (owner == null ? void 0 : owner.name) {
|
|
187
|
+
return owner.name;
|
|
188
|
+
}
|
|
189
|
+
if ((owner == null ? void 0 : owner.firstName) && (owner == null ? void 0 : owner.lastName)) {
|
|
190
|
+
return `${owner.firstName} ${owner.lastName}`;
|
|
191
|
+
}
|
|
192
|
+
return "";
|
|
193
|
+
}, [owner]);
|
|
194
|
+
const i18n = (0, import_react.useMemo)(() => {
|
|
195
|
+
return {
|
|
196
|
+
...defaultOwnerTranslations,
|
|
197
|
+
...translations
|
|
198
|
+
};
|
|
199
|
+
}, [translations]);
|
|
200
|
+
const hasOwner = (0, import_react.useMemo)(() => {
|
|
201
|
+
return !!owner;
|
|
202
|
+
}, [owner]);
|
|
203
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
204
|
+
"div",
|
|
205
|
+
{
|
|
206
|
+
"data-slot": "table-owner-cell",
|
|
207
|
+
className: styles.ownerCell({ className }),
|
|
208
|
+
...rest,
|
|
209
|
+
children: hasOwner ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
210
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
211
|
+
import_avatar.Avatar,
|
|
212
|
+
{
|
|
213
|
+
src: owner == null ? void 0 : owner.avatar,
|
|
214
|
+
alt: owner == null ? void 0 : owner.name,
|
|
215
|
+
name: ownerName,
|
|
216
|
+
size: "sm",
|
|
217
|
+
className: styles.ownerCellAvatar()
|
|
218
|
+
}
|
|
219
|
+
),
|
|
220
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.ownerCelltextWrapper(), children: [
|
|
221
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles.ownerCellName(), children: ownerName }),
|
|
222
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles.ownerCellDescription(), children: description != null ? description : owner == null ? void 0 : owner.email })
|
|
223
|
+
] })
|
|
224
|
+
] }) : onClick ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
225
|
+
import_button.Button,
|
|
226
|
+
{
|
|
227
|
+
onClick,
|
|
228
|
+
variant: "ghost",
|
|
229
|
+
size: "sm",
|
|
230
|
+
startContent: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.PlusIcon, {}),
|
|
231
|
+
endContent: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ChevronRightIcon, {}),
|
|
232
|
+
children: i18n.assignNow
|
|
233
|
+
}
|
|
234
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles.ownerCellUnassigned(), children: i18n.unassigned })
|
|
235
|
+
}
|
|
236
|
+
);
|
|
237
|
+
}
|
|
155
238
|
// Annotate the CommonJS export names for ESM import in node:
|
|
156
239
|
0 && (module.exports = {
|
|
157
240
|
Body,
|
|
158
241
|
Cell,
|
|
159
242
|
Head,
|
|
160
243
|
HeaderCell,
|
|
244
|
+
OwnerCellValue,
|
|
161
245
|
Root,
|
|
162
246
|
Row
|
|
163
247
|
});
|
package/dist/namespace.mjs
CHANGED
|
@@ -1,18 +1,20 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import "./chunk-
|
|
2
|
+
import "./chunk-Q2IBTYJF.mjs";
|
|
3
3
|
import {
|
|
4
4
|
TableBody,
|
|
5
5
|
TableCell,
|
|
6
6
|
TableHead,
|
|
7
7
|
TableHeaderCell,
|
|
8
|
+
TableOwnerCellValue,
|
|
8
9
|
TableRoot,
|
|
9
10
|
TableRow
|
|
10
|
-
} from "./chunk-
|
|
11
|
+
} from "./chunk-DE7P7UPE.mjs";
|
|
11
12
|
export {
|
|
12
13
|
TableBody as Body,
|
|
13
14
|
TableCell as Cell,
|
|
14
15
|
TableHead as Head,
|
|
15
16
|
TableHeaderCell as HeaderCell,
|
|
17
|
+
TableOwnerCellValue as OwnerCellValue,
|
|
16
18
|
TableRoot as Root,
|
|
17
19
|
TableRow as Row
|
|
18
20
|
};
|
package/dist/table.d.mts
CHANGED
|
@@ -39,5 +39,21 @@ type TableCellProps = ComponentProps<"td"> & {
|
|
|
39
39
|
isStickyCell?: boolean;
|
|
40
40
|
};
|
|
41
41
|
declare function TableCell(props: TableCellProps): react_jsx_runtime.JSX.Element;
|
|
42
|
+
type TableOwnerCellValueProps = Omit<ComponentProps<"div">, "children" | "onClick"> & {
|
|
43
|
+
owner?: {
|
|
44
|
+
firstName?: string;
|
|
45
|
+
lastName?: string;
|
|
46
|
+
name?: string;
|
|
47
|
+
email?: string;
|
|
48
|
+
avatar?: string;
|
|
49
|
+
} | null;
|
|
50
|
+
description?: string;
|
|
51
|
+
translations?: {
|
|
52
|
+
unassigned?: string;
|
|
53
|
+
assignNow?: string;
|
|
54
|
+
};
|
|
55
|
+
onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
56
|
+
};
|
|
57
|
+
declare function TableOwnerCellValue({ className, owner, description, onClick, translations, ...rest }: TableOwnerCellValueProps): react_jsx_runtime.JSX.Element;
|
|
42
58
|
|
|
43
|
-
export { TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeaderCell, type TableHeaderCellProps, TableRoot, type TableRootProps, TableRow, type TableRowProps };
|
|
59
|
+
export { TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeaderCell, type TableHeaderCellProps, TableOwnerCellValue, type TableOwnerCellValueProps, TableRoot, type TableRootProps, TableRow, type TableRowProps };
|
package/dist/table.d.ts
CHANGED
|
@@ -39,5 +39,21 @@ type TableCellProps = ComponentProps<"td"> & {
|
|
|
39
39
|
isStickyCell?: boolean;
|
|
40
40
|
};
|
|
41
41
|
declare function TableCell(props: TableCellProps): react_jsx_runtime.JSX.Element;
|
|
42
|
+
type TableOwnerCellValueProps = Omit<ComponentProps<"div">, "children" | "onClick"> & {
|
|
43
|
+
owner?: {
|
|
44
|
+
firstName?: string;
|
|
45
|
+
lastName?: string;
|
|
46
|
+
name?: string;
|
|
47
|
+
email?: string;
|
|
48
|
+
avatar?: string;
|
|
49
|
+
} | null;
|
|
50
|
+
description?: string;
|
|
51
|
+
translations?: {
|
|
52
|
+
unassigned?: string;
|
|
53
|
+
assignNow?: string;
|
|
54
|
+
};
|
|
55
|
+
onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
56
|
+
};
|
|
57
|
+
declare function TableOwnerCellValue({ className, owner, description, onClick, translations, ...rest }: TableOwnerCellValueProps): react_jsx_runtime.JSX.Element;
|
|
42
58
|
|
|
43
|
-
export { TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeaderCell, type TableHeaderCellProps, TableRoot, type TableRootProps, TableRow, type TableRowProps };
|
|
59
|
+
export { TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeaderCell, type TableHeaderCellProps, TableOwnerCellValue, type TableOwnerCellValueProps, TableRoot, type TableRootProps, TableRow, type TableRowProps };
|
package/dist/table.js
CHANGED
|
@@ -25,10 +25,14 @@ __export(table_exports, {
|
|
|
25
25
|
TableCell: () => TableCell,
|
|
26
26
|
TableHead: () => TableHead,
|
|
27
27
|
TableHeaderCell: () => TableHeaderCell,
|
|
28
|
+
TableOwnerCellValue: () => TableOwnerCellValue,
|
|
28
29
|
TableRoot: () => TableRoot,
|
|
29
30
|
TableRow: () => TableRow
|
|
30
31
|
});
|
|
31
32
|
module.exports = __toCommonJS(table_exports);
|
|
33
|
+
var import_avatar = require("@kopexa/avatar");
|
|
34
|
+
var import_button = require("@kopexa/button");
|
|
35
|
+
var import_icons = require("@kopexa/icons");
|
|
32
36
|
var import_react_utils = require("@kopexa/react-utils");
|
|
33
37
|
var import_shared_utils = require("@kopexa/shared-utils");
|
|
34
38
|
var import_theme = require("@kopexa/theme");
|
|
@@ -47,16 +51,29 @@ var TableRoot = (props) => {
|
|
|
47
51
|
layout,
|
|
48
52
|
fullWidth,
|
|
49
53
|
overscroll,
|
|
54
|
+
variant,
|
|
55
|
+
bleed,
|
|
56
|
+
classNames,
|
|
50
57
|
...rest
|
|
51
58
|
} = props;
|
|
52
59
|
const styles = (0, import_theme.table)({
|
|
53
|
-
className,
|
|
54
60
|
isSelectable,
|
|
55
61
|
layout,
|
|
56
62
|
fullWidth,
|
|
57
|
-
|
|
63
|
+
variant,
|
|
64
|
+
overscroll,
|
|
65
|
+
bleed
|
|
58
66
|
});
|
|
59
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider, { value: { styles, onRowClick }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("
|
|
67
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider, { value: { styles, onRowClick }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.container({ className: classNames == null ? void 0 : classNames.container }), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.wrapper({ className: classNames == null ? void 0 : classNames.wrapper }), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
68
|
+
"table",
|
|
69
|
+
{
|
|
70
|
+
className: styles.table({
|
|
71
|
+
className: (0, import_shared_utils.cn)(className, classNames == null ? void 0 : classNames.table)
|
|
72
|
+
}),
|
|
73
|
+
...rest,
|
|
74
|
+
children
|
|
75
|
+
}
|
|
76
|
+
) }) }) });
|
|
60
77
|
};
|
|
61
78
|
function TableHead(props) {
|
|
62
79
|
const { className, ...rest } = props;
|
|
@@ -150,12 +167,79 @@ function TableCell(props) {
|
|
|
150
167
|
}
|
|
151
168
|
);
|
|
152
169
|
}
|
|
170
|
+
var defaultOwnerTranslations = {
|
|
171
|
+
unassigned: "Unassigned",
|
|
172
|
+
assignNow: "Assign now"
|
|
173
|
+
};
|
|
174
|
+
function TableOwnerCellValue({
|
|
175
|
+
className,
|
|
176
|
+
owner,
|
|
177
|
+
description,
|
|
178
|
+
onClick,
|
|
179
|
+
translations,
|
|
180
|
+
...rest
|
|
181
|
+
}) {
|
|
182
|
+
const { styles } = useTableContext();
|
|
183
|
+
const ownerName = (0, import_react.useMemo)(() => {
|
|
184
|
+
if (owner == null ? void 0 : owner.name) {
|
|
185
|
+
return owner.name;
|
|
186
|
+
}
|
|
187
|
+
if ((owner == null ? void 0 : owner.firstName) && (owner == null ? void 0 : owner.lastName)) {
|
|
188
|
+
return `${owner.firstName} ${owner.lastName}`;
|
|
189
|
+
}
|
|
190
|
+
return "";
|
|
191
|
+
}, [owner]);
|
|
192
|
+
const i18n = (0, import_react.useMemo)(() => {
|
|
193
|
+
return {
|
|
194
|
+
...defaultOwnerTranslations,
|
|
195
|
+
...translations
|
|
196
|
+
};
|
|
197
|
+
}, [translations]);
|
|
198
|
+
const hasOwner = (0, import_react.useMemo)(() => {
|
|
199
|
+
return !!owner;
|
|
200
|
+
}, [owner]);
|
|
201
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
202
|
+
"div",
|
|
203
|
+
{
|
|
204
|
+
"data-slot": "table-owner-cell",
|
|
205
|
+
className: styles.ownerCell({ className }),
|
|
206
|
+
...rest,
|
|
207
|
+
children: hasOwner ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
208
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
209
|
+
import_avatar.Avatar,
|
|
210
|
+
{
|
|
211
|
+
src: owner == null ? void 0 : owner.avatar,
|
|
212
|
+
alt: owner == null ? void 0 : owner.name,
|
|
213
|
+
name: ownerName,
|
|
214
|
+
size: "sm",
|
|
215
|
+
className: styles.ownerCellAvatar()
|
|
216
|
+
}
|
|
217
|
+
),
|
|
218
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.ownerCelltextWrapper(), children: [
|
|
219
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles.ownerCellName(), children: ownerName }),
|
|
220
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles.ownerCellDescription(), children: description != null ? description : owner == null ? void 0 : owner.email })
|
|
221
|
+
] })
|
|
222
|
+
] }) : onClick ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
223
|
+
import_button.Button,
|
|
224
|
+
{
|
|
225
|
+
onClick,
|
|
226
|
+
variant: "ghost",
|
|
227
|
+
size: "sm",
|
|
228
|
+
startContent: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.PlusIcon, {}),
|
|
229
|
+
endContent: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ChevronRightIcon, {}),
|
|
230
|
+
children: i18n.assignNow
|
|
231
|
+
}
|
|
232
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles.ownerCellUnassigned(), children: i18n.unassigned })
|
|
233
|
+
}
|
|
234
|
+
);
|
|
235
|
+
}
|
|
153
236
|
// Annotate the CommonJS export names for ESM import in node:
|
|
154
237
|
0 && (module.exports = {
|
|
155
238
|
TableBody,
|
|
156
239
|
TableCell,
|
|
157
240
|
TableHead,
|
|
158
241
|
TableHeaderCell,
|
|
242
|
+
TableOwnerCellValue,
|
|
159
243
|
TableRoot,
|
|
160
244
|
TableRow
|
|
161
245
|
});
|
package/dist/table.mjs
CHANGED
|
@@ -4,14 +4,16 @@ import {
|
|
|
4
4
|
TableCell,
|
|
5
5
|
TableHead,
|
|
6
6
|
TableHeaderCell,
|
|
7
|
+
TableOwnerCellValue,
|
|
7
8
|
TableRoot,
|
|
8
9
|
TableRow
|
|
9
|
-
} from "./chunk-
|
|
10
|
+
} from "./chunk-DE7P7UPE.mjs";
|
|
10
11
|
export {
|
|
11
12
|
TableBody,
|
|
12
13
|
TableCell,
|
|
13
14
|
TableHead,
|
|
14
15
|
TableHeaderCell,
|
|
16
|
+
TableOwnerCellValue,
|
|
15
17
|
TableRoot,
|
|
16
18
|
TableRow
|
|
17
19
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kopexa/table",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"description": "ables are used to display tabular data using rows and columns. ",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"table"
|
|
@@ -28,12 +28,15 @@
|
|
|
28
28
|
"react": ">=19.0.0-rc.0",
|
|
29
29
|
"react-dom": ">=19.0.0-rc.0",
|
|
30
30
|
"motion": ">=12.23.6",
|
|
31
|
-
"@kopexa/theme": "1.
|
|
31
|
+
"@kopexa/theme": "1.6.1"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@kopexa/shared-utils": "1.1.5",
|
|
35
|
-
"@kopexa/react-utils": "2.0.
|
|
36
|
-
"@kopexa/use-hover": "0.0.1"
|
|
35
|
+
"@kopexa/react-utils": "2.0.6",
|
|
36
|
+
"@kopexa/use-hover": "0.0.1",
|
|
37
|
+
"@kopexa/button": "7.0.1",
|
|
38
|
+
"@kopexa/avatar": "2.0.1",
|
|
39
|
+
"@kopexa/icons": "9.0.1"
|
|
37
40
|
},
|
|
38
41
|
"clean-package": "../../../clean-package.config.json",
|
|
39
42
|
"module": "dist/index.mjs",
|
package/dist/chunk-TNTMVIA6.mjs
DELETED
|
@@ -1,141 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __export = (target, all) => {
|
|
4
|
-
for (var name in all)
|
|
5
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
6
|
-
};
|
|
7
|
-
|
|
8
|
-
// src/table.tsx
|
|
9
|
-
import { createContext, mergeRefs } from "@kopexa/react-utils";
|
|
10
|
-
import { callAllHandlers, dataAttr } from "@kopexa/shared-utils";
|
|
11
|
-
import {
|
|
12
|
-
table
|
|
13
|
-
} from "@kopexa/theme";
|
|
14
|
-
import { useHover } from "@kopexa/use-hover";
|
|
15
|
-
import { useRef } from "react";
|
|
16
|
-
import { jsx } from "react/jsx-runtime";
|
|
17
|
-
var [Provider, useTableContext] = createContext(
|
|
18
|
-
{}
|
|
19
|
-
);
|
|
20
|
-
var TableRoot = (props) => {
|
|
21
|
-
const {
|
|
22
|
-
className,
|
|
23
|
-
children,
|
|
24
|
-
isSelectable,
|
|
25
|
-
onRowClick,
|
|
26
|
-
layout,
|
|
27
|
-
fullWidth,
|
|
28
|
-
overscroll,
|
|
29
|
-
...rest
|
|
30
|
-
} = props;
|
|
31
|
-
const styles = table({
|
|
32
|
-
className,
|
|
33
|
-
isSelectable,
|
|
34
|
-
layout,
|
|
35
|
-
fullWidth,
|
|
36
|
-
overscroll
|
|
37
|
-
});
|
|
38
|
-
return /* @__PURE__ */ jsx(Provider, { value: { styles, onRowClick }, children: /* @__PURE__ */ jsx("table", { className: styles.table(), ...rest, children }) });
|
|
39
|
-
};
|
|
40
|
-
function TableHead(props) {
|
|
41
|
-
const { className, ...rest } = props;
|
|
42
|
-
const { styles } = useTableContext();
|
|
43
|
-
return /* @__PURE__ */ jsx(
|
|
44
|
-
"thead",
|
|
45
|
-
{
|
|
46
|
-
"data-slot": "table-head",
|
|
47
|
-
className: styles.thead({
|
|
48
|
-
className
|
|
49
|
-
}),
|
|
50
|
-
...rest
|
|
51
|
-
}
|
|
52
|
-
);
|
|
53
|
-
}
|
|
54
|
-
function TableBody(props) {
|
|
55
|
-
const { className, ...rest } = props;
|
|
56
|
-
const { styles } = useTableContext();
|
|
57
|
-
return /* @__PURE__ */ jsx(
|
|
58
|
-
"tbody",
|
|
59
|
-
{
|
|
60
|
-
"data-slot": "table-body",
|
|
61
|
-
className: styles.tbody({
|
|
62
|
-
className
|
|
63
|
-
}),
|
|
64
|
-
...rest
|
|
65
|
-
}
|
|
66
|
-
);
|
|
67
|
-
}
|
|
68
|
-
function TableRow(props) {
|
|
69
|
-
const {
|
|
70
|
-
className,
|
|
71
|
-
ref,
|
|
72
|
-
isSelected = false,
|
|
73
|
-
onClick,
|
|
74
|
-
hasSelect,
|
|
75
|
-
hasActions,
|
|
76
|
-
...rest
|
|
77
|
-
} = props;
|
|
78
|
-
const { styles, onRowClick } = useTableContext();
|
|
79
|
-
const innerRef = useRef(null);
|
|
80
|
-
const isHover = useHover(innerRef);
|
|
81
|
-
return /* @__PURE__ */ jsx(
|
|
82
|
-
"tr",
|
|
83
|
-
{
|
|
84
|
-
"data-slot": "table-row",
|
|
85
|
-
"data-hover": dataAttr(isHover),
|
|
86
|
-
"aria-selected": isSelected,
|
|
87
|
-
className: styles.tr({
|
|
88
|
-
className,
|
|
89
|
-
hasSelect,
|
|
90
|
-
hasActions
|
|
91
|
-
}),
|
|
92
|
-
ref: mergeRefs(innerRef, ref),
|
|
93
|
-
onClick: callAllHandlers(onRowClick, onClick),
|
|
94
|
-
...rest
|
|
95
|
-
}
|
|
96
|
-
);
|
|
97
|
-
}
|
|
98
|
-
function TableHeaderCell(props) {
|
|
99
|
-
const { className, isSelectCell, isActionCell, isStickyCell, ...rest } = props;
|
|
100
|
-
const { styles } = useTableContext();
|
|
101
|
-
return /* @__PURE__ */ jsx(
|
|
102
|
-
"th",
|
|
103
|
-
{
|
|
104
|
-
"data-slot": "table-header-cell",
|
|
105
|
-
className: styles.th({
|
|
106
|
-
className,
|
|
107
|
-
isSelectCell,
|
|
108
|
-
isActionCell,
|
|
109
|
-
isStickyCell
|
|
110
|
-
}),
|
|
111
|
-
...rest
|
|
112
|
-
}
|
|
113
|
-
);
|
|
114
|
-
}
|
|
115
|
-
function TableCell(props) {
|
|
116
|
-
const { className, isSelectCell, isActionCell, isStickyCell, ...rest } = props;
|
|
117
|
-
const { styles } = useTableContext();
|
|
118
|
-
return /* @__PURE__ */ jsx(
|
|
119
|
-
"td",
|
|
120
|
-
{
|
|
121
|
-
"data-slot": "table-cell",
|
|
122
|
-
className: styles.td({
|
|
123
|
-
className,
|
|
124
|
-
isSelectCell,
|
|
125
|
-
isActionCell,
|
|
126
|
-
isStickyCell
|
|
127
|
-
}),
|
|
128
|
-
...rest
|
|
129
|
-
}
|
|
130
|
-
);
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
export {
|
|
134
|
-
__export,
|
|
135
|
-
TableRoot,
|
|
136
|
-
TableHead,
|
|
137
|
-
TableBody,
|
|
138
|
-
TableRow,
|
|
139
|
-
TableHeaderCell,
|
|
140
|
-
TableCell
|
|
141
|
-
};
|