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

package/src/components/Select/Select.tsx

@@ -1,271 +0,0 @@
-import React, { Fragment, forwardRef } from 'react'
-import styled from 'styled-components'
-
-import { Dropdown, GenericDropdown } from 'components/Dropdown'
-import { getToken as token } from 'theming'
-import { SelectableContext, SelectContext } from './Select.context'
-import { Tag } from 'components/Tag'
-import { Text } from 'components/Text'
-import CloseButton from 'common/CloseButton'
-import isEmpty from 'utils/toolset/isEmpty'
-import omit from 'utils/toolset/omit'
-import pluralize from 'utils/toolset/pluralize'
-import SelectTrigger from './SelectTrigger'
-import toArray from 'utils/toolset/toArray'
-import useSelect from './useSelect'
-import SelectOption from './SelectOption'
-import SelectEmpty from './SelectEmpty'
-import SelectCreatableOption from './SelectCreatableOption'
-import { getComponents } from './components'
-
-import type { DropdownMenuProps } from 'components/Dropdown'
-import type {
-  SelectProps,
-  useSelectReturn,
-  SelectStatus,
-  Components,
-  SelectableOption,
-} from './Select.types'
-
-const OMITTED_PROPS = [
-  'id',
-  'name',
-  'datasources',
-  'onChange',
-  'onQueryChange',
-  'onCreate',
-  'options',
-  'value',
-]
-
-const Loading = styled.span`
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  width: 2em;
-
-  height: 2em;
-  padding: ${token('space-xs')};
-
-  font-size: ${token('font-size-3')};
-`
-
-function getCommonClearButtonProps() {
-  return {
-    'data-testid': 'select-trigger-clear',
-  }
-}
-
-const SelectMenu = forwardRef<HTMLDivElement, DropdownMenuProps>(function SelectMenu(
-  props: DropdownMenuProps,
-  ref
-): JSX.Element {
-  return <Dropdown.Menu ref={ref} {...props} role="listbox" />
-})
-
-function ClearMultiple({ select }: { select: useSelectReturn }) {
-  const { onClick } = select.getClearProps()
-  const total = toArray(select.value).length
-
-  return (
-    <div data-testid="select-trigger-clear-counter">
-      <Tag
-        removable
-        size="default"
-        variant="accent"
-        onRemove={onClick}
-        title={`${total} selected option${pluralize(total)}`}
-        getRemoveButtonProps={getCommonClearButtonProps}
-        disabled={select.disabled}
-      >
-        {total}
-      </Tag>
-    </div>
-  )
-}
-
-const Divider = styled.hr`
-  width: calc(100% - ${token('space-m')});
-  height: 1px;
-  margin: ${token('space-m')} ${token('space-s')};
-
-  background-color: ${token('color-neutral-lighter')};
-  border: 0;
-`
-
-const DividerText = styled(Text)`
-  position: absolute;
-  top: ${token('space-s')};
-
-  padding-right: ${token('space-xs')};
-  padding-left: ${token('space-m')};
-
-  background-color: ${token('color-neutral-white')};
-`
-
-function isQuerying(status: SelectStatus) {
-  return ['pending-query', 'querying'].includes(status)
-}
-
-type SeparatorProps = {
-  status: SelectStatus
-  after?: unknown[]
-  before?: unknown[]
-}
-
-function Separator({ status, after = [], before = [] }: SeparatorProps): JSX.Element {
-  if (!isQuerying(status)) {
-    if (isEmpty(after) && !isEmpty(before)) return <Divider />
-    if (isEmpty(after)) return <Fragment />
-  }
-
-  return (
-    <div style={{ position: 'relative' }}>
-      <Divider />
-      <DividerText variant="caption-bold" color="color-neutral-light">
-        {isQuerying(status) ? 'Loading...' : `${after.length} option${pluralize(after.length)}`}
-      </DividerText>
-    </div>
-  )
-}
-
-function renderOptionsSingle(select: useSelectReturn, components?: Components): JSX.Element {
-  const { Option, Empty, CreatableOption } = getComponents(components)
-  const isCreatable = select.isCreatable()
-
-  if (isQuerying(select.status) && isEmpty(select.options)) {
-    return <SelectEmpty>Loading...</SelectEmpty>
-  }
-
-  if (isEmpty(select.options)) {
-    if (isCreatable) {
-      return <CreatableOption />
-    }
-
-    return <Empty>No results found.</Empty>
-  }
-
-  return (
-    <>
-      {select.createOptionPosition === 'first' && isCreatable ? <CreatableOption /> : null}
-      {select.options.map((option) => {
-        const { value } = select.getSelectableOption(option)
-        return <Option key={String(value)} value={value} />
-      })}
-      {select.createOptionPosition === 'last' && isCreatable ? <CreatableOption /> : null}
-    </>
-  )
-}
-
-function renderOptionsMultiple(select: useSelectReturn, components?: Components): JSX.Element {
-  const { Option, Empty, CreatableOption } = getComponents(components)
-  const isCreatable = select.isCreatable()
-
-  const selectedOptions = Array.from(select.selectable.selected.values()).map((selectable) =>
-    select.getSelectableOption(selectable)
-  )
-
-  const remainingOptions = select.options.reduce((remaining, selectable) => {
-    const option = select.getSelectableOption(selectable)
-
-    if (option.checked) {
-      return remaining
-    }
-
-    return [...remaining, option]
-  }, [] as SelectableOption[])
-
-  let remaining = (
-    <Fragment>
-      {select.createOptionPosition === 'first' && isCreatable ? <CreatableOption /> : null}
-      {remainingOptions.map((option) => (
-        <Option key={String(option.value)} value={option.value} />
-      ))}
-      {select.createOptionPosition === 'last' && isCreatable ? <CreatableOption /> : null}
-    </Fragment>
-  )
-
-  if (!isQuerying(select.status) && isEmpty(remainingOptions)) {
-    remaining = isCreatable ? <CreatableOption /> : <Empty>No more options.</Empty>
-  }
-
-  if (!isQuerying(select.status) && isEmpty(select.options)) {
-    remaining = isCreatable ? <CreatableOption /> : <Empty>No results found.</Empty>
-  }
-
-  return (
-    <Fragment>
-      {selectedOptions.map((option) => (
-        <Option key={String(option.value)} value={option.value} />
-      ))}
-      <Separator status={select.status} before={selectedOptions} after={remainingOptions} />
-      {remaining}
-    </Fragment>
-  )
-}
-
-function Select(props: SelectProps): JSX.Element {
-  const { multiple, placeholder, components, hideClear = false, ...others } = props
-
-  const select = useSelect(props)
-
-  function renderOptions() {
-    if (multiple) {
-      return renderOptionsMultiple(select, components)
-    }
-
-    return renderOptionsSingle(select, components)
-  }
-
-  function getTrailing() {
-    if (isQuerying(select.status)) {
-      return <Loading data-testid="select-trigger-loading">&middot;&middot;&middot;</Loading>
-    }
-
-    if (!select.value) {
-      return null
-    }
-
-    if (multiple) {
-      return <ClearMultiple select={select} />
-    }
-
-    if (select.disabled || hideClear) {
-      return null
-    }
-
-    return (
-      <CloseButton
-        size={12}
-        {...getCommonClearButtonProps()}
-        {...select.getClearProps()}
-        type="button"
-      />
-    )
-  }
-
-  return (
-    <GenericDropdown {...omit(others, OMITTED_PROPS)} {...select.getDropdownProps()}>
-      <SelectableContext.Provider value={select.selectable}>
-        <SelectTrigger
-          {...select.getTriggerProps()}
-          trailing={getTrailing()}
-          placeholder={placeholder}
-          autoComplete="off"
-          aria-autocomplete="none"
-        />
-        <SelectMenu {...select.getMenuProps()}>
-          <SelectContext.Provider value={select}>{renderOptions()}</SelectContext.Provider>
-        </SelectMenu>
-      </SelectableContext.Provider>
-    </GenericDropdown>
-  )
-}
-
-Select.Trigger = SelectTrigger
-Select.Option = SelectOption
-Select.Empty = SelectEmpty
-Select.CreatableOption = SelectCreatableOption
-
-export default Select

package/src/components/Select/Select.types.ts

@@ -1,148 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import type EventLike from 'utils/types/EventLike'
-
-import type { DropdownMenuItemProps, DropdownProps } from 'components/Dropdown'
-import type { TextFieldProps } from 'components/TextField'
-import type {
-  Selectable,
-  SelectableAdapter,
-  SelectableKeyType,
-  SelectableState,
-} from 'hooks/useSelectable'
-import type { useSelectableReturn } from 'hooks/useSelectable/useSelectable.types'
-import type { ChangeEvent, ComponentType, FocusEvent, HTMLAttributes } from 'react'
-
-export type Option = Selectable
-export interface GenericOption {
-  label: string
-  value: SelectableKeyType
-}
-
-export interface SelectableOption extends GenericOption {
-  checked: boolean
-}
-
-export interface SelectableOptionProps {
-  role: string
-  'aria-selected': boolean
-  id: string
-  onClick: () => boolean | undefined
-  tabIndex: number
-}
-
-export interface CreatableProps {
-  onClick: () => void
-  tabIndex: number
-}
-
-export type OptionKeyType = SelectableKeyType
-
-export type SelectValue = SelectableState<Option>
-
-export interface SelectAdapter<T> extends SelectableAdapter<T> {
-  getLabel: (o: T) => string
-}
-
-export type Adapters = Record<string, SelectAdapter<any>>
-
-export type SelectDatasource<T> = {
-  type: string
-  adapter: SelectAdapter<T>
-  fetch: ({ query, regex }: { query: string; regex: RegExp }) => T[] | Promise<T[]>
-}
-
-export type SelectDatasourceFunction<T> = () => SelectDatasource<T>
-
-export type SelectComponentsOptionProps = {
-  value: SelectOptionProps['value']
-}
-export type SelectComponentsEmptyProps = {
-  children: SelectEmptyProps['children']
-}
-export type CreatableOptionType = () => React.ReactElement<any, any> | null
-
-export type Components = {
-  Option?: ComponentType<SelectComponentsOptionProps>
-  Empty?: ComponentType<SelectComponentsEmptyProps>
-  CreatableOption?: CreatableOptionType
-}
-
-export type CreateOptionPosition = 'first' | 'last'
-
-export type OnChange = (event: EventLike<Option | Option[] | null>) => void
-
-export type OnCreate = (query: string) => Promise<void | Option> | void | Option
-
-export type OnQueryChange = (e: ChangeEvent<HTMLInputElement>) => void
-
-export interface SelectProps extends DropdownProps {
-  name: string
-  placeholder?: string
-  value?: Option | Option[] | null
-  multiple?: boolean
-  autoFocus?: boolean
-  datasources?: SelectDatasourceFunction<any>[]
-  options?: GenericOption[]
-  components?: Components
-  onChange?: OnChange
-  onCreate?: OnCreate
-  onQueryChange?: OnQueryChange
-  getInputProps?: () => Partial<TextFieldProps>
-  isValidNewOption?: ((query: string) => boolean) | boolean
-  createOptionPosition?: CreateOptionPosition
-  /**
-   * Hide the clear button on the Single Select.
-   */
-  hideClear?: boolean
-}
-
-export type SelectOptionProps = {
-  value: SelectableKeyType
-} & Omit<DropdownMenuItemProps, keyof SelectableOptionProps | 'value'>
-
-export type SelectEmptyProps = HTMLAttributes<HTMLDivElement>
-
-export type SelectCreatableOptionProps = Omit<DropdownMenuItemProps, keyof CreatableProps>
-
-export type SelectStatus = 'idle' | 'querying' | 'pending-query' | 'queried'
-
-export type SelectTriggerProps = TextFieldProps
-
-export type useSelectReturn = {
-  status: SelectStatus
-  options: Option[]
-  value: Selectable | Selectable[] | null
-  query: string
-  disabled: boolean
-  selectable: useSelectableReturn<Option>
-  getMenuProps: () => {
-    ref: (container: HTMLElement | null) => void
-    role: string
-  }
-  getSelectableOption: (option: Option) => SelectableOption
-  getOption: (value: SelectableKeyType) => Option | undefined
-  getOptionProps: ({ option }: { option: Option }) => SelectableOptionProps
-  getTriggerProps: () => {
-    ref: (node: HTMLInputElement | null) => void
-    value: string
-    onChange: (e: ChangeEvent<HTMLInputElement>) => void
-    onFocus: (e: FocusEvent<HTMLInputElement>) => void
-  }
-  getClearProps: () => {
-    onClick: () => void
-  }
-  getDropdownProps: () => {
-    toggle: () => void
-    expanded: boolean
-    onBlur: (event?: MouseEvent | TouchEvent | KeyboardEvent) => void
-  }
-  getCreatebleProps: () => CreatableProps
-  isCreatable: () => boolean
-  createOptionPosition?: CreateOptionPosition
-}
-
-export type useSelectExternalReturn = {
-  getOption: useSelectReturn['getOption']
-  query: useSelectReturn['query']
-  isChecked: (option: Option) => boolean
-}

package/src/components/Select/SelectCreatableOption.tsx

@@ -1,20 +0,0 @@
-import React, { useContext } from 'react'
-import { Dropdown } from 'components/Dropdown'
-import { SelectContext } from './Select.context'
-import type { SelectCreatableOptionProps } from './Select.types'
-
-function SelectCreatableOption({ children, ...rest }: SelectCreatableOptionProps): JSX.Element {
-  const select =
-    useContext(SelectContext) ||
-    (() => {
-      throw new Error('SelectCreatableOption should be wrapped in a SelectContext')
-    })()
-
-  return (
-    <Dropdown.Item {...rest} {...select.getCreatebleProps()}>
-      {children || `Add "${select.query}"`}
-    </Dropdown.Item>
-  )
-}
-
-export default SelectCreatableOption

package/src/components/Select/SelectEmpty.test.tsx

@@ -1,15 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import React from 'react'
-
-import type { SelectEmptyProps } from './Select.types'
-import SelectEmpty from './SelectEmpty'
-
-const setup = (overrides: Partial<SelectEmptyProps>) => render(<SelectEmpty {...overrides} />)
-
-describe('<SelectEmpty />', () => {
-  it('render correctly', () => {
-    setup({ children: 'Just some content' })
-
-    screen.getByText('Just some content')
-  })
-})

package/src/components/Select/SelectEmpty.tsx

@@ -1,29 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-
-import { getToken as token } from 'theming'
-import type { SelectEmptyProps } from './Select.types'
-
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-
-  box-sizing: border-box;
-  margin: 0 ${token('space-s')};
-  padding: ${token('space-s')};
-
-  color: ${token('color-neutral')};
-
-  font-size: 1em;
-  line-height: ${token('font-height-3')};
-
-  background: ${token('color-transparent')};
-`
-
-function SelectEmpty({ children, ...others }: SelectEmptyProps): JSX.Element {
-  return <Wrapper {...others}>{children}</Wrapper>
-}
-
-export default SelectEmpty

package/src/components/Select/SelectOption.test.tsx

@@ -1,78 +0,0 @@
-import React from 'react'
-import { render, screen, waitFor } from '@testing-library/react'
-import SelectOption from './SelectOption'
-import { SelectContext } from './Select.context'
-import useSelect from './useSelect'
-import type { Option, SelectOptionProps, SelectProps, useSelectReturn } from './Select.types'
-
-type Props = {
-  optionProps: SelectOptionProps
-  selectProps: SelectProps & { query: string }
-}
-
-const options = [{ value: '1', label: 'Apple' }]
-const Setup = ({ optionProps, selectProps }: Props) => {
-  const select = useSelect({ options, ...selectProps })
-  const { query } = selectProps
-  select.query = query
-
-  return (
-    <SelectContext.Provider value={select as unknown as useSelectReturn}>
-      <SelectOption {...optionProps} />
-    </SelectContext.Provider>
-  )
-}
-
-describe('SelectOption', () => {
-  const setup = (
-    optionProps: SelectOptionProps,
-    selectProps: Partial<Props['selectProps']> = {}
-  ) => {
-    render(<Setup selectProps={selectProps as Props['selectProps']} optionProps={optionProps} />)
-  }
-
-  it.each([{ multiple: false }, { multiple: true }])(
-    'renders the children when it is provided - %s',
-    (props) => {
-      setup({ children: 'foo', value: '1' }, props)
-
-      expect(screen.getByText('foo')).toBeInTheDocument()
-    }
-  )
-
-  it.each([{ multiple: false }, { multiple: true }])(
-    'renders option label when value is given with no children - %s',
-    async (props) => {
-      setup({ value: '1' }, props)
-
-      await waitFor(() => {
-        expect(screen.getByText('Apple')).toBeInTheDocument()
-      })
-    }
-  )
-
-  it.each([
-    { multiple: false },
-    { multiple: true },
-    {
-      value: options[0] as Option,
-    },
-  ])('renders option label and highlights the given query - %s', async (props) => {
-    setup({ value: '1' }, { query: 'App', ...props })
-
-    await waitFor(() => {
-      expect(screen.getByText(/^app$/i)).toBeInTheDocument()
-    })
-    expect(screen.getByTestId('dropdown-menu-item')).toHaveTextContent('Apple')
-  })
-
-  it('renders option label and does not highlight the given query when the option is checked - multiple', async () => {
-    const value = options[0] as Option
-    setup({ value: '1' }, { query: 'App', value, multiple: true })
-
-    expect(screen.getByText('Apple')).toBeInTheDocument()
-    await waitFor(() => {
-      expect(screen.queryByText(/^app$/i)).not.toBeInTheDocument()
-    })
-  })
-})

package/src/components/Select/SelectOption.tsx

@@ -1,79 +0,0 @@
-import React, { useContext } from 'react'
-import styled from 'styled-components'
-
-import { Checkbox } from 'components/Checkbox'
-import { Dropdown } from 'components/Dropdown'
-import { HighlightMatch } from 'components/HighlightMatch'
-import { Icon as DefaultIcon } from 'components/Icon'
-import { Group as DefaultGroup } from 'components/Layout'
-import conditional, { whenProps } from 'tools/conditional'
-import { getToken as token } from 'theming'
-
-import { SelectContext } from './Select.context'
-
-import type { DropdownMenuItemProps } from 'components/Dropdown'
-import type { SelectOptionProps } from './Select.types'
-
-const Group = styled(DefaultGroup).attrs({
-  as: 'span',
-})`
-  /* placeholder */
-`
-
-const Icon = styled(DefaultIcon)`
-  color: ${token('select-selected-option-check-color')};
-`
-
-const DefaultSelectOption = styled(Dropdown.Item)<DropdownMenuItemProps>`
-  background: ${conditional({
-    'select-selected-option-background-color': whenProps({ 'aria-selected': true }),
-    'color-neutral-white': whenProps({ 'aria-selected': false }),
-  })};
-`
-
-function SelectOption({
-  children,
-  value,
-  leading,
-  trailing,
-  ...rest
-}: SelectOptionProps): JSX.Element {
-  const select =
-    useContext(SelectContext) ||
-    (() => {
-      throw new Error('Options should be wrapped in a SelectContext')
-    })()
-
-  const type = select.selectable.type()
-  const option = select.getOption(value) || {}
-  const { checked, label } = select.getSelectableOption(option)
-
-  function renderContent() {
-    if (children) return children
-    if (checked && type === 'multiple') return label
-
-    return <HighlightMatch text={label} match={select.query} />
-  }
-
-  return (
-    <DefaultSelectOption
-      {...rest}
-      {...select.getOptionProps({ option })}
-      leading={
-        type === 'multiple' ? (
-          <Group align="center" space="s">
-            <Checkbox scale="small" defaultChecked={checked} />
-            {leading}
-          </Group>
-        ) : (
-          leading
-        )
-      }
-      trailing={type === 'single' ? checked ? <Icon name="check" /> : null : trailing}
-    >
-      {renderContent()}
-    </DefaultSelectOption>
-  )
-}
-
-export default SelectOption