lucid-ui
Version:
A UI component library from AppNexus.
410 lines • 37.7 kB
JavaScript
"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SearchableMultiSelectDumb = void 0;
/* eslint-disable react/prop-types */
var lodash_1 = __importDefault(require("lodash"));
var react_1 = __importDefault(require("react"));
var prop_types_1 = __importDefault(require("react-peek/prop-types"));
var style_helpers_1 = require("../../util/style-helpers");
var state_management_1 = require("../../util/state-management");
var text_manipulation_1 = require("../../util/text-manipulation");
var component_types_1 = require("../../util/component-types");
var SearchField_1 = require("../SearchField/SearchField");
var DropMenu_1 = require("../DropMenu/DropMenu");
var LoadingIcon_1 = __importDefault(require("../Icon/LoadingIcon/LoadingIcon"));
var CheckboxLabeled_1 = __importDefault(require("../CheckboxLabeled/CheckboxLabeled"));
var Selection_1 = __importDefault(require("../Selection/Selection"));
var Validation_1 = require("../Validation/Validation");
var reducers = __importStar(require("./SearchableMultiSelect.reducers"));
var any = prop_types_1.default.any, arrayOf = prop_types_1.default.arrayOf, bool = prop_types_1.default.bool, func = prop_types_1.default.func, number = prop_types_1.default.number, oneOfType = prop_types_1.default.oneOfType, shape = prop_types_1.default.shape, string = prop_types_1.default.string, oneOf = prop_types_1.default.oneOf, node = prop_types_1.default.node;
var cx = style_helpers_1.lucidClassNames.bind('&-SearchableMultiSelect');
var SelectionOption = function (_props) { return null; };
SelectionOption.displayName = 'SearchableMultiSelect.Option.Selection';
SelectionOption.propTypes = Selection_1.default.propTypes;
SelectionOption.propName = 'Selection';
SelectionOption.peek = {
description: "\n\t\tCustomizes the rendering of the Option when it is selected\n\t\tand is displayed instead of the Placeholder.\n\t",
};
var Selected = function (_props) { return null; };
Selected.displayName = 'SearchableMultiSelect.Option.Selected';
Selected.peek = {
description: "\n\t\tCustomizes the rendering of the Option when it is selected\n\t\tand is displayed instead of the Placeholder.\n\t",
};
Selected.propName = 'Selected';
Selected.propTypes = {};
var OptionGroup = function (_props) {
return null;
};
OptionGroup.displayName = 'SearchableMultiSelect.OptionGroup';
OptionGroup.peek = {
description: "\n\t\tA special kind of `Option` that is always rendered at the top of\n\t\tthe menu and has an `optionIndex` of `null`. Useful for\n\t\tunselect.\n\t",
};
OptionGroup.propName = 'OptionGroup';
OptionGroup.propTypes = DropMenu_1.DropMenuDumb.OptionGroup.propTypes;
OptionGroup.defaultProps = DropMenu_1.DropMenuDumb.OptionGroup.defaultProps;
OptionGroup.Selected = Selected;
var SearchFieldComponent = function (_props) { return null; };
SearchFieldComponent.displayName = 'SearchableMultiSelect.SearchField';
SearchFieldComponent.peek = {
description: "\n\t\tPasses props through to the `Search Field`.\n\t",
};
SearchFieldComponent.propName = 'SearchField';
SearchFieldComponent.propTypes = SearchField_1.SearchFieldDumb.propTypes;
SearchFieldComponent.defaultProps = SearchField_1.SearchFieldDumb.defaultProps;
var Option = function (_props) { return null; };
Option.displayName = 'SearchableMultiSelect.Option';
Option.peek = {
description: "\n\t\tA selectable option in the list.\n\t",
};
Option.Selection = SelectionOption;
Option.Selected = Selected;
Option.propName = 'Option';
Option.propTypes = __assign({ Selected: any(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t\tCustomizes the rendering of the Option when it is selected and is\n\t\tdisplayed instead of the Placeholder.\n "], ["\n\t\tCustomizes the rendering of the Option when it is selected and is\n\t\tdisplayed instead of the Placeholder.\n "]))), Selection: any(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n Uses a Selection object for custom rendering of the selected option\n "], ["\n Uses a Selection object for custom rendering of the selected option\n "]))), value: string, filterText: string }, DropMenu_1.DropMenuDumb.Option.propTypes);
Option.defaultProps = DropMenu_1.DropMenuDumb.Option.defaultProps;
var defaultProps = {
isDisabled: false,
isLoading: false,
hasRemoveAll: true,
hasSelections: true,
hasSelectAll: false,
selectAllText: 'Select All',
searchText: '',
responsiveMode: 'large',
selectedIndices: [],
DropMenu: DropMenu_1.DropMenuDumb.defaultProps,
Error: null,
optionFilter: text_manipulation_1.propsSearch,
onSearch: lodash_1.default.noop,
onRemoveAll: lodash_1.default.noop,
onSelect: lodash_1.default.noop,
};
var SearchableMultiSelect = /** @class */ (function (_super) {
__extends(SearchableMultiSelect, _super);
function SearchableMultiSelect() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.handleDropMenuSelect = function (optionIndex, _a) {
var event = _a.event, props = _a.props;
var onSelect = _this.props.onSelect;
event.preventDefault();
if (optionIndex === 0) {
return _this.handleSelectAll({ event: event, props: props });
}
// this index is decremented to account for the "Select All" Option
if (optionIndex) {
return onSelect(optionIndex - 1, { event: event, props: props });
}
};
_this.handleSelectAll = function (_a) {
var event = _a.event, props = _a.props;
// This is needed otherwise clicking the checkbox will double fire this
// event _and_ the `handleDropMenuSelect` handler
var _b = _this, _c = _b.props, selectedIndices = _c.selectedIndices, onSelect = _c.onSelect, flattenedOptionsData = _b.state.flattenedOptionsData;
event.preventDefault();
var visibleOptions = lodash_1.default.reject(flattenedOptionsData, 'optionProps.isHidden');
var _d = lodash_1.default.partition(visibleOptions, function (_a) {
var optionIndex = _a.optionIndex;
return lodash_1.default.includes(selectedIndices, optionIndex);
}), selected = _d[0], unselected = _d[1];
var indices = lodash_1.default.isEmpty(unselected)
? lodash_1.default.map(selected, 'optionIndex')
: lodash_1.default.map(unselected, 'optionIndex');
return onSelect(indices, {
props: props,
event: event,
});
};
_this.handleSelectionRemove = function (_a) {
var event = _a.event, props = _a.props, optionIndex = _a.props.callbackId;
// We don't want to send the consumer the selection's props so we have to
// lookup the option they clicked and send its props along
var selectedOptionProps = lodash_1.default.get(component_types_1.findTypes(_this.props, SearchableMultiSelect.Option), "[" + optionIndex + "].props");
return _this.props.onSelect(optionIndex, {
event: event,
props: selectedOptionProps,
});
};
_this.handleRemoveAll = function (_a) {
var event = _a.event, props = _a.props;
_this.props.onRemoveAll({ event: event, props: props });
};
_this.handleSearch = function (searchText, _a) {
var event = _a.event;
var _b = _this, props = _b.props, _c = _b.props, onSearch = _c.onSearch, optionFilter = _c.optionFilter, onExpand = _c.DropMenu.onExpand;
var options = lodash_1.default.map(component_types_1.findTypes(props, SearchableMultiSelect.Option), 'props');
var firstVisibleIndex = lodash_1.default.findIndex(options, function (option) {
return optionFilter(searchText, option);
});
var firstVisibleProps = options[firstVisibleIndex];
var dropMenuProps = _this.props.DropMenu;
// Just an extra call to make sure the search results show up when a user
// is typing
onExpand &&
onExpand({
event: event,
props: dropMenuProps,
});
return onSearch(searchText, firstVisibleIndex, {
event: event,
props: firstVisibleProps,
});
};
_this.renderUnderlinedChildren = function (childText, searchText) {
var _a = text_manipulation_1.partitionText(childText, new RegExp(lodash_1.default.escapeRegExp(searchText), 'i'), searchText.length), pre = _a[0], match = _a[1], post = _a[2];
return [
pre && (react_1.default.createElement("span", { key: 'pre', className: cx('&-Option-underline-pre') }, pre)),
match && (react_1.default.createElement("span", { key: 'match', className: cx('&-Option-underline-match') }, match)),
post && (react_1.default.createElement("span", { key: 'post', className: cx('&-Option-underline-post') }, post)),
];
};
_this.renderOption = function (_a) {
var optionProps = _a.optionProps, optionIndex = _a.optionIndex;
var _b = _this.props, searchText = _b.searchText, selectedIndices = _b.selectedIndices, isLoading = _b.isLoading, optionFilter = _b.optionFilter;
return (react_1.default.createElement(DropMenu_1.DropMenuDumb.Option, __assign({ key: 'SearchableMultiSelectOption' + optionIndex }, lodash_1.default.omit(optionProps, ['children', 'Selected', 'filterText']), { isHidden: !optionFilter(searchText, optionProps), isDisabled: optionProps.isDisabled || isLoading }),
react_1.default.createElement(CheckboxLabeled_1.default, { className: cx('&-CheckboxLabeled'), callbackId: optionIndex.toString(), isSelected: lodash_1.default.includes(selectedIndices, optionIndex) },
react_1.default.createElement(CheckboxLabeled_1.default.Label, null, lodash_1.default.isString(optionProps.children)
? _this.renderUnderlinedChildren(optionProps.children, searchText)
: lodash_1.default.isFunction(optionProps.children)
? react_1.default.createElement(optionProps.children, { searchText: searchText })
: optionProps.children))));
};
_this.renderOptions = function () {
var _a = _this.props, searchText = _a.searchText, isLoading = _a.isLoading, hasSelectAll = _a.hasSelectAll, selectedIndices = _a.selectedIndices, selectAllText = _a.selectAllText;
var _b = _this.state, optionGroups = _b.optionGroups, optionGroupDataLookup = _b.optionGroupDataLookup, ungroupedOptionData = _b.ungroupedOptionData, flattenedOptionsData = _b.flattenedOptionsData;
var visibleOptions = lodash_1.default.reject(flattenedOptionsData, 'optionProps.isHidden');
var isAllOptionsHidden = lodash_1.default.isEmpty(visibleOptions);
var isEveryVisibleOptionSelected = lodash_1.default.every(visibleOptions, function (_a) {
var optionIndex = _a.optionIndex;
return lodash_1.default.includes(selectedIndices, optionIndex);
});
var isAnyVisibleOptionSelected = lodash_1.default.some(visibleOptions, function (_a) {
var optionIndex = _a.optionIndex;
return lodash_1.default.includes(selectedIndices, optionIndex);
});
// for each option group passed in, render a DropMenu.OptionGroup, any label will be included in it's children, render each option inside the group
var dropMenuOptions = [
react_1.default.createElement(DropMenu_1.DropMenuDumb.FixedOption, { className: cx('&-Option-select-all'), key: 'SearchableMultiSelectOption-select-all', isHidden: !hasSelectAll, isDisabled: isLoading },
react_1.default.createElement(CheckboxLabeled_1.default, { className: cx('&-CheckboxLabeled'), isSelected: isEveryVisibleOptionSelected, isIndeterminate: !isEveryVisibleOptionSelected && isAnyVisibleOptionSelected },
react_1.default.createElement(CheckboxLabeled_1.default.Label, null, selectAllText))),
].concat(lodash_1.default.map(optionGroups, function (optionGroupProps, optionGroupIndex) { return (react_1.default.createElement(DropMenu_1.DropMenuDumb.OptionGroup, __assign({ key: 'SearchableMultiSelectOptionGroup' + optionGroupIndex }, lodash_1.default.omit(optionGroupProps, 'children', 'Selected')),
optionGroupProps.children,
lodash_1.default.map(optionGroupDataLookup[optionGroupIndex], function (option) {
return _this.renderOption(option);
}))); }).concat(
// then render all the ungrouped options at the end
lodash_1.default.map(ungroupedOptionData, function (option) { return _this.renderOption(option); })));
if (!isAllOptionsHidden || lodash_1.default.isEmpty(searchText)) {
return dropMenuOptions;
}
if (!isLoading) {
return (react_1.default.createElement(DropMenu_1.DropMenuDumb.Option, { isDisabled: true },
react_1.default.createElement("span", { className: cx('&-noresults') },
"No results match \"",
searchText,
"\"")));
}
return null;
};
_this.render = function () {
var _a = _this, props = _a.props, _b = _a.props, className = _b.className, isLoading = _b.isLoading, isDisabled = _b.isDisabled, maxMenuHeight = _b.maxMenuHeight, selectedIndices = _b.selectedIndices, dropMenuProps = _b.DropMenu, optionContainerStyle = _b.DropMenu.optionContainerStyle, responsiveMode = _b.responsiveMode, searchText = _b.searchText, hasRemoveAll = _b.hasRemoveAll, hasSelections = _b.hasSelections, passThroughs = __rest(_b, ["className", "isLoading", "isDisabled", "maxMenuHeight", "selectedIndices", "DropMenu", "DropMenu", "responsiveMode", "searchText", "hasRemoveAll", "hasSelections"]);
var _c = _this.state, optionGroupDataLookup = _c.optionGroupDataLookup, optionGroups = _c.optionGroups, ungroupedOptionData = _c.ungroupedOptionData;
var searchFieldProps = lodash_1.default.get(component_types_1.getFirst(props, SearchableMultiSelect.SearchField), 'props', {});
var errorChildProps = lodash_1.default.first(lodash_1.default.map(component_types_1.findTypes(props, Validation_1.Validation.Error), 'props'));
var selectionLabel = lodash_1.default.get(component_types_1.getFirst(props, SearchableMultiSelect.SelectionLabel), 'props', {}) || (react_1.default.createElement(SearchableMultiSelect.SelectionLabel, null, "Selected"));
var isSmall = responsiveMode === 'small';
return (react_1.default.createElement("div", __assign({}, component_types_1.omitProps(passThroughs, undefined, lodash_1.default.keys(SearchableMultiSelect.propTypes)), { className: cx('&', className) }),
react_1.default.createElement(DropMenu_1.DropMenuDumb, __assign({}, dropMenuProps, { selectedIndices: null, className: cx('&-DropMenu', {
'&-DropMenu-is-small': isSmall,
}, dropMenuProps.className), optionContainerStyle: lodash_1.default.assign({}, optionContainerStyle, !lodash_1.default.isNil(maxMenuHeight) ? { maxHeight: maxMenuHeight } : null), isDisabled: isDisabled, onSelect: _this.handleDropMenuSelect, ContextMenu: {
alignmentOffset: -13,
directonOffset: -1,
minWidthOffset: -28,
} }),
react_1.default.createElement(DropMenu_1.DropMenuDumb.Control, null,
react_1.default.createElement(SearchField_1.SearchFieldDumb, __assign({}, searchFieldProps, { autoComplete: searchFieldProps.autoComplete || 'off', isDisabled: isDisabled, className: cx('&-search', {
'&-search-is-small': isSmall,
'&-search-is-error': errorChildProps && errorChildProps.children,
}, searchFieldProps.className), value: searchText, onChange: _this.handleSearch }))),
isLoading ? (react_1.default.createElement(DropMenu_1.DropMenuDumb.Option, { key: 'SearchableMultiSelectLoading', className: cx('&-loading'), isDisabled: true },
react_1.default.createElement(LoadingIcon_1.default, null))) : null,
_this.renderOptions()),
hasSelections && !lodash_1.default.isEmpty(selectedIndices) ? (react_1.default.createElement("div", { className: cx('&-Selection-padding') },
react_1.default.createElement(Selection_1.default, { className: cx('&-Selection-section'), isBold: true, hasBackground: true, kind: 'container', onRemove: _this.handleRemoveAll, responsiveMode: responsiveMode, isRemovable: hasRemoveAll },
react_1.default.createElement(Selection_1.default.Label, null, selectionLabel.children ? selectionLabel.children : 'Selected'),
lodash_1.default.map(optionGroupDataLookup, function (groupedOptionsData, optionGroupIndex) {
var selectedGroupedOptions = lodash_1.default.filter(groupedOptionsData, function (_a) {
var optionIndex = _a.optionIndex;
return lodash_1.default.includes(selectedIndices, optionIndex);
});
if (!lodash_1.default.isEmpty(selectedGroupedOptions)) {
var selectedOptionGroupChildren = lodash_1.default.get(component_types_1.getFirst(optionGroups[optionGroupIndex], SearchableMultiSelect.OptionGroup.Selected), 'props.children');
return (react_1.default.createElement(Selection_1.default, { className: cx('&-Selection-group'), key: 'optionGroup-' + optionGroupIndex, responsiveMode: responsiveMode, isRemovable: false, isBold: true, kind: 'container' },
react_1.default.createElement(Selection_1.default.Label, null, !lodash_1.default.isNil(selectedOptionGroupChildren)
? selectedOptionGroupChildren
: lodash_1.default.first(component_types_1.rejectTypes(optionGroups[optionGroupIndex].children, SearchableMultiSelect.Option))),
lodash_1.default.map(selectedGroupedOptions, function (_a) {
var optionIndex = _a.optionIndex, optionProps = _a.optionProps;
var selectionProps = lodash_1.default.get(component_types_1.getFirst(optionProps, SearchableMultiSelect.Option.Selection), 'props');
return (react_1.default.createElement(Selection_1.default, __assign({ key: optionIndex }, selectionProps, { callbackId: optionIndex, responsiveMode: responsiveMode, onRemove: _this.handleSelectionRemove }),
react_1.default.createElement(Selection_1.default.Label, null, lodash_1.default.get(component_types_1.getFirst(optionProps, SearchableMultiSelect.Option.Selected), 'props.children') ||
(lodash_1.default.isFunction(optionProps.children)
? react_1.default.createElement(optionProps.children)
: optionProps.children))));
})));
}
return null;
}),
lodash_1.default.map(selectedIndices, function (selectedIndex) {
var selectedUngroupedOptionData = lodash_1.default.find(ungroupedOptionData, {
optionIndex: selectedIndex,
});
if (selectedUngroupedOptionData) {
var optionProps = selectedUngroupedOptionData.optionProps;
var selectionProps = lodash_1.default.get(component_types_1.getFirst(optionProps, SearchableMultiSelect.Option.Selection), 'props');
return (react_1.default.createElement(Selection_1.default, __assign({ key: selectedIndex }, selectionProps, { callbackId: selectedIndex, responsiveMode: responsiveMode, onRemove: _this.handleSelectionRemove }),
react_1.default.createElement(Selection_1.default.Label, null, lodash_1.default.get(component_types_1.getFirst(optionProps, SearchableMultiSelect.Option.Selected), 'props.children') ||
(lodash_1.default.isFunction(optionProps.children)
? react_1.default.createElement(optionProps.children)
: optionProps.children))));
}
return null;
})))) : null,
errorChildProps &&
errorChildProps.children &&
errorChildProps.children !== true ? (react_1.default.createElement("div", __assign({}, component_types_1.omitProps(errorChildProps, undefined), { className: cx('&-error-content') }), errorChildProps.children)) : null));
};
return _this;
}
SearchableMultiSelect.prototype.UNSAFE_componentWillMount = function () {
// preprocess the options data before rendering
var _a = DropMenu_1.DropMenuDumb.preprocessOptionData(this.props, SearchableMultiSelect), optionGroups = _a.optionGroups, flattenedOptionsData = _a.flattenedOptionsData, ungroupedOptionData = _a.ungroupedOptionData, optionGroupDataLookup = _a.optionGroupDataLookup;
this.setState({
optionGroups: optionGroups,
flattenedOptionsData: flattenedOptionsData,
ungroupedOptionData: ungroupedOptionData,
optionGroupDataLookup: optionGroupDataLookup,
});
};
SearchableMultiSelect.prototype.UNSAFE_componentWillReceiveProps = function (nextProps) {
// only preprocess options data when it changes (via new props) - better performance than doing this each render
var _a = DropMenu_1.DropMenuDumb.preprocessOptionData(nextProps, SearchableMultiSelect), optionGroups = _a.optionGroups, flattenedOptionsData = _a.flattenedOptionsData, ungroupedOptionData = _a.ungroupedOptionData, optionGroupDataLookup = _a.optionGroupDataLookup;
this.setState({
optionGroups: optionGroups,
flattenedOptionsData: flattenedOptionsData,
ungroupedOptionData: ungroupedOptionData,
optionGroupDataLookup: optionGroupDataLookup,
});
};
SearchableMultiSelect.displayName = 'SearchableMultiSelect';
SearchableMultiSelect.peek = {
description: "\n A control used to select multiple options from a dropdown list using a\n SearchField.\n ",
categories: ['controls', 'selectors'],
madeFrom: [
'Checkbox',
'SearchField',
'DropMenu',
'LoadingIcon',
'Selection',
],
};
SearchableMultiSelect.defaultProps = defaultProps;
SearchableMultiSelect.reducers = reducers;
SearchableMultiSelect.Option = Option;
SearchableMultiSelect.OptionGroup = OptionGroup;
SearchableMultiSelect.SearchField = SearchFieldComponent;
SearchableMultiSelect.NullOption = DropMenu_1.DropMenuDumb.NullOption;
SearchableMultiSelect.FixedOption = DropMenu_1.DropMenuDumb.FixedOption;
SearchableMultiSelect.DropMenu = DropMenu_1.DropMenuDumb;
SearchableMultiSelect.SelectionLabel = Selection_1.default.Label;
SearchableMultiSelect.propTypes = {
children: node(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\t\t\tShould be instances of `SearchableMultiSelect.Option`. Other direct\n\t\t\tchild elements will not render.\n\t\t"], ["\n\t\t\tShould be instances of \\`SearchableMultiSelect.Option\\`. Other direct\n\t\t\tchild elements will not render.\n\t\t"]))),
className: string(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\t\t\tAppended to the component-specific class names set on the root element.\n\t\t"], ["\n\t\t\tAppended to the component-specific class names set on the root element.\n\t\t"]))),
isDisabled: bool(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\t\t\tDisables the control from being clicked or focused.\n\t\t"], ["\n\t\t\tDisables the control from being clicked or focused.\n\t\t"]))),
isLoading: bool(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n\t\t\tDisplays a LoadingIcon to allow for asynchronous loading of options.\n\t\t"], ["\n\t\t\tDisplays a LoadingIcon to allow for asynchronous loading of options.\n\t\t"]))),
maxMenuHeight: oneOfType([number, string])(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n\t\t\tThe max height of the fly-out menu.\n\t\t"], ["\n\t\t\tThe max height of the fly-out menu.\n\t\t"]))),
onSearch: func(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n\t\t\tCalled when the user enters a value to search for; the set of visible\n\t\t\tOptions will be filtered using the value. Signature: `(searchText,\n\t\t\tfirstVisibleIndex, {props, event}) => {}` `searchText` is the value\n\t\t\tfrom the `SearchField` and `firstVisibleIndex` is the index of the\n\t\t\tfirst option that will be visible after filtering.\n\t\t"], ["\n\t\t\tCalled when the user enters a value to search for; the set of visible\n\t\t\tOptions will be filtered using the value. Signature: \\`(searchText,\n\t\t\tfirstVisibleIndex, {props, event}) => {}\\` \\`searchText\\` is the value\n\t\t\tfrom the \\`SearchField\\` and \\`firstVisibleIndex\\` is the index of the\n\t\t\tfirst option that will be visible after filtering.\n\t\t"]))),
onSelect: func(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n\t\t\tCalled when an option is selected. Signature: `(optionIndex, {props,\n\t\t\tevent}) => {}` `optionIndex` is the new `selectedIndex` or `null`.\n\t\t"], ["\n\t\t\tCalled when an option is selected. Signature: \\`(optionIndex, {props,\n\t\t\tevent}) => {}\\` \\`optionIndex\\` is the new \\`selectedIndex\\` or \\`null\\`.\n\t\t"]))),
onRemoveAll: func(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n\t\t\tCalled when the user clicks to remove all selections. Signature:\n\t\t\t`({props, event}) => {}`.\n\t\t"], ["\n\t\t\tCalled when the user clicks to remove all selections. Signature:\n\t\t\t\\`({props, event}) => {}\\`.\n\t\t"]))),
optionFilter: func(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n\t\t\tThe function that will be run against each Option's props to determine\n\t\t\twhether it should be visible or not. The default behavior of the function\n\t\t\tis to match, ignoring case, against any text node descendant of the\n\t\t\t`Option`. Signature: `(searchText, optionProps) => {}` If `true`\n\t\t\tis returned, the option will be visible. If `false`, the option will\n\t\t\tnot be visible.\n\t\t"], ["\n\t\t\tThe function that will be run against each Option's props to determine\n\t\t\twhether it should be visible or not. The default behavior of the function\n\t\t\tis to match, ignoring case, against any text node descendant of the\n\t\t\t\\`Option\\`. Signature: \\`(searchText, optionProps) => {}\\` If \\`true\\`\n\t\t\tis returned, the option will be visible. If \\`false\\`, the option will\n\t\t\tnot be visible.\n\t\t"]))),
searchText: string(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n\t\t\tThe current search text to filter the list of options by.\n\t\t"], ["\n\t\t\tThe current search text to filter the list of options by.\n\t\t"]))),
selectedIndices: arrayOf(number)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n\t\t\tAn array of currently selected `SearchableMultiSelect.Option` indices\n\t\t\tor `null` if nothing is selected.\n\t\t"], ["\n\t\t\tAn array of currently selected \\`SearchableMultiSelect.Option\\` indices\n\t\t\tor \\`null\\` if nothing is selected.\n\t\t"]))),
DropMenu: shape(DropMenu_1.DropMenuDumb.propTypes)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n\t\t\tObject of DropMenu props which are passed through to the underlying\n\t\t\tDropMenu component.\n\t\t"], ["\n\t\t\tObject of DropMenu props which are passed through to the underlying\n\t\t\tDropMenu component.\n\t\t"]))),
Option: any(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n\t\t\t*Child Element* - These are menu options. Each `Option` may be passed a\n\t\t\tprop called `isDisabled` to disable selection of that `Option`. Any\n\t\t\tother props pass to Option will be available from the `onSelect`\n\t\t\thandler. It also support the `Selection` prop that can be used to\n\t\t\tforward along props to the underlying `Selection` component.\n\t\t"], ["\n\t\t\t*Child Element* - These are menu options. Each \\`Option\\` may be passed a\n\t\t\tprop called \\`isDisabled\\` to disable selection of that \\`Option\\`. Any\n\t\t\tother props pass to Option will be available from the \\`onSelect\\`\n\t\t\thandler. It also support the \\`Selection\\` prop that can be used to\n\t\t\tforward along props to the underlying \\`Selection\\` component.\n\t\t"]))),
responsiveMode: oneOf(['small', 'medium', 'large'])(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n\t\t\tAdjusts the display of this component. This should typically be driven by\n\t\t\tscreen size. Currently `small` and `large` are explicitly handled by\n\t\t\tthis component.\n\t\t"], ["\n\t\t\tAdjusts the display of this component. This should typically be driven by\n\t\t\tscreen size. Currently \\`small\\` and \\`large\\` are explicitly handled by\n\t\t\tthis component.\n\t\t"]))),
hasRemoveAll: bool(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n\t\t\tControls the visibility of the \"remove all\" button that's shown with the\n\t\t\tselected items.\n\t\t"], ["\n\t\t\tControls the visibility of the \"remove all\" button that's shown with the\n\t\t\tselected items.\n\t\t"]))),
hasSelections: bool(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n\t\t\tControls the visibility of the `Selection` component that appears below\n\t\t\tthe search field.\n\t\t"], ["\n\t\t\tControls the visibility of the \\`Selection\\` component that appears below\n\t\t\tthe search field.\n\t\t"]))),
hasSelectAll: bool(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n\t\t\tControls whether to show a \"Select All\" option.\n\t\t"], ["\n\t\t\tControls whether to show a \"Select All\" option.\n\t\t"]))),
selectAllText: string(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n\t\tThe select all text.\n\t\t"], ["\n\t\tThe select all text.\n\t\t"]))),
Error: any(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n\t\t\tIn most cases this will be a string, but it also accepts any valid React\n\t\t\telement. If this is a falsey value, then no error message will be\n\t\t\tdisplayed. If this is the literal `true`, it will add the\n\t\t\t`-is-error` class to the wrapper div, but not render the\n\t\t\t`-error-content` `div`.\n "], ["\n\t\t\tIn most cases this will be a string, but it also accepts any valid React\n\t\t\telement. If this is a falsey value, then no error message will be\n\t\t\tdisplayed. If this is the literal \\`true\\`, it will add the\n\t\t\t\\`-is-error\\` class to the wrapper div, but not render the\n\t\t\t\\`-error-content\\` \\`div\\`.\n "]))),
FixedOption: any(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n\t\t\t*Child Element* - A special kind of `Option` that is always rendered at the top of\n\t\t\tthe menu.\n\t\t"], ["\n\t\t\t*Child Element* - A special kind of \\`Option\\` that is always rendered at the top of\n\t\t\tthe menu.\n\t\t"]))),
NullOption: any(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n\t\t\t*Child Element* - A special kind of `Option` that is always rendered at\n\t\t\tthe top of the menu and has an `optionIndex` of `null`. Useful for\n\t\t\tunselect.\n\t\t"], ["\n\t\t\t*Child Element* - A special kind of \\`Option\\` that is always rendered at\n\t\t\tthe top of the menu and has an \\`optionIndex\\` of \\`null\\`. Useful for\n\t\t\tunselect.\n\t\t"]))),
OptionGroup: any(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n\t\t\t*Child Element* - Used to group `Option`s within the menu. Any\n\t\t\tnon-`Option`s passed in will be rendered as a label for the group.\n "], ["\n\t\t\t*Child Element* - Used to group \\`Option\\`s within the menu. Any\n\t\t\tnon-\\`Option\\`s passed in will be rendered as a label for the group.\n "]))),
SearchField: any(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n *Child Element* - The visual Search element that the user can pass text\n to.\n "], ["\n *Child Element* - The visual Search element that the user can pass text\n to.\n "]))),
Label: any(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n *Child Element* - A custom label used as header text when options are\n selected.\n "], ["\n *Child Element* - A custom label used as header text when options are\n selected.\n "]))),
};
return SearchableMultiSelect;
}(react_1.default.Component));
exports.SearchableMultiSelectDumb = SearchableMultiSelect;
exports.default = state_management_1.buildModernHybridComponent(SearchableMultiSelect, { reducers: reducers });
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26;
//# sourceMappingURL=SearchableMultiSelect.js.map