playbook_ui_docs 16.11.0.pre.rc.1 → 16.11.0.pre.rc.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3f609213cca04d26639951a31e33caaa37196ee606be1a7b4d6f236d528f7f57
-  data.tar.gz: 5a4f99a56d0675389b50bb56e957b7e3f14457e962d5ab419a7f357245584f4f
+  metadata.gz: 9aeba2a5a2194029a406138e8d79cdfc9e0537d1cb8b0dbe633e539e7664c963
+  data.tar.gz: 2f977b71ba7e2d799e9912caed0e3d728170d2c9728435695d60f884fc1feaec
 SHA512:
-  metadata.gz: f6120c03f348ee94b493478738c396af098c13cb67ca11414d5316953e8e6009c4abc50cc521823f1ee62e55dd4362dad9bf5e50acc93ff680dca440c760a64a
-  data.tar.gz: 2d8ae9ec419707fe1d6502aed0b5b9f0bf97977a6f0f3d99a6969789b724661e28b29f82b0cf43e031fbe2211182ec473ab2d151b18442554014cbc8b01db4cb
+  metadata.gz: e490dac24f0130b452f93c6483700b91a731dc3b4d37337bb86f6e6b2c3963698cbe57591901483ab0ddbca638e06304eaf3f4f307648a1d87cbb8cb032e2bb5
+  data.tar.gz: e282ad05fc6b15f02339eb91772f1b16da21617ceeba44d2c30eb7f3cc505f0923895a7a209d6e35e038831ebc32dd037fb310cb0ec6937463ce1a230a6b21ef

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_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/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_textarea/docs/_textarea_error.html.erb

@@ -1,5 +1,5 @@
 <%= pb_rails("textarea", props: {
-  error: raw(pb_rails("icon", props: { icon: "warning" }) + " This field has an error!"),
+  error: raw("#{pb_rails('icon', props: { icon: 'warning' })} This field has an error!"),
   label: "Label",
   rows: 4
 }) %>

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 16.11.0.pre.rc.1
+  version: 16.11.0.pre.rc.2
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-07-01 00:00:00.000000000 Z
+date: 2026-07-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -129,6 +129,10 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows.jsx
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_both.jsx
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_both_react.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_bottom.jsx
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_bottom_react.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_rails.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_rails.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_react.md
@@ -1092,6 +1096,9 @@ files:
 - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_error.html.erb
 - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_error.jsx
 - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_max_size.jsx
+- app/pb_kits/playbook/pb_file_upload/docs/_file_upload_remove_replace.html.erb
+- app/pb_kits/playbook/pb_file_upload/docs/_file_upload_remove_replace.jsx
+- app/pb_kits/playbook/pb_file_upload/docs/_file_upload_remove_replace.md
 - app/pb_kits/playbook/pb_file_upload/docs/_playground.json
 - app/pb_kits/playbook/pb_file_upload/docs/_playground.overrides.json
 - app/pb_kits/playbook/pb_file_upload/docs/example.yml