playbook_ui 14.20.0.pre.rc.1 → 14.20.0

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 (98) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/Components/TableActionBar.tsx +61 -35
  3. data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +36 -22
  4. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +6 -19
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_with_state.jsx +1 -0
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_with_state.md +3 -1
  7. data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +1 -1
  8. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +77 -19
  9. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_rails.html.erb +31 -0
  10. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_rails.md +5 -0
  11. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select.jsx +56 -0
  12. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select.md +3 -0
  13. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display.jsx +58 -0
  14. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display.md +3 -0
  15. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display_rails.html.erb +20 -0
  16. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display_rails.md +1 -0
  17. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_rails.html.erb +19 -0
  18. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_rails.md +3 -0
  19. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.html.erb +20 -0
  20. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.jsx +57 -0
  21. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.md +1 -0
  22. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_custom_options.html.erb +50 -0
  23. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_custom_options.jsx +105 -0
  24. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_default.html.erb +22 -0
  25. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_default.jsx +67 -0
  26. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +11 -1
  27. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +5 -0
  28. data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb +3 -3
  29. data/app/pb_kits/playbook/pb_dropdown/dropdown.rb +16 -2
  30. data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.html.erb +34 -13
  31. data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.rb +3 -1
  32. data/app/pb_kits/playbook/pb_dropdown/hooks/useHandleOnKeydown.tsx +0 -6
  33. data/app/pb_kits/playbook/pb_dropdown/index.js +334 -41
  34. data/app/pb_kits/playbook/pb_dropdown/keyboard_accessibility.js +39 -12
  35. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +16 -12
  36. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +78 -12
  37. data/app/pb_kits/playbook/pb_dropdown/subcomponents/MultiSelectTriggerDisplay.tsx +58 -0
  38. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -0
  39. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -0
  40. data/app/pb_kits/playbook/pb_form_group/_error_state_mixin.scss +2 -2
  41. data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +19 -12
  42. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +2 -2
  43. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.html.erb +11 -11
  44. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.jsx +11 -11
  45. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb +11 -11
  46. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx +11 -11
  47. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled.html.erb +11 -11
  48. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled.jsx +11 -11
  49. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options.html.erb +11 -11
  50. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options.jsx +11 -11
  51. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_default.html.erb +11 -11
  52. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_default.jsx +11 -11
  53. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent.html.erb +11 -11
  54. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent.jsx +11 -11
  55. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent_default.html.erb +11 -11
  56. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent_default.jsx +11 -11
  57. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.html.erb +11 -11
  58. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.jsx +11 -11
  59. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.html.erb +11 -11
  60. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.jsx +11 -11
  61. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.jsx +11 -11
  62. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb +11 -11
  63. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb +11 -11
  64. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.jsx +11 -11
  65. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.html.erb +11 -11
  66. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.md +2 -0
  67. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids_react.jsx +11 -11
  68. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids_react.md +3 -1
  69. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.html.erb +22 -22
  70. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.jsx +22 -22
  71. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.html.erb +22 -22
  72. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.jsx +22 -22
  73. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx +11 -11
  74. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx +11 -11
  75. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_form.html.erb +11 -11
  76. data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +73 -3
  77. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.jsx +23 -0
  78. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.md +1 -0
  79. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +1 -0
  80. data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -0
  81. data/dist/chunks/_typeahead-MUu4QW0I.js +22 -0
  82. data/dist/chunks/_weekday_stacked-CZJor-EY.js +45 -0
  83. data/dist/chunks/lazysizes-DHz07jlL.js +1 -0
  84. data/dist/chunks/lib-DFF1N868.js +29 -0
  85. data/dist/chunks/{pb_form_validation-WWvUXPKD.js → pb_form_validation-D1Bwm-op.js} +1 -1
  86. data/dist/chunks/vendor.js +1 -1
  87. data/dist/playbook-doc.js +2 -2
  88. data/dist/playbook-rails-react-bindings.js +1 -1
  89. data/dist/playbook-rails.js +1 -1
  90. data/dist/playbook.css +1 -1
  91. data/lib/playbook/kit_base.rb +3 -3
  92. data/lib/playbook/version.rb +1 -1
  93. metadata +27 -8
  94. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb +0 -10
  95. data/dist/chunks/_typeahead-BPSIWtFT.js +0 -22
  96. data/dist/chunks/_weekday_stacked-CaTzIguf.js +0 -45
  97. data/dist/chunks/lazysizes-B7xYodB-.js +0 -1
  98. data/dist/chunks/lib-B20MXZcW.js +0 -29
@@ -4,80 +4,80 @@ import MultiLevelSelect from "../_multi_level_select";
4
4
  const treeData = [
5
5
  {
6
6
  label: "HQ",
7
- value: "HQ",
7
+ value: "hQ",
8
8
  id: "hq1",
9
9
  },
10
10
  {
11
11
  label: "Philadelphia",
12
- value: "Philadelphia",
12
+ value: "philadelphia",
13
13
  id: "phl1",
14
14
  hideRadio: true,
15
15
  children: [
16
16
  {
17
17
  label: "Marketing & Sales PHL",
18
- value: "Marketing & Sales PHL",
18
+ value: "marketingAndSalesPhl",
19
19
  id: "marketingPHL1",
20
20
  },
21
21
  {
22
22
  label: "Installation Office PHL",
23
- value: "Installation Office PHL",
23
+ value: "installationOfficePhl",
24
24
  id: "installationPHL1",
25
25
  },
26
26
  {
27
27
  label: "Warehouse PHL",
28
- value: "Warehouse PHL",
28
+ value: "warehousePhl",
29
29
  id: "warehousePHL1",
30
30
  },
31
31
  ]
32
32
  },
33
33
  {
34
34
  label: "New Jersey",
35
- value: "New Jersey",
35
+ value: "newJersey",
36
36
  id: "nj2",
37
37
  hideRadio: true,
38
38
  children: [
39
39
  {
40
40
  label: "New Jersey",
41
- value: "New Jersey",
41
+ value: "newJersey",
42
42
  id: "nj3",
43
43
  hideRadio: true,
44
44
  children: [
45
45
  {
46
46
  label: "Marketing & Sales NJ",
47
- value: "Marketing & Sales NJ",
47
+ value: "marketingAndSalesNj",
48
48
  id: "marketingNJ1",
49
49
  },
50
50
  {
51
51
  label: "Installation Office NJ",
52
- value: "Installation Office NJ",
52
+ value: "installationOfficeNj",
53
53
  id: "installationNJ1",
54
54
  },
55
55
  {
56
56
  label: "Warehouse NJ",
57
- value: "Warehouse NJ",
57
+ value: "warehouseNj",
58
58
  id: "warehouseNJ1",
59
59
  },
60
60
  ],
61
61
  },
62
62
  {
63
63
  label: "Princeton",
64
- value: "Princeton",
64
+ value: "princeton",
65
65
  id: "princeton1",
66
66
  hideRadio: true,
67
67
  children: [
68
68
  {
69
69
  label: "Marketing & Sales Princeton",
70
- value: "Marketing & Sales Princeton",
70
+ value: "marketingAndSalesPrinceton",
71
71
  id: "marketingPR1",
72
72
  },
73
73
  {
74
74
  label: "Installation Office Princeton",
75
- value: "Installation Office Princeton",
75
+ value: "installationOfficePrinceton",
76
76
  id: "installationPR1",
77
77
  },
78
78
  {
79
79
  label: "Warehouse Princeton",
80
- value: "Warehouse Princeton",
80
+ value: "warehousePrinceton",
81
81
  id: "warehousePR1",
82
82
  },
83
83
  ]
@@ -86,46 +86,46 @@ const treeData = [
86
86
  },
87
87
  {
88
88
  label: "Maryland",
89
- value: "Maryland",
89
+ value: "maryland",
90
90
  id: "MD1",
91
91
  hideRadio: true,
92
92
  children: [
93
93
  {
94
94
  label: "Marketing & Sales MD",
95
- value: "Marketing & Sales MD",
95
+ value: "marketingAndSalesMd",
96
96
  id: "marketingMD1",
97
97
  },
98
98
  {
99
99
  label: "Installation Office MD",
100
- value: "Installation Office MD",
100
+ value: "installationOfficeMd",
101
101
  id: "installationMD1",
102
102
  },
103
103
  {
104
104
  label: "Warehouse MD",
105
- value: "Warehouse MD",
105
+ value: "warehouseMd",
106
106
  id: "warehouseMD1",
107
107
  },
108
108
  ]
109
109
  },
110
110
  {
111
111
  label: "Connecticut",
112
- value: "Connecticut",
112
+ value: "connecticut",
113
113
  id: "CT1",
114
114
  hideRadio: true,
115
115
  children: [
116
116
  {
117
117
  label: "Marketing & Sales CT",
118
- value: "Marketing & Sales CT",
118
+ value: "marketingAndSalesCt",
119
119
  id: "marketingCT1",
120
120
  },
121
121
  {
122
122
  label: "Installation Office CT",
123
- value: "Installation Office CT",
123
+ value: "installationOfficeCt",
124
124
  id: "installationCT1",
125
125
  },
126
126
  {
127
127
  label: "Warehouse CT",
128
- value: "Warehouse CT",
128
+ value: "warehouseCt",
129
129
  id: "warehouseCT1",
130
130
  },
131
131
  ]
@@ -5,25 +5,25 @@ import Badge from "../../pb_badge/_badge";
5
5
  const treeData = [
6
6
  {
7
7
  label: "Power Home Remodeling",
8
- value: "Power Home Remodeling",
8
+ value: "powerHomeRemodeling",
9
9
  id: "powerhome1",
10
10
  expanded: true,
11
11
  children: [
12
12
  {
13
13
  label: "People",
14
- value: "People",
14
+ value: "people",
15
15
  id: "people1",
16
16
  expanded: true,
17
17
  status: "active",
18
18
  children: [
19
19
  {
20
20
  label: "Talent Acquisition",
21
- value: "Talent Acquisition",
21
+ value: "talentAcquisition",
22
22
  id: "talent1",
23
23
  },
24
24
  {
25
25
  label: "Business Affairs",
26
- value: "Business Affairs",
26
+ value: "businessAffairs",
27
27
  id: "business1",
28
28
  status: "active",
29
29
  variant: "primary",
@@ -31,12 +31,12 @@ const treeData = [
31
31
  children: [
32
32
  {
33
33
  label: "Initiatives",
34
- value: "Initiatives",
34
+ value: "initiatives",
35
35
  id: "initiative1",
36
36
  },
37
37
  {
38
38
  label: "Learning & Development",
39
- value: "Learning & Development",
39
+ value: "learningAndDevelopment",
40
40
  id: "development1",
41
41
  status: "Inactive",
42
42
  },
@@ -44,31 +44,31 @@ const treeData = [
44
44
  },
45
45
  {
46
46
  label: "People Experience",
47
- value: "People Experience",
47
+ value: "peopleExperience",
48
48
  id: "experience1",
49
49
  },
50
50
  ],
51
51
  },
52
52
  {
53
53
  label: "Contact Center",
54
- value: "Contact Center",
54
+ value: "contactCenter",
55
55
  id: "contact1",
56
56
  status: "Inactive",
57
57
  variant: "error",
58
58
  children: [
59
59
  {
60
60
  label: "Appointment Management",
61
- value: "Appointment Management",
61
+ value: "appointmentManagement",
62
62
  id: "appointment1",
63
63
  },
64
64
  {
65
65
  label: "Customer Service",
66
- value: "Customer Service",
66
+ value: "customerService",
67
67
  id: "customer1",
68
68
  },
69
69
  {
70
70
  label: "Energy",
71
- value: "Energy",
71
+ value: "energy",
72
72
  id: "energy1",
73
73
  },
74
74
  ],
@@ -5,25 +5,25 @@ import Badge from "../../pb_badge/_badge";
5
5
  const treeData = [
6
6
  {
7
7
  label: "Power Home Remodeling",
8
- value: "Power Home Remodeling",
8
+ value: "powerHomeRemodeling",
9
9
  id: "powerhome1",
10
10
  expanded: true,
11
11
  children: [
12
12
  {
13
13
  label: "People",
14
- value: "People",
14
+ value: "people",
15
15
  id: "people1",
16
16
  expanded: true,
17
17
  status: "active",
18
18
  children: [
19
19
  {
20
20
  label: "Talent Acquisition",
21
- value: "Talent Acquisition",
21
+ value: "talentAcquisition",
22
22
  id: "talent1",
23
23
  },
24
24
  {
25
25
  label: "Business Affairs",
26
- value: "Business Affairs",
26
+ value: "businessAffairs",
27
27
  id: "business1",
28
28
  status: "active",
29
29
  variant: "primary",
@@ -31,12 +31,12 @@ const treeData = [
31
31
  children: [
32
32
  {
33
33
  label: "Initiatives",
34
- value: "Initiatives",
34
+ value: "initiatives",
35
35
  id: "initiative1",
36
36
  },
37
37
  {
38
38
  label: "Learning & Development",
39
- value: "Learning & Development",
39
+ value: "learningAndDevelopment",
40
40
  id: "development1",
41
41
  status: "Inactive",
42
42
  },
@@ -44,31 +44,31 @@ const treeData = [
44
44
  },
45
45
  {
46
46
  label: "People Experience",
47
- value: "People Experience",
47
+ value: "peopleExperience",
48
48
  id: "experience1",
49
49
  },
50
50
  ],
51
51
  },
52
52
  {
53
53
  label: "Contact Center",
54
- value: "Contact Center",
54
+ value: "contactCenter",
55
55
  id: "contact1",
56
56
  status: "Inactive",
57
57
  variant: "error",
58
58
  children: [
59
59
  {
60
60
  label: "Appointment Management",
61
- value: "Appointment Management",
61
+ value: "appointmentManagement",
62
62
  id: "appointment1",
63
63
  },
64
64
  {
65
65
  label: "Customer Service",
66
- value: "Customer Service",
66
+ value: "customerService",
67
67
  id: "customer1",
68
68
  },
69
69
  {
70
70
  label: "Energy",
71
- value: "Energy",
71
+ value: "energy",
72
72
  id: "energy1",
73
73
  },
74
74
  ],
@@ -2,62 +2,62 @@
2
2
 
3
3
  <% treeData = [{
4
4
  label: "Power Home Remodeling",
5
- value: "Power Home Remodeling",
5
+ value: "powerHomeRemodeling",
6
6
  id: "powerhome1",
7
7
  expanded: true,
8
8
  children: [
9
9
  {
10
10
  label: "People",
11
- value: "People",
11
+ value: "people",
12
12
  id: "people1",
13
13
  children: [
14
14
  {
15
15
  label: "Talent Acquisition",
16
- value: "Talent Acquisition",
16
+ value: "talentAcquisition",
17
17
  id: "talent1",
18
18
  },
19
19
  {
20
20
  label: "Business Affairs",
21
- value: "Business Affairs",
21
+ value: "businessAffairs",
22
22
  id: "business1",
23
23
  children: [
24
24
  {
25
25
  label: "Initiatives",
26
- value: "Initiatives",
26
+ value: "initiatives",
27
27
  id: "initiative1",
28
28
  },
29
29
  {
30
30
  label: "Learning & Development",
31
- value: "Learning & Development",
31
+ value: "learningAndDevelopment",
32
32
  id: "development1",
33
33
  },
34
34
  ],
35
35
  },
36
36
  {
37
37
  label: "People Experience",
38
- value: "People Experience",
38
+ value: "peopleExperience",
39
39
  id: "experience1",
40
40
  },
41
41
  ],
42
42
  },
43
43
  {
44
44
  label: "Contact Center",
45
- value: "Contact Center",
45
+ value: "contactCenter",
46
46
  id: "contact1",
47
47
  children: [
48
48
  {
49
49
  label: "Appointment Management",
50
- value: "Appointment Management",
50
+ value: "appointmentManagement",
51
51
  id: "appointment1",
52
52
  },
53
53
  {
54
54
  label: "Customer Service",
55
- value: "Customer Service",
55
+ value: "customerService",
56
56
  id: "customer1",
57
57
  },
58
58
  {
59
59
  label: "Energy",
60
- value: "Energy",
60
+ value: "energy",
61
61
  id: "energy1",
62
62
  },
63
63
  ],
@@ -29,6 +29,7 @@ import { GenericObject, Noop } from '../types'
29
29
  * @prop {boolean} async - whether Typeahead should fetch data from
30
30
  * a remote location to populate the options
31
31
  * @prop {string} label - the text for the optional typeahead input label
32
+ * @prop {boolean} preserveSearchInput - whether to preserve the input value when the field loses focus
32
33
  */
33
34
 
34
35
  type TypeaheadProps = {
@@ -54,6 +55,7 @@ type TypeaheadProps = {
54
55
  optionsByContext?: Record<string, Array<{ label: string; value?: string }>>
55
56
  searchContextSelector?: string,
56
57
  clearOnContextChange?: boolean,
58
+ preserveSearchInput?: boolean,
57
59
  } & GlobalProps
58
60
 
59
61
  export type SelectValueType = {
@@ -93,8 +95,44 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
93
95
  optionsByContext = {},
94
96
  searchContextSelector,
95
97
  clearOnContextChange = false,
98
+ preserveSearchInput = false, // Default to false to maintain backward compatibility
96
99
  ...props
97
100
  }: TypeaheadProps) => {
101
+ // State to manage the input value when preserveSearchInput is true
102
+ const [inputValue, setInputValue] = useState("")
103
+
104
+ // If preserveSearchInput is true, we need to control the input value
105
+ const handleInputChange = preserveSearchInput
106
+ ? (newValue: string, actionMeta: {action: string}) => {
107
+ // Only update the input value for certain actions
108
+ if (actionMeta.action === 'input-change') {
109
+ setInputValue(newValue)
110
+ } else if (actionMeta.action === 'menu-close' && !props.value) {
111
+ // Don't clear the input when the menu closes without a selection
112
+ // unless the component is controlled and has a value
113
+ } else if (actionMeta.action === 'set-value') {
114
+ // When an option is selected, clear the input
115
+ setInputValue('')
116
+ }
117
+
118
+ // If the original onInputChange was provided, call it too
119
+ if (props.onInputChange) {
120
+ return props.onInputChange(newValue, actionMeta)
121
+ }
122
+ return newValue
123
+ }
124
+ : props.onInputChange
125
+
126
+ // Handle blur events if we're preserving input
127
+ const handleBlur = preserveSearchInput
128
+ ? (event: React.FocusEvent<HTMLInputElement>) => {
129
+ // Do not clear input on blur - the value is preserved in our state
130
+ if (props.onBlur) {
131
+ props.onBlur(event)
132
+ }
133
+ }
134
+ : props.onBlur
135
+
98
136
  const selectProps = {
99
137
  cacheOptions: true,
100
138
  components: {
@@ -124,11 +162,29 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
124
162
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
125
163
  onMultiValueClick: (_option: SelectValueType): any => undefined,
126
164
  pillColor: pillColor,
165
+ ...(preserveSearchInput ? { inputValue } : {}),
166
+ onInputChange: handleInputChange,
167
+ onBlur: handleBlur,
127
168
  ...props,
128
169
  }
129
170
 
130
171
  const [contextValue, setContextValue] = useState("")
131
172
 
173
+ // Add listener for clearing
174
+ useEffect(() => {
175
+ const handleClear = () => {
176
+ if (preserveSearchInput) {
177
+ setInputValue('')
178
+ }
179
+ }
180
+
181
+ document.addEventListener(`pb-typeahead-kit-${selectProps.id}:clear`, handleClear)
182
+
183
+ return () => {
184
+ document.removeEventListener(`pb-typeahead-kit-${selectProps.id}:clear`, handleClear)
185
+ }
186
+ }, [selectProps.id, preserveSearchInput])
187
+
132
188
  useEffect(() => {
133
189
  if (searchContextSelector) {
134
190
  const searchContextElement = document.getElementById(searchContextSelector)
@@ -137,7 +193,12 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
137
193
  const handleContextChange = (e: Event) => {
138
194
  const target = e.target as HTMLInputElement;
139
195
  setContextValue(target.value);
140
- if (clearOnContextChange) document.dispatchEvent(new CustomEvent(`pb-typeahead-kit-${selectProps.id}:clear`))
196
+ if (clearOnContextChange) {
197
+ document.dispatchEvent(new CustomEvent(`pb-typeahead-kit-${selectProps.id}:clear`))
198
+ if (preserveSearchInput) {
199
+ setInputValue('')
200
+ }
201
+ }
141
202
  }
142
203
 
143
204
  if (searchContextElement) searchContextElement.addEventListener('change', handleContextChange)
@@ -146,7 +207,7 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
146
207
  if (searchContextElement) searchContextElement.removeEventListener('change', handleContextChange)
147
208
  }
148
209
  }
149
- }, [searchContextSelector])
210
+ }, [searchContextSelector, clearOnContextChange, selectProps.id, preserveSearchInput])
150
211
 
151
212
  const contextArray = optionsByContext[contextValue]
152
213
  if (Array.isArray(contextArray) && contextArray.length > 0) {
@@ -168,7 +229,12 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
168
229
  onChange(_data)
169
230
  }
170
231
  }
171
-
232
+
233
+ // If a value is selected and we're preserving input on blur, clear the input
234
+ if (action === 'select-option' && preserveSearchInput) {
235
+ setInputValue('')
236
+ }
237
+
172
238
  if (action === 'select-option') {
173
239
  if (selectProps.onMultiValueClick) selectProps.onMultiValueClick(option)
174
240
  const multiValueClearEvent = new CustomEvent(`pb-typeahead-kit-${selectProps.id}-result-option-select`, { detail: option ? option : _data })
@@ -181,6 +247,10 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
181
247
  if (action === 'clear') {
182
248
  const multiValueClearEvent = new CustomEvent(`pb-typeahead-kit-${selectProps.id}-result-clear`)
183
249
  document.dispatchEvent(multiValueClearEvent)
250
+ // If preserving input on blur, also clear input on explicit clear
251
+ if (preserveSearchInput) {
252
+ setInputValue('')
253
+ }
184
254
  }
185
255
  }
186
256
 
@@ -0,0 +1,23 @@
1
+ import React from 'react'
2
+
3
+ import Typeahead from '../_typeahead'
4
+
5
+ const options = [
6
+ { label: 'Orange', value: '#FFA500' },
7
+ { label: 'Red', value: '#FF0000' },
8
+ { label: 'Green', value: '#00FF00' },
9
+ { label: 'Blue', value: '#0000FF' },
10
+ ]
11
+
12
+ const TypeaheadPreserveInput = (props) => {
13
+ return (
14
+ <Typeahead
15
+ label="Colors"
16
+ options={options}
17
+ preserveSearchInput
18
+ {...props}
19
+ />
20
+ )
21
+ }
22
+
23
+ export default TypeaheadPreserveInput
@@ -0,0 +1 @@
1
+ By default, text is not preserved in the typeahead kit when you click off of the input field. You can utilize the `preserveSearchInput` prop in order to prevent text from being cleared when the field loses focus
@@ -34,3 +34,4 @@ examples:
34
34
  - typeahead_with_pills_color: With Pills (Custom Color)
35
35
  - typeahead_truncated_text: Truncated Text
36
36
  - typeahead_disabled: Disabled
37
+ - typeahead_preserve_input: Preserve Search Input
@@ -15,3 +15,4 @@ export { default as TypeaheadWithPillsColor } from './_typeahead_with_pills_colo
15
15
  export { default as TypeaheadTruncatedText } from './_typeahead_truncated_text.jsx'
16
16
  export { default as TypeaheadReactHook } from './_typeahead_react_hook.jsx'
17
17
  export { default as TypeaheadDisabled } from './_typeahead_disabled.jsx'
18
+ export { default as TypeaheadPreserveInput } from './_typeahead_preserve_input.jsx'