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

package/src/components/Items/NextListItem/NextListItem.tsx

@@ -1,122 +1,118 @@
-import { useCallback, useMemo, useRef, useState } from 'react';
+import { KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { Dropdown, DropdownProps } from '@snack-uikit/dropdown';
+import { Dropdown } from '@snack-uikit/dropdown';
 import { ChevronRightSVG } from '@snack-uikit/icons';
 
-import { withCollapsedItems } from '../../../utils';
-import { ParentListContext, useParentListContext } from '../../Lists/contexts';
+import { useCollapseContext, useFocusListContext, useNewListContext, useSelectionContext } from '../../Lists/contexts';
 import { ListPrivate } from '../../Lists/ListPrivate';
 import { BaseItem } from '../BaseItem';
 import { useGroupItemSelection } from '../hooks';
-import { NextListItemProps } from '../types';
-import { useKeyboardNavigation } from './hooks';
-
-const FALLBACK_PLACEMENTS: DropdownProps['fallbackPlacements'] = [
-  'right',
-  'right-start',
-  'right-end',
-  'left',
-  'left-start',
-  'left-end',
-];
+import { CommonFlattenProps, FlattenNextListItem, ItemId } from '../types';
+import { extractActiveItems, isNextListItem } from '../utils';
+import { FALLBACK_PLACEMENTS } from './constants';
+
+type NextListItemProps = Omit<FlattenNextListItem, 'type'> & CommonFlattenProps & { focusId?: ItemId };
 
 export function NextListItem({
-  items: itemsProp,
+  items,
   placement = 'right-start',
   id,
-  search,
   scroll,
   scrollRef,
   disabled,
   onSublistOpenChanged,
+  allChildIds,
   loading = false,
+  focusId = id,
   ...option
 }: NextListItemProps) {
-  const listRef = useRef<HTMLUListElement>(null);
+  const { flattenItems, focusFlattenItems } = useNewListContext();
+  const { isSelectionMultiple } = useSelectionContext();
+  const { openCollapseItems = [] } = useCollapseContext();
 
-  const [openCollapsedItems, setOpenCollapsedItems] = useState<Array<number | string>>([]);
+  const item = flattenItems[id];
 
-  const { items, itemRefs, ids, expandedIds } = useMemo(
-    () =>
-      withCollapsedItems({
-        items: itemsProp,
-        openCollapsedItems,
-      }),
-    [itemsProp, openCollapsedItems],
-  );
+  const { ids, expandedIds } = useMemo(() => {
+    const { ids, expandedIds } = extractActiveItems({
+      focusCloseChildIds: items,
+      focusFlattenItems,
+      openCollapseItems,
+      isSelectionMultiple,
+    });
+
+    return { ids, expandedIds: expandedIds.concat([id]) };
+  }, [focusFlattenItems, id, isSelectionMultiple, items, openCollapseItems]);
+
+  const { handleListKeyDownFactory, activeItemId, forceUpdateActiveItemId } = useFocusListContext();
+
+  const [open, setOpen] = useState<boolean>();
+
+  const handleListKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLElement>) => {
+      handleListKeyDownFactory(ids, expandedIds)(e);
+
+      if (e.key === 'ArrowLeft') {
+        forceUpdateActiveItemId?.(focusId);
+        setOpen(false);
+        e.stopPropagation();
 
-  const { parentOpenNestedIndex, parentIds, triggerRef, parentResetNestedIndex, parentResetActiveFocusIndex } =
-    useParentListContext();
-
-  const {
-    open,
-    setOpen,
-    handleListKeyDown,
-    activeFocusIndex,
-    openNestedIndex,
-    resetNestedIndex,
-    resetActiveFocusIndex,
-  } = useKeyboardNavigation({ ids, expandedIds, itemRefs, id });
-
-  const { isIndeterminate, checked, handleOnSelect } = useGroupItemSelection({ items: itemsProp, id, disabled });
-
-  const handleOpenChange = useCallback(
-    (open: boolean) => {
-      if (!open) {
-        resetActiveFocusIndex();
-        resetNestedIndex();
-        setOpenCollapsedItems([]);
+        return;
       }
-      onSublistOpenChanged?.(open, id);
-      setOpen(open);
     },
-    [id, onSublistOpenChanged, resetActiveFocusIndex, resetNestedIndex, setOpen],
+    [handleListKeyDownFactory, ids, expandedIds, forceUpdateActiveItemId, focusId],
   );
 
-  const handleOutsideClick = useCallback(() => {
-    parentResetNestedIndex?.();
-    parentResetActiveFocusIndex?.();
+  const { indeterminate, checked, handleOnSelect } = useGroupItemSelection({
+    items: isNextListItem<FlattenNextListItem>(item) ? item.items : [],
+    id,
+    disabled,
+    allChildIds,
+  });
 
+  const handleOutsideClick = useCallback(() => {
+    forceUpdateActiveItemId?.('~drop-focus');
+    setOpen(false);
     return true;
-  }, [parentResetActiveFocusIndex, parentResetNestedIndex]);
+  }, [forceUpdateActiveItemId]);
+
+  const isOpen = useMemo(
+    () => Boolean(!disabled && activeItemId && focusFlattenItems[focusId].allChildIds.includes(activeItemId)),
+    [activeItemId, disabled, focusFlattenItems, focusId],
+  );
+
+  useEffect(() => {
+    setOpen(open => open && isOpen);
+  }, [id, isOpen]);
+
+  const listRef = useRef<HTMLElement>(null);
 
   return (
     <Dropdown
       outsideClick={handleOutsideClick}
       fallbackPlacements={FALLBACK_PLACEMENTS}
       content={
-        <ParentListContext.Provider
-          value={{
-            parentIds: ids,
-            parentActiveFocusIndex: activeFocusIndex,
-            parentExpandedIds: expandedIds,
-            parentItemRefs: itemRefs,
-            parentOpenNestedIndex: openNestedIndex,
-            triggerRef,
-            parentRef: listRef,
-            parentResetNestedIndex: resetNestedIndex,
-            parentResetActiveFocusIndex: resetActiveFocusIndex,
-            toggleOpenCollapsedItems: id =>
-              setOpenCollapsedItems(items =>
-                items.includes(id) ? items.filter(item => item !== id) : items.concat([id]),
-              ),
+        <ListPrivate
+          onKeyDown={handleListKeyDown}
+          items={items}
+          nested
+          scroll={scroll}
+          tabIndex={0}
+          ref={listRef}
+          onFocus={e => {
+            e.stopPropagation();
+            forceUpdateActiveItemId?.(ids[0]);
           }}
-        >
-          <ListPrivate
-            onKeyDown={handleListKeyDown}
-            items={items}
-            nested
-            search={search}
-            scroll={scroll}
-            scrollRef={scrollRef}
-            limitedScrollHeight
-            loading={loading}
-          />
-        </ParentListContext.Provider>
+          scrollRef={scrollRef}
+          limitedScrollHeight
+          loading={loading}
+        />
       }
       trigger='hover'
-      open={(open || parentIds[parentOpenNestedIndex] === id) && !disabled}
-      onOpenChange={handleOpenChange}
+      open={isOpen || open}
+      onOpenChange={value => {
+        setOpen(value);
+        onSublistOpenChanged?.(value, id);
+      }}
       placement={placement}
       widthStrategy='auto'
     >
@@ -127,7 +123,14 @@ export function NextListItem({
         expandIcon={<ChevronRightSVG />}
         id={id}
         isParentNode
-        indeterminate={isIndeterminate && !checked}
+        indeterminate={indeterminate}
+        checked={checked}
+        onOpenNestedList={() => {
+          setOpen(true);
+          setTimeout(() => {
+            listRef.current?.focus();
+          }, 0);
+        }}
         onSelect={handleOnSelect}
       />
     </Dropdown>

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

@@ -0,0 +1,12 @@
+import { DropdownProps } from '@snack-uikit/dropdown';
+
+export const FALLBACK_PLACEMENTS: DropdownProps['fallbackPlacements'] = [
+  'right',
+  'right-start',
+  'right-end',
+  'left',
+  'left-start',
+  'left-end',
+  'bottom',
+  'top',
+];

package/src/components/Items/PinGroupItem/PinGroupItem.tsx

@@ -1,28 +1,38 @@
 import cn from 'classnames';
 import { ReactNode } from 'react';
 
+import { Divider } from '@snack-uikit/divider';
+
+import { useNewListContext } from '../../Lists/contexts';
 import styles from './styles.module.scss';
 
 export function PinTopGroupItem({ children }: { children: ReactNode }) {
+  const { size = 's' } = useNewListContext();
+
   if (!children) {
     return null;
   }
 
   return (
-    <div className={cn(styles.pinTopItem)} data-test-id='list__pin-top-group-item'>
-      {children}
+    <div className={cn(styles.pinTopItem)} data-size={size} data-test-id='list__pin-top-group-item'>
+      <div>{children}</div>
+
+      <Divider weight='regular' />
     </div>
   );
 }
 
 export function PinBottomGroupItem({ children }: { children: ReactNode }) {
+  const { size = 's' } = useNewListContext();
+
   if (!children) {
     return null;
   }
 
   return (
-    <div className={cn(styles.pinBottomItem)} data-test-id='list__pin-bottom-group-item'>
-      {children}
+    <div className={cn(styles.pinBottomItem)} data-size={size} data-test-id='list__pin-bottom-group-item'>
+      <Divider weight='regular' />
+      <div>{children}</div>
     </div>
   );
 }

package/src/components/Items/PinGroupItem/styles.module.scss

@@ -1,17 +1,18 @@
 @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-dropList';
 @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
 
+$sizes: 's', 'm', 'l';
+
 .pinTopItem {
-  @include composite-var($drop-list-content-pin-top);
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include composite-var($drop-list, 'item', $size, 'content-pin-top');
+    }
+  }
 
   display: flex;
   flex-direction: column;
-
-  border-color: $sys-neutral-decor-default;
-  border-style: solid;
-  border-top: 0;
-  border-right: 0;
-  border-left: 0;
+  border: none;
 
   li,
   ul {
@@ -20,16 +21,15 @@
 }
 
 .pinBottomItem {
-  @include composite-var($drop-list-content-pin-bottom);
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include composite-var($drop-list, 'item', $size, 'content-pin-bottom');
+    }
+  }
 
   display: flex;
   flex-direction: column;
-
-  border-color: $sys-neutral-decor-default;
-  border-style: solid;
-  border-right: 0;
-  border-bottom: 0;
-  border-left: 0;
+  border: none;
 
   li,
   ul {

package/src/components/Items/SearchItem/SearchItem.tsx

@@ -4,17 +4,17 @@ import { FocusEvent, KeyboardEvent, RefObject } from 'react';
 import { SearchPrivate } from '@snack-uikit/search-private';
 
 import { SearchState } from '../../../types';
-import { useListContext, useParentListContext } from '../../Lists/contexts';
+import { useNewListContext } from '../../Lists/contexts';
 import commonStyles from '../styles.module.scss';
 import styles from './styles.module.scss';
 
 export type SearchItemProps = {
   search?: SearchState;
+  itemRef?: RefObject<HTMLElement>;
 };
 
-export function SearchItem({ search }: SearchItemProps) {
-  const { parentItemRefs, parentSetActiveFocusIndex } = useParentListContext();
-  const { size } = useListContext();
+export function SearchItem({ search, itemRef }: SearchItemProps) {
+  const { size = 's' } = useNewListContext();
 
   const handleKeyDown = (e: KeyboardEvent) => {
     if (['ArrowDown', 'ArrowUp'].includes(e.key)) {
@@ -23,13 +23,11 @@ export function SearchItem({ search }: SearchItemProps) {
 
     if (['ArrowRight'].includes(e.key)) {
       e.stopPropagation();
+      e.preventDefault();
     }
   };
 
   const handleFocus = (e: FocusEvent<HTMLInputElement>) => {
-    if (e.target === parentItemRefs[0].current) {
-      parentSetActiveFocusIndex?.(0);
-    }
     e.stopPropagation();
   };
 
@@ -45,7 +43,7 @@ export function SearchItem({ search }: SearchItemProps) {
         onKeyDown={handleKeyDown}
         onFocus={handleFocus}
         {...search}
-        ref={parentItemRefs[0] as RefObject<HTMLInputElement>}
+        ref={itemRef as RefObject<HTMLInputElement>}
       />
     </div>
   );

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 { isSelectionMultiple } = 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) ||
+        (!isSelectionMultiple && 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, isSelectionMultiple]);
 }
 
-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/styles.module.scss

@@ -3,35 +3,13 @@
 
 $sizes: 's', 'm', 'l';
 
-.listItem {
-  cursor: pointer;
-
+.itemWrapper {
   position: relative;
-
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-
-  box-sizing: border-box;
-  width: max-content;
   min-width: 100%;
   margin: 0;
   padding: 0;
 
-  color: $sys-neutral-text-main;
-  text-align: start;
-
-  appearance: unset;
-  background-color: transparent;
-  border: none;
-  outline: none;
-
-  @each $size in $sizes {
-    &[data-size='#{$size}'] {
-      @include composite-var($drop-list, 'item', $size, 'container');
-    }
-  }
-
+  &::before,
   &::after {
     pointer-events: none;
     content: '';
@@ -45,6 +23,7 @@ $sizes: 's', 'm', 'l';
 
     background-color: transparent;
   }
+
   &[data-disabled],
   &:disabled {
     cursor: not-allowed;
@@ -66,12 +45,44 @@ $sizes: 's', 'm', 'l';
     &[data-focused],
     &:hover,
     &:focus-visible {
-      &::after {
+      &::before {
         opacity: $opacity-a008;
         background-color: $sys-neutral-accent-default;
       }
     }
+  }
+}
 
+.listItem {
+  cursor: pointer;
+
+  position: relative;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  box-sizing: border-box;
+  width: max-content;
+  min-width: 100%;
+  margin: 0;
+  padding: 0;
+
+  color: $sys-neutral-text-main;
+  text-align: start;
+
+  appearance: unset;
+  background-color: transparent;
+  border: none;
+  outline: none;
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include composite-var($drop-list, 'item', $size, 'container');
+    }
+  }
+
+  &:not([data-inactive], [data-disabled]) {
     &[data-focused],
     &:focus-visible {
       @include outline-inside-var($container-focused-s);