playbook_ui 13.8.0.pre.alpha.PLAY962SingleSelect1246 → 13.8.0.pre.alpha.play845allkitsbytypes1254

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 91dabc0c37f4b0d7c83e0c9728a4db6d2eb34fe92c387934cab037fd18025e2a
-  data.tar.gz: ab8ea303f33c2cc6e47d9af314ccf15e41fad54fdfa1e743a00cd1ec5b3e41f5
+  metadata.gz: 8962b1f5b63702a09832038c0a78be9da51e80bffc9386e15e6540059ba8ccd4
+  data.tar.gz: 58c742ec7b33680a19c03e94a4d2fae092d2f43f951baac8bc024ce0079cbe78
 SHA512:
-  metadata.gz: dd3547fb3e5ec0242dd18e1ad45c4bbf075adc932f33befa20f5cb6874b63bd90df323661d58330a55ea0f6e4d03460c9d8ac888c5e887cb28cef8c66f208289
-  data.tar.gz: 44206940d57a0f6dd4d875dac195ade688a6aaff286ae489f9e6ee70987355410a8d397d66f3d06237adb5b49df2e9965a72f63c2245ab78c5b94692e8703f81
+  metadata.gz: d142a90639215ce17982e9535ef88069b48e510059261b160dbfe07a65ab8c926e81066a1f07251d48a6bb25cee2b3d2ba686327fe9ebc11b744f521c725b92d
+  data.tar.gz: 4d77bf674d1fe3fdb4645c7b4b9ca3be262fe5bafb28e6839c88cebcaf4a0110dc0522b3775d72f7ac93e1b8857fe888503c781793526d21104fc6c332a536a1

data/app/pb_kits/playbook/pb_multi_level_select/_helper_functions.tsx

@@ -1,9 +1,22 @@
-// Function is going over formattedData and returning all objects that match the
-// ID of the clicked item from the dropdown
+//function to retrieve all ancestors of unchecked item and set checked to false
+export const getAncestorsOfUnchecked = (
+  data: { [key: string]: any }[],
+  item: { [key: string]: any }
+) => {
+  if (item.parent_id) {
+    const ancestor = filterFormattedDataById(data, item.parent_id);
+    ancestor[0].checked = false;
+    ancestor[0].parent_id && getAncestorsOfUnchecked(data, ancestor[0]);
+  }
+  return data;
+};
+
+//function is going over formattedData and returning all objects that match the
+//id of the clicked item from the dropdown
 export const filterFormattedDataById = (
   formattedData: { [key: string]: any }[],
   id: string
-): { [key: string]: any }[] => {
+) => {
   const matched: { [key: string]: any }[] = [];
   const recursiveSearch = (data: { [key: string]: any }[], term: string) => {
     for (const item of data) {
@@ -25,7 +38,7 @@ export const filterFormattedDataById = (
 export const findByFilter = (
   formattedData: { [key: string]: any }[],
   searchTerm: string
-): { [key: string]: any }[] => {
+) => {
   const matchedItems: { [key: string]: any }[] = [];
   const recursiveSearch = (data: { [key: string]: any }[], term: string) => {
     for (const item of data) {
@@ -43,20 +56,7 @@ export const findByFilter = (
   return matchedItems;
 };
 
-// Function to retrieve all ancestors of unchecked item and set checked to false
-export const getAncestorsOfUnchecked = (
-  data: { [key: string]: any }[],
-  item: { [key: string]: any }
-): { [key: string]: any }[] => {
-  if (item.parent_id) {
-    const ancestor = filterFormattedDataById(data, item.parent_id);
-    ancestor[0].checked = false;
-    ancestor[0].parent_id && getAncestorsOfUnchecked(data, ancestor[0]);
-  }
-  return data;
-};
-
-// Function to get all items with checked = true
+//function to get all items with checked = true
 export const getCheckedItems = (
   data: { [key: string]: any }[]
 ): { [key: string]: any }[] => {
@@ -76,9 +76,7 @@ export const getCheckedItems = (
   return checkedItems;
 };
 
-export const getDefaultCheckedItems = (
-  treeData: { [key: string]: any }[]
-): { [key: string]: any }[] => {
+export const getDefaultCheckedItems = (treeData: { [key: string]: any }[]) => {
   const checkedDefault: { [key: string]: any }[] = [];
 
   const traverseTree = (items: { [key: string]: any }[]) => {
@@ -120,7 +118,7 @@ export const getDefaultCheckedItems = (
 export const recursiveCheckParent = (
   item: { [key: string]: any },
   data: any
-): any => {
+) => {
   if (item.parent_id !== null) {
     const parent = filterFormattedDataById(data, item.parent_id);
     const allChildrenChecked = parent[0].children.every(
@@ -137,11 +135,8 @@ export const recursiveCheckParent = (
   return data;
 };
 
-export const getExpandedItems = (
-  treeData: { [key: string]: string }[],
-  selectedIds: string[]
-): any[] => {
-  const expandedItems: any[] = [];
+export const getExpandedItems = (treeData: { [key: string]: string }[], selectedIds: string[]) => {
+  let expandedItems: any[] = [];
 
   const traverse = (items: string | any[], ancestors: any[] = []) => {
     for (let i = 0; i < items.length; i++) {

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss

@@ -30,11 +30,10 @@
       align-items: center;
       justify-content: space-between;
       .input_inner_container {
-        width: 100%;
+        max-width: 90%;
       }
 
       input {
-        width: 100%;
         border: none;
         font-family: $font_family_base;
         font-size: $font_base;

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx

@@ -3,7 +3,6 @@ import classnames from "classnames"
 import { globalProps, GlobalProps } from "../utilities/globalProps"
 import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props"
 import Checkbox from "../pb_checkbox/_checkbox"
-import Radio from "../pb_radio/_radio"
 import Icon from "../pb_icon/_icon"
 import FormPill from "../pb_form_pill/_form_pill"
 import CircleIconButton from "../pb_circle_icon_button/_circle_icon_button"
@@ -25,13 +24,11 @@ type MultiLevelSelectProps = {
   data?: { [key: string]: string }
   id?: string
   inputDisplay?: "pills" | "none"
-  inputName?: string
   name?: string
   returnAllSelected?: boolean
   treeData?: { [key: string]: string }[]
   onSelect?: (prop: { [key: string]: any }) => void
   selectedIds?: string[]
-  variant?: "multi" | "single"
 } & GlobalProps
 
 const MultiLevelSelect = (props: MultiLevelSelectProps) => {
@@ -41,13 +38,11 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     data = {},
     id,
     inputDisplay = "pills",
-    inputName,
     name,
     returnAllSelected = false,
     treeData,
-    onSelect = () => null,
-    selectedIds,
-    variant = "multi"
+    onSelect = () => {},
+    selectedIds
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -60,24 +55,21 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
 
   const dropdownRef = useRef(null)
 
-  // State for whether dropdown is open or closed
-  const [isDropdownClosed, setIsDropdownClosed] = useState(true)
-  // State from onchange for textinput, to use for filtering to create typeahead
+  //state for whether dropdown is open or closed
+  const [isClosed, setIsClosed] = useState(true)
+  //state from onchange for textinput, to use for filtering to create typeahead
   const [filterItem, setFilterItem] = useState("")
-  // FormattedData with checked and parent_id added
-  const [formattedData, setFormattedData] = useState([])
-  // State for the return of returnAllSelected
+  //this is essentially the return that the user will get when they use the kit
   const [returnedArray, setReturnedArray] = useState([])
-  // State for default return
+  //formattedData with checked and parent_id added
+  const [formattedData, setFormattedData] = useState([])
+  //state for return for default
   const [defaultReturn, setDefaultReturn] = useState([])
-  // Get expanded items from treeData
-  const initialExpandedItems = getExpandedItems(treeData, selectedIds)
-  // Initialize state with expanded items
-  const [expanded, setExpanded] = useState(initialExpandedItems)
-  // State for single select variant input value
-  const [singleSelectInputValue, setSingleSelectInputValue] = useState("")
-  // State for single select variant input value
-  const [singleSelectedItem, setSingleSelectedItem] = useState([])
+  // Get expanded items from treeData.
+  const initialExpandedItems = getExpandedItems(treeData, selectedIds);
+  // Initialize state with expanded items.
+  const [expanded, setExpanded] = useState(initialExpandedItems);
+
 
   useEffect(() => {
     setFormattedData(addCheckedAndParentProperty(treeData, selectedIds))
@@ -86,15 +78,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
   useEffect(() => {
     if (returnAllSelected) {
       setReturnedArray(getCheckedItems(formattedData))
-    } else if (variant === "single") {
-      if (selectedIds?.length && !singleSelectedItem.length) {
-        // The default is the first selectedId if there are more than one
-        const defaultSelection = filterFormattedDataById(formattedData, selectedIds[0])
-        setSingleSelectInputValue(defaultSelection[0]?.value)
-        setDefaultReturn(defaultSelection)
-      } else {
-        setDefaultReturn(singleSelectedItem)
-      }
     } else {
       setDefaultReturn(getDefaultCheckedItems(formattedData))
     }
@@ -104,7 +87,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     // Function to handle clicks outside the dropdown
     const handleClickOutside = (event: any) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-        setIsDropdownClosed(true)
+        setIsClosed(true)
       }
     }
     // Attach the event listener
@@ -126,7 +109,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     })
   }
 
-  // Iterate over tree, find item and set checked or unchecked
+  //iterate over tree, find item and set checked or unchecked
   const modifyValue = (
     id: string,
     tree: { [key: string]: any }[],
@@ -139,20 +122,14 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
       if (item.id != id) item.children = modifyValue(id, item.children, check)
       else {
         item.checked = check
-
-        if (variant === "single") {
-          // Single select: no children should be checked
-          item.children = modifyRecursive(item.children, !check)
-        } else {
-          item.children = modifyRecursive(item.children, check)
-        }
+        item.children = modifyRecursive(item.children, check)
       }
 
       return item
     })
   }
 
-  // Clone tree, check items + children
+  //clone tree, check items + children
   const checkItem = (item: { [key: string]: any }) => {
     const tree = cloneDeep(formattedData)
     if (returnAllSelected) {
@@ -163,7 +140,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     }
   }
 
-  // Clone tree, uncheck items + children
+  //clone tree, uncheck items + children
   const unCheckItem = (item: { [key: string]: any }) => {
     const tree = cloneDeep(formattedData)
     if (returnAllSelected) {
@@ -174,7 +151,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     }
   }
 
-  // setFormattedData with proper properties
+  //setformattedData with proper properties
   const changeItem = (item: { [key: string]: any }, check: boolean) => {
     const tree = check ? checkItem(item) : unCheckItem(item)
     setFormattedData(tree)
@@ -182,12 +159,12 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     return tree
   }
 
-  // Function to map over data and add parent_id + depth property to each item
+  //function to map over data and add parent_id + depth property to each item
   const addCheckedAndParentProperty = (
     treeData: { [key: string]: any }[],
     selectedIds: string[],
     parent_id: string = null,
-    depth = 0,
+    depth: number = 0,
   ) => {
     if (!Array.isArray(treeData)) {
       return
@@ -215,12 +192,12 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     })
   }
 
-  // Click event for x on form pill
+  //click event for x on form pill
   const handlePillClose = (event: any, clickedItem: { [key: string]: any }) => {
-    // Prevents the dropdown from closing when clicking on the pill
+    // prevents the dropdown from closing when clicking on the pill
     event.stopPropagation()
     const updatedTree = changeItem(clickedItem, false)
-    // Logic for removing items from returnArray or defaultReturn when pills clicked
+    //logic for removing items from returnArray or defaultReturn when pills clicked
     if (returnAllSelected) {
       onSelect(getCheckedItems(updatedTree))
     } else {
@@ -228,7 +205,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     }
   }
 
-  // Handle click on input wrapper(entire div with pills, typeahead, etc) so it doesn't close when input or form pill is clicked
+  //handle click on input wrapper(entire div with pills, typeahead, etc) so it doesn't close when input or form pill is clicked
   const handleInputWrapperClick = (e: any) => {
     e.stopPropagation()
     if (
@@ -237,13 +214,13 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     ) {
       return
     }
-    setIsDropdownClosed(!isDropdownClosed)
+    setIsClosed(!isClosed)
   }
 
-  // Main function to handle any click inside dropdown
+  //Main function to handle any click inside dropdown
   const handledropdownItemClick = (e: any, check: boolean) => {
     const clickedItem = e.target.parentNode.id
-    // Setting filterItem to "" will clear textinput and clear typeahead
+    //setting filterItem to "" will clear textinput and clear typeahead
     setFilterItem("")
 
     const filtered = filterFormattedDataById(formattedData, clickedItem)
@@ -255,43 +232,15 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     }
   }
 
-  // Single select
-  const handleRadioButtonClick = (
-    e: React.ChangeEvent<HTMLInputElement>,
-  ) => {
-    const { id: selectedItemID, value: inputText } = e.target
-    // Reset tree checked state, triggering useEffect
-    const treeWithNoSelections = modifyRecursive(formattedData, false)
-    // Update tree with single selection
-    const treeWithSelectedItem = modifyValue(selectedItemID, treeWithNoSelections, true)
-    const selectedItem = filterFormattedDataById(treeWithSelectedItem, selectedItemID)
-
-    setFormattedData(treeWithSelectedItem)
-    setSingleSelectedItem(selectedItem)
-    setSingleSelectInputValue(inputText)
-    // Reset the filter to always display dropdown options on click
-    setFilterItem("")
-    setIsDropdownClosed(true)
-
-    onSelect(selectedItem)
-  };
-
-  // Single select: reset the tree state upon typing
-  const handleRadioInputChange = (inputText: string) => {
-    modifyRecursive(formattedData, false)
-    setSingleSelectInputValue(inputText)
-    setFilterItem(inputText)
-  };
+  const isExpanded = (item: any) => expanded.indexOf(item.id) > -1
 
-  const isTreeRowExpanded = (item: any) => expanded.indexOf(item.id) > -1
-
-  // Handle click on chevron toggles in dropdown
+  //handle click on chevron toggles in dropdown
   const handleToggleClick = (id: string, event: React.MouseEvent) => {
     event.stopPropagation()
     const clickedItem = filterFormattedDataById(formattedData, id)
     if (clickedItem) {
       let expandedArray = [...expanded]
-      const itemExpanded = isTreeRowExpanded(clickedItem[0])
+      const itemExpanded = isExpanded(clickedItem[0])
 
       if (itemExpanded)
         expandedArray = expandedArray.filter((i) => i != clickedItem[0].id)
@@ -310,8 +259,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     }
     return items
   }
-
-  // Rendering formattedData to UI based on typeahead
+  //rendering formattedData to UI based on typeahead
   const renderNestedOptions = (items: { [key: string]: any }[]) => {
     return (
       <ul>
@@ -319,62 +267,42 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
           items.map((item: { [key: string]: any }) => {
             return (
               <div key={item.id}>
-                <li
-                    className="dropdown_item"
-                    data-name={item.id}
-                >
-                  <div className="dropdown_item_checkbox_row">
+                <li className='dropdown_item' data-name={item.id}>
+                  <div className='dropdown_item_checkbox_row'>
                     <div
-                        key={isTreeRowExpanded(item) ? "chevron-down" : "chevron-right"}
+                      key={isExpanded(item) ? "chevron-down" : "chevron-right"}
                     >
                       <CircleIconButton
-                          className={
-                            item.children && item.children.length > 0
-                              ? ""
-                              : "toggle_icon"
-                          }
-                          icon={
-                            isTreeRowExpanded(item) ? "chevron-down" : "chevron-right"
-                          }
-                          onClick={(event: any) =>
-                            handleToggleClick(item.id, event)
-                          }
-                          variant="link"
+                        icon={
+                          isExpanded(item) ? "chevron-down" : "chevron-right"
+                        }
+                        className={
+                          item.children && item.children.length > 0
+                            ? ""
+                            : "toggle_icon"
+                        }
+                        onClick={(event: any) =>
+                          handleToggleClick(item.id, event)
+                        }
+                        variant='link'
                       />
                     </div>
-                    { variant === "single" ? (
-                      <Radio
-                          checked={item.checked}
-                          id={item.id}
-                          label={item.label}
-                          name={inputName}
-                          onChange={(e: React.ChangeEvent<HTMLInputElement>) => (
-                            handleRadioButtonClick(e)
-                          )}
-                          type="radio"
-                          value={item.label}
+                    <Checkbox text={item.label} id={item.id}>
+                      <input
+                        checked={item.checked}
+                        type='checkbox'
+                        name={item.label}
+                        value={item.label}
+                        onChange={(e) => {
+                          handledropdownItemClick(e, !item.checked)
+                        }}
                       />
-                    ) : (
-                      <Checkbox
-                          id={item.id}
-                          text={item.label}
-                      >
-                        <input
-                            checked={item.checked}
-                            name={item.label}
-                            onChange={(e) => {
-                              handledropdownItemClick(e, !item.checked)
-                            }}
-                            type="checkbox"
-                            value={item.label}
-                        />
-                      </Checkbox>
-                    )}
+                    </Checkbox>
                   </div>
-                  {isTreeRowExpanded(item) &&
+                  {isExpanded(item) &&
                     item.children &&
                     item.children.length > 0 &&
-                    (variant === "single" || !filterItem) && ( // Show children if expanded is true
+                    !filterItem && ( // Show children if expanded is true
                       <div>{renderNestedOptions(item.children)}</div>
                     )}
                 </li>
@@ -385,121 +313,68 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     )
   }
 
+
+
   return (
-    <div
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
-    >
-      <div
-          className="wrapper"
-          ref={dropdownRef}
-      >
-        <div
-            className="input_wrapper"
-            onClick={handleInputWrapperClick}
-        >
-          <div className="input_inner_container">
-            {variant === "single" && defaultReturn.length !== 0
-              ? defaultReturn.map((selectedItem) => (
-                  <input
-                      key={selectedItem.id}
-                      name={`${name}[]`}
-                      type="hidden"
-                      value={selectedItem.id}
-                  />
+    <div {...ariaProps} {...dataProps} className={classes} id={id}>
+      <div ref={dropdownRef} className='wrapper'>
+        <div className='input_wrapper' onClick={handleInputWrapperClick}>
+          <div className='input_inner_container'>
+            {returnedArray.length !== 0 && returnAllSelected
+              ? returnedArray.map((item) => (
+                  <input type='hidden' name={`${name}[]`} value={item.id} />
                 ))
               : null}
 
-            {variant !== "single" && (
-              <>
-                {returnAllSelected && returnedArray.length !== 0
-                  ? returnedArray.map((item) => (
-                      <input
-                          key={item.id}
-                          name={`${name}[]`}
-                          type="hidden"
-                          value={item.id}
-                      />
-                    ))
-                  : null}
-
-                {returnAllSelected &&
-                returnedArray.length !== 0 &&
-                inputDisplay === "pills"
-                  ? returnedArray.map((item, index) => (
-                      <FormPill
-                          key={index}
-                          onClick={(event: any) => handlePillClose(event, item)}
-                          size="small"
-                          text={item.label}
-                      />
-                    ))
-                  : null}
-
-                {!returnAllSelected &&
-                defaultReturn.length !== 0 &&
-                inputDisplay === "pills"
-                  ? defaultReturn.map((item, index) => (
-                      <FormPill
-                          key={index}
-                          onClick={(event: any) => handlePillClose(event, item)}
-                          size="small"
-                          text={item.label}
-                      />
-                    ))
-                  : null}
-
-                {returnAllSelected &&
-                  returnedArray.length !== 0 &&
-                  inputDisplay === "pills" && <br />}
-
-                {!returnAllSelected &&
-                  defaultReturn.length !== 0 &&
-                  inputDisplay === "pills" && <br />}
-              </>
-            )}
-
+            {returnedArray.length !== 0 && inputDisplay === "pills" && returnAllSelected
+              ? returnedArray.map((item, index) => (
+                  <FormPill
+                    key={index}
+                    text={item.label}
+                    size='small'
+                    onClick={(event: any) => handlePillClose(event, item)}
+                  />
+                ))
+              : null}
+            {!returnAllSelected &&
+              defaultReturn.length !== 0 && inputDisplay === "pills" ?
+              defaultReturn.map((item, index) => (
+                <FormPill
+                  key={index}
+                  text={item.label}
+                  size='small'
+                  onClick={(event: any) => handlePillClose(event, item)}
+                />
+              ))
+              : null
+            }
+            {returnedArray.length !== 0 && returnAllSelected && inputDisplay === "pills" && <br />}
+            {defaultReturn.length !== 0 && !returnAllSelected && inputDisplay === "pills" && <br />}
             <input
-                id="multiselect_input"
-                onChange={(e) =>{
-                  variant === "single"
-                    ? handleRadioInputChange(e.target.value)
-                    : setFilterItem(e.target.value)
-                }}
-                onClick={() => setIsDropdownClosed(false)}
-                placeholder={
-                  inputDisplay === "none" && itemsSelectedLength()
-                    ? `${itemsSelectedLength()} ${itemsSelectedLength() === 1 ? "item" : "items"} selected`
-                    : "Start typing..."
-                }
-                value={singleSelectInputValue || filterItem}
+              id='multiselect_input'
+              onChange={(e) => {
+                setFilterItem(e.target.value)
+              }}
+              placeholder={inputDisplay === "none" && itemsSelectedLength() ? (
+                    `${itemsSelectedLength()} ${itemsSelectedLength() === 1 ? 'item' : 'items'} selected`
+                  ) : ("Start typing...")}
+              value={filterItem}
+              onClick={() => setIsClosed(false)}
             />
           </div>
-
-          {isDropdownClosed ? (
-            <div key="chevron-down">
-              <Icon
-                  icon="chevron-down"
-                  size="xs"
-              />
+          {isClosed ? (
+            <div key='chevron-down'>
+              <Icon icon='chevron-down' size="xs"/>
             </div>
           ) : (
-            <div key="chevron-up">
-              <Icon
-                  icon="chevron-up"
-                  size="xs"
-              />
+            <div key='chevron-up'>
+              <Icon icon='chevron-up' size="xs"/>
             </div>
           )}
         </div>
-
-        <div className={`dropdown_menu ${isDropdownClosed ? "close" : "open"}`}>
+        <div className={`dropdown_menu ${isClosed ? "close" : "open"}`}>
           {renderNestedOptions(
-            filterItem
-              ? findByFilter(formattedData, filterItem)
-              : formattedData
+            filterItem ? findByFilter(formattedData, filterItem) : formattedData
           )}
         </div>
       </div>

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb

@@ -8,7 +8,6 @@
         label: "People",
         value: "People",
         id: "101",
-        expanded: true,
         children: [
           {
             label: "Talent Acquisition",
@@ -64,8 +63,10 @@
     ],
 }] %>
 
-<%= pb_rails("multi_level_select", props: {
-    id: "multi-level-select-default-rails",
-    name: "my_array",
-    tree_data: treeData
-}) %>
+
+
+  <%= pb_rails("multi_level_select", props: {
+      id: "multi-level-select-default-rails",
+      name: "my_array",
+      tree_data: treeData
+  }) %>

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.jsx

@@ -77,7 +77,7 @@ const MultiLevelSelectSelectedIds = (props) => {
           console.log("Selected Items with Return All Selected Data", selectedNodes)
           }
           returnAllSelected
-          selectedIds={["energy1", "talent1"]}
+          selectedIds={["energy1","talent1"]}
           treeData={treeData}
           {...props}
       />