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

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

@@ -0,0 +1,52 @@
+import cn from 'classnames';
+import { FocusEvent, KeyboardEvent, RefObject } from 'react';
+
+import { SearchPrivate } from '@snack-uikit/search-private';
+
+import { SearchState } from '../../../types';
+import { useListContext, useParentListContext } from '../../Lists/contexts';
+import commonStyles from '../styles.module.scss';
+import styles from './styles.module.scss';
+
+export type SearchItemProps = {
+  search?: SearchState;
+};
+
+export function SearchItem({ search }: SearchItemProps) {
+  const { parentItemRefs, parentSetActiveFocusIndex } = useParentListContext();
+  const { size } = useListContext();
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (['ArrowDown', 'ArrowUp'].includes(e.key)) {
+      e.preventDefault();
+    }
+
+    if (['ArrowRight'].includes(e.key)) {
+      e.stopPropagation();
+    }
+  };
+
+  const handleFocus = (e: FocusEvent<HTMLInputElement>) => {
+    if (e.target === parentItemRefs[0].current) {
+      parentSetActiveFocusIndex?.(0);
+    }
+    e.stopPropagation();
+  };
+
+  if (!Boolean(search)) {
+    return null;
+  }
+
+  return (
+    <div className={cn(commonStyles.listItem, styles.searchItem)} data-size={size} data-test-id='list__search-item'>
+      <SearchPrivate
+        size={size}
+        tabIndex={-1}
+        onKeyDown={handleKeyDown}
+        onFocus={handleFocus}
+        {...search}
+        ref={parentItemRefs[0] as RefObject<HTMLInputElement>}
+      />
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,13 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+
+.searchItem {
+  width: 100%;
+
+  &:focus-within,
+  &:focus-visible {
+    @include outline-inside-var($container-focused-s);
+
+    max-width: 100%;
+    outline-color: $sys-primary-decor-activated;
+  }
+}

package/src/components/Items/hooks.tsx

@@ -0,0 +1,101 @@
+import { createRef, RefObject, useEffect, useMemo } from 'react';
+
+import { extractChildIds } from '../../utils';
+import { useSelectionContext } from '../Lists/contexts';
+import { AccordionItem } from './AccordionItem';
+import { BaseItem } from './BaseItem';
+import { GroupItem } from './GroupItem';
+import { NextListItem } from './NextListItem';
+import { ItemProps } from './types';
+import { addItemsIds, isAccordionItemProps, isGroupItemProps, isNextListItemProps } from './utils';
+
+export function useRenderItems(items: ItemProps[]) {
+  return useMemo(
+    () =>
+      items.map((item, idx) => {
+        if (isGroupItemProps(item)) {
+          return <GroupItem {...item} key={item.id} />;
+        }
+
+        if (isAccordionItemProps(item)) {
+          return <AccordionItem {...item} key={idx} />;
+        }
+
+        if (isNextListItemProps(item)) {
+          return <NextListItem {...item} key={item.id} />;
+        }
+
+        return <BaseItem {...item} key={item.id} />;
+      }),
+    [items],
+  );
+}
+
+type UseItemsWithIdsProps = {
+  search?: boolean;
+  footerActiveElementsRefs?: RefObject<HTMLElement>[];
+};
+
+export function useItemsWithIds({ search, footerActiveElementsRefs }: UseItemsWithIdsProps) {
+  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',
+      ),
+    }),
+
+    [footerActiveElementsRefs, search],
+  );
+}
+
+type UseGroupItemSelectionProps = {
+  items: ItemProps[];
+  id?: string | number;
+  disabled?: boolean;
+};
+
+export function useGroupItemSelection({ id, items, disabled }: UseGroupItemSelectionProps) {
+  const { value, setValue, isSelectionMultiple } = useSelectionContext();
+  const childIds = useMemo(() => extractChildIds({ items }), [items]);
+
+  const isIndeterminate = isSelectionMultiple
+    ? childIds.some(childId => value?.includes(childId))
+    : childIds.includes(value ?? '');
+  const checked = isSelectionMultiple ? childIds.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 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])));
+      return;
+    }
+
+    setValue?.((value: Array<string | number>) => (value ?? []).concat([...childIds, id ?? '']));
+  };
+
+  return { checked, isIndeterminate, handleOnSelect };
+}

package/src/components/Items/index.ts

@@ -0,0 +1,9 @@
+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 './PinGroupItem';

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

@@ -0,0 +1,78 @@
+@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';
+
+.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');
+    }
+  }
+
+  &::after {
+    pointer-events: none;
+    content: '';
+
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 100%;
+
+    background-color: transparent;
+  }
+
+  &[data-open],
+  &[data-focused],
+  &:hover,
+  &:focus-visible {
+    &::after {
+      opacity: $opacity-a008;
+      background-color: $sys-neutral-accent-default;
+    }
+  }
+
+  &[data-focused],
+  &:focus-visible {
+    @include outline-inside-var($container-focused-s);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    background-color: transparent;
+    outline: none;
+
+    &::before {
+      display: none;
+    }
+
+    &::after {
+      cursor: not-allowed;
+      background-color: transparent;
+    }
+  }
+}

package/src/components/Items/types.ts

@@ -0,0 +1,61 @@
+import { FocusEvent, KeyboardEvent, MouseEvent, ReactNode, RefObject } from 'react';
+
+import { WithSupportProps } from '@snack-uikit/utils';
+
+import { SeparatorProps } from '../../helperComponents';
+import { ScrollProps, SearchState } from '../../types';
+
+export type ItemContentProps = {
+  option: string;
+  caption?: string;
+  description?: string;
+};
+
+export type BaseItemPrivateProps = {
+  expandIcon?: ReactNode;
+  open?: boolean;
+};
+
+export type BaseItemProps = WithSupportProps<{
+  beforeContent?: ReactNode;
+  afterContent?: ReactNode;
+
+  content: ItemContentProps;
+
+  onClick?(e: MouseEvent<HTMLButtonElement>): void;
+  onKeyDown?(e: KeyboardEvent<HTMLButtonElement>): void;
+  onFocus?(e: FocusEvent<HTMLButtonElement>): void;
+  onBlur?(e: FocusEvent<HTMLButtonElement>): void;
+
+  id?: string | number;
+
+  disabled?: boolean;
+
+  itemRef?: RefObject<HTMLButtonElement>;
+}>;
+
+export type SwitchProps = {
+  switch?: boolean;
+};
+
+// eslint-disable-next-line no-use-before-define
+export type ItemProps = (BaseItemProps & SwitchProps) | AccordionItemProps | NextListItemProps | GroupItemProps;
+
+export type AccordionItemProps = BaseItemProps & {
+  items: ItemProps[];
+  // TODO: add later
+  // mode?: 'single' | 'multiple';
+  type: 'collapse';
+};
+
+export type NextListItemProps = BaseItemProps & {
+  items: ItemProps[];
+  type: 'next-list';
+  placement?: 'right-start' | 'left-start' | 'left' | 'right' | 'left-end' | 'right-end';
+  search?: SearchState;
+} & ScrollProps;
+
+export type GroupItemProps = SeparatorProps & {
+  items: ItemProps[];
+  id?: string | number;
+};

package/src/components/Items/utils.ts

@@ -0,0 +1,69 @@
+import { createRef } from 'react';
+
+import { AccordionItemProps, BaseItemProps, GroupItemProps, ItemProps, NextListItemProps } from './types';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function isBaseItemProps(item: any): item is BaseItemProps {
+  return 'content' 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';
+}
+
+// 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';
+}
+
+// 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 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;
+
+  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),
+  };
+}
+
+export function addItemsIds(itemsProp: ItemProps[], prefix?: string | number): ItemProps[] {
+  return itemsProp.map((item, idx) => {
+    const itemId = item.id ?? (prefix !== undefined ? [prefix, idx].join('-') : String(idx));
+
+    if (isGroupItemProps(item)) {
+      return { ...item, id: itemId, items: addItemsIds(item.items, itemId) };
+    }
+
+    if (isAccordionItemProps(item) || isNextListItemProps(item)) {
+      return {
+        ...item,
+        id: itemId,
+        items: addItemsIds(item.items, itemId),
+        itemRef: item.itemRef || createRef<HTMLButtonElement>(),
+      };
+    }
+
+    return { ...item, id: itemId, itemRef: item.itemRef || createRef<HTMLButtonElement>() };
+  });
+}

package/src/components/Lists/Droplist/DropList.tsx

@@ -0,0 +1,166 @@
+import { cloneElement, isValidElement, KeyboardEvent, useCallback, useMemo, useRef, useState } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+
+import { Dropdown } from '@snack-uikit/dropdown';
+
+import { extractItemIds, extractItemRefs, withCollapsedItems } from '../../../utils';
+import { addItemsIds, getSlicedItems, useItemsWithIds } from '../../Items';
+import { extractSelectionProps, ParentListContext, SelectionProvider } from '../contexts';
+import { useKeyboardNavigation } from '../hooks';
+import { ListPrivate } from '../ListPrivate';
+import { DroplistProps } from '../types';
+
+export function Droplist({
+  items: itemsProp,
+  search,
+  pinBottom,
+  pinTop,
+  footerActiveElementsRefs,
+  children,
+  trigger,
+  placement,
+  widthStrategy,
+  triggerElemRef: triggerElemRefProp,
+  open: openProp,
+  onOpenChange,
+  ...props
+}: DroplistProps) {
+  const hasSearch = useMemo(() => Boolean(search), [search]);
+
+  const memorizedItems = useMemo(
+    () => addItemsIds((pinBottom ?? []).concat(itemsProp).concat(pinTop ?? [])),
+    [itemsProp, pinBottom, pinTop],
+  );
+
+  const [openCollapsedItems, setOpenCollapsedItems] = useState<Array<number | string>>([]);
+
+  const { search: searchItem, footerRefs } = useItemsWithIds({
+    search: hasSearch,
+    footerActiveElementsRefs,
+  });
+
+  const { items, itemRefs, ids, expandedIds } = useMemo(() => {
+    const res = withCollapsedItems({
+      items: memorizedItems,
+      openCollapsedItems,
+    });
+
+    const items = searchItem.concat(res.items).concat(footerRefs);
+
+    return {
+      items,
+      ids: extractItemIds(searchItem).concat(res.ids).concat(extractItemIds(footerRefs)),
+      itemRefs: extractItemRefs(searchItem).concat(res.itemRefs).concat(extractItemRefs(footerRefs)),
+      expandedIds: res.expandedIds,
+    };
+  }, [footerRefs, memorizedItems, openCollapsedItems, searchItem]);
+
+  const slicedItems = useMemo(
+    () => getSlicedItems({ items, hasSearch, pinTop, pinBottom, footerRefs }),
+    [items, hasSearch, pinTop, pinBottom, footerRefs],
+  );
+
+  const triggerElemRef = useRef<HTMLElement>(null);
+  const listRef = useRef<HTMLUListElement>(null);
+
+  const {
+    activeFocusIndex,
+    setActiveFocusIndex,
+    openNestedIndex,
+    handleListKeyDown,
+    resetNestedIndex,
+    resetActiveFocusIndex,
+  } = useKeyboardNavigation({ ids, expandedIds, parentRef: triggerElemRefProp ?? triggerElemRef, itemRefs });
+
+  const [open, setOpen] = useUncontrolledProp<boolean>(openProp, false, onOpenChange);
+
+  const handleOpenChange = (open: boolean) => {
+    if (!open) {
+      resetNestedIndex();
+      resetActiveFocusIndex();
+      setOpenCollapsedItems([]);
+    }
+
+    setOpen(open);
+  };
+
+  const onKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLElement>, cb?: (e: KeyboardEvent<HTMLElement>) => void) => {
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        setOpen(true);
+
+        setTimeout(() => {
+          listRef.current?.focus();
+          setActiveFocusIndex(0);
+        }, 0);
+      }
+
+      cb?.(e);
+    },
+    [setActiveFocusIndex, setOpen],
+  );
+
+  const triggerElem = useMemo(() => {
+    if (isValidElement(children)) {
+      const props = typeof children.props === 'object' ? children.props : {};
+
+      return cloneElement(children, {
+        ...props,
+        onKeyDown: (e: KeyboardEvent<HTMLElement>) => {
+          onKeyDown(e, children.props?.onKeyDown);
+        },
+      });
+    }
+    return children;
+  }, [onKeyDown, children]);
+
+  return (
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    <SelectionProvider {...extractSelectionProps(props)}>
+      <ParentListContext.Provider
+        value={{
+          parentIds: ids,
+          parentActiveFocusIndex: activeFocusIndex,
+          parentExpandedIds: expandedIds,
+          parentItemRefs: itemRefs,
+          parentOpenNestedIndex: openNestedIndex,
+          triggerRef: triggerElemRefProp ?? triggerElemRef,
+          parentRef: listRef,
+          parentResetNestedIndex: resetNestedIndex,
+          parentResetActiveFocusIndex: resetActiveFocusIndex,
+          toggleOpenCollapsedItems: id =>
+            setOpenCollapsedItems(items =>
+              items.includes(id) ? items.filter(item => item !== id) : items.concat([id]),
+            ),
+        }}
+      >
+        <Dropdown
+          content={
+            <ListPrivate
+              onKeyDown={handleListKeyDown}
+              tabIndex={0}
+              ref={listRef}
+              search={search}
+              {...slicedItems}
+              {...props}
+            />
+          }
+          trigger={trigger}
+          placement={placement}
+          widthStrategy={widthStrategy}
+          {...(triggerElemRefProp
+            ? {}
+            : {
+                triggerRef: triggerElemRef,
+              })}
+          open={open}
+          onOpenChange={handleOpenChange}
+        >
+          {triggerElem}
+        </Dropdown>
+      </ParentListContext.Provider>
+    </SelectionProvider>
+  );
+}

package/src/components/Lists/Droplist/index.ts

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

package/src/components/Lists/List/List.tsx

@@ -0,0 +1,120 @@
+import { forwardRef, useMemo, useRef, useState } from 'react';
+
+import { HiddenTabButton } from '../../../helperComponents';
+import { extractItemIds, extractItemRefs, withCollapsedItems } from '../../../utils';
+import { addItemsIds, getSlicedItems, useItemsWithIds } from '../../Items';
+import { extractSelectionProps, ParentListContext, SelectionProvider, useParentListContext } from '../contexts';
+import { useKeyboardNavigation } from '../hooks';
+import { ListPrivate } from '../ListPrivate';
+import styles from '../styles.module.scss';
+import { ListProps } from '../types';
+
+export const List = forwardRef<HTMLElement, ListProps>(
+  ({ items: itemsProp, search, pinBottom, pinTop, footerActiveElementsRefs, ...props }) => {
+    const hasSearch = useMemo(() => Boolean(search), [search]);
+
+    const memorizedItems = useMemo(
+      () => addItemsIds((pinTop ?? []).concat(itemsProp).concat(pinBottom ?? [])),
+      [itemsProp, pinBottom, pinTop],
+    );
+
+    const [openCollapsedItems, setOpenCollapsedItems] = useState<Array<number | string>>([]);
+
+    const { search: searchItem, footerRefs } = useItemsWithIds({
+      search: hasSearch,
+      footerActiveElementsRefs,
+    });
+
+    const { items, itemRefs, ids, expandedIds } = useMemo(() => {
+      const res = withCollapsedItems({
+        items: memorizedItems,
+        openCollapsedItems,
+      });
+
+      const items = searchItem.concat(res.items).concat(footerRefs);
+
+      return {
+        items,
+        ids: extractItemIds(searchItem).concat(res.ids).concat(extractItemIds(footerRefs)),
+        itemRefs: extractItemRefs(searchItem).concat(res.itemRefs).concat(extractItemRefs(footerRefs)),
+        expandedIds: res.expandedIds,
+      };
+    }, [footerRefs, memorizedItems, openCollapsedItems, searchItem]);
+
+    const slicedItems = useMemo(
+      () => getSlicedItems({ items, hasSearch, pinTop, pinBottom, footerRefs }),
+      [items, hasSearch, pinTop, pinBottom, footerRefs],
+    );
+
+    const listRef = useRef<HTMLUListElement>(null);
+    const btnRef = useRef<HTMLButtonElement>(null);
+
+    const { triggerRef } = useParentListContext();
+
+    const {
+      activeFocusIndex,
+      openNestedIndex,
+      handleListKeyDown,
+      resetNestedIndex,
+      resetActiveFocusIndex,
+      setActiveFocusIndex,
+    } = useKeyboardNavigation({
+      ids,
+      expandedIds,
+      parentRef: listRef,
+      btnRef,
+      itemRefs,
+    });
+
+    const isActive = listRef.current === document.activeElement && activeFocusIndex === -1 && openNestedIndex === -1;
+
+    return (
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      <SelectionProvider {...extractSelectionProps(props)}>
+        <ParentListContext.Provider
+          value={{
+            parentIds: ids,
+            parentActiveFocusIndex: activeFocusIndex,
+            parentExpandedIds: expandedIds,
+            parentItemRefs: itemRefs,
+            parentOpenNestedIndex: openNestedIndex,
+            triggerRef: triggerRef ?? listRef,
+            parentRef: listRef,
+
+            parentSetActiveFocusIndex: setActiveFocusIndex,
+            parentResetNestedIndex: resetNestedIndex,
+            parentResetActiveFocusIndex: resetActiveFocusIndex,
+            openCollapsedItems,
+            toggleOpenCollapsedItems: id =>
+              setOpenCollapsedItems(items =>
+                items.includes(id) ? items.filter(item => item !== id) : items.concat([id]),
+              ),
+          }}
+        >
+          <div className={styles.wrapper} data-active={isActive || undefined}>
+            <ListPrivate
+              {...props}
+              {...slicedItems}
+              ref={listRef}
+              onFocus={e => {
+                if (
+                  e.relatedTarget === null ||
+                  (e.relatedTarget && itemRefs.every(({ current }) => current !== e.relatedTarget))
+                ) {
+                  resetActiveFocusIndex();
+                }
+              }}
+              onKeyDown={handleListKeyDown}
+              tabIndex={0}
+              search={search}
+              nested={false}
+            />
+
+            <HiddenTabButton ref={btnRef} listRef={listRef} />
+          </div>
+        </ParentListContext.Provider>
+      </SelectionProvider>
+    );
+  },
+);

package/src/components/Lists/List/index.ts

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