playbook_ui 18.3.0.pre.rc.1 → 18.3.0.pre.rc.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dce454b27ec0be36f4812b6955579e934aa2d63d856a62d796e7ef64b05b0a94
-  data.tar.gz: 56f6845557ded84094f8757e2a29f3151a03407430f478ad6570aaf8dca25e93
+  metadata.gz: 8582fa63726a34ad01ae22c73948ace36979ee0b5d3a2f6a362309826689f963
+  data.tar.gz: 657c7f4fcc9819b0dec67daaab5cca1c11bc3cd8948374bc462ea287d72fe57e
 SHA512:
-  metadata.gz: 259f6127136c2e6f3d26b5eb90e32c641c357792c0ff0dfefe5ba8e98dc808f41a55451456c39c6fa228dae125d8aa3d17296090b65d5d1be1065cd0ef7fd55c
-  data.tar.gz: 6476556760b7bf8c5f11852974131592ffe329f86beb23fcdbb81103699f94af9d982ad47daa8537a3334d46601ca522ff34c25403406061cebd82f565e4a4bf
+  metadata.gz: 2598b3eea96f74b461e103e443895c80e9372ebf6dde222dca8efd6d1d9b7900f7ad3b69a48e4c80e98fb8036e1105cd344e619f2131e877477b52b929a1f4ed
+  data.tar.gz: 1cdd22957b2083b97d80ab7591d5441e18d43eb42a734ea33b06edd4365117d42d1b9fc1a112d33aea8cca06de775d95eaa9fa59dd5518b66f2c392c66ff99b4

data/app/pb_kits/playbook/pb_advanced_table/table_header.rb

@@ -157,7 +157,7 @@ module Playbook
 
       # Determines if the toggle-all button should be shown in the header based on inline row loading and persist toggle expansion button props
       def show_toggle_all_button?
-        return false unless enable_toggle_expansion == "header" || enable_toggle_expansion == "all"
+        return false unless %w[header all].include?(enable_toggle_expansion)
 
         has_any_sub_rows? || (inline_row_loading && persist_toggle_expansion_button)
       end

data/app/pb_kits/playbook/pb_avatar/_avatar.tsx

@@ -3,6 +3,7 @@ import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
+import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 import { getPlacementProps } from './Utilities/GetPlacementPropsHelper'
 
 import Image from "../pb_image/_image";
@@ -33,7 +34,7 @@ export type AvatarProps = {
   name?: string,
   size?: "md" | "lg" | "sm" | "xl" | "xs" | "xxs",
   status?: "away" | "offline" | "online",
-  } & GlobalProps
+  } & GlobalProps & GlobalEventProps
 
 const firstTwoInitials = (name: string) =>
   name.split(/\s/).map((name) => name[0])
@@ -94,6 +95,7 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_avatar/kit.schema.json

@@ -83,6 +83,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { Avatar } from 'playbook-ui'",

data/app/pb_kits/playbook/pb_contact/_contact.tsx

@@ -3,6 +3,7 @@ import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
+import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 
 import Body from '../pb_body/_body'
 import Caption from '../pb_caption/_caption'
@@ -64,7 +65,7 @@ type ContactProps = {
   iconEnabled?: boolean
   id?: string
   unstyled?: boolean
-}
+} & GlobalEventProps
 
 const Contact = (props: ContactProps): React.ReactElement => {
   const {
@@ -125,6 +126,7 @@ const Contact = (props: ContactProps): React.ReactElement => {
           {...ariaProps}
           {...dataProps}
           {...htmlProps}
+          {...globalEventProps(props)}
           className={classes}
           id={id}
       >
@@ -139,6 +141,7 @@ const Contact = (props: ContactProps): React.ReactElement => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_contact/kit.schema.json

@@ -52,6 +52,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { Contact } from 'playbook-ui'",

data/app/pb_kits/playbook/pb_date/_date.tsx

@@ -3,6 +3,7 @@ import classnames from "classnames";
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
+import { GlobalEventProps, globalEventProps } from "../utilities/globalEventProps";
 import DateTime from '../pb_kit/dateTime';
 
 import Body from "../pb_body/_body";
@@ -24,7 +25,7 @@ type PbDateProps = {
   size?: "sm" | "md" | "lg";
   unstyled?: boolean;
   value: Date;
-};
+} & GlobalEventProps;
 
 const PbDate = (props: PbDateProps): React.ReactElement => {
   const {
@@ -64,6 +65,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_date/kit.schema.json

@@ -90,6 +90,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { Date } from 'playbook-ui'",

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import classnames from "classnames";
 
 import { globalProps } from "../utilities/globalProps";
+import { GlobalEventProps, globalEventProps } from "../utilities/globalEventProps";
 import { buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import DateTime from '../pb_kit/dateTime';
 
@@ -21,7 +22,7 @@ type DateRangeInlineProps = {
   size?: "sm" | "xs";
   showCurrentYear?: boolean;
   startDate?: Date;
-};
+} & GlobalEventProps;
 
 const dateTimestamp = (dateValue: Date, includeYear: boolean) => {
   if (includeYear) {
@@ -74,6 +75,7 @@ const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
     <div
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={classnames(dateRangeClasses, globalProps(props), className)}
     >
       <div className="pb_date_range_inline_wrapper">

data/app/pb_kits/playbook/pb_date_range_inline/kit.schema.json

@@ -71,6 +71,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { DateRangeInline } from 'playbook-ui'",

data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.tsx

@@ -3,6 +3,7 @@ import classnames from 'classnames'
 
 import { buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
+import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 
 import Body from '../pb_body/_body'
 import Flex from '../pb_flex/_flex'
@@ -18,7 +19,7 @@ type DateRangeStackedProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   startDate: Date,
-}
+} & GlobalEventProps
 
 const DateRangeStacked = (props: DateRangeStackedProps): React.ReactElement => {
   const { 
@@ -41,6 +42,7 @@ const DateRangeStacked = (props: DateRangeStackedProps): React.ReactElement => {
     <div 
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={css}
     >
       <Flex vertical="center">

data/app/pb_kits/playbook/pb_date_range_stacked/kit.schema.json

@@ -31,6 +31,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { DateRangeStacked } from 'playbook-ui'",

data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import classnames from "classnames";
 import { buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
+import { GlobalEventProps, globalEventProps } from "../utilities/globalEventProps";
 import DateTime from '../pb_kit/dateTime';
 
 import Caption from "../pb_caption/_caption";
@@ -20,7 +21,7 @@ type DateStackedProps = {
   id?: string;
   reverse?: boolean;
   showCurrentYear?: boolean;
-};
+} & GlobalEventProps;
 
 const sizes: {sm: 4, md: 3} = {
   sm: 4,
@@ -60,6 +61,7 @@ const DateStacked = (props: DateStackedProps): React.ReactElement => {
         <div
             {...dataProps}
             {...htmlProps}
+            {...globalEventProps(props)}
             className={classes}
         >
           <div className="pb_date_stacked_day_month">
@@ -76,6 +78,7 @@ const DateStacked = (props: DateStackedProps): React.ReactElement => {
           <div
               {...dataProps}
               {...htmlProps}
+              {...globalEventProps(props)}
               className={classes}
           >
             <div className="pb_date_stacked_day_month">

data/app/pb_kits/playbook/pb_date_stacked/kit.schema.json

@@ -73,6 +73,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { DateStacked } from 'playbook-ui'",

data/app/pb_kits/playbook/pb_date_time/_date_time.tsx

@@ -3,6 +3,7 @@ import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
+import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 
 import Flex from '../pb_flex/_flex'
 import Time from '../pb_time/_time'
@@ -21,7 +22,7 @@ type DateTimeProps = {
   showDayOfWeek: boolean,
   showIcon?: boolean,
   timeZone?: string
-}
+} & GlobalEventProps
 
 const DateTime = (props: DateTimeProps): React.ReactElement => {
   const {
@@ -53,6 +54,7 @@ const DateTime = (props: DateTimeProps): React.ReactElement => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_date_time/kit.schema.json

@@ -90,6 +90,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { DateTime } from 'playbook-ui'",

data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx

@@ -4,6 +4,7 @@ import classnames from 'classnames'
 
 import { buildCss, buildHtmlProps } from '../utilities/props'
 import { deprecatedProps, globalProps } from '../utilities/globalProps'
+import { GlobalEventProps } from '../utilities/globalEventProps'
 
 import Flex from '../pb_flex/_flex'
 import FlexItem from '../pb_flex/_flex_item'
@@ -20,7 +21,7 @@ type DateTimeStackedProps = {
   dark: boolean,
   timeZone?: string,
   showCurrentYear?: boolean,
-}
+} & GlobalEventProps
 
 const DateTimeStacked = (props: DateTimeStackedProps): React.ReactElement => {
   if (props.date) deprecatedProps()

data/app/pb_kits/playbook/pb_date_time_stacked/kit.schema.json

@@ -57,6 +57,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { DateTimeStacked } from 'playbook-ui'",

data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.tsx

@@ -3,6 +3,7 @@ import classnames from 'classnames'
 
 import { buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
+import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 import DateTime from '../pb_kit/dateTime';
 
 import Body from '../pb_body/_body'
@@ -16,7 +17,7 @@ type DateYearStackedProps = {
   date: Date,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
-}
+} & GlobalEventProps
 
 const DateYearStacked = (props: DateYearStackedProps): React.ReactElement => {
   const { 
@@ -39,6 +40,7 @@ const DateYearStacked = (props: DateYearStackedProps): React.ReactElement => {
     <div 
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={css}
     >
       <Title

data/app/pb_kits/playbook/pb_date_year_stacked/kit.schema.json

@@ -37,6 +37,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { DateYearStacked } from 'playbook-ui'",

data/app/pb_kits/playbook/pb_draggable/utilities/touchDrag.ts

@@ -370,6 +370,16 @@ export const bindMousePointerDrag = ({
     event.preventDefault();
     event.stopPropagation();
 
+    // Dropdown: restore pill focus after preventDefault so ArrowLeft/Right work.
+    // Typeahead: leave focus on the search input — focusing the pill blurs it and
+    // react-select closes the menu / clears the query.
+    const pill = itemElement.querySelector<HTMLElement>(
+      '.pb_form_pill_kit, .pb_form_pill_kit_icon',
+    );
+    if (pill && !itemElement.closest('.pb_typeahead_kit')) {
+      pill.focus({ preventScroll: true });
+    }
+
     state.active = true;
     state.startX = event.clientX;
     state.startY = event.clientY;

data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss

@@ -4,6 +4,7 @@
 @import "../tokens/border_radius";
 @import "../tokens/shadows";
 @import "../tokens/positioning";
+@import "../tokens/opacity";
 @import "../pb_body/body_mixins";
 @import "../pb_textarea/textarea_mixin";
 
@@ -536,3 +537,114 @@
   padding: 0;
   pointer-events: auto;
 }
+
+.pb_dropdown_draggable_pills {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0;
+
+  .pb_draggable_item {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    user-select: none;
+    -webkit-user-select: none;
+
+    &.pb_dropdown_drop_before::before,
+    &.pb_dropdown_drop_after::after {
+      content: "";
+      position: absolute;
+      inset-block: 2px;
+      width: 2px;
+      background-color: $primary;
+      border-radius: $border_radius_rounded;
+      pointer-events: none;
+    }
+    &.pb_dropdown_drop_before::before {
+      inset-inline-start: -5px;
+    }
+    &.pb_dropdown_drop_after::after {
+      inset-inline-end: 3px;
+    }
+
+    &:hover {
+      cursor: grab;
+    }
+
+    &.is_dragging {
+      cursor: grabbing;
+    }
+
+    .pb_form_pill_kit_icon,
+    .pb_form_pill_kit_icon * {
+      cursor: grab;
+    }
+    .pb_form_pill_close,
+    .pb_form_pill_close * {
+      cursor: pointer;
+    }
+  }
+
+  &.active .pb_draggable_item > * {
+    pointer-events: none;
+  }
+}
+
+.pb_dropdown_pill_with_handle {
+  display: inline-flex;
+  align-items: center;
+  gap: $space_xxs;
+}
+
+.pb_dropdown_external_drag_handle {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  cursor: grab;
+  user-select: none;
+  color: $text_lighter;
+
+  &:active {
+    cursor: grabbing;
+  }
+
+  .pb_dropdown_pill_grip_icon {
+    color: $text_lighter !important;
+  }
+}
+
+.pb_dropdown_draggable_pills,
+.pb_dropdown_pill_drag_preview {
+  .pb_form_pill_kit_icon .pb_form_pill_icon,
+  .pb_form_pill_kit_icon .pb_dropdown_pill_grip_icon {
+    order: -1;
+    color: $text_lighter !important;
+    margin-left: -$space_xs;
+    padding-right: $space_xxs;
+    scale: 0.9;
+  }
+  .pb_form_pill_kit_icon.dark .pb_form_pill_icon,
+  .pb_form_pill_kit_icon.dark .pb_dropdown_pill_grip_icon {
+    color: $text_lighter_dark !important;
+  }
+}
+
+.pb_dropdown_pill_drag_preview {
+  position: fixed;
+  z-index: $z_max;
+  display: inline-flex;
+  align-items: center;
+  opacity: $opacity_5;
+  pointer-events: none;
+
+  .pb_form_pill_kit,
+  .pb_form_pill_kit_icon {
+    box-shadow: $shadow_deep;
+  }
+}
+
+body:has(.pb_dropdown_pill_drag_preview),
+body:has(.pb_dropdown_pill_drag_preview) * {
+  cursor: grabbing !important;
+}

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -126,6 +126,8 @@ type DropdownProps = {
     defaultValue?: GenericObject;
     error?: string;
     enableFormSupport?: boolean;
+    enablePillReorder?: boolean;
+    externalDragHandle?: boolean;
     htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
     id?: string;
     isClosed?: boolean;
@@ -138,6 +140,7 @@ type DropdownProps = {
     options?: GenericObject;
     placeholder?: string;
     separators?: boolean;
+    showPillIndex?: boolean;
     variant?: "default" | "subtle" | "quickpick";
     rangeEndsToday?: boolean;
     controlsStartId?: string;
@@ -184,6 +187,8 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         disabled = false,
         error: errorProp,
         enableFormSupport = false,
+        enablePillReorder = false,
+        externalDragHandle = false,
         htmlOptions = {},
         id,
         isClosed = true,
@@ -196,6 +201,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         onSelect,
         options,
         placeholder,
+        showPillIndex = false,
         rangeEndsToday = false,
         controlsStartId,
         controlsEndId,
@@ -207,6 +213,8 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         validationMessage = "Please fill out this field."
     } = props;
 
+    const isPillReorderEnabled = Boolean(enablePillReorder && multiSelect);
+
     const creationEnabled = allowOptionCreation && variant !== "quickpick";
     const autocomplete = autocompleteProp || creationEnabled;
 
@@ -837,6 +845,8 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     disabled,
                     error,
                     errorId,
+                    enablePillReorder: isPillReorderEnabled,
+                    externalDragHandle,
                     filterItem,
                     filteredOptions,
                     focusedOptionIndex,
@@ -865,6 +875,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     setIsDropDownClosed,
                     setIsInputFocused,
                     setSelected,
+                    showPillIndex,
                     toggleDropdown
                 }}
             >

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_draggable_pills.html.erb

@@ -0,0 +1,51 @@
+<%
+  options = [
+    { label: 'Year', value: 'year', id: 'year' },
+    { label: 'Territory', value: 'territory', id: 'territory' },
+    { label: 'Branch', value: 'branch', id: 'branch' },
+    { label: 'Product', value: 'product', id: 'product' },
+  ]
+%>
+
+<%= pb_rails("body", props: { text: "Select services, then drag the pills to reorder them.", margin_bottom: "xs" }) %>
+
+<%= pb_rails("dropdown", props: {
+  id: "dropdown-draggable-pills-example",
+  default_value: [options[0], options[1], options[2]],
+  enable_pill_reorder: true,
+  show_pill_index: true,
+  multi_select: true,
+  label: "Services",
+  name: :services,
+  options: options,
+  placeholder: "Add services...",
+}) %>
+
+<%= pb_rails("body", props: {
+  id: "dropdown-draggable-order",
+  color: "lighter",
+  margin_top: "xs",
+  text: "Current order: Year -> Territory -> Branch",
+}) %>
+
+<script>
+  (() => {
+    const dropdownId = "dropdown-draggable-pills-example";
+    const orderElement = document.getElementById("dropdown-draggable-order");
+
+    const updateOrderText = (detail) => {
+      if (!orderElement || !Array.isArray(detail)) return;
+      orderElement.textContent = `Current order: ${detail.map((item) => item.label).join(" -> ")}`;
+    };
+
+    document.addEventListener("pb:dropdown:reordered", (event) => {
+      if (event.target.id !== dropdownId) return;
+      updateOrderText(event.detail);
+    });
+
+    document.addEventListener("pb:dropdown:selected", (event) => {
+      if (event.target.id !== dropdownId) return;
+      updateOrderText(event.detail);
+    });
+  })();
+</script>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_draggable_pills.jsx

@@ -0,0 +1,62 @@
+import React, { useState } from 'react'
+import { Body, Button, Dropdown, Flex } from 'playbook-ui'
+
+const options = [
+  { label: 'Year', value: 'year', id: 'year' },
+  { label: 'Territory', value: 'territory', id: 'territory' },
+  { label: 'Branch', value: 'branch', id: 'branch' },
+  { label: 'Product', value: 'product', id: 'product' },
+]
+
+const DropdownDraggablePills = (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>
+
+      <Dropdown
+          enablePillReorder
+          label="Services"
+          multiSelect
+          onChange={({ target }) => setValue(target.value || [])}
+          options={options}
+          placeholder="Add services..."
+          showPillIndex
+          value={value}
+          {...props}
+      />
+
+      <Body
+          color="lighter"
+          text={`Current order: ${currentOrder}`}
+      />
+    </Flex>
+  )
+}
+
+export default DropdownDraggablePills

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_draggable_pills_rails.md

@@ -0,0 +1,9 @@
+Use `enable_pill_reorder: true` with `show_pill_index: true` to let users drag selected multi-select pills into a new order. By default, each pill shows a grip icon and can be dragged from anywhere on the pill. Set `external_drag_handle: true` to use an external grip handle instead (drag only from the handle).
+
+While dragging, pills stay in place, a ghost follows the pointer, and a blue line marks where the pill will land. Order is committed on drop.
+
+The `pb:dropdown:reordered` custom event receives the reordered value array. Submitted form values (hidden inputs) preserve the new order. `pb:dropdown:selected` also fires with the updated order.
+
+Keyboard reorder: focus a pill, then press ArrowLeft or ArrowRight to move it one position.
+
+Works with Multi-Select and Multi-Select + Autocomplete Dropdown variants only, and is disabled by default.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_draggable_pills_react.md

@@ -0,0 +1,9 @@
+Use `enablePillReorder` to let users drag selected multi-select pills into a new order. Pair with `showPillIndex` to display numbered prefixes that update automatically after reorder or removal.
+
+By default, each pill shows a grip icon and can be dragged from anywhere on the pill. Set `externalDragHandle` to `true` to use an external grip handle instead (drag only from the handle).
+
+While dragging, pills stay in place, a ghost follows the pointer, and a blue line marks where the pill will land. Order is committed on drop. The `onChange` callback receives the reordered value array.
+
+Keyboard reorder: focus a pill, then press ArrowLeft or ArrowRight to move it one position.
+
+Works with Multi-Select and Multi-Select + Autocomplete.  Dropdown variants only, and is disabled by default.