@reltio/components 1.4.1068 → 1.4.1073

package/cjs/icons/index.js

@@ -3,7 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UploadIcon = exports.UnMerge = exports.Table = exports.SimpleAttribute = exports.SelectAttributes = exports.Search = exports.ResizeIconInline = exports.Remove = exports.ReferenceAttribute = exports.Recommended = exports.Radius = exports.Profile = exports.PotentialMatch = exports.Polygon = exports.PmTaskIcon = exports.PmIcon = exports.PivotingIcon = exports.PinOutlined = exports.Pin = exports.NoMatches = exports.NoDataSearch = exports.NoData = exports.NestedAttribute = exports.MlMatch = exports.Merge = exports.LogOut = exports.LogIn = exports.IgnoredOutlined = exports.Ignored = exports.Filter = exports.Error = exports.EmptySearchResults = exports.Draw = exports.Download = exports.Details = exports.DeleteRequestTaskIcon = exports.DefaultTaskIcon = exports.DefaultImage = exports.DcrTaskIcon = exports.Create = exports.Copy = exports.CommentBubble = exports.Comment = exports.CollaborationIcon = exports.Calendar = exports.AttributesList = exports.AddComment = exports.Add = void 0;
+exports.UnMerge = exports.Table = exports.SimpleAttribute = exports.SelectAttributes = exports.Search = exports.ResizeIconInline = exports.Remove = exports.ReferenceAttribute = exports.Recommended = exports.Radius = exports.Profile = exports.PotentialMatch = exports.Polygon = exports.PivotingIcon = exports.PinOutlined = exports.Pin = exports.PmTaskIcon = exports.PmIcon = exports.NotMatchDark = exports.NoMatches = exports.NoDataSearch = exports.NoData = exports.NestedAttribute = exports.MergeDark = exports.Merge = exports.MlMatch = exports.LogOut = exports.LogIn = exports.IgnoredOutlined = exports.Ignored = exports.Filter = exports.Error = exports.EmptySearchResults = exports.Duplicate = exports.Draw = exports.Download = exports.Details = exports.DeleteRequestTaskIcon = exports.DefaultTaskIcon = exports.DefaultImage = exports.DcrTaskIcon = exports.Create = exports.Copy = exports.CommentBubble = exports.Comment = exports.CollaborationIcon = exports.Calendar = exports.AttributesList = exports.AddComment = exports.Add = void 0;
+exports.UploadIcon = void 0;
 var Add_1 = require("./Add");
 Object.defineProperty(exports, "Add", { enumerable: true, get: function () { return __importDefault(Add_1).default; } });
 var AddComment_1 = require("./AddComment");
@@ -36,6 +37,8 @@ var Download_1 = require("./Download");
 Object.defineProperty(exports, "Download", { enumerable: true, get: function () { return __importDefault(Download_1).default; } });
 var Draw_1 = require("./Draw");
 Object.defineProperty(exports, "Draw", { enumerable: true, get: function () { return __importDefault(Draw_1).default; } });
+var Duplicate_1 = require("./Duplicate");
+Object.defineProperty(exports, "Duplicate", { enumerable: true, get: function () { return __importDefault(Duplicate_1).default; } });
 var EmptySearchResults_1 = require("./EmptySearchResults");
 Object.defineProperty(exports, "EmptySearchResults", { enumerable: true, get: function () { return __importDefault(EmptySearchResults_1).default; } });
 var Error_1 = require("./Error");
@@ -50,10 +53,12 @@ var LogIn_1 = require("./LogIn");
 Object.defineProperty(exports, "LogIn", { enumerable: true, get: function () { return __importDefault(LogIn_1).default; } });
 var LogOut_1 = require("./LogOut");
 Object.defineProperty(exports, "LogOut", { enumerable: true, get: function () { return __importDefault(LogOut_1).default; } });
-var Merge_1 = require("./Merge");
-Object.defineProperty(exports, "Merge", { enumerable: true, get: function () { return __importDefault(Merge_1).default; } });
 var MlMatch_1 = require("./MlMatch");
 Object.defineProperty(exports, "MlMatch", { enumerable: true, get: function () { return __importDefault(MlMatch_1).default; } });
+var Merge_1 = require("./Merge");
+Object.defineProperty(exports, "Merge", { enumerable: true, get: function () { return __importDefault(Merge_1).default; } });
+var MergeDark_1 = require("./MergeDark");
+Object.defineProperty(exports, "MergeDark", { enumerable: true, get: function () { return __importDefault(MergeDark_1).default; } });
 var NestedAttribute_1 = require("./NestedAttribute");
 Object.defineProperty(exports, "NestedAttribute", { enumerable: true, get: function () { return __importDefault(NestedAttribute_1).default; } });
 var NoData_1 = require("./NoData");
@@ -62,16 +67,18 @@ var NoDataSearch_1 = require("./NoDataSearch");
 Object.defineProperty(exports, "NoDataSearch", { enumerable: true, get: function () { return __importDefault(NoDataSearch_1).default; } });
 var NoMatches_1 = require("./NoMatches");
 Object.defineProperty(exports, "NoMatches", { enumerable: true, get: function () { return __importDefault(NoMatches_1).default; } });
+var NotMatchDark_1 = require("./NotMatchDark");
+Object.defineProperty(exports, "NotMatchDark", { enumerable: true, get: function () { return __importDefault(NotMatchDark_1).default; } });
+var PmIcon_1 = require("./PmIcon");
+Object.defineProperty(exports, "PmIcon", { enumerable: true, get: function () { return __importDefault(PmIcon_1).default; } });
+var PmTaskIcon_1 = require("./PmTaskIcon");
+Object.defineProperty(exports, "PmTaskIcon", { enumerable: true, get: function () { return __importDefault(PmTaskIcon_1).default; } });
 var Pin_1 = require("./Pin");
 Object.defineProperty(exports, "Pin", { enumerable: true, get: function () { return __importDefault(Pin_1).default; } });
 var PinOutlined_1 = require("./PinOutlined");
 Object.defineProperty(exports, "PinOutlined", { enumerable: true, get: function () { return __importDefault(PinOutlined_1).default; } });
 var PivotingIcon_1 = require("./PivotingIcon");
 Object.defineProperty(exports, "PivotingIcon", { enumerable: true, get: function () { return __importDefault(PivotingIcon_1).default; } });
-var PmIcon_1 = require("./PmIcon");
-Object.defineProperty(exports, "PmIcon", { enumerable: true, get: function () { return __importDefault(PmIcon_1).default; } });
-var PmTaskIcon_1 = require("./PmTaskIcon");
-Object.defineProperty(exports, "PmTaskIcon", { enumerable: true, get: function () { return __importDefault(PmTaskIcon_1).default; } });
 var Polygon_1 = require("./Polygon");
 Object.defineProperty(exports, "Polygon", { enumerable: true, get: function () { return __importDefault(Polygon_1).default; } });
 var PotentialMatch_1 = require("./PotentialMatch");

package/cjs/types/index.d.ts

@@ -57,6 +57,46 @@ export declare type QueryBuilderAttribute = {
     filter: string;
     operator: string;
 };
+export declare type AttributeSelectorItem = {
+    attrType: AttributeType;
+    entityTypeUri: string;
+    fieldName: string;
+    groupName: string;
+    title: string;
+    uri: string;
+    children?: AttributeSelectorItem[];
+    pathToTitle?: string[];
+};
+export declare type AttributeSelectorItemsGroup = {
+    id?: string;
+    title: string;
+    attributes: AttributeSelectorItem[];
+};
+export declare type AttributeSelectionInfo = {
+    index: number;
+    checked: boolean;
+    attribute: AttributeSelectorItem;
+    selectedAttributes: AttributeSelectorItem[];
+};
+export declare type BasicAttributeSelectorProps = {
+    className?: string;
+    itemsGroups: AttributeSelectorItemsGroup[];
+    value: AttributeSelectorItem;
+    onSelect: (selectInfo: AttributeSelectionInfo) => void;
+    onRestoreFocus?: () => void;
+    onOpenPopup?: () => void;
+    getLabel?: (value: {
+        fieldName?: string;
+        pathToTitle?: string[];
+        title: string;
+    }) => string;
+    disableRestoreFocus?: boolean;
+    disableEnforceFocus?: boolean;
+    single?: boolean;
+    ungroup?: boolean;
+    disabled?: boolean;
+    hideCheckBox?: boolean;
+};
 export declare enum RequestStates {
     INIT = "init",
     LOADING = "loading",

package/esm/components/AttributeGroupIcon/AttributeGroupIcon.d.ts

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

package/esm/components/AttributeGroupIcon/AttributeGroupIcon.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import mdm from '@reltio/mdm-module';
+import { getAbsoluteImageUrl, getEntityTypeGraphIcon } from '@reltio/mdm-sdk';
+import AvatarWithFallback from '../AvatarWithFallback/AvatarWithFallback';
+import { useStyles } from './styles';
+var AttributeGroupIcon = function (_a) {
+    var group = _a.group, metadata = _a.metadata;
+    var styles = useStyles();
+    var absoluteImagePath = useSelector(mdm.selectors.getAbsoluteImagePath);
+    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] });
+};
+export default AttributeGroupIcon;

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

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"icon">;

package/esm/components/AttributeGroupIcon/styles.js

@@ -0,0 +1,8 @@
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles({
+    icon: {
+        maxHeight: '25px',
+        maxWidth: '25px',
+        marginRight: '16px'
+    }
+});

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { SearchFilter, AttributeType } from '@reltio/mdm-sdk';
+declare type Props = {
+    filters: SearchFilter[];
+    onChange: (filtres: SearchFilter[]) => void;
+    attributeTypes: AttributeType[];
+};
+declare const _default: React.MemoExoticComponent<({ attributeTypes, filters, onChange }: Props) => JSX.Element>;
+export default _default;

package/esm/components/AttributesFiltersBuilder/AttributesFiltersBuilder.js

@@ -0,0 +1,88 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from) {
+    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+        to[j] = from[i];
+    return to;
+};
+import React, { useCallback, useRef, useMemo, memo, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { always, evolve } from 'ramda';
+import mdmModule from '@reltio/mdm-module';
+import { getEntityType } from '@reltio/mdm-sdk';
+import { getAttributeSelectorItems, getRowsDataFromFilters, getEntityTypeFromAttrTypes } from './helpers';
+import FilterSelector from './components/FilterSelector/FilterSelector';
+import RowActions from './components/RowActions/RowActions';
+import QueryBuilderRowsGroup from '../QueryBuilderRowsGroup/QueryBuilderRowsGroup';
+import AttributeSelector from './components/AttributeSelector/AttributeSelector';
+import ValueEditor from './components/ValueEditor/ValueEditor';
+import { useStyles } from './styles';
+var EMPTY_FILTER = { fieldName: null, filter: null, values: [] };
+var Stub = function () { return null; };
+var AttributesFiltersBuilder = function (_a) {
+    var attributeTypes = _a.attributeTypes, filters = _a.filters, onChange = _a.onChange;
+    var metadata = useSelector(mdmModule.selectors.getMetadata);
+    var entityType = getEntityType(metadata, getEntityTypeFromAttrTypes(attributeTypes));
+    var _b = useStyles(), attrSelector = _b.attrSelector, filterSelector = _b.filterSelector, actionContainer = _b.actionContainer;
+    var actualFilters = useRef(filters);
+    actualFilters.current = filters;
+    var attributeFilterRef = useRef(null);
+    var lastAttributesCountRef = useRef(null);
+    var attributesCountRef = useRef(null);
+    var rowClasses = useMemo(function () { return ({
+        attributeSelectorContainer: attrSelector,
+        filterSelectorContainer: filterSelector,
+        actionsContainer: actionContainer
+    }); }, [attrSelector, filterSelector, actionContainer]);
+    var attributeSelectorItems = useMemo(function () { return getAttributeSelectorItems(attributeTypes, entityType, metadata); }, [
+        attributeTypes,
+        metadata,
+        entityType
+    ]);
+    var rowsData = useMemo(function () { return (filters.length ? getRowsDataFromFilters(filters, attributeSelectorItems) : []); }, [
+        attributeSelectorItems,
+        filters
+    ]);
+    attributesCountRef.current = rowsData.length;
+    useEffect(function () {
+        if (attributeFilterRef.current && lastAttributesCountRef.current !== attributesCountRef.current) {
+            attributeFilterRef.current.querySelector('input').focus();
+            lastAttributesCountRef.current = null;
+        }
+    }, [rowsData.length]);
+    var handleAttributeSelectorOnOpen = useCallback(function () {
+        lastAttributesCountRef.current = rowsData.length;
+    }, [rowsData.length]);
+    var lastRowAttributeSelectorProps = useMemo(function () { return ({
+        onOpen: handleAttributeSelectorOnOpen
+    }); }, [handleAttributeSelectorOnOpen]);
+    var addRowAfterIndex = useCallback(function (index) {
+        var newFilters = __spreadArray([], actualFilters.current);
+        newFilters.splice(index + 1, 0, EMPTY_FILTER);
+        onChange(newFilters);
+    }, [onChange]);
+    var removeRow = useCallback(function (index) {
+        var newFilters = __spreadArray([], actualFilters.current);
+        newFilters.splice(index, 1);
+        onChange(newFilters);
+    }, [onChange]);
+    var duplicateRow = useCallback(function (index) {
+        var newFilters = __spreadArray([], actualFilters.current);
+        newFilters.splice(index + 1, 0, {
+            fieldName: actualFilters.current[index].fieldName,
+            filter: actualFilters.current[index].filter,
+            values: actualFilters.current[index].values
+        });
+        onChange(newFilters);
+    }, [onChange]);
+    var changeFilter = useCallback(function (newFilter, id) {
+        var _a;
+        var newFilters = evolve((_a = {},
+            _a[id] = always(newFilter),
+            _a), actualFilters.current);
+        onChange(newFilters);
+    }, [onChange]);
+    var addNewFilter = useCallback(function (newFilter) {
+        onChange(__spreadArray(__spreadArray([], actualFilters.current), [newFilter]));
+    }, [onChange]);
+    return (React.createElement(QueryBuilderRowsGroup, { rowClasses: rowClasses, rowsData: rowsData, AttributeSelectorComponent: AttributeSelector, FilterSelectorComponent: FilterSelector, ValuesEditorComponent: ValueEditor, ActionsComponent: RowActions, LogicOperatorComponent: Stub, filterSelectorRefIndex: lastAttributesCountRef.current, filterSelectorRef: attributeFilterRef, lastRowAttributeSelectorProps: lastRowAttributeSelectorProps, attributesGroup: attributeSelectorItems, changeFilter: changeFilter, addNewFilter: addNewFilter, addRowAfterIndex: addRowAfterIndex, removeRow: removeRow, duplicateRow: duplicateRow }));
+};
+export default memo(AttributesFiltersBuilder);

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { AttributeFiltersComponentProps } from '../../types';
+declare type Props = AttributeFiltersComponentProps & {
+    attributeSelectorProps: {
+        onOpen: () => void;
+    };
+};
+declare const _default: React.MemoExoticComponent<({ rowData, rowContext, attributeSelectorProps }: Props) => JSX.Element>;
+export default _default;

package/esm/components/AttributesFiltersBuilder/components/AttributeSelector/AttributeSelector.js

@@ -0,0 +1,29 @@
+import React, { useCallback, useMemo, memo } from 'react';
+import { getSearchGroupAttributeLabel } from '@reltio/mdm-sdk';
+import BasicAttributeSelector from '../../../BasicAttributeSelector/BasicAttributeSelector';
+var AttributeSelector = function (_a) {
+    var rowData = _a.rowData, rowContext = _a.rowContext, attributeSelectorProps = _a.attributeSelectorProps;
+    var _b = rowData || {}, attribute = _b.attribute, id = _b.id, filter = _b.filter;
+    var changeFilter = rowContext.changeFilter, addNewFilter = rowContext.addNewFilter, attributesGroup = rowContext.attributesGroup;
+    var getSelectedAttributeLabel = useCallback(function (data) { return getSearchGroupAttributeLabel({ data: data }); }, []);
+    var itemsGroup = useMemo(function () { return [{ id: '', title: '', attributes: attributesGroup }]; }, [attributesGroup]);
+    var changeAttribute = useCallback(function (selectInfo) {
+        if (rowData) {
+            var newFilter = {
+                fieldName: selectInfo.attribute.fieldName,
+                filter: filter,
+                values: []
+            };
+            changeFilter(newFilter, id);
+        }
+        else {
+            addNewFilter({
+                fieldName: selectInfo.attribute.fieldName,
+                filter: null,
+                values: []
+            });
+        }
+    }, [addNewFilter, changeFilter, id, rowData, filter]);
+    return (React.createElement(BasicAttributeSelector, { itemsGroups: itemsGroup, ungroup: true, single: true, value: attribute, getLabel: getSelectedAttributeLabel, onSelect: changeAttribute, onOpenPopup: attributeSelectorProps.onOpen }));
+};
+export default memo(AttributeSelector);

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { AttributeFiltersComponentProps } from '../../types';
+declare type Props = AttributeFiltersComponentProps & {
+    textFieldInputRef: React.MutableRefObject<HTMLInputElement>;
+};
+declare const _default: React.MemoExoticComponent<({ rowData, rowContext, textFieldInputRef }: Props) => JSX.Element>;
+export default _default;

package/esm/components/AttributesFiltersBuilder/components/FilterSelector/FilterSelector.js

@@ -0,0 +1,32 @@
+import React, { useCallback, useEffect, memo } from 'react';
+import i18n from 'ui-i18n';
+import { pipe, map } from 'ramda';
+import capitalize from '@material-ui/core/utils/capitalize';
+import { getFilterOptionLabel, getFilterOptionsForQueryBuilder } from '@reltio/mdm-sdk';
+import SimpleDropDownSelector from '../../../SimpleDropDownSelector/SimpleDropDownSelector';
+import { findValue } from '../../helpers';
+import useStyles from './styles';
+var FilterSelector = function (_a) {
+    var rowData = _a.rowData, rowContext = _a.rowContext, textFieldInputRef = _a.textFieldInputRef;
+    var styles = useStyles();
+    var _b = rowData || {}, _c = _b.attribute, _d = _c === void 0 ? {} : _c, _e = _d.attrType, attrType = _e === void 0 ? {} : _e, _f = _d.fieldName, fieldName = _f === void 0 ? null : _f, filter = _b.filter, id = _b.id;
+    var changeFilter = rowContext.changeFilter;
+    var options = attrType &&
+        fieldName &&
+        pipe(getFilterOptionsForQueryBuilder, map(function (value) { return ({ value: value, label: capitalize(getFilterOptionLabel(value)) }); }))(attrType, fieldName);
+    var onChangeFilter = useCallback(function (filterOption) {
+        var newFilter = {
+            fieldName: fieldName,
+            filter: filterOption.value,
+            values: []
+        };
+        changeFilter(newFilter, id);
+    }, [changeFilter, id, fieldName]);
+    useEffect(function () {
+        if ((fieldName && !filter) || (fieldName && !findValue(options, filter))) {
+            onChangeFilter(options[0]);
+        }
+    }, [fieldName, filter, onChangeFilter, options]);
+    return (React.createElement(SimpleDropDownSelector, { label: "", height: 40, isDisabled: !options, placeholder: i18n.text('Equals'), value: findValue(options, filter), options: options, onChange: onChangeFilter, className: styles.dropDownSelector, textFieldInputRef: textFieldInputRef }));
+};
+export default memo(FilterSelector);

package/esm/components/AttributesFiltersBuilder/components/FilterSelector/styles.d.ts

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

package/esm/components/AttributesFiltersBuilder/components/FilterSelector/styles.js

@@ -0,0 +1,7 @@
+import { makeStyles } from '@material-ui/core/styles';
+var useStyles = makeStyles({
+    dropDownSelector: {
+        width: '100%'
+    }
+});
+export default useStyles;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { AttributeFiltersComponentProps } from '../../types';
+declare const _default: React.MemoExoticComponent<({ rowData, rowContext }: AttributeFiltersComponentProps) => JSX.Element>;
+export default _default;

package/esm/components/AttributesFiltersBuilder/components/RowActions/RowActions.js

@@ -0,0 +1,27 @@
+import React, { memo, useCallback } from 'react';
+import i18n from 'ui-i18n';
+import CloseIcon from '@material-ui/icons/Close';
+import AddCircleIcon from '@material-ui/icons/AddCircle';
+import { SmallIconButtonWithTooltip } from '../../../SmallIconButton/index';
+import DuplicateIcon from '../../../../icons/Duplicate';
+import { useStyles } from './styles';
+var RowActions = function (_a) {
+    var rowData = _a.rowData, rowContext = _a.rowContext;
+    var styles = useStyles();
+    var _b = rowData || {}, index = _b.id, attribute = _b.attribute;
+    var addRowAfterIndex = rowContext.addRowAfterIndex, removeRow = rowContext.removeRow, duplicateRow = rowContext.duplicateRow;
+    var onAddRowAfterId = useCallback(function () {
+        addRowAfterIndex(index);
+    }, [addRowAfterIndex, index]);
+    var onRowDuplicate = useCallback(function () {
+        duplicateRow(index);
+    }, [duplicateRow, index]);
+    var onRowDelete = useCallback(function () {
+        removeRow(index);
+    }, [index, removeRow]);
+    return (React.createElement("div", { className: styles.actions },
+        React.createElement(SmallIconButtonWithTooltip, { tooltipTitle: i18n.text('Add'), icon: AddCircleIcon, size: "M", onClick: onAddRowAfterId }),
+        attribute && (React.createElement(SmallIconButtonWithTooltip, { tooltipTitle: i18n.text('Duplicate'), icon: DuplicateIcon, size: "M", onClick: onRowDuplicate })),
+        React.createElement(SmallIconButtonWithTooltip, { tooltipTitle: i18n.text('Delete'), icon: CloseIcon, size: "M", onClick: onRowDelete })));
+};
+export default memo(RowActions);

package/esm/components/AttributesFiltersBuilder/components/RowActions/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"actions" | "actionIcon">;

package/esm/components/AttributesFiltersBuilder/components/RowActions/styles.js

@@ -0,0 +1,20 @@
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles(function () { return ({
+    actions: {
+        width: '88px',
+        height: '24px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        flexShrink: 0,
+        '& >span': {
+            cursor: 'pointer',
+            display: 'flex'
+        },
+        '& $actionIcon': {
+            cursor: 'pointer',
+            color: 'rgba(0, 0, 0, .54)'
+        }
+    },
+    actionIcon: {}
+}); });

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { AttributeFiltersComponentProps } from '../../types';
+declare const _default: React.MemoExoticComponent<({ rowData, rowContext }: AttributeFiltersComponentProps) => JSX.Element>;
+export default _default;

package/esm/components/AttributesFiltersBuilder/components/ValueEditor/ValueEditor.js

@@ -0,0 +1,36 @@
+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, _f = _e.attrType, attrType = _f === void 0 ? {} : _f, _g = _e.fieldName, fieldName = _g === void 0 ? null : _g, filter = _b.filter, id = _b.id;
+    var valueDataTypeDefinition = attrType && getAttrDataTypeDefinition(attrType);
+    var filterValueDataTypeDefinition = valueDataTypeDefinition && getDataTypeDefinitionForFilterValue(valueDataTypeDefinition, filter);
+    var editorFilter = useMemo(function () { return ({
+        filter: filter,
+        fieldName: fieldName,
+        values: values || []
+    }); }, [filter, fieldName, 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 (values) {
+        var newFilter = {
+            fieldName: fieldName,
+            filter: filter,
+            values: values
+        };
+        changeFilter(newFilter, id);
+    }, [changeFilter, id, fieldName, filter]);
+    return (React.createElement("div", { className: styles.valuesEditor }, (rowData === null || rowData === void 0 ? void 0 : rowData.attribute) && canFilterAcceptValues && (React.createElement(FilterValueEditor, { filter: editorFilter, onChange: changeValue, dataTypeDefinition: filterValueDataTypeDefinition, fullWidth: true, TextFieldProps: TextFieldProps, color: "primary", classes: editorClasses, orientation: "horizontal" }))));
+};
+export default memo(ValuesEditor);

package/esm/components/AttributesFiltersBuilder/components/ValueEditor/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"input" | "root" | "valuesEditor">;

package/esm/components/AttributesFiltersBuilder/components/ValueEditor/styles.js

@@ -0,0 +1,22 @@
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles(function () { return ({
+    input: {
+        margin: 0,
+        borderRadius: '4px',
+        width: '100%',
+        paddingTop: 0,
+        paddingBottom: 0
+    },
+    root: {
+        borderRadius: '4px 4px 0 0',
+        padding: 0,
+        display: 'flex',
+        alignItems: 'center',
+        margin: 0
+    },
+    valuesEditor: {
+        width: '222px!important',
+        minHeight: '40px',
+        flexShrink: 0
+    }
+}); });

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

@@ -0,0 +1,12 @@
+import { AttributeType, TEntityType, Metadata, SearchFilter } from '@reltio/mdm-sdk';
+import { AttributeSelectorItem } from '../../types';
+import { FilterOption } from './types';
+export declare const getAttributeSelectorItems: (attributeTypes: AttributeType[], entityType: TEntityType, metadata: Metadata) => AttributeSelectorItem[];
+export declare const findValue: (options: FilterOption[], filter: string) => FilterOption;
+export declare const getRowsDataFromFilters: (filters: SearchFilter[], attributesGroup: AttributeSelectorItem[]) => {
+    attribute: AttributeSelectorItem;
+    filter: string;
+    id: number;
+    values: string[];
+}[];
+export declare const getEntityTypeFromAttrTypes: (attributeTypes: AttributeType[]) => any;

package/esm/components/AttributesFiltersBuilder/helpers.js

@@ -0,0 +1,70 @@
+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 { getAttributesTreeFromAttributes, attributeUriToSearchUri, isSpecialAttribute, getBaseUri } from '@reltio/mdm-sdk';
+var createAttributeItem = function (attrType, entityTypeUri) {
+    var title = attrType.label || attrType.name;
+    return {
+        title: title,
+        fieldName: attributeUriToSearchUri(attrType.uri),
+        entityTypeUri: entityTypeUri,
+        attrType: attrType
+    };
+};
+var createAttributesConfig = function (attrNode, entityTypeUri, createAttributeConfig) {
+    var resConfig = __assign(__assign({}, createAttributeConfig(attrNode, entityTypeUri)), { uri: attrNode.uri });
+    var children = attrNode.children
+        ? attrNode.children.map(function (childNode) { return createAttributesConfig(childNode, entityTypeUri, createAttributeConfig); })
+        : [];
+    if (children.length)
+        resConfig.children = children;
+    return resConfig;
+};
+export var getAttributeSelectorItems = function (attributeTypes, entityType, metadata) {
+    if (entityType === void 0) { entityType = {}; }
+    return getAttributesTreeFromAttributes(attributeTypes, metadata).map(function (attrNode) {
+        return createAttributesConfig(attrNode, entityType.uri, createAttributeItem);
+    });
+};
+var findAttributeSelectorItem = function (fieldName, attributesGroup) {
+    var attrGroup;
+    var findAttribute = function (fieldName, attributesGroup) {
+        for (var _i = 0, attributesGroup_1 = attributesGroup; _i < attributesGroup_1.length; _i++) {
+            var attributeGroup = attributesGroup_1[_i];
+            if (fieldName === attributeGroup.fieldName) {
+                attrGroup = attributeGroup;
+                return;
+            }
+            if ('children' in attributeGroup) {
+                findAttribute(fieldName, attributeGroup.children);
+            }
+        }
+    };
+    findAttribute(fieldName, attributesGroup);
+    return attrGroup;
+};
+export var findValue = function (options, filter) {
+    return options ? options.find(function (option) { return option.value === filter; }) : null;
+};
+export var getRowsDataFromFilters = function (filters, attributesGroup) {
+    return filters.map(function (filter, index) {
+        return {
+            attribute: filter.fieldName ? findAttributeSelectorItem(filter.fieldName, attributesGroup) : undefined,
+            filter: filter.filter,
+            id: index,
+            values: filter.values
+        };
+    });
+};
+export var getEntityTypeFromAttrTypes = function (attributeTypes) {
+    var regularAttribute = attributeTypes.find(function (attribute) { return !isSpecialAttribute(attribute); });
+    return regularAttribute ? getBaseUri(regularAttribute.uri) : null;
+};

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

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"attrSelector" | "filterSelector" | "actionContainer">;

package/esm/components/AttributesFiltersBuilder/styles.js

@@ -0,0 +1,18 @@
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles(function () { return ({
+    attrSelector: {
+        width: '222px',
+        height: '40px',
+        flexShrink: 0
+    },
+    filterSelector: {
+        width: '180px',
+        flexShrink: 0,
+        marginTop: 0,
+        marginBottom: 0
+    },
+    actionContainer: {
+        alignItems: 'center',
+        marginRight: '15px'
+    }
+}); });

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

@@ -0,0 +1,24 @@
+import { SearchFilter } from '@reltio/mdm-sdk';
+import { AttributeSelectorItem } from '../../types';
+export declare type FilterOption = {
+    value: string;
+    label: string;
+};
+export declare type RowData = {
+    attribute: AttributeSelectorItem;
+    filter: string;
+    id: number;
+    values: string[];
+};
+export declare type RowContext = {
+    attributesGroup: AttributeSelectorItem[];
+    addNewFilter: (newFilter: SearchFilter) => void;
+    addRowAfterIndex: (index: number) => void;
+    changeFilter: (newFilter: SearchFilter, id: number) => void;
+    duplicateRow: (index: number) => void;
+    removeRow: (index: number) => void;
+};
+export declare type AttributeFiltersComponentProps = {
+    rowData: RowData;
+    rowContext: RowContext;
+};

package/esm/components/AttributesFiltersBuilder/types.js

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

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare 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 '@material-ui/core/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", color: "default", className: styles.clearButon }, i18n.text('Clear all')),
+        React.createElement(Button, { onClick: onCancel, variant: "text", color: "default", 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/ActionButtons/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"buttonsWrapper" | "cancelButton" | "applyButton" | "clearButon">;