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

package/src/components/Items/BaseItem/BaseItem.tsx

@@ -1,18 +1,31 @@
 import cn from 'classnames';
-import { FocusEvent, KeyboardEvent, MouseEvent, RefObject } from 'react';
+import { FocusEvent, KeyboardEvent, MouseEvent, ReactNode, RefObject } from 'react';
 
 import { Checkbox, Switch } from '@snack-uikit/toggles';
-import { TruncateString } from '@snack-uikit/truncate-string';
 import { extractSupportProps } from '@snack-uikit/utils';
 
-import { useCollapseContext, useListContext, useParentListContext, useSelectionContext } from '../../Lists/contexts';
+import { ItemContent } from '../../../helperComponents';
+import {
+  useCollapseLevelContext,
+  useFocusListContext,
+  useNewListContext,
+  useSelectionContext,
+} from '../../Lists/contexts';
 import commonStyles from '../styles.module.scss';
-import { BaseItemPrivateProps, BaseItemProps } from '../types';
+import { FlattenBaseItem } from '../types';
+import { isContentItem } from '../utils';
 import { CHECKBOX_SIZE_MAP } from './constants';
 import styles from './styles.module.scss';
 
-type AllBaseItemProps = BaseItemProps &
-  BaseItemPrivateProps & { indeterminate?: boolean; onSelect?(): void; isParentNode?: boolean };
+type AllBaseItemProps = FlattenBaseItem & {
+  expandIcon?: ReactNode;
+  open?: boolean;
+  indeterminate?: boolean;
+  checked?: boolean;
+  onSelect?(): void;
+  isParentNode?: boolean;
+  onOpenNestedList?(e?: KeyboardEvent<HTMLElement>): void;
+};
 
 export function BaseItem({
   beforeContent,
@@ -29,44 +42,54 @@ export function BaseItem({
   onKeyDown,
   onFocus,
   indeterminate,
+  checked: checkedProp,
   onSelect,
+  onOpenNestedList,
   isParentNode,
   className,
   inactive,
   itemWrapRender,
   ...rest
 }: AllBaseItemProps) {
-  const { option, caption, description, truncate: contentTruncate } = content || {};
   const interactive = !inactive;
 
-  const { parentResetActiveFocusIndex } = useParentListContext();
-  const { size, marker, parent } = useListContext();
-  const { level = 0 } = useCollapseContext();
+  const { size = 's', marker, contentRender } = useNewListContext();
+  const { level = 0 } = useCollapseLevelContext();
+  const { forceUpdateActiveItemId } = useFocusListContext();
   const { value, onChange, mode, isSelectionSingle, isSelectionMultiple } = useSelectionContext();
 
-  const isChecked = isSelectionSingle ? value === id : value?.includes(id);
+  const isChecked = isSelectionSingle ? value === id : checkedProp ?? value?.includes(id ?? '');
 
   const handleChange = () => {
-    onChange?.(id ?? '');
+    onChange?.(id);
   };
 
   const handleItemMouseDown = (e: MouseEvent<HTMLElement>) => {
     if (disabled) return;
 
     if (interactive) {
-      parentResetActiveFocusIndex?.();
-
       if (!isParentNode) {
         handleChange();
       }
     }
 
     onMouseDown?.(e);
+
+    forceUpdateActiveItemId?.('~drop-focus');
   };
 
   const handleItemKeyDown = (e: KeyboardEvent<HTMLElement>) => {
     onKeyDown?.(e);
 
+    if (e.code === 'ArrowRight') {
+      onOpenNestedList?.(e);
+
+      e.preventDefault();
+      e.stopPropagation();
+
+      return;
+    }
+
     if (e.code === 'Space' || e.key === 'Enter') {
       if (isSelectionMultiple && isParentNode && onSelect) {
         onSelect();
@@ -100,7 +123,7 @@ export function BaseItem({
 
   const props = extractSupportProps(rest);
 
-  const item = (
+  const itemJSX = (
     <li
       data-type='outside'
       role={'menuitem'}
@@ -126,13 +149,14 @@ export function BaseItem({
       {!switchProp && isSelectionSingle && marker && !isParentNode && interactive && (
         <div className={styles.markerContainer} data-test-id='list__base-item-marker' />
       )}
+
       {!switchProp && isSelectionMultiple && interactive && (
         <div className={styles.checkbox}>
           <Checkbox
             size={CHECKBOX_SIZE_MAP[size ?? 's']}
             disabled={disabled}
             tabIndex={-1}
-            onChange={handleCheckboxChange}
+            onChange={isParentNode ? handleCheckboxChange : undefined}
             checked={isChecked}
             data-test-id='list__base-item-checkbox'
             onClick={handleCheckboxClick}
@@ -142,43 +166,24 @@ export function BaseItem({
       )}
 
       {beforeContent && <div className={styles.beforeContent}>{beforeContent}</div>}
-
-      <div className={styles.content}>
-        <div className={styles.headline}>
-          <span className={styles.option}>
-            <TruncateString
-              variant={contentTruncate?.variant}
-              text={option}
-              maxLines={contentTruncate?.option ?? 1}
-              data-test-id='list__base-item-option'
-            />
-          </span>
-          {caption && <span className={styles.caption}>{caption}</span>}
-        </div>
-
-        {description && (
-          <div className={styles.description}>
-            <TruncateString
-              text={description}
-              maxLines={contentTruncate?.description ?? 2}
-              data-test-id='list__base-item-description'
-            />
-          </div>
-        )}
-      </div>
-
+      {content && isContentItem(content) ? (
+        contentRender?.({ id, content }) ?? <ItemContent disabled={disabled} {...content} />
+      ) : (
+        <div className={styles.content}> {content} </div>
+      )}
       {afterContent}
 
       {switchProp && interactive && (
         <Switch disabled={disabled} checked={isChecked} data-test-id='list__base-item-switch' />
       )}
+
       {!switchProp && expandIcon && <span className={styles.expandableIcon}>{expandIcon}</span>}
     </li>
   );
 
   if (!itemWrapRender) {
-    return item;
+    return itemJSX;
   }
 
-  return itemWrapRender(item);
+  return itemWrapRender(itemJSX);
 }

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

@@ -2,48 +2,6 @@
 @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
 
 $sizes: 's', 'm', 'l';
-$typography: (
-  's': (
-    'label': $sans-body-s,
-    'caption': $sans-body-s,
-    'description': $sans-body-s,
-    'separator': $light-label-m,
-  ),
-  'm': (
-    'label': $sans-body-m,
-    'caption': $sans-body-s,
-    'description': $sans-body-s,
-    'separator': $light-label-l,
-  ),
-  'l': (
-    'label': $sans-body-l,
-    'caption': $sans-body-m,
-    'description': $sans-body-m,
-    'separator': $light-label-l,
-  ),
-);
-
-.headline {
-  display: flex;
-  align-items: center;
-}
-
-.option {
-  overflow: hidden;
-  flex: 1;
-  color: $sys-neutral-text-main;
-}
-
-.caption {
-  overflow: hidden;
-  color: $sys-neutral-text-light;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.description {
-  color: $sys-neutral-text-support;
-}
 
 .checkbox {
   display: inline-flex;
@@ -69,8 +27,8 @@ $typography: (
   color: $sys-neutral-text-light;
 
   svg {
-    width: 100% !important; /* stylelint-disable-line declaration-no-important */
-    height: 100% !important; /* stylelint-disable-line declaration-no-important */
+    max-width: 100%;
+    max-height: 100%;
   }
 }
 
@@ -102,13 +60,6 @@ $typography: (
   }
 }
 
-.content {
-  overflow: hidden;
-  flex-grow: 1;
-  flex-shrink: 1;
-  box-sizing: border-box;
-}
-
 .droplistItem {
   width: 100%;
 
@@ -117,22 +68,6 @@ $typography: (
       padding-left: calc(
         var(--level, 0) * $dimension-050m + simple-var($drop-list, 'item', $size, 'container', 'padding-left')
       );
-
-      .headline {
-        @include composite-var($drop-list, 'item', $size, 'headline');
-      }
-
-      .option {
-        @include composite-var($typography, $size, 'label');
-      }
-
-      .caption {
-        @include composite-var($typography, $size, 'caption');
-      }
-
-      .description {
-        @include composite-var($typography, $size, 'description');
-      }
     }
   }
 
@@ -142,9 +77,6 @@ $typography: (
 
   &[aria-disabled],
   &[data-disabled] {
-    .option,
-    .description,
-    .caption,
     .expandableIcon {
       color: $sys-neutral-text-disabled;
     }
@@ -192,3 +124,9 @@ $typography: (
     }
   }
 }
+
+.content {
+  flex-grow: 1;
+  flex-shrink: 1;
+  box-sizing: border-box;
+}

package/src/components/Items/GroupItem/GroupItem.tsx

@@ -1,16 +1,16 @@
 import { Separator } from '../../../helperComponents';
-import { useListContext } from '../../Lists/contexts';
 import { useRenderItems } from '../hooks';
-import { GroupItemProps } from '../types';
+import { FlattenGroupListItem, ItemId } from '../types';
 
-export function GroupItem({ label, truncate, divider, items, mode }: GroupItemProps) {
-  const { size } = useListContext();
+type GroupItemProps = Omit<FlattenGroupListItem, 'type'> & { items: ItemId[] };
 
+export function GroupItem({ label, truncate, divider, items, mode }: GroupItemProps) {
   const itemsJSX = useRenderItems(items);
 
   return (
     <>
-      <Separator label={label} truncate={truncate} divider={divider} mode={mode} size={size} />
+      <Separator label={label} truncate={truncate} divider={divider} mode={mode} />
+
       {itemsJSX}
     </>
   );

package/src/components/Items/GroupSelectItem/GroupSelectItem.tsx

@@ -0,0 +1,44 @@
+import { Separator } from '../../../helperComponents';
+import { useGroupItemSelection, useRenderItems } from '../hooks';
+import { CommonFlattenProps, FlattenGroupSelectListItem } from '../types';
+
+type GroupSelectItemProps = Omit<FlattenGroupSelectListItem, 'type'> & CommonFlattenProps;
+
+export function GroupSelectItem({
+  label,
+  truncate,
+  divider,
+  items,
+  mode,
+  id,
+  itemRef,
+  allChildIds,
+}: GroupSelectItemProps) {
+  const { indeterminate, checked, handleOnSelect } = useGroupItemSelection({
+    items,
+    id,
+    disabled: false,
+    allChildIds,
+  });
+
+  const itemsJSX = useRenderItems(items);
+
+  return (
+    <>
+      <Separator
+        label={label}
+        truncate={truncate}
+        divider={divider}
+        mode={mode}
+        selectButton={{
+          indeterminate,
+          checked,
+          itemRef,
+          onClick: handleOnSelect,
+        }}
+      />
+
+      {itemsJSX}
+    </>
+  );
+}

package/src/components/Items/GroupSelectItem/index.ts

@@ -0,0 +1 @@
+export * from './GroupSelectItem';

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

@@ -1,122 +1,116 @@
-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 } 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 { 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,
+    });
+
+    return { ids, expandedIds: expandedIds.concat([id]) };
+  }, [focusFlattenItems, id, items, openCollapseItems]);
+
+  const { handleListKeyDownFactory, activeItemId, forceUpdateActiveItemId } = useFocusListContext();
+
+  const [open, setOpen] = useState<boolean>();
+
+  const handleListKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLElement>) => {
+      handleListKeyDownFactory(ids, expandedIds)(e);
+
+      if (e.code === '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 +121,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/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>
   );