@snack-uikit/list 0.9.2-preview-c8f85f20.0 → 0.9.2-preview-0a44b2fc.0

package/src/components/Items/types.ts

@@ -1,28 +1,26 @@
 import { FocusEvent, KeyboardEvent, MouseEvent, ReactNode, RefObject } from 'react';
 
-import { TruncateStringProps } from '@snack-uikit/truncate-string';
 import { WithSupportProps } from '@snack-uikit/utils';
 
-import { SeparatorProps } from '../../helperComponents';
+import { ItemContentProps, SeparatorProps } from '../../helperComponents';
 import { ScrollProps, SearchState } from '../../types';
 
-export type ItemContentProps = {
-  option: string;
-  caption?: string;
-  description?: string;
-  truncate?: {
-    option?: number;
-    description?: number;
-    variant?: TruncateStringProps['variant'];
-  };
-};
-
 export type BaseItemPrivateProps = {
   expandIcon?: ReactNode;
   open?: boolean;
 };
 
-export type BaseItemProps = WithSupportProps<{
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type AnyType = any;
+
+export type ContentRenderProps<Meta = AnyType> = {
+  label: string | number;
+  meta?: Meta;
+};
+
+export type ItemId = string | number;
+
+export type BaseItemProps<Meta = AnyType> = WithSupportProps<{
   /**
    * Слот до основного контента
    * @type ReactElement
@@ -33,9 +31,10 @@ export type BaseItemProps = WithSupportProps<{
    * @type ReactElement
    */
   afterContent?: ReactNode;
-  /** Основной контент айтема */
-  content: ItemContentProps;
-
+  /**
+   * Основной контент айтема
+   */
+  content?: ItemContentProps | ReactNode;
   /** Колбек обработки клика */
   onClick?(e: MouseEvent<HTMLElement>): void;
   /** Колбек обработки нажатия кнопки мыши */
@@ -46,10 +45,8 @@ export type BaseItemProps = WithSupportProps<{
   onFocus?(e: FocusEvent<HTMLElement>): void;
   /** Колбек обработки блюра */
   onBlur?(e: FocusEvent<HTMLElement>): void;
-
   /** Уникальный идентификатор */
-  id?: string | number;
-
+  id?: ItemId;
   /** Флаг неактивности элемента */
   disabled?: boolean;
 
@@ -70,27 +67,60 @@ export type BaseItemProps = WithSupportProps<{
   key?: string | number;
 
   itemWrapRender?(item: ReactNode): ReactNode;
-}>;
+}> & {
+  /**
+   * Дополнительные поля для айтема, которые можно использовать для contentRender функции или поиска
+   */
+  meta?: Meta;
+};
 
-type BaseItemsWithoutNonGroupProps = Omit<BaseItemProps, 'switch' | 'inactive'>;
+type BaseItemsWithoutNonGroupProps<Meta = AnyType> = Omit<BaseItemProps<Meta>, 'switch' | 'inactive'>;
 
-// eslint-disable-next-line no-use-before-define
-export type ItemProps = BaseItemProps | AccordionItemProps | NextListItemProps | GroupItemProps;
+export type ItemProps<Meta = AnyType> =
+  | BaseItemProps<Meta>
+  // eslint-disable-next-line no-use-before-define
+  | AccordionItemProps<Meta>
+  // eslint-disable-next-line no-use-before-define
+  | NextListItemProps<Meta>
+  // eslint-disable-next-line no-use-before-define
+  | GroupItemProps<Meta>;
 
-export type AccordionItemProps = BaseItemsWithoutNonGroupProps & {
-  items: ItemProps[];
+export type AccordionItemProps<Meta = AnyType> = BaseItemsWithoutNonGroupProps<Meta> & {
+  items: ItemProps<Meta>[];
   type: 'collapse';
 };
 
-export type NextListItemProps = BaseItemsWithoutNonGroupProps & {
-  items: ItemProps[];
+export type NextListItemProps<Meta = AnyType> = BaseItemsWithoutNonGroupProps<Meta> & {
+  items: ItemProps<Meta>[];
   type: 'next-list';
   placement?: 'right-start' | 'left-start' | 'left' | 'right' | 'left-end' | 'right-end';
   search?: SearchState;
-  onSublistOpenChanged?(open: boolean, id?: string | number): void;
 } & ScrollProps;
 
-export type GroupItemProps = Omit<SeparatorProps, 'size'> & {
-  items: ItemProps[];
+export type GroupItemProps<Meta = AnyType> = Omit<SeparatorProps, 'size'> & {
+  items: ItemProps<Meta>[];
+  // type: 'group';
   id?: string | number;
+
+  meta?: undefined;
 };
+
+type RequiredFields<T, K extends keyof T> = Required<Pick<T, K>> & Omit<T, K>;
+export type Flatten<T, K extends keyof T> = RequiredFields<T, K>;
+
+type CommonFlattenProps = { items: ItemId[]; allChildIds: ItemId[] };
+
+export type FlattenBaseItem<Meta = AnyType> = Flatten<BaseItemProps<Meta>, 'id' | 'itemRef'>;
+export type FlattenNextListItem<Meta = AnyType> = Flatten<Omit<NextListItemProps<Meta>, 'items'>, 'id' | 'itemRef'> &
+  CommonFlattenProps;
+export type FlattenGroupListItem<Meta = AnyType> = Flatten<Omit<GroupItemProps<Meta>, 'items'>, 'id'> &
+  CommonFlattenProps;
+export type FlattenAccordionItem<Meta = AnyType> = Flatten<Omit<AccordionItemProps<Meta>, 'items'>, 'id' | 'itemRef'> &
+  CommonFlattenProps;
+
+export type FlattenItem<Meta = AnyType> = (
+  | FlattenBaseItem<Meta>
+  | FlattenNextListItem<Meta>
+  | FlattenGroupListItem<Meta>
+  | FlattenAccordionItem<Meta>
+) & { parentId?: ItemId };

package/src/components/Items/utils.ts

@@ -1,71 +1,22 @@
-import { createRef } from 'react';
+import { ItemContentProps } from '../../helperComponents';
+import { AccordionItemProps, AnyType, BaseItemProps, GroupItemProps, NextListItemProps } from './types';
 
-import { AccordionItemProps, BaseItemProps, GroupItemProps, ItemProps, NextListItemProps } from './types';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function isBaseItemProps(item: any): item is BaseItemProps {
-  return 'content' in item;
+export function isBaseItemProps<Meta, ReturnType = BaseItemProps<Meta>>(item: AnyType): item is ReturnType {
+  return !('items' in item);
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function isAccordionItemProps(item: any): item is AccordionItemProps {
+export function isAccordionItemProps<Meta, ReturnType = AccordionItemProps<Meta>>(item: AnyType): item is ReturnType {
   return 'items' in item && item['type'] === 'collapse';
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function isNextListItemProps(item: any): item is NextListItemProps {
+export function isNextListItemProps<Meta, ReturnType = NextListItemProps<Meta>>(item: AnyType): item is ReturnType {
   return 'items' in item && item['type'] === 'next-list';
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function isGroupItemProps(item: any): item is GroupItemProps {
+export function isGroupItemProps<Meta, ReturnType = GroupItemProps<Meta>>(item: AnyType): item is ReturnType {
   return 'items' in item && item['type'] === undefined;
 }
 
-export function getSlicedItems({
-  items,
-  hasSearch,
-  pinTop,
-  pinBottom,
-  footerRefs,
-}: {
-  items: ItemProps[];
-  hasSearch: boolean;
-  footerRefs: ItemProps[];
-  pinTop?: ItemProps[];
-  pinBottom?: ItemProps[];
-}) {
-  const searchShift = hasSearch ? 1 : 0;
-  const pinTopNumber = pinTop?.length ?? 0;
-  const pinBottomNumber = pinBottom?.length ?? 0;
-  const footerElementsNumber = footerRefs?.length ?? 0;
-
-  return {
-    pinTop: items.slice(searchShift, pinTopNumber + searchShift),
-    items: items.slice(pinTopNumber + searchShift, items.length - pinBottomNumber - footerElementsNumber),
-    pinBottom: items.slice(items.length - pinBottomNumber - footerElementsNumber, items.length - footerElementsNumber),
-  };
-}
-
-export function addItemsIds(itemsProp: ItemProps[], prefix?: string | number): ItemProps[] {
-  return itemsProp.map((item, idx) => {
-    const autoId = prefix !== undefined ? [prefix, idx].join('-') : String(idx);
-    const itemId = item.id ?? autoId;
-
-    if (isGroupItemProps(item)) {
-      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),
-        itemRef: item.itemRef || createRef<HTMLElement>(),
-      };
-    }
-
-    return { key: autoId, ...item, id: itemId, itemRef: item.itemRef || createRef<HTMLElement>() };
-  });
+export function isContentItemProps(item: AnyType): item is ItemContentProps {
+  return typeof item === 'object' && item['option'] !== undefined;
 }

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

@@ -1,20 +1,24 @@
-import { cloneElement, isValidElement, KeyboardEvent, ReactNode, useCallback, useMemo, useRef } from 'react';
-import { useUncontrolledProp } from 'uncontrollable';
+import cn from 'classnames';
+import { cloneElement, isValidElement, KeyboardEvent, ReactNode, RefObject, useCallback, useMemo, useRef } from 'react';
 
-import { Dropdown } from '@snack-uikit/dropdown';
+import { Dropdown, DropdownProps } from '@snack-uikit/dropdown';
+import { useValueControl } from '@snack-uikit/utils';
 
-import { extractItemIds, extractItemRefs, withCollapsedItems } from '../../../utils';
-import { addItemsIds, getSlicedItems, useItemsWithIds } from '../../Items';
-import { extractSelectionProps, ParentListContext, SelectionProvider } from '../contexts';
-import { useKeyboardNavigation } from '../hooks';
+import { extractActiveItems, kindFlattenItems } from '../../../utils';
+import { AnyType, ItemId, useCreateBaseItems } from '../../Items';
+import { CollapseContext, FocusListContext, NewListContextProvider, SelectionProvider } from '../contexts';
+import { useNewKeyboardNavigation } from '../hooks';
 import { ListPrivate } from '../ListPrivate';
+import styles from '../styles.module.scss';
 import { DroplistProps } from '../types';
 
-export function Droplist({
+const DEFAULT_FALLBACK_PLACEMENTS: DropdownProps['fallbackPlacements'] = ['top', 'right', 'bottom', 'left'];
+
+export function Droplist<Meta = AnyType>({
   items: itemsProp,
   search,
-  pinBottom,
-  pinTop,
+  pinBottom: pinBottomProp = [],
+  pinTop: pinTopProp = [],
   footerActiveElementsRefs,
   children,
   trigger,
@@ -24,65 +28,100 @@ export function Droplist({
   open: openProp,
   onOpenChange,
   collapse = {},
+  triggerClassName,
+  selection,
+  contentRender,
+  size = 's',
+  marker = true,
+  className,
   ...props
-}: DroplistProps) {
+}: DroplistProps<Meta>) {
   const hasSearch = useMemo(() => Boolean(search), [search]);
 
-  const memorizedItems = useMemo(
-    () => addItemsIds((pinTop ?? []).concat(itemsProp).concat(pinBottom ?? [])),
-    [itemsProp, pinBottom, pinTop],
-  );
-
-  const [openCollapsedItems, setOpenCollapsedItems] = useUncontrolledProp<Array<number | string>>(
-    collapse.value,
-    collapse.defaultValue ?? [],
-    collapse.onChange,
+  const [openCollapseItems = [], setOpenCollapsedItems] = useValueControl<ItemId[] | undefined>(collapse);
+  const toggleOpenCollapseItem = useCallback(
+    (id: ItemId) =>
+      setOpenCollapsedItems((items: ItemId[]) =>
+        items?.includes(id) ? items.filter(item => item !== id) : (items ?? []).concat([id]),
+      ),
+    [setOpenCollapsedItems],
   );
 
-  const { search: searchItem, footerRefs } = useItemsWithIds({
-    search: hasSearch,
-    footerActiveElementsRefs,
+  const [open = false, setOpen] = useValueControl<boolean>({
+    value: openProp,
+    defaultValue: false,
+    onChange: onOpenChange,
   });
 
-  const { items, itemRefs, ids, expandedIds } = useMemo(() => {
-    const res = withCollapsedItems({
-      items: memorizedItems,
-      openCollapsedItems,
+  const { searchItem, footerItems } = useCreateBaseItems<Meta>({ footerActiveElementsRefs });
+
+  /**
+   * Объект с пропсами всех вложенных айтемов; ключ id
+   */
+  const { flattenedItems, ...memorizedItems } = useMemo(() => {
+    const pinTop = kindFlattenItems<Meta>({ items: pinTopProp, prefix: '~pinTop', parentId: '~main' });
+    const items = kindFlattenItems<Meta>({ items: itemsProp, prefix: '~main', parentId: '~main' });
+    const pinBottom = kindFlattenItems<Meta>({ items: pinBottomProp, prefix: '~pinBottom', parentId: '~main' });
+
+    const flattenedItems = { ...pinTop.flattenedItems, ...pinBottom.flattenedItems, ...items.flattenedItems };
+
+    [...footerItems, searchItem].forEach(item => {
+      flattenedItems[item.id] = item;
     });
 
-    const items = searchItem.concat(res.items).concat(footerRefs);
+    return { items, pinTop, pinBottom, flattenedItems };
+  }, [itemsProp, pinTopProp, pinBottomProp, searchItem, footerItems]);
+
+  const { itemRefs, ids, expandedIds } = useMemo(() => {
+    const { pinTop, items, pinBottom } = memorizedItems;
+
+    let ids: ItemId[] = [];
+    let expandedIds: ItemId[] = [];
+    let itemRefs: RefObject<HTMLElement>[] = [];
+
+    if (hasSearch) {
+      ids.push(searchItem.id);
+      itemRefs.push(searchItem.itemRef);
+    }
+
+    [pinTop, items, pinBottom].forEach(({ flattenedItems, items }) => {
+      const activeItems = extractActiveItems<Meta>({ flattenedItems, items, openCollapseItems });
+
+      ids = ids.concat(activeItems.ids);
+      expandedIds = expandedIds.concat(activeItems.expandedIds);
+      itemRefs = itemRefs.concat(activeItems.itemRefs);
+    });
+
+    footerItems.forEach(footerItem => {
+      ids.push(footerItem.id);
+      itemRefs.push(footerItem.itemRef);
+    });
 
     return {
-      items,
-      ids: extractItemIds(searchItem).concat(res.ids).concat(extractItemIds(footerRefs)),
-      itemRefs: extractItemRefs(searchItem).concat(res.itemRefs).concat(extractItemRefs(footerRefs)),
-      expandedIds: res.expandedIds,
+      ids,
+      itemRefs,
+      expandedIds,
     };
-  }, [footerRefs, memorizedItems, openCollapsedItems, searchItem]);
-
-  const slicedItems = useMemo(
-    () => getSlicedItems({ items, hasSearch, pinTop, pinBottom, footerRefs }),
-    [items, hasSearch, pinTop, pinBottom, footerRefs],
-  );
+  }, [footerItems, hasSearch, memorizedItems, openCollapseItems, searchItem.id, searchItem.itemRef]);
 
   const triggerElemRef = useRef<HTMLElement>(null);
-  const listRef = useRef<HTMLUListElement>(null);
-
-  const {
-    activeFocusIndex,
-    setActiveFocusIndex,
-    openNestedIndex,
-    handleListKeyDown,
-    resetNestedIndex,
-    resetActiveFocusIndex,
-  } = useKeyboardNavigation({ ids, expandedIds, parentRef: triggerElemRefProp ?? triggerElemRef, itemRefs });
+  const listRef = useRef<HTMLElement>(null);
+
+  const { handleListKeyDownFactory, resetActiveItemId, activeItemId, forceUpdateActiveItemId } =
+    useNewKeyboardNavigation({
+      mainRef: triggerElemRefProp ?? triggerElemRef,
+      itemRefs,
+      expandedIds,
+      flattenedItems,
+    });
 
-  const [open, setOpen] = useUncontrolledProp<boolean>(openProp, false, onOpenChange);
+  const handleListKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLElement>) => handleListKeyDownFactory(ids, expandedIds)(e),
+    [handleListKeyDownFactory, ids, expandedIds],
+  );
 
   const handleOpenChange = (open: boolean) => {
-    resetNestedIndex();
-    resetActiveFocusIndex();
-    setOpenCollapsedItems([]);
+    resetActiveItemId();
 
     setOpen(open);
   };
@@ -94,14 +133,19 @@ export function Droplist({
         setOpen(true);
 
         setTimeout(() => {
+          resetActiveItemId();
           listRef.current?.focus();
-          setActiveFocusIndex(0);
         }, 0);
       }
 
+      if (e.key === 'ArrowUp') {
+        // e.preventDefault();
+        setOpen(false);
+      }
+
       cb?.(e);
     },
-    [setActiveFocusIndex, setOpen],
+    [resetActiveItemId, setOpen],
   );
 
   const triggerElem: ReactNode = useMemo(() => {
@@ -123,55 +167,64 @@ export function Droplist({
     return children;
   }, [onKeyDown, children]);
 
+  // const handleOnFocus = e => {
+  //   // resetActiveItemId();
+  // };
+
   return (
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    <SelectionProvider {...extractSelectionProps(props)}>
-      <ParentListContext.Provider
-        value={{
-          parentIds: ids,
-          parentActiveFocusIndex: activeFocusIndex,
-          parentExpandedIds: expandedIds,
-          parentItemRefs: itemRefs,
-          parentOpenNestedIndex: openNestedIndex,
-          triggerRef: triggerElemRefProp ?? triggerElemRef,
-          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]),
-            ),
-        }}
-      >
-        <Dropdown
-          content={
-            <ListPrivate
-              {...slicedItems}
-              {...props}
-              onKeyDown={handleListKeyDown}
-              tabIndex={0}
-              ref={listRef}
-              search={search}
-              limitedScrollHeight
-              parent='droplist'
-            />
-          }
-          trigger={trigger}
-          placement={placement}
-          widthStrategy={widthStrategy}
-          {...(triggerElemRefProp
-            ? {}
-            : {
-                triggerRef: triggerElemRef,
-              })}
-          open={open}
-          onOpenChange={handleOpenChange}
+    <NewListContextProvider flattenedItems={flattenedItems} contentRender={contentRender} size={size} marker={marker}>
+      <SelectionProvider {...selection}>
+        <CollapseContext.Provider
+          value={{
+            openCollapseItems,
+            toggleOpenCollapseItem,
+          }}
         >
-          {triggerElem}
-        </Dropdown>
-      </ParentListContext.Provider>
-    </SelectionProvider>
+          <FocusListContext.Provider
+            value={{
+              activeItemId,
+              handleListKeyDownFactory,
+              forceUpdateActiveItemId,
+            }}
+          >
+            <Dropdown
+              content={
+                <div className={cn(styles.wrapper, className)}>
+                  <ListPrivate
+                    {...props}
+                    {...memorizedItems}
+                    onKeyDown={handleListKeyDown}
+                    tabIndex={0}
+                    ref={listRef}
+                    search={search}
+                    // onFocus={handleOnFocus}
+                    onFocus={e => {
+                      e.stopPropagation();
+
+                      forceUpdateActiveItemId?.(ids[0]);
+                    }}
+                    limitedScrollHeight
+                  />
+                </div>
+              }
+              triggerClassName={triggerClassName}
+              fallbackPlacements={DEFAULT_FALLBACK_PLACEMENTS}
+              trigger={trigger}
+              placement={placement}
+              widthStrategy={widthStrategy}
+              {...(triggerElemRefProp
+                ? {}
+                : {
+                    triggerRef: triggerElemRef,
+                  })}
+              open={open}
+              onOpenChange={handleOpenChange}
+            >
+              {triggerElem}
+            </Dropdown>
+          </FocusListContext.Provider>
+        </CollapseContext.Provider>
+      </SelectionProvider>
+    </NewListContextProvider>
   );
 }