playbook_ui 13.21.0 → 13.22.0.pre.alpha.pbntr254barchartnegativenumber2640

Sign up to get free protection for your applications and to get access to all the features.
Files changed (236) 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 +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 +84 -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 +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_bar_graph/_bar_graph.tsx +9 -0
  44. data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb +2 -0
  45. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.html.erb +23 -0
  46. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx +35 -0
  47. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.html.erb +22 -0
  48. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.jsx +34 -0
  49. data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +4 -1
  50. data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +2 -0
  51. data/app/pb_kits/playbook/pb_body/body.html.erb +2 -1
  52. data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.scss +0 -7
  53. data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumb_item.html.erb +2 -1
  54. data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumbs.html.erb +2 -1
  55. data/app/pb_kits/playbook/pb_button/button.html.erb +2 -1
  56. data/app/pb_kits/playbook/pb_button/button.rb +2 -3
  57. data/app/pb_kits/playbook/pb_button_toolbar/button_toolbar.html.erb +2 -1
  58. data/app/pb_kits/playbook/pb_caption/caption.html.erb +2 -1
  59. data/app/pb_kits/playbook/pb_card/card.html.erb +2 -1
  60. data/app/pb_kits/playbook/pb_card/card_body.html.erb +2 -1
  61. data/app/pb_kits/playbook/pb_card/card_header.html.erb +2 -1
  62. data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb +3 -1
  63. data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb +2 -1
  64. data/app/pb_kits/playbook/pb_collapsible/collapsible.html.erb +2 -1
  65. data/app/pb_kits/playbook/pb_collapsible/collapsible_content.html.erb +2 -1
  66. data/app/pb_kits/playbook/pb_collapsible/collapsible_main.html.erb +2 -1
  67. data/app/pb_kits/playbook/pb_contact/contact.html.erb +2 -1
  68. data/app/pb_kits/playbook/pb_currency/currency.html.erb +2 -1
  69. data/app/pb_kits/playbook/pb_dashboard_value/dashboard_value.html.erb +2 -1
  70. data/app/pb_kits/playbook/pb_date/date.html.erb +2 -1
  71. data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +1 -2
  72. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +3 -0
  73. data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +4 -2
  74. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +2 -1
  75. data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js +1 -1
  76. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +9 -7
  77. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb +0 -7
  78. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx +0 -7
  79. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_margin_bottom.html.erb +7 -0
  80. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_margin_bottom.jsx +41 -0
  81. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb +7 -0
  82. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx +7 -0
  83. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +4 -2
  84. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -0
  85. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_input_styles.scss +1 -2
  86. data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.html.erb +2 -1
  87. data/app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.html.erb +2 -1
  88. data/app/pb_kits/playbook/pb_date_stacked/date_stacked.html.erb +2 -1
  89. data/app/pb_kits/playbook/pb_date_time/date_time.html.erb +2 -1
  90. data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.html.erb +3 -2
  91. data/app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.html.erb +2 -1
  92. data/app/pb_kits/playbook/pb_detail/detail.html.erb +2 -1
  93. data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +2 -1
  94. data/app/pb_kits/playbook/pb_dialog/dialog_body.html.erb +3 -2
  95. data/app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb +3 -2
  96. data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +5 -4
  97. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb +2 -0
  98. data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb +2 -1
  99. data/app/pb_kits/playbook/pb_filter/filter.html.erb +2 -1
  100. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss +8 -3
  101. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +1 -0
  102. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb +51 -1
  103. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx +62 -11
  104. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions.html.erb +7 -2
  105. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb +4 -3
  106. data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.html.erb +0 -4
  107. data/app/pb_kits/playbook/pb_flex/flex.html.erb +2 -1
  108. data/app/pb_kits/playbook/pb_flex/flex_item.html.erb +2 -1
  109. data/app/pb_kits/playbook/pb_form_group/_form_group.scss +34 -0
  110. data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb +17 -1
  111. data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx +18 -2
  112. data/app/pb_kits/playbook/pb_form_group/form_group.html.erb +2 -1
  113. data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +2 -2
  114. data/app/pb_kits/playbook/pb_hashtag/hashtag.html.erb +2 -1
  115. data/app/pb_kits/playbook/pb_highlight/highlight.html.erb +2 -1
  116. data/app/pb_kits/playbook/pb_home_address_street/home_address_street.html.erb +2 -1
  117. data/app/pb_kits/playbook/pb_icon/_icon.tsx +1 -0
  118. data/app/pb_kits/playbook/pb_icon/icon.html.erb +2 -1
  119. data/app/pb_kits/playbook/pb_icon/icon.rb +3 -3
  120. data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss +14 -0
  121. data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx +1 -1
  122. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.html.erb +5 -0
  123. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.jsx +6 -0
  124. data/app/pb_kits/playbook/pb_icon_circle/icon_circle.html.erb +2 -1
  125. data/app/pb_kits/playbook/pb_icon_circle/icon_circle.rb +1 -1
  126. data/app/pb_kits/playbook/pb_icon_circle/icon_circle.test.js +1 -0
  127. data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.html.erb +2 -1
  128. data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.rb +0 -2
  129. data/app/pb_kits/playbook/pb_icon_value/icon_value.html.erb +2 -1
  130. data/app/pb_kits/playbook/pb_image/image.html.erb +2 -1
  131. data/app/pb_kits/playbook/pb_label_pill/label_pill.html.erb +2 -1
  132. data/app/pb_kits/playbook/pb_label_value/label_value.html.erb +3 -2
  133. data/app/pb_kits/playbook/pb_layout/body.html.erb +2 -1
  134. data/app/pb_kits/playbook/pb_layout/footer.html.erb +2 -1
  135. data/app/pb_kits/playbook/pb_layout/header.html.erb +2 -1
  136. data/app/pb_kits/playbook/pb_layout/item.html.erb +2 -1
  137. data/app/pb_kits/playbook/pb_layout/layout.html.erb +2 -1
  138. data/app/pb_kits/playbook/pb_layout/sidebar.html.erb +2 -1
  139. data/app/pb_kits/playbook/pb_legend/legend.html.erb +2 -1
  140. data/app/pb_kits/playbook/pb_list/item.html.erb +2 -1
  141. data/app/pb_kits/playbook/pb_list/list.html.erb +2 -1
  142. data/app/pb_kits/playbook/pb_list/list.rb +0 -2
  143. data/app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb +2 -1
  144. data/app/pb_kits/playbook/pb_message/message.html.erb +2 -1
  145. data/app/pb_kits/playbook/pb_message/message_mention.html.erb +3 -2
  146. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.md +2 -2
  147. 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
  148. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids_react.md +5 -0
  149. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +1 -1
  150. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +1 -1
  151. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb +2 -1
  152. data/app/pb_kits/playbook/pb_multiple_users/multiple_users.html.erb +2 -1
  153. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb +2 -1
  154. data/app/pb_kits/playbook/pb_nav/item.html.erb +4 -2
  155. data/app/pb_kits/playbook/pb_nav/nav.html.erb +2 -1
  156. data/app/pb_kits/playbook/pb_online_status/_online_status.scss +1 -10
  157. data/app/pb_kits/playbook/pb_online_status/_online_status.tsx +1 -1
  158. data/app/pb_kits/playbook/pb_online_status/_online_status_mixins.scss +7 -13
  159. data/app/pb_kits/playbook/pb_online_status/docs/_online_status_default.html.erb +6 -9
  160. data/app/pb_kits/playbook/pb_online_status/docs/_online_status_default.jsx +18 -7
  161. data/app/pb_kits/playbook/pb_online_status/online_status.html.erb +2 -1
  162. data/app/pb_kits/playbook/pb_online_status/online_status.rb +1 -1
  163. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.html.erb +2 -1
  164. data/app/pb_kits/playbook/pb_pagination/pagination.html.erb +2 -1
  165. data/app/pb_kits/playbook/pb_passphrase/passphrase.html.erb +1 -1
  166. data/app/pb_kits/playbook/pb_person/person.html.erb +2 -1
  167. data/app/pb_kits/playbook/pb_person_contact/person_contact.html.erb +2 -1
  168. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb +2 -2
  169. data/app/pb_kits/playbook/pb_pill/pill.html.erb +2 -1
  170. data/app/pb_kits/playbook/pb_popover/popover.html.erb +2 -1
  171. data/app/pb_kits/playbook/pb_progress_pills/progress_pills.html.erb +2 -1
  172. data/app/pb_kits/playbook/pb_progress_simple/progress_simple.html.erb +2 -1
  173. data/app/pb_kits/playbook/pb_progress_step/progress_step.html.erb +2 -1
  174. data/app/pb_kits/playbook/pb_progress_step/progress_step_item.html.erb +2 -1
  175. data/app/pb_kits/playbook/pb_radio/radio.html.erb +2 -1
  176. data/app/pb_kits/playbook/pb_section_separator/section_separator.html.erb +2 -1
  177. data/app/pb_kits/playbook/pb_select/select.html.erb +2 -1
  178. data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb +2 -1
  179. data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.html.erb +2 -1
  180. data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.html.erb +2 -1
  181. data/app/pb_kits/playbook/pb_selectable_list/selectable_list.html.erb +2 -1
  182. data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.html.erb +2 -1
  183. data/app/pb_kits/playbook/pb_source/source.html.erb +2 -1
  184. data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb +2 -1
  185. data/app/pb_kits/playbook/pb_stat_change/stat_change.html.erb +2 -1
  186. data/app/pb_kits/playbook/pb_stat_value/stat_value.html.erb +2 -1
  187. data/app/pb_kits/playbook/pb_table/table.html.erb +4 -2
  188. data/app/pb_kits/playbook/pb_table/table_body.html.erb +5 -3
  189. data/app/pb_kits/playbook/pb_table/table_cell.html.erb +5 -3
  190. data/app/pb_kits/playbook/pb_table/table_head.html.erb +5 -3
  191. data/app/pb_kits/playbook/pb_table/table_header.html.erb +5 -3
  192. data/app/pb_kits/playbook/pb_table/table_row.html.erb +5 -3
  193. data/app/pb_kits/playbook/pb_text_input/_text_input.scss +0 -1
  194. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +5 -1
  195. data/app/pb_kits/playbook/pb_text_input/text_input.html.erb +2 -1
  196. data/app/pb_kits/playbook/pb_text_input/text_input.rb +2 -1
  197. data/app/pb_kits/playbook/pb_text_input/text_input.test.js +1 -1
  198. data/app/pb_kits/playbook/pb_textarea/textarea.html.erb +2 -1
  199. data/app/pb_kits/playbook/pb_time/time.html.erb +2 -1
  200. data/app/pb_kits/playbook/pb_time_range_inline/time_range_inline.html.erb +3 -2
  201. data/app/pb_kits/playbook/pb_time_stacked/time_stacked.html.erb +2 -1
  202. data/app/pb_kits/playbook/pb_timeline/item.html.erb +2 -1
  203. data/app/pb_kits/playbook/pb_timeline/timeline.html.erb +2 -1
  204. data/app/pb_kits/playbook/pb_timestamp/timestamp.html.erb +2 -1
  205. data/app/pb_kits/playbook/pb_title/title.html.erb +3 -2
  206. data/app/pb_kits/playbook/pb_title_count/title_count.html.erb +2 -1
  207. data/app/pb_kits/playbook/pb_title_detail/title_detail.html.erb +2 -1
  208. data/app/pb_kits/playbook/pb_toggle/_toggle.scss +39 -6
  209. data/app/pb_kits/playbook/pb_toggle/_toggle.tsx +17 -12
  210. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_disabled.html.erb +11 -0
  211. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_disabled.jsx +21 -0
  212. data/app/pb_kits/playbook/pb_toggle/docs/example.yml +3 -1
  213. data/app/pb_kits/playbook/pb_toggle/docs/index.js +1 -0
  214. data/app/pb_kits/playbook/pb_toggle/toggle.html.erb +2 -1
  215. data/app/pb_kits/playbook/pb_toggle/toggle.rb +2 -1
  216. data/app/pb_kits/playbook/pb_toggle/toggle.test.js +7 -0
  217. data/app/pb_kits/playbook/pb_tooltip/tooltip.html.erb +2 -1
  218. data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb +2 -1
  219. data/app/pb_kits/playbook/pb_user/user.html.erb +2 -1
  220. data/app/pb_kits/playbook/pb_user_badge/user_badge.html.erb +2 -1
  221. data/app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.html.erb +2 -1
  222. data/app/pb_kits/playbook/utilities/_positioning.scss +23 -10
  223. data/app/pb_kits/playbook/utilities/globalProps.ts +26 -8
  224. data/dist/menu.yml +4 -0
  225. data/dist/playbook-rails.js +7 -7
  226. data/lib/playbook/bottom.rb +6 -3
  227. data/lib/playbook/kit_base.rb +18 -0
  228. data/lib/playbook/left.rb +6 -3
  229. data/lib/playbook/pb_doc_helper.rb +1 -1
  230. data/lib/playbook/position_props_css.rb +17 -0
  231. data/lib/playbook/props/percentage.rb +2 -2
  232. data/lib/playbook/right.rb +6 -3
  233. data/lib/playbook/top.rb +6 -3
  234. data/lib/playbook/version.rb +2 -2
  235. metadata +33 -42
  236. 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: e6c19fad05505af542ad2b4998d9d9d6f225ad3b46568420e87f7a3d72847cf2
4
- data.tar.gz: '05208a0115fc90b97569c6c96c3847211b2136550f95817eb2dd8eb3eac2c90a'
3
+ metadata.gz: 698c471b62dca2248d6cd9383e5233813dd67e8dfdef7d4b787074fc9ee5a001
4
+ data.tar.gz: f221c3e16f0df358f8fabefc756ef62c7bc62745a3cd751c45851511b41dc2d4
5
5
  SHA512:
6
- metadata.gz: adad3d8a3607b475d9f16c1cc34ee1937fb52b4d2e3af4c7dd481a5a258ba972aa6df89bcbc1c59bb833300b3b9ff9d5988741321bfb5908d6e3706449f7b397
7
- data.tar.gz: 1636c11fdc69b49524df0d8c0d17e91dc732f356fe279b78fc90287053bec7c7529377376acd1cb22d2b6903552d1ea448e91e3730c2738b47f62fdc4a15452e
6
+ metadata.gz: 30c747d874c99f45950dcd9467741556ac8800798faf58c5a9c5fce320baa7a79e7644d3d3476992a8a67619e586dc8afc8b35230b05f477021c2cffe8f2a507
7
+ data.tar.gz: de32503c6c661877228a8490b4676d663038dcd0c9c5c0823bcc815cdae3c7640e270ce4f3c115f0ff624baae5d5c80dbff1335b3694ce446aa812552659b42a
@@ -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,46 +12,31 @@ 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
  ) => {
18
- const updateExpandedRows: Record<string, boolean> = {}
19
- const rows = tableRows.flatRows
20
- // Variable checks if all rows in a section have same expansion state or not
21
- let isExpansionConsistent = true
22
- const areRowsExpanded = new Set<boolean>()
19
+ const updateExpandedRows: Record<string, boolean> = {};
20
+ const rows = tableRows.rows;
21
+
22
+ let isExpansionConsistent = true;
23
+ const areRowsExpanded = new Set<boolean>();
23
24
 
24
- // Update isExpansionConsistent variable
25
25
  for (const row of rows) {
26
- if (
27
- targetParent === undefined
28
- ? row.depth === 0
29
- : targetParent === row.parentId
30
- ) {
31
- areRowsExpanded.add(row.getIsExpanded())
32
- if (areRowsExpanded.size > 1) {
33
- isExpansionConsistent = false
34
- break
35
- }
36
- }
37
- }
26
+ const shouldBeUpdated = targetParent === undefined ? row.depth === 0 : targetParent === row.parentId;
27
+
28
+ if (shouldBeUpdated) {
29
+ const isExpanded = row.getIsExpanded();
30
+ areRowsExpanded.add(isExpanded);
38
31
 
39
- // The if statement runs only for row depth 0, the else statement for the rest
40
- if (targetParent === undefined) {
41
- rows.forEach(row => {
42
- if (row.depth === 0) {
43
- updateExpandedRows[row.id] = !isExpansionConsistent
44
- ? true
45
- : !row.getIsExpanded()
46
- }
47
- })
48
- } else {
49
- for (const row of rows) {
50
- if (targetParent === row.parentId) {
51
- updateExpandedRows[row.id] = !isExpansionConsistent
52
- ? true
53
- : !row.getIsExpanded()
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
+ }
54
40
  }
55
41
  }
56
42
  }
@@ -58,5 +44,5 @@ export const updateExpandAndCollapseState = (
58
44
  return filterExpandableRows({
59
45
  ...(expanded as ExpandedStateObject),
60
46
  ...updateExpandedRows,
61
- })
62
- }
47
+ });
48
+ };
@@ -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 {