@reltio/components 1.4.699 → 1.4.703

package/components/SearchInput/WhiteSearchInput.js

@@ -0,0 +1,36 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var SearchInput_1 = __importDefault(require("./SearchInput"));
+var styles_1 = require("./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)));
+};
+exports.default = WhiteSearchInput;

package/components/SearchInput/styles.js

@@ -0,0 +1,32 @@
+"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 ({
+    container: function (_a) {
+        var _b = _a.height, height = _b === void 0 ? 36 : _b;
+        return {
+            height: height,
+            borderRadius: '2px',
+            alignItems: 'center',
+            backgroundColor: 'rgba(0,0,0,0.03)',
+            minWidth: '100px'
+        };
+    },
+    icon: {
+        opacity: 0.67,
+        marginLeft: '10px',
+        marginRight: '6px'
+    },
+    input: {
+        fontSize: '13px',
+        width: '100%'
+    },
+    clearButton: {
+        marginRight: '10px'
+    },
+    white: {
+        backgroundColor: 'rgb(255, 255, 255)',
+        boxShadow: '0 1px 3px 0 rgba(0,0,0,0.24)'
+    }
+}); });

package/components/SelectionPopup/SelectionPopup.js

@@ -0,0 +1,70 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var 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"));
+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 } },
+            headerPlacement === 'top' && header,
+            react_1.default.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
+};
+SelectionPopup.defaultProps = {
+    anchorOrigin: {
+        vertical: 'top',
+        horizontal: 'right'
+    },
+    transformOrigin: {
+        vertical: 'top',
+        horizontal: 'right'
+    }
+};
+exports.default = SelectionPopup;

package/components/SelectionPopup/SelectionPopupPopper/SelectionPopupPopper.js

@@ -0,0 +1,60 @@
+"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 __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 styles_js_1 = __importDefault(require("../styles.js"));
+var Popper_1 = __importDefault(require("../../Popper/Popper"));
+var Grow_1 = __importDefault(require("@material-ui/core/Grow"));
+var Paper_1 = __importDefault(require("@material-ui/core/Paper"));
+var SelectionPopupPopper = function (_a) {
+    var open = _a.open, anchorEl = _a.anchorEl, className = _a.className, onClose = _a.onClose, containerWidth = _a.containerWidth, containerHeight = _a.containerHeight, paperProps = _a.paperProps, listContent = _a.listContent, externalInputField = _a.externalInputField, _b = _a.classes, classes = _b === void 0 ? {} : _b;
+    var commonStyles = styles_js_1.default({
+        containerWidth: containerWidth,
+        containerHeight: containerHeight
+    });
+    return (react_1.default.createElement("div", { className: classes.root },
+        externalInputField,
+        react_1.default.createElement(Popper_1.default, { open: open, onClose: onClose, anchorEl: anchorEl, placement: "bottom-start", transition: true }, function (_a) {
+            var TransitionProps = _a.TransitionProps;
+            return (react_1.default.createElement(Grow_1.default, __assign({}, TransitionProps),
+                react_1.default.createElement(Paper_1.default, __assign({ elevation: 2 }, paperProps),
+                    react_1.default.createElement("div", { className: classnames_1.default(commonStyles.container, className), style: { width: containerWidth } },
+                        react_1.default.createElement("div", { className: commonStyles.list }, listContent)))));
+        })));
+};
+SelectionPopupPopper.propTypes = {
+    open: prop_types_1.default.bool,
+    anchorEl: prop_types_1.default.object,
+    className: prop_types_1.default.string,
+    onClose: prop_types_1.default.func,
+    containerWidth: prop_types_1.default.number,
+    containerHeight: prop_types_1.default.number,
+    paperProps: prop_types_1.default.object,
+    listContent: prop_types_1.default.element,
+    externalInputField: prop_types_1.default.element,
+    classes: prop_types_1.default.shape({
+        root: prop_types_1.default.string
+    })
+};
+SelectionPopupPopper.defaultProps = {
+    popoverAnchorOrigin: {
+        vertical: 'top',
+        horizontal: 'right'
+    }
+};
+exports.default = SelectionPopupPopper;

package/components/SelectionPopup/helpers.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useKeyboardNavigation = void 0;
+var react_1 = require("react");
+var VirtualGroupedList_1 = require("../VirtualGroupedList/VirtualGroupedList");
+var useKeyboardNavigation = function (_a) {
+    var items = _a.items, open = _a.open, onSelectFocusedItem = _a.onSelectFocusedItem, selectedItems = _a.selectedItems, onClose = _a.onClose;
+    var _b = react_1.useState(null), focusIndex = _b[0], setFocusIndex = _b[1];
+    var restoreFocusIndex = react_1.useRef(false);
+    var increaseFocusIndex = react_1.useCallback(function (currentIndex) {
+        var newIndex = currentIndex === null ? increaseFocusIndex(-1) : currentIndex;
+        while (currentIndex !== null &&
+            newIndex < items.length &&
+            (newIndex <= currentIndex || (newIndex >= 0 && VirtualGroupedList_1.isTitleItem(items[newIndex])))) {
+            newIndex += 1;
+        }
+        return newIndex !== items.length ? newIndex : increaseFocusIndex(-1);
+    }, [items]);
+    var decreaseFocusIndex = react_1.useCallback(function (currentIndex) {
+        var newIndex = currentIndex === null ? items.length - 1 : currentIndex;
+        while (currentIndex !== null &&
+            newIndex >= 0 &&
+            (newIndex >= currentIndex || VirtualGroupedList_1.isTitleItem(items[newIndex]))) {
+            newIndex -= 1;
+        }
+        return newIndex < 0 ? items.length - 1 : newIndex;
+    }, [items]);
+    var handleSelectFocusedItem = react_1.useCallback(function () {
+        var item = items[focusIndex].item;
+        focusIndex !== null && !item.item.notSelectable && onSelectFocusedItem({ item: item.item, groupData: item });
+    }, [onSelectFocusedItem, items, focusIndex]);
+    var handleKeyDown = react_1.useCallback(function (event) {
+        if (items.length === 0) {
+            return;
+        }
+        switch (event.key) {
+            case 'Down': // IE/Edge specific value
+            case 'ArrowDown':
+                setFocusIndex(increaseFocusIndex);
+                event.preventDefault();
+                return false;
+            case 'Up': // IE/Edge specific value
+            case 'ArrowUp':
+                setFocusIndex(decreaseFocusIndex);
+                event.preventDefault();
+                return false;
+            case 'Enter':
+                restoreFocusIndex.current = true;
+                handleSelectFocusedItem();
+                break;
+            case 'Tab':
+                onClose && onClose(event);
+                break;
+            default:
+                return;
+        }
+    }, [items, increaseFocusIndex, decreaseFocusIndex, handleSelectFocusedItem, onClose]);
+    react_1.useEffect(function () {
+        if (restoreFocusIndex.current) {
+            restoreFocusIndex.current = false;
+            var moveIndex = items.findIndex(function (listItem) { return listItem.item.moveTo; });
+            moveIndex > -1 && setFocusIndex(moveIndex);
+        }
+        else {
+            setFocusIndex(null);
+        }
+    }, [items, open, selectedItems]);
+    return { focusIndex: focusIndex, handleKeyDown: handleKeyDown };
+};
+exports.useKeyboardNavigation = useKeyboardNavigation;

package/components/SelectionPopup/styles.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var styles_1 = require("@material-ui/core/styles");
+var margin = '16px';
+var useStyles = styles_1.makeStyles(function () { return ({
+    container: function (_a) {
+        var _b = _a.containerHeight, containerHeight = _b === void 0 ? 553 : _b, containerWidth = _a.containerWidth;
+        return {
+            display: 'flex',
+            flexDirection: 'column',
+            height: containerHeight,
+            width: containerWidth,
+            flexGrow: 1
+        };
+    },
+    header: {
+        marginLeft: margin,
+        marginTop: '16px',
+        marginBottom: '12px',
+        fontSize: '16px',
+        fontWeight: 500,
+        letterSpacing: '0.15px',
+        lineHeight: '24px'
+    },
+    searchInputContainer: {
+        margin: "0 " + margin + " 12px " + margin,
+        flexShrink: '0'
+    },
+    list: {
+        flexGrow: 1,
+        height: 0,
+        overflow: 'hidden',
+        width: '100%',
+        position: 'relative',
+        '& ul': {
+            paddingBottom: 0,
+            paddingTop: 0
+        }
+    }
+}); });
+exports.default = useStyles;

package/components/SelectorWithOnlyOptionAutoSelect/SelectorWithOnlyOptionAutoSelect.js

@@ -0,0 +1,74 @@
+"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 __spreadArray = (this && this.__spreadArray) || function (to, from) {
+    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+        to[j] = from[i];
+    return to;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var prop_types_1 = __importDefault(require("prop-types"));
+var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var styles_1 = require("./styles");
+var DropDownEditor_1 = __importDefault(require("../editors/DropDownEditor/DropDownEditor"));
+var SelectorWithOnlyOptionAutoSelect = function (_a) {
+    var value = _a.value, onChange = _a.onChange, options = _a.options, _b = _a.classes, classes = _b === void 0 ? {} : _b, emptyLabel = _a.emptyLabel;
+    var styles = styles_1.useStyles();
+    var firstOption = options[0], moreOptions = options.slice(1);
+    var hasOnlyOneOptionToSelect = moreOptions.length === 0;
+    react_1.useEffect(function () {
+        if (hasOnlyOneOptionToSelect && value !== firstOption.value) {
+            onChange(firstOption.value);
+        }
+    }, [firstOption.value]); // eslint-disable-line
+    var displayEmpty = !!emptyLabel;
+    return (react_1.default.createElement("div", { className: classes.root }, hasOnlyOneOptionToSelect ? (react_1.default.createElement(Typography_1.default, { className: classes.onlyValue || styles.onlyValue, variant: 'h6' }, firstOption.label)) : (react_1.default.createElement(DropDownEditor_1.default, { displayEmpty: displayEmpty, disableUnderline: true, classes: {
+            select: classes.select || styles.select
+        }, TextFieldProps: {
+            classes: {
+                root: classes.textField || styles.textField
+            }
+        }, MenuProps: {
+            classes: {
+                list: classes.selectMenu || styles.selectMenu
+            }
+        }, value: value || '', entries: displayEmpty ? __spreadArray([{ value: '', label: emptyLabel }], options) : options, onChange: function (value) { return onChange(value || null); } }))));
+};
+SelectorWithOnlyOptionAutoSelect.propTypes = {
+    value: prop_types_1.default.string,
+    onChange: prop_types_1.default.func,
+    options: prop_types_1.default.arrayOf(prop_types_1.default.shape({
+        value: prop_types_1.default.string,
+        label: prop_types_1.default.string
+    })),
+    classes: prop_types_1.default.shape({
+        root: prop_types_1.default.string,
+        onlyValue: prop_types_1.default.string,
+        select: prop_types_1.default.string,
+        selectMenu: prop_types_1.default.string,
+        textField: prop_types_1.default.string
+    }),
+    emptyLabel: prop_types_1.default.string
+};
+exports.default = SelectorWithOnlyOptionAutoSelect;

package/components/SelectorWithOnlyOptionAutoSelect/styles.js

@@ -0,0 +1,31 @@
+"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({
+    onlyValue: {
+        color: 'rgba(0,0,0,.6)',
+        fontSize: '13px',
+        fontWeight: 'normal',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis',
+        overflow: 'hidden'
+    },
+    select: {
+        fontSize: '13px',
+        color: 'rgba(0,0,0,.6)',
+        paddingLeft: '15px',
+        '&&': {
+            paddingRight: '35px'
+        }
+    },
+    selectMenu: {
+        '& li': {
+            fontSize: '13px',
+            height: '32px'
+        }
+    },
+    textField: {
+        maxWidth: '100%'
+    }
+});

package/components/SideIconPanel/SideButtonsPanel.js

@@ -0,0 +1,42 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SideButtonsPanel = void 0;
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var SmallIconButton_1 = require("../SmallIconButton");
+var styles_1 = require("./styles");
+var SideButtonsPanel = function (_a) {
+    var buttonsProps = _a.buttonsProps, activeIndex = _a.activeIndex, className = _a.className, onButtonClick = _a.onButtonClick;
+    var styles = styles_1.useStyles();
+    return (react_1.default.createElement("div", { className: classnames_1.default(styles.container, className) }, buttonsProps.map(function (_a, index) {
+        var _b;
+        var id = _a.id, buttonProps = __rest(_a, ["id"]);
+        return (react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, __assign({}, buttonProps, { size: "S", key: id, className: classnames_1.default((_b = {}, _b[styles.active] = activeIndex === index, _b), styles.buttonWrapper), onClick: function () { return onButtonClick(index); }, "data-reltio-id": "reltio-profile-right-side-button-" + id })));
+    })));
+};
+exports.SideButtonsPanel = SideButtonsPanel;

package/components/SideIconPanel/styles.js

@@ -0,0 +1,41 @@
+"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',
+        flexShrink: 0,
+        width: '64px',
+        paddingTop: '8px',
+        backgroundColor: theme.palette.background.paper,
+        boxShadow: '0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.2)'
+    },
+    active: {
+        backgroundColor: styles_1.fade(theme.palette.primary.main, 0.12),
+        '&:after': {
+            content: '""',
+            position: 'absolute',
+            height: '42px',
+            width: '3px',
+            backgroundColor: theme.palette.primary.main,
+            left: '-8px',
+            borderRadius: '0 6px 6px 0'
+        }
+    },
+    buttonWrapper: {
+        position: 'relative',
+        width: '48px',
+        height: '44px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: '6px',
+        margin: '2px 8px',
+        color: theme.palette.text.secondary,
+        '&$active': {
+            color: theme.palette.primary.main
+        }
+    }
+}); });

package/components/SidePanel/SidePanel.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidePanel = void 0;
+var react_1 = __importDefault(require("react"));
+var styles_1 = require("./styles");
+var SidePanel = function (_a) {
+    var width = _a.width, open = _a.open, children = _a.children;
+    var styles = styles_1.useStyles();
+    return (react_1.default.createElement("div", { className: styles.contentWrapper, style: {
+            width: (open ? width : 0) + "px"
+        } }, open && react_1.default.createElement(react_1.default.Fragment, null, children)));
+};
+exports.SidePanel = SidePanel;

package/components/SidePanel/SidePanelContentHeader/SidePanelContentHeader.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidePanelContentHeader = void 0;
+var react_1 = __importDefault(require("react"));
+var Close_1 = __importDefault(require("@material-ui/icons/Close"));
+var styles_1 = require("./styles");
+var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var Divider_1 = __importDefault(require("@material-ui/core/Divider"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var SmallIconButton_1 = require("../../SmallIconButton");
+var SidePanelContentHeader = function (_a) {
+    var onClose = _a.onClose, mainTitle = _a.mainTitle, secondTitle = _a.secondTitle, rightContent = _a.rightContent;
+    var styles = styles_1.useStyles();
+    return (react_1.default.createElement("div", { className: styles.container },
+        react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { size: "S", icon: Close_1.default, onClick: onClose, className: styles.icon, tooltipTitle: ui_i18n_1.default.text('Close') }),
+        react_1.default.createElement(Typography_1.default, { variant: "h6" }, mainTitle),
+        react_1.default.createElement(Divider_1.default, { orientation: "vertical", flexItem: true, className: styles.divider }),
+        react_1.default.createElement(Typography_1.default, { variant: "body1", color: "textSecondary", className: styles.secondTitle }, secondTitle),
+        rightContent));
+};
+exports.SidePanelContentHeader = SidePanelContentHeader;

package/components/SidePanel/SidePanelContentHeader/styles.js

@@ -0,0 +1,23 @@
+"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({
+    container: {
+        display: 'flex',
+        flexShrink: 0,
+        height: '63px',
+        alignItems: 'center',
+        borderBottom: '1px solid rgba(0,0,0,0.12)'
+    },
+    icon: {
+        margin: '0 20px'
+    },
+    divider: {
+        backgroundColor: 'rgba(0,0,0,0.12)',
+        margin: '19px 17px'
+    },
+    secondTitle: {
+        fontSize: '14px'
+    }
+});

package/components/SidePanel/styles.js

@@ -0,0 +1,16 @@
+"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 ({
+    contentWrapper: {
+        display: 'flex',
+        flexDirection: 'column',
+        backgroundColor: theme.palette.background.paper,
+        boxShadow: '0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.2)',
+        marginLeft: '1px',
+        transition: theme.transitions.create(['width'], {
+            duration: theme.transitions.duration.enteringScreen
+        })
+    }
+}); });

package/components/SimpleDropDownSelector/DropDownPlaceholder.js

@@ -0,0 +1,31 @@
+"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 __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 Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var styles_1 = __importDefault(require("./styles"));
+var DropDownPlaceholder = function (props) {
+    var styles = styles_1.default();
+    var _a = props.innerProps, innerProps = _a === void 0 ? {} : _a, children = props.children;
+    return (react_1.default.createElement(Typography_1.default, __assign({ className: styles.placeholder }, innerProps), children));
+};
+DropDownPlaceholder.propTypes = {
+    children: prop_types_1.default.node,
+    innerProps: prop_types_1.default.object,
+    selectProps: prop_types_1.default.object.isRequired
+};
+exports.default = DropDownPlaceholder;

package/components/SimpleDropDownSelector/DropDownValue.js

@@ -0,0 +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 Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var styles_1 = __importDefault(require("./styles"));
+var DropDownValue = function (_a) {
+    var menuIsOpen = _a.selectProps.menuIsOpen, label = _a.data.label;
+    var styles = styles_1.default();
+    return (!menuIsOpen && (react_1.default.createElement(Typography_1.default, { variant: "body2", classes: { root: styles.value } }, label)));
+};
+DropDownValue.propTypes = {
+    selectProps: prop_types_1.default.shape({
+        menuIsOpen: prop_types_1.default.bool
+    }),
+    data: prop_types_1.default.shape({
+        label: prop_types_1.default.string
+    })
+};
+exports.default = DropDownValue;