@sproutsocial/seeds-react-table 1.0.0 → 1.0.2
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/.turbo/turbo-build.log +51 -51
- package/CHANGELOG.md +18 -0
- package/dist/esm/{chunk-67DCEN4G.js → chunk-SMHAMHIP.js} +2 -3
- package/dist/esm/{chunk-67DCEN4G.js.map → chunk-SMHAMHIP.js.map} +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/tableHeaderCell.js +1 -1
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -2
- package/dist/index.js.map +1 -1
- package/dist/tableHeaderCell.js +1 -2
- package/dist/tableHeaderCell.js.map +1 -1
- package/package.json +13 -13
- package/src/Table.tsx +1 -1
- package/tsconfig.json +7 -1
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,53 +1,53 @@
|
|
|
1
1
|
yarn run v1.22.22
|
|
2
2
|
$ tsup --dts
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
Done in
|
|
3
|
+
[34mCLI[39m Building entry: {"index":"src/index.ts","tableCell":"src/TableCell/index.ts","tableHeaderCell":"src/TableHeaderCell/index.ts","tableRowAccordion":"src/TableRowAccordion/index.ts"}
|
|
4
|
+
[34mCLI[39m Using tsconfig: tsconfig.json
|
|
5
|
+
[34mCLI[39m tsup v8.5.0
|
|
6
|
+
[34mCLI[39m Using tsup config: /home/runner/work/seeds/seeds/seeds-react/seeds-react-table/tsup.config.ts
|
|
7
|
+
[34mCLI[39m Target: es2022
|
|
8
|
+
[34mCLI[39m Cleaning output folder
|
|
9
|
+
[34mCJS[39m Build start
|
|
10
|
+
[34mESM[39m Build start
|
|
11
|
+
[32mCJS[39m [1mdist/index.js [22m[32m10.33 KB[39m
|
|
12
|
+
[32mCJS[39m [1mdist/tableCell.js [22m[32m3.10 KB[39m
|
|
13
|
+
[32mCJS[39m [1mdist/tableHeaderCell.js [22m[32m5.96 KB[39m
|
|
14
|
+
[32mCJS[39m [1mdist/tableRowAccordion.js [22m[32m6.36 KB[39m
|
|
15
|
+
[32mCJS[39m [1mdist/index.js.map [22m[32m18.90 KB[39m
|
|
16
|
+
[32mCJS[39m [1mdist/tableCell.js.map [22m[32m3.88 KB[39m
|
|
17
|
+
[32mCJS[39m [1mdist/tableHeaderCell.js.map [22m[32m8.11 KB[39m
|
|
18
|
+
[32mCJS[39m [1mdist/tableRowAccordion.js.map [22m[32m9.26 KB[39m
|
|
19
|
+
[32mCJS[39m ⚡️ Build success in 321ms
|
|
20
|
+
[32mESM[39m [1mdist/esm/index.js [22m[32m2.92 KB[39m
|
|
21
|
+
[32mESM[39m [1mdist/esm/tableCell.js [22m[32m196.00 B[39m
|
|
22
|
+
[32mESM[39m [1mdist/esm/tableHeaderCell.js [22m[32m270.00 B[39m
|
|
23
|
+
[32mESM[39m [1mdist/esm/chunk-SMHAMHIP.js [22m[32m3.89 KB[39m
|
|
24
|
+
[32mESM[39m [1mdist/esm/tableRowAccordion.js [22m[32m2.93 KB[39m
|
|
25
|
+
[32mESM[39m [1mdist/esm/chunk-XJMS6762.js [22m[32m1.34 KB[39m
|
|
26
|
+
[32mESM[39m [1mdist/esm/index.js.map [22m[32m6.74 KB[39m
|
|
27
|
+
[32mESM[39m [1mdist/esm/chunk-SMHAMHIP.js.map [22m[32m8.00 KB[39m
|
|
28
|
+
[32mESM[39m [1mdist/esm/tableRowAccordion.js.map [22m[32m5.25 KB[39m
|
|
29
|
+
[32mESM[39m [1mdist/esm/chunk-XJMS6762.js.map [22m[32m3.79 KB[39m
|
|
30
|
+
[32mESM[39m [1mdist/esm/tableCell.js.map [22m[32m71.00 B[39m
|
|
31
|
+
[32mESM[39m [1mdist/esm/tableHeaderCell.js.map [22m[32m71.00 B[39m
|
|
32
|
+
[32mESM[39m ⚡️ Build success in 337ms
|
|
33
|
+
[34mDTS[39m Build start
|
|
34
|
+
[32mDTS[39m ⚡️ Build success in 107218ms
|
|
35
|
+
[32mDTS[39m [1mdist/index.d.ts [22m[32m1.27 KB[39m
|
|
36
|
+
[32mDTS[39m [1mdist/tableCell.d.ts [22m[32m270.00 B[39m
|
|
37
|
+
[32mDTS[39m [1mdist/tableHeaderCell.d.ts [22m[32m396.00 B[39m
|
|
38
|
+
[32mDTS[39m [1mdist/tableRowAccordion.d.ts [22m[32m1.27 KB[39m
|
|
39
|
+
[32mDTS[39m [1mdist/TableCell-CN71R1B5.d.ts [22m[32m453.00 B[39m
|
|
40
|
+
[32mDTS[39m [1mdist/TableHeaderCell-DnwlruQg.d.ts [22m[32m588.00 B[39m
|
|
41
|
+
[32mDTS[39m [1mdist/TableTypes-Dg7QrcGt.d.ts [22m[32m1.55 KB[39m
|
|
42
|
+
[32mDTS[39m [1mdist/TableHeaderCellTypes-CH_zzW6X.d.ts [22m[32m1.06 KB[39m
|
|
43
|
+
[32mDTS[39m [1mdist/TableCellTypes-Cp-8r7l1.d.ts [22m[32m1013.00 B[39m
|
|
44
|
+
[32mDTS[39m [1mdist/index.d.mts [22m[32m1.28 KB[39m
|
|
45
|
+
[32mDTS[39m [1mdist/tableCell.d.mts [22m[32m272.00 B[39m
|
|
46
|
+
[32mDTS[39m [1mdist/tableHeaderCell.d.mts [22m[32m399.00 B[39m
|
|
47
|
+
[32mDTS[39m [1mdist/tableRowAccordion.d.mts [22m[32m1.27 KB[39m
|
|
48
|
+
[32mDTS[39m [1mdist/TableCell-B8GMRlv7.d.mts [22m[32m454.00 B[39m
|
|
49
|
+
[32mDTS[39m [1mdist/TableHeaderCell-DsJpGb2j.d.mts [22m[32m589.00 B[39m
|
|
50
|
+
[32mDTS[39m [1mdist/TableTypes-jS0O3bwQ.d.mts [22m[32m1.55 KB[39m
|
|
51
|
+
[32mDTS[39m [1mdist/TableHeaderCellTypes-CsJQBwu2.d.mts [22m[32m1.06 KB[39m
|
|
52
|
+
[32mDTS[39m [1mdist/TableCellTypes-Cp-8r7l1.d.mts [22m[32m1013.00 B[39m
|
|
53
|
+
Done in 114.20s.
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# @sproutsocial/seeds-react-table
|
|
2
2
|
|
|
3
|
+
## 1.0.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [22e1111]
|
|
8
|
+
- @sproutsocial/seeds-react-theme@3.0.1
|
|
9
|
+
- @sproutsocial/seeds-react-icon@1.1.3
|
|
10
|
+
|
|
11
|
+
## 1.0.1
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- 9fd8bac: Update dependencies to use semantic package version instead of wildcards
|
|
16
|
+
- Updated dependencies [9fd8bac]
|
|
17
|
+
- @sproutsocial/seeds-react-system-props@3.0.2
|
|
18
|
+
- @sproutsocial/seeds-react-theme@2.2.1
|
|
19
|
+
- @sproutsocial/seeds-react-icon@1.1.2
|
|
20
|
+
|
|
3
21
|
## 1.0.0
|
|
4
22
|
|
|
5
23
|
### Major Changes
|
|
@@ -70,8 +70,7 @@ var TableHeaderCell = class extends React.Component {
|
|
|
70
70
|
onClick(e);
|
|
71
71
|
return;
|
|
72
72
|
}
|
|
73
|
-
if (!isSortable || !onSort)
|
|
74
|
-
return;
|
|
73
|
+
if (!isSortable || !onSort) return;
|
|
75
74
|
onSort(id);
|
|
76
75
|
};
|
|
77
76
|
render() {
|
|
@@ -137,4 +136,4 @@ export {
|
|
|
137
136
|
TableHeaderCell_default,
|
|
138
137
|
TableHeaderCell_default2
|
|
139
138
|
};
|
|
140
|
-
//# sourceMappingURL=chunk-
|
|
139
|
+
//# sourceMappingURL=chunk-SMHAMHIP.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/TableHeaderCell/TableHeaderCell.tsx","../../src/TableHeaderCell/styles.ts","../../src/TableHeaderCell/constants.ts","../../src/TableHeaderCell/TableHeaderCellTypes.ts","../../src/TableHeaderCell/index.ts"],"sourcesContent":["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","import TableHeaderCell from \"./TableHeaderCell\";\n\nexport default TableHeaderCell;\nexport { TableHeaderCell };\nexport * from \"./TableHeaderCellTypes\";\nexport * from \"./constants\";\n"],"mappings":";AAAA,YAAY,WAAW;AACvB,OAAO,UAAiC;;;ACDxC,OAAO,UAAU,WAAW;AAC5B,SAAS,cAAc;AAGvB,IAAM,YAAY,OAAO;AAAA,IAKrB,CAAC,UAAU,MAAM,MAAM,WAAW,GAAG,CAAC;AAAA,iBACzB,CAAC,UAAU,MAAM,MAAM,YAAY,QAAQ;AAAA,aAC/C,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,gBAC9B,CAAC,UAAU,MAAM,SAAS;AAAA;AAAA,IAEtC,CAAC,UACD,MAAM,YACN;AAAA;AAAA;AAAA,KAGC;AAAA;AAAA,IAED,MAAM;AAAA;AAGH,IAAM,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,eAKhB,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAGzC,IAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAarC,IAAO,iBAAQ;;;AC7CR,IAAM,kBAAkB;AAAA,EAC7B,KAAK;AAAA,EACL,MAAM;AACR;;;AFqBQ,cAkFI,YAlFJ;AA8DF;AAhFC,IAAM,kBAAN,cAAoC,gBAAoC;AAAA,EAC7E,OAAO;AAAA,EAEP,cAAc,CACZ,UACA,sBACG;AACH,UAAM,EAAE,cAAc,IAAI,KAAK;AAC/B,QAAI,WAAyB;AAE7B,QAAI,YAAY,kBAAkB,gBAAgB,KAAK;AACrD,iBAAW;AAAA,IACb,WAAW,YAAY,kBAAkB,gBAAgB,MAAM;AAC7D,iBAAW;AAAA,IACb;AAEA,WACE,oBAAC,YACC,8BAAC,QAAK,MAAK,QAAO,MAAM,UAAU,cAAY,mBAAmB,GACnE;AAAA,EAEJ;AAAA;AAAA,EAGA,cAAc,CACZ,MACG;AACH,UAAM,EAAE,SAAS,QAAQ,YAAY,GAAG,IAAI,KAAK;AAEjD,QAAI,WAAW,YAAY;AACzB,QAAE,eAAe;AAAA,IACnB;AAEA,QAAI,SAAS;AAEX,cAAQ,CAAmD;AAC3D;AAAA,IACF;AAEA,QAAI,CAAC,cAAc,CAAC;
|
|
1
|
+
{"version":3,"sources":["../../src/TableHeaderCell/TableHeaderCell.tsx","../../src/TableHeaderCell/styles.ts","../../src/TableHeaderCell/constants.ts","../../src/TableHeaderCell/TableHeaderCellTypes.ts","../../src/TableHeaderCell/index.ts"],"sourcesContent":["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","import TableHeaderCell from \"./TableHeaderCell\";\n\nexport default TableHeaderCell;\nexport { TableHeaderCell };\nexport * from \"./TableHeaderCellTypes\";\nexport * from \"./constants\";\n"],"mappings":";AAAA,YAAY,WAAW;AACvB,OAAO,UAAiC;;;ACDxC,OAAO,UAAU,WAAW;AAC5B,SAAS,cAAc;AAGvB,IAAM,YAAY,OAAO;AAAA,IAKrB,CAAC,UAAU,MAAM,MAAM,WAAW,GAAG,CAAC;AAAA,iBACzB,CAAC,UAAU,MAAM,MAAM,YAAY,QAAQ;AAAA,aAC/C,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,gBAC9B,CAAC,UAAU,MAAM,SAAS;AAAA;AAAA,IAEtC,CAAC,UACD,MAAM,YACN;AAAA;AAAA;AAAA,KAGC;AAAA;AAAA,IAED,MAAM;AAAA;AAGH,IAAM,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,eAKhB,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAGzC,IAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAarC,IAAO,iBAAQ;;;AC7CR,IAAM,kBAAkB;AAAA,EAC7B,KAAK;AAAA,EACL,MAAM;AACR;;;AFqBQ,cAkFI,YAlFJ;AA8DF;AAhFC,IAAM,kBAAN,cAAoC,gBAAoC;AAAA,EAC7E,OAAO;AAAA,EAEP,cAAc,CACZ,UACA,sBACG;AACH,UAAM,EAAE,cAAc,IAAI,KAAK;AAC/B,QAAI,WAAyB;AAE7B,QAAI,YAAY,kBAAkB,gBAAgB,KAAK;AACrD,iBAAW;AAAA,IACb,WAAW,YAAY,kBAAkB,gBAAgB,MAAM;AAC7D,iBAAW;AAAA,IACb;AAEA,WACE,oBAAC,YACC,8BAAC,QAAK,MAAK,QAAO,MAAM,UAAU,cAAY,mBAAmB,GACnE;AAAA,EAEJ;AAAA;AAAA,EAGA,cAAc,CACZ,MACG;AACH,UAAM,EAAE,SAAS,QAAQ,YAAY,GAAG,IAAI,KAAK;AAEjD,QAAI,WAAW,YAAY;AACzB,QAAE,eAAe;AAAA,IACnB;AAEA,QAAI,SAAS;AAEX,cAAQ,CAAmD;AAC3D;AAAA,IACF;AAEA,QAAI,CAAC,cAAc,CAAC,OAAQ;AAC5B,WAAO,EAAE;AAAA,EACX;AAAA,EAES,SAAS;AAChB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MAEA;AAAA,MACA,GAAG;AAAA,IACL,IAAI,KAAK;AAET,UAAM,WAAW,WAAW;AAC5B,UAAM,WAAW,WACb,kBAAkB,gBAAgB,MAChC,cACA,eACF;AAEJ,UAAM,cAAc,aAChB;AAAA,MACE,MAAM;AAAA,MACN,SAAS,KAAK;AAAA,IAChB,IACA,CAAC;AAEL,UAAM,QAAQ,UAAU,aAAa;AAErC,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,WAAW,SAAS;AAAA,QACpB,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA,SAAS,KAAK;AAAA,QACd,iCAA+B;AAAA,QAC/B,6BAA0B;AAAA,QAC1B,2CAAyC;AAAA,QAIzC;AAAA,QACA,aAAW;AAAA;AAAA,MAEV,aACC,oBAAC,kBAAgB,GAAG,aAClB,+BAAC,SAAI,aAAU,UAAS,MAAK,UAC1B;AAAA,oBAAY;AAAA,QACZ,CAAC,YAAY,KAAK,YAAY,OAAO,QAAQ,QAAQ;AAAA,SACxD,GACF,IAEA,YAAY;AAAA,IAEhB;AAAA,EAEJ;AACF;AAEA,IAAO,0BAAQ;;;AGvHf,OAAuB;;;ACEvB,IAAOA,2BAAQ;","names":["TableHeaderCell_default"]}
|
package/dist/esm/index.js
CHANGED
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Table.tsx","../../src/styles.ts","../../src/TableTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport TableCell from \"./TableCell\";\nimport TableHeaderCell from \"./TableHeaderCell\";\nimport Container from \"./styles\";\nimport type {\n TypePassthroughProps,\n TypeTableProps,\n TypeTableRow,\n} from \"./TableTypes\";\n\nconst renderTableRow = (row: TypeTableRow) => {\n return (\n <tbody key={row.id} data-qa-table-row=\"\">\n <tr>\n {row.cells.map((td) => {\n return <TableCell {...td} key={td.id} />;\n })}\n </tr>\n </tbody>\n );\n};\n\n/**\n * The table component assist in rendering
|
|
1
|
+
{"version":3,"sources":["../../src/Table.tsx","../../src/styles.ts","../../src/TableTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport TableCell from \"./TableCell\";\nimport TableHeaderCell from \"./TableHeaderCell\";\nimport Container from \"./styles\";\nimport type {\n TypePassthroughProps,\n TypeTableProps,\n TypeTableRow,\n} from \"./TableTypes\";\n\nconst renderTableRow = (row: TypeTableRow) => {\n return (\n <tbody key={row.id} data-qa-table-row=\"\">\n <tr>\n {row.cells.map((td) => {\n return <TableCell {...td} key={td.id} />;\n })}\n </tr>\n </tbody>\n );\n};\n\n/**\n * The table component assist in rendering tabular data.\n */\nexport const Table = ({\n head = [],\n rows = [],\n onSort,\n sortId,\n sortDirection,\n rowRender,\n children,\n color,\n ...rest\n}: TypeTableProps) => {\n if (children) {\n return (\n <Container {...rest} data-qa-table=\"\">\n {children}\n </Container>\n );\n }\n\n return (\n <Container\n {...rest}\n data-qa-table=\"\"\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 <colgroup>\n {head.map(({ id, colSpan = 1 }) => (\n <col key={id} span={colSpan} />\n ))}\n </colgroup>\n {head.length > 0 && (\n <thead data-qa-table-header=\"\">\n <tr>\n {head.map(({ color, ...th }) => {\n return (\n <TableHeaderCell\n {...th}\n key={th.id}\n onSort={onSort}\n sortId={sortId}\n 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 />\n );\n })}\n </tr>\n </thead>\n )}\n {rows.map((row) => {\n return rowRender ? rowRender(row) : renderTableRow(row);\n })}\n </Container>\n );\n};\n\nexport const TableHead = ({ children, ...props }: TypePassthroughProps) => (\n <thead {...props}>{children}</thead>\n);\n\nexport const TableBody = ({ children, ...props }: TypePassthroughProps) => (\n <tbody {...props}>{children}</tbody>\n);\n\nexport const TableRow = ({ children, ...props }: TypePassthroughProps) => (\n <tr {...props}>{children}</tr>\n);\n\nTableHead.displayName = \"Table.TableHead\";\nTableBody.displayName = \"Table.TableBody\";\nTableRow.displayName = \"Table.TableRow\";\nTableHeaderCell.displayName = \"Table.HeaderCell\";\nTableCell.displayName = \"Table.Cell\";\n\nTable.TableHead = TableHead;\nTable.TableBody = TableBody;\nTable.TableRow = TableRow;\nTable.HeaderCell = TableHeaderCell;\nTable.Cell = TableCell;\n\nexport default Table;\n","import styled from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\n\nconst Container = styled.table`\n width: 100%;\n border-collapse: collapse;\n\n thead {\n vertical-align: bottom;\n }\n\n tr,\n thead {\n border-bottom: 1px solid\n ${(props) => props.theme.colors.container.border.base};\n }\n\n ${COMMON}\n`;\n\nexport default Container;\n","import * as React from \"react\";\nimport type {\n TypeEnumSortDirections,\n TypeTableHeaderCellProps,\n} from \"./TableHeaderCell\";\nimport type { TypeTableCellProps } from \"./TableCell/TableCellTypes\";\nimport type { TypeSystemCommonProps } from \"@sproutsocial/seeds-react-system-props\";\n\nexport interface TypePassthroughProps {\n children: React.ReactNode;\n}\n\nexport interface TypeTableRow {\n /** Table Row Id */\n id: string;\n\n /** Array for TableCells to render */\n cells: TypeTableCellProps[];\n}\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface TypeTableHeadProp\n extends Omit<\n TypeTableHeaderCellProps,\n \"onSort\" | \"sortId\" | \"sortDirection\"\n > {}\n\nexport interface TypeTableProps\n extends TypeSystemCommonProps,\n Omit<React.ComponentPropsWithoutRef<\"table\">, keyof TypeSystemCommonProps> {\n /** Array of TableHeaderCells to render */\n head?: TypeTableHeadProp[];\n\n /** Array of TableRows to render */\n rows?: TypeTableRow[];\n\n /** Callback for Sorting Table Columns (optional) */\n onSort?: (id: string) => void;\n\n /** Controls which column is being sorted (optional) */\n sortId?: string;\n\n /** Controls the current sort direction (optional) */\n sortDirection?: TypeEnumSortDirections;\n\n /** Custom row render for flexibilty */\n rowRender?: (row: TypeTableRow) => React.ReactNode;\n\n /**\n * Including children will overwrite all head, rows, rowRender, and sorting props\n * Should be used for manually rendering tables and ignoring data props\n */\n children?: React.ReactNode;\n}\n","import Table from \"./Table\";\n\nexport default Table;\nexport { Table };\nexport * from \"./TableTypes\";\n"],"mappings":";;;;;;;;AAAA,OAAuB;;;ACAvB,OAAO,YAAY;AACnB,SAAS,cAAc;AAEvB,IAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAWjB,CAAC,UAAU,MAAM,MAAM,OAAO,UAAU,OAAO,IAAI;AAAA;AAAA;AAAA,IAGvD,MAAM;AAAA;AAGV,IAAO,iBAAQ;;;ADPT,cAgCF,YAhCE;AAEW;AALjB,IAAM,iBAAiB,CAAC,QAAsB;AAC5C,SACE,oBAAC,WAAmB,qBAAkB,IACpC,8BAAC,QACE,cAAI,MAAM,IAAI,CAAC,OAAO;AACrB,WAAO,8BAAC,qBAAW,GAAG,IAAI,KAAK,GAAG,IAAI;AAAA,EACxC,CAAC,GACH,KALU,IAAI,EAMhB;AAEJ;AAKO,IAAM,QAAQ,CAAC;AAAA,EACpB,OAAO,CAAC;AAAA,EACR,OAAO,CAAC;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAsB;AACpB,MAAI,UAAU;AACZ,WACE,oBAAC,kBAAW,GAAG,MAAM,iBAAc,IAChC,UACH;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,iBAAc;AAAA,MAId;AAAA,MAEA;AAAA,4BAAC,cACE,eAAK,IAAI,CAAC,EAAE,IAAI,UAAU,EAAE,MAC3B,oBAAC,SAAa,MAAM,WAAV,EAAmB,CAC9B,GACH;AAAA,QACC,KAAK,SAAS,KACb,oBAAC,WAAM,wBAAqB,IAC1B,8BAAC,QACE,eAAK,IAAI,CAAC,EAAE,OAAAA,QAAO,GAAG,GAAG,MAAM;AAC9B,iBACE;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,cACJ,KAAK,GAAG;AAAA,cACR;AAAA,cACA;AAAA,cACA;AAAA,cAIA,OAAOA;AAAA;AAAA,UACT;AAAA,QAEJ,CAAC,GACH,GACF;AAAA,QAED,KAAK,IAAI,CAAC,QAAQ;AACjB,iBAAO,YAAY,UAAU,GAAG,IAAI,eAAe,GAAG;AAAA,QACxD,CAAC;AAAA;AAAA;AAAA,EACH;AAEJ;AAEO,IAAM,YAAY,CAAC,EAAE,UAAU,GAAG,MAAM,MAC7C,oBAAC,WAAO,GAAG,OAAQ,UAAS;AAGvB,IAAM,YAAY,CAAC,EAAE,UAAU,GAAG,MAAM,MAC7C,oBAAC,WAAO,GAAG,OAAQ,UAAS;AAGvB,IAAM,WAAW,CAAC,EAAE,UAAU,GAAG,MAAM,MAC5C,oBAAC,QAAI,GAAG,OAAQ,UAAS;AAG3B,UAAU,cAAc;AACxB,UAAU,cAAc;AACxB,SAAS,cAAc;AACvB,wBAAgB,cAAc;AAC9B,kBAAU,cAAc;AAExB,MAAM,YAAY;AAClB,MAAM,YAAY;AAClB,MAAM,WAAW;AACjB,MAAM,aAAa;AACnB,MAAM,OAAO;AAEb,IAAO,gBAAQ;;;AE9Gf,OAAuB;;;ACEvB,IAAO,cAAQ;","names":["color"]}
|
package/dist/index.d.mts
CHANGED
|
@@ -9,7 +9,7 @@ import '@sproutsocial/seeds-react-system-props';
|
|
|
9
9
|
import './TableHeaderCellTypes-CsJQBwu2.mjs';
|
|
10
10
|
|
|
11
11
|
/**
|
|
12
|
-
* The table component assist in rendering
|
|
12
|
+
* The table component assist in rendering tabular data.
|
|
13
13
|
*/
|
|
14
14
|
declare const Table: {
|
|
15
15
|
({ head, rows, onSort, sortId, sortDirection, rowRender, children, color, ...rest }: TypeTableProps): react_jsx_runtime.JSX.Element;
|
package/dist/index.d.ts
CHANGED
|
@@ -9,7 +9,7 @@ import '@sproutsocial/seeds-react-system-props';
|
|
|
9
9
|
import './TableHeaderCellTypes-CH_zzW6X.js';
|
|
10
10
|
|
|
11
11
|
/**
|
|
12
|
-
* The table component assist in rendering
|
|
12
|
+
* The table component assist in rendering tabular data.
|
|
13
13
|
*/
|
|
14
14
|
declare const Table: {
|
|
15
15
|
({ head, rows, onSort, sortId, sortDirection, rowRender, children, color, ...rest }: TypeTableProps): react_jsx_runtime.JSX.Element;
|
package/dist/index.js
CHANGED
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/Table.tsx","../src/TableCell/TableCell.tsx","../src/TableCell/styles.ts","../src/TableCell/TableCellTypes.ts","../src/TableCell/index.ts","../src/TableHeaderCell/TableHeaderCell.tsx","../src/TableHeaderCell/styles.ts","../src/TableHeaderCell/constants.ts","../src/TableHeaderCell/TableHeaderCellTypes.ts","../src/TableHeaderCell/index.ts","../src/styles.ts","../src/TableTypes.ts"],"sourcesContent":["import Table from \"./Table\";\n\nexport default Table;\nexport { Table };\nexport * from \"./TableTypes\";\n","import * as React from \"react\";\nimport TableCell from \"./TableCell\";\nimport TableHeaderCell from \"./TableHeaderCell\";\nimport Container from \"./styles\";\nimport type {\n TypePassthroughProps,\n TypeTableProps,\n TypeTableRow,\n} from \"./TableTypes\";\n\nconst renderTableRow = (row: TypeTableRow) => {\n return (\n <tbody key={row.id} data-qa-table-row=\"\">\n <tr>\n {row.cells.map((td) => {\n return <TableCell {...td} key={td.id} />;\n })}\n </tr>\n </tbody>\n );\n};\n\n/**\n * The table component assist in rendering tablular data.\n */\nexport const Table = ({\n head = [],\n rows = [],\n onSort,\n sortId,\n sortDirection,\n rowRender,\n children,\n color,\n ...rest\n}: TypeTableProps) => {\n if (children) {\n return (\n <Container {...rest} data-qa-table=\"\">\n {children}\n </Container>\n );\n }\n\n return (\n <Container\n {...rest}\n data-qa-table=\"\"\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 <colgroup>\n {head.map(({ id, colSpan = 1 }) => (\n <col key={id} span={colSpan} />\n ))}\n </colgroup>\n {head.length > 0 && (\n <thead data-qa-table-header=\"\">\n <tr>\n {head.map(({ color, ...th }) => {\n return (\n <TableHeaderCell\n {...th}\n key={th.id}\n onSort={onSort}\n sortId={sortId}\n 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 />\n );\n })}\n </tr>\n </thead>\n )}\n {rows.map((row) => {\n return rowRender ? rowRender(row) : renderTableRow(row);\n })}\n </Container>\n );\n};\n\nexport const TableHead = ({ children, ...props }: TypePassthroughProps) => (\n <thead {...props}>{children}</thead>\n);\n\nexport const TableBody = ({ children, ...props }: TypePassthroughProps) => (\n <tbody {...props}>{children}</tbody>\n);\n\nexport const TableRow = ({ children, ...props }: TypePassthroughProps) => (\n <tr {...props}>{children}</tr>\n);\n\nTableHead.displayName = \"Table.TableHead\";\nTableBody.displayName = \"Table.TableBody\";\nTableRow.displayName = \"Table.TableRow\";\nTableHeaderCell.displayName = \"Table.HeaderCell\";\nTableCell.displayName = \"Table.Cell\";\n\nTable.TableHead = TableHead;\nTable.TableBody = TableBody;\nTable.TableRow = TableRow;\nTable.HeaderCell = TableHeaderCell;\nTable.Cell = TableCell;\n\nexport default Table;\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 * 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","import TableHeaderCell from \"./TableHeaderCell\";\n\nexport default TableHeaderCell;\nexport { TableHeaderCell };\nexport * from \"./TableHeaderCellTypes\";\nexport * from \"./constants\";\n","import styled from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\n\nconst Container = styled.table`\n width: 100%;\n border-collapse: collapse;\n\n thead {\n vertical-align: bottom;\n }\n\n tr,\n thead {\n border-bottom: 1px solid\n ${(props) => props.theme.colors.container.border.base};\n }\n\n ${COMMON}\n`;\n\nexport default Container;\n","import * as React from \"react\";\nimport type {\n TypeEnumSortDirections,\n TypeTableHeaderCellProps,\n} from \"./TableHeaderCell\";\nimport type { TypeTableCellProps } from \"./TableCell/TableCellTypes\";\nimport type { TypeSystemCommonProps } from \"@sproutsocial/seeds-react-system-props\";\n\nexport interface TypePassthroughProps {\n children: React.ReactNode;\n}\n\nexport interface TypeTableRow {\n /** Table Row Id */\n id: string;\n\n /** Array for TableCells to render */\n cells: TypeTableCellProps[];\n}\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface TypeTableHeadProp\n extends Omit<\n TypeTableHeaderCellProps,\n \"onSort\" | \"sortId\" | \"sortDirection\"\n > {}\n\nexport interface TypeTableProps\n extends TypeSystemCommonProps,\n Omit<React.ComponentPropsWithoutRef<\"table\">, keyof TypeSystemCommonProps> {\n /** Array of TableHeaderCells to render */\n head?: TypeTableHeadProp[];\n\n /** Array of TableRows to render */\n rows?: TypeTableRow[];\n\n /** Callback for Sorting Table Columns (optional) */\n onSort?: (id: string) => void;\n\n /** Controls which column is being sorted (optional) */\n sortId?: string;\n\n /** Controls the current sort direction (optional) */\n sortDirection?: TypeEnumSortDirections;\n\n /** Custom row render for flexibilty */\n rowRender?: (row: TypeTableRow) => React.ReactNode;\n\n /**\n * Including children will overwrite all head, rows, rowRender, and sorting props\n * Should be used for manually rendering tables and ignoring data props\n */\n children?: React.ReactNode;\n}\n"],"mappings":"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","names":["React","styled","React","TableCell_default","React","import_styled_components","import_seeds_react_system_props","Container","styled","styles_default","import_react","Icon","styles_default","React","TableHeaderCell_default","import_styled_components","import_seeds_react_system_props","Container","styled","styles_default","import_jsx_runtime","import_react","TableCell_default","styles_default","color","TableHeaderCell_default","React"]}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/Table.tsx","../src/TableCell/TableCell.tsx","../src/TableCell/styles.ts","../src/TableCell/TableCellTypes.ts","../src/TableCell/index.ts","../src/TableHeaderCell/TableHeaderCell.tsx","../src/TableHeaderCell/styles.ts","../src/TableHeaderCell/constants.ts","../src/TableHeaderCell/TableHeaderCellTypes.ts","../src/TableHeaderCell/index.ts","../src/styles.ts","../src/TableTypes.ts"],"sourcesContent":["import Table from \"./Table\";\n\nexport default Table;\nexport { Table };\nexport * from \"./TableTypes\";\n","import * as React from \"react\";\nimport TableCell from \"./TableCell\";\nimport TableHeaderCell from \"./TableHeaderCell\";\nimport Container from \"./styles\";\nimport type {\n TypePassthroughProps,\n TypeTableProps,\n TypeTableRow,\n} from \"./TableTypes\";\n\nconst renderTableRow = (row: TypeTableRow) => {\n return (\n <tbody key={row.id} data-qa-table-row=\"\">\n <tr>\n {row.cells.map((td) => {\n return <TableCell {...td} key={td.id} />;\n })}\n </tr>\n </tbody>\n );\n};\n\n/**\n * The table component assist in rendering tabular data.\n */\nexport const Table = ({\n head = [],\n rows = [],\n onSort,\n sortId,\n sortDirection,\n rowRender,\n children,\n color,\n ...rest\n}: TypeTableProps) => {\n if (children) {\n return (\n <Container {...rest} data-qa-table=\"\">\n {children}\n </Container>\n );\n }\n\n return (\n <Container\n {...rest}\n data-qa-table=\"\"\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 <colgroup>\n {head.map(({ id, colSpan = 1 }) => (\n <col key={id} span={colSpan} />\n ))}\n </colgroup>\n {head.length > 0 && (\n <thead data-qa-table-header=\"\">\n <tr>\n {head.map(({ color, ...th }) => {\n return (\n <TableHeaderCell\n {...th}\n key={th.id}\n onSort={onSort}\n sortId={sortId}\n 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 />\n );\n })}\n </tr>\n </thead>\n )}\n {rows.map((row) => {\n return rowRender ? rowRender(row) : renderTableRow(row);\n })}\n </Container>\n );\n};\n\nexport const TableHead = ({ children, ...props }: TypePassthroughProps) => (\n <thead {...props}>{children}</thead>\n);\n\nexport const TableBody = ({ children, ...props }: TypePassthroughProps) => (\n <tbody {...props}>{children}</tbody>\n);\n\nexport const TableRow = ({ children, ...props }: TypePassthroughProps) => (\n <tr {...props}>{children}</tr>\n);\n\nTableHead.displayName = \"Table.TableHead\";\nTableBody.displayName = \"Table.TableBody\";\nTableRow.displayName = \"Table.TableRow\";\nTableHeaderCell.displayName = \"Table.HeaderCell\";\nTableCell.displayName = \"Table.Cell\";\n\nTable.TableHead = TableHead;\nTable.TableBody = TableBody;\nTable.TableRow = TableRow;\nTable.HeaderCell = TableHeaderCell;\nTable.Cell = TableCell;\n\nexport default Table;\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 * 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","import TableHeaderCell from \"./TableHeaderCell\";\n\nexport default TableHeaderCell;\nexport { TableHeaderCell };\nexport * from \"./TableHeaderCellTypes\";\nexport * from \"./constants\";\n","import styled from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\n\nconst Container = styled.table`\n width: 100%;\n border-collapse: collapse;\n\n thead {\n vertical-align: bottom;\n }\n\n tr,\n thead {\n border-bottom: 1px solid\n ${(props) => props.theme.colors.container.border.base};\n }\n\n ${COMMON}\n`;\n\nexport default Container;\n","import * as React from \"react\";\nimport type {\n TypeEnumSortDirections,\n TypeTableHeaderCellProps,\n} from \"./TableHeaderCell\";\nimport type { TypeTableCellProps } from \"./TableCell/TableCellTypes\";\nimport type { TypeSystemCommonProps } from \"@sproutsocial/seeds-react-system-props\";\n\nexport interface TypePassthroughProps {\n children: React.ReactNode;\n}\n\nexport interface TypeTableRow {\n /** Table Row Id */\n id: string;\n\n /** Array for TableCells to render */\n cells: TypeTableCellProps[];\n}\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface TypeTableHeadProp\n extends Omit<\n TypeTableHeaderCellProps,\n \"onSort\" | \"sortId\" | \"sortDirection\"\n > {}\n\nexport interface TypeTableProps\n extends TypeSystemCommonProps,\n Omit<React.ComponentPropsWithoutRef<\"table\">, keyof TypeSystemCommonProps> {\n /** Array of TableHeaderCells to render */\n head?: TypeTableHeadProp[];\n\n /** Array of TableRows to render */\n rows?: TypeTableRow[];\n\n /** Callback for Sorting Table Columns (optional) */\n onSort?: (id: string) => void;\n\n /** Controls which column is being sorted (optional) */\n sortId?: string;\n\n /** Controls the current sort direction (optional) */\n sortDirection?: TypeEnumSortDirections;\n\n /** Custom row render for flexibilty */\n rowRender?: (row: TypeTableRow) => React.ReactNode;\n\n /**\n * Including children will overwrite all head, rows, rowRender, and sorting props\n * Should be used for manually rendering tables and ignoring data props\n */\n children?: React.ReactNode;\n}\n"],"mappings":"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","names":["React","styled","React","TableCell_default","React","import_styled_components","import_seeds_react_system_props","Container","styled","styles_default","import_react","Icon","styles_default","React","TableHeaderCell_default","import_styled_components","import_seeds_react_system_props","Container","styled","styles_default","import_jsx_runtime","import_react","TableCell_default","styles_default","color","TableHeaderCell_default","React"]}
|
package/dist/tableHeaderCell.js
CHANGED
|
@@ -1 +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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,8BAAwC;;;ACDxC,+BAA4B;AAC5B,sCAAuB;AAGvB,IAAM,YAAY,yBAAAC,QAAO;AAAA,IAKrB,CAAC,UAAU,MAAM,MAAM,WAAW,GAAG,CAAC;AAAA,iBACzB,CAAC,UAAU,MAAM,MAAM,YAAY,QAAQ;AAAA,aAC/C,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,gBAC9B,CAAC,UAAU,MAAM,SAAS;AAAA;AAAA,IAEtC,CAAC,UACD,MAAM,YACN;AAAA;AAAA;AAAA,KAGC;AAAA;AAAA,IAED,sCAAM;AAAA;AAGH,IAAM,WAAW,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA,eAKhB,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAGzC,IAAM,iBAAiB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAarC,IAAO,iBAAQ;;;AC7CR,IAAM,kBAAkB;AAAA,EAC7B,KAAK;AAAA,EACL,MAAM;AACR;;;AFqBQ;AA8DF;AAhFC,IAAM,kBAAN,cAAoC,gBAAoC;AAAA,EAC7E,OAAO;AAAA,EAEP,cAAc,CACZ,UACA,sBACG;AACH,UAAM,EAAE,cAAc,IAAI,KAAK;AAC/B,QAAI,WAAyB;AAE7B,QAAI,YAAY,kBAAkB,gBAAgB,KAAK;AACrD,iBAAW;AAAA,IACb,WAAW,YAAY,kBAAkB,gBAAgB,MAAM;AAC7D,iBAAW;AAAA,IACb;AAEA,WACE,4CAAC,YACC,sDAAC,wBAAAC,SAAA,EAAK,MAAK,QAAO,MAAM,UAAU,cAAY,mBAAmB,GACnE;AAAA,EAEJ;AAAA;AAAA,EAGA,cAAc,CACZ,MACG;AACH,UAAM,EAAE,SAAS,QAAQ,YAAY,GAAG,IAAI,KAAK;AAEjD,QAAI,WAAW,YAAY;AACzB,QAAE,eAAe;AAAA,IACnB;AAEA,QAAI,SAAS;AAEX,cAAQ,CAAmD;AAC3D;AAAA,IACF;AAEA,QAAI,CAAC,cAAc,CAAC;
|
|
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"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sproutsocial/seeds-react-table",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "Seeds React Table",
|
|
5
5
|
"author": "Sprout Social, Inc.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -9,24 +9,24 @@
|
|
|
9
9
|
"types": "dist/index.d.ts",
|
|
10
10
|
"exports": {
|
|
11
11
|
".": {
|
|
12
|
+
"types": "./dist/index.d.ts",
|
|
12
13
|
"import": "./dist/esm/index.js",
|
|
13
|
-
"require": "./dist/index.js"
|
|
14
|
-
"types": "./dist/index.d.ts"
|
|
14
|
+
"require": "./dist/index.js"
|
|
15
15
|
},
|
|
16
16
|
"./TableCell": {
|
|
17
|
+
"types": "./dist/tableCell.d.ts",
|
|
17
18
|
"import": "./dist/esm/tableCell.js",
|
|
18
|
-
"require": "./dist/tableCell.js"
|
|
19
|
-
"types": "./dist/tableCell.d.ts"
|
|
19
|
+
"require": "./dist/tableCell.js"
|
|
20
20
|
},
|
|
21
21
|
"./TableHeaderCell": {
|
|
22
|
+
"types": "./dist/tableHeaderCell.d.ts",
|
|
22
23
|
"import": "./dist/esm/tableHeaderCell.js",
|
|
23
|
-
"require": "./dist/tableHeaderCell.js"
|
|
24
|
-
"types": "./dist/tableHeaderCell.d.ts"
|
|
24
|
+
"require": "./dist/tableHeaderCell.js"
|
|
25
25
|
},
|
|
26
26
|
"./TableRowAccordion": {
|
|
27
|
+
"types": "./dist/tableRowAccordion.d.ts",
|
|
27
28
|
"import": "./dist/esm/tableRowAccordion.js",
|
|
28
|
-
"require": "./dist/tableRowAccordion.js"
|
|
29
|
-
"types": "./dist/tableRowAccordion.d.ts"
|
|
29
|
+
"require": "./dist/tableRowAccordion.js"
|
|
30
30
|
}
|
|
31
31
|
},
|
|
32
32
|
"scripts": {
|
|
@@ -40,9 +40,9 @@
|
|
|
40
40
|
"test:watch": "jest --watch --coverage=false"
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
|
-
"@sproutsocial/seeds-react-theme": "
|
|
44
|
-
"@sproutsocial/seeds-react-system-props": "
|
|
45
|
-
"@sproutsocial/seeds-react-icon": "
|
|
43
|
+
"@sproutsocial/seeds-react-theme": "^3.0.1",
|
|
44
|
+
"@sproutsocial/seeds-react-system-props": "^3.0.1",
|
|
45
|
+
"@sproutsocial/seeds-react-icon": "^1.1.3"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
48
|
"@types/react": "^18.0.0",
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"@sproutsocial/eslint-config-seeds": "*",
|
|
51
51
|
"react": "^18.0.0",
|
|
52
52
|
"styled-components": "^5.2.3",
|
|
53
|
-
"tsup": "^8.
|
|
53
|
+
"tsup": "^8.3.4",
|
|
54
54
|
"typescript": "^5.6.2",
|
|
55
55
|
"@sproutsocial/seeds-tsconfig": "*",
|
|
56
56
|
"@sproutsocial/seeds-testing": "*",
|
package/src/Table.tsx
CHANGED