playbook_ui 13.18.0.pre.alpha.PBNTR191AdvancedTableFinalFixes2176 → 13.18.0.pre.alpha.PLAY12062177

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: e66e5423d58b5978e3a4f4cdbb8aa6d2cf49957aa3a488b225c55efa29613511
4
- data.tar.gz: 92e6cf4abbbbbd196684ef9a1ba9e98c70fc320f8b50113c38601af9becaa6af
3
+ metadata.gz: a740b3ef475875baabe4286f70025efcc3bf6a921b6232814b4abc5a3b952cf8
4
+ data.tar.gz: eab607b01ab71bdf312d0ccd9b92ff9a54ddf688657e58ada68c545046532a7b
5
5
  SHA512:
6
- metadata.gz: 0f408270ac43cbbee831ed5d27e43e8fa4fdc5880fb89abf48f2e33814fee3f5d4d00f758dcdbc80a2f76ffc9a872fe06c9a696a9f595e11ce6807455fdae5cb
7
- data.tar.gz: a28974b35f4ad2bc06a7f76491e510dc09a121e171e056b5b4b1653afc4898395219f72b52401472973c4979c1b77c7f7c0b04f74938c5c40ac4b923c290d56e
6
+ metadata.gz: afeee437dc320d7042b28d061c94a4821037b0af4862aa7ba56ebcaa474c0bba3c2ac52df0cbe96d47d6a6b90bdb7b346aab99653ed46ec226064998670f812b
7
+ data.tar.gz: bf328b19bef5e5725cbaae856699127d715a75f74ae151eef2c68b135c3d56b92ac79ab89cfe3ca4b4745660b7528c7cfd0dfb53c774d3275986440b6ebc75fd
@@ -22,14 +22,13 @@ export const CustomCell = ({
22
22
  row,
23
23
  value,
24
24
  }: CustomCellProps & GlobalProps) => {
25
- const { setExpanded, expanded, inlineRowLoading } = useContext(AdvancedTableContext);
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
- const RowHasChildren = row.original.children ? true : false
32
- const renderButton = inlineRowLoading ? RowHasChildren : row.getCanExpand()
33
32
 
34
33
  return (
35
34
  <div style={{ paddingLeft: `${row.depth * 1.25}em` }}>
@@ -37,7 +36,7 @@ export const CustomCell = ({
37
36
  columnGap="xs"
38
37
  orientation="row"
39
38
  >
40
- {renderButton ? (
39
+ {!RowWithoutChildren ? (
41
40
  <button
42
41
  className="gray-icon expand-toggle-icon"
43
42
  onClick={() => handleOnExpand(row)}
@@ -54,7 +53,7 @@ export const CustomCell = ({
54
53
  )}
55
54
  </button>
56
55
  ) : null}
57
- <FlexItem paddingLeft={renderButton? "none" : "xs"}>
56
+ <FlexItem paddingLeft={!RowWithoutChildren ? "none" : "xs"}>
58
57
  {row.depth === 0 ? getValue() : value}
59
58
  </FlexItem>
60
59
  </Flex>
@@ -1,9 +1,8 @@
1
- import React, { useContext } from "react"
1
+ import React from "react"
2
2
  import Flex from "../../pb_flex/_flex"
3
3
  import Caption from "../../pb_caption/_caption"
4
4
  import { Row, Table } from "@tanstack/react-table"
5
5
 
6
- import AdvancedTableContext from "../Context/AdvancedTableContext";
7
6
  import { ToggleIconButton } from "./ToggleIconButton"
8
7
  import { renderCollapsibleTrail } from "./CollapsibleTrail"
9
8
 
@@ -13,7 +12,7 @@ import { GlobalProps } from "../../utilities/globalProps"
13
12
 
14
13
  interface SubRowHeaderRowProps {
15
14
  collapsibleTrail?: boolean
16
- enableToggleExpansion?: "all" | "header" | "none"
15
+ enableToggleExpansion?: "all" | "header"
17
16
  onClick: (row: Row<DataType>) => void
18
17
  row: Row<DataType>
19
18
  subRowHeaders?: string[]
@@ -28,11 +27,7 @@ export const SubRowHeaderRow = ({
28
27
  subRowHeaders,
29
28
  table,
30
29
  }: SubRowHeaderRowProps & GlobalProps) => {
31
- const { inlineRowLoading } = useContext(AdvancedTableContext);
32
-
33
30
  const numberOfColumns = table.getAllFlatColumns().length
34
- const rowHasChildren = row.original.children ? true : false
35
- const canExpand = inlineRowLoading ? rowHasChildren : row.getCanExpand()
36
31
 
37
32
  return (
38
33
  <tr className="custom-row bg-silver">
@@ -47,13 +42,13 @@ export const SubRowHeaderRow = ({
47
42
  <Flex align="center"
48
43
  columnGap="xs"
49
44
  >
50
- {enableToggleExpansion === "all" && canExpand ? (
45
+ {enableToggleExpansion === "all" && row.getCanExpand() ? (
51
46
  <ToggleIconButton onClick={onClick}
52
47
  row={row}
53
48
  />
54
49
  ) : null}
55
50
  <Caption
56
- marginLeft={canExpand ? "none" : "xs"}
51
+ marginLeft={row.getCanExpand() ? "none" : "xs"}
57
52
  text={subRowHeaders[row.depth - 1]}
58
53
  />
59
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,46 +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
- inlineRowLoading,
35
24
  loading,
36
25
  table,
37
26
  } = useContext(AdvancedTableContext)
38
-
39
- const classes = classnames(
40
- buildCss("pb_advanced_table_body"),
41
- globalProps(props),
42
- className
43
- );
44
-
45
27
  return (
46
28
  <>
47
- <tbody className={classes}
48
- id={id}
49
- >
29
+ <tbody>
50
30
  {table.getRowModel().rows.map((row: Row<DataType>) => {
51
31
  const isExpandable = row.getIsExpanded()
52
32
  const isFirstChildofSubrow = row.depth > 0 && row.index === 0
53
- const rowHasNoChildren = row.original.children && !row.original.children.length ? true : false
33
+ const rowHasNoChildren = !row.original.children?.length
54
34
  const numberOfColumns = table.getAllFlatColumns().length
55
- const isDataLoading = isExpandable && (inlineRowLoading && rowHasNoChildren) && (row.depth < columnDefinitions[0].cellAccessors?.length)
56
35
 
57
36
  return (
58
37
  <React.Fragment key={`${row.index}-${row.id}-${row.depth}-row`}>
@@ -100,11 +79,9 @@ export const TableBody = ({
100
79
  </tr>
101
80
 
102
81
  {/* Display LoadingInline if Row Data is querying and there are no children already */}
103
- {isDataLoading ? (
82
+ {isExpandable && rowHasNoChildren && row.depth === 0 ? (
104
83
  <tr key={`${row.id}-row`}>
105
- <td colSpan={numberOfColumns}
106
- style={{ paddingLeft: `${row.depth === 0 ? 0.5 : (row.depth * 2)}em` }}
107
- >
84
+ <td colSpan={numberOfColumns}>
108
85
  <LoadingInline />
109
86
  </td>
110
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,12 +28,10 @@ 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
- inlineRowLoading?: boolean;
37
35
  loading?: boolean | string;
38
36
  onRowToggleClick?: (arg: Row<DataType>) => void;
39
37
  onToggleExpansionClick?: (arg: Row<DataType>) => void;
@@ -53,10 +51,8 @@ const AdvancedTable = (props: AdvancedTableProps) => {
53
51
  data = {},
54
52
  enableToggleExpansion = "header",
55
53
  expandedControl,
56
- htmlOptions = {},
57
54
  id,
58
55
  initialLoadingRowsCount = 10,
59
- inlineRowLoading = false,
60
56
  loading,
61
57
  onRowToggleClick,
62
58
  onToggleExpansionClick,
@@ -108,9 +104,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
108
104
  const depthAccessor = cellAccessors[row.depth - 1]; // Adjust index for depth
109
105
  const accessorValue = rowData[depthAccessor];
110
106
  return accessorValue ? (
111
- <CustomCell
112
- onRowToggleClick={onRowToggleClick}
113
- row={row}
107
+ <CustomCell row={row}
114
108
  value={accessorValue}
115
109
  />
116
110
  ) : (
@@ -201,7 +195,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
201
195
 
202
196
  const ariaProps = buildAriaProps(aria);
203
197
  const dataProps = buildDataProps(data);
204
- const htmlProps = buildHtmlProps(htmlOptions);
205
198
  const classes = classnames(
206
199
  buildCss("pb_advanced_table"),
207
200
  globalProps(props),
@@ -211,22 +204,19 @@ const AdvancedTable = (props: AdvancedTableProps) => {
211
204
  return (
212
205
  <div {...ariaProps}
213
206
  {...dataProps}
214
- {...htmlProps}
215
207
  className={classes}
216
208
  id={id}
217
209
  >
218
210
  <AdvancedTableContext.Provider
219
211
  value={{
220
- columnDefinitions,
221
- enableToggleExpansion,
222
- expanded,
212
+ table,
223
213
  handleExpandOrCollapse,
224
- inlineRowLoading,
225
214
  loading,
215
+ enableToggleExpansion,
216
+ toggleExpansionIcon,
226
217
  setExpanded,
218
+ expanded,
227
219
  sortControl,
228
- table,
229
- toggleExpansionIcon,
230
220
  }}
231
221
  >
232
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
- });
@@ -3,13 +3,14 @@ import React, { ReactNode, useState } from 'react'
3
3
  import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
4
4
  import PbReactPopover from '../../pb_popover/_popover'
5
5
 
6
- type FiltersPopoverProps = {
6
+ type FiltersPopoverProps = {
7
7
  children?: React.ReactChild[] | React.ReactChild | (({closePopover}: {closePopover: () => void}) => ReactNode),
8
8
  dark?: boolean,
9
+ maxHeight?: string,
9
10
  minWidth?: string,
10
11
  placement?: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end",
11
12
  }
12
- const FiltersPopover = ({ children, dark, minWidth, placement = "bottom-start" }: FiltersPopoverProps): React.ReactElement => {
13
+ const FiltersPopover = ({ children, dark, maxHeight, minWidth, placement = "bottom-start" }: FiltersPopoverProps): React.ReactElement => {
13
14
  const [hide, updateHide] = useState(true)
14
15
  const toggle = () => updateHide(!hide)
15
16
 
@@ -26,6 +27,7 @@ const FiltersPopover = ({ children, dark, minWidth, placement = "bottom-start" }
26
27
  return (
27
28
  <PbReactPopover
28
29
  closeOnClick="outside"
30
+ maxHeight={maxHeight}
29
31
  minWidth={minWidth}
30
32
  placement={placement}
31
33
  reference={filterButton}
@@ -69,14 +69,14 @@
69
69
  <% end %>
70
70
  <% end %>
71
71
 
72
- <% if object.template != "sort_only"%>
73
- <%= pb_rails("popover", props: {min_width: object.min_width, close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: object.placement }) do %>
72
+ <% if object.template != "sort_only" %>
73
+ <%= pb_rails("popover", props: object.popover_props) do %>
74
74
  <%= content %>
75
75
  <% end %>
76
76
  <%end%>
77
77
 
78
- <% if object.template != "filter_only"%>
79
- <%= pb_rails("popover", props: {classname: "pb_filter_sort_menu", close_on_click: "outside", trigger_element_id: "sort-button#{object.id}", tooltip_id: "sort-filter-btn-tooltip#{object.id}", position: object.placement , padding: 'none'}) do %>
78
+ <% if object.template != "filter_only" %>
79
+ <%= pb_rails("popover", props: object.popover_props) do %>
80
80
  <%= pb_rails("list") do %>
81
81
  <% object.sort_menu.each do |item| %>
82
82
  <%= pb_rails("list/item") do%> <%= pb_rails("button", props: {variant: "link" ,classname: "p-0", text: item[:item], link: item[:link]}) %><% end %>
@@ -10,6 +10,7 @@ module Playbook
10
10
  values: %w[default single filter_only sort_only],
11
11
  default: "default"
12
12
  prop :background, type: Playbook::Props::Boolean, default: true
13
+ prop :max_height
13
14
  prop :min_width, default: "auto"
14
15
  prop :placement, type: Playbook::Props::Enum,
15
16
  values: %w[top bottom left right top-start top-end bottom-start bottom-end right-start right-end left-start left-end],
@@ -31,7 +32,7 @@ module Playbook
31
32
  end
32
33
 
33
34
  def wrapper(&block)
34
- if object.background
35
+ if background
35
36
  pb_rails("card", props: { padding: "none" }, &block)
36
37
  else
37
38
  capture(&block)
@@ -48,6 +49,29 @@ module Playbook
48
49
  ""
49
50
  end
50
51
  end
52
+
53
+ def popover_props
54
+ if template != "sort_only"
55
+ {
56
+ max_height: max_height,
57
+ min_width: min_width,
58
+ close_on_click: "outside",
59
+ trigger_element_id: "filter#{id}",
60
+ tooltip_id: "filter-form#{id}",
61
+ position: placement,
62
+ }
63
+ elsif template != "filter_only"
64
+ {
65
+ max_height: max_height,
66
+ classname: "pb_filter_sort_menu",
67
+ close_on_click: "outside",
68
+ trigger_element_id: "sort-button#{id}",
69
+ tooltip_id: "sort-filter-btn-tooltip#{id}",
70
+ position: placement,
71
+ padding: "none",
72
+ }
73
+ end
74
+ end
51
75
  end
52
76
  end
53
77
  end
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "13.18.0"
5
- VERSION = "13.18.0.pre.alpha.PBNTR191AdvancedTableFinalFixes2176"
5
+ VERSION = "13.18.0.pre.alpha.PLAY12062177"
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.PBNTR191AdvancedTableFinalFixes2176
4
+ version: 13.18.0.pre.alpha.PLAY12062177
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX