playbook_ui_docs 16.9.0.pre.alpha.play3006saftleyremoveSVGconsoleerror17213 → 16.9.0.pre.alpha.play3006saftleyremoveSVGconsoleerror17306

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 24da45a4a0f4fa9fd45e7737a6e8ffd68daad95448646ac183d1c01290cce722
-  data.tar.gz: 7272620b38f8a3245f6f6430765ff691e61f8745a99e8bf556bb2db1672dbe58
+  metadata.gz: ebcdd1ab34426dc1d9eafdeec0f5cec8aab02e43206bb1f862e8839bed61e777
+  data.tar.gz: 8f841726c045bf2e8fa375ad13c6ef2c1fd5ebf7594503881322b58c29a6bacd
 SHA512:
-  metadata.gz: d27701fdd1cfe613acb8d4079a74cb5a4202846ea05420ea1b4ca11b310e609e5f57f0763b0f543e916b8569c72c87537d8f4f98785b84abf1de624e5963c6f4
-  data.tar.gz: 78d7542a2e66cd469f659afc62c18c0407c9aeea90def2e99457a6feedbe6669afaa88627d327d141ab9cefe469072cf86a75529da38eb75add99d01dce264c2
+  metadata.gz: e8ab8f4e5695fdf838e8837bf6e63a5f9579fa5ce373fa2be15335ae950efa85522904638dfd1f502a6fe848847ca0e533b0fd54d2d80e4b90fe66bc966b53bb
+  data.tar.gz: 446f0f4dcf7ff69e83338d0be8640447ae70d2ca61dcdd502ba272ba92a949b431939176d17fc1892f7fe5b2f8b38e6eb3f899fbbe91c16edb0675f253c9a6ef

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

@@ -1,6 +1,6 @@
 import React from "react"
 import AdvancedTable from '../_advanced_table'
-import MOCK_DATA from "./advanced_table_mock_data_with_id.json"
+import MOCK_DATA_WITH_ID from "./advanced_table_mock_data_with_id.json"
 import colors from '../../tokens/exports/_colors.module.scss'
 
 
@@ -55,7 +55,7 @@ const rowStyling = [
       <AdvancedTable
           columnDefinitions={columnDefinitions}
           rowStyling={rowStyling}
-          tableData={MOCK_DATA}
+          tableData={MOCK_DATA_WITH_ID}
           {...props}
       />
     </div>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.html.erb

@@ -1,47 +1,39 @@
 <% column_definitions = [
-    {
-      accessor: "year",
-      label: "Year",
-    },
-    {
-      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",
-    }
-] %>
-
-<% table_data = 15.times.map do |index|
   {
-    year: (2020 + index).to_s,
-    id: (2020 + index).to_s,
-    newEnrollments: (20 + index).to_s,
-    scheduledMeetings: (10 + index).to_s,
-    attendanceRate: "#{50 + index}%",
-    completedClasses: (3 + index).to_s,
-    classCompletionRate: "#{30 + index}%",
-    graduatedStudents: (19 + index).to_s,
-  }
-end %>
+    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",
+  },
+] %>
 
-<div style="max-height: 320px; overflow-y: auto;">
-  <%= pb_rails("advanced_table", props: { id: "table_props_sticky_table", table_data: table_data, column_definitions: column_definitions, table_props: { sticky: true }}) %>
-</div>
+<%= pb_rails("advanced_table", props: {
+  id: "table_props_sticky_table",
+  table_data: @table_data,
+  column_definitions: column_definitions,
+  max_height: "xs",
+  table_props: { sticky: true },
+}) %>

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

@@ -1,21 +1,13 @@
 import React from "react"
 import AdvancedTable from '../../pb_advanced_table/_advanced_table'
-
-const tableData = Array.from({ length: 15 }, (_, index) => ({
-  year: String(2020 + index),
-  newEnrollments: String(20 + index),
-  scheduledMeetings: String(10 + index),
-  attendanceRate: `${50 + index}%`,
-  completedClasses: String(3 + index),
-  classCompletionRate: `${30 + index}%`,
-  graduatedStudents: String(19 + index),
-}))
+import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableTablePropsStickyHeader = (props) => {
   const columnDefinitions = [
     {
       accessor: "year",
       label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
     },
     {
       accessor: "newEnrollments",
@@ -44,18 +36,17 @@ const AdvancedTableTablePropsStickyHeader = (props) => {
   ]
 
   const tableProps = {
-    sticky: true
+    sticky: true,
   }
 
   return (
-    <div style={{ maxHeight: "320px", overflowY: "auto" }}>
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          tableData={tableData}
-          tableProps={tableProps}
-          {...props}
-      />
-    </div>
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        maxHeight="xs"
+        tableData={MOCK_DATA}
+        tableProps={tableProps}
+        {...props}
+    />
   )
 }
 

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

@@ -2,10 +2,6 @@ Create a sticky header that works for responsive Advanced Tables by setting `sti
 
 **NOTE**: This behavior requires a `max_height` to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
 
-Scroll inside the table preview to see the header stick.
-
-This example builds flat table data inline for the docs preview. For typical `table_data` setup, see [Default (Required Props)](/kits/advanced_table/default/rails#advanced_table_beta).
-
 Expand the table above to see this in action.
 
 A sticky header on a nonresponsive table is demonstrated in the ["Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table#sticky-header) doc example above.

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

@@ -1,9 +1,7 @@
-Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `tableProps` and wrapping the table in a scroll container (or using `maxHeight`).
+Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `tableProps` and giving the AdvancedTable a `maxHeight` using our [Max Height](https://playbook.powerapp.cloud/global_props/max_height) global prop. 
 
-**NOTE**: The header is sticky within the table scroll area. The live example uses flat rows so you can scroll inside the preview without expanding subrows.
+**NOTE**: This behavior requires a `maxHeight` to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
 
-This example builds flat table data inline for the docs preview. For typical `tableData` setup, see [Default (Required Props)](/kits/advanced_table/default/react#advanced_table_default).
-
-Expand the table above to see responsive behavior in action.
+Expand the table above to see this in action.
 
 A sticky header on a nonresponsive table is demonstrated in the ["Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table/react#sticky-header) doc example above.

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

@@ -233,11 +233,6 @@
         "customSort": true
       }
     },
-    "fullScreenControl": {
-      "requires": {
-        "allowFullScreen": true
-      }
-    },
     "enableSortingRemoval": {
       "requires": {
         "enableSorting": true
@@ -2954,9 +2949,7 @@
   },
   "hiddenProps": [
     "sortControl",
-    "fullScreenControl",
     "expandedControl",
-    "allowFullScreen",
     "pagination",
     "paginationProps"
   ],

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

@@ -73,9 +73,7 @@
   },
   "hiddenProps": [
     "sortControl",
-    "fullScreenControl",
     "expandedControl",
-    "allowFullScreen",
     "pagination",
     "paginationProps"
   ],
@@ -291,11 +289,6 @@
         "customSort": true
       }
     },
-    "fullScreenControl": {
-      "requires": {
-        "allowFullScreen": true
-      }
-    },
     "enableSortingRemoval": {
       "requires": {
         "enableSorting": true

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

@@ -23,7 +23,6 @@ export { default as AdvancedTableTablePropsStickyHeader } from './_advanced_tabl
 export { default as AdvancedTableColumnHeadersCustomCell } from './_advanced_table_column_headers_custom_cell.jsx'
 export { default as AdvancedTableColumnHeadersVerticalBorder } from './_advanced_table_column_headers_vertical_border.jsx'
 export { default as AdvancedTableInlineEditing } from './_advanced_table_inline_editing.jsx'
-export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen.jsx'
 export { default as AdvancedTableStickyColumns } from './_advanced_table_sticky_columns.jsx'
 export { default as AdvancedTableStickyHeader } from './_advanced_table_sticky_header.jsx'
 export { default as AdvancedTableStickyColumnsAndHeader } from './_advanced_table_sticky_columns_and_header.jsx'

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_independent_containers.html.erb

@@ -0,0 +1,35 @@
+<% lists = [
+  {
+    title: "Morning Crew",
+    items: [
+      { id: "m1", name: "Alice Chen" },
+      { id: "m2", name: "Ben Ortiz" },
+      { id: "m3", name: "Cara Kim" },
+    ],
+  },
+  {
+    title: "Afternoon Crew",
+    items: [
+      { id: "a1", name: "Diana Patel" },
+      { id: "a2", name: "Evan Brooks" },
+      { id: "a3", name: "Fiona Lee" },
+    ],
+  },
+] %>
+
+<%= pb_rails("flex", props: { gap: "md", justify_content: "center", wrap: true }) do %>
+  <% lists.each do |list| %>
+    <%= pb_rails("flex/flex_item", props: { fixed_size: "220px" }) do %>
+      <%= pb_rails("caption", props: { text: list[:title], text_align: "center", margin_bottom: "xs" }) %>
+      <%= pb_rails("draggable", props: { initial_items: list[:items] }) do %>
+        <%= pb_rails("draggable/draggable_container", props: { padding: "sm" }) do %>
+          <% list[:items].each do |item| %>
+            <%= pb_rails("draggable/draggable_item", props: { drag_id: item[:id], margin_bottom: "xs" }) do %>
+              <%= pb_rails("body", props: { text: item[:name] }) %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_independent_containers_rails.md

@@ -0,0 +1,8 @@
+Use a **separate** `draggable` kit for each list when items should reorder within their own column only.
+
+Each instance creates its own drag boundary. Items stay inside that list on desktop and touch — they cannot be dropped into a neighboring list.
+
+This is different from [Dragging Across Multiple Containers](#draggable_multiple_containers), which uses **one** `draggable` wrapping multiple `draggable/draggable_container` kits so items can move between columns.
+
+On touch devices, drag from the grip handle. Swiping outside the handle scrolls as usual.
+

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.md

@@ -1 +1,3 @@
-The Draggable kit can also be used to achieve more complex, multiple container functionality as shown here. This complex usage requires the full subcomponent structure.
+The Draggable kit can also be used to achieve more complex, multiple container functionality as shown here. This complex usage requires the full subcomponent structure — **one** `draggable` wrapping multiple `draggable/draggable_container` kits so items can move between columns.
+
+For lists that should stay separate, see [Independent Draggable Containers](#draggable_independent_containers).

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_react.md

@@ -1 +1 @@
-The Draggable kit can also be used to achieve more complex, multiple container functionality as shown here. This complex usage requires the full subcomponent structure.
+The Draggable kit can also be used to achieve more complex, multiple container functionality as shown here. This complex usage requires the full subcomponent structure.

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

@@ -17,6 +17,7 @@ examples:
   - draggable_with_list: Draggable with List Kit
   - draggable_with_selectable_list: Draggable with SelectableList Kit
   - draggable_with_cards: Draggable with Cards
+  - draggable_independent_containers: Independent Draggable Containers
   - draggable_with_table: Draggable with Table
   - draggable_drop_zones: Draggable Drop Zones
   - draggable_drop_zones_colors: Draggable Drop Zones Colors

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

@@ -117,6 +117,13 @@
     "isCollapsed",
     "onCollapse"
   ],
+  "requiredCodeProps": [
+    "filters",
+    "results",
+    "sortOptions",
+    "sortValue",
+    "onSortChange"
+  ],
   "presets": [
     {
       "name": "Single Filter",

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 16.9.0.pre.alpha.play3006saftleyremoveSVGconsoleerror17213
+  version: 16.9.0.pre.alpha.play3006saftleyremoveSVGconsoleerror17306
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-06-22 00:00:00.000000000 Z
+date: 2026-06-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -100,8 +100,6 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_grouped_headers_composition.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_grouped_headers_composition.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_infinite_scroll.jsx
@@ -910,6 +908,8 @@ files:
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.jsx
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners_rails.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners_react.md
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_independent_containers.html.erb
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_independent_containers_rails.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.html.erb
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_dropzone.jsx

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

@@ -1,92 +0,0 @@
-import React, { useState } from "react"
-import AdvancedTable from '../_advanced_table'
-import Flex from '../../pb_flex/_flex'
-import Button from '../../pb_button/_button'
-import MOCK_DATA from "./advanced_table_mock_data.json"
-import PAGINATION_MOCK_DATA from "./advanced_table_pagination_mock_data.json"
-
-const AdvancedTableFullscreen = (props) => {
-  const [fullscreenToggleSmall, setFullscreenToggleSmall] = useState(null)
-  const [fullscreenToggleLarge, setFullscreenToggleLarge] = useState(null)
-
-  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 tableProps = {
-    sticky: true
-  }
-
-  return (
-    <div>
-      <Flex justify="end">
-          <Button
-              marginBottom="sm"
-              onClick={() => fullscreenToggleSmall?.()}
-              text="Fullscreen Small Table"
-              variant="secondary"
-          />
-      </Flex>
-      <AdvancedTable
-          allowFullScreen
-          columnDefinitions={columnDefinitions}
-          fullScreenControl={({ toggleFullscreen }) => setFullscreenToggleSmall(() => toggleFullscreen)}
-          tableData={MOCK_DATA}
-          {...props}
-      >
-          <AdvancedTable.Header enableSorting />
-          <AdvancedTable.Body />
-      </AdvancedTable>
-      <Flex justify="end">
-          <Button
-              marginY="sm"
-              onClick={() => fullscreenToggleLarge?.()}
-              text="Fullscreen Large Table"
-              variant="secondary"
-          />
-      </Flex>
-      <AdvancedTable
-          allowFullScreen
-          columnDefinitions={columnDefinitions}
-          fullScreenControl={({ toggleFullscreen }) => setFullscreenToggleLarge(() => toggleFullscreen)}
-          responsive="none"
-          tableData={PAGINATION_MOCK_DATA}
-          tableProps={tableProps}
-          {...props}
-      >
-          <AdvancedTable.Header enableSorting />
-          <AdvancedTable.Body />
-      </AdvancedTable>
-    </div>
-  )
-}
-
-export default AdvancedTableFullscreen

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

@@ -1,3 +0,0 @@
-Trigger Fullscreen mode with the `allowFullScreen`and `fullScreenControl` props.  `allowFullScreen` is a boolean that enables Fullscreen functionality for an Advanced Table. `fullScreenControl` is a callback function that receives an object containing the table's internal `toggleFullscreen` function, allowing you to store and trigger Fullscreen from the parent component. An external trigger (like a button) must be used to activate Fullscreen mode.
-
-Exit Fullscreen mode by clicking the minimize top-right-corner icon or by pressing the "Escape" keyboard key.