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

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 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.30](https://github.com/spaced-out/ui-design-system/compare/v0.3.29...v0.3.30) (2025-03-19)
+
+
+### Bug Fixes
+
+* change tokens ([#327](https://github.com/spaced-out/ui-design-system/issues/327)) ([4fdf2a1](https://github.com/spaced-out/ui-design-system/commit/4fdf2a13af14d0570ce0bf8bc1c3d413fe7e9995))
+
+### [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/design-tokens/color/app-color.json

@@ -146,7 +146,7 @@
       },
       "tertiary": {
         "enabled": {
-          "value": "{baseColor.transparent.0.value}"
+          "value": "{baseColor.white.100.value}"
         },
         "hovered": {
           "value": "{baseColor.gray.75.value}"
@@ -359,4 +359,4 @@
       "value": "{baseColor.red.900.value}"
     }
   }
-}
+}

package/lib/components/Chip/Chip.module.css

@@ -9,8 +9,8 @@
   colorWarningLight,
   colorDangerLightest,
   colorDangerLight,
+  colorBackgroundTertiary,
   colorGrayLightest,
-  colorFillNone,
   colorTextDisabled,
   colorFillDisabled,
   colorFocusPrimary
@@ -118,7 +118,7 @@
 
 .secondary {
   composes: borderPrimary from '../../styles/border.module.css';
-  background-color: colorFillNone;
+  background-color: colorBackgroundTertiary;
 }
 
 .secondary:not(.noHoverState):hover {

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/lib/styles/index.css

@@ -104,7 +104,7 @@
 
 @value colorButtonFillSecondaryPressed: #ccc0f0;
 
-@value colorButtonFillTertiaryEnabled: rgba(255,255,255,0);
+@value colorButtonFillTertiaryEnabled: #ffffff;
 
 @value colorButtonFillTertiaryHovered: #EBEBEB;
 

package/lib/styles/index.js

@@ -113,7 +113,7 @@ const colorButtonFillSecondaryHovered = '#ccc0f0';
 exports.colorButtonFillSecondaryHovered = colorButtonFillSecondaryHovered;
 const colorButtonFillSecondaryPressed = '#ccc0f0';
 exports.colorButtonFillSecondaryPressed = colorButtonFillSecondaryPressed;
-const colorButtonFillTertiaryEnabled = 'rgba(255,255,255,0)';
+const colorButtonFillTertiaryEnabled = '#ffffff';
 exports.colorButtonFillTertiaryEnabled = colorButtonFillTertiaryEnabled;
 const colorButtonFillTertiaryHovered = '#EBEBEB';
 exports.colorButtonFillTertiaryHovered = colorButtonFillTertiaryHovered;

package/lib/styles/index.js.flow

@@ -106,7 +106,7 @@ export const colorButtonFillSecondaryHovered = '#ccc0f0';
 
 export const colorButtonFillSecondaryPressed = '#ccc0f0';
 
-export const colorButtonFillTertiaryEnabled = 'rgba(255,255,255,0)';
+export const colorButtonFillTertiaryEnabled = '#ffffff';
 
 export const colorButtonFillTertiaryHovered = '#EBEBEB';
 

package/lib/styles/variables/_color.css

@@ -80,7 +80,7 @@
 
 @value colorButtonFillSecondaryPressed: #ccc0f0;
 
-@value colorButtonFillTertiaryEnabled: rgba(255,255,255,0);
+@value colorButtonFillTertiaryEnabled: #ffffff;
 
 @value colorButtonFillTertiaryHovered: #EBEBEB;
 

package/lib/styles/variables/_color.js

@@ -88,7 +88,7 @@ const colorButtonFillSecondaryHovered = '#ccc0f0';
 exports.colorButtonFillSecondaryHovered = colorButtonFillSecondaryHovered;
 const colorButtonFillSecondaryPressed = '#ccc0f0';
 exports.colorButtonFillSecondaryPressed = colorButtonFillSecondaryPressed;
-const colorButtonFillTertiaryEnabled = 'rgba(255,255,255,0)';
+const colorButtonFillTertiaryEnabled = '#ffffff';
 exports.colorButtonFillTertiaryEnabled = colorButtonFillTertiaryEnabled;
 const colorButtonFillTertiaryHovered = '#EBEBEB';
 exports.colorButtonFillTertiaryHovered = colorButtonFillTertiaryHovered;

package/lib/styles/variables/_color.js.flow

@@ -82,7 +82,7 @@ export const colorButtonFillSecondaryHovered = '#ccc0f0';
 
 export const colorButtonFillSecondaryPressed = '#ccc0f0';
 
-export const colorButtonFillTertiaryEnabled = 'rgba(255,255,255,0)';
+export const colorButtonFillTertiaryEnabled = '#ffffff';
 
 export const colorButtonFillTertiaryHovered = '#EBEBEB';
 

package/package.json

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