@carbon/ibm-products/es/components/SearchBar/SearchBar.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.
 */

import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
import { MultiSelect, Search, Button } from '@carbon/react';
import React__default, { useState, useEffect } from 'react';
import PropTypes from '../../_virtual/index.js';
import cx from 'classnames';
import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
import { pkg } from '../../settings.js';

// The block part of our conventional BEM class names (blockClass__E--M).
const blockClass = `${pkg.prefix}--search-bar`;
const componentName = 'SearchBar';

// NOTE: the component SCSS is not imported here: it is rolled up separately.

// Default values for props
const defaults = {
  onSubmit: () => {},
  onChange: () => {},
  hideScopesLabel: true
};
let SearchBar = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
  let {
    // The component props, in alphabetical order (for consistency).
    className,
    clearButtonLabelText,
    hideScopesLabel = defaults.hideScopesLabel,
    labelText,
    onChange = defaults.onChange,
    onSubmit = defaults.onSubmit,
    placeholderText,
    scopes = [],
    scopesTypeLabel,
    scopeToString,
    selectedScopes = [],
    sortItems,
    submitLabel,
    translateWithId,
    value,
    // Collect any other property values passed in.
    ...rest
  } = _ref;
  const [text, setText] = useState(value || '');
  const [_selectedScopes, setSelectedScopes] = useState(selectedScopes || []);
  const [isInputDirty, setIsInputDirty] = useState(false);
  useEffect(() => {
    if (!text || !text.length) {
      setIsInputDirty(false);
    } else {
      setIsInputDirty(true);
    }
  }, [text]);
  /**
   * Handler for form submit that calls onSubmit prop.
   * @param {Event} event Submit event generated.
   */
  const handleSubmit = event => {
    event.preventDefault();
    const eventObject = {
      value: text
    };
    if (scopes.length > 0) {
      eventObject.selectedScopes = _selectedScopes;
    }
    onSubmit(eventObject);
  };

  /**
   * Handler for when scope selection changes that calls onChangeProp.
   * @param {{selectedItems: Array<any>}} {selectedItems} Object containing array of selected items.
   */
  const handleSearchScopeChange = _ref2 => {
    let {
      selectedItems
    } = _ref2;
    setSelectedScopes(selectedItems);
    onChange({
      selectedScopes: selectedItems,
      value: text
    });
  };

  /**
   * Handler for search input changes that calls onChange prop.
   * @param {KeyboardEvent} event Event object from input change.
   */
  const handleInputChange = event => {
    const {
      value
    } = event.target;
    const eventObject = {
      value
    };
    if (scopes.length > 0) {
      eventObject.selectedScopes = selectedScopes;
    }
    setText(value);
    onChange(eventObject);
  };
  const multiSelectProps = {
    initialSelectedItems: selectedScopes,
    items: scopes,
    itemToString: scopeToString,
    label: scopesTypeLabel,
    sortItems,
    translateWithId
  };
  return /*#__PURE__*/React__default.createElement("form", _extends({}, rest, {
    ref: ref
  }, getDevtoolsProps(componentName), {
    className: cx(blockClass, className, {
      [`${blockClass}--hide-scopes-label`]: hideScopesLabel
    }),
    onSubmit: handleSubmit
  }), scopes?.length ? /*#__PURE__*/React__default.createElement(MultiSelect, _extends({}, multiSelectProps, {
    id: `${blockClass}__multi-select`,
    className: `${blockClass}__scopes`,
    onChange: handleSearchScopeChange,
    size: "lg"
  })) : null, /*#__PURE__*/React__default.createElement(Search, {
    className: `${blockClass}__input`,
    closeButtonLabelText: clearButtonLabelText,
    labelText: labelText,
    name: 'search-input',
    onChange: handleInputChange,
    placeholder: placeholderText,
    value: text,
    size: "lg"
  }), /*#__PURE__*/React__default.createElement(Button, {
    name: "search-submit",
    kind: "primary",
    type: "submit",
    className: `${blockClass}__submit`,
    disabled: !isInputDirty
  }, submitLabel));
});

// Return a placeholder if not released and not enabled by feature flag
SearchBar = pkg.checkComponentEnabled(SearchBar, componentName);

// The display name of the component, used by React. Note that displayName
// is used in preference to relying on function.name.
SearchBar.displayName = componentName;
const conditionalScopePropValidator = function (props, propName, componentName) {
  if (props.scopes && props.scopes.length > 0 && !props[propName]) {
    return new Error(`Required \`${propName}\` when \`scopes\` prop type is supplied to \`${componentName}\`. Validation failed.`);
  }
  /**@ts-ignore */
  for (var _len = arguments.length, rest = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
    rest[_key - 3] = arguments[_key];
  }
  return PropTypes.string(props, propName, componentName, ...rest);
};
const deprecatedProps = {
  /**
   * **Deprecated**
   *
   * Provide accessible label text for the scopes MultiSelect.
   */
  titleText: PropTypes.string
};

// The types and DocGen commentary for the component props,
// in alphabetical order (for consistency).
// See https://www.npmjs.com/package/prop-types#usage.
SearchBar.propTypes = {
  /** @type {string} Optional additional class name. */
  className: PropTypes.string,
  /** @type {string} The label text for the search text input. */
  clearButtonLabelText: PropTypes.string.isRequired,
  /**
   * Whether or not the scopes MultiSelect label is visually hidden.
   */
  hideScopesLabel: PropTypes.bool,
  /** @type {string} The label text for the search text input. */
  labelText: PropTypes.string.isRequired,
  /** @type {Function} Function handler for when the user changes their query search. */
  onChange: PropTypes.func,
  /** @type {Function} Function handler for when the user submits a search. */
  onSubmit: PropTypes.func,
  /** @type {string} Placeholder text to be displayed in the search input. */
  placeholderText: PropTypes.string.isRequired,
  /** @type {Function} Function to get the text for each scope to display in dropdown. */
  scopeToString: PropTypes.func,
  /** @type {Array<any>} Array of allowed search scopes. */
  /**@ts-ignore */
  scopes: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])),
  /** @type {string} The name text for the search scope type. */
  scopesTypeLabel: conditionalScopePropValidator,
  /** @type {Array<any> Array of initially selected search scopes. */
  /**@ts-ignore */
  selectedScopes: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])),
  /**
   * Optional custom sorting algorithm for an array of scope items.
   * By default, scope items are sorted in ascending alphabetical order,
   * with "selected" items moved to the start of the scope items array.
   */
  sortItems: PropTypes.func,
  /** @type {string} The label text for the search submit button. */
  submitLabel: PropTypes.string.isRequired,
  /** @type {func} Callback function for translating MultiSelect's child ListBoxMenuIcon SVG title. */
  translateWithId: PropTypes.func,
  /** @type {string} Search query value. */
  value: PropTypes.string,
  ...deprecatedProps
};

export { SearchBar, deprecatedProps };