@spaced-out/ui-design-system 0.3.28 → 0.3.29

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.3.29](https://github.com/spaced-out/ui-design-system/compare/v0.3.28...v0.3.29) (2025-03-12)
+
+
+### Bug Fixes
+
+* disabled internal sorting and handled onSOrt ([#325](https://github.com/spaced-out/ui-design-system/issues/325)) ([f43d03a](https://github.com/spaced-out/ui-design-system/commit/f43d03a135240c3dba9a91695ed3128130de63e2))
+
 ### [0.3.28](https://github.com/spaced-out/ui-design-system/compare/v0.3.27...v0.3.28) (2025-03-09)
 
 

package/lib/components/Table/Table.docs.js

@@ -198,6 +198,18 @@ const TABLE_DOCS = {
           summary: false
         }
       }
+    },
+    enableInternalSorting: {
+      description: 'Enable internal sorting for the table. This would sort the table data internally and not rely on the apis sorting',
+      control: 'boolean',
+      table: {
+        type: {
+          summary: '?boolean'
+        },
+        defaultValue: {
+          summary: true
+        }
+      }
     }
   },
   parameters: {

package/lib/components/Table/Table.docs.js.flow

@@ -162,6 +162,15 @@ export const TABLE_DOCS = {
         defaultValue: {summary: false},
       },
     },
+    enableInternalSorting: {
+      description:
+        'Enable internal sorting for the table. This would sort the table data internally and not rely on the apis sorting',
+      control: 'boolean',
+      table: {
+        type: {summary: '?boolean'},
+        defaultValue: {summary: true},
+      },
+    },
   },
   parameters: {
     componentSubtitle: 'Generates a Table component.',

package/lib/components/Table/Table.js

@@ -44,6 +44,7 @@ function Table(props) {
     defaultSortKey,
     defaultSortDirection = 'original',
     onSort,
+    enableInternalSorting,
     // eslint-disable-next-line unused-imports/no-unused-vars
     isLoading,
     idName = 'id',
@@ -62,7 +63,8 @@ function Table(props) {
   } = (0, _hooks.useSortableEntries)(entries, idName, {
     defaultSortKey,
     defaultSortDirection,
-    onSort
+    onSort,
+    enableInternalSorting
   });
   return /*#__PURE__*/React.createElement(_StaticTable.StaticTable, _extends({}, props, sortableProps, {
     sortable: sortable,

package/lib/components/Table/Table.js.flow

@@ -41,6 +41,8 @@ export type TableProps<T, U> = {
   headerIconClassName?: string,
   defaultSortKey?: string,
   defaultSortDirection?: 'asc' | 'desc' | 'original',
+  // Please start using this prop if you want internal sorting to work in the table
+  enableInternalSorting?: boolean,
 
   selectedKeys?: string[],
   onSelect?: (keys: string[]) => mixed,
@@ -93,6 +95,8 @@ export function Table<Data: GenericObject, Extras: GenericObject>(
     defaultSortKey,
     defaultSortDirection = 'original',
     onSort,
+    enableInternalSorting,
+
     // eslint-disable-next-line unused-imports/no-unused-vars
     isLoading,
     idName = 'id',
@@ -111,6 +115,7 @@ export function Table<Data: GenericObject, Extras: GenericObject>(
       defaultSortKey,
       defaultSortDirection,
       onSort,
+      enableInternalSorting,
     },
   );
 

package/lib/components/Table/hooks.js

@@ -15,7 +15,8 @@ function useSortableEntries(entries, idName, _ref) {
   let {
     defaultSortKey = 'id',
     defaultSortDirection = 'original',
-    onSort
+    onSort,
+    enableInternalSorting = true
   } = _ref;
   const [sortKey, setSortKey] = React.useState(defaultSortKey);
   const [sortDirection, setSortDirection] = React.useState(defaultSortDirection);
@@ -38,17 +39,18 @@ function useSortableEntries(entries, idName, _ref) {
     return nextDirection;
   };
   const handleSortClick = React.useCallback(nextSortKey => {
-    let nextSortDirection = sortDirection;
+    let nextSortDirection;
     if (nextSortKey === sortKey) {
       nextSortDirection = advanceSortDirection(sortDirection);
     } else {
       setSortKey(nextSortKey);
-      setSortDirection('desc');
+      nextSortDirection = 'desc';
     }
+    setSortDirection(nextSortDirection);
     onSort?.(nextSortKey, nextSortDirection);
   }, [sortKey, sortDirection, entries]);
   const sortedEntries = React.useMemo(() => {
-    if (sortDirection === 'original') {
+    if (!enableInternalSorting || sortDirection === 'original') {
       return entries;
     }
     const caseInsensitiveSortFunction = entry => {
@@ -57,9 +59,9 @@ function useSortableEntries(entries, idName, _ref) {
       }
       return entry[sortKey];
     };
-    const sortedDesc = (0, _sortBy.default)(entries, caseInsensitiveSortFunction);
-    return sortDirection === 'asc' ? sortedDesc : sortedDesc.reverse();
-  }, [sortDirection, sortKey, entries]);
+    const sortedAsc = (0, _sortBy.default)(entries, caseInsensitiveSortFunction);
+    return sortDirection === 'asc' ? sortedAsc : sortedAsc.reverse();
+  }, [sortDirection, sortKey, entries, enableInternalSorting]);
   const sortedKeys = React.useMemo(() => sortedEntries.map(ent => (0, _get.default)(ent, idName)), [sortedEntries]);
   return {
     sortedEntries,

package/lib/components/Table/hooks.js.flow

@@ -16,10 +16,12 @@ export function useSortableEntries<T: GenericObject>(
     defaultSortKey = 'id',
     defaultSortDirection = 'original',
     onSort,
+    enableInternalSorting = true,
   }: {
     defaultSortKey?: $Keys<T>,
     defaultSortDirection?: SortDirection,
     onSort?: (sortKey: string, sortDirection: SortDirection) => mixed,
+    enableInternalSorting?: boolean,
   },
 ): {
   handleSortClick: (sortKey: $Keys<T>) => mixed,
@@ -53,20 +55,21 @@ export function useSortableEntries<T: GenericObject>(
 
   const handleSortClick = React.useCallback(
     (nextSortKey: string) => {
-      let nextSortDirection = sortDirection;
+      let nextSortDirection;
       if (nextSortKey === sortKey) {
         nextSortDirection = advanceSortDirection(sortDirection);
       } else {
         setSortKey(nextSortKey);
-        setSortDirection('desc');
+        nextSortDirection = 'desc';
       }
+      setSortDirection(nextSortDirection);
       onSort?.(nextSortKey, nextSortDirection);
     },
     [sortKey, sortDirection, entries],
   );
 
   const sortedEntries = React.useMemo(() => {
-    if (sortDirection === 'original') {
+    if (!enableInternalSorting || sortDirection === 'original') {
       return entries;
     }
     const caseInsensitiveSortFunction = (entry) => {
@@ -75,9 +78,9 @@ export function useSortableEntries<T: GenericObject>(
       }
       return entry[sortKey];
     };
-    const sortedDesc = sortBy(entries, caseInsensitiveSortFunction);
-    return sortDirection === 'asc' ? sortedDesc : sortedDesc.reverse();
-  }, [sortDirection, sortKey, entries]);
+    const sortedAsc = sortBy(entries, caseInsensitiveSortFunction);
+    return sortDirection === 'asc' ? sortedAsc : sortedAsc.reverse();
+  }, [sortDirection, sortKey, entries, enableInternalSorting]);
 
   const sortedKeys = React.useMemo(
     () => sortedEntries.map((ent) => get(ent, idName)),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.3.28",
+  "version": "0.3.29",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {