@snack-uikit/list 0.11.0 → 0.11.1

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

@@ -7,12 +7,12 @@ import { extractSupportProps } from '@snack-uikit/utils';
 
 import { ListEmptyState, useEmptyState } from '../../../helperComponents';
 import { PinBottomGroupItem, PinTopGroupItem, SearchItem, useRenderItems } from '../../Items';
-import { ListContextProvider } from '../contexts';
+import { useNewListContext } from '../contexts';
 import commonStyles from '../styles.module.scss';
 import { ListPrivateProps } from '../types';
 import styles from './styles.module.scss';
 
-export const ListPrivate = forwardRef<HTMLElement, ListPrivateProps>(
+export const ListPrivate = forwardRef(
   (
     {
       items,
@@ -26,30 +26,29 @@ export const ListPrivate = forwardRef<HTMLElement, ListPrivateProps>(
       scroll,
       nested,
       search,
+      searchItem,
       scrollRef,
       scrollContainerRef,
       footer,
       loading,
-      size = 's',
-      marker = true,
       limitedScrollHeight,
       className,
-      parent = 'list',
       noDataState,
       noResultsState,
       errorDataState,
       dataError,
       dataFiltered,
       ...props
-    },
-    ref,
+    }: ListPrivateProps,
+    ref: ForwardedRef<HTMLElement>,
   ) => {
+    const { size = 's' } = useNewListContext();
+
     const itemsJSX = useRenderItems(items);
-    const itemsPinTopJSX = useRenderItems(pinTop ?? []);
-    const itemsPinBottomJSX = useRenderItems(pinBottom ?? []);
+    const itemsPinTopJSX = useRenderItems(pinTop);
+    const itemsPinBottomJSX = useRenderItems(pinBottom);
 
     const emptyStates = useEmptyState({ noDataState, noResultsState, errorDataState });
-
     const hasNoItems = items.length === 0;
 
     const loadingJSX = useMemo(
@@ -79,12 +78,12 @@ export const ListPrivate = forwardRef<HTMLElement, ListPrivateProps>(
             loading={loading}
             dataError={dataError}
             emptyStates={emptyStates}
-            itemsLength={items.length}
+            hasNoItems={hasNoItems}
             dataFiltered={dataFiltered ?? Boolean(search?.value)}
           />
         </div>
       ),
-      [dataError, dataFiltered, emptyStates, items.length, itemsJSX, loading, loadingJSX, search?.value],
+      [dataError, dataFiltered, emptyStates, hasNoItems, itemsJSX, loading, loadingJSX, search?.value],
     );
 
     const listJSX = (
@@ -93,7 +92,7 @@ export const ListPrivate = forwardRef<HTMLElement, ListPrivateProps>(
         ref={ref as ForwardedRef<HTMLUListElement>}
         onKeyDown={onKeyDown}
         tabIndex={tabIndex}
-        onFocus={!nested ? onFocus : undefined}
+        onFocus={onFocus}
         onBlur={onBlur}
         data-active={active || undefined}
         role='menu'
@@ -101,7 +100,7 @@ export const ListPrivate = forwardRef<HTMLElement, ListPrivateProps>(
       >
         {(Number(pinTop?.length) > 0 || search) && (
           <PinTopGroupItem>
-            {search && <SearchItem search={search} />}
+            {search && <SearchItem search={search} {...searchItem} />}
 
             {Number(pinTop?.length) > 0 && itemsPinTopJSX}
           </PinTopGroupItem>
@@ -128,16 +127,16 @@ export const ListPrivate = forwardRef<HTMLElement, ListPrivateProps>(
 
         {Number(pinBottom?.length) > 0 && <PinBottomGroupItem>{itemsPinBottomJSX}</PinBottomGroupItem>}
 
-        {footer && <div className={styles.footer}>{footer}</div>}
+        {footer && (
+          <div className={styles.footer} onFocus={e => e.stopPropagation()}>
+            {footer}
+          </div>
+        )}
       </ul>
     );
 
     if (!nested) {
-      return (
-        <ListContextProvider size={size} marker={marker} parent={parent}>
-          {listJSX}
-        </ListContextProvider>
-      );
+      return listJSX;
     }
 
     return (

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

@@ -47,5 +47,6 @@ $loader-height: (
 }
 
 .content {
+  overflow: hidden;
   flex-grow: 1;
 }

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

@@ -0,0 +1,22 @@
+import { createContext, useContext } from 'react';
+
+import { ItemId } from '../../Items';
+
+export type CollapseLevelContextType = {
+  level?: number;
+};
+export const CollapseLevelContext = createContext<CollapseLevelContextType>({});
+export const useCollapseLevelContext = () => useContext(CollapseLevelContext);
+
+export type CollapseContextType = {
+  openCollapseItems?: ItemId[];
+  toggleOpenCollapseItem?(id: ItemId): void;
+};
+export const CollapseContext = createContext<CollapseContextType>({});
+export const useCollapseContext = () => useContext(CollapseContext);
+
+export type CollapseState = {
+  value?: ItemId[];
+  onChange?(value?: ItemId[]): void;
+  defaultValue?: ItemId[];
+};

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

@@ -0,0 +1,15 @@
+import { createContext, KeyboardEvent, useContext } from 'react';
+
+import { ItemId } from '../../Items';
+
+export type FocusListContextType = {
+  activeItemId?: ItemId;
+  forceUpdateActiveItemId?(itemId: ItemId): void;
+  handleListKeyDownFactory: (ids: ItemId[], expandedIds: ItemId[]) => (e: KeyboardEvent<HTMLElement>) => void;
+};
+
+export const FocusListContext = createContext<FocusListContextType>({
+  handleListKeyDownFactory: () => () => {},
+});
+
+export const useFocusListContext = () => useContext(FocusListContext);

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

@@ -0,0 +1,54 @@
+import { createContext, ReactNode, useContext } from 'react';
+
+import { ItemContentProps } from '../../../helperComponents';
+import { FlattenItem, FocusFlattenItem, ItemId } from '../../Items';
+
+type ContentRenderProps = {
+  id?: ItemId;
+  content?: ItemContentProps | ReactNode;
+};
+
+export type PublicListContextType = {
+  /** Размер списка */
+  size?: 's' | 'm' | 'l';
+  /** Отображать ли маркер у выбранного жлемента списка */
+  marker?: boolean;
+  /**
+   * Рендер функция основного контента айтема
+   */
+  contentRender?(props: ContentRenderProps): ReactNode;
+};
+
+export type PrivateListContextType = {
+  flattenItems: Record<string, FlattenItem>;
+  focusFlattenItems: Record<string, FocusFlattenItem>;
+};
+
+type Child = {
+  children: ReactNode;
+};
+
+type ListContextType = PublicListContextType & PrivateListContextType;
+
+export const ListContext = createContext({
+  flattenItems: {},
+  focusFlattenItems: {},
+});
+
+export function useNewListContext() {
+  return useContext<ListContextType>(ListContext);
+}
+
+function extractListProps<T extends ListContextType>({
+  size,
+  marker,
+  flattenItems,
+  focusFlattenItems,
+  contentRender,
+}: T) {
+  return { size, marker, parent, contentRender, flattenItems, focusFlattenItems };
+}
+
+export function NewListContextProvider({ children, ...props }: ListContextType & Child) {
+  return <ListContext.Provider value={extractListProps(props)}>{children}</ListContext.Provider>;
+}

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

@@ -1,23 +1,26 @@
 import { createContext, ReactNode, useCallback, useContext } from 'react';
-import { useUncontrolledProp } from 'uncontrollable';
 
-export type SelectionSingleValueType = string | number | undefined;
+import { useValueControl } from '@snack-uikit/utils';
+
+import { AnyType, ItemId } from '../../Items';
+
+export type OnChangeHandler<T = AnyType> = (value: T) => void;
+
+export type SelectionSingleValueType = ItemId;
 
 export type SelectionSingleState = {
   /** Начальное состояние */
-  defaultValue?: SelectionSingleValueType;
+  defaultValue?: ItemId;
   /** Controlled состояние */
-  value?: SelectionSingleValueType;
+  value?: ItemId;
   /** Controlled обработчик измения состояния */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  onChange?(value: any): void;
+  onChange?: OnChangeHandler;
   /** Режим выбора */
   mode: 'single';
 };
 
 export type SelectionSingleProps = {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  setValue?(value: any): void;
+  setValue?(value: AnyType): void;
   /** Режим выбора single */
   isSelectionSingle: true;
   /** Режим выбора multi */
@@ -26,19 +29,17 @@ export type SelectionSingleProps = {
 
 export type SelectionMultipleState = {
   /** Начальное состояние */
-  defaultValue?: SelectionSingleValueType[];
+  defaultValue?: ItemId[];
   /** Controlled состояние */
-  value?: SelectionSingleValueType[];
+  value?: ItemId[];
   /** Controlled обработчик измения состояния */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  onChange?(value: any): void;
+  onChange?: OnChangeHandler;
   /** Режим выбора */
   mode: 'multiple';
 };
 
 export type SelectionMultipleProps = {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  setValue?(value: any): void;
+  setValue?(value: AnyType): void;
   /** Режим выбора single */
   isSelectionSingle: false;
   /** Режим выбора multi */
@@ -46,7 +47,7 @@ export type SelectionMultipleProps = {
 } & SelectionMultipleState;
 
 type SelectionNoneProps = {
-  mode?: undefined;
+  mode?: 'none';
   value?: undefined;
   onChange?: undefined;
   setValue?: undefined;
@@ -55,14 +56,14 @@ type SelectionNoneProps = {
   isSelectionMultiple?: undefined;
 };
 
-type SelectionProviderProps = SelectionSingleProps | SelectionMultipleProps | SelectionNoneProps;
-
 type SelectionContextType =
   | Omit<SelectionNoneProps, 'defaultValue'>
   | Omit<SelectionSingleProps, 'defaultValue'>
   | Omit<SelectionMultipleProps, 'defaultValue'>;
 
-export type SelectionState = { selection?: SelectionSingleState | SelectionMultipleState };
+export type SelectionState = {
+  selection?: SelectionSingleState | SelectionMultipleState;
+};
 
 export const SelectionContext = createContext<SelectionContextType>({
   value: undefined,
@@ -70,13 +71,10 @@ export const SelectionContext = createContext<SelectionContextType>({
   mode: undefined,
 });
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function isSelectionMultipleProps(props: any): props is SelectionMultipleProps {
+export function isSelectionMultipleProps(props: AnyType): props is SelectionMultipleProps {
   return 'mode' in props && props['mode'] === 'multiple';
 }
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function isSelectionSingleProps(props: any): props is SelectionSingleProps {
+export function isSelectionSingleProps(props: AnyType): props is SelectionSingleProps {
   return 'mode' in props && props['mode'] === 'single';
 }
 
@@ -84,20 +82,32 @@ type Child = {
   children: ReactNode;
 };
 
+function SelectionNoneProvider({ children }: SelectionNoneProps & Child) {
+  return (
+    <SelectionContext.Provider
+      value={{
+        mode: 'none',
+      }}
+    >
+      {children}
+    </SelectionContext.Provider>
+  );
+}
+
 function SelectionSingleProvider({
   value: valueProp,
   defaultValue,
   onChange: onChangeProp,
   children,
 }: SelectionSingleProps & Child) {
-  const [value, setValue] = useUncontrolledProp<SelectionSingleValueType>(valueProp, defaultValue, newValue => {
-    const result = typeof newValue === 'function' ? newValue(value) : newValue;
-
-    onChangeProp?.(result);
+  const [value, setValue] = useValueControl<ItemId | undefined>({
+    value: valueProp,
+    defaultValue,
+    onChange: onChangeProp,
   });
 
   const onChange = useCallback(
-    (newValue: SelectionSingleValueType) =>
+    (newValue: SelectionSingleValueType | undefined) =>
       setValue((oldValue: SelectionSingleValueType) => {
         if (newValue !== oldValue) {
           return newValue;
@@ -130,10 +140,10 @@ function SelectionMultipleProvider({
   onChange: onChangeProp,
   children,
 }: SelectionMultipleProps & Child) {
-  const [value, setValue] = useUncontrolledProp<SelectionSingleValueType[]>(valueProp, defaultValue, newValue => {
-    const result = typeof newValue === 'function' ? newValue(value) : newValue;
-
-    onChangeProp?.(result);
+  const [value, setValue] = useValueControl<ItemId[] | undefined>({
+    value: valueProp,
+    defaultValue,
+    onChange: onChangeProp,
   });
 
   const onChange = useCallback(
@@ -173,6 +183,17 @@ function SelectionMultipleProvider({
   );
 }
 
+type SelectionProviderProps = {
+  /** Начальное состояние */
+  defaultValue?: AnyType;
+  /** Controlled состояние */
+  value?: AnyType;
+  /** Controlled обработчик измения состояния */
+  onChange?: OnChangeHandler;
+  /** Режим выбора */
+  mode?: 'multiple' | 'single' | 'none';
+};
+
 export function SelectionProvider({ children, ...props }: SelectionProviderProps & Child) {
   if (isSelectionSingleProps(props)) {
     return <SelectionSingleProvider {...props}>{children}</SelectionSingleProvider>;
@@ -182,13 +203,9 @@ export function SelectionProvider({ children, ...props }: SelectionProviderProps
     return <SelectionMultipleProvider {...props}>{children}</SelectionMultipleProvider>;
   }
 
-  return <SelectionContext.Provider value={{}}>{children}</SelectionContext.Provider>;
+  return <SelectionNoneProvider>{children}</SelectionNoneProvider>;
 }
 
-export const useSelectionContext = () => useContext(SelectionContext);
-
-export function extractSelectionProps<T extends SelectionState>({ selection }: T) {
-  return {
-    ...(selection ?? {}),
-  } as SelectionProviderProps;
+export function useSelectionContext() {
+  return useContext(SelectionContext);
 }

package/src/components/Lists/contexts/index.ts

@@ -1,4 +1,5 @@
-export * from './ListProvider';
 export * from './SelectionProvider';
-export * from './ParentListProvider';
 export * from './CollapseProvider';
+export * from './NewListProvider';
+export * from './SelectionProvider';
+export * from './FocusListProvider';

package/src/components/Lists/hooks.ts

@@ -1,99 +1,148 @@
-import { KeyboardEvent, RefObject, useEffect, useState } from 'react';
+import { KeyboardEvent, RefObject, useCallback, useRef, useState } from 'react';
 
-export type UseKeyboardNavigationProps<T extends HTMLElement> = {
-  ids: Array<number | string>;
-  expandedIds: Array<number | string>;
-  parentRef?: RefObject<T>;
+import { FocusFlattenItem, ItemId } from '../Items';
+
+type UseNewKeyboardNavigationProps<T extends HTMLElement> = {
+  mainRef?: RefObject<T>;
   btnRef?: RefObject<HTMLButtonElement>;
-  itemRefs?: RefObject<HTMLElement>[];
+  focusFlattenItems: Record<string, FocusFlattenItem>;
 };
 
-export function useKeyboardNavigation<T extends HTMLElement>({
-  ids,
-  itemRefs,
-  expandedIds,
-  parentRef,
+export function useNewKeyboardNavigation<T extends HTMLElement>({
+  mainRef,
   btnRef,
-}: UseKeyboardNavigationProps<T>) {
-  const [activeFocusIndex, setActiveFocusIndex] = useState<number>(-1);
-  const [openNestedIndex, setOpenNestedIndex] = useState<number>(-1);
-
-  const handleListKeyDown = (e: KeyboardEvent<T>) => {
-    switch (e.key) {
-      case 'ArrowDown': {
-        setActiveFocusIndex(activeIndex => Math.min(activeIndex + 1, ids.length - 1));
-
-        // TODO: go to loader from last item
-        // if (activeFocusIndex === ids.length - 2) {
-        //   return;
-        // }
-
-        e.stopPropagation();
-        e.preventDefault();
-        return;
-      }
-      case 'ArrowUp': {
-        if (activeFocusIndex === 0) {
-          parentRef?.current?.focus();
-          setActiveFocusIndex(-1);
+  focusFlattenItems,
+}: UseNewKeyboardNavigationProps<T>) {
+  const [activeItemId, setActiveItemId] = useState<ItemId | undefined>();
+
+  const activeItemIdRef = useRef<ItemId | undefined>();
+
+  const handleListKeyDownFactory = useCallback(
+    (ids: ItemId[], expandedIds: ItemId[]) => (e: KeyboardEvent<T>) => {
+      switch (e.key) {
+        case 'ArrowDown': {
+          if (activeItemIdRef.current !== undefined) {
+            const activeIndex = ids.findIndex(id => id === activeItemIdRef.current);
+
+            const nextId = Math.min(activeIndex + 1, ids.length - 1);
+            const itemId = ids[nextId];
+            const item = focusFlattenItems[itemId];
+
+            activeItemIdRef.current = itemId;
+            setActiveItemId(itemId);
+
+            if (item.type !== 'group') {
+              item.itemRef?.current?.focus();
+            }
+          } else {
+            const itemId = ids[0];
+            const item = focusFlattenItems[itemId];
+
+            activeItemIdRef.current = itemId;
+            setActiveItemId(itemId);
+
+            if (item.type !== 'group') {
+              item.itemRef?.current?.focus();
+            }
+          }
+
+          e.stopPropagation();
+          e.preventDefault();
+          return;
+        }
+        case 'ArrowUp': {
+          if (ids[0] === activeItemIdRef.current) {
+            const item = focusFlattenItems[ids[0]];
+
+            if (item.parentId === '~main') {
+              activeItemIdRef.current = undefined;
+              setActiveItemId(undefined);
+              mainRef?.current?.focus();
+            }
+            return;
+          }
+
+          if (activeItemIdRef.current !== undefined) {
+            const activeIndex = ids.findIndex(id => id === activeItemIdRef.current);
+            const nextId = Math.max(activeIndex - 1, 0);
+            const itemId = ids[nextId];
+            const item = focusFlattenItems[itemId];
+
+            activeItemIdRef.current = itemId;
+            setActiveItemId(itemId);
+
+            if (item.type !== 'group') {
+              item.itemRef?.current?.focus();
+            }
+          }
+
+          e.stopPropagation();
+          e.preventDefault();
           return;
         }
 
-        setActiveFocusIndex(activeIndex => Math.max(activeIndex - 1, 0));
+        case 'ArrowRight': {
+          if (activeItemIdRef.current !== undefined && expandedIds.includes(activeItemIdRef.current)) {
+            const item = focusFlattenItems[activeItemIdRef.current];
 
-        e.stopPropagation();
-        e.preventDefault();
-        return;
-      }
-      case 'ArrowRight': {
-        if (expandedIds.includes(ids[activeFocusIndex])) {
-          setOpenNestedIndex(activeFocusIndex);
-        }
+            const newItemId = item.items[0];
+            const newItem = focusFlattenItems[newItemId];
 
-        e.stopPropagation();
-        e.preventDefault();
+            activeItemIdRef.current = newItemId;
+            setActiveItemId(newItemId);
 
-        return;
-      }
-      case 'Tab': {
-        if (parentRef && activeFocusIndex !== -1) {
+            setTimeout(() => newItem.itemRef?.current?.focus(), 0);
+          }
+
+          e.stopPropagation();
           e.preventDefault();
 
-          parentRef?.current?.focus();
-        } else if (activeFocusIndex === -1) {
-          btnRef && !e.shiftKey ? btnRef?.current?.focus() : parentRef?.current?.focus();
+          return;
         }
 
-        setOpenNestedIndex(-1);
-        setActiveFocusIndex(-1);
+        case 'Tab': {
+          if (activeItemIdRef.current !== undefined) {
+            e.preventDefault();
+            e.stopPropagation();
 
-        return;
-      }
-      default: {
-        return;
+            activeItemIdRef.current = undefined;
+            setActiveItemId(undefined);
+            mainRef?.current?.focus();
+          } else {
+            btnRef && !e.shiftKey ? btnRef?.current?.focus() : mainRef?.current?.focus();
+          }
+
+          return;
+        }
+        default: {
+          return;
+        }
       }
-    }
-  };
+    },
+    [focusFlattenItems, mainRef, btnRef],
+  );
 
-  const resetNestedIndex = () => {
-    setActiveFocusIndex(openNestedIndex);
-    setOpenNestedIndex(-1);
-  };
+  const resetActiveItemId = useCallback(() => {
+    setActiveItemId(undefined);
+    activeItemIdRef.current = undefined;
+  }, []);
 
-  const resetActiveFocusIndex = () => {
-    setActiveFocusIndex(-1);
-  };
+  const forceUpdateActiveItemId = useCallback(
+    (itemId: ItemId) => {
+      setActiveItemId(itemId);
+      activeItemIdRef.current = itemId;
+
+      const item = focusFlattenItems[itemId];
 
-  useEffect(() => {
-    activeFocusIndex !== -1 && openNestedIndex === -1 && itemRefs?.[activeFocusIndex]?.current?.focus();
-  }, [activeFocusIndex, itemRefs, openNestedIndex]);
+      item?.itemRef?.current?.focus();
+    },
+    [focusFlattenItems],
+  );
 
   return {
-    activeFocusIndex,
-    setActiveFocusIndex,
-    openNestedIndex,
-    resetNestedIndex,
-    resetActiveFocusIndex,
-    handleListKeyDown,
+    resetActiveItemId,
+    activeItemId,
+    forceUpdateActiveItemId,
+    handleListKeyDownFactory,
   };
 }

package/src/components/Lists/index.ts

@@ -7,7 +7,7 @@ export type {
   SelectionMultipleState,
   SelectionSingleProps,
   SelectionMultipleProps,
-  isSelectionSingleProps,
-  isSelectionMultipleProps,
   SelectionSingleValueType,
 } from './contexts';
+
+export { useSelectionContext, useCollapseContext, isSelectionSingleProps, isSelectionMultipleProps } from './contexts';