List

options

ListOption[]

required

defaultSelected

ListOption[] | undefined

selectedOptions

ListOption[] | undefined

selectionMode

boolean | undefined

onSelectItem

((event: SyntheticEvent<HTMLElement, Event>, item: ListOption) => void) | undefined

onSelectedItemsChanged

((items: ListOption[]) => void) | undefined

renderHeader

((content: string) => ReactNode) | undefined

renderDescription

((content: string) => ReactNode) | undefined

onClickItem

((event: SyntheticEvent<HTMLElement, Event>, item: ListOption) => void) | undefined

className

string | undefined

Base usage

() => {
  return (
    <div style={{ width: 290 }}>
      <List
        options={[
          {
            id: 0,
            header: 'Coconut',
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
          },
          {
            id: 1,
            header: 'Apple',
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
          },
          {
            id: 2,
            header:
              'An apple is an edible fruit produced by an apple tree (Malus domestica).',
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
          },
          {
            id: 3,
            header: 'Apple',
            description:
              'An apple is an edible fruit produced by an apple tree (Malus domestica).',
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
          },
          {
            id: 4,
            header: 'Cherry',
            disabled: true,
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
          },
          {
            id: 5,
            header: 'Orange',
            description: 'Big orange',
            someEntityAttribute: 'f63749b4-793d-455b-93f2-1bbda64944d8',
            selected: true,
          },
          {
            id: 6,
            header: 'Banana',
            description: 'Big banana',
            disabled: true,
            someEntityAttribute: '7deb2588-ea31-4306-9f7b-3edb25b2cd82',
          },
        ]}
        onClickItem={(...args) => console.log('onClickItem', args)}
      />
    </div>
  )
}

() => {
  return (
    <div style={{ width: 290 }}>
      <List
        options={[
          {
            id: 0,
            header: 'Coconut',
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
          },
          {
            id: 1,
            header: 'Apple',
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
          },
          {
            id: 2,
            header:
              'An apple is an edible fruit produced by an apple tree (Malus domestica).',
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
          },
          {
            id: 3,
            header: 'Apple',
            description:
              'An apple is an edible fruit produced by an apple tree (Malus domestica).',
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
          },
          {
            id: 4,
            header: 'Cherry',
            disabled: true,
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
          },
          {
            id: 5,
            header: 'Orange',
            description: 'Big orange',
            someEntityAttribute: 'f63749b4-793d-455b-93f2-1bbda64944d8',
            selected: true,
          },
          {
            id: 6,
            header: 'Banana',
            description: 'Big banana',
            disabled: true,
            someEntityAttribute: '7deb2588-ea31-4306-9f7b-3edb25b2cd82',
          },
        ]}
        onClickItem={(...args) => console.log('onClickItem', args)}
      />
    </div>
  )
}

With icon

() => {
  return (
    <div style={{ width: 290 }}>
      <List
        options={[
          {
            id: 0,
            header: 'Coconut',
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
            icon: <List.Icon name="heart-icon" fill="#ff013a" />,
          },
          {
            id: 1,
            header:
              'An apple is an edible fruit produced by an apple tree (Malus domestica)',
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
          },
          {
            id: 2,
            header: 'Apple',
            description:
              'An apple is an edible fruit produced by an apple tree (Malus domestica)',
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
            icon: 'heart-icon',
          },
          {
            id: 3,
            header: 'Cherry',
            icon: 'heart-icon',
            disabled: true,
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
          },
          {
            id: 4,
            header: 'Orange',
            description: 'Big orange',
            icon: 'heart-icon',
            someEntityAttribute: 'f63749b4-793d-455b-93f2-1bbda64944d8',
            selected: true,
          },
          {
            id: 5,
            header: 'Banana',
            description: 'Big banana',
            disabled: true,
            icon: 'heart-icon',
            someEntityAttribute: '7deb2588-ea31-4306-9f7b-3edb25b2cd82',
          },
        ]}
      />
    </div>
  )
}

() => {
  return (
    <div style={{ width: 290 }}>
      <List
        options={[
          {
            id: 0,
            header: 'Coconut',
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
            icon: <List.Icon name="heart-icon" fill="#ff013a" />,
          },
          {
            id: 1,
            header:
              'An apple is an edible fruit produced by an apple tree (Malus domestica)',
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
          },
          {
            id: 2,
            header: 'Apple',
            description:
              'An apple is an edible fruit produced by an apple tree (Malus domestica)',
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
            icon: 'heart-icon',
          },
          {
            id: 3,
            header: 'Cherry',
            icon: 'heart-icon',
            disabled: true,
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
          },
          {
            id: 4,
            header: 'Orange',
            description: 'Big orange',
            icon: 'heart-icon',
            someEntityAttribute: 'f63749b4-793d-455b-93f2-1bbda64944d8',
            selected: true,
          },
          {
            id: 5,
            header: 'Banana',
            description: 'Big banana',
            disabled: true,
            icon: 'heart-icon',
            someEntityAttribute: '7deb2588-ea31-4306-9f7b-3edb25b2cd82',
          },
        ]}
      />
    </div>
  )
}

Selection mode

() => {
  return (
    <div style={{ width: 290 }}>
      <List
        options={[
          {
            id: 0,
            header: 'Coconut',
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
          },
          {
            id: 1,
            header:
              'An apple is an edible fruit produced by an apple tree (Malus domestica)',
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
          },
          {
            id: 2,
            header: 'Apple',
            description:
              'An apple is an edible fruit produced by an apple tree (Malus domestica)',
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
          },
          {
            id: 3,
            header: 'Cherry',
            disabled: true,
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
          },
          {
            id: 4,
            header: 'Orange',
            description: 'Big orange',
            someEntityAttribute: 'f63749b4-793d-455b-93f2-1bbda64944d8',
          },
          {
            id: 5,
            header: 'Banana',
            description: 'Big banana',
            disabled: true,
            someEntityAttribute: '7deb2588-ea31-4306-9f7b-3edb25b2cd82',
          },
        ]}
        selectionMode
        onSelectItem={(...args) => console.log('onSelectItem', args)}
        onSelectedItemsChanged={selected =>
          console.log('onSelectedItemsChanged', selected)
        }
        defaultSelected={[
          {
            id: 0,
            header: 'Coconut',
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
          },
        ]}
      />
    </div>
  )
}

() => {
  return (
    <div style={{ width: 290 }}>
      <List
        options={[
          {
            id: 0,
            header: 'Coconut',
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
          },
          {
            id: 1,
            header:
              'An apple is an edible fruit produced by an apple tree (Malus domestica)',
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
          },
          {
            id: 2,
            header: 'Apple',
            description:
              'An apple is an edible fruit produced by an apple tree (Malus domestica)',
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
          },
          {
            id: 3,
            header: 'Cherry',
            disabled: true,
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
          },
          {
            id: 4,
            header: 'Orange',
            description: 'Big orange',
            someEntityAttribute: 'f63749b4-793d-455b-93f2-1bbda64944d8',
          },
          {
            id: 5,
            header: 'Banana',
            description: 'Big banana',
            disabled: true,
            someEntityAttribute: '7deb2588-ea31-4306-9f7b-3edb25b2cd82',
          },
        ]}
        selectionMode
        onSelectItem={(...args) => console.log('onSelectItem', args)}
        onSelectedItemsChanged={selected =>
          console.log('onSelectedItemsChanged', selected)
        }
        defaultSelected={[
          {
            id: 0,
            header: 'Coconut',
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
          },
        ]}
      />
    </div>
  )
}

Selection mode with selectedOptions prop

() => {
  const [selectedOptions, setSelected] = React.useState([])
  return (
    <div style={{ width: 290 }}>
      <button type="button" onClick={() => setSelected([])}>
        reset selected
      </button>
      <List
        options={[
          {
            id: 0,
            header: 'Coconut',
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
          },
          {
            id: 1,
            header:
              'An apple is an edible fruit produced by an apple tree (Malus domestica)',
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
          },
          {
            id: 2,
            header: 'Apple',
            description:
              'An apple is an edible fruit produced by an apple tree (Malus domestica)',
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
          },
          {
            id: 3,
            header: 'Cherry',
            disabled: true,
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
          },
          {
            id: 4,
            header: 'Orange',
            description: 'Big orange',
            someEntityAttribute: 'f63749b4-793d-455b-93f2-1bbda64944d8',
          },
          {
            id: 5,
            header: 'Banana',
            description: 'Big banana',
            disabled: true,
            someEntityAttribute: '7deb2588-ea31-4306-9f7b-3edb25b2cd82',
          },
        ]}
        selectionMode
        onSelectItem={(...args) => console.log('onSelectItem', args)}
        onSelectedItemsChanged={selected => {
          console.log('onSelectedItemsChanged', selected)
          setSelected(selected)
        }}
        selectedOptions={selectedOptions}
      />
    </div>
  )
}

() => {
  const [selectedOptions, setSelected] = React.useState([])
  return (
    <div style={{ width: 290 }}>
      <button type="button" onClick={() => setSelected([])}>
        reset selected
      </button>
      <List
        options={[
          {
            id: 0,
            header: 'Coconut',
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
          },
          {
            id: 1,
            header:
              'An apple is an edible fruit produced by an apple tree (Malus domestica)',
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
          },
          {
            id: 2,
            header: 'Apple',
            description:
              'An apple is an edible fruit produced by an apple tree (Malus domestica)',
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
          },
          {
            id: 3,
            header: 'Cherry',
            disabled: true,
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
          },
          {
            id: 4,
            header: 'Orange',
            description: 'Big orange',
            someEntityAttribute: 'f63749b4-793d-455b-93f2-1bbda64944d8',
          },
          {
            id: 5,
            header: 'Banana',
            description: 'Big banana',
            disabled: true,
            someEntityAttribute: '7deb2588-ea31-4306-9f7b-3edb25b2cd82',
          },
        ]}
        selectionMode
        onSelectItem={(...args) => console.log('onSelectItem', args)}
        onSelectedItemsChanged={selected => {
          console.log('onSelectedItemsChanged', selected)
          setSelected(selected)
        }}
        selectedOptions={selectedOptions}
      />
    </div>
  )
}

Searchable

Base usage

() => {
  return (
    <div style={{ width: 290 }}>
      <SearchableList
        options={[
          {
            id: 0,
            header: 'Coconut',
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
          },
          {
            id: 1,
            header:
              'An apple is an edible fruit produced by an apple tree (Malus domestica)',
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
          },
          {
            id: 2,
            header: 'Apple',
            description:
              'An apple is an edible fruit produced by an apple tree (Malus domestica)',
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
          },
          {
            id: 3,
            header: 'Cherry',
            disabled: true,
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
          },
          {
            id: 4,
            header: 'Orange',
            description: 'Big orange',
            someEntityAttribute: 'f63749b4-793d-455b-93f2-1bbda64944d8',
          },
          {
            id: 5,
            header: 'Banana',
            description: 'Big banana',
            disabled: true,
            someEntityAttribute: '7deb2588-ea31-4306-9f7b-3edb25b2cd82',
          },
        ]}
        onFoundItems={foundItems => console.log('onFoundItems', foundItems)}
        selectionMode
        onSelectItem={(...args) => console.log('onSelectItem', args)}
        onSelectedItemsChanged={selected =>
          console.log('onSelectedItemsChanged', selected)
        }
        onChangeSearchValue={searchValue =>
          console.log('onChangeSearchValue', searchValue)
        }
        defaultSelected={[
          {
            id: 0,
            header: 'Coconut',
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
          },
        ]}
      />
    </div>
  )
}

() => {
  return (
    <div style={{ width: 290 }}>
      <SearchableList
        options={[
          {
            id: 0,
            header: 'Coconut',
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
          },
          {
            id: 1,
            header:
              'An apple is an edible fruit produced by an apple tree (Malus domestica)',
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
          },
          {
            id: 2,
            header: 'Apple',
            description:
              'An apple is an edible fruit produced by an apple tree (Malus domestica)',
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
          },
          {
            id: 3,
            header: 'Cherry',
            disabled: true,
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
          },
          {
            id: 4,
            header: 'Orange',
            description: 'Big orange',
            someEntityAttribute: 'f63749b4-793d-455b-93f2-1bbda64944d8',
          },
          {
            id: 5,
            header: 'Banana',
            description: 'Big banana',
            disabled: true,
            someEntityAttribute: '7deb2588-ea31-4306-9f7b-3edb25b2cd82',
          },
        ]}
        onFoundItems={foundItems => console.log('onFoundItems', foundItems)}
        selectionMode
        onSelectItem={(...args) => console.log('onSelectItem', args)}
        onSelectedItemsChanged={selected =>
          console.log('onSelectedItemsChanged', selected)
        }
        onChangeSearchValue={searchValue =>
          console.log('onChangeSearchValue', searchValue)
        }
        defaultSelected={[
          {
            id: 0,
            header: 'Coconut',
            someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
          },
        ]}
      />
    </div>
  )
}

Custom search

() => {
  const [searchValue, changeSearchValue] = React.useState('Banana')
  const customIsValueMatch = React.useCallback(
    (item, currentSearchValue) => {
      const value = get(item, 'header', '')
      if (currentSearchValue) {
        return value.toLowerCase().includes(searchValue.trim().toLowerCase())
      }
      return true
    },
    [searchValue],
  )
  const debouncedGetSearchValue = useDebounce(searchValue, 2000)
  const options = React.useMemo(() => {
    return [
      {
        id: 0,
        header: 'Coconut',
        someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
      },
      {
        id: 1,
        header:
          'An apple is an edible fruit produced by an apple tree (Malus domestica)',
        someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
      },
      {
        id: 2,
        header: 'Apple',
        description:
          'An apple is an edible fruit produced by an apple tree (Malus domestica)',
        someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
      },
      {
        id: 3,
        header: 'Cherry',
        disabled: true,
        someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
      },
      {
        id: 4,
        header: 'Orange',
        description: 'Big orange',
        someEntityAttribute: 'f63749b4-793d-455b-93f2-1bbda64944d8',
      },
      {
        id: 5,
        header: 'Banana',
        description: 'Big banana',
        disabled: true,
        someEntityAttribute: '7deb2588-ea31-4306-9f7b-3edb25b2cd82',
      },
    ]
  }, [])
  const defaultSelected = React.useMemo(() => {
    return [
      {
        id: 0,
        header: 'Coconut',
        someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
      },
    ]
  }, [])
  const onFoundItems = React.useCallback(foundItems => {
    console.log('onFoundItems', foundItems)
  }, [])
  const onSelectItem = React.useCallback((...args) => {
    console.log('onSelectItem', args)
  }, [])
  const onSelectedItemsChanged = React.useCallback(selected => {
    console.log('onSelectedItemsChanged', selected)
  }, [])
  const onChangeSearchValue = React.useCallback(
    value => changeSearchValue(value),
    [changeSearchValue],
  )
  return (
    <div style={{ width: 290 }}>
      <SearchableList
        options={options}
        selectionMode
        defaultSelected={defaultSelected}
        searchValue={debouncedGetSearchValue}
        isValueMatch={customIsValueMatch}
        onFoundItems={onFoundItems}
        onSelectItem={onSelectItem}
        onSelectedItemsChanged={onSelectedItemsChanged}
        onChangeSearchValue={onChangeSearchValue}
        input={
          <SearchableList.Input
            icon="play-icon"
            placeholder="Введите значение"
          />
        }
        notFound={
          <SearchableList.NotFound>Не найдено!</SearchableList.NotFound>
        }
      />
    </div>
  )
}

() => {
  const [searchValue, changeSearchValue] = React.useState('Banana')
  const customIsValueMatch = React.useCallback(
    (item, currentSearchValue) => {
      const value = get(item, 'header', '')
      if (currentSearchValue) {
        return value.toLowerCase().includes(searchValue.trim().toLowerCase())
      }
      return true
    },
    [searchValue],
  )
  const debouncedGetSearchValue = useDebounce(searchValue, 2000)
  const options = React.useMemo(() => {
    return [
      {
        id: 0,
        header: 'Coconut',
        someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
      },
      {
        id: 1,
        header:
          'An apple is an edible fruit produced by an apple tree (Malus domestica)',
        someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
      },
      {
        id: 2,
        header: 'Apple',
        description:
          'An apple is an edible fruit produced by an apple tree (Malus domestica)',
        someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
      },
      {
        id: 3,
        header: 'Cherry',
        disabled: true,
        someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
      },
      {
        id: 4,
        header: 'Orange',
        description: 'Big orange',
        someEntityAttribute: 'f63749b4-793d-455b-93f2-1bbda64944d8',
      },
      {
        id: 5,
        header: 'Banana',
        description: 'Big banana',
        disabled: true,
        someEntityAttribute: '7deb2588-ea31-4306-9f7b-3edb25b2cd82',
      },
    ]
  }, [])
  const defaultSelected = React.useMemo(() => {
    return [
      {
        id: 0,
        header: 'Coconut',
        someEntityAttribute: '69cc19fc-28bc-4b44-be98-7d053447aa95',
      },
    ]
  }, [])
  const onFoundItems = React.useCallback(foundItems => {
    console.log('onFoundItems', foundItems)
  }, [])
  const onSelectItem = React.useCallback((...args) => {
    console.log('onSelectItem', args)
  }, [])
  const onSelectedItemsChanged = React.useCallback(selected => {
    console.log('onSelectedItemsChanged', selected)
  }, [])
  const onChangeSearchValue = React.useCallback(
    value => changeSearchValue(value),
    [changeSearchValue],
  )
  return (
    <div style={{ width: 290 }}>
      <SearchableList
        options={options}
        selectionMode
        defaultSelected={defaultSelected}
        searchValue={debouncedGetSearchValue}
        isValueMatch={customIsValueMatch}
        onFoundItems={onFoundItems}
        onSelectItem={onSelectItem}
        onSelectedItemsChanged={onSelectedItemsChanged}
        onChangeSearchValue={onChangeSearchValue}
        input={
          <SearchableList.Input
            icon="play-icon"
            placeholder="Введите значение"
          />
        }
        notFound={
          <SearchableList.NotFound>Не найдено!</SearchableList.NotFound>
        }
      />
    </div>
  )
}

List

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Base usage

With icon

Selection mode

Selection mode with selectedOptions prop

Searchable

Base usage

Custom search

Base usage