@snack-uikit/list 0.21.5 → 0.21.6

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.21.6 (2024-11-14)
+
+
+### Bug Fixes
+
+* **FF-5827:** scroll to selected item into center, make it work for all cases in list/droplist ([a63d432](https://github.com/cloud-ru-tech/snack-uikit/commit/a63d432b9718f7c99638acb940d06138c03c2421))
+
+
+
+
+
 ## 0.21.5 (2024-11-14)
 
 

package/dist/cjs/components/Items/utils.js

@@ -129,7 +129,7 @@ function kindFlattenItems(_ref) {
       allChildIds: focusChildren,
       disabled: (item.type === 'collapse' || item.type === 'next-list') && item.disabled,
       type: item.type,
-      itemRef: (_b = !isGroupItem(item) ? item.itemRef : undefined) !== null && _b !== void 0 ? _b : (0, react_1.createRef)()
+      itemRef: !isGroupItem(item) ? (_b = item.itemRef) !== null && _b !== void 0 ? _b : (0, react_1.createRef)() : undefined
     };
     return {
       id: itemId,

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

@@ -1,4 +1,3 @@
-import { FlattenBaseItem } from '../../Items';
 export declare const ListPrivate: import("react").ForwardRefExoticComponent<Omit<import("../types").ListProps, "items" | "hasListInFocusChain" | "pinTop" | "pinBottom"> & {
     nested?: boolean;
     active?: boolean;
@@ -7,7 +6,7 @@ export declare const ListPrivate: import("react").ForwardRefExoticComponent<Omit
     onBlur?(e: import("react").FocusEvent<HTMLElement>): void;
     onKeyDown?(e: import("react").KeyboardEvent<HTMLElement>): void;
     limitedScrollHeight?: boolean;
-    searchItem?: FlattenBaseItem;
+    searchItem?: import("../../Items").FlattenBaseItem;
     pinTop?: import("../../Items").ItemId[];
     items: import("../../Items").ItemId[];
     pinBottom?: import("../../Items").ItemId[];

package/dist/cjs/components/Lists/ListPrivate/ListPrivate.js

@@ -55,18 +55,18 @@ exports.ListPrivate = (0, react_1.forwardRef)((_a, ref) => {
       errorDataState,
       dataError,
       dataFiltered,
-      scrollToSelectedItem
+      scrollToSelectedItem = false
     } = _a,
     props = __rest(_a, ["items", "pinTop", "pinBottom", "onKeyDown", "onBlur", "onFocus", "tabIndex", "active", "scroll", "nested", "search", "searchItem", "scrollRef", "scrollContainerRef", "onScroll", "footer", "loading", "limitedScrollHeight", "untouchableScrollbars", "className", "noDataState", "noResultsState", "errorDataState", "dataError", "dataFiltered", "scrollToSelectedItem"]);
   const {
     size = 's',
-    flattenItems
+    flattenItems,
+    focusFlattenItems
   } = (0, contexts_1.useNewListContext)();
   const {
     value,
     isSelectionSingle
   } = (0, contexts_1.useSelectionContext)();
-  const selectedItem = isSelectionSingle && value ? flattenItems[value] : undefined;
   const itemsJSX = (0, Items_1.useRenderItems)(items);
   const itemsPinTopJSX = (0, Items_1.useRenderItems)(pinTop);
   const itemsPinBottomJSX = (0, Items_1.useRenderItems)(pinBottom);
@@ -100,7 +100,17 @@ exports.ListPrivate = (0, react_1.forwardRef)((_a, ref) => {
   const onScrollInitialized = () => {
     var _a, _b;
     if (scrollToSelectedItem) {
-      (_b = (_a = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.itemRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.scrollIntoView();
+      if (!value) {
+        return;
+      }
+      const selectedItem = isSelectionSingle ? flattenItems[value] : flattenItems[value[0]];
+      if (!(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id)) {
+        return;
+      }
+      const itemToScrollTo = Object.values(focusFlattenItems).find(item => item.originalId === selectedItem.id);
+      (_b = (_a = itemToScrollTo === null || itemToScrollTo === void 0 ? void 0 : itemToScrollTo.itemRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.scrollIntoView({
+        block: 'center'
+      });
     }
   };
   const listJSX = (0, jsx_runtime_1.jsxs)("ul", Object.assign({

package/dist/esm/components/Items/utils.js

@@ -60,7 +60,7 @@ export function kindFlattenItems({ items, prefix, parentId }) {
         const closeChildIds = [];
         const autoChildIds = [];
         const { items } = item, rest = __rest(item, ["items"]);
-        const childActiveParent = isGroupItem(item) ? parentId !== null && parentId !== void 0 ? parentId : ITEM_PREFIXES.default : autoId;
+        const childActiveParent = isGroupItem(item) ? (parentId !== null && parentId !== void 0 ? parentId : ITEM_PREFIXES.default) : autoId;
         const filteredItems = items.filter(item => !item.hidden);
         for (let idx = 0; idx < filteredItems.length; idx++) {
             const { id, children, autoId, focusChildren } = flatten({
@@ -86,7 +86,7 @@ export function kindFlattenItems({ items, prefix, parentId }) {
             allChildIds: focusChildren,
             disabled: (item.type === 'collapse' || item.type === 'next-list') && item.disabled,
             type: item.type,
-            itemRef: (_b = (!isGroupItem(item) ? item.itemRef : undefined)) !== null && _b !== void 0 ? _b : createRef(),
+            itemRef: !isGroupItem(item) ? ((_b = item.itemRef) !== null && _b !== void 0 ? _b : createRef()) : undefined,
         };
         return { id: itemId, children, autoId, focusChildren };
     }

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

@@ -1,4 +1,3 @@
-import { FlattenBaseItem } from '../../Items';
 export declare const ListPrivate: import("react").ForwardRefExoticComponent<Omit<import("../types").ListProps, "items" | "hasListInFocusChain" | "pinTop" | "pinBottom"> & {
     nested?: boolean;
     active?: boolean;
@@ -7,7 +6,7 @@ export declare const ListPrivate: import("react").ForwardRefExoticComponent<Omit
     onBlur?(e: import("react").FocusEvent<HTMLElement>): void;
     onKeyDown?(e: import("react").KeyboardEvent<HTMLElement>): void;
     limitedScrollHeight?: boolean;
-    searchItem?: FlattenBaseItem;
+    searchItem?: import("../../Items").FlattenBaseItem;
     pinTop?: import("../../Items").ItemId[];
     items: import("../../Items").ItemId[];
     pinBottom?: import("../../Items").ItemId[];

package/dist/esm/components/Lists/ListPrivate/ListPrivate.js

@@ -21,10 +21,9 @@ import { useNewListContext, useSelectionContext } from '../contexts';
 import commonStyles from '../styles.module.css';
 import styles from './styles.module.css';
 export const ListPrivate = forwardRef((_a, ref) => {
-    var { items, pinTop, pinBottom, onKeyDown, onBlur, onFocus, tabIndex, active, scroll, nested, search, searchItem, scrollRef, scrollContainerRef, onScroll, footer, loading, limitedScrollHeight, untouchableScrollbars, className, noDataState, noResultsState, errorDataState, dataError, dataFiltered, scrollToSelectedItem } = _a, props = __rest(_a, ["items", "pinTop", "pinBottom", "onKeyDown", "onBlur", "onFocus", "tabIndex", "active", "scroll", "nested", "search", "searchItem", "scrollRef", "scrollContainerRef", "onScroll", "footer", "loading", "limitedScrollHeight", "untouchableScrollbars", "className", "noDataState", "noResultsState", "errorDataState", "dataError", "dataFiltered", "scrollToSelectedItem"]);
-    const { size = 's', flattenItems } = useNewListContext();
+    var { items, pinTop, pinBottom, onKeyDown, onBlur, onFocus, tabIndex, active, scroll, nested, search, searchItem, scrollRef, scrollContainerRef, onScroll, footer, loading, limitedScrollHeight, untouchableScrollbars, className, noDataState, noResultsState, errorDataState, dataError, dataFiltered, scrollToSelectedItem = false } = _a, props = __rest(_a, ["items", "pinTop", "pinBottom", "onKeyDown", "onBlur", "onFocus", "tabIndex", "active", "scroll", "nested", "search", "searchItem", "scrollRef", "scrollContainerRef", "onScroll", "footer", "loading", "limitedScrollHeight", "untouchableScrollbars", "className", "noDataState", "noResultsState", "errorDataState", "dataError", "dataFiltered", "scrollToSelectedItem"]);
+    const { size = 's', flattenItems, focusFlattenItems } = useNewListContext();
     const { value, isSelectionSingle } = useSelectionContext();
-    const selectedItem = isSelectionSingle && value ? flattenItems[value] : undefined;
     const itemsJSX = useRenderItems(items);
     const itemsPinTopJSX = useRenderItems(pinTop);
     const itemsPinBottomJSX = useRenderItems(pinBottom);
@@ -35,7 +34,15 @@ export const ListPrivate = forwardRef((_a, ref) => {
     const onScrollInitialized = () => {
         var _a, _b;
         if (scrollToSelectedItem) {
-            (_b = (_a = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.itemRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.scrollIntoView();
+            if (!value) {
+                return;
+            }
+            const selectedItem = isSelectionSingle ? flattenItems[value] : flattenItems[value[0]];
+            if (!(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id)) {
+                return;
+            }
+            const itemToScrollTo = Object.values(focusFlattenItems).find(item => item.originalId === selectedItem.id);
+            (_b = (_a = itemToScrollTo === null || itemToScrollTo === void 0 ? void 0 : itemToScrollTo.itemRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.scrollIntoView({ block: 'center' });
         }
     };
     const listJSX = (_jsxs("ul", Object.assign({ className: cn(commonStyles.listContainer, className), ref: ref, onKeyDown: onKeyDown, tabIndex: tabIndex, onFocus: onFocus, onBlur: onBlur, "data-active": active || undefined, role: 'menu' }, extractSupportProps(props), { children: [(Number(pinTop === null || pinTop === void 0 ? void 0 : pinTop.length) > 0 || search) && (_jsxs(PinTopGroupItem, { children: [search && _jsx(SearchItem, Object.assign({ search: search }, searchItem)), Number(pinTop === null || pinTop === void 0 ? void 0 : pinTop.length) > 0 && itemsPinTopJSX] })), scroll ? (_jsxs(Scroll, { className: cn({

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "List",
-  "version": "0.21.5",
+  "version": "0.21.6",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -53,5 +53,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "b9670e68c6af5fdd5dfceeae29ef3af8c89e5e6b"
+  "gitHead": "b126dc1e89fc5fc99b0e1c5f16d8dbefc370161c"
 }

package/src/components/Items/utils.ts

@@ -94,7 +94,7 @@ export function kindFlattenItems({ items, prefix, parentId }: KindFlattenItemsPr
     const autoChildIds: ItemId[] = [];
 
     const { items, ...rest } = item;
-    const childActiveParent = isGroupItem(item) ? parentId ?? ITEM_PREFIXES.default : autoId;
+    const childActiveParent = isGroupItem(item) ? (parentId ?? ITEM_PREFIXES.default) : autoId;
 
     const filteredItems = items.filter(item => !item.hidden);
 
@@ -131,7 +131,7 @@ export function kindFlattenItems({ items, prefix, parentId }: KindFlattenItemsPr
       allChildIds: focusChildren,
       disabled: (item.type === 'collapse' || item.type === 'next-list') && item.disabled,
       type: item.type,
-      itemRef: (!isGroupItem(item) ? item.itemRef : undefined) ?? createRef<HTMLElement>(),
+      itemRef: !isGroupItem(item) ? (item.itemRef ?? createRef<HTMLElement>()) : undefined,
     };
 
     return { id: itemId, children, autoId, focusChildren };

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

@@ -6,7 +6,7 @@ import { Scroll } from '@snack-uikit/scroll';
 import { extractSupportProps } from '@snack-uikit/utils';
 
 import { ListEmptyState, useEmptyState } from '../../../helperComponents';
-import { FlattenBaseItem, PinBottomGroupItem, PinTopGroupItem, SearchItem, useRenderItems } from '../../Items';
+import { PinBottomGroupItem, PinTopGroupItem, SearchItem, useRenderItems } from '../../Items';
 import { useNewListContext, useSelectionContext } from '../contexts';
 import commonStyles from '../styles.module.scss';
 import { ListPrivateProps } from '../types';
@@ -40,14 +40,13 @@ export const ListPrivate = forwardRef(
       errorDataState,
       dataError,
       dataFiltered,
-      scrollToSelectedItem,
+      scrollToSelectedItem = false,
       ...props
     }: ListPrivateProps,
     ref: ForwardedRef<HTMLElement>,
   ) => {
-    const { size = 's', flattenItems } = useNewListContext();
+    const { size = 's', flattenItems, focusFlattenItems } = useNewListContext();
     const { value, isSelectionSingle } = useSelectionContext();
-    const selectedItem = isSelectionSingle && value ? flattenItems[value] : undefined;
 
     const itemsJSX = useRenderItems(items);
     const itemsPinTopJSX = useRenderItems(pinTop);
@@ -93,7 +92,18 @@ export const ListPrivate = forwardRef(
 
     const onScrollInitialized = () => {
       if (scrollToSelectedItem) {
-        (selectedItem as FlattenBaseItem)?.itemRef?.current?.scrollIntoView();
+        if (!value) {
+          return;
+        }
+
+        const selectedItem = isSelectionSingle ? flattenItems[value] : flattenItems[value[0]];
+
+        if (!selectedItem?.id) {
+          return;
+        }
+
+        const itemToScrollTo = Object.values(focusFlattenItems).find(item => item.originalId === selectedItem.id);
+        itemToScrollTo?.itemRef?.current?.scrollIntoView({ block: 'center' });
       }
     };