playbook_ui 14.17.0.pre.rc.1 → 14.18.0.pre.alpha.PLAY2048phonenumberinputcountrysearch7456

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 (243) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx +23 -3
  3. data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +67 -3
  4. data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableActions.ts +1 -2
  5. data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx +29 -19
  6. data/app/pb_kits/playbook/pb_advanced_table/Utilities/types.ts +1 -1
  7. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +133 -124
  8. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +92 -2
  9. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +20 -7
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.jsx +66 -0
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.md +10 -0
  12. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.jsx +90 -0
  13. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.md +3 -0
  14. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.jsx +58 -0
  15. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.md +6 -0
  16. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.jsx +64 -0
  17. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.md +8 -0
  18. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.jsx +55 -0
  19. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.md +3 -0
  20. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.html.erb +33 -0
  21. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.md +3 -0
  22. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb +1 -1
  23. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +1 -2
  24. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_rails.md +2 -2
  25. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_react.md +1 -1
  26. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md +6 -2
  27. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md +6 -2
  28. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +9 -3
  29. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +6 -1
  30. data/app/pb_kits/playbook/pb_advanced_table/index.js +7 -0
  31. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss +97 -0
  32. data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +1 -1
  33. data/app/pb_kits/playbook/pb_background/_background.scss +26 -0
  34. data/app/pb_kits/playbook/pb_background/_background.tsx +5 -3
  35. data/app/pb_kits/playbook/pb_background/background.test.js +5 -0
  36. data/app/pb_kits/playbook/pb_background/docs/_background_overlay.jsx +35 -0
  37. data/app/pb_kits/playbook/pb_background/docs/_background_overlay.md +1 -0
  38. data/app/pb_kits/playbook/pb_background/docs/example.yml +1 -0
  39. data/app/pb_kits/playbook/pb_background/docs/index.js +1 -0
  40. data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx +1 -1
  41. data/app/pb_kits/playbook/pb_circle_chart/circleChart.test.js +2 -2
  42. data/app/pb_kits/playbook/pb_circle_chart/circleChartTheme.ts +53 -0
  43. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.html.erb +2 -2
  44. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx +1 -1
  45. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb +1 -1
  46. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx +1 -1
  47. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.html.erb +1 -1
  48. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx +1 -1
  49. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.html.erb +1 -1
  50. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx +1 -1
  51. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.html.erb +1 -1
  52. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +1 -1
  53. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx +2 -2
  54. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx +38 -0
  55. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md +1 -0
  56. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb +1 -1
  57. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx +1 -1
  58. data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +2 -3
  59. data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +2 -1
  60. data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss +39 -1
  61. data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx +4 -0
  62. data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb +9 -1
  63. data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.test.js +14 -0
  64. data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.html.erb +28 -0
  65. data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.jsx +42 -0
  66. data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.md +1 -0
  67. data/app/pb_kits/playbook/pb_circle_icon_button/docs/example.yml +2 -0
  68. data/app/pb_kits/playbook/pb_circle_icon_button/docs/index.js +1 -0
  69. data/app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap +14 -7
  70. data/app/pb_kits/playbook/pb_contact/contact.test.js +7 -7
  71. data/app/pb_kits/playbook/pb_copy_button/_copy_button.tsx +19 -45
  72. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.jsx +54 -0
  73. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.md +3 -0
  74. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook_rails.html.erb +14 -0
  75. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook_rails.md +3 -0
  76. data/app/pb_kits/playbook/pb_copy_button/docs/example.yml +2 -0
  77. data/app/pb_kits/playbook/pb_copy_button/docs/index.js +2 -1
  78. data/app/pb_kits/playbook/pb_copy_button/index.js +46 -20
  79. data/app/pb_kits/playbook/pb_copy_button/usePBCopy.ts +45 -0
  80. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +12 -0
  81. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +12 -0
  82. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +50 -1
  83. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx +4 -1
  84. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.md +4 -0
  85. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md +1 -1
  86. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.md +5 -1
  87. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.jsx +34 -0
  88. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.md +14 -0
  89. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.html.erb +20 -0
  90. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.md +14 -0
  91. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +2 -0
  92. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -0
  93. data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +10 -0
  94. data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.test.js +2 -2
  95. data/app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.test.js +1 -1
  96. data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +10 -1
  97. data/app/pb_kits/playbook/pb_dialog/dialog.rb +2 -0
  98. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_turbo_frames.html.erb +117 -0
  99. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_turbo_frames_rails.md +9 -0
  100. data/app/pb_kits/playbook/pb_dialog/docs/example.yml +1 -0
  101. data/app/pb_kits/playbook/pb_dialog/index.js +106 -14
  102. data/app/pb_kits/playbook/pb_draggable/_draggable.scss +43 -20
  103. data/app/pb_kits/playbook/pb_draggable/context/index.tsx +58 -17
  104. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.html.erb +43 -0
  105. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.jsx +102 -105
  106. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.html.erb +55 -0
  107. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.jsx +50 -48
  108. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_rails.md +1 -0
  109. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_react.md +1 -0
  110. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.jsx +110 -0
  111. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.md +5 -0
  112. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_react.md +5 -0
  113. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.html.erb +42 -0
  114. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.md +1 -0
  115. data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_table_react.jsx → _draggable_with_table.jsx} +1 -1
  116. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md +3 -1
  117. data/app/pb_kits/playbook/pb_draggable/docs/example.yml +12 -7
  118. data/app/pb_kits/playbook/pb_draggable/docs/index.js +4 -1
  119. data/app/pb_kits/playbook/pb_draggable/draggable.rb +9 -1
  120. data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx +71 -3
  121. data/app/pb_kits/playbook/pb_draggable/index.js +139 -142
  122. data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx +4 -3
  123. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +1 -1
  124. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx +4 -1
  125. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +6 -6
  126. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx +6 -6
  127. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +6 -6
  128. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb +8 -8
  129. data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx +3 -3
  130. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +1 -1
  131. data/app/pb_kits/playbook/pb_form_group/_form_group.scss +45 -3
  132. data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb +15 -5
  133. data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx +39 -6
  134. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.jsx +30 -0
  135. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.md +1 -0
  136. data/app/pb_kits/playbook/pb_gauge/docs/example.yml +1 -0
  137. data/app/pb_kits/playbook/pb_gauge/docs/index.js +1 -0
  138. data/app/pb_kits/playbook/pb_gauge/gaugeTheme.ts +85 -0
  139. data/app/pb_kits/playbook/pb_icon/icon.test.js +9 -9
  140. data/app/pb_kits/playbook/pb_icon_circle/icon_circle.test.js +1 -1
  141. data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js +1 -1
  142. data/app/pb_kits/playbook/pb_icon_value/icon_value.test.js +1 -1
  143. data/app/pb_kits/playbook/pb_label_value/label_value.test.js +1 -1
  144. data/app/pb_kits/playbook/pb_layout/_layout.scss +127 -0
  145. data/app/pb_kits/playbook/pb_layout/_layout.tsx +47 -7
  146. data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx +394 -0
  147. data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md +5 -0
  148. data/app/pb_kits/playbook/pb_layout/docs/example.yml +1 -0
  149. data/app/pb_kits/playbook/pb_layout/docs/index.js +1 -0
  150. data/app/pb_kits/playbook/pb_layout/layout.test.js +4 -0
  151. data/app/pb_kits/playbook/pb_layout/subcomponents/_game.tsx +121 -0
  152. data/app/pb_kits/playbook/pb_layout/subcomponents/_participant.tsx +79 -0
  153. data/app/pb_kits/playbook/pb_layout/subcomponents/_round.tsx +74 -0
  154. data/app/pb_kits/playbook/pb_link/link.test.jsx +2 -2
  155. data/app/pb_kits/playbook/pb_nav/_nav_item.test.js +5 -3
  156. data/app/pb_kits/playbook/pb_overlay/_overlay.scss +83 -22
  157. data/app/pb_kits/playbook/pb_overlay/_overlay.tsx +39 -7
  158. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.jsx +63 -0
  159. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.md +3 -0
  160. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md +1 -7
  161. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_background.jsx +49 -0
  162. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_background.md +1 -0
  163. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_opacity.jsx +81 -0
  164. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_opacity.md +1 -0
  165. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.jsx +39 -0
  166. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.md +1 -0
  167. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.jsx +40 -0
  168. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.md +5 -0
  169. data/app/pb_kits/playbook/pb_overlay/docs/example.yml +5 -0
  170. data/app/pb_kits/playbook/pb_overlay/docs/index.js +5 -0
  171. data/app/pb_kits/playbook/pb_overlay/overlay.test.jsx +39 -1
  172. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +13 -0
  173. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +3 -1
  174. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.html.erb +10 -0
  175. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.jsx +20 -0
  176. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.md +1 -0
  177. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx +8 -1
  178. data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +2 -0
  179. data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +1 -0
  180. data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb +3 -0
  181. data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.test.js +19 -0
  182. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_vertical.md +1 -0
  183. data/app/pb_kits/playbook/pb_select/docs/_select_error.jsx +7 -2
  184. data/app/pb_kits/playbook/pb_stat_change/stat_change.test.js +8 -4
  185. data/app/pb_kits/playbook/pb_table/_table.tsx +2 -2
  186. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.md +3 -1
  187. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.md +3 -1
  188. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md +3 -1
  189. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md +3 -1
  190. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.html.erb +34 -0
  191. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_rails.md +1 -0
  192. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating.html.erb +36 -0
  193. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_rails.md +1 -0
  194. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_react.md +1 -1
  195. data/app/pb_kits/playbook/pb_table/docs/example.yml +2 -0
  196. data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss +1 -1
  197. data/app/pb_kits/playbook/pb_table/styles/_headers.scss +19 -7
  198. data/app/pb_kits/playbook/pb_table/styles/_striped.scss +3 -3
  199. data/app/pb_kits/playbook/pb_table/table.rb +13 -1
  200. data/app/pb_kits/playbook/pb_table/table_header.rb +13 -1
  201. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +13 -5
  202. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.jsx +9 -1
  203. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.jsx +94 -0
  204. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.md +1 -0
  205. data/app/pb_kits/playbook/pb_text_input/docs/example.yml +2 -0
  206. data/app/pb_kits/playbook/pb_text_input/docs/index.js +1 -0
  207. data/app/pb_kits/playbook/pb_text_input/inputMask.ts +8 -1
  208. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx +7 -1
  209. data/app/pb_kits/playbook/pb_tooltip/tooltip.html.erb +2 -5
  210. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.jsx +6 -2
  211. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +4 -4
  212. data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb +2 -5
  213. data/app/pb_kits/playbook/pb_user/user.html.erb +1 -6
  214. data/app/pb_kits/playbook/pb_user_badge/user_badge.html.erb +1 -6
  215. data/dist/chunks/_typeahead-D4Ack5Pn.js +22 -0
  216. data/dist/chunks/_weekday_stacked-DWOZhThL.js +45 -0
  217. data/dist/chunks/lib-96_ZmvAo.js +29 -0
  218. data/dist/chunks/{pb_form_validation-BvNy9Bd6.js → pb_form_validation-Vv2TqXVC.js} +1 -1
  219. data/dist/chunks/vendor.js +1 -1
  220. data/dist/menu.yml +2 -2
  221. data/dist/playbook-doc.js +19 -1
  222. data/dist/playbook-rails-react-bindings.js +1 -1
  223. data/dist/playbook-rails.js +1 -1
  224. data/dist/playbook.css +1 -1
  225. data/lib/playbook/kit_base.rb +4 -4
  226. data/lib/playbook/version.rb +2 -2
  227. metadata +87 -20
  228. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.md +0 -5
  229. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.md +0 -1
  230. data/dist/chunks/_typeahead-Djo6qCne.js +0 -22
  231. data/dist/chunks/_weekday_stacked-DIIHW0OV.js +0 -45
  232. data/dist/chunks/lib-BGzBzFZX.js +0 -29
  233. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_default_rails.html.erb → _draggable_default.html.erb} +0 -0
  234. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_default.md → _draggable_default_react.md} +0 -0
  235. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_multiple_containers_rails.html.erb → _draggable_multiple_containers.html.erb} +0 -0
  236. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_multiple_containers.md → _draggable_multiple_containers_react.md} +0 -0
  237. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_cards_rails.html.erb → _draggable_with_cards.html.erb} +0 -0
  238. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_cards.md → _draggable_with_cards_react.md} +0 -0
  239. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_list_rails.html.erb → _draggable_with_list.html.erb} +0 -0
  240. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_list.md → _draggable_with_list_react.md} +0 -0
  241. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_selectable_list_rails.html.erb → _draggable_with_selectable_list.html.erb} +0 -0
  242. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_selectable_list.md → _draggable_with_selectable_list_react.md} +0 -0
  243. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_table.md → _draggable_with_table_rails.md} +0 -0
@@ -1,24 +1,26 @@
1
1
  import PbEnhancedElement from "../pb_enhanced_element";
2
2
 
3
- const DRAGGABLE_SELECTOR = "[data-pb-draggable]";
3
+ const DRAGGABLE_SELECTOR = "[data-pb-draggable]";
4
4
  const DRAGGABLE_CONTAINER = ".pb_draggable_container";
5
+ const NEEDS_CLONE = ["shadow", "outline"]; // clone only for these types
5
6
 
6
7
  export default class PbDraggable extends PbEnhancedElement {
7
- static get selector() {
8
- return DRAGGABLE_SELECTOR;
9
- }
8
+ static get selector() { return DRAGGABLE_SELECTOR; }
10
9
 
11
10
  connect() {
12
11
  this.state = {
13
- items: [],
14
- dragData: { id: "", initialGroup: "" },
15
- isDragging: "",
16
- activeContainer: ""
12
+ items: [],
13
+ dragData: { id: "", initialGroup: "" },
14
+ isDragging: "",
15
+ activeContainer: "",
17
16
  };
18
17
 
19
- this.draggedItem = null;
18
+ this.draggedItem = null;
20
19
  this.draggedItemId = null;
20
+ this.dragGhost = null;
21
21
  this.hasMultipleContainers = false;
22
+ this.dragZoneType = "";
23
+ this.dragZoneColor = "";
22
24
 
23
25
  document.addEventListener("DOMContentLoaded", () => this.bindEventListeners());
24
26
  }
@@ -26,13 +28,12 @@ export default class PbDraggable extends PbEnhancedElement {
26
28
  setState(newState) {
27
29
  this.state = { ...this.state, ...newState };
28
30
  if (newState.items) {
29
- const customEvent = new CustomEvent('pb-draggable-reorder', {
31
+ this.element.dispatchEvent(new CustomEvent("pb-draggable-reorder", {
30
32
  detail: {
31
33
  reorderedItems: this.state.items,
32
- containerId: this.element.querySelector(DRAGGABLE_CONTAINER).id
33
- }
34
- });
35
- this.element.dispatchEvent(customEvent);
34
+ containerId: this.element.querySelector(DRAGGABLE_CONTAINER).id,
35
+ },
36
+ }));
36
37
  }
37
38
  }
38
39
 
@@ -43,71 +44,100 @@ export default class PbDraggable extends PbEnhancedElement {
43
44
 
44
45
  // Needed to prevent images within draggable items from being independently draggable
45
46
  // Needed if using Image kit in draggable items
46
- this.element.querySelectorAll(".pb_draggable_item img").forEach(img => {
47
- img.setAttribute("draggable", "false");
48
- });
49
-
50
- this.element.querySelectorAll(".pb_draggable_item").forEach(item => {
51
- item.addEventListener("dragstart", this.handleDragStart.bind(this));
52
- item.addEventListener("dragend", this.handleDragEnd.bind(this));
53
- item.addEventListener("dragenter", this.handleDragEnter.bind(this));
54
- });
47
+ this.element.querySelectorAll(".pb_draggable_item img")
48
+ .forEach(img => img.setAttribute("draggable", "false"));
49
+
50
+ this.element.querySelectorAll(".pb_draggable_item")
51
+ .forEach(item => {
52
+ item.addEventListener("dragstart", this.handleDragStart.bind(this));
53
+ item.addEventListener("dragend", this.handleDragEnd.bind(this));
54
+ item.addEventListener("dragenter", this.handleDragEnter.bind(this));
55
+ });
55
56
 
56
- containers.forEach(container => {
57
- container.addEventListener("dragover", this.handleDragOver.bind(this));
58
- container.addEventListener("drop", this.handleDrop.bind(this));
57
+ containers.forEach(c => {
58
+ c.addEventListener("dragover", this.handleDragOver.bind(this));
59
+ c.addEventListener("drop", this.handleDrop.bind(this));
59
60
  });
60
61
  }
61
62
 
63
+ /* ---------------- DRAG START ---------------- */
62
64
  handleDragStart(event) {
63
65
  // Needed to prevent images within draggable items from being independently draggable
64
66
  // Needed if using Image kit in draggable items
65
- if (event.target.tagName.toLowerCase() === 'img') {
67
+ if (event.target.tagName.toLowerCase() === "img") {
66
68
  event.preventDefault();
67
69
  return;
68
70
  }
69
71
 
70
- const container = event.target.closest(DRAGGABLE_CONTAINER);
71
- this.draggedItem = event.target;
72
+ const container = event.target.closest(DRAGGABLE_CONTAINER);
73
+ this.draggedItem = event.target;
72
74
  this.draggedItemId = event.target.id;
75
+ this.dragZoneType = this.element.dataset.dropZoneType || "";
76
+ this.dragZoneColor = this.element.dataset.dropZoneColor || "";
73
77
 
74
78
  this.setState({
75
- dragData: { id: this.draggedItemId, initialGroup: container.id },
76
- isDragging: this.draggedItemId
79
+ dragData: { id: this.draggedItemId, initialGroup: container.id },
80
+ isDragging: this.draggedItemId,
77
81
  });
78
82
 
79
- event.target.classList.add("is_dragging");
83
+ this.draggedItem.classList.add(
84
+ "is_dragging",
85
+ `drop_zone_${this.dragZoneType}`,
86
+ `drop_zone_color_${this.dragZoneColor}`,
87
+ );
88
+
80
89
  if (event.dataTransfer) {
81
- event.dataTransfer.effectAllowed = 'move';
82
- event.dataTransfer.setData('text/plain', this.draggedItemId);
90
+ event.dataTransfer.effectAllowed = "move";
91
+ event.dataTransfer.setData("text/plain", this.draggedItemId);
92
+
93
+ /* ---------- custom ghost clone (shadow + outline only) ---------- */
94
+ if (NEEDS_CLONE.includes(this.dragZoneType)) {
95
+ const ghost = this.draggedItem.cloneNode(true);
96
+ ghost.classList.remove(
97
+ "is_dragging",
98
+ `drop_zone_${this.dragZoneType}`,
99
+ `drop_zone_color_${this.dragZoneColor}`,
100
+ );
101
+ const { width, height } = this.draggedItem.getBoundingClientRect();
102
+ Object.assign(ghost.style, {
103
+ border: "none",
104
+ width: `${width}px`,
105
+ height: `${height}px`,
106
+ position: "absolute",
107
+ top: "-9999px",
108
+ left: "-9999px",
109
+ boxSizing: "border-box",
110
+ zIndex: "9999",
111
+ });
112
+ document.body.appendChild(ghost);
113
+ this.dragGhost = ghost;
114
+ event.dataTransfer.setDragImage(ghost, width / 2, height / 2);
115
+ }
116
+ /* ---------------------------------------------------------------- */
83
117
  }
84
118
 
85
- setTimeout(() => {
86
- event.target.style.opacity = '0.5';
87
- }, 0);
119
+ requestAnimationFrame(() => (event.target.style.opacity = "0.5"));
88
120
  }
89
121
 
122
+ /* ---------------- DRAG ENTER ---------------- */
90
123
  handleDragEnter(event) {
91
124
  if (!this.draggedItem || event.target === this.draggedItem) return;
92
-
93
- if (this.hasMultipleContainers) {
94
- this.handleMultiContainerDragEnter(event);
95
- } else {
96
- this.handleSingleContainerDragEnter(event);
97
- }
125
+ this.hasMultipleContainers
126
+ ? this.handleMultiContainerDragEnter(event)
127
+ : this.handleSingleContainerDragEnter(event);
98
128
  }
99
129
 
100
130
  handleSingleContainerDragEnter(event) {
101
- const targetItem = event.target.closest('.pb_draggable_item');
131
+ const targetItem = event.target.closest(".pb_draggable_item");
132
+ // If we're entering a container directly or there's no target item
102
133
  if (!targetItem) return;
103
134
 
104
135
  const container = targetItem.parentNode;
105
- const items = Array.from(container.children);
136
+ const items = Array.from(container.children);
137
+ const fromIdx = items.indexOf(this.draggedItem);
138
+ const toIdx = items.indexOf(targetItem);
106
139
 
107
- const draggedIndex = items.indexOf(this.draggedItem);
108
- const targetIndex = items.indexOf(targetItem);
109
-
110
- if (draggedIndex > targetIndex) {
140
+ if (fromIdx > toIdx) {
111
141
  container.insertBefore(this.draggedItem, targetItem);
112
142
  } else {
113
143
  container.insertBefore(this.draggedItem, targetItem.nextSibling);
@@ -116,146 +146,113 @@ export default class PbDraggable extends PbEnhancedElement {
116
146
 
117
147
  handleMultiContainerDragEnter(event) {
118
148
  const targetContainer = event.target.closest(DRAGGABLE_CONTAINER);
119
- const targetItem = event.target.closest('.pb_draggable_item');
120
-
149
+ const targetItem = event.target.closest(".pb_draggable_item");
121
150
  if (!targetContainer) return;
122
151
 
123
- // If we're entering a container directly or there's no target item
124
152
  if (!targetItem) {
125
- const lastItem = targetContainer.querySelector('.pb_draggable_item:last-child');
126
- if (lastItem) {
127
- targetContainer.insertBefore(this.draggedItem, lastItem.nextSibling);
128
- } else {
129
- targetContainer.appendChild(this.draggedItem);
130
- }
153
+ const last = targetContainer.querySelector(".pb_draggable_item:last-child");
154
+ last
155
+ ? targetContainer.insertBefore(this.draggedItem, last.nextSibling)
156
+ : targetContainer.appendChild(this.draggedItem);
131
157
  return;
132
158
  }
133
159
 
134
- const container = targetItem.parentNode;
135
- const items = Array.from(container.children);
136
-
137
- const newItems = [...items].map(item => ({
138
- id: item.id,
139
- container: container.id
140
- }));
141
-
142
- this.setState({ items: newItems });
160
+ const items = Array.from(targetContainer.children);
161
+ this.setState({ items: items.map(i => ({ id: i.id, container: targetContainer.id })) });
143
162
 
144
- const rect = targetItem.getBoundingClientRect();
145
- const middleY = rect.top + rect.height / 2;
163
+ const midY = targetItem.getBoundingClientRect().top +
164
+ targetItem.getBoundingClientRect().height / 2;
146
165
 
147
- if (event.clientY < middleY) {
148
- container.insertBefore(this.draggedItem, targetItem);
166
+ if (event.clientY < midY) {
167
+ targetContainer.insertBefore(this.draggedItem, targetItem);
149
168
  } else {
150
- container.insertBefore(this.draggedItem, targetItem.nextSibling);
169
+ targetContainer.insertBefore(this.draggedItem, targetItem.nextSibling);
151
170
  }
152
171
  }
153
172
 
173
+ /* ---------------- DRAG OVER ---------------- */
154
174
  handleDragOver(event) {
155
175
  event.preventDefault();
156
176
  event.stopPropagation();
157
-
158
- if (this.hasMultipleContainers) {
159
- this.handleMultiContainerDragOver(event);
160
- } else {
161
- this.handleSingleContainerDragOver(event);
162
- }
177
+ this.hasMultipleContainers
178
+ ? this.handleMultiContainerDragOver(event)
179
+ : this.handleSingleContainerDragOver(event);
163
180
  }
164
181
 
165
182
  handleSingleContainerDragOver(event) {
166
183
  const container = event.target.closest(DRAGGABLE_CONTAINER);
167
- if (container) {
168
- container.classList.add("active_container");
169
- }
184
+ if (container) container.classList.add("active_container");
170
185
  }
171
186
 
172
187
  handleMultiContainerDragOver(event) {
173
- let container;
174
- if (event.target.matches(DRAGGABLE_CONTAINER)) {
175
- container = event.target;
176
- } else {
177
- container = event.target.closest(DRAGGABLE_CONTAINER);
178
- }
179
-
180
- if (container) {
181
- this.setState({ activeContainer: container.id });
182
- container.classList.add("active_container");
183
-
184
- // If dragging over empty container or below last item
185
- const lastItem = container.querySelector('.pb_draggable_item:last-child');
186
- if (!lastItem || (lastItem && event.clientY > lastItem.getBoundingClientRect().bottom)) {
187
- if (this.draggedItem && this.draggedItem.parentNode !== container) {
188
- container.appendChild(this.draggedItem);
189
- }
188
+ const container = event.target.matches(DRAGGABLE_CONTAINER)
189
+ ? event.target
190
+ : event.target.closest(DRAGGABLE_CONTAINER);
191
+ if (!container) return;
192
+
193
+ this.setState({ activeContainer: container.id });
194
+ container.classList.add("active_container");
195
+
196
+ const last = container.querySelector(".pb_draggable_item:last-child");
197
+ if (!last || event.clientY > last.getBoundingClientRect().bottom) {
198
+ if (this.draggedItem && this.draggedItem.parentNode !== container) {
199
+ container.appendChild(this.draggedItem);
190
200
  }
191
201
  }
192
202
  }
193
203
 
204
+ /* ---------------- DROP ---------------- */
194
205
  handleDrop(event) {
195
206
  event.preventDefault();
196
207
  event.stopPropagation();
197
208
 
198
- let container;
199
- if (event.target.matches(DRAGGABLE_CONTAINER)) {
200
- container = event.target;
201
- } else {
202
- container = event.target.closest(DRAGGABLE_CONTAINER);
203
- }
204
-
209
+ const container = event.target.matches(DRAGGABLE_CONTAINER)
210
+ ? event.target
211
+ : event.target.closest(DRAGGABLE_CONTAINER);
205
212
  if (!container || !this.draggedItem) return;
206
213
 
207
214
  container.classList.remove("active_container");
208
- this.draggedItem.style.opacity = '1';
215
+ this.draggedItem.style.opacity = "1";
209
216
 
210
217
  // Handle empty containers
211
- if (this.hasMultipleContainers && !container.querySelector('.pb_draggable_item')) {
218
+ if (this.hasMultipleContainers && !container.querySelector(".pb_draggable_item")) {
212
219
  container.appendChild(this.draggedItem);
213
220
  }
214
221
 
215
222
  // Updated order of items as an array of item IDs
216
- const reorderedItems = Array.from(
217
- this.element.querySelectorAll('.pb_draggable_item')
218
- ).map(item => ({
219
- id: item.id,
220
- container: item.closest(DRAGGABLE_CONTAINER).id
221
- }));
222
-
223
- // Store reordered items in a data attribute on the container
224
- container.setAttribute("data-reordered-items", JSON.stringify(reorderedItems));
225
-
226
- const customEvent = new CustomEvent('pb-draggable-reorder', {
227
- detail: {
228
- reorderedItems,
229
- containerId: container.id,
230
- }
231
- });
232
-
233
- this.element.dispatchEvent(customEvent);
223
+ const reorderedItems = Array.from(this.element.querySelectorAll(".pb_draggable_item"))
224
+ .map(i => ({ id: i.id, container: i.closest(DRAGGABLE_CONTAINER).id }));
234
225
 
235
- this.setState({
236
- items: reorderedItems,
237
- isDragging: "",
238
- activeContainer: ""
239
- });
226
+ container.dataset.reorderedItems = JSON.stringify(reorderedItems);
227
+ this.element.dispatchEvent(new CustomEvent("pb-draggable-reorder", {
228
+ detail: { reorderedItems, containerId: container.id },
229
+ }));
240
230
 
241
- this.draggedItem = null;
231
+ this.setState({ items: reorderedItems, isDragging: "", activeContainer: "" });
232
+ this.draggedItem = null;
242
233
  this.draggedItemId = null;
243
234
  }
244
235
 
236
+ /* ---------------- DRAG END ---------------- */
245
237
  handleDragEnd(event) {
246
- event.target.classList.remove("is_dragging");
247
- event.target.style.opacity = '1';
238
+ event.target.classList.remove(
239
+ "is_dragging",
240
+ `drop_zone_${this.dragZoneType}`,
241
+ `drop_zone_color_${this.dragZoneColor}`,
242
+ );
243
+ event.target.style.opacity = "1";
244
+
245
+ if (this.dragGhost) {
246
+ document.body.removeChild(this.dragGhost);
247
+ this.dragGhost = null;
248
+ }
248
249
 
249
- this.setState({
250
- isDragging: "",
251
- activeContainer: ""
252
- });
250
+ this.setState({ isDragging: "", activeContainer: "" });
253
251
 
254
- this.draggedItem = null;
255
- this.draggedItemId = null;
252
+ this.element.querySelectorAll(DRAGGABLE_CONTAINER)
253
+ .forEach(c => c.classList.remove("active_container"));
256
254
 
257
- this.element.querySelectorAll(DRAGGABLE_CONTAINER).forEach(container => {
258
- container.classList.remove("active_container");
259
- });
255
+ this.draggedItem = null;
256
+ this.draggedItemId = null;
260
257
  }
261
258
  }
@@ -31,7 +31,7 @@ const DraggableContainer = (props: DraggableContainerProps) => {
31
31
  } = contextValues;
32
32
 
33
33
  // Only get direction if dropZone is 'line'
34
- const direction = dropZone === 'line' ? (contextValues.direction || 'vertical') : 'vertical';
34
+ const direction = dropZone === 'line' ? (contextValues.direction || 'vertical') : null;
35
35
 
36
36
  const ariaProps = buildAriaProps(aria);
37
37
  const dataProps = buildDataProps(data);
@@ -41,8 +41,9 @@ const DraggableContainer = (props: DraggableContainerProps) => {
41
41
  const classes = classnames(
42
42
  buildCss("pb_draggable_container"),
43
43
  `${activeContainer === container ? "active" : ""}`,
44
- // Only add vertical class if dropZone is 'line' and direction is 'vertical'
45
- (dropZone === 'line' && direction === 'vertical') ? 'vertical' : '',
44
+ // Line variant gets line_{direction} classname on container no matter what
45
+ dropZone === 'line' && direction === 'vertical' ? 'line_vertical' : '',
46
+ dropZone === 'line' && direction === 'horizontal' ? 'line_horizontal' : '',
46
47
  globalProps(props),
47
48
  className
48
49
  );
@@ -35,7 +35,7 @@ type DropdownProps = {
35
35
  label?: string;
36
36
  onSelect?: (arg: GenericObject) => null;
37
37
  options: GenericObject;
38
- separators: boolean;
38
+ separators?: boolean;
39
39
  triggerRef?: any;
40
40
  variant?: "default" | "subtle";
41
41
  };
@@ -1,9 +1,12 @@
1
1
  import React, { useState } from 'react'
2
2
  import Dropdown from '../../pb_dropdown/_dropdown'
3
+ import Icon from '../../pb_icon/_icon'
3
4
 
4
5
  const DropdownError = (props) => {
5
6
  const [selectedOption, setSelectedOption] = useState()
6
- const error = selectedOption?.value ? null : "Please make a valid selection"
7
+ const error = selectedOption?.value ? null : (<>
8
+ <Icon icon="warning" /> Please make a valid selection
9
+ </>)
7
10
  const options = [
8
11
  {
9
12
  label: "United States",
@@ -12,7 +12,7 @@ const DropdownWithAutocomplete = (props) => {
12
12
  label: "Jasper Furniss",
13
13
  value: "Jasper Furniss",
14
14
  territory: "PHL",
15
- title: "Senior UX Engineer",
15
+ title: "Lead UX Engineer",
16
16
  id: "jasper-furniss",
17
17
  status: "Offline"
18
18
  },
@@ -25,18 +25,18 @@ const DropdownWithAutocomplete = (props) => {
25
25
  status: "Away"
26
26
  },
27
27
  {
28
- label: "Jason Cypret",
29
- value: "Jason Cypret",
28
+ label: "Carlos Lima",
29
+ value: "Carlos Lima",
30
30
  territory: "PHL",
31
- title: "VP of User Experience",
32
- id: "jason-cypret",
31
+ title: "Nitro Developer",
32
+ id: "carlos-lima",
33
33
  status: "Online"
34
34
  },
35
35
  {
36
36
  label: "Courtney Long",
37
37
  value: "Courtney Long",
38
38
  territory: "PHL",
39
- title: "UX Design Mentor",
39
+ title: "Lead UX Designer",
40
40
  id: "courtney-long",
41
41
  status: "Online"
42
42
  }
@@ -15,7 +15,7 @@ const DropdownWithAutocompleteAndCustomDisplay = (props) => {
15
15
  label: "Jasper Furniss",
16
16
  value: "Jasper Furniss",
17
17
  territory: "PHL",
18
- title: "Senior UX Engineer",
18
+ title: "Lead UX Engineer",
19
19
  id: "jasper-furniss",
20
20
  status: "Offline"
21
21
  },
@@ -28,18 +28,18 @@ const DropdownWithAutocompleteAndCustomDisplay = (props) => {
28
28
  status: "Away"
29
29
  },
30
30
  {
31
- label: "Jason Cypret",
32
- value: "Jason Cypret",
31
+ label: "Carlos Lima",
32
+ value: "Carlos Lima",
33
33
  territory: "PHL",
34
- title: "VP of User Experience",
35
- id: "jason-cypret",
34
+ title: "Nitro Developer",
35
+ id: "carlos-lima",
36
36
  status: "Online"
37
37
  },
38
38
  {
39
39
  label: "Courtney Long",
40
40
  value: "Courtney Long",
41
41
  territory: "PHL",
42
- title: "UX Design Mentor",
42
+ title: "Lead UX Designer",
43
43
  id: "courtney-long",
44
44
  status: "Online"
45
45
  }
@@ -15,7 +15,7 @@ const DropdownWithCustomDisplay = (props) => {
15
15
  label: "Jasper Furniss",
16
16
  value: "Jasper Furniss",
17
17
  territory: "PHL",
18
- title: "Senior UX Engineer",
18
+ title: "Lead UX Engineer",
19
19
  id: "jasper-furniss",
20
20
  status: "Offline"
21
21
  },
@@ -28,18 +28,18 @@ const DropdownWithCustomDisplay = (props) => {
28
28
  status: "Away"
29
29
  },
30
30
  {
31
- label: "Jason Cypret",
32
- value: "Jason Cypret",
31
+ label: "Carlos Lima",
32
+ value: "Carlos Lima",
33
33
  territory: "PHL",
34
- title: "VP of User Experience",
35
- id: "jason-cypret",
34
+ title: "Nitro Developer",
35
+ id: "carlos-lima",
36
36
  status: "Online"
37
37
  },
38
38
  {
39
39
  label: "Courtney Long",
40
40
  value: "Courtney Long",
41
41
  territory: "PHL",
42
- title: "UX Design Mentor",
42
+ title: "Lead UX Designer",
43
43
  id: "courtney-long",
44
44
  status: "Online"
45
45
  }
@@ -1,10 +1,10 @@
1
1
  <%
2
- options = [
2
+ options = [
3
3
  {
4
4
  label: "Jasper Furniss",
5
5
  value: "Jasper Furniss",
6
6
  territory: "PHL",
7
- title: "Senior UX Engineer",
7
+ title: "Lead UX Engineer",
8
8
  id: "jasper-furniss",
9
9
  status: "Offline"
10
10
  },
@@ -17,22 +17,22 @@
17
17
  status: "Away"
18
18
  },
19
19
  {
20
- label: "Jason Cypret",
21
- value: "Jason Cypret",
20
+ label: "Carlos Lima",
21
+ value: "Carlos Lima",
22
22
  territory: "PHL",
23
- title: "VP of User Experience",
24
- id: "jason-cypret",
23
+ title: "Nitro Developer",
24
+ id: "carlos-lima",
25
25
  status: "Online"
26
26
  },
27
27
  {
28
28
  label: "Courtney Long",
29
29
  value: "Courtney Long",
30
30
  territory: "PHL",
31
- title: "UX Design Mentor",
31
+ title: "Lead UX Designer",
32
32
  id: "courtney-long",
33
33
  status: "Online"
34
34
  }
35
- ]
35
+ ];
36
36
 
37
37
  %>
38
38
 
@@ -95,7 +95,7 @@ test('generated customDisplay for trigger', () => {
95
95
 
96
96
  const kit = screen.getByTestId(testId)
97
97
  const trigger = kit.querySelector('.pb_dropdown_trigger')
98
- const customDisplay = trigger.querySelector('.fa-flag.pb_icon_kit.fa-fw')
98
+ const customDisplay = trigger.querySelector('.pb_custom_icon')
99
99
  expect(customDisplay).toBeInTheDocument()
100
100
  })
101
101
 
@@ -170,7 +170,7 @@ test('generated custom Trigger', () => {
170
170
  options={options}
171
171
  >
172
172
  <Dropdown.Trigger>
173
- <Icon icon="elephant" />
173
+ <Icon icon="flag" />
174
174
  </Dropdown.Trigger>
175
175
  {options.map((option) => (
176
176
  <Dropdown.Option key={option.id}
@@ -182,7 +182,7 @@ test('generated custom Trigger', () => {
182
182
 
183
183
  const kit = screen.getByTestId(testId)
184
184
  const trigger = kit.querySelector('.pb_dropdown_trigger')
185
- const customTrigger = trigger.querySelector('.fa-elephant.pb_icon_kit.fa-fw')
185
+ const customTrigger = trigger.querySelector('.pb_custom_icon')
186
186
  expect(customTrigger).toBeInTheDocument()
187
187
  })
188
188
 
@@ -22,7 +22,7 @@ type DropdownOptionProps = {
22
22
  data?: { [key: string]: string };
23
23
  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
24
24
  id?: string;
25
- key?: string;
25
+ key?: string | number;
26
26
  option?: GenericObject;
27
27
  padding?: string;
28
28
  } & GlobalProps;