@reltio/components 1.4.1193 → 1.4.1197

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

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"label" | "button" | "menuItem" | "menuText" | "startIcon" | "iconButton" | "overflowStyle" | "menuIcon">;
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"label" | "button" | "startIcon" | "menuItem" | "menuText" | "iconButton" | "overflowStyle" | "menuIcon">;

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/attributes/ImageAttributesLine/styles.d.ts

@@ -3,4 +3,4 @@ export declare type SIZES_TYPE = {
     imageWidth: number;
     imageHeight: number;
 };
-export declare const useStyles: (props: SIZES_TYPE) => import("@material-ui/core/styles/withStyles").ClassNameMap<"number" | "imageBox" | "moreButtonContainer" | "moreButton">;
+export declare const useStyles: (props: SIZES_TYPE) => import("@material-ui/core/styles/withStyles").ClassNameMap<"number" | "moreButton" | "imageBox" | "moreButtonContainer">;

package/cjs/components/attributes/editMode/MoreAttributesButton/styles.d.ts

@@ -1 +1 @@
-export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"icon" | "dense" | "buttonLabel" | "moreButton" | "subHeader" | "moreAttributes" | "popupContainer" | "moreAttributesPopup" | "noResultsCaptionContainer">;
+export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"icon" | "dense" | "moreButton" | "buttonLabel" | "subHeader" | "moreAttributes" | "popupContainer" | "moreAttributesPopup" | "noResultsCaptionContainer">;

package/cjs/components/commonReactSelectComponents/LoadMoreButton.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+declare type Props = {
+    loading: boolean;
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onMouseDown?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+};
+declare const LoadMoreButton: ({ loading, onClick, onMouseDown }: Props) => JSX.Element;
+export default LoadMoreButton;

package/cjs/components/commonReactSelectComponents/LoadMoreButton.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var Button_1 = __importDefault(require("@material-ui/core/Button"));
+var core_1 = require("@material-ui/core");
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var styles_1 = require("./styles");
+var LoadMoreButton = function (_a) {
+    var loading = _a.loading, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
+    var styles = styles_1.useStyles();
+    return (react_1.default.createElement("div", { className: styles.loadMoreContainer }, loading ? (react_1.default.createElement(core_1.CircularProgress, { className: styles.loadingSpinner, size: 24 })) : (react_1.default.createElement(Button_1.default, { color: "primary", onClick: onClick, onMouseDown: onMouseDown, className: styles.moreButton },
+        react_1.default.createElement("div", { className: styles.buttonLabel }, ui_i18n_1.default.text('Load more'))))));
+};
+exports.default = LoadMoreButton;

package/cjs/components/commonReactSelectComponents/MenuList.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const MenuList: (props: any) => JSX.Element;
+export default MenuList;

package/cjs/components/commonReactSelectComponents/MenuList.js

@@ -0,0 +1,25 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_select_1 = require("react-select");
+var MenuList = function (props) {
+    var menuListFooter = props.selectProps.menuListFooter, children = props.children;
+    return (react_1.default.createElement(react_select_1.components.MenuList, __assign({}, props),
+        children,
+        menuListFooter));
+};
+exports.default = MenuList;

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

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

package/cjs/components/commonReactSelectComponents/styles.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = styles_1.makeStyles({
+    loadMoreContainer: {
+        display: 'flex',
+        height: '32px'
+    },
+    moreButton: {
+        padding: '9px 38px 9px 38px'
+    },
+    buttonLabel: {
+        fontSize: '14px',
+        fontWeight: 500,
+        lineHeight: '16px',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden'
+    },
+    loadingSpinner: {
+        alignSelf: 'center',
+        marginLeft: '40px'
+    }
+});

package/cjs/components/crosswalks/CrosswalkAttributes/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"attributeValue" | "text" | "input" | "editor" | "moreButton" | "sourceIcon" | "attributeTitle" | "attributeWrapper">;
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"attributeValue" | "text" | "input" | "moreButton" | "editor" | "sourceIcon" | "attributeTitle" | "attributeWrapper">;

package/cjs/components/editors/DataTypeValueEditor/useEditorContext.d.ts

@@ -20,14 +20,20 @@ declare function useEditorContext(fieldName: any, dataTypeDefinition: any): {
 } | {
     lookups: any;
     lookupCode: any;
-    getLookups: (type: any, parents: any, displayNamePrefix: any) => Promise<any>;
+    getLookups: ({ type, parents, displayNamePrefix, max, offset }: {
+        type: any;
+        parents: any;
+        displayNamePrefix: any;
+        max: any;
+        offset: any;
+    }) => Promise<any>;
     resolveLookups: (type: any, codeValues: any) => Promise<void>;
     entries?: undefined;
     getSuggestions?: undefined;
     format?: undefined;
     tenant?: undefined;
 } | {
-    getSuggestions: (searchValue: any) => Promise<string[]>;
+    getSuggestions: (searchValue: any, max: any, pageNo: any) => Promise<string[]>;
     entries?: undefined;
     lookups?: undefined;
     lookupCode?: undefined;

package/cjs/components/editors/DataTypeValueEditor/useEditorContext.js

@@ -41,11 +41,11 @@ var useEditorContext = function (fieldName, dataTypeDefinition) {
     var attributePresentations = react_redux_1.useSelector(mdm_module_1.default.selectors.getAttributePresentations);
     var globalSearchRequestOptions = react_redux_1.useSelector(mdm_module_1.default.selectors.getGlobalSearchRequestOptions);
     var dispatch = react_redux_1.useDispatch();
-    var typeaheadGetSuggestion = react_1.useCallback(function (searchValue) {
+    var typeaheadGetSuggestion = react_1.useCallback(function (searchValue, max, pageNo) {
         return mdm_sdk_1.getFacetedAttributeData({
             fieldName: fieldName,
             searchValue: searchValue,
-            options: __assign({}, globalSearchRequestOptions)
+            options: __assign(__assign({}, globalSearchRequestOptions), { max: max, pageNo: pageNo })
         }).then(function (response) { return Object.keys(response[fieldName]); });
     }, [fieldName, globalSearchRequestOptions]);
     var type = dataTypeDefinition.type, values = dataTypeDefinition.values, lookupCode = dataTypeDefinition.lookupCode, uri = dataTypeDefinition.uri, dependentLookupCode = dataTypeDefinition.dependentLookupCode, options = dataTypeDefinition.options;
@@ -66,8 +66,9 @@ var useEditorContext = function (fieldName, dataTypeDefinition) {
             return {
                 lookups: lookups,
                 lookupCode: dependentLookupCode,
-                getLookups: function (type, parents, displayNamePrefix) {
-                    return mdm_sdk_1.getDependentLookups({ type: type, parents: parents, displayNamePrefix: displayNamePrefix }).then(function (_a) {
+                getLookups: function (_a) {
+                    var type = _a.type, parents = _a.parents, displayNamePrefix = _a.displayNamePrefix, max = _a.max, offset = _a.offset;
+                    return mdm_sdk_1.getDependentLookups({ type: type, parents: parents, displayNamePrefix: displayNamePrefix, max: max, offset: offset }).then(function (_a) {
                         var codeValues = _a.codeValues;
                         return ramda_1.propOr({}, type, codeValues);
                     });

package/cjs/components/editors/DependentLookupEditor/DependentLookupEditor.js

@@ -48,13 +48,14 @@ exports.DEBOUNCE_INTERVAL = void 0;
 var react_1 = __importStar(require("react"));
 var prop_types_1 = __importDefault(require("prop-types"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
-var AsyncSelect_1 = __importDefault(require("../../ReactSelect/AsyncSelect"));
+var Select_1 = __importDefault(require("../../ReactSelect/Select"));
 var ramda_1 = require("ramda");
 var helpers_1 = require("./helpers");
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var utils_1 = require("../../../core/utils");
 var DropdownIndicator_1 = __importDefault(require("../../commonReactSelectComponents/DropdownIndicator"));
 var MenuWithPopper_1 = __importDefault(require("../../commonReactSelectComponents/MenuWithPopper"));
+var MenuList_1 = __importDefault(require("../../commonReactSelectComponents/MenuList"));
 var styles_1 = require("./styles");
 var useLookupsResolver_1 = __importDefault(require("./useLookupsResolver"));
 var MultiValueChip_1 = __importDefault(require("../commonComponents/MultiValueChip/MultiValueChip"));
@@ -62,15 +63,18 @@ var OptionWithCheckIcon_1 = __importDefault(require("../../commonReactSelectComp
 var useDefaultOptions_1 = __importDefault(require("./useDefaultOptions"));
 var useAutopopulation_1 = __importDefault(require("./useAutopopulation"));
 var useSavingFocus_1 = __importDefault(require("./useSavingFocus"));
+var LoadMoreButton_1 = __importDefault(require("../../commonReactSelectComponents/LoadMoreButton"));
 var SelectComponents = {
     IndicatorSeparator: utils_1.EmptyStub,
     LoadingIndicator: utils_1.EmptyStub,
     Option: OptionWithCheckIcon_1.default,
     DropdownIndicator: DropdownIndicator_1.default,
     Menu: MenuWithPopper_1.default,
+    MenuList: MenuList_1.default,
     MultiValue: MultiValueChip_1.default
 };
 exports.DEBOUNCE_INTERVAL = 400;
+var MAX_DEPENDENT_LOOKUP_VALUES = 50;
 var DependentLookupEditor = function (_a) {
     var multiple = _a.multiple, value = _a.value, lookupTypeCode = _a.lookupCode, TextFieldProps = _a.TextFieldProps, parents = _a.parents, onChange = _a.onChange, getLookups = _a.getLookups, _b = _a.lookups, lookups = _b === void 0 ? {} : _b, resolveLookups = _a.resolveLookups, fullWidth = _a.fullWidth, disabled = _a.disabled, placeholder = _a.placeholder, autopopulationId = _a.autopopulationId, otherProps = __rest(_a, ["multiple", "value", "lookupCode", "TextFieldProps", "parents", "onChange", "getLookups", "lookups", "resolveLookups", "fullWidth", "disabled", "placeholder", "autopopulationId"]);
     var inputRef = react_1.useRef(null);
@@ -84,16 +88,54 @@ var DependentLookupEditor = function (_a) {
     });
     useSavingFocus_1.default(selectRef, inputRef, disabled);
     var _c = react_1.useState(''), inputValue = _c[0], setInputValue = _c[1];
-    var loadOptions = react_1.useCallback(function (value) { return getLookups(lookupTypeCode, parents, value).then(helpers_1.buildLookupOptions); }, [
-        lookupTypeCode,
-        parents
-    ]);
+    var _d = react_1.useState([]), options = _d[0], setOptions = _d[1];
+    var _e = react_1.useState(1), pageNumber = _e[0], setPageNumber = _e[1];
+    var _f = react_1.useState(false), nextPageIsLoading = _f[0], setNextPageIsLoading = _f[1];
+    var handleInputChange = function (value) {
+        if (value !== inputValue) {
+            setInputValue(value);
+            setPageNumber(1);
+            debouncedLoadOptions(value, setOptions);
+        }
+    };
+    var loadOptions = react_1.useCallback(function (value, pageNumber) {
+        if (pageNumber === void 0) { pageNumber = 1; }
+        return getLookups({
+            type: lookupTypeCode,
+            parents: parents,
+            displayNamePrefix: value,
+            max: MAX_DEPENDENT_LOOKUP_VALUES + 1,
+            offset: (pageNumber - 1) * MAX_DEPENDENT_LOOKUP_VALUES
+        }).then(function (buildOptions) { return helpers_1.buildLookupOptions(buildOptions); });
+    }, [lookupTypeCode, parents]);
+    var loadMoreOptions = react_1.useCallback(function () {
+        setNextPageIsLoading(true);
+        loadOptions(inputValue, pageNumber + 1)
+            .then(function (buildOptions) {
+            setOptions(function (options) {
+                return ramda_1.concat(options.slice(0, pageNumber * MAX_DEPENDENT_LOOKUP_VALUES), buildOptions);
+            });
+            setPageNumber(function (page) { return page + 1; });
+        })
+            .catch(function () { return []; })
+            .finally(function () { return setNextPageIsLoading(false); });
+    }, [loadOptions, inputValue, pageNumber]);
     var debouncedLoadOptions = react_1.useCallback(mdm_sdk_1.debounce(function (value, callback) {
+        setNextPageIsLoading(true);
         loadOptions(value)
             .then(function (options) { return callback(options); })
-            .catch(function () { return callback([]); });
+            .catch(function () { return callback([]); })
+            .finally(function () { return setNextPageIsLoading(false); });
     }, exports.DEBOUNCE_INTERVAL), [loadOptions]);
-    var _d = useDefaultOptions_1.default(loadOptions), defaultOptions = _d.defaultOptions, initialDefaultOptions = _d.initialDefaultOptions, isLoadingDefaultOptions = _d.isLoading;
+    var _g = useDefaultOptions_1.default(loadOptions), defaultOptions = _g.defaultOptions, initialDefaultOptions = _g.initialDefaultOptions, isLoadingDefaultOptions = _g.isLoading;
+    react_1.useEffect(function () {
+        setOptions(defaultOptions);
+    }, [defaultOptions]);
+    var displayedOptions = react_1.useMemo(function () { return options.slice(0, pageNumber * MAX_DEPENDENT_LOOKUP_VALUES); }, [
+        options,
+        pageNumber
+    ]);
+    var showMoreButton = options.length > displayedOptions.length;
     var isEmptyValue = multiple ? ramda_1.isEmpty(value) : !(value === null || value === void 0 ? void 0 : value.lookupCode) && !(value === null || value === void 0 ? void 0 : value.value);
     var markAsTouched = useAutopopulation_1.default({
         id: autopopulationId,
@@ -102,13 +144,13 @@ var DependentLookupEditor = function (_a) {
         multiple: multiple,
         onChange: onChange
     }).markAsTouched;
-    return (react_1.default.createElement(AsyncSelect_1.default, __assign({}, otherProps, { isMulti: multiple, classes: styles, menuPortalTarget: document.body, menuPlacement: "auto", TextFieldProps: __assign(__assign({}, TextFieldProps), { ref: inputRef, disabled: (TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.disabled) || disabled }), inputRef: inputRef, innerRef: selectRef, styles: {
+    return (react_1.default.createElement(Select_1.default, __assign({}, otherProps, { isMulti: multiple, classes: styles, menuPortalTarget: document.body, menuPlacement: "auto", TextFieldProps: __assign(__assign({}, TextFieldProps), { ref: inputRef, disabled: (TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.disabled) || disabled }), inputRef: inputRef, innerRef: selectRef, styles: {
             menuPortal: function (base) { return (__assign(__assign({}, base), { zIndex: 1300 })); },
             container: function (base) { return (__assign(__assign({}, base), (fullWidth ? { width: '100%' } : {}))); }
-        }, loadingMessage: function () { return ui_i18n_1.default.text('Loading...'); }, noOptionsMessage: function () { return ui_i18n_1.default.text('No results found'); }, components: SelectComponents, isClearable: true, isSearchable: true, inputValue: inputValue, onInputChange: setInputValue, isLoading: !inputValue && isLoadingDefaultOptions, defaultOptions: defaultOptions, hideSelectedOptions: false, placeholder: placeholder || '', isDisabled: disabled, loadOptions: debouncedLoadOptions, getOptionValue: ramda_1.either(ramda_1.prop('value'), ramda_1.prop('lookupCode')), getOptionLabel: helpers_1.getOptionLabel, onChange: function (value) {
+        }, loadingMessage: function () { return ui_i18n_1.default.text('Loading...'); }, noOptionsMessage: function () { return ui_i18n_1.default.text('No results found'); }, components: SelectComponents, isClearable: true, isSearchable: true, inputValue: inputValue, onInputChange: handleInputChange, isLoading: !inputValue && isLoadingDefaultOptions, hideSelectedOptions: false, placeholder: placeholder || '', isDisabled: disabled, options: displayedOptions, getOptionValue: ramda_1.either(ramda_1.prop('value'), ramda_1.prop('lookupCode')), getOptionLabel: helpers_1.getOptionLabel, onChange: function (value) {
             markAsTouched();
             onChange(value);
-        }, value: ramda_1.defaultTo(multiple ? [] : null, value) })));
+        }, value: ramda_1.defaultTo(multiple ? [] : null, value), menuListFooter: showMoreButton && react_1.default.createElement(LoadMoreButton_1.default, { loading: nextPageIsLoading, onClick: loadMoreOptions }) })));
 };
 DependentLookupEditor.propTypes = {
     multiple: prop_types_1.default.bool,

package/cjs/components/editors/TypeaheadEditor/TypeaheadEditor.js

@@ -65,21 +65,44 @@ var utils_1 = require("../../../core/utils");
 var styles_1 = require("./styles");
 var ExpandedValueTooltip_1 = __importDefault(require("../../ExpandedValueTooltip/ExpandedValueTooltip"));
 var ValueChip_1 = __importDefault(require("../../ValueChip/ValueChip"));
+var LoadMoreButton_1 = __importDefault(require("../../commonReactSelectComponents/LoadMoreButton"));
+var hooks_1 = require("../../../hooks");
 var FETCH_DEBOUNCE_INTERVAL = 300;
+var PAGE_SIZE = 50;
 var TypeaheadEditor = function (_a) {
     var value = _a.value, getSuggestions = _a.getSuggestions, onChange = _a.onChange, multiple = _a.multiple, fullWidth = _a.fullWidth, _b = _a.InputProps, InputProps = _b === void 0 ? {} : _b, inputProps = __rest(_a, ["value", "getSuggestions", "onChange", "multiple", "fullWidth", "InputProps"]);
     var _c = react_1.useState([]), suggestions = _c[0], setSuggestions = _c[1];
     var _d = react_1.useState(false), isPlaceholderVisible = _d[0], setPlaceholderVisibility = _d[1];
+    var _e = react_1.useState(1), pageNumber = _e[0], setPageNumber = _e[1];
+    var _f = react_1.useState(false), nextPageIsLoading = _f[0], setNextPageIsLoading = _f[1];
+    var pageSizeForRequest = PAGE_SIZE + 1;
+    var _g = react_1.useState(''), currentValue = _g[0], setCurrentValue = _g[1];
+    value = ramda_1.defaultTo(multiple ? [] : '', value);
+    var inputValue = multiple ? currentValue : value;
+    hooks_1.useDidUpdateEffect(function () {
+        setPageNumber(1);
+    }, [inputValue]);
     var inputRef = react_1.useRef();
     var styles = styles_1.useStyles();
     var isFocused = function () { var _a; return ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === document.activeElement; };
-    var fetchSuggestions = ramda_1.pipe(ramda_1.prop('value'), ramda_1.trim, getSuggestions, ramda_1.andThen(ramda_1.pipe(ramda_1.tap(setSuggestions), ramda_1.both(ramda_1.isEmpty, isFocused), setPlaceholderVisibility)));
+    var fetchSuggestions = ramda_1.pipe(ramda_1.prop('value'), ramda_1.trim, function (value) { return getSuggestions(value, pageSizeForRequest); }, ramda_1.andThen(ramda_1.pipe(ramda_1.tap(setSuggestions), ramda_1.both(ramda_1.isEmpty, isFocused), setPlaceholderVisibility)));
+    var onLoadMoreSuggestions = function () {
+        setNextPageIsLoading(true);
+        getSuggestions(inputValue, pageSizeForRequest, pageNumber + 1)
+            .then(ramda_1.pipe(ramda_1.concat(suggestions), setSuggestions, ramda_1.always(pageNumber + 1), setPageNumber))
+            .finally(function () {
+            setNextPageIsLoading(false);
+        });
+    };
+    var onMouseDown = function (event) {
+        event.preventDefault();
+    };
     var debouncedFetchSuggestions = react_1.useCallback(mdm_sdk_1.debounce(fetchSuggestions, FETCH_DEBOUNCE_INTERVAL), [
         getSuggestions
     ]);
-    value = ramda_1.defaultTo(multiple ? [] : '', value);
-    var _e = react_1.useState(''), currentValue = _e[0], setCurrentValue = _e[1];
-    var _f = react_1.useState(false), hasHighlightedItem = _f[0], setHasHighlightedItem = _f[1];
+    var displayedSuggestions = react_1.useMemo(function () { return suggestions.slice(0, pageNumber * PAGE_SIZE); }, [suggestions, pageNumber]);
+    var showMoreButton = suggestions.length > displayedSuggestions.length;
+    var _h = react_1.useState(false), hasHighlightedItem = _h[0], setHasHighlightedItem = _h[1];
     var onInputChange = function (_a) {
         var newValue = _a.newValue, method = _a.method;
         switch (method) {
@@ -113,11 +136,11 @@ var TypeaheadEditor = function (_a) {
             }
         }
     };
-    return (react_1.default.createElement(react_autosuggest_1.default, { suggestions: suggestions, shouldRenderSuggestions: ramda_1.T, inputProps: __assign(__assign({ value: multiple ? currentValue : value, onChange: ramda_1.pipe(ramda_1.nthArg(1), onInputChange), onKeyDown: function (event) {
+    return (react_1.default.createElement(react_autosuggest_1.default, { suggestions: displayedSuggestions, shouldRenderSuggestions: ramda_1.T, inputProps: __assign(__assign({ value: inputValue, onChange: ramda_1.pipe(ramda_1.nthArg(1), onInputChange), onKeyDown: function (event) {
                 if (event.keyCode === 13 && multiple && !hasHighlightedItem) {
                     onInputChange({ method: 'enter', newValue: currentValue });
                 }
-            }, fullWidth: fullWidth }, inputProps), { autoComplete: 'nope' }), getSuggestionValue: ramda_1.identity, onSuggestionsFetchRequested: ramda_1.ifElse(ramda_1.propEq('reason', 'input-changed'), debouncedFetchSuggestions, fetchSuggestions), onSuggestionsClearRequested: ramda_1.pipe(ramda_1.always([]), setSuggestions, ramda_1.F, setPlaceholderVisibility), renderInputComponent: function (_a) {
+            }, fullWidth: fullWidth }, inputProps), { autoComplete: 'nope' }), getSuggestionValue: ramda_1.identity, onSuggestionsFetchRequested: ramda_1.ifElse(ramda_1.propEq('reason', 'input-changed'), debouncedFetchSuggestions, fetchSuggestions), onSuggestionsClearRequested: ramda_1.pipe(ramda_1.always([]), setSuggestions, ramda_1.F, setPlaceholderVisibility, ramda_1.always(1), setPageNumber), renderInputComponent: function (_a) {
             var _b;
             var ref = _a.ref, onInputChange = _a.onChange, otherProps = __rest(_a, ["ref", "onChange"]);
             var commonClasses = {
@@ -128,7 +151,9 @@ var TypeaheadEditor = function (_a) {
         }, renderSuggestionsContainer: function (_a) {
             var children = _a.children, _b = _a.containerProps, ref = _b.ref, restContainerProps = __rest(_b, ["ref"]);
             return (react_1.default.createElement(Popper_1.default, { anchorEl: inputRef.current, open: Boolean(children) || isPlaceholderVisible },
-                react_1.default.createElement(Paper_1.default, __assign({ ref: ref, square: true }, restContainerProps, { style: { width: ramda_1.prop('clientWidth', inputRef.current) } }), children || react_1.default.createElement(EmptySearchResult_1.NoResults, { className: styles['typeahead__suggestions-placeholder'] }))));
+                react_1.default.createElement(Paper_1.default, __assign({ ref: ref, square: true }, restContainerProps, { style: { width: ramda_1.prop('clientWidth', inputRef.current) } }),
+                    children || react_1.default.createElement(EmptySearchResult_1.NoResults, { className: styles['typeahead__suggestions-placeholder'] }),
+                    showMoreButton && !isPlaceholderVisible && (react_1.default.createElement(LoadMoreButton_1.default, { onClick: onLoadMoreSuggestions, onMouseDown: onMouseDown, loading: nextPageIsLoading })))));
         }, renderSuggestion: function (suggestion, _a) {
             var isHighlighted = _a.isHighlighted;
             return (react_1.default.createElement(MenuItem_1.default, { className: styles['typeahead__suggestions-menuItem'], selected: isHighlighted, component: "div" },