@reltio/components 1.4.701 → 1.4.702

package/components/ConfirmationDialog/ConfirmationDialog.js

@@ -0,0 +1,28 @@
+"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 ui_i18n_1 = __importDefault(require("ui-i18n"));
+var Button_1 = __importDefault(require("@material-ui/core/Button"));
+var Dialog_1 = __importDefault(require("@material-ui/core/Dialog"));
+var DialogActions_1 = __importDefault(require("@material-ui/core/DialogActions"));
+var DialogContent_1 = __importDefault(require("@material-ui/core/DialogContent"));
+var DialogContentText_1 = __importDefault(require("@material-ui/core/DialogContentText"));
+var DialogTitle_1 = __importDefault(require("@material-ui/core/DialogTitle"));
+var styles_1 = require("./styles");
+var ConfirmationDialog = function (_a) {
+    var open = _a.open, title = _a.title, content = _a.content, onCancel = _a.onCancel, _b = _a.cancelCaption, cancelCaption = _b === void 0 ? ui_i18n_1.default.text('Cancel') : _b, onDiscard = _a.onDiscard, _c = _a.discardCaption, discardCaption = _c === void 0 ? '' : _c, onSave = _a.onSave, _d = _a.saveCaption, saveCaption = _d === void 0 ? ui_i18n_1.default.text('Save') : _d, _e = _a.disabledSave, disabledSave = _e === void 0 ? false : _e;
+    var styles = styles_1.useStyles();
+    return (react_1.default.createElement(Dialog_1.default, { open: open, onClose: onCancel, classes: { paperScrollPaper: styles.paper } },
+        react_1.default.createElement(DialogTitle_1.default, { classes: { root: styles.title } }, title),
+        react_1.default.createElement(DialogContent_1.default, { classes: { root: styles.content } },
+            react_1.default.createElement(DialogContentText_1.default, { classes: { root: styles.contentText } }, content)),
+        react_1.default.createElement(DialogActions_1.default, { className: styles.actionButtons, disableSpacing: true },
+            onCancel && react_1.default.createElement(Button_1.default, { onClick: onCancel }, cancelCaption),
+            react_1.default.createElement("div", null,
+                onDiscard && (react_1.default.createElement(Button_1.default, { onClick: onDiscard, classes: { root: styles.discardButton } }, discardCaption)),
+                react_1.default.createElement(Button_1.default, { onClick: onSave, color: "primary", disabled: disabledSave, autoFocus: true }, saveCaption)))));
+};
+exports.default = ConfirmationDialog;

package/components/ConfirmationDialog/styles.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+var useStyles = styles_1.makeStyles({
+    paper: {
+        minHeight: '180px'
+    },
+    title: {
+        padding: '16px 16px 10px 16px',
+        fontSize: '20px',
+        fontWeight: 500,
+        letterSpacing: '0.25px',
+        lineHeight: '24px'
+    },
+    content: {
+        padding: '0 16px'
+    },
+    contentText: {
+        marginBottom: 0,
+        fontSize: '16px',
+        letterSpacing: '0.15px',
+        lineHeight: '24px'
+    },
+    actionButtons: {
+        display: 'flex',
+        paddingTop: '4px',
+        fontSize: '14px',
+        fontWeight: 500,
+        letterSpacing: 0,
+        lineHeight: '16px',
+        '& > div': {
+            marginLeft: 'auto'
+        }
+    },
+    discardButton: {
+        marginRight: '8px'
+    }
+});
+exports.useStyles = useStyles;

package/components/ConnectionRelationTypeSelector/ConnectionRelationTypeSelector.js

@@ -0,0 +1,83 @@
+"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 });
+var react_1 = __importStar(require("react"));
+var prop_types_1 = __importDefault(require("prop-types"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var ramda_1 = require("ramda");
+var hooks_1 = require("../../hooks");
+var RelationTypeSelector_1 = __importDefault(require("../attributes/editMode/RelationTypeSelector/RelationTypeSelector"));
+var ConnectionRelationTypeSelector = function (_a) {
+    var _b = _a.relation, relation = _b === void 0 ? {} : _b, _c = _a.inRelationTypes, inRelationTypes = _c === void 0 ? [] : _c, _d = _a.outRelationTypes, outRelationTypes = _d === void 0 ? [] : _d, _e = _a.onChange, onChange = _e === void 0 ? ramda_1.identity : _e, _f = _a.applyFirstByDefault, applyFirstByDefault = _f === void 0 ? false : _f, _g = _a.reversedContextLabels, reversedContextLabels = _g === void 0 ? false : _g, otherProps = __rest(_a, ["relation", "inRelationTypes", "outRelationTypes", "onChange", "applyFirstByDefault", "reversedContextLabels"]);
+    var _h = hooks_1.useRelationTypeSelector({ reversedContextLabels: reversedContextLabels }), getRelationTypesOptions = _h.getRelationTypesOptions, fromEditorValue = _h.fromEditorValue, toEditorValue = _h.toEditorValue;
+    var relationsTypesOptions = react_1.useMemo(function () { return getRelationTypesOptions(inRelationTypes, outRelationTypes); }, [
+        getRelationTypesOptions,
+        inRelationTypes,
+        outRelationTypes
+    ]);
+    var handleChange = react_1.useCallback(ramda_1.pipe(fromEditorValue(inRelationTypes, outRelationTypes), onChange), [
+        fromEditorValue,
+        inRelationTypes,
+        outRelationTypes,
+        onChange
+    ]);
+    react_1.useEffect(function () {
+        if (applyFirstByDefault && relationsTypesOptions.length) {
+            handleChange(relationsTypesOptions[0]);
+        }
+    }, [relationsTypesOptions, applyFirstByDefault, handleChange]);
+    return (react_1.default.createElement(RelationTypeSelector_1.default, __assign({ value: toEditorValue(relation, relationsTypesOptions), options: relationsTypesOptions, onChange: handleChange }, otherProps)));
+};
+ConnectionRelationTypeSelector.propTypes = {
+    className: prop_types_1.default.string,
+    relation: mdm_sdk_1.ConnectionRelationType,
+    inRelationTypes: prop_types_1.default.arrayOf(mdm_sdk_1.RelationTypeType),
+    outRelationTypes: prop_types_1.default.arrayOf(mdm_sdk_1.RelationTypeType),
+    applyFirstByDefault: prop_types_1.default.bool,
+    reversedContextLabels: prop_types_1.default.bool,
+    onChange: prop_types_1.default.func
+};
+exports.default = ConnectionRelationTypeSelector;

package/components/DataTypeValue/DataTypeValue.js

@@ -0,0 +1,28 @@
+"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 prop_types_1 = __importDefault(require("prop-types"));
+var moment_1 = __importDefault(require("moment"));
+var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var react_redux_1 = require("react-redux");
+var Link_1 = __importDefault(require("@material-ui/core/Link"));
+var DataTypeValue = function (_a) {
+    var _b = _a.value, value = _b === void 0 ? null : _b, dataTypeDefinition = _a.dataTypeDefinition, _c = _a.rich, rich = _c === void 0 ? true : _c;
+    var attributePresentations = react_redux_1.useSelector(mdm_module_1.default.selectors.getAttributePresentations);
+    var localeDateFormat = moment_1.default.localeData().longDateFormat('L');
+    var localeTimeFormat = moment_1.default.localeData().longDateFormat('LTS');
+    var dateMask = react_redux_1.useSelector(mdm_module_1.default.selectors.getDateMask) || localeDateFormat;
+    var dateTimeMask = react_redux_1.useSelector(mdm_module_1.default.selectors.getDateTimeMask) || localeDateFormat + ' ' + localeTimeFormat;
+    var formattedValue = mdm_sdk_1.formatDataTypeValue({ attributePresentations: attributePresentations, dataTypeDefinition: dataTypeDefinition, dateMask: dateMask, dateTimeMask: dateTimeMask }, value);
+    return rich && mdm_sdk_1.isAttributeValueLink(dataTypeDefinition, value) ? (react_1.default.createElement(Link_1.default, { target: "_blank", href: mdm_sdk_1.addProtocolToLink(formattedValue), underline: "none" }, formattedValue)) : (formattedValue);
+};
+DataTypeValue.propTypes = {
+    value: prop_types_1.default.any,
+    dataTypeDefinition: prop_types_1.default.object,
+    rich: prop_types_1.default.bool
+};
+exports.default = DataTypeValue;

package/components/DateRangePicker/DateRangePicker.js

@@ -0,0 +1,87 @@
+"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 prop_types_1 = __importDefault(require("prop-types"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var nanoid_1 = __importDefault(require("nanoid"));
+var ramda_1 = require("ramda");
+var ArrowBack_1 = __importDefault(require("@material-ui/icons/ArrowBack"));
+var Button_1 = __importDefault(require("@material-ui/core/Button"));
+var Toolbar_1 = __importDefault(require("@material-ui/core/Toolbar"));
+var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var SmallIconButton_1 = __importDefault(require("../SmallIconButton/SmallIconButton"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var TimestampEditor_1 = __importDefault(require("../editors/TimestampEditor/TimestampEditor"));
+var DateEditor_1 = __importDefault(require("../editors/DateEditor/DateEditor"));
+var styles_1 = require("./styles");
+var START_DATE = 0;
+var END_DATE = 1;
+var getDate = function (values, index) { return ramda_1.pathOr(null, [index], values); };
+var DateRangePicker = react_1.forwardRef(function (_a, ref) {
+    var onCancel = _a.onCancel, onApply = _a.onApply, values = _a.values, type = _a.type;
+    var styles = styles_1.useStyles();
+    var editorFromId = react_1.useRef(nanoid_1.default());
+    var editorToId = react_1.useRef(nanoid_1.default());
+    var _b = react_1.useState(null), startDate = _b[0], setStartDate = _b[1];
+    var _c = react_1.useState(null), endDate = _c[0], setEndDate = _c[1];
+    react_1.default.useEffect(function () {
+        setStartDate(getDate(values, START_DATE));
+        setEndDate(getDate(values, END_DATE));
+    }, [values]);
+    var ComponentEditor = type === mdm_sdk_1.DataTypes.TYPE_TIMESTAMP ? TimestampEditor_1.default : DateEditor_1.default;
+    var headerTitle = type === mdm_sdk_1.DataTypes.TYPE_TIMESTAMP ? ui_i18n_1.default.text('Pick date and time') : ui_i18n_1.default.text('Pick date');
+    var selectStartDateHandler = function (value) {
+        setStartDate(value);
+    };
+    var selectEndDateHandler = function (value) {
+        setEndDate(value);
+    };
+    var onUpdate = function () {
+        if (startDate && endDate && startDate > endDate) {
+            onApply([endDate, startDate]);
+        }
+        else {
+            onApply([startDate, endDate]);
+        }
+    };
+    var onTabStopPropagation = function (e) { return e.key === 'Tab' && e.stopPropagation(); };
+    return (react_1.default.createElement("div", { className: styles.container, ref: ref, onKeyDown: onTabStopPropagation },
+        react_1.default.createElement(Toolbar_1.default, { disableGutters: true, classes: { root: styles.header } },
+            react_1.default.createElement(SmallIconButton_1.default, { size: "L", icon: ArrowBack_1.default, onClick: onCancel }),
+            react_1.default.createElement(Typography_1.default, { className: styles.title }, headerTitle)),
+        react_1.default.createElement("div", { className: styles.dateRangeContainer },
+            react_1.default.createElement(ComponentEditor, { id: editorFromId.current, label: 'From', variant: "filled", value: startDate, onChange: selectStartDateHandler, className: styles.dateInput, margin: "dense" }),
+            react_1.default.createElement(ComponentEditor, { id: editorToId.current, label: 'To', variant: "filled", value: endDate, onChange: selectEndDateHandler, className: styles.dateInput, margin: "dense" })),
+        react_1.default.createElement("div", { className: styles.actionButtons },
+            react_1.default.createElement(Button_1.default, { color: "primary", onClick: onUpdate, className: styles.button }, ui_i18n_1.default.text('Update')))));
+});
+DateRangePicker.propTypes = {
+    onCancel: prop_types_1.default.func.isRequired,
+    onApply: prop_types_1.default.func.isRequired,
+    values: prop_types_1.default.arrayOf(prop_types_1.default.instanceOf(Date)),
+    type: prop_types_1.default.string
+};
+DateRangePicker.displayName = 'DateRangePicker';
+exports.default = DateRangePicker;

package/components/DateRangePicker/styles.js

@@ -0,0 +1,43 @@
+"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(function (theme) { return ({
+    container: {
+        display: 'flex',
+        flexDirection: 'column',
+        minHeight: '182px'
+    },
+    header: {
+        display: 'flex',
+        paddingLeft: '10px',
+        backgroundColor: '#FFFFFF'
+    },
+    title: {
+        marginLeft: '10px',
+        color: theme.palette.text.primary,
+        fontSize: '20px',
+        fontWeight: 500,
+        letterSpacing: '0.25px',
+        lineHeight: '24px'
+    },
+    dateRangeContainer: {
+        display: 'flex',
+        flexGrow: 1,
+        whiteSpace: 'nowrap',
+        cursor: 'default',
+        paddingTop: '8px'
+    },
+    dateInput: {
+        margin: '0 7px'
+    },
+    actionButtons: {
+        display: 'flex',
+        justifyContent: 'flex-end',
+        height: '48px',
+        margin: '0px 8px'
+    },
+    button: {
+        width: '96px'
+    }
+}); });

package/components/Drawer/Drawer.js

@@ -0,0 +1,72 @@
+"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 });
+var react_1 = __importStar(require("react"));
+var Drawer_1 = __importDefault(require("@material-ui/core/Drawer"));
+var styles_1 = require("@material-ui/core/styles");
+var Drawer = function (_a) {
+    var _b = _a.open, open = _b === void 0 ? true : _b, children = _a.children, otherProps = __rest(_a, ["open", "children"]);
+    var _c = react_1.useState(open), drawerContentsVisible = _c[0], setDrawerContentVisible = _c[1];
+    var hideDelay = styles_1.useTheme().transitions.duration.leavingScreen;
+    react_1.useEffect(function () {
+        if (open !== drawerContentsVisible) {
+            if (open) {
+                // mount children before appear
+                setDrawerContentVisible(true);
+            }
+            else {
+                // unmount children only when closing transition ended
+                var timeout_1 = setTimeout(function () {
+                    setDrawerContentVisible(false);
+                }, hideDelay);
+                return function () { return clearTimeout(timeout_1); };
+            }
+        }
+    }, [open, hideDelay, drawerContentsVisible]);
+    return (react_1.default.createElement(Drawer_1.default, __assign({ open: open }, otherProps), drawerContentsVisible && children));
+};
+Drawer.displayName = 'Drawer';
+exports.default = Drawer;

package/components/DropDownMenuButton/DropDownMenuButton.js

@@ -0,0 +1,74 @@
+"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 __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 classnames_1 = __importDefault(require("classnames"));
+var ramda_1 = require("ramda");
+var Button_1 = __importDefault(require("@material-ui/core/Button"));
+var Menu_1 = __importDefault(require("@material-ui/core/Menu"));
+var hooks_1 = require("../../hooks");
+var MenuItemRenderer_1 = __importDefault(require("./MenuItemRenderer"));
+var styles_1 = require("./styles");
+function DropDownMenuButton(_a) {
+    var _b;
+    var className = _a.className, menuId = _a.menuId, _c = _a.buttonComponent, buttonComponent = _c === void 0 ? Button_1.default : _c, buttonContent = _a.buttonContent, _d = _a.menuItems, menuItems = _d === void 0 ? [] : _d, _e = _a.buttonProps, buttonProps = _e === void 0 ? {} : _e, _f = _a.popoverProps, popoverProps = _f === void 0 ? {} : _f, _g = _a.onMenuOpen, onMenuOpen = _g === void 0 ? ramda_1.identity : _g, _h = _a.onMenuClose, onMenuClose = _h === void 0 ? ramda_1.identity : _h, _j = _a.MenuItemRenderer, MenuItemRenderer = _j === void 0 ? MenuItemRenderer_1.default : _j;
+    var ButtonComponent = buttonComponent;
+    var styles = styles_1.useStyles();
+    var buttonRef = react_1.useRef();
+    var _k = react_1.useState(false), isOpen = _k[0], setIsOpen = _k[1];
+    hooks_1.useDidUpdateEffect(function () {
+        isOpen ? onMenuOpen() : onMenuClose();
+    }, [isOpen, onMenuOpen, onMenuClose]);
+    var handleToggle = react_1.useCallback(function (e) {
+        e === null || e === void 0 ? void 0 : e.stopPropagation();
+        setIsOpen(function (open) { return !open; });
+    }, []);
+    var renderMenuItem = function (item, index) {
+        return react_1.default.createElement(MenuItemRenderer, { item: item, key: index, onMenuClose: handleToggle });
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(ButtonComponent, __assign({ ref: buttonRef, className: classnames_1.default(styles.buttonRoot, (_b = {},
+                _b[styles.selected] = isOpen,
+                _b), className), onClick: handleToggle, "aria-pressed": isOpen, "aria-controls": isOpen ? menuId : undefined, "aria-haspopup": "true" }, buttonProps), buttonContent),
+        react_1.default.createElement(Menu_1.default, __assign({ id: menuId, variant: "menu", open: isOpen, autoFocus: false, classes: { paper: styles.paper }, anchorEl: buttonRef.current, onClose: handleToggle, anchorOrigin: {
+                vertical: 'bottom',
+                horizontal: 'right'
+            }, transformOrigin: {
+                vertical: 'top',
+                horizontal: 'right'
+            }, elevation: 2, getContentAnchorEl: null, MenuListProps: { autoFocusItem: isOpen } }, popoverProps), menuItems.map(renderMenuItem))));
+}
+DropDownMenuButton.displayName = 'DropDownMenuButton';
+exports.default = DropDownMenuButton;

package/components/DropDownMenuButton/MenuItemRenderer.js

@@ -0,0 +1,44 @@
+"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 ramda_1 = require("ramda");
+var MenuItem_1 = __importDefault(require("@material-ui/core/MenuItem"));
+var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var withTooltip_1 = __importDefault(require("../../HOCs/withTooltip/withTooltip"));
+var styles_1 = require("./styles");
+var MenuItemWithTooltip = withTooltip_1.default(MenuItem_1.default);
+var MenuItemRenderer = react_1.forwardRef(function (_a, ref) {
+    var item = _a.item, _b = _a.onMenuClose, onMenuClose = _b === void 0 ? ramda_1.identity : _b;
+    var styles = styles_1.useStyles();
+    var disabled = item.disabled, text = item.text, tooltip = item.tooltip, onClick = item.onClick, _c = item.id, id = _c === void 0 ? '' : _c;
+    var handleClick = function (e) {
+        onMenuClose(e);
+        onClick(e);
+    };
+    return (react_1.default.createElement(MenuItemWithTooltip, { tooltipTitle: tooltip, showForDisabled: true, classes: { root: styles.menuItem }, onClick: handleClick, disabled: disabled, ref: ref, "data-reltio-id": "reltio-search-menu-item" + id },
+        react_1.default.createElement(Typography_1.default, { classes: { root: styles.menuText } }, text)));
+});
+MenuItemRenderer.displayName = 'MenuItemRenderer';
+exports.default = MenuItemRenderer;

package/components/DropDownMenuButton/styles.js

@@ -0,0 +1,28 @@
+"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(function (theme) { return ({
+    buttonRoot: {
+        '&$selected': {
+            color: theme.palette.action.active,
+            backgroundColor: styles_1.fade(theme.palette.action.active, 0.12),
+            '&:hover': {
+                backgroundColor: styles_1.fade(theme.palette.action.active, 0.15)
+            }
+        }
+    },
+    selected: {},
+    paper: {
+        minWidth: '112px'
+    },
+    menuItem: {
+        minHeight: '32px'
+    },
+    menuText: {
+        color: theme.palette.text.primary,
+        fontSize: '13px',
+        lineHeight: '15px',
+        letterSpacing: 0
+    }
+}); });

package/components/DropDownSelector/DropDownSelector.js

@@ -0,0 +1,97 @@
+"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 });
+var react_1 = __importStar(require("react"));
+var prop_types_1 = __importDefault(require("prop-types"));
+var classnames_1 = __importDefault(require("classnames"));
+var ramda_1 = require("ramda");
+var DropdownIndicator_1 = __importDefault(require("../commonReactSelectComponents/DropdownIndicator"));
+var Menu_1 = __importDefault(require("./components/Menu"));
+var AsyncSelect_1 = __importDefault(require("../ReactSelect/AsyncSelect"));
+var Select_1 = __importDefault(require("../ReactSelect/Select"));
+var core_1 = require("../../core");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var constants_1 = require("../editors/constants");
+var SingleValue_1 = __importDefault(require("./components/SingleValue"));
+var styles_1 = require("./styles");
+var DropDownSelector = function (_a) {
+    var _b;
+    var value = _a.value, label = _a.label, createLabel = _a.createLabel, getOptions = _a.getOptions, options = _a.options, _c = _a.height, height = _c === void 0 ? 46 : _c, _d = _a.onChange, onChange = _d === void 0 ? ramda_1.identity : _d, onCreate = _a.onCreate, _e = _a.onClear, onClear = _e === void 0 ? ramda_1.identity : _e, components = _a.components, textFieldInputRef = _a.textFieldInputRef, TextFieldProps = _a.TextFieldProps, otherProps = __rest(_a, ["value", "label", "createLabel", "getOptions", "options", "height", "onChange", "onCreate", "onClear", "components", "textFieldInputRef", "TextFieldProps"]);
+    var styles = styles_1.useStyles({ height: height });
+    var underlineStyle = constants_1.useInputStyles();
+    var _f = react_1.useState(false), open = _f[0], setOpen = _f[1];
+    var inputRef = react_1.useRef(null);
+    var SelectComponent = getOptions ? AsyncSelect_1.default : Select_1.default;
+    var showIndicatorSeparator = ramda_1.prop('ClearIndicator', components)
+        ? {}
+        : { IndicatorSeparator: core_1.EmptyStub, ClearIndicator: core_1.EmptyStub };
+    var handleCreate = onCreate
+        ? function (value, group) {
+            onCreate(value, group);
+            setOpen(false);
+        }
+        : undefined;
+    var overloadStylesIfGroup = ramda_1.prop('Group', components) ? styles_1.overloadMenuListStyle : {};
+    var overloadStylesIfNoLabel = ramda_1.isEmpty(label) ? styles_1.withoutLabelInputStyle : {};
+    var mergedStyles = __assign(__assign(__assign({}, styles_1.customStyles), overloadStylesIfGroup), overloadStylesIfNoLabel);
+    return (react_1.default.createElement(SelectComponent, __assign({ placeholder: "", defaultOptions: true }, otherProps, { value: ramda_1.defaultTo(null, value), loadOptions: getOptions, options: options, cacheOptions: true, onChange: onChange, onCreate: handleCreate, onClear: onClear, createLabel: createLabel, classes: styles, styles: mergedStyles, components: __assign(__assign({ DropdownIndicator: DropdownIndicator_1.default, LoadingIndicator: core_1.EmptyStub, SingleValue: SingleValue_1.default,
+            Menu: Menu_1.default }, showIndicatorSeparator), components), menuPlacement: "auto", TextFieldProps: __assign(__assign({}, TextFieldProps), { label: label, variant: 'filled', margin: 'dense', classes: __assign(__assign({}, ramda_1.prop('classes', TextFieldProps)), { root: classnames_1.default(styles.formControl, ramda_1.path(['classes', 'root'], TextFieldProps)) }), inputProps: __assign({}, ramda_1.prop('inputProps', TextFieldProps)), InputProps: __assign(__assign({}, ramda_1.prop('InputProps', TextFieldProps)), { classes: __assign(__assign({}, ramda_1.path(['InputProps', 'classes'], TextFieldProps)), { root: classnames_1.default(styles.filledInputRoot, ramda_1.path(['InputProps', 'classes', 'root'], TextFieldProps)), underline: classnames_1.default((_b = {}, _b[underlineStyle.filledInputUnderline] = mdm_sdk_1.isEmptyValue(value), _b), ramda_1.path(['InputProps', 'classes', 'underline'], TextFieldProps)), focused: classnames_1.default('focused', ramda_1.path(['InputProps', 'classes', 'focused'], TextFieldProps)) }) }), InputLabelProps: __assign(__assign({}, ramda_1.prop('InputLabelProps', TextFieldProps)), { classes: __assign(__assign({}, ramda_1.path(['InputLabelProps', 'classes'], TextFieldProps)), { root: classnames_1.default(styles.inputLabel, ramda_1.path(['InputLabelProps', 'classes', 'root'], TextFieldProps)), shrink: classnames_1.default('shrink', ramda_1.path(['InputLabelProps', 'classes', 'shrink'], TextFieldProps)) }), shrink: !mdm_sdk_1.isEmptyValue(value) ? true : undefined }), ref: textFieldInputRef || inputRef }), inputRef: textFieldInputRef || inputRef, menuIsOpen: open, onMenuOpen: function () { return setOpen(true); }, onMenuClose: function () { return setOpen(false); } })));
+};
+DropDownSelector.propTypes = {
+    value: prop_types_1.default.object,
+    label: prop_types_1.default.string.isRequired,
+    getOptions: prop_types_1.default.func,
+    options: prop_types_1.default.array,
+    onChange: prop_types_1.default.func,
+    onCreate: prop_types_1.default.func,
+    onClear: prop_types_1.default.func,
+    createLabel: prop_types_1.default.string,
+    components: prop_types_1.default.object,
+    textFieldInputRef: prop_types_1.default.object,
+    TextFieldProps: prop_types_1.default.object,
+    height: prop_types_1.default.number
+};
+exports.default = DropDownSelector;