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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/_playbook.scss +0 -1
- data/app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx +32 -11
- data/app/pb_kits/playbook/pb_advanced_table/Components/TableActionBar.tsx +10 -10
- data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +0 -1
- data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts +3 -3
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +58 -1
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +15 -6
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb +14 -2
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table_action_bar.js +16 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.jsx +65 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.md +5 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.html.erb +46 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling_rails.md +7 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.jsx +69 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_multi_header.jsx +107 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_multi_header.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_rails.html.erb +51 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_rails.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +14 -8
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss +7 -1
- data/app/pb_kits/playbook/pb_advanced_table/table_body.rb +3 -1
- data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +5 -1
- data/app/pb_kits/playbook/pb_advanced_table/table_header.rb +36 -0
- data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +11 -2
- data/app/pb_kits/playbook/pb_advanced_table/table_row.rb +2 -0
- data/app/pb_kits/playbook/pb_badge/_badge.scss +5 -6
- data/app/pb_kits/playbook/pb_bar_graph/barGraphTheme.ts +106 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx +33 -15
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx +33 -15
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.jsx +52 -22
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.md +3 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.jsx +12 -16
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.jsx +31 -15
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.jsx +39 -16
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.jsx +86 -38
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.md +1 -1
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx +32 -15
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx +72 -22
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md +1 -1
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.jsx +31 -15
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.jsx +37 -16
- data/app/pb_kits/playbook/pb_bar_graph/docs/_description.md +1 -3
- data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +1 -3
- data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +0 -2
- data/app/pb_kits/playbook/pb_body/docs/_body_truncate.jsx +3 -3
- data/app/pb_kits/playbook/pb_body/docs/_body_truncate_react.md +4 -0
- data/app/pb_kits/playbook/pb_checkbox/checkbox.rb +12 -1
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb +1 -1
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate_rails.md +2 -1
- data/app/pb_kits/playbook/pb_checkbox/index.js +3 -1
- data/app/pb_kits/playbook/pb_circle_chart/circleChartTheme.ts +36 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx +71 -26
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx +29 -16
- data/app/pb_kits/playbook/pb_circle_chart/docs/{_circle_chart_colors.md → _circle_chart_colors_rails.md} +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors_react.md +2 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx +28 -16
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.md +4 -2
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx +23 -15
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.jsx +81 -51
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +103 -75
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.md +4 -7
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx +19 -13
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx +30 -17
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.jsx +34 -20
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.jsx +29 -20
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx +28 -20
- data/app/pb_kits/playbook/pb_circle_chart/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_draggable/context/index.tsx +12 -4
- data/app/pb_kits/playbook/pb_draggable/context/types.ts +5 -2
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +17 -1
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +6 -0
- data/app/pb_kits/playbook/pb_dropdown/_dropdown_mixin.scss +36 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options.jsx +90 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options_react.md +4 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options.jsx +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options_react.md +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +3 -2
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx +24 -0
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +11 -1
- data/app/pb_kits/playbook/pb_gauge/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.jsx +32 -15
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors_react.md +2 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx +35 -9
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex_react.md +1 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_default.jsx +26 -14
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_disable_animation.jsx +32 -15
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_full_circle.jsx +45 -17
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_height.jsx +59 -22
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_live_data.jsx +40 -9
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.jsx +50 -18
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.jsx +31 -18
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_title.jsx +34 -17
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_units.jsx +64 -23
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_units_react.md +1 -0
- data/app/pb_kits/playbook/pb_gauge/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_gauge/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_gauge/gaugeTheme.ts +7 -1
- data/app/pb_kits/playbook/pb_line_graph/docs/_description.md +1 -3
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors.jsx +36 -17
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors_react.md +3 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_default.jsx +31 -16
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_height.jsx +63 -31
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_height.md +3 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend.jsx +35 -16
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_nonclickable.jsx +41 -16
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.jsx +107 -62
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.md +4 -7
- data/app/pb_kits/playbook/pb_line_graph/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_line_graph/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_line_graph/lineGraphTheme.ts +16 -1
- data/app/pb_kits/playbook/pb_multi_level_select/_helper_functions.tsx +18 -9
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +3 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_show_checked_children.html.erb +75 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_show_checked_children.jsx +94 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_show_checked_children.md +3 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb +3 -0
- data/app/pb_kits/playbook/pb_pagination/_pagination.tsx +4 -0
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default_rails.md +3 -1
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default_react.md +3 -1
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +30 -17
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.html.erb +10 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.jsx +26 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.md +3 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb +3 -0
- data/app/pb_kits/playbook/pb_select/select.rb +4 -2
- data/app/pb_kits/playbook/pb_table/_table.tsx +4 -4
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.jsx +8 -8
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns_react.md +1 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.jsx +12 -12
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_react.md +3 -3
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns.jsx +12 -12
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns_react.md +3 -3
- data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.html.erb +1 -0
- data/app/pb_kits/playbook/pb_title/docs/_title_truncate.jsx +3 -3
- data/app/pb_kits/playbook/pb_title/docs/_title_truncate_react.md +4 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.html.erb +14 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_rails.md +1 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_tooltip/index.js +59 -36
- data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +9 -2
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.html.erb +18 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input_rails.md +1 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +3 -0
- data/dist/chunks/_line_graph-Bz5CsVqz.js +1 -0
- data/dist/chunks/_typeahead-DuoHs8Ye.js +6 -0
- data/dist/chunks/_weekday_stacked-0GMpKTN_.js +37 -0
- data/dist/chunks/lib-DnQyMxO1.js +29 -0
- data/dist/chunks/{pb_form_validation-Dx1C9XCK.js → pb_form_validation-kl-4Jv4t.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +68 -15
- data/dist/playbook-doc.js +2 -2
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +2 -2
- metadata +51 -36
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx +0 -72
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md +0 -6
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx +0 -64
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md +0 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx +0 -38
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md +0 -1
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.jsx +0 -30
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.md +0 -1
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.jsx +0 -52
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.md +0 -1
- data/app/pb_kits/playbook/pb_walkthrough/_walkthrough.scss +0 -0
- data/app/pb_kits/playbook/pb_walkthrough/_walkthrough.tsx +0 -202
- data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_continuous.jsx +0 -69
- data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_default.jsx +0 -71
- data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_multi_beacon.jsx +0 -110
- data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_no_beacon.jsx +0 -76
- data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_no_overlay.jsx +0 -76
- data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_styled.jsx +0 -76
- data/app/pb_kits/playbook/pb_walkthrough/docs/example.yml +0 -10
- data/app/pb_kits/playbook/pb_walkthrough/docs/index.js +0 -6
- data/app/pb_kits/playbook/pb_walkthrough/walkthrough.test.jsx +0 -34
- data/dist/chunks/_typeahead-dOC1gq2X.js +0 -22
- data/dist/chunks/_weekday_stacked-Bh8iY5uA.js +0 -45
- data/dist/chunks/lib-DtCftrUN.js +0 -29
- /data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_row_styling.md → _advanced_table_row_styling_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_body/docs/{_body_truncate.md → _body_truncate_rails.md} +0 -0
- /data/app/pb_kits/playbook/pb_gauge/docs/{_gauge_colors.md → _gauge_colors_rails.md} +0 -0
- /data/app/pb_kits/playbook/pb_gauge/docs/{_gauge_complex.md → _gauge_complex_rails.md} +0 -0
- /data/app/pb_kits/playbook/pb_line_graph/docs/{_line_graph_colors.md → _line_graph_colors_rails.md} +0 -0
- /data/app/pb_kits/playbook/pb_title/docs/{_title_truncate.md → _title_truncate_rails.md} +0 -0
- /data/app/pb_kits/playbook/pb_tooltip/docs/{_tooltip_click_open.md → _tooltip_click_open_react.md} +0 -0
- /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.
|
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
|
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
|
263
|
-
|
264
|
-
|
265
|
-
|
266
|
-
|
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
|
-
|
308
|
-
|
309
|
-
|
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,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;
|
@@ -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
|
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 ? "
|
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
|
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
|
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
|
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
|
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
|
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.
|
@@ -20,7 +20,7 @@ const TitleTruncate = (props) => {
|
|
20
20
|
marginBottom="md"
|
21
21
|
size={4}
|
22
22
|
text={lorem}
|
23
|
-
truncate=
|
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=
|
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=
|
46
|
+
truncate={3}
|
47
47
|
{...props}
|
48
48
|
/>
|
49
49
|
</Flex>
|
@@ -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.
|
@@ -19,60 +19,75 @@ export default class PbTooltip extends PbEnhancedElement {
|
|
19
19
|
}
|
20
20
|
|
21
21
|
this.triggerElements.forEach((trigger) => {
|
22
|
-
const method = this.
|
22
|
+
const method = this.effectiveTriggerMethod
|
23
23
|
const interactionEnabled = this.tooltipInteraction
|
24
24
|
|
25
25
|
if (method === 'click') {
|
26
|
-
trigger.addEventListener('click', () => {
|
27
|
-
this.
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
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
|
-
}
|
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
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
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
|
-
|
69
|
-
this.
|
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.
|
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
|
}
|