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

package/src/hooks/useFocusWithin/useFocusWithin.ts

@@ -1,62 +0,0 @@
-import { useEffect, useState, useCallback, useRef } from 'react'
-
-import type { RefObject } from 'react'
-
-export interface useFocusWithinProps {
-  onFocus?: () => void
-  onBlur?: () => void
-}
-
-/**
- * As CSS's focus-within is not fully supported, this hook
- * helps with identifying focus within elements.
- * @param {Object} props - Hook props
- */
-function useFocusWithin<T>(props: useFocusWithinProps = {}): {
-  ref: RefObject<T>
-  focused: boolean
-} {
-  const { onFocus, onBlur } = props
-  const [focused, setFocused] = useState(false)
-  const containerRef = useRef<T>(null)
-
-  function getContainer() {
-    return containerRef.current as unknown as HTMLElement
-  }
-
-  const handleFocus = useCallback(
-    function handleFocus() {
-      onFocus?.()
-      setFocused(true)
-    },
-    [onFocus]
-  )
-
-  const handleBlur = useCallback(
-    function handleBlur() {
-      onBlur?.()
-      setFocused(false)
-    },
-    [onBlur]
-  )
-
-  useEffect(
-    function updateContainerRef() {
-      getContainer()?.addEventListener('focusin', handleFocus)
-      getContainer()?.addEventListener('focusout', handleBlur)
-
-      return function unsubscribe() {
-        getContainer()?.removeEventListener('focusin', handleFocus)
-        getContainer()?.removeEventListener('focusout', handleBlur)
-      }
-    },
-    [containerRef, handleBlur, handleFocus]
-  )
-
-  return {
-    ref: containerRef,
-    focused,
-  }
-}
-
-export default useFocusWithin

package/src/hooks/useHeightExpansionToggler/index.ts

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

package/src/hooks/useHeightExpansionToggler/useHeightExpansionToggler.test.tsx

@@ -1,85 +0,0 @@
-import React, { useRef, useState } from 'react'
-
-import renderer, { screen, user } from '../../tests/renderer'
-
-import useHeightExpansionToggler from './useHeightExpansionToggler'
-
-function getFakeHeight(factor: number) {
-  return factor * 10
-}
-
-HTMLElement.prototype.getBoundingClientRect = function () {
-  return {
-    height: getFakeHeight(this.childNodes.length),
-  } as DOMRect
-}
-
-function Experiment() {
-  const targetRef = useRef(null)
-  const [items, setItems] = useState<number[]>([])
-  const { expanded, height, toggle } = useHeightExpansionToggler(targetRef)
-
-  return (
-    <>
-      <button onClick={toggle}>toggle</button>
-      <span data-testid="expanded">expanded: {String(expanded)}</span>
-      <button onClick={() => setItems([...items, 1])}>add item</button>
-      <div style={{ height }} ref={targetRef} data-testid="container">
-        {items.map((n, i) => (
-          <span key={i}>{n}</span>
-        ))}
-      </div>
-    </>
-  )
-}
-
-function setup() {
-  renderer(<Experiment />).render()
-}
-
-describe('useHeightExpansionToggler', () => {
-  it('should do it good', async () => {
-    setup()
-
-    /* Begins collapsed */
-    expect(screen.getByTestId('expanded')).toHaveTextContent('false')
-    expect(screen.getByTestId('container')).toHaveStyle('height: auto;')
-
-    /* Add +1 Node */
-
-    user.click(screen.getByRole('button', { name: 'add item' }))
-
-    /* Nothing should change */
-    expect(screen.getByTestId('expanded')).toHaveTextContent('false')
-
-    /* But the height now is calculated to zero */
-    expect(screen.getByTestId('container')).toHaveStyle('height: 0px;')
-
-    /* Expand it */
-    user.click(screen.getByRole('button', { name: 'toggle' }))
-
-    /* It should get expanded */
-    await screen.findByText('expanded: true')
-
-    /* Height should be of 1 Node */
-    expect(screen.getByTestId('container')).toHaveStyle(`height: ${getFakeHeight(1)}px;`)
-
-    /* We add +1 Node */
-    user.click(screen.getByRole('button', { name: 'add item' }))
-
-    /* A child must appear in the DOM */
-    expect(await screen.findAllByText('1')).toHaveLength(2)
-
-    /* Height should be of 2 Nodes */
-    expect(screen.getByTestId('container')).toHaveStyle(`height: ${getFakeHeight(2)}px;`)
-
-    /* Collapse it */
-    user.click(screen.getByRole('button', { name: 'toggle' }))
-
-    /* It should get collapsed */
-    await screen.findByText('expanded: false')
-
-    /* Height should be zero */
-    expect(screen.getByTestId('container')).toHaveStyle('height: 0px;')
-  })
-})

package/src/hooks/useHeightExpansionToggler/useHeightExpansionToggler.ts

@@ -1,54 +0,0 @@
-import { RefObject, useEffect, useLayoutEffect, useReducer, useState } from 'react'
-import type { CSSProperties } from 'styled-components'
-
-import { useDidMount } from 'hooks/useDidMount'
-
-function updateHeight(set: (value: number) => void, el: HTMLElement | null) {
-  if (el) {
-    const { height } = el.getBoundingClientRect()
-    set(height)
-  }
-}
-
-export type HeightExpansionToggler = {
-  expanded: boolean
-  toggle: () => void
-  height: CSSProperties['height']
-}
-
-/**
- * A React Hook to help you expand or collapse an element by
- * checking its total height and controlling a boolean flag
- * @param {React.RefObject} targetElRef - Ref of the wrapper element
- */
-function useHeightExpansionToggler(targetElRef: RefObject<HTMLElement>): HeightExpansionToggler {
-  const [state, toggleState] = useReducer((prevState) => !prevState, false)
-  const [totalHeight, setTotalHeight] = useState<CSSProperties['height']>(0)
-
-  useLayoutEffect(() => {
-    updateHeight(setTotalHeight, targetElRef.current)
-  }, [targetElRef])
-
-  useEffect(() => {
-    const observer = new MutationObserver(() => {
-      updateHeight(setTotalHeight, targetElRef.current)
-    })
-
-    if (targetElRef.current) {
-      observer.observe(targetElRef.current, { childList: true })
-    }
-
-    return () => observer.disconnect()
-  }, [targetElRef])
-
-  const mounted = useDidMount()
-  const finalHeight = !mounted ? 'auto' : state ? totalHeight : 0
-
-  return {
-    expanded: state,
-    toggle: toggleState,
-    height: finalHeight,
-  }
-}
-
-export default useHeightExpansionToggler

package/src/hooks/useID/index.ts

@@ -1 +0,0 @@
-export { default } from './useID'

package/src/hooks/useID/useID.ts

@@ -1,18 +0,0 @@
-import React from 'react'
-
-import getID from 'utils/toolset/getID'
-
-function useID(propId?: string): string {
-  const [id, setID] = React.useState(() => propId || getID())
-
-  React.useEffect(
-    function updateID() {
-      setID(propId || getID())
-    },
-    [propId]
-  )
-
-  return id
-}
-
-export default useID

package/src/hooks/useSelectable/SelectableStrategy.test.ts

@@ -1,424 +0,0 @@
-import generator from '../../tests/generator'
-import createSelectionStrategy from './SelectableStrategy'
-
-import type { Selectable, SelectableAdapter, SelectableKeyType } from './useSelectable.types'
-
-interface TestSelectable extends Selectable {
-  id: string
-  name: string
-}
-
-const adapter = {
-  getKey(o: TestSelectable): string {
-    return o.id
-  },
-}
-
-const adapters: Record<string, SelectableAdapter<TestSelectable>> = {
-  test: adapter,
-}
-
-describe('SelectableStrategy', () => {
-  describe('createSelectionStrategy', () => {
-    it('returns a single selection strategy', () => {
-      const props = {
-        adapters,
-        multiple: false,
-      }
-
-      const result = createSelectionStrategy(props)
-      expect(result.type()).toBe('single')
-    })
-
-    it('returns a multiple selection strategy', () => {
-      const props = {
-        adapters,
-        multiple: true,
-      }
-
-      const result = createSelectionStrategy(props)
-      expect(result.type()).toBe('multiple')
-    })
-  })
-
-  describe('SingleSelectionStrategy', () => {
-    const props = {
-      adapters,
-      multiple: false,
-    }
-
-    it('initializes with empty selection when no items are provided', () => {
-      const strategy = createSelectionStrategy(props)
-      const expectedSelection = new Map<SelectableKeyType, TestSelectable>()
-
-      expect(strategy.init([])).toEqual(expectedSelection)
-    })
-
-    it('returns correct selection when items array is provided to init', () => {
-      const item = {
-        _type: 'test',
-        id: generator.id(),
-        name: generator.name(),
-      }
-
-      const strategy = createSelectionStrategy(props)
-      const expectedSelection = new Map<SelectableKeyType, TestSelectable>().set(
-        adapter.getKey(item),
-        item
-      )
-
-      expect(strategy.init([item])).toEqual(expectedSelection)
-    })
-
-    it('returns empty selection when no items is provided to select', () => {
-      const strategy = createSelectionStrategy(props)
-      const expectedSelection = new Map<SelectableKeyType, TestSelectable>()
-
-      expect(strategy.select([], new Map<SelectableKeyType, TestSelectable>())).toEqual(
-        expectedSelection
-      )
-    })
-
-    it('selects correctly when a single item is provided', () => {
-      const item = {
-        _type: 'test',
-        id: generator.id(),
-        name: generator.name(),
-      }
-
-      const strategy = createSelectionStrategy(props)
-      const expectedSelection = new Map<SelectableKeyType, TestSelectable>().set(
-        adapter.getKey(item),
-        item
-      )
-
-      expect(strategy.select([item], new Map<SelectableKeyType, TestSelectable>())).toEqual(
-        expectedSelection
-      )
-    })
-
-    it('selects correctly when multiple items are provided (only first item is considered)', () => {
-      const items = [
-        {
-          _type: 'test',
-          id: generator.id(),
-          name: generator.name(),
-        },
-        {
-          _type: 'test',
-          id: generator.id(),
-          name: generator.name(),
-        },
-      ]
-
-      const strategy = createSelectionStrategy(props)
-      const expectedSelection = new Map<SelectableKeyType, TestSelectable>().set(
-        adapter.getKey(items[0]),
-        items[0]
-      )
-
-      expect(strategy.select(items, new Map<SelectableKeyType, TestSelectable>())).toEqual(
-        expectedSelection
-      )
-    })
-
-    it('keeps selection when no items is provided to unselect', () => {
-      const item = {
-        _type: 'test',
-        id: generator.id(),
-        name: generator.name(),
-      }
-
-      const strategy = createSelectionStrategy(props)
-
-      const initialSelection = new Map<SelectableKeyType, TestSelectable>().set(
-        adapter.getKey(item),
-        item
-      )
-      const expectedSelection = initialSelection
-
-      expect(strategy.unselect([], initialSelection)).toEqual(expectedSelection)
-    })
-
-    it('unselects correctly the provided items keys', () => {
-      const item = {
-        _type: 'test',
-        id: generator.id(),
-        name: generator.name(),
-      }
-
-      const strategy = createSelectionStrategy(props)
-
-      const initialSelection = new Map<SelectableKeyType, TestSelectable>().set(
-        adapter.getKey(item),
-        item
-      )
-      const expectedSelection = new Map<SelectableKeyType, TestSelectable>()
-
-      expect(strategy.unselect([adapter.getKey(item)], initialSelection)).toEqual(expectedSelection)
-    })
-
-    it('toggles correctly the provided items that are selected', () => {
-      const item = {
-        _type: 'test',
-        id: generator.id(),
-        name: generator.name(),
-      }
-
-      const strategy = createSelectionStrategy(props)
-
-      const initialSelection = new Map<SelectableKeyType, TestSelectable>().set(
-        adapter.getKey(item),
-        item
-      )
-      const expectedSelection = new Map<SelectableKeyType, TestSelectable>()
-
-      expect(strategy.toggle([item], initialSelection)).toEqual(expectedSelection)
-    })
-
-    it('toggles correctly the provided items that are not selected', () => {
-      const item = {
-        _type: 'test',
-        id: generator.id(),
-        name: generator.name(),
-      }
-
-      const strategy = createSelectionStrategy(props)
-
-      const initialSelection = new Map<SelectableKeyType, TestSelectable>()
-      const expectedSelection = new Map<SelectableKeyType, TestSelectable>().set(
-        adapter.getKey(item),
-        item
-      )
-
-      expect(strategy.toggle([item], initialSelection)).toEqual(expectedSelection)
-    })
-
-    it('returns empty selection correctly', () => {
-      const item = {
-        _type: 'test',
-        id: generator.id(),
-        name: generator.name(),
-      }
-
-      const strategy = createSelectionStrategy(props)
-
-      const initialSelection = new Map<SelectableKeyType, TestSelectable>().set(
-        adapter.getKey(item),
-        item
-      )
-      const expectedSelection = new Map<SelectableKeyType, TestSelectable>()
-
-      expect(strategy.clear(initialSelection)).toEqual(expectedSelection)
-    })
-  })
-
-  describe('MultipleSelectionStrategy', () => {
-    const props = {
-      adapters,
-      multiple: true,
-    }
-
-    it('initializes with empty selection when no items are provided', () => {
-      const strategy = createSelectionStrategy(props)
-      const expectedSelection = new Map<SelectableKeyType, TestSelectable>()
-
-      expect(strategy.init([])).toEqual(expectedSelection)
-    })
-
-    it('initializes correctly when items array is provided', () => {
-      const items = [
-        {
-          _type: 'test',
-          id: generator.id(),
-          name: generator.name(),
-        },
-        {
-          _type: 'test',
-          id: generator.id(),
-          name: generator.name(),
-        },
-      ]
-
-      const strategy = createSelectionStrategy(props)
-      const expectedSelection = new Map<SelectableKeyType, TestSelectable>()
-        .set(adapter.getKey(items[0]), items[0])
-        .set(adapter.getKey(items[1]), items[1])
-
-      expect(strategy.init(items)).toEqual(expectedSelection)
-    })
-
-    it('returns empty selection when no items is provided to select', () => {
-      const strategy = createSelectionStrategy(props)
-      const expectedSelection = new Map<SelectableKeyType, TestSelectable>()
-
-      expect(strategy.select([], new Map<SelectableKeyType, TestSelectable>())).toEqual(
-        expectedSelection
-      )
-    })
-
-    it('selects correctly when a single item is provided', () => {
-      const items = [
-        {
-          _type: 'test',
-          id: generator.id(),
-          name: generator.name(),
-        },
-        {
-          _type: 'test',
-          id: generator.id(),
-          name: generator.name(),
-        },
-      ]
-
-      const strategy = createSelectionStrategy(props)
-      const expectedSelection = new Map<SelectableKeyType, TestSelectable>().set(
-        adapter.getKey(items[0]),
-        items[0]
-      )
-
-      expect(strategy.select([items[0]], new Map<SelectableKeyType, TestSelectable>())).toEqual(
-        expectedSelection
-      )
-    })
-
-    it('selects correctly when multiple items are provided', () => {
-      const items = [
-        {
-          _type: 'test',
-          id: generator.id(),
-          name: generator.name(),
-        },
-        {
-          _type: 'test',
-          id: generator.id(),
-          name: generator.name(),
-        },
-      ]
-
-      const strategy = createSelectionStrategy(props)
-      const expectedSelection = new Map<SelectableKeyType, TestSelectable>()
-        .set(adapter.getKey(items[0]), items[0])
-        .set(adapter.getKey(items[1]), items[1])
-
-      expect(strategy.select(items, new Map<SelectableKeyType, TestSelectable>())).toEqual(
-        expectedSelection
-      )
-    })
-
-    it('keeps selection when no items is provided to unselect', () => {
-      const items = [
-        {
-          _type: 'test',
-          id: generator.id(),
-          name: generator.name(),
-        },
-        {
-          _type: 'test',
-          id: generator.id(),
-          name: generator.name(),
-        },
-      ]
-
-      const strategy = createSelectionStrategy(props)
-      const initialSelection = new Map<SelectableKeyType, TestSelectable>()
-        .set(adapter.getKey(items[0]), items[0])
-        .set(adapter.getKey(items[1]), items[1])
-
-      const expectedSelection = initialSelection
-
-      expect(strategy.unselect([], initialSelection)).toEqual(expectedSelection)
-    })
-
-    it('unselects correctly the provided items keys', () => {
-      const items = [
-        {
-          _type: 'test',
-          id: generator.id(),
-          name: generator.name(),
-        },
-        {
-          _type: 'test',
-          id: generator.id(),
-          name: generator.name(),
-        },
-      ]
-
-      const strategy = createSelectionStrategy(props)
-      const initialSelection = new Map<SelectableKeyType, TestSelectable>()
-        .set(adapter.getKey(items[0]), items[0])
-        .set(adapter.getKey(items[1]), items[1])
-
-      const expectedSelection = new Map<SelectableKeyType, TestSelectable>()
-
-      expect(
-        strategy.unselect([adapter.getKey(items[0]), adapter.getKey(items[1])], initialSelection)
-      ).toEqual(expectedSelection)
-    })
-
-    it('toggles correctly the provided items that are selected', () => {
-      const items = [
-        {
-          _type: 'test',
-          id: generator.id(),
-          name: generator.name(),
-        },
-        {
-          _type: 'test',
-          id: generator.id(),
-          name: generator.name(),
-        },
-      ]
-
-      const strategy = createSelectionStrategy(props)
-      const initialSelection = new Map<SelectableKeyType, TestSelectable>()
-        .set(adapter.getKey(items[0]), items[0])
-        .set(adapter.getKey(items[1]), items[1])
-
-      const expectedSelection = new Map<SelectableKeyType, TestSelectable>()
-
-      expect(strategy.toggle(items, initialSelection)).toEqual(expectedSelection)
-    })
-
-    it('toggles correctly the provided items that are not selected', () => {
-      const items = [
-        {
-          _type: 'test',
-          id: generator.id(),
-          name: generator.name(),
-        },
-        {
-          _type: 'test',
-          id: generator.id(),
-          name: generator.name(),
-        },
-      ]
-
-      const strategy = createSelectionStrategy(props)
-      const initialSelection = new Map<SelectableKeyType, TestSelectable>()
-      const expectedSelection = new Map<SelectableKeyType, TestSelectable>()
-        .set(adapter.getKey(items[0]), items[0])
-        .set(adapter.getKey(items[1]), items[1])
-
-      expect(strategy.toggle(items, initialSelection)).toEqual(expectedSelection)
-    })
-
-    it('returns empty selection correctly', () => {
-      const item = {
-        _type: 'test',
-        id: generator.id(),
-        name: generator.name(),
-      }
-
-      const strategy = createSelectionStrategy(props)
-
-      const initialSelection = new Map<SelectableKeyType, TestSelectable>().set(
-        adapter.getKey(item),
-        item
-      )
-      const expectedSelection = new Map<SelectableKeyType, TestSelectable>()
-
-      expect(strategy.clear(initialSelection)).toEqual(expectedSelection)
-    })
-  })
-})