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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (243) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx +23 -3
  3. data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +67 -3
  4. data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableActions.ts +1 -2
  5. data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx +29 -19
  6. data/app/pb_kits/playbook/pb_advanced_table/Utilities/types.ts +1 -1
  7. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +133 -124
  8. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +92 -2
  9. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +20 -7
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.jsx +66 -0
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.md +10 -0
  12. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.jsx +90 -0
  13. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.md +3 -0
  14. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.jsx +58 -0
  15. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.md +6 -0
  16. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.jsx +64 -0
  17. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.md +8 -0
  18. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.jsx +55 -0
  19. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.md +3 -0
  20. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.html.erb +33 -0
  21. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.md +3 -0
  22. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb +1 -1
  23. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +1 -2
  24. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_rails.md +2 -2
  25. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_react.md +1 -1
  26. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md +6 -2
  27. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md +6 -2
  28. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +9 -3
  29. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +6 -1
  30. data/app/pb_kits/playbook/pb_advanced_table/index.js +7 -0
  31. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss +97 -0
  32. data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +1 -1
  33. data/app/pb_kits/playbook/pb_background/_background.scss +26 -0
  34. data/app/pb_kits/playbook/pb_background/_background.tsx +5 -3
  35. data/app/pb_kits/playbook/pb_background/background.test.js +5 -0
  36. data/app/pb_kits/playbook/pb_background/docs/_background_overlay.jsx +35 -0
  37. data/app/pb_kits/playbook/pb_background/docs/_background_overlay.md +1 -0
  38. data/app/pb_kits/playbook/pb_background/docs/example.yml +1 -0
  39. data/app/pb_kits/playbook/pb_background/docs/index.js +1 -0
  40. data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx +1 -1
  41. data/app/pb_kits/playbook/pb_circle_chart/circleChart.test.js +2 -2
  42. data/app/pb_kits/playbook/pb_circle_chart/circleChartTheme.ts +53 -0
  43. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.html.erb +2 -2
  44. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx +1 -1
  45. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb +1 -1
  46. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx +1 -1
  47. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.html.erb +1 -1
  48. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx +1 -1
  49. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.html.erb +1 -1
  50. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx +1 -1
  51. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.html.erb +1 -1
  52. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +1 -1
  53. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx +2 -2
  54. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx +38 -0
  55. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md +1 -0
  56. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb +1 -1
  57. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx +1 -1
  58. data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +2 -3
  59. data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +2 -1
  60. data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss +39 -1
  61. data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx +4 -0
  62. data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb +9 -1
  63. data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.test.js +14 -0
  64. data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.html.erb +28 -0
  65. data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.jsx +42 -0
  66. data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.md +1 -0
  67. data/app/pb_kits/playbook/pb_circle_icon_button/docs/example.yml +2 -0
  68. data/app/pb_kits/playbook/pb_circle_icon_button/docs/index.js +1 -0
  69. data/app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap +14 -7
  70. data/app/pb_kits/playbook/pb_contact/contact.test.js +7 -7
  71. data/app/pb_kits/playbook/pb_copy_button/_copy_button.tsx +19 -45
  72. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.jsx +54 -0
  73. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.md +3 -0
  74. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook_rails.html.erb +14 -0
  75. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook_rails.md +3 -0
  76. data/app/pb_kits/playbook/pb_copy_button/docs/example.yml +2 -0
  77. data/app/pb_kits/playbook/pb_copy_button/docs/index.js +2 -1
  78. data/app/pb_kits/playbook/pb_copy_button/index.js +46 -20
  79. data/app/pb_kits/playbook/pb_copy_button/usePBCopy.ts +45 -0
  80. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +12 -0
  81. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +12 -0
  82. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +50 -1
  83. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx +4 -1
  84. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.md +4 -0
  85. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md +1 -1
  86. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.md +5 -1
  87. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.jsx +34 -0
  88. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.md +14 -0
  89. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.html.erb +20 -0
  90. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.md +14 -0
  91. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +2 -0
  92. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -0
  93. data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +10 -0
  94. data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.test.js +2 -2
  95. data/app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.test.js +1 -1
  96. data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +10 -1
  97. data/app/pb_kits/playbook/pb_dialog/dialog.rb +2 -0
  98. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_turbo_frames.html.erb +117 -0
  99. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_turbo_frames_rails.md +9 -0
  100. data/app/pb_kits/playbook/pb_dialog/docs/example.yml +1 -0
  101. data/app/pb_kits/playbook/pb_dialog/index.js +106 -14
  102. data/app/pb_kits/playbook/pb_draggable/_draggable.scss +43 -20
  103. data/app/pb_kits/playbook/pb_draggable/context/index.tsx +58 -17
  104. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.html.erb +43 -0
  105. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.jsx +102 -105
  106. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.html.erb +55 -0
  107. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.jsx +50 -48
  108. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_rails.md +1 -0
  109. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_react.md +1 -0
  110. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.jsx +110 -0
  111. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.md +5 -0
  112. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_react.md +5 -0
  113. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.html.erb +42 -0
  114. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.md +1 -0
  115. data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_table_react.jsx → _draggable_with_table.jsx} +1 -1
  116. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md +3 -1
  117. data/app/pb_kits/playbook/pb_draggable/docs/example.yml +12 -7
  118. data/app/pb_kits/playbook/pb_draggable/docs/index.js +4 -1
  119. data/app/pb_kits/playbook/pb_draggable/draggable.rb +9 -1
  120. data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx +71 -3
  121. data/app/pb_kits/playbook/pb_draggable/index.js +139 -142
  122. data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx +4 -3
  123. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +1 -1
  124. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx +4 -1
  125. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +6 -6
  126. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx +6 -6
  127. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +6 -6
  128. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb +8 -8
  129. data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx +3 -3
  130. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +1 -1
  131. data/app/pb_kits/playbook/pb_form_group/_form_group.scss +45 -3
  132. data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb +15 -5
  133. data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx +39 -6
  134. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.jsx +30 -0
  135. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.md +1 -0
  136. data/app/pb_kits/playbook/pb_gauge/docs/example.yml +1 -0
  137. data/app/pb_kits/playbook/pb_gauge/docs/index.js +1 -0
  138. data/app/pb_kits/playbook/pb_gauge/gaugeTheme.ts +85 -0
  139. data/app/pb_kits/playbook/pb_icon/icon.test.js +9 -9
  140. data/app/pb_kits/playbook/pb_icon_circle/icon_circle.test.js +1 -1
  141. data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js +1 -1
  142. data/app/pb_kits/playbook/pb_icon_value/icon_value.test.js +1 -1
  143. data/app/pb_kits/playbook/pb_label_value/label_value.test.js +1 -1
  144. data/app/pb_kits/playbook/pb_layout/_layout.scss +127 -0
  145. data/app/pb_kits/playbook/pb_layout/_layout.tsx +47 -7
  146. data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx +394 -0
  147. data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md +5 -0
  148. data/app/pb_kits/playbook/pb_layout/docs/example.yml +1 -0
  149. data/app/pb_kits/playbook/pb_layout/docs/index.js +1 -0
  150. data/app/pb_kits/playbook/pb_layout/layout.test.js +4 -0
  151. data/app/pb_kits/playbook/pb_layout/subcomponents/_game.tsx +121 -0
  152. data/app/pb_kits/playbook/pb_layout/subcomponents/_participant.tsx +79 -0
  153. data/app/pb_kits/playbook/pb_layout/subcomponents/_round.tsx +74 -0
  154. data/app/pb_kits/playbook/pb_link/link.test.jsx +2 -2
  155. data/app/pb_kits/playbook/pb_nav/_nav_item.test.js +5 -3
  156. data/app/pb_kits/playbook/pb_overlay/_overlay.scss +83 -22
  157. data/app/pb_kits/playbook/pb_overlay/_overlay.tsx +39 -7
  158. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.jsx +63 -0
  159. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.md +3 -0
  160. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md +1 -7
  161. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_background.jsx +49 -0
  162. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_background.md +1 -0
  163. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_opacity.jsx +81 -0
  164. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_opacity.md +1 -0
  165. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.jsx +39 -0
  166. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.md +1 -0
  167. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.jsx +40 -0
  168. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.md +5 -0
  169. data/app/pb_kits/playbook/pb_overlay/docs/example.yml +5 -0
  170. data/app/pb_kits/playbook/pb_overlay/docs/index.js +5 -0
  171. data/app/pb_kits/playbook/pb_overlay/overlay.test.jsx +39 -1
  172. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +13 -0
  173. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +3 -1
  174. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.html.erb +10 -0
  175. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.jsx +20 -0
  176. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.md +1 -0
  177. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx +8 -1
  178. data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +2 -0
  179. data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +1 -0
  180. data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb +3 -0
  181. data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.test.js +19 -0
  182. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_vertical.md +1 -0
  183. data/app/pb_kits/playbook/pb_select/docs/_select_error.jsx +7 -2
  184. data/app/pb_kits/playbook/pb_stat_change/stat_change.test.js +8 -4
  185. data/app/pb_kits/playbook/pb_table/_table.tsx +2 -2
  186. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.md +3 -1
  187. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.md +3 -1
  188. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md +3 -1
  189. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md +3 -1
  190. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.html.erb +34 -0
  191. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_rails.md +1 -0
  192. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating.html.erb +36 -0
  193. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_rails.md +1 -0
  194. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_react.md +1 -1
  195. data/app/pb_kits/playbook/pb_table/docs/example.yml +2 -0
  196. data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss +1 -1
  197. data/app/pb_kits/playbook/pb_table/styles/_headers.scss +19 -7
  198. data/app/pb_kits/playbook/pb_table/styles/_striped.scss +3 -3
  199. data/app/pb_kits/playbook/pb_table/table.rb +13 -1
  200. data/app/pb_kits/playbook/pb_table/table_header.rb +13 -1
  201. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +13 -5
  202. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.jsx +9 -1
  203. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.jsx +94 -0
  204. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.md +1 -0
  205. data/app/pb_kits/playbook/pb_text_input/docs/example.yml +2 -0
  206. data/app/pb_kits/playbook/pb_text_input/docs/index.js +1 -0
  207. data/app/pb_kits/playbook/pb_text_input/inputMask.ts +8 -1
  208. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx +7 -1
  209. data/app/pb_kits/playbook/pb_tooltip/tooltip.html.erb +2 -5
  210. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.jsx +6 -2
  211. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +4 -4
  212. data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb +2 -5
  213. data/app/pb_kits/playbook/pb_user/user.html.erb +1 -6
  214. data/app/pb_kits/playbook/pb_user_badge/user_badge.html.erb +1 -6
  215. data/dist/chunks/_typeahead-D4Ack5Pn.js +22 -0
  216. data/dist/chunks/_weekday_stacked-DWOZhThL.js +45 -0
  217. data/dist/chunks/lib-96_ZmvAo.js +29 -0
  218. data/dist/chunks/{pb_form_validation-BvNy9Bd6.js → pb_form_validation-Vv2TqXVC.js} +1 -1
  219. data/dist/chunks/vendor.js +1 -1
  220. data/dist/menu.yml +2 -2
  221. data/dist/playbook-doc.js +19 -1
  222. data/dist/playbook-rails-react-bindings.js +1 -1
  223. data/dist/playbook-rails.js +1 -1
  224. data/dist/playbook.css +1 -1
  225. data/lib/playbook/kit_base.rb +4 -4
  226. data/lib/playbook/version.rb +2 -2
  227. metadata +87 -20
  228. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.md +0 -5
  229. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.md +0 -1
  230. data/dist/chunks/_typeahead-Djo6qCne.js +0 -22
  231. data/dist/chunks/_weekday_stacked-DIIHW0OV.js +0 -45
  232. data/dist/chunks/lib-BGzBzFZX.js +0 -29
  233. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_default_rails.html.erb → _draggable_default.html.erb} +0 -0
  234. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_default.md → _draggable_default_react.md} +0 -0
  235. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_multiple_containers_rails.html.erb → _draggable_multiple_containers.html.erb} +0 -0
  236. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_multiple_containers.md → _draggable_multiple_containers_react.md} +0 -0
  237. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_cards_rails.html.erb → _draggable_with_cards.html.erb} +0 -0
  238. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_cards.md → _draggable_with_cards_react.md} +0 -0
  239. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_list_rails.html.erb → _draggable_with_list.html.erb} +0 -0
  240. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_list.md → _draggable_with_list_react.md} +0 -0
  241. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_selectable_list_rails.html.erb → _draggable_with_selectable_list.html.erb} +0 -0
  242. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_selectable_list.md → _draggable_with_selectable_list_react.md} +0 -0
  243. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_table.md → _draggable_with_table_rails.md} +0 -0
@@ -0,0 +1,94 @@
1
+ import React, { useState } from 'react'
2
+
3
+ import TextInput from '../../pb_text_input/_text_input'
4
+
5
+ const TextInputSanitize = (props) => {
6
+ const ref = React.createRef()
7
+
8
+ const [currency, setCurrency] = useState('')
9
+ const [sanitizedCurrency, setSanitizedCurrency] = useState('')
10
+ const handleOnChangeSanitizeCurrency = ({ target }, sanitizedValue) => {
11
+ setCurrency(target.value)
12
+ setSanitizedCurrency(sanitizedValue);
13
+ }
14
+
15
+ const [creditCard, setCreditCard] = useState('')
16
+ const [sanitizedCreditCard, setSanitizedCreditCard] = useState('')
17
+ const handleOnChangeSanitizeCC = ({ target }, sanitizedValue) => {
18
+ setCreditCard(target.value)
19
+ setSanitizedCreditCard(sanitizedValue);
20
+ }
21
+
22
+ const [ssn, setSSN] = useState('')
23
+ const [sanitizedSSN, setSanitizedSSN] = useState('')
24
+ const handleOnChangeSanitizeSSN = ({ target }, sanitizedValue) => {
25
+ setSSN(target.value)
26
+ setSanitizedSSN(sanitizedValue);
27
+ }
28
+
29
+ return (
30
+ <div>
31
+ <TextInput
32
+ label="Currency"
33
+ mask="currency"
34
+ onChange={handleOnChangeSanitizeCurrency}
35
+ placeholder="Enter Amount"
36
+ ref={ref}
37
+ value={currency}
38
+ {...props}
39
+ />
40
+
41
+ {currency !== "" && (
42
+ <React.Fragment>{`The masked value is: ${currency}`}</React.Fragment>
43
+ )}
44
+ <br />
45
+ {sanitizedCurrency !== "" && (
46
+ <React.Fragment>{`The sanitized value is: ${sanitizedCurrency}`}</React.Fragment>
47
+ )}
48
+
49
+ <br />
50
+ <br />
51
+
52
+ <TextInput
53
+ label="Credit Card"
54
+ mask="creditCard"
55
+ onChange={handleOnChangeSanitizeCC}
56
+ placeholder="Enter Card"
57
+ ref={ref}
58
+ value={creditCard}
59
+ {...props}
60
+ />
61
+
62
+ {creditCard !== "" && (
63
+ <React.Fragment>{`The masked value is: ${creditCard}`}</React.Fragment>
64
+ )}
65
+ <br />
66
+ {sanitizedCreditCard !== "" && (
67
+ <React.Fragment>{`The sanitized value is: ${sanitizedCreditCard}`}</React.Fragment>
68
+ )}
69
+
70
+ <br />
71
+ <br />
72
+
73
+ <TextInput
74
+ label="SSN"
75
+ mask="ssn"
76
+ onChange={handleOnChangeSanitizeSSN}
77
+ placeholder="Enter Amount"
78
+ ref={ref}
79
+ value={ssn}
80
+ {...props}
81
+ />
82
+
83
+ {ssn !== "" && (
84
+ <React.Fragment>{`The masked value is: ${ssn}`}</React.Fragment>
85
+ )}
86
+ <br />
87
+ {sanitizedSSN !== "" && (
88
+ <React.Fragment>{`The sanitized value is: ${sanitizedSSN}`}</React.Fragment>
89
+ )}
90
+ </div>
91
+ )
92
+ }
93
+
94
+ export default TextInputSanitize
@@ -0,0 +1 @@
1
+ When utilizing the Mask prop, you can retrieve the sanitized value of your input through an event handler that targets `sanitizedValue`.
@@ -18,6 +18,8 @@ examples:
18
18
  - text_input_inline: Inline
19
19
  - text_input_no_label: No Label
20
20
  - text_input_mask: Mask
21
+ - text_input_sanitize: Sanitized Masked Input
22
+
21
23
 
22
24
  swift:
23
25
  - text_input_default_swift: Default
@@ -6,3 +6,4 @@ export { default as TextInputAddOn } from './_text_input_add_on.jsx'
6
6
  export { default as TextInputInline } from './_text_input_inline.jsx'
7
7
  export { default as TextInputNoLabel } from './_text_input_no_label.jsx'
8
8
  export { default as TextInputMask } from './_text_input_mask.jsx'
9
+ export { default as TextInputSanitize } from './_text_input_sanitize.jsx'
@@ -3,6 +3,7 @@ type InputMask = {
3
3
  formatDefaultValue: (value: string) => string
4
4
  pattern: string
5
5
  placeholder: string
6
+ sanitize?: (value: string) => string;
6
7
  }
7
8
 
8
9
  type InputMaskDictionary = {
@@ -73,35 +74,41 @@ export const INPUTMASKS: InputMaskDictionary = {
73
74
  // eslint-disable-next-line no-useless-escape
74
75
  pattern: '^\\$\\d{1,3}(?:,\\d{3})*(?:\\.\\d{2})?$',
75
76
  placeholder: '$0.00',
77
+ sanitize: (value: string) => value.replace(/[$,]/g, ''),
76
78
  },
77
79
  zipCode: {
78
80
  format: formatBasicPostal,
79
81
  formatDefaultValue: formatBasicPostal,
80
82
  pattern: '\\d{5}',
81
83
  placeholder: '12345',
84
+ sanitize: (value: string) => value,
82
85
  },
83
86
  postalCode: {
84
87
  format: formatExtendedPostal,
85
88
  formatDefaultValue: formatExtendedPostal,
86
89
  pattern: '\\d{5}-\\d{4}',
87
90
  placeholder: '12345-6789',
91
+ sanitize: (value: string) => value.replace(/-/g, ''),
88
92
  },
89
93
  ssn: {
90
94
  format: formatSSN,
91
95
  formatDefaultValue: formatSSN,
92
96
  pattern: '\\d{3}-\\d{2}-\\d{4}',
93
97
  placeholder: '123-45-6789',
98
+ sanitize: (value: string) => value.replace(/-/g, ''),
94
99
  },
95
100
  creditCard: {
96
101
  format: formatCreditCard,
97
102
  formatDefaultValue: formatCreditCard,
98
103
  pattern: '\\d{4} \\d{4} \\d{4} \\d{4}',
99
104
  placeholder: '1234 5678 9012 3456',
105
+ sanitize: (value: string) => value.replace(/\s/g, ''),
100
106
  },
101
107
  cvv: {
102
108
  format: formatCVV,
103
109
  formatDefaultValue: formatCVV,
104
110
  pattern: '\\d{3,4}',
105
111
  placeholder: '123',
112
+ sanitize: (value: string) => value,
106
113
  },
107
- }
114
+ }
@@ -1,15 +1,21 @@
1
1
  import React, {useState} from 'react'
2
2
  import Textarea from '../../pb_textarea/_textarea'
3
+ import Icon from '../../pb_icon/_icon'
3
4
 
4
5
  const TextareaError = (props) => {
5
6
  const [value, setValue] = useState('default value text')
6
7
  const handleChange = (event) => {
7
8
  setValue(event.target.value)
8
9
  }
10
+ const error = (
11
+ <>
12
+ <Icon icon="warning" /> This field has an error!
13
+ </>
14
+ )
9
15
  return (
10
16
  <div>
11
17
  <Textarea
12
- error="This field has an error!"
18
+ error={error}
13
19
  label="Label"
14
20
  name="comment"
15
21
  onChange={(e)=> handleChange(e)}
@@ -1,11 +1,8 @@
1
- <%= content_tag(:div,
2
- id: object.id,
3
- data: object.data,
4
- class: object.classname,
1
+ <%= pb_content_tag(:div,
5
2
  style: remove_height_properties(combined_html_options[:style]) || "",
6
3
  **combined_html_options.except(:style)) do %>
7
4
  <div class="tooltip_tooltip" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.height_and_width_helper %>">
8
5
  <%= content.presence %>
9
6
  <div class="arrow" id="<%= object.tooltip_id %>-arrow"></div>
10
7
  </div>
11
- <% end %>
8
+ <% end %>
@@ -1,6 +1,7 @@
1
1
  import React, { useState, useEffect } from 'react'
2
2
 
3
3
  import Typeahead from '../_typeahead'
4
+ import Icon from '../../pb_icon/_icon'
4
5
 
5
6
  const options = [
6
7
  { label: 'Orange', value: '#FFA500' },
@@ -10,7 +11,10 @@ const options = [
10
11
  ]
11
12
 
12
13
  const TypeaheadErrorState = (props) => {
13
- const [errorState, setErrorState] = useState("Please make a valid selection");
14
+ const error = (<>
15
+ <Icon icon="warning" /> Please make a valid selection
16
+ </>)
17
+ const [errorState, setErrorState] = useState(error);
14
18
  const [searchValue, setSearchValue] = useState(null);
15
19
 
16
20
  const handleOnChange = (value) => setSearchValue(value)
@@ -19,7 +23,7 @@ const TypeaheadErrorState = (props) => {
19
23
  if(searchValue) {
20
24
  setErrorState("")
21
25
  } else {
22
- setErrorState("Please make a valid selection")
26
+ setErrorState(error)
23
27
  }
24
28
  }, [searchValue])
25
29
 
@@ -18,18 +18,18 @@ const USERS = [
18
18
  territory: "PHL",
19
19
  },
20
20
  {
21
- name: "Jason Cypret",
22
- title: "Vice President of User Experience",
21
+ name: "Carlos Lima",
22
+ title: "Nitro Developer",
23
23
  territory: "PHL",
24
24
  },
25
25
  {
26
26
  name: "Stephen Marshall",
27
- title: "Senior User Experience Engineer",
27
+ title: "Senior Nitro Developer",
28
28
  territory: "PHL",
29
29
  },
30
30
  {
31
31
  name: "Jasper Furniss",
32
- title: "Senior User Experience Engineer",
32
+ title: "Lead User Experience Engineer",
33
33
  territory: "PHL",
34
34
  },
35
35
  ];
@@ -1,11 +1,8 @@
1
1
  <% if object.is_react? %>
2
2
  <%= react_component('Typeahead', object.typeahead_react_options) %>
3
3
  <% else %>
4
- <%= content_tag(:div,
5
- id: object.id,
6
- data: object.data,
7
- class: object.classname + object.inline_class,
8
- **combined_html_options) do %>
4
+ <%= pb_content_tag(:div,
5
+ class: object.classname + object.inline_class) do %>
9
6
  <div class="pb_typeahead_wrapper">
10
7
  <div class="pb_typeahead_loading_indicator" data-pb-typeahead-kit-loading-indicator>
11
8
  <%= pb_rails("icon", props: {
@@ -1,9 +1,4 @@
1
- <%= content_tag(:div,
2
- aria: object.aria,
3
- class: object.classname,
4
- data: object.data,
5
- id: object.id,
6
- **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
7
2
  <% if object.avatar_url.present? || object.avatar %>
8
3
  <%= pb_rails("avatar", props: {
9
4
  name: object.name,
@@ -1,8 +1,3 @@
1
- <%= content_tag(:div,
2
- aria: object.aria,
3
- class: object.classname,
4
- data: object.data,
5
- id: object.id,
6
- **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
7
2
  <%= content_tag(:div, object.display_badge, class: "pb_user_badge_wrapper") %>
8
3
  <% end %>