@reltio/components 1.4.874 → 1.4.878

package/components/ModeSwitcher/ModeSwitcher.js

@@ -1,25 +1,20 @@
-"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);
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import ButtonGroup from '@material-ui/core/ButtonGroup';
+import classnames from 'classnames';
+import withTooltip from '../../HOCs/withTooltip/withTooltip';
+import useStyles from './styles';
+var ButtonWithTooltip = withTooltip(Button);
 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 styles = useStyles();
     var getChangeModeHandler = function (newMode) { return function () { return onChange(newMode); }; };
-    return (react_1.default.createElement(ButtonGroup_1.default, { className: className }, modes.map(function (_a) {
+    return (React.createElement(ButtonGroup, { 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)));
+        return (React.createElement(ButtonWithTooltip, { key: String(id), className: classnames(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.createElement(Icon, { className: styles.icon }),
+            title && React.createElement("div", { className: styles.title }, title)));
     })));
 };
-exports.default = ModeSwitcher;
+export default ModeSwitcher;

package/components/ModeSwitcher/styles.js

@@ -1,7 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var styles_1 = require("@material-ui/core/styles");
-var useStyles = styles_1.makeStyles(function (theme) { return ({
+import { fade, makeStyles } from '@material-ui/core/styles';
+var useStyles = makeStyles(function (theme) { return ({
     button: {
         minWidth: '30px',
         padding: '8px 8px',
@@ -25,12 +23,12 @@ var useStyles = styles_1.makeStyles(function (theme) { return ({
         '& $icon': {
             color: theme.palette.primary.main
         },
-        backgroundColor: styles_1.fade(theme.palette.primary.main, 0.12),
+        backgroundColor: 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)
+            backgroundColor: fade(theme.palette.primary.main, 0.24)
         }
     }
 }); });
-exports.default = useStyles;
+export default useStyles;

package/components/ModeSwitcherSelect/ModeSwitcherSelect.js

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -15,27 +14,22 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from) {
         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");
+import React from 'react';
+import { propEq } from 'ramda';
+import classnames from 'classnames';
+import Select from '@material-ui/core/Select';
+import MenuItem from '@material-ui/core/MenuItem';
+import Box from '@material-ui/core/Box';
+import Typography from '@material-ui/core/Typography';
+import Tooltip from '@material-ui/core/Tooltip';
+import { useStyles } from './styles';
 var isButton = function (value) { return 'onClick' in value; };
-var ModeSwitcherSelect = function (_a) {
+export 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 styles = useStyles();
     var handleChange = function (e) {
         var value = e.target.value;
-        var isOption = optionsGroup.some(ramda_1.propEq('value', value));
+        var isOption = optionsGroup.some(propEq('value', value));
         if (isOption)
             onChange(value);
     };
@@ -50,28 +44,28 @@ var ModeSwitcherSelect = function (_a) {
             };
             if (isButton(item)) {
                 menuItemProps.onClick = function () { return item.onClick(value); };
-                menuItemProps.className = classnames_1.default(menuItemProps.className, (_a = {},
+                menuItemProps.className = classnames(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.createElement(MenuItem, __assign({ key: value }, menuItemProps, { "data-reltio-id": "reltio-profile-select-mode-" + value }),
+                React.createElement(Box, { className: styles.menuItemInner },
+                    React.createElement(IconComponent, { className: styles.menuItemIcon }),
+                    React.createElement(Box, null,
+                        React.createElement(Typography, { className: styles.menuItemLabel }, value),
+                        React.createElement(Typography, { className: styles.menuItemDescription }, description)))));
         });
     };
-    return (react_1.default.createElement(Select_1.default, { classes: {
+    return (React.createElement(Select, { 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))));
+            var _a = optionsGroup.find(propEq('value', value)), IconComponent = _a.icon, label = _a.label;
+            return (React.createElement(Box, { className: styles.currentValue },
+                React.createElement(IconComponent, { className: styles.currentValueIcon }),
+                React.createElement(Tooltip, { title: label },
+                    React.createElement(Typography, { className: styles.currentValueText }, label))));
         }, MenuProps: {
             anchorOrigin: {
                 vertical: 'bottom',
@@ -84,4 +78,3 @@ var ModeSwitcherSelect = function (_a) {
             getContentAnchorEl: null
         }, disabled: disabled, "data-reltio-id": "reltio-profile-select-mode" }, renderMenuItems(__spreadArray(__spreadArray([], optionsGroup), buttonsGroup))));
 };
-exports.ModeSwitcherSelect = ModeSwitcherSelect;

package/components/ModeSwitcherSelect/index.js

@@ -1,5 +1 @@
-"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; } });
+export { ModeSwitcherSelect } from './ModeSwitcherSelect';

package/components/ModeSwitcherSelect/styles.js

@@ -1,12 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
+import { makeStyles } from '@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 ({
+export var useStyles = makeStyles(function (theme) { return ({
     root: {
         maxWidth: CALCULATED_MAX_WIDTH_SELECT,
         paddingTop: '9px',

package/components/MultipleInput/MultipleInput.js

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -10,25 +9,6 @@ var __assign = (this && this.__assign) || function () {
     };
     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)
@@ -45,39 +25,35 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from) {
         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"));
+import AutosizeInput from 'react-input-autosize';
+import classnames from 'classnames';
+import TextField from '@material-ui/core/TextField';
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+import { identity, pipe, propEq, remove, uniq, when, trim, isEmpty } from 'ramda';
+import { getValue, noop } from '../../core/utils';
+import { useStyles } from './styles';
+import ValueChip from '../ValueChip/ValueChip';
+import Tooltip from '@material-ui/core/Tooltip';
+import i18n from '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)));
+    return CustomInputComponent ? (React.createElement(CustomInputComponent, __assign({}, props, { customInput: AutosizeInput }))) : (React.createElement(AutosizeInput, __assign({}, props)));
 };
 AutosizeInputWrapper.propTypes = {
-    CustomInputComponent: prop_types_1.default.elementType
+    CustomInputComponent: PropTypes.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 EMPTY_VALUES_EDIT_HINT = i18n.text('Press Enter to add. You may enter multiple values');
+var isEmptyValue = pipe(trim, 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 _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 ? noop : _f, _g = _a.getValueLabel, getValueLabel = _g === void 0 ? identity : _g, otherProps = __rest(_a, ["values", "InputProps", "inputProps", "classes", "onChange", "getValueLabel"]);
+    var styles = useStyles();
     var _h = InputProps.classes || {}, root = _h.root, InputClasses = __rest(_h, ["root"]);
-    var _j = react_1.useState(''), inputValue = _j[0], setInputValue = _j[1];
+    var _j = 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 removeValueAt = function (index) { return onChange(remove(index, 1, values)); };
+    var appendValue = function (value) { return onChange(uniq(__spreadArray(__spreadArray([], values), [value]))); };
     var hasValues = values.length > 0;
     var appendInputValueIfNotEmpty = function () {
         if (!isEmptyValue(inputValue)) {
@@ -90,24 +66,24 @@ var MultipleInput = function (_a) {
             removeValueAt(-1);
         }
     };
-    var _k = react_1.useState(false), isFocused = _k[0], setIsFocused = _k[1];
+    var _k = 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: {
+    return (React.createElement(Tooltip, { title: hintText },
+        React.createElement(TextField, __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) }))));
+            }, value: inputValue, onChange: pipe(getValue, setInputValue), InputProps: __assign(__assign({}, InputProps), { startAdornment: values.map(function (value, index) { return (React.createElement(ValueChip, { key: value, label: getValueLabel(value), onDelete: function () { return removeValueAt(index); } })); }), inputComponent: AutosizeInputWrapper, classes: __assign({ root: classnames(styles.inputRoot, root), input: classnames(styles.autosizeInput, InputClasses.input) }, InputClasses) }), inputProps: __assign(__assign({}, inputProps), { CustomInputComponent: InputProps.inputComponent }), onKeyPress: when(propEq('key', 'Enter'), appendInputValueIfNotEmpty), onKeyDown: when(propEq('keyCode', BACKSPACE_KEY_CODE), popLastValueIfInputIsEmpty), onFocus: setFocused, onBlur: 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
+    values: PropTypes.arrayOf(PropTypes.string),
+    InputProps: PropTypes.shape({
+        classes: PropTypes.shape({ root: PropTypes.string }),
+        inputComponent: PropTypes.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
+    inputProps: PropTypes.object,
+    onChange: PropTypes.func,
+    classes: PropTypes.object,
+    getValueLabel: PropTypes.func
 };
-exports.default = MultipleInput;
+export default MultipleInput;

package/components/MultipleInput/styles.js

@@ -1,8 +1,5 @@
-"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({
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles({
     inputRoot: {
         flexWrap: 'wrap'
     },

package/components/MultipliableSelect/MultipliableSelect.js

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -21,39 +20,35 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     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"));
+import PropTypes from 'prop-types';
+import React from 'react';
+import classnames from 'classnames';
+import { defaultTo, identity, pipe, prop, remove } from 'ramda';
+import TextField from '@material-ui/core/TextField';
+import { useStyles } from './styles';
+import { SelectValueType } from '../../constants/prop-types';
+import { getValue, noop } from '../../core/utils';
+import ValueChip from '../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, 
+    var multiple = _a.multiple, value = _a.value, children = _a.children, _c = _a.getValueLabel, getValueLabel = _c === void 0 ? noop : _c, _d = _a.getValuePlaceholder, getValuePlaceholder = _d === void 0 ? identity : _d, _e = _a.onChange, onChange = _e === void 0 ? 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 = useStyles();
+    return (React.createElement(TextField, __assign({ select: true, fullWidth: fullWidth }, TextFieldProps, { value: defaultTo(multiple ? [] : '', value), onChange: pipe(getValue, onChange), SelectProps: __assign(__assign({}, otherProps), { MenuProps: __assign({ getContentAnchorEl: null, anchorOrigin: { vertical: 'bottom', horizontal: 'left' } }, MenuProps), classes: __assign(__assign({}, classes), { root: classnames((_b = {}, _b[styles.multiSelect] = multiple, _b), 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));
+                return multiple ? (React.createElement("div", { className: styles.chips }, selected.map(function (value, index) { return (React.createElement(ValueChip, { key: value, label: getValueLabel(value) || getValuePlaceholder(value), onMouseDown: function (event) { return event.stopPropagation(); }, onDelete: function () { return onChange(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
+    multiple: PropTypes.bool,
+    fullWidth: PropTypes.bool,
+    value: PropTypes.oneOfType([SelectValueType, PropTypes.arrayOf(SelectValueType)]),
+    TextFieldProps: PropTypes.object,
+    MenuProps: PropTypes.object,
+    children: PropTypes.node,
+    classes: PropTypes.object,
+    onChange: PropTypes.func,
+    getValueLabel: PropTypes.func,
+    getValuePlaceholder: PropTypes.func
 };
-exports.default = MultipliableSelect;
+export default MultipliableSelect;

package/components/MultipliableSelect/styles.js

@@ -1,8 +1,5 @@
-"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({
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles({
     multiSelect: {
         padding: '3px 48px 3px 8px !important',
         minHeight: '34px !important'

package/components/Popper/Popper.js

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -10,25 +9,6 @@ var __assign = (this && this.__assign) || function () {
     };
     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)
@@ -40,28 +20,24 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-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 Popper_1 = __importDefault(require("@material-ui/core/Popper"));
-var Portal_1 = __importDefault(require("@material-ui/core/Portal"));
-var classnames_1 = __importDefault(require("classnames"));
-var styles_1 = require("./styles");
-var utils_1 = require("../../core/utils");
-var utils_2 = require("./utils");
-var Popper = react_1.forwardRef(function (_a, ref) {
+import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
+import MUIPopper from '@material-ui/core/Popper';
+import Portal from '@material-ui/core/Portal';
+import classnames from 'classnames';
+import { useStyles } from './styles';
+import { isIE } from '../../core/utils';
+import { resizeBackdrops } from './utils';
+var Popper = forwardRef(function (_a, ref) {
     var modifiersProp = _a.modifiers, _b = _a.modal, modal = _b === void 0 ? true : _b, onClose = _a.onClose, anchorEl = _a.anchorEl, open = _a.open, className = _a.className, otherProps = __rest(_a, ["modifiers", "modal", "onClose", "anchorEl", "open", "className"]);
-    var styles = styles_1.useStyles();
-    var leftBackdropRef = react_1.useRef();
-    var rightBackdropRef = react_1.useRef();
-    var topBackdropRef = react_1.useRef();
-    var bottomBackdropRef = react_1.useRef();
-    var rafIdRef = react_1.useRef();
-    react_1.useEffect(function () {
+    var styles = useStyles();
+    var leftBackdropRef = useRef();
+    var rightBackdropRef = useRef();
+    var topBackdropRef = useRef();
+    var bottomBackdropRef = useRef();
+    var rafIdRef = useRef();
+    useEffect(function () {
         if (open && modal) {
-            utils_2.resizeBackdrops({
+            resizeBackdrops({
                 anchorEl: anchorEl,
                 leftBackdropRef: leftBackdropRef,
                 rightBackdropRef: rightBackdropRef,
@@ -72,23 +48,23 @@ var Popper = react_1.forwardRef(function (_a, ref) {
             return function () { return cancelAnimationFrame(rafIdRef.current); }; //eslint-disable-line
         }
     }, [anchorEl, open, modal]);
-    var modifiers = react_1.useMemo(function () { return (__assign(__assign({}, modifiersProp), (utils_1.isIE()
+    var modifiers = useMemo(function () { return (__assign(__assign({}, modifiersProp), (isIE()
         ? {
             computeStyle: {
                 gpuAcceleration: false
             }
         }
         : {}))); }, [modifiersProp]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        modal && open && (react_1.default.createElement(Portal_1.default, { container: document.body },
-            react_1.default.createElement("div", { ref: topBackdropRef, className: styles.backdrop, onClick: onClose }),
-            react_1.default.createElement("div", { ref: rightBackdropRef, className: styles.backdrop, onClick: onClose }),
-            react_1.default.createElement("div", { ref: bottomBackdropRef, className: styles.backdrop, onClick: onClose }),
-            react_1.default.createElement("div", { ref: leftBackdropRef, className: styles.backdrop, onClick: onClose }))),
-        react_1.default.createElement(Popper_1.default, __assign({ open: open, anchorEl: anchorEl }, otherProps, { modifiers: modifiers, className: classnames_1.default(className, styles.popper), ref: ref }))));
+    return (React.createElement(React.Fragment, null,
+        modal && open && (React.createElement(Portal, { container: document.body },
+            React.createElement("div", { ref: topBackdropRef, className: styles.backdrop, onClick: onClose }),
+            React.createElement("div", { ref: rightBackdropRef, className: styles.backdrop, onClick: onClose }),
+            React.createElement("div", { ref: bottomBackdropRef, className: styles.backdrop, onClick: onClose }),
+            React.createElement("div", { ref: leftBackdropRef, className: styles.backdrop, onClick: onClose }))),
+        React.createElement(MUIPopper, __assign({ open: open, anchorEl: anchorEl }, otherProps, { modifiers: modifiers, className: classnames(className, styles.popper), ref: ref }))));
 });
 Popper.displayName = 'Popper';
 Popper.defaultProps = {
     modifiers: {}
 };
-exports.default = Popper;
+export default Popper;

package/components/Popper/styles.js

@@ -1,8 +1,5 @@
-"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({
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles({
     backdrop: {
         position: 'fixed',
         top: 0,

package/components/Popper/utils.js

@@ -1,11 +1,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.resizeBackdrops = exports.RAF_THROTTLE_INTERVAL = void 0;
-exports.RAF_THROTTLE_INTERVAL = 100;
-var resizeBackdrops = function (_a) {
+export var RAF_THROTTLE_INTERVAL = 100;
+export var resizeBackdrops = function (_a) {
     var anchorEl = _a.anchorEl, leftBackdropRef = _a.leftBackdropRef, rightBackdropRef = _a.rightBackdropRef, topBackdropRef = _a.topBackdropRef, bottomBackdropRef = _a.bottomBackdropRef, rafIdRef = _a.rafIdRef, _b = _a.lastResizeTimestamp, lastResizeTimestamp = _b === void 0 ? 0 : _b;
     if (anchorEl) {
-        if (Date.now() - lastResizeTimestamp > exports.RAF_THROTTLE_INTERVAL &&
+        if (Date.now() - lastResizeTimestamp > RAF_THROTTLE_INTERVAL &&
             topBackdropRef.current &&
             leftBackdropRef.current &&
             rightBackdropRef.current &&
@@ -30,7 +27,7 @@ var resizeBackdrops = function (_a) {
             lastResizeTimestamp = Date.now();
         }
         rafIdRef.current = requestAnimationFrame(function () {
-            return exports.resizeBackdrops({
+            return resizeBackdrops({
                 anchorEl: anchorEl,
                 leftBackdropRef: leftBackdropRef,
                 rightBackdropRef: rightBackdropRef,
@@ -42,4 +39,3 @@ var resizeBackdrops = function (_a) {
         });
     }
 };
-exports.resizeBackdrops = resizeBackdrops;