remove comboxbox and install LG one

Author: mabaasit

package-lock.json

@@ -40,16 +40,15 @@
     "@leafygreen-ui/card": "^11.0.0",
     "@leafygreen-ui/checkbox": "^13.1.2",
     "@leafygreen-ui/code": "^14.4.0",
+    "@leafygreen-ui/combobox": "^10.0.0",
     "@leafygreen-ui/confirmation-modal": "^5.2.1",
     "@leafygreen-ui/emotion": "^4.0.8",
     "@leafygreen-ui/guide-cue": "^5.1.0",
     "@leafygreen-ui/hooks": "^8.3.0",
     "@leafygreen-ui/icon": "^12.8.0",
     "@leafygreen-ui/icon-button": "^15.0.23",
     "@leafygreen-ui/info-sprinkle": "^2.1.0",
-    "@leafygreen-ui/inline-definition": "^6.0.15",
     "@leafygreen-ui/leafygreen-provider": "^3.2.0",
-    "@leafygreen-ui/lib": "^13.8.2",
     "@leafygreen-ui/logo": "^9.2.0",
     "@leafygreen-ui/marketing-modal": "^4.2.3",
     "@leafygreen-ui/menu": "^26.0.0",
@@ -84,7 +83,6 @@
     "is-electron-renderer": "^2.0.1",
     "lodash": "^4.17.21",
     "polished": "^4.2.2",
-    "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-hotkeys-hook": "^4.3.7",
     "react-intersection-observer": "^8.34.0",

packages/compass-components/package.json

@@ -1,12 +1,17 @@
 import React, { useState, useMemo } from 'react';
-import { Combobox } from './combobox';
-import type {
-  ComboboxProps,
-  onChangeType,
-  SelectValueType,
-} from './combobox/Combobox.types';
+import { Combobox } from './leafygreen';
+import type { ComboboxProps } from '@leafygreen-ui/combobox';
+
+// TODO: Make this required
+type SelectValueType<T extends boolean> = NonNullable<
+  ComboboxProps<T>['value']
+>;
+type OnChangeType<T extends boolean> = NonNullable<
+  ComboboxProps<T>['onChange']
+>;
 
 type ComboboxWithCustomOptionProps<T extends boolean, K> = ComboboxProps<T> & {
+  onChange: OnChangeType<T>;
   options: K[];
   renderOption: (option: K, index: number, isCustom: boolean) => JSX.Element;
 };
@@ -36,7 +41,7 @@ export const ComboboxWithCustomOption = <
       );
     }
     return _opts;
-  }, [userOptions, customOptions, search]);
+  }, [userOptions, customOptions, search, renderOption]);
 
   const selectValueAndRunOnChange = (value: string[] | string | null) => {
     if (!onChange || !value) return;
@@ -47,13 +52,13 @@ export const ComboboxWithCustomOption = <
         .filter((value) => !userOptions.find((x) => x.value === value))
         .map((x) => ({ value: x })) as K[];
       setCustomOptions(customOptions);
-      (onChange as onChangeType<true>)(multiSelectValues);
+      (onChange as OnChangeType<true>)(multiSelectValues);
     } else {
       const selectValue = value as SelectValueType<false>;
       if (selectValue && !userOptions.find((x) => x.value === selectValue)) {
         setCustomOptions([{ value: selectValue } as K]);
       }
-      (onChange as onChangeType<false>)(selectValue);
+      (onChange as OnChangeType<false>)(selectValue);
     }
   };
 

packages/compass-components/src/components/combobox-with-custom-option.tsx

@@ -9,7 +9,7 @@ import {
 } from '@mongodb-js/testing-library-compass';
 
 import { ComboboxWithCustomOption } from './combobox-with-custom-option';
-import { ComboboxOption } from './combobox/ComboboxOption';
+import { ComboboxOption } from './leafygreen';
 
 const renderCombobox = (
   props: Partial<ComponentProps<typeof ComboboxWithCustomOption>> = {}
@@ -21,6 +21,7 @@ const renderCombobox = (
       renderOption={(o, i) => {
         return <ComboboxOption key={i} value={o.value} />;
       }}
+      onChange={() => {}}
       {...props}
     />
   );