playbook_ui_docs 16.9.0.pre.alpha.playgroundsmore17219 → 16.9.0.pre.alpha.touchdragmulticontainers17268

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e7628ce4f621fc87039b362062a83883d9c3bdf76c2db5623478a97bb88bc3a2
-  data.tar.gz: 96cd08c752b7c8553a7c494b6c73bd182472eaf227f703ce79e9e07e3da4f05e
+  metadata.gz: e2c32f971081626554bec6d9f40a909665aa951c104366ff197cf1fd0df49f93
+  data.tar.gz: b1f8a7023fe018eff0b3e5fb37809fe1d5aa5e982fb9c51adede24a189d98f72
 SHA512:
-  metadata.gz: b3699b83e14edcf2b743b2d527124d744811cb6d6f55a89bcb1538ca73e38705fd22a3394eb208881c4edd929bbd8ee1ab5a9ee322d00144c8cf88d0f5a7600d
-  data.tar.gz: a0ad05f12115696be6dae32c355dc4961962e137753a7400b81acd54a33ce5fcde7f476545d31f40ebcb1288374d79c4b7ad7fe0aee91c690c3ee83d43fa4e38
+  metadata.gz: 8520420a311da432758df9ce8078b71c23305564b4473e3606a0c4b2bd0d4ea3dcb02334ad96c5e04ecd8e39f5c8e5c617c40e565987bf7a68120d1457c36fdd
+  data.tar.gz: 5cb487bb21001a5cc580d95a046fd98e46d1ff4136ef6c62cadca4552f5c4b5773ca4bdad2d83d40a28a0b7681e8447d768d3d83cb9bde5b592d9903d0cc8c50

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_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.jsx

@@ -0,0 +1,81 @@
+import React, { useState } from "react";
+
+import Body from "../../pb_body/_body";
+import Caption from "../../pb_caption/_caption";
+import Draggable from "../../pb_draggable/_draggable";
+import { DraggableProvider } from "../../pb_draggable/context";
+import Flex from "../../pb_flex/_flex";
+import FlexItem from "../../pb_flex/_flex_item";
+
+const 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" },
+    ],
+  },
+];
+
+const initialListItems = lists.reduce((acc, list) => {
+  acc[list.title] = list.items;
+  return acc;
+}, {});
+
+const DraggableIndependentContainers = (props) => {
+  const [listItems, setListItems] = useState(initialListItems);
+
+  const handleReorder = (title, items) => {
+    setListItems((currentItems) => ({ ...currentItems, [title]: items }));
+  };
+
+  return (
+    <Flex gap="md"
+        justifyContent="center"
+        wrap
+        {...props}
+    >
+      {lists.map((list) => (
+        <FlexItem fixedSize="220px"
+            key={list.title}
+        >
+          <Caption marginBottom="xs"
+              text={list.title}
+              textAlign="center"
+              {...props}
+          />
+          <DraggableProvider
+              initialItems={listItems[list.title]}
+              onReorder={(items) => handleReorder(list.title, items)}
+          >
+            <Draggable.Container padding="sm"
+                {...props}
+            >
+              {listItems[list.title].map(({ id, name }) => (
+                <Draggable.Item dragId={id}
+                    key={id}
+                    marginBottom="xs"
+                >
+                  <Body text={name}
+                      {...props}
+                  />
+                </Draggable.Item>
+              ))}
+            </Draggable.Container>
+          </DraggableProvider>
+        </FlexItem>
+      ))}
+    </Flex>
+  );
+};
+
+export default DraggableIndependentContainers;

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_independent_containers_react.md

@@ -0,0 +1,8 @@
+Use a **separate** `DraggableProvider` for each list when items should reorder within their own column only.
+
+Each provider 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** `DraggableProvider` with multiple `Draggable.Container` components 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,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** `DraggableProvider` with multiple `Draggable.Container` components 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/example.yml

@@ -4,6 +4,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
@@ -17,6 +18,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_draggable/docs/index.js

@@ -1,5 +1,6 @@
 export { default as DraggableDefault } from './_draggable_default.jsx'
 export { default as DraggableWithCards } from './_draggable_with_cards.jsx'
+export { default as DraggableIndependentContainers } from './_draggable_independent_containers.jsx'
 export { default as DraggableWithList } from './_draggable_with_list.jsx'
 export { default as DraggableWithSelectableList } from './_draggable_with_selectable_list.jsx'
 export { default as DraggableMultipleContainers } from './_draggable_multiple_containers.jsx'

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 16.9.0.pre.alpha.playgroundsmore17219
+  version: 16.9.0.pre.alpha.touchdragmulticontainers17268
 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-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -910,6 +910,10 @@ 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.jsx
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_independent_containers_rails.md
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_independent_containers_react.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