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
@@ -8,10 +8,31 @@
8
8
  @import "../tokens/screen_sizes";
9
9
  @import "../tokens/shadows";
10
10
  @import "../tokens/positioning";
11
+ @import "./scss_partials/advanced_table_sticky_mixin";
11
12
 
12
13
  .pb_advanced_table {
13
14
  $border-color: 1px solid $border_light;
14
15
 
16
+ // Base vertical border color variable setup
17
+ --column-border-color: #{$border_light};
18
+
19
+ // Define color tokens once
20
+ $border_color_options: (
21
+ "text_lt_default": $text_lt_default,
22
+ "text_lt_light": $text_lt_light,
23
+ "text_lt_lighter": $text_lt_lighter,
24
+ "text_dk_default": $text_dk_default,
25
+ "text_dk_light": $text_dk_light,
26
+ "text_dk_lighter": $text_dk_lighter
27
+ );
28
+
29
+ // Generate classes for each color option
30
+ @each $color_name, $color_value in $border_color_options {
31
+ &.column-group-border-#{$color_name} {
32
+ --column-border-color: #{$color_value};
33
+ }
34
+ }
35
+
15
36
  [id$="-span"] {
16
37
  word-wrap: normal;
17
38
  }
@@ -93,8 +114,8 @@
93
114
  border-right: 1px solid $border_light !important;
94
115
  }
95
116
  .table-header-cells-custom {
96
- text-align:center;
97
- [class^=pb_checkbox_kit] .pb_checkbox_label {
117
+ text-align: center;
118
+ [class^="pb_checkbox_kit"] .pb_checkbox_label {
98
119
  padding-left: 0px;
99
120
  }
100
121
  }
@@ -104,7 +125,7 @@
104
125
  }
105
126
  // Right align header content of first data column in selectable row no subrow setup
106
127
  &.selectable-rows-enabled {
107
- tr {
128
+ tr {
108
129
  th:nth-child(2),
109
130
  .pb_flex_kit_orientation_row_justify_content_start_align_items_center_spacing_none.gap_none {
110
131
  justify-content: flex-end;
@@ -122,13 +143,20 @@
122
143
  }
123
144
 
124
145
  // Set fixed width for checkbox column
125
- &.table-header-cells-custom,
146
+ &.table-header-cells-custom,
126
147
  &.checkbox-cell.checkbox-cell-header {
127
148
  width: 40px !important;
128
149
  min-width: 40px !important;
129
150
  box-sizing: border-box !important;
130
151
  }
131
152
  }
153
+ .expand-by-depth-dropdown-wrapper {
154
+ position: unset !important;
155
+ }
156
+ .expand-by-depth-dropdown {
157
+ width: unset !important;
158
+ text-align: left;
159
+ }
132
160
  }
133
161
 
134
162
  .pb_advanced_table_body {
@@ -145,7 +173,7 @@
145
173
  .checkbox-cell {
146
174
  display: flex;
147
175
  justify-content: center;
148
- [class^=pb_checkbox_kit] .pb_checkbox_label {
176
+ [class^="pb_checkbox_kit"] .pb_checkbox_label {
149
177
  padding-left: 0px;
150
178
  }
151
179
  }
@@ -173,7 +201,7 @@
173
201
  }
174
202
  }
175
203
  td {
176
- [class^=pb_text_input_kit] .text_input_wrapper input {
204
+ [class^="pb_text_input_kit"] .text_input_wrapper input {
177
205
  padding: 0 $space_xxs;
178
206
  font-size: 14px;
179
207
  text-align: right;
@@ -230,12 +258,12 @@
230
258
  max-height: 1920px;
231
259
  overflow-y: auto;
232
260
  }
233
-
261
+
234
262
  // Fullscreen
235
263
  &.advanced-table-allow-fullscreen {
236
264
  transition: all 0.3s ease;
237
265
  }
238
-
266
+
239
267
  &.advanced-table-fullscreen {
240
268
  background-color: $bg_light;
241
269
  box-sizing: border-box;
@@ -248,7 +276,10 @@
248
276
  z-index: $z_10;
249
277
 
250
278
  .pb_table {
251
- th, td, div, button {
279
+ th,
280
+ td,
281
+ div,
282
+ button {
252
283
  font-size: calc(100%);
253
284
  }
254
285
  box-sizing: border-box;
@@ -266,7 +297,7 @@
266
297
  }
267
298
  }
268
299
  }
269
-
300
+
270
301
  .advanced-table-fullscreen-header {
271
302
  background-color: $white;
272
303
  height: 44px;
@@ -335,13 +366,133 @@
335
366
  }
336
367
  }
337
368
 
338
- // Vertical separator
369
+ // First column separator/border
339
370
  .table-header-cells:first-child,
340
371
  .table-header-cells-custom:first-child,
341
372
  td:first-child,
342
373
  .pb_table_td:first-child,
343
374
  .checkbox-cell.checkbox-cell-header:first-child {
344
- box-shadow: 1px 0px 0px 0px $border_light !important;
375
+ box-shadow: 1px 0px 0px 0px var(--column-border-color) !important;
376
+ }
377
+
378
+ // Color for collapsible trail
379
+ .collapsible-trail {
380
+ background-color: $border_light !important;
381
+ position: absolute;
382
+ top: 0;
383
+ bottom: 0;
384
+ width: 2px;
385
+ }
386
+
387
+ // Make sure all horizontal borders use the default border color
388
+ tr, th, td {
389
+ border-top-color: $border_light !important;
390
+ border-bottom-color: $border_light !important;
391
+ }
392
+
393
+ // Apply border colors when columnGroupBorderColor is set
394
+ &[class*="column-group-border-"] {
395
+ // For top-level column groups
396
+ .pb_advanced_table_header {
397
+ // The main column group headers
398
+ > tr:first-child {
399
+ th[colspan]:not([colspan="1"]):not(:last-child) {
400
+ border-right: 1px solid var(--column-border-color) !important;
401
+ }
402
+ }
403
+
404
+ // Subgroup headers
405
+ > tr:nth-child(2) {
406
+ th[colspan]:not([colspan="1"]):not(:last-child) {
407
+ border-right: 1px solid var(--column-border-color) !important;
408
+ }
409
+
410
+ // Last cell in each subgroup
411
+ th.last-header-cell:not(:last-child) {
412
+ border-right: 1px solid var(--column-border-color) !important;
413
+ }
414
+ }
415
+
416
+ // Individual column headers at subgroup boundaries
417
+ > tr:last-child {
418
+ // Last cell in each subgroup
419
+ th.last-header-cell:not(:last-child) {
420
+ border-right: 1px solid var(--column-border-color) !important;
421
+ }
422
+ }
423
+ }
424
+
425
+ // For data cells at column group boundaries
426
+ .pb_advanced_table_body {
427
+ // Apply to cells that are at column group boundaries
428
+ td.last-cell:not(:last-child),
429
+ .pb_table_td.last-cell:not(:last-child) {
430
+ border-right: 1px solid var(--column-border-color) !important;
431
+ }
432
+
433
+ // Virtualized row cells at column group boundaries
434
+ tr.virtualized-table-row {
435
+ td.last-cell:not(:last-child) {
436
+ border-right: 1px solid var(--column-border-color) !important;
437
+ }
438
+ }
439
+ }
440
+
441
+ // Sub-row headers
442
+ .toggle-content {
443
+ td {
444
+ border-bottom: 1px solid $border_light !important;
445
+ }
446
+ }
447
+ }
448
+
449
+ // Restore vertical border styling when verticalBorder is true
450
+ .pb_table[data-vertical-border="true"] {
451
+ .pb_advanced_table_header {
452
+ > tr:not(:first-child) {
453
+ th:not(:last-child) {
454
+ border-right: 1px solid $border_light !important;
455
+ }
456
+ }
457
+ }
458
+
459
+ .pb_advanced_table_body {
460
+ td:not(:last-child),
461
+ .pb_table_td:not(:last-child) {
462
+ border-right: 1px solid $border_light !important;
463
+ }
464
+ }
465
+
466
+ tr.virtualized-table-row {
467
+ td:not(:last-child) {
468
+ border-right: 1px solid $border_light !important;
469
+ }
470
+ }
471
+
472
+ // When both verticalBorder AND columnGroupBorderColor are set,
473
+ // override the default border-light with the custom color
474
+ &.pb_advanced_table[class*="column-group-border-"] {
475
+ .pb_advanced_table_header {
476
+ > tr:not(:first-child) {
477
+ th:not(:last-child) {
478
+ border-right: 1px solid var(--column-border-color) !important;
479
+ }
480
+ }
481
+ }
482
+
483
+ .pb_advanced_table_body {
484
+ td:not(:last-child),
485
+ .pb_table_td:not(:last-child) {
486
+ border-right: 1px solid var(--column-border-color) !important;
487
+ }
488
+ }
489
+
490
+ tr.virtualized-table-row {
491
+ td:not(:last-child) {
492
+ border-right: 1px solid var(--column-border-color) !important;
493
+ }
494
+ }
495
+ }
345
496
  }
346
497
 
347
498
  @include chrome_styles($border-color);
@@ -364,88 +515,74 @@
364
515
  height: auto;
365
516
  }
366
517
 
367
- .collapsible-trail {
368
- background-color: $border_light;
369
- position: absolute;
370
- top: 0;
371
- bottom: 0;
372
- width: 2px;
518
+ // Mixin to apply sticky column styles for different color modes and themes
519
+ @mixin apply-sticky-colors($theme) {
520
+ @each $color_name, $color_value in $border_color_options {
521
+ &.column-group-border-#{$color_name} {
522
+ @if $theme == "light" {
523
+ @include advanced-table-sticky-mixin(
524
+ $color_value,
525
+ $white,
526
+ lighten($silver, $opacity_7)
527
+ );
528
+ } @else if $theme == "dark" {
529
+ @include advanced-table-sticky-mixin(
530
+ $color_value,
531
+ $bg_dark_card,
532
+ $bg_dark
533
+ );
534
+ }
535
+ }
536
+ }
537
+ }
538
+
539
+ // Sticky Left Columns Styling
540
+ &[class*="advanced-table-sticky-left-columns"] {
541
+ overflow-x: scroll;
542
+ .sticky-left {
543
+ position: sticky !important;
544
+ z-index: 2;
545
+ background-color: $white;
546
+ box-shadow: $shadow_deep;
547
+ }
548
+ @include advanced-table-sticky-mixin(
549
+ $border_light,
550
+ $white,
551
+ lighten($silver, $opacity_7)
552
+ );
553
+
554
+ // Apply border colors for sticky columns
555
+ @include apply-sticky-colors("light");
373
556
  }
374
557
 
375
558
  // Responsive Styles
376
559
  @media only screen and (max-width: $screen-xl-min) {
377
560
  &[class*="advanced-table-responsive-scroll"] {
378
- border-radius: 4px;
379
- box-shadow: 1px 0 0 0px $border_light,
380
- -1px 0 0 0px $border_light;
381
- display: block;
382
561
  overflow-x: auto;
383
562
  width: 100%;
384
- [class^=pb_table].table-sm.table-card thead tr th:first-child,
385
- [class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:first-child {
386
- border-left-width: 0px !important;
387
- }
388
- [class^=pb_table].table-sm.table-card thead tr th:last-child,
389
- [class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:last-child {
390
- border-right-width: 0px;
391
- }
392
- [class^=pb_table].table-sm.table-card tbody tr:last-child td:first-child,
393
- [class^=pb_table].table-sm.table-card tbody tr:last-child td:last-child {
394
- border-radius: 0 0 0 0;
395
- }
396
- .table-header-cells:first-child,
397
- td:first-child,
398
- .pb_table_td:first-child,
399
- .checkbox-cell.checkbox-cell-header:first-child,
400
- [class*="pinned-left"] {
401
- background-color: $white;
402
- box-shadow: $shadow_deep !important;
403
- position: sticky !important;
404
- left: 0;
405
- z-index: 2;
406
- }
407
- .bg-silver td:first-child {
408
- background-color: lighten($silver, $opacity_7);
409
- }
410
- .bg-white td:first-child {
411
- background-color: $white;
412
- }
413
563
 
414
- .virtualized-table-row {
415
- &.bg-silver td:first-child {
416
- background-color: lighten($silver, $opacity_7);
417
- }
418
- &.bg-white td:first-child {
419
- background-color: $white;
420
- }
421
- &.bg-row-selection td:first-child {
422
- background-color: $info_subtle;
423
- }
424
- }
564
+ // These are the responsive borders that should NOT inherit the custom color
565
+ @include advanced-table-sticky-mixin(
566
+ $border_light,
567
+ $white,
568
+ lighten($silver, $opacity_7)
569
+ );
425
570
 
426
- .row-selection-actions-card {
427
- border-right-width: 0px;
428
- border-left-width: 0px;
429
- position: sticky;
430
- top: 0;
431
- left: 0;
432
- border-radius: unset;
433
- }
434
- .checkbox-cell {
435
- display: table-cell !important;
571
+ // Override any columnGroupBorderColor inheritance for responsive borders
572
+ .sticky-left {
573
+ box-shadow: $shadow_deep !important;
436
574
  }
437
- .sticky-header {
438
- thead {
439
- th:first-child {
440
- box-shadow: 1px 0 10px -2px $border_light !important;
441
- }
442
- }
443
- .pb_advanced_table_header {
444
- box-shadow: none !important;
575
+
576
+ .pb_advanced_table_header,
577
+ .pb_advanced_table_body {
578
+ th.sticky-left,
579
+ td.sticky-left {
580
+ border-right: 1px solid $border_light !important;
445
581
  }
446
582
  }
447
583
  }
448
584
  }
585
+
449
586
  @media only screen and (min-width: $screen-xl-min) {
450
587
  &[class*="advanced-table-responsive-scroll"] {
451
588
  overflow-x: visible;
@@ -453,6 +590,20 @@
453
590
  }
454
591
 
455
592
  &.dark {
593
+ // Override default border color for dark mode
594
+ --column-border-color: #{$border_dark};
595
+
596
+ // Dark mode default border colors for trails and horizontal borders
597
+ .collapsible-trail {
598
+ background-color: $border_dark !important;
599
+ }
600
+
601
+ // Make sure all horizontal borders use the default border color in dark mode
602
+ tr, th, td {
603
+ border-top-color: $border_dark !important;
604
+ border-bottom-color: $border_dark !important;
605
+ }
606
+
456
607
  .bg-white {
457
608
  background: $bg_dark_card;
458
609
  }
@@ -480,20 +631,115 @@
480
631
  }
481
632
  }
482
633
 
483
- .table-header-cells:first-child, td:first-child, .pb_table_td:first-child {
484
- box-shadow: 1px 0px 0px 0px $border_dark !important;
634
+ .table-header-cells:first-child,
635
+ .table-header-cells-custom:first-child,
636
+ td:first-child,
637
+ .pb_table_td:first-child,
638
+ .checkbox-cell.checkbox-cell-header:first-child {
639
+ box-shadow: 1px 0px 0px 0px var(--column-border-color) !important;
485
640
  }
486
641
 
487
- .collapsible-trail {
488
- background-color: $border_dark !important;
642
+ // Apply border colors in dark mode
643
+ &[class*="column-group-border-"] {
644
+ // For top-level column groups (ENROLLMENT DATA, PERFORMANCE DATA)
645
+ .pb_advanced_table_header {
646
+ // The main column group headers - NOT the last column
647
+ > tr:first-child {
648
+ th[colspan]:not([colspan="1"]):not(:last-child) {
649
+ border-right: 1px solid var(--column-border-color) !important;
650
+ }
651
+ }
652
+
653
+ // Subgroup headers
654
+ > tr:nth-child(2) {
655
+ th[colspan]:not([colspan="1"]):not(:last-child) {
656
+ border-right: 1px solid var(--column-border-color) !important;
657
+ }
658
+
659
+ // Last cell in each subgroup
660
+ th.last-header-cell:not(:last-child) {
661
+ border-right: 1px solid var(--column-border-color) !important;
662
+ }
663
+ }
664
+
665
+ // Individual column headers at subgroup boundaries
666
+ > tr:last-child {
667
+ // Last cell in each subgroup
668
+ th.last-header-cell:not(:last-child) {
669
+ border-right: 1px solid var(--column-border-color) !important;
670
+ }
671
+ }
672
+ }
673
+
674
+ // For data cells at column group boundaries in dark mode
675
+ .pb_advanced_table_body {
676
+ // Apply to cells that are at column group boundaries
677
+ td.last-cell:not(:last-child),
678
+ .pb_table_td.last-cell:not(:last-child) {
679
+ border-right: 1px solid var(--column-border-color) !important;
680
+ }
681
+
682
+ // Virtualized row cells at column group boundaries
683
+ tr.virtualized-table-row {
684
+ td.last-cell:not(:last-child) {
685
+ border-right: 1px solid var(--column-border-color) !important;
686
+ }
687
+ }
688
+ }
689
+
690
+ // Sub-row headers
691
+ .toggle-content {
692
+ td {
693
+ border-bottom: 1px solid $border_dark !important;
694
+ }
695
+ }
489
696
  }
490
697
 
491
- .sort-button-icon, .header-sort-button > div, .pb_th_link {
698
+ // Restore vertical border styling in dark mode when verticalBorder is true
699
+ .pb_table[data-vertical-border="true"] {
700
+ .pb_advanced_table_header {
701
+ > tr:not(:first-child) {
702
+ th:not(:last-child) {
703
+ border-right: 1px solid $border_dark !important;
704
+ }
705
+ }
706
+ }
707
+
708
+ .pb_advanced_table_body {
709
+ td:not(:last-child),
710
+ .pb_table_td:not(:last-child) {
711
+ border-right: 1px solid $border_dark !important;
712
+ }
713
+ }
714
+
715
+ // When both verticalBorder AND columnGroupBorderColor are set in dark mode,
716
+ // override the default border-dark with the custom color
717
+ &.pb_advanced_table[class*="column-group-border-"] {
718
+ .pb_advanced_table_header {
719
+ > tr:not(:first-child) {
720
+ th:not(:last-child) {
721
+ border-right: 1px solid var(--column-border-color) !important;
722
+ }
723
+ }
724
+ }
725
+
726
+ .pb_advanced_table_body {
727
+ td:not(:last-child),
728
+ .pb_table_td:not(:last-child) {
729
+ border-right: 1px solid var(--column-border-color) !important;
730
+ }
731
+ }
732
+ }
733
+ }
734
+
735
+ .sort-button-icon,
736
+ .header-sort-button > div,
737
+ .pb_th_link {
492
738
  color: $white !important;
493
739
  }
494
740
 
495
741
  .gray-icon {
496
- color: $text_dk_light !important;
742
+ color: $text_dk_light !important;
497
743
  }
498
744
 
499
745
  .sticky-header {
@@ -515,15 +761,6 @@
515
761
  }
516
762
  }
517
763
 
518
- // Vertical separator
519
- .table-header-cells:first-child,
520
- .table-header-cells-custom:first-child,
521
- td:first-child,
522
- .pb_table_td:first-child,
523
- .checkbox-cell.checkbox-cell-header:first-child {
524
- box-shadow: 1px 0px 0px 0px $border_dark !important;
525
- }
526
-
527
764
  // Fullscreen
528
765
  &.advanced-table-fullscreen {
529
766
  background: $bg_dark;
@@ -536,63 +773,48 @@
536
773
  z-index: $z_10;
537
774
  }
538
775
 
776
+ &[class*="advanced-table-sticky-left-columns"] {
777
+ .sticky-left {
778
+ background-color: $bg_dark;
779
+ }
780
+ @include advanced-table-sticky-mixin(
781
+ $border_dark,
782
+ $bg_dark_card,
783
+ $bg_dark
784
+ );
785
+ }
786
+
539
787
  // Dark Mode Responsive Styles
540
788
  @media only screen and (max-width: $screen-xl-min) {
541
789
  &[class*="advanced-table-responsive-scroll"] {
542
- border-radius: 4px;
543
- box-shadow: 1px 0 0 0px $border_dark,
544
- -1px 0 0 0px $border_dark;
545
- display: block;
546
- overflow-x: scroll;
547
- width: 100%;
548
- [class^=pb_table].table-sm.table-card thead tr th:first-child,
549
- [class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:first-child {
550
- border-left-width: 0px;
551
- }
552
- [class^=pb_table].table-sm.table-card thead tr th:last-child,
553
- [class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:last-child {
554
- border-right-width: 0px;
555
- }
556
- [class^=pb_table].table-sm.table-card tbody tr:last-child td:first-child,
557
- [class^=pb_table].table-sm.table-card tbody tr:last-child td:last-child {
558
- border-radius: 0 0 0 0;
559
- }
560
- .table-header-cells:first-child,
561
- td:first-child,
562
- .pb_table_td:first-child,
563
- .checkbox-cell.checkbox-cell-header:first-child,
564
- [class*="pinned-left"] {
565
- background: $bg_dark_card;
566
- border-right: $border_dark;
567
- box-shadow: $shadow_deep !important;
568
- position: sticky !important;
569
- }
570
- .bg-silver td:first-child {
571
- background-color: $bg_dark;
572
- }
573
- .bg-white td:first-child {
574
- background-color: $bg_dark_card;
575
- }
576
-
577
- // Dark mode virtualized rows
578
- .virtualized-table-row {
579
- &.bg-silver td:first-child {
580
- background-color: $bg_dark;
581
- }
582
- &.bg-white td:first-child {
583
- background-color: $bg_dark_card;
584
- }
585
- }
586
-
587
790
  .sticky-header {
588
791
  thead {
589
792
  th:first-child {
590
- background: $bg_dark;
591
- box-shadow: 1px 0 10px -2px $border_dark !important;
793
+ background: $bg_dark_card;
592
794
  }
593
795
  }
594
796
  }
797
+
798
+ // These are the responsive borders that should NOT inherit the custom color
799
+ @include advanced-table-sticky-mixin(
800
+ $border_dark,
801
+ $bg_dark_card,
802
+ $bg_dark
803
+ );
804
+
805
+ // Override any columnGroupBorderColor inheritance for responsive borders in dark mode
806
+ .sticky-left {
807
+ box-shadow: $shadow_deep !important;
808
+ }
809
+
810
+ .pb_advanced_table_header,
811
+ .pb_advanced_table_body {
812
+ th.sticky-left,
813
+ td.sticky-left {
814
+ border-right: 1px solid $border_dark !important;
815
+ }
816
+ }
595
817
  }
596
818
  }
597
819
  }
598
- }
820
+ }