playbook_ui 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

data/app/pb_kits/playbook/pb_popover/index.ts

@@ -1,5 +1,9 @@
 import PbEnhancedElement from '../pb_enhanced_element'
 import { createPopper, Instance, Placement } from '@popperjs/core'
+import {
+  isPortaledFloatingKitInteraction,
+  subscribeFloatingKitReposition,
+} from '../utilities/floatingPortalHosts'
 
 const POPOVER_OFFSET_Y = [0, 20]
 
@@ -8,6 +12,7 @@ export default class PbPopover extends PbEnhancedElement {
   _triggerElement: HTMLElement
   _tooltip: HTMLElement
   element: HTMLElement
+  _unsubscribeFloatingReposition: (() => void) | null = null
   static get selector() {
     return '[data-pb-popover-kit]'
   }
@@ -44,6 +49,14 @@ export default class PbPopover extends PbEnhancedElement {
       ],
     })
 
+    this._unsubscribeFloatingReposition = subscribeFloatingKitReposition(
+      () => {
+        if (this.tooltip?.classList.contains('show')) {
+          void this.popper?.update()
+        }
+      },
+    )
+
     this.triggerElement.addEventListener('click', (event: Event) => {
       event.preventDefault()
       event.stopPropagation()
@@ -59,19 +72,37 @@ export default class PbPopover extends PbEnhancedElement {
     })
   }
 
+  disconnect(): void {
+    this._unsubscribeFloatingReposition?.()
+    this._unsubscribeFloatingReposition = null
+    this.popper?.destroy()
+  }
+
   checkCloseTooltip() {
-    document.querySelector('body').addEventListener('click', ({ target } ) => {
-      const isTooltipElement = (target as HTMLElement).closest(`#${this.tooltipId}`) !== null
-      const isTriggerElement = (target as HTMLElement).closest(`#${this.triggerElementId}`) !== null
+    document.querySelector('body').addEventListener('click', (event) => {
+      const t = event.target
+      const isTooltipElement =
+        event.target instanceof Element &&
+        event.target.closest(`#${this.tooltipId}`) !== null
+      const isTriggerElement =
+        event.target instanceof Element &&
+        event.target.closest(`#${this.triggerElementId}`) !== null
+      const isPortaledKit = isPortaledFloatingKitInteraction(
+        t,
+        this.tooltipId,
+        event.clientX,
+        event.clientY,
+      )
 
       switch (this.closeOnClick) {
       case 'any':
+        if (isPortaledKit) return
         if (isTooltipElement || !isTooltipElement && !isTriggerElement) {
           this.hideTooltip()
         }
         break
       case 'outside':
-        if (!isTooltipElement && !isTriggerElement) {
+        if (!isTooltipElement && !isTriggerElement && !isPortaledKit) {
           this.hideTooltip()
         }
         break

data/app/pb_kits/playbook/pb_popover/popover.html.erb

@@ -1,7 +1,10 @@
 <%= pb_content_tag do %>
-  <div class="pb_popover_tooltip hide" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
+  <div class="pb_popover_tooltip hide" id="<%= object.tooltip_id %>" role="tooltip" data-pb-floating-owner="<%= object.tooltip_id %>" style="<%= object.z_index_helper %>">
     <div class="pb_popover_body <%= object.width_height_class_helper %> <%= object.popover_spacing_helper %>" style="<%= object.width_height_helper %>">
-      <%= content.presence %>
+      <div class="pb_popover_scroll_region">
+        <%= content.presence %>
+      </div>
+      <div class="pb_popover_floating_root" data-pb-dialog-floating-root="true" data-pb-floating-owner="<%= object.tooltip_id %>" aria-hidden="true"></div>
     </div>
   </div>
 <% end %>

data/app/pb_kits/playbook/pb_popover/popover.test.js

@@ -1,6 +1,19 @@
 import React from "react";
 import { render, screen, fireEvent } from "../utilities/test-utils";
 import { Button, PbReactPopover } from "playbook-ui";
+import {
+  resolveDialogFloatingPortalHost,
+  resolvePortaledKitHost,
+  isPortaledFloatingKitInteraction,
+  matchesPortaledMenuPointerDown,
+  portaledFloatingOwnerMenusAtPoint,
+  recordPortaledMenuPointerDown,
+  portaledFloatingKitAtPoint,
+  targetIsInsidePortaledFloatingKit,
+  resolvePortaledFloatingZIndex,
+  PB_PORTALED_FLOATING_Z_INDEX_MAX,
+  subscribeFloatingKitReposition,
+} from "../utilities/floatingPortalHosts";
 
 const testId = "popover-kit";
 
@@ -228,16 +241,23 @@ const PopoverTestAppendToSelector = () => {
     render(<PopoverTestZIndex data={{ testid: testId}}/>)
     const btn = screen.getByText(/click me/i)
     fireEvent.click(btn);
-    const kit = screen.getByText("Click Anywhere");
-    expect(kit).toHaveClass("pb_popover_body z_index_3");
+    const label = screen.getByText("Click Anywhere");
+    const kit = label.closest(".pb_popover_body");
+    expect(kit).not.toBeNull();
+    expect(kit).toHaveClass("pb_popover_body", "z_index_3");
   });
 
   test("renders Popover with max height and max width", () => {
     render(<PopoverTestHeight data={{ testid: testId}}/>)
     const btn = screen.getByText(/click me/i)
     fireEvent.click(btn);
-    const kit = screen.getByText("Click Anywhere");
-    expect(kit).toHaveClass("pb_popover_body p_sm overflow_handling");
+    const label = screen.getByText("Click Anywhere");
+    const body = label.closest(".pb_popover_body");
+    const scrollRegion = label.closest(".pb_popover_scroll_region");
+    expect(body).not.toBeNull();
+    expect(body).toHaveClass("pb_popover_body", "p_sm");
+    expect(scrollRegion).not.toBeNull();
+    expect(scrollRegion).toHaveClass("pb_popover_scroll_region", "overflow_handling");
   });
 
   test("closes Popover on click anywhere", async () => {
@@ -297,4 +317,191 @@ const PopoverTestAppendToSelector = () => {
     // Check that the popover is rendered inside the custom container
     const customContainer = screen.getByTestId("custom-container");
     expect(customContainer).toContainElement(kit);
-  });
+  });
+
+describe("Popover portaled kit portal host", () => {
+  beforeEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  test("resolveDialogFloatingPortalHost returns floating root inside popover tooltip", () => {
+    const pop = document.createElement("div");
+    pop.className = "pb_popover_tooltip";
+    const body = document.createElement("div");
+    body.className = "pb_popover_body";
+    const floating = document.createElement("div");
+    floating.setAttribute("data-pb-dialog-floating-root", "true");
+    const inner = document.createElement("div");
+    body.appendChild(floating);
+    body.appendChild(inner);
+    pop.appendChild(body);
+    document.body.appendChild(pop);
+
+    expect(resolveDialogFloatingPortalHost(inner)).toBe(floating);
+  });
+
+  test("resolveDialogFloatingPortalHost ignores nested dialog floating roots", () => {
+    const outerDialog = document.createElement("dialog");
+    outerDialog.id = "bulk-update-dialog";
+    const scroll = document.createElement("div");
+    scroll.className = "pb_dialog_scroll_region";
+    const nestedDialog = document.createElement("dialog");
+    nestedDialog.setAttribute("data-confirmation-modal", "true");
+    const nestedScroll = document.createElement("div");
+    nestedScroll.className = "pb_dialog_scroll_region";
+    const nestedFloating = document.createElement("div");
+    nestedFloating.className = "pb_dialog_floating_root";
+    nestedFloating.setAttribute("data-pb-dialog-floating-root", "true");
+    nestedDialog.appendChild(nestedScroll);
+    nestedDialog.appendChild(nestedFloating);
+    const kit = document.createElement("div");
+    kit.className = "pb_multi_level_select";
+    scroll.appendChild(nestedDialog);
+    scroll.appendChild(kit);
+    const outerFloating = document.createElement("div");
+    outerFloating.className = "pb_dialog_floating_root";
+    outerFloating.setAttribute("data-pb-dialog-floating-root", "true");
+    outerFloating.setAttribute("data-pb-floating-owner", "bulk-update-dialog");
+    outerDialog.appendChild(scroll);
+    outerDialog.appendChild(outerFloating);
+    document.body.appendChild(outerDialog);
+
+    expect(resolveDialogFloatingPortalHost(kit)).toBe(outerFloating);
+    expect(resolvePortaledKitHost(kit, null)).toBe(outerFloating);
+  });
+
+  test("resolvePortaledKitHost uses document.body when kit is in popover tooltip", () => {
+    const pop = document.createElement("div");
+    pop.className = "pb_popover_tooltip show";
+    const kit = document.createElement("div");
+    pop.appendChild(kit);
+    document.body.appendChild(pop);
+
+    expect(resolvePortaledKitHost(kit, null)).toBe(document.body);
+  });
+
+  test("targetIsInsidePortaledFloatingKit is scoped to owner id", () => {
+    const portalA = document.createElement("div");
+    portalA.className = "typeahead-kit-select__menu-portal";
+    portalA.setAttribute("data-pb-floating-owner", "filter-a");
+    const optionA = document.createElement("div");
+    portalA.appendChild(optionA);
+
+    const portalB = document.createElement("div");
+    portalB.className = "typeahead-kit-select__menu-portal";
+    portalB.setAttribute("data-pb-floating-owner", "filter-b");
+    document.body.appendChild(portalA);
+    document.body.appendChild(portalB);
+
+    expect(targetIsInsidePortaledFloatingKit(optionA, "filter-a")).toBe(true);
+    expect(targetIsInsidePortaledFloatingKit(optionA, "filter-b")).toBe(false);
+    expect(targetIsInsidePortaledFloatingKit(document.createElement("button"), "filter-a")).toBe(
+      false,
+    );
+  });
+
+  test("isPortaledFloatingKitInteraction falls back to point hit-test when available", () => {
+    const portal = document.createElement("div");
+    portal.className = "pb_time_picker_floating_shell";
+    portal.setAttribute("data-pb-floating-owner", "filter-a");
+    const option = document.createElement("div");
+    option.className = "time_dropdown_option";
+    portal.appendChild(option);
+    document.body.appendChild(portal);
+
+    expect(isPortaledFloatingKitInteraction(option, "filter-a")).toBe(true);
+    expect(isPortaledFloatingKitInteraction(option, "filter-b")).toBe(false);
+
+    const elementsFromPoint = jest
+      .spyOn(document, "elementsFromPoint")
+      .mockReturnValue([option]);
+
+    expect(isPortaledFloatingKitInteraction(document.body, "filter-a", 10, 20)).toBe(
+      true,
+    );
+    expect(portaledFloatingKitAtPoint(10, 20, "filter-b")).toBe(false);
+
+    elementsFromPoint.mockRestore();
+  });
+
+  test("portaledFloatingOwnerMenusAtPoint hit-tests owned menu bounding rects", () => {
+    const shell = document.createElement("div");
+    shell.className = "pb_time_picker_floating_shell";
+    shell.setAttribute("data-pb-floating-owner", "filter-a");
+    const dropdown = document.createElement("div");
+    dropdown.className = "time_dropdown";
+    shell.appendChild(dropdown);
+    document.body.appendChild(shell);
+
+    dropdown.getBoundingClientRect = () => ({
+      left: 5,
+      top: 10,
+      right: 65,
+      bottom: 210,
+      width: 60,
+      height: 200,
+      x: 5,
+      y: 10,
+      toJSON: () => ({}),
+    });
+
+    const elementsFromPoint = jest
+      .spyOn(document, "elementsFromPoint")
+      .mockReturnValue([document.body]);
+
+    expect(portaledFloatingOwnerMenusAtPoint(30, 100, "filter-a")).toBe(true);
+    expect(portaledFloatingOwnerMenusAtPoint(30, 100, "filter-b")).toBe(false);
+    expect(isPortaledFloatingKitInteraction(document.body, "filter-a", 30, 100)).toBe(
+      true,
+    );
+
+    elementsFromPoint.mockRestore();
+  });
+
+  test("isPortaledFloatingKitInteraction matches portaled menu mousedown before click", () => {
+    recordPortaledMenuPointerDown("filter-a", 30, 100);
+
+    expect(matchesPortaledMenuPointerDown("filter-a", 30, 100)).toBe(true);
+    expect(matchesPortaledMenuPointerDown("filter-b", 30, 100)).toBe(false);
+    expect(isPortaledFloatingKitInteraction(document.body, "filter-a", 30, 100)).toBe(
+      true,
+    );
+  });
+
+  test("resolvePortaledFloatingZIndex caps all portaled hosts below 10010", () => {
+    expect(resolvePortaledFloatingZIndex(document.body, "100100")).toBe(
+      String(PB_PORTALED_FLOATING_Z_INDEX_MAX),
+    );
+    expect(resolvePortaledFloatingZIndex(document.body, "1002")).toBe("1002");
+
+    const dialogHost = document.createElement("div");
+    expect(resolvePortaledFloatingZIndex(dialogHost, "100100")).toBe(
+      String(PB_PORTALED_FLOATING_Z_INDEX_MAX),
+    );
+    expect(resolvePortaledFloatingZIndex(dialogHost, "1005")).toBe("1005");
+  });
+
+  test("subscribeFloatingKitReposition coalesces scroll events to one rAF per frame", () => {
+    const rafCallbacks = [];
+    const rafSpy = jest
+      .spyOn(window, "requestAnimationFrame")
+      .mockImplementation((cb) => {
+        rafCallbacks.push(cb);
+        return rafCallbacks.length;
+      });
+
+    const reposition = jest.fn();
+    const unsubscribe = subscribeFloatingKitReposition(reposition);
+
+    window.dispatchEvent(new Event("scroll"));
+    window.dispatchEvent(new Event("scroll"));
+    expect(reposition).not.toHaveBeenCalled();
+    expect(rafSpy).toHaveBeenCalledTimes(1);
+
+    rafCallbacks[0]();
+    expect(reposition).toHaveBeenCalledTimes(1);
+
+    unsubscribe();
+    rafSpy.mockRestore();
+  });
+});

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

@@ -2,9 +2,11 @@
   "template": "<ProgressPills{{props}} />",
   "propTargets": {},
   "defaults": {
-    "active": 0,
+    "active": 2,
     "fullWidthPill": false,
-    "steps": 3
+    "steps": 4,
+    "title": "Checkout",
+    "value": "Payment"
   },
   "groups": [
     {
@@ -24,7 +26,8 @@
     {
       "name": "Appearance",
       "props": [
-        "fullWidthPill"
+        "fullWidthPill",
+        "dark"
       ]
     }
   ],
@@ -47,15 +50,6 @@
         "value": "Payment"
       }
     },
-    {
-      "name": "Mid flow (5 steps)",
-      "props": {
-        "steps": 5,
-        "active": 3,
-        "title": "Onboarding",
-        "value": "Step 3 of 5"
-      }
-    },
     {
       "name": "Complete",
       "props": {
@@ -86,5 +80,24 @@
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "status": {
+      "when": {
+        "title": "Checkout"
+      },
+      "message": "Title and value add the status label above the pill row.",
+      "type": "info"
+    },
+    "full_width": {
+      "when": {
+        "fullWidthPill": true
+      },
+      "message": "Full-width pills stretch each segment across the available row.",
+      "type": "info"
+    },
+    "active_range": {
+      "message": "Active is zero-based for an empty state and counts completed pills up to the steps total.",
+      "type": "info"
+    }
+  }
 }

data/app/pb_kits/playbook/pb_progress_pills/docs/_playground.overrides.json

@@ -1,8 +1,15 @@
 {
+  "defaults": {
+    "active": 2,
+    "fullWidthPill": false,
+    "steps": 4,
+    "title": "Checkout",
+    "value": "Payment"
+  },
   "groups": [
     { "name": "Content", "props": ["title", "value"] },
     { "name": "Behavior", "props": ["steps", "active"] },
-    { "name": "Appearance", "props": ["fullWidthPill"] }
+    { "name": "Appearance", "props": ["fullWidthPill", "dark"] }
   ],
   "presets": [
     {
@@ -13,10 +20,6 @@
       "name": "Step 2 of 4",
       "props": { "steps": 4, "active": 2, "title": "Checkout", "value": "Payment" }
     },
-    {
-      "name": "Mid flow (5 steps)",
-      "props": { "steps": 5, "active": 3, "title": "Onboarding", "value": "Step 3 of 5" }
-    },
     {
       "name": "Complete",
       "props": {
@@ -47,5 +50,20 @@
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "status": {
+      "when": { "title": "Checkout" },
+      "message": "Title and value add the status label above the pill row.",
+      "type": "info"
+    },
+    "full_width": {
+      "when": { "fullWidthPill": true },
+      "message": "Full-width pills stretch each segment across the available row.",
+      "type": "info"
+    },
+    "active_range": {
+      "message": "Active is zero-based for an empty state and counts completed pills up to the steps total.",
+      "type": "info"
+    }
+  }
 }

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

@@ -4,7 +4,9 @@
   "defaults": {
     "align": "left",
     "muted": false,
-    "variant": "default"
+    "variant": "default",
+    "percent": "50",
+    "width": "100%"
   },
   "groups": [
     {
@@ -25,7 +27,9 @@
       "name": "Appearance",
       "props": [
         "variant",
-        "muted"
+        "muted",
+        "width",
+        "dark"
       ]
     }
   ],
@@ -37,41 +41,43 @@
       }
     },
     {
-      "name": "25%",
+      "name": "50%",
       "props": {
-        "percent": "25"
+        "percent": "50"
       }
     },
     {
-      "name": "50%",
+      "name": "100%",
       "props": {
-        "percent": "50"
+        "percent": "100"
       }
     },
     {
-      "name": "75%",
+      "name": "variant: positive",
       "props": {
-        "percent": "75"
+        "percent": "75",
+        "variant": "positive"
       }
     },
     {
-      "name": "100%",
+      "name": "Muted",
       "props": {
-        "percent": "100"
+        "muted": true,
+        "percent": "50"
       }
     },
     {
-      "name": "Positive 75%",
+      "name": "Value of Max",
       "props": {
-        "percent": "75",
-        "variant": "positive"
+        "value": 2,
+        "max": 10
       }
     },
     {
-      "name": "Warning 50%",
+      "name": "Fixed Width",
       "props": {
-        "percent": "50",
-        "variant": "warning"
+        "percent": "40",
+        "width": "120px"
       }
     },
     {
@@ -83,5 +89,32 @@
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "percent": {
+      "when": {
+        "percent": "50"
+      },
+      "message": "Percent accepts a number-like string and renders that width directly.",
+      "type": "info"
+    },
+    "value_max": {
+      "presetName": "Value of Max",
+      "message": "Use value with max when the progress should be calculated from a ratio.",
+      "type": "info"
+    },
+    "width": {
+      "when": {
+        "width": "120px"
+      },
+      "message": "Width controls the progress bar container; percent still controls the fill.",
+      "type": "info"
+    },
+    "variant: positive": {
+      "when": {
+        "variant": "positive"
+      },
+      "message": "Use the variant prop to set the color of the progress bar.",
+      "type": "info"
+    }
+  }
 }

data/app/pb_kits/playbook/pb_progress_simple/docs/_playground.overrides.json

@@ -1,22 +1,35 @@
 {
+  "defaults": {
+    "align": "left",
+    "muted": false,
+    "percent": "50",
+    "variant": "default",
+    "width": "100%"
+  },
   "groups": [
     { "name": "Content", "props": ["percent", "value", "max"] },
     { "name": "Behavior", "props": ["align"] },
-    { "name": "Appearance", "props": ["variant", "muted"] }
+    { "name": "Appearance", "props": ["variant", "muted", "width", "dark"] }
   ],
   "presets": [
     { "name": "0%", "props": { "percent": "0" } },
-    { "name": "25%", "props": { "percent": "25" } },
     { "name": "50%", "props": { "percent": "50" } },
-    { "name": "75%", "props": { "percent": "75" } },
     { "name": "100%", "props": { "percent": "100" } },
     {
-      "name": "Positive 75%",
+      "name": "variant: positive",
       "props": { "percent": "75", "variant": "positive" }
     },
     {
-      "name": "Warning 50%",
-      "props": { "percent": "50", "variant": "warning" }
+      "name": "Muted",
+      "props": { "muted": true, "percent": "50" }
+    },
+    {
+      "name": "Value of Max",
+      "props": { "value": 2, "max": 10 }
+    },
+    {
+      "name": "Fixed Width",
+      "props": { "percent": "40", "width": "120px" }
     },
     {
       "name": "Centered",
@@ -24,5 +37,26 @@
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "percent": {
+      "when": { "percent": "50" },
+      "message": "Percent accepts a number-like string and renders that width directly.",
+      "type": "info"
+    },
+    "value_max": {
+      "presetName": "Value of Max",
+      "message": "Use value with max when the progress should be calculated from a ratio.",
+      "type": "info"
+    },
+    "width": {
+      "when": { "width": "120px" },
+      "message": "Width controls the progress bar container; percent still controls the fill.",
+      "type": "info"
+    },
+    "variant: positive": {
+      "when": { "variant": "positive" },
+      "message": "Use the variant prop to set the color of the progress bar.",
+      "type": "info"
+    }
+  }
 }