Fix case-insensitive comparisons in useOrderedRows hook

Author: acelaya

src/hooks/test/use-ordered-rows-test.js

@@ -3,10 +3,14 @@ import { useState } from 'preact/hooks';
 
 import { useOrderedRows } from '../use-ordered-rows';
 
+// Some start with lowercase to test case-insensitive ordering
 const starWarsCharacters = [
   { name: 'Luke Skywalker', age: 20 },
-  { name: 'Princess Leia Organa', age: 20 },
+  { name: 'leia Organa', age: 20 },
   { name: 'Han Solo', age: 25 },
+  { name: 'Baby Yoda', age: 2 },
+  { name: 'baby yöda The Second', age: 2 },
+  { name: 'young Anakin Skywalker', age: 10 },
 ];
 
 describe('useOrderedRows', () => {
@@ -81,24 +85,33 @@ describe('useOrderedRows', () => {
     {
       orderId: 'button-order-by-name-asc',
       expectedRows: [
+        { name: 'Baby Yoda', age: 2 },
+        { name: 'baby yöda The Second', age: 2 },
         { name: 'Han Solo', age: 25 },
+        { name: 'leia Organa', age: 20 },
         { name: 'Luke Skywalker', age: 20 },
-        { name: 'Princess Leia Organa', age: 20 },
+        { name: 'young Anakin Skywalker', age: 10 },
       ],
     },
     {
       orderId: 'button-order-by-name-desc',
       expectedRows: [
-        { name: 'Princess Leia Organa', age: 20 },
+        { name: 'young Anakin Skywalker', age: 10 },
         { name: 'Luke Skywalker', age: 20 },
+        { name: 'leia Organa', age: 20 },
         { name: 'Han Solo', age: 25 },
+        { name: 'baby yöda The Second', age: 2 },
+        { name: 'Baby Yoda', age: 2 },
       ],
     },
     {
       orderId: 'button-order-by-age-asc',
       expectedRows: [
+        { name: 'Baby Yoda', age: 2 },
+        { name: 'baby yöda The Second', age: 2 },
+        { name: 'young Anakin Skywalker', age: 10 },
         { name: 'Luke Skywalker', age: 20 },
-        { name: 'Princess Leia Organa', age: 20 },
+        { name: 'leia Organa', age: 20 },
         { name: 'Han Solo', age: 25 },
       ],
     },
@@ -107,7 +120,10 @@ describe('useOrderedRows', () => {
       expectedRows: [
         { name: 'Han Solo', age: 25 },
         { name: 'Luke Skywalker', age: 20 },
-        { name: 'Princess Leia Organa', age: 20 },
+        { name: 'leia Organa', age: 20 },
+        { name: 'young Anakin Skywalker', age: 10 },
+        { name: 'Baby Yoda', age: 2 },
+        { name: 'baby yöda The Second', age: 2 },
       ],
     },
   ].forEach(({ orderId, expectedRows }) => {

src/hooks/use-ordered-rows.ts

@@ -2,9 +2,13 @@ import { useMemo } from 'preact/hooks';
 
 import type { Order } from '../types';
 
+const collator = new Intl.Collator(undefined, { sensitivity: 'case' });
+
 /**
  * Orders a list of rows based on provided order options.
  * Provided rows are not mutated, but a copy is returned instead.
+ * Strings are compared using `Intl.Collator`, other types are compared using
+ * standard JavaScript comparisons.
  */
 export function useOrderedRows<Row>(
   rows: Row[],
@@ -15,16 +19,18 @@ export function useOrderedRows<Row>(
       return rows;
     }
 
-    return [...rows].sort((a, b) => {
-      if (a[order.field] === b[order.field]) {
-        return 0;
+    return [...rows].sort(({ [order.field]: a }, { [order.field]: b }) => {
+      const [x, y] = order.direction === 'ascending' ? [a, b] : [b, a];
+
+      if (typeof x === 'string' && typeof y === 'string') {
+        return collator.compare(x, y);
       }
 
-      if (order.direction === 'ascending') {
-        return a[order.field] > b[order.field] ? 1 : -1;
+      if (x === y) {
+        return 0;
       }
 
-      return a[order.field] > b[order.field] ? -1 : 1;
+      return x > y ? 1 : -1;
     });
   }, [order, rows]);
 }