@leafygreen-ui/combobox 1.2.2 → 2.0.0

package/src/Combobox.tsx

@@ -7,9 +7,7 @@ import React, {
 } from 'react';
 import { clone, isArray, isEqual, isNull, isString, isUndefined } from 'lodash';
 import { Description, Label } from '@leafygreen-ui/typography';
-import Popover from '@leafygreen-ui/popover';
 import {
-  useAvailableSpace,
   useDynamicRefs,
   useEventListener,
   useIdAllocator,
@@ -17,8 +15,8 @@ import {
 } from '@leafygreen-ui/hooks';
 import Icon from '@leafygreen-ui/icon';
 import IconButton from '@leafygreen-ui/icon-button';
-import { css, cx } from '@leafygreen-ui/emotion';
-import { uiColors } from '@leafygreen-ui/palette';
+import { cx } from '@leafygreen-ui/emotion';
+import { palette } from '@leafygreen-ui/palette';
 import { consoleOnce, isComponentType, keyMap } from '@leafygreen-ui/lib';
 import {
   ComboboxProps,
@@ -28,28 +26,8 @@ import {
   OptionObject,
   ComboboxElement,
   ComboboxSize,
+  State,
 } from './Combobox.types';
-import { ComboboxContext } from './ComboboxContext';
-import { InternalComboboxOption } from './ComboboxOption';
-import { Chip } from './Chip';
-import {
-  clearButtonStyle,
-  clearButtonFocusOverrideStyles,
-  comboboxFocusStyle,
-  comboboxParentStyle,
-  comboboxStyle,
-  endIcon,
-  errorMessageStyle,
-  inputElementStyle,
-  inputWrapperStyle,
-  loadingIconStyle,
-  menuList,
-  menuMessage,
-  menuStyle,
-  menuWrapperStyle,
-  _tempLabelDescriptionOverrideStyle,
-} from './Combobox.styles';
-import { InternalComboboxGroup } from './ComboboxGroup';
 import {
   flattenChildren,
   getOptionObjectFromValue,
@@ -57,6 +35,32 @@ import {
   getValueForDisplayName,
   getNameAndValue,
 } from './utils';
+import { ComboboxContext, useDarkMode } from './ComboboxContext';
+import { InternalComboboxGroup } from './ComboboxGroup';
+import { InternalComboboxOption } from './ComboboxOption';
+import { Chip } from './Chip';
+import {
+  comboboxFocusStyle,
+  inputWrapperStyle,
+  baseComboboxStyles,
+  comboboxThemeStyles,
+  comboboxSizeStyles,
+  comboboxDisabledStyles,
+  comboboxErrorStyles,
+  comboboxParentStyle,
+  baseInputElementStyle,
+  inputElementSizeStyle,
+  inputElementTransitionStyles,
+  multiselectInputElementStyle,
+  clearButtonStyle,
+  endIconStyle,
+  errorMessageThemeStyle,
+  errorMessageSizeStyle,
+  multiselectInputElementPadding,
+  labelDescriptionContainerStyle,
+  inputElementThemeStyle,
+} from './Combobox.styles';
+import { ComboboxMenu } from './ComboboxMenu/ComboboxMenu';
 
 /**
  * Combobox is a combination of a Select and TextInput,
@@ -97,6 +101,7 @@ export default function Combobox<M extends boolean>({
   popoverZIndex,
   ...rest
 }: ComboboxProps<M>) {
+  const theme = useDarkMode(darkMode);
   const getOptionRef = useDynamicRefs<HTMLLIElement>({ prefix: 'option' });
   const getChipRef = useDynamicRefs<HTMLSpanElement>({ prefix: 'chip' });
 
@@ -357,6 +362,8 @@ export default function Combobox<M extends boolean>({
   const [focusedElementName, trackFocusedElement] = useState<
     ComboboxElement | undefined
   >();
+  const isElementFocused = (elementName: ComboboxElement) =>
+    elementName === focusedElementName;
 
   type Direction = 'next' | 'prev' | 'first' | 'last';
 
@@ -595,74 +602,75 @@ export default function Combobox<M extends boolean>({
    */
 
   /**
-   * Callback to render the children as <InternalComboboxOption> elements
+   * Callback to render a child as an <InternalComboboxOption> element
    */
-  const renderInternalOptions = useCallback(
-    (_children: React.ReactNode) => {
-      return React.Children.map(_children, child => {
-        if (isComponentType(child, 'ComboboxOption')) {
-          const { value, displayName } = getNameAndValue(child.props);
-
-          if (shouldOptionBeVisible(value)) {
-            const { className, glyph, disabled } = child.props;
-            const index = allOptions.findIndex(opt => opt.value === value);
-
-            const isFocused = highlightedOption === value;
-            const isSelected = isMultiselect(selection)
-              ? selection.includes(value)
-              : selection === value;
-
-            const setSelected = () => {
-              sethighlightedOption(value);
-              updateSelection(value);
-              setInputFocus();
-
-              if (value === selection) {
-                closeMenu();
-              }
-            };
-
-            const optionRef = getOptionRef(value);
-
-            return (
-              <InternalComboboxOption
-                value={value}
-                displayName={displayName}
-                isFocused={isFocused}
-                isSelected={isSelected}
-                disabled={disabled}
-                setSelected={setSelected}
-                glyph={glyph}
-                className={className}
-                index={index}
-                ref={optionRef}
-              />
-            );
-          }
-        } else if (isComponentType(child, 'ComboboxGroup')) {
-          const nestedChildren = renderInternalOptions(child.props.children);
-
-          if (nestedChildren && nestedChildren?.length > 0) {
-            return (
-              <InternalComboboxGroup
-                label={child.props.label}
-                className={child.props.className}
-              >
-                {renderInternalOptions(nestedChildren)}
-              </InternalComboboxGroup>
-            );
-          }
+  const renderOption = useCallback(
+    (child: React.ReactNode) => {
+      if (isComponentType(child, 'ComboboxOption')) {
+        const { value, displayName } = getNameAndValue(child.props);
+
+        if (shouldOptionBeVisible(value)) {
+          const { className, glyph, disabled } = child.props;
+          const index = allOptions.findIndex(opt => opt.value === value);
+
+          const isFocused = highlightedOption === value;
+          const isSelected = isMultiselect(selection)
+            ? selection.includes(value)
+            : selection === value;
+
+          const setSelected = () => {
+            sethighlightedOption(value);
+            updateSelection(value);
+            setInputFocus();
+
+            if (value === selection) {
+              closeMenu();
+            }
+          };
+
+          const optionRef = getOptionRef(value);
+
+          return (
+            <InternalComboboxOption
+              value={value}
+              displayName={displayName}
+              isFocused={isFocused}
+              isSelected={isSelected}
+              disabled={disabled}
+              setSelected={setSelected}
+              glyph={glyph}
+              className={className}
+              index={index}
+              ref={optionRef}
+            />
+          );
         }
-      });
+      } else if (isComponentType(child, 'ComboboxGroup')) {
+        const nestedChildren = React.Children.map(
+          child.props.children,
+          renderOption,
+        );
+
+        if (nestedChildren && nestedChildren?.length > 0) {
+          return (
+            <InternalComboboxGroup
+              label={child.props.label}
+              className={child.props.className}
+            >
+              {React.Children.map(nestedChildren, renderOption)}
+            </InternalComboboxGroup>
+          );
+        }
+      }
     },
     [
       allOptions,
-      highlightedOption,
       getOptionRef,
+      highlightedOption,
       isMultiselect,
-      shouldOptionBeVisible,
       selection,
       setInputFocus,
+      shouldOptionBeVisible,
       updateSelection,
     ],
   );
@@ -671,8 +679,8 @@ export default function Combobox<M extends boolean>({
    * The rendered JSX elements for the options
    */
   const renderedOptionsJSX = useMemo(
-    () => renderInternalOptions(children),
-    [children, renderInternalOptions],
+    () => React.Children.map(children, renderOption),
+    [children, renderOption],
   );
 
   /**
@@ -752,15 +760,20 @@ export default function Combobox<M extends boolean>({
             ref={clearButtonRef}
             onClick={handleClearButtonClick}
             onFocus={handleClearButtonFocus}
-            className={cx(clearButtonStyle, clearButtonFocusOverrideStyles)}
+            className={cx(clearButtonStyle)}
+            darkMode={darkMode}
           >
             <Icon glyph="XWithCircle" />
           </IconButton>
         )}
         {state === 'error' ? (
-          <Icon glyph="Warning" color={uiColors.red.base} className={endIcon} />
+          <Icon
+            glyph="Warning"
+            color={darkMode ? palette.red.light1 : palette.red.base}
+            className={endIconStyle(size)}
+          />
         ) : (
-          <Icon glyph="CaretDown" className={endIcon} />
+          <Icon glyph="CaretDown" className={endIconStyle(size)} />
         )}
       </>
     );
@@ -769,6 +782,8 @@ export default function Combobox<M extends boolean>({
     doesSelectionExist,
     disabled,
     state,
+    darkMode,
+    size,
     updateSelection,
     onClear,
     onFilter,
@@ -906,62 +921,11 @@ export default function Combobox<M extends boolean>({
     setMenuWidth(comboboxRef.current?.clientWidth ?? 0);
   }, [comboboxRef, isOpen, highlightedOption, selection]);
 
-  // Handler fired when the manu has finished transitioning in/out
+  // Handler fired when the menu has finished transitioning in/out
   const handleTransitionEnd = () => {
     setMenuWidth(comboboxRef.current?.clientWidth ?? 0);
   };
 
-  /**
-   * The rendered menu JSX contents
-   * Includes error, empty, search and default states
-   */
-  const renderedMenuContents = useMemo((): JSX.Element => {
-    switch (searchState) {
-      case 'loading': {
-        return (
-          <span className={menuMessage}>
-            <Icon
-              glyph="Refresh"
-              color={uiColors.blue.base}
-              className={loadingIconStyle}
-            />
-            {searchLoadingMessage}
-          </span>
-        );
-      }
-
-      case 'error': {
-        return (
-          <span className={menuMessage}>
-            <Icon glyph="Warning" color={uiColors.red.base} />
-            {searchErrorMessage}
-          </span>
-        );
-      }
-
-      case 'unset':
-      default: {
-        if (renderedOptionsJSX && renderedOptionsJSX.length > 0) {
-          return <ul className={menuList}>{renderedOptionsJSX}</ul>;
-        }
-
-        return <span className={menuMessage}>{searchEmptyMessage}</span>;
-      }
-    }
-  }, [
-    renderedOptionsJSX,
-    searchEmptyMessage,
-    searchErrorMessage,
-    searchLoadingMessage,
-    searchState,
-  ]);
-
-  /** The max height of the menu element */
-  const availableSpace = useAvailableSpace(comboboxRef);
-  const maxHeightValue = !isUndefined(availableSpace)
-    ? `${Math.min(availableSpace, 256)}px`
-    : 'unset';
-
   /**
    *
    * Event Handlers
@@ -1214,32 +1178,26 @@ export default function Combobox<M extends boolean>({
         size,
         withIcons,
         disabled,
+        isOpen,
+        state,
+        searchState,
         chipTruncationLocation,
         chipCharacterLimit,
         inputValue,
       }}
     >
       <div
-        className={cx(
-          comboboxParentStyle({ darkMode, size, overflow }),
-          className,
-        )}
+        className={cx(comboboxParentStyle(size, overflow), className)}
         {...rest}
       >
-        <div>
+        <div className={labelDescriptionContainerStyle}>
           {label && (
-            <Label
-              id={labelId}
-              htmlFor={inputId}
-              className={_tempLabelDescriptionOverrideStyle}
-            >
+            <Label id={labelId} htmlFor={inputId} darkMode={darkMode}>
               {label}
             </Label>
           )}
           {description && (
-            <Description className={_tempLabelDescriptionOverrideStyle}>
-              {description}
-            </Description>
+            <Description darkMode={darkMode}>{description}</Description>
           )}
         </div>
 
@@ -1252,25 +1210,29 @@ export default function Combobox<M extends boolean>({
           aria-controls={menuId}
           aria-owns={menuId}
           tabIndex={-1}
-          className={cx(comboboxStyle, {
-            [comboboxFocusStyle]: focusedElementName === ComboboxElement.Input,
-          })}
           onMouseDown={handleInputWrapperMousedown}
           onClick={handleComboboxClick}
           onFocus={handleComboboxFocus}
           onKeyDown={handleKeyDown}
           onTransitionEnd={handleTransitionEnd}
-          data-disabled={disabled}
-          data-state={state}
+          className={cx(
+            baseComboboxStyles,
+            comboboxThemeStyles[theme],
+            comboboxSizeStyles(size),
+            {
+              [comboboxDisabledStyles[theme]]: disabled,
+              [comboboxErrorStyles[theme]]: state === State.error,
+              [comboboxFocusStyle[theme]]: isElementFocused(
+                ComboboxElement.Input,
+              ),
+            },
+          )}
         >
           <div
             ref={inputWrapperRef}
             className={inputWrapperStyle({
-              overflow,
-              isOpen,
-              selection,
               size,
-              value: inputValue,
+              overflow,
             })}
           >
             {renderedChips}
@@ -1281,7 +1243,18 @@ export default function Combobox<M extends boolean>({
               aria-labelledby={labelId}
               ref={inputRef}
               id={inputId}
-              className={inputElementStyle}
+              className={cx(
+                baseInputElementStyle,
+                inputElementSizeStyle[size],
+                inputElementThemeStyle[theme],
+                inputElementTransitionStyles(isOpen, overflow),
+                {
+                  [multiselectInputElementStyle(size, inputValue)]:
+                    isMultiselect(selection),
+                  [multiselectInputElementPadding(selection)]:
+                    isMultiselect(selection),
+                },
+              )}
               placeholder={placeholderValue}
               disabled={disabled ?? undefined}
               onChange={handleInputChange}
@@ -1293,39 +1266,33 @@ export default function Combobox<M extends boolean>({
         </div>
 
         {state === 'error' && errorMessage && (
-          <div className={errorMessageStyle}>{errorMessage}</div>
+          <div
+            className={cx(
+              errorMessageThemeStyle[theme],
+              errorMessageSizeStyle[size],
+            )}
+          >
+            {errorMessage}
+          </div>
         )}
 
         {/******* /
           *  Menu  *
           / *******/}
-        <Popover
-          active={isOpen && !disabled}
-          spacing={4}
-          align="bottom"
-          justify="middle"
+
+        <ComboboxMenu
+          id={menuId}
+          labelId={labelId}
           refEl={comboboxRef}
-          adjustOnMutation={true}
-          className={menuWrapperStyle({ darkMode, size, width: menuWidth })}
+          ref={menuRef}
+          menuWidth={menuWidth}
+          searchLoadingMessage={searchLoadingMessage}
+          searchErrorMessage={searchErrorMessage}
+          searchEmptyMessage={searchEmptyMessage}
           {...popoverProps}
         >
-          <div
-            id={menuId}
-            role="listbox"
-            aria-labelledby={labelId}
-            aria-expanded={isOpen}
-            ref={menuRef}
-            className={cx(
-              menuStyle,
-              css`
-                max-height: ${maxHeightValue};
-              `,
-            )}
-            onMouseDownCapture={e => e.preventDefault()}
-          >
-            {renderedMenuContents}
-          </div>
-        </Popover>
+          {renderedOptionsJSX}
+        </ComboboxMenu>
       </div>
     </ComboboxContext.Provider>
   );

package/src/Combobox.types.ts

@@ -1,6 +1,13 @@
 import { ReactElement, ReactNode } from 'react';
 import { Either } from '@leafygreen-ui/lib';
 
+export const Theme = {
+  Dark: 'dark',
+  Light: 'light',
+} as const;
+
+export type Theme = typeof Theme[keyof typeof Theme];
+
 /**
  * Prop Enums & Types
  */

package/src/ComboboxContext.tsx

@@ -1,5 +1,11 @@
 import { createContext } from 'react';
-import { ComboboxSize, TrunctationLocation } from './Combobox.types';
+import {
+  ComboboxSize,
+  SearchState,
+  State,
+  Theme,
+  TrunctationLocation,
+} from './Combobox.types';
 
 interface ComboboxData {
   multiselect: boolean;
@@ -7,6 +13,9 @@ interface ComboboxData {
   size: ComboboxSize;
   withIcons: boolean;
   disabled: boolean;
+  isOpen: boolean;
+  state: State;
+  searchState: SearchState;
   chipTruncationLocation?: TrunctationLocation;
   chipCharacterLimit?: number;
   inputValue?: string;
@@ -18,4 +27,10 @@ export const ComboboxContext = createContext<ComboboxData>({
   size: ComboboxSize.Default,
   withIcons: false,
   disabled: false,
+  isOpen: false,
+  state: State.none,
+  searchState: SearchState.unset,
 });
+
+export const useDarkMode = (darkMode: boolean) =>
+  darkMode ? Theme.Dark : Theme.Light;

package/src/ComboboxGroup.tsx

@@ -1,20 +1,18 @@
 import { css, cx } from '@leafygreen-ui/emotion';
 import { useIdAllocator } from '@leafygreen-ui/hooks';
-import { uiColors } from '@leafygreen-ui/palette';
+import { palette } from '@leafygreen-ui/palette';
 import React, { useContext } from 'react';
-import { ComboboxGroupProps } from './Combobox.types';
-import { ComboboxContext } from './ComboboxContext';
-
-const comboboxGroupStyle = (darkMode: boolean) => css`
-  --lg-combobox-group-label-color: ${darkMode
-    ? uiColors.gray.light1
-    : uiColors.gray.dark1};
-  --lg-combobox-group-border-color: ${darkMode
-    ? uiColors.gray.dark1
-    : uiColors.gray.light1};
-  padding-top: 8px;
-  border-bottom: 1px solid var(--lg-combobox-group-border-color);
-`;
+import { ComboboxGroupProps, Theme } from './Combobox.types';
+import { ComboboxContext, useDarkMode } from './ComboboxContext';
+
+const comboboxGroupStyle: Record<Theme, string> = {
+  [Theme.Light]: css`
+    padding-top: 8px;
+  `,
+  [Theme.Dark]: css`
+    padding-top: 8px;
+  `,
+};
 
 const comboboxGroupLabel = css`
   cursor: default;
@@ -27,22 +25,34 @@ const comboboxGroupLabel = css`
   font-weight: bold;
   text-transform: uppercase;
   letter-spacing: 0.4px;
-  color: var(--lg-combobox-group-label-color);
 `;
 
+const comboboxGroupLabelThemeStyle: Record<Theme, string> = {
+  [Theme.Light]: css`
+    color: ${palette.gray.dark1};
+  `,
+  [Theme.Dark]: css`
+    color: ${palette.gray.light1};
+  `,
+};
+
 export function InternalComboboxGroup({
   label,
   className,
   children,
 }: ComboboxGroupProps): JSX.Element {
   const { darkMode } = useContext(ComboboxContext);
+  const theme = useDarkMode(darkMode);
 
   const groupId = useIdAllocator({ prefix: 'combobox-group' });
   const childCount = React.Children.count(children);
 
   return childCount > 0 ? (
-    <div className={cx(comboboxGroupStyle(darkMode), className)}>
-      <div className={comboboxGroupLabel} id={groupId}>
+    <div className={cx(comboboxGroupStyle[theme], className)}>
+      <div
+        className={cx(comboboxGroupLabel, comboboxGroupLabelThemeStyle[theme])}
+        id={groupId}
+      >
         {label}
       </div>
       <div role="group" aria-labelledby={groupId}>