playbook_ui_docs 16.10.0.pre.rc.1 → 16.10.0.pre.rc.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4267f7b437b78af8734c0b08b776a4d8c14c8676bb558bc73ed30890c305d3cc
-  data.tar.gz: c565734d3238c9f404ebcff2fa4b159b03aef1b97089c613aa607df543421b28
+  metadata.gz: 198af968a895742be35f3531714337260e08b7bf52fe6a13d7d4ce508afe262f
+  data.tar.gz: 43210e9fce280af93fd7e4e0e7e5ddf21c64ebfbafedb955b4475c648227fb6d
 SHA512:
-  metadata.gz: b0ef9f525463816195a2f3e5ed4ff7d9b684341829979557a99664ee1879fcb65d1da6166003da9758ca64232004a9173c5beb86510e7e09eda31168498d4387
-  data.tar.gz: 72079f297c3b342c8a5b34137f6b65a0cb8ff2a82452ccc433664415ca5d83ee93f4d75c59436ff037c85be3da8907c572c0f459345cce8602759c213f597f71
+  metadata.gz: baeb1a4f222328cf7ae972f95ca44041db163bc472880948cfed57585222a011c1e9bf961af9c524b97bfad149b40fdf343379448a00325e2f82b71f06860d32
+  data.tar.gz: 2cc98997bc248035efc41e101f4354d069a38dbb26b46d32ad260dcc8af6ad5f4ab4bfb106524cfab56a8558e9a85b20d44c56d1b2962ae51fa153ce3e94a002

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_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"
     }
   }
 }