@reltio/components 1.4.1203 → 1.4.1208

package/cjs/components/DropDownMenuButton/DropDownMenuButton.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { MenuProps } from '@material-ui/core/Menu';
-import { Item } from './MenuItemRenderer';
+import { DropDownMenuItem } from '../../types';
 declare type Props<T> = {
     className?: string;
     buttonComponent?: React.ElementType;
@@ -13,7 +13,7 @@ declare type Props<T> = {
     onMenuClose?: () => void;
     MenuItemRenderer?: (props: any) => JSX.Element;
 };
-declare function DropDownMenuButton<T = Item>({ className, menuId, buttonComponent, buttonContent, menuItems, buttonProps, popoverProps, onMenuOpen, onMenuClose, MenuItemRenderer }: Props<T>): JSX.Element;
+declare function DropDownMenuButton<T = DropDownMenuItem>({ className, menuId, buttonComponent, buttonContent, menuItems, buttonProps, popoverProps, onMenuOpen, onMenuClose, MenuItemRenderer }: Props<T>): JSX.Element;
 declare namespace DropDownMenuButton {
     var displayName: string;
 }

package/cjs/components/DropDownMenuButton/MenuItemRenderer.d.ts

@@ -1,13 +1,7 @@
 import React from 'react';
-export declare type Item = {
-    text?: string;
-    disabled?: boolean;
-    tooltip?: string;
-    id?: string;
-    onClick?: (e: any) => void;
-};
+import { DropDownMenuItem } from '../../types';
 declare type Props = {
-    item: Item;
+    item: DropDownMenuItem;
     onMenuClose?: (e: any) => void;
 };
 declare const MenuItemRenderer: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLLIElement>>;

package/cjs/components/DropDownMenuButton/MenuItemRenderer.js

@@ -24,6 +24,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var ramda_1 = require("ramda");
+var Checkbox_1 = __importDefault(require("@material-ui/core/Checkbox"));
 var MenuItem_1 = __importDefault(require("@material-ui/core/MenuItem"));
 var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
 var withTooltip_1 = __importDefault(require("../../HOCs/withTooltip/withTooltip"));
@@ -32,12 +33,13 @@ var MenuItemWithTooltip = withTooltip_1.default(MenuItem_1.default);
 var MenuItemRenderer = react_1.forwardRef(function (_a, ref) {
     var item = _a.item, _b = _a.onMenuClose, onMenuClose = _b === void 0 ? ramda_1.identity : _b;
     var styles = styles_1.useStyles();
-    var disabled = item.disabled, text = item.text, tooltip = item.tooltip, onClick = item.onClick, _c = item.id, id = _c === void 0 ? '' : _c;
+    var disabled = item.disabled, text = item.text, tooltip = item.tooltip, onClick = item.onClick, _c = item.id, id = _c === void 0 ? '' : _c, selectable = item.selectable, selected = item.selected;
     var handleClick = function (e) {
         onMenuClose(e);
         onClick(e);
     };
     return (react_1.default.createElement(MenuItemWithTooltip, { tooltipTitle: tooltip, showForDisabled: true, classes: { root: styles.menuItem }, onClick: handleClick, disabled: disabled, ref: ref, "data-modal": true, "data-reltio-id": "reltio-search-menu-item" + id },
+        selectable && react_1.default.createElement(Checkbox_1.default, { checked: selected, color: "primary" }),
         react_1.default.createElement(Typography_1.default, { classes: { root: styles.menuText } }, text)));
 });
 MenuItemRenderer.displayName = 'MenuItemRenderer';

package/cjs/components/MergeButton/MergeButton.js

@@ -61,6 +61,6 @@ exports.MergeButton = react_1.forwardRef(function (_a, ref) {
         onError: onError,
         onSuccess: onSuccess
     }).sendMergeAllRequest;
-    return (react_1.default.createElement(ActionButton_1.ActionButton, __assign({ className: className, disabled: disabled, mode: mode, label: disabled ? '' : ui_i18n_1.default.text('Merge'), icon: MergeDark_1.default, onClick: sendMergeAllRequest, onMenuClose: onMenuClose, ref: ref }, otherProps)));
+    return (react_1.default.createElement(ActionButton_1.ActionButton, __assign({ className: className, disabled: disabled, mode: mode, label: ui_i18n_1.default.text('Merge'), icon: MergeDark_1.default, onClick: sendMergeAllRequest, onMenuClose: onMenuClose, ref: ref }, otherProps)));
 });
 exports.MergeButton.displayName = 'mergeButton';

package/cjs/components/NotMatchButton/NotMatchButton.js

@@ -60,6 +60,6 @@ exports.NotMatchButton = react_1.forwardRef(function (_a, ref) {
         onFinishRequest: onFinishRequest,
         onSuccess: onSuccess
     }).sendMarkAsNotMatchRequest;
-    return (react_1.default.createElement(ActionButton_1.ActionButton, __assign({ className: className, disabled: disabled, mode: mode, label: disabled ? '' : ui_i18n_1.default.text('Not a match'), icon: NotMatchDark_1.default, onClick: sendMarkAsNotMatchRequest, onMenuClose: onMenuClose, ref: ref }, otherProps)));
+    return (react_1.default.createElement(ActionButton_1.ActionButton, __assign({ className: className, disabled: disabled, mode: mode, label: ui_i18n_1.default.text('Not a match'), icon: NotMatchDark_1.default, onClick: sendMarkAsNotMatchRequest, onMenuClose: onMenuClose, ref: ref }, otherProps)));
 });
 exports.NotMatchButton.displayName = 'notMatchButton';

package/cjs/components/attributes/readMode/AttributeValuesBlock/AttributeValuesBlock.d.ts

@@ -9,6 +9,7 @@ declare type Props = {
         attributeType: any;
         attributeValue: any;
     }) => JSX.Element;
+    showNonOv?: boolean;
 };
 declare const _default: React.MemoExoticComponent<({ expanded, LabelRenderer, ...props }: Props) => JSX.Element>;
 export default _default;

package/cjs/components/attributes/readMode/ComplexAttribute/ComplexAttribute.js

@@ -44,10 +44,12 @@ var CommentsContainer_1 = __importDefault(require("../../../CommentsContainer/Co
 var classnames_2 = require("../../../../constants/classnames");
 var styles_1 = require("./styles");
 var contexts_1 = require("../../../../contexts");
+var commonStyles_1 = require("../helpers/commonStyles");
 var ComplexAttribute = function (_a) {
     var _b;
     var attributeTypesList = _a.attributeTypesList, attributeValue = _a.attributeValue, label = _a.label, _c = _a.expanded, expandedProp = _c === void 0 ? false : _c, children = _a.children, showNonOv = _a.showNonOv, attributeType = _a.attributeType, LabelRenderer = _a.LabelRenderer;
     var styles = styles_1.useStyles();
+    var ovValueStyles = commonStyles_1.useOvValueStyles();
     var uri = attributeValue.uri;
     var _d = react_1.useState(false), expanded = _d[0], setExpanded = _d[1];
     var _e = react_1.useContext(contexts_1.HighlightedValuesContext), _f = _e.highlightedValuesUris, highlightedValuesUris = _f === void 0 ? [] : _f, highlightedClassName = _e.highlightedClassName;
@@ -67,6 +69,7 @@ var ComplexAttribute = function (_a) {
                         _b[highlightedClassName] = highlightedValuesUris.some(function (uri) {
                             return mdm_sdk_1.areOneHierarchyUris(uri, attributeValue.uri);
                         }),
+                        _b[ovValueStyles.ovFalse] = !mdm_sdk_1.isOv(attributeValue),
                         _b)), "data-reltio-id": "reltio-attribute-complex-label" }, label),
                 react_1.default.createElement("div", { className: styles.spacer }),
                 react_1.default.createElement(CommentsContainer_1.default, { uri: attributeValue.uri, relatedObjectUris: mdm_sdk_1.createRelatedObjectUris(objectType, {

package/cjs/components/attributes/readMode/ReferenceAttribute/ReferenceAttribute.js

@@ -45,15 +45,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var contexts_1 = require("../../../../contexts");
 var ComplexAttribute_1 = __importDefault(require("../ComplexAttribute/ComplexAttribute"));
 var historyAppearance_1 = require("../helpers/historyAppearance");
 var InternalLink_1 = __importDefault(require("../../../InternalLink/InternalLink"));
+var commonStyles_1 = require("../helpers/commonStyles");
 var styles_1 = __importDefault(require("./styles"));
 var ReferenceAttribute = function (_a) {
     var attributeValue = _a.attributeValue, metadata = _a.metadata, attributeType = _a.attributeType, uiPath = _a.uiPath, otherProps = __rest(_a, ["attributeValue", "metadata", "attributeType", "uiPath"]);
     var styles = styles_1.default();
+    var ovValueStyles = commonStyles_1.useOvValueStyles();
     var refEntityURI = mdm_sdk_1.getReferencedEntityUriFromAttrValue(attributeValue);
     var attributeTypeList = react_1.useMemo(function () { return mdm_sdk_1.getAttributeTypeSubAttributes(metadata, attributeType); }, [
         attributeType,
@@ -61,20 +64,15 @@ var ReferenceAttribute = function (_a) {
     ]);
     var appearance = react_1.useContext(contexts_1.HistoryDiffContext).appearance;
     var entityLabel = react_1.useMemo(function () {
+        var _a;
         var attributeAppearance = historyAppearance_1.getHistoryAppearanceByUri(attributeValue.uri, appearance);
         var historyAttributesClassName = historyAppearance_1.getHistoryAttributeClassName(attributeAppearance);
-        return (react_1.default.createElement(InternalLink_1.default, { href: mdm_sdk_1.isEmptyValue(appearance) ? mdm_sdk_1.getEntityLink({ uiPath: uiPath, uri: refEntityURI }) : undefined, className: styles[historyAttributesClassName] },
+        return (react_1.default.createElement(InternalLink_1.default, { href: mdm_sdk_1.isEmptyValue(appearance) ? mdm_sdk_1.getEntityLink({ uiPath: uiPath, uri: refEntityURI }) : undefined, className: classnames_1.default(styles[historyAttributesClassName], (_a = {},
+                _a[ovValueStyles.ovFalse] = !mdm_sdk_1.isOv(attributeValue),
+                _a)) },
             mdm_sdk_1.getLabel(attributeValue.label),
             attributeValue.relationshipLabel && (react_1.default.createElement("span", { className: styles.relationshipLabel }, attributeValue.relationshipLabel))));
-    }, [
-        attributeValue.uri,
-        attributeValue.label,
-        attributeValue.relationshipLabel,
-        appearance,
-        refEntityURI,
-        styles,
-        uiPath
-    ]);
+    }, [attributeValue, appearance, uiPath, refEntityURI, styles, ovValueStyles.ovFalse]);
     return (react_1.default.createElement(ComplexAttribute_1.default, __assign({ attributeTypesList: attributeTypeList, attributeValue: attributeValue, label: entityLabel, attributeType: attributeType }, otherProps)));
 };
 ReferenceAttribute.propTypes = mdm_sdk_1.ReferenceAttributeType;

package/cjs/components/attributes/readMode/SimpleAttribute/SimpleAttribute.js

@@ -33,11 +33,13 @@ var PivotingTooltip_1 = require("../../PivotingAttributes/PivotingTooltip");
 var historyAppearance_1 = require("../helpers/historyAppearance");
 var styles_1 = require("./styles");
 var contexts_1 = require("../../../../contexts");
+var commonStyles_1 = require("../helpers/commonStyles");
 var SimpleAttribute = function (_a) {
-    var _b, _c, _d;
-    var className = _a.className, _e = _a.attributeType, attributeType = _e === void 0 ? null : _e, attributeValue = _a.attributeValue, inlined = _a.inlined;
+    var _b, _c, _d, _e, _f;
+    var className = _a.className, _g = _a.attributeType, attributeType = _g === void 0 ? null : _g, attributeValue = _a.attributeValue, inlined = _a.inlined;
     var styles = styles_1.useStyles();
-    var _f = react_1.useContext(contexts_1.HighlightedValuesContext), _g = _f.highlightedValuesUris, highlightedValuesUris = _g === void 0 ? [] : _g, highlightedClassName = _f.highlightedClassName;
+    var ovValueStyles = commonStyles_1.useOvValueStyles();
+    var _h = react_1.useContext(contexts_1.HighlightedValuesContext), _j = _h.highlightedValuesUris, highlightedValuesUris = _j === void 0 ? [] : _j, highlightedClassName = _h.highlightedClassName;
     var appearance = react_1.useContext(HistoryAppearanceContext_1.HistoryDiffContext).appearance;
     var attributeAppearance = historyAppearance_1.getHistoryAppearanceByUri(attributeValue.uri, appearance);
     var historyClassName = historyAppearance_1.getHistoryAttributeClassName(attributeAppearance);
@@ -49,11 +51,11 @@ var SimpleAttribute = function (_a) {
             _b[highlightedClassName] = highlightedValuesUris.includes(attributeValue.uri),
             _b)) },
         react_1.default.createElement(PivotingTooltip_1.PivotingTooltip, { value: attributeValue, attributeType: attributeType, key: attributeValue.uri, className: classnames_1.default((_c = {}, _c[styles.multilineAttribute] = !inlined, _c)) },
-            react_1.default.createElement("span", { className: styles[historyClassName], "data-reltio-id": "reltio-attribute-value" }, dataTypeValue)))) : (react_1.default.createElement("div", { className: classnames_1.default(className, styles.root, classnames_2.COMMENTS_CONTAINER_VISIBILITY_AREA, (_d = {},
-            _d[highlightedClassName] = highlightedValuesUris.includes(attributeValue.uri),
-            _d)) },
+            react_1.default.createElement("span", { className: classnames_1.default(styles[historyClassName], (_d = {}, _d[ovValueStyles.ovFalse] = !mdm_sdk_1.isOv(attributeValue), _d)), "data-reltio-id": "reltio-attribute-value" }, dataTypeValue)))) : (react_1.default.createElement("div", { className: classnames_1.default(className, styles.root, classnames_2.COMMENTS_CONTAINER_VISIBILITY_AREA, (_e = {},
+            _e[highlightedClassName] = highlightedValuesUris.includes(attributeValue.uri),
+            _e)) },
         react_1.default.createElement(PivotingTooltip_1.PivotingTooltip, { value: attributeValue, attributeType: attributeType, key: attributeValue.uri },
-            react_1.default.createElement("span", { className: styles.attributeValue, "data-reltio-id": "reltio-attribute-value" }, dataTypeValue)),
+            react_1.default.createElement("span", { className: classnames_1.default(styles.attributeValue, (_f = {}, _f[ovValueStyles.ovFalse] = !mdm_sdk_1.isOv(attributeValue), _f)), "data-reltio-id": "reltio-attribute-value" }, dataTypeValue)),
         react_1.default.createElement(CommentsContainer_1.default, { className: styles.commentsContainer, uri: attributeValue.uri, relatedObjectUris: mdm_sdk_1.createRelatedObjectUris(objectType, {
                 uri: attributeValue.uri
             }), objectType: objectType })));

package/cjs/components/attributes/readMode/helpers/commonStyles.d.ts

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

package/cjs/components/attributes/readMode/helpers/commonStyles.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOvValueStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useOvValueStyles = styles_1.makeStyles(function (theme) { return ({
+    ovFalse: theme.inactive
+}); });

package/cjs/components/editors/DependentLookupEditor/DependentLookupEditor.d.ts

@@ -1,6 +1,6 @@
 export const DEBOUNCE_INTERVAL: 400;
 export default DependentLookupEditor;
-declare function DependentLookupEditor({ multiple, value, lookupCode: lookupTypeCode, TextFieldProps, parents, onChange, getLookups, lookups, resolveLookups, fullWidth, disabled, placeholder, autopopulationId, ...otherProps }: {
+declare function DependentLookupEditor({ multiple, value, lookupCode: lookupTypeCode, TextFieldProps, parents, onChange, getLookups, lookups, resolveLookups, fullWidth, disabled, placeholder, autopopulationId, max, ...otherProps }: {
     [x: string]: any;
     multiple: any;
     value: any;
@@ -15,6 +15,7 @@ declare function DependentLookupEditor({ multiple, value, lookupCode: lookupType
     disabled: any;
     placeholder: any;
     autopopulationId: any;
+    max?: number;
 }): JSX.Element;
 declare namespace DependentLookupEditor {
     namespace propTypes {
@@ -41,6 +42,7 @@ declare namespace DependentLookupEditor {
         const placeholder: PropTypes.Requireable<string>;
         const disabled: PropTypes.Requireable<boolean>;
         const autopopulationId: PropTypes.Requireable<string>;
+        const max: PropTypes.Requireable<number>;
     }
 }
 import PropTypes from "prop-types";

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

@@ -64,6 +64,7 @@ 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 hooks_1 = require("../../../hooks");
 var SelectComponents = {
     IndicatorSeparator: utils_1.EmptyStub,
     LoadingIndicator: utils_1.EmptyStub,
@@ -76,7 +77,7 @@ var SelectComponents = {
 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 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, _c = _a.max, max = _c === void 0 ? MAX_DEPENDENT_LOOKUP_VALUES : _c, otherProps = __rest(_a, ["multiple", "value", "lookupCode", "TextFieldProps", "parents", "onChange", "getLookups", "lookups", "resolveLookups", "fullWidth", "disabled", "placeholder", "autopopulationId", "max"]);
     var inputRef = react_1.useRef(null);
     var selectRef = react_1.useRef(null);
     var styles = styles_1.useStyles();
@@ -87,10 +88,10 @@ var DependentLookupEditor = function (_a) {
         onLookupsResolve: function (lookups) { return onChange(multiple ? lookups : lookups[0]); }
     });
     useSavingFocus_1.default(selectRef, inputRef, disabled);
-    var _c = react_1.useState(''), inputValue = _c[0], setInputValue = _c[1];
-    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 _d = react_1.useState(''), inputValue = _d[0], setInputValue = _d[1];
+    var _e = react_1.useState([]), options = _e[0], setOptions = _e[1];
+    var _f = react_1.useState(1), pageNumber = _f[0], setPageNumber = _f[1];
+    var _g = react_1.useState(false), optionsAreLoading = _g[0], setOptionsAreLoading = _g[1];
     var handleInputChange = function (value) {
         if (value !== inputValue) {
             setInputValue(value);
@@ -100,41 +101,35 @@ var DependentLookupEditor = function (_a) {
     };
     var loadOptions = react_1.useCallback(function (value, pageNumber) {
         if (pageNumber === void 0) { pageNumber = 1; }
+        setOptionsAreLoading(true);
         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; });
+            max: max + 1,
+            offset: (pageNumber - 1) * max
         })
+            .then(function (buildOptions) { return helpers_1.buildLookupOptions(buildOptions); })
             .catch(function () { return []; })
-            .finally(function () { return setNextPageIsLoading(false); });
-    }, [loadOptions, inputValue, pageNumber]);
+            .finally(function () { return setOptionsAreLoading(false); });
+    }, [max, lookupTypeCode, parents]);
+    var loadMoreOptions = react_1.useCallback(function () {
+        loadOptions(inputValue, pageNumber + 1).then(function (buildOptions) {
+            setOptions(function (options) { return ramda_1.concat(options.slice(0, pageNumber * max), buildOptions); });
+            setPageNumber(function (page) { return page + 1; });
+        });
+    }, [max, 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([]); })
-            .finally(function () { return setNextPageIsLoading(false); });
+        loadOptions(value).then(function (options) { return callback(options); });
     }, exports.DEBOUNCE_INTERVAL), [loadOptions]);
-    var _g = useDefaultOptions_1.default(loadOptions), defaultOptions = _g.defaultOptions, initialDefaultOptions = _g.initialDefaultOptions, isLoadingDefaultOptions = _g.isLoading;
+    var _h = useDefaultOptions_1.default(loadOptions), defaultOptions = _h.defaultOptions, initialDefaultOptions = _h.initialDefaultOptions, isLoadingDefaultOptions = _h.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
-    ]);
+    hooks_1.useDidUpdateEffect(function () {
+        setPageNumber(1);
+    }, [lookupTypeCode]);
+    var displayedOptions = react_1.useMemo(function () { return options.slice(0, pageNumber * max); }, [max, 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({
@@ -147,10 +142,12 @@ var DependentLookupEditor = function (_a) {
     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: 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) {
+        }, noOptionsMessage: function () {
+            return optionsAreLoading && !showMoreButton ? ui_i18n_1.default.text('Loading...') : ui_i18n_1.default.text('No results found');
+        }, components: SelectComponents, isClearable: true, isSearchable: true, inputValue: inputValue, onInputChange: handleInputChange, loadingMessage: function () { return ui_i18n_1.default.text('Loading...'); }, 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), menuListFooter: showMoreButton && react_1.default.createElement(LoadMoreButton_1.default, { loading: nextPageIsLoading, onClick: loadMoreOptions }) })));
+        }, value: ramda_1.defaultTo(multiple ? [] : null, value), menuListFooter: showMoreButton && react_1.default.createElement(LoadMoreButton_1.default, { loading: optionsAreLoading, onClick: loadMoreOptions }) })));
 };
 DependentLookupEditor.propTypes = {
     multiple: prop_types_1.default.bool,
@@ -169,6 +166,7 @@ DependentLookupEditor.propTypes = {
     fullWidth: prop_types_1.default.bool,
     placeholder: prop_types_1.default.string,
     disabled: prop_types_1.default.bool,
-    autopopulationId: prop_types_1.default.string
+    autopopulationId: prop_types_1.default.string,
+    max: prop_types_1.default.number
 };
 exports.default = DependentLookupEditor;

package/cjs/components/editors/TypeaheadEditor/TypeaheadEditor.d.ts

@@ -1,7 +1,8 @@
 export default TypeaheadEditor;
-declare function TypeaheadEditor({ value, getSuggestions, onChange, multiple, fullWidth, InputProps, ...inputProps }: {
+declare function TypeaheadEditor({ value, max, getSuggestions, onChange, multiple, fullWidth, InputProps, ...inputProps }: {
     [x: string]: any;
     value: any;
+    max?: number;
     getSuggestions: any;
     onChange: any;
     multiple: any;
@@ -17,6 +18,7 @@ declare namespace TypeaheadEditor {
         const onChange: PropTypes.Validator<(...args: any[]) => any>;
         const getSuggestions: PropTypes.Validator<(...args: any[]) => any>;
         const InputProps: PropTypes.Requireable<object>;
+        const max: PropTypes.Requireable<number>;
     }
 }
 import PropTypes from "prop-types";

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

@@ -70,13 +70,13 @@ 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];
+    var value = _a.value, _b = _a.max, max = _b === void 0 ? PAGE_SIZE : _b, getSuggestions = _a.getSuggestions, onChange = _a.onChange, multiple = _a.multiple, fullWidth = _a.fullWidth, _c = _a.InputProps, InputProps = _c === void 0 ? {} : _c, inputProps = __rest(_a, ["value", "max", "getSuggestions", "onChange", "multiple", "fullWidth", "InputProps"]);
+    var _d = react_1.useState([]), suggestions = _d[0], setSuggestions = _d[1];
+    var _e = react_1.useState(false), isPlaceholderVisible = _e[0], setPlaceholderVisibility = _e[1];
+    var _f = react_1.useState(1), pageNumber = _f[0], setPageNumber = _f[1];
+    var _g = react_1.useState(false), nextPageIsLoading = _g[0], setNextPageIsLoading = _g[1];
+    var pageSizeForRequest = max + 1;
+    var _h = react_1.useState(''), currentValue = _h[0], setCurrentValue = _h[1];
     value = ramda_1.defaultTo(multiple ? [] : '', value);
     var inputValue = multiple ? currentValue : value;
     hooks_1.useDidUpdateEffect(function () {
@@ -100,9 +100,9 @@ var TypeaheadEditor = function (_a) {
     var debouncedFetchSuggestions = react_1.useCallback(mdm_sdk_1.debounce(fetchSuggestions, FETCH_DEBOUNCE_INTERVAL), [
         getSuggestions
     ]);
-    var displayedSuggestions = react_1.useMemo(function () { return suggestions.slice(0, pageNumber * PAGE_SIZE); }, [suggestions, pageNumber]);
+    var displayedSuggestions = react_1.useMemo(function () { return suggestions.slice(0, pageNumber * max); }, [suggestions, pageNumber, max]);
     var showMoreButton = suggestions.length > displayedSuggestions.length;
-    var _h = react_1.useState(false), hasHighlightedItem = _h[0], setHasHighlightedItem = _h[1];
+    var _j = react_1.useState(false), hasHighlightedItem = _j[0], setHasHighlightedItem = _j[1];
     var onInputChange = function (_a) {
         var newValue = _a.newValue, method = _a.method;
         switch (method) {
@@ -172,6 +172,7 @@ TypeaheadEditor.propTypes = {
     value: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.arrayOf(prop_types_1.default.string)]),
     onChange: prop_types_1.default.func.isRequired,
     getSuggestions: prop_types_1.default.func.isRequired,
-    InputProps: prop_types_1.default.object
+    InputProps: prop_types_1.default.object,
+    max: prop_types_1.default.number
 };
 exports.default = TypeaheadEditor;

package/cjs/types/index.d.ts

@@ -103,3 +103,20 @@ export declare enum RequestStates {
     LOADED = "loaded",
     ERROR = "error"
 }
+export declare type SelectableItem = {
+    text?: string;
+    disabled?: boolean;
+    tooltip?: string;
+    id?: string;
+    onClick?: (e: any) => void;
+    selected?: boolean;
+};
+export declare type DropDownMenuItem = {
+    text?: string;
+    disabled?: boolean;
+    tooltip?: string;
+    id?: string;
+    onClick?: (e: any) => void;
+    selectable?: boolean;
+    selected?: boolean;
+};

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { MenuProps } from '@material-ui/core/Menu';
-import { Item } from './MenuItemRenderer';
+import { DropDownMenuItem } from '../../types';
 declare type Props<T> = {
     className?: string;
     buttonComponent?: React.ElementType;
@@ -13,7 +13,7 @@ declare type Props<T> = {
     onMenuClose?: () => void;
     MenuItemRenderer?: (props: any) => JSX.Element;
 };
-declare function DropDownMenuButton<T = Item>({ className, menuId, buttonComponent, buttonContent, menuItems, buttonProps, popoverProps, onMenuOpen, onMenuClose, MenuItemRenderer }: Props<T>): JSX.Element;
+declare function DropDownMenuButton<T = DropDownMenuItem>({ className, menuId, buttonComponent, buttonContent, menuItems, buttonProps, popoverProps, onMenuOpen, onMenuClose, MenuItemRenderer }: Props<T>): JSX.Element;
 declare namespace DropDownMenuButton {
     var displayName: string;
 }

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

@@ -1,13 +1,7 @@
 import React from 'react';
-export declare type Item = {
-    text?: string;
-    disabled?: boolean;
-    tooltip?: string;
-    id?: string;
-    onClick?: (e: any) => void;
-};
+import { DropDownMenuItem } from '../../types';
 declare type Props = {
-    item: Item;
+    item: DropDownMenuItem;
     onMenuClose?: (e: any) => void;
 };
 declare const MenuItemRenderer: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLLIElement>>;

package/esm/components/DropDownMenuButton/MenuItemRenderer.js

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

package/esm/components/MergeButton/MergeButton.js

@@ -36,6 +36,6 @@ export var MergeButton = forwardRef(function (_a, ref) {
         onError: onError,
         onSuccess: onSuccess
     }).sendMergeAllRequest;
-    return (React.createElement(ActionButton, __assign({ className: className, disabled: disabled, mode: mode, label: disabled ? '' : i18n.text('Merge'), icon: MergeIcon, onClick: sendMergeAllRequest, onMenuClose: onMenuClose, ref: ref }, otherProps)));
+    return (React.createElement(ActionButton, __assign({ className: className, disabled: disabled, mode: mode, label: i18n.text('Merge'), icon: MergeIcon, onClick: sendMergeAllRequest, onMenuClose: onMenuClose, ref: ref }, otherProps)));
 });
 MergeButton.displayName = 'mergeButton';

package/esm/components/NotMatchButton/NotMatchButton.js

@@ -35,6 +35,6 @@ export var NotMatchButton = forwardRef(function (_a, ref) {
         onFinishRequest: onFinishRequest,
         onSuccess: onSuccess
     }).sendMarkAsNotMatchRequest;
-    return (React.createElement(ActionButton, __assign({ className: className, disabled: disabled, mode: mode, label: disabled ? '' : i18n.text('Not a match'), icon: NotMatchIcon, onClick: sendMarkAsNotMatchRequest, onMenuClose: onMenuClose, ref: ref }, otherProps)));
+    return (React.createElement(ActionButton, __assign({ className: className, disabled: disabled, mode: mode, label: i18n.text('Not a match'), icon: NotMatchIcon, onClick: sendMarkAsNotMatchRequest, onMenuClose: onMenuClose, ref: ref }, otherProps)));
 });
 NotMatchButton.displayName = 'notMatchButton';

package/esm/components/attributes/readMode/AttributeValuesBlock/AttributeValuesBlock.d.ts

@@ -9,6 +9,7 @@ declare type Props = {
         attributeType: any;
         attributeValue: any;
     }) => JSX.Element;
+    showNonOv?: boolean;
 };
 declare const _default: React.MemoExoticComponent<({ expanded, LabelRenderer, ...props }: Props) => JSX.Element>;
 export default _default;

package/esm/components/attributes/readMode/ComplexAttribute/ComplexAttribute.js

@@ -12,7 +12,7 @@ var __assign = (this && this.__assign) || function () {
 import React, { useContext, useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { AttributeTypeType, areOneHierarchyUris, isAnalyticAttribute, NestedAttributeValueType, ReferenceAttributeValueType, CollaborationObjectTypes, createRelatedObjectUris, isRelationAttrType, isSpecialAttribute } from '@reltio/mdm-sdk';
+import { AttributeTypeType, areOneHierarchyUris, isAnalyticAttribute, NestedAttributeValueType, ReferenceAttributeValueType, CollaborationObjectTypes, createRelatedObjectUris, isOv, isRelationAttrType, isSpecialAttribute } from '@reltio/mdm-sdk';
 import Typography from '@material-ui/core/Typography';
 import AttributesList from '../AttributesList/AttributesList';
 import ArrowExpandButton from '../../../ArrowExpandButton/ArrowExpandButton';
@@ -20,10 +20,12 @@ import CommentsContainer from '../../../CommentsContainer/CommentsContainer';
 import { COMMENTS_CONTAINER_VISIBILITY_AREA } from '../../../../constants/classnames';
 import { useStyles } from './styles';
 import { HighlightedValuesContext } from '../../../../contexts';
+import { useOvValueStyles } from '../helpers/commonStyles';
 var ComplexAttribute = function (_a) {
     var _b;
     var attributeTypesList = _a.attributeTypesList, attributeValue = _a.attributeValue, label = _a.label, _c = _a.expanded, expandedProp = _c === void 0 ? false : _c, children = _a.children, showNonOv = _a.showNonOv, attributeType = _a.attributeType, LabelRenderer = _a.LabelRenderer;
     var styles = useStyles();
+    var ovValueStyles = useOvValueStyles();
     var uri = attributeValue.uri;
     var _d = useState(false), expanded = _d[0], setExpanded = _d[1];
     var _e = useContext(HighlightedValuesContext), _f = _e.highlightedValuesUris, highlightedValuesUris = _f === void 0 ? [] : _f, highlightedClassName = _e.highlightedClassName;
@@ -43,6 +45,7 @@ var ComplexAttribute = function (_a) {
                         _b[highlightedClassName] = highlightedValuesUris.some(function (uri) {
                             return areOneHierarchyUris(uri, attributeValue.uri);
                         }),
+                        _b[ovValueStyles.ovFalse] = !isOv(attributeValue),
                         _b)), "data-reltio-id": "reltio-attribute-complex-label" }, label),
                 React.createElement("div", { className: styles.spacer }),
                 React.createElement(CommentsContainer, { uri: attributeValue.uri, relatedObjectUris: createRelatedObjectUris(objectType, {

package/esm/components/attributes/readMode/ReferenceAttribute/ReferenceAttribute.js

@@ -21,15 +21,18 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { memo, useContext, useMemo } from 'react';
-import { getAttributeTypeSubAttributes, getEntityLink, getLabel, getReferencedEntityUriFromAttrValue, isEmptyValue, ReferenceAttributeType } from '@reltio/mdm-sdk';
+import classnames from 'classnames';
+import { getAttributeTypeSubAttributes, getEntityLink, getLabel, getReferencedEntityUriFromAttrValue, isEmptyValue, isOv, ReferenceAttributeType } from '@reltio/mdm-sdk';
 import { HistoryDiffContext } from '../../../../contexts';
 import ComplexAttribute from '../ComplexAttribute/ComplexAttribute';
 import { getHistoryAppearanceByUri, getHistoryAttributeClassName } from '../helpers/historyAppearance';
 import InternalLink from '../../../InternalLink/InternalLink';
+import { useOvValueStyles } from '../helpers/commonStyles';
 import useStyles from './styles';
 var ReferenceAttribute = function (_a) {
     var attributeValue = _a.attributeValue, metadata = _a.metadata, attributeType = _a.attributeType, uiPath = _a.uiPath, otherProps = __rest(_a, ["attributeValue", "metadata", "attributeType", "uiPath"]);
     var styles = useStyles();
+    var ovValueStyles = useOvValueStyles();
     var refEntityURI = getReferencedEntityUriFromAttrValue(attributeValue);
     var attributeTypeList = useMemo(function () { return getAttributeTypeSubAttributes(metadata, attributeType); }, [
         attributeType,
@@ -37,20 +40,15 @@ var ReferenceAttribute = function (_a) {
     ]);
     var appearance = useContext(HistoryDiffContext).appearance;
     var entityLabel = useMemo(function () {
+        var _a;
         var attributeAppearance = getHistoryAppearanceByUri(attributeValue.uri, appearance);
         var historyAttributesClassName = getHistoryAttributeClassName(attributeAppearance);
-        return (React.createElement(InternalLink, { href: isEmptyValue(appearance) ? getEntityLink({ uiPath: uiPath, uri: refEntityURI }) : undefined, className: styles[historyAttributesClassName] },
+        return (React.createElement(InternalLink, { href: isEmptyValue(appearance) ? getEntityLink({ uiPath: uiPath, uri: refEntityURI }) : undefined, className: classnames(styles[historyAttributesClassName], (_a = {},
+                _a[ovValueStyles.ovFalse] = !isOv(attributeValue),
+                _a)) },
             getLabel(attributeValue.label),
             attributeValue.relationshipLabel && (React.createElement("span", { className: styles.relationshipLabel }, attributeValue.relationshipLabel))));
-    }, [
-        attributeValue.uri,
-        attributeValue.label,
-        attributeValue.relationshipLabel,
-        appearance,
-        refEntityURI,
-        styles,
-        uiPath
-    ]);
+    }, [attributeValue, appearance, uiPath, refEntityURI, styles, ovValueStyles.ovFalse]);
     return (React.createElement(ComplexAttribute, __assign({ attributeTypesList: attributeTypeList, attributeValue: attributeValue, label: entityLabel, attributeType: attributeType }, otherProps)));
 };
 ReferenceAttribute.propTypes = ReferenceAttributeType;

package/esm/components/attributes/readMode/SimpleAttribute/SimpleAttribute.js

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { getAttrDataTypeDefinition, getAttributeValue, CollaborationObjectTypes, createRelatedObjectUris, isRelationAttrType } from '@reltio/mdm-sdk';
+import { getAttrDataTypeDefinition, getAttributeValue, CollaborationObjectTypes, createRelatedObjectUris, isOv, isRelationAttrType } from '@reltio/mdm-sdk';
 import classnames from 'classnames';
 import { COMMENTS_CONTAINER_VISIBILITY_AREA } from '../../../../constants/classnames';
 import { HistoryDiffContext } from '../../../../contexts/HistoryAppearanceContext';
@@ -9,11 +9,13 @@ import { PivotingTooltip } from '../../PivotingAttributes/PivotingTooltip';
 import { getHistoryAppearanceByUri, getHistoryAttributeClassName } from '../helpers/historyAppearance';
 import { useStyles } from './styles';
 import { HighlightedValuesContext } from '../../../../contexts';
+import { useOvValueStyles } from '../helpers/commonStyles';
 var SimpleAttribute = function (_a) {
-    var _b, _c, _d;
-    var className = _a.className, _e = _a.attributeType, attributeType = _e === void 0 ? null : _e, attributeValue = _a.attributeValue, inlined = _a.inlined;
+    var _b, _c, _d, _e, _f;
+    var className = _a.className, _g = _a.attributeType, attributeType = _g === void 0 ? null : _g, attributeValue = _a.attributeValue, inlined = _a.inlined;
     var styles = useStyles();
-    var _f = useContext(HighlightedValuesContext), _g = _f.highlightedValuesUris, highlightedValuesUris = _g === void 0 ? [] : _g, highlightedClassName = _f.highlightedClassName;
+    var ovValueStyles = useOvValueStyles();
+    var _h = useContext(HighlightedValuesContext), _j = _h.highlightedValuesUris, highlightedValuesUris = _j === void 0 ? [] : _j, highlightedClassName = _h.highlightedClassName;
     var appearance = useContext(HistoryDiffContext).appearance;
     var attributeAppearance = getHistoryAppearanceByUri(attributeValue.uri, appearance);
     var historyClassName = getHistoryAttributeClassName(attributeAppearance);
@@ -25,11 +27,11 @@ var SimpleAttribute = function (_a) {
             _b[highlightedClassName] = highlightedValuesUris.includes(attributeValue.uri),
             _b)) },
         React.createElement(PivotingTooltip, { value: attributeValue, attributeType: attributeType, key: attributeValue.uri, className: classnames((_c = {}, _c[styles.multilineAttribute] = !inlined, _c)) },
-            React.createElement("span", { className: styles[historyClassName], "data-reltio-id": "reltio-attribute-value" }, dataTypeValue)))) : (React.createElement("div", { className: classnames(className, styles.root, COMMENTS_CONTAINER_VISIBILITY_AREA, (_d = {},
-            _d[highlightedClassName] = highlightedValuesUris.includes(attributeValue.uri),
-            _d)) },
+            React.createElement("span", { className: classnames(styles[historyClassName], (_d = {}, _d[ovValueStyles.ovFalse] = !isOv(attributeValue), _d)), "data-reltio-id": "reltio-attribute-value" }, dataTypeValue)))) : (React.createElement("div", { className: classnames(className, styles.root, COMMENTS_CONTAINER_VISIBILITY_AREA, (_e = {},
+            _e[highlightedClassName] = highlightedValuesUris.includes(attributeValue.uri),
+            _e)) },
         React.createElement(PivotingTooltip, { value: attributeValue, attributeType: attributeType, key: attributeValue.uri },
-            React.createElement("span", { className: styles.attributeValue, "data-reltio-id": "reltio-attribute-value" }, dataTypeValue)),
+            React.createElement("span", { className: classnames(styles.attributeValue, (_f = {}, _f[ovValueStyles.ovFalse] = !isOv(attributeValue), _f)), "data-reltio-id": "reltio-attribute-value" }, dataTypeValue)),
         React.createElement(CommentsContainer, { className: styles.commentsContainer, uri: attributeValue.uri, relatedObjectUris: createRelatedObjectUris(objectType, {
                 uri: attributeValue.uri
             }), objectType: objectType })));

package/esm/components/attributes/readMode/helpers/commonStyles.d.ts

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

package/esm/components/attributes/readMode/helpers/commonStyles.js

@@ -0,0 +1,4 @@
+import { makeStyles } from '@material-ui/core/styles';
+export var useOvValueStyles = makeStyles(function (theme) { return ({
+    ovFalse: theme.inactive
+}); });

package/esm/components/editors/DependentLookupEditor/DependentLookupEditor.d.ts

@@ -1,6 +1,6 @@
 export const DEBOUNCE_INTERVAL: 400;
 export default DependentLookupEditor;
-declare function DependentLookupEditor({ multiple, value, lookupCode: lookupTypeCode, TextFieldProps, parents, onChange, getLookups, lookups, resolveLookups, fullWidth, disabled, placeholder, autopopulationId, ...otherProps }: {
+declare function DependentLookupEditor({ multiple, value, lookupCode: lookupTypeCode, TextFieldProps, parents, onChange, getLookups, lookups, resolveLookups, fullWidth, disabled, placeholder, autopopulationId, max, ...otherProps }: {
     [x: string]: any;
     multiple: any;
     value: any;
@@ -15,6 +15,7 @@ declare function DependentLookupEditor({ multiple, value, lookupCode: lookupType
     disabled: any;
     placeholder: any;
     autopopulationId: any;
+    max?: number;
 }): JSX.Element;
 declare namespace DependentLookupEditor {
     namespace propTypes {
@@ -41,6 +42,7 @@ declare namespace DependentLookupEditor {
         const placeholder: PropTypes.Requireable<string>;
         const disabled: PropTypes.Requireable<boolean>;
         const autopopulationId: PropTypes.Requireable<string>;
+        const max: PropTypes.Requireable<number>;
     }
 }
 import PropTypes from "prop-types";

package/esm/components/editors/DependentLookupEditor/DependentLookupEditor.js

@@ -39,6 +39,7 @@ import useDefaultOptions from './useDefaultOptions';
 import useAutopopulation from './useAutopopulation';
 import useSavingFocus from './useSavingFocus';
 import LoadMoreButton from '../../commonReactSelectComponents/LoadMoreButton';
+import { useDidUpdateEffect } from '../../../hooks';
 var SelectComponents = {
     IndicatorSeparator: EmptyStub,
     LoadingIndicator: EmptyStub,
@@ -51,7 +52,7 @@ var SelectComponents = {
 export var 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 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, _c = _a.max, max = _c === void 0 ? MAX_DEPENDENT_LOOKUP_VALUES : _c, otherProps = __rest(_a, ["multiple", "value", "lookupCode", "TextFieldProps", "parents", "onChange", "getLookups", "lookups", "resolveLookups", "fullWidth", "disabled", "placeholder", "autopopulationId", "max"]);
     var inputRef = useRef(null);
     var selectRef = useRef(null);
     var styles = useStyles();
@@ -62,10 +63,10 @@ var DependentLookupEditor = function (_a) {
         onLookupsResolve: function (lookups) { return onChange(multiple ? lookups : lookups[0]); }
     });
     useSavingFocus(selectRef, inputRef, disabled);
-    var _c = useState(''), inputValue = _c[0], setInputValue = _c[1];
-    var _d = useState([]), options = _d[0], setOptions = _d[1];
-    var _e = useState(1), pageNumber = _e[0], setPageNumber = _e[1];
-    var _f = useState(false), nextPageIsLoading = _f[0], setNextPageIsLoading = _f[1];
+    var _d = useState(''), inputValue = _d[0], setInputValue = _d[1];
+    var _e = useState([]), options = _e[0], setOptions = _e[1];
+    var _f = useState(1), pageNumber = _f[0], setPageNumber = _f[1];
+    var _g = useState(false), optionsAreLoading = _g[0], setOptionsAreLoading = _g[1];
     var handleInputChange = function (value) {
         if (value !== inputValue) {
             setInputValue(value);
@@ -75,41 +76,35 @@ var DependentLookupEditor = function (_a) {
     };
     var loadOptions = useCallback(function (value, pageNumber) {
         if (pageNumber === void 0) { pageNumber = 1; }
+        setOptionsAreLoading(true);
         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 buildLookupOptions(buildOptions); });
-    }, [lookupTypeCode, parents]);
-    var loadMoreOptions = useCallback(function () {
-        setNextPageIsLoading(true);
-        loadOptions(inputValue, pageNumber + 1)
-            .then(function (buildOptions) {
-            setOptions(function (options) {
-                return concat(options.slice(0, pageNumber * MAX_DEPENDENT_LOOKUP_VALUES), buildOptions);
-            });
-            setPageNumber(function (page) { return page + 1; });
+            max: max + 1,
+            offset: (pageNumber - 1) * max
         })
+            .then(function (buildOptions) { return buildLookupOptions(buildOptions); })
             .catch(function () { return []; })
-            .finally(function () { return setNextPageIsLoading(false); });
-    }, [loadOptions, inputValue, pageNumber]);
+            .finally(function () { return setOptionsAreLoading(false); });
+    }, [max, lookupTypeCode, parents]);
+    var loadMoreOptions = useCallback(function () {
+        loadOptions(inputValue, pageNumber + 1).then(function (buildOptions) {
+            setOptions(function (options) { return concat(options.slice(0, pageNumber * max), buildOptions); });
+            setPageNumber(function (page) { return page + 1; });
+        });
+    }, [max, loadOptions, inputValue, pageNumber]);
     var debouncedLoadOptions = useCallback(debounce(function (value, callback) {
-        setNextPageIsLoading(true);
-        loadOptions(value)
-            .then(function (options) { return callback(options); })
-            .catch(function () { return callback([]); })
-            .finally(function () { return setNextPageIsLoading(false); });
+        loadOptions(value).then(function (options) { return callback(options); });
     }, DEBOUNCE_INTERVAL), [loadOptions]);
-    var _g = useDefaultOptions(loadOptions), defaultOptions = _g.defaultOptions, initialDefaultOptions = _g.initialDefaultOptions, isLoadingDefaultOptions = _g.isLoading;
+    var _h = useDefaultOptions(loadOptions), defaultOptions = _h.defaultOptions, initialDefaultOptions = _h.initialDefaultOptions, isLoadingDefaultOptions = _h.isLoading;
     useEffect(function () {
         setOptions(defaultOptions);
     }, [defaultOptions]);
-    var displayedOptions = useMemo(function () { return options.slice(0, pageNumber * MAX_DEPENDENT_LOOKUP_VALUES); }, [
-        options,
-        pageNumber
-    ]);
+    useDidUpdateEffect(function () {
+        setPageNumber(1);
+    }, [lookupTypeCode]);
+    var displayedOptions = useMemo(function () { return options.slice(0, pageNumber * max); }, [max, options, pageNumber]);
     var showMoreButton = options.length > displayedOptions.length;
     var isEmptyValue = multiple ? isEmpty(value) : !(value === null || value === void 0 ? void 0 : value.lookupCode) && !(value === null || value === void 0 ? void 0 : value.value);
     var markAsTouched = useAutopopulation({
@@ -122,10 +117,12 @@ var DependentLookupEditor = function (_a) {
     return (React.createElement(Select, __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 i18n.text('Loading...'); }, noOptionsMessage: function () { return i18n.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: either(prop('value'), prop('lookupCode')), getOptionLabel: getOptionLabel, onChange: function (value) {
+        }, noOptionsMessage: function () {
+            return optionsAreLoading && !showMoreButton ? i18n.text('Loading...') : i18n.text('No results found');
+        }, components: SelectComponents, isClearable: true, isSearchable: true, inputValue: inputValue, onInputChange: handleInputChange, loadingMessage: function () { return i18n.text('Loading...'); }, isLoading: !inputValue && isLoadingDefaultOptions, hideSelectedOptions: false, placeholder: placeholder || '', isDisabled: disabled, options: displayedOptions, getOptionValue: either(prop('value'), prop('lookupCode')), getOptionLabel: getOptionLabel, onChange: function (value) {
             markAsTouched();
             onChange(value);
-        }, value: defaultTo(multiple ? [] : null, value), menuListFooter: showMoreButton && React.createElement(LoadMoreButton, { loading: nextPageIsLoading, onClick: loadMoreOptions }) })));
+        }, value: defaultTo(multiple ? [] : null, value), menuListFooter: showMoreButton && React.createElement(LoadMoreButton, { loading: optionsAreLoading, onClick: loadMoreOptions }) })));
 };
 DependentLookupEditor.propTypes = {
     multiple: PropTypes.bool,
@@ -144,6 +141,7 @@ DependentLookupEditor.propTypes = {
     fullWidth: PropTypes.bool,
     placeholder: PropTypes.string,
     disabled: PropTypes.bool,
-    autopopulationId: PropTypes.string
+    autopopulationId: PropTypes.string,
+    max: PropTypes.number
 };
 export default DependentLookupEditor;

package/esm/components/editors/TypeaheadEditor/TypeaheadEditor.d.ts

@@ -1,7 +1,8 @@
 export default TypeaheadEditor;
-declare function TypeaheadEditor({ value, getSuggestions, onChange, multiple, fullWidth, InputProps, ...inputProps }: {
+declare function TypeaheadEditor({ value, max, getSuggestions, onChange, multiple, fullWidth, InputProps, ...inputProps }: {
     [x: string]: any;
     value: any;
+    max?: number;
     getSuggestions: any;
     onChange: any;
     multiple: any;
@@ -17,6 +18,7 @@ declare namespace TypeaheadEditor {
         const onChange: PropTypes.Validator<(...args: any[]) => any>;
         const getSuggestions: PropTypes.Validator<(...args: any[]) => any>;
         const InputProps: PropTypes.Requireable<object>;
+        const max: PropTypes.Requireable<number>;
     }
 }
 import PropTypes from "prop-types";

package/esm/components/editors/TypeaheadEditor/TypeaheadEditor.js

@@ -46,13 +46,13 @@ import { useDidUpdateEffect } from '../../../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 = useState([]), suggestions = _c[0], setSuggestions = _c[1];
-    var _d = useState(false), isPlaceholderVisible = _d[0], setPlaceholderVisibility = _d[1];
-    var _e = useState(1), pageNumber = _e[0], setPageNumber = _e[1];
-    var _f = useState(false), nextPageIsLoading = _f[0], setNextPageIsLoading = _f[1];
-    var pageSizeForRequest = PAGE_SIZE + 1;
-    var _g = useState(''), currentValue = _g[0], setCurrentValue = _g[1];
+    var value = _a.value, _b = _a.max, max = _b === void 0 ? PAGE_SIZE : _b, getSuggestions = _a.getSuggestions, onChange = _a.onChange, multiple = _a.multiple, fullWidth = _a.fullWidth, _c = _a.InputProps, InputProps = _c === void 0 ? {} : _c, inputProps = __rest(_a, ["value", "max", "getSuggestions", "onChange", "multiple", "fullWidth", "InputProps"]);
+    var _d = useState([]), suggestions = _d[0], setSuggestions = _d[1];
+    var _e = useState(false), isPlaceholderVisible = _e[0], setPlaceholderVisibility = _e[1];
+    var _f = useState(1), pageNumber = _f[0], setPageNumber = _f[1];
+    var _g = useState(false), nextPageIsLoading = _g[0], setNextPageIsLoading = _g[1];
+    var pageSizeForRequest = max + 1;
+    var _h = useState(''), currentValue = _h[0], setCurrentValue = _h[1];
     value = defaultTo(multiple ? [] : '', value);
     var inputValue = multiple ? currentValue : value;
     useDidUpdateEffect(function () {
@@ -76,9 +76,9 @@ var TypeaheadEditor = function (_a) {
     var debouncedFetchSuggestions = useCallback(debounce(fetchSuggestions, FETCH_DEBOUNCE_INTERVAL), [
         getSuggestions
     ]);
-    var displayedSuggestions = useMemo(function () { return suggestions.slice(0, pageNumber * PAGE_SIZE); }, [suggestions, pageNumber]);
+    var displayedSuggestions = useMemo(function () { return suggestions.slice(0, pageNumber * max); }, [suggestions, pageNumber, max]);
     var showMoreButton = suggestions.length > displayedSuggestions.length;
-    var _h = useState(false), hasHighlightedItem = _h[0], setHasHighlightedItem = _h[1];
+    var _j = useState(false), hasHighlightedItem = _j[0], setHasHighlightedItem = _j[1];
     var onInputChange = function (_a) {
         var newValue = _a.newValue, method = _a.method;
         switch (method) {
@@ -148,6 +148,7 @@ TypeaheadEditor.propTypes = {
     value: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
     onChange: PropTypes.func.isRequired,
     getSuggestions: PropTypes.func.isRequired,
-    InputProps: PropTypes.object
+    InputProps: PropTypes.object,
+    max: PropTypes.number
 };
 export default TypeaheadEditor;

package/esm/types/index.d.ts

@@ -103,3 +103,20 @@ export declare enum RequestStates {
     LOADED = "loaded",
     ERROR = "error"
 }
+export declare type SelectableItem = {
+    text?: string;
+    disabled?: boolean;
+    tooltip?: string;
+    id?: string;
+    onClick?: (e: any) => void;
+    selected?: boolean;
+};
+export declare type DropDownMenuItem = {
+    text?: string;
+    disabled?: boolean;
+    tooltip?: string;
+    id?: string;
+    onClick?: (e: any) => void;
+    selectable?: boolean;
+    selected?: boolean;
+};

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.1203",
+  "version": "1.4.1208",
   "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.1203",
-    "@reltio/mdm-sdk": "^1.4.1203",
+    "@reltio/mdm-module": "^1.4.1208",
+    "@reltio/mdm-sdk": "^1.4.1208",
     "classnames": "^2.2.5",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",