playbook_ui 14.17.0 → 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 (238) 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/_advanced_table.scss +365 -143
  7. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +14 -1
  8. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb +6 -1
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color.jsx +80 -0
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color.md +3 -0
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.html.erb +58 -0
  12. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.md +3 -0
  13. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.jsx +66 -0
  14. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.md +10 -0
  15. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.jsx +58 -0
  16. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.md +6 -0
  17. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.jsx +64 -0
  18. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.md +8 -0
  19. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.jsx +55 -0
  20. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.md +3 -0
  21. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.html.erb +33 -0
  22. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.md +3 -0
  23. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb +1 -1
  24. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +1 -2
  25. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_rails.md +2 -2
  26. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_react.md +1 -1
  27. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md +6 -2
  28. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md +6 -2
  29. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +10 -4
  30. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +6 -1
  31. data/app/pb_kits/playbook/pb_advanced_table/index.js +7 -0
  32. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss +97 -0
  33. data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +1 -1
  34. data/app/pb_kits/playbook/pb_background/_background.scss +26 -0
  35. data/app/pb_kits/playbook/pb_background/_background.tsx +5 -3
  36. data/app/pb_kits/playbook/pb_background/background.test.js +5 -0
  37. data/app/pb_kits/playbook/pb_background/docs/_background_overlay.jsx +35 -0
  38. data/app/pb_kits/playbook/pb_background/docs/_background_overlay.md +1 -0
  39. data/app/pb_kits/playbook/pb_background/docs/example.yml +1 -0
  40. data/app/pb_kits/playbook/pb_background/docs/index.js +1 -0
  41. data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx +1 -1
  42. data/app/pb_kits/playbook/pb_circle_chart/circleChart.test.js +2 -2
  43. data/app/pb_kits/playbook/pb_circle_chart/circleChartTheme.ts +53 -0
  44. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.html.erb +2 -2
  45. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx +1 -1
  46. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb +1 -1
  47. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx +1 -1
  48. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.html.erb +1 -1
  49. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx +1 -1
  50. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.html.erb +1 -1
  51. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx +1 -1
  52. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.html.erb +1 -1
  53. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +1 -1
  54. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx +2 -2
  55. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx +38 -0
  56. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md +1 -0
  57. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb +1 -1
  58. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx +1 -1
  59. data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +2 -3
  60. data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +2 -1
  61. data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss +39 -1
  62. data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx +4 -0
  63. data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb +9 -1
  64. data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.test.js +14 -0
  65. data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.html.erb +28 -0
  66. data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.jsx +42 -0
  67. data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.md +1 -0
  68. data/app/pb_kits/playbook/pb_circle_icon_button/docs/example.yml +2 -0
  69. data/app/pb_kits/playbook/pb_circle_icon_button/docs/index.js +1 -0
  70. data/app/pb_kits/playbook/pb_copy_button/_copy_button.tsx +19 -45
  71. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.jsx +54 -0
  72. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.md +3 -0
  73. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook_rails.html.erb +14 -0
  74. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook_rails.md +3 -0
  75. data/app/pb_kits/playbook/pb_copy_button/docs/example.yml +2 -0
  76. data/app/pb_kits/playbook/pb_copy_button/docs/index.js +2 -1
  77. data/app/pb_kits/playbook/pb_copy_button/index.js +46 -20
  78. data/app/pb_kits/playbook/pb_copy_button/usePBCopy.ts +45 -0
  79. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +12 -0
  80. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +12 -0
  81. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +50 -1
  82. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb +2 -2
  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_dialog/dialog.html.erb +10 -1
  95. data/app/pb_kits/playbook/pb_dialog/dialog.rb +2 -0
  96. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_turbo_frames.html.erb +117 -0
  97. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_turbo_frames_rails.md +9 -0
  98. data/app/pb_kits/playbook/pb_dialog/docs/example.yml +1 -0
  99. data/app/pb_kits/playbook/pb_dialog/index.js +106 -14
  100. data/app/pb_kits/playbook/pb_draggable/_draggable.scss +43 -20
  101. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.html.erb +43 -0
  102. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.jsx +102 -105
  103. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.html.erb +55 -0
  104. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.jsx +50 -48
  105. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_rails.md +1 -0
  106. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_react.md +1 -0
  107. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.jsx +110 -0
  108. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.md +5 -0
  109. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_react.md +5 -0
  110. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.html.erb +42 -0
  111. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.md +1 -0
  112. data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_table_react.jsx → _draggable_with_table.jsx} +1 -1
  113. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md +3 -1
  114. data/app/pb_kits/playbook/pb_draggable/docs/example.yml +12 -7
  115. data/app/pb_kits/playbook/pb_draggable/docs/index.js +4 -1
  116. data/app/pb_kits/playbook/pb_draggable/draggable.rb +9 -1
  117. data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx +68 -0
  118. data/app/pb_kits/playbook/pb_draggable/index.js +139 -142
  119. data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx +4 -3
  120. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +1 -1
  121. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb +5 -2
  122. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx +4 -1
  123. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +1 -1
  124. data/app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.html.erb +41 -0
  125. data/app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.md +1 -0
  126. data/app/pb_kits/playbook/pb_filter/docs/example.yml +1 -0
  127. data/app/pb_kits/playbook/pb_form_group/_error_state_mixin.scss +22 -18
  128. data/app/pb_kits/playbook/pb_form_group/_form_group.scss +23 -3
  129. data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb +15 -5
  130. data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx +39 -6
  131. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.jsx +30 -0
  132. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.md +1 -0
  133. data/app/pb_kits/playbook/pb_gauge/docs/example.yml +1 -0
  134. data/app/pb_kits/playbook/pb_gauge/docs/index.js +1 -0
  135. data/app/pb_kits/playbook/pb_gauge/gaugeTheme.ts +85 -0
  136. data/app/pb_kits/playbook/pb_layout/_layout.scss +70 -1
  137. data/app/pb_kits/playbook/pb_layout/_layout.tsx +29 -2
  138. data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx +322 -118
  139. data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md +1 -1
  140. data/app/pb_kits/playbook/pb_layout/subcomponents/_game.tsx +74 -43
  141. data/app/pb_kits/playbook/pb_layout/subcomponents/_participant.tsx +79 -0
  142. data/app/pb_kits/playbook/pb_layout/subcomponents/_round.tsx +21 -4
  143. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.jsx +52 -0
  144. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.md +1 -0
  145. data/app/pb_kits/playbook/pb_line_graph/docs/example.yml +1 -0
  146. data/app/pb_kits/playbook/pb_line_graph/docs/index.js +1 -0
  147. data/app/pb_kits/playbook/pb_line_graph/lineGraphTheme.ts +110 -0
  148. data/app/pb_kits/playbook/pb_overlay/_overlay.scss +83 -22
  149. data/app/pb_kits/playbook/pb_overlay/_overlay.tsx +39 -7
  150. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.jsx +63 -0
  151. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.md +3 -0
  152. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md +1 -7
  153. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_background.jsx +49 -0
  154. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_background.md +1 -0
  155. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_opacity.jsx +81 -0
  156. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_opacity.md +1 -0
  157. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.jsx +39 -0
  158. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.md +1 -0
  159. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.jsx +40 -0
  160. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.md +5 -0
  161. data/app/pb_kits/playbook/pb_overlay/docs/example.yml +5 -0
  162. data/app/pb_kits/playbook/pb_overlay/docs/index.js +5 -0
  163. data/app/pb_kits/playbook/pb_overlay/overlay.test.jsx +39 -1
  164. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +13 -0
  165. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +3 -1
  166. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.html.erb +10 -0
  167. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.jsx +20 -0
  168. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.md +1 -0
  169. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx +8 -1
  170. data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +2 -0
  171. data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +1 -0
  172. data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb +3 -0
  173. data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.test.js +19 -0
  174. data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.html.erb +46 -0
  175. data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.md +1 -0
  176. data/app/pb_kits/playbook/pb_popover/docs/example.yml +1 -0
  177. data/app/pb_kits/playbook/pb_popover/index.ts +13 -1
  178. data/app/pb_kits/playbook/pb_popover/popover.rb +2 -0
  179. data/app/pb_kits/playbook/pb_select/_select.scss +10 -0
  180. data/app/pb_kits/playbook/pb_select/docs/_select_error.html.erb +1 -1
  181. data/app/pb_kits/playbook/pb_select/docs/_select_error.jsx +7 -2
  182. data/app/pb_kits/playbook/pb_table/_table.tsx +2 -2
  183. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.md +3 -1
  184. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.md +3 -1
  185. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md +3 -1
  186. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md +3 -1
  187. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.html.erb +34 -0
  188. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_rails.md +1 -0
  189. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating.html.erb +36 -0
  190. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_rails.md +1 -0
  191. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_react.md +1 -1
  192. data/app/pb_kits/playbook/pb_table/docs/example.yml +2 -0
  193. data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss +1 -1
  194. data/app/pb_kits/playbook/pb_table/styles/_headers.scss +19 -7
  195. data/app/pb_kits/playbook/pb_table/table.rb +13 -1
  196. data/app/pb_kits/playbook/pb_table/table_header.rb +13 -1
  197. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +13 -5
  198. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.html.erb +1 -1
  199. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.jsx +9 -1
  200. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.jsx +94 -0
  201. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.md +1 -0
  202. data/app/pb_kits/playbook/pb_text_input/docs/example.yml +2 -0
  203. data/app/pb_kits/playbook/pb_text_input/docs/index.js +1 -0
  204. data/app/pb_kits/playbook/pb_text_input/inputMask.ts +8 -1
  205. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.html.erb +5 -1
  206. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx +7 -1
  207. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.html.erb +8 -1
  208. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.jsx +6 -2
  209. data/dist/chunks/_typeahead-D8CsVBZO.js +22 -0
  210. data/dist/chunks/_weekday_stacked-D3oLTSkH.js +45 -0
  211. data/dist/chunks/lazysizes-B7xYodB-.js +1 -0
  212. data/dist/chunks/lib-BmTAc7Nc.js +29 -0
  213. data/dist/chunks/{pb_form_validation-BiHyZedy.js → pb_form_validation-BWjy4bFn.js} +1 -1
  214. data/dist/chunks/vendor.js +1 -1
  215. data/dist/menu.yml +2 -2
  216. data/dist/playbook-doc.js +19 -1
  217. data/dist/playbook-rails-react-bindings.js +1 -1
  218. data/dist/playbook-rails.js +1 -1
  219. data/dist/playbook.css +1 -1
  220. data/lib/playbook/version.rb +2 -2
  221. metadata +92 -21
  222. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.md +0 -5
  223. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.md +0 -1
  224. data/dist/chunks/_typeahead-CPM091Hj.js +0 -22
  225. data/dist/chunks/_weekday_stacked-BzIANIYX.js +0 -45
  226. data/dist/chunks/lazysizes-DHz07jlL.js +0 -1
  227. data/dist/chunks/lib-Bg2KFzpz.js +0 -29
  228. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_default_rails.html.erb → _draggable_default.html.erb} +0 -0
  229. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_default.md → _draggable_default_react.md} +0 -0
  230. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_multiple_containers_rails.html.erb → _draggable_multiple_containers.html.erb} +0 -0
  231. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_multiple_containers.md → _draggable_multiple_containers_react.md} +0 -0
  232. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_cards_rails.html.erb → _draggable_with_cards.html.erb} +0 -0
  233. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_cards.md → _draggable_with_cards_react.md} +0 -0
  234. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_list_rails.html.erb → _draggable_with_list.html.erb} +0 -0
  235. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_list.md → _draggable_with_list_react.md} +0 -0
  236. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_selectable_list_rails.html.erb → _draggable_with_selectable_list.html.erb} +0 -0
  237. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_selectable_list.md → _draggable_with_selectable_list_react.md} +0 -0
  238. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_table.md → _draggable_with_table_rails.md} +0 -0
@@ -128,6 +128,58 @@ const DraggableKitWithCard = () => {
128
128
  );
129
129
  };
130
130
 
131
+ const DraggableWithLineVertical = () => {
132
+ const [initialState, setInitialState] = useState(data);
133
+ return (
134
+ <div data-testid={testId}>
135
+ <DraggableProvider
136
+ dropZone={{ type: "line" }}
137
+ initialItems={data}
138
+ onReorder={(items) => setInitialState(items)}
139
+ >
140
+ <Draggable>
141
+ <Draggable.Container>
142
+ {initialState.map(({ id, text }) => (
143
+ <Draggable.Item
144
+ dragId={id}
145
+ key={id}
146
+ >
147
+ {text}
148
+ </Draggable.Item>
149
+ ))}
150
+ </Draggable.Container>
151
+ </Draggable>
152
+ </DraggableProvider>
153
+ </div>
154
+ );
155
+ };
156
+
157
+ const DraggableWithLineHorizontal = () => {
158
+ const [initialState, setInitialState] = useState(data);
159
+ return (
160
+ <div data-testid={testId}>
161
+ <DraggableProvider
162
+ dropZone={{ type: "line", direction: "horizontal" }}
163
+ initialItems={data}
164
+ onReorder={(items) => setInitialState(items)}
165
+ >
166
+ <Draggable>
167
+ <Draggable.Container>
168
+ {initialState.map(({ id, text }) => (
169
+ <Draggable.Item
170
+ dragId={id}
171
+ key={id}
172
+ >
173
+ {text}
174
+ </Draggable.Item>
175
+ ))}
176
+ </Draggable.Container>
177
+ </Draggable>
178
+ </DraggableProvider>
179
+ </div>
180
+ );
181
+ };
182
+
131
183
  test("generated default kit and classname", () => {
132
184
  render(<DefaultDraggableKit />);
133
185
  const kit = screen.getByTestId(testId);
@@ -188,3 +240,19 @@ test("generated dragHandle with Card", () => {
188
240
  const dragHandle = card.querySelector(".pb_custom_icon");
189
241
  expect(dragHandle).toBeInTheDocument();
190
242
  });
243
+
244
+ test("line dropZone with default direction applies 'line_vertical' class to container", () => {
245
+ render(<DraggableWithLineVertical />);
246
+ const kit = screen.getByTestId(testId);
247
+ const container = kit.querySelector(".pb_draggable_container");
248
+
249
+ expect(container).toHaveClass("line_vertical");
250
+ });
251
+
252
+ test("line dropZone with horizontal direction applies 'line_horizontal' class to container", () => {
253
+ render(<DraggableWithLineHorizontal />);
254
+ const kit = screen.getByTestId(testId);
255
+ const container = kit.querySelector(".pb_draggable_container");
256
+
257
+ expect(container).toHaveClass("line_horizontal");
258
+ });
@@ -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,4 +1,4 @@
1
- <%
1
+ <%
2
2
  options = [
3
3
  { label: 'United States', value: 'United States', id: 'us' },
4
4
  { label: 'Canada', value: 'Canada', id: 'ca' },
@@ -6,4 +6,7 @@
6
6
  ]
7
7
  %>
8
8
 
9
- <%= pb_rails("dropdown", props: { error: "Please make a valid selection", options: options }) %>
9
+ <%= pb_rails("dropdown", props: {
10
+ error: raw(pb_rails("icon", props: { icon: "warning" }) + " Please make a valid selection"),
11
+ options: options
12
+ }) %>
@@ -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",
@@ -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;
@@ -0,0 +1,41 @@
1
+ <%=
2
+ pb_rails("filter", props: {
3
+ id: "filter_within_trubo_frames",
4
+ position: "top",
5
+ filters: [
6
+ { name: "name", value: "John Wick" },
7
+ { name: "city", value: "San Francisco"}
8
+ ],
9
+ sort_menu: [
10
+ { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
11
+ { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
12
+ { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
13
+ ],
14
+ template: "default",
15
+ results: 1,
16
+ popover_props: { append_to: "parent" },
17
+ }) do
18
+ %>
19
+ <%
20
+ example_collection = [
21
+ OpenStruct.new(name: "USA", value: 1),
22
+ OpenStruct.new(name: "Canada", value: 2),
23
+ OpenStruct.new(name: "Brazil", value: 3),
24
+ OpenStruct.new(name: "Philippines", value: 4),
25
+ OpenStruct.new(name: "A galaxy far far away, like really far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...", value: 5)
26
+ ]
27
+ %>
28
+ <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
29
+ <%= form.text_field :example_text_field, props: { label: true } %>
30
+ <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: {max_width: "sm", label: true } %>
31
+
32
+ <%= form.actions do |action| %>
33
+ <%= action.submit props: {
34
+ text: "Apply",
35
+ data: {
36
+ disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
37
+ },}%>
38
+ <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
39
+ <% end %>
40
+ <% end %>
41
+ <% end %>
@@ -0,0 +1 @@
1
+ By default, the filter popover attaches to the `<body>`. To attach it elsewhere, like inside a Turbo Frame, pass the `append_to` prop through `popover_props`. Set it to `"parent"` to place the tooltip inside its parent element, or pass any CSS selector (`#id` or `.class`) to specify a custom container.
@@ -11,6 +11,7 @@ examples:
11
11
  - filter_max_height: Max Height for Popover Inside of Filter
12
12
  - filter_placement: Filter Placement
13
13
  - filter_popover_props: Popover Props
14
+ - filter_within_turbo_frames: Within Turbo Frames
14
15
 
15
16
  react:
16
17
  - filter_default: Default
@@ -23,35 +23,39 @@
23
23
  @mixin error-state-right-side-select-kit {
24
24
  &:has(.pb_text_input_kit:not(.error)):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper.error),
25
25
  &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper) {
26
- align-items: flex-start;
27
-
28
- .pb_select_kit_wrapper {
29
- padding-top: $space_md;
30
- margin-top: 2px;
26
+ &:not(:has(.pb_phone_number_input)) {
27
+ align-items: flex-start;
31
28
 
32
- .pb_select_kit_caret {
29
+ .pb_select_kit_wrapper {
33
30
  padding-top: $space_md;
31
+ margin-top: 2px;
32
+
33
+ .pb_select_kit_caret {
34
+ padding-top: $space_md;
35
+ }
34
36
  }
35
- }
36
37
 
37
- .pb_select_kit_wrapper.error {
38
- padding-top: $space_md;
39
- margin-top: 2px;
38
+ .pb_select_kit_wrapper.error {
39
+ padding-top: $space_md;
40
+ margin-top: 2px;
40
41
 
41
- .pb_select_kit_caret {
42
- padding-top: $space_xl;
42
+ .pb_select_kit_caret {
43
+ padding-top: $space_xl;
44
+ }
43
45
  }
44
46
  }
45
47
  }
46
48
  }
47
49
 
48
50
  @mixin error-state-left-side-select-kit {
49
- &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper):has(.pb_phone_number_input):has(.pb_text_input_kit.error) {
50
- align-items: flex-start;
51
+ &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper):has(.pb_text_input_kit.error) {
52
+ &:not(:has(.pb_phone_number_input)) {
53
+ align-items: flex-start;
51
54
 
52
- .pb_text_input_kit.error {
53
- padding-top: $space_md;
54
- margin-top: 2px;
55
+ .pb_text_input_kit.error {
56
+ padding-top: $space_md;
57
+ margin-top: 2px;
58
+ }
55
59
  }
56
60
  }
57
- }
61
+ }