@snack-uikit/list 0.18.0 → 0.18.1-preview-ba12ca94.0

package/dist/esm/components/Items/PinGroupItem/styles.module.css

@@ -0,0 +1,43 @@
+.pinTopItem{
+  display:flex;
+  flex-direction:column;
+  border:none;
+}
+.pinTopItem[data-size=s]{
+  padding-bottom:var(--radius-drop-list-container, 8px);
+  gap:var(--radius-drop-list-container, 8px);
+}
+.pinTopItem[data-size=m]{
+  padding-bottom:var(--radius-drop-list-container, 8px);
+  gap:var(--radius-drop-list-container, 8px);
+}
+.pinTopItem[data-size=l]{
+  padding-bottom:var(--radius-drop-list-container, 8px);
+  gap:var(--radius-drop-list-container, 8px);
+}
+.pinTopItem li,
+.pinTopItem ul{
+  list-style-type:none;
+}
+
+.pinBottomItem{
+  display:flex;
+  flex-direction:column;
+  border:none;
+}
+.pinBottomItem[data-size=s]{
+  padding-top:var(--radius-drop-list-container, 8px);
+  gap:var(--radius-drop-list-container, 8px);
+}
+.pinBottomItem[data-size=m]{
+  padding-top:var(--radius-drop-list-container, 8px);
+  gap:var(--radius-drop-list-container, 8px);
+}
+.pinBottomItem[data-size=l]{
+  padding-top:var(--radius-drop-list-container, 8px);
+  gap:var(--radius-drop-list-container, 8px);
+}
+.pinBottomItem li,
+.pinBottomItem ul{
+  list-style-type:none;
+}

package/dist/esm/components/Items/SearchItem/SearchItem.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+import { SearchState } from '../../../types';
+export type SearchItemProps = {
+    search?: SearchState;
+    itemRef?: RefObject<HTMLElement>;
+};
+export declare function SearchItem({ search, itemRef }: SearchItemProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/esm/components/Items/SearchItem/index.js

@@ -0,0 +1 @@
+export * from './SearchItem';

package/dist/esm/components/Items/SearchItem/styles.module.css

@@ -0,0 +1,11 @@
+.searchItem{
+  width:100%;
+}
+.searchItem:focus-within, .searchItem:focus-visible{
+  outline-width:var(--border-state-focus-s-border-width, 2px);
+  outline-style:var(--border-state-focus-s-border-style, solid);
+  outline-color:var(--border-state-focus-s-border-color, );
+  outline-offset:calc(var(--border-state-focus-s-border-width, 2px) * -1);
+  max-width:100%;
+  outline-color:var(--sys-primary-decor-activated, #c5b2f1);
+}

package/dist/esm/components/Items/hooks.d.ts

@@ -0,0 +1,23 @@
+import { RefObject } from 'react';
+import { Flatten, FlattenBaseItem, ItemId } from './types';
+export declare function useRenderItems(focusCloseChildIds?: ItemId[]): import("react/jsx-runtime").JSX.Element[] | null[];
+type UseCreateBaseItemsProps = {
+    search?: boolean;
+    footerActiveElementsRefs?: RefObject<HTMLElement>[];
+};
+export declare function useCreateBaseItems({ footerActiveElementsRefs }: UseCreateBaseItemsProps): {
+    searchItem: Flatten<FlattenBaseItem, 'itemRef'>;
+    footerItems: Flatten<FlattenBaseItem, 'itemRef'>[];
+};
+type UseGroupItemSelectionProps = {
+    allChildIds: ItemId[];
+    items: ItemId[];
+    id: ItemId;
+    disabled?: boolean;
+};
+export declare function useGroupItemSelection({ id, allChildIds }: UseGroupItemSelectionProps): {
+    checked: boolean | undefined;
+    indeterminate: boolean;
+    handleOnSelect: () => void;
+};
+export {};

package/dist/esm/components/Items/index.js

@@ -0,0 +1,5 @@
+export * from './hooks';
+export * from './types';
+export * from './utils';
+export * from './SearchItem';
+export * from './PinGroupItem';

package/dist/esm/components/Items/styles.module.css

@@ -0,0 +1,87 @@
+.itemWrapper{
+  position:relative;
+  min-width:100%;
+  margin:0;
+  padding:0;
+}
+.itemWrapper::before, .itemWrapper::after{
+  pointer-events:none;
+  content:"";
+  position:absolute;
+  top:0;
+  left:0;
+  width:100%;
+  height:100%;
+  background-color:transparent;
+}
+.itemWrapper[data-disabled], .itemWrapper:disabled{
+  cursor:not-allowed;
+  background-color:transparent;
+  outline:none;
+}
+.itemWrapper[data-disabled]::before, .itemWrapper:disabled::before{
+  display:none;
+}
+.itemWrapper[data-disabled]::after, .itemWrapper:disabled::after{
+  cursor:not-allowed;
+  background-color:transparent;
+}
+.itemWrapper:not([data-inactive], [data-disabled])[data-open]::before, .itemWrapper:not([data-inactive], [data-disabled])[data-focused]::before, .itemWrapper:not([data-inactive], [data-disabled]):focus-visible::before{
+  opacity:var(--opacity-a008, 0.08);
+  background-color:var(--sys-neutral-accent-default, #787b8a);
+}
+@media (hover: hover){
+  .itemWrapper:not([data-inactive], [data-disabled]):hover::before{
+    opacity:var(--opacity-a008, 0.08);
+    background-color:var(--sys-neutral-accent-default, #787b8a);
+  }
+}
+
+.listItem{
+  cursor:pointer;
+  position:relative;
+  display:flex;
+  flex-direction:row;
+  align-items:flex-start;
+  box-sizing:border-box;
+  width:-moz-max-content;
+  width:max-content;
+  min-width:100%;
+  margin:0;
+  padding:0;
+  color:var(--sys-neutral-text-main, #41424e);
+  text-align:start;
+  -webkit-appearance:unset;
+     -moz-appearance:unset;
+          appearance:unset;
+  background-color:transparent;
+  border:none;
+  outline:none;
+}
+.listItem[data-size=s]{
+  padding-top:var(--space-drop-list-item-s-container-vertical-padding, 4px);
+  padding-bottom:var(--space-drop-list-item-s-container-vertical-padding, 4px);
+  padding-left:var(--space-drop-list-item-s-container-horizontal-padding, 8px);
+  padding-right:var(--space-drop-list-item-s-container-horizontal-padding, 8px);
+  gap:var(--space-drop-list-item-s-container-gap, 8px);
+}
+.listItem[data-size=m]{
+  padding-top:var(--space-drop-list-item-m-container-vertical-padding, 8px);
+  padding-bottom:var(--space-drop-list-item-m-container-vertical-padding, 8px);
+  padding-left:var(--space-drop-list-item-m-container-horizontal-padding, 10px);
+  padding-right:var(--space-drop-list-item-m-container-horizontal-padding, 10px);
+  gap:var(--space-drop-list-item-m-container-gap, 8px);
+}
+.listItem[data-size=l]{
+  padding-top:var(--space-drop-list-item-l-container-vertical-padding, 12px);
+  padding-bottom:var(--space-drop-list-item-l-container-vertical-padding, 12px);
+  padding-left:var(--space-drop-list-item-l-container-horizontal-padding, 12px);
+  padding-right:var(--space-drop-list-item-l-container-horizontal-padding, 12px);
+  gap:var(--space-drop-list-item-l-container-gap, 8px);
+}
+.listItem:not([data-inactive], [data-disabled])[data-focused], .listItem:not([data-inactive], [data-disabled]):focus-visible{
+  outline-width:var(--border-state-focus-s-border-width, 2px);
+  outline-style:var(--border-state-focus-s-border-style, solid);
+  outline-color:var(--border-state-focus-s-border-color, );
+  outline-offset:calc(var(--border-state-focus-s-border-width, 2px) * -1);
+}

package/dist/esm/components/Items/types.d.ts

@@ -0,0 +1,118 @@
+import { FocusEvent, KeyboardEvent, MouseEvent, ReactNode, RefObject } from 'react';
+import { TruncateStringProps } from '@snack-uikit/truncate-string';
+import { WithSupportProps } from '@snack-uikit/utils';
+import { ItemContentProps } from '../../helperComponents';
+import { ScrollProps } from '../../types';
+export type AnyType = any;
+export type ItemId = string | number;
+type ItemContent = ItemContentProps;
+export type BaseItem = WithSupportProps<{
+    /**
+     * Слот до основного контента
+     * @type ReactElement
+     */
+    beforeContent?: ReactNode;
+    /**
+     * Слот после основного контента
+     * @type ReactElement
+     */
+    afterContent?: ReactNode;
+    /**
+     * Основной контент айтема
+     */
+    content?: ItemContent | ReactNode;
+    /** Колбек обработки клика */
+    onClick?(e: MouseEvent<HTMLElement>): void;
+    /** Колбек обработки нажатия кнопки мыши */
+    onMouseDown?(e: MouseEvent<HTMLElement>): void;
+    /** Колбек обработки нажатия клавиши */
+    onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
+    /** Колбек обработки фокуса */
+    onFocus?(e: FocusEvent<HTMLElement>): void;
+    /** Колбек обработки блюра */
+    onBlur?(e: FocusEvent<HTMLElement>): void;
+    /** Уникальный идентификатор */
+    id?: ItemId;
+    /** Флаг неактивности элемента */
+    disabled?: boolean;
+    /** Флаг присутствия элемента */
+    hidden?: boolean;
+    itemRef?: RefObject<HTMLElement>;
+    className?: string;
+    /**
+     * Флаг отображения отключения реакции на любое css состояние (hover/focus и тд)
+     * <br>
+     * Так же элемент пропадает из навигации с клавиатуры, и не может быть выбран (selection)
+     */
+    inactive?: boolean;
+    /**
+     * Флаг отображения состояния выбранного элемента через switch
+     */
+    switch?: boolean;
+    itemWrapRender?(item: ReactNode): ReactNode;
+    checked?: boolean;
+}>;
+type BaseItemWithoutNonGroup = Omit<BaseItem, 'switch' | 'inactive'>;
+export type Item = BaseItem | AccordionItem | NextListItem | GroupItem | GroupSelectItem;
+export type AccordionItem = BaseItemWithoutNonGroup & {
+    items: Item[];
+    type: 'collapse';
+};
+export type NextListItem = BaseItemWithoutNonGroup & ScrollProps & {
+    items: Item[];
+    type: 'next-list';
+    onSublistOpenChanged?(open: boolean, id?: ItemId): void;
+    loading?: boolean;
+    dataError?: boolean;
+    dataFiltered?: boolean;
+    placement?: 'right-start' | 'left-start' | 'left' | 'right' | 'left-end' | 'right-end';
+};
+type CommonGroupItem = {
+    label?: string;
+    truncate?: {
+        variant?: TruncateStringProps['variant'];
+    };
+    mode?: 'primary' | 'secondary';
+    hidden?: boolean;
+    divider?: boolean;
+};
+export type GroupItem = CommonGroupItem & {
+    items: Item[];
+    type: 'group';
+};
+export type GroupSelectItem = CommonGroupItem & {
+    items: Item[];
+    type: 'group-select';
+    id?: ItemId;
+    itemRef?: RefObject<HTMLElement>;
+};
+type RequiredFields<T, K extends keyof T> = Required<Pick<T, K>> & Omit<T, K>;
+export type Flatten<T, K extends keyof T> = RequiredFields<T, K>;
+export type CommonFlattenProps = {
+    items: ItemId[];
+    allChildIds: ItemId[];
+};
+export type FlattenBaseItem = Flatten<BaseItem, 'id'>;
+export type FlattenNextListItem = Flatten<Omit<NextListItem, 'items'>, 'id'>;
+export type FlattenGroupListItem = Omit<GroupItem, 'items'> & {
+    id: ItemId;
+};
+export type FlattenGroupSelectListItem = Flatten<Omit<GroupSelectItem, 'items'>, 'id'>;
+export type FlattenAccordionItem = Flatten<Omit<AccordionItem, 'items'>, 'id'>;
+export type FlattenItem = FlattenBaseItem | ((FlattenNextListItem | FlattenGroupListItem | FlattenAccordionItem | FlattenGroupSelectListItem) & CommonFlattenProps);
+export type FocusFlattenItem = {
+    key: ItemId;
+    id: ItemId;
+    originalId: ItemId;
+    parentId?: ItemId;
+    itemRef?: RefObject<HTMLElement>;
+    type?: 'next-list' | 'collapse' | 'group' | 'group-select';
+    disabled?: boolean;
+} & CommonFlattenProps;
+export type ItemProps = Item;
+export type BaseItemProps = BaseItem;
+export type GroupItemProps = GroupItem;
+export type NextListItemProps = NextListItem;
+export type AccordionItemProps = AccordionItem;
+export type GroupSelectItemProps = GroupSelectItem;
+export {};

package/dist/esm/components/Items/utils.d.ts

@@ -0,0 +1,35 @@
+import { ItemContentProps } from '../../helperComponents';
+import { AccordionItem, AnyType, BaseItem, FlattenItem, FocusFlattenItem, GroupItem, GroupSelectItem, Item, ItemId, NextListItem } from './types';
+export declare function isBaseItem<ReturnType = BaseItem>(item: AnyType): item is ReturnType;
+export declare function isAccordionItem<ReturnType = AccordionItem>(item: AnyType): item is ReturnType;
+export declare function isNextListItem<ReturnType = NextListItem>(item: AnyType): item is ReturnType;
+export declare function isGroupItem<ReturnType = GroupItem>(item: AnyType): item is ReturnType;
+export declare function isGroupSelectItem<ReturnType = GroupSelectItem>(item: AnyType): item is ReturnType;
+export declare function isContentItem(item: AnyType): item is ItemContentProps;
+export declare const isBaseItemProps: typeof isBaseItem;
+export declare const isAccordionItemProps: typeof isAccordionItem;
+export declare const isNextListItemProps: typeof isNextListItem;
+export declare const isGroupItemProps: typeof isGroupItem;
+type KindFlattenItemsProps = {
+    items: Item[];
+    prefix?: ItemId;
+    parentId?: ItemId;
+};
+export declare function kindFlattenItems({ items, prefix, parentId }: KindFlattenItemsProps): {
+    focusCloseChildIds: ItemId[];
+    allChildIds: ItemId[];
+    flattenItems: Record<string, FlattenItem>;
+    focusFlattenItems: Record<string, FocusFlattenItem>;
+};
+type ExtractActiveItemsProps = {
+    focusFlattenItems: Record<string, FocusFlattenItem>;
+    focusCloseChildIds: ItemId[];
+    openCollapseItems: ItemId[];
+    isSelectionMultiple?: boolean;
+};
+type ExtractActiveItemsReturnType = {
+    ids: ItemId[];
+    expandedIds: ItemId[];
+};
+export declare function extractActiveItems({ focusFlattenItems, focusCloseChildIds, openCollapseItems, isSelectionMultiple, }: ExtractActiveItemsProps): ExtractActiveItemsReturnType;
+export {};

package/dist/esm/components/Lists/Droplist/DropList.d.ts

@@ -0,0 +1,2 @@
+import { DroplistProps } from '../types';
+export declare function Droplist({ items: itemsProp, search, pinBottom: pinBottomProp, pinTop: pinTopProp, footerActiveElementsRefs, children, trigger, placement, widthStrategy, triggerElemRef: triggerElemRefProp, open: openProp, onOpenChange, collapse, triggerClassName, selection, contentRender, size, marker, closeDroplistOnItemClick, className, listRef: listRefProp, untouchableScrollbars, ...props }: DroplistProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/Lists/Droplist/index.js

@@ -0,0 +1 @@
+export * from './DropList';

package/dist/esm/components/Lists/List/List.d.ts

@@ -0,0 +1,16 @@
+import { KeyboardEvent } from 'react';
+export declare const List: import("react").ForwardRefExoticComponent<{
+    'data-test-id'?: string;
+} & import("react").AriaAttributes & {
+    items: import("../../Items").Item[];
+    pinTop?: import("../../Items").Item[];
+    pinBottom?: import("../../Items").Item[];
+    footer?: import("react").ReactNode;
+    footerActiveElementsRefs?: import("react").RefObject<HTMLElement>[];
+    search?: import("../../..").SearchState;
+    tabIndex?: number;
+    collapse?: import("../contexts").CollapseState;
+    className?: string;
+    onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
+    loading?: boolean;
+} & import("../contexts").SelectionState & import("../contexts").PublicListContextType & import("../../../types").ScrollProps & import("../types").EmptyState & import("react").RefAttributes<HTMLElement>>;

package/dist/esm/components/Lists/List/index.js

@@ -0,0 +1 @@
+export * from './List';

package/dist/esm/components/Lists/ListPrivate/ListPrivate.d.ts

@@ -0,0 +1,13 @@
+export declare const ListPrivate: import("react").ForwardRefExoticComponent<Omit<import("../types").ListProps, "items" | "pinTop" | "pinBottom"> & {
+    nested?: boolean;
+    active?: boolean;
+    tabIndex?: number;
+    onFocus?(e: import("react").FocusEvent<HTMLElement>): void;
+    onBlur?(e: import("react").FocusEvent<HTMLElement>): void;
+    onKeyDown?(e: import("react").KeyboardEvent<HTMLElement>): void;
+    limitedScrollHeight?: boolean;
+    searchItem?: import("../../Items").FlattenBaseItem;
+    pinTop?: import("../../Items").ItemId[];
+    items: import("../../Items").ItemId[];
+    pinBottom?: import("../../Items").ItemId[];
+} & import("react").RefAttributes<HTMLElement>>;

package/dist/esm/components/Lists/ListPrivate/index.js

@@ -0,0 +1 @@
+export * from './ListPrivate';

package/dist/esm/components/Lists/ListPrivate/styles.module.css

@@ -0,0 +1,51 @@
+.loader{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}
+.loader[data-size=s]{
+  height:var(--dimension-3m, 24px);
+}
+.loader[data-size=s][data-no-items]{
+  min-width:calc(2 * 3 * var(--dimension-3m, 24px));
+  height:calc(3 * var(--dimension-3m, 24px));
+}
+.loader[data-size=m]{
+  height:var(--dimension-4m, 32px);
+}
+.loader[data-size=m][data-no-items]{
+  min-width:calc(2 * 3 * var(--dimension-4m, 32px));
+  height:calc(3 * var(--dimension-4m, 32px));
+}
+.loader[data-size=l]{
+  height:var(--dimension-5m, 40px);
+}
+.loader[data-size=l][data-no-items]{
+  min-width:calc(2 * 3 * var(--dimension-5m, 40px));
+  height:calc(3 * var(--dimension-5m, 40px));
+}
+.loader:focus-visible{
+  outline-width:var(--border-state-focus-s-border-width, 2px);
+  outline-style:var(--border-state-focus-s-border-style, solid);
+  outline-color:var(--border-state-focus-s-border-color, );
+  outline-offset:calc(var(--border-state-focus-s-border-width, 2px) * -1);
+  outline-color:var(--sys-available-complementary, #1c1c24);
+}
+
+.scrollStub{
+  height:calc(var(--dimension-025m, 2px) / 2);
+  margin-top:calc(var(--dimension-025m, 2px) / -2);
+  background:transparent;
+}
+
+.footer{
+  display:flex;
+  flex-direction:column;
+  box-sizing:border-box;
+  padding:var(--dimension-050m, 4px);
+}
+
+.content{
+  overflow:hidden;
+  flex-grow:1;
+}

package/dist/esm/components/Lists/contexts/CollapseProvider.d.ts

@@ -0,0 +1,17 @@
+import { ItemId } from '../../Items';
+export type CollapseLevelContextType = {
+    level?: number;
+};
+export declare const CollapseLevelContext: import("react").Context<CollapseLevelContextType>;
+export declare const useCollapseLevelContext: () => CollapseLevelContextType;
+export type CollapseContextType = {
+    openCollapseItems?: ItemId[];
+    toggleOpenCollapseItem?(id: ItemId): void;
+};
+export declare const CollapseContext: import("react").Context<CollapseContextType>;
+export declare const useCollapseContext: () => CollapseContextType;
+export type CollapseState = {
+    value?: ItemId[];
+    onChange?(value?: ItemId[]): void;
+    defaultValue?: ItemId[];
+};

package/dist/esm/components/Lists/contexts/FocusListProvider.d.ts

@@ -0,0 +1,9 @@
+import { KeyboardEvent } from 'react';
+import { ItemId } from '../../Items';
+export type FocusListContextType = {
+    activeItemId?: ItemId;
+    forceUpdateActiveItemId?(itemId: ItemId): void;
+    handleListKeyDownFactory: (ids: ItemId[], expandedIds: ItemId[]) => (e: KeyboardEvent<HTMLElement>) => void;
+};
+export declare const FocusListContext: import("react").Context<FocusListContextType>;
+export declare const useFocusListContext: () => FocusListContextType;

package/dist/esm/components/Lists/contexts/NewListProvider.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+import { ItemContentProps } from '../../../helperComponents';
+import { FlattenItem, FocusFlattenItem, ItemId } from '../../Items';
+type ContentRenderProps = {
+    id?: ItemId;
+    content?: ItemContentProps | ReactNode;
+    disabled?: boolean;
+};
+export type PublicListContextType = {
+    /** Размер списка */
+    size?: 's' | 'm' | 'l';
+    /** Отображать ли маркер у выбранного жлемента списка */
+    marker?: boolean;
+    /**
+     * Рендер функция основного контента айтема
+     */
+    contentRender?(props: ContentRenderProps): ReactNode;
+};
+export type PrivateListContextType = {
+    flattenItems: Record<string, FlattenItem>;
+    focusFlattenItems: Record<string, FocusFlattenItem>;
+};
+type Child = {
+    children: ReactNode;
+};
+type ListContextType = PublicListContextType & PrivateListContextType;
+export declare const ListContext: import("react").Context<{
+    flattenItems: {};
+    focusFlattenItems: {};
+}>;
+export declare function useNewListContext(): ListContextType;
+export declare function NewListContextProvider({ children, ...props }: ListContextType & Child): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/Lists/contexts/OpenListProvider.d.ts

@@ -0,0 +1,6 @@
+export type OpenListContextType = {
+    closeDroplistOnItemClick?: boolean;
+    closeDroplist(): void;
+};
+export declare const OpenListContext: import("react").Context<OpenListContextType>;
+export declare const useOpenListContext: () => OpenListContextType;

package/dist/esm/components/Lists/contexts/SelectionProvider.d.ts

@@ -0,0 +1,70 @@
+import { ReactNode } from 'react';
+import { AnyType, ItemId } from '../../Items';
+export type OnChangeHandler<T = AnyType> = (value: T) => void;
+export type SelectionSingleValueType = ItemId;
+export type SelectionSingleState = {
+    /** Начальное состояние */
+    defaultValue?: ItemId;
+    /** Controlled состояние */
+    value?: ItemId;
+    /** Controlled обработчик измения состояния */
+    onChange?: OnChangeHandler;
+    /** Режим выбора */
+    mode: 'single';
+};
+export type SelectionSingleProps = {
+    setValue?(value: AnyType): void;
+    /** Режим выбора single */
+    isSelectionSingle: true;
+    /** Режим выбора multi */
+    isSelectionMultiple: false;
+} & SelectionSingleState;
+export type SelectionMultipleState = {
+    /** Начальное состояние */
+    defaultValue?: ItemId[];
+    /** Controlled состояние */
+    value?: ItemId[];
+    /** Controlled обработчик измения состояния */
+    onChange?: OnChangeHandler;
+    /** Режим выбора */
+    mode: 'multiple';
+};
+export type SelectionMultipleProps = {
+    setValue?(value: AnyType): void;
+    /** Режим выбора single */
+    isSelectionSingle: false;
+    /** Режим выбора multi */
+    isSelectionMultiple: true;
+} & SelectionMultipleState;
+type SelectionNoneProps = {
+    mode?: 'none';
+    value?: undefined;
+    onChange?: undefined;
+    setValue?: undefined;
+    defaultValue?: undefined;
+    isSelectionSingle?: undefined;
+    isSelectionMultiple?: undefined;
+};
+type SelectionContextType = Omit<SelectionNoneProps, 'defaultValue'> | Omit<SelectionSingleProps, 'defaultValue'> | Omit<SelectionMultipleProps, 'defaultValue'>;
+export type SelectionState = {
+    selection?: SelectionSingleState | SelectionMultipleState;
+};
+export declare const SelectionContext: import("react").Context<SelectionContextType>;
+export declare function isSelectionMultipleProps(props: AnyType): props is SelectionMultipleProps;
+export declare function isSelectionSingleProps(props: AnyType): props is SelectionSingleProps;
+type Child = {
+    children: ReactNode;
+};
+type SelectionProviderProps = {
+    /** Начальное состояние */
+    defaultValue?: AnyType;
+    /** Controlled состояние */
+    value?: AnyType;
+    /** Controlled обработчик измения состояния */
+    onChange?: OnChangeHandler;
+    /** Режим выбора */
+    mode?: 'multiple' | 'single' | 'none';
+};
+export declare function SelectionProvider({ children, ...props }: SelectionProviderProps & Child): import("react/jsx-runtime").JSX.Element;
+export declare function useSelectionContext(): SelectionContextType;
+export {};

package/dist/esm/components/Lists/contexts/index.js

@@ -0,0 +1,6 @@
+export * from './SelectionProvider';
+export * from './CollapseProvider';
+export * from './NewListProvider';
+export * from './SelectionProvider';
+export * from './FocusListProvider';
+export * from './OpenListProvider';

package/dist/esm/components/Lists/hooks.d.ts

@@ -0,0 +1,14 @@
+import { KeyboardEvent, RefObject } from 'react';
+import { FocusFlattenItem, ItemId } from '../Items';
+type UseNewKeyboardNavigationProps<T extends HTMLElement> = {
+    mainRef?: RefObject<T>;
+    btnRef?: RefObject<HTMLButtonElement>;
+    focusFlattenItems: Record<string, FocusFlattenItem>;
+};
+export declare function useNewKeyboardNavigation<T extends HTMLElement>({ mainRef, btnRef, focusFlattenItems, }: UseNewKeyboardNavigationProps<T>): {
+    resetActiveItemId: () => void;
+    activeItemId: ItemId | undefined;
+    forceUpdateActiveItemId: (itemId: ItemId) => void;
+    handleListKeyDownFactory: (ids: ItemId[], expandedIds: ItemId[]) => (e: KeyboardEvent<T>) => void;
+};
+export {};

package/dist/esm/components/Lists/index.d.ts

@@ -0,0 +1,5 @@
+export * from './Droplist';
+export * from './List';
+export type { ListProps, DroplistProps } from './types';
+export type { SelectionSingleState, SelectionMultipleState, SelectionSingleProps, SelectionMultipleProps, SelectionSingleValueType, } from './contexts';
+export { useSelectionContext, useCollapseContext, isSelectionSingleProps, isSelectionMultipleProps } from './contexts';