@snack-uikit/list 0.3.5 → 0.4.0

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

@@ -1,6 +1,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';
@@ -9,6 +10,16 @@ type CollapseState = {
     onChange?(value: (string | number)[]): void;
     defaultValue?: (string | number)[];
 };
+export type EmptyState = {
+    dataFiltered?: boolean;
+    dataError?: boolean;
+    /** Экран при отстутствии данных */
+    noDataState?: EmptyStateProps;
+    /** Экран при отстутствии результатов поиска или фильтров */
+    noResultsState?: EmptyStateProps;
+    /** Экран при ошибке запроса */
+    errorDataState?: EmptyStateProps;
+};
 export type ListProps = WithSupportProps<{
     /** Основные элементы списка */
     items: ItemProps[];
@@ -18,19 +29,13 @@ 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;
     /** Настройки раскрытия элементов */
@@ -38,12 +43,20 @@ export type ListProps = WithSupportProps<{
     /** CSS-класс */
     className?: string;
     onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
-} & SelectionState & ListContextType & ScrollProps>;
+    /** Флаг, отвещающий за состояние загрузки списка */
+    loading?: boolean;
+} & SelectionState & ListContextType & 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'>;
 export type ListPrivateProps = ListProps & ListContextPrivateType & {
     nested?: boolean;

package/dist/components/index.d.ts

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

package/dist/components/index.js

@@ -1 +1,2 @@
 export * from './Lists';
+export { useGroupItemSelection } from './Items/hooks';

package/dist/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'>;
+export type ListEmptyState = {
+    emptyStates: {
+        noDataState: EmptyStateProps;
+        noResultsState: EmptyStateProps;
+        errorDataState: EmptyStateProps;
+    };
+    loading?: boolean;
+    dataError?: boolean;
+    dataFiltered?: boolean;
+    itemsLength: number;
+};
+export declare function ListEmptyState({ dataError, dataFiltered, itemsLength, emptyStates, loading }: ListEmptyState): import("react/jsx-runtime").JSX.Element | null;

package/dist/helperComponents/ListEmptyState/ListEmptyState.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { InfoBlock } from '@snack-uikit/info-block';
+import styles from './styles.module.css';
+export function ListEmptyState({ dataError, dataFiltered, itemsLength, emptyStates, loading }) {
+    if (itemsLength || loading) {
+        return null;
+    }
+    return (_jsxs("div", { className: styles.listEmptyStateWrapper, children: [dataError && _jsx(InfoBlock, Object.assign({}, emptyStates.errorDataState, { size: 's', align: 'vertical' })), !dataError && dataFiltered && (_jsx(InfoBlock, Object.assign({}, emptyStates.noResultsState, { size: 's', align: 'vertical', "data-test-id": 'list__no-results' }))), !dataError && !dataFiltered && (_jsx(InfoBlock, Object.assign({}, emptyStates.noDataState, { size: 's', align: 'vertical', "data-test-id": 'list__no-data' })))] }));
+}

package/dist/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/helperComponents/ListEmptyState/hooks.js

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

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

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

package/dist/helperComponents/ListEmptyState/index.js

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

package/dist/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/helperComponents/index.d.ts

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

package/dist/helperComponents/index.js

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

package/dist/hooks.d.ts

@@ -0,0 +1,2 @@
+import { ItemProps } from './components/Items';
+export declare function useFuzzySearch(items: ItemProps[], minSearchInputLength?: number): (search: string) => ItemProps[];

package/dist/hooks.js

@@ -0,0 +1,29 @@
+import FuzzySearch from 'fuzzy-search';
+import { useCallback } from 'react';
+import { isGroupItemProps } from './components/Items';
+function flattenItems(items) {
+    const flattenedItems = [];
+    function flatten(item) {
+        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, 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/index.d.ts

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

package/dist/index.js

@@ -1 +1,3 @@
 export * from './components';
+export { useFuzzySearch } from './hooks';
+export { extractChildIds } from './utils';

package/dist/utils.d.ts

@@ -15,4 +15,7 @@ export declare function extractItemIds(items: ItemProps[]): Array<string | numbe
 export declare function extractChildIds({ items }: {
     items: ItemProps[];
 }): Array<string | number>;
+export declare function extractAllChildIds({ items }: {
+    items: ItemProps[];
+}): Array<string | number>;
 export {};

package/dist/utils.js

@@ -71,3 +71,20 @@ export function extractChildIds({ items }) {
         return item.id && !isGroupItemProps(item) ? prev.concat([item.id]) : prev;
     }, []);
 }
+export function extractAllChildIds({ items }) {
+    return items
+        .filter(item => isAccordionItemProps(item) ||
+        isNextListItemProps(item) ||
+        isGroupItemProps(item) ||
+        (isBaseItemProps(item) && !item.inactive))
+        .reduce((prev, item) => {
+        var _a;
+        if (isAccordionItemProps(item) || isNextListItemProps(item)) {
+            return prev.concat([(_a = item.id) !== null && _a !== void 0 ? _a : '']).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;
+    }, []);
+}

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "List",
-  "version": "0.3.5",
+  "version": "0.4.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -35,15 +35,24 @@
     "@snack-uikit/divider": "3.0.1",
     "@snack-uikit/dropdown": "0.2.0",
     "@snack-uikit/icons": "0.20.1",
+    "@snack-uikit/info-block": "0.2.0",
     "@snack-uikit/loaders": "0.5.1",
+    "@snack-uikit/locale": "0.5.0",
     "@snack-uikit/scroll": "0.5.2",
     "@snack-uikit/search-private": "0.1.5",
     "@snack-uikit/toggles": "0.9.6",
     "@snack-uikit/truncate-string": "0.4.8",
     "@snack-uikit/utils": "3.2.0",
     "classnames": "2.5.1",
+    "fuzzy-search": "3.2.1",
     "merge-refs": "1.2.2",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "6aa9d988eebb76712315def67343b8b2e4cd268c"
+  "devDependencies": {
+    "@types/fuzzy-search": "2.1.5"
+  },
+  "peerDependencies": {
+    "@snack-uikit/locale": "*"
+  },
+  "gitHead": "ee199e2cdca1d24db821533512263dfe06365159"
 }

package/src/components/Items/AccordionItem/AccordionItem.tsx

@@ -1,7 +1,6 @@
 import { KeyboardEvent, MouseEvent } from 'react';
 
 import { ChevronDownSVG, ChevronUpSVG } from '@snack-uikit/icons';
-import { useToggleGroup } from '@snack-uikit/toggles';
 
 import { CollapseBlockPrivate } from '../../../helperComponents';
 import { CollapseContext, useCollapseContext, useParentListContext } from '../../Lists/contexts';
@@ -11,14 +10,13 @@ import { AccordionItemProps } from '../types';
 
 export function AccordionItem({ items: itemsProp, id, disabled, ...option }: AccordionItemProps) {
   const { level = 1 } = useCollapseContext();
-  const { toggleOpenCollapsedItems } = useParentListContext();
+  const { toggleOpenCollapsedItems, openCollapsedItems } = useParentListContext();
   const { isIndeterminate, checked, handleOnSelect } = useGroupItemSelection({ items: itemsProp, id, disabled });
 
-  const { isChecked: open, handleClick: handleChange } = useToggleGroup({ value: String(id) });
+  const isOpen = Boolean(openCollapsedItems?.includes(id ?? ''));
 
   const handleKeyDown = (e: KeyboardEvent<HTMLElement>) => {
     if (e.key === 'ArrowRight') {
-      handleChange();
       toggleOpenCollapsedItems?.(id ?? '');
 
       e.preventDefault();
@@ -29,7 +27,6 @@ export function AccordionItem({ items: itemsProp, id, disabled, ...option }: Acc
   const itemsJSX = useRenderItems(itemsProp);
 
   const handleItemClick = (e: MouseEvent<HTMLElement>) => {
-    handleChange();
     toggleOpenCollapsedItems?.(id ?? '');
     option.onClick?.(e);
   };
@@ -41,7 +38,7 @@ export function AccordionItem({ items: itemsProp, id, disabled, ...option }: Acc
           {...option}
           id={id}
           disabled={disabled}
-          expandIcon={open ? <ChevronUpSVG /> : <ChevronDownSVG />}
+          expandIcon={isOpen ? <ChevronUpSVG /> : <ChevronDownSVG />}
           onClick={handleItemClick}
           isParentNode
           onKeyDown={handleKeyDown}
@@ -49,7 +46,7 @@ export function AccordionItem({ items: itemsProp, id, disabled, ...option }: Acc
           onSelect={!disabled ? handleOnSelect : undefined}
         />
       }
-      expanded={open}
+      expanded={isOpen}
       data-test-id={`list__accordion-item-${id}`}
     >
       <CollapseContext.Provider value={{ level: level + 1 }}>{itemsJSX}</CollapseContext.Provider>

package/src/components/Items/BaseItem/BaseItem.tsx

@@ -113,6 +113,7 @@ export function BaseItem({
       data-checked={(isParentNode && (indeterminate || isChecked)) || (isChecked && !switchProp) || undefined}
       data-variant={mode || undefined}
       data-open={open || undefined}
+      data-disabled={disabled || undefined}
       aria-disabled={disabled || undefined}
       data-parent={parent || 'list'}
       onKeyDown={handleItemKeyDown}

package/src/components/Items/BaseItem/styles.module.scss

@@ -147,7 +147,7 @@ $typography: (
   }
 
   &[aria-disabled],
-  &:disabled {
+  &[data-disabled] {
     .option,
     .description,
     .caption,
@@ -155,7 +155,7 @@ $typography: (
       color: $sys-neutral-text-disabled;
     }
 
-    & .beforeContent {
+    .beforeContent {
       opacity: $opacity-a064;
     }
   }
@@ -181,15 +181,12 @@ $typography: (
 
     &:focus-visible {
       &[data-variant='single'] {
-        background-color: $sys-primary-background;
         outline-color: $sys-primary-accent-default;
       }
     }
 
-    &:disabled {
+    &[data-disabled] {
       &[data-variant='single'] {
-        background-color: $sys-neutral-background1-level;
-
         &::before {
           display: none;
         }

package/src/components/Items/hooks.tsx

@@ -1,6 +1,6 @@
 import { createRef, RefObject, useEffect, useMemo } from 'react';
 
-import { extractChildIds } from '../../utils';
+import { extractAllChildIds, extractChildIds } from '../../utils';
 import { useSelectionContext } from '../Lists/contexts';
 import { AccordionItem } from './AccordionItem';
 import { BaseItem } from './BaseItem';
@@ -12,20 +12,20 @@ import { addItemsIds, isAccordionItemProps, isGroupItemProps, isNextListItemProp
 export function useRenderItems(items: ItemProps[]) {
   return useMemo(
     () =>
-      items.map((item, idx) => {
+      items.map(item => {
         if (isGroupItemProps(item)) {
-          return <GroupItem {...item} key={item.id} />;
+          return <GroupItem {...item} key={item.label} />;
         }
 
         if (isAccordionItemProps(item)) {
-          return <AccordionItem {...item} key={idx} />;
+          return <AccordionItem {...item} key={item.key} />;
         }
 
         if (isNextListItemProps(item)) {
-          return <NextListItem {...item} key={item.id} />;
+          return <NextListItem {...item} key={item.key} />;
         }
 
-        return <BaseItem {...item} key={item.id} />;
+        return <BaseItem {...item} key={item.key} />;
       }),
     [items],
   );
@@ -63,12 +63,15 @@ type UseGroupItemSelectionProps = {
 
 export function useGroupItemSelection({ id, items, disabled }: UseGroupItemSelectionProps) {
   const { value, setValue, isSelectionMultiple } = useSelectionContext();
-  const childIds = useMemo(() => extractChildIds({ items }), [items]);
+  const { childIds, allChildIds } = useMemo(
+    () => ({ childIds: extractChildIds({ items }), allChildIds: extractAllChildIds({ items }) }),
+    [items],
+  );
 
   const isIndeterminate = isSelectionMultiple
-    ? childIds.some(childId => value?.includes(childId))
-    : childIds.includes(value ?? '');
-  const checked = isSelectionMultiple ? childIds.every(childId => value?.includes(childId)) : undefined;
+    ? allChildIds.some(childId => value?.includes(childId))
+    : allChildIds.includes(value ?? '');
+  const checked = isSelectionMultiple ? allChildIds.every(childId => value?.includes(childId)) : undefined;
 
   useEffect(() => {
     if (isSelectionMultiple) {

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

@@ -45,7 +45,7 @@ $sizes: 's', 'm', 'l';
 
     background-color: transparent;
   }
-
+  &[data-disabled],
   &:disabled {
     cursor: not-allowed;
     background-color: transparent;
@@ -61,7 +61,7 @@ $sizes: 's', 'm', 'l';
     }
   }
 
-  &:not([data-inactive]) {
+  &:not([data-inactive], [data-disabled]) {
     &[data-open],
     &[data-focused],
     &:hover,

package/src/components/Items/types.ts

@@ -59,6 +59,8 @@ export type BaseItemProps = WithSupportProps<{
    */
   switch?: boolean;
 
+  key?: string | number;
+
   itemWrapRender?(item: ReactNode): ReactNode;
 }>;
 

package/src/components/Items/utils.ts

@@ -49,14 +49,16 @@ export function getSlicedItems({
 
 export function addItemsIds(itemsProp: ItemProps[], prefix?: string | number): ItemProps[] {
   return itemsProp.map((item, idx) => {
-    const itemId = item.id ?? (prefix !== undefined ? [prefix, idx].join('-') : String(idx));
+    const autoId = prefix !== undefined ? [prefix, idx].join('-') : String(idx);
+    const itemId = item.id ?? autoId;
 
     if (isGroupItemProps(item)) {
-      return { ...item, id: itemId, items: addItemsIds(item.items, itemId) };
+      return { key: autoId, ...item, id: itemId, items: addItemsIds(item.items, itemId) };
     }
 
     if (isAccordionItemProps(item) || isNextListItemProps(item)) {
       return {
+        key: autoId,
         ...item,
         id: itemId,
         items: addItemsIds(item.items, itemId),
@@ -64,6 +66,6 @@ export function addItemsIds(itemsProp: ItemProps[], prefix?: string | number): I
       };
     }
 
-    return { ...item, id: itemId, itemRef: item.itemRef || createRef<HTMLElement>() };
+    return { key: autoId, ...item, id: itemId, itemRef: item.itemRef || createRef<HTMLElement>() };
   });
 }

package/src/components/Lists/Droplist/DropList.tsx

@@ -1,4 +1,4 @@
-import { cloneElement, isValidElement, KeyboardEvent, useCallback, useMemo, useRef } from 'react';
+import { cloneElement, isValidElement, KeyboardEvent, ReactNode, useCallback, useMemo, useRef } from 'react';
 import { useUncontrolledProp } from 'uncontrollable';
 
 import { Dropdown } from '@snack-uikit/dropdown';
@@ -36,12 +36,9 @@ export function Droplist({
   const [openCollapsedItems, setOpenCollapsedItems] = useUncontrolledProp<Array<number | string>>(
     collapse.value,
     collapse.defaultValue ?? [],
-    collapse.onChange
-      ? cb => {
-          collapse.onChange?.(cb(collapse.value));
-        }
-      : undefined,
+    collapse.onChange,
   );
+
   const { search: searchItem, footerRefs } = useItemsWithIds({
     search: hasSearch,
     footerActiveElementsRefs,
@@ -83,11 +80,9 @@ export function Droplist({
   const [open, setOpen] = useUncontrolledProp<boolean>(openProp, false, onOpenChange);
 
   const handleOpenChange = (open: boolean) => {
-    if (!open) {
-      resetNestedIndex();
-      resetActiveFocusIndex();
-      setOpenCollapsedItems([]);
-    }
+    resetNestedIndex();
+    resetActiveFocusIndex();
+    setOpenCollapsedItems([]);
 
     setOpen(open);
   };
@@ -109,7 +104,7 @@ export function Droplist({
     [setActiveFocusIndex, setOpen],
   );
 
-  const triggerElem = useMemo(() => {
+  const triggerElem: ReactNode = useMemo(() => {
     if (isValidElement(children)) {
       const props = typeof children.props === 'object' ? children.props : {};
 
@@ -120,6 +115,11 @@ export function Droplist({
         },
       });
     }
+
+    if (typeof children === 'function') {
+      return children({ onKeyDown });
+    }
+
     return children;
   }, [onKeyDown, children]);
 
@@ -138,6 +138,7 @@ export function Droplist({
           parentRef: listRef,
           parentResetNestedIndex: resetNestedIndex,
           parentResetActiveFocusIndex: resetActiveFocusIndex,
+          openCollapsedItems,
           toggleOpenCollapsedItems: id =>
             setOpenCollapsedItems((items: Array<string | number> | undefined = []) =>
               items.includes(id) ? items.filter(item => item !== id) : items?.concat([id]),

package/src/components/Lists/List/List.tsx

@@ -38,11 +38,7 @@ export const List = forwardRef<HTMLElement, ListProps>(
     const [openCollapsedItems, setOpenCollapsedItems] = useUncontrolledProp<Array<number | string>>(
       collapse.value,
       collapse.defaultValue ?? [],
-      collapse.onChange
-        ? cb => {
-            collapse.onChange?.(cb(collapse.value));
-          }
-        : undefined,
+      collapse.onChange,
     );
 
     const { search: searchItem, footerRefs } = useItemsWithIds({