@carbon/react/lib/components/ListBox/next/ListBoxSelection.js

React components for the Carbon Design System

/**
 * Copyright IBM Corp. 2016, 2023
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
var cx = require('classnames');
var React = require('react');
var PropTypes = require('prop-types');
var iconsReact = require('@carbon/icons-react');
var usePrefix = require('../../../internal/usePrefix.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);

var _Close, _Close2;
const defaultTranslations = {
  'clear.all': 'Clear all selected items',
  'clear.selection': 'Clear selected item'
};
function defaultTranslateWithId(id) {
  return defaultTranslations[id];
}
function ListBoxSelection({
  clearSelection,
  selectionCount,
  translateWithId: t = defaultTranslateWithId,
  disabled,
  readOnly,
  onClearSelection,
  ...rest
}) {
  const prefix = usePrefix.usePrefix();
  const className = cx__default["default"](`${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__default["default"](`${prefix}--tag`, `${prefix}--tag--filter`, `${prefix}--tag--high-contrast`, {
    [`${prefix}--tag--disabled`]: disabled
  });
  function onClick(event) {
    event.stopPropagation();
    if (disabled || readOnly) {
      return;
    }
    clearSelection(event);
    if (onClearSelection) {
      onClearSelection(event);
    }
  }
  if (selectionCount) {
    return /*#__PURE__*/React__default["default"].createElement("div", {
      className: tagClasses
    }, /*#__PURE__*/React__default["default"].createElement("span", {
      className: `${prefix}--tag__label`,
      title: selectionCount?.toString()
    }, selectionCount), /*#__PURE__*/React__default["default"].createElement("button", {
      "aria-label": description,
      className: `${prefix}--tag__close-icon`,
      disabled: disabled || readOnly,
      onClick: onClick,
      tabIndex: -1,
      title: description,
      type: "button",
      "aria-disabled": readOnly ? true : undefined
    }, _Close || (_Close = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, null))));
  }
  return /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, rest, {
    "aria-label": description,
    className: className,
    disabled: disabled || readOnly,
    onClick: onClick,
    tabIndex: -1,
    title: description,
    type: "button",
    "aria-disabled": readOnly ? true : undefined
  }), _Close2 || (_Close2 = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, null)));
}
ListBoxSelection.propTypes = {
  /**
   * Specify a function to be invoked when a user interacts with the clear
   * selection element.
   */
  clearSelection: PropTypes__default["default"].func.isRequired,
  /**
   * Specify whether or not the clear selection element should be disabled
   */
  disabled: PropTypes__default["default"].bool,
  /**
   * Whether or not the listbox is readonly
   */
  readOnly: PropTypes__default["default"].bool,
  /**
   * Specify an optional `onClearSelection` handler that is called when the underlying
   * element is cleared
   */
  onClearSelection: PropTypes__default["default"].func,
  /**
   * Specify an optional `onClick` handler that is called when the underlying
   * clear selection element is clicked
   */
  onClick: PropTypes__default["default"].func,
  /**
   * Specify an optional `onClick` handler that is called when the underlying
   * clear selection element is clicked
   */
  onMouseUp: PropTypes__default["default"].func,
  /**
   * Specify an optional `onKeyDown` handler that is called when the underlying
   * clear selection element fires a keydown event
   */
  onKeyDown: PropTypes__default["default"].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__default["default"].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__default["default"].func
};

exports["default"] = ListBoxSelection;