@snack-uikit/list 0.11.1 → 0.11.2

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.11.2 (2024-04-25)
+
+
+### Bug Fixes
+
+* **PDS-0000:** fix arrowRight key event handle ([50b911f](https://github.com/cloud-ru-tech/snack-uikit/commit/50b911fde10d9f7eff1a46728329f47070645b8f))
+* **PDS-0000:** set default button type as button ([4ec64de](https://github.com/cloud-ru-tech/snack-uikit/commit/4ec64de508826df4a1e82fd8c75448d9919e563f))
+
+
+
+
+
 ## 0.11.1 (2024-04-23)
 
 

package/README.md

@@ -12,7 +12,7 @@
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| items* | `any[]` | - |  |
+| items* | `Item[]` | - |  |
 | prefix | `ItemId` | - |  |
 | parentId | `ItemId` | - |  |
 ## isAccordionItem
@@ -55,24 +55,74 @@
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| triggerClassName* | `DropdownProps` | - |  |
-| onOpenChange* | `DropdownProps` | - |  |
-| open* | `DropdownProps` | - |  |
-| widthStrategy* | `DropdownProps` | - |  |
-| placement* | `DropdownProps` | - |  |
-| trigger* | `DropdownProps` | - |  |
+| items* | `Item[]` | - | Основные элементы списка |
 | children* | `ReactNode \| ({onKeyDown}) => ReactNode * Рендер функция принимает аргументы `onKeyDown` - хендлер ввода, для поддержки управления с клавиатуры` | - | Триггер для дроплиста |
 | triggerElemRef | `RefObject<HTMLElement>` | - | Ссылка на элемент-триггер для дроплиста |
+| triggerClassName | `string` | - | CSS-класс триггера |
+| 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). |
+| className | `string` | - | CSS-класс |
+| pinTop | `Item[]` | - | Элементы списка, закрепленные сверху |
+| pinBottom | `Item[]` | - | Элементы списка, закрепленные снизу |
+| footer | `ReactNode ;` | - | Кастомизируемый элемент в конце списка |
+| footerActiveElementsRefs | `RefObject<HTMLElement>[]` | - | Список ссылок на кастомные элементы, помещенные в специальную секцию внизу списка |
+| search | `SearchState` | - | Настройки поисковой строки |
+| collapse | `CollapseState` | {} | Настройки раскрытия элементов |
+| loading | `boolean` | - | Флаг, отвещающий за состояние загрузки списка |
+| selection | `SelectionSingleState \| SelectionMultipleState` | - |  |
+| size | "s" \| "m" \| "l" | s | Размер списка |
+| marker | `boolean` | true | Отображать ли маркер у выбранного жлемента списка |
+| contentRender | `(props: ContentRenderProps) => ReactNode` | - | Рендер функция основного контента айтема |
+| scroll | `boolean` | - | Включить ли скролл для основной части списка |
+| scrollRef | `RefObject<HTMLElement>` | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
+| scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
+| dataFiltered | `boolean` | - |  |
+| dataError | `boolean` | - |  |
+| noDataState | `EmptyStateProps` | - | Экран при отстутствии данных |
+| noResultsState | `EmptyStateProps` | - | Экран при отстутствии результатов поиска или фильтров |
+| errorDataState | `EmptyStateProps` | - | Экран при ошибке запроса |
 ## List
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
+| items* | `Item[]` | - | Основные элементы списка |
+| pinTop | `Item[]` | - | Элементы списка, закрепленные сверху |
+| pinBottom | `Item[]` | - | Элементы списка, закрепленные снизу |
+| footer | `ReactNode ;` | - | Кастомизируемый элемент в конце списка |
+| footerActiveElementsRefs | `RefObject<HTMLElement>[]` | - | Список ссылок на кастомные элементы, помещенные в специальную секцию внизу списка |
+| search | `SearchState` | - | Настройки поисковой строки |
+| tabIndex | `number` | - | Tab Index |
+| collapse | `CollapseState` | {} | Настройки раскрытия элементов |
+| className | `string` | - | CSS-класс |
+| onKeyDown | `(e: KeyboardEvent<HTMLElement>) => void` | - |  |
+| loading | `boolean` | - | Флаг, отвещающий за состояние загрузки списка |
+| selection | `SelectionSingleState \| SelectionMultipleState` | - |  |
+| size | "s" \| "m" \| "l" | s | Размер списка |
+| marker | `boolean` | true | Отображать ли маркер у выбранного жлемента списка |
+| contentRender | `(props: ContentRenderProps) => ReactNode` | - | Рендер функция основного контента айтема |
+| scroll | `boolean` | - | Включить ли скролл для основной части списка |
+| scrollRef | `RefObject<HTMLElement>` | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
+| scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
+| dataFiltered | `boolean` | - |  |
+| dataError | `boolean` | - |  |
+| noDataState | `EmptyStateProps` | - | Экран при отстутствии данных |
+| noResultsState | `EmptyStateProps` | - | Экран при отстутствии результатов поиска или фильтров |
+| errorDataState | `EmptyStateProps` | - | Экран при ошибке запроса |
 | 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 |
 | key | `Key` | - |  |
 ## ItemContent
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
+| option* | `string \| number` | - |  |
+| caption | `string` | - |  |
+| description | `string` | - |  |
+| truncate | `{ option?: number; description?: number; variant?: "end" \| "middle"; }` | - |  |
+| disabled | `boolean` | - |  |
+| className | `string` | - | CSS-класс |
 
 
 [//]: DOCUMENTATION_SECTION_END

package/dist/components/Items/BaseItem/BaseItem.js

@@ -44,8 +44,8 @@ export function BaseItem(_a) {
     };
     const handleItemKeyDown = (e) => {
         onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
-        if (e.key === 'ArrowRight') {
-            onOpenNestedList === null || onOpenNestedList === void 0 ? void 0 : onOpenNestedList(e);
+        if (e.key === 'ArrowRight' && onOpenNestedList) {
+            onOpenNestedList(e);
             e.preventDefault();
             e.stopPropagation();
             return;

package/dist/components/Items/SearchItem/SearchItem.js

@@ -10,10 +10,6 @@ export function SearchItem({ search, itemRef }) {
         if (['ArrowDown', 'ArrowUp'].includes(e.key)) {
             e.preventDefault();
         }
-        if (['ArrowRight'].includes(e.key)) {
-            e.stopPropagation();
-            e.preventDefault();
-        }
     };
     const handleFocus = (e) => {
         e.stopPropagation();

package/dist/components/Lists/hooks.js

@@ -63,9 +63,9 @@ export function useNewKeyboardNavigation({ mainRef, btnRef, focusFlattenItems, }
                     activeItemIdRef.current = newItemId;
                     setActiveItemId(newItemId);
                     setTimeout(() => { var _a, _b; return (_b = (_a = newItem.itemRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.focus(); }, 0);
+                    e.stopPropagation();
+                    e.preventDefault();
                 }
-                e.stopPropagation();
-                e.preventDefault();
                 return;
             }
             case 'Tab': {

package/dist/helperComponents/HiddenTabButton/HiddenTabButton.js

@@ -13,5 +13,5 @@ export const HiddenTabButton = forwardRef(({ listRef, tabIndex }, ref) => {
     const handleKeyDown = useCallback((e) => {
         e.stopPropagation();
     }, []);
-    return (_jsx("button", { "aria-hidden": true, ref: ref, onKeyDown: handleKeyDown, onFocus: handleFocus, className: styles.hiddenBtn, tabIndex: tabIndex }));
+    return (_jsx("button", { type: 'button', "aria-hidden": true, ref: ref, onKeyDown: handleKeyDown, onFocus: handleFocus, className: styles.hiddenBtn, tabIndex: tabIndex }));
 });

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "List",
-  "version": "0.11.1",
+  "version": "0.11.2",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -49,5 +49,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "bf1e1f3cfabccc1ee288c18722e33009bd001798"
+  "gitHead": "17bfcf1150776cd35c77d9cca8f45dde97472bf1"
 }

package/src/components/Items/BaseItem/BaseItem.tsx

@@ -81,8 +81,8 @@ export function BaseItem({
   const handleItemKeyDown = (e: KeyboardEvent<HTMLElement>) => {
     onKeyDown?.(e);
 
-    if (e.key === 'ArrowRight') {
-      onOpenNestedList?.(e);
+    if (e.key === 'ArrowRight' && onOpenNestedList) {
+      onOpenNestedList(e);
 
       e.preventDefault();
       e.stopPropagation();

package/src/components/Items/SearchItem/SearchItem.tsx

@@ -20,11 +20,6 @@ export function SearchItem({ search, itemRef }: SearchItemProps) {
     if (['ArrowDown', 'ArrowUp'].includes(e.key)) {
       e.preventDefault();
     }
-
-    if (['ArrowRight'].includes(e.key)) {
-      e.stopPropagation();
-      e.preventDefault();
-    }
   };
 
   const handleFocus = (e: FocusEvent<HTMLInputElement>) => {

package/src/components/Lists/hooks.ts

@@ -92,10 +92,10 @@ export function useNewKeyboardNavigation<T extends HTMLElement>({
             setActiveItemId(newItemId);
 
             setTimeout(() => newItem.itemRef?.current?.focus(), 0);
-          }
 
-          e.stopPropagation();
-          e.preventDefault();
+            e.stopPropagation();
+            e.preventDefault();
+          }
 
           return;
         }

package/src/helperComponents/HiddenTabButton/HiddenTabButton.tsx

@@ -26,6 +26,7 @@ export const HiddenTabButton = forwardRef<HTMLButtonElement, HiddenTabButtonProp
 
   return (
     <button
+      type='button'
       aria-hidden
       ref={ref}
       onKeyDown={handleKeyDown}