playbook_ui 14.22.0 → 14.23.0.pre.alpha.PLAY2121enableexpandedfield9199

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 (200) 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/SubRowHeaderRow.tsx +32 -11
  4. data/app/pb_kits/playbook/pb_advanced_table/Components/TableActionBar.tsx +10 -10
  5. data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +0 -1
  6. data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts +3 -3
  7. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +58 -1
  8. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +15 -6
  9. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb +1 -1
  10. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb +14 -2
  11. data/app/pb_kits/playbook/pb_advanced_table/advanced_table_action_bar.js +16 -0
  12. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.jsx +65 -0
  13. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.md +5 -0
  14. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.html.erb +46 -0
  15. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling_rails.md +7 -0
  16. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.jsx +69 -0
  17. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.md +1 -0
  18. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_multi_header.jsx +107 -0
  19. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_multi_header.md +1 -0
  20. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_rails.html.erb +51 -0
  21. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_rails.md +1 -0
  22. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +14 -8
  23. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +3 -0
  24. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss +7 -1
  25. data/app/pb_kits/playbook/pb_advanced_table/table_body.rb +3 -1
  26. data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +5 -1
  27. data/app/pb_kits/playbook/pb_advanced_table/table_header.rb +36 -0
  28. data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +11 -2
  29. data/app/pb_kits/playbook/pb_advanced_table/table_row.rb +2 -0
  30. data/app/pb_kits/playbook/pb_badge/_badge.scss +5 -6
  31. data/app/pb_kits/playbook/pb_bar_graph/barGraphTheme.ts +106 -0
  32. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx +33 -15
  33. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx +33 -15
  34. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.jsx +52 -22
  35. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.md +3 -0
  36. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.jsx +12 -16
  37. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.jsx +31 -15
  38. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.jsx +39 -16
  39. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.jsx +86 -38
  40. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.md +1 -1
  41. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx +32 -15
  42. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx +72 -22
  43. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md +1 -1
  44. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.jsx +31 -15
  45. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.jsx +37 -16
  46. data/app/pb_kits/playbook/pb_bar_graph/docs/_description.md +1 -3
  47. data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +1 -3
  48. data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +0 -2
  49. data/app/pb_kits/playbook/pb_body/docs/_body_truncate.jsx +3 -3
  50. data/app/pb_kits/playbook/pb_body/docs/_body_truncate_react.md +4 -0
  51. data/app/pb_kits/playbook/pb_checkbox/checkbox.rb +12 -1
  52. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb +1 -1
  53. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate_rails.md +2 -1
  54. data/app/pb_kits/playbook/pb_checkbox/index.js +3 -1
  55. data/app/pb_kits/playbook/pb_circle_chart/circleChartTheme.ts +36 -1
  56. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx +71 -26
  57. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx +29 -16
  58. data/app/pb_kits/playbook/pb_circle_chart/docs/{_circle_chart_colors.md → _circle_chart_colors_rails.md} +1 -1
  59. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors_react.md +2 -0
  60. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx +28 -16
  61. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.md +4 -2
  62. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx +23 -15
  63. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.jsx +81 -51
  64. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +103 -75
  65. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.md +4 -7
  66. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx +19 -13
  67. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx +30 -17
  68. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.jsx +34 -20
  69. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.jsx +29 -20
  70. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx +28 -20
  71. data/app/pb_kits/playbook/pb_circle_chart/docs/_description.md +1 -0
  72. data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +0 -1
  73. data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +0 -1
  74. data/app/pb_kits/playbook/pb_draggable/context/index.tsx +12 -4
  75. data/app/pb_kits/playbook/pb_draggable/context/types.ts +5 -2
  76. data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +17 -1
  77. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +6 -0
  78. data/app/pb_kits/playbook/pb_dropdown/_dropdown_mixin.scss +36 -0
  79. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options.jsx +90 -0
  80. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options_react.md +4 -0
  81. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options.jsx +1 -0
  82. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options_react.md +1 -1
  83. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +3 -2
  84. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +2 -1
  85. data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx +24 -0
  86. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +11 -1
  87. data/app/pb_kits/playbook/pb_gauge/docs/_description.md +1 -0
  88. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.jsx +32 -15
  89. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors_react.md +2 -0
  90. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx +35 -9
  91. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex_react.md +1 -0
  92. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_default.jsx +26 -14
  93. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_disable_animation.jsx +32 -15
  94. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_full_circle.jsx +45 -17
  95. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_height.jsx +59 -22
  96. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_live_data.jsx +40 -9
  97. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.jsx +50 -18
  98. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.jsx +31 -18
  99. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_title.jsx +34 -17
  100. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_units.jsx +64 -23
  101. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_units_react.md +1 -0
  102. data/app/pb_kits/playbook/pb_gauge/docs/example.yml +0 -1
  103. data/app/pb_kits/playbook/pb_gauge/docs/index.js +0 -1
  104. data/app/pb_kits/playbook/pb_gauge/gaugeTheme.ts +7 -1
  105. data/app/pb_kits/playbook/pb_line_graph/docs/_description.md +1 -3
  106. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors.jsx +36 -17
  107. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors_react.md +3 -0
  108. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_default.jsx +31 -16
  109. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_height.jsx +63 -31
  110. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_height.md +3 -0
  111. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend.jsx +35 -16
  112. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_nonclickable.jsx +41 -16
  113. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.jsx +107 -62
  114. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.md +4 -7
  115. data/app/pb_kits/playbook/pb_line_graph/docs/example.yml +0 -1
  116. data/app/pb_kits/playbook/pb_line_graph/docs/index.js +0 -1
  117. data/app/pb_kits/playbook/pb_line_graph/lineGraphTheme.ts +16 -1
  118. data/app/pb_kits/playbook/pb_multi_level_select/_helper_functions.tsx +18 -9
  119. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +3 -1
  120. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_show_checked_children.html.erb +75 -0
  121. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_show_checked_children.jsx +94 -0
  122. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_show_checked_children.md +3 -0
  123. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +2 -0
  124. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +2 -1
  125. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb +3 -0
  126. data/app/pb_kits/playbook/pb_pagination/_pagination.tsx +4 -0
  127. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default_rails.md +3 -1
  128. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default_react.md +3 -1
  129. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +30 -17
  130. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.html.erb +10 -0
  131. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.jsx +26 -0
  132. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.md +3 -0
  133. data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +2 -0
  134. data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +1 -0
  135. data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb +3 -0
  136. data/app/pb_kits/playbook/pb_select/select.rb +4 -2
  137. data/app/pb_kits/playbook/pb_table/_table.tsx +4 -4
  138. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.jsx +8 -8
  139. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns_react.md +1 -1
  140. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.jsx +12 -12
  141. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_react.md +3 -3
  142. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns.jsx +12 -12
  143. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns_react.md +3 -3
  144. data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.html.erb +1 -0
  145. data/app/pb_kits/playbook/pb_title/docs/_title_truncate.jsx +3 -3
  146. data/app/pb_kits/playbook/pb_title/docs/_title_truncate_react.md +4 -0
  147. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.html.erb +14 -0
  148. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_rails.md +1 -0
  149. data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +1 -0
  150. data/app/pb_kits/playbook/pb_tooltip/index.js +59 -36
  151. data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +9 -2
  152. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.html.erb +18 -0
  153. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input_rails.md +1 -0
  154. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +1 -0
  155. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +3 -0
  156. data/dist/chunks/_line_graph-Bz5CsVqz.js +1 -0
  157. data/dist/chunks/_typeahead-DuoHs8Ye.js +6 -0
  158. data/dist/chunks/_weekday_stacked-0GMpKTN_.js +37 -0
  159. data/dist/chunks/lib-DnQyMxO1.js +29 -0
  160. data/dist/chunks/{pb_form_validation-Dx1C9XCK.js → pb_form_validation-kl-4Jv4t.js} +1 -1
  161. data/dist/chunks/vendor.js +1 -1
  162. data/dist/menu.yml +68 -15
  163. data/dist/playbook-doc.js +2 -2
  164. data/dist/playbook-rails-react-bindings.js +1 -1
  165. data/dist/playbook-rails.js +1 -1
  166. data/dist/playbook.css +1 -1
  167. data/lib/playbook/version.rb +2 -2
  168. metadata +51 -36
  169. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx +0 -72
  170. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md +0 -6
  171. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx +0 -64
  172. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md +0 -1
  173. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx +0 -38
  174. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md +0 -1
  175. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.jsx +0 -30
  176. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.md +0 -1
  177. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.jsx +0 -52
  178. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.md +0 -1
  179. data/app/pb_kits/playbook/pb_walkthrough/_walkthrough.scss +0 -0
  180. data/app/pb_kits/playbook/pb_walkthrough/_walkthrough.tsx +0 -202
  181. data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_continuous.jsx +0 -69
  182. data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_default.jsx +0 -71
  183. data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_multi_beacon.jsx +0 -110
  184. data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_no_beacon.jsx +0 -76
  185. data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_no_overlay.jsx +0 -76
  186. data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_styled.jsx +0 -76
  187. data/app/pb_kits/playbook/pb_walkthrough/docs/example.yml +0 -10
  188. data/app/pb_kits/playbook/pb_walkthrough/docs/index.js +0 -6
  189. data/app/pb_kits/playbook/pb_walkthrough/walkthrough.test.jsx +0 -34
  190. data/dist/chunks/_typeahead-dOC1gq2X.js +0 -22
  191. data/dist/chunks/_weekday_stacked-Bh8iY5uA.js +0 -45
  192. data/dist/chunks/lib-DtCftrUN.js +0 -29
  193. /data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_row_styling.md → _advanced_table_row_styling_react.md} +0 -0
  194. /data/app/pb_kits/playbook/pb_body/docs/{_body_truncate.md → _body_truncate_rails.md} +0 -0
  195. /data/app/pb_kits/playbook/pb_gauge/docs/{_gauge_colors.md → _gauge_colors_rails.md} +0 -0
  196. /data/app/pb_kits/playbook/pb_gauge/docs/{_gauge_complex.md → _gauge_complex_rails.md} +0 -0
  197. /data/app/pb_kits/playbook/pb_line_graph/docs/{_line_graph_colors.md → _line_graph_colors_rails.md} +0 -0
  198. /data/app/pb_kits/playbook/pb_title/docs/{_title_truncate.md → _title_truncate_rails.md} +0 -0
  199. /data/app/pb_kits/playbook/pb_tooltip/docs/{_tooltip_click_open.md → _tooltip_click_open_react.md} +0 -0
  200. /data/app/pb_kits/playbook/pb_typeahead/docs/{_typeahead_preserve_input.md → _typeahead_preserve_input_react.md} +0 -0
@@ -38,6 +38,7 @@ type PhoneNumberInputProps = {
38
38
  required?: boolean,
39
39
  value?: string,
40
40
  formatAsYouType?: boolean,
41
+ strictMode?: boolean,
41
42
  countrySearch?: boolean,
42
43
  }
43
44
 
@@ -68,7 +69,7 @@ const containOnlyNumbers = (value: string) => {
68
69
  return /^[()+\-\ .\d]*$/g.test(value)
69
70
  }
70
71
 
71
- const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefObject<unknown>) => {
72
+ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>) => {
72
73
  const {
73
74
  aria = {},
74
75
  className,
@@ -94,6 +95,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
94
95
  preferredCountries = [],
95
96
  value = "",
96
97
  formatAsYouType = false,
98
+ strictMode = false,
97
99
  countrySearch = false,
98
100
  } = props
99
101
 
@@ -106,15 +108,16 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
106
108
  className
107
109
  )
108
110
 
109
- const inputRef = useRef<HTMLInputElement>()
111
+ const inputRef = useRef<HTMLInputElement | null>(null)
110
112
  const itiRef = useRef<any>(null);
111
113
  const [inputValue, setInputValue] = useState(value)
112
114
  const [error, setError] = useState(props.error)
113
115
  const [dropDownIsOpen, setDropDownIsOpen] = useState(false)
114
116
  const [selectedData, setSelectedData] = useState()
117
+ const [hasTyped, setHasTyped] = useState(false)
115
118
 
116
119
  useEffect(() => {
117
- if (error?.length > 0) {
120
+ if ((error ?? '').length > 0) {
118
121
  onValidate(false)
119
122
  } else {
120
123
  onValidate(true)
@@ -131,6 +134,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
131
134
  clearField() {
132
135
  setInputValue("")
133
136
  setError("")
137
+ setHasTyped(false)
134
138
  },
135
139
  inputNode() {
136
140
  return inputRef.current
@@ -201,6 +205,8 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
201
205
  }
202
206
 
203
207
  const validateErrors = () => {
208
+ if (!hasTyped && !error) return
209
+
204
210
  if (itiRef.current) isValid(itiRef.current.isValidNumber())
205
211
  if (validateOnlyNumbers(itiRef.current)) return
206
212
  if (validateTooLongNumber(itiRef.current)) return
@@ -214,6 +220,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
214
220
  }
215
221
 
216
222
  const handleOnChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
223
+ if (!hasTyped) setHasTyped(true)
217
224
  setInputValue(evt.target.value)
218
225
  let phoneNumberData
219
226
  if (formatAsYouType) {
@@ -251,6 +258,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
251
258
  countrySearch: countrySearch,
252
259
  fixDropdownWidth: false,
253
260
  formatAsYouType: formatAsYouType,
261
+ strictMode: strictMode,
254
262
  hiddenInput: hiddenInputs ? () => ({
255
263
  phone: `${name}_full`,
256
264
  country: `${name}_country_code`,
@@ -259,16 +267,17 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
259
267
 
260
268
  itiRef.current = telInputInit;
261
269
 
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))
270
+ if (inputRef.current) {
271
+ inputRef.current.addEventListener("countrychange", (evt: Event) => {
272
+ const phoneNumberData = getCurrentSelectedData(telInputInit, (evt.target as HTMLInputElement).value)
273
+ setSelectedData(phoneNumberData)
274
+ onChange(phoneNumberData)
275
+ validateErrors()
276
+ })
271
277
 
278
+ inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
279
+ inputRef.current.addEventListener("close:countrydropdown", () => setDropDownIsOpen(false))
280
+ }
272
281
  if (formatAsYouType) {
273
282
  inputRef.current?.addEventListener("input", (evt) => {
274
283
  handleOnChange(evt as unknown as React.ChangeEvent<HTMLInputElement>);
@@ -303,12 +312,16 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
303
312
  {...htmlProps}
304
313
  >
305
314
  <TextInput
306
- ref={
307
- inputNode => {
308
- ref ? ref.current = inputNode : null
309
- inputRef.current = inputNode
315
+ ref={inputNode => {
316
+ if (ref) {
317
+ if (typeof ref === 'function') {
318
+ ref(inputNode)
319
+ } else {
320
+ (ref as React.MutableRefObject<HTMLInputElement | null>).current = inputNode
321
+ }
310
322
  }
311
- }
323
+ inputRef.current = inputNode
324
+ }}
312
325
  {...textInputProps}
313
326
  />
314
327
  </div>
@@ -0,0 +1,10 @@
1
+ <%= pb_rails("phone_number_input", props: {
2
+ strict_mode: true,
3
+ }) %>
4
+
5
+ <%= pb_rails("body", props: { text: "With format_as_you_type" }) %>
6
+
7
+ <%= pb_rails("phone_number_input", props: {
8
+ strict_mode: true,
9
+ format_as_you_type: true,
10
+ }) %>
@@ -0,0 +1,26 @@
1
+ import React from "react";
2
+
3
+ import Body from '../../pb_body/_body'
4
+ import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
5
+
6
+ const PhoneNumberInputStrictMode = (props) => {
7
+
8
+ return (
9
+ <>
10
+ <PhoneNumberInput
11
+ id="strict"
12
+ strictMode
13
+ {...props}
14
+ />
15
+ <Body>With formatAsYouType</Body>
16
+ <PhoneNumberInput
17
+ formatAsYouType
18
+ id="strict"
19
+ strictMode
20
+ {...props}
21
+ />
22
+ </>
23
+ );
24
+ };
25
+
26
+ export default PhoneNumberInputStrictMode;
@@ -0,0 +1,3 @@
1
+ Ignore any irrelevant characters and cap the length at the maximum valid number length.
2
+
3
+ This can be combined with `format_as_you_type` / `formatAsYouType`.
@@ -10,6 +10,7 @@ examples:
10
10
  - phone_number_input_clear_field: Clearing the Input Field
11
11
  - phone_number_input_access_input_element: Accessing the Input Element
12
12
  - phone_number_input_format: Format as You Type
13
+ - phone_number_input_strict_mode: Strict Mode
13
14
  - phone_number_input_country_search: Country Search
14
15
 
15
16
  rails:
@@ -20,5 +21,6 @@ examples:
20
21
  - phone_number_input_exclude_countries: Exclude Countries
21
22
  - phone_number_input_validation: Form Validation
22
23
  - phone_number_input_format: Format as You Type
24
+ - phone_number_input_strict_mode: Strict Mode
23
25
  - phone_number_input_hidden_inputs: Hidden Inputs
24
26
  - phone_number_input_country_search: Country Search
@@ -7,4 +7,5 @@ export { default as PhoneNumberInputValidation } from './_phone_number_input_val
7
7
  export { default as PhoneNumberInputClearField } from './_phone_number_input_clear_field'
8
8
  export { default as PhoneNumberInputAccessInputElement } from './_phone_number_input_access_input_element'
9
9
  export { default as PhoneNumberInputFormat } from './_phone_number_input_format'
10
+ export { default as PhoneNumberInputStrictMode } from './_phone_number_input_strict_mode'
10
11
  export { default as PhoneNumberInputCountrySearch } from './_phone_number_input_country_search'
@@ -25,6 +25,8 @@ module Playbook
25
25
  default: ""
26
26
  prop :format_as_you_type, type: Playbook::Props::Boolean,
27
27
  default: false
28
+ prop :strict_mode, type: Playbook::Props::Boolean,
29
+ default: false
28
30
  prop :hidden_inputs, type: Playbook::Props::Boolean,
29
31
  default: false
30
32
  prop :country_search, type: Playbook::Props::Boolean,
@@ -41,6 +43,7 @@ module Playbook
41
43
  disabled: disabled,
42
44
  error: error,
43
45
  formatAsYouType: format_as_you_type,
46
+ strictMode: strict_mode,
44
47
  hiddenInputs: hidden_inputs,
45
48
  initialCountry: initial_country,
46
49
  label: label,
@@ -24,7 +24,9 @@ module Playbook
24
24
  prop :validation_message, type: Playbook::Props::String, default: ""
25
25
 
26
26
  def classnames
27
- classname + inline_class + compact_class + show_arrow_class
27
+ ([classname] + [inline_class, compact_class, show_arrow_class])
28
+ .reject(&:empty?)
29
+ .join(" ")
28
30
  end
29
31
 
30
32
  def all_attributes
@@ -44,7 +46,7 @@ module Playbook
44
46
  end
45
47
 
46
48
  def inline_class
47
- inline ? " inline " : " "
49
+ inline ? "inline" : ""
48
50
  end
49
51
 
50
52
  def compact_class
@@ -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');
@@ -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 `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.
@@ -10,9 +10,9 @@ const TableStickyLeftColumns = () => {
10
10
  >
11
11
  <thead>
12
12
  <tr>
13
- <th id="1">{'Column 1'}</th>
14
- <th id="2">{'Column 2'}</th>
15
- <th id="3">{'Column 3'}</th>
13
+ <th data-sticky-id="1">{'Column 1'}</th>
14
+ <th data-sticky-id="2">{'Column 2'}</th>
15
+ <th data-sticky-id="3">{'Column 3'}</th>
16
16
  <th>{'Column 4'}</th>
17
17
  <th>{'Column 5'}</th>
18
18
  <th>{'Column 6'}</th>
@@ -29,9 +29,9 @@ const TableStickyLeftColumns = () => {
29
29
  </thead>
30
30
  <tbody>
31
31
  <tr>
32
- <td id="1">{'Value 1'}</td>
33
- <td id="2">{'Value 2'}</td>
34
- <td id="3">{'Value 3'}</td>
32
+ <td data-sticky-id="1">{'Value 1'}</td>
33
+ <td data-sticky-id="2">{'Value 2'}</td>
34
+ <td data-sticky-id="3">{'Value 3'}</td>
35
35
  <td>{'Value 4'}</td>
36
36
  <td>{'Value 5'}</td>
37
37
  <td>{'Value 6'}</td>
@@ -46,9 +46,9 @@ const TableStickyLeftColumns = () => {
46
46
  <td>{'Value 15'}</td>
47
47
  </tr>
48
48
  <tr>
49
- <td id="1">{'Value 1'}</td>
50
- <td id="2">{'Value 2'}</td>
51
- <td id="3">{'Value 3'}</td>
49
+ <td data-sticky-id="1">{'Value 1'}</td>
50
+ <td data-sticky-id="2">{'Value 2'}</td>
51
+ <td data-sticky-id="3">{'Value 3'}</td>
52
52
  <td>{'Value 4'}</td>
53
53
  <td>{'Value 5'}</td>
54
54
  <td>{'Value 6'}</td>
@@ -63,9 +63,9 @@ const TableStickyLeftColumns = () => {
63
63
  <td>{'Value 15'}</td>
64
64
  </tr>
65
65
  <tr>
66
- <td id="1">{'Value 1'}</td>
67
- <td id="2">{'Value 2'}</td>
68
- <td id="3">{'Value 3'}</td>
66
+ <td data-sticky-id="1">{'Value 1'}</td>
67
+ <td data-sticky-id="2">{'Value 2'}</td>
68
+ <td data-sticky-id="3">{'Value 3'}</td>
69
69
  <td>{'Value 4'}</td>
70
70
  <td>{'Value 5'}</td>
71
71
  <td>{'Value 6'}</td>
@@ -1,5 +1,5 @@
1
- The `stickyLeftColumn` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
1
+ The `stickyLeftColumn` prop expects an array of the column `data-sticky-id`s you want to be sticky. Make sure to add the corresponding `data-sticky-id` to the `<th>` and `<td>`.
2
2
 
3
- If you are using the sub-component variant, then you will pass the id to `<Table.Header>` and `<Table.Cell>`
3
+ If you are using the sub-component variant, then you will pass the `data-sticky-id` to `<Table.Header>` and `<Table.Cell>`
4
4
 
5
- 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 `stickyLeftColumn` prop.
5
+ 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 `stickyLeftColumn` prop.
@@ -22,9 +22,9 @@ const TableStickyRightColumns = () => {
22
22
  <th>{'Column 10'}</th>
23
23
  <th>{'Column 11'}</th>
24
24
  <th>{'Column 12'}</th>
25
- <th id="13">{'Column 13'}</th>
26
- <th id="14">{'Column 14'}</th>
27
- <th id="15">{'Column 15'}</th>
25
+ <th data-sticky-id="13">{'Column 13'}</th>
26
+ <th data-sticky-id="14">{'Column 14'}</th>
27
+ <th data-sticky-id="15">{'Column 15'}</th>
28
28
  </tr>
29
29
  </thead>
30
30
  <tbody>
@@ -41,9 +41,9 @@ const TableStickyRightColumns = () => {
41
41
  <td>{'Value 10'}</td>
42
42
  <td>{'Value 11'}</td>
43
43
  <td>{'Value 12'}</td>
44
- <td id="13">{'Value 13'}</td>
45
- <td id="14">{'Value 14'}</td>
46
- <td id="15">{'Value 15'}</td>
44
+ <td data-sticky-id="13">{'Value 13'}</td>
45
+ <td data-sticky-id="14">{'Value 14'}</td>
46
+ <td data-sticky-id="15">{'Value 15'}</td>
47
47
  </tr>
48
48
  <tr>
49
49
  <td>{'Value 1'}</td>
@@ -58,9 +58,9 @@ const TableStickyRightColumns = () => {
58
58
  <td>{'Value 10'}</td>
59
59
  <td>{'Value 11'}</td>
60
60
  <td>{'Value 12'}</td>
61
- <td id="13">{'Value 13'}</td>
62
- <td id="14">{'Value 14'}</td>
63
- <td id="15">{'Value 15'}</td>
61
+ <td data-sticky-id="13">{'Value 13'}</td>
62
+ <td data-sticky-id="14">{'Value 14'}</td>
63
+ <td data-sticky-id="15">{'Value 15'}</td>
64
64
  </tr>
65
65
  <tr>
66
66
  <td>{'Value 1'}</td>
@@ -75,9 +75,9 @@ const TableStickyRightColumns = () => {
75
75
  <td>{'Value 10'}</td>
76
76
  <td>{'Value 11'}</td>
77
77
  <td>{'Value 12'}</td>
78
- <td id="13">{'Value 13'}</td>
79
- <td id="14">{'Value 14'}</td>
80
- <td id="15">{'Value 15'}</td>
78
+ <td data-sticky-id="13">{'Value 13'}</td>
79
+ <td data-sticky-id="14">{'Value 14'}</td>
80
+ <td data-sticky-id="15">{'Value 15'}</td>
81
81
  </tr>
82
82
  </tbody>
83
83
  </Table>
@@ -1,5 +1,5 @@
1
- The `stickyRightColumn` prop works in the same way as the above `stickyLeftColumn` prop. It expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
1
+ The `stickyRightColumn` prop works in the same way as the above `stickyLeftColumn` prop. It expects an array of the column `data-sticky-id`s you want to be sticky. Make sure to add the corresponding `data-sticky-id` to the `<th>` and `<td>`.
2
2
 
3
- If you are using the sub-component variant, then you will pass the id to `<Table.Header>` and `<Table.Cell>`
3
+ If you are using the sub-component variant, then you will pass the `data-sticky-id` to `<Table.Header>` and `<Table.Cell>`
4
4
 
5
- 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 the `stickyRightColumn` prop.
5
+ 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 the `stickyRightColumn` prop.
@@ -19,6 +19,7 @@
19
19
  value: "checkbox-value",
20
20
  name: "main-checkbox-selectable",
21
21
  indeterminate_main: true,
22
+ indeterminate_main_labels: ["", ""],
22
23
  id: "checkbox-selectable"
23
24
  }) %>
24
25
  <% end %>
@@ -20,7 +20,7 @@ const TitleTruncate = (props) => {
20
20
  marginBottom="md"
21
21
  size={4}
22
22
  text={lorem}
23
- truncate="1"
23
+ truncate={1}
24
24
  {...props}
25
25
  />
26
26
 
@@ -32,7 +32,7 @@ const TitleTruncate = (props) => {
32
32
  marginBottom="md"
33
33
  size={4}
34
34
  text={lorem}
35
- truncate="2"
35
+ truncate={2}
36
36
  {...props}
37
37
  />
38
38
 
@@ -43,7 +43,7 @@ const TitleTruncate = (props) => {
43
43
  <Title
44
44
  size={4}
45
45
  text={lorem}
46
- truncate="3"
46
+ truncate={3}
47
47
  {...props}
48
48
  />
49
49
  </Flex>
@@ -0,0 +1,4 @@
1
+ ##### Prop
2
+ `truncate` | **Type**: Enum | **Values**: 1 | 2 | 3 | 4 | 5
3
+
4
+ The `truncate` prop truncates overflowing text up to a maximum of five rows and adds an ellipsis at the end.
@@ -0,0 +1,14 @@
1
+ <%= pb_rails("button", props: {
2
+ text: "Click to Open",
3
+ id: "click-tooltip-trigger-1",
4
+ variant: "primary"
5
+ }) %>
6
+
7
+ <%= pb_rails("tooltip", props: {
8
+ trigger_element_selector: "#click-tooltip-trigger-1",
9
+ tooltip_id: "click-tooltip-1",
10
+ position: "top",
11
+ use_click_to_open: true
12
+ }) do %>
13
+ Tooltip opened by click! Click trigger again to close.
14
+ <% end %>
@@ -0,0 +1 @@
1
+ Set the prop `use_click_to_open` as `true` so that the tooltip will only appear when an item is clicked rather than hovered over.
@@ -9,6 +9,7 @@ examples:
9
9
  - tooltip_with_icon_circle: Icon Circle Tooltip
10
10
  - tooltip_delay_rails: Delay
11
11
  - tooltip_show_tooltip: Show Tooltip
12
+ - tooltip_click_open: Click to Open
12
13
 
13
14
  react:
14
15
  - tooltip_default_react: Default
@@ -19,60 +19,75 @@ export default class PbTooltip extends PbEnhancedElement {
19
19
  }
20
20
 
21
21
  this.triggerElements.forEach((trigger) => {
22
- const method = this.triggerMethod
22
+ const method = this.effectiveTriggerMethod
23
23
  const interactionEnabled = this.tooltipInteraction
24
24
 
25
25
  if (method === 'click') {
26
- trigger.addEventListener('click', () => {
27
- this.showTooltip(trigger)
28
- })
29
- } else {
30
- trigger.addEventListener('mouseenter', () => {
31
- clearSafeZoneListener(this)
32
- clearTimeout(this.mouseleaveTimeout)
33
- this.currentTrigger = trigger
34
- const delayOpen = this.delayOpen ? parseInt(this.delayOpen) : TOOLTIP_TIMEOUT
35
- this.mouseenterTimeout = setTimeout(() => {
36
- this.showTooltip(trigger)
37
- if (interactionEnabled) {
38
- this.checkCloseTooltip(trigger)
26
+ trigger.addEventListener('click', (e) => {
27
+ if (this.useClickToOpen) {
28
+ e.preventDefault()
29
+ if (this.isTooltipVisible()) {
30
+ this.hideTooltip()
31
+ } else {
32
+ this.showTooltip(trigger)
39
33
  }
40
- }, delayOpen)
34
+ } else {
35
+ this.showTooltip(trigger)
36
+ }
41
37
  })
38
+ } else {
39
+ if (!this.useClickToOpen) {
40
+ trigger.addEventListener('mouseenter', () => {
41
+ clearSafeZoneListener(this)
42
+ clearTimeout(this.mouseleaveTimeout)
43
+ this.currentTrigger = trigger
44
+ const delayOpen = this.delayOpen ? parseInt(this.delayOpen) : TOOLTIP_TIMEOUT
45
+ this.mouseenterTimeout = setTimeout(() => {
46
+ this.showTooltip(trigger)
47
+ if (interactionEnabled) {
48
+ this.checkCloseTooltip(trigger)
49
+ }
50
+ }, delayOpen)
51
+ })
42
52
 
43
- trigger.addEventListener('mouseleave', () => {
44
- clearTimeout(this.mouseenterTimeout)
45
- if (this.delayClose) {
46
- const delayClose = parseInt(this.delayClose)
47
- this.mouseleaveTimeout = setTimeout(() => {
53
+ trigger.addEventListener('mouseleave', () => {
54
+ clearTimeout(this.mouseenterTimeout)
55
+ if (this.delayClose) {
56
+ const delayClose = parseInt(this.delayClose)
57
+ this.mouseleaveTimeout = setTimeout(() => {
58
+ if (interactionEnabled) {
59
+ this.attachSafeZoneListener()
60
+ } else {
61
+ this.hideTooltip()
62
+ }
63
+ }, delayClose)
64
+ } else {
48
65
  if (interactionEnabled) {
49
66
  this.attachSafeZoneListener()
50
67
  } else {
51
68
  this.hideTooltip()
52
69
  }
53
- }, delayClose)
54
- } else {
55
- if (interactionEnabled) {
56
- this.attachSafeZoneListener()
57
- } else {
58
- this.hideTooltip()
59
70
  }
60
- }
61
- })
62
-
63
- if (interactionEnabled) {
64
- this.tooltip.addEventListener('mouseenter', () => {
65
- clearSafeZoneListener(this)
66
71
  })
67
72
 
68
- this.tooltip.addEventListener('mouseleave', () => {
69
- this.attachSafeZoneListener()
70
- })
73
+ if (interactionEnabled) {
74
+ this.tooltip.addEventListener('mouseenter', () => {
75
+ clearSafeZoneListener(this)
76
+ })
77
+
78
+ this.tooltip.addEventListener('mouseleave', () => {
79
+ this.attachSafeZoneListener()
80
+ })
81
+ }
71
82
  }
72
83
  }
73
84
  })
74
85
  }
75
86
 
87
+ isTooltipVisible() {
88
+ return this.tooltip && this.tooltip.classList.contains('show')
89
+ }
90
+
76
91
  attachSafeZoneListener() {
77
92
  clearSafeZoneListener(this)
78
93
  this.safeZoneHandler = (e) => {
@@ -145,7 +160,7 @@ export default class PbTooltip extends PbEnhancedElement {
145
160
 
146
161
  this.tooltip.classList.add('show')
147
162
 
148
- if (this.triggerMethod === 'click') {
163
+ if (this.effectiveTriggerMethod === 'click' && !this.useClickToOpen) {
149
164
  clearTimeout(this.autoHideTimeout)
150
165
  this.autoHideTimeout = setTimeout(() => {
151
166
  this.hideTooltip()
@@ -224,6 +239,14 @@ export default class PbTooltip extends PbEnhancedElement {
224
239
  return this.element.dataset.pbTooltipTriggerMethod || 'hover'
225
240
  }
226
241
 
242
+ get useClickToOpen() {
243
+ return this.element.dataset.pbTooltipUseClickToOpen === 'true'
244
+ }
245
+
246
+ get effectiveTriggerMethod() {
247
+ return this.useClickToOpen ? 'click' : this.triggerMethod
248
+ }
249
+
227
250
  get tooltipInteraction() {
228
251
  return this.element.dataset.pbTooltipInteraction === 'true'
229
252
  }