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
@@ -10,6 +10,7 @@ import { globalProps } from "../../utilities/globalProps";
10
10
  import { useHandleOnKeyDown } from "../hooks/useHandleOnKeydown";
11
11
 
12
12
  import DropdownContext from "../context";
13
+ import MultiSelectTriggerDisplay from "./MultiSelectTriggerDisplay";
13
14
 
14
15
  import Body from "../../pb_body/_body";
15
16
  import Icon from "../../pb_icon/_icon";
@@ -44,12 +45,14 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
44
45
  const {
45
46
  autocomplete,
46
47
  filterItem,
48
+ handleBackspace,
47
49
  handleChange,
48
50
  handleWrapperClick,
49
51
  inputRef,
50
52
  inputWrapperRef,
51
53
  isDropDownClosed,
52
54
  isInputFocused,
55
+ multiSelect,
53
56
  selected,
54
57
  setIsInputFocused,
55
58
  toggleDropdown,
@@ -69,9 +72,19 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
69
72
  const triggerWrapperClasses = buildCss(
70
73
  "dropdown_trigger_wrapper",
71
74
  isInputFocused && "focus",
72
- !autocomplete && "select_only"
75
+ !autocomplete && !multiSelect && "select_only"
73
76
  );
74
77
 
78
+ const selectedArray = Array.isArray(selected)
79
+ ? selected
80
+ : selected && Object.keys(selected).length
81
+ ? [selected]
82
+ : [];
83
+
84
+ const joinedLabels = multiSelect
85
+ ? ""
86
+ : selectedArray.map((option) => option.label).join(", ");
87
+
75
88
  const customDisplayPlaceholder = selected?.label ? (
76
89
  ""
77
90
  ) : autocomplete ? (
@@ -82,8 +95,8 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
82
95
  "Select..."
83
96
  );
84
97
 
85
- const defaultDisplayPlaceholder = selected?.label
86
- ? selected.label
98
+ const defaultDisplayPlaceholder = joinedLabels
99
+ ? joinedLabels
87
100
  : autocomplete
88
101
  ? ""
89
102
  : placeholder
@@ -125,23 +138,60 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
125
138
  paddingX="sm"
126
139
  paddingY="xs"
127
140
  >
128
- <FlexItem>
129
- <Flex align="center">
141
+ <FlexItem fixedSize={multiSelect ? "85%" : ""}>
142
+ <Flex align="center"
143
+ wrap
144
+ >
130
145
  {customDisplay ? (
131
146
  <Flex align="center">
132
147
  {customDisplay}
133
148
  <Body dark={dark}
134
- paddingLeft={`${selected.label ? "xs" : "none"}`}
149
+ paddingLeft={`${joinedLabels ? "xs" : "none"}`}
135
150
  >
136
151
  {customDisplayPlaceholder}
137
152
  </Body>
138
153
  </Flex>
139
154
  ) : (
140
- <Body dark={dark}
141
- text={defaultDisplayPlaceholder}
142
- />
155
+ multiSelect ? (
156
+ <>
157
+ <MultiSelectTriggerDisplay
158
+ autocomplete={autocomplete}
159
+ dark={dark}
160
+ placeholder={placeholder}
161
+ selected={selectedArray}
162
+ />
163
+ {autocomplete && (
164
+ <input
165
+ className="dropdown_input"
166
+ onChange={handleChange}
167
+ onClick={(e) => {
168
+ e.stopPropagation();// keep the wrapper’s handler from firing
169
+ toggleDropdown();
170
+ }}
171
+ onFocus={() => setIsInputFocused(true)}
172
+ onKeyDown={(e) => {
173
+ handleKeyDown(e);
174
+ e.stopPropagation(); //Fixes issue with keyboard accessibility
175
+ }}
176
+ placeholder={
177
+ joinedLabels
178
+ ? ""
179
+ : placeholder
180
+ ? placeholder
181
+ : "Select..."
182
+ }
183
+ ref={inputRef}
184
+ value={filterItem}
185
+ />
186
+ )}
187
+ </>
188
+ ) : (
189
+ <Body dark={dark}
190
+ text={defaultDisplayPlaceholder}
191
+ />
192
+ )
143
193
  )}
144
- {autocomplete && (
194
+ {autocomplete && !multiSelect && (
145
195
  <input
146
196
  className="dropdown_input"
147
197
  onChange={handleChange}
@@ -152,7 +202,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
152
202
  onFocus={() => setIsInputFocused(true)}
153
203
  onKeyDown={handleKeyDown}
154
204
  placeholder={
155
- selected.label
205
+ joinedLabels
156
206
  ? ""
157
207
  : placeholder
158
208
  ? placeholder
@@ -164,14 +214,29 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
164
214
  )}
165
215
  </Flex>
166
216
  </FlexItem>
217
+ <FlexItem>
167
218
  <Body
219
+ alignItems="center"
168
220
  dark={dark}
169
221
  display="flex"
170
222
  htmlOptions={{
171
223
  onClick: (e: Event) => {e.stopPropagation();handleWrapperClick()}
172
224
  }}
173
225
  key={`${isDropDownClosed ? "chevron-down" : "chevron-up"}`}
174
- >
226
+ >
227
+ {
228
+ selectedArray.length > 0 && (
229
+ <div onClick={(e)=>{e.stopPropagation();handleBackspace()}}>
230
+ <Icon
231
+ cursor="pointer"
232
+ dark={dark}
233
+ icon="times"
234
+ paddingRight="xs"
235
+ size="sm"
236
+ />
237
+ </div>
238
+ )
239
+ }
175
240
  <Icon
176
241
  cursor="pointer"
177
242
  dark={dark}
@@ -179,6 +244,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
179
244
  size="sm"
180
245
  />
181
246
  </Body>
247
+ </FlexItem>
182
248
  </Flex>
183
249
  </>
184
250
  )
@@ -0,0 +1,58 @@
1
+ import React, { useContext } from "react";
2
+ import FormPill from "../../pb_form_pill/_form_pill";
3
+ import Flex from "../../pb_flex/_flex";
4
+ import Body from "../../pb_body/_body";
5
+ import { GenericObject } from "../../types";
6
+ import DropdownContext
7
+ from "../context";
8
+ type MultiSelectTriggerDisplayProps = {
9
+ autocomplete?: boolean;
10
+ selected: GenericObject[];
11
+ placeholder?: string;
12
+ dark?: boolean;
13
+ };
14
+
15
+ const MultiSelectTriggerDisplay = ({
16
+ autocomplete,
17
+ selected,
18
+ placeholder,
19
+ dark = false,
20
+ }: MultiSelectTriggerDisplayProps) => {
21
+
22
+ const { setSelected, onSelect, formPillProps } = useContext(DropdownContext);
23
+
24
+ if (selected.length === 0) {
25
+ if (autocomplete) return null;
26
+ return (
27
+ <Body dark={dark}
28
+ text={placeholder ? placeholder : "Select..."}
29
+ />
30
+ )
31
+ }
32
+
33
+ const handleRemoveIconClick = (option: GenericObject) => {
34
+ setSelected((prev: GenericObject[]) => {
35
+ const next = prev.filter((item) => item.label !== option.label);
36
+ onSelect && onSelect(next);
37
+ return next;
38
+ });
39
+ }
40
+
41
+ return (
42
+ <Flex wrap>
43
+ {selected.map((option, i) => (
44
+ <FormPill
45
+ dark={dark}
46
+ key={i}
47
+ marginRight="xs"
48
+ onClick={(e)=>{e.stopPropagation();handleRemoveIconClick(option)}}
49
+ tabIndex={0}
50
+ text={option.label}
51
+ {...formPillProps}
52
+ />
53
+ ))}
54
+ </Flex>
55
+ );
56
+ };
57
+
58
+ export default MultiSelectTriggerDisplay;
@@ -99,6 +99,7 @@
99
99
  <%= form.url_field :example_url_field, props: { label: true } %>
100
100
  <%= form.text_area :example_text_area, props: { label: true } %>
101
101
  <%= form.dropdown_field :example_dropdown, props: { label: true, options: example_dropdown_options } %>
102
+ <%= form.dropdown_field :example_dropdown_multi, props: { label: true, options: example_dropdown_options, multi_select: true } %>
102
103
  <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true } %>
103
104
  <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
104
105
  <%= form.check_box :example_checkbox,
@@ -98,6 +98,7 @@
98
98
  <%= form.url_field :example_url_field_validation, props: { label: true, required: true } %>
99
99
  <%= form.text_area :example_text_area_validation, props: { label: true, required: true } %>
100
100
  <%= form.dropdown_field :example_dropdown_validation, props: { label: true, options: example_dropdown_options, required: true } %>
101
+ <%= form.dropdown_field :example_dropdown_validation_multi, props: { label: true, options: example_dropdown_options, multi_select: true, required: true } %>
101
102
  <%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true, validation_message: "Please, select an option." } %>
102
103
  <%= form.collection_select :example_collection_select_validation, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
103
104
  <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
@@ -23,7 +23,7 @@
23
23
  @mixin error-state-right-side-select-kit {
24
24
  &:has(.pb_text_input_kit:not(.error)):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper.error),
25
25
  &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper) {
26
- &:not(:has(.pb_phone_number_input)) {
26
+ &:not(:has(.pb_phone_number_input)):not(:has(.passphrase-text-input)) {
27
27
  align-items: flex-start;
28
28
 
29
29
  .pb_select_kit_wrapper {
@@ -49,7 +49,7 @@
49
49
 
50
50
  @mixin error-state-left-side-select-kit {
51
51
  &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper):has(.pb_text_input_kit.error) {
52
- &:not(:has(.pb_phone_number_input)) {
52
+ &:not(:has(.pb_phone_number_input)):not(:has(.passphrase-text-input)) {
53
53
  align-items: flex-start;
54
54
 
55
55
  .pb_text_input_kit.error {
@@ -20,9 +20,12 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
20
20
  margin-bottom: 2px;
21
21
  margin-top: 2px;
22
22
  cursor: pointer;
23
- .pb_form_pill_text, .pb_form_pill_close, .pb_form_pill_tag{
23
+ .pb_form_pill_text, .pb_form_pill_tag {
24
24
  font-size: $font_small !important;
25
25
  }
26
+ .pb_form_pill_close {
27
+ font-size: 17px;
28
+ }
26
29
 
27
30
  &[class*=wrapped] {
28
31
  height: max-content;
@@ -96,7 +99,9 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
96
99
  display: flex;
97
100
  align-items: center;
98
101
  height: 17px;
99
- border-radius: calc(50%);
102
+ width: 17px;
103
+ justify-content: center;
104
+ border-radius: 50%;
100
105
  cursor: pointer;
101
106
  @if ($color_name == "neutral") {
102
107
  color: $text_lt_default;
@@ -146,8 +151,7 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
146
151
  outline-offset: -1px;
147
152
  }
148
153
  .pb_form_pill_icon {
149
- height: 12px !important;
150
- width: 12px !important;
154
+ height: 0.875em;
151
155
  padding-right: $space_xs;
152
156
  + .pb_form_pill_text, + .pb_form_pill_tag,
153
157
  + .pb_tooltip_kit .pb_form_pill_text, + .pb_tooltip_kit .pb_form_pill_tag,
@@ -158,7 +162,7 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
158
162
  &.small {
159
163
  height: 17px;
160
164
  padding: 0 $space-xs;
161
- .pb_form_pill_text, .pb_form_pill_close, .pb_form_pill_tag {
165
+ .pb_form_pill_text, .pb_form_pill_tag {
162
166
  font-size: $font_smallest !important;
163
167
  }
164
168
  .pb_form_pill_text, .pb_form_pill_tag {
@@ -166,17 +170,20 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
166
170
  padding: 0 $space_xxs;
167
171
  }
168
172
  .pb_form_pill_close {
169
- height: 10px;
170
- border-radius: calc(50%);
173
+ height: 14px;
174
+ width: 14px;
175
+ font-size: 15px;
176
+ border-radius: 50%;
171
177
  }
172
178
  [class^=pb_avatar_kit] .avatar_wrapper {
173
- flex-basis: 16px;
174
- height: 16px;
175
- margin-top: 2px;
176
- width: 16px;
177
- &::before { line-height: 16.5px; }
179
+ flex-basis: 14px;
180
+ height: 14px;
181
+ margin-top: 3px;
182
+ width: 14px;
183
+ &::before { line-height: 15px; }
178
184
  }
179
185
  .pb_form_pill_icon {
186
+ height: 0.75em;
180
187
  padding-right: $space_xxs;
181
188
  + .pb_form_pill_text, + .pb_form_pill_tag,
182
189
  + .pb_tooltip_kit .pb_form_pill_text, + .pb_tooltip_kit .pb_form_pill_tag,
@@ -195,8 +195,8 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
195
195
  if (!selectedItem.length) {
196
196
  setSingleSelectedItem({ id: [], value: "", item: [] });
197
197
  } else {
198
- const { id, value } = selectedItem[0];
199
- setSingleSelectedItem({ id: [id], value, item: selectedItem });
198
+ const { id, label } = selectedItem[0];
199
+ setSingleSelectedItem({ id: [id], value: label, item: selectedItem });
200
200
  }
201
201
  }
202
202
  }
@@ -1,62 +1,62 @@
1
1
  <% treeData = [{
2
2
  label: "Power Home Remodeling",
3
- value: "Power Home Remodeling",
3
+ value: "powerHomeRemodeling",
4
4
  id: "100",
5
5
  expanded: true,
6
6
  children: [
7
7
  {
8
8
  label: "People",
9
- value: "People",
9
+ value: "people",
10
10
  id: "101",
11
11
  expanded: true,
12
12
  children: [
13
13
  {
14
14
  label: "Talent Acquisition",
15
- value: "Talent Acquisition",
15
+ value: "talentAcquisition",
16
16
  id: "102",
17
17
  },
18
18
  {
19
19
  label: "Business Affairs",
20
- value: "Business Affairs",
20
+ value: "businessAffairs",
21
21
  id: "103",
22
22
  children: [
23
23
  {
24
24
  label: "Initiatives",
25
- value: "Initiatives",
25
+ value: "initiatives",
26
26
  id: "104",
27
27
  },
28
28
  {
29
29
  label: "Learning & Development",
30
- value: "Learning & Development",
30
+ value: "learningAndDevelopment",
31
31
  id: "105",
32
32
  },
33
33
  ],
34
34
  },
35
35
  {
36
36
  label: "People Experience",
37
- value: "People Experience",
37
+ value: "peopleExperience",
38
38
  id: "106",
39
39
  },
40
40
  ],
41
41
  },
42
42
  {
43
43
  label: "Contact Center",
44
- value: "Contact Center",
44
+ value: "contactCenter",
45
45
  id: "107",
46
46
  children: [
47
47
  {
48
48
  label: "Appointment Management",
49
- value: "Appointment Management",
49
+ value: "appointmentManagement",
50
50
  id: "108",
51
51
  },
52
52
  {
53
53
  label: "Customer Service",
54
- value: "Customer Service",
54
+ value: "customerService",
55
55
  id: "109",
56
56
  },
57
57
  {
58
58
  label: "Energy",
59
- value: "Energy",
59
+ value: "energy",
60
60
  id: "110",
61
61
  },
62
62
  ],
@@ -4,63 +4,63 @@ import MultiLevelSelect from "../_multi_level_select";
4
4
  const treeData = [
5
5
  {
6
6
  label: "Power Home Remodeling",
7
- value: "Power Home Remodeling",
7
+ value: "powerHomeRemodeling",
8
8
  id: "powerhome1",
9
9
  expanded: true,
10
10
  children: [
11
11
  {
12
12
  label: "People",
13
- value: "People",
13
+ value: "people",
14
14
  id: "people1",
15
15
  expanded: true,
16
16
  children: [
17
17
  {
18
18
  label: "Talent Acquisition",
19
- value: "Talent Acquisition",
19
+ value: "talentAcquisition",
20
20
  id: "talent1",
21
21
  },
22
22
  {
23
23
  label: "Business Affairs",
24
- value: "Business Affairs",
24
+ value: "businessAffairs",
25
25
  id: "business1",
26
26
  children: [
27
27
  {
28
28
  label: "Initiatives",
29
- value: "Initiatives",
29
+ value: "initiatives",
30
30
  id: "initiative1",
31
31
  },
32
32
  {
33
33
  label: "Learning & Development",
34
- value: "Learning & Development",
34
+ value: "learningAndDevelopment",
35
35
  id: "development1",
36
36
  },
37
37
  ],
38
38
  },
39
39
  {
40
40
  label: "People Experience",
41
- value: "People Experience",
41
+ value: "peopleExperience",
42
42
  id: "experience1",
43
43
  },
44
44
  ],
45
45
  },
46
46
  {
47
47
  label: "Contact Center",
48
- value: "Contact Center",
48
+ value: "contactCenter",
49
49
  id: "contact1",
50
50
  children: [
51
51
  {
52
52
  label: "Appointment Management",
53
- value: "Appointment Management",
53
+ value: "appointmentManagement",
54
54
  id: "appointment1",
55
55
  },
56
56
  {
57
57
  label: "Customer Service",
58
- value: "Customer Service",
58
+ value: "customerService",
59
59
  id: "customer1",
60
60
  },
61
61
  {
62
62
  label: "Energy",
63
- value: "Energy",
63
+ value: "energy",
64
64
  id: "energy1",
65
65
  },
66
66
  ],
@@ -1,62 +1,62 @@
1
1
  <% treeData = [{
2
2
  label: "Power Home Remodeling",
3
- value: "Power Home Remodeling",
3
+ value: "powerHomeRemodeling",
4
4
  id: "100",
5
5
  expanded: true,
6
6
  children: [
7
7
  {
8
8
  label: "People",
9
- value: "People",
9
+ value: "people",
10
10
  id: "101",
11
11
  expanded: true,
12
12
  children: [
13
13
  {
14
14
  label: "Talent Acquisition",
15
- value: "Talent Acquisition",
15
+ value: "talentAcquisition",
16
16
  id: "102",
17
17
  },
18
18
  {
19
19
  label: "Business Affairs",
20
- value: "Business Affairs",
20
+ value: "business Affairs",
21
21
  id: "103",
22
22
  children: [
23
23
  {
24
24
  label: "Initiatives",
25
- value: "Initiatives",
25
+ value: "initiatives",
26
26
  id: "104",
27
27
  },
28
28
  {
29
29
  label: "Learning & Development",
30
- value: "Learning & Development",
30
+ value: "learningAndDevelopment",
31
31
  id: "105",
32
32
  },
33
33
  ],
34
34
  },
35
35
  {
36
36
  label: "People Experience",
37
- value: "People Experience",
37
+ value: "peopleExperience",
38
38
  id: "106",
39
39
  },
40
40
  ],
41
41
  },
42
42
  {
43
43
  label: "Contact Center",
44
- value: "Contact Center",
44
+ value: "contactCenter",
45
45
  id: "107",
46
46
  children: [
47
47
  {
48
48
  label: "Appointment Management",
49
- value: "Appointment Management",
49
+ value: "appointmentManagement",
50
50
  id: "108",
51
51
  },
52
52
  {
53
53
  label: "Customer Service",
54
- value: "Customer Service",
54
+ value: "customerService",
55
55
  id: "109",
56
56
  },
57
57
  {
58
58
  label: "Energy",
59
- value: "Energy",
59
+ value: "energy",
60
60
  id: "110",
61
61
  },
62
62
  ],
@@ -4,63 +4,63 @@ import MultiLevelSelect from "../_multi_level_select";
4
4
  const treeData = [
5
5
  {
6
6
  label: "Power Home Remodeling",
7
- value: "Power Home Remodeling",
7
+ value: "powerHomeRemodeling",
8
8
  id: "powerhome1",
9
9
  expanded: true,
10
10
  children: [
11
11
  {
12
12
  label: "People",
13
- value: "People",
13
+ value: "people",
14
14
  id: "people1",
15
15
  expanded: true,
16
16
  children: [
17
17
  {
18
18
  label: "Talent Acquisition",
19
- value: "Talent Acquisition",
19
+ value: "talentAcquisition",
20
20
  id: "talent1",
21
21
  },
22
22
  {
23
23
  label: "Business Affairs",
24
- value: "Business Affairs",
24
+ value: "businessAffairs",
25
25
  id: "business1",
26
26
  children: [
27
27
  {
28
28
  label: "Initiatives",
29
- value: "Initiatives",
29
+ value: "initiatives",
30
30
  id: "initiative1",
31
31
  },
32
32
  {
33
33
  label: "Learning & Development",
34
- value: "Learning & Development",
34
+ value: "learningAndDevelopment",
35
35
  id: "development1",
36
36
  },
37
37
  ],
38
38
  },
39
39
  {
40
40
  label: "People Experience",
41
- value: "People Experience",
41
+ value: "peopleExperience",
42
42
  id: "experience1",
43
43
  },
44
44
  ],
45
45
  },
46
46
  {
47
47
  label: "Contact Center",
48
- value: "Contact Center",
48
+ value: "contactCenter",
49
49
  id: "contact1",
50
50
  children: [
51
51
  {
52
52
  label: "Appointment Management",
53
- value: "Appointment Management",
53
+ value: "appointmentManagement",
54
54
  id: "appointment1",
55
55
  },
56
56
  {
57
57
  label: "Customer Service",
58
- value: "Customer Service",
58
+ value: "customerService",
59
59
  id: "customer1",
60
60
  },
61
61
  {
62
62
  label: "Energy",
63
- value: "Energy",
63
+ value: "energy",
64
64
  id: "energy1",
65
65
  },
66
66
  ],