@sproutsocial/seeds-react-table 1.0.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/.eslintignore +6 -0
- package/.eslintrc.js +4 -0
- package/.turbo/turbo-build.log +53 -0
- package/CHANGELOG.md +7 -0
- package/dist/TableCell-B8GMRlv7.d.mts +13 -0
- package/dist/TableCell-CN71R1B5.d.ts +13 -0
- package/dist/TableCellTypes-Cp-8r7l1.d.mts +21 -0
- package/dist/TableCellTypes-Cp-8r7l1.d.ts +21 -0
- package/dist/TableHeaderCell-DnwlruQg.d.ts +12 -0
- package/dist/TableHeaderCell-DsJpGb2j.d.mts +12 -0
- package/dist/TableHeaderCellTypes-CH_zzW6X.d.ts +25 -0
- package/dist/TableHeaderCellTypes-CsJQBwu2.d.mts +25 -0
- package/dist/TableTypes-Dg7QrcGt.d.ts +37 -0
- package/dist/TableTypes-jS0O3bwQ.d.mts +37 -0
- package/dist/esm/chunk-67DCEN4G.js +140 -0
- package/dist/esm/chunk-67DCEN4G.js.map +1 -0
- package/dist/esm/chunk-XJMS6762.js +62 -0
- package/dist/esm/chunk-XJMS6762.js.map +1 -0
- package/dist/esm/index.js +106 -0
- package/dist/esm/index.js.map +1 -0
- package/dist/esm/tableCell.js +9 -0
- package/dist/esm/tableCell.js.map +1 -0
- package/dist/esm/tableHeaderCell.js +11 -0
- package/dist/esm/tableHeaderCell.js.map +1 -0
- package/dist/esm/tableRowAccordion.js +110 -0
- package/dist/esm/tableRowAccordion.js.map +1 -0
- package/dist/index.d.mts +32 -0
- package/dist/index.d.ts +32 -0
- package/dist/index.js +327 -0
- package/dist/index.js.map +1 -0
- package/dist/tableCell.d.mts +9 -0
- package/dist/tableCell.d.ts +9 -0
- package/dist/tableCell.js +98 -0
- package/dist/tableCell.js.map +1 -0
- package/dist/tableHeaderCell.d.mts +10 -0
- package/dist/tableHeaderCell.d.ts +10 -0
- package/dist/tableHeaderCell.js +177 -0
- package/dist/tableHeaderCell.js.map +1 -0
- package/dist/tableRowAccordion.d.mts +25 -0
- package/dist/tableRowAccordion.d.ts +25 -0
- package/dist/tableRowAccordion.js +200 -0
- package/dist/tableRowAccordion.js.map +1 -0
- package/jest.config.js +9 -0
- package/package.json +65 -0
- package/src/Table.stories.tsx +403 -0
- package/src/Table.tsx +111 -0
- package/src/TableCell/TableCell.stories.tsx +30 -0
- package/src/TableCell/TableCell.tsx +44 -0
- package/src/TableCell/TableCellTypes.ts +30 -0
- package/src/TableCell/__tests__/TabelCell.test.tsx +36 -0
- package/src/TableCell/__tests__/TableCell.typetest.tsx +34 -0
- package/src/TableCell/index.ts +5 -0
- package/src/TableCell/styles.ts +16 -0
- package/src/TableHeaderCell/TableHeaderCell.stories.tsx +46 -0
- package/src/TableHeaderCell/TableHeaderCell.tsx +120 -0
- package/src/TableHeaderCell/TableHeaderCellTypes.ts +26 -0
- package/src/TableHeaderCell/__tests__/TableHeaderCell.test.tsx +28 -0
- package/src/TableHeaderCell/__tests__/TableHeaderCell.typetest.tsx +31 -0
- package/src/TableHeaderCell/constants.ts +4 -0
- package/src/TableHeaderCell/index.ts +6 -0
- package/src/TableHeaderCell/styles.ts +46 -0
- package/src/TableRowAccordion/TableRowAccordion.stories.tsx +63 -0
- package/src/TableRowAccordion/TableRowAccordion.tsx +75 -0
- package/src/TableRowAccordion/TableRowAccordionTypes.ts +20 -0
- package/src/TableRowAccordion/__tests__/TableRowAccordion.test.tsx +104 -0
- package/src/TableRowAccordion/__tests__/TableRowAccordion.typetest.tsx +51 -0
- package/src/TableRowAccordion/index.ts +5 -0
- package/src/TableRowAccordion/styles.ts +25 -0
- package/src/TableTypes.ts +54 -0
- package/src/__tests__/Table.test.tsx +106 -0
- package/src/__tests__/Table.typetest.tsx +145 -0
- package/src/index.ts +5 -0
- package/src/styles.ts +21 -0
- package/styled.d.ts +7 -0
- package/tsconfig.json +9 -0
- package/tsup.config.ts +17 -0
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
|
|
30
|
+
// src/TableCell/index.ts
|
|
31
|
+
var TableCell_exports = {};
|
|
32
|
+
__export(TableCell_exports, {
|
|
33
|
+
TableCell: () => TableCell_default,
|
|
34
|
+
default: () => TableCell_default2
|
|
35
|
+
});
|
|
36
|
+
module.exports = __toCommonJS(TableCell_exports);
|
|
37
|
+
|
|
38
|
+
// src/TableCell/TableCell.tsx
|
|
39
|
+
var React = __toESM(require("react"));
|
|
40
|
+
|
|
41
|
+
// src/TableCell/styles.ts
|
|
42
|
+
var import_styled_components = __toESM(require("styled-components"));
|
|
43
|
+
var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
|
|
44
|
+
var Container = import_styled_components.default.td`
|
|
45
|
+
${(props) => props.theme.typography[200]}
|
|
46
|
+
font-weight: ${(props) => props.theme.fontWeights.normal};
|
|
47
|
+
padding: ${(props) => props.theme.space[300]};
|
|
48
|
+
text-align: ${(props) => props.alignment};
|
|
49
|
+
|
|
50
|
+
${import_seeds_react_system_props.COMMON}
|
|
51
|
+
`;
|
|
52
|
+
var styles_default = Container;
|
|
53
|
+
|
|
54
|
+
// src/TableCell/TableCell.tsx
|
|
55
|
+
var import_react = require("react");
|
|
56
|
+
var TableCell = class extends React.Component {
|
|
57
|
+
static displayName;
|
|
58
|
+
render() {
|
|
59
|
+
const {
|
|
60
|
+
id,
|
|
61
|
+
content,
|
|
62
|
+
colSpan,
|
|
63
|
+
width,
|
|
64
|
+
align,
|
|
65
|
+
scope,
|
|
66
|
+
children,
|
|
67
|
+
color,
|
|
68
|
+
...rest
|
|
69
|
+
} = this.props;
|
|
70
|
+
return /* @__PURE__ */ (0, import_react.createElement)(
|
|
71
|
+
styles_default,
|
|
72
|
+
{
|
|
73
|
+
...rest,
|
|
74
|
+
as: scope ? "th" : "td",
|
|
75
|
+
scope: scope ? scope : void 0,
|
|
76
|
+
alignment: align || "left",
|
|
77
|
+
key: id,
|
|
78
|
+
colSpan,
|
|
79
|
+
width,
|
|
80
|
+
"data-qa-table-cell": "",
|
|
81
|
+
color
|
|
82
|
+
},
|
|
83
|
+
children || content
|
|
84
|
+
);
|
|
85
|
+
}
|
|
86
|
+
};
|
|
87
|
+
var TableCell_default = TableCell;
|
|
88
|
+
|
|
89
|
+
// src/TableCell/TableCellTypes.ts
|
|
90
|
+
var React2 = require("react");
|
|
91
|
+
|
|
92
|
+
// src/TableCell/index.ts
|
|
93
|
+
var TableCell_default2 = TableCell_default;
|
|
94
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
95
|
+
0 && (module.exports = {
|
|
96
|
+
TableCell
|
|
97
|
+
});
|
|
98
|
+
//# sourceMappingURL=tableCell.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/TableCell/index.ts","../src/TableCell/TableCell.tsx","../src/TableCell/styles.ts","../src/TableCell/TableCellTypes.ts"],"sourcesContent":["import TableCell from \"./TableCell\";\n\nexport default TableCell;\nexport { TableCell };\nexport * from \"./TableCellTypes\";\n","import * as React from \"react\";\nimport Container from \"./styles\";\nimport type { TypeTableCellProps } from \"./TableCellTypes\";\n\n/**\n * The table cell component is for rendering table cells and is meant to be used with the table component.\n */\nexport class TableCell extends React.Component<TypeTableCellProps> {\n static displayName: string;\n override render() {\n const {\n id,\n content,\n colSpan,\n width,\n align,\n scope,\n children,\n color,\n ...rest\n } = this.props;\n return (\n <Container\n {...rest}\n // If the `scope` property is passed we must render the element as a <th>\n as={scope ? \"th\" : \"td\"}\n scope={scope ? scope : undefined}\n alignment={align || \"left\"}\n key={id}\n colSpan={colSpan}\n width={width}\n data-qa-table-cell=\"\"\n // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n color={color}\n >\n {children || content}\n </Container>\n );\n }\n}\n\nexport default TableCell;\n","import styled from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeTableCellProps } from \"./TableCellTypes\";\n\nconst Container = styled.td<{\n alignment: TypeTableCellProps[\"align\"];\n}>`\n ${(props) => props.theme.typography[200]}\n font-weight: ${(props) => props.theme.fontWeights.normal};\n padding: ${(props) => props.theme.space[300]};\n text-align: ${(props) => props.alignment};\n\n ${COMMON}\n`;\n\nexport default Container;\n","import * as React from \"react\";\nimport type { TypeSystemCommonProps } from \"@sproutsocial/seeds-react-system-props\";\n\nexport interface TypeTableCellProps\n extends TypeSystemCommonProps,\n Omit<\n React.ComponentPropsWithoutRef<\"td\">,\n keyof TypeSystemCommonProps | \"content\"\n > {\n /** Table Cell Id */\n id: string;\n\n /** Content is deprecated. Please use children instead. Content to be render */\n content?: React.ReactNode;\n\n /** Controls the colSpan attribute (optional) */\n colSpan?: number;\n\n /** Controls the width attribute (optional) */\n width?: number;\n\n /** Controls the CSS text-align property (optional) */\n align?: \"left\" | \"right\" | \"center\" | \"justify\";\n\n /** Controls the scope attribute. If set, will change the element from a <td> to a <th>. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#scope (optional) */\n scope?: \"row\" | \"col\" | \"rowGroup\" | \"colGroup\";\n\n /** Children to be rendered */\n children?: React.ReactNode;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,iBAAAA;AAAA;AAAA;;;ACAA,YAAuB;;;ACAvB,+BAAmB;AACnB,sCAAuB;AAGvB,IAAM,YAAY,yBAAAC,QAAO;AAAA,IAGrB,CAAC,UAAU,MAAM,MAAM,WAAW,GAAG,CAAC;AAAA,iBACzB,CAAC,UAAU,MAAM,MAAM,YAAY,MAAM;AAAA,aAC7C,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,gBAC9B,CAAC,UAAU,MAAM,SAAS;AAAA;AAAA,IAEtC,sCAAM;AAAA;AAGV,IAAO,iBAAQ;;;ADOT;AAfC,IAAM,YAAN,cAA8B,gBAA8B;AAAA,EACjE,OAAO;AAAA,EACE,SAAS;AAChB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI,KAAK;AACT,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QAEJ,IAAI,QAAQ,OAAO;AAAA,QACnB,OAAO,QAAQ,QAAQ;AAAA,QACvB,WAAW,SAAS;AAAA,QACpB,KAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA,sBAAmB;AAAA,QAInB;AAAA;AAAA,MAEC,YAAY;AAAA,IACf;AAAA,EAEJ;AACF;AAEA,IAAO,oBAAQ;;;AE3Cf,IAAAC,SAAuB;;;AHEvB,IAAOC,qBAAQ;","names":["TableCell_default","styled","React","TableCell_default"]}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { T as TableHeaderCell } from './TableHeaderCell-DsJpGb2j.mjs';
|
|
2
|
+
export { S as SORT_DIRECTIONS, T as TypeEnumSortDirections, a as TypeTableHeaderCellProps } from './TableHeaderCellTypes-CsJQBwu2.mjs';
|
|
3
|
+
import 'react/jsx-runtime';
|
|
4
|
+
import 'react';
|
|
5
|
+
import './TableCellTypes-Cp-8r7l1.mjs';
|
|
6
|
+
import '@sproutsocial/seeds-react-system-props';
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
export { TableHeaderCell, TableHeaderCell as default };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { T as TableHeaderCell } from './TableHeaderCell-DnwlruQg.js';
|
|
2
|
+
export { S as SORT_DIRECTIONS, T as TypeEnumSortDirections, a as TypeTableHeaderCellProps } from './TableHeaderCellTypes-CH_zzW6X.js';
|
|
3
|
+
import 'react/jsx-runtime';
|
|
4
|
+
import 'react';
|
|
5
|
+
import './TableCellTypes-Cp-8r7l1.js';
|
|
6
|
+
import '@sproutsocial/seeds-react-system-props';
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
export { TableHeaderCell, TableHeaderCell as default };
|
|
@@ -0,0 +1,177 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
|
|
30
|
+
// src/TableHeaderCell/index.ts
|
|
31
|
+
var TableHeaderCell_exports = {};
|
|
32
|
+
__export(TableHeaderCell_exports, {
|
|
33
|
+
SORT_DIRECTIONS: () => SORT_DIRECTIONS,
|
|
34
|
+
TableHeaderCell: () => TableHeaderCell_default,
|
|
35
|
+
default: () => TableHeaderCell_default2
|
|
36
|
+
});
|
|
37
|
+
module.exports = __toCommonJS(TableHeaderCell_exports);
|
|
38
|
+
|
|
39
|
+
// src/TableHeaderCell/TableHeaderCell.tsx
|
|
40
|
+
var React = __toESM(require("react"));
|
|
41
|
+
var import_seeds_react_icon = __toESM(require("@sproutsocial/seeds-react-icon"));
|
|
42
|
+
|
|
43
|
+
// src/TableHeaderCell/styles.ts
|
|
44
|
+
var import_styled_components = __toESM(require("styled-components"));
|
|
45
|
+
var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
|
|
46
|
+
var Container = import_styled_components.default.th`
|
|
47
|
+
${(props) => props.theme.typography[100]}
|
|
48
|
+
font-weight: ${(props) => props.theme.fontWeights.semibold};
|
|
49
|
+
padding: ${(props) => props.theme.space[300]};
|
|
50
|
+
text-align: ${(props) => props.alignment};
|
|
51
|
+
|
|
52
|
+
${(props) => props.sortable && import_styled_components.css`
|
|
53
|
+
position: relative;
|
|
54
|
+
cursor: pointer;
|
|
55
|
+
`}
|
|
56
|
+
|
|
57
|
+
${import_seeds_react_system_props.COMMON}
|
|
58
|
+
`;
|
|
59
|
+
var SortIcon = import_styled_components.default.span`
|
|
60
|
+
position: absolute;
|
|
61
|
+
top: 50%;
|
|
62
|
+
transform: translateY(-50%);
|
|
63
|
+
font-size: 0;
|
|
64
|
+
padding: 0 ${(props) => props.theme.space[200]};
|
|
65
|
+
`;
|
|
66
|
+
var UnstyledButton = import_styled_components.default.button`
|
|
67
|
+
background: none;
|
|
68
|
+
border: none;
|
|
69
|
+
color: inherit;
|
|
70
|
+
font: inherit;
|
|
71
|
+
line-height: normal;
|
|
72
|
+
overflow: visible;
|
|
73
|
+
padding: 0;
|
|
74
|
+
-webkit-appearance: none;
|
|
75
|
+
-moz-appearance: none;
|
|
76
|
+
cursor: pointer;
|
|
77
|
+
`;
|
|
78
|
+
var styles_default = Container;
|
|
79
|
+
|
|
80
|
+
// src/TableHeaderCell/constants.ts
|
|
81
|
+
var SORT_DIRECTIONS = {
|
|
82
|
+
ASC: "ASC",
|
|
83
|
+
DESC: "DESC"
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
// src/TableHeaderCell/TableHeaderCell.tsx
|
|
87
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
88
|
+
var import_react = require("react");
|
|
89
|
+
var TableHeaderCell = class extends React.Component {
|
|
90
|
+
static displayName;
|
|
91
|
+
getSortIcon = (isSorted, ariaSortDirection) => {
|
|
92
|
+
const { sortDirection } = this.props;
|
|
93
|
+
let iconName = "caret-up-down-outline";
|
|
94
|
+
if (isSorted && sortDirection === SORT_DIRECTIONS.ASC) {
|
|
95
|
+
iconName = "caret-up-solid";
|
|
96
|
+
} else if (isSorted && sortDirection === SORT_DIRECTIONS.DESC) {
|
|
97
|
+
iconName = "caret-down-solid";
|
|
98
|
+
}
|
|
99
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SortIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_icon.default, { size: "mini", name: iconName, "aria-label": ariaSortDirection }) });
|
|
100
|
+
};
|
|
101
|
+
// @ts-note: If this is set to an HTMLButtonElement event, then the `Container` freaks out
|
|
102
|
+
handleClick = (e) => {
|
|
103
|
+
const { onClick, onSort, isSortable, id } = this.props;
|
|
104
|
+
if (onClick || isSortable) {
|
|
105
|
+
e.preventDefault();
|
|
106
|
+
}
|
|
107
|
+
if (onClick) {
|
|
108
|
+
onClick(e);
|
|
109
|
+
return;
|
|
110
|
+
}
|
|
111
|
+
if (!isSortable || !onSort)
|
|
112
|
+
return;
|
|
113
|
+
onSort(id);
|
|
114
|
+
};
|
|
115
|
+
render() {
|
|
116
|
+
const {
|
|
117
|
+
id,
|
|
118
|
+
content,
|
|
119
|
+
colSpan,
|
|
120
|
+
width,
|
|
121
|
+
align,
|
|
122
|
+
isSortable,
|
|
123
|
+
sortId,
|
|
124
|
+
sortDirection,
|
|
125
|
+
children,
|
|
126
|
+
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
127
|
+
shouldTruncate,
|
|
128
|
+
onSort,
|
|
129
|
+
onClick,
|
|
130
|
+
/* eslint-enable @typescript-eslint/no-unused-vars */
|
|
131
|
+
color,
|
|
132
|
+
...rest
|
|
133
|
+
} = this.props;
|
|
134
|
+
const isSorted = sortId === id;
|
|
135
|
+
const ariaSort = isSorted ? sortDirection === SORT_DIRECTIONS.ASC ? "ascending" : "descending" : void 0;
|
|
136
|
+
const buttonProps = isSortable ? {
|
|
137
|
+
role: "button",
|
|
138
|
+
onClick: this.handleClick
|
|
139
|
+
} : {};
|
|
140
|
+
const scope = colSpan ? "colgroup" : "col";
|
|
141
|
+
return /* @__PURE__ */ (0, import_react.createElement)(
|
|
142
|
+
styles_default,
|
|
143
|
+
{
|
|
144
|
+
...rest,
|
|
145
|
+
key: id,
|
|
146
|
+
alignment: align || "left",
|
|
147
|
+
sortable: isSortable,
|
|
148
|
+
colSpan,
|
|
149
|
+
scope,
|
|
150
|
+
width,
|
|
151
|
+
onClick: this.handleClick,
|
|
152
|
+
"data-tableheadercell-sortable": isSortable,
|
|
153
|
+
"data-qa-table-header-cell": "",
|
|
154
|
+
"data-qa-table-header-cell-sortdirection": sortDirection,
|
|
155
|
+
color,
|
|
156
|
+
"aria-sort": ariaSort
|
|
157
|
+
},
|
|
158
|
+
isSortable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UnstyledButton, { ...buttonProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { "aria-live": "polite", role: "status", children: [
|
|
159
|
+
children || content,
|
|
160
|
+
!children && this.getSortIcon(id === sortId, ariaSort)
|
|
161
|
+
] }) }) : children || content
|
|
162
|
+
);
|
|
163
|
+
}
|
|
164
|
+
};
|
|
165
|
+
var TableHeaderCell_default = TableHeaderCell;
|
|
166
|
+
|
|
167
|
+
// src/TableHeaderCell/TableHeaderCellTypes.ts
|
|
168
|
+
var React2 = require("react");
|
|
169
|
+
|
|
170
|
+
// src/TableHeaderCell/index.ts
|
|
171
|
+
var TableHeaderCell_default2 = TableHeaderCell_default;
|
|
172
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
173
|
+
0 && (module.exports = {
|
|
174
|
+
SORT_DIRECTIONS,
|
|
175
|
+
TableHeaderCell
|
|
176
|
+
});
|
|
177
|
+
//# sourceMappingURL=tableHeaderCell.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/TableHeaderCell/index.ts","../src/TableHeaderCell/TableHeaderCell.tsx","../src/TableHeaderCell/styles.ts","../src/TableHeaderCell/constants.ts","../src/TableHeaderCell/TableHeaderCellTypes.ts"],"sourcesContent":["import TableHeaderCell from \"./TableHeaderCell\";\n\nexport default TableHeaderCell;\nexport { TableHeaderCell };\nexport * from \"./TableHeaderCellTypes\";\nexport * from \"./constants\";\n","import * as React from \"react\";\nimport Icon, { type TypeIconName } from \"@sproutsocial/seeds-react-icon\";\nimport Container, { SortIcon, UnstyledButton } from \"./styles\";\nimport { SORT_DIRECTIONS } from \"./constants\";\nimport type { TypeTableHeaderCellProps } from \"./TableHeaderCellTypes\";\n\nexport class TableHeaderCell extends React.Component<TypeTableHeaderCellProps> {\n static displayName: string;\n\n getSortIcon = (\n isSorted: boolean,\n ariaSortDirection: \"ascending\" | \"descending\" | undefined\n ) => {\n const { sortDirection } = this.props;\n let iconName: TypeIconName = \"caret-up-down-outline\";\n\n if (isSorted && sortDirection === SORT_DIRECTIONS.ASC) {\n iconName = \"caret-up-solid\";\n } else if (isSorted && sortDirection === SORT_DIRECTIONS.DESC) {\n iconName = \"caret-down-solid\";\n }\n\n return (\n <SortIcon>\n <Icon size=\"mini\" name={iconName} aria-label={ariaSortDirection} />\n </SortIcon>\n );\n };\n\n // @ts-note: If this is set to an HTMLButtonElement event, then the `Container` freaks out\n handleClick = (\n e: React.MouseEvent<HTMLTableCellElement | HTMLButtonElement>\n ) => {\n const { onClick, onSort, isSortable, id } = this.props;\n\n if (onClick || isSortable) {\n e.preventDefault();\n }\n\n if (onClick) {\n // @ts-note: Right now the `onClick` is incorrectly set to consume an HTMLButtonElement event\n onClick(e as unknown as React.MouseEvent<HTMLButtonElement>);\n return;\n }\n\n if (!isSortable || !onSort) return;\n onSort(id);\n };\n\n override render() {\n const {\n id,\n content,\n colSpan,\n width,\n align,\n isSortable,\n sortId,\n sortDirection,\n children,\n /* eslint-disable @typescript-eslint/no-unused-vars */\n shouldTruncate,\n onSort,\n onClick,\n /* eslint-enable @typescript-eslint/no-unused-vars */\n color,\n ...rest\n } = this.props;\n\n const isSorted = sortId === id;\n const ariaSort = isSorted\n ? sortDirection === SORT_DIRECTIONS.ASC\n ? \"ascending\"\n : \"descending\"\n : undefined;\n\n const buttonProps = isSortable\n ? {\n role: \"button\",\n onClick: this.handleClick,\n }\n : {};\n\n const scope = colSpan ? \"colgroup\" : \"col\";\n\n return (\n <Container\n {...rest}\n key={id}\n alignment={align || \"left\"}\n sortable={isSortable}\n colSpan={colSpan}\n scope={scope}\n width={width}\n onClick={this.handleClick}\n data-tableheadercell-sortable={isSortable}\n data-qa-table-header-cell=\"\"\n data-qa-table-header-cell-sortdirection={sortDirection}\n // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n color={color}\n aria-sort={ariaSort}\n >\n {isSortable ? (\n <UnstyledButton {...buttonProps}>\n <div aria-live=\"polite\" role=\"status\">\n {children || content}\n {!children && this.getSortIcon(id === sortId, ariaSort)}\n </div>\n </UnstyledButton>\n ) : (\n children || content\n )}\n </Container>\n );\n }\n}\n\nexport default TableHeaderCell;\n","import styled, { css } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeTableHeaderCellProps } from \"./TableHeaderCellTypes\";\n\nconst Container = styled.th<{\n sortable?: boolean;\n alignment: TypeTableHeaderCellProps[\"align\"];\n width: TypeTableHeaderCellProps[\"width\"];\n}>`\n ${(props) => props.theme.typography[100]}\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n padding: ${(props) => props.theme.space[300]};\n text-align: ${(props) => props.alignment};\n\n ${(props) =>\n props.sortable &&\n css`\n position: relative;\n cursor: pointer;\n `}\n\n ${COMMON}\n`;\n\nexport const SortIcon = styled.span`\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n font-size: 0;\n padding: 0 ${(props) => props.theme.space[200]};\n`;\n\nexport const UnstyledButton = styled.button`\n background: none;\n border: none;\n color: inherit;\n font: inherit;\n line-height: normal;\n overflow: visible;\n padding: 0;\n -webkit-appearance: none;\n -moz-appearance: none;\n cursor: pointer;\n`;\n\nexport default Container;\n","export const SORT_DIRECTIONS = {\n ASC: \"ASC\",\n DESC: \"DESC\",\n} as const;\n","import * as React from \"react\";\nimport type { TypeTableCellProps } from \"../TableCell/TableCellTypes\";\nimport { SORT_DIRECTIONS } from \"./constants\";\n\nexport type TypeEnumSortDirections = keyof typeof SORT_DIRECTIONS;\n\nexport interface TypeTableHeaderCellProps\n extends Omit<TypeTableCellProps, \"onClick\"> {\n /** Legacy Deteremines if a table column is sortable (optional) */\n isSortable?: boolean;\n\n /** Truncates text into a singular line with ellipsis (optional) */\n shouldTruncate?: boolean;\n\n /** Legacy: Callback for Sorting Table Columns (optional) */\n onSort?: (id: string) => void;\n\n /** Legacy: Controls which column is being sorted (optional) */\n sortId?: string;\n\n /** Legacy: Controls the current sort direction (optional) */\n sortDirection?: TypeEnumSortDirections;\n\n /** Callback for Click Events. If Included will override onSort prop */\n onClick?: (e: React.SyntheticEvent<HTMLButtonElement>) => void;\n}\n"],"mappings":"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","names":["TableHeaderCell_default","styled","Icon","React","TableHeaderCell_default"]}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { TypeSystemCommonProps } from '@sproutsocial/seeds-react-system-props';
|
|
4
|
+
import { b as TypeTableRow } from './TableTypes-jS0O3bwQ.mjs';
|
|
5
|
+
import './TableHeaderCellTypes-CsJQBwu2.mjs';
|
|
6
|
+
import './TableCellTypes-Cp-8r7l1.mjs';
|
|
7
|
+
|
|
8
|
+
interface TypeTableRowAccordionProps extends TypeTableRow, TypeSystemCommonProps, Omit<React.ComponentPropsWithoutRef<"tbody">, keyof TypeTableRow | keyof TypeSystemCommonProps> {
|
|
9
|
+
/** Content to be rendered in accordion drawer */
|
|
10
|
+
detail: React.ReactNode;
|
|
11
|
+
/** Controls the display state of the accordion drawer */
|
|
12
|
+
isExpanded: boolean;
|
|
13
|
+
/** Callback for toggling the accordion drawer state */
|
|
14
|
+
onToggle: (id: string) => void;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
/**
|
|
18
|
+
* The table row accordion component allows for rendering a row of tabular data along with a addtional content to be rendered inside of an accordion drawer. This component is meant to be used with the table components rowRender mentod.
|
|
19
|
+
*/
|
|
20
|
+
declare class TableRowAccordion extends React.Component<TypeTableRowAccordionProps> {
|
|
21
|
+
handleToggle: React.MouseEventHandler<HTMLTableRowElement>;
|
|
22
|
+
render(): react_jsx_runtime.JSX.Element;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
export { TableRowAccordion, type TypeTableRowAccordionProps, TableRowAccordion as default };
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { TypeSystemCommonProps } from '@sproutsocial/seeds-react-system-props';
|
|
4
|
+
import { b as TypeTableRow } from './TableTypes-Dg7QrcGt.js';
|
|
5
|
+
import './TableHeaderCellTypes-CH_zzW6X.js';
|
|
6
|
+
import './TableCellTypes-Cp-8r7l1.js';
|
|
7
|
+
|
|
8
|
+
interface TypeTableRowAccordionProps extends TypeTableRow, TypeSystemCommonProps, Omit<React.ComponentPropsWithoutRef<"tbody">, keyof TypeTableRow | keyof TypeSystemCommonProps> {
|
|
9
|
+
/** Content to be rendered in accordion drawer */
|
|
10
|
+
detail: React.ReactNode;
|
|
11
|
+
/** Controls the display state of the accordion drawer */
|
|
12
|
+
isExpanded: boolean;
|
|
13
|
+
/** Callback for toggling the accordion drawer state */
|
|
14
|
+
onToggle: (id: string) => void;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
/**
|
|
18
|
+
* The table row accordion component allows for rendering a row of tabular data along with a addtional content to be rendered inside of an accordion drawer. This component is meant to be used with the table components rowRender mentod.
|
|
19
|
+
*/
|
|
20
|
+
declare class TableRowAccordion extends React.Component<TypeTableRowAccordionProps> {
|
|
21
|
+
handleToggle: React.MouseEventHandler<HTMLTableRowElement>;
|
|
22
|
+
render(): react_jsx_runtime.JSX.Element;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
export { TableRowAccordion, type TypeTableRowAccordionProps, TableRowAccordion as default };
|
|
@@ -0,0 +1,200 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
|
|
30
|
+
// src/TableRowAccordion/index.ts
|
|
31
|
+
var TableRowAccordion_exports = {};
|
|
32
|
+
__export(TableRowAccordion_exports, {
|
|
33
|
+
TableRowAccordion: () => TableRowAccordion,
|
|
34
|
+
default: () => TableRowAccordion_default
|
|
35
|
+
});
|
|
36
|
+
module.exports = __toCommonJS(TableRowAccordion_exports);
|
|
37
|
+
|
|
38
|
+
// src/TableRowAccordion/TableRowAccordion.tsx
|
|
39
|
+
var React3 = __toESM(require("react"));
|
|
40
|
+
var import_seeds_react_icon = __toESM(require("@sproutsocial/seeds-react-icon"));
|
|
41
|
+
|
|
42
|
+
// src/TableCell/TableCell.tsx
|
|
43
|
+
var React = __toESM(require("react"));
|
|
44
|
+
|
|
45
|
+
// src/TableCell/styles.ts
|
|
46
|
+
var import_styled_components = __toESM(require("styled-components"));
|
|
47
|
+
var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
|
|
48
|
+
var Container = import_styled_components.default.td`
|
|
49
|
+
${(props) => props.theme.typography[200]}
|
|
50
|
+
font-weight: ${(props) => props.theme.fontWeights.normal};
|
|
51
|
+
padding: ${(props) => props.theme.space[300]};
|
|
52
|
+
text-align: ${(props) => props.alignment};
|
|
53
|
+
|
|
54
|
+
${import_seeds_react_system_props.COMMON}
|
|
55
|
+
`;
|
|
56
|
+
var styles_default = Container;
|
|
57
|
+
|
|
58
|
+
// src/TableCell/TableCell.tsx
|
|
59
|
+
var import_react = require("react");
|
|
60
|
+
var TableCell = class extends React.Component {
|
|
61
|
+
static displayName;
|
|
62
|
+
render() {
|
|
63
|
+
const {
|
|
64
|
+
id,
|
|
65
|
+
content,
|
|
66
|
+
colSpan,
|
|
67
|
+
width,
|
|
68
|
+
align,
|
|
69
|
+
scope,
|
|
70
|
+
children,
|
|
71
|
+
color,
|
|
72
|
+
...rest
|
|
73
|
+
} = this.props;
|
|
74
|
+
return /* @__PURE__ */ (0, import_react.createElement)(
|
|
75
|
+
styles_default,
|
|
76
|
+
{
|
|
77
|
+
...rest,
|
|
78
|
+
as: scope ? "th" : "td",
|
|
79
|
+
scope: scope ? scope : void 0,
|
|
80
|
+
alignment: align || "left",
|
|
81
|
+
key: id,
|
|
82
|
+
colSpan,
|
|
83
|
+
width,
|
|
84
|
+
"data-qa-table-cell": "",
|
|
85
|
+
color
|
|
86
|
+
},
|
|
87
|
+
children || content
|
|
88
|
+
);
|
|
89
|
+
}
|
|
90
|
+
};
|
|
91
|
+
var TableCell_default = TableCell;
|
|
92
|
+
|
|
93
|
+
// src/TableCell/TableCellTypes.ts
|
|
94
|
+
var React2 = require("react");
|
|
95
|
+
|
|
96
|
+
// src/TableCell/index.ts
|
|
97
|
+
var TableCell_default2 = TableCell_default;
|
|
98
|
+
|
|
99
|
+
// src/TableRowAccordion/styles.ts
|
|
100
|
+
var import_styled_components2 = __toESM(require("styled-components"));
|
|
101
|
+
var import_seeds_react_system_props2 = require("@sproutsocial/seeds-react-system-props");
|
|
102
|
+
var Container2 = import_styled_components2.default.tbody`
|
|
103
|
+
border-bottom: 1px solid
|
|
104
|
+
${(props) => props.theme.colors.container.border.base};
|
|
105
|
+
|
|
106
|
+
${import_seeds_react_system_props2.COMMON}
|
|
107
|
+
`;
|
|
108
|
+
var Detail = import_styled_components2.default.tr`
|
|
109
|
+
display: none;
|
|
110
|
+
|
|
111
|
+
${(props) => props.isExpanded && import_styled_components2.css`
|
|
112
|
+
display: table-row;
|
|
113
|
+
`}
|
|
114
|
+
`;
|
|
115
|
+
var Trigger = import_styled_components2.default.div`
|
|
116
|
+
cursor: pointer;
|
|
117
|
+
`;
|
|
118
|
+
var styles_default2 = Container2;
|
|
119
|
+
|
|
120
|
+
// src/TableRowAccordion/TableRowAccordion.tsx
|
|
121
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
122
|
+
var import_react2 = require("react");
|
|
123
|
+
var TableRowAccordion = class extends React3.Component {
|
|
124
|
+
handleToggle = (e) => {
|
|
125
|
+
const { onToggle, id } = this.props;
|
|
126
|
+
e.stopPropagation();
|
|
127
|
+
if (onToggle) {
|
|
128
|
+
onToggle(id);
|
|
129
|
+
}
|
|
130
|
+
};
|
|
131
|
+
render() {
|
|
132
|
+
const {
|
|
133
|
+
id,
|
|
134
|
+
cells,
|
|
135
|
+
detail,
|
|
136
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
137
|
+
onToggle,
|
|
138
|
+
isExpanded,
|
|
139
|
+
color,
|
|
140
|
+
...rest
|
|
141
|
+
} = this.props;
|
|
142
|
+
return /* @__PURE__ */ (0, import_react2.createElement)(
|
|
143
|
+
styles_default2,
|
|
144
|
+
{
|
|
145
|
+
...rest,
|
|
146
|
+
"data-qa-table-row-accordion": isExpanded,
|
|
147
|
+
key: id,
|
|
148
|
+
color
|
|
149
|
+
},
|
|
150
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { "data-tablerowaccordion-summary": true, onClick: this.handleToggle, children: [
|
|
151
|
+
cells.map((td) => {
|
|
152
|
+
return /* @__PURE__ */ (0, import_react2.createElement)(TableCell_default2, { ...td, key: td.id });
|
|
153
|
+
}),
|
|
154
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
155
|
+
TableCell_default2,
|
|
156
|
+
{
|
|
157
|
+
id: "tableRowAccordion_trigger",
|
|
158
|
+
content: (
|
|
159
|
+
// TODO: This trigger needs an accessible label passed in via props
|
|
160
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
161
|
+
Trigger,
|
|
162
|
+
{
|
|
163
|
+
"data-tablerowaccordion-trigger": true,
|
|
164
|
+
onClick: this.handleToggle,
|
|
165
|
+
role: "button",
|
|
166
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
167
|
+
import_seeds_react_icon.default,
|
|
168
|
+
{
|
|
169
|
+
name: isExpanded ? "chevron-up-outline" : "chevron-down-outline",
|
|
170
|
+
"aria-hidden": true
|
|
171
|
+
}
|
|
172
|
+
)
|
|
173
|
+
}
|
|
174
|
+
)
|
|
175
|
+
)
|
|
176
|
+
}
|
|
177
|
+
)
|
|
178
|
+
] }),
|
|
179
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Detail, { isExpanded, "data-tablerowaccordion-detail": true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
180
|
+
TableCell_default2,
|
|
181
|
+
{
|
|
182
|
+
id: "tableRowAccordion_detail",
|
|
183
|
+
colSpan: 100,
|
|
184
|
+
content: detail
|
|
185
|
+
}
|
|
186
|
+
) })
|
|
187
|
+
);
|
|
188
|
+
}
|
|
189
|
+
};
|
|
190
|
+
|
|
191
|
+
// src/TableRowAccordion/TableRowAccordionTypes.ts
|
|
192
|
+
var React4 = require("react");
|
|
193
|
+
|
|
194
|
+
// src/TableRowAccordion/index.ts
|
|
195
|
+
var TableRowAccordion_default = TableRowAccordion;
|
|
196
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
197
|
+
0 && (module.exports = {
|
|
198
|
+
TableRowAccordion
|
|
199
|
+
});
|
|
200
|
+
//# sourceMappingURL=tableRowAccordion.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/TableRowAccordion/index.ts","../src/TableRowAccordion/TableRowAccordion.tsx","../src/TableCell/TableCell.tsx","../src/TableCell/styles.ts","../src/TableCell/TableCellTypes.ts","../src/TableCell/index.ts","../src/TableRowAccordion/styles.ts","../src/TableRowAccordion/TableRowAccordionTypes.ts"],"sourcesContent":["import TableRowAccordion from \"./TableRowAccordion\";\n\nexport default TableRowAccordion;\nexport { TableRowAccordion };\nexport * from \"./TableRowAccordionTypes\";\n","import * as React from \"react\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport TableCell from \"../TableCell\";\nimport Container, { Detail, Trigger } from \"./styles\";\nimport type { TypeTableRowAccordionProps } from \"./TableRowAccordionTypes\";\n\n/**\n * The table row accordion component allows for rendering a row of tabular data along with a addtional content to be rendered inside of an accordion drawer. This component is meant to be used with the table components rowRender mentod.\n */\nexport default class TableRowAccordion extends React.Component<TypeTableRowAccordionProps> {\n handleToggle: React.MouseEventHandler<HTMLTableRowElement> = (e) => {\n const { onToggle, id } = this.props;\n e.stopPropagation();\n\n if (onToggle) {\n onToggle(id);\n }\n };\n\n override render() {\n const {\n id,\n cells,\n detail,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n onToggle,\n isExpanded,\n color,\n ...rest\n } = this.props;\n\n return (\n <Container\n {...rest}\n data-qa-table-row-accordion={isExpanded}\n key={id}\n // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n color={color}\n >\n <tr data-tablerowaccordion-summary onClick={this.handleToggle}>\n {cells.map((td) => {\n return <TableCell {...td} key={td.id} />;\n })}\n <TableCell\n id=\"tableRowAccordion_trigger\"\n content={\n // TODO: This trigger needs an accessible label passed in via props\n <Trigger\n data-tablerowaccordion-trigger\n onClick={this.handleToggle}\n role=\"button\"\n >\n <Icon\n name={\n isExpanded ? \"chevron-up-outline\" : \"chevron-down-outline\"\n }\n aria-hidden\n />\n </Trigger>\n }\n />\n </tr>\n <Detail isExpanded={isExpanded} data-tablerowaccordion-detail>\n <TableCell\n id=\"tableRowAccordion_detail\"\n colSpan={100}\n content={detail}\n />\n </Detail>\n </Container>\n );\n }\n}\n","import * as React from \"react\";\nimport Container from \"./styles\";\nimport type { TypeTableCellProps } from \"./TableCellTypes\";\n\n/**\n * The table cell component is for rendering table cells and is meant to be used with the table component.\n */\nexport class TableCell extends React.Component<TypeTableCellProps> {\n static displayName: string;\n override render() {\n const {\n id,\n content,\n colSpan,\n width,\n align,\n scope,\n children,\n color,\n ...rest\n } = this.props;\n return (\n <Container\n {...rest}\n // If the `scope` property is passed we must render the element as a <th>\n as={scope ? \"th\" : \"td\"}\n scope={scope ? scope : undefined}\n alignment={align || \"left\"}\n key={id}\n colSpan={colSpan}\n width={width}\n data-qa-table-cell=\"\"\n // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n color={color}\n >\n {children || content}\n </Container>\n );\n }\n}\n\nexport default TableCell;\n","import styled from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeTableCellProps } from \"./TableCellTypes\";\n\nconst Container = styled.td<{\n alignment: TypeTableCellProps[\"align\"];\n}>`\n ${(props) => props.theme.typography[200]}\n font-weight: ${(props) => props.theme.fontWeights.normal};\n padding: ${(props) => props.theme.space[300]};\n text-align: ${(props) => props.alignment};\n\n ${COMMON}\n`;\n\nexport default Container;\n","import * as React from \"react\";\nimport type { TypeSystemCommonProps } from \"@sproutsocial/seeds-react-system-props\";\n\nexport interface TypeTableCellProps\n extends TypeSystemCommonProps,\n Omit<\n React.ComponentPropsWithoutRef<\"td\">,\n keyof TypeSystemCommonProps | \"content\"\n > {\n /** Table Cell Id */\n id: string;\n\n /** Content is deprecated. Please use children instead. Content to be render */\n content?: React.ReactNode;\n\n /** Controls the colSpan attribute (optional) */\n colSpan?: number;\n\n /** Controls the width attribute (optional) */\n width?: number;\n\n /** Controls the CSS text-align property (optional) */\n align?: \"left\" | \"right\" | \"center\" | \"justify\";\n\n /** Controls the scope attribute. If set, will change the element from a <td> to a <th>. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#scope (optional) */\n scope?: \"row\" | \"col\" | \"rowGroup\" | \"colGroup\";\n\n /** Children to be rendered */\n children?: React.ReactNode;\n}\n","import TableCell from \"./TableCell\";\n\nexport default TableCell;\nexport { TableCell };\nexport * from \"./TableCellTypes\";\n","import styled, { css } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\n\nconst Container = styled.tbody`\n border-bottom: 1px solid\n ${(props) => props.theme.colors.container.border.base};\n\n ${COMMON}\n`;\n\nexport const Detail = styled.tr<{ isExpanded: boolean }>`\n display: none;\n\n ${(props) =>\n props.isExpanded &&\n css`\n display: table-row;\n `}\n`;\n\nexport const Trigger = styled.div`\n cursor: pointer;\n`;\n\nexport default Container;\n","import * as React from \"react\";\nimport type { TypeSystemCommonProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeTableRow } from \"../TableTypes\";\n\nexport interface TypeTableRowAccordionProps\n extends TypeTableRow,\n TypeSystemCommonProps,\n Omit<\n React.ComponentPropsWithoutRef<\"tbody\">,\n keyof TypeTableRow | keyof TypeSystemCommonProps\n > {\n /** Content to be rendered in accordion drawer */\n detail: React.ReactNode;\n\n /** Controls the display state of the accordion drawer */\n isExpanded: boolean;\n\n /** Callback for toggling the accordion drawer state */\n onToggle: (id: string) => void;\n}\n"],"mappings":"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","names":["React","styled","React","TableCell_default","import_styled_components","import_seeds_react_system_props","Container","styled","styles_default","import_react","styles_default","TableCell_default","Icon","React"]}
|