@snack-uikit/list 0.11.0 → 0.11.1

package/src/components/Lists/types.ts

@@ -5,19 +5,12 @@ import { WithSupportProps } from '@snack-uikit/utils';
 
 import { EmptyStateProps } from '../../helperComponents';
 import { ScrollProps, SearchState } from '../../types';
-import { ItemProps } from '../Items';
-import { ListContextPrivateType, ListContextType, SelectionState } from './contexts';
-
-type CollapseState = {
-  value?: (string | number)[];
-  onChange?(value: (string | number)[]): void;
-  defaultValue?: (string | number)[];
-};
+import { FlattenBaseItem, Item, ItemId } from '../Items';
+import { CollapseState, PublicListContextType, SelectionState } from './contexts';
 
 export type EmptyState = {
   dataFiltered?: boolean;
   dataError?: boolean;
-
   /** Экран при отстутствии данных */
   noDataState?: EmptyStateProps;
   /** Экран при отстутствии результатов поиска или фильтров */
@@ -29,11 +22,11 @@ export type EmptyState = {
 export type ListProps = WithSupportProps<
   {
     /** Основные элементы списка */
-    items: ItemProps[];
+    items: Item[];
     /** Элементы списка, закрепленные сверху */
-    pinTop?: ItemProps[];
+    pinTop?: Item[];
     /** Элементы списка, закрепленные снизу */
-    pinBottom?: ItemProps[];
+    pinBottom?: Item[];
     /**
      * Кастомизируемый элемент в конце списка
      * @type ReactNode;
@@ -55,7 +48,7 @@ export type ListProps = WithSupportProps<
     /** Флаг, отвещающий за состояние загрузки списка */
     loading?: boolean;
   } & SelectionState &
-    ListContextType &
+    PublicListContextType &
     ScrollProps &
     EmptyState
 >;
@@ -70,16 +63,19 @@ export type DroplistProps = {
    * Рендер функция принимает аргументы `onKeyDown` - хендлер ввода, для поддержки управления с клавиатуры
    */
   children: ReactNode | ((params: { onKeyDown?: (e: KeyboardEvent<HTMLElement>) => void }) => ReactNode);
-} & Pick<DropdownProps, 'trigger' | 'placement' | 'widthStrategy' | 'open' | 'onOpenChange'> &
+} & Pick<DropdownProps, 'trigger' | 'placement' | 'widthStrategy' | 'open' | 'onOpenChange' | 'triggerClassName'> &
   Omit<ListProps, 'tabIndex' | 'onKeyDown'>;
 
-export type ListPrivateProps = ListProps &
-  ListContextPrivateType & {
-    nested?: boolean;
-    active?: boolean;
-    tabIndex?: number;
-    onFocus?(e: FocusEvent<HTMLElement>): void;
-    onBlur?(e: FocusEvent<HTMLElement>): void;
-    onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
-    limitedScrollHeight?: boolean;
-  };
+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/src/components/index.ts

@@ -1,6 +1,21 @@
 export * from './Lists';
 
-export type { AccordionItemProps, NextListItemProps, BaseItemProps, GroupItemProps, ItemProps } from './Items';
-export { isAccordionItemProps, isBaseItemProps, isGroupItemProps, isNextListItemProps } from './Items';
+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/src/helperComponents/ItemContent/ItemContent.tsx

@@ -0,0 +1,63 @@
+import cn from 'classnames';
+
+import { TruncateString, TruncateStringProps } from '@snack-uikit/truncate-string';
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import { useNewListContext } from '../../components/Lists/contexts';
+import styles from './styles.module.scss';
+
+export type ItemContentProps = WithSupportProps<{
+  option: string | number;
+  caption?: string;
+  description?: string;
+  truncate?: {
+    option?: number;
+    description?: number;
+    variant?: TruncateStringProps['variant'];
+  };
+  disabled?: boolean;
+  className?: string;
+}>;
+
+export function ItemContent({
+  truncate,
+  caption,
+  description,
+  option,
+  className,
+  disabled,
+  ...rest
+}: ItemContentProps) {
+  const { size = 's' } = useNewListContext();
+
+  return (
+    <div
+      className={cn(styles.content, className)}
+      {...extractSupportProps(rest)}
+      data-size={size ?? 's'}
+      data-disabled={disabled || undefined}
+    >
+      <div className={styles.headline}>
+        <span className={styles.label}>
+          <TruncateString
+            variant={truncate?.variant}
+            text={String(option)}
+            maxLines={truncate?.option ?? 1}
+            data-test-id='list__base-item-option'
+          />
+        </span>
+        {caption && <span className={styles.caption}>{caption}</span>}
+      </div>
+
+      {description && (
+        <div className={styles.description}>
+          <TruncateString
+            text={description}
+            maxLines={truncate?.description ?? 2}
+            data-test-id='list__base-item-description'
+          />
+        </div>
+      )}
+    </div>
+  );
+}

package/src/helperComponents/ItemContent/index.ts

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

package/src/helperComponents/ItemContent/styles.module.scss

@@ -0,0 +1,78 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-dropList';
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+
+$sizes: 's', 'm', 'l';
+$typography: (
+  's': (
+    'label': $sans-body-s,
+    'caption': $sans-body-s,
+    'description': $sans-body-s,
+    'separator': $light-label-m,
+  ),
+  'm': (
+    'label': $sans-body-m,
+    'caption': $sans-body-s,
+    'description': $sans-body-s,
+    'separator': $light-label-l,
+  ),
+  'l': (
+    'label': $sans-body-l,
+    'caption': $sans-body-m,
+    'description': $sans-body-m,
+    'separator': $light-label-l,
+  ),
+);
+
+.headline {
+  display: flex;
+  align-items: center;
+}
+
+.label {
+  overflow: hidden;
+  flex: 1;
+  color: $sys-neutral-text-main;
+}
+
+.caption {
+  overflow: hidden;
+  color: $sys-neutral-text-light;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.description {
+  color: $sys-neutral-text-support;
+}
+
+.content {
+  overflow: hidden;
+  flex-grow: 1;
+  flex-shrink: 1;
+  box-sizing: border-box;
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      .headline {
+        @include composite-var($drop-list, 'item', $size, 'headline');
+      }
+      .label {
+        @include composite-var($typography, $size, 'label');
+      }
+      .caption {
+        @include composite-var($typography, $size, 'caption');
+      }
+      .description {
+        @include composite-var($typography, $size, 'description');
+      }
+    }
+  }
+
+  &[data-disabled] {
+    .label,
+    .description,
+    .caption {
+      color: $sys-neutral-text-disabled;
+    }
+  }
+}

package/src/helperComponents/ListEmptyState/ListEmptyState.tsx

@@ -13,23 +13,37 @@ export type ListEmptyState = {
   loading?: boolean;
   dataError?: boolean;
   dataFiltered?: boolean;
-  itemsLength: number;
+  hasNoItems: boolean;
 };
 
-export function ListEmptyState({ dataError, dataFiltered, itemsLength, emptyStates, loading }: ListEmptyState) {
-  if (itemsLength || loading) {
+export function ListEmptyState({ dataError, dataFiltered, hasNoItems, emptyStates, loading }: ListEmptyState) {
+  if (loading) {
     return null;
   }
 
-  return (
-    <div className={styles.listEmptyStateWrapper}>
-      {dataError && <InfoBlock {...emptyStates.errorDataState} size='s' align='vertical' />}
-      {!dataError && dataFiltered && (
+  if (dataError) {
+    return (
+      <div className={styles.listEmptyStateWrapper}>
+        <InfoBlock {...emptyStates.errorDataState} size='s' align='vertical' />
+      </div>
+    );
+  }
+
+  if (dataFiltered && hasNoItems) {
+    return (
+      <div className={styles.listEmptyStateWrapper}>
         <InfoBlock {...emptyStates.noResultsState} size='s' align='vertical' data-test-id='list__no-results' />
-      )}
-      {!dataError && !dataFiltered && (
+      </div>
+    );
+  }
+
+  if (!dataFiltered && hasNoItems) {
+    return (
+      <div className={styles.listEmptyStateWrapper}>
         <InfoBlock {...emptyStates.noDataState} size='s' align='vertical' data-test-id='list__no-data' />
-      )}
-    </div>
-  );
+      </div>
+    );
+  }
+
+  return null;
 }

package/src/helperComponents/Separator/Separator.tsx

@@ -1,6 +1,12 @@
+import { ForwardedRef, MouseEvent, RefObject, useMemo } from 'react';
+
+import { ButtonFunction } from '@snack-uikit/button';
 import { Divider } from '@snack-uikit/divider';
+import { useLocale } from '@snack-uikit/locale';
 import { TruncateString, TruncateStringProps } from '@snack-uikit/truncate-string';
 
+import { useNewListContext } from '../../components/Lists/contexts';
+import { SELECT_BUTTON_SIZE_MAP } from './constants';
 import styles from './styles.module.scss';
 
 export type SeparatorProps = {
@@ -10,10 +16,46 @@ export type SeparatorProps = {
   };
   mode?: 'primary' | 'secondary';
   divider?: boolean;
-  size?: 's' | 'm' | 'l';
+  selectButton?: {
+    onClick?(e: MouseEvent<HTMLElement>): void;
+    indeterminate?: boolean;
+    checked?: boolean;
+    itemRef?: ForwardedRef<HTMLElement>;
+  };
 };
 
-export function Separator({ label, truncate, divider, mode = 'secondary', size = 's' }: SeparatorProps) {
+export function Separator({ label, truncate, divider, mode = 'secondary', selectButton }: SeparatorProps) {
+  const { size = 's' } = useNewListContext();
+
+  const { t } = useLocale('List');
+
+  const selectButtonJSX = useMemo(() => {
+    if (!selectButton) {
+      return null;
+    }
+
+    const { onClick, checked, itemRef } = selectButton;
+
+    return (
+      <span className={styles.selectButton} data-size={size} data-weight={(divider && mode) || undefined}>
+        <ButtonFunction
+          size={SELECT_BUTTON_SIZE_MAP[size]}
+          tabIndex={0}
+          onClick={e => {
+            onClick?.(e);
+            e.preventDefault();
+            e.stopPropagation();
+          }}
+          onFocus={e => {
+            e.stopPropagation();
+          }}
+          ref={itemRef as RefObject<HTMLButtonElement>}
+          label={checked ? t('groupSelectButton.reset') : t('groupSelectButton.select')}
+        />
+      </span>
+    );
+  }, [divider, mode, selectButton, size, t]);
+
   if (label) {
     return (
       <div className={styles.separatorWithLabel} data-size={size}>
@@ -21,7 +63,11 @@ export function Separator({ label, truncate, divider, mode = 'secondary', size =
           <TruncateString variant={truncate?.variant} text={label} maxLines={1} />
         </span>
 
-        {divider && <Divider weight={mode === 'primary' ? 'regular' : 'light'} className={styles.divider} />}
+        <div style={{ flex: 1 }}>
+          {selectButtonJSX}
+
+          {divider && <Divider weight={mode === 'primary' ? 'regular' : 'light'} className={styles.divider} />}
+        </div>
       </div>
     );
   }

package/src/helperComponents/Separator/constants.ts

@@ -0,0 +1,7 @@
+import { ButtonFunctionProps } from '@snack-uikit/button';
+
+export const SELECT_BUTTON_SIZE_MAP: Record<string, ButtonFunctionProps['size']> = {
+  s: 'xs',
+  m: 's',
+  l: 'm',
+} as const;

package/src/helperComponents/Separator/styles.module.scss

@@ -1,3 +1,4 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-button-buttonFunction';
 @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-dropList';
 @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
 
@@ -15,8 +16,15 @@ $typography-secondary: (
   'l': $light-title-m,
 );
 
+$button-size: (
+  's': 'xs',
+  'm': 's',
+  'l': 'm',
+);
+
+$containerSize: 1px;
+
 .separatorWithLabel {
-  overflow: hidden;
   display: flex;
   gap: $dimension-1m;
   align-items: flex-end;
@@ -72,3 +80,35 @@ hr.divider {
   width: auto;
   min-width: 0;
 }
+
+.selectButton {
+  display: flex;
+  justify-content: flex-end;
+
+  &[data-weight='primary'] {
+    --divider-height: #{$containerSize};
+  }
+
+  &[data-weight='secondary'] {
+    --divider-height: #{calc($containerSize / 2)};
+  }
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      transform: translateY(
+        calc(
+          (
+              simple-var(
+                  $button-function,
+                  'container',
+                  simple-var($button-size, $size),
+                  'label-only',
+                  'height'
+                ) - simple-var($theme-variables, 'sans', 'label', $size, 'line-height')
+            ) /
+            2 - var(--divider-height, 0)
+        )
+      );
+    }
+  }
+}

package/src/helperComponents/index.ts

@@ -2,3 +2,4 @@ export * from './CollapseBlockPrivate';
 export * from './Separator';
 export * from './HiddenTabButton';
 export * from './ListEmptyState';
+export * from './ItemContent';

package/src/index.ts

@@ -1,4 +1,6 @@
 export * from './components';
-export { useFuzzySearch } from './hooks';
+
 export type { SearchState } from './types';
-export { extractChildIds, flattenItems } from './utils';
+export { kindFlattenItems } from './components/Items';
+
+export * from './helperComponents/ItemContent';

package/src/types.ts

@@ -2,9 +2,9 @@ import { RefObject } from 'react';
 
 export type SearchState = {
   placeholder?: string;
+  loading?: boolean;
   value?: string;
   onChange(value: string): void;
-  loading?: boolean;
 };
 
 export type ScrollProps = {

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

@@ -1,19 +0,0 @@
-import { KeyboardEvent, RefObject } from 'react';
-type UseKeyboardNavigationProps = {
-    ids: Array<number | string>;
-    expandedIds: Array<number | string>;
-    itemRefs?: RefObject<HTMLElement>[];
-    id?: string | number;
-};
-export declare function useKeyboardNavigation({ ids, expandedIds, itemRefs, id }: UseKeyboardNavigationProps): {
-    activeFocusIndex: number;
-    setActiveFocusIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
-    openNestedIndex: number;
-    setOpenNestedIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
-    resetNestedIndex: () => void;
-    resetActiveFocusIndex: () => void;
-    handleListKeyDown: (e: KeyboardEvent<HTMLElement>) => void;
-    open: boolean;
-    setOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-};
-export {};

package/dist/components/Items/NextListItem/hooks.js

@@ -1,80 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-import { useParentListContext } from '../../Lists/contexts';
-export function useKeyboardNavigation({ ids, expandedIds, itemRefs, id }) {
-    const { triggerRef, parentResetNestedIndex, parentIds, parentItemRefs, parentOpenNestedIndex } = useParentListContext();
-    const [activeFocusIndex, setActiveFocusIndex] = useState(-1);
-    const [openNestedIndex, setOpenNestedIndex] = useState(-1);
-    const [open, setOpen] = useState(false);
-    const handleListKeyDown = (e) => {
-        var _a, _b;
-        switch (e.key) {
-            case 'ArrowDown': {
-                setActiveFocusIndex(activeIndex => Math.min(activeIndex + 1, ids.length - 1));
-                e.stopPropagation();
-                e.preventDefault();
-                return;
-            }
-            case 'ArrowUp': {
-                setActiveFocusIndex(activeIndex => Math.max(activeIndex - 1, 0));
-                e.preventDefault();
-                e.stopPropagation();
-                return;
-            }
-            case 'ArrowRight': {
-                e.stopPropagation();
-                e.preventDefault();
-                if (expandedIds.includes(ids[activeFocusIndex])) {
-                    setOpenNestedIndex(activeFocusIndex);
-                }
-                return;
-            }
-            case 'ArrowLeft': {
-                (_a = parentItemRefs === null || parentItemRefs === void 0 ? void 0 : parentItemRefs[parentOpenNestedIndex].current) === null || _a === void 0 ? void 0 : _a.focus();
-                parentResetNestedIndex === null || parentResetNestedIndex === void 0 ? void 0 : parentResetNestedIndex();
-                setActiveFocusIndex(-1);
-                setOpenNestedIndex(-1);
-                setOpen(false);
-                e.stopPropagation();
-                e.preventDefault();
-                return;
-            }
-            case 'Tab': {
-                (_b = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) === null || _b === void 0 ? void 0 : _b.focus();
-                parentResetNestedIndex === null || parentResetNestedIndex === void 0 ? void 0 : parentResetNestedIndex();
-                setActiveFocusIndex(-1);
-                setOpen(false);
-                e.preventDefault();
-                return;
-            }
-            default: {
-                break;
-            }
-        }
-    };
-    useEffect(() => {
-        var _a, _b;
-        (_b = (_a = itemRefs === null || itemRefs === void 0 ? void 0 : itemRefs[activeFocusIndex]) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.focus();
-    }, [activeFocusIndex, itemRefs]);
-    useEffect(() => {
-        if (parentIds[parentOpenNestedIndex] === id && openNestedIndex === -1) {
-            setOpen(true);
-            setActiveFocusIndex(activeIndex => (activeIndex === -1 ? 0 : activeIndex));
-        }
-    }, [id, openNestedIndex, parentIds, parentOpenNestedIndex]);
-    const resetNestedIndex = () => {
-        setActiveFocusIndex(openNestedIndex);
-        setOpenNestedIndex(-1);
-    };
-    const resetActiveFocusIndex = useCallback(() => setActiveFocusIndex(-1), []);
-    return {
-        activeFocusIndex,
-        setActiveFocusIndex,
-        openNestedIndex,
-        setOpenNestedIndex,
-        resetNestedIndex,
-        resetActiveFocusIndex,
-        handleListKeyDown,
-        open,
-        setOpen,
-    };
-}

package/dist/components/Lists/contexts/ListProvider.d.ts

@@ -1,17 +0,0 @@
-import { ReactNode } from 'react';
-export type ListContextType = {
-    /** Размер списка */
-    size?: 's' | 'm' | 'l';
-    /** Отображать ли маркер у выбранного жлемента списка */
-    marker?: boolean;
-};
-export type ListContextPrivateType = {
-    parent?: 'list' | 'droplist';
-};
-type Child = {
-    children: ReactNode;
-};
-export declare const ListContext: import("react").Context<ListContextType & ListContextPrivateType>;
-export declare const useListContext: () => ListContextType & ListContextPrivateType;
-export declare function ListContextProvider({ children, ...props }: ListContextType & Child & ListContextPrivateType): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/Lists/contexts/ParentListProvider.d.ts

@@ -1,18 +0,0 @@
-import { RefObject } from 'react';
-export type ParentListContextType = {
-    parentActiveFocusIndex: number;
-    parentSetActiveFocusIndex?(idx: number): void;
-    parentResetActiveFocusIndex?(): void;
-    parentIds: Array<string | number>;
-    parentExpandedIds: Array<string | number>;
-    parentItemRefs: Array<RefObject<HTMLElement>>;
-    parentOpenNestedIndex: number;
-    parentResetNestedIndex?(): void;
-    openCollapsedItems?: Array<string | number>;
-    toggleOpenCollapsedItems?(id: string | number): void;
-    triggerRef?: RefObject<HTMLElement>;
-    parentRef?: RefObject<HTMLElement>;
-};
-export declare const ParentListContext: import("react").Context<ParentListContextType>;
-export declare const useParentListContext: () => ParentListContextType;
-export declare function ParentListProvider(): null;

package/dist/components/Lists/contexts/ParentListProvider.js

@@ -1,12 +0,0 @@
-import { createContext, useContext } from 'react';
-export const ParentListContext = createContext({
-    parentActiveFocusIndex: -1,
-    parentOpenNestedIndex: -1,
-    parentIds: [],
-    parentExpandedIds: [],
-    parentItemRefs: [],
-});
-export const useParentListContext = () => useContext(ParentListContext);
-export function ParentListProvider() {
-    return null;
-}

package/dist/hooks.d.ts

@@ -1,5 +0,0 @@
-import { ItemProps } from './components/Items';
-/**
- * Нечеткий поиск среди айтемов по полям 'content.option', 'content.caption', 'content.description', 'label'
- */
-export declare function useFuzzySearch(items: ItemProps[], minSearchInputLength?: number): (search: string) => ItemProps[];

package/dist/hooks.js

@@ -1,15 +0,0 @@
-import FuzzySearch from 'fuzzy-search';
-import { useCallback } from 'react';
-import { flattenItems } from './utils';
-const DEFAULT_MIN_SEARCH_INPUT_LENGTH = 2;
-/**
- * Нечеткий поиск среди айтемов по полям 'content.option', 'content.caption', 'content.description', 'label'
- */
-export function useFuzzySearch(items, minSearchInputLength) {
-    return useCallback((search) => {
-        const searcher = new FuzzySearch(flattenItems(items), ['content.option', 'content.caption', 'content.description', 'label'], {});
-        return search.length > (minSearchInputLength !== null && minSearchInputLength !== void 0 ? minSearchInputLength : DEFAULT_MIN_SEARCH_INPUT_LENGTH)
-            ? searcher.search(search)
-            : items;
-    }, [items, minSearchInputLength]);
-}

package/dist/utils.d.ts

@@ -1,30 +0,0 @@
-import { RefObject } from 'react';
-import { AccordionItemProps, BaseItemProps, ItemProps, NextListItemProps } from './components/Items';
-type WithCollapsedItemsProps = {
-    items: ItemProps[];
-    openCollapsedItems: Array<number | string>;
-};
-export declare function withCollapsedItems({ items, openCollapsedItems }: WithCollapsedItemsProps): {
-    items: ItemProps[];
-    itemRefs: RefObject<HTMLElement>[];
-    ids: (string | number)[];
-    expandedIds: (string | number)[];
-};
-export declare function extractItemRefs(items: ItemProps[]): RefObject<HTMLElement>[];
-/**
- * Функция возвращает массив id дочерних items
- * @function  extractItemIds
- */
-export declare function extractItemIds(items: ItemProps[]): Array<string | number>;
-export declare function extractChildIds({ items }: {
-    items: ItemProps[];
-}): Array<string | number>;
-export declare function extractAllChildIds({ items }: {
-    items: ItemProps[];
-}): Array<string | number>;
-/**
- *  Функция разворачивает массив айтемов в плоский список
- *  @function  flattenItems
- */
-export declare function flattenItems(items: ItemProps[]): (BaseItemProps | AccordionItemProps | NextListItemProps)[];
-export {};