lucid-ui/dist/cjs/components/SearchableMultiSelect/SearchableMultiSelect.stories.js

A UI component library from Xandr.

"use strict";
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.Invalid = exports.FormattedOptions = exports.SelectAll = exports.CustomSelectionLabel = exports.GroupedOptions = exports.Asynchronous = exports.Props = exports.Basic = void 0;
var react_1 = __importStar(require("react"));
var create_react_class_1 = __importDefault(require("create-react-class"));
var lodash_1 = __importStar(require("lodash"));
var Resizer_1 = __importDefault(require("../Resizer/Resizer"));
var SearchableMultiSelect_1 = __importDefault(require("./SearchableMultiSelect"));
var Selection_1 = __importDefault(require("../Selection/Selection"));
//👇 Provide Storybook with the component name, 'section', any subcomponents and a description
exports.default = {
    title: 'Controls/SearchableMultiSelect',
    component: SearchableMultiSelect_1.default,
    subcomponents: {
        'SearchableMultiSelect.SelectionOption': SearchableMultiSelect_1.default.Option.Selection,
        'SearchableMultiSelect.Option.Selected': SearchableMultiSelect_1.default.Option.Selected,
        'SearchableMultiSelect.OptionGroup': SearchableMultiSelect_1.default.OptionGroup,
        'SearchableMultiSelect.SearchFieldComponent': SearchableMultiSelect_1.default.SearchField,
        'SearchableMultiSelect.Option': SearchableMultiSelect_1.default.Option,
    },
    parameters: {
        docs: {
            description: {
                component: SearchableMultiSelect_1.default.peek.description,
            },
        },
    },
    args: SearchableMultiSelect_1.default.defaultProps,
};
//👇 Destructure any child components that we will need
var Option = SearchableMultiSelect_1.default.Option;
//👇 Add a key prop to each element of the array
function addKeys(children) {
    return (0, lodash_1.map)(children, function (child, index) { return (__assign(__assign({}, child), { key: index })); });
}
/* Basic */
var Basic = function (args) {
    return react_1.default.createElement(SearchableMultiSelect_1.default, __assign({}, args));
};
exports.Basic = Basic;
exports.Basic.args = {
    children: addKeys([
        react_1.default.createElement(Option, null, "Alabama"),
        react_1.default.createElement(Option, null, "Alaska"),
        react_1.default.createElement(Option, null, "Arizona"),
        react_1.default.createElement(Option, null, "Arkansas"),
        react_1.default.createElement(Option, null, "California"),
        react_1.default.createElement(Option, null, "Colorado"),
        react_1.default.createElement(Option, null, "Connecticut"),
        react_1.default.createElement(Option, null, "Delaware"),
        react_1.default.createElement(Option, null, "Florida"),
        react_1.default.createElement(Option, null, "Georgia"),
        react_1.default.createElement(Option, null, "Hawaii"),
        react_1.default.createElement(Option, null, "Idaho"),
        react_1.default.createElement(Option, null, "Illinois"),
        react_1.default.createElement(Option, null, "Indiana"),
        react_1.default.createElement(Option, null, "Iowa"),
        react_1.default.createElement(Option, null, "Kansas"),
        react_1.default.createElement(Option, null, "Kentucky"),
        react_1.default.createElement(Option, null, "Louisiana"),
        react_1.default.createElement(Option, null, "Maine"),
        react_1.default.createElement(Option, null, "Maryland"),
        react_1.default.createElement(Option, null, "Massachusetts"),
        react_1.default.createElement(Option, null, "Michigan"),
        react_1.default.createElement(Option, null, "Minnesota"),
        react_1.default.createElement(Option, null, "Mississippi"),
        react_1.default.createElement(Option, null, "Missouri"),
        react_1.default.createElement(Option, null, "Montana Nebraska"),
        react_1.default.createElement(Option, null, "Nevada"),
        react_1.default.createElement(Option, null, "New Hampshire"),
        react_1.default.createElement(Option, null, "New Jersey"),
        react_1.default.createElement(Option, null, "New Mexico"),
        react_1.default.createElement(Option, null, "New York"),
        react_1.default.createElement(Option, null, "North Carolina"),
        react_1.default.createElement(Option, null, "North Dakota"),
        react_1.default.createElement(Option, null, "Ohio"),
        react_1.default.createElement(Option, null, "Oklahoma"),
        react_1.default.createElement(Option, null, "Oregon"),
        react_1.default.createElement(Option, null, "Pennsylvania Rhode Island"),
        react_1.default.createElement(Option, null, "South Carolina"),
        react_1.default.createElement(Option, null, "South Dakota"),
        react_1.default.createElement(Option, null, "Tennessee"),
        react_1.default.createElement(Option, null, "Texas"),
        react_1.default.createElement(Option, null, "Utah"),
        react_1.default.createElement(Option, null, "Vermont"),
        react_1.default.createElement(Option, null, "Virginia"),
        react_1.default.createElement(Option, null, "Washington"),
        react_1.default.createElement(Option, null, "West Virginia"),
        react_1.default.createElement(Option, null, "Wisconsin"),
        react_1.default.createElement(Option, null, "Wyoming"),
    ]),
};
/* Props */
var Props = function (args) {
    var Option = SearchableMultiSelect_1.default.Option;
    return (react_1.default.createElement(Resizer_1.default, null, function (width) {
        var responsiveMode = width >= 768 ? 'large' : 'small';
        return (react_1.default.createElement("section", null,
            react_1.default.createElement("h5", null, "Loading"),
            react_1.default.createElement(SearchableMultiSelect_1.default, __assign({}, args, { responsiveMode: responsiveMode, isLoading: true }),
                react_1.default.createElement(Option, null, "Alabama")),
            react_1.default.createElement("h5", null, "Disabled"),
            react_1.default.createElement(SearchableMultiSelect_1.default, __assign({}, args, { responsiveMode: responsiveMode, isDisabled: true }),
                react_1.default.createElement(Option, null, "Alabama")),
            react_1.default.createElement("h5", null, "Custom option selections"),
            react_1.default.createElement(SearchableMultiSelect_1.default, __assign({}, args, { responsiveMode: responsiveMode, selectedIndices: [0, 1, 2, 3] }),
                react_1.default.createElement(Option, { Selection: { kind: 'warning' } }, "Washington"),
                react_1.default.createElement(Option, { Selection: { kind: 'success' } }, "Oregon"),
                react_1.default.createElement(Option, { Selection: { kind: 'danger' } }, "California"),
                react_1.default.createElement(Option, { Selection: { kind: 'container' } }, "Nevada")),
            react_1.default.createElement("h5", null, "No remove all option"),
            react_1.default.createElement(SearchableMultiSelect_1.default, __assign({}, args, { responsiveMode: responsiveMode, hasRemoveAll: false, initialState: {
                    selectedIndices: [0, 1, 2],
                } }),
                react_1.default.createElement(Option, null, "Washington"),
                react_1.default.createElement(Option, null, "Oregon"),
                react_1.default.createElement(Option, null, "California"))));
    }));
};
exports.Props = Props;
/* Asynchronous */
var Asynchronous = function (args) {
    var Option = SearchableMultiSelect_1.default.Option;
    var allData = {
        100: { name: 'Rita Daniel' },
        101: { name: 'Meghan Mcgowan' },
        102: { name: 'Latisha Kent' },
        103: { name: 'Jeannine Horton' },
        104: { name: 'Noreen Joyner' },
        105: { name: 'Angelique Head' },
        106: { name: 'Kim Salinas' },
        107: { name: 'Alexis Small' },
        108: { name: 'Fernandez Singleton' },
        109: { name: 'Jacqueline Alvarado' },
        110: { name: 'Cornelia Roman' },
        111: { name: 'John Gonzales' },
        112: { name: 'Mcleod Hodge' },
        113: { name: 'Fry Barrera' },
        114: { name: 'Jannie Compton' },
        115: { name: 'June Odom' },
        116: { name: 'Rose Foster' },
        117: { name: 'Kathryn Prince' },
        118: { name: 'Hebert Bowman' },
        119: { name: 'Shawn Burgess' },
    };
    var Component = (0, create_react_class_1.default)({
        getInitialState: function () {
            return {
                selectedIds: [],
                visibleIds: [],
                isLoading: false,
            };
        },
        componentDidMount: function () {
            this.handleSearch('');
        },
        handleSearch: function (searchText) {
            var _this = this;
            this.setState({ isLoading: true });
            // Fake an API call
            setTimeout(function () {
                var visibleIds = lodash_1.default.reduce(allData, function (acc, _a, id) {
                    var name = _a.name;
                    return lodash_1.default.includes(name.toLowerCase(), searchText.toLowerCase())
                        ? acc.concat(id)
                        : acc;
                }, []);
                _this.setState({
                    visibleIds: visibleIds,
                    isLoading: false,
                });
            }, 750);
        },
        handleRemove: function (_a) {
            var callbackId = _a.props.callbackId;
            this.setState({
                selectedIds: lodash_1.default.without(this.state.selectedIds, callbackId),
            });
        },
        handleSelect: function (index, _a) {
            var callbackId = _a.props.callbackId;
            this.setState({
                selectedIds: lodash_1.default.xor(this.state.selectedIds, [callbackId]),
            });
        },
        render: function () {
            var _this = this;
            var _a = this.state, isLoading = _a.isLoading, visibleIds = _a.visibleIds, selectedIds = _a.selectedIds;
            // Calculate selected indices based on selected ids
            var selectedIndices = lodash_1.default.reduce(visibleIds, function (acc, id, index) {
                return lodash_1.default.includes(selectedIds, id) ? acc.concat(index) : acc;
            }, []);
            return (react_1.default.createElement("section", null,
                react_1.default.createElement(SearchableMultiSelect_1.default, __assign({}, args, { hasSelections: false, isLoading: isLoading, onSelect: this.handleSelect, onSearch: this.handleSearch, selectedIndices: selectedIndices, optionFilter: lodash_1.default.constant(true), SearchField: {
                        placeholder: 'Type here to simulate an API backed search',
                    } }), lodash_1.default.map(visibleIds, function (id) { return (react_1.default.createElement(Option, { key: id, callbackId: id }, allData[id].name)); })),
                !lodash_1.default.isEmpty(selectedIds) ? (react_1.default.createElement(Selection_1.default, { isBold: true, hasBackground: true, Label: 'Selected', kind: 'container', isRemovable: false }, lodash_1.default.map(selectedIds, function (id) { return (react_1.default.createElement(Selection_1.default, { key: id, Label: allData[id].name, callbackId: id, onRemove: _this.handleRemove })); }))) : null));
        },
    });
    return react_1.default.createElement(Component, null);
};
exports.Asynchronous = Asynchronous;
exports.Asynchronous.args = __assign({}, exports.Basic.args);
/* Grouped Options */
var GroupedOptions = function (args) {
    var Option = SearchableMultiSelect_1.default.Option, OptionGroup = SearchableMultiSelect_1.default.OptionGroup;
    return (react_1.default.createElement(SearchableMultiSelect_1.default, __assign({}, args, { hasSelectAll: true, initialState: {
            selectedIndices: [0, 1, 2, 3, 11, 12, 48, 49],
        } }),
        react_1.default.createElement(OptionGroup, null,
            "Northeast",
            react_1.default.createElement(Option, null, "Connecticut"),
            react_1.default.createElement(Option, null, "Delaware"),
            react_1.default.createElement(Option, null, "Maine"),
            react_1.default.createElement(Option, null, "Maryland"),
            react_1.default.createElement(Option, null, "Massachusetts"),
            react_1.default.createElement(Option, null, "New Hampshire"),
            react_1.default.createElement(Option, null, "New Jersey"),
            react_1.default.createElement(Option, null, "New York"),
            react_1.default.createElement(Option, null, "Pennsylvania"),
            react_1.default.createElement(Option, null, "Rhode Island"),
            react_1.default.createElement(Option, null, "Vermont")),
        react_1.default.createElement(OptionGroup, null,
            "Southeast",
            react_1.default.createElement(Option, null, "Alabama"),
            react_1.default.createElement(Option, null, "Arkansas"),
            react_1.default.createElement(Option, null, "Florida"),
            react_1.default.createElement(Option, null, "Georgia"),
            react_1.default.createElement(Option, null, "Kentucky"),
            react_1.default.createElement(Option, null, "Louisiana"),
            react_1.default.createElement(Option, null, "Mississippi"),
            react_1.default.createElement(Option, null, "North Carolina"),
            react_1.default.createElement(Option, null, "South Carolina"),
            react_1.default.createElement(Option, null, "Tennessee"),
            react_1.default.createElement(Option, null, "Virginia"),
            react_1.default.createElement(Option, null, "West Virginia")),
        react_1.default.createElement(OptionGroup, null,
            "Midwest",
            react_1.default.createElement(Option, null, "Illinois"),
            react_1.default.createElement(Option, null, "Indiana"),
            react_1.default.createElement(Option, null, "Iowa"),
            react_1.default.createElement(Option, null, "Kansas"),
            react_1.default.createElement(Option, null, "Michigan"),
            react_1.default.createElement(Option, null, "Minnesota"),
            react_1.default.createElement(Option, null, "Missouri"),
            react_1.default.createElement(Option, null, "Nebraska"),
            react_1.default.createElement(Option, null, "North Dakota"),
            react_1.default.createElement(Option, null, "Ohio"),
            react_1.default.createElement(Option, null, "South Dakota"),
            react_1.default.createElement(Option, null, "Wisconsin")),
        react_1.default.createElement(OptionGroup, null,
            "Southwest",
            react_1.default.createElement(Option, null, "Arizona"),
            react_1.default.createElement(Option, null, "New Mexico"),
            react_1.default.createElement(Option, null, "Oklahoma"),
            react_1.default.createElement(Option, null, "Texas")),
        react_1.default.createElement(OptionGroup, null,
            "West",
            react_1.default.createElement(Option, null, "California"),
            react_1.default.createElement(Option, null, "Colorado"),
            react_1.default.createElement(Option, null, "Idaho"),
            react_1.default.createElement(Option, null, "Montana"),
            react_1.default.createElement(Option, null, "Nevada"),
            react_1.default.createElement(Option, null, "Oregon"),
            react_1.default.createElement(Option, null, "Utah"),
            react_1.default.createElement(Option, null, "Washington"),
            react_1.default.createElement(Option, null, "Wyoming")),
        react_1.default.createElement(Option, null, "Alaska"),
        react_1.default.createElement(Option, null, "Hawaii")));
};
exports.GroupedOptions = GroupedOptions;
/* Custom Selection Label */
var CustomSelectionLabel = function (args) {
    var Option = SearchableMultiSelect_1.default.Option, SelectionLabel = SearchableMultiSelect_1.default.SelectionLabel;
    return (react_1.default.createElement(SearchableMultiSelect_1.default, __assign({}, args),
        react_1.default.createElement(SelectionLabel, null, "Selected States"),
        react_1.default.createElement(Option, null, "Alabama"),
        react_1.default.createElement(Option, null, "Alaska"),
        react_1.default.createElement(Option, null, "Arizona"),
        react_1.default.createElement(Option, null, "Arkansas"),
        react_1.default.createElement(Option, null, "California"),
        react_1.default.createElement(Option, null, "Colorado"),
        react_1.default.createElement(Option, null, "Connecticut"),
        react_1.default.createElement(Option, null, "Delaware"),
        react_1.default.createElement(Option, null, "Florida"),
        react_1.default.createElement(Option, null, "Georgia"),
        react_1.default.createElement(Option, null, "Hawaii"),
        react_1.default.createElement(Option, null, "Idaho"),
        react_1.default.createElement(Option, null, "Illinois"),
        react_1.default.createElement(Option, null, "Indiana"),
        react_1.default.createElement(Option, null, "Iowa"),
        react_1.default.createElement(Option, null, "Kansas"),
        react_1.default.createElement(Option, null, "Kentucky"),
        react_1.default.createElement(Option, null, "Louisiana"),
        react_1.default.createElement(Option, null, "Maine"),
        react_1.default.createElement(Option, null, "Maryland"),
        react_1.default.createElement(Option, null, "Massachusetts"),
        react_1.default.createElement(Option, null, "Michigan"),
        react_1.default.createElement(Option, null, "Minnesota"),
        react_1.default.createElement(Option, null, "Mississippi"),
        react_1.default.createElement(Option, null, "Missouri"),
        react_1.default.createElement(Option, null, "Montana Nebraska"),
        react_1.default.createElement(Option, null, "Nevada"),
        react_1.default.createElement(Option, null, "New Hampshire"),
        react_1.default.createElement(Option, null, "New Jersey"),
        react_1.default.createElement(Option, null, "New Mexico"),
        react_1.default.createElement(Option, null, "New York"),
        react_1.default.createElement(Option, null, "North Carolina"),
        react_1.default.createElement(Option, null, "North Dakota"),
        react_1.default.createElement(Option, null, "Ohio"),
        react_1.default.createElement(Option, null, "Oklahoma"),
        react_1.default.createElement(Option, null, "Oregon"),
        react_1.default.createElement(Option, null, "Pennsylvania Rhode Island"),
        react_1.default.createElement(Option, null, "South Carolina"),
        react_1.default.createElement(Option, null, "South Dakota"),
        react_1.default.createElement(Option, null, "Tennessee"),
        react_1.default.createElement(Option, null, "Texas"),
        react_1.default.createElement(Option, null, "Utah"),
        react_1.default.createElement(Option, null, "Vermont"),
        react_1.default.createElement(Option, null, "Virginia"),
        react_1.default.createElement(Option, null, "Washington"),
        react_1.default.createElement(Option, null, "West Virginia"),
        react_1.default.createElement(Option, null, "Wisconsin"),
        react_1.default.createElement(Option, null, "Wyoming")));
};
exports.CustomSelectionLabel = CustomSelectionLabel;
/* Select All */
var SelectAll = function (args) {
    var Option = SearchableMultiSelect_1.default.Option;
    return (react_1.default.createElement("section", { style: { marginBottom: '300px' } },
        react_1.default.createElement(Resizer_1.default, null, function (width) {
            var responsiveMode = width >= 768 ? 'large' : 'small';
            return (react_1.default.createElement(SearchableMultiSelect_1.default, __assign({}, args, { hasSelectAll: true, selectAllText: 'Custom Select All Text', responsiveMode: responsiveMode }),
                react_1.default.createElement(Option, null, "Alabama"),
                react_1.default.createElement(Option, null, "Alaska"),
                react_1.default.createElement(Option, null, "Arizona"),
                react_1.default.createElement(Option, null, "Arkansas"),
                react_1.default.createElement(Option, null, "California"),
                react_1.default.createElement(Option, null, "Colorado"),
                react_1.default.createElement(Option, null, "Connecticut"),
                react_1.default.createElement(Option, null, "Delaware"),
                react_1.default.createElement(Option, null, "Florida"),
                react_1.default.createElement(Option, null, "Georgia"),
                react_1.default.createElement(Option, null, "Hawaii"),
                react_1.default.createElement(Option, null, "Idaho"),
                react_1.default.createElement(Option, null, "Illinois"),
                react_1.default.createElement(Option, null, "Indiana"),
                react_1.default.createElement(Option, null, "Iowa"),
                react_1.default.createElement(Option, null, "Kansas"),
                react_1.default.createElement(Option, null, "Kentucky"),
                react_1.default.createElement(Option, null, "Louisiana"),
                react_1.default.createElement(Option, null, "Maine"),
                react_1.default.createElement(Option, null, "Maryland"),
                react_1.default.createElement(Option, null, "Massachusetts"),
                react_1.default.createElement(Option, null, "Michigan"),
                react_1.default.createElement(Option, null, "Minnesota"),
                react_1.default.createElement(Option, null, "Mississippi"),
                react_1.default.createElement(Option, null, "Missouri"),
                react_1.default.createElement(Option, null, "Montana Nebraska"),
                react_1.default.createElement(Option, null, "Nevada"),
                react_1.default.createElement(Option, null, "New Hampshire"),
                react_1.default.createElement(Option, null, "New Jersey"),
                react_1.default.createElement(Option, null, "New Mexico"),
                react_1.default.createElement(Option, null, "New York"),
                react_1.default.createElement(Option, null, "North Carolina"),
                react_1.default.createElement(Option, null, "North Dakota"),
                react_1.default.createElement(Option, null, "Ohio"),
                react_1.default.createElement(Option, null, "Oklahoma"),
                react_1.default.createElement(Option, null, "Oregon"),
                react_1.default.createElement(Option, null, "Pennsylvania Rhode Island"),
                react_1.default.createElement(Option, null, "South Carolina"),
                react_1.default.createElement(Option, null, "South Dakota"),
                react_1.default.createElement(Option, null, "Tennessee"),
                react_1.default.createElement(Option, null, "Texas"),
                react_1.default.createElement(Option, null, "Utah"),
                react_1.default.createElement(Option, null, "Vermont"),
                react_1.default.createElement(Option, null, "Virginia"),
                react_1.default.createElement(Option, null, "Washington"),
                react_1.default.createElement(Option, null, "West Virginia"),
                react_1.default.createElement(Option, null, "Wisconsin"),
                react_1.default.createElement(Option, null, "Wyoming")));
        })));
};
exports.SelectAll = SelectAll;
/* Formatted Options */
var FormattedOptions = function (args) {
    function P(_a) {
        var children = _a.children, rest = __rest(_a, ["children"]);
        return react_1.default.createElement("p", __assign({}, rest), children);
    }
    var OptionCols = function (_a) {
        var col1 = _a.col1, col2 = _a.col2, textMatch = _a.textMatch;
        return (react_1.default.createElement("div", { style: { display: 'flex' } },
            react_1.default.createElement("div", { style: { width: 100 } },
                react_1.default.createElement(P, { match: textMatch }, col1)),
            react_1.default.createElement("div", null,
                react_1.default.createElement(P, { match: textMatch }, col2))));
    };
    var optionFilter = function (searchText, _a) {
        var filterText = _a.filterText;
        if (filterText) {
            return new RegExp(lodash_1.default.escapeRegExp(searchText), 'i').test(filterText);
        }
        return true;
    };
    return (react_1.default.createElement(SearchableMultiSelect_1.default, __assign({}, args, { optionFilter: optionFilter }),
        react_1.default.createElement(SearchableMultiSelect_1.default.OptionGroup, { Selected: '' },
            react_1.default.createElement("div", { style: { marginLeft: 27 } },
                react_1.default.createElement(OptionCols, { col1: 'ID', col2: 'NAME' })),
            react_1.default.createElement(SearchableMultiSelect_1.default.Option, { filterText: 'Foo', Selected: 'Foo (1234)' }, function (_a) {
                var searchText = _a.searchText;
                return (react_1.default.createElement(OptionCols, { col1: '1234', col2: 'Foo', textMatch: searchText }));
            }),
            react_1.default.createElement(SearchableMultiSelect_1.default.Option, { filterText: 'Bar', Selected: 'Bar (2345)' }, function (_a) {
                var searchText = _a.searchText;
                return (react_1.default.createElement(OptionCols, { col1: '2345', col2: 'Bar', textMatch: searchText }));
            }),
            react_1.default.createElement(SearchableMultiSelect_1.default.Option, { filterText: 'Baz', Selected: 'Baz (3456)' }, function (_a) {
                var searchText = _a.searchText;
                return (react_1.default.createElement(OptionCols, { col1: '3456', col2: 'Baz', textMatch: searchText }));
            }))));
};
exports.FormattedOptions = FormattedOptions;
exports.FormattedOptions.args = __assign({}, exports.Basic.args);
/* Invalid */
var Invalid = function (args) {
    var Option = SearchableMultiSelect_1.default.Option;
    var _a = (0, react_1.useState)(0), selectedLength = _a[0], setSelectedLength = _a[1];
    var handleChange = function (option, event) {
        var count = selectedLength;
        if (typeof event.props.children === 'string') {
            count--;
        }
        else {
            event.props.children.props.isSelected ? count-- : count++;
        }
        setSelectedLength(count);
    };
    var handleRemoveAll = function (option, event) {
        setSelectedLength(0);
    };
    return (react_1.default.createElement(SearchableMultiSelect_1.default, __assign({}, args, { onRemoveAll: handleRemoveAll, onSelect: handleChange, Error: selectedLength > 1 ? null : 'Please select at least two options' }),
        react_1.default.createElement(Option, null, "Alabama"),
        react_1.default.createElement(Option, null, "Alaska"),
        react_1.default.createElement(Option, null, "Arizona"),
        react_1.default.createElement(Option, null, "Arkansas"),
        react_1.default.createElement(Option, null, "California"),
        react_1.default.createElement(Option, null, "Colorado"),
        react_1.default.createElement(Option, null, "Connecticut"),
        react_1.default.createElement(Option, null, "Delaware"),
        react_1.default.createElement(Option, null, "Florida"),
        react_1.default.createElement(Option, null, "Georgia"),
        react_1.default.createElement(Option, null, "Hawaii"),
        react_1.default.createElement(Option, null, "Idaho"),
        react_1.default.createElement(Option, null, "Illinois"),
        react_1.default.createElement(Option, null, "Indiana"),
        react_1.default.createElement(Option, null, "Iowa"),
        react_1.default.createElement(Option, null, "Kansas"),
        react_1.default.createElement(Option, null, "Kentucky"),
        react_1.default.createElement(Option, null, "Louisiana"),
        react_1.default.createElement(Option, null, "Maine"),
        react_1.default.createElement(Option, null, "Maryland"),
        react_1.default.createElement(Option, null, "Massachusetts"),
        react_1.default.createElement(Option, null, "Michigan"),
        react_1.default.createElement(Option, null, "Minnesota"),
        react_1.default.createElement(Option, null, "Mississippi"),
        react_1.default.createElement(Option, null, "Missouri"),
        react_1.default.createElement(Option, null, "Montana Nebraska"),
        react_1.default.createElement(Option, null, "Nevada"),
        react_1.default.createElement(Option, null, "New Hampshire"),
        react_1.default.createElement(Option, null, "New Jersey"),
        react_1.default.createElement(Option, null, "New Mexico"),
        react_1.default.createElement(Option, null, "New York"),
        react_1.default.createElement(Option, null, "North Carolina"),
        react_1.default.createElement(Option, null, "North Dakota"),
        react_1.default.createElement(Option, null, "Ohio"),
        react_1.default.createElement(Option, null, "Oklahoma"),
        react_1.default.createElement(Option, null, "Oregon"),
        react_1.default.createElement(Option, null, "Pennsylvania Rhode Island"),
        react_1.default.createElement(Option, null, "South Carolina"),
        react_1.default.createElement(Option, null, "South Dakota"),
        react_1.default.createElement(Option, null, "Tennessee"),
        react_1.default.createElement(Option, null, "Texas"),
        react_1.default.createElement(Option, null, "Utah"),
        react_1.default.createElement(Option, null, "Vermont"),
        react_1.default.createElement(Option, null, "Virginia"),
        react_1.default.createElement(Option, null, "Washington"),
        react_1.default.createElement(Option, null, "West Virginia"),
        react_1.default.createElement(Option, null, "Wisconsin"),
        react_1.default.createElement(Option, null, "Wyoming")));
};
exports.Invalid = Invalid;
//# sourceMappingURL=SearchableMultiSelect.stories.js.map