@reltio/components 1.4.701 → 1.4.705

package/components/ReltioGridLayout/ReltioGridLayout.js

@@ -0,0 +1,79 @@
+"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 prop_types_1 = __importDefault(require("prop-types"));
+var react_1 = __importStar(require("react"));
+var react_grid_layout_1 = __importDefault(require("react-grid-layout"));
+var react_resize_detector_1 = __importDefault(require("react-resize-detector"));
+var ramda_1 = require("ramda");
+var classnames_1 = __importDefault(require("classnames"));
+var helpers_1 = require("./helpers");
+var styles_1 = require("./styles");
+var ReltioGridLayout = function (_a) {
+    var _b;
+    var views = _a.views, layout = _a.layout, layoutOptions = _a.layoutOptions, onLayoutChanged = _a.onLayoutChanged, draggableHandle = _a.draggableHandle, LayoutItem = _a.LayoutItem, onRemove = _a.onRemove, onDrop = _a.onDrop, droppingItem = _a.droppingItem, isDroppable = _a.isDroppable;
+    var ref = react_1.useRef();
+    var styles = styles_1.useStyles();
+    var _c = react_1.useState(null), fullscreenItemId = _c[0], setFullscreenItemId = _c[1];
+    var _d = react_1.useState(0), width = _d[0], setWidth = _d[1];
+    var cols = layoutOptions.cols, rowHeight = layoutOptions.rowHeight, margin = layoutOptions.margin;
+    var processedLayout = react_1.useMemo(function () { return helpers_1.reltioLayoutToReactGridLayout(layout); }, [layout]);
+    var onReltioLayoutChanged = ramda_1.pipe(helpers_1.reactGridLayoutToReltioLayout, onLayoutChanged);
+    var handleDrop = function (layout, layoutItem, e) {
+        if (onDrop) {
+            onDrop(helpers_1.reactGridLayoutToReltioLayout(layout), helpers_1.reactGridLayoutItemToReltioLayoutItem(layoutItem), e);
+        }
+    };
+    var onToggleFullscreen = react_1.useCallback(function (id) { return setFullscreenItemId(function (prevId) { return (prevId ? null : id); }); }, []);
+    var isFullscreenEnabled = fullscreenItemId !== null;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(react_resize_detector_1.default, { refreshMode: "debounce", refreshRate: 50, handleWidth: true, onResize: function (width) { return setWidth(width); } }),
+        react_1.default.createElement(react_grid_layout_1.default, { innerRef: ref, layout: processedLayout, cols: cols, draggableHandle: draggableHandle, autoSize: true, rowHeight: rowHeight, width: width, margin: margin, onLayoutChange: onReltioLayoutChanged, isResizable: !isFullscreenEnabled, isDraggable: !isFullscreenEnabled, className: classnames_1.default(styles.gridLayout, (_b = {}, _b[styles.gridFullscreen] = isFullscreenEnabled, _b)), onDrop: handleDrop, droppingItem: droppingItem, isDroppable: isDroppable }, processedLayout.map(function (layoutItem) {
+            var isItemFullscreen = fullscreenItemId === layoutItem.i;
+            return (react_1.default.createElement(LayoutItem, { key: layoutItem.i, layoutItemConfig: layoutItem, views: views, onToggleFullscreen: onToggleFullscreen, onRemove: onRemove, className: classnames_1.default({ fullscreen: isItemFullscreen }), isFullscreen: isItemFullscreen }));
+        }))));
+};
+ReltioGridLayout.defaultProps = {
+    layoutOptions: {
+        cols: 4,
+        rowHeight: 30,
+        margin: [15, 15]
+    },
+    onConfigChanged: ramda_1.identity,
+    onLayoutChanged: ramda_1.identity
+};
+ReltioGridLayout.propTypes = {
+    views: prop_types_1.default.array,
+    layout: prop_types_1.default.array,
+    layoutOptions: prop_types_1.default.object,
+    onConfigChanged: prop_types_1.default.func,
+    onLayoutChanged: prop_types_1.default.func,
+    onDrop: prop_types_1.default.func,
+    onRemove: prop_types_1.default.func,
+    LayoutItem: prop_types_1.default.elementType,
+    draggableHandle: prop_types_1.default.string,
+    isDroppable: prop_types_1.default.bool,
+    droppingItem: prop_types_1.default.object
+};
+exports.default = react_1.memo(ReltioGridLayout);

package/components/ReltioGridLayout/helpers.js

@@ -0,0 +1,52 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.reactGridLayoutToReltioLayout = exports.reltioLayoutToReactGridLayout = exports.reactGridLayoutItemToReltioLayoutItem = exports.reltioLayoutItemToReactGridLayoutItem = exports.getReltioViewId = void 0;
+var getReltioViewId = function (id) { return id.split(/\d+_/)[1]; };
+exports.getReltioViewId = getReltioViewId;
+var reltioLayoutItemToReactGridLayoutItem = function (_a) {
+    var x = _a.x, y = _a.y, width = _a.width, height = _a.height, id = _a.id, minWidth = _a.minWidth, minHeight = _a.minHeight, maxWidth = _a.maxWidth, maxHeight = _a.maxHeight, isStatic = _a.isStatic;
+    return ({
+        x: x,
+        y: y,
+        w: width,
+        h: height,
+        minW: minWidth,
+        minH: minHeight,
+        maxW: maxWidth,
+        maxH: maxHeight,
+        i: id,
+        static: isStatic
+    });
+};
+exports.reltioLayoutItemToReactGridLayoutItem = reltioLayoutItemToReactGridLayoutItem;
+var reactGridLayoutItemToReltioLayoutItem = function (_a) {
+    var x = _a.x, y = _a.y, w = _a.w, h = _a.h, maxW = _a.maxW, minW = _a.minW, minH = _a.minH, maxH = _a.maxH, i = _a.i, obj = __rest(_a, ["x", "y", "w", "h", "maxW", "minW", "minH", "maxH", "i"]);
+    return ({
+        x: x,
+        y: y,
+        width: w,
+        height: h,
+        minWidth: minW,
+        minHeight: minH,
+        maxWidth: maxW,
+        maxHeight: maxH,
+        id: i,
+        isStatic: obj.static
+    });
+};
+exports.reactGridLayoutItemToReltioLayoutItem = reactGridLayoutItemToReltioLayoutItem;
+var reltioLayoutToReactGridLayout = function (layout) { return (layout || []).map(exports.reltioLayoutItemToReactGridLayoutItem); };
+exports.reltioLayoutToReactGridLayout = reltioLayoutToReactGridLayout;
+var reactGridLayoutToReltioLayout = function (layout) { return (layout || []).map(exports.reactGridLayoutItemToReltioLayoutItem); };
+exports.reactGridLayoutToReltioLayout = reactGridLayoutToReltioLayout;

package/components/ReltioGridLayout/icons/ResizeIcon.svg.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RESIZE_ICON = void 0;
+exports.RESIZE_ICON = "<svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path stroke=\"#505050\" stroke-opacity=\".54\" d=\"M9.5 0v10M0 9.5h9M7.5 4v4M4 7.5h3\"/>\n</svg>";

package/components/ReltioGridLayout/styles.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var ResizeIcon_svg_1 = require("./icons/ResizeIcon.svg");
+exports.useStyles = styles_1.makeStyles(function (_) { return ({
+    gridLayout: {
+        position: 'relative',
+        width: '100%',
+        '& .react-grid-item': {
+            '&.react-grid-placeholder': {
+                background: 'rgba(0, 0, 0, 0.03)',
+                border: '2px dashed rgba(0, 0, 0, 0.3)',
+                borderRadius: '3px',
+                transitionDuration: '100ms',
+                zIndex: 7,
+                userSelect: 'none',
+                '& .react-resizable-handle': {
+                    display: 'none'
+                }
+            },
+            '&.static .react-resizable-handle': {
+                display: 'none'
+            },
+            '&.cssTransforms': {
+                transitionProperty: 'transform'
+            },
+            '&.resizing': {
+                zIndex: 9,
+                willChange: 'width, height',
+                pointerEvents: 'none'
+            },
+            '&.react-draggable-dragging': {
+                transition: 'none',
+                zIndex: 8,
+                willChange: 'transform',
+                '& .react-resizable-handle': {
+                    backgroundImage: 'none'
+                }
+            },
+            '& .react-resizable-handle': {
+                position: 'absolute',
+                width: '17px',
+                height: '17px',
+                bottom: 0,
+                right: 0,
+                zIndex: 20,
+                backgroundImage: "url(" + mdm_sdk_1.svg2Url(ResizeIcon_svg_1.RESIZE_ICON) + ")",
+                backgroundRepeat: 'no-repeat',
+                backgroundOrigin: 'content-box',
+                boxSizing: 'border-box',
+                cursor: 'se-resize'
+            },
+            '&.fullscreen': {
+                visibility: 'visible',
+                position: 'unset',
+                width: '100% !important',
+                height: '100% !important',
+                transform: 'translate(0) !important'
+            }
+        }
+    },
+    gridFullscreen: {
+        height: '100% !important',
+        overflowY: 'hidden',
+        '& .react-resizable-handle, & .react-grid-item': {
+            visibility: 'hidden'
+        }
+    }
+}); });

package/components/RequiredMark/RequiredMark.js

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

package/components/RequiredMark/styles.js

@@ -0,0 +1,9 @@
+"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({
+    mark: {
+        color: 'red'
+    }
+});

package/components/ResizablePanes/ResizablePanes.js

@@ -0,0 +1,75 @@
+"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");
+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 containerRef = react_1.useRef();
+    var _b = react_1.useState(true), isPaneAnimationEnabled = _b[0], setIsPaneAnimationEnabled = _b[1];
+    var enableAnimation = react_1.useCallback(function () { return setIsPaneAnimationEnabled(true); }, []);
+    var disableAnimation = react_1.useCallback(function () { return setIsPaneAnimationEnabled(false); }, []);
+    var getContainerSize = function () { var _a, _b; return isHorizontal(orientation) ? (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight : (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth; };
+    var handleChange = react_1.useCallback(mdm_sdk_1.debounce(function (size) {
+        var containerSize = getContainerSize();
+        onChange({
+            percentageSize: (size / containerSize) * 100 + "%",
+            isMaxSize: maxSize > 0 ? size === maxSize : size === containerSize + maxSize,
+            isMinSize: size === minSize
+        });
+    }, HANDLE_CHANGE_DEBOUNCE_INTERVAL), [onChange, orientation, maxSize]);
+    var paneAnimationStyle = react_1.useMemo(function () { return ({
+        transition: theme.transitions.create(isHorizontal(orientation) ? 'height' : 'width', {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen
+        })
+    }); }, [orientation, theme]);
+    if (typeof size === 'number' && size < 0) {
+        size = getContainerSize() + size;
+    }
+    return (react_1.default.createElement("div", { ref: containerRef, 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)));
+};
+var SizePropType = prop_types_1.default.oneOfType([prop_types_1.default.number, prop_types_1.default.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,
+    defaultSize: SizePropType,
+    size: SizePropType,
+    minSize: SizePropType,
+    maxSize: SizePropType,
+    allowResize: prop_types_1.default.bool,
+    onChange: prop_types_1.default.func
+};
+exports.default = ResizablePanes;

package/components/ResizablePanes/styles.js

@@ -0,0 +1,48 @@
+"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 ({
+    container: {
+        position: 'relative',
+        '& .Resizer': {
+            zIndex: 1,
+            boxSizing: 'border-box',
+            backgroundClip: 'padding-box',
+            '&.disabled': {
+                cursor: 'initial',
+                height: 0,
+                margin: 0
+            },
+            '&.horizontal': {
+                height: '11px',
+                backgroundImage: 'linear-gradient(rgba(0,0,0,0.33), rgba(0,0,0,0.33))',
+                backgroundRepeat: 'no-repeat',
+                backgroundSize: '100% 1px',
+                backgroundPosition: 'top',
+                width: '100%',
+                marginBottom: '-10px',
+                '&:not(.disabled):hover': {
+                    cursor: 'row-resize',
+                    backgroundImage: 'linear-gradient(rgba(0, 114, 206, 0), rgba(0, 114, 206, 0.35), rgba(0, 114, 206, 1))',
+                    backgroundSize: '100% 3px'
+                }
+            },
+            '&.vertical': {
+                width: '11px',
+                backgroundImage: 'linear-gradient(rgba(0,0,0,0.33), rgba(0,0,0,0.33))',
+                backgroundRepeat: 'no-repeat',
+                backgroundSize: '1px 100%',
+                backgroundPosition: 'left',
+                height: '100%',
+                marginRight: '-10px',
+                '&:not(.disabled):hover': {
+                    cursor: 'col-resize',
+                    backgroundImage: 'linear-gradient(to left, rgba(0, 114, 206, 0.35), rgba(0, 114, 206, 1), rgba(0, 114, 206, 0.35))',
+                    backgroundSize: '3px 100%'
+                }
+            }
+        }
+    }
+}); });
+exports.useStyles = useStyles;

package/components/Score/DQLabel.js

@@ -0,0 +1,14 @@
+"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");
+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")));
+};
+exports.default = DQLabel;

package/components/Score/Score.js

@@ -0,0 +1,26 @@
+"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");
+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)));
+};
+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
+};
+exports.default = Score;

package/components/Score/ScoreLabel.js

@@ -0,0 +1,29 @@
+"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"));
+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)]
+    ])();
+};
+ScoreLabel.propTypes = {
+    label: prop_types_1.default.string,
+    attrTypeUri: prop_types_1.default.string
+};
+exports.default = ScoreLabel;

package/components/Score/styles.js

@@ -0,0 +1,36 @@
+"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({
+    container: {
+        display: 'flex',
+        flexShrink: 0,
+        marginLeft: '10px',
+        alignItems: 'center'
+    },
+    value: {
+        marginLeft: '4px',
+        minWidth: '20px',
+        textAlign: 'center'
+    }
+});
+exports.useDQIQStyles = styles_1.makeStyles({
+    dqiq: {
+        width: '14px',
+        height: '14px',
+        lineHeight: '14px',
+        background: '#e6605e',
+        color: '#fff',
+        fontSize: '10px',
+        fontWeight: 100,
+        marginLeft: '2px',
+        marginRight: '1px',
+        borderRadius: '2px',
+        display: 'inline-flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexShrink: 0,
+        textIndent: 0
+    }
+});

package/components/ScrollableTabs/ScrollableTabs.js

@@ -0,0 +1,51 @@
+"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 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");
+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)),
+        additionalLabel)); };
+    var handleChange = function (event, value) { return onChange(value); };
+    return (react_1.default.createElement(Tabs_1.default, __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 || {
+                root: styles.tabRoot
+            }, key: value, value: value, label: renderLabel(label, additionalLabel), "data-reltio-id": dataReltioId }));
+    })));
+};
+exports.default = ScrollableTabs;

package/components/ScrollableTabs/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({
+    tabsRoot: {
+        width: '100%'
+    },
+    tabsScrollButton: {
+        flex: '0 0 24px'
+    },
+    tabRoot: {
+        fontSize: '0.875rem',
+        padding: '7px 18px 5px',
+        '@media (min-width: 960px)': {
+            minWidth: 'inherit'
+        }
+    },
+    labelWrapper: {
+        whiteSpace: 'nowrap',
+        letterSpacing: 'normal',
+        display: 'flex',
+        flexDirection: 'row',
+        width: '100%'
+    },
+    label: {
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis',
+        fontWeight: 500
+    }
+});

package/components/SearchInput/SearchInput.js

@@ -0,0 +1,68 @@
+"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 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");
+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 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)));
+};
+exports.default = react_1.memo(SearchInput);