@reltio/components 1.4.2302-hotfix.0 → 1.4.2312

package/cjs/DropDownMenuButton/DropDownMenuButton.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"open":"DropDownMenuButton-open--2Amub"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.DropDownMenuButton-open--2Amub{--sapButton_Lite_Background:var(--sapButton_Selected_Background);--sapButton_Lite_BorderColor:var(--sapButton_Selected_BorderColor);--sapButton_Lite_TextColor:var(--sapButton_Selected_TextColor);--sapButton_Lite_Hover_Background:var(--sapButton_Selected_Hover_Background);--sapButton_Lite_Hover_BorderColor:var(--sapButton_Selected_Hover_BorderColor);--sapButton_Lite_Hover_TextColor:var(--sapButton_Selected_TextColor);--sapButton_Background:var(--sapButton_Selected_Background);--sapButton_BorderColor:var(--sapButton_Selected_BorderColor);--sapButton_TextColor:var(--sapButton_Selected_TextColor);--sapButton_Hover_Background:var(--sapButton_Selected_Hover_Background);--sapButton_Hover_BorderColor:var(--sapButton_Selected_Hover_BorderColor);--sapButton_Hover_TextColor:var(--sapButton_Selected_TextColor)}`;
+    head.appendChild(style);
+}
+module.exports = styles;

package/cjs/DropDownMenuButton/index.d.ts

@@ -1 +1,12 @@
-export { DropDownMenuButton } from './DropDownMenuButton';
+import React from 'react';
+import { DropDownMenuItem as LegacyDropDownMenuItem } from '../types';
+import { DropDownMenuButtonProps as LegacyProps } from './legacy/DropDownMenuButton';
+export type { DropDownMenuGroup, DropDownMenuItem, DropDownMenuNode, DropDownMenuSeparator } from './DropDownMenuButton';
+/**
+ * The legacy contract plus what only the design rendering understands. `horizontalAlign` has no
+ * legacy counterpart, so it does nothing until the call site routes to the design implementation.
+ */
+type DropDownMenuButtonProps<T> = LegacyProps<T> & {
+    horizontalAlign?: 'Start' | 'Center' | 'End';
+};
+export declare function DropDownMenuButton<T = LegacyDropDownMenuItem>(props: DropDownMenuButtonProps<T>): React.JSX.Element;

package/cjs/DropDownMenuButton/index.js

@@ -1,5 +1,53 @@
 "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.DropDownMenuButton = void 0;
+exports.DropDownMenuButton = DropDownMenuButton;
+var react_1 = __importDefault(require("react"));
+var DesignMigrationContext_1 = require("../contexts/DesignMigrationContext");
 var DropDownMenuButton_1 = require("./DropDownMenuButton");
-Object.defineProperty(exports, "DropDownMenuButton", { enumerable: true, get: function () { return DropDownMenuButton_1.DropDownMenuButton; } });
+var DropDownMenuButton_2 = require("./legacy/DropDownMenuButton");
+var isRenderableByDesign = function (nodes) {
+    if (nodes === void 0) { nodes = []; }
+    return nodes.every(function (node) {
+        if ((0, DropDownMenuButton_1.isSeparatorNode)(node)) {
+            return true;
+        }
+        if ((0, DropDownMenuButton_1.isGroupNode)(node)) {
+            return isRenderableByDesign(node.items);
+        }
+        return (
+        // Legacy sugar for a checkbox. The design rendering wants an explicit group instead,
+        // because in UI5 being checkable is a trait of the group rather than of the item.
+        !node.selectable &&
+            // A React component icon means an unmigrated call site: UI5 takes SAP icon names.
+            (node.icon === undefined || typeof node.icon === 'string') &&
+            isRenderableByDesign(node.items));
+    });
+};
+/**
+ * A UI5 menu only takes UI5 `MenuItem`s, so call sites rendering their own MUI items or tuning the
+ * MUI popover keep the legacy rendering even inside a migrated screen.
+ */
+var isSupportedByDesign = function (_a) {
+    var MenuItemRenderer = _a.MenuItemRenderer, popoverProps = _a.popoverProps, menuItems = _a.menuItems;
+    return !MenuItemRenderer && !popoverProps && isRenderableByDesign(menuItems);
+};
+function DropDownMenuButton(props) {
+    if ((0, DesignMigrationContext_1.useDesignMigration)() && isSupportedByDesign(props)) {
+        return react_1.default.createElement(DropDownMenuButton_1.DropDownMenuButton, __assign({}, props, { menuItems: props.menuItems }));
+    }
+    return react_1.default.createElement(DropDownMenuButton_2.DropDownMenuButton, __assign({}, props));
+}

package/cjs/DropDownMenuButton/legacy/DropDownMenuButton.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { MenuProps } from '@mui/material/Menu';
+import { DropDownMenuItem } from '../../types';
+export type DropDownMenuButtonProps<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) => React.ReactNode;
+};
+export declare function DropDownMenuButton<T = DropDownMenuItem>({ className, menuId, buttonComponent, buttonContent, menuItems, buttonProps, popoverProps, onMenuOpen, onMenuClose, MenuItemRenderer }: DropDownMenuButtonProps<T>): React.JSX.Element;

package/cjs/DropDownMenuButton/legacy/DropDownMenuButton.js

@@ -0,0 +1,88 @@
+"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 = DropDownMenuButton;
+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("./DefaultMenuItemRenderer");
+var useDidUpdateEffect_1 = require("../../hooks/useDidUpdateEffect");
+var styles_1 = require("./styles");
+var EMPTY_ARRAY = [];
+var EMPTY_OBJECT = {};
+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 ? EMPTY_ARRAY : _d, _e = _a.buttonProps, buttonProps = _e === void 0 ? EMPTY_OBJECT : _e, _f = _a.popoverProps, popoverProps = _f === void 0 ? EMPTY_OBJECT : _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)(null);
+    var _k = (0, react_1.useState)(false), isOpen = _k[0], setIsOpen = _k[1];
+    // onMenuOpen is fired synchronously in the click handler (below) so it wins the race against a
+    // parent's onMouseLeave when the button lives in an unmounting hover overlay; onMenuClose stays
+    // deferred to this effect so consumers can keep the button mounted (e.g. delete confirmation).
+    (0, useDidUpdateEffect_1.useDidUpdateEffect)(function () {
+        if (!isOpen) {
+            onMenuClose();
+        }
+    }, [isOpen]);
+    var handleToggle = (0, react_1.useCallback)(function (e) {
+        e === null || e === void 0 ? void 0 : e.stopPropagation();
+        var nextIsOpen = !isOpen;
+        setIsOpen(nextIsOpen);
+        if (nextIsOpen) {
+            onMenuOpen();
+        }
+    }, [isOpen, onMenuOpen]);
+    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))));
+}

package/cjs/DropDownMenuButton/{DropDownMenuButton.spec.js → legacy/DropDownMenuButton.spec.js}

@@ -64,7 +64,7 @@ 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 DropDownMenuButton_1 = require("../DropDownMenuButton");
+var DropDownMenuButton_1 = require("./DropDownMenuButton");
 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() }

package/cjs/RelationEditor/RelationEditor.js

@@ -41,8 +41,7 @@ var react_1 = __importStar(require("react"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var classnames_1 = __importDefault(require("classnames"));
 var ramda_1 = require("ramda");
-var Button_1 = __importDefault(require("@mui/material/Button"));
-var Typography_1 = __importDefault(require("@mui/material/Typography"));
+var components_1 = require("@reltio/design/components");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var ConnectionRelationTypeSelector_1 = require("../ConnectionRelationTypeSelector");
 var ErrorWrapper_1 = require("../ErrorWrapper");
@@ -55,7 +54,7 @@ var MdmModuleContext_1 = require("../contexts/MdmModuleContext");
 var HiddenAttributesContext_1 = require("../contexts/HiddenAttributesContext");
 var AutoCompleteContext_1 = require("../contexts/AutoCompleteContext");
 var useScrollToAttributeError_1 = require("../hooks/useScrollToAttributeError");
-var styles_1 = require("./styles");
+var RelationEditor_module_css_1 = __importDefault(require("./RelationEditor.module.css"));
 var areRelatedEntitiesChanged = function (initial, actual) {
     return initial.length !== actual.length || initial.some(function (_, i) { return initial[i] !== actual[i]; });
 };
@@ -64,7 +63,6 @@ var RelationEditor = function (_a) {
     var _b;
     var _c, _d;
     var connection = _a.connection, config = _a.config, mode = _a.mode, metadata = _a.metadata, highlightedError = _a.highlightedError;
-    var styles = (0, styles_1.useStyles)();
     var _e = connection.relation, relationType = _e.relationType, direction = _e.direction;
     var isNew = connection.isNew;
     var entityUri = (0, mdm_sdk_1.getEntityUriFromConnection)(connection);
@@ -254,22 +252,22 @@ var RelationEditor = function (_a) {
     var isEntityHasMaskedAttrValue = (0, ramda_1.pipe)(ramda_1.values, ramda_1.flatten, (0, ramda_1.any)(mdm_sdk_1.isAttributeHasMaskedValue))(((_d = (_c = connection.entity) === null || _c === void 0 ? void 0 : _c.object) === null || _d === void 0 ? void 0 : _d.attributes) || {});
     var isMasked = showMasking && isEntityHasMaskedAttrValue;
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: styles.editor },
-            react_1.default.createElement(Typography_1.default, { className: styles.title }, isNew ? ui_i18n_1.default.text('Add new item') : ui_i18n_1.default.text('Edit item')),
-            defaultRelationType === null && (react_1.default.createElement(ConnectionRelationTypeSelector_1.ConnectionRelationTypeSelector, { className: styles.item, relation: connection.relation, inRelationTypes: inRelationTypes, outRelationTypes: outRelationTypes, onChange: onRelationTypeChange })),
+        react_1.default.createElement("div", { className: RelationEditor_module_css_1.default.editor },
+            react_1.default.createElement(components_1.Text, { className: RelationEditor_module_css_1.default.title }, isNew ? ui_i18n_1.default.text('Add new item') : ui_i18n_1.default.text('Edit item')),
+            defaultRelationType === null && (react_1.default.createElement(ConnectionRelationTypeSelector_1.ConnectionRelationTypeSelector, { className: RelationEditor_module_css_1.default.item, relation: connection.relation, inRelationTypes: inRelationTypes, outRelationTypes: outRelationTypes, onChange: onRelationTypeChange })),
             Boolean(relationType) && (react_1.default.createElement(ConfigPermissionsContext_1.ConfigPermissionsContextProvider, null,
                 react_1.default.createElement("div", { ref: ref, className: errorClassName },
                     react_1.default.createElement(ErrorWrapper_1.ErrorWrapper, { errorMessage: errorMessage },
                         react_1.default.createElement(AutoCompleteContext_1.AddressAutoCompleteProvider, { entityUri: entityUri },
-                            react_1.default.createElement(EntitySelector_1.EntitySelector, { className: (0, classnames_1.default)(styles.item, (_b = {},
-                                    _b[styles.dense] = errorMessage ||
+                            react_1.default.createElement(EntitySelector_1.EntitySelector, { className: (0, classnames_1.default)(RelationEditor_module_css_1.default.item, (_b = {},
+                                    _b[RelationEditor_module_css_1.default.dense] = errorMessage ||
                                         (connection.entity && (0, mdm_sdk_1.isTempUri)(connection.entity.entityUri)),
                                     _b)), entity: connection.entity || {}, entityTypesUris: entityTypesUris, globalSearchRequestOptions: globalSearchRequestOptions, mode: mode, onChange: onChangeEntity, onCreate: canCreateNewEntity ? onCreateEntity : undefined, metadata: metadata, attributeTypesSelectionStrategy: mdm_sdk_1.relationEditorAttributeTypesSelectionStrategy, isMasked: isMasked })))),
                 react_1.default.createElement(HiddenAttributesContext_1.HiddenAttributesContext.Provider, { value: emptyHiddenAttributes },
-                    react_1.default.createElement(EditModeAttributesList_1.EditModeAttributesList, { className: styles.item, attrTypes: firstLevelRelationAttrTypes, entity: attributeListEntity, showEmptyEditors: true, mode: mode, parentUri: relationUri, onAddAttributes: onAddAttributes, onChangeAttribute: onChangeAttribute, onDeleteAttribute: onDeleteAttribute }))))),
-        react_1.default.createElement("div", { className: styles.actionButtons },
-            react_1.default.createElement(Button_1.default, { onClick: onCancel }, ui_i18n_1.default.text('Cancel')),
-            react_1.default.createElement(Button_1.default, { color: "primary", disabled: !hasChanges, onClick: onApply }, ui_i18n_1.default.text('Apply')))));
+                    react_1.default.createElement(EditModeAttributesList_1.EditModeAttributesList, { className: RelationEditor_module_css_1.default.item, attrTypes: firstLevelRelationAttrTypes, entity: attributeListEntity, showEmptyEditors: true, mode: mode, parentUri: relationUri, onAddAttributes: onAddAttributes, onChangeAttribute: onChangeAttribute, onDeleteAttribute: onDeleteAttribute })))),
+            react_1.default.createElement("div", { className: RelationEditor_module_css_1.default.actionButtons },
+                react_1.default.createElement(components_1.Button, { design: "Transparent", onClick: onCancel }, ui_i18n_1.default.text('Cancel')),
+                react_1.default.createElement(components_1.Button, { design: "Emphasized", disabled: !hasChanges, onClick: onApply }, ui_i18n_1.default.text('Apply'))))));
 };
 exports.default = (0, withContext_1.withContext)(ScrollToElementContext_1.ScrollToElementContext, function (contextValue, _a) {
     var connection = _a.connection;

package/cjs/RelationEditor/RelationEditor.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"editor":"RelationEditor-editor--ajWNL","title":"RelationEditor-title--rOGsW","item":"RelationEditor-item--vYyXo","dense":"RelationEditor-dense---NXeF","actionButtons":"RelationEditor-actionButtons--1LeIZ"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.RelationEditor-editor--ajWNL{display:flex;flex-direction:column;overflow-x:hidden;padding:0 24px 16px}.RelationEditor-title--rOGsW{font-size:16px;margin:17px 0 24px}.RelationEditor-item--vYyXo{margin-bottom:20px}.RelationEditor-dense---NXeF{margin-bottom:0}.RelationEditor-actionButtons--1LeIZ{display:flex;gap:8px;justify-content:flex-end}`;
+    head.appendChild(style);
+}
+module.exports = styles;

package/cjs/VerificationButton/VerificationButton.js

@@ -110,12 +110,13 @@ var VerificationButton = function (_a) {
     var verificationAttributeTypeUris = (0, react_context_selector_1.useContextSelector)(AttributesVerificationContext_1.AttributesVerificationContext, function (context) { return context.verificationAttributeTypeUris; });
     var options = (0, react_1.useMemo)(function () {
         if ((0, ramda_1.isNil)(attributeType))
-            return {};
+            return { forceVerify: true };
         var clientFilter = verificationType === mdm_sdk_1.InputVerificationAttribute.Email
             ? mdm_sdk_1.VerifyAttributesClientFilter.EmailVerifier
             : mdm_sdk_1.VerifyAttributesClientFilter.PhoneVerifier;
         return {
-            clientFilter: clientFilter
+            clientFilter: clientFilter,
+            forceVerify: true
         };
     }, [attributeType, verificationType]);
     var verifySafePromise = (0, useSafePromise_1.useSafePromise)();

package/cjs/contexts/DesignMigrationContext/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type Props = {
+    children: React.ReactNode;
+    enabled?: boolean;
+};
+export declare const DesignMigrationProvider: ({ children, enabled }: Props) => React.JSX.Element;
+export declare const useDesignMigration: () => boolean;
+export {};

package/cjs/contexts/DesignMigrationContext/index.js

@@ -0,0 +1,35 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDesignMigration = exports.DesignMigrationProvider = void 0;
+var react_1 = __importStar(require("react"));
+var DesignMigrationContext = (0, react_1.createContext)(false);
+var DesignMigrationProvider = function (_a) {
+    var children = _a.children, _b = _a.enabled, enabled = _b === void 0 ? true : _b;
+    return (react_1.default.createElement(DesignMigrationContext.Provider, { value: enabled }, children));
+};
+exports.DesignMigrationProvider = DesignMigrationProvider;
+var useDesignMigration = function () { return (0, react_1.useContext)(DesignMigrationContext); };
+exports.useDesignMigration = useDesignMigration;

package/cjs/features/crosswalks/CrosswalkDateEditor/CrosswalkDateEditor.test.js

@@ -112,15 +112,14 @@ describe('CrosswalkDateEditor tests', function () {
             switch (_a.label) {
                 case 0:
                     user = setUp().user;
-                    newDate = '10/10/2021';
-                    return [4 /*yield*/, user.type(react_2.screen.getByRole('textbox'), '01/01/2020')];
+                    newDate = '10/10/2021 01:01:00 AM';
+                    return [4 /*yield*/, user.clear(react_2.screen.getByRole('textbox'))];
                 case 1:
                     _a.sent();
-                    expect(react_2.screen.getByDisplayValue('01/01/2020 12:00:00 AM')).toBeInTheDocument();
-                    return [4 /*yield*/, user.type(react_2.screen.getByRole('textbox'), newDate)];
+                    return [4 /*yield*/, user.type(react_2.screen.getByRole('textbox'), newDate, { skipClick: true })];
                 case 2:
                     _a.sent();
-                    expect(react_2.screen.getByDisplayValue('10/10/2021 12:00:00 AM')).toBeInTheDocument();
+                    expect(react_2.screen.getByDisplayValue(newDate)).toBeInTheDocument();
                     expect(defaultProps.onChange).not.toHaveBeenCalled();
                     return [4 /*yield*/, user.tab()];
                 case 3:

package/cjs/features/history/ProfileBandHistory/ProfileBandHistory.js

@@ -6,19 +6,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ProfileBandHistory = void 0;
 var react_1 = __importDefault(require("react"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
-var Button_1 = __importDefault(require("@mui/material/Button"));
-var Typography_1 = __importDefault(require("@mui/material/Typography"));
+var components_1 = require("@reltio/design/components");
 var MdmModuleContext_1 = require("../../../contexts/MdmModuleContext");
-var styles_1 = require("./styles");
+var ProfileBandHistory_module_css_1 = __importDefault(require("./ProfileBandHistory.module.css"));
 var ProfileBandHistory = function () {
-    var styles = (0, styles_1.useStyles)();
     var clearHistoryEvent = (0, MdmModuleContext_1.useMdmAction)('clearHistoryEvent');
     var historyEvent = (0, MdmModuleContext_1.useMdmHistoryEvent)();
-    return historyEvent ? (react_1.default.createElement("div", { className: styles.root },
-        react_1.default.createElement(Typography_1.default, { component: 'div' },
+    return historyEvent ? (react_1.default.createElement("div", { className: ProfileBandHistory_module_css_1.default.root },
+        react_1.default.createElement(components_1.Text, { className: ProfileBandHistory_module_css_1.default.message },
             ui_i18n_1.default.text('You are viewing a historic slice:'),
             ' ',
-            react_1.default.createElement("span", { className: styles.slice }, ui_i18n_1.default.date(historyEvent.aStamp, 'llll'))),
-        react_1.default.createElement(Button_1.default, { className: styles.cancelButton, variant: "contained", color: "primary", onClick: clearHistoryEvent }, ui_i18n_1.default.text('Cancel')))) : null;
+            react_1.default.createElement("span", { className: ProfileBandHistory_module_css_1.default.slice }, ui_i18n_1.default.date(historyEvent.aStamp, 'llll'))),
+        react_1.default.createElement(components_1.Button, { className: ProfileBandHistory_module_css_1.default.cancelButton, design: "Emphasized", onClick: clearHistoryEvent }, ui_i18n_1.default.text('Cancel')))) : null;
 };
 exports.ProfileBandHistory = ProfileBandHistory;

package/cjs/features/history/ProfileBandHistory/ProfileBandHistory.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"root":"ProfileBandHistory-root--YvxgP","message":"ProfileBandHistory-message--pXCjS","slice":"ProfileBandHistory-slice--o9Udc","cancelButton":"ProfileBandHistory-cancelButton--mPVRW"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.ProfileBandHistory-root--YvxgP{align-items:flex-start;display:flex}.ProfileBandHistory-message--pXCjS{font-size:var(--sapFontLargeSize)}.ProfileBandHistory-slice--o9Udc{font-weight:600}.ProfileBandHistory-cancelButton--mPVRW{flex-shrink:0;margin-left:15px}`;
+    head.appendChild(style);
+}
+module.exports = styles;

package/cjs/features/history/ProfileBandHistory/index.d.ts

@@ -1 +1,2 @@
-export { ProfileBandHistory } from './ProfileBandHistory';
+import React from 'react';
+export declare const ProfileBandHistory: () => React.JSX.Element;

package/cjs/features/history/ProfileBandHistory/index.js

@@ -1,5 +1,15 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ProfileBandHistory = void 0;
-var ProfileBandHistory_1 = require("./ProfileBandHistory");
-Object.defineProperty(exports, "ProfileBandHistory", { enumerable: true, get: function () { return ProfileBandHistory_1.ProfileBandHistory; } });
+var react_1 = __importDefault(require("react"));
+var DesignMigrationContext_1 = require("../../../contexts/DesignMigrationContext");
+var ProfileBandHistory_1 = require("./legacy/ProfileBandHistory");
+var ProfileBandHistory_2 = require("./ProfileBandHistory");
+var ProfileBandHistory = function () {
+    var designMigrationEnabled = (0, DesignMigrationContext_1.useDesignMigration)();
+    return designMigrationEnabled ? react_1.default.createElement(ProfileBandHistory_2.ProfileBandHistory, null) : react_1.default.createElement(ProfileBandHistory_1.ProfileBandHistory, null);
+};
+exports.ProfileBandHistory = ProfileBandHistory;

package/cjs/features/history/ProfileBandHistory/legacy/ProfileBandHistory.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ProfileBandHistory: () => React.JSX.Element;

package/cjs/features/history/ProfileBandHistory/legacy/ProfileBandHistory.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.ProfileBandHistory = void 0;
+var react_1 = __importDefault(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var Button_1 = __importDefault(require("@mui/material/Button"));
+var Typography_1 = __importDefault(require("@mui/material/Typography"));
+var MdmModuleContext_1 = require("../../../../contexts/MdmModuleContext");
+var styles_1 = require("./styles");
+var ProfileBandHistory = function () {
+    var styles = (0, styles_1.useStyles)();
+    var clearHistoryEvent = (0, MdmModuleContext_1.useMdmAction)('clearHistoryEvent');
+    var historyEvent = (0, MdmModuleContext_1.useMdmHistoryEvent)();
+    return historyEvent ? (react_1.default.createElement("div", { className: styles.root },
+        react_1.default.createElement(Typography_1.default, { component: 'div' },
+            ui_i18n_1.default.text('You are viewing a historic slice:'),
+            ' ',
+            react_1.default.createElement("span", { className: styles.slice }, ui_i18n_1.default.date(historyEvent.aStamp, 'llll'))),
+        react_1.default.createElement(Button_1.default, { className: styles.cancelButton, variant: "contained", color: "primary", onClick: clearHistoryEvent }, ui_i18n_1.default.text('Cancel')))) : null;
+};
+exports.ProfileBandHistory = ProfileBandHistory;

package/cjs/features/history/ProfileBandHistory/{ProfileBandHistory.test.js → legacy/ProfileBandHistory.test.js}

@@ -54,7 +54,7 @@ var react_1 = __importDefault(require("react"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var react_2 = require("@testing-library/react");
 var user_event_1 = __importDefault(require("@testing-library/user-event"));
-var MdmModuleContext_1 = require("../../../contexts/MdmModuleContext");
+var MdmModuleContext_1 = require("../../../../contexts/MdmModuleContext");
 var ProfileBandHistory_1 = require("./ProfileBandHistory");
 var defaultHistoryEvent = { aStamp: 123 };
 var clearHistoryEvent = jest.fn();

package/cjs/features/workflow/AddWorkflowButton/AddWorkflowButton.js

@@ -29,13 +29,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AddWorkflowButton = void 0;
 var react_1 = __importStar(require("react"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
-var Button_1 = __importDefault(require("@mui/material/Button"));
-var Add_1 = __importDefault(require("@mui/icons-material/Add"));
+var components_1 = require("@reltio/design/components");
+var add_1 = __importDefault(require("@reltio/design/icons/sap/add"));
 var useWorkflowCheckPermission_1 = require("../hooks/useWorkflowCheckPermission");
 var AddWorkflowDialog_1 = require("../AddWorkflowDialog");
-var styles_1 = require("./styles");
+var AddWorkflowButton_module_css_1 = __importDefault(require("./AddWorkflowButton.module.css"));
 var AddWorkflowButton = function () {
-    var styles = (0, styles_1.useStyles)();
     var _a = (0, react_1.useState)(null), anchorEl = _a[0], setAnchorEl = _a[1];
     var checkWorkflowPermission = (0, useWorkflowCheckPermission_1.useWorkflowCheckPermission)();
     var canStartProcess = checkWorkflowPermission('START_PROCESS_INSTANCE');
@@ -43,9 +42,7 @@ var AddWorkflowButton = function () {
     var handleOpen = function (e) { return setAnchorEl(e.currentTarget); };
     var handleClose = function () { return setAnchorEl(null); };
     return canStartProcess && canViewProcessDefinitions ? (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Button_1.default, { color: "primary", className: styles.button, onClick: handleOpen },
-            react_1.default.createElement(Add_1.default, { className: styles.icon }),
-            react_1.default.createElement("div", { className: styles.buttonLabel }, ui_i18n_1.default.text('Add'))),
+        react_1.default.createElement(components_1.Button, { design: "Transparent", className: AddWorkflowButton_module_css_1.default.button, icon: add_1.default, onClick: handleOpen }, ui_i18n_1.default.text('Add')),
         react_1.default.createElement(AddWorkflowDialog_1.AddWorkflowDialog, { anchorEl: anchorEl, onClose: handleClose }))) : null;
 };
 exports.AddWorkflowButton = AddWorkflowButton;

package/cjs/features/workflow/AddWorkflowButton/AddWorkflowButton.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"button":"AddWorkflowButton-button--5MCcn"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.AddWorkflowButton-button--5MCcn{margin-left:auto;margin-right:8px}`;
+    head.appendChild(style);
+}
+module.exports = styles;

package/cjs/helpers/errors.js

@@ -8,6 +8,9 @@ var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var ErrorPopup_1 = require("../ErrorPopup");
 var showErrorMessage = function (error, params) {
+    if ((0, mdm_sdk_1.isAbortError)(error)) {
+        return;
+    }
     var _a = params || {}, _b = _a.title, title = _b === void 0 ? ui_i18n_1.default.text('Error') : _b, message = _a.message, defaultMessage = _a.defaultMessage;
     console.warn(error);
     ErrorPopup_1.ErrorPopup.addError({

package/cjs/helpers/errors.test.js

@@ -49,6 +49,10 @@ describe('showErrorMessage tests', function () {
             message: 'Error message'
         });
     });
+    it('should not show ErrorPopup for abort errors', function () {
+        (0, errors_1.showErrorMessage)(Object.assign(new Error('The user aborted a request.'), { name: 'AbortError' }));
+        expect(ErrorPopup_1.ErrorPopup.addError).not.toHaveBeenCalled();
+    });
     describe('showDefaultErrorMessage tests', function () {
         it('should show default message if errorMessage is not provided', function () {
             (0, errors_1.showDefaultErrorMessage)({

package/cjs/hooks/useReadableSearchState/useReadableSearchState.js

@@ -25,6 +25,12 @@ var useReadableSearchState = function (searchState) {
             }), mdm_sdk_1.resolveLookupsList, (0, ramda_1.andThen)(lookupsListResolved))(unresolvedLookups);
         }
     }, [searchState]); // eslint-disable-line
+    if (!metadata) {
+        return {
+            readableQuery: [],
+            readableQueryString: ''
+        };
+    }
     return {
         readableQuery: (0, mdm_sdk_1.buildReadableQuery)(metadata, attributesPresentation, lookups, groups, keyword, map, formatOptions),
         readableQueryString: (0, mdm_sdk_1.buildReadableQueryToString)(metadata, attributesPresentation, lookups, groups, keyword, map, formatOptions)

package/cjs/hooks/useReadableSearchState/useReadableSearchState.test.js

@@ -65,10 +65,11 @@ var attributesPresentation = {
 };
 var lookups = {};
 var lookupsListResolved = jest.fn();
-var setUp = function (searchState) {
+var setUp = function (searchState, values) {
+    if (values === void 0) { values = { metadata: metadata, dataTenants: dataTenants, attributesPresentation: attributesPresentation, lookups: lookups }; }
     var Providers = function (_a) {
         var children = _a.children;
-        return (react_1.default.createElement(MdmModuleContext_1.MdmModuleProvider, { values: { metadata: metadata, dataTenants: dataTenants, attributesPresentation: attributesPresentation, lookups: lookups }, actions: { lookupsListResolved: lookupsListResolved } }, children));
+        return (react_1.default.createElement(MdmModuleContext_1.MdmModuleProvider, { values: values, actions: { lookupsListResolved: lookupsListResolved } }, children));
     };
     return (0, react_2.renderHook)(useReadableSearchState_1.useReadableSearchState, { wrapper: Providers, initialProps: searchState });
 };
@@ -146,4 +147,31 @@ describe('useReadableSearchState tests', function () {
             }
         });
     }); });
+    it('should not build readable query if metadata is not loaded', function () {
+        var searchState = {
+            version: '2.0',
+            advanced: [
+                {
+                    attributes: [
+                        {
+                            data: { fieldName: 'sourceSystems' },
+                            operator: 'and',
+                            filter: 'equals',
+                            values: [['SupplierIntelligenceTesting']]
+                        }
+                    ],
+                    operator: 'or'
+                }
+            ]
+        };
+        mdm_sdk_1.getGroupsFromSearchState.mockReturnValueOnce([]);
+        mdm_sdk_1.getUnresolvedLookupsListFromSearchGroups.mockReturnValueOnce([]);
+        var result = setUp(searchState, { dataTenants: dataTenants, attributesPresentation: attributesPresentation, lookups: lookups }).result;
+        expect(mdm_sdk_1.buildReadableQuery).not.toHaveBeenCalled();
+        expect(mdm_sdk_1.buildReadableQueryToString).not.toHaveBeenCalled();
+        expect(result.current).toEqual({
+            readableQuery: [],
+            readableQueryString: ''
+        });
+    });
 });

package/contexts/DesignMigrationContext/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type Props = {
+    children: React.ReactNode;
+    enabled?: boolean;
+};
+export declare const DesignMigrationProvider: ({ children, enabled }: Props) => React.JSX.Element;
+export declare const useDesignMigration: () => boolean;
+export {};

package/contexts/DesignMigrationContext/index.js

@@ -0,0 +1,7 @@
+import React, { createContext, useContext } from 'react';
+var DesignMigrationContext = createContext(false);
+export var DesignMigrationProvider = function (_a) {
+    var children = _a.children, _b = _a.enabled, enabled = _b === void 0 ? true : _b;
+    return (React.createElement(DesignMigrationContext.Provider, { value: enabled }, children));
+};
+export var useDesignMigration = function () { return useContext(DesignMigrationContext); };