@snack-uikit/list

List

Installation

npm i @snack-uikit/list

Changelog

kindFlattenItems

Props

name	type	default value	description
items*	Item[]	-
prefix	ItemId	-
parentId	ItemId	-

isAccordionItem

Props

name	type	default value	description

isBaseItem

Props

name	type	default value	description

isGroupItem

Props

name	type	default value	description

isNextListItem

Props

name	type	default value	description

isGroupSelectItem

Props

name	type	default value	description

useGroupItemSelection

Props

name	type	default value	description
id*	ItemId	-
items*	ItemId[]	-
allChildIds*	ItemId[]	-
disabled	boolean	-

isSelectionSingleProps

Props

name	type	default value	description

isSelectionMultipleProps

Props

name	type	default value	description

Droplist

Props

name	type	default value	description
items*	Item[]	-	Основные элементы списка
children*	ReactNode | ({onKeyDown}) => ReactNode * Рендер функция принимает аргументы onKeyDown - хендлер ввода, для поддержки управления с клавиатуры	-	Триггер для дроплиста
triggerElemRef	RefObject<HTMLElement>	-	Ссылка на элемент-триггер для дроплиста
listRef	RefObject<HTMLElement>	-	Ссылка на элемент выпадающего списка
closeDroplistOnItemClick	boolean	-	Закрывать выпадающий список после клика на базовый айтем. Работает в режимах selection: 'none' | 'single'
triggerClassName	string	-	CSS-класс триггера
open	boolean	-	Управляет состоянием показан/не показан.
onOpenChange	(isOpen: boolean) => void	-	Колбек отображения компонента. Срабатывает при изменении состояния open.
widthStrategy	enum PopoverWidthStrategy: "auto", "gte", "eq"	auto	Стратегия управления шириной контейнера поповера - auto - соответствует ширине контента, - gte - Great Than or Equal, равен ширине таргета или больше ее, если контент в поповере шире, - eq - Equal, строго равен ширине таргета.
trigger	enum Trigger: "click", "hover", "focusVisible", "focus", "hoverAndFocusVisible", "hoverAndFocus", "clickAndFocusVisible"	-	Условие отображения поповера: - click - открывать по клику - hover - открывать по ховеру - focusVisible - открывать по focus-visible - focus - открывать по фокусу - hoverAndFocusVisible - открывать по ховеру и focus-visible - hoverAndFocus - открывать по ховеру и фокусу - clickAndFocusVisible - открывать по клику и focus-visible
placement	enum Placement: "left", "left-start", "left-end", "right", "right-start", "right-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end"	top	Положение поповера относительно своего триггера (children).
className	string	-	CSS-класс
pinTop	Item[]	-	Элементы списка, закрепленные сверху
pinBottom	Item[]	-	Элементы списка, закрепленные снизу
footer	ReactNode ;	-	Кастомизируемый элемент в конце списка
footerActiveElementsRefs	RefObject<HTMLElement>[]	-	Список ссылок на кастомные элементы, помещенные в специальную секцию внизу списка
search	SearchState	-	Настройки поисковой строки
collapse	CollapseState	{}	Настройки раскрытия элементов
loading	boolean	-	Флаг, отвещающий за состояние загрузки списка
scrollToSelectedItem	boolean	-	Флаг, отвещающий за прокручивание до выбранного элемента
scrollContainerClassName	string	-	CSS-класс для scroll обертки основного списка айтемов
selection	SelectionSingleState | SelectionMultipleState	-
size	"s" | "m" | "l"	s	Размер списка
marker	boolean	true	Отображать ли маркер у выбранного жлемента списка
contentRender	(props: ContentRenderProps) => ReactNode	-	Рендер функция основного контента айтема
scroll	boolean	-	Включить ли скролл для основной части списка
scrollRef	RefObject<HTMLElement>	-	Ссылка на элемент, обозначающий самый конец прокручиваемого списка
scrollContainerRef	RefObject<HTMLElement>	-	Ссылка на контейнер, который скроллится
untouchableScrollbars	boolean	-	Отключает возможность взаимодействовать со скролбарами мышью.
onScroll	(event?: Event) => void	-	Колбек на скролл прокручиваемого списка
dataFiltered	boolean	-
dataError	boolean	-
noDataState	EmptyStateProps	-	Экран при отстутствии данных
noResultsState	EmptyStateProps	-	Экран при отстутствии результатов поиска или фильтров
errorDataState	EmptyStateProps	-	Экран при ошибке запроса

List

Props

name	type	default value	description
items*	Item[]	-	Основные элементы списка
pinTop	Item[]	-	Элементы списка, закрепленные сверху
pinBottom	Item[]	-	Элементы списка, закрепленные снизу
footer	ReactNode ;	-	Кастомизируемый элемент в конце списка
footerActiveElementsRefs	RefObject<HTMLElement>[]	-	Список ссылок на кастомные элементы, помещенные в специальную секцию внизу списка
keyboardNavigationRef	RefObject<{ focusItem(id: ItemId): void; }>	-	Ссылка на управление навигацией листа с клавиатуры
search	SearchState	-	Настройки поисковой строки
tabIndex	number	-	Tab Index
collapse	CollapseState	{}	Настройки раскрытия элементов
className	string	-	CSS-класс
loading	boolean	-	Флаг, отвещающий за состояние загрузки списка
onKeyDown	(e: KeyboardEvent<HTMLElement>) => void	-	Обработчик события по нажатию клавиш
hasListInFocusChain	boolean	true	Флаг, отвещающий за включение самого родительского контейнера листа в цепочку фокусирующихся элементов
scrollToSelectedItem	boolean	-	Флаг, отвещающий за прокручивание до выбранного элемента
scrollContainerClassName	string	-	CSS-класс для scroll обертки основного списка айтемов
selection	SelectionSingleState | SelectionMultipleState	-
size	"s" | "m" | "l"	s	Размер списка
marker	boolean	true	Отображать ли маркер у выбранного жлемента списка
contentRender	(props: ContentRenderProps) => ReactNode	-	Рендер функция основного контента айтема
scroll	boolean	-	Включить ли скролл для основной части списка
scrollRef	RefObject<HTMLElement>	-	Ссылка на элемент, обозначающий самый конец прокручиваемого списка
scrollContainerRef	RefObject<HTMLElement>	-	Ссылка на контейнер, который скроллится
untouchableScrollbars	boolean	-	Отключает возможность взаимодействовать со скролбарами мышью.
onScroll	(event?: Event) => void	-	Колбек на скролл прокручиваемого списка
dataFiltered	boolean	-
dataError	boolean	-
noDataState	EmptyStateProps	-	Экран при отстутствии данных
noResultsState	EmptyStateProps	-	Экран при отстутствии результатов поиска или фильтров
errorDataState	EmptyStateProps	-	Экран при ошибке запроса
ref	LegacyRef<HTMLElement>	-	Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}
key	Key	-

ItemContent

Props

name	type	default value	description
option*	string | number	-
caption	string	-
description	string	-
truncate	TruncateProps	-
disabled	boolean	-
className	string	-	CSS-класс

getFooterItemId

helper

Возвращает id для элемента футера

getItemAutoId

helper

Возвращает id для элемента, подставляя перфикс

getDefaultItemId

helper

Возвращает id для дефолтного элемента