feat: updated sort selector

package.json

@@ -23,7 +23,7 @@
     "prettier": "^3.7.4",
     "prettier-plugin-astro": "0.14.1",
     "prettier-plugin-tailwindcss": "^0.6.14",
-    "typescript-eslint": "^8.52.0"
+    "typescript-eslint": "^8.53.0"
   },
   "pnpm": {
     "overrides": {

packages/demo/src/components/demo/sort-selector.tsx

@@ -1,11 +1,18 @@
 import {
   SortSelector,
   type SortField,
+  type SortMode,
   type SortOrder,
 } from "@eqtylab/equality";
 import { useState } from "react";
 
-export const SortSelectorDemo = () => {
+export const SortSelectorDemo = ({
+  showDateOptions = true,
+  sortMode = "created",
+}: {
+  showDateOptions?: boolean;
+  sortMode?: SortMode;
+}) => {
   const [sortField, setSortField] = useState<SortField>("name");
   const [sortOrder, setSortOrder] = useState<SortOrder>("asc");
 
@@ -15,6 +22,8 @@ export const SortSelectorDemo = () => {
       sortOrder={sortOrder}
       setSortField={setSortField}
       setSortOrder={setSortOrder}
+      showDateOptions={showDateOptions}
+      sortMode={sortMode}
     />
   );
 };

packages/demo/src/content/components/sort-selector.mdx

@@ -7,4 +7,33 @@ import { SortSelectorDemo } from "@demo/components/demo/sort-selector";
 
 ## Default
 
+Shows the Sort Selector with default sorting (by Name, ascending):
+
 <SortSelectorDemo client:only="react" />
+
+## Props
+
+The Sort Selector component accepts several props to customize its behavior:
+
+- **`sortField`** (`"name"`, `"type"`, `"createdAt"`, `"updatedAt"`): The field by which to sort.
+- **`sortOrder`** (`"asc"` or `"desc"`): The sort direction (ascending/descending).
+- **`sortMode`** (`"created"` or `"updated"`, default: `"created"`): Determines which date-related sorting options are offered.
+- **`showDateOptions`** (`true` or `false`, default: `true`): Controls whether date sorting options (created/updated) are displayed.
+- **`setSortField`** and **`setSortOrder`**: Handler functions to update the current sort field and order.
+
+You can combine these props to control and respond to sorting preference changes in your UI.
+
+### Sort mode options
+
+The `sortMode` prop determines which set of date-related sorting options are shown in the Sort Selector. It accepts either `"created"` (default) or `"updated"`.
+
+- When `sortMode="created"`, you will see options to sort by "Recently Created" or "Oldest Created".
+- When `sortMode="updated"`, you will see options to sort by "Recently Updated" or "Oldest Updated".
+
+<SortSelectorDemo client:only="react" sortMode="updated" />
+
+### Hide date options
+
+Set `showDateOptions={false}` to hide sorting options for creation date:
+
+<SortSelectorDemo client:only="react" showDateOptions={false} />

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eqtylab/equality",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "private": false,
   "type": "module",
   "main": "./dist/index.cjs",

packages/ui/src/components/sort-selector/sort-selector.module.css

@@ -1,9 +1,13 @@
 @reference '../../theme/theme.module.css';
 
 .sort-selector-trigger {
-  @apply min-w-32;
+  @apply min-w-42 justify-between;
 }
 
 .chevron-down-icon {
   @apply text-text-secondary;
 }
+
+.dropdown-menu-content {
+  @apply min-w-42;
+}

packages/ui/src/components/sort-selector/sort-selector.tsx

@@ -15,12 +15,16 @@ import { cn } from '@/lib/utils';
 
 const ChevronDownIcon = ChevronDown as React.ComponentType<{ className?: string }>;
 
-export type SortField = 'name' | 'type' | 'createdAt' | 'updatedAt' | 'controls';
+export type SortField = 'name' | 'type' | 'createdAt' | 'updatedAt';
 export type SortOrder = 'asc' | 'desc';
+export type SortMode = 'created' | 'updated';
 
 interface SortSelectorProps {
   sortField: SortField;
+  defaultSortField?: SortField;
   sortOrder: SortOrder;
+  defaultSortOrder?: SortOrder;
+  sortMode?: SortMode;
   setSortField: (field: SortField) => void;
   setSortOrder: (order: SortOrder) => void;
   setCurrentPage?: (page: number) => void;
@@ -30,7 +34,10 @@ interface SortSelectorProps {
 
 function SortSelector({
   sortField,
+  defaultSortField = 'name',
   sortOrder,
+  defaultSortOrder = 'asc',
+  sortMode = 'created',
   setSortField,
   setSortOrder,
   setCurrentPage,
@@ -41,16 +48,21 @@ function SortSelector({
     { value: 'name-asc', label: 'Name (A-Z)' },
     { value: 'name-desc', label: 'Name (Z-A)' },
     ...(showDateOptions
-      ? [
-          { value: 'createdAt-desc', label: 'Recently Created' },
-          { value: 'createdAt-asc', label: 'Oldest Created' },
-        ]
+      ? sortMode === 'created'
+        ? [
+            { value: 'createdAt-desc', label: 'Recently Created' },
+            { value: 'createdAt-asc', label: 'Oldest Created' },
+          ]
+        : [
+            { value: 'updatedAt-desc', label: 'Recently Updated' },
+            { value: 'updatedAt-asc', label: 'Oldest Updated' },
+          ]
       : []),
   ] as const;
 
   const currentValue = `${sortField}-${sortOrder}`;
   const currentLabel = options.find((option) => option.value === currentValue)?.label || 'Sort';
-  const isDefaultSort = sortField === 'name' && sortOrder === 'asc';
+  const isDefaultSort = sortField === defaultSortField && sortOrder === defaultSortOrder;
 
   const filteredOptions = options.filter(
     (option) =>
@@ -65,8 +77,8 @@ function SortSelector({
   };
 
   const handleReset = () => {
-    setSortField('name');
-    setSortOrder('asc');
+    setSortField(defaultSortField);
+    setSortOrder(defaultSortOrder);
     setCurrentPage?.(1);
   };
 
@@ -78,9 +90,9 @@ function SortSelector({
           <ChevronDownIcon className={styles['chevron-down-icon']} />
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
+      <DropdownMenuContent align="end" className={styles['dropdown-menu-content']}>
         <DropdownMenuLabel>
-          Sort By
+          Sort
           {!isDefaultSort && (
             <Button variant="link" size="sm" onClick={handleReset}>
               Reset