playbook_ui 14.21.2 → 14.22.0.pre.alpha.PLAY2132phonenumberinputvalidationtooaggressive8863

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 (231) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +0 -1
  3. data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +11 -9
  4. data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx +20 -4
  5. data/app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx +32 -11
  6. data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +25 -5
  7. data/app/pb_kits/playbook/pb_advanced_table/Components/VirtualizedTableView.tsx +36 -16
  8. data/app/pb_kits/playbook/pb_advanced_table/Context/AdvancedTableContext.tsx +18 -5
  9. data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableActions.ts +37 -17
  10. data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts +32 -7
  11. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx +3 -0
  12. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx +91 -40
  13. data/app/pb_kits/playbook/pb_advanced_table/Utilities/CellRendererUtils.tsx +4 -1
  14. data/app/pb_kits/playbook/pb_advanced_table/Utilities/ColumnStylingHelper.ts +15 -0
  15. data/app/pb_kits/playbook/pb_advanced_table/Utilities/TableContainerStyles.ts +3 -2
  16. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +68 -6
  17. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +42 -18
  18. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +105 -2
  19. data/app/pb_kits/playbook/pb_advanced_table/advanced_table_action_bar.js +36 -0
  20. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_sort.html.erb +1 -1
  21. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.html.erb +1 -1
  22. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.html.erb +1 -1
  23. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.jsx +51 -0
  24. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.md +7 -0
  25. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.jsx +77 -0
  26. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.md +1 -0
  27. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers_rails.html.erb +63 -0
  28. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers_rails.md +1 -0
  29. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.html.erb +38 -0
  30. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.md +7 -0
  31. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.jsx +65 -0
  32. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.md +5 -0
  33. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_infinite_scroll.md +3 -0
  34. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.html.erb +1 -1
  35. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows.jsx +1 -1
  36. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_react.md +5 -3
  37. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.jsx +64 -0
  38. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.md +7 -0
  39. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions.jsx +2 -2
  40. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions_rails.html.erb +3 -2
  41. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.html.erb +1 -1
  42. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.jsx +69 -0
  43. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.md +1 -0
  44. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +8 -0
  45. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +6 -0
  46. data/app/pb_kits/playbook/pb_advanced_table/flat_advanced_table.js +60 -84
  47. data/app/pb_kits/playbook/pb_advanced_table/index.js +125 -213
  48. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss +16 -1
  49. data/app/pb_kits/playbook/pb_advanced_table/table_action_bar.html.erb +1 -1
  50. data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +1 -1
  51. data/app/pb_kits/playbook/pb_advanced_table/table_header.rb +5 -0
  52. data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +3 -3
  53. data/app/pb_kits/playbook/pb_advanced_table/table_row.rb +33 -0
  54. data/app/pb_kits/playbook/pb_badge/_badge.scss +5 -6
  55. data/app/pb_kits/playbook/pb_bar_graph/barGraphTheme.ts +106 -0
  56. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx +33 -15
  57. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx +33 -15
  58. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.jsx +52 -22
  59. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.md +3 -0
  60. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.jsx +12 -16
  61. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.jsx +31 -15
  62. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.jsx +39 -16
  63. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.jsx +86 -38
  64. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx +32 -15
  65. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx +72 -22
  66. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md +1 -1
  67. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.jsx +31 -15
  68. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.jsx +37 -16
  69. data/app/pb_kits/playbook/pb_bar_graph/docs/_description.md +1 -3
  70. data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +1 -3
  71. data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +0 -2
  72. data/app/pb_kits/playbook/pb_circle_chart/circleChartTheme.ts +36 -1
  73. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx +71 -26
  74. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx +29 -16
  75. data/app/pb_kits/playbook/pb_circle_chart/docs/{_circle_chart_colors.md → _circle_chart_colors_rails.md} +1 -1
  76. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors_react.md +2 -0
  77. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx +28 -16
  78. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.md +4 -2
  79. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx +23 -15
  80. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.jsx +81 -51
  81. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +103 -75
  82. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.md +3 -6
  83. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx +19 -13
  84. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx +30 -17
  85. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.jsx +34 -20
  86. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.jsx +29 -20
  87. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx +28 -20
  88. data/app/pb_kits/playbook/pb_circle_chart/docs/_description.md +1 -0
  89. data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +0 -1
  90. data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +0 -1
  91. data/app/pb_kits/playbook/pb_contact/contact.test.js +2 -2
  92. data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts +1 -39
  93. data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts +1 -39
  94. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.html.erb +3 -3
  95. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.jsx +7 -4
  96. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx +6 -3
  97. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx +6 -3
  98. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_rails.html.erb +3 -3
  99. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.html.erb +3 -3
  100. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.jsx +7 -4
  101. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb +3 -3
  102. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx +7 -4
  103. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select.jsx +19 -10
  104. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display.jsx +19 -10
  105. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display_rails.html.erb +10 -10
  106. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_rails.html.erb +10 -10
  107. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.html.erb +10 -10
  108. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.jsx +20 -11
  109. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_custom_options.html.erb +3 -3
  110. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_custom_options.jsx +8 -8
  111. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_default.html.erb +10 -10
  112. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_default.jsx +23 -14
  113. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.html.erb +3 -3
  114. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.jsx +6 -3
  115. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.jsx +6 -3
  116. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure_rails.html.erb +3 -3
  117. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.html.erb +3 -3
  118. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.jsx +6 -3
  119. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.html.erb +3 -3
  120. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +3 -3
  121. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.html.erb +4 -4
  122. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.jsx +4 -4
  123. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +4 -4
  124. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb +4 -4
  125. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options.html.erb +52 -0
  126. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options.jsx +99 -0
  127. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options_rails.md +1 -0
  128. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options_react.md +1 -0
  129. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx +3 -3
  130. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options_rails.html.erb +3 -3
  131. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb +3 -3
  132. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx +3 -3
  133. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options.html.erb +28 -0
  134. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options.jsx +47 -0
  135. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options_rails.md +1 -0
  136. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options_react.md +1 -0
  137. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx +3 -3
  138. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger_rails.html.erb +3 -3
  139. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.jsx +3 -3
  140. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb +3 -3
  141. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx +6 -3
  142. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.jsx +3 -3
  143. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.html.erb +3 -3
  144. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +4 -0
  145. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +3 -1
  146. data/app/pb_kits/playbook/pb_filter/Filter/FilterSection.tsx +49 -0
  147. data/app/pb_kits/playbook/pb_filter/Filter/FilterSidebar.tsx +69 -0
  148. data/app/pb_kits/playbook/pb_filter/Filter/index.tsx +13 -0
  149. data/app/pb_kits/playbook/pb_filter/_filter.scss +4 -0
  150. data/app/pb_kits/playbook/pb_filter/docs/_filter_sidebar.jsx +224 -0
  151. data/app/pb_kits/playbook/pb_filter/docs/example.yml +1 -0
  152. data/app/pb_kits/playbook/pb_filter/docs/index.js +1 -0
  153. data/app/pb_kits/playbook/pb_filter/filter.test.js +2 -2
  154. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +27 -17
  155. data/app/pb_kits/playbook/pb_table/_table.tsx +4 -4
  156. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.html.erb +8 -8
  157. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.jsx +8 -8
  158. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns_rails.md +1 -1
  159. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns_react.md +1 -1
  160. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.html.erb +12 -12
  161. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.jsx +12 -12
  162. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_rails.md +2 -2
  163. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_react.md +3 -3
  164. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns.html.erb +12 -12
  165. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns.jsx +12 -12
  166. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns_rails.md +2 -2
  167. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns_react.md +3 -3
  168. data/app/pb_kits/playbook/pb_table/index.ts +4 -4
  169. data/app/pb_kits/playbook/pb_table/styles/_table-card.scss +11 -0
  170. data/app/pb_kits/playbook/pb_table/styles/_vertical_border.scss +4 -0
  171. data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +34 -22
  172. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.html.erb +14 -0
  173. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.jsx +25 -0
  174. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_rails.md +1 -0
  175. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_react.md +1 -0
  176. data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +2 -0
  177. data/app/pb_kits/playbook/pb_tooltip/docs/index.js +1 -0
  178. data/app/pb_kits/playbook/pb_tooltip/index.js +59 -36
  179. data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +9 -2
  180. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.html.erb +18 -0
  181. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input_rails.md +1 -0
  182. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +1 -0
  183. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +3 -0
  184. data/dist/chunks/_circle_chart-C56zcOHC.js +1 -0
  185. data/dist/chunks/_typeahead-Do6525vz.js +22 -0
  186. data/dist/chunks/_weekday_stacked-CrFm3XuJ.js +45 -0
  187. data/dist/chunks/lazysizes-B7xYodB-.js +1 -0
  188. data/dist/chunks/lib-DYpq0k8j.js +29 -0
  189. data/dist/chunks/{pb_form_validation-DyvJ8iPe.js → pb_form_validation-BUOKwfvW.js} +1 -1
  190. data/dist/chunks/vendor.js +1 -1
  191. data/dist/menu.yml +0 -9
  192. data/dist/playbook-doc.js +3 -3
  193. data/dist/playbook-rails-react-bindings.js +1 -1
  194. data/dist/playbook-rails.js +1 -1
  195. data/dist/playbook.css +1 -1
  196. data/lib/playbook/version.rb +2 -2
  197. metadata +48 -38
  198. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx +0 -72
  199. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md +0 -6
  200. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx +0 -64
  201. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md +0 -1
  202. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx +0 -38
  203. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md +0 -1
  204. data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.scss +0 -14
  205. data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx +0 -119
  206. data/app/pb_kits/playbook/pb_treemap_chart/docs/_description.md +0 -5
  207. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.html.erb +0 -37
  208. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.jsx +0 -48
  209. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.md +0 -2
  210. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.html.erb +0 -37
  211. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.jsx +0 -47
  212. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.md +0 -3
  213. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.html.erb +0 -79
  214. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.jsx +0 -90
  215. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.md +0 -1
  216. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.html.erb +0 -54
  217. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.jsx +0 -65
  218. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.md +0 -3
  219. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.html.erb +0 -37
  220. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.jsx +0 -48
  221. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.md +0 -3
  222. data/app/pb_kits/playbook/pb_treemap_chart/docs/example.yml +0 -15
  223. data/app/pb_kits/playbook/pb_treemap_chart/docs/index.js +0 -5
  224. data/app/pb_kits/playbook/pb_treemap_chart/treemapChart.test.js +0 -63
  225. data/app/pb_kits/playbook/pb_treemap_chart/treemap_chart.html.erb +0 -1
  226. data/app/pb_kits/playbook/pb_treemap_chart/treemap_chart.rb +0 -48
  227. data/dist/chunks/_typeahead-BlPRej0F.js +0 -22
  228. data/dist/chunks/_weekday_stacked-CzxoxxCR.js +0 -45
  229. data/dist/chunks/lazysizes-DHz07jlL.js +0 -1
  230. data/dist/chunks/lib-D4vXIZF5.js +0 -29
  231. /data/app/pb_kits/playbook/pb_typeahead/docs/{_typeahead_preserve_input.md → _typeahead_preserve_input_react.md} +0 -0
@@ -0,0 +1,49 @@
1
+ import React from 'react'
2
+
3
+ import Collapsible from '../../pb_collapsible/_collapsible'
4
+ import Caption from '../../pb_caption/_caption'
5
+ import Body from '../../pb_body/_body'
6
+
7
+ type FilterSectionProps = {
8
+ children?: React.ReactChild[] | React.ReactChild,
9
+ collapsible?: boolean,
10
+ collapsed?: boolean,
11
+ headerText?: string,
12
+ }
13
+ const FilterSection = ({ children, collapsible = false, collapsed = true, headerText, }: FilterSectionProps): React.ReactElement => {
14
+ if (collapsible) {
15
+ return (
16
+ <Collapsible
17
+ collapsed={collapsed}
18
+ padding="none"
19
+ >
20
+ <Collapsible.Main
21
+ paddingX="sm"
22
+ paddingY="xs"
23
+ >
24
+ <Caption>{ headerText }</Caption>
25
+ </Collapsible.Main>
26
+ <Collapsible.Content
27
+ className="filter_section_collapsible"
28
+ paddingX="sm"
29
+ >
30
+ { children }
31
+ </Collapsible.Content>
32
+ </Collapsible>
33
+ )
34
+ }
35
+
36
+ return (
37
+ <Body
38
+ paddingTop="xs"
39
+ paddingX="sm"
40
+ >
41
+ <>
42
+ {headerText && <Caption marginBottom="sm">{ headerText }</Caption>}
43
+ { children }
44
+ </>
45
+ </Body>
46
+ )
47
+ }
48
+
49
+ export default FilterSection
@@ -0,0 +1,69 @@
1
+ import React from 'react'
2
+
3
+ import { FilterDescription } from './CurrentFilters'
4
+ import FilterBackground, { FilterBackgroundProps } from './FilterBackground'
5
+ import ResultsCount from './ResultsCount'
6
+
7
+ import Flex from '../../pb_flex/_flex'
8
+ import SectionSeparator from '../../pb_section_separator/_section_separator'
9
+ import Card from '../../pb_card/_card'
10
+ import Caption from '../../pb_caption/_caption'
11
+
12
+ export type FilterSidebarProps = {
13
+ children?: React.ReactChild[] | React.ReactChild,
14
+ filters?: FilterDescription,
15
+ results?: number,
16
+ } & FilterBackgroundProps
17
+
18
+ const FilterSidebar = ({
19
+ onCollapse,
20
+ onSortChange,
21
+ sortOptions,
22
+ sortValue,
23
+ filters,
24
+ results,
25
+ children,
26
+ dark,
27
+ isCollapsed,
28
+ maxHeight,
29
+ minWidth,
30
+ placement,
31
+ popoverProps,
32
+ ...bgProps
33
+ }: FilterSidebarProps): React.ReactElement => (
34
+ <FilterBackground
35
+ dark={dark}
36
+ {...bgProps}
37
+ >
38
+ <Card.Body
39
+ paddingX="sm"
40
+ paddingY="xs"
41
+ >
42
+ <Flex
43
+ align="center"
44
+ justify="between"
45
+ orientation="row"
46
+ >
47
+ <ResultsCount
48
+ dark={dark}
49
+ results={results}
50
+ title
51
+ />
52
+ <div onClick={onCollapse}>
53
+ <Caption
54
+ color="link"
55
+ cursor="pointer"
56
+ size="xs"
57
+ text={isCollapsed ? "Expand All" : "Collapse All"}
58
+ />
59
+ </div>
60
+ </Flex>
61
+ </Card.Body>
62
+ <SectionSeparator dark={dark} />
63
+ <>
64
+ { children }
65
+ </>
66
+ </FilterBackground>
67
+ )
68
+
69
+ export default FilterSidebar
@@ -1,18 +1,29 @@
1
1
  import React from 'react'
2
2
  import FilterSingle, { FilterSingleProps } from './FilterSingle'
3
3
  import FilterDouble, { FilterDoubleProps } from './FilterDouble'
4
+ import FilterSidebar, { FilterSidebarProps } from './FilterSidebar'
5
+ import FilterSection from './FilterSection'
4
6
 
5
7
  type FilterProps =
6
8
  | FilterSingleProps
7
9
  | (FilterDoubleProps & {
8
10
  double?: boolean,
9
11
  })
12
+ | (FilterSidebarProps & {
13
+ variant?: null | 'sidebar',
14
+ })
10
15
 
11
16
  const Filter = ({
12
17
  double = false,
18
+ variant,
13
19
  ...templateProps
14
20
  }: FilterProps): React.ReactElement => {
15
21
  const displayFilter = () => {
22
+ if (variant === 'sidebar') {
23
+ return (
24
+ <FilterSidebar {...templateProps} />
25
+ )
26
+ }
16
27
  if (double === true) {
17
28
  return (
18
29
  <FilterDouble {...templateProps} />
@@ -30,4 +41,6 @@ const Filter = ({
30
41
  )
31
42
  }
32
43
 
44
+ Filter.Section = FilterSection
45
+
33
46
  export default Filter
@@ -88,6 +88,10 @@
88
88
  z-index: 1;
89
89
  }
90
90
 
91
+ [class^=pb_collapsible_kit] .toggle-content.filter_section_collapsible {
92
+ padding-top: $space_xs !important;
93
+ }
94
+
91
95
  &[class*=dark] {
92
96
  .filters .filter {
93
97
  border-right: 1px solid $border_dark !important;
@@ -0,0 +1,224 @@
1
+ import React, { useState } from 'react'
2
+
3
+ import Filter from '../../pb_filter/_filter'
4
+ import Select from '../../pb_select/_select'
5
+ import TextInput from '../../pb_text_input/_text_input'
6
+ import useCollapsible from '../../pb_collapsible/useCollapsible'
7
+ import SectionSeparator from '../../pb_section_separator/_section_separator'
8
+ import Checkbox from '../../pb_checkbox/_checkbox'
9
+ import Flex from '../../pb_flex/_flex'
10
+ import Table from '../../pb_table/_table'
11
+ import Caption from '../../pb_caption/_caption'
12
+ import Icon from '../../pb_icon/_icon'
13
+
14
+ const people = [
15
+ { name: 'Hera Syndulla', territory: 'A galaxy far far away, like really far away...', products: ['Insulation'] },
16
+ { name: 'Kanan Jarrus', territory: 'USA', products: ['Siding', 'Roofing', 'Gutters'] },
17
+ { name: 'C1-10P', territory: 'USA', products: ['Roofing'] },
18
+ { name: 'Anakin Skywalker', territory: 'A galaxy far far away, like really far away...', products: ['Doors', 'Windows', 'Solar'] },
19
+ { name: 'Leia Organa', territory: 'Canada', products: ['Windows', 'Doors'] },
20
+ { name: 'Luke Skywalker', territory: 'Brazil', products: ['Solar', 'Roofing'] },
21
+ { name: 'Padmé Amidala', territory: 'Philippines', products: ['Siding', 'Gutters'] },
22
+ { name: 'Obi-Wan Kenobi', territory: 'USA', products: ['Windows', 'Siding'] },
23
+ { name: 'Ahsoka Tano', territory: 'Canada', products: ['Insulation', 'Solar'] },
24
+ { name: 'Boba Fett', territory: 'Brazil', products: ['Roofing', 'Gutters'] },
25
+ { name: 'Mace Windu', territory: 'Philippines', products: ['Doors', 'Siding'] },
26
+ { name: 'Grogu', territory: 'A galaxy far far away, like really far away...', products: ['Insulation'] },
27
+ { name: 'Sabine Wren', territory: 'Canada', products: ['Solar', 'Doors'] },
28
+ { name: 'C-3PO', territory: 'Brazil', products: ['Windows'] },
29
+ { name: 'R2-D2', territory: 'Philippines', products: ['Doors', 'Gutters'] },
30
+ ]
31
+
32
+ const FilterSidebar = (props) => {
33
+ const [name, setName] = useState('')
34
+ const [ territory, setTerritory ] = useState('')
35
+ const [ products, setProducts ] = useState({})
36
+ const handleUpdateName = ({ target }) => {
37
+ setName(target.value)
38
+ }
39
+ const handleUpdateTerritory = ({ target }) => {
40
+ setTerritory(target.value)
41
+ }
42
+ const handleCheckboxChange = ({ target }) => {
43
+ setProducts(prev => ({
44
+ ...prev,
45
+ [target.name]: !prev[target.name],
46
+ }))
47
+ }
48
+ const [isCollapsed, setIsCollapsed] = useCollapsible(true)
49
+ const [isProductsCollapsed, setIsProductsCollapsed] = useCollapsible(true)
50
+ const options = [
51
+ { value: 'USA' },
52
+ { value: 'Canada' },
53
+ { value: 'Brazil' },
54
+ { value: 'Philippines' },
55
+ { value: 'A galaxy far far away, like really far away...' },
56
+ ]
57
+
58
+ const filteredPeople = people.filter((person) => {
59
+ const matchesName = person.name.toLowerCase().includes(name.toLowerCase())
60
+
61
+ const matchesTerritory = territory === '' ? true : person.territory === territory
62
+
63
+ const matchesProducts = Object.values(products).every((product) => !product) ? true : person.products.some(product => products[product])
64
+
65
+ return matchesName && matchesTerritory && matchesProducts
66
+ })
67
+
68
+ return (
69
+ <>
70
+ <Flex>
71
+ <Filter
72
+ isCollapsed={isCollapsed}
73
+ marginRight="xs"
74
+ onCollapse={() => setIsCollapsed(!isCollapsed)}
75
+ results={filteredPeople.length}
76
+ sortOptions={{
77
+ popularity: 'Popularity',
78
+ // eslint-disable-next-line
79
+ manager_title: 'Manager\'s Title',
80
+ // eslint-disable-next-line
81
+ manager_name: 'Manager\'s Name',
82
+ }}
83
+ sortValue={[{ name: 'popularity', dir: 'desc' }]}
84
+ variant="sidebar"
85
+ width="xs"
86
+ {...props}
87
+ >
88
+ <Filter.Section
89
+ collapsed={isCollapsed}
90
+ headerText="Full Name"
91
+ >
92
+ <TextInput
93
+ onChange={handleUpdateName}
94
+ placeholder="Enter name"
95
+ value={name}
96
+ {...props}
97
+ />
98
+ </Filter.Section>
99
+ <SectionSeparator />
100
+ <Filter.Section
101
+ collapsed={isCollapsed}
102
+ collapsible
103
+ headerText="Territory"
104
+ >
105
+ <Select
106
+ blankSelection="Select One..."
107
+ name="location"
108
+ onChange={handleUpdateTerritory}
109
+ options={options}
110
+ {...props}
111
+ />
112
+ </Filter.Section>
113
+ <SectionSeparator />
114
+ <Filter.Section
115
+ collapsed={isCollapsed}
116
+ collapsible
117
+ headerText="Products"
118
+ >
119
+ <div>
120
+ <Checkbox
121
+ marginBottom="sm"
122
+ name="Doors"
123
+ onChange={handleCheckboxChange}
124
+ text="Doors"
125
+ />
126
+ </div>
127
+ <div>
128
+ <Checkbox
129
+ marginBottom="sm"
130
+ name="Windows"
131
+ onChange={handleCheckboxChange}
132
+ text="Windows"
133
+ />
134
+ </div>
135
+ <div>
136
+ <Checkbox
137
+ marginBottom="sm"
138
+ name="Siding"
139
+ onChange={handleCheckboxChange}
140
+ text="Siding"
141
+ />
142
+ </div>
143
+ {!isProductsCollapsed &&
144
+ <>
145
+ <div>
146
+ <Checkbox
147
+ checked={products["Roofing"]}
148
+ marginBottom="sm"
149
+ name="Roofing"
150
+ onChange={handleCheckboxChange}
151
+ text="Roofing"
152
+ />
153
+ </div>
154
+ <div>
155
+ <Checkbox
156
+ checked={products["Gutters"]}
157
+ marginBottom="sm"
158
+ name="Gutters"
159
+ onChange={handleCheckboxChange}
160
+ text="Gutters"
161
+ />
162
+ </div>
163
+ <div>
164
+ <Checkbox
165
+ checked={products["Solar"]}
166
+ marginBottom="sm"
167
+ name="Solar"
168
+ onChange={handleCheckboxChange}
169
+ text="Solar"
170
+ />
171
+ </div>
172
+ <div>
173
+ <Checkbox
174
+ checked={products["Insulation"]}
175
+ marginBottom="sm"
176
+ name="Insulation"
177
+ onChange={handleCheckboxChange}
178
+ text="Insulation"
179
+ />
180
+ </div>
181
+ </>
182
+ }
183
+ <div onClick={() => setIsProductsCollapsed(!isProductsCollapsed)}>
184
+ <Flex
185
+ cursor="pointer"
186
+ marginBottom="sm"
187
+ >
188
+ <Caption
189
+ color="link"
190
+ marginRight="xxs"
191
+ size="xs"
192
+ text={isProductsCollapsed ? "Show More" : "Show Less"}
193
+ />
194
+ <Icon
195
+ icon={isProductsCollapsed ? "chevron-down" : "chevron-up"}
196
+ />
197
+ </Flex>
198
+ </div>
199
+ </Filter.Section>
200
+ </Filter>
201
+ <Table
202
+ size="sm"
203
+ >
204
+ <thead>
205
+ <tr>
206
+ <th>{'Name'}</th>
207
+ <th>{'Territory'}</th>
208
+ <th>{'Products'}</th>
209
+ </tr>
210
+ </thead>
211
+ <tbody>
212
+ {filteredPeople.map((person) => (<tr key={person.name}>
213
+ <td>{ person.name }</td>
214
+ <td>{ person.territory }</td>
215
+ <td>{ person.products.join(", ") }</td>
216
+ </tr>))}
217
+ </tbody>
218
+ </Table>
219
+ </Flex>
220
+ </>
221
+ )
222
+ }
223
+
224
+ export default FilterSidebar
@@ -24,4 +24,5 @@ examples:
24
24
  - filter_max_height: Max Height for Popover Inside of Filter
25
25
  - filter_placement: Filter Placement
26
26
  - filter_popover_props: Popover Props
27
+ - filter_sidebar: Sidebar
27
28
 
@@ -8,3 +8,4 @@ export { default as FilterMaxWidth } from './_filter_max_width.jsx'
8
8
  export { default as FilterMaxHeight } from './_filter_max_height.jsx'
9
9
  export { default as FilterPlacement } from './_filter_placement.jsx'
10
10
  export { default as FilterPopoverProps } from './_filter_popover_props.jsx'
11
+ export { default as FilterSidebar } from './_filter_sidebar.jsx'
@@ -58,12 +58,12 @@ function FilterTest(props) {
58
58
  }
59
59
 
60
60
  test("triggers popover on filter button click", () => {
61
- render(<FilterTest data={{ testid: "render-test" }}/>);
61
+ const { container } = render(<FilterTest data={{ testid: "render-test" }}/>);
62
62
 
63
63
  const btn = screen.getAllByRole("button")[0];
64
64
 
65
65
  // checks if the sort menu rendered
66
- expect(screen.getByLabelText("sort-amount-down icon")).toBeInTheDocument()
66
+ expect(container.querySelector('.pb_custom_icon')).toBeInTheDocument()
67
67
  expect(screen.getByText('Popularity')).toBeInTheDocument() // check if filter/sort is rendered
68
68
 
69
69
  // hits the filter button and triggers popover
@@ -68,7 +68,7 @@ const containOnlyNumbers = (value: string) => {
68
68
  return /^[()+\-\ .\d]*$/g.test(value)
69
69
  }
70
70
 
71
- const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefObject<unknown>) => {
71
+ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>) => {
72
72
  const {
73
73
  aria = {},
74
74
  className,
@@ -106,15 +106,16 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
106
106
  className
107
107
  )
108
108
 
109
- const inputRef = useRef<HTMLInputElement>()
109
+ const inputRef = useRef<HTMLInputElement | null>(null)
110
110
  const itiRef = useRef<any>(null);
111
111
  const [inputValue, setInputValue] = useState(value)
112
112
  const [error, setError] = useState(props.error)
113
113
  const [dropDownIsOpen, setDropDownIsOpen] = useState(false)
114
114
  const [selectedData, setSelectedData] = useState()
115
+ const [hasTyped, setHasTyped] = useState(false)
115
116
 
116
117
  useEffect(() => {
117
- if (error?.length > 0) {
118
+ if ((error ?? '').length > 0) {
118
119
  onValidate(false)
119
120
  } else {
120
121
  onValidate(true)
@@ -131,6 +132,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
131
132
  clearField() {
132
133
  setInputValue("")
133
134
  setError("")
135
+ setHasTyped(false)
134
136
  },
135
137
  inputNode() {
136
138
  return inputRef.current
@@ -201,6 +203,8 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
201
203
  }
202
204
 
203
205
  const validateErrors = () => {
206
+ if (!hasTyped && !error) return
207
+
204
208
  if (itiRef.current) isValid(itiRef.current.isValidNumber())
205
209
  if (validateOnlyNumbers(itiRef.current)) return
206
210
  if (validateTooLongNumber(itiRef.current)) return
@@ -214,6 +218,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
214
218
  }
215
219
 
216
220
  const handleOnChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
221
+ if (!hasTyped) setHasTyped(true)
217
222
  setInputValue(evt.target.value)
218
223
  let phoneNumberData
219
224
  if (formatAsYouType) {
@@ -259,16 +264,17 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
259
264
 
260
265
  itiRef.current = telInputInit;
261
266
 
262
- inputRef.current.addEventListener("countrychange", (evt: Event) => {
263
- const phoneNumberData = getCurrentSelectedData(telInputInit, (evt.target as HTMLInputElement).value)
264
- setSelectedData(phoneNumberData)
265
- onChange(phoneNumberData)
266
- validateErrors()
267
- })
268
-
269
- inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
270
- inputRef.current.addEventListener("close:countrydropdown", () => setDropDownIsOpen(false))
267
+ if (inputRef.current) {
268
+ inputRef.current.addEventListener("countrychange", (evt: Event) => {
269
+ const phoneNumberData = getCurrentSelectedData(telInputInit, (evt.target as HTMLInputElement).value)
270
+ setSelectedData(phoneNumberData)
271
+ onChange(phoneNumberData)
272
+ validateErrors()
273
+ })
271
274
 
275
+ inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
276
+ inputRef.current.addEventListener("close:countrydropdown", () => setDropDownIsOpen(false))
277
+ }
272
278
  if (formatAsYouType) {
273
279
  inputRef.current?.addEventListener("input", (evt) => {
274
280
  handleOnChange(evt as unknown as React.ChangeEvent<HTMLInputElement>);
@@ -303,12 +309,16 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
303
309
  {...htmlProps}
304
310
  >
305
311
  <TextInput
306
- ref={
307
- inputNode => {
308
- ref ? ref.current = inputNode : null
309
- inputRef.current = inputNode
312
+ ref={inputNode => {
313
+ if (ref) {
314
+ if (typeof ref === 'function') {
315
+ ref(inputNode)
316
+ } else {
317
+ (ref as React.MutableRefObject<HTMLInputElement | null>).current = inputNode
318
+ }
310
319
  }
311
- }
320
+ inputRef.current = inputNode
321
+ }}
312
322
  {...textInputProps}
313
323
  />
314
324
  </div>
@@ -104,8 +104,8 @@ const Table = (props: TableProps): React.ReactElement => {
104
104
 
105
105
  stickyLeftColumn.forEach((colId, index) => {
106
106
  const isLastColumn = index === stickyLeftColumn.length - 1;
107
- const header = document.querySelector(`th[id="${colId}"]`);
108
- const cells = document.querySelectorAll(`td[id="${colId}"]`);
107
+ const header = document.querySelector(`th[data-sticky-id="${colId}"]`);
108
+ const cells = document.querySelectorAll(`td[data-sticky-id="${colId}"]`);
109
109
 
110
110
  if (header) {
111
111
  header.classList.add('sticky');
@@ -155,8 +155,8 @@ const Table = (props: TableProps): React.ReactElement => {
155
155
 
156
156
  stickyRightColumnReversed.forEach((colId, index) => {
157
157
  const isLastColumn = index === stickyRightColumn.length - 1;
158
- const header = document.querySelector(`th[id="${colId}"]`);
159
- const cells = document.querySelectorAll(`td[id="${colId}"]`);
158
+ const header = document.querySelector(`th[data-sticky-id="${colId}"]`);
159
+ const cells = document.querySelectorAll(`td[data-sticky-id="${colId}"]`);
160
160
 
161
161
  if (header) {
162
162
  header.classList.add('sticky');
@@ -1,7 +1,7 @@
1
1
  <%= pb_rails("table", props: { size: "md", responsive: "scroll", sticky_left_column: ["a"], sticky_right_column: ["b"] }) do %>
2
2
  <thead>
3
3
  <tr>
4
- <th id="a">Column 1</th>
4
+ <th data-sticky-id="a">Column 1</th>
5
5
  <th>Column 2</th>
6
6
  <th>Column 3</th>
7
7
  <th>Column 4</th>
@@ -15,12 +15,12 @@
15
15
  <th>Column 12</th>
16
16
  <th>Column 13</th>
17
17
  <th>Column 14</th>
18
- <th id="b">Column 15</th>
18
+ <th data-sticky-id="b">Column 15</th>
19
19
  </tr>
20
20
  </thead>
21
21
  <tbody>
22
22
  <tr>
23
- <td id="a">Value 1</td>
23
+ <td data-sticky-id="a">Value 1</td>
24
24
  <td>Value 2</td>
25
25
  <td>Value 3</td>
26
26
  <td>Value 4</td>
@@ -34,10 +34,10 @@
34
34
  <td>Value 12</td>
35
35
  <td>Value 13</td>
36
36
  <td>Value 14</td>
37
- <td id="b">Value 15</td>
37
+ <td data-sticky-id="b">Value 15</td>
38
38
  </tr>
39
39
  <tr>
40
- <td id="a">Value 1</td>
40
+ <td data-sticky-id="a">Value 1</td>
41
41
  <td>Value 2</td>
42
42
  <td>Value 3</td>
43
43
  <td>Value 4</td>
@@ -51,10 +51,10 @@
51
51
  <td>Value 12</td>
52
52
  <td>Value 13</td>
53
53
  <td>Value 14</td>
54
- <td id="b">Value 15</td>
54
+ <td data-sticky-id="b">Value 15</td>
55
55
  </tr>
56
56
  <tr>
57
- <td id="a">Value 1</td>
57
+ <td data-sticky-id="a">Value 1</td>
58
58
  <td>Value 2</td>
59
59
  <td>Value 3</td>
60
60
  <td>Value 4</td>
@@ -68,7 +68,7 @@
68
68
  <td>Value 12</td>
69
69
  <td>Value 13</td>
70
70
  <td>Value 14</td>
71
- <td id="b">Value 15</td>
71
+ <td data-sticky-id="b">Value 15</td>
72
72
  </tr>
73
73
  </tbody>
74
74
  <% end %>
@@ -11,7 +11,7 @@ const TableStickyColumns = () => {
11
11
  >
12
12
  <thead>
13
13
  <tr>
14
- <th id="a">{'Column 1'}</th>
14
+ <th data-sticky-id="a">{'Column 1'}</th>
15
15
  <th>{'Column 2'}</th>
16
16
  <th>{'Column 3'}</th>
17
17
  <th>{'Column 4'}</th>
@@ -25,12 +25,12 @@ const TableStickyColumns = () => {
25
25
  <th>{'Column 12'}</th>
26
26
  <th>{'Column 13'}</th>
27
27
  <th>{'Column 14'}</th>
28
- <th id="b">{'Column 15'}</th>
28
+ <th data-sticky-id="b">{'Column 15'}</th>
29
29
  </tr>
30
30
  </thead>
31
31
  <tbody>
32
32
  <tr>
33
- <td id="a">{'Value 1'}</td>
33
+ <td data-sticky-id="a">{'Value 1'}</td>
34
34
  <td>{'Value 2'}</td>
35
35
  <td>{'Value 3'}</td>
36
36
  <td>{'Value 4'}</td>
@@ -44,10 +44,10 @@ const TableStickyColumns = () => {
44
44
  <td>{'Value 12'}</td>
45
45
  <td>{'Value 13'}</td>
46
46
  <td>{'Value 14'}</td>
47
- <td id="b">{'Value 15'}</td>
47
+ <td data-sticky-id="b">{'Value 15'}</td>
48
48
  </tr>
49
49
  <tr>
50
- <td id="a">{'Value 1'}</td>
50
+ <td data-sticky-id="a">{'Value 1'}</td>
51
51
  <td>{'Value 2'}</td>
52
52
  <td>{'Value 3'}</td>
53
53
  <td>{'Value 4'}</td>
@@ -61,10 +61,10 @@ const TableStickyColumns = () => {
61
61
  <td>{'Value 12'}</td>
62
62
  <td>{'Value 13'}</td>
63
63
  <td>{'Value 14'}</td>
64
- <td id="b">{'Value 15'}</td>
64
+ <td data-sticky-id="b">{'Value 15'}</td>
65
65
  </tr>
66
66
  <tr>
67
- <td id="a">{'Value 1'}</td>
67
+ <td data-sticky-id="a">{'Value 1'}</td>
68
68
  <td>{'Value 2'}</td>
69
69
  <td>{'Value 3'}</td>
70
70
  <td>{'Value 4'}</td>
@@ -78,7 +78,7 @@ const TableStickyColumns = () => {
78
78
  <td>{'Value 12'}</td>
79
79
  <td>{'Value 13'}</td>
80
80
  <td>{'Value 14'}</td>
81
- <td id="b">{'Value 15'}</td>
81
+ <td data-sticky-id="b">{'Value 15'}</td>
82
82
  </tr>
83
83
  </tbody>
84
84
  </Table>
@@ -1,3 +1,3 @@
1
1
  The `sticky_left_column` and `sticky_right_column` props can be used together on the same table as needed.
2
2
 
3
- Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using props.
3
+ Please ensure that unique `data-sticky-id`s are used for all columns across multiple tables. Using the same columns `data-sticky-id`s on multiple tables can lead to issues when using props.
@@ -1,3 +1,3 @@
1
1
  The `stickyLeftColumn` and `stickyRightColumn` props can be used together on the same table as needed.
2
2
 
3
- Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using props.
3
+ Please ensure that unique `data-sticky-id`s are used for all columns across multiple tables. Using the same columns `data-sticky-id`s on multiple tables can lead to issues when using props.