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

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.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)
+
+
+### Bug Fixes
+
+* added allow wraps in simple dropdowns,buttons,typeahead ([#324](https://github.com/spaced-out/ui-design-system/issues/324)) ([ec836ac](https://github.com/spaced-out/ui-design-system/commit/ec836ac0f04ea10384006adc8d649f7dcb163b4c))
+
 ### [0.3.27](https://github.com/spaced-out/ui-design-system/compare/v0.3.26...v0.3.27) (2025-03-06)
 
 

package/lib/components/ButtonDropdown/SimpleButtonDropdown.js

@@ -31,6 +31,7 @@ const SimpleButtonDropdownBase = (props, ref) => {
     footer,
     menuClassNames,
     showLabelTooltip,
+    allowWrap = false,
     clickAwayRef,
     ...buttonProps
   } = props;
@@ -80,7 +81,8 @@ const SimpleButtonDropdownBase = (props, ref) => {
       header,
       footer,
       classNames: menuClassNames,
-      showLabelTooltip
+      showLabelTooltip,
+      allowWrap
     }
   }), optionsVariant === 'checkbox' ? btnText : children);
 };

package/lib/components/ButtonDropdown/SimpleButtonDropdown.js.flow

@@ -44,7 +44,7 @@ export type SimpleButtonDropdownProps = {
   footer?: React.Node,
   menuClassNames?: MenuClassNames,
   showLabelTooltip?: MenuLabelTooltip,
-
+  allowWrap?: boolean,
   // events
   onOptionSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
   onMenuOpen?: () => mixed,
@@ -78,6 +78,7 @@ const SimpleButtonDropdownBase = (props: SimpleButtonDropdownProps, ref) => {
     footer,
     menuClassNames,
     showLabelTooltip,
+    allowWrap = false,
     clickAwayRef,
     ...buttonProps
   } = props;
@@ -147,6 +148,7 @@ const SimpleButtonDropdownBase = (props: SimpleButtonDropdownProps, ref) => {
         footer,
         classNames: menuClassNames,
         showLabelTooltip,
+        allowWrap,
       }}
     >
       {optionsVariant === 'checkbox' ? btnText : children}

package/lib/components/Dropdown/SimpleDropdown.js

@@ -31,6 +31,7 @@ const SimpleDropdownBase = (props, ref) => {
     menuClassNames,
     showLabelTooltip,
     clickAwayRef,
+    allowWrap = false,
     ...inputProps
   } = props;
   const [dropdownInputText, setDropdownInputText] = React.useState('');
@@ -80,7 +81,8 @@ const SimpleDropdownBase = (props, ref) => {
       header,
       footer,
       classNames: menuClassNames,
-      showLabelTooltip
+      showLabelTooltip,
+      allowWrap
     }
   }));
 };

package/lib/components/Dropdown/SimpleDropdown.js.flow

@@ -41,6 +41,7 @@ export type SimpleDropdownProps = {
   footer?: React.Node,
   menuClassNames?: MenuClassNames,
   showLabelTooltip?: MenuLabelTooltip,
+  allowWrap?: boolean,
 
   // events
   onChange?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
@@ -74,6 +75,7 @@ const SimpleDropdownBase = (props: SimpleDropdownProps, ref) => {
     menuClassNames,
     showLabelTooltip,
     clickAwayRef,
+    allowWrap = false,
     ...inputProps
   } = props;
 
@@ -143,6 +145,7 @@ const SimpleDropdownBase = (props: SimpleDropdownProps, ref) => {
         footer,
         classNames: menuClassNames,
         showLabelTooltip,
+        allowWrap,
       }}
     />
   );

package/lib/components/InlineDropdown/SimpleInlineDropdown.js

@@ -32,6 +32,7 @@ const SimpleInlineDropdownBase = (props, ref) => {
     menuClassNames,
     showLabelTooltip,
     clickAwayRef,
+    allowWrap = false,
     ...buttonProps
   } = props;
   const [btnText, setBtnText] = React.useState('');
@@ -80,7 +81,8 @@ const SimpleInlineDropdownBase = (props, ref) => {
       header,
       footer,
       classNames: menuClassNames,
-      showLabelTooltip
+      showLabelTooltip,
+      allowWrap
     }
   }), optionsVariant === 'checkbox' ? btnText : children);
 };

package/lib/components/InlineDropdown/SimpleInlineDropdown.js.flow

@@ -38,6 +38,7 @@ export type SimpleInlineDropdownProps = {
   allowSearch?: boolean,
   selectedKeys?: Array<string>,
   showLabelTooltip?: MenuLabelTooltip,
+  allowWrap?: boolean,
 
   // events
   onOptionSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
@@ -77,6 +78,7 @@ const SimpleInlineDropdownBase = (props: SimpleInlineDropdownProps, ref) => {
     menuClassNames,
     showLabelTooltip,
     clickAwayRef,
+    allowWrap = false,
     ...buttonProps
   } = props;
 
@@ -145,6 +147,7 @@ const SimpleInlineDropdownBase = (props: SimpleInlineDropdownProps, ref) => {
         footer,
         classNames: menuClassNames,
         showLabelTooltip,
+        allowWrap,
       }}
     >
       {optionsVariant === 'checkbox' ? btnText : children}

package/lib/components/OptionButton/SimpleOptionButton.js

@@ -34,6 +34,7 @@ const SimpleOptionButtonBase = (props, ref) => {
     menuClassNames,
     showLabelTooltip,
     clickAwayRef,
+    allowWrap = false,
     ...buttonProps
   } = props;
   const [optionButtonSelectedKeys, setOptionButtonSelectedKeys] = React.useState(selectedKeys);
@@ -79,7 +80,8 @@ const SimpleOptionButtonBase = (props, ref) => {
       header,
       footer,
       classNames: menuClassNames,
-      showLabelTooltip
+      showLabelTooltip,
+      allowWrap
     }
   }), children);
 };

package/lib/components/OptionButton/SimpleOptionButton.js.flow

@@ -46,7 +46,7 @@ export type SimpleOptionButtonProps = {
   footer?: React.Node,
   menuClassNames?: MenuClassNames,
   showLabelTooltip?: MenuLabelTooltip,
-
+  allowWrap?: boolean,
   // events
   onOptionSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
   onButtonClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
@@ -84,6 +84,7 @@ const SimpleOptionButtonBase = (props: SimpleOptionButtonProps, ref) => {
     menuClassNames,
     showLabelTooltip,
     clickAwayRef,
+    allowWrap = false,
     ...buttonProps
   } = props;
 
@@ -144,6 +145,7 @@ const SimpleOptionButtonBase = (props: SimpleOptionButtonProps, ref) => {
         footer,
         classNames: menuClassNames,
         showLabelTooltip,
+        allowWrap,
       }}
     >
       {children}

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/components/Typeahead/SimpleTypeahead.js

@@ -31,6 +31,7 @@ const SimpleTypeaheadBase = (props, ref) => {
     clickAwayRef,
     showLabelTooltip,
     allowInternalFilter = true,
+    allowWrap = false,
     ...inputProps
   } = props;
   const [typeaheadInputText, setTypeaheadInputText] = React.useState('');
@@ -81,7 +82,8 @@ const SimpleTypeaheadBase = (props, ref) => {
       header,
       footer,
       classNames: menuClassNames,
-      showLabelTooltip
+      showLabelTooltip,
+      allowWrap
     },
     clickAwayRef: clickAwayRef
   }));

package/lib/components/Typeahead/SimpleTypeahead.js.flow

@@ -37,6 +37,7 @@ export type SimpleTypeaheadProps = {
   footer?: React.Node,
   menuClassNames?: MenuClassNames,
   showLabelTooltip?: MenuLabelTooltip,
+  allowWrap?: boolean,
 
   // events
   onSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
@@ -74,6 +75,7 @@ const SimpleTypeaheadBase = (props: SimpleTypeaheadProps, ref) => {
     clickAwayRef,
     showLabelTooltip,
     allowInternalFilter = true,
+    allowWrap = false,
     ...inputProps
   } = props;
 
@@ -143,6 +145,7 @@ const SimpleTypeaheadBase = (props: SimpleTypeaheadProps, ref) => {
         footer,
         classNames: menuClassNames,
         showLabelTooltip,
+        allowWrap,
       }}
       clickAwayRef={clickAwayRef}
     />

package/package.json

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