@reltio/components 1.4.876 → 1.4.880

package/components/ReltioMap/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({
     mapControlContainer: {
         borderRadius: '2px',
         backgroundColor: '#FFFFFF',

package/components/ReltioMap/types.js

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

package/components/RequiredMark/RequiredMark.js

@@ -1,12 +1,7 @@
-"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 styles_1 = require("./styles");
+import React from 'react';
+import { useStyles } from './styles';
 var RequiredMark = function () {
-    var styles = styles_1.useStyles();
-    return react_1.default.createElement("span", { className: styles.mark }, "*");
+    var styles = useStyles();
+    return React.createElement("span", { className: styles.mark }, "*");
 };
-exports.default = RequiredMark;
+export default RequiredMark;

package/components/RequiredMark/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({
     mark: {
         color: 'red'
     }

package/components/ResizablePanes/ResizablePanes.js

@@ -1,46 +1,22 @@
-"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 classnames_1 = __importDefault(require("classnames"));
-var prop_types_1 = __importDefault(require("prop-types"));
-var react_split_pane_1 = __importDefault(require("react-split-pane"));
-var styles_1 = require("@material-ui/core/styles");
-var styles_2 = require("./styles");
-var mdm_sdk_1 = require("@reltio/mdm-sdk");
+import React, { useCallback, useMemo, useState } from 'react';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import SplitPane from 'react-split-pane';
+import { useTheme } from '@material-ui/core/styles';
+import { useStyles } from './styles';
+import { debounce } from '@reltio/mdm-sdk';
 var HANDLE_CHANGE_DEBOUNCE_INTERVAL = 250;
 var isHorizontal = function (orientation) { return orientation === 'horizontal'; };
 var ResizablePanes = function (_a) {
     var className = _a.className, children = _a.children, orientation = _a.orientation, defaultSize = _a.defaultSize, size = _a.size, minSize = _a.minSize, maxSize = _a.maxSize, allowResize = _a.allowResize, onChange = _a.onChange;
-    var styles = styles_2.useStyles();
-    var theme = styles_1.useTheme();
-    var _b = react_1.useState(), containerEl = _b[0], setContainerEl = _b[1];
-    var _c = react_1.useState(true), isPaneAnimationEnabled = _c[0], setIsPaneAnimationEnabled = _c[1];
-    var enableAnimation = react_1.useCallback(function () { return setIsPaneAnimationEnabled(true); }, []);
-    var disableAnimation = react_1.useCallback(function () { return setIsPaneAnimationEnabled(false); }, []);
+    var styles = useStyles();
+    var theme = useTheme();
+    var _b = useState(), containerEl = _b[0], setContainerEl = _b[1];
+    var _c = useState(true), isPaneAnimationEnabled = _c[0], setIsPaneAnimationEnabled = _c[1];
+    var enableAnimation = useCallback(function () { return setIsPaneAnimationEnabled(true); }, []);
+    var disableAnimation = useCallback(function () { return setIsPaneAnimationEnabled(false); }, []);
     var getContainerSize = function () { return (isHorizontal(orientation) ? containerEl === null || containerEl === void 0 ? void 0 : containerEl.clientHeight : containerEl === null || containerEl === void 0 ? void 0 : containerEl.clientWidth); };
-    var handleChange = react_1.useCallback(mdm_sdk_1.debounce(function (size) {
+    var handleChange = useCallback(debounce(function (size) {
         var containerSize = getContainerSize();
         onChange({
             percentageSize: (size / containerSize) * 100 + "%",
@@ -48,7 +24,7 @@ var ResizablePanes = function (_a) {
             isMinSize: size === minSize
         });
     }, HANDLE_CHANGE_DEBOUNCE_INTERVAL), [onChange, orientation, maxSize, containerEl]);
-    var paneAnimationStyle = react_1.useMemo(function () { return ({
+    var paneAnimationStyle = useMemo(function () { return ({
         transition: theme.transitions.create(isHorizontal(orientation) ? 'height' : 'width', {
             easing: theme.transitions.easing.sharp,
             duration: theme.transitions.duration.leavingScreen
@@ -57,19 +33,19 @@ var ResizablePanes = function (_a) {
     if (typeof size === 'number' && size < 0) {
         size = (getContainerSize() || 0) + size;
     }
-    return (react_1.default.createElement("div", { ref: setContainerEl, className: classnames_1.default(styles.container, className) },
-        react_1.default.createElement(react_split_pane_1.default, { split: orientation, size: size, allowResize: allowResize, onChange: handleChange, defaultSize: defaultSize, minSize: minSize, maxSize: maxSize, onDragStarted: disableAnimation, onDragFinished: enableAnimation, pane1Style: isPaneAnimationEnabled ? paneAnimationStyle : undefined }, children)));
+    return (React.createElement("div", { ref: setContainerEl, className: classnames(styles.container, className) },
+        React.createElement(SplitPane, { split: orientation, size: size, allowResize: allowResize, onChange: handleChange, defaultSize: defaultSize, minSize: minSize, maxSize: maxSize, onDragStarted: disableAnimation, onDragFinished: enableAnimation, pane1Style: isPaneAnimationEnabled ? paneAnimationStyle : undefined }, children)));
 };
-var SizePropType = prop_types_1.default.oneOfType([prop_types_1.default.number, prop_types_1.default.string]);
+var SizePropType = PropTypes.oneOfType([PropTypes.number, PropTypes.string]);
 ResizablePanes.propTypes = {
-    className: prop_types_1.default.string,
-    children: prop_types_1.default.arrayOf(prop_types_1.default.node).isRequired,
-    orientation: prop_types_1.default.oneOf(['horizontal', 'vertical']).isRequired,
+    className: PropTypes.string,
+    children: PropTypes.arrayOf(PropTypes.node).isRequired,
+    orientation: PropTypes.oneOf(['horizontal', 'vertical']).isRequired,
     defaultSize: SizePropType,
     size: SizePropType,
     minSize: SizePropType,
     maxSize: SizePropType,
-    allowResize: prop_types_1.default.bool,
-    onChange: prop_types_1.default.func
+    allowResize: PropTypes.bool,
+    onChange: PropTypes.func
 };
-exports.default = ResizablePanes;
+export default ResizablePanes;

package/components/ResizablePanes/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");
-var useStyles = styles_1.makeStyles(function () { return ({
+import { makeStyles } from '@material-ui/core/styles';
+var useStyles = makeStyles(function () { return ({
     container: {
         position: 'relative',
         '& .Resizer': {
@@ -45,4 +42,4 @@ var useStyles = styles_1.makeStyles(function () { return ({
         }
     }
 }); });
-exports.useStyles = useStyles;
+export { useStyles };

package/components/Score/DQLabel.js

@@ -1,14 +1,9 @@
-"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 styles_1 = require("./styles");
+import React from 'react';
+import { useDQIQStyles } from './styles';
 var DQLabel = function () {
-    var styles = styles_1.useDQIQStyles();
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("span", null, "DQ"),
-        react_1.default.createElement("span", { className: styles.dqiq }, "IQ")));
+    var styles = useDQIQStyles();
+    return (React.createElement(React.Fragment, null,
+        React.createElement("span", null, "DQ"),
+        React.createElement("span", { className: styles.dqiq }, "IQ")));
 };
-exports.default = DQLabel;
+export default DQLabel;

package/components/Score/Score.js

@@ -1,26 +1,21 @@
-"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 classnames_1 = __importDefault(require("classnames"));
-var mdm_sdk_1 = require("@reltio/mdm-sdk");
-var ScoreLabel_1 = __importDefault(require("./ScoreLabel"));
-var styles_1 = require("./styles");
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { getScoreColor } from '@reltio/mdm-sdk';
+import ScoreLabel from './ScoreLabel';
+import { useStyles } from './styles';
 var Score = function (_a) {
     var label = _a.label, value = _a.value, uri = _a.uri, rangeColorsConfig = _a.rangeColorsConfig, className = _a.className;
-    var styles = styles_1.useStyles();
-    return (react_1.default.createElement("div", { className: classnames_1.default(styles.container, className), key: uri },
-        react_1.default.createElement(ScoreLabel_1.default, { attrTypeUri: uri, label: label }),
-        react_1.default.createElement("span", { className: styles.value, style: { color: mdm_sdk_1.getScoreColor(uri, value, rangeColorsConfig) } }, value)));
+    var styles = useStyles();
+    return (React.createElement("div", { className: classnames(styles.container, className), key: uri },
+        React.createElement(ScoreLabel, { attrTypeUri: uri, label: label }),
+        React.createElement("span", { className: styles.value, style: { color: getScoreColor(uri, value, rangeColorsConfig) } }, value)));
 };
 Score.propTypes = {
-    label: prop_types_1.default.string,
-    value: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.number]),
-    uri: prop_types_1.default.string,
-    rangeColorsConfig: prop_types_1.default.object,
-    className: prop_types_1.default.string
+    label: PropTypes.string,
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    uri: PropTypes.string,
+    rangeColorsConfig: PropTypes.object,
+    className: PropTypes.string
 };
-exports.default = Score;
+export default Score;

package/components/Score/ScoreLabel.js

@@ -1,29 +1,24 @@
-"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 ui_i18n_1 = __importDefault(require("ui-i18n"));
-var ramda_1 = require("ramda");
-var DQLabel_1 = __importDefault(require("./DQLabel"));
+import React from 'react';
+import PropTypes from 'prop-types';
+import i18n from 'ui-i18n';
+import { cond, includes, always, T } from 'ramda';
+import DQLabel from './DQLabel';
 var DQ_LABEL_URIS = ['analyticsAttributes/DQ/analyticsAttributes/score', 'analyticsAttributes/DQ'];
 var IQ_LABEL_URIS = ['analyticsAttributes/IQ/analyticsAttributes/score', 'analyticsAttributes/IQ'];
 var ScoreLabel = function (_a) {
     var _b = _a.label, label = _b === void 0 ? '' : _b, _c = _a.attrTypeUri, attrTypeUri = _c === void 0 ? '' : _c;
     var index = attrTypeUri.indexOf('analyticsAttributes/');
     var relativeUri = attrTypeUri.substr(index);
-    var isDQLabel = ramda_1.includes(relativeUri, DQ_LABEL_URIS);
-    var isIQLabel = ramda_1.includes(relativeUri, IQ_LABEL_URIS);
-    return ramda_1.cond([
-        [ramda_1.always(isDQLabel), ramda_1.always(react_1.default.createElement(DQLabel_1.default, null))],
-        [ramda_1.always(isIQLabel), ramda_1.always(ui_i18n_1.default.text('Rank'))],
-        [ramda_1.T, ramda_1.always(label)]
+    var isDQLabel = includes(relativeUri, DQ_LABEL_URIS);
+    var isIQLabel = includes(relativeUri, IQ_LABEL_URIS);
+    return cond([
+        [always(isDQLabel), always(React.createElement(DQLabel, null))],
+        [always(isIQLabel), always(i18n.text('Rank'))],
+        [T, always(label)]
     ])();
 };
 ScoreLabel.propTypes = {
-    label: prop_types_1.default.string,
-    attrTypeUri: prop_types_1.default.string
+    label: PropTypes.string,
+    attrTypeUri: PropTypes.string
 };
-exports.default = ScoreLabel;
+export default ScoreLabel;

package/components/Score/styles.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDQIQStyles = 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({
     container: {
         display: 'flex',
         flexShrink: 0,
@@ -15,7 +12,7 @@ exports.useStyles = styles_1.makeStyles({
         textAlign: 'center'
     }
 });
-exports.useDQIQStyles = styles_1.makeStyles({
+export var useDQIQStyles = makeStyles({
     dqiq: {
         width: '14px',
         height: '14px',

package/components/ScrollableTabs/ScrollableTabs.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,31 +20,27 @@ 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 = __importDefault(require("react"));
-var Tabs_1 = __importDefault(require("@material-ui/core/Tabs"));
-var Tab_1 = __importDefault(require("@material-ui/core/Tab"));
-var ExpandedValueTooltip_1 = __importDefault(require("../ExpandedValueTooltip/ExpandedValueTooltip"));
-var styles_1 = require("./styles");
+import React from 'react';
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+import ExpandedValueTooltip from '../ExpandedValueTooltip/ExpandedValueTooltip';
+import { useStyles } from './styles';
 var ScrollableTabs = function (_a) {
     var value = _a.value, _b = _a.tabs, tabs = _b === void 0 ? [] : _b, onChange = _a.onChange, tabClasses = _a.tabClasses, otherProps = __rest(_a, ["value", "tabs", "onChange", "tabClasses"]);
-    var styles = styles_1.useStyles();
-    var renderLabel = function (label, additionalLabel) { return (react_1.default.createElement("span", { className: styles.labelWrapper },
-        react_1.default.createElement(ExpandedValueTooltip_1.default, { value: label },
-            react_1.default.createElement("span", { className: styles.label }, label)),
+    var styles = useStyles();
+    var renderLabel = function (label, additionalLabel) { return (React.createElement("span", { className: styles.labelWrapper },
+        React.createElement(ExpandedValueTooltip, { value: label },
+            React.createElement("span", { className: styles.label }, label)),
         additionalLabel)); };
     var handleChange = function (event, value) { return onChange(value); };
-    return (react_1.default.createElement(Tabs_1.default, __assign({ value: value, onChange: handleChange, classes: {
+    return (React.createElement(Tabs, __assign({ value: value, onChange: handleChange, classes: {
             root: styles.tabsRoot,
             scrollButtons: styles.tabsScrollButton
         }, indicatorColor: "primary", textColor: "primary", variant: "scrollable", scrollButtons: "on" }, otherProps), tabs.map(function (_a) {
         var label = _a.label, value = _a.value, additionalLabel = _a.additionalLabel, dataReltioId = _a.dataReltioId;
-        return (react_1.default.createElement(Tab_1.default, { classes: tabClasses || {
+        return (React.createElement(Tab, { classes: tabClasses || {
                 root: styles.tabRoot
             }, key: value, value: value, label: renderLabel(label, additionalLabel), "data-reltio-id": dataReltioId }));
     })));
 };
-exports.default = ScrollableTabs;
+export default ScrollableTabs;

package/components/ScrollableTabs/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({
     tabsRoot: {
         width: '100%'
     },

package/components/SearchInput/SearchInput.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,29 +20,25 @@ 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 classnames_1 = __importDefault(require("classnames"));
-var ramda_1 = require("ramda");
-var react_1 = __importStar(require("react"));
-var ui_i18n_1 = __importDefault(require("ui-i18n"));
-var Input_1 = __importDefault(require("@material-ui/core/Input"));
-var InputAdornment_1 = __importDefault(require("@material-ui/core/InputAdornment"));
-var Close_1 = __importDefault(require("@material-ui/icons/Close"));
-var Search_1 = __importDefault(require("@material-ui/icons/Search"));
-var core_1 = require("../../core");
-var SmallIconButton_1 = __importDefault(require("../SmallIconButton/SmallIconButton"));
-var styles_1 = require("./styles");
+import classNames from 'classnames';
+import { isNil, pipe, tap } from 'ramda';
+import React, { memo, useState } from 'react';
+import i18n from 'ui-i18n';
+import Input from '@material-ui/core/Input';
+import InputAdornment from '@material-ui/core/InputAdornment';
+import CloseIcon from '@material-ui/icons/Close';
+import SearchIcon from '@material-ui/icons/Search';
+import { getValue, noop } from '../../core';
+import SmallIconButton from '../SmallIconButton/SmallIconButton';
+import { useStyles } from './styles';
 var SearchInput = function (_a) {
-    var value = _a.value, autofocus = _a.autofocus, _b = _a.onSearch, onSearch = _b === void 0 ? core_1.noop : _b, rootRef = _a.rootRef, _c = _a.classes, classes = _c === void 0 ? {} : _c, height = _a.height, otherProps = __rest(_a, ["value", "autofocus", "onSearch", "rootRef", "classes", "height"]);
-    var styles = styles_1.useStyles({ height: height });
-    var _d = react_1.useState(''), localValue = _d[0], setLocalValue = _d[1];
-    var updateValue = ramda_1.pipe(ramda_1.tap(onSearch), setLocalValue);
+    var value = _a.value, autofocus = _a.autofocus, _b = _a.onSearch, onSearch = _b === void 0 ? noop : _b, rootRef = _a.rootRef, _c = _a.classes, classes = _c === void 0 ? {} : _c, height = _a.height, otherProps = __rest(_a, ["value", "autofocus", "onSearch", "rootRef", "classes", "height"]);
+    var styles = useStyles({ height: height });
+    var _d = useState(''), localValue = _d[0], setLocalValue = _d[1];
+    var updateValue = pipe(tap(onSearch), setLocalValue);
     var clearValue = function () { return updateValue(''); };
-    var inputValue = ramda_1.isNil(value) ? localValue : value;
-    return (react_1.default.createElement(Input_1.default, __assign({ startAdornment: react_1.default.createElement(InputAdornment_1.default, { position: "start" },
-            react_1.default.createElement(Search_1.default, { className: styles.icon })), endAdornment: react_1.default.createElement(InputAdornment_1.default, { position: "end" }, inputValue.length > 0 && (react_1.default.createElement(SmallIconButton_1.default, { icon: Close_1.default, className: styles.clearButton, onClick: clearValue }))), autoFocus: autofocus, classes: __assign(__assign({}, classes), { input: classnames_1.default(styles.input, classes.input), root: classnames_1.default(styles.container, classes.root) }), placeholder: ui_i18n_1.default.text('Search'), value: inputValue, onChange: ramda_1.pipe(core_1.getValue, updateValue), disableUnderline: true, ref: rootRef }, otherProps)));
+    var inputValue = isNil(value) ? localValue : value;
+    return (React.createElement(Input, __assign({ startAdornment: React.createElement(InputAdornment, { position: "start" },
+            React.createElement(SearchIcon, { className: styles.icon })), endAdornment: React.createElement(InputAdornment, { position: "end" }, inputValue.length > 0 && (React.createElement(SmallIconButton, { icon: CloseIcon, className: styles.clearButton, onClick: clearValue }))), autoFocus: autofocus, classes: __assign(__assign({}, classes), { input: classNames(styles.input, classes.input), root: classNames(styles.container, classes.root) }), placeholder: i18n.text('Search'), value: inputValue, onChange: pipe(getValue, updateValue), disableUnderline: true, ref: rootRef }, otherProps)));
 };
-exports.default = react_1.memo(SearchInput);
+export default memo(SearchInput);

package/components/SearchInput/WhiteSearchInput.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,16 +20,12 @@ 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 = __importDefault(require("react"));
-var SearchInput_1 = __importDefault(require("./SearchInput"));
-var styles_1 = require("./styles");
+import React from 'react';
+import SearchInput from './SearchInput';
+import { useStyles } from './styles';
 var WhiteSearchInput = function (_a) {
     var classes = _a.classes, otherProps = __rest(_a, ["classes"]);
-    var styles = styles_1.useStyles({});
-    return (react_1.default.createElement(SearchInput_1.default, __assign({ classes: __assign(__assign({}, classes), { focused: styles.white }) }, otherProps)));
+    var styles = useStyles({});
+    return (React.createElement(SearchInput, __assign({ classes: __assign(__assign({}, classes), { focused: styles.white }) }, otherProps)));
 };
-exports.default = WhiteSearchInput;
+export default WhiteSearchInput;

package/components/SearchInput/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 () { return ({
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles(function () { return ({
     container: function (_a) {
         var _b = _a.height, height = _b === void 0 ? 36 : _b;
         return {

package/components/SelectionPopup/SelectionPopup.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,41 +20,37 @@ 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 = __importDefault(require("react"));
-var prop_types_1 = __importDefault(require("prop-types"));
-var classnames_1 = __importDefault(require("classnames"));
-var ui_i18n_1 = __importDefault(require("ui-i18n"));
-var Popover_1 = __importDefault(require("@material-ui/core/Popover"));
-var styles_js_1 = __importDefault(require("./styles.js"));
-var SearchInput_1 = __importDefault(require("../SearchInput/SearchInput"));
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import i18n from 'ui-i18n';
+import Popover from '@material-ui/core/Popover';
+import useStyles from './styles.js';
+import SearchInput from '../SearchInput/SearchInput';
 var SelectionPopup = function (_a) {
     var title = _a.title, className = _a.className, onSearch = _a.onSearch, hideTitle = _a.hideTitle, hideSearchInput = _a.hideSearchInput, _b = _a.headerPlacement, headerPlacement = _b === void 0 ? 'top' : _b, containerWidth = _a.containerWidth, containerHeight = _a.containerHeight, searchInputOnKeyDown = _a.searchInputOnKeyDown, children = _a.children, searchInputRef = _a.searchInputRef, otherProps = __rest(_a, ["title", "className", "onSearch", "hideTitle", "hideSearchInput", "headerPlacement", "containerWidth", "containerHeight", "searchInputOnKeyDown", "children", "searchInputRef"]);
-    var classes = styles_js_1.default({ containerWidth: containerWidth, containerHeight: containerHeight });
-    var header = (react_1.default.createElement(react_1.default.Fragment, null,
-        !hideTitle && react_1.default.createElement("div", { className: classes.header }, title),
-        !hideSearchInput && (react_1.default.createElement(SearchInput_1.default, { onSearch: onSearch, autofocus: true, onKeyDown: searchInputOnKeyDown, inputRef: searchInputRef, classes: { root: classes.searchInputContainer }, placeholder: ui_i18n_1.default.text('Search & add attributes'), height: 40 }))));
-    return (react_1.default.createElement(Popover_1.default, __assign({}, otherProps),
-        react_1.default.createElement("div", { className: classnames_1.default(classes.container, className), style: { width: containerWidth } },
+    var classes = useStyles({ containerWidth: containerWidth, containerHeight: containerHeight });
+    var header = (React.createElement(React.Fragment, null,
+        !hideTitle && React.createElement("div", { className: classes.header }, title),
+        !hideSearchInput && (React.createElement(SearchInput, { onSearch: onSearch, autofocus: true, onKeyDown: searchInputOnKeyDown, inputRef: searchInputRef, classes: { root: classes.searchInputContainer }, placeholder: i18n.text('Search & add attributes'), height: 40 }))));
+    return (React.createElement(Popover, __assign({}, otherProps),
+        React.createElement("div", { className: classnames(classes.container, className), style: { width: containerWidth } },
             headerPlacement === 'top' && header,
-            react_1.default.createElement("div", { className: classes.list }, children),
+            React.createElement("div", { className: classes.list }, children),
             headerPlacement === 'bottom' && header)));
 };
 SelectionPopup.propTypes = {
-    className: prop_types_1.default.string,
-    title: prop_types_1.default.string,
-    headerPlacement: prop_types_1.default.oneOf(['top', 'bottom']),
-    onSearch: prop_types_1.default.func,
-    searchInputOnKeyDown: prop_types_1.default.func,
-    containerWidth: prop_types_1.default.number,
-    containerHeight: prop_types_1.default.number,
-    hideTitle: prop_types_1.default.bool,
-    hideSearchInput: prop_types_1.default.bool,
-    searchInputRef: prop_types_1.default.shape({ current: prop_types_1.default.instanceOf(Element) }),
-    children: prop_types_1.default.node
+    className: PropTypes.string,
+    title: PropTypes.string,
+    headerPlacement: PropTypes.oneOf(['top', 'bottom']),
+    onSearch: PropTypes.func,
+    searchInputOnKeyDown: PropTypes.func,
+    containerWidth: PropTypes.number,
+    containerHeight: PropTypes.number,
+    hideTitle: PropTypes.bool,
+    hideSearchInput: PropTypes.bool,
+    searchInputRef: PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+    children: PropTypes.node
 };
 SelectionPopup.defaultProps = {
     anchorOrigin: {
@@ -67,4 +62,4 @@ SelectionPopup.defaultProps = {
         horizontal: 'right'
     }
 };
-exports.default = SelectionPopup;
+export default SelectionPopup;