@mskcc/carbon-react/es/components/ListBox/next/ListBoxSelection.js

Carbon react components for the MSKCC DSM

/**
 * MSKCC 2021, 2024
 */

import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
import cx from 'classnames';
import React__default from 'react';
import PropTypes from 'prop-types';
import { Close } from '@carbon/icons-react';
import { usePrefix } from '../../../internal/usePrefix.js';
import { Icon } from '../../Icon/MskIcon.js';

var _Close, _Icon;

/**
 * `ListBoxSelection` is used to provide controls for clearing a selection, in
 * addition to conditionally rendering a badge if the control has more than one
 * selection.
 */
function ListBoxSelection(_ref) {
  let {
    clearSelection,
    selectionCount,
    translateWithId: t,
    disabled,
    onClearSelection,
    ...rest
  } = _ref;
  const prefix = usePrefix();
  const className = cx(`${prefix}--list-box__selection`, {
    [`${prefix}--tag--filter`]: selectionCount,
    [`${prefix}--list-box__selection--multi`]: selectionCount
  });
  const description = selectionCount ? t('clear.all') : t('clear.selection');
  const tagClasses = cx(`${prefix}--tag`, `${prefix}--tag--filter`, `${prefix}--tag--high-contrast`, {
    [`${prefix}--tag--disabled`]: disabled
  });
  function onClick(event) {
    event.stopPropagation();
    if (disabled) {
      return;
    }
    clearSelection(event);
    if (onClearSelection) {
      onClearSelection(event);
    }
  }
  if (selectionCount) {
    return /*#__PURE__*/React__default.createElement("div", {
      className: tagClasses
    }, /*#__PURE__*/React__default.createElement("span", {
      className: `${prefix}--tag__label`,
      title: selectionCount
    }, selectionCount), /*#__PURE__*/React__default.createElement("button", {
      "aria-label": description,
      className: `${prefix}--tag__close-icon`,
      disabled: disabled,
      onClick: onClick,
      tabIndex: -1,
      title: description,
      type: "button"
    }, _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, null))));
  }
  return /*#__PURE__*/React__default.createElement("button", _extends({}, rest, {
    "aria-label": description,
    className: className,
    disabled: disabled,
    onClick: onClick,
    tabIndex: -1,
    title: description,
    type: "button"
  }), _Icon || (_Icon = /*#__PURE__*/React__default.createElement(Icon, {
    icon: "clear",
    size: "sm"
  })));
}
ListBoxSelection.propTypes = {
  /**
   * Specify a function to be invoked when a user interacts with the clear
   * selection element.
   */
  clearSelection: PropTypes.func.isRequired,
  /**
   * Specify whether or not the clear selection element should be disabled
   */
  disabled: PropTypes.bool,
  /**
   * Specify an optional `onClearSelection` handler that is called when the underlying
   * element is cleared
   */
  onClearSelection: PropTypes.func,
  /**
   * Specify an optional `onClick` handler that is called when the underlying
   * clear selection element is clicked
   */
  onClick: PropTypes.func,
  /**
   * Specify an optional `onKeyDown` handler that is called when the underlying
   * clear selection element fires a keydown event
   */
  onKeyDown: PropTypes.func,
  /**
   * Specify an optional `selectionCount` value that will be used to determine
   * whether the selection should display a badge or a single clear icon.
   */
  selectionCount: PropTypes.number,
  /**
   * i18n hook used to provide the appropriate description for the given menu
   * icon. This function takes in an id defined in `translationIds` and should
   * return a string message for that given message id.
   */
  translateWithId: PropTypes.func.isRequired
};

export { ListBoxSelection as default };