@snack-uikit/list 0.11.1-preview-5d3667ec.0 → 0.11.2

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 {};

package/dist/utils.js

@@ -1,115 +0,0 @@
-import { isAccordionItemProps, isBaseItemProps, isGroupItemProps, isNextListItemProps, } from './components/Items';
-export function withCollapsedItems({ items, openCollapsedItems }) {
-    let itemRefs = [];
-    let newItems = [];
-    let ids = [];
-    let expandedIds = [];
-    items.forEach(item => {
-        var _a;
-        if (((isBaseItemProps(item) && !item.inactive) || isNextListItemProps(item) || isAccordionItemProps(item)) &&
-            !item.disabled) {
-            newItems = newItems.concat([item]);
-            ids = ids.concat([(_a = item.id) !== null && _a !== void 0 ? _a : '']);
-            if (item.itemRef) {
-                itemRefs = itemRefs.concat([item.itemRef]);
-            }
-        }
-        if (isNextListItemProps(item) && item.id && !item.disabled) {
-            expandedIds = expandedIds.concat(item.id);
-        }
-        if (isGroupItemProps(item)) {
-            const { itemRefs: nestedItemsRefs, ids: nestedIds } = withCollapsedItems({
-                items: item.items,
-                openCollapsedItems,
-            });
-            ids = ids.concat(nestedIds);
-            itemRefs = itemRefs.concat(nestedItemsRefs);
-        }
-        if (isAccordionItemProps(item) && item.id && openCollapsedItems.includes(item.id)) {
-            const { itemRefs: nestedItemsRefs, ids: nestedIds, items: nestedItems, expandedIds: nestedExpandedIds, } = withCollapsedItems({
-                items: item.items,
-                openCollapsedItems,
-            });
-            ids = ids.concat(nestedIds);
-            newItems = newItems.concat(nestedItems);
-            itemRefs = itemRefs.concat(nestedItemsRefs);
-            expandedIds = expandedIds.concat(nestedExpandedIds);
-        }
-    });
-    return { items, itemRefs, ids, expandedIds };
-}
-export function extractItemRefs(items) {
-    return items.reduce((prev, item) => {
-        if (isGroupItemProps(item)) {
-            return prev.concat(extractItemRefs(item.items));
-        }
-        return item.itemRef ? prev.concat([item.itemRef]) : prev;
-    }, []);
-}
-/**
- * Функция возвращает массив id дочерних items
- * @function  extractItemIds
- */
-export function extractItemIds(items) {
-    return items.reduce((prev, item) => {
-        if (isGroupItemProps(item)) {
-            return prev.concat(extractItemIds(item.items));
-        }
-        return item.id ? prev.concat([item.id]) : prev;
-    }, []);
-}
-export function extractChildIds({ items }) {
-    return items
-        .filter(item => isAccordionItemProps(item) ||
-        isNextListItemProps(item) ||
-        isGroupItemProps(item) ||
-        (isBaseItemProps(item) && !item.disabled && !item.inactive))
-        .reduce((prev, item) => {
-        var _a;
-        if (isAccordionItemProps(item) || isNextListItemProps(item)) {
-            return prev.concat([(_a = item.id) !== null && _a !== void 0 ? _a : '']).concat(extractChildIds({ items: item.items }));
-        }
-        if (isGroupItemProps(item)) {
-            return prev.concat(extractChildIds({ items: item.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;
-    }, []);
-}
-/**
- *  Функция разворачивает массив айтемов в плоский список
- *  @function  flattenItems
- */
-export 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;
-}

package/src/components/Items/NextListItem/hooks.ts

@@ -1,105 +0,0 @@
-import { KeyboardEvent, RefObject, useCallback, useEffect, useState } from 'react';
-
-import { useParentListContext } from '../../Lists/contexts';
-
-type UseKeyboardNavigationProps = {
-  ids: Array<number | string>;
-  expandedIds: Array<number | string>;
-  itemRefs?: RefObject<HTMLElement>[];
-  id?: string | number;
-};
-
-export function useKeyboardNavigation({ ids, expandedIds, itemRefs, id }: UseKeyboardNavigationProps) {
-  const { triggerRef, parentResetNestedIndex, parentIds, parentItemRefs, parentOpenNestedIndex } =
-    useParentListContext();
-
-  const [activeFocusIndex, setActiveFocusIndex] = useState<number>(-1);
-  const [openNestedIndex, setOpenNestedIndex] = useState<number>(-1);
-  const [open, setOpen] = useState<boolean>(false);
-
-  const handleListKeyDown = (e: KeyboardEvent<HTMLElement>) => {
-    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': {
-        parentItemRefs?.[parentOpenNestedIndex].current?.focus();
-
-        parentResetNestedIndex?.();
-        setActiveFocusIndex(-1);
-        setOpenNestedIndex(-1);
-
-        setOpen(false);
-
-        e.stopPropagation();
-        e.preventDefault();
-        return;
-      }
-
-      case 'Tab': {
-        triggerRef?.current?.focus();
-        parentResetNestedIndex?.();
-        setActiveFocusIndex(-1);
-        setOpen(false);
-        e.preventDefault();
-
-        return;
-      }
-
-      default: {
-        break;
-      }
-    }
-  };
-
-  useEffect(() => {
-    itemRefs?.[activeFocusIndex]?.current?.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/src/components/Lists/contexts/CollapseProvider.ts

@@ -1,9 +0,0 @@
-import { createContext, useContext } from 'react';
-
-export type CollapseContextType = {
-  level?: number;
-};
-
-export const CollapseContext = createContext<CollapseContextType>({});
-
-export const useCollapseContext = () => useContext(CollapseContext);

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

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

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

@@ -1,35 +0,0 @@
-import { createContext, RefObject, useContext } 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 const ParentListContext = createContext<ParentListContextType>({
-  parentActiveFocusIndex: -1,
-  parentOpenNestedIndex: -1,
-
-  parentIds: [],
-  parentExpandedIds: [],
-  parentItemRefs: [],
-});
-
-export const useParentListContext = () => useContext(ParentListContext);
-
-export function ParentListProvider() {
-  return null;
-}

package/src/hooks.ts

@@ -1,27 +0,0 @@
-import FuzzySearch from 'fuzzy-search';
-import { useCallback } from 'react';
-
-import { ItemProps } from './components/Items';
-import { flattenItems } from './utils';
-
-const DEFAULT_MIN_SEARCH_INPUT_LENGTH = 2;
-
-/**
- * Нечеткий поиск среди айтемов по полям 'content.option', 'content.caption', 'content.description', 'label'
- */
-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/utils.ts

@@ -1,175 +0,0 @@
-import { RefObject } from 'react';
-
-import {
-  AccordionItemProps,
-  BaseItemProps,
-  isAccordionItemProps,
-  isBaseItemProps,
-  isGroupItemProps,
-  isNextListItemProps,
-  ItemProps,
-  NextListItemProps,
-} from './components/Items';
-
-type WithCollapsedItemsProps = {
-  items: ItemProps[];
-  openCollapsedItems: Array<number | string>;
-};
-
-export function withCollapsedItems({ items, openCollapsedItems }: WithCollapsedItemsProps) {
-  let itemRefs: RefObject<HTMLElement>[] = [];
-  let newItems: ItemProps[] = [];
-  let ids: Array<string | number> = [];
-  let expandedIds: Array<string | number> = [];
-
-  items.forEach(item => {
-    if (
-      ((isBaseItemProps(item) && !item.inactive) || isNextListItemProps(item) || isAccordionItemProps(item)) &&
-      !item.disabled
-    ) {
-      newItems = newItems.concat([item]);
-      ids = ids.concat([item.id ?? '']);
-
-      if (item.itemRef) {
-        itemRefs = itemRefs.concat([item.itemRef]);
-      }
-    }
-
-    if (isNextListItemProps(item) && item.id && !item.disabled) {
-      expandedIds = expandedIds.concat(item.id);
-    }
-
-    if (isGroupItemProps(item)) {
-      const { itemRefs: nestedItemsRefs, ids: nestedIds } = withCollapsedItems({
-        items: item.items,
-        openCollapsedItems,
-      });
-
-      ids = ids.concat(nestedIds);
-
-      itemRefs = itemRefs.concat(nestedItemsRefs);
-    }
-
-    if (isAccordionItemProps(item) && item.id && openCollapsedItems.includes(item.id)) {
-      const {
-        itemRefs: nestedItemsRefs,
-        ids: nestedIds,
-        items: nestedItems,
-        expandedIds: nestedExpandedIds,
-      } = withCollapsedItems({
-        items: item.items,
-        openCollapsedItems,
-      });
-
-      ids = ids.concat(nestedIds);
-      newItems = newItems.concat(nestedItems);
-      itemRefs = itemRefs.concat(nestedItemsRefs);
-      expandedIds = expandedIds.concat(nestedExpandedIds);
-    }
-  });
-
-  return { items, itemRefs, ids, expandedIds };
-}
-
-export function extractItemRefs(items: ItemProps[]): RefObject<HTMLElement>[] {
-  return items.reduce((prev: RefObject<HTMLElement>[], item: ItemProps) => {
-    if (isGroupItemProps(item)) {
-      return prev.concat(extractItemRefs(item.items));
-    }
-    return item.itemRef ? prev.concat([item.itemRef]) : prev;
-  }, [] as RefObject<HTMLElement>[]);
-}
-
-/**
- * Функция возвращает массив id дочерних items
- * @function  extractItemIds
- */
-
-export function extractItemIds(items: ItemProps[]): Array<string | number> {
-  return items.reduce(
-    (prev: Array<string | number>, item: ItemProps) => {
-      if (isGroupItemProps(item)) {
-        return prev.concat(extractItemIds(item.items));
-      }
-      return item.id ? prev.concat([item.id]) : prev;
-    },
-    [] as Array<string | number>,
-  );
-}
-
-export function extractChildIds({ items }: { items: ItemProps[] }): Array<string | number> {
-  return items
-    .filter(
-      item =>
-        isAccordionItemProps(item) ||
-        isNextListItemProps(item) ||
-        isGroupItemProps(item) ||
-        (isBaseItemProps(item) && !item.disabled && !item.inactive),
-    )
-    .reduce(
-      (prev: Array<string | number>, item: ItemProps) => {
-        if (isAccordionItemProps(item) || isNextListItemProps(item)) {
-          return prev.concat([item.id ?? '']).concat(extractChildIds({ items: item.items }));
-        }
-
-        if (isGroupItemProps(item)) {
-          return prev.concat(extractChildIds({ items: item.items }));
-        }
-
-        return item.id && !isGroupItemProps(item) ? prev.concat([item.id]) : prev;
-      },
-      [] 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>,
-    );
-}
-
-/**
- *  Функция разворачивает массив айтемов в плоский список
- *  @function  flattenItems
- */
-
-export function flattenItems(items: ItemProps[]): (BaseItemProps | AccordionItemProps | NextListItemProps)[] {
-  const flattenedItems: (BaseItemProps | AccordionItemProps | NextListItemProps)[] = [];
-
-  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;
-}