playbook_ui 14.19.0.pre.rc.2 → 14.20.0.pre.alpha.revert4453PBNTR933reactdraggablebugdragbtwnexamples7854

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (223) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +0 -1
  3. data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx +11 -1
  4. data/app/pb_kits/playbook/pb_advanced_table/Components/TableActionBar.tsx +175 -16
  5. data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +56 -25
  6. data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts +23 -13
  7. data/app/pb_kits/playbook/pb_advanced_table/Utilities/VisibilityTree.ts +47 -0
  8. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +6 -10
  9. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +7 -2
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.md +0 -6
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility.jsx +57 -0
  12. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility.md +4 -0
  13. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_custom.jsx +62 -0
  14. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_custom.md +1 -0
  15. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_multi.jsx +82 -0
  16. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_multi.md +1 -0
  17. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_with_state.jsx +66 -0
  18. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_with_state.md +3 -0
  19. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows_rails.md +5 -1
  20. data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows_no_subrows.jsx → _advanced_table_selectable_rows_no_subrows_react.jsx} +2 -2
  21. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_rails.md +3 -2
  22. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +7 -3
  23. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +6 -2
  24. data/app/pb_kits/playbook/pb_advanced_table/flat_advanced_table.js +106 -0
  25. data/app/pb_kits/playbook/pb_advanced_table/index.js +228 -11
  26. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss +1 -0
  27. data/app/pb_kits/playbook/pb_advanced_table/table_body.rb +9 -1
  28. data/app/pb_kits/playbook/pb_advanced_table/table_header.rb +0 -3
  29. data/app/pb_kits/playbook/pb_advanced_table/table_row.rb +1 -2
  30. data/app/pb_kits/playbook/pb_avatar/_avatar.scss +4 -0
  31. data/app/pb_kits/playbook/pb_avatar/_avatar.tsx +3 -0
  32. data/app/pb_kits/playbook/pb_avatar/avatar.html.erb +3 -3
  33. data/app/pb_kits/playbook/pb_avatar/avatar.rb +2 -0
  34. data/app/pb_kits/playbook/pb_avatar/avatar.test.js +18 -0
  35. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_grayscale.html.erb +5 -0
  36. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_grayscale.jsx +16 -0
  37. data/app/pb_kits/playbook/pb_avatar/docs/example.yml +2 -0
  38. data/app/pb_kits/playbook/pb_avatar/docs/index.js +1 -0
  39. data/app/pb_kits/playbook/pb_card/card.html.erb +1 -1
  40. data/app/pb_kits/playbook/pb_card/card.rb +12 -0
  41. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb +2 -2
  42. data/app/pb_kits/playbook/pb_draggable/context/index.tsx +17 -58
  43. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.html.erb +22 -1
  44. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.html.erb +55 -0
  45. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line_rails.md +5 -0
  46. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_rails.md +5 -0
  47. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.jsx +59 -0
  48. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners_react.md +1 -0
  49. data/app/pb_kits/playbook/pb_draggable/docs/example.yml +2 -0
  50. data/app/pb_kits/playbook/pb_draggable/docs/index.js +2 -1
  51. data/app/pb_kits/playbook/pb_draggable/draggable_container.rb +11 -1
  52. data/app/pb_kits/playbook/pb_draggable/draggable_item.rb +11 -1
  53. data/app/pb_kits/playbook/pb_draggable/index.js +4 -2
  54. data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableItem.tsx +33 -5
  55. data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +6 -1
  56. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +82 -35
  57. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_rails.html.erb +31 -0
  58. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_rails.md +5 -0
  59. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb +5 -2
  60. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select.jsx +56 -0
  61. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select.md +3 -0
  62. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display.jsx +58 -0
  63. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display.md +3 -0
  64. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display_rails.html.erb +20 -0
  65. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display_rails.md +1 -0
  66. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_rails.html.erb +19 -0
  67. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_rails.md +3 -0
  68. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.html.erb +20 -0
  69. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.jsx +57 -0
  70. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.md +1 -0
  71. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_custom_options.html.erb +50 -0
  72. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_custom_options.jsx +105 -0
  73. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_default.html.erb +22 -0
  74. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_default.jsx +67 -0
  75. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.html.erb +28 -0
  76. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +17 -64
  77. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.html.erb +58 -0
  78. data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_autocomplete_and_custom_display.jsx → _dropdown_with_autocomplete_with_subcomponents.jsx} +11 -25
  79. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.md +1 -0
  80. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +11 -0
  81. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md +1 -1
  82. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb +33 -2
  83. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.md +3 -1
  84. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.md +1 -0
  85. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.jsx +61 -0
  86. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.md +2 -0
  87. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.html.erb +52 -0
  88. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.md +2 -0
  89. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +18 -5
  90. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +7 -2
  91. data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb +3 -3
  92. data/app/pb_kits/playbook/pb_dropdown/dropdown.rb +20 -2
  93. data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx +45 -1
  94. data/app/pb_kits/playbook/pb_dropdown/dropdown_container.html.erb +10 -0
  95. data/app/pb_kits/playbook/pb_dropdown/dropdown_container.rb +3 -0
  96. data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.html.erb +37 -6
  97. data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.rb +5 -1
  98. data/app/pb_kits/playbook/pb_dropdown/hooks/useHandleOnKeydown.tsx +0 -6
  99. data/app/pb_kits/playbook/pb_dropdown/index.js +380 -17
  100. data/app/pb_kits/playbook/pb_dropdown/keyboard_accessibility.js +64 -11
  101. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownContainer.tsx +3 -4
  102. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +16 -12
  103. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +83 -17
  104. data/app/pb_kits/playbook/pb_dropdown/subcomponents/MultiSelectTriggerDisplay.tsx +58 -0
  105. data/app/pb_kits/playbook/pb_empty_state/_empty_state.scss +8 -1
  106. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_alignment.html.erb +27 -0
  107. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_default.html.erb +7 -0
  108. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_orientation.html.erb +12 -0
  109. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_size.html.erb +23 -0
  110. data/app/pb_kits/playbook/pb_empty_state/docs/example.yml +5 -1
  111. data/app/pb_kits/playbook/pb_empty_state/empty_state.html.erb +19 -0
  112. data/app/pb_kits/playbook/pb_empty_state/empty_state.rb +123 -0
  113. data/app/pb_kits/playbook/pb_file_upload/_file_upload.scss +13 -0
  114. data/app/pb_kits/playbook/pb_file_upload/_file_upload.tsx +11 -1
  115. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_error.html.erb +1 -0
  116. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_error.jsx +41 -0
  117. data/app/pb_kits/playbook/pb_file_upload/docs/example.yml +2 -0
  118. data/app/pb_kits/playbook/pb_file_upload/docs/index.js +1 -0
  119. data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb +1 -0
  120. data/app/pb_kits/playbook/pb_file_upload/file_upload.rb +7 -1
  121. data/app/pb_kits/playbook/pb_file_upload/fileupload.test.js +18 -0
  122. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -0
  123. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -0
  124. data/app/pb_kits/playbook/pb_form_group/_error_state_mixin.scss +2 -2
  125. data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +19 -12
  126. data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx +13 -7
  127. data/app/pb_kits/playbook/pb_message/_message.tsx +3 -0
  128. data/app/pb_kits/playbook/pb_message/docs/_message_grayscale.html.erb +9 -0
  129. data/app/pb_kits/playbook/pb_message/docs/_message_grayscale.jsx +21 -0
  130. data/app/pb_kits/playbook/pb_message/docs/example.yml +2 -0
  131. data/app/pb_kits/playbook/pb_message/docs/index.js +1 -0
  132. data/app/pb_kits/playbook/pb_message/message.html.erb +2 -1
  133. data/app/pb_kits/playbook/pb_message/message.rb +1 -0
  134. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +2 -2
  135. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.html.erb +11 -11
  136. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.jsx +11 -11
  137. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb +11 -11
  138. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx +11 -11
  139. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled.html.erb +11 -11
  140. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled.jsx +11 -11
  141. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options.html.erb +11 -11
  142. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options.jsx +11 -11
  143. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_default.html.erb +11 -11
  144. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_default.jsx +11 -11
  145. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent.html.erb +11 -11
  146. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent.jsx +11 -11
  147. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent_default.html.erb +11 -11
  148. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent_default.jsx +11 -11
  149. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.html.erb +11 -11
  150. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.jsx +11 -11
  151. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.html.erb +11 -11
  152. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.jsx +11 -11
  153. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.jsx +11 -11
  154. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb +11 -11
  155. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb +11 -11
  156. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.jsx +11 -11
  157. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.html.erb +11 -11
  158. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.md +2 -0
  159. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids_react.jsx +11 -11
  160. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids_react.md +3 -1
  161. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.html.erb +22 -22
  162. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.jsx +22 -22
  163. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.html.erb +22 -22
  164. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.jsx +22 -22
  165. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx +11 -11
  166. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx +11 -11
  167. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_form.html.erb +11 -11
  168. data/app/pb_kits/playbook/pb_overlay/_overlay.scss +2 -1
  169. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.jsx +1 -1
  170. data/app/pb_kits/playbook/pb_overlay/subcomponents/_overlay_token.tsx +5 -4
  171. data/app/pb_kits/playbook/pb_person/_person.tsx +12 -2
  172. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +9 -9
  173. data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx +2 -2
  174. data/app/pb_kits/playbook/pb_select/_select.scss +10 -0
  175. data/app/pb_kits/playbook/pb_select/docs/_select_error.html.erb +1 -1
  176. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx +7 -7
  177. data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx +5 -5
  178. data/app/pb_kits/playbook/pb_text_input/_text_input.scss +4 -2
  179. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.html.erb +1 -1
  180. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.html.erb +5 -1
  181. data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +73 -3
  182. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.html.erb +8 -1
  183. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.jsx +23 -0
  184. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.md +1 -0
  185. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +1 -0
  186. data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -0
  187. data/app/pb_kits/playbook/pb_user/_user.tsx +3 -0
  188. data/app/pb_kits/playbook/pb_user/docs/_user_grayscale.html.erb +6 -0
  189. data/app/pb_kits/playbook/pb_user/docs/_user_grayscale.jsx +16 -0
  190. data/app/pb_kits/playbook/pb_user/docs/example.yml +2 -0
  191. data/app/pb_kits/playbook/pb_user/docs/index.js +1 -0
  192. data/app/pb_kits/playbook/pb_user/user.html.erb +2 -1
  193. data/app/pb_kits/playbook/pb_user/user.rb +1 -0
  194. data/dist/chunks/_typeahead-C-CI5Vgw.js +22 -0
  195. data/dist/chunks/_weekday_stacked-BCiM3zWM.js +45 -0
  196. data/dist/chunks/lib-D5R1BjUn.js +29 -0
  197. data/dist/chunks/{pb_form_validation-BWjy4bFn.js → pb_form_validation-BZ2AVAi_.js} +1 -1
  198. data/dist/chunks/vendor.js +1 -1
  199. data/dist/menu.yml +6 -14
  200. data/dist/playbook-doc.js +2 -2
  201. data/dist/playbook-rails-react-bindings.js +1 -1
  202. data/dist/playbook-rails.js +1 -1
  203. data/dist/playbook.css +1 -1
  204. data/lib/playbook/kit_base.rb +3 -3
  205. data/lib/playbook/version.rb +2 -2
  206. metadata +70 -22
  207. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb +0 -10
  208. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.md +0 -1
  209. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx +0 -79
  210. data/app/pb_kits/playbook/pb_gantt_chart/_gantt_chart.scss +0 -3
  211. data/app/pb_kits/playbook/pb_gantt_chart/_gantt_chart.tsx +0 -72
  212. data/app/pb_kits/playbook/pb_gantt_chart/docs/_gantt_chart_default.jsx +0 -53
  213. data/app/pb_kits/playbook/pb_gantt_chart/docs/example.yml +0 -7
  214. data/app/pb_kits/playbook/pb_gantt_chart/docs/index.js +0 -1
  215. data/app/pb_kits/playbook/pb_gantt_chart/gantt_chart.test.jsx +0 -19
  216. data/dist/chunks/_typeahead-D8CsVBZO.js +0 -22
  217. data/dist/chunks/_weekday_stacked-D3oLTSkH.js +0 -45
  218. data/dist/chunks/lib-BmTAc7Nc.js +0 -29
  219. /data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows_react.md → _advanced_table_selectable_rows.md} +0 -0
  220. /data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows_no_subrows.html.erb → _advanced_table_selectable_rows_no_subrows_rails.html.erb} +0 -0
  221. /data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows.html.erb → _advanced_table_selectable_rows_rails.html.erb} +0 -0
  222. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_drop_zones_line.md → _draggable_drop_zones_line_react.md} +0 -0
  223. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_event_listeners.md → _draggable_event_listeners_rails.md} +0 -0
@@ -0,0 +1,62 @@
1
+ import React from "react"
2
+ import AdvancedTable from '../../pb_advanced_table/_advanced_table'
3
+ import MOCK_DATA from "./advanced_table_mock_data.json"
4
+
5
+ const AdvancedTableColumnVisibilityCustom = (props) => {
6
+ const columnDefinitions = [
7
+ {
8
+ accessor: "year",
9
+ label: "Year",
10
+ cellAccessors: ["quarter", "month", "day"],
11
+ id: "year"
12
+ },
13
+ {
14
+ accessor: "newEnrollments",
15
+ label: "New Enrollments",
16
+ id: "newEnrollments"
17
+ },
18
+ {
19
+ accessor: "scheduledMeetings",
20
+ label: "Scheduled Meetings",
21
+ id: "scheduledMeetings"
22
+ },
23
+ {
24
+ accessor: "attendanceRate",
25
+ label: "Attendance Rate",
26
+ id: "attendanceRate"
27
+ },
28
+ {
29
+ accessor: "completedClasses",
30
+ label: "Completed Classes",
31
+ id: "completedClasses"
32
+ },
33
+ {
34
+ accessor: "classCompletionRate",
35
+ label: "Class Completion Rate",
36
+ id: "classCompletionRate"
37
+ },
38
+ {
39
+ accessor: "graduatedStudents",
40
+ label: "Graduated Students",
41
+ id: "graduatedStudents"
42
+ },
43
+ ]
44
+
45
+ const columnVisibilityControl = {
46
+ // This is the list of column ids that will be included in the column visibility control
47
+ includeIds:["newEnrollments", "scheduledMeetings", "attendanceRate", "completedClasses"],
48
+ }
49
+
50
+ return (
51
+ <div>
52
+ <AdvancedTable
53
+ columnDefinitions={columnDefinitions}
54
+ columnVisibilityControl={columnVisibilityControl}
55
+ tableData={MOCK_DATA}
56
+ {...props}
57
+ />
58
+ </div>
59
+ )
60
+ }
61
+
62
+ export default AdvancedTableColumnVisibilityCustom
@@ -0,0 +1 @@
1
+ By using the `includeIds` key/value pair as shown within the `columnVisibilityControl` prop, you can control which columns show up as options in the columnVisibility dropdown.
@@ -0,0 +1,82 @@
1
+ import React from "react"
2
+ import AdvancedTable from '../../pb_advanced_table/_advanced_table'
3
+ import MOCK_DATA from "./advanced_table_mock_data.json"
4
+
5
+ const AdvancedTableColumnVisibilityMulti = (props) => {
6
+ const columnDefinitions = [
7
+ {
8
+ accessor: "year",
9
+ label: "Year",
10
+ id: "year",
11
+ cellAccessors: ["quarter", "month", "day"],
12
+ },
13
+ {
14
+ label: "Enrollment Data",
15
+ id: "enrollmentData",
16
+ columns: [
17
+ {
18
+ label: "Enrollment Stats",
19
+ id: "enrollmentStats",
20
+ columns: [
21
+ {
22
+ accessor: "newEnrollments",
23
+ label: "New Enrollments",
24
+ id: "newEnrollments",
25
+ },
26
+ {
27
+ accessor: "scheduledMeetings",
28
+ label: "Scheduled Meetings",
29
+ id: "scheduledMeetings",
30
+ },
31
+ ],
32
+ },
33
+ ],
34
+ },
35
+ {
36
+ label: "Performance Data",
37
+ id: "performanceData",
38
+ columns: [
39
+ {
40
+ label: "Completion Metrics",
41
+ id: "completionMetrics",
42
+ columns: [
43
+ {
44
+ accessor: "completedClasses",
45
+ label: "Completed Classes",
46
+ id: "completedClasses",
47
+ },
48
+ {
49
+ accessor: "classCompletionRate",
50
+ label: "Class Completion Rate",
51
+ id: "classCompletionRate",
52
+ },
53
+ ],
54
+ },
55
+ {
56
+ label: "Attendance",
57
+ id: "attendance",
58
+ columns: [
59
+ {
60
+ accessor: "attendanceRate",
61
+ label: "Attendance Rate",
62
+ id: "attendanceRate",
63
+ },
64
+ ],
65
+ },
66
+ ],
67
+ },
68
+ ];
69
+
70
+ return (
71
+ <div>
72
+ <AdvancedTable
73
+ columnDefinitions={columnDefinitions}
74
+ columnVisibilityControl={{default: true}}
75
+ tableData={MOCK_DATA}
76
+ {...props}
77
+ />
78
+ </div>
79
+ )
80
+ }
81
+
82
+ export default AdvancedTableColumnVisibilityMulti
@@ -0,0 +1 @@
1
+ The `columnVisibilityControl` prop can also be used with multi-header columns as shown.
@@ -0,0 +1,66 @@
1
+ import React, { useState } from "react"
2
+ import AdvancedTable from '../../pb_advanced_table/_advanced_table'
3
+ import MOCK_DATA from "./advanced_table_mock_data.json"
4
+
5
+ const AdvancedTableColumnVisibilityWithState = (props) => {
6
+ const columnDefinitions = [
7
+ {
8
+ accessor: "year",
9
+ label: "Year",
10
+ cellAccessors: ["quarter", "month", "day"],
11
+ id: "year"
12
+ },
13
+ {
14
+ accessor: "newEnrollments",
15
+ label: "New Enrollments",
16
+ id: "newEnrollments"
17
+ },
18
+ {
19
+ accessor: "scheduledMeetings",
20
+ label: "Scheduled Meetings",
21
+ id: "scheduledMeetings"
22
+ },
23
+ {
24
+ accessor: "attendanceRate",
25
+ label: "Attendance Rate",
26
+ id: "attendanceRate"
27
+ },
28
+ {
29
+ accessor: "completedClasses",
30
+ label: "Completed Classes",
31
+ id: "completedClasses"
32
+ },
33
+ {
34
+ accessor: "classCompletionRate",
35
+ label: "Class Completion Rate",
36
+ id: "classCompletionRate"
37
+ },
38
+ {
39
+ accessor: "graduatedStudents",
40
+ label: "Graduated Students",
41
+ id: "graduatedStudents"
42
+ },
43
+ ]
44
+
45
+ const [columnVisibility, setColumnVisibility] = useState({
46
+ newEnrollments: false
47
+ })
48
+
49
+ const columnVisibilityControl = {
50
+ value: columnVisibility,
51
+ onChange: setColumnVisibility,
52
+ onColumnVisibilityChange: (currentState) => console.log(currentState),
53
+ }
54
+ return (
55
+ <div>
56
+ <AdvancedTable
57
+ columnDefinitions={columnDefinitions}
58
+ columnVisibilityControl={columnVisibilityControl}
59
+ tableData={MOCK_DATA}
60
+ {...props}
61
+ />
62
+ </div>
63
+ )
64
+ }
65
+
66
+ export default AdvancedTableColumnVisibilityWithState
@@ -0,0 +1,3 @@
1
+ The `columnVisibilityControl` prop also allows for greater control over the columnVisibility state. Devs can manage state themselves by passing in `value` and `onChange` as shown.
2
+
3
+ The additional `onColumnVisibilityChange` provides a callback with the current state as the argument if needed.
@@ -1 +1,5 @@
1
- `selectable_rows` can also be used with tables without nested row data. Set `enable_toggle_expansion: none` to adjust the Advanced Table styling to fit a table without subrows.
1
+ `selectable_rows` can also be used with tables without nested row data. Set `enable_toggle_expansion: none` to adjust the Advanced Table styling to fit a table without subrows.
2
+
3
+ The data attribute `data-selected-rows` on the parent `pb_advanced_table` div will update dynamically with each selection to show an array of ids corresponding to the current selection.
4
+
5
+ __NOTE__: Each object within the `table_data` Array must contain a unique id in order to attach an id to all Rows for this to function.
@@ -2,7 +2,7 @@ import React from "react"
2
2
  import AdvancedTable from '../../pb_advanced_table/_advanced_table'
3
3
  import MOCK_DATA from "./advanced_table_mock_data_no_subrows.json"
4
4
 
5
- const AdvancedTableSelectableRowsNoSubrows = (props) => {
5
+ const AdvancedTableSelectableRowsNoSubrowsReact = (props) => {
6
6
  const columnDefinitions = [
7
7
  {
8
8
  accessor: "year",
@@ -49,4 +49,4 @@ const AdvancedTableSelectableRowsNoSubrows = (props) => {
49
49
  )
50
50
  }
51
51
 
52
- export default AdvancedTableSelectableRowsNoSubrows
52
+ export default AdvancedTableSelectableRowsNoSubrowsReact
@@ -2,5 +2,6 @@
2
2
 
3
3
  When a parent row is clicked, it will check all nested children rows, Children rows can be manually checked or unchecked as well.
4
4
 
5
- __ALERT TO DEVS__: UPDATE THIS PARAGRAPH IN THE FOLLOW UP STORY WHEN CHECKBOX FUNCTIONALITY IS SET PLEASE
6
- The `onRowSelectionChange` prop returns an array of ids of all Rows that have been selected. Open the console on this example and check and uncheck checkboxes to see this is action! __NOTE__: Each object within the `tableData`Array must contain a unique id in order to attach an id to all Rows for this to function.
5
+ The data attribute `data-selected-rows` on the parent `pb_advanced_table` div will update dynamically with each selection to show an array of ids corresponding to the current selection.
6
+
7
+ __NOTE__: Each object within the `table_data` Array must contain a unique id in order to attach an id to all Rows for this to function.
@@ -13,8 +13,8 @@ examples:
13
13
  - advanced_table_column_headers: Multi-Header Columns
14
14
  - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
15
15
  - advanced_table_column_border_color_rails: Column Group Border Color
16
- # - advanced_table_selectable_rows: Selectable Rows
17
- # - advanced_table_selectable_rows_no_subrows: Selectable Rows (No Subrows)
16
+ - advanced_table_selectable_rows_rails: Selectable Rows
17
+ - advanced_table_selectable_rows_no_subrows_rails: Selectable Rows (No Subrows)
18
18
 
19
19
  react:
20
20
  - advanced_table_default: Default (Required Props)
@@ -42,8 +42,12 @@ examples:
42
42
  - advanced_table_column_border_color: Column Group Border Color
43
43
  # - advanced_table_no_subrows: Table with No Subrows
44
44
  - advanced_table_selectable_rows: Selectable Rows
45
- - advanced_table_selectable_rows_no_subrows: Selectable Rows (No Subrows)
45
+ - advanced_table_selectable_rows_no_subrows_react: Selectable Rows (No Subrows)
46
46
  - advanced_table_selectable_rows_actions: Selectable Rows (With Actions)
47
47
  - advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)
48
48
  - advanced_table_inline_editing: Inline Cell Editing
49
49
  - advanced_table_fullscreen: Fullscreen
50
+ - advanced_table_column_visibility: Column Visibility Control
51
+ - advanced_table_column_visibility_with_state: Column Visibility Control With State
52
+ - advanced_table_column_visibility_custom: Column Visibility Control with Custom Dropdown
53
+ - advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns
@@ -15,7 +15,7 @@ export { default as AdvancedTablePaginationWithProps } from './_advanced_table_p
15
15
  export { default as AdvancedTableColumnHeaders } from './_advanced_table_column_headers.jsx'
16
16
  export { default as AdvancedTableColumnHeadersMultiple } from './_advanced_table_column_headers_multiple.jsx'
17
17
  export { default as AdvancedTableSelectableRows } from './_advanced_table_selectable_rows.jsx'
18
- export { default as AdvancedTableSelectableRowsNoSubrows } from './_advanced_table_selectable_rows_no_subrows.jsx'
18
+ export { default as AdvancedTableSelectableRowsNoSubrowsReact } from './_advanced_table_selectable_rows_no_subrows_react.jsx'
19
19
  export { default as AdvancedTableNoSubrows } from './_advanced_table_no_subrows.jsx'
20
20
  export { default as AdvancedTableSelectableRowsHeader } from './_advanced_table_selectable_rows_header.jsx'
21
21
  export { default as AdvancedTableSelectableRowsActions } from './_advanced_table_selectable_rows_actions.jsx'
@@ -27,4 +27,8 @@ export { default as AdvancedTableStickyColumns } from './_advanced_table_sticky_
27
27
  export { default as AdvancedTableStickyHeader } from './_advanced_table_sticky_header.jsx'
28
28
  export { default as AdvancedTableStickyColumnsAndHeader } from './_advanced_table_sticky_columns_and_header.jsx'
29
29
  export { default as AdvancedTableExpandByDepth } from './_advanced_table_expand_by_depth.jsx'
30
- export { default as AdvancedTableColumnBorderColor} from './_advanced_table_column_border_color.jsx'
30
+ export { default as AdvancedTableColumnBorderColor} from './_advanced_table_column_border_color.jsx'
31
+ export { default as AdvancedTableColumnVisibility } from './_advanced_table_column_visibility.jsx'
32
+ export { default as AdvancedTableColumnVisibilityCustom } from './_advanced_table_column_visibility_custom.jsx'
33
+ export { default as AdvancedTableColumnVisibilityMulti } from './_advanced_table_column_visibility_multi.jsx'
34
+ export { default as AdvancedTableColumnVisibilityWithState } from './_advanced_table_column_visibility_with_state.jsx'
@@ -0,0 +1,106 @@
1
+ import PbEnhancedElement from "../pb_enhanced_element";
2
+
3
+ const FLAT_ADVANCED_TABLE_SELECTOR = "[data-flat-advanced-table-select]";
4
+
5
+ export default class PbFlatAdvancedTable extends PbEnhancedElement {
6
+ static get selector() {
7
+ return FLAT_ADVANCED_TABLE_SELECTOR;
8
+ }
9
+
10
+ get target() {
11
+ const table = this.element.closest("table");
12
+ return table.querySelectorAll(
13
+ `"label[data-flat-advanced-table-select='true']"`
14
+ );
15
+ }
16
+
17
+ static selectedRows = new Set();
18
+
19
+ connect() {
20
+ const table = this.element.closest("table");
21
+ if (!table) return;
22
+ const mainTable = this.element.closest(".pb_advanced_table");
23
+ // Prevent double-init
24
+ if (table.dataset.flatAdvancedTableInitialized) return;
25
+ table.dataset.flatAdvancedTableInitialized = "true";
26
+
27
+ const checkboxLabels = table.querySelectorAll(
28
+ "label[data-flat-advanced-table-select='true']"
29
+ );
30
+ checkboxLabels.forEach((label) => {
31
+ const checkbox = label.querySelector("input[type='checkbox']");
32
+ if (!checkbox) return;
33
+ checkbox.addEventListener("change", () => {
34
+ const rowId = checkbox.id;
35
+ const isChecked = checkbox.checked;
36
+
37
+ if (isChecked) {
38
+ PbFlatAdvancedTable.selectedRows.add(rowId);
39
+ } else {
40
+ PbFlatAdvancedTable.selectedRows.delete(rowId);
41
+ }
42
+
43
+ // Update row background color based on checkbox state
44
+ const rowEl = checkbox.closest("tr");
45
+ if (rowEl) {
46
+ if (isChecked) {
47
+ rowEl.classList.add("bg-row-selection");
48
+ rowEl.classList.remove("bg-white");
49
+ } else {
50
+ rowEl.classList.remove("bg-row-selection");
51
+ rowEl.classList.add("bg-white");
52
+ }
53
+ }
54
+ const allCheckboxes = table.querySelectorAll(
55
+ "label[data-flat-advanced-table-select='true'] input[type='checkbox']"
56
+ );
57
+
58
+ const selectAllInput = table.querySelector(
59
+ "#select-all-rows input[type='checkbox']"
60
+ );
61
+
62
+ if (selectAllInput) {
63
+ const allChecked = Array.from(allCheckboxes).every(cb => cb.checked);
64
+ selectAllInput.checked = allChecked;
65
+ }
66
+
67
+ mainTable.dataset.selectedRows = JSON.stringify(
68
+ Array.from(PbFlatAdvancedTable.selectedRows)
69
+ );
70
+ });
71
+
72
+ });
73
+
74
+ // Handle select-all checkbox
75
+ const selectAllWrapper = table.querySelector("#select-all-rows");
76
+ if (selectAllWrapper) {
77
+ const selectAllInput = selectAllWrapper.querySelector(
78
+ 'input[type="checkbox"]'
79
+ );
80
+ selectAllInput.addEventListener("change", () => {
81
+ const checkAll = selectAllInput.checked;
82
+
83
+ checkboxLabels.forEach((label) => {
84
+ const cb = label.querySelector("input[type='checkbox']");
85
+ cb.checked = checkAll;
86
+ const rowId = cb.id;
87
+ const rowEl = cb.closest("tr");
88
+
89
+ if (checkAll) {
90
+ PbFlatAdvancedTable.selectedRows.add(rowId);
91
+ rowEl?.classList.add("bg-row-selection");
92
+ rowEl?.classList.remove("bg-white");
93
+ } else {
94
+ PbFlatAdvancedTable.selectedRows.delete(rowId);
95
+ rowEl?.classList.remove("bg-row-selection");
96
+ rowEl?.classList.add("bg-white");
97
+ }
98
+ });
99
+
100
+ mainTable.dataset.selectedRows = JSON.stringify(
101
+ Array.from(PbFlatAdvancedTable.selectedRows)
102
+ );
103
+ });
104
+ }
105
+ }
106
+ }