@snack-uikit/list 0.18.0 → 0.18.1-preview-71543426.0

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

@@ -0,0 +1,59 @@
+.listContainer{
+  display:flex;
+  flex-direction:column;
+  height:100%;
+  margin:0;
+  padding:0;
+}
+.listContainer:focus-visible{
+  border:none;
+  outline:none;
+}
+.listContainer:focus-visible[data-active]{
+  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);
+}
+.listContainer:focus-visible[data-active] *{
+  cursor:inherit;
+}
+.listContainer li,
+.listContainer ul{
+  list-style-type:none;
+}
+
+.wrapper{
+  position:relative;
+  overflow:hidden;
+  display:block;
+  box-sizing:border-box;
+  height:100%;
+}
+.wrapper:has(.listContainer: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);
+}
+.wrapper li,
+.wrapper ul{
+  list-style-type:none;
+}
+
+.scrollContainerS{
+  height:auto;
+  max-height:calc(var(--dimension-1m, 8px) * 32);
+}
+
+.scrollContainerM{
+  height:auto;
+  max-height:calc(var(--dimension-1m, 8px) * 40);
+}
+
+.scrollContainerL{
+  height:auto;
+  max-height:calc(var(--dimension-1m, 8px) * 48);
+}

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

@@ -0,0 +1,78 @@
+import { FocusEvent, KeyboardEvent, ReactNode, RefObject } from 'react';
+import { DropdownProps } from '@snack-uikit/dropdown';
+import { WithSupportProps } from '@snack-uikit/utils';
+import { EmptyStateProps } from '../../helperComponents';
+import { ScrollProps, SearchState } from '../../types';
+import { FlattenBaseItem, Item, ItemId } from '../Items';
+import { CollapseState, PublicListContextType, SelectionState } from './contexts';
+export type EmptyState = {
+    dataFiltered?: boolean;
+    dataError?: boolean;
+    /** Экран при отстутствии данных */
+    noDataState?: EmptyStateProps;
+    /** Экран при отстутствии результатов поиска или фильтров */
+    noResultsState?: EmptyStateProps;
+    /** Экран при ошибке запроса */
+    errorDataState?: EmptyStateProps;
+};
+export type ListProps = WithSupportProps<{
+    /** Основные элементы списка */
+    items: Item[];
+    /** Элементы списка, закрепленные сверху */
+    pinTop?: Item[];
+    /** Элементы списка, закрепленные снизу */
+    pinBottom?: Item[];
+    /**
+     * Кастомизируемый элемент в конце списка
+     * @type ReactNode;
+     */
+    footer?: ReactNode;
+    /** Список ссылок на кастомные элементы, помещенные в специальную секцию внизу списка  */
+    footerActiveElementsRefs?: RefObject<HTMLElement>[];
+    /** Настройки поисковой строки */
+    search?: SearchState;
+    /** Tab Index */
+    tabIndex?: number;
+    /** Настройки раскрытия элементов */
+    collapse?: CollapseState;
+    /** CSS-класс */
+    className?: string;
+    onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
+    /** Флаг, отвещающий за состояние загрузки списка */
+    loading?: boolean;
+} & SelectionState & PublicListContextType & ScrollProps & EmptyState>;
+export type DroplistProps = {
+    /** Ссылка на элемент-триггер для дроплиста */
+    triggerElemRef?: RefObject<HTMLElement>;
+    /** Ссылка на элемент выпадающего списка */
+    listRef?: RefObject<HTMLElement>;
+    /**
+     * Закрывать выпадающий список после клика на базовый айтем.
+     *
+     * Работает в режимах selection: 'none' | 'single'
+     *
+     * @default false
+     */
+    closeDroplistOnItemClick?: boolean;
+    /** Триггер для дроплиста
+     * @type ReactNode | ({onKeyDown}) => ReactNode
+     *
+     * Рендер функция принимает аргументы `onKeyDown` - хендлер ввода, для поддержки управления с клавиатуры
+     */
+    children: ReactNode | ((params: {
+        onKeyDown?: (e: KeyboardEvent<HTMLElement>) => void;
+    }) => ReactNode);
+} & Pick<DropdownProps, 'trigger' | 'placement' | 'widthStrategy' | 'open' | 'onOpenChange' | 'triggerClassName'> & Omit<ListProps, 'tabIndex' | 'onKeyDown'>;
+export type ListPrivateProps = Omit<ListProps, 'pinTop' | 'pinBottom' | 'items'> & {
+    nested?: boolean;
+    active?: boolean;
+    tabIndex?: number;
+    onFocus?(e: FocusEvent<HTMLElement>): void;
+    onBlur?(e: FocusEvent<HTMLElement>): void;
+    onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
+    limitedScrollHeight?: boolean;
+    searchItem?: FlattenBaseItem;
+    pinTop?: ItemId[];
+    items: ItemId[];
+    pinBottom?: ItemId[];
+};

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

@@ -0,0 +1,4 @@
+export * from './Lists';
+export type { AccordionItemProps, NextListItemProps, BaseItemProps, GroupItemProps, ItemProps, GroupSelectItemProps, ItemId, } from './Items';
+export { isAccordionItemProps, isBaseItemProps, isGroupItemProps, isNextListItemProps, isGroupSelectItem, } from './Items';
+export { useGroupItemSelection } from './Items/hooks';

package/dist/esm/helperComponents/CollapseBlockPrivate/CollapseBlockPrivate.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { WithSupportProps } from '@snack-uikit/utils';
+export type CollapseBlockPrivateProps = WithSupportProps<{
+    children: ReactNode;
+    header: ReactNode;
+    expanded: boolean;
+    className?: string;
+}>;
+export declare function CollapseBlockPrivate({ children, expanded, className, header, ...rest }: CollapseBlockPrivateProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/CollapseBlockPrivate/index.js

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

package/dist/esm/helperComponents/CollapseBlockPrivate/styles.module.css

@@ -0,0 +1,38 @@
+.accordion{
+  display:flex;
+  flex-direction:column;
+  box-sizing:border-box;
+  transition:gap 300ms;
+}
+.accordion::-webkit-scrollbar{
+  width:0;
+}
+.accordion[aria-expanded=false]{
+  gap:0;
+}
+
+.contentWrapper{
+  box-sizing:border-box;
+  width:100%;
+}
+.contentWrapper[aria-hidden=false] > div[data-content]{
+  display:block;
+}
+
+.content{
+  position:relative;
+  display:none;
+  box-sizing:border-box;
+  width:100%;
+}
+.content::before{
+  pointer-events:none;
+  content:"";
+  position:absolute;
+  top:0;
+  left:0;
+  width:100%;
+  height:100%;
+  opacity:var(--opacity-a004, 0.04);
+  background-color:var(--sys-neutral-accent-default, #787b8a);
+}

package/dist/esm/helperComponents/HiddenTabButton/HiddenTabButton.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+type HiddenTabButtonProps = {
+    listRef: RefObject<HTMLElement>;
+    tabIndex?: number;
+};
+export declare const HiddenTabButton: import("react").ForwardRefExoticComponent<HiddenTabButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/esm/helperComponents/HiddenTabButton/index.js

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

package/dist/esm/helperComponents/HiddenTabButton/styles.module.css

@@ -0,0 +1,9 @@
+.hiddenBtn{
+  position:absolute;
+  width:0;
+  height:0;
+  margin:0;
+  padding:0;
+  border:none;
+  outline:none;
+}

package/dist/esm/helperComponents/ItemContent/ItemContent.d.ts

@@ -0,0 +1,17 @@
+import { TruncateStringProps } from '@snack-uikit/truncate-string';
+import { WithSupportProps } from '@snack-uikit/utils';
+type TruncateProps = {
+    option?: number;
+    description?: number;
+    variant?: TruncateStringProps['variant'];
+};
+export type ItemContentProps = WithSupportProps<{
+    option: string | number;
+    caption?: string;
+    description?: string;
+    truncate?: TruncateProps;
+    disabled?: boolean;
+    className?: string;
+}>;
+export declare function ItemContent({ truncate: truncateProp, caption, description, option, className, disabled, ...rest }: ItemContentProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/helperComponents/ItemContent/index.js

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

package/dist/esm/helperComponents/ItemContent/styles.module.css

@@ -0,0 +1,122 @@
+.headline{
+  display:flex;
+}
+
+.label{
+  overflow:hidden;
+  flex:1;
+  color:var(--sys-neutral-text-main, #41424e);
+}
+
+.caption{
+  overflow:hidden;
+  color:var(--sys-neutral-text-light, #8b8e9b);
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+
+.description{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+
+.content{
+  overflow:hidden;
+  flex-grow:1;
+  flex-shrink:1;
+  box-sizing:border-box;
+}
+.content[data-size=s] .headline{
+  gap:var(--space-drop-list-item-s-container-headline-gap, 8px);
+  min-height:var(--size-drop-list-item-headline, 24px);
+}
+.content[data-size=s] .label{
+  font-family:var(--sans-body-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-s-font-weight, Regular);
+  line-height:var(--sans-body-s-line-height, 16px);
+  font-size:var(--sans-body-s-font-size, 12px);
+  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
+  display:flex;
+  align-items:center;
+}
+.content[data-size=s] .caption{
+  font-family:var(--sans-body-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-s-font-weight, Regular);
+  line-height:var(--sans-body-s-line-height, 16px);
+  font-size:var(--sans-body-s-font-size, 12px);
+  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
+}
+.content[data-size=s] .description{
+  font-family:var(--sans-body-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-s-font-weight, Regular);
+  line-height:var(--sans-body-s-line-height, 16px);
+  font-size:var(--sans-body-s-font-size, 12px);
+  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
+}
+.content[data-size=m] .headline{
+  gap:var(--space-drop-list-item-m-container-headline-gap, 8px);
+  min-height:var(--size-drop-list-item-headline, 24px);
+}
+.content[data-size=m] .label{
+  font-family:var(--sans-body-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-m-font-weight, Regular);
+  line-height:var(--sans-body-m-line-height, 20px);
+  font-size:var(--sans-body-m-font-size, 14px);
+  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
+  display:flex;
+  align-items:center;
+}
+.content[data-size=m] .caption{
+  font-family:var(--sans-body-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-s-font-weight, Regular);
+  line-height:var(--sans-body-s-line-height, 16px);
+  font-size:var(--sans-body-s-font-size, 12px);
+  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
+}
+.content[data-size=m] .description{
+  font-family:var(--sans-body-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-s-font-weight, Regular);
+  line-height:var(--sans-body-s-line-height, 16px);
+  font-size:var(--sans-body-s-font-size, 12px);
+  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
+}
+.content[data-size=l] .headline{
+  gap:var(--space-drop-list-item-l-container-headline-gap, 8px);
+  min-height:var(--size-drop-list-item-headline, 24px);
+}
+.content[data-size=l] .label{
+  font-family:var(--sans-body-l-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-l-font-weight, Regular);
+  line-height:var(--sans-body-l-line-height, 24px);
+  font-size:var(--sans-body-l-font-size, 16px);
+  letter-spacing:var(--sans-body-l-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-l-paragraph-spacing, 8.8px);
+  display:flex;
+  align-items:center;
+}
+.content[data-size=l] .caption{
+  font-family:var(--sans-body-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-m-font-weight, Regular);
+  line-height:var(--sans-body-m-line-height, 20px);
+  font-size:var(--sans-body-m-font-size, 14px);
+  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
+}
+.content[data-size=l] .description{
+  font-family:var(--sans-body-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-m-font-weight, Regular);
+  line-height:var(--sans-body-m-line-height, 20px);
+  font-size:var(--sans-body-m-font-size, 14px);
+  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
+}
+.content[data-disabled] .label,
+.content[data-disabled] .description,
+.content[data-disabled] .caption{
+  color:var(--sys-neutral-text-disabled, #aaaebd);
+}

package/dist/esm/helperComponents/ListEmptyState/ListEmptyState.d.ts

@@ -0,0 +1,14 @@
+import { InfoBlockProps } from '@snack-uikit/info-block';
+export type EmptyStateProps = Pick<InfoBlockProps, 'description' | 'icon' | 'data-test-id' | 'footer'>;
+export type ListEmptyState = {
+    emptyStates: {
+        noDataState: EmptyStateProps;
+        noResultsState: EmptyStateProps;
+        errorDataState: EmptyStateProps;
+    };
+    loading?: boolean;
+    dataError?: boolean;
+    dataFiltered?: boolean;
+    hasNoItems: boolean;
+};
+export declare function ListEmptyState({ dataError, dataFiltered, hasNoItems, emptyStates, loading }: ListEmptyState): import("react/jsx-runtime").JSX.Element | null;

package/dist/esm/helperComponents/ListEmptyState/hooks.d.ts

@@ -0,0 +1,10 @@
+import { EmptyStateProps } from './ListEmptyState';
+export declare function useEmptyState({ noDataState: noDataStateProp, noResultsState: noResultsStateProp, errorDataState: errorDataStateProp, }: {
+    noDataState?: EmptyStateProps;
+    noResultsState?: EmptyStateProps;
+    errorDataState?: EmptyStateProps;
+}): {
+    noDataState: EmptyStateProps;
+    noResultsState: EmptyStateProps;
+    errorDataState: EmptyStateProps;
+};

package/dist/esm/helperComponents/ListEmptyState/index.js

@@ -0,0 +1,2 @@
+export * from './ListEmptyState';
+export { useEmptyState } from './hooks';

package/dist/esm/helperComponents/ListEmptyState/styles.module.css

@@ -0,0 +1,8 @@
+.listEmptyStateWrapper{
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  padding:var(--dimension-1m, 8px);
+}

package/dist/esm/helperComponents/Separator/Separator.d.ts

@@ -0,0 +1,17 @@
+import { ForwardedRef, MouseEvent } from 'react';
+import { TruncateStringProps } from '@snack-uikit/truncate-string';
+export type SeparatorProps = {
+    label?: string;
+    truncate?: {
+        variant?: TruncateStringProps['variant'];
+    };
+    mode?: 'primary' | 'secondary';
+    divider?: boolean;
+    selectButton?: {
+        onClick?(e: MouseEvent<HTMLElement>): void;
+        indeterminate?: boolean;
+        checked?: boolean;
+        itemRef?: ForwardedRef<HTMLElement>;
+    };
+};
+export declare function Separator({ label, truncate, divider, mode, selectButton }: SeparatorProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/esm/helperComponents/Separator/constants.d.ts

@@ -0,0 +1,2 @@
+import { ButtonFunctionProps } from '@snack-uikit/button';
+export declare const SELECT_BUTTON_SIZE_MAP: Record<string, ButtonFunctionProps['size']>;

package/dist/esm/helperComponents/Separator/index.js

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

package/dist/esm/helperComponents/Separator/styles.module.css

@@ -0,0 +1,141 @@
+.separatorWithLabel{
+  display:flex;
+  gap:var(--dimension-1m, 8px);
+  align-items:flex-end;
+  box-sizing:border-box;
+  width:100%;
+  min-width:100%;
+}
+.separatorWithLabel[data-size=s]{
+  padding-top:var(--space-drop-list-item-s-container-separator-subheader-vertical-padding, 4px);
+  padding-bottom:var(--space-drop-list-item-s-container-separator-subheader-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);
+  height:var(--size-drop-list-item-s-container-separator-subheader-height, 32px);
+}
+.separatorWithLabel[data-size=s] .label[data-mode=primary]{
+  font-family:var(--sans-label-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-m-font-weight, Semibold);
+  line-height:var(--sans-label-m-line-height, 16px);
+  font-size:var(--sans-label-m-font-size, 12px);
+  letter-spacing:var(--sans-label-m-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
+}
+.separatorWithLabel[data-size=s] .label[data-mode=secondary]{
+  font-family:var(--light-label-m-font-family, SB Sans Interface);
+  font-weight:var(--light-label-m-font-weight, Regular);
+  line-height:var(--light-label-m-line-height, 16px);
+  font-size:var(--light-label-m-font-size, 12px);
+  letter-spacing:var(--light-label-m-letter-spacing, 0px);
+  paragraph-spacing:var(--light-label-m-paragraph-spacing, 6.6px);
+}
+.separatorWithLabel[data-size=m]{
+  padding-top:var(--space-drop-list-item-m-container-separator-subheader-vertical-padding, 5px);
+  padding-bottom:var(--space-drop-list-item-m-container-separator-subheader-vertical-padding, 5px);
+  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);
+  height:var(--size-drop-list-item-m-container-separator-subheader-height, 40px);
+}
+.separatorWithLabel[data-size=m] .label[data-mode=primary]{
+  font-family:var(--sans-label-l-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-l-font-weight, Semibold);
+  line-height:var(--sans-label-l-line-height, 20px);
+  font-size:var(--sans-label-l-font-size, 14px);
+  letter-spacing:var(--sans-label-l-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
+}
+.separatorWithLabel[data-size=m] .label[data-mode=secondary]{
+  font-family:var(--light-label-l-font-family, SB Sans Interface);
+  font-weight:var(--light-label-l-font-weight, Regular);
+  line-height:var(--light-label-l-line-height, 20px);
+  font-size:var(--light-label-l-font-size, 14px);
+  letter-spacing:var(--light-label-l-letter-spacing, 0px);
+  paragraph-spacing:var(--light-label-l-paragraph-spacing, 7.7px);
+}
+.separatorWithLabel[data-size=l]{
+  padding-top:var(--space-drop-list-item-l-container-separator-subheader-vertical-padding, 6px);
+  padding-bottom:var(--space-drop-list-item-l-container-separator-subheader-vertical-padding, 6px);
+  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);
+  height:var(--size-drop-list-item-l-container-separator-subheader-height, 48px);
+}
+.separatorWithLabel[data-size=l] .label[data-mode=primary]{
+  font-family:var(--sans-title-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-title-m-font-weight, Semibold);
+  line-height:var(--sans-title-m-line-height, 24px);
+  font-size:var(--sans-title-m-font-size, 16px);
+  letter-spacing:var(--sans-title-m-letter-spacing, 0.15px);
+  paragraph-spacing:var(--sans-title-m-paragraph-spacing, 8.8px);
+}
+.separatorWithLabel[data-size=l] .label[data-mode=secondary]{
+  font-family:var(--light-title-m-font-family, SB Sans Interface);
+  font-weight:var(--light-title-m-font-weight, Regular);
+  line-height:var(--light-title-m-line-height, 24px);
+  font-size:var(--light-title-m-font-size, 16px);
+  letter-spacing:var(--light-title-m-letter-spacing, 0.15px);
+  paragraph-spacing:var(--light-title-m-paragraph-spacing, 8.8px);
+}
+
+.separatorWithoutLabel{
+  display:flex;
+  align-items:flex-end;
+  box-sizing:border-box;
+}
+.separatorWithoutLabel[data-size=s]{
+  padding-top:var(--space-drop-list-item-s-container-separator-subheader-vertical-padding, 4px);
+  padding-bottom:var(--space-drop-list-item-s-container-separator-subheader-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);
+}
+.separatorWithoutLabel[data-size=m]{
+  padding-top:var(--space-drop-list-item-m-container-separator-subheader-vertical-padding, 5px);
+  padding-bottom:var(--space-drop-list-item-m-container-separator-subheader-vertical-padding, 5px);
+  padding-left:var(--space-drop-list-item-m-container-horizontal-padding, 10px);
+  padding-right:var(--space-drop-list-item-m-container-horizontal-padding, 10px);
+}
+.separatorWithoutLabel[data-size=l]{
+  padding-top:var(--space-drop-list-item-l-container-separator-subheader-vertical-padding, 6px);
+  padding-bottom:var(--space-drop-list-item-l-container-separator-subheader-vertical-padding, 6px);
+  padding-left:var(--space-drop-list-item-l-container-horizontal-padding, 12px);
+  padding-right:var(--space-drop-list-item-l-container-horizontal-padding, 12px);
+}
+
+.label{
+  overflow:hidden;
+  flex-shrink:1;
+}
+.label[data-mode=primary]{
+  color:var(--sys-neutral-text-main, #41424e);
+}
+.label[data-mode=secondary]{
+  color:var(--sys-neutral-text-light, #8b8e9b);
+}
+
+hr.divider{
+  flex:1;
+  width:auto;
+  min-width:0;
+}
+
+.selectButton{
+  display:flex;
+  justify-content:flex-end;
+}
+.selectButton[data-weight=primary]{
+  --divider-height:1px;
+}
+.selectButton[data-weight=secondary]{
+  --divider-height:0.5px;
+}
+.selectButton[data-size=s]{
+  transform:translateY(calc((var(--size-button-xs, 24px) - var(--sans-label-s-line-height, 14px)) / 2 - var(--divider-height, 0)));
+}
+.selectButton[data-size=m]{
+  transform:translateY(calc((var(--size-button-s, 32px) - var(--sans-label-m-line-height, 16px)) / 2 - var(--divider-height, 0)));
+}
+.selectButton[data-size=l]{
+  transform:translateY(calc((var(--size-button-m, 40px) - var(--sans-label-l-line-height, 20px)) / 2 - var(--divider-height, 0)));
+}

package/dist/esm/helperComponents/index.js

@@ -0,0 +1,5 @@
+export * from './CollapseBlockPrivate';
+export * from './Separator';
+export * from './HiddenTabButton';
+export * from './ListEmptyState';
+export * from './ItemContent';

package/dist/esm/index.d.ts

@@ -0,0 +1,4 @@
+export * from './components';
+export type { SearchState } from './types';
+export { kindFlattenItems } from './components/Items';
+export * from './helperComponents/ItemContent';

package/dist/esm/types.d.ts

@@ -0,0 +1,20 @@
+import { RefObject } from 'react';
+import { ScrollProps as OriginalScrollProps } from '@snack-uikit/scroll';
+export type SearchState = {
+    placeholder?: string;
+    loading?: boolean;
+    value?: string;
+    onChange(value: string): void;
+};
+export type ScrollProps = {
+    /** Включить ли скролл для основной части списка */
+    scroll?: boolean;
+    /** Ссылка на элемент, обозначающий самый конец прокручиваемого списка */
+    scrollRef?: RefObject<HTMLElement>;
+    /** Ссылка на контейнер, который скроллится */
+    scrollContainerRef?: RefObject<HTMLElement>;
+    /** Отключает возможность взаимодействовать со скролбарами мышью. */
+    untouchableScrollbars?: boolean;
+    /** Колбек на скролл прокручиваемого списка */
+    onScroll?: OriginalScrollProps['onScroll'];
+};