From a6fac442b82ac585397d0b5cf5f59ec5df625deb Mon Sep 17 00:00:00 2001
From: Kirill Kharitonov <skuf962@yandex.ru>
Date: Mon, 29 Jan 2024 06:43:25 -0500
Subject: [PATCH 1/3] fix(Pagination): stories controls (#1281)

---
 .../Pagination/__stories__/Pagination.stories.tsx           | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/Pagination/__stories__/Pagination.stories.tsx b/src/components/Pagination/__stories__/Pagination.stories.tsx
index 113167dc8f..b891e9826e 100644
--- a/src/components/Pagination/__stories__/Pagination.stories.tsx
+++ b/src/components/Pagination/__stories__/Pagination.stories.tsx
@@ -6,8 +6,14 @@ import {Pagination, PaginationProps} from '../../Pagination';
 
 const useState = (args: PaginationProps) => {
     const [state, setState] = React.useState({...args});
+
     const onUpdate: PaginationProps['onUpdate'] = (page, pageSize) =>
         setState((prevState) => ({...prevState, page, pageSize}));
+
+    React.useEffect(() => {
+        setState({...args});
+    }, [args]);
+
     return {...state, onUpdate};
 };
 

From 7366c9bdf7fd3e7f526c8a3d60e49191f7385539 Mon Sep 17 00:00:00 2001
From: Kirill Kharitonov <skuf962@yandex.ru>
Date: Mon, 29 Jan 2024 10:07:20 -0500
Subject: [PATCH 2/3] fix(Table): sticky column (#1283)

---
 src/components/Table/Table.scss | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/components/Table/Table.scss b/src/components/Table/Table.scss
index d80ea9c74a..d1211e7de4 100644
--- a/src/components/Table/Table.scss
+++ b/src/components/Table/Table.scss
@@ -78,14 +78,11 @@
             text-align: right;
         }
 
-        &_sticky_left,
-        &_sticky_right {
+        #{variables.$block} &_sticky_left,
+        #{variables.$block} &_sticky_right {
             position: sticky;
             z-index: 2;
-        }
 
-        &_sticky_left,
-        &_sticky_right {
             background: var(--g-color-base-background);
         }
 

From 176016620612b3c6a120a0dea770b5fc5927c964 Mon Sep 17 00:00:00 2001
From: Kirill Kharitonov <skuf962@yandex.ru>
Date: Tue, 30 Jan 2024 08:26:20 -0500
Subject: [PATCH 3/3] fix(List): calling onLoadMore function while using
 keyboard (#1284)

---
 src/components/List/List.tsx                  | 12 +++++----
 .../List/__stories__/List.stories.tsx         | 11 ++++++++
 .../List/__stories__/ListWithLoader.scss      |  6 +++++
 .../List/__stories__/ListWithLoader.tsx       | 26 +++++++++++++++++++
 4 files changed, 50 insertions(+), 5 deletions(-)
 create mode 100644 src/components/List/__stories__/ListWithLoader.scss
 create mode 100644 src/components/List/__stories__/ListWithLoader.tsx

diff --git a/src/components/List/List.tsx b/src/components/List/List.tsx
index 3e8c3bee10..4fb2d291db 100644
--- a/src/components/List/List.tsx
+++ b/src/components/List/List.tsx
@@ -93,7 +93,7 @@ export class List<T = unknown> extends React.Component<ListProps<T>, ListState<T
     refFilter = React.createRef<HTMLInputElement>();
     refContainer = React.createRef<any>();
     blurTimer: ReturnType<typeof setTimeout> | null = null;
-    loadingItem = {value: '__LIST_ITEM_LOADING__', disabled: true} as unknown as ListItemData<
+    loadingItem = {value: '__LIST_ITEM_LOADING__', disabled: false} as unknown as ListItemData<
         T & {value: string}
     >;
     uniqId = getUniqId();
@@ -518,11 +518,13 @@ export class List<T = unknown> extends React.Component<ListProps<T>, ListState<T
     };
 
     private handleKeyMove(event: React.KeyboardEvent, step: number, defaultItemIndex = 0) {
-        event.preventDefault();
         const {activeItem = defaultItemIndex} = this.state;
-        this.activateItem(
-            List.findNextIndex<T>(this.state.items, activeItem + step, Math.sign(step)),
-        );
+
+        event.preventDefault();
+
+        const items = this.getItemsWithLoading();
+
+        this.activateItem(List.findNextIndex<T>(items, activeItem + step, Math.sign(step)));
     }
 
     private handleFocus = () => {
diff --git a/src/components/List/__stories__/List.stories.tsx b/src/components/List/__stories__/List.stories.tsx
index c103bbbd9d..7bb1c5562c 100644
--- a/src/components/List/__stories__/List.stories.tsx
+++ b/src/components/List/__stories__/List.stories.tsx
@@ -6,6 +6,7 @@ import {List, listDefaultProps} from '..';
 import type {ListProps} from '..';
 
 import {ListShowcase} from './ListShowcase';
+import {ListWithLoader} from './ListWithLoader';
 
 type ComponentType = React.JSXElementConstructor<ListProps<string>>;
 
@@ -44,7 +45,17 @@ export const RenderItem = RenderItemTemplate.bind({});
 RenderItem.args = {
     items,
     renderItem: (item) => `🔥🔥🔥 ${item} 🔥🔥🔥`,
+};
+
+const TemplateWithState: ComponentStory<ComponentType> = (args) => <ListWithLoader {...args} />;
+
+export const WithLoadingMoreItems = TemplateWithState.bind({});
+WithLoadingMoreItems.args = {
+    items: ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight'],
     itemsHeight: 150,
+    itemHeight: 28,
+    loading: true,
+    virtualized: false,
 };
 
 const ShowcaseTemplate: ComponentStory<ComponentType> = () => <ListShowcase />;
diff --git a/src/components/List/__stories__/ListWithLoader.scss b/src/components/List/__stories__/ListWithLoader.scss
new file mode 100644
index 0000000000..4fe39f4e6d
--- /dev/null
+++ b/src/components/List/__stories__/ListWithLoader.scss
@@ -0,0 +1,6 @@
+@use '../../variables';
+@use '../../../../styles/mixins';
+
+.list-with-loader {
+    overflow: auto;
+}
diff --git a/src/components/List/__stories__/ListWithLoader.tsx b/src/components/List/__stories__/ListWithLoader.tsx
new file mode 100644
index 0000000000..eb3f7c8b0d
--- /dev/null
+++ b/src/components/List/__stories__/ListWithLoader.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+import {cn} from '../../utils/cn';
+import {List} from '../List';
+import type {ListProps} from '../types';
+
+import './ListWithLoader.scss';
+
+const b = cn('list-with-loader');
+
+export const ListWithLoader = (args: ListProps<string>) => {
+    const [items, setItems] = React.useState(args.items);
+
+    const onLoadMore = () => {
+        // delay for fetching new real items
+        setTimeout(() => {
+            setItems([...items, ...args.items]);
+        }, 300);
+    };
+
+    return (
+        <div className={b()}>
+            <List {...args} items={items} onLoadMore={onLoadMore} />
+        </div>
+    );
+};