playbook_ui 14.15.0 → 14.16.0.pre.alpha.PBNTR924reacttablecustomheaders6846

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useRef, forwardRef } from "react";
 import classnames from "classnames";
 import { globalProps, GlobalProps } from "../utilities/globalProps";
 import {
@@ -9,6 +9,8 @@ import {
 } from "../utilities/props";
 import Icon from "../pb_icon/_icon";
 import FormPill from "../pb_form_pill/_form_pill";
+import Body from "../pb_body/_body";
+import Caption from "../pb_caption/_caption";
 import { cloneDeep } from "lodash";
 import MultiLevelSelectOptions from "./multi_level_select_options";
 import MultiLevelSelectContext from "./context";
@@ -23,18 +25,29 @@ import {
   getExpandedItems,
 } from "./_helper_functions";
 
+interface MultiLevelSelectComponent
+  extends React.ForwardRefExoticComponent<
+    MultiLevelSelectProps & React.RefAttributes<HTMLInputElement>
+  > {
+  Options: typeof MultiLevelSelectOptions;
+}
+
 type MultiLevelSelectProps = {
   aria?: { [key: string]: string }
   className?: string
   data?: { [key: string]: string }
   disabled?: boolean
+  error?: string
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string
   inputDisplay?: "pills" | "none"
   inputName?: string
+  label?: string
   name?: string
+  required?: boolean
   returnAllSelected?: boolean
   treeData?: { [key: string]: string; }[] | any
+  onChange?: (event: { target: { name?: string; value: any } }) => void
   onSelect?: (prop: { [key: string]: any }) => void
   selectedIds?: string[] | any
   variant?: "multi" | "single"
@@ -42,19 +55,23 @@ type MultiLevelSelectProps = {
   pillColor?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
 } & GlobalProps
 
-const MultiLevelSelect = (props: MultiLevelSelectProps) => {
+const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((props) => {
   const {
     aria = {},
     className,
     data = {},
     disabled = false,
+    error,
     htmlOptions = {},
     id,
     inputDisplay = "pills",
     inputName,
     name,
+    label,
+    required = false,
     returnAllSelected = false,
     treeData,
+    onChange = () => null,
     onSelect = () => null,
     selectedIds,
     variant = "multi",
@@ -68,6 +85,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
   const htmlProps = buildHtmlProps(htmlOptions);
   const classes = classnames(
     buildCss("pb_multi_level_select"),
+    error && "error",
     globalProps(props),
     className
   );
@@ -104,7 +122,9 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
       return;
     }
     return tree.map((item: { [key: string]: any }) => {
-      item.checked = check;
+      if (!item.disabled) {
+        item.checked = check;
+      }
       item.children = modifyRecursive(item.children, check);
       return item;
     });
@@ -115,12 +135,16 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     treeData: { [key: string]: any }[],
     selectedIds: string[],
     parent_id: string | null = null,
-    depth = 0
+    depth = 0,
+    parentDisabled = false
   ) => {
     if (!Array.isArray(treeData)) {
       return;
     }
     return treeData.map((item: { [key: string]: any } | any) => {
+      // An item is disabled if it is explicitly set as disabled or if its parent is disabled
+      const isDisabled = item.disabled || (parentDisabled && !returnAllSelected);
+
       const newItem = {
         ...item,
         checked: Boolean(
@@ -128,6 +152,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
         ),
         parent_id,
         depth,
+        disabled: isDisabled,
       };
       if (newItem.children && newItem.children.length > 0) {
         const children =
@@ -138,7 +163,8 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
           children,
           selectedIds,
           newItem.id,
-          depth + 1
+          depth + 1,
+          isDisabled
         );
       }
       return newItem;
@@ -235,8 +261,9 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     return tree.map((item: any) => {
       if (item.id != id) item.children = modifyValue(id, item.children, check);
       else {
-        item.checked = check;
-
+        if (!item.disabled) {
+          item.checked = check;
+        }
         if (variant === "single") {
           // Single select: no children should be checked
           item.children = modifyRecursive(item.children, !check);
@@ -287,8 +314,10 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     // Logic for removing items from returnArray or defaultReturn when pills clicked
     if (returnAllSelected) {
       onSelect(getCheckedItems(updatedTree));
+      onChange({ target: { name, value: getCheckedItems(updatedTree) } });
     } else {
       onSelect(getDefaultCheckedItems(updatedTree));
+      onChange({ target: { name, value: getDefaultCheckedItems(updatedTree) } });
     }
   };
 
@@ -314,8 +343,10 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     const updatedTree = changeItem(filtered[0], check);
     if (returnAllSelected) {
       onSelect(getCheckedItems(updatedTree));
+      onChange({ target: { name, value: getCheckedItems(updatedTree) } });
     } else {
       onSelect(getDefaultCheckedItems(updatedTree));
+      onChange({ target: { name, value: getDefaultCheckedItems(updatedTree) } });
     }
   };
 
@@ -348,6 +379,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     setIsDropdownClosed(true);
 
     onSelect(selectedItem);
+    onChange({ target: { name, value: selectedItem } });
   };
 
   // Single select: reset the tree state upon typing
@@ -389,12 +421,12 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
   // Rendering formattedData to UI based on typeahead
   const renderNestedOptions = (items: { [key: string]: string; }[] | any ) => {
     const hasOptionsChild = React.Children.toArray(props.children).some(
-      (child: any) => child.type === MultiLevelSelect.Options
+      (child) => React.isValidElement(child) && child.type === MultiLevelSelect.Options
     );
 
     if (hasOptionsChild) {
       return React.Children.map(props.children, (child) => {
-        if (child.type === MultiLevelSelect.Options) {
+        if (React.isValidElement(child) && child.type === MultiLevelSelect.Options) {
           return React.cloneElement(child, { items });
         }
         return null;
@@ -416,6 +448,12 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
         className={classes}
         id={id}
     >
+      {label &&
+        <Caption
+            marginBottom="xs"
+            text={label}
+        />
+      }
       <MultiLevelSelectContext.Provider value={{
           variant,
           inputName,
@@ -439,6 +477,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                       disabled={disabled}
                       key={selectedItem.id}
                       name={`${name}[]`}
+                      required={required}
                       type="hidden"
                       value={selectedItem.id}
                   />
@@ -453,6 +492,20 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                           disabled={disabled}
                           key={item.id}
                           name={`${name}[]`}
+                          required={required}
+                          type="hidden"
+                          value={item.id}
+                      />
+                    ))
+                  : null}
+
+                {!returnAllSelected
+                  ? defaultReturn.map((item) => (
+                      <input
+                          disabled={disabled}
+                          key={item.id} 
+                          name={`${name}[]`}
+                          required={required}
                           type="hidden"
                           value={item.id}
                       />
@@ -513,6 +566,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                       } selected`
                     : "Start typing..."
                 }
+                required={required}
                 value={singleSelectedItem.value || filterItem}
             />
           </div>
@@ -545,10 +599,18 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
         </div>
       </div>
       </MultiLevelSelectContext.Provider>
+      {error &&
+          <Body
+              dark={props.dark}
+              status="negative"
+              text={error}
+          />
+        }
     </div>
   );
-};
+}) as MultiLevelSelectComponent;
 
+MultiLevelSelect.displayName = "MultiLevelSelect";
 MultiLevelSelect.Options = MultiLevelSelectOptions;
 
 export default MultiLevelSelect;

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

@@ -66,7 +66,7 @@
 
 <%= pb_rails("multi_level_select", props: {
     disabled: true,
-    id: "multi-level-select-default-rails",
+    id: "multi-level-select-disabled-rails",
     name: "my_array",
     tree_data: treeData
 }) %>

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

@@ -0,0 +1,76 @@
+<% treeData = [{
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "powerhome1",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "people1",
+        expanded: true,
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "talent1",
+            disabled: true,
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "business1",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "initiative1",
+                disabled: true,
+              },
+              {
+                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",
+            disabled: true,
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "energy1",
+          },
+        ],
+      },
+    ],
+}] %>
+
+
+<%= pb_rails("multi_level_select", props: {
+    id: "multi-level-select-disabled-options-rails",
+    name: "disabled_options",
+    return_all_selected: true,
+    tree_data: treeData
+}) %>

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

@@ -0,0 +1,94 @@
+import React from "react";
+import MultiLevelSelect from "../_multi_level_select";
+
+const treeData = [
+  {
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "powerhome1",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "people1",
+        expanded: true,
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "talent1",
+            disabled: true,
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "business1",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "initiative1",
+                disabled: true,
+              },
+              {
+                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",
+            disabled: true,
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "energy1",
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const MultiLevelSelectDisabledOptions = (props) => {
+  return (
+    <div>
+      <MultiLevelSelect
+          id='multiselect-disabled-options'
+          onSelect={(selectedNodes) =>
+          console.log(
+            "Selected Items",
+            selectedNodes
+          )
+        }
+          returnAllSelected
+          treeData={treeData}
+          {...props}
+      />
+    </div>
+  )
+};
+
+export default MultiLevelSelectDisabledOptions;

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

@@ -0,0 +1 @@
+individual items can also be disabled by including the `disabled:true` within the object on the treeData for the `returnAllSelected`/`return_all_selected` variant. As noted above, this variant will return data on all checked nodes from the dropdown, irrespective of whether it is a parent or child node.

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

@@ -0,0 +1,75 @@
+<% treeData = [{
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "powerhome1",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "people1",
+        expanded: true,
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "talent1",
+            disabled: true,
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "business1",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "initiative1",
+                disabled: true,
+              },
+              {
+                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",
+            disabled: true,
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "energy1",
+          },
+        ],
+      },
+    ],
+}] %>
+
+
+<%= pb_rails("multi_level_select", props: {
+    id: "multi-level-select-disabled-options-default-rails",
+    name: "disabled_options_default",
+    tree_data: treeData
+}) %>

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

@@ -0,0 +1,93 @@
+import React from "react";
+import MultiLevelSelect from "../_multi_level_select";
+
+const treeData = [
+  {
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "powerhome1",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "people1",
+        expanded: true,
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "talent1",
+            disabled: true,
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "business1",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "initiative1",
+                disabled: true,
+              },
+              {
+                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",
+            disabled: true,
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "energy1",
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const MultiLevelSelectDisabledOptionsDefault = (props) => {
+  return (
+    <div>
+      <MultiLevelSelect
+          id='multiselect-disabled-options-default'
+          onSelect={(selectedNodes) =>
+          console.log(
+            "Selected Items",
+            selectedNodes
+          )
+        }
+          treeData={treeData}
+          {...props}
+      />
+    </div>
+  )
+};
+
+export default MultiLevelSelectDisabledOptionsDefault;

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

@@ -0,0 +1,3 @@
+To disable individual items in the treeData, include `disabled:true` within the object on the treeData that you want disabled. See the code snippet below for an example of how to do this.
+
+If a parent is selected, the parent will be returned in the selected items list, even if it has disabled children.

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

@@ -0,0 +1,75 @@
+<% treeData = [{
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "powerhome1",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "people1",
+        expanded: true,
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "talent1",
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "business1",
+            expanded: true,
+            disabled: true,
+            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",
+          },
+        ],
+      },
+    ],
+}] %>
+
+
+<%= pb_rails("multi_level_select", props: {
+    id: "mls-disabled-options-parent-rails",
+    name: "disabled_options_parent",
+    return_all_selected: true,
+    tree_data: treeData
+}) %>