@leafygreen-ui/combobox 6.0.5 → 6.0.7

package/src/Combobox.types.ts

@@ -1,6 +1,7 @@
 import { ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react';
 
 import { Either, HTMLElementProps } from '@leafygreen-ui/lib';
+import { PortalControlProps } from '@leafygreen-ui/popover';
 
 /**
  * Prop Enums & Types
@@ -56,8 +57,8 @@ export const Overflow = {
 export type Overflow = typeof Overflow[keyof typeof Overflow];
 
 export const State = {
-  error: 'error',
   none: 'none',
+  error: 'error',
 } as const;
 export type State = typeof State[keyof typeof State];
 
@@ -132,141 +133,118 @@ export interface ComboboxMultiselectProps<M extends boolean> {
   overflow?: M extends true ? Overflow : undefined;
 }
 
-export interface BaseComboboxProps
-  extends Omit<HTMLElementProps<'div'>, 'onChange'> {
-  /**
-   * Defines the Combobox Options by passing children. Must be `ComboboxOption` or `ComboboxGroup`
-   */
-  children?: ReactNode;
-
-  /**
-   * An accessible label for the input, rendered in a <label> to the DOM
-   */
-  label?: string;
-
-  /**
-   * An accessible label for the input, used only for screen-readers
-   */
-  'aria-label'?: string;
-
-  /**
-   * A description for the input
-   */
-  description?: string;
-
-  /**
-   * A placeholder for the input element. Uses the native `placeholder` attribute.
-   */
-  placeholder?: string;
-
-  /**
-   * Disables all interaction with the component
-   */
-  disabled?: boolean;
-
-  /**
-   * Defines the visual size of the component
-   */
-  size?: ComboboxSize;
-
-  /**
-   * Toggles Dark Mode
-   */
-  darkMode?: boolean;
-
-  /**
-   * The error state of the component. Defines whether the error message is displayed.
-   */
-  state?: State;
-
-  /**
-   * The message shown below the input when state is `error`
-   */
-  errorMessage?: string;
-
-  /**
-   * The state of search results. Toggles search messages within the menu.
-   */
-  searchState?: SearchState;
-
-  /**
-   * A message shown within the menu when there are no options passed in as children, or `filteredOptions` is an empty array
-   */
-  searchEmptyMessage?: string;
-
-  /**
-   * A message shown within the menu when searchState is `error`
-   */
-  searchErrorMessage?: string;
-
-  /**
-   * A message shown within the menu when searchState is `loading`
-   */
-  searchLoadingMessage?: string;
-
-  /**
-   * A callback called when the search input changes.
-   * Receives a single argument that is the current input value.
-   * Use this callback to set `searchState` and/or `filteredOptions` appropriately
-   */
-  onFilter?: (value: string) => void;
-
-  /**
-   * Defines whether the Clear button appears to the right of the input.
-   */
-  clearable?: boolean;
-
-  /**
-   * A callback fired when the Clear button is pressed.
-   * Fired _after_ `onChange`, and _before_ `onFilter`
-   */
-  onClear?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-
-  /**
-   * An array used to define which options are displayed.
-   * Do not remove options from the JSX children, as this will affect the selected options
-   */
-  filteredOptions?: Array<string>;
-
-  /**
-   * Defines where the ellipses appear in a Chip when the length exceeds the `chipCharacterLimit`
-   */
-  chipTruncationLocation?: TruncationLocation;
-
-  /**
-   * Defined the character limit of a multiselect Chip before they start truncating.
-   * Note: the three ellipses dots are included in the character limit.
-   */
-  chipCharacterLimit?: number;
-
-  /**
-   * Specifies that the popover content should be rendered at the end of the DOM,
-   * rather than in the DOM tree.
-   *
-   * default: `true`
-   */
-  usePortal?: boolean;
-
-  /**
-   * When usePortal is `true`, specifies a class name to apply to the root element of the portal.
-   */
-  portalClassName?: undefined;
-
-  /**
-   * When usePortal is `true`, specifies an element to portal within. The default behavior is to generate a div at the end of the document to render within.
-   */
-  portalContainer?: null;
-
-  /**
-   * When usePortal is `true`, specifies the scrollable element to position relative to.
-   */
-  scrollContainer?: null;
-
-  /**
-   * Number that controls the z-index of the popover element directly.
-   */
-  popoverZIndex?: number;
-}
+export type BaseComboboxProps = Omit<HTMLElementProps<'div'>, 'onChange'> &
+  PortalControlProps & {
+    /**
+     * Defines the Combobox Options by passing children. Must be `ComboboxOption` or `ComboboxGroup`
+     */
+    children?: ReactNode;
+
+    /**
+     * An accessible label for the input, rendered in a <label> to the DOM
+     */
+    label?: string;
+
+    /**
+     * An accessible label for the input, used only for screen-readers
+     */
+    'aria-label'?: string;
+
+    /**
+     * A description for the input
+     */
+    description?: string;
+
+    /**
+     * A placeholder for the input element. Uses the native `placeholder` attribute.
+     */
+    placeholder?: string;
+
+    /**
+     * Disables all interaction with the component
+     */
+    disabled?: boolean;
+
+    /**
+     * Defines the visual size of the component
+     */
+    size?: ComboboxSize;
+
+    /**
+     * Toggles Dark Mode
+     */
+    darkMode?: boolean;
+
+    /**
+     * The error state of the component. Defines whether the error message is displayed.
+     */
+    state?: State;
+
+    /**
+     * The message shown below the input when state is `error`
+     */
+    errorMessage?: string;
+
+    /**
+     * The state of search results. Toggles search messages within the menu.
+     */
+    searchState?: SearchState;
+
+    /**
+     * A message shown within the menu when there are no options passed in as children, or `filteredOptions` is an empty array
+     */
+    searchEmptyMessage?: string;
+
+    /**
+     * A message shown within the menu when searchState is `error`
+     */
+    searchErrorMessage?: string;
+
+    /**
+     * A message shown within the menu when searchState is `loading`
+     */
+    searchLoadingMessage?: string;
+
+    /**
+     * A callback called when the search input changes.
+     * Receives a single argument that is the current input value.
+     * Use this callback to set `searchState` and/or `filteredOptions` appropriately
+     */
+    onFilter?: (value: string) => void;
+
+    /**
+     * Defines whether the Clear button appears to the right of the input.
+     */
+    clearable?: boolean;
+
+    /**
+     * A callback fired when the Clear button is pressed.
+     * Fired _after_ `onChange`, and _before_ `onFilter`
+     */
+    onClear?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+
+    /**
+     * An array used to define which options are displayed.
+     * Do not remove options from the JSX children, as this will affect the selected options
+     */
+    filteredOptions?: Array<string>;
+
+    /**
+     * Defines where the ellipses appear in a Chip when the length exceeds the `chipCharacterLimit`
+     */
+    chipTruncationLocation?: TruncationLocation;
+
+    /**
+     * Defined the character limit of a multiselect Chip before they start truncating.
+     * Note: the three ellipses dots are included in the character limit.
+     */
+    chipCharacterLimit?: number;
+
+    /**
+     * Number that controls the z-index of the popover element directly.
+     */
+    popoverZIndex?: number;
+  };
 
 export type ComboboxProps<M extends boolean> = Either<
   BaseComboboxProps & ComboboxMultiselectProps<M>,

package/src/ComboboxContext/ComboboxContext.tsx

@@ -8,7 +8,7 @@ import {
   TruncationLocation,
 } from '../Combobox.types';
 
-interface ComboboxData {
+export interface ComboboxData {
   multiselect: boolean;
   size: ComboboxSize;
   withIcons: boolean;
@@ -23,7 +23,7 @@ interface ComboboxData {
   popoverZIndex?: number;
 }
 
-export const ComboboxContext = createContext<ComboboxData>({
+export const defaultContext = {
   multiselect: false,
   size: ComboboxSize.Default,
   withIcons: false,
@@ -32,4 +32,6 @@ export const ComboboxContext = createContext<ComboboxData>({
   state: State.none,
   searchState: SearchState.unset,
   overflow: Overflow.expandY,
-});
+};
+
+export const ComboboxContext = createContext<ComboboxData>(defaultContext);

package/src/ComboboxGroup/ComboboxGroup.stories.tsx

@@ -0,0 +1,47 @@
+/* eslint-disable react/display-name */
+import React from 'react';
+
+import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
+import { StoryMetaType } from '@leafygreen-ui/lib';
+
+import { InternalComboboxOption } from '../ComboboxOption';
+
+import { InternalComboboxGroup } from './ComboboxGroup';
+
+const meta: StoryMetaType<typeof InternalComboboxGroup> = {
+  title: 'Components/Combobox/ComboboxGroup',
+  component: InternalComboboxGroup,
+  parameters: {
+    default: null,
+    generate: {
+      combineArgs: {
+        darkMode: [false, true],
+      },
+      args: {
+        label: 'Label',
+        children: (
+          <>
+            <InternalComboboxOption
+              value="option"
+              displayName="Option"
+              isSelected={false}
+              isFocused={false}
+              setSelected={() => {}}
+              index={0}
+            />
+          </>
+        ),
+      },
+      decorator: (Instance, context) => {
+        return (
+          <LeafyGreenProvider darkMode={context?.args.darkMode}>
+            <Instance />
+          </LeafyGreenProvider>
+        );
+      },
+    },
+  },
+};
+export default meta;
+
+export const Generated = () => <></>;

package/src/ComboboxMenu/ComboboxMenu.tsx

@@ -6,7 +6,7 @@ import { useAvailableSpace, useForwardedRef } from '@leafygreen-ui/hooks';
 import Icon from '@leafygreen-ui/icon';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import { palette } from '@leafygreen-ui/palette';
-import Popover from '@leafygreen-ui/popover';
+import Popover, { PortalControlProps } from '@leafygreen-ui/popover';
 import { Error } from '@leafygreen-ui/typography';
 
 import { ComboboxProps } from '../Combobox.types';
@@ -30,17 +30,14 @@ type ComboboxMenuProps = {
   id: string;
   labelId: string;
   menuWidth: number;
-} & Pick<
-  ComboboxProps<any>,
-  | 'searchLoadingMessage'
-  | 'searchErrorMessage'
-  | 'searchEmptyMessage'
-  | 'usePortal'
-  | 'portalClassName'
-  | 'portalContainer'
-  | 'scrollContainer'
-  | 'popoverZIndex'
->;
+} & PortalControlProps &
+  Pick<
+    ComboboxProps<any>,
+    | 'searchLoadingMessage'
+    | 'searchErrorMessage'
+    | 'searchEmptyMessage'
+    | 'popoverZIndex'
+  >;
 
 export const ComboboxMenu = React.forwardRef<HTMLDivElement, ComboboxMenuProps>(
   (

package/src/ComboboxOption/ComboboxOption.stories.tsx

@@ -0,0 +1,70 @@
+/* eslint-disable react/display-name, react/jsx-key */
+import React from 'react';
+
+import Icon from '@leafygreen-ui/icon';
+import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
+import { StoryMetaType, StoryType } from '@leafygreen-ui/lib';
+
+import { ComboboxContext } from '../ComboboxContext';
+import { defaultContext } from '../ComboboxContext/ComboboxContext';
+
+import { InternalComboboxOption } from './ComboboxOption';
+
+const meta: StoryMetaType<typeof InternalComboboxOption> = {
+  title: 'Components/Combobox/ComboboxOption',
+  component: InternalComboboxOption,
+  parameters: {
+    default: null,
+    generate: {
+      storyNames: ['WithIcons', 'WithoutIcons'],
+      combineArgs: {
+        darkMode: [false, true],
+        description: [undefined, 'This is a description'],
+        isSelected: [false, true],
+        isFocused: [false, true],
+        disabled: [false, true],
+      },
+      decorator: (Instance, context) => {
+        return (
+          <LeafyGreenProvider darkMode={context?.args.darkMode}>
+            <ComboboxContext.Provider
+              value={{ ...defaultContext, withIcons: context?.args.withIcons }}
+            >
+              <Instance glyph={context?.args.glyph} />
+            </ComboboxContext.Provider>
+          </LeafyGreenProvider>
+        );
+      },
+    },
+  },
+  args: {
+    displayName: 'Option',
+    setSelected: () => {},
+  },
+};
+
+export default meta;
+
+export const WithoutIcons: StoryType<typeof InternalComboboxOption> = () => (
+  <></>
+);
+WithoutIcons.parameters = {
+  generate: {
+    args: {
+      /// @ts-expect-error - withIcons is not a component prop
+      withIcons: false,
+      glyph: undefined,
+    },
+  },
+};
+
+export const WithIcons: StoryType<typeof InternalComboboxOption> = () => <></>;
+WithIcons.parameters = {
+  generate: {
+    args: {
+      /// @ts-expect-error - withIcons is not a component prop
+      withIcons: true,
+      glyph: <Icon glyph="Cloud" />,
+    },
+  },
+};

package/src/test-utils/getTestOptions.testutils.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+
+import Icon from '@leafygreen-ui/icon';
+
+import { ComboboxGroup, ComboboxOption } from '..';
+
+export const getComboboxOptions = (withGlyphs = true) => [
+  <ComboboxOption
+    key="apple"
+    value="apple"
+    displayName="Apple"
+    data-testid="test-id"
+    description="Do I keep the doctor away?"
+    // eslint-disable-next-line no-console
+    onClick={(event, value) => console.log(event, value)}
+    className="className"
+  />,
+  <ComboboxOption key="banana" value="banana" displayName="Banana" />,
+  <ComboboxOption key="carrot" value="carrot" displayName="Carrot" disabled />,
+  <ComboboxOption
+    key="pomegranate"
+    value="pomegranate"
+    displayName="Pomegranate"
+    glyph={withGlyphs ? <Icon glyph="Warning" /> : undefined}
+    description="Watch out, I stain everything I touch LOL"
+    disabled
+  />,
+  <ComboboxOption
+    key="plantain"
+    value="plantain"
+    displayName="Plantain"
+    glyph={withGlyphs ? <Icon glyph="Connect" /> : undefined}
+    description="Don't confuse me with a banana"
+    // eslint-disable-next-line no-console
+    onClick={() => console.log('I was clicked')}
+  />,
+  <ComboboxOption
+    key="paragraph"
+    value="paragraph"
+    displayName="Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper."
+  />,
+  <ComboboxOption
+    key="hash"
+    value="hash"
+    displayName="5f4dcc3b5aa765d61d8327deb882cf995f4dcc3b5aa765d61d8327deb882cf99"
+  />,
+  <ComboboxOption
+    key="dragonfruit"
+    value="dragonfruit"
+    displayName="Dragonfruit"
+    description="Rawr"
+  />,
+  <ComboboxOption key="eggplant" value="eggplant" displayName="Eggplant" />,
+  <ComboboxOption key="fig" value="fig" displayName="Fig" />,
+  <ComboboxOption key="grape" value="grape" displayName="Grape" />,
+  <ComboboxOption key="honeydew" value="honeydew" displayName="Honeydew" />,
+  <ComboboxOption
+    key="iceberg-lettuce"
+    value="iceberg-lettuce"
+    displayName="Iceberg lettuce"
+  />,
+  <ComboboxGroup key="peppers" label="Peppers">
+    <ComboboxOption key="cayenne" value="cayenne" displayName="Cayenne" />
+    <ComboboxOption
+      key="ghost-pepper"
+      value="ghost-pepper"
+      displayName="Ghost pepper"
+    />
+    <ComboboxOption key="habanero" value="habanero" displayName="Habanero" />
+    <ComboboxOption key="jalapeno" value="jalapeno" displayName="Jalapeño" />
+    <ComboboxOption
+      key="red-pepper"
+      value="red-pepper"
+      displayName="Red pepper"
+    />
+    <ComboboxOption
+      key="scotch-bonnet"
+      value="scotch-bonnet"
+      displayName="Scotch bonnet"
+      description="Don't touch your eyes"
+    />
+  </ComboboxGroup>,
+];

package/src/utils/ComboboxTestUtils.tsx

@@ -199,8 +199,12 @@ export function renderCombobox<T extends Select>(
    * @param newProps
    * @returns
    */
-  const rerenderCombobox = (newProps: renderComboboxProps) =>
-    renderResult.rerender(getComboboxJSX({ ...props, ...newProps }));
+  const rerenderCombobox = (newProps: renderComboboxProps) => {
+    const rerenderProps = { ...props, ...newProps };
+    return renderResult.rerender(
+      getComboboxJSX(rerenderProps as renderComboboxProps),
+    );
+  };
 
   /**
    * @returns all chip elements