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

package/src/components/Lists/ListPrivate/ListPrivate.tsx

@@ -0,0 +1,149 @@
+import cn from 'classnames';
+import { ForwardedRef, forwardRef, RefObject, useMemo } from 'react';
+
+import { Spinner } from '@snack-uikit/loaders';
+import { Scroll } from '@snack-uikit/scroll';
+import { ToggleGroup } from '@snack-uikit/toggles';
+import { extractSupportProps } from '@snack-uikit/utils';
+
+import { PinBottomGroupItem, PinTopGroupItem, SearchItem, useRenderItems } from '../../Items';
+import { ListContextProvider } from '../contexts';
+import commonStyles from '../styles.module.scss';
+import { ListPrivateProps } from '../types';
+import styles from './styles.module.scss';
+
+export const ListPrivate = forwardRef<HTMLElement, ListPrivateProps>(
+  (
+    {
+      items,
+      pinTop,
+      pinBottom,
+      collapse = 'multiple',
+      onKeyDown,
+      onBlur,
+      onFocus,
+      tabIndex,
+      active,
+      scroll,
+      nested,
+      search,
+      scrollRef,
+      scrollContainerRef,
+      footer,
+      loading,
+      noData = 'No data',
+      noResults = 'No results',
+      size = 's',
+      marker,
+      ...props
+    },
+    ref,
+  ) => {
+    const itemsJSX = useRenderItems(items);
+    const itemsPinTopJSX = useRenderItems(pinTop ?? []);
+    const itemsPinBottomJSX = useRenderItems(pinBottom ?? []);
+    const hasNoItems = items.length + (pinTop?.length ?? 0) + (pinBottom?.length ?? 0) === 0;
+
+    const loadingJSX = useMemo(
+      () =>
+        loading && (
+          <div
+            role={'spinbutton'}
+            tabIndex={-1}
+            className={styles.loader}
+            data-size={size}
+            data-no-items={hasNoItems || undefined}
+            data-test-id='list__loader'
+          >
+            <Spinner size={size === 'l' ? 's' : 'xs'} />
+          </div>
+        ),
+      [hasNoItems, loading, size],
+    );
+
+    const content = useMemo(
+      () => (
+        <>
+          {itemsJSX}
+          {loadingJSX}
+          {hasNoItems && !search?.value && !loading && (
+            <div className={commonStyles.infoBlock} data-test-id='list__no-data'>
+              {noData}
+            </div>
+          )}
+          {hasNoItems && search?.value && !loading && (
+            <div className={commonStyles.infoBlock} data-test-id='list__no-results'>
+              {noResults}
+            </div>
+          )}
+        </>
+      ),
+      [hasNoItems, itemsJSX, loading, loadingJSX, noData, noResults, search?.value],
+    );
+
+    const listJSX = (
+      <ul
+        className={commonStyles.listContainer}
+        ref={ref as ForwardedRef<HTMLUListElement>}
+        onKeyDown={onKeyDown}
+        tabIndex={tabIndex}
+        onFocus={!nested ? onFocus : undefined}
+        onBlur={onBlur}
+        data-active={active || undefined}
+        role='menu'
+        {...extractSupportProps(props)}
+      >
+        <ToggleGroup selectionMode={collapse}>
+          {(Number(pinTop?.length) > 0 || search) && (
+            <PinTopGroupItem>
+              {search && <SearchItem search={search} />}
+
+              {Number(pinTop?.length) > 0 && itemsPinTopJSX}
+            </PinTopGroupItem>
+          )}
+
+          {scroll ? (
+            <Scroll
+              className={cn({
+                [commonStyles.scrollContainerS]: scroll && size === 's',
+                [commonStyles.scrollContainerM]: scroll && size === 'm',
+                [commonStyles.scrollContainerL]: scroll && size === 'l',
+              })}
+              barHideStrategy='never'
+              size='s'
+              ref={scrollContainerRef}
+            >
+              {content}
+
+              <div className={styles.scrollStub} ref={scrollRef as RefObject<HTMLDivElement>} />
+            </Scroll>
+          ) : (
+            <>{content}</>
+          )}
+
+          {(Number(pinBottom?.length) > 0 || footer) && (
+            <PinBottomGroupItem>
+              {Number(pinBottom?.length) > 0 && itemsPinBottomJSX}
+
+              {footer && <div className={styles.footer}>{footer}</div>}
+            </PinBottomGroupItem>
+          )}
+        </ToggleGroup>
+      </ul>
+    );
+
+    if (!nested) {
+      return (
+        <ListContextProvider size={size} marker={marker}>
+          {listJSX}
+        </ListContextProvider>
+      );
+    }
+
+    return (
+      <li style={{ listStyleType: 'none' }} role='menuitem'>
+        {listJSX}
+      </li>
+    );
+  },
+);

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

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

package/src/components/Lists/ListPrivate/styles.module.scss

@@ -0,0 +1,48 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+
+$sizes: 's', 'm', 'l';
+
+$loader-height: (
+  's': $dimension-3m,
+  'm': $dimension-4m,
+  'l': $dimension-5m,
+);
+
+.loader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      height: simple-var($loader-height, $size);
+
+      &[data-no-items] {
+        height: calc(3 * simple-var($loader-height, $size));
+      }
+    }
+  }
+
+  &:focus-visible {
+    @include outline-inside-var($container-focused-s);
+
+    outline-color: $sys-available-complementary;
+  }
+}
+
+.scrollStub {
+  height: calc($dimension-025m / 2);
+  margin-top: calc($dimension-025m / -2);
+  background: transparent;
+}
+
+.footer {
+  display: flex;
+  flex-direction: column;
+  gap: $dimension-050m;
+  align-items: center;
+  justify-content: center;
+
+  box-sizing: border-box;
+  padding: $dimension-050m;
+}

package/src/components/Lists/contexts/CollapseProvider.ts

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react';
+
+export type CollapseContextType = {
+  level?: number;
+};
+
+export const CollapseContext = createContext<CollapseContextType>({});
+
+export const useCollapseContext = () => useContext(CollapseContext);

package/src/components/Lists/contexts/ListProvider.tsx

@@ -0,0 +1,24 @@
+import { createContext, ReactNode, useContext } from 'react';
+
+export type ListContextType = {
+  size?: 's' | 'm' | 'l';
+  // TODO
+  // collapse?: 'single' | 'multiple';
+  marker?: boolean;
+};
+
+type Child = {
+  children: ReactNode;
+};
+
+export const ListContext = createContext<ListContextType>({});
+
+export const useListContext = () => useContext(ListContext);
+
+function extractListProps<T extends ListContextType>({ size, marker }: T) {
+  return { size, marker };
+}
+
+export function ListContextProvider({ children, ...props }: ListContextType & Child) {
+  return <ListContext.Provider value={extractListProps(props)}>{children}</ListContext.Provider>;
+}

package/src/components/Lists/contexts/ParentListProvider.tsx

@@ -0,0 +1,35 @@
+import { createContext, RefObject, useContext } from 'react';
+
+export type ParentListContextType = {
+  parentActiveFocusIndex: number;
+  parentSetActiveFocusIndex?(idx: number): void;
+  parentResetActiveFocusIndex?(): void;
+
+  parentIds: Array<string | number>;
+  parentExpandedIds: Array<string | number>;
+  parentItemRefs: Array<RefObject<HTMLButtonElement>>;
+
+  parentOpenNestedIndex: number;
+  parentResetNestedIndex?(): void;
+
+  openCollapsedItems?: Array<string | number>;
+  toggleOpenCollapsedItems?(id: string | number): void;
+
+  triggerRef?: RefObject<HTMLElement>;
+  parentRef?: RefObject<HTMLElement>;
+};
+
+export const ParentListContext = createContext<ParentListContextType>({
+  parentActiveFocusIndex: -1,
+  parentOpenNestedIndex: -1,
+
+  parentIds: [],
+  parentExpandedIds: [],
+  parentItemRefs: [],
+});
+
+export const useParentListContext = () => useContext(ParentListContext);
+
+export function ParentListProvider() {
+  return null;
+}

package/src/components/Lists/contexts/SelectionProvider.tsx

@@ -0,0 +1,171 @@
+import { createContext, ReactNode, useCallback, useContext } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+
+type SelectionSingleValueType = string | number | undefined;
+
+export type SelectionSingleProps = {
+  /** Начальное состояние */
+  defaultValue?: SelectionSingleValueType;
+  /** Controlled состояние */
+  value?: SelectionSingleValueType;
+  /** Controlled обработчик измения состояния */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  onChange?(value: any): void;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  setValue?(value: any): void;
+  /** Режим выбора */
+  selection: 'single';
+  /** Режим выбора single */
+  isSelectionSingle: true;
+  /** Режим выбора multi */
+  isSelectionMultiple: false;
+};
+
+export type SelectionMultipleProps = {
+  /** Начальное состояние */
+  defaultValue?: SelectionSingleValueType[];
+  /** Controlled состояние */
+  value?: SelectionSingleValueType[];
+  /** Controlled обработчик измения состояния */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  onChange?(value: any): void;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  setValue?(value: any): void;
+  /** Режим выбора */
+  selection: 'multiple';
+  /** Режим выбора single */
+  isSelectionSingle: false;
+  /** Режим выбора multi */
+  isSelectionMultiple: true;
+};
+
+type SelectionNoneProps = {
+  selection?: undefined;
+  value?: undefined;
+  onChange?: undefined;
+  setValue?: undefined;
+  defaultValue?: undefined;
+  isSelectionSingle?: undefined;
+  isSelectionMultiple?: undefined;
+};
+
+export type SelectionProviderProps = SelectionSingleProps | SelectionMultipleProps | SelectionNoneProps;
+
+type SelectionContextType =
+  | Omit<SelectionNoneProps, 'defaultValue'>
+  | Omit<SelectionSingleProps, 'defaultValue'>
+  | Omit<SelectionMultipleProps, 'defaultValue'>;
+
+export const SelectionContext = createContext<SelectionContextType>({
+  value: undefined,
+  onChange: undefined,
+  selection: undefined,
+});
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function isSelectionMultipleProps(props: any): props is SelectionMultipleProps {
+  return 'selection' in props && props['selection'] === 'multiple';
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function isSelectionSingleProps(props: any): props is SelectionSingleProps {
+  return 'selection' in props && props['selection'] === 'single';
+}
+
+type Child = {
+  children: ReactNode;
+};
+
+function SelectionSingleProvider({
+  value: valueProp,
+  defaultValue,
+  onChange: onChangeProp,
+  children,
+}: SelectionSingleProps & Child) {
+  const [value, setValue] = useUncontrolledProp<SelectionSingleValueType>(valueProp, defaultValue, cb => {
+    onChangeProp?.(cb(value));
+  });
+
+  const onChange = useCallback(
+    (newValue: SelectionSingleValueType) =>
+      setValue((oldValue: SelectionSingleValueType) => {
+        if (newValue !== oldValue) {
+          return newValue;
+        }
+
+        return undefined;
+      }),
+    [setValue],
+  );
+
+  return (
+    <SelectionContext.Provider
+      value={{ value, onChange, selection: 'single', isSelectionSingle: true, isSelectionMultiple: false, setValue }}
+    >
+      {children}
+    </SelectionContext.Provider>
+  );
+}
+
+function SelectionMultipleProvider({
+  value: valueProp,
+  defaultValue,
+  onChange: onChangeProp,
+  children,
+}: SelectionMultipleProps & Child) {
+  const [value, setValue] = useUncontrolledProp<SelectionSingleValueType[]>(valueProp, defaultValue, cb => {
+    onChangeProp?.(cb(value));
+  });
+
+  const onChange = useCallback(
+    (newValue: SelectionSingleValueType) =>
+      setValue((oldValues: SelectionSingleValueType[]) => {
+        if (Array.isArray(oldValues)) {
+          if (oldValues.includes(newValue)) {
+            return oldValues.filter(oldValue => oldValue !== newValue);
+          }
+
+          return oldValues.concat(newValue);
+        }
+
+        return undefined;
+      }),
+    [setValue],
+  );
+
+  return (
+    <SelectionContext.Provider
+      value={{ value, onChange, selection: 'multiple', isSelectionSingle: false, isSelectionMultiple: true, setValue }}
+    >
+      {children}
+    </SelectionContext.Provider>
+  );
+}
+
+export function SelectionProvider(props: SelectionProviderProps & Child) {
+  if (isSelectionSingleProps(props)) {
+    return <SelectionSingleProvider {...props} />;
+  }
+
+  if (isSelectionMultipleProps(props)) {
+    return <SelectionMultipleProvider {...props} />;
+  }
+
+  return <SelectionContext.Provider value={{}}>{props.children}</SelectionContext.Provider>;
+}
+
+export const useSelectionContext = () => useContext(SelectionContext);
+
+export function extractSelectionProps<T extends SelectionProviderProps>({
+  selection,
+  value,
+  defaultValue,
+  onChange,
+}: T) {
+  return {
+    selection,
+    value,
+    defaultValue,
+    onChange,
+  } as SelectionProviderProps;
+}

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

@@ -0,0 +1,4 @@
+export * from './ListProvider';
+export * from './SelectionProvider';
+export * from './ParentListProvider';
+export * from './CollapseProvider';

package/src/components/Lists/hooks.ts

@@ -0,0 +1,99 @@
+import { KeyboardEvent, RefObject, useEffect, useState } from 'react';
+
+export type UseKeyboardNavigationProps<T extends HTMLElement> = {
+  ids: Array<number | string>;
+  expandedIds: Array<number | string>;
+  parentRef?: RefObject<T>;
+  btnRef?: RefObject<HTMLButtonElement>;
+  itemRefs?: RefObject<HTMLButtonElement>[];
+};
+
+export function useKeyboardNavigation<T extends HTMLElement>({
+  ids,
+  itemRefs,
+  expandedIds,
+  parentRef,
+  btnRef,
+}: UseKeyboardNavigationProps<T>) {
+  const [activeFocusIndex, setActiveFocusIndex] = useState<number>(-1);
+  const [openNestedIndex, setOpenNestedIndex] = useState<number>(-1);
+
+  const handleListKeyDown = (e: KeyboardEvent<T>) => {
+    switch (e.key) {
+      case 'ArrowDown': {
+        setActiveFocusIndex(activeIndex => Math.min(activeIndex + 1, ids.length - 1));
+
+        // TODO: go to loader from last item
+        // if (activeFocusIndex === ids.length - 2) {
+        //   return;
+        // }
+
+        e.stopPropagation();
+        e.preventDefault();
+        return;
+      }
+      case 'ArrowUp': {
+        if (activeFocusIndex === 0) {
+          parentRef?.current?.focus();
+          setActiveFocusIndex(-1);
+          return;
+        }
+
+        setActiveFocusIndex(activeIndex => Math.max(activeIndex - 1, 0));
+
+        e.stopPropagation();
+        e.preventDefault();
+        return;
+      }
+      case 'ArrowRight': {
+        if (expandedIds.includes(ids[activeFocusIndex])) {
+          setOpenNestedIndex(activeFocusIndex);
+        }
+
+        e.stopPropagation();
+        e.preventDefault();
+
+        return;
+      }
+      case 'Tab': {
+        if (parentRef && activeFocusIndex !== -1) {
+          e.preventDefault();
+
+          parentRef?.current?.focus();
+        } else if (activeFocusIndex === -1) {
+          btnRef && !e.shiftKey ? btnRef?.current?.focus() : parentRef?.current?.focus();
+        }
+
+        setOpenNestedIndex(-1);
+        setActiveFocusIndex(-1);
+
+        return;
+      }
+      default: {
+        return;
+      }
+    }
+  };
+
+  const resetNestedIndex = () => {
+    setActiveFocusIndex(openNestedIndex);
+    setOpenNestedIndex(-1);
+  };
+
+  const resetActiveFocusIndex = () => {
+    setActiveFocusIndex(-1);
+  };
+
+  useEffect(() => {
+    activeFocusIndex !== -1 && openNestedIndex === -1 && itemRefs?.[activeFocusIndex]?.current?.focus();
+  }, [activeFocusIndex, itemRefs, openNestedIndex]);
+
+  return {
+    activeFocusIndex,
+    setActiveFocusIndex,
+    openNestedIndex,
+    resetNestedIndex,
+    resetActiveFocusIndex,
+    handleListKeyDown,
+  };
+}

package/src/components/Lists/index.ts

@@ -0,0 +1,10 @@
+export * from './Droplist';
+export * from './List';
+
+export type { ListProps, DroplistProps } from './types';
+export type {
+  SelectionSingleProps,
+  SelectionMultipleProps,
+  isSelectionSingleProps,
+  isSelectionMultipleProps,
+} from './contexts';

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

@@ -0,0 +1,73 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+
+.listContainer {
+  margin: 0;
+  padding: 0;
+
+  &:focus-visible {
+    border: none;
+    outline: none;
+
+    &[data-active] {
+      @include outline-inside-var($container-focused-s);
+
+      outline-color: $sys-available-complementary;
+
+      * {
+        cursor: inherit;
+      }
+    }
+  }
+
+  li,
+  ul {
+    list-style-type: none;
+  }
+}
+
+.wrapper {
+  position: relative;
+
+  overflow: hidden;
+  display: block;
+
+  box-sizing: border-box;
+  padding: $dimension-025m;
+
+  &:has(.listContainer:focus-visible) {
+    @include outline-inside-var($container-focused-s);
+
+    outline-color: $sys-available-complementary;
+  }
+  li,
+  ul {
+    list-style-type: none;
+  }
+}
+
+.scrollContainerS {
+  height: auto;
+  max-height: calc($dimension-1m * 32); // 256px
+}
+
+.scrollContainerM {
+  height: auto;
+  max-height: calc($dimension-1m * 40); // 320px
+}
+
+.scrollContainerL {
+  height: auto;
+  max-height: calc($dimension-1m * 48); // 384px
+}
+
+.infoBlock {
+  @include composite-var($sans-body-s);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  padding: $dimension-1m;
+
+  color: $sys-neutral-text-support;
+}

package/src/components/Lists/types.ts

@@ -0,0 +1,47 @@
+import { FocusEvent, KeyboardEvent, ReactNode, RefObject } from 'react';
+
+import { DropdownProps } from '@snack-uikit/dropdown';
+import { WithSupportProps } from '@snack-uikit/utils';
+
+import { ScrollProps, SearchState } from '../../types';
+import { ItemProps } from '../Items';
+import { ListContextType, SelectionProviderProps } from './contexts';
+
+export type ListProps = WithSupportProps<
+  {
+    items: ItemProps[];
+    pinTop?: ItemProps[];
+    pinBottom?: ItemProps[];
+    footer?: ReactNode;
+    // TODO: add later
+    // collapse?: 'single' | 'multiple';
+    search?: SearchState;
+    loading?: boolean;
+    noData?: string;
+    noResults?: string;
+    footerActiveElementsRefs?: RefObject<HTMLElement>[];
+  } & Pick<SelectionProviderProps, 'value' | 'defaultValue' | 'onChange' | 'selection'> &
+    ListContextType &
+    ScrollProps
+>;
+
+export type DroplistProps = {
+  triggerElemRef?: RefObject<HTMLElement>;
+  children?: ReactNode;
+  open?: boolean;
+  onOpenChange?(open: boolean): void;
+  trigger?: DropdownProps['trigger'];
+  placement?: DropdownProps['placement'];
+  widthStrategy?: DropdownProps['widthStrategy'];
+} & ListProps;
+
+export type ListPrivateProps = ListProps & {
+  nested?: boolean;
+  active?: boolean;
+  tabIndex?: number;
+  onFocus?(e: FocusEvent<HTMLElement>): void;
+  onBlur?(e: FocusEvent<HTMLElement>): void;
+  onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
+  // TODO: remove later
+  collapse?: 'single' | 'multiple';
+};

package/src/components/index.ts

@@ -0,0 +1,3 @@
+export * from './Lists';
+
+export type { AccordionItemProps, NextListItemProps, BaseItemProps, GroupItemProps, ItemProps } from './Items/types';