playbook_ui 18.2.0 → 18.3.0.pre.alpha.PLAY3342advancedtablereactmulticolumnselectablerow21082

data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx

@@ -358,7 +358,7 @@ test('enablePillReorder false does not render drag handles', () => {
   expect(kit.querySelector('.pb_typeahead_pill_drag_handle')).not.toBeInTheDocument()
 })
 
-test('enablePillReorder renders drag handles and numbered pills', () => {
+test('enablePillReorder renders in-pill grip icons and numbered pills by default', () => {
   render(
     <Typeahead
         data={{ testid: 'reorder-test' }}
@@ -371,10 +371,11 @@ test('enablePillReorder renders drag handles and numbered pills', () => {
   )
 
   const kit = screen.getByTestId('reorder-test')
-  const handles = kit.querySelectorAll('.pb_typeahead_pill_drag_handle')
-  const pills = kit.querySelectorAll('.pb_form_pill_kit.pb_form_pill_primary')
+  // FormPill uses pb_form_pill_kit_icon when the in-pill grip is present
+  const pills = kit.querySelectorAll('.pb_form_pill_kit_icon.pb_form_pill_primary')
 
-  expect(handles.length).toBe(3)
+  expect(kit.querySelector('.pb_typeahead_pill_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. Orange')
   expect(pills[1]).toHaveTextContent('2. Red')
@@ -397,15 +398,21 @@ test('keyboard reorder moves pill position when enablePillReorder is true', () =
   )
 
   const kit = screen.getByTestId('keyboard-reorder-test')
-  const pills = kit.querySelectorAll('.pb_form_pill_kit.pb_form_pill_primary')
+  const pills = kit.querySelectorAll('.pb_form_pill_kit_icon.pb_form_pill_primary')
 
   pills[1].focus()
-  fireEvent.keyDown(pills[1], { key: 'ArrowLeft', ctrlKey: true, shiftKey: true })
+  fireEvent.keyDown(pills[1], { key: 'ArrowLeft' })
 
   expect(handleChange).toHaveBeenCalled()
   const reorderedValue = handleChange.mock.calls[0][0]
   expect(reorderedValue[0].label).toBe('Red')
   expect(reorderedValue[1].label).toBe('Orange')
+
+  fireEvent.keyDown(pills[1], { key: 'ArrowRight' })
+
+  const movedRightValue = handleChange.mock.calls[1][0]
+  expect(movedRightValue[1].label).toBe('Green')
+  expect(movedRightValue[2].label).toBe('Red')
 })
 
 test('remove still works when enablePillReorder is true', () => {
@@ -432,14 +439,13 @@ test('remove still works when enablePillReorder is true', () => {
   expect(updatedValue.length).toBe(1)
 })
 
-test('pillDragHandle false hides grip and enables whole-pill pointer drag', () => {
+test('default whole-pill drag hides external handle and disables HTML5 draggable', () => {
   render(
     <Typeahead
         data={{ testid: 'no-handle-reorder-test' }}
         enablePillReorder
         isMulti
         options={options}
-        pillDragHandle={false}
         value={[options[0], options[1], options[2]]}
     />
   )
@@ -453,8 +459,26 @@ test('pillDragHandle false hides grip and enables whole-pill pointer drag', () =
   })
 })
 
-test('pill reorder commit dispatches custom event on drop', () => {
+test('externalDragHandle true renders external grip handles', () => {
+  render(
+    <Typeahead
+        data={{ testid: 'external-handle-test' }}
+        enablePillReorder
+        externalDragHandle
+        isMulti
+        options={options}
+        value={[options[0], options[1]]}
+    />
+  )
+
+  const kit = screen.getByTestId('external-handle-test')
+  expect(kit.querySelectorAll('.pb_typeahead_pill_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 reorderHandler = jest.fn()
+  const originalElementFromPoint = document.elementFromPoint
 
   render(
     <Typeahead
@@ -474,19 +498,141 @@ test('pill reorder commit dispatches custom event on drop', () => {
 
   const kit = screen.getByTestId('reorder-event-test')
   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 })
+  })
+  // pb_draggable hit-testing (via axe polyfill) needs elementFromPoint in jsdom
+  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: 120, clientY: 10 })
+
+  expect(document.querySelector('.pb_typeahead_pill_drag_preview')).toBeInTheDocument()
+  expect(kit.querySelector('.pb_typeahead_draggable_pills')).toHaveClass('active')
+  expect(kit.querySelector('.pb_typeahead_drop_before, .pb_typeahead_drop_after')).not.toBeInTheDocument()
+
+  // Slightly below the pill row still targets a middle position; far below targets nothing
+  fireEvent.mouseMove(document, { clientX: 220, clientY: 40 })
+  expect(draggableItems[2]).toHaveClass('pb_typeahead_drop_before')
+  fireEvent.mouseMove(document, { clientX: 220, clientY: 1000 })
+  expect(kit.querySelector('.pb_typeahead_drop_before, .pb_typeahead_drop_after')).not.toBeInTheDocument()
 
-  fireEvent.dragStart(draggableItems[2])
-  fireEvent.dragEnter(draggableItems[0])
-  fireEvent.dragEnd(draggableItems[2])
+  fireEvent.mouseMove(document, { clientX: 280, clientY: 10 })
+  expect(draggableItems[2]).toHaveClass('pb_typeahead_drop_after')
 
+  // Past the last pill (e.g. over the input) still targets the end
+  fireEvent.mouseMove(document, { clientX: 450, clientY: 20 })
+  expect(draggableItems[2]).toHaveClass('pb_typeahead_drop_after')
+
+  fireEvent.mouseUp(document, { clientX: 450, clientY: 20 })
+
+  expect(document.querySelector('.pb_typeahead_pill_drag_preview')).not.toBeInTheDocument()
   expect(reorderHandler).toHaveBeenCalled()
+  expect(reorderHandler.mock.calls[0][0].detail.map((item) => item.label)).toEqual(['Red', 'Green', 'Orange'])
 
+  document.elementFromPoint = originalElementFromPoint
   document.removeEventListener(
     'pb-typeahead-kit-reorder-event-typeahead-result-option-reorder',
     reorderHandler,
   )
 })
 
+test('a single move that starts the drag still seeds the ghost and commits on drop', () => {
+  const reorderHandler = jest.fn()
+  const originalElementFromPoint = document.elementFromPoint
+
+  render(
+    <Typeahead
+        data={{ testid: 'single-move-reorder-test' }}
+        enablePillReorder
+        id="single-move-reorder-typeahead"
+        isMulti
+        options={options}
+        value={[options[0], options[1], options[2]]}
+    />
+  )
+
+  document.addEventListener(
+    'pb-typeahead-kit-single-move-reorder-typeahead-result-option-reorder',
+    reorderHandler,
+  )
+
+  const kit = screen.getByTestId('single-move-reorder-test')
+  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
+
+  // One move both starts the drag and is the only pointer sample before drop
+  fireEvent.mouseDown(draggableItems[0], { button: 0, buttons: 1, clientX: 10, clientY: 10 })
+  fireEvent.mouseMove(document, { buttons: 1, clientX: 280, clientY: 10 })
+
+  expect(document.querySelector('.pb_typeahead_pill_drag_preview')).toBeInTheDocument()
+  expect(draggableItems[2]).toHaveClass('pb_typeahead_drop_after')
+
+  fireEvent.mouseUp(document, { clientX: 280, clientY: 10 })
+
+  expect(reorderHandler).toHaveBeenCalled()
+  expect(reorderHandler.mock.calls[0][0].detail.map((item) => item.label)).toEqual(['Red', 'Green', 'Orange'])
+
+  document.elementFromPoint = originalElementFromPoint
+  document.removeEventListener(
+    'pb-typeahead-kit-single-move-reorder-typeahead-result-option-reorder',
+    reorderHandler,
+  )
+})
+
+test('dragging from an external handle shows a ghost and drop line, then commits on drop', () => {
+  const reorderHandler = jest.fn()
+  const originalElementFromPoint = document.elementFromPoint
+
+  render(
+    <Typeahead
+        data={{ testid: 'external-handle-drag-test' }}
+        enablePillReorder
+        externalDragHandle
+        id="external-handle-drag-typeahead"
+        isMulti
+        options={options}
+        value={[options[0], options[1], options[2]]}
+    />
+  )
+
+  document.addEventListener(
+    'pb-typeahead-kit-external-handle-drag-typeahead-result-option-reorder',
+    reorderHandler,
+  )
+
+  const kit = screen.getByTestId('external-handle-drag-test')
+  const draggableItems = kit.querySelectorAll('.pb_draggable_item')
+  const handles = kit.querySelectorAll('.pb_typeahead_pill_drag_handle')
+  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(handles[0], { button: 0, clientX: 10, clientY: 10 })
+  // First move starts the drag and mounts the drop-indicator effect; later moves hit its listeners
+  fireEvent.mouseMove(document, { clientX: 30, clientY: 10 })
+  fireEvent.mouseMove(document, { clientX: 280, clientY: 10 })
+  expect(document.querySelector('.pb_typeahead_pill_drag_preview')).toBeInTheDocument()
+  expect(draggableItems[2]).toHaveClass('pb_typeahead_drop_after')
+
+  fireEvent.mouseUp(document, { clientX: 280, clientY: 10 })
+
+  expect(document.querySelector('.pb_typeahead_pill_drag_preview')).not.toBeInTheDocument()
+  expect(reorderHandler).toHaveBeenCalled()
+  expect(reorderHandler.mock.calls[0][0].detail.map((item) => item.label)).toEqual(['Red', 'Green', 'Orange'])
+
+  document.elementFromPoint = originalElementFromPoint
+  document.removeEventListener(
+    'pb-typeahead-kit-external-handle-drag-typeahead-result-option-reorder',
+    reorderHandler,
+  )
+})
+
 test('publishes data-default-value from initial defaultValue', () => {
   render(
     <Typeahead
@@ -630,3 +776,130 @@ test(':set calls onChange but does not dispatch result-option-select', async ()
     selectHandler,
   )
 })
+
+
+test('required Typeahead in validated form shows its own error and stays mounted after selection', async () => {
+  render(
+    <form data-pb-form-validation="true">
+      <Typeahead
+          data={{ testid: 'required-validated-typeahead' }}
+          isMulti={false}
+          name="favorite_color"
+          options={options}
+          required
+          validation={{ message: 'Please select a color' }}
+      />
+    </form>
+  )
+
+  const kit = screen.getByTestId('required-validated-typeahead')
+  const requiredInput = kit.querySelector('input[required]')
+  expect(requiredInput).toBeInTheDocument()
+
+  act(() => {
+    requiredInput.dispatchEvent(new Event('invalid', { bubbles: false, cancelable: true }))
+  })
+
+  await waitFor(() => {
+    expect(kit.querySelector('.pb_body_kit_negative')).toHaveTextContent('Please select a color')
+  })
+
+  // PbFormValidation must not own this input — no injected sibling error on the
+  // react-select RequiredInput parent (that path caused removeChild crashes).
+  const injectedSibling = Array.from(requiredInput.parentElement.children).find(
+    (child) => child.classList?.contains('pb_body_kit_negative')
+  )
+  expect(injectedSibling).toBeUndefined()
+
+  const control = kit.querySelector('.typeahead-kit-select__control')
+  fireEvent.mouseDown(control)
+
+  await waitFor(() => {
+    expect(document.querySelector('.typeahead-kit-select__option')).toBeInTheDocument()
+  })
+
+  const option = document.querySelector('.typeahead-kit-select__option')
+  fireEvent.click(option)
+
+  await waitFor(() => {
+    const selectedKit = screen.getByTestId('required-validated-typeahead')
+    expect(selectedKit.querySelector('.typeahead-kit-select__single-value')).toHaveTextContent('Orange')
+    expect(selectedKit.querySelector('.pb_body_kit_negative')).not.toBeInTheDocument()
+  })
+})
+
+test('required Typeahead restores validation error after clear and resubmit', async () => {
+  render(
+    <form data-pb-form-validation="true">
+      <Typeahead
+          data={{ testid: 'required-clear-resubmit-typeahead' }}
+          defaultValue={options[0]}
+          isMulti={false}
+          name="favorite_color"
+          options={options}
+          required
+          validation={{ message: 'Please select a color' }}
+      />
+    </form>
+  )
+
+  const kit = screen.getByTestId('required-clear-resubmit-typeahead')
+  const clearIndicator = kit.querySelector('.typeahead-kit-select__clear-indicator')
+  expect(clearIndicator).toBeInTheDocument()
+  fireEvent.mouseDown(clearIndicator)
+
+  await waitFor(() => {
+    expect(kit.querySelector('input[required]')).toBeInTheDocument()
+  })
+
+  const requiredInput = kit.querySelector('input[required]')
+  act(() => {
+    requiredInput.dispatchEvent(new Event('invalid', { bubbles: false, cancelable: true }))
+  })
+
+  await waitFor(() => {
+    expect(kit.querySelector('.pb_body_kit_negative')).toHaveTextContent('Please select a color')
+  })
+})
+
+test('required Typeahead suppresses native invalid UI only inside validated Playbook forms', () => {
+  const { unmount } = render(
+    <form data-pb-form-validation="true">
+      <Typeahead
+          data={{ testid: 'native-invalid-validated' }}
+          isMulti={false}
+          name="color"
+          options={options}
+          required
+      />
+    </form>
+  )
+
+  let requiredInput = screen.getByTestId('native-invalid-validated').querySelector('input[required]')
+  const validatedEvent = new Event('invalid', { bubbles: false, cancelable: true })
+  act(() => {
+    requiredInput.dispatchEvent(validatedEvent)
+  })
+  expect(validatedEvent.defaultPrevented).toBe(true)
+
+  unmount()
+
+  render(
+    <form>
+      <Typeahead
+          data={{ testid: 'native-invalid-unvalidated' }}
+          isMulti={false}
+          name="color"
+          options={options}
+          required
+      />
+    </form>
+  )
+
+  requiredInput = screen.getByTestId('native-invalid-unvalidated').querySelector('input[required]')
+  const unvalidatedEvent = new Event('invalid', { bubbles: false, cancelable: true })
+  act(() => {
+    requiredInput.dispatchEvent(unvalidatedEvent)
+  })
+  expect(unvalidatedEvent.defaultPrevented).toBe(false)
+})

data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx

@@ -93,8 +93,8 @@ type TypeaheadProps = {
   clearOnContextChange?: boolean
   preserveSearchInput?: boolean
   enablePillReorder?: boolean
+  externalDragHandle?: boolean
   showPillIndex?: boolean
-  pillDragHandle?: boolean
   // Passed through to react-select; merged when menu is portaled to `document.body`.
   styles?: TypeaheadStylesConfig
 } & GlobalProps
@@ -145,11 +145,14 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(
     clearOnContextChange = false,
     preserveSearchInput = false, // Default to false to maintain backward compatibility
     enablePillReorder = false,
+    externalDragHandle = false,
     showPillIndex = false,
-    pillDragHandle = true,
     styles: stylesProp,
     ...props
-  }: TypeaheadProps) => {
+  }: TypeaheadProps, _ref) => {
+    // Accept the ref without attaching it, preserving the existing ref behavior.
+    void _ref
+
     // State to manage the input value when preserveSearchInput is true
     const [inputValue, setInputValue] = useState("")
     // State to track if form has been submitted to control validation display for react rendered rails kit
@@ -541,20 +544,25 @@ const resolvedLoadOptions =
 
     const [contextValue, setContextValue] = useState("")
 
-    // Add listener for form validation to track when validation should be shown (needed for react rendered rails kit)
+    // Track form submit validation for react-rendered Typeahead (own error UI).
+    // When inside pb_form_with validate: true, suppress the browser's native
+    // invalid UI — PbFormValidation skips this kit so it must not double-show.
     useEffect(() => {
       const handleInvalid = (event: Event) => {
         const target = event.target as HTMLInputElement
-        const typeaheadContainer = target.closest(
-          '[data-pb-react-component="Typeahead"]',
-        )
+        if (!kitContainerRef.current?.contains(target)) return
 
-        if (typeaheadContainer) {
-          // Check if this invalid event is specifically for our typeahead by comparing names so we do not have to require ids
-          const invalidInputName = target.name || target.getAttribute("name")
-          if (invalidInputName === name) {
-            setFormSubmitted(true)
-          }
+        // Match by name so we do not have to require ids
+        const invalidInputName = target.name || target.getAttribute("name")
+        if (invalidInputName !== name) return
+
+        setFormSubmitted(true)
+
+        const validatedForm = target.closest(
+          'form[data-pb-form-validation="true"]',
+        )
+        if (validatedForm) {
+          event.preventDefault()
         }
       }
       document.addEventListener("invalid", handleInvalid, true)
@@ -743,9 +751,9 @@ const resolvedLoadOptions =
           classNamePrefix="typeahead-kit-select"
           enablePillReorder={isPillReorderEnabled}
           error={errorDisplay}
+          externalDragHandle={externalDragHandle}
           isDisabled={disabled}
           onChange={handleOnChange}
-          pillDragHandle={pillDragHandle}
           ref={selectRef}
           showPillIndex={showPillIndex}
       />

data/app/pb_kits/playbook/pb_typeahead/components/PillRenderer.tsx

@@ -33,15 +33,16 @@ type PillColorType =
 type PillRendererProps = {
   data: SelectValueType
   dark?: boolean
+  externalDragHandle?: boolean
   index?: number
   isFocused?: boolean
   multiKit?: string
   onKeyboardReorder?: (direction: 'left' | 'right') => void
   onRemove?: (event: React.MouseEvent | React.KeyboardEvent) => void
   pillColor?: PillColorType
-  pillDragHandle?: boolean
   removeProps?: { onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void }
   selectProps?: Record<string, unknown>
+  showDragIcon?: boolean
   showPillIndex?: boolean
   totalCount?: number
   truncate?: 'none' | 1 | 2 | 3 | 4 | 5
@@ -51,14 +52,15 @@ type PillRendererProps = {
 const PillRenderer = ({
   data,
   dark,
+  externalDragHandle = false,
   index = 0,
   isFocused = false,
   multiKit = '',
   onKeyboardReorder,
   onRemove,
   pillColor,
-  pillDragHandle = false,
   removeProps,
+  showDragIcon = false,
   showPillIndex = false,
   totalCount = 0,
   truncate,
@@ -68,8 +70,9 @@ const PillRenderer = ({
   const baseLabel = data.label || data.name || ''
   const label = showPillIndex ? `${index + 1}. ${baseLabel}` : baseLabel
   const pillClassName = isFocused ? 'pb_form_pill_or_badge_focused' : ''
+  const pillIcon = showDragIcon ? 'grip-dots-vertical' : ''
   const positionLabel = totalCount > 0
-    ? `${baseLabel}, position ${index + 1} of ${totalCount}, press Control+Shift+Arrow keys to reorder`
+    ? `${baseLabel}, position ${index + 1} of ${totalCount}, press Left or Right Arrow keys to reorder`
     : baseLabel
 
   const handleRemove = (event: React.MouseEvent | React.KeyboardEvent) => {
@@ -85,14 +88,13 @@ const PillRenderer = ({
       event.preventDefault()
       event.stopPropagation()
       handleRemove(event)
-    } else if (event.key === 'ArrowLeft' && event.ctrlKey && event.shiftKey) {
+    } else if (onKeyboardReorder && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
       event.preventDefault()
       event.stopPropagation()
-      onKeyboardReorder?.('left')
-    } else if (event.key === 'ArrowRight' && event.ctrlKey && event.shiftKey) {
-      event.preventDefault()
-      event.stopPropagation()
-      onKeyboardReorder?.('right')
+      const pill = event.currentTarget
+      onKeyboardReorder(event.key === 'ArrowLeft' ? 'left' : 'right')
+      // Reordering moves the pill's DOM node, which drops focus; restore it after the update
+      requestAnimationFrame(() => pill.focus())
     } else if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
       const selectInput = event.currentTarget.closest('.pb_typeahead_kit')?.querySelector('input')
       if (selectInput instanceof HTMLInputElement) {
@@ -105,7 +107,7 @@ const PillRenderer = ({
 
   const pillContent = (
     <>
-      {pillDragHandle && (
+      {externalDragHandle && (
         <span
             aria-hidden="true"
             className="pb_draggable_handle pb_typeahead_pill_drag_handle"
@@ -144,6 +146,7 @@ const PillRenderer = ({
             color={pillColor}
             dark={dark}
             htmlOptions={{ 'aria-label': positionLabel, onKeyDown: handleKeyDown }}
+            icon={pillIcon}
             marginRight="xs"
             name={label}
             size={multiKit === 'smallPill' ? 'small' : ''}
@@ -161,6 +164,7 @@ const PillRenderer = ({
             color={pillColor}
             dark={dark}
             htmlOptions={{ 'aria-label': positionLabel, onKeyDown: handleKeyDown }}
+            icon={pillIcon}
             marginRight="xs"
             name=""
             size={multiKit === 'smallPill' ? 'small' : ''}
@@ -173,7 +177,7 @@ const PillRenderer = ({
     </>
   )
 
-  if (pillDragHandle) {
+  if (externalDragHandle) {
     return (
       <span className="pb_typeahead_pill_with_handle">
         {pillContent}