@leafygreen-ui/combobox 5.0.7 → 5.0.9

package/src/ComboboxGroup.tsx

@@ -1,80 +0,0 @@
-import React, { useContext } from 'react';
-import PropTypes from 'prop-types';
-
-import { css, cx } from '@leafygreen-ui/emotion';
-import { useIdAllocator } from '@leafygreen-ui/hooks';
-import { Theme } from '@leafygreen-ui/lib';
-import { palette } from '@leafygreen-ui/palette';
-
-import { ComboboxGroupProps } from './Combobox.types';
-import { ComboboxContext } from './ComboboxContext';
-
-const comboboxGroupStyle: Record<Theme, string> = {
-  [Theme.Light]: css`
-    padding-top: 8px;
-  `,
-  [Theme.Dark]: css`
-    padding-top: 8px;
-  `,
-};
-
-const comboboxGroupLabel = css`
-  cursor: default;
-  width: 100%;
-  padding: 0 12px 2px;
-  outline: none;
-  overflow-wrap: anywhere;
-  font-size: 12px;
-  line-height: 16px;
-  font-weight: bold;
-  text-transform: uppercase;
-  letter-spacing: 0.4px;
-`;
-
-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 { theme } = useContext(ComboboxContext);
-
-  const groupId = useIdAllocator({ prefix: 'combobox-group' });
-  const childCount = React.Children.count(children);
-
-  return childCount > 0 ? (
-    <div className={cx(comboboxGroupStyle[theme], className)}>
-      <div
-        className={cx(comboboxGroupLabel, comboboxGroupLabelThemeStyle[theme])}
-        id={groupId}
-      >
-        {label}
-      </div>
-      <div role="group" aria-labelledby={groupId}>
-        {children}
-      </div>
-    </div>
-  ) : (
-    <></>
-  );
-}
-
-ComboboxGroup.displayName = 'ComboboxGroup';
-
-ComboboxGroup.propTypes = {
-  className: PropTypes.string,
-  children: PropTypes.node.isRequired,
-  label: PropTypes.string.isRequired,
-};
-
-export default function ComboboxGroup(_: ComboboxGroupProps): JSX.Element {
-  throw Error('`ComboboxGroup` must be a child of a `Combobox` instance');
-}

package/src/ComboboxOption.tsx

@@ -1,327 +0,0 @@
-import React, { useCallback, useContext, useMemo } from 'react';
-import PropTypes from 'prop-types';
-
-import Checkbox from '@leafygreen-ui/checkbox';
-import { css, cx } from '@leafygreen-ui/emotion';
-import { useForwardedRef, useIdAllocator } from '@leafygreen-ui/hooks';
-import Icon, { isComponentGlyph } from '@leafygreen-ui/icon';
-import { Theme } from '@leafygreen-ui/lib';
-import { palette } from '@leafygreen-ui/palette';
-import { fontFamilies, spacing, typeScales } from '@leafygreen-ui/tokens';
-
-import { menuItemHeight, menuItemPadding } from './ComboboxMenu/Menu.styles';
-import {
-  ComboboxOptionProps,
-  ComboboxSize as Size,
-  InternalComboboxOptionProps,
-} from './Combobox.types';
-import { ComboboxContext } from './ComboboxContext';
-import { wrapJSX } from './utils';
-
-/**
- * Styles
- */
-
-const comboboxOptionBaseStyle = css`
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  list-style: none;
-  color: inherit;
-  cursor: pointer;
-  overflow: hidden;
-  font-family: ${fontFamilies.default};
-
-  // Left wedge
-  &:before {
-    content: '';
-    position: absolute;
-    left: 0;
-    width: 4px;
-    height: calc(100% - 14px);
-    background-color: rgba(255, 255, 255, 0);
-    border-radius: 0 6px 6px 0;
-    transform: scale3d(0, 0.3, 0);
-    transition: 200ms ease-in-out;
-    transition-property: transform, background-color;
-  }
-`;
-
-const comboboxOptionThemeStyle: Record<Theme, string> = {
-  [Theme.Light]: css`
-    &:hover {
-      outline: none;
-      background-color: ${palette.gray.light2};
-    }
-  `,
-  [Theme.Dark]: css`
-    &:hover {
-      outline: none;
-      background-color: ${palette.gray.dark4};
-    }
-  `,
-};
-
-const comboboxOptionSizeStyle: Record<Size, string> = {
-  [Size.Default]: css`
-    font-size: ${typeScales.body1.fontSize}px;
-    line-height: ${typeScales.body1.lineHeight}px;
-    min-height: ${menuItemHeight[Size.Default]}px;
-    padding: ${menuItemPadding[Size.Default].y}px
-      ${menuItemPadding[Size.Default].x}px;
-    gap: ${spacing[1]}px;
-
-    &:before {
-      max-height: ${menuItemHeight[Size.Default]}px;
-    }
-  `,
-  [Size.Large]: css`
-    font-size: ${typeScales.body2.fontSize}px;
-    line-height: ${typeScales.body2.lineHeight}px;
-    min-height: ${menuItemHeight[Size.Large]}px;
-    padding: ${menuItemPadding[Size.Large].y}px
-      ${menuItemPadding[Size.Large].x}px;
-    gap: ${spacing[2]}px;
-
-    &:before {
-      max-height: ${menuItemHeight[Size.Large]}px;
-    }
-  `,
-};
-
-const _comboboxOptionBaseActiveStyle = css`
-  outline: none;
-
-  &:before {
-    transform: scaleY(1);
-  }
-`;
-
-const comboboxOptionActiveStyle: Record<Theme, string> = {
-  [Theme.Light]: css`
-    ${_comboboxOptionBaseActiveStyle};
-    background-color: ${palette.blue.light3};
-
-    &:before {
-      background-color: ${palette.blue.base};
-    }
-  `,
-  [Theme.Dark]: css`
-    ${_comboboxOptionBaseActiveStyle};
-    background-color: ${palette.blue.dark3};
-
-    &:before {
-      background-color: ${palette.blue.light1};
-    }
-  `,
-};
-
-const _comboboxOptionBaseDisabledStyle = css`
-  cursor: not-allowed;
-
-  &:hover {
-    background-color: inherit;
-  }
-
-  &:before {
-    content: unset;
-  }
-`;
-
-const comboboxOptionDisabledStyle: Record<Theme, string> = {
-  [Theme.Light]: css`
-    ${_comboboxOptionBaseDisabledStyle};
-    color: ${palette.gray.light1};
-  `,
-  [Theme.Dark]: css`
-    ${_comboboxOptionBaseDisabledStyle};
-    color: ${palette.gray.dark1};
-  `,
-};
-
-const checkIconStyle: Record<Size, string> = {
-  [Size.Default]: css`
-    min-width: ${spacing[3]}px;
-  `,
-  [Size.Large]: css`
-    min-width: ${spacing[4]}px;
-  `,
-};
-
-const flexSpan = css`
-  display: inline-flex;
-  gap: 8px;
-  justify-content: start;
-  align-items: inherit;
-  overflow-wrap: anywhere;
-`;
-
-const disallowPointer = css`
-  pointer-events: none;
-`;
-
-const displayNameStyle = (isSelected: boolean) => css`
-  font-weight: ${isSelected ? 'bold' : 'normal'};
-`;
-
-/**
- * Component
- */
-const InternalComboboxOption = React.forwardRef<
-  HTMLLIElement,
-  InternalComboboxOptionProps
->(
-  (
-    {
-      displayName,
-      glyph,
-      isSelected,
-      isFocused,
-      disabled,
-      setSelected,
-      className,
-    }: InternalComboboxOptionProps,
-    forwardedRef,
-  ) => {
-    const { multiselect, darkMode, theme, withIcons, inputValue, size } =
-      useContext(ComboboxContext);
-    const optionTextId = useIdAllocator({ prefix: 'combobox-option-text' });
-    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],
-    );
-
-    const renderedIcon = useMemo(() => {
-      if (glyph) {
-        if (isComponentGlyph(glyph)) {
-          return glyph;
-        }
-        console.error(
-          '`ComboboxOption` instance did not render icon because it is not a known glyph element.',
-          glyph,
-        );
-      }
-    }, [glyph]);
-
-    const renderedChildren = useMemo(() => {
-      // Multiselect
-      if (multiselect) {
-        const checkbox = (
-          <Checkbox
-            aria-labelledby={optionTextId}
-            checked={isSelected}
-            tabIndex={-1}
-            disabled={disabled}
-            darkMode={darkMode}
-            className={css`
-              // TODO: Remove when this is resolved:
-              // https://jira.mongodb.org/browse/PD-2171
-              & > label > div {
-                margin-top: 0;
-              }
-            `}
-          />
-        );
-
-        return (
-          <>
-            <span className={cx(flexSpan, disallowPointer)}>
-              {withIcons ? renderedIcon : checkbox}
-              <span id={optionTextId} className={displayNameStyle(isSelected)}>
-                {wrapJSX(displayName, inputValue, 'strong')}
-              </span>
-            </span>
-            {withIcons && checkbox}
-          </>
-        );
-      }
-
-      // Single select
-      return (
-        <>
-          <span className={cx(flexSpan, disallowPointer)}>
-            {renderedIcon}
-            <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}
-            />
-          )}
-        </>
-      );
-    }, [
-      multiselect,
-      renderedIcon,
-      isSelected,
-      displayName,
-      inputValue,
-      size,
-      darkMode,
-      optionTextId,
-      disabled,
-      withIcons,
-    ]);
-
-    return (
-      <li
-        ref={optionRef}
-        role="option"
-        aria-selected={isFocused}
-        aria-label={displayName}
-        tabIndex={-1}
-        className={cx(
-          comboboxOptionBaseStyle,
-          comboboxOptionSizeStyle[size],
-          comboboxOptionThemeStyle[theme],
-          {
-            [comboboxOptionActiveStyle[theme]]: isFocused,
-            [comboboxOptionDisabledStyle[theme]]: disabled,
-          },
-          className,
-        )}
-        onClick={handleOptionClick}
-        onKeyDown={handleOptionClick}
-      >
-        {renderedChildren}
-      </li>
-    );
-  },
-);
-InternalComboboxOption.displayName = 'ComboboxOption';
-
-export { InternalComboboxOption };
-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/Menu.styles.ts

@@ -1,112 +0,0 @@
-import { css, keyframes } from '@leafygreen-ui/emotion';
-import { Theme } from '@leafygreen-ui/lib';
-import { palette } from '@leafygreen-ui/palette';
-import { fontFamilies, typeScales } from '@leafygreen-ui/tokens';
-
-import { ComboboxSize } from './Combobox.types';
-
-/** Height of a menu item (in px) */
-export const menuItemHeight = 36;
-
-export const menuItemPadding: Record<ComboboxSize, { x: number; y: number }> = {
-  [ComboboxSize.Default]: { x: 12, y: 8 },
-  [ComboboxSize.Large]: { x: 12, y: 8 },
-};
-
-/**
- * Menu styles
- */
-
-export const popoverStyle = (width = 384) => css`
-  border-radius: 4px;
-  width: ${width}px;
-  overflow: hidden;
-`;
-
-export const popoverThemeStyle: Record<Theme, string> = {
-  [Theme.Light]: css`
-    box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.25);
-  `,
-  [Theme.Dark]: css``, // TODO: DarkMode
-};
-
-export const menuBaseStyle = css`
-  position: relative;
-  width: 100%;
-  margin: 0;
-  padding: 0;
-  font-family: ${fontFamilies.default};
-  border-radius: inherit;
-  overflow-y: auto;
-  scroll-behavior: smooth;
-  min-height: ${menuItemHeight}px;
-`;
-
-export const menuThemeStyle: Record<Theme, string> = {
-  [Theme.Light]: css`
-    color: ${palette.gray.dark3};
-    background-color: ${palette.white};
-  `,
-  [Theme.Dark]: css``, // TODO: DarkMode
-};
-
-export const menuList = css`
-  position: relative;
-  margin: 0;
-  padding: 0;
-`;
-
-export const menuMessageBaseStyle = css`
-  font-family: inherit;
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-`;
-
-export const menuMessageThemeStyle: Record<Theme, string> = {
-  [Theme.Light]: css`
-    ${palette.gray.dark1}
-  `,
-  [Theme.Dark]: css``, // TODO: DarkMode
-};
-
-export const menuMessageSizeStyle: Record<ComboboxSize, string> = {
-  [ComboboxSize.Default]: css`
-    font-size: ${typeScales.body1.fontSize +
-    1}px; // TODO: update this @ redesign
-    line-height: ${typeScales.body1.lineHeight +
-    1}px; // TODO: update this @ redesign
-    padding: ${menuItemPadding[ComboboxSize.Default].y}px
-      ${menuItemPadding[ComboboxSize.Default].x}px;
-  `,
-  [ComboboxSize.Large]: css`
-    font-size: ${typeScales.body2.fontSize}px;
-    line-height: ${typeScales.body2.lineHeight}px;
-    padding: ${menuItemPadding[ComboboxSize.Large].y}px
-      ${menuItemPadding[ComboboxSize.Large].x}px;
-  `,
-};
-
-export const menuMessageIconSizeStyle: Record<ComboboxSize, string> = {
-  [ComboboxSize.Default]: css`
-    height: ${typeScales.body1.fontSize + 1}px; // TODO: update this @ redesign
-    width: ${typeScales.body1.fontSize + 1}px; // TODO: update this @ redesign
-  `,
-  [ComboboxSize.Large]: css`
-    height: ${typeScales.body2.fontSize}px;
-    width: ${typeScales.body2.fontSize}px;
-  `,
-};
-
-const loadingIconAnimation = keyframes`
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-`;
-
-export const loadingIconStyle = css`
-  animation: ${loadingIconAnimation} 1.5s linear infinite;
-`;