playbook_ui 13.21.0.pre.alpha.pbntr220improveexpansionspeed2451 → 13.22.0.pre.alpha.playbookgemspecrailsversion2608

Sign up to get free protection for your applications and to get access to all the features.
Files changed (228) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +23 -17
  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 +3 -2
  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 -78
  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 +54 -54
  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 +12 -7
  20. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.md +2 -0
  21. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx +7 -7
  22. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md +1 -1
  23. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx +7 -7
  24. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx +7 -7
  25. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx +7 -7
  26. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx +7 -7
  27. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx +7 -7
  28. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +7 -7
  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/advanced_table_mock_data.json +278 -0
  31. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +2 -0
  32. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/_chrome_styles.scss +13 -0
  33. data/app/pb_kits/playbook/pb_advanced_table/table_body.html.erb +9 -0
  34. data/app/pb_kits/playbook/pb_advanced_table/table_body.rb +30 -0
  35. data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +20 -0
  36. data/app/pb_kits/playbook/pb_advanced_table/table_header.rb +21 -0
  37. data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +37 -0
  38. data/app/pb_kits/playbook/pb_advanced_table/table_row.rb +32 -0
  39. data/app/pb_kits/playbook/pb_avatar/avatar.html.erb +2 -1
  40. data/app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.html.erb +2 -1
  41. data/app/pb_kits/playbook/pb_background/background.html.erb +2 -1
  42. data/app/pb_kits/playbook/pb_badge/badge.html.erb +2 -1
  43. data/app/pb_kits/playbook/pb_body/body.html.erb +2 -1
  44. data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.scss +0 -7
  45. data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumb_item.html.erb +2 -1
  46. data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumbs.html.erb +2 -1
  47. data/app/pb_kits/playbook/pb_button/button.html.erb +2 -1
  48. data/app/pb_kits/playbook/pb_button/button.rb +2 -3
  49. data/app/pb_kits/playbook/pb_button_toolbar/button_toolbar.html.erb +2 -1
  50. data/app/pb_kits/playbook/pb_caption/caption.html.erb +2 -1
  51. data/app/pb_kits/playbook/pb_card/card.html.erb +2 -1
  52. data/app/pb_kits/playbook/pb_card/card_body.html.erb +2 -1
  53. data/app/pb_kits/playbook/pb_card/card_header.html.erb +2 -1
  54. data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb +3 -1
  55. data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb +2 -1
  56. data/app/pb_kits/playbook/pb_collapsible/collapsible.html.erb +2 -1
  57. data/app/pb_kits/playbook/pb_collapsible/collapsible_content.html.erb +2 -1
  58. data/app/pb_kits/playbook/pb_collapsible/collapsible_main.html.erb +2 -1
  59. data/app/pb_kits/playbook/pb_contact/contact.html.erb +2 -1
  60. data/app/pb_kits/playbook/pb_currency/currency.html.erb +2 -1
  61. data/app/pb_kits/playbook/pb_dashboard_value/dashboard_value.html.erb +2 -1
  62. data/app/pb_kits/playbook/pb_date/date.html.erb +2 -1
  63. data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +1 -2
  64. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +3 -0
  65. data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +4 -2
  66. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +2 -1
  67. data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js +1 -1
  68. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +9 -7
  69. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb +0 -7
  70. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx +0 -7
  71. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_margin_bottom.html.erb +7 -0
  72. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_margin_bottom.jsx +41 -0
  73. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb +7 -0
  74. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx +7 -0
  75. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +4 -2
  76. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -0
  77. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_input_styles.scss +1 -2
  78. data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.html.erb +2 -1
  79. data/app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.html.erb +2 -1
  80. data/app/pb_kits/playbook/pb_date_stacked/date_stacked.html.erb +2 -1
  81. data/app/pb_kits/playbook/pb_date_time/date_time.html.erb +2 -1
  82. data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.html.erb +3 -2
  83. data/app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.html.erb +2 -1
  84. data/app/pb_kits/playbook/pb_detail/detail.html.erb +2 -1
  85. data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +2 -1
  86. data/app/pb_kits/playbook/pb_dialog/dialog_body.html.erb +3 -2
  87. data/app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb +3 -2
  88. data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +5 -4
  89. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb +2 -0
  90. data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb +2 -1
  91. data/app/pb_kits/playbook/pb_filter/filter.html.erb +2 -1
  92. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss +8 -3
  93. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +1 -0
  94. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb +51 -1
  95. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx +62 -11
  96. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions.html.erb +7 -2
  97. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb +4 -3
  98. data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.html.erb +0 -4
  99. data/app/pb_kits/playbook/pb_flex/flex.html.erb +2 -1
  100. data/app/pb_kits/playbook/pb_flex/flex_item.html.erb +2 -1
  101. data/app/pb_kits/playbook/pb_form_group/_form_group.scss +34 -0
  102. data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb +17 -1
  103. data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx +18 -2
  104. data/app/pb_kits/playbook/pb_form_group/form_group.html.erb +2 -1
  105. data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +2 -2
  106. data/app/pb_kits/playbook/pb_hashtag/hashtag.html.erb +2 -1
  107. data/app/pb_kits/playbook/pb_highlight/highlight.html.erb +2 -1
  108. data/app/pb_kits/playbook/pb_home_address_street/home_address_street.html.erb +2 -1
  109. data/app/pb_kits/playbook/pb_icon/_icon.tsx +1 -0
  110. data/app/pb_kits/playbook/pb_icon/icon.html.erb +2 -1
  111. data/app/pb_kits/playbook/pb_icon/icon.rb +3 -3
  112. data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss +14 -0
  113. data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx +1 -1
  114. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.html.erb +5 -0
  115. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.jsx +6 -0
  116. data/app/pb_kits/playbook/pb_icon_circle/icon_circle.html.erb +2 -1
  117. data/app/pb_kits/playbook/pb_icon_circle/icon_circle.rb +1 -1
  118. data/app/pb_kits/playbook/pb_icon_circle/icon_circle.test.js +1 -0
  119. data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.html.erb +2 -1
  120. data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.rb +0 -2
  121. data/app/pb_kits/playbook/pb_icon_value/icon_value.html.erb +2 -1
  122. data/app/pb_kits/playbook/pb_image/image.html.erb +2 -1
  123. data/app/pb_kits/playbook/pb_label_pill/label_pill.html.erb +2 -1
  124. data/app/pb_kits/playbook/pb_label_value/label_value.html.erb +3 -2
  125. data/app/pb_kits/playbook/pb_layout/body.html.erb +2 -1
  126. data/app/pb_kits/playbook/pb_layout/footer.html.erb +2 -1
  127. data/app/pb_kits/playbook/pb_layout/header.html.erb +2 -1
  128. data/app/pb_kits/playbook/pb_layout/item.html.erb +2 -1
  129. data/app/pb_kits/playbook/pb_layout/layout.html.erb +2 -1
  130. data/app/pb_kits/playbook/pb_layout/sidebar.html.erb +2 -1
  131. data/app/pb_kits/playbook/pb_legend/legend.html.erb +2 -1
  132. data/app/pb_kits/playbook/pb_list/item.html.erb +2 -1
  133. data/app/pb_kits/playbook/pb_list/list.html.erb +2 -1
  134. data/app/pb_kits/playbook/pb_list/list.rb +0 -2
  135. data/app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb +2 -1
  136. data/app/pb_kits/playbook/pb_message/message.html.erb +2 -1
  137. data/app/pb_kits/playbook/pb_message/message_mention.html.erb +3 -2
  138. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.md +2 -2
  139. data/app/pb_kits/playbook/pb_multi_level_select/docs/{_multi_level_select_selected_ids.jsx → _multi_level_select_selected_ids_react.jsx} +2 -2
  140. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids_react.md +5 -0
  141. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +1 -1
  142. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +1 -1
  143. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb +2 -1
  144. data/app/pb_kits/playbook/pb_multiple_users/multiple_users.html.erb +2 -1
  145. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb +2 -1
  146. data/app/pb_kits/playbook/pb_nav/item.html.erb +4 -2
  147. data/app/pb_kits/playbook/pb_nav/nav.html.erb +2 -1
  148. data/app/pb_kits/playbook/pb_online_status/_online_status.scss +1 -10
  149. data/app/pb_kits/playbook/pb_online_status/_online_status.tsx +1 -1
  150. data/app/pb_kits/playbook/pb_online_status/_online_status_mixins.scss +7 -13
  151. data/app/pb_kits/playbook/pb_online_status/docs/_online_status_default.html.erb +6 -9
  152. data/app/pb_kits/playbook/pb_online_status/docs/_online_status_default.jsx +18 -7
  153. data/app/pb_kits/playbook/pb_online_status/online_status.html.erb +2 -1
  154. data/app/pb_kits/playbook/pb_online_status/online_status.rb +1 -1
  155. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.html.erb +2 -1
  156. data/app/pb_kits/playbook/pb_pagination/pagination.html.erb +2 -1
  157. data/app/pb_kits/playbook/pb_passphrase/passphrase.html.erb +1 -1
  158. data/app/pb_kits/playbook/pb_person/person.html.erb +2 -1
  159. data/app/pb_kits/playbook/pb_person_contact/person_contact.html.erb +2 -1
  160. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb +2 -2
  161. data/app/pb_kits/playbook/pb_pill/pill.html.erb +2 -1
  162. data/app/pb_kits/playbook/pb_popover/popover.html.erb +2 -1
  163. data/app/pb_kits/playbook/pb_progress_pills/progress_pills.html.erb +2 -1
  164. data/app/pb_kits/playbook/pb_progress_simple/progress_simple.html.erb +2 -1
  165. data/app/pb_kits/playbook/pb_progress_step/progress_step.html.erb +2 -1
  166. data/app/pb_kits/playbook/pb_progress_step/progress_step_item.html.erb +2 -1
  167. data/app/pb_kits/playbook/pb_radio/radio.html.erb +2 -1
  168. data/app/pb_kits/playbook/pb_section_separator/section_separator.html.erb +2 -1
  169. data/app/pb_kits/playbook/pb_select/select.html.erb +2 -1
  170. data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb +2 -1
  171. data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.html.erb +2 -1
  172. data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.html.erb +2 -1
  173. data/app/pb_kits/playbook/pb_selectable_list/selectable_list.html.erb +2 -1
  174. data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.html.erb +2 -1
  175. data/app/pb_kits/playbook/pb_source/source.html.erb +2 -1
  176. data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb +2 -1
  177. data/app/pb_kits/playbook/pb_stat_change/stat_change.html.erb +2 -1
  178. data/app/pb_kits/playbook/pb_stat_value/stat_value.html.erb +2 -1
  179. data/app/pb_kits/playbook/pb_table/table.html.erb +4 -2
  180. data/app/pb_kits/playbook/pb_table/table_body.html.erb +5 -3
  181. data/app/pb_kits/playbook/pb_table/table_cell.html.erb +5 -3
  182. data/app/pb_kits/playbook/pb_table/table_head.html.erb +5 -3
  183. data/app/pb_kits/playbook/pb_table/table_header.html.erb +5 -3
  184. data/app/pb_kits/playbook/pb_table/table_row.html.erb +5 -3
  185. data/app/pb_kits/playbook/pb_text_input/_text_input.scss +0 -1
  186. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +5 -1
  187. data/app/pb_kits/playbook/pb_text_input/text_input.html.erb +2 -1
  188. data/app/pb_kits/playbook/pb_text_input/text_input.rb +2 -1
  189. data/app/pb_kits/playbook/pb_text_input/text_input.test.js +1 -1
  190. data/app/pb_kits/playbook/pb_textarea/textarea.html.erb +2 -1
  191. data/app/pb_kits/playbook/pb_time/time.html.erb +2 -1
  192. data/app/pb_kits/playbook/pb_time_range_inline/time_range_inline.html.erb +3 -2
  193. data/app/pb_kits/playbook/pb_time_stacked/time_stacked.html.erb +2 -1
  194. data/app/pb_kits/playbook/pb_timeline/item.html.erb +2 -1
  195. data/app/pb_kits/playbook/pb_timeline/timeline.html.erb +2 -1
  196. data/app/pb_kits/playbook/pb_timestamp/timestamp.html.erb +2 -1
  197. data/app/pb_kits/playbook/pb_title/title.html.erb +3 -2
  198. data/app/pb_kits/playbook/pb_title_count/title_count.html.erb +2 -1
  199. data/app/pb_kits/playbook/pb_title_detail/title_detail.html.erb +2 -1
  200. data/app/pb_kits/playbook/pb_toggle/_toggle.scss +39 -6
  201. data/app/pb_kits/playbook/pb_toggle/_toggle.tsx +17 -12
  202. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_disabled.html.erb +11 -0
  203. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_disabled.jsx +21 -0
  204. data/app/pb_kits/playbook/pb_toggle/docs/example.yml +3 -1
  205. data/app/pb_kits/playbook/pb_toggle/docs/index.js +1 -0
  206. data/app/pb_kits/playbook/pb_toggle/toggle.html.erb +2 -1
  207. data/app/pb_kits/playbook/pb_toggle/toggle.rb +2 -1
  208. data/app/pb_kits/playbook/pb_toggle/toggle.test.js +7 -0
  209. data/app/pb_kits/playbook/pb_tooltip/tooltip.html.erb +2 -1
  210. data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb +2 -1
  211. data/app/pb_kits/playbook/pb_user/user.html.erb +2 -1
  212. data/app/pb_kits/playbook/pb_user_badge/user_badge.html.erb +2 -1
  213. data/app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.html.erb +2 -1
  214. data/app/pb_kits/playbook/utilities/_positioning.scss +23 -10
  215. data/app/pb_kits/playbook/utilities/globalProps.ts +26 -8
  216. data/dist/menu.yml +4 -0
  217. data/dist/playbook-rails.js +7 -7
  218. data/lib/playbook/bottom.rb +6 -3
  219. data/lib/playbook/kit_base.rb +18 -0
  220. data/lib/playbook/left.rb +6 -3
  221. data/lib/playbook/pb_doc_helper.rb +1 -1
  222. data/lib/playbook/position_props_css.rb +17 -0
  223. data/lib/playbook/props/percentage.rb +2 -2
  224. data/lib/playbook/right.rb +6 -3
  225. data/lib/playbook/top.rb +6 -3
  226. data/lib/playbook/version.rb +2 -2
  227. metadata +28 -41
  228. data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data.js +0 -278
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 53ec5eba2bcbca69770aff3a4995d6acebd6837d3e47ca43f6e65a075945114f
4
- data.tar.gz: 6834eef7adb98d03a39e1b9fc62eb0cf6c3d419d884a8aa55047898169b49bfe
3
+ metadata.gz: 0c894084e0c1cc07610f03f36b5b43f12d06424972c05f2df62ede911084d298
4
+ data.tar.gz: b4205145f75c04ae2c6aaf96a4df45a997d66d021ecba6109d70e457b6b24d06
5
5
  SHA512:
6
- metadata.gz: 8192c971c521ec1a33906219fc0cab51b8c325b722a9c1339743d2f0702f9584a7edd3a27e850fedd45f6262b197a41f5a4ad3c0a132e790870eb62c430560f5
7
- data.tar.gz: 89019b191251d20c60eb613df60e14ac50dee6567b552b274d0bb03979817a4a4026538229b7e41be05d50000373f2fbb430bc30035a231279f5d676f975fac3
6
+ metadata.gz: 26098e286c2d7a637eeaef8c45707cbada6ce224b2f99bbb7fdca1c7b171ffaded0d6c3aa03b5334740435a841dcdcbcbdaaadfb93c741e975215ff5f8fc0ca7
7
+ data.tar.gz: d37f71b2b857b5d475f16228602ed2b6cabd796ee29c15e501a5c415b59b06b6bda5665d324725cb1090aaa7693abcb7de6508ac0b78419145c35de2ad2a5f3b
@@ -1,19 +1,21 @@
1
- import React, { useContext } from "react";
1
+ import React, { useContext } from "react"
2
+ import { Getter, Row } from "@tanstack/react-table"
2
3
 
3
- import Flex from "../../pb_flex/_flex";
4
- import FlexItem from "../../pb_flex/_flex_item";
5
- import Icon from "../../pb_icon/_icon";
6
- import { GlobalProps } from "../../utilities/globalProps";
4
+ import { GenericObject } from "../../types"
7
5
 
8
- import { Getter, Row } from "@tanstack/react-table";
9
- import { DataType } from "../Utilities/types";
10
- import AdvancedTableContext from "../Context/AdvancedTableContext";
6
+ import { GlobalProps } from "../../utilities/globalProps"
7
+
8
+ import Flex from "../../pb_flex/_flex"
9
+ import FlexItem from "../../pb_flex/_flex_item"
10
+ import Icon from "../../pb_icon/_icon"
11
+
12
+ import AdvancedTableContext from "../Context/AdvancedTableContext"
11
13
 
12
14
  interface CustomCellProps {
13
- getValue?: Getter<string>;
14
- onRowToggleClick?: (arg: Row<DataType>) => void;
15
- row: Row<DataType>;
16
- value?: string;
15
+ getValue?: Getter<string>
16
+ onRowToggleClick?: (arg: Row<GenericObject>) => void
17
+ row: Row<GenericObject>
18
+ value?: string
17
19
  }
18
20
 
19
21
  export const CustomCell = ({
@@ -22,12 +24,16 @@ export const CustomCell = ({
22
24
  row,
23
25
  value,
24
26
  }: CustomCellProps & GlobalProps) => {
25
- const { setExpanded, expanded, inlineRowLoading } = useContext(AdvancedTableContext);
27
+ const { setExpanded, expanded, expandedControl, inlineRowLoading } = useContext(AdvancedTableContext);
26
28
 
27
- const handleOnExpand = (row: Row<DataType>) => {
29
+ const handleOnExpand = (row: Row<GenericObject>) => {
28
30
  onRowToggleClick && onRowToggleClick(row);
29
- setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() });
31
+
32
+ if (!expandedControl) {
33
+ setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() });
34
+ }
30
35
  };
36
+
31
37
  const RowHasChildren = row.original.children ? true : false
32
38
  const renderButton = inlineRowLoading ? RowHasChildren : row.getCanExpand()
33
39
 
@@ -59,5 +65,5 @@ export const CustomCell = ({
59
65
  </FlexItem>
60
66
  </Flex>
61
67
  </div>
62
- );
63
- };
68
+ )
69
+ }
@@ -1,11 +1,14 @@
1
1
  import React from "react"
2
- import Icon from "../../pb_icon/_icon"
3
2
  import { Header } from "@tanstack/react-table"
4
- import { DataType } from "../Utilities/types"
3
+
4
+ import { GenericObject } from "../../types"
5
+
6
+ import Icon from "../../pb_icon/_icon"
7
+
5
8
  import { displayIcon } from "../Utilities/IconHelpers"
6
9
 
7
10
  type SortIconButtonProps = {
8
- header: Header<DataType, unknown>
11
+ header: Header<GenericObject, unknown>
9
12
  sortIcon?: string | string[]
10
13
  }
11
14
  export const SortIconButton = ({ header, sortIcon }: SortIconButtonProps) => {
@@ -1,23 +1,27 @@
1
1
  import React, { useContext } from "react"
2
+ import { Row, Table } from "@tanstack/react-table"
3
+
4
+ import { GenericObject } from "../../types"
5
+
6
+ import { GlobalProps } from "../../utilities/globalProps"
7
+
2
8
  import Flex from "../../pb_flex/_flex"
3
9
  import Caption from "../../pb_caption/_caption"
4
- import { Row, Table } from "@tanstack/react-table"
5
10
 
6
- import AdvancedTableContext from "../Context/AdvancedTableContext";
7
11
  import { ToggleIconButton } from "./ToggleIconButton"
8
12
  import { renderCollapsibleTrail } from "./CollapsibleTrail"
9
13
 
10
14
  import { isChrome } from "../Utilities/BrowserCheck"
11
- import { DataType } from "../Utilities/types"
12
- import { GlobalProps } from "../../utilities/globalProps"
15
+
16
+ import AdvancedTableContext from "../Context/AdvancedTableContext"
13
17
 
14
18
  interface SubRowHeaderRowProps {
15
19
  collapsibleTrail?: boolean
16
20
  enableToggleExpansion?: "all" | "header" | "none"
17
- onClick: (row: Row<DataType>) => void
18
- row: Row<DataType>
21
+ onClick: (row: Row<GenericObject>) => void
22
+ row: Row<GenericObject>
19
23
  subRowHeaders?: string[]
20
- table: Table<DataType>
24
+ table: Table<GenericObject>
21
25
  }
22
26
 
23
27
  export const SubRowHeaderRow = ({
@@ -28,7 +32,7 @@ export const SubRowHeaderRow = ({
28
32
  subRowHeaders,
29
33
  table,
30
34
  }: SubRowHeaderRowProps & GlobalProps) => {
31
- const { inlineRowLoading } = useContext(AdvancedTableContext);
35
+ const { inlineRowLoading } = useContext(AdvancedTableContext)
32
36
 
33
37
  const numberOfColumns = table.getAllFlatColumns().length
34
38
  const rowHasChildren = row.original.children ? true : false
@@ -1,20 +1,25 @@
1
1
  import React, { useContext } from "react"
2
- import classnames from "classnames";
3
- import Flex from "../../pb_flex/_flex"
2
+ import classnames from "classnames"
4
3
  import { flexRender, Header } from "@tanstack/react-table"
5
4
 
5
+ import { GenericObject } from "../../types"
6
+
7
+ import { GlobalProps } from "../../utilities/globalProps"
8
+
9
+ import Flex from "../../pb_flex/_flex"
10
+
6
11
  import { SortIconButton } from "./SortIconButton"
7
12
  import { ToggleIconButton } from "./ToggleIconButton"
13
+
8
14
  import { isChrome } from "../Utilities/BrowserCheck"
9
- import { DataType } from "../Utilities/types"
15
+
10
16
  import AdvancedTableContext from "../Context/AdvancedTableContext"
11
- import { GlobalProps } from "../../utilities/globalProps"
12
17
 
13
18
  type TableHeaderCellProps = {
14
19
  enableSorting?: boolean
15
20
  enableToggleExpansion?: "all" | "header" | "none"
16
21
  handleExpandOrCollapse?: () => void
17
- header?: Header<DataType, unknown>
22
+ header?: Header<GenericObject, unknown>
18
23
  headerChildren?: React.ReactNode | React.ReactNode[]
19
24
  loading?: boolean
20
25
  sortIcon?: string | string[]
@@ -45,24 +50,24 @@ export const TableHeaderCell = ({
45
50
  const cellClassName = classnames("table-header-cells",
46
51
  `${isChrome() ? "chrome-styles" : ""}`,
47
52
  `${enableSorting ? "table-header-cells-active" : ""}`
48
- );
53
+ )
49
54
 
50
55
  const cellId = `${loading ?
51
56
  `loading-${header.id}`
52
57
  : `${header.id}`
53
- }`;
58
+ }`
54
59
 
55
60
  const isToggleExpansionEnabledLoading =
56
61
  header.index === 0 &&
57
62
  loading &&
58
63
  (enableToggleExpansion === "all" || "header") &&
59
- enableToggleExpansion !== "none";
64
+ enableToggleExpansion !== "none"
60
65
 
61
66
  const isToggleExpansionEnabled =
62
67
  header.index === 0 &&
63
68
  !loading &&
64
69
  (enableToggleExpansion === "all" || "header") &&
65
- enableToggleExpansion !== "none";
70
+ enableToggleExpansion !== "none"
66
71
 
67
72
  return (
68
73
  <th
@@ -1,13 +1,17 @@
1
1
  import React, { useContext } from "react"
2
- import Icon from "../../pb_icon/_icon"
3
2
  import { Row } from "@tanstack/react-table"
4
- import AdvancedTableContext from "../Context/AdvancedTableContext"
5
- import { DataType } from "../Utilities/types"
3
+
4
+ import { GenericObject } from "../../types"
5
+
6
+ import Icon from "../../pb_icon/_icon"
7
+
6
8
  import { displayIcon } from "../Utilities/IconHelpers"
7
9
 
10
+ import AdvancedTableContext from "../Context/AdvancedTableContext"
11
+
8
12
  interface ToggleIconButtonProps {
9
- onClick: (row: Row<DataType>) => void
10
- row?: Row<DataType>
13
+ onClick: (row: Row<GenericObject>) => void
14
+ row?: Row<GenericObject>
11
15
  }
12
16
 
13
17
  export const ToggleIconButton = ({ row, onClick }: ToggleIconButtonProps) => {
@@ -81,7 +81,7 @@ const MOCK_DATA = [
81
81
  graduatedStudents: "43",
82
82
  children: [
83
83
  {
84
- year: "2011",
84
+ year: "2021",
85
85
  quarter: "Q1",
86
86
  month: "February",
87
87
  day: "15",
@@ -173,7 +173,7 @@ const MOCK_DATA = [
173
173
  graduatedStudents: "43",
174
174
  children: [
175
175
  {
176
- year: "2011",
176
+ year: "2022",
177
177
  quarter: "Q1",
178
178
  month: "May",
179
179
  day: "2",
@@ -1,22 +1,26 @@
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
- import LoadingInline from "../../pb_loading_inline/_loading_inline"
2
+ import classnames from "classnames"
6
3
  import { flexRender, Row } from "@tanstack/react-table"
7
4
 
5
+ import { GenericObject } from "../../types"
6
+
7
+ import { buildCss } from "../../utilities/props"
8
+ import { globalProps } from "../../utilities/globalProps"
9
+ import { isChrome } from "../Utilities/BrowserCheck"
10
+
11
+ import LoadingInline from "../../pb_loading_inline/_loading_inline"
12
+
8
13
  import { SubRowHeaderRow } from "../Components/SubRowHeaderRow"
9
14
  import { LoadingCell } from "../Components/LoadingCell"
10
15
  import { renderCollapsibleTrail } from "../Components/CollapsibleTrail"
16
+
11
17
  import AdvancedTableContext from "../Context/AdvancedTableContext"
12
- import { isChrome } from "../Utilities/BrowserCheck"
13
- import { DataType } from "../Utilities/types"
14
18
 
15
19
  type TableBodyProps = {
16
- className?: string;
20
+ className?: string
17
21
  collapsibleTrail?: boolean
18
- dark?: boolean,
19
- id?: string;
22
+ dark?: boolean
23
+ id?: string
20
24
  subRowHeaders?: string[]
21
25
  }
22
26
 
@@ -42,14 +46,14 @@ export const TableBody = ({
42
46
  buildCss("pb_advanced_table_body"),
43
47
  globalProps(props),
44
48
  className
45
- );
49
+ )
46
50
 
47
51
  return (
48
52
  <>
49
53
  <tbody className={classes}
50
54
  id={id}
51
55
  >
52
- {table.getRowModel().rows.map((row: Row<DataType>) => {
56
+ {table.getRowModel().rows.map((row: Row<GenericObject>) => {
53
57
  const isExpandable = row.getIsExpanded()
54
58
  const isFirstChildofSubrow = row.depth > 0 && row.index === 0
55
59
  const rowHasNoChildren = row.original.children && !row.original.children.length ? true : false
@@ -1,18 +1,22 @@
1
1
  import React, { useContext } from "react"
2
- import classnames from "classnames";
3
- import { buildCss } from "../../utilities/props";
4
- import { globalProps } from "../../utilities/globalProps";
2
+ import classnames from "classnames"
5
3
  import { HeaderGroup } from "@tanstack/react-table"
6
- import AdvancedTableContext from "../Context/AdvancedTableContext"
4
+
5
+ import { GenericObject } from "../../types"
6
+
7
+ import { buildCss } from "../../utilities/props"
8
+ import { globalProps } from "../../utilities/globalProps"
9
+
7
10
  import { TableHeaderCell } from "../Components/TableHeaderCell"
8
- import { DataType } from "../Utilities/types"
11
+
12
+ import AdvancedTableContext from "../Context/AdvancedTableContext"
9
13
 
10
14
  type TableHeaderProps = {
11
15
  children?: React.ReactNode | React.ReactNode[]
12
16
  className?: string
13
17
  dark?: boolean,
14
18
  enableSorting?: boolean
15
- id?: string;
19
+ id?: string
16
20
  sortIcon?: string | string[]
17
21
  }
18
22
 
@@ -36,7 +40,7 @@ export const TableHeader = ({
36
40
  buildCss("pb_advanced_table_header"),
37
41
  globalProps(props),
38
42
  className
39
- );
43
+ )
40
44
 
41
45
 
42
46
  return (
@@ -45,7 +49,7 @@ export const TableHeader = ({
45
49
  id={id}
46
50
  >
47
51
  {/* Get the header groups (only one in this example) */}
48
- {table.getHeaderGroups().map((headerGroup: HeaderGroup<DataType>) => (
52
+ {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>) => (
49
53
  <tr key={`${headerGroup.id}-headerGroup`}>
50
54
  {headerGroup.headers.map(header => (
51
55
  <TableHeaderCell
@@ -1,5 +1,6 @@
1
1
  import { RowModel } from "@tanstack/react-table"
2
- import { DataType, ExpandedStateObject } from "./types"
2
+ import { ExpandedStateObject } from "./types"
3
+ import { GenericObject } from "../../types"
3
4
 
4
5
  const filterExpandableRows = (expandedState: Record<string, boolean>) => {
5
6
  for (const expandedRow in expandedState) {
@@ -11,7 +12,7 @@ const filterExpandableRows = (expandedState: Record<string, boolean>) => {
11
12
  }
12
13
 
13
14
  export const updateExpandAndCollapseState = (
14
- tableRows: RowModel<DataType>,
15
+ tableRows: RowModel<GenericObject>,
15
16
  expanded: Record<string, boolean>,
16
17
  targetParent: string
17
18
  ) => {
@@ -4,5 +4,3 @@ export type ExpandedStateObject = Extract<
4
4
  ExpandedState,
5
5
  Record<string, boolean>
6
6
  >
7
-
8
- export type DataType = { [key: string]: any }
@@ -4,6 +4,7 @@
4
4
  @import "../tokens/spacing";
5
5
  @import "./scss_partials/loading";
6
6
  @import "./scss_partials/pseudo_states";
7
+ @import "./scss_partials/chrome_styles";
7
8
 
8
9
  .pb_advanced_table {
9
10
  $border-color: 1px solid $border_light !important;
@@ -82,18 +83,15 @@
82
83
 
83
84
  // Vertical separator
84
85
  .table-header-cells:first-child,
85
- td:first-child {
86
- box-shadow: 1px 0px 0px 0px #e4e8f0 !important;
86
+ td:first-child,
87
+ .pb_table_td:first-child {
88
+ box-shadow: 1px 0px 0px 0px $border_light !important;
87
89
  }
88
90
 
89
- .chrome-styles:first-child {
90
- border-right: $border-color;
91
- }
91
+ @include chrome_styles($border-color);
92
92
 
93
- .table-card {
94
- .chrome-styles:first-child {
95
- border-right: $transparent !important;
96
- }
93
+ tr:hover {
94
+ position: relative;
97
95
  }
98
96
 
99
97
  &.dark {