playbook_ui 13.8.0.pre.alpha.PLAY962SingleSelect1256 → 13.8.0.pre.alpha.PLAY1016reactionbuttonemojibug1245

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,44 +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)
-    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)
@@ -331,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>
@@ -340,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>
@@ -406,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>

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}
       />

data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml

@@ -1,13 +1,12 @@
 examples:
   rails:
   - multi_level_select_default: Default
-  - multi_level_select_single: Single Select
   - multi_level_select_return_all_selected: Return All Selected
   - multi_level_select_selected_ids: Selected Ids
   - multi_level_select_with_form: With Form
-
+  
   react:
   - multi_level_select_default: Default
-  - multi_level_select_single: Single Select
   - multi_level_select_return_all_selected: Return All Selected
   - multi_level_select_selected_ids: Selected Ids
+  

data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js

@@ -1,4 +1,3 @@
 export { default as MultiLevelSelectDefault } from './_multi_level_select_default.jsx'
-export { default as MultiLevelSelectSingle } from './_multi_level_select_single.jsx'
 export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
-export { default as MultiLevelSelectSelectedIds } from "./_multi_level_select_selected_ids.jsx"
+export { default as MultiLevelSelectSelectedIds } from "./_multi_level_select_selected_ids.jsx"

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb

@@ -14,11 +14,6 @@ module Playbook
       prop :input_display, type: Playbook::Props::Enum,
                            values: %w[pills none],
                            default: "pills"
-      prop :input_name, type: Playbook::Props::String,
-                        default: ""
-      prop :variant, type: Playbook::Props::Enum,
-                     values: %w[multi single],
-                     default: "multi"
 
       def classname
         generate_classname("pb_multi_level_select")
@@ -32,8 +27,6 @@ module Playbook
           treeData: tree_data,
           returnAllSelected: return_all_selected,
           selectedIds: selected_ids,
-          input_name: input_name,
-          variant: variant,
         }
       end
     end