@reltio/components 1.4.1824-hf-2 → 1.4.1836-hf

package/cjs/DescriptionIcon/DescriptionIcon.test.js

@@ -0,0 +1,94 @@
+"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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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 react_2 = require("@testing-library/react");
+var user_event_1 = __importDefault(require("@testing-library/user-event"));
+var FeaturesContext_1 = require("../contexts/FeaturesContext");
+var DescriptionIcon_1 = require("./DescriptionIcon");
+describe('DescriptionIcon tests', function () {
+    var setUp = function (_a) {
+        var showDescription = _a.showDescription, description = _a.description;
+        var user = user_event_1.default.setup();
+        var Providers = function (_a) {
+            var children = _a.children;
+            return (react_1.default.createElement(FeaturesContext_1.FeaturesContext.Provider, { value: { showDescription: showDescription } }, children));
+        };
+        return __assign({ user: user }, (0, react_2.render)(react_1.default.createElement(DescriptionIcon_1.DescriptionIcon, { description: description }), { wrapper: Providers }));
+    };
+    it('should render nothing if description is empty', function () {
+        var container = setUp({ description: '', showDescription: true }).container;
+        expect(container).toBeEmptyDOMElement();
+    });
+    it('should render nothing if showDescription is false', function () {
+        var container = setUp({ description: 'Attribute description', showDescription: false }).container;
+        expect(container).toBeEmptyDOMElement();
+    });
+    it('should render description', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, icon, _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    user = setUp({ description: 'Attribute description', showDescription: true }).user;
+                    icon = react_2.screen.getByTestId('reltio-description-icon');
+                    return [4 /*yield*/, user.hover(icon)];
+                case 1:
+                    _b.sent();
+                    _a = expect;
+                    return [4 /*yield*/, react_2.screen.findByText('Attribute description')];
+                case 2:
+                    _a.apply(void 0, [_b.sent()]).toBeInTheDocument();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});

package/cjs/DescriptionIcon/index.d.ts

@@ -0,0 +1 @@
+export { DescriptionIcon } from './DescriptionIcon';

package/cjs/DescriptionIcon/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DescriptionIcon = void 0;
+var DescriptionIcon_1 = require("./DescriptionIcon");
+Object.defineProperty(exports, "DescriptionIcon", { enumerable: true, get: function () { return DescriptionIcon_1.DescriptionIcon; } });

package/cjs/DropDownMenuButton/DropDownMenuButton.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { MenuProps } from '@mui/material/Menu';
+import { DropDownMenuItem } from '../types';
+type Props<T> = {
+    className?: string;
+    buttonComponent?: React.ElementType;
+    buttonContent?: React.ReactNode;
+    menuItems?: T[];
+    buttonProps?: Record<string, unknown>;
+    popoverProps?: Omit<MenuProps, 'open'>;
+    menuId: string;
+    onMenuOpen?: () => void;
+    onMenuClose?: () => void;
+    MenuItemRenderer?: (props: any) => JSX.Element;
+};
+export declare function DropDownMenuButton<T = DropDownMenuItem>({ className, menuId, buttonComponent, buttonContent, menuItems, buttonProps, popoverProps, onMenuOpen, onMenuClose, MenuItemRenderer }: Props<T>): JSX.Element;
+export {};

package/cjs/DropDownMenuButton/DropDownMenuButton.js

@@ -0,0 +1,78 @@
+"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;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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 });
+exports.DropDownMenuButton = void 0;
+var react_1 = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var ramda_1 = require("ramda");
+var Button_1 = __importDefault(require("@mui/material/Button"));
+var Menu_1 = __importDefault(require("@mui/material/Menu"));
+var DefaultMenuItemRenderer_1 = require("./components/DefaultMenuItemRenderer");
+var useDidUpdateEffect_1 = require("../hooks/useDidUpdateEffect");
+var styles_1 = require("./styles");
+function DropDownMenuButton(_a) {
+    var _b;
+    var className = _a.className, menuId = _a.menuId, _c = _a.buttonComponent, buttonComponent = _c === void 0 ? Button_1.default : _c, buttonContent = _a.buttonContent, _d = _a.menuItems, menuItems = _d === void 0 ? [] : _d, _e = _a.buttonProps, buttonProps = _e === void 0 ? {} : _e, _f = _a.popoverProps, popoverProps = _f === void 0 ? {} : _f, _g = _a.onMenuOpen, onMenuOpen = _g === void 0 ? ramda_1.identity : _g, _h = _a.onMenuClose, onMenuClose = _h === void 0 ? ramda_1.identity : _h, _j = _a.MenuItemRenderer, MenuItemRenderer = _j === void 0 ? DefaultMenuItemRenderer_1.DefaultMenuItemRenderer : _j;
+    var ButtonComponent = buttonComponent;
+    var styles = (0, styles_1.useStyles)();
+    var buttonRef = (0, react_1.useRef)();
+    var _k = (0, react_1.useState)(false), isOpen = _k[0], setIsOpen = _k[1];
+    (0, useDidUpdateEffect_1.useDidUpdateEffect)(function () {
+        isOpen ? onMenuOpen() : onMenuClose();
+    }, [isOpen]);
+    var handleToggle = (0, react_1.useCallback)(function (e) {
+        e === null || e === void 0 ? void 0 : e.stopPropagation();
+        setIsOpen(function (open) { return !open; });
+    }, []);
+    var renderMenuItem = function (item, index) {
+        return react_1.default.createElement(MenuItemRenderer, { item: item, key: index, onMenuClose: handleToggle });
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(ButtonComponent, __assign({ "data-reltio-id": 'drop-down-menu-button', ref: buttonRef, className: (0, classnames_1.default)(styles.buttonRoot, (_b = {},
+                _b[styles.selected] = isOpen,
+                _b), className), onClick: handleToggle, "aria-pressed": isOpen, "aria-controls": isOpen ? menuId : undefined, "aria-haspopup": "true" }, buttonProps), buttonContent),
+        react_1.default.createElement(Menu_1.default, __assign({ id: menuId, variant: "menu", open: isOpen, autoFocus: false, classes: { paper: styles.paper }, anchorEl: buttonRef.current, onClose: handleToggle, anchorOrigin: {
+                vertical: 'bottom',
+                horizontal: 'right'
+            }, transformOrigin: {
+                vertical: 'top',
+                horizontal: 'right'
+            }, elevation: 2, MenuListProps: { autoFocusItem: isOpen } }, popoverProps), menuItems.map(renderMenuItem))));
+}
+exports.DropDownMenuButton = DropDownMenuButton;

package/cjs/DropDownMenuButton/DropDownMenuButton.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/cjs/DropDownMenuButton/DropDownMenuButton.spec.js

@@ -0,0 +1,81 @@
+"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 enzyme_1 = require("enzyme");
+var Menu_1 = __importDefault(require("@mui/material/Menu"));
+var test_utils_1 = require("react-dom/test-utils");
+var Button_1 = __importDefault(require("@mui/material/Button"));
+var MenuItem_1 = __importDefault(require("@mui/material/MenuItem"));
+var DropDownMenuButton_1 = require("../DropDownMenuButton");
+describe('DropDownMenuButton test', function () {
+    var menuItems = [
+        {
+            text: 'Disabled custom action',
+            disabled: true,
+            tooltip: 'Disabled custom tooltip',
+            onClick: jest.fn()
+        },
+        {
+            text: 'Custom action',
+            disabled: false,
+            tooltip: 'Custom tooltip',
+            onClick: jest.fn()
+        }
+    ];
+    var getMenuItems = function (component, wantedItems) {
+        return component.find(MenuItem_1.default).filterWhere(function (element) { return wantedItems.includes(element.children().text()); });
+    };
+    it('should render all components', function () {
+        var component = (0, enzyme_1.shallow)(react_1.default.createElement(DropDownMenuButton_1.DropDownMenuButton, { menuId: 'test', buttonContent: 'test', menuItems: menuItems }));
+        expect(component.find(Button_1.default)).toHaveLength(1);
+        expect(component.find(Menu_1.default)).toHaveLength(1);
+        expect(component.find('DefaultMenuItemRenderer')).toHaveLength(2);
+    });
+    it('should open/close menu after click on button', function () {
+        var component = (0, enzyme_1.shallow)(react_1.default.createElement(DropDownMenuButton_1.DropDownMenuButton, { menuId: 'test', buttonContent: 'test' }));
+        expect(component.find(Menu_1.default).prop('open')).toBeFalsy();
+        (0, test_utils_1.act)(function () {
+            component.find(Button_1.default).simulate('click');
+        });
+        component.update();
+        expect(component.find(Menu_1.default).prop('open')).toBeTruthy();
+        (0, test_utils_1.act)(function () {
+            component.find(Button_1.default).simulate('click');
+        });
+        component.update();
+        expect(component.find(Menu_1.default).prop('open')).toBeFalsy();
+    });
+    it('should call onMenuOpen/onMenuClose props after click on button', function () {
+        var onMenuOpen = jest.fn();
+        var onMenuClose = jest.fn();
+        var component = (0, enzyme_1.mount)(react_1.default.createElement(DropDownMenuButton_1.DropDownMenuButton, { menuId: 'test', buttonContent: 'test', onMenuOpen: onMenuOpen, onMenuClose: onMenuClose }));
+        expect(onMenuOpen).not.toHaveBeenCalled();
+        expect(onMenuClose).not.toHaveBeenCalled();
+        (0, test_utils_1.act)(function () {
+            component.find(Button_1.default).find('button').simulate('click');
+        });
+        expect(onMenuOpen).toHaveBeenCalled();
+        expect(onMenuClose).not.toHaveBeenCalled();
+        (0, test_utils_1.act)(function () {
+            component.find(Button_1.default).find('button').simulate('click');
+        });
+        expect(onMenuClose).toHaveBeenCalled();
+    });
+    it('should call onMenuClose when click on menu item', function () {
+        var onMenuClose = jest.fn();
+        var component = (0, enzyme_1.mount)(react_1.default.createElement(DropDownMenuButton_1.DropDownMenuButton, { menuId: 'test', buttonContent: 'test', menuItems: menuItems, onMenuClose: onMenuClose }));
+        (0, test_utils_1.act)(function () {
+            component.find(Button_1.default).find('button').simulate('click');
+        });
+        component.update();
+        var customMenuItem = getMenuItems(component, ['Custom action']);
+        (0, test_utils_1.act)(function () {
+            customMenuItem.find('li').at(0).simulate('click');
+        });
+        component.update();
+        expect(onMenuClose).toHaveBeenCalled();
+    });
+});

package/cjs/DropDownMenuButton/components/DefaultMenuItemRenderer/DefaultMenuItemRenderer.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { DropDownMenuItem } from '../../../types';
+type Props = {
+    item: DropDownMenuItem;
+    onMenuClose?: (e: any) => void;
+};
+export declare const DefaultMenuItemRenderer: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLLIElement>>;
+export {};

package/cjs/DropDownMenuButton/components/DefaultMenuItemRenderer/DefaultMenuItemRenderer.js

@@ -0,0 +1,50 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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 });
+exports.DefaultMenuItemRenderer = void 0;
+var react_1 = __importStar(require("react"));
+var ramda_1 = require("ramda");
+var Checkbox_1 = __importDefault(require("@mui/material/Checkbox"));
+var MenuItem_1 = __importDefault(require("@mui/material/MenuItem"));
+var Typography_1 = __importDefault(require("@mui/material/Typography"));
+var withTooltip_1 = require("../../../HOCs/withTooltip");
+var styles_1 = require("./styles");
+var MenuItemWithTooltip = (0, withTooltip_1.withTooltip)(MenuItem_1.default);
+exports.DefaultMenuItemRenderer = (0, react_1.forwardRef)(function (_a, ref) {
+    var item = _a.item, _b = _a.onMenuClose, onMenuClose = _b === void 0 ? ramda_1.identity : _b;
+    var styles = (0, styles_1.useStyles)();
+    var disabled = item.disabled, text = item.text, tooltip = item.tooltip, onClick = item.onClick, _c = item.id, id = _c === void 0 ? '' : _c, selectable = item.selectable, selected = item.selected;
+    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".concat(id) },
+        selectable && react_1.default.createElement(Checkbox_1.default, { checked: selected, color: "primary" }),
+        react_1.default.createElement(Typography_1.default, { classes: { root: styles.menuText } }, text)));
+});
+exports.DefaultMenuItemRenderer.displayName = 'DefaultMenuItemRenderer';

package/cjs/DropDownMenuButton/components/DefaultMenuItemRenderer/DefaultMenuItemRenderer.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/cjs/DropDownMenuButton/components/DefaultMenuItemRenderer/DefaultMenuItemRenderer.spec.js

@@ -0,0 +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 enzyme_1 = require("enzyme");
+var test_utils_1 = require("react-dom/test-utils");
+var DefaultMenuItemRenderer_1 = require("./DefaultMenuItemRenderer");
+describe('DefaultMenuItemRenderer tests', function () {
+    var item = {
+        text: 'Test item',
+        disabled: false,
+        tooltip: 'Test item tooltip',
+        onClick: jest.fn()
+    };
+    it('should render main parts', function () {
+        var component = (0, enzyme_1.shallow)(react_1.default.createElement(DefaultMenuItemRenderer_1.DefaultMenuItemRenderer, { item: item }));
+        var menuItem = component.find('WithTooltip');
+        expect(menuItem).toHaveLength(1);
+        expect(menuItem.props()).toMatchObject({
+            tooltipTitle: item.tooltip,
+            disabled: item.disabled
+        });
+        expect(menuItem.text()).toBe(item.text);
+    });
+    it('should call onClick and onMenuClose on item click', function () {
+        var onMenuClose = jest.fn();
+        var component = (0, enzyme_1.shallow)(react_1.default.createElement(DefaultMenuItemRenderer_1.DefaultMenuItemRenderer, { item: item, onMenuClose: onMenuClose }));
+        (0, test_utils_1.act)(function () {
+            component.find('WithTooltip').simulate('click');
+        });
+        component.update();
+        expect(item.onClick).toHaveBeenCalled();
+        expect(onMenuClose).toHaveBeenCalled();
+    });
+});

package/cjs/DropDownMenuButton/components/DefaultMenuItemRenderer/index.d.ts

@@ -0,0 +1 @@
+export { DefaultMenuItemRenderer } from './DefaultMenuItemRenderer';

package/cjs/DropDownMenuButton/components/DefaultMenuItemRenderer/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultMenuItemRenderer = void 0;
+var DefaultMenuItemRenderer_1 = require("./DefaultMenuItemRenderer");
+Object.defineProperty(exports, "DefaultMenuItemRenderer", { enumerable: true, get: function () { return DefaultMenuItemRenderer_1.DefaultMenuItemRenderer; } });

package/cjs/DropDownMenuButton/components/DefaultMenuItemRenderer/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"menuItem" | "menuText">;

package/cjs/DropDownMenuButton/components/DefaultMenuItemRenderer/styles.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@mui/styles");
+exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
+    menuItem: {
+        minHeight: '32px'
+    },
+    menuText: {
+        color: theme.palette.text.primary,
+        fontSize: '13px',
+        lineHeight: '15px',
+        letterSpacing: 0
+    }
+}); });

package/cjs/DropDownMenuButton/index.d.ts

@@ -0,0 +1 @@
+export { DropDownMenuButton } from './DropDownMenuButton';

package/cjs/DropDownMenuButton/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropDownMenuButton = void 0;
+var DropDownMenuButton_1 = require("./DropDownMenuButton");
+Object.defineProperty(exports, "DropDownMenuButton", { enumerable: true, get: function () { return DropDownMenuButton_1.DropDownMenuButton; } });

package/cjs/DropDownMenuButton/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"selected" | "paper" | "buttonRoot">;

package/cjs/DropDownMenuButton/styles.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@mui/material/styles");
+var styles_2 = require("@mui/styles");
+exports.useStyles = (0, styles_2.makeStyles)(function (theme) { return ({
+    buttonRoot: {
+        '&$selected': {
+            color: theme.palette.action.active,
+            backgroundColor: (0, styles_1.alpha)(theme.palette.action.active, 0.12),
+            '&:hover': {
+                backgroundColor: (0, styles_1.alpha)(theme.palette.action.active, 0.15)
+            }
+        }
+    },
+    selected: {},
+    paper: {
+        minWidth: '112px'
+    }
+}); });

package/cjs/EditModeAttributesFactory/EditModeAttributesFactory.d.ts

@@ -0,0 +1,3 @@
+export class EditModeAttributesFactory {
+    static build(attributeType: any, props?: {}): JSX.Element;
+}

package/cjs/EditModeAttributesFactory/EditModeAttributesFactory.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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditModeAttributesFactory = void 0;
+var react_1 = __importDefault(require("react"));
+var ramda_1 = require("ramda");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var SimpleAttributeEditor_1 = require("../SimpleAttributeEditor");
+var NestedAttributeEditor_1 = require("../NestedAttributeEditor");
+var ReferenceAttributeEditor_1 = require("../ReferenceAttributeEditor");
+var EditModeAttributesFactory = /** @class */ (function () {
+    function EditModeAttributesFactory() {
+    }
+    EditModeAttributesFactory.build = function (attributeType, props) {
+        if (props === void 0) { props = {}; }
+        switch (attributeType.type) {
+            case mdm_sdk_1.DataTypes.TYPE_NESTED:
+                return react_1.default.createElement(NestedAttributeEditor_1.NestedAttributeEditor, __assign({}, props));
+            case mdm_sdk_1.DataTypes.TYPE_REFERENCE:
+                return react_1.default.createElement(ReferenceAttributeEditor_1.ReferenceAttributeEditor, __assign({}, props));
+            default: {
+                var propsForSimpleAttribute = (0, ramda_1.omit)(['showEmptyEditors', 'onAddAttributes', 'lazy', 'errors', 'crosswalks', 'showNonOv', 'expanded'], props);
+                return (react_1.default.createElement(SimpleAttributeEditor_1.SimpleAttributeEditor, __assign({ isReltioCrosswalk: (0, mdm_sdk_1.isReltioCrosswalk)(props.crosswalks, props.attributeValue) }, propsForSimpleAttribute)));
+            }
+        }
+    };
+    return EditModeAttributesFactory;
+}());
+exports.EditModeAttributesFactory = EditModeAttributesFactory;

package/cjs/EditModeAttributesFactory/components/EditModeAttribute/EditModeAttribute.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { AttributeType } from '@reltio/mdm-sdk';
+export declare const EditModeAttribute: React.ForwardRefExoticComponent<Pick<{
+    className?: string;
+    attributeType: AttributeType;
+} & Record<string, unknown>, string> & React.RefAttributes<HTMLDivElement>>;

package/cjs/EditModeAttributesFactory/components/EditModeAttribute/EditModeAttribute.js

@@ -0,0 +1,44 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditModeAttribute = void 0;
+var react_1 = __importStar(require("react"));
+var EditModeAttributesFactory_1 = require("../../EditModeAttributesFactory");
+exports.EditModeAttribute = (0, react_1.forwardRef)(function (props, ref) {
+    var className = props.className, otherProps = __rest(props, ["className"]);
+    return (react_1.default.createElement("div", { ref: ref, "data-reltio-id": "reltio-edit-attribute", className: className }, EditModeAttributesFactory_1.EditModeAttributesFactory.build(props.attributeType, otherProps)));
+});
+exports.EditModeAttribute.displayName = 'EditModeAttribute';

package/cjs/EditModeAttributesFactory/components/EditModeAttribute/EditModeAttribute.test.d.ts

@@ -0,0 +1 @@
+export {};