@pagopa/mui-italia/dist/components/Chip/Chip.js

[Material-UI](https://mui.com/core/) theme inspired by [Bootstrap Italia](https://italia.github.io/bootstrap-italia/).

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const Chip_1 = tslib_1.__importDefault(require("@mui/material/Chip"));
const Cancel_1 = tslib_1.__importDefault(require("@mui/icons-material/Cancel"));
/**
 * This component resolves an accessibility issue with the deletable version of the Chip component.
 * When the Chip component has the onDelete property, it assumes the role button and a delete icon appears.
 * Whitout the onClick property the components is a button, but clicking on it nothing happens.
 * This leads to an accessiblity problems, because we have a button that does nothing and a delete icon that isn't reachable.
 * With this component we are going to remove the role button attribute.
 */
const Chip = (props) => {
    const { onDelete, onClick, sx, label, 'aria-label': ariaLabel } = props, other = tslib_1.__rest(props, ["onDelete", "onClick", "sx", "label", 'aria-label']);
    // If onClick is undefined and onDelete is defined, we are in the case of deletable Chip
    const isDeletableOnly = onDelete && !onClick;
    if (isDeletableOnly) {
        // render a component without those properties that are linked to a button
        return ((0, jsx_runtime_1.jsx)(Chip_1.default, Object.assign({ label: label, onDelete: onDelete, tabIndex: -1, role: undefined, sx: Object.assign(Object.assign({ cursor: 'default' }, sx), { '& .MuiChip-deleteIcon': {
                    cursor: 'pointer',
                } }), deleteIcon: (0, jsx_runtime_1.jsx)(Cancel_1.default, { tabIndex: 0, role: "button", "aria-label": (ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : `Delete %s`).replace('%s', label), style: { cursor: 'pointer' }, onKeyDown: (e) => {
                    if (e.key === 'Enter' || e.key === ' ') {
                        e.preventDefault();
                        e.stopPropagation();
                        onDelete === null || onDelete === void 0 ? void 0 : onDelete(e);
                    }
                } }) }, other)));
    }
    // Standar case: we render the default component
    return ((0, jsx_runtime_1.jsx)(Chip_1.default, Object.assign({ sx: sx, label: label, deleteIcon: (0, jsx_runtime_1.jsx)(Cancel_1.default, {}), onClick: onClick, onDelete: onDelete }, other, { "aria-label": ariaLabel })));
};
exports.default = Chip;