@reltio/components 1.4.874 → 1.4.878

package/components/DataTypeValue/DataTypeValue.js

@@ -1,28 +1,23 @@
-"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"));
+import React from 'react';
+import PropTypes from 'prop-types';
+import moment from 'moment';
+import mdm from '@reltio/mdm-module';
+import { formatDataTypeValue, isAttributeValueLink, addProtocolToLink } from '@reltio/mdm-sdk';
+import { useSelector } from 'react-redux';
+import Link from '@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);
+    var attributePresentations = useSelector(mdm.selectors.getAttributePresentations);
+    var localeDateFormat = moment.localeData().longDateFormat('L');
+    var localeTimeFormat = moment.localeData().longDateFormat('LTS');
+    var dateMask = useSelector(mdm.selectors.getDateMask) || localeDateFormat;
+    var dateTimeMask = useSelector(mdm.selectors.getDateTimeMask) || localeDateFormat + ' ' + localeTimeFormat;
+    var formattedValue = formatDataTypeValue({ attributePresentations: attributePresentations, dataTypeDefinition: dataTypeDefinition, dateMask: dateMask, dateTimeMask: dateTimeMask }, value);
+    return rich && isAttributeValueLink(dataTypeDefinition, value) ? (React.createElement(Link, { target: "_blank", href: 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
+    value: PropTypes.any,
+    dataTypeDefinition: PropTypes.object,
+    rich: PropTypes.bool
 };
-exports.default = DataTypeValue;
+export default DataTypeValue;

package/components/DateIntervalSelector/DateIntervalSelector.js

@@ -1,42 +1,37 @@
-"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 ramda_1 = require("ramda");
-var ui_i18n_1 = __importDefault(require("ui-i18n"));
-var capitalize_1 = __importDefault(require("@material-ui/core/utils/capitalize"));
-var TextField_1 = __importDefault(require("@material-ui/core/TextField"));
-var SimpleDropDownSelector_1 = __importDefault(require("../SimpleDropDownSelector/SimpleDropDownSelector"));
-var utils_1 = require("../../core/utils");
-var styles_1 = require("./styles");
+import React from 'react';
+import { pipe } from 'ramda';
+import i18n from 'ui-i18n';
+import capitalize from '@material-ui/core/utils/capitalize';
+import TextField from '@material-ui/core/TextField';
+import SimpleDropDownSelector from '../SimpleDropDownSelector/SimpleDropDownSelector';
+import { getValue } from '../../core/utils';
+import { useStyles } from './styles';
 var periods = [
-    ui_i18n_1.default.text('minutes'),
-    ui_i18n_1.default.text('hours'),
-    ui_i18n_1.default.text('days'),
-    ui_i18n_1.default.text('weeks'),
-    ui_i18n_1.default.text('months'),
-    ui_i18n_1.default.text('years')
+    i18n.text('minutes'),
+    i18n.text('hours'),
+    i18n.text('days'),
+    i18n.text('weeks'),
+    i18n.text('months'),
+    i18n.text('years')
 ];
 var DateIntervalSelector = function (_a) {
     var _b = _a.interval, value = _b[0], unit = _b[1], onChange = _a.onChange, onFocus = _a.onFocus;
-    var styles = styles_1.useStyles();
+    var styles = useStyles();
     var getIntervalFromValue = function (newValue) { return [newValue, unit]; };
     var getIntervalFromUnit = function (_a) {
         var newUnit = _a.value;
         return [value, newUnit];
     };
-    var onNumberChange = ramda_1.pipe(utils_1.getValue, parseInt, getIntervalFromValue, onChange);
-    var onUnitChange = ramda_1.pipe(getIntervalFromUnit, onChange);
-    return (react_1.default.createElement("div", { className: styles.root },
-        react_1.default.createElement(TextField_1.default, { type: "number", value: value || '', onChange: onNumberChange, inputProps: { min: 1, onFocus: onFocus }, InputProps: { classes: { root: styles.input } }, className: styles.inputNumber }),
-        react_1.default.createElement(SimpleDropDownSelector_1.default, { label: '', placeholder: capitalize_1.default(unit), className: styles.inputUnit, value: { value: unit, label: capitalize_1.default(unit) }, options: periods.map(function (value) { return ({
+    var onNumberChange = pipe(getValue, parseInt, getIntervalFromValue, onChange);
+    var onUnitChange = pipe(getIntervalFromUnit, onChange);
+    return (React.createElement("div", { className: styles.root },
+        React.createElement(TextField, { type: "number", value: value || '', onChange: onNumberChange, inputProps: { min: 1, onFocus: onFocus }, InputProps: { classes: { root: styles.input } }, className: styles.inputNumber }),
+        React.createElement(SimpleDropDownSelector, { label: '', placeholder: capitalize(unit), className: styles.inputUnit, value: { value: unit, label: capitalize(unit) }, options: periods.map(function (value) { return ({
                 value: value,
-                label: capitalize_1.default(value)
+                label: capitalize(value)
             }); }), onChange: onUnitChange, TextFieldProps: {
                 inputProps: { onFocus: onFocus },
                 InputProps: { classes: { root: styles.input } }
             } })));
 };
-exports.default = DateIntervalSelector;
+export default DateIntervalSelector;

package/components/DateIntervalSelector/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({
     root: {
         display: 'flex',
         flex: 1

package/components/DateRangePicker/DateRangePicker.js

@@ -1,57 +1,33 @@
-"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");
+import React, { forwardRef, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import i18n from 'ui-i18n';
+import nanoid from 'nanoid';
+import { pathOr } from 'ramda';
+import ArrowBack from '@material-ui/icons/ArrowBack';
+import Button from '@material-ui/core/Button';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+import SmallIconButton from '../SmallIconButton/SmallIconButton';
+import { DataTypes } from '@reltio/mdm-sdk';
+import TimestampEditor from '../editors/TimestampEditor/TimestampEditor';
+import DateEditor from '../editors/DateEditor/DateEditor';
+import { useStyles } from './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 getDate = function (values, index) { return pathOr(null, [index], values); };
+var DateRangePicker = 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 () {
+    var styles = useStyles();
+    var editorFromId = useRef(nanoid());
+    var editorToId = useRef(nanoid());
+    var _b = useState(null), startDate = _b[0], setStartDate = _b[1];
+    var _c = useState(null), endDate = _c[0], setEndDate = _c[1];
+    React.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 ComponentEditor = type === DataTypes.TYPE_TIMESTAMP ? TimestampEditor : DateEditor;
+    var headerTitle = type === DataTypes.TYPE_TIMESTAMP ? i18n.text('Pick date and time') : i18n.text('Pick date');
     var selectStartDateHandler = function (value) {
         setStartDate(value);
     };
@@ -67,21 +43,21 @@ var DateRangePicker = react_1.forwardRef(function (_a, ref) {
         }
     };
     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')))));
+    return (React.createElement("div", { className: styles.container, ref: ref, onKeyDown: onTabStopPropagation },
+        React.createElement(Toolbar, { disableGutters: true, classes: { root: styles.header } },
+            React.createElement(SmallIconButton, { size: "L", icon: ArrowBack, onClick: onCancel }),
+            React.createElement(Typography, { className: styles.title }, headerTitle)),
+        React.createElement("div", { className: styles.dateRangeContainer },
+            React.createElement(ComponentEditor, { id: editorFromId.current, label: 'From', variant: "filled", value: startDate, onChange: selectStartDateHandler, className: styles.dateInput, margin: "dense" }),
+            React.createElement(ComponentEditor, { id: editorToId.current, label: 'To', variant: "filled", value: endDate, onChange: selectEndDateHandler, className: styles.dateInput, margin: "dense" })),
+        React.createElement("div", { className: styles.actionButtons },
+            React.createElement(Button, { color: "primary", onClick: onUpdate, className: styles.button }, i18n.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
+    onCancel: PropTypes.func.isRequired,
+    onApply: PropTypes.func.isRequired,
+    values: PropTypes.arrayOf(PropTypes.instanceOf(Date)),
+    type: PropTypes.string
 };
 DateRangePicker.displayName = 'DateRangePicker';
-exports.default = DateRangePicker;
+export default DateRangePicker;

package/components/DateRangePicker/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(function (theme) { return ({
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles(function (theme) { return ({
     container: {
         display: 'flex',
         flexDirection: 'column',

package/components/Drawer/Drawer.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,18 +20,14 @@ 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 Drawer_1 = __importDefault(require("@material-ui/core/Drawer"));
-var styles_1 = require("@material-ui/core/styles");
+import React, { useState, useEffect } from 'react';
+import MUIDrawer from '@material-ui/core/Drawer';
+import { useTheme } from '@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 () {
+    var _c = useState(open), drawerContentsVisible = _c[0], setDrawerContentVisible = _c[1];
+    var hideDelay = useTheme().transitions.duration.leavingScreen;
+    useEffect(function () {
         if (open !== drawerContentsVisible) {
             if (open) {
                 // mount children before appear
@@ -66,7 +42,7 @@ var Drawer = function (_a) {
             }
         }
     }, [open, hideDelay, drawerContentsVisible]);
-    return (react_1.default.createElement(Drawer_1.default, __assign({ open: open }, otherProps), drawerContentsVisible && children));
+    return (React.createElement(MUIDrawer, __assign({ open: open }, otherProps), drawerContentsVisible && children));
 };
 Drawer.displayName = 'Drawer';
-exports.default = Drawer;
+export default Drawer;

package/components/DropDownMenuButton/DropDownMenuButton.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,59 +9,36 @@ 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 __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");
+import React, { useCallback, useRef, useState } from 'react';
+import classnames from 'classnames';
+import { identity } from 'ramda';
+import Button from '@material-ui/core/Button';
+import Menu from '@material-ui/core/Menu';
+import { useDidUpdateEffect } from '../../hooks';
+import DefaultMenuItemRenderer from './MenuItemRenderer';
+import { useStyles } from './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 className = _a.className, menuId = _a.menuId, _c = _a.buttonComponent, buttonComponent = _c === void 0 ? Button : _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 ? identity : _g, _h = _a.onMenuClose, onMenuClose = _h === void 0 ? identity : _h, _j = _a.MenuItemRenderer, MenuItemRenderer = _j === void 0 ? DefaultMenuItemRenderer : _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 () {
+    var styles = useStyles();
+    var buttonRef = useRef();
+    var _k = useState(false), isOpen = _k[0], setIsOpen = _k[1];
+    useDidUpdateEffect(function () {
         isOpen ? onMenuOpen() : onMenuClose();
     }, [isOpen]);
-    var handleToggle = react_1.useCallback(function (e) {
+    var handleToggle = 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.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 = {},
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ButtonComponent, __assign({ ref: buttonRef, className: classnames(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: {
+        React.createElement(Menu, __assign({ id: menuId, variant: "menu", open: isOpen, autoFocus: false, classes: { paper: styles.paper }, anchorEl: buttonRef.current, onClose: handleToggle, anchorOrigin: {
                 vertical: 'bottom',
                 horizontal: 'right'
             }, transformOrigin: {
@@ -71,4 +47,4 @@ function DropDownMenuButton(_a) {
             }, elevation: 2, getContentAnchorEl: null, MenuListProps: { autoFocusItem: isOpen } }, popoverProps), menuItems.map(renderMenuItem))));
 }
 DropDownMenuButton.displayName = 'DropDownMenuButton';
-exports.default = DropDownMenuButton;
+export default DropDownMenuButton;

package/components/DropDownMenuButton/MenuItemRenderer.js

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

package/components/DropDownMenuButton/styles.js

@@ -1,14 +1,11 @@
-"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 ({
+import { fade, makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles(function (theme) { return ({
     buttonRoot: {
         '&$selected': {
             color: theme.palette.action.active,
-            backgroundColor: styles_1.fade(theme.palette.action.active, 0.12),
+            backgroundColor: fade(theme.palette.action.active, 0.12),
             '&:hover': {
-                backgroundColor: styles_1.fade(theme.palette.action.active, 0.15)
+                backgroundColor: fade(theme.palette.action.active, 0.15)
             }
         }
     },