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

package/src/components/Select/useSelect.ts

@@ -1,540 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { isFunction } from '@loadsmart/utils-function'
-import { isNil } from '@loadsmart/utils-object'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-
-import isEmpty from 'utils/toolset/isEmpty'
-import { useDropdown } from 'components/Dropdown'
-import { useDidMount } from 'hooks/useDidMount'
-import { useFocusTrap } from 'hooks/useFocusTrap'
-import type { SelectableKeyType } from 'hooks/useSelectable'
-import to from 'utils/toolset/awaitTo'
-import { isThenable } from 'utils/toolset/isThenable'
-import toArray from 'utils/toolset/toArray'
-import { GenericAdapter } from './Select.constants'
-import { useSelectable } from './Select.context'
-import {
-  escapeRegExp,
-  getAdapter,
-  getDisplayValue,
-  getValue,
-  toSelection,
-} from './useSelect.helpers'
-
-import type { ChangeEvent, FocusEvent } from 'react'
-import type {
-  Adapters,
-  GenericOption,
-  Option,
-  SelectDatasource,
-  SelectDatasourceFunction,
-  SelectProps,
-  SelectStatus,
-  SelectValue,
-  useSelectReturn,
-} from './Select.types'
-
-async function getData(datasources: SelectDatasource<any>[], query: string) {
-  const regex = new RegExp(escapeRegExp(query), 'i')
-
-  const promises = []
-  const types: string[] = []
-
-  for (const ds of datasources) {
-    promises.push(Promise.resolve(ds.fetch({ query, regex })))
-    types.push(ds.type)
-  }
-
-  // We use Promise.allSettled here because Promise.all rejects as soon as one promise fails
-  // But we want to continue with the next datasource when one fails.
-  const results = await Promise.allSettled(promises)
-
-  let items: Option[] = []
-
-  results.forEach((result, index) => {
-    if (result.status === 'rejected') {
-      return
-    }
-
-    const type = types[index]
-
-    items = items.concat(
-      (result.value || []).map((item) => {
-        return {
-          ...item,
-          _type: type,
-        } as Option
-      })
-    )
-  })
-
-  return items
-}
-
-function getDatasources(props: SelectProps) {
-  function getDatasourceFromOptions(
-    options?: GenericOption[] | null
-  ): SelectDatasourceFunction<any>[] {
-    if (!options) {
-      return []
-    }
-
-    return [
-      function useGenericDatasource() {
-        return {
-          type: 'generic',
-          adapter: GenericAdapter,
-          fetch: function fetch({ regex }) {
-            return options.filter(({ label }) => regex.test(label))
-          },
-        }
-      },
-    ]
-  }
-
-  let datasources: SelectDatasourceFunction<any>[] = []
-
-  datasources = datasources.concat(props.datasources || [])
-  datasources = datasources.concat(getDatasourceFromOptions(props.options))
-
-  return datasources.map((ds) => ds())
-}
-
-function extractAdapters(datasources: SelectDatasource<any>[]) {
-  return toArray(datasources).reduce((map, ds) => {
-    return {
-      ...map,
-      [ds.type]: ds.adapter,
-    }
-  }, {})
-}
-
-function TriggerOnFocusHandler(e: FocusEvent<HTMLInputElement>) {
-  e.target.select()
-}
-
-function mapOptions(items: Option[], adapters: Adapters) {
-  const options = new Map<SelectableKeyType, Option>()
-
-  items.forEach((item) => {
-    const adapter = getAdapter(adapters, item._type)
-    options.set(adapter.getKey(item), item)
-  })
-
-  return options
-}
-
-function useOptions<T = any>(props: { datasources: SelectDatasource<T>[]; adapters: Adapters }) {
-  const { datasources, adapters } = props
-  const [options, setOptions] = useState(new Map<SelectableKeyType, Option>())
-  const [status, setStatus] = useState<SelectStatus>('idle')
-
-  const timeoutRef = useRef<NodeJS.Timeout>()
-
-  function cancelPendingFetch() {
-    if (timeoutRef.current != null) {
-      clearTimeout(timeoutRef.current)
-    }
-  }
-
-  const fetchAfterTimeout = useCallback(
-    function fetchAfterTimeout(query: string) {
-      cancelPendingFetch()
-      /**
-       * The `pending-query` status represents that the 'fetching' has been started
-       * but it has been debounced and the internal fetch has not yet been called.
-       * This is important because at this point the status is not idle
-       * as the fetching has already started.
-       */
-      setStatus('pending-query')
-
-      async function fetch() {
-        setOptions(new Map<SelectableKeyType, Option>())
-        setStatus('querying')
-
-        const items = await getData(datasources, query)
-
-        setOptions(mapOptions(items, adapters))
-        setStatus('queried')
-      }
-
-      timeoutRef.current = setTimeout(() => void fetch(), 750)
-    },
-    [adapters, datasources]
-  )
-
-  const clear = useCallback(function clear() {
-    setStatus('idle')
-    setOptions(new Map<SelectableKeyType, Option>())
-  }, [])
-
-  const get = useCallback(
-    function get() {
-      return Array.from(options.values())
-    },
-    [options]
-  )
-
-  const reset = useCallback(
-    function reset() {
-      clear()
-      fetchAfterTimeout('')
-    },
-    [clear, fetchAfterTimeout]
-  )
-
-  const getOptionByKey = useCallback(
-    function getOptionByKey(key: SelectableKeyType) {
-      return options.get(key)
-    },
-    [options]
-  )
-
-  useEffect(() => {
-    return () => {
-      cancelPendingFetch()
-    }
-  }, [])
-
-  return {
-    get,
-    fetch: fetchAfterTimeout,
-    clear,
-    status,
-    getOptionByKey,
-    reset,
-  }
-}
-
-// TODO: keep adapter resolution in a single place
-// TODO: prevent state changes after unmount (`useMounted` hook from Alice Frontend)
-/**
- * Based on https://www.w3.org/TR/wai-aria-practices-1.1/examples/combobox/aria1.1pattern/listbox-combo.html
- * @param props
- * @returns
- */
-function useSelect(props: SelectProps): useSelectReturn {
-  const didMount = useDidMount()
-  const {
-    multiple,
-    onQueryChange,
-    onChange,
-    onCreate,
-    getInputProps,
-    id,
-    name,
-    disabled = false,
-    onBlur,
-    isValidNewOption = (query: string) => Boolean(query),
-    createOptionPosition = 'last',
-  } = props
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const datasources = useMemo<SelectDatasource<any>[]>(
-    () => getDatasources(props),
-    [props.datasources, props.options]
-  )
-  const adapters = useMemo<Adapters>(() => extractAdapters(datasources), [datasources])
-
-  const selectable = useSelectable({
-    selected: toSelection(props.value),
-    multiple,
-    adapters,
-    onChange: useCallback(
-      function handleSelectionChange(selected: SelectValue) {
-        onChange?.({ target: { id, name, value: getValue(selected, multiple) } })
-      },
-      [id, multiple, name, onChange]
-    ),
-  })
-
-  const triggerRef = useRef<HTMLInputElement>()
-  const focusTrap = useFocusTrap({
-    keys: ['ARROW_UP', 'ARROW_DOWN'],
-    onDeactivate() {
-      triggerRef.current?.focus()
-    },
-  })
-
-  const [queryTyped, setQueryTyped] = useState(false)
-  const [query, setQuery] = useState<string>(
-    getDisplayValue(adapters, selectable.selected, multiple)
-  )
-  const options = useOptions({ datasources, adapters })
-
-  const expandDisabled = useMemo(
-    () =>
-      !query.length &&
-      isEmpty(options.get()) &&
-      isEmpty(selectable.selected) &&
-      isFunction(isValidNewOption)
-        ? !isValidNewOption(query)
-        : !isValidNewOption,
-    [query, options, selectable.selected, isValidNewOption]
-  )
-
-  const dropdown = useDropdown({ ...props, expandDisabled })
-
-  useEffect(() => {
-    if (queryTyped) {
-      options.fetch(query)
-      dropdown.expand()
-    }
-  }, [query, queryTyped])
-
-  const getSelectableOption = useCallback(
-    function getSelectableOption(option: Option) {
-      const adapter = getAdapter(adapters, option._type)
-
-      const value = adapter.getKey(option)
-      const label = adapter.getLabel(option)
-      const checked = selectable.selected.has(value)
-
-      return { label, value, checked }
-    },
-    [adapters, selectable.selected]
-  )
-
-  const getOption = useCallback(
-    function getOption(value: SelectableKeyType) {
-      let option = options.getOptionByKey(value)
-
-      if (!option) {
-        option = selectable.selected.get(value)
-      }
-
-      return option
-    },
-    [options, selectable.selected]
-  )
-
-  const toggleOption = useCallback(
-    function toggleOption(option: Option) {
-      selectable.toggle(option)
-    },
-    [selectable]
-  )
-
-  const getDropdownProps = useCallback(
-    function getDropdownProps() {
-      return {
-        toggle: dropdown.toggle,
-        expanded: dropdown.expanded,
-        onBlur(event?: MouseEvent | TouchEvent | KeyboardEvent) {
-          setQueryTyped(false)
-
-          if (!multiple) {
-            setQuery(getDisplayValue(adapters, selectable.selected, multiple))
-          } else {
-            setQuery('')
-          }
-          options.reset()
-          onBlur?.(event)
-        },
-        expandDisabled,
-      }
-    },
-    [
-      adapters,
-      dropdown.expanded,
-      dropdown.toggle,
-      multiple,
-      options,
-      selectable.selected,
-      onBlur,
-      expandDisabled,
-    ]
-  )
-
-  const getTriggerProps = useCallback(
-    function getTriggerProps() {
-      return {
-        ...getInputProps?.(),
-        id,
-        ref(node: HTMLInputElement | null) {
-          if (node != null) {
-            triggerRef.current = node
-          }
-        },
-        value: query,
-        onChange(e: ChangeEvent<HTMLInputElement>) {
-          const sanitizedValue = e.target.value.replace(/\s+/, '')
-
-          setQueryTyped(sanitizedValue !== '')
-          onQueryChange?.(e)
-          setQuery(e.target.value)
-        },
-        onFocus: TriggerOnFocusHandler,
-      }
-    },
-    [id, query, onQueryChange, dropdown, options, selectable.selected]
-  )
-
-  const getClearProps = useCallback(
-    function getClearProps() {
-      return {
-        onClick() {
-          setQueryTyped(false)
-          setQuery('')
-          selectable.clear()
-          options.reset()
-          triggerRef.current?.focus()
-        },
-      }
-    },
-    [options, selectable]
-  )
-
-  const getMenuProps = useCallback(
-    function getMenuProps() {
-      return {
-        ref: focusTrap.containerRef,
-        role: 'listbox',
-      }
-    },
-    [focusTrap.containerRef]
-  )
-
-  const getOptionProps = useCallback(
-    function getOptionProps({ option }: { option: Option }) {
-      const { value, checked, label } = getSelectableOption(option)
-
-      return {
-        role: 'option',
-        'aria-selected': checked,
-        id: String(value),
-        onClick() {
-          setQueryTyped(false)
-
-          if (!multiple) {
-            setQueryTyped(false)
-          }
-          toggleOption(option)
-
-          return multiple
-        },
-        tabIndex: -1,
-      }
-    },
-    [getSelectableOption, toggleOption, multiple]
-  )
-
-  const getCreatebleProps = useCallback(
-    function getCreatebleProps() {
-      return {
-        onClick: function onClick() {
-          async function asyncOnClick() {
-            if (!isFunction(onCreate)) return
-
-            const onCreateReturn = onCreate(query)
-
-            let option
-            if (onCreateReturn) {
-              if (isThenable(onCreateReturn)) {
-                option = await onCreateReturn
-              } else {
-                option = onCreateReturn
-              }
-            }
-
-            options.fetch(query)
-
-            if (option) {
-              toggleOption(option)
-            }
-          }
-
-          void asyncOnClick()
-
-          return multiple
-        },
-        tabIndex: -1,
-      }
-    },
-    [multiple, onCreate, query, options, toggleOption]
-  )
-
-  const isCreatable = useCallback(
-    function isCreatable() {
-      const findByLabel = (item: Option) =>
-        getSelectableOption(item).label.toLocaleLowerCase() === query.toLocaleLowerCase()
-
-      function isQueryEqualAnOption() {
-        return !isNil(
-          [...options.get(), ...Array.from(selectable.selected.values())].find(findByLabel)
-        )
-      }
-
-      function getIsValidNewOption() {
-        if (isFunction(isValidNewOption)) {
-          return isValidNewOption(query) && !isQueryEqualAnOption()
-        }
-
-        return isValidNewOption
-      }
-
-      return isFunction(onCreate) && options.status === 'queried' && getIsValidNewOption()
-    },
-    [getSelectableOption, isValidNewOption, onCreate, options, query, selectable.selected]
-  )
-
-  useEffect(
-    function onInit() {
-      options.fetch('')
-    },
-    // we just want to load any initial options that a datasource may have available
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [datasources]
-  )
-
-  useEffect(
-    function onDropdownToggle() {
-      if (!props.autoFocus && !didMount) {
-        return
-      }
-      if (dropdown.expanded) {
-        focusTrap.activate()
-      } else {
-        focusTrap.deactivate()
-      }
-    },
-    /**
-     * We are interested in activating/deactivating our
-     * focus trap when the dropdown changes its expanded state.
-     */
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [dropdown.expanded]
-  )
-
-  useEffect(
-    function updateOnSelectedChange() {
-      if (!multiple) {
-        setQuery(getDisplayValue(adapters, selectable.selected, multiple))
-      }
-    },
-    [adapters, multiple, selectable.selected]
-  )
-
-  return {
-    status: options.status,
-    options: options.get(),
-    value: getValue(selectable.selected, multiple),
-    query,
-    disabled,
-
-    selectable,
-
-    getMenuProps,
-    getSelectableOption,
-    getOption,
-    getOptionProps,
-    getTriggerProps,
-    getClearProps,
-    getDropdownProps,
-    getCreatebleProps,
-    isCreatable,
-    createOptionPosition,
-  }
-}
-
-export default useSelect

package/src/components/Select/useSelectExternal.ts

@@ -1,26 +0,0 @@
-import { useCallback, useContext } from 'react'
-
-import { SelectContext } from './Select.context'
-import type { Option, useSelectExternalReturn } from './Select.types'
-
-export function useSelectExternal(): useSelectExternalReturn {
-  const select =
-    useContext(SelectContext) ||
-    (() => {
-      throw new Error('useSelect should be wrapped in a SelectContext')
-    })()
-
-  const isChecked = useCallback(
-    function isChecked(option: Option) {
-      const { checked } = select.getSelectableOption(option)
-      return checked
-    },
-    [select]
-  )
-
-  return {
-    query: select.query,
-    getOption: select.getOption,
-    isChecked,
-  }
-}

package/src/components/SideNavigation/Logo/Logo.test.tsx

@@ -1,19 +0,0 @@
-import React from 'react'
-
-import { Logo } from './'
-import renderer, { screen } from '../../../tests/renderer'
-import generator from '../../../tests/generator'
-import type { LogoProps } from './Logo'
-
-const setup = ({ ...overrides }: LogoProps) => renderer(<Logo {...overrides} />).render()
-
-describe('<Logo />', () => {
-  it('renders correctly', () => {
-    const sentence = generator.sentence()
-    const url = generator.url()
-    setup({ url, children: <span>{sentence}</span> })
-
-    expect(screen.getByText(sentence)).toBeInTheDocument()
-    expect(screen.getByRole('link')).toHaveProperty('href', url)
-  })
-})

package/src/components/SideNavigation/Logo/Logo.tsx

@@ -1,26 +0,0 @@
-import React from 'react'
-import type { PropsWithChildren } from 'react'
-import styled from 'styled-components'
-
-import { getToken as token } from 'theming'
-import { BaseLink } from 'components/Link'
-
-export type LogoProps = PropsWithChildren<{
-  url: string
-  className?: string
-}>
-
-const Container = styled.div`
-  padding-right: ${token('space-l')};
-  padding-left: ${token('space-l')};
-`
-
-function Logo({ className, url, children }: LogoProps): JSX.Element {
-  return (
-    <Container className={className}>
-      <BaseLink href={url}>{children}</BaseLink>
-    </Container>
-  )
-}
-
-export default styled(Logo)<LogoProps>({})

package/src/components/SideNavigation/Logo/index.ts

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

package/src/components/SideNavigation/Menu/Menu.test.tsx

@@ -1,65 +0,0 @@
-import React from 'react'
-
-import { Menu } from './'
-import type { MenuProps } from './Menu'
-import renderer, { screen } from '../../../tests/renderer'
-import generator from '../../../tests/generator'
-import userEvent from '@testing-library/user-event'
-
-function setup(props: MenuProps) {
-  renderer(<Menu {...props} />).render()
-}
-
-describe('<Menu />', () => {
-  it('should handle label and items', () => {
-    const label = generator.word()
-    const itemLabel = generator.word()
-    const itemUrl = generator.url()
-
-    setup({
-      label: label,
-      children: <Menu.Item label={itemLabel} url={itemUrl} />,
-    })
-
-    expect(screen.getByRole('menubar')).toBeInTheDocument()
-    expect(screen.getByRole('menubar')).toHaveTextContent(label)
-    expect(screen.getByRole('menuitem')).toHaveTextContent(itemLabel)
-    expect(screen.getByRole('menuitem')).toHaveProperty('href', itemUrl)
-  })
-
-  it('should accept labels with leading and trailing as elements', () => {
-    const leading = <span>leading</span>
-    const trailing = <span>trailing</span>
-
-    setup({
-      label: 'label',
-      children: <Menu.Item leading={leading} trailing={trailing} label="" url="#" />,
-    })
-
-    expect(screen.getByRole('menuitem')).toHaveTextContent('leading')
-    expect(screen.getByRole('menuitem')).toHaveTextContent('trailing')
-  })
-
-  it('correctly expands and collapses subItems', () => {
-    const itemLabel = generator.word()
-    const subLabel = generator.word()
-
-    setup({
-      children: (
-        <Menu.Item label={itemLabel}>
-          <Menu.SubItem label={subLabel} url="#" />
-        </Menu.Item>
-      ),
-    })
-
-    expect(screen.getByText(subLabel)).not.toBeVisible()
-
-    userEvent.click(screen.getByText(itemLabel))
-
-    expect(screen.getByText(subLabel)).toBeVisible()
-
-    userEvent.click(screen.getByText(itemLabel))
-
-    expect(screen.getByText(subLabel)).not.toBeVisible()
-  })
-})