@snack-uikit/list 0.19.0 → 0.21.0

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

@@ -6,8 +6,8 @@ import { Scroll } from '@snack-uikit/scroll';
 import { extractSupportProps } from '@snack-uikit/utils';
 
 import { ListEmptyState, useEmptyState } from '../../../helperComponents';
-import { PinBottomGroupItem, PinTopGroupItem, SearchItem, useRenderItems } from '../../Items';
-import { useNewListContext } from '../contexts';
+import { FlattenBaseItem, PinBottomGroupItem, PinTopGroupItem, SearchItem, useRenderItems } from '../../Items';
+import { useNewListContext, useSelectionContext } from '../contexts';
 import commonStyles from '../styles.module.scss';
 import { ListPrivateProps } from '../types';
 import styles from './styles.module.scss';
@@ -40,11 +40,14 @@ export const ListPrivate = forwardRef(
       errorDataState,
       dataError,
       dataFiltered,
+      scrollToSelectedItem,
       ...props
     }: ListPrivateProps,
     ref: ForwardedRef<HTMLElement>,
   ) => {
-    const { size = 's' } = useNewListContext();
+    const { size = 's', flattenItems } = useNewListContext();
+    const { value, isSelectionSingle } = useSelectionContext();
+    const selectedItem = isSelectionSingle && value ? flattenItems[value] : undefined;
 
     const itemsJSX = useRenderItems(items);
     const itemsPinTopJSX = useRenderItems(pinTop);
@@ -88,6 +91,12 @@ export const ListPrivate = forwardRef(
       [dataError, dataFiltered, emptyStates, hasNoItems, itemsJSX, loading, loadingJSX, search?.value],
     );
 
+    const onScrollInitialized = () => {
+      if (scrollToSelectedItem) {
+        (selectedItem as FlattenBaseItem)?.itemRef?.current?.scrollIntoView();
+      }
+    };
+
     const listJSX = (
       <ul
         className={cn(commonStyles.listContainer, className)}
@@ -120,6 +129,7 @@ export const ListPrivate = forwardRef(
             ref={scrollContainerRef}
             untouchableScrollbars={untouchableScrollbars}
             onScroll={onScroll}
+            onInitialized={onScrollInitialized}
           >
             {content}
 

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

@@ -1,11 +1,11 @@
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+@use '@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,
+  's': styles-tokens-element.$dimension-3m,
+  'm': styles-tokens-element.$dimension-4m,
+  'l': styles-tokens-element.$dimension-5m,
 );
 
 .loader {
@@ -15,10 +15,10 @@ $loader-height: (
 
   @each $size in $sizes {
     &[data-size='#{$size}'] {
-      height: simple-var($loader-height, $size);
+      height: styles-tokens-element.simple-var($loader-height, $size);
 
       &[data-no-items] {
-        $no-items-loading-height: calc(3 * simple-var($loader-height, $size));
+        $no-items-loading-height: calc(3 * styles-tokens-element.simple-var($loader-height, $size));
 
         min-width: calc(2 * $no-items-loading-height);
         height: $no-items-loading-height;
@@ -27,15 +27,15 @@ $loader-height: (
   }
 
   &:focus-visible {
-    @include outline-inside-var($container-focused-s);
+    @include styles-tokens-element.outline-inside-var(styles-tokens-element.$container-focused-s);
 
-    outline-color: $sys-available-complementary;
+    outline-color: styles-tokens-element.$sys-available-complementary;
   }
 }
 
 .scrollStub {
-  height: calc($dimension-025m / 2);
-  margin-top: calc($dimension-025m / -2);
+  height: calc(styles-tokens-element.$dimension-025m / 2);
+  margin-top: calc(styles-tokens-element.$dimension-025m / -2);
   background: transparent;
 }
 
@@ -43,7 +43,7 @@ $loader-height: (
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
-  padding: $dimension-050m;
+  padding: styles-tokens-element.$dimension-050m;
 }
 
 .content {

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

@@ -1,5 +1,6 @@
 import { createContext, ReactNode, useContext } from 'react';
 
+import { ITEM_PREFIXES } from '../../../constants';
 import { ItemContentProps } from '../../../helperComponents';
 import { FlattenItem, FocusFlattenItem, ItemId } from '../../Items';
 
@@ -23,6 +24,7 @@ export type PublicListContextType = {
 export type PrivateListContextType = {
   flattenItems: Record<string, FlattenItem>;
   focusFlattenItems: Record<string, FocusFlattenItem>;
+  firstItemId: ItemId;
 };
 
 type Child = {
@@ -31,9 +33,10 @@ type Child = {
 
 type ListContextType = PublicListContextType & PrivateListContextType;
 
-export const ListContext = createContext({
+export const ListContext = createContext<ListContextType>({
   flattenItems: {},
   focusFlattenItems: {},
+  firstItemId: ITEM_PREFIXES.default,
 });
 
 export function useNewListContext() {
@@ -46,8 +49,9 @@ function extractListProps<T extends ListContextType>({
   flattenItems,
   focusFlattenItems,
   contentRender,
+  firstItemId,
 }: T) {
-  return { size, marker, contentRender, flattenItems, focusFlattenItems };
+  return { size, marker, contentRender, flattenItems, focusFlattenItems, firstItemId };
 }
 
 export function NewListContextProvider({ children, ...props }: ListContextType & Child) {

package/src/components/Lists/hooks.ts

@@ -1,21 +1,33 @@
-import { KeyboardEvent, RefObject, useCallback, useRef, useState } from 'react';
+import { KeyboardEvent, RefObject, useCallback, useImperativeHandle, useRef, useState } from 'react';
 
+import { ITEM_PREFIXES } from '../../constants';
 import { FocusFlattenItem, ItemId } from '../Items';
 
 type UseNewKeyboardNavigationProps<T extends HTMLElement> = {
   mainRef?: RefObject<T>;
   btnRef?: RefObject<HTMLButtonElement>;
   focusFlattenItems: Record<string, FocusFlattenItem>;
+  keyboardNavigationRef?: RefObject<{ focusItem(item: ItemId): void }>;
+  hasListInFocusChain: boolean;
+  firstItemId: ItemId;
 };
 
 export function useNewKeyboardNavigation<T extends HTMLElement>({
   mainRef,
   btnRef,
   focusFlattenItems,
+  keyboardNavigationRef,
+  hasListInFocusChain,
+  firstItemId,
 }: UseNewKeyboardNavigationProps<T>) {
-  const [activeItemId, setActiveItemId] = useState<ItemId | undefined>();
+  const defaultActiveItemId = hasListInFocusChain ? undefined : firstItemId;
+  const [activeItemId, setActiveItemId] = useState<ItemId | undefined>(() => defaultActiveItemId);
+  const activeItemIdRef = useRef<ItemId | undefined>(defaultActiveItemId);
 
-  const activeItemIdRef = useRef<ItemId | undefined>();
+  const resetActiveItemId = useCallback(() => {
+    setActiveItemId(defaultActiveItemId);
+    activeItemIdRef.current = defaultActiveItemId;
+  }, [defaultActiveItemId]);
 
   const handleListKeyDownFactory = useCallback(
     (ids: ItemId[], expandedIds: ItemId[]) => (e: KeyboardEvent<T>) => {
@@ -52,12 +64,14 @@ export function useNewKeyboardNavigation<T extends HTMLElement>({
         }
         case 'ArrowUp': {
           if (ids[0] === activeItemIdRef.current) {
-            const item = focusFlattenItems[ids[0]];
-
-            if (item.parentId === '~main') {
-              activeItemIdRef.current = undefined;
-              setActiveItemId(undefined);
-              mainRef?.current?.focus();
+            if (hasListInFocusChain) {
+              const item = focusFlattenItems[ids[0]];
+
+              if (item.parentId === ITEM_PREFIXES.default) {
+                activeItemIdRef.current = undefined;
+                setActiveItemId(undefined);
+                mainRef?.current?.focus();
+              }
             }
           } else if (activeItemIdRef.current !== undefined) {
             const activeIndex = ids.findIndex(id => id === activeItemIdRef.current);
@@ -99,12 +113,16 @@ export function useNewKeyboardNavigation<T extends HTMLElement>({
 
         case 'Tab': {
           if (activeItemIdRef.current !== undefined) {
-            e.preventDefault();
-            e.stopPropagation();
+            if (hasListInFocusChain) {
+              e.preventDefault();
+              e.stopPropagation();
 
-            activeItemIdRef.current = undefined;
-            setActiveItemId(undefined);
-            mainRef?.current?.focus();
+              activeItemIdRef.current = undefined;
+              setActiveItemId(undefined);
+              mainRef?.current?.focus();
+            } else {
+              resetActiveItemId();
+            }
           } else {
             btnRef && !e.shiftKey ? btnRef?.current?.focus() : mainRef?.current?.focus();
           }
@@ -116,14 +134,9 @@ export function useNewKeyboardNavigation<T extends HTMLElement>({
         }
       }
     },
-    [focusFlattenItems, mainRef, btnRef],
+    [focusFlattenItems, hasListInFocusChain, mainRef, resetActiveItemId, btnRef],
   );
 
-  const resetActiveItemId = useCallback(() => {
-    setActiveItemId(undefined);
-    activeItemIdRef.current = undefined;
-  }, []);
-
   const forceUpdateActiveItemId = useCallback(
     (itemId: ItemId) => {
       setActiveItemId(itemId);
@@ -136,6 +149,8 @@ export function useNewKeyboardNavigation<T extends HTMLElement>({
     [focusFlattenItems],
   );
 
+  useImperativeHandle(keyboardNavigationRef, () => ({ focusItem: forceUpdateActiveItemId }), [forceUpdateActiveItemId]);
+
   return {
     resetActiveItemId,
     activeItemId,

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

@@ -1,4 +1,4 @@
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
 
 .listContainer {
   display: flex;
@@ -13,9 +13,9 @@
     outline: none;
 
     &[data-active] {
-      @include outline-inside-var($container-focused-s);
+      @include styles-tokens-element.outline-inside-var(styles-tokens-element.$container-focused-s);
 
-      outline-color: $sys-available-complementary;
+      outline-color: styles-tokens-element.$sys-available-complementary;
 
       * {
         cursor: inherit;
@@ -39,9 +39,9 @@
   height: 100%;
 
   &:has(.listContainer:focus-visible) {
-    @include outline-inside-var($container-focused-s);
+    @include styles-tokens-element.outline-inside-var(styles-tokens-element.$container-focused-s);
 
-    outline-color: $sys-available-complementary;
+    outline-color: styles-tokens-element.$sys-available-complementary;
   }
   li,
   ul {
@@ -51,15 +51,15 @@
 
 .scrollContainerS {
   height: auto;
-  max-height: calc($dimension-1m * 32); // 256px
+  max-height: calc(styles-tokens-element.$dimension-1m * 32); // 256px
 }
 
 .scrollContainerM {
   height: auto;
-  max-height: calc($dimension-1m * 40); // 320px
+  max-height: calc(styles-tokens-element.$dimension-1m * 40); // 320px
 }
 
 .scrollContainerL {
   height: auto;
-  max-height: calc($dimension-1m * 48); // 384px
+  max-height: calc(styles-tokens-element.$dimension-1m * 48); // 384px
 }

package/src/components/Lists/types.ts

@@ -34,6 +34,8 @@ export type ListProps = WithSupportProps<
     footer?: ReactNode;
     /** Список ссылок на кастомные элементы, помещенные в специальную секцию внизу списка  */
     footerActiveElementsRefs?: RefObject<HTMLElement>[];
+    /** Ссылка на управление навигацией листа с клавиатуры  */
+    keyboardNavigationRef?: RefObject<{ focusItem(id: ItemId): void }>;
     /** Настройки поисковой строки */
     search?: SearchState;
 
@@ -43,10 +45,16 @@ export type ListProps = WithSupportProps<
     collapse?: CollapseState;
     /** CSS-класс */
     className?: string;
-    onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
 
     /** Флаг, отвещающий за состояние загрузки списка */
     loading?: boolean;
+
+    /** Обработчик события по нажатию клавиш */
+    onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
+    /** Флаг, отвещающий за включение самого родительского контейнера листа в цепочку фокусирующихся элементов */
+    hasListInFocusChain?: boolean;
+    /** Флаг, отвещающий за прокручивание до выбранного элемента */
+    scrollToSelectedItem?: boolean;
   } & SelectionState &
     PublicListContextType &
     ScrollProps &
@@ -74,9 +82,9 @@ export type DroplistProps = {
    */
   children: ReactNode | ((params: { onKeyDown?: (e: KeyboardEvent<HTMLElement>) => void }) => ReactNode);
 } & Pick<DropdownProps, 'trigger' | 'placement' | 'widthStrategy' | 'open' | 'onOpenChange' | 'triggerClassName'> &
-  Omit<ListProps, 'tabIndex' | 'onKeyDown'>;
+  Omit<ListProps, 'tabIndex' | 'onKeyDown' | 'hasListInFocusChain' | 'keyboardNavigationRef'>;
 
-export type ListPrivateProps = Omit<ListProps, 'pinTop' | 'pinBottom' | 'items'> & {
+export type ListPrivateProps = Omit<ListProps, 'pinTop' | 'pinBottom' | 'items' | 'hasListInFocusChain'> & {
   nested?: boolean;
   active?: boolean;
   tabIndex?: number;

package/src/constants.ts

@@ -0,0 +1,8 @@
+export const ITEM_PREFIXES = {
+  default: '~main',
+  pinTop: '~pinTop',
+  pinBottom: '~pinBottom',
+  footer: '~footer',
+  search: '~search',
+  dropFocus: '~dropFocus',
+};

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

@@ -1,4 +1,4 @@
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
 
 $duration: 300ms;
 
@@ -45,7 +45,7 @@ $duration: 300ms;
     width: 100%;
     height: 100%;
 
-    opacity: $opacity-a004;
-    background-color: $sys-neutral-accent-default;
+    opacity: styles-tokens-element.$opacity-a004;
+    background-color: styles-tokens-element.$sys-neutral-accent-default;
   }
 }

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

@@ -1,25 +1,24 @@
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-dropList';
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-dropList';
 
 $sizes: 's', 'm', 'l';
 $typography: (
   's': (
-    'label': $sans-body-s,
-    'caption': $sans-body-s,
-    'description': $sans-body-s,
-    'separator': $light-label-m,
+    'label': styles-tokens-dropList.$sans-body-s,
+    'caption': styles-tokens-dropList.$sans-body-s,
+    'description': styles-tokens-dropList.$sans-body-s,
+    'separator': styles-tokens-dropList.$light-label-m,
   ),
   'm': (
-    'label': $sans-body-m,
-    'caption': $sans-body-s,
-    'description': $sans-body-s,
-    'separator': $light-label-l,
+    'label': styles-tokens-dropList.$sans-body-m,
+    'caption': styles-tokens-dropList.$sans-body-s,
+    'description': styles-tokens-dropList.$sans-body-s,
+    'separator': styles-tokens-dropList.$light-label-l,
   ),
   'l': (
-    'label': $sans-body-l,
-    'caption': $sans-body-m,
-    'description': $sans-body-m,
-    'separator': $light-label-l,
+    'label': styles-tokens-dropList.$sans-body-l,
+    'caption': styles-tokens-dropList.$sans-body-m,
+    'description': styles-tokens-dropList.$sans-body-m,
+    'separator': styles-tokens-dropList.$light-label-l,
   ),
 );
 
@@ -30,18 +29,18 @@ $typography: (
 .label {
   overflow: hidden;
   flex: 1;
-  color: $sys-neutral-text-main;
+  color: styles-tokens-dropList.$sys-neutral-text-main;
 }
 
 .caption {
   overflow: hidden;
-  color: $sys-neutral-text-light;
+  color: styles-tokens-dropList.$sys-neutral-text-light;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .description {
-  color: $sys-neutral-text-support;
+  color: styles-tokens-dropList.$sys-neutral-text-support;
 }
 
 .content {
@@ -53,19 +52,19 @@ $typography: (
   @each $size in $sizes {
     &[data-size='#{$size}'] {
       .headline {
-        @include composite-var($drop-list, 'item', $size, 'headline');
+        @include styles-tokens-dropList.composite-var(styles-tokens-dropList.$drop-list, 'item', $size, 'headline');
       }
       .label {
-        @include composite-var($typography, $size, 'label');
+        @include styles-tokens-dropList.composite-var($typography, $size, 'label');
 
         display: flex;
         align-items: center;
       }
       .caption {
-        @include composite-var($typography, $size, 'caption');
+        @include styles-tokens-dropList.composite-var($typography, $size, 'caption');
       }
       .description {
-        @include composite-var($typography, $size, 'description');
+        @include styles-tokens-dropList.composite-var($typography, $size, 'description');
       }
     }
   }
@@ -74,7 +73,7 @@ $typography: (
     .label,
     .description,
     .caption {
-      color: $sys-neutral-text-disabled;
+      color: styles-tokens-dropList.$sys-neutral-text-disabled;
     }
   }
 }

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

@@ -1,4 +1,4 @@
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
 
 .listEmptyStateWrapper {
   display: flex;
@@ -7,5 +7,5 @@
   justify-content: center;
 
   box-sizing: border-box;
-  padding: $dimension-1m;
+  padding: styles-tokens-element.$dimension-1m;
 }

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

@@ -1,19 +1,18 @@
-@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';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-button-buttonFunction';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-dropList';
 
 $sizes: 's', 'm', 'l';
 
 $typography-primary: (
-  's': $sans-label-m,
-  'm': $sans-label-l,
-  'l': $sans-title-m,
+  's': styles-tokens-button-buttonFunction.$sans-label-m,
+  'm': styles-tokens-button-buttonFunction.$sans-label-l,
+  'l': styles-tokens-button-buttonFunction.$sans-title-m,
 );
 
 $typography-secondary: (
-  's': $light-label-m,
-  'm': $light-label-l,
-  'l': $light-title-m,
+  's': styles-tokens-button-buttonFunction.$light-label-m,
+  'm': styles-tokens-button-buttonFunction.$light-label-l,
+  'l': styles-tokens-button-buttonFunction.$light-title-m,
 );
 
 $button-size: (
@@ -26,7 +25,7 @@ $containerSize: 1px;
 
 .separatorWithLabel {
   display: flex;
-  gap: $dimension-1m;
+  gap: styles-tokens-button-buttonFunction.$dimension-1m;
   align-items: flex-end;
 
   box-sizing: border-box;
@@ -35,14 +34,14 @@ $containerSize: 1px;
 
   @each $size in $sizes {
     &[data-size='#{$size}'] {
-      @include composite-var($drop-list, 'item', $size, 'container-separator-subheader');
+      @include styles-tokens-button-buttonFunction.composite-var(styles-tokens-dropList.$drop-list, 'item', $size, 'container-separator-subheader');
 
       .label {
         &[data-mode='primary'] {
-          @include composite-var(simple-var($typography-primary, $size));
+          @include styles-tokens-button-buttonFunction.composite-var(styles-tokens-button-buttonFunction.simple-var($typography-primary, $size));
         }
         &[data-mode='secondary'] {
-          @include composite-var(simple-var($typography-secondary, $size));
+          @include styles-tokens-button-buttonFunction.composite-var(styles-tokens-button-buttonFunction.simple-var($typography-secondary, $size));
         }
       }
     }
@@ -55,7 +54,7 @@ $containerSize: 1px;
 
   @each $size in $sizes {
     &[data-size='#{$size}'] {
-      @include composite-var($drop-list, 'item', $size, 'container-separator');
+      @include styles-tokens-button-buttonFunction.composite-var(styles-tokens-dropList.$drop-list, 'item', $size, 'container-separator');
     }
   }
 
@@ -67,11 +66,11 @@ $containerSize: 1px;
   flex-shrink: 1;
 
   &[data-mode='primary'] {
-    color: $sys-neutral-text-main;
+    color: styles-tokens-button-buttonFunction.$sys-neutral-text-main;
   }
 
   &[data-mode='secondary'] {
-    color: $sys-neutral-text-light;
+    color: styles-tokens-button-buttonFunction.$sys-neutral-text-light;
   }
 }
 
@@ -98,15 +97,14 @@ hr.divider {
       transform: translateY(
         calc(
           (
-              simple-var(
-                  $button-function,
+              styles-tokens-button-buttonFunction.simple-var(
+                  styles-tokens-button-buttonFunction.$button-function,
                   'container',
-                  simple-var($button-size, $size),
+                  styles-tokens-button-buttonFunction.simple-var($button-size, $size),
                   'label-only',
                   'height'
-                ) - simple-var($theme-variables, 'sans', 'label', $size, 'line-height')
-            ) /
-            2 - var(--divider-height, 0)
+                ) - styles-tokens-button-buttonFunction.simple-var(styles-tokens-button-buttonFunction.$theme-variables, 'sans', 'label', $size, 'line-height')
+            ) / 2 - var(--divider-height, 0)
         )
       );
     }

package/src/index.ts

@@ -4,3 +4,6 @@ export type { SearchState } from './types';
 export { kindFlattenItems } from './components/Items';
 
 export * from './helperComponents/ItemContent';
+
+export * from './utils';
+export * from './constants';

package/src/utils.ts

@@ -0,0 +1,20 @@
+import { ItemId } from './components';
+import { ITEM_PREFIXES } from './constants';
+
+/**
+ * Возвращает id для элемента футера
+ * @function  helper
+ */
+export const getFooterItemId = (id: ItemId) => `${ITEM_PREFIXES.footer}__${id}`;
+
+/**
+ * Возвращает id для элемента, подставляя перфикс
+ * @function  helper
+ */
+export const getItemAutoId = (prefix: ItemId, id: ItemId) => [prefix, id].join('-');
+
+/**
+ * Возвращает id для дефолтного элемента
+ * @function  helper
+ */
+export const getDefaultItemId = (id: ItemId) => getItemAutoId(ITEM_PREFIXES.default, id);