playbook_ui 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

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

@@ -1,4 +1,12 @@
-import React, { useState, useEffect, useRef, forwardRef } from "react";
+import React, {
+  useState,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  forwardRef,
+  useContext,
+} from "react";
+import { createPortal } from "react-dom";
 import classnames from "classnames";
 import { globalProps, GlobalProps } from "../utilities/globalProps";
 import {
@@ -26,6 +34,15 @@ import {
   getExpandedItems,
 } from "./_helper_functions";
 
+import { DialogContext } from "../pb_dialog/_dialog_context";
+import {
+  positionFloatingShellToInput,
+  resolveFloatingOwnerId,
+  resolvePortaledKitHost,
+  setFloatingOwnerAttribute,
+  subscribeFloatingKitReposition,
+} from "../utilities/floatingPortalHosts";
+
 interface MultiLevelSelectComponent extends React.ForwardRefExoticComponent<
   MultiLevelSelectProps & React.RefAttributes<HTMLInputElement>
 > {
@@ -118,7 +135,19 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>(
       className
     );
 
+    /** Re-scope SCSS for `.dropdown_menu` / `.close` when the menu is portaled outside the kit root. */
+    const floatingShellClasses = classnames(
+      buildCss("pb_multi_level_select"),
+      globalProps(props),
+      "pb_multi_level_select_floating_shell",
+    );
+
     const dropdownRef = useRef(null);
+    const kitRootRef = useRef<HTMLDivElement>(null);
+    const mlsFloatingShellRef = useRef<HTMLDivElement>(null);
+    const dialogCtx = useContext(DialogContext);
+    const [portalHost, setPortalHost] = useState<HTMLElement | null>(null);
+    const [floatingOwnerId, setFloatingOwnerId] = useState<string | null>(null);
 
     // State for whether dropdown is open or closed
     const [isDropdownClosed, setIsDropdownClosed] = useState(true);
@@ -270,6 +299,63 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>(
       }
     }, [formattedData]);
 
+    useLayoutEffect(() => {
+      if (isDropdownClosed) {
+        setPortalHost(null);
+        setFloatingOwnerId(null);
+        return;
+      }
+      const root = kitRootRef.current;
+      setFloatingOwnerId(resolveFloatingOwnerId(root));
+      setPortalHost(
+        resolvePortaledKitHost(
+          root,
+          dialogCtx?.selectMenuPortalTarget ?? null,
+        ),
+      );
+    }, [isDropdownClosed, dialogCtx?.selectMenuPortalTarget]);
+
+    useLayoutEffect(() => {
+      if (
+        isDropdownClosed ||
+        !portalHost ||
+        !mlsFloatingShellRef.current ||
+        !dropdownRef.current
+      ) {
+        return;
+      }
+      const shell = mlsFloatingShellRef.current;
+      const inputEl = dropdownRef.current as HTMLElement;
+
+      const reposition = () => {
+        if (!shell || !inputEl) return;
+        const menuEl = shell.querySelector(".dropdown_menu") as HTMLElement | null;
+        if (!menuEl) return;
+        const rect = inputEl.getBoundingClientRect();
+        const maxH = Math.max(120, window.innerHeight - rect.bottom - 8);
+        positionFloatingShellToInput({
+          shell,
+          inputViewportRect: rect,
+          menuEl,
+          maxMenuHeightPx: maxH,
+          positionHost: portalHost,
+        });
+      };
+
+      reposition();
+      const raf = window.requestAnimationFrame(reposition);
+      const unsubscribeReposition = subscribeFloatingKitReposition(reposition);
+      return () => {
+        window.cancelAnimationFrame(raf);
+        unsubscribeReposition();
+      };
+    }, [
+      isDropdownClosed,
+      portalHost,
+      formattedData,
+      filterItem,
+    ]);
+
     useEffect(() => {
       // Function to handle clicks outside the dropdown
       const handleClickOutside = (event: any) => {
@@ -277,9 +363,13 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>(
         const labelEl = document.querySelector(`label[for="${labelForId}"]`);
         if (labelEl?.contains(event.target)) return;
 
+        const inPortaledMenu =
+          mlsFloatingShellRef.current?.contains(event.target as Node) ?? false;
+
         if (
           dropdownRef.current &&
           !dropdownRef.current.contains(event.target) &&
+          !inPortaledMenu &&
           event.target.id !== arrowDownElementId &&
           event.target.id !== arrowUpElementId
         ) {
@@ -530,6 +620,7 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>(
 
     return (
       <div
+          ref={kitRootRef}
           {...ariaProps}
           {...dataProps}
           {...htmlProps}
@@ -690,7 +781,7 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>(
                 >
                   <Icon icon="chevron-down"
                       id={arrowDownElementId}
-                      size="xs"
+                      size="sm"
                   />
                 </div>
               ) : (
@@ -699,21 +790,45 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>(
                 >
                   <Icon icon="chevron-up"
                       id={arrowUpElementId}
-                      size="xs"
+                      size="sm"
                   />
                 </div>
               )}
             </div>
 
-            <div
-                className={`dropdown_menu ${isDropdownClosed ? "close" : "open"}`}
-            >
-              {renderNestedOptions(
-                filterItem
-                  ? findByFilter(formattedData, filterItem)
-                  : formattedData,
-              )}
-            </div>
+            {portalHost
+              ? createPortal(
+                  <div
+                      className={floatingShellClasses}
+                      ref={(node) => {
+                        mlsFloatingShellRef.current = node;
+                        setFloatingOwnerAttribute(node, floatingOwnerId);
+                      }}
+                      style={{ margin: 0 }}
+                  >
+                    <div
+                        className={`dropdown_menu ${isDropdownClosed ? "close" : "open"}`}
+                    >
+                      {renderNestedOptions(
+                        filterItem
+                          ? findByFilter(formattedData, filterItem)
+                          : formattedData,
+                      )}
+                    </div>
+                  </div>,
+                  portalHost,
+                )
+              : (
+                  <div
+                      className={`dropdown_menu ${isDropdownClosed ? "close" : "open"}`}
+                  >
+                    {renderNestedOptions(
+                      filterItem
+                        ? findByFilter(formattedData, filterItem)
+                        : formattedData,
+                    )}
+                  </div>
+                )}
           </div>
         </MultiLevelSelectContext.Provider>
         {error && (

data/app/pb_kits/playbook/pb_multi_level_select/docs/_playground.json

@@ -14,48 +14,23 @@
     "placeholder": "Start typing...",
     "variant": "multi",
     "wrapped": false,
-    "treeData": [
-      {
-        "label": "Company",
-        "value": "company",
-        "id": "mls_co",
-        "expanded": true,
-        "children": [
-          {
-            "label": "Engineering",
-            "value": "engineering",
-            "id": "mls_eng",
-            "children": [
-              {
-                "label": "Frontend",
-                "value": "frontend",
-                "id": "mls_fe"
-              },
-              {
-                "label": "Backend",
-                "value": "backend",
-                "id": "mls_be"
-              }
-            ]
-          },
-          {
-            "label": "Sales",
-            "value": "sales",
-            "id": "mls_sales"
-          }
-        ]
-      }
-    ]
+    "selectedIds": [
+      "talent1",
+      "initiative1"
+    ],
+    "onSelect": "(selectedNodes) => console.log('Selected Items', selectedNodes)",
+    "onChange": "(event) => console.log('Filter changed', event.target.value)"
   },
   "groups": [
     {
       "name": "Content",
       "props": [
+        "treeData",
         "label",
         "name",
         "placeholder",
-        "treeData",
-        "selectedIds"
+        "selectedIds",
+        "inputName"
       ]
     },
     {
@@ -76,87 +51,361 @@
       ]
     },
     {
-      "name": "Selection behavior",
+      "name": "Selection Behavior",
       "props": [
         "returnAllSelected",
-        "showCheckedChildren",
-        "inputName"
+        "showCheckedChildren"
       ]
     },
     {
       "name": "Events",
       "props": [
-        "onChange",
-        "onSelect"
+        "onSelect",
+        "onChange"
       ]
     }
   ],
   "presets": [
     {
-      "name": "Multi (default)",
+      "name": "Multi",
+      "structureMode": "standard",
       "props": {
         "variant": "multi",
         "label": "Departments",
-        "placeholder": "Search teams…",
-        "inputDisplay": "pills"
+        "placeholder": "Search teams...",
+        "inputDisplay": "pills",
+        "onSelect": "(selectedNodes) => console.log('Selected Items', selectedNodes)"
       }
     },
     {
-      "name": "Single select",
+      "name": "Single Select",
+      "structureMode": "standard",
       "props": {
         "variant": "single",
         "label": "Pick one team",
-        "placeholder": "Choose…",
-        "inputDisplay": "pills"
+        "placeholder": "Choose...",
+        "inputDisplay": "pills",
+        "selectedIds": [
+          "talent1"
+        ],
+        "onSelect": "(selectedNode) => console.log('Selected Node', selectedNode)"
+      }
+    },
+    {
+      "name": "Selected IDs",
+      "structureMode": "standard",
+      "props": {
+        "variant": "multi",
+        "label": "Preselected teams",
+        "selectedIds": [
+          "talent1",
+          "initiative1",
+          "customer1"
+        ],
+        "onSelect": "(selectedNodes) => console.log('Selected Items', selectedNodes)"
       }
     },
     {
-      "name": "Plain input (no pills)",
+      "name": "Input Display None",
+      "structureMode": "standard",
       "props": {
         "variant": "multi",
         "label": "Teams",
-        "inputDisplay": "none"
+        "inputDisplay": "none",
+        "placeholder": "Search without pills..."
       }
     },
     {
-      "name": "Disabled",
+      "name": "Return All Selected",
+      "structureMode": "standard",
       "props": {
         "variant": "multi",
-        "label": "Locked",
-        "disabled": true
+        "label": "Include ancestors",
+        "returnAllSelected": true,
+        "selectedIds": [
+          "people1"
+        ],
+        "onSelect": "(selectedNodes) => console.log('Selected Items with parent data', selectedNodes)"
       }
     },
     {
-      "name": "With error",
+      "name": "Hide Checked Children",
+      "structureMode": "standard",
       "props": {
         "variant": "multi",
-        "label": "Required field",
-        "error": "Choose at least one option."
+        "label": "Compact selected list",
+        "showCheckedChildren": false,
+        "selectedIds": [
+          "talent1",
+          "initiative1",
+          "customer1"
+        ]
       }
     },
     {
-      "name": "Return all selected",
+      "name": "With Option Children",
+      "structureMode": "with_children",
       "props": {
         "variant": "multi",
-        "label": "Include ancestors",
-        "returnAllSelected": true
+        "label": "Teams with status",
+        "selectedIds": [
+          "talent1"
+        ],
+        "onSelect": "(selectedNodes) => console.log('Selected Items', selectedNodes)"
       }
     },
     {
-      "name": "Hide checked in tree",
+      "name": "Disabled Options",
+      "structureMode": "standard",
       "props": {
         "variant": "multi",
-        "label": "Compact tree",
-        "showCheckedChildren": false
+        "label": "Departments with disabled options",
+        "returnAllSelected": true,
+        "onSelect": "(selectedNodes) => console.log('Selected Items', selectedNodes)",
+        "treeData": [
+          {
+            "label": "Power Home Remodeling",
+            "value": "powerHomeRemodeling",
+            "id": "powerhome1",
+            "expanded": true,
+            "children": [
+              {
+                "label": "People",
+                "value": "people",
+                "id": "people1",
+                "expanded": true,
+                "children": [
+                  {
+                    "label": "Talent Acquisition",
+                    "value": "talentAcquisition",
+                    "id": "talent1",
+                    "disabled": true
+                  },
+                  {
+                    "label": "Business Affairs",
+                    "value": "businessAffairs",
+                    "id": "business1",
+                    "children": [
+                      {
+                        "label": "Initiatives",
+                        "value": "initiatives",
+                        "id": "initiative1",
+                        "disabled": true
+                      },
+                      {
+                        "label": "Learning & Development",
+                        "value": "learningAndDevelopment",
+                        "id": "development1"
+                      }
+                    ]
+                  },
+                  {
+                    "label": "People Experience",
+                    "value": "peopleExperience",
+                    "id": "experience1"
+                  }
+                ]
+              },
+              {
+                "label": "Contact Center",
+                "value": "contactCenter",
+                "id": "contact1",
+                "children": [
+                  {
+                    "label": "Appointment Management",
+                    "value": "appointmentManagement",
+                    "id": "appointment1"
+                  },
+                  {
+                    "label": "Customer Service",
+                    "value": "customerService",
+                    "id": "customer1",
+                    "disabled": true
+                  },
+                  {
+                    "label": "Energy",
+                    "value": "energy",
+                    "id": "energy1"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "name": "Disabled Input",
+      "structureMode": "standard",
+      "props": {
+        "variant": "multi",
+        "label": "Locked departments",
+        "disabled": true
       }
     }
   ],
-  "conditionals": {},
+  "conditionals": {
+    "requiredIndicator": {
+      "requires": "label"
+    }
+  },
   "hints": {
     "tree_data": {
       "when": {},
-      "message": "treeData is a nested list with id, label, value, and optional children; expand with expanded on nodes you want open by default.",
+      "message": "treeData is required. Each option needs an id, label, value, and can include children, expanded, disabled, or custom metadata for option children.",
       "type": "info"
+    },
+    "multi": {
+      "presetName": "Multi",
+      "message": "Multi uses checkboxes and returns the selected nodes through onSelect. inputDisplay=\"pills\" shows selected items as pills in the input.",
+      "type": "info"
+    },
+    "single_select": {
+      "presetName": "Single Select",
+      "message": "Single Select uses radios and should receive at most one selectedIds value because only one node can be selected.",
+      "type": "info"
+    },
+    "selected_ids": {
+      "presetName": "Selected IDs",
+      "message": "selectedIds checks matching treeData node ids on load. In multi mode, multiple ids can be passed.",
+      "type": "info"
+    },
+    "input_display_none": {
+      "presetName": "Input Display None",
+      "message": "inputDisplay=\"none\" keeps selected pills out of the input while preserving filtering and selection behavior.",
+      "type": "info"
+    },
+    "return_all_selected": {
+      "presetName": "Return All Selected",
+      "message": "returnAllSelected changes the selected payload so parent and child selections can be returned together.",
+      "type": "info"
+    },
+    "hide_checked_children": {
+      "presetName": "Hide Checked Children",
+      "message": "showCheckedChildren={false} keeps checked child rows hidden under selected parents, which is useful for compact trees.",
+      "type": "info"
+    },
+    "with_option_children": {
+      "presetName": "With Option Children",
+      "message": "MultiLevelSelect.Options receives each item, so child content can use custom fields from treeData like status.",
+      "type": "info"
+    },
+    "disabled_options": {
+      "presetName": "Disabled Options",
+      "message": "Disabled options come from treeData nodes with disabled: true; those rows remain visible but cannot be selected.",
+      "type": "info"
+    },
+    "disabled_input": {
+      "presetName": "Disabled Input",
+      "message": "disabled locks the input and prevents opening or changing selections.",
+      "type": "info"
+    }
+  },
+  "structureModes": {
+    "default": "standard",
+    "modes": {
+      "standard": {
+        "label": "Standard",
+        "template": "<MultiLevelSelect\n  id=\"multi-level-select-playground\"\n  treeData={treeData}{{props}}\n/>"
+      },
+      "with_children": {
+        "label": "With Options Children",
+        "template": "<MultiLevelSelect\n  id=\"multi-level-select-with-children-playground\"\n  treeData={treeData}{{props}}\n>\n  <MultiLevelSelect.Options>\n    {(item) => (\n      <Badge\n          marginLeft=\"sm\"\n          text={item.status || 'available'}\n          variant={item.status === 'active' ? 'success' : 'warning'}\n      />\n    )}\n  </MultiLevelSelect.Options>\n</MultiLevelSelect>"
+      }
+    }
+  },
+  "children": {
+    "editable": false,
+    "default": ""
+  },
+  "customProps": {
+    "treeData": {
+      "type": "array",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "description": "Nested option data with id, label, value, and optional children."
     }
+  },
+  "requiredProps": {
+    "treeData": [
+      {
+        "label": "Power Home Remodeling",
+        "value": "powerHomeRemodeling",
+        "id": "powerhome1",
+        "expanded": true,
+        "status": "active",
+        "children": [
+          {
+            "label": "People",
+            "value": "people",
+            "id": "people1",
+            "expanded": true,
+            "status": "active",
+            "children": [
+              {
+                "label": "Talent Acquisition",
+                "value": "talentAcquisition",
+                "id": "talent1",
+                "status": "active"
+              },
+              {
+                "label": "Business Affairs",
+                "value": "businessAffairs",
+                "id": "business1",
+                "status": "active",
+                "children": [
+                  {
+                    "label": "Initiatives",
+                    "value": "initiatives",
+                    "id": "initiative1",
+                    "status": "active"
+                  },
+                  {
+                    "label": "Learning & Development",
+                    "value": "learningAndDevelopment",
+                    "id": "development1",
+                    "status": "inactive"
+                  }
+                ]
+              },
+              {
+                "label": "People Experience",
+                "value": "peopleExperience",
+                "id": "experience1",
+                "status": "inactive"
+              }
+            ]
+          },
+          {
+            "label": "Contact Center",
+            "value": "contactCenter",
+            "id": "contact1",
+            "status": "inactive",
+            "children": [
+              {
+                "label": "Appointment Management",
+                "value": "appointmentManagement",
+                "id": "appointment1",
+                "status": "active"
+              },
+              {
+                "label": "Customer Service",
+                "value": "customerService",
+                "id": "customer1",
+                "status": "inactive"
+              },
+              {
+                "label": "Energy",
+                "value": "energy",
+                "id": "energy1",
+                "status": "active"
+              }
+            ]
+          }
+        ]
+      }
+    ]
   }
 }