@leafygreen-ui/combobox 5.0.7 → 5.0.9

package/dist/{ComboboxTestUtils.d.ts → utils/ComboboxTestUtils.d.ts}

@@ -1,6 +1,6 @@
 /// <reference types="jest" />
 import React from 'react';
-import { BaseComboboxProps, ComboboxMultiselectProps, OptionObject } from './Combobox.types';
+import { BaseComboboxProps, ComboboxMultiselectProps, OptionObject } from '../Combobox.types';
 export interface NestedObject {
     label: string;
     children: Array<string | OptionObject>;

package/dist/utils/ComboboxTestUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboboxTestUtils.d.ts","sourceRoot":"","sources":["../../src/utils/ComboboxTestUtils.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B,OAAO,EACL,iBAAiB,EACjB,wBAAwB,EACxB,YAAY,EACb,MAAM,mBAAmB,CAAC;AAG3B,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,MAAM,GAAG,YAAY,CAAC,CAAC;CACxC;AAED,oBAAY,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;AAC3C,aAAK,mBAAmB,GAAG;IACzB,OAAO,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,YAAY,GAAG,YAAY,CAAC,CAAC;CACvD,GAAG,iBAAiB,GACnB,wBAAwB,CAAC,OAAO,CAAC,CAAC;AAEpC,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,YAAY,CAgB9C,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,YAAY,CA+B9C,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,0DA4C1B,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,MAAM,EAC7C,MAAM,GAAE,CAAiB,EACzB,KAAK,CAAC,EAAE,mBAAmB;iCAsDS,mBAAmB;;gBAetB,MAAM,GAAG,WAAW,GAAG,IAAI;gBAC3B,MAAM,MAAM,CAAC,GAAG,MAAM,WAAW,CAAC,GAAG,IAAI;;;gBAgBxC,MAAM,GAAG,WAAW,GAAG,IAAI;gBAC3B,OAAO,GAAG,MAAM,GAAG,WAAW,GAAG,IAAI;gBACrC,MAAM,MAAM,CAAC,GAAG,MAAM,WAAW,CAAC,GAAG,IAAI;;yBA5BjD,MAAM,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6D7C;AAED;;;;GAIG;AACH,eAAO,MAAM,MAAM,cAAe,OAAO,YAAmC,CAAC;AAiC7E,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,IAAI,CAAC;QACb,UAAU,QAAQ,CAAC,CAAC;YAClB,cAAc,IAAI,CAAC,CAAC;SACrB;KACF;CACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafygreen-ui/combobox",
-  "version": "5.0.7",
+  "version": "5.0.9",
   "description": "leafyGreen UI Kit Combobox",
   "main": "./dist/index.js",
   "module": "./dist/esm/index.js",
@@ -20,26 +20,27 @@
     "access": "public"
   },
   "dependencies": {
-    "@leafygreen-ui/checkbox": "^12.0.4",
+    "@leafygreen-ui/checkbox": "^12.0.6",
     "@leafygreen-ui/emotion": "^4.0.3",
-    "@leafygreen-ui/hooks": "^7.3.3",
+    "@leafygreen-ui/hooks": "^7.6.0",
     "@leafygreen-ui/icon": "^11.12.4",
-    "@leafygreen-ui/icon-button": "^15.0.4",
+    "@leafygreen-ui/icon-button": "^15.0.6",
     "@leafygreen-ui/inline-definition": "^6.0.2",
-    "@leafygreen-ui/lib": "^10.1.0",
+    "@leafygreen-ui/input-option": "^1.0.0",
+    "@leafygreen-ui/lib": "^10.2.1",
     "@leafygreen-ui/palette": "^3.4.7",
     "@leafygreen-ui/popover": "^11.0.5",
     "@leafygreen-ui/tokens": "^2.0.0",
-    "@leafygreen-ui/typography": "^16.0.0",
+    "@leafygreen-ui/typography": "^16.0.1",
     "chalk": "^4.1.2",
     "lodash": "^4.17.21",
     "polished": "^4.2.2"
   },
   "peerDependencies": {
-    "@leafygreen-ui/leafygreen-provider": "^3.1.0"
+    "@leafygreen-ui/leafygreen-provider": "^3.1.1"
   },
   "devDependencies": {
-    "@leafygreen-ui/button": "^19.0.4"
+    "@leafygreen-ui/button": "^20.0.1"
   },
   "homepage": "https://github.com/mongodb/leafygreen-ui/tree/main/packages/combobox",
   "repository": {

package/src/Chip/Chip.styles.ts

@@ -0,0 +1,150 @@
+import { css } from '@leafygreen-ui/emotion';
+import { Theme } from '@leafygreen-ui/lib';
+import { palette } from '@leafygreen-ui/palette';
+import { transitionDuration, typeScales } from '@leafygreen-ui/tokens';
+
+import { ComboboxSize } from '../Combobox.types';
+
+/**
+ * Vertical padding on a chip (in px)
+ */
+export const chipWrapperPaddingY = {
+  [ComboboxSize.Default]: 2,
+  [ComboboxSize.Large]: 4,
+} as const;
+
+/**
+ * Height of the chip element (in px)
+ */
+export const chipHeight: Record<ComboboxSize, number> = {
+  [ComboboxSize.Default]:
+    typeScales.body1.lineHeight + 2 * chipWrapperPaddingY[ComboboxSize.Default], // 20
+  [ComboboxSize.Large]:
+    typeScales.body2.lineHeight + 2 * chipWrapperPaddingY[ComboboxSize.Large], // 28
+};
+
+export const chipWrapperBaseStyle = css`
+  display: inline-flex;
+  align-items: center;
+  overflow: hidden;
+  white-space: nowrap;
+  box-sizing: border-box;
+`;
+
+export const chipWrapperSizeStyle: Record<ComboboxSize, string> = {
+  [ComboboxSize.Default]: css`
+    font-size: ${typeScales.body1.fontSize}px;
+    line-height: ${typeScales.body1.lineHeight}px;
+    border-radius: 4px;
+  `,
+  [ComboboxSize.Large]: css`
+    font-size: ${typeScales.body2.fontSize}px;
+    line-height: ${typeScales.body2.lineHeight}px;
+    border-radius: 4px;
+  `,
+};
+
+export const chipWrapperThemeStyle: Record<Theme, string> = {
+  [Theme.Light]: css`
+    color: ${palette.black};
+    background-color: ${palette.gray.light2};
+
+    // TODO: - refine these styles with Design
+    &:focus-within {
+      background-color: ${palette.blue.light2};
+    }
+  `,
+  [Theme.Dark]: css`
+    color: ${palette.gray.light2};
+    background-color: ${palette.gray.dark2};
+
+    &:focus-within {
+      background-color: ${palette.blue.dark2};
+    }
+  `,
+};
+
+export const disabledChipWrapperStyle: Record<Theme, string> = {
+  [Theme.Light]: css`
+    cursor: not-allowed;
+    color: ${palette.gray.base};
+    background-color: ${palette.gray.light3};
+  `,
+  [Theme.Dark]: css`
+    cursor: not-allowed;
+    color: ${palette.gray.dark2};
+    background-color: ${palette.gray.dark4};
+    box-shadow: inset 0 0 1px 1px ${palette.gray.dark2}; ;
+  `,
+};
+
+export const chipTextSizeStyle: Record<ComboboxSize, string> = {
+  [ComboboxSize.Default]: css`
+    padding-inline: 6px;
+    padding-block: ${chipWrapperPaddingY[ComboboxSize.Default]}px;
+  `,
+  [ComboboxSize.Large]: css`
+    padding-inline: 10px;
+    padding-block: ${chipWrapperPaddingY[ComboboxSize.Large]}px;
+  `,
+};
+
+export const chipButtonStyle = css`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  outline: none;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  transition: background-color ${transitionDuration.faster}ms ease-in-out;
+`;
+
+export const chipButtonSizeStyle: Record<ComboboxSize, string> = {
+  [ComboboxSize.Default]: css`
+    height: ${chipHeight[ComboboxSize.Default]}px;
+  `,
+  [ComboboxSize.Large]: css`
+    height: ${chipHeight[ComboboxSize.Large]}px;
+  `,
+};
+
+export const chipButtonThemeStyle: Record<Theme, string> = {
+  [Theme.Light]: css`
+    color: ${palette.gray.dark2};
+
+    &:hover {
+      color: ${palette.black};
+      background-color: ${palette.gray.light1};
+    }
+  `,
+  [Theme.Dark]: css`
+    color: ${palette.gray.light1};
+
+    &:hover {
+      color: ${palette.gray.light3};
+      background-color: ${palette.gray.dark1};
+    }
+  `,
+};
+
+export const chipButtonDisabledStyle: Record<Theme, string> = {
+  [Theme.Light]: css`
+    cursor: not-allowed;
+    color: ${palette.gray.dark2};
+    &:hover {
+      color: inherit;
+      background-color: unset;
+    }
+  `,
+  [Theme.Dark]: css`
+    cursor: not-allowed;
+    color: ${palette.gray.dark2};
+    &:hover {
+      color: inherit;
+      background-color: unset;
+    }
+  `,
+};

package/src/{Chip.tsx → Chip/Chip.tsx}

@@ -1,151 +1,31 @@
 import React, { useContext, useEffect, useMemo, useRef } from 'react';
 
-import { css, cx } from '@leafygreen-ui/emotion';
+import { cx } from '@leafygreen-ui/emotion';
 import Icon from '@leafygreen-ui/icon';
 import InlineDefinition from '@leafygreen-ui/inline-definition';
-import { keyMap, Theme } from '@leafygreen-ui/lib';
-import { palette } from '@leafygreen-ui/palette';
-import { transitionDuration, typeScales } from '@leafygreen-ui/tokens';
+import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
+import { keyMap } from '@leafygreen-ui/lib';
 
-import {
-  chipClassName,
-  chipWrapperPaddingY,
-  inputHeight,
-} from './Combobox.styles';
-import { ChipProps, ComboboxSize as Size } from './Combobox.types';
-import { ComboboxContext } from './ComboboxContext';
-
-const chipWrapperBaseStyle = css`
-  display: inline-flex;
-  align-items: center;
-  overflow: hidden;
-  white-space: nowrap;
-  box-sizing: border-box;
-`;
-
-const chipWrapperSizeStyle: Record<Size, string> = {
-  [Size.Default]: css`
-    font-size: ${typeScales.body1.fontSize}px;
-    line-height: ${typeScales.body1.lineHeight}px;
-    border-radius: 4px;
-  `,
-  [Size.Large]: css`
-    font-size: ${typeScales.body2.fontSize}px;
-    line-height: ${typeScales.body2.lineHeight}px;
-    border-radius: 4px;
-  `,
-};
-
-const chipWrapperThemeStyle: Record<Theme, string> = {
-  [Theme.Light]: css`
-    color: ${palette.black};
-    background-color: ${palette.gray.light2};
-
-    // TODO: - refine these styles with Design
-    &:focus-within {
-      background-color: ${palette.blue.light2};
-    }
-  `,
-  [Theme.Dark]: css`
-    color: ${palette.gray.light2};
-    background-color: ${palette.gray.dark2};
-
-    &:focus-within {
-      background-color: ${palette.blue.dark2};
-    }
-  `,
-};
-
-const disabledChipWrapperStyle: Record<Theme, string> = {
-  [Theme.Light]: css`
-    cursor: not-allowed;
-    color: ${palette.gray.base};
-    background-color: ${palette.gray.light3};
-  `,
-  [Theme.Dark]: css`
-    cursor: not-allowed;
-    color: ${palette.gray.dark2};
-    background-color: ${palette.gray.dark4};
-    box-shadow: inset 0 0 1px 1px ${palette.gray.dark2}; ;
-  `,
-};
+import { ChipProps } from '../Combobox.types';
+import { chipClassName } from '../Combobox/Combobox.styles';
+import { ComboboxContext } from '../ComboboxContext';
 
-const chipTextSizeStyle: Record<Size, string> = {
-  [Size.Default]: css`
-    padding-inline: 6px;
-    padding-block: ${chipWrapperPaddingY[Size.Default]}px;
-  `,
-  [Size.Large]: css`
-    padding-inline: 10px;
-    padding-block: ${chipWrapperPaddingY[Size.Large]}px;
-  `,
-};
-
-const chipButtonStyle = css`
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  outline: none;
-  border: none;
-  background-color: transparent;
-  cursor: pointer;
-  transition: background-color ${transitionDuration.faster}ms ease-in-out;
-`;
-
-const chipButtonSizeStyle: Record<Size, string> = {
-  [Size.Default]: css`
-    height: ${inputHeight[Size.Default]}px;
-  `,
-  [Size.Large]: css`
-    height: ${inputHeight[Size.Large]}px;
-  `,
-};
-
-const chipButtonThemeStyle: Record<Theme, string> = {
-  [Theme.Light]: css`
-    color: ${palette.gray.dark2};
-
-    &:hover {
-      color: ${palette.black};
-      background-color: ${palette.gray.light1};
-    }
-  `,
-  [Theme.Dark]: css`
-    color: ${palette.gray.light1};
-
-    &:hover {
-      color: ${palette.gray.light3};
-      background-color: ${palette.gray.dark1};
-    }
-  `,
-};
-
-const chipButtonDisabledStyle: Record<Theme, string> = {
-  [Theme.Light]: css`
-    cursor: not-allowed;
-    color: ${palette.gray.dark2};
-    &:hover {
-      color: inherit;
-      background-color: unset;
-    }
-  `,
-  [Theme.Dark]: css`
-    cursor: not-allowed;
-    color: ${palette.gray.dark2};
-    &:hover {
-      color: inherit;
-      background-color: unset;
-    }
-  `,
-};
+import {
+  chipButtonDisabledStyle,
+  chipButtonSizeStyle,
+  chipButtonStyle,
+  chipButtonThemeStyle,
+  chipTextSizeStyle,
+  chipWrapperBaseStyle,
+  chipWrapperSizeStyle,
+  chipWrapperThemeStyle,
+  disabledChipWrapperStyle,
+} from './Chip.styles';
 
 export const Chip = React.forwardRef<HTMLSpanElement, ChipProps>(
   ({ displayName, isFocused, onRemove, onFocus }: ChipProps, forwardedRef) => {
+    const { darkMode, theme } = useDarkMode();
     const {
-      darkMode,
-      theme,
       size,
       disabled,
       chipTruncationLocation = 'end',

package/src/Chip/index.ts

@@ -0,0 +1 @@
+export { Chip } from './Chip';

package/src/{Combobox.spec.tsx → Combobox/Combobox.spec.tsx}

@@ -18,7 +18,7 @@ import startCase from 'lodash/startCase';
 import Button from '@leafygreen-ui/button';
 import { keyMap } from '@leafygreen-ui/lib';
 
-import { OptionObject } from './Combobox.types';
+import { OptionObject } from '../Combobox.types';
 import {
   defaultOptions,
   getComboboxJSX,
@@ -27,7 +27,7 @@ import {
   renderCombobox,
   Select,
   testif,
-} from './ComboboxTestUtils';
+} from '../utils/ComboboxTestUtils';
 
 /**
  * Tests
@@ -145,6 +145,14 @@ describe('packages/combobox', () => {
         expect(optionElements).toHaveLength(defaultOptions.length);
       });
 
+      test('option accepts data attribute', () => {
+        const { openMenu } = renderCombobox(select);
+        const { optionElements } = openMenu();
+        expect(optionElements?.[0].getAttribute('data-testid')).toBe(
+          defaultOptions[0].value,
+        );
+      });
+
       test('Options render with provided displayName', async () => {
         const { openMenu } = renderCombobox(select);
         const { optionElements } = openMenu();
@@ -285,9 +293,10 @@ describe('packages/combobox', () => {
         expect(document.body).toHaveFocus();
       });
 
+      // TODO: Fix this test. Combobox SHOULD be focusable
       test('Combobox is not focusable when `disabled`', () => {
         renderCombobox(select, { disabled: true });
-        userEvent.type(document.body, '{tab');
+        userEvent.type(document.body, '{tab}');
         expect(document.body).toHaveFocus();
       });
     });
@@ -1033,6 +1042,10 @@ describe('packages/combobox', () => {
           expect(highlight).toHaveTextContent('Banana');
         });
 
+        test.todo('Down arrow cycles highlight to top');
+
+        test.todo('Up arrow cycles highlight to bottom');
+
         test('Down arrow key opens menu when its closed', async () => {
           const { inputEl, openMenu, findByRole } = renderCombobox(select);
           const { menuContainerEl } = openMenu();
@@ -1099,15 +1112,14 @@ describe('packages/combobox', () => {
           waitFor(() => expect(inputEl).toHaveFocus());
         });
 
-        // eslint-disable-next-line jest/no-disabled-tests
-        test.skip('When focus is on clear button, Left arrow moves focus to input', async () => {
+        test('When focus is on clear button, Left arrow moves focus to input', async () => {
           const initialValue = select === 'multiple' ? ['apple'] : 'apple';
           const { inputEl } = renderCombobox(select, {
             initialValue,
           });
           userEvent.type(inputEl!, '{arrowright}{arrowleft}');
           expect(inputEl!).toHaveFocus();
-          expect(inputEl!.selectionEnd).toEqual(select === 'multiple' ? 0 : 5);
+          expect(inputEl!.selectionEnd).toEqual(select === 'multiple' ? 0 : 4);
         });
 
         testMultiSelect(
@@ -1288,15 +1300,60 @@ describe('packages/combobox', () => {
     /**
      * onClear
      */
-    test('Clear button calls onClear callback', () => {
-      const initialValue = select === 'multiple' ? ['apple'] : 'apple';
-      const onClear = jest.fn();
-      const { clearButtonEl } = renderCombobox(select, {
-        initialValue,
-        onClear,
-      });
-      userEvent.click(clearButtonEl!);
-      expect(onClear).toHaveBeenCalled();
+    describe('onClear', () => {
+      test('Clear button calls onClear callback', () => {
+        const initialValue = select === 'multiple' ? ['apple'] : 'apple';
+        const onClear = jest.fn();
+        const { clearButtonEl } = renderCombobox(select, {
+          initialValue,
+          onClear,
+        });
+        userEvent.click(clearButtonEl!);
+        expect(onClear).toHaveBeenCalled();
+      });
+
+      test('Clear button does not force the menu to reopen', () => {
+        const initialValue = select === 'multiple' ? ['apple'] : 'apple';
+        const onClear = jest.fn();
+        const { clearButtonEl, queryByRole } = renderCombobox(select, {
+          initialValue,
+          onClear,
+        });
+        expect(queryByRole('listbox')).not.toBeInTheDocument();
+        userEvent.click(clearButtonEl!);
+        expect(queryByRole('listbox')).not.toBeInTheDocument();
+      });
+
+      test('Clear button clears the value of the input', () => {
+        const initialValue = select === 'multiple' ? ['apple'] : 'apple';
+        const { inputEl, clearButtonEl, queryChipsByName } = renderCombobox(
+          select,
+          {
+            initialValue,
+          },
+        );
+
+        if (select === 'multiple') {
+          expect(queryChipsByName('Apple')).toBeInTheDocument();
+        } else {
+          expect(inputEl).toHaveValue('Apple');
+        }
+
+        userEvent.click(clearButtonEl!);
+        expect(inputEl).toHaveValue('');
+      });
+
+      test('Focus returns to input element after clear button is clicked', async () => {
+        const initialValue = select === 'multiple' ? ['apple'] : 'apple';
+        const { inputEl, clearButtonEl } = renderCombobox(select, {
+          initialValue,
+        });
+        userEvent.click(clearButtonEl!);
+
+        await waitFor(() => {
+          expect(inputEl).toHaveFocus();
+        });
+      });
     });
 
     /**

package/src/{Combobox.story.tsx → Combobox/Combobox.story.tsx}

@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { ComponentStory } from '@storybook/react';
 
 import Button from '@leafygreen-ui/button';
 import { css } from '@leafygreen-ui/emotion';
 import Icon from '@leafygreen-ui/icon';
-import { storybookExcludedControlParams } from '@leafygreen-ui/lib';
+import { StoryMeta } from '@leafygreen-ui/lib';
 
 import {
   ComboboxSize,
@@ -12,32 +12,21 @@ import {
   SearchState,
   State,
   TruncationLocation,
-} from './Combobox.types';
-import { Combobox, ComboboxGroup, ComboboxOption } from '.';
+} from '../Combobox.types';
+import { Combobox, ComboboxGroup, ComboboxOption } from '..';
 
 const wrapperStyle = css`
   width: 256px;
   padding-block: 64px;
 `;
 
-export default {
+export default StoryMeta({
   title: 'Components/Combobox',
   component: Combobox,
   parameters: {
     default: 'Demo',
     controls: {
-      exclude: [
-        ...storybookExcludedControlParams,
-        'onChange',
-        'onClear',
-        'onFilter',
-        'children',
-        'aria-label',
-        'setError',
-        'filteredOptions',
-        'initialValue',
-        'value',
-      ],
+      exclude: ['as', 'filteredOptions', 'initialValue', 'setError', 'value'],
     },
   },
   argTypes: {
@@ -110,7 +99,7 @@ export default {
     disabled: false,
     clearable: true,
   },
-} as ComponentMeta<typeof Combobox>;
+});
 
 const ComboboxOptions = [
   <ComboboxOption key="apple" value="apple" displayName="Apple" />,

package/src/{Combobox.styles.ts → Combobox/Combobox.styles.ts}

@@ -10,7 +10,11 @@ import {
   typeScales,
 } from '@leafygreen-ui/tokens';
 
-import { ComboboxSize as Size, Overflow } from './Combobox.types';
+import { chipHeight } from '../Chip/Chip.styles';
+import { ComboboxSize as Size, Overflow } from '../Combobox.types';
+
+// Rename the variable defined in chip styles
+const inputHeight = chipHeight;
 
 /**
  * Width of the widest character (in px)
@@ -20,24 +24,6 @@ export const maxCharWidth: Record<Size, number> = {
   [Size.Large]: typeScales.body2.fontSize,
 };
 
-/**
- * Vertical padding on a chip (in px)
- */
-export const chipWrapperPaddingY = {
-  [Size.Default]: 2,
-  [Size.Large]: 4,
-} as const;
-
-/**
- * Height of the input element (in px)
- */
-export const inputHeight: Record<Size, number> = {
-  [Size.Default]:
-    typeScales.body1.lineHeight + 2 * chipWrapperPaddingY[Size.Default], // 20
-  [Size.Large]:
-    typeScales.body2.lineHeight + 2 * chipWrapperPaddingY[Size.Large], // 28
-};
-
 /**
  * Size of combobox x & y padding (in px)
  */