@mantine/core/cjs/components/Combobox/use-pills-reorder/use-pills-reorder.cjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"use-pills-reorder.cjs","names":["movePill"],"sources":["../../../../src/components/Combobox/use-pills-reorder/use-pills-reorder.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport { movePill, PillReorderPosition } from './move-pill';\n\nexport interface PillReorderProps {\n  draggable: boolean;\n  tabIndex: number;\n  'data-mantine-pill-index': number;\n  'aria-keyshortcuts': string;\n  onMouseDown: (event: React.MouseEvent<HTMLElement>) => void;\n  onDragStart: (event: React.DragEvent<HTMLElement>) => void;\n  onDragOver: (event: React.DragEvent<HTMLElement>) => void;\n  onDragLeave: (event: React.DragEvent<HTMLElement>) => void;\n  onDrop: (event: React.DragEvent<HTMLElement>) => void;\n  onDragEnd: (event: React.DragEvent<HTMLElement>) => void;\n  onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;\n}\n\nexport interface PillsReorderListProps {\n  ref?: (node: HTMLDivElement | null) => void;\n}\n\nexport interface UsePillsReorderInput<T> {\n  value: T[];\n  onChange: (value: T[]) => void;\n  enabled: boolean | undefined;\n}\n\ninterface PillDragState {\n  draggedIndex: number | null;\n  currentDropTarget: HTMLElement | null;\n}\n\ninterface PendingFocus<T> {\n  container: HTMLElement | null;\n  index: number;\n  expectedValue: T[];\n}\n\nconst findSearchInput = (container: HTMLElement): HTMLInputElement | null => {\n  const lastChild = container.lastElementChild;\n  if (!lastChild) {\n    return null;\n  }\n  if (lastChild instanceof HTMLInputElement) {\n    return lastChild;\n  }\n  return lastChild.querySelector<HTMLInputElement>('input');\n};\n\nconst valuesMatch = <T>(a: T[], b: T[]): boolean => {\n  if (a === b) {\n    return true;\n  }\n  if (a.length !== b.length) {\n    return false;\n  }\n  for (let i = 0; i < a.length; i += 1) {\n    if (a[i] !== b[i]) {\n      return false;\n    }\n  }\n  return true;\n};\n\nexport function usePillsReorder<T>({ value, onChange, enabled }: UsePillsReorderInput<T>) {\n  const dragStateRef = useRef<PillDragState>({ draggedIndex: null, currentDropTarget: null });\n  const pendingFocusRef = useRef<PendingFocus<T> | null>(null);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const valueRef = useRef(value);\n  valueRef.current = value;\n\n  useEffect(() => {\n    const pending = pendingFocusRef.current;\n    if (!pending) {\n      return;\n    }\n    pendingFocusRef.current = null;\n    if (!valuesMatch(valueRef.current, pending.expectedValue)) {\n      return;\n    }\n    pending.container\n      ?.querySelector<HTMLElement>(`[data-mantine-pill-index=\"${pending.index}\"]`)\n      ?.focus();\n  });\n\n  const setContainer = useCallback((node: HTMLDivElement | null) => {\n    containerRef.current = node;\n  }, []);\n\n  const getListProps = (): PillsReorderListProps => {\n    if (!enabled) {\n      return {};\n    }\n    return { ref: setContainer };\n  };\n\n  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (!enabled || event.key !== 'ArrowLeft') {\n      return;\n    }\n\n    const input = event.currentTarget;\n    const caretAtStart =\n      input.value.length === 0 || (input.selectionStart === 0 && input.selectionEnd === 0);\n    if (!caretAtStart) {\n      return;\n    }\n\n    const container = containerRef.current;\n    if (!container) {\n      return;\n    }\n\n    const pills = container.querySelectorAll<HTMLElement>('[data-mantine-pill-index]');\n    if (pills.length === 0) {\n      return;\n    }\n\n    event.preventDefault();\n    pills[pills.length - 1].focus();\n  };\n\n  const getPillProps = (index: number): PillReorderProps | undefined => {\n    if (!enabled) {\n      return undefined;\n    }\n\n    return {\n      draggable: true,\n      tabIndex: -1,\n      'data-mantine-pill-index': index,\n      'aria-keyshortcuts': 'Alt+ArrowLeft Alt+ArrowRight',\n      onMouseDown: (event) => {\n        if (event.button === 0) {\n          event.stopPropagation();\n        }\n      },\n      onDragStart: (event) => {\n        event.stopPropagation();\n        event.dataTransfer.effectAllowed = 'move';\n        event.dataTransfer.setData('text/plain', String(index));\n        dragStateRef.current.draggedIndex = index;\n\n        const target = event.currentTarget;\n        const rect = target.getBoundingClientRect();\n        const ghost = target.cloneNode(true) as HTMLElement;\n        ghost.removeAttribute('data-dragging');\n        ghost.removeAttribute('data-drag-over');\n        ghost.style.position = 'fixed';\n        ghost.style.top = '-9999px';\n        ghost.style.left = '-9999px';\n        ghost.style.width = `${rect.width}px`;\n        ghost.style.height = `${rect.height}px`;\n        ghost.style.pointerEvents = 'none';\n        document.body.appendChild(ghost);\n        event.dataTransfer.setDragImage(ghost, event.clientX - rect.left, event.clientY - rect.top);\n\n        setTimeout(() => ghost.parentNode?.removeChild(ghost), 0);\n\n        requestAnimationFrame(() => {\n          target.setAttribute('data-dragging', 'true');\n        });\n      },\n      onDragOver: (event) => {\n        const { draggedIndex } = dragStateRef.current;\n        if (draggedIndex === null || draggedIndex === index) {\n          return;\n        }\n\n        const target = event.currentTarget;\n        const rect = target.getBoundingClientRect();\n        const x = event.clientX - rect.left;\n        const isRtl = getComputedStyle(target).direction === 'rtl';\n        const isStart = isRtl ? x > rect.width / 2 : x < rect.width / 2;\n        const position: PillReorderPosition = isStart ? 'before' : 'after';\n\n        event.preventDefault();\n        event.stopPropagation();\n        event.dataTransfer.dropEffect = 'move';\n\n        const prevTarget = dragStateRef.current.currentDropTarget;\n        if (prevTarget && prevTarget !== target) {\n          prevTarget.removeAttribute('data-drag-over');\n        }\n\n        target.setAttribute('data-drag-over', position);\n        dragStateRef.current.currentDropTarget = target;\n      },\n      onDragLeave: (event) => {\n        const target = event.currentTarget;\n        const related = event.relatedTarget as Node | null;\n        if (related && target.contains(related)) {\n          return;\n        }\n\n        target.removeAttribute('data-drag-over');\n        if (dragStateRef.current.currentDropTarget === target) {\n          dragStateRef.current.currentDropTarget = null;\n        }\n      },\n      onDrop: (event) => {\n        event.preventDefault();\n        event.stopPropagation();\n\n        const target = event.currentTarget;\n        const position = target.getAttribute('data-drag-over') as PillReorderPosition | null;\n        target.removeAttribute('data-drag-over');\n\n        const { draggedIndex } = dragStateRef.current;\n        if (draggedIndex !== null && position && draggedIndex !== index) {\n          const nextValue = movePill(valueRef.current, draggedIndex, index, position);\n          if (nextValue !== valueRef.current) {\n            onChange(nextValue);\n          }\n        }\n\n        dragStateRef.current.draggedIndex = null;\n        dragStateRef.current.currentDropTarget = null;\n      },\n      onDragEnd: (event) => {\n        const target = event.currentTarget;\n        target.removeAttribute('data-dragging');\n\n        const prevTarget = dragStateRef.current.currentDropTarget;\n        if (prevTarget) {\n          prevTarget.removeAttribute('data-drag-over');\n        }\n\n        dragStateRef.current.draggedIndex = null;\n        dragStateRef.current.currentDropTarget = null;\n      },\n      onKeyDown: (event) => {\n        if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') {\n          return;\n        }\n\n        const target = event.currentTarget;\n        const isRtl = getComputedStyle(target).direction === 'rtl';\n        const movingForward = isRtl ? event.key === 'ArrowLeft' : event.key === 'ArrowRight';\n        const targetIndex = movingForward ? index + 1 : index - 1;\n\n        if (event.altKey) {\n          if (targetIndex < 0 || targetIndex >= valueRef.current.length) {\n            return;\n          }\n\n          event.preventDefault();\n          event.stopPropagation();\n\n          const position: PillReorderPosition = movingForward ? 'after' : 'before';\n          const nextValue = movePill(valueRef.current, index, targetIndex, position);\n          if (nextValue === valueRef.current) {\n            return;\n          }\n\n          pendingFocusRef.current = {\n            container: target.parentElement,\n            index: targetIndex,\n            expectedValue: nextValue,\n          };\n          onChange(nextValue);\n          return;\n        }\n\n        if (targetIndex < 0) {\n          return;\n        }\n\n        const container = target.parentElement;\n        if (!container) {\n          return;\n        }\n\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (targetIndex >= valueRef.current.length) {\n          findSearchInput(container)?.focus();\n          return;\n        }\n\n        container.querySelector<HTMLElement>(`[data-mantine-pill-index=\"${targetIndex}\"]`)?.focus();\n      },\n    };\n  };\n\n  return { getPillProps, getListProps, handleInputKeyDown };\n}\n"],"mappings":"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"}