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

package/src/components/Lists/types.ts

@@ -5,19 +5,12 @@ import { WithSupportProps } from '@snack-uikit/utils';
 
 import { EmptyStateProps } from '../../helperComponents';
 import { ScrollProps, SearchState } from '../../types';
-import { ItemProps } from '../Items';
-import { ListContextPrivateType, ListContextType, SelectionState } from './contexts';
-
-type CollapseState = {
-  value?: (string | number)[];
-  onChange?(value: (string | number)[]): void;
-  defaultValue?: (string | number)[];
-};
+import { FlattenBaseItem, Item, ItemId } from '../Items';
+import { CollapseState, PublicListContextType, SelectionState } from './contexts';
 
 export type EmptyState = {
   dataFiltered?: boolean;
   dataError?: boolean;
-
   /** Экран при отстутствии данных */
   noDataState?: EmptyStateProps;
   /** Экран при отстутствии результатов поиска или фильтров */
@@ -29,11 +22,11 @@ export type EmptyState = {
 export type ListProps = WithSupportProps<
   {
     /** Основные элементы списка */
-    items: ItemProps[];
+    items: Item[];
     /** Элементы списка, закрепленные сверху */
-    pinTop?: ItemProps[];
+    pinTop?: Item[];
     /** Элементы списка, закрепленные снизу */
-    pinBottom?: ItemProps[];
+    pinBottom?: Item[];
     /**
      * Кастомизируемый элемент в конце списка
      * @type ReactNode;
@@ -55,7 +48,7 @@ export type ListProps = WithSupportProps<
     /** Флаг, отвещающий за состояние загрузки списка */
     loading?: boolean;
   } & SelectionState &
-    ListContextType &
+    PublicListContextType &
     ScrollProps &
     EmptyState
 >;
@@ -70,16 +63,19 @@ export type DroplistProps = {
    * Рендер функция принимает аргументы `onKeyDown` - хендлер ввода, для поддержки управления с клавиатуры
    */
   children: ReactNode | ((params: { onKeyDown?: (e: KeyboardEvent<HTMLElement>) => void }) => ReactNode);
-} & Pick<DropdownProps, 'trigger' | 'placement' | 'widthStrategy' | 'open' | 'onOpenChange'> &
+} & Pick<DropdownProps, 'trigger' | 'placement' | 'widthStrategy' | 'open' | 'onOpenChange' | 'triggerClassName'> &
   Omit<ListProps, 'tabIndex' | 'onKeyDown'>;
 
-export type ListPrivateProps = ListProps &
-  ListContextPrivateType & {
-    nested?: boolean;
-    active?: boolean;
-    tabIndex?: number;
-    onFocus?(e: FocusEvent<HTMLElement>): void;
-    onBlur?(e: FocusEvent<HTMLElement>): void;
-    onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
-    limitedScrollHeight?: boolean;
-  };
+export type ListPrivateProps = Omit<ListProps, 'pinTop' | 'pinBottom' | 'items'> & {
+  nested?: boolean;
+  active?: boolean;
+  tabIndex?: number;
+  onFocus?(e: FocusEvent<HTMLElement>): void;
+  onBlur?(e: FocusEvent<HTMLElement>): void;
+  onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
+  limitedScrollHeight?: boolean;
+  searchItem?: FlattenBaseItem;
+  pinTop?: ItemId[];
+  items: ItemId[];
+  pinBottom?: ItemId[];
+};

package/src/components/index.ts

@@ -1,6 +1,20 @@
 export * from './Lists';
 
-export type { AccordionItemProps, NextListItemProps, BaseItemProps, GroupItemProps, ItemProps } from './Items';
-export { isAccordionItemProps, isBaseItemProps, isGroupItemProps, isNextListItemProps } from './Items';
+export type {
+  AccordionItemProps,
+  NextListItemProps,
+  BaseItemProps,
+  GroupItemProps,
+  ItemProps,
+  GroupSelectItemProps,
+} from './Items';
+
+export {
+  isAccordionItemProps,
+  isBaseItemProps,
+  isGroupItemProps,
+  isNextListItemProps,
+  isGroupSelectItem,
+} from './Items';
 
 export { useGroupItemSelection } from './Items/hooks';

package/src/helperComponents/ItemContent/ItemContent.tsx

@@ -0,0 +1,63 @@
+import cn from 'classnames';
+
+import { TruncateString, TruncateStringProps } from '@snack-uikit/truncate-string';
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import { useNewListContext } from '../../components/Lists/contexts';
+import styles from './styles.module.scss';
+
+export type ItemContentProps = WithSupportProps<{
+  option: string | number;
+  caption?: string;
+  description?: string;
+  truncate?: {
+    option?: number;
+    description?: number;
+    variant?: TruncateStringProps['variant'];
+  };
+  disabled?: boolean;
+  className?: string;
+}>;
+
+export function ItemContent({
+  truncate,
+  caption,
+  description,
+  option,
+  className,
+  disabled,
+  ...rest
+}: ItemContentProps) {
+  const { size = 's' } = useNewListContext();
+
+  return (
+    <div
+      className={cn(styles.content, className)}
+      {...extractSupportProps(rest)}
+      data-size={size ?? 's'}
+      data-disabled={disabled || undefined}
+    >
+      <div className={styles.headline}>
+        <span className={styles.label}>
+          <TruncateString
+            variant={truncate?.variant}
+            text={String(option)}
+            maxLines={truncate?.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={truncate?.description ?? 2}
+            data-test-id='list__base-item-description'
+          />
+        </div>
+      )}
+    </div>
+  );
+}

package/src/helperComponents/ItemContent/index.ts

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

package/src/helperComponents/ItemContent/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';
+$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;
+}
+
+.label {
+  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;
+}
+
+.content {
+  overflow: hidden;
+  flex-grow: 1;
+  flex-shrink: 1;
+  box-sizing: border-box;
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      .headline {
+        @include composite-var($drop-list, 'item', $size, 'headline');
+      }
+      .label {
+        @include composite-var($typography, $size, 'label');
+      }
+      .caption {
+        @include composite-var($typography, $size, 'caption');
+      }
+      .description {
+        @include composite-var($typography, $size, 'description');
+      }
+    }
+  }
+
+  &[data-disabled] {
+    .label,
+    .description,
+    .caption {
+      color: $sys-neutral-text-disabled;
+    }
+  }
+}

package/src/helperComponents/ListEmptyState/ListEmptyState.tsx

@@ -13,23 +13,37 @@ export type ListEmptyState = {
   loading?: boolean;
   dataError?: boolean;
   dataFiltered?: boolean;
-  itemsLength: number;
+  hasNoItems: boolean;
 };
 
-export function ListEmptyState({ dataError, dataFiltered, itemsLength, emptyStates, loading }: ListEmptyState) {
-  if (itemsLength || loading) {
+export function ListEmptyState({ dataError, dataFiltered, hasNoItems, emptyStates, loading }: ListEmptyState) {
+  if (loading) {
     return null;
   }
 
-  return (
-    <div className={styles.listEmptyStateWrapper}>
-      {dataError && <InfoBlock {...emptyStates.errorDataState} size='s' align='vertical' />}
-      {!dataError && dataFiltered && (
+  if (dataError) {
+    return (
+      <div className={styles.listEmptyStateWrapper}>
+        <InfoBlock {...emptyStates.errorDataState} size='s' align='vertical' />
+      </div>
+    );
+  }
+
+  if (dataFiltered && hasNoItems) {
+    return (
+      <div className={styles.listEmptyStateWrapper}>
         <InfoBlock {...emptyStates.noResultsState} size='s' align='vertical' data-test-id='list__no-results' />
-      )}
-      {!dataError && !dataFiltered && (
+      </div>
+    );
+  }
+
+  if (!dataFiltered && hasNoItems) {
+    return (
+      <div className={styles.listEmptyStateWrapper}>
         <InfoBlock {...emptyStates.noDataState} size='s' align='vertical' data-test-id='list__no-data' />
-      )}
-    </div>
-  );
+      </div>
+    );
+  }
+
+  return null;
 }

package/src/helperComponents/Separator/Separator.tsx

@@ -1,6 +1,12 @@
+import { ForwardedRef, MouseEvent, RefObject, useMemo } from 'react';
+
+import { ButtonFunction } from '@snack-uikit/button';
 import { Divider } from '@snack-uikit/divider';
+import { useLocale } from '@snack-uikit/locale';
 import { TruncateString, TruncateStringProps } from '@snack-uikit/truncate-string';
 
+import { useNewListContext } from '../../components/Lists/contexts';
+import { SELECT_BUTTON_SIZE_MAP } from './constants';
 import styles from './styles.module.scss';
 
 export type SeparatorProps = {
@@ -10,10 +16,46 @@ export type SeparatorProps = {
   };
   mode?: 'primary' | 'secondary';
   divider?: boolean;
-  size?: 's' | 'm' | 'l';
+  selectButton?: {
+    onClick?(e: MouseEvent<HTMLElement>): void;
+    indeterminate?: boolean;
+    checked?: boolean;
+    itemRef?: ForwardedRef<HTMLElement>;
+  };
 };
 
-export function Separator({ label, truncate, divider, mode = 'secondary', size = 's' }: SeparatorProps) {
+export function Separator({ label, truncate, divider, mode = 'secondary', selectButton }: SeparatorProps) {
+  const { size = 's' } = useNewListContext();
+
+  const { t } = useLocale('List');
+
+  const selectButtonJSX = useMemo(() => {
+    if (!selectButton) {
+      return null;
+    }
+
+    const { onClick, checked, itemRef } = selectButton;
+
+    return (
+      <span className={styles.selectButton} data-size={size} data-weight={(divider && mode) || undefined}>
+        <ButtonFunction
+          size={SELECT_BUTTON_SIZE_MAP[size]}
+          tabIndex={0}
+          onClick={e => {
+            onClick?.(e);
+            e.preventDefault();
+            e.stopPropagation();
+          }}
+          onFocus={e => {
+            e.stopPropagation();
+          }}
+          ref={itemRef as RefObject<HTMLButtonElement>}
+          label={checked ? t('groupSelectButton.reset') : t('groupSelectButton.select')}
+        />
+      </span>
+    );
+  }, [divider, mode, selectButton, size, t]);
+
   if (label) {
     return (
       <div className={styles.separatorWithLabel} data-size={size}>
@@ -21,7 +63,11 @@ export function Separator({ label, truncate, divider, mode = 'secondary', size =
           <TruncateString variant={truncate?.variant} text={label} maxLines={1} />
         </span>
 
-        {divider && <Divider weight={mode === 'primary' ? 'regular' : 'light'} className={styles.divider} />}
+        <div style={{ flex: 1 }}>
+          {selectButtonJSX}
+
+          {divider && <Divider weight={mode === 'primary' ? 'regular' : 'light'} className={styles.divider} />}
+        </div>
       </div>
     );
   }

package/src/helperComponents/Separator/constants.ts

@@ -0,0 +1,7 @@
+import { ButtonFunctionProps } from '@snack-uikit/button';
+
+export const SELECT_BUTTON_SIZE_MAP: Record<string, ButtonFunctionProps['size']> = {
+  s: 'xs',
+  m: 's',
+  l: 'm',
+} as const;

package/src/helperComponents/Separator/styles.module.scss

@@ -1,3 +1,4 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-button-buttonFunction';
 @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-dropList';
 @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
 
@@ -15,8 +16,15 @@ $typography-secondary: (
   'l': $light-title-m,
 );
 
+$button-size: (
+  's': 'xs',
+  'm': 's',
+  'l': 'm',
+);
+
+$containerSize: 1px;
+
 .separatorWithLabel {
-  overflow: hidden;
   display: flex;
   gap: $dimension-1m;
   align-items: flex-end;
@@ -72,3 +80,35 @@ hr.divider {
   width: auto;
   min-width: 0;
 }
+
+.selectButton {
+  display: flex;
+  justify-content: flex-end;
+
+  &[data-weight='primary'] {
+    --divider-height: #{$containerSize};
+  }
+
+  &[data-weight='secondary'] {
+    --divider-height: #{calc($containerSize / 2)};
+  }
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      transform: translateY(
+        calc(
+          (
+              simple-var(
+                  $button-function,
+                  'container',
+                  simple-var($button-size, $size),
+                  'label-only',
+                  'height'
+                ) - simple-var($theme-variables, 'sans', 'label', $size, 'line-height')
+            ) /
+            2 - var(--divider-height, 0)
+        )
+      );
+    }
+  }
+}

package/src/helperComponents/index.ts

@@ -2,3 +2,4 @@ export * from './CollapseBlockPrivate';
 export * from './Separator';
 export * from './HiddenTabButton';
 export * from './ListEmptyState';
+export * from './ItemContent';

package/src/hooks.ts

@@ -1,27 +1,33 @@
-import FuzzySearch from 'fuzzy-search';
+// import FuzzySearch from 'fuzzy-search';
 import { useCallback } from 'react';
 
 import { ItemProps } from './components/Items';
-import { flattenItems } from './utils';
+// import { flattenItems } from './utils';
 
-const DEFAULT_MIN_SEARCH_INPUT_LENGTH = 2;
+// const DEFAULT_MIN_SEARCH_INPUT_LENGTH = 2;
 
 /**
  * Нечеткий поиск среди айтемов по полям 'content.option', 'content.caption', 'content.description', 'label'
  */
-export function useFuzzySearch(items: ItemProps[], minSearchInputLength?: number) {
+export function useFuzzySearch(
+  items: ItemProps[],
+  // minSearchInputLength?: number
+) {
   return useCallback(
-    (search: string) => {
-      const searcher = new FuzzySearch(
-        flattenItems(items),
-        ['content.option', 'content.caption', 'content.description', 'label'],
-        {},
-      );
+    () =>
+      // (search: string) =>
+      // const searcher = new FuzzySearch(
+      //   // flattenItems(items),
+      //   ['content.option', 'content.caption', 'content.description', 'label'],
+      //   {},
+      // );
 
-      return search.length > (minSearchInputLength ?? DEFAULT_MIN_SEARCH_INPUT_LENGTH)
-        ? searcher.search(search)
-        : items;
-    },
-    [items, minSearchInputLength],
+      // return search.length > (minSearchInputLength ?? DEFAULT_MIN_SEARCH_INPUT_LENGTH)
+      //   ? searcher.search(search)
+      //   : items;
+
+      items,
+
+    [items],
   );
 }

package/src/index.ts

@@ -1,4 +1,7 @@
 export * from './components';
-export { useFuzzySearch } from './hooks';
+
 export type { SearchState } from './types';
-export { extractChildIds, flattenItems } from './utils';
+export { kindFlattenItems } from './components/Items';
+
+export * from './helperComponents/ItemContent';
+export * from './legacy';

package/src/legacy/components/Items/hooks.tsx

@@ -0,0 +1,53 @@
+import { useEffect, useMemo } from 'react';
+
+import { ItemProps } from '../../../components';
+import { useSelectionContext } from '../../../components/Lists/contexts';
+import { extractAllChildIds, extractChildIds } from '../../utils';
+
+type UseGroupItemSelectionProps = {
+  items: ItemProps[];
+  id?: string | number;
+  disabled?: boolean;
+};
+
+export function useLegacyGroupItemSelection({ id = '', items, disabled }: UseGroupItemSelectionProps) {
+  const { value, setValue, isSelectionMultiple } = useSelectionContext();
+  const { childIds, allChildIds } = useMemo(
+    () => ({ childIds: extractChildIds({ items }), allChildIds: extractAllChildIds({ items }) }),
+    [items],
+  );
+
+  const isIndeterminate = isSelectionMultiple
+    ? allChildIds.some(childId => value?.includes(childId))
+    : allChildIds.includes(value ?? '');
+  const checked = isSelectionMultiple ? allChildIds.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/legacy/components/index.ts

@@ -0,0 +1 @@
+export { useLegacyGroupItemSelection } from './Items/hooks';

package/src/legacy/hooks.ts

@@ -0,0 +1,27 @@
+import FuzzySearch from 'fuzzy-search';
+import { useCallback } from 'react';
+
+import { ItemProps } from '../components';
+import { flattenItems } from './utils';
+
+const DEFAULT_MIN_SEARCH_INPUT_LENGTH = 2;
+
+/**
+ * Нечеткий поиск среди айтемов по полям 'content.option', 'content.caption', 'content.description', 'label'
+ */
+export function useFuzzySearch(items: ItemProps[], minSearchInputLength?: number) {
+  return useCallback(
+    (search: string) => {
+      const searcher = new FuzzySearch(
+        flattenItems(items),
+        ['content.option', 'content.caption', 'content.description', 'label'],
+        {},
+      );
+
+      return search.length > (minSearchInputLength ?? DEFAULT_MIN_SEARCH_INPUT_LENGTH)
+        ? searcher.search(search)
+        : items;
+    },
+    [items, minSearchInputLength],
+  );
+}

package/src/legacy/index.ts

@@ -0,0 +1,3 @@
+export * from './components';
+export { useFuzzySearch } from './hooks';
+export { extractChildIds, flattenItems } from './utils';

package/src/{utils.ts → legacy/utils.ts}

@@ -9,7 +9,7 @@ import {
   isNextListItemProps,
   ItemProps,
   NextListItemProps,
-} from './components/Items';
+} from '../components/Items';
 
 type WithCollapsedItemsProps = {
   items: ItemProps[];
@@ -71,15 +71,6 @@ export function withCollapsedItems({ items, openCollapsedItems }: WithCollapsedI
   return { items, itemRefs, ids, expandedIds };
 }
 
-export function extractItemRefs(items: ItemProps[]): RefObject<HTMLElement>[] {
-  return items.reduce((prev: RefObject<HTMLElement>[], item: ItemProps) => {
-    if (isGroupItemProps(item)) {
-      return prev.concat(extractItemRefs(item.items));
-    }
-    return item.itemRef ? prev.concat([item.itemRef]) : prev;
-  }, [] as RefObject<HTMLElement>[]);
-}
-
 /**
  * Функция возвращает массив id дочерних items
  * @function  extractItemIds
@@ -153,11 +144,11 @@ export function extractAllChildIds({ items }: { items: ItemProps[] }): Array<str
  */
 
 export function flattenItems(items: ItemProps[]): (BaseItemProps | AccordionItemProps | NextListItemProps)[] {
-  const flattenedItems: (BaseItemProps | AccordionItemProps | NextListItemProps)[] = [];
+  const flattenItems: (BaseItemProps | AccordionItemProps | NextListItemProps)[] = [];
 
   function flatten(item: ItemProps) {
     if (!isGroupItemProps(item)) {
-      flattenedItems.push(item);
+      flattenItems.push(item);
     }
 
     if ('items' in item) {
@@ -171,5 +162,5 @@ export function flattenItems(items: ItemProps[]): (BaseItemProps | AccordionItem
     flatten(item);
   }
 
-  return flattenedItems;
+  return flattenItems;
 }

package/src/types.ts

@@ -2,9 +2,9 @@ import { RefObject } from 'react';
 
 export type SearchState = {
   placeholder?: string;
+  loading?: boolean;
   value?: string;
   onChange(value: string): void;
-  loading?: boolean;
 };
 
 export type ScrollProps = {

package/dist/components/Items/NextListItem/hooks.d.ts

@@ -1,19 +0,0 @@
-import { KeyboardEvent, RefObject } from 'react';
-type UseKeyboardNavigationProps = {
-    ids: Array<number | string>;
-    expandedIds: Array<number | string>;
-    itemRefs?: RefObject<HTMLElement>[];
-    id?: string | number;
-};
-export declare function useKeyboardNavigation({ ids, expandedIds, itemRefs, id }: UseKeyboardNavigationProps): {
-    activeFocusIndex: number;
-    setActiveFocusIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
-    openNestedIndex: number;
-    setOpenNestedIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
-    resetNestedIndex: () => void;
-    resetActiveFocusIndex: () => void;
-    handleListKeyDown: (e: KeyboardEvent<HTMLElement>) => void;
-    open: boolean;
-    setOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-};
-export {};