@boomerang-io/carbon-addons-boomerang-react/dist/cjs/internal/ListBox/ListBoxSelection.js

Carbon Addons for Boomerang apps

'use strict';

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

var React = require('react');
var cx = require('classnames');
var icons = require('@carbon/react/icons');
var keys = require('../keyboard/keys.js');
var match = require('../keyboard/match.js');
var settings = require('../settings.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);
var cx__default = /*#__PURE__*/_interopDefault(cx);

/*
IBM Confidential
694970X, 69497O0
© Copyright IBM Corp. 2022, 2024
*/
/**
 * Copyright IBM Corp. 2016, 2018
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
/**
 * `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({ clearSelection, selectionCount, translateWithId: t = (id) => defaultTranslations[id], disabled, onClearSelection, }) {
    const className = cx__default.default(`${settings.prefix}--list-box__selection`, {
        [`${settings.prefix}--tag--filter`]: selectionCount,
        [`${settings.prefix}--list-box__selection--multi`]: selectionCount,
    });
    const handleOnClick = (event) => {
        event.stopPropagation();
        if (disabled) {
            return;
        }
        clearSelection(event);
        if (onClearSelection) {
            onClearSelection(event);
        }
    };
    const handleOnKeyDown = (event) => {
        event.stopPropagation();
        if (disabled) {
            return;
        }
        // When a user hits ENTER, we'll clear the selection
        if (match.match(event, keys.Enter)) {
            clearSelection(event);
            if (onClearSelection) {
                onClearSelection(event);
            }
        }
    };
    const description = selectionCount ? t("clear.all") : t("clear.selection");
    const tagClasses = cx__default.default(`${settings.prefix}--tag`, `${settings.prefix}--tag--filter`, `${settings.prefix}--tag--high-contrast`, {
        [`${settings.prefix}--tag--disabled`]: disabled,
    });
    return selectionCount ? (React__default.default.createElement("div", { className: tagClasses },
        React__default.default.createElement("span", { className: `${settings.prefix}--tag__label`, title: String(selectionCount) }, selectionCount),
        React__default.default.createElement("div", { role: "button", tabIndex: disabled ? -1 : 0, className: `${settings.prefix}--tag__close-icon`, onClick: handleOnClick, onKeyDown: handleOnKeyDown, 
            // @ts-expect-error TS(2322)
            disabled: disabled, "aria-label": t("clear.all"), title: description },
            React__default.default.createElement(icons.Close, null)))) : (React__default.default.createElement("div", { role: "button", className: className, tabIndex: disabled ? -1 : 0, onClick: handleOnClick, onKeyDown: handleOnKeyDown, "aria-label": description, title: description },
        selectionCount,
        React__default.default.createElement(icons.Close, null)));
}
const translationIds = {
    "clear.all": "clear.all",
    "clear.selection": "clear.selection",
};
const defaultTranslations = {
    [translationIds["clear.all"]]: "Clear all selected items",
    [translationIds["clear.selection"]]: "Clear selected item",
};

exports.default = ListBoxSelection;
exports.translationIds = translationIds;