playbook_ui 14.17.0.pre.alpha.PLAY20547307 → 14.17.0.pre.alpha.aticonclosefix7325

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.
Files changed (28) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +2 -49
  3. data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableActions.ts +2 -1
  4. data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx +19 -29
  5. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +0 -3
  6. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +0 -3
  7. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +0 -1
  8. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -2
  9. data/app/pb_kits/playbook/pb_advanced_table/index.js +7 -0
  10. data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +1 -1
  11. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +1 -1
  12. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +1 -1
  13. data/app/pb_kits/playbook/pb_table/_table.tsx +2 -2
  14. data/dist/chunks/_typeahead-CHd0V9EL.js +22 -0
  15. data/dist/chunks/_weekday_stacked-CdE0nXPu.js +45 -0
  16. data/dist/chunks/{lib-Cj4H6j1c.js → lib-BV_AF_eh.js} +2 -2
  17. data/dist/chunks/{pb_form_validation-Bx1OK6xs.js → pb_form_validation-nsvkJU2J.js} +1 -1
  18. data/dist/chunks/vendor.js +1 -1
  19. data/dist/playbook-doc.js +1 -1
  20. data/dist/playbook-rails-react-bindings.js +1 -1
  21. data/dist/playbook-rails.js +1 -1
  22. data/dist/playbook.css +1 -1
  23. data/lib/playbook/version.rb +1 -1
  24. metadata +6 -8
  25. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.jsx +0 -65
  26. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.md +0 -9
  27. data/dist/chunks/_typeahead-DytFGjSn.js +0 -22
  28. data/dist/chunks/_weekday_stacked-B7twaUlt.js +0 -45
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 06c3be1f56543c7c3eaaa61b499fcd468b2d949490d1e63a9633466889d2a82f
4
- data.tar.gz: 40597dc6319352c9362e3f165228a93daa9adbe5853f3145581d038eb58a09b7
3
+ metadata.gz: '08949d72294c6b2c2fc44dc8d3716404b5940e7eb25db3e0b6b29e2b8f258395'
4
+ data.tar.gz: eabbfae2140786b0b6770e6896c093dcc9d3fba74ba798f193217e5add140780
5
5
  SHA512:
6
- metadata.gz: f013f65db3bc6a708f1009b8103d8da9f1dd0bd762b18a5c48dc8745160955249ea53ea784496257401ee0820499a441514f758d5ae6709aa928de5b1dee4a73
7
- data.tar.gz: bf8c87674cbf08d0b905a6c2b769c373c1d63c23a968010950ca1d35449cbe91c7e06a282f909244c9abcba56b2186812c38a9083ed0dca60446f354bde86dcb
6
+ metadata.gz: c68f79659149544dd46a41dd889584f860d4878190c16f91d1ff90313bfbcc7ba5d62654526e8d4d81dc76cf31a44eb791a21c52cae086d57d7ddde3145ba667
7
+ data.tar.gz: d440f257a2800fba3b4649d6576329faf84d4ee15c36d0dc15576303888abe001d0d2a776ef11ce0c94a3ee703c5f4c44237265beab3822e2d0767efa069b63f
@@ -1,6 +1,6 @@
1
1
  import React, { useContext } from "react"
2
2
  import classnames from "classnames"
3
- import { flexRender, Header, Table, RowModel } from "@tanstack/react-table"
3
+ import { flexRender, Header, Table } from "@tanstack/react-table"
4
4
 
5
5
  import { GenericObject } from "../../types"
6
6
 
@@ -8,16 +8,9 @@ import { GlobalProps } from "../../utilities/globalProps"
8
8
 
9
9
  import Flex from "../../pb_flex/_flex"
10
10
  import Checkbox from "../../pb_checkbox/_checkbox"
11
- import Dropdown from "../../pb_dropdown/_dropdown"
12
- import DropdownTrigger from "../../pb_dropdown/subcomponents/DropdownTrigger"
13
- import DropdownOption from "../../pb_dropdown/subcomponents/DropdownOption"
14
- import DropdownContainer from "../../pb_dropdown/subcomponents/DropdownContainer"
15
- import Icon from "../../pb_icon/_icon"
16
11
 
17
12
  import { SortIconButton } from "./SortIconButton"
18
13
  import { ToggleIconButton } from "./ToggleIconButton"
19
- import { displayIcon } from "../Utilities/IconHelpers"
20
- import { updateExpandAndCollapseState } from "../Utilities/ExpansionControlHelpers"
21
14
 
22
15
  import { isChrome } from "../Utilities/BrowserCheck"
23
16
 
@@ -47,10 +40,6 @@ export const TableHeaderCell = ({
47
40
  table
48
41
  }: TableHeaderCellProps) => {
49
42
  const {
50
- expanded,
51
- setExpanded,
52
- expandByDepth,
53
- toggleExpansionIcon,
54
43
  sortControl,
55
44
  responsive,
56
45
  selectableRows,
@@ -118,17 +107,6 @@ const isToggleExpansionEnabled =
118
107
  justifyHeader = isLeafColumn ? "end" : "center";
119
108
  }
120
109
 
121
- const handleExpandDepth = (depth: number) => {
122
- const updated = updateExpandAndCollapseState(
123
- table.getRowModel(),
124
- expanded,
125
- undefined,
126
- depth
127
- )
128
- setExpanded(updated)
129
- }
130
-
131
-
132
110
  return (
133
111
  <th
134
112
  align="right"
@@ -165,34 +143,9 @@ const isToggleExpansionEnabled =
165
143
  />
166
144
  )
167
145
  }
168
- {isToggleExpansionEnabled && hasAnySubRows && !expandByDepth && (
146
+ {isToggleExpansionEnabled && hasAnySubRows && (
169
147
  <ToggleIconButton onClick={handleExpandOrCollapse} />
170
148
  )}
171
- {isToggleExpansionEnabled && hasAnySubRows && expandByDepth && (
172
- <Dropdown options={expandByDepth}>
173
- <DropdownTrigger className="gray-icon toggle-all-icon">
174
- <Icon icon={displayIcon(toggleExpansionIcon)[0]} />
175
- </DropdownTrigger>
176
- <DropdownContainer className="expand-by-depth-dropdown">
177
- {expandByDepth.map((option:{ [key: string]: any }, index: number) => (
178
- <DropdownOption
179
- key={index}
180
- option={option}
181
- padding="none"
182
- >
183
- <Flex
184
- alignItems="center"
185
- htmlOptions={{onClick: () => {handleExpandDepth(option.depth)} }}
186
- paddingX="sm"
187
- paddingY="xs"
188
- >
189
- {option.label}
190
- </Flex>
191
- </DropdownOption>
192
- ))}
193
- </DropdownContainer>
194
- </Dropdown>
195
- )}
196
149
 
197
150
  {isToggleExpansionEnabledLoading &&(
198
151
  <div className="loading-toggle-icon header-toggle-icon" />
@@ -22,9 +22,10 @@ export function useTableActions({
22
22
  // Handle expand/collapse
23
23
  const handleExpandOrCollapse = useCallback(async (row: Row<GenericObject>) => {
24
24
  onToggleExpansionClick && onToggleExpansionClick(row);
25
+
25
26
  const expandedState = expanded;
26
27
  const targetParent = row?.parentId;
27
- const updatedRows = await updateExpandAndCollapseState(table.getRowModel(), expandedState, targetParent, undefined);
28
+ const updatedRows = await updateExpandAndCollapseState(table.getRowModel(), expandedState, targetParent);
28
29
  setExpanded(updatedRows);
29
30
  }, [expanded, setExpanded, onToggleExpansionClick, table]);
30
31
 
@@ -1,4 +1,4 @@
1
- import { RowModel, Row } from "@tanstack/react-table"
1
+ import { RowModel } from "@tanstack/react-table"
2
2
  import { ExpandedStateObject } from "./types"
3
3
  import { GenericObject } from "../../types"
4
4
 
@@ -14,40 +14,30 @@ const filterExpandableRows = (expandedState: Record<string, boolean>) => {
14
14
  export const updateExpandAndCollapseState = (
15
15
  tableRows: RowModel<GenericObject>,
16
16
  expanded: Record<string, boolean>,
17
- targetParent?: string,
18
- targetDepth?: number,
17
+ targetParent: string
19
18
  ) => {
20
19
  const updateExpandedRows: Record<string, boolean> = {};
21
- const rows = targetDepth !== undefined ? tableRows.flatRows : tableRows.rows;
20
+ const rows = tableRows.rows;
22
21
 
23
- const rowsToToggle: Row<GenericObject>[] = [];
22
+ let isExpansionConsistent = true;
23
+ const areRowsExpanded = new Set<boolean>();
24
24
 
25
25
  for (const row of rows) {
26
- const shouldBeUpdated =
27
- targetDepth !== undefined
28
- ? row.depth <= targetDepth
29
- : targetParent === undefined
30
- ? row.depth === 0
31
- : targetParent === row.parentId;
32
-
26
+ const shouldBeUpdated = targetParent === undefined ? row.depth === 0 : targetParent === row.parentId;
27
+
33
28
  if (shouldBeUpdated) {
34
- rowsToToggle.push(row);
35
- }
36
- }
37
-
38
- // Check if we are expanding or collapsing
39
- const anyCollapsed = rowsToToggle.some((row) => !row.getIsExpanded());
40
- const isExpandAction = anyCollapsed;
41
-
42
-
43
- for (const row of rowsToToggle) {
44
- const shouldUpdate =
45
- isExpandAction || targetDepth === undefined
46
- ? true
47
- : row.depth === targetDepth;
48
-
49
- if (shouldUpdate) {
50
- updateExpandedRows[row.id] = isExpandAction;
29
+ const isExpanded = row.getIsExpanded();
30
+ areRowsExpanded.add(isExpanded);
31
+
32
+ updateExpandedRows[row.id] = !isExpansionConsistent ? true : !isExpanded;
33
+
34
+ if (areRowsExpanded.size > 1) {
35
+ isExpansionConsistent = false;
36
+ // If expansion inconsistent, ensure all target rows are set to expand
37
+ for (const key in updateExpandedRows) {
38
+ updateExpandedRows[key] = true;
39
+ }
40
+ }
51
41
  }
52
42
  }
53
43
 
@@ -130,9 +130,6 @@
130
130
  box-sizing: border-box !important;
131
131
  }
132
132
  }
133
- .expand-by-depth-dropdown {
134
- min-width: 150px;
135
- }
136
133
  }
137
134
 
138
135
  .pb_advanced_table_body {
@@ -38,7 +38,6 @@ type AdvancedTableProps = {
38
38
  data?: { [key: string]: string }
39
39
  enableToggleExpansion?: "all" | "header" | "none"
40
40
  expandedControl?: GenericObject
41
- expandByDepth?: { [key: string]: string | number }
42
41
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
43
42
  id?: string
44
43
  initialLoadingRowsCount?: number
@@ -74,7 +73,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
74
73
  data = {},
75
74
  enableToggleExpansion = "header",
76
75
  expandedControl,
77
- expandByDepth,
78
76
  htmlOptions = {},
79
77
  id,
80
78
  initialLoadingRowsCount = 10,
@@ -282,7 +280,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
282
280
  columnDefinitions={columnDefinitions}
283
281
  enableToggleExpansion={enableToggleExpansion}
284
282
  enableVirtualization={virtualizedRows}
285
- expandByDepth={expandByDepth}
286
283
  expanded={expanded}
287
284
  expandedControl={expandedControl}
288
285
  handleExpandOrCollapse={handleExpandOrCollapse}
@@ -22,7 +22,6 @@ examples:
22
22
  - advanced_table_sort: Enable Sorting
23
23
  - advanced_table_sort_control: Sort Control
24
24
  - advanced_table_expanded_control: Expanded Control
25
- - advanced_table_expand_by_depth: Expand by Depth
26
25
  - advanced_table_subrow_headers: SubRow Headers
27
26
  - advanced_table_collapsible_trail: Collapsible Trail
28
27
  - advanced_table_table_options: Table Options
@@ -25,5 +25,4 @@ export { default as AdvancedTableInlineEditing } from './_advanced_table_inline_
25
25
  export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen.jsx'
26
26
  export { default as AdvancedTableStickyColumns } from './_advanced_table_sticky_columns.jsx'
27
27
  export { default as AdvancedTableStickyHeader } from './_advanced_table_sticky_header.jsx'
28
- export { default as AdvancedTableStickyColumnsAndHeader } from './_advanced_table_sticky_columns_and_header.jsx'
29
- export { default as AdvancedTableExpandByDepth } from './_advanced_table_expand_by_depth.jsx'
28
+ export { default as AdvancedTableStickyColumnsAndHeader } from './_advanced_table_sticky_columns_and_header.jsx'
@@ -31,6 +31,8 @@ export default class PbAdvancedTable extends PbEnhancedElement {
31
31
  this.toggleElement(this.target);
32
32
  }
33
33
  });
34
+
35
+ this.hideCloseIcon()
34
36
 
35
37
  const nestedButtons = this.element
36
38
  .closest("table")
@@ -49,6 +51,11 @@ export default class PbAdvancedTable extends PbEnhancedElement {
49
51
  });
50
52
  }
51
53
 
54
+ hideCloseIcon() {
55
+ const closeIcon = this.element.querySelector(UP_ARROW_SELECTOR);
56
+ closeIcon.style.display = "none";
57
+ }
58
+
52
59
  showElement(elements) {
53
60
  elements.forEach((elem) => {
54
61
  elem.style.display = "table-row";
@@ -30,7 +30,7 @@
30
30
  class="gray-icon expand-toggle-icon"
31
31
  data-advanced-table="true">
32
32
  <%= pb_rails("icon", props: { id: "advanced-table_open_icon", icon: "circle-play", cursor: "pointer" }) %>
33
- <%= pb_rails("icon", props: { id: "advanced-table_close_icon", display: "none", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
33
+ <%= pb_rails("icon", props: { id: "advanced-table_close_icon", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
34
34
  </button>
35
35
  <% end %>
36
36
  <% end %>
@@ -35,7 +35,7 @@ type DropdownProps = {
35
35
  label?: string;
36
36
  onSelect?: (arg: GenericObject) => null;
37
37
  options: GenericObject;
38
- separators?: boolean;
38
+ separators: boolean;
39
39
  triggerRef?: any;
40
40
  variant?: "default" | "subtle";
41
41
  };
@@ -22,7 +22,7 @@ type DropdownOptionProps = {
22
22
  data?: { [key: string]: string };
23
23
  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
24
24
  id?: string;
25
- key?: string | number;
25
+ key?: string;
26
26
  option?: GenericObject;
27
27
  padding?: string;
28
28
  } & GlobalProps;
@@ -84,8 +84,8 @@ const Table = (props: TableProps): React.ReactElement => {
84
84
  'single-line': singleLine,
85
85
  'no-hover': disableHover,
86
86
  'sticky-header': sticky,
87
- 'sticky-left-column': stickyLeftColumn,
88
- 'sticky-right-column': stickyRightColumn,
87
+ 'sticky-left-column': stickyLeftColumn.length,
88
+ 'sticky-right-column': stickyRightColumn.length,
89
89
  'striped': striped,
90
90
  'header-borderless': headerStyle === 'borderless',
91
91
  'header-floating': headerStyle === 'floating',