@leafygreen-ui/combobox 1.0.2 → 1.0.3

package/src/Combobox.spec.tsx

@@ -337,13 +337,10 @@ describe('packages/combobox', () => {
 
       testMultiSelect('Updating `value` updates the chips', () => {
         let value = ['apple', 'banana'];
-        const {
-          queryChipsByName,
-          queryAllChips,
-          rerenderCombobox,
-        } = renderCombobox(select, {
-          value,
-        });
+        const { queryChipsByName, queryAllChips, rerenderCombobox } =
+          renderCombobox(select, {
+            value,
+          });
         waitFor(() => {
           const allChips = queryChipsByName(['Apple', 'Banana']);
           allChips?.forEach(chip => expect(chip).toBeInTheDocument());
@@ -539,12 +536,8 @@ describe('packages/combobox', () => {
       testSingleSelect(
         'Clicking the combobox after making a selection should re-open the menu',
         async () => {
-          const {
-            comboboxEl,
-            inputEl,
-            openMenu,
-            getMenuElements,
-          } = renderCombobox(select);
+          const { comboboxEl, inputEl, openMenu, getMenuElements } =
+            renderCombobox(select);
           const { optionElements, menuContainerEl } = openMenu();
           const firstOption = optionElements![0];
           userEvent.click(firstOption);
@@ -685,9 +678,8 @@ describe('packages/combobox', () => {
 
       describe('Enter key', () => {
         test('selects highlighted option', () => {
-          const { inputEl, openMenu, queryChipsByName } = renderCombobox(
-            select,
-          );
+          const { inputEl, openMenu, queryChipsByName } =
+            renderCombobox(select);
           openMenu();
           userEvent.type(inputEl!, '{arrowdown}{enter}');
           if (select === 'multiple') {
@@ -698,9 +690,8 @@ describe('packages/combobox', () => {
         });
 
         testSingleSelect('Re-opens menu after making a selection', async () => {
-          const { inputEl, openMenu, getMenuElements } = renderCombobox(
-            'single',
-          );
+          const { inputEl, openMenu, getMenuElements } =
+            renderCombobox('single');
           const { optionElements, menuContainerEl } = openMenu();
           const firstOption = optionElements![0];
           userEvent.click(firstOption);
@@ -797,9 +788,8 @@ describe('packages/combobox', () => {
         );
 
         testSingleSelect('Re-opens menu after making a selection', async () => {
-          const { inputEl, openMenu, getMenuElements } = renderCombobox(
-            'single',
-          );
+          const { inputEl, openMenu, getMenuElements } =
+            renderCombobox('single');
           const { optionElements, menuContainerEl } = openMenu();
           const firstOption = optionElements![0];
           userEvent.click(firstOption);
@@ -1054,9 +1044,8 @@ describe('packages/combobox', () => {
         testSingleSelect(
           'Opens the menu after making a selection',
           async () => {
-            const { inputEl, openMenu, getMenuElements } = renderCombobox(
-              select,
-            );
+            const { inputEl, openMenu, getMenuElements } =
+              renderCombobox(select);
             const { optionElements, menuContainerEl } = openMenu();
             const firstOption = optionElements![0];
             userEvent.click(firstOption);

package/src/Combobox.story.tsx

@@ -19,7 +19,7 @@ const Wrapper = ({ children }: any) => (
   </div>
 );
 
-storiesOf('Combobox', module)
+storiesOf('Packages/Combobox', module)
   .add('Single Select', () => {
     const [isError, setIsError] = useState(false);
 

package/src/Combobox.tsx

@@ -222,10 +222,10 @@ export default function Combobox<M extends boolean>({
     [filteredOptions, getDisplayNameForValue, inputValue],
   );
 
-  const visibleOptions = useMemo(() => allOptions.filter(isOptionVisible), [
-    allOptions,
-    isOptionVisible,
-  ]);
+  const visibleOptions = useMemo(
+    () => allOptions.filter(isOptionVisible),
+    [allOptions, isOptionVisible],
+  );
 
   const isValueValid = useCallback(
     (value: string | null): boolean => {
@@ -508,10 +508,8 @@ export default function Combobox<M extends boolean>({
 
       if (focusedElementRef && focusedElementRef.current && menuRef.current) {
         const { offsetTop: optionTop } = focusedElementRef.current;
-        const {
-          scrollTop: menuScroll,
-          offsetHeight: menuHeight,
-        } = menuRef.current;
+        const { scrollTop: menuScroll, offsetHeight: menuHeight } =
+          menuRef.current;
 
         if (optionTop > menuHeight || optionTop < menuScroll) {
           menuRef.current.scrollTop = optionTop;
@@ -594,10 +592,10 @@ export default function Combobox<M extends boolean>({
     ],
   );
 
-  const renderedOptions = useMemo(() => renderInternalOptions(children), [
-    children,
-    renderInternalOptions,
-  ]);
+  const renderedOptions = useMemo(
+    () => renderInternalOptions(children),
+    [children, renderInternalOptions],
+  );
 
   const renderedChips = useMemo(() => {
     if (isMultiselect(selection)) {
@@ -687,9 +685,10 @@ export default function Combobox<M extends boolean>({
   ]);
 
   // Do any of the options have an icon?
-  const withIcons = useMemo(() => allOptions.some(opt => opt.hasGlyph), [
-    allOptions,
-  ]);
+  const withIcons = useMemo(
+    () => allOptions.some(opt => opt.hasGlyph),
+    [allOptions],
+  );
 
   /**
    *
@@ -859,10 +858,8 @@ export default function Combobox<M extends boolean>({
     const menuMargin = 8;
 
     if (viewportSize && comboboxRef.current && menuRef.current) {
-      const {
-        top: triggerTop,
-        bottom: triggerBottom,
-      } = comboboxRef.current.getBoundingClientRect();
+      const { top: triggerTop, bottom: triggerBottom } =
+        comboboxRef.current.getBoundingClientRect();
 
       // Find out how much space is available above or below the trigger
       const safeSpace = Math.max(

package/src/Combobox.types.ts

@@ -16,7 +16,8 @@ export const TrunctationLocation = {
   end: 'end',
   none: 'none',
 } as const;
-export type TrunctationLocation = typeof TrunctationLocation[keyof typeof TrunctationLocation];
+export type TrunctationLocation =
+  typeof TrunctationLocation[keyof typeof TrunctationLocation];
 
 export const Overflow = {
   expandY: 'expand-y',
@@ -55,7 +56,7 @@ export function getNullSelection<M extends boolean>(
   multiselect: M,
 ): SelectValueType<M> {
   if (multiselect) {
-    return ([] as Array<string>) as SelectValueType<M>;
+    return [] as Array<string> as SelectValueType<M>;
   } else {
     return null as SelectValueType<M>;
   }

package/src/ComboboxOption.tsx

@@ -91,9 +91,8 @@ const InternalComboboxOption = React.forwardRef<
     }: InternalComboboxOptionProps,
     forwardedRef,
   ) => {
-    const { multiselect, darkMode, withIcons, inputValue } = useContext(
-      ComboboxContext,
-    );
+    const { multiselect, darkMode, withIcons, inputValue } =
+      useContext(ComboboxContext);
     const optionTextId = useIdAllocator({ prefix: 'combobox-option-text' });
     const optionRef = useForwardedRef(forwardedRef, null);