playbook_ui 13.9.0.pre.alpha.PLAY962SingleSelect1261 → 13.9.0.pre.alpha.play845addswiftkitspage1272

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bbbb7405fff8ba7bff61edf5ab1b7a454b62f10fbf0ce7373a053dd7e938fd41
-  data.tar.gz: 88cf1a1646d62f2633ff8b49905dfb7ffab11faea0466627d644016892be5b73
+  metadata.gz: b91636e19909173c0d2f8ffd1801bf349381fab00a40cb2bb80a21c68af02a55
+  data.tar.gz: 406f39b49e8c6ffc8dfa10995296bf0422d2d39b6caf336ab8e6fe6872c7aeab
 SHA512:
-  metadata.gz: 27dd8117514678def0ba2ae25d01e52dd731af744bfeaafc13ae53166604ec41403b513943ea2f9217e3c72c63d23b7b9b8c625dfe2180837ec86c01586be4c0
-  data.tar.gz: 84fd12d4ed1dd1e67a6bb3a8dc4e9f96fd2f67272048a6f7d0ed686fc1caac9851f254686391b2abae25237e5f6cdd4bf49520c46a424a253a766d1d98b402c5
+  metadata.gz: d71556af4a0ad82fb02cf42cdf0d1a73bcae4d1acf6c098b2cbf808d62d97f2685e57dfdd9b45952e06248b017a37ee4e21a6b9ca34723e94fb7992d6b6cdb75
+  data.tar.gz: 1c150e6e069967f949b31108a7fb497896c3e5380665dd0e97c3becf621cb4e3a05c32946293aaab47bc5c6a4bcb157247c66ee91de45937af3bb69120c69bb7

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,61 +55,29 @@ 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)
-
-  // Single Select specific state
-  const [singleSelectedItem, setSingleSelectedItem] = useState({
-    id: [],
-    value: "",
-    item: []
-  })
+  // Get expanded items from treeData.
+  const initialExpandedItems = getExpandedItems(treeData, selectedIds);
+  // Initialize state with expanded items.
+  const [expanded, setExpanded] = useState(initialExpandedItems);
 
-  useEffect(() => {
-    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})
-          }
-        }
-      }
-    }
+  useEffect(() => {
+    setFormattedData(addCheckedAndParentProperty(treeData, selectedIds))
   }, [treeData, selectedIds])
 
   useEffect(() => {
     if (returnAllSelected) {
       setReturnedArray(getCheckedItems(formattedData))
-    } else if (variant === "single") {
-      setDefaultReturn(singleSelectedItem.item)
     } else {
       setDefaultReturn(getDefaultCheckedItems(formattedData))
     }
@@ -124,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
@@ -146,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 }[],
@@ -159,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) {
@@ -183,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) {
@@ -194,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)
@@ -202,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,7 +172,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     return treeData.map((item: { [key: string]: any } | any) => {
       const newItem = {
         ...item,
-        checked: Boolean(selectedIds && selectedIds.length && selectedIds.includes(item.id)),
+        checked: selectedIds && selectedIds.length && selectedIds.includes(item.id),
         parent_id,
         depth,
       }
@@ -235,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 {
@@ -248,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 (
@@ -257,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)
@@ -275,45 +232,15 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     }
   }
 
-  // Single select
-  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]
-    // 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({id: [selectedItemID], value: inputText, item: selectedItem})
-    // 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)
-    setDefaultReturn([])
-    setSingleSelectedItem({id: [], value: inputText, item: []})
-    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)
@@ -332,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>
@@ -341,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}-${item.label}`}
-                          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>
@@ -407,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={singleSelectedItem.value || 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>