@leafygreen-ui/combobox 7.1.0 → 8.0.0

package/dist/types/Combobox.types.d.ts

@@ -59,12 +59,17 @@ export declare type SearchState = (typeof SearchState)[keyof typeof SearchState]
  * Type varies depending on the value of `multiselect`
  */
 export declare type SelectValueType<M extends boolean> = M extends true ? Array<string> : string | null;
+/** Represents an element that was added or removed from the multiselect value array */
+export interface DiffObject {
+    diffType: 'insert' | 'delete';
+    value: string | Array<string>;
+}
 /**
  * Callback event fired when the value changes
  *
  * Type varies depending on the value of `multiselect`
  */
-export declare type onChangeType<M extends boolean> = M extends true ? (value: SelectValueType<true>) => void : (value: SelectValueType<false>) => void;
+export declare type onChangeType<M extends boolean> = M extends true ? (value: SelectValueType<true>, diff?: DiffObject) => void : (value: SelectValueType<false>) => void;
 /**
  * Returns the correct empty state for multiselect / single select
  */

package/dist/types/Combobox.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.types.d.ts","sourceRoot":"","sources":["../../src/types/Combobox.types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,eAAe;;;;;;;;CAQlB,CAAC;AACX,oBAAY,eAAe,GACzB,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,OAAO,eAAe,CAAC,CAAC;AAEzD;;GAEG;AACH,eAAO,MAAM,YAAY;;;;;CAKf,CAAC;AACX,oBAAY,YAAY,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,OAAO,YAAY,CAAC,CAAC;AAE5E;;GAEG;AACH,eAAO,MAAM,QAAQ;IACnB;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;CAEK,CAAC;AACX,oBAAY,QAAQ,GAAG,CAAC,OAAO,QAAQ,CAAC,CAAC,MAAM,OAAO,QAAQ,CAAC,CAAC;AAEhE,sCAAsC;AACtC,eAAO,MAAM,KAAK;;;CAGR,CAAC;AACX,oBAAY,KAAK,GAAG,CAAC,OAAO,KAAK,CAAC,CAAC,MAAM,OAAO,KAAK,CAAC,CAAC;AAEvD,uCAAuC;AACvC,eAAO,MAAM,WAAW;;;;CAId,CAAC;AACX,oBAAY,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,OAAO,WAAW,CAAC,CAAC;AAEzE;;;;;GAKG;AACH,oBAAY,eAAe,CAAC,CAAC,SAAS,OAAO,IAAI,CAAC,SAAS,IAAI,GAC3D,KAAK,CAAC,MAAM,CAAC,GACb,MAAM,GAAG,IAAI,CAAC;AAElB;;;;GAIG;AAEH,oBAAY,YAAY,CAAC,CAAC,SAAS,OAAO,IAAI,CAAC,SAAS,IAAI,GACxD,CAAC,KAAK,EAAE,eAAe,CAAC,IAAI,CAAC,KAAK,IAAI,GACtC,CAAC,KAAK,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;AAE5C;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,OAAO,EAChD,WAAW,EAAE,CAAC,GACb,eAAe,CAAC,CAAC,CAAC,CAMpB"}
+{"version":3,"file":"Combobox.types.d.ts","sourceRoot":"","sources":["../../src/types/Combobox.types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,eAAe;;;;;;;;CAQlB,CAAC;AACX,oBAAY,eAAe,GACzB,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,OAAO,eAAe,CAAC,CAAC;AAEzD;;GAEG;AACH,eAAO,MAAM,YAAY;;;;;CAKf,CAAC;AACX,oBAAY,YAAY,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,OAAO,YAAY,CAAC,CAAC;AAE5E;;GAEG;AACH,eAAO,MAAM,QAAQ;IACnB;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;CAEK,CAAC;AACX,oBAAY,QAAQ,GAAG,CAAC,OAAO,QAAQ,CAAC,CAAC,MAAM,OAAO,QAAQ,CAAC,CAAC;AAEhE,sCAAsC;AACtC,eAAO,MAAM,KAAK;;;CAGR,CAAC;AACX,oBAAY,KAAK,GAAG,CAAC,OAAO,KAAK,CAAC,CAAC,MAAM,OAAO,KAAK,CAAC,CAAC;AAEvD,uCAAuC;AACvC,eAAO,MAAM,WAAW;;;;CAId,CAAC;AACX,oBAAY,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,OAAO,WAAW,CAAC,CAAC;AAEzE;;;;;GAKG;AACH,oBAAY,eAAe,CAAC,CAAC,SAAS,OAAO,IAAI,CAAC,SAAS,IAAI,GAC3D,KAAK,CAAC,MAAM,CAAC,GACb,MAAM,GAAG,IAAI,CAAC;AAElB,uFAAuF;AACvF,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC9B,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;CAC/B;AAED;;;;GAIG;AAEH,oBAAY,YAAY,CAAC,CAAC,SAAS,OAAO,IAAI,CAAC,SAAS,IAAI,GACxD,CAAC,KAAK,EAAE,eAAe,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,EAAE,UAAU,KAAK,IAAI,GACzD,CAAC,KAAK,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;AAE5C;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,OAAO,EAChD,WAAW,EAAE,CAAC,GACb,eAAe,CAAC,CAAC,CAAC,CAMpB"}

package/dist/types/index.d.ts

@@ -1,3 +1,3 @@
-export { ComboboxElement, ComboboxSize, getNullSelection, onChangeType, Overflow, SearchState, SelectValueType, State, } from './Combobox.types';
+export { ComboboxElement, ComboboxSize, DiffObject, getNullSelection, onChangeType, Overflow, SearchState, SelectValueType, State, } from './Combobox.types';
 export { TruncationLocation } from '@leafygreen-ui/chip';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,YAAY,EACZ,gBAAgB,EAChB,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,eAAe,EACf,KAAK,GACN,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,YAAY,EACZ,UAAU,EACV,gBAAgB,EAChB,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,eAAe,EACf,KAAK,GACN,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/utils/doesSelectionExist.d.ts

@@ -0,0 +1,3 @@
+import { SelectValueType } from '../types';
+export declare const doesSelectionExist: <M extends boolean>(selection?: SelectValueType<M> | null | undefined) => boolean;
+//# sourceMappingURL=doesSelectionExist.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"doesSelectionExist.d.ts","sourceRoot":"","sources":["../../src/utils/doesSelectionExist.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE3C,eAAO,MAAM,kBAAkB,4EAE5B,OAMF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafygreen-ui/combobox",
-  "version": "7.1.0",
+  "version": "8.0.0",
   "description": "leafyGreen UI Kit Combobox",
   "main": "./dist/index.js",
   "module": "./dist/esm/index.js",
@@ -22,19 +22,19 @@
     "access": "public"
   },
   "dependencies": {
-    "@leafygreen-ui/checkbox": "^12.0.20",
+    "@leafygreen-ui/checkbox": "^12.1.0",
     "@leafygreen-ui/chip": "^1.0.0",
     "@leafygreen-ui/emotion": "^4.0.7",
-    "@leafygreen-ui/hooks": "^8.0.0",
+    "@leafygreen-ui/hooks": "^8.1.1",
     "@leafygreen-ui/icon": "^11.23.0",
     "@leafygreen-ui/icon-button": "^15.0.19",
     "@leafygreen-ui/inline-definition": "^6.0.13",
     "@leafygreen-ui/input-option": "^1.0.13",
-    "@leafygreen-ui/lib": "^13.0.0",
+    "@leafygreen-ui/lib": "^13.2.1",
     "@leafygreen-ui/palette": "^4.0.7",
     "@leafygreen-ui/popover": "^11.1.1",
-    "@leafygreen-ui/tokens": "^2.2.0",
-    "@leafygreen-ui/typography": "^18.0.0",
+    "@leafygreen-ui/tokens": "^2.3.0",
+    "@leafygreen-ui/typography": "^18.2.0",
     "chalk": "^4.1.2",
     "lodash": "^4.17.21",
     "polished": "^4.2.2"
@@ -43,7 +43,8 @@
     "@leafygreen-ui/leafygreen-provider": "^3.1.10"
   },
   "devDependencies": {
-    "@leafygreen-ui/button": "^21.0.9"
+    "@leafygreen-ui/button": "^21.0.12",
+    "@leafygreen-ui/testing-lib": "^0.4.0"
   },
   "homepage": "https://github.com/mongodb/leafygreen-ui/tree/main/packages/combobox",
   "repository": {

package/src/Combobox/Combobox.spec.tsx

@@ -16,6 +16,7 @@ import isUndefined from 'lodash/isUndefined';
 
 import Button from '@leafygreen-ui/button';
 import { keyMap } from '@leafygreen-ui/lib';
+import { eventContainingTargetValue } from '@leafygreen-ui/testing-lib';
 
 import { OptionObject } from '../ComboboxOption/ComboboxOption.types';
 import {
@@ -134,6 +135,13 @@ describe('packages/combobox', () => {
         });
         expect(clearButtonEl).not.toBeInTheDocument();
       });
+
+      test('`inputValue` prop is rendered in the textbox', () => {
+        const { inputEl } = renderCombobox(select, {
+          inputValue: 'abc',
+        });
+        expect(inputEl).toHaveValue('abc');
+      });
     });
 
     /**
@@ -420,7 +428,7 @@ describe('packages/combobox', () => {
     /**
      * Input element
      */
-    describe('Input interaction', () => {
+    describe('Typing (Input interaction)', () => {
       test('Typing any character updates the input', () => {
         const { inputEl } = renderCombobox(select);
         userEvent.type(inputEl, 'zy');
@@ -434,70 +442,103 @@ describe('packages/combobox', () => {
         expect(inputEl).toHaveValue(displayName);
         expect(inputEl.scrollWidth).toBeGreaterThanOrEqual(inputEl.clientWidth);
       });
-    });
 
-    /**
-     * Controlled
-     * (i.e. `value` prop)
-     */
-    describe('When value is controlled', () => {
-      test('Typing any character updates the input', () => {
-        const value = select === 'multiple' ? [] : '';
-        const { inputEl } = renderCombobox(select, {
-          value,
-        });
-        expect(inputEl).toHaveValue('');
-        userEvent.type(inputEl, 'z');
-        expect(inputEl).toHaveValue('z');
+      test('Typing does not fire onChange callback', () => {
+        const onChange = jest.fn();
+        const { inputEl } = renderCombobox(select, { onChange });
+        userEvent.type(inputEl, 'Apple');
+        expect(onChange).not.toHaveBeenCalled();
       });
 
-      testSingleSelect('Text input renders with value update', () => {
-        let value = 'apple';
-        const { inputEl, rerenderCombobox } = renderCombobox(select, {
-          value,
-        });
-        expect(inputEl).toHaveValue('Apple');
-        value = 'banana';
-        rerenderCombobox({ value });
-        expect(inputEl).toHaveValue('Banana');
+      test('Typing fires onInputChange callback', () => {
+        const onInputChange = jest.fn();
+        const { inputEl } = renderCombobox(select, { onInputChange });
+        userEvent.type(inputEl, 'abc');
+        expect(onInputChange).toHaveBeenCalledWith(
+          eventContainingTargetValue('abc'),
+        );
       });
 
-      testSingleSelect('Invalid option passed as value is not selected', () => {
-        const value = 'jellybean';
-        const { inputEl } = renderCombobox(select, { value });
-        expect(inputEl).toHaveValue('');
+      test('Blurring the input after typing a valid value fires onChange', async () => {
+        const onChange = jest.fn();
+        const { inputEl, openMenu } = renderCombobox(select, { onChange });
+        const { menuContainerEl } = openMenu();
+        userEvent.type(inputEl, 'Apple');
+        userEvent.tab();
+        await waitForElementToBeRemoved(menuContainerEl);
+        if (select === 'multiple') {
+          expect(onChange).toHaveBeenCalledWith(['apple'], expect.anything());
+        } else {
+          expect(onChange).toHaveBeenCalledWith('apple');
+        }
       });
 
-      testMultiSelect('Updating `value` updates the chips', () => {
-        let value = ['apple', 'banana'];
-        const { queryChipsByName, queryAllChips, rerenderCombobox } =
-          renderCombobox(select, {
+      /**
+       * Controlled
+       * (i.e. `value` prop is set)
+       */
+      describe('When value is controlled', () => {
+        test('Typing any character updates the input', () => {
+          const value = select === 'multiple' ? [] : '';
+          const { inputEl } = renderCombobox(select, {
             value,
           });
-        waitFor(() => {
-          const allChips = queryChipsByName(['Apple', 'Banana']);
-          allChips?.forEach(chip => expect(chip).toBeInTheDocument());
-          expect(queryAllChips()).toHaveLength(2);
-          value = ['banana', 'carrot'];
+          expect(inputEl).toHaveValue('');
+          userEvent.type(inputEl, 'z');
+          expect(inputEl).toHaveValue('z');
+        });
+
+        testSingleSelect('Text input renders with value update', () => {
+          let value = 'apple';
+          const { inputEl, rerenderCombobox } = renderCombobox(select, {
+            value,
+          });
+          expect(inputEl).toHaveValue('Apple');
+          value = 'banana';
           rerenderCombobox({ value });
+          expect(inputEl).toHaveValue('Banana');
+        });
+
+        testSingleSelect(
+          'Invalid option passed as value is not selected',
+          () => {
+            const value = 'jellybean';
+            const { inputEl } = renderCombobox(select, { value });
+            expect(inputEl).toHaveValue('');
+          },
+        );
+
+        testMultiSelect('Updating `value` updates the chips', () => {
+          let value = ['apple', 'banana'];
+          const { queryChipsByName, queryAllChips, rerenderCombobox } =
+            renderCombobox(select, {
+              value,
+            });
           waitFor(() => {
-            const allChips = queryChipsByName(['Carrot', 'Banana']);
+            const allChips = queryChipsByName(['Apple', 'Banana']);
             allChips?.forEach(chip => expect(chip).toBeInTheDocument());
             expect(queryAllChips()).toHaveLength(2);
+            value = ['banana', 'carrot'];
+            rerenderCombobox({ value });
+            waitFor(() => {
+              const allChips = queryChipsByName(['Carrot', 'Banana']);
+              allChips?.forEach(chip => expect(chip).toBeInTheDocument());
+              expect(queryAllChips()).toHaveLength(2);
+            });
           });
         });
-      });
 
-      testMultiSelect('Invalid options are not selected', () => {
-        const value = ['apple', 'jellybean'];
-        const { queryChipsByName, queryAllChips } = renderCombobox(select, {
-          value,
-        });
-        waitFor(() => {
-          const allChips = queryChipsByName(['Apple']);
-          allChips?.forEach(chip => expect(chip).toBeInTheDocument());
-          expect(queryChipsByName('Jellybean')).not.toBeInTheDocument();
-          expect(queryAllChips()).toHaveLength(1);
+        testMultiSelect('Invalid options are not selected', () => {
+          const value = ['apple', 'jellybean'];
+          const { queryChipsByName, queryAllChips } = renderCombobox(select, {
+            value,
+          });
+          waitFor(() => {
+            const allChips = queryChipsByName(['Apple']);
+            allChips?.forEach(chip => expect(chip).toBeInTheDocument());
+            expect(queryChipsByName('Jellybean')).not.toBeInTheDocument();
+            expect(queryAllChips()).toHaveLength(1);
+          });
         });
       });
     });
@@ -541,6 +582,31 @@ describe('packages/combobox', () => {
         }
       });
 
+      test('Clicking an option fires onChange', () => {
+        const onChange = jest.fn();
+        const { openMenu } = renderCombobox(select, {
+          onChange,
+        });
+        const { optionElements } = openMenu();
+        expect(optionElements).not.toBeUndefined();
+        const option3 = (optionElements as HTMLCollectionOf<HTMLLIElement>)[2];
+        act(() => {
+          userEvent.click(option3);
+        });
+
+        if (select === 'multiple') {
+          expect(onChange).toHaveBeenCalledWith(
+            expect.arrayContaining(['carrot']),
+            expect.objectContaining({
+              diffType: 'insert',
+              value: 'carrot',
+            }),
+          );
+        } else {
+          expect(onChange).toHaveBeenCalledWith('carrot');
+        }
+      });
+
       testSingleSelect('Clicking selected option closes menu', async () => {
         const { openMenu } = renderCombobox(select, {
           initialValue: 'apple',
@@ -749,6 +815,32 @@ describe('packages/combobox', () => {
           });
         });
 
+        testMultiSelect(
+          'Clicking chip X button fires onChange with diff',
+          async () => {
+            const onChange = jest.fn();
+            const initialValue = ['apple', 'banana', 'carrot'];
+            const { queryChipsByName } = renderCombobox(select, {
+              onChange,
+              initialValue,
+            });
+            const appleChip = queryChipsByName('Apple');
+            expect(appleChip).not.toBeNull();
+            const appleChipButton = appleChip!.querySelector('button')!;
+            userEvent.click(appleChipButton);
+            await waitFor(() => {
+              expect(appleChip).not.toBeInTheDocument();
+              expect(onChange).toHaveBeenCalledWith(
+                expect.arrayContaining(['banana', 'carrot']),
+                expect.objectContaining({
+                  diffType: 'delete',
+                  value: 'apple',
+                }),
+              );
+            });
+          },
+        );
+
         testMultiSelect('Clicking chip text focuses the chip', () => {
           const initialValue = ['apple', 'banana', 'carrot'];
           const { queryChipsByName, queryAllChips } = renderCombobox(select, {
@@ -825,6 +917,17 @@ describe('packages/combobox', () => {
           expect(menuContainerEl).toBeInTheDocument();
         });
 
+        test('does not make a selection when clicking enter on a closed menu', () => {
+          const { getMenuElements, inputEl } = renderCombobox(select);
+          userEvent.tab();
+          userEvent.keyboard('{enter}');
+          expect(inputEl).toHaveValue('');
+          const { menuContainerEl } = getMenuElements();
+          expect(menuContainerEl).not.toBeNull();
+          expect(menuContainerEl).toBeInTheDocument();
+          expect(inputEl).toHaveValue('');
+        });
+
         test('selects highlighted option', () => {
           const { inputEl, openMenu, queryChipsByName } =
             renderCombobox(select);
@@ -842,9 +945,18 @@ describe('packages/combobox', () => {
           const { inputEl, openMenu } = renderCombobox(select, { onChange });
           openMenu();
           userEvent.type(inputEl!, '{arrowdown}{enter}');
-          expect(onChange).toHaveBeenCalledWith(
-            select === 'single' ? 'banana' : ['banana'],
-          );
+
+          if (select === 'multiple') {
+            expect(onChange).toHaveBeenCalledWith(
+              ['banana'],
+              expect.objectContaining({
+                diffType: 'insert',
+                value: 'banana',
+              }),
+            );
+          } else {
+            expect(onChange).toHaveBeenCalledWith('banana');
+          }
         });
 
         test('does not fire onClear handler', () => {
@@ -1359,7 +1471,8 @@ describe('packages/combobox', () => {
      */
     describe('onClear', () => {
       test('Clear button calls onClear callback', () => {
-        const initialValue = select === 'multiple' ? ['apple'] : 'apple';
+        const initialValue =
+          select === 'multiple' ? ['apple', 'banana'] : 'apple';
         const onClear = jest.fn();
         const { clearButtonEl } = renderCombobox(select, {
           initialValue,
@@ -1370,7 +1483,8 @@ describe('packages/combobox', () => {
       });
 
       test('Clear button does not force the menu to reopen', () => {
-        const initialValue = select === 'multiple' ? ['apple'] : 'apple';
+        const initialValue =
+          select === 'multiple' ? ['apple', 'banana'] : 'apple';
         const onClear = jest.fn();
         const { clearButtonEl, queryByRole } = renderCombobox(select, {
           initialValue,
@@ -1381,8 +1495,9 @@ describe('packages/combobox', () => {
         expect(queryByRole('listbox')).not.toBeInTheDocument();
       });
 
-      test('Clear button clears the value of the input', () => {
-        const initialValue = select === 'multiple' ? ['apple'] : 'apple';
+      test('Clear button clears the value of the input', async () => {
+        const initialValue =
+          select === 'multiple' ? ['apple', 'banana'] : 'apple';
         const { inputEl, clearButtonEl, queryChipsByName } = renderCombobox(
           select,
           {
@@ -1396,10 +1511,34 @@ describe('packages/combobox', () => {
           expect(inputEl).toHaveValue('Apple');
         }
 
-        act(() => {
-          userEvent.click(clearButtonEl!);
+        userEvent.click(clearButtonEl!);
+        await waitFor(() => {
+          expect(inputEl).toHaveValue('');
+        });
+      });
+
+      test('Clear button calls onChange callback', () => {
+        const onChange = jest.fn();
+        const initialValue =
+          select === 'multiple' ? ['apple', 'banana'] : 'apple';
+        const { clearButtonEl } = renderCombobox(select, {
+          initialValue,
+          onChange,
         });
-        expect(inputEl).toHaveValue('');
+
+        userEvent.click(clearButtonEl!);
+
+        if (select === 'multiple') {
+          expect(onChange).toHaveBeenCalledWith(
+            [],
+            expect.objectContaining({
+              diffType: 'delete',
+              value: ['apple', 'banana'],
+            }),
+          );
+        } else {
+          expect(onChange).toHaveBeenCalledWith(null);
+        }
       });
 
       test('Focus returns to input element after clear button is clicked', async () => {
@@ -1440,13 +1579,6 @@ describe('packages/combobox', () => {
         expect(onChange).toHaveBeenCalled();
       });
 
-      test('Typing does not call onChange callback', () => {
-        const onChange = jest.fn();
-        const { inputEl } = renderCombobox(select, { onChange });
-        userEvent.type(inputEl, 'a');
-        expect(onChange).not.toHaveBeenCalled();
-      });
-
       test('Closing the menu without making a selection does not call onChange callback', async () => {
         const onChange = jest.fn();
         const { containerEl, openMenu } = renderCombobox(select, { onChange });