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

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 (269) 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 +429 -137
  8. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +97 -3
  9. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb +6 -1
  10. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +20 -7
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color.jsx +80 -0
  12. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color.md +3 -0
  13. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.html.erb +58 -0
  14. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.md +3 -0
  15. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.jsx +66 -0
  16. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.md +10 -0
  17. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.jsx +90 -0
  18. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.md +3 -0
  19. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.jsx +58 -0
  20. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.md +6 -0
  21. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.jsx +64 -0
  22. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.md +8 -0
  23. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.jsx +55 -0
  24. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.md +3 -0
  25. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.html.erb +33 -0
  26. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.md +3 -0
  27. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb +1 -1
  28. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +1 -2
  29. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_rails.md +2 -2
  30. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_react.md +1 -1
  31. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md +6 -2
  32. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md +6 -2
  33. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +11 -4
  34. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +7 -1
  35. data/app/pb_kits/playbook/pb_advanced_table/index.js +7 -0
  36. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss +97 -0
  37. data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +1 -1
  38. data/app/pb_kits/playbook/pb_background/_background.scss +26 -0
  39. data/app/pb_kits/playbook/pb_background/_background.tsx +5 -3
  40. data/app/pb_kits/playbook/pb_background/background.test.js +5 -0
  41. data/app/pb_kits/playbook/pb_background/docs/_background_overlay.jsx +35 -0
  42. data/app/pb_kits/playbook/pb_background/docs/_background_overlay.md +1 -0
  43. data/app/pb_kits/playbook/pb_background/docs/example.yml +1 -0
  44. data/app/pb_kits/playbook/pb_background/docs/index.js +1 -0
  45. data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx +1 -1
  46. data/app/pb_kits/playbook/pb_circle_chart/circleChart.test.js +2 -2
  47. data/app/pb_kits/playbook/pb_circle_chart/circleChartTheme.ts +53 -0
  48. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.html.erb +2 -2
  49. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx +1 -1
  50. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb +1 -1
  51. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx +1 -1
  52. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.html.erb +1 -1
  53. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx +1 -1
  54. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.html.erb +1 -1
  55. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx +1 -1
  56. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.html.erb +1 -1
  57. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +1 -1
  58. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx +2 -2
  59. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx +38 -0
  60. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md +1 -0
  61. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb +1 -1
  62. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx +1 -1
  63. data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +2 -3
  64. data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +2 -1
  65. data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss +39 -1
  66. data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx +4 -0
  67. data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb +9 -1
  68. data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.test.js +14 -0
  69. data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.html.erb +28 -0
  70. data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.jsx +42 -0
  71. data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.md +1 -0
  72. data/app/pb_kits/playbook/pb_circle_icon_button/docs/example.yml +2 -0
  73. data/app/pb_kits/playbook/pb_circle_icon_button/docs/index.js +1 -0
  74. data/app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap +14 -7
  75. data/app/pb_kits/playbook/pb_contact/contact.test.js +7 -7
  76. data/app/pb_kits/playbook/pb_copy_button/_copy_button.tsx +19 -45
  77. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.jsx +54 -0
  78. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.md +3 -0
  79. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook_rails.html.erb +14 -0
  80. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook_rails.md +3 -0
  81. data/app/pb_kits/playbook/pb_copy_button/docs/example.yml +2 -0
  82. data/app/pb_kits/playbook/pb_copy_button/docs/index.js +2 -1
  83. data/app/pb_kits/playbook/pb_copy_button/index.js +46 -20
  84. data/app/pb_kits/playbook/pb_copy_button/usePBCopy.ts +45 -0
  85. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +12 -0
  86. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +12 -0
  87. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +50 -1
  88. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb +2 -2
  89. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx +4 -1
  90. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.md +4 -0
  91. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md +1 -1
  92. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.md +5 -1
  93. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.jsx +34 -0
  94. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.md +14 -0
  95. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.html.erb +20 -0
  96. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.md +14 -0
  97. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +2 -0
  98. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -0
  99. data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +10 -0
  100. data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.test.js +2 -2
  101. data/app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.test.js +1 -1
  102. data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +10 -1
  103. data/app/pb_kits/playbook/pb_dialog/dialog.rb +2 -0
  104. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_turbo_frames.html.erb +117 -0
  105. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_turbo_frames_rails.md +9 -0
  106. data/app/pb_kits/playbook/pb_dialog/docs/example.yml +1 -0
  107. data/app/pb_kits/playbook/pb_dialog/index.js +106 -14
  108. data/app/pb_kits/playbook/pb_draggable/_draggable.scss +43 -20
  109. data/app/pb_kits/playbook/pb_draggable/context/index.tsx +58 -17
  110. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.html.erb +43 -0
  111. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.jsx +102 -105
  112. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.html.erb +55 -0
  113. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.jsx +50 -48
  114. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_rails.md +1 -0
  115. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_react.md +1 -0
  116. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.jsx +110 -0
  117. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.md +5 -0
  118. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_react.md +5 -0
  119. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.html.erb +42 -0
  120. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.md +1 -0
  121. data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_table_react.jsx → _draggable_with_table.jsx} +1 -1
  122. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md +3 -1
  123. data/app/pb_kits/playbook/pb_draggable/docs/example.yml +12 -7
  124. data/app/pb_kits/playbook/pb_draggable/docs/index.js +4 -1
  125. data/app/pb_kits/playbook/pb_draggable/draggable.rb +9 -1
  126. data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx +71 -3
  127. data/app/pb_kits/playbook/pb_draggable/index.js +139 -142
  128. data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx +4 -3
  129. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +1 -1
  130. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb +5 -2
  131. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx +4 -1
  132. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +6 -6
  133. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx +6 -6
  134. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +6 -6
  135. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb +8 -8
  136. data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx +3 -3
  137. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +1 -1
  138. data/app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.html.erb +41 -0
  139. data/app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.md +1 -0
  140. data/app/pb_kits/playbook/pb_filter/docs/example.yml +1 -0
  141. data/app/pb_kits/playbook/pb_form_group/_error_state_mixin.scss +22 -18
  142. data/app/pb_kits/playbook/pb_form_group/_form_group.scss +45 -3
  143. data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb +15 -5
  144. data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx +39 -6
  145. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.jsx +30 -0
  146. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.md +1 -0
  147. data/app/pb_kits/playbook/pb_gauge/docs/example.yml +1 -0
  148. data/app/pb_kits/playbook/pb_gauge/docs/index.js +1 -0
  149. data/app/pb_kits/playbook/pb_gauge/gaugeTheme.ts +85 -0
  150. data/app/pb_kits/playbook/pb_icon/icon.test.js +9 -9
  151. data/app/pb_kits/playbook/pb_icon_circle/icon_circle.test.js +1 -1
  152. data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js +1 -1
  153. data/app/pb_kits/playbook/pb_icon_value/icon_value.test.js +1 -1
  154. data/app/pb_kits/playbook/pb_label_value/label_value.test.js +1 -1
  155. data/app/pb_kits/playbook/pb_layout/_layout.scss +127 -0
  156. data/app/pb_kits/playbook/pb_layout/_layout.tsx +47 -7
  157. data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx +394 -0
  158. data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md +5 -0
  159. data/app/pb_kits/playbook/pb_layout/docs/example.yml +1 -0
  160. data/app/pb_kits/playbook/pb_layout/docs/index.js +1 -0
  161. data/app/pb_kits/playbook/pb_layout/layout.test.js +4 -0
  162. data/app/pb_kits/playbook/pb_layout/subcomponents/_game.tsx +121 -0
  163. data/app/pb_kits/playbook/pb_layout/subcomponents/_participant.tsx +79 -0
  164. data/app/pb_kits/playbook/pb_layout/subcomponents/_round.tsx +74 -0
  165. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.jsx +52 -0
  166. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.md +1 -0
  167. data/app/pb_kits/playbook/pb_line_graph/docs/example.yml +1 -0
  168. data/app/pb_kits/playbook/pb_line_graph/docs/index.js +1 -0
  169. data/app/pb_kits/playbook/pb_line_graph/lineGraphTheme.ts +110 -0
  170. data/app/pb_kits/playbook/pb_link/link.test.jsx +2 -2
  171. data/app/pb_kits/playbook/pb_nav/_nav_item.test.js +5 -3
  172. data/app/pb_kits/playbook/pb_overlay/_overlay.scss +83 -22
  173. data/app/pb_kits/playbook/pb_overlay/_overlay.tsx +39 -7
  174. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.jsx +63 -0
  175. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.md +3 -0
  176. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md +1 -7
  177. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_background.jsx +49 -0
  178. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_background.md +1 -0
  179. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_opacity.jsx +81 -0
  180. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_opacity.md +1 -0
  181. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.jsx +39 -0
  182. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.md +1 -0
  183. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.jsx +40 -0
  184. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.md +5 -0
  185. data/app/pb_kits/playbook/pb_overlay/docs/example.yml +5 -0
  186. data/app/pb_kits/playbook/pb_overlay/docs/index.js +5 -0
  187. data/app/pb_kits/playbook/pb_overlay/overlay.test.jsx +39 -1
  188. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +13 -0
  189. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +3 -1
  190. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.html.erb +10 -0
  191. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.jsx +20 -0
  192. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.md +1 -0
  193. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx +8 -1
  194. data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +2 -0
  195. data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +1 -0
  196. data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb +3 -0
  197. data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.test.js +19 -0
  198. data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.html.erb +46 -0
  199. data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.md +1 -0
  200. data/app/pb_kits/playbook/pb_popover/docs/example.yml +1 -0
  201. data/app/pb_kits/playbook/pb_popover/index.ts +13 -1
  202. data/app/pb_kits/playbook/pb_popover/popover.rb +2 -0
  203. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_vertical.md +1 -0
  204. data/app/pb_kits/playbook/pb_select/_select.scss +10 -0
  205. data/app/pb_kits/playbook/pb_select/docs/_select_error.html.erb +1 -1
  206. data/app/pb_kits/playbook/pb_select/docs/_select_error.jsx +7 -2
  207. data/app/pb_kits/playbook/pb_stat_change/stat_change.test.js +8 -4
  208. data/app/pb_kits/playbook/pb_table/_table.tsx +2 -2
  209. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.md +3 -1
  210. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.md +3 -1
  211. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md +3 -1
  212. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md +3 -1
  213. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.html.erb +34 -0
  214. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_rails.md +1 -0
  215. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating.html.erb +36 -0
  216. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_rails.md +1 -0
  217. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_react.md +1 -1
  218. data/app/pb_kits/playbook/pb_table/docs/example.yml +2 -0
  219. data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss +1 -1
  220. data/app/pb_kits/playbook/pb_table/styles/_headers.scss +19 -7
  221. data/app/pb_kits/playbook/pb_table/styles/_striped.scss +3 -3
  222. data/app/pb_kits/playbook/pb_table/table.rb +13 -1
  223. data/app/pb_kits/playbook/pb_table/table_header.rb +13 -1
  224. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +13 -5
  225. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.html.erb +1 -1
  226. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.jsx +9 -1
  227. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.jsx +94 -0
  228. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.md +1 -0
  229. data/app/pb_kits/playbook/pb_text_input/docs/example.yml +2 -0
  230. data/app/pb_kits/playbook/pb_text_input/docs/index.js +1 -0
  231. data/app/pb_kits/playbook/pb_text_input/inputMask.ts +8 -1
  232. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.html.erb +5 -1
  233. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx +7 -1
  234. data/app/pb_kits/playbook/pb_tooltip/tooltip.html.erb +2 -5
  235. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.html.erb +8 -1
  236. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.jsx +6 -2
  237. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +4 -4
  238. data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb +2 -5
  239. data/app/pb_kits/playbook/pb_user/user.html.erb +1 -6
  240. data/app/pb_kits/playbook/pb_user_badge/user_badge.html.erb +1 -6
  241. data/dist/chunks/_typeahead-D8CsVBZO.js +22 -0
  242. data/dist/chunks/_weekday_stacked-D3oLTSkH.js +45 -0
  243. data/dist/chunks/lib-BmTAc7Nc.js +29 -0
  244. data/dist/chunks/{pb_form_validation-BvNy9Bd6.js → pb_form_validation-BWjy4bFn.js} +1 -1
  245. data/dist/chunks/vendor.js +1 -1
  246. data/dist/menu.yml +2 -2
  247. data/dist/playbook-doc.js +19 -1
  248. data/dist/playbook-rails-react-bindings.js +1 -1
  249. data/dist/playbook-rails.js +1 -1
  250. data/dist/playbook.css +1 -1
  251. data/lib/playbook/kit_base.rb +4 -4
  252. data/lib/playbook/version.rb +2 -2
  253. metadata +98 -20
  254. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.md +0 -5
  255. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.md +0 -1
  256. data/dist/chunks/_typeahead-Djo6qCne.js +0 -22
  257. data/dist/chunks/_weekday_stacked-DIIHW0OV.js +0 -45
  258. data/dist/chunks/lib-BGzBzFZX.js +0 -29
  259. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_default_rails.html.erb → _draggable_default.html.erb} +0 -0
  260. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_default.md → _draggable_default_react.md} +0 -0
  261. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_multiple_containers_rails.html.erb → _draggable_multiple_containers.html.erb} +0 -0
  262. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_multiple_containers.md → _draggable_multiple_containers_react.md} +0 -0
  263. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_cards_rails.html.erb → _draggable_with_cards.html.erb} +0 -0
  264. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_cards.md → _draggable_with_cards_react.md} +0 -0
  265. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_list_rails.html.erb → _draggable_with_list.html.erb} +0 -0
  266. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_list.md → _draggable_with_list_react.md} +0 -0
  267. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_selectable_list_rails.html.erb → _draggable_with_selectable_list.html.erb} +0 -0
  268. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_selectable_list.md → _draggable_with_selectable_list_react.md} +0 -0
  269. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_table.md → _draggable_with_table_rails.md} +0 -0
@@ -10,6 +10,81 @@ export default class PbDialog extends PbEnhancedElement {
10
10
  connect() {
11
11
  window.addEventListener("DOMContentLoaded", () => this.setupDialog())
12
12
  window.addEventListener("turbo:frame-load", () => this.setupDialog())
13
+
14
+ // Code for custom_event_type setup (can take multiple events in a string separated by commas)
15
+ const customEventTypeString = this.element.dataset.customEventType
16
+ if (customEventTypeString && !this.element.hasAttribute("data-custom-event-handled")) {
17
+ this.customEventTypes = customEventTypeString.split(",").map(e => e.trim()).filter(Boolean)
18
+ this.customEventTypes.forEach(eventType => {
19
+ window.addEventListener(eventType, this.handleCustomEvent)
20
+ })
21
+
22
+ this.element.setAttribute("data-custom-event-handled", "true")
23
+ }
24
+ }
25
+
26
+ disconnect() {
27
+ if (this.customEventTypes && Array.isArray(this.customEventTypes)) {
28
+ this.customEventTypes.forEach(eventType => {
29
+ window.removeEventListener(eventType, this.handleCustomEvent)
30
+ })
31
+ }
32
+ }
33
+
34
+ handleCustomEvent = (event) => {
35
+ const dialogId = event.detail?.dialogId || this.element.querySelector("dialog")?.id
36
+ const dialog = dialogId && document.getElementById(dialogId)
37
+
38
+ if (!dialog) {
39
+ console.warn(`[PbDialog] Could not find dialog with ID '${dialogId}'`)
40
+ return
41
+ }
42
+
43
+ this.setupDialog()
44
+
45
+ const action = event.detail?.action || 'open'
46
+
47
+ // Known Actions - four "standard" dialog actions that felt like things devs might want to do
48
+ const knownActions = ['open', 'close', 'clickConfirm', 'clickCancel'];
49
+
50
+ if (knownActions.includes(action)) {
51
+ switch (action) {
52
+ case 'open':
53
+ if (!dialog.open) dialog.showModal()
54
+ break
55
+ case 'close':
56
+ if (dialog.open) dialog.close(event.detail?.returnValue)
57
+ break
58
+ case 'clickConfirm':
59
+ this.triggerButtonClick(dialog, event, 'confirm')
60
+ break
61
+ case 'clickCancel':
62
+ this.triggerButtonClick(dialog, event, 'cancel')
63
+ break
64
+ }
65
+ }
66
+ // Custom Actions - flexible for Turbo or other integration
67
+ else if (typeof event.detail?.customAction === 'function') {
68
+ event.detail.customAction({ dialog, event })
69
+ } else if (window.pbDialogActions?.[action]) {
70
+ // Can register custom actions globally
71
+ window.pbDialogActions[action]({ dialog, event })
72
+ } else {
73
+ console.warn(`[PbDialog] Unknown action: ${action}`)
74
+ }
75
+ }
76
+
77
+ triggerButtonClick(dialog, event, type) {
78
+ const buttonId = event.detail?.[`${type}ButtonId`] ||
79
+ dialog.closest('[data-pb-dialog-wrapper]')?.dataset[`${type}ButtonId`]
80
+ const button = buttonId ? document.getElementById(buttonId) :
81
+ dialog.querySelector(`[data-${type}-button]`)
82
+
83
+ if (button) {
84
+ button.click()
85
+ } else {
86
+ console.warn(`[PbDialog] Could not find ${type} button for dialog`)
87
+ }
13
88
  }
14
89
 
15
90
  setupDialog() {
@@ -18,7 +93,7 @@ export default class PbDialog extends PbEnhancedElement {
18
93
  const dialogs = document.querySelectorAll(".pb_dialog_rails")
19
94
 
20
95
  const loadingButton = document.querySelector('[data-disable-with="Loading"]');
21
- if (loadingButton) {
96
+ if (loadingButton && !loadingButton.dataset.listenerAttached) {
22
97
  loadingButton.addEventListener("click", function () {
23
98
  const okayLoadingButton = document.querySelector('[data-disable-with="Loading"]');
24
99
  const cancelButton = document.querySelector('[data-disable-cancel-with="Loading"]');
@@ -35,27 +110,42 @@ export default class PbDialog extends PbEnhancedElement {
35
110
  okayLoadingButton.className = newClass;
36
111
  if (cancelButton) cancelButton.className = newCancelClass;
37
112
  });
113
+
114
+ // Prevent multiple registrations
115
+ loadingButton.dataset.listenerAttached = "true";
38
116
  }
39
-
117
+
40
118
  openTrigger.forEach((open) => {
41
- open.addEventListener("click", () => {
42
- var openTriggerData = open.dataset.openDialog;
43
- var targetDialog = document.getElementById(openTriggerData)
44
- if (targetDialog.open) return;
45
- targetDialog.showModal();
46
- });
119
+ const originalClickHandler = open._openDialogClickHandler
120
+ if (originalClickHandler) open.removeEventListener("click", originalClickHandler)
121
+
122
+ open._openDialogClickHandler = () => {
123
+ const openTriggerData = open.dataset.openDialog;
124
+ const targetDialogOpen = document.getElementById(openTriggerData)
125
+ if (targetDialogOpen && !targetDialogOpen.open) targetDialogOpen.showModal()
126
+ };
127
+
128
+ open.addEventListener("click", open._openDialogClickHandler)
47
129
  });
48
130
 
49
131
  closeTrigger.forEach((close) => {
50
- close.addEventListener("click", () => {
51
- var closeTriggerData = close.dataset.closeDialog;
52
- document.getElementById(closeTriggerData).close();
53
- });
132
+ const originalClickHandler = close._closeDialogClickHandler
133
+ if (originalClickHandler) close.removeEventListener("click", originalClickHandler)
134
+
135
+ close._closeDialogClickHandler = () => {
136
+ const closeTriggerData = close.dataset.closeDialog;
137
+ const targetDialogClose = document.getElementById(closeTriggerData)
138
+ if (targetDialogClose) targetDialogClose.close();
139
+ };
140
+
141
+ close.addEventListener("click", close._closeDialogClickHandler)
54
142
  });
55
143
 
56
144
  // Close dialog box on outside click
57
145
  dialogs.forEach((dialogElement) => {
58
- dialogElement.addEventListener("mousedown", (event) => {
146
+ const originalMousedownHandler = dialogElement._outsideClickHandler
147
+ if (originalMousedownHandler) dialogElement.removeEventListener("mousedown", originalMousedownHandler)
148
+ dialogElement._outsideClickHandler = (event) => {
59
149
  const dialogParentDataset = dialogElement.parentElement.dataset
60
150
  if (dialogParentDataset.overlayClick === "overlay_close") return
61
151
 
@@ -69,7 +159,9 @@ export default class PbDialog extends PbEnhancedElement {
69
159
  dialogElement.close()
70
160
  event.stopPropagation()
71
161
  }
72
- })
162
+ }
163
+
164
+ dialogElement.addEventListener("mousedown", dialogElement._outsideClickHandler);
73
165
  })
74
166
  }
75
167
  }
@@ -1,5 +1,6 @@
1
1
  @import "../tokens/colors";
2
2
  @import "../tokens/opacity";
3
+ @import "../tokens/border_radius";
3
4
 
4
5
  .pb_draggable_container {
5
6
  .pb_draggable_item {
@@ -34,7 +35,7 @@
34
35
  width: 100%;
35
36
  height: 100%;
36
37
  border: 2px dashed $neutral;
37
- border-radius: $border-radius-sm;
38
+ border-radius: $border_radius_sm;
38
39
  box-sizing: border-box;
39
40
  z-index: 10;
40
41
  pointer-events: none;
@@ -64,7 +65,7 @@
64
65
  width: 100%;
65
66
  height: 100%;
66
67
  background-color: rgba($neutral, $opacity_5);
67
- border-radius: $border-radius-sm;
68
+ border-radius: $border_radius_sm;
68
69
  z-index: 10;
69
70
  pointer-events: none;
70
71
  }
@@ -73,48 +74,70 @@
73
74
  &.drop_zone_color_primary::before { background-color: rgba($primary, $opacity_5); }
74
75
  &.drop_zone_color_purple::before { background-color: rgba($purple, $opacity_5); }
75
76
  }
76
-
77
- // Line variant
77
+ }
78
+ }
79
+ // Line default - Vertical orientation (horizontal line for draggable items in vertical layout)
80
+ &.line_vertical {
81
+ .pb_draggable_item {
82
+ position: relative;
78
83
  &.drop_zone_line {
79
- // Hide the original content to show the line
84
+ // Hide the original content to show the line only (held draggable item should not take up space in drop zone)
85
+ position: relative;
86
+ z-index: 2;
80
87
  & > * {
81
88
  opacity: 0;
82
89
  }
83
-
90
+ height: 4px;
84
91
  // Style for horizontal line (default)
85
92
  &::before {
86
93
  content: '';
87
94
  position: absolute;
88
95
  left: 0;
89
96
  top: 0;
90
- width: 4px;
91
- height: 100%;
97
+ width: 100%;
98
+ height: 4px;
92
99
  background-color: $neutral;
93
- border-radius: 1000px;
100
+ border-radius: $border_radius_rounded;
94
101
  z-index: 10;
95
102
  pointer-events: none;
103
+ transform: translateY(-50%);
96
104
  }
97
-
98
- // Apply color variants
105
+ // Apply color variants to the ::before element
99
106
  &.drop_zone_color_primary::before { background-color: $primary; }
100
107
  &.drop_zone_color_purple::before { background-color: $purple; }
101
108
  }
102
109
  }
103
110
  }
104
- }
105
-
106
- // Support for vertical layouts (horizontal line)
107
- .pb_draggable_container.vertical {
108
- .pb_draggable_item {
109
- &.is_dragging {
110
- // Line variant for vertical layouts (horizontal line)
111
+ // Line variant - Horizontal orientation (vertical line for draggable items in horizontal layout)
112
+ &.line_horizontal {
113
+ .pb_draggable_item {
114
+ position: relative;
111
115
  &.drop_zone_line {
116
+ position: relative;
117
+ z-index: 2;
118
+ & > * {
119
+ opacity: 0;
120
+ }
121
+ width: 4px;
122
+ height: auto;
123
+ // Style for vertical line
112
124
  &::before {
113
- width: 100%;
114
- height: 4px;
125
+ content: '';
126
+ position: absolute;
115
127
  left: 0;
116
128
  top: 0;
129
+ width: 4px;
130
+ height: 100%;
131
+ background-color: $neutral;
132
+ border-radius: $border_radius_rounded;
133
+ z-index: 10;
134
+ pointer-events: none;
135
+ transform: translateX(-50%);
117
136
  }
137
+
138
+ // Apply color variants to the ::before element
139
+ &.drop_zone_color_primary::before { background-color: $primary; }
140
+ &.drop_zone_color_purple::before { background-color: $purple; }
118
141
  }
119
142
  }
120
143
  }
@@ -1,11 +1,11 @@
1
- import React, { createContext, useReducer, useContext, useEffect, useMemo } from "react";
1
+ import React, { createContext, useReducer, useContext, useEffect, useMemo, useRef, useState } from "react";
2
2
  import { InitialStateType, ActionType, DraggableProviderType } from "./types";
3
3
 
4
4
  const initialState: InitialStateType = {
5
5
  items: [],
6
6
  dragData: { id: "", initialGroup: "" },
7
7
  isDragging: "",
8
- activeContainer: ""
8
+ activeContainer: "",
9
9
  };
10
10
 
11
11
  const reducer = (state: InitialStateType, action: ActionType) => {
@@ -31,9 +31,23 @@ const reducer = (state: InitialStateType, action: ActionType) => {
31
31
  const { dragId, targetId } = action.payload;
32
32
  const newItems = [...state.items];
33
33
  const draggedItem = newItems.find(item => item.id === dragId);
34
- const draggedIndex = newItems.indexOf(draggedItem);
34
+ const targetItem = newItems.find(item => item.id === targetId);
35
+
36
+ if (!draggedItem || !targetItem || draggedItem.container !== targetItem.container) {
37
+ return state;
38
+ }
39
+
40
+ if (dragId === targetId) {
41
+ return state;
42
+ }
43
+
44
+ const draggedIndex = newItems.findIndex(item => item.id === dragId);
35
45
  const targetIndex = newItems.findIndex(item => item.id === targetId);
36
46
 
47
+ if (draggedIndex === -1 || targetIndex === -1) {
48
+ return state;
49
+ }
50
+
37
51
  newItems.splice(draggedIndex, 1);
38
52
  newItems.splice(targetIndex, 0, draggedItem);
39
53
 
@@ -48,7 +62,11 @@ const reducer = (state: InitialStateType, action: ActionType) => {
48
62
  const DragContext = createContext<any>({});
49
63
 
50
64
  export const DraggableContext = () => {
51
- return useContext(DragContext);
65
+ const context = useContext(DragContext);
66
+ if (context === undefined) {
67
+ throw new Error('DraggableContext must be used within a DraggableProvider');
68
+ }
69
+ return context;
52
70
  };
53
71
 
54
72
  export const DraggableProvider = ({
@@ -63,7 +81,11 @@ export const DraggableProvider = ({
63
81
  dropZone = { type: 'ghost', color: 'neutral', direction: 'vertical' }
64
82
  }: DraggableProviderType) => {
65
83
  const [state, dispatch] = useReducer(reducer, initialState);
66
-
84
+
85
+ // Store initial items in a ref to use if needed (for consistency when needed in future updates)
86
+ const initialItemsRef = useRef(initialItems);
87
+ const [isDragging, setIsDragging] = useState(false);
88
+
67
89
  // Parse dropZone prop - handle both string format (backward compatibility) and object format
68
90
  let dropZoneType = 'ghost';
69
91
  let dropZoneColor = 'neutral';
@@ -86,45 +108,64 @@ export const DraggableProvider = ({
86
108
 
87
109
  useEffect(() => {
88
110
  dispatch({ type: 'SET_ITEMS', payload: initialItems });
111
+ initialItemsRef.current = initialItems;
89
112
  }, [initialItems]);
90
113
 
91
114
  useEffect(() => {
92
- onReorder(state.items);
93
- }, [state.items]);
115
+ if (onReorder) {
116
+ onReorder(state.items);
117
+ }
118
+ }, [state.items, onReorder]);
94
119
 
95
120
  const handleDragStart = (id: string, container: string) => {
96
- dispatch({ type: 'SET_DRAG_DATA', payload: { id: id, initialGroup: container } });
121
+ setIsDragging(true);
122
+ dispatch({ type: 'SET_DRAG_DATA', payload: { id, initialGroup: container } });
97
123
  dispatch({ type: 'SET_IS_DRAGGING', payload: id });
124
+ dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: container });
98
125
  if (onDragStart) onDragStart(id, container);
99
126
  };
100
127
 
101
128
  const handleDragEnter = (id: string, container: string) => {
102
- if (state.dragData.id !== id) {
103
- dispatch({ type: 'REORDER_ITEMS', payload: { dragId: state.dragData.id, targetId: id } });
104
- dispatch({ type: 'SET_DRAG_DATA', payload: { id: state.dragData.id, initialGroup: container } });
129
+ if (!isDragging || container !== state.activeContainer) return;
130
+
131
+ if (state.dragData.id === id) return;
132
+
133
+ const draggedItem = state.items.find(item => item.id === state.dragData.id);
134
+ const targetItem = state.items.find(item => item.id === id);
135
+
136
+ if (!draggedItem || !targetItem || draggedItem.container !== targetItem.container) {
137
+ return;
105
138
  }
139
+
140
+ dispatch({ type: 'REORDER_ITEMS', payload: { dragId: state.dragData.id, targetId: id } });
141
+
106
142
  if (onDragEnter) onDragEnter(id, container);
107
143
  };
108
144
 
109
145
  const handleDragEnd = () => {
146
+ setIsDragging(false);
110
147
  dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
111
148
  dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
112
149
  if (onDragEnd) onDragEnd();
113
150
  };
114
151
 
115
- const changeCategory = (itemId: string, container: string) => {
116
- dispatch({ type: 'CHANGE_CATEGORY', payload: { itemId, container } });
117
- };
118
-
119
152
  const handleDrop = (container: string) => {
153
+ const draggedItem = state.items.find(item => item.id === state.dragData.id);
154
+
155
+ if (draggedItem && draggedItem.container !== container) {
156
+ dispatch({ type: 'CHANGE_CATEGORY', payload: { itemId: state.dragData.id, container } });
157
+ }
158
+
120
159
  dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
121
160
  dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
122
- changeCategory(state.dragData.id, container);
161
+
162
+ setIsDragging(false);
123
163
  if (onDrop) onDrop(container);
124
164
  };
125
165
 
126
166
  const handleDragOver = (e: Event, container: string) => {
127
167
  e.preventDefault();
168
+ e.stopPropagation();
128
169
  dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: container });
129
170
  if (onDragOver) onDragOver(e, container);
130
171
  };
@@ -144,7 +185,7 @@ export const DraggableProvider = ({
144
185
  handleDragEnd,
145
186
  handleDrop,
146
187
  handleDragOver
147
- }), [state, dropZoneType, dropZoneColor, dropZoneDirection]);
188
+ }), [state, dropZoneType, dropZoneColor, dropZoneDirection, handleDragStart, handleDragEnter, handleDragEnd, handleDrop, handleDragOver]);
148
189
 
149
190
  return (
150
191
  <DragContext.Provider value={contextValue}>{children}</DragContext.Provider>
@@ -0,0 +1,43 @@
1
+ <% data_shadow = [
2
+ { id: "51", text: "Task 1" },
3
+ { id: "52", text: "Task 2" },
4
+ { id: "53", text: "Task 3" }
5
+ ] %>
6
+
7
+ <% data_outline = [
8
+ { id: "61", text: "Task 1" },
9
+ { id: "62", text: "Task 2" },
10
+ { id: "63", text: "Task 3" }
11
+ ] %>
12
+
13
+ <%= pb_rails("flex", props: { justify: "around" }) do %>
14
+ <%= pb_rails("flex/flex_item", props: { margin_right: "xl" }) do %>
15
+ <%= pb_rails("draggable", props: { drop_zone_type: "shadow", initial_items: data_shadow }) do %>
16
+ <%= pb_rails("caption", props: { margin_bottom: "xs", text: "Shadow", text_align: "center" }) %>
17
+ <%= pb_rails("draggable/draggable_container", props: { html_options: { style: { width: "200px" } } }) do %>
18
+ <% data_shadow.each do |item| %>
19
+ <%= pb_rails("card", props: { drag_id: item[:id], draggable_item: true, margin_bottom: "xs", padding: "xs", padding_right: "xl" }) do %>
20
+ <%= pb_rails("flex", props: { align_items: "stretch", flex_direction: "column" }) do %>
21
+ <%= pb_rails("body", props: { text: item[:text] }) %>
22
+ <% end %>
23
+ <% end %>
24
+ <% end %>
25
+ <% end %>
26
+ <% end %>
27
+ <% end %>
28
+
29
+ <%= pb_rails("flex/flex_item", props: { margin_right: "xl" }) do %>
30
+ <%= pb_rails("draggable", props: { drop_zone_type: "outline", initial_items: data_outline }) do %>
31
+ <%= pb_rails("caption", props: { margin_bottom: "xs", text: "Outline", text_align: "center" }) %>
32
+ <%= pb_rails("draggable/draggable_container", props: { html_options: { style: { width: "200px" } } }) do %>
33
+ <% data_outline.each do |item| %>
34
+ <%= pb_rails("card", props: { drag_id: item[:id], draggable_item: true, margin_bottom: "xs", padding: "xs", padding_right: "xl" }) do %>
35
+ <%= pb_rails("flex", props: { align_items: "stretch", flex_direction: "column" }) do %>
36
+ <%= pb_rails("body", props: { text: item[:text] }) %>
37
+ <% end %>
38
+ <% end %>
39
+ <% end %>
40
+ <% end %>
41
+ <% end %>
42
+ <% end %>
43
+ <% end %>