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

package/src/components/Items/AccordionItem/AccordionItem.tsx

@@ -1,33 +1,36 @@
-import { KeyboardEvent, MouseEvent } from 'react';
+import { MouseEvent, useCallback } from 'react';
 
 import { ChevronDownSVG, ChevronUpSVG } from '@snack-uikit/icons';
 
 import { CollapseBlockPrivate } from '../../../helperComponents';
-import { CollapseContext, useCollapseContext, useParentListContext } from '../../Lists/contexts';
+import { CollapseLevelContext, useCollapseContext, useCollapseLevelContext } from '../../Lists/contexts';
 import { BaseItem } from '../BaseItem';
 import { useGroupItemSelection, useRenderItems } from '../hooks';
-import { AccordionItemProps } from '../types';
+import { CommonFlattenProps, FlattenAccordionItem } from '../types';
 
-export function AccordionItem({ items: itemsProp, id, disabled, ...option }: AccordionItemProps) {
-  const { level = 1 } = useCollapseContext();
-  const { toggleOpenCollapsedItems, openCollapsedItems } = useParentListContext();
-  const { isIndeterminate, checked, handleOnSelect } = useGroupItemSelection({ items: itemsProp, id, disabled });
+type AccordionItemProps = Omit<FlattenAccordionItem, 'type>'> & CommonFlattenProps;
 
-  const isOpen = Boolean(openCollapsedItems?.includes(id ?? ''));
+export function AccordionItem({ id, disabled, allChildIds, items, ...option }: AccordionItemProps) {
+  const { level = 1 } = useCollapseLevelContext();
+  const { openCollapseItems = [], toggleOpenCollapseItem } = useCollapseContext();
 
-  const handleKeyDown = (e: KeyboardEvent<HTMLElement>) => {
-    if (e.key === 'ArrowRight') {
-      toggleOpenCollapsedItems?.(id ?? '');
+  const { indeterminate, checked, handleOnSelect } = useGroupItemSelection({
+    items,
+    id,
+    disabled,
+    allChildIds,
+  });
 
-      e.preventDefault();
-      e.stopPropagation();
-    }
-  };
+  const isOpen = Boolean(openCollapseItems.includes(id ?? ''));
+
+  const handleKeyDown = useCallback(() => {
+    toggleOpenCollapseItem?.(id ?? '');
+  }, [id, toggleOpenCollapseItem]);
 
-  const itemsJSX = useRenderItems(itemsProp);
+  const itemsJSX = useRenderItems(items);
 
   const handleItemClick = (e: MouseEvent<HTMLElement>) => {
-    toggleOpenCollapsedItems?.(id ?? '');
+    toggleOpenCollapseItem?.(id ?? '');
     option.onClick?.(e);
   };
 
@@ -41,15 +44,16 @@ export function AccordionItem({ items: itemsProp, id, disabled, ...option }: Acc
           expandIcon={isOpen ? <ChevronUpSVG /> : <ChevronDownSVG />}
           onClick={handleItemClick}
           isParentNode
-          onKeyDown={handleKeyDown}
-          indeterminate={isIndeterminate && !checked}
+          onOpenNestedList={handleKeyDown}
+          checked={checked}
+          indeterminate={indeterminate}
           onSelect={!disabled ? handleOnSelect : undefined}
         />
       }
       expanded={isOpen}
       data-test-id={`list__accordion-item-${id}`}
     >
-      <CollapseContext.Provider value={{ level: level + 1 }}>{itemsJSX}</CollapseContext.Provider>
+      <CollapseLevelContext.Provider value={{ level: level + 1 }}>{itemsJSX}</CollapseLevelContext.Provider>
     </CollapseBlockPrivate>
   );
 }

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.key === 'ArrowRight') {
+      onOpenNestedList?.(e);
+
+      e.preventDefault();
+      e.stopPropagation();
+
+      return;
+    }
+
     if (e.code === 'Space' || e.key === 'Enter') {
       if (isSelectionMultiple && isParentNode && onSelect) {
         onSelect();
@@ -100,85 +123,71 @@ export function BaseItem({
 
   const props = extractSupportProps(rest);
 
-  const item = (
-    <li
-      data-type='outside'
-      role={'menuitem'}
-      data-test-id={props['data-test-id'] || 'list__base-item_' + id}
-      ref={itemRef as unknown as RefObject<HTMLLIElement>}
-      className={cn(commonStyles.listItem, styles.droplistItem, className)}
-      data-size={size}
-      onClick={onClick}
-      onMouseDown={handleItemMouseDown}
-      tabIndex={-1}
-      data-non-pointer={inactive && !onClick}
+  const itemJSX = (
+    <div
+      className={cn(commonStyles.itemWrapper, styles.innerWrapper, className)}
       data-inactive={inactive || undefined}
-      data-checked={(isParentNode && (indeterminate || isChecked)) || (isChecked && !switchProp) || undefined}
-      data-variant={mode || undefined}
-      data-open={open || undefined}
       data-disabled={disabled || undefined}
-      aria-disabled={disabled || undefined}
-      data-parent={parent || 'list'}
-      onKeyDown={handleItemKeyDown}
-      onFocus={handleItemFocus}
-      style={{ '--level': level }}
+      data-variant={mode || undefined}
+      data-checked={(isParentNode && (indeterminate || isChecked)) || (isChecked && !switchProp) || undefined}
     >
-      {!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}
-            checked={isChecked}
-            data-test-id='list__base-item-checkbox'
-            onClick={handleCheckboxClick}
-            indeterminate={indeterminate}
-          />
-        </div>
-      )}
-
-      {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'
+      <li
+        data-type='outside'
+        role={'menuitem'}
+        data-test-id={props['data-test-id'] || 'list__base-item_' + id}
+        data-checked={(isParentNode && (indeterminate || isChecked)) || (isChecked && !switchProp) || undefined}
+        ref={itemRef as unknown as RefObject<HTMLLIElement>}
+        className={cn(commonStyles.listItem, styles.droplistItem)}
+        data-size={size}
+        onClick={onClick}
+        onMouseDown={handleItemMouseDown}
+        tabIndex={-1}
+        data-non-pointer={inactive && !onClick}
+        data-variant={mode || undefined}
+        data-open={open || undefined}
+        onKeyDown={handleItemKeyDown}
+        onFocus={handleItemFocus}
+        style={{ '--level': level }}
+      >
+        {!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={isParentNode ? handleCheckboxChange : undefined}
+              checked={isChecked}
+              data-test-id='list__base-item-checkbox'
+              onClick={handleCheckboxClick}
+              indeterminate={indeterminate}
             />
           </div>
         )}
-      </div>
 
-      {afterContent}
+        {beforeContent && <div className={styles.beforeContent}>{beforeContent}</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 && interactive && (
-        <Switch disabled={disabled} checked={isChecked} data-test-id='list__base-item-switch' />
-      )}
-      {!switchProp && expandIcon && <span className={styles.expandableIcon}>{expandIcon}</span>}
-    </li>
+        {!switchProp && expandIcon && <span className={styles.expandableIcon}>{expandIcon}</span>}
+      </li>
+    </div>
   );
 
   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%;
   }
 }
 
@@ -101,14 +59,6 @@ $typography: (
     height: 100%;
   }
 }
-
-.content {
-  overflow: hidden;
-  flex-grow: 1;
-  flex-shrink: 1;
-  box-sizing: border-box;
-}
-
 .droplistItem {
   width: 100%;
 
@@ -121,30 +71,16 @@ $typography: (
       .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');
-      }
     }
   }
 
   &[data-non-pointer] {
     cursor: inherit;
   }
+}
 
-  &[aria-disabled],
+.innerWrapper {
   &[data-disabled] {
-    .option,
-    .description,
-    .caption,
     .expandableIcon {
       color: $sys-neutral-text-disabled;
     }
@@ -152,17 +88,22 @@ $typography: (
     .beforeContent {
       opacity: $opacity-a064;
     }
+
+    .droplistItem {
+      cursor: not-allowed;
+    }
   }
 
   &[data-has-checked],
   &[data-checked] {
     &[data-variant='single'] {
-      &::after {
+      &::before {
         opacity: $opacity-a008;
         background-color: $sys-primary-accent-default;
       }
+
       &:hover {
-        &::after {
+        &::before {
           opacity: $opacity-a016;
           background-color: $sys-primary-accent-default;
         }
@@ -173,22 +114,23 @@ $typography: (
       background-color: $sys-primary-accent-default;
     }
 
-    &:focus-visible {
+    .droplistItem:focus-visible {
       &[data-variant='single'] {
         outline-color: $sys-primary-accent-default;
       }
     }
 
     &[data-disabled] {
-      &[data-variant='single'] {
-        &::before {
-          display: none;
-        }
-      }
-
       .markerContainer:before {
         background-color: $sys-neutral-text-disabled;
       }
     }
   }
 }
+
+.content {
+  overflow: hidden;
+  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';