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

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.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)
+
+
+### Bug Fixes
+
+* added tooltip truncation in menu and dropdown labels ([#320](https://github.com/spaced-out/ui-design-system/issues/320)) ([5fe291a](https://github.com/spaced-out/ui-design-system/commit/5fe291a1c9dfd1a5e2aca91336c7f24433f5cb9e))
+
 ### [0.3.26](https://github.com/spaced-out/ui-design-system/compare/v0.3.25...v0.3.26) (2025-03-05)
 
 

package/lib/components/ButtonDropdown/SimpleButtonDropdown.js

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

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

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 
-import type {MenuClassNames} from '../../types/menu';
+import type {MenuClassNames, MenuLabelTooltip} from '../../types/menu';
 import type {ClickAwayRefType} from '../../utils/click-away';
 import {
   getButtonLabelFromSelectedKeys,
@@ -43,7 +43,8 @@ export type SimpleButtonDropdownProps = {
   header?: React.Node,
   footer?: React.Node,
   menuClassNames?: MenuClassNames,
-
+  showLabelTooltip?: MenuLabelTooltip,
+  allowWrap?: boolean,
   // events
   onOptionSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
   onMenuOpen?: () => mixed,
@@ -76,6 +77,8 @@ const SimpleButtonDropdownBase = (props: SimpleButtonDropdownProps, ref) => {
     header,
     footer,
     menuClassNames,
+    showLabelTooltip,
+    allowWrap = false,
     clickAwayRef,
     ...buttonProps
   } = props;
@@ -144,6 +147,8 @@ const SimpleButtonDropdownBase = (props: SimpleButtonDropdownProps, ref) => {
         header,
         footer,
         classNames: menuClassNames,
+        showLabelTooltip,
+        allowWrap,
       }}
     >
       {optionsVariant === 'checkbox' ? btnText : children}

package/lib/components/Dropdown/SimpleDropdown.js

@@ -29,7 +29,9 @@ const SimpleDropdownBase = (props, ref) => {
     header,
     footer,
     menuClassNames,
+    showLabelTooltip,
     clickAwayRef,
+    allowWrap = false,
     ...inputProps
   } = props;
   const [dropdownInputText, setDropdownInputText] = React.useState('');
@@ -78,7 +80,9 @@ const SimpleDropdownBase = (props, ref) => {
       isFluid: isMenuFluid,
       header,
       footer,
-      classNames: menuClassNames
+      classNames: menuClassNames,
+      showLabelTooltip,
+      allowWrap
     }
   }));
 };

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

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 
-import type {MenuClassNames} from '../../types/menu';
+import type {MenuClassNames, MenuLabelTooltip} from '../../types/menu';
 import type {ClickAwayRefType} from '../../utils/click-away';
 import {
   getSelectedKeysFromSelectedOption,
@@ -40,6 +40,8 @@ export type SimpleDropdownProps = {
   header?: React.Node,
   footer?: React.Node,
   menuClassNames?: MenuClassNames,
+  showLabelTooltip?: MenuLabelTooltip,
+  allowWrap?: boolean,
 
   // events
   onChange?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
@@ -71,7 +73,9 @@ const SimpleDropdownBase = (props: SimpleDropdownProps, ref) => {
     header,
     footer,
     menuClassNames,
+    showLabelTooltip,
     clickAwayRef,
+    allowWrap = false,
     ...inputProps
   } = props;
 
@@ -140,6 +144,8 @@ const SimpleDropdownBase = (props: SimpleDropdownProps, ref) => {
         header,
         footer,
         classNames: menuClassNames,
+        showLabelTooltip,
+        allowWrap,
       }}
     />
   );

package/lib/components/InlineDropdown/SimpleInlineDropdown.js

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

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

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 
-import type {MenuClassNames} from '../../types/menu';
+import type {MenuClassNames, MenuLabelTooltip} from '../../types/menu';
 import type {ClickAwayRefType} from '../../utils/click-away';
 import {
   getButtonLabelFromSelectedKeys,
@@ -37,6 +37,8 @@ export type SimpleInlineDropdownProps = {
   optionsVariant?: MenuOptionsVariant,
   allowSearch?: boolean,
   selectedKeys?: Array<string>,
+  showLabelTooltip?: MenuLabelTooltip,
+  allowWrap?: boolean,
 
   // events
   onOptionSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
@@ -74,7 +76,9 @@ const SimpleInlineDropdownBase = (props: SimpleInlineDropdownProps, ref) => {
     header,
     footer,
     menuClassNames,
+    showLabelTooltip,
     clickAwayRef,
+    allowWrap = false,
     ...buttonProps
   } = props;
 
@@ -142,6 +146,8 @@ const SimpleInlineDropdownBase = (props: SimpleInlineDropdownProps, ref) => {
         header,
         footer,
         classNames: menuClassNames,
+        showLabelTooltip,
+        allowWrap,
       }}
     >
       {optionsVariant === 'checkbox' ? btnText : children}

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

@@ -3,7 +3,7 @@ import * as React from 'react';
 // $FlowIssue[nonstrict-import] react-window
 import {FixedSizeList} from 'react-window';
 
-import type {MenuClassNames} from '../../types/menu';
+import type {MenuClassNames, MenuLabelTooltip} from '../../types/menu';
 import {classify} from '../../utils/classify';
 import {
   getFilteredComposeOptionsFromSearchText,
@@ -83,6 +83,8 @@ export type BaseMenuProps = {
     RESULTS?: string,
     SEARCH_PLACEHOLDER?: string,
   },
+  showLabelTooltip?: MenuLabelTooltip,
+  allowWrap?: boolean,
 };
 
 export type MenuOptionTypes = {

package/lib/components/Menu/Menu.module.css

@@ -151,12 +151,12 @@
 }
 
 .optionSmall {
-  composes: buttonTextSmall from '../../styles/typography.module.css';
+  composes: menuTextSmall from '../../styles/typography.module.css';
   padding: spaceXSmall spaceSmall;
 }
 
 .optionMedium {
-  composes: buttonTextMedium from '../../styles/typography.module.css';
+  composes: menuTextMedium from '../../styles/typography.module.css';
   padding: spaceSmall spaceSmall;
 }
 
@@ -182,6 +182,11 @@
 .option:focus {
   outline: none;
   color: colorTextPrimary;
+}
+
+.option:focus-visible {
+  outline: none;
+  color: colorTextPrimary;
   box-shadow: inset borderWidthNone borderWidthNone borderWidthNone
     borderWidthTertiary colorFocusSecondary;
 }
@@ -189,8 +194,7 @@
 .option:focus-within {
   outline: none;
   color: colorTextPrimary;
-  box-shadow: inset borderWidthNone borderWidthNone borderWidthNone
-    borderWidthTertiary colorFocusSecondary;
+  /* box-shadow: none; */
 }
 
 .option.selected {

package/lib/components/Menu/MenuOptionButton.js

@@ -11,6 +11,7 @@ var _Checkbox = require("../Checkbox");
 var _Icon = require("../Icon");
 var _RadioButton = require("../RadioButton");
 var _Truncate = require("../Truncate");
+var _TruncatedTextWithTooltip = require("../TruncatedTextWithTooltip");
 var _MenuModule = _interopRequireDefault(require("./Menu.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); }
@@ -31,7 +32,9 @@ const MenuOptionButton = props => {
     onTabOut,
     resolveLabel,
     resolveSecondaryLabel,
-    style
+    style,
+    showLabelTooltip,
+    allowWrap = false
   } = props;
   const {
     key,
@@ -106,7 +109,7 @@ const MenuOptionButton = props => {
     className: (0, _classify.classify)(_MenuModule.default.optionTextContainer, classNames?.optionTextContainer)
   }, /*#__PURE__*/React.isValidElement(customComponent) ? customComponent : /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.classify)(_MenuModule.default.optionTextLabel, classNames?.optionTextLabel)
-  }, /*#__PURE__*/React.createElement(_Truncate.Truncate, null, resolvedLabel)), !!secondaryLabel && /*#__PURE__*/React.createElement("div", {
+  }, renderLabel(resolvedLabel, allowWrap, showLabelTooltip)), !!secondaryLabel && /*#__PURE__*/React.createElement("div", {
     className: _MenuModule.default.optionTextSecondaryLabel
   }, /*#__PURE__*/React.createElement(_Truncate.Truncate, null, resolvedSecondaryLabel))), !!iconRight && /*#__PURE__*/React.createElement(_Icon.Icon, {
     name: iconRight,
@@ -115,4 +118,25 @@ const MenuOptionButton = props => {
     className: (0, _classify.classify)(_MenuModule.default.icon, _MenuModule.default.rightIcon)
   }));
 };
-exports.MenuOptionButton = MenuOptionButton;
+exports.MenuOptionButton = MenuOptionButton;
+const renderLabel = (label, allowWrap, showLabelTooltip) => {
+  if (showLabelTooltip) {
+    return /*#__PURE__*/React.createElement(_TruncatedTextWithTooltip.TruncatedTextWithTooltip, {
+      tooltip: {
+        bodyMaxLines: showLabelTooltip.maxLines ?? 10,
+        delayMotionDuration: 'normal'
+      },
+      line: 3
+    }, label);
+  }
+  if (allowWrap) {
+    return /*#__PURE__*/React.createElement(_TruncatedTextWithTooltip.TruncatedTextWithTooltip, {
+      tooltip: {
+        bodyMaxLines: 10,
+        delayMotionDuration: 'normal'
+      },
+      line: 3
+    }, label);
+  }
+  return /*#__PURE__*/React.createElement(_Truncate.Truncate, null, label);
+};

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

@@ -7,6 +7,7 @@ import {Checkbox} from '../Checkbox';
 import {Icon} from '../Icon';
 import {RadioButton} from '../RadioButton';
 import {Truncate} from '../Truncate';
+import {TruncatedTextWithTooltip} from '../TruncatedTextWithTooltip';
 
 import type {BaseMenuProps, MenuOption} from './Menu';
 
@@ -37,6 +38,8 @@ export const MenuOptionButton = (props: MenuOptionProps): React.Node => {
     resolveLabel,
     resolveSecondaryLabel,
     style,
+    showLabelTooltip,
+    allowWrap = false,
   } = props;
   const {
     key,
@@ -145,7 +148,7 @@ export const MenuOptionButton = (props: MenuOptionProps): React.Node => {
               classNames?.optionTextLabel,
             )}
           >
-            <Truncate>{resolvedLabel}</Truncate>
+            {renderLabel(resolvedLabel, allowWrap, showLabelTooltip)}
           </div>
         )}
 
@@ -167,3 +170,32 @@ export const MenuOptionButton = (props: MenuOptionProps): React.Node => {
     </UnstyledButton>
   );
 };
+
+const renderLabel = (label, allowWrap, showLabelTooltip) => {
+  if (showLabelTooltip) {
+    return (
+      <TruncatedTextWithTooltip
+        tooltip={{
+          bodyMaxLines: showLabelTooltip.maxLines ?? 10,
+          delayMotionDuration: 'normal',
+        }}
+        line={3}
+      >
+        {label}
+      </TruncatedTextWithTooltip>
+    );
+  }
+
+  if (allowWrap) {
+    return (
+      <TruncatedTextWithTooltip
+        tooltip={{bodyMaxLines: 10, delayMotionDuration: 'normal'}}
+        line={3}
+      >
+        {label}
+      </TruncatedTextWithTooltip>
+    );
+  }
+
+  return <Truncate>{label}</Truncate>;
+};

package/lib/components/OptionButton/SimpleOptionButton.js

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

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

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 
-import type {MenuClassNames} from '../../types/menu';
+import type {MenuClassNames, MenuLabelTooltip} from '../../types/menu';
 import type {ClickAwayRefType} from '../../utils/click-away';
 import {getSelectedKeysFromSelectedOption} from '../../utils/menu';
 import type {ButtonProps} from '../Button';
@@ -45,7 +45,8 @@ export type SimpleOptionButtonProps = {
   header?: React.Node,
   footer?: React.Node,
   menuClassNames?: MenuClassNames,
-
+  showLabelTooltip?: MenuLabelTooltip,
+  allowWrap?: boolean,
   // events
   onOptionSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
   onButtonClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
@@ -81,7 +82,9 @@ const SimpleOptionButtonBase = (props: SimpleOptionButtonProps, ref) => {
     header,
     footer,
     menuClassNames,
+    showLabelTooltip,
     clickAwayRef,
+    allowWrap = false,
     ...buttonProps
   } = props;
 
@@ -141,6 +144,8 @@ const SimpleOptionButtonBase = (props: SimpleOptionButtonProps, ref) => {
         header,
         footer,
         classNames: menuClassNames,
+        showLabelTooltip,
+        allowWrap,
       }}
     >
       {children}

package/lib/components/Text/Text.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TitleMedium = exports.SubTitleSmall = exports.SubTitleMedium = exports.SubTitleLarge = exports.SubTitleExtraSmall = exports.JumboSmall = exports.JumboMedium = exports.JumboLarge = exports.FormLabelSmall = exports.FormLabelMedium = exports.FormInputSmall = exports.FormInputMedium = exports.ButtonTextSmallUnderline = exports.ButtonTextSmall = exports.ButtonTextMediumUnderline = exports.ButtonTextMedium = exports.ButtonTextExtraSmallUnderline = exports.ButtonTextExtraSmall = exports.BodySmallBold = exports.BodySmall = exports.BodyMediumBold = exports.BodyMedium = exports.BodyLargeBold = exports.BodyLarge = void 0;
+exports.TitleMedium = exports.SubTitleSmall = exports.SubTitleMedium = exports.SubTitleLarge = exports.SubTitleExtraSmall = exports.MenuTextSmall = exports.MenuTextMedium = exports.JumboSmall = exports.JumboMedium = exports.JumboLarge = exports.FormLabelSmall = exports.FormLabelMedium = exports.FormInputSmall = exports.FormInputMedium = exports.ButtonTextSmallUnderline = exports.ButtonTextSmall = exports.ButtonTextMediumUnderline = exports.ButtonTextMedium = exports.ButtonTextExtraSmallUnderline = exports.ButtonTextExtraSmall = exports.BodySmallBold = exports.BodySmall = exports.BodyMediumBold = exports.BodyMedium = exports.BodyLargeBold = exports.BodyLarge = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _typography = require("../../types/typography");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
@@ -269,7 +269,7 @@ const ButtonTextSmall = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
   }) : children);
 });
 exports.ButtonTextSmall = ButtonTextSmall;
-const ButtonTextExtraSmall = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
+const MenuTextMedium = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -280,6 +280,52 @@ const ButtonTextExtraSmall = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
     highlightWithBackground,
     ...props
   } = _ref12;
+  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+    className: (0, _classify.default)(_typographyModule.default.menuTextMedium, _typographyModule.default[color], className),
+    ref: ref
+  }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
+    text: children,
+    highlight: highlightString,
+    caseSensitiveHighlighting: caseSensitiveHighlighting,
+    highlightClassName: highlightedTextClassName,
+    highlightWithBackground: highlightWithBackground
+  }) : children);
+});
+exports.MenuTextMedium = MenuTextMedium;
+const MenuTextSmall = /*#__PURE__*/React.forwardRef((_ref13, ref) => {
+  let {
+    color = _typography.TEXT_COLORS.primary,
+    children,
+    className,
+    highlightedTextClassName,
+    highlightString,
+    caseSensitiveHighlighting,
+    highlightWithBackground,
+    ...props
+  } = _ref13;
+  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+    className: (0, _classify.default)(_typographyModule.default.menuTextSmall, _typographyModule.default[color], className),
+    ref: ref
+  }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
+    text: children,
+    highlight: highlightString,
+    caseSensitiveHighlighting: caseSensitiveHighlighting,
+    highlightClassName: highlightedTextClassName,
+    highlightWithBackground: highlightWithBackground
+  }) : children);
+});
+exports.MenuTextSmall = MenuTextSmall;
+const ButtonTextExtraSmall = /*#__PURE__*/React.forwardRef((_ref14, ref) => {
+  let {
+    color = _typography.TEXT_COLORS.primary,
+    children,
+    className,
+    highlightedTextClassName,
+    highlightString,
+    caseSensitiveHighlighting,
+    highlightWithBackground,
+    ...props
+  } = _ref14;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.buttonTextExtraSmall, _typographyModule.default[color], className),
     ref: ref
@@ -292,7 +338,7 @@ const ButtonTextExtraSmall = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
   }) : children);
 });
 exports.ButtonTextExtraSmall = ButtonTextExtraSmall;
-const ButtonTextMediumUnderline = /*#__PURE__*/React.forwardRef((_ref13, ref) => {
+const ButtonTextMediumUnderline = /*#__PURE__*/React.forwardRef((_ref15, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -302,7 +348,7 @@ const ButtonTextMediumUnderline = /*#__PURE__*/React.forwardRef((_ref13, ref) =>
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref13;
+  } = _ref15;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.buttonTextMedium, _typographyModule.default.underline, _typographyModule.default[color], className),
     ref: ref
@@ -315,7 +361,7 @@ const ButtonTextMediumUnderline = /*#__PURE__*/React.forwardRef((_ref13, ref) =>
   }) : children);
 });
 exports.ButtonTextMediumUnderline = ButtonTextMediumUnderline;
-const ButtonTextSmallUnderline = /*#__PURE__*/React.forwardRef((_ref14, ref) => {
+const ButtonTextSmallUnderline = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -325,7 +371,7 @@ const ButtonTextSmallUnderline = /*#__PURE__*/React.forwardRef((_ref14, ref) =>
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref14;
+  } = _ref16;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.buttonTextSmall, _typographyModule.default.underline, _typographyModule.default[color], className),
     ref: ref
@@ -338,7 +384,7 @@ const ButtonTextSmallUnderline = /*#__PURE__*/React.forwardRef((_ref14, ref) =>
   }) : children);
 });
 exports.ButtonTextSmallUnderline = ButtonTextSmallUnderline;
-const ButtonTextExtraSmallUnderline = /*#__PURE__*/React.forwardRef((_ref15, ref) => {
+const ButtonTextExtraSmallUnderline = /*#__PURE__*/React.forwardRef((_ref17, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -348,7 +394,7 @@ const ButtonTextExtraSmallUnderline = /*#__PURE__*/React.forwardRef((_ref15, ref
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref15;
+  } = _ref17;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.buttonTextExtraSmall, _typographyModule.default.underline, _typographyModule.default[color], className),
     ref: ref
@@ -361,7 +407,7 @@ const ButtonTextExtraSmallUnderline = /*#__PURE__*/React.forwardRef((_ref15, ref
   }) : children);
 });
 exports.ButtonTextExtraSmallUnderline = ButtonTextExtraSmallUnderline;
-const FormInputMedium = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
+const FormInputMedium = /*#__PURE__*/React.forwardRef((_ref18, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -371,7 +417,7 @@ const FormInputMedium = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref16;
+  } = _ref18;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.formInputMedium, _typographyModule.default[color], className),
     ref: ref
@@ -384,7 +430,7 @@ const FormInputMedium = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
   }) : children);
 });
 exports.FormInputMedium = FormInputMedium;
-const FormInputSmall = /*#__PURE__*/React.forwardRef((_ref17, ref) => {
+const FormInputSmall = /*#__PURE__*/React.forwardRef((_ref19, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -394,7 +440,7 @@ const FormInputSmall = /*#__PURE__*/React.forwardRef((_ref17, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref17;
+  } = _ref19;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.formInputSmall, _typographyModule.default[color], className),
     ref: ref
@@ -407,7 +453,7 @@ const FormInputSmall = /*#__PURE__*/React.forwardRef((_ref17, ref) => {
   }) : children);
 });
 exports.FormInputSmall = FormInputSmall;
-const BodyLarge = /*#__PURE__*/React.forwardRef((_ref18, ref) => {
+const BodyLarge = /*#__PURE__*/React.forwardRef((_ref20, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -417,7 +463,7 @@ const BodyLarge = /*#__PURE__*/React.forwardRef((_ref18, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref18;
+  } = _ref20;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.bodyLarge, _typographyModule.default[color], className),
     ref: ref
@@ -430,7 +476,7 @@ const BodyLarge = /*#__PURE__*/React.forwardRef((_ref18, ref) => {
   }) : children);
 });
 exports.BodyLarge = BodyLarge;
-const BodyMedium = /*#__PURE__*/React.forwardRef((_ref19, ref) => {
+const BodyMedium = /*#__PURE__*/React.forwardRef((_ref21, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -440,7 +486,7 @@ const BodyMedium = /*#__PURE__*/React.forwardRef((_ref19, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref19;
+  } = _ref21;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.bodyMedium, _typographyModule.default[color], className),
     ref: ref
@@ -453,7 +499,7 @@ const BodyMedium = /*#__PURE__*/React.forwardRef((_ref19, ref) => {
   }) : children);
 });
 exports.BodyMedium = BodyMedium;
-const BodySmall = /*#__PURE__*/React.forwardRef((_ref20, ref) => {
+const BodySmall = /*#__PURE__*/React.forwardRef((_ref22, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -463,7 +509,7 @@ const BodySmall = /*#__PURE__*/React.forwardRef((_ref20, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref20;
+  } = _ref22;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.bodySmall, _typographyModule.default[color], className),
     ref: ref
@@ -476,7 +522,7 @@ const BodySmall = /*#__PURE__*/React.forwardRef((_ref20, ref) => {
   }) : children);
 });
 exports.BodySmall = BodySmall;
-const BodyLargeBold = /*#__PURE__*/React.forwardRef((_ref21, ref) => {
+const BodyLargeBold = /*#__PURE__*/React.forwardRef((_ref23, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -486,7 +532,7 @@ const BodyLargeBold = /*#__PURE__*/React.forwardRef((_ref21, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref21;
+  } = _ref23;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.bodyLarge, _typographyModule.default.bold, _typographyModule.default[color], className),
     ref: ref
@@ -499,7 +545,7 @@ const BodyLargeBold = /*#__PURE__*/React.forwardRef((_ref21, ref) => {
   }) : children);
 });
 exports.BodyLargeBold = BodyLargeBold;
-const BodyMediumBold = /*#__PURE__*/React.forwardRef((_ref22, ref) => {
+const BodyMediumBold = /*#__PURE__*/React.forwardRef((_ref24, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -509,7 +555,7 @@ const BodyMediumBold = /*#__PURE__*/React.forwardRef((_ref22, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref22;
+  } = _ref24;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.bodyMedium, _typographyModule.default.bold, _typographyModule.default[color], className),
     ref: ref
@@ -522,7 +568,7 @@ const BodyMediumBold = /*#__PURE__*/React.forwardRef((_ref22, ref) => {
   }) : children);
 });
 exports.BodyMediumBold = BodyMediumBold;
-const BodySmallBold = /*#__PURE__*/React.forwardRef((_ref23, ref) => {
+const BodySmallBold = /*#__PURE__*/React.forwardRef((_ref25, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -532,7 +578,7 @@ const BodySmallBold = /*#__PURE__*/React.forwardRef((_ref23, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref23;
+  } = _ref25;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.bodySmall, _typographyModule.default.bold, _typographyModule.default[color], className),
     ref: ref
@@ -545,7 +591,7 @@ const BodySmallBold = /*#__PURE__*/React.forwardRef((_ref23, ref) => {
   }) : children);
 });
 exports.BodySmallBold = BodySmallBold;
-const FormLabelMedium = /*#__PURE__*/React.forwardRef((_ref24, ref) => {
+const FormLabelMedium = /*#__PURE__*/React.forwardRef((_ref26, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -555,7 +601,7 @@ const FormLabelMedium = /*#__PURE__*/React.forwardRef((_ref24, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref24;
+  } = _ref26;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.formLabelMedium, _typographyModule.default[color], className),
     ref: ref
@@ -568,7 +614,7 @@ const FormLabelMedium = /*#__PURE__*/React.forwardRef((_ref24, ref) => {
   }) : children);
 });
 exports.FormLabelMedium = FormLabelMedium;
-const FormLabelSmall = /*#__PURE__*/React.forwardRef((_ref25, ref) => {
+const FormLabelSmall = /*#__PURE__*/React.forwardRef((_ref27, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -578,7 +624,7 @@ const FormLabelSmall = /*#__PURE__*/React.forwardRef((_ref25, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref25;
+  } = _ref27;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.formLabelSmall, _typographyModule.default[color], className),
     ref: ref

package/lib/components/Text/Text.js.flow

@@ -452,6 +452,80 @@ export const ButtonTextSmall: React$AbstractComponent<
   ),
 );
 
+export const MenuTextMedium: React$AbstractComponent<
+  TextProps,
+  HTMLSpanElement,
+> = React.forwardRef<TextProps, HTMLSpanElement>(
+  (
+    {
+      color = TEXT_COLORS.primary,
+      children,
+      className,
+      highlightedTextClassName,
+      highlightString,
+      caseSensitiveHighlighting,
+      highlightWithBackground,
+      ...props
+    }: TextProps,
+    ref,
+  ): React.Node => (
+    <span
+      {...props}
+      className={classify(css.menuTextMedium, css[color], className)}
+      ref={ref}
+    >
+      {!!highlightString?.length && typeof children === 'string' ? (
+        <HighlightText
+          text={children}
+          highlight={highlightString}
+          caseSensitiveHighlighting={caseSensitiveHighlighting}
+          highlightClassName={highlightedTextClassName}
+          highlightWithBackground={highlightWithBackground}
+        />
+      ) : (
+        children
+      )}
+    </span>
+  ),
+);
+
+export const MenuTextSmall: React$AbstractComponent<
+  TextProps,
+  HTMLSpanElement,
+> = React.forwardRef<TextProps, HTMLSpanElement>(
+  (
+    {
+      color = TEXT_COLORS.primary,
+      children,
+      className,
+      highlightedTextClassName,
+      highlightString,
+      caseSensitiveHighlighting,
+      highlightWithBackground,
+      ...props
+    }: TextProps,
+    ref,
+  ): React.Node => (
+    <span
+      {...props}
+      className={classify(css.menuTextSmall, css[color], className)}
+      ref={ref}
+    >
+      {!!highlightString?.length && typeof children === 'string' ? (
+        <HighlightText
+          text={children}
+          highlight={highlightString}
+          caseSensitiveHighlighting={caseSensitiveHighlighting}
+          highlightClassName={highlightedTextClassName}
+          highlightWithBackground={highlightWithBackground}
+        />
+      ) : (
+        children
+      )}
+    </span>
+  ),
+);
+
 export const ButtonTextExtraSmall: React$AbstractComponent<
   TextProps,
   HTMLSpanElement,

package/lib/components/Text/index.js

@@ -117,6 +117,18 @@ Object.defineProperty(exports, "JumboSmall", {
     return _Text.JumboSmall;
   }
 });
+Object.defineProperty(exports, "MenuTextMedium", {
+  enumerable: true,
+  get: function () {
+    return _Text.MenuTextMedium;
+  }
+});
+Object.defineProperty(exports, "MenuTextSmall", {
+  enumerable: true,
+  get: function () {
+    return _Text.MenuTextSmall;
+  }
+});
 Object.defineProperty(exports, "SubTitleExtraSmall", {
   enumerable: true,
   get: function () {

package/lib/components/Text/index.js.flow

@@ -22,6 +22,8 @@ export {
   JumboLarge,
   JumboMedium,
   JumboSmall,
+  MenuTextMedium,
+  MenuTextSmall,
   SubTitleExtraSmall,
   SubTitleLarge,
   SubTitleMedium,

package/lib/components/Typeahead/SimpleTypeahead.js

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

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

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 
-import type {MenuClassNames} from '../../types/menu';
+import type {MenuClassNames, MenuLabelTooltip} from '../../types/menu';
 import type {ClickAwayRefType} from '../../utils/click-away';
 import {getTextLabelFromSelectedKeys} from '../../utils/menu';
 import type {InputProps} from '../Input';
@@ -36,6 +36,8 @@ export type SimpleTypeaheadProps = {
   header?: React.Node,
   footer?: React.Node,
   menuClassNames?: MenuClassNames,
+  showLabelTooltip?: MenuLabelTooltip,
+  allowWrap?: boolean,
 
   // events
   onSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
@@ -71,7 +73,9 @@ const SimpleTypeaheadBase = (props: SimpleTypeaheadProps, ref) => {
     footer,
     menuClassNames,
     clickAwayRef,
+    showLabelTooltip,
     allowInternalFilter = true,
+    allowWrap = false,
     ...inputProps
   } = props;
 
@@ -140,6 +144,8 @@ const SimpleTypeaheadBase = (props: SimpleTypeaheadProps, ref) => {
         header,
         footer,
         classNames: menuClassNames,
+        showLabelTooltip,
+        allowWrap,
       }}
       clickAwayRef={clickAwayRef}
     />

package/lib/styles/typography.module.css

@@ -137,6 +137,16 @@
   letter-spacing: fontLetterSpacing1;
 }
 
+.menuTextMedium {
+  composes: buttonTextMedium;
+  line-height: fontLineHeight130;
+}
+
+.menuTextSmall {
+  composes: buttonTextSmall;
+  letter-spacing: fontLineHeight130;
+}
+
 .formInputMedium {
   composes: baseType;
   font-size: fontSize14;

package/lib/types/menu.js.flow

@@ -9,3 +9,7 @@ export type MenuClassNames = $ReadOnly<{
   header?: string,
   footer?: string,
 }>;
+
+export type MenuLabelTooltip = {
+  maxLines?: number,
+};

package/package.json

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