playbook_ui 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle, useMemo } from "react";
+import React, { useState, useRef, useEffect, useLayoutEffect, forwardRef, useImperativeHandle, useMemo, useContext } from "react";
 import classnames from "classnames";
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
@@ -21,6 +21,14 @@ import {
     handleClickOutside,
 } from "./utilities";
 
+import { DialogContext } from "../pb_dialog/_dialog_context";
+import {
+    resolveFloatingOwnerId,
+    resolvePortaledKitHost,
+    positionDropdownPortalToWrapper,
+    subscribeFloatingKitReposition,
+} from "../utilities/floatingPortalHosts";
+        
 function serializeDropdownFilterResetDefault(
     variant: "default" | "subtle" | "quickpick" | undefined,
     multiSelect: boolean,
@@ -93,6 +101,7 @@ type DropdownProps = {
     closeOnClick?: "outside" | "inside" | "any";
     constrainHeight?: boolean;
     customQuickPickDates?: CustomQuickPickDates;
+    disabled?: boolean;
     formPillProps?: GenericObject;
     dark?: boolean;
     data?: { [key: string]: string };
@@ -139,6 +148,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         dark = false,
         data = {},
         defaultValue = {},
+        disabled = false,
         error,
         htmlOptions = {},
         id,
@@ -164,9 +174,16 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
     const separatorsClass = separators ? '' : 'separators_hidden'
     const classes = classnames(
         buildCss("pb_dropdown", variant, separatorsClass),
+        disabled && "disabled",
         globalProps(props),
         className
     );
+
+    const floatingShellClasses = useMemo(
+        () => classnames(classes, "pb_dropdown_floating_shell"),
+        [classes],
+    );
+
     // ------------- Quick Pick ---------------------------------
     // Use QuickPick options when variant is "quickpick"
     const dropdownOptions = variant === "quickpick" 
@@ -174,7 +191,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         : (options || []);
     // ----------------------------------------------------------
 
-    const [isDropDownClosed, setIsDropDownClosed, toggleDropdown] = useDropdown(isClosed);
+    const [isDropDownClosed, setIsDropDownClosed, toggleDropdown] = useDropdown(disabled ? true : isClosed);
 
     // Use a suffix for the trigger ID to avoid conflict with the outer div's id
     const sanitizeForId = (str: string) =>
@@ -225,9 +242,31 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
     const inputRef = useRef<HTMLInputElement>(null);
     const inputWrapperRef = useRef<HTMLDivElement | null>(null);
     const dropdownContainerRef = useRef(null);
+    const outerDivRef = useRef<HTMLDivElement>(null);
+
+    const dialogCtx = useContext(DialogContext);
+    const [portalHost, setPortalHost] = useState<HTMLElement | null>(null);
+    const [floatingOwnerId, setFloatingOwnerId] = useState<string | null>(null);
+
+    useLayoutEffect(() => {
+        if (isDropDownClosed) {
+            setPortalHost(null);
+            setFloatingOwnerId(null);
+            return;
+        }
+        const root = outerDivRef.current;
+        setFloatingOwnerId(resolveFloatingOwnerId(root));
+        setPortalHost(
+            resolvePortaledKitHost(
+                root,
+                dialogCtx?.selectMenuPortalTarget ?? null,
+            ),
+        );
+    }, [isDropDownClosed, dialogCtx?.selectMenuPortalTarget]);
 
     const handleLabelClick = (e: React.MouseEvent) => {
       e.stopPropagation();
+      if (disabled) return;
       if (selectId) {
         const trigger = document.getElementById(selectId);
         if (trigger) trigger.focus();
@@ -269,8 +308,8 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
 
     // dropdown to toggle with external control
     useEffect(() => {
-        setIsDropDownClosed(isClosed)
-    }, [isClosed])
+        setIsDropDownClosed(disabled ? true : isClosed)
+    }, [disabled, isClosed])
 
     const blankSelectionOption: GenericObject = blankSelection ? [{ label: blankSelection, value: "" }] : [];
     const optionsWithBlankSelection = blankSelectionOption.concat(dropdownOptions);
@@ -300,42 +339,71 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         }
     }, [isDropDownClosed]);
 
-    // Auto-position dropdown above/below based on available space
-    useEffect(() => {
-        if (!isDropDownClosed && dropdownContainerRef.current) {
-            const container = dropdownContainerRef.current;
-            const wrapper = container.closest('.dropdown_wrapper') as HTMLElement;
-            if (!wrapper) return;
-
-            const wrapperRect = wrapper.getBoundingClientRect();
-            const h = container.getBoundingClientRect().height || container.scrollHeight;
-            const spaceBelow = window.innerHeight - wrapperRect.bottom;
-            const spaceAbove = wrapperRect.top;
-
-            // If not enough space below but enough space above, position above
-            if (spaceBelow < h + 10 && spaceAbove >= h + 10) {
-                container.style.top = "auto";
-                container.style.bottom = "calc(100% + 5px)";
-                container.style.marginTop = "0";
-                container.style.marginBottom = "0";
-            } else {
-                // Default: position below
-                container.style.top = "";
-                container.style.bottom = "";
-                container.style.marginTop = "";
-                container.style.marginBottom = "";
-            }
+    // Auto-position dropdown above/below based on available space or fixed/absolute when portaled to body / floating root
+    useLayoutEffect(() => {
+        if (isDropDownClosed || !dropdownContainerRef.current || !dropdownRef.current) {
+            return;
         }
-    }, [isDropDownClosed, dropdownContainerRef]);
+
+        const container = dropdownContainerRef.current as HTMLElement;
+        const wrapper = dropdownRef.current as HTMLElement;
+
+        if (portalHost) {
+            const applyPortalPosition = () => {
+                const panel = dropdownContainerRef.current as HTMLElement | null;
+                const wrap = dropdownRef.current as HTMLElement | null;
+                if (!panel || !wrap) {
+                    return;
+                }
+                positionDropdownPortalToWrapper({
+                    panel,
+                    wrapperViewportRect: wrap.getBoundingClientRect(),
+                    positionHost: portalHost,
+                });
+            };
+            applyPortalPosition();
+            const raf = window.requestAnimationFrame(applyPortalPosition);
+            const unsubscribeReposition = subscribeFloatingKitReposition(applyPortalPosition);
+            return () => {
+                window.cancelAnimationFrame(raf);
+                unsubscribeReposition();
+            };
+        }
+
+        const wrapperRect = wrapper.getBoundingClientRect();
+        const h = container.getBoundingClientRect().height || container.scrollHeight;
+        const spaceBelow = window.innerHeight - wrapperRect.bottom;
+        const spaceAbove = wrapperRect.top;
+
+        if (spaceBelow < h + 10 && spaceAbove >= h + 10) {
+            container.style.top = "auto";
+            container.style.bottom = "calc(100% + 5px)";
+            container.style.marginTop = "0";
+            container.style.marginBottom = "0";
+        } else {
+            container.style.top = "";
+            container.style.bottom = "";
+            container.style.marginTop = "";
+            container.style.marginBottom = "";
+        }
+    }, [
+        isDropDownClosed,
+        portalHost,
+        filteredOptions,
+        constrainHeight,
+        filterItem,
+    ]);
 
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (disabled) return;
         setFilterItem(e.target.value);
         setIsDropDownClosed(false);
     };
 
 
       const handleOptionClick = (clickedItem: GenericObject) => {
+                if (disabled) return;
                 const shouldCloseOnClick = closeOnClick === "any" || closeOnClick === "inside";
                 
                 if (multiSelect) {
@@ -378,11 +446,13 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
              };
 
     const handleWrapperClick = () => {
+        if (disabled) return;
         autocomplete && inputRef?.current?.focus();
         toggleDropdown();
     };
 
     const handleBackspace = () => {
+      if (disabled) return;
       if (multiSelect) {
         setSelected([]);
         onSelect && onSelect([]);
@@ -451,9 +521,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
 
     useImperativeHandle(ref, () => imperativeRef.current);
 
-    // Create a ref to the outer div to attach the dropdown ref for DatePicker sync
-    const outerDivRef = useRef<HTMLDivElement>(null);
-    
     useEffect(() => {
       // Attach the ref to the DOM element so DatePicker can access it
       if (outerDivRef.current && variant === "quickpick" && id) {
@@ -502,6 +569,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     blankSelection,
                     clearable,
                     dropdownContainerRef,
+                    disabled,
                     error,
                     errorId,
                     filterItem,
@@ -517,6 +585,9 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     inputWrapperRef,
                     isDropDownClosed,
                     isInputFocused,
+                    floatingOwnerId,
+                    floatingShellClasses,
+                    portalHost,
                     selectId,
                     multiSelect,
                     onSelect,
@@ -559,12 +630,20 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     onBlur={() => {
                         // Debounce to delay the execution to prevent jumpiness in Focus state
                         setTimeout(() => {
-                            if (!dropdownRef.current.contains(document.activeElement)) {
+                            const active = document.activeElement;
+                            if (!active) {
+                                setIsInputFocused(false);
+                                return;
+                            }
+                            const inTrigger = dropdownRef.current?.contains(active);
+                            const inMenu =
+                                dropdownContainerRef.current?.contains(active);
+                            if (!inTrigger && !inMenu) {
                                 setIsInputFocused(false);
                             }
                         }, 0);
                     }}
-                    onFocus={() => setIsInputFocused(true)}
+                    onFocus={() => !disabled && setIsInputFocused(true)}
                     ref={dropdownRef}
                 >
                     {children ? (

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_custom_display_disabled_option.html.erb

@@ -0,0 +1,93 @@
+<%
+  options = [
+    {
+      label: "Jasper Furniss",
+      value: "jasperFurniss",
+      territory: "PHL",
+      title: "Lead UX Engineer",
+      id: "jasper-furniss",
+      status: "Offline"
+    },
+    {
+      label: "Ramon Ruiz",
+      value: "ramonRuiz",
+      territory: "PHL",
+      title: "Senior UX Designer",
+      id: "ramon-ruiz",
+      status: "Unavailable",
+      disabled: true
+    },
+    {
+      label: "Carlos Lima",
+      value: "carlosLima",
+      territory: "PHL",
+      title: "Nitro Developer",
+      id: "carlos-lima",
+      status: "Online"
+    },
+    {
+      label: "Courtney Long",
+      value: "courtneyLong",
+      territory: "PHL",
+      title: "Lead UX Designer",
+      id: "courtney-long",
+      status: "Online"
+    }
+  ]
+%>
+
+<%
+  custom_display = capture do
+    pb_rails("flex", props: { align: "center" }) do
+      concat(pb_rails("avatar", props: { name: "", size: "xs", id: "dropdown-avatar" }))
+      concat(pb_rails("body", props: { text: "", size: "xs", margin_x: "xs", id: "dropdown-avatar-name" }))
+      concat(pb_rails("badge", props: { text: "", id: "dropdown-avatar-status" }))
+    end
+  end
+%>
+
+<%= pb_rails("dropdown", props: { id: "user-dropdown-disabled-options", options: options }) do %>
+  <%= pb_rails("dropdown/dropdown_trigger", props: { placeholder: "Select a User", custom_display: custom_display }) %>
+  <%= pb_rails("dropdown/dropdown_container") do %>
+    <% options.each do |option| %>
+      <%= pb_rails("dropdown/dropdown_option", props: { option: option }) do %>
+        <%= pb_rails("flex", props: { align: "center", justify: "between" }) do %>
+          <%= pb_rails("flex/flex_item") do %>
+            <%= pb_rails("user", props: { name: option[:label], align: "left", avatar: true, orientation: "horizontal", territory: option[:territory], title: option[:title] }) %>
+          <% end %>
+          <%= pb_rails("flex/flex_item") do %>
+            <%= pb_rails("badge", props: { rounded: true, dark: true, text: option[:status], variant: option[:status] == "Offline" ? "neutral" : option[:status] == "Online" ? "success" : "warning" }) %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>
+
+<script>
+  document.addEventListener("pb:dropdown:selected", (e) => {
+    if (e.target.id !== "user-dropdown-disabled-options") return;
+
+    const option = e.detail;
+    const dropdown = e.target;
+    const display = dropdown.querySelector("[data-dropdown-trigger-custom-display]");
+    if (!display) return;
+
+    const nameEl = display.querySelector("#dropdown-avatar-name");
+    if (nameEl) nameEl.textContent = option.label;
+
+    const avatarWrapper = display.querySelector("#dropdown-avatar .avatar_wrapper");
+    if (avatarWrapper) {
+      const initials = (option.label[0] + option.label.split(" ").pop()[0]).toUpperCase();
+      avatarWrapper.dataset.name = option.label;
+      avatarWrapper.setAttribute("data-initials", initials);
+    }
+
+    const badgeEl = display.querySelector("#dropdown-avatar-status");
+    const variant = option.status === "Online" ? "success" : option.status === "Offline" ? "neutral" : "warning";
+    if (badgeEl) {
+      badgeEl.querySelector("span").textContent = option.status;
+      badgeEl.className = `pb_badge_kit_${variant}`;
+    }
+  });
+</script>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_custom_display_disabled_option.jsx

@@ -0,0 +1,127 @@
+import React, { useState } from 'react'
+
+import Dropdown from '../../pb_dropdown/_dropdown'
+import Badge from '../../pb_badge/_badge'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
+import Avatar from '../../pb_avatar/_avatar'
+import User from '../../pb_user/_user'
+import Body from '../../pb_body/_body'
+
+const DropdownCustomDisplayDisabledOption = (props) => {
+  const [selectedOption, setSelectedOption] = useState();
+
+  const options = [
+    {
+      label: "Jasper Furniss",
+      value: "jasperFurniss",
+      territory: "PHL",
+      title: "Lead UX Engineer",
+      id: "jasper-furniss",
+      status: "Offline"
+    },
+    {
+      label: "Ramon Ruiz",
+      value: "ramonRuiz",
+      territory: "PHL",
+      title: "Senior UX Designer",
+      id: "ramon-ruiz",
+      status: "Unavailable",
+      disabled: true
+    },
+    {
+      label: "Carlos Lima",
+      value: "carlosLima",
+      territory: "PHL",
+      title: "Nitro Developer",
+      id: "carlos-lima",
+      status: "Online"
+    },
+    {
+      label: "Courtney Long",
+      value: "courtneyLong",
+      territory: "PHL",
+      title: "Lead UX Designer",
+      id: "courtney-long",
+      status: "Online"
+    }
+  ];
+
+  const CustomDisplay = () => {
+    return (
+      <>
+      {
+        selectedOption && (
+          <Flex align="center">
+            <Avatar
+                name={selectedOption.label}
+                size="xs"
+            />
+            <Body 
+                marginX="xs"
+                text={selectedOption.label} 
+            />
+            <Badge 
+                text={selectedOption.status} 
+                variant={selectedOption.status == "Offline" ? "neutral" : selectedOption.status == "Online" ? "success" : "warning"}
+            />
+          </Flex>
+        )
+      }
+    </>
+    )
+  };
+
+
+  return (
+  <div>
+    <Dropdown
+        onSelect={(selectedItem) => setSelectedOption(selectedItem)}
+        options={options}
+        {...props}
+    >
+      <Dropdown.Trigger customDisplay={<CustomDisplay/>}
+          placeholder="Select a User"
+      />
+        {options.map((option) => (
+          <Dropdown.Option key={option.id} 
+              option={option}
+          >
+            <Flex
+                align="center"
+                justify="between"
+            >
+              <FlexItem>
+                <User
+                    align="left"
+                    avatar
+                    name={option.label}
+                    orientation="horizontal"
+                    territory={option.territory}
+                    title={option.title}
+                />
+              </FlexItem>
+              <FlexItem>
+                <Badge dark
+                    rounded
+                    text={option.status}
+                    variant={`${
+                        option.status === "Offline"
+                        ? "neutral"
+                    : option.status === "Unavailable"
+                    ? "warning"
+                        : option.status === "Online"
+                        ? "success"
+                        : "warning"
+                    }`}
+                />
+              </FlexItem>
+            </Flex>
+          </Dropdown.Option>
+        ))}
+    </Dropdown>
+  </div>
+  )
+}
+
+export default DropdownCustomDisplayDisabledOption

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_custom_display_disabled_option.md

@@ -0,0 +1 @@
+To disable individual items in the `options`, include `disabled: true` within the object on the option that you want disabled. See the code snippet below for an example of how to do this.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_disabled.html.erb

@@ -0,0 +1,10 @@
+<% 
+  options = [
+    { label: 'United States', value: 'unitedStates', id: 'us' },
+    { label: 'Canada', value: 'canada', id: 'ca' },
+    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
+  ]
+
+%>
+
+<%= pb_rails("dropdown", props: {id: "dropdown-disabled", disabled: true,label: "Default Dropdown", options: options}) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_disabled.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import Dropdown from '../_dropdown'
+
+const DropdownDisabled = (props) => {
+
+  const options = [
+    {
+      label: "United States",
+      value: "unitedStates",
+      id: "us"
+    },
+    {
+      label: "Canada",
+      value: "canada",
+      id: "ca"
+    },
+    {
+      label: "Pakistan",
+      value: "pakistan",
+      id: "pk"
+    }
+  ];  
+
+
+  return (
+  <div>
+    <Dropdown
+        disabled
+        label="Default Dropdown"
+        options={options}
+        {...props}
+    />
+  </div>
+  )
+}
+
+export default DropdownDisabled

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_disabled_option.html.erb

@@ -0,0 +1,10 @@
+<%
+  options = [
+    { label: "Available Option", value: "available", id: "available-option" },
+    { label: "Coming Soon", value: "coming-soon", id: "coming-soon", disabled: true },
+    { label: "Another Available", value: "another-available", id: "another-available" },
+    { label: "Locked Feature", value: "locked-feature", id: "locked-feature", disabled: true },
+  ]
+%>
+
+<%= pb_rails("dropdown", props: { label: "Disabled Options", options: options }) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_disabled_option.jsx

@@ -0,0 +1,37 @@
+import React, { useState } from 'react'
+
+import Dropdown from '../../pb_dropdown/_dropdown'
+import Caption from '../../pb_caption/_caption'
+
+const DropdownDisabledOption = (props) => {
+  const [selectedOption, setSelectedOption] = useState()
+
+  const options = [
+    { label: 'Available Option', value: 'available', id: 'available-option' },
+    { label: 'Coming Soon', value: 'coming-soon', id: 'coming-soon', disabled: true },
+    { label: 'Another Available', value: 'another-available', id: 'another-available' },
+    { label: 'Locked Feature', value: 'locked-feature', id: 'locked-feature', disabled: true },
+  ]
+
+  return (
+    <div>
+      <Caption
+          text="Select an option. Disabled options remain visible but cannot be selected."
+      />
+      <Dropdown
+          onSelect={(selectedItem) => setSelectedOption(selectedItem)}
+          options={options}
+          placeholder="Choose an option"
+          {...props}
+      />
+      {selectedOption && (
+        <Caption
+            marginTop="xs"
+            text={`Selected: ${selectedOption.label}`}
+        />
+      )}
+    </div>
+  )
+}
+
+export default DropdownDisabledOption

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_disabled_option.md

@@ -0,0 +1 @@
+To disable individual items in the `options`, include `disabled: true` within the object on the option that you want disabled. See the code snippet below for an example of how to do this.