playbook_ui 13.21.0.pre.alpha.PBNTR238DatePickerYearBug2436 → 13.21.0.pre.alpha.PLAY12582474

Sign up to get free protection for your applications and to get access to all the features.
Files changed (165) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +21 -19
  3. data/app/pb_kits/playbook/pb_advanced_table/Components/SortIconButton.tsx +6 -3
  4. data/app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx +12 -8
  5. data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +14 -9
  6. data/app/pb_kits/playbook/pb_advanced_table/Components/ToggleIconButton.tsx +9 -5
  7. data/app/pb_kits/playbook/pb_advanced_table/README.md +2 -2
  8. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx +15 -11
  9. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx +12 -8
  10. data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx +23 -37
  11. data/app/pb_kits/playbook/pb_advanced_table/Utilities/types.ts +0 -2
  12. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +7 -9
  13. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +83 -80
  14. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb +14 -0
  15. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb +19 -0
  16. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +67 -61
  17. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.jsx +7 -7
  18. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx +7 -7
  19. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx +7 -7
  20. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx +7 -7
  21. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md +1 -1
  22. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx +7 -7
  23. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx +7 -7
  24. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx +7 -7
  25. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx +7 -7
  26. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx +7 -7
  27. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +7 -7
  28. data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data.js +1 -1
  29. data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading.js +1 -1
  30. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +2 -0
  31. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/_chrome_styles.scss +13 -0
  32. data/app/pb_kits/playbook/pb_advanced_table/table_body.html.erb +9 -0
  33. data/app/pb_kits/playbook/pb_advanced_table/table_body.rb +30 -0
  34. data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +20 -0
  35. data/app/pb_kits/playbook/pb_advanced_table/table_header.rb +21 -0
  36. data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +37 -0
  37. data/app/pb_kits/playbook/pb_advanced_table/table_row.rb +32 -0
  38. data/app/pb_kits/playbook/pb_avatar/avatar.html.erb +2 -1
  39. data/app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.html.erb +2 -1
  40. data/app/pb_kits/playbook/pb_background/background.html.erb +2 -1
  41. data/app/pb_kits/playbook/pb_badge/badge.html.erb +2 -1
  42. data/app/pb_kits/playbook/pb_body/body.html.erb +2 -1
  43. data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.scss +0 -7
  44. data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumb_item.html.erb +2 -1
  45. data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumbs.html.erb +2 -1
  46. data/app/pb_kits/playbook/pb_button/button.html.erb +2 -1
  47. data/app/pb_kits/playbook/pb_button/button.rb +2 -3
  48. data/app/pb_kits/playbook/pb_button_toolbar/button_toolbar.html.erb +2 -1
  49. data/app/pb_kits/playbook/pb_caption/caption.html.erb +2 -1
  50. data/app/pb_kits/playbook/pb_card/card.html.erb +2 -1
  51. data/app/pb_kits/playbook/pb_card/card_body.html.erb +2 -1
  52. data/app/pb_kits/playbook/pb_card/card_header.html.erb +2 -1
  53. data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb +3 -1
  54. data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb +2 -1
  55. data/app/pb_kits/playbook/pb_collapsible/collapsible.html.erb +2 -1
  56. data/app/pb_kits/playbook/pb_collapsible/collapsible_content.html.erb +2 -1
  57. data/app/pb_kits/playbook/pb_collapsible/collapsible_main.html.erb +2 -1
  58. data/app/pb_kits/playbook/pb_contact/contact.html.erb +2 -1
  59. data/app/pb_kits/playbook/pb_currency/currency.html.erb +2 -1
  60. data/app/pb_kits/playbook/pb_dashboard_value/dashboard_value.html.erb +2 -1
  61. data/app/pb_kits/playbook/pb_date/date.html.erb +2 -1
  62. data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +2 -1
  63. data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.html.erb +2 -1
  64. data/app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.html.erb +2 -1
  65. data/app/pb_kits/playbook/pb_date_stacked/date_stacked.html.erb +2 -1
  66. data/app/pb_kits/playbook/pb_date_time/date_time.html.erb +2 -1
  67. data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.html.erb +3 -2
  68. data/app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.html.erb +2 -1
  69. data/app/pb_kits/playbook/pb_detail/detail.html.erb +2 -1
  70. data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +2 -1
  71. data/app/pb_kits/playbook/pb_dialog/dialog_body.html.erb +3 -2
  72. data/app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb +2 -1
  73. data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +3 -2
  74. data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb +2 -1
  75. data/app/pb_kits/playbook/pb_filter/filter.html.erb +2 -1
  76. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss +8 -3
  77. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +1 -0
  78. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb +51 -1
  79. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx +62 -11
  80. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions.html.erb +7 -2
  81. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb +4 -3
  82. data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.html.erb +0 -4
  83. data/app/pb_kits/playbook/pb_flex/flex.html.erb +2 -1
  84. data/app/pb_kits/playbook/pb_flex/flex_item.html.erb +2 -1
  85. data/app/pb_kits/playbook/pb_form_group/form_group.html.erb +2 -1
  86. data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +2 -2
  87. data/app/pb_kits/playbook/pb_hashtag/hashtag.html.erb +2 -1
  88. data/app/pb_kits/playbook/pb_highlight/highlight.html.erb +2 -1
  89. data/app/pb_kits/playbook/pb_home_address_street/home_address_street.html.erb +2 -1
  90. data/app/pb_kits/playbook/pb_icon/_icon.tsx +1 -0
  91. data/app/pb_kits/playbook/pb_icon/icon.html.erb +2 -1
  92. data/app/pb_kits/playbook/pb_icon/icon.rb +3 -3
  93. data/app/pb_kits/playbook/pb_icon_circle/icon_circle.html.erb +2 -1
  94. data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.html.erb +2 -1
  95. data/app/pb_kits/playbook/pb_icon_value/icon_value.html.erb +2 -1
  96. data/app/pb_kits/playbook/pb_image/image.html.erb +2 -1
  97. data/app/pb_kits/playbook/pb_label_pill/label_pill.html.erb +2 -1
  98. data/app/pb_kits/playbook/pb_label_value/label_value.html.erb +3 -2
  99. data/app/pb_kits/playbook/pb_layout/body.html.erb +2 -1
  100. data/app/pb_kits/playbook/pb_layout/footer.html.erb +2 -1
  101. data/app/pb_kits/playbook/pb_layout/header.html.erb +2 -1
  102. data/app/pb_kits/playbook/pb_layout/item.html.erb +2 -1
  103. data/app/pb_kits/playbook/pb_layout/layout.html.erb +2 -1
  104. data/app/pb_kits/playbook/pb_layout/sidebar.html.erb +2 -1
  105. data/app/pb_kits/playbook/pb_legend/legend.html.erb +2 -1
  106. data/app/pb_kits/playbook/pb_list/item.html.erb +2 -1
  107. data/app/pb_kits/playbook/pb_list/list.html.erb +2 -1
  108. data/app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb +2 -1
  109. data/app/pb_kits/playbook/pb_message/message.html.erb +2 -1
  110. data/app/pb_kits/playbook/pb_message/message_mention.html.erb +3 -2
  111. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb +2 -1
  112. data/app/pb_kits/playbook/pb_multiple_users/multiple_users.html.erb +2 -1
  113. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb +2 -1
  114. data/app/pb_kits/playbook/pb_nav/item.html.erb +4 -2
  115. data/app/pb_kits/playbook/pb_nav/nav.html.erb +2 -1
  116. data/app/pb_kits/playbook/pb_online_status/online_status.html.erb +2 -1
  117. data/app/pb_kits/playbook/pb_pagination/pagination.html.erb +2 -1
  118. data/app/pb_kits/playbook/pb_passphrase/passphrase.html.erb +1 -1
  119. data/app/pb_kits/playbook/pb_person/person.html.erb +2 -1
  120. data/app/pb_kits/playbook/pb_person_contact/person_contact.html.erb +2 -1
  121. data/app/pb_kits/playbook/pb_pill/pill.html.erb +2 -1
  122. data/app/pb_kits/playbook/pb_popover/popover.html.erb +2 -1
  123. data/app/pb_kits/playbook/pb_progress_pills/progress_pills.html.erb +2 -1
  124. data/app/pb_kits/playbook/pb_progress_simple/progress_simple.html.erb +2 -1
  125. data/app/pb_kits/playbook/pb_progress_step/progress_step.html.erb +2 -1
  126. data/app/pb_kits/playbook/pb_progress_step/progress_step_item.html.erb +2 -1
  127. data/app/pb_kits/playbook/pb_radio/radio.html.erb +2 -1
  128. data/app/pb_kits/playbook/pb_section_separator/section_separator.html.erb +2 -1
  129. data/app/pb_kits/playbook/pb_select/select.html.erb +2 -1
  130. data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb +2 -1
  131. data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.html.erb +2 -1
  132. data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.html.erb +2 -1
  133. data/app/pb_kits/playbook/pb_selectable_list/selectable_list.html.erb +2 -1
  134. data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.html.erb +2 -1
  135. data/app/pb_kits/playbook/pb_source/source.html.erb +2 -1
  136. data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb +2 -1
  137. data/app/pb_kits/playbook/pb_stat_change/stat_change.html.erb +2 -1
  138. data/app/pb_kits/playbook/pb_stat_value/stat_value.html.erb +2 -1
  139. data/app/pb_kits/playbook/pb_table/table.html.erb +4 -2
  140. data/app/pb_kits/playbook/pb_table/table_body.html.erb +5 -3
  141. data/app/pb_kits/playbook/pb_table/table_cell.html.erb +5 -3
  142. data/app/pb_kits/playbook/pb_table/table_head.html.erb +5 -3
  143. data/app/pb_kits/playbook/pb_table/table_header.html.erb +5 -3
  144. data/app/pb_kits/playbook/pb_table/table_row.html.erb +5 -3
  145. data/app/pb_kits/playbook/pb_text_input/text_input.html.erb +2 -1
  146. data/app/pb_kits/playbook/pb_textarea/textarea.html.erb +2 -1
  147. data/app/pb_kits/playbook/pb_time/time.html.erb +2 -1
  148. data/app/pb_kits/playbook/pb_time_range_inline/time_range_inline.html.erb +3 -2
  149. data/app/pb_kits/playbook/pb_time_stacked/time_stacked.html.erb +2 -1
  150. data/app/pb_kits/playbook/pb_timeline/item.html.erb +2 -1
  151. data/app/pb_kits/playbook/pb_timeline/timeline.html.erb +2 -1
  152. data/app/pb_kits/playbook/pb_timestamp/timestamp.html.erb +2 -1
  153. data/app/pb_kits/playbook/pb_title/title.html.erb +3 -2
  154. data/app/pb_kits/playbook/pb_title_count/title_count.html.erb +2 -1
  155. data/app/pb_kits/playbook/pb_title_detail/title_detail.html.erb +2 -1
  156. data/app/pb_kits/playbook/pb_toggle/toggle.html.erb +2 -1
  157. data/app/pb_kits/playbook/pb_tooltip/tooltip.html.erb +2 -1
  158. data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb +2 -1
  159. data/app/pb_kits/playbook/pb_user/user.html.erb +2 -1
  160. data/app/pb_kits/playbook/pb_user_badge/user_badge.html.erb +2 -1
  161. data/app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.html.erb +2 -1
  162. data/dist/playbook-rails.js +4 -4
  163. data/lib/playbook/kit_base.rb +18 -0
  164. data/lib/playbook/version.rb +1 -1
  165. metadata +24 -15
@@ -1,8 +1,8 @@
1
- import React, { useState, useEffect, useCallback } from "react";
2
- import classnames from "classnames";
3
- import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
4
- import { globalProps, GlobalProps } from "../utilities/globalProps";
5
- import Table from "../pb_table/_table";
1
+ import React, { useState, useEffect, useCallback } from "react"
2
+ import classnames from "classnames"
3
+
4
+ import { GenericObject } from "../types"
5
+
6
6
  import {
7
7
  createColumnHelper,
8
8
  getCoreRowModel,
@@ -11,39 +11,43 @@ import {
11
11
  Row,
12
12
  useReactTable,
13
13
  Getter,
14
- } from "@tanstack/react-table";
14
+ } from "@tanstack/react-table"
15
+
16
+ import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props"
17
+ import { globalProps, GlobalProps } from "../utilities/globalProps"
18
+
19
+ import Table from "../pb_table/_table"
15
20
 
16
- import { updateExpandAndCollapseState } from "./Utilities/ExpansionControlHelpers";
21
+ import AdvancedTableContext from "./Context/AdvancedTableContext"
17
22
 
18
- import { CustomCell } from "./Components/CustomCell";
19
- import AdvancedTableContext from "./Context/AdvancedTableContext";
20
- import { TableHeader } from "./SubKits/TableHeader";
21
- import { TableBody } from "./SubKits/TableBody";
23
+ import { updateExpandAndCollapseState } from "./Utilities/ExpansionControlHelpers"
22
24
 
23
- import { DataType } from "./Utilities/types";
25
+ import { CustomCell } from "./Components/CustomCell"
26
+ import { TableHeader } from "./SubKits/TableHeader"
27
+ import { TableBody } from "./SubKits/TableBody"
24
28
 
25
29
  type AdvancedTableProps = {
26
- aria?: { [key: string]: string };
27
- children?: React.ReactNode | React.ReactNode[];
28
- className?: string;
29
- columnDefinitions: DataType[];
30
- dark?: boolean,
31
- data?: { [key: string]: string };
32
- enableToggleExpansion?: "all" | "header" | "none";
33
- expandedControl?: DataType;
30
+ aria?: { [key: string]: string }
31
+ children?: React.ReactNode | React.ReactNode[]
32
+ className?: string
33
+ columnDefinitions: GenericObject[]
34
+ dark?: boolean
35
+ data?: { [key: string]: string }
36
+ enableToggleExpansion?: "all" | "header" | "none"
37
+ expandedControl?: GenericObject
34
38
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
35
- id?: string;
36
- initialLoadingRowsCount?: number;
37
- inlineRowLoading?: boolean;
38
- loading?: boolean | string;
39
- onRowToggleClick?: (arg: Row<DataType>) => void;
40
- onToggleExpansionClick?: (arg: Row<DataType>) => void;
41
- sortControl?: DataType;
42
- tableData: DataType[];
43
- tableOptions?: DataType;
44
- tableProps?: DataType;
45
- toggleExpansionIcon?: string | string[];
46
- } & GlobalProps;
39
+ id?: string
40
+ initialLoadingRowsCount?: number
41
+ inlineRowLoading?: boolean
42
+ loading?: boolean | string
43
+ onRowToggleClick?: (arg: Row<GenericObject>) => void
44
+ onToggleExpansionClick?: (arg: Row<GenericObject>) => void
45
+ sortControl?: GenericObject
46
+ tableData: GenericObject[]
47
+ tableOptions?: GenericObject
48
+ tableProps?: GenericObject
49
+ toggleExpansionIcon?: string | string[]
50
+ } & GlobalProps
47
51
 
48
52
  const AdvancedTable = (props: AdvancedTableProps) => {
49
53
  const {
@@ -67,22 +71,22 @@ const AdvancedTable = (props: AdvancedTableProps) => {
67
71
  tableOptions,
68
72
  tableProps,
69
73
  toggleExpansionIcon = "arrows-from-line",
70
- } = props;
74
+ } = props
71
75
 
72
76
  const [loadingStateRowCount, setLoadingStateRowCount] = useState(
73
77
  initialLoadingRowsCount
74
- );
78
+ )
75
79
 
76
80
  // Create a local state for expanded and setExpanded if expandedControl not used
77
- const [localExpanded, setLocalExpanded] = useState({});
81
+ const [localExpanded, setLocalExpanded] = useState({})
78
82
 
79
83
  // Determine whether to use the prop or the local state
80
- const expanded = expandedControl ? expandedControl.value : localExpanded;
84
+ const expanded = expandedControl ? expandedControl.value : localExpanded
81
85
  const setExpanded = expandedControl
82
86
  ? expandedControl.onChange
83
- : setLocalExpanded;
87
+ : setLocalExpanded
84
88
 
85
- const columnHelper = createColumnHelper();
89
+ const columnHelper = createColumnHelper()
86
90
 
87
91
  //Create cells for first columns
88
92
  const createCellFunction = (cellAccessors: string[]) => {
@@ -90,10 +94,10 @@ const AdvancedTable = (props: AdvancedTableProps) => {
90
94
  row,
91
95
  getValue,
92
96
  }: {
93
- row: Row<DataType>;
94
- getValue: Getter<string>;
97
+ row: Row<GenericObject>
98
+ getValue: Getter<string>
95
99
  }) => {
96
- const rowData = row.original;
100
+ const rowData = row.original
97
101
 
98
102
  switch (row.depth) {
99
103
  case 0: {
@@ -103,12 +107,12 @@ const AdvancedTable = (props: AdvancedTableProps) => {
103
107
  onRowToggleClick={onRowToggleClick}
104
108
  row={row}
105
109
  />
106
- );
110
+ )
107
111
  }
108
112
  default: {
109
113
  // Handle other depths based on cellAccessors
110
- const depthAccessor = cellAccessors[row.depth - 1]; // Adjust index for depth
111
- const accessorValue = rowData[depthAccessor];
114
+ const depthAccessor = cellAccessors[row.depth - 1] // Adjust index for depth
115
+ const accessorValue = rowData[depthAccessor]
112
116
  return accessorValue ? (
113
117
  <CustomCell
114
118
  onRowToggleClick={onRowToggleClick}
@@ -117,13 +121,13 @@ const AdvancedTable = (props: AdvancedTableProps) => {
117
121
  />
118
122
  ) : (
119
123
  "N/A"
120
- );
124
+ )
121
125
  }
122
126
  }
123
- };
127
+ }
124
128
 
125
- return columnCells;
126
- };
129
+ return columnCells
130
+ }
127
131
 
128
132
  //Create column array in format needed by Tanstack
129
133
  const columns =
@@ -134,12 +138,12 @@ const AdvancedTable = (props: AdvancedTableProps) => {
134
138
  ...columnHelper.accessor(column.accessor, {
135
139
  header: column.label,
136
140
  }),
137
- };
141
+ }
138
142
  if (column.cellAccessors) {
139
- columnStructure.cell = createCellFunction(column.cellAccessors);
143
+ columnStructure.cell = createCellFunction(column.cellAccessors)
140
144
  }
141
- return columnStructure;
142
- });
145
+ return columnStructure
146
+ })
143
147
 
144
148
  //Syntax for sorting Array if we want to manage state ourselves
145
149
  const sorting = [
@@ -150,22 +154,22 @@ const AdvancedTable = (props: AdvancedTableProps) => {
150
154
  ? !sortControl.value.desc
151
155
  : false,
152
156
  },
153
- ];
157
+ ]
154
158
 
155
159
  const expandAndSortState = () => {
156
160
  if (sortControl) {
157
- return { state: { expanded, sorting } };
161
+ return { state: { expanded, sorting } }
158
162
  } else {
159
- return { state: { expanded } };
163
+ return { state: { expanded } }
160
164
  }
161
- };
165
+ }
162
166
 
163
167
  //initialize table
164
168
  const table = useReactTable({
165
169
  data: loading ? Array(loadingStateRowCount).fill({}) : tableData,
166
170
  columns,
167
171
  onExpandedChange: setExpanded,
168
- getSubRows: (row: DataType) => row.children,
172
+ getSubRows: (row: GenericObject) => row.children,
169
173
  getCoreRowModel: getCoreRowModel(),
170
174
  getExpandedRowModel: getExpandedRowModel(),
171
175
  getSortedRowModel: getSortedRowModel(),
@@ -173,42 +177,41 @@ const AdvancedTable = (props: AdvancedTableProps) => {
173
177
  sortDescFirst: true,
174
178
  ...expandAndSortState(),
175
179
  ...tableOptions,
176
- });
180
+ })
177
181
 
178
- const tableRows = table.getRowModel();
182
+ const tableRows = table.getRowModel()
179
183
 
180
184
  // Set table row count for loading state
181
185
  const updateLoadingStateRowCount = useCallback(() => {
182
- const rowsCount = table.getRowModel().rows.length;
186
+ const rowsCount = table.getRowModel().rows.length
183
187
  if (rowsCount !== loadingStateRowCount && rowsCount !== 0) {
184
- setLoadingStateRowCount(rowsCount);
188
+ setLoadingStateRowCount(rowsCount)
185
189
  }
186
- }, [tableData, loadingStateRowCount]);
190
+ }, [tableData, loadingStateRowCount])
187
191
 
188
192
  useEffect(() => {
189
193
  if (!loading) {
190
- updateLoadingStateRowCount();
194
+ updateLoadingStateRowCount()
191
195
  }
192
- }, [loading, updateLoadingStateRowCount]);
193
-
194
- const handleExpandOrCollapse = (row: Row<DataType>) => {
195
- onToggleExpansionClick && onToggleExpansionClick(row);
196
+ }, [loading, updateLoadingStateRowCount])
196
197
 
198
+ const handleExpandOrCollapse = async (row: Row<GenericObject>) => {
199
+ onToggleExpansionClick && onToggleExpansionClick(row)
200
+
197
201
  const expandedState = expanded;
198
202
  const targetParent = row?.parentId;
199
- return setExpanded(
200
- updateExpandAndCollapseState(tableRows, expandedState, targetParent)
201
- );
202
- };
203
+ const updatedRows = await updateExpandAndCollapseState(tableRows, expandedState, targetParent)
204
+ setExpanded(updatedRows)
205
+ }
203
206
 
204
- const ariaProps = buildAriaProps(aria);
205
- const dataProps = buildDataProps(data);
206
- const htmlProps = buildHtmlProps(htmlOptions);
207
+ const ariaProps = buildAriaProps(aria)
208
+ const dataProps = buildDataProps(data)
209
+ const htmlProps = buildHtmlProps(htmlOptions)
207
210
  const classes = classnames(
208
211
  buildCss("pb_advanced_table"),
209
212
  globalProps(props),
210
213
  className
211
- );
214
+ )
212
215
 
213
216
  return (
214
217
  <div {...ariaProps}
@@ -250,10 +253,10 @@ const AdvancedTable = (props: AdvancedTableProps) => {
250
253
  </Table>
251
254
  </AdvancedTableContext.Provider>
252
255
  </div>
253
- );
254
- };
256
+ )
257
+ }
255
258
 
256
- AdvancedTable.Header = TableHeader;
257
- AdvancedTable.Body = TableBody;
259
+ AdvancedTable.Header = TableHeader
260
+ AdvancedTable.Body = TableBody
258
261
 
259
- export default AdvancedTable;
262
+ export default AdvancedTable
@@ -0,0 +1,14 @@
1
+ <%= content_tag(:div,
2
+ aria: object.aria,
3
+ class: object.classname,
4
+ data: object.data,
5
+ id: object.id) do %>
6
+ <%= pb_rails("table", props: { size: "sm", tag:"div", data_table: true, number_spacing:"tabular", responsive:"none" }) do %>
7
+ <% if content.present? %>
8
+ <% content.presence %>
9
+ <% else %>
10
+ <%= pb_rails("advanced_table/table_header", props: {column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion }) %>
11
+ <%= pb_rails("advanced_table/table_body", props: {table_data: object.table_data, column_definitions: object.column_definitions}) %>
12
+ <% end %>
13
+ <% end %>
14
+ <% end %>
@@ -0,0 +1,19 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Playbook
4
+ module PbAdvancedTable
5
+ class AdvancedTable < Playbook::KitBase
6
+ prop :table_data, type: Playbook::Props::Array,
7
+ default: []
8
+ prop :column_definitions, type: Playbook::Props::Array,
9
+ default: []
10
+ prop :enable_toggle_expansion, type: Playbook::Props::Enum,
11
+ values: %w[all header none],
12
+ default: "header"
13
+
14
+ def classname
15
+ generate_classname("pb_advanced_table")
16
+ end
17
+ end
18
+ end
19
+ end
@@ -1,7 +1,7 @@
1
- import React, {useState} from "react";
2
- import { render, screen } from "../utilities/test-utils";
1
+ import React, {useState} from "react"
2
+ import { render, screen, waitFor } from "../utilities/test-utils"
3
3
 
4
- import { AdvancedTable } from "../";
4
+ import { AdvancedTable } from "../"
5
5
 
6
6
  const MOCK_DATA = [
7
7
  {
@@ -40,7 +40,7 @@ const MOCK_DATA = [
40
40
  },
41
41
  ],
42
42
  },
43
- ];
43
+ ]
44
44
 
45
45
  const MOCK_DATA_LOADING = [
46
46
  {
@@ -70,7 +70,7 @@ const MOCK_DATA_LOADING = [
70
70
  },
71
71
  ],
72
72
  },
73
- ];
73
+ ]
74
74
 
75
75
  const columnDefinitions = [
76
76
  {
@@ -86,11 +86,11 @@ const columnDefinitions = [
86
86
  accessor: "scheduledMeetings",
87
87
  label: "Scheduled Meetings",
88
88
  },
89
- ];
89
+ ]
90
90
 
91
91
  const subRowHeaders = ["Quarter"]
92
92
 
93
- const testId = "advanced_table";
93
+ const testId = "advanced_table"
94
94
 
95
95
  const AdvancedTableExpandControl = () => {
96
96
  const [expanded, setExpanded] = useState({'0': true})
@@ -109,7 +109,7 @@ return (
109
109
  tableData={MOCK_DATA}
110
110
  />
111
111
  </div>
112
- );
112
+ )
113
113
  }
114
114
 
115
115
  const AdvancedTableSortControl = () => {
@@ -132,7 +132,7 @@ return (
132
132
  <AdvancedTable.Body />
133
133
  </AdvancedTable>
134
134
  </div>
135
- );
135
+ )
136
136
  }
137
137
 
138
138
  const tableOptions = {
@@ -158,12 +158,12 @@ test("Generates default kit and classname", () => {
158
158
  data={{ testid: testId }}
159
159
  tableData={MOCK_DATA}
160
160
  />
161
- );
161
+ )
162
162
 
163
- const kit = screen.getByTestId(testId);
164
- expect(kit).toBeInTheDocument();
163
+ const kit = screen.getByTestId(testId)
164
+ expect(kit).toBeInTheDocument()
165
165
  expect(kit).toHaveClass('pb_advanced_table')
166
- });
166
+ })
167
167
 
168
168
  test("Generates aria label", () => {
169
169
  render(
@@ -173,11 +173,11 @@ test("Generates aria label", () => {
173
173
  data={{ testid: testId }}
174
174
  tableData={MOCK_DATA}
175
175
  />
176
- );
176
+ )
177
177
 
178
- const kit = screen.getByTestId(testId);
178
+ const kit = screen.getByTestId(testId)
179
179
  expect(kit).toHaveAttribute('aria-label', testId)
180
- });
180
+ })
181
181
 
182
182
  test("Row toggle button exists and toggles subrows open and closed", () => {
183
183
  render(
@@ -186,9 +186,9 @@ test("Row toggle button exists and toggles subrows open and closed", () => {
186
186
  data={{ testid: testId }}
187
187
  tableData={MOCK_DATA}
188
188
  />
189
- );
189
+ )
190
190
 
191
- const kit = screen.getByTestId(testId);
191
+ const kit = screen.getByTestId(testId)
192
192
  const rowButton = kit.querySelector(".gray-icon.expand-toggle-icon")
193
193
  expect(rowButton).toBeInTheDocument()
194
194
  const subRow1 = kit.querySelector(".bg-white.depth-sub-row-1")
@@ -196,26 +196,32 @@ test("Row toggle button exists and toggles subrows open and closed", () => {
196
196
  rowButton.click()
197
197
  const subRow = kit.querySelector(".bg-white.depth-sub-row-1")
198
198
  expect(subRow).toBeInTheDocument()
199
- });
199
+ })
200
200
 
201
- test("toggleExpansionAll button exists and toggles subrows open and closed", () => {
201
+ test("toggleExpansionAll button exists and toggles subrows open and closed", async () => {
202
202
  render(
203
203
  <AdvancedTable
204
204
  columnDefinitions={columnDefinitions}
205
205
  data={{ testid: testId }}
206
206
  tableData={MOCK_DATA}
207
207
  />
208
- );
208
+ )
209
209
 
210
210
  const kit = screen.getByTestId(testId);
211
- const toggleButton = kit.querySelector(".gray-icon.toggle-all-icon")
212
- expect(toggleButton).toBeInTheDocument()
213
- const subRow1 = kit.querySelector(".bg-white.depth-sub-row-1")
214
- expect(subRow1).not.toBeInTheDocument()
215
- toggleButton.click()
216
- const subRow = kit.querySelector(".bg-white.depth-sub-row-1")
217
- expect(subRow).toBeInTheDocument()
218
- });
211
+ const toggleButton = kit.querySelector(".gray-icon.toggle-all-icon");
212
+ expect(toggleButton).toBeInTheDocument();
213
+
214
+ const subRow1 = kit.querySelector(".bg-white.depth-sub-row-1");
215
+ expect(subRow1).not.toBeInTheDocument();
216
+
217
+ toggleButton.click();
218
+
219
+ await waitFor(() => {
220
+ const subRow = kit.querySelector(".bg-white.depth-sub-row-1");
221
+ expect(subRow).toBeInTheDocument();
222
+ })
223
+ })
224
+
219
225
 
220
226
  test("loading state + initialLoadingRowCount prop", () => {
221
227
  render(
@@ -226,16 +232,16 @@ test("loading state + initialLoadingRowCount prop", () => {
226
232
  loading
227
233
  tableData={MOCK_DATA}
228
234
  />
229
- );
235
+ )
230
236
 
231
- const kit = screen.getByTestId(testId);
237
+ const kit = screen.getByTestId(testId)
232
238
  const table = kit.querySelector('table')
233
239
  expect(table).toHaveClass('pb_table table-sm table-responsive-none table-card data_table ns_tabular content-loading')
234
240
 
235
241
  const tableBody = kit.querySelector('tbody')
236
242
  const tableRows = tableBody.getElementsByTagName('tr')
237
243
  expect(tableRows).toHaveLength(13)
238
- });
244
+ })
239
245
 
240
246
  test("subRowHeaders are rendered", () => {
241
247
  render(
@@ -247,21 +253,21 @@ test("subRowHeaders are rendered", () => {
247
253
  <AdvancedTable.Header />
248
254
  <AdvancedTable.Body subRowHeaders={subRowHeaders}/>
249
255
  </AdvancedTable>
250
- );
256
+ )
251
257
 
252
- const kit = screen.getByTestId(testId);
258
+ const kit = screen.getByTestId(testId)
253
259
 
254
260
  const rowButton = kit.querySelector(".gray-icon.expand-toggle-icon")
255
261
  rowButton.click()
256
262
 
257
263
  const subRowHeader = kit.querySelector(".custom-row.bg-silver")
258
264
  expect(subRowHeader).toBeInTheDocument()
259
- });
265
+ })
260
266
 
261
267
  test("expandControl prop works as expected", () => {
262
268
  render (<AdvancedTableExpandControl/>)
263
269
 
264
- const kit = screen.getByTestId(testId);
270
+ const kit = screen.getByTestId(testId)
265
271
  const subRow = kit.querySelector(".bg-white.depth-sub-row-1")
266
272
  expect(subRow).toBeInTheDocument()
267
273
  })
@@ -274,13 +280,13 @@ test("tableOptions prop functions as expected", () => {
274
280
  tableData={MOCK_DATA}
275
281
  tableOptions={tableOptions}
276
282
  />
277
- );
283
+ )
278
284
 
279
- const kit = screen.getByTestId(testId);
285
+ const kit = screen.getByTestId(testId)
280
286
  const row1 = kit.getElementsByTagName('tr')[1]
281
287
 
282
288
  expect(row1.id).toBe("1-1-0-row")
283
- });
289
+ })
284
290
 
285
291
  test("tableProps prop functions as expected", () => {
286
292
  render(
@@ -290,12 +296,12 @@ test("tableProps prop functions as expected", () => {
290
296
  tableData={MOCK_DATA}
291
297
  tableProps={tableProps}
292
298
  />
293
- );
299
+ )
294
300
 
295
- const kit = screen.getByTestId(testId);
301
+ const kit = screen.getByTestId(testId)
296
302
  const table = kit.querySelector('table')
297
303
  expect(table).toHaveClass("pb_table table-sm table-responsive-none data_table sticky-header ns_tabular")
298
- });
304
+ })
299
305
 
300
306
  test("enableExpansionIcon changes icon", () => {
301
307
  render(
@@ -306,13 +312,13 @@ test("enableExpansionIcon changes icon", () => {
306
312
  tableProps={tableProps}
307
313
  toggleExpansionIcon= "chevron-up"
308
314
  />
309
- );
315
+ )
310
316
 
311
- const kit = screen.getByTestId(testId);
317
+ const kit = screen.getByTestId(testId)
312
318
  const tableHead = kit.querySelector('table')
313
319
  const toggleIcon= tableHead.querySelector(".pb_icon_kit")
314
320
  expect(toggleIcon).toHaveClass("fa-chevron-up")
315
- });
321
+ })
316
322
 
317
323
  test("sortIcon changes icon", () => {
318
324
  render(
@@ -328,18 +334,18 @@ test("sortIcon changes icon", () => {
328
334
  />
329
335
  <AdvancedTable.Body />
330
336
  </AdvancedTable>
331
- );
337
+ )
332
338
 
333
- const kit = screen.getByTestId(testId);
339
+ const kit = screen.getByTestId(testId)
334
340
  const sortIcon = kit.querySelector('.sort-button-icon')
335
341
  const icon= sortIcon.querySelector(".pb_icon_kit")
336
342
  expect(icon).toHaveClass("fa-chevron-down")
337
- });
343
+ })
338
344
 
339
345
  test("Sort icon renders with enableSorting + sortControl works as expected", () => {
340
346
  render (<AdvancedTableSortControl/>)
341
347
 
342
- const kit = screen.getByTestId(testId);
348
+ const kit = screen.getByTestId(testId)
343
349
  const sortIcon = kit.querySelector(".sort-button-icon")
344
350
  expect(sortIcon).toBeInTheDocument()
345
351
 
@@ -358,9 +364,9 @@ test("sort button exists and sorts column data", () => {
358
364
  <AdvancedTable.Header enableSorting />
359
365
  <AdvancedTable.Body />
360
366
  </AdvancedTable>
361
- );
367
+ )
362
368
 
363
- const kit = screen.getByTestId(testId);
369
+ const kit = screen.getByTestId(testId)
364
370
 
365
371
  const sortButton= kit.querySelector(".pb_flex_kit_orientation_row_justify_content_between_align_items_top_spacing_none.pl_xxs.cursor_pointer.header-sort-button.pb_th_link")
366
372
  expect(sortButton).toBeInTheDocument()
@@ -372,7 +378,7 @@ test("sort button exists and sorts column data", () => {
372
378
 
373
379
  const row2 = kit.getElementsByTagName('tr')[2]
374
380
  expect(row2.id).toBe("0-0-0-row")
375
- });
381
+ })
376
382
 
377
383
  test("Generates Table.Header default + custom classname", () => {
378
384
  render(
@@ -385,12 +391,12 @@ test("Generates Table.Header default + custom classname", () => {
385
391
  <AdvancedTable.Body />
386
392
 
387
393
  </AdvancedTable>
388
- );
394
+ )
389
395
 
390
- const kit = screen.getByTestId(testId);
396
+ const kit = screen.getByTestId(testId)
391
397
  const tableHeader = kit.querySelector('thead')
392
398
  expect(tableHeader).toHaveClass('pb_advanced_table_header custom-header')
393
- });
399
+ })
394
400
 
395
401
  test("Generates Table.Body default + custom classname", () => {
396
402
  render(
@@ -403,12 +409,12 @@ test("Generates Table.Body default + custom classname", () => {
403
409
  <AdvancedTable.Body className="custom-body-classname"/>
404
410
 
405
411
  </AdvancedTable>
406
- );
412
+ )
407
413
 
408
- const kit = screen.getByTestId(testId);
414
+ const kit = screen.getByTestId(testId)
409
415
  const tableHeader = kit.querySelector('tbody')
410
416
  expect(tableHeader).toHaveClass('pb_advanced_table_body custom-body-classname')
411
- });
417
+ })
412
418
 
413
419
  test("inlineRowLoading prop renders inline loading if true", () => {
414
420
  render(
@@ -418,12 +424,12 @@ test("inlineRowLoading prop renders inline loading if true", () => {
418
424
  inlineRowLoading
419
425
  tableData={MOCK_DATA_LOADING}
420
426
  />
421
- );
427
+ )
422
428
 
423
- const kit = screen.getByTestId(testId);
429
+ const kit = screen.getByTestId(testId)
424
430
  const rowButton = kit.querySelector(".gray-icon.expand-toggle-icon")
425
431
  expect(rowButton).toBeInTheDocument()
426
432
  rowButton.click()
427
433
  const inlineLoading = kit.querySelector(".fa-spinner")
428
434
  expect(inlineLoading).toBeInTheDocument()
429
- });
435
+ })
@@ -1,6 +1,6 @@
1
- import React from "react";
2
- import { AdvancedTable } from "../../";
3
- import { MOCK_DATA } from "./_mock_data";
1
+ import React from "react"
2
+ import { AdvancedTable } from "../../"
3
+ import { MOCK_DATA } from "./_mock_data"
4
4
 
5
5
  const AdvancedTableCollapsibleTrail = (props) => {
6
6
  const columnDefinitions = [
@@ -33,7 +33,7 @@ const AdvancedTableCollapsibleTrail = (props) => {
33
33
  accessor: "graduatedStudents",
34
34
  label: "Graduated Students",
35
35
  },
36
- ];
36
+ ]
37
37
 
38
38
  return (
39
39
  <div>
@@ -46,7 +46,7 @@ const AdvancedTableCollapsibleTrail = (props) => {
46
46
  <AdvancedTable.Body collapsibleTrail={false} />
47
47
  </AdvancedTable>
48
48
  </div>
49
- );
50
- };
49
+ )
50
+ }
51
51
 
52
- export default AdvancedTableCollapsibleTrail;
52
+ export default AdvancedTableCollapsibleTrail