playbook_ui 12.25.0.pre.alpha.play822bolddefaultfortitle3764 → 12.25.0.pre.alpha.railsmultilevelimprovements776

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

@@ -1,19 +1,35 @@
-import React, { useState, useEffect, useMemo } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import classnames from "classnames";
 import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
-import { globalProps } from "../utilities/globalProps";
-import { findItemById, checkIt, unCheckIt, getParentAndAncestorsIds } from "./helper_functions";
-import MultiSelectHelper from "./_multi_select_helper";
+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";
 
 type MultiLevelSelectProps = {
   aria?: { [key: string]: string };
   className?: string;
   data?: { [key: string]: string };
   id?: string;
+  name?: string;
   returnAllSelected?: boolean;
   treeData?: { [key: string]: string }[];
   onSelect?: (prop: { [key: string]: any }) => void;
-};
+} & GlobalProps;
 
 const MultiLevelSelect = (props: MultiLevelSelectProps) => {
   const {
@@ -21,6 +37,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     className,
     data = {},
     id,
+    name,
     returnAllSelected = false,
     treeData,
     onSelect = () => {},
@@ -34,104 +51,355 @@ 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);
-  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 {
-          unCheckIt(item, selectedItems, setSelectedItems, false);
-        }
-      } 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
-             });
-            }
-          }
-        }
-      }
+  //toggle chevron in dropdown
+  //@ts-ignore
+  const [isToggled, setIsToggled] = useState<{ [id: number]: boolean }>({}); 
+  //state for return for default
+  const [defaultReturn, setDefaultReturn] = useState([]);
 
-      return item;
-    });
+  useEffect(() => {
+    let el = document.getElementById(`pb_data_wrapper_${id}`);
+    if (el) {
+      el.setAttribute(
+        "data-tree",
+        JSON.stringify(returnAllSelected ? returnedArray : defaultReturn)
+      );
+    }
+    updateHiddenInputValue(returnAllSelected ? returnedArray : defaultReturn);
+    returnAllSelected
+      ? onSelect(returnedArray)
+      : onSelect(
+          defaultReturn.filter(
+            (item, index, self) =>
+              index === self.findIndex((obj) => obj.id === item.id)
+          )
+        );
+  }, [returnedArray, defaultReturn]);
 
-    setFormattedData(updatedData);
+
+
+  const updateHiddenInputValue = (value: any) => {
+    const hiddenInput = document.querySelector('input#'+id)  as HTMLInputElement;
+    if (hiddenInput) {
+      hiddenInput.value = JSON.stringify(value);
+    }
   };
 
   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) {
-      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);
+      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);
+        } else {
+          const updatedFiltered = returnedArray.filter(
+            (item) => item !== clickedItem
+          );
+          setReturnedArray(updatedFiltered);
+        }
+      }
+    } 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);
     }
-  }, [selectedItems]);
+    //logic to uncheck clickedItem in formattedData
+    unCheckIt(formattedData, clickedItem.id);
+  };
 
-  useEffect(() => {
-    let el = document.getElementById(`pb_data_wrapper_${id}`);
-    if (el) {
-      el.setAttribute("data-tree", JSON.stringify(checkedData));
+  //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;
     }
-    if (returnAllSelected) {
-      onSelect(checkedData);
+    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 {
+      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);
     }
-  }, [checkedData]);
 
-  const DropDownSelectComponent = useMemo(() => {
+    //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
+        );
+      }
+
+      //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]]);
+      }
+    }
+  };
+
+  //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);
+
+    if (clickedItem) {
+      clickedItem[0].expanded = !clickedItem[0].expanded;
+    }
+  };
+
+  //rendering formattedData to UI based on typeahead
+  const renderNestedOptions = (items: { [key: string]: any }[]) => {
     return (
-      <MultiSelectHelper
-        treeData={formattedData}
-        onChange={(
-          // @ts-ignore
-          selectedNodes: { [key: string]: any }[],
-          currentNode: { [key: string]: any }[]
-        ) => {
-          setCheckedData(currentNode);
-          onSelect(currentNode);
-
-        }}
-        id={id}
-        {...props}
-      />
+      <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>
     );
-  }, [formattedData])
+  };
 
   return (
     <div {...ariaProps} {...dataProps} className={classes} id={id}>
-      {returnAllSelected ? (
-        <MultiSelectHelper
-          treeData={formattedData}
-          treeMode={returnAllSelected}
-          id={id}
-          onChange={onChange}
-          {...props}
-        />
-      ) : (
-        <>{DropDownSelectComponent}</>
-      )}
+      <div ref={dropdownRef} className="wrapper">
+        <div className="input_wrapper" onClick={handleInputWrapperClick}>
+          <div className="input_inner_container">
+          <input type="hidden" id={id} name={name} value=""  />
+            {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>
     </div>
   );
 };

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,6 +3,7 @@
     value: "Power Home Remodeling",
     id: "powerhome1",
     expanded: true,
+
     children: [
       {
         label: "People",

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

@@ -0,0 +1,72 @@
+<%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
+
+  <% treeData = [{
+  label: "Power Home Remodeling",
+  value: "Power Home Remodeling",
+  id: "powerhome1",
+  expanded: true,
+  children: [
+    {
+      label: "People",
+      value: "People",
+      id: "people1",
+      children: [
+        {
+          label: "Talent Acquisition",
+          value: "Talent Acquisition",
+          id: "talent1",
+        },
+        {
+          label: "Business Affairs",
+          value: "Business Affairs",
+          id: "business1",
+          children: [
+            {
+              label: "Initiatives",
+              value: "Initiatives",
+              id: "initiative1",
+            },
+            {
+              label: "Learning & Development",
+              value: "Learning & Development",
+              id: "development1",
+            },
+          ],
+        },
+        {
+          label: "People Experience",
+          value: "People Experience",
+          id: "experience1",
+        },
+      ],
+    },
+    {
+      label: "Contact Center",
+      value: "Contact Center",
+      id: "contact1",
+      children: [
+        {
+          label: "Appointment Management",
+          value: "Appointment Management",
+          id: "appointment1",
+        },
+        {
+          label: "Customer Service",
+          value: "Customer Service",
+          id: "customer1",
+        },
+        {
+          label: "Energy",
+          value: "Energy",
+          id: "energy1",
+        },
+      ],
+    },
+  ],
+}] %>
+
+  <%= form.multi_level_select :example, props: {id: "with-form-multi-level-select", tree_data: treeData, return_all_selected: true } %>
+  <%= form.actions do |action| %>
+    <%= action.button props: { type: "submit", text: "Submit", variant: "primary", margin_top: "lg" } %>
+  <% end %>   
+<% end %>

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

@@ -2,6 +2,7 @@ examples:
   rails:
   - multi_level_select_default: Default
   - multi_level_select_return_all_selected: Return All Selected
+  - multi_level_select_with_form: With Form
   
   react:
   - multi_level_select_default: Default

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

@@ -3,6 +3,8 @@
 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,
@@ -15,6 +17,7 @@ module Playbook
       def multi_level_select_options
         {
           id: id,
+          name: name,
           treeData: tree_data,
           returnAllSelected: return_all_selected,
         }

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:'default2',
+          id:'default3',
         },
       ],
     },

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 = true,
+    bold = size === 3 ? false : true,
     tag = 'h3',
     text,
     variant = null,
@@ -35,9 +35,10 @@ 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,3 +1,2 @@
 <%= 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,12 +17,6 @@ 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,3 +1,4 @@
 ##### Prop
-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 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 4` uses a heavy font weight by default and will not accept a lighter font weight.