@reltio/components 1.4.2302 → 1.4.2312

package/DropDownMenuButton/DropDownMenuButton.d.ts

@@ -1,17 +1,37 @@
 import React from 'react';
-import { MenuProps } from '@mui/material/Menu';
-import { DropDownMenuItem } from '../types';
-type Props<T> = {
+export type DropDownMenuItem = {
+    text?: string;
+    id?: string;
+    /** A SAP icon name. */
+    icon?: string;
+    additionalText?: string;
+    tooltip?: string;
+    disabled?: boolean;
+    /** Only rendered inside a group, and controlled: the mark follows this prop, nothing else. */
+    checked?: boolean;
+    onClick?: (e: any) => void;
+    items?: DropDownMenuNode[];
+};
+export type DropDownMenuGroup = {
+    checkMode: 'Single' | 'Multiple';
+    items: DropDownMenuItem[];
+};
+export type DropDownMenuSeparator = {
+    separator: true;
+};
+export type DropDownMenuNode = DropDownMenuItem | DropDownMenuGroup | DropDownMenuSeparator;
+/** Narrower than the legacy contract: `popoverProps` and `MenuItemRenderer` are MUI-only. */
+export type DropDownMenuButtonProps = {
     className?: string;
     buttonComponent?: React.ElementType;
     buttonContent?: React.ReactNode;
-    menuItems?: T[];
+    menuItems?: DropDownMenuNode[];
     buttonProps?: Record<string, unknown>;
-    popoverProps?: Omit<MenuProps, 'open'>;
     menuId: string;
+    horizontalAlign?: 'Start' | 'Center' | 'End';
     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 }: Props<T>): React.JSX.Element;
-export {};
+export declare const isSeparatorNode: (node: DropDownMenuNode) => node is DropDownMenuSeparator;
+export declare const isGroupNode: (node: DropDownMenuNode) => node is DropDownMenuGroup;
+export declare function DropDownMenuButton({ className, menuId, buttonComponent, buttonContent, menuItems, buttonProps, horizontalAlign, onMenuOpen, onMenuClose }: DropDownMenuButtonProps): React.JSX.Element;

package/DropDownMenuButton/DropDownMenuButton.js

@@ -9,51 +9,110 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
 import classnames from 'classnames';
 import { identity } from 'ramda';
-import Button from '@mui/material/Button';
-import Menu from '@mui/material/Menu';
-import { DefaultMenuItemRenderer } from './components/DefaultMenuItemRenderer';
+import { Button, Menu, MenuItem, MenuItemGroup, MenuSeparator, Tooltip } from '@reltio/design/components';
 import { useDidUpdateEffect } from '../hooks/useDidUpdateEffect';
-import { useStyles } from './styles';
+import styles from './DropDownMenuButton.module.css';
 var EMPTY_ARRAY = [];
 var EMPTY_OBJECT = {};
+export var isSeparatorNode = function (node) { return 'separator' in node; };
+export var isGroupNode = function (node) { return 'checkMode' in node; };
+var buildMenu = function (nodes) {
+    var handlers = new Map();
+    var renderNode = function (node, key, checkMode) {
+        var _a, _b;
+        if (isSeparatorNode(node)) {
+            return React.createElement(MenuSeparator, { key: key });
+        }
+        if (isGroupNode(node)) {
+            return (React.createElement(MenuItemGroup, { key: key, checkMode: node.checkMode }, node.items.map(function (item, index) { return renderNode(item, "".concat(key, ".").concat(index), node.checkMode); })));
+        }
+        handlers.set(key, { item: node, checkMode: checkMode });
+        return (React.createElement(Tooltip, { key: key, title: node.tooltip },
+            React.createElement(MenuItem, { "data-item-key": key, "data-reltio-id": "reltio-search-menu-item".concat((_a = node.id) !== null && _a !== void 0 ? _a : ''), 
+                // The wrapper describes the host, while the role sits on the shadow item, so the
+                // text has to come in as a name. The native `tooltip` would reach it too, but as
+                // a `title` that draws a second, unstyled bubble.
+                accessibleName: node.tooltip && [node.text, node.tooltip].filter(Boolean).join('. '), text: node.text, icon: node.icon, additionalText: node.additionalText, disabled: node.disabled, checked: node.checked }, (_b = node.items) === null || _b === void 0 ? void 0 : _b.map(function (child, index) { return renderNode(child, "".concat(key, ".").concat(index)); }))));
+    };
+    return { children: nodes.map(function (node, index) { return renderNode(node, String(index)); }), handlers: handlers };
+};
 export function DropDownMenuButton(_a) {
     var _b;
-    var className = _a.className, menuId = _a.menuId, _c = _a.buttonComponent, buttonComponent = _c === void 0 ? Button : _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 ? identity : _g, _h = _a.onMenuClose, onMenuClose = _h === void 0 ? identity : _h, _j = _a.MenuItemRenderer, MenuItemRenderer = _j === void 0 ? DefaultMenuItemRenderer : _j;
+    var _c;
+    var className = _a.className, menuId = _a.menuId, _d = _a.buttonComponent, buttonComponent = _d === void 0 ? Button : _d, buttonContent = _a.buttonContent, _e = _a.menuItems, menuItems = _e === void 0 ? EMPTY_ARRAY : _e, _f = _a.buttonProps, buttonProps = _f === void 0 ? EMPTY_OBJECT : _f, _g = _a.horizontalAlign, horizontalAlign = _g === void 0 ? 'End' : _g, _h = _a.onMenuOpen, onMenuOpen = _h === void 0 ? identity : _h, _j = _a.onMenuClose, onMenuClose = _j === void 0 ? identity : _j;
     var ButtonComponent = buttonComponent;
-    var styles = useStyles();
-    var buttonRef = useRef(null);
+    // The menu resolves the opener id on every use, so it survives a button node being replaced,
+    // which a ref captured in render would not. menuId is not unique on its own — the same menu is
+    // rendered per row in a few places.
+    var instanceId = useId();
+    var openerId = (_c = buttonProps.id) !== null && _c !== void 0 ? _c : "".concat(menuId, "-opener").concat(instanceId);
     var _k = 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).
+    // onMenuOpen fires synchronously in the click handler to beat a parent's onMouseLeave in an
+    // unmounting hover overlay; onMenuClose stays deferred so consumers can keep the button mounted.
     useDidUpdateEffect(function () {
         if (!isOpen) {
             onMenuClose();
         }
     }, [isOpen]);
+    var closeMenu = useCallback(function () { return setIsOpen(false); }, []);
     var handleToggle = 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.createElement(MenuItemRenderer, { item: item, key: index, onMenuClose: handleToggle });
-    };
+        if (isOpen) {
+            closeMenu();
+            return;
+        }
+        setIsOpen(true);
+        onMenuOpen();
+    }, [isOpen, closeMenu, onMenuOpen]);
+    // UI5 hands focus back to the opener while closing, so an item runs once that is over. Otherwise
+    // anything it focuses itself, such as a dialog without a focus trap, loses the focus right after.
+    var pendingClick = useRef(null);
+    var flushPendingClick = useCallback(function () {
+        var click = pendingClick.current;
+        pendingClick.current = null;
+        click === null || click === void 0 ? void 0 : click();
+    }, []);
+    // The popover closes a render later, so an opener that unmounts meanwhile — a hover overlay,
+    // for one — would otherwise swallow the action.
+    useEffect(function () { return flushPendingClick; }, [flushPendingClick]);
+    var handleMenuClose = useCallback(function () {
+        setIsOpen(false);
+        flushPendingClick();
+    }, [flushPendingClick]);
+    var _l = useMemo(function () { return buildMenu(menuItems); }, [menuItems]), children = _l.children, handlers = _l.handlers;
+    // A UI5 button builds the ARIA of its shadow <button> from this property; host attributes never
+    // reach it. `controls` is left out on purpose: the id would have to resolve from inside the shadow
+    // root, and an IDREF does not cross that boundary.
+    var accessibilityAttributes = useMemo(function () { return ({ hasPopup: 'menu', expanded: isOpen }); }, [isOpen]);
+    // UI5 reports the click on the root menu, submenus included, so the handler is looked up by key.
+    var handleItemClick = useCallback(function (e) {
+        var _a;
+        var entry = handlers.get(e.detail.item.dataset.itemKey);
+        if (!entry) {
+            return;
+        }
+        var item = entry.item, checkMode = entry.checkMode;
+        // Left alone, UI5 flips the mark itself and drifts away from the props. Cancelling the
+        // event takes both the mark and the closing back, at the cost of owning them here.
+        if (checkMode) {
+            e.preventDefault();
+        }
+        // A Multiple group is the one place where the menu stays open, so nothing has to wait.
+        if (checkMode === 'Multiple') {
+            (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, e);
+            return;
+        }
+        if (item.onClick) {
+            pendingClick.current = function () { return item.onClick(e); };
+        }
+        if (checkMode === 'Single') {
+            closeMenu();
+        }
+    }, [handlers, closeMenu]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(ButtonComponent, __assign({ "data-reltio-id": "drop-down-menu-button", ref: buttonRef, className: classnames(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.createElement(Menu, __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))));
+        React.createElement(ButtonComponent, __assign({ "data-reltio-id": "drop-down-menu-button", id: openerId, className: classnames((_b = {}, _b[styles.open] = isOpen, _b), className), onClick: handleToggle, accessibilityAttributes: accessibilityAttributes }, buttonProps), buttonContent),
+        React.createElement(Menu, { id: menuId, open: isOpen, opener: openerId, onClose: handleMenuClose, onItemClick: handleItemClick, horizontalAlign: horizontalAlign }, children)));
 }

package/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);
+}
+export default styles;

package/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/DropDownMenuButton/index.js

@@ -1 +1,47 @@
-export { DropDownMenuButton } from './DropDownMenuButton';
+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);
+};
+import React from 'react';
+import { useDesignMigration } from '../contexts/DesignMigrationContext';
+import { DropDownMenuButton as DesignDropDownMenuButton, isGroupNode, isSeparatorNode } from './DropDownMenuButton';
+import { DropDownMenuButton as LegacyDropDownMenuButton } from './legacy/DropDownMenuButton';
+var isRenderableByDesign = function (nodes) {
+    if (nodes === void 0) { nodes = []; }
+    return nodes.every(function (node) {
+        if (isSeparatorNode(node)) {
+            return true;
+        }
+        if (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);
+};
+export function DropDownMenuButton(props) {
+    if (useDesignMigration() && isSupportedByDesign(props)) {
+        return React.createElement(DesignDropDownMenuButton, __assign({}, props, { menuItems: props.menuItems }));
+    }
+    return React.createElement(LegacyDropDownMenuButton, __assign({}, props));
+}

package/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/DropDownMenuButton/legacy/DropDownMenuButton.js

@@ -0,0 +1,59 @@
+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);
+};
+import React, { useCallback, useRef, useState } from 'react';
+import classnames from 'classnames';
+import { identity } from 'ramda';
+import Button from '@mui/material/Button';
+import Menu from '@mui/material/Menu';
+import { DefaultMenuItemRenderer } from './DefaultMenuItemRenderer';
+import { useDidUpdateEffect } from '../../hooks/useDidUpdateEffect';
+import { useStyles } from './styles';
+var EMPTY_ARRAY = [];
+var EMPTY_OBJECT = {};
+export function DropDownMenuButton(_a) {
+    var _b;
+    var className = _a.className, menuId = _a.menuId, _c = _a.buttonComponent, buttonComponent = _c === void 0 ? Button : _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 ? identity : _g, _h = _a.onMenuClose, onMenuClose = _h === void 0 ? identity : _h, _j = _a.MenuItemRenderer, MenuItemRenderer = _j === void 0 ? DefaultMenuItemRenderer : _j;
+    var ButtonComponent = buttonComponent;
+    var styles = useStyles();
+    var buttonRef = useRef(null);
+    var _k = 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).
+    useDidUpdateEffect(function () {
+        if (!isOpen) {
+            onMenuClose();
+        }
+    }, [isOpen]);
+    var handleToggle = 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.createElement(MenuItemRenderer, { item: item, key: index, onMenuClose: handleToggle });
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ButtonComponent, __assign({ "data-reltio-id": "drop-down-menu-button", ref: buttonRef, className: classnames(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.createElement(Menu, __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/DropDownMenuButton/{DropDownMenuButton.spec.js → legacy/DropDownMenuButton.spec.js}

@@ -59,7 +59,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { DropDownMenuButton } from '../DropDownMenuButton';
+import { DropDownMenuButton } from './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/RelationEditor/RelationEditor.js

@@ -13,8 +13,7 @@ import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import i18n from 'ui-i18n';
 import classnames from 'classnames';
 import { always, assoc, concat, differenceWith, equals, forEach, map, path, pick, pipe, prop, propEq, when, uniq, curry, values, flatten, any } from 'ramda';
-import Button from '@mui/material/Button';
-import Typography from '@mui/material/Typography';
+import { Button, Text } from '@reltio/design/components';
 import { createTemporaryEntity, Directions, findRelatedTemporaryEntities, getActivenessAttributes, getCreatableAttributeTypes, getEntityType, getErrorMessage, getErrorId, getRelationType, getSuitableEntityTypeUrisForRelationTypes, isAvailableRelationBetweenEntities, omitMarks, relationEditorAttributeTypesSelectionStrategy, validateConnection, updateConnectionEntityLabel, isTempUri, isEmptyValue, getRelationAttributesList, getDefaultRelationTypeObject, getInOutRelations, isSuggestMode, isAttributeTypeError, getRelationUriFromConnection, getRelationEditorActiveError, getRelationAttributesFromConnection, getEntityUriFromConnection, evaluateErrorPath, AttributeValuePathItemType, getAllRelationEditorActiveErrors, isAttributeHasMaskedValue } from '@reltio/mdm-sdk';
 import { ConnectionRelationTypeSelector } from '../ConnectionRelationTypeSelector';
 import { ErrorWrapper } from '../ErrorWrapper';
@@ -27,7 +26,7 @@ import { useMdmAction, useMdmAuthoringItemsByEntityType, useMdmEntity, useMdmGlo
 import { HiddenAttributesContext } from '../contexts/HiddenAttributesContext';
 import { AddressAutoCompleteProvider } from '../contexts/AutoCompleteContext';
 import { useScrollToAttributeError } from '../hooks/useScrollToAttributeError';
-import { useStyles } from './styles';
+import styles from './RelationEditor.module.css';
 var areRelatedEntitiesChanged = function (initial, actual) {
     return initial.length !== actual.length || initial.some(function (_, i) { return initial[i] !== actual[i]; });
 };
@@ -36,7 +35,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 = useStyles();
     var _e = connection.relation, relationType = _e.relationType, direction = _e.direction;
     var isNew = connection.isNew;
     var entityUri = getEntityUriFromConnection(connection);
@@ -227,7 +225,7 @@ var RelationEditor = function (_a) {
     var isMasked = showMasking && isEntityHasMaskedAttrValue;
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: styles.editor },
-            React.createElement(Typography, { className: styles.title }, isNew ? i18n.text('Add new item') : i18n.text('Edit item')),
+            React.createElement(Text, { className: styles.title }, isNew ? i18n.text('Add new item') : i18n.text('Edit item')),
             defaultRelationType === null && (React.createElement(ConnectionRelationTypeSelector, { className: styles.item, relation: connection.relation, inRelationTypes: inRelationTypes, outRelationTypes: outRelationTypes, onChange: onRelationTypeChange })),
             Boolean(relationType) && (React.createElement(ConfigPermissionsContextProvider, null,
                 React.createElement("div", { ref: ref, className: errorClassName },
@@ -238,10 +236,10 @@ var RelationEditor = function (_a) {
                                         (connection.entity && isTempUri(connection.entity.entityUri)),
                                     _b)), entity: connection.entity || {}, entityTypesUris: entityTypesUris, globalSearchRequestOptions: globalSearchRequestOptions, mode: mode, onChange: onChangeEntity, onCreate: canCreateNewEntity ? onCreateEntity : undefined, metadata: metadata, attributeTypesSelectionStrategy: relationEditorAttributeTypesSelectionStrategy, isMasked: isMasked })))),
                 React.createElement(HiddenAttributesContext.Provider, { value: emptyHiddenAttributes },
-                    React.createElement(EditModeAttributesList, { className: styles.item, attrTypes: firstLevelRelationAttrTypes, entity: attributeListEntity, showEmptyEditors: true, mode: mode, parentUri: relationUri, onAddAttributes: onAddAttributes, onChangeAttribute: onChangeAttribute, onDeleteAttribute: onDeleteAttribute }))))),
-        React.createElement("div", { className: styles.actionButtons },
-            React.createElement(Button, { onClick: onCancel }, i18n.text('Cancel')),
-            React.createElement(Button, { color: "primary", disabled: !hasChanges, onClick: onApply }, i18n.text('Apply')))));
+                    React.createElement(EditModeAttributesList, { className: styles.item, attrTypes: firstLevelRelationAttrTypes, entity: attributeListEntity, showEmptyEditors: true, mode: mode, parentUri: relationUri, onAddAttributes: onAddAttributes, onChangeAttribute: onChangeAttribute, onDeleteAttribute: onDeleteAttribute })))),
+            React.createElement("div", { className: styles.actionButtons },
+                React.createElement(Button, { design: "Transparent", onClick: onCancel }, i18n.text('Cancel')),
+                React.createElement(Button, { design: "Emphasized", disabled: !hasChanges, onClick: onApply }, i18n.text('Apply'))))));
 };
 export default withContext(ScrollToElementContext, function (contextValue, _a) {
     var connection = _a.connection;

package/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);
+}
+export default styles;

package/VerificationButton/VerificationButton.js

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

package/cjs/DropDownMenuButton/DropDownMenuButton.d.ts

@@ -1,17 +1,37 @@
 import React from 'react';
-import { MenuProps } from '@mui/material/Menu';
-import { DropDownMenuItem } from '../types';
-type Props<T> = {
+export type DropDownMenuItem = {
+    text?: string;
+    id?: string;
+    /** A SAP icon name. */
+    icon?: string;
+    additionalText?: string;
+    tooltip?: string;
+    disabled?: boolean;
+    /** Only rendered inside a group, and controlled: the mark follows this prop, nothing else. */
+    checked?: boolean;
+    onClick?: (e: any) => void;
+    items?: DropDownMenuNode[];
+};
+export type DropDownMenuGroup = {
+    checkMode: 'Single' | 'Multiple';
+    items: DropDownMenuItem[];
+};
+export type DropDownMenuSeparator = {
+    separator: true;
+};
+export type DropDownMenuNode = DropDownMenuItem | DropDownMenuGroup | DropDownMenuSeparator;
+/** Narrower than the legacy contract: `popoverProps` and `MenuItemRenderer` are MUI-only. */
+export type DropDownMenuButtonProps = {
     className?: string;
     buttonComponent?: React.ElementType;
     buttonContent?: React.ReactNode;
-    menuItems?: T[];
+    menuItems?: DropDownMenuNode[];
     buttonProps?: Record<string, unknown>;
-    popoverProps?: Omit<MenuProps, 'open'>;
     menuId: string;
+    horizontalAlign?: 'Start' | 'Center' | 'End';
     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 }: Props<T>): React.JSX.Element;
-export {};
+export declare const isSeparatorNode: (node: DropDownMenuNode) => node is DropDownMenuSeparator;
+export declare const isGroupNode: (node: DropDownMenuNode) => node is DropDownMenuGroup;
+export declare function DropDownMenuButton({ className, menuId, buttonComponent, buttonContent, menuItems, buttonProps, horizontalAlign, onMenuOpen, onMenuClose }: DropDownMenuButtonProps): React.JSX.Element;

package/cjs/DropDownMenuButton/DropDownMenuButton.js

@@ -37,52 +37,114 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.isGroupNode = exports.isSeparatorNode = void 0;
 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("./components/DefaultMenuItemRenderer");
+var components_1 = require("@reltio/design/components");
 var useDidUpdateEffect_1 = require("../hooks/useDidUpdateEffect");
-var styles_1 = require("./styles");
+var DropDownMenuButton_module_css_1 = __importDefault(require("./DropDownMenuButton.module.css"));
 var EMPTY_ARRAY = [];
 var EMPTY_OBJECT = {};
+var isSeparatorNode = function (node) { return 'separator' in node; };
+exports.isSeparatorNode = isSeparatorNode;
+var isGroupNode = function (node) { return 'checkMode' in node; };
+exports.isGroupNode = isGroupNode;
+var buildMenu = function (nodes) {
+    var handlers = new Map();
+    var renderNode = function (node, key, checkMode) {
+        var _a, _b;
+        if ((0, exports.isSeparatorNode)(node)) {
+            return react_1.default.createElement(components_1.MenuSeparator, { key: key });
+        }
+        if ((0, exports.isGroupNode)(node)) {
+            return (react_1.default.createElement(components_1.MenuItemGroup, { key: key, checkMode: node.checkMode }, node.items.map(function (item, index) { return renderNode(item, "".concat(key, ".").concat(index), node.checkMode); })));
+        }
+        handlers.set(key, { item: node, checkMode: checkMode });
+        return (react_1.default.createElement(components_1.Tooltip, { key: key, title: node.tooltip },
+            react_1.default.createElement(components_1.MenuItem, { "data-item-key": key, "data-reltio-id": "reltio-search-menu-item".concat((_a = node.id) !== null && _a !== void 0 ? _a : ''), 
+                // The wrapper describes the host, while the role sits on the shadow item, so the
+                // text has to come in as a name. The native `tooltip` would reach it too, but as
+                // a `title` that draws a second, unstyled bubble.
+                accessibleName: node.tooltip && [node.text, node.tooltip].filter(Boolean).join('. '), text: node.text, icon: node.icon, additionalText: node.additionalText, disabled: node.disabled, checked: node.checked }, (_b = node.items) === null || _b === void 0 ? void 0 : _b.map(function (child, index) { return renderNode(child, "".concat(key, ".").concat(index)); }))));
+    };
+    return { children: nodes.map(function (node, index) { return renderNode(node, String(index)); }), handlers: handlers };
+};
 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 _c;
+    var className = _a.className, menuId = _a.menuId, _d = _a.buttonComponent, buttonComponent = _d === void 0 ? components_1.Button : _d, buttonContent = _a.buttonContent, _e = _a.menuItems, menuItems = _e === void 0 ? EMPTY_ARRAY : _e, _f = _a.buttonProps, buttonProps = _f === void 0 ? EMPTY_OBJECT : _f, _g = _a.horizontalAlign, horizontalAlign = _g === void 0 ? 'End' : _g, _h = _a.onMenuOpen, onMenuOpen = _h === void 0 ? ramda_1.identity : _h, _j = _a.onMenuClose, onMenuClose = _j === void 0 ? ramda_1.identity : _j;
     var ButtonComponent = buttonComponent;
-    var styles = (0, styles_1.useStyles)();
-    var buttonRef = (0, react_1.useRef)(null);
+    // The menu resolves the opener id on every use, so it survives a button node being replaced,
+    // which a ref captured in render would not. menuId is not unique on its own — the same menu is
+    // rendered per row in a few places.
+    var instanceId = (0, react_1.useId)();
+    var openerId = (_c = buttonProps.id) !== null && _c !== void 0 ? _c : "".concat(menuId, "-opener").concat(instanceId);
     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).
+    // onMenuOpen fires synchronously in the click handler to beat a parent's onMouseLeave in an
+    // unmounting hover overlay; onMenuClose stays deferred so consumers can keep the button mounted.
     (0, useDidUpdateEffect_1.useDidUpdateEffect)(function () {
         if (!isOpen) {
             onMenuClose();
         }
     }, [isOpen]);
+    var closeMenu = (0, react_1.useCallback)(function () { return setIsOpen(false); }, []);
     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();
+        if (isOpen) {
+            closeMenu();
+            return;
         }
-    }, [isOpen, onMenuOpen]);
-    var renderMenuItem = function (item, index) {
-        return react_1.default.createElement(MenuItemRenderer, { item: item, key: index, onMenuClose: handleToggle });
-    };
+        setIsOpen(true);
+        onMenuOpen();
+    }, [isOpen, closeMenu, onMenuOpen]);
+    // UI5 hands focus back to the opener while closing, so an item runs once that is over. Otherwise
+    // anything it focuses itself, such as a dialog without a focus trap, loses the focus right after.
+    var pendingClick = (0, react_1.useRef)(null);
+    var flushPendingClick = (0, react_1.useCallback)(function () {
+        var click = pendingClick.current;
+        pendingClick.current = null;
+        click === null || click === void 0 ? void 0 : click();
+    }, []);
+    // The popover closes a render later, so an opener that unmounts meanwhile — a hover overlay,
+    // for one — would otherwise swallow the action.
+    (0, react_1.useEffect)(function () { return flushPendingClick; }, [flushPendingClick]);
+    var handleMenuClose = (0, react_1.useCallback)(function () {
+        setIsOpen(false);
+        flushPendingClick();
+    }, [flushPendingClick]);
+    var _l = (0, react_1.useMemo)(function () { return buildMenu(menuItems); }, [menuItems]), children = _l.children, handlers = _l.handlers;
+    // A UI5 button builds the ARIA of its shadow <button> from this property; host attributes never
+    // reach it. `controls` is left out on purpose: the id would have to resolve from inside the shadow
+    // root, and an IDREF does not cross that boundary.
+    var accessibilityAttributes = (0, react_1.useMemo)(function () { return ({ hasPopup: 'menu', expanded: isOpen }); }, [isOpen]);
+    // UI5 reports the click on the root menu, submenus included, so the handler is looked up by key.
+    var handleItemClick = (0, react_1.useCallback)(function (e) {
+        var _a;
+        var entry = handlers.get(e.detail.item.dataset.itemKey);
+        if (!entry) {
+            return;
+        }
+        var item = entry.item, checkMode = entry.checkMode;
+        // Left alone, UI5 flips the mark itself and drifts away from the props. Cancelling the
+        // event takes both the mark and the closing back, at the cost of owning them here.
+        if (checkMode) {
+            e.preventDefault();
+        }
+        // A Multiple group is the one place where the menu stays open, so nothing has to wait.
+        if (checkMode === 'Multiple') {
+            (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, e);
+            return;
+        }
+        if (item.onClick) {
+            pendingClick.current = function () { return item.onClick(e); };
+        }
+        if (checkMode === 'Single') {
+            closeMenu();
+        }
+    }, [handlers, closeMenu]);
     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))));
+        react_1.default.createElement(ButtonComponent, __assign({ "data-reltio-id": "drop-down-menu-button", id: openerId, className: (0, classnames_1.default)((_b = {}, _b[DropDownMenuButton_module_css_1.default.open] = isOpen, _b), className), onClick: handleToggle, accessibilityAttributes: accessibilityAttributes }, buttonProps), buttonContent),
+        react_1.default.createElement(components_1.Menu, { id: menuId, open: isOpen, opener: openerId, onClose: handleMenuClose, onItemClick: handleItemClick, horizontalAlign: horizontalAlign }, children)));
 }