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

package/esm/ActionButton/styles.js

@@ -0,0 +1,54 @@
+import { makeStyles } from '@mui/styles';
+export var useStyles = makeStyles(function (theme) { return ({
+    button: {
+        whiteSpace: 'nowrap',
+        fontSize: '14px',
+        lineHeight: '16px',
+        letterSpacing: 0,
+        padding: '9px 16px 9px 12px',
+        '& svg g path, & svg path': {
+            fill: theme.palette.primary.main,
+            fillOpacity: 1
+        }
+    },
+    iconButton: {
+        '& svg g path, & svg path': {
+            fill: theme.palette.primary.main,
+            fillOpacity: 1
+        }
+    },
+    startIcon: {
+        marginLeft: 0,
+        marginRight: '8px',
+        width: '18px',
+        height: '18px',
+        alignItems: 'center'
+    },
+    overflowStyle: {
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis'
+    },
+    menuItem: {
+        whiteSpace: 'inherit',
+        minHeight: '28px',
+        padding: '2px 16px 2px 12px'
+    },
+    complexItem: {
+        padding: '9px 12px 7px'
+    },
+    textPrimary: {
+        color: theme.palette.text.primary,
+        fontSize: '13px',
+        lineHeight: '15px',
+        letterSpacing: 0
+    },
+    bold: {
+        fontWeight: 500
+    },
+    textSecondary: {
+        fontSize: 10,
+        lineHeight: '12px',
+        maxWidth: 176
+    }
+}); });

package/esm/ActionsPanel/ActionsPanel.d.ts

@@ -0,0 +1,16 @@
+import { Action } from './types';
+type Props = {
+    actions: Action[];
+    numberOfButtons?: number;
+    mode?: 'normal' | 'hover';
+    actionButtonSize?: string;
+    classes?: {
+        actionButton?: string;
+        moreOptions?: string;
+    };
+    onActionsMenuOpen?: () => void;
+    onActionsMenuClose?: () => void;
+    dataReltioId?: string;
+};
+export declare const ActionsPanel: ({ actions, numberOfButtons, mode, actionButtonSize, classes, onActionsMenuOpen, onActionsMenuClose, dataReltioId }: Props) => JSX.Element;
+export {};

package/esm/ActionsPanel/ActionsPanel.js

@@ -0,0 +1,48 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import i18n from 'ui-i18n';
+import { splitAt, pipe, propEq, map, omit, reject } from 'ramda';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import { SmallIconButtonWithTooltip } from '../SmallIconButton';
+import { DropDownMenuButton } from '../DropDownMenuButton';
+import { MenuItemRenderer } from './components/MenuItemRenderer';
+import { ActionButton as DefaultActionButton } from '../ActionButton';
+import { ActionButtonMode } from '../types';
+export var ActionsPanel = function (_a) {
+    var actions = _a.actions, _b = _a.numberOfButtons, numberOfButtons = _b === void 0 ? 2 : _b, _c = _a.mode, mode = _c === void 0 ? 'normal' : _c, actionButtonSize = _a.actionButtonSize, classes = _a.classes, onActionsMenuOpen = _a.onActionsMenuOpen, onActionsMenuClose = _a.onActionsMenuClose, dataReltioId = _a.dataReltioId;
+    var _d = pipe(reject(propEq('show', false)), map(omit(['show'])), splitAt(numberOfButtons))(actions), buttonActions = _d[0], menuActions = _d[1];
+    var buttonMode = mode === 'normal' ? ActionButtonMode.button : ActionButtonMode.iconButton;
+    var buttonSize = mode === 'normal' ? 'MPlus' : 'S';
+    return (React.createElement(React.Fragment, null,
+        buttonActions.map(function (_a, index) {
+            var _b = _a.ActionButton, ActionButton = _b === void 0 ? DefaultActionButton : _b, props = __rest(_a, ["ActionButton"]);
+            return (React.createElement(ActionButton, __assign({ key: index, mode: buttonMode, className: classes === null || classes === void 0 ? void 0 : classes.actionButton }, (actionButtonSize ? { size: actionButtonSize } : {}), props)));
+        }),
+        menuActions.length > 0 && (React.createElement(DropDownMenuButton, { buttonComponent: SmallIconButtonWithTooltip, buttonProps: {
+                icon: MoreVertIcon,
+                size: buttonSize,
+                tooltipTitle: i18n.text('More actions'),
+                'data-reltio-id': dataReltioId
+            }, className: classes === null || classes === void 0 ? void 0 : classes.moreOptions, menuId: "view-actions", menuItems: menuActions, onMenuOpen: onActionsMenuOpen, onMenuClose: onActionsMenuClose, MenuItemRenderer: MenuItemRenderer }))));
+};

package/esm/ActionsPanel/ActionsPanel.test.d.ts

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

package/esm/ActionsPanel/ActionsPanel.test.js

@@ -0,0 +1,80 @@
+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 { omit } from 'ramda';
+import { shallow } from 'enzyme';
+import { ActionsPanel } from './ActionsPanel';
+import { DropDownMenuButton } from '../DropDownMenuButton';
+describe('ActionsPanel tests', function () {
+    var MergeButton = function () { return React.createElement("div", null); };
+    var actions = [
+        { ActionButton: MergeButton, test: 'test', show: true },
+        { ActionButton: MergeButton, test: 'test 2' },
+        { ActionButton: MergeButton, test: 'test 3' },
+        { ActionButton: MergeButton, test: 'test 4', show: false }
+    ];
+    it('should render main parts', function () {
+        var component = shallow(React.createElement(ActionsPanel, { actions: actions }));
+        expect(component.find(MergeButton)).toHaveLength(2);
+        expect(component.find(DropDownMenuButton)).toHaveLength(1);
+    });
+    it('should render empty panel if actions is empty array', function () {
+        var component = shallow(React.createElement(ActionsPanel, { actions: [] }));
+        expect(component.find(MergeButton)).toHaveLength(0);
+        expect(component.find(DropDownMenuButton)).toHaveLength(0);
+    });
+    it('should not render DropDownMenuButton if length of actions <= numberOfButtons', function () {
+        var component = shallow(React.createElement(ActionsPanel, { actions: actions, numberOfButtons: actions.length }));
+        expect(component.find(MergeButton)).toHaveLength(3);
+        expect(component.find(DropDownMenuButton)).toHaveLength(0);
+    });
+    it('should render numberOfButtons action button from actions', function () {
+        var numberOfButtons = 1;
+        var component = shallow(React.createElement(ActionsPanel, { actions: actions, numberOfButtons: numberOfButtons }));
+        expect(component.find(MergeButton)).toHaveLength(numberOfButtons);
+        expect(component.find(DropDownMenuButton)).toHaveLength(1);
+    });
+    it('should render ActionButton with correct props if mode is normal', function () {
+        var onActionsMenuOpen = jest.fn();
+        var onActionsMenuClose = jest.fn();
+        var component = shallow(React.createElement(ActionsPanel, { actions: actions, mode: "normal", onActionsMenuOpen: onActionsMenuOpen, onActionsMenuClose: onActionsMenuClose }));
+        var buttons = component.find(MergeButton);
+        expect(buttons).toHaveLength(2);
+        buttons.map(function (button, index) {
+            expect(button.props()).toMatchObject(__assign({ mode: 'button' }, omit(['ActionButton', 'show'], actions[index])));
+        });
+        var dropDownMenuButton = component.find(DropDownMenuButton);
+        expect(dropDownMenuButton).toHaveLength(1);
+        expect(dropDownMenuButton.props()).toMatchObject({
+            menuItems: [actions[2]],
+            onMenuOpen: onActionsMenuOpen,
+            onMenuClose: onActionsMenuClose
+        });
+    });
+    it('should render ActionButton with correct props if mode is hover', function () {
+        var onActionsMenuOpen = jest.fn();
+        var onActionsMenuClose = jest.fn();
+        var component = shallow(React.createElement(ActionsPanel, { actions: actions, mode: "hover", onActionsMenuOpen: onActionsMenuOpen, onActionsMenuClose: onActionsMenuClose }));
+        var buttons = component.find(MergeButton);
+        expect(buttons).toHaveLength(2);
+        buttons.map(function (button, index) {
+            expect(button.props()).toMatchObject(__assign({ mode: 'iconButton' }, omit(['ActionButton', 'show'], actions[index])));
+        });
+        var dropDownMenuButton = component.find(DropDownMenuButton);
+        expect(dropDownMenuButton).toHaveLength(1);
+        expect(dropDownMenuButton.props()).toMatchObject({
+            menuItems: [actions[2]],
+            onMenuOpen: onActionsMenuOpen,
+            onMenuClose: onActionsMenuClose
+        });
+    });
+});

package/esm/ActionsPanel/components/MenuItemRenderer/MenuItemRenderer.d.ts

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

package/esm/ActionsPanel/components/MenuItemRenderer/MenuItemRenderer.js

@@ -0,0 +1,32 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { forwardRef } from 'react';
+import { identity } from 'ramda';
+import { ActionButtonMode } from '../../../types';
+import { ActionButton as DefaultActionButton } from '../../../ActionButton';
+export var MenuItemRenderer = forwardRef(function (_a, ref) {
+    var item = _a.item, _b = _a.onMenuClose, onMenuClose = _b === void 0 ? identity : _b;
+    var _c = item.ActionButton, ActionButton = _c === void 0 ? DefaultActionButton : _c, props = __rest(item, ["ActionButton"]);
+    return React.createElement(ActionButton, __assign({ ref: ref, mode: ActionButtonMode.menuItem, onMenuClose: onMenuClose }, props));
+});
+MenuItemRenderer.displayName = 'MenuItemRenderer';

package/esm/ActionsPanel/components/MenuItemRenderer/MenuItemRenderer.spec.d.ts

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

package/esm/ActionsPanel/components/MenuItemRenderer/MenuItemRenderer.spec.js

@@ -0,0 +1,73 @@
+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 };
+    }
+};
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MenuItemRenderer } from './MenuItemRenderer';
+describe('MenuItemRenderer tests', function () {
+    var ActionButton = function (_a) {
+        var mode = _a.mode, onMenuClose = _a.onMenuClose, testProp = _a.testProp;
+        return React.createElement("div", { "data-reltio-id": "action-button", "data-mode": mode, "data-test": testProp, onClick: onMenuClose });
+    };
+    var item = {
+        ActionButton: ActionButton,
+        show: true,
+        testProp: 'testProp'
+    };
+    it('should render main parts', function () {
+        render(React.createElement(MenuItemRenderer, { item: item }));
+        var button = screen.getByTestId('action-button');
+        expect(button).toBeInTheDocument();
+        expect(button).toHaveAttribute('data-mode', 'menuItem');
+        expect(button).toHaveAttribute('data-test', 'testProp');
+    });
+    it('should call onMenuClose on button click', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onMenuClose;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    onMenuClose = jest.fn();
+                    render(React.createElement(MenuItemRenderer, { item: item, onMenuClose: onMenuClose }));
+                    return [4 /*yield*/, userEvent.click(screen.getByTestId('action-button'))];
+                case 1:
+                    _a.sent();
+                    expect(onMenuClose).toHaveBeenCalled();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});

package/esm/ActionsPanel/components/MenuItemRenderer/index.d.ts

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

package/esm/ActionsPanel/components/MenuItemRenderer/index.js

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

package/esm/ActionsPanel/index.d.ts

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

package/esm/ActionsPanel/index.js

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

package/esm/ActionsPanel/types.d.ts

@@ -0,0 +1,5 @@
+export type Action = {
+    ActionButton?: (props: any) => JSX.Element;
+    show?: boolean;
+    [key: string]: unknown;
+};

package/esm/ActionsPanel/types.js

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

package/esm/ArrowExpandButton/ArrowExpandButton.d.ts

@@ -0,0 +1,7 @@
+import { IconButtonProps } from '@mui/material/IconButton';
+type Props = {
+    expanded: boolean;
+    className?: string;
+} & Omit<IconButtonProps, 'size'>;
+export declare const ArrowExpandButton: (props: Props) => JSX.Element;
+export {};

package/esm/ArrowExpandButton/ArrowExpandButton.js

@@ -0,0 +1,33 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import classnames from 'classnames';
+import ArrowRight from '@mui/icons-material/ArrowRight';
+import { SmallIconButton } from '../SmallIconButton';
+import { useStyles } from './styles';
+export var ArrowExpandButton = function (props) {
+    var _a;
+    var styles = useStyles();
+    var expanded = props.expanded, className = props.className, otherProps = __rest(props, ["expanded", "className"]);
+    return (React.createElement(SmallIconButton, __assign({ icon: ArrowRight, size: "XXS", disableRipple: true, iconClassName: classnames(styles.expandIcon, (_a = {}, _a[styles.expanded] = expanded, _a)), className: classnames(className, styles.expandButton), "data-reltio-id": "arrow-expand-button" }, otherProps)));
+};

package/esm/ArrowExpandButton/index.d.ts

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

package/esm/ArrowExpandButton/index.js

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

package/esm/AttributeGroupIcon/AttributeGroupIcon.d.ts

@@ -0,0 +1,10 @@
+import { Metadata } from '@reltio/mdm-sdk';
+type Props = {
+    group: {
+        id: string;
+        title: string;
+    };
+    metadata: Metadata;
+};
+export declare const AttributeGroupIcon: ({ group, metadata }: Props) => JSX.Element;
+export {};

package/esm/AttributeGroupIcon/AttributeGroupIcon.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { getAbsoluteImageUrl, getEntityTypeGraphIcon } from '@reltio/mdm-sdk';
+import { AvatarWithFallback } from '../AvatarWithFallback';
+import { useMdmAbsoluteImagePath } from '../contexts/MdmModuleContext';
+import { useStyles } from './styles';
+export var AttributeGroupIcon = function (_a) {
+    var group = _a.group, metadata = _a.metadata;
+    var styles = useStyles();
+    var absoluteImagePath = useMdmAbsoluteImagePath();
+    var entityTypeGraphIcon = getEntityTypeGraphIcon(metadata, { type: group.id });
+    var absoluteImageUrl = getAbsoluteImageUrl(absoluteImagePath, entityTypeGraphIcon);
+    return React.createElement(AvatarWithFallback, { className: styles.icon, icon: absoluteImageUrl, avatarText: group.title[0] });
+};

package/esm/AttributeGroupIcon/AttributeGroupIcon.spec.d.ts

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

package/esm/AttributeGroupIcon/AttributeGroupIcon.spec.js

@@ -0,0 +1,51 @@
+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 { render, screen } from '@testing-library/react';
+import { AttributeGroupIcon } from './AttributeGroupIcon';
+import { MdmModuleProvider } from '../contexts/MdmModuleContext';
+describe('AttributeGroupIcon tests', function () {
+    var absoluteImagePath = 'https://s3.amazonaws.com/reltio.images/api';
+    var setUp = function (props) {
+        var Providers = function (_a) {
+            var children = _a.children;
+            return (React.createElement(MdmModuleProvider, { values: { absoluteImagePath: absoluteImagePath } }, children));
+        };
+        return render(React.createElement(AttributeGroupIcon, __assign({}, props)), { wrapper: Providers });
+    };
+    it('should render AvatarWithFallback with first letter of title', function () {
+        var group = { id: 'group', title: 'Entity type' };
+        var metadata = { entityTypes: [] };
+        setUp({ group: group, metadata: metadata });
+        screen.getByText('E');
+        expect(screen.queryByRole('img')).not.toBeInTheDocument();
+    });
+    it('should render AvatarWithFallback with icon if icon exists', function () {
+        var entityTypeUri = 'configuration/entityTypes/EntityType1';
+        var typeGraphIcon = 'images/graphIcon/entity-type-icon.png';
+        var metadata = {
+            entityTypes: [
+                {
+                    attributes: [],
+                    uri: entityTypeUri,
+                    typeGraphIcon: typeGraphIcon
+                }
+            ]
+        };
+        var group = {
+            id: entityTypeUri,
+            title: 'Icon Entity type'
+        };
+        setUp({ group: group, metadata: metadata });
+        expect(screen.getByRole('img')).toHaveAttribute('src', "".concat(absoluteImagePath, "/").concat(typeGraphIcon));
+    });
+});

package/esm/AttributeGroupIcon/index.d.ts

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

package/esm/AttributeGroupIcon/index.js

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

package/esm/AttributeListItem/AttributeListItem.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import { AttributeType } from '@reltio/mdm-sdk';
+import { MenuItemProps } from '@mui/material/MenuItem';
+export declare const RecommendedIconWithTooltip: React.ForwardRefExoticComponent<Pick<{
+    tooltipTitle?: React.ReactNode;
+    tooltipPlacement?: "bottom" | "left" | "right" | "top" | "bottom-end" | "bottom-start" | "left-end" | "left-start" | "right-end" | "right-start" | "top-end" | "top-start";
+    showForDisabled?: boolean;
+} & React.SVGProps<SVGSVGElement>, "string" | "clipPath" | "color" | "cursor" | "direction" | "display" | "filter" | "fontFamily" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "fontWeight" | "height" | "imageRendering" | "letterSpacing" | "opacity" | "order" | "paintOrder" | "pointerEvents" | "rotate" | "scale" | "textRendering" | "transform" | "unicodeBidi" | "visibility" | "width" | "wordSpacing" | "writingMode" | "mask" | "offset" | "overflow" | "textDecoration" | "azimuth" | "clip" | "alignmentBaseline" | "baselineShift" | "clipRule" | "colorInterpolation" | "colorRendering" | "dominantBaseline" | "fill" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "glyphOrientationVertical" | "lightingColor" | "markerEnd" | "markerMid" | "markerStart" | "shapeRendering" | "stopColor" | "stopOpacity" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "vectorEffect" | "end" | "accumulate" | "local" | "style" | "unicode" | "x" | "y" | "alphabetic" | "hanging" | "ideographic" | "mathematical" | "className" | "id" | "lang" | "tabIndex" | "role" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | keyof {
+    tooltipTitle?: React.ReactNode;
+    tooltipPlacement?: "bottom" | "left" | "right" | "top" | "bottom-end" | "bottom-start" | "left-end" | "left-start" | "right-end" | "right-start" | "top-end" | "top-start";
+    showForDisabled?: boolean;
+} | "path" | "key" | "name" | "values" | "viewBox" | "max" | "media" | "method" | "min" | "target" | "type" | "crossOrigin" | "accentHeight" | "additive" | "allowReorder" | "amplitude" | "arabicForm" | "ascent" | "attributeName" | "attributeType" | "autoReverse" | "baseFrequency" | "baseProfile" | "bbox" | "begin" | "bias" | "by" | "calcMode" | "capHeight" | "clipPathUnits" | "colorInterpolationFilters" | "colorProfile" | "contentScriptType" | "contentStyleType" | "cx" | "cy" | "d" | "decelerate" | "descent" | "diffuseConstant" | "divisor" | "dur" | "dx" | "dy" | "edgeMode" | "elevation" | "enableBackground" | "exponent" | "externalResourcesRequired" | "filterRes" | "filterUnits" | "focusable" | "format" | "from" | "fx" | "fy" | "g1" | "g2" | "glyphName" | "glyphOrientationHorizontal" | "glyphRef" | "gradientTransform" | "gradientUnits" | "horizAdvX" | "horizOriginX" | "href" | "in2" | "in" | "intercept" | "k1" | "k2" | "k3" | "k4" | "k" | "kernelMatrix" | "kernelUnitLength" | "kerning" | "keyPoints" | "keySplines" | "keyTimes" | "lengthAdjust" | "limitingConeAngle" | "markerHeight" | "markerUnits" | "markerWidth" | "maskContentUnits" | "maskUnits" | "mode" | "numOctaves" | "operator" | "orient" | "orientation" | "origin" | "overlinePosition" | "overlineThickness" | "panose1" | "pathLength" | "patternContentUnits" | "patternTransform" | "patternUnits" | "points" | "pointsAtX" | "pointsAtY" | "pointsAtZ" | "preserveAlpha" | "preserveAspectRatio" | "primitiveUnits" | "r" | "radius" | "refX" | "refY" | "renderingIntent" | "repeatCount" | "repeatDur" | "requiredExtensions" | "requiredFeatures" | "restart" | "result" | "rx" | "ry" | "seed" | "slope" | "spacing" | "specularConstant" | "specularExponent" | "speed" | "spreadMethod" | "startOffset" | "stdDeviation" | "stemh" | "stemv" | "stitchTiles" | "strikethroughPosition" | "strikethroughThickness" | "surfaceScale" | "systemLanguage" | "tableValues" | "targetX" | "targetY" | "textLength" | "to" | "u1" | "u2" | "underlinePosition" | "underlineThickness" | "unicodeRange" | "unitsPerEm" | "vAlphabetic" | "version" | "vertAdvY" | "vertOriginX" | "vertOriginY" | "vHanging" | "vIdeographic" | "viewTarget" | "vMathematical" | "widths" | "x1" | "x2" | "xChannelSelector" | "xHeight" | "xlinkActuate" | "xlinkArcrole" | "xlinkHref" | "xlinkRole" | "xlinkShow" | "xlinkTitle" | "xlinkType" | "xmlBase" | "xmlLang" | "xmlns" | "xmlnsXlink" | "xmlSpace" | "y1" | "y2" | "yChannelSelector" | "z" | "zoomAndPan"> & React.RefAttributes<HTMLElement>>;
+type Data = {
+    attrType?: AttributeType;
+};
+type Props = {
+    data: Data;
+    checked: boolean;
+    label: React.ReactNode;
+    labelInText?: string;
+    level?: number;
+    isFocused?: boolean;
+    isRequired?: boolean;
+    hideIcon?: boolean;
+    hideCheckBox?: boolean;
+    notSelectable?: boolean;
+    disableHorizontalScrollbar?: boolean;
+    onClick?: (data: Data, checked: boolean, groupId: string) => void;
+    subItemMargin?: number;
+    groupId?: string;
+    style?: MenuItemProps['style'];
+    LogoIcon?: React.ElementType;
+    className?: string;
+    disableNonSelectable?: boolean;
+    disableGutters?: boolean;
+};
+declare const _default: React.MemoExoticComponent<{
+    ({ groupId, data, checked, isFocused, isRequired, label, labelInText, level, onClick, hideCheckBox, hideIcon, notSelectable, disableHorizontalScrollbar, style, subItemMargin, LogoIcon, className, disableNonSelectable, disableGutters }: Props): JSX.Element;
+    defaultName: string;
+}>;
+export default _default;

package/esm/AttributeListItem/AttributeListItem.js

@@ -0,0 +1,45 @@
+import React, { memo } from 'react';
+import classnames from 'classnames';
+import i18n from 'ui-i18n';
+import { noop } from '../core';
+import { isNested } from '@reltio/mdm-sdk';
+import ListItemText from '@mui/material/ListItemText';
+import Checkbox from '@mui/material/Checkbox';
+import MenuItem from '@mui/material/MenuItem';
+import RecommendedIcon from '../icons/Recommended';
+import { AttrTypeIcon } from './components/AttrTypeIcon';
+import RequiredMark from '../components/RequiredMark/RequiredMark';
+import Marginator from '../components/Marginator/Marginator';
+import { ExpandedValueTooltip } from '../ExpandedValueTooltip';
+import { withTooltip } from '../HOCs/withTooltip';
+import { useStyles } from './styles';
+export var RecommendedIconWithTooltip = withTooltip(RecommendedIcon);
+var AttributeListItem = function (_a) {
+    var _b, _c, _d;
+    var groupId = _a.groupId, data = _a.data, _e = _a.checked, checked = _e === void 0 ? false : _e, _f = _a.isFocused, isFocused = _f === void 0 ? false : _f, _g = _a.isRequired, isRequired = _g === void 0 ? false : _g, label = _a.label, labelInText = _a.labelInText, level = _a.level, _h = _a.onClick, onClick = _h === void 0 ? noop : _h, _j = _a.hideCheckBox, hideCheckBox = _j === void 0 ? false : _j, _k = _a.hideIcon, hideIcon = _k === void 0 ? false : _k, _l = _a.notSelectable, notSelectable = _l === void 0 ? false : _l, _m = _a.disableHorizontalScrollbar, disableHorizontalScrollbar = _m === void 0 ? false : _m, _o = _a.style, style = _o === void 0 ? {} : _o, _p = _a.subItemMargin, subItemMargin = _p === void 0 ? 20 : _p, LogoIcon = _a.LogoIcon, className = _a.className, disableNonSelectable = _a.disableNonSelectable, disableGutters = _a.disableGutters;
+    var styles = useStyles();
+    var attrType = (data || {}).attrType;
+    var isButton = (!hideCheckBox || !isNested(attrType)) && !notSelectable;
+    var handleItemClick = function () { return onClick(data, !checked, groupId); };
+    var showLogoIcon = !!LogoIcon;
+    var renderIcon = function (attrType) {
+        return groupId === 'recommended' ? (React.createElement(RecommendedIconWithTooltip, { className: styles.recommendedIcon, tooltipTitle: i18n.text('Recommended'), showForDisabled: true })) : (React.createElement(AttrTypeIcon, { attrType: attrType }));
+    };
+    return (React.createElement(ExpandedValueTooltip, { value: labelInText || label, className: styles.itemTooltip, placement: "bottom-end" },
+        React.createElement(MenuItem, { className: classnames(styles.container, styles.listItem, (_b = {}, _b[styles.defaultCursor] = !isButton, _b), className), onClick: isButton ? handleItemClick : undefined, style: style, dense: true, disabled: disableNonSelectable && notSelectable, classes: {
+                focusVisible: styles.listItemFocus,
+                selected: styles.listItemFocus
+            }, selected: isFocused, tabIndex: -1, disableGutters: disableGutters },
+            !hideCheckBox && (React.createElement(Checkbox, { checked: checked, disableRipple: true, disabled: !isButton, className: classnames(styles.checkbox, (_c = {}, _c[styles.checked] = checked, _c)), tabIndex: -1 })),
+            React.createElement(Marginator, { margin: subItemMargin, level: level, className: styles.marginWrapper },
+                React.createElement(React.Fragment, null,
+                    !hideIcon && renderIcon(attrType),
+                    React.createElement("div", { className: classnames(styles.itemTextWrapper, (_d = {}, _d[styles.marginText] = hideIcon, _d)) },
+                        showLogoIcon && React.createElement(LogoIcon, { className: styles.logoIcon }),
+                        React.createElement(ListItemText, { primary: React.createElement(React.Fragment, null,
+                                label,
+                                isRequired && React.createElement(RequiredMark, null)), className: styles.itemText })))),
+            isButton && disableHorizontalScrollbar && React.createElement("div", { className: styles.itemAfter }))));
+};
+AttributeListItem.defaultName = 'AttributeListItem';
+export default memo(AttributeListItem);

package/esm/AttributeListItem/AttributeListItem.spec.d.ts

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