@carbon/ibm-products/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.js

Carbon for IBM Products

/**
 * Copyright IBM Corp. 2020, 2025
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

'use strict';

var React = require('react');
var react = require('@carbon/react');
var icons = require('@carbon/react/icons');
var index = require('../../../../_virtual/index.js');
var ConditionBuilderProvider = require('../../ConditionBuilderContext/ConditionBuilderProvider.js');
var useTranslations = require('../../utils/useTranslations.js');
var util = require('../../utils/util.js');

const ItemOption = _ref => {
  let {
    conditionState = {},
    config = {},
    onChange
  } = _ref;
  const {
    popOverSearchThreshold
  } = React.useContext(ConditionBuilderProvider.ConditionBuilderContext);
  const contentRef = React.useRef(null);
  const [propertyText, clearSearchText] = useTranslations.useTranslations(['propertyText', 'clearSearchText']);
  const {
    conditionBuilderRef
  } = React.useContext(ConditionBuilderProvider.ConditionBuilderContext);
  const allOptions = config.options;
  const [searchValue, setSearchValue] = React.useState('');
  const selection = conditionState.value;
  const filteredItems = searchValue ? allOptions?.filter(opt => opt.label?.toLowerCase().includes(searchValue.toLowerCase())) : allOptions;
  React.useEffect(() => {
    //this will focus the first input field in the popover

    if (contentRef.current) {
      const firstFocusableElement = contentRef.current?.querySelector('input, button,li');
      if (firstFocusableElement) {
        firstFocusableElement.focus();
      }
    }
  }, [allOptions]);
  const onClickHandler = (evt, option) => {
    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.createElement("div", {
      className: `${util.blockClass}__statement_wrapper`
    }, /*#__PURE__*/React.createElement("div", null, option.label, " (", option.connector, ")"), /*#__PURE__*/React.createElement("div", null, option.secondaryLabel));
  };
  if (!allOptions) {
    return;
  }
  return /*#__PURE__*/React.createElement("div", {
    className: `${util.blockClass}__item-option`,
    ref: contentRef
  }, popOverSearchThreshold && allOptions.length > popOverSearchThreshold && /*#__PURE__*/React.createElement("div", {
    className: `${util.blockClass}__item-option__search`
  }, /*#__PURE__*/React.createElement(react.Search, {
    size: "sm",
    labelText: clearSearchText,
    closeButtonLabelText: clearSearchText,
    onChange: onSearchChangeHandler,
    onKeyDown: evt => util.onKeyDownHandlerForSearch(evt, conditionBuilderRef)
  })), /*#__PURE__*/React.createElement("ul", {
    "aria-label": getAriaLabel(),
    role: "listbox"
  }, filteredItems?.map(option => {
    const isSelected = selection === option.id;
    const Icon = option.icon;
    return /*#__PURE__*/React.createElement("li", {
      tabIndex: 0,
      key: option.id,
      role: "option",
      "aria-selected": isSelected,
      className: `${util.blockClass}__item-option__option`,
      onKeyUp: () => {
        return false;
      },
      onClick: evt => onClickHandler(evt, option)
    }, /*#__PURE__*/React.createElement("div", {
      className: `${util.blockClass}__item-option__option-content`
    }, /*#__PURE__*/React.createElement("span", {
      className: `${util.blockClass}__item-option__option-label`
    }, Icon && /*#__PURE__*/React.createElement(Icon, null), config.isStatement ? getStatementContent(option) : option.label), isSelected && /*#__PURE__*/React.createElement(icons.Checkmark, {
      className: `${util.blockClass}__checkmark`
    })));
  })));
};
ItemOption.propTypes = {
  /**
   * current condition object
   */
  conditionState: index.default.object,
  /**
   * current config object that this property is part of
   */
  config: index.default.object,
  /**
   * callback to update state oin date change
   */
  onChange: index.default.func
};

exports.ItemOption = ItemOption;