playbook_ui 13.18.0.pre.alpha.PBNTR191AdvancedTableFinalFixes2159 → 13.18.0.pre.alpha.dependabotnpmandyarnpowerhomeplaybookicons001alpha52174

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: ed6b5c8bc5abff794a42552366bce14785ce52a52f77e4897a96c59279b6bab0
4
- data.tar.gz: 0b1feee9f1e0abafb95db62e695a1c4df57a95f82e0acdf0e079a9febf22f52c
3
+ metadata.gz: 07df5a51ff6cc545fc766152e6b29c93c3dbb93490e376860bce3b7cd5ed29ac
4
+ data.tar.gz: 50b2552c1b512542cf7aa2731ac8a8da39fd3c80a429fb9dee7553ad80edd8e3
5
5
  SHA512:
6
- metadata.gz: 73a5a055067a0942784bb05576cf3cfc1002be59a2a06a061ea130da7f2eb561d86f61db61704874231d209ad32ead88ae47775058d43e2a7aba2bf4f73942ac
7
- data.tar.gz: 2bff7638226878a69f3c8b7d3eed25c0a794be24894f82164983b8829d46c9cf874ec880f18e396052b615cc58d824420058fff6a698d23848b43bec7e674481
6
+ metadata.gz: cf46489def90ccc21c247e68e54e9864fb3d4bd2a53cd6fa7cf0be8a04019e46dcf7184677e1499b4ad16b9d415efde26784320e7ecb077d0f697480ae8a0877
7
+ data.tar.gz: bb93a071c1a739c0e47776b3ba4dcba3a53b3e9ba46e9c8bf8c090420429c2a7d9dfcfa5809392dbac7eae92c6025f263bb2685240ce9d305b2fec8f676bf843
@@ -23,22 +23,20 @@ export const CustomCell = ({
23
23
  value,
24
24
  }: CustomCellProps & GlobalProps) => {
25
25
  const { setExpanded, expanded } = useContext(AdvancedTableContext);
26
+ const RowWithoutChildren = row.originalSubRows === undefined;
26
27
 
27
28
  const handleOnExpand = (row: Row<DataType>) => {
28
29
  onRowToggleClick && onRowToggleClick(row);
29
30
  setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() });
30
31
  };
31
32
 
32
- const RowHasChildren = row.original.children ? true : false
33
-
34
-
35
33
  return (
36
34
  <div style={{ paddingLeft: `${row.depth * 1.25}em` }}>
37
35
  <Flex alignItems="center"
38
36
  columnGap="xs"
39
37
  orientation="row"
40
38
  >
41
- {RowHasChildren ? (
39
+ {!RowWithoutChildren ? (
42
40
  <button
43
41
  className="gray-icon expand-toggle-icon"
44
42
  onClick={() => handleOnExpand(row)}
@@ -55,7 +53,7 @@ export const CustomCell = ({
55
53
  )}
56
54
  </button>
57
55
  ) : null}
58
- <FlexItem paddingLeft={RowHasChildren? "none" : "xs"}>
56
+ <FlexItem paddingLeft={!RowWithoutChildren ? "none" : "xs"}>
59
57
  {row.depth === 0 ? getValue() : value}
60
58
  </FlexItem>
61
59
  </Flex>
@@ -12,7 +12,7 @@ import { GlobalProps } from "../../utilities/globalProps"
12
12
 
13
13
  interface SubRowHeaderRowProps {
14
14
  collapsibleTrail?: boolean
15
- enableToggleExpansion?: "all" | "header" | "none"
15
+ enableToggleExpansion?: "all" | "header"
16
16
  onClick: (row: Row<DataType>) => void
17
17
  row: Row<DataType>
18
18
  subRowHeaders?: string[]
@@ -28,7 +28,6 @@ export const SubRowHeaderRow = ({
28
28
  table,
29
29
  }: SubRowHeaderRowProps & GlobalProps) => {
30
30
  const numberOfColumns = table.getAllFlatColumns().length
31
- const canExpand = row.depth < subRowHeaders.length
32
31
 
33
32
  return (
34
33
  <tr className="custom-row bg-silver">
@@ -43,13 +42,13 @@ export const SubRowHeaderRow = ({
43
42
  <Flex align="center"
44
43
  columnGap="xs"
45
44
  >
46
- {enableToggleExpansion === "all" && canExpand ? (
45
+ {enableToggleExpansion === "all" && row.getCanExpand() ? (
47
46
  <ToggleIconButton onClick={onClick}
48
47
  row={row}
49
48
  />
50
49
  ) : null}
51
50
  <Caption
52
- marginLeft={canExpand ? "none" : "xs"}
51
+ marginLeft={row.getCanExpand() ? "none" : "xs"}
53
52
  text={subRowHeaders[row.depth - 1]}
54
53
  />
55
54
  </Flex>
@@ -12,10 +12,11 @@ import { GlobalProps } from "../../utilities/globalProps"
12
12
 
13
13
  type TableHeaderCellProps = {
14
14
  enableSorting?: boolean
15
- enableToggleExpansion?: "all" | "header" | "none"
15
+ enableToggleExpansion?: "all" | "header"
16
16
  handleExpandOrCollapse?: () => void
17
17
  header?: Header<DataType, unknown>
18
18
  headerChildren?: React.ReactNode | React.ReactNode[]
19
+ headerId?: string
19
20
  loading?: boolean
20
21
  sortIcon?: string | string[]
21
22
  } & GlobalProps
@@ -26,6 +27,7 @@ export const TableHeaderCell = ({
26
27
  handleExpandOrCollapse,
27
28
  header,
28
29
  headerChildren,
30
+ headerId,
29
31
  loading,
30
32
  sortIcon,
31
33
  }: TableHeaderCellProps) => {
@@ -48,22 +50,10 @@ const cellClassName = classnames("table-header-cells",
48
50
  );
49
51
 
50
52
  const cellId = `${loading ?
51
- `loading-${header.id}`
52
- : `${header.id}`
53
+ `loading-${header.id}${headerId ? `-${headerId}` : ""}`
54
+ : `${header.id}${headerId ? `-${headerId}` : ""}`
53
55
  }`;
54
56
 
55
- const isToggleExpansionEnabledLoading =
56
- header.index === 0 &&
57
- loading &&
58
- (enableToggleExpansion === "all" || "header") &&
59
- enableToggleExpansion !== "none";
60
-
61
- const isToggleExpansionEnabled =
62
- header.index === 0 &&
63
- !loading &&
64
- (enableToggleExpansion === "all" || "header") &&
65
- enableToggleExpansion !== "none";
66
-
67
57
  return (
68
58
  <th
69
59
  align="right"
@@ -83,11 +73,15 @@ const isToggleExpansionEnabled =
83
73
  alignItems="center"
84
74
  justify={header.index === 0 && enableSorting ? "between" : header.index === 0 && !enableSorting ? "start" : "end"}
85
75
  >
86
- {isToggleExpansionEnabled && (
76
+ {header.index === 0 &&
77
+ !loading &&
78
+ (enableToggleExpansion === "all" || "header") && (
87
79
  <ToggleIconButton onClick={handleExpandOrCollapse} />
88
80
  )}
89
81
 
90
- {isToggleExpansionEnabledLoading &&(
82
+ {header.index === 0 &&
83
+ loading &&
84
+ (enableToggleExpansion === "all" || "header") && (
91
85
  <div className="loading-toggle-icon header-toggle-icon" />
92
86
  )}
93
87
 
@@ -1,7 +1,4 @@
1
1
  import React, { useContext } from "react"
2
- import classnames from "classnames";
3
- import { buildCss } from "../../utilities/props";
4
- import { globalProps } from "../../utilities/globalProps";
5
2
  import LoadingInline from "../../pb_loading_inline/_loading_inline"
6
3
  import { flexRender, Row } from "@tanstack/react-table"
7
4
 
@@ -13,45 +10,28 @@ import { isChrome } from "../Utilities/BrowserCheck"
13
10
  import { DataType } from "../Utilities/types"
14
11
 
15
12
  type TableBodyProps = {
16
- className?: string;
17
13
  collapsibleTrail?: boolean
18
- id?: string;
19
14
  subRowHeaders?: string[]
20
15
  }
21
16
 
22
17
  export const TableBody = ({
23
- className,
24
18
  collapsibleTrail = true,
25
- id,
26
19
  subRowHeaders,
27
- ...props
28
20
  }: TableBodyProps) => {
29
-
30
21
  const {
31
- columnDefinitions,
32
22
  enableToggleExpansion,
33
23
  handleExpandOrCollapse,
34
24
  loading,
35
25
  table,
36
26
  } = useContext(AdvancedTableContext)
37
-
38
- const classes = classnames(
39
- buildCss("pb_advanced_table_body"),
40
- globalProps(props),
41
- className
42
- );
43
-
44
27
  return (
45
28
  <>
46
- <tbody className={classes}
47
- id={id}
48
- >
29
+ <tbody>
49
30
  {table.getRowModel().rows.map((row: Row<DataType>) => {
50
31
  const isExpandable = row.getIsExpanded()
51
32
  const isFirstChildofSubrow = row.depth > 0 && row.index === 0
52
- const rowHasNoChildren = row.original.children && !row.original.children.length ? true : false
33
+ const rowHasNoChildren = !row.original.children?.length
53
34
  const numberOfColumns = table.getAllFlatColumns().length
54
- const isDataLoading = isExpandable && rowHasNoChildren && (row.depth < columnDefinitions[0].cellAccessors?.length)
55
35
 
56
36
  return (
57
37
  <React.Fragment key={`${row.index}-${row.id}-${row.depth}-row`}>
@@ -99,11 +79,9 @@ export const TableBody = ({
99
79
  </tr>
100
80
 
101
81
  {/* Display LoadingInline if Row Data is querying and there are no children already */}
102
- {isDataLoading ? (
82
+ {isExpandable && rowHasNoChildren && row.depth === 0 ? (
103
83
  <tr key={`${row.id}-row`}>
104
- <td colSpan={numberOfColumns}
105
- style={{ paddingLeft: `${row.depth === 0 ? 0.5 : (row.depth * 2)}em` }}
106
- >
84
+ <td colSpan={numberOfColumns}>
107
85
  <LoadingInline />
108
86
  </td>
109
87
  </tr>
@@ -1,7 +1,4 @@
1
1
  import React, { useContext } from "react"
2
- import classnames from "classnames";
3
- import { buildCss } from "../../utilities/props";
4
- import { globalProps } from "../../utilities/globalProps";
5
2
  import { HeaderGroup } from "@tanstack/react-table"
6
3
  import AdvancedTableContext from "../Context/AdvancedTableContext"
7
4
  import { TableHeaderCell } from "../Components/TableHeaderCell"
@@ -9,19 +6,16 @@ import { DataType } from "../Utilities/types"
9
6
 
10
7
  type TableHeaderProps = {
11
8
  children?: React.ReactNode | React.ReactNode[]
12
- className?: string
13
9
  enableSorting?: boolean
14
- id?: string;
10
+ headerId?: string
15
11
  sortIcon?: string | string[]
16
12
  }
17
13
 
18
14
  export const TableHeader = ({
19
15
  children,
20
- className,
21
16
  enableSorting = false,
22
- id,
17
+ headerId,
23
18
  sortIcon = ["arrow-up-short-wide", "arrow-down-short-wide"],
24
- ...props
25
19
  }: TableHeaderProps) => {
26
20
  const {
27
21
  enableToggleExpansion,
@@ -30,18 +24,9 @@ export const TableHeader = ({
30
24
  table,
31
25
  } = useContext(AdvancedTableContext)
32
26
 
33
- const classes = classnames(
34
- buildCss("pb_advanced_table_header"),
35
- globalProps(props),
36
- className
37
- );
38
-
39
-
40
27
  return (
41
28
  <>
42
- <thead className={classes}
43
- id={id}
44
- >
29
+ <thead>
45
30
  {/* Get the header groups (only one in this example) */}
46
31
  {table.getHeaderGroups().map((headerGroup: HeaderGroup<DataType>) => (
47
32
  <tr key={`${headerGroup.id}-headerGroup`}>
@@ -52,6 +37,7 @@ export const TableHeader = ({
52
37
  handleExpandOrCollapse={handleExpandOrCollapse}
53
38
  header={header}
54
39
  headerChildren={children}
40
+ headerId={headerId}
55
41
  key={`${header.id}-header`}
56
42
  loading={loading}
57
43
  sortIcon={sortIcon}
@@ -24,9 +24,10 @@ export const updateExpandAndCollapseState = (
24
24
  // Update isExpansionConsistent variable
25
25
  for (const row of rows) {
26
26
  if (
27
- targetParent === undefined
27
+ row.getCanExpand() &&
28
+ (targetParent === undefined
28
29
  ? row.depth === 0
29
- : targetParent === row.parentId
30
+ : targetParent === row.parentId)
30
31
  ) {
31
32
  areRowsExpanded.add(row.getIsExpanded())
32
33
  if (areRowsExpanded.size > 1) {
@@ -47,7 +48,7 @@ export const updateExpandAndCollapseState = (
47
48
  })
48
49
  } else {
49
50
  for (const row of rows) {
50
- if (targetParent === row.parentId) {
51
+ if (row.getCanExpand() && targetParent === row.parentId) {
51
52
  updateExpandedRows[row.id] = !isExpansionConsistent
52
53
  ? true
53
54
  : !row.getIsExpanded()
@@ -1,6 +1,6 @@
1
1
  import React, { useState, useEffect, useCallback } from "react";
2
2
  import classnames from "classnames";
3
- import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
3
+ import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
4
4
  import { globalProps, GlobalProps } from "../utilities/globalProps";
5
5
  import Table from "../pb_table/_table";
6
6
  import {
@@ -28,9 +28,8 @@ type AdvancedTableProps = {
28
28
  className?: string;
29
29
  columnDefinitions: DataType[];
30
30
  data?: { [key: string]: string };
31
- enableToggleExpansion?: "all" | "header" | "none";
31
+ enableToggleExpansion?: "all" | "header";
32
32
  expandedControl?: DataType;
33
- htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
34
33
  id?: string;
35
34
  initialLoadingRowsCount?: number;
36
35
  loading?: boolean | string;
@@ -52,7 +51,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
52
51
  data = {},
53
52
  enableToggleExpansion = "header",
54
53
  expandedControl,
55
- htmlOptions = {},
56
54
  id,
57
55
  initialLoadingRowsCount = 10,
58
56
  loading,
@@ -106,9 +104,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
106
104
  const depthAccessor = cellAccessors[row.depth - 1]; // Adjust index for depth
107
105
  const accessorValue = rowData[depthAccessor];
108
106
  return accessorValue ? (
109
- <CustomCell
110
- onRowToggleClick={onRowToggleClick}
111
- row={row}
107
+ <CustomCell row={row}
112
108
  value={accessorValue}
113
109
  />
114
110
  ) : (
@@ -199,7 +195,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
199
195
 
200
196
  const ariaProps = buildAriaProps(aria);
201
197
  const dataProps = buildDataProps(data);
202
- const htmlProps = buildHtmlProps(htmlOptions);
203
198
  const classes = classnames(
204
199
  buildCss("pb_advanced_table"),
205
200
  globalProps(props),
@@ -209,21 +204,19 @@ const AdvancedTable = (props: AdvancedTableProps) => {
209
204
  return (
210
205
  <div {...ariaProps}
211
206
  {...dataProps}
212
- {...htmlProps}
213
207
  className={classes}
214
208
  id={id}
215
209
  >
216
210
  <AdvancedTableContext.Provider
217
211
  value={{
218
- columnDefinitions,
219
- enableToggleExpansion,
220
- expanded,
212
+ table,
221
213
  handleExpandOrCollapse,
222
214
  loading,
215
+ enableToggleExpansion,
216
+ toggleExpansionIcon,
223
217
  setExpanded,
218
+ expanded,
224
219
  sortControl,
225
- table,
226
- toggleExpansionIcon,
227
220
  }}
228
221
  >
229
222
  <Table
@@ -343,39 +343,3 @@ test("sort button exists and sorts column data", () => {
343
343
  const row2 = kit.getElementsByTagName('tr')[2]
344
344
  expect(row2.id).toBe("0-0-0-row")
345
345
  });
346
-
347
- test("Generates Table.Header default + custom classname", () => {
348
- render(
349
- <AdvancedTable
350
- columnDefinitions={columnDefinitions}
351
- data={{ testid: testId }}
352
- tableData={MOCK_DATA}
353
- >
354
- <AdvancedTable.Header className="custom-header" />
355
- <AdvancedTable.Body />
356
-
357
- </AdvancedTable>
358
- );
359
-
360
- const kit = screen.getByTestId(testId);
361
- const tableHeader = kit.querySelector('thead')
362
- expect(tableHeader).toHaveClass('pb_advanced_table_header custom-header')
363
- });
364
-
365
- test("Generates Table.Body default + custom classname", () => {
366
- render(
367
- <AdvancedTable
368
- columnDefinitions={columnDefinitions}
369
- data={{ testid: testId }}
370
- tableData={MOCK_DATA}
371
- >
372
- <AdvancedTable.Header />
373
- <AdvancedTable.Body className="custom-body-classname"/>
374
-
375
- </AdvancedTable>
376
- );
377
-
378
- const kit = screen.getByTestId(testId);
379
- const tableHeader = kit.querySelector('tbody')
380
- expect(tableHeader).toHaveClass('pb_advanced_table_body custom-body-classname')
381
- });
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "13.18.0"
5
- VERSION = "13.18.0.pre.alpha.PBNTR191AdvancedTableFinalFixes2159"
5
+ VERSION = "13.18.0.pre.alpha.dependabotnpmandyarnpowerhomeplaybookicons001alpha52174"
6
6
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 13.18.0.pre.alpha.PBNTR191AdvancedTableFinalFixes2159
4
+ version: 13.18.0.pre.alpha.dependabotnpmandyarnpowerhomeplaybookicons001alpha52174
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX