@snack-uikit/list 0.3.5 → 0.4.1-preview-2484f987.0

package/src/components/Lists/ListPrivate/ListPrivate.tsx

@@ -3,9 +3,9 @@ import { ForwardedRef, forwardRef, RefObject, useMemo } from 'react';
 
 import { Spinner } from '@snack-uikit/loaders';
 import { Scroll } from '@snack-uikit/scroll';
-import { ToggleGroup } from '@snack-uikit/toggles';
 import { extractSupportProps } from '@snack-uikit/utils';
 
+import { ListEmptyState, useEmptyState } from '../../../helperComponents';
 import { PinBottomGroupItem, PinTopGroupItem, SearchItem, useRenderItems } from '../../Items';
 import { ListContextProvider } from '../contexts';
 import commonStyles from '../styles.module.scss';
@@ -30,13 +30,16 @@ export const ListPrivate = forwardRef<HTMLElement, ListPrivateProps>(
       scrollContainerRef,
       footer,
       loading,
-      noData = 'No data',
-      noResults = 'No results',
       size = 's',
-      marker,
+      marker = true,
       limitedScrollHeight,
       className,
       parent = 'list',
+      noDataState,
+      noResultsState,
+      errorDataState,
+      dataError,
+      dataFiltered,
       ...props
     },
     ref,
@@ -44,7 +47,10 @@ export const ListPrivate = forwardRef<HTMLElement, ListPrivateProps>(
     const itemsJSX = useRenderItems(items);
     const itemsPinTopJSX = useRenderItems(pinTop ?? []);
     const itemsPinBottomJSX = useRenderItems(pinBottom ?? []);
-    const hasNoItems = items.length + (pinTop?.length ?? 0) + (pinBottom?.length ?? 0) === 0;
+
+    const emptyStates = useEmptyState({ noDataState, noResultsState, errorDataState });
+
+    const hasNoItems = items.length === 0;
 
     const loadingJSX = useMemo(
       () =>
@@ -68,19 +74,17 @@ export const ListPrivate = forwardRef<HTMLElement, ListPrivateProps>(
         <div className={styles.content}>
           {itemsJSX}
           {loadingJSX}
-          {hasNoItems && !search?.value && !loading && (
-            <div className={commonStyles.infoBlock} data-test-id='list__no-data'>
-              {noData}
-            </div>
-          )}
-          {hasNoItems && search?.value && !loading && (
-            <div className={commonStyles.infoBlock} data-test-id='list__no-results'>
-              {noResults}
-            </div>
-          )}
+
+          <ListEmptyState
+            loading={loading}
+            dataError={dataError}
+            emptyStates={emptyStates}
+            itemsLength={items.length}
+            dataFiltered={dataFiltered ?? Boolean(search?.value)}
+          />
         </div>
       ),
-      [hasNoItems, itemsJSX, loading, loadingJSX, noData, noResults, search?.value],
+      [dataError, dataFiltered, emptyStates, items.length, itemsJSX, loading, loadingJSX, search?.value],
     );
 
     const listJSX = (
@@ -95,38 +99,36 @@ export const ListPrivate = forwardRef<HTMLElement, ListPrivateProps>(
         role='menu'
         {...extractSupportProps(props)}
       >
-        <ToggleGroup selectionMode={'multiple'}>
-          {(Number(pinTop?.length) > 0 || search) && (
-            <PinTopGroupItem>
-              {search && <SearchItem search={search} />}
-
-              {Number(pinTop?.length) > 0 && itemsPinTopJSX}
-            </PinTopGroupItem>
-          )}
-
-          {scroll ? (
-            <Scroll
-              className={cn({
-                [commonStyles.scrollContainerS]: scroll && limitedScrollHeight && size === 's',
-                [commonStyles.scrollContainerM]: scroll && limitedScrollHeight && size === 'm',
-                [commonStyles.scrollContainerL]: scroll && limitedScrollHeight && size === 'l',
-              })}
-              barHideStrategy='leave'
-              size={size === 's' ? 's' : 'm'}
-              ref={scrollContainerRef}
-            >
-              {content}
-
-              <div className={styles.scrollStub} ref={scrollRef as RefObject<HTMLDivElement>} />
-            </Scroll>
-          ) : (
-            <>{content}</>
-          )}
-
-          {Number(pinBottom?.length) > 0 && <PinBottomGroupItem>{itemsPinBottomJSX}</PinBottomGroupItem>}
-
-          {footer && <div className={styles.footer}>{footer}</div>}
-        </ToggleGroup>
+        {(Number(pinTop?.length) > 0 || search) && (
+          <PinTopGroupItem>
+            {search && <SearchItem search={search} />}
+
+            {Number(pinTop?.length) > 0 && itemsPinTopJSX}
+          </PinTopGroupItem>
+        )}
+
+        {scroll ? (
+          <Scroll
+            className={cn({
+              [commonStyles.scrollContainerS]: scroll && limitedScrollHeight && size === 's',
+              [commonStyles.scrollContainerM]: scroll && limitedScrollHeight && size === 'm',
+              [commonStyles.scrollContainerL]: scroll && limitedScrollHeight && size === 'l',
+            })}
+            barHideStrategy='never'
+            size={size === 's' ? 's' : 'm'}
+            ref={scrollContainerRef}
+          >
+            {content}
+
+            <div className={styles.scrollStub} ref={scrollRef as RefObject<HTMLDivElement>} />
+          </Scroll>
+        ) : (
+          <>{content}</>
+        )}
+
+        {Number(pinBottom?.length) > 0 && <PinBottomGroupItem>{itemsPinBottomJSX}</PinBottomGroupItem>}
+
+        {footer && <div className={styles.footer}>{footer}</div>}
       </ul>
     );
 

package/src/components/Lists/contexts/SelectionProvider.tsx

@@ -1,9 +1,9 @@
 import { createContext, ReactNode, useCallback, useContext } from 'react';
 import { useUncontrolledProp } from 'uncontrollable';
 
-type SelectionSingleValueType = string | number | undefined;
+export type SelectionSingleValueType = string | number | undefined;
 
-type SelectionSingleState = {
+export type SelectionSingleState = {
   /** Начальное состояние */
   defaultValue?: SelectionSingleValueType;
   /** Controlled состояние */
@@ -24,7 +24,7 @@ export type SelectionSingleProps = {
   isSelectionMultiple: false;
 } & SelectionSingleState;
 
-type SelectionMultipleState = {
+export type SelectionMultipleState = {
   /** Начальное состояние */
   defaultValue?: SelectionSingleValueType[];
   /** Controlled состояние */
@@ -128,12 +128,10 @@ function SelectionMultipleProvider({
   onChange: onChangeProp,
   children,
 }: SelectionMultipleProps & Child) {
-  const [value, setValue] = useUncontrolledProp<SelectionSingleValueType[]>(valueProp, defaultValue, cb => {
-    onChangeProp?.(cb(value));
-  });
+  const [value, setValue] = useUncontrolledProp<SelectionSingleValueType[]>(valueProp, defaultValue, onChangeProp);
 
   const onChange = useCallback(
-    (newValue: SelectionSingleValueType) =>
+    (newValue: SelectionSingleValueType) => {
       setValue((oldValues: SelectionSingleValueType[]) => {
         if (Array.isArray(oldValues)) {
           if (oldValues.includes(newValue)) {
@@ -143,8 +141,13 @@ function SelectionMultipleProvider({
           return oldValues.concat(newValue);
         }
 
+        if (oldValues === undefined) {
+          return Array.isArray(newValue) ? newValue : [newValue];
+        }
+
         return undefined;
-      }),
+      });
+    },
     [setValue],
   );
 

package/src/components/Lists/index.ts

@@ -3,8 +3,11 @@ export * from './List';
 
 export type { ListProps, DroplistProps } from './types';
 export type {
+  SelectionSingleState,
+  SelectionMultipleState,
   SelectionSingleProps,
   SelectionMultipleProps,
   isSelectionSingleProps,
   isSelectionMultipleProps,
+  SelectionSingleValueType,
 } from './contexts';

package/src/components/Lists/styles.module.scss

@@ -64,15 +64,3 @@
   height: auto;
   max-height: calc($dimension-1m * 48); // 384px
 }
-
-.infoBlock {
-  @include composite-var($sans-body-s);
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  padding: $dimension-1m;
-
-  color: $sys-neutral-text-support;
-}

package/src/components/Lists/types.ts

@@ -3,6 +3,7 @@ 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 { ItemProps } from '../Items';
 import { ListContextPrivateType, ListContextType, SelectionState } from './contexts';
@@ -13,6 +14,18 @@ type CollapseState = {
   defaultValue?: (string | number)[];
 };
 
+export type EmptyState = {
+  dataFiltered?: boolean;
+  dataError?: boolean;
+
+  /** Экран при отстутствии данных */
+  noDataState?: EmptyStateProps;
+  /** Экран при отстутствии результатов поиска или фильтров */
+  noResultsState?: EmptyStateProps;
+  /** Экран при ошибке запроса */
+  errorDataState?: EmptyStateProps;
+};
+
 export type ListProps = WithSupportProps<
   {
     /** Основные элементы списка */
@@ -23,19 +36,14 @@ export type ListProps = WithSupportProps<
     pinBottom?: ItemProps[];
     /**
      * Кастомизируемый элемент в конце списка
-     * @type ReactElement
+     * @type ReactNode;
      */
     footer?: ReactNode;
     /** Список ссылок на кастомные элементы, помещенные в специальную секцию внизу списка  */
     footerActiveElementsRefs?: RefObject<HTMLElement>[];
     /** Настройки поисковой строки */
     search?: SearchState;
-    /** Флаг, отвещающий за состояние загрузки списка */
-    loading?: boolean;
-    /** Текст для состояния "Отсутсвие данных" */
-    noData?: string;
-    /** Текст для состояния "Отсутсвие результата" при поиске */
-    noResults?: string;
+
     /** Tab Index */
     tabIndex?: number;
     /** Настройки раскрытия элементов */
@@ -43,16 +51,25 @@ export type ListProps = WithSupportProps<
     /** CSS-класс */
     className?: string;
     onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
+
+    /** Флаг, отвещающий за состояние загрузки списка */
+    loading?: boolean;
   } & SelectionState &
     ListContextType &
-    ScrollProps
+    ScrollProps &
+    EmptyState
 >;
 
 export type DroplistProps = {
   /** Ссылка на элемент-триггер для дроплиста */
   triggerElemRef?: RefObject<HTMLElement>;
-  /** Триггер для дроплиста */
-  children?: ReactNode;
+
+  /** Триггер для дроплиста
+   * @type ReactNode | ({onKeyDown}) => ReactNode
+   *
+   * Рендер функция принимает аргументы `onKeyDown` - хендлер ввода, для поддержки управления с клавиатуры
+   */
+  children: ReactNode | ((params: { onKeyDown?: (e: KeyboardEvent<HTMLElement>) => void }) => ReactNode);
 } & Pick<DropdownProps, 'trigger' | 'placement' | 'widthStrategy' | 'open' | 'onOpenChange'> &
   Omit<ListProps, 'tabIndex' | 'onKeyDown'>;
 

package/src/components/index.ts

@@ -1,3 +1,5 @@
 export * from './Lists';
 
 export type { AccordionItemProps, NextListItemProps, BaseItemProps, GroupItemProps, ItemProps } from './Items/types';
+
+export { useGroupItemSelection } from './Items/hooks';

package/src/helperComponents/ListEmptyState/ListEmptyState.tsx

@@ -0,0 +1,35 @@
+import { InfoBlock, InfoBlockProps } from '@snack-uikit/info-block';
+
+import styles from './styles.module.scss';
+
+export type EmptyStateProps = Pick<InfoBlockProps, 'description' | 'icon' | 'data-test-id'>;
+
+export type ListEmptyState = {
+  emptyStates: {
+    noDataState: EmptyStateProps;
+    noResultsState: EmptyStateProps;
+    errorDataState: EmptyStateProps;
+  };
+  loading?: boolean;
+  dataError?: boolean;
+  dataFiltered?: boolean;
+  itemsLength: number;
+};
+
+export function ListEmptyState({ dataError, dataFiltered, itemsLength, emptyStates, loading }: ListEmptyState) {
+  if (itemsLength || loading) {
+    return null;
+  }
+
+  return (
+    <div className={styles.listEmptyStateWrapper}>
+      {dataError && <InfoBlock {...emptyStates.errorDataState} size='s' align='vertical' />}
+      {!dataError && dataFiltered && (
+        <InfoBlock {...emptyStates.noResultsState} size='s' align='vertical' data-test-id='list__no-results' />
+      )}
+      {!dataError && !dataFiltered && (
+        <InfoBlock {...emptyStates.noDataState} size='s' align='vertical' data-test-id='list__no-data' />
+      )}
+    </div>
+  );
+}

package/src/helperComponents/ListEmptyState/hooks.ts

@@ -0,0 +1,42 @@
+import { useMemo } from 'react';
+
+import { CrossSVG } from '@snack-uikit/icons';
+import { useLocale } from '@snack-uikit/locale';
+
+import { EmptyStateProps } from './ListEmptyState';
+
+export function useEmptyState({
+  noDataState: noDataStateProp,
+  noResultsState: noResultsStateProp,
+  errorDataState: errorDataStateProp,
+}: {
+  noDataState?: EmptyStateProps;
+  noResultsState?: EmptyStateProps;
+  errorDataState?: EmptyStateProps;
+}) {
+  const { t } = useLocale('List');
+
+  return useMemo(() => {
+    const noDataState: EmptyStateProps = {
+      description: t('noData.description'),
+      ...noDataStateProp,
+    };
+
+    const noResultsState: EmptyStateProps = {
+      description: t('noResults.description'),
+      ...noResultsStateProp,
+    };
+
+    const errorDataState: EmptyStateProps = {
+      icon: { icon: CrossSVG, appearance: 'red', decor: true },
+      description: t('errorData.description'),
+      ...errorDataStateProp,
+    };
+
+    return {
+      noDataState,
+      noResultsState,
+      errorDataState,
+    };
+  }, [errorDataStateProp, noDataStateProp, noResultsStateProp, t]);
+}

package/src/helperComponents/ListEmptyState/index.ts

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

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

@@ -0,0 +1,11 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+
+.listEmptyStateWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  box-sizing: border-box;
+  padding: $dimension-1m;
+}

package/src/helperComponents/index.ts

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

package/src/hooks.ts

@@ -0,0 +1,45 @@
+import FuzzySearch from 'fuzzy-search';
+import { useCallback } from 'react';
+
+import { isGroupItemProps, ItemProps } from './components/Items';
+
+function flattenItems(items: ItemProps[]): ItemProps[] {
+  const flattenedItems: ItemProps[] = [];
+
+  function flatten(item: ItemProps) {
+    if (!isGroupItemProps(item)) {
+      flattenedItems.push(item);
+    }
+
+    if ('items' in item) {
+      for (const nestedItem of item.items) {
+        flatten(nestedItem);
+      }
+    }
+  }
+
+  for (const item of items) {
+    flatten(item);
+  }
+
+  return flattenedItems;
+}
+
+const DEFAULT_MIN_SEARCH_INPUT_LENGTH = 2;
+
+export function useFuzzySearch(items: ItemProps[], minSearchInputLength?: number) {
+  return useCallback(
+    (search: string) => {
+      const searcher = new FuzzySearch(
+        flattenItems(items),
+        ['content.option', 'content.caption', 'content.description', 'label'],
+        {},
+      );
+
+      return search.length > (minSearchInputLength ?? DEFAULT_MIN_SEARCH_INPUT_LENGTH)
+        ? searcher.search(search)
+        : items;
+    },
+    [items, minSearchInputLength],
+  );
+}

package/src/index.ts

@@ -1 +1,4 @@
 export * from './components';
+export { useFuzzySearch } from './hooks';
+export type { SearchState } from './types';
+export { extractChildIds } from './utils';

package/src/utils.ts

@@ -113,3 +113,28 @@ export function extractChildIds({ items }: { items: ItemProps[] }): Array<string
       [] as Array<string | number>,
     );
 }
+
+export function extractAllChildIds({ items }: { items: ItemProps[] }): Array<string | number> {
+  return items
+    .filter(
+      item =>
+        isAccordionItemProps(item) ||
+        isNextListItemProps(item) ||
+        isGroupItemProps(item) ||
+        (isBaseItemProps(item) && !item.inactive),
+    )
+    .reduce(
+      (prev: Array<string | number>, item: ItemProps) => {
+        if (isAccordionItemProps(item) || isNextListItemProps(item)) {
+          return prev.concat([item.id ?? '']).concat(extractAllChildIds({ items: item.items }));
+        }
+
+        if (isGroupItemProps(item)) {
+          return prev.concat(extractAllChildIds({ items: item.items }));
+        }
+
+        return item.id && !isGroupItemProps(item) ? prev.concat([item.id]) : prev;
+      },
+      [] as Array<string | number>,
+    );
+}