@snack-uikit/chips

Chips

Installation

npm i @snack-uikit/chips

Changelog

TODO

• droplist и выбор значений в FilterChip

Example

import { ChipAssist, ChipChoice, ChipToggle } from '@snack-uikit/chips';
import { PlaceholderSVG } from '@snack-uikit/icons';

<ChipAssist
  label='Label'
  icon={<PlaceholderSVG />}
  size='s'
  disabled={false}
  loading={false}
  onClick={doSomething}
  className='className'
  tabIndex={1}
/>

<ChipToggle
  label='Label'
  icon={<PlaceholderSVG />}
  size='s'
  selected={false}
  disabled={false}
  loading={false}
  onChange={handleChange}
  className='className'
  tabIndex={1}
/>

<ChipChoice.Single
  label='Label'
  value='value'
  icon={<PlaceholderSVG />}
  size='s'
  disabled={false}
  loading={false}
  options={[]}
  onClick={doSomething}
/>

<ChipChoice.Multi
  label='Label'
  value={['value1', 'value2']}
  onChangeValue={onChange}
  size='m'
  options={[]}
  valueFormatter={formatter}
/>

<ChipChoice.Date
  label='Label'
  value={new Date()}
  onChangeValue={onChange}
  size='m'
  valueFormatter={formatter}
/>

<ChipChoice.DateRange
  label='Label'
  value={[new Date(), new Date()]}
  onChangeValue={onChange}
  size='m'
  valueFormatter={formatter}
/>

<ChipChoice.Custom
  label='Label'
  value='value'
  valueToRender='Selected'
  size='m'
/>

ChipAssist

Чип с лейблом

Props

name	type	default value	description
onClick*	MouseEventHandler<HTMLButtonElement>	-	Колбек обработки клика
label*	string	-	Лейбл
disabled	boolean	-	Деактивирован ли компонент
loading	boolean	-	Состояние загрузки
icon	ReactElement<any, string | JSXElementConstructor<any>>	-	Иконка
className	string	-	CSS-класс
tabIndex	number	-	HTML tab index
truncateVariant	"end" | "middle"	middle	Вариант обрезания лейбла
size	enum Size: "xs", "s", "m", "l"	s	Размер

ChipToggle

Чип с состоянием выбран/не выбран

Props

name	type	default value	description
onChange*	(checked: boolean, e: ChangeEvent<HTMLInputElement>) => void	-	Колбек смены значения
checked*	boolean	-	Отмечен ли компонент
label*	string	-	Лейбл
disabled	boolean	-	Деактивирован ли компонент
loading	boolean	-	Состояние загрузки
icon	ReactElement<any, string | JSXElementConstructor<any>>	-	Иконка
className	string	-	CSS-класс
tabIndex	number	-	HTML tab index
truncateVariant	"end" | "middle"	middle	Вариант обрезания лейбла
size	enum Size: "xs", "s", "m", "l"	s	Размер

ChipChoice.Custom

Props

name	type	default value	description
label	string	-	Лейбл
disabled	boolean	-	Деактивирован ли компонент
loading	boolean	-	Состояние загрузки
icon	ReactElement<any, string | JSXElementConstructor<any>>	-	Иконка
className	string	-	CSS-класс
tabIndex	number	-	HTML tab index
truncateVariant	"end" | "middle"	-	Вариант обрезания лейбла Вариант обрезания значения
size	enum Size: "xs", "s", "m", "l"	-	Размер
onClick	MouseEventHandler<HTMLButtonElement | HTMLDivElement>	-	Колбек обработки клика
disableFuzzySearch	boolean	false	Отключает Fuzzy Search. Иногда в дроплисте могут быть различные айдишники - нам важно искать их без Fuzzy Search
onClearButtonClick	MouseEventHandler<HTMLButtonElement>	-	Колбек для клика по кнопке очистки
placement	enum Placement: "left", "left-start", "left-end", "right", "right-start", "right-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end"	-	Расположение выпадающего меню
widthStrategy	enum PopoverWidthStrategy: "auto", "gte", "eq"	gte	Стратегия управления шириной контейнера поповера - auto - соответствует ширине контента, - gte - Great Than or Equal, равен ширине таргета или больше ее, если контент в поповере шире, - eq - Equal, строго равен ширине таргета.
dropDownClassName	string	-
open	boolean	-	Управляет состоянием показан/не показан.
onOpenChange	(isOpen: boolean) => void	-	Колбек отображения компонента. Срабатывает при изменении состояния open.
valueRender	(value: any) => ReactNode	-	Отображаемое значение
value	any	-	Фактическое значение. Используется для отображения кнопки очистки, если свойство showClearButton=true
onChange	(value: any) => void	-
content	(props: CustomContentRenderProps<any>) => ReactNode	-	Контент выпадающего меню Принимает ReactNode Или функцию с аргументами: handleDroplistItemKeyDown: Обработчик нажатия клавиши на элемент выпадающего меню closeDroplist: Метод для закрытия выпадающего меню

ChipChoice.Single

Props

name	type	default value	description
options*	FilterOption<T>[]	-	Массив опций
label	string	-	Лейбл
disabled	boolean	-	Деактивирован ли компонент
loading	boolean	-	Состояние загрузки Флаг, отвещающий за состояние загрузки списка
icon	ReactElement<any, string | JSXElementConstructor<any>>	-	Иконка
className	string	-	CSS-класс
tabIndex	number	-	HTML tab index
truncateVariant	"end" | "middle"	-	Вариант обрезания лейбла Вариант обрезания значения
size	enum Size: "xs", "s", "m", "l"	-	Размер
onClick	MouseEventHandler<HTMLButtonElement | HTMLDivElement>	-	Колбек обработки клика
disableFuzzySearch	boolean	false	Отключает Fuzzy Search. Иногда в дроплисте могут быть различные айдишники - нам важно искать их без Fuzzy Search
onClearButtonClick	MouseEventHandler<HTMLButtonElement>	-	Колбек для клика по кнопке очистки
placement	enum Placement: "left", "left-start", "left-end", "right", "right-start", "right-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end"	-	Расположение выпадающего меню
widthStrategy	enum PopoverWidthStrategy: "auto", "gte", "eq"	gte	Стратегия управления шириной контейнера поповера - auto - соответствует ширине контента, - gte - Great Than or Equal, равен ширине таргета или больше ее, если контент в поповере шире, - eq - Equal, строго равен ширине таргета.
dropDownClassName	string	-
open	boolean	-	Управляет состоянием показан/не показан.
onOpenChange	(isOpen: boolean) => void	-	Колбек отображения компонента. Срабатывает при изменении состояния open.
contentRender	(option: { label: ItemId; value?: ItemId; contentRenderProps?: T; }) => ReactNode	-
filterFn	(option: { label: ItemId; value?: ItemId; contentRenderProps?: T; }) => boolean	-
searchable	boolean	-
autoApply	boolean	-	Флаг, отвечающий за применение выбранного значения по умолчанию
onApprove	() => void	-	Колбек основной кнопки
onCancel	() => void	-	Колбек кнопки отмены
footer	ReactNode ;	-	Кастомизируемый элемент в конце списка
footerActiveElementsRefs	RefObject<HTMLElement>[]	-	Список ссылок на кастомные элементы, помещенные в специальную секцию внизу списка
scrollToSelectedItem	boolean	-	Флаг, отвещающий за прокручивание до выбранного элемента
virtualized	boolean	-	Включить виртуализацию на компоненты списка. Рекомендуется если у вас от 1к элементов списка
selection	SelectionSingleState | SelectionMultipleState	-
scrollRef	RefObject<HTMLElement>	-	Ссылка на элемент, обозначающий самый конец прокручиваемого списка
scrollContainerRef	RefObject<HTMLElement>	-	Ссылка на контейнер, который скроллится
dataFiltered	boolean	-
dataError	boolean	-
noDataState	EmptyStateProps	-	Экран при отстутствии данных
noResultsState	EmptyStateProps	-	Экран при отстутствии результатов поиска или фильтров
errorDataState	EmptyStateProps	-	Экран при ошибке запроса
onChange	OnChangeHandler<any>	-	Controlled обработчик измения состояния
value	ItemId	-	Controlled состояние
defaultValue	ItemId	-	Начальное состояние
valueRender	(option?: BaseOption<T>) => ReactNode	-	Колбек формирующий отображение выбранного значения. Принимает выбранное значение. По умолчанию для отображения используется FilterOption.label

ChipChoice.Multiple

Props

name	type	default value	description
options*	FilterOption<T>[]	-	Массив опций
label	string	-	Лейбл
disabled	boolean	-	Деактивирован ли компонент
loading	boolean	-	Состояние загрузки Флаг, отвещающий за состояние загрузки списка
icon	ReactElement<any, string | JSXElementConstructor<any>>	-	Иконка
className	string	-	CSS-класс
tabIndex	number	-	HTML tab index
truncateVariant	"end" | "middle"	-	Вариант обрезания лейбла Вариант обрезания значения
size	enum Size: "xs", "s", "m", "l"	-	Размер
onClick	MouseEventHandler<HTMLButtonElement | HTMLDivElement>	-	Колбек обработки клика
disableFuzzySearch	boolean	false	Отключает Fuzzy Search. Иногда в дроплисте могут быть различные айдишники - нам важно искать их без Fuzzy Search
onClearButtonClick	MouseEventHandler<HTMLButtonElement>	-	Колбек для клика по кнопке очистки
placement	enum Placement: "left", "left-start", "left-end", "right", "right-start", "right-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end"	-	Расположение выпадающего меню
widthStrategy	enum PopoverWidthStrategy: "auto", "gte", "eq"	gte	Стратегия управления шириной контейнера поповера - auto - соответствует ширине контента, - gte - Great Than or Equal, равен ширине таргета или больше ее, если контент в поповере шире, - eq - Equal, строго равен ширине таргета.
dropDownClassName	string	-
open	boolean	-	Управляет состоянием показан/не показан.
onOpenChange	(isOpen: boolean) => void	-	Колбек отображения компонента. Срабатывает при изменении состояния open.
contentRender	(option: { label: ItemId; value?: ItemId; contentRenderProps?: T; }) => ReactNode	-
filterFn	(option: { label: ItemId; value?: ItemId; contentRenderProps?: T; }) => boolean	-
searchable	boolean	-
autoApply	boolean	-	Флаг, отвечающий за применение выбранного значения по умолчанию
onApprove	() => void	-	Колбек основной кнопки
onCancel	() => void	-	Колбек кнопки отмены
footer	ReactNode ;	-	Кастомизируемый элемент в конце списка
footerActiveElementsRefs	RefObject<HTMLElement>[]	-	Список ссылок на кастомные элементы, помещенные в специальную секцию внизу списка
scrollToSelectedItem	boolean	-	Флаг, отвещающий за прокручивание до выбранного элемента
virtualized	boolean	-	Включить виртуализацию на компоненты списка. Рекомендуется если у вас от 1к элементов списка
selection	SelectionSingleState | SelectionMultipleState	-
scrollRef	RefObject<HTMLElement>	-	Ссылка на элемент, обозначающий самый конец прокручиваемого списка
scrollContainerRef	RefObject<HTMLElement>	-	Ссылка на контейнер, который скроллится
dataFiltered	boolean	-
dataError	boolean	-
noDataState	EmptyStateProps	-	Экран при отстутствии данных
noResultsState	EmptyStateProps	-	Экран при отстутствии результатов поиска или фильтров
errorDataState	EmptyStateProps	-	Экран при ошибке запроса
onChange	OnChangeHandler<any>	-	Controlled обработчик измения состояния
value	ItemId[]	-	Controlled состояние
defaultValue	ItemId[]	-	Начальное состояние
valueRender	(option?: BaseOption<T>[]) => ReactNode	-	Колбек формирующий отображение выбранного значения. Принимает выбранное значение. По умолчанию для отображения используется FilterOption.label

ChipChoice.Date

Props

name	type	default value	description
label	string	-	Лейбл
disabled	boolean	-	Деактивирован ли компонент
loading	boolean	-	Состояние загрузки
icon	ReactElement<any, string | JSXElementConstructor<any>>	-	Иконка
className	string	-	CSS-класс
tabIndex	number	-	HTML tab index
truncateVariant	"end" | "middle"	-	Вариант обрезания лейбла Вариант обрезания значения
size	enum Size: "xs", "s", "m", "l"	-	Размер
onClick	MouseEventHandler<HTMLButtonElement | HTMLDivElement>	-	Колбек обработки клика
disableFuzzySearch	boolean	false	Отключает Fuzzy Search. Иногда в дроплисте могут быть различные айдишники - нам важно искать их без Fuzzy Search
onClearButtonClick	MouseEventHandler<HTMLButtonElement>	-	Колбек для клика по кнопке очистки
placement	enum Placement: "left", "left-start", "left-end", "right", "right-start", "right-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end"	-	Расположение выпадающего меню
widthStrategy	enum PopoverWidthStrategy: "auto", "gte", "eq"	gte	Стратегия управления шириной контейнера поповера - auto - соответствует ширине контента, - gte - Great Than or Equal, равен ширине таргета или больше ее, если контент в поповере шире, - eq - Equal, строго равен ширине таргета.
dropDownClassName	string	-
open	boolean	-	Управляет состоянием показан/не показан.
onOpenChange	(isOpen: boolean) => void	-	Колбек отображения компонента. Срабатывает при изменении состояния open.
value	Date	-	Значение компонента
defaultValue	Date	-	Значение компонента по-умолчанию
onChange	(value: Date) => void	-	Колбек смены значения
valueRender	(value?: Date) => ReactNode	-	Колбек формирующий строковое представление выбранного значения. Принимает выбранное значение
mode	"date" | "month" | "date-time" | "year"	-
buildCalendarCellProps	BuildCellPropsFunction	-	Колбек свойств для управления ячейками календаря
showSeconds	boolean	-

ChipChoice.DateRange

Props

name	type	default value	description
label	string	-	Лейбл
disabled	boolean	-	Деактивирован ли компонент
loading	boolean	-	Состояние загрузки
icon	ReactElement<any, string | JSXElementConstructor<any>>	-	Иконка
className	string	-	CSS-класс
tabIndex	number	-	HTML tab index
truncateVariant	"end" | "middle"	-	Вариант обрезания лейбла Вариант обрезания значения
size	enum Size: "xs", "s", "m", "l"	-	Размер
onClick	MouseEventHandler<HTMLButtonElement | HTMLDivElement>	-	Колбек обработки клика
disableFuzzySearch	boolean	false	Отключает Fuzzy Search. Иногда в дроплисте могут быть различные айдишники - нам важно искать их без Fuzzy Search
onClearButtonClick	MouseEventHandler<HTMLButtonElement>	-	Колбек для клика по кнопке очистки
placement	enum Placement: "left", "left-start", "left-end", "right", "right-start", "right-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end"	-	Расположение выпадающего меню
widthStrategy	enum PopoverWidthStrategy: "auto", "gte", "eq"	gte	Стратегия управления шириной контейнера поповера - auto - соответствует ширине контента, - gte - Great Than or Equal, равен ширине таргета или больше ее, если контент в поповере шире, - eq - Equal, строго равен ширине таргета.
dropDownClassName	string	-
open	boolean	-	Управляет состоянием показан/не показан.
onOpenChange	(isOpen: boolean) => void	-	Колбек отображения компонента. Срабатывает при изменении состояния open.
value	Range	-	Значение компонента
defaultValue	Range	-	Значение компонента по умолчанию
onChange	(value: Range) => void	-	Колбек смены значения
valueRender	(value?: Range) => ReactNode	-	Колбек формирующий строковое представление выбранного значения. Принимает массив выбранных значений
buildCalendarCellProps	BuildCellPropsFunction	-	Колбек свойств для управления ячейками календаря

ChipChoice.Time

Props

name	type	default value	description
label	string	-	Лейбл
disabled	boolean	-	Деактивирован ли компонент
loading	boolean	-	Состояние загрузки
icon	ReactElement<any, string | JSXElementConstructor<any>>	-	Иконка
className	string	-	CSS-класс
tabIndex	number	-	HTML tab index
truncateVariant	"end" | "middle"	-	Вариант обрезания лейбла Вариант обрезания значения
size	enum Size: "xs", "s", "m", "l"	-	Размер
onClick	MouseEventHandler<HTMLButtonElement | HTMLDivElement>	-	Колбек обработки клика
disableFuzzySearch	boolean	false	Отключает Fuzzy Search. Иногда в дроплисте могут быть различные айдишники - нам важно искать их без Fuzzy Search
onClearButtonClick	MouseEventHandler<HTMLButtonElement>	-	Колбек для клика по кнопке очистки
placement	enum Placement: "left", "left-start", "left-end", "right", "right-start", "right-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end"	-	Расположение выпадающего меню
open	boolean	-	Управляет состоянием показан/не показан.
onOpenChange	(isOpen: boolean) => void	-	Колбек отображения компонента. Срабатывает при изменении состояния open.
dropDownClassName	string	-
value	TimeValue	-	Выбранное значение.
defaultValue	TimeValue	-	Значение по-умолчанию для uncontrolled.
showSeconds	boolean	-	Показывать ли секунды
onChange	(value: TimeValue) => void	-	Колбек смены значения
valueRender	(value?: TimeValue) => ReactNode	-	Колбек формирующий строковое представление выбранного значения. Принимает выбранное значение

isAccordionOption

Props

name	type	default value	description

isBaseOption

Props

name	type	default value	description

isGroupOption

Props

name	type	default value	description

isGroupSelectOption

Props

name	type	default value	description

isNextListOption

Props

name	type	default value	description

ChipChoiceRow

Props

name	type	default value	description
filters*	ChipChoiceRowFilter[]	-	Массив чипов
value	FiltersState	-	Состояние фильтров
defaultValue	Partial<TState>	-	Начальное состояние фильтров
onChange	(filters: TState) => void	-	Колбек изменения состояния фильтров
size	enum ChipChoiceRowSize: "xs", "s", "m"	s	Размер
className	string	-	CSS-класс
showClearButton	boolean	true	Скрыть/показать кнопку очиски фильтров
showAddButton	boolean	true	Скрыть/показать кнопку добавления фильров
visibleFilters	string[]	-	Состояние для видимых фильтров
onVisibleFiltersChange	(value: string[]) => void	-	Коллбек на изменение видимых фильтров

hasFilterBeenApplied

hasFilterBeenApplied

функция проверки заполненности фильтра