@atlaskit/table-tree 9.10.5 → 9.11.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +13 -0
- package/dist/cjs/components/header.js +11 -1
- package/dist/cjs/components/headers.js +2 -1
- package/dist/cjs/components/internal/common-cell.js +1 -1
- package/dist/cjs/components/internal/item.js +2 -1
- package/dist/cjs/components/internal/overflow-container.js +1 -1
- package/dist/cjs/components/internal/styled.js +1 -1
- package/dist/cjs/components/row.js +12 -2
- package/dist/cjs/components/table-tree.js +23 -5
- package/dist/es2019/components/header.js +11 -1
- package/dist/es2019/components/headers.js +1 -1
- package/dist/es2019/components/internal/common-cell.js +1 -1
- package/dist/es2019/components/internal/item.js +1 -1
- package/dist/es2019/components/internal/overflow-container.js +1 -1
- package/dist/es2019/components/internal/styled.js +1 -1
- package/dist/es2019/components/row.js +12 -2
- package/dist/es2019/components/table-tree.js +11 -0
- package/dist/esm/components/header.js +10 -1
- package/dist/esm/components/headers.js +1 -1
- package/dist/esm/components/internal/common-cell.js +1 -1
- package/dist/esm/components/internal/item.js +1 -1
- package/dist/esm/components/internal/overflow-container.js +1 -1
- package/dist/esm/components/internal/styled.js +1 -1
- package/dist/esm/components/row.js +11 -2
- package/dist/esm/components/table-tree.js +23 -5
- package/dist/types/components/header.d.ts +14 -0
- package/dist/types/components/headers.d.ts +1 -1
- package/dist/types/components/internal/common-cell.d.ts +1 -1
- package/dist/types/components/internal/item.d.ts +1 -1
- package/dist/types/components/internal/overflow-container.d.ts +1 -1
- package/dist/types/components/internal/styled.d.ts +1 -1
- package/dist/types/components/row.d.ts +85 -2
- package/dist/types/components/rows.d.ts +14 -0
- package/dist/types/components/table-tree.d.ts +64 -1
- package/dist/types/index.d.ts +4 -1
- package/dist/types-ts4.5/components/header.d.ts +14 -0
- package/dist/types-ts4.5/components/headers.d.ts +1 -1
- package/dist/types-ts4.5/components/internal/common-cell.d.ts +1 -1
- package/dist/types-ts4.5/components/internal/item.d.ts +1 -1
- package/dist/types-ts4.5/components/internal/overflow-container.d.ts +1 -1
- package/dist/types-ts4.5/components/internal/styled.d.ts +1 -1
- package/dist/types-ts4.5/components/row.d.ts +85 -2
- package/dist/types-ts4.5/components/rows.d.ts +14 -0
- package/dist/types-ts4.5/components/table-tree.d.ts +64 -1
- package/dist/types-ts4.5/index.d.ts +4 -1
- package/package.json +5 -5
- package/extract-react-types/table-tree-cell.tsx +0 -7
- package/extract-react-types/table-tree-header.tsx +0 -20
- package/extract-react-types/table-tree-row.tsx +0 -99
- package/extract-react-types/table-tree-rows.tsx +0 -40
- package/extract-react-types/table-tree.tsx +0 -76
|
@@ -3,8 +3,22 @@ type WithChildren<T> = T & {
|
|
|
3
3
|
children?: T[] | null;
|
|
4
4
|
};
|
|
5
5
|
export interface RowsProps<T> {
|
|
6
|
+
/**
|
|
7
|
+
* The data used to render the set of rows. Will be passed down via the `children` render prop.
|
|
8
|
+
*
|
|
9
|
+
* In addition to these props, any other data can be added to the object, and it will
|
|
10
|
+
* be provided as props when rendering each cell.
|
|
11
|
+
*/
|
|
6
12
|
items?: WithChildren<T>[];
|
|
13
|
+
/**
|
|
14
|
+
* Render function for child rows. Render props will contain an item from the
|
|
15
|
+
* `items` prop above.
|
|
16
|
+
*/
|
|
7
17
|
render: (args: WithChildren<T>) => React.ReactNode;
|
|
18
|
+
/**
|
|
19
|
+
* This is an accessible name for the loading state's spinner.
|
|
20
|
+
* The default text is "Loading".
|
|
21
|
+
*/
|
|
8
22
|
loadingLabel?: string;
|
|
9
23
|
}
|
|
10
24
|
export default class Rows<T> extends Component<RowsProps<T>> {
|
|
@@ -1,5 +1,68 @@
|
|
|
1
|
-
import { Component } from 'react';
|
|
1
|
+
import { Component, type ElementType, type ReactNode } from 'react';
|
|
2
2
|
import { type ColumnWidth } from './internal/context';
|
|
3
|
+
import type Item from './internal/item';
|
|
4
|
+
declare class Content extends Object {
|
|
5
|
+
}
|
|
6
|
+
/**
|
|
7
|
+
* This is hard-coded here because our actual <TableTree /> has no typings
|
|
8
|
+
* for its props.
|
|
9
|
+
*
|
|
10
|
+
* Adding types for real *might* break things so will need a little care.
|
|
11
|
+
*
|
|
12
|
+
* Defining it here for now lets us provide *something* without much headache.
|
|
13
|
+
*/
|
|
14
|
+
export type TableTreeProps = {
|
|
15
|
+
/**
|
|
16
|
+
* The contents of the table.
|
|
17
|
+
* Use this when composing `Cell`, `Header`, `Headers`, `Row`, and `Rows` components.
|
|
18
|
+
* For basic usage, it's simpler to specify table contents with the `items` prop instead.
|
|
19
|
+
*/
|
|
20
|
+
children?: ReactNode;
|
|
21
|
+
/**
|
|
22
|
+
* Each column component is used to render the cells in that column.
|
|
23
|
+
* A cell's `content` value, specified in the data passed to `items`, is provided as props.
|
|
24
|
+
*/
|
|
25
|
+
columns?: ElementType<Content>[];
|
|
26
|
+
/**
|
|
27
|
+
* The widths of the columns in the table.
|
|
28
|
+
*/
|
|
29
|
+
columnWidths?: (string | number)[];
|
|
30
|
+
/**
|
|
31
|
+
* The header text of the columns of the table.
|
|
32
|
+
*/
|
|
33
|
+
headers?: string[];
|
|
34
|
+
/**
|
|
35
|
+
Use this to set whether a row with children should expand when clicked anywhere within the row. If `false` or unset, a row with children will only expand when the chevron is clicked.
|
|
36
|
+
|
|
37
|
+
If your cells contain interactive elements, always set this to `false` to avoid unexpected expanding or collapsing.
|
|
38
|
+
|
|
39
|
+
If you aren’t using the `items` prop, `shouldExpandOnClick` should be used on the row component instead.
|
|
40
|
+
*/
|
|
41
|
+
shouldExpandOnClick?: boolean;
|
|
42
|
+
/**
|
|
43
|
+
The data used to render the table. If you’re creating a basic table, use this prop instead of composing cell, header, headers, row, and rows components.
|
|
44
|
+
|
|
45
|
+
In addition to the `items` props, any other data can be added, and it will
|
|
46
|
+
be provided as props when rendering each cell.
|
|
47
|
+
*/
|
|
48
|
+
items?: Item[] | null;
|
|
49
|
+
/**
|
|
50
|
+
* The value used to extend the expand or collapse button label in cases where `row` has child rows.
|
|
51
|
+
* It should be a string when we pass data via the `items` property, the value should be one of the `columns` names.
|
|
52
|
+
* It should be a number when we pass data via the `rows` component as children in the table tree.
|
|
53
|
+
*/
|
|
54
|
+
mainColumnForExpandCollapseLabel?: string | number;
|
|
55
|
+
/**
|
|
56
|
+
* This is an `aria-label` attribute. Use the label to describe the table for assistive technologies.
|
|
57
|
+
* Usage of either this, or the `labelId` attribute is strongly recommended.
|
|
58
|
+
*/
|
|
59
|
+
label?: string;
|
|
60
|
+
/**
|
|
61
|
+
* This is an `aria-labelledby` attribute. Pass an ID for the element which should define an accessible name for the table.
|
|
62
|
+
* Usage of either this, or the `label` attribute is strongly recommended.
|
|
63
|
+
*/
|
|
64
|
+
referencedLabel?: string;
|
|
65
|
+
};
|
|
3
66
|
interface State {
|
|
4
67
|
columnWidths: ColumnWidth[];
|
|
5
68
|
}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -5,6 +5,9 @@ export { default as Cell } from './components/cell';
|
|
|
5
5
|
export { default as Rows } from './components/rows';
|
|
6
6
|
export { default as Row } from './components/row';
|
|
7
7
|
export { default as TableTreeDataHelper } from './utils/table-tree-data-helper';
|
|
8
|
+
export type { TableTreeProps } from './components/table-tree';
|
|
9
|
+
export type { HeaderProps } from './components/header';
|
|
10
|
+
export type { RowsProps } from './components/rows';
|
|
11
|
+
export type { RowProps } from './components/row';
|
|
8
12
|
export type { CellWithColumnWidthProps } from './components/internal/with-column-width';
|
|
9
13
|
export type { CellProps } from './components/cell';
|
|
10
|
-
export type { RowsProps } from './components/rows';
|
|
@@ -1,3 +1,17 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
/**
|
|
3
|
+
* This is hard-coded here because our actual <Header /> has no typings
|
|
4
|
+
* for its props.
|
|
5
|
+
*
|
|
6
|
+
* Adding types for real *might* break things so will need a little care.
|
|
7
|
+
*
|
|
8
|
+
* Defining it here for now lets us provide *something* without much headache.
|
|
9
|
+
*/
|
|
10
|
+
export type HeaderProps = {
|
|
11
|
+
/**
|
|
12
|
+
* Width of the header item. Takes a string, or a number representing the width in pixels.
|
|
13
|
+
*/
|
|
14
|
+
width?: string | number;
|
|
15
|
+
};
|
|
2
16
|
declare const Header: (props: any) => JSX.Element;
|
|
3
17
|
export default Header;
|
|
@@ -1,9 +1,92 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
3
4
|
*/
|
|
4
|
-
|
|
5
|
-
import React, { Component } from 'react';
|
|
5
|
+
import React, { Component, type ReactNode } from 'react';
|
|
6
6
|
import { jsx } from '@emotion/react';
|
|
7
|
+
import type Item from './internal/item';
|
|
8
|
+
/**
|
|
9
|
+
* This is hard-coded here because our actual <TableTree /> has no typings
|
|
10
|
+
* for its props.
|
|
11
|
+
*
|
|
12
|
+
* Adding types for real *might* break things so will need a little care.
|
|
13
|
+
*
|
|
14
|
+
* Defining it here for now lets us provide *something* without much headache.
|
|
15
|
+
*/
|
|
16
|
+
export type RowProps = {
|
|
17
|
+
/**
|
|
18
|
+
* Whether the row has children.
|
|
19
|
+
*/
|
|
20
|
+
hasChildren?: boolean;
|
|
21
|
+
/**
|
|
22
|
+
* Children contained in the row. Should be one or more cell components.
|
|
23
|
+
*/
|
|
24
|
+
children?: React.ReactNode;
|
|
25
|
+
/**
|
|
26
|
+
* ID for the row item.
|
|
27
|
+
*/
|
|
28
|
+
itemId?: string;
|
|
29
|
+
/**
|
|
30
|
+
The data used to render the row and descendants. Pass down from `children` render prop.
|
|
31
|
+
|
|
32
|
+
In addition to these props, any other data can be added to the object, and it will
|
|
33
|
+
be provided as props when rendering each cell.
|
|
34
|
+
*/
|
|
35
|
+
items?: Item[] | null;
|
|
36
|
+
/**
|
|
37
|
+
* Controls the expanded state of the row.
|
|
38
|
+
*/
|
|
39
|
+
isExpanded?: ReactNode;
|
|
40
|
+
/**
|
|
41
|
+
* Sets the default expanded state of the row.
|
|
42
|
+
*/
|
|
43
|
+
isDefaultExpanded?: ReactNode;
|
|
44
|
+
/**
|
|
45
|
+
* This is the accessible name for the expand chevron button, used to tell assistive technology what the button is for.
|
|
46
|
+
*/
|
|
47
|
+
expandLabel?: string;
|
|
48
|
+
/**
|
|
49
|
+
* This is the accessible name for the collapse chevron button, used to tell assistive technology what the button is for.
|
|
50
|
+
*/
|
|
51
|
+
collapseLabel?: string;
|
|
52
|
+
/**
|
|
53
|
+
* Callback called when the row collapses.
|
|
54
|
+
*/
|
|
55
|
+
onCollapse?: (data: Item) => void;
|
|
56
|
+
/**
|
|
57
|
+
* Callback called when the row expands.
|
|
58
|
+
*/
|
|
59
|
+
onExpand?: (data: Item) => void;
|
|
60
|
+
/**
|
|
61
|
+
* Children to render under the row.
|
|
62
|
+
* This is normally set by the parent item component, and doesn't need to be configured.
|
|
63
|
+
*/
|
|
64
|
+
renderChildren?: () => React.ReactNode;
|
|
65
|
+
/**
|
|
66
|
+
Use this to set whether a row with children should expand when clicked anywhere within the row. If `false` or unset, a row with children will only expand when the chevron is clicked.
|
|
67
|
+
|
|
68
|
+
If your cells contain interactive elements, always set this to `false` to avoid unexpected expanding or collapsing.
|
|
69
|
+
*/
|
|
70
|
+
shouldExpandOnClick?: boolean;
|
|
71
|
+
/**
|
|
72
|
+
* Data to render. Passed down by `item` and passed into `onExpand` and `onCollapse` callbacks.
|
|
73
|
+
* This is normally set by the parent `item` component, and doesn't need to be configured.
|
|
74
|
+
*/
|
|
75
|
+
data?: Item;
|
|
76
|
+
/**
|
|
77
|
+
* The depth used for rendering an indent.
|
|
78
|
+
* This is normally set by parent `item` component, and doesn't need to be configured.
|
|
79
|
+
*/
|
|
80
|
+
depth?: number;
|
|
81
|
+
/**
|
|
82
|
+
Adds detail to the expand and collapse row button's aria label by appending the value from the given column. If you don't set this prop, the aria label will read out "Expand `itemId` row".
|
|
83
|
+
|
|
84
|
+
Should be a string when we pass data via `items` property in the table tree. The value should be one of the property `columns` names in the table tree.
|
|
85
|
+
|
|
86
|
+
Should be a number when we pass data via the `Rows` component as children in the table tree.
|
|
87
|
+
*/
|
|
88
|
+
mainColumnForExpandCollapseLabel?: string | number;
|
|
89
|
+
};
|
|
7
90
|
declare class RowComponent extends Component<any, any> {
|
|
8
91
|
state: {
|
|
9
92
|
isExpanded: any;
|
|
@@ -3,8 +3,22 @@ type WithChildren<T> = T & {
|
|
|
3
3
|
children?: T[] | null;
|
|
4
4
|
};
|
|
5
5
|
export interface RowsProps<T> {
|
|
6
|
+
/**
|
|
7
|
+
* The data used to render the set of rows. Will be passed down via the `children` render prop.
|
|
8
|
+
*
|
|
9
|
+
* In addition to these props, any other data can be added to the object, and it will
|
|
10
|
+
* be provided as props when rendering each cell.
|
|
11
|
+
*/
|
|
6
12
|
items?: WithChildren<T>[];
|
|
13
|
+
/**
|
|
14
|
+
* Render function for child rows. Render props will contain an item from the
|
|
15
|
+
* `items` prop above.
|
|
16
|
+
*/
|
|
7
17
|
render: (args: WithChildren<T>) => React.ReactNode;
|
|
18
|
+
/**
|
|
19
|
+
* This is an accessible name for the loading state's spinner.
|
|
20
|
+
* The default text is "Loading".
|
|
21
|
+
*/
|
|
8
22
|
loadingLabel?: string;
|
|
9
23
|
}
|
|
10
24
|
export default class Rows<T> extends Component<RowsProps<T>> {
|
|
@@ -1,5 +1,68 @@
|
|
|
1
|
-
import { Component } from 'react';
|
|
1
|
+
import { Component, type ElementType, type ReactNode } from 'react';
|
|
2
2
|
import { type ColumnWidth } from './internal/context';
|
|
3
|
+
import type Item from './internal/item';
|
|
4
|
+
declare class Content extends Object {
|
|
5
|
+
}
|
|
6
|
+
/**
|
|
7
|
+
* This is hard-coded here because our actual <TableTree /> has no typings
|
|
8
|
+
* for its props.
|
|
9
|
+
*
|
|
10
|
+
* Adding types for real *might* break things so will need a little care.
|
|
11
|
+
*
|
|
12
|
+
* Defining it here for now lets us provide *something* without much headache.
|
|
13
|
+
*/
|
|
14
|
+
export type TableTreeProps = {
|
|
15
|
+
/**
|
|
16
|
+
* The contents of the table.
|
|
17
|
+
* Use this when composing `Cell`, `Header`, `Headers`, `Row`, and `Rows` components.
|
|
18
|
+
* For basic usage, it's simpler to specify table contents with the `items` prop instead.
|
|
19
|
+
*/
|
|
20
|
+
children?: ReactNode;
|
|
21
|
+
/**
|
|
22
|
+
* Each column component is used to render the cells in that column.
|
|
23
|
+
* A cell's `content` value, specified in the data passed to `items`, is provided as props.
|
|
24
|
+
*/
|
|
25
|
+
columns?: ElementType<Content>[];
|
|
26
|
+
/**
|
|
27
|
+
* The widths of the columns in the table.
|
|
28
|
+
*/
|
|
29
|
+
columnWidths?: (string | number)[];
|
|
30
|
+
/**
|
|
31
|
+
* The header text of the columns of the table.
|
|
32
|
+
*/
|
|
33
|
+
headers?: string[];
|
|
34
|
+
/**
|
|
35
|
+
Use this to set whether a row with children should expand when clicked anywhere within the row. If `false` or unset, a row with children will only expand when the chevron is clicked.
|
|
36
|
+
|
|
37
|
+
If your cells contain interactive elements, always set this to `false` to avoid unexpected expanding or collapsing.
|
|
38
|
+
|
|
39
|
+
If you aren’t using the `items` prop, `shouldExpandOnClick` should be used on the row component instead.
|
|
40
|
+
*/
|
|
41
|
+
shouldExpandOnClick?: boolean;
|
|
42
|
+
/**
|
|
43
|
+
The data used to render the table. If you’re creating a basic table, use this prop instead of composing cell, header, headers, row, and rows components.
|
|
44
|
+
|
|
45
|
+
In addition to the `items` props, any other data can be added, and it will
|
|
46
|
+
be provided as props when rendering each cell.
|
|
47
|
+
*/
|
|
48
|
+
items?: Item[] | null;
|
|
49
|
+
/**
|
|
50
|
+
* The value used to extend the expand or collapse button label in cases where `row` has child rows.
|
|
51
|
+
* It should be a string when we pass data via the `items` property, the value should be one of the `columns` names.
|
|
52
|
+
* It should be a number when we pass data via the `rows` component as children in the table tree.
|
|
53
|
+
*/
|
|
54
|
+
mainColumnForExpandCollapseLabel?: string | number;
|
|
55
|
+
/**
|
|
56
|
+
* This is an `aria-label` attribute. Use the label to describe the table for assistive technologies.
|
|
57
|
+
* Usage of either this, or the `labelId` attribute is strongly recommended.
|
|
58
|
+
*/
|
|
59
|
+
label?: string;
|
|
60
|
+
/**
|
|
61
|
+
* This is an `aria-labelledby` attribute. Pass an ID for the element which should define an accessible name for the table.
|
|
62
|
+
* Usage of either this, or the `label` attribute is strongly recommended.
|
|
63
|
+
*/
|
|
64
|
+
referencedLabel?: string;
|
|
65
|
+
};
|
|
3
66
|
interface State {
|
|
4
67
|
columnWidths: ColumnWidth[];
|
|
5
68
|
}
|
|
@@ -5,6 +5,9 @@ export { default as Cell } from './components/cell';
|
|
|
5
5
|
export { default as Rows } from './components/rows';
|
|
6
6
|
export { default as Row } from './components/row';
|
|
7
7
|
export { default as TableTreeDataHelper } from './utils/table-tree-data-helper';
|
|
8
|
+
export type { TableTreeProps } from './components/table-tree';
|
|
9
|
+
export type { HeaderProps } from './components/header';
|
|
10
|
+
export type { RowsProps } from './components/rows';
|
|
11
|
+
export type { RowProps } from './components/row';
|
|
8
12
|
export type { CellWithColumnWidthProps } from './components/internal/with-column-width';
|
|
9
13
|
export type { CellProps } from './components/cell';
|
|
10
|
-
export type { RowsProps } from './components/rows';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/table-tree",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.11.1",
|
|
4
4
|
"description": "A table tree is an expandable table for showing nested hierarchies of information.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -27,12 +27,12 @@
|
|
|
27
27
|
"runReact18": true
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@atlaskit/analytics-next": "^
|
|
31
|
-
"@atlaskit/button": "^19.
|
|
32
|
-
"@atlaskit/icon": "^22.
|
|
30
|
+
"@atlaskit/analytics-next": "^10.0.0",
|
|
31
|
+
"@atlaskit/button": "^19.1.0",
|
|
32
|
+
"@atlaskit/icon": "^22.10.0",
|
|
33
33
|
"@atlaskit/spinner": "^16.2.0",
|
|
34
34
|
"@atlaskit/theme": "^12.11.0",
|
|
35
|
-
"@atlaskit/tokens": "^1.
|
|
35
|
+
"@atlaskit/tokens": "^1.57.0",
|
|
36
36
|
"@babel/runtime": "^7.0.0",
|
|
37
37
|
"@emotion/react": "^11.7.1",
|
|
38
38
|
"lodash": "^4.17.21"
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* This is hard-coded here because our actual <Header /> has no typings
|
|
3
|
-
* for its props.
|
|
4
|
-
*
|
|
5
|
-
* Adding types for real *might* break things so will need a little care.
|
|
6
|
-
*
|
|
7
|
-
* Defining it here for now lets us provide *something* without much headache.
|
|
8
|
-
*/
|
|
9
|
-
type HeaderProps = {
|
|
10
|
-
/**
|
|
11
|
-
* Width of the header item. Takes a string, or a number representing the width in pixels.
|
|
12
|
-
*/
|
|
13
|
-
width?: string | number;
|
|
14
|
-
};
|
|
15
|
-
|
|
16
|
-
const TableHeader = function (props: HeaderProps) {
|
|
17
|
-
return null;
|
|
18
|
-
};
|
|
19
|
-
|
|
20
|
-
export default TableHeader;
|
|
@@ -1,99 +0,0 @@
|
|
|
1
|
-
import { type ReactNode } from 'react';
|
|
2
|
-
|
|
3
|
-
import { type Item } from './table-tree';
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* This is hard-coded here because our actual <TableTree /> has no typings
|
|
7
|
-
* for its props.
|
|
8
|
-
*
|
|
9
|
-
* Adding types for real *might* break things so will need a little care.
|
|
10
|
-
*
|
|
11
|
-
* Defining it here for now lets us provide *something* without much headache.
|
|
12
|
-
*/
|
|
13
|
-
type RowProps = {
|
|
14
|
-
/**
|
|
15
|
-
* Whether the row has children.
|
|
16
|
-
*/
|
|
17
|
-
hasChildren?: boolean;
|
|
18
|
-
/**
|
|
19
|
-
* Children contained in the row. Should be one or more cell components.
|
|
20
|
-
*/
|
|
21
|
-
children?: React.ReactNode;
|
|
22
|
-
/**
|
|
23
|
-
* ID for the row item.
|
|
24
|
-
*/
|
|
25
|
-
itemId?: string;
|
|
26
|
-
/* eslint-disable jsdoc/require-asterisk-prefix, jsdoc/check-alignment */
|
|
27
|
-
/**
|
|
28
|
-
The data used to render the row and descendants. Pass down from `children` render prop.
|
|
29
|
-
|
|
30
|
-
In addition to these props, any other data can be added to the object, and it will
|
|
31
|
-
be provided as props when rendering each cell.
|
|
32
|
-
*/
|
|
33
|
-
// eslint-disable-next-line @repo/internal/react/consistent-props-definitions
|
|
34
|
-
items?: Item[] | null;
|
|
35
|
-
/**
|
|
36
|
-
* Controls the expanded state of the row.
|
|
37
|
-
*/
|
|
38
|
-
isExpanded?: ReactNode;
|
|
39
|
-
/**
|
|
40
|
-
* Sets the default expanded state of the row.
|
|
41
|
-
*/
|
|
42
|
-
isDefaultExpanded?: ReactNode;
|
|
43
|
-
/**
|
|
44
|
-
* This is the accessible name for the expand chevron button, used to tell assistive technology what the button is for.
|
|
45
|
-
*/
|
|
46
|
-
expandLabel?: string;
|
|
47
|
-
/**
|
|
48
|
-
* This is the accessible name for the collapse chevron button, used to tell assistive technology what the button is for.
|
|
49
|
-
*/
|
|
50
|
-
collapseLabel?: string;
|
|
51
|
-
/**
|
|
52
|
-
* Callback called when the row collapses.
|
|
53
|
-
*/
|
|
54
|
-
onCollapse?: (data: Item) => void;
|
|
55
|
-
/**
|
|
56
|
-
* Callback called when the row expands.
|
|
57
|
-
*/
|
|
58
|
-
onExpand?: (data: Item) => void;
|
|
59
|
-
/**
|
|
60
|
-
* Children to render under the row.
|
|
61
|
-
* This is normally set by the parent item component, and doesn't need to be configured.
|
|
62
|
-
*/
|
|
63
|
-
renderChildren?: () => React.ReactNode;
|
|
64
|
-
/**
|
|
65
|
-
Use this to set whether a row with children should expand when clicked anywhere within the row. If `false` or unset, a row with children will only expand when the chevron is clicked.
|
|
66
|
-
|
|
67
|
-
If your cells contain interactive elements, always set this to `false` to avoid unexpected expanding or collapsing.
|
|
68
|
-
*/
|
|
69
|
-
shouldExpandOnClick?: boolean;
|
|
70
|
-
/**
|
|
71
|
-
* Data to render. Passed down by `item` and passed into `onExpand` and `onCollapse` callbacks.
|
|
72
|
-
* This is normally set by the parent `item` component, and doesn't need to be configured.
|
|
73
|
-
*/
|
|
74
|
-
// eslint-disable-next-line @repo/internal/react/consistent-props-definitions
|
|
75
|
-
data?: Item;
|
|
76
|
-
/**
|
|
77
|
-
* The depth used for rendering an indent.
|
|
78
|
-
* This is normally set by parent `item` component, and doesn't need to be configured.
|
|
79
|
-
*/
|
|
80
|
-
depth?: number;
|
|
81
|
-
/**
|
|
82
|
-
Adds detail to the expand and collapse row button's aria label by appending the value from the given column. If you don't set this prop, the aria label will read out "Expand `itemId` row".
|
|
83
|
-
|
|
84
|
-
Should be a string when we pass data via `items` property in the table tree. The value should be one of the property `columns` names in the table tree.
|
|
85
|
-
|
|
86
|
-
Should be a number when we pass data via the `Rows` component as children in the table tree.
|
|
87
|
-
*/
|
|
88
|
-
mainColumnForExpandCollapseLabel?: string | number;
|
|
89
|
-
};
|
|
90
|
-
|
|
91
|
-
const TableRow = function (props: RowProps) {
|
|
92
|
-
return null;
|
|
93
|
-
};
|
|
94
|
-
|
|
95
|
-
TableRow.defaultProps = {
|
|
96
|
-
isDefaultExpanded: false,
|
|
97
|
-
};
|
|
98
|
-
|
|
99
|
-
export default TableRow;
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import { type Item } from './table-tree';
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* This is hard-coded here because our actual <Rows /> has no typings
|
|
5
|
-
* for its props.
|
|
6
|
-
*
|
|
7
|
-
* Adding types for real *might* break things so will need a little care.
|
|
8
|
-
*
|
|
9
|
-
* Defining it here for now lets us provide *something* without much headache.
|
|
10
|
-
*/
|
|
11
|
-
type RowsProps = {
|
|
12
|
-
/* eslint-disable jsdoc/require-asterisk-prefix, jsdoc/check-alignment */
|
|
13
|
-
/**
|
|
14
|
-
The data used to render the set of rows. Will be passed down via the `children` render prop.
|
|
15
|
-
|
|
16
|
-
In addition to these props, any other data can be added to the object, and it will
|
|
17
|
-
be provided as props when rendering each cell.
|
|
18
|
-
*/
|
|
19
|
-
// eslint-disable-next-line @repo/internal/react/consistent-props-definitions
|
|
20
|
-
items?: Item[] | null;
|
|
21
|
-
/* eslint-enable jsdoc/require-asterisk-prefix, jsdoc/check-alignment */
|
|
22
|
-
/**
|
|
23
|
-
* This is an accessible name for the loading state's spinner.
|
|
24
|
-
* The default text is "Loading".
|
|
25
|
-
*/
|
|
26
|
-
loadingLabel?: string | null;
|
|
27
|
-
/**
|
|
28
|
-
* Render function for child rows. Render props will contain an item from the
|
|
29
|
-
* `items` prop above.
|
|
30
|
-
*/
|
|
31
|
-
render?: (item: Item) => React.ReactNode;
|
|
32
|
-
};
|
|
33
|
-
|
|
34
|
-
const TableRows = function (props: RowsProps) {
|
|
35
|
-
return null;
|
|
36
|
-
};
|
|
37
|
-
|
|
38
|
-
TableRows.defaultProps = {};
|
|
39
|
-
|
|
40
|
-
export default TableRows;
|
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
import { type ElementType, type ReactNode } from 'react';
|
|
2
|
-
|
|
3
|
-
class Content extends Object {}
|
|
4
|
-
|
|
5
|
-
export type Item = {
|
|
6
|
-
id: string;
|
|
7
|
-
hasChildren: boolean;
|
|
8
|
-
children?: Item[];
|
|
9
|
-
};
|
|
10
|
-
|
|
11
|
-
/**
|
|
12
|
-
* This is hard-coded here because our actual <TableTree /> has no typings
|
|
13
|
-
* for its props.
|
|
14
|
-
*
|
|
15
|
-
* Adding types for real *might* break things so will need a little care.
|
|
16
|
-
*
|
|
17
|
-
* Defining it here for now lets us provide *something* without much headache.
|
|
18
|
-
*/
|
|
19
|
-
type TableTreeProps = {
|
|
20
|
-
/**
|
|
21
|
-
* The contents of the table.
|
|
22
|
-
* Use this when composing `Cell`, `Header`, `Headers`, `Row`, and `Rows` components.
|
|
23
|
-
* For basic usage, it's simpler to specify table contents with the `items` prop instead.
|
|
24
|
-
*/
|
|
25
|
-
children?: ReactNode;
|
|
26
|
-
/**
|
|
27
|
-
* Each column component is used to render the cells in that column.
|
|
28
|
-
* A cell's `content` value, specified in the data passed to `items`, is provided as props.
|
|
29
|
-
*/
|
|
30
|
-
columns?: ElementType<Content>[];
|
|
31
|
-
/**
|
|
32
|
-
* The widths of the columns in the table.
|
|
33
|
-
*/
|
|
34
|
-
columnWidths?: (string | number)[];
|
|
35
|
-
/**
|
|
36
|
-
* The header text of the columns of the table.
|
|
37
|
-
*/
|
|
38
|
-
headers?: string[];
|
|
39
|
-
/* eslint-disable jsdoc/require-asterisk-prefix, jsdoc/check-alignment */
|
|
40
|
-
/**
|
|
41
|
-
Use this to set whether a row with children should expand when clicked anywhere within the row. If `false` or unset, a row with children will only expand when the chevron is clicked.
|
|
42
|
-
|
|
43
|
-
If your cells contain interactive elements, always set this to `false` to avoid unexpected expanding or collapsing.
|
|
44
|
-
|
|
45
|
-
If you aren’t using the `items` prop, `shouldExpandOnClick` should be used on the row component instead.
|
|
46
|
-
*/
|
|
47
|
-
shouldExpandOnClick?: boolean;
|
|
48
|
-
/**
|
|
49
|
-
The data used to render the table. If you’re creating a basic table, use this prop instead of composing cell, header, headers, row, and rows components.
|
|
50
|
-
|
|
51
|
-
In addition to the `items` props, any other data can be added, and it will
|
|
52
|
-
be provided as props when rendering each cell.
|
|
53
|
-
*/
|
|
54
|
-
// eslint-disable-next-line @repo/internal/react/consistent-props-definitions
|
|
55
|
-
items?: Item[] | null;
|
|
56
|
-
/**
|
|
57
|
-
* The value used to extend the expand or collapse button label in cases where `row` has child rows.
|
|
58
|
-
* It should be a string when we pass data via the `items` property, the value should be one of the `columns` names.
|
|
59
|
-
* It should be a number when we pass data via the `rows` component as children in the table tree.
|
|
60
|
-
*/
|
|
61
|
-
mainColumnForExpandCollapseLabel?: string | number;
|
|
62
|
-
/**
|
|
63
|
-
* This is an `aria-label` attribute. Use the label to describe the table for assistive technologies.
|
|
64
|
-
* Usage of either this, or the `labelId` attribute is strongly recommended.
|
|
65
|
-
*/
|
|
66
|
-
label?: string;
|
|
67
|
-
/**
|
|
68
|
-
* This is an `aria-labelledby` attribute. Pass an ID for the element which should define an accessible name for the table.
|
|
69
|
-
* Usage of either this, or the `label` attribute is strongly recommended.
|
|
70
|
-
*/
|
|
71
|
-
referencedLabel?: string;
|
|
72
|
-
};
|
|
73
|
-
|
|
74
|
-
export default function (props: TableTreeProps) {
|
|
75
|
-
return null;
|
|
76
|
-
}
|