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

package/src/components/Select/SelectTrigger.tsx

@@ -1,83 +0,0 @@
-import React, { useContext, forwardRef } from 'react'
-import styled from 'styled-components'
-
-import { DropdownContext, DropdownTrigger, GenericDropdownTrigger } from 'components/Dropdown'
-import { getToken as token } from 'theming'
-import { TextField, Trailing } from 'components/TextField'
-import focusable from 'styles/focusable'
-
-import type { SelectTriggerProps } from './Select.types'
-import { isFunction } from '@loadsmart/utils-function'
-import { usePopover } from 'components/Popover'
-
-const GenericSelectTrigger = styled(GenericDropdownTrigger)`
-  background: ${token('color-neutral-white')};
-`
-
-const SelectTriggerSearchField = styled(TextField)`
-  ${focusable`
-    box-shadow: none;
-  `}
-
-  background-color: transparent;
-
-  border: none;
-  border-radius: ${token('border-radius-s')} 0 0 ${token('border-radius-s')};
-
-  height: ${token('select-trigger-height')};
-
-  flex: 1;
-
-  ${Trailing} {
-    margin: 0 ${token('space-xs')} 0 0;
-  }
-`
-
-const Separator = styled.span`
-  height: 100%;
-
-  margin: 0;
-
-  border-right-color: ${token('color-neutral-light')};
-  border-right-width: 1px;
-  border-right-style: solid;
-`
-
-const SelectTrigger = forwardRef<HTMLInputElement, SelectTriggerProps>(function SelectTrigger(
-  props: SelectTriggerProps,
-  ref
-) {
-  const { className, ...others } = props
-  const { disabled, expanded, toggle } = useContext(DropdownContext)
-
-  const { register } = usePopover()
-
-  function handleClick() {
-    if (!expanded) {
-      toggle()
-    }
-  }
-
-  return (
-    <GenericSelectTrigger className={className}>
-      <SelectTriggerSearchField
-        {...others}
-        data-testid="select-trigger-search-field"
-        ref={(node) => {
-          if (isFunction(ref)) {
-            ref(node)
-          }
-
-          register.setReference(node)
-        }}
-        type="search"
-        disabled={disabled}
-        onClick={handleClick}
-      />
-      <Separator />
-      <DropdownTrigger.Handle data-testid="select-trigger-handle" />
-    </GenericSelectTrigger>
-  )
-})
-
-export default SelectTrigger

package/src/components/Select/components.tsx

@@ -1,14 +0,0 @@
-import type { Components, CreatableOptionType } from './Select.types'
-import SelectCreatableOption from './SelectCreatableOption'
-import SelectEmpty from './SelectEmpty'
-import SelectOption from './SelectOption'
-
-const defaultComponents = {
-  Option: SelectOption,
-  Empty: SelectEmpty,
-  CreatableOption: SelectCreatableOption as CreatableOptionType,
-}
-
-export function getComponents(components?: Components): Required<Components> {
-  return { ...defaultComponents, ...components }
-}

package/src/components/Select/index.ts

@@ -1,12 +0,0 @@
-export { default as Select } from './Select'
-export type {
-  SelectProps,
-  useSelectExternalReturn as useSelectReturn,
-  SelectComponentsOptionProps as SelectOptionProps,
-  SelectComponentsEmptyProps as SelectEmptyProps,
-  Option as SelectOption,
-  OnChange as SelectOnChange,
-  OnCreate as SelectOnCreate,
-  OnQueryChange as SelectOnQueryChange,
-} from './Select.types'
-export { useSelectExternal as useSelect } from './useSelectExternal'

package/src/components/Select/useSelect.helpers.test.ts

@@ -1,184 +0,0 @@
-import { getDisplayValue, getValue, toSelection } from './useSelect.helpers'
-import generator from '../../tests/generator'
-
-import type { SelectAdapter, SelectValue, Option } from './Select.types'
-
-interface TestSelectable extends Option {
-  id: string
-  name: string
-}
-
-const adapter = {
-  getKey(o: TestSelectable): string {
-    return o.id
-  },
-  getLabel(o: TestSelectable): string {
-    return o.name
-  },
-}
-
-const adapters: Record<string, SelectAdapter<TestSelectable>> = {
-  test: adapter,
-}
-
-describe('useSelect helpers', () => {
-  describe('single selection', () => {
-    const multiple = false
-
-    it('returns null as value when selection is empty', () => {
-      const selection: SelectValue = new Map()
-
-      expect(getValue(selection, multiple)).toBeNull()
-    })
-
-    it('returns correct option as value when selection is not empty', () => {
-      const item = {
-        _type: 'test',
-        id: generator.id(),
-        name: generator.name(),
-      }
-
-      const selection: SelectValue = new Map().set(adapter.getKey(item), item)
-
-      expect(getValue(selection, multiple)).toEqual(item)
-    })
-
-    it('returns empty string as display value when selection is empty', () => {
-      const selection: SelectValue = new Map()
-
-      expect(getDisplayValue(adapters, selection, multiple)).toBe('')
-    })
-
-    it('returns correct display value when selection is not empty', () => {
-      const item = {
-        _type: 'test',
-        id: generator.id(),
-        name: generator.name(),
-      }
-
-      const selection: SelectValue = new Map().set(adapter.getKey(item), item)
-
-      expect(getDisplayValue(adapters, selection, multiple)).toEqual(adapter.getLabel(item))
-    })
-
-    it('returns empty string as display value when selection label is undefined', () => {
-      const selection: SelectValue = new Map().set(undefined, {
-        label: undefined,
-        value: undefined,
-      })
-
-      expect(getDisplayValue(adapters, selection, multiple)).toEqual('')
-    })
-  })
-
-  describe('multiple selection', () => {
-    const multiple = true
-
-    it('returns null as value when selection is empty', () => {
-      const selection: SelectValue = new Map()
-
-      expect(getValue(selection, multiple)).toBeNull()
-    })
-
-    it('returns correct option as value when selection is not empty', () => {
-      const items = [
-        {
-          _type: 'test',
-          id: generator.id(),
-          name: generator.name(),
-        },
-        {
-          _type: 'test',
-          id: generator.id(),
-          name: generator.name(),
-        },
-      ]
-
-      const selection: SelectValue = new Map()
-        .set(adapter.getKey(items[0]), items[0])
-        .set(adapter.getKey(items[1]), items[1])
-
-      expect(getValue(selection, multiple)).toEqual(items)
-    })
-
-    it('returns empty string as display value when selection is empty', () => {
-      const selection: SelectValue = new Map()
-
-      expect(getDisplayValue(adapters, selection, multiple)).toBe('')
-    })
-
-    it('returns empty string as display value when selection is not empty', () => {
-      const items = [
-        {
-          _type: 'test',
-          id: generator.id(),
-          name: generator.name(),
-        },
-        {
-          _type: 'test',
-          id: generator.id(),
-          name: generator.name(),
-        },
-      ]
-
-      const selection: SelectValue = new Map()
-        .set(adapter.getKey(items[0]), items[0])
-        .set(adapter.getKey(items[1]), items[1])
-
-      expect(getDisplayValue(adapters, selection, multiple)).toEqual('')
-    })
-
-    it('returns empty string as display value when selection label is undefined', () => {
-      const selection: SelectValue = new Map().set(undefined, {
-        label: undefined,
-        value: undefined,
-      })
-
-      expect(getDisplayValue(adapters, selection, multiple)).toEqual('')
-    })
-  })
-
-  describe('getSelection', () => {
-    it('initializes correctly when a null value is provided', () => {
-      expect(toSelection(null)).toEqual([])
-    })
-
-    it('initializes correctly when an undefined value is provided', () => {
-      expect(toSelection(undefined)).toEqual([])
-    })
-
-    it('initializes correctly when a valid value is provided', () => {
-      expect(
-        toSelection({
-          value: 'some-value',
-          label: 'Some label',
-        } as Option)
-      ).toEqual([
-        {
-          value: 'some-value',
-          label: 'Some label',
-        },
-      ])
-
-      expect(
-        toSelection([
-          {
-            value: 'some-value-1',
-            label: 'Some label 1',
-          } as Option,
-        ])
-      ).toEqual([
-        {
-          value: 'some-value-1',
-          label: 'Some label 1',
-        },
-      ])
-    })
-
-    it('initializes correctly when an empty value is provided', () => {
-      expect(toSelection([])).toEqual([])
-      expect(toSelection({})).toEqual([])
-      expect(toSelection([{}])).toEqual([])
-    })
-  })
-})

package/src/components/Select/useSelect.helpers.ts

@@ -1,63 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { GenericAdapter } from './Select.constants'
-import isEmpty from 'utils/toolset/isEmpty'
-import toArray from 'utils/toolset/toArray'
-
-import type { SelectAdapter, SelectValue, Option, Adapters, SelectProps } from './Select.types'
-
-export function getAdapter(adapters: Adapters, type?: string): SelectAdapter<any> {
-  if (type == null) {
-    return GenericAdapter
-  }
-
-  return adapters[type] || GenericAdapter
-}
-
-export function getValue(selection: SelectValue, multiple?: boolean): Option | Option[] | null {
-  const pairs = Array.from(selection)
-
-  if (isEmpty(pairs)) {
-    return null
-  }
-
-  if (multiple) {
-    const options = []
-    for (const [, option] of pairs) {
-      options.push(option)
-    }
-
-    return options
-  } else {
-    const [[, option]] = pairs
-    return option
-  }
-}
-
-export function toSelection(value: SelectProps['value']): Option[] {
-  const safeValue = toArray(value || [])
-
-  return safeValue.filter((option) => !isEmpty(option))
-}
-
-export function getDisplayValue(
-  adapters: Adapters,
-  selection: SelectValue,
-  multiple?: boolean
-): string {
-  if (selection.size == 0) {
-    return ''
-  }
-
-  if (multiple) {
-    return ''
-  } else {
-    const value = getValue(selection, multiple)
-    const adapter = getAdapter(adapters, (value as Option)._type)
-    return adapter.getLabel(value) ?? ''
-  }
-}
-
-// Based on https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#escaping
-export function escapeRegExp(value: string): string {
-  return String(value || '').replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
-}

package/src/components/Select/useSelect.test.ts

@@ -1,207 +0,0 @@
-import { renderHook } from '@testing-library/react-hooks'
-
-import useSelect from './useSelect'
-import type { SelectProps, Option } from './Select.types'
-
-describe('useSelect', () => {
-  describe('single selection', () => {
-    it('initializes correctly when no value is provided', () => {
-      const props: SelectProps = {
-        multiple: false,
-        name: 'anything',
-      }
-
-      const { result } = renderHook(() => useSelect(props))
-      const expectedSelected = new Map()
-
-      expect(result.current.selectable.selected).toEqual(expectedSelected)
-      expect(result.current.query).toBe('')
-    })
-
-    it('initializes correctly when a null value is provided', () => {
-      const props: SelectProps = {
-        multiple: false,
-        name: 'anything',
-        value: null,
-      }
-
-      const { result } = renderHook(() => useSelect(props))
-      const expectedSelected = new Map()
-
-      expect(result.current.selectable.selected).toEqual(expectedSelected)
-      expect(result.current.query).toBe('')
-    })
-
-    it('initializes correctly when an undefined value is provided', () => {
-      const props: SelectProps = {
-        multiple: false,
-        name: 'anything',
-        value: undefined,
-      }
-
-      const { result } = renderHook(() => useSelect(props))
-      const expectedSelected = new Map()
-
-      expect(result.current.selectable.selected).toEqual(expectedSelected)
-      expect(result.current.query).toBe('')
-    })
-
-    it('initializes correctly when a valid value is provided', () => {
-      const props: SelectProps = {
-        multiple: false,
-        name: 'anything',
-        value: {
-          value: 'some-value',
-          label: 'Some label',
-        } as Option,
-      }
-
-      const { result } = renderHook(() => useSelect(props))
-      const expectedSelected = new Map().set('some-value', {
-        value: 'some-value',
-        label: 'Some label',
-      })
-
-      expect(result.current.selectable.selected).toEqual(expectedSelected)
-      expect(result.current.query).toBe('Some label')
-    })
-
-    it('initializes correctly when an invalid value is provided', () => {
-      const props: SelectProps = {
-        multiple: false,
-        name: 'anything',
-        value: {
-          label: undefined,
-          value: undefined,
-        } as Option,
-      }
-
-      const { result } = renderHook(() => useSelect(props))
-      const expectedSelected = new Map().set(undefined, {
-        label: undefined,
-        value: undefined,
-      })
-
-      expect(result.current.selectable.selected).toEqual(expectedSelected)
-      expect(result.current.query).toBe('')
-    })
-
-    it('initializes correctly when an empty value is provided', () => {
-      const props: SelectProps = {
-        multiple: false,
-        name: 'anything',
-        value: {},
-      }
-
-      const { result } = renderHook(() => useSelect(props))
-      const expectedSelected = new Map()
-
-      expect(result.current.selectable.selected).toEqual(expectedSelected)
-      expect(result.current.query).toBe('')
-    })
-  })
-
-  describe('multiple selection', () => {
-    it('initializes correctly when no value is provided', () => {
-      const props: SelectProps = {
-        multiple: true,
-        name: 'anything',
-      }
-
-      const { result } = renderHook(() => useSelect(props))
-      const expectedSelected = new Map()
-
-      expect(result.current.selectable.selected).toEqual(expectedSelected)
-      expect(result.current.query).toBe('')
-    })
-
-    it('initializes correctly when a null value is provided', () => {
-      const props: SelectProps = {
-        multiple: true,
-        name: 'anything',
-        value: null,
-      }
-
-      const { result } = renderHook(() => useSelect(props))
-      const expectedSelected = new Map()
-
-      expect(result.current.selectable.selected).toEqual(expectedSelected)
-      expect(result.current.query).toBe('')
-    })
-
-    it('initializes correctly when an undefined value is provided', () => {
-      const props: SelectProps = {
-        multiple: true,
-        name: 'anything',
-        value: undefined,
-      }
-
-      const { result } = renderHook(() => useSelect(props))
-
-      const expectedSelected = new Map()
-
-      expect(result.current.selectable.selected).toEqual(expectedSelected)
-      expect(result.current.query).toBe('')
-    })
-
-    it('initializes correctly when a valid value is provided', () => {
-      const props: SelectProps = {
-        multiple: true,
-        name: 'anything',
-        value: [
-          {
-            value: 'some-value',
-            label: 'Some label',
-          } as Option,
-        ],
-      }
-
-      const { result } = renderHook(() => useSelect(props))
-
-      const expectedSelected = new Map().set('some-value', {
-        value: 'some-value',
-        label: 'Some label',
-      })
-
-      expect(result.current.selectable.selected).toEqual(expectedSelected)
-      expect(result.current.query).toBe('')
-    })
-
-    it('initializes correctly when an invalid value is provided', () => {
-      const props: SelectProps = {
-        multiple: true,
-        name: 'anything',
-        value: [
-          {
-            label: undefined,
-            value: undefined,
-          } as Option,
-        ],
-      }
-
-      const { result } = renderHook(() => useSelect(props))
-      const expectedSelected = new Map().set(undefined, {
-        label: undefined,
-        value: undefined,
-      })
-
-      expect(result.current.selectable.selected).toEqual(expectedSelected)
-      expect(result.current.query).toBe('')
-    })
-
-    it('initializes correctly when an empty value is provided', () => {
-      const props: SelectProps = {
-        multiple: true,
-        name: 'anything',
-        value: [{}],
-      }
-
-      const { result } = renderHook(() => useSelect(props))
-
-      const expectedSelected = new Map()
-
-      expect(result.current.selectable.selected).toEqual(expectedSelected)
-      expect(result.current.query).toBe('')
-    })
-  })
-})