playbook_ui_docs 14.17.0.pre.rc.0 → 14.18.0.pre.alpha.PLAY2048phonenumberinputcountrysearch7456

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_turbo_frames_rails.md

@@ -0,0 +1,9 @@
+The `custom_event_type` prop allows you to specify custom events that will trigger the dialog's initialization or control its behavior. This is especially useful when working with Turbo Frame updates where standard DOM events might not suffice.
+
+The examples demonstrate two use cases:
+1) Opening a dialog via custom event dispatch: The first example shows how to configure a dialog to listen for a specific custom event (dialogOpen). When this event is dispatched, the dialog will automatically open, making it easy to trigger the dialog from JavaScript or after Turbo Frame operations.
+2) Controlling dialog button actions with custom events: The second example demonstrates how to set up a dialog that can have its confirm button triggered through external events (turboResponse). This pattern is useful when you need to programmatically confirm a dialog after some background operation completes.
+3) Multiple custom events: The third example combines the first two to show how `custom_event_type` prop can support multiple event types separated by a comma.
+
+For Turbo integration, you can use standard Turbo events like turbo:frame-load or turbo:submit-end as your `custom_event_type` to ensure the dialog responds properly after Turbo navigation or form submissions. The dialog component will listen for these events automatically.
+The implementation handles various actions including 'open', 'close', 'clickConfirm', and 'clickCancel', making it flexible for different interaction patterns in your Turbo-enhanced application.

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

@@ -11,6 +11,7 @@ examples:
   - dialog_full_height: Full Height
   - dialog_full_height_placement: Full Height Placement
   - dialog_loading: Loading
+  - dialog_turbo_frames: Within Turbo Frames
 
 
   react:

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

@@ -0,0 +1,43 @@
+<% data_shadow = [
+  { id: "51", text: "Task 1" },
+  { id: "52", text: "Task 2" },
+  { id: "53", text: "Task 3" }
+] %>
+
+<% data_outline = [
+  { id: "61", text: "Task 1" },
+  { id: "62", text: "Task 2" },
+  { id: "63", text: "Task 3" }
+] %>
+
+<%= pb_rails("flex", props: { justify: "around" }) do %>
+  <%= pb_rails("flex/flex_item", props: { margin_right: "xl" }) do %>
+    <%= pb_rails("draggable", props: { drop_zone_type: "shadow", initial_items: data_shadow }) do %>
+      <%= pb_rails("caption", props: { margin_bottom: "xs", text: "Shadow", text_align: "center" }) %>
+      <%= pb_rails("draggable/draggable_container", props: { html_options: { style: { width: "200px" } } }) do %>
+        <% data_shadow.each do |item| %>
+          <%= pb_rails("card", props: { drag_id: item[:id], draggable_item: true, margin_bottom: "xs", padding: "xs", padding_right: "xl" }) do %>
+            <%= pb_rails("flex", props: { align_items: "stretch", flex_direction: "column" }) do %>
+              <%= pb_rails("body", props: { text: item[:text] }) %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <%= pb_rails("flex/flex_item", props: { margin_right: "xl" }) do %>
+    <%= pb_rails("draggable", props: { drop_zone_type: "outline", initial_items: data_outline }) do %>
+      <%= pb_rails("caption", props: { margin_bottom: "xs", text: "Outline", text_align: "center" }) %>
+      <%= pb_rails("draggable/draggable_container", props: { html_options: { style: { width: "200px" } } }) do %>
+        <% data_outline.each do |item| %>
+          <%= pb_rails("card", props: { drag_id: item[:id], draggable_item: true, margin_bottom: "xs", padding: "xs", padding_right: "xl" }) do %>
+            <%= pb_rails("flex", props: { align_items: "stretch", flex_direction: "column" }) do %>
+              <%= pb_rails("body", props: { text: item[:text] }) %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.jsx

@@ -60,123 +60,120 @@ const DraggableDropZones = (props) => {
 
   return (
     <>
-    <Flex justify="between"
-        {...props}
-    >
-      <FlexItem marginRight="xl">
-        <DraggableProvider
-            dropZone={{type: "shadow"}}
-            initialItems={dataShadow}
-            onReorder={(items) => setInitialShadowState(items)}
-        >
-            <Caption
-                marginBottom="xs"
-                textAlign="center"
-            >
-              {"Shadow"}
-            </Caption>
-            <Draggable.Container
-                htmlOptions={{style:{ width: "200px"}}}
-                {...props}
-            >
-            {initialShadowState.map(({ id, text }) => (
-              <Card dragId={id}
-                  draggableItem
-                  key={id}
+      <Flex justify="between"
+          {...props}
+      >
+        <FlexItem marginRight="xl">
+          <DraggableProvider
+              dropZone={{type: "shadow"}}
+              initialItems={dataShadow}
+              onReorder={(items) => setInitialShadowState(items)}
+          >
+              <Caption
                   marginBottom="xs"
-                  padding="xs"
+                  text="Shadow"
+                  textAlign="center"
+              />
+              <Draggable.Container
+                  htmlOptions={{style:{ width: "200px"}}}
                   {...props}
               >
-                <Flex alignItems="stretch"
-                    flexDirection="column"
+              {initialShadowState.map(({ id, text }) => (
+                <Card dragId={id}
+                    draggableItem
+                    key={id}
+                    marginBottom="xs"
+                    padding="xs"
+                    {...props}
                 >
-                  <Body
-                      text={text}
-                      {...props}
-                  />
-                </Flex>
-              </Card>
-            ))}
-            </Draggable.Container>
-        </DraggableProvider>
-      </FlexItem>
-      <FlexItem marginRight="xl">
-        <DraggableProvider
-            dropZone={{type: "outline"}}
-            initialItems={dataOutline}
-            onReorder={(items) => setInitialOutlineState(items)}
-        >
-            <Caption
-                marginBottom="xs"
-                textAlign="center"
-            >
-              {"Outline"}
-            </Caption>
-            <Draggable.Container
-                htmlOptions={{style:{ width: "200px"}}}
-                {...props}
-            >
-            {initialOutlineState.map(({ id, text }) => (
-              <Card
-                  dragId={id}
-                  draggableItem
-                  key={id}
+                  <Flex alignItems="stretch"
+                      flexDirection="column"
+                  >
+                    <Body
+                        text={text}
+                        {...props}
+                    />
+                  </Flex>
+                </Card>
+              ))}
+              </Draggable.Container>
+          </DraggableProvider>
+        </FlexItem>
+        <FlexItem marginRight="xl">
+          <DraggableProvider
+              dropZone={{type: "outline"}}
+              initialItems={dataOutline}
+              onReorder={(items) => setInitialOutlineState(items)}
+          >
+              <Caption
                   marginBottom="xs"
-                  padding="xs"
+                  text="Outline"
+                  textAlign="center"
+              />
+              <Draggable.Container
+                  htmlOptions={{style:{ width: "200px"}}}
                   {...props}
               >
-                <Flex
-                    alignItems="stretch"
-                    flexDirection="column"
+              {initialOutlineState.map(({ id, text }) => (
+                <Card
+                    dragId={id}
+                    draggableItem
+                    key={id}
+                    marginBottom="xs"
+                    padding="xs"
+                    {...props}
                 >
-                  <Body
-                      text={text}
-                      {...props}
-                  />
-                </Flex>
-              </Card>
-            ))}
-            </Draggable.Container>
-        </DraggableProvider>
-      </FlexItem>
-      <FlexItem>
-        <DraggableProvider
-            dropZone={{type: "line"}}
-            initialItems={dataLine}
-            onReorder={(items) => setInitialLineState(items)}
-        >
-            <Caption
-                marginBottom="xs"
-                textAlign="center"
-            >
-              {"Line"}
-            </Caption>
-            <Draggable.Container
-                htmlOptions={{style:{ width: "200px"}}}
-                {...props}
-            >
-            {initialLineState.map(({ id, text }) => (
-              <Card dragId={id}
-                  draggableItem
-                  key={id}
+                  <Flex
+                      alignItems="stretch"
+                      flexDirection="column"
+                  >
+                    <Body
+                        text={text}
+                        {...props}
+                    />
+                  </Flex>
+                </Card>
+              ))}
+              </Draggable.Container>
+          </DraggableProvider>
+        </FlexItem>
+        <FlexItem>
+          <DraggableProvider
+              dropZone={{type: "line"}}
+              initialItems={dataLine}
+              onReorder={(items) => setInitialLineState(items)}
+          >
+              <Caption
                   marginBottom="xs"
-                  padding="xs"
+                  text="Line"
+                  textAlign="center"
+              />
+              <Draggable.Container
+                  htmlOptions={{style:{ width: "200px"}}}
                   {...props}
               >
-                <Flex alignItems="stretch"
-                    flexDirection="column"
+              {initialLineState.map(({ id, text }) => (
+                <Card dragId={id}
+                    draggableItem
+                    key={id}
+                    marginBottom="xs"
+                    padding="xs"
+                    {...props}
                 >
-                  <Body
-                      text={text}
-                      {...props}
-                  />
-                </Flex>
-              </Card>
-            ))}
-            </Draggable.Container>
-        </DraggableProvider>
-      </FlexItem>
-    </Flex>
+                  <Flex alignItems="stretch"
+                      flexDirection="column"
+                  >
+                    <Body
+                        text={text}
+                        {...props}
+                    />
+                  </Flex>
+                </Card>
+              ))}
+              </Draggable.Container>
+          </DraggableProvider>
+        </FlexItem>
+      </Flex>
     </>
   );
 };

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

@@ -0,0 +1,55 @@
+<% initial_items = [
+  {
+    id: "141",
+    url: "https://unsplash.it/500/400/?image=633",
+  },
+  {
+    id: "142",
+    url: "https://unsplash.it/500/400/?image=634",
+  },
+  {
+    id: "143",
+    url: "https://unsplash.it/500/400/?image=637",
+  },
+] %>
+
+<% next_init_items = [
+  {
+    id: "151",
+    url: "https://unsplash.it/500/400/?image=633",
+  },
+  {
+    id: "152",
+    url: "https://unsplash.it/500/400/?image=634",
+  },
+  {
+    id: "153",
+    url: "https://unsplash.it/500/400/?image=637",
+  },
+] %>
+
+<%= pb_rails("draggable", props: {initial_items: initial_items, drop_zone_type: "shadow", drop_zone_color: "primary"}) do %>
+  <%= pb_rails("draggable/draggable_container") do %>
+    <%= pb_rails("flex", props: { gap: "sm" }) do %>
+      <% initial_items.each do |item| %>
+        <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
+          <%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url] }) %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>
+
+<br/>
+
+<%= pb_rails("draggable", props: {initial_items: next_init_items, drop_zone_type: "outline", drop_zone_color: "purple"}) do %>
+  <%= pb_rails("draggable/draggable_container") do %>
+    <%= pb_rails("flex", props: { gap: "sm" }) do %>
+      <% initial_items.each do |item| %>
+        <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
+          <%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url] }) %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.jsx

@@ -6,6 +6,8 @@ import Caption from '../../pb_caption/_caption'
 import Draggable from '../../pb_draggable/_draggable'
 import { DraggableProvider } from '../../pb_draggable/context'
 
+
+
 // Initial items to be dragged
 const dataPrimary = [
   {
@@ -42,54 +44,54 @@ const DraggableDropZonesColors = (props) => {
 
   return (
     <>
-    <Caption marginBottom="xs">
-      Primary
-    </Caption>
-    <DraggableProvider
-        dropZone={{type: "shadow", color: "primary"}}
-        initialItems={dataPrimary}
-        onReorder={(items) => setInitialPrimaryState(items)}
-    >
-        <Draggable.Container {...props}>
-        <Flex>
-            {initialPrimaryState.map(({ id, url }) => (
-              <Draggable.Item dragId={id}
-                  key={id}
-                  marginRight="sm"
-              >
-                <Image alt={id}
-                    size="md"
-                    url={url}
-                />
-              </Draggable.Item>
-            ))}
-         </Flex>
-        </Draggable.Container>
-    </DraggableProvider>
-    <Caption marginBottom="xs">
-      Purple
-    </Caption>
-    <DraggableProvider
-        dropZone={{type: "outline", color: "purple"}}
-        initialItems={dataPurple}
-        onReorder={(items) => setInitialPurpleState(items)}
-    >
-        <Draggable.Container {...props}>
-        <Flex>
-            {initialPurpleState.map(({ id, url }) => (
-              <Draggable.Item dragId={id}
-                  key={id}
-                  marginRight="sm"
-              >
-                <Image alt={id}
-                    size="md"
-                    url={url}
-                />
-              </Draggable.Item>
-            ))}
-         </Flex>
-        </Draggable.Container>
-    </DraggableProvider>
+      <Caption marginBottom="xs"
+          text="Primary"
+      />
+      <DraggableProvider
+          dropZone={{type: "shadow", color: "primary"}}
+          initialItems={dataPrimary}
+          onReorder={(items) => setInitialPrimaryState(items)}
+      >
+          <Draggable.Container {...props}>
+              <Flex>
+                  {initialPrimaryState.map(({ id, url }) => (
+                    <Draggable.Item dragId={id}
+                        key={id}
+                        marginRight="sm"
+                    >
+                        <Image alt={id}
+                            size="md"
+                            url={url}
+                        />
+                    </Draggable.Item>
+                  ))}
+              </Flex>
+          </Draggable.Container>
+      </DraggableProvider>
+      <Caption marginBottom="xs"
+          text="Purple"
+      />
+      <DraggableProvider
+          dropZone={{type: "outline", color: "purple"}}
+          initialItems={dataPurple}
+          onReorder={(items) => setInitialPurpleState(items)}
+      >
+          <Draggable.Container {...props}>
+              <Flex>
+                  {initialPurpleState.map(({ id, url }) => (
+                    <Draggable.Item dragId={id}
+                        key={id}
+                        marginRight="sm"
+                    >
+                        <Image alt={id}
+                            size="md"
+                            url={url}
+                        />
+                    </Draggable.Item>
+                  ))}
+              </Flex>
+          </Draggable.Container>
+      </DraggableProvider>
     </>
   );
 };

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

@@ -0,0 +1 @@
+  The default `color` for Draggable kit drop zones is "neutral", with "primary" or "purple" as additional options.

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

@@ -0,0 +1 @@
+  The default `color` for Draggable kit drop zones is "neutral", with "primary" or "purple" as additional options. When `type` is set to "line", the default color is "primary" and "purple" is the only other option.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.jsx

@@ -0,0 +1,110 @@
+import React, { useState } from "react";
+import Flex from '../../pb_flex/_flex'
+import Caption from '../../pb_caption/_caption'
+import Draggable from '../_draggable'
+import { DraggableProvider } from '../context'
+import Image from '../../pb_image/_image'
+
+
+
+const dataLineVertical = [
+  {
+    id: "211",
+    url: "https://unsplash.it/500/400/?image=633",
+  },
+  {
+    id: "212",
+    url: "https://unsplash.it/500/400/?image=634",
+  },
+  {
+    id: "213",
+    url: "https://unsplash.it/500/400/?image=637",
+  },
+];
+
+const dataLineHorizontal = [
+  {
+    id: "2111",
+    url: "https://unsplash.it/500/400/?image=633",
+  },
+  {
+    id: "2122",
+    url: "https://unsplash.it/500/400/?image=634",
+  },
+  {
+    id: "2133",
+    url: "https://unsplash.it/500/400/?image=637",
+  },
+];
+
+const DraggableDropZones = (props) => {
+  const [initialLineVerticalState, setInitialLineVerticalState] = useState(dataLineVertical);
+  const [initialLineHorizontalState, setInitialLineHorizontalState] = useState(dataLineHorizontal);
+
+  return (
+    <>
+      <Caption marginBottom="xs" 
+          marginTop="xl"
+          text="Vertical"
+      />
+      <DraggableProvider
+          dropZone={{ type: "line", color: "purple" }}
+          initialItems={dataLineVertical}
+          onReorder={(items) => setInitialLineVerticalState(items)}
+      >
+        <Draggable.Container {...props}>
+          <Flex flexDirection="column"
+              height="367px"
+          >
+              {initialLineVerticalState.map(({ id, url }) => (
+                <Draggable.Item dragId={id}
+                    key={id}
+                    marginBottom="sm"
+                >
+                  <Image alt={id}
+                      size="md"
+                      url={url}
+                  />
+                </Draggable.Item>
+              ))}
+          </Flex>
+        </Draggable.Container>
+      </DraggableProvider>
+      <Caption marginBottom="xs" 
+          marginTop="xl"
+          text="Horizontal"
+      />
+      <Flex>
+        <DraggableProvider
+            dropZone={{ type: "line", direction: "horizontal" }}
+            initialItems={dataLineHorizontal}
+            onReorder={(items) => setInitialLineHorizontalState(items)}
+        >
+          <Draggable.Container
+              htmlOptions={{style:{ width: "285px"}}}
+              {...props}
+          >
+            <Flex alignItems="stretch"
+                flexDirection="row"
+                height="110px"
+            > 
+              {initialLineHorizontalState.map(({ id, url }) => (
+                <Draggable.Item dragId={id}
+                    key={id}
+                    marginRight="sm"
+                >
+                  <Image alt={id}
+                      size="md"
+                      url={url}
+                  />
+                </Draggable.Item>
+              ))}
+            </Flex>
+          </Draggable.Container>
+        </DraggableProvider>
+      </Flex>
+    </>
+  );
+};
+
+export default DraggableDropZones;

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

@@ -0,0 +1,5 @@
+When using the "line" style, make sure to set the appropriate `direction` attribute within the `dropZone` prop based on the orientation of your draggable view. By default, this is set to "vertical," but it can also be adjusted to "horizontal." Note that the direction attribute only applies to the "line" style and does not affect other drop zone styles. The default `color` for "line" is "primary" and "purple" is the only alternative color option.
+
+The length of the line is calculated based off of the width (for "vertical") or height (for "horizontal") of the parent container holding the draggable items. 
+
+Additionally, if the parent container of the `DraggableProvider`/`DraggableContainer` (or a subcontainer within) does not have a set height (for "vertical") or width (for "horizontal"), like the [Draggable Drop Zones doc example](https://playbook.powerapp.cloud/kits/draggable/react#draggable-drop-zones) does, elements on the page may jump up (for "vertical") or to the left (for "horizontal") when an item is actively being dragged. To prevent this, give a parent element a fixed height (for "vertical") or width (for "horizontal") as demonstrated in this doc example.

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

@@ -0,0 +1,5 @@
+  The Draggable kit lets you customize the style of drop zones that appear when dragging an item.
+
+By default, drop zones are in the "ghost" style, but you can also choose from "shadow," "outline," and "line."
+
+When using the "line" type, make sure to set the appropriate `direction` attribute within the `dropZone` prop based on the orientation of your draggable view. By default, this is set to "vertical," but it can also be adjusted to "horizontal." Note that the direction attribute only applies to the "line" type and does not affect other drop zone styles. For more on the "line" style in particular, check out the [Draggable Drop Zones Line doc example](https://playbook.powerapp.cloud/kits/draggable/react#draggable-drop-zones-line).

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

@@ -0,0 +1,42 @@
+<% initial_items = [
+  {
+    id: "100",
+    url: "https://unsplash.it/500/400/?image=638",
+  },
+  {
+    id: "200",
+    url: "https://unsplash.it/500/400/?image=639",
+  },
+  {
+    id: "300",
+    url: "https://unsplash.it/500/400/?image=640",
+  },
+] %>
+
+<%= pb_rails("draggable", props: {initial_items: initial_items}) do %>
+  <%= pb_rails("draggable/draggable_container") do %>
+    <%= pb_rails("flex") do %>
+      <% initial_items.each do |item| %>
+        <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
+          <%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url], margin: "xs" }) %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>
+
+<script>
+  const itemIds = ["item_100", "item_200", "item_300"];
+
+  itemIds.forEach((id) => {
+    const element = document.getElementById(id);
+    if (element) {
+      element.addEventListener("dragstart", (event) => {
+        console.log(`${id} drag start!`);
+      });
+      element.addEventListener("dragend", (event) => {
+        console.log(`${id} drag end!`);
+      });
+    }
+  });
+</script>

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

@@ -0,0 +1 @@
+You can add drag event listeners for `drag`, `dragend`, `dragenter`, `dragleave`, `dragover`, `dragstart`, and `drop`.

data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_table_react.jsx → _draggable_with_table.jsx}

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 
 import Flex from '../../pb_flex/_flex'
-import { DraggableProvider } from '../../pb_draggable/context'
+import { DraggableProvider } from '../context'
 import Avatar from '../../pb_avatar/_avatar'
 import Body from '../../pb_body/_body'
 import Table from '../../pb_table/_table'

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

@@ -2,4 +2,6 @@ The draggable kit can also be used in conjunction with the table kit to create d
 
 - Wrap the Table with the `DraggableProvider` and manage state as shown. 
 - use the `draggableContainer` prop on the Table.Body to designate it as the Draggable Container
-- use the `draggableItem` prop on the Table.Row to designate it as the Draggable Item. Make sure to also pass id to the `dragId` prop here. 
+- use the `draggableItem` prop on the Table.Row to designate it as the Draggable Item. Make sure to also pass id to the `dragId` prop here. 
+
+We recommending using the default `dropZone type` with the Table kit.