playbook_ui 14.19.0.pre.alpha.PLAY1968typeaheadpreservesearchreact7796 → 14.19.0.pre.alpha.PLAY1973formpillinternalsizing7728
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/pb_dropdown/docs/_dropdown_with_custom_display.jsx +0 -11
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb +2 -33
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.md +1 -3
- data/app/pb_kits/playbook/pb_dropdown/index.js +1 -14
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +1 -1
- data/app/pb_kits/playbook/pb_form_group/_error_state_mixin.scss +2 -2
- data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx +7 -13
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +2 -2
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_default.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_default.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent_default.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent_default.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.md +0 -2
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids_react.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids_react.md +1 -3
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.html.erb +22 -22
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.jsx +22 -22
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.html.erb +22 -22
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.jsx +22 -22
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_form.html.erb +11 -11
- data/app/pb_kits/playbook/pb_person/_person.tsx +2 -12
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +3 -70
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/index.js +0 -1
- data/dist/chunks/{_typeahead-D8guY7O0.js → _typeahead-BPSIWtFT.js} +1 -1
- data/dist/chunks/_weekday_stacked-PfWrqC3z.js +45 -0
- data/dist/chunks/vendor.js +1 -1
- 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 +1 -1
- metadata +4 -6
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.jsx +0 -23
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.md +0 -1
- data/dist/chunks/_weekday_stacked-8LDnfK3v.js +0 -45
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: eb03eeb6d4f6845e9a28ad2d458559cb1f0efc49c982e66a49e9c94dde91a5d3
|
|
4
|
+
data.tar.gz: 5c8d3da2bcce5b6ee616e1ce946ed8c2cb38357c18d99fdb373a9f1d2dd84d1f
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 9d9c9d3367dc7b29172ae603ede775506ce76e2285547e769be6348e4e59185ba316e78ffccc1377a5baf79a73b1c4212596098498683c370a9405aaa89afffc
|
|
7
|
+
data.tar.gz: 70a2d58d2832f1a98f0652b980b9b3bc396eada7fd1cee732e848096c17db18cae3637bf6f218c927c839c543cad4c8a13b9f6aa63febd0669ab8543c19becc8
|
|
@@ -6,7 +6,6 @@ import Flex from '../../pb_flex/_flex'
|
|
|
6
6
|
import FlexItem from '../../pb_flex/_flex_item'
|
|
7
7
|
import Avatar from '../../pb_avatar/_avatar'
|
|
8
8
|
import User from '../../pb_user/_user'
|
|
9
|
-
import Body from '../../pb_body/_body'
|
|
10
9
|
|
|
11
10
|
const DropdownWithCustomDisplay = (props) => {
|
|
12
11
|
const [selectedOption, setSelectedOption] = useState();
|
|
@@ -51,20 +50,10 @@ const DropdownWithCustomDisplay = (props) => {
|
|
|
51
50
|
<>
|
|
52
51
|
{
|
|
53
52
|
selectedOption && (
|
|
54
|
-
<Flex align="center">
|
|
55
53
|
<Avatar
|
|
56
54
|
name={selectedOption.label}
|
|
57
55
|
size="xs"
|
|
58
56
|
/>
|
|
59
|
-
<Body
|
|
60
|
-
marginX="xs"
|
|
61
|
-
text={selectedOption.label}
|
|
62
|
-
/>
|
|
63
|
-
<Badge
|
|
64
|
-
text={selectedOption.status}
|
|
65
|
-
variant={selectedOption.status == "Offline" ? "neutral" : selectedOption.status == "Online" ? "success" : "warning"}
|
|
66
|
-
/>
|
|
67
|
-
</Flex>
|
|
68
57
|
)
|
|
69
58
|
}
|
|
70
59
|
</>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
Optionally utilize `customDisplay` on the `Dropdown.Trigger` subcomponent to customize its content after an option is selected.
|
|
1
|
+
Optionally utilize `customDisplay` on the `Dropdown.Trigger` subcomponent to customize its content after an option is selected. The component passed to customDisplay will be rendered to the left of the default text-based display. In this example the Avatar kit is being used.
|
|
2
2
|
|
|
3
3
|
The `placeholder` prop can also be used to customize the placeholder text for the default `Dropdown.Trigger`.
|
|
4
4
|
|
|
@@ -38,11 +38,7 @@
|
|
|
38
38
|
|
|
39
39
|
<%
|
|
40
40
|
custom_display = capture do
|
|
41
|
-
pb_rails("
|
|
42
|
-
concat(pb_rails("avatar", props: { name: "", size: "xs", id: "dropdown-avatar" }))
|
|
43
|
-
concat(pb_rails("body", props: { text: "", size: "xs", margin_x: "xs", id: "dropdown-avatar-name" }))
|
|
44
|
-
concat(pb_rails("badge", props: { text: "", id: "dropdown-avatar-status" }))
|
|
45
|
-
end
|
|
41
|
+
pb_rails("avatar", props: { name: "Courtney Long", size: "xs" })
|
|
46
42
|
end
|
|
47
43
|
%>
|
|
48
44
|
|
|
@@ -66,31 +62,4 @@
|
|
|
66
62
|
<% end %>
|
|
67
63
|
<% end %>
|
|
68
64
|
<% end %>
|
|
69
|
-
<% end %>
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
<script>
|
|
73
|
-
document.addEventListener("pb:dropdown:selected", (e) => {
|
|
74
|
-
const option = e.detail;
|
|
75
|
-
const dropdown = e.target;
|
|
76
|
-
|
|
77
|
-
const display = dropdown.querySelector("#dropdown_trigger_custom_display");
|
|
78
|
-
if (!display) return;
|
|
79
|
-
|
|
80
|
-
const nameEl = display.querySelector("#dropdown-avatar-name");
|
|
81
|
-
if (nameEl) nameEl.textContent = option.label;
|
|
82
|
-
|
|
83
|
-
const avatarEl = display.querySelector("#dropdown-avatar").querySelector(".avatar_wrapper");
|
|
84
|
-
const initials = (option.label[0] + option.label.split(" ").pop()[0]).toUpperCase();
|
|
85
|
-
if (avatarEl) {
|
|
86
|
-
avatarEl.dataset.name = option.label;
|
|
87
|
-
avatarEl.setAttribute("data-initials", initials);
|
|
88
|
-
}
|
|
89
|
-
const badgeEl = display.querySelector("#dropdown-avatar-status");
|
|
90
|
-
const variant = option.status === "Online" ? "success" : option.status === "Offline" ? "neutral" : "warning";
|
|
91
|
-
if (badgeEl) {
|
|
92
|
-
badgeEl.querySelector("span").textContent = option.status;
|
|
93
|
-
badgeEl.className = 'pb_badge_kit_' + variant;
|
|
94
|
-
}
|
|
95
|
-
});
|
|
96
|
-
</script>
|
|
65
|
+
<% end %>
|
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
Optionally utilize `custom_display` on the `dropdown/dropdown_trigger` subcomponent to customize its content after an option is selected.
|
|
2
|
-
|
|
3
|
-
Make use of a script to help set the custom_display with the correct value. By using the pb:dropdown:selected event listener, you can target the kits with a querySelector and update them dynamically with the values needed to match the selected option. Make sure to add an ID to the kits being passed in.
|
|
1
|
+
Optionally utilize `custom_display` on the `dropdown/dropdown_trigger` subcomponent to customize its content after an option is selected. The component passed to custom_display will be rendered to the left of the default text-based display. In this example the Avatar kit is being used.
|
|
4
2
|
|
|
5
3
|
The `placeholder` prop can also be used to customize the placeholder text for the default `dropdown/dropdown_trigger`.
|
|
6
4
|
|
|
@@ -142,22 +142,9 @@ export default class PbDropdown extends PbEnhancedElement {
|
|
|
142
142
|
const customDisplayElement = this.element.querySelector(
|
|
143
143
|
"#dropdown_trigger_custom_display"
|
|
144
144
|
);
|
|
145
|
-
|
|
146
145
|
if (triggerElement) {
|
|
147
146
|
const selectedLabel = JSON.parse(value).label;
|
|
148
|
-
|
|
149
|
-
triggerElement.textContent = ""
|
|
150
|
-
this.element.setAttribute("data-option-selected", value);
|
|
151
|
-
const selectedObj = JSON.parse(value);
|
|
152
|
-
this.element.dispatchEvent(
|
|
153
|
-
new CustomEvent("pb:dropdown:selected", {
|
|
154
|
-
detail: selectedObj,
|
|
155
|
-
bubbles: true,
|
|
156
|
-
})
|
|
157
|
-
);
|
|
158
|
-
} else {
|
|
159
|
-
triggerElement.textContent = selectedLabel
|
|
160
|
-
}
|
|
147
|
+
triggerElement.textContent = selectedLabel;
|
|
161
148
|
if (customDisplayElement) {
|
|
162
149
|
customDisplayElement.style.display = "block";
|
|
163
150
|
customDisplayElement.style.paddingRight = "8px";
|
|
@@ -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)) {
|
|
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)) {
|
|
53
53
|
align-items: flex-start;
|
|
54
54
|
|
|
55
55
|
.pb_text_input_kit.error {
|
|
@@ -81,11 +81,6 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
|
|
|
81
81
|
|
|
82
82
|
const formatStreetAdr = (address: string): string => preserveCase ? address : titleize(address)
|
|
83
83
|
|
|
84
|
-
const uppercaseState = state?.toUpperCase() ?? ''
|
|
85
|
-
|
|
86
|
-
const fields = [address, addressCont, city, homeId, homeUrl, houseStyle, state, territory, zipcode]
|
|
87
|
-
const hasAllEmptyProps = fields.every(field => field === undefined || field === null || field === '')
|
|
88
|
-
|
|
89
84
|
return (
|
|
90
85
|
<div
|
|
91
86
|
className={classes(className, dark)}
|
|
@@ -93,8 +88,7 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
|
|
|
93
88
|
{...dataProps}
|
|
94
89
|
{...htmlProps}
|
|
95
90
|
>
|
|
96
|
-
{
|
|
97
|
-
{emphasis == 'street' && !hasAllEmptyProps &&
|
|
91
|
+
{emphasis == 'street' &&
|
|
98
92
|
<div>
|
|
99
93
|
<Title
|
|
100
94
|
className="pb_home_address_street_address"
|
|
@@ -111,11 +105,11 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
|
|
|
111
105
|
{titleize(addressCont)}
|
|
112
106
|
</Title>
|
|
113
107
|
<Body color="light">
|
|
114
|
-
{`${
|
|
108
|
+
{`${titleize(city)}, ${state.toUpperCase()} ${zipcode}`}
|
|
115
109
|
</Body>
|
|
116
110
|
</div>
|
|
117
111
|
}
|
|
118
|
-
{emphasis == 'city' &&
|
|
112
|
+
{emphasis == 'city' &&
|
|
119
113
|
<div>
|
|
120
114
|
<Body color="light">
|
|
121
115
|
{joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
|
|
@@ -128,18 +122,18 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
|
|
|
128
122
|
size={4}
|
|
129
123
|
tag="span"
|
|
130
124
|
>
|
|
131
|
-
{`${
|
|
125
|
+
{`${titleize(city)}, ${state.toUpperCase()}`}
|
|
132
126
|
</Title>
|
|
133
127
|
<Body
|
|
134
128
|
color="light"
|
|
135
129
|
tag="span"
|
|
136
130
|
>
|
|
137
|
-
{` ${zipcode
|
|
131
|
+
{` ${zipcode}`}
|
|
138
132
|
</Body>
|
|
139
133
|
</div>
|
|
140
134
|
</div>
|
|
141
135
|
}
|
|
142
|
-
{emphasis == 'none' &&
|
|
136
|
+
{emphasis == 'none' &&
|
|
143
137
|
<div>
|
|
144
138
|
<Body dark={dark}>
|
|
145
139
|
{joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
|
|
@@ -150,7 +144,7 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
|
|
|
150
144
|
color="light"
|
|
151
145
|
dark={dark}
|
|
152
146
|
>
|
|
153
|
-
{`${
|
|
147
|
+
{`${titleize(city)}, ${state.toUpperCase()} ${zipcode}`}
|
|
154
148
|
</Body>
|
|
155
149
|
</div>
|
|
156
150
|
</div>
|
|
@@ -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,
|
|
199
|
-
setSingleSelectedItem({ id: [id], value
|
|
198
|
+
const { id, value } = selectedItem[0];
|
|
199
|
+
setSingleSelectedItem({ id: [id], value, item: selectedItem });
|
|
200
200
|
}
|
|
201
201
|
}
|
|
202
202
|
}
|
|
@@ -1,62 +1,62 @@
|
|
|
1
1
|
<% treeData = [{
|
|
2
2
|
label: "Power Home Remodeling",
|
|
3
|
-
value: "
|
|
3
|
+
value: "Power Home Remodeling",
|
|
4
4
|
id: "100",
|
|
5
5
|
expanded: true,
|
|
6
6
|
children: [
|
|
7
7
|
{
|
|
8
8
|
label: "People",
|
|
9
|
-
value: "
|
|
9
|
+
value: "People",
|
|
10
10
|
id: "101",
|
|
11
11
|
expanded: true,
|
|
12
12
|
children: [
|
|
13
13
|
{
|
|
14
14
|
label: "Talent Acquisition",
|
|
15
|
-
value: "
|
|
15
|
+
value: "Talent Acquisition",
|
|
16
16
|
id: "102",
|
|
17
17
|
},
|
|
18
18
|
{
|
|
19
19
|
label: "Business Affairs",
|
|
20
|
-
value: "
|
|
20
|
+
value: "Business Affairs",
|
|
21
21
|
id: "103",
|
|
22
22
|
children: [
|
|
23
23
|
{
|
|
24
24
|
label: "Initiatives",
|
|
25
|
-
value: "
|
|
25
|
+
value: "Initiatives",
|
|
26
26
|
id: "104",
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
label: "Learning & Development",
|
|
30
|
-
value: "
|
|
30
|
+
value: "Learning & Development",
|
|
31
31
|
id: "105",
|
|
32
32
|
},
|
|
33
33
|
],
|
|
34
34
|
},
|
|
35
35
|
{
|
|
36
36
|
label: "People Experience",
|
|
37
|
-
value: "
|
|
37
|
+
value: "People Experience",
|
|
38
38
|
id: "106",
|
|
39
39
|
},
|
|
40
40
|
],
|
|
41
41
|
},
|
|
42
42
|
{
|
|
43
43
|
label: "Contact Center",
|
|
44
|
-
value: "
|
|
44
|
+
value: "Contact Center",
|
|
45
45
|
id: "107",
|
|
46
46
|
children: [
|
|
47
47
|
{
|
|
48
48
|
label: "Appointment Management",
|
|
49
|
-
value: "
|
|
49
|
+
value: "Appointment Management",
|
|
50
50
|
id: "108",
|
|
51
51
|
},
|
|
52
52
|
{
|
|
53
53
|
label: "Customer Service",
|
|
54
|
-
value: "
|
|
54
|
+
value: "Customer Service",
|
|
55
55
|
id: "109",
|
|
56
56
|
},
|
|
57
57
|
{
|
|
58
58
|
label: "Energy",
|
|
59
|
-
value: "
|
|
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: "
|
|
7
|
+
value: "Power Home Remodeling",
|
|
8
8
|
id: "powerhome1",
|
|
9
9
|
expanded: true,
|
|
10
10
|
children: [
|
|
11
11
|
{
|
|
12
12
|
label: "People",
|
|
13
|
-
value: "
|
|
13
|
+
value: "People",
|
|
14
14
|
id: "people1",
|
|
15
15
|
expanded: true,
|
|
16
16
|
children: [
|
|
17
17
|
{
|
|
18
18
|
label: "Talent Acquisition",
|
|
19
|
-
value: "
|
|
19
|
+
value: "Talent Acquisition",
|
|
20
20
|
id: "talent1",
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
label: "Business Affairs",
|
|
24
|
-
value: "
|
|
24
|
+
value: "Business Affairs",
|
|
25
25
|
id: "business1",
|
|
26
26
|
children: [
|
|
27
27
|
{
|
|
28
28
|
label: "Initiatives",
|
|
29
|
-
value: "
|
|
29
|
+
value: "Initiatives",
|
|
30
30
|
id: "initiative1",
|
|
31
31
|
},
|
|
32
32
|
{
|
|
33
33
|
label: "Learning & Development",
|
|
34
|
-
value: "
|
|
34
|
+
value: "Learning & Development",
|
|
35
35
|
id: "development1",
|
|
36
36
|
},
|
|
37
37
|
],
|
|
38
38
|
},
|
|
39
39
|
{
|
|
40
40
|
label: "People Experience",
|
|
41
|
-
value: "
|
|
41
|
+
value: "People Experience",
|
|
42
42
|
id: "experience1",
|
|
43
43
|
},
|
|
44
44
|
],
|
|
45
45
|
},
|
|
46
46
|
{
|
|
47
47
|
label: "Contact Center",
|
|
48
|
-
value: "
|
|
48
|
+
value: "Contact Center",
|
|
49
49
|
id: "contact1",
|
|
50
50
|
children: [
|
|
51
51
|
{
|
|
52
52
|
label: "Appointment Management",
|
|
53
|
-
value: "
|
|
53
|
+
value: "Appointment Management",
|
|
54
54
|
id: "appointment1",
|
|
55
55
|
},
|
|
56
56
|
{
|
|
57
57
|
label: "Customer Service",
|
|
58
|
-
value: "
|
|
58
|
+
value: "Customer Service",
|
|
59
59
|
id: "customer1",
|
|
60
60
|
},
|
|
61
61
|
{
|
|
62
62
|
label: "Energy",
|
|
63
|
-
value: "
|
|
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: "
|
|
3
|
+
value: "Power Home Remodeling",
|
|
4
4
|
id: "100",
|
|
5
5
|
expanded: true,
|
|
6
6
|
children: [
|
|
7
7
|
{
|
|
8
8
|
label: "People",
|
|
9
|
-
value: "
|
|
9
|
+
value: "People",
|
|
10
10
|
id: "101",
|
|
11
11
|
expanded: true,
|
|
12
12
|
children: [
|
|
13
13
|
{
|
|
14
14
|
label: "Talent Acquisition",
|
|
15
|
-
value: "
|
|
15
|
+
value: "Talent Acquisition",
|
|
16
16
|
id: "102",
|
|
17
17
|
},
|
|
18
18
|
{
|
|
19
19
|
label: "Business Affairs",
|
|
20
|
-
value: "
|
|
20
|
+
value: "Business Affairs",
|
|
21
21
|
id: "103",
|
|
22
22
|
children: [
|
|
23
23
|
{
|
|
24
24
|
label: "Initiatives",
|
|
25
|
-
value: "
|
|
25
|
+
value: "Initiatives",
|
|
26
26
|
id: "104",
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
label: "Learning & Development",
|
|
30
|
-
value: "
|
|
30
|
+
value: "Learning & Development",
|
|
31
31
|
id: "105",
|
|
32
32
|
},
|
|
33
33
|
],
|
|
34
34
|
},
|
|
35
35
|
{
|
|
36
36
|
label: "People Experience",
|
|
37
|
-
value: "
|
|
37
|
+
value: "People Experience",
|
|
38
38
|
id: "106",
|
|
39
39
|
},
|
|
40
40
|
],
|
|
41
41
|
},
|
|
42
42
|
{
|
|
43
43
|
label: "Contact Center",
|
|
44
|
-
value: "
|
|
44
|
+
value: "Contact Center",
|
|
45
45
|
id: "107",
|
|
46
46
|
children: [
|
|
47
47
|
{
|
|
48
48
|
label: "Appointment Management",
|
|
49
|
-
value: "
|
|
49
|
+
value: "Appointment Management",
|
|
50
50
|
id: "108",
|
|
51
51
|
},
|
|
52
52
|
{
|
|
53
53
|
label: "Customer Service",
|
|
54
|
-
value: "
|
|
54
|
+
value: "Customer Service",
|
|
55
55
|
id: "109",
|
|
56
56
|
},
|
|
57
57
|
{
|
|
58
58
|
label: "Energy",
|
|
59
|
-
value: "
|
|
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: "
|
|
7
|
+
value: "Power Home Remodeling",
|
|
8
8
|
id: "powerhome1",
|
|
9
9
|
expanded: true,
|
|
10
10
|
children: [
|
|
11
11
|
{
|
|
12
12
|
label: "People",
|
|
13
|
-
value: "
|
|
13
|
+
value: "People",
|
|
14
14
|
id: "people1",
|
|
15
15
|
expanded: true,
|
|
16
16
|
children: [
|
|
17
17
|
{
|
|
18
18
|
label: "Talent Acquisition",
|
|
19
|
-
value: "
|
|
19
|
+
value: "Talent Acquisition",
|
|
20
20
|
id: "talent1",
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
label: "Business Affairs",
|
|
24
|
-
value: "
|
|
24
|
+
value: "Business Affairs",
|
|
25
25
|
id: "business1",
|
|
26
26
|
children: [
|
|
27
27
|
{
|
|
28
28
|
label: "Initiatives",
|
|
29
|
-
value: "
|
|
29
|
+
value: "Initiatives",
|
|
30
30
|
id: "initiative1",
|
|
31
31
|
},
|
|
32
32
|
{
|
|
33
33
|
label: "Learning & Development",
|
|
34
|
-
value: "
|
|
34
|
+
value: "Learning & Development",
|
|
35
35
|
id: "development1",
|
|
36
36
|
},
|
|
37
37
|
],
|
|
38
38
|
},
|
|
39
39
|
{
|
|
40
40
|
label: "People Experience",
|
|
41
|
-
value: "
|
|
41
|
+
value: "People Experience",
|
|
42
42
|
id: "experience1",
|
|
43
43
|
},
|
|
44
44
|
],
|
|
45
45
|
},
|
|
46
46
|
{
|
|
47
47
|
label: "Contact Center",
|
|
48
|
-
value: "
|
|
48
|
+
value: "Contact Center",
|
|
49
49
|
id: "contact1",
|
|
50
50
|
children: [
|
|
51
51
|
{
|
|
52
52
|
label: "Appointment Management",
|
|
53
|
-
value: "
|
|
53
|
+
value: "Appointment Management",
|
|
54
54
|
id: "appointment1",
|
|
55
55
|
},
|
|
56
56
|
{
|
|
57
57
|
label: "Customer Service",
|
|
58
|
-
value: "
|
|
58
|
+
value: "Customer Service",
|
|
59
59
|
id: "customer1",
|
|
60
60
|
},
|
|
61
61
|
{
|
|
62
62
|
label: "Energy",
|
|
63
|
-
value: "
|
|
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: "
|
|
3
|
+
value: "Power Home Remodeling",
|
|
4
4
|
id: "100",
|
|
5
5
|
expanded: true,
|
|
6
6
|
children: [
|
|
7
7
|
{
|
|
8
8
|
label: "People",
|
|
9
|
-
value: "
|
|
9
|
+
value: "People",
|
|
10
10
|
id: "101",
|
|
11
11
|
expanded: true,
|
|
12
12
|
children: [
|
|
13
13
|
{
|
|
14
14
|
label: "Talent Acquisition",
|
|
15
|
-
value: "
|
|
15
|
+
value: "Talent Acquisition",
|
|
16
16
|
id: "102",
|
|
17
17
|
},
|
|
18
18
|
{
|
|
19
19
|
label: "Business Affairs",
|
|
20
|
-
value: "
|
|
20
|
+
value: "Business Affairs",
|
|
21
21
|
id: "103",
|
|
22
22
|
children: [
|
|
23
23
|
{
|
|
24
24
|
label: "Initiatives",
|
|
25
|
-
value: "
|
|
25
|
+
value: "Initiatives",
|
|
26
26
|
id: "104",
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
label: "Learning & Development",
|
|
30
|
-
value: "
|
|
30
|
+
value: "Learning & Development",
|
|
31
31
|
id: "105",
|
|
32
32
|
},
|
|
33
33
|
],
|
|
34
34
|
},
|
|
35
35
|
{
|
|
36
36
|
label: "People Experience",
|
|
37
|
-
value: "
|
|
37
|
+
value: "People Experience",
|
|
38
38
|
id: "106",
|
|
39
39
|
},
|
|
40
40
|
],
|
|
41
41
|
},
|
|
42
42
|
{
|
|
43
43
|
label: "Contact Center",
|
|
44
|
-
value: "
|
|
44
|
+
value: "Contact Center",
|
|
45
45
|
id: "107",
|
|
46
46
|
children: [
|
|
47
47
|
{
|
|
48
48
|
label: "Appointment Management",
|
|
49
|
-
value: "
|
|
49
|
+
value: "Appointment Management",
|
|
50
50
|
id: "108",
|
|
51
51
|
},
|
|
52
52
|
{
|
|
53
53
|
label: "Customer Service",
|
|
54
|
-
value: "
|
|
54
|
+
value: "Customer Service",
|
|
55
55
|
id: "109",
|
|
56
56
|
},
|
|
57
57
|
{
|
|
58
58
|
label: "Energy",
|
|
59
|
-
value: "
|
|
59
|
+
value: "Energy",
|
|
60
60
|
id: "110",
|
|
61
61
|
},
|
|
62
62
|
],
|