@reltio/components 1.4.877 → 1.4.881

package/cjs/components/MatchRulesBlock/TransitiveMatchRules/TransitiveMatchRule.js

@@ -0,0 +1,41 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var ArrowExpandButton_1 = __importDefault(require("../../ArrowExpandButton/ArrowExpandButton"));
+var SimpleMatchRules_1 = __importDefault(require("../SimpleMatchRules/SimpleMatchRules"));
+var SimpleMatchRulesBuilder_1 = __importDefault(require("../SimpleMatchRulesBuilder/SimpleMatchRulesBuilder"));
+var styles_1 = __importDefault(require("./styles"));
+var TransitiveMatchRule = function (_a) {
+    var label = _a.label, matchRules = _a.matchRules;
+    var styles = styles_1.default();
+    var _b = react_1.useState(false), expanded = _b[0], setExpanded = _b[1];
+    var handleOnExpand = react_1.useCallback(function () { return setExpanded(function (expand) { return !expand; }); }, []);
+    return (react_1.default.createElement("div", { className: styles.container },
+        react_1.default.createElement("div", { onClick: handleOnExpand, className: styles.badge },
+            react_1.default.createElement(ArrowExpandButton_1.default, { expanded: expanded }),
+            react_1.default.createElement("div", { className: styles.label }, label)),
+        expanded ? (react_1.default.createElement(SimpleMatchRulesBuilder_1.default, { Component: SimpleMatchRules_1.default, matchRules: matchRules, className: styles.matchLabels })) : null));
+};
+exports.default = TransitiveMatchRule;

package/cjs/components/MatchRulesBlock/TransitiveMatchRules/styles.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var styles_1 = require("@material-ui/core/styles");
+var styles = styles_1.makeStyles(function (theme) { return ({
+    label: {
+        fontSize: '13px',
+        lineHeight: '15px',
+        color: theme.palette.primary.light
+    },
+    container: {
+        display: 'flex',
+        flexDirection: 'column'
+    },
+    badge: {
+        display: 'flex',
+        marginBottom: '8px',
+        cursor: 'pointer'
+    },
+    matchLabels: {
+        marginLeft: '30px'
+    }
+}); });
+exports.default = styles;

package/cjs/components/MatchRulesBlock/TransitiveMatchRulesTooltip/TransitiveMatchRulesTooltip.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var MatchRulesTooltip_1 = __importDefault(require("../MatchRulesTooltip/MatchRulesTooltip"));
+var styles_1 = __importDefault(require("./styles"));
+var TransitiveMatchRulesTooltip = function (_a) {
+    var transitiveMatchRules = _a.transitiveMatchRules;
+    var styles = styles_1.default();
+    return (react_1.default.createElement(react_1.default.Fragment, null, transitiveMatchRules.map(function (_a, index) {
+        var label = _a.label, matchRules = _a.matchRules;
+        return (react_1.default.createElement("div", { key: index, className: styles.ruleWrapper },
+            react_1.default.createElement("div", { className: styles.label }, label),
+            react_1.default.createElement(MatchRulesTooltip_1.default, { matchRules: matchRules })));
+    })));
+};
+exports.default = TransitiveMatchRulesTooltip;

package/cjs/components/MatchRulesBlock/TransitiveMatchRulesTooltip/styles.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var styles_1 = require("@material-ui/core/styles");
+var styles = styles_1.makeStyles({
+    ruleWrapper: {
+        paddingTop: '8px'
+    },
+    label: {
+        fontWeight: 500,
+        fontSize: '12px'
+    }
+});
+exports.default = styles;

package/cjs/components/MatchRulesBlock/types/index.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/components/ModeSwitcher/ModeSwitcher.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var Button_1 = __importDefault(require("@material-ui/core/Button"));
+var ButtonGroup_1 = __importDefault(require("@material-ui/core/ButtonGroup"));
+var classnames_1 = __importDefault(require("classnames"));
+var withTooltip_1 = __importDefault(require("../../HOCs/withTooltip/withTooltip"));
+var styles_1 = __importDefault(require("./styles"));
+var ButtonWithTooltip = withTooltip_1.default(Button_1.default);
+var ModeSwitcher = function (_a) {
+    var className = _a.className, _b = _a.classes, classes = _b === void 0 ? {} : _b, _c = _a.modes, modes = _c === void 0 ? [] : _c, modeId = _a.modeId, onChange = _a.onChange;
+    var styles = styles_1.default();
+    var getChangeModeHandler = function (newMode) { return function () { return onChange(newMode); }; };
+    return (react_1.default.createElement(ButtonGroup_1.default, { className: className }, modes.map(function (_a) {
+        var _b;
+        var id = _a.id, title = _a.title, tooltipTitle = _a.tooltipTitle, Icon = _a.Icon;
+        return (react_1.default.createElement(ButtonWithTooltip, { key: String(id), className: classnames_1.default(styles.button, (_b = {}, _b[styles.current] = modeId === id, _b), classes.button), tooltipTitle: tooltipTitle, onClick: getChangeModeHandler(id), "data-reltio-id": "reltio-search-mode-" + id },
+            Icon && react_1.default.createElement(Icon, { className: styles.icon }),
+            title && react_1.default.createElement("div", { className: styles.title }, title)));
+    })));
+};
+exports.default = ModeSwitcher;

package/cjs/components/ModeSwitcher/styles.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var styles_1 = require("@material-ui/core/styles");
+var useStyles = styles_1.makeStyles(function (theme) { return ({
+    button: {
+        minWidth: '30px',
+        padding: '8px 8px',
+        justifyContent: 'start',
+        fill: 'rgba(0,0,0,0.54)',
+        textTransform: 'none',
+        borderColor: 'rgba(0,0,0,0.12)'
+    },
+    icon: {
+        color: 'rgba(0,0,0,0.54)',
+        width: '20px',
+        height: '20px',
+        marginRight: '8px'
+    },
+    title: {
+        fontSize: '13px',
+        lineHeight: '15px',
+        letterSpacing: 0
+    },
+    current: {
+        '& $icon': {
+            color: theme.palette.primary.main
+        },
+        backgroundColor: styles_1.fade(theme.palette.primary.main, 0.12),
+        fill: theme.palette.primary.main,
+        color: theme.palette.primary.main,
+        '&:hover': {
+            backgroundColor: styles_1.fade(theme.palette.primary.main, 0.24)
+        }
+    }
+}); });
+exports.default = useStyles;

package/cjs/components/ModeSwitcherSelect/ModeSwitcherSelect.js

@@ -0,0 +1,87 @@
+"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 __spreadArray = (this && this.__spreadArray) || function (to, from) {
+    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+        to[j] = from[i];
+    return to;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModeSwitcherSelect = void 0;
+var react_1 = __importDefault(require("react"));
+var ramda_1 = require("ramda");
+var classnames_1 = __importDefault(require("classnames"));
+var Select_1 = __importDefault(require("@material-ui/core/Select"));
+var MenuItem_1 = __importDefault(require("@material-ui/core/MenuItem"));
+var Box_1 = __importDefault(require("@material-ui/core/Box"));
+var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var Tooltip_1 = __importDefault(require("@material-ui/core/Tooltip"));
+var styles_1 = require("./styles");
+var isButton = function (value) { return 'onClick' in value; };
+var ModeSwitcherSelect = function (_a) {
+    var optionsGroup = _a.optionsGroup, buttonsGroup = _a.buttonsGroup, value = _a.value, onChange = _a.onChange, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
+    var styles = styles_1.useStyles();
+    var handleChange = function (e) {
+        var value = e.target.value;
+        var isOption = optionsGroup.some(ramda_1.propEq('value', value));
+        if (isOption)
+            onChange(value);
+    };
+    var renderMenuItems = function (items) {
+        var firstButtonIdx = items.findIndex(isButton);
+        return items.map(function (item, idx) {
+            var _a;
+            var value = item.value, description = item.description, IconComponent = item.icon;
+            var menuItemProps = {
+                value: value,
+                className: styles.menuItem
+            };
+            if (isButton(item)) {
+                menuItemProps.onClick = function () { return item.onClick(value); };
+                menuItemProps.className = classnames_1.default(menuItemProps.className, (_a = {},
+                    _a[styles.firstMenuItemButton] = idx === firstButtonIdx,
+                    _a));
+            }
+            return (react_1.default.createElement(MenuItem_1.default, __assign({ key: value }, menuItemProps, { "data-reltio-id": "reltio-profile-select-mode-" + value }),
+                react_1.default.createElement(Box_1.default, { className: styles.menuItemInner },
+                    react_1.default.createElement(IconComponent, { className: styles.menuItemIcon }),
+                    react_1.default.createElement(Box_1.default, null,
+                        react_1.default.createElement(Typography_1.default, { className: styles.menuItemLabel }, value),
+                        react_1.default.createElement(Typography_1.default, { className: styles.menuItemDescription }, description)))));
+        });
+    };
+    return (react_1.default.createElement(Select_1.default, { classes: {
+            root: styles.root,
+            icon: styles.arrowIcon,
+            outlined: styles.outlined
+        }, value: value, onChange: handleChange, variant: "outlined", renderValue: function (value) {
+            var _a = optionsGroup.find(ramda_1.propEq('value', value)), IconComponent = _a.icon, label = _a.label;
+            return (react_1.default.createElement(Box_1.default, { className: styles.currentValue },
+                react_1.default.createElement(IconComponent, { className: styles.currentValueIcon }),
+                react_1.default.createElement(Tooltip_1.default, { title: label },
+                    react_1.default.createElement(Typography_1.default, { className: styles.currentValueText }, label))));
+        }, MenuProps: {
+            anchorOrigin: {
+                vertical: 'bottom',
+                horizontal: 'right'
+            },
+            transformOrigin: {
+                vertical: 'top',
+                horizontal: 'right'
+            },
+            getContentAnchorEl: null
+        }, disabled: disabled, "data-reltio-id": "reltio-profile-select-mode" }, renderMenuItems(__spreadArray(__spreadArray([], optionsGroup), buttonsGroup))));
+};
+exports.ModeSwitcherSelect = ModeSwitcherSelect;

package/cjs/components/ModeSwitcherSelect/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModeSwitcherSelect = void 0;
+var ModeSwitcherSelect_1 = require("./ModeSwitcherSelect");
+Object.defineProperty(exports, "ModeSwitcherSelect", { enumerable: true, get: function () { return ModeSwitcherSelect_1.ModeSwitcherSelect; } });

package/cjs/components/ModeSwitcherSelect/styles.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+var MAX_WIDTH_SELECT = 200;
+var SELECT_PADDING_RIGHT = 32;
+var SELECT_PADDING_LEFT = 12;
+var CALCULATED_MAX_WIDTH_SELECT = MAX_WIDTH_SELECT - SELECT_PADDING_LEFT - SELECT_PADDING_RIGHT;
+exports.useStyles = styles_1.makeStyles(function (theme) { return ({
+    root: {
+        maxWidth: CALCULATED_MAX_WIDTH_SELECT,
+        paddingTop: '9px',
+        paddingBottom: '9px'
+    },
+    outlined: {
+        paddingRight: SELECT_PADDING_RIGHT,
+        paddingLeft: SELECT_PADDING_LEFT
+    },
+    arrowIcon: {
+        fontSize: '18px',
+        top: 'calc(50% - 9px)',
+        right: '12px',
+        color: theme.palette.text.secondary
+    },
+    currentValue: {
+        display: 'flex',
+        alignItems: 'center'
+    },
+    currentValueIcon: {
+        fontSize: '18px',
+        marginRight: '8px',
+        color: theme.palette.text.secondary
+    },
+    currentValueText: {
+        fontSize: '14px',
+        lineHeight: '16px',
+        textTransform: 'uppercase',
+        fontWeight: 500,
+        color: theme.palette.text.primary,
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis',
+        overflow: 'hidden'
+    },
+    menuItem: {
+        padding: '9px 12px 7px'
+    },
+    firstMenuItemButton: {
+        borderTop: '1px solid #e4e4e4'
+    },
+    menuItemInner: {
+        display: 'flex',
+        alignItems: 'flex-start'
+    },
+    menuItemIcon: {
+        fontSize: '18px',
+        color: theme.palette.text.secondary,
+        marginRight: '9px'
+    },
+    menuItemLabel: {
+        fontSize: '14px',
+        lineHeight: '16px',
+        fontWeight: 500,
+        color: theme.palette.text.primary
+    },
+    menuItemDescription: {
+        fontSize: '10px',
+        lineHeight: '16px',
+        color: theme.palette.text.secondary
+    }
+}); });

package/cjs/components/MultipleInput/MultipleInput.js

@@ -0,0 +1,113 @@
+"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 __spreadArray = (this && this.__spreadArray) || function (to, from) {
+    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+        to[j] = from[i];
+    return to;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_input_autosize_1 = __importDefault(require("react-input-autosize"));
+var classnames_1 = __importDefault(require("classnames"));
+var TextField_1 = __importDefault(require("@material-ui/core/TextField"));
+var prop_types_1 = __importDefault(require("prop-types"));
+var react_1 = __importStar(require("react"));
+var ramda_1 = require("ramda");
+var utils_1 = require("../../core/utils");
+var styles_1 = require("./styles");
+var ValueChip_1 = __importDefault(require("../ValueChip/ValueChip"));
+var Tooltip_1 = __importDefault(require("@material-ui/core/Tooltip"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var AutosizeInputWrapper = function (_a) {
+    var CustomInputComponent = _a.CustomInputComponent, props = __rest(_a, ["CustomInputComponent"]);
+    return CustomInputComponent ? (react_1.default.createElement(CustomInputComponent, __assign({}, props, { customInput: react_input_autosize_1.default }))) : (react_1.default.createElement(react_input_autosize_1.default, __assign({}, props)));
+};
+AutosizeInputWrapper.propTypes = {
+    CustomInputComponent: prop_types_1.default.elementType
+};
+var BACKSPACE_KEY_CODE = 8;
+var EMPTY_VALUES_EDIT_HINT = ui_i18n_1.default.text('Press Enter to add. You may enter multiple values');
+var isEmptyValue = ramda_1.pipe(ramda_1.trim, ramda_1.isEmpty);
+var MultipleInput = function (_a) {
+    var _b = _a.values, values = _b === void 0 ? [] : _b, _c = _a.InputProps, InputProps = _c === void 0 ? {} : _c, _d = _a.inputProps, inputProps = _d === void 0 ? {} : _d, _e = _a.classes, classes = _e === void 0 ? {} : _e, _f = _a.onChange, onChange = _f === void 0 ? utils_1.noop : _f, _g = _a.getValueLabel, getValueLabel = _g === void 0 ? ramda_1.identity : _g, otherProps = __rest(_a, ["values", "InputProps", "inputProps", "classes", "onChange", "getValueLabel"]);
+    var styles = styles_1.useStyles();
+    var _h = InputProps.classes || {}, root = _h.root, InputClasses = __rest(_h, ["root"]);
+    var _j = react_1.useState(''), inputValue = _j[0], setInputValue = _j[1];
+    var clearInputValue = function () { return setInputValue(''); };
+    var removeValueAt = function (index) { return onChange(ramda_1.remove(index, 1, values)); };
+    var appendValue = function (value) { return onChange(ramda_1.uniq(__spreadArray(__spreadArray([], values), [value]))); };
+    var hasValues = values.length > 0;
+    var appendInputValueIfNotEmpty = function () {
+        if (!isEmptyValue(inputValue)) {
+            appendValue(inputValue);
+            clearInputValue();
+        }
+    };
+    var popLastValueIfInputIsEmpty = function () {
+        if (inputValue === '' && hasValues) {
+            removeValueAt(-1);
+        }
+    };
+    var _k = react_1.useState(false), isFocused = _k[0], setIsFocused = _k[1];
+    var setFocused = function () { return setIsFocused(true); };
+    var setUnfocused = function () { return setIsFocused(false); };
+    var hintText = !hasValues && isFocused ? EMPTY_VALUES_EDIT_HINT : '';
+    return (react_1.default.createElement(Tooltip_1.default, { title: hintText },
+        react_1.default.createElement(TextField_1.default, __assign({}, otherProps, { classes: {
+                root: classes.root
+            }, value: inputValue, onChange: ramda_1.pipe(utils_1.getValue, setInputValue), InputProps: __assign(__assign({}, InputProps), { startAdornment: values.map(function (value, index) { return (react_1.default.createElement(ValueChip_1.default, { key: value, label: getValueLabel(value), onDelete: function () { return removeValueAt(index); } })); }), inputComponent: AutosizeInputWrapper, classes: __assign({ root: classnames_1.default(styles.inputRoot, root), input: classnames_1.default(styles.autosizeInput, InputClasses.input) }, InputClasses) }), inputProps: __assign(__assign({}, inputProps), { CustomInputComponent: InputProps.inputComponent }), onKeyPress: ramda_1.when(ramda_1.propEq('key', 'Enter'), appendInputValueIfNotEmpty), onKeyDown: ramda_1.when(ramda_1.propEq('keyCode', BACKSPACE_KEY_CODE), popLastValueIfInputIsEmpty), onFocus: setFocused, onBlur: ramda_1.pipe(appendInputValueIfNotEmpty, setUnfocused) }))));
+};
+MultipleInput.propTypes = {
+    values: prop_types_1.default.arrayOf(prop_types_1.default.string),
+    InputProps: prop_types_1.default.shape({
+        classes: prop_types_1.default.shape({ root: prop_types_1.default.string }),
+        inputComponent: prop_types_1.default.elementType
+    }),
+    inputProps: prop_types_1.default.object,
+    onChange: prop_types_1.default.func,
+    classes: prop_types_1.default.object,
+    getValueLabel: prop_types_1.default.func
+};
+exports.default = MultipleInput;

package/cjs/components/MultipleInput/styles.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = styles_1.makeStyles({
+    inputRoot: {
+        flexWrap: 'wrap'
+    },
+    autosizeInput: {
+        width: 'auto',
+        marginLeft: '5px',
+        overflow: 'hidden',
+        '& input': {
+            background: '0px center',
+            border: 0,
+            fontSize: 'inherit',
+            outline: 0,
+            padding: 0,
+            color: 'inherit'
+        }
+    }
+});

package/cjs/components/MultipliableSelect/MultipliableSelect.js

@@ -0,0 +1,59 @@
+"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 __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 });
+var prop_types_1 = __importDefault(require("prop-types"));
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var ramda_1 = require("ramda");
+var TextField_1 = __importDefault(require("@material-ui/core/TextField"));
+var styles_1 = require("./styles");
+var prop_types_2 = require("../../constants/prop-types");
+var utils_1 = require("../../core/utils");
+var ValueChip_1 = __importDefault(require("../ValueChip/ValueChip"));
+var MultipliableSelect = function (_a) {
+    var _b;
+    var multiple = _a.multiple, value = _a.value, children = _a.children, _c = _a.getValueLabel, getValueLabel = _c === void 0 ? utils_1.noop : _c, _d = _a.getValuePlaceholder, getValuePlaceholder = _d === void 0 ? ramda_1.identity : _d, _e = _a.onChange, onChange = _e === void 0 ? utils_1.noop : _e, fullWidth = _a.fullWidth, TextFieldProps = _a.TextFieldProps, MenuProps = _a.MenuProps, classes = _a.classes, otherProps = __rest(_a, ["multiple", "value", "children", "getValueLabel", "getValuePlaceholder", "onChange", "fullWidth", "TextFieldProps", "MenuProps", "classes"]);
+    var styles = styles_1.useStyles();
+    return (react_1.default.createElement(TextField_1.default, __assign({ select: true, fullWidth: fullWidth }, TextFieldProps, { value: ramda_1.defaultTo(multiple ? [] : '', value), onChange: ramda_1.pipe(utils_1.getValue, onChange), SelectProps: __assign(__assign({}, otherProps), { MenuProps: __assign({ getContentAnchorEl: null, anchorOrigin: { vertical: 'bottom', horizontal: 'left' } }, MenuProps), classes: __assign(__assign({}, classes), { root: classnames_1.default((_b = {}, _b[styles.multiSelect] = multiple, _b), ramda_1.prop('root', classes)) }), multiple: multiple, 
+            // eslint-disable-next-line react/display-name
+            renderValue: function (selected) {
+                return multiple ? (react_1.default.createElement("div", { className: styles.chips }, selected.map(function (value, index) { return (react_1.default.createElement(ValueChip_1.default, { key: value, label: getValueLabel(value) || getValuePlaceholder(value), onMouseDown: function (event) { return event.stopPropagation(); }, onDelete: function () { return onChange(ramda_1.remove(index, 1, selected)); } })); }))) : (getValueLabel(selected) || getValuePlaceholder(selected));
+            } }) }), children));
+};
+MultipliableSelect.propTypes = {
+    multiple: prop_types_1.default.bool,
+    fullWidth: prop_types_1.default.bool,
+    value: prop_types_1.default.oneOfType([prop_types_2.SelectValueType, prop_types_1.default.arrayOf(prop_types_2.SelectValueType)]),
+    TextFieldProps: prop_types_1.default.object,
+    MenuProps: prop_types_1.default.object,
+    children: prop_types_1.default.node,
+    classes: prop_types_1.default.object,
+    onChange: prop_types_1.default.func,
+    getValueLabel: prop_types_1.default.func,
+    getValuePlaceholder: prop_types_1.default.func
+};
+exports.default = MultipliableSelect;

package/cjs/components/MultipliableSelect/styles.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = styles_1.makeStyles({
+    multiSelect: {
+        padding: '3px 48px 3px 8px !important',
+        minHeight: '34px !important'
+    },
+    chips: {
+        display: 'flex',
+        flexWrap: 'wrap'
+    }
+});