@reltio/components 1.4.1790 → 1.4.1824-hf

package/esm/components/AttributesFiltersBuilder/components/ValuesEditor/ValuesEditor.js

@@ -0,0 +1,38 @@
+import React, { memo, useMemo, useCallback } from 'react';
+import { checkIfOptionHasValues, getAttrDataTypeDefinition, getDataTypeDefinitionForFilterValue } from '@reltio/mdm-sdk';
+import FilterValueEditor from '../../../editors/FilterEditor/FilterValueEditor';
+import { useStyles } from './styles';
+var ValuesEditor = function (_a) {
+    var rowData = _a.rowData, rowContext = _a.rowContext;
+    var styles = useStyles();
+    var canFilterAcceptValues = (rowData === null || rowData === void 0 ? void 0 : rowData.attribute) && checkIfOptionHasValues(rowData.filter);
+    var changeFilter = rowContext.changeFilter;
+    var _b = (rowData || {}), _c = _b.values, values = _c === void 0 ? [] : _c, _d = _b.attribute, _e = _d === void 0 ? {} : _d, attrType = _e.attrType, _f = _e.fieldName, fieldName = _f === void 0 ? null : _f, filter = _b.filter, id = _b.id, operator = _b.operator;
+    var valueDataTypeDefinition = attrType && getAttrDataTypeDefinition(attrType);
+    var filterValueDataTypeDefinition = valueDataTypeDefinition && getDataTypeDefinitionForFilterValue(valueDataTypeDefinition, filter);
+    var editorFilter = useMemo(function () { return ({
+        filter: filter,
+        fieldName: fieldName,
+        operator: operator,
+        values: values || []
+    }); }, [filter, fieldName, operator, values]);
+    var TextFieldProps = useMemo(function () { return ({
+        InputProps: {
+            classes: {
+                root: styles.input
+            }
+        }
+    }); }, [styles]);
+    var editorClasses = useMemo(function () { return ({ root: styles.root }); }, [styles]);
+    var changeValue = useCallback(function (newValues) {
+        var newFilter = {
+            fieldName: fieldName,
+            filter: filter,
+            operator: operator,
+            values: newValues
+        };
+        changeFilter(newFilter, id);
+    }, [fieldName, filter, operator, changeFilter, id]);
+    return (React.createElement("div", { className: styles.valuesEditor }, (rowData === null || rowData === void 0 ? void 0 : rowData.attribute) && canFilterAcceptValues && (React.createElement(FilterValueEditor, { "data-reltio-id": "filter-value-editor", filter: editorFilter, onChange: changeValue, dataTypeDefinition: filterValueDataTypeDefinition, fullWidth: true, TextFieldProps: TextFieldProps, color: "primary", classes: editorClasses, orientation: "horizontal" }))));
+};
+export default memo(ValuesEditor);

package/esm/components/AttributesFiltersBuilder/helpers.d.ts

@@ -0,0 +1,13 @@
+import { AttributeType, Metadata, SearchFilter } from '@reltio/mdm-sdk';
+import { AttributeSelectorItem, AttributeSelectorItemsGroup, AttributesTypesGroup } from '../../types';
+import { FilterOption } from './types';
+export declare const getAttributeSelectorItems: (attributesTypesGroups: AttributesTypesGroup[], metadata: Metadata) => AttributeSelectorItemsGroup[];
+export declare const findValue: (options: FilterOption[], filter: string) => FilterOption;
+export declare const getRowsDataFromFilters: (filters: SearchFilter[], attributesGroupArr: AttributeSelectorItemsGroup[]) => {
+    attribute: AttributeSelectorItem;
+    filter: string;
+    operator: import("@reltio/mdm-sdk").SearchOperator;
+    id: number;
+    values: import("@reltio/mdm-sdk").SearchValue[];
+}[];
+export declare const getEntityTypeFromAttrTypes: (attributeTypes: AttributeType[]) => any;

package/esm/components/AttributesFiltersBuilder/index.d.ts

@@ -0,0 +1,4 @@
+export { default as AttributesFiltersBuilder } from './AttributesFiltersBuilder';
+export { default as AttributesValuesEditor } from './components/ValuesEditor/ValuesEditor';
+export { default as AttributesFilterSelector } from './components/FilterSelector/FilterSelector';
+export type { AttributeFiltersComponentProps } from './types';

package/esm/components/AttributesFiltersBuilder/index.js

@@ -0,0 +1,3 @@
+export { default as AttributesFiltersBuilder } from './AttributesFiltersBuilder';
+export { default as AttributesValuesEditor } from './components/ValuesEditor/ValuesEditor';
+export { default as AttributesFilterSelector } from './components/FilterSelector/FilterSelector';

package/esm/components/AttributesFiltersBuilder/types.d.ts

@@ -0,0 +1,20 @@
+import { SearchFilter, TEntityType } from '@reltio/mdm-sdk';
+import { AttributeSelectionInfo, AttributeSelectorItemsGroup, FiltersRowData } from '../../types';
+export type FilterOption = {
+    value: string;
+    label: string;
+};
+export type RowContext = {
+    attributeSelectorItemsGroups: AttributeSelectorItemsGroup[];
+    entityType: TEntityType;
+    addNewFilter: (newFilter: SearchFilter) => void;
+    addRowAfterIndex: (index: number) => void;
+    changeFilter: (newFilter: SearchFilter, id: number) => void;
+    duplicateRow: (index: number) => void;
+    removeRow: (index: number) => void;
+    onFilterAttributeChange?: (attrSelectInfo: AttributeSelectionInfo) => void;
+};
+export type AttributeFiltersComponentProps = {
+    rowData: FiltersRowData;
+    rowContext: RowContext;
+};

package/esm/components/AttributesFiltersButton/ActionButtons/ActionButtons.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+type Props = {
+    onClear: () => void;
+    onCancel: () => void;
+    onApply: () => void;
+};
+declare const ActionButtons: ({ onClear, onCancel, onApply }: Props) => JSX.Element;
+export default ActionButtons;

package/esm/components/AttributesFiltersButton/ActionButtons/ActionButtons.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import i18n from 'ui-i18n';
+import Button from '@mui/material/Button';
+import { useStyles } from './styles';
+var ActionButtons = function (_a) {
+    var onClear = _a.onClear, onCancel = _a.onCancel, onApply = _a.onApply;
+    var styles = useStyles();
+    return (React.createElement("div", { className: styles.buttonsWrapper },
+        React.createElement(Button, { onClick: onClear, variant: "text", className: styles.clearButon }, i18n.text('Clear all')),
+        React.createElement(Button, { onClick: onCancel, variant: "text", className: styles.cancelButton }, i18n.text('Cancel')),
+        React.createElement(Button, { onClick: onApply, variant: "text", color: "primary", className: styles.applyButton }, i18n.text('Apply'))));
+};
+export default ActionButtons;

package/esm/components/AttributesFiltersButton/AttributesFiltersButton.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { SearchFilter } from '@reltio/mdm-sdk';
+import { AttributeSelectionInfo, AttributesFilterComponentsClasses, AttributesTypesGroup } from '../../types';
+type Props = {
+    classes?: AttributesFilterComponentsClasses;
+    filters: SearchFilter[];
+    onChange: (filters: SearchFilter[]) => void;
+    attributesTypesGroups: AttributesTypesGroup[];
+    components?: {
+        ValuesEditor?: React.ElementType;
+        FilterSelector?: React.ElementType;
+        LogicalOperator?: React.ElementType;
+    };
+    children?: React.ReactNode;
+    onTogglePopup?: (open: boolean) => void;
+    isFiltersApplied?: boolean;
+    dataReltioId?: string;
+    onFilterAttributeChange?: (attrSelectInfo: AttributeSelectionInfo) => void;
+    onClear?: () => void;
+    onCancel?: () => void;
+    onApply?: () => void;
+};
+declare const _default: React.MemoExoticComponent<({ filters: filtersProp, classes, attributesTypesGroups, onChange, components, children, onTogglePopup, isFiltersApplied: isFiltersAppliedProp, dataReltioId, onFilterAttributeChange, onCancel, onClear, onApply }: Props) => JSX.Element>;
+export default _default;

package/esm/components/AttributesFiltersButton/AttributesFiltersButton.js

@@ -0,0 +1,66 @@
+import React, { useRef, useState, useEffect, useCallback, memo } from 'react';
+import i18n from 'ui-i18n';
+import Popover from '@mui/material/Popover';
+import Button from '@mui/material/Button';
+import FilterIcon from '@mui/icons-material/FilterList';
+import Typography from '@mui/material/Typography';
+import Divider from '@mui/material/Divider';
+import classNames from 'classnames';
+import { buildFilterQueryString } from '@reltio/mdm-sdk';
+import AttributesFiltersBuilder from '../AttributesFiltersBuilder/AttributesFiltersBuilder';
+import ActionButtons from './ActionButtons/ActionButtons';
+import { useStyles } from './styles';
+var AttributesFiltersButton = function (_a) {
+    var filtersProp = _a.filters, classes = _a.classes, attributesTypesGroups = _a.attributesTypesGroups, onChange = _a.onChange, components = _a.components, children = _a.children, onTogglePopup = _a.onTogglePopup, isFiltersAppliedProp = _a.isFiltersApplied, dataReltioId = _a.dataReltioId, onFilterAttributeChange = _a.onFilterAttributeChange, onCancel = _a.onCancel, onClear = _a.onClear, onApply = _a.onApply;
+    var styles = useStyles();
+    var buttonRef = useRef();
+    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    var _c = useState([]), filters = _c[0], setFilters = _c[1];
+    var isFiltersApplied = isFiltersAppliedProp !== null && isFiltersAppliedProp !== void 0 ? isFiltersAppliedProp : !!buildFilterQueryString()(filtersProp);
+    var buttonColor = isFiltersApplied ? 'primary' : 'inherit';
+    var togglePopup = function () {
+        if (onTogglePopup) {
+            onTogglePopup(!isOpen);
+        }
+        setIsOpen(function (open) { return !open; });
+    };
+    useEffect(function () {
+        if (isOpen) {
+            setFilters(filtersProp);
+        }
+    }, [filtersProp, isOpen]);
+    var applyButtonHandler = useCallback(function () {
+        onChange(filters);
+        onApply && onApply();
+        togglePopup();
+    }, [filters, onChange, onApply]);
+    var cancelButtonHandler = useCallback(function () {
+        onCancel && onCancel();
+        togglePopup();
+    }, [onCancel]);
+    var clearAllButtonHandler = useCallback(function () {
+        onClear && onClear();
+        setFilters([]);
+    }, [onClear]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button, { "data-reltio-id": dataReltioId, ref: buttonRef, color: buttonColor, classes: {
+                root: styles.triggerButton,
+                textPrimary: styles.changedFiltersIndicator
+            }, onClick: togglePopup },
+            React.createElement(FilterIcon, { color: buttonColor })),
+        React.createElement(Popover, { open: isOpen, classes: { paper: classNames(styles.popupContent, classes === null || classes === void 0 ? void 0 : classes.filterPopup) }, anchorEl: buttonRef.current, onClose: togglePopup, anchorOrigin: {
+                vertical: 'bottom',
+                horizontal: 'right'
+            }, transformOrigin: {
+                vertical: 'top',
+                horizontal: 'left'
+            } },
+            React.createElement(React.Fragment, null,
+                React.createElement(Typography, { variant: "h6" }, i18n.text('Filter')),
+                React.createElement("div", { className: styles.filtersBuilderWrapper },
+                    children,
+                    React.createElement(AttributesFiltersBuilder, { attributesTypesGroups: attributesTypesGroups, filters: filters, onChange: setFilters, components: components, onFilterAttributeChange: onFilterAttributeChange, classes: classes })),
+                React.createElement(Divider, { className: styles.divider }),
+                React.createElement(ActionButtons, { onApply: applyButtonHandler, onCancel: cancelButtonHandler, onClear: clearAllButtonHandler })))));
+};
+export default memo(AttributesFiltersButton);

package/esm/components/AutoSizeList/AutoSizeList.d.ts

@@ -0,0 +1,17 @@
+import React, { MutableRefObject } from 'react';
+import { VariableSizeList as List } from 'react-window';
+type Props<T> = {
+    width: number;
+    height: number;
+    data: T[];
+    defaultItemSize: number;
+    itemKey?: (index: number, data: T[]) => string;
+    children: ({ data, index }: {
+        data: T[];
+        index: number;
+    }) => React.ReactNode;
+    showNotMeasuredItems?: boolean;
+    listRef?: MutableRefObject<List>;
+};
+declare const _default: React.MemoExoticComponent<(<T = unknown>({ width, height, defaultItemSize, data, children, itemKey, showNotMeasuredItems, listRef: listRefProp }: Props<T>) => JSX.Element)>;
+export default _default;

package/esm/components/AvatarWithFallback/AvatarWithFallback.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+type Props = {
+    className?: string;
+    icon?: string;
+    avatarText?: string;
+    variant?: 'circular' | 'rounded' | 'square';
+    rootClasses?: {
+        iconRoot?: string;
+        textRoot?: string;
+    };
+};
+declare const AvatarWithFallback: ({ className, icon, avatarText, rootClasses, ...otherProps }: Props) => JSX.Element;
+export default AvatarWithFallback;

package/esm/components/AvatarWithFallback/AvatarWithFallback.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 Avatar from '@mui/material/Avatar';
+import classnames from 'classnames';
+import React, { useEffect, useState } from 'react';
+var AvatarStates;
+(function (AvatarStates) {
+    AvatarStates[AvatarStates["ICON_MODE"] = 0] = "ICON_MODE";
+    AvatarStates[AvatarStates["TEXT_MODE"] = 1] = "TEXT_MODE";
+    AvatarStates[AvatarStates["ERROR_MODE"] = 2] = "ERROR_MODE";
+})(AvatarStates || (AvatarStates = {}));
+var AvatarWithFallback = function (_a) {
+    var className = _a.className, icon = _a.icon, avatarText = _a.avatarText, rootClasses = _a.rootClasses, otherProps = __rest(_a, ["className", "icon", "avatarText", "rootClasses"]);
+    var _b = useState(null), state = _b[0], setState = _b[1];
+    useEffect(function () {
+        if (icon) {
+            setState(AvatarStates.ICON_MODE);
+        }
+        else {
+            setState(AvatarStates.TEXT_MODE);
+        }
+    }, [icon, avatarText]);
+    var onImageLoadFail = function () {
+        setState(AvatarStates.ERROR_MODE);
+    };
+    switch (state) {
+        case AvatarStates.ICON_MODE:
+            return (React.createElement(Avatar, __assign({ className: classnames(className, rootClasses === null || rootClasses === void 0 ? void 0 : rootClasses.iconRoot), src: icon, onError: onImageLoadFail }, otherProps)));
+        case AvatarStates.TEXT_MODE:
+        case AvatarStates.ERROR_MODE:
+            return (React.createElement(Avatar, __assign({ className: classnames(className, rootClasses === null || rootClasses === void 0 ? void 0 : rootClasses.textRoot) }, otherProps), avatarText));
+        default:
+            return null;
+    }
+};
+export default AvatarWithFallback;

package/esm/components/BasicAttributeSelector/AttributeTitle/AttributeTitle.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { AttributeSelectorItem } from '../../../types';
+type Value = {
+    fieldName: string;
+    title: string;
+};
+type Props = {
+    value: AttributeSelectorItem;
+    disabled: boolean;
+    getLabel: (value: Value) => string;
+    onSelectAttributeClick: (event: any) => void;
+};
+declare const AttributeTitle: ({ value, getLabel, onSelectAttributeClick, disabled }: Props) => JSX.Element;
+export default AttributeTitle;

package/esm/components/BasicAttributeSelector/AttributeTitle/AttributeTitle.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import i18n from 'ui-i18n';
+import classnames from 'classnames';
+import { either, prop } from 'ramda';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import ExpandedValueTooltip from '../../ExpandedValueTooltip/ExpandedValueTooltip';
+import SmallIconButton from '../../SmallIconButton/SmallIconButton';
+import useStyles from './styles';
+var defaultGetLabel = either(prop('title'), prop('fieldName'));
+var AttributeTitle = function (_a) {
+    var _b, _c, _d;
+    var value = _a.value, _e = _a.getLabel, getLabel = _e === void 0 ? defaultGetLabel : _e, onSelectAttributeClick = _a.onSelectAttributeClick, _f = _a.disabled, disabled = _f === void 0 ? false : _f;
+    var styles = useStyles();
+    var label = value && getLabel(value);
+    return (React.createElement("div", { onClick: disabled ? undefined : onSelectAttributeClick, className: classnames(styles.attribute, (_b = {},
+            _b[styles.attributeWithValue] = !!label,
+            _b), (_c = {}, _c[styles.disabled] = disabled, _c)) },
+        React.createElement(ExpandedValueTooltip, { value: label },
+            React.createElement("div", { className: classnames(styles.name, (_d = {}, _d[styles.disabled] = disabled, _d)) }, label || React.createElement("span", { className: styles.noSelect }, i18n.text('Select attribute')))),
+        React.createElement(SmallIconButton, { size: 'M', icon: ArrowDropDownIcon, disabled: disabled })));
+};
+export default AttributeTitle;

package/esm/components/BasicAttributeSelector/AttributeTitle/styles.d.ts

@@ -0,0 +1,2 @@
+declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"name" | "attribute" | "disabled" | "attributeWithValue" | "noSelect">;
+export default useStyles;

package/esm/components/BasicAttributeSelector/AttributeTitle/styles.js

@@ -0,0 +1,42 @@
+import { makeStyles } from '@mui/styles';
+var useStyles = makeStyles({
+    attribute: {
+        cursor: 'pointer',
+        lineHeight: '16px',
+        flexBasis: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        padding: '0 10px 0 16px',
+        width: 'calc(100% - 32px)',
+        '&$attributeWithValue': {
+            borderBottom: '1px solid rgba(0,0,0,0.38)'
+        },
+        '&$disabled': {
+            cursor: 'default'
+        }
+    },
+    disabled: {},
+    attributeWithValue: {},
+    noSelect: {},
+    name: {
+        fontSize: '14px',
+        color: 'rgba(0,0,0,0.87)',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis',
+        direction: 'rtl',
+        textAlign: 'left',
+        flex: '1 0',
+        width: '0',
+        '& $noSelect': {
+            color: 'rgba(0,0,0,0.38)'
+        },
+        '&$disabled': {
+            color: 'rgba(0,0,0,0.26)',
+            '& $noSelect': {
+                color: 'rgba(0,0,0,0.26)'
+            }
+        }
+    }
+});
+export default useStyles;

package/esm/components/BasicAttributeSelector/BasicAttributeSelector.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { BasicAttributeSelectorProps } from '../../types';
+declare const _default: React.MemoExoticComponent<({ className, itemsGroups, value, getLabel, onSelect, onRestoreFocus, onOpenPopup, disableRestoreFocus, disableEnforceFocus, single, ungroup, disabled, hideCheckBox }: BasicAttributeSelectorProps) => JSX.Element>;
+export default _default;

package/esm/components/BasicAttributeSelector/BasicAttributeSelector.js

@@ -0,0 +1,70 @@
+import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
+import i18n from 'ui-i18n';
+import classnames from 'classnames';
+import { identity, pipe, tap, prop, flatten, pick, map, chain, when, always } from 'ramda';
+import SelectionPopup from '../SelectionPopup/SelectionPopup';
+import { useKeyboardNavigation } from '../SelectionPopup/helpers';
+import AttributeTitle from './AttributeTitle/AttributeTitle';
+import { filterSelectedAttributes, getAttributeIndex, getContainerWidth, getOnEnterHandler, prepareGroupsForSelectAttributeList } from './helpers';
+import SelectAttributesList from '../SelectAttributesList/SelectAttributesList';
+import { flattenGroupedItemsData } from '../VirtualGroupedList/helpers';
+import useStyles from './styles';
+var ATTRIBUTES_LIST_HEIGHT = 400;
+var ATTRIBUTES_LIST_WIDTH = 308;
+var ATTRIBUTES_POPUP_HEIGHT = 507;
+var BasicAttributeSelector = function (_a) {
+    var className = _a.className, itemsGroups = _a.itemsGroups, value = _a.value, getLabel = _a.getLabel, onSelect = _a.onSelect, _b = _a.onRestoreFocus, onRestoreFocus = _b === void 0 ? identity : _b, _c = _a.onOpenPopup, onOpenPopup = _c === void 0 ? identity : _c, _d = _a.disableRestoreFocus, disableRestoreFocus = _d === void 0 ? false : _d, _e = _a.disableEnforceFocus, disableEnforceFocus = _e === void 0 ? false : _e, _f = _a.single, single = _f === void 0 ? false : _f, _g = _a.ungroup, ungroup = _g === void 0 ? false : _g, _h = _a.disabled, disabled = _h === void 0 ? false : _h, _j = _a.hideCheckBox, hideCheckBox = _j === void 0 ? false : _j;
+    var styles = useStyles();
+    var _k = useState(null), selectAnchor = _k[0], setSelectAnchor = _k[1];
+    var openPopup = function (event) {
+        onOpenPopup();
+        setSelectAnchor(event.currentTarget);
+    };
+    var closePopup = useCallback(function () { return setSelectAnchor(null); }, []);
+    var isPopupOpen = !!selectAnchor;
+    var _l = useState(''), filterText = _l[0], setFilterText = _l[1];
+    var clearFilterText = useCallback(function () { return setFilterText(''); }, []);
+    var _m = useState([]), selectedAttributes = _m[0], setSelectedAttributes = _m[1];
+    var clearSelectedAttributes = useCallback(function () { return setSelectedAttributes([]); }, []);
+    var filteredItemsGroups = useMemo(function () { return prepareGroupsForSelectAttributeList(filterText, itemsGroups); }, [itemsGroups, filterText]);
+    var items = useMemo(function () {
+        return pipe(when(always(ungroup), chain(pipe(prop('items'), flatten, map(pick(['item', 'level']))))), flattenGroupedItemsData)(filteredItemsGroups);
+    }, [ungroup, filteredItemsGroups]);
+    var containerWidth = useMemo(function () { return Math.max(getContainerWidth(filteredItemsGroups), ATTRIBUTES_LIST_WIDTH); }, [filteredItemsGroups]);
+    var handleOnClose = pipe(tap(pipe(clearSelectedAttributes, clearFilterText, closePopup)), onRestoreFocus);
+    var searchInputRef = useRef();
+    var onListItemClick = useCallback(function (attribute, checked) {
+        onSelect({
+            checked: checked,
+            attribute: attribute,
+            index: checked ? selectedAttributes.length : getAttributeIndex(selectedAttributes, attribute),
+            selectedAttributes: selectedAttributes
+        });
+        if (single) {
+            setSelectedAttributes(checked ? [attribute] : []);
+            handleOnClose({});
+        }
+        else {
+            setSelectedAttributes(filterSelectedAttributes({ selectedAttributes: selectedAttributes, attribute: attribute, checked: checked }));
+            if (searchInputRef.current) {
+                searchInputRef.current.focus();
+            }
+        }
+    }, [selectedAttributes, onSelect, single, handleOnClose, searchInputRef]);
+    var handleSearchOnEnter = useCallback(getOnEnterHandler({ onListItemClick: onListItemClick, selectedAttributes: selectedAttributes }), [
+        onListItemClick,
+        selectedAttributes
+    ]);
+    var _o = useKeyboardNavigation({
+        items: items,
+        open: isPopupOpen,
+        onSelectFocusedItem: handleSearchOnEnter,
+        selectedItems: selectedAttributes,
+        onClose: handleOnClose
+    }), focusIndex = _o.focusIndex, handleKeyDown = _o.handleKeyDown;
+    return (React.createElement("div", { className: classnames(styles.selector, className), "data-reltio-id": "attribute-selector" },
+        React.createElement(AttributeTitle, { value: value, getLabel: getLabel, onSelectAttributeClick: openPopup, disabled: disabled }),
+        React.createElement(SelectionPopup, { open: isPopupOpen, anchorEl: selectAnchor, onClose: handleOnClose, onSearch: setFilterText, title: i18n.text('Select attribute'), containerWidth: containerWidth, containerHeight: ATTRIBUTES_POPUP_HEIGHT, searchInputOnKeyDown: handleKeyDown, anchorOrigin: { horizontal: 'right', vertical: 'bottom' }, searchInputRef: searchInputRef, disableRestoreFocus: disableRestoreFocus, disableEnforceFocus: disableEnforceFocus },
+            React.createElement(SelectAttributesList, { items: items, onItemClick: onListItemClick, selectedAttributes: selectedAttributes, width: containerWidth, height: ATTRIBUTES_LIST_HEIGHT, focusIndex: focusIndex, hideCheckBox: hideCheckBox }))));
+};
+export default memo(BasicAttributeSelector);

package/esm/components/BasicAttributeSelector/helpers.d.ts

@@ -0,0 +1,22 @@
+import { AttributeSelectorItem, AttributeSelectorItemsGroup } from '../../types';
+export declare const isEqualAttributes: any;
+export declare const checkAttributeIncludes: (attribute: AttributeSelectorItem, selectedAttributes: AttributeSelectorItem[]) => boolean;
+export declare const filterItemsTree: (item: AttributeSelectorItem, filterText: string) => boolean;
+export declare const filterSelectedAttributes: ({ attribute, selectedAttributes, checked }: {
+    attribute: AttributeSelectorItem;
+    selectedAttributes: AttributeSelectorItem[];
+    checked: boolean;
+}) => AttributeSelectorItem[];
+export declare const getAttributeIndex: (selectedAttributes: AttributeSelectorItem[], attribute: AttributeSelectorItem) => number;
+export declare const getContainerWidth: (items: any) => any;
+export declare const getOnEnterHandler: ({ onListItemClick, selectedAttributes }: {
+    selectedAttributes: AttributeSelectorItem[];
+    onListItemClick: (attribute: AttributeSelectorItem, checked: boolean) => void;
+}) => ({ item, groupData }: {
+    item: any;
+    groupData: any;
+}) => void;
+export declare const prepareGroupsForSelectAttributeList: (filterText: string, groups: AttributeSelectorItemsGroup[]) => {
+    item: AttributeSelectorItemsGroup[];
+    items: AttributeSelectorItem[];
+};

package/esm/components/BasicAttributeSelector/helpers.js

@@ -0,0 +1,72 @@
+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 { eqBy, pick, curry } from 'ramda';
+import { getMaxItemWidth } from '@reltio/mdm-sdk';
+export var isEqualAttributes = eqBy(pick(['fieldName', 'uri', 'entityTypeUri']));
+export var checkAttributeIncludes = function (attribute, selectedAttributes) {
+    return selectedAttributes && !!selectedAttributes.find(isEqualAttributes(attribute));
+};
+var filterItem = function (item, filterText) {
+    return item.title.toLowerCase().includes(filterText.toLowerCase());
+};
+export var filterItemsTree = function (item, filterText) {
+    return filterItem(item, filterText) || (item.children || []).some(function (item) { return filterItemsTree(item, filterText); });
+};
+export var filterSelectedAttributes = function (_a) {
+    var attribute = _a.attribute, selectedAttributes = _a.selectedAttributes, checked = _a.checked;
+    return checked
+        ? selectedAttributes.concat(attribute)
+        : selectedAttributes.filter(function (selectedAttribute) { return !isEqualAttributes(attribute, selectedAttribute); });
+};
+export var getAttributeIndex = function (selectedAttributes, attribute) {
+    return selectedAttributes.findIndex(isEqualAttributes(attribute));
+};
+export var getContainerWidth = getMaxItemWidth('title');
+export var getOnEnterHandler = function (_a) {
+    var onListItemClick = _a.onListItemClick, selectedAttributes = _a.selectedAttributes;
+    return function (_a) {
+        var item = _a.item, groupData = _a.groupData;
+        var checked = checkAttributeIncludes(item, selectedAttributes);
+        onListItemClick(__assign(__assign({}, item), { groupName: groupData.groupName }), !checked);
+    };
+};
+var getAttributeGroupData = function (item, groupId, groupName, filterText, level, noFilter) {
+    if (level === void 0) { level = 0; }
+    if (noFilter === void 0) { noFilter = false; }
+    var isItemFiltered = filterItem(item, filterText);
+    return [
+        {
+            item: filterText ? __assign(__assign({}, item), { filterText: filterText }) : item,
+            level: level,
+            groupId: groupId,
+            groupName: groupName
+        }
+    ]
+        .concat(item.children
+        ? item.children
+            .filter(function (subItem) { return noFilter || isItemFiltered || filterItemsTree(subItem, filterText); })
+            .flatMap(function (subItem) {
+            return getAttributeGroupData(subItem, groupId, groupName, filterText, level + 1, noFilter || isItemFiltered);
+        })
+        : [])
+        .flat();
+};
+export var prepareGroupsForSelectAttributeList = curry(function (filterText, groups) {
+    return groups
+        .map(function (group) { return ({
+        item: group,
+        items: group.attributes
+            .filter(function (attribute) { return filterItemsTree(attribute, filterText); })
+            .map(function (item) { return getAttributeGroupData(item, group.id, group.title, filterText); })
+    }); })
+        .filter(function (group) { return group.items.length; });
+});

package/esm/components/BasicAttributeSelector/styles.d.ts

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

package/esm/components/BasicAttributeSelector/styles.js

@@ -0,0 +1,13 @@
+import { makeStyles } from '@mui/styles';
+var useStyles = makeStyles({
+    selector: {
+        minWidth: '200px',
+        width: '100%',
+        alignItems: 'stretch',
+        background: 'rgba(0,0,0, 0.0267)',
+        boxSizing: 'border-box',
+        borderRadius: '4px',
+        display: 'flex'
+    }
+});
+export default useStyles;

package/esm/components/BasicTableView/BasicTable/BasicTable.d.ts

@@ -0,0 +1,58 @@
+export namespace BasicTableType {
+    export let columnsData: PropTypes.Validator<PropTypes.InferProps<{
+        id: PropTypes.Requireable<string>;
+        label: PropTypes.Requireable<string>;
+        dataTypeDefinition: PropTypes.Requireable<object>;
+        resizable: PropTypes.Requireable<boolean>;
+        sortable: PropTypes.Requireable<boolean>;
+        filterable: PropTypes.Requireable<boolean>;
+        headCellRenderer: PropTypes.Requireable<(...args: any[]) => any>;
+        rowCellValueRenderer: PropTypes.Requireable<(...args: any[]) => any>;
+        nestedPath: PropTypes.Requireable<string[]>;
+    }>[]>;
+    export let rowsData: PropTypes.Validator<object[]>;
+    export let context: PropTypes.Requireable<object>;
+    export { SortingType as sorting };
+    export let onSort: PropTypes.Requireable<(...args: any[]) => any>;
+    export let filters: PropTypes.Requireable<{
+        [x: string]: PropTypes.InferProps<{
+            value: PropTypes.Requireable<NonNullable<NonNullable<NonNullable<string | number | boolean | PropTypes.InferProps<{
+                value: PropTypes.Requireable<string>;
+                lookupCode: PropTypes.Requireable<string>;
+            }>> | NonNullable<string | number | boolean | PropTypes.InferProps<{
+                value: PropTypes.Requireable<string>;
+                lookupCode: PropTypes.Requireable<string>;
+            }>>[]> | NonNullable<NonNullable<string | number | boolean | PropTypes.InferProps<{
+                value: PropTypes.Requireable<string>;
+                lookupCode: PropTypes.Requireable<string>;
+            }>> | NonNullable<string | number | boolean | PropTypes.InferProps<{
+                value: PropTypes.Requireable<string>;
+                lookupCode: PropTypes.Requireable<string>;
+            }>>[]>[]>>;
+            filter: PropTypes.Requireable<string>;
+        }>;
+    }>;
+    export let onFilter: PropTypes.Requireable<(...args: any[]) => any>;
+    export let renderRowCell: PropTypes.Requireable<(...args: any[]) => any>;
+    export let getRowCellHeight: PropTypes.Requireable<(...args: any[]) => any>;
+    export let headRowHeight: PropTypes.Requireable<number>;
+    export let maxRowValuesCount: PropTypes.Requireable<number>;
+    export let defaultColumnWidth: PropTypes.Requireable<number>;
+    export let defaultColumnMinWidth: PropTypes.Requireable<number>;
+    export let classes: PropTypes.Requireable<PropTypes.InferProps<{
+        highlightRow: PropTypes.Requireable<string>;
+        cellBorder: PropTypes.Requireable<string>;
+        dragColumnBody: PropTypes.Requireable<string>;
+        dragColumnHead: PropTypes.Requireable<string>;
+        draggableHeadCell: PropTypes.Requireable<string>;
+        cellWrapper: PropTypes.Requireable<string>;
+        cellContentWrapper: PropTypes.Requireable<string>;
+        hoveredRowRightContentContainer: PropTypes.Requireable<string>;
+        hoveredRowRightContentWrapper: PropTypes.Requireable<string>;
+    }>>;
+}
+export default BasicTable;
+import PropTypes from 'prop-types';
+import { SortingType } from '../../../constants/prop-types';
+declare const BasicTable: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';