@leafygreen-ui/combobox 0.9.0

package/src/ComboboxTestUtils.tsx

@@ -0,0 +1,287 @@
+import React from 'react';
+import {
+  render,
+  configure,
+  queryByText,
+  queryByAttribute,
+  queryAllByAttribute,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Combobox, ComboboxGroup, ComboboxOption } from '.';
+import { BaseComboboxProps, ComboboxMultiselectProps } from './Combobox.types';
+import { OptionObject } from './util';
+import { isArray, isNull } from 'lodash';
+import chalk from '@testing-library/jest-dom/node_modules/chalk';
+
+export interface NestedObject {
+  label: string;
+  children: Array<string | OptionObject>;
+}
+
+export type Select = 'single' | 'multiple';
+type renderComboboxProps = {
+  options?: Array<string | OptionObject | NestedObject>;
+} & BaseComboboxProps &
+  ComboboxMultiselectProps<boolean>;
+
+export const defaultOptions: Array<OptionObject> = [
+  {
+    value: 'apple',
+    displayName: 'Apple',
+  },
+  {
+    value: 'banana',
+    displayName: 'Banana',
+  },
+  {
+    value: 'carrot',
+    displayName: 'Carrot',
+  },
+];
+
+export const groupedOptions: Array<NestedObject> = [
+  {
+    label: 'Fruit',
+    children: [
+      {
+        value: 'apple',
+        displayName: 'Apple',
+      },
+      {
+        value: 'banana',
+        displayName: 'Banana',
+      },
+    ],
+  },
+  {
+    label: 'Vegetables',
+    children: [
+      {
+        value: 'carrot',
+        displayName: 'Carrot',
+      },
+      {
+        value: 'eggplant',
+        displayName: 'Eggplant',
+      },
+    ],
+  },
+];
+
+/**
+ * @param props Combobox props
+ * @returns Combobox JSX
+ */
+export const getComboboxJSX = (props?: renderComboboxProps) => {
+  const isNested = (object: any): object is NestedObject =>
+    object.label && object.children;
+
+  const renderOption = (option: NestedObject | OptionObject | string) => {
+    if (isNested(option)) {
+      return (
+        <ComboboxGroup key={option.label} label={option.label}>
+          {option.children.map(renderOption)}
+        </ComboboxGroup>
+      );
+    } else {
+      const value = typeof option === 'string' ? option : option.value;
+      const displayName =
+        typeof option === 'string' ? undefined : option.displayName;
+
+      return (
+        <ComboboxOption key={value} value={value} displayName={displayName} />
+      );
+    }
+  };
+
+  const label = props?.label ?? 'Some label';
+  const options = props?.options ?? defaultOptions;
+  return (
+    <Combobox
+      data-testid="combobox-container"
+      label={label}
+      multiselect={props?.multiselect ?? false}
+      {...props}
+    >
+      {options.map(renderOption)}
+    </Combobox>
+  );
+};
+
+/**
+ * Renders a combobox
+ * @param select `'single' | 'multiple'`
+ * @param props `renderComboboxProps`
+ * @returns Object of combobox elements & utility functions
+ */
+export function renderCombobox<T extends Select>(
+  select: T = 'single' as T,
+  props?: renderComboboxProps,
+) {
+  const multiselect = select === 'multiple';
+  const options = props?.options || defaultOptions;
+  props = { options, multiselect, ...props };
+
+  const renderResult = render(getComboboxJSX(props));
+  const containerEl = renderResult.getByTestId('combobox-container');
+  const labelEl = containerEl.getElementsByTagName('label')[0];
+  const comboboxEl = renderResult.getByRole('combobox');
+  const inputEl = containerEl.getElementsByTagName('input')[0];
+  const clearButtonEl = renderResult.queryByLabelText('Clear selection');
+
+  /**
+   * Since menu elements won't exist until component is interacted with,
+   * call this after opening the menu.
+   * @returns Object of menu elements
+   */
+  function getMenuElements() {
+    const menuContainerEl = renderResult.queryByRole('listbox');
+    const popoverEl = menuContainerEl?.firstChild;
+    const menuEl = menuContainerEl?.getElementsByTagName('ul')[0];
+    const optionElements = menuContainerEl?.getElementsByTagName('li');
+    const selectedElements = menuEl
+      ? select === 'single'
+        ? queryByAttribute('aria-selected', menuEl, 'true')
+        : queryAllByAttribute('aria-selected', menuEl, 'true')
+      : undefined;
+
+    return {
+      menuContainerEl,
+      popoverEl,
+      menuEl,
+      optionElements,
+      selectedElements: selectedElements as
+        | (T extends 'single' ? HTMLElement : Array<HTMLElement>)
+        | null,
+    };
+  }
+
+  /**
+   * Opens the menu by simulating a click on the combobox.
+   * @returns Object of menu elements
+   */
+  const openMenu = () => {
+    userEvent.click(comboboxEl);
+    return getMenuElements();
+  };
+
+  /**
+   * Rerenders the combobox with new props
+   * @param newProps
+   * @returns
+   */
+  const rerenderCombobox = (newProps: renderComboboxProps) =>
+    renderResult.rerender(getComboboxJSX({ ...props, ...newProps }));
+
+  /**
+   * @returns all chip elements
+   */
+  function queryAllChips(): Array<HTMLElement> {
+    return queryAllByAttribute(
+      'data-leafygreen-ui',
+      containerEl,
+      'combobox-chip',
+    );
+  }
+
+  /**
+   * Get the chip(s) with the provided display name(s)
+   * @param names: `string` | `Array<string>`
+   * @returns A single HTMLElement or array of HTMLElements
+   */
+  function queryChipsByName(names: string): HTMLElement | null;
+  function queryChipsByName(names: Array<string>): Array<HTMLElement> | null;
+  function queryChipsByName(
+    names: string | Array<string>,
+  ): HTMLElement | Array<HTMLElement> | null {
+    if (typeof names === 'string') {
+      const span = queryByText(comboboxEl, names);
+      return span ? span.parentElement : null;
+    } else {
+      const spans = names
+        .map((name: any) => queryByText(comboboxEl, name))
+        .filter(span => !isNull(span))
+        .map(span => span?.parentElement);
+      return spans.length > 0 ? (spans as Array<HTMLElement>) : null;
+    }
+  }
+
+  function queryChipsByIndex(index: number): HTMLElement | null;
+  function queryChipsByIndex(index: 'first' | 'last'): HTMLElement | null;
+  function queryChipsByIndex(index: Array<number>): Array<HTMLElement> | null;
+  function queryChipsByIndex(
+    index: 'first' | 'last' | number | Array<number>,
+  ): HTMLElement | Array<HTMLElement> | null {
+    const allChips = queryAllChips();
+
+    if (allChips.length > 0) {
+      if (typeof index === 'number' && index <= allChips.length) {
+        return allChips[index];
+      } else if (typeof index === 'string') {
+        return index === 'first' ? allChips[0] : allChips[allChips.length - 1];
+      } else if (isArray(index) && index.every(i => i <= allChips.length)) {
+        return index.map(i => allChips[i]);
+      }
+    }
+
+    return null;
+  }
+
+  return {
+    ...renderResult,
+    rerenderCombobox,
+    queryChipsByName,
+    queryChipsByIndex,
+    queryAllChips,
+    getMenuElements,
+    openMenu,
+    containerEl,
+    labelEl,
+    comboboxEl,
+    inputEl,
+    clearButtonEl,
+  };
+}
+
+/**
+ * Conditionally runs a test
+ * @param condition
+ * @returns `test`
+ */
+export const testif = (condition: boolean) => (condition ? test : test.skip);
+
+configure({
+  getElementError: message => new Error(message ?? ''),
+});
+
+expect.extend({
+  toContainFocus(recieved: HTMLElement) {
+    return recieved.contains(document.activeElement)
+      ? {
+          pass: true,
+          message: () =>
+            `\t Expected element not to contain focus: \n\t\t ${chalk.red(
+              recieved.outerHTML,
+            )} \n\t Element with focus: \n\t\t ${chalk.blue(
+              document.activeElement?.outerHTML,
+            )}`,
+        }
+      : {
+          pass: false,
+          message: () =>
+            `\t Expected element to contain focus: \n\t\t ${chalk.green(
+              recieved.outerHTML,
+            )} \n\t Element with focus: \n\t\t ${chalk.red(
+              document.activeElement?.outerHTML,
+            )}`,
+        };
+  },
+});
+
+declare global {
+  namespace jest {
+    interface Matchers<R> {
+      toContainFocus(): R;
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export { default as Combobox } from './Combobox';
+export { default as ComboboxOption } from './ComboboxOption';
+export { default as ComboboxGroup } from './ComboboxGroup';

package/src/util.tsx

@@ -0,0 +1,117 @@
+import { isComponentType, keyMap as _keyMap } from '@leafygreen-ui/lib';
+import { kebabCase } from 'lodash';
+import React from 'react';
+import { ComboboxOptionProps } from './Combobox.types';
+
+// TODO - remove this when lib/keyMap supports Backspace & Delete
+export const keyMap = {
+  ..._keyMap,
+  Backspace: 8,
+  Delete: 46,
+} as const;
+
+/**
+ *
+ * Wraps the first instance of `wrap` found in `str` within the provided `element`.
+ *
+ * E.g. `wrapJSX('Apple', 'ap', 'em') => <><em>Ap</em>ple</>`
+ *
+ * @param str
+ * @param wrap
+ * @param element
+ * @returns `JSX.Element`
+ */
+export const wrapJSX = (
+  str: string,
+  wrap?: string,
+  element?: string,
+): JSX.Element => {
+  if (wrap && element) {
+    const regex = new RegExp(wrap, 'gi');
+    const startIndex = str.search(regex);
+    const endIndex = startIndex + wrap.length;
+    const nameArr = str.split('');
+    const start = nameArr.slice(0, startIndex).join('');
+    const end = nameArr.slice(endIndex).join('');
+    const match = nameArr.slice(startIndex, endIndex).join('');
+    const matchEl = React.createElement(element, null, match);
+    return (
+      <>
+        {start}
+        {matchEl}
+        {end}
+      </>
+    );
+  }
+
+  return <>{str}</>;
+};
+
+/**
+ *
+ * Returns an object with properties `value` & `displayName`
+ * based on the props provided
+ *
+ * @property value: string
+ * @property displayName: string
+ */
+export const getNameAndValue = ({
+  value: valProp,
+  displayName: nameProp,
+}: ComboboxOptionProps): {
+  value: string;
+  displayName: string;
+} => {
+  return {
+    value: valProp ?? kebabCase(nameProp),
+    displayName: nameProp ?? valProp ?? '', // TODO consider adding a prop to customize displayName => startCase(valProp),
+  };
+};
+
+export interface OptionObject {
+  value: string;
+  displayName: string;
+  hasGlyph?: boolean;
+}
+
+/**
+ *
+ * Flattens multiple nested ComboboxOptions into a 1D array
+ *
+ * @param _children
+ * @returns `Array<OptionObject>`
+ */
+export const flattenChildren = (
+  _children: React.ReactNode,
+): Array<OptionObject> => {
+  // TS doesn't like .reduce
+  // @ts-expect-error
+  return React.Children.toArray(_children).reduce(
+    // @ts-expect-error
+    (
+      acc: Array<OptionObject>,
+      child: React.ReactNode,
+    ): Array<OptionObject> | undefined => {
+      if (isComponentType(child, 'ComboboxOption')) {
+        const { value, displayName } = getNameAndValue(child.props);
+        const { glyph } = child.props;
+
+        return [
+          ...acc,
+          {
+            value,
+            displayName,
+            hasGlyph: !!glyph,
+          },
+        ];
+      } else if (isComponentType(child, 'ComboboxGroup')) {
+        const { children } = child.props;
+
+        if (children) {
+          return [...acc, ...flattenChildren(children)];
+        }
+      }
+    },
+    [] as Array<OptionObject>,
+  );
+};

package/tsconfig.json

@@ -0,0 +1,47 @@
+{
+  "extends": "../../package.tsconfig.json",
+  "compilerOptions": {
+    "declarationDir": "dist",
+    "outDir": "dist",
+    "rootDir": "src"
+  },
+  "include": ["src/**/*"],
+  "references": [
+    {
+      "path": "../checkbox"
+    },
+    {
+      "path": "../emotion"
+    },
+    {
+      "path": "../icon"
+    },
+    {
+      "path": "../icon-button"
+    },
+    {
+      "path": "../interaction-ring"
+    },
+    {
+      "path": "../inline-definition"
+    },
+    {
+      "path": "../hooks"
+    },
+    {
+      "path": "../lib"
+    },
+    {
+      "path": "../palette"
+    },
+    {
+      "path": "../popover"
+    },
+    {
+      "path": "../tooltip"
+    },
+    {
+      "path": "../typography"
+    }
+  ]
+}