@spaced-out/ui-design-system 0.1.37-beta.1 → 0.1.37

package/lib/components/FocusManagerWithArrowKeyNavigation/FocusManagerWithArrowKeyNavigation.js

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SkipElementFromNavigation = exports.FocusManagerWithArrowKeyNavigation = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _react2 = require("@floating-ui/react");
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _makeClassNameComponent = require("../../utils/makeClassNameComponent");
+var _FocusManagerWithArrowKeyNavigationModule = _interopRequireDefault(require("./FocusManagerWithArrowKeyNavigation.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); }
+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 SKIP_ELEMENT_DISPLAY_NAME = 'SkipElementFromNavigation';
+const SkipElementFromNavigation = (0, _makeClassNameComponent.makeClassNameComponent)(_FocusManagerWithArrowKeyNavigationModule.default.skipElementWrapper);
+exports.SkipElementFromNavigation = SkipElementFromNavigation;
+SkipElementFromNavigation.displayName = SKIP_ELEMENT_DISPLAY_NAME;
+const FocusManagerWithArrowKeyNavigation = props => {
+  const {
+    classNames,
+    children,
+    initialFocus = -1,
+    orientation = 'vertical',
+    modal = false,
+    cols = 1,
+    ...restFloatingFocusManagerProps
+  } = props;
+  const {
+    refs,
+    context
+  } = (0, _react2.useFloating)({
+    open: true
+  });
+  const [activeIndex, setActiveIndex] = React.useState(null);
+  const listRef = React.useRef([]);
+  const childrenArray = React.Children.toArray(children).filter(Boolean);
+
+  // Note(Nishant): This is to correctly call the onClick handler which could have been on child
+  // we also need to set the active index correctly on click for list navigation to work
+  const childOnClickPassthrough = function (childOnClickHandler, index) {
+    if (childOnClickHandler) {
+      for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+        args[_key - 2] = arguments[_key];
+      }
+      childOnClickHandler(...args);
+    }
+    setActiveIndex(index);
+  };
+
+  // Note(Nishant): Force the list navigation props onto the children
+  // while using this component make sure your all the passed children have a focus state
+
+  let skippedChildrenCount = 0;
+  const clonedChildren = childrenArray.map((child, index) => {
+    const {
+      onClick: childClickHandler
+    } = child.props;
+    let adjustedIndex = index - skippedChildrenCount;
+    if (child?.type?.displayName === SKIP_ELEMENT_DISPLAY_NAME) {
+      skippedChildrenCount++;
+      adjustedIndex = null;
+    }
+    return /*#__PURE__*/React.cloneElement(child, {
+      ...child.props,
+      tabIndex: activeIndex === index ? 0 : -1,
+      ref: node => {
+        if (adjustedIndex !== null) {
+          listRef.current[adjustedIndex] = node;
+        }
+      },
+      onClick: function () {
+        for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+          args[_key2] = arguments[_key2];
+        }
+        childOnClickPassthrough(childClickHandler, adjustedIndex, ...args);
+      }
+    });
+  });
+  const listNavigation = (0, _react2.useListNavigation)(context, {
+    orientation,
+    cols,
+    listRef,
+    activeIndex,
+    onNavigate: setActiveIndex
+  });
+  const {
+    getFloatingProps
+  } = (0, _react2.useInteractions)([listNavigation]);
+  return /*#__PURE__*/React.createElement(_react2.FloatingFocusManager, _extends({
+    context: context,
+    modal: modal,
+    initialFocus: initialFocus
+  }, restFloatingFocusManagerProps), /*#__PURE__*/React.createElement("div", _extends({
+    ref: refs.setFloating,
+    "data-testid": "FocusManagerWithArrowKeyNavigation"
+  }, getFloatingProps(), {
+    className: (0, _classify.default)(_FocusManagerWithArrowKeyNavigationModule.default.wrapper, classNames?.wrapper)
+  }), clonedChildren));
+};
+exports.FocusManagerWithArrowKeyNavigation = FocusManagerWithArrowKeyNavigation;

package/lib/components/FocusManagerWithArrowKeyNavigation/FocusManagerWithArrowKeyNavigation.js.flow

@@ -0,0 +1,118 @@
+// @flow strict
+
+import * as React from 'react';
+import {
+  // $FlowFixMe[untyped-import]
+  FloatingFocusManager,
+  // $FlowFixMe[untyped-import]
+  useFloating,
+  // $FlowFixMe[untyped-import]
+  useInteractions,
+  // $FlowFixMe[untyped-import]
+  useListNavigation,
+} from '@floating-ui/react';
+
+import classify from '../../utils/classify';
+import type {ClassNameComponent} from '../../utils/makeClassNameComponent';
+import {makeClassNameComponent} from '../../utils/makeClassNameComponent';
+import type {FocusManagerProps} from '../FocusManager';
+
+import css from './FocusManagerWithArrowKeyNavigation.module.css';
+
+
+const SKIP_ELEMENT_DISPLAY_NAME = 'SkipElementFromNavigation';
+
+export const SkipElementFromNavigation: ClassNameComponent<'div'> =
+  makeClassNameComponent(css.skipElementWrapper);
+
+SkipElementFromNavigation.displayName = SKIP_ELEMENT_DISPLAY_NAME;
+
+export type FocusManagerWithListNavigationProps = {
+  ...FocusManagerProps,
+  cols?: number,
+  orientation?: 'horizontal' | 'vertical',
+};
+
+export const FocusManagerWithArrowKeyNavigation = (
+  props: FocusManagerWithListNavigationProps,
+): React.Node => {
+  const {
+    classNames,
+    children,
+    initialFocus = -1,
+    orientation = 'vertical',
+    modal = false,
+    cols = 1,
+    ...restFloatingFocusManagerProps
+  } = props;
+
+  const {refs, context} = useFloating({open: true});
+  const [activeIndex, setActiveIndex] = React.useState(null);
+  const listRef = React.useRef([]);
+  const childrenArray = React.Children.toArray(children).filter(Boolean);
+
+  // Note(Nishant): This is to correctly call the onClick handler which could have been on child
+  // we also need to set the active index correctly on click for list navigation to work
+  const childOnClickPassthrough = (childOnClickHandler, index, ...args) => {
+    if (childOnClickHandler) {
+      childOnClickHandler(...args);
+    }
+    setActiveIndex(index);
+  };
+
+  // Note(Nishant): Force the list navigation props onto the children
+  // while using this component make sure your all the passed children have a focus state
+
+  let skippedChildrenCount = 0;
+
+  const clonedChildren = childrenArray.map((child, index) => {
+    const {onClick: childClickHandler} = child.props;
+
+    let adjustedIndex = index - skippedChildrenCount;
+
+    if (child?.type?.displayName === SKIP_ELEMENT_DISPLAY_NAME) {
+      skippedChildrenCount++;
+      adjustedIndex = null;
+    }
+
+    return React.cloneElement(child, {
+      ...child.props,
+      tabIndex: activeIndex === index ? 0 : -1,
+      ref: (node) => {
+        if (adjustedIndex !== null) {
+          listRef.current[adjustedIndex] = node;
+        }
+      },
+      onClick: (...args) => {
+        childOnClickPassthrough(childClickHandler, adjustedIndex, ...args);
+      },
+    });
+  });
+
+  const listNavigation = useListNavigation(context, {
+    orientation,
+    cols,
+    listRef,
+    activeIndex,
+    onNavigate: setActiveIndex,
+  });
+  const {getFloatingProps} = useInteractions([listNavigation]);
+
+  return (
+    <FloatingFocusManager
+      context={context}
+      modal={modal}
+      initialFocus={initialFocus}
+      {...restFloatingFocusManagerProps}
+    >
+      <div
+        ref={refs.setFloating}
+        data-testid="FocusManagerWithArrowKeyNavigation"
+        {...getFloatingProps()}
+        className={classify(css.wrapper, classNames?.wrapper)}
+      >
+        {clonedChildren}
+      </div>
+    </FloatingFocusManager>
+  );
+};

package/lib/components/FocusManagerWithArrowKeyNavigation/FocusManagerWithArrowKeyNavigation.module.css

@@ -0,0 +1,7 @@
+.wrapper {
+  display: flex;
+}
+
+.skipElementWrapper {
+  display: flex;
+}

package/lib/components/FocusManagerWithArrowKeyNavigation/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _FocusManagerWithArrowKeyNavigation = require("./FocusManagerWithArrowKeyNavigation");
+Object.keys(_FocusManagerWithArrowKeyNavigation).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _FocusManagerWithArrowKeyNavigation[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _FocusManagerWithArrowKeyNavigation[key];
+    }
+  });
+});

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

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './FocusManagerWithArrowKeyNavigation';

package/lib/components/InlineDropdown/SimpleInlineDropdown.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SimpleInlineDropdown = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _menu = require("../../utils/menu");
+var _InlineDropdown = require("./InlineDropdown");
+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 SimpleInlineDropdownBase = (props, ref) => {
+  const {
+    size = 'medium',
+    classNames,
+    anchorPosition,
+    options,
+    optionsVariant,
+    allowSearch,
+    selectedKeys,
+    onOptionSelect,
+    onMenuOpen,
+    onMenuClose,
+    resolveLabel,
+    resolveSecondaryLabel,
+    children,
+    isFluid,
+    ...buttonProps
+  } = props;
+  const [btnText, setBtnText] = React.useState('');
+  const [inlineDropdownSelectedKeys, setInlineDropdownSelectedKeys] = React.useState(selectedKeys);
+  React.useEffect(() => {
+    const newBtnText = (0, _menu.getButtonLabelFromSelectedKeys)(selectedKeys, children);
+    setInlineDropdownSelectedKeys(selectedKeys);
+    setBtnText(newBtnText);
+  }, [selectedKeys]);
+  const handleOptionChange = selectedOption => {
+    let newSelectedKeys = [];
+    if (optionsVariant === 'checkbox') {
+      newSelectedKeys = (0, _menu.getSelectedKeysFromSelectedOption)(selectedOption, inlineDropdownSelectedKeys);
+    } else {
+      newSelectedKeys = [selectedOption.key];
+    }
+    const newBtnText = (0, _menu.getButtonLabelFromSelectedKeys)(newSelectedKeys, children);
+    setInlineDropdownSelectedKeys(newSelectedKeys);
+    setBtnText(newBtnText);
+    setTimeout(() => {
+      onOptionSelect?.(selectedOption);
+    });
+  };
+  React.useImperativeHandle(ref, () => ({
+    selectedKeys: inlineDropdownSelectedKeys
+  }));
+  return /*#__PURE__*/React.createElement(_InlineDropdown.InlineDropdown, _extends({}, buttonProps, {
+    anchorPosition: anchorPosition,
+    classNames: classNames,
+    size: size,
+    onOptionSelect: handleOptionChange,
+    onMenuOpen: onMenuOpen,
+    onMenuClose: onMenuClose,
+    menu: {
+      isFluid,
+      options,
+      selectedKeys: inlineDropdownSelectedKeys,
+      optionsVariant,
+      allowSearch,
+      resolveLabel,
+      resolveSecondaryLabel,
+      size: size === 'extraSmall' ? 'small' : size
+    }
+  }), optionsVariant === 'checkbox' ? btnText : children);
+};
+const SimpleInlineDropdown = /*#__PURE__*/React.forwardRef(SimpleInlineDropdownBase);
+exports.SimpleInlineDropdown = SimpleInlineDropdown;

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

@@ -0,0 +1,139 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {
+  getButtonLabelFromSelectedKeys,
+  getSelectedKeysFromSelectedOption,
+} from '../../utils/menu';
+import type {ButtonProps} from '../Button';
+import type {AnchorType} from '../ButtonDropdown';
+import type {MenuOption, MenuOptionsVariant} from '../Menu';
+
+import {InlineDropdown} from './InlineDropdown';
+
+
+type ClassNames = $ReadOnly<{
+  buttonWrapper?: string,
+  dropdownContainer?: string,
+}>;
+
+export type SimpleInlineDropdownRef = {
+  selectedKeys?: Array<string>,
+};
+
+export type SimpleInlineDropdownProps = {
+  // Input props
+  ...ButtonProps,
+
+  classNames?: ClassNames,
+  anchorPosition?: AnchorType,
+
+  // Menu props
+  options?: Array<MenuOption>,
+
+  optionsVariant?: MenuOptionsVariant,
+  allowSearch?: boolean,
+  selectedKeys?: Array<string>,
+
+  // events
+  onOptionSelect?: (option: MenuOption) => mixed,
+  onMenuOpen?: () => mixed,
+  onMenuClose?: () => mixed,
+
+  // Resolvers
+  resolveLabel?: (option: MenuOption) => string | React.Node,
+  resolveSecondaryLabel?: (option: MenuOption) => string | React.Node,
+  ...
+};
+
+const SimpleInlineDropdownBase = (props: SimpleInlineDropdownProps, ref) => {
+  const {
+    size = 'medium',
+    classNames,
+    anchorPosition,
+    options,
+    optionsVariant,
+    allowSearch,
+    selectedKeys,
+    onOptionSelect,
+    onMenuOpen,
+    onMenuClose,
+    resolveLabel,
+    resolveSecondaryLabel,
+    children,
+    isFluid,
+    ...buttonProps
+  } = props;
+
+  const [btnText, setBtnText] = React.useState('');
+  const [inlineDropdownSelectedKeys, setInlineDropdownSelectedKeys] =
+    React.useState(selectedKeys);
+
+  React.useEffect(() => {
+    const newBtnText = getButtonLabelFromSelectedKeys(selectedKeys, children);
+
+    setInlineDropdownSelectedKeys(selectedKeys);
+    setBtnText(newBtnText);
+  }, [selectedKeys]);
+
+  const handleOptionChange = (selectedOption: MenuOption) => {
+    let newSelectedKeys = [];
+
+    if (optionsVariant === 'checkbox') {
+      newSelectedKeys = getSelectedKeysFromSelectedOption(
+        selectedOption,
+        inlineDropdownSelectedKeys,
+      );
+    } else {
+      newSelectedKeys = [selectedOption.key];
+    }
+
+    const newBtnText = getButtonLabelFromSelectedKeys(
+      newSelectedKeys,
+      children,
+    );
+
+    setInlineDropdownSelectedKeys(newSelectedKeys);
+    setBtnText(newBtnText);
+
+    setTimeout(() => {
+      onOptionSelect?.(selectedOption);
+    });
+  };
+
+  React.useImperativeHandle(ref, () => ({
+    selectedKeys: inlineDropdownSelectedKeys,
+  }));
+
+  return (
+    <InlineDropdown
+      {...buttonProps}
+      anchorPosition={anchorPosition}
+      classNames={classNames}
+      size={size}
+      onOptionSelect={handleOptionChange}
+      onMenuOpen={onMenuOpen}
+      onMenuClose={onMenuClose}
+      menu={{
+        isFluid,
+        options,
+        selectedKeys: inlineDropdownSelectedKeys,
+        optionsVariant,
+        allowSearch,
+        resolveLabel,
+        resolveSecondaryLabel,
+        size: size === 'extraSmall' ? 'small' : size,
+      }}
+    >
+      {optionsVariant === 'checkbox' ? btnText : children}
+    </InlineDropdown>
+  );
+};
+
+export const SimpleInlineDropdown: React.AbstractComponent<
+  SimpleInlineDropdownProps,
+  SimpleInlineDropdownRef,
+> = React.forwardRef<SimpleInlineDropdownProps, SimpleInlineDropdownRef>(
+  SimpleInlineDropdownBase,
+);

package/lib/components/InlineDropdown/index.js

@@ -13,4 +13,15 @@ Object.keys(_InlineDropdown).forEach(function (key) {
       return _InlineDropdown[key];
     }
   });
+});
+var _SimpleInlineDropdown = require("./SimpleInlineDropdown");
+Object.keys(_SimpleInlineDropdown).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _SimpleInlineDropdown[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _SimpleInlineDropdown[key];
+    }
+  });
 });

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

@@ -1,3 +1,4 @@
 // @flow strict
 
 export * from './InlineDropdown';
+export * from './SimpleInlineDropdown';

package/lib/components/Menu/Menu.js

@@ -109,7 +109,8 @@ const Menu = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, allowSearch && /*#__PURE__*/React.createElement(_SearchInput.SearchInput, {
     value: searchText,
     onChange: e => setSearchText(e.target.value),
-    onClear: () => setSearchText('')
+    onClear: () => setSearchText(''),
+    size: size
   }), /*#__PURE__*/React.createElement(RenderOption, _extends({}, props, {
     searchText: searchText
   })));

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

@@ -27,8 +27,13 @@ type ClassNames = $ReadOnly<{
   optionTextLabel?: string,
 }>;
 
+type OptionClassNames = $ReadOnly<{
+  wrapper?: string,
+}>;
+
 export type MenuOption = {
   key: string,
+  classNames?: OptionClassNames,
   label?: string,
   secondaryLabel?: string,
   customComponent?: React.Node,
@@ -57,6 +62,12 @@ export type BaseMenuProps = {
   // the user navigates outside of the menu using the tab key.
   onTabOut?: () => mixed,
   allowSearch?: boolean,
+  // A function that resolves the label for a MenuOption.
+  // It takes a MenuOption as a parameter and returns either a string or a React Node.
+  resolveLabel?: (option: MenuOption) => string | React.Node,
+  // A function that resolves the secondaryLabel for a MenuOption.
+  // It takes a MenuOption as a parameter and returns either a string or a React Node.
+  resolveSecondaryLabel?: (option: MenuOption) => string | React.Node,
 };
 
 export type MenuOptionTypes = {
@@ -259,6 +270,7 @@ export const Menu: React$AbstractComponent<MenuProps, HTMLDivElement> =
               value={searchText}
               onChange={(e) => setSearchText(e.target.value)}
               onClear={() => setSearchText('')}
+              size={size}
             />
           )}
           <RenderOption {...props} searchText={searchText} />

package/lib/components/Menu/MenuOptionButton.js

@@ -28,7 +28,9 @@ const MenuOptionButton = props => {
     optionsVariant = 'normal',
     selectedKeys,
     isLastItem,
-    onTabOut
+    onTabOut,
+    resolveLabel,
+    resolveSecondaryLabel
   } = props;
   const {
     key,
@@ -37,6 +39,7 @@ const MenuOptionButton = props => {
     customComponent,
     iconLeft,
     iconLeftType,
+    classNames: optionClassNames,
     iconRight,
     iconRightType,
     disabled,
@@ -44,6 +47,8 @@ const MenuOptionButton = props => {
     optionVariant = optionsVariant
   } = option;
   const [buttonSize, setButtonSize] = React.useState(optionSize || size);
+  const resolvedLabel = resolveLabel ? resolveLabel(option) : label;
+  const resolvedSecondaryLabel = resolveSecondaryLabel ? resolveSecondaryLabel(option) : secondaryLabel;
   const isSelected = () => {
     if (!selectedKeys || !Array.isArray(selectedKeys) || !selectedKeys.length) {
       return false;
@@ -73,7 +78,7 @@ const MenuOptionButton = props => {
       [_MenuModule.default.disabled]: menuDisabled || disabled,
       [_MenuModule.default.withIconLeft]: !!iconLeft,
       [_MenuModule.default.withIconRight]: !!iconRight
-    }, classNames?.option),
+    }, classNames?.option, optionClassNames?.wrapper),
     disabled: menuDisabled || disabled,
     onClick: () => onSelect && onSelect(option),
     autoFocus: selectedOption?.key === key
@@ -97,9 +102,9 @@ 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, label)), !!secondaryLabel && /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(_Truncate.Truncate, null, resolvedLabel)), !!secondaryLabel && /*#__PURE__*/React.createElement("div", {
     className: _MenuModule.default.optionTextSecondaryLabel
-  }, /*#__PURE__*/React.createElement(_Truncate.Truncate, null, secondaryLabel))), !!iconRight && /*#__PURE__*/React.createElement(_Icon.Icon, {
+  }, /*#__PURE__*/React.createElement(_Truncate.Truncate, null, resolvedSecondaryLabel))), !!iconRight && /*#__PURE__*/React.createElement(_Icon.Icon, {
     name: iconRight,
     type: iconRightType,
     size: "small",

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

@@ -33,6 +33,8 @@ export const MenuOptionButton = (props: MenuOptionProps): React.Node => {
     selectedKeys,
     isLastItem,
     onTabOut,
+    resolveLabel,
+    resolveSecondaryLabel,
   } = props;
   const {
     key,
@@ -41,6 +43,7 @@ export const MenuOptionButton = (props: MenuOptionProps): React.Node => {
     customComponent,
     iconLeft,
     iconLeftType,
+    classNames: optionClassNames,
     iconRight,
     iconRightType,
     disabled,
@@ -48,6 +51,10 @@ export const MenuOptionButton = (props: MenuOptionProps): React.Node => {
     optionVariant = optionsVariant,
   } = option;
   const [buttonSize, setButtonSize] = React.useState(optionSize || size);
+  const resolvedLabel = resolveLabel ? resolveLabel(option) : label;
+  const resolvedSecondaryLabel = resolveSecondaryLabel
+    ? resolveSecondaryLabel(option)
+    : secondaryLabel;
   const isSelected = () => {
     if (!selectedKeys || !Array.isArray(selectedKeys) || !selectedKeys.length) {
       return false;
@@ -88,6 +95,7 @@ export const MenuOptionButton = (props: MenuOptionProps): React.Node => {
           [css.withIconRight]: !!iconRight,
         },
         classNames?.option,
+        optionClassNames?.wrapper,
       )}
       disabled={menuDisabled || disabled}
       onClick={() => onSelect && onSelect(option)}
@@ -132,13 +140,13 @@ export const MenuOptionButton = (props: MenuOptionProps): React.Node => {
               classNames?.optionTextLabel,
             )}
           >
-            <Truncate>{label}</Truncate>
+            <Truncate>{resolvedLabel}</Truncate>
           </div>
         )}
 
         {!!secondaryLabel && (
           <div className={css.optionTextSecondaryLabel}>
-            <Truncate>{secondaryLabel}</Truncate>
+            <Truncate>{resolvedSecondaryLabel}</Truncate>
           </div>
         )}
       </div>