@snack-uikit/list - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+## 0.1.2 (2024-01-31)
+
+
+### Bug Fixes
+
+* **FF-4198:** reset active focus index when clicking the item with mouse ([638e6f0](https://github.com/cloud-ru-tech/snack-uikit/commit/638e6f0069ec7f444b39d62d91d6e845e13aee9f))
+
+
+
+
+
 ## 0.1.1 (2024-01-30)
@@ -8,0 +19,0 @@

dist/components/Items/BaseItem/BaseItem.js

@@ -17,3 +17,3 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { extractSupportProps } from '@snack-uikit/utils';
-import { useCollapseContext, useListContext, useSelectionContext } from '../../Lists/contexts';
+import { useCollapseContext, useListContext, useParentListContext, useSelectionContext } from '../../Lists/contexts';
 import commonStyles from '../styles.module.css';
@@ -25,2 +25,3 @@ import { CHECKBOX_SIZE_MAP } from './constants';
     const { option, caption, description } = content || {};
+    const { parentResetActiveFocusIndex } = useParentListContext();
     const { size, marker } = useListContext();
@@ -34,2 +35,3 @@ const { level = 0 } = useCollapseContext();
     const handleItemClick = (e) => {
+        parentResetActiveFocusIndex === null || parentResetActiveFocusIndex === void 0 ? void 0 : parentResetActiveFocusIndex();
         if (!isParentNode) {
@@ -36,0 +38,0 @@ handleChange();

dist/components/Lists/contexts/ListProvider.d.ts

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

dist/components/Lists/List/List.d.ts

@@ -9,2 +9,3 @@ /// <reference types="react" />
     footer?: import("react").ReactNode;
+    footerActiveElementsRefs?: import("react").RefObject<HTMLElement>[] | undefined;
     search?: import("../../../types").SearchState | undefined;
@@ -14,3 +15,2 @@ loading?: boolean | undefined;
     noResults?: string | undefined;
-    footerActiveElementsRefs?: import("react").RefObject<HTMLElement>[] | undefined;
 } & Pick<import("../contexts").SelectionProviderProps, "value" | "defaultValue" | "selection" | "onChange"> & import("../contexts").ListContextType & import("../../../types").ScrollProps & import("react").RefAttributes<HTMLElement>>;

dist/components/Lists/ListPrivate/ListPrivate.d.ts

@@ -9,2 +9,3 @@ import { RefObject } from 'react';
     footer?: import("react").ReactNode;
+    footerActiveElementsRefs?: RefObject<HTMLElement>[] | undefined;
     search?: import("../../../types").SearchState | undefined;
@@ -14,3 +15,2 @@ loading?: boolean | undefined;
     noResults?: string | undefined;
-    footerActiveElementsRefs?: RefObject<HTMLElement>[] | undefined;
 } & Pick<import("../contexts").SelectionProviderProps, "value" | "defaultValue" | "selection" | "onChange"> & import("../contexts").ListContextType & import("../../../types").ScrollProps & {
@@ -17,0 +17,0 @@ nested?: boolean | undefined;

dist/components/Lists/types.d.ts

@@ -8,21 +8,27 @@ import { FocusEvent, KeyboardEvent, ReactNode, RefObject } from 'react';
 export type ListProps = WithSupportProps<{
+    /** Основные элементы списка */
     items: ItemProps[];
+    /** Элементы списка, закрепленные сверху */
     pinTop?: ItemProps[];
+    /** Элементы списка, закрепленные снизу */
     pinBottom?: ItemProps[];
+    /** Кастомизируемый элемент, помещаемый внизу списка */
     footer?: ReactNode;
+    /** Список ссылок на костомные элементы, помещенные в специальную секцию внизу списка  */
+    footerActiveElementsRefs?: RefObject<HTMLElement>[];
+    /** Настройки поисковой строки */
     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;
+} & Pick<DropdownProps, 'trigger' | 'placement' | 'widthStrategy' | 'open' | 'onOpenChange'> & ListProps;
 export type ListPrivateProps = ListProps & {
@@ -29,0 +35,0 @@ nested?: boolean;

dist/types.d.ts

@@ -9,5 +9,8 @@ import { RefObject } from 'react';
 export type ScrollProps = {
+    /** Включить ли скролл для основной части списка */
     scroll?: boolean;
+    /** Ссылка на элемент, обозначающий самый конец прокручиваемого списка */
     scrollRef?: RefObject<HTMLElement>;
+    /** Ссылка на контейнер, который скроллится */
     scrollContainerRef?: RefObject<HTMLElement>;
 };

package.json

@@ -7,3 +7,3 @@ {
   "title": "List",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "sideEffects": [
@@ -48,3 +48,3 @@ "*.css",
   },
-  "gitHead": "54873fdb2f34f26a771f62568d3d6fcd62ea1694"
+  "gitHead": "029bc819dd13f9006b9ad584fb56454517a2077d"
 }

README.md

@@ -23,17 +23,18 @@ # List
 |------|------|---------------|-------------|
-| items* | `ItemProps[]` | - |  |
-| triggerElemRef | `RefObject<HTMLElement>` | - |  |
-| open | `boolean` | - |  |
-| onOpenChange | `(open: boolean) => void` | - |  |
-| trigger | enum Trigger: `"click"`, `"hover"`, `"focusVisible"`, `"focus"`, `"hoverAndFocusVisible"`, `"hoverAndFocus"`, `"clickAndFocusVisible"` | - |  |
-| placement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | - |  |
-| widthStrategy | enum PopoverWidthStrategy: `"auto"`, `"gte"`, `"eq"` | - |  |
-| pinTop | `ItemProps[]` | - |  |
-| pinBottom | `ItemProps[]` | - |  |
-| footer | `ReactNode` | - |  |
-| search | `SearchState` | - |  |
-| loading | `boolean` | - |  |
-| noData | `string` | - |  |
-| noResults | `string` | - |  |
-| footerActiveElementsRefs | `RefObject<HTMLElement>[]` | - |  |
+| items* | `ItemProps[]` | - | Основные элементы списка |
+| triggerElemRef | `RefObject<HTMLElement>` | - | Ссылка на элемент-триггер для дроплиста |
+| children | `ReactNode` | - | Триггер для дроплиста |
+| open | `boolean` | - | Управляет состоянием показан/не показан. |
+| onOpenChange | `(isOpen: boolean) => void` | - | Колбек отображения компонента. Срабатывает при изменении состояния open. |
+| widthStrategy | enum PopoverWidthStrategy: `"auto"`, `"gte"`, `"eq"` | auto | Стратегия управления шириной контейнера поповера <br> - `auto` - соответствует ширине контента, <br> - `gte` - Great Than or Equal, равен ширине таргета или больше ее, если контент в поповере шире, <br> - `eq` - Equal, строго равен ширине таргета. |
+| trigger | enum Trigger: `"click"`, `"hover"`, `"focusVisible"`, `"focus"`, `"hoverAndFocusVisible"`, `"hoverAndFocus"`, `"clickAndFocusVisible"` | - | Условие отображения поповера: <br> - `click` - открывать по клику <br> - `hover` - открывать по ховеру <br> - `focusVisible` - открывать по focus-visible <br> - `focus` - открывать по фокусу <br> - `hoverAndFocusVisible` - открывать по ховеру и focus-visible <br> - `hoverAndFocus` - открывать по ховеру и фокусу <br> - `clickAndFocusVisible` - открывать по клику и focus-visible |
+| placement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | top | Положение поповера относительно своего триггера (children). |
+| pinTop | `ItemProps[]` | - | Элементы списка, закрепленные сверху |
+| pinBottom | `ItemProps[]` | - | Элементы списка, закрепленные снизу |
+| footer | `ReactNode` | - | Кастомизируемый элемент, помещаемый внизу списка |
+| footerActiveElementsRefs | `RefObject<HTMLElement>[]` | - | Список ссылок на костомные элементы, помещенные в специальную секцию внизу списка |
+| search | `SearchState` | - | Настройки поисковой строки |
+| loading | `boolean` | - | Флаг, отвещающий за состояние загрузки списка |
+| noData | `string` | - | Текст для состояния "Отсутсвие данных" |
+| noResults | `string` | - | Текст для состояния "Отсутсвие результата" при поиске |
 | value | `SelectionSingleValueType \| SelectionSingleValueType[]` | - | Controlled состояние |
@@ -43,7 +44,7 @@ | defaultValue | `SelectionSingleValueType \| SelectionSingleValueType[]` | - | Начальное состояние |
 | selection | "single" \| "multiple" | - | Режим выбора |
-| size | "s" \| "m" \| "l" | - |  |
-| marker | `boolean` | - |  |
-| scroll | `boolean` | - |  |
-| scrollRef | `RefObject<HTMLElement>` | - |  |
-| scrollContainerRef | `RefObject<HTMLElement>` | - |  |
+| size | "s" \| "m" \| "l" | - | Размер списка |
+| marker | `boolean` | - | Отображать ли маркер у выбранного жлемента списка |
+| scroll | `boolean` | - | Включить ли скролл для основной части списка |
+| scrollRef | `RefObject<HTMLElement>` | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
+| scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
 ## List
@@ -53,11 +54,11 @@ ### Props
 |------|------|---------------|-------------|
-| items* | `ItemProps[]` | - |  |
-| pinTop | `ItemProps[]` | - |  |
-| pinBottom | `ItemProps[]` | - |  |
-| footer | `ReactNode` | - |  |
-| search | `SearchState` | - |  |
-| loading | `boolean` | - |  |
-| noData | `string` | - |  |
-| noResults | `string` | - |  |
-| footerActiveElementsRefs | `RefObject<HTMLElement>[]` | - |  |
+| items* | `ItemProps[]` | - | Основные элементы списка |
+| pinTop | `ItemProps[]` | - | Элементы списка, закрепленные сверху |
+| pinBottom | `ItemProps[]` | - | Элементы списка, закрепленные снизу |
+| footer | `ReactNode` | - | Кастомизируемый элемент, помещаемый внизу списка |
+| footerActiveElementsRefs | `RefObject<HTMLElement>[]` | - | Список ссылок на костомные элементы, помещенные в специальную секцию внизу списка |
+| search | `SearchState` | - | Настройки поисковой строки |
+| loading | `boolean` | - | Флаг, отвещающий за состояние загрузки списка |
+| noData | `string` | - | Текст для состояния "Отсутсвие данных" |
+| noResults | `string` | - | Текст для состояния "Отсутсвие результата" при поиске |
 | value | `SelectionSingleValueType \| SelectionSingleValueType[]` | - | Controlled состояние |
@@ -67,7 +68,7 @@ | defaultValue | `SelectionSingleValueType \| SelectionSingleValueType[]` | - | Начальное состояние |
 | selection | "single" \| "multiple" | - | Режим выбора |
-| size | "s" \| "m" \| "l" | - |  |
-| marker | `boolean` | - |  |
-| scroll | `boolean` | - |  |
-| scrollRef | `RefObject<HTMLElement>` | - |  |
-| scrollContainerRef | `RefObject<HTMLElement>` | - |  |
+| size | "s" \| "m" \| "l" | - | Размер списка |
+| marker | `boolean` | - | Отображать ли маркер у выбранного жлемента списка |
+| scroll | `boolean` | - | Включить ли скролл для основной части списка |
+| scrollRef | `RefObject<HTMLElement>` | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
+| scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
 | ref | `Ref<HTMLElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom |
@@ -74,0 +75,0 @@ | key | `Key` | - |  |

src/components/Lists/types.ts

@@ -12,13 +12,22 @@ import { FocusEvent, KeyboardEvent, ReactNode, RefObject } from 'react';
   {
+    /** Основные элементы списка */
     items: ItemProps[];
+    /** Элементы списка, закрепленные сверху */
     pinTop?: ItemProps[];
+    /** Элементы списка, закрепленные снизу */
     pinBottom?: ItemProps[];
+    /** Кастомизируемый элемент, помещаемый внизу списка */
     footer?: ReactNode;
+    /** Список ссылок на костомные элементы, помещенные в специальную секцию внизу списка  */
+    footerActiveElementsRefs?: RefObject<HTMLElement>[];
     // TODO: add later
     // collapse?: 'single' | 'multiple';
+    /** Настройки поисковой строки */
     search?: SearchState;
+    /** Флаг, отвещающий за состояние загрузки списка */
     loading?: boolean;
+    /** Текст для состояния "Отсутсвие данных" */
     noData?: string;
+    /** Текст для состояния "Отсутсвие результата" при поиске */
     noResults?: string;
-    footerActiveElementsRefs?: RefObject<HTMLElement>[];
   } & Pick<SelectionProviderProps, 'value' | 'defaultValue' | 'onChange' | 'selection'> &
@@ -30,10 +39,8 @@ ListContextType &
 export type DroplistProps = {
+  /** Ссылка на элемент-триггер для дроплиста */
   triggerElemRef?: RefObject<HTMLElement>;
+  /** Триггер для дроплиста */
   children?: ReactNode;
-  open?: boolean;
-  onOpenChange?(open: boolean): void;
-  trigger?: DropdownProps['trigger'];
-  placement?: DropdownProps['placement'];
-  widthStrategy?: DropdownProps['widthStrategy'];
-} & ListProps;
+} & Pick<DropdownProps, 'trigger' | 'placement' | 'widthStrategy' | 'open' | 'onOpenChange'> &
+  ListProps;
 
@@ -40,0 +47,0 @@ export type ListPrivateProps = ListProps & {

src/types.ts

@@ -11,5 +11,8 @@ import { RefObject } from 'react';
 export type ScrollProps = {
+  /** Включить ли скролл для основной части списка */
   scroll?: boolean;
+  /** Ссылка на элемент, обозначающий самый конец прокручиваемого списка */
   scrollRef?: RefObject<HTMLElement>;
+  /** Ссылка на контейнер, который скроллится */
   scrollContainerRef?: RefObject<HTMLElement>;
 };

No alert changes

Improved metrics

Total package byte prevSize

180345

increased by3.94%

Lines of code

3545

increased by0.77%

Number of lines in readme file

75

increased by1.35%

No dependency changes