@mskcc/carbon-react/es/components/Dropdown/Dropdown.js

Carbon react components for the MSKCC DSM

/**
 * MSKCC 2021, 2024
 */

import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
import React__default, { useState, useContext, useRef } from 'react';
import { useSelect } from 'downshift';
import cx from 'classnames';
import PropTypes from 'prop-types';
import { WarningFilled, WarningAltFilled, Checkmark } from '@carbon/icons-react';
import ListBox from '../ListBox/index.js';
import mergeRefs from '../../tools/mergeRefs.js';
import deprecate from '../../prop-types/deprecate.js';
import { usePrefix } from '../../internal/usePrefix.js';
import '../FluidForm/FluidForm.js';
import { FormContext } from '../FluidForm/FormContext.js';
import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
import { ListBoxSize, ListBoxType } from '../ListBox/ListBoxPropTypes.js';

const getInstanceId = setupGetInstanceId();
const {
  MenuBlur,
  MenuKeyDownArrowDown,
  MenuKeyDownArrowUp,
  MenuKeyDownEscape,
  ToggleButtonClick
} = useSelect.stateChangeTypes;
const defaultItemToString = item => {
  if (typeof item === 'string') {
    return item;
  }
  if (typeof item === 'number') {
    return `${item}`;
  }
  if (item !== null && typeof item === 'object' && 'label' in item && typeof item['label'] === 'string') {
    return item['label'];
  }
  return '';
};
const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
  let {
    className: containerClassName,
    disabled,
    direction,
    items,
    label,
    ['aria-label']: ariaLabel,
    ariaLabel: deprecatedAriaLabel,
    itemToString = defaultItemToString,
    itemToElement,
    renderSelectedItem,
    type,
    size,
    onChange,
    id,
    titleText,
    hideLabel,
    helperText,
    translateWithId,
    light,
    invalid,
    invalidText,
    warn,
    warnText,
    initialSelectedItem,
    selectedItem: controlledSelectedItem,
    downshiftProps,
    readOnly,
    ...other
  } = _ref;
  const prefix = usePrefix();
  const [highlightedIndex, setHighlightedIndex] = useState();
  const {
    isFluid
  } = useContext(FormContext);
  const selectProps = {
    ...downshiftProps,
    items,
    itemToString,
    highlightedIndex,
    initialSelectedItem,
    onSelectedItemChange,
    onStateChange
  };
  const {
    current: dropdownInstanceId
  } = useRef(getInstanceId());
  function onStateChange(changes) {
    const {
      type
    } = changes;
    switch (type) {
      case MenuKeyDownArrowDown:
      case MenuKeyDownArrowUp:
        setHighlightedIndex(changes.highlightedIndex);
        break;
      case MenuBlur:
      case MenuKeyDownEscape:
        setHighlightedIndex(changes.highlightedIndex);
        break;
      case ToggleButtonClick:
        setHighlightedIndex(changes.highlightedIndex);
        break;
    }
  }

  // only set selectedItem if the prop is defined. Setting if it is undefined
  // will overwrite default selected items from useSelect
  if (controlledSelectedItem !== undefined) {
    selectProps.selectedItem = controlledSelectedItem;
  }
  const {
    isOpen,
    getToggleButtonProps,
    getLabelProps,
    getMenuProps,
    getItemProps,
    selectedItem
  } = useSelect(selectProps);
  const inline = type === 'inline';
  const showWarning = !invalid && warn;
  const [isFocused, setIsFocused] = useState(false);
  const className = cx(`${prefix}--dropdown`, {
    [`${prefix}--dropdown--invalid`]: invalid,
    [`${prefix}--dropdown--warning`]: showWarning,
    [`${prefix}--dropdown--open`]: isOpen,
    [`${prefix}--dropdown--inline`]: inline,
    [`${prefix}--dropdown--disabled`]: disabled,
    [`${prefix}--dropdown--light`]: light,
    [`${prefix}--dropdown--readonly`]: readOnly,
    [`${prefix}--dropdown--${size}`]: size,
    [`${prefix}--list-box--up`]: direction === 'top'
  });
  const titleClasses = cx(`${prefix}--label`, {
    [`${prefix}--label--disabled`]: disabled,
    [`${prefix}--visually-hidden`]: hideLabel
  });
  const helperClasses = cx(`${prefix}--form__helper-text`, {
    [`${prefix}--form__helper-text--disabled`]: disabled
  });
  const wrapperClasses = cx(`${prefix}--dropdown__wrapper`, `${prefix}--list-box__wrapper`, containerClassName, {
    [`${prefix}--dropdown__wrapper--inline`]: inline,
    [`${prefix}--list-box__wrapper--inline`]: inline,
    [`${prefix}--dropdown__wrapper--inline--invalid`]: inline && invalid,
    [`${prefix}--list-box__wrapper--inline--invalid`]: inline && invalid,
    [`${prefix}--list-box__wrapper--fluid--invalid`]: isFluid && invalid,
    [`${prefix}--list-box__wrapper--fluid--focus`]: isFluid && isFocused && !isOpen
  });
  const helperId = !helperText ? undefined : `dropdown-helper-text-${dropdownInstanceId}`;

  // needs to be Capitalized for react to render it correctly
  const ItemToElement = itemToElement;
  const toggleButtonProps = getToggleButtonProps();
  const helper = helperText && !isFluid ? /*#__PURE__*/React__default.createElement("div", {
    id: helperId,
    className: helperClasses
  }, helperText) : null;
  function onSelectedItemChange(_ref2) {
    let {
      selectedItem
    } = _ref2;
    setIsFocused(false);
    if (onChange) {
      onChange({
        selectedItem: selectedItem ?? null
      });
    }
  }
  const menuItemOptionRefs = useRef(items.map(_ => /*#__PURE__*/React__default.createRef()));
  const handleFocus = evt => {
    setIsFocused(evt.type === 'focus' ? true : false);
  };
  const mergedRef = mergeRefs(toggleButtonProps.ref, ref);
  const [currTimer, setCurrTimer] = useState();

  // eslint-disable-next-line prefer-const
  let [isTyping, setIsTyping] = useState(false);
  const readOnlyEventHandlers = readOnly ? {
    onClick: evt => {
      // NOTE: does not prevent click
      evt.preventDefault();
      // focus on the element as per readonly input behavior
      if (mergedRef.current !== undefined) {
        mergedRef.current.focus();
      }
    },
    onKeyDown: evt => {
      const selectAccessKeys = ['ArrowDown', 'ArrowUp', ' ', 'Enter'];
      // This prevents the select from opening for the above keys
      if (selectAccessKeys.includes(evt.key)) {
        evt.preventDefault();
      }
    }
  } : {
    onKeyDown: evt => {
      if (evt.code !== 'Space' || !['ArrowDown', 'ArrowUp', ' ', 'Enter'].includes(evt.key)) {
        setIsTyping(true);
      }
      if (isTyping && evt.code === 'Space' || !['ArrowDown', 'ArrowUp', ' ', 'Enter'].includes(evt.key)) {
        if (evt.code === 'Space') {
          evt.preventDefault();
          return;
        }
        if (currTimer) {
          clearTimeout(currTimer);
        }
        setCurrTimer(setTimeout(() => {
          setIsTyping(false);
        }, 3000));
      }
      toggleButtonProps.onKeyDown(evt);
    }
  };
  const menuProps = getMenuProps();
  return /*#__PURE__*/React__default.createElement("div", _extends({
    className: wrapperClasses
  }, other), titleText && /*#__PURE__*/React__default.createElement("label", _extends({
    className: titleClasses
  }, getLabelProps()), titleText), /*#__PURE__*/React__default.createElement(ListBox, {
    onFocus: handleFocus,
    onBlur: handleFocus,
    "aria-label": deprecatedAriaLabel || ariaLabel,
    size: size,
    className: className,
    invalid: invalid,
    invalidText: invalidText,
    warn: warn,
    warnText: warnText,
    light: light,
    isOpen: isOpen,
    id: id
  }, invalid && /*#__PURE__*/React__default.createElement(WarningFilled, {
    className: `${prefix}--list-box__invalid-icon`
  }), showWarning && /*#__PURE__*/React__default.createElement(WarningAltFilled, {
    className: `${prefix}--list-box__invalid-icon ${prefix}--list-box__invalid-icon--warning`
  }), /*#__PURE__*/React__default.createElement("button", _extends({
    type: "button"
    // aria-expanded is already being passed through {...toggleButtonProps}
    ,
    role: "combobox" // eslint-disable-line jsx-a11y/role-has-required-aria-props
    ,
    "aria-owns": getMenuProps().id,
    "aria-controls": getMenuProps().id,
    className: `${prefix}--list-box__field`,
    disabled: disabled,
    "aria-disabled": readOnly ? true : undefined // aria-disabled to remain focusable
    ,
    "aria-describedby": !inline && !invalid && !warn && helper ? helperId : undefined,
    title: selectedItem && itemToString !== undefined ? itemToString(selectedItem) : label
  }, toggleButtonProps, readOnlyEventHandlers, {
    ref: mergedRef
  }), /*#__PURE__*/React__default.createElement("span", {
    className: `${prefix}--list-box__label`
  }, selectedItem ? renderSelectedItem ? renderSelectedItem(selectedItem) : itemToString(selectedItem) : label), /*#__PURE__*/React__default.createElement(ListBox.MenuIcon, {
    isOpen: isOpen,
    translateWithId: translateWithId
  })), /*#__PURE__*/React__default.createElement(ListBox.Menu, menuProps, isOpen && items.map((item, index) => {
    const isObject = item !== null && typeof item === 'object';
    const disabled = isObject && 'disabled' in item && item.disabled === true;
    const itemProps = getItemProps({
      item,
      index,
      disabled
    });
    const title = isObject && 'text' in item && itemToElement ? item.text : itemToString(item);
    return /*#__PURE__*/React__default.createElement(ListBox.MenuItem, _extends({
      key: itemProps.id,
      isActive: selectedItem === item,
      isHighlighted: highlightedIndex === index,
      title: title,
      ref: {
        menuItemOptionRef: menuItemOptionRefs.current[index]
      }
    }, itemProps), typeof item === 'object' && ItemToElement !== undefined && ItemToElement !== null ? /*#__PURE__*/React__default.createElement(ItemToElement, _extends({
      key: itemProps.id
    }, item)) : itemToString(item), selectedItem === item && /*#__PURE__*/React__default.createElement(Checkmark, {
      className: `${prefix}--list-box__menu-item__selected-icon`
    }));
  }))), !inline && !invalid && !warn && helper);
});
Dropdown.displayName = 'Dropdown';
Dropdown.propTypes = {
  /**
   * 'aria-label' of the ListBox component.
   * Specify a label to be read by screen readers on the container node
   */
  ['aria-label']: PropTypes.string,
  /**
   * Deprecated, please use `aria-label` instead.
   * Specify a label to be read by screen readers on the container note.
   */
  ariaLabel: deprecate(PropTypes.string, 'This prop syntax has been deprecated. Please use the new `aria-label`.'),
  /**
   * Provide a custom className to be applied on the bx--dropdown node
   */
  className: PropTypes.string,
  /**
   * Specify the direction of the dropdown. Can be either top or bottom.
   */
  direction: PropTypes.oneOf(['top', 'bottom']),
  /**
   * Disable the control
   */
  disabled: PropTypes.bool,
  /**
   * Additional props passed to Downshift
   */
  downshiftProps: PropTypes.object,
  /**
   * Provide helper text that is used alongside the control label for
   * additional help
   */
  helperText: PropTypes.node,
  /**
   * Specify whether the title text should be hidden or not
   */
  hideLabel: PropTypes.bool,
  /**
   * Specify a custom `id`
   */
  id: PropTypes.string.isRequired,
  /**
   * Allow users to pass in an arbitrary item or a string (in case their items are an array of strings)
   * from their collection that are pre-selected
   */
  initialSelectedItem: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.number]),
  /**
   * Specify if the currently selected value is invalid.
   */
  invalid: PropTypes.bool,
  /**
   * Message which is displayed if the value is invalid.
   */
  invalidText: PropTypes.node,
  /**
   * Function to render items as custom components instead of strings.
   * Defaults to null and is overridden by a getter
   */
  itemToElement: PropTypes.func,
  /**
   * Helper function passed to downshift that allows the library to render a
   * given item to a string label. By default, it extracts the `label` field
   * from a given item to serve as the item label in the list.
   */
  itemToString: PropTypes.func,
  /**
   * We try to stay as generic as possible here to allow individuals to pass
   * in a collection of whatever kind of data structure they prefer
   */
  items: PropTypes.array.isRequired,
  /**
   * Generic `label` that will be used as the textual representation of what
   * this field is for
   */
  label: PropTypes.node.isRequired,
  /**
   * `true` to use the light version.
   */
  light: deprecate(PropTypes.bool, 'The `light` prop for `Dropdown` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
  /**
   * `onChange` is a utility for this controlled component to communicate to a
   * consuming component what kind of internal state changes are occurring.
   */
  onChange: PropTypes.func,
  /**
   * Whether or not the Dropdown is readonly
   */
  readOnly: PropTypes.bool,
  /**
   * An optional callback to render the currently selected item as a react element instead of only
   * as a string.
   */
  renderSelectedItem: PropTypes.func,
  /**
   * In the case you want to control the dropdown selection entirely.
   */
  selectedItem: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.number]),
  /**
   * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
   */
  size: ListBoxSize,
  /**
   * Provide the title text that will be read by a screen reader when
   * visiting this control
   */
  titleText: PropTypes.node.isRequired,
  /**
   * Callback function for translating ListBoxMenuIcon SVG title
   */
  translateWithId: PropTypes.func,
  /**
   * The dropdown type, `default` or `inline`
   */
  type: ListBoxType,
  /**
   * Specify whether the control is currently in warning state
   */
  warn: PropTypes.bool,
  /**
   * Provide the text that is displayed when the control is in warning state
   */
  warnText: PropTypes.node
};
Dropdown.defaultProps = {
  disabled: false,
  type: 'default',
  itemToString: defaultItemToString,
  itemToElement: null,
  titleText: '',
  helperText: '',
  direction: 'bottom'
};

export { Dropdown as default };