playbook_ui_docs 15.5.0.pre.alpha.draggablefix12577 → 15.5.0.pre.alpha.play250212696

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3e2f0791db742fad1b11bda6ece46162bab4bdc7d8a3d7bc45ec43ebab6206ee
-  data.tar.gz: 8982beb7aecc3c622e1d88aa603eccdc398cd6cbd31607a4f03323a73b13ab70
+  metadata.gz: 927da234d9bf2456654442761915e54019d24209d7b303aca00ddf83c65845d9
+  data.tar.gz: 3f994098a5aeb2f553b88b17c1d6d1ba6c6d66e27bddbb3cd831a31fea394c1c
 SHA512:
-  metadata.gz: 88a80b7aaee727e6f536d0a65e0ce32f9710f5a9663a7582f312129dba0d48355df4391872f5385b12688dc48d7f51717e08d90a323c86749cb59cdae1db9843
-  data.tar.gz: 35d579e0351a209bc81d9934317bd5fbf069d8c4d33a48c8d2f6735216bed5c9373a5cb55ce937ee93ffadd73b536306cc7a973bd9b3a4028e4ac30cb6ab3d57
+  metadata.gz: 3c309c5cfd18b92c8ecf0359aa370f0eb894a9be7ef3ea960017bb6a1656e069e6e14b8d3517290225790a5a132366392ea1f7c3b9d601e963a33743b1bb304e
+  data.tar.gz: a684def3a82d9266b73d2ac44aa936ee69048dc864b00587e3b1d7623d78525db455cdfac8c5c47c3bca5f711d0b999f29c37a857cd8ea93e1bf7820ab394b76

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

@@ -29,167 +29,5 @@
       label: "Graduated Students",
     }
 ] %>
-<%= pb_rails("caption", props: { text: "Advanced Table Vertical Border Table Props" }) %>
-<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, margin_bottom: "md", column_definitions: column_definitions, table_props: { vertical_border: true, container: false }}) %>
 
-<% column_definitions_two = [
-  {
-    accessor: "year",
-    label: "Year",
-    cellAccessors: ["quarter", "month", "day"],
-  },
-  {
-    label: "Enrollment Data",
-    columns: [
-      {
-        accessor: "newEnrollments",
-        label: "New Enrollments",
-      },
-      {
-        accessor: "scheduledMeetings",
-        label: "Scheduled Meetings",
-      },
-    ],
-  },
-  {
-    label: "Performance Data",
-    columns: [
-      {
-        accessor: "attendanceRate",
-        label: "Attendance Rate",
-      },
-      {
-        accessor: "completedClasses",
-        label: "Completed Classes",
-      },
-      {
-        accessor: "classCompletionRate",
-        label: "Class Completion Rate",
-      },
-      {
-        accessor: "graduatedStudents",
-        label: "Graduated Students",
-      },
-    ],
-  },
-] %>
-<%= pb_rails("caption", props: { text: "Advanced Table Vertical Border Multi Header" }) %>
-<%= pb_rails("advanced_table", props: { id: "table_multi_headers_vertical_borders", margin_bottom: "md", table_data: @table_data, column_definitions: column_definitions_two, table_props: { vertical_border: true } }) %>
-
-<% column_definitions_three = [
-  {
-    accessor: "year",
-    label: "Year",
-    cellAccessors: ["quarter", "month", "day"],
-  },
-  {
-    label: "Enrollment Data",
-    columns: [
-      {
-        label: "Enrollment Stats",
-        columns: [
-          {
-            accessor: "newEnrollments",
-            label: "New Enrollments",
-          },
-          {
-            accessor: "scheduledMeetings",
-            label: "Scheduled Meetings",
-          },
-        ],
-      },
-    ],
-  },
-  {
-    label: "Performance Data",
-    columns: [
-      {
-        label: "Completion Metrics",
-        columns: [
-          {
-            accessor: "completedClasses",
-            label: "Completed Classes",
-          },
-          {
-            accessor: "classCompletionRate",
-            label: "Class Completion Rate",
-          },
-        ],
-      },
-      {
-        label: "Attendance",
-        columns: [
-          {
-            accessor: "attendanceRate",
-            label: "Attendance Rate",
-          },
-          {
-            accessor: "scheduledMeetings",
-            label: "Scheduled Meetings",
-          },
-        ],
-      },
-    ],
-  },
-] %>
-<%= pb_rails("caption", props: { text: "Advanced Table Vertical Border Multi Header with Column Group Border Color" }) %>
-<%= pb_rails("advanced_table", props: { id: "beta_table_with_color_headers", margin_bottom: "md", table_data: @table_data, column_definitions: column_definitions_three, column_group_border_color: "text_lt_default", table_props: { vertical_border: true } }) %>
-
-<% column_definitions_four = [
-  {
-    accessor: "year",
-    label: "Year",
-    cellAccessors: ["quarter", "month", "day"],
-  },
-  {
-    label: "Enrollment Data",
-    columns: [
-      {
-        label: "Enrollment Stats",
-        columns: [
-          {
-            accessor: "newEnrollments",
-            label: "New Enrollments",
-          },
-          {
-            accessor: "scheduledMeetings",
-            label: "Scheduled Meetings",
-          },
-        ],
-      },
-    ],
-  },
-  {
-    label: "Performance Data",
-    columns: [
-      {
-        label: "Completion Metrics",
-        columns: [
-          {
-            accessor: "completedClasses",
-            label: "Completed Classes",
-          },
-          {
-            accessor: "classCompletionRate",
-            label: "Class Completion Rate",
-          },
-        ],
-      },
-      {
-        label: "Attendance",
-        columns: [
-          {
-            accessor: "attendanceRate",
-            label: "Attendance Rate",
-          },
-          {
-            accessor: "scheduledMeetings",
-            label: "Scheduled Meetings",
-          },
-        ],
-      },
-    ],
-  },
-] %>
-<%= pb_rails("caption", props: { text: "Advanced Table Vertical Border Multi Header No Vertical Border" }) %>
-<%= pb_rails("advanced_table", props: {id: "beta_table_with_muilti_headers", table_data: @table_data, column_definitions: column_definitions_four }) %>
+<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, table_props: { vertical_border: true, container: false }}) %>

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

@@ -1,7 +1,6 @@
 import React from "react"
 import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data.json"
-import Caption from "../../pb_caption/_caption"
 
 const AdvancedTableTableProps = (props) => {
   const columnDefinitions = [
@@ -41,203 +40,14 @@ const AdvancedTableTableProps = (props) => {
     verticalBorder: true
   }
 
-  const columnDefinitionsTwo = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      label: "Enrollment Data",
-      columns: [
-        {
-          accessor: "newEnrollments",
-          label: "New Enrollments",
-        },
-        {
-          accessor: "scheduledMeetings",
-          label: "Scheduled Meetings",
-        },
-      ],
-    },
-    {
-      label: "Performance Data",
-      columns: [
-        {
-          accessor: "attendanceRate",
-          label: "Attendance Rate",
-        },
-        {
-          accessor: "completedClasses",
-          label: "Completed Classes",
-        },
-        {
-          accessor: "classCompletionRate",
-          label: "Class Completion Rate",
-        },
-        {
-          accessor: "graduatedStudents",
-          label: "Graduated Students",
-        },
-      ],
-    },
-  ];
-
-  const tablePropsTwo = {
-    verticalBorder: true,
-  }
-
-  const columnDefinitionsThree = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      label: "Enrollment Data",
-      columns: [
-        {
-          label: "Enrollment Stats",
-          columns: [
-            {
-              accessor: "newEnrollments",
-              label: "New Enrollments",
-            },
-            {
-              accessor: "scheduledMeetings",
-              label: "Scheduled Meetings",
-            },
-          ],
-        },
-      ],
-    },
-    {
-      label: "Performance Data",
-      columns: [
-        {
-          label: "Completion Metrics",
-          columns: [
-            {
-              accessor: "completedClasses",
-              label: "Completed Classes",
-            },
-            {
-              accessor: "classCompletionRate",
-              label: "Class Completion Rate",
-            },
-          ],
-        },
-        {
-          label: "Attendance",
-          columns: [
-            {
-              accessor: "attendanceRate",
-              label: "Attendance Rate",
-            },
-            {
-              accessor: "scheduledMeetings",
-              label: "Scheduled Meetings",
-            },
-          ],
-        },
-      ],
-    },
-  ];
-
-  const tablePropsThree = {
-    verticalBorder: true
-  }
-
-  const columnDefinitionsFour = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      label: "Enrollment Data",
-      columns: [
-        {
-          label: "Enrollment Stats",
-          columns: [
-            {
-              accessor: "newEnrollments",
-              label: "New Enrollments",
-            },
-            {
-              accessor: "scheduledMeetings",
-              label: "Scheduled Meetings",
-            },
-          ],
-        },
-      ],
-    },
-    {
-      label: "Performance Data",
-      columns: [
-        {
-          label: "Completion Metrics",
-          columns: [
-            {
-              accessor: "completedClasses",
-              label: "Completed Classes",
-            },
-            {
-              accessor: "classCompletionRate",
-              label: "Class Completion Rate",
-            },
-          ],
-        },
-        {
-          label: "Attendance",
-          columns: [
-            {
-              accessor: "attendanceRate",
-              label: "Attendance Rate",
-            },
-            {
-              accessor: "scheduledMeetings",
-              label: "Scheduled Meetings",
-            },
-          ],
-        },
-      ],
-    },
-  ];
-
   return (
     <div>
-      <Caption text="Advanced Table Vertical Border Table Props" />
       <AdvancedTable
           columnDefinitions={columnDefinitions}
-          marginBottom="md"
           tableData={MOCK_DATA}
           tableProps={tableProps}
           {...props}
       />
-      <Caption text="Advanced Table Vertical Border Multi Header" />
-      <AdvancedTable
-          columnDefinitions={columnDefinitionsTwo}
-          marginBottom="md"
-          tableData={MOCK_DATA}
-          tableProps={tablePropsTwo}
-          {...props}
-      />
-      <Caption text="Advanced Table Vertical Border Multi Header with Column Group Border Color" />
-      <AdvancedTable
-          columnDefinitions={columnDefinitionsThree}
-          columnGroupBorderColor="text_lt_default"
-          marginBottom="md"
-          tableData={MOCK_DATA}
-          tableProps={tablePropsThree}
-          {...props}
-      />
-      <Caption text="Advanced Table Vertical Border Multi Header No Vertical Border" />
-      <AdvancedTable
-          columnDefinitions={columnDefinitionsFour}
-          tableData={MOCK_DATA}
-          {...props}
-      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb

@@ -1,3 +1,24 @@
+<% 
+  options = [
+    {
+      label: "United States",
+      value: "unitedStates",
+      id: "us"
+    },
+    {
+      label: "United Kingdom",
+      value: "unitedKingdom",
+      id: "gb"
+    },
+    {
+      label: "Pakistan",
+      value: "pakistan",
+      id: "pk"
+    }
+  ]
+%>
+
+
 <%= pb_rails("button", props: { text: "Open Complex Dialog", data:{"open-dialog": "dialog-complex"} }) %>
 
 <%= pb_rails("dialog", props: { id:"dialog-complex", size: "lg", full_height: true }) do %>
@@ -10,6 +31,16 @@
         <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
         <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
         <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
+        <%= pb_rails("dropdown", props: {options: options, autocomplete: true}) %>
+        <%= pb_rails("typeahead", props: {
+        id: "typeahead-default",
+        placeholder: "Select one...",
+        options: options,
+        name: :foo,
+        margin_top: "sm",
+        is_multi: false
+      })
+%>
 
     <% end %>
     <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-complex"}) %>

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

@@ -83,6 +83,7 @@ const DraggableMultipleContainersDropzone = (props) => {
   return (
     <DraggableProvider 
         dropZone={{type: "outline"}}
+        enableCrossContainerPreview
         initialItems={data}
         onDragEnd={(draggedItemId, finalContainer, originalContainer, itemAbove, itemBelow) => {
           console.log(`Dragged Item ID: ${draggedItemId}`);

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

@@ -1,6 +1,8 @@
 The multiple container functionality also supports customized dropzone styling as shown here. 
 
-In addition to this, the `onDrop` and `onDragEnd` event listeners provide several arguments to allow developers more context from the drag event.
+In addition to this, the `enableCrossContainerPreview` prop can be used on the `DraggableProvider` as shown here to enable dropzone preview for cross-container dragging. 
+
+With `enableCrossContainerPreview`, the `onDrop` and `onDragEnd` event listeners will also provide several arguments to allow developers more context from the drag event.
 
 The `onDrop` callback is triggered when an item is successfully dropped into a container. It provides the following arguments:
 

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.html.erb

@@ -0,0 +1,30 @@
+<% 
+options = [
+  { label: 'Orange', value: '#FFA500' },
+  { label: 'Red', value: '#FF0000' },
+  { label: 'Green', value: '#00FF00' },
+  { label: 'Blue', value: '#0000FF' },
+  { label: 'Yellow', value: '#FFFF00' },
+  { label: 'Purple', value: '#800080' },
+  { label: 'Cyan', value: '#00FFFF' },
+  { label: 'Magenta', value: '#FF00FF' }
+] 
+%>
+
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-input-display-none",
+    label: "With Input Display None",
+    options: options,
+    name: :foo,
+    input_display: "none",
+    })
+%>
+<br/>
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-input-display-pills",
+    label: "With Input Display Pills (Default)",
+    options: options,
+    name: :foo,
+    pills: true,
+    })
+%>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+
+import Typeahead from '../_typeahead'
+
+const options = [
+  { label: 'Orange', value: '#FFA500' },
+  { label: 'Red', value: '#FF0000' },
+  { label: 'Green', value: '#00FF00' },
+  { label: 'Blue', value: '#0000FF' },
+  { label: 'Yellow', value: '#FFFF00' },
+  { label: 'Purple', value: '#800080' },
+  { label: 'Cyan', value: '#00FFFF' },
+  { label: 'Magenta', value: '#FF00FF' }
+]
+
+const TypeaheadInputDisplay = (props) => {
+  return (
+    <>
+      <Typeahead
+          inputDisplay="none"
+          isMulti
+          label="With Input Display None"
+          options={options}
+          {...props}
+      />
+      <br/>
+      <Typeahead
+          isMulti
+          label="With Input Display Pills (Default)"
+          options={options}
+          {...props}
+      />
+    </>
+  )
+}
+
+export default TypeaheadInputDisplay

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.md

@@ -0,0 +1,3 @@
+Use the `inputDisplay`/`input_display` prop to optionally display only the count in the display as opposed to multiple pills. This prop is set to 'pills' by default. 
+
+**NOTE**: `inputDisplay`/`input_display` should only be used with typeaheads that allow multi selection.

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

@@ -5,6 +5,7 @@ examples:
     - typeahead_default_options: With Default Options
     - typeahead_with_context: With Context
     - typeahead_with_pills: With Pills
+    - typeahead_input_display: Input Display
     - typeahead_without_pills: Without Pills (Single Select)
     - typeahead_with_pills_async: With Pills (Async Data)
     - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
@@ -26,6 +27,7 @@ examples:
     - typeahead_react_hook: React Hook
     - typeahead_with_highlight: With Highlight
     - typeahead_with_pills: With Pills
+    - typeahead_input_display: Input Display
     - typeahead_with_pills_async: With Pills (Async Data)
     - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
     - typeahead_with_pills_async_custom_options: With Pills (Async Data w/ Custom Options)

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

@@ -17,4 +17,5 @@ export { default as TypeaheadReactHook } from './_typeahead_react_hook.jsx'
 export { default as TypeaheadDisabled } from './_typeahead_disabled.jsx'
 export { default as TypeaheadPreserveInput } from './_typeahead_preserve_input.jsx'
 export { default as TypeaheadDefaultValue } from './_typeahead_default_value.jsx'
-export { default as TypeaheadCustomOptions } from './_typeahead_custom_options.jsx'
+export { default as TypeaheadCustomOptions } from './_typeahead_custom_options.jsx'
+export { default as TypeaheadInputDisplay } from './_typeahead_input_display.jsx'

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 15.5.0.pre.alpha.draggablefix12577
+  version: 15.5.0.pre.alpha.play250212696
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-11-24 00:00:00.000000000 Z
+date: 2025-12-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -2576,6 +2576,9 @@ files:
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.md
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_inline.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_inline.jsx
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.html.erb
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.jsx
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.md
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.html.erb