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

package/src/components/Items/hooks.tsx

@@ -1,104 +1,124 @@
-import { createRef, RefObject, useEffect, useMemo } from 'react';
+import { createRef, RefObject, useMemo } from 'react';
 
-import { extractAllChildIds, extractChildIds } from '../../utils';
-import { useSelectionContext } from '../Lists/contexts';
+import { useNewListContext, useSelectionContext } from '../Lists/contexts';
 import { AccordionItem } from './AccordionItem';
 import { BaseItem } from './BaseItem';
 import { GroupItem } from './GroupItem';
+import { GroupSelectItem } from './GroupSelectItem';
 import { NextListItem } from './NextListItem';
-import { ItemProps } from './types';
-import { addItemsIds, isAccordionItemProps, isGroupItemProps, isNextListItemProps } from './utils';
+import {
+  Flatten,
+  FlattenAccordionItem,
+  FlattenBaseItem,
+  FlattenGroupSelectListItem,
+  FlattenNextListItem,
+  ItemId,
+} from './types';
+import { isAccordionItem, isGroupItem, isGroupSelectItem, isNextListItem } from './utils';
+
+export function useRenderItems(focusCloseChildIds?: ItemId[]) {
+  const { focusFlattenItems, flattenItems } = useNewListContext();
+  const { isSelectionSingle } = useSelectionContext();
+
+  return useMemo(() => {
+    if (!focusCloseChildIds) {
+      return [null];
+    }
 
-export function useRenderItems(items: ItemProps[]) {
-  return useMemo(
-    () =>
-      items.map(item => {
-        if (isGroupItemProps(item)) {
-          return <GroupItem {...item} key={item.label} />;
-        }
+    return focusCloseChildIds.map(id => {
+      const { itemRef, key, originalId, items } = focusFlattenItems[id];
 
-        if (isAccordionItemProps(item)) {
-          return <AccordionItem {...item} key={item.key} />;
-        }
+      const flattenItem = flattenItems[originalId];
 
-        if (isNextListItemProps(item)) {
-          return <NextListItem {...item} key={item.key} />;
-        }
+      if (
+        isGroupItem(flattenItem) ||
+        (isSelectionSingle && isGroupSelectItem<FlattenGroupSelectListItem>(flattenItem))
+      ) {
+        return <GroupItem {...flattenItem} items={items} key={key} />;
+      }
+      if (isGroupSelectItem<FlattenGroupSelectListItem>(flattenItem)) {
+        return <GroupSelectItem {...flattenItem} items={items} itemRef={itemRef} key={key} />;
+      }
+      if (isAccordionItem<FlattenAccordionItem>(flattenItem)) {
+        return <AccordionItem {...flattenItem} items={items} itemRef={itemRef} key={key} />;
+      }
+      if (isNextListItem<FlattenNextListItem>(flattenItem)) {
+        return <NextListItem {...flattenItem} focusId={id} items={items} itemRef={itemRef} key={key} />;
+      }
 
-        return <BaseItem {...item} key={item.key} />;
-      }),
-    [items],
-  );
+      return <BaseItem {...flattenItem} itemRef={itemRef} key={key} />;
+    });
+  }, [flattenItems, focusCloseChildIds, focusFlattenItems, isSelectionSingle]);
 }
 
-type UseItemsWithIdsProps = {
+type UseCreateBaseItemsProps = {
   search?: boolean;
   footerActiveElementsRefs?: RefObject<HTMLElement>[];
 };
 
-export function useItemsWithIds({ search, footerActiveElementsRefs }: UseItemsWithIdsProps) {
+export function useCreateBaseItems({ footerActiveElementsRefs }: UseCreateBaseItemsProps): {
+  searchItem: Flatten<FlattenBaseItem, 'itemRef'>;
+  footerItems: Flatten<FlattenBaseItem, 'itemRef'>[];
+} {
   return useMemo(
     () => ({
-      search: addItemsIds(
-        search ? ([{ itemRef: createRef<HTMLInputElement>() }] as unknown as ItemProps[]) : [],
-        'search',
-      ),
-      footerRefs: addItemsIds(
-        footerActiveElementsRefs
-          ? (footerActiveElementsRefs?.map(ref => ({ itemRef: ref })) as unknown as ItemProps[])
-          : [],
-        'footer',
-      ),
+      searchItem: {
+        itemRef: createRef<HTMLInputElement>(),
+        id: '~search',
+        parentId: '~main',
+        items: [],
+        allChildIds: [],
+      },
+      footerItems:
+        footerActiveElementsRefs?.map((itemRef, idx) => ({
+          id: `~footer__${idx}`,
+          itemRef,
+          parentId: '~main',
+          items: [],
+          allChildIds: [],
+        })) ?? [],
     }),
-
-    [footerActiveElementsRefs, search],
+    [footerActiveElementsRefs],
   );
 }
 
 type UseGroupItemSelectionProps = {
-  items: ItemProps[];
-  id?: string | number;
+  allChildIds: ItemId[];
+  items: ItemId[];
+  id: ItemId;
   disabled?: boolean;
 };
 
-export function useGroupItemSelection({ id, items, disabled }: UseGroupItemSelectionProps) {
+export function useGroupItemSelection({ id, allChildIds }: UseGroupItemSelectionProps) {
   const { value, setValue, isSelectionMultiple } = useSelectionContext();
-  const { childIds, allChildIds } = useMemo(
-    () => ({ childIds: extractChildIds({ items }), allChildIds: extractAllChildIds({ items }) }),
-    [items],
+  const { flattenItems } = useNewListContext();
+
+  const baseChildIds = useMemo(
+    () =>
+      allChildIds.filter(itemId => {
+        const item = flattenItems[itemId];
+
+        return item && !('type' in item);
+      }),
+    [allChildIds, flattenItems],
   );
 
-  const isIndeterminate = isSelectionMultiple
-    ? allChildIds.some(childId => value?.includes(childId))
-    : allChildIds.includes(value ?? '');
-  const checked = isSelectionMultiple ? allChildIds.every(childId => value?.includes(childId)) : undefined;
+  const checked = isSelectionMultiple
+    ? value && Boolean(value.length) && baseChildIds.every(childId => value?.includes(childId))
+    : undefined;
 
-  useEffect(() => {
-    if (isSelectionMultiple) {
-      if (checked && !value?.includes(id)) {
-        setValue?.((value: Array<number | string>) => (value ?? []).concat([id ?? '']));
-      }
-      if (!checked && value?.includes(id)) {
-        setValue?.((value: Array<number | string>) => (value ?? []).filter(itemId => itemId !== id));
-      }
-    }
-  }, [checked, disabled, id, isSelectionMultiple, setValue, value]);
+  const indeterminate = isSelectionMultiple
+    ? !checked && baseChildIds.some(childId => value?.includes(childId))
+    : baseChildIds.includes(value ?? '');
 
   const handleOnSelect = () => {
     if (checked) {
-      setValue?.((value: Array<string | number>) =>
-        (value ?? []).filter(itemId => itemId !== id && !childIds.includes(itemId)),
-      );
-      return;
-    }
-
-    if (isIndeterminate) {
-      setValue?.((value: Array<string | number>) => Array.from(new Set([...(value ?? []), ...childIds, id])));
+      setValue?.((value: ItemId[]) => (value ?? []).filter(itemId => itemId !== id && !baseChildIds.includes(itemId)));
       return;
     }
 
-    setValue?.((value: Array<string | number>) => (value ?? []).concat([...childIds, id ?? '']));
+    setValue?.((value: ItemId[]) => Array.from(new Set([...(value ?? []), ...baseChildIds])));
   };
 
-  return { checked, isIndeterminate, handleOnSelect };
+  return { checked, indeterminate, handleOnSelect };
 }

package/src/components/Items/index.ts

@@ -1,9 +1,5 @@
-export * from './BaseItem';
-export * from './NextListItem';
-export * from './AccordionItem';
-export * from './GroupItem';
-export * from './SearchItem';
 export * from './hooks';
 export * from './types';
 export * from './utils';
+export * from './SearchItem';
 export * from './PinGroupItem';

package/src/components/Items/types.ts

@@ -3,26 +3,17 @@ import { FocusEvent, KeyboardEvent, MouseEvent, ReactNode, RefObject } from 'rea
 import { TruncateStringProps } from '@snack-uikit/truncate-string';
 import { WithSupportProps } from '@snack-uikit/utils';
 
-import { SeparatorProps } from '../../helperComponents';
-import { ScrollProps, SearchState } from '../../types';
+import { ItemContentProps } from '../../helperComponents';
+import { ScrollProps } from '../../types';
 
-export type ItemContentProps = {
-  option: string;
-  caption?: string;
-  description?: string;
-  truncate?: {
-    option?: number;
-    description?: number;
-    variant?: TruncateStringProps['variant'];
-  };
-};
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type AnyType = any;
 
-export type BaseItemPrivateProps = {
-  expandIcon?: ReactNode;
-  open?: boolean;
-};
+export type ItemId = string | number;
 
-export type BaseItemProps = WithSupportProps<{
+type ItemContent = ItemContentProps;
+
+export type BaseItem = WithSupportProps<{
   /**
    * Слот до основного контента
    * @type ReactElement
@@ -33,9 +24,10 @@ export type BaseItemProps = WithSupportProps<{
    * @type ReactElement
    */
   afterContent?: ReactNode;
-  /** Основной контент айтема */
-  content: ItemContentProps;
-
+  /**
+   * Основной контент айтема
+   */
+  content?: ItemContent | ReactNode;
   /** Колбек обработки клика */
   onClick?(e: MouseEvent<HTMLElement>): void;
   /** Колбек обработки нажатия кнопки мыши */
@@ -46,16 +38,14 @@ export type BaseItemProps = WithSupportProps<{
   onFocus?(e: FocusEvent<HTMLElement>): void;
   /** Колбек обработки блюра */
   onBlur?(e: FocusEvent<HTMLElement>): void;
-
   /** Уникальный идентификатор */
-  id?: string | number;
-
+  id?: ItemId;
   /** Флаг неактивности элемента */
   disabled?: boolean;
 
   itemRef?: RefObject<HTMLElement>;
-  className?: string;
 
+  className?: string;
   /**
    * Флаг отображения отключения реакции на любое css состояние (hover/focus и тд)
    * <br>
@@ -67,31 +57,90 @@ export type BaseItemProps = WithSupportProps<{
    */
   switch?: boolean;
 
-  key?: string | number;
-
   itemWrapRender?(item: ReactNode): ReactNode;
 }>;
 
-type BaseItemsWithoutNonGroupProps = Omit<BaseItemProps, 'switch' | 'inactive'>;
+type BaseItemWithoutNonGroup = Omit<BaseItem, 'switch' | 'inactive'>;
 
 // eslint-disable-next-line no-use-before-define
-export type ItemProps = BaseItemProps | AccordionItemProps | NextListItemProps | GroupItemProps;
+export type Item = BaseItem | AccordionItem | NextListItem | GroupItem | GroupSelectItem;
 
-export type AccordionItemProps = BaseItemsWithoutNonGroupProps & {
-  items: ItemProps[];
+export type AccordionItem = BaseItemWithoutNonGroup & {
+  items: Item[];
   type: 'collapse';
 };
 
-export type NextListItemProps = BaseItemsWithoutNonGroupProps & {
-  items: ItemProps[];
-  type: 'next-list';
-  placement?: 'right-start' | 'left-start' | 'left' | 'right' | 'left-end' | 'right-end';
-  search?: SearchState;
-  onSublistOpenChanged?(open: boolean, id?: string | number): void;
-  loading?: boolean;
-} & ScrollProps;
-
-export type GroupItemProps = Omit<SeparatorProps, 'size'> & {
-  items: ItemProps[];
-  id?: string | number;
+export type NextListItem = BaseItemWithoutNonGroup &
+  ScrollProps & {
+    items: Item[];
+    type: 'next-list';
+
+    onSublistOpenChanged?(open: boolean, id?: ItemId): void;
+
+    loading?: boolean;
+    dataError?: boolean;
+    dataFiltered?: boolean;
+
+    placement?: 'right-start' | 'left-start' | 'left' | 'right' | 'left-end' | 'right-end';
+  };
+
+type CommonGroupItem = {
+  label?: string;
+  truncate?: {
+    variant?: TruncateStringProps['variant'];
+  };
+  mode?: 'primary' | 'secondary';
+  divider?: boolean;
+};
+
+export type GroupItem = CommonGroupItem & {
+  items: Item[];
+  type: 'group';
+};
+
+export type GroupSelectItem = CommonGroupItem & {
+  items: Item[];
+  type: 'group-select';
+
+  id?: ItemId;
+  itemRef?: RefObject<HTMLElement>;
 };
+
+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>;
+
+export type CommonFlattenProps = {
+  items: ItemId[];
+  allChildIds: ItemId[];
+};
+
+export type FlattenBaseItem = Flatten<BaseItem, 'id'>;
+export type FlattenNextListItem = Flatten<Omit<NextListItem, 'items'>, 'id'>;
+export type FlattenGroupListItem = Omit<GroupItem, 'items'> & { id: ItemId };
+export type FlattenGroupSelectListItem = Flatten<Omit<GroupSelectItem, 'items'>, 'id'>;
+export type FlattenAccordionItem = Flatten<Omit<AccordionItem, 'items'>, 'id'>;
+
+export type FlattenItem =
+  | FlattenBaseItem
+  | ((FlattenNextListItem | FlattenGroupListItem | FlattenAccordionItem | FlattenGroupSelectListItem) &
+      CommonFlattenProps);
+
+export type FocusFlattenItem = {
+  key: ItemId;
+  id: ItemId;
+
+  originalId: ItemId;
+  parentId?: ItemId;
+
+  itemRef?: RefObject<HTMLElement>;
+  type?: 'next-list' | 'collapse' | 'group' | 'group-select';
+
+  disabled?: boolean;
+} & CommonFlattenProps;
+
+export type ItemProps = Item;
+export type BaseItemProps = BaseItem;
+export type GroupItemProps = GroupItem;
+export type NextListItemProps = NextListItem;
+export type AccordionItemProps = AccordionItem;
+export type GroupSelectItemProps = GroupSelectItem;

package/src/components/Items/utils.ts

@@ -1,71 +1,212 @@
 import { createRef } from 'react';
 
-import { AccordionItemProps, BaseItemProps, GroupItemProps, ItemProps, NextListItemProps } from './types';
+import { ItemContentProps } from '../../helperComponents';
+import {
+  AccordionItem,
+  AnyType,
+  BaseItem,
+  FlattenItem,
+  FocusFlattenItem,
+  GroupItem,
+  GroupSelectItem,
+  Item,
+  ItemId,
+  NextListItem,
+} 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 isBaseItem<ReturnType = BaseItem>(item: AnyType): item is ReturnType {
+  return item && !('items' in item);
 }
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function isAccordionItemProps(item: any): item is AccordionItemProps {
-  return 'items' in item && item['type'] === 'collapse';
+export function isAccordionItem<ReturnType = AccordionItem>(item: AnyType): item is ReturnType {
+  return item && 'items' in item && item['type'] === 'collapse';
 }
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function isNextListItemProps(item: any): item is NextListItemProps {
-  return 'items' in item && item['type'] === 'next-list';
+export function isNextListItem<ReturnType = NextListItem>(item: AnyType): item is ReturnType {
+  return item && 'items' in item && item['type'] === 'next-list';
 }
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function isGroupItemProps(item: any): item is GroupItemProps {
-  return 'items' in item && item['type'] === undefined;
+export function isGroupItem<ReturnType = GroupItem>(item: AnyType): item is ReturnType {
+  return item && 'items' in item && item['type'] === 'group';
+}
+export function isGroupSelectItem<ReturnType = GroupSelectItem>(item: AnyType): item is ReturnType {
+  return item && 'items' in item && item['type'] === 'group-select';
+}
+export function isContentItem(item: AnyType): item is ItemContentProps {
+  return typeof item === 'object' && item['option'] !== 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;
+export const isBaseItemProps = isBaseItem;
+export const isAccordionItemProps = isAccordionItem;
+export const isNextListItemProps = isNextListItem;
+export const isGroupItemProps = isGroupItem;
 
-  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),
-  };
-}
+type FlattenProps = {
+  item: Item;
+  idx: number;
+  prefix?: ItemId;
+  parentId?: ItemId;
+};
 
-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;
+type KindFlattenItemsProps = {
+  items: Item[];
+  prefix?: ItemId;
+  parentId?: ItemId;
+};
 
-    if (isGroupItemProps(item)) {
-      return { key: autoId, ...item, id: itemId, items: addItemsIds(item.items, itemId) };
-    }
+export function kindFlattenItems({ items, prefix, parentId }: KindFlattenItemsProps) {
+  const flattenItems: Record<string, FlattenItem> = {};
+  const focusFlattenItems: Record<string, FocusFlattenItem> = {};
 
-    if (isAccordionItemProps(item) || isNextListItemProps(item)) {
-      return {
-        key: autoId,
+  function flatten({ item, idx, prefix, parentId = '~main' }: FlattenProps): {
+    id: ItemId;
+    children: ItemId[];
+    focusChildren: ItemId[];
+    autoId: ItemId;
+  } {
+    const autoId = prefix !== undefined ? [prefix, idx].join('-') : String(idx);
+    const itemId = (!isGroupItem(item) ? item.id : undefined) ?? autoId;
+
+    if (isBaseItem(item)) {
+      flattenItems[itemId] = {
         ...item,
+        items: [],
+        allChildIds: [],
         id: itemId,
-        items: addItemsIds(item.items, itemId),
+      };
+
+      focusFlattenItems[autoId] = {
+        key: autoId,
+        originalId: itemId,
+        id: autoId,
+        disabled: item.disabled,
+        parentId,
+        items: [],
+        allChildIds: [],
         itemRef: item.itemRef || createRef<HTMLElement>(),
       };
+
+      return { id: itemId, children: [itemId], autoId, focusChildren: [autoId] };
     }
 
-    return { key: autoId, ...item, id: itemId, itemRef: item.itemRef || createRef<HTMLElement>() };
-  });
+    let allChildIds: ItemId[] = [];
+    let allFocusChildIds: ItemId[] = [];
+    const closeChildIds: ItemId[] = [];
+    const autoChildIds: ItemId[] = [];
+
+    const { items, ...rest } = item;
+    const childActiveParent = isGroupItem(item) ? parentId ?? '~main' : autoId;
+
+    for (let idx = 0; idx < items.length; idx++) {
+      const { id, children, autoId, focusChildren } = flatten({
+        item: items[idx],
+        idx,
+        prefix: itemId,
+        parentId: childActiveParent,
+      });
+
+      autoChildIds.push(autoId);
+      closeChildIds.push(id);
+      allChildIds = allChildIds.concat(children);
+      allFocusChildIds = allFocusChildIds.concat(focusChildren);
+    }
+
+    const children = [...new Set(allChildIds.concat(closeChildIds))];
+    const focusChildren = [...new Set(allFocusChildIds.concat(autoChildIds))];
+
+    flattenItems[itemId] = {
+      ...rest,
+      id: itemId,
+      items: [],
+      allChildIds: children,
+    };
+
+    focusFlattenItems[autoId] = {
+      key: autoId,
+      originalId: itemId,
+      id: autoId,
+      parentId,
+      items: autoChildIds,
+      allChildIds: focusChildren,
+      disabled: (item.type === 'collapse' || item.type === 'next-list') && item.disabled,
+      type: item.type,
+      itemRef: (!isGroupItem(item) ? item.itemRef : undefined) ?? createRef<HTMLElement>(),
+    };
+
+    return { id: itemId, children, autoId, focusChildren };
+  }
+
+  const closeChildIds: ItemId[] = [];
+  const autoChildIds: ItemId[] = [];
+  let allChildIds: ItemId[] = [];
+
+  for (let idx = 0; idx < items.length; idx++) {
+    const { id, children, autoId } = flatten({ item: items[idx], idx, prefix, parentId });
+
+    autoChildIds.push(autoId);
+    closeChildIds.push(id);
+    allChildIds.push(id);
+    allChildIds = allChildIds.concat(children);
+  }
+
+  const children = [...new Set(allChildIds)];
+
+  return {
+    focusCloseChildIds: autoChildIds,
+    allChildIds: children,
+    flattenItems,
+    focusFlattenItems,
+  };
+}
+
+type ExtractActiveItemsProps = {
+  focusFlattenItems: Record<string, FocusFlattenItem>;
+  focusCloseChildIds: ItemId[];
+  openCollapseItems: ItemId[];
+};
+
+type ExtractActiveItemsReturnType = {
+  ids: ItemId[];
+  expandedIds: ItemId[];
+};
+
+export function extractActiveItems({
+  focusFlattenItems,
+  focusCloseChildIds,
+  openCollapseItems,
+}: ExtractActiveItemsProps): ExtractActiveItemsReturnType {
+  const ids: ItemId[] = [];
+  const expandedIds: ItemId[] = [];
+
+  function internalFn(focusCloseChildIds: ItemId[]) {
+    focusCloseChildIds.forEach(id => {
+      const child = focusFlattenItems[id];
+
+      if (child.type === 'group') {
+        internalFn(child.items);
+        return;
+      }
+
+      if (!child.disabled) {
+        ids.push(child.id);
+
+        if (child.type === 'group-select') {
+          internalFn(child.items);
+          return;
+        }
+
+        if (child.type) {
+          expandedIds.push(id);
+
+          if (openCollapseItems.includes(id)) {
+            internalFn(child.items);
+          }
+        }
+      }
+    });
+  }
+
+  internalFn(focusCloseChildIds);
+
+  return {
+    ids,
+    expandedIds,
+  };
 }