@reltio/components 1.4.1191 → 1.4.1194

package/cjs/components/AttributesFiltersBuilder/AttributesFiltersBuilder.d.ts

@@ -4,6 +4,10 @@ declare type Props = {
     filters: SearchFilter[];
     onChange: (filters: SearchFilter[]) => void;
     attributeTypes: AttributeType[];
+    components?: {
+        ValuesEditor?: React.ElementType;
+        FilterSelector?: React.ElementType;
+    };
 };
-declare const _default: React.MemoExoticComponent<({ attributeTypes, filters, onChange }: Props) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ attributeTypes, filters, onChange, components }: Props) => JSX.Element>;
 export default _default;

package/cjs/components/AttributesFiltersBuilder/AttributesFiltersBuilder.js

@@ -42,10 +42,11 @@ var styles_1 = require("./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 attributeTypes = _a.attributeTypes, filters = _a.filters, onChange = _a.onChange, _b = _a.components, components = _b === void 0 ? {} : _b;
+    var CustomValuesEditor = components.ValuesEditor, CustomFilterSelector = components.FilterSelector;
     var metadata = react_redux_1.useSelector(mdm_module_1.default.selectors.getMetadata);
     var entityType = mdm_sdk_1.getEntityType(metadata, helpers_1.getEntityTypeFromAttrTypes(attributeTypes));
-    var _b = styles_1.useStyles(), attrSelector = _b.attrSelector, filterSelector = _b.filterSelector, actionContainer = _b.actionContainer;
+    var _c = styles_1.useStyles(), attrSelector = _c.attrSelector, filterSelector = _c.filterSelector, actionContainer = _c.actionContainer;
     var actualFilters = react_1.useRef(filters);
     actualFilters.current = filters;
     var attributeFilterRef = react_1.useRef(null);
@@ -107,6 +108,6 @@ var AttributesFiltersBuilder = function (_a) {
     var addNewFilter = react_1.useCallback(function (newFilter) {
         onChange(__spreadArray(__spreadArray([], actualFilters.current), [newFilter]));
     }, [onChange]);
-    return (react_1.default.createElement(QueryBuilderRowsGroup_1.default, { rowClasses: rowClasses, rowsData: rowsData, AttributeSelectorComponent: AttributeSelector_1.default, FilterSelectorComponent: FilterSelector_1.default, ValuesEditorComponent: ValuesEditor_1.default, ActionsComponent: RowActions_1.default, LogicOperatorComponent: Stub, filterSelectorRefIndex: lastAttributesCountRef.current, filterSelectorRef: attributeFilterRef, lastRowAttributeSelectorProps: lastRowAttributeSelectorProps, attributesGroup: attributeSelectorItems, changeFilter: changeFilter, addNewFilter: addNewFilter, addRowAfterIndex: addRowAfterIndex, removeRow: removeRow, duplicateRow: duplicateRow, entityType: entityType }));
+    return (react_1.default.createElement(QueryBuilderRowsGroup_1.default, { rowClasses: rowClasses, rowsData: rowsData, AttributeSelectorComponent: AttributeSelector_1.default, FilterSelectorComponent: CustomFilterSelector || FilterSelector_1.default, ValuesEditorComponent: CustomValuesEditor || ValuesEditor_1.default, ActionsComponent: RowActions_1.default, LogicOperatorComponent: Stub, filterSelectorRefIndex: lastAttributesCountRef.current, filterSelectorRef: attributeFilterRef, lastRowAttributeSelectorProps: lastRowAttributeSelectorProps, attributesGroup: attributeSelectorItems, changeFilter: changeFilter, addNewFilter: addNewFilter, addRowAfterIndex: addRowAfterIndex, removeRow: removeRow, duplicateRow: duplicateRow, entityType: entityType }));
 };
 exports.default = react_1.memo(AttributesFiltersBuilder);

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

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

package/cjs/components/AttributesFiltersBuilder/components/FilterSelector/FilterSelector.js

@@ -31,13 +31,14 @@ var SimpleDropDownSelector_1 = __importDefault(require("../../../SimpleDropDownS
 var helpers_1 = require("../../helpers");
 var styles_1 = __importDefault(require("./styles"));
 var FilterSelector = function (_a) {
-    var rowData = _a.rowData, rowContext = _a.rowContext, textFieldInputRef = _a.textFieldInputRef;
+    var rowData = _a.rowData, rowContext = _a.rowContext, textFieldInputRef = _a.textFieldInputRef, optionsProp = _a.options;
     var styles = styles_1.default();
     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 &&
-        ramda_1.pipe(mdm_sdk_1.getFilterOptionsForQueryBuilder, ramda_1.map(function (value) { return ({ value: value, label: capitalize_1.default(mdm_sdk_1.getFilterOptionLabel(value)) }); }))(attrType, fieldName);
+    var options = optionsProp ||
+        (attrType &&
+            fieldName &&
+            ramda_1.pipe(mdm_sdk_1.getFilterOptionsForQueryBuilder, ramda_1.map(function (value) { return ({ value: value, label: capitalize_1.default(mdm_sdk_1.getFilterOptionLabel(value)) }); }))(attrType, fieldName));
     var onChangeFilter = react_1.useCallback(function (filterOption) {
         var newFilter = {
             fieldName: fieldName,

package/cjs/components/AttributesFiltersBuilder/components/ValuesEditor/ValuesEditor.js

@@ -25,13 +25,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var FilterValueEditor_1 = __importDefault(require("../../../editors/FilterEditor/FilterValueEditor"));
-var MatchRulesSelector_1 = __importDefault(require("../MatchRulesSelector/MatchRulesSelector"));
 var styles_1 = require("./styles");
 var ValuesEditor = function (_a) {
     var rowData = _a.rowData, rowContext = _a.rowContext;
     var styles = styles_1.useStyles();
     var canFilterAcceptValues = (rowData === null || rowData === void 0 ? void 0 : rowData.attribute) && mdm_sdk_1.checkIfOptionHasValues(rowData.filter);
-    var changeFilter = rowContext.changeFilter, entityType = rowContext.entityType;
+    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;
     var valueDataTypeDefinition = attrType && mdm_sdk_1.getAttrDataTypeDefinition(attrType);
     var filterValueDataTypeDefinition = valueDataTypeDefinition && mdm_sdk_1.getDataTypeDefinitionForFilterValue(valueDataTypeDefinition, filter);
@@ -56,14 +55,6 @@ var ValuesEditor = function (_a) {
         };
         changeFilter(newFilter, id);
     }, [changeFilter, id, fieldName, filter]);
-    var renderEditor = function () {
-        if (mdm_sdk_1.isMatchRuleAttrType(attrType)) {
-            return (react_1.default.createElement(MatchRulesSelector_1.default, { entityType: entityType, name: attrType.name, values: values, onChange: changeValue, TextFieldProps: TextFieldProps, fullWidth: true }));
-        }
-        else {
-            return (react_1.default.createElement(FilterValueEditor_1.default, { filter: editorFilter, onChange: changeValue, dataTypeDefinition: filterValueDataTypeDefinition, fullWidth: true, TextFieldProps: TextFieldProps, color: "primary", classes: editorClasses, orientation: "horizontal" }));
-        }
-    };
-    return react_1.default.createElement("div", { className: styles.valuesEditor }, (rowData === null || rowData === void 0 ? void 0 : rowData.attribute) && canFilterAcceptValues && renderEditor());
+    return (react_1.default.createElement("div", { className: styles.valuesEditor }, (rowData === null || rowData === void 0 ? void 0 : rowData.attribute) && canFilterAcceptValues && (react_1.default.createElement(FilterValueEditor_1.default, { filter: editorFilter, onChange: changeValue, dataTypeDefinition: filterValueDataTypeDefinition, fullWidth: true, TextFieldProps: TextFieldProps, color: "primary", classes: editorClasses, orientation: "horizontal" }))));
 };
 exports.default = react_1.memo(ValuesEditor);

package/cjs/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/cjs/components/AttributesFiltersBuilder/index.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AttributesFilterSelector = exports.AttributesValuesEditor = exports.AttributesFiltersBuilder = void 0;
+var AttributesFiltersBuilder_1 = require("./AttributesFiltersBuilder");
+Object.defineProperty(exports, "AttributesFiltersBuilder", { enumerable: true, get: function () { return __importDefault(AttributesFiltersBuilder_1).default; } });
+var ValuesEditor_1 = require("./components/ValuesEditor/ValuesEditor");
+Object.defineProperty(exports, "AttributesValuesEditor", { enumerable: true, get: function () { return __importDefault(ValuesEditor_1).default; } });
+var FilterSelector_1 = require("./components/FilterSelector/FilterSelector");
+Object.defineProperty(exports, "AttributesFilterSelector", { enumerable: true, get: function () { return __importDefault(FilterSelector_1).default; } });

package/cjs/components/AttributesFiltersButton/AttributesFiltersButton.d.ts

@@ -4,6 +4,10 @@ declare type Props = {
     filters: SearchFilter[];
     onChange: (filters: SearchFilter[]) => void;
     attributeTypes: AttributeType[];
+    components?: {
+        ValuesEditor?: React.ElementType;
+        FilterSelector?: React.ElementType;
+    };
 };
-declare const _default: React.MemoExoticComponent<({ filters: filtersProp, attributeTypes, onChange }: Props) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ filters: filtersProp, attributeTypes, onChange, components }: Props) => JSX.Element>;
 export default _default;

package/cjs/components/AttributesFiltersButton/AttributesFiltersButton.js

@@ -34,7 +34,7 @@ var AttributesFiltersBuilder_1 = __importDefault(require("../AttributesFiltersBu
 var ActionButtons_1 = __importDefault(require("./ActionButtons/ActionButtons"));
 var styles_1 = require("./styles");
 var AttributesFiltersButton = function (_a) {
-    var filtersProp = _a.filters, attributeTypes = _a.attributeTypes, onChange = _a.onChange;
+    var filtersProp = _a.filters, attributeTypes = _a.attributeTypes, onChange = _a.onChange, components = _a.components;
     var styles = styles_1.useStyles();
     var buttonRef = react_1.useRef();
     var _b = react_1.useState(false), isOpen = _b[0], setIsOpen = _b[1];
@@ -73,7 +73,7 @@ var AttributesFiltersButton = function (_a) {
             react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(Typography_1.default, { variant: "h6" }, ui_i18n_1.default.text('Filter')),
                 react_1.default.createElement("div", { className: styles.filtersBuilderWrapper },
-                    react_1.default.createElement(AttributesFiltersBuilder_1.default, { attributeTypes: attributeTypes, filters: filters, onChange: setFilters })),
+                    react_1.default.createElement(AttributesFiltersBuilder_1.default, { attributeTypes: attributeTypes, filters: filters, onChange: setFilters, components: components })),
                 react_1.default.createElement(Divider_1.default, { className: styles.divider }),
                 react_1.default.createElement(ActionButtons_1.default, { onApply: applyButtonHandler, onCancel: cancelButtonHandler, onClear: clearAllButtonHandler })))));
 };

package/cjs/components/{AttributesFiltersBuilder/components/MatchRulesSelector → MatchRulesSelector}/MatchRulesSelector.d.ts

@@ -1,12 +1,8 @@
 /// <reference types="react" />
-import { TEntityType } from '@reltio/mdm-sdk';
+import { TEntityType, MatchRulesAttrNames } from '@reltio/mdm-sdk';
 import { TextFieldProps as TextFieldPropsType } from '@material-ui/core/TextField';
-export declare enum MatchRulesAttributeNames {
-    matchRules = "matchRules",
-    MLRecommendedMatch = "MLRecommendedMatch"
-}
 declare type Props = {
-    name: MatchRulesAttributeNames;
+    name: MatchRulesAttrNames;
     values?: string[];
     onChange: (values: string[]) => void;
     TextFieldProps?: Partial<TextFieldPropsType>;

package/cjs/components/{AttributesFiltersBuilder/components/MatchRulesSelector → MatchRulesSelector}/MatchRulesSelector.js

@@ -22,7 +22,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MatchRulesAttributeNames = void 0;
 var react_1 = __importStar(require("react"));
 var react_redux_1 = require("react-redux");
 var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
@@ -35,11 +34,6 @@ var prepareOptions = function (options) {
         return ({ label: label, value: uri });
     });
 };
-var MatchRulesAttributeNames;
-(function (MatchRulesAttributeNames) {
-    MatchRulesAttributeNames["matchRules"] = "matchRules";
-    MatchRulesAttributeNames["MLRecommendedMatch"] = "MLRecommendedMatch";
-})(MatchRulesAttributeNames = exports.MatchRulesAttributeNames || (exports.MatchRulesAttributeNames = {}));
 var MatchRulesSelector = function (_a) {
     var name = _a.name, values = _a.values, onChange = _a.onChange, entityType = _a.entityType, TextFieldProps = _a.TextFieldProps, fullWidth = _a.fullWidth;
     var metadata = react_redux_1.useSelector(mdm_module_1.default.selectors.getMetadata);
@@ -47,7 +41,7 @@ var MatchRulesSelector = function (_a) {
         entityType === null || entityType === void 0 ? void 0 : entityType.uri,
         metadata
     ]), mlMatchRules = _b[0], matchRules = _b[1];
-    var options = react_1.useMemo(function () { return prepareOptions(name === MatchRulesAttributeNames.matchRules ? matchRules : mlMatchRules); }, [name, matchRules, mlMatchRules]);
+    var options = react_1.useMemo(function () { return prepareOptions(name === mdm_sdk_1.MatchRulesAttrNames.matchRules ? matchRules : mlMatchRules); }, [name, matchRules, mlMatchRules]);
     return (react_1.default.createElement(MultiValueSelector_1.default, { values: values, onChange: onChange, options: options, TextFieldProps: TextFieldProps, fullWidth: fullWidth }));
 };
 MatchRulesSelector.displayName = 'MatchRulesSelector';

package/cjs/components/{AttributesFiltersBuilder/components/MultiValueSelector → MultiValueSelector}/MultiValueSelector.js

@@ -47,12 +47,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var ramda_1 = require("ramda");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
-var DropdownIndicatorWithIconButton_1 = __importDefault(require("../../../commonReactSelectComponents/DropdownIndicatorWithIconButton"));
-var OptionWithCheckIcon_1 = __importDefault(require("../../../commonReactSelectComponents/OptionWithCheckIcon/OptionWithCheckIcon"));
-var MenuWithPopper_1 = __importDefault(require("../../../commonReactSelectComponents/MenuWithPopper"));
-var MultiValueChip_1 = __importDefault(require("../../../editors/commonComponents/MultiValueChip/MultiValueChip"));
-var MultiSelect_1 = __importDefault(require("../../../ReactSelect/MultiSelect"));
-var core_1 = require("../../../../core");
+var DropdownIndicatorWithIconButton_1 = __importDefault(require("../commonReactSelectComponents/DropdownIndicatorWithIconButton"));
+var OptionWithCheckIcon_1 = __importDefault(require("../commonReactSelectComponents/OptionWithCheckIcon/OptionWithCheckIcon"));
+var MenuWithPopper_1 = __importDefault(require("../commonReactSelectComponents/MenuWithPopper"));
+var MultiValueChip_1 = __importDefault(require("../editors/commonComponents/MultiValueChip/MultiValueChip"));
+var MultiSelect_1 = __importDefault(require("../ReactSelect/MultiSelect"));
+var core_1 = require("../../core");
 var styles_1 = require("./styles");
 var MultiValueSelector = function (_a) {
     var _b = _a.values, values = _b === void 0 ? [] : _b, onChange = _a.onChange, options = _a.options, fullWidth = _a.fullWidth, _c = _a.TextFieldProps, TextFieldProps = _c === void 0 ? {} : _c;

package/cjs/components/ValueChip/styles.d.ts

@@ -1,2 +1,2 @@
 export const useChipStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"label" | "root" | "deleteIcon">;
-export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"label" | "count" | "container">;
+export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"count" | "label" | "container">;

package/cjs/components/index.d.ts

@@ -132,3 +132,6 @@ export { default as AttributesFiltersButton } from './AttributesFiltersButton/At
 export { default as AttributesFiltersBuilder } from './AttributesFiltersBuilder/AttributesFiltersBuilder';
 export { ConnectionEditor } from './ConnectionEditor';
 export { DragAndDrop } from './DragAndDrop/DragAndDrop';
+export * from './AttributesFiltersBuilder';
+export { default as MultiValueSelector } from './MultiValueSelector/MultiValueSelector';
+export { default as MatchRulesSelector } from './MatchRulesSelector/MatchRulesSelector';

package/cjs/components/index.js

@@ -15,7 +15,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EntityTypeBadge = exports.EntityAvatar = exports.EMPTY_STATE_VARIANTS = exports.EMPTY_STATE_ICONS = exports.EmptyState = exports.NoResults = exports.NoData = exports.DropDownSelector = exports.DropDownMenuButton = exports.Drawer = exports.DataTypeValue = exports.ConnectionRelationTypeSelector = exports.ConfigureColumnsPopup = exports.MenuWithPopper = exports.DropdownIndicatorWithIconButton = exports.DropdownIndicator = exports.CommentsContainer = exports.ColorBar = exports.CollapseButton = exports.CollaborationItem = exports.ClickAwayProvider = exports.BasicViewHeader = exports.BasicViewContent = exports.BasicView = exports.ProfileBandNavigation = exports.AvatarWithFallback = exports.AutoSizeList = exports.ReadOnlyAttributesPager = exports.SimpleAttribute = exports.ReferenceAttribute = exports.NestedAttribute = exports.EditableImageAttributesLine = exports.ImageAttributesLine = exports.ReadOnlyAttributesList = exports.ReadOnlyAttributeValuesBlock = exports.EditableAttribute = exports.ReadOnlyAttribute = exports.CardinalityMessage = exports.AttributesPager = exports.SimpleAttributeEditor = exports.RelationTypeSelector = exports.ReferenceAttributeEditor = exports.NestedAttributeEditor = exports.MoreAttributesButton = exports.EntitySelector = exports.EntityCreator = exports.AttributesList = exports.BranchDecorator = exports.AttributesView = exports.AttributeListItem = void 0;
 exports.SidePanelContentHeader = exports.SidePanel = exports.SidePanelEmptyState = exports.SideButtonsPanel = exports.SelectorWithOnlyOptionAutoSelect = exports.SelectionPopupPopper = exports.SelectionPopup = exports.useKeyboardNavigation = exports.WhiteSearchInput = exports.SearchInput = exports.ResizablePanes = exports.ReltioGridLayout = exports.ReactSortableTreeUtils = exports.ReactSortableTreeHandlers = exports.ReactSortableTree = exports.ReactSelectOptionFilters = exports.MultiSelect = exports.QueryBuilderRowsGroup = exports.QueryBuilderRow = exports.ProfileCard = exports.ProfileBand = exports.PotentialMatchReviewCard = exports.PopupWithArrow = exports.Popper = exports.MultipleInput = exports.ModeSwitcherSelect = exports.ModeSwitcher = exports.TransitiveMatchBlock = exports.SimpleMatchRulesBuilder = exports.SimpleMatchRulesBlock = exports.MatchRulesBlock = exports.LoadingSpinner = exports.Link = exports.LinearLoadIndicator = exports.ImportModes = exports.ImportButton = exports.ImageGalleryDialog = exports.Highlighter = exports.HierarchicalAttributeTooltip = exports.HideOnShrink = exports.FlipCard = exports.FacetViewHeader = exports.ExpandedValueTooltip = exports.ErrorWrapper = exports.ErrorPopup = exports.ErrorBoundary = exports.EntityUriLink = exports.RelationTypesSelector = exports.EntityTypesSelector = exports.EntityTypeIcon = void 0;
-exports.DragAndDrop = exports.ConnectionEditor = exports.AttributesFiltersBuilder = exports.AttributesFiltersButton = exports.AttributeGroupIcon = exports.BasicAttributeSelector = exports.ProfilesList = exports.ActionButtonMode = exports.ActionButton = exports.NotMatchButton = exports.MergeButton = exports.ProfileMatchCard = exports.RelationEditor = exports.OvIcon = exports.ErrorMessage = exports.ReltioMap = exports.ConfirmDeleteDialog = exports.ConfirmationDialog = exports.Marginator = exports.LightArrowTooltip = exports.ArrowExpandButton = exports.ScrollableTabs = exports.ExpandableSearchInput = exports.VirtualGroupedList = exports.ViewMoreToggle = exports.VerticalHeadingsTable = exports.VerticalDivider = exports.AttributeTitle = exports.Spacer = exports.SourceIcon = exports.SmallIconButtonWithTooltip = exports.SmallIconButton = exports.SimpleDropDownSelector = void 0;
+exports.MatchRulesSelector = exports.MultiValueSelector = exports.DragAndDrop = exports.ConnectionEditor = exports.AttributesFiltersBuilder = exports.AttributesFiltersButton = exports.AttributeGroupIcon = exports.BasicAttributeSelector = exports.ProfilesList = exports.ActionButtonMode = exports.ActionButton = exports.NotMatchButton = exports.MergeButton = exports.ProfileMatchCard = exports.RelationEditor = exports.OvIcon = exports.ErrorMessage = exports.ReltioMap = exports.ConfirmDeleteDialog = exports.ConfirmationDialog = exports.Marginator = exports.LightArrowTooltip = exports.ArrowExpandButton = exports.ScrollableTabs = exports.ExpandableSearchInput = exports.VirtualGroupedList = exports.ViewMoreToggle = exports.VerticalHeadingsTable = exports.VerticalDivider = exports.AttributeTitle = exports.Spacer = exports.SourceIcon = exports.SmallIconButtonWithTooltip = exports.SmallIconButton = exports.SimpleDropDownSelector = void 0;
 __exportStar(require("./activityLog"), exports);
 var AttributeListItem_1 = require("./AttributeListItem/AttributeListItem");
 Object.defineProperty(exports, "AttributeListItem", { enumerable: true, get: function () { return __importDefault(AttributeListItem_1).default; } });
@@ -283,3 +283,8 @@ var ConnectionEditor_1 = require("./ConnectionEditor");
 Object.defineProperty(exports, "ConnectionEditor", { enumerable: true, get: function () { return ConnectionEditor_1.ConnectionEditor; } });
 var DragAndDrop_1 = require("./DragAndDrop/DragAndDrop");
 Object.defineProperty(exports, "DragAndDrop", { enumerable: true, get: function () { return DragAndDrop_1.DragAndDrop; } });
+__exportStar(require("./AttributesFiltersBuilder"), exports);
+var MultiValueSelector_1 = require("./MultiValueSelector/MultiValueSelector");
+Object.defineProperty(exports, "MultiValueSelector", { enumerable: true, get: function () { return __importDefault(MultiValueSelector_1).default; } });
+var MatchRulesSelector_1 = require("./MatchRulesSelector/MatchRulesSelector");
+Object.defineProperty(exports, "MatchRulesSelector", { enumerable: true, get: function () { return __importDefault(MatchRulesSelector_1).default; } });

package/cjs/hooks/useAPI/API.js

@@ -164,8 +164,8 @@ var processRequest = function (_a) {
             .then(function (data) {
             worker.postMessage(__assign({ action: 'response', result: { data: data } }, paramObject.params));
         })
-            .catch(function () {
-            worker.postMessage(__assign({ action: 'response', result: { data: {}, headers: '', status: 0 } }, paramObject.params));
+            .catch(function (error) {
+            worker.postMessage(__assign({ action: 'response', result: { data: error, headers: '', status: 0 } }, paramObject.params));
         });
     };
     var shouldSignRequest = helpers_1.isNewUI(servicesPath);

package/cjs/hooks/useAPI/useAPI.d.ts

@@ -1,3 +1,4 @@
+import { CSSProperties } from 'react';
 import { CustomViewConfig } from '@reltio/mdm-sdk';
 export declare const useAPI: (config?: CustomViewConfig) => {
     html: HTMLElement;
@@ -6,7 +7,7 @@ export declare const useAPI: (config?: CustomViewConfig) => {
     customStyles: {
         height?: number | string;
         width?: number | string;
-        'pointer-events'?: string;
+        pointerEvents?: CSSProperties['pointerEvents'];
     };
     onClick: () => void;
 };

package/cjs/hooks/useAPI/useAPI.js

@@ -151,10 +151,10 @@ var useAPI = function (config) {
                     setCustomStyles(function (prev) {
                         var newStyles = __assign({}, (prev || {}));
                         if (!task.params) {
-                            newStyles['pointer-events'] = 'none';
+                            newStyles['pointerEvents'] = 'none';
                         }
                         else {
-                            delete newStyles['pointer-events'];
+                            delete newStyles['pointerEvents'];
                         }
                         return newStyles;
                     });

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

@@ -4,6 +4,10 @@ declare type Props = {
     filters: SearchFilter[];
     onChange: (filters: SearchFilter[]) => void;
     attributeTypes: AttributeType[];
+    components?: {
+        ValuesEditor?: React.ElementType;
+        FilterSelector?: React.ElementType;
+    };
 };
-declare const _default: React.MemoExoticComponent<({ attributeTypes, filters, onChange }: Props) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ attributeTypes, filters, onChange, components }: Props) => JSX.Element>;
 export default _default;

package/esm/components/AttributesFiltersBuilder/AttributesFiltersBuilder.js

@@ -18,10 +18,11 @@ 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 attributeTypes = _a.attributeTypes, filters = _a.filters, onChange = _a.onChange, _b = _a.components, components = _b === void 0 ? {} : _b;
+    var CustomValuesEditor = components.ValuesEditor, CustomFilterSelector = components.FilterSelector;
     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 _c = useStyles(), attrSelector = _c.attrSelector, filterSelector = _c.filterSelector, actionContainer = _c.actionContainer;
     var actualFilters = useRef(filters);
     actualFilters.current = filters;
     var attributeFilterRef = useRef(null);
@@ -83,6 +84,6 @@ var AttributesFiltersBuilder = function (_a) {
     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: ValuesEditor, ActionsComponent: RowActions, LogicOperatorComponent: Stub, filterSelectorRefIndex: lastAttributesCountRef.current, filterSelectorRef: attributeFilterRef, lastRowAttributeSelectorProps: lastRowAttributeSelectorProps, attributesGroup: attributeSelectorItems, changeFilter: changeFilter, addNewFilter: addNewFilter, addRowAfterIndex: addRowAfterIndex, removeRow: removeRow, duplicateRow: duplicateRow, entityType: entityType }));
+    return (React.createElement(QueryBuilderRowsGroup, { rowClasses: rowClasses, rowsData: rowsData, AttributeSelectorComponent: AttributeSelector, FilterSelectorComponent: CustomFilterSelector || FilterSelector, ValuesEditorComponent: CustomValuesEditor || ValuesEditor, ActionsComponent: RowActions, LogicOperatorComponent: Stub, filterSelectorRefIndex: lastAttributesCountRef.current, filterSelectorRef: attributeFilterRef, lastRowAttributeSelectorProps: lastRowAttributeSelectorProps, attributesGroup: attributeSelectorItems, changeFilter: changeFilter, addNewFilter: addNewFilter, addRowAfterIndex: addRowAfterIndex, removeRow: removeRow, duplicateRow: duplicateRow, entityType: entityType }));
 };
 export default memo(AttributesFiltersBuilder);

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

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

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

@@ -7,13 +7,14 @@ import SimpleDropDownSelector from '../../../SimpleDropDownSelector/SimpleDropDo
 import { findValue } from '../../helpers';
 import useStyles from './styles';
 var FilterSelector = function (_a) {
-    var rowData = _a.rowData, rowContext = _a.rowContext, textFieldInputRef = _a.textFieldInputRef;
+    var rowData = _a.rowData, rowContext = _a.rowContext, textFieldInputRef = _a.textFieldInputRef, optionsProp = _a.options;
     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 options = optionsProp ||
+        (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,

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

@@ -1,13 +1,12 @@
 import React, { memo, useMemo, useCallback } from 'react';
-import { checkIfOptionHasValues, getAttrDataTypeDefinition, getDataTypeDefinitionForFilterValue, isMatchRuleAttrType } from '@reltio/mdm-sdk';
+import { checkIfOptionHasValues, getAttrDataTypeDefinition, getDataTypeDefinitionForFilterValue } from '@reltio/mdm-sdk';
 import FilterValueEditor from '../../../editors/FilterEditor/FilterValueEditor';
-import MatchRulesSelector from '../MatchRulesSelector/MatchRulesSelector';
 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, entityType = rowContext.entityType;
+    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;
     var valueDataTypeDefinition = attrType && getAttrDataTypeDefinition(attrType);
     var filterValueDataTypeDefinition = valueDataTypeDefinition && getDataTypeDefinitionForFilterValue(valueDataTypeDefinition, filter);
@@ -32,14 +31,6 @@ var ValuesEditor = function (_a) {
         };
         changeFilter(newFilter, id);
     }, [changeFilter, id, fieldName, filter]);
-    var renderEditor = function () {
-        if (isMatchRuleAttrType(attrType)) {
-            return (React.createElement(MatchRulesSelector, { entityType: entityType, name: attrType.name, values: values, onChange: changeValue, TextFieldProps: TextFieldProps, fullWidth: true }));
-        }
-        else {
-            return (React.createElement(FilterValueEditor, { filter: editorFilter, onChange: changeValue, dataTypeDefinition: filterValueDataTypeDefinition, fullWidth: true, TextFieldProps: TextFieldProps, color: "primary", classes: editorClasses, orientation: "horizontal" }));
-        }
-    };
-    return React.createElement("div", { className: styles.valuesEditor }, (rowData === null || rowData === void 0 ? void 0 : rowData.attribute) && canFilterAcceptValues && renderEditor());
+    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/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/AttributesFiltersButton/AttributesFiltersButton.d.ts

@@ -4,6 +4,10 @@ declare type Props = {
     filters: SearchFilter[];
     onChange: (filters: SearchFilter[]) => void;
     attributeTypes: AttributeType[];
+    components?: {
+        ValuesEditor?: React.ElementType;
+        FilterSelector?: React.ElementType;
+    };
 };
-declare const _default: React.MemoExoticComponent<({ filters: filtersProp, attributeTypes, onChange }: Props) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ filters: filtersProp, attributeTypes, onChange, components }: Props) => JSX.Element>;
 export default _default;

package/esm/components/AttributesFiltersButton/AttributesFiltersButton.js

@@ -10,7 +10,7 @@ import AttributesFiltersBuilder from '../AttributesFiltersBuilder/AttributesFilt
 import ActionButtons from './ActionButtons/ActionButtons';
 import { useStyles } from './styles';
 var AttributesFiltersButton = function (_a) {
-    var filtersProp = _a.filters, attributeTypes = _a.attributeTypes, onChange = _a.onChange;
+    var filtersProp = _a.filters, attributeTypes = _a.attributeTypes, onChange = _a.onChange, components = _a.components;
     var styles = useStyles();
     var buttonRef = useRef();
     var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
@@ -49,7 +49,7 @@ var AttributesFiltersButton = function (_a) {
             React.createElement(React.Fragment, null,
                 React.createElement(Typography, { variant: "h6" }, i18n.text('Filter')),
                 React.createElement("div", { className: styles.filtersBuilderWrapper },
-                    React.createElement(AttributesFiltersBuilder, { attributeTypes: attributeTypes, filters: filters, onChange: setFilters })),
+                    React.createElement(AttributesFiltersBuilder, { attributeTypes: attributeTypes, filters: filters, onChange: setFilters, components: components })),
                 React.createElement(Divider, { className: styles.divider }),
                 React.createElement(ActionButtons, { onApply: applyButtonHandler, onCancel: cancelButtonHandler, onClear: clearAllButtonHandler })))));
 };

package/esm/components/{AttributesFiltersBuilder/components/MatchRulesSelector → MatchRulesSelector}/MatchRulesSelector.d.ts

@@ -1,12 +1,8 @@
 /// <reference types="react" />
-import { TEntityType } from '@reltio/mdm-sdk';
+import { TEntityType, MatchRulesAttrNames } from '@reltio/mdm-sdk';
 import { TextFieldProps as TextFieldPropsType } from '@material-ui/core/TextField';
-export declare enum MatchRulesAttributeNames {
-    matchRules = "matchRules",
-    MLRecommendedMatch = "MLRecommendedMatch"
-}
 declare type Props = {
-    name: MatchRulesAttributeNames;
+    name: MatchRulesAttrNames;
     values?: string[];
     onChange: (values: string[]) => void;
     TextFieldProps?: Partial<TextFieldPropsType>;

package/esm/components/{AttributesFiltersBuilder/components/MatchRulesSelector → MatchRulesSelector}/MatchRulesSelector.js

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import mdmModule from '@reltio/mdm-module';
-import { getMatchGroups, partitionByMlMatch } from '@reltio/mdm-sdk';
+import { getMatchGroups, partitionByMlMatch, MatchRulesAttrNames } from '@reltio/mdm-sdk';
 import MultiValueSelector from '../MultiValueSelector/MultiValueSelector';
 var prepareOptions = function (options) {
     if (options === void 0) { options = []; }
@@ -10,11 +10,6 @@ var prepareOptions = function (options) {
         return ({ label: label, value: uri });
     });
 };
-export var MatchRulesAttributeNames;
-(function (MatchRulesAttributeNames) {
-    MatchRulesAttributeNames["matchRules"] = "matchRules";
-    MatchRulesAttributeNames["MLRecommendedMatch"] = "MLRecommendedMatch";
-})(MatchRulesAttributeNames || (MatchRulesAttributeNames = {}));
 var MatchRulesSelector = function (_a) {
     var name = _a.name, values = _a.values, onChange = _a.onChange, entityType = _a.entityType, TextFieldProps = _a.TextFieldProps, fullWidth = _a.fullWidth;
     var metadata = useSelector(mdmModule.selectors.getMetadata);
@@ -22,7 +17,7 @@ var MatchRulesSelector = function (_a) {
         entityType === null || entityType === void 0 ? void 0 : entityType.uri,
         metadata
     ]), mlMatchRules = _b[0], matchRules = _b[1];
-    var options = useMemo(function () { return prepareOptions(name === MatchRulesAttributeNames.matchRules ? matchRules : mlMatchRules); }, [name, matchRules, mlMatchRules]);
+    var options = useMemo(function () { return prepareOptions(name === MatchRulesAttrNames.matchRules ? matchRules : mlMatchRules); }, [name, matchRules, mlMatchRules]);
     return (React.createElement(MultiValueSelector, { values: values, onChange: onChange, options: options, TextFieldProps: TextFieldProps, fullWidth: fullWidth }));
 };
 MatchRulesSelector.displayName = 'MatchRulesSelector';

package/esm/components/{AttributesFiltersBuilder/components/MultiValueSelector → MultiValueSelector}/MultiValueSelector.js

@@ -23,12 +23,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { memo, useCallback, useRef, useMemo } from 'react';
 import { defaultTo, pipe, pluck } from 'ramda';
 import { isEmptyValue } from '@reltio/mdm-sdk';
-import DropdownIndicatorWithIconButton from '../../../commonReactSelectComponents/DropdownIndicatorWithIconButton';
-import OptionWithCheckIcon from '../../../commonReactSelectComponents/OptionWithCheckIcon/OptionWithCheckIcon';
-import MenuWithPopper from '../../../commonReactSelectComponents/MenuWithPopper';
-import MultiValueChip from '../../../editors/commonComponents/MultiValueChip/MultiValueChip';
-import MultiSelect from '../../../ReactSelect/MultiSelect';
-import { EmptyStub } from '../../../../core';
+import DropdownIndicatorWithIconButton from '../commonReactSelectComponents/DropdownIndicatorWithIconButton';
+import OptionWithCheckIcon from '../commonReactSelectComponents/OptionWithCheckIcon/OptionWithCheckIcon';
+import MenuWithPopper from '../commonReactSelectComponents/MenuWithPopper';
+import MultiValueChip from '../editors/commonComponents/MultiValueChip/MultiValueChip';
+import MultiSelect from '../ReactSelect/MultiSelect';
+import { EmptyStub } from '../../core';
 import { useStyles, customStyles } from './styles';
 var MultiValueSelector = function (_a) {
     var _b = _a.values, values = _b === void 0 ? [] : _b, onChange = _a.onChange, options = _a.options, fullWidth = _a.fullWidth, _c = _a.TextFieldProps, TextFieldProps = _c === void 0 ? {} : _c;

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

@@ -1,2 +1,2 @@
 export const useChipStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"label" | "root" | "deleteIcon">;
-export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"label" | "count" | "container">;
+export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"count" | "label" | "container">;

package/esm/components/index.d.ts

@@ -132,3 +132,6 @@ export { default as AttributesFiltersButton } from './AttributesFiltersButton/At
 export { default as AttributesFiltersBuilder } from './AttributesFiltersBuilder/AttributesFiltersBuilder';
 export { ConnectionEditor } from './ConnectionEditor';
 export { DragAndDrop } from './DragAndDrop/DragAndDrop';
+export * from './AttributesFiltersBuilder';
+export { default as MultiValueSelector } from './MultiValueSelector/MultiValueSelector';
+export { default as MatchRulesSelector } from './MatchRulesSelector/MatchRulesSelector';

package/esm/components/index.js

@@ -132,3 +132,6 @@ export { default as AttributesFiltersButton } from './AttributesFiltersButton/At
 export { default as AttributesFiltersBuilder } from './AttributesFiltersBuilder/AttributesFiltersBuilder';
 export { ConnectionEditor } from './ConnectionEditor';
 export { DragAndDrop } from './DragAndDrop/DragAndDrop';
+export * from './AttributesFiltersBuilder';
+export { default as MultiValueSelector } from './MultiValueSelector/MultiValueSelector';
+export { default as MatchRulesSelector } from './MatchRulesSelector/MatchRulesSelector';

package/esm/hooks/useAPI/API.js

@@ -161,8 +161,8 @@ export var processRequest = function (_a) {
             .then(function (data) {
             worker.postMessage(__assign({ action: 'response', result: { data: data } }, paramObject.params));
         })
-            .catch(function () {
-            worker.postMessage(__assign({ action: 'response', result: { data: {}, headers: '', status: 0 } }, paramObject.params));
+            .catch(function (error) {
+            worker.postMessage(__assign({ action: 'response', result: { data: error, headers: '', status: 0 } }, paramObject.params));
         });
     };
     var shouldSignRequest = isNewUI(servicesPath);

package/esm/hooks/useAPI/useAPI.d.ts

@@ -1,3 +1,4 @@
+import { CSSProperties } from 'react';
 import { CustomViewConfig } from '@reltio/mdm-sdk';
 export declare const useAPI: (config?: CustomViewConfig) => {
     html: HTMLElement;
@@ -6,7 +7,7 @@ export declare const useAPI: (config?: CustomViewConfig) => {
     customStyles: {
         height?: number | string;
         width?: number | string;
-        'pointer-events'?: string;
+        pointerEvents?: CSSProperties['pointerEvents'];
     };
     onClick: () => void;
 };

package/esm/hooks/useAPI/useAPI.js

@@ -129,10 +129,10 @@ export var useAPI = function (config) {
                     setCustomStyles(function (prev) {
                         var newStyles = __assign({}, (prev || {}));
                         if (!task.params) {
-                            newStyles['pointer-events'] = 'none';
+                            newStyles['pointerEvents'] = 'none';
                         }
                         else {
-                            delete newStyles['pointer-events'];
+                            delete newStyles['pointerEvents'];
                         }
                         return newStyles;
                     });

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.1191",
+  "version": "1.4.1194",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",
   "dependencies": {
     "@date-io/moment": "^1.3.5",
     "@react-google-maps/api": "2.7.0",
-    "@reltio/mdm-module": "^1.4.1191",
-    "@reltio/mdm-sdk": "^1.4.1191",
+    "@reltio/mdm-module": "^1.4.1194",
+    "@reltio/mdm-sdk": "^1.4.1194",
     "classnames": "^2.2.5",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",