playbook_ui 12.25.0.pre.alpha.PLAY818multilevelrebuild779 → 12.25.0.pre.alpha.play822bolddefaultfortitle3764

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

@@ -1,24 +1,9 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useMemo } 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,
-  unCheckedRecursive,
-  checkedRecursive,
-  filterFormattedDataById,
-  findByFilter,
-  getCheckedItems,
-  updateReturnItems,
-  recursiveReturnOnlyParent,
-  removeChildrenIfParentChecked,
-  getChildIds,
-} from "./_helper_functions";
+import { globalProps } from "../utilities/globalProps";
+import { findItemById, checkIt, unCheckIt, getParentAndAncestorsIds } from "./helper_functions";
+import MultiSelectHelper from "./_multi_select_helper";
 
 type MultiLevelSelectProps = {
   aria?: { [key: string]: string };
@@ -28,7 +13,7 @@ type MultiLevelSelectProps = {
   returnAllSelected?: boolean;
   treeData?: { [key: string]: string }[];
   onSelect?: (prop: { [key: string]: any }) => void;
-} & GlobalProps;
+};
 
 const MultiLevelSelect = (props: MultiLevelSelectProps) => {
   const {
@@ -49,343 +34,104 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     className
   );
 
-  const dropdownRef = useRef(null);
-
-  //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("");
-  //this is essentially the return that the user will get when they use the kit
-  const [returnedArray, setReturnedArray] = useState([]);
-  //formattedData with checked and parent_id added
   const [formattedData, setFormattedData] = useState(treeData);
-  //toggle chevron in dropdown
-  //@ts-ignore
-  const [isToggled, setIsToggled] = useState<{ [id: number]: boolean }>({}); 
-  //state for return for default
-  const [defaultReturn, setDefaultReturn] = useState([]);
-
-  useEffect(() => {
-    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));
-    // Function to handle clicks outside the dropdown
-    const handleClickOutside = (event: any) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-        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);
-    // Clean up the event listener on unmount
-    return () => {
-      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,
-  ) => {
-    if (!Array.isArray(treeData)) {
-      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,
-        );
-      }
-      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();
-    //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 updatedFiltered = returnedArray
-            .filter((item) => item !== clickedItem)
-            .filter((item) => !childrenOfChecked.includes(item.id));
-          setReturnedArray(updatedFiltered);
+  const [selectedItems, setSelectedItems] = useState([]);
+  const [checkedData, setCheckedData] = useState([]);
+
+  const onChange = (currentNode: { [key: string]: any }) => {
+    const updatedData = formattedData.map((item: any) => {
+      if (item.id === currentNode._id) {
+        if (currentNode.checked) {
+          checkIt(item, selectedItems, setSelectedItems, false);
         } else {
-          const updatedFiltered = returnedArray.filter(
-            (item) => item !== clickedItem
-          );
-          setReturnedArray(updatedFiltered);
+          unCheckIt(item, selectedItems, setSelectedItems, false);
         }
-      }
-    } else {
-      if (defaultReturn.includes(clickedItem)) {
-        getAncestorsOfUnchecked(formattedData, clickedItem);
-        const newChecked = getCheckedItems(formattedData);
-        const filteredReturn = updateReturnItems(newChecked).filter(
-          (item) => item.id !== clickedItem.id
-        );
-        setDefaultReturn(filteredReturn);
-      }
-    }
-    if (clickedItem.children && clickedItem.children.length > 0) {
-      unCheckedRecursive(clickedItem);
-    }
-    //logic to uncheck clickedItem in formattedData
-    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();
-    if (
-      e.target.id === "multiselect_input" ||
-      e.target.classList.contains("pb_form_pill_tag")
-    ) {
-      return;
-    }
-    setIsClosed(!isClosed);
-  };
-
-  //Main function to handle any click inside dropdown
-  const handledropdownItemClick = (e: any) => {
-    const clickedItem = e.target.parentNode.id;
-    //setting filterItem to "" will clear textinput and clear typeahead
-    setFilterItem("");
-
-    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);
-        });
-      } else if (!filtered[0].checked) {
-        filtered[0].children.forEach((item: { [key: string]: any }) => {
-          unCheckedRecursive(item);
-        });
-      }
-    }
-
-    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 updatedFiltered = returnedArray
-            .filter((item) => item !== filtered[0])
-            .filter((item) => !childrenOfChecked.includes(item.id));
-
-          setReturnedArray(updatedFiltered);
-        } else {
-          const updatedFiltered = returnedArray.filter(
-            (item) => item !== filtered[0]
-          );
-          setReturnedArray(updatedFiltered);
+      } else if (item.children) {
+        const foundItem = findItemById(item.children, currentNode._id);
+        if (foundItem) {
+          if (currentNode.checked) {
+            checkIt(foundItem, selectedItems, setSelectedItems, false);
+            if (currentNode._parent) {
+              const parents = getParentAndAncestorsIds(currentNode._parent, formattedData)
+              parents.forEach((item:string) => {
+               const ancestor = findItemById(formattedData,item)
+               ancestor.expanded = true
+              });
+             }
+          } else {
+            unCheckIt(foundItem, selectedItems, setSelectedItems, false);
+            if (currentNode._parent) {
+             const parents = getParentAndAncestorsIds(currentNode._parent, formattedData)
+             parents.forEach((item:string) => {
+              const ancestor = findItemById(formattedData,item)
+              ancestor.expanded = true
+             });
+            }
+          }
         }
       }
-    } else {
-      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]);
-
-      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);
-    }
 
-    //when item is checked for default variant
-    if (!returnAllSelected && filtered[0].checked) {
-      //if checked item has children
-      if (filtered[0].children && filtered[0].children.length > 0) {
-        removeChildrenIfParentChecked(
-          filtered[0],
-          defaultReturn,
-          setDefaultReturn
-        );
-      }
+      return item;
+    });
 
-      //if clicked item has parent_id, find parent and check if all children checked or not
-      if (filtered[0].parent_id !== null) {
-        recursiveReturnOnlyParent(
-          filtered[0],
-          formattedData,
-          defaultReturn,
-          setDefaultReturn
-        );
-      } else {
-        setDefaultReturn([filtered[0]]);
-      }
-    }
+    setFormattedData(updatedData);
   };
 
-  //handle click on chevron toggles in dropdown
-  const handleToggleClick = (id: string, event: React.MouseEvent) => {
-    event.stopPropagation();
-    setIsToggled((prevState: { [id: string]: boolean }) => ({
-      ...prevState,
-      [id]: !prevState[id],
-    }));
-    const clickedItem = filterFormattedDataById(formattedData, id);
+  useEffect(() => {
+    if (returnAllSelected) {
+      const selected = selectedItems.filter(
+        (item: { [key: string]: any }) => item.checked
+      );
+      //filter to remove duplicate items
+      const uniqueSelected = selected.filter(
+        (obj, index, self) => index === self.findIndex((t) => t.id === obj.id)
+      );
+      setCheckedData(uniqueSelected);
+    }
+  }, [selectedItems]);
 
-    if (clickedItem) {
-      clickedItem[0].expanded = !clickedItem[0].expanded;
+  useEffect(() => {
+    let el = document.getElementById(`pb_data_wrapper_${id}`);
+    if (el) {
+      el.setAttribute("data-tree", JSON.stringify(checkedData));
     }
-  };
+    if (returnAllSelected) {
+      onSelect(checkedData);
+    }
+  }, [checkedData]);
 
-  //rendering formattedData to UI based on typeahead
-  const renderNestedOptions = (items: { [key: string]: any }[]) => {
+  const DropDownSelectComponent = useMemo(() => {
     return (
-      <ul>
-        {Array.isArray(items) &&
-          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"
-                      }
-                    >
-                      <CircleIconButton
-                        icon={
-                          item.expanded ? "chevron-down" : "chevron-right"
-                        }
-                        className={item.children && item.children.length > 0 ? "" : "toggle_icon"}
-                        onClick={(event) => handleToggleClick(item.id, event)}
-                        variant="link"
-                      />
-                    </div>
-                    <Checkbox text={item.label} id={item.id}>
-                      <input
-                        checked={item.checked}
-                        type="checkbox"
-                        name={item.label}
-                        value={item.label}
-                        onChange={(e) => {
-                          item.checked = !item.checked;
-                          handledropdownItemClick(e);
-                        }}
-                      />
-                    </Checkbox>
-                  </div>
-                  {item.expanded &&
-                    item.children &&
-                    item.children.length > 0 &&
-                    !filterItem && ( // Show children if expanded is true
-                      <div>{renderNestedOptions(item.children)}</div>
-                    )}
-                </li>
-              </>
-            );
-          })}
-      </ul>
+      <MultiSelectHelper
+        treeData={formattedData}
+        onChange={(
+          // @ts-ignore
+          selectedNodes: { [key: string]: any }[],
+          currentNode: { [key: string]: any }[]
+        ) => {
+          setCheckedData(currentNode);
+          onSelect(currentNode);
+
+        }}
+        id={id}
+        {...props}
+      />
     );
-  };
+  }, [formattedData])
 
   return (
     <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, index) => (
-                  <FormPill
-                    key={index}
-                    text={item.label}
-                    size="small"
-                    onClick={(event) => handlePillClose(event, item)}
-                  />
-                ))
-              : null}
-            {!returnAllSelected &&
-              defaultReturn.length !== 0 &&
-              defaultReturn
-                .filter(
-                  (item, index, self) =>
-                    index === self.findIndex((obj) => obj.id === item.id)
-                )
-                .map((item, index) => (
-                  <FormPill
-                    key={index}
-                    text={item.label}
-                    size="small"
-                    onClick={(event) => handlePillClose(event, item)}
-                  />
-                ))}
-            {returnedArray.length !== 0 && returnAllSelected && <br />}
-            {defaultReturn.length !== 0 && !returnAllSelected && <br />}
-            <input
-              id="multiselect_input"
-              onChange={(e) => {
-                setFilterItem(e.target.value);
-              }}
-              placeholder="Start typing..."
-              value={filterItem}
-              onClick={() => setIsClosed(false)}
-            />
-          </div>
-          {isClosed ? (
-            <div key="chevron-down">
-              <Icon icon="chevron-down" />
-            </div>
-          ) : (
-            <div key="chevron-up">
-              <Icon icon="chevron-up" />
-            </div>
-          )}
-        </div>
-        <div className={`dropdown_menu ${isClosed ? "close" : "open"}`}>
-          {renderNestedOptions(
-            filterItem ? findByFilter(formattedData, filterItem) : formattedData
-          )}
-        </div>
-      </div>
+      {returnAllSelected ? (
+        <MultiSelectHelper
+          treeData={formattedData}
+          treeMode={returnAllSelected}
+          id={id}
+          onChange={onChange}
+          {...props}
+        />
+      ) : (
+        <>{DropDownSelectComponent}</>
+      )}
     </div>
   );
 };

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

@@ -0,0 +1,31 @@
+import React from "react"
+import DropdownTreeSelect from "react-dropdown-tree-select"
+import "react-dropdown-tree-select/dist/styles.css"
+
+type HelperProps = {
+  id?: string
+  treeData?: { [key: string]: string }[]
+  treeMode?: boolean
+  onChange?:  any
+
+}
+
+const MultiSelectHelper = (props: HelperProps) => {
+  const { id, treeData, onChange, treeMode } = props
+
+
+  return (
+      <DropdownTreeSelect
+        data={treeData}
+        id={id}
+        keepOpenOnSelect
+        keepTreeOnSearch
+        keepChildrenOnSearch
+        onChange={onChange}
+        texts={{ placeholder: "Select..." }}
+        mode={treeMode ? 'hierarchical' : 'multiSelect'}
+      />
+  )
+}
+
+export default MultiSelectHelper

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!
 
-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.
+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

@@ -3,7 +3,6 @@
     value: "Power Home Remodeling",
     id: "powerhome1",
     expanded: true,
-
     children: [
       {
         label: "People",

data/app/pb_kits/playbook/pb_multi_level_select/helper_functions.ts

@@ -0,0 +1,87 @@
+export const findItemById = (
+  items: { [key: string]: any }[],
+  id: string
+): any => {
+  for (const item of items) {
+    if (item.id === id) {
+      return item;
+    }
+    if (item.children) {
+      const found = findItemById(item.children, id);
+      if (found) {
+        return found;
+      }
+    }
+  }
+  return null;
+};
+
+export const checkIt = (
+  foundItem: { [key: string]: any },
+  selectedItems: any[],
+  setSelectedItems: Function,
+  expand: boolean
+) => {
+  if (!foundItem) {
+    return;
+  }
+
+  foundItem.checked = true;
+  foundItem.expanded = expand;
+  selectedItems.push(foundItem);
+
+  if (foundItem.children) {
+    foundItem.children.map((x: any) => {
+      checkIt(x, selectedItems, setSelectedItems, expand);
+    });
+  }
+
+  setSelectedItems([...selectedItems]);
+};
+
+export const unCheckIt = (
+  foundItem: { [key: string]: any },
+  selectedItems: any,
+  setSelectedItems: any,
+  expand: boolean
+) => {
+  if (!foundItem) {
+    return;
+  }
+
+  foundItem.checked = false;
+  foundItem.expanded = false;
+  const newSelectedItems = selectedItems.filter(
+    (item: any) => item.id !== foundItem.id
+  );
+  if (foundItem.children) {
+    foundItem.children.map((x: any) => {
+      unCheckIt(x, selectedItems, setSelectedItems, expand);
+    });
+  }
+  setSelectedItems([...newSelectedItems]);
+};
+
+
+export const getParentAndAncestorsIds = (itemId:string, items:{ [key: string]: string; }[], ancestors:string[] = []):any => {
+  for (let i = 0; i < items.length; i++) {
+    const item:any = items[i];
+    if (item.id === itemId) {
+      // item found in current level of items array
+      return [...ancestors, item.id];
+    }
+    if (item.children && item.children.length > 0) {
+      // recursively search through children
+      const foundAncestors = getParentAndAncestorsIds(
+        itemId,
+        item.children,
+        [...ancestors, item.id]
+      );
+      if (foundAncestors) {
+        return foundAncestors;
+      }
+    }
+  }
+  // item not found in this level of items array or its children
+  return null;
+}

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.test.jsx

@@ -16,7 +16,7 @@ const treeData = {
         {
           label: 'No one can get me',
           value: 'anonymous',
-          id:'default3',
+          id:'default2',
         },
       ],
     },

data/app/pb_kits/playbook/pb_title/_title.scss

@@ -30,7 +30,7 @@
     @include pb_title_dark;
   }
 
-  &[class*=thin] {
+  &[class*=_thin] {
     @include pb_title_thin;
   }
 }

data/app/pb_kits/playbook/pb_title/_title.tsx

@@ -27,7 +27,7 @@ const Title = (props: TitleProps): React.ReactElement => {
     data = {},
     id,
     size = 3,
-    bold = size === 3 ? false : true,
+    bold = true,
     tag = 'h3',
     text,
     variant = null,
@@ -35,10 +35,9 @@ const Title = (props: TitleProps): React.ReactElement => {
 
   const ariaProps: {[key: string]: string | number} = buildAriaProps(aria)
   const dataProps: {[key: string]: string | number} = buildDataProps(data)
-
   const getBold = bold ? '' : 'thin'
   const classes = classnames(
-    buildCss("pb_title_kit", `size_${size}`, variant, color) + ` ${getBold}`,
+    buildCss('pb_title_kit', `size_${size}`, variant, color, getBold),
     globalProps(props),
     className
   )

data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.html.erb

@@ -1,2 +1,3 @@
 <%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1, bold: false }) %>
 <%= pb_rails("title", props: { text: "Title 2", tag: "h2", size: 2, bold: false }) %>
+<%= pb_rails("title", props: { text: "Title 3", tag: "h3", size: 3, bold: false }) %>

data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.jsx

@@ -17,6 +17,12 @@ const TitleLightWeight = (props) => {
           text='Title 2'
           {...props}
       />
+      <Title bold={false}
+          size={3}
+          tag='h2'
+          text='Title 3'
+          {...props}
+      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.md

@@ -1,4 +1,3 @@
 ##### Prop
-Title `size 1` & `size 2` will use `font-weight: 700` by default, if you want a lighter font weight, use the `bold` prop set to `false`.
-Title `size 3` uses a light font weight by default and will not accept a bold font weight.
+Title `size 1`, `size 2`, & `size 3` will use `font-weight: 700` by default, if you want a lighter font weight, use the `bold` prop set to `false`.
 Title `size 4` uses a heavy font weight by default and will not accept a lighter font weight.