feat(Table): allow custom hover icon for unsorted sortable columns (DS-4323)

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}
       >

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,
+    });
+  });
 });

packages/components/src/components/Table/components/TableColumnHeader/TableColumnHeader.module.css

@@ -97,6 +97,10 @@
 .sortIcon {
   display: flex;
   visibility: hidden;
+  opacity: 1;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--kbq-size-l);
 
   &.active {
     visibility: visible;

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, clsx, useHover } from '@koobiq/react-core';
 import { IconChevronUpS16, IconChevronDownS16 } from '@koobiq/react-icons';
 import type {
   TableState,
@@ -58,18 +58,32 @@ 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 defaultIcon =
-    direction === 'ascending' ? <IconChevronUpS16 /> : <IconChevronDownS16 />;
+  const defaultIcon = () => {
+    if (direction === 'ascending') {
+      return <IconChevronUpS16 />;
+    }
 
-  const iconToRender = renderSortIcon?.({ direction, 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>
   );
@@ -91,7 +105,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),