playbook_ui 13.8.0.pre.alpha.PLAY962SingleSelect1246 → 13.8.0.pre.alpha.PLAY962SingleSelect1256

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 91dabc0c37f4b0d7c83e0c9728a4db6d2eb34fe92c387934cab037fd18025e2a
-  data.tar.gz: ab8ea303f33c2cc6e47d9af314ccf15e41fad54fdfa1e743a00cd1ec5b3e41f5
+  metadata.gz: b8102315dc69078080e1f98874ceea21fcd821128990090d05be19a2e4b4cb17
+  data.tar.gz: b7927d75f3b7bdbebc9dddcd46ece644ace71c20ffd799e663ae22cfd17f6f40
 SHA512:
-  metadata.gz: dd3547fb3e5ec0242dd18e1ad45c4bbf075adc932f33befa20f5cb6874b63bd90df323661d58330a55ea0f6e4d03460c9d8ac888c5e887cb28cef8c66f208289
-  data.tar.gz: 44206940d57a0f6dd4d875dac195ade688a6aaff286ae489f9e6ee70987355410a8d397d66f3d06237adb5b49df2e9965a72f63c2245ab78c5b94692e8703f81
+  metadata.gz: b73def220f81c357ac0cdc409fa4503171f3bdad7b32d0f57585c30520b52ad605700c2c51db1172f03b3ef143d893f4a7ed1cf23e976dd497915281c0750175
+  data.tar.gz: 6c46e0f9e4933526ea0a26c340dd9cf5cd0d267c376750c71172891d2a3029040727530b54070064d22b1f31d0fa9c4ee30cd2c596a58148213c07ef1fb206b9

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

@@ -62,7 +62,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
 
   // 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 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([])
@@ -74,27 +74,47 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
   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([])
+
+  // Single Select specific state
+  const [singleSelectedItem, setSingleSelectedItem] = useState({
+    id: [],
+    value: "",
+    item: []
+  })
 
   useEffect(() => {
-    setFormattedData(addCheckedAndParentProperty(treeData, selectedIds))
+    const formattedData = addCheckedAndParentProperty(
+      treeData,
+      variant === "single" ? [selectedIds?.[0]] : selectedIds
+    )
+
+    setFormattedData(formattedData)
+
+    if (variant === "single") {
+      // No selectedIds, reset state
+      if (selectedIds?.length === 0 || !selectedIds?.length) {
+        setSingleSelectedItem({ id: [], value: "", item: []})
+      } else {
+        // If there is a selectedId but no current item, set the selectedItem
+        if (selectedIds?.length !== 0 && !singleSelectedItem.value) {
+          const selectedItem = filterFormattedDataById(formattedData, selectedIds[0])
+
+          if (!selectedItem.length) {
+            setSingleSelectedItem({ id: [], value: "", item: []})
+          } else {
+            const { id, value } = selectedItem[0]
+            setSingleSelectedItem({ id: [id], value, item: selectedItem})
+          }
+        }
+      }
+    }
   }, [treeData, selectedIds])
 
   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)
-      }
+      setDefaultReturn(singleSelectedItem.item)
     } else {
       setDefaultReturn(getDefaultCheckedItems(formattedData))
     }
@@ -195,7 +215,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     return treeData.map((item: { [key: string]: any } | any) => {
       const newItem = {
         ...item,
-        checked: selectedIds && selectedIds.length && selectedIds.includes(item.id),
+        checked: Boolean(selectedIds && selectedIds.length && selectedIds.includes(item.id)),
         parent_id,
         depth,
       }
@@ -259,7 +279,9 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
   const handleRadioButtonClick = (
     e: React.ChangeEvent<HTMLInputElement>,
   ) => {
-    const { id: selectedItemID, value: inputText } = e.target
+    const { id, value: inputText } = e.target
+    // The radio button needs a unique ID, this grabs the ID before the hyphen
+    const selectedItemID = id.match(/^[^-]*/)[0]
     // Reset tree checked state, triggering useEffect
     const treeWithNoSelections = modifyRecursive(formattedData, false)
     // Update tree with single selection
@@ -267,8 +289,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     const selectedItem = filterFormattedDataById(treeWithSelectedItem, selectedItemID)
 
     setFormattedData(treeWithSelectedItem)
-    setSingleSelectedItem(selectedItem)
-    setSingleSelectInputValue(inputText)
+    setSingleSelectedItem({id: [selectedItemID], value: inputText, item: selectedItem})
     // Reset the filter to always display dropdown options on click
     setFilterItem("")
     setIsDropdownClosed(true)
@@ -279,7 +300,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
   // Single select: reset the tree state upon typing
   const handleRadioInputChange = (inputText: string) => {
     modifyRecursive(formattedData, false)
-    setSingleSelectInputValue(inputText)
+    setSingleSelectedItem({id: [], value: inputText, item: []})
     setFilterItem(inputText)
   };
 
@@ -345,7 +366,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                     { variant === "single" ? (
                       <Radio
                           checked={item.checked}
-                          id={item.id}
+                          id={`${item.id}-${item.label}`}
                           label={item.label}
                           name={inputName}
                           onChange={(e: React.ChangeEvent<HTMLInputElement>) => (
@@ -474,7 +495,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                     ? `${itemsSelectedLength()} ${itemsSelectedLength() === 1 ? "item" : "items"} selected`
                     : "Start typing..."
                 }
-                value={singleSelectInputValue || filterItem}
+                value={singleSelectedItem.value || filterItem}
             />
           </div>
 

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

@@ -76,6 +76,7 @@ const MultiLevelSelectSingle = (props) => {
           id="multiselect-single"
           inputName="Power"
           onSelect={(selectedNode) => console.log("Selected Node", selectedNode)}
+          selectedIds={["eney2"]}
           treeData={treeData}
           variant="single"
           {...props}