From e517a32125ada63720800cec5934621480e337ca Mon Sep 17 00:00:00 2001
From: Kamil Emeleev <emeleev.kamil@gmail.com>
Date: Wed, 4 Mar 2026 20:40:34 +0300
Subject: [PATCH 1/5] feat(Table): draft sort icon hover behavior

---
 .../TableColumnHeader.module.css                | 10 ++++++++++
 .../TableColumnHeader/TableColumnHeader.tsx     | 17 +++++++++++++----
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/components/Table/components/TableColumnHeader/TableColumnHeader.module.css b/packages/components/src/components/Table/components/TableColumnHeader/TableColumnHeader.module.css
index d61424db..985aa5f2 100644
--- a/packages/components/src/components/Table/components/TableColumnHeader/TableColumnHeader.module.css
+++ b/packages/components/src/components/Table/components/TableColumnHeader/TableColumnHeader.module.css
@@ -97,6 +97,7 @@
 .sortIcon {
   display: flex;
   visibility: hidden;
+  opacity: 1;
 
   &.active {
     visibility: visible;
@@ -111,3 +112,12 @@
     margin: auto;
   }
 }
+
+.sortable:where(.hovered, .focusVisible) .sortIcon {
+  visibility: visible;
+  opacity: 1;
+}
+
+.sortable:where(.hovered, .focusVisible) .sortIcon:not(.active) {
+  opacity: 0.4;
+}
diff --git a/packages/components/src/components/Table/components/TableColumnHeader/TableColumnHeader.tsx b/packages/components/src/components/Table/components/TableColumnHeader/TableColumnHeader.tsx
index a1ba5822..cf24967d 100644
--- a/packages/components/src/components/Table/components/TableColumnHeader/TableColumnHeader.tsx
+++ b/packages/components/src/components/Table/components/TableColumnHeader/TableColumnHeader.tsx
@@ -2,7 +2,7 @@
 
 import { useRef } from 'react';
 
-import { useFocusRing, mergeProps, clsx } from '@koobiq/react-core';
+import { useFocusRing, mergeProps, useHover, clsx } from '@koobiq/react-core';
 import { IconChevronUpS16, IconChevronDownS16 } from '@koobiq/react-icons';
 import type {
   TableState,
@@ -58,15 +58,23 @@ export function TableColumnHeader<T>({
   }: ColumnProps<T> = column.props;
 
   const { isFocusVisible, focusProps } = useFocusRing();
+  const { isHovered, hoverProps } = useHover({ isDisabled: !allowsSorting });
 
   const isActive = state.sortDescriptor?.column === column.key;
 
   const direction = isActive ? state.sortDescriptor?.direction : undefined;
+  const isPreview = !isActive && (isHovered || isFocusVisible);
+  const iconDirection = isPreview ? 'ascending' : direction;
 
   const defaultIcon =
-    direction === 'ascending' ? <IconChevronUpS16 /> : <IconChevronDownS16 />;
+    iconDirection === 'ascending' ? (
+      <IconChevronUpS16 />
+    ) : (
+      <IconChevronDownS16 />
+    );
 
-  const iconToRender = renderSortIcon?.({ direction, isActive }) ?? defaultIcon;
+  const iconToRender =
+    renderSortIcon?.({ direction: iconDirection, isActive }) ?? defaultIcon;
 
   const columnSortIcon = allowsSorting && (
     <span aria-hidden="true" className={clsx(s.sortIcon, isActive && s.active)}>
@@ -84,6 +92,7 @@ export function TableColumnHeader<T>({
         align && s[align],
         valign && s[valign],
         allowsSorting && s.sortable,
+        isHovered && s.hovered,
         isFocusVisible && s.focusVisible,
         className
       )}
@@ -91,7 +100,7 @@ export function TableColumnHeader<T>({
       data-valign={valign || undefined}
       data-allows-sorting={allowsSorting || undefined}
       data-allows-resizing={isResizable || undefined}
-      {...mergeProps(columnHeaderProps, focusProps)}
+      {...mergeProps(columnHeaderProps, hoverProps, focusProps)}
       style={{
         ...styleProp,
         inlineSize: layoutState?.getColumnWidth(column.key),

From fa5282ea4ef09286fe69d37baf24fba0b88d2124 Mon Sep 17 00:00:00 2001
From: Kamil Emeleev <emeleev.kamil@gmail.com>
Date: Fri, 6 Mar 2026 16:42:10 +0300
Subject: [PATCH 2/5] feat(table): allow custom hover icon for unsorted
 sortable columns

---
 .../src/components/Table/Table.stories.tsx    | 19 +++++++++---
 .../TableColumnHeader.module.css              | 11 ++-----
 .../TableColumnHeader/TableColumnHeader.tsx   | 30 +++++++++++--------
 3 files changed, 34 insertions(+), 26 deletions(-)

diff --git a/packages/components/src/components/Table/Table.stories.tsx b/packages/components/src/components/Table/Table.stories.tsx
index d5098601..ad6149f6 100644
--- a/packages/components/src/components/Table/Table.stories.tsx
+++ b/packages/components/src/components/Table/Table.stories.tsx
@@ -1,6 +1,10 @@
 import { useState, useMemo } from 'react';
 
-import { IconArrowDownS16, IconArrowUpS16 } from '@koobiq/react-icons';
+import {
+  IconArrowDownS16,
+  IconArrowUpS16,
+  IconArrowUpArrowDown16,
+} from '@koobiq/react-icons';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import type {
@@ -727,9 +731,16 @@ export const RenderSortIcon: Story = {
         aria-label="Fast animals"
         {...(sortDescriptor && { sortDescriptor })}
         onSortChange={handleSortChange}
-        renderSortIcon={({ direction }) =>
-          direction === 'ascending' ? <IconArrowUpS16 /> : <IconArrowDownS16 />
-        }
+        renderSortIcon={({ direction }) => {
+          if (!direction)
+            return <IconArrowUpArrowDown16 style={{ opacity: '0.5' }} />;
+
+          return direction === 'ascending' ? (
+            <IconArrowUpS16 />
+          ) : (
+            <IconArrowDownS16 />
+          );
+        }}
         selectionMode="multiple"
         {...args}
       >
diff --git a/packages/components/src/components/Table/components/TableColumnHeader/TableColumnHeader.module.css b/packages/components/src/components/Table/components/TableColumnHeader/TableColumnHeader.module.css
index 985aa5f2..9bc49267 100644
--- a/packages/components/src/components/Table/components/TableColumnHeader/TableColumnHeader.module.css
+++ b/packages/components/src/components/Table/components/TableColumnHeader/TableColumnHeader.module.css
@@ -98,6 +98,8 @@
   display: flex;
   visibility: hidden;
   opacity: 1;
+  inline-size: var(--kbq-size-l);
+  block-size: var(--kbq-size-l);
 
   &.active {
     visibility: visible;
@@ -112,12 +114,3 @@
     margin: auto;
   }
 }
-
-.sortable:where(.hovered, .focusVisible) .sortIcon {
-  visibility: visible;
-  opacity: 1;
-}
-
-.sortable:where(.hovered, .focusVisible) .sortIcon:not(.active) {
-  opacity: 0.4;
-}
diff --git a/packages/components/src/components/Table/components/TableColumnHeader/TableColumnHeader.tsx b/packages/components/src/components/Table/components/TableColumnHeader/TableColumnHeader.tsx
index cf24967d..e5b8daa5 100644
--- a/packages/components/src/components/Table/components/TableColumnHeader/TableColumnHeader.tsx
+++ b/packages/components/src/components/Table/components/TableColumnHeader/TableColumnHeader.tsx
@@ -2,7 +2,7 @@
 
 import { useRef } from 'react';
 
-import { useFocusRing, mergeProps, useHover, clsx } from '@koobiq/react-core';
+import { useFocusRing, mergeProps, clsx, useHover } from '@koobiq/react-core';
 import { IconChevronUpS16, IconChevronDownS16 } from '@koobiq/react-icons';
 import type {
   TableState,
@@ -63,21 +63,26 @@ export function TableColumnHeader<T>({
   const isActive = state.sortDescriptor?.column === column.key;
 
   const direction = isActive ? state.sortDescriptor?.direction : undefined;
-  const isPreview = !isActive && (isHovered || isFocusVisible);
-  const iconDirection = isPreview ? 'ascending' : direction;
 
-  const defaultIcon =
-    iconDirection === 'ascending' ? (
-      <IconChevronUpS16 />
-    ) : (
-      <IconChevronDownS16 />
-    );
+  const defaultIcon = (() => {
+    if (direction === 'ascending') {
+      return <IconChevronUpS16 />;
+    }
 
-  const iconToRender =
-    renderSortIcon?.({ direction: iconDirection, isActive }) ?? defaultIcon;
+    if (direction === 'descending') {
+      return <IconChevronDownS16 />;
+    }
+
+    return null;
+  })();
+
+  const iconToRender = renderSortIcon?.({ direction, isActive }) ?? defaultIcon;
 
   const columnSortIcon = allowsSorting && (
-    <span aria-hidden="true" className={clsx(s.sortIcon, isActive && s.active)}>
+    <span
+      aria-hidden="true"
+      className={clsx(s.sortIcon, (isActive || isHovered) && s.active)}
+    >
       {iconToRender}
     </span>
   );
@@ -92,7 +97,6 @@ export function TableColumnHeader<T>({
         align && s[align],
         valign && s[valign],
         allowsSorting && s.sortable,
-        isHovered && s.hovered,
         isFocusVisible && s.focusVisible,
         className
       )}

From 64519e9f7e3d13785a7eaa511ea52150ae1f38d8 Mon Sep 17 00:00:00 2001
From: Kamil Emeleev <emeleev.kamil@gmail.com>
Date: Fri, 6 Mar 2026 16:46:12 +0300
Subject: [PATCH 3/5] refactor(Table): simplify sort icon rendering logic in
 column header

---
 .../components/TableColumnHeader/TableColumnHeader.tsx     | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/components/Table/components/TableColumnHeader/TableColumnHeader.tsx b/packages/components/src/components/Table/components/TableColumnHeader/TableColumnHeader.tsx
index e5b8daa5..1f2b2683 100644
--- a/packages/components/src/components/Table/components/TableColumnHeader/TableColumnHeader.tsx
+++ b/packages/components/src/components/Table/components/TableColumnHeader/TableColumnHeader.tsx
@@ -64,7 +64,7 @@ export function TableColumnHeader<T>({
 
   const direction = isActive ? state.sortDescriptor?.direction : undefined;
 
-  const defaultIcon = (() => {
+  const defaultIcon = () => {
     if (direction === 'ascending') {
       return <IconChevronUpS16 />;
     }
@@ -74,9 +74,10 @@ export function TableColumnHeader<T>({
     }
 
     return null;
-  })();
+  };
 
-  const iconToRender = renderSortIcon?.({ direction, isActive }) ?? defaultIcon;
+  const iconToRender =
+    renderSortIcon?.({ direction, isActive }) ?? defaultIcon();
 
   const columnSortIcon = allowsSorting && (
     <span

From 4806921a4c47e485b62a8cc9dc27b66aae2b8346 Mon Sep 17 00:00:00 2001
From: Kamil Emeleev <emeleev.kamil@gmail.com>
Date: Fri, 6 Mar 2026 16:49:31 +0300
Subject: [PATCH 4/5] fix(Tabled): improve css-layout

---
 .../components/TableColumnHeader/TableColumnHeader.module.css  | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/components/Table/components/TableColumnHeader/TableColumnHeader.module.css b/packages/components/src/components/Table/components/TableColumnHeader/TableColumnHeader.module.css
index 9bc49267..30be4205 100644
--- a/packages/components/src/components/Table/components/TableColumnHeader/TableColumnHeader.module.css
+++ b/packages/components/src/components/Table/components/TableColumnHeader/TableColumnHeader.module.css
@@ -98,8 +98,9 @@
   display: flex;
   visibility: hidden;
   opacity: 1;
+  align-items: center;
+  justify-content: center;
   inline-size: var(--kbq-size-l);
-  block-size: var(--kbq-size-l);
 
   &.active {
     visibility: visible;

From ce0932994e392263b9df4a19236dc7767e303bed Mon Sep 17 00:00:00 2001
From: Kamil Emeleev <emeleev.kamil@gmail.com>
Date: Fri, 6 Mar 2026 18:19:36 +0300
Subject: [PATCH 5/5] test(Table): cover custom sort icon behavior for unsorted
 and active columns

---
 .../src/components/Table/Table.test.tsx       | 58 +++++++++++++++++++
 1 file changed, 58 insertions(+)

diff --git a/packages/components/src/components/Table/Table.test.tsx b/packages/components/src/components/Table/Table.test.tsx
index 2de809ab..bec68562 100644
--- a/packages/components/src/components/Table/Table.test.tsx
+++ b/packages/components/src/components/Table/Table.test.tsx
@@ -203,4 +203,62 @@ describe('Table', () => {
 
     expect(onNavigate).toBeCalled();
   });
+
+  it('should pass unsorted state to renderSortIcon for sortable column', () => {
+    const renderSortIcon = vi.fn(() => <span data-testid="sort-icon" />);
+
+    render(
+      <Table aria-label="Sortable table" renderSortIcon={renderSortIcon}>
+        <Table.Header>
+          <Table.Column key="name" allowsSorting>
+            Name
+          </Table.Column>
+        </Table.Header>
+        <Table.Body items={[{ id: 1, name: 'home' }]}>
+          {(item) => (
+            <Table.Row>
+              <Table.Cell>{item.name}</Table.Cell>
+            </Table.Row>
+          )}
+        </Table.Body>
+      </Table>
+    );
+
+    expect(renderSortIcon).toBeCalledWith({
+      direction: undefined,
+      isActive: false,
+    });
+
+    expect(screen.getByTestId('sort-icon')).toBeInTheDocument();
+  });
+
+  it('should pass active sort direction to renderSortIcon', () => {
+    const renderSortIcon = vi.fn(() => <span data-testid="sort-icon" />);
+
+    render(
+      <Table
+        aria-label="Sortable table"
+        sortDescriptor={{ column: 'name', direction: 'ascending' }}
+        renderSortIcon={renderSortIcon}
+      >
+        <Table.Header>
+          <Table.Column key="name" allowsSorting>
+            Name
+          </Table.Column>
+        </Table.Header>
+        <Table.Body items={[{ id: 1, name: 'home' }]}>
+          {(item) => (
+            <Table.Row>
+              <Table.Cell>{item.name}</Table.Cell>
+            </Table.Row>
+          )}
+        </Table.Body>
+      </Table>
+    );
+
+    expect(renderSortIcon).toBeCalledWith({
+      direction: 'ascending',
+      isActive: true,
+    });
+  });
 });