@apipass/design-system 5.3.0 → 5.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/dist/lib/embedded-styles.js +2 -2
- package/dist/lib/style.css +1 -1
- package/dist/lib/ui/primitives/Table/Table.cjs +1 -1
- package/dist/lib/ui/primitives/Table/Table.cjs.map +1 -1
- package/dist/lib/ui/primitives/Table/Table.js +68 -52
- package/dist/lib/ui/primitives/Table/Table.js.map +1 -1
- package/dist/types/ui/primitives/Table/Table.d.ts +2 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../../vendor/clsx/dist/clsx.cjs"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../../vendor/clsx/dist/clsx.cjs"),n=require("react-aria-components");;/* empty css */const N=require("../../icons/IconChevronDown.cjs"),C=require("../../icons/IconChevronUp.cjs"),u=require("../Checkbox/Checkbox.cjs");function g(s){const l=Number(s);return`${s}`.trim()!==""&&Number.isFinite(l)?`${l}px`:`${s}`}function T({bleed:s=!1,dense:l=!1,grid:a=!1,striped:t=!1,maxHeight:c,className:o,...b}){const i=c!==void 0,m=r.clsx(o,"table-container",s&&"table-container-bleed",i&&"table-container-scrollable"),h=i?{"--table-max-height":g(c)}:void 0,j=r.clsx("sds-table",s&&"table-bleed",l&&"table-dense",a&&"table-grid",t&&"sds-table-striped");return e.jsx("div",{className:m,style:h,children:e.jsx(n.Table,{className:j,...b})})}function d({align:s="start",className:l,...a}){const t=r.clsx(l,"table-column",`table-align-${s}`);return e.jsx(n.Column,{className:t,...a,children:({allowsSorting:c,sortDirection:o})=>e.jsx("div",{className:r.clsx("table-column-inner"),children:e.jsxs(e.Fragment,{children:[a.children,c&&e.jsx("span",{"aria-hidden":"true",className:r.clsx("sort-indicator",!o&&"sort-indicator-unsorted"),children:o==="descending"?e.jsx(N.IconChevronDown,{}):e.jsx(C.IconChevronUp,{})})]})})})}function f({className:s,...l}){return e.jsx(n.TableBody,{...l})}function v({className:s,columns:l,children:a,...t}){const{selectionBehavior:c,selectionMode:o,allowsDragging:b}=n.useTableOptions(),i=r.clsx(s,"table-head");return e.jsxs(n.TableHeader,{className:i,...t,children:[b&&e.jsx(d,{}),c==="toggle"&&e.jsx(d,{className:"table-selection-col",children:o==="multiple"&&e.jsx(n.Checkbox,{slot:"selection",className:"table-selection-checkbox",children:e.jsx(u.Checkbox,{})})}),e.jsx(n.Collection,{items:l,children:a})]})}function p({id:s,columns:l,children:a,className:t,...c}){const{selectionBehavior:o,allowsDragging:b}=n.useTableOptions(),i=r.clsx(t,"table-row");return e.jsxs(n.Row,{id:s,...c,className:i,children:[b&&e.jsx(x,{children:e.jsx(n.Button,{slot:"drag",children:"≡"})}),o==="toggle"&&e.jsx(x,{className:"table-selection-cell",children:e.jsx(n.Checkbox,{slot:"selection",className:"table-selection-checkbox",children:e.jsx(u.Checkbox,{})})}),e.jsx(n.Collection,{items:l,children:a})]})}function x({align:s="start",className:l,...a}){const t=r.clsx(l,"table-cell",`table-align-${s}`);return e.jsx(n.Cell,{className:t,...a})}exports.Table=T;exports.TableBody=f;exports.TableCell=x;exports.TableColumn=d;exports.TableHead=v;exports.TableRow=p;
|
|
2
2
|
//# sourceMappingURL=Table.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.cjs","sources":["../../../../../src/ui/primitives/Table/Table.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { IconChevronDown, IconChevronUp } from \"icons\";\nimport { Checkbox } from \"primitives\";\nimport {\n Button as RACButton,\n Cell as RACCell,\n Checkbox as RACSelectionCheckbox,\n Collection as RACCollection,\n Column as RACColumn,\n Row as RACRow,\n Table as RACTable,\n TableBody as RACTableBody,\n TableHeader as RACTableHeader,\n useTableOptions,\n type CellProps as RACCellProps,\n type ColumnProps as RACColumnProps,\n type RowProps as RACRowProps,\n type TableBodyProps as RACTableBodyProps,\n type TableHeaderProps as RACTableHeaderProps,\n type TableProps as RACTableProps,\n} from \"react-aria-components\";\nimport \"./table.css\";\n\ntype TableAlign = \"start\" | \"center\" | \"right\";\n\nexport type TableProps = RACTableProps & {\n bleed?: boolean;\n dense?: boolean;\n grid?: boolean;\n striped?: boolean;\n};\nexport function Table({\n bleed = false,\n dense = false,\n grid = false,\n striped = false,\n className,\n ...props\n}: TableProps) {\n const containerClassNames = clsx(\n className,\n \"table-container\",\n bleed && \"table-container-bleed\",\n );\n const tableClassNames = clsx(\n \"sds-table\",\n bleed && \"table-bleed\",\n dense && \"table-dense\",\n grid && \"table-grid\",\n striped && \"sds-table-striped\",\n );\n return (\n <div className={containerClassNames}>\n <RACTable className={tableClassNames} {...props} />\n </div>\n );\n}\n\nexport type TableColumnProps = RACColumnProps & {\n align?: TableAlign;\n};\nexport function TableColumn({\n align = \"start\",\n className,\n ...props\n}: TableColumnProps) {\n const classNames = clsx(className, \"table-column\", `table-align-${align}`);\n return (\n <RACColumn className={classNames} {...props}>\n {({ allowsSorting, sortDirection }) => (\n <div className={clsx(\"table-column-inner\")}>\n <>\n {props.children}\n {allowsSorting && (\n <span
|
|
1
|
+
{"version":3,"file":"Table.cjs","sources":["../../../../../src/ui/primitives/Table/Table.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { IconChevronDown, IconChevronUp } from \"icons\";\nimport type { CSSProperties } from \"react\";\nimport { Checkbox } from \"primitives\";\nimport {\n Button as RACButton,\n Cell as RACCell,\n Checkbox as RACSelectionCheckbox,\n Collection as RACCollection,\n Column as RACColumn,\n Row as RACRow,\n Table as RACTable,\n TableBody as RACTableBody,\n TableHeader as RACTableHeader,\n useTableOptions,\n type CellProps as RACCellProps,\n type ColumnProps as RACColumnProps,\n type RowProps as RACRowProps,\n type TableBodyProps as RACTableBodyProps,\n type TableHeaderProps as RACTableHeaderProps,\n type TableProps as RACTableProps,\n} from \"react-aria-components\";\nimport \"./table.css\";\n\ntype TableAlign = \"start\" | \"center\" | \"right\";\n\nfunction toCssLength(value: number | string): string {\n const numericValue = Number(value);\n const isUnitlessNumber =\n `${value}`.trim() !== \"\" && Number.isFinite(numericValue);\n return isUnitlessNumber ? `${numericValue}px` : `${value}`;\n}\n\nexport type TableProps = RACTableProps & {\n bleed?: boolean;\n dense?: boolean;\n grid?: boolean;\n striped?: boolean;\n maxHeight?: number | string;\n};\nexport function Table({\n bleed = false,\n dense = false,\n grid = false,\n striped = false,\n maxHeight,\n className,\n ...props\n}: TableProps) {\n const scrollsVertically = maxHeight !== undefined;\n const containerClassNames = clsx(\n className,\n \"table-container\",\n bleed && \"table-container-bleed\",\n scrollsVertically && \"table-container-scrollable\",\n );\n const containerStyle = scrollsVertically\n ? ({ \"--table-max-height\": toCssLength(maxHeight) } as CSSProperties)\n : undefined;\n const tableClassNames = clsx(\n \"sds-table\",\n bleed && \"table-bleed\",\n dense && \"table-dense\",\n grid && \"table-grid\",\n striped && \"sds-table-striped\",\n );\n return (\n <div className={containerClassNames} style={containerStyle}>\n <RACTable className={tableClassNames} {...props} />\n </div>\n );\n}\n\nexport type TableColumnProps = RACColumnProps & {\n align?: TableAlign;\n};\nexport function TableColumn({\n align = \"start\",\n className,\n ...props\n}: TableColumnProps) {\n const classNames = clsx(className, \"table-column\", `table-align-${align}`);\n return (\n <RACColumn className={classNames} {...props}>\n {({ allowsSorting, sortDirection }) => (\n <div className={clsx(\"table-column-inner\")}>\n <>\n {props.children}\n {allowsSorting && (\n <span\n aria-hidden=\"true\"\n className={clsx(\n \"sort-indicator\",\n !sortDirection && \"sort-indicator-unsorted\",\n )}\n >\n {sortDirection === \"descending\" ? (\n <IconChevronDown />\n ) : (\n <IconChevronUp />\n )}\n </span>\n )}\n </>\n </div>\n )}\n </RACColumn>\n );\n}\n\nexport type TableBodyProps<T> = RACTableBodyProps<T>;\nexport function TableBody<T extends object>({\n className,\n ...props\n}: TableBodyProps<T>) {\n return <RACTableBody {...props} />;\n}\n\nexport type TableHeadProps<T> = RACTableHeaderProps<T>;\nexport function TableHead<T extends object>({\n className,\n columns,\n children,\n ...props\n}: TableHeadProps<T>) {\n const { selectionBehavior, selectionMode, allowsDragging } =\n useTableOptions();\n const classNames = clsx(className, \"table-head\");\n return (\n <RACTableHeader className={classNames} {...props}>\n {/* Add extra columns for drag and drop and selection. */}\n {allowsDragging && <TableColumn />}\n {selectionBehavior === \"toggle\" && (\n <TableColumn className=\"table-selection-col\">\n {selectionMode === \"multiple\" && (\n <RACSelectionCheckbox slot=\"selection\" className=\"table-selection-checkbox\">\n <Checkbox />\n </RACSelectionCheckbox>\n )}\n </TableColumn>\n )}\n <RACCollection items={columns}>{children}</RACCollection>\n </RACTableHeader>\n );\n}\n\nexport type TableRowProps<T> = RACRowProps<T>;\nexport function TableRow<T extends object>({\n id,\n columns,\n children,\n className,\n ...otherProps\n}: TableRowProps<T>) {\n const { selectionBehavior, allowsDragging } = useTableOptions();\n const classNames = clsx(className, \"table-row\");\n return (\n <RACRow id={id} {...otherProps} className={classNames}>\n {allowsDragging && (\n <TableCell>\n <RACButton slot=\"drag\">≡</RACButton>\n </TableCell>\n )}\n {selectionBehavior === \"toggle\" && (\n <TableCell className=\"table-selection-cell\">\n <RACSelectionCheckbox slot=\"selection\" className=\"table-selection-checkbox\">\n <Checkbox />\n </RACSelectionCheckbox>\n </TableCell>\n )}\n <RACCollection items={columns}>{children}</RACCollection>\n </RACRow>\n );\n}\n\nexport type TableCellProps = RACCellProps & { align?: TableAlign };\nexport function TableCell({\n align = \"start\",\n className,\n ...props\n}: TableCellProps) {\n const classNames = clsx(className, \"table-cell\", `table-align-${align}`);\n return <RACCell className={classNames} {...props} />;\n}\n"],"names":["toCssLength","value","numericValue","Table","bleed","dense","grid","striped","maxHeight","className","props","scrollsVertically","containerClassNames","clsx","containerStyle","tableClassNames","jsx","RACTable","TableColumn","align","classNames","RACColumn","allowsSorting","sortDirection","jsxs","Fragment","IconChevronDown","IconChevronUp","TableBody","RACTableBody","TableHead","columns","children","selectionBehavior","selectionMode","allowsDragging","useTableOptions","RACTableHeader","RACSelectionCheckbox","Checkbox","RACCollection","TableRow","id","otherProps","RACRow","TableCell","RACButton","RACCell"],"mappings":"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"}
|
|
@@ -1,89 +1,105 @@
|
|
|
1
|
-
import { jsx as e, jsxs as m, Fragment as
|
|
1
|
+
import { jsx as e, jsxs as m, Fragment as T } from "react/jsx-runtime";
|
|
2
2
|
import { clsx as c } from "../../../vendor/clsx/dist/clsx.js";
|
|
3
|
-
import { Table as
|
|
3
|
+
import { Table as x, Column as $, TableBody as v, useTableOptions as h, TableHeader as w, Checkbox as u, Collection as N, Row as y, Button as B, Cell as k } from "react-aria-components";
|
|
4
4
|
/* empty css */
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
5
|
+
import { IconChevronDown as U } from "../../icons/IconChevronDown.js";
|
|
6
|
+
import { IconChevronUp as j } from "../../icons/IconChevronUp.js";
|
|
7
7
|
import { Checkbox as f } from "../Checkbox/Checkbox.js";
|
|
8
|
-
function
|
|
8
|
+
function D(l) {
|
|
9
|
+
const s = Number(l);
|
|
10
|
+
return `${l}`.trim() !== "" && Number.isFinite(s) ? `${s}px` : `${l}`;
|
|
11
|
+
}
|
|
12
|
+
function O({
|
|
9
13
|
bleed: l = !1,
|
|
10
|
-
dense:
|
|
11
|
-
grid:
|
|
12
|
-
striped:
|
|
13
|
-
|
|
14
|
-
|
|
14
|
+
dense: s = !1,
|
|
15
|
+
grid: a = !1,
|
|
16
|
+
striped: t = !1,
|
|
17
|
+
maxHeight: n,
|
|
18
|
+
className: o,
|
|
19
|
+
...r
|
|
15
20
|
}) {
|
|
16
|
-
const
|
|
17
|
-
|
|
21
|
+
const i = n !== void 0, g = c(
|
|
22
|
+
o,
|
|
18
23
|
"table-container",
|
|
19
|
-
l && "table-container-bleed"
|
|
20
|
-
|
|
24
|
+
l && "table-container-bleed",
|
|
25
|
+
i && "table-container-scrollable"
|
|
26
|
+
), C = i ? { "--table-max-height": D(n) } : void 0, p = c(
|
|
21
27
|
"sds-table",
|
|
22
28
|
l && "table-bleed",
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
29
|
+
s && "table-dense",
|
|
30
|
+
a && "table-grid",
|
|
31
|
+
t && "sds-table-striped"
|
|
26
32
|
);
|
|
27
|
-
return /* @__PURE__ */ e("div", { className:
|
|
33
|
+
return /* @__PURE__ */ e("div", { className: g, style: C, children: /* @__PURE__ */ e(x, { className: p, ...r }) });
|
|
28
34
|
}
|
|
29
35
|
function b({
|
|
30
36
|
align: l = "start",
|
|
31
|
-
className:
|
|
32
|
-
...
|
|
37
|
+
className: s,
|
|
38
|
+
...a
|
|
33
39
|
}) {
|
|
34
|
-
const
|
|
35
|
-
return /* @__PURE__ */ e(
|
|
36
|
-
|
|
37
|
-
|
|
40
|
+
const t = c(s, "table-column", `table-align-${l}`);
|
|
41
|
+
return /* @__PURE__ */ e($, { className: t, ...a, children: ({ allowsSorting: n, sortDirection: o }) => /* @__PURE__ */ e("div", { className: c("table-column-inner"), children: /* @__PURE__ */ m(T, { children: [
|
|
42
|
+
a.children,
|
|
43
|
+
n && /* @__PURE__ */ e(
|
|
44
|
+
"span",
|
|
45
|
+
{
|
|
46
|
+
"aria-hidden": "true",
|
|
47
|
+
className: c(
|
|
48
|
+
"sort-indicator",
|
|
49
|
+
!o && "sort-indicator-unsorted"
|
|
50
|
+
),
|
|
51
|
+
children: o === "descending" ? /* @__PURE__ */ e(U, {}) : /* @__PURE__ */ e(j, {})
|
|
52
|
+
}
|
|
53
|
+
)
|
|
38
54
|
] }) }) });
|
|
39
55
|
}
|
|
40
|
-
function
|
|
56
|
+
function S({
|
|
41
57
|
className: l,
|
|
42
|
-
...
|
|
58
|
+
...s
|
|
43
59
|
}) {
|
|
44
|
-
return /* @__PURE__ */ e(
|
|
60
|
+
return /* @__PURE__ */ e(v, { ...s });
|
|
45
61
|
}
|
|
46
|
-
function
|
|
62
|
+
function q({
|
|
47
63
|
className: l,
|
|
48
|
-
columns:
|
|
49
|
-
children:
|
|
50
|
-
...
|
|
64
|
+
columns: s,
|
|
65
|
+
children: a,
|
|
66
|
+
...t
|
|
51
67
|
}) {
|
|
52
|
-
const { selectionBehavior:
|
|
53
|
-
return /* @__PURE__ */ m(
|
|
68
|
+
const { selectionBehavior: n, selectionMode: o, allowsDragging: r } = h(), i = c(l, "table-head");
|
|
69
|
+
return /* @__PURE__ */ m(w, { className: i, ...t, children: [
|
|
54
70
|
r && /* @__PURE__ */ e(b, {}),
|
|
55
|
-
|
|
56
|
-
/* @__PURE__ */ e(N, { items:
|
|
71
|
+
n === "toggle" && /* @__PURE__ */ e(b, { className: "table-selection-col", children: o === "multiple" && /* @__PURE__ */ e(u, { slot: "selection", className: "table-selection-checkbox", children: /* @__PURE__ */ e(f, {}) }) }),
|
|
72
|
+
/* @__PURE__ */ e(N, { items: s, children: a })
|
|
57
73
|
] });
|
|
58
74
|
}
|
|
59
|
-
function
|
|
75
|
+
function z({
|
|
60
76
|
id: l,
|
|
61
|
-
columns:
|
|
62
|
-
children:
|
|
63
|
-
className:
|
|
64
|
-
...
|
|
77
|
+
columns: s,
|
|
78
|
+
children: a,
|
|
79
|
+
className: t,
|
|
80
|
+
...n
|
|
65
81
|
}) {
|
|
66
|
-
const { selectionBehavior: o, allowsDragging: r } = h(), i = c(
|
|
67
|
-
return /* @__PURE__ */ m(
|
|
68
|
-
r && /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(
|
|
82
|
+
const { selectionBehavior: o, allowsDragging: r } = h(), i = c(t, "table-row");
|
|
83
|
+
return /* @__PURE__ */ m(y, { id: l, ...n, className: i, children: [
|
|
84
|
+
r && /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(B, { slot: "drag", children: "≡" }) }),
|
|
69
85
|
o === "toggle" && /* @__PURE__ */ e(d, { className: "table-selection-cell", children: /* @__PURE__ */ e(u, { slot: "selection", className: "table-selection-checkbox", children: /* @__PURE__ */ e(f, {}) }) }),
|
|
70
|
-
/* @__PURE__ */ e(N, { items:
|
|
86
|
+
/* @__PURE__ */ e(N, { items: s, children: a })
|
|
71
87
|
] });
|
|
72
88
|
}
|
|
73
89
|
function d({
|
|
74
90
|
align: l = "start",
|
|
75
|
-
className:
|
|
76
|
-
...
|
|
91
|
+
className: s,
|
|
92
|
+
...a
|
|
77
93
|
}) {
|
|
78
|
-
const
|
|
79
|
-
return /* @__PURE__ */ e(
|
|
94
|
+
const t = c(s, "table-cell", `table-align-${l}`);
|
|
95
|
+
return /* @__PURE__ */ e(k, { className: t, ...a });
|
|
80
96
|
}
|
|
81
97
|
export {
|
|
82
|
-
|
|
83
|
-
|
|
98
|
+
O as Table,
|
|
99
|
+
S as TableBody,
|
|
84
100
|
d as TableCell,
|
|
85
101
|
b as TableColumn,
|
|
86
|
-
|
|
87
|
-
|
|
102
|
+
q as TableHead,
|
|
103
|
+
z as TableRow
|
|
88
104
|
};
|
|
89
105
|
//# sourceMappingURL=Table.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.js","sources":["../../../../../src/ui/primitives/Table/Table.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { IconChevronDown, IconChevronUp } from \"icons\";\nimport { Checkbox } from \"primitives\";\nimport {\n Button as RACButton,\n Cell as RACCell,\n Checkbox as RACSelectionCheckbox,\n Collection as RACCollection,\n Column as RACColumn,\n Row as RACRow,\n Table as RACTable,\n TableBody as RACTableBody,\n TableHeader as RACTableHeader,\n useTableOptions,\n type CellProps as RACCellProps,\n type ColumnProps as RACColumnProps,\n type RowProps as RACRowProps,\n type TableBodyProps as RACTableBodyProps,\n type TableHeaderProps as RACTableHeaderProps,\n type TableProps as RACTableProps,\n} from \"react-aria-components\";\nimport \"./table.css\";\n\ntype TableAlign = \"start\" | \"center\" | \"right\";\n\nexport type TableProps = RACTableProps & {\n bleed?: boolean;\n dense?: boolean;\n grid?: boolean;\n striped?: boolean;\n};\nexport function Table({\n bleed = false,\n dense = false,\n grid = false,\n striped = false,\n className,\n ...props\n}: TableProps) {\n const containerClassNames = clsx(\n className,\n \"table-container\",\n bleed && \"table-container-bleed\",\n );\n const tableClassNames = clsx(\n \"sds-table\",\n bleed && \"table-bleed\",\n dense && \"table-dense\",\n grid && \"table-grid\",\n striped && \"sds-table-striped\",\n );\n return (\n <div className={containerClassNames}>\n <RACTable className={tableClassNames} {...props} />\n </div>\n );\n}\n\nexport type TableColumnProps = RACColumnProps & {\n align?: TableAlign;\n};\nexport function TableColumn({\n align = \"start\",\n className,\n ...props\n}: TableColumnProps) {\n const classNames = clsx(className, \"table-column\", `table-align-${align}`);\n return (\n <RACColumn className={classNames} {...props}>\n {({ allowsSorting, sortDirection }) => (\n <div className={clsx(\"table-column-inner\")}>\n <>\n {props.children}\n {allowsSorting && (\n <span
|
|
1
|
+
{"version":3,"file":"Table.js","sources":["../../../../../src/ui/primitives/Table/Table.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { IconChevronDown, IconChevronUp } from \"icons\";\nimport type { CSSProperties } from \"react\";\nimport { Checkbox } from \"primitives\";\nimport {\n Button as RACButton,\n Cell as RACCell,\n Checkbox as RACSelectionCheckbox,\n Collection as RACCollection,\n Column as RACColumn,\n Row as RACRow,\n Table as RACTable,\n TableBody as RACTableBody,\n TableHeader as RACTableHeader,\n useTableOptions,\n type CellProps as RACCellProps,\n type ColumnProps as RACColumnProps,\n type RowProps as RACRowProps,\n type TableBodyProps as RACTableBodyProps,\n type TableHeaderProps as RACTableHeaderProps,\n type TableProps as RACTableProps,\n} from \"react-aria-components\";\nimport \"./table.css\";\n\ntype TableAlign = \"start\" | \"center\" | \"right\";\n\nfunction toCssLength(value: number | string): string {\n const numericValue = Number(value);\n const isUnitlessNumber =\n `${value}`.trim() !== \"\" && Number.isFinite(numericValue);\n return isUnitlessNumber ? `${numericValue}px` : `${value}`;\n}\n\nexport type TableProps = RACTableProps & {\n bleed?: boolean;\n dense?: boolean;\n grid?: boolean;\n striped?: boolean;\n maxHeight?: number | string;\n};\nexport function Table({\n bleed = false,\n dense = false,\n grid = false,\n striped = false,\n maxHeight,\n className,\n ...props\n}: TableProps) {\n const scrollsVertically = maxHeight !== undefined;\n const containerClassNames = clsx(\n className,\n \"table-container\",\n bleed && \"table-container-bleed\",\n scrollsVertically && \"table-container-scrollable\",\n );\n const containerStyle = scrollsVertically\n ? ({ \"--table-max-height\": toCssLength(maxHeight) } as CSSProperties)\n : undefined;\n const tableClassNames = clsx(\n \"sds-table\",\n bleed && \"table-bleed\",\n dense && \"table-dense\",\n grid && \"table-grid\",\n striped && \"sds-table-striped\",\n );\n return (\n <div className={containerClassNames} style={containerStyle}>\n <RACTable className={tableClassNames} {...props} />\n </div>\n );\n}\n\nexport type TableColumnProps = RACColumnProps & {\n align?: TableAlign;\n};\nexport function TableColumn({\n align = \"start\",\n className,\n ...props\n}: TableColumnProps) {\n const classNames = clsx(className, \"table-column\", `table-align-${align}`);\n return (\n <RACColumn className={classNames} {...props}>\n {({ allowsSorting, sortDirection }) => (\n <div className={clsx(\"table-column-inner\")}>\n <>\n {props.children}\n {allowsSorting && (\n <span\n aria-hidden=\"true\"\n className={clsx(\n \"sort-indicator\",\n !sortDirection && \"sort-indicator-unsorted\",\n )}\n >\n {sortDirection === \"descending\" ? (\n <IconChevronDown />\n ) : (\n <IconChevronUp />\n )}\n </span>\n )}\n </>\n </div>\n )}\n </RACColumn>\n );\n}\n\nexport type TableBodyProps<T> = RACTableBodyProps<T>;\nexport function TableBody<T extends object>({\n className,\n ...props\n}: TableBodyProps<T>) {\n return <RACTableBody {...props} />;\n}\n\nexport type TableHeadProps<T> = RACTableHeaderProps<T>;\nexport function TableHead<T extends object>({\n className,\n columns,\n children,\n ...props\n}: TableHeadProps<T>) {\n const { selectionBehavior, selectionMode, allowsDragging } =\n useTableOptions();\n const classNames = clsx(className, \"table-head\");\n return (\n <RACTableHeader className={classNames} {...props}>\n {/* Add extra columns for drag and drop and selection. */}\n {allowsDragging && <TableColumn />}\n {selectionBehavior === \"toggle\" && (\n <TableColumn className=\"table-selection-col\">\n {selectionMode === \"multiple\" && (\n <RACSelectionCheckbox slot=\"selection\" className=\"table-selection-checkbox\">\n <Checkbox />\n </RACSelectionCheckbox>\n )}\n </TableColumn>\n )}\n <RACCollection items={columns}>{children}</RACCollection>\n </RACTableHeader>\n );\n}\n\nexport type TableRowProps<T> = RACRowProps<T>;\nexport function TableRow<T extends object>({\n id,\n columns,\n children,\n className,\n ...otherProps\n}: TableRowProps<T>) {\n const { selectionBehavior, allowsDragging } = useTableOptions();\n const classNames = clsx(className, \"table-row\");\n return (\n <RACRow id={id} {...otherProps} className={classNames}>\n {allowsDragging && (\n <TableCell>\n <RACButton slot=\"drag\">≡</RACButton>\n </TableCell>\n )}\n {selectionBehavior === \"toggle\" && (\n <TableCell className=\"table-selection-cell\">\n <RACSelectionCheckbox slot=\"selection\" className=\"table-selection-checkbox\">\n <Checkbox />\n </RACSelectionCheckbox>\n </TableCell>\n )}\n <RACCollection items={columns}>{children}</RACCollection>\n </RACRow>\n );\n}\n\nexport type TableCellProps = RACCellProps & { align?: TableAlign };\nexport function TableCell({\n align = \"start\",\n className,\n ...props\n}: TableCellProps) {\n const classNames = clsx(className, \"table-cell\", `table-align-${align}`);\n return <RACCell className={classNames} {...props} />;\n}\n"],"names":["toCssLength","value","numericValue","Table","bleed","dense","grid","striped","maxHeight","className","props","scrollsVertically","containerClassNames","clsx","containerStyle","tableClassNames","jsx","RACTable","TableColumn","align","classNames","RACColumn","allowsSorting","sortDirection","jsxs","Fragment","IconChevronDown","IconChevronUp","TableBody","RACTableBody","TableHead","columns","children","selectionBehavior","selectionMode","allowsDragging","useTableOptions","RACTableHeader","RACSelectionCheckbox","Checkbox","RACCollection","TableRow","id","otherProps","RACRow","TableCell","RACButton","RACCell"],"mappings":";;;;;;;AA0BA,SAASA,EAAYC,GAAgC;AACnD,QAAMC,IAAe,OAAOD,CAAK;AAGjC,SADE,GAAGA,CAAK,GAAG,WAAW,MAAM,OAAO,SAASC,CAAY,IAChC,GAAGA,CAAY,OAAO,GAAGD,CAAK;AAC1D;AASO,SAASE,EAAM;AAAA,EACpB,OAAAC,IAAQ;AAAA,EACR,OAAAC,IAAQ;AAAA,EACR,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GAAe;AACb,QAAMC,IAAoBH,MAAc,QAClCI,IAAsBC;AAAA,IAC1BJ;AAAA,IACA;AAAA,IACAL,KAAS;AAAA,IACTO,KAAqB;AAAA,EAAA,GAEjBG,IAAiBH,IAClB,EAAE,sBAAsBX,EAAYQ,CAAS,MAC9C,QACEO,IAAkBF;AAAA,IACtB;AAAA,IACAT,KAAS;AAAA,IACTC,KAAS;AAAA,IACTC,KAAQ;AAAA,IACRC,KAAW;AAAA,EAAA;AAEb,SACE,gBAAAS,EAAC,OAAA,EAAI,WAAWJ,GAAqB,OAAOE,GAC1C,UAAA,gBAAAE,EAACC,GAAA,EAAS,WAAWF,GAAkB,GAAGL,EAAA,CAAO,GACnD;AAEJ;AAKO,SAASQ,EAAY;AAAA,EAC1B,OAAAC,IAAQ;AAAA,EACR,WAAAV;AAAA,EACA,GAAGC;AACL,GAAqB;AACnB,QAAMU,IAAaP,EAAKJ,GAAW,gBAAgB,eAAeU,CAAK,EAAE;AACzE,2BACGE,GAAA,EAAU,WAAWD,GAAa,GAAGV,GACnC,UAAA,CAAC,EAAE,eAAAY,GAAe,eAAAC,EAAA,MACjB,gBAAAP,EAAC,OAAA,EAAI,WAAWH,EAAK,oBAAoB,GACvC,UAAA,gBAAAW,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAf,EAAM;AAAA,IACNY,KACC,gBAAAN;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAY;AAAA,QACZ,WAAWH;AAAA,UACT;AAAA,UACA,CAACU,KAAiB;AAAA,QAAA;AAAA,QAGnB,gBAAkB,eACjB,gBAAAP,EAACU,GAAA,EAAgB,sBAEhBC,GAAA,CAAA,CAAc;AAAA,MAAA;AAAA,IAAA;AAAA,EAEnB,EAAA,CAEJ,GACF,GAEJ;AAEJ;AAGO,SAASC,EAA4B;AAAA,EAC1C,WAAAnB;AAAA,EACA,GAAGC;AACL,GAAsB;AACpB,SAAO,gBAAAM,EAACa,GAAA,EAAc,GAAGnB,EAAA,CAAO;AAClC;AAGO,SAASoB,EAA4B;AAAA,EAC1C,WAAArB;AAAA,EACA,SAAAsB;AAAA,EACA,UAAAC;AAAA,EACA,GAAGtB;AACL,GAAsB;AACpB,QAAM,EAAE,mBAAAuB,GAAmB,eAAAC,GAAe,gBAAAC,EAAA,IACxCC,EAAA,GACIhB,IAAaP,EAAKJ,GAAW,YAAY;AAC/C,SACE,gBAAAe,EAACa,GAAA,EAAe,WAAWjB,GAAa,GAAGV,GAExC,UAAA;AAAA,IAAAyB,uBAAmBjB,GAAA,EAAY;AAAA,IAC/Be,MAAsB,YACrB,gBAAAjB,EAACE,GAAA,EAAY,WAAU,uBACpB,UAAAgB,MAAkB,cACjB,gBAAAlB,EAACsB,GAAA,EAAqB,MAAK,aAAY,WAAU,4BAC/C,UAAA,gBAAAtB,EAACuB,GAAA,CAAA,CAAS,GACZ,GAEJ;AAAA,IAEF,gBAAAvB,EAACwB,GAAA,EAAc,OAAOT,GAAU,UAAAC,EAAA,CAAS;AAAA,EAAA,GAC3C;AAEJ;AAGO,SAASS,EAA2B;AAAA,EACzC,IAAAC;AAAA,EACA,SAAAX;AAAA,EACA,UAAAC;AAAA,EACA,WAAAvB;AAAA,EACA,GAAGkC;AACL,GAAqB;AACnB,QAAM,EAAE,mBAAAV,GAAmB,gBAAAE,EAAA,IAAmBC,EAAA,GACxChB,IAAaP,EAAKJ,GAAW,WAAW;AAC9C,2BACGmC,GAAA,EAAO,IAAAF,GAAS,GAAGC,GAAY,WAAWvB,GACxC,UAAA;AAAA,IAAAe,uBACEU,GAAA,EACC,UAAA,gBAAA7B,EAAC8B,KAAU,MAAK,QAAO,eAAC,EAAA,CAC1B;AAAA,IAEDb,MAAsB,YACrB,gBAAAjB,EAAC6B,GAAA,EAAU,WAAU,wBACnB,UAAA,gBAAA7B,EAACsB,GAAA,EAAqB,MAAK,aAAY,WAAU,4BAC/C,UAAA,gBAAAtB,EAACuB,GAAA,CAAA,CAAS,GACZ,GACF;AAAA,IAEF,gBAAAvB,EAACwB,GAAA,EAAc,OAAOT,GAAU,UAAAC,EAAA,CAAS;AAAA,EAAA,GAC3C;AAEJ;AAGO,SAASa,EAAU;AAAA,EACxB,OAAA1B,IAAQ;AAAA,EACR,WAAAV;AAAA,EACA,GAAGC;AACL,GAAmB;AACjB,QAAMU,IAAaP,EAAKJ,GAAW,cAAc,eAAeU,CAAK,EAAE;AACvE,SAAO,gBAAAH,EAAC+B,GAAA,EAAQ,WAAW3B,GAAa,GAAGV,GAAO;AACpD;"}
|
|
@@ -6,8 +6,9 @@ export type TableProps = RACTableProps & {
|
|
|
6
6
|
dense?: boolean;
|
|
7
7
|
grid?: boolean;
|
|
8
8
|
striped?: boolean;
|
|
9
|
+
maxHeight?: number | string;
|
|
9
10
|
};
|
|
10
|
-
export declare function Table({ bleed, dense, grid, striped, className, ...props }: TableProps): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export declare function Table({ bleed, dense, grid, striped, maxHeight, className, ...props }: TableProps): import("react/jsx-runtime").JSX.Element;
|
|
11
12
|
export type TableColumnProps = RACColumnProps & {
|
|
12
13
|
align?: TableAlign;
|
|
13
14
|
};
|