@snack-uikit/list 0.1.3-preview-3f90b7f1.0 → 0.2.0

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

@@ -18,7 +18,6 @@ export const ListPrivate = forwardRef<HTMLElement, ListPrivateProps>(
       items,
       pinTop,
       pinBottom,
-      collapse = 'multiple',
       onKeyDown,
       onBlur,
       onFocus,
@@ -35,6 +34,8 @@ export const ListPrivate = forwardRef<HTMLElement, ListPrivateProps>(
       noResults = 'No results',
       size = 's',
       marker,
+      limitedScrollHeight,
+      className,
       ...props
     },
     ref,
@@ -63,7 +64,7 @@ export const ListPrivate = forwardRef<HTMLElement, ListPrivateProps>(
 
     const content = useMemo(
       () => (
-        <>
+        <div className={styles.content}>
           {itemsJSX}
           {loadingJSX}
           {hasNoItems && !search?.value && !loading && (
@@ -76,14 +77,14 @@ export const ListPrivate = forwardRef<HTMLElement, ListPrivateProps>(
               {noResults}
             </div>
           )}
-        </>
+        </div>
       ),
       [hasNoItems, itemsJSX, loading, loadingJSX, noData, noResults, search?.value],
     );
 
     const listJSX = (
       <ul
-        className={commonStyles.listContainer}
+        className={cn(commonStyles.listContainer, className)}
         ref={ref as ForwardedRef<HTMLUListElement>}
         onKeyDown={onKeyDown}
         tabIndex={tabIndex}
@@ -93,7 +94,7 @@ export const ListPrivate = forwardRef<HTMLElement, ListPrivateProps>(
         role='menu'
         {...extractSupportProps(props)}
       >
-        <ToggleGroup selectionMode={collapse}>
+        <ToggleGroup selectionMode={'multiple'}>
           {(Number(pinTop?.length) > 0 || search) && (
             <PinTopGroupItem>
               {search && <SearchItem search={search} />}
@@ -105,12 +106,12 @@ export const ListPrivate = forwardRef<HTMLElement, ListPrivateProps>(
           {scroll ? (
             <Scroll
               className={cn({
-                [commonStyles.scrollContainerS]: scroll && size === 's',
-                [commonStyles.scrollContainerM]: scroll && size === 'm',
-                [commonStyles.scrollContainerL]: scroll && size === 'l',
+                [commonStyles.scrollContainerS]: scroll && limitedScrollHeight && size === 's',
+                [commonStyles.scrollContainerM]: scroll && limitedScrollHeight && size === 'm',
+                [commonStyles.scrollContainerL]: scroll && limitedScrollHeight && size === 'l',
               })}
-              barHideStrategy='never'
-              size='s'
+              barHideStrategy='leave'
+              size={size === 's' ? 's' : 'm'}
               ref={scrollContainerRef}
             >
               {content}

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

@@ -46,3 +46,7 @@ $loader-height: (
   box-sizing: border-box;
   padding: $dimension-050m;
 }
+
+.content {
+  flex-grow: 1;
+}

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

@@ -3,8 +3,6 @@ import { createContext, ReactNode, useContext } from 'react';
 export type ListContextType = {
   /** Размер списка */
   size?: 's' | 'm' | 'l';
-  // TODO
-  // collapse?: 'single' | 'multiple';
   /** Отображать ли маркер у выбранного жлемента списка */
   marker?: boolean;
 };

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

@@ -3,7 +3,7 @@ import { useUncontrolledProp } from 'uncontrollable';
 
 type SelectionSingleValueType = string | number | undefined;
 
-export type SelectionSingleProps = {
+type SelectionSingleState = {
   /** Начальное состояние */
   defaultValue?: SelectionSingleValueType;
   /** Controlled состояние */
@@ -11,17 +11,20 @@ export type SelectionSingleProps = {
   /** Controlled обработчик измения состояния */
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   onChange?(value: any): void;
+  /** Режим выбора */
+  mode: 'single';
+};
+
+export type SelectionSingleProps = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   setValue?(value: any): void;
-  /** Режим выбора */
-  selection: 'single';
   /** Режим выбора single */
   isSelectionSingle: true;
   /** Режим выбора multi */
   isSelectionMultiple: false;
-};
+} & SelectionSingleState;
 
-export type SelectionMultipleProps = {
+type SelectionMultipleState = {
   /** Начальное состояние */
   defaultValue?: SelectionSingleValueType[];
   /** Controlled состояние */
@@ -29,18 +32,21 @@ export type SelectionMultipleProps = {
   /** Controlled обработчик измения состояния */
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   onChange?(value: any): void;
+  /** Режим выбора */
+  mode: 'multiple';
+};
+
+export type SelectionMultipleProps = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   setValue?(value: any): void;
-  /** Режим выбора */
-  selection: 'multiple';
   /** Режим выбора single */
   isSelectionSingle: false;
   /** Режим выбора multi */
   isSelectionMultiple: true;
-};
+} & SelectionMultipleState;
 
 type SelectionNoneProps = {
-  selection?: undefined;
+  mode?: undefined;
   value?: undefined;
   onChange?: undefined;
   setValue?: undefined;
@@ -49,27 +55,29 @@ type SelectionNoneProps = {
   isSelectionMultiple?: undefined;
 };
 
-export type SelectionProviderProps = SelectionSingleProps | SelectionMultipleProps | SelectionNoneProps;
+type SelectionProviderProps = SelectionSingleProps | SelectionMultipleProps | SelectionNoneProps;
 
 type SelectionContextType =
   | Omit<SelectionNoneProps, 'defaultValue'>
   | Omit<SelectionSingleProps, 'defaultValue'>
   | Omit<SelectionMultipleProps, 'defaultValue'>;
 
+export type SelectionState = { selection?: SelectionSingleState | SelectionMultipleState };
+
 export const SelectionContext = createContext<SelectionContextType>({
   value: undefined,
   onChange: undefined,
-  selection: undefined,
+  mode: 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';
+  return 'mode' in props && props['mode'] === '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';
+  return 'mode' in props && props['mode'] === 'single';
 }
 
 type Child = {
@@ -100,7 +108,14 @@ function SelectionSingleProvider({
 
   return (
     <SelectionContext.Provider
-      value={{ value, onChange, selection: 'single', isSelectionSingle: true, isSelectionMultiple: false, setValue }}
+      value={{
+        value,
+        onChange,
+        mode: 'single',
+        isSelectionSingle: true,
+        isSelectionMultiple: false,
+        setValue,
+      }}
     >
       {children}
     </SelectionContext.Provider>
@@ -135,37 +150,36 @@ function SelectionMultipleProvider({
 
   return (
     <SelectionContext.Provider
-      value={{ value, onChange, selection: 'multiple', isSelectionSingle: false, isSelectionMultiple: true, setValue }}
+      value={{
+        value,
+        onChange,
+        mode: 'multiple',
+        isSelectionSingle: false,
+        isSelectionMultiple: true,
+        setValue,
+      }}
     >
       {children}
     </SelectionContext.Provider>
   );
 }
 
-export function SelectionProvider(props: SelectionProviderProps & Child) {
+export function SelectionProvider({ children, ...props }: SelectionProviderProps & Child) {
   if (isSelectionSingleProps(props)) {
-    return <SelectionSingleProvider {...props} />;
+    return <SelectionSingleProvider {...props}>{children}</SelectionSingleProvider>;
   }
 
   if (isSelectionMultipleProps(props)) {
-    return <SelectionMultipleProvider {...props} />;
+    return <SelectionMultipleProvider {...props}>{children}</SelectionMultipleProvider>;
   }
 
-  return <SelectionContext.Provider value={{}}>{props.children}</SelectionContext.Provider>;
+  return <SelectionContext.Provider value={{}}>{children}</SelectionContext.Provider>;
 }
 
 export const useSelectionContext = () => useContext(SelectionContext);
 
-export function extractSelectionProps<T extends SelectionProviderProps>({
-  selection,
-  value,
-  defaultValue,
-  onChange,
-}: T) {
+export function extractSelectionProps<T extends SelectionState>({ selection }: T) {
   return {
-    selection,
-    value,
-    defaultValue,
-    onChange,
+    ...(selection ?? {}),
   } as SelectionProviderProps;
 }

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

@@ -1,6 +1,10 @@
 @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
 
 .listContainer {
+  display: flex;
+  flex-direction: column;
+
+  height: 100%;
   margin: 0;
   padding: 0;
 
@@ -32,6 +36,7 @@
   display: block;
 
   box-sizing: border-box;
+  height: 100%;
   padding: $dimension-025m;
 
   &:has(.listContainer:focus-visible) {

package/src/components/Lists/types.ts

@@ -5,7 +5,13 @@ import { WithSupportProps } from '@snack-uikit/utils';
 
 import { ScrollProps, SearchState } from '../../types';
 import { ItemProps } from '../Items';
-import { ListContextType, SelectionProviderProps } from './contexts';
+import { ListContextType, SelectionState } from './contexts';
+
+type CollapseState = {
+  value?: (string | number)[];
+  onChange?(value: (string | number)[]): void;
+  defaultValue?: (string | number)[];
+};
 
 export type ListProps = WithSupportProps<
   {
@@ -15,12 +21,13 @@ export type ListProps = WithSupportProps<
     pinTop?: ItemProps[];
     /** Элементы списка, закрепленные снизу */
     pinBottom?: ItemProps[];
-    /** Кастомизируемый элемент, помещаемый внизу списка */
+    /**
+     * Кастомизируемый элемент в конце списка
+     * @type ReactElement
+     */
     footer?: ReactNode;
-    /** Список ссылок на костомные элементы, помещенные в специальную секцию внизу списка  */
+    /** Список ссылок на кастомные элементы, помещенные в специальную секцию внизу списка  */
     footerActiveElementsRefs?: RefObject<HTMLElement>[];
-    // TODO: add later
-    // collapse?: 'single' | 'multiple';
     /** Настройки поисковой строки */
     search?: SearchState;
     /** Флаг, отвещающий за состояние загрузки списка */
@@ -29,7 +36,14 @@ export type ListProps = WithSupportProps<
     noData?: string;
     /** Текст для состояния "Отсутсвие результата" при поиске */
     noResults?: string;
-  } & Pick<SelectionProviderProps, 'value' | 'defaultValue' | 'onChange' | 'selection'> &
+    /** Tab Index */
+    tabIndex?: number;
+    /** Настройки раскрытия элементов */
+    collapse?: CollapseState;
+    /** CSS-класс */
+    className?: string;
+    onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
+  } & SelectionState &
     ListContextType &
     ScrollProps
 >;
@@ -40,7 +54,7 @@ export type DroplistProps = {
   /** Триггер для дроплиста */
   children?: ReactNode;
 } & Pick<DropdownProps, 'trigger' | 'placement' | 'widthStrategy' | 'open' | 'onOpenChange'> &
-  ListProps;
+  Omit<ListProps, 'tabIndex' | 'onKeyDown'>;
 
 export type ListPrivateProps = ListProps & {
   nested?: boolean;
@@ -49,6 +63,5 @@ export type ListPrivateProps = ListProps & {
   onFocus?(e: FocusEvent<HTMLElement>): void;
   onBlur?(e: FocusEvent<HTMLElement>): void;
   onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
-  // TODO: remove later
-  collapse?: 'single' | 'multiple';
+  limitedScrollHeight?: boolean;
 };

package/src/helperComponents/HiddenTabButton/HiddenTabButton.tsx

@@ -4,9 +4,10 @@ import styles from './styles.module.scss';
 
 type HiddenTabButtonProps = {
   listRef: RefObject<HTMLElement>;
+  tabIndex?: number;
 };
 
-export const HiddenTabButton = forwardRef<HTMLButtonElement, HiddenTabButtonProps>(({ listRef }, ref) => {
+export const HiddenTabButton = forwardRef<HTMLButtonElement, HiddenTabButtonProps>(({ listRef, tabIndex }, ref) => {
   const handleFocus = useCallback(
     (e: FocusEvent<HTMLButtonElement>) => {
       if (e.relatedTarget !== listRef.current) {
@@ -23,5 +24,14 @@ export const HiddenTabButton = forwardRef<HTMLButtonElement, HiddenTabButtonProp
     e.stopPropagation();
   }, []);
 
-  return <button aria-hidden ref={ref} onKeyDown={handleKeyDown} onFocus={handleFocus} className={styles.hiddenBtn} />;
+  return (
+    <button
+      aria-hidden
+      ref={ref}
+      onKeyDown={handleKeyDown}
+      onFocus={handleFocus}
+      className={styles.hiddenBtn}
+      tabIndex={tabIndex}
+    />
+  );
 });

package/src/utils.ts

@@ -20,7 +20,10 @@ export function withCollapsedItems({ items, openCollapsedItems }: WithCollapsedI
   let expandedIds: Array<string | number> = [];
 
   items.forEach(item => {
-    if ((isBaseItemProps(item) || isNextListItemProps(item) || isAccordionItemProps(item)) && !item.disabled) {
+    if (
+      ((isBaseItemProps(item) && !item.inactive) || isNextListItemProps(item) || isAccordionItemProps(item)) &&
+      !item.disabled
+    ) {
       newItems = newItems.concat([item]);
       ids = ids.concat([item.id ?? '']);
 
@@ -88,7 +91,13 @@ export function extractItemIds(items: ItemProps[]): Array<string | number> {
 
 export function extractChildIds({ items }: { items: ItemProps[] }): Array<string | number> {
   return items
-    .filter(item => isAccordionItemProps(item) || isNextListItemProps(item) || isGroupItemProps(item) || !item.disabled)
+    .filter(
+      item =>
+        isAccordionItemProps(item) ||
+        isNextListItemProps(item) ||
+        isGroupItemProps(item) ||
+        (isBaseItemProps(item) && !item.disabled && !item.inactive),
+    )
     .reduce(
       (prev: Array<string | number>, item: ItemProps) => {
         if (isAccordionItemProps(item) || isNextListItemProps(item)) {