playbook_ui 14.5.0.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4216 → 14.5.0.pre.alpha.PLAY1486highchartscssdrivenPOC3930

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

@@ -1,17 +1,14 @@
-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 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 {
   getAncestorsOfUnchecked,
@@ -21,7 +18,7 @@ import {
   getDefaultCheckedItems,
   recursiveCheckParent,
   getExpandedItems,
-} from "./_helper_functions";
+} from "./_helper_functions"
 
 type MultiLevelSelectProps = {
   aria?: { [key: string]: string }
@@ -33,9 +30,9 @@ type MultiLevelSelectProps = {
   inputName?: string
   name?: string
   returnAllSelected?: boolean
-  treeData?: { [key: string]: string; }[] | any
+  treeData?: { [key: string]: string }[]
   onSelect?: (prop: { [key: string]: any }) => void
-  selectedIds?: string[] | any
+  selectedIds?: string[]
   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
@@ -55,132 +52,126 @@ 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 = null,
-    depth = 0
+    parent_id: string = 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
@@ -193,31 +184,16 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
       ) {
         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);
-    };
-  }, []);
-
-  useEffect(() => {
-    if (id) {
-      // Attach the clear function to the window, scoped by the id
-      (window as any)[`clearMultiLevelSelect_${id}`] = () => {
-        const resetData = modifyRecursive(formattedData, false);
-        setFormattedData(resetData);
-        setReturnedArray([]);
-        setDefaultReturn([]);
-        setSingleSelectedItem({ id: [], value: "", item: [] });
-        onSelect([]);
-      };
-      return () => {
-        delete (window as any)[`clearMultiLevelSelect_${id}`];
-      };
+      window.removeEventListener("click", handleClickOutside)
     }
-  }, [formattedData, id, onSelect]);
+  }, [])
+
+
 
   // Iterate over tree, find item and set checked or unchecked
   const modifyValue = (
@@ -226,67 +202,69 @@ 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) => {
@@ -294,114 +272,163 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
       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]: string; }[] | any ) => {
-    const hasOptionsChild = React.Children.toArray(props.children).some(
-      (child: any) => 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 no children, use the default rendering
-      return (
-        <MultiLevelSelectOptions items={items} />
-      );
-    }
-  };
-
+  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>
+    )
+  }
 
   return (
     <div
@@ -411,20 +438,12 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
         className={classes}
         id={id}
     >
-      <MultiLevelSelectContext.Provider value={{
-          variant,
-          inputName,
-          renderNestedOptions,
-          isTreeRowExpanded,
-          handleToggleClick,
-          handleRadioButtonClick,
-          handledropdownItemClick,
-          filterItem,
-      }}>
-      <div className="wrapper" 
+      <div
+          className="wrapper"
           ref={dropdownRef}
       >
-        <div className="input_wrapper" 
+        <div
+            className="input_wrapper"
             onClick={handleInputWrapperClick}
         >
           <div className="input_inner_container">
@@ -490,17 +509,15 @@ 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}
@@ -529,16 +546,15 @@ 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

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

@@ -87,4 +87,4 @@ const MultiLevelSelectDefault = (props) => {
   )
 };
 
-export default MultiLevelSelectDefault;
+export default MultiLevelSelectDefault;