@spaced-out/ui-design-system 0.1.108 → 0.1.110

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 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.110](https://github.com/spaced-out/ui-design-system/compare/v0.1.109...v0.1.110) (2024-07-12)
+
+
+### Bug Fixes
+
+* 🔢 prevents users from typing exponent characters in the number input field based on a prop ([#240](https://github.com/spaced-out/ui-design-system/issues/240)) ([db982e2](https://github.com/spaced-out/ui-design-system/commit/db982e2fbf754a57b778ee5b35de1dd39853bcda))
+
+### [0.1.109](https://github.com/spaced-out/ui-design-system/compare/v0.1.108...v0.1.109) (2024-07-11)
+
+
+### Features
+
+* 🆕 left and right icon support for link component through a conditional wrapper ([#239](https://github.com/spaced-out/ui-design-system/issues/239)) ([e1a4675](https://github.com/spaced-out/ui-design-system/commit/e1a4675c0852591a4ecbf00325dd91d3afead0d7))
+
+
+### Bug Fixes
+
+* menu classnames support in simple menu derivatives ([#238](https://github.com/spaced-out/ui-design-system/issues/238)) ([d1925d7](https://github.com/spaced-out/ui-design-system/commit/d1925d72c9a4e55b9344a2e5bb035e6de9cfcea6))
+
 ### [0.1.108](https://github.com/spaced-out/ui-design-system/compare/v0.1.107...v0.1.108) (2024-07-10)
 
 

package/lib/components/ButtonDropdown/SimpleButtonDropdown.js

@@ -29,6 +29,7 @@ const SimpleButtonDropdownBase = (props, ref) => {
     menuVirtualization,
     header,
     footer,
+    menuClassNames,
     clickAwayRef,
     ...buttonProps
   } = props;
@@ -76,7 +77,8 @@ const SimpleButtonDropdownBase = (props, ref) => {
       size,
       virtualization: menuVirtualization,
       header,
-      footer
+      footer,
+      classNames: menuClassNames
     }
   }), optionsVariant === 'checkbox' ? btnText : children);
 };

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

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 
+import type {MenuClassNames} from '../../types/menu';
 import type {ClickAwayRefType} from '../../utils/click-away';
 import {
   getButtonLabelFromSelectedKeys,
@@ -41,6 +42,7 @@ export type SimpleButtonDropdownProps = {
   menuVirtualization?: Virtualization,
   header?: React.Node,
   footer?: React.Node,
+  menuClassNames?: MenuClassNames,
 
   // events
   onOptionSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
@@ -73,6 +75,7 @@ const SimpleButtonDropdownBase = (props: SimpleButtonDropdownProps, ref) => {
     menuVirtualization,
     header,
     footer,
+    menuClassNames,
     clickAwayRef,
     ...buttonProps
   } = props;
@@ -140,6 +143,7 @@ const SimpleButtonDropdownBase = (props: SimpleButtonDropdownProps, ref) => {
         virtualization: menuVirtualization,
         header,
         footer,
+        classNames: menuClassNames,
       }}
     >
       {optionsVariant === 'checkbox' ? btnText : children}

package/lib/components/Dropdown/SimpleDropdown.js

@@ -28,6 +28,7 @@ const SimpleDropdownBase = (props, ref) => {
     isMenuFluid = true,
     header,
     footer,
+    menuClassNames,
     clickAwayRef,
     ...inputProps
   } = props;
@@ -76,7 +77,8 @@ const SimpleDropdownBase = (props, ref) => {
       size,
       isFluid: isMenuFluid,
       header,
-      footer
+      footer,
+      classNames: menuClassNames
     }
   }));
 };

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

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 
+import type {MenuClassNames} from '../../types/menu';
 import type {ClickAwayRefType} from '../../utils/click-away';
 import {
   getSelectedKeysFromSelectedOption,
@@ -38,6 +39,7 @@ export type SimpleDropdownProps = {
   menuVirtualization?: Virtualization,
   header?: React.Node,
   footer?: React.Node,
+  menuClassNames?: MenuClassNames,
 
   // events
   onChange?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
@@ -68,6 +70,7 @@ const SimpleDropdownBase = (props: SimpleDropdownProps, ref) => {
     isMenuFluid = true,
     header,
     footer,
+    menuClassNames,
     clickAwayRef,
     ...inputProps
   } = props;
@@ -136,6 +139,7 @@ const SimpleDropdownBase = (props: SimpleDropdownProps, ref) => {
         isFluid: isMenuFluid,
         header,
         footer,
+        classNames: menuClassNames,
       }}
     />
   );

package/lib/components/Icon/Icon.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Icon = exports.ICON_SIZE = void 0;
+exports.Icon = exports.ICON_TYPE = exports.ICON_SIZE = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _typography = require("../../types/typography");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
@@ -12,6 +12,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const ICON_TYPE = Object.freeze({
+  regular: 'regular',
+  solid: 'solid',
+  duotone: 'duotone',
+  brands: 'brands'
+});
+exports.ICON_TYPE = ICON_TYPE;
 const ICON_SIZE = Object.freeze({
   small: 'small',
   medium: 'medium',

package/lib/components/Icon/Icon.js.flow

@@ -9,7 +9,12 @@ import classify from '../../utils/classify';
 import typographyStyle from '../../styles/typography.module.css';
 
 
-export type IconType = 'regular' | 'solid' | 'duotone' | 'brands';
+export const ICON_TYPE = Object.freeze({
+  regular: 'regular',
+  solid: 'solid',
+  duotone: 'duotone',
+  brands: 'brands',
+});
 
 export const ICON_SIZE = Object.freeze({
   small: 'small',
@@ -18,6 +23,7 @@ export const ICON_SIZE = Object.freeze({
 });
 
 export type IconSize = $Keys<typeof ICON_SIZE>;
+export type IconType = $Keys<typeof ICON_TYPE>;
 
 export type IconProps = {
   type?: IconType,

package/lib/components/InlineDropdown/SimpleInlineDropdown.js

@@ -29,6 +29,7 @@ const SimpleInlineDropdownBase = (props, ref) => {
     menuVirtualization,
     header,
     footer,
+    menuClassNames,
     clickAwayRef,
     ...buttonProps
   } = props;
@@ -76,7 +77,8 @@ const SimpleInlineDropdownBase = (props, ref) => {
       size: size === 'extraSmall' ? 'small' : size,
       virtualization: menuVirtualization,
       header,
-      footer
+      footer,
+      classNames: menuClassNames
     }
   }), optionsVariant === 'checkbox' ? btnText : children);
 };

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

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 
+import type {MenuClassNames} from '../../types/menu';
 import type {ClickAwayRefType} from '../../utils/click-away';
 import {
   getButtonLabelFromSelectedKeys,
@@ -44,6 +45,7 @@ export type SimpleInlineDropdownProps = {
   menuVirtualization?: Virtualization,
   header?: React.Node,
   footer?: React.Node,
+  menuClassNames?: MenuClassNames,
 
   // Resolvers
   resolveLabel?: (option: MenuOption) => string | React.Node,
@@ -71,6 +73,7 @@ const SimpleInlineDropdownBase = (props: SimpleInlineDropdownProps, ref) => {
     menuVirtualization,
     header,
     footer,
+    menuClassNames,
     clickAwayRef,
     ...buttonProps
   } = props;
@@ -138,6 +141,7 @@ const SimpleInlineDropdownBase = (props: SimpleInlineDropdownProps, ref) => {
         virtualization: menuVirtualization,
         header,
         footer,
+        classNames: menuClassNames,
       }}
     >
       {optionsVariant === 'checkbox' ? btnText : children}

package/lib/components/Input/Input.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Input = exports.INPUT_TYPES = void 0;
+exports.Input = exports.INPUT_TYPES = exports.EXPONENT_CHARACTER_LIST = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = require("../../utils/classify");
 var _Icon = require("../Icon");
@@ -13,6 +13,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const EXPONENT_CHARACTER_LIST = ['E', 'e'];
+exports.EXPONENT_CHARACTER_LIST = EXPONENT_CHARACTER_LIST;
 const INPUT_TYPES = Object.freeze({
   text: 'text',
   number: 'number',
@@ -55,6 +57,8 @@ const Input_ = (props, ref) => {
     required,
     readOnly,
     boxRef,
+    onKeyDown,
+    disallowExponents,
     ...inputProps
   } = props;
   const [showPassword, setShowPassword] = React.useState(false);
@@ -68,6 +72,14 @@ const Input_ = (props, ref) => {
     }
     onIconRightClick && onIconRightClick(e);
   };
+  const handleKeyDown = e => {
+    if (type === INPUT_TYPES.number && disallowExponents) {
+      if (EXPONENT_CHARACTER_LIST.includes(e.key)) {
+        e.preventDefault();
+      }
+    }
+    onKeyDown?.(e);
+  };
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.classify)(_InputModule.default.wrapper, {
       [_InputModule.default.filled]: controlledInputFilled ?? false,
@@ -107,7 +119,8 @@ const Input_ = (props, ref) => {
     onFocus: onFocus,
     onBlur: onBlur,
     type: showPassword ? 'text' : type,
-    readOnly: readOnly && 'readOnly'
+    readOnly: readOnly && 'readOnly',
+    onKeyDown: handleKeyDown
   })), type === 'color' && /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.classify)(_InputModule.default.colorText, _InputModule.default[size], {
       [_InputModule.default.hasValue]: value

package/lib/components/Input/Input.js.flow

@@ -15,6 +15,8 @@ type ClassNames = $ReadOnly<{
   iconRight?: string,
 }>;
 
+export const EXPONENT_CHARACTER_LIST = ['E', 'e'];
+
 export const INPUT_TYPES = Object.freeze({
   text: 'text',
   number: 'number',
@@ -69,6 +71,11 @@ export type InputProps = {
   min?: string,
   max?: string,
   autoComplete?: string,
+  /* Note(Nishant): Restricts typing `e` and `E` in the number input when
+  set to true. We have baked this condition in the keydown handler itself so
+  this would restrict and not show these exponent characters when typed
+  **/
+  disallowExponents?: boolean,
   /** The step attribute is a number that specifies the granularity that the value must adhere to, or the special value any.
    * Only values which are equal to the basis for stepping (min if specified, value otherwise, and an
    * appropriate default value if neither of those is provided) are valid. */
@@ -102,6 +109,8 @@ const Input_ = (props: InputProps, ref): React.Node => {
     required,
     readOnly,
     boxRef,
+    onKeyDown,
+    disallowExponents,
     ...inputProps
   } = props;
 
@@ -121,6 +130,16 @@ const Input_ = (props: InputProps, ref): React.Node => {
     onIconRightClick && onIconRightClick(e);
   };
 
+  const handleKeyDown = (e: SyntheticKeyboardEvent<HTMLInputElement>) => {
+    if (type === INPUT_TYPES.number && disallowExponents) {
+      if (EXPONENT_CHARACTER_LIST.includes(e.key)) {
+        e.preventDefault();
+      }
+    }
+
+    onKeyDown?.(e);
+  };
+
   return (
     <div
       className={classify(css.wrapper, {
@@ -173,6 +192,7 @@ const Input_ = (props: InputProps, ref): React.Node => {
           onBlur={onBlur}
           type={showPassword ? 'text' : type}
           readOnly={readOnly && 'readOnly'}
+          onKeyDown={handleKeyDown}
         />
         {type === 'color' && (
           <div

package/lib/components/Link/Link.js

@@ -7,6 +7,8 @@ exports.Link = exports.LINK_AS = exports.ANCHOR_TARGET = exports.ANCHOR_REL = vo
 var React = _interopRequireWildcard(require("react"));
 var _typography = require("../../types/typography");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _ConditionalWrapper = require("../ConditionalWrapper");
+var _Icon = require("../Icon");
 var _typographyModule = _interopRequireDefault(require("../../styles/typography.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -65,6 +67,12 @@ const Link = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     disabled,
     onClick,
     linkComponent: LinkComponent = DefaultLink,
+    iconLeftName,
+    iconLeftSize = _Icon.ICON_SIZE.small,
+    iconLeftType,
+    iconRightName,
+    iconRightSize = _Icon.ICON_SIZE.small,
+    iconRightType,
     ...props
   } = _ref;
   const linkRef = React.useRef(null);
@@ -98,12 +106,29 @@ const Link = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     ref: linkRef,
     "data-testid": "Link",
     className: (0, _classify.default)(_typographyModule.default.link, _typographyModule.default[as], _typographyModule.default[color], {
-      [_typographyModule.default.underline]: underline,
+      [_typographyModule.default.underline]: underline && !(iconLeftName || iconRightName),
       [_typographyModule.default.disabled]: disabled
     }, className),
     onClick: handleClick,
     onKeyPress: handleKeyPress
-  }), children);
+  }), !!iconLeftName && /*#__PURE__*/React.createElement(_Icon.Icon, {
+    name: iconLeftName,
+    size: iconLeftSize,
+    type: iconLeftType,
+    className: _typographyModule.default[color]
+  }), /*#__PURE__*/React.createElement(_ConditionalWrapper.ConditionalWrapper, {
+    condition: Boolean(iconLeftName || iconRightName),
+    wrapper: children => /*#__PURE__*/React.createElement("span", {
+      className: (0, _classify.default)({
+        [_typographyModule.default.underline]: underline
+      })
+    }, children)
+  }, children), !!iconRightName && /*#__PURE__*/React.createElement(_Icon.Icon, {
+    name: iconRightName,
+    size: iconRightSize,
+    type: iconRightType,
+    className: _typographyModule.default[color]
+  }));
 });
 exports.Link = Link;
 const DefaultLink = /*#__PURE__*/React.forwardRef((_ref2, ref) => {

package/lib/components/Link/Link.js.flow

@@ -5,6 +5,9 @@ import * as React from 'react';
 import type {ColorTypes} from '../../types/typography';
 import {TEXT_COLORS} from '../../types/typography';
 import classify from '../../utils/classify';
+import {ConditionalWrapper} from '../ConditionalWrapper';
+import type {IconSize, IconType} from '../Icon';
+import {Icon, ICON_SIZE} from '../Icon';
 
 import css from '../../styles/typography.module.css';
 
@@ -66,6 +69,12 @@ export type BaseLinkProps = {
   as?: LinkAs,
   rel?: AnchorRel,
   target?: AnchorTarget,
+  iconLeftName?: string,
+  iconLeftSize?: IconSize,
+  iconLeftType?: IconType,
+  iconRightName?: string,
+  iconRightSize?: IconSize,
+  iconRightType?: IconType,
   /**
    * IMPORTANT: If you are using `to` make sure to provide link component from your router
    * if you want to prevent full page reloads in a Single Page Application (SPA).
@@ -114,6 +123,12 @@ export const Link: React$AbstractComponent<LinkProps, ?HTMLAnchorElement> =
         disabled,
         onClick,
         linkComponent: LinkComponent = DefaultLink,
+        iconLeftName,
+        iconLeftSize = ICON_SIZE.small,
+        iconLeftType,
+        iconRightName,
+        iconRightSize = ICON_SIZE.small,
+        iconRightType,
         ...props
       }: LinkProps,
       ref,
@@ -158,7 +173,7 @@ export const Link: React$AbstractComponent<LinkProps, ?HTMLAnchorElement> =
             css[as],
             css[color],
             {
-              [css.underline]: underline,
+              [css.underline]: underline && !(iconLeftName || iconRightName),
               [css.disabled]: disabled,
             },
             className,
@@ -166,7 +181,38 @@ export const Link: React$AbstractComponent<LinkProps, ?HTMLAnchorElement> =
           onClick={handleClick}
           onKeyPress={handleKeyPress}
         >
-          {children}
+          {!!iconLeftName && (
+            <Icon
+              name={iconLeftName}
+              size={iconLeftSize}
+              type={iconLeftType}
+              className={css[color]}
+            />
+          )}
+
+          <ConditionalWrapper
+            condition={Boolean(iconLeftName || iconRightName)}
+            wrapper={(children) => (
+              <span
+                className={classify({
+                  [css.underline]: underline,
+                })}
+              >
+                {children}
+              </span>
+            )}
+          >
+            {children}
+          </ConditionalWrapper>
+
+          {!!iconRightName && (
+            <Icon
+              name={iconRightName}
+              size={iconRightSize}
+              type={iconRightType}
+              className={css[color]}
+            />
+          )}
         </LinkComponent>
       );
     },

package/lib/components/Menu/Menu.js.flow

@@ -3,6 +3,7 @@ import * as React from 'react';
 // $FlowIssue[nonstrict-import] react-window
 import {FixedSizeList} from 'react-window';
 
+import type {MenuClassNames} from '../../types/menu';
 import {classify} from '../../utils/classify';
 import {
   getFilteredComposeOptionsFromSearchText,
@@ -21,13 +22,7 @@ import {MenuOptionButton} from './MenuOptionButton';
 import css from './Menu.module.css';
 
 
-type ClassNames = $ReadOnly<{
-  wrapper?: string,
-  option?: string,
-  groupTitle?: string,
-  optionTextContainer?: string,
-  optionTextLabel?: string,
-}>;
+type ClassNames = MenuClassNames;
 
 type OptionClassNames = $ReadOnly<{
   wrapper?: string,

package/lib/components/OptionButton/SimpleOptionButton.js

@@ -31,6 +31,7 @@ const SimpleOptionButtonBase = (props, ref) => {
     menuVirtualization,
     header,
     footer,
+    menuClassNames,
     clickAwayRef,
     ...buttonProps
   } = props;
@@ -75,7 +76,8 @@ const SimpleOptionButtonBase = (props, ref) => {
       size: menuSize,
       virtualization: menuVirtualization,
       header,
-      footer
+      footer,
+      classNames: menuClassNames
     }
   }), children);
 };

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

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 
+import type {MenuClassNames} from '../../types/menu';
 import type {ClickAwayRefType} from '../../utils/click-away';
 import {getSelectedKeysFromSelectedOption} from '../../utils/menu';
 import type {ButtonProps} from '../Button';
@@ -43,6 +44,7 @@ export type SimpleOptionButtonProps = {
   menuVirtualization?: Virtualization,
   header?: React.Node,
   footer?: React.Node,
+  menuClassNames?: MenuClassNames,
 
   // events
   onOptionSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
@@ -78,6 +80,7 @@ const SimpleOptionButtonBase = (props: SimpleOptionButtonProps, ref) => {
     menuVirtualization,
     header,
     footer,
+    menuClassNames,
     clickAwayRef,
     ...buttonProps
   } = props;
@@ -137,6 +140,7 @@ const SimpleOptionButtonBase = (props: SimpleOptionButtonProps, ref) => {
         virtualization: menuVirtualization,
         header,
         footer,
+        classNames: menuClassNames,
       }}
     >
       {children}

package/lib/components/Typeahead/SimpleTypeahead.js

@@ -27,6 +27,7 @@ const SimpleTypeaheadBase = (props, ref) => {
     menuVirtualization,
     header,
     footer,
+    menuClassNames,
     clickAwayRef,
     ...inputProps
   } = props;
@@ -75,7 +76,8 @@ const SimpleTypeaheadBase = (props, ref) => {
       size,
       virtualization: menuVirtualization,
       header,
-      footer
+      footer,
+      classNames: menuClassNames
     },
     clickAwayRef: clickAwayRef
   }));

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

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 
+import type {MenuClassNames} from '../../types/menu';
 import type {ClickAwayRefType} from '../../utils/click-away';
 import {getTextLabelFromSelectedKeys} from '../../utils/menu';
 import type {InputProps} from '../Input';
@@ -34,6 +35,7 @@ export type SimpleTypeaheadProps = {
   menuVirtualization?: Virtualization,
   header?: React.Node,
   footer?: React.Node,
+  menuClassNames?: MenuClassNames,
 
   // events
   onSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
@@ -66,6 +68,7 @@ const SimpleTypeaheadBase = (props: SimpleTypeaheadProps, ref) => {
     menuVirtualization,
     header,
     footer,
+    menuClassNames,
     clickAwayRef,
     ...inputProps
   } = props;
@@ -133,6 +136,7 @@ const SimpleTypeaheadBase = (props: SimpleTypeaheadProps, ref) => {
         virtualization: menuVirtualization,
         header,
         footer,
+        classNames: menuClassNames,
       }}
       clickAwayRef={clickAwayRef}
     />

package/lib/styles/typography.module.css

@@ -47,7 +47,7 @@
 
 @value (size36, size24, size18) from 'variables/_size.css';
 
-@value (spaceXXSmall, spaceNone) from 'variables/_space.css';
+@value (spaceXSmall, spaceXXSmall, spaceNone) from 'variables/_space.css';
 
 @value (borderWidthNone, borderWidthTertiary, borderRadiusXSmall) from 'variables/_border.css';
 
@@ -293,6 +293,7 @@
   border-radius: calc(borderRadiusXSmall / 2);
   cursor: pointer;
   width: fit-content;
+  gap: spaceXSmall;
 }
 
 .underline {

package/lib/types/index.js

@@ -25,6 +25,17 @@ Object.keys(_common).forEach(function (key) {
     }
   });
 });
+var _menu = require("./menu");
+Object.keys(_menu).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _menu[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _menu[key];
+    }
+  });
+});
 var _toast = require("./toast");
 Object.keys(_toast).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/types/index.js.flow

@@ -2,5 +2,6 @@
 
 export * from './charts';
 export * from './common';
+export * from './menu';
 export * from './toast';
 export * from './typography';

package/lib/types/menu.js.flow

@@ -0,0 +1,9 @@
+// @flow strict
+
+export type MenuClassNames = $ReadOnly<{
+  wrapper?: string,
+  option?: string,
+  groupTitle?: string,
+  optionTextContainer?: string,
+  optionTextLabel?: string,
+}>;

package/package.json

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