@vygruppen/spor-react 12.23.0 → 12.24.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "12.23.0",
+  "version": "12.24.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -46,9 +46,9 @@
     "react-stately": "^3.31.1",
     "react-swipeable": "^7.0.1",
     "usehooks-ts": "^3.1.0",
+    "@vygruppen/spor-icon-react": "4.5.1",
     "@vygruppen/spor-design-tokens": "4.3.2",
-    "@vygruppen/spor-loader": "0.7.0",
-    "@vygruppen/spor-icon-react": "4.5.1"
+    "@vygruppen/spor-loader": "0.7.0"
   },
   "devDependencies": {
     "@react-types/datepicker": "^3.10.0",
@@ -68,8 +68,8 @@
     "vitest": "^0.26.3",
     "vitest-axe": "^0.1.0",
     "vitest-canvas-mock": "^0.2.2",
-    "@vygruppen/tsconfig": "0.1.1",
-    "@vygruppen/eslint-config": "2.1.0"
+    "@vygruppen/eslint-config": "2.1.0",
+    "@vygruppen/tsconfig": "0.1.1"
   },
   "peerDependencies": {
     "react": ">=18.0.0 <19.0.0",

package/src/table/Table.tsx

@@ -1,5 +1,6 @@
 "use client";
 import {
+  Button,
   HStack,
   RecipeVariantProps,
   Table as ChakraTable,
@@ -10,8 +11,9 @@ import {
   useSlotRecipe,
 } from "@chakra-ui/react";
 import {
-  DropdownDownFill18Icon,
-  DropdownUpFill18Icon,
+  ArrowDownFill18Icon,
+  ArrowUpFill18Icon,
+  ChangeDirectionFill18Icon,
 } from "@vygruppen/spor-icon-react";
 import {
   createContext,
@@ -119,31 +121,41 @@ export type TableColumnHeaderProps = ChakraTableColumnHeaderProps;
 export const TableColumnHeader = forwardRef<
   HTMLTableCellElement,
   TableColumnHeaderProps
->(({ children, onClick, ...rest }, ref) => {
+>(({ children, ...rest }, ref) => {
   const { enabled, sortState, onSort } = useTableSort();
   const key = getSortKey(children);
-  const isActive = enabled && key != null && key === sortState.key;
+  const props = rest as Record<string, unknown>;
+  const columnSortable = enabled && key != null && !("data-nosort" in props);
+  const isActive = columnSortable && key === sortState.key;
 
   return (
-    <ChakraTable.ColumnHeader
-      ref={ref}
-      onClick={(event) => {
-        if (enabled && key) {
-          onSort(key, getColumnIndex(event.currentTarget));
-        }
-        onClick?.(event);
-      }}
-      cursor={enabled && key ? "pointer" : undefined}
-      {...rest}
-    >
+    <ChakraTable.ColumnHeader ref={ref} {...rest}>
       <HStack>
         {children}
-        {isActive &&
-          (sortState.direction === "asc" ? (
-            <DropdownUpFill18Icon />
-          ) : (
-            <DropdownDownFill18Icon />
-          ))}
+        {columnSortable && (
+          <Button
+            variant="ghost"
+            onClick={(event) => {
+              const th = event.currentTarget.closest("th");
+              if (th) onSort(key, getColumnIndex(th));
+            }}
+            p="0px !important"
+            size="xs"
+          >
+            {isActive ? (
+              sortState.direction === "asc" ? (
+                <ArrowUpFill18Icon color="outline.focus" />
+              ) : (
+                <ArrowDownFill18Icon color="outline.focus" />
+              )
+            ) : (
+              <ChangeDirectionFill18Icon
+                transform="rotate(90deg)"
+                color="icon.disabled"
+              />
+            )}
+          </Button>
+        )}
       </HStack>
     </ChakraTable.ColumnHeader>
   );

package/src/table/sort-utils.ts

@@ -11,12 +11,12 @@ export const getNextSortState = (
   current: SortState,
   key: string,
   columnIndex: number,
-): SortState => ({
-  key,
-  columnIndex,
-  direction:
-    current.key === key && current.direction === "asc" ? "desc" : "asc",
-});
+): SortState => {
+  if (current.key !== key) return { key, columnIndex, direction: "asc" };
+  if (current.direction === "asc")
+    return { key, columnIndex, direction: "desc" };
+  return { key: null, direction: "asc", columnIndex: null }; // Initial sort state
+};
 
 export const getSortKey = (children: ReactNode) =>
   typeof children === "string" ? children.trim() : null;