@carbon/ibm-products
Version:
Carbon for IBM Products
97 lines (95 loc) • 4.41 kB
JavaScript
/**
* Copyright IBM Corp. 2020, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import { __toESM } from "../../../_virtual/_rolldown/runtime.js";
import { require_classnames } from "../../../node_modules/classnames/index.js";
import { AddSelectContext, blockClass } from "./context.js";
import React, { forwardRef, useState } from "react";
import PropTypes from "prop-types";
import { Checkbox, Search, Tag } from "@carbon/react";
//#region src/components/AddSelect/next/AddSelectColumn.tsx
/**
* Copyright IBM Corp. 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
var import_classnames = /* @__PURE__ */ __toESM(require_classnames());
const AddSelectColumn = forwardRef(({ children, title = "", searchLabel = "Search", searchPlaceholder = "Search", onSearch, actionsSlot, hideSearch = false, multi = false, showSelectAll = false, itemCount = 0, allSelected = false, allIndeterminate = false, onSelectAll, onNavigate, className, searchProps, tagProps, selectAllCheckboxProps, ...rest }, ref) => {
const parentContext = React.useContext(AddSelectContext);
const [searchTerm, setSearchTerm] = useState("");
const handleSearch = (e) => {
const value = e.target.value;
setSearchTerm(value);
onSearch?.(value);
};
const handleSelectAll = (_event, { checked }) => {
onSelectAll?.(checked);
};
const columnClasses = (0, import_classnames.default)(`${blockClass}-column`, className);
const columnContext = {
...parentContext,
multi,
onNavigate
};
return /* @__PURE__ */ React.createElement(AddSelectContext.Provider, { value: columnContext }, /* @__PURE__ */ React.createElement("div", {
className: columnClasses,
ref,
...rest
}, (!hideSearch || actionsSlot) && /* @__PURE__ */ React.createElement("div", { className: (0, import_classnames.default)(`${blockClass}-column__search`, { [`${blockClass}-column__search--with-actions`]: actionsSlot }) }, !hideSearch && /* @__PURE__ */ React.createElement("div", { className: actionsSlot ? `${blockClass}-column__search-input` : "" }, /* @__PURE__ */ React.createElement(Search, {
labelText: searchLabel,
placeholder: searchPlaceholder,
size: "md",
onChange: handleSearch,
value: searchTerm,
...searchProps
})), actionsSlot && /* @__PURE__ */ React.createElement("div", { className: `${blockClass}-column__actions` }, actionsSlot)), (showSelectAll || title) && /* @__PURE__ */ React.createElement("div", { className: `${blockClass}-column__header` }, showSelectAll && multi ? /* @__PURE__ */ React.createElement(Checkbox, {
id: `select-all-${title}`,
className: `${blockClass}-column__select-all`,
checked: allSelected,
indeterminate: allIndeterminate,
onChange: handleSelectAll,
labelText: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: `${blockClass}-column__title` }, title), itemCount > 0 && /* @__PURE__ */ React.createElement(Tag, {
type: "gray",
size: "sm",
...tagProps
}, itemCount)),
...selectAllCheckboxProps
}) : /* @__PURE__ */ React.createElement("div", { className: `${blockClass}-column__title-wrapper` }, /* @__PURE__ */ React.createElement("span", { className: `${blockClass}-column__title` }, title), itemCount > 0 && /* @__PURE__ */ React.createElement(Tag, {
type: "gray",
size: "sm",
...tagProps
}, itemCount))), /* @__PURE__ */ React.createElement("div", { className: `${blockClass}-column__rows` }, children)));
});
AddSelectColumn.propTypes = {
actionsSlot: PropTypes.node,
allIndeterminate: PropTypes.bool,
allSelected: PropTypes.bool,
children: PropTypes.node,
className: PropTypes.string,
hideSearch: PropTypes.bool,
itemCount: PropTypes.number,
multi: PropTypes.bool,
/**@ts-ignore */
onNavigate: PropTypes.func,
/**@ts-ignore */
onSearch: PropTypes.func,
/**@ts-ignore */
onSelectAll: PropTypes.func,
searchLabel: PropTypes.string,
searchPlaceholder: PropTypes.string,
/**@ts-ignore */
searchProps: PropTypes.object,
/**@ts-ignore */
selectAllCheckboxProps: PropTypes.object,
showSelectAll: PropTypes.bool,
/**@ts-ignore */
tagProps: PropTypes.object,
title: PropTypes.string
};
AddSelectColumn.displayName = "AddSelectColumn";
//#endregion
export { AddSelectColumn as default };