@boomerang-io/carbon-addons-boomerang-react/dist/cjs/components/CheckboxList/CheckboxList.js

Carbon Addons for Boomerang apps

'use strict';

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

var React = require('react');
var react = require('@carbon/react');
var icons = require('@carbon/react/icons');
var TooltipHover = require('../TooltipHover/TooltipHover.js');
var settings = require('../../internal/settings.js');

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

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

/*
IBM Confidential
694970X, 69497O0
© Copyright IBM Corp. 2022, 2024
*/
function CheckboxListComponent({ checkboxProps, disabled, helperText, id, initialSelectedItems = [], label, labelText, onChange, options, selectedItems: propsSelectedItems, tooltipClassName = `${settings.prefix}--bmrg-checkbox-list__tooltip`, tooltipContent, tooltipProps = { direction: "top" }, }) {
    const [stateSelectedItems, setSelectedItems] = React.useState(initialSelectedItems);
    const selectedItems = propsSelectedItems || stateSelectedItems; // Externally controlled if selectedItems props exists
    const handleCheckboxChange = (event, { checked: value, id }) => {
        let newSelectedItems = [...stateSelectedItems];
        if (value) {
            newSelectedItems.push(id);
        }
        else {
            newSelectedItems = newSelectedItems.filter((item) => item !== id);
        }
        setSelectedItems(newSelectedItems);
        if (typeof onChange === "function") {
            onChange(value, id, event, newSelectedItems);
        }
    };
    const labelValue = label || labelText;
    const labelTextId = !labelValue ? undefined : `${id}-label`;
    return (React__default.default.createElement("div", { key: id, className: `${settings.prefix}--bmrg-checkbox-list` },
        labelValue && (React__default.default.createElement("div", { className: `${settings.prefix}--bmrg-checkbox-list__title` },
            React__default.default.createElement("div", { id: labelTextId, className: `${settings.prefix}--label`, style: { marginBottom: ".3125rem" } }, labelValue),
            tooltipContent && (React__default.default.createElement("div", { className: tooltipClassName },
                React__default.default.createElement(TooltipHover.default, { ...tooltipProps, tooltipText: tooltipContent },
                    React__default.default.createElement(icons.Information, { size: 16, fill: "currentColor" })))))),
        helperText && React__default.default.createElement("div", { className: `${settings.prefix}--form__helper-text` }, helperText),
        React__default.default.createElement("div", { className: `${settings.prefix}--bmrg-checkbox-list__list` }, options.map((option) => {
            const checked = selectedItems.some((item) => item === option.id);
            return (React__default.default.createElement(react.Checkbox, { disabled: disabled, key: option.id, id: option.id, labelText: option.labelText, onChange: handleCheckboxChange, checked: checked, ...checkboxProps }));
        }))));
}

exports.default = CheckboxListComponent;