playbook_ui_docs 16.11.0.pre.rc.2 → 16.11.0

data/app/pb_kits/playbook/pb_typeahead/docs/_playground.json

@@ -10,7 +10,10 @@
     "required": false,
     "requiredIndicator": false,
     "clearOnContextChange": true,
-    "preserveSearchInput": false
+    "preserveSearchInput": false,
+    "enablePillReorder": false,
+    "showPillIndex": false,
+    "pillDragHandle": true
   },
   "groups": [
     {
@@ -58,13 +61,16 @@
       "props": [
         "components",
         "dark",
-        "marginBottom"
+        "marginBottom",
+        "enablePillReorder",
+        "showPillIndex",
+        "pillDragHandle"
       ]
     }
   ],
   "presets": [
     {
-      "name": "Basic list",
+      "name": "Default",
       "props": {
         "label": "Colors",
         "name": "color",
@@ -88,6 +94,32 @@
         ]
       }
     },
+    {
+      "name": "With Pills",
+      "props": {
+        "label": "With Pills",
+        "name": "with_pills",
+        "isMulti": true,
+        "options": [
+          {
+            "label": "Orange",
+            "value": "#FFA500"
+          },
+          {
+            "label": "Red",
+            "value": "#FF0000"
+          },
+          {
+            "label": "Green",
+            "value": "#00FF00"
+          },
+          {
+            "label": "Blue",
+            "value": "#0000FF"
+          }
+        ]
+      }
+    },
     {
       "name": "Count display",
       "props": {
@@ -223,12 +255,21 @@
     },
     "clearOnContextChange": {
       "requires": "searchContextSelector"
+    },
+    "enablePillReorder": {
+      "requires": "isMulti"
+    },
+    "showPillIndex": {
+      "requires": "isMulti"
+    },
+    "pillDragHandle": {
+      "requires": "isMulti"
     }
   },
   "hints": {
-    "basic_list": {
-      "presetName": "Basic list",
-      "message": "Basic list uses a local options array with label and value keys.",
+    "default": {
+      "presetName": "Default",
+      "message": "Default uses a local options array with label and value keys.",
       "type": "info"
     },
     "count_display": {
@@ -255,6 +296,11 @@
       "presetName": "Creatable handler",
       "message": "Creatable handler shows custom option creation, preserved search input, and an onChange handler.",
       "type": "info"
+    },
+    "with_pills": {
+      "presetName": "With Pills",
+      "message": "With Pills uses multi-select with pills so selected values render as pills.",
+      "type": "info"
     }
   },
   "customProps": {

data/app/pb_kits/playbook/pb_typeahead/docs/_playground.overrides.json

@@ -49,12 +49,12 @@
     },
     {
       "name": "Appearance",
-      "props": ["components", "dark", "marginBottom"]
+      "props": ["components", "dark", "marginBottom", "enablePillReorder", "showPillIndex", "pillDragHandle"]
     }
   ],
   "presets": [
     {
-      "name": "Basic list",
+      "name": "Default",
       "props": {
         "label": "Colors",
         "name": "color",
@@ -66,6 +66,20 @@
         ]
       }
     },
+    {
+      "name": "With Pills",
+      "props": {
+        "label": "With Pills",
+        "name": "with_pills",
+        "isMulti": true,
+        "options": [
+          { "label": "Orange", "value": "#FFA500" },
+          { "label": "Red", "value": "#FF0000" },
+          { "label": "Green", "value": "#00FF00" },
+          { "label": "Blue", "value": "#0000FF" }
+        ]
+      }
+    },
     {
       "name": "Count display",
       "props": {
@@ -145,12 +159,15 @@
     "requiredIndicator": { "requires": "label" },
     "validation": { "requires": { "required": true } },
     "optionsByContext": { "requires": "searchContextSelector" },
-    "clearOnContextChange": { "requires": "searchContextSelector" }
+    "clearOnContextChange": { "requires": "searchContextSelector" },
+    "enablePillReorder": { "requires": "isMulti" },
+    "showPillIndex": { "requires": "isMulti" },
+    "pillDragHandle": { "requires": "isMulti" }
   },
   "hints": {
-    "basic_list": {
-      "presetName": "Basic list",
-      "message": "Basic list uses a local options array with label and value keys.",
+    "default": {
+      "presetName": "Default",
+      "message": "Default uses a local options array with label and value keys.",
       "type": "info"
     },
     "count_display": {
@@ -177,6 +194,11 @@
       "presetName": "Creatable handler",
       "message": "Creatable handler shows custom option creation, preserved search input, and an onChange handler.",
       "type": "info"
+    },
+    "with_pills": {
+      "presetName": "With Pills",
+      "message": "With Pills uses multi-select with pills so selected values render as pills.",
+      "type": "info"
     }
   }
 }

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

@@ -0,0 +1,39 @@
+<%
+  options = [
+    { label: 'Year', value: 'year' },
+    { label: 'Territory', value: 'territory' },
+    { label: 'Branch', value: 'branch' },
+    { label: 'Product', value: 'product' },
+  ]
+%>
+
+<%= pb_rails("body", props: { text: "Select services, then drag the pills to reorder them.", margin_bottom: "xs" }) %>
+
+<%= pb_rails("typeahead", props: {
+  id: "typeahead-draggable-pills-example",
+  default_options: [options[0], options[1], options[2]],
+  enable_pill_reorder: true,
+  pill_drag_handle: false,
+  show_pill_index: true,
+  is_multi: true,
+  label: "Services",
+  name: :services,
+  options: options,
+  pills: true,
+  placeholder: "Add services...",
+}) %>
+
+<%= pb_rails("body", props: {
+  id: "typeahead-draggable-order",
+  color: "lighter",
+  margin_top: "xs",
+  text: "Current order: Year -> Territory -> Branch",
+}) %>
+
+<%= javascript_tag defer: "defer" do %>
+  document.addEventListener('pb-typeahead-kit-typeahead-draggable-pills-example-result-option-reorder', function(event) {
+    const orderText = event.detail.map((item) => item.label).join(' -> ');
+    const orderElement = document.querySelector('#typeahead-draggable-order');
+    if (orderElement) orderElement.textContent = `Current order: ${orderText}`;
+  });
+<% end %>

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

@@ -0,0 +1,63 @@
+import React, { useState } from 'react'
+import { Body, Button, Flex, Typeahead } from 'playbook-ui'
+
+const options = [
+  { label: 'Year', value: 'year' },
+  { label: 'Territory', value: 'territory' },
+  { label: 'Branch', value: 'branch' },
+  { label: 'Product', value: 'product' },
+]
+
+const TypeaheadDraggablePills = (props) => {
+  const [value, setValue] = useState([
+    options[0],
+    options[1],
+    options[2],
+  ])
+
+  const currentOrder = value.map((item) => item.label).join(' -> ')
+
+  const handleReset = () => {
+    setValue([options[0], options[1], options[2]])
+  }
+
+  return (
+    <Flex
+        align="stretch"
+        gap="sm"
+        orientation="column"
+    >
+      <Flex
+          align="center"
+          justify="between"
+      >
+        <Body text="Select services, then drag the pills to reorder them." />
+        <Button
+            onClick={handleReset}
+            text="Reset"
+            variant="secondary"
+        />
+      </Flex>
+
+      <Typeahead
+          enablePillReorder
+          isMulti
+          label="Services"
+          onChange={setValue}
+          options={options}
+          placeholder="Add services..."
+          showPillIndex
+          value={value}
+          {...props}
+          pillDragHandle={false}
+      />
+
+      <Body
+          color="lighter"
+          text={`Current order: ${currentOrder}`}
+      />
+    </Flex>
+  )
+}
+
+export default TypeaheadDraggablePills

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

@@ -0,0 +1,7 @@
+Use `enablePillReorder` to let users drag selected pills into a new order. Pair with `showPillIndex` to display numbered prefixes that update automatically after reorder.
+
+Set `pillDragHandle` to `false` to hide the grip icon and drag the whole pill instead.
+
+Order is committed on drop. The `onChange` callback and `pb-typeahead-kit-{id}-result-option-reorder` custom event both receive the reordered value array.
+
+Keyboard reorder: focus a pill, then press Control+Shift+ArrowLeft or Control+Shift+ArrowRight to move it one position.

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

@@ -0,0 +1,7 @@
+Use `enable_pill_reorder: true` with `show_pill_index: true` to let users drag selected pills into a new order. Set `pill_drag_handle: false` to hide the grip icon and drag the whole pill instead.
+
+Order is committed on drop.
+
+The `pb-typeahead-kit-{id}-result-option-reorder` custom event receives the reordered value array.
+
+Keyboard reorder: focus a pill, then press Control+Shift+ArrowLeft or Control+Shift+ArrowRight to move it one position.

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

@@ -21,6 +21,7 @@ examples:
     - typeahead_disabled: Disabled
     - typeahead_preserve_input: Preserve Search Input
     - typeahead_required_indicator: Required Indicator
+    - typeahead_draggable_pills: Draggable Pills
 
   react:
     - typeahead_default: Default
@@ -45,3 +46,4 @@ examples:
     - typeahead_disabled: Disabled
     - typeahead_preserve_input: Preserve Search Input
     - typeahead_required_indicator: Required Indicator
+    - typeahead_draggable_pills: Draggable Pills

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

@@ -20,3 +20,4 @@ export {default as TypeaheadDefaultValue} from "./_typeahead_default_value.jsx"
 export {default as TypeaheadCustomOptions} from "./_typeahead_custom_options.jsx"
 export {default as TypeaheadInputDisplay} from "./_typeahead_input_display.jsx"
 export {default as TypeaheadRequiredIndicator} from "./_typeahead_required_indicator.jsx"
+export {default as TypeaheadDraggablePills} from "./_typeahead_draggable_pills.jsx"

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 16.11.0.pre.rc.2
+  version: 16.11.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-07-08 00:00:00.000000000 Z
+date: 2026-07-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -2910,6 +2910,10 @@ files:
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default_value.md
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_disabled.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_disabled.jsx
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_draggable_pills.html.erb
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_draggable_pills.jsx
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_draggable_pills.md
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_draggable_pills_rails.md
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options.md
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options_pure_rails.html.erb