@carbon/ibm-products/lib/components/MultiAddSelect/MultiAddSelect.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 _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
var React = require('react');
var AddSelect = require('../AddSelect/AddSelect.js');
var index = require('../../_virtual/index.js');
var devtools = require('../../global/js/utils/devtools.js');
var settings = require('../../settings.js');

const componentName = 'MultiAddSelect';
/**
 * Used to add or select multiple or more items from larger lists or hierarchies.
 */
exports.MultiAddSelect = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(AddSelect.AddSelect, _rollupPluginBabelHelpers.extends({}, props, {
  multi: true,
  ref: ref
}, devtools.getDevtoolsProps(componentName))));
exports.MultiAddSelect = settings.pkg.checkComponentEnabled(exports.MultiAddSelect, componentName);
exports.MultiAddSelect.propTypes = {
  /**
   * optional class name
   */
  className: index.default.string,
  /**
   * placeholder for column input filter
   */
  columnInputPlaceholder: index.default.string,
  /**
   * text description that appears under the title
   */
  description: index.default.string,
  /**
   * options to display in the global filter box. values are generated
   * from the id which should correlate with a specific property in an
   * item entry
   */
  /**@ts-ignore */
  globalFilters: index.default.arrayOf(index.default.shape({
    id: index.default.string,
    label: index.default.string
  })),
  globalFiltersIconDescription: index.default.string,
  /**
   * placeholder text for the global filter dropdown
   */
  globalFiltersPlaceholderText: index.default.string,
  /**
   * text for the global filter primary button
   */
  globalFiltersPrimaryButtonText: index.default.string,
  /**
   * text for the global filter secondary button
   */
  globalFiltersSecondaryButtonText: index.default.string,
  /**
   * label for global search input
   */
  globalSearchLabel: index.default.string,
  /**
   * placeholder for global search input
   */
  globalSearchPlaceholder: index.default.string,
  /**
   * the theme for the empty state illustration
   */
  illustrationTheme: index.default.oneOf(['light', 'dark']),
  /**
   * title that displays in the sidebar / influencer
   */
  influencerTitle: index.default.string,
  /**
   * object that contains the item data. for more information reference the
   * "Structuring items" section in the docs tab
   */
  /**@ts-ignore */
  items: index.default.shape({
    modifiers: index.default.shape({
      label: index.default.string,
      options: index.default.array,
      multiSelect: index.default.bool
    }),
    sortBy: index.default.array,
    filterBy: index.default.array,
    entries: index.default.arrayOf(index.default.shape({
      avatar: index.default.shape({
        alt: index.default.string,
        icon: index.default.func,
        src: index.default.string,
        theme: index.default.oneOf(['light', 'dark'])
      }),
      children: index.default.object,
      icon: index.default.func,
      id: index.default.string.isRequired,
      subtitle: index.default.string,
      title: index.default.string.isRequired,
      value: index.default.string.isRequired
    }))
  }),
  /**
   * label that display above the list of items
   */
  itemsLabel: index.default.string,
  /**
   * text to display when no results are found from the global search
   */
  noResultsDescription: index.default.string,
  /**
   * title to display when no results are found from the global search
   */
  noResultsTitle: index.default.string,
  /**
   * text body that displays in the sidebar when nothing is selected
   */
  noSelectionDescription: index.default.string,
  /**
   * title that displays in the sidebar when nothing is selected
   */
  noSelectionTitle: index.default.string,
  /**
   * function to call when the close button clicked
   */
  onClose: index.default.func,
  /**
   * text for close button
   */
  onCloseButtonText: index.default.string,
  /**
   * function to call when the submit button is clicked. returns a selection
   */
  onSubmit: index.default.func,
  /**
   * text for the submit button
   */
  onSubmitButtonText: index.default.string,
  /**
   * specifies if the component is open or not
   */
  open: index.default.bool,
  /**
   * text that displays when displaying filtered items
   */
  searchResultsTitle: index.default.string,
  /**
   * header text
   */
  title: index.default.string
};
exports.MultiAddSelect.displayName = componentName;