playbook_ui 16.11.0.pre.rc.1 → 16.11.0.pre.rc.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 848af7a36c085122e6e8156e310bd4f6194e308bbb74cd1b3662b14ec15b422f
-  data.tar.gz: e48ac7afb5ae31df9aa428eda784862d970b793b9fb9f675102d93a358c147f9
+  metadata.gz: 3240b5088da697dc630863038b107d3afb359c41a2a7fb782c538c69b58e7f84
+  data.tar.gz: 2935c4cbffb05815b2a60e1d1d365f06b166a560a88472d38acaaf0f4d63fd9f
 SHA512:
-  metadata.gz: 43555eb980b5cadd73a80c64d5b685fd42193b96e5e57a079410ceaa2cf6a26d29c2e5cef8936c9f3ec7a10138acdd5d4bc6336319a6991d8bc1bb52ebdf4c34
-  data.tar.gz: f1199002cfb4e1b53d17977d58398de833f13597cf8db5a2093fa2295638686b39ddefaa4891152a65b6130e1d5cda5b37ee5041f75b5fc375ed8dfb9744993d
+  metadata.gz: f8ff49b8d4936b46baaeae064f01de7d4a5e78b32579c80e647fb453f37e30ecd03d1f321e29795e89d21b78cddb6e34bd5eaa185b7b30156801976968a7f96b
+  data.tar.gz: 1da4e486c2dd4509bfac64af064bea02fce52baeeb904adc11c9f5dd37ddc06d216b1ad5217525a4de6c975128c07ebf69d11e32e20c9698c9da49c9b8fb5bc8

data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx

@@ -162,20 +162,26 @@ export const RegularTableView = ({
   );
 
   // Row pinning
-  function PinnedRow({ row }: { row: Row<any> }) {
+  function PinnedRow({ row, position }: { row: Row<any>; position: 'top' | 'bottom' }) {
     const customRowStyle = getRowStyle(rowStyling, row);
+    const bottomRowsCount = table.getBottomRows().length;
+
     return (
       <tr
-          className={classnames(
-            `pinned-row`,
-          )}
+          className={classnames('pinned-row', {
+            'pinned-row-bottom': position === 'bottom',
+          })}
           style={{
             backgroundColor: customRowStyle?.backgroundColor ? customRowStyle?.backgroundColor : 'white',
             color: customRowStyle?.fontColor,
             position: 'sticky',
             top:
-              row.getIsPinned() === 'top'
-                  ? `${row.getPinnedIndex() * rowHeight + headerHeight + actionBarHeight}px`
+            position === 'top'
+                ? `${row.getPinnedIndex() * rowHeight + headerHeight + actionBarHeight}px`
+                : undefined,
+            bottom:
+              position === 'bottom'
+                  ? `${(bottomRowsCount - 1 - row.getPinnedIndex()) * rowHeight}px`
                   : undefined,
             zIndex: '3',
             fontWeight: getFontWeight(customRowStyle),
@@ -201,6 +207,7 @@ export const RegularTableView = ({
     <>
       {pinnedRows && table.getTopRows().map((row: Row<GenericObject>) => (
         <PinnedRow key={row.id}
+            position="top"
             row={row}
         />
       ))}
@@ -274,6 +281,12 @@ export const RegularTableView = ({
           </React.Fragment>
         );
       })}
+      {pinnedRows && table.getBottomRows().map((row: Row<GenericObject>) => (
+        <PinnedRow key={row.id}
+            position="bottom"
+            row={row}
+        />
+      ))}
     </>
   );
 }

data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts

@@ -72,6 +72,7 @@ export function useTableState({
   const [localColumnVisibility, setLocalColumnVisibility] = useState({});
   const [localRowPinning, setLocalRowPinning] = useState<RowPinningState>({
     top: [],
+    bottom: [],
   });
   // Manage local state to preserve current page index when inlineRowLoading is enabled so it does not boot table to page 1
   // We can extend this for more usecases, but for now scoping it only for inlineRowLoading
@@ -235,22 +236,26 @@ export function useTableState({
   // Handle row pinning changes
     useEffect(() => {
     const topPins = pinnedRows?.value?.top ?? [];
-    if (topPins.length === 0) {
-      onRowPinningChange({ top: [] });
-      return;
-    }
+    const bottomPins = pinnedRows?.value?.bottom ?? [];
+    
     const rows = table.getRowModel().rows;
     const collectAllDescendantIds = (subs: Row<GenericObject>[]): string[] =>
       subs.flatMap(r => [r.id, ...collectAllDescendantIds(r.subRows)]);
-    const allPinned: string[] = [];
-    topPins.forEach(id => {
-      const parent = rows.find(r => r.id === id && r.depth === 0);
-      if (parent) {
-        allPinned.push(parent.id, ...collectAllDescendantIds(parent.subRows));
-      }
+    const expandPins = (ids: string[]): string[] => {
+      const allPinned: string[] = [];
+      ids.forEach(id => {
+        const parent = rows.find(r => r.id === id && r.depth === 0);
+        if (parent) {
+          allPinned.push(parent.id, ...collectAllDescendantIds(parent.subRows));
+        }
+      });
+      return allPinned;
+    };
+    onRowPinningChange({
+      top: expandPins(topPins),
+      bottom: expandPins(bottomPins),
     });
-    onRowPinningChange({ top: allPinned });
-  }, [table, pinnedRows?.value?.top?.join(',')]);
+  }, [table, pinnedRows?.value?.top?.join(','), pinnedRows?.value?.bottom?.join(',')]);
 
   // Set pagination state when pagination is enabled
   useEffect(() => {

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -747,6 +747,9 @@
   // Row Pinning - React uses inline style; Rails passes same style via html_options from table_body
   .pinned-row {
     box-shadow: 0 4px 10px 0 rgba($shadow, 0.16) !important;
+    &.pinned-row-bottom {
+      box-shadow: 0 -3px 8px 0 rgba($shadow, 0.1) !important;
+    }
   }
 
   // For Rails, we can't target the &:last-child since collapsed rows are display: none;

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -696,7 +696,7 @@ test("customRenderer prop functions as expected", () => {
   expect(pill).toBeInTheDocument()
 })
 
-test("pinnedRows prop renders pinned rows at top", () => {
+test("pinnedRows prop renders top pinned rows at top", () => {
   const pinnedRowsControl = {
     value: { top: ["1", "3"] },
     onChange: jest.fn()
@@ -721,6 +721,31 @@ test("pinnedRows prop renders pinned rows at top", () => {
   expect(firstPinnedRow).toHaveStyle("background-color: white")
 })
 
+test("pinnedRows prop renders bottom pinned rows at bottom", () => {
+  const pinnedRowsControl = {
+    value: { bottom: ["1", "3"] },
+    onChange: jest.fn()
+  }
+
+  render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        pinnedRows={pinnedRowsControl}
+        tableData={MOCK_DATA_WITH_ID}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const pinnedRows = kit.querySelectorAll(".pinned-row-bottom")
+  
+  expect(pinnedRows).toHaveLength(2)
+  
+  const lastPinnedRow = pinnedRows[0]
+  expect(lastPinnedRow).toHaveStyle("position: sticky")
+  expect(lastPinnedRow).toHaveStyle("background-color: white")
+})
+
 test("columnStyling.headerAlignment aligns header as expected", () => {
   const styledColumnDefs = [
     {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_both.jsx

@@ -0,0 +1,57 @@
+import React, { useState } from "react"
+import AdvancedTable from '../_advanced_table'
+import MOCK_DATA_WITH_ID from "./advanced_table_mock_data_with_id.json"
+
+const AdvancedTableRowPinningBoth = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ]
+
+  const [pinnedRows, setPinnedRows] = useState({top: ["8"], bottom: ["1"]})
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          maxHeight="xs"
+          pinnedRows={{value: pinnedRows, onChange: setPinnedRows}}
+          tableData={MOCK_DATA_WITH_ID}
+          tableProps={{sticky: true}}
+          {...props}
+      >
+        <AdvancedTable.Header enableSorting />
+        <AdvancedTable.Body />
+      </AdvancedTable>
+    </div>
+  )
+}
+
+export default AdvancedTableRowPinningBoth

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_both_react.md

@@ -0,0 +1 @@
+This code snippet demonstrates `pinnedRows` taking an array of row ids to both the `top` and `bottom` properties.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_bottom.jsx

@@ -0,0 +1,57 @@
+import React, { useState } from "react"
+import AdvancedTable from '../_advanced_table'
+import MOCK_DATA_WITH_ID from "./advanced_table_mock_data_with_id.json"
+
+const AdvancedTableRowPinningBottom = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ]
+
+  const [pinnedRows, setPinnedRows] = useState({bottom: ["8"]})
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          maxHeight="xs"
+          pinnedRows={{value: pinnedRows, onChange: setPinnedRows}}
+          tableData={MOCK_DATA_WITH_ID}
+          tableProps={{sticky: true}}
+          {...props}
+      >
+        <AdvancedTable.Header enableSorting />
+        <AdvancedTable.Body />
+      </AdvancedTable>
+    </div>
+  )
+}
+
+export default AdvancedTableRowPinningBottom

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_bottom_react.md

@@ -0,0 +1 @@
+This code snippet demonstrates `pinnedRows` taking an array of row ids to the `bottom` property.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_react.md

@@ -1,7 +1,7 @@
-Use the `pinnedRows` prop to pin specific rows to the top of an Advanced Table. Pinned rows will remain at the top when scrolling through table data and will not change position if sorting is used.
+Use the `pinnedRows` prop to pin specific rows to the top or bottom of an Advanced Table. Pinned rows will remain at the top or bottom when scrolling through table data and will not change position if sorting is used.
 
 **NOTE:** 
 - Sticky header required: Pinned rows must be used with `sticky: true` via `tableProps` (works with both responsive and non-responsive tables)
 - Row ids required: Each object within the `tableData` Array must contain a unique id in order to attach an id to all Rows for this to function. 
-- `pinnedRows` takes an array of row ids to the `top` property as shown in the code snippet below. 
+- `pinnedRows` takes an array of row ids to the `top` or `bottom` property, or both. `top` is shown in the code snippet below.
 - For expandable rows, use the parent id in `pinnedRows`, all its children will automatically be pinned with it. If id for a child is passed in without parent being pinned, nothing will be pinned. 

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

@@ -67,7 +67,9 @@ examples:
   - advanced_table_column_headers_custom_cell: Multi-Header Columns with Custom Cells
   - advanced_table_column_headers_vertical_border: Multi-Header Columns with Vertical Borders
   - advanced_table_no_subrows: Table with No Subrows or Expansion
-  - advanced_table_pinned_rows: Pinned Rows
+  - advanced_table_pinned_rows: Pinned Rows (Top)
+  - advanced_table_pinned_rows_bottom: Pinned Rows (Bottom)
+  - advanced_table_pinned_rows_both: Pinned Rows (Both)
   - advanced_table_selectable_rows: Selectable Rows
   - advanced_table_selectable_rows_no_subrows_react: Selectable Rows (No Subrows)
   - advanced_table_selectable_rows_actions: Selectable Rows (With Actions)
@@ -89,5 +91,4 @@ examples:
   - advanced_table_column_styling_background_multi: Column Styling Background Color with Multiple Headers
   - advanced_table_padding_control: Padding Control using Column Styling
   - advanced_table_column_border_color: Column Group Border Color
-  - advanced_table_fullscreen: Fullscreen
   - advanced_table_infinite_scroll: Infinite Scroll

data/app/pb_kits/playbook/pb_advanced_table/docs/index.js

@@ -52,4 +52,6 @@ export { default as AdvancedTableColumnStylingBackground } from './_advanced_tab
 export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'
 export { default as AdvancedTableColumnStylingBackgroundCustom } from './_advanced_table_column_styling_background_custom.jsx'
 export { default as AdvancedTableCascadeCollapse } from './_advanced_table_cascade_collapse.jsx'
-export { default as AdvancedTableSortParentOnly } from './_advanced_table_sort_parent_only.jsx'
+export { default as AdvancedTableSortParentOnly } from './_advanced_table_sort_parent_only.jsx'
+export { default as AdvancedTablePinnedRowsBottom } from './_advanced_table_pinned_rows_bottom.jsx'
+export { default as AdvancedTablePinnedRowsBoth } from './_advanced_table_pinned_rows_both.jsx'

data/app/pb_kits/playbook/pb_dialog/_dialog.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-handler-names */
 /* eslint-disable react/no-multi-comp */
 
-import React, { useState, useCallback } from "react";
+import React, { useState, useCallback, useContext } from "react";
 import classnames from "classnames";
 import Modal from "react-modal";
 
@@ -17,7 +17,13 @@ import Flex from "../pb_flex/_flex";
 import IconCircle from "../pb_icon_circle/_icon_circle";
 import Title from "../pb_title/_title";
 import { DialogContext, DialogContextValue } from "./_dialog_context";
-import { PB_FLOATING_OWNER_ATTR } from "../utilities/floatingPortalHosts";
+import {
+  PB_FLOATING_OWNER_ATTR,
+  PB_MODAL_ABOVE_FULLSCREEN_Z_INDEX,
+  isPortaledFloatingKitInteraction,
+  resolveFullscreenOverlayForElement,
+} from "../utilities/floatingPortalHosts";
+import { FullScreenContext } from "../pb_full_screen/context/_full_screen_context";
 
 type DialogProps = {
   aria?: { [key: string]: string };
@@ -95,6 +101,15 @@ const Dialog = (props: DialogProps): React.ReactElement => {
 
   const dynamicInlineProps = globalInlineProps(props); 
 
+  const { active: isInsideFullscreen } = useContext(FullScreenContext);
+
+  const modalStyles = {
+    overlay: isInsideFullscreen
+      ? { zIndex: PB_MODAL_ABOVE_FULLSCREEN_Z_INDEX }
+      : undefined,
+    content: dynamicInlineProps,
+  };
+
   const wrapperClasses = classnames(
     buildCss("pb_dialog_wrapper"),
   );
@@ -194,7 +209,7 @@ const Dialog = (props: DialogProps): React.ReactElement => {
             overlayClassName={overlayClassNames}
             portalClassName={portalClassName}
             shouldCloseOnOverlayClick={shouldCloseOnOverlayClick && !loading}
-            style={{ content: dynamicInlineProps }}
+            style={modalStyles}
         >
           <div className="pb_dialog_scroll_region">
             {title && !status ? <Dialog.Header closeable={closeable}>{title}</Dialog.Header> : null}

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_remove_replace.html.erb

@@ -0,0 +1,66 @@
+<div id="file-upload-remove-replace">
+  <%= pb_rails("list", props: { id: "selected-files-list", margin_bottom: "sm" }) %>
+
+  <%= pb_rails("file_upload", props: {
+    id: "remove_replace",
+    input_options: { multiple: true },
+  }) %>
+</div>
+
+<template id="file-list-item-template">
+  <%= pb_rails("list/item") do %>
+    <%= pb_rails("flex", props: { align: "center", justify: "between", width: "100%" }) do %>
+      <%= pb_rails("body", props: { data: { file_name: true } }) %>
+      <%= pb_rails("circle_icon_button", props: {
+        icon: "times",
+        variant: "secondary",
+        input_options: { classname: "remove-file-button" },
+      }) %>
+    <% end %>
+  <% end %>
+</template>
+
+<%= javascript_tag defer: "defer" do %>
+  document.addEventListener("DOMContentLoaded", function () {
+    const fileInput = document.getElementById("upload-remove_replace")
+    const list = document.getElementById("selected-files-list")
+    const template = document.getElementById("file-list-item-template")
+    let files = []
+
+    if (!fileInput || !list || !template) return
+
+    function syncInput() {
+      const dataTransfer = new DataTransfer()
+      files.forEach((file) => dataTransfer.items.add(file))
+      fileInput.files = dataTransfer.files
+    }
+
+    function render() {
+      list.innerHTML = ""
+
+      files.forEach((file, index) => {
+        const clone = template.content.cloneNode(true)
+        const nameElement = clone.querySelector("[data-file-name]")
+        const removeButton = clone.querySelector(".remove-file-button")
+
+        nameElement.textContent = file.name
+        removeButton.addEventListener("click", function (event) {
+          event.preventDefault()
+          event.stopPropagation()
+          files = files.filter((_, fileIndex) => fileIndex !== index)
+          syncInput()
+          render()
+        })
+
+        list.appendChild(clone)
+      })
+    }
+
+    fileInput.addEventListener("change", function () {
+      const newFiles = Array.from(fileInput.files)
+      files = [...files, ...newFiles]
+      syncInput()
+      render()
+    })
+  })
+<% end %>

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_remove_replace.jsx

@@ -0,0 +1,53 @@
+
+import React, { useState } from 'react'
+
+import Body from '../../pb_body/_body'
+import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
+import FileUpload from '../../pb_file_upload/_file_upload'
+import Flex from '../../pb_flex/_flex'
+import List from '../../pb_list/_list'
+import ListItem from '../../pb_list/_list_item'
+
+const FileUploadRemoveReplace = (props) => {
+  const [filesToUpload, setFilesToUpload] = useState([])
+
+  const handleOnFilesAccepted = (files) => {
+    setFilesToUpload([...filesToUpload, ...files])
+  }
+
+  const handleRemoveFile = (index) => {
+    setFilesToUpload(filesToUpload.filter((_, fileIndex) => fileIndex !== index))
+  }
+
+  return (
+    <div>
+      {filesToUpload.length > 0 && (
+        <List marginBottom="sm">
+          {filesToUpload.map((file, index) => (
+            <ListItem key={`${file.name}-${index}`}>
+              <Flex
+                  align="center"
+                  justify="between"
+                  width="100%"
+              >
+                <Body text={file.name} />
+                <CircleIconButton
+                    aria={{ label: `Remove ${file.name}` }}
+                    icon="times"
+                    onClick={() => handleRemoveFile(index)}
+                    variant="secondary"
+                />
+              </Flex>
+            </ListItem>
+          ))}
+        </List>
+      )}
+      <FileUpload
+          onFilesAccepted={handleOnFilesAccepted}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default FileUploadRemoveReplace

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_remove_replace.md

@@ -0,0 +1,5 @@
+The File Upload kit does not include built-in remove or replace behavior. Manage selected files in application state and compose the kit with other Playbook components.
+
+**Remove** — Track accepted files in state and filter out the file to remove. In React, pair `List` with `CircleIconButton`. In Rails, listen for `change` on the file input, keep files in a JavaScript array, and use `DataTransfer` to sync the input when a file is removed.
+
+**Replace** — Selecting a new file on the native Rails input replaces the current selection. For single-file React workflows, set state to the newly accepted files instead of appending: `setFilesToUpload(files)`.

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

@@ -4,6 +4,7 @@ examples:
   - file_upload_default: File Upload
   - file_upload_custom: Custom
   - file_upload_error: Error
+  - file_upload_remove_replace: Remove and Replace
 
   react:
   - file_upload_default: Default List of files to upload
@@ -11,4 +12,5 @@ examples:
   - file_upload_custom_message: Add a custom message
   - file_upload_custom_description: Add your one accepted files description
   - file_upload_max_size: Set a file size limit
-  - file_upload_error: Error
+  - file_upload_error: Error
+  - file_upload_remove_replace: Remove and Replace

data/app/pb_kits/playbook/pb_file_upload/docs/index.js

@@ -4,3 +4,4 @@ export { default as FileUploadCustomMessage } from './_file_upload_custom_messag
 export { default as FileUploadCustomDescription } from './_file_upload_custom_description.jsx'
 export { default as FileUploadMaxSize } from './_file_upload_max_size.jsx'
 export { default as FileUploadError } from './_file_upload_error.jsx'
+export { default as FileUploadRemoveReplace } from './_file_upload_remove_replace.jsx'

data/app/pb_kits/playbook/pb_full_screen/_full_screen.scss

@@ -26,6 +26,8 @@
 .fullscreen-overlay {
   background-color: $bg_light;
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
   height: 100vh;
   left: 0;
   overflow: auto;
@@ -55,6 +57,19 @@
 .fullscreen-content-sticky {
   height: calc(100vh - 44px);
 }
+
+.pb_fullscreen_floating_root {
+  flex: 0 0 auto;
+  min-height: 0;
+  pointer-events: none;
+  position: relative;
+  z-index: 1;
+}
+
+.pb_fullscreen_floating_root > * {
+  pointer-events: auto;
+}
+
 // Dark mode support
 .dark {
   .pb_full_screen_view {

data/app/pb_kits/playbook/pb_full_screen/_full_screen.tsx

@@ -4,6 +4,7 @@ import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../uti
 import { globalProps } from '../utilities/globalProps'
 
 import useFullscreen from './useFullScreen'
+import { FullScreenContext } from './context/_full_screen_context'
 
 import Flex from '../pb_flex/_flex'
 import Icon from '../pb_icon/_icon'
@@ -155,15 +156,29 @@ const FullScreenView = (props: FullScreenViewProps) => {
   const renderContent = () => {
     if (isFullscreen) {
       return (
-        <div className="fullscreen-overlay">
-          {defaultHeader}
-          <div className={contentClasses}>
-            {children}
+        <FullScreenContext.Provider value={{ active: true }}>
+          <div
+              className="fullscreen-overlay"
+              data-pb-fullscreen-overlay="true"
+          >
+            {defaultHeader}
+            <div className={contentClasses}>
+              {children}
+            </div>
+            <div
+                aria-hidden="true"
+                className="pb_fullscreen_floating_root"
+                data-pb-dialog-floating-root="true"
+            />
           </div>
-        </div>
+        </FullScreenContext.Provider>
       )
     }
-    return children
+    return (
+      <FullScreenContext.Provider value={{ active: false }}>
+        {children}
+      </FullScreenContext.Provider>
+    )
   }
 
   return (

data/app/pb_kits/playbook/pb_full_screen/context/_full_screen_context.tsx

@@ -0,0 +1,9 @@
+import React from "react"
+
+export type FullScreenContextValue = {
+  active: boolean
+}
+
+export const FullScreenContext = React.createContext<FullScreenContextValue>({
+  active: false,
+})

data/app/pb_kits/playbook/pb_full_screen/docs/_full_screen_table_and_filter.jsx

@@ -90,7 +90,7 @@ const FullScreenTableAndFilter = (props) => {
                 double
                 maxHeight="50vh"
                 minWidth="xs"
-                popoverProps={{ width: "350px", appendTo: ".fullscreen-overlay" }}
+                popoverProps={{ width: "350px" }}
                 results={50}
                 sortOptions={{
                   territory_id: "Territory ID",

data/app/pb_kits/playbook/pb_full_screen/docs/_full_screen_table_and_filter.md

@@ -1 +1 @@
-Full Screen can host composed workflows such as a filter paired with a data table. For popovers inside the overlay, set the popover append target to `.fullscreen-overlay` so menus render within the fullscreen layer.
+Full Screen can host composed workflows such as a filter paired with a data table. Filter and sort popovers automatically append to the fullscreen overlay; dropdown menus inside them portal above the overlay via the shared floating UI stack.

data/app/pb_kits/playbook/pb_full_screen/full_screen.test.jsx

@@ -115,6 +115,23 @@ test('headerTextStyling can render header text as body text', () => {
   expect(screen.getByText('Fullscreen Body')).toHaveClass('pb_body_kit')
 })
 
+test('fullscreen overlay exposes a floating root for portaled input menus', () => {
+  render(
+    <FullScreen
+        headerText="Fullscreen"
+        isFullscreen
+    >
+      <div>Content</div>
+    </FullScreen>
+  )
+
+  const overlay = document.querySelector('.fullscreen-overlay')
+  expect(overlay).toBeInTheDocument()
+  expect(
+    overlay?.querySelector('[data-pb-dialog-floating-root].pb_fullscreen_floating_root')
+  ).toBeInTheDocument()
+})
+
 test('isFullscreen opens fullscreen in controlled mode', () => {
   render(
     <FullScreen