@snack-uikit/list 0.1.1-preview-57c837e3.0

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

@@ -0,0 +1,150 @@
+import cn from 'classnames';
+import { FocusEvent, KeyboardEvent, MouseEvent } 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, useSelectionContext } from '../../Lists/contexts';
+import commonStyles from '../styles.module.scss';
+import { BaseItemPrivateProps, BaseItemProps, SwitchProps } from '../types';
+import { CHECKBOX_SIZE_MAP } from './constants';
+import styles from './styles.module.scss';
+
+type AllBaseItemProps = BaseItemProps &
+  BaseItemPrivateProps &
+  SwitchProps & { indeterminate?: boolean; onSelect?(): void; isParentNode?: boolean };
+
+export function BaseItem({
+  beforeContent,
+  afterContent,
+  content,
+  onClick,
+  id,
+  expandIcon,
+  disabled,
+  open,
+  itemRef,
+  switch: switchProp,
+  onKeyDown,
+  onFocus,
+  indeterminate,
+  onSelect,
+  isParentNode,
+  ...rest
+}: AllBaseItemProps) {
+  const { option, caption, description } = content || {};
+
+  const { size, marker } = useListContext();
+  const { level = 0 } = useCollapseContext();
+  const { value, onChange, selection, isSelectionSingle, isSelectionMultiple } = useSelectionContext();
+
+  const isChecked = isSelectionSingle ? value === id : value?.includes(id);
+
+  const handleChange = () => {
+    onChange?.(id ?? '');
+  };
+
+  const handleItemClick = (e: MouseEvent<HTMLButtonElement>) => {
+    if (!isParentNode) {
+      handleChange();
+    }
+
+    onClick?.(e);
+  };
+
+  const handleItemKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {
+    onKeyDown?.(e);
+
+    if (e.code === 'Space' || e.key === 'Enter') {
+      if (isSelectionMultiple && isParentNode && onSelect) {
+        onSelect();
+      }
+
+      !isParentNode && handleChange();
+      // TODO: should pass an event here?
+      !isParentNode && onClick?.(e as unknown as MouseEvent<HTMLButtonElement>);
+
+      e.stopPropagation();
+      e.preventDefault();
+    }
+  };
+
+  const handleItemFocus = (e: FocusEvent<HTMLButtonElement>) => {
+    onFocus?.(e);
+    e.stopPropagation();
+  };
+
+  const handleCheckboxChange = () => {
+    if (isParentNode && onSelect) {
+      onSelect();
+    } else {
+      handleChange();
+    }
+  };
+
+  const handleCheckboxClick = (e: MouseEvent) => {
+    e.stopPropagation();
+  };
+
+  const props = extractSupportProps(rest);
+
+  return (
+    <li role={'menuitem'} data-test-id={props['data-test-id'] || 'list__base-item_' + id}>
+      <button
+        ref={itemRef}
+        className={cn(commonStyles.listItem, styles.droplistItem)}
+        data-size={size}
+        onClick={handleItemClick}
+        tabIndex={-1}
+        data-checked={(isParentNode && (indeterminate || isChecked)) || (isChecked && !switchProp) || undefined}
+        data-variant={selection || undefined}
+        data-open={open || undefined}
+        disabled={disabled}
+        onKeyDown={handleItemKeyDown}
+        onFocus={handleItemFocus}
+        style={{ '--level': level }}
+      >
+        {!switchProp && isSelectionSingle && marker && !isParentNode && (
+          <div className={styles.markerContainer} data-test-id='list__base-item-marker' />
+        )}
+        {!switchProp && isSelectionMultiple && (
+          <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 text={option} maxLines={1} />
+            </span>
+            {caption && <span className={styles.caption}>{caption}</span>}
+          </div>
+
+          {description && (
+            <div className={styles.description}>
+              <TruncateString text={description} maxLines={2} />
+            </div>
+          )}
+        </div>
+
+        {afterContent}
+
+        {switchProp && <Switch disabled={disabled} checked={isChecked} data-test-id='list__base-item-switch' />}
+        {!switchProp && expandIcon && <span className={styles.expandableIcon}>{expandIcon}</span>}
+      </button>
+    </li>
+  );
+}

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

@@ -0,0 +1,7 @@
+import { CheckboxProps } from '@snack-uikit/toggles';
+
+export const CHECKBOX_SIZE_MAP: Record<string, CheckboxProps['size']> = {
+  s: 's',
+  m: 's',
+  l: 'm',
+};

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

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

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

@@ -0,0 +1,190 @@
+@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';
+
+$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;
+  flex-grow: 0;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+
+  width: $dimension-3m;
+  height: $dimension-3m;
+}
+
+.beforeContent {
+  display: inline-flex;
+  flex-grow: 0;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+
+  width: $icon-s;
+  height: $icon-s;
+
+  color: $sys-neutral-text-light;
+
+  svg {
+    width: 100% !important; /* stylelint-disable-line declaration-no-important */
+    height: 100% !important; /* stylelint-disable-line declaration-no-important */
+  }
+}
+
+.expandableIcon {
+  display: flex;
+  align-items: center;
+  color: $sys-neutral-text-light;
+  fill: currentColor;
+}
+
+.markerContainer {
+  @include composite-var($drop-list, 'item', 'marker-container');
+
+  pointer-events: none;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  box-sizing: border-box;
+  height: 100%;
+
+  &:before {
+    @include composite-var($drop-list, 'item', 'marker');
+
+    content: '';
+    display: block;
+    height: 100%;
+  }
+}
+
+.content {
+  flex-grow: 1;
+  flex-shrink: 1;
+  box-sizing: border-box;
+}
+
+.droplistItem {
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      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');
+      }
+    }
+  }
+
+  &:disabled {
+    .option,
+    .description,
+    .caption,
+    .expandableIcon {
+      color: $sys-neutral-text-disabled;
+    }
+
+    & .beforeContent {
+      opacity: $opacity-a064;
+    }
+  }
+
+  &[data-has-checked],
+  &[data-checked] {
+    &[data-variant='single'] {
+      &::after {
+        opacity: $opacity-a008;
+        background-color: $sys-primary-accent-default;
+      }
+      &:hover {
+        &::after {
+          opacity: $opacity-a016;
+          background-color: $sys-primary-accent-default;
+        }
+      }
+    }
+
+    .markerContainer:before {
+      background-color: $sys-primary-accent-default;
+    }
+
+    &:focus-visible {
+      &[data-variant='single'] {
+        background-color: $sys-primary-background;
+        outline-color: $sys-primary-accent-default;
+      }
+    }
+
+    &:disabled {
+      &[data-variant='single'] {
+        background-color: $sys-neutral-background1-level;
+
+        &::before {
+          display: none;
+        }
+      }
+
+      .markerContainer:before {
+        background-color: $sys-neutral-text-disabled;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,17 @@
+import { Separator } from '../../../helperComponents';
+import { useListContext } from '../../Lists/contexts';
+import { useRenderItems } from '../hooks';
+import { GroupItemProps } from '../types';
+
+export function GroupItem({ label, divider, items, mode }: GroupItemProps) {
+  const { size } = useListContext();
+
+  const itemsJSX = useRenderItems(items);
+
+  return (
+    <>
+      <Separator label={label} divider={divider} mode={mode} size={size} />
+      {itemsJSX}
+    </>
+  );
+}

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

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

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

@@ -0,0 +1,131 @@
+import { useCallback, useMemo, useRef, useState } from 'react';
+
+import { Dropdown, DropdownProps } from '@snack-uikit/dropdown';
+import { ChevronRightSVG } from '@snack-uikit/icons';
+
+import { withCollapsedItems } from '../../../utils';
+import { ParentListContext, useParentListContext } 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',
+];
+
+export function NextListItem({
+  items: itemsProp,
+  placement = 'right-start',
+  id,
+  search,
+  scroll,
+  scrollRef,
+  disabled,
+  ...option
+}: NextListItemProps) {
+  const listRef = useRef<HTMLUListElement>(null);
+
+  const [openCollapsedItems, setOpenCollapsedItems] = useState<Array<number | string>>([]);
+
+  const { items, itemRefs, ids, expandedIds } = useMemo(
+    () =>
+      withCollapsedItems({
+        items: itemsProp,
+        openCollapsedItems,
+      }),
+    [itemsProp, openCollapsedItems],
+  );
+
+  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([]);
+      }
+      setOpen(open);
+    },
+    [resetActiveFocusIndex, resetNestedIndex, setOpen],
+  );
+
+  const handleOutsideClick = useCallback(() => {
+    parentResetNestedIndex?.();
+    parentResetActiveFocusIndex?.();
+
+    return true;
+  }, [parentResetActiveFocusIndex, parentResetNestedIndex]);
+
+  return (
+    <li style={{ listStyleType: 'none' }}>
+      <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
+              search={search}
+              scroll={scroll}
+              scrollRef={scrollRef}
+            />
+          </ParentListContext.Provider>
+        }
+        trigger='hover'
+        open={(open || parentIds[parentOpenNestedIndex] === id) && !disabled}
+        onOpenChange={handleOpenChange}
+        placement={placement}
+      >
+        <BaseItem
+          {...option}
+          disabled={disabled}
+          open={open}
+          expandIcon={<ChevronRightSVG />}
+          id={id}
+          isParentNode
+          indeterminate={isIndeterminate && !checked}
+          onSelect={handleOnSelect}
+        />
+      </Dropdown>
+    </li>
+  );
+}

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

@@ -0,0 +1,105 @@
+import { KeyboardEvent, RefObject, useCallback, useEffect, useState } from 'react';
+
+import { useParentListContext } from '../../Lists/contexts';
+
+type UseKeyboardNavigationProps = {
+  ids: Array<number | string>;
+  expandedIds: Array<number | string>;
+  itemRefs?: RefObject<HTMLButtonElement>[];
+  id?: string | number;
+};
+
+export function useKeyboardNavigation({ ids, expandedIds, itemRefs, id }: UseKeyboardNavigationProps) {
+  const { triggerRef, parentResetNestedIndex, parentIds, parentItemRefs, parentOpenNestedIndex } =
+    useParentListContext();
+
+  const [activeFocusIndex, setActiveFocusIndex] = useState<number>(-1);
+  const [openNestedIndex, setOpenNestedIndex] = useState<number>(-1);
+  const [open, setOpen] = useState<boolean>(false);
+
+  const handleListKeyDown = (e: KeyboardEvent<HTMLUListElement>) => {
+    switch (e.key) {
+      case 'ArrowDown': {
+        setActiveFocusIndex(activeIndex => Math.min(activeIndex + 1, ids.length - 1));
+
+        e.stopPropagation();
+        e.preventDefault();
+        return;
+      }
+      case 'ArrowUp': {
+        setActiveFocusIndex(activeIndex => Math.max(activeIndex - 1, 0));
+
+        e.preventDefault();
+        e.stopPropagation();
+        return;
+      }
+      case 'ArrowRight': {
+        e.stopPropagation();
+        e.preventDefault();
+
+        if (expandedIds.includes(ids[activeFocusIndex])) {
+          setOpenNestedIndex(activeFocusIndex);
+        }
+
+        return;
+      }
+      case 'ArrowLeft': {
+        parentItemRefs?.[parentOpenNestedIndex].current?.focus();
+
+        parentResetNestedIndex?.();
+        setActiveFocusIndex(-1);
+        setOpenNestedIndex(-1);
+
+        setOpen(false);
+
+        e.stopPropagation();
+        e.preventDefault();
+        return;
+      }
+
+      case 'Tab': {
+        triggerRef?.current?.focus();
+        parentResetNestedIndex?.();
+        setActiveFocusIndex(-1);
+        setOpen(false);
+        e.preventDefault();
+
+        return;
+      }
+
+      default: {
+        break;
+      }
+    }
+  };
+
+  useEffect(() => {
+    itemRefs?.[activeFocusIndex]?.current?.focus();
+  }, [activeFocusIndex, itemRefs]);
+
+  useEffect(() => {
+    if (parentIds[parentOpenNestedIndex] === id && openNestedIndex === -1) {
+      setOpen(true);
+      setActiveFocusIndex(activeIndex => (activeIndex === -1 ? 0 : activeIndex));
+    }
+  }, [id, openNestedIndex, parentIds, parentOpenNestedIndex]);
+
+  const resetNestedIndex = () => {
+    setActiveFocusIndex(openNestedIndex);
+    setOpenNestedIndex(-1);
+  };
+
+  const resetActiveFocusIndex = useCallback(() => setActiveFocusIndex(-1), []);
+
+  return {
+    activeFocusIndex,
+    setActiveFocusIndex,
+    openNestedIndex,
+    setOpenNestedIndex,
+    resetNestedIndex,
+    resetActiveFocusIndex,
+    handleListKeyDown,
+    open,
+    setOpen,
+  };
+}

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

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

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

@@ -0,0 +1,28 @@
+import cn from 'classnames';
+import { ReactNode } from 'react';
+
+import styles from './styles.module.scss';
+
+export function PinTopGroupItem({ children }: { children: ReactNode }) {
+  if (!children) {
+    return null;
+  }
+
+  return (
+    <div className={cn(styles.pinTopItem)} data-test-id='list__pin-top-group-item'>
+      {children}
+    </div>
+  );
+}
+
+export function PinBottomGroupItem({ children }: { children: ReactNode }) {
+  if (!children) {
+    return null;
+  }
+
+  return (
+    <div className={cn(styles.pinBottomItem)} data-test-id='list__pin-bottom-group-item'>
+      {children}
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,38 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-dropList';
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+
+.pinTopItem {
+  @include composite-var($drop-list-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;
+
+  li,
+  ul {
+    list-style-type: none;
+  }
+}
+
+.pinBottomItem {
+  @include composite-var($drop-list-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;
+
+  li,
+  ul {
+    list-style-type: none;
+  }
+}