playbook_ui 14.4.0 → 14.5.0.pre.alpha.PBNTR374multilevelselectPOC3946

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

@@ -1,14 +1,17 @@
-import React, { useState, useEffect, useRef } from "react"
-import classnames from "classnames"
-import { globalProps, GlobalProps } from "../utilities/globalProps"
-import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props"
-import Checkbox from "../pb_checkbox/_checkbox"
-import Radio from "../pb_radio/_radio"
-import Body from "../pb_body/_body"
-import Icon from "../pb_icon/_icon"
-import FormPill from "../pb_form_pill/_form_pill"
-import CircleIconButton from "../pb_circle_icon_button/_circle_icon_button"
-import { cloneDeep } from "lodash"
+import React, { useState, useEffect, useRef } from "react";
+import classnames from "classnames";
+import { globalProps, GlobalProps } from "../utilities/globalProps";
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+  buildHtmlProps,
+} from "../utilities/props";
+import Icon from "../pb_icon/_icon";
+import FormPill from "../pb_form_pill/_form_pill";
+import { cloneDeep } from "lodash";
+import MultiLevelSelectOptions from "./multi_level_select_options";
+import MultiLevelSelectContext from "./context";
 
 import {
   getAncestorsOfUnchecked,
@@ -18,7 +21,7 @@ import {
   getDefaultCheckedItems,
   recursiveCheckParent,
   getExpandedItems,
-} from "./_helper_functions"
+} from "./_helper_functions";
 
 type MultiLevelSelectProps = {
   aria?: { [key: string]: string }
@@ -30,9 +33,9 @@ type MultiLevelSelectProps = {
   inputName?: string
   name?: string
   returnAllSelected?: boolean
-  treeData?: { [key: string]: string }[]
+  treeData?: { [key: string]: string; }[] | any
   onSelect?: (prop: { [key: string]: any }) => void
-  selectedIds?: string[]
+  selectedIds?: string[] | any
   variant?: "multi" | "single"
   pillColor?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
 } & GlobalProps
@@ -52,140 +55,152 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     onSelect = () => null,
     selectedIds,
     variant = "multi",
+    children,
     pillColor = "primary"
   } = props
 
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const htmlProps = buildHtmlProps(htmlOptions);
   const classes = classnames(
     buildCss("pb_multi_level_select"),
     globalProps(props),
     className
-  )
+  );
 
-  const dropdownRef = useRef(null)
+  const dropdownRef = useRef(null);
 
   // State for whether dropdown is open or closed
-  const [isDropdownClosed, setIsDropdownClosed] = useState(true)
+  const [isDropdownClosed, setIsDropdownClosed] = useState(true);
   // State from onChange for textinput, to use for filtering to create typeahead
-  const [filterItem, setFilterItem] = useState("")
+  const [filterItem, setFilterItem] = useState("");
   // FormattedData with checked and parent_id added
-  const [formattedData, setFormattedData] = useState([])
+  const [formattedData, setFormattedData] = useState([]);
   // State for the return of returnAllSelected
-  const [returnedArray, setReturnedArray] = useState([])
+  const [returnedArray, setReturnedArray] = useState([]);
   // State for default return
-  const [defaultReturn, setDefaultReturn] = useState([])
+  const [defaultReturn, setDefaultReturn] = useState([]);
   // Get expanded items from treeData
-  const initialExpandedItems = getExpandedItems(treeData, selectedIds)
+  const initialExpandedItems = getExpandedItems(treeData, selectedIds);
   // Initialize state with expanded items
-  const [expanded, setExpanded] = useState(initialExpandedItems)
+  const [expanded, setExpanded] = useState(initialExpandedItems);
 
   // Single Select specific state
   const [singleSelectedItem, setSingleSelectedItem] = useState({
     id: [],
     value: "",
-    item: []
-  })
+    item: [],
+  });
+
+  const arrowDownElementId = `arrow_down_${id}`
+  const arrowUpElementId = `arrow_up_${id}`
 
   const modifyRecursive = (tree: { [key: string]: any }[], check: boolean) => {
     if (!Array.isArray(tree)) {
-      return
+      return;
     }
     return tree.map((item: { [key: string]: any }) => {
-      item.checked = check
-      item.children = modifyRecursive(item.children, check)
-      return item
-    })
-  }
+      item.checked = check;
+      item.children = modifyRecursive(item.children, check);
+      return item;
+    });
+  };
 
-   // 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,
+    parent_id: string | null = null,
+    depth = 0
   ) => {
     if (!Array.isArray(treeData)) {
-      return
+      return;
     }
     return treeData.map((item: { [key: string]: any } | any) => {
       const newItem = {
         ...item,
-        checked: Boolean(selectedIds && selectedIds.length && selectedIds.includes(item.id)),
+        checked: Boolean(
+          selectedIds && selectedIds.length && selectedIds.includes(item.id)
+        ),
         parent_id,
         depth,
-      }
+      };
       if (newItem.children && newItem.children.length > 0) {
         const children =
           item.checked && !returnAllSelected
             ? modifyRecursive(item.children, true)
-            : item.children
+            : item.children;
         newItem.children = addCheckedAndParentProperty(
           children,
           selectedIds,
           newItem.id,
           depth + 1
-        )
+        );
       }
-      return newItem
-    })
-  }
+      return newItem;
+    });
+  };
 
   useEffect(() => {
     const formattedData = addCheckedAndParentProperty(
       treeData,
       variant === "single" ? [selectedIds?.[0]] : selectedIds
-    )
+    );
 
-    setFormattedData(formattedData)
+    setFormattedData(formattedData);
 
     if (variant === "single") {
       // No selectedIds, reset state
       if (selectedIds?.length === 0 || !selectedIds?.length) {
-        setSingleSelectedItem({ id: [], value: "", item: []})
+        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])
+          const selectedItem = filterFormattedDataById(
+            formattedData,
+            selectedIds[0]
+          );
 
           if (!selectedItem.length) {
-            setSingleSelectedItem({ id: [], value: "", item: []})
+            setSingleSelectedItem({ id: [], value: "", item: [] });
           } else {
-            const { id, value } = selectedItem[0]
-            setSingleSelectedItem({ id: [id], value, item: selectedItem})
+            const { id, value } = selectedItem[0];
+            setSingleSelectedItem({ id: [id], value, item: selectedItem });
           }
         }
       }
     }
-  }, [treeData, selectedIds])
+  }, [treeData, selectedIds]);
 
   useEffect(() => {
     if (returnAllSelected) {
-      setReturnedArray(getCheckedItems(formattedData))
+      setReturnedArray(getCheckedItems(formattedData));
     } else if (variant === "single") {
-      setDefaultReturn(singleSelectedItem.item)
+      setDefaultReturn(singleSelectedItem.item);
     } else {
-      setDefaultReturn(getDefaultCheckedItems(formattedData))
+      setDefaultReturn(getDefaultCheckedItems(formattedData));
     }
-  }, [formattedData])
+  }, [formattedData]);
 
   useEffect(() => {
     // Function to handle clicks outside the dropdown
     const handleClickOutside = (event: any) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target) &&
+        event.target.id !== arrowDownElementId &&
+        event.target.id !== arrowUpElementId
+      ) {
         setIsDropdownClosed(true)
       }
-    }
+    };
     // Attach the event listener
-    window.addEventListener("click", handleClickOutside)
+    window.addEventListener("click", handleClickOutside);
     // Clean up the event listener on unmount
     return () => {
-      window.removeEventListener("click", handleClickOutside)
-    }
-  }, [])
-
-
+      window.removeEventListener("click", handleClickOutside);
+    };
+  }, []);
 
   // Iterate over tree, find item and set checked or unchecked
   const modifyValue = (
@@ -194,234 +209,182 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     check: boolean
   ) => {
     if (!Array.isArray(tree)) {
-      return
+      return;
     }
     return tree.map((item: any) => {
-      if (item.id != id) item.children = modifyValue(id, item.children, check)
+      if (item.id != id) item.children = modifyValue(id, item.children, check);
       else {
-        item.checked = check
+        item.checked = check;
 
         if (variant === "single") {
           // Single select: no children should be checked
-          item.children = modifyRecursive(item.children, !check)
+          item.children = modifyRecursive(item.children, !check);
         } else {
-          item.children = modifyRecursive(item.children, check)
+          item.children = modifyRecursive(item.children, check);
         }
       }
 
-      return item
-    })
-  }
+      return item;
+    });
+  };
 
   // Clone tree, check items + children
   const checkItem = (item: { [key: string]: any }) => {
-    const tree = cloneDeep(formattedData)
+    const tree = cloneDeep(formattedData);
     if (returnAllSelected) {
-      return modifyValue(item.id, tree, true)
+      return modifyValue(item.id, tree, true);
     } else {
-      const checkedTree = modifyValue(item.id, tree, true)
-      return recursiveCheckParent(item, checkedTree)
+      const checkedTree = modifyValue(item.id, tree, true);
+      return recursiveCheckParent(item, checkedTree);
     }
-  }
+  };
 
   // Clone tree, uncheck items + children
   const unCheckItem = (item: { [key: string]: any }) => {
-    const tree = cloneDeep(formattedData)
+    const tree = cloneDeep(formattedData);
     if (returnAllSelected) {
-      return modifyValue(item.id, tree, false)
+      return modifyValue(item.id, tree, false);
     } else {
-      const uncheckedTree = modifyValue(item.id, tree, false)
-      return getAncestorsOfUnchecked(uncheckedTree, item)
+      const uncheckedTree = modifyValue(item.id, tree, false);
+      return getAncestorsOfUnchecked(uncheckedTree, item);
     }
-  }
+  };
 
   // setFormattedData with proper properties
   const changeItem = (item: { [key: string]: any }, check: boolean) => {
-    const tree = check ? checkItem(item) : unCheckItem(item)
-    setFormattedData(tree)
+    const tree = check ? checkItem(item) : unCheckItem(item);
+    setFormattedData(tree);
 
-    return tree
-  }
-
- 
+    return tree;
+  };
 
   // 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
-    event.stopPropagation()
-    const updatedTree = changeItem(clickedItem, false)
+    event.stopPropagation();
+    const updatedTree = changeItem(clickedItem, false);
     // Logic for removing items from returnArray or defaultReturn when pills clicked
     if (returnAllSelected) {
-      onSelect(getCheckedItems(updatedTree))
+      onSelect(getCheckedItems(updatedTree));
     } else {
-      onSelect(getDefaultCheckedItems(updatedTree))
+      onSelect(getDefaultCheckedItems(updatedTree));
     }
-  }
+  };
 
   // 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 (
       e.target.id === "multiselect_input" ||
       e.target.classList.contains("pb_form_pill_tag")
     ) {
-      return
+      return;
     }
-    setIsDropdownClosed(!isDropdownClosed)
-  }
+    setIsDropdownClosed(!isDropdownClosed);
+  };
 
   // Main function to handle any click inside dropdown
   const handledropdownItemClick = (e: any, check: boolean) => {
-    const clickedItem = e.target.parentNode.id
+    const clickedItem = e.target.parentNode.id;
     // Setting filterItem to "" will clear textinput and clear typeahead
-    setFilterItem("")
+    setFilterItem("");
 
-    const filtered = filterFormattedDataById(formattedData, clickedItem)
-    const updatedTree = changeItem(filtered[0], check)
+    const filtered = filterFormattedDataById(formattedData, clickedItem);
+    const updatedTree = changeItem(filtered[0], check);
     if (returnAllSelected) {
-      onSelect(getCheckedItems(updatedTree))
+      onSelect(getCheckedItems(updatedTree));
     } else {
-      onSelect(getDefaultCheckedItems(updatedTree))
+      onSelect(getDefaultCheckedItems(updatedTree));
     }
-  }
+  };
 
   // Single select
-  const handleRadioButtonClick = (
-    e: React.ChangeEvent<HTMLInputElement>,
-  ) => {
-    const { id, value: inputText } = e.target
+  const handleRadioButtonClick = (e: React.ChangeEvent<HTMLInputElement>) => {
+    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]
+    const selectedItemID = id.match(/^[^-]*/)[0];
     // Reset tree checked state, triggering useEffect
-    const treeWithNoSelections = modifyRecursive(formattedData, false)
+    const treeWithNoSelections = modifyRecursive(formattedData, false);
     // Update tree with single selection
-    const treeWithSelectedItem = modifyValue(selectedItemID, treeWithNoSelections, true)
-    const selectedItem = filterFormattedDataById(treeWithSelectedItem, selectedItemID)
-
-    setFormattedData(treeWithSelectedItem)
-    setSingleSelectedItem({id: [selectedItemID], value: inputText, item: selectedItem})
+    const treeWithSelectedItem = modifyValue(
+      selectedItemID,
+      treeWithNoSelections,
+      true
+    );
+    const selectedItem = filterFormattedDataById(
+      treeWithSelectedItem,
+      selectedItemID
+    );
+
+    setFormattedData(treeWithSelectedItem);
+    setSingleSelectedItem({
+      id: [selectedItemID],
+      value: inputText,
+      item: selectedItem,
+    });
     // Reset the filter to always display dropdown options on click
-    setFilterItem("")
-    setIsDropdownClosed(true)
+    setFilterItem("");
+    setIsDropdownClosed(true);
 
-    onSelect(selectedItem)
+    onSelect(selectedItem);
   };
 
   // Single select: reset the tree state upon typing
   const handleRadioInputChange = (inputText: string) => {
-    modifyRecursive(formattedData, false)
-    setDefaultReturn([])
-    setSingleSelectedItem({id: [], value: inputText, item: []})
-    setFilterItem(inputText)
+    modifyRecursive(formattedData, false);
+    setDefaultReturn([]);
+    setSingleSelectedItem({ id: [], value: inputText, item: [] });
+    setFilterItem(inputText);
   };
 
-  const isTreeRowExpanded = (item: any) => expanded.indexOf(item.id) > -1
+  const isTreeRowExpanded = (item: any) => expanded.indexOf(item.id) > -1;
 
   // Handle click on chevron toggles in dropdown
   const handleToggleClick = (id: string, event: React.MouseEvent) => {
-    event.stopPropagation()
-    const clickedItem = filterFormattedDataById(formattedData, id)
+    event.stopPropagation();
+    const clickedItem = filterFormattedDataById(formattedData, id);
     if (clickedItem) {
-      let expandedArray = [...expanded]
-      const itemExpanded = isTreeRowExpanded(clickedItem[0])
+      let expandedArray = [...expanded];
+      const itemExpanded = isTreeRowExpanded(clickedItem[0]);
 
       if (itemExpanded)
-        expandedArray = expandedArray.filter((i) => i != clickedItem[0].id)
-      else expandedArray.push(clickedItem[0].id)
+        expandedArray = expandedArray.filter((i) => i != clickedItem[0].id);
+      else expandedArray.push(clickedItem[0].id);
 
-      setExpanded(expandedArray)
+      setExpanded(expandedArray);
     }
-  }
+  };
 
   const itemsSelectedLength = () => {
-    let items
+    let items;
     if (returnAllSelected && returnedArray && returnedArray.length) {
-      items = returnedArray.length
+      items = returnedArray.length;
     } else if (!returnAllSelected && defaultReturn && defaultReturn.length) {
-      items = defaultReturn.length
+      items = defaultReturn.length;
     }
-    return items
-  }
+    return items;
+  };
 
   // Rendering formattedData to UI based on typeahead
-  const renderNestedOptions = (items: { [key: string]: any }[]) => {
-    return (
-      <ul>
-        {Array.isArray(items) &&
-          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">
-                    { !item.parent_id && !item.children ? null :
-                        <div
-                            key={isTreeRowExpanded(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"
-                          />
-                        </div>
-                    }
-                    { variant === "single" ? (
-                      item.hideRadio ? (
-                        <Body>{item.label}</Body>
-                      ) :
-                      <Radio
-                          checked={item.checked}
-                          id={`${item.id}-${item.label}`}
-                          label={item.label}
-                          name={inputName}
-                          onChange={(e: React.ChangeEvent<HTMLInputElement>) => (
-                            handleRadioButtonClick(e)
-                          )}
-                          padding={item.children ? 'none' : 'xs'}
-                          type="radio"
-                          value={item.label}
-                      />
-                    ) : (
-                      <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>
-                    )}
-                  </div>
-                  {isTreeRowExpanded(item) &&
-                    item.children &&
-                    item.children.length > 0 &&
-                    (variant === "single" || !filterItem) && ( // Show children if expanded is true
-                      <div>{renderNestedOptions(item.children)}</div>
-                    )}
-                </li>
-              </div>
-            )
-          })}
-      </ul>
-    )
-  }
+  const renderNestedOptions = (items: { [key: string]: string; }[] | any ) => {
+    const hasOptionsChild = React.Children.toArray(props.children).some(
+      child => child.type === MultiLevelSelect.Options
+    );
+
+    if (hasOptionsChild) {
+      return React.Children.map(props.children, (child) => {
+        if (child.type === MultiLevelSelect.Options) {
+          return React.cloneElement(child, { items });
+        }
+        return null;
+      });
+    } else {
+      // If nochildren, use the default rendering
+      return (
+        <MultiLevelSelectOptions items={items} />
+      );
+    }
+  };
+
 
   return (
     <div
@@ -431,12 +394,20 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
         className={classes}
         id={id}
     >
-      <div
-          className="wrapper"
+      <MultiLevelSelectContext.Provider value={{
+          variant,
+          inputName,
+          renderNestedOptions,
+          isTreeRowExpanded,
+          handleToggleClick,
+          handleRadioButtonClick,
+          handledropdownItemClick,
+          filterItem,
+      }}>
+      <div className="wrapper" 
           ref={dropdownRef}
       >
-        <div
-            className="input_wrapper"
+        <div className="input_wrapper" 
             onClick={handleInputWrapperClick}
         >
           <div className="input_inner_container">
@@ -502,15 +473,17 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
 
             <input
                 id="multiselect_input"
-                onChange={(e) =>{
+                onChange={(e) => {
                   variant === "single"
                     ? handleRadioInputChange(e.target.value)
-                    : setFilterItem(e.target.value)
+                    : setFilterItem(e.target.value);
                 }}
                 onClick={() => setIsDropdownClosed(false)}
                 placeholder={
                   inputDisplay === "none" && itemsSelectedLength()
-                    ? `${itemsSelectedLength()} ${itemsSelectedLength() === 1 ? "item" : "items"} selected`
+                    ? `${itemsSelectedLength()} ${
+                        itemsSelectedLength() === 1 ? "item" : "items"
+                      } selected`
                     : "Start typing..."
                 }
                 value={singleSelectedItem.value || filterItem}
@@ -518,16 +491,20 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
           </div>
 
           {isDropdownClosed ? (
-            <div key="chevron-down">
+            <div id={arrowDownElementId}
+                key="chevron-down">
               <Icon
                   icon="chevron-down"
+                  id={arrowDownElementId}
                   size="xs"
               />
             </div>
           ) : (
-            <div key="chevron-up">
+            <div id={arrowUpElementId}
+                key="chevron-up">
               <Icon
                   icon="chevron-up"
+                  id={arrowUpElementId}
                   size="xs"
               />
             </div>
@@ -535,15 +512,16 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
         </div>
 
         <div className={`dropdown_menu ${isDropdownClosed ? "close" : "open"}`}>
-          {renderNestedOptions(
-            filterItem
-              ? findByFilter(formattedData, filterItem)
-              : formattedData
-          )}
+            {renderNestedOptions(
+              filterItem ? findByFilter(formattedData, filterItem) : formattedData
+            )}
         </div>
       </div>
+      </MultiLevelSelectContext.Provider>
     </div>
-  )
-}
+  );
+};
+
+MultiLevelSelect.Options = MultiLevelSelectOptions;
 
-export default MultiLevelSelect
+export default MultiLevelSelect;