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
@@ -4,80 +4,80 @@ import MultiLevelSelect from "../_multi_level_select";
4
4
  const treeData = [
5
5
  {
6
6
  label: "HQ",
7
- value: "HQ",
7
+ value: "hQ",
8
8
  id: "hq1",
9
9
  },
10
10
  {
11
11
  label: "Philadelphia",
12
- value: "Philadelphia",
12
+ value: "philadelphia",
13
13
  id: "phl1",
14
14
  hideRadio: true,
15
15
  children: [
16
16
  {
17
17
  label: "Marketing & Sales PHL",
18
- value: "Marketing & Sales PHL",
18
+ value: "marketingAndSalesPhl",
19
19
  id: "marketingPHL1",
20
20
  },
21
21
  {
22
22
  label: "Installation Office PHL",
23
- value: "Installation Office PHL",
23
+ value: "installationOfficePhl",
24
24
  id: "installationPHL1",
25
25
  },
26
26
  {
27
27
  label: "Warehouse PHL",
28
- value: "Warehouse PHL",
28
+ value: "warehousePhl",
29
29
  id: "warehousePHL1",
30
30
  },
31
31
  ]
32
32
  },
33
33
  {
34
34
  label: "New Jersey",
35
- value: "New Jersey",
35
+ value: "newJersey",
36
36
  id: "nj2",
37
37
  hideRadio: true,
38
38
  children: [
39
39
  {
40
40
  label: "New Jersey",
41
- value: "New Jersey",
41
+ value: "newJersey",
42
42
  id: "nj3",
43
43
  hideRadio: true,
44
44
  children: [
45
45
  {
46
46
  label: "Marketing & Sales NJ",
47
- value: "Marketing & Sales NJ",
47
+ value: "marketingAndSalesNj",
48
48
  id: "marketingNJ1",
49
49
  },
50
50
  {
51
51
  label: "Installation Office NJ",
52
- value: "Installation Office NJ",
52
+ value: "installationOfficeNj",
53
53
  id: "installationNJ1",
54
54
  },
55
55
  {
56
56
  label: "Warehouse NJ",
57
- value: "Warehouse NJ",
57
+ value: "warehouseNj",
58
58
  id: "warehouseNJ1",
59
59
  },
60
60
  ],
61
61
  },
62
62
  {
63
63
  label: "Princeton",
64
- value: "Princeton",
64
+ value: "princeton",
65
65
  id: "princeton1",
66
66
  hideRadio: true,
67
67
  children: [
68
68
  {
69
69
  label: "Marketing & Sales Princeton",
70
- value: "Marketing & Sales Princeton",
70
+ value: "marketingAndSalesPrinceton",
71
71
  id: "marketingPR1",
72
72
  },
73
73
  {
74
74
  label: "Installation Office Princeton",
75
- value: "Installation Office Princeton",
75
+ value: "installationOfficePrinceton",
76
76
  id: "installationPR1",
77
77
  },
78
78
  {
79
79
  label: "Warehouse Princeton",
80
- value: "Warehouse Princeton",
80
+ value: "warehousePrinceton",
81
81
  id: "warehousePR1",
82
82
  },
83
83
  ]
@@ -86,46 +86,46 @@ const treeData = [
86
86
  },
87
87
  {
88
88
  label: "Maryland",
89
- value: "Maryland",
89
+ value: "maryland",
90
90
  id: "MD1",
91
91
  hideRadio: true,
92
92
  children: [
93
93
  {
94
94
  label: "Marketing & Sales MD",
95
- value: "Marketing & Sales MD",
95
+ value: "marketingAndSalesMd",
96
96
  id: "marketingMD1",
97
97
  },
98
98
  {
99
99
  label: "Installation Office MD",
100
- value: "Installation Office MD",
100
+ value: "installationOfficeMd",
101
101
  id: "installationMD1",
102
102
  },
103
103
  {
104
104
  label: "Warehouse MD",
105
- value: "Warehouse MD",
105
+ value: "warehouseMd",
106
106
  id: "warehouseMD1",
107
107
  },
108
108
  ]
109
109
  },
110
110
  {
111
111
  label: "Connecticut",
112
- value: "Connecticut",
112
+ value: "connecticut",
113
113
  id: "CT1",
114
114
  hideRadio: true,
115
115
  children: [
116
116
  {
117
117
  label: "Marketing & Sales CT",
118
- value: "Marketing & Sales CT",
118
+ value: "marketingAndSalesCt",
119
119
  id: "marketingCT1",
120
120
  },
121
121
  {
122
122
  label: "Installation Office CT",
123
- value: "Installation Office CT",
123
+ value: "installationOfficeCt",
124
124
  id: "installationCT1",
125
125
  },
126
126
  {
127
127
  label: "Warehouse CT",
128
- value: "Warehouse CT",
128
+ value: "warehouseCt",
129
129
  id: "warehouseCT1",
130
130
  },
131
131
  ]
@@ -5,25 +5,25 @@ import Badge from "../../pb_badge/_badge";
5
5
  const treeData = [
6
6
  {
7
7
  label: "Power Home Remodeling",
8
- value: "Power Home Remodeling",
8
+ value: "powerHomeRemodeling",
9
9
  id: "powerhome1",
10
10
  expanded: true,
11
11
  children: [
12
12
  {
13
13
  label: "People",
14
- value: "People",
14
+ value: "people",
15
15
  id: "people1",
16
16
  expanded: true,
17
17
  status: "active",
18
18
  children: [
19
19
  {
20
20
  label: "Talent Acquisition",
21
- value: "Talent Acquisition",
21
+ value: "talentAcquisition",
22
22
  id: "talent1",
23
23
  },
24
24
  {
25
25
  label: "Business Affairs",
26
- value: "Business Affairs",
26
+ value: "businessAffairs",
27
27
  id: "business1",
28
28
  status: "active",
29
29
  variant: "primary",
@@ -31,12 +31,12 @@ const treeData = [
31
31
  children: [
32
32
  {
33
33
  label: "Initiatives",
34
- value: "Initiatives",
34
+ value: "initiatives",
35
35
  id: "initiative1",
36
36
  },
37
37
  {
38
38
  label: "Learning & Development",
39
- value: "Learning & Development",
39
+ value: "learningAndDevelopment",
40
40
  id: "development1",
41
41
  status: "Inactive",
42
42
  },
@@ -44,31 +44,31 @@ const treeData = [
44
44
  },
45
45
  {
46
46
  label: "People Experience",
47
- value: "People Experience",
47
+ value: "peopleExperience",
48
48
  id: "experience1",
49
49
  },
50
50
  ],
51
51
  },
52
52
  {
53
53
  label: "Contact Center",
54
- value: "Contact Center",
54
+ value: "contactCenter",
55
55
  id: "contact1",
56
56
  status: "Inactive",
57
57
  variant: "error",
58
58
  children: [
59
59
  {
60
60
  label: "Appointment Management",
61
- value: "Appointment Management",
61
+ value: "appointmentManagement",
62
62
  id: "appointment1",
63
63
  },
64
64
  {
65
65
  label: "Customer Service",
66
- value: "Customer Service",
66
+ value: "customerService",
67
67
  id: "customer1",
68
68
  },
69
69
  {
70
70
  label: "Energy",
71
- value: "Energy",
71
+ value: "energy",
72
72
  id: "energy1",
73
73
  },
74
74
  ],
@@ -5,25 +5,25 @@ import Badge from "../../pb_badge/_badge";
5
5
  const treeData = [
6
6
  {
7
7
  label: "Power Home Remodeling",
8
- value: "Power Home Remodeling",
8
+ value: "powerHomeRemodeling",
9
9
  id: "powerhome1",
10
10
  expanded: true,
11
11
  children: [
12
12
  {
13
13
  label: "People",
14
- value: "People",
14
+ value: "people",
15
15
  id: "people1",
16
16
  expanded: true,
17
17
  status: "active",
18
18
  children: [
19
19
  {
20
20
  label: "Talent Acquisition",
21
- value: "Talent Acquisition",
21
+ value: "talentAcquisition",
22
22
  id: "talent1",
23
23
  },
24
24
  {
25
25
  label: "Business Affairs",
26
- value: "Business Affairs",
26
+ value: "businessAffairs",
27
27
  id: "business1",
28
28
  status: "active",
29
29
  variant: "primary",
@@ -31,12 +31,12 @@ const treeData = [
31
31
  children: [
32
32
  {
33
33
  label: "Initiatives",
34
- value: "Initiatives",
34
+ value: "initiatives",
35
35
  id: "initiative1",
36
36
  },
37
37
  {
38
38
  label: "Learning & Development",
39
- value: "Learning & Development",
39
+ value: "learningAndDevelopment",
40
40
  id: "development1",
41
41
  status: "Inactive",
42
42
  },
@@ -44,31 +44,31 @@ const treeData = [
44
44
  },
45
45
  {
46
46
  label: "People Experience",
47
- value: "People Experience",
47
+ value: "peopleExperience",
48
48
  id: "experience1",
49
49
  },
50
50
  ],
51
51
  },
52
52
  {
53
53
  label: "Contact Center",
54
- value: "Contact Center",
54
+ value: "contactCenter",
55
55
  id: "contact1",
56
56
  status: "Inactive",
57
57
  variant: "error",
58
58
  children: [
59
59
  {
60
60
  label: "Appointment Management",
61
- value: "Appointment Management",
61
+ value: "appointmentManagement",
62
62
  id: "appointment1",
63
63
  },
64
64
  {
65
65
  label: "Customer Service",
66
- value: "Customer Service",
66
+ value: "customerService",
67
67
  id: "customer1",
68
68
  },
69
69
  {
70
70
  label: "Energy",
71
- value: "Energy",
71
+ value: "energy",
72
72
  id: "energy1",
73
73
  },
74
74
  ],
@@ -2,62 +2,62 @@
2
2
 
3
3
  <% treeData = [{
4
4
  label: "Power Home Remodeling",
5
- value: "Power Home Remodeling",
5
+ value: "powerHomeRemodeling",
6
6
  id: "powerhome1",
7
7
  expanded: true,
8
8
  children: [
9
9
  {
10
10
  label: "People",
11
- value: "People",
11
+ value: "people",
12
12
  id: "people1",
13
13
  children: [
14
14
  {
15
15
  label: "Talent Acquisition",
16
- value: "Talent Acquisition",
16
+ value: "talentAcquisition",
17
17
  id: "talent1",
18
18
  },
19
19
  {
20
20
  label: "Business Affairs",
21
- value: "Business Affairs",
21
+ value: "businessAffairs",
22
22
  id: "business1",
23
23
  children: [
24
24
  {
25
25
  label: "Initiatives",
26
- value: "Initiatives",
26
+ value: "initiatives",
27
27
  id: "initiative1",
28
28
  },
29
29
  {
30
30
  label: "Learning & Development",
31
- value: "Learning & Development",
31
+ value: "learningAndDevelopment",
32
32
  id: "development1",
33
33
  },
34
34
  ],
35
35
  },
36
36
  {
37
37
  label: "People Experience",
38
- value: "People Experience",
38
+ value: "peopleExperience",
39
39
  id: "experience1",
40
40
  },
41
41
  ],
42
42
  },
43
43
  {
44
44
  label: "Contact Center",
45
- value: "Contact Center",
45
+ value: "contactCenter",
46
46
  id: "contact1",
47
47
  children: [
48
48
  {
49
49
  label: "Appointment Management",
50
- value: "Appointment Management",
50
+ value: "appointmentManagement",
51
51
  id: "appointment1",
52
52
  },
53
53
  {
54
54
  label: "Customer Service",
55
- value: "Customer Service",
55
+ value: "customerService",
56
56
  id: "customer1",
57
57
  },
58
58
  {
59
59
  label: "Energy",
60
- value: "Energy",
60
+ value: "energy",
61
61
  id: "energy1",
62
62
  },
63
63
  ],
@@ -78,7 +78,8 @@ $overlay_colors: (
78
78
  &.overlay-hide-scrollbar {
79
79
  & [class*="overflow_x_auto"],
80
80
  & [class*="overflow_y_auto"],
81
- & [class*="overflow_auto"] {
81
+ & [class*="overflow_auto"],
82
+ .overlay_token_container {
82
83
  &::-webkit-scrollbar {
83
84
  display: none !important;
84
85
  }
@@ -9,7 +9,7 @@ const InlineCardsExample = forwardRef(function InlineCardsExample(ref) {
9
9
  <Flex
10
10
  columnGap="lg"
11
11
  orientation="row"
12
- ref={ref}
12
+ ref={ref}
13
13
  >
14
14
  {Array.from({ length: 15 }, (_, index) => (
15
15
  <FlexItem key={index}>
@@ -30,7 +30,7 @@ const OverlayToken = (props: OverlayChildrenProps) => {
30
30
  if (container) {
31
31
  const { scrollLeft, scrollWidth, clientWidth } = container;
32
32
  const atStart = scrollLeft === 0;
33
- const atEnd = scrollLeft + clientWidth >= scrollWidth - 1;
33
+ const atEnd = scrollLeft + clientWidth >= scrollWidth - 1;
34
34
 
35
35
  setIsAtStart(atStart);
36
36
  setIsAtEnd(atEnd);
@@ -64,16 +64,17 @@ const OverlayToken = (props: OverlayChildrenProps) => {
64
64
  return (
65
65
  <>
66
66
  <div className={dynamic ? isAtStart ? '' : previousOverlayClassName : previousOverlayClassName} />
67
- {dynamic ?
67
+ {dynamic ?
68
68
  <div
69
+ className="overlay_token_container"
69
70
  ref={scrollContainerRef}
70
71
  style={{
71
- overflowX: 'auto',
72
+ overflowX: 'auto',
72
73
  }}
73
74
  >
74
75
  {children}
75
76
  </div>
76
- :
77
+ :
77
78
  children
78
79
  }
79
80
  {hasSubsequentOverlay &&
@@ -41,6 +41,16 @@ const Person = (props: PersonProps): React.ReactElement => {
41
41
  className
42
42
  )
43
43
 
44
+ const hasAllEmptyProps = [firstName, lastName].every(field => field === undefined || field === null || field === '')
45
+
46
+ if (hasAllEmptyProps) {
47
+ return (
48
+ <>
49
+
50
+ </>
51
+ )
52
+ }
53
+
44
54
  return (
45
55
  <div
46
56
  {...ariaProps}
@@ -53,13 +63,13 @@ const Person = (props: PersonProps): React.ReactElement => {
53
63
  className="pb_person_first"
54
64
  tag="span"
55
65
  >
56
- {firstName}
66
+ {firstName ?? ''}
57
67
  </Body>
58
68
  {lastName &&
59
69
  <Title
60
70
  className="pb_person_first"
61
71
  size={4}
62
- text={` ${lastName}`}
72
+ text={lastName ? ` ${lastName}` : ''}
63
73
  />
64
74
  }
65
75
  </div>
@@ -42,7 +42,7 @@ $flag-min-resolution: 192dpi;
42
42
  .iti__country-list {
43
43
  min-width: $dropdown-min-width;
44
44
  }
45
- // iti-spacer-horizontal's default is 8px, or $space_xs
45
+ // iti-spacer-horizontal's default is 8px, or $space_xs
46
46
  .iti__country-list .iti__flag, .iti__country-name {
47
47
  margin-right: $space_xs;
48
48
  }
@@ -60,7 +60,7 @@ $flag-min-resolution: 192dpi;
60
60
  color: $focus_input_light;
61
61
  }
62
62
 
63
- .dropdown_open {
63
+ .dropdown_open:not(.error) {
64
64
  .text_input {
65
65
  border-color: $primary !important;
66
66
  }
@@ -76,7 +76,7 @@ $flag-min-resolution: 192dpi;
76
76
  }
77
77
 
78
78
  .iti__divider {
79
- border-bottom: 1px solid $border_light !important;
79
+ border-bottom: 1px solid $border_light !important;
80
80
  }
81
81
 
82
82
  .iti__selected-country-primary {
@@ -96,7 +96,7 @@ $flag-min-resolution: 192dpi;
96
96
  justify-content: center;
97
97
  align-items: center;
98
98
  border-width: 0;
99
- border-radius: $space_xxs;
99
+ border-radius: $space_xxs;
100
100
 
101
101
  &[aria-expanded="true"] {
102
102
  color: $primary_action;
@@ -199,7 +199,7 @@ $flag-min-resolution: 192dpi;
199
199
  }
200
200
 
201
201
  .iti__dropdown-content {
202
- border-radius: $space_xs;
202
+ border-radius: $space_xs;
203
203
  border: 1px solid $border_light !important;
204
204
  position: absolute;
205
205
  top: 100%;
@@ -228,13 +228,13 @@ $flag-min-resolution: 192dpi;
228
228
  }
229
229
 
230
230
  .iti__dropdown-content {
231
- border-radius: $space_xs;
231
+ border-radius: $space_xs;
232
232
  border: 1px solid $border_dark !important;
233
233
  .iti__search-input {
234
234
  background-color: $bg_dark_card;
235
235
  &:hover {
236
236
  background-color: $bg_dark_card;
237
- }
237
+ }
238
238
  &:active,
239
239
  &:focus {
240
240
  background-color: $card_dark;
@@ -243,7 +243,7 @@ $flag-min-resolution: 192dpi;
243
243
  }
244
244
 
245
245
  .iti__divider {
246
- border-bottom: 1px solid $border_dark !important;
246
+ border-bottom: 1px solid $border_dark !important;
247
247
  }
248
248
 
249
249
  .iti__country-list {
@@ -278,7 +278,7 @@ $flag-min-resolution: 192dpi;
278
278
  color: $white;
279
279
  }
280
280
  }
281
-
281
+
282
282
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: $flag-min-resolution) {
283
283
  .iti__flag {
284
284
  background-image: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags@2x.png");
@@ -2,7 +2,7 @@ import React from 'react'
2
2
  import classnames from 'classnames'
3
3
 
4
4
  import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
5
- import { globalProps, globalInlineProps } from '../utilities/globalProps'
5
+ import { globalProps, globalInlineProps, GlobalProps } from '../utilities/globalProps'
6
6
 
7
7
  import Caption from '../pb_caption/_caption'
8
8
 
@@ -19,7 +19,7 @@ type SectionSeparatorProps = {
19
19
  orientation?: "horizontal" | "vertical",
20
20
  text?: string,
21
21
  variant?: "card" | "background",
22
- }
22
+ } & GlobalProps
23
23
 
24
24
  const SectionSeparator = (props: SectionSeparatorProps): React.ReactElement => {
25
25
  const {
@@ -143,6 +143,16 @@
143
143
  select {
144
144
  font-size: 12px;
145
145
  }
146
+ .pb_select_kit_wrapper.error {
147
+ .pb_select_kit_caret {
148
+ top: 13.7px;
149
+ }
150
+ }
151
+ }
152
+ .pb_select_kit_wrapper.error {
153
+ .pb_select_kit_caret {
154
+ top: 16.2px;
155
+ }
146
156
  }
147
157
  }
148
158
  }
@@ -1,5 +1,5 @@
1
1
  <%= pb_rails("select", props: {
2
- error: "Please make a valid selection",
2
+ error: raw(pb_rails("icon", props: { icon: "warning" }) + " Please make a valid selection"),
3
3
  label: "Favorite Food",
4
4
  name: "food",
5
5
  options: [
@@ -8,7 +8,7 @@ const TableWithCollapsibleWithCustomClick = (props) => {
8
8
 
9
9
  const Content = () => {
10
10
  return (
11
- <Card
11
+ <Card
12
12
  borderNone
13
13
  borderRadius="none"
14
14
  padding="md"
@@ -37,7 +37,7 @@ return (
37
37
 
38
38
  </Table.Head>
39
39
  <Table.Body>
40
- <Table.Row collapsible
40
+ <Table.Row collapsible
41
41
  collapsibleContent={<Content/>}
42
42
  toggleCellId="cell-1"
43
43
  {...props}
@@ -47,7 +47,7 @@ return (
47
47
  <Table.Cell>{'Value 3'}</Table.Cell>
48
48
  <Table.Cell>{'Value 4'}</Table.Cell>
49
49
  <Table.Cell>{'Value 5'}</Table.Cell>
50
- <Table.Cell cursor="pointer"
50
+ <Table.Cell cursor="pointer"
51
51
  id="cell-1"
52
52
  textAlign="right"
53
53
  >
@@ -59,7 +59,7 @@ return (
59
59
  </Table.Cell>
60
60
 
61
61
  </Table.Row>
62
- <Table.Row collapsible
62
+ <Table.Row collapsible
63
63
  collapsibleContent={<Content/>}
64
64
  toggleCellId="cell-2"
65
65
  {...props}
@@ -69,7 +69,7 @@ return (
69
69
  <Table.Cell>{'Value 3'}</Table.Cell>
70
70
  <Table.Cell>{'Value 4'}</Table.Cell>
71
71
  <Table.Cell>{'Value 5'}</Table.Cell>
72
- <Table.Cell cursor="pointer"
72
+ <Table.Cell cursor="pointer"
73
73
  id="cell-2"
74
74
  textAlign="right"
75
75
  >
@@ -81,7 +81,7 @@ return (
81
81
  </Table.Cell>
82
82
 
83
83
  </Table.Row>
84
- <Table.Row collapsible
84
+ <Table.Row collapsible
85
85
  collapsibleContent={<Content/>}
86
86
  toggleCellId="cell-3"
87
87
  {...props}
@@ -91,7 +91,7 @@ return (
91
91
  <Table.Cell>{'Value 3'}</Table.Cell>
92
92
  <Table.Cell>{'Value 4'}</Table.Cell>
93
93
  <Table.Cell>{'Value 5'}</Table.Cell>
94
- <Table.Cell cursor="pointer"
94
+ <Table.Cell cursor="pointer"
95
95
  id="cell-3"
96
96
  textAlign="right"
97
97
  >