@carbon/ibm-products
Version:
Carbon for IBM Products
280 lines (278 loc) • 12.6 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.
*/
const require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_index = require("../../node_modules/classnames/index.js");
const require_settings = require("../../settings.js");
const require_TearsheetNarrow = require("../Tearsheet/TearsheetNarrow.js");
const require_NotFoundEmptyState = require("../EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js");
const require_Tearsheet = require("../Tearsheet/Tearsheet.js");
const require_AddSelectSidebar = require("./AddSelectSidebar.js");
const require_AddSelectBreadcrumbs = require("./AddSelectBreadcrumbs.js");
const require_AddSelectList = require("./AddSelectList.js");
const require_AddSelectSort = require("./AddSelectSort.js");
const require_add_select_utils = require("./add-select-utils.js");
const require_useItemSort = require("./hooks/useItemSort.js");
const require_useParentSelect = require("./hooks/useParentSelect.js");
const require_AddSelectColumn = require("./AddSelectColumn.js");
const require_AddSelectFilter = require("./AddSelectFilter.js");
const require_usePath = require("./hooks/usePath.js");
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(prop_types);
let _carbon_react = require("@carbon/react");
//#region src/components/AddSelect/AddSelectBody.tsx
var import_classnames = /* @__PURE__ */ require_runtime.__toESM(require_index.default);
const blockClass = `${require_settings.pkg.prefix}--add-select`;
const componentName = "AddSelectBody";
const AddSelectBody = (0, react.forwardRef)(({ className, clearFiltersText, closeIconDescription, columnInputPlaceholder, defaultModifiers, description, filterByLabel, globalFilterOpts, globalFiltersLabel, globalFiltersIconDescription, globalFiltersPlaceholderText, globalFiltersPrimaryButtonText, globalFiltersSecondaryButtonText, globalSearchLabel, globalSearchPlaceholder, globalSortBy, illustrationTheme, influencerTitle, items, itemsLabel, metaIconDescription, metaPanelTitle, multi, navIconDescription, noResultsDescription, noResultsTitle, noSelectionDescription, noSelectionTitle, noTearsheet = false, normalizedItems, onClose, onCloseButtonText, onSubmit, onSubmitButtonText, open, portalTarget, searchResultsTitle, sortByLabel, title, useNormalizedItems, ...rest }, ref) => {
const [singleSelection, setSingleSelection] = (0, react.useState)("");
const [multiSelection, setMultiSelection] = (0, react.useState)([]);
const [searchTerm, setSearchTerm] = (0, react.useState)("");
const [appliedGlobalFilters, setAppliedGlobalFilters] = (0, react.useState)({});
const [displayMetalPanel, setDisplayMetaPanel] = (0, react.useState)({});
const [appliedModifiers, setAppliedModifiers] = (0, react.useState)(defaultModifiers);
const { sortDirection, setSortDirection, sortAttribute, setSortAttribute } = require_useItemSort.useItemSort();
const { parentSelected, setParentSelected } = require_useParentSelect.default();
const { path, setPath, pathOnclick, resetPath } = require_usePath.default(itemsLabel);
const resetState = () => {
setSingleSelection("");
setMultiSelection([]);
setSearchTerm("");
setAppliedGlobalFilters({});
setDisplayMetaPanel({});
setAppliedModifiers(defaultModifiers);
setSortAttribute("");
setSortDirection("");
setParentSelected(null);
resetPath();
};
const onCloseHandler = () => {
resetState();
onClose?.();
};
const tearsheetClassnames = (0, import_classnames.default)(className, blockClass, {
[`${blockClass}__single`]: !multi,
[`${blockClass}__multi`]: multi
});
const globalFilterKeys = Object.keys(appliedGlobalFilters);
const globalFiltersApplied = globalFilterKeys.length > 0;
const handleSearch = (term) => {
setSearchTerm(term);
};
const handleFilter = (filters) => {
setAppliedGlobalFilters(filters);
};
const submitHandler = () => {
if (multi && appliedModifiers && appliedModifiers?.length > 0) {
const selections = multiSelection.map((item) => {
return appliedModifiers.find((mod) => mod.id === item);
});
onSubmit?.(selections);
} else if (multi && appliedModifiers?.length === 0) onSubmit?.(multiSelection);
else onSubmit?.(singleSelection);
onCloseHandler();
};
const setShowBreadsCrumbs = () => {
if (useNormalizedItems === false || searchTerm || globalFiltersApplied) return false;
return true;
};
const setShowTags = () => {
if (searchTerm) return true;
if (useNormalizedItems && multi) return false;
return true;
};
const parentSelectionHandler = (id, title, parentId) => {
setParentSelected(id);
setPath(id, title, parentId);
};
const itemsToDisplay = require_add_select_utils.getFilteredItems(useNormalizedItems, normalizedItems, searchTerm, globalFiltersApplied, globalFilterKeys, appliedGlobalFilters, require_add_select_utils.sortItems(sortAttribute, sortDirection), multi, items, path);
const hasResults = itemsToDisplay.length > 0;
const showBreadsCrumbs = setShowBreadsCrumbs();
const showSort = (searchTerm || globalFiltersApplied) && hasResults;
const showTags = setShowTags();
const commonListProps = {
displayMetalPanel,
metaIconDescription,
multi,
multiSelection,
navIconDescription,
path,
setMultiSelection,
setPath,
setSingleSelection,
singleSelection,
setDisplayMetaPanel,
parentId: path[0].id
};
const commonTearsheetProps = {
...rest,
className: tearsheetClassnames,
open,
title,
description,
actions: [{
label: onCloseButtonText,
kind: "secondary",
onClick: onCloseHandler
}, {
label: onSubmitButtonText,
kind: "primary",
onClick: submitHandler,
disabled: multi ? multiSelection.length === 0 : !singleSelection
}],
portalTarget,
ref
};
const sidebarProps = {
appliedModifiers,
closeIconDescription,
displayMetalPanel,
illustrationTheme,
influencerTitle,
items: useNormalizedItems ? normalizedItems : items?.entries,
metaPanelTitle,
modifiers: items?.modifiers,
multiSelection,
noSelectionDescription,
noSelectionTitle,
setDisplayMetaPanel
};
const displayColumnView = multi && useNormalizedItems && !searchTerm && !globalFiltersApplied;
const body = /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement("div", {
id: "add-select",
className: `${blockClass}__header`
}, /* @__PURE__ */ react.default.createElement(require_AddSelectFilter.AddSelectFilter, {
inputLabel: globalSearchLabel,
inputPlaceholder: globalSearchPlaceholder,
searchTerm,
handleSearch,
multi,
filterOpts: globalFilterOpts,
filtersLabel: globalFiltersLabel,
handleFilter,
primaryButtonText: globalFiltersPrimaryButtonText,
secondaryButtonText: globalFiltersSecondaryButtonText,
placeholder: globalFiltersPlaceholderText,
iconDescription: globalFiltersIconDescription,
appliedFilters: appliedGlobalFilters,
hasFiltersApplied: globalFiltersApplied,
clearFiltersText
}), /* @__PURE__ */ react.default.createElement("div", { className: (0, import_classnames.default)(`${blockClass}__sub-header`, { [`${blockClass}__sub-header-multi`]: multi }) }, /* @__PURE__ */ react.default.createElement("div", { className: `${blockClass}__tags` }, showBreadsCrumbs ? /* @__PURE__ */ react.default.createElement(require_AddSelectBreadcrumbs.AddSelectBreadcrumbs, {
path,
onClick: pathOnclick,
multi
}) : /* @__PURE__ */ react.default.createElement("p", { className: `${blockClass}__tags-label` }, searchTerm ? searchResultsTitle : itemsLabel), showTags && /* @__PURE__ */ react.default.createElement(_carbon_react.Tag, {
type: "gray",
size: "sm"
}, itemsToDisplay.length)), showSort && /* @__PURE__ */ react.default.createElement(require_AddSelectSort.AddSelectSort, {
setSortAttribute,
setSortDirection,
sortBy: globalSortBy
}))), displayColumnView ? /* @__PURE__ */ react.default.createElement("div", { className: `${blockClass}__columns` }, /* @__PURE__ */ react.default.createElement(require_AddSelectColumn.AddSelectColumn, {
...commonListProps,
items: itemsToDisplay,
columnInputPlaceholder,
header: path[0]?.title,
filterByLabel,
sortByLabel
})) : /* @__PURE__ */ react.default.createElement("div", null, hasResults ? /* @__PURE__ */ react.default.createElement(require_AddSelectList.AddSelectList, {
...commonListProps,
filteredItems: itemsToDisplay,
modifiers: items?.modifiers,
appliedModifiers,
setAppliedModifiers,
setParentSelected: parentSelectionHandler,
parentSelected,
parentId: parentSelected || path[0].id
}) : /* @__PURE__ */ react.default.createElement("div", { className: `${blockClass}__body` }, /* @__PURE__ */ react.default.createElement(require_NotFoundEmptyState.NotFoundEmptyState, {
subtitle: noResultsDescription,
title: noResultsTitle,
illustrationTheme
}))));
if (noTearsheet) return body;
if (multi) return /* @__PURE__ */ react.default.createElement(require_Tearsheet.Tearsheet, {
...commonTearsheetProps,
influencer: multi && /* @__PURE__ */ react.default.createElement(require_AddSelectSidebar.AddSelectSidebar, sidebarProps),
influencerPosition: "right"
}, body);
return /* @__PURE__ */ react.default.createElement(require_TearsheetNarrow.TearsheetNarrow, commonTearsheetProps, body);
});
AddSelectBody.propTypes = {
className: prop_types.default.string,
clearFiltersText: prop_types.default.string,
closeIconDescription: prop_types.default.string,
columnInputPlaceholder: prop_types.default.string,
defaultModifiers: prop_types.default.array,
description: prop_types.default.string,
filterByLabel: prop_types.default.string,
globalFilterOpts: prop_types.default.array,
globalFiltersIconDescription: prop_types.default.string,
globalFiltersLabel: prop_types.default.string,
globalFiltersPlaceholderText: prop_types.default.string,
globalFiltersPrimaryButtonText: prop_types.default.string,
globalFiltersSecondaryButtonText: prop_types.default.string,
globalSearchLabel: prop_types.default.string.isRequired,
globalSearchPlaceholder: prop_types.default.string,
globalSortBy: prop_types.default.array,
illustrationTheme: prop_types.default.oneOf(["light", "dark"]),
influencerTitle: prop_types.default.string,
/**@ts-ignore */
items: prop_types.default.shape({
modifiers: prop_types.default.shape({
id: prop_types.default.string,
label: prop_types.default.string,
options: prop_types.default.array,
multiSelect: prop_types.default.bool
}),
sortBy: prop_types.default.array,
filterBy: prop_types.default.array,
entries: prop_types.default.arrayOf(prop_types.default.shape({
avatar: prop_types.default.shape({
alt: prop_types.default.string,
icon: prop_types.default.oneOfType([prop_types.default.func, prop_types.default.object]),
src: prop_types.default.string,
theme: prop_types.default.oneOf(["light", "dark"])
}),
children: prop_types.default.object,
icon: prop_types.default.oneOfType([prop_types.default.func, prop_types.default.object]),
id: prop_types.default.string.isRequired,
meta: prop_types.default.oneOfType([prop_types.default.arrayOf(prop_types.default.shape({
id: prop_types.default.string,
title: prop_types.default.string,
value: prop_types.default.string
})), prop_types.default.node]),
subtitle: prop_types.default.string,
title: prop_types.default.string.isRequired,
value: prop_types.default.string.isRequired
}))
}),
itemsLabel: prop_types.default.string,
metaIconDescription: prop_types.default.string,
metaPanelTitle: prop_types.default.string,
multi: prop_types.default.bool,
navIconDescription: prop_types.default.string,
noResultsDescription: prop_types.default.string,
noResultsTitle: prop_types.default.string,
noSelectionDescription: prop_types.default.string,
noSelectionTitle: prop_types.default.string,
normalizedItems: prop_types.default.object,
onClose: prop_types.default.func,
onCloseButtonText: prop_types.default.string,
onSubmit: prop_types.default.func,
onSubmitButtonText: prop_types.default.string,
open: prop_types.default.bool,
/**@ts-ignore */
portalTarget: prop_types.default.node,
searchResultsTitle: prop_types.default.string,
sortByLabel: prop_types.default.string,
title: prop_types.default.string,
useNormalizedItems: prop_types.default.bool
};
AddSelectBody.displayName = componentName;
//#endregion
exports.AddSelectBody = AddSelectBody;