playbook_ui 12.26.0.pre.alpha.railsmultilevelimprovements805 → 12.26.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 79c732fa4dc676050bdbc6dda57f9a180670d812ffeeb73ba5d410a683a2c6bf
-  data.tar.gz: 332c5b9b341d69f47d83af65dfd5936918ee3b7e4149884892a8c4926b7ec3e7
+  metadata.gz: f05ba004408818dfcba9bd10157c3c88af1dd4d310795c061f333b5945fc4f5a
+  data.tar.gz: e0634afd89ddd77122ed2a6fedf1a0af05dbc0a07e93dccae55b1e2227303cbc
 SHA512:
-  metadata.gz: bd51e6d5feffbe630c6e315e17e108d3f2c2d55a55b2ba12fbe14894950f61e9d457cb29899993a7f990564140e95e78c8251e675cfa7f3048dacfb7cb24d72f
-  data.tar.gz: fd53b4b633ea48c3b6db1f2f87c017509db18cf1d7732d9a1992ee3147e8df41d6e0b05fa1bf5f876c2304c3ae71ddb8627deb1e5abd65de8d8f14ccac9bc139
+  metadata.gz: d9c746e3c5e9e738c378c47f109c3c7ac8f069da5d04fca517dc58128053d6b02a75b0ba2d244d1f070348f856d8348438721f59708afd9b9be90ba82f66267f
+  data.tar.gz: '050496ad839d51a4fc1e6440d9356f578cb3613b788770ffbd703b99c1f1f14d1e060e6dd7b7bc1fb878c61f5f1a697b0a8df3ddb55b8f0ee4085d047a6be9a8'

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

@@ -1,11 +1,11 @@
-import React, { useState, useEffect, useRef } from "react"
-import classnames from "classnames"
-import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props"
-import { globalProps, GlobalProps } from "../utilities/globalProps"
-import Icon from "../pb_icon/_icon"
-import Checkbox from "../pb_checkbox/_checkbox"
-import FormPill from "../pb_form_pill/_form_pill"
-import CircleIconButton from "../pb_circle_icon_button/_circle_icon_button"
+import React, { useState, useEffect, useRef } from "react";
+import classnames from "classnames";
+import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
+import { globalProps, GlobalProps } from "../utilities/globalProps";
+import Icon from "../pb_icon/_icon";
+import Checkbox from "../pb_checkbox/_checkbox";
+import FormPill from "../pb_form_pill/_form_pill";
+import CircleIconButton from "../pb_circle_icon_button/_circle_icon_button";
 import {
   unCheckIt,
   getAncestorsOfUnchecked,
@@ -18,19 +18,17 @@ import {
   recursiveReturnOnlyParent,
   removeChildrenIfParentChecked,
   getChildIds,
-} from "./_helper_functions"
+} from "./_helper_functions";
 
 type MultiLevelSelectProps = {
-  aria?: { [key: string]: string }
-  className?: string
-  data?: { [key: string]: string }
-  id?: string
-  name?: string
-  returnCompleteData?: boolean
-  returnAllSelected?: boolean
-  treeData?: { [key: string]: string }[]
-  onSelect?: (prop: { [key: string]: any }) => void
-} & GlobalProps
+  aria?: { [key: string]: string };
+  className?: string;
+  data?: { [key: string]: string };
+  id?: string;
+  returnAllSelected?: boolean;
+  treeData?: { [key: string]: string }[];
+  onSelect?: (prop: { [key: string]: any }) => void;
+} & GlobalProps;
 
 const MultiLevelSelect = (props: MultiLevelSelectProps) => {
   const {
@@ -38,228 +36,202 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     className,
     data = {},
     id,
-    name,
     returnAllSelected = false,
-    returnCompleteData = false,
     treeData,
     onSelect = () => {},
-  } = props
+  } = props;
 
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
   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 [isClosed, setIsClosed] = useState(true)
+  const [isClosed, setIsClosed] = useState(true);
   //state from onchange for textinput, to use for filtering to create typeahead
-  const [filterItem, setFilterItem] = useState("")
+  const [filterItem, setFilterItem] = useState("");
   //this is essentially the return that the user will get when they use the kit
-  const [returnedArray, setReturnedArray] = useState([])
+  const [returnedArray, setReturnedArray] = useState([]);
   //formattedData with checked and parent_id added
-  const [formattedData, setFormattedData] = useState(treeData)
+  const [formattedData, setFormattedData] = useState(treeData);
   //toggle chevron in dropdown
   //@ts-ignore
-  const [isToggled, setIsToggled] = useState<{ [id: number]: boolean }>({})
+  const [isToggled, setIsToggled] = useState<{ [id: number]: boolean }>({}); 
   //state for return for default
-  const [defaultReturn, setDefaultReturn] = useState([])
-
-  const [formattedReturn, setFormattedReturn] = useState([])
-
-  const getSelectedIds = (selectedData: { [key: string]: any }[]) => {
-    return selectedData
-      .map((item) => item.id)
-      .filter((value, index, self) => self.indexOf(value) === index)
-  }
-
-  const getValues = () => {
-   if(returnCompleteData){
-    if(returnAllSelected){
-      return setFormattedReturn(returnedArray)
-    } else {
-      return setFormattedReturn(defaultReturn) 
-    }
-   } else {
-      if(returnAllSelected){
-        setFormattedReturn(getSelectedIds(returnedArray))
-      } else {
-        setFormattedReturn(getSelectedIds(defaultReturn)) 
-      }
-    }
-  }
-
-  const updateHiddenInputValue = (value: any) => {
-    const hiddenInput = document.querySelector(
-      "input#" + id
-    ) as HTMLInputElement
-    if (hiddenInput) {
-      hiddenInput.value = JSON.stringify(value)
-    }
-  }
+  const [defaultReturn, setDefaultReturn] = useState([]);
 
   useEffect(() => {
-    getValues()
-  }, [returnedArray, defaultReturn])
-
-  useEffect(() => {
-    onSelect(formattedReturn)
-    updateHiddenInputValue(formattedReturn)
-  }, [formattedReturn])
+    let el = document.getElementById(`pb_data_wrapper_${id}`);
+    if (el) {
+      el.setAttribute(
+        "data-tree",
+        JSON.stringify(returnAllSelected ? returnedArray : defaultReturn)
+      );
+    }
+    returnAllSelected
+      ? onSelect(returnedArray)
+      : onSelect(
+          defaultReturn.filter(
+            (item, index, self) =>
+              index === self.findIndex((obj) => obj.id === item.id)
+          )
+        );
+  }, [returnedArray, defaultReturn]);
 
   useEffect(() => {
     //Create new formattedData array for use
-    setFormattedData(addCheckedAndParentProperty(treeData))
+    setFormattedData(addCheckedAndParentProperty(treeData));
     // Function to handle clicks outside the dropdown
     const handleClickOutside = (event: any) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-        setIsClosed(true)
+        setIsClosed(true);
       }
-    }
+    };
     //if any items already checked in first render, set return accordingly
     const initialChecked = getCheckedItems(treeData)
     initialChecked && returnAllSelected && setReturnedArray(initialChecked)
     initialChecked && !returnAllSelected && setDefaultReturn(initialChecked)
 
     // 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);
+    };
+  }, []);
 
   //function to map over data and add parent_id + depth property to each item
   const addCheckedAndParentProperty = (
     treeData: { [key: string]: any }[],
     parent_id: string = null,
-    depth: number = 0
+    depth: number = 0,
   ) => {
     if (!Array.isArray(treeData)) {
-      return
+      return;
     }
     return treeData.map((item: { [key: string]: any } | any) => {
       const newItem = {
         ...item,
         parent_id,
         depth,
-      }
+      };
       if (newItem.children && newItem.children.length > 0) {
         newItem.children = addCheckedAndParentProperty(
           newItem.children,
           newItem.id,
-          depth + 1
-        )
+          depth + 1,
+        );
       }
-      return newItem
-    })
-  }
+      return newItem;
+    });
+  };
 
   //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()
+    event.stopPropagation();
     //logic for removing items from returnArray or defaultReturn when pills clicked
     if (returnAllSelected) {
       if (returnedArray.includes(clickedItem)) {
         if (clickedItem.children && clickedItem.children.length > 0) {
-          const childrenOfChecked = getChildIds(clickedItem, returnedArray)
+          const childrenOfChecked = getChildIds(clickedItem, returnedArray);
           const updatedFiltered = returnedArray
             .filter((item) => item !== clickedItem)
-            .filter((item) => !childrenOfChecked.includes(item.id))
-          setReturnedArray(updatedFiltered)
+            .filter((item) => !childrenOfChecked.includes(item.id));
+          setReturnedArray(updatedFiltered);
         } else {
           const updatedFiltered = returnedArray.filter(
             (item) => item !== clickedItem
-          )
-          setReturnedArray(updatedFiltered)
+          );
+          setReturnedArray(updatedFiltered);
         }
       }
     } else {
       if (defaultReturn.includes(clickedItem)) {
-        getAncestorsOfUnchecked(formattedData, clickedItem)
-        const newChecked = getCheckedItems(formattedData)
+        getAncestorsOfUnchecked(formattedData, clickedItem);
+        const newChecked = getCheckedItems(formattedData);
         const filteredReturn = updateReturnItems(newChecked).filter(
           (item) => item.id !== clickedItem.id
-        )
-        setDefaultReturn(filteredReturn)
+        );
+        setDefaultReturn(filteredReturn);
       }
     }
     if (clickedItem.children && clickedItem.children.length > 0) {
-      unCheckedRecursive(clickedItem)
+      unCheckedRecursive(clickedItem);
     }
     //logic to uncheck clickedItem in formattedData
-    unCheckIt(formattedData, clickedItem.id)
-  }
+    unCheckIt(formattedData, clickedItem.id);
+  };
 
   //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()
+    e.stopPropagation();
     if (
       e.target.id === "multiselect_input" ||
       e.target.classList.contains("pb_form_pill_tag")
     ) {
-      return
+      return;
     }
-    setIsClosed(!isClosed)
-  }
+    setIsClosed(!isClosed);
+  };
 
   //Main function to handle any click inside dropdown
   const handledropdownItemClick = (e: any) => {
-    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 filtered = filterFormattedDataById(formattedData, clickedItem);
     //check and uncheck all children of checked/unchecked parent item
     if (filtered[0].children && filtered[0].children.length > 0) {
       if (filtered[0].checked) {
         filtered[0].children.forEach((item: { [key: string]: any }) => {
-          checkedRecursive(item)
-        })
+          checkedRecursive(item);
+        });
       } else if (!filtered[0].checked) {
         filtered[0].children.forEach((item: { [key: string]: any }) => {
-          unCheckedRecursive(item)
-        })
+          unCheckedRecursive(item);
+        });
       }
     }
 
-    const checkedItems = getCheckedItems(formattedData)
+    const checkedItems = getCheckedItems(formattedData);
 
     //checking and unchecking items for returnAllSelected variant
     if (returnedArray.includes(filtered[0])) {
       if (!filtered[0].checked) {
         if (filtered[0].children && filtered[0].children.length > 0) {
-          const childrenOfChecked = getChildIds(filtered[0], returnedArray)
+          const childrenOfChecked = getChildIds(filtered[0], returnedArray);
           const updatedFiltered = returnedArray
             .filter((item) => item !== filtered[0])
-            .filter((item) => !childrenOfChecked.includes(item.id))
+            .filter((item) => !childrenOfChecked.includes(item.id));
 
-          setReturnedArray(updatedFiltered)
+          setReturnedArray(updatedFiltered);
         } else {
           const updatedFiltered = returnedArray.filter(
             (item) => item !== filtered[0]
-          )
-          setReturnedArray(updatedFiltered)
+          );
+          setReturnedArray(updatedFiltered);
         }
       }
     } else {
-      setReturnedArray(checkedItems)
+      setReturnedArray(checkedItems);
     }
 
     //when item is unchecked for default variant
     if (!filtered[0].checked && !returnAllSelected) {
       //uncheck parent and grandparent if any child unchecked
-      getAncestorsOfUnchecked(formattedData, filtered[0])
+      getAncestorsOfUnchecked(formattedData, filtered[0]);
 
-      const newChecked = getCheckedItems(formattedData)
+      const newChecked = getCheckedItems(formattedData);
       //get all checked items, and filter to check if all children checked, if yes return only parent
-      const filteredReturn = updateReturnItems(newChecked)
-      setDefaultReturn(filteredReturn)
+      const filteredReturn = updateReturnItems(newChecked);
+      setDefaultReturn(filteredReturn);
     }
 
     //when item is checked for default variant
@@ -270,7 +242,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
           filtered[0],
           defaultReturn,
           setDefaultReturn
-        )
+        );
       }
 
       //if clicked item has parent_id, find parent and check if all children checked or not
@@ -280,26 +252,26 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
           formattedData,
           defaultReturn,
           setDefaultReturn
-        )
+        );
       } else {
-        setDefaultReturn([filtered[0]])
+        setDefaultReturn([filtered[0]]);
       }
     }
-  }
+  };
 
   //handle click on chevron toggles in dropdown
   const handleToggleClick = (id: string, event: React.MouseEvent) => {
-    event.stopPropagation()
+    event.stopPropagation();
     setIsToggled((prevState: { [id: string]: boolean }) => ({
       ...prevState,
       [id]: !prevState[id],
-    }))
-    const clickedItem = filterFormattedDataById(formattedData, id)
+    }));
+    const clickedItem = filterFormattedDataById(formattedData, id);
 
     if (clickedItem) {
-      clickedItem[0].expanded = !clickedItem[0].expanded
+      clickedItem[0].expanded = !clickedItem[0].expanded;
     }
-  }
+  };
 
   //rendering formattedData to UI based on typeahead
   const renderNestedOptions = (items: { [key: string]: any }[]) => {
@@ -309,29 +281,35 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
           items.map((item: { [key: string]: any }) => {
             return (
               <>
-                <li key={item.id} className='dropdown_item' data-name={item.id}>
-                  <div className='dropdown_item_checkbox_row'>
-                    <div key={item.expanded ? "chevron-down" : "chevron-right"}>
+                <li
+                  key={item.id}
+                  className="dropdown_item"
+                  data-name={item.id}
+                >
+                  <div className="dropdown_item_checkbox_row">
+                    <div
+                      key={
+                        item.expanded ? "chevron-down" : "chevron-right"
+                      }
+                    >
                       <CircleIconButton
-                        icon={item.expanded ? "chevron-down" : "chevron-right"}
-                        className={
-                          item.children && item.children.length > 0
-                            ? ""
-                            : "toggle_icon"
+                        icon={
+                          item.expanded ? "chevron-down" : "chevron-right"
                         }
+                        className={item.children && item.children.length > 0 ? "" : "toggle_icon"}
                         onClick={(event) => handleToggleClick(item.id, event)}
-                        variant='link'
+                        variant="link"
                       />
                     </div>
                     <Checkbox text={item.label} id={item.id}>
                       <input
                         checked={item.checked}
-                        type='checkbox'
+                        type="checkbox"
                         name={item.label}
                         value={item.label}
                         onChange={(e) => {
-                          item.checked = !item.checked
-                          handledropdownItemClick(e)
+                          item.checked = !item.checked;
+                          handledropdownItemClick(e);
                         }}
                       />
                     </Checkbox>
@@ -344,29 +322,23 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                     )}
                 </li>
               </>
-            )
+            );
           })}
       </ul>
-    )
-  }
+    );
+  };
 
   return (
     <div {...ariaProps} {...dataProps} className={classes} id={id}>
-      <div ref={dropdownRef} className='wrapper'>
-        <div className='input_wrapper' onClick={handleInputWrapperClick}>
-          <div className='input_inner_container'>
-            <input
-              type='hidden'
-              id={id}
-              name={name}
-              value={JSON.stringify(formattedReturn)}
-            />
+      <div ref={dropdownRef} className="wrapper">
+        <div className="input_wrapper" onClick={handleInputWrapperClick}>
+          <div className="input_inner_container">
             {returnedArray.length !== 0 && returnAllSelected
               ? returnedArray.map((item, index) => (
                   <FormPill
                     key={index}
                     text={item.label}
-                    size='small'
+                    size="small"
                     onClick={(event) => handlePillClose(event, item)}
                   />
                 ))
@@ -382,29 +354,29 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                   <FormPill
                     key={index}
                     text={item.label}
-                    size='small'
+                    size="small"
                     onClick={(event) => handlePillClose(event, item)}
                   />
                 ))}
             {returnedArray.length !== 0 && returnAllSelected && <br />}
             {defaultReturn.length !== 0 && !returnAllSelected && <br />}
             <input
-              id='multiselect_input'
+              id="multiselect_input"
               onChange={(e) => {
-                setFilterItem(e.target.value)
+                setFilterItem(e.target.value);
               }}
-              placeholder='Start typing...'
+              placeholder="Start typing..."
               value={filterItem}
               onClick={() => setIsClosed(false)}
             />
           </div>
           {isClosed ? (
-            <div key='chevron-down'>
-              <Icon icon='chevron-down' />
+            <div key="chevron-down">
+              <Icon icon="chevron-down" />
             </div>
           ) : (
-            <div key='chevron-up'>
-              <Icon icon='chevron-up' />
+            <div key="chevron-up">
+              <Icon icon="chevron-up" />
             </div>
           )}
         </div>
@@ -415,7 +387,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
         </div>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default MultiLevelSelect
+export default MultiLevelSelect;

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb

@@ -61,12 +61,12 @@
         ],
       },
     ],
-}] %>
+  }] %>
 
 
 <%= pb_rails("multi_level_select", props: {
     id: "default-multi-level-select",
     tree_data:treeData
-}) %>
+    }) %>
 
 

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

@@ -74,7 +74,7 @@ const MultiLevelSelectDefault = (props) => {
       <MultiLevelSelect
           id="multiselect-default"
           onSelect={(selectedNodes) =>
-          console.log("Selected Items (default... with ids only)", selectedNodes)
+          console.log("Selected Items", selectedNodes)
           }
           treeData={treeData}
           {...props}

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

@@ -2,4 +2,4 @@ The MultiLevelSelect kit renders a multi leveled select dropdown based on data f
 
 For the React version of the kit, the `onSelect` prop returns an array of all checked items, irrespective of whether it is a parent, child or grandchild. Open the console on this example and check and uncheck checkboxes to see this is action!
 
-By default, the return will be an array of Id's. If you want to return the entire object, you can pass `returnCompleteData` as true. This will return an array of objects. 
+For the Rails version, the array of checked items is attached to the DOM in a data attribute titled `data-tree` on the wrapping div around  the MultiLevelSelect.

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb

@@ -64,8 +64,9 @@
     ],
   }] %>
 
+
 <%= pb_rails("multi_level_select", props: {
     id: "parent-persistence-multi-level-select",
     tree_data:treeData,
     return_all_selected: true
-}) %>
+    }) %>

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

@@ -74,7 +74,7 @@ const MultiLevelSelectReturnAllSelected = (props) => {
       <MultiLevelSelect
           id="multiselect-parent-persistence"
           onSelect={(selectedNodes) =>
-          console.log("Selected Items with Return All Selected Data", selectedNodes)
+          console.log("Selected Items", selectedNodes)
           }
           returnAllSelected
           treeData={treeData}

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

@@ -2,11 +2,8 @@ examples:
   rails:
   - multi_level_select_default: Default
   - multi_level_select_return_all_selected: Return All Selected
-  - multi_level_select_return_complete_data: Return Complete Data
-  - multi_level_select_with_form: With Form
   
   react:
   - multi_level_select_default: Default
   - multi_level_select_return_all_selected: Return All Selected
-  - multi_level_select_return_complete_data: Return Complete Data
   

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

@@ -1,3 +1,2 @@
 export { default as MultiLevelSelectDefault } from './_multi_level_select_default.jsx'
-export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
-export { default as MultiLevelSelectReturnCompleteData } from './_multi_level_select_return_complete_data.jsx'
+export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'

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

@@ -3,14 +3,10 @@
 module Playbook
   module PbMultiLevelSelect
     class MultiLevelSelect < Playbook::KitBase
-      prop :id
-      prop :name
       prop :tree_data, type: Playbook::Props::Array,
                        default: []
       prop :return_all_selected, type: Playbook::Props::Boolean,
                                  default: false
-      prop :return_complete_data, type: Playbook::Props::Boolean,
-                                  default: false
 
       def classname
         generate_classname("pb_multi_level_select")
@@ -19,10 +15,8 @@ module Playbook
       def multi_level_select_options
         {
           id: id,
-          name: name,
           treeData: tree_data,
           returnAllSelected: return_all_selected,
-          returnCompleteData: return_complete_data,
         }
       end
     end