@reltio/components 1.4.1584 → 1.4.1586-mui5

package/public/esm/components/ConnectionEditor/ConnectionEditor.js

@@ -0,0 +1,92 @@
+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 { useStyles } from './styles';
+import { useDidUpdateEffect } from '../../hooks';
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { useSelector } from 'react-redux';
+import mdmModule from '@reltio/mdm-module';
+import { Directions, getActivenessAttributes, getSuitableEntityTypeUrisForRelationTypes, getDefaultRelationTypeObject, getLabel, getRelationAttributesList, getRelationType, isAvailableRelationBetweenEntities, ModeTypes } from '@reltio/mdm-sdk';
+import AttributesList from '../attributes/editMode/AttributesList';
+import classnames from 'classnames';
+import { uniq } from 'ramda';
+import ConnectionRelationTypeSelector from '../ConnectionRelationTypeSelector/ConnectionRelationTypeSelector';
+import ErrorWrapper from '../ErrorWrapper/ErrorWrapper';
+import EntitySelector from '../attributes/editMode/EntitySelector/EntitySelector';
+export var ConnectionEditor = function (_a) {
+    var _b;
+    var connection = _a.connection, relatedEntity = _a.relatedEntity, _c = _a.inRelationTypes, inRelationTypes = _c === void 0 ? [] : _c, _d = _a.outRelationTypes, outRelationTypes = _d === void 0 ? [] : _d, showEmptyEditors = _a.showEmptyEditors, entityErrorMessage = _a.entityErrorMessage, onChangeAttribute = _a.onChangeAttribute, onRemoveAttribute = _a.onRemoveAttribute, onAddAttributes = _a.onAddAttributes, onChangeRelationType = _a.onChangeRelationType, onChangeEntity = _a.onChangeEntity;
+    var styles = useStyles();
+    var relation = connection.relation, entity = connection.entity;
+    var _e = relation || {}, attributes = _e.attributes, relationUri = _e.uri, _f = _e.type, relationTypeUri = _f === void 0 ? '' : _f, direction = _e.direction;
+    var isRelationTypeSelected = Boolean(relationTypeUri);
+    var metadata = useSelector(mdmModule.selectors.getMetadata);
+    var attributeListEntity = useMemo(function () {
+        return relation && __assign({ attributes: attributes }, getActivenessAttributes(relation));
+    }, [relation, attributes]);
+    var relationAttrTypes = useMemo(function () { return getRelationAttributesList(metadata, relationTypeUri); }, [relationTypeUri, metadata]);
+    var availableEntityTypeUris = useMemo(function () {
+        return isRelationTypeSelected
+            ? getSuitableEntityTypeUrisForRelationTypes(direction === Directions.OUT, metadata, [
+                getRelationType(metadata, relationTypeUri)
+            ])
+            : uniq(getSuitableEntityTypeUrisForRelationTypes(true, metadata, outRelationTypes).concat(getSuitableEntityTypeUrisForRelationTypes(false, metadata, inRelationTypes)));
+    }, [isRelationTypeSelected, relationTypeUri, metadata, inRelationTypes, outRelationTypes]);
+    var globalSearchRequestOptions = useSelector(function (state) {
+        return mdmModule.selectors.getGlobalSearchRequestOptions(state, ['ovOnly']);
+    });
+    var selectorCompatibleRelation = useMemo(function () {
+        return relation && {
+            relationType: relation.type,
+            direction: relation.direction
+        };
+    }, [relation]);
+    var selectorCompatibleEntity = useMemo(function () {
+        return entity && {
+            entityUri: entity.uri,
+            entityType: entity.type,
+            entityLabel: getLabel(entity.label)
+        };
+    }, [entity]);
+    var availableInRelationTypes = useMemo(function () {
+        return entity && entity.uri
+            ? inRelationTypes.filter(isAvailableRelationBetweenEntities(false, entity, relatedEntity, metadata))
+            : inRelationTypes;
+    }, [entity, inRelationTypes, relatedEntity, metadata]);
+    var availableOutRelationTypes = useMemo(function () {
+        return entity && entity.uri
+            ? outRelationTypes.filter(isAvailableRelationBetweenEntities(true, entity, relatedEntity, metadata))
+            : outRelationTypes;
+    }, [entity, outRelationTypes, relatedEntity, metadata]);
+    useEffect(function () {
+        // autoselecting relation type on mount
+        var _a = getDefaultRelationTypeObject(inRelationTypes, outRelationTypes) || {}, type = _a.type, direction = _a.direction;
+        if (!relationTypeUri && type && onChangeRelationType) {
+            onChangeRelationType({ type: type.uri, direction: direction });
+        }
+    }, [relationTypeUri, inRelationTypes, outRelationTypes, onChangeRelationType]);
+    useDidUpdateEffect(function () {
+        // autoselecting relation type on entity change
+        var _a = getDefaultRelationTypeObject(availableInRelationTypes, availableOutRelationTypes) || {}, type = _a.type, direction = _a.direction;
+        if (!relationTypeUri && type) {
+            onChangeRelationType({ type: type.uri, direction: direction });
+        }
+    }, [relationTypeUri, entity, availableInRelationTypes, availableOutRelationTypes, onChangeEntity]);
+    var handleChangeRelationType = useCallback(function (_a) {
+        var type = _a.type, direction = _a.direction;
+        onChangeRelationType({ type: type.uri, direction: direction });
+    }, [onChangeRelationType]);
+    return (React.createElement(React.Fragment, null,
+        onChangeRelationType && (React.createElement(ConnectionRelationTypeSelector, { className: styles.item, relation: selectorCompatibleRelation, metadata: metadata, inRelationTypes: inRelationTypes, outRelationTypes: outRelationTypes, onChange: handleChangeRelationType })),
+        onChangeEntity && (React.createElement(ErrorWrapper, { errorMessage: entityErrorMessage, className: styles.item },
+            React.createElement(EntitySelector, { key: relationTypeUri, className: classnames((_b = {}, _b[styles.dense] = entityErrorMessage, _b)), entity: selectorCompatibleEntity || {}, entityTypesUris: availableEntityTypeUris, max: 20, globalSearchRequestOptions: globalSearchRequestOptions, mode: ModeTypes.EDITING, onChange: onChangeEntity, onCreate: undefined, metadata: metadata, attributeTypesSelectionStrategy: undefined }))),
+        relationTypeUri && (React.createElement(AttributesList, { attrTypes: relationAttrTypes, entity: attributeListEntity, showEmptyEditors: showEmptyEditors, mode: ModeTypes.EDITING, parentUri: relationUri, onAddAttributes: onAddAttributes, onChangeAttribute: onChangeAttribute, onDeleteAttribute: onRemoveAttribute }))));
+};

package/public/esm/components/ConnectionEditor/styles.d.ts

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

package/public/esm/components/ConnectionEditor/styles.js

@@ -0,0 +1,9 @@
+import { makeStyles } from '@mui/styles';
+export var useStyles = makeStyles({
+    item: {
+        marginBottom: '16px'
+    },
+    dense: {
+        marginBottom: 0
+    }
+});

package/public/esm/components/ConnectionRelationTypeSelector/ConnectionRelationTypeSelector.js

@@ -0,0 +1,56 @@
+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, { useMemo, useCallback, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { ConnectionRelationType, RelationTypeType } from '@reltio/mdm-sdk';
+import { identity, pipe } from 'ramda';
+import { useRelationTypeSelector } from '../../hooks';
+import RelationTypeSelector from '../attributes/editMode/RelationTypeSelector/RelationTypeSelector';
+var ConnectionRelationTypeSelector = function (_a) {
+    var _b = _a.relation, relation = _b === void 0 ? {} : _b, _c = _a.inRelationTypes, inRelationTypes = _c === void 0 ? [] : _c, _d = _a.outRelationTypes, outRelationTypes = _d === void 0 ? [] : _d, _e = _a.onChange, onChange = _e === void 0 ? identity : _e, _f = _a.applyFirstByDefault, applyFirstByDefault = _f === void 0 ? false : _f, _g = _a.reversedContextLabels, reversedContextLabels = _g === void 0 ? false : _g, otherProps = __rest(_a, ["relation", "inRelationTypes", "outRelationTypes", "onChange", "applyFirstByDefault", "reversedContextLabels"]);
+    var _h = useRelationTypeSelector({ reversedContextLabels: reversedContextLabels }), getRelationTypesOptions = _h.getRelationTypesOptions, fromEditorValue = _h.fromEditorValue, toEditorValue = _h.toEditorValue;
+    var relationsTypesOptions = useMemo(function () { return getRelationTypesOptions(inRelationTypes, outRelationTypes); }, [getRelationTypesOptions, inRelationTypes, outRelationTypes]);
+    var handleChange = useCallback(pipe(fromEditorValue(inRelationTypes, outRelationTypes), onChange), [
+        fromEditorValue,
+        inRelationTypes,
+        outRelationTypes,
+        onChange
+    ]);
+    var hasValue = !!relation.relationType;
+    useEffect(function () {
+        if (applyFirstByDefault && relationsTypesOptions.length && !hasValue) {
+            handleChange(relationsTypesOptions[0]);
+        }
+    }, [relationsTypesOptions, applyFirstByDefault, handleChange, hasValue]);
+    return (React.createElement(RelationTypeSelector, __assign({ value: toEditorValue(relation, relationsTypesOptions), options: relationsTypesOptions, onChange: handleChange }, otherProps)));
+};
+ConnectionRelationTypeSelector.propTypes = {
+    className: PropTypes.string,
+    relation: ConnectionRelationType,
+    inRelationTypes: PropTypes.arrayOf(RelationTypeType),
+    outRelationTypes: PropTypes.arrayOf(RelationTypeType),
+    applyFirstByDefault: PropTypes.bool,
+    reversedContextLabels: PropTypes.bool,
+    onChange: PropTypes.func
+};
+export default ConnectionRelationTypeSelector;

package/public/esm/components/DataTenantBadge/DataTenantBadge.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import classnames from 'classnames';
+import { useSelector } from 'react-redux';
+import { propEq, toUpper, slice, pipe, defaultTo, find, propOr, startsWith, ifElse } from 'ramda';
+import mdmModule from '@reltio/mdm-module';
+import Typography from '@mui/material/Typography';
+import Tooltip from '@mui/material/Tooltip';
+import { useStyles } from './styles';
+var addDataTenantPrefix = function (label) { return "DT:".concat(slice(0, 1, label)); };
+export var DataTenantBadge = function (_a) {
+    var dataTenantId = _a.dataTenantId, className = _a.className;
+    var styles = useStyles({ dataTenantId: dataTenantId });
+    var dataTenants = useSelector(mdmModule.selectors.getDataTenants);
+    var dataTenant = pipe(defaultTo([]), find(propEq('id', dataTenantId)))(dataTenants);
+    var label = pipe(propOr('', 'label'), toUpper, ifElse(startsWith('DT:'), slice(0, 4), addDataTenantPrefix))(dataTenant);
+    var content = (React.createElement("div", { className: classnames(styles.root, className) },
+        React.createElement(Typography, { variant: "body2" }, label)));
+    var showTooltip = !!(dataTenant === null || dataTenant === void 0 ? void 0 : dataTenant.label);
+    return showTooltip ? React.createElement(Tooltip, { title: dataTenant.label }, content) : content;
+};

package/public/esm/components/DataTenantBadge/styles.d.ts

@@ -0,0 +1,5 @@
+type Props = {
+    dataTenantId: string;
+};
+export declare const useStyles: (props: Props) => import("@mui/styles").ClassNameMap<"root">;
+export {};

package/public/esm/components/DataTenantBadge/styles.js

@@ -0,0 +1,15 @@
+import { makeStyles } from '@mui/styles';
+import { getFontColor, getTenantIconColor } from '@reltio/mdm-sdk';
+export var useStyles = makeStyles({
+    root: function (_a) {
+        var dataTenantId = _a.dataTenantId;
+        var backgroundColor = getTenantIconColor(dataTenantId);
+        var color = getFontColor(backgroundColor);
+        return {
+            backgroundColor: backgroundColor,
+            color: color,
+            height: '18px',
+            padding: '0 3px'
+        };
+    }
+});

package/public/esm/components/DataTypeValue/DataTypeValue.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import moment from 'moment';
+import mdm from '@reltio/mdm-module';
+import { formatDataTypeValue, isAttributeValueLink, addProtocolToLink } from '@reltio/mdm-sdk';
+import { useSelector } from 'react-redux';
+import Link from '@mui/material/Link';
+import SearchHighlighter from '../SearchHighlighter/SearchHighlighter';
+var DataTypeValue = function (_a) {
+    var _b = _a.value, value = _b === void 0 ? null : _b, dataTypeDefinition = _a.dataTypeDefinition, _c = _a.rich, rich = _c === void 0 ? true : _c;
+    var attributePresentations = useSelector(mdm.selectors.getAttributePresentations);
+    var localeDateFormat = moment.localeData().longDateFormat('L');
+    var localeTimeFormat = moment.localeData().longDateFormat('LTS');
+    var dateMask = useSelector(mdm.selectors.getDateMask) || localeDateFormat;
+    var dateTimeMask = useSelector(mdm.selectors.getDateTimeMask) || localeDateFormat + ' ' + localeTimeFormat;
+    var formattedValue = formatDataTypeValue({ attributePresentations: attributePresentations, dataTypeDefinition: dataTypeDefinition, dateMask: dateMask, dateTimeMask: dateTimeMask }, value);
+    return rich && isAttributeValueLink(dataTypeDefinition, value) ? (React.createElement(Link, { target: "_blank", href: addProtocolToLink(formattedValue), underline: "none" },
+        React.createElement(SearchHighlighter, { text: formattedValue }))) : (React.createElement(SearchHighlighter, { text: formattedValue }));
+};
+DataTypeValue.propTypes = {
+    value: PropTypes.any,
+    dataTypeDefinition: PropTypes.object,
+    rich: PropTypes.bool
+};
+export default DataTypeValue;

package/public/esm/components/DateIntervalSelector/DateIntervalSelector.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { pipe } from 'ramda';
+import { getIntervalUnitLabel } from '@reltio/mdm-sdk';
+import TextField from '@mui/material/TextField';
+import SimpleDropDownSelector from '../SimpleDropDownSelector/SimpleDropDownSelector';
+import { getValue } from '../../core/utils';
+import { useStyles } from './styles';
+import { capitalize } from '@mui/material/utils';
+var periods = ['minutes', 'hours', 'days', 'weeks', 'months', 'years'];
+var DateIntervalSelector = function (_a) {
+    var _b = _a.interval, value = _b[0], unit = _b[1], onChange = _a.onChange, onFocus = _a.onFocus;
+    var styles = useStyles();
+    var getIntervalFromValue = function (newValue) { return [newValue, unit]; };
+    var getIntervalFromUnit = function (_a) {
+        var newUnit = _a.value;
+        return [value, newUnit];
+    };
+    var onNumberChange = pipe(getValue, parseInt, getIntervalFromValue, onChange);
+    var onUnitChange = pipe(getIntervalFromUnit, onChange);
+    return (React.createElement("div", { className: styles.root },
+        React.createElement(TextField, { variant: "standard", type: "number", value: value || '', onChange: onNumberChange, inputProps: { min: 1, onFocus: onFocus }, InputProps: { classes: { root: styles.input } }, className: styles.inputNumber }),
+        React.createElement(SimpleDropDownSelector, { label: '', placeholder: capitalize(unit), className: styles.inputUnit, value: { value: unit, label: capitalize(getIntervalUnitLabel(unit)) }, options: periods.map(function (value) { return ({
+                value: value,
+                label: capitalize(getIntervalUnitLabel(value))
+            }); }), onChange: onUnitChange, TextFieldProps: {
+                inputProps: { onFocus: onFocus },
+                InputProps: { classes: { root: styles.input } }
+            } })));
+};
+export default DateIntervalSelector;

package/public/esm/components/DateIntervalSelector/styles.d.ts

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

package/public/esm/components/DateIntervalSelector/styles.js

@@ -0,0 +1,22 @@
+import { makeStyles } from '@mui/styles';
+export var useStyles = makeStyles({
+    root: {
+        display: 'flex',
+        flex: 1
+    },
+    input: {
+        height: '100%',
+        paddingLeft: '12px',
+        paddingRight: '8px',
+        fontSize: '14px'
+    },
+    inputNumber: {
+        minWidth: '60px',
+        marginRight: 10,
+        height: '100%',
+        backgroundColor: 'rgba(0, 0, 0, 0.03)'
+    },
+    inputUnit: {
+        width: '100%'
+    }
+});

package/public/esm/components/DateRangePicker/DateRangePicker.js

@@ -0,0 +1,70 @@
+import React, { forwardRef, useRef, useState } from 'react';
+import i18n from 'ui-i18n';
+import { nanoid } from 'nanoid';
+import { pathOr } from 'ramda';
+import ArrowBack from '@mui/icons-material/ArrowBack';
+import Button from '@mui/material/Button';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import SmallIconButton from '../SmallIconButton/SmallIconButton';
+import { DataTypes } from '@reltio/mdm-sdk';
+import TimestampEditor from '../editors/TimestampEditor/TimestampEditor';
+import DateEditor from '../editors/DateEditor/DateEditor';
+import { useStyles } from './styles';
+var START_DATE = 0;
+var END_DATE = 1;
+var getDate = function (values, index) { return pathOr(null, [index], values); };
+var DateRangePicker = forwardRef(function (_a, ref) {
+    var onCancel = _a.onCancel, onApply = _a.onApply, values = _a.values, type = _a.type, minDate = _a.minDate, maxDate = _a.maxDate;
+    var styles = useStyles();
+    var editorFromId = useRef(nanoid());
+    var editorToId = useRef(nanoid());
+    var _b = useState(null), startDate = _b[0], setStartDate = _b[1];
+    var _c = useState(null), endDate = _c[0], setEndDate = _c[1];
+    React.useEffect(function () {
+        setStartDate(getDate(values, START_DATE));
+        setEndDate(getDate(values, END_DATE));
+    }, [values]);
+    var ComponentEditor = type === DataTypes.TYPE_TIMESTAMP ? TimestampEditor : DateEditor;
+    var headerTitle = type === DataTypes.TYPE_TIMESTAMP ? i18n.text('Pick date and time') : i18n.text('Pick date');
+    var selectStartDateHandler = function (value) {
+        setStartDate(value);
+    };
+    var selectEndDateHandler = function (value) {
+        setEndDate(value);
+    };
+    var onUpdate = function () {
+        if (startDate && endDate && startDate > endDate) {
+            onApply([endDate, startDate]);
+        }
+        else {
+            onApply([startDate, endDate]);
+        }
+    };
+    var onTabStopPropagation = function (e) { return e.key === 'Tab' && e.stopPropagation(); };
+    return (React.createElement("div", { className: styles.container, ref: ref, onKeyDown: onTabStopPropagation },
+        React.createElement(Toolbar, { disableGutters: true, classes: { root: styles.header } },
+            React.createElement(SmallIconButton, { size: "L", icon: ArrowBack, onClick: onCancel }),
+            React.createElement(Typography, { className: styles.title }, headerTitle)),
+        React.createElement("div", { className: styles.dateRangeContainer },
+            React.createElement(ComponentEditor, { slotProps: {
+                    textField: {
+                        id: editorFromId.current,
+                        variant: 'filled',
+                        size: 'small',
+                        className: styles.dateInput
+                    }
+                }, label: i18n.text('From'), value: startDate, onChange: selectStartDateHandler, minDate: minDate, maxDate: maxDate }),
+            React.createElement(ComponentEditor, { slotProps: {
+                    textField: {
+                        id: editorToId.current,
+                        variant: 'filled',
+                        size: 'small',
+                        className: styles.dateInput
+                    }
+                }, label: i18n.text('To'), value: endDate, onChange: selectEndDateHandler, minDate: minDate, maxDate: maxDate })),
+        React.createElement("div", { className: styles.actionButtons },
+            React.createElement(Button, { color: "primary", onClick: onUpdate, className: styles.button }, i18n.text('Update')))));
+});
+DateRangePicker.displayName = 'DateRangePicker';
+export default DateRangePicker;

package/public/esm/components/DateRangePicker/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"container" | "button" | "title" | "header" | "dateRangeContainer" | "dateInput" | "actionButtons">;

package/public/esm/components/DateRangePicker/styles.js

@@ -0,0 +1,40 @@
+import { makeStyles } from '@mui/styles';
+export var useStyles = makeStyles(function (theme) { return ({
+    container: {
+        display: 'flex',
+        flexDirection: 'column',
+        minHeight: '182px'
+    },
+    header: {
+        display: 'flex',
+        paddingLeft: '10px',
+        backgroundColor: '#FFFFFF'
+    },
+    title: {
+        marginLeft: '10px',
+        color: theme.palette.text.primary,
+        fontSize: '20px',
+        fontWeight: 500,
+        letterSpacing: '0.25px',
+        lineHeight: '24px'
+    },
+    dateRangeContainer: {
+        display: 'flex',
+        flexGrow: 1,
+        whiteSpace: 'nowrap',
+        cursor: 'default',
+        paddingTop: '8px'
+    },
+    dateInput: {
+        margin: '0 7px'
+    },
+    actionButtons: {
+        display: 'flex',
+        justifyContent: 'flex-end',
+        height: '48px',
+        margin: '0px 8px'
+    },
+    button: {
+        width: '96px'
+    }
+}); });

package/public/esm/components/Drawer/Drawer.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { DrawerProps } from '@mui/material/Drawer';
+type Props = DrawerProps;
+declare const Drawer: {
+    ({ open, children, ...otherProps }: Props): JSX.Element;
+    displayName: string;
+};
+export default Drawer;

package/public/esm/components/Drawer/Drawer.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, { useState, useEffect } from 'react';
+import MUIDrawer from '@mui/material/Drawer';
+import { useTheme } from '@mui/material/styles';
+var Drawer = function (_a) {
+    var _b = _a.open, open = _b === void 0 ? true : _b, children = _a.children, otherProps = __rest(_a, ["open", "children"]);
+    var _c = useState(open), drawerContentsVisible = _c[0], setDrawerContentVisible = _c[1];
+    var hideDelay = useTheme().transitions.duration.leavingScreen;
+    useEffect(function () {
+        if (open !== drawerContentsVisible) {
+            if (open) {
+                // mount children before appear
+                setDrawerContentVisible(true);
+            }
+            else {
+                // unmount children only when closing transition ended
+                var timeout_1 = setTimeout(function () {
+                    setDrawerContentVisible(false);
+                }, hideDelay);
+                return function () { return clearTimeout(timeout_1); };
+            }
+        }
+    }, [open, hideDelay, drawerContentsVisible]);
+    return (React.createElement(MUIDrawer, __assign({ open: open }, otherProps), drawerContentsVisible && children));
+};
+Drawer.displayName = 'Drawer';
+export default Drawer;

package/public/esm/components/DropDownMenuButton/DropDownMenuButton.d.ts

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

package/public/esm/components/DropDownMenuButton/DropDownMenuButton.js

@@ -0,0 +1,50 @@
+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 { useDidUpdateEffect } from '../../hooks';
+import DefaultMenuItemRenderer from './MenuItemRenderer';
+import { useStyles } from './styles';
+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 ? [] : _d, _e = _a.buttonProps, buttonProps = _e === void 0 ? {} : _e, _f = _a.popoverProps, popoverProps = _f === void 0 ? {} : _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();
+    var _k = useState(false), isOpen = _k[0], setIsOpen = _k[1];
+    useDidUpdateEffect(function () {
+        isOpen ? onMenuOpen() : onMenuClose();
+    }, [isOpen]);
+    var handleToggle = useCallback(function (e) {
+        e === null || e === void 0 ? void 0 : e.stopPropagation();
+        setIsOpen(function (open) { return !open; });
+    }, []);
+    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({ 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))));
+}
+DropDownMenuButton.displayName = 'DropDownMenuButton';
+export default DropDownMenuButton;

package/public/esm/components/DropDownMenuButton/MenuItemRenderer.js

@@ -0,0 +1,22 @@
+import React, { forwardRef } from 'react';
+import { identity } from 'ramda';
+import Checkbox from '@mui/material/Checkbox';
+import MenuItem from '@mui/material/MenuItem';
+import Typography from '@mui/material/Typography';
+import withTooltip from '../../HOCs/withTooltip/withTooltip';
+import { useStyles } from './styles';
+var MenuItemWithTooltip = withTooltip(MenuItem);
+var MenuItemRenderer = forwardRef(function (_a, ref) {
+    var item = _a.item, _b = _a.onMenuClose, onMenuClose = _b === void 0 ? identity : _b;
+    var styles = useStyles();
+    var disabled = item.disabled, text = item.text, tooltip = item.tooltip, onClick = item.onClick, _c = item.id, id = _c === void 0 ? '' : _c, selectable = item.selectable, selected = item.selected;
+    var handleClick = function (e) {
+        onMenuClose(e);
+        onClick(e);
+    };
+    return (React.createElement(MenuItemWithTooltip, { tooltipTitle: tooltip, showForDisabled: true, classes: { root: styles.menuItem }, onClick: handleClick, disabled: disabled, ref: ref, "data-modal": true, "data-reltio-id": "reltio-search-menu-item".concat(id) },
+        selectable && React.createElement(Checkbox, { checked: selected, color: "primary" }),
+        React.createElement(Typography, { classes: { root: styles.menuText } }, text)));
+});
+MenuItemRenderer.displayName = 'MenuItemRenderer';
+export default MenuItemRenderer;

package/public/esm/components/DropDownMenuButton/styles.d.ts

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

package/public/esm/components/DropDownMenuButton/styles.js

@@ -0,0 +1,26 @@
+import { alpha } from '@mui/material/styles';
+import { makeStyles } from '@mui/styles';
+export var useStyles = makeStyles(function (theme) { return ({
+    buttonRoot: {
+        '&$selected': {
+            color: theme.palette.action.active,
+            backgroundColor: alpha(theme.palette.action.active, 0.12),
+            '&:hover': {
+                backgroundColor: alpha(theme.palette.action.active, 0.15)
+            }
+        }
+    },
+    selected: {},
+    paper: {
+        minWidth: '112px'
+    },
+    menuItem: {
+        minHeight: '32px'
+    },
+    menuText: {
+        color: theme.palette.text.primary,
+        fontSize: '13px',
+        lineHeight: '15px',
+        letterSpacing: 0
+    }
+}); });