@carbon/react
Version:
React components for the Carbon Design System
218 lines (210 loc) • 8.09 kB
JavaScript
/**
* Copyright IBM Corp. 2016, 2023
*
* 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';
Object.defineProperty(exports, '__esModule', { value: true });
var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
var PropTypes = require('prop-types');
var React = require('react');
var cx = require('classnames');
var FilterableMultiSelect = require('../MultiSelect/FilterableMultiSelect.js');
var MultiSelect = require('../MultiSelect/MultiSelect.js');
var usePrefix = require('../../internal/usePrefix.js');
var FormContext = require('../FluidForm/FormContext.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
const FluidMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function FluidMultiSelect({
className,
isCondensed,
isFilterable,
...other
}, ref) {
const prefix = usePrefix.usePrefix();
const classNames = cx__default["default"](`${prefix}--list-box__wrapper--fluid`, className, {
[`${prefix}--list-box__wrapper--fluid--condensed`]: isCondensed
});
return /*#__PURE__*/React__default["default"].createElement(FormContext.FormContext.Provider, {
value: {
isFluid: true
}
}, isFilterable ?
/*#__PURE__*/
// @ts-ignore
React__default["default"].createElement(FilterableMultiSelect.FilterableMultiSelect, _rollupPluginBabelHelpers["extends"]({
ref: ref,
className: classNames
}, other)) :
/*#__PURE__*/
// @ts-ignore
React__default["default"].createElement(MultiSelect.MultiSelect, _rollupPluginBabelHelpers["extends"]({
ref: ref,
className: classNames
}, other)));
});
FluidMultiSelect.propTypes = {
/**
* Specify an optional className to be applied to the outer FluidForm wrapper
*/
className: PropTypes__default["default"].string,
/**
* Specify the text that should be read for screen readers that describes total items selected
*/
clearSelectionDescription: PropTypes__default["default"].string,
/**
* Specify the text that should be read for screen readers to clear selection.
*/
clearSelectionText: PropTypes__default["default"].string,
/**
* Provide a compare function that is used to determine the ordering of
* options. See 'sortItems' for more control. Consider declaring function
* with `useCallback` to prevent unnecessary re-renders.
*/
compareItems: PropTypes__default["default"].func,
/**
* Specify the direction of the multiselect dropdown. Can be either top or bottom.
*/
direction: PropTypes__default["default"].oneOf(['top', 'bottom']),
/**
* Specify whether the `<input>` should be disabled
*/
disabled: PropTypes__default["default"].bool,
/**
* Additional props passed to Downshift.
*
* **Use with caution:** anything you define here overrides the components'
* internal handling of that prop. Downshift APIs and internals are subject to
* change, and in some cases they can not be shimmed by Carbon to shield you
* from potentially breaking changes.
*/
downshiftProps: PropTypes__default["default"].object,
/**
* Specify a custom `id` for the `<input>`
*/
id: PropTypes__default["default"].string.isRequired,
/**
* Allow users to pass in arbitrary items from their collection that are
* pre-selected
*/
initialSelectedItems: PropTypes__default["default"].array,
/**
* Specify if the currently selected value is invalid.
*/
invalid: PropTypes__default["default"].bool,
/**
* Provide the text that is displayed when the control is in an invalid state
*/
invalidText: PropTypes__default["default"].node,
/**
* Specify if the `FluidMultiSelect` should render its menu items in condensed mode
*/
isCondensed: PropTypes__default["default"].bool,
/**
* Specify if the `FluidMultiSelect` should render the `filterable` variant of `FluidMultiSelect`
*/
isFilterable: PropTypes__default["default"].bool,
/**
* Function to render items as custom components instead of strings.
* Defaults to null and is overridden by a getter
*/
itemToElement: PropTypes__default["default"].func,
/**
* Helper function passed to downshift that allows the library to render a
* given item to a string label. By default, it extracts the `label` field
* from a given item to serve as the item label in the list. Consider
* declaring function with `useCallback` to prevent unnecessary re-renders.
*/
itemToString: PropTypes__default["default"].func,
/**
* We try to stay as generic as possible here to allow individuals to pass
* in a collection of whatever kind of data structure they prefer
*/
items: PropTypes__default["default"].array.isRequired,
/**
* Generic `label` that will be used as the textual representation of what
* this field is for
*/
label: PropTypes__default["default"].node.isRequired,
/**
* Specify the locale of the control. Used for the default `compareItems`
* used for sorting the list of items in the control.
*/
locale: PropTypes__default["default"].string,
/**
* `onChange` is a utility for this controlled component to communicate to a
* consuming component what kind of internal state changes are occurring.
*/
onChange: PropTypes__default["default"].func,
/**
* **Filterable variant only** - `onInputValueChange` is a utility for this controlled component to communicate to
* the currently typed input.
*/
onInputValueChange: PropTypes__default["default"].func,
/**
* `onMenuChange` is a utility for this controlled component to communicate to a
* consuming component that the menu was open(`true`)/closed(`false`).
*/
onMenuChange: PropTypes__default["default"].func,
/**
* Whether or not the Multiselect is readonly
*/
readOnly: PropTypes__default["default"].bool,
/**
* For full control of the selected items
*/
selectedItems: PropTypes__default["default"].array,
/**
* Specify feedback (mode) of the selection.
* `top`: selected item jumps to top
* `fixed`: selected item stays at it's position
* `top-after-reopen`: selected item jump to top after reopen dropdown
*/
selectionFeedback: PropTypes__default["default"].oneOf(['top', 'fixed', 'top-after-reopen']),
/**
* Provide a method that sorts all options in the control. Overriding this
* prop means that you also have to handle the sort logic for selected versus
* un-selected items. If you just want to control ordering, consider the
* `compareItems` prop instead.
*
* The return value should be a number whose sign indicates the relative order
* of the two elements: negative if a is less than b, positive if a is greater
* than b, and zero if they are equal.
*
* sortItems :
* (items: Array<Item>, {
* selectedItems: Array<Item>,
* itemToString: Item => string,
* compareItems: (itemA: string, itemB: string, {
* locale: string
* }) => number,
* locale: string,
* }) => Array<Item>
*/
sortItems: PropTypes__default["default"].func,
/**
* Provide the title text that will be read by a screen reader when
* visiting this control
*/
titleText: PropTypes__default["default"].node,
/**
* Callback function for translating ListBoxMenuIcon SVG title
*/
translateWithId: PropTypes__default["default"].func,
/**
* Specify title to show title on hover
*/
useTitleInItem: PropTypes__default["default"].bool,
/**
* Specify whether the control is currently in warning state
*/
warn: PropTypes__default["default"].bool,
/**
* Provide the text that is displayed when the control is in warning state
*/
warnText: PropTypes__default["default"].node
};
exports["default"] = FluidMultiSelect;