@opentrons/components 0.1.6-alpha.9 → 0.1.7-alpha.1

package/src/helix-design-system/product/typography.ts

@@ -0,0 +1,151 @@
+/**
+ * Note: these values are only currently correct for desktop and should not be used on ODD.
+ */
+
+// Valid for most typography styles
+export const fontFamily = 'Public Sans'
+
+export const fontWeightRegular = '400'
+export const fontWeightSemiBold = '600'
+export const fontWeightBold = '700'
+
+// Display styles
+const fontFamilyDisplay = fontFamily
+const fontSizeDisplay = '2.4375rem' // 39px
+const lineHeightDisplay = '3rem' // 48px
+
+// Display-Bold
+export const fontSizeDisplayBold = fontSizeDisplay
+export const lineHeightDisplayBold = lineHeightDisplay
+export const fontFamilyDisplayBold = fontFamilyDisplay
+export const fontWeightDisplayBold = fontWeightBold
+export const fontStyleDisplayBold = `${fontWeightDisplayBold} ${fontSizeDisplayBold}/${lineHeightDisplayBold} ${fontFamilyDisplayBold}`
+
+// Heading-Large
+const fontSizeHeadingLarge = '1.625rem' // 26px
+const lineHeightHeadingLarge = '2rem' // 32px
+const fontFamilyHeadingLarge = fontFamily
+
+// Heading-Large-Regular
+export const fontFamilyHeadingLargeRegular = fontFamilyHeadingLarge
+export const fontSizeHeadingLargeRegular = fontSizeHeadingLarge
+export const lineHeightHeadingLargeRegular = lineHeightHeadingLarge
+export const fontWeightHeadingLargeRegular = fontWeightRegular
+export const fontStyleHeadingLargeRegular = `${fontWeightHeadingLargeRegular} ${fontSizeHeadingLargeRegular}/${lineHeightHeadingLargeRegular} ${fontFamilyHeadingLargeRegular}`
+
+// Heading-Large-Bold
+export const fontFamilyHeadingLargeBold = fontFamilyHeadingLarge
+export const fontSizeHeadingLargeBold = fontSizeHeadingLarge
+export const lineHeightHeadingLargeBold = lineHeightHeadingLarge
+export const fontWeightHeadingLargeBold = fontWeightBold
+export const fontStyleHeadingLargeBold = `${fontWeightHeadingLargeBold} ${fontSizeHeadingLargeBold}/${lineHeightHeadingLargeBold} ${fontFamilyHeadingLargeBold}`
+
+// Heading-Medium
+const fontSizeHeadingMedium = '1.4375rem' // 23px
+const lineHeightHeadingMedium = '1.75rem' // 28px
+const fontFamilyHeadingMedium = fontFamily
+
+// Heading-Medium-Regular
+export const fontSizeHeadingMediumSemiBold = fontSizeHeadingMedium
+export const lineHeightHeadingMediumSemiBold = lineHeightHeadingMedium
+
+export const fontFamilyHeadingMediumSemiBold = fontFamilyHeadingMedium
+export const fontWeightHeadingMediumSemiBold = fontWeightSemiBold
+export const fontStyleHeadingMediumSemiBold = `${fontWeightHeadingMediumSemiBold} ${fontSizeHeadingMediumSemiBold}/${lineHeightHeadingMediumSemiBold} ${fontFamilyHeadingMediumSemiBold}`
+export const fontStyleHeadingMediumBold = `${fontWeightBold} ${fontSizeHeadingMedium}/${lineHeightHeadingMediumSemiBold} ${fontFamilyHeadingMediumSemiBold}`
+
+// Heading-Small
+const fontSizeHeadingSmall = '1.125rem' // 18px
+const lineHeightHeadingSmall = '1.5rem' // 24px
+const fontFamilyHeadingSmall = fontFamily
+
+// Heading-Small-Regular
+export const fontSizeHeadingSmallRegular = fontSizeHeadingSmall
+export const lineHeightHeadingSmallRegular = lineHeightHeadingSmall
+export const fontFamilyHeadingSmallRegular = fontFamilyHeadingSmall
+export const fontWeightHeadingSmallRegular = '400'
+export const fontStyleHeadingSmallRegular = `${fontWeightHeadingSmallRegular} ${fontSizeHeadingSmallRegular}/${lineHeightHeadingSmallRegular} ${fontFamilyHeadingSmallRegular}`
+
+// Heading-Small-Bold
+export const fontSizeHeadingSmallBold = fontSizeHeadingSmall
+export const lineHeightHeadingSmallBold = lineHeightHeadingSmall
+export const fontFamilyHeadingSmallBold = fontFamilyHeadingSmall
+export const fontWeightHeadingSmallBold = fontWeightBold
+export const fontStyleHeadingSmallBold = `${fontWeightHeadingSmallBold} ${fontSizeHeadingSmallBold}/${lineHeightHeadingSmallBold} ${fontFamilyHeadingSmallBold}`
+export const fontStyleHeadingSmallSemiBold = `${fontWeightSemiBold} ${fontSizeHeadingSmallBold}/${lineHeightHeadingSmallBold} ${fontFamilyHeadingSmallBold}`
+
+// Body-Large
+const fontSizeBodyLarge = '1rem' // 16px
+const lineHeightBodyLarge = '1.5rem' // 24px
+const fontFamilyBodyLarge = fontFamily
+
+// Body-Large-Medium
+export const fontSizeBodyLargeSemiBold = fontSizeBodyLarge
+export const lineHeightBodyLargeSemiBold = lineHeightBodyLarge
+export const fontFamilyBodyLargeSemiBold = fontFamilyBodyLarge
+export const fontWeightBodyLargeSemiBold = fontWeightSemiBold
+export const fontStyleBodyLargeSemiBold = `${fontWeightBodyLargeSemiBold} ${fontSizeBodyLargeSemiBold}/${lineHeightBodyLargeSemiBold} ${fontFamilyBodyLargeSemiBold}`
+
+// Body-Large-Regular
+export const fontSizeBodyLargeRegular = fontSizeBodyLarge
+export const lineHeightBodyLargeRegular = lineHeightBodyLarge
+export const fontFamilyBodyLargeRegular = fontFamilyBodyLarge
+export const fontWeightBodyLargeRegular = fontWeightRegular
+export const fontStyleBodyLargeRegular = `${fontWeightBodyLargeRegular} ${fontSizeBodyLargeRegular}/${lineHeightBodyLargeRegular} ${fontFamilyBodyLargeRegular}`
+
+// Body-Default
+const fontSizeBodyDefault = '0.875rem' // 14px
+const lineHeightBodyDefault = '1.25rem' // 20px
+const fontFamilyBodyDefault = fontFamily
+
+// Body-Default-Medium
+export const fontSizeBodyDefaultSemiBold = fontSizeBodyDefault
+export const lineHeightBodyDefaultSemiBold = lineHeightBodyDefault
+export const fontFamilyBodyDefaultSemiBold = fontFamilyBodyDefault
+export const fontWeightBodyDefaultSemiBold = fontWeightSemiBold
+export const fontStyleBodyDefaultSemiBold = `${fontWeightBodyDefaultSemiBold} ${fontSizeBodyDefaultSemiBold}/${lineHeightBodyDefaultSemiBold} ${fontFamilyBodyDefaultSemiBold}`
+
+// Body-Default-Regular
+export const fontSizeBodyDefaultRegular = fontSizeBodyDefault
+export const lineHeightBodyDefaultRegular = lineHeightBodyDefault
+export const fontFamilyBodyDefaultRegular = fontFamilyBodyDefault
+export const fontWeightBodyDefaultRegular = fontWeightRegular
+export const fontStyleBodyDefaultRegular = `${fontWeightBodyDefaultRegular} ${fontSizeBodyDefaultRegular}/${lineHeightBodyDefaultRegular} ${fontFamilyBodyDefaultRegular}`
+
+// Caption
+const fontSizeCaption = '0.8125rem' // 13px
+const lineHeightCaption = '1rem' // 16px
+const fontFamilyCaption = fontFamily
+
+// Caption-Bold
+export const fontSizeCaptionBold = fontSizeCaption
+export const lineHeightCaptionBold = lineHeightCaption
+export const fontFamilyCaptionBold = fontFamilyCaption
+export const fontWeightCaptionBold = fontWeightBold
+export const fontStyleCaptionBold = `${fontWeightCaptionBold} ${fontSizeCaptionBold}/${lineHeightCaptionBold} ${fontFamilyCaptionBold}`
+
+// Caption-Medium
+export const fontSizeCaptionSemiBold = fontSizeCaption
+export const lineHeightCaptionSemiBold = lineHeightCaption
+export const fontFamilyCaptionSemiBold = fontFamilyCaption
+export const fontWeightCaptionSemiBold = fontWeightSemiBold
+export const fontStyleCaptionSemiBold = `${fontWeightCaptionSemiBold} ${fontSizeCaptionSemiBold}/${lineHeightCaptionSemiBold} ${fontFamilyCaptionSemiBold}`
+
+// Caption-Regular
+export const fontSizeCaptionRegular = fontSizeCaption
+export const lineHeightCaptionRegular = lineHeightCaption
+export const fontFamilyCaptionRegular = fontFamilyCaption
+export const fontWeightCaptionRegular = fontWeightRegular
+export const fontStyleCaptionRegular = `${fontWeightCaptionRegular} ${fontSizeCaptionRegular}/${lineHeightCaptionRegular} ${fontFamilyCaptionRegular}`
+
+// Code
+const fontSizeCode = '0.8125rem' // 12px
+const lineHeightCode = '1.25rem' // 20px
+const fontFamilyCode = 'Reddit Mono'
+
+// Code-Regular
+export const fontSizeCodeRegular = fontSizeCode
+export const lineHeightCodeRegular = lineHeightCode
+export const fontFamilyCodeRegular = fontFamilyCode
+export const fontWeightCodeRegular = fontWeightRegular
+export const fontStyleCodeRegular = `${fontWeightCodeRegular} ${fontSizeCodeRegular}/${lineHeightCodeRegular} ${fontFamilyCodeRegular}`

package/src/helix-design-system/style.ts

@@ -0,0 +1,2 @@
+export const floatDropShadow =
+  'box-shadow: 0px 0px 6px 6px rgba(22, 33, 45, 0.25);'

package/src/hooks/__tests__/useConditionalConfirm.test.tsx

@@ -0,0 +1,5 @@
+import { describe, it } from 'vitest'
+
+describe('useConditionalConfirm', () => {
+  it.todo('replace deprecated enzyme test')
+})

package/src/hooks/__tests__/useDrag.test.ts

@@ -0,0 +1,48 @@
+import { act, renderHook } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import { useDrag } from '../useDrag'
+
+import type { ElementPosition } from '../useDrag'
+
+const mockPosition: ElementPosition = {
+  width: 100,
+  height: 200,
+  x: 10,
+  y: 20,
+}
+
+describe('useDrag', () => {
+  it('useDrag returns UseDragResult', () => {
+    const { result } = renderHook(() => useDrag(mockPosition))
+
+    expect(result.current.position.width).toBe(mockPosition.width)
+    expect(result.current.position.height).toBe(mockPosition.height)
+    expect(result.current.position.x).toBe(mockPosition.x)
+    expect(result.current.position.y).toBe(mockPosition.y)
+    expect(result.current.style.width).toBe(`${mockPosition.width}px`)
+    expect(result.current.style.height).toBe(`${mockPosition.height}px`)
+    expect(result.current.style.touchAction).toBe('none')
+    expect(result.current.style.transform).toBe(
+      `translate3D(${mockPosition.x}px, ${mockPosition.y}px, 0)`
+    )
+    expect(result.current.style.position).toBe('absolute')
+    expect(typeof result.current.isEnabled).toBe('boolean')
+  })
+
+  it('When calling enable, isEnabled true', () => {
+    const { result } = renderHook(() => useDrag(mockPosition))
+    act(() => {
+      result.current.enable()
+    })
+    expect(result.current.isEnabled).toBe(true)
+  })
+
+  it('When calling disable, isEnabled false', () => {
+    const { result } = renderHook(() => useDrag(mockPosition))
+    act(() => {
+      result.current.disable()
+    })
+    expect(result.current.isEnabled).toBe(false)
+  })
+})

package/src/hooks/__tests__/useInterval.test.tsx

@@ -0,0 +1,5 @@
+import { describe, it } from 'vitest'
+
+describe('useInterval hook', () => {
+  it.todo('replace deprecated enzyme test')
+})

package/src/hooks/__tests__/useLongPress.test.ts

@@ -0,0 +1,26 @@
+import { act, renderHook, waitFor } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import { useLongPress } from '../useLongPress'
+
+describe('useLongPress', () => {
+  it('useLongPress returns typeof UseLongPressResult', () => {
+    const { result } = renderHook(() => useLongPress())
+    expect(result.current.style.touchAction).toBe('none')
+    expect(result.current.isEnabled).toBe(true)
+    expect(result.current.isLongPressed).toBe(false)
+    expect(result.current.isTapped).toBe(false)
+  })
+
+  it('when callling disable, isEnabled true', () => {
+    const { result } = renderHook(() => useLongPress())
+    act(() => result.current.enable())
+    waitFor(() => expect(result.current.isEnabled).toBe(true))
+  })
+
+  it('when callling disable, isEnabled false', () => {
+    const { result } = renderHook(() => useLongPress())
+    act(() => result.current.disable())
+    waitFor(() => expect(result.current.isEnabled).toBe(false))
+  })
+})

package/src/hooks/__tests__/useMountEffect.test.tsx

@@ -0,0 +1,5 @@
+import { describe, it } from 'vitest'
+
+describe('useMountEffect hook', () => {
+  it.todo('replace deprecated enzyme test')
+})

package/src/hooks/__tests__/usePrevious.test.tsx

@@ -0,0 +1,5 @@
+import { describe, it } from 'vitest'
+
+describe('usePrevious hook', () => {
+  it.todo('replace deprecated enzyme test')
+})

package/src/hooks/__tests__/useScrolling.test.tsx

@@ -0,0 +1,47 @@
+import { act, renderHook } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useScrolling } from '../useScrolling'
+
+describe('useScrolling', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    vi.resetAllMocks()
+    vi.clearAllTimers()
+    vi.useRealTimers()
+  })
+
+  it('returns false when there is no scrolling', () => {
+    const ref = document.createElement('div')
+    const { result } = renderHook(() => useScrolling(ref))
+    expect(result.current).toBe(false)
+  })
+
+  it('returns true when scrolling', () => {
+    const ref = document.createElement('div')
+    const { result } = renderHook(() => useScrolling(ref))
+    ref.scrollTop = 10
+    act(() => {
+      ref.dispatchEvent(new Event('scroll'))
+    })
+    expect(result.current).toBe(true)
+  })
+
+  it('returns false after scrolling stops', () => {
+    vi.useFakeTimers({ shouldAdvanceTime: true })
+    const ref = document.createElement('div')
+    const { result } = renderHook(() => useScrolling(ref))
+    ref.scrollTop = 10
+    act(() => {
+      ref.dispatchEvent(new Event('scroll'))
+    })
+    expect(result.current).toBe(true)
+    act(() => {
+      vi.advanceTimersByTime(300)
+    })
+    expect(result.current).toBe(false)
+  })
+})

package/src/hooks/__tests__/useSwipe.test.tsx

@@ -0,0 +1,27 @@
+import { act, renderHook } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import { useSwipe } from '../useSwipe'
+
+describe('useSwipe hook', () => {
+  it('useSwipe returns UseSwipeResult object', () => {
+    const { result } = renderHook(() => useSwipe())
+    expect(result.current.style.touchAction).toBe('none')
+    expect(result.current.isEnabled).toBe(true)
+    expect(result.current.swipeType).toBe('')
+  })
+
+  it('When calling enable, isEnabled true', () => {
+    const { result } = renderHook(() => useSwipe())
+    result.current.enable()
+    expect(result.current.isEnabled).toBe(true)
+  })
+
+  it('When calling disable, isEnabled false', () => {
+    const { result } = renderHook(() => useSwipe())
+    act(() => {
+      result.current.disable()
+    })
+    expect(result.current.isEnabled).toBe(false)
+  })
+})

package/src/hooks/__tests__/useTimeout.test.tsx

@@ -0,0 +1,5 @@
+import { describe, it } from 'vitest'
+
+describe('useTimeouthook', () => {
+  it.todo('replace deprecated enzyme test')
+})

package/src/hooks/__tests__/useToggle.test.tsx

@@ -0,0 +1,5 @@
+import { describe, it } from 'vitest'
+
+describe('useToggle hook', () => {
+  it.todo('replace deprecated enzyme test')
+})

package/src/hooks/index.ts

@@ -0,0 +1,14 @@
+// generic react hooks that don't fit cleanly anywhere else
+
+export * from './useConditionalConfirm'
+export * from './useDrag'
+export * from './useInterval'
+export * from './useLongPress'
+export * from './useMountEffect'
+export * from './usePrevious'
+export * from './useScrolling'
+export * from './useSelectDeckLocation'
+export * from './useSwipe'
+export * from './useTimeout'
+export * from './useToggle'
+export * from './useMenuHandleClickOutside'

package/src/hooks/useConditionalConfirm.ts

@@ -0,0 +1,70 @@
+import { useState } from 'react'
+
+/**
+ * useConditionalConfirm is intended for cases where we want to block and defer
+ * a particular user action until the user clicks "ok" in any kind of "are you sure?"
+ * confirmation UI. The arguments passed to the confirm function will be preserved and
+ * used to call handleContinue. Ex. a click event is being deferred by a modal. When the
+ * user confirms, the initial click event passed as an argument will be used as the argument in
+ * the callback.
+ * @param {() => unknown)} handleContinue (the action we may want to require confirmation for)
+ * @param {boolean} shouldBlock (if no confirmation is needed, we will avoid the modal and immediately call handleContinue)
+ * @example
+ * ```js
+ * import { useConditionalConfirm } from '@opentrons/components'
+ *
+ * const ExampleDangerForm = props => {
+ * const {
+ *   confirm,
+ *   showConfirmation,
+ *   cancel,
+ *  } = useConditionalConfirm(props.goAhead, props.dangerIsPresent)
+ *
+ *  return (
+ *   <>
+ *     {showConfirmation && (
+ *       <AreYouSureModal
+ *         handleCancel={cancel}
+ *         handleContinue={confirm}
+ *       />
+ *     )}
+ *     <DangerFormFields />
+ *     <DangerousSubmit onClick={confirm} />
+ *   </>
+ *  )
+ * }
+ * ```
+ */
+
+export interface UseConditionalConfirmResult<T extends any[]> {
+  confirm: (...args: T) => void
+  showConfirmation: boolean
+  cancel: () => unknown
+}
+
+export const useConditionalConfirm = <T extends any[]>(
+  handleContinue: (...args: T) => any,
+  shouldBlock: boolean
+): UseConditionalConfirmResult<T> => {
+  const [pendingArgs, setPendingArgs] = useState<T | null>(null)
+  const pendingConfirm = pendingArgs !== null
+  const confirm: (...args: T) => void = (...confirmArgs) => {
+    if (shouldBlock && !pendingConfirm) {
+      setPendingArgs(confirmArgs)
+    } else {
+      // call handleContinue with pending args if we have them
+      const handleContinueArgs =
+        pendingArgs !== null ? pendingArgs : confirmArgs
+      handleContinue(...handleContinueArgs)
+      setPendingArgs(null)
+    }
+  }
+
+  return {
+    confirm,
+    showConfirmation: pendingConfirm,
+    cancel: () => {
+      setPendingArgs(null)
+    },
+  }
+}

package/src/hooks/useDrag.ts

@@ -0,0 +1,91 @@
+import { useEffect, useRef, useState } from 'react'
+import interact from 'interactjs'
+
+import type { CSSProperties, MutableRefObject } from 'react'
+
+export interface ElementPosition {
+  width: number
+  height: number
+  x: number
+  y: number
+}
+
+export interface UseDragResult {
+  ref: MutableRefObject<null>
+  style: CSSProperties
+  position: ElementPosition
+  isEnabled: boolean
+  enable: () => void
+  disable: () => void
+}
+
+/**
+ * useDrag makes HTMLElement draggable for on-device app
+ * This hook should be used when isOnDevice is true
+ * @param {ElementPosition} (width, height, x, and y, they are HTMLElement's size and the initial position)
+ * @returns {UseDragResult}
+ */
+
+export const useDrag = (position: ElementPosition): UseDragResult => {
+  const [elementPosition, setElementPosition] = useState<ElementPosition>(
+    position
+  )
+  const [isEnabled, setIsEnabled] = useState<boolean>(true)
+  const interactiveRef = useRef(null)
+  let { x, y, width, height } = elementPosition
+
+  const enable = (): void => {
+    if (interactiveRef?.current != null) {
+      interact((interactiveRef.current as unknown) as HTMLElement)
+        .draggable({
+          modifiers: [],
+          inertia: false,
+        })
+        .on('dragmove', (event: Interact.InteractEvent) => {
+          x += Number(event.dx)
+          y += Number(event.dy)
+
+          setElementPosition({
+            width,
+            height,
+            x,
+            y,
+          })
+        })
+    }
+  }
+  const disable = (): void => {
+    if (interactiveRef?.current != null) {
+      interact((interactiveRef.current as unknown) as HTMLElement).unset()
+    }
+  }
+
+  useEffect(() => {
+    if (isEnabled) {
+      enable()
+    } else {
+      disable()
+    }
+    return disable
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isEnabled])
+
+  return {
+    ref: interactiveRef,
+    style: {
+      transform: `translate3D(${elementPosition.x}px, ${elementPosition.y}px, 0)`,
+      width: `${elementPosition.width}px`,
+      height: `${elementPosition.height}px`,
+      position: 'absolute' as CSSProperties['position'],
+      touchAction: 'none',
+    },
+    position: elementPosition,
+    isEnabled,
+    enable: () => {
+      setIsEnabled(true)
+    },
+    disable: () => {
+      setIsEnabled(false)
+    },
+  }
+}

package/src/hooks/useInterval.ts

@@ -0,0 +1,38 @@
+import { useEffect, useRef } from 'react'
+
+import type { MutableRefObject } from 'react'
+
+/**
+ * React hook to call a function on an interval; copied from:
+ * https://overreacted.io/making-setinterval-declarative-with-react-hooks/
+ *
+ * @template T (type of the input value)
+ * @param {() => unknown} callback (function to call on an interval)
+ * @param {number | null} delay (interval delay, or null to stop interval)
+ * @param {boolean} [immediate=false] (trigger the callback immediately before starting the interval)
+ * @returns {void}
+ */
+export function useInterval(
+  callback: () => unknown,
+  delay: number | null,
+  immediate: boolean = false
+): void {
+  const savedCallback: MutableRefObject<(() => unknown) | undefined> = useRef()
+
+  // remember the latest callback
+  useEffect(() => {
+    savedCallback.current = callback
+  }, [callback])
+
+  // set up the interval
+  useEffect(() => {
+    const tick = (): unknown => savedCallback.current && savedCallback.current()
+    if (delay !== null && delay > 0) {
+      if (immediate) tick()
+      const id = setInterval(tick, delay)
+      return () => {
+        clearInterval(id)
+      }
+    }
+  }, [delay, immediate])
+}

package/src/hooks/useLongPress.ts

@@ -0,0 +1,84 @@
+import { useEffect, useRef, useState } from 'react'
+import interact from 'interactjs'
+
+import type PointerEvent from 'interactjs'
+import type { CSSProperties, MutableRefObject } from 'react'
+
+const HOLD_DURATION_MS = 1000
+
+// Note kj 12/05/2022
+// ODD needs setIsLongPressed since when a user use long press, ODD app needs to show overflow menu.
+// Then if a user takes clicking outside action, the ODD app needs to reset the isLongPressed.
+// In terms of setIsTapped, if the ODD app doesn't need it, it will be removed.
+export interface UseLongPressResult {
+  ref: MutableRefObject<null>
+  style: CSSProperties
+  isEnabled: boolean
+  isLongPressed: boolean
+  isTapped: boolean
+  setIsLongPressed: (value: boolean) => void
+  setIsTapped: (value: boolean) => void
+  enable: () => void
+  disable: () => void
+}
+
+/**
+ * useLongPress provide two actions (tap and long press)
+ * useLongPress recognize 1 sec hold as long press: hold Duration
+ * interactjs recognize "hold" when an element is held down around 600ms(default)
+ * @returns {UseLongPressResult}
+ */
+export const useLongPress = (): UseLongPressResult => {
+  const [isLongPressed, setIsLongPressed] = useState<boolean>(false)
+  const [isTapped, setIsTapped] = useState<boolean>(false)
+  const [isEnabled, setIsEnabled] = useState<boolean>(true)
+  const interactiveRef = useRef(null)
+
+  const enable = (): void => {
+    if (interactiveRef?.current != null) {
+      interact((interactiveRef.current as unknown) as HTMLElement)
+        .pointerEvents({
+          holdDuration: HOLD_DURATION_MS,
+        })
+        .on('hold', (_event: PointerEvent) => {
+          setIsLongPressed(isLongPressed => !isLongPressed)
+        })
+        .on('tap', (_event: PointerEvent) => {
+          setIsTapped(isTapped => !isTapped)
+        })
+    }
+  }
+  const disable = (): void => {
+    if (interactiveRef?.current != null) {
+      interact((interactiveRef.current as unknown) as HTMLElement).unset()
+    }
+  }
+
+  useEffect(() => {
+    if (isEnabled) {
+      enable()
+    } else {
+      disable()
+    }
+    return disable
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isEnabled])
+
+  return {
+    ref: interactiveRef,
+    style: {
+      touchAction: 'none',
+    },
+    isEnabled,
+    isLongPressed,
+    isTapped,
+    setIsLongPressed,
+    setIsTapped,
+    enable: () => {
+      setIsEnabled(true)
+    },
+    disable: () => {
+      setIsEnabled(false)
+    },
+  }
+}