@leafygreen-ui/combobox 12.2.1 → 12.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafygreen-ui/combobox",
-  "version": "12.2.1",
+  "version": "12.4.0",
   "description": "leafyGreen UI Kit Combobox",
   "main": "./dist/umd/index.js",
   "module": "./dist/esm/index.js",
@@ -13,26 +13,27 @@
     "chalk": "^4.1.2",
     "lodash": "^4.17.21",
     "polished": "^4.2.2",
-    "@leafygreen-ui/emotion": "^5.1.0",
-    "@leafygreen-ui/chip": "^4.0.9",
-    "@leafygreen-ui/form-field": "^4.0.7",
+    "@leafygreen-ui/checkbox": "^18.1.4",
+    "@leafygreen-ui/chip": "^4.2.0",
+    "@leafygreen-ui/emotion": "^5.2.0",
+    "@leafygreen-ui/form-field": "^4.0.8",
     "@leafygreen-ui/hooks": "^9.3.0",
-    "@leafygreen-ui/icon-button": "^17.1.3",
-    "@leafygreen-ui/checkbox": "^18.1.3",
-    "@leafygreen-ui/icon": "^14.7.0",
-    "@leafygreen-ui/input-option": "^4.1.3",
+    "@leafygreen-ui/icon": "^14.8.0",
+    "@leafygreen-ui/icon-button": "^17.1.4",
+    "@leafygreen-ui/input-option": "^4.1.4",
+    "@leafygreen-ui/lib": "^15.7.0",
     "@leafygreen-ui/palette": "^5.0.2",
     "@leafygreen-ui/popover": "^14.3.1",
-    "@leafygreen-ui/tokens": "^4.0.0",
-    "@leafygreen-ui/lib": "^15.6.2",
-    "@leafygreen-ui/typography": "^22.2.2"
+    "@leafygreen-ui/tokens": "^4.2.1",
+    "@leafygreen-ui/typography": "^22.2.3"
   },
   "peerDependencies": {
     "@leafygreen-ui/leafygreen-provider": "^5.0.0 || ^4.0.0 || ^3.2.0"
   },
   "devDependencies": {
-    "@lg-tools/build": "^0.8.3",
-    "@leafygreen-ui/button": "^25.1.3"
+    "@leafygreen-ui/badge": "^10.2.3",
+    "@leafygreen-ui/button": "^25.2.0",
+    "@lg-tools/build": "^0.9.0"
   },
   "homepage": "https://github.com/mongodb/leafygreen-ui/tree/main/packages/combobox",
   "repository": {

package/src/Combobox/Combobox.spec.tsx

@@ -1,9 +1,10 @@
 /* eslint-disable jest/no-standalone-expect */
 /* eslint jest/expect-expect: ["error", { "assertFunctionNames": ["expect", "expectSelection"] }] */
-import { createRef } from 'react';
+import React, { createRef } from 'react';
 import {
   act,
   queryByText,
+  render,
   waitFor,
   waitForElementToBeRemoved,
 } from '@testing-library/react';
@@ -12,6 +13,7 @@ import { axe } from 'jest-axe';
 import flatten from 'lodash/flatten';
 import isUndefined from 'lodash/isUndefined';
 
+import { Badge } from '@leafygreen-ui/badge';
 import { RenderMode } from '@leafygreen-ui/popover';
 import { eventContainingTargetValue } from '@leafygreen-ui/testing-lib';
 
@@ -25,6 +27,7 @@ import {
   Select,
   testif,
 } from '../utils/ComboboxTestUtils';
+import { Combobox, ComboboxOption } from '..';
 
 /**
  * Tests
@@ -262,7 +265,9 @@ describe('packages/combobox', () => {
         const { optionElements } = openMenu();
         // Note on `foo!` operator https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator
         Array.from(optionElements!).forEach((optionEl, index) => {
-          expect(optionEl).toHaveTextContent(defaultOptions[index].displayName);
+          expect(optionEl).toHaveTextContent(
+            defaultOptions[index].displayName as string,
+          );
         });
       });
 
@@ -275,6 +280,49 @@ describe('packages/combobox', () => {
         expect(optionEl).toHaveTextContent('abc-def');
       });
 
+      test('Option aria-label falls back to displayName text content', () => {
+        const options: Array<OptionObject> = [
+          {
+            value: 'react-node-option',
+            displayName: (
+              <span>
+                <strong>Bold</strong> and <em>italic</em> text
+              </span>
+            ),
+            isDisabled: false,
+          },
+        ];
+        const { openMenu } = renderCombobox(select, { options });
+        const { optionElements } = openMenu();
+        const [optionEl] = Array.from(optionElements!);
+        expect(optionEl).toHaveAttribute('aria-label', 'Bold and italic text');
+      });
+
+      test('Option aria-label falls back to value when displayName is not provided', () => {
+        const options = [{ value: 'fallback-value' }];
+        /// @ts-expect-error `options` will not match the expected type
+        const { openMenu } = renderCombobox(select, { options });
+        const { optionElements } = openMenu();
+        const [optionEl] = Array.from(optionElements!);
+        expect(optionEl).toHaveAttribute('aria-label', 'fallback-value');
+      });
+
+      test('Option uses explicit aria-label prop when provided', () => {
+        const { getByRole, queryByRole } = render(
+          <Combobox label="Test" multiselect={select === 'multiple'}>
+            <ComboboxOption
+              value="test-value"
+              displayName="Display Name"
+              aria-label="Custom aria label"
+            />
+          </Combobox>,
+        );
+        userEvent.click(getByRole('combobox'));
+        const listbox = queryByRole('listbox');
+        const optionEl = listbox?.getElementsByTagName('li')[0];
+        expect(optionEl).toHaveAttribute('aria-label', 'Custom aria label');
+      });
+
       test('Options with long names are rendered with the full text', () => {
         const displayName = `Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur.`;
         const options: Array<OptionObject> = [
@@ -367,7 +415,9 @@ describe('packages/combobox', () => {
             groupedOptions.map(({ children }: NestedObject) => children),
           ).forEach((option: OptionObject | string) => {
             const displayName =
-              typeof option === 'string' ? option : option.displayName;
+              typeof option === 'string'
+                ? option
+                : (option.displayName as string);
             const optionEl = queryByText(menuContainerEl!, displayName);
             expect(optionEl).toBeInTheDocument();
           });

package/src/Combobox/Combobox.tsx

@@ -34,7 +34,12 @@ import LeafyGreenProvider, {
   PopoverPropsProvider,
   useDarkMode,
 } from '@leafygreen-ui/leafygreen-provider';
-import { consoleOnce, isComponentType, keyMap } from '@leafygreen-ui/lib';
+import {
+  consoleOnce,
+  getNodeTextContent,
+  isComponentType,
+  keyMap,
+} from '@leafygreen-ui/lib';
 import {
   DismissMode,
   getPopoverRenderModeProps,
@@ -324,7 +329,7 @@ export function Combobox<M extends boolean>({
           ? getDisplayNameForValue(value, allOptions)
           : option.displayName;
 
-      const isValueInDisplayName = displayName
+      const isValueInDisplayName = getNodeTextContent(displayName)
         .toLowerCase()
         .includes(inputValue.toLowerCase());
 
@@ -718,6 +723,7 @@ export function Combobox<M extends boolean>({
     if (isMultiselect(selection)) {
       return selection.filter(isValueValid).map((value, index) => {
         const displayName = getDisplayNameForValue(value, allOptions);
+        const displayNameContent = getNodeTextContent(displayName);
         const isFocused = focusedChip === value;
         const chipRef = getChipRef(value);
         const isLastChip = index >= selection.length - 1;
@@ -740,7 +746,7 @@ export function Combobox<M extends boolean>({
         return (
           <ComboboxChip
             key={value}
-            displayName={displayName}
+            displayName={displayNameContent}
             isFocused={isFocused}
             onRemove={onRemove}
             onFocus={onFocus}
@@ -793,7 +799,7 @@ export function Combobox<M extends boolean>({
             selection as SelectValueType<false>,
             allOptions,
           ) ?? prevSelection;
-        updateInputValue(displayName);
+        updateInputValue(getNodeTextContent(displayName));
       }
     }
   }, [
@@ -821,7 +827,7 @@ export function Combobox<M extends boolean>({
             selection as SelectValueType<false>,
             allOptions,
           ) ?? '';
-        updateInputValue(displayName);
+        updateInputValue(getNodeTextContent(displayName));
         closeMenu();
       }
     } else {

package/src/Combobox/Combobox.types.ts

@@ -2,7 +2,7 @@ import React, { ReactNode } from 'react';
 
 import { type ChipProps } from '@leafygreen-ui/chip';
 import { Either } from '@leafygreen-ui/lib';
-import { PopoverProps } from '@leafygreen-ui/popover';
+import { PopoverProps, RenderMode } from '@leafygreen-ui/popover';
 
 import {
   ComboboxSize,
@@ -14,6 +14,8 @@ import {
   State,
 } from '../types';
 
+export { RenderMode };
+
 /**
  * Combobox Props
  */

package/src/Combobox/index.ts

@@ -3,4 +3,5 @@ export {
   type BaseComboboxProps,
   type ComboboxMultiselectProps,
   type ComboboxProps,
+  RenderMode,
 } from './Combobox.types';

package/src/Combobox.stories.tsx

@@ -5,7 +5,7 @@ import {
   type StoryMetaType,
   StoryType,
 } from '@lg-tools/storybook-utils';
-import { StoryFn } from '@storybook/react';
+import { StoryContext, StoryFn } from '@storybook/react';
 import { userEvent, within } from '@storybook/test';
 
 import { Button } from '@leafygreen-ui/button';
@@ -150,15 +150,15 @@ const meta: StoryMetaType<typeof Combobox> = {
 
 export default meta;
 
-export const LiveExample: StoryFn<ComboboxProps<boolean>> = (
-  args: ComboboxProps<boolean>,
-) => {
+export const LiveExample: StoryFn<ComboboxProps<boolean>> = args => {
   return (
     <>
       {/* Since Combobox doesn't fully refresh when `multiselect` changes, we need to explicitly render a different instance */}
       {args.multiselect ? (
+        // @ts-ignore - multiselect check ensures props match ComboboxProps<true>
         <Combobox key="multi" {...args} multiselect={true} />
       ) : (
+        // @ts-ignore - multiselect check ensures props match ComboboxProps<false>
         <Combobox key="single" {...args} multiselect={false} />
       )}
     </>
@@ -265,6 +265,7 @@ export const MultiSelectNoIcons: StoryFn<ComboboxProps<boolean>> = (
   args: ComboboxProps<boolean>,
 ) => {
   return (
+    // @ts-expect-error - args will have multiselect=true from storybook controls
     <Combobox {...args} multiselect={true}>
       {getComboboxOptions(false)}
     </Combobox>
@@ -299,20 +300,20 @@ export const InitialLongComboboxOpen = {
       </Combobox>
     );
   },
-  play: async ctx => {
+  play: async (ctx: StoryContext) => {
     const { findByRole } = within(ctx.canvasElement.parentElement!);
     const trigger = await findByRole('combobox');
     userEvent.click(trigger);
   },
   decorators: [
-    (StoryFn, _ctx) => (
+    (Story: StoryFn, _ctx: StoryContext) => (
       <div
         className={css`
           height: 100vh;
           padding: 0;
         `}
       >
-        <StoryFn />
+        <Story />
       </div>
     ),
   ],

package/src/ComboboxOption/ComboboxOption.stories.tsx

@@ -1,8 +1,11 @@
 import React from 'react';
 import { StoryMetaType, StoryType } from '@lg-tools/storybook-utils';
 
+import { Badge } from '@leafygreen-ui/badge';
+import { css } from '@leafygreen-ui/emotion';
 import { Icon } from '@leafygreen-ui/icon';
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
+import { spacing } from '@leafygreen-ui/tokens';
 
 import { ComboboxContext, defaultContext } from '../ComboboxContext';
 
@@ -14,7 +17,12 @@ const meta: StoryMetaType<typeof InternalComboboxOption> = {
   parameters: {
     default: null,
     generate: {
-      storyNames: ['WithIcons', 'WithoutIcons', 'WithoutIconsAndMultiStep'],
+      storyNames: [
+        'WithIcons',
+        'WithoutIcons',
+        'WithoutIconsAndMultiStep',
+        'WithIconsAndCustomDisplayName',
+      ],
       combineArgs: {
         darkMode: [false, true],
         description: [undefined, 'This is a description'],
@@ -67,6 +75,32 @@ WithIcons.parameters = {
   },
 };
 
+export const WithIconsAndCustomDisplayName: StoryType<
+  typeof InternalComboboxOption
+> = () => <></>;
+WithIconsAndCustomDisplayName.parameters = {
+  generate: {
+    args: {
+      displayName: (
+        <div
+          className={css`
+            display: flex;
+            align-items: center;
+            gap: ${spacing[100]}px;
+            margin-bottom: ${spacing[100]}px;
+          `}
+        >
+          <span>Option</span>
+          <Badge variant="green">New</Badge>
+        </div>
+      ),
+      /// @ts-expect-error - withIcons is not a component prop
+      withIcons: true,
+      glyph: <Icon glyph="Cloud" />,
+    },
+  },
+};
+
 export const WithoutIconsAndMultiStep: StoryType<
   typeof InternalComboboxOption
 > = () => <></>;

package/src/ComboboxOption/ComboboxOption.styles.ts

@@ -1,4 +1,4 @@
-import { css } from '@leafygreen-ui/emotion';
+import { css, cx } from '@leafygreen-ui/emotion';
 import { leftGlyphClassName } from '@leafygreen-ui/input-option';
 import {
   descriptionClassName,
@@ -50,8 +50,16 @@ export const disallowPointer = css`
   pointer-events: none;
 `;
 
-export const displayNameStyle = (isSelected: boolean) => css`
-  font-weight: ${isSelected ? fontWeights.semiBold : fontWeights.regular};
+const inputOptionBaseStyles = css`
+  .${titleClassName} {
+    font-weight: ${fontWeights.regular};
+  }
+`;
+
+const selectedInputOptionStyles = css`
+  .${titleClassName} {
+    font-weight: ${fontWeights.semiBold};
+  }
 `;
 
 export const iconThemeStyles: Record<Theme, string> = {
@@ -113,3 +121,26 @@ export const multiselectIconLargePosition = css`
     top: 3px;
   }
 `;
+
+export const getInputOptionStyles = ({
+  size,
+  isMultiselectWithoutIcons,
+  isSelected,
+  className,
+}: {
+  size: ComboboxSize;
+  isMultiselectWithoutIcons: boolean;
+  isSelected: boolean;
+  className?: string;
+}) =>
+  cx(
+    inputOptionBaseStyles,
+    {
+      [selectedInputOptionStyles]: isSelected,
+      [largeStyles]: size === ComboboxSize.Large,
+      [multiselectIconPosition]: isMultiselectWithoutIcons,
+      [multiselectIconLargePosition]:
+        isMultiselectWithoutIcons && size === ComboboxSize.Large,
+    },
+    className,
+  );

package/src/ComboboxOption/ComboboxOption.tsx

@@ -1,20 +1,14 @@
 import React, { useCallback, useContext, useMemo } from 'react';
 
-import { cx } from '@leafygreen-ui/emotion';
 import { useForwardedRef, useIdAllocator } from '@leafygreen-ui/hooks';
 import { InputOption, InputOptionContent } from '@leafygreen-ui/input-option';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
+import { getNodeTextContent } from '@leafygreen-ui/lib';
 
 import { ComboboxContext } from '../ComboboxContext';
-import { ComboboxSize } from '../types';
 import { wrapJSX } from '../utils';
 
-import {
-  displayNameStyle,
-  largeStyles,
-  multiselectIconLargePosition,
-  multiselectIconPosition,
-} from './ComboboxOption.styles';
+import { getInputOptionStyles } from './ComboboxOption.styles';
 import {
   ComboboxOptionProps,
   InternalComboboxOptionProps,
@@ -43,6 +37,7 @@ export const InternalComboboxOption = React.forwardRef<
       value,
       onClick,
       disabled = false,
+      'aria-label': ariaLabel,
       ...rest
     }: InternalComboboxOptionProps,
     forwardedRef,
@@ -106,17 +101,14 @@ export const InternalComboboxOption = React.forwardRef<
         ref={optionRef}
         highlighted={isFocused}
         disabled={disabled}
-        aria-label={displayName}
+        aria-label={ariaLabel || getNodeTextContent(displayName) || value}
         darkMode={darkMode}
-        className={cx(
-          {
-            [largeStyles]: size === ComboboxSize.Large,
-            [multiselectIconPosition]: multiSelectWithoutIcons,
-            [multiselectIconLargePosition]:
-              multiSelectWithoutIcons && size === ComboboxSize.Large,
-          },
+        className={getInputOptionStyles({
+          size,
+          isSelected,
+          isMultiselectWithoutIcons: multiSelectWithoutIcons,
           className,
-        )}
+        })}
         onClick={handleOptionClick}
         onKeyDown={handleOptionClick}
       >
@@ -125,9 +117,13 @@ export const InternalComboboxOption = React.forwardRef<
           rightGlyph={rightGlyph}
           description={description}
         >
-          <span id={optionTextId} className={displayNameStyle(isSelected)}>
-            {wrapJSX(displayName, inputValue, 'strong')}
-          </span>
+          {typeof displayName === 'string' ? (
+            <span id={optionTextId}>
+              {wrapJSX(displayName, inputValue, 'strong')}
+            </span>
+          ) : (
+            displayName
+          )}
         </InputOptionContent>
       </InputOption>
     );

package/src/ComboboxOption/ComboboxOption.types.ts

@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef, ReactElement } from 'react';
+import { ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react';
 
 import { Either } from '@leafygreen-ui/lib';
 
@@ -19,7 +19,7 @@ interface SharedComboboxOptionProps {
    * The display value of the option. Used as the rendered string within the menu and chips.
    * When undefined, this is set to `value`
    */
-  displayName?: string;
+  displayName?: ReactNode;
 
   /**
    * The icon to display to the left of the option in the menu.

package/src/index.ts

@@ -1,4 +1,4 @@
-export { Combobox, type ComboboxProps } from './Combobox';
+export { Combobox, type ComboboxProps, RenderMode } from './Combobox';
 export { ComboboxGroup, type ComboboxGroupProps } from './ComboboxGroup';
 export { ComboboxOption, type ComboboxOptionProps } from './ComboboxOption';
 export {

package/src/utils/ComboboxUtils.spec.tsx

@@ -5,7 +5,12 @@ import { Icon } from '@leafygreen-ui/icon';
 
 import { ComboboxGroup, ComboboxOption } from '..';
 
-import { flattenChildren, getNameAndValue, wrapJSX } from '.';
+import {
+  flattenChildren,
+  getDisplayNameForValue,
+  getNameAndValue,
+  wrapJSX,
+} from '.';
 
 describe('packages/combobox/utils', () => {
   describe('wrapJSX', () => {
@@ -155,6 +160,66 @@ describe('packages/combobox/utils', () => {
     });
   });
 
+  describe('getDisplayNameForValue', () => {
+    const options = [
+      { value: 'apple', displayName: 'Apple', isDisabled: false },
+      { value: 'banana', displayName: 'Banana', isDisabled: false },
+      { value: 'carrot', displayName: 'Carrot', isDisabled: true },
+    ];
+
+    test('Returns the displayName when a matching option is found', () => {
+      const result = getDisplayNameForValue('apple', options);
+      expect(result).toBe('Apple');
+    });
+
+    test('Returns the value when no matching option is found', () => {
+      const result = getDisplayNameForValue('unknown', options);
+      expect(result).toBe('unknown');
+    });
+
+    test('Returns empty string when value is null', () => {
+      const result = getDisplayNameForValue(null, options);
+      expect(result).toBe('');
+    });
+
+    test('Returns empty string when value is empty string', () => {
+      const result = getDisplayNameForValue('', options);
+      expect(result).toBe('');
+    });
+
+    test('Returns displayName for disabled option', () => {
+      const result = getDisplayNameForValue('carrot', options);
+      expect(result).toBe('Carrot');
+    });
+
+    test('Returns empty string when options array is empty and value is null', () => {
+      const result = getDisplayNameForValue(null, []);
+      expect(result).toBe('');
+    });
+
+    test('Returns value when options array is empty but value is provided', () => {
+      const result = getDisplayNameForValue('test', []);
+      expect(result).toBe('test');
+    });
+
+    test('Returns React node displayName when option has node displayName', () => {
+      const nodeDisplayName = (
+        <span>
+          <strong>Bold</strong> text
+        </span>
+      );
+      const optionsWithNode = [
+        {
+          value: 'node-option',
+          displayName: nodeDisplayName,
+          isDisabled: false,
+        },
+      ];
+      const result = getDisplayNameForValue('node-option', optionsWithNode);
+      expect(result).toBe(nodeDisplayName);
+    });
+  });
+
   describe('flattenChildren', () => {
     test('returns a single option', () => {
       const children = <ComboboxOption value="test" displayName="Test" />;
@@ -165,6 +230,7 @@ describe('packages/combobox/utils', () => {
           displayName: 'Test',
           hasGlyph: false,
           isDisabled: false,
+          badge: undefined,
         },
       ]);
     });
@@ -181,12 +247,14 @@ describe('packages/combobox/utils', () => {
           displayName: 'Apple',
           hasGlyph: false,
           isDisabled: false,
+          badge: undefined,
         },
         {
           value: 'banana',
           displayName: 'Banana',
           hasGlyph: false,
           isDisabled: false,
+          badge: undefined,
         },
       ]);
     });
@@ -202,6 +270,44 @@ describe('packages/combobox/utils', () => {
       );
       const flat = flattenChildren(children);
       expect(flat).toEqual([
+        {
+          value: 'test',
+          displayName: 'Test',
+          hasGlyph: true,
+          isDisabled: true,
+          badge: undefined,
+        },
+      ]);
+    });
+
+    test('flattens options with node displayName', () => {
+      const children = [
+        <ComboboxOption
+          key="test"
+          value="test"
+          displayName={
+            <div>
+              <span>Testing</span>
+              <span>New</span>
+            </div>
+          }
+        />,
+        <ComboboxOption
+          key="test2"
+          value="test"
+          displayName="Test"
+          glyph={<Icon glyph="Beaker" />}
+          disabled
+        />,
+      ];
+      const flat = flattenChildren(children);
+      expect(flat).toEqual([
+        {
+          value: 'test',
+          displayName: 'Testing New',
+          hasGlyph: false,
+          isDisabled: false,
+        },
         {
           value: 'test',
           displayName: 'Test',

package/src/utils/OptionObjectUtils.ts

@@ -1,3 +1,5 @@
+import { ReactNode } from 'react';
+
 import { OptionObject } from '../ComboboxOption';
 /**
  *
@@ -21,7 +23,7 @@ export const getOptionObjectFromValue = (
 export const getDisplayNameForValue = (
   value: string | null,
   options: Array<OptionObject>,
-): string => {
+): ReactNode => {
   return value
     ? getOptionObjectFromValue(value, options)?.displayName ?? value
     : '';

package/src/utils/getNameAndValue.ts

@@ -1,5 +1,7 @@
 import kebabCase from 'lodash/kebabCase';
 
+import { getNodeTextContent } from '@leafygreen-ui/lib';
+
 import { ComboboxOptionProps } from '../ComboboxOption';
 
 /**
@@ -18,8 +20,10 @@ export const getNameAndValue = ({
   value: string;
   displayName: string;
 } => {
+  const displayNameProps = getNodeTextContent(nameProp);
+
   return {
-    value: valProp ?? kebabCase(nameProp),
-    displayName: nameProp ?? valProp ?? '', // TODO consider adding a prop to customize displayName => startCase(valProp),
+    value: valProp ?? kebabCase(displayNameProps),
+    displayName: displayNameProps || valProp || '', // TODO consider adding a prop to customize displayName => startCase(valProp),
   };
 };