@leafygreen-ui/combobox 12.0.8 → 12.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafygreen-ui/combobox",
-  "version": "12.0.8",
+  "version": "12.2.0",
   "description": "leafyGreen UI Kit Combobox",
   "main": "./dist/umd/index.js",
   "module": "./dist/esm/index.js",
@@ -13,25 +13,25 @@
     "chalk": "^4.1.2",
     "lodash": "^4.17.21",
     "polished": "^4.2.2",
-    "@leafygreen-ui/chip": "^4.0.7",
-    "@leafygreen-ui/emotion": "^5.0.4",
-    "@leafygreen-ui/hooks": "^9.2.1",
-    "@leafygreen-ui/form-field": "^4.0.5",
-    "@leafygreen-ui/checkbox": "^18.1.1",
-    "@leafygreen-ui/icon": "^14.6.0",
-    "@leafygreen-ui/icon-button": "^17.1.1",
-    "@leafygreen-ui/input-option": "^4.1.1",
-    "@leafygreen-ui/palette": "^5.0.2",
+    "@leafygreen-ui/checkbox": "^18.1.2",
+    "@leafygreen-ui/chip": "^4.0.8",
+    "@leafygreen-ui/emotion": "^5.1.0",
+    "@leafygreen-ui/icon": "^14.7.0",
+    "@leafygreen-ui/icon-button": "^17.1.2",
+    "@leafygreen-ui/form-field": "^4.0.6",
+    "@leafygreen-ui/hooks": "^9.3.0",
+    "@leafygreen-ui/input-option": "^4.1.2",
     "@leafygreen-ui/lib": "^15.6.2",
-    "@leafygreen-ui/tokens": "^3.2.4",
-    "@leafygreen-ui/typography": "^22.1.4",
-    "@leafygreen-ui/popover": "^14.2.0"
+    "@leafygreen-ui/palette": "^5.0.2",
+    "@leafygreen-ui/popover": "^14.3.0",
+    "@leafygreen-ui/tokens": "^4.0.0",
+    "@leafygreen-ui/typography": "^22.2.0"
   },
   "peerDependencies": {
-    "@leafygreen-ui/leafygreen-provider": ">=3.2.0"
+    "@leafygreen-ui/leafygreen-provider": "^3.2.0 || workspace:^4.0.0 || workspace:^5.0.0"
   },
   "devDependencies": {
-    "@leafygreen-ui/button": "^25.1.1",
+    "@leafygreen-ui/button": "^25.1.2",
     "@lg-tools/build": "^0.8.3"
   },
   "homepage": "https://github.com/mongodb/leafygreen-ui/tree/main/packages/combobox",

package/src/Combobox/Combobox.mouse.spec.tsx

@@ -10,7 +10,7 @@ import {
 import userEvent from '@testing-library/user-event';
 import isUndefined from 'lodash/isUndefined';
 
-import Button from '@leafygreen-ui/button';
+import { Button } from '@leafygreen-ui/button';
 
 import {
   defaultOptions,

package/src/Combobox/Combobox.spec.tsx

@@ -16,6 +16,7 @@ import { RenderMode } from '@leafygreen-ui/popover';
 import { eventContainingTargetValue } from '@leafygreen-ui/testing-lib';
 
 import { OptionObject } from '../ComboboxOption/ComboboxOption.types';
+import { DropdownWidthBasis } from '../types';
 import {
   defaultOptions,
   groupedOptions,
@@ -55,6 +56,38 @@ describe('packages/combobox', () => {
   test.todo('expand-y');
   test.todo('scroll-x');
 
+  /**
+   * dropdownWidthBasis prop
+   */
+  describe('dropdownWidthBasis', () => {
+    test('applies max-content width when set to "option"', () => {
+      const { openMenu } = renderCombobox('single', {
+        dropdownWidthBasis: DropdownWidthBasis.Option,
+      });
+      const { menuContainerEl } = openMenu();
+
+      expect(menuContainerEl).toBeInTheDocument();
+      // The Popover wrapper should have the autoWidthStyles applied
+      const popoverWrapper = menuContainerEl?.parentElement?.parentElement;
+      expect(popoverWrapper).toHaveStyle({
+        width: 'max-content',
+      });
+    });
+
+    test('renders without max-content width when set to "trigger"', () => {
+      const { openMenu } = renderCombobox('single', {
+        dropdownWidthBasis: DropdownWidthBasis.Trigger,
+      });
+      const { menuContainerEl } = openMenu();
+
+      expect(menuContainerEl).toBeInTheDocument();
+      // The Popover wrapper should not have max-content width
+      const popoverWrapper = menuContainerEl?.parentElement?.parentElement;
+      const computedStyle = window.getComputedStyle(popoverWrapper!);
+      expect(computedStyle.width).not.toBe('max-content');
+    });
+  });
+
   const tests = [['single'], ['multiple']] as Array<Array<Select>>;
 
   describe.each(tests)('%s select', select => {

package/src/Combobox/Combobox.tsx

@@ -28,8 +28,8 @@ import {
   useIdAllocator,
   usePrevious,
 } from '@leafygreen-ui/hooks';
-import Icon from '@leafygreen-ui/icon';
-import IconButton from '@leafygreen-ui/icon-button';
+import { Icon } from '@leafygreen-ui/icon';
+import { IconButton } from '@leafygreen-ui/icon-button';
 import LeafyGreenProvider, {
   PopoverPropsProvider,
   useDarkMode,
@@ -52,6 +52,7 @@ import {
   ComboboxElement,
   ComboboxSize,
   DiffObject,
+  DropdownWidthBasis,
   getNullSelection,
   onChangeType,
   Overflow,
@@ -136,6 +137,7 @@ export function Combobox<M extends boolean>({
   portalRef,
   scrollContainer,
   popoverZIndex,
+  dropdownWidthBasis = DropdownWidthBasis.Trigger,
   ...rest
 }: ComboboxProps<M>) {
   const { darkMode, theme } = useDarkMode(darkModeProp);
@@ -1331,6 +1333,7 @@ export function Combobox<M extends boolean>({
               searchLoadingMessage={searchLoadingMessage}
               searchErrorMessage={searchErrorMessage}
               searchEmptyMessage={searchEmptyMessage}
+              dropdownWidthBasis={dropdownWidthBasis}
             >
               {renderedOptionsJSX}
             </ComboboxMenu>

package/src/Combobox/Combobox.types.ts

@@ -6,6 +6,7 @@ import { PopoverProps } from '@leafygreen-ui/popover';
 
 import {
   ComboboxSize,
+  DropdownWidthBasis,
   onChangeType,
   Overflow,
   SearchState,
@@ -178,6 +179,13 @@ export type BaseComboboxProps = Omit<React.ComponentProps<'div'>, 'onChange'> &
      * Allows for a controlled text-input value
      */
     inputValue?: string;
+
+    /**
+     * Determines the width of the dropdown. `trigger` will make the dropdown width the width of the combobox. `option` will make the dropdown width as wide as the widest option.
+     *
+     * @default 'trigger'
+     */
+    dropdownWidthBasis?: DropdownWidthBasis;
   };
 
 export type ComboboxProps<M extends boolean> = Either<

package/src/Combobox.stories.tsx

@@ -8,12 +8,13 @@ import {
 import { StoryFn } from '@storybook/react';
 import { userEvent, within } from '@storybook/test';
 
-import Button from '@leafygreen-ui/button';
+import { Button } from '@leafygreen-ui/button';
 import { css } from '@leafygreen-ui/emotion';
 
 import { getComboboxOptions } from './test-utils/getTestOptions.testutils';
 import {
   ComboboxSize,
+  DropdownWidthBasis,
   Overflow,
   SearchState,
   State,
@@ -88,6 +89,7 @@ const meta: StoryMetaType<typeof Combobox> = {
     darkMode: false,
     disabled: false,
     clearable: true,
+    dropdownWidthBasis: DropdownWidthBasis.Trigger,
     errorMessage: 'No Pomegranates!',
     children: getComboboxOptions(),
   },
@@ -139,6 +141,10 @@ const meta: StoryMetaType<typeof Combobox> = {
       control: 'select',
       if: { arg: 'multiselect' },
     },
+    dropdownWidthBasis: {
+      options: Object.values(DropdownWidthBasis),
+      control: 'select',
+    },
   },
 };
 

package/src/ComboboxMenu/ComboboxMenu.tsx

@@ -3,16 +3,18 @@ import isUndefined from 'lodash/isUndefined';
 
 import { css, cx } from '@leafygreen-ui/emotion';
 import { useAvailableSpace, useForwardedRef } from '@leafygreen-ui/hooks';
-import Icon from '@leafygreen-ui/icon';
+import { Icon } from '@leafygreen-ui/icon';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import { palette } from '@leafygreen-ui/palette';
-import Popover from '@leafygreen-ui/popover';
+import { Popover } from '@leafygreen-ui/popover';
 import { Error } from '@leafygreen-ui/typography';
 
 import { ComboboxProps } from '../Combobox';
 import { ComboboxContext } from '../ComboboxContext';
+import { DropdownWidthBasis } from '../types';
 
 import {
+  autoWidthStyles,
   getMenuThemeStyles,
   loadingIconStyle,
   menuBaseStyle,
@@ -30,6 +32,7 @@ type ComboboxMenuProps = {
   id: string;
   labelId: string;
   menuWidth: number;
+  dropdownWidthBasis?: DropdownWidthBasis;
 } & Pick<
   ComboboxProps<any>,
   'searchLoadingMessage' | 'searchErrorMessage' | 'searchEmptyMessage'
@@ -46,6 +49,7 @@ export const ComboboxMenu = React.forwardRef<HTMLDivElement, ComboboxMenuProps>(
       searchLoadingMessage,
       searchErrorMessage,
       searchEmptyMessage,
+      dropdownWidthBasis = DropdownWidthBasis.Trigger,
     }: ComboboxMenuProps,
     forwardedRef,
   ) => {
@@ -134,7 +138,9 @@ export const ComboboxMenu = React.forwardRef<HTMLDivElement, ComboboxMenuProps>(
         justify="middle"
         refEl={refEl}
         adjustOnMutation={true}
-        className={cx(popoverStyle(menuWidth), popoverThemeStyle[theme])}
+        className={cx(popoverStyle(menuWidth), popoverThemeStyle[theme], {
+          [autoWidthStyles]: dropdownWidthBasis === DropdownWidthBasis.Option,
+        })}
       >
         <div
           ref={ref}

package/src/ComboboxMenu/Menu.styles.ts

@@ -1,9 +1,12 @@
-import { transparentize } from 'polished';
-
 import { css, keyframes } from '@leafygreen-ui/emotion';
 import { Theme } from '@leafygreen-ui/lib';
 import { palette } from '@leafygreen-ui/palette';
-import { color, fontFamilies, spacing } from '@leafygreen-ui/tokens';
+import {
+  boxShadows,
+  color,
+  fontFamilies,
+  spacing,
+} from '@leafygreen-ui/tokens';
 
 import { fontSize, lineHeight } from '../ComboboxChip/ComboboxChip.styles';
 import { ComboboxSize as Size } from '../types';
@@ -33,15 +36,19 @@ export const popoverStyle = (width = 384) => css`
 
 export const popoverThemeStyle: Record<Theme, string> = {
   [Theme.Light]: css`
-    box-shadow: 0px 4px 7px ${transparentize(0.85, palette.black)};
+    box-shadow: ${boxShadows[Theme.Light][1]};
     border-color: ${palette.gray.light2};
   `,
   [Theme.Dark]: css`
-    box-shadow: 0px 4px 7px ${transparentize(0.85, palette.black)};
+    box-shadow: ${boxShadows[Theme.Dark][1]};
     border-color: ${palette.gray.dark2};
   `,
 };
 
+export const autoWidthStyles = css`
+  width: max-content;
+`;
+
 export const menuBaseStyle = css`
   position: relative;
   width: 100%;

package/src/ComboboxOption/ComboboxOption.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StoryMetaType, StoryType } from '@lg-tools/storybook-utils';
 
-import Icon from '@leafygreen-ui/icon';
+import { Icon } from '@leafygreen-ui/icon';
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 
 import { ComboboxContext, defaultContext } from '../ComboboxContext';

package/src/ComboboxOption/getGlyphs.tsx

@@ -1,8 +1,8 @@
 import React, { ReactElement } from 'react';
 
-import Checkbox from '@leafygreen-ui/checkbox';
+import { Checkbox } from '@leafygreen-ui/checkbox';
 import { cx } from '@leafygreen-ui/emotion';
-import Icon, { isComponentGlyph } from '@leafygreen-ui/icon';
+import { Icon, isComponentGlyph } from '@leafygreen-ui/icon';
 import { Theme } from '@leafygreen-ui/lib';
 
 import { ComboboxSize } from '../types';

package/src/index.ts

@@ -1,3 +1,11 @@
 export { Combobox, type ComboboxProps } from './Combobox';
 export { ComboboxGroup, type ComboboxGroupProps } from './ComboboxGroup';
 export { ComboboxOption, type ComboboxOptionProps } from './ComboboxOption';
+export {
+  ComboboxSize,
+  DropdownWidthBasis,
+  Overflow,
+  SearchState,
+  State,
+  TruncationLocation,
+} from './types';

package/src/test-utils/getTestOptions.testutils.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import Icon from '@leafygreen-ui/icon';
+import { Icon } from '@leafygreen-ui/icon';
 
 import { ComboboxGroup, ComboboxOption } from '..';
 

package/src/types/Combobox.types.ts

@@ -57,6 +57,14 @@ export const SearchState = {
 } as const;
 export type SearchState = (typeof SearchState)[keyof typeof SearchState];
 
+/** Determines the width of the dropdown menu */
+export const DropdownWidthBasis = {
+  Trigger: 'trigger',
+  Option: 'option',
+} as const;
+export type DropdownWidthBasis =
+  (typeof DropdownWidthBasis)[keyof typeof DropdownWidthBasis];
+
 /**
  * The type expected in the `value` or `initialValue` prop.
  * Also the type passed as an argument to `onChange`.

package/src/types/index.ts

@@ -2,6 +2,7 @@ export {
   ComboboxElement,
   ComboboxSize,
   type DiffObject,
+  DropdownWidthBasis,
   getNullSelection,
   type onChangeType,
   Overflow,

package/src/utils/ComboboxUtils.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import Icon from '@leafygreen-ui/icon';
+import { Icon } from '@leafygreen-ui/icon';
 
 import { ComboboxGroup, ComboboxOption } from '..';