@opentrons/components 0.1.7-alpha.1 → 0.2.0-alpha.1

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

@@ -1,151 +0,0 @@
-/**
- * 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

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

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

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

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

@@ -1,48 +0,0 @@
-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

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

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

@@ -1,26 +0,0 @@
-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

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

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

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

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

@@ -1,47 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

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

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

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

package/src/hooks/index.ts

@@ -1,14 +0,0 @@
-// 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

@@ -1,70 +0,0 @@
-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

@@ -1,91 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,84 +0,0 @@
-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)
-    },
-  }
-}