@spaced-out/ui-design-system 0.1.65 → 0.1.67

package/.cspell/custom-words.txt

@@ -46,6 +46,7 @@ proxysense
 rerouter
 rgba
 sbdocs
+senseai
 Stapleton
 storysource
 superrover
@@ -59,6 +60,7 @@ Typeahead
 typeof
 valuenow
 Verda
+vish
 xmark
 yourcomponentname
 yxxx

package/.github/workflows/publish_to_npm.yml

@@ -22,7 +22,7 @@ jobs:
       - name: Check Permissions
         id: check-permissions
         env:
-          ALLOWED_USERS: superrover, Anant-Raj, nsfmc, ashwini-sensehq, aditya-kaushal
+          ALLOWED_USERS: superrover, Anant-Raj, nsfmc, ashwini-sensehq, aditya-kaushal, vish-sah
         if: ${{ !contains(env.ALLOWED_USERS, github.actor) }}
         run: |
           echo "You don't have correct permissions to do this release"

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 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.1.67](https://github.com/spaced-out/ui-design-system/compare/v0.1.66...v0.1.67) (2023-11-10)
+
+
+### Features
+
+* tooltip now accepts elevation as an enum ([c2c2548](https://github.com/spaced-out/ui-design-system/commit/c2c254895e343cfcfe336b416d5341ac06d07ba6))
+
+
+### Bug Fixes
+
+* add senseai to side menu link ([#151](https://github.com/spaced-out/ui-design-system/issues/151)) ([fec9cab](https://github.com/spaced-out/ui-design-system/commit/fec9cab34a2be35e89ce4c72968451ae6cac3444))
+* button overflow fix ([#153](https://github.com/spaced-out/ui-design-system/issues/153)) ([932ea91](https://github.com/spaced-out/ui-design-system/commit/932ea91a5d75c3044998efb6bf4f0e27357dd8e9))
+* table column fixes ([4aefc17](https://github.com/spaced-out/ui-design-system/commit/4aefc175d6f24b7fd6eea425f68f38712f478488))
+
+### [0.1.66](https://github.com/spaced-out/ui-design-system/compare/v0.1.65...v0.1.66) (2023-11-06)
+
+
+### Bug Fixes
+
+* enable case-insensitive sorting in table ([#152](https://github.com/spaced-out/ui-design-system/issues/152)) ([6e229a0](https://github.com/spaced-out/ui-design-system/commit/6e229a084b78964fc62e65a0ac09a367166ce03b))
+
 ### [0.1.65](https://github.com/spaced-out/ui-design-system/compare/v0.1.64...v0.1.65) (2023-10-31)
 
 

package/lib/components/Button/Button.js

@@ -111,7 +111,7 @@ const Button = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   }), /*#__PURE__*/React.createElement("div", {
     className: _ButtonModule.default.buttonRow
   }, !(iconLeftName || iconRightName) ? /*#__PURE__*/React.createElement("div", {
-    className: _ButtonModule.default.textContainer
+    className: (0, _classify.classify)(_ButtonModule.default.textContainer, classNames?.text)
   }, isLoading && /*#__PURE__*/React.createElement("div", {
     className: _ButtonModule.default.loader
   }, /*#__PURE__*/React.createElement(_CircularLoader.CircularLoader, {
@@ -147,7 +147,7 @@ const Button = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       [_ButtonModule.default.hidden]: isLoading
     }, classNames?.icon)
   }), /*#__PURE__*/React.createElement("div", {
-    className: _ButtonModule.default.textContainer
+    className: (0, _classify.classify)(_ButtonModule.default.textContainer, classNames?.text)
   }, isLoading && /*#__PURE__*/React.createElement("div", {
     className: _ButtonModule.default.loader
   }, /*#__PURE__*/React.createElement(_CircularLoader.CircularLoader, {

package/lib/components/Button/Button.js.flow

@@ -11,7 +11,7 @@ import {Truncate} from '../Truncate';
 import css from './Button.module.css';
 
 
-type ClassNames = $ReadOnly<{wrapper?: string, icon?: string}>;
+type ClassNames = $ReadOnly<{wrapper?: string, icon?: string, text?: string}>;
 
 export const BUTTON_TYPES = Object.freeze({
   primary: 'primary',
@@ -162,7 +162,7 @@ export const Button: React$AbstractComponent<ButtonProps, HTMLButtonElement> =
         <div className={css.buttonRow}>
           {/* Has no icon, only child */}
           {!(iconLeftName || iconRightName) ? (
-            <div className={css.textContainer}>
+            <div className={classify(css.textContainer, classNames?.text)}>
               {isLoading && (
                 <div className={css.loader}>
                   <CircularLoader
@@ -223,7 +223,7 @@ export const Button: React$AbstractComponent<ButtonProps, HTMLButtonElement> =
                       )}
                     />
                   )}
-                  <div className={css.textContainer}>
+                  <div className={classify(css.textContainer, classNames?.text)}>
                     {isLoading && (
                       <div className={css.loader}>
                         <CircularLoader

package/lib/components/SideMenuLink/SideMenuLink.js

@@ -17,98 +17,87 @@ const MENU_NAME_LIST = Object.freeze({
   dashboard: {
     title: 'Dashboard',
     iconName: 'house',
-    iconType: 'duotone',
-    iconSwapOpacity: false
+    iconType: 'duotone'
   },
   engage: {
     title: 'Engage',
     iconName: 'bullseye-pointer',
-    iconType: 'duotone',
-    iconSwapOpacity: false
+    iconType: 'duotone'
   },
   trm: {
     title: 'TRM',
     iconName: 'screen-users',
-    iconType: 'duotone',
-    iconSwapOpacity: true
+    iconType: 'duotone'
   },
   analytics: {
     title: 'Analytics',
     iconName: 'chart-column',
-    iconType: 'duotone',
-    iconSwapOpacity: true
+    iconType: 'duotone'
   },
   messaging: {
     title: 'Messaging',
     iconName: 'messages',
-    iconType: 'duotone',
-    iconSwapOpacity: true
+    iconType: 'duotone'
   },
   chatbot: {
     title: 'Chatbot',
     iconName: 'message-bot',
-    iconType: 'duotone',
-    iconSwapOpacity: true
+    iconType: 'duotone'
   },
   referrals: {
     title: 'Referrals',
     iconName: 'user-check',
-    iconType: 'duotone',
-    iconSwapOpacity: true
+    iconType: 'duotone'
   },
   records: {
     title: 'Records',
     iconName: 'folder-open',
-    iconType: 'duotone',
-    iconSwapOpacity: true
+    iconType: 'duotone'
   },
   bulkCleanup: {
     title: 'Bulk Cleanup',
     iconName: 'retweet',
-    iconType: 'duotone',
-    iconSwapOpacity: true
+    iconType: 'duotone'
   },
   support: {
     title: 'Support',
     iconName: 'headset',
-    iconType: 'duotone',
-    iconSwapOpacity: true
+    iconType: 'duotone'
   },
   audit: {
     title: 'Audit',
     iconName: 'print-magnifying-glass',
-    iconType: 'duotone',
-    iconSwapOpacity: true
+    iconType: 'duotone'
   },
   timeline: {
     title: 'Timeline',
     iconName: 'timeline',
-    iconType: 'duotone',
-    iconSwapOpacity: true
+    iconType: 'duotone'
   },
   people: {
     title: 'People',
     iconName: 'people-group',
-    iconType: 'duotone',
-    iconSwapOpacity: true
+    iconType: 'duotone'
   },
   contacts: {
     title: 'Contacts',
     iconName: 'address-card',
-    iconType: 'duotone',
-    iconSwapOpacity: true
+    iconType: 'duotone'
   },
   contacts2: {
     title: 'Contacts',
     iconName: 'calendars',
-    iconType: 'duotone',
-    iconSwapOpacity: true
+    iconType: 'duotone'
   },
   contacts3: {
     title: 'Contacts',
     iconName: 'browser',
-    iconType: 'duotone',
-    iconSwapOpacity: true
+    iconType: 'duotone'
+  },
+  senseai: {
+    title: 'AI Copilot',
+    iconName: 'sparkles',
+    iconType: 'duotone'
   }
 });
 exports.MENU_NAME_LIST = MENU_NAME_LIST;
@@ -122,8 +111,8 @@ const SideMenuLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onChange
   } = _ref;
   const selected = selectedValue === pageNameKey;
-  const onChangeHandler = () => {
-    onChange && onChange(pageNameKey);
+  const onChangeHandler = e => {
+    onChange && onChange(e, pageNameKey);
   };
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_SideMenuLinkModule.default.linkWrapper, {

package/lib/components/SideMenuLink/SideMenuLink.js.flow

@@ -14,97 +14,86 @@ export const MENU_NAME_LIST = Object.freeze({
     title: 'Dashboard',
     iconName: 'house',
     iconType: 'duotone',
-    iconSwapOpacity: false,
   },
   engage: {
     title: 'Engage',
     iconName: 'bullseye-pointer',
     iconType: 'duotone',
-    iconSwapOpacity: false,
   },
   trm: {
     title: 'TRM',
     iconName: 'screen-users',
     iconType: 'duotone',
-    iconSwapOpacity: true,
   },
   analytics: {
     title: 'Analytics',
     iconName: 'chart-column',
     iconType: 'duotone',
-    iconSwapOpacity: true,
   },
   messaging: {
     title: 'Messaging',
     iconName: 'messages',
     iconType: 'duotone',
-    iconSwapOpacity: true,
   },
   chatbot: {
     title: 'Chatbot',
     iconName: 'message-bot',
     iconType: 'duotone',
-    iconSwapOpacity: true,
   },
   referrals: {
     title: 'Referrals',
     iconName: 'user-check',
     iconType: 'duotone',
-    iconSwapOpacity: true,
   },
   records: {
     title: 'Records',
     iconName: 'folder-open',
     iconType: 'duotone',
-    iconSwapOpacity: true,
   },
   bulkCleanup: {
     title: 'Bulk Cleanup',
     iconName: 'retweet',
     iconType: 'duotone',
-    iconSwapOpacity: true,
   },
   support: {
     title: 'Support',
     iconName: 'headset',
     iconType: 'duotone',
-    iconSwapOpacity: true,
   },
   audit: {
     title: 'Audit',
     iconName: 'print-magnifying-glass',
     iconType: 'duotone',
-    iconSwapOpacity: true,
   },
   timeline: {
     title: 'Timeline',
     iconName: 'timeline',
     iconType: 'duotone',
-    iconSwapOpacity: true,
   },
   people: {
     title: 'People',
     iconName: 'people-group',
     iconType: 'duotone',
-    iconSwapOpacity: true,
   },
   contacts: {
     title: 'Contacts',
     iconName: 'address-card',
     iconType: 'duotone',
-    iconSwapOpacity: true,
   },
   contacts2: {
     title: 'Contacts',
     iconName: 'calendars',
     iconType: 'duotone',
-    iconSwapOpacity: true,
   },
   contacts3: {
     title: 'Contacts',
     iconName: 'browser',
     iconType: 'duotone',
-    iconSwapOpacity: true,
+  },
+  senseai: {
+    title: 'AI Copilot',
+    iconName: 'sparkles',
+    iconType: 'duotone',
   },
 });
 
@@ -118,7 +107,7 @@ export type SideMenuLinkProps = {
   hovered?: boolean,
   selectedValue?: string,
   opened?: boolean,
-  onChange?: (newValue: string) => mixed,
+  onChange?: (e: SyntheticEvent<HTMLElement>, newValue: string) => mixed,
 };
 
 export const SideMenuLink: React$AbstractComponent<
@@ -137,8 +126,8 @@ export const SideMenuLink: React$AbstractComponent<
     ref,
   ): React.Node => {
     const selected = selectedValue === pageNameKey;
-    const onChangeHandler = () => {
-      onChange && onChange(pageNameKey);
+    const onChangeHandler = (e: SyntheticEvent<HTMLElement>) => {
+      onChange && onChange(e, pageNameKey);
     };
     return (
       <div

package/lib/components/Table/hooks.js

@@ -51,12 +51,14 @@ function useSortableEntries(entries, idName, _ref) {
     if (sortDirection === 'original') {
       return entries;
     }
-    const sortedDesc = (0, _sortBy.default)(entries, sortKey);
-    if (sortDirection === 'asc') {
-      return sortedDesc;
-    } else {
-      return sortedDesc.reverse();
-    }
+    const caseInsensitiveSortFunction = entry => {
+      if (typeof entry[sortKey] === 'string') {
+        return entry[sortKey].toLowerCase();
+      }
+      return entry[sortKey];
+    };
+    const sortedDesc = (0, _sortBy.default)(entries, caseInsensitiveSortFunction);
+    return sortDirection === 'asc' ? sortedDesc : sortedDesc.reverse();
   }, [sortDirection, sortKey, entries]);
   const sortedKeys = React.useMemo(() => sortedEntries.map(ent => (0, _get.default)(ent, idName)), [sortedEntries]);
   return {

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

@@ -69,12 +69,14 @@ export function useSortableEntries<T: GenericObject>(
     if (sortDirection === 'original') {
       return entries;
     }
-    const sortedDesc = sortBy(entries, sortKey);
-    if (sortDirection === 'asc') {
-      return sortedDesc;
-    } else {
-      return sortedDesc.reverse();
-    }
+    const caseInsensitiveSortFunction = (entry) => {
+      if (typeof entry[sortKey] === 'string') {
+        return entry[sortKey].toLowerCase();
+      }
+      return entry[sortKey];
+    };
+    const sortedDesc = sortBy(entries, caseInsensitiveSortFunction);
+    return sortDirection === 'asc' ? sortedDesc : sortedDesc.reverse();
   }, [sortDirection, sortKey, entries]);
 
   const sortedKeys = React.useMemo(

package/lib/components/Tooltip/Tooltip.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Tooltip = exports.DELAY_MOTION_DURATION_TYPES = void 0;
+exports.Tooltip = exports.ELEVATION_TYPES = exports.DELAY_MOTION_DURATION_TYPES = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _react2 = require("@floating-ui/react");
 var ELEVATION = _interopRequireWildcard(require("../../styles/variables/_elevation"));
@@ -26,6 +26,20 @@ const DELAY_MOTION_DURATION_TYPES = Object.freeze({
   slowest: 'slowest'
 });
 exports.DELAY_MOTION_DURATION_TYPES = DELAY_MOTION_DURATION_TYPES;
+const ELEVATION_TYPES = Object.freeze({
+  none: 'none',
+  card: 'card',
+  tooltip: 'tooltip',
+  menu: 'menu',
+  backdrop: 'backdrop',
+  modal: 'modal',
+  toast: 'toast'
+});
+exports.ELEVATION_TYPES = ELEVATION_TYPES;
+const getElevationValue = elevation => {
+  const elevationKey = 'elevation' + (0, _string.capitalize)(elevation);
+  return ELEVATION[elevationKey] || elevation;
+};
 const Tooltip = _ref => {
   let {
     classNames,
@@ -36,7 +50,7 @@ const Tooltip = _ref => {
     bodyMaxLines = 2,
     titleMaxLines = 1,
     delayMotionDuration = 'none',
-    elevation = ELEVATION['elevationTooltip'],
+    elevation = 'tooltip',
     hidden
   } = _ref;
   const [isOpen, setIsOpen] = React.useState(false);
@@ -80,7 +94,7 @@ const Tooltip = _ref => {
     style: {
       position: strategy,
       ...floatingStyles,
-      '--tooltip-elevation': elevation
+      '--tooltip-elevation': getElevationValue(elevation)
     }
   }, getFloatingProps()), !!title && /*#__PURE__*/React.createElement(_Truncate.Truncate, {
     line: titleMaxLines,

package/lib/components/Tooltip/Tooltip.js.flow

@@ -53,6 +53,18 @@ export type DelayMotionDurationType = $Values<
   typeof DELAY_MOTION_DURATION_TYPES,
 >;
 
+export const ELEVATION_TYPES = Object.freeze({
+  none: 'none',
+  card: 'card',
+  tooltip: 'tooltip',
+  menu: 'menu',
+  backdrop: 'backdrop',
+  modal: 'modal',
+  toast: 'toast',
+});
+
+export type ElevationType = $Values<typeof ELEVATION_TYPES>;
+
 export type PlacementType =
   | 'top'
   | 'top-start'
@@ -82,6 +94,11 @@ export type TooltipProps = {
   children: any,
 };
 
+const getElevationValue = (elevation: string): string => {
+  const elevationKey = 'elevation' + capitalize(elevation);
+  return ELEVATION[elevationKey] || elevation;
+};
+
 export const Tooltip = ({
   classNames,
   children,
@@ -91,7 +108,7 @@ export const Tooltip = ({
   bodyMaxLines = 2,
   titleMaxLines = 1,
   delayMotionDuration = 'none',
-  elevation = ELEVATION['elevationTooltip'],
+  elevation = 'tooltip',
   hidden,
 }: TooltipProps): React.Node => {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -151,7 +168,7 @@ export const Tooltip = ({
                 style={{
                   position: strategy,
                   ...floatingStyles,
-                  '--tooltip-elevation': elevation,
+                  '--tooltip-elevation': getElevationValue(elevation),
                 }}
                 {...getFloatingProps()}
               >

package/package.json

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