@leafygreen-ui/combobox 5.0.8 → 5.0.10

package/src/ComboboxMenu/ComboboxMenu.tsx

@@ -4,6 +4,7 @@ import isUndefined from 'lodash/isUndefined';
 import { css, cx } from '@leafygreen-ui/emotion';
 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';
 
@@ -55,8 +56,8 @@ export const ComboboxMenu = React.forwardRef<HTMLDivElement, ComboboxMenuProps>(
     }: ComboboxMenuProps,
     forwardedRef,
   ) => {
-    const { disabled, darkMode, theme, size, isOpen, searchState } =
-      useContext(ComboboxContext);
+    const { darkMode, theme } = useDarkMode();
+    const { disabled, size, isOpen, searchState } = useContext(ComboboxContext);
     const ref = useForwardedRef(forwardedRef, null);
 
     /** The max height of the menu element */

package/src/ComboboxMenu/index.ts

@@ -0,0 +1 @@
+export { ComboboxMenu } from './ComboboxMenu';

package/src/ComboboxOption/ComboboxOption.styles.ts

@@ -0,0 +1,68 @@
+import { css } from '@leafygreen-ui/emotion';
+import { spacing, typeScales } from '@leafygreen-ui/tokens';
+
+import { ComboboxSize } from '../Combobox.types';
+import { menuItemHeight, menuItemPadding } from '../ComboboxMenu/Menu.styles';
+
+/**
+ * Styles
+ */
+
+export const comboboxOptionBaseStyle = css`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  list-style: none;
+`;
+
+export const comboboxOptionSizeStyle: Record<ComboboxSize, string> = {
+  [ComboboxSize.Default]: css`
+    font-size: ${typeScales.body1.fontSize}px;
+    line-height: ${typeScales.body1.lineHeight}px;
+    min-height: ${menuItemHeight[ComboboxSize.Default]}px;
+    padding: ${menuItemPadding[ComboboxSize.Default].y}px
+      ${menuItemPadding[ComboboxSize.Default].x}px;
+    gap: ${spacing[1]}px;
+
+    &:before {
+      max-height: ${menuItemHeight[ComboboxSize.Default]}px;
+    }
+  `,
+  [ComboboxSize.Large]: css`
+    font-size: ${typeScales.body2.fontSize}px;
+    line-height: ${typeScales.body2.lineHeight}px;
+    min-height: ${menuItemHeight[ComboboxSize.Large]}px;
+    padding: ${menuItemPadding[ComboboxSize.Large].y}px
+      ${menuItemPadding[ComboboxSize.Large].x}px;
+    gap: ${spacing[2]}px;
+
+    &:before {
+      max-height: ${menuItemHeight[ComboboxSize.Large]}px;
+    }
+  `,
+};
+
+export const checkIconStyle: Record<ComboboxSize, string> = {
+  [ComboboxSize.Default]: css`
+    min-width: ${spacing[3]}px;
+  `,
+  [ComboboxSize.Large]: css`
+    min-width: ${spacing[4]}px;
+  `,
+};
+
+export const flexSpan = css`
+  display: inline-flex;
+  gap: 8px;
+  justify-content: start;
+  align-items: inherit;
+  overflow-wrap: anywhere;
+`;
+
+export const disallowPointer = css`
+  pointer-events: none;
+`;
+
+export const displayNameStyle = (isSelected: boolean) => css`
+  font-weight: ${isSelected ? 'bold' : 'normal'};
+`;

package/src/ComboboxOption/ComboboxOption.tsx

@@ -0,0 +1,107 @@
+import React, { useCallback, useContext } from 'react';
+import PropTypes from 'prop-types';
+
+import { cx } from '@leafygreen-ui/emotion';
+import { useForwardedRef } from '@leafygreen-ui/hooks';
+import { InputOption } from '@leafygreen-ui/input-option';
+import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
+
+import {
+  ComboboxOptionProps,
+  InternalComboboxOptionProps,
+} from '../Combobox.types';
+import { ComboboxContext } from '../ComboboxContext';
+
+import {
+  comboboxOptionBaseStyle,
+  comboboxOptionSizeStyle,
+} from './ComboboxOption.styles';
+import { OptionContent } from './OptionContent';
+
+/**
+ * Internal ComboboxOption Component for use within Combobox only.
+ *
+ * Prefer using {@link ComboboxOption}
+ */
+export const InternalComboboxOption = React.forwardRef<
+  HTMLLIElement,
+  InternalComboboxOptionProps
+>(
+  (
+    {
+      glyph,
+      isSelected,
+      displayName,
+      isFocused,
+      disabled,
+      setSelected,
+      className,
+      ...rest
+    }: InternalComboboxOptionProps,
+    forwardedRef,
+  ) => {
+    const { darkMode } = useDarkMode();
+    const { size } = useContext(ComboboxContext);
+    const optionRef = useForwardedRef(forwardedRef, null);
+
+    const handleOptionClick = useCallback(
+      (e: React.SyntheticEvent) => {
+        // stopPropagation will not stop the keyDown event (only click)
+        // since the option is never `focused`, only `aria-selected`
+        // the keyDown event does not actually fire on the option element
+        e.stopPropagation();
+
+        // If user clicked on the option, or the checkbox
+        // Ignore extra click events on the checkbox wrapper
+        if (
+          !disabled &&
+          (e.target === optionRef.current ||
+            (e.target as Element).tagName === 'INPUT')
+        ) {
+          setSelected();
+        }
+      },
+      [disabled, optionRef, setSelected],
+    );
+
+    return (
+      <InputOption
+        {...rest}
+        as="li"
+        ref={optionRef}
+        highlighted={isFocused}
+        disabled={disabled}
+        aria-label={displayName}
+        darkMode={darkMode}
+        className={cx(
+          comboboxOptionBaseStyle,
+          comboboxOptionSizeStyle[size],
+          className,
+        )}
+        onClick={handleOptionClick}
+        onKeyDown={handleOptionClick}
+      >
+        <OptionContent
+          disabled={disabled}
+          displayName={displayName}
+          glyph={glyph}
+          isSelected={isSelected}
+        />
+      </InputOption>
+    );
+  },
+);
+InternalComboboxOption.displayName = 'ComboboxOption';
+
+export function ComboboxOption(_: ComboboxOptionProps): JSX.Element {
+  throw Error('`ComboboxOption` must be a child of a `Combobox` instance');
+}
+ComboboxOption.displayName = 'ComboboxOption';
+
+ComboboxOption.propTypes = {
+  displayName: PropTypes.string,
+  value: PropTypes.string,
+  glyph: PropTypes.node,
+  disabled: PropTypes.bool,
+  className: PropTypes.string,
+};

package/src/ComboboxOption/OptionContent.tsx

@@ -0,0 +1,87 @@
+import React, { useContext, useMemo } from 'react';
+
+import Checkbox from '@leafygreen-ui/checkbox';
+import { cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
+import Icon, { isComponentGlyph } from '@leafygreen-ui/icon';
+import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
+import { palette } from '@leafygreen-ui/palette';
+
+import { InternalComboboxOptionProps } from '../Combobox.types';
+import { ComboboxContext } from '../ComboboxContext';
+import { wrapJSX } from '../utils';
+
+import {
+  checkIconStyle,
+  disallowPointer,
+  displayNameStyle,
+  flexSpan,
+} from './ComboboxOption.styles';
+
+export const OptionContent = ({
+  disabled,
+  displayName,
+  glyph,
+  isSelected,
+}: Pick<
+  InternalComboboxOptionProps,
+  'disabled' | 'displayName' | 'glyph' | 'isSelected'
+>) => {
+  const { darkMode } = useDarkMode();
+  const { multiselect, withIcons, inputValue, size } =
+    useContext(ComboboxContext);
+  const optionTextId = useIdAllocator({ prefix: 'combobox-option-text' });
+
+  const icon = useMemo((): JSX.Element => {
+    if (glyph) {
+      if (isComponentGlyph(glyph)) {
+        return glyph;
+      }
+      console.error(
+        '`ComboboxOption` instance did not render icon because it is not a known glyph element.',
+        glyph,
+      );
+    }
+
+    return <></>;
+  }, [glyph]);
+
+  const checkbox = (
+    <Checkbox
+      aria-labelledby={optionTextId}
+      checked={isSelected}
+      tabIndex={-1}
+      disabled={disabled}
+      darkMode={darkMode}
+    />
+  );
+
+  return multiselect ? (
+    <>
+      <span className={cx(flexSpan, disallowPointer)}>
+        {withIcons ? icon : checkbox}
+        <span id={optionTextId} className={displayNameStyle(isSelected)}>
+          {wrapJSX(displayName, inputValue, 'strong')}
+        </span>
+      </span>
+      {withIcons && checkbox}
+    </>
+  ) : (
+    // Single select
+    <>
+      <span className={cx(flexSpan, disallowPointer)}>
+        {icon}
+        <span className={displayNameStyle(isSelected)}>
+          {wrapJSX(displayName, inputValue, 'strong')}
+        </span>
+      </span>
+      {isSelected && (
+        <Icon
+          glyph="Checkmark"
+          className={checkIconStyle[size]}
+          color={darkMode ? palette.blue.light1 : palette.blue.base}
+        />
+      )}
+    </>
+  );
+};

package/src/ComboboxOption/index.ts

@@ -0,0 +1 @@
+export { ComboboxOption, InternalComboboxOption } from './ComboboxOption';

package/src/index.ts

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

package/src/{ComboboxTestUtils.tsx → utils/ComboboxTestUtils.tsx}

@@ -18,8 +18,8 @@ import {
   BaseComboboxProps,
   ComboboxMultiselectProps,
   OptionObject,
-} from './Combobox.types';
-import { Combobox, ComboboxGroup, ComboboxOption } from '.';
+} from '../Combobox.types';
+import { Combobox, ComboboxGroup, ComboboxOption } from '..';
 
 export interface NestedObject {
   label: string;

package/tsconfig.json

@@ -27,6 +27,9 @@
     {
       "path": "../inline-definition"
     },
+    {
+      "path": "../input-option"
+    },
     {
       "path": "../lib"
     },