@snack-uikit/list 0.10.0 → 0.10.1-preview-69abc1d3.0

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

@@ -1,20 +1,23 @@
+import cn from 'classnames';
 import { cloneElement, isValidElement, KeyboardEvent, ReactNode, useCallback, useMemo, useRef } from 'react';
-import { useUncontrolledProp } from 'uncontrollable';
 
-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, ItemId, kindFlattenItems, 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';
 
+const DEFAULT_FALLBACK_PLACEMENTS: DropdownProps['fallbackPlacements'] = ['top', 'right', 'bottom', 'left'];
+
 export function Droplist({
   items: itemsProp,
   search,
-  pinBottom,
-  pinTop,
+  pinBottom: pinBottomProp = [],
+  pinTop: pinTopProp = [],
   footerActiveElementsRefs,
   children,
   trigger,
@@ -24,65 +27,98 @@ export function Droplist({
   open: openProp,
   onOpenChange,
   collapse = {},
+  triggerClassName,
+  selection,
+  contentRender,
+  size = 's',
+  marker = true,
+  className,
   ...props
 }: DroplistProps) {
   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({ footerActiveElementsRefs });
+  /**
+   * Объект с пропсами всех вложенных айтемов; ключ id
+   */
+  const { flattenItems, focusFlattenItems, ...memorizedItems } = useMemo(() => {
+    const pinTop = kindFlattenItems({ items: pinTopProp, prefix: '~pinTop', parentId: '~main' });
+    const items = kindFlattenItems({ items: itemsProp, prefix: '~main', parentId: '~main' });
+    const pinBottom = kindFlattenItems({ items: pinBottomProp, prefix: '~pinBottom', parentId: '~main' });
+
+    const flattenItems = { ...pinTop.flattenItems, ...pinBottom.flattenItems, ...items.flattenItems };
+    const focusFlattenItems = {
+      ...pinTop.focusFlattenItems,
+      ...pinBottom.focusFlattenItems,
+      ...items.focusFlattenItems,
+    };
+
+    [...footerItems, searchItem].forEach(item => {
+      flattenItems[item.id] = item;
+      focusFlattenItems[item.id] = { ...item, originalId: item.id, items: [], key: item.id, allChildIds: [] };
+    });
+
+    return { items, pinTop, pinBottom, flattenItems, focusFlattenItems };
+  }, [itemsProp, pinTopProp, pinBottomProp, searchItem, footerItems]);
+
+  const { ids, expandedIds } = useMemo(() => {
+    const { pinTop, items, pinBottom } = memorizedItems;
+
+    let ids: ItemId[] = [];
+    let expandedIds: ItemId[] = [];
+
+    if (hasSearch) {
+      ids.push(searchItem.id);
+    }
+
+    [pinTop, items, pinBottom].forEach(({ focusFlattenItems, focusCloseChildIds }) => {
+      const activeItems = extractActiveItems({ focusFlattenItems, focusCloseChildIds, openCollapseItems });
+
+      ids = ids.concat(activeItems.ids);
+      expandedIds = expandedIds.concat(activeItems.expandedIds);
     });
 
-    const items = searchItem.concat(res.items).concat(footerRefs);
+    footerItems.forEach(footerItem => {
+      ids.push(footerItem.id);
+    });
 
     return {
-      items,
-      ids: extractItemIds(searchItem).concat(res.ids).concat(extractItemIds(footerRefs)),
-      itemRefs: extractItemRefs(searchItem).concat(res.itemRefs).concat(extractItemRefs(footerRefs)),
-      expandedIds: res.expandedIds,
+      ids,
+      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]);
 
   const triggerElemRef = useRef<HTMLElement>(null);
-  const listRef = useRef<HTMLUListElement>(null);
+  const listRef = useRef<HTMLElement>(null);
 
-  const {
-    activeFocusIndex,
-    setActiveFocusIndex,
-    openNestedIndex,
-    handleListKeyDown,
-    resetNestedIndex,
-    resetActiveFocusIndex,
-  } = useKeyboardNavigation({ ids, expandedIds, parentRef: triggerElemRefProp ?? triggerElemRef, itemRefs });
+  const { handleListKeyDownFactory, resetActiveItemId, activeItemId, forceUpdateActiveItemId } =
+    useNewKeyboardNavigation({
+      mainRef: triggerElemRefProp ?? triggerElemRef,
+      focusFlattenItems,
+    });
 
-  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 +130,18 @@ export function Droplist({
         setOpen(true);
 
         setTimeout(() => {
+          resetActiveItemId();
           listRef.current?.focus();
-          setActiveFocusIndex(0);
         }, 0);
       }
 
+      if (e.key === 'ArrowUp') {
+        setOpen(false);
+      }
+
       cb?.(e);
     },
-    [setActiveFocusIndex, setOpen],
+    [resetActiveItemId, setOpen],
   );
 
   const triggerElem: ReactNode = useMemo(() => {
@@ -124,54 +164,67 @@ export function Droplist({
   }, [onKeyDown, children]);
 
   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
+      flattenItems={flattenItems}
+      focusFlattenItems={focusFlattenItems}
+      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}
+                    items={memorizedItems.items.focusCloseChildIds}
+                    pinTop={memorizedItems.pinTop.focusCloseChildIds}
+                    pinBottom={memorizedItems.pinBottom.focusCloseChildIds}
+                    onKeyDown={handleListKeyDown}
+                    searchItem={searchItem}
+                    tabIndex={0}
+                    ref={listRef}
+                    search={search}
+                    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>
   );
 }

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

@@ -1,149 +1,169 @@
 import cn from 'classnames';
 import mergeRefs from 'merge-refs';
-import { FocusEvent, forwardRef, KeyboardEvent, useMemo, useRef } from 'react';
-import { useUncontrolledProp } from 'uncontrollable';
+import { ForwardedRef, forwardRef, KeyboardEvent, useCallback, useMemo, useRef } from 'react';
+
+import { useValueControl } from '@snack-uikit/utils';
 
 import { HiddenTabButton } from '../../../helperComponents';
-import { extractItemIds, extractItemRefs, withCollapsedItems } from '../../../utils';
-import { addItemsIds, getSlicedItems, useItemsWithIds } from '../../Items';
-import { extractSelectionProps, ParentListContext, SelectionProvider, useParentListContext } from '../contexts';
-import { useKeyboardNavigation } from '../hooks';
+import { extractActiveItems, ItemId, kindFlattenItems, 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 { ListProps } from '../types';
 
-export const List = forwardRef<HTMLElement, ListProps>(
+export const List = forwardRef(
   (
     {
-      items: itemsProp,
+      items: itemsProp = [],
       search,
-      pinBottom,
-      pinTop,
+      pinBottom: pinBottomProp = [],
+      pinTop: pinTopProp = [],
       footerActiveElementsRefs,
       onKeyDown,
       tabIndex = 0,
       className,
       collapse = {},
+      selection,
+      contentRender,
+      size = 's',
+      marker = true,
       ...props
-    },
-    ref,
+    }: ListProps,
+    ref: ForwardedRef<HTMLElement>,
   ) => {
     const hasSearch = useMemo(() => Boolean(search), [search]);
 
-    const memorizedItems = useMemo(
-      () => addItemsIds((pinTop ?? []).concat(itemsProp).concat(pinBottom ?? [])),
-      [itemsProp, pinBottom, pinTop],
+    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 [openCollapsedItems, setOpenCollapsedItems] = useUncontrolledProp<Array<number | string>>(
-      collapse.value,
-      collapse.defaultValue ?? [],
-      collapse.onChange,
-    );
+    const { searchItem, footerItems } = useCreateBaseItems({ footerActiveElementsRefs });
+
+    /**
+     * Объект с пропсами всех вложенных айтемов; ключ id
+     */
+    const { flattenItems, focusFlattenItems, ...memorizedItems } = useMemo(() => {
+      const pinTop = kindFlattenItems({ items: pinTopProp, prefix: '~pinTop', parentId: '~main' });
+      const items = kindFlattenItems({ items: itemsProp, prefix: '~main', parentId: '~main' });
+      const pinBottom = kindFlattenItems({ items: pinBottomProp, prefix: '~pinBottom', parentId: '~main' });
+
+      const flattenItems = { ...pinTop.flattenItems, ...pinBottom.flattenItems, ...items.flattenItems };
+      const focusFlattenItems = {
+        ...pinTop.focusFlattenItems,
+        ...pinBottom.focusFlattenItems,
+        ...items.focusFlattenItems,
+      };
 
-    const { search: searchItem, footerRefs } = useItemsWithIds({
-      search: hasSearch,
-      footerActiveElementsRefs,
-    });
+      [...footerItems, searchItem].forEach(item => {
+        flattenItems[item.id] = item;
+        focusFlattenItems[item.id] = { ...item, originalId: item.id, items: [], key: item.id, allChildIds: [] };
+      });
+
+      return { items, pinTop, pinBottom, flattenItems, focusFlattenItems };
+    }, [itemsProp, pinTopProp, pinBottomProp, searchItem, footerItems]);
+
+    const { ids, expandedIds } = useMemo(() => {
+      const { pinTop, items, pinBottom } = memorizedItems;
+
+      let ids: ItemId[] = [];
+      let expandedIds: ItemId[] = [];
+
+      if (hasSearch) {
+        ids.push(searchItem.id);
+      }
 
-    const { items, itemRefs, ids, expandedIds } = useMemo(() => {
-      const res = withCollapsedItems({
-        items: memorizedItems,
-        openCollapsedItems,
+      [pinTop, items, pinBottom].forEach(({ focusFlattenItems, focusCloseChildIds }) => {
+        const activeItems = extractActiveItems({ focusFlattenItems, focusCloseChildIds, openCollapseItems });
+
+        ids = ids.concat(activeItems.ids);
+        expandedIds = expandedIds.concat(activeItems.expandedIds);
       });
 
-      const items = searchItem.concat(res.items).concat(footerRefs);
+      footerItems.forEach(footerItem => {
+        ids.push(footerItem.id);
+      });
 
       return {
-        items,
-        ids: extractItemIds(searchItem).concat(res.ids).concat(extractItemIds(footerRefs)),
-        itemRefs: extractItemRefs(searchItem).concat(res.itemRefs).concat(extractItemRefs(footerRefs)),
-        expandedIds: res.expandedIds,
+        ids,
+        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]);
 
     const listRef = useRef<HTMLElement>(null);
     const btnRef = useRef<HTMLButtonElement>(null);
 
-    const { triggerRef } = useParentListContext();
-
-    const {
-      activeFocusIndex,
-      openNestedIndex,
-      handleListKeyDown,
-      resetNestedIndex,
-      resetActiveFocusIndex,
-      setActiveFocusIndex,
-    } = useKeyboardNavigation({
-      ids,
-      expandedIds,
-      parentRef: listRef,
-      btnRef,
-      itemRefs,
-    });
-
-    const isActive = listRef.current === document.activeElement && activeFocusIndex === -1 && openNestedIndex === -1;
+    const { handleListKeyDownFactory, activeItemId, resetActiveItemId, forceUpdateActiveItemId } =
+      useNewKeyboardNavigation({
+        mainRef: listRef,
+        btnRef,
+        focusFlattenItems,
+      });
+
+    const handleListKeyDown = useCallback(
+      (e: KeyboardEvent<HTMLElement>) => handleListKeyDownFactory(ids, expandedIds)(e),
+      [handleListKeyDownFactory, ids, expandedIds],
+    );
+
+    const isActive = listRef.current === document.activeElement && activeItemId === undefined;
 
     const mergedHandlerKeyDown = (e: KeyboardEvent<HTMLElement>) => {
       onKeyDown?.(e);
       handleListKeyDown?.(e);
     };
 
-    const handleOnFocus = (e: FocusEvent<HTMLElement>) => {
-      if (
-        e.relatedTarget === null ||
-        (e.relatedTarget && itemRefs.every(({ current }) => current !== e.relatedTarget))
-      ) {
-        resetActiveFocusIndex();
-      }
+    const handleOnFocus = () => {
+      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: triggerRef ?? listRef,
-            parentRef: listRef,
-
-            parentSetActiveFocusIndex: setActiveFocusIndex,
-            parentResetNestedIndex: resetNestedIndex,
-            parentResetActiveFocusIndex: resetActiveFocusIndex,
-            openCollapsedItems,
-            toggleOpenCollapsedItems: id =>
-              setOpenCollapsedItems((items: Array<string | number> | undefined = []) =>
-                items.includes(id) ? items.filter(item => item !== id) : items?.concat([id]),
-              ),
-          }}
-        >
-          <div className={cn(styles.wrapper, className)} data-active={isActive || undefined}>
-            <ListPrivate
-              {...props}
-              {...slicedItems}
-              ref={mergeRefs(ref, listRef)}
-              onFocus={handleOnFocus}
-              onKeyDown={mergedHandlerKeyDown}
-              tabIndex={tabIndex}
-              search={search}
-              nested={false}
-              parent='list'
-            />
-
-            <HiddenTabButton ref={btnRef} listRef={listRef} tabIndex={tabIndex} />
-          </div>
-        </ParentListContext.Provider>
-      </SelectionProvider>
+      <NewListContextProvider
+        flattenItems={flattenItems}
+        focusFlattenItems={focusFlattenItems}
+        contentRender={contentRender}
+        size={size}
+        marker={marker}
+      >
+        <SelectionProvider {...selection}>
+          <CollapseContext.Provider
+            value={{
+              openCollapseItems,
+              toggleOpenCollapseItem,
+            }}
+          >
+            <FocusListContext.Provider
+              value={{
+                activeItemId,
+                handleListKeyDownFactory,
+                forceUpdateActiveItemId,
+              }}
+            >
+              <div className={cn(styles.wrapper, className)} data-active={isActive || undefined}>
+                <ListPrivate
+                  {...props}
+                  items={memorizedItems.items.focusCloseChildIds}
+                  pinTop={memorizedItems.pinTop.focusCloseChildIds}
+                  pinBottom={memorizedItems.pinBottom.focusCloseChildIds}
+                  searchItem={searchItem}
+                  ref={mergeRefs(ref, listRef)}
+                  onFocus={handleOnFocus}
+                  onKeyDown={mergedHandlerKeyDown}
+                  tabIndex={tabIndex}
+                  search={search}
+                  nested={false}
+                />
+
+                <HiddenTabButton ref={btnRef} listRef={listRef} tabIndex={tabIndex} />
+              </div>
+            </FocusListContext.Provider>
+          </CollapseContext.Provider>
+        </SelectionProvider>
+      </NewListContextProvider>
     );
   },
 );