playbook_ui 16.8.0.pre.alpha.PLAY2945selectformblankselection16424 → 16.8.0.pre.alpha.PLAY2965datepickerconsoleerrors16591

data/app/pb_kits/playbook/pb_currency/_currency.tsx

@@ -59,12 +59,13 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     commaSeparator = false,
   } = props
 
+  const isAmountEmpty = (value: string | number): boolean => (
+    value === '' || value == null || (typeof value === 'string' && value.trim() === '')
+  )
+
   // Convert numeric input to string format
   const convertAmount = (input: string | number): string => {
     if (typeof input === 'number') {
-      if (input === 0 && !nullDisplay) {
-        return ""
-      }
       return input.toFixed(2)
     }
     return input
@@ -81,7 +82,9 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     variantClass = '_bold'
   }
 
-  const [whole, decimal = '00'] = currencyAmount.split('.')
+  const [wholePart, decimalPart = '00'] = currencyAmount ? currencyAmount.split('.') : ['', '00']
+  const decimal = (decimalPart || '00').padEnd(2, '0').slice(0, 2)
+  const whole = currencyAmount === '' ? '' : (wholePart === '' ? '0' : wholePart)
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
@@ -135,7 +138,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
       <Caption dark={dark}>{label}</Caption>
       <div className={`pb_currency_wrapper${variantClass || emphasizedClass}`}>
         {unstyled ? (
-          nullDisplay && !amount ? (
+          nullDisplay && isAmountEmpty(amount) ? (
             <div>{nullDisplay}</div>
           ) : (
             <>
@@ -148,7 +151,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
             </>
           )
         ) : (
-          nullDisplay && !amount ? (
+          nullDisplay && isAmountEmpty(amount) ? (
             <Title
                 className="pb_currency_value"
                 dark={dark}

data/app/pb_kits/playbook/pb_currency/currency.rb

@@ -68,7 +68,7 @@ module Playbook
       end
 
       def title_text
-        if null_display
+        if null_display && amount.blank?
           null_display
         elsif swap_negative
           absolute_amount(abbr_or_format_amount)
@@ -125,14 +125,7 @@ module Playbook
       # Convert numeric input to string format
       def convert_amount(input)
         if input.is_a?(Numeric)
-          if input.zero? && null_display.nil?
-            ""
-          else
-            format("%.2f", input)
-          end
-        # Handle string representations of zero
-        elsif input.to_s.strip.match?(/^-?0+(\.0+)?$/) && null_display.nil?
-          ""
+          Kernel.format("%.2f", input)
         else
           input.to_s
         end
@@ -142,6 +135,7 @@ module Playbook
         return "" if currency_amount.blank?
 
         value = currency_amount.split(".").first
+        value = "0" if value.blank?
         if comma_separator
           number_with_delimiter(value.gsub(",", ""))
         else
@@ -152,7 +146,8 @@ module Playbook
       def decimal_value
         return "00" if currency_amount.blank?
 
-        currency_amount.split(".")[1] || "00"
+        fraction = currency_amount.split(".")[1] || "00"
+        fraction.ljust(2, "0")[0, 2]
       end
 
       def units_element

data/app/pb_kits/playbook/pb_currency/currency.test.js

@@ -178,5 +178,48 @@ test('handles numeric amounts correctly', () => {
   expect(screen.getByTestId('test-numeric-no-symbol')).toHaveTextContent('400.50')
   expect(screen.getByTestId('test-numeric-medium-size')).toHaveTextContent('$500.55')
   expect(screen.getByTestId('test-numeric-negative')).toHaveTextContent('-$600.70')
-  expect(screen.getByTestId('test-numeric-null')).toHaveTextContent('$.00')
+  expect(screen.getByTestId('test-numeric-null')).toHaveTextContent('$0.00')
+})
+
+test('renders zero values with leading digit', () => {
+  render(
+    <>
+      <Currency
+          amount="0"
+          data={{ testid: 'test-string-zero' }}
+      />
+      <Currency
+          amount={0}
+          data={{ testid: 'test-numeric-zero' }}
+      />
+    </>
+  )
+
+  expect(screen.getByTestId('test-string-zero')).toHaveTextContent('$0.00')
+  expect(screen.getByTestId('test-numeric-zero')).toHaveTextContent('$0.00')
+})
+
+test('normalizes string zero with single decimal digit to .00', () => {
+  render(
+    <Currency
+        amount="0.0"
+        commaSeparator
+        data={{ testid: 'test-string-zero-single-decimal' }}
+    />
+  )
+
+  expect(screen.getByTestId('test-string-zero-single-decimal')).toHaveTextContent('$0.00')
+})
+
+test('nullDisplay only applies when amount is empty', () => {
+  render(
+    <Currency
+        amount="-.53"
+        data={{ testid: 'test-null-display-negative' }}
+        nullDisplay="$0.00"
+    />
+  )
+
+  expect(screen.getByTestId('test-null-display-negative')).toHaveTextContent('-$')
+  expect(screen.getByTestId('test-null-display-negative')).not.toHaveTextContent('$0.00')
 })

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -79,42 +79,57 @@
 
   <%= javascript_tag do %>
     (function() {
+      const initQuickPickChangeListener = (input) => {
+        if (!<%= object.selection_type == "quickpick" %>) return
+        if (input.dataset.quickpickInitialized) return
+
+        input.dataset.quickpickInitialized = "true"
+        input.addEventListener("change", ({ target }) => {
+          const startDate = document.getElementById("<%= object.start_date_id %>")
+          const endDate = document.getElementById("<%= object.end_date_id %>")
+          const splittedValue = target.value.split(" to ")
+          startDate.value = splittedValue[0]
+          endDate.value = splittedValue[1] ? splittedValue[1] : splittedValue[0]
+        })
+      }
+
       const loadDatePicker = () => {
-        const input = document.getElementById("<%= object.picker_id %>");
-        if (input && !input._flatpickr) {
-          datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
+        const input = document.getElementById("<%= object.picker_id %>")
+
+        if (!input || input._flatpickr) return true
+        if (typeof window.datePickerHelper !== "function") return false
 
-          if (<%= object.selection_type == "quickpick" %>) {
-            document.getElementById("<%= object.picker_id %>").addEventListener("change", ({ target }) => {
-              const startDate = document.getElementById("<%= object.start_date_id %>")
-              const endDate = document.getElementById("<%= object.end_date_id %>")
-              const splittedValue = target.value.split(" to ")
-              startDate.value = splittedValue[0]
-              endDate.value = splittedValue[1] ? splittedValue[1] : splittedValue[0]
-            })
-          }
+        window.datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
+        initQuickPickChangeListener(input)
+
+        return true
+      }
+
+      let attempts = 0
+      const retryLoad = () => {
+        if (loadDatePicker()) return
+
+        if (attempts++ < 20) {
+          setTimeout(retryLoad, 100)
         }
       }
 
-      // Try to initialize immediately if DOM is ready
       if (document.readyState === "loading") {
-        window.addEventListener("DOMContentLoaded", loadDatePicker)
+        window.addEventListener("DOMContentLoaded", retryLoad)
       } else {
-        loadDatePicker()
+        retryLoad()
       }
 
       // For dynamically added content (modals, etc.), check again after a brief delay
       setTimeout(() => {
-        const input = document.getElementById("<%= object.picker_id %>");
+        const input = document.getElementById("<%= object.picker_id %>")
         if (input && !input._flatpickr) {
-          loadDatePicker();
+          retryLoad()
         }
-      }, 100);
+      }, 100)
 
       if (<%= !object.custom_event_type.empty? %>) {
-        window.addEventListener("<%= object.custom_event_type %>", () => {
-          loadDatePicker()
-        })
+        window.addEventListener("<%= object.custom_event_type %>", retryLoad)
       }
     })()
   <% end %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dialog_submission.jsx

@@ -36,10 +36,10 @@ const DatePickerDialogSubmission = () => {
                 <Dialog.Body>
                     <DatePicker
                         defaultDate={dateFixed || undefined}
-                        key={`fixed-${pickerInstance}`}
+                        key={"fixed-" + pickerInstance}
                         label="Date"
                         onChange={(dateStr) => setDateFixed(dateStr || "")}
-                        pickerId={`datePickerFixed-${pickerInstance}`}
+                        pickerId={"datePickerFixed-" + pickerInstance}
                         staticPosition={false}
                     />
                 </Dialog.Body>

data/app/pb_kits/playbook/pb_draggable/_draggable.scss

@@ -8,6 +8,25 @@
       cursor: grab;
     }
 
+    &.is_touch_active {
+      .pb_draggable_handle,
+      .card_draggable_handle {
+        color: $text_lt_default;
+      }
+    }
+
+    .pb_draggable_handle,
+    .card_draggable_handle {
+      touch-action: none;
+      -webkit-touch-callout: none;
+      user-select: none;
+      cursor: grab;
+
+      &:active {
+        color: $text_lt_default;
+      }
+    }
+
     &.is_dragging {
       position: relative;
 

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

@@ -5,3 +5,5 @@ Use the `draggable` kit and manage state as shown.
 `draggable/draggable_container` kit creates the container within which the cards can be dragged and dropped.
 
 The Card kit is optimized to work with the draggable kit. To enable drag, use the `draggable_item` and `drag_id` props on the Card kit as shown. An additional optional boolean prop (set to true by default) of `drag_handle` is also available to show the drag handle icon.
+
+On touch devices, drag from the grip handle (no long press). Swiping the card body scrolls as usual. Keep `drag_handle` enabled on mobile. Desktop mouse drag is unchanged.

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

@@ -6,4 +6,5 @@ Use `DraggableProvider` and manage state as shown.
 
 The Card kit is optimized to work with the draggable kit. To enable drag, use the `draggableItem` and `dragId` props on the Card kit as shown. An additional optional boolean prop (set to true by default) of `dragHandle` is also available to show the drag handle icon.
 
+On touch devices, drag from the grip handle (no long press). Swiping the card body scrolls as usual. Keep `dragHandle` enabled on mobile. Desktop mouse drag is unchanged.
 

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

@@ -3,3 +3,5 @@ For a simplified version of the Draggable API for the List kit, you can do the f
 The List kit is optimized to work with the draggable kit. To enable drag, use the `enable_drag` prop on List kit with an array of the included items AND `drag_id` prop on ListItems. You will also need to include the `items` prop containing your array of listed items for the Draggable API.
 
 An additional optional boolean prop (set to true by default) of `drag_handle` is also available on ListItem kit to show the drag handle icon.
+
+On touch devices, drag from the grip handle (no long press). Swiping the rest of the row scrolls as usual. Keep `drag_handle` enabled on mobile. Desktop mouse drag is unchanged.

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

@@ -2,4 +2,6 @@ For a simplified version of the Draggable API for the List kit, you can do the f
 
 Use `DraggableProvider` and manage state as shown.
 
-The List kit is optimized to work with the draggable kit. To enable drag, use the `enableDrag` prop on List kit AND `dragId` prop on ListItem. An additional optional boolean prop (set to true by default) of `dragHandle` is also available on List kit to show the drag handle icon.
+The List kit is optimized to work with the draggable kit. To enable drag, use the `enableDrag` prop on List kit AND `dragId` prop on ListItem. An additional optional boolean prop (set to true by default) of `dragHandle` is also available on ListItem to show the drag handle icon.
+
+On touch devices, drag from the grip handle (no long press). Swiping the rest of the row scrolls as usual. Keep `dragHandle` enabled on mobile. Desktop mouse drag is unchanged.

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

@@ -1,3 +1,5 @@
 For a simplified version of the Draggable API for the SelectableList kit, you can do the following:
 
-The SelectableList kit is optimized to work with the draggable kit. To enable drag, use the `enable_drag` prop on SelectableList kit AND `drag_id` prop within the SelectableList kit prop. An additional optional boolean prop (set to true by default) of `drag_handle` is also available on SelectableList kit to show the drag handle icon.
+The SelectableList kit is optimized to work with the draggable kit. To enable drag, use the `enable_drag` prop on SelectableList kit AND `drag_id` prop within the SelectableList kit prop. An additional optional boolean prop (set to true by default) of `drag_handle` is also available on SelectableList kit to show the drag handle icon.
+
+On touch devices, drag from the grip handle (no long press). Swiping the rest of the row scrolls as usual. Keep `drag_handle` enabled on mobile. Desktop mouse drag is unchanged.

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

@@ -2,4 +2,6 @@ For a simplified version of the Draggable API for the SelectableList kit, you ca
 
 Use `DraggableProvider` and manage state as shown.
 
-The SelectableList kit is optimized to work with the draggable kit. To enable drag, use the `enableDrag` prop on SelectableList kit AND `dragId` prop on SelectableList.Item. An additional optional boolean prop (set to true by default) of `dragHandle` is also available on SelectableList kit to show the drag handle icon.
+The SelectableList kit is optimized to work with the draggable kit. To enable drag, use the `enableDrag` prop on SelectableList kit AND `dragId` prop on SelectableList.Item. An additional optional boolean prop (set to true by default) of `dragHandle` is also available on SelectableList kit to show the drag handle icon.
+
+On touch devices, drag from the grip handle (no long press). Swiping the rest of the row scrolls as usual. Keep `dragHandle` enabled on mobile. Desktop mouse drag is unchanged.

data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx

@@ -211,6 +211,14 @@ test("Attached draggable HTML attributes", () => {
   expect(item).toHaveAttribute("draggable");
 });
 
+test("draggable items expose data-pb-drag-id for touch reordering", () => {
+  render(<DefaultDraggableKit />);
+  const kit = screen.getByTestId(testId);
+
+  const item = kit.querySelector(".pb_draggable_item");
+  expect(item).toHaveAttribute("data-pb-drag-id", "1");
+});
+
 test("generated dragHandle with List", () => {
   render(<DraggableKitWithList />);
   const kit = screen.getByTestId(testId);
@@ -302,6 +310,14 @@ const DraggableMultipleContainers = () => {
   );
 };
 
+test("draggable containers expose data-pb-drag-container when provided", () => {
+  render(<DraggableMultipleContainers />);
+  const kit = screen.getByTestId(testId);
+
+  const container = kit.querySelector('[data-testid="container-To Do"]');
+  expect(container).toHaveAttribute("data-pb-drag-container", "To Do");
+});
+
 test("renders multiple containers with correct items", () => {
   render(<DraggableMultipleContainers />);
   

data/app/pb_kits/playbook/pb_draggable/draggable_container.html.erb

@@ -1,3 +1,5 @@
-<%= pb_content_tag(object.tag) do %>
+<%= pb_content_tag(object.tag, {
+  "data-pb-drag-container": object.container.presence
+}) do %>
     <%= content.presence %>
   <% end %>

data/app/pb_kits/playbook/pb_draggable/draggable_item.html.erb

@@ -1,5 +1,6 @@
 <%= pb_content_tag(object.tag, {
 id: "item_#{object.drag_id}",
+"data-pb-drag-id": object.drag_id,
 draggable: true
 }) do %>
     <%= content.presence %>

data/app/pb_kits/playbook/pb_draggable/index.js

@@ -2,7 +2,32 @@ import PbEnhancedElement from "../pb_enhanced_element";
 
 const DRAGGABLE_SELECTOR  = "[data-pb-draggable]";
 const DRAGGABLE_CONTAINER = ".pb_draggable_container";
+const DRAG_HANDLE_SELECTOR = ".pb_draggable_handle, .card_draggable_handle";
 const NEEDS_CLONE         = ["shadow", "outline", "line"];   // clone only for these types
+const DRAG_THRESHOLD_PX   = 5;
+
+const isTouchDragDevice = () => {
+  const hasTouch = "ontouchstart" in window;
+  const hasCoarsePointer =
+    typeof window.matchMedia === "function" &&
+    window.matchMedia("(hover: none) and (pointer: coarse)").matches;
+
+  return hasTouch || hasCoarsePointer;
+};
+
+const getDragIdFromElement = (element) => {
+  const item = element?.closest(".pb_draggable_item");
+  if (!item) return null;
+
+  return item.getAttribute("data-pb-drag-id") || item.id;
+};
+
+const getContainerFromElement = (element) => {
+  const container = element?.closest(DRAGGABLE_CONTAINER);
+  if (!container) return null;
+
+  return container.getAttribute("data-pb-drag-container") || container.id;
+};
 
 export default class PbDraggable extends PbEnhancedElement {
   static get selector() { return DRAGGABLE_SELECTOR; }
@@ -21,6 +46,8 @@ export default class PbDraggable extends PbEnhancedElement {
     this.hasMultipleContainers = false;
     this.dragZoneType  = "";
     this.dragZoneColor = "";
+    this.useTouchDrag = isTouchDragDevice();
+    this.touchCleanups = [];
 
     // If DOM is already loaded, bind immediately; otherwise wait for DOMContentLoaded
     if (document.readyState === "loading") {
@@ -54,9 +81,14 @@ export default class PbDraggable extends PbEnhancedElement {
 
     this.element.querySelectorAll(".pb_draggable_item")
       .forEach(item => {
-        item.addEventListener("dragstart", this.handleDragStart.bind(this));
-        item.addEventListener("dragend",   this.handleDragEnd.bind(this));
-        item.addEventListener("dragenter", this.handleDragEnter.bind(this));
+        if (this.useTouchDrag) {
+          item.setAttribute("draggable", "false");
+          this.touchCleanups.push(this.bindTouchDragForItem(item));
+        } else {
+          item.addEventListener("dragstart", this.handleDragStart.bind(this));
+          item.addEventListener("dragend",   this.handleDragEnd.bind(this));
+          item.addEventListener("dragenter", this.handleDragEnter.bind(this));
+        }
       });
 
     containers.forEach(c => {
@@ -65,8 +97,118 @@ export default class PbDraggable extends PbEnhancedElement {
     });
   }
 
+  bindTouchDragForItem(item) {
+    const handle = item.querySelector(DRAG_HANDLE_SELECTOR);
+    const dragTarget = handle || item;
+    const state = {
+      active: false,
+      dragging: false,
+      startX: 0,
+      startY: 0,
+      lastTargetDragId: null,
+    };
+
+    const resetState = () => {
+      state.active = false;
+      state.dragging = false;
+      state.lastTargetDragId = null;
+      item.classList.remove("is_touch_active");
+    };
+
+    const pointerEventFromTouch = (touch, target) => ({
+      target,
+      clientX: touch.clientX,
+      clientY: touch.clientY,
+      preventDefault: () => undefined,
+      stopPropagation: () => undefined,
+    });
+
+    const onTouchStart = (event) => {
+      if (handle && !handle.contains(event.target)) return;
+
+      const touch = event.touches[0];
+      if (!touch) return;
+
+      state.active = true;
+      state.startX = touch.clientX;
+      state.startY = touch.clientY;
+      item.classList.add("is_touch_active");
+    };
+
+    const onTouchMove = (event) => {
+      if (!state.active) return;
+
+      const touch = event.touches[0];
+      if (!touch) return;
+
+      if (!state.dragging) {
+        const deltaX = touch.clientX - state.startX;
+        const deltaY = touch.clientY - state.startY;
+
+        if (Math.hypot(deltaX, deltaY) < DRAG_THRESHOLD_PX) return;
+
+        state.dragging = true;
+        this.handleDragStart(pointerEventFromTouch(touch, item));
+      }
+
+      event.preventDefault();
+
+      const elementBelow = document.elementFromPoint(touch.clientX, touch.clientY);
+      const targetItem = elementBelow?.closest(".pb_draggable_item");
+      const targetDragId = getDragIdFromElement(elementBelow);
+
+      if (targetItem && targetItem !== item && targetDragId !== state.lastTargetDragId) {
+        state.lastTargetDragId = targetDragId;
+        this.handleDragEnter(pointerEventFromTouch(touch, targetItem));
+      }
+
+      const targetContainer = getContainerFromElement(elementBelow);
+      if (targetContainer) {
+        const containerElement = elementBelow.closest(DRAGGABLE_CONTAINER);
+        if (containerElement) {
+          this.handleDragOver(pointerEventFromTouch(touch, containerElement));
+        }
+      }
+    };
+
+    const finishTouchDrag = (touch) => {
+      if (!state.active) return;
+
+      if (state.dragging && touch) {
+        const elementBelow = document.elementFromPoint(touch.clientX, touch.clientY);
+        const containerElement = elementBelow?.closest(DRAGGABLE_CONTAINER);
+
+        if (containerElement) {
+          this.handleDrop(pointerEventFromTouch(touch, containerElement));
+        }
+
+        this.handleDragEnd({ target: item });
+      }
+
+      resetState();
+    };
+
+    const onTouchEnd = (event) => finishTouchDrag(event.changedTouches[0]);
+    const onTouchCancel = (event) => finishTouchDrag(event.changedTouches[0]);
+
+    dragTarget.addEventListener("touchstart", onTouchStart, { passive: true });
+    dragTarget.addEventListener("touchmove", onTouchMove, { passive: false });
+    dragTarget.addEventListener("touchend", onTouchEnd, { passive: true });
+    dragTarget.addEventListener("touchcancel", onTouchCancel, { passive: true });
+
+    return () => {
+      dragTarget.removeEventListener("touchstart", onTouchStart);
+      dragTarget.removeEventListener("touchmove", onTouchMove);
+      dragTarget.removeEventListener("touchend", onTouchEnd);
+      dragTarget.removeEventListener("touchcancel", onTouchCancel);
+    };
+  }
+
   /* ---------------- DRAG START ---------------- */
   handleDragStart(event) {
+    const item = event.target.closest(".pb_draggable_item");
+    if (!item) return;
+
     // Needed to prevent images within draggable items from being independently draggable
     // Needed if using Image kit in draggable items
     if (event.target.tagName.toLowerCase() === "img") {
@@ -74,9 +216,9 @@ export default class PbDraggable extends PbEnhancedElement {
       return;
     }
 
-    const container    = event.target.closest(DRAGGABLE_CONTAINER);
-    this.draggedItem   = event.target;
-    this.draggedItemId = event.target.id;
+    const container    = item.closest(DRAGGABLE_CONTAINER);
+    this.draggedItem   = item;
+    this.draggedItemId = getDragIdFromElement(item);
     this.dragZoneType  = this.element.dataset.dropZoneType  || "";
     this.dragZoneColor = this.element.dataset.dropZoneColor || "";
 
@@ -122,7 +264,7 @@ export default class PbDraggable extends PbEnhancedElement {
     }
 
     if (this.dragZoneType !== "line") {
-      requestAnimationFrame(() => (event.target.style.opacity = "0.5"));
+      requestAnimationFrame(() => (item.style.opacity = "0.5"));
     }
   }
 

data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx

@@ -54,6 +54,7 @@ const DraggableContainer = (props: DraggableContainerProps) => {
         {...dataProps}
         {...htmlProps}
         className={classes}
+        data-pb-drag-container={container}
         id={id}
         key={container}
         onDragOver={(e: Event) => handleDragOver(e, container)}

data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableItem.tsx

@@ -9,6 +9,7 @@ import {
 import { globalProps } from "../../utilities/globalProps";
 import { DraggableContext } from "../context";
 import { noop } from '../../utilities/object'
+import { bindTouchDrag, isTouchDragDevice } from "../utilities/touchDrag";
 
 type DraggableItemProps = {
   aria?: { [key: string]: string };
@@ -54,12 +55,76 @@ const DraggableItem = (props: DraggableItemProps) => {
     handleDragStart,
     handleDragEnter,
     handleDragEnd,
+    handleDrop,
+    handleDragOver,
     dropZone = 'ghost',
     dropZoneColor = 'neutral',
     direction = 'horizontal'
   } = DraggableContext();
 
   const itemRef = React.useRef<HTMLElement>(null);
+  const [useTouchDrag, setUseTouchDrag] = React.useState(false);
+  const handlersRef = React.useRef({
+    handleDragStart,
+    handleDragEnter,
+    handleDragEnd,
+    handleDrop,
+    handleDragOver,
+    onDragStart,
+    onDragEnter,
+    onDragOver,
+    onDrop,
+    onDragEnd,
+  });
+
+  handlersRef.current = {
+    handleDragStart,
+    handleDragEnter,
+    handleDragEnd,
+    handleDrop,
+    handleDragOver,
+    onDragStart,
+    onDragEnter,
+    onDragOver,
+    onDrop,
+    onDragEnd,
+  };
+
+  React.useEffect(() => {
+    setUseTouchDrag(isTouchDragDevice());
+  }, []);
+
+  React.useEffect(() => {
+    if (!useTouchDrag || !itemRef.current || !dragId) return;
+
+    return bindTouchDrag({
+      dragId,
+      container,
+      itemElement: itemRef.current,
+      handlers: {
+        onDragStart: (id, itemContainer) => {
+          handlersRef.current.handleDragStart(id, itemContainer);
+          handlersRef.current.onDragStart();
+        },
+        onDragEnter: (targetDragId, targetContainer) => {
+          handlersRef.current.handleDragEnter(targetDragId, targetContainer);
+          handlersRef.current.onDragEnter();
+        },
+        onDragOver: (event, targetContainer) => {
+          handlersRef.current.handleDragOver(event, targetContainer);
+          handlersRef.current.onDragOver();
+        },
+        onDrop: (dropContainer) => {
+          handlersRef.current.handleDrop(dropContainer);
+          handlersRef.current.onDrop();
+        },
+        onDragEnd: () => {
+          handlersRef.current.handleDragEnd();
+          handlersRef.current.onDragEnd();
+        },
+      },
+    });
+  }, [useTouchDrag, dragId, container]);
 
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
@@ -122,7 +187,8 @@ const DraggableItem = (props: DraggableItemProps) => {
         {...dataProps}
         {...htmlProps}
         className={classes}
-        draggable
+        data-pb-drag-id={dragId}
+        draggable={!useTouchDrag}
         id={id}
         key={dragId}
         onDrag={onDrag}