playbook_ui 13.7.0.pre.alpha.play978makehighchartsadevdependencypoc1223 → 13.8.0.pre.alpha.PLAY962SingleSelect1246

Sign up to get free protection for your applications and to get access to all the features.
Files changed (31) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_currency/_currency.scss +35 -15
  3. data/app/pb_kits/playbook/pb_currency/_currency.tsx +44 -42
  4. data/app/pb_kits/playbook/pb_currency/currency.html.erb +11 -5
  5. data/app/pb_kits/playbook/pb_currency/currency.rb +10 -2
  6. data/app/pb_kits/playbook/pb_currency/docs/_currency_unstyled.html.erb +14 -0
  7. data/app/pb_kits/playbook/pb_currency/docs/_currency_unstyled.jsx +30 -0
  8. data/app/pb_kits/playbook/pb_currency/docs/_currency_unstyled.md +1 -0
  9. data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.html.erb +2 -1
  10. data/app/pb_kits/playbook/pb_currency/docs/example.yml +2 -0
  11. data/app/pb_kits/playbook/pb_currency/docs/index.js +1 -0
  12. data/app/pb_kits/playbook/pb_multi_level_select/_helper_functions.tsx +27 -22
  13. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss +2 -1
  14. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +234 -109
  15. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb +6 -7
  16. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.jsx +1 -1
  17. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.html.erb +73 -0
  18. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.jsx +87 -0
  19. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +3 -2
  20. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +2 -1
  21. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb +7 -0
  22. data/app/pb_kits/playbook/pb_nav/_item.tsx +12 -9
  23. data/app/pb_kits/playbook/pb_nav/_nav_item.test.js +23 -1
  24. data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +6 -0
  25. data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +3 -0
  26. data/app/pb_kits/playbook/pb_nav/item.rb +7 -2
  27. data/app/pb_kits/playbook/pb_table/styles/_table_header.scss +9 -9
  28. data/app/pb_kits/playbook/pb_table/table_header.html.erb +10 -2
  29. data/dist/playbook-rails.js +7 -7
  30. data/lib/playbook/version.rb +2 -2
  31. metadata +7 -2
@@ -3,6 +3,7 @@ import classnames from "classnames"
3
3
  import { globalProps, GlobalProps } from "../utilities/globalProps"
4
4
  import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props"
5
5
  import Checkbox from "../pb_checkbox/_checkbox"
6
+ import Radio from "../pb_radio/_radio"
6
7
  import Icon from "../pb_icon/_icon"
7
8
  import FormPill from "../pb_form_pill/_form_pill"
8
9
  import CircleIconButton from "../pb_circle_icon_button/_circle_icon_button"
@@ -24,11 +25,13 @@ type MultiLevelSelectProps = {
24
25
  data?: { [key: string]: string }
25
26
  id?: string
26
27
  inputDisplay?: "pills" | "none"
28
+ inputName?: string
27
29
  name?: string
28
30
  returnAllSelected?: boolean
29
31
  treeData?: { [key: string]: string }[]
30
32
  onSelect?: (prop: { [key: string]: any }) => void
31
33
  selectedIds?: string[]
34
+ variant?: "multi" | "single"
32
35
  } & GlobalProps
33
36
 
34
37
  const MultiLevelSelect = (props: MultiLevelSelectProps) => {
@@ -38,11 +41,13 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
38
41
  data = {},
39
42
  id,
40
43
  inputDisplay = "pills",
44
+ inputName,
41
45
  name,
42
46
  returnAllSelected = false,
43
47
  treeData,
44
- onSelect = () => {},
45
- selectedIds
48
+ onSelect = () => null,
49
+ selectedIds,
50
+ variant = "multi"
46
51
  } = props
47
52
 
48
53
  const ariaProps = buildAriaProps(aria)
@@ -55,21 +60,24 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
55
60
 
56
61
  const dropdownRef = useRef(null)
57
62
 
58
- //state for whether dropdown is open or closed
59
- const [isClosed, setIsClosed] = useState(true)
60
- //state from onchange for textinput, to use for filtering to create typeahead
63
+ // State for whether dropdown is open or closed
64
+ const [isDropdownClosed, setIsDropdownClosed] = useState(true)
65
+ // State from onchange for textinput, to use for filtering to create typeahead
61
66
  const [filterItem, setFilterItem] = useState("")
62
- //this is essentially the return that the user will get when they use the kit
63
- const [returnedArray, setReturnedArray] = useState([])
64
- //formattedData with checked and parent_id added
67
+ // FormattedData with checked and parent_id added
65
68
  const [formattedData, setFormattedData] = useState([])
66
- //state for return for default
69
+ // State for the return of returnAllSelected
70
+ const [returnedArray, setReturnedArray] = useState([])
71
+ // State for default return
67
72
  const [defaultReturn, setDefaultReturn] = useState([])
68
- // Get expanded items from treeData.
69
- const initialExpandedItems = getExpandedItems(treeData, selectedIds);
70
- // Initialize state with expanded items.
71
- const [expanded, setExpanded] = useState(initialExpandedItems);
72
-
73
+ // Get expanded items from treeData
74
+ const initialExpandedItems = getExpandedItems(treeData, selectedIds)
75
+ // Initialize state with expanded items
76
+ const [expanded, setExpanded] = useState(initialExpandedItems)
77
+ // State for single select variant input value
78
+ const [singleSelectInputValue, setSingleSelectInputValue] = useState("")
79
+ // State for single select variant input value
80
+ const [singleSelectedItem, setSingleSelectedItem] = useState([])
73
81
 
74
82
  useEffect(() => {
75
83
  setFormattedData(addCheckedAndParentProperty(treeData, selectedIds))
@@ -78,6 +86,15 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
78
86
  useEffect(() => {
79
87
  if (returnAllSelected) {
80
88
  setReturnedArray(getCheckedItems(formattedData))
89
+ } else if (variant === "single") {
90
+ if (selectedIds?.length && !singleSelectedItem.length) {
91
+ // The default is the first selectedId if there are more than one
92
+ const defaultSelection = filterFormattedDataById(formattedData, selectedIds[0])
93
+ setSingleSelectInputValue(defaultSelection[0]?.value)
94
+ setDefaultReturn(defaultSelection)
95
+ } else {
96
+ setDefaultReturn(singleSelectedItem)
97
+ }
81
98
  } else {
82
99
  setDefaultReturn(getDefaultCheckedItems(formattedData))
83
100
  }
@@ -87,7 +104,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
87
104
  // Function to handle clicks outside the dropdown
88
105
  const handleClickOutside = (event: any) => {
89
106
  if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
90
- setIsClosed(true)
107
+ setIsDropdownClosed(true)
91
108
  }
92
109
  }
93
110
  // Attach the event listener
@@ -109,7 +126,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
109
126
  })
110
127
  }
111
128
 
112
- //iterate over tree, find item and set checked or unchecked
129
+ // Iterate over tree, find item and set checked or unchecked
113
130
  const modifyValue = (
114
131
  id: string,
115
132
  tree: { [key: string]: any }[],
@@ -122,14 +139,20 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
122
139
  if (item.id != id) item.children = modifyValue(id, item.children, check)
123
140
  else {
124
141
  item.checked = check
125
- item.children = modifyRecursive(item.children, check)
142
+
143
+ if (variant === "single") {
144
+ // Single select: no children should be checked
145
+ item.children = modifyRecursive(item.children, !check)
146
+ } else {
147
+ item.children = modifyRecursive(item.children, check)
148
+ }
126
149
  }
127
150
 
128
151
  return item
129
152
  })
130
153
  }
131
154
 
132
- //clone tree, check items + children
155
+ // Clone tree, check items + children
133
156
  const checkItem = (item: { [key: string]: any }) => {
134
157
  const tree = cloneDeep(formattedData)
135
158
  if (returnAllSelected) {
@@ -140,7 +163,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
140
163
  }
141
164
  }
142
165
 
143
- //clone tree, uncheck items + children
166
+ // Clone tree, uncheck items + children
144
167
  const unCheckItem = (item: { [key: string]: any }) => {
145
168
  const tree = cloneDeep(formattedData)
146
169
  if (returnAllSelected) {
@@ -151,7 +174,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
151
174
  }
152
175
  }
153
176
 
154
- //setformattedData with proper properties
177
+ // setFormattedData with proper properties
155
178
  const changeItem = (item: { [key: string]: any }, check: boolean) => {
156
179
  const tree = check ? checkItem(item) : unCheckItem(item)
157
180
  setFormattedData(tree)
@@ -159,12 +182,12 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
159
182
  return tree
160
183
  }
161
184
 
162
- //function to map over data and add parent_id + depth property to each item
185
+ // Function to map over data and add parent_id + depth property to each item
163
186
  const addCheckedAndParentProperty = (
164
187
  treeData: { [key: string]: any }[],
165
188
  selectedIds: string[],
166
189
  parent_id: string = null,
167
- depth: number = 0,
190
+ depth = 0,
168
191
  ) => {
169
192
  if (!Array.isArray(treeData)) {
170
193
  return
@@ -192,12 +215,12 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
192
215
  })
193
216
  }
194
217
 
195
- //click event for x on form pill
218
+ // Click event for x on form pill
196
219
  const handlePillClose = (event: any, clickedItem: { [key: string]: any }) => {
197
- // prevents the dropdown from closing when clicking on the pill
220
+ // Prevents the dropdown from closing when clicking on the pill
198
221
  event.stopPropagation()
199
222
  const updatedTree = changeItem(clickedItem, false)
200
- //logic for removing items from returnArray or defaultReturn when pills clicked
223
+ // Logic for removing items from returnArray or defaultReturn when pills clicked
201
224
  if (returnAllSelected) {
202
225
  onSelect(getCheckedItems(updatedTree))
203
226
  } else {
@@ -205,7 +228,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
205
228
  }
206
229
  }
207
230
 
208
- //handle click on input wrapper(entire div with pills, typeahead, etc) so it doesn't close when input or form pill is clicked
231
+ // Handle click on input wrapper(entire div with pills, typeahead, etc) so it doesn't close when input or form pill is clicked
209
232
  const handleInputWrapperClick = (e: any) => {
210
233
  e.stopPropagation()
211
234
  if (
@@ -214,13 +237,13 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
214
237
  ) {
215
238
  return
216
239
  }
217
- setIsClosed(!isClosed)
240
+ setIsDropdownClosed(!isDropdownClosed)
218
241
  }
219
242
 
220
- //Main function to handle any click inside dropdown
243
+ // Main function to handle any click inside dropdown
221
244
  const handledropdownItemClick = (e: any, check: boolean) => {
222
245
  const clickedItem = e.target.parentNode.id
223
- //setting filterItem to "" will clear textinput and clear typeahead
246
+ // Setting filterItem to "" will clear textinput and clear typeahead
224
247
  setFilterItem("")
225
248
 
226
249
  const filtered = filterFormattedDataById(formattedData, clickedItem)
@@ -232,15 +255,43 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
232
255
  }
233
256
  }
234
257
 
235
- const isExpanded = (item: any) => expanded.indexOf(item.id) > -1
258
+ // Single select
259
+ const handleRadioButtonClick = (
260
+ e: React.ChangeEvent<HTMLInputElement>,
261
+ ) => {
262
+ const { id: selectedItemID, value: inputText } = e.target
263
+ // Reset tree checked state, triggering useEffect
264
+ const treeWithNoSelections = modifyRecursive(formattedData, false)
265
+ // Update tree with single selection
266
+ const treeWithSelectedItem = modifyValue(selectedItemID, treeWithNoSelections, true)
267
+ const selectedItem = filterFormattedDataById(treeWithSelectedItem, selectedItemID)
268
+
269
+ setFormattedData(treeWithSelectedItem)
270
+ setSingleSelectedItem(selectedItem)
271
+ setSingleSelectInputValue(inputText)
272
+ // Reset the filter to always display dropdown options on click
273
+ setFilterItem("")
274
+ setIsDropdownClosed(true)
275
+
276
+ onSelect(selectedItem)
277
+ };
278
+
279
+ // Single select: reset the tree state upon typing
280
+ const handleRadioInputChange = (inputText: string) => {
281
+ modifyRecursive(formattedData, false)
282
+ setSingleSelectInputValue(inputText)
283
+ setFilterItem(inputText)
284
+ };
236
285
 
237
- //handle click on chevron toggles in dropdown
286
+ const isTreeRowExpanded = (item: any) => expanded.indexOf(item.id) > -1
287
+
288
+ // Handle click on chevron toggles in dropdown
238
289
  const handleToggleClick = (id: string, event: React.MouseEvent) => {
239
290
  event.stopPropagation()
240
291
  const clickedItem = filterFormattedDataById(formattedData, id)
241
292
  if (clickedItem) {
242
293
  let expandedArray = [...expanded]
243
- const itemExpanded = isExpanded(clickedItem[0])
294
+ const itemExpanded = isTreeRowExpanded(clickedItem[0])
244
295
 
245
296
  if (itemExpanded)
246
297
  expandedArray = expandedArray.filter((i) => i != clickedItem[0].id)
@@ -259,7 +310,8 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
259
310
  }
260
311
  return items
261
312
  }
262
- //rendering formattedData to UI based on typeahead
313
+
314
+ // Rendering formattedData to UI based on typeahead
263
315
  const renderNestedOptions = (items: { [key: string]: any }[]) => {
264
316
  return (
265
317
  <ul>
@@ -267,42 +319,62 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
267
319
  items.map((item: { [key: string]: any }) => {
268
320
  return (
269
321
  <div key={item.id}>
270
- <li className='dropdown_item' data-name={item.id}>
271
- <div className='dropdown_item_checkbox_row'>
322
+ <li
323
+ className="dropdown_item"
324
+ data-name={item.id}
325
+ >
326
+ <div className="dropdown_item_checkbox_row">
272
327
  <div
273
- key={isExpanded(item) ? "chevron-down" : "chevron-right"}
328
+ key={isTreeRowExpanded(item) ? "chevron-down" : "chevron-right"}
274
329
  >
275
330
  <CircleIconButton
276
- icon={
277
- isExpanded(item) ? "chevron-down" : "chevron-right"
278
- }
279
- className={
280
- item.children && item.children.length > 0
281
- ? ""
282
- : "toggle_icon"
283
- }
284
- onClick={(event: any) =>
285
- handleToggleClick(item.id, event)
286
- }
287
- variant='link'
331
+ className={
332
+ item.children && item.children.length > 0
333
+ ? ""
334
+ : "toggle_icon"
335
+ }
336
+ icon={
337
+ isTreeRowExpanded(item) ? "chevron-down" : "chevron-right"
338
+ }
339
+ onClick={(event: any) =>
340
+ handleToggleClick(item.id, event)
341
+ }
342
+ variant="link"
288
343
  />
289
344
  </div>
290
- <Checkbox text={item.label} id={item.id}>
291
- <input
292
- checked={item.checked}
293
- type='checkbox'
294
- name={item.label}
295
- value={item.label}
296
- onChange={(e) => {
297
- handledropdownItemClick(e, !item.checked)
298
- }}
345
+ { variant === "single" ? (
346
+ <Radio
347
+ checked={item.checked}
348
+ id={item.id}
349
+ label={item.label}
350
+ name={inputName}
351
+ onChange={(e: React.ChangeEvent<HTMLInputElement>) => (
352
+ handleRadioButtonClick(e)
353
+ )}
354
+ type="radio"
355
+ value={item.label}
299
356
  />
300
- </Checkbox>
357
+ ) : (
358
+ <Checkbox
359
+ id={item.id}
360
+ text={item.label}
361
+ >
362
+ <input
363
+ checked={item.checked}
364
+ name={item.label}
365
+ onChange={(e) => {
366
+ handledropdownItemClick(e, !item.checked)
367
+ }}
368
+ type="checkbox"
369
+ value={item.label}
370
+ />
371
+ </Checkbox>
372
+ )}
301
373
  </div>
302
- {isExpanded(item) &&
374
+ {isTreeRowExpanded(item) &&
303
375
  item.children &&
304
376
  item.children.length > 0 &&
305
- !filterItem && ( // Show children if expanded is true
377
+ (variant === "single" || !filterItem) && ( // Show children if expanded is true
306
378
  <div>{renderNestedOptions(item.children)}</div>
307
379
  )}
308
380
  </li>
@@ -313,68 +385,121 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
313
385
  )
314
386
  }
315
387
 
316
-
317
-
318
388
  return (
319
- <div {...ariaProps} {...dataProps} className={classes} id={id}>
320
- <div ref={dropdownRef} className='wrapper'>
321
- <div className='input_wrapper' onClick={handleInputWrapperClick}>
322
- <div className='input_inner_container'>
323
- {returnedArray.length !== 0 && returnAllSelected
324
- ? returnedArray.map((item) => (
325
- <input type='hidden' name={`${name}[]`} value={item.id} />
326
- ))
327
- : null}
328
-
329
- {returnedArray.length !== 0 && inputDisplay === "pills" && returnAllSelected
330
- ? returnedArray.map((item, index) => (
331
- <FormPill
332
- key={index}
333
- text={item.label}
334
- size='small'
335
- onClick={(event: any) => handlePillClose(event, item)}
389
+ <div
390
+ {...ariaProps}
391
+ {...dataProps}
392
+ className={classes}
393
+ id={id}
394
+ >
395
+ <div
396
+ className="wrapper"
397
+ ref={dropdownRef}
398
+ >
399
+ <div
400
+ className="input_wrapper"
401
+ onClick={handleInputWrapperClick}
402
+ >
403
+ <div className="input_inner_container">
404
+ {variant === "single" && defaultReturn.length !== 0
405
+ ? defaultReturn.map((selectedItem) => (
406
+ <input
407
+ key={selectedItem.id}
408
+ name={`${name}[]`}
409
+ type="hidden"
410
+ value={selectedItem.id}
336
411
  />
337
412
  ))
338
413
  : null}
339
- {!returnAllSelected &&
340
- defaultReturn.length !== 0 && inputDisplay === "pills" ?
341
- defaultReturn.map((item, index) => (
342
- <FormPill
343
- key={index}
344
- text={item.label}
345
- size='small'
346
- onClick={(event: any) => handlePillClose(event, item)}
347
- />
348
- ))
349
- : null
350
- }
351
- {returnedArray.length !== 0 && returnAllSelected && inputDisplay === "pills" && <br />}
352
- {defaultReturn.length !== 0 && !returnAllSelected && inputDisplay === "pills" && <br />}
414
+
415
+ {variant !== "single" && (
416
+ <>
417
+ {returnAllSelected && returnedArray.length !== 0
418
+ ? returnedArray.map((item) => (
419
+ <input
420
+ key={item.id}
421
+ name={`${name}[]`}
422
+ type="hidden"
423
+ value={item.id}
424
+ />
425
+ ))
426
+ : null}
427
+
428
+ {returnAllSelected &&
429
+ returnedArray.length !== 0 &&
430
+ inputDisplay === "pills"
431
+ ? returnedArray.map((item, index) => (
432
+ <FormPill
433
+ key={index}
434
+ onClick={(event: any) => handlePillClose(event, item)}
435
+ size="small"
436
+ text={item.label}
437
+ />
438
+ ))
439
+ : null}
440
+
441
+ {!returnAllSelected &&
442
+ defaultReturn.length !== 0 &&
443
+ inputDisplay === "pills"
444
+ ? defaultReturn.map((item, index) => (
445
+ <FormPill
446
+ key={index}
447
+ onClick={(event: any) => handlePillClose(event, item)}
448
+ size="small"
449
+ text={item.label}
450
+ />
451
+ ))
452
+ : null}
453
+
454
+ {returnAllSelected &&
455
+ returnedArray.length !== 0 &&
456
+ inputDisplay === "pills" && <br />}
457
+
458
+ {!returnAllSelected &&
459
+ defaultReturn.length !== 0 &&
460
+ inputDisplay === "pills" && <br />}
461
+ </>
462
+ )}
463
+
353
464
  <input
354
- id='multiselect_input'
355
- onChange={(e) => {
356
- setFilterItem(e.target.value)
357
- }}
358
- placeholder={inputDisplay === "none" && itemsSelectedLength() ? (
359
- `${itemsSelectedLength()} ${itemsSelectedLength() === 1 ? 'item' : 'items'} selected`
360
- ) : ("Start typing...")}
361
- value={filterItem}
362
- onClick={() => setIsClosed(false)}
465
+ id="multiselect_input"
466
+ onChange={(e) =>{
467
+ variant === "single"
468
+ ? handleRadioInputChange(e.target.value)
469
+ : setFilterItem(e.target.value)
470
+ }}
471
+ onClick={() => setIsDropdownClosed(false)}
472
+ placeholder={
473
+ inputDisplay === "none" && itemsSelectedLength()
474
+ ? `${itemsSelectedLength()} ${itemsSelectedLength() === 1 ? "item" : "items"} selected`
475
+ : "Start typing..."
476
+ }
477
+ value={singleSelectInputValue || filterItem}
363
478
  />
364
479
  </div>
365
- {isClosed ? (
366
- <div key='chevron-down'>
367
- <Icon icon='chevron-down' size="xs"/>
480
+
481
+ {isDropdownClosed ? (
482
+ <div key="chevron-down">
483
+ <Icon
484
+ icon="chevron-down"
485
+ size="xs"
486
+ />
368
487
  </div>
369
488
  ) : (
370
- <div key='chevron-up'>
371
- <Icon icon='chevron-up' size="xs"/>
489
+ <div key="chevron-up">
490
+ <Icon
491
+ icon="chevron-up"
492
+ size="xs"
493
+ />
372
494
  </div>
373
495
  )}
374
496
  </div>
375
- <div className={`dropdown_menu ${isClosed ? "close" : "open"}`}>
497
+
498
+ <div className={`dropdown_menu ${isDropdownClosed ? "close" : "open"}`}>
376
499
  {renderNestedOptions(
377
- filterItem ? findByFilter(formattedData, filterItem) : formattedData
500
+ filterItem
501
+ ? findByFilter(formattedData, filterItem)
502
+ : formattedData
378
503
  )}
379
504
  </div>
380
505
  </div>
@@ -8,6 +8,7 @@
8
8
  label: "People",
9
9
  value: "People",
10
10
  id: "101",
11
+ expanded: true,
11
12
  children: [
12
13
  {
13
14
  label: "Talent Acquisition",
@@ -63,10 +64,8 @@
63
64
  ],
64
65
  }] %>
65
66
 
66
-
67
-
68
- <%= pb_rails("multi_level_select", props: {
69
- id: "multi-level-select-default-rails",
70
- name: "my_array",
71
- tree_data: treeData
72
- }) %>
67
+ <%= pb_rails("multi_level_select", props: {
68
+ id: "multi-level-select-default-rails",
69
+ name: "my_array",
70
+ tree_data: treeData
71
+ }) %>
@@ -77,7 +77,7 @@ const MultiLevelSelectSelectedIds = (props) => {
77
77
  console.log("Selected Items with Return All Selected Data", selectedNodes)
78
78
  }
79
79
  returnAllSelected
80
- selectedIds={["energy1","talent1"]}
80
+ selectedIds={["energy1", "talent1"]}
81
81
  treeData={treeData}
82
82
  {...props}
83
83
  />
@@ -0,0 +1,73 @@
1
+ <% treeData = [{
2
+ label: "Power Home Remodeling",
3
+ value: "Power Home Remodeling",
4
+ id: "200",
5
+ expanded: true,
6
+ children: [
7
+ {
8
+ label: "People",
9
+ value: "People",
10
+ id: "201",
11
+ expanded: true,
12
+ children: [
13
+ {
14
+ label: "Talent Acquisition",
15
+ value: "Talent Acquisition",
16
+ id: "202",
17
+ },
18
+ {
19
+ label: "Business Affairs",
20
+ value: "Business Affairs",
21
+ id: "203",
22
+ children: [
23
+ {
24
+ label: "Initiatives",
25
+ value: "Initiatives",
26
+ id: "204",
27
+ },
28
+ {
29
+ label: "Learning & Development",
30
+ value: "Learning & Development",
31
+ id: "205",
32
+ },
33
+ ],
34
+ },
35
+ {
36
+ label: "People Experience",
37
+ value: "People Experience",
38
+ id: "206",
39
+ },
40
+ ],
41
+ },
42
+ {
43
+ label: "Contact Center",
44
+ value: "Contact Center",
45
+ id: "207",
46
+ children: [
47
+ {
48
+ label: "Appointment Management",
49
+ value: "Appointment Management",
50
+ id: "208",
51
+ },
52
+ {
53
+ label: "Customer Service",
54
+ value: "Customer Service",
55
+ id: "209",
56
+ },
57
+ {
58
+ label: "Energy",
59
+ value: "Energy",
60
+ id: "210",
61
+ },
62
+ ],
63
+ },
64
+ ],
65
+ }] %>
66
+
67
+ <%= pb_rails("multi_level_select", props: {
68
+ id: "multi-level-select-single-rails",
69
+ name: "my_single_select_array",
70
+ tree_data: treeData,
71
+ input_name: "Power",
72
+ variant: "single"
73
+ }) %>