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

data/app/pb_kits/playbook/pb_draggable/touchDrag.test.js

@@ -0,0 +1,38 @@
+import {
+  DRAG_HANDLE_SELECTOR,
+  getContainerFromElement,
+  getDragIdFromElement,
+} from "./utilities/touchDrag";
+
+describe("touchDrag utilities", () => {
+  test("DRAG_HANDLE_SELECTOR matches standard and card handles", () => {
+    document.body.innerHTML = `
+      <div class="pb_draggable_item" data-pb-drag-id="1">
+        <span class="pb_draggable_handle"></span>
+        <span class="card_draggable_handle"></span>
+      </div>
+    `;
+
+    const item = document.querySelector(".pb_draggable_item");
+    expect(item.querySelector(DRAG_HANDLE_SELECTOR)).toBeTruthy();
+  });
+
+  test("getDragIdFromElement reads data-pb-drag-id", () => {
+    document.body.innerHTML = `
+      <div class="pb_draggable_item" data-pb-drag-id="task-1"></div>
+    `;
+
+    expect(getDragIdFromElement(document.querySelector(".pb_draggable_item"))).toBe("task-1");
+  });
+
+  test("getContainerFromElement reads data-pb-drag-container", () => {
+    document.body.innerHTML = `
+      <div class="pb_draggable_container" data-pb-drag-container="To Do">
+        <div class="pb_draggable_item" data-pb-drag-id="1"></div>
+      </div>
+    `;
+
+    const item = document.querySelector(".pb_draggable_item");
+    expect(getContainerFromElement(item)).toBe("To Do");
+  });
+});

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

@@ -0,0 +1,173 @@
+export const DRAG_HANDLE_SELECTOR = '.pb_draggable_handle, .card_draggable_handle';
+
+const DRAG_THRESHOLD_PX = 5;
+
+export const isTouchDragDevice = (): boolean => {
+  if (typeof window === 'undefined') return false;
+
+  const hasTouch = 'ontouchstart' in window;
+  const hasCoarsePointer =
+    typeof window.matchMedia === 'function' &&
+    window.matchMedia('(hover: none) and (pointer: coarse)').matches;
+
+  return hasTouch || hasCoarsePointer;
+};
+
+export const getDragIdFromElement = (element: Element | null): string | null => {
+  const item = element?.closest('.pb_draggable_item');
+  if (!item) return null;
+
+  return item.getAttribute('data-pb-drag-id');
+};
+
+export const getContainerFromElement = (element: Element | null): string | undefined => {
+  const container = element?.closest('.pb_draggable_container');
+  if (!container) return undefined;
+
+  return container.getAttribute('data-pb-drag-container') || undefined;
+};
+
+type TouchDragHandlers = {
+  onDragStart: (dragId: string, container?: string) => void;
+  onDragEnter: (targetDragId: string, container?: string) => void;
+  onDragOver: (event: Event, container?: string) => void;
+  onDrop: (container?: string) => void;
+  onDragEnd: () => void;
+};
+
+type TouchDragOptions = {
+  dragId: string;
+  container?: string;
+  itemElement: HTMLElement;
+  handlers: TouchDragHandlers;
+};
+
+type TouchDragState = {
+  active: boolean;
+  dragging: boolean;
+  startX: number;
+  startY: number;
+  lastTargetDragId: string | null;
+  lastContainer: string | undefined;
+};
+
+const createPreventableEvent = (): Event => ({
+  preventDefault: () => undefined,
+} as Event);
+
+export const bindTouchDrag = ({
+  dragId,
+  container,
+  itemElement,
+  handlers,
+}: TouchDragOptions): (() => void) => {
+  if (!isTouchDragDevice()) return () => undefined;
+
+  const handle = itemElement.querySelector(DRAG_HANDLE_SELECTOR) as HTMLElement | null;
+  const dragTarget = handle || itemElement;
+
+  const state: TouchDragState = {
+    active: false,
+    dragging: false,
+    startX: 0,
+    startY: 0,
+    lastTargetDragId: null,
+    lastContainer: undefined,
+  };
+
+  const resetState = () => {
+    state.active = false;
+    state.dragging = false;
+    state.lastTargetDragId = null;
+    state.lastContainer = undefined;
+    itemElement.classList.remove('is_touch_active');
+  };
+
+  const handleTouchStart = (event: TouchEvent) => {
+    if (handle && !handle.contains(event.target as Node)) return;
+
+    const touch = event.touches[0];
+    if (!touch) return;
+
+    state.active = true;
+    state.startX = touch.clientX;
+    state.startY = touch.clientY;
+    itemElement.classList.add('is_touch_active');
+  };
+
+  const handleTouchMove = (event: TouchEvent) => {
+    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;
+      handlers.onDragStart(dragId, container);
+    }
+
+    event.preventDefault();
+
+    const elementBelow = document.elementFromPoint(touch.clientX, touch.clientY);
+    const targetDragId = getDragIdFromElement(elementBelow);
+    const targetContainer = getContainerFromElement(elementBelow);
+
+    if (targetDragId && targetDragId !== dragId && targetDragId !== state.lastTargetDragId) {
+      state.lastTargetDragId = targetDragId;
+      handlers.onDragEnter(targetDragId, targetContainer ?? container);
+    }
+
+    if (targetContainer && targetContainer !== state.lastContainer) {
+      state.lastContainer = targetContainer;
+      handlers.onDragOver(createPreventableEvent(), targetContainer);
+    } else if (targetContainer) {
+      handlers.onDragOver(createPreventableEvent(), targetContainer);
+    }
+  };
+
+  const finishDrag = (touch: Touch | null) => {
+    if (!state.active) return;
+
+    if (state.dragging && touch) {
+      const elementBelow = document.elementFromPoint(touch.clientX, touch.clientY);
+      const dropContainer = getContainerFromElement(elementBelow) ?? container;
+
+      if (dropContainer) {
+        handlers.onDrop(dropContainer);
+      }
+
+      handlers.onDragEnd();
+    }
+
+    resetState();
+  };
+
+  const handleTouchEnd = (event: TouchEvent) => {
+    finishDrag(event.changedTouches[0] ?? null);
+  };
+
+  const handleTouchCancel = (event: TouchEvent) => {
+    if (state.dragging) {
+      handlers.onDragEnd();
+    }
+
+    finishDrag(event.changedTouches[0] ?? null);
+  };
+
+  dragTarget.addEventListener('touchstart', handleTouchStart, { passive: true });
+  dragTarget.addEventListener('touchmove', handleTouchMove, { passive: false });
+  dragTarget.addEventListener('touchend', handleTouchEnd, { passive: true });
+  dragTarget.addEventListener('touchcancel', handleTouchCancel, { passive: true });
+
+  return () => {
+    dragTarget.removeEventListener('touchstart', handleTouchStart);
+    dragTarget.removeEventListener('touchmove', handleTouchMove);
+    dragTarget.removeEventListener('touchend', handleTouchEnd);
+    dragTarget.removeEventListener('touchcancel', handleTouchCancel);
+  };
+};

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

@@ -1,7 +1,6 @@
 examples:
 
   rails:
-  - form_form_with_select_examples: Select Examples
   - form_form_with: Default
   - form_form_with_validate: Default + Validation
   - form_form_with_validation_msg: Validation + Custom Validation Message

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

@@ -8,7 +8,6 @@ examples:
   - icon_border: Icon Border
   - icon_sizes: Icon Sizes
   - icon_custom: Icon Custom
-  - icon_fa_kit: Icon with FontAwesome Kit
   - icon_color: Icon Color
 
   react:
@@ -20,7 +19,6 @@ examples:
   - icon_border: Icon Border
   - icon_sizes: Icon Sizes
   - icon_custom: Icon Custom
-  - icon_fa_kit: Icon with FontAwesome Kit
   - icon_color: Icon Color
 
   swift:

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

@@ -6,5 +6,4 @@ export { default as IconPull } from './_icon_pull.jsx'
 export { default as IconBorder } from './_icon_border.jsx'
 export { default as IconSizes } from './_icon_sizes.jsx'
 export { default as IconCustom } from './_icon_custom.jsx'
-export { default as IconFaKit} from './_icon_fa_kit.jsx'
 export { default as IconColor } from './_icon_color.jsx'

data/app/pb_kits/playbook/pb_list/_list_item.tsx

@@ -58,7 +58,10 @@ const ListItem = (props: ListItemProps) => {
         >
           {
             dragHandle && (
-              <span style={{verticalAlign: 'middle'}}>
+              <span
+                  className="pb_draggable_handle"
+                  style={{verticalAlign: 'middle'}}
+              >
                 <Body color="light">
                 <Icon 
                     icon="grip-dots-vertical"

data/app/pb_kits/playbook/pb_list/item.html.erb

@@ -9,7 +9,7 @@
                     **combined_html_options
       ) do %>
       <% if object.drag_handle %>
-        <span style="vertical-align: middle;">
+        <span class="pb_draggable_handle" style="vertical-align: middle;">
           <%= pb_rails("body") do %>
             <svg width="auto" height="auto" viewBox="0 0 31 25" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="pb_custom_icon svg-inline--fa vertical_align_middle  svg_fw"><path d="M12.904 6.355a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm0 7.5a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm1.5 6c0 .844-.703 1.5-1.5 1.5a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5zm4.5-13.5a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm1.5 6c0 .844-.703 1.5-1.5 1.5a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5zm-1.5 9a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5z" fill="#242B42"></path></svg>
           <% end %>