@loadsmart/loadsmart-ui 7.6.0 → 7.7.0-beta.1

package/src/hooks/useFingerprint/useFingerprint.test.ts

@@ -1,76 +0,0 @@
-import { renderHook, act } from '@testing-library/react-hooks'
-
-import useFingerprint from './useFingerprint'
-
-describe('useFingerprint', () => {
-  it('starts up correctly', () => {
-    const items = ['A', 'B', 'C']
-
-    const { result } = renderHook(() => useFingerprint<string>((item) => item, items))
-    expect(result.current.fingerprint).toBeTruthy()
-    expect(typeof result.current.getFingerprint).toBe('function')
-    expect(typeof result.current.resetFingerprint).toBe('function')
-    expect(typeof result.current.hasSameFingerprint).toBe('function')
-  })
-
-  it('gets the same fingerprint for the same set of items', () => {
-    const items = ['A', 'B', 'C']
-
-    const { result } = renderHook(() => useFingerprint<string>((item) => item, items))
-    expect(result.current.fingerprint).toBe(result.current.getFingerprint(['A', 'B', 'C']))
-  })
-
-  it('gets a different fingerprint when a new item is added', () => {
-    const items = ['A', 'B']
-
-    const { result } = renderHook(() => useFingerprint<string>((item) => item, items))
-    expect(result.current.fingerprint).not.toBe(result.current.getFingerprint(['A', 'B', 'C']))
-  })
-
-  it('gets a different fingerprint when an item is removed', () => {
-    const items = ['A', 'B', 'C']
-
-    const { result } = renderHook(() => useFingerprint<string>((item) => item, items))
-    expect(result.current.hasSameFingerprint(['B', 'C'])).toBe(false)
-    expect(result.current.hasSameFingerprint(['A', 'C'])).toBe(false)
-    expect(result.current.hasSameFingerprint(['A', 'B'])).toBe(false)
-    expect(result.current.hasSameFingerprint(['A'])).toBe(false)
-    expect(result.current.hasSameFingerprint(['B'])).toBe(false)
-    expect(result.current.hasSameFingerprint(['C'])).toBe(false)
-  })
-
-  it('resets fingerprint correctly', () => {
-    const items = ['A', 'B', 'C']
-
-    const { result } = renderHook(() => useFingerprint<string>((item) => item, items))
-    const oldFingerprint = result.current.fingerprint
-
-    act(() => {
-      result.current.resetFingerprint(['D', 'E', 'F'])
-    })
-
-    expect(result.current.fingerprint).not.toBe(oldFingerprint)
-  })
-
-  it('checks the fingerprint of a set of items against the current fingerprint, regardless order', () => {
-    const items = ['A', 'B', 'C']
-
-    const { result } = renderHook(() => useFingerprint<string>((item) => item, items))
-    expect(result.current.hasSameFingerprint(['D', 'E', 'F'])).toBe(false)
-    expect(result.current.hasSameFingerprint(['A', 'B', 'C'])).toBe(true)
-    expect(result.current.hasSameFingerprint(['A', 'C', 'B'])).toBe(true)
-    expect(result.current.hasSameFingerprint(['B', 'A', 'C'])).toBe(true)
-    expect(result.current.hasSameFingerprint(['B', 'C', 'A'])).toBe(true)
-    expect(result.current.hasSameFingerprint(['C', 'A', 'B'])).toBe(true)
-    expect(result.current.hasSameFingerprint(['C', 'B', 'A'])).toBe(true)
-  })
-
-  it('returns empty fingerprint if provided items is falsy', () => {
-    const items = ['A', 'B', 'C']
-
-    const { result } = renderHook(() => useFingerprint<string>((item) => item, items))
-
-    expect(result.current.getFingerprint(null)).toBe('')
-    expect(result.current.getFingerprint(undefined)).toBe('')
-  })
-})

package/src/hooks/useFingerprint/useFingerprint.ts

@@ -1,94 +0,0 @@
-import { useState, useRef } from 'react'
-
-import getID from 'utils/toolset/getID'
-import isEmpty from 'utils/toolset/isEmpty'
-
-type FingerprintAdapter<T> = (item: T) => string
-
-/**
- * This hook helps with stabilizing changes for components that rely on non-primitive props, more specifically, arrays,
- * objects, maps, sets and so on; when we need to update an internal state based on such types of prop, we might run into an infinite loop.
- * By creating a fingerprint - a string that identifies that set of items - we can garantee that the same set of items will
- * always return the same fingerprint, thus, making check for changes more predictable.
- *
- * @param adapter - adapter function that gets a unique identifier for each item in the `items` prop
- * @param items - list of items whose fingerprint should be checked.
- * @returns
- */
-function useFingerprint<T>(
-  adapter: FingerprintAdapter<T>,
-  items: T[]
-): {
-  fingerprint: string
-  getFingerprint: (items?: T[] | null, insert?: boolean) => string
-  resetFingerprint: (items: T[]) => void
-  hasSameFingerprint: (otherItems: T[]) => boolean
-} {
-  const knownRef = useRef({} as Record<string, T | string>)
-  const [fingerprint, setFingerprint] = useState(() => getFingerprint('', items, true))
-
-  /**
-   * Get a fingerprint based on the sorted items identifiers.
-   *
-   * @param {string[]} items - array of items
-   * @param {boolean} update - update `known` with the provided `items`, if it contains different set of items.
-   * @returns {string}
-   */
-  function getFingerprint(currentFingerprint: string, items?: T[] | null, update = false) {
-    const known = knownRef.current
-
-    const safeItems = items || []
-
-    let newKnown: Record<string, T | string> = {}
-    let hasSameItems = Object.keys(known).length === safeItems.length
-
-    for (let i = 0; i < safeItems.length; i++) {
-      const item = safeItems[i]
-      const key = adapter(item)
-
-      hasSameItems = hasSameItems && known[key] != null
-
-      newKnown = {
-        ...newKnown,
-        // we associate a previously created or a new random value to compose the fingerprint
-        [key]: known[key] ?? getID(),
-      }
-    }
-
-    if (hasSameItems) {
-      return currentFingerprint
-    }
-
-    if (update) {
-      knownRef.current = newKnown
-    }
-
-    const fingerprint = Object.keys(newKnown)
-      .sort()
-      .reduce((fingerprint, item) => {
-        return `${fingerprint}${newKnown[item] as string}`
-      }, '')
-
-    return fingerprint
-  }
-
-  return {
-    fingerprint,
-    getFingerprint(items?: T[] | null, update = false) {
-      return getFingerprint(fingerprint, items, update)
-    },
-    resetFingerprint(items: T[]) {
-      setFingerprint(getFingerprint(fingerprint, items, true))
-    },
-    /**
-     * Check if the provided items have the same fingerprint.
-     * @param {string[]} otherItems - items
-     * @returns {boolean}
-     */
-    hasSameFingerprint(otherItems: T[]) {
-      return fingerprint === getFingerprint(fingerprint, otherItems)
-    },
-  }
-}
-
-export default useFingerprint

package/src/hooks/useFocusTrap/index.ts

@@ -1,2 +0,0 @@
-export { default as useFocusTrap } from './useFocusTrap'
-export type { useFocusTrapProps } from './useFocusTrap'

package/src/hooks/useFocusTrap/useFocusTrap.stories.tsx

@@ -1,87 +0,0 @@
-import React from 'react'
-import clsx from 'clsx'
-import type { Story, Meta } from '@storybook/react'
-
-import range from 'utils/toolset/range'
-import useFocusTrap from './useFocusTrap'
-
-import type { useFocusTrapProps } from './useFocusTrap'
-
-export default {
-  title: 'Hooks/useFocusTrap',
-} as Meta
-
-function Experiment(props: { elements?: number } & useFocusTrapProps) {
-  const { elements = 2 } = props
-  const { containerRef, active, activate, deactivate } = useFocusTrap(props)
-
-  return (
-    <div className="space-y-4 text-center">
-      <p data-testid="trap-status">Trap is {active ? 'active' : 'inactive'}</p>
-      <div
-        ref={containerRef}
-        className={clsx('inline-flex flex-row justify-center space-x-2 p-4 border-2 rounded', {
-          'border-neutral-darker': active,
-          'border-neutral-lighter border-dashed': !active,
-        })}
-      >
-        {range(elements).map((_, index) => (
-          <button key={index} className="p-4 rounded bg-neutral-light" type="button">
-            {index + 1}
-          </button>
-        ))}
-      </div>
-      <div className="flex flex-row justify-center space-x-2">
-        <button
-          className="p-2 bg-transparent border rounded border-neutral-darker"
-          type="button"
-          onClick={active ? deactivate : activate}
-        >
-          {active ? 'Deactivate' : 'Activate'}
-        </button>
-      </div>
-    </div>
-  )
-}
-
-export const Playground: Story<useFocusTrapProps> = (args) => {
-  return (
-    <div className="flex flex-col space-y-2">
-      <p>Activate the trap and tab through the numbered buttons</p>
-      <Experiment {...args} elements={3} />
-    </div>
-  )
-}
-
-Playground.args = {
-  keys: ['TAB'],
-}
-
-export const TabTrap: Story<useFocusTrapProps> = (args) => {
-  return (
-    <div className="flex flex-col space-y-2">
-      <p>Activate the trap and tab through the numbered buttons</p>
-      <small>
-        Notice that tabbing through does <strong>not</strong> allow focus to exit the trap.
-      </small>
-      <Experiment {...args} elements={6} keys={['TAB']} />
-    </div>
-  )
-}
-
-TabTrap.args = {}
-
-export const ArrowTrap: Story<useFocusTrapProps> = (args) => {
-  return (
-    <div className="flex flex-col space-y-2">
-      <p>
-        Activate the trap and navigate through the numbered buttons using the up and down arrow
-        keys.
-      </p>
-      <small>Notice that tabbing through allows focus to exit the trap.</small>
-      <Experiment {...args} elements={6} keys={['ARROW_UP', 'ARROW_DOWN']} />
-    </div>
-  )
-}
-
-ArrowTrap.args = {}

package/src/hooks/useFocusTrap/useFocusTrap.test.tsx

@@ -1,129 +0,0 @@
-import React from 'react'
-import renderer, { screen, fire, user } from '../../tests/renderer'
-import { composeStories } from '@storybook/react'
-
-import * as stories from './useFocusTrap.stories'
-
-import type { useFocusTrapProps } from './useFocusTrap'
-
-const { Playground } = composeStories(stories)
-
-const setup = (props: Omit<useFocusTrapProps, 'containerRef'>) =>
-  renderer(<Playground {...props} />).render()
-
-describe('useFocusTrap', () => {
-  it('focus on all elements when the trap is deactivated', () => {
-    const props = {}
-
-    setup(props)
-
-    screen.getByText('Trap is inactive')
-
-    user.tab()
-    expect(screen.getByText('1')).toHaveFocus()
-
-    user.tab()
-    expect(screen.getByText('2')).toHaveFocus()
-
-    user.tab()
-    expect(screen.getByText('3')).toHaveFocus()
-
-    user.tab()
-    expect(screen.getByText('Activate')).toHaveFocus()
-  })
-
-  it('calls `onActivate` when the trap is activated', () => {
-    const props = {
-      onActivate: jest.fn(),
-    }
-
-    setup(props)
-
-    fire.click(screen.getByText('Activate'))
-
-    expect(props.onActivate).toHaveBeenCalled()
-  })
-
-  it('focus on all focusable elements [currently supported] inside the container when the trap is activated', () => {
-    const props = {}
-
-    setup(props)
-
-    fire.click(screen.getByText('Activate'))
-
-    screen.getByText('Trap is active')
-
-    user.tab()
-    expect(screen.getByText('1')).toHaveFocus()
-
-    user.tab()
-    expect(screen.getByText('2')).toHaveFocus()
-
-    user.tab()
-    expect(screen.getByText('3')).toHaveFocus()
-
-    // it circles back to the first focusable element
-    user.tab()
-    expect(screen.getByText('1')).toHaveFocus()
-
-    user.tab()
-    expect(screen.getByText('2')).toHaveFocus()
-
-    user.tab()
-    expect(screen.getByText('3')).toHaveFocus()
-
-    fire.click(screen.getByText('Deactivate'))
-
-    // returns to the normal tab sequence
-    user.tab()
-    expect(screen.getByText('Activate')).toHaveFocus()
-  })
-
-  it('focus with custom keys on all focusable elements [currently supported] inside the container when the trap is activated', () => {
-    const props = {
-      keys: ['ARROW_UP', 'ARROW_DOWN'],
-    } as useFocusTrapProps
-
-    setup(props)
-
-    fire.click(screen.getByText('Activate'))
-
-    screen.getByText('Trap is active')
-
-    user.tab()
-
-    expect(screen.getByText('1')).toHaveFocus()
-
-    fire.keyDown(document, { key: 'ArrowUp', code: 'ArrowUp' })
-    expect(screen.getByText('3')).toHaveFocus()
-
-    fire.keyDown(document, { key: 'ArrowUp', code: 'ArrowUp' })
-    expect(screen.getByText('2')).toHaveFocus()
-
-    // it circles back to the first focusable element
-    fire.keyDown(document, { key: 'ArrowUp', code: 'ArrowUp' })
-    expect(screen.getByText('1')).toHaveFocus()
-
-    fire.keyDown(document, { key: 'ArrowUp', code: 'ArrowUp' })
-    expect(screen.getByText('3')).toHaveFocus()
-
-    fire.click(screen.getByText('Deactivate'))
-
-    fire.keyDown(document, { key: 'ArrowUp', code: 'ArrowUp' })
-    // keeps focus where it was before
-    expect(screen.getByText('3')).toHaveFocus()
-  })
-
-  it('calls `onDeactivate` when the trap is deactivated', () => {
-    const props = {
-      onDeactivate: jest.fn(),
-    }
-
-    setup(props)
-
-    fire.click(screen.getByText('Activate'))
-    fire.click(screen.getByText('Deactivate'))
-
-    expect(props.onDeactivate).toHaveBeenCalled()
-  })
-})

package/src/hooks/useFocusTrap/useFocusTrap.ts

@@ -1,187 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react'
-
-import KeyboardKey, { getKeyboardKey } from 'utils/toolset/keyboard'
-import isEmpty from 'utils/toolset/isEmpty'
-
-import type { SupportedKey } from 'utils/toolset/keyboard'
-
-export interface useFocusTrapProps {
-  onActivate?: () => void
-  onDeactivate?: () => void
-  keys?: SupportedKey[]
-}
-
-function getFocusedIndexAfterKeyPress(
-  e: React.KeyboardEvent,
-  currentFocused: number,
-  focusableCounter: number
-): number {
-  const keyHandler: Record<React.KeyboardEvent['key'], (e: React.KeyboardEvent) => number> = {
-    Tab(e: React.KeyboardEvent): number {
-      return e.shiftKey ? -1 : 1
-    },
-    ArrowUp() {
-      return -1
-    },
-    ArrowDown() {
-      return 1
-    },
-  }
-
-  function unknownKey() {
-    return 0
-  }
-
-  const key = getKeyboardKey(e)
-  const increment = (keyHandler[key] || unknownKey)(e)
-
-  if (currentFocused === -1 && increment === -1) {
-    /**
-     * Prevent to skip one element when the initial increment is -1
-     * and `currentFocused` is -1, we don't .
-     * e.g.: focus has just been activated and user presses arrow up.
-     */
-    return (increment + focusableCounter) % focusableCounter
-  }
-
-  return (currentFocused + increment + focusableCounter) % focusableCounter
-}
-
-function getTabbableDescendants<T extends HTMLElement>(container: T | null) {
-  if (container == null) {
-    return []
-  }
-
-  // TODO: add support for other focusable elements
-  return Array.from(container.querySelectorAll('button') || [])
-}
-
-/**
- * Custom hook that limits the focusable elements within a container, when activated.
- *
- * Based on https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets.
- *
- * @param {useFocusTrapProps} props
- * @param {RefObject} props.containerRef - Ref to the container that will be the boundary for the focus trap.
- * @param {() => void} props.onActivate - Called when the focus trap is activated.
- * @param {() => void} props.onDeactivate - Called when the focus trap is deactivated.
- * @param {(KeyboardEvent['key'])[]} props.keys - Keys that will move the focus inside
- * the container (The current implementation only track focus for button elements). We current
- * support `Tab`, `ArrowUp`, and `ArrowDown` keys. If not provided, only the `Tab` key will be used.
- * @returns {Object}
- */
-function useFocusTrap<T extends HTMLElement>(
-  props: useFocusTrapProps
-): {
-  containerRef: (container: T | null) => void
-  active: boolean
-  activate: () => void
-  deactivate: () => void
-} {
-  const { keys, onActivate, onDeactivate } = props
-
-  const [active, setActive] = useState(false)
-  const [currentFocused, setCurrentFocused] = useState(-1)
-  const mutationObserverRef = useRef<MutationObserver>()
-  const [focusableDescendants, setFocusableDescendants] = useState<HTMLElement[]>([])
-
-  function subscribeToDOMMutationEvents(container: HTMLElement) {
-    mutationObserverRef.current = new MutationObserver(function () {
-      setFocusableDescendants(getTabbableDescendants(container))
-    })
-
-    mutationObserverRef.current.observe(container, { childList: true })
-  }
-
-  function unsubscribeToDOMMutationEvents() {
-    setCurrentFocused(-1)
-    if (mutationObserverRef.current) {
-      mutationObserverRef.current?.disconnect()
-    }
-  }
-
-  const containerRef = useCallback(function initialize(container: HTMLElement | null) {
-    if (container != null) {
-      setFocusableDescendants(getTabbableDescendants(container))
-      subscribeToDOMMutationEvents(container)
-    } else {
-      unsubscribeToDOMMutationEvents()
-    }
-  }, [])
-
-  useEffect(function onMount() {
-    return function onUnmount() {
-      unsubscribeToDOMMutationEvents()
-    }
-  }, [])
-
-  useEffect(
-    function subscribeToKeyEvents() {
-      function handleKeyDownEvent(evt: KeyboardEvent) {
-        /**
-         * Brace yourselves for the nasty casting from globalThis.KeyboardEvent, which is
-         * the type used in the `addEventListener` callback, to React.KeyboardEvent ¯\_(ツ)_/¯
-         */
-        const e = evt as unknown as React.KeyboardEvent
-
-        const supportedKeys = [...(keys || ['TAB'])]
-
-        if (!KeyboardKey(e).is(supportedKeys) || isEmpty(focusableDescendants)) {
-          return
-        }
-
-        e.preventDefault()
-
-        const newCurrentFocused = getFocusedIndexAfterKeyPress(
-          e,
-          currentFocused,
-          focusableDescendants.length
-        )
-        setCurrentFocused(newCurrentFocused)
-        focusableDescendants[newCurrentFocused].focus()
-      }
-
-      function subscribe() {
-        document.addEventListener('keydown', handleKeyDownEvent)
-      }
-
-      function unsubscribe() {
-        document.removeEventListener('keydown', handleKeyDownEvent)
-      }
-
-      if (active) {
-        subscribe()
-      }
-
-      return function unsubscribeToKeyEvents() {
-        unsubscribe()
-      }
-    },
-    [active, keys, currentFocused, focusableDescendants]
-  )
-
-  const activate = useCallback(
-    function activate() {
-      setActive(true)
-      onActivate?.()
-    },
-    [onActivate]
-  )
-
-  const deactivate = useCallback(
-    function deactivate() {
-      setActive(false)
-      onDeactivate?.()
-    },
-    [onDeactivate]
-  )
-
-  return {
-    containerRef,
-    active,
-    activate,
-    deactivate,
-  }
-}
-
-export default useFocusTrap

package/src/hooks/useFocusWithin/index.ts

@@ -1,2 +0,0 @@
-export { default as useFocusWithin } from './useFocusWithin'
-export type { useFocusWithinProps } from './useFocusWithin'

package/src/hooks/useFocusWithin/useFocusWithin.test.tsx

@@ -1,71 +0,0 @@
-import React from 'react'
-import renderer, { screen, fire } from '../../tests/renderer'
-
-import useFocusWithin from './useFocusWithin'
-
-import type { useFocusWithinProps } from './useFocusWithin'
-
-function Experiment(props: useFocusWithinProps) {
-  const { ref } = useFocusWithin<HTMLDivElement>(props)
-
-  return (
-    <div>
-      <div ref={ref}>
-        <button>Focusable</button>
-      </div>
-      <button>Ignorable</button>
-    </div>
-  )
-}
-
-const setup = (props: useFocusWithinProps) => renderer(<Experiment {...props} />).render()
-
-describe('useFocusWithin', () => {
-  it('calls onFocus when a descendant is focused', () => {
-    const props = {
-      onFocus: jest.fn(),
-      onBlur: jest.fn(),
-    }
-
-    setup(props)
-
-    fire.focus(screen.getByText('Focusable'))
-    expect(props.onFocus).toHaveBeenCalled()
-  })
-
-  it('does not call onFocus when a non-descendant is focused', () => {
-    const props = {
-      onFocus: jest.fn(),
-      onBlur: jest.fn(),
-    }
-
-    setup(props)
-
-    fire.focus(screen.getByText('Ignorable'))
-    expect(props.onFocus).not.toHaveBeenCalled()
-  })
-
-  it('calls onBlur when a descendant loses focus', () => {
-    const props = {
-      onFocus: jest.fn(),
-      onBlur: jest.fn(),
-    }
-
-    setup(props)
-
-    fire.blur(screen.getByText('Focusable'))
-    expect(props.onBlur).toHaveBeenCalled()
-  })
-
-  it('does not call onBlur when a non-descendant loses focus', () => {
-    const props = {
-      onFocus: jest.fn(),
-      onBlur: jest.fn(),
-    }
-
-    setup(props)
-
-    fire.blur(screen.getByText('Ignorable'))
-    expect(props.onBlur).not.toHaveBeenCalled()
-  })
-})