playbook_ui 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

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 } from "react";
+import React, { useState, useCallback } from "react";
 import classnames from "classnames";
 import Modal from "react-modal";
 
@@ -16,7 +16,8 @@ import DialogBody from "./child_kits/_dialog_body";
 import Flex from "../pb_flex/_flex";
 import IconCircle from "../pb_icon_circle/_icon_circle";
 import Title from "../pb_title/_title";
-import { DialogContext } from "./_dialog_context";
+import { DialogContext, DialogContextValue } from "./_dialog_context";
+import { PB_FLOATING_OWNER_ATTR } from "../utilities/floatingPortalHosts";
 
 type DialogProps = {
   aria?: { [key: string]: string };
@@ -101,12 +102,20 @@ const Dialog = (props: DialogProps): React.ReactElement => {
   const [triggerOpened, setTriggerOpened] = useState(false),
     modalIsOpened = trigger ? triggerOpened : opened;
 
-  const api = {
+  const [selectMenuPortalTarget, setSelectMenuPortalTarget] =
+    useState<HTMLElement | null>(null);
+
+  const floatingRootRefCallback = useCallback((node: HTMLElement | null) => {
+    setSelectMenuPortalTarget(node);
+  }, []);
+
+  const api: DialogContextValue = {
     onClose: trigger
       ? function () {
           setTriggerOpened(false);
         }
       : onClose,
+    selectMenuPortalTarget,
   };
 
   if (trigger) {
@@ -187,7 +196,7 @@ const Dialog = (props: DialogProps): React.ReactElement => {
             shouldCloseOnOverlayClick={shouldCloseOnOverlayClick && !loading}
             style={{ content: dynamicInlineProps }}
         >
-          <>
+          <div className="pb_dialog_scroll_region">
             {title && !status ? <Dialog.Header closeable={closeable}>{title}</Dialog.Header> : null}
             {!status && text ? <Dialog.Body>{text}</Dialog.Body> : null}
             {status && (
@@ -238,7 +247,14 @@ const Dialog = (props: DialogProps): React.ReactElement => {
               </Dialog.Footer>
             ) : null}
             {children}
-          </>
+          </div>
+          {/* No aria-hidden: portaled form inputs with dropdowns live here and must remain interactive. */}
+          <div
+              className="pb_dialog_floating_root"
+              data-pb-dialog-floating-root="true"
+              {...(id ? { [PB_FLOATING_OWNER_ATTR]: id } : {})}
+              ref={floatingRootRefCallback}
+          />
         </Modal>
       </div>
     </DialogContext.Provider>

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

@@ -1,3 +1,9 @@
-import React from 'react'
+import React from "react"
 
-export const DialogContext = React.createContext(null)
+export type DialogContextValue = {
+  onClose?: () => void
+  // Mount point for form inputs with dropdowns so they escape dialog scroll/overflow.
+  selectMenuPortalTarget?: HTMLElement | null
+}
+
+export const DialogContext = React.createContext<DialogContextValue | null>(null)

data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.tsx

@@ -56,7 +56,7 @@ const DialogHeader = (props: DialogHeaderProps): React.ReactElement => {
         {children}
         {closeable &&
           <CloseIcon
-              onClose={api.onClose}
+              onClose={api?.onClose}
           />
         }
         

data/app/pb_kits/playbook/pb_dialog/dialog.html.erb

@@ -12,7 +12,8 @@
         data-cancel-button-id="<%= object.cancel_button_id %>"
     <% end %>
 >
-    <%= pb_content_tag(:dialog, role: "dialog", "aria-modal": "true", "aria-label": "Dialog") do %>
+    <%= pb_content_tag(:dialog, role: "dialog", id: object.id, "data-pb-floating-owner": object.id, "aria-modal": "true", "aria-label": "Dialog") do %>
+            <div class="pb_dialog_scroll_region">
             <% if object.status === "" && object.title %>
                 <%= pb_rails("dialog/dialog_header", props: { title: object.title, id: object.id, closeable: object.closeable }) %>
             <% end %>
@@ -44,5 +45,8 @@
             <% end %>
 
             <%= content %>
+            </div>
+            <%# No aria-hidden: portaled form inputs with dropdowns live here and must remain interactive. %>
+            <div class="pb_dialog_floating_root" data-pb-dialog-floating-root="true" data-pb-floating-owner="<%= object.id %>"></div>
     <% end %>
 </div>

data/app/pb_kits/playbook/pb_dialog/dialog.test.jsx

@@ -1,6 +1,11 @@
 import React, {useState} from 'react'
 import { render, cleanup, waitFor, fireEvent, screen } from "../utilities/test-utils";
 import { Dialog, Button } from 'playbook-ui'
+import {
+  isNativeSelectMenuInteraction,
+  resolveDialogFloatingPortalHost,
+  resolvePortaledKitHost,
+} from "../utilities/floatingPortalHosts"
 
 const text="Hello Body Text, Nice to meet ya."
 const title="Header Title is the Title Prop"
@@ -47,6 +52,23 @@ test('renders the component when clicked', async () => {
   cleanup()
 })
 
+test('renders scroll region and floating root for portaled inputs (Typeahead, etc.)', async () => {
+  const { queryByText } = render(<DialogTest />)
+
+  fireEvent.click(queryByText('Open Dialog'))
+
+  await waitFor(() =>
+    expect(queryByText("Header Title is the Title Prop")).toBeInTheDocument(),
+  )
+
+  expect(document.querySelector('.pb_dialog_scroll_region')).toBeInTheDocument()
+  expect(
+    document.querySelector('[data-pb-dialog-floating-root="true"]'),
+  ).toBeInTheDocument()
+
+  cleanup()
+})
+
 test("renders the title and body text", async () => {
 
   const { queryByText } = render(<DialogTest />);
@@ -143,3 +165,106 @@ test('renders dialog without close button when closeable is false', async () =>
 
   cleanup()
 })
+
+describe('Dialog floating portal host (portaled kits)', () => {
+  beforeEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  test('resolveDialogFloatingPortalHost returns null outside dialog, modal, or popover', () => {
+    const div = document.createElement('div')
+    document.body.appendChild(div)
+    expect(resolveDialogFloatingPortalHost(div)).toBeNull()
+  })
+
+  test('resolveDialogFloatingPortalHost returns floating root inside native dialog', () => {
+    const dialog = document.createElement('dialog')
+    const scroll = document.createElement('div')
+    scroll.className = 'pb_dialog_scroll_region'
+    const floating = document.createElement('div')
+    floating.setAttribute('data-pb-dialog-floating-root', 'true')
+    const inner = document.createElement('div')
+    dialog.appendChild(scroll)
+    dialog.appendChild(floating)
+    dialog.appendChild(inner)
+    document.body.appendChild(dialog)
+
+    expect(resolveDialogFloatingPortalHost(inner)).toBe(floating)
+  })
+
+  test('resolveDialogFloatingPortalHost falls back to dialog when floating root missing', () => {
+    const dialog = document.createElement('dialog')
+    const inner = document.createElement('div')
+    dialog.appendChild(inner)
+    document.body.appendChild(dialog)
+
+    expect(resolveDialogFloatingPortalHost(inner)).toBe(dialog)
+  })
+
+  test('resolveDialogFloatingPortalHost returns floating root inside .pb_dialog', () => {
+    const shell = document.createElement('div')
+    shell.className = 'pb_dialog'
+    const floating = document.createElement('div')
+    floating.setAttribute('data-pb-dialog-floating-root', 'true')
+    const inner = document.createElement('div')
+    shell.appendChild(floating)
+    shell.appendChild(inner)
+    document.body.appendChild(shell)
+
+    expect(resolveDialogFloatingPortalHost(inner)).toBe(floating)
+  })
+
+  test('resolvePortaledKitHost uses dialog floating root when inside dialog', () => {
+    const dialog = document.createElement('dialog')
+    const floating = document.createElement('div')
+    floating.setAttribute('data-pb-dialog-floating-root', 'true')
+    const kit = document.createElement('div')
+    dialog.appendChild(floating)
+    dialog.appendChild(kit)
+    document.body.appendChild(dialog)
+
+    expect(resolvePortaledKitHost(kit, null)).toBe(floating)
+  })
+
+  test('resolvePortaledKitHost uses context target when host not in tree', () => {
+    const host = document.createElement('div')
+    const kit = document.createElement('div')
+    document.body.appendChild(kit)
+
+    expect(resolvePortaledKitHost(kit, host)).toBe(host)
+  })
+})
+
+describe('isNativeSelectMenuInteraction', () => {
+  beforeEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  test('returns true when mousedown target is a select inside the dialog', () => {
+    const dialog = document.createElement('dialog')
+    const select = document.createElement('select')
+    dialog.appendChild(select)
+    document.body.appendChild(dialog)
+
+    expect(isNativeSelectMenuInteraction(dialog, select)).toBe(true)
+  })
+
+  test('returns true when a select inside the dialog is focused (Firefox OS menu pick)', () => {
+    const dialog = document.createElement('dialog')
+    const select = document.createElement('select')
+    dialog.appendChild(select)
+    document.body.appendChild(dialog)
+    select.focus()
+
+    expect(isNativeSelectMenuInteraction(dialog, dialog)).toBe(true)
+  })
+
+  test('returns false when the select is outside the dialog', () => {
+    const dialog = document.createElement('dialog')
+    const select = document.createElement('select')
+    document.body.appendChild(dialog)
+    document.body.appendChild(select)
+
+    expect(isNativeSelectMenuInteraction(dialog, select)).toBe(false)
+  })
+})

data/app/pb_kits/playbook/pb_dialog/index.js

@@ -1,4 +1,8 @@
 import PbEnhancedElement from "../pb_enhanced_element";
+import {
+  isNativeSelectMenuInteraction,
+  targetIsInsidePortaledFloatingKit,
+} from "../utilities/floatingPortalHosts";
 
 const DIALOG_WRAPPER_SELECTOR = "[data-pb-dialog-wrapper]";
 
@@ -194,7 +198,13 @@ export default class PbDialog extends PbEnhancedElement {
         const dialogParentDataset = dialogElement.parentElement.dataset
         if (dialogParentDataset.overlayClick === "overlay_close") return
 
-        const dialogModal = event.target.getBoundingClientRect()
+        const target = event.target
+        if (targetIsInsidePortaledFloatingKit(target, dialogElement.id)) return
+        if (isNativeSelectMenuInteraction(dialogElement, target)) return
+
+        const dialogContent =
+          dialogElement.querySelector(".pb_dialog_scroll_region") || dialogElement
+        const dialogModal = dialogContent.getBoundingClientRect()
         const clickedOutsideDialogModal = event.clientX < dialogModal.left ||
           event.clientX > dialogModal.right ||
           event.clientY < dialogModal.top ||

data/app/pb_kits/playbook/pb_draggable/context/index.tsx

@@ -608,4 +608,4 @@ export const DraggableProvider = ({
   return (
     <DragContext.Provider value={contextValue}>{children}</DragContext.Provider>
   );
-};
+};

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

@@ -1 +1 @@
-You can add drag event listeners for `drag`, `dragend`, `dragenter`, `dragleave`, `dragover`, `dragstart`, and `drop`.
+You can add drag event listeners for desktop `drag`, `dragend`, `dragenter`, `dragleave`, `dragover`, `dragstart`, and `drop` or mobile `touch`, `touchend`, `touchcancel`,`touchleave`,  `touchmove`, `touchstart`

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/_playground.json

@@ -1,54 +1,295 @@
 {
   "template": "<Draggable{{props}} />",
-  "propTargets": {},
+  "propTargets": {
+    "dropZone": "Provider.props",
+    "providerId": "Provider.props",
+    "enableCrossContainerPreview": "Provider.props",
+    "htmlOptions": "Container.props",
+    "tag": "Container.props",
+    "onDragStart": "Item.props",
+    "onDragEnd": "Item.props",
+    "onDrop": "Item.props"
+  },
   "defaults": {
-    "dropZoneColor": "neutral"
+    "dropZoneColor": "neutral",
+    "dropZone": {
+      "type": "ghost",
+      "color": "neutral",
+      "direction": "vertical"
+    },
+    "providerId": "draggable-playground",
+    "enableCrossContainerPreview": false
   },
   "groups": [
     {
-      "name": "Appearance",
+      "name": "Provider",
       "props": [
         "dropZone",
-        "dropZoneColor"
+        "providerId",
+        "enableCrossContainerPreview"
+      ]
+    },
+    {
+      "name": "Container",
+      "props": [
+        "tag"
+      ]
+    },
+    {
+      "name": "Item",
+      "props": [
+        "onDragStart",
+        "onDragEnd",
+        "onDrop"
       ]
     }
   ],
   "presets": [
     {
-      "name": "Ghost (neutral)",
+      "name": "Single List",
+      "structureMode": "single_container",
+      "props": {
+        "dropZone": {
+          "type": "ghost",
+          "color": "neutral",
+          "direction": "vertical"
+        }
+      }
+    },
+    {
+      "name": "Outline Drop Zone",
+      "structureMode": "single_container",
+      "props": {
+        "dropZone": {
+          "type": "outline",
+          "color": "primary",
+          "direction": "vertical"
+        }
+      }
+    },
+    {
+      "name": "Shadow Drop Zone",
+      "structureMode": "single_container",
+      "props": {
+        "dropZone": {
+          "type": "shadow",
+          "color": "purple",
+          "direction": "vertical"
+        }
+      }
+    },
+    {
+      "name": "Line Vertical",
+      "structureMode": "single_container",
       "props": {
-        "dropZone": "ghost",
-        "dropZoneColor": "neutral"
+        "dropZone": {
+          "type": "line",
+          "color": "primary",
+          "direction": "vertical"
+        }
       }
     },
     {
-      "name": "Outline (primary)",
+      "name": "Line Horizontal",
+      "structureMode": "single_container_horizontal",
       "props": {
-        "dropZone": "outline",
-        "dropZoneColor": "primary"
+        "dropZone": {
+          "type": "line",
+          "color": "primary",
+          "direction": "horizontal"
+        }
       }
     },
     {
-      "name": "Shadow (purple)",
+      "name": "Multiple Containers",
+      "structureMode": "multiple_containers",
       "props": {
-        "dropZone": "shadow",
-        "dropZoneColor": "purple"
+        "dropZone": {
+          "type": "ghost",
+          "color": "neutral",
+          "direction": "vertical"
+        }
       }
     },
     {
-      "name": "Line (neutral)",
+      "name": "Cross Container Preview",
+      "structureMode": "multiple_containers",
       "props": {
-        "dropZone": "line",
-        "dropZoneColor": "neutral"
+        "enableCrossContainerPreview": true,
+        "dropZone": {
+          "type": "outline",
+          "color": "primary",
+          "direction": "vertical"
+        }
+      }
+    },
+    {
+      "name": "Event Listeners",
+      "structureMode": "single_container",
+      "props": {
+        "onDragEnd": "() => console.log('drag end')",
+        "onDragStart": "() => console.log('drag start')",
+        "onDrop": "() => console.log('drop')",
+        "dropZone": {
+          "type": "ghost",
+          "color": "neutral",
+          "direction": "vertical"
+        }
       }
     }
   ],
   "conditionals": {},
   "hints": {
-    "children_note": {
-      "when": {},
-      "message": "Compose Draggable.Container and Draggable.Item as children to build a sortable list.",
+    "single_list": {
+      "presetName": "Single List",
+      "message": "Single List wraps Draggable.Container and Draggable.Item children in DraggableProvider with initialItems and onReorder.",
+      "type": "info"
+    },
+    "outline_drop_zone": {
+      "presetName": "Outline Drop Zone",
+      "message": "Outline Drop Zone passes a dropZone object to DraggableProvider so the dragged item uses the outline treatment.",
+      "type": "info"
+    },
+    "shadow_drop_zone": {
+      "presetName": "Shadow Drop Zone",
+      "message": "Shadow Drop Zone uses the provider dropZone color and type to preview the shadow treatment while dragging.",
       "type": "info"
+    },
+    "line_vertical": {
+      "presetName": "Line Vertical",
+      "message": "Line Vertical uses dropZone.direction=\"vertical\" for between-row placement.",
+      "type": "info"
+    },
+    "line_horizontal": {
+      "presetName": "Line Horizontal",
+      "message": "Line Horizontal uses dropZone.direction=\"horizontal\" for between-column placement.",
+      "type": "info"
+    },
+    "multiple_containers": {
+      "presetName": "Multiple Containers",
+      "message": "Multiple Containers maps items into Draggable.Container columns by their container value.",
+      "type": "info"
+    },
+    "cross_container_preview": {
+      "presetName": "Cross Container Preview",
+      "message": "Cross Container Preview enables provider-managed movement previews between containers before drop.",
+      "type": "info"
+    },
+    "event_listeners": {
+      "presetName": "Event Listeners",
+      "message": "Event Listeners routes item callbacks through Draggable.Item props so drag events can be handled by app code.",
+      "type": "info"
+    }
+  },
+  "structureModes": {
+    "default": "single_container",
+    "modes": {
+      "single_container": {
+        "label": "Single Container",
+        "template": "<DraggableProvider\n    initialItems={initialItems}\n    onReorder={setItems}{{Provider.props}}\n>\n  <Draggable{{props}}>\n    <Draggable.Container\n        container=\"tasks\"{{Container.props}}\n    >\n      <Flex\n          gap=\"xs\"\n          orientation=\"column\"\n      >\n        {items.map(({ id, text }) => (\n          <Draggable.Item\n              container=\"tasks\"\n              dragId={id}\n              key={id}{{Item.props}}\n          >\n            <Card padding=\"xs\">\n              <Body text={text} />\n            </Card>\n          </Draggable.Item>\n        ))}\n      </Flex>\n    </Draggable.Container>\n  </Draggable>\n</DraggableProvider>",
+        "children": "",
+        "props": {
+          "dropZone": {
+            "type": "ghost",
+            "color": "neutral",
+            "direction": "vertical"
+          }
+        },
+        "wrapper": "const initialItems = [\n  { id: 'task-1', container: 'tasks', text: 'Confirm scope' },\n  { id: 'task-2', container: 'tasks', text: 'Design states' },\n  { id: 'task-3', container: 'tasks', text: 'Ship playground' },\n]\n\nconst DraggablePlaygroundExample = () => {\n  const [items, setItems] = useState(initialItems)\n\n  return {{component}}\n}\n\n<DraggablePlaygroundExample />"
+      },
+      "single_container_horizontal": {
+        "label": "Single Container Horizontal",
+        "template": "<Flex>\n  <DraggableProvider\n      initialItems={initialItems}\n      onReorder={setItems}{{Provider.props}}\n  >\n    <Draggable.Container{{Container.props}}>\n      <Flex\n          alignItems=\"stretch\"\n          flexDirection=\"row\"\n          height=\"110px\"\n      >\n        {items.map(({ id, url }) => (\n          <Draggable.Item\n              dragId={id}\n              key={id}\n              marginRight=\"sm\"{{Item.props}}\n          >\n            <Image\n                alt={id}\n                size=\"md\"\n                url={url}\n            />\n          </Draggable.Item>\n        ))}\n      </Flex>\n    </Draggable.Container>\n  </DraggableProvider>\n</Flex>",
+        "children": "",
+        "props": {
+          "dropZone": {
+            "type": "line",
+            "color": "primary",
+            "direction": "horizontal"
+          },
+          "htmlOptions": {
+            "style": {
+              "width": "420px"
+            }
+          }
+        },
+        "wrapper": "const initialItems = [\n  { id: 'image-1', url: 'https://unsplash.it/500/400/?image=633' },\n  { id: 'image-2', url: 'https://unsplash.it/500/400/?image=634' },\n  { id: 'image-3', url: 'https://unsplash.it/500/400/?image=637' },\n]\n\nconst DraggablePlaygroundExample = () => {\n  const [items, setItems] = useState(initialItems)\n\n  return {{component}}\n}\n\n<DraggablePlaygroundExample />"
+      },
+      "multiple_containers": {
+        "label": "Multiple Containers",
+        "template": "<DraggableProvider\n    initialItems={initialItems}\n    onReorder={setItems}{{Provider.props}}\n>\n  <Draggable{{props}}>\n    <Flex\n        align=\"start\"\n        gap=\"sm\"\n        wrap\n    >\n      {containers.map((container) => (\n        <Draggable.Container\n            container={container}\n            key={container}\n            minWidth=\"220px\"{{Container.props}}\n        >\n          <Card padding=\"sm\">\n            <Title\n                marginBottom=\"xs\"\n                size={4}\n                text={container}\n            />\n            <Flex\n                gap=\"xs\"\n                orientation=\"column\"\n            >\n              {items\n                .filter((item) => item.container === container)\n                .map(({ id, text }) => (\n                  <Draggable.Item\n                      container={container}\n                      dragId={id}\n                      key={id}{{Item.props}}\n                  >\n                    <Card padding=\"xs\">\n                      <Body text={text} />\n                    </Card>\n                  </Draggable.Item>\n                ))}\n            </Flex>\n          </Card>\n        </Draggable.Container>\n      ))}\n    </Flex>\n  </Draggable>\n</DraggableProvider>",
+        "children": "",
+        "props": {
+          "dropZone": {
+            "type": "ghost",
+            "color": "neutral",
+            "direction": "vertical"
+          }
+        },
+        "wrapper": "const containers = ['To Do', 'In Progress', 'Done']\nconst initialItems = [\n  { id: 'task-1', container: 'To Do', text: 'Confirm scope' },\n  { id: 'task-2', container: 'To Do', text: 'Design states' },\n  { id: 'task-3', container: 'In Progress', text: 'Ship playground' },\n  { id: 'task-4', container: 'Done', text: 'Write docs' },\n]\n\nconst DraggablePlaygroundExample = () => {\n  const [items, setItems] = useState(initialItems)\n\n  return {{component}}\n}\n\n<DraggablePlaygroundExample />"
+      }
+    }
+  },
+  "children": {
+    "editable": false,
+    "default": ""
+  },
+  "customProps": {
+    "dropZone": {
+      "type": "object",
+      "platforms": [
+        "react"
+      ]
+    },
+    "providerId": {
+      "type": "string",
+      "platforms": [
+        "react"
+      ]
+    },
+    "enableCrossContainerPreview": {
+      "type": "boolean",
+      "platforms": [
+        "react"
+      ],
+      "default": false
+    },
+    "tag": {
+      "type": "enum",
+      "platforms": [
+        "react"
+      ],
+      "values": [
+        "div",
+        "span",
+        "p",
+        "tr",
+        "td",
+        "tbody"
+      ]
+    },
+    "onDragStart": {
+      "type": "function",
+      "platforms": [
+        "react"
+      ]
+    },
+    "onDragEnd": {
+      "type": "function",
+      "platforms": [
+        "react"
+      ]
+    },
+    "onDrop": {
+      "type": "function",
+      "platforms": [
+        "react"
+      ]
+    }
+  },
+  "propSyncOnEnable": {
+    "enableCrossContainerPreview": {
+      "structureMode": "multiple_containers"
     }
   }
 }