@reltio/components 1.4.1737 → 1.4.1739

package/cjs/components/BasicTableView/BasicTableHeader/ColumnsSettings/ColumnsSettings.d.ts

@@ -1,19 +1,11 @@
+/// <reference types="react" />
+import { ColumnData } from '../../types';
+type Props = {
+    columnsData: ColumnData[];
+    selectedColumns: string[];
+    onChangeColumns: (columns: string[]) => void;
+    title?: string;
+    tooltipTitle?: string;
+};
+declare const ColumnsSettings: ({ columnsData, selectedColumns, onChangeColumns, title, tooltipTitle }: Props) => JSX.Element;
 export default ColumnsSettings;
-declare function ColumnsSettings({ columnsData, selectedColumns, onChangeColumns, title, tooltipTitle }: {
-    columnsData: any;
-    selectedColumns: any;
-    onChangeColumns: any;
-    title: any;
-    tooltipTitle: any;
-}): JSX.Element;
-declare namespace ColumnsSettings {
-    namespace propTypes {
-        export { ColumnsDataType as columnsData };
-        export const selectedColumns: PropTypes.Requireable<string[]>;
-        export const onChangeColumns: PropTypes.Requireable<(...args: any[]) => any>;
-        export const title: PropTypes.Requireable<string>;
-        export const tooltipTitle: PropTypes.Requireable<string>;
-    }
-}
-import { ColumnsDataType } from '../../../../constants';
-import PropTypes from 'prop-types';

package/cjs/components/BasicTableView/BasicTableHeader/ColumnsSettings/ColumnsSettings.js

@@ -27,13 +27,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
-var prop_types_1 = __importDefault(require("prop-types"));
-var constants_1 = require("../../../../constants");
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var ramda_1 = require("ramda");
 var Table_1 = __importDefault(require("../../../../icons/Table"));
 var SmallIconButton_1 = require("../../../SmallIconButton");
-var ramda_1 = require("ramda");
 var ColumnsSettingsPopup_1 = require("./ColumnsSettingsPopup");
-var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var columnHelpers_1 = require("./columnHelpers");
 var ColumnsSettings = function (_a) {
     var columnsData = _a.columnsData, selectedColumns = _a.selectedColumns, onChangeColumns = _a.onChangeColumns, title = _a.title, tooltipTitle = _a.tooltipTitle;
@@ -48,14 +46,7 @@ var ColumnsSettings = function (_a) {
             : (0, ramda_1.uniq)((0, ramda_1.concat)(selectedColumns, changedColumns)));
     }, [selectedColumns, onChangeColumns]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { tooltipTitle: tooltipTitle || ui_i18n_1.default.text('Show/hide columns'), size: "L", icon: Table_1.default, onClick: openPopup }),
+        react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { "data-reltio-id": "reltio-columns-settings-button", tooltipTitle: tooltipTitle || ui_i18n_1.default.text('Show/hide columns'), size: "L", icon: Table_1.default, onClick: openPopup }),
         react_1.default.createElement(ColumnsSettingsPopup_1.ColumnsSettingsPopup, { onColumnClick: handleColumnClick, anchorEl: anchorEl, columnsData: columnsData, onClose: closePopup, title: title, selectedColumns: selectedColumns })));
 };
-ColumnsSettings.propTypes = {
-    columnsData: constants_1.ColumnsDataType,
-    selectedColumns: prop_types_1.default.arrayOf(prop_types_1.default.string),
-    onChangeColumns: prop_types_1.default.func,
-    title: prop_types_1.default.string,
-    tooltipTitle: prop_types_1.default.string
-};
 exports.default = ColumnsSettings;

package/cjs/components/BasicTableView/types/index.d.ts

@@ -21,7 +21,7 @@ export type ColumnData = {
     sortable?: boolean;
     filterable?: boolean;
     resizable?: boolean;
-    nestedPath?: string;
+    nestedPath?: string[];
     headCellRenderer?: React.ElementType;
     rowCellValueRenderer?: React.ElementType;
     draggable?: boolean;
@@ -32,6 +32,12 @@ export type ColumnData = {
     }>;
     [key: string]: unknown;
 };
+export type GroupedColumns<TColumnData = ColumnData> = {
+    id: string;
+    label: string;
+    columns: TColumnData[];
+};
+export type GroupedColumnsData<TColumnData = ColumnData> = GroupedColumns<TColumnData> | TColumnData;
 export type CollapseContext = ReturnType<typeof useCollapsibleTableRows>['collapseContextValue'];
 export type RowId = string | number;
 export type RowValue = {

package/cjs/components/BasicViewHeader/BasicViewHeader.js

@@ -34,7 +34,7 @@ var BasicViewHeader = function (_a) {
     var _b = _a.title, title = _b === void 0 ? '' : _b, _c = _a.children, children = _c === void 0 ? null : _c, _d = _a.classes, classes = _d === void 0 ? {} : _d, otherProps = __rest(_a, ["title", "children", "classes"]);
     var styles = (0, styles_1.useStyles)();
     return (react_1.default.createElement(Toolbar_1.default, __assign({ className: classes.root, classes: { root: styles.toolbar } }, otherProps),
-        react_1.default.createElement(Typography_1.default, { className: classes.title, classes: { root: styles.title }, variant: "h6" }, ui_i18n_1.default.text(title)),
+        title && (react_1.default.createElement(Typography_1.default, { className: classes.title, classes: { root: styles.title }, variant: "h6" }, ui_i18n_1.default.text(title))),
         children));
 };
 exports.default = BasicViewHeader;

package/cjs/components/MultipleInput/MultipleInput.d.ts

@@ -1,28 +1,14 @@
+/// <reference types="react" />
+import { TextFieldProps } from '@mui/material/TextField';
+type MultipleInputProps = Omit<TextFieldProps, 'classes' | 'value' | 'onChange' | 'onKeyPress' | 'onKeyDown' | 'onFocus' | 'onBlur'> & {
+    values?: string | string[];
+    InputProps?: Omit<TextFieldProps['InputProps'], 'startAdornment' | 'inputComponent'>;
+    classes?: {
+        root?: string;
+    };
+    isCrossedOut?: boolean;
+    onChange?: (values: string[]) => void;
+    getValueLabel?: (value: string) => string;
+};
+declare const MultipleInput: ({ values: valuesProp, InputProps, inputProps, classes, isCrossedOut, onChange, getValueLabel, ...otherProps }: MultipleInputProps) => JSX.Element;
 export default MultipleInput;
-declare function MultipleInput({ values, InputProps, inputProps, classes, isCrossedOut, onChange, getValueLabel, ...otherProps }: {
-    [x: string]: any;
-    values?: any[];
-    InputProps?: {};
-    inputProps?: {};
-    classes?: {};
-    isCrossedOut: any;
-    onChange?: () => void;
-    getValueLabel?: any;
-}): JSX.Element;
-declare namespace MultipleInput {
-    namespace propTypes {
-        const values: PropTypes.Requireable<string[]>;
-        const InputProps: PropTypes.Requireable<PropTypes.InferProps<{
-            classes: PropTypes.Requireable<PropTypes.InferProps<{
-                root: PropTypes.Requireable<string>;
-            }>>;
-            inputComponent: PropTypes.Requireable<PropTypes.ReactComponentLike>;
-        }>>;
-        const inputProps: PropTypes.Requireable<object>;
-        const onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        const classes: PropTypes.Requireable<object>;
-        const getValueLabel: PropTypes.Requireable<(...args: any[]) => any>;
-        const isCrossedOut: PropTypes.Requireable<boolean>;
-    }
-}
-import PropTypes from 'prop-types';

package/cjs/components/MultipleInput/MultipleInput.js

@@ -57,38 +57,38 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var ramda_1 = require("ramda");
 var react_input_autosize_1 = __importDefault(require("react-input-autosize"));
 var classnames_1 = __importDefault(require("classnames"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var TextField_1 = __importDefault(require("@mui/material/TextField"));
-var prop_types_1 = __importDefault(require("prop-types"));
-var react_1 = __importStar(require("react"));
-var ramda_1 = require("ramda");
+var Tooltip_1 = __importDefault(require("@mui/material/Tooltip"));
 var utils_1 = require("../../core/utils");
-var styles_1 = require("./styles");
 var ValueChip_1 = __importDefault(require("../ValueChip/ValueChip"));
-var Tooltip_1 = __importDefault(require("@mui/material/Tooltip"));
-var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var styles_1 = require("./styles");
+var EMPTY_VALUES_EDIT_HINT = ui_i18n_1.default.text('Press Enter to add. You may enter multiple values');
+var isEmptyValue = (0, ramda_1.pipe)(ramda_1.trim, ramda_1.isEmpty);
 var AutosizeInputWrapper = (0, react_1.forwardRef)(function (props, ref) {
     var CustomInputComponent = props.CustomInputComponent, other = __rest(props, ["CustomInputComponent"]);
     return CustomInputComponent ? (react_1.default.createElement(CustomInputComponent, __assign({}, other, { ref: ref, customInput: react_input_autosize_1.default }))) : (react_1.default.createElement(react_input_autosize_1.default, __assign({}, other, { ref: ref })));
 });
-AutosizeInputWrapper.propTypes = {
-    CustomInputComponent: prop_types_1.default.elementType
-};
 AutosizeInputWrapper.displayName = 'AutosizeInputWrapper';
-var BACKSPACE_KEY_CODE = 8;
-var EMPTY_VALUES_EDIT_HINT = ui_i18n_1.default.text('Press Enter to add. You may enter multiple values');
-var isEmptyValue = (0, ramda_1.pipe)(ramda_1.trim, ramda_1.isEmpty);
 var MultipleInput = function (_a) {
     var _b;
-    var _c = _a.values, values = _c === void 0 ? [] : _c, _d = _a.InputProps, InputProps = _d === void 0 ? {} : _d, _e = _a.inputProps, inputProps = _e === void 0 ? {} : _e, _f = _a.classes, classes = _f === void 0 ? {} : _f, isCrossedOut = _a.isCrossedOut, _g = _a.onChange, onChange = _g === void 0 ? utils_1.noop : _g, _h = _a.getValueLabel, getValueLabel = _h === void 0 ? ramda_1.identity : _h, otherProps = __rest(_a, ["values", "InputProps", "inputProps", "classes", "isCrossedOut", "onChange", "getValueLabel"]);
+    var _c = _a.values, valuesProp = _c === void 0 ? [] : _c, _d = _a.InputProps, InputProps = _d === void 0 ? {} : _d, _e = _a.inputProps, inputProps = _e === void 0 ? {} : _e, _f = _a.classes, classes = _f === void 0 ? {} : _f, isCrossedOut = _a.isCrossedOut, _g = _a.onChange, onChange = _g === void 0 ? utils_1.noop : _g, _h = _a.getValueLabel, getValueLabel = _h === void 0 ? ramda_1.identity : _h, otherProps = __rest(_a, ["values", "InputProps", "inputProps", "classes", "isCrossedOut", "onChange", "getValueLabel"]);
     var styles = (0, styles_1.useStyles)();
     var _j = InputProps.classes || {}, root = _j.root, InputClasses = __rest(_j, ["root"]);
     var _k = (0, react_1.useState)(''), inputValue = _k[0], setInputValue = _k[1];
+    var _l = (0, react_1.useState)(false), isFocused = _l[0], setIsFocused = _l[1];
+    var values = (0, mdm_sdk_1.wrapInArrayIfNeeded)(valuesProp);
+    var hasValues = values.length > 0;
     var clearInputValue = function () { return setInputValue(''); };
+    var setFocused = function () { return setIsFocused(true); };
+    var setUnfocused = function () { return setIsFocused(false); };
     var removeValueAt = function (index) { return onChange((0, ramda_1.remove)(index, 1, values)); };
     var appendValue = function (value) { return onChange((0, ramda_1.uniq)(__spreadArray(__spreadArray([], values, true), [value], false))); };
-    var hasValues = values.length > 0;
     var appendInputValueIfNotEmpty = function () {
         if (!isEmptyValue(inputValue)) {
             appendValue(inputValue);
@@ -100,25 +100,10 @@ var MultipleInput = function (_a) {
             removeValueAt(-1);
         }
     };
-    var _l = (0, react_1.useState)(false), isFocused = _l[0], setIsFocused = _l[1];
-    var setFocused = function () { return setIsFocused(true); };
-    var setUnfocused = function () { return setIsFocused(false); };
     var hintText = !hasValues && isFocused ? EMPTY_VALUES_EDIT_HINT : '';
     return (react_1.default.createElement(Tooltip_1.default, { title: hintText },
         react_1.default.createElement(TextField_1.default, __assign({ variant: "standard" }, otherProps, { classes: {
                 root: classes.root
-            }, value: inputValue, onChange: (0, ramda_1.pipe)(utils_1.getValue, setInputValue), InputProps: __assign(__assign({}, InputProps), { startAdornment: values.map(function (value, index) { return (react_1.default.createElement(ValueChip_1.default, { key: value, label: getValueLabel(value), onDelete: function () { return removeValueAt(index); } })); }), inputComponent: AutosizeInputWrapper, classes: __assign({ root: (0, classnames_1.default)(styles.inputRoot, root, (_b = {}, _b[styles.isCrossedOut] = isCrossedOut, _b)), input: (0, classnames_1.default)(styles.autosizeInput, InputClasses.input) }, InputClasses) }), inputProps: __assign(__assign({}, inputProps), { CustomInputComponent: InputProps.inputComponent }), onKeyPress: (0, ramda_1.when)((0, ramda_1.propEq)('key', 'Enter'), appendInputValueIfNotEmpty), onKeyDown: (0, ramda_1.when)((0, ramda_1.propEq)('keyCode', BACKSPACE_KEY_CODE), popLastValueIfInputIsEmpty), onFocus: setFocused, onBlur: (0, ramda_1.pipe)(appendInputValueIfNotEmpty, setUnfocused) }))));
-};
-MultipleInput.propTypes = {
-    values: prop_types_1.default.arrayOf(prop_types_1.default.string),
-    InputProps: prop_types_1.default.shape({
-        classes: prop_types_1.default.shape({ root: prop_types_1.default.string }),
-        inputComponent: prop_types_1.default.elementType
-    }),
-    inputProps: prop_types_1.default.object,
-    onChange: prop_types_1.default.func,
-    classes: prop_types_1.default.object,
-    getValueLabel: prop_types_1.default.func,
-    isCrossedOut: prop_types_1.default.bool
+            }, value: inputValue, onChange: (0, ramda_1.pipe)(utils_1.getValue, setInputValue), InputProps: __assign(__assign({}, InputProps), { startAdornment: values.map(function (value, index) { return (react_1.default.createElement(ValueChip_1.default, { key: value, label: getValueLabel(value), onDelete: function () { return removeValueAt(index); } })); }), inputComponent: AutosizeInputWrapper, classes: __assign({ root: (0, classnames_1.default)(styles.inputRoot, root, (_b = {}, _b[styles.isCrossedOut] = isCrossedOut, _b)), input: (0, classnames_1.default)(styles.autosizeInput, InputClasses.input) }, InputClasses) }), inputProps: __assign(__assign({}, inputProps), { CustomInputComponent: InputProps.inputComponent }), onKeyPress: (0, ramda_1.when)((0, ramda_1.propEq)('key', 'Enter'), appendInputValueIfNotEmpty), onKeyDown: (0, ramda_1.when)((0, ramda_1.propEq)('key', 'Backspace'), popLastValueIfInputIsEmpty), onFocus: setFocused, onBlur: (0, ramda_1.pipe)(appendInputValueIfNotEmpty, setUnfocused) }))));
 };
 exports.default = MultipleInput;

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

@@ -1 +1 @@
-export const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"inputRoot" | "isCrossedOut" | "autosizeInput">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"inputRoot" | "isCrossedOut" | "autosizeInput">;

package/cjs/components/ScrollableTabs/ScrollableTabs.d.ts

@@ -8,7 +8,7 @@ export type Tab = {
     dataReltioId?: string;
 };
 type Props = Omit<TabsProps, 'onChange' | 'value' | 'scrollButtons'> & {
-    value: string;
+    value: string | false;
     tabs: Tab[];
     onChange: (value: string) => void;
     tabClasses?: TabProps['classes'];

package/cjs/components/SearchInput/SearchInput.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { InputProps } from '@mui/material/Input';
 export type SearchInputProps = InputProps & {
     value?: string;
-    autofocus: boolean;
+    autofocus?: boolean;
     onSearch: (value?: string) => void;
     rootRef?: React.MutableRefObject<HTMLInputElement>;
     height: number;

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

@@ -8,7 +8,7 @@ type CommonProps = Omit<TextFieldProps, 'onChange' | 'value'> & {
     isCrossedOut?: boolean;
 };
 type MultipleProps = CommonProps & {
-    value?: string[];
+    value?: string | string[];
     onChange: (values: string[]) => void;
     multiple: true;
 };
@@ -18,5 +18,5 @@ type SingleProps = CommonProps & {
     multiple?: false;
 };
 export type Props = MultipleProps | SingleProps;
-declare const TypeaheadEditor: ({ value, max, getSuggestions, onChange, multiple, fullWidth, InputProps, isCrossedOut, ...inputProps }: Props) => JSX.Element;
+declare const TypeaheadEditor: ({ value: valueProp, max, getSuggestions, onChange, multiple, fullWidth, InputProps, isCrossedOut, ...inputProps }: Props) => JSX.Element;
 export default TypeaheadEditor;

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

@@ -119,7 +119,7 @@ var ChangeMethod;
     ChangeMethod["Enter"] = "enter";
 })(ChangeMethod || (ChangeMethod = {}));
 var TypeaheadEditor = function (_a) {
-    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, _d = _a.isCrossedOut, isCrossedOut = _d === void 0 ? false : _d, inputProps = __rest(_a, ["value", "max", "getSuggestions", "onChange", "multiple", "fullWidth", "InputProps", "isCrossedOut"]);
+    var valueProp = _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, _d = _a.isCrossedOut, isCrossedOut = _d === void 0 ? false : _d, inputProps = __rest(_a, ["value", "max", "getSuggestions", "onChange", "multiple", "fullWidth", "InputProps", "isCrossedOut"]);
     var styles = (0, styles_1.useStyles)();
     var inputRef = (0, react_1.useRef)(null);
     var safePromise = (0, hooks_1.useSafePromise)();
@@ -132,6 +132,7 @@ var TypeaheadEditor = function (_a) {
     var pageSizeForRequest = max + 1;
     var displayedSuggestions = (0, react_1.useMemo)(function () { return suggestions.slice(0, pageNumber * max); }, [suggestions, pageNumber, max]);
     var showMoreButton = suggestions.length > displayedSuggestions.length;
+    var value = multiple === true && !(0, ramda_1.isNil)(valueProp) ? (0, mdm_sdk_1.wrapInArrayIfNeeded)(valueProp) : valueProp;
     var isFocused = function () { var _a; return ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === document.activeElement; };
     var fetchSuggestions = (0, react_1.useCallback)(function (_a) {
         var value = _a.value;
@@ -226,8 +227,9 @@ var TypeaheadEditor = function (_a) {
             onChange(inputValue);
     }, [inputValue, onChange, multiple]);
     (0, react_1.useEffect)(function () {
+        var _a;
         if (multiple !== true)
-            setInputValue(value !== null && value !== void 0 ? value : '');
+            setInputValue((_a = value) !== null && _a !== void 0 ? _a : '');
     }, [value, multiple]);
     (0, hooks_1.useDidUpdateEffect)(function () {
         setPageNumber(1);

package/cjs/hooks/index.d.ts

@@ -1,4 +1,5 @@
 export { useScrollToAttributeError } from './useScrollToAttributeError/useScrollToAttributeError';
+export { useMatchesColumnsData } from './useMatchesColumnsData/useMatchesColumnsData';
 export { useActions } from './useActions';
 export { useAPI } from './useAPI';
 export { useAsyncMount } from './useAsyncMount';

package/cjs/hooks/index.js

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useAutoFocus = exports.useExpandInvalidRelations = exports.useLayoutResetter = exports.useIsMountedRef = exports.useSnackbar = exports.useSavedStateForEntityType = exports.useReadableSearchState = exports.useEditableConnection = exports.useCustomScripts = exports.useMarkAsNotMatchRequest = exports.useMergeAllRequest = exports.usePagingSimulator = exports.useMatchesLoader = exports.useConfigPermissions = exports.useWhyDidYouUpdate = exports.useUsers = exports.useSavedState = exports.useSafePromise = exports.useRunOnceAfterValueInitialization = exports.useRelationsLoader = exports.useRelationTypeSelector = exports.usePrevious = exports.useDidUpdateEffect = exports.useCommentsEntitiesMap = exports.useCollaboration = exports.useAsyncMount = exports.useAPI = exports.useActions = exports.useScrollToAttributeError = void 0;
+exports.useAutoFocus = exports.useExpandInvalidRelations = exports.useLayoutResetter = exports.useIsMountedRef = exports.useSnackbar = exports.useSavedStateForEntityType = exports.useReadableSearchState = exports.useEditableConnection = exports.useCustomScripts = exports.useMarkAsNotMatchRequest = exports.useMergeAllRequest = exports.usePagingSimulator = exports.useMatchesLoader = exports.useConfigPermissions = exports.useWhyDidYouUpdate = exports.useUsers = exports.useSavedState = exports.useSafePromise = exports.useRunOnceAfterValueInitialization = exports.useRelationsLoader = exports.useRelationTypeSelector = exports.usePrevious = exports.useDidUpdateEffect = exports.useCommentsEntitiesMap = exports.useCollaboration = exports.useAsyncMount = exports.useAPI = exports.useActions = exports.useMatchesColumnsData = exports.useScrollToAttributeError = void 0;
 var useScrollToAttributeError_1 = require("./useScrollToAttributeError/useScrollToAttributeError");
 Object.defineProperty(exports, "useScrollToAttributeError", { enumerable: true, get: function () { return useScrollToAttributeError_1.useScrollToAttributeError; } });
+var useMatchesColumnsData_1 = require("./useMatchesColumnsData/useMatchesColumnsData");
+Object.defineProperty(exports, "useMatchesColumnsData", { enumerable: true, get: function () { return useMatchesColumnsData_1.useMatchesColumnsData; } });
 var useActions_1 = require("./useActions");
 Object.defineProperty(exports, "useActions", { enumerable: true, get: function () { return useActions_1.useActions; } });
 var useAPI_1 = require("./useAPI");

package/cjs/hooks/useMatchesColumnsData/helpers.d.ts

@@ -0,0 +1,4 @@
+import { ColumnData, GroupedColumnsData } from '../../components';
+export declare const getColumnsData: any;
+export declare const getMatchAttrColumns: (matchAttributes: string[], columnsData: ColumnData[]) => ColumnData[];
+export declare const groupColumnsDataByMatchAttributes: <TColumnData = ColumnData>(matchAttributes: string[], columnsData: TColumnData[]) => GroupedColumnsData<TColumnData>[];

package/cjs/hooks/useMatchesColumnsData/helpers.js

@@ -0,0 +1,56 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.groupColumnsDataByMatchAttributes = exports.getMatchAttrColumns = exports.getColumnsData = void 0;
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var ramda_1 = require("ramda");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var ramda_2 = require("ramda");
+var getColumnsDataFromEntityAttributes = (0, ramda_1.pipe)((0, ramda_2.map)(function (attr) { return ({
+    id: (0, mdm_sdk_1.attributeUriToSearchUri)(attr.uri),
+    label: (0, mdm_sdk_1.getLabel)(attr.label),
+    dataTypeDefinition: (0, mdm_sdk_1.getAttrDataTypeDefinition)(attr)
+}); }));
+exports.getColumnsData = (0, ramda_1.pipe)(mdm_sdk_1.getEntityAttributesFromMetadata, getColumnsDataFromEntityAttributes);
+var isReferenceAttrColumn = function (column) { return (0, mdm_sdk_1.isReference)(column.dataTypeDefinition); };
+var isMatchAttrColumn = (0, ramda_1.curry)(function (matchAttributes, column) {
+    return matchAttributes
+        .map(function (attrUri) { return (0, mdm_sdk_1.attributeUriToSearchUri)(attrUri); })
+        .some(function (id) { return column.id === id || (isReferenceAttrColumn(column) && isSubAttrIdForColumn(column, id)); });
+});
+var isSubAttrIdForColumn = (0, ramda_1.curry)(function (parentColumn, columnId) {
+    return columnId.startsWith("".concat(parentColumn.id, "."));
+});
+var isNestedForOneOfColumns = (0, ramda_1.curry)(function (columns, column) {
+    return isNestedAttrColumn(column) && columns.some(function (_a) {
+        var id = _a.id;
+        return isSubAttrIdForColumn(column, id);
+    });
+});
+var isNestedAttrColumn = function (column) { return (0, mdm_sdk_1.isNested)(column.dataTypeDefinition); };
+var isRelatedToColumns = function (columns) { return (0, ramda_1.either)((0, ramda_1.includes)(ramda_1.__, columns), isNestedForOneOfColumns(columns)); };
+var getMatchAttrColumns = function (matchAttributes, columnsData) {
+    return (0, ramda_1.pipe)((0, ramda_2.reject)(isNestedAttrColumn), (0, ramda_2.filter)(isMatchAttrColumn(matchAttributes)))(columnsData);
+};
+exports.getMatchAttrColumns = getMatchAttrColumns;
+var groupColumnsDataByMatchAttributes = function (matchAttributes, columnsData) {
+    var _a = (0, ramda_1.pipe)((0, ramda_2.reject)(isNestedAttrColumn), (0, ramda_2.partition)(isMatchAttrColumn(matchAttributes)))(columnsData), matchAttrColumns = _a[0], otherColumns = _a[1];
+    if (matchAttrColumns.length) {
+        return [
+            {
+                id: 'match',
+                label: ui_i18n_1.default.text('Match attributes'),
+                columns: columnsData.filter(isRelatedToColumns(matchAttrColumns))
+            },
+            {
+                id: 'all',
+                label: ui_i18n_1.default.text('All attributes'),
+                columns: columnsData.filter(isRelatedToColumns(otherColumns))
+            }
+        ];
+    }
+    return columnsData;
+};
+exports.groupColumnsDataByMatchAttributes = groupColumnsDataByMatchAttributes;

package/cjs/hooks/useMatchesColumnsData/useMatchesColumnsData.d.ts

@@ -0,0 +1,14 @@
+import { Metadata } from '@reltio/mdm-sdk';
+import { ColumnData, GroupedColumnsData } from '../../components';
+type MatchesColumnsDataProps<TColumnData> = {
+    defaultColumnsData: TColumnData[];
+    additionalColumnsData?: TColumnData[];
+    metadata: Metadata;
+    entityTypeUri: string;
+};
+export declare const useMatchesColumnsData: <TColumnData extends ColumnData>({ defaultColumnsData, additionalColumnsData, metadata, entityTypeUri }: MatchesColumnsDataProps<TColumnData>) => {
+    allColumnsData: TColumnData[];
+    groupedColumnsData: GroupedColumnsData<TColumnData>[];
+    defaultColumns: string[];
+};
+export {};

package/cjs/hooks/useMatchesColumnsData/useMatchesColumnsData.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMatchesColumnsData = void 0;
+var react_1 = require("react");
+var ramda_1 = require("ramda");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var helpers_1 = require("./helpers");
+var useMatchesColumnsData = function (_a) {
+    var defaultColumnsData = _a.defaultColumnsData, additionalColumnsData = _a.additionalColumnsData, metadata = _a.metadata, entityTypeUri = _a.entityTypeUri;
+    return (0, react_1.useMemo)(function () {
+        var attrColumnsData = (0, helpers_1.getColumnsData)(metadata, entityTypeUri);
+        var allColumnsData = defaultColumnsData
+            .concat(additionalColumnsData || [])
+            .concat(attrColumnsData);
+        var matchAttributes = (0, mdm_sdk_1.getEntityTypeMatchAttributes)(metadata, entityTypeUri);
+        var groupedColumnsData = (0, helpers_1.groupColumnsDataByMatchAttributes)(matchAttributes, allColumnsData);
+        var defaultColumns = (0, ramda_1.pipe)(helpers_1.getMatchAttrColumns, (0, ramda_1.concat)(defaultColumnsData), (0, ramda_1.pluck)('id'))(matchAttributes, attrColumnsData);
+        return { allColumnsData: allColumnsData, groupedColumnsData: groupedColumnsData, defaultColumns: defaultColumns };
+    }, [defaultColumnsData, additionalColumnsData, metadata, entityTypeUri]);
+};
+exports.useMatchesColumnsData = useMatchesColumnsData;

package/esm/components/BasicTableView/BasicTableHeader/ColumnsSettings/ColumnsSettings.d.ts

@@ -1,19 +1,11 @@
+/// <reference types="react" />
+import { ColumnData } from '../../types';
+type Props = {
+    columnsData: ColumnData[];
+    selectedColumns: string[];
+    onChangeColumns: (columns: string[]) => void;
+    title?: string;
+    tooltipTitle?: string;
+};
+declare const ColumnsSettings: ({ columnsData, selectedColumns, onChangeColumns, title, tooltipTitle }: Props) => JSX.Element;
 export default ColumnsSettings;
-declare function ColumnsSettings({ columnsData, selectedColumns, onChangeColumns, title, tooltipTitle }: {
-    columnsData: any;
-    selectedColumns: any;
-    onChangeColumns: any;
-    title: any;
-    tooltipTitle: any;
-}): JSX.Element;
-declare namespace ColumnsSettings {
-    namespace propTypes {
-        export { ColumnsDataType as columnsData };
-        export const selectedColumns: PropTypes.Requireable<string[]>;
-        export const onChangeColumns: PropTypes.Requireable<(...args: any[]) => any>;
-        export const title: PropTypes.Requireable<string>;
-        export const tooltipTitle: PropTypes.Requireable<string>;
-    }
-}
-import { ColumnsDataType } from '../../../../constants';
-import PropTypes from 'prop-types';

package/esm/components/BasicTableView/BasicTableHeader/ColumnsSettings/ColumnsSettings.js

@@ -1,11 +1,9 @@
 import React, { useCallback, useState } from 'react';
-import PropTypes from 'prop-types';
-import { ColumnsDataType } from '../../../../constants';
+import i18n from 'ui-i18n';
+import { pipe, uniq, pluck, difference, concat } from 'ramda';
 import TableIcon from '../../../../icons/Table';
 import { SmallIconButtonWithTooltip } from '../../../SmallIconButton';
-import { pipe, uniq, pluck, difference, concat } from 'ramda';
 import { ColumnsSettingsPopup } from './ColumnsSettingsPopup';
-import i18n from 'ui-i18n';
 import { getChildColumns, isColumnSelected } from './columnHelpers';
 var ColumnsSettings = function (_a) {
     var columnsData = _a.columnsData, selectedColumns = _a.selectedColumns, onChangeColumns = _a.onChangeColumns, title = _a.title, tooltipTitle = _a.tooltipTitle;
@@ -20,14 +18,7 @@ var ColumnsSettings = function (_a) {
             : uniq(concat(selectedColumns, changedColumns)));
     }, [selectedColumns, onChangeColumns]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(SmallIconButtonWithTooltip, { tooltipTitle: tooltipTitle || i18n.text('Show/hide columns'), size: "L", icon: TableIcon, onClick: openPopup }),
+        React.createElement(SmallIconButtonWithTooltip, { "data-reltio-id": "reltio-columns-settings-button", tooltipTitle: tooltipTitle || i18n.text('Show/hide columns'), size: "L", icon: TableIcon, onClick: openPopup }),
         React.createElement(ColumnsSettingsPopup, { onColumnClick: handleColumnClick, anchorEl: anchorEl, columnsData: columnsData, onClose: closePopup, title: title, selectedColumns: selectedColumns })));
 };
-ColumnsSettings.propTypes = {
-    columnsData: ColumnsDataType,
-    selectedColumns: PropTypes.arrayOf(PropTypes.string),
-    onChangeColumns: PropTypes.func,
-    title: PropTypes.string,
-    tooltipTitle: PropTypes.string
-};
 export default ColumnsSettings;

package/esm/components/BasicTableView/types/index.d.ts

@@ -21,7 +21,7 @@ export type ColumnData = {
     sortable?: boolean;
     filterable?: boolean;
     resizable?: boolean;
-    nestedPath?: string;
+    nestedPath?: string[];
     headCellRenderer?: React.ElementType;
     rowCellValueRenderer?: React.ElementType;
     draggable?: boolean;
@@ -32,6 +32,12 @@ export type ColumnData = {
     }>;
     [key: string]: unknown;
 };
+export type GroupedColumns<TColumnData = ColumnData> = {
+    id: string;
+    label: string;
+    columns: TColumnData[];
+};
+export type GroupedColumnsData<TColumnData = ColumnData> = GroupedColumns<TColumnData> | TColumnData;
 export type CollapseContext = ReturnType<typeof useCollapsibleTableRows>['collapseContextValue'];
 export type RowId = string | number;
 export type RowValue = {

package/esm/components/BasicViewHeader/BasicViewHeader.js

@@ -29,7 +29,7 @@ var BasicViewHeader = function (_a) {
     var _b = _a.title, title = _b === void 0 ? '' : _b, _c = _a.children, children = _c === void 0 ? null : _c, _d = _a.classes, classes = _d === void 0 ? {} : _d, otherProps = __rest(_a, ["title", "children", "classes"]);
     var styles = useStyles();
     return (React.createElement(Toolbar, __assign({ className: classes.root, classes: { root: styles.toolbar } }, otherProps),
-        React.createElement(Typography, { className: classes.title, classes: { root: styles.title }, variant: "h6" }, i18n.text(title)),
+        title && (React.createElement(Typography, { className: classes.title, classes: { root: styles.title }, variant: "h6" }, i18n.text(title))),
         children));
 };
 export default BasicViewHeader;

package/esm/components/MultipleInput/MultipleInput.d.ts

@@ -1,28 +1,14 @@
+/// <reference types="react" />
+import { TextFieldProps } from '@mui/material/TextField';
+type MultipleInputProps = Omit<TextFieldProps, 'classes' | 'value' | 'onChange' | 'onKeyPress' | 'onKeyDown' | 'onFocus' | 'onBlur'> & {
+    values?: string | string[];
+    InputProps?: Omit<TextFieldProps['InputProps'], 'startAdornment' | 'inputComponent'>;
+    classes?: {
+        root?: string;
+    };
+    isCrossedOut?: boolean;
+    onChange?: (values: string[]) => void;
+    getValueLabel?: (value: string) => string;
+};
+declare const MultipleInput: ({ values: valuesProp, InputProps, inputProps, classes, isCrossedOut, onChange, getValueLabel, ...otherProps }: MultipleInputProps) => JSX.Element;
 export default MultipleInput;
-declare function MultipleInput({ values, InputProps, inputProps, classes, isCrossedOut, onChange, getValueLabel, ...otherProps }: {
-    [x: string]: any;
-    values?: any[];
-    InputProps?: {};
-    inputProps?: {};
-    classes?: {};
-    isCrossedOut: any;
-    onChange?: () => void;
-    getValueLabel?: any;
-}): JSX.Element;
-declare namespace MultipleInput {
-    namespace propTypes {
-        const values: PropTypes.Requireable<string[]>;
-        const InputProps: PropTypes.Requireable<PropTypes.InferProps<{
-            classes: PropTypes.Requireable<PropTypes.InferProps<{
-                root: PropTypes.Requireable<string>;
-            }>>;
-            inputComponent: PropTypes.Requireable<PropTypes.ReactComponentLike>;
-        }>>;
-        const inputProps: PropTypes.Requireable<object>;
-        const onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        const classes: PropTypes.Requireable<object>;
-        const getValueLabel: PropTypes.Requireable<(...args: any[]) => any>;
-        const isCrossedOut: PropTypes.Requireable<boolean>;
-    }
-}
-import PropTypes from 'prop-types';

package/esm/components/MultipleInput/MultipleInput.js

@@ -29,38 +29,38 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
+import React, { forwardRef, useState } from 'react';
+import i18n from 'ui-i18n';
+import { identity, pipe, propEq, remove, uniq, when, trim, isEmpty } from 'ramda';
 import AutosizeInput from 'react-input-autosize';
 import classnames from 'classnames';
+import { wrapInArrayIfNeeded } from '@reltio/mdm-sdk';
 import TextField from '@mui/material/TextField';
-import PropTypes from 'prop-types';
-import React, { forwardRef, useState } from 'react';
-import { identity, pipe, propEq, remove, uniq, when, trim, isEmpty } from 'ramda';
+import Tooltip from '@mui/material/Tooltip';
 import { getValue, noop } from '../../core/utils';
-import { useStyles } from './styles';
 import ValueChip from '../ValueChip/ValueChip';
-import Tooltip from '@mui/material/Tooltip';
-import i18n from 'ui-i18n';
+import { useStyles } from './styles';
+var EMPTY_VALUES_EDIT_HINT = i18n.text('Press Enter to add. You may enter multiple values');
+var isEmptyValue = pipe(trim, isEmpty);
 var AutosizeInputWrapper = forwardRef(function (props, ref) {
     var CustomInputComponent = props.CustomInputComponent, other = __rest(props, ["CustomInputComponent"]);
     return CustomInputComponent ? (React.createElement(CustomInputComponent, __assign({}, other, { ref: ref, customInput: AutosizeInput }))) : (React.createElement(AutosizeInput, __assign({}, other, { ref: ref })));
 });
-AutosizeInputWrapper.propTypes = {
-    CustomInputComponent: PropTypes.elementType
-};
 AutosizeInputWrapper.displayName = 'AutosizeInputWrapper';
-var BACKSPACE_KEY_CODE = 8;
-var EMPTY_VALUES_EDIT_HINT = i18n.text('Press Enter to add. You may enter multiple values');
-var isEmptyValue = pipe(trim, isEmpty);
 var MultipleInput = function (_a) {
     var _b;
-    var _c = _a.values, values = _c === void 0 ? [] : _c, _d = _a.InputProps, InputProps = _d === void 0 ? {} : _d, _e = _a.inputProps, inputProps = _e === void 0 ? {} : _e, _f = _a.classes, classes = _f === void 0 ? {} : _f, isCrossedOut = _a.isCrossedOut, _g = _a.onChange, onChange = _g === void 0 ? noop : _g, _h = _a.getValueLabel, getValueLabel = _h === void 0 ? identity : _h, otherProps = __rest(_a, ["values", "InputProps", "inputProps", "classes", "isCrossedOut", "onChange", "getValueLabel"]);
+    var _c = _a.values, valuesProp = _c === void 0 ? [] : _c, _d = _a.InputProps, InputProps = _d === void 0 ? {} : _d, _e = _a.inputProps, inputProps = _e === void 0 ? {} : _e, _f = _a.classes, classes = _f === void 0 ? {} : _f, isCrossedOut = _a.isCrossedOut, _g = _a.onChange, onChange = _g === void 0 ? noop : _g, _h = _a.getValueLabel, getValueLabel = _h === void 0 ? identity : _h, otherProps = __rest(_a, ["values", "InputProps", "inputProps", "classes", "isCrossedOut", "onChange", "getValueLabel"]);
     var styles = useStyles();
     var _j = InputProps.classes || {}, root = _j.root, InputClasses = __rest(_j, ["root"]);
     var _k = useState(''), inputValue = _k[0], setInputValue = _k[1];
+    var _l = useState(false), isFocused = _l[0], setIsFocused = _l[1];
+    var values = wrapInArrayIfNeeded(valuesProp);
+    var hasValues = values.length > 0;
     var clearInputValue = function () { return setInputValue(''); };
+    var setFocused = function () { return setIsFocused(true); };
+    var setUnfocused = function () { return setIsFocused(false); };
     var removeValueAt = function (index) { return onChange(remove(index, 1, values)); };
     var appendValue = function (value) { return onChange(uniq(__spreadArray(__spreadArray([], values, true), [value], false))); };
-    var hasValues = values.length > 0;
     var appendInputValueIfNotEmpty = function () {
         if (!isEmptyValue(inputValue)) {
             appendValue(inputValue);
@@ -72,25 +72,10 @@ var MultipleInput = function (_a) {
             removeValueAt(-1);
         }
     };
-    var _l = useState(false), isFocused = _l[0], setIsFocused = _l[1];
-    var setFocused = function () { return setIsFocused(true); };
-    var setUnfocused = function () { return setIsFocused(false); };
     var hintText = !hasValues && isFocused ? EMPTY_VALUES_EDIT_HINT : '';
     return (React.createElement(Tooltip, { title: hintText },
         React.createElement(TextField, __assign({ variant: "standard" }, otherProps, { classes: {
                 root: classes.root
-            }, value: inputValue, onChange: pipe(getValue, setInputValue), InputProps: __assign(__assign({}, InputProps), { startAdornment: values.map(function (value, index) { return (React.createElement(ValueChip, { key: value, label: getValueLabel(value), onDelete: function () { return removeValueAt(index); } })); }), inputComponent: AutosizeInputWrapper, classes: __assign({ root: classnames(styles.inputRoot, root, (_b = {}, _b[styles.isCrossedOut] = isCrossedOut, _b)), input: classnames(styles.autosizeInput, InputClasses.input) }, InputClasses) }), inputProps: __assign(__assign({}, inputProps), { CustomInputComponent: InputProps.inputComponent }), onKeyPress: when(propEq('key', 'Enter'), appendInputValueIfNotEmpty), onKeyDown: when(propEq('keyCode', BACKSPACE_KEY_CODE), popLastValueIfInputIsEmpty), onFocus: setFocused, onBlur: pipe(appendInputValueIfNotEmpty, setUnfocused) }))));
-};
-MultipleInput.propTypes = {
-    values: PropTypes.arrayOf(PropTypes.string),
-    InputProps: PropTypes.shape({
-        classes: PropTypes.shape({ root: PropTypes.string }),
-        inputComponent: PropTypes.elementType
-    }),
-    inputProps: PropTypes.object,
-    onChange: PropTypes.func,
-    classes: PropTypes.object,
-    getValueLabel: PropTypes.func,
-    isCrossedOut: PropTypes.bool
+            }, value: inputValue, onChange: pipe(getValue, setInputValue), InputProps: __assign(__assign({}, InputProps), { startAdornment: values.map(function (value, index) { return (React.createElement(ValueChip, { key: value, label: getValueLabel(value), onDelete: function () { return removeValueAt(index); } })); }), inputComponent: AutosizeInputWrapper, classes: __assign({ root: classnames(styles.inputRoot, root, (_b = {}, _b[styles.isCrossedOut] = isCrossedOut, _b)), input: classnames(styles.autosizeInput, InputClasses.input) }, InputClasses) }), inputProps: __assign(__assign({}, inputProps), { CustomInputComponent: InputProps.inputComponent }), onKeyPress: when(propEq('key', 'Enter'), appendInputValueIfNotEmpty), onKeyDown: when(propEq('key', 'Backspace'), popLastValueIfInputIsEmpty), onFocus: setFocused, onBlur: pipe(appendInputValueIfNotEmpty, setUnfocused) }))));
 };
 export default MultipleInput;

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

@@ -1 +1 @@
-export const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"inputRoot" | "isCrossedOut" | "autosizeInput">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"inputRoot" | "isCrossedOut" | "autosizeInput">;

package/esm/components/ScrollableTabs/ScrollableTabs.d.ts

@@ -8,7 +8,7 @@ export type Tab = {
     dataReltioId?: string;
 };
 type Props = Omit<TabsProps, 'onChange' | 'value' | 'scrollButtons'> & {
-    value: string;
+    value: string | false;
     tabs: Tab[];
     onChange: (value: string) => void;
     tabClasses?: TabProps['classes'];

package/esm/components/SearchInput/SearchInput.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { InputProps } from '@mui/material/Input';
 export type SearchInputProps = InputProps & {
     value?: string;
-    autofocus: boolean;
+    autofocus?: boolean;
     onSearch: (value?: string) => void;
     rootRef?: React.MutableRefObject<HTMLInputElement>;
     height: number;

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

@@ -8,7 +8,7 @@ type CommonProps = Omit<TextFieldProps, 'onChange' | 'value'> & {
     isCrossedOut?: boolean;
 };
 type MultipleProps = CommonProps & {
-    value?: string[];
+    value?: string | string[];
     onChange: (values: string[]) => void;
     multiple: true;
 };
@@ -18,5 +18,5 @@ type SingleProps = CommonProps & {
     multiple?: false;
 };
 export type Props = MultipleProps | SingleProps;
-declare const TypeaheadEditor: ({ value, max, getSuggestions, onChange, multiple, fullWidth, InputProps, isCrossedOut, ...inputProps }: Props) => JSX.Element;
+declare const TypeaheadEditor: ({ value: valueProp, max, getSuggestions, onChange, multiple, fullWidth, InputProps, isCrossedOut, ...inputProps }: Props) => JSX.Element;
 export default TypeaheadEditor;

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

@@ -66,9 +66,9 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import React, { useCallback, useRef, useMemo, useState, useEffect } from 'react';
-import { identity, isEmpty, nthArg, path, pipe, prop, remove, T, uniq } from 'ramda';
+import { identity, isEmpty, nthArg, path, pipe, prop, remove, T, uniq, isNil } from 'ramda';
 import classnames from 'classnames';
-import { debounce, isEmptyValue } from '@reltio/mdm-sdk';
+import { debounce, isEmptyValue, wrapInArrayIfNeeded } from '@reltio/mdm-sdk';
 import Autosuggest from 'react-autosuggest';
 import AutosizeInput from 'react-input-autosize';
 import TextField from '@mui/material/TextField';
@@ -91,7 +91,7 @@ var ChangeMethod;
     ChangeMethod["Enter"] = "enter";
 })(ChangeMethod || (ChangeMethod = {}));
 var TypeaheadEditor = function (_a) {
-    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, _d = _a.isCrossedOut, isCrossedOut = _d === void 0 ? false : _d, inputProps = __rest(_a, ["value", "max", "getSuggestions", "onChange", "multiple", "fullWidth", "InputProps", "isCrossedOut"]);
+    var valueProp = _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, _d = _a.isCrossedOut, isCrossedOut = _d === void 0 ? false : _d, inputProps = __rest(_a, ["value", "max", "getSuggestions", "onChange", "multiple", "fullWidth", "InputProps", "isCrossedOut"]);
     var styles = useStyles();
     var inputRef = useRef(null);
     var safePromise = useSafePromise();
@@ -104,6 +104,7 @@ var TypeaheadEditor = function (_a) {
     var pageSizeForRequest = max + 1;
     var displayedSuggestions = useMemo(function () { return suggestions.slice(0, pageNumber * max); }, [suggestions, pageNumber, max]);
     var showMoreButton = suggestions.length > displayedSuggestions.length;
+    var value = multiple === true && !isNil(valueProp) ? wrapInArrayIfNeeded(valueProp) : valueProp;
     var isFocused = function () { var _a; return ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === document.activeElement; };
     var fetchSuggestions = useCallback(function (_a) {
         var value = _a.value;
@@ -198,8 +199,9 @@ var TypeaheadEditor = function (_a) {
             onChange(inputValue);
     }, [inputValue, onChange, multiple]);
     useEffect(function () {
+        var _a;
         if (multiple !== true)
-            setInputValue(value !== null && value !== void 0 ? value : '');
+            setInputValue((_a = value) !== null && _a !== void 0 ? _a : '');
     }, [value, multiple]);
     useDidUpdateEffect(function () {
         setPageNumber(1);

package/esm/hooks/index.d.ts

@@ -1,4 +1,5 @@
 export { useScrollToAttributeError } from './useScrollToAttributeError/useScrollToAttributeError';
+export { useMatchesColumnsData } from './useMatchesColumnsData/useMatchesColumnsData';
 export { useActions } from './useActions';
 export { useAPI } from './useAPI';
 export { useAsyncMount } from './useAsyncMount';

package/esm/hooks/index.js

@@ -1,4 +1,5 @@
 export { useScrollToAttributeError } from './useScrollToAttributeError/useScrollToAttributeError';
+export { useMatchesColumnsData } from './useMatchesColumnsData/useMatchesColumnsData';
 export { useActions } from './useActions';
 export { useAPI } from './useAPI';
 export { useAsyncMount } from './useAsyncMount';

package/esm/hooks/useMatchesColumnsData/helpers.d.ts

@@ -0,0 +1,4 @@
+import { ColumnData, GroupedColumnsData } from '../../components';
+export declare const getColumnsData: any;
+export declare const getMatchAttrColumns: (matchAttributes: string[], columnsData: ColumnData[]) => ColumnData[];
+export declare const groupColumnsDataByMatchAttributes: <TColumnData = ColumnData>(matchAttributes: string[], columnsData: TColumnData[]) => GroupedColumnsData<TColumnData>[];

package/esm/hooks/useMatchesColumnsData/helpers.js

@@ -0,0 +1,48 @@
+import i18n from 'ui-i18n';
+import { __, pipe, curry, either, includes } from 'ramda';
+import { attributeUriToSearchUri, getAttrDataTypeDefinition, getEntityAttributesFromMetadata, getLabel, isNested, isReference } from '@reltio/mdm-sdk';
+import { filter, partition, reject, map } from 'ramda';
+var getColumnsDataFromEntityAttributes = pipe(map(function (attr) { return ({
+    id: attributeUriToSearchUri(attr.uri),
+    label: getLabel(attr.label),
+    dataTypeDefinition: getAttrDataTypeDefinition(attr)
+}); }));
+export var getColumnsData = pipe(getEntityAttributesFromMetadata, getColumnsDataFromEntityAttributes);
+var isReferenceAttrColumn = function (column) { return isReference(column.dataTypeDefinition); };
+var isMatchAttrColumn = curry(function (matchAttributes, column) {
+    return matchAttributes
+        .map(function (attrUri) { return attributeUriToSearchUri(attrUri); })
+        .some(function (id) { return column.id === id || (isReferenceAttrColumn(column) && isSubAttrIdForColumn(column, id)); });
+});
+var isSubAttrIdForColumn = curry(function (parentColumn, columnId) {
+    return columnId.startsWith("".concat(parentColumn.id, "."));
+});
+var isNestedForOneOfColumns = curry(function (columns, column) {
+    return isNestedAttrColumn(column) && columns.some(function (_a) {
+        var id = _a.id;
+        return isSubAttrIdForColumn(column, id);
+    });
+});
+var isNestedAttrColumn = function (column) { return isNested(column.dataTypeDefinition); };
+var isRelatedToColumns = function (columns) { return either(includes(__, columns), isNestedForOneOfColumns(columns)); };
+export var getMatchAttrColumns = function (matchAttributes, columnsData) {
+    return pipe(reject(isNestedAttrColumn), filter(isMatchAttrColumn(matchAttributes)))(columnsData);
+};
+export var groupColumnsDataByMatchAttributes = function (matchAttributes, columnsData) {
+    var _a = pipe(reject(isNestedAttrColumn), partition(isMatchAttrColumn(matchAttributes)))(columnsData), matchAttrColumns = _a[0], otherColumns = _a[1];
+    if (matchAttrColumns.length) {
+        return [
+            {
+                id: 'match',
+                label: i18n.text('Match attributes'),
+                columns: columnsData.filter(isRelatedToColumns(matchAttrColumns))
+            },
+            {
+                id: 'all',
+                label: i18n.text('All attributes'),
+                columns: columnsData.filter(isRelatedToColumns(otherColumns))
+            }
+        ];
+    }
+    return columnsData;
+};

package/esm/hooks/useMatchesColumnsData/useMatchesColumnsData.d.ts

@@ -0,0 +1,14 @@
+import { Metadata } from '@reltio/mdm-sdk';
+import { ColumnData, GroupedColumnsData } from '../../components';
+type MatchesColumnsDataProps<TColumnData> = {
+    defaultColumnsData: TColumnData[];
+    additionalColumnsData?: TColumnData[];
+    metadata: Metadata;
+    entityTypeUri: string;
+};
+export declare const useMatchesColumnsData: <TColumnData extends ColumnData>({ defaultColumnsData, additionalColumnsData, metadata, entityTypeUri }: MatchesColumnsDataProps<TColumnData>) => {
+    allColumnsData: TColumnData[];
+    groupedColumnsData: GroupedColumnsData<TColumnData>[];
+    defaultColumns: string[];
+};
+export {};

package/esm/hooks/useMatchesColumnsData/useMatchesColumnsData.js

@@ -0,0 +1,17 @@
+import { useMemo } from 'react';
+import { concat, pipe, pluck } from 'ramda';
+import { getEntityTypeMatchAttributes } from '@reltio/mdm-sdk';
+import { getColumnsData, getMatchAttrColumns, groupColumnsDataByMatchAttributes } from './helpers';
+export var useMatchesColumnsData = function (_a) {
+    var defaultColumnsData = _a.defaultColumnsData, additionalColumnsData = _a.additionalColumnsData, metadata = _a.metadata, entityTypeUri = _a.entityTypeUri;
+    return useMemo(function () {
+        var attrColumnsData = getColumnsData(metadata, entityTypeUri);
+        var allColumnsData = defaultColumnsData
+            .concat(additionalColumnsData || [])
+            .concat(attrColumnsData);
+        var matchAttributes = getEntityTypeMatchAttributes(metadata, entityTypeUri);
+        var groupedColumnsData = groupColumnsDataByMatchAttributes(matchAttributes, allColumnsData);
+        var defaultColumns = pipe(getMatchAttrColumns, concat(defaultColumnsData), pluck('id'))(matchAttributes, attrColumnsData);
+        return { allColumnsData: allColumnsData, groupedColumnsData: groupedColumnsData, defaultColumns: defaultColumns };
+    }, [defaultColumnsData, additionalColumnsData, metadata, entityTypeUri]);
+};

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.1737",
+  "version": "1.4.1739",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",
   "dependencies": {
     "@fluentui/react-context-selector": "^9.1.26",
     "@react-google-maps/api": "2.7.0",
-    "@reltio/mdm-sdk": "^1.4.1721",
+    "@reltio/mdm-sdk": "^1.4.1722",
     "classnames": "^2.2.5",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",