@carbon/ibm-products
Version:
Carbon for IBM Products
113 lines (111 loc) • 5.18 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_util = require("../../utils/util.js");
const require_ConditionBuilderProvider = require("../../ConditionBuilderContext/ConditionBuilderProvider.js");
const require_useTranslations = require("../../utils/useTranslations.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");
let _carbon_react_icons = require("@carbon/react/icons");
//#region src/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.tsx
/**
* Copyright IBM Corp. 2024
*
* 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 ItemOption = ({ conditionState = {}, config = {}, onChange, closePopover, group }) => {
const { popOverSearchThreshold } = (0, react.useContext)(require_ConditionBuilderProvider.ConditionBuilderContext);
const contentRef = (0, react.useRef)(null);
const [propertyText, clearSearchText] = require_useTranslations.useTranslations(["propertyText", "clearSearchText"]);
const { conditionBuilderRef } = (0, react.useContext)(require_ConditionBuilderProvider.ConditionBuilderContext);
const allOptions = config?.options;
const [searchValue, setSearchValue] = (0, react.useState)("");
const selection = conditionState.value;
const filteredItems = searchValue ? allOptions?.filter((opt) => opt.label?.toLowerCase().includes(searchValue.toLowerCase())) : allOptions;
(0, react.useEffect)(() => {
if (contentRef.current) {
const firstFocusableElement = contentRef.current?.querySelector("input, button,li");
if (firstFocusableElement) firstFocusableElement.focus();
}
}, [allOptions]);
const onClickHandler = (evt, option) => {
if (!evt.currentTarget.hasAttribute("aria-disabled")) onChange(option.id, evt);
};
const onSearchChangeHandler = (evt) => {
const { value } = evt.target;
setSearchValue(value);
};
const getAriaLabel = () => {
return conditionState.label ? conditionState.label : propertyText;
};
const getStatementContent = (option) => {
return /* @__PURE__ */ react.default.createElement("div", { className: `${require_util.blockClass}__statement_wrapper` }, /* @__PURE__ */ react.default.createElement("div", null, option.label, " (", option.connector, ")"), /* @__PURE__ */ react.default.createElement("div", null, option.secondaryLabel));
};
if (!allOptions) return;
return /* @__PURE__ */ react.default.createElement("div", {
className: `${require_util.blockClass}__item-option`,
ref: contentRef
}, allOptions.length > popOverSearchThreshold ? /* @__PURE__ */ react.default.createElement("div", { className: `${require_util.blockClass}__item-option__search` }, /* @__PURE__ */ react.default.createElement(_carbon_react.Search, {
size: "sm",
labelText: clearSearchText,
closeButtonLabelText: clearSearchText,
onChange: onSearchChangeHandler,
onKeyDown: (evt) => {
require_util.onKeyDownHandlerForSearch(evt, conditionBuilderRef, closePopover);
}
})) : null, /* @__PURE__ */ react.default.createElement("ul", {
"aria-label": getAriaLabel(),
role: "listbox"
}, filteredItems?.map((option) => {
const isSelected = selection === option.id;
const Icon = option.icon;
const disabled = option?.getIsDisabled?.({
conditionState,
group
});
const hidden = option?.getIsHidden?.({
conditionState,
group
});
return /* @__PURE__ */ react.default.createElement("li", {
tabIndex: 0,
key: option.id,
role: "option",
"aria-selected": isSelected,
className: `${require_util.blockClass}__item-option__option`,
onKeyUp: () => {
return false;
},
onClick: (evt) => onClickHandler(evt, option),
...disabled ? { "aria-disabled": "true" } : {},
...hidden ? { "aria-hidden": "true" } : {}
}, /* @__PURE__ */ react.default.createElement("div", { className: `${require_util.blockClass}__item-option__option-content` }, /* @__PURE__ */ react.default.createElement("span", { className: `${require_util.blockClass}__item-option__option-label` }, Icon && /* @__PURE__ */ react.default.createElement(Icon, null), /* @__PURE__ */ react.default.createElement("span", {
className: `${require_util.blockClass}__item-option__option-label-text`,
title: option.label
}, config?.isStatement ? getStatementContent(option) : option.label)), isSelected && /* @__PURE__ */ react.default.createElement(_carbon_react_icons.Checkmark, { className: `${require_util.blockClass}__checkmark` })));
})));
};
ItemOption.propTypes = {
/**
* current condition object
*/
conditionState: prop_types.default.object,
/**
* current config object that this property is part of
*/
config: prop_types.default.object,
/**
* callback to update state oin date change
*/
onChange: prop_types.default.func
};
//#endregion
exports.ItemOption = ItemOption;