playbook_ui 18.2.0 → 18.3.0.pre.alpha.PLAY3342advancedtablereactmulticolumnselectablerow21082

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

@@ -198,7 +198,11 @@
         "closeOnClick",
         "constrainHeight",
         "isClosed",
-        "requiredIndicator"
+        "enableFormSupport",
+        "requiredIndicator",
+        "required",
+        "validationMessage",
+        "allowOptionCreation"
       ]
     },
     {
@@ -215,6 +219,9 @@
       "props": [
         "separators",
         "formPillProps",
+        "enablePillReorder",
+        "externalDragHandle",
+        "showPillIndex",
         "activeStyle",
         "dark",
         "disabled"
@@ -226,6 +233,7 @@
     }
   ],
   "presets": [
+    { "name": "Create tags", "props": { "allowOptionCreation": true, "multiSelect": true, "name": "tags[]", "label": "Tags" } },
     {
       "name": "Async search",
       "structureMode": "async",
@@ -381,6 +389,9 @@
     "searchbar": { "structureMode": "async" },
     "requiredIndicator": { "requires": "label" },
     "formPillProps": { "requires": "multiSelect" },
+    "enablePillReorder": { "requires": "multiSelect" },
+    "externalDragHandle": { "requires": "enablePillReorder" },
+    "showPillIndex": { "requires": "multiSelect" },
     "rangeEndsToday": { "requires": { "variant": "quickpick" } },
     "controlsStartId": { "requires": { "variant": "quickpick" } },
     "controlsEndId": { "requires": { "variant": "quickpick" } },
@@ -411,7 +422,7 @@
     },
     "multi_options": {
       "when": { "multiSelect": true },
-      "message": "Multi-select returns arrays of selected options. Use formPillProps to adjust the selected-pill appearance and clearable to let users reset the selection.",
+      "message": "Multi-select returns arrays of selected options. Use formPillProps to adjust the selected-pill appearance and clearable to let users reset the selection. Opt into enablePillReorder to drag pills into a new priority order.",
       "type": "info"
     },
     "autocomplete_info": {

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

@@ -47,6 +47,8 @@ examples:
   - dropdown_async_search: Async Search
   - dropdown_async_multi_select_rails: Async Multi Select
   - dropdown_async_custom_content: Async Search with Custom Content
+  - dropdown_option_creation: Allow Option Creation
+  - dropdown_draggable_pills: Draggable Pills
 
   react:
   - dropdown_default: Default
@@ -100,4 +102,7 @@ examples:
   - dropdown_async_rich_results: Async Search with Custom Content
   - dropdown_async_initial_options: Async Initial Results and Caching
   - dropdown_external_search: External Search
+  - dropdown_option_creation: Allow Option Creation
+  - dropdown_draggable_pills: Draggable Pills
+  - dropdown_form: Enable Form Support
 

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

@@ -47,5 +47,8 @@ export { default as DropdownAsyncMultiSelect } from './_dropdown_async_multi_sel
 export { default as DropdownAsyncRichResults } from './_dropdown_async_rich_results.jsx'
 export { default as DropdownAsyncInitialOptions } from './_dropdown_async_initial_options.jsx'
 export { default as DropdownExternalSearch } from './_dropdown_external_search.jsx'
+export { default as DropdownForm } from "./_dropdown_form.jsx"
+export { default as DropdownOptionCreation } from "./_dropdown_option_creation.jsx"
 export { default as DropdownQuickpickEnableTime } from './_dropdown_quickpick_enable_time.jsx'
-export { default as DropdownWithHighlight } from './_dropdown_with_highlight.jsx'
+export { default as DropdownWithHighlight } from './_dropdown_with_highlight.jsx'
+export { default as DropdownDraggablePills } from './_dropdown_draggable_pills.jsx'

data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb

@@ -19,7 +19,7 @@
             data-message="<%= object.validation_message %>"
             <% end %>
             data-dropdown-selected-option
-            name="<%= object.name %><%= '[]' if object.multi_select %>"
+            name="<%= object.input_name %>"
             style="display: none"
             <%= object.disabled ? "disabled" : ""%>
             <%= object.required ? "required" : ""%>
@@ -34,7 +34,7 @@
                 <%= pb_rails("body", props: { status: "negative", text: object.error, id: object.error_id, aria: { atomic: "true", live: "polite" }, html_options: { role: "alert" }, dark: object.dark }) %>
             <% end %>
         <% else %>
-            <%= pb_rails("dropdown/dropdown_trigger", props: { autocomplete: object.autocomplete, disabled: object.disabled, multi_select: object.multi_select, placeholder: object.placeholder, select_id: object.select_id, label: object.label, error_id: object.error_id, error: object.error }) %>
+            <%= pb_rails("dropdown/dropdown_trigger", props: { autocomplete: object.autocomplete_enabled?, disabled: object.disabled, multi_select: object.multi_select, placeholder: object.placeholder, select_id: object.select_id, label: object.label, error_id: object.error_id, error: object.error }) %>
             <%= pb_rails("dropdown/dropdown_container", props: { searchbar: object.searchbar, constrain_height: object.constrain_height, disabled: object.disabled, no_options_text: object.no_options_text }) do %>
                 <% if options_with_blank.present? %>
                     <% options_with_blank.each do |option| %>

data/app/pb_kits/playbook/pb_dropdown/dropdown.rb

@@ -29,6 +29,8 @@ module Playbook
                         default: true
       prop :autocomplete, type: Playbook::Props::Boolean,
                           default: false
+      prop :allow_option_creation, type: Playbook::Props::Boolean,
+                                   default: false
       prop :async, type: Playbook::Props::Boolean, default: false
       prop :active_style, type: Playbook::Props::HashProp,
                           default: {}
@@ -75,11 +77,18 @@ module Playbook
                                      default: true
       prop :options_event_type, type: Playbook::Props::String,
                                 default: ""
+      prop :enable_pill_reorder, type: Playbook::Props::Boolean,
+                                 default: false
+      prop :external_drag_handle, type: Playbook::Props::Boolean,
+                                  default: false
+      prop :show_pill_index, type: Playbook::Props::Boolean,
+                             default: false
 
       def data
         Hash(prop(:data)).merge(
           pb_dropdown: true,
           pb_dropdown_async: async ? true : nil,
+          pb_dropdown_allow_option_creation: allow_option_creation && variant != "quickpick" ? true : nil,
           pb_dropdown_active_style: active_style.present? ? active_style.to_json : nil,
           pb_dropdown_default_value: async && default_value.present? ? default_value.to_json : nil,
           pb_dropdown_search_term_minimum_length: async ? search_term_minimum_length : nil,
@@ -99,7 +108,10 @@ module Playbook
           pb_dropdown_options_by_context: options_by_context.present? ? options_by_context.to_json : nil,
           pb_dropdown_context_selector: context_selector.presence,
           pb_dropdown_clear_on_context_change: clear_on_context_change,
-          options_event_type: options_event_type.presence
+          options_event_type: options_event_type.presence,
+          pb_dropdown_enable_pill_reorder: multi_select && enable_pill_reorder ? true : nil,
+          pb_dropdown_external_drag_handle: multi_select && enable_pill_reorder && external_drag_handle ? true : nil,
+          pb_dropdown_show_pill_index: multi_select && show_pill_index ? true : nil
         ).compact
       end
 
@@ -113,6 +125,17 @@ module Playbook
         id.presence || (label.present? ? label.downcase.gsub(/\s+/, "_").gsub(/[^a-z0-9_]/, "") : nil)
       end
 
+      def autocomplete_enabled?
+        autocomplete || (allow_option_creation && variant != "quickpick")
+      end
+
+      def input_name
+        return name unless multi_select
+        return name if name.present? && name.end_with?("[]")
+
+        "#{name}[]"
+      end
+
       def error_id
         error.present? ? "#{select_id || 'dropdown_trigger'}-error" : nil
       end

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx

@@ -903,11 +903,12 @@ describe("quickpick Last Month range when current month is shorter than the prev
   }
 
   beforeEach(() => {
+    jest.useFakeTimers()
     jest.setSystemTime(new Date(2026, 3, 15, 12, 0, 0))
   })
 
   afterEach(() => {
-    jest.setSystemTime()
+    jest.useRealTimers()
   })
 
   test("selecting Last Month matches DateTime previous-month range (full March when today is in April)", async () => {
@@ -2387,6 +2388,45 @@ describe('async Dropdown empty menu', () => {
 });
 
 
+describe('autocomplete query after selection', () => {
+  test.each([undefined, false])('plain uncontrolled autocomplete clears with allowOptionCreation=%s', (allowOptionCreation) => {
+    const onSelect = jest.fn();
+    render(<Dropdown allowOptionCreation={allowOptionCreation}
+        autocomplete
+        onSelect={onSelect}
+        options={options}
+           />);
+    const input = screen.getByRole('textbox');
+    fireEvent.click(input);
+    fireEvent.change(input, { target: { value: 'Can' } });
+    fireEvent.click(screen.getByText('Canada'));
+
+    expect(input).toHaveValue('');
+    expect(onSelect).toHaveBeenCalledWith(options[1]);
+  });
+
+  test.each(['creation', 'async', 'controlled'])('%s autocomplete retains the selected label', (mode) => {
+    const Example = () => {
+      const [value, setValue] = useState(null);
+      return (
+        <Dropdown allowOptionCreation={mode === 'creation'}
+            async={mode === 'async'}
+            autocomplete
+            onSelect={setValue}
+            options={options}
+            {...(mode === 'controlled' ? { value } : {})}
+        />
+      );
+    };
+    render(<Example />);
+    const input = screen.getByRole('textbox');
+    fireEvent.click(input);
+    fireEvent.change(input, { target: { value: 'Can' } });
+    fireEvent.click(screen.getByText('Canada'));
+    expect(input).toHaveValue('Canada');
+  });
+});
+
 describe('autocomplete selection replacement', () => {
   beforeEach(() => jest.useFakeTimers());
   afterEach(() => { jest.clearAllTimers(); jest.useRealTimers(); });
@@ -2543,3 +2583,197 @@ describe('autocomplete selection replacement', () => {
     expect(onSelect).not.toHaveBeenCalled();
   });
 });
+
+describe("enablePillReorder", () => {
+  test("false does not render drag handles or draggable items", () => {
+    render(
+      <Dropdown
+          data={{ testid: testId }}
+          defaultValue={[options[0], options[1]]}
+          enablePillReorder={false}
+          multiSelect
+          options={options}
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    expect(kit.querySelector(".pb_dropdown_external_drag_handle")).not.toBeInTheDocument()
+    expect(kit.querySelector(".pb_draggable_item")).not.toBeInTheDocument()
+  })
+
+  test("renders in-pill grip icons and numbered pills", () => {
+    render(
+      <Dropdown
+          data={{ testid: testId }}
+          defaultValue={[options[0], options[1], options[2]]}
+          enablePillReorder
+          multiSelect
+          options={options}
+          showPillIndex
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    const pills = kit.querySelectorAll(".pb_form_pill_kit_icon.pb_form_pill_primary")
+
+    expect(kit.querySelector(".pb_dropdown_external_drag_handle")).not.toBeInTheDocument()
+    expect(kit.querySelectorAll(".pb_form_pill_kit_icon .pb_form_pill_icon").length).toBe(3)
+    expect(pills.length).toBe(3)
+    expect(pills[0]).toHaveTextContent("1. United States")
+    expect(pills[1]).toHaveTextContent("2. Canada")
+    expect(pills[2]).toHaveTextContent("3. Pakistan")
+  })
+
+  test("keyboard reorder moves pill position", () => {
+    const handleChange = jest.fn()
+
+    render(
+      <Dropdown
+          data={{ testid: testId }}
+          enablePillReorder
+          multiSelect
+          onChange={handleChange}
+          options={options}
+          showPillIndex
+          value={[options[0], options[1], options[2]]}
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    const pills = kit.querySelectorAll(".pb_form_pill_kit_icon.pb_form_pill_primary")
+
+    pills[1].focus()
+    fireEvent.keyDown(pills[1], { key: "ArrowLeft" })
+
+    expect(handleChange).toHaveBeenCalled()
+    const reorderedValue = handleChange.mock.calls[0][0].target.value
+    expect(reorderedValue[0].label).toBe("Canada")
+    expect(reorderedValue[1].label).toBe("United States")
+  })
+
+  test("remove still works when enablePillReorder is true", () => {
+    const handleChange = jest.fn()
+
+    render(
+      <Dropdown
+          data={{ testid: testId }}
+          enablePillReorder
+          multiSelect
+          onChange={handleChange}
+          options={options}
+          value={[options[0], options[1]]}
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    const removeButton = kit.querySelector(".pb_form_pill_close")
+
+    fireEvent.click(removeButton)
+
+    expect(handleChange).toHaveBeenCalled()
+    expect(handleChange.mock.calls[0][0].target.value.length).toBe(1)
+  })
+
+  test("externalDragHandle true renders external grip handles", () => {
+    render(
+      <Dropdown
+          data={{ testid: testId }}
+          enablePillReorder
+          externalDragHandle
+          multiSelect
+          options={options}
+          value={[options[0], options[1]]}
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    expect(kit.querySelectorAll(".pb_dropdown_external_drag_handle").length).toBe(2)
+    expect(kit.querySelectorAll(".pb_form_pill_kit_icon .pb_form_pill_icon").length).toBe(0)
+  })
+
+  test("dragging a pill shows a ghost and drop line, then commits on drop", () => {
+    const handleChange = jest.fn()
+    const originalElementFromPoint = document.elementFromPoint
+
+    render(
+      <Dropdown
+          data={{ testid: testId }}
+          enablePillReorder
+          multiSelect
+          onChange={handleChange}
+          options={options}
+          value={[options[0], options[1], options[2]]}
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    const draggableItems = kit.querySelectorAll(".pb_draggable_item")
+    draggableItems.forEach((item, index) => {
+      item.getBoundingClientRect = () => ({
+        left: index * 100,
+        right: index * 100 + 100,
+        width: 100,
+        top: 0,
+        bottom: 30,
+        height: 30,
+      })
+    })
+    document.elementFromPoint = (x) => (
+      draggableItems[Math.min(Math.floor(x / 100), draggableItems.length - 1)] || null
+    )
+
+    fireEvent.mouseDown(draggableItems[0], { button: 0, clientX: 10, clientY: 10 })
+    fireEvent.mouseMove(document, { clientX: 30, clientY: 10 })
+    fireEvent.mouseMove(document, { clientX: 280, clientY: 10 })
+
+    expect(document.querySelector(".pb_dropdown_pill_drag_preview")).toBeInTheDocument()
+    expect(draggableItems[2]).toHaveClass("pb_dropdown_drop_after")
+
+    fireEvent.mouseUp(document, { clientX: 280, clientY: 10 })
+
+    expect(document.querySelector(".pb_dropdown_pill_drag_preview")).not.toBeInTheDocument()
+    expect(handleChange).toHaveBeenCalled()
+    expect(handleChange.mock.calls[0][0].target.value.map((item) => item.label)).toEqual([
+      "Canada",
+      "Pakistan",
+      "United States",
+    ])
+
+    document.elementFromPoint = originalElementFromPoint
+  })
+
+  test("single-select is unaffected by enablePillReorder", () => {
+    render(
+      <Dropdown
+          data={{ testid: testId }}
+          defaultValue={options[0]}
+          enablePillReorder
+          options={options}
+          showPillIndex
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    expect(kit.querySelector(".pb_draggable_item")).not.toBeInTheDocument()
+    expect(kit.querySelector(".pb_form_pill_kit")).not.toBeInTheDocument()
+  })
+
+  test("works with multiSelect and autocomplete", () => {
+    render(
+      <Dropdown
+          autocomplete
+          data={{ testid: testId }}
+          enablePillReorder
+          multiSelect
+          options={options}
+          showPillIndex
+          value={[options[0], options[1]]}
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    expect(kit.querySelector(".dropdown_input")).toBeInTheDocument()
+    expect(kit.querySelectorAll(".pb_draggable_item").length).toBe(2)
+    expect(kit.querySelectorAll(".pb_form_pill_kit_icon")[0]).toHaveTextContent("1. United States")
+  })
+})