@reltio/components 1.4.884 → 1.4.885

package/cjs/components/attributes/editMode/AttributesPager/SpecialRenderer.js

@@ -51,7 +51,7 @@ var Title_1 = __importDefault(require("../../../Title/Title"));
 var CardinalityMessage_1 = __importDefault(require("./CardinalityMessage"));
 var ErrorMessage_1 = __importDefault(require("../../../ErrorWrapper/ErrorMessage"));
 var Attribute_1 = __importDefault(require("../AttributesFactory/Attribute"));
-var Tags_1 = __importDefault(require("../../readMode/SpecialAttributes/Tags")); //TODO: should be edit mode
+var Tags_1 = __importDefault(require("../Tags"));
 var Roles_1 = __importDefault(require("../../readMode/SpecialAttributes/Roles")); //TODO: should be edit mode
 var styles_1 = require("./styles");
 var SpecialRenderer = function (_a) {

package/cjs/components/attributes/editMode/Tags/Tags.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare type Props = {
+    className?: string;
+    values: string[];
+};
+declare const Tags: ({ className, values }: Props) => JSX.Element;
+export default Tags;

package/cjs/components/attributes/editMode/Tags/Tags.js

@@ -0,0 +1,62 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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 react_redux_1 = require("react-redux");
+var mdm_module_1 = __importStar(require("@reltio/mdm-module"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var TypeaheadEditor_1 = __importDefault(require("../../../editors/TypeaheadEditor/TypeaheadEditor"));
+var filtersWithSearch = function (searchQuery) { return [
+    {
+        filter: 'containsWordStartingWith',
+        fieldName: 'tags',
+        values: [searchQuery]
+    }
+]; };
+var getQuery = function (searchQuery) {
+    return searchQuery ? "?filter=" + mdm_sdk_1.buildFilterQueryString()(filtersWithSearch(searchQuery)) : '';
+};
+var body = [
+    {
+        fieldName: 'tags',
+        orderType: 'reversedCount'
+    }
+];
+var getSuggestions = function (searchQuery) {
+    return mdm_sdk_1.getFacets({ query: getQuery(searchQuery), body: body }).then(function (response) { return Object.keys(response.tags); });
+};
+var Tags = function (_a) {
+    var className = _a.className, values = _a.values;
+    var dispatch = react_redux_1.useDispatch();
+    var entityUri = react_redux_1.useSelector(mdm_module_1.default.selectors.getEntityUri);
+    var onChange = react_1.useCallback(function (tags) {
+        return dispatch(mdm_module_1.profile.actions.modifyAttribute({
+            value: tags,
+            attributeType: mdm_sdk_1.EntityAttrTypes.tags,
+            uri: entityUri
+        }));
+    }, [dispatch, entityUri]);
+    return (react_1.default.createElement(TypeaheadEditor_1.default, { fullWidth: true, multiple: true, variant: "filled", className: className, value: values, onChange: onChange, getSuggestions: getSuggestions }));
+};
+exports.default = Tags;

package/cjs/components/attributes/editMode/Tags/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Tags';

package/cjs/components/attributes/editMode/Tags/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var Tags_1 = require("./Tags");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Tags_1).default; } });

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

@@ -6,7 +6,7 @@ declare function TypeaheadEditor({ value, getSuggestions, onChange, multiple, fu
     onChange: any;
     multiple: any;
     fullWidth: any;
-    InputProps: any;
+    InputProps?: {};
 }): JSX.Element;
 declare namespace TypeaheadEditor {
     namespace propTypes {

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

@@ -50,6 +50,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_autosuggest_1 = __importDefault(require("react-autosuggest"));
+var react_input_autosize_1 = __importDefault(require("react-input-autosize"));
 var classnames_1 = __importDefault(require("classnames"));
 var TextField_1 = __importDefault(require("@material-ui/core/TextField"));
 var MenuItem_1 = __importDefault(require("@material-ui/core/MenuItem"));
@@ -66,9 +67,9 @@ var ExpandedValueTooltip_1 = __importDefault(require("../../ExpandedValueTooltip
 var ValueChip_1 = __importDefault(require("../../ValueChip/ValueChip"));
 var FETCH_DEBOUNCE_INTERVAL = 300;
 var TypeaheadEditor = function (_a) {
-    var value = _a.value, getSuggestions = _a.getSuggestions, onChange = _a.onChange, multiple = _a.multiple, fullWidth = _a.fullWidth, InputProps = _a.InputProps, inputProps = __rest(_a, ["value", "getSuggestions", "onChange", "multiple", "fullWidth", "InputProps"]);
-    var _b = react_1.useState([]), suggestions = _b[0], setSuggestions = _b[1];
-    var _c = react_1.useState(false), isPlaceholderVisible = _c[0], setPlaceholderVisibility = _c[1];
+    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 inputRef = react_1.useRef();
     var styles = styles_1.useStyles();
     var isFocused = function () { var _a; return ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === document.activeElement; };
@@ -77,8 +78,8 @@ var TypeaheadEditor = function (_a) {
         getSuggestions
     ]);
     value = ramda_1.defaultTo(multiple ? [] : '', value);
-    var _d = react_1.useState(''), currentValue = _d[0], setCurrentValue = _d[1];
-    var _e = react_1.useState(false), hasHighlightedItem = _e[0], setHasHighlightedItem = _e[1];
+    var _e = react_1.useState(''), currentValue = _e[0], setCurrentValue = _e[1];
+    var _f = react_1.useState(false), hasHighlightedItem = _f[0], setHasHighlightedItem = _f[1];
     var onInputChange = function (_a) {
         var newValue = _a.newValue, method = _a.method;
         switch (method) {
@@ -123,7 +124,7 @@ var TypeaheadEditor = function (_a) {
                 underline: classnames_1.default((_b = {}, _b[styles['input__underline']] = mdm_sdk_1.isEmptyValue(value), _b)),
                 input: classnames_1.default(styles['rawInput'], ramda_1.path(['classes', 'input'], InputProps))
             };
-            return multiple ? (react_1.default.createElement(TextField_1.default, __assign({}, otherProps, { ref: inputRef, inputRef: ref, InputProps: __assign(__assign({}, InputProps), { startAdornment: value.map(function (item, index) { return (react_1.default.createElement(ValueChip_1.default, { key: item, label: item, onDelete: function () { return onChange(ramda_1.remove(index, 1, value)); } })); }), classes: __assign({ root: classnames_1.default(styles['multiple-input__input'], ramda_1.path(['classes', 'root'], InputProps)), adornedStart: styles['multiple-input__adornedStart'] }, commonClasses) }), value: currentValue, onChange: onInputChange, classes: { root: styles['multiple-input__root'] } }))) : (react_1.default.createElement(TextField_1.default, __assign({}, otherProps, { ref: inputRef, inputRef: ref, value: value, onChange: ramda_1.pipe(ramda_1.tap(onInputChange), utils_1.getValue, onChange), InputProps: __assign(__assign({}, InputProps), { classes: __assign({ root: classnames_1.default(styles['input__root'], ramda_1.path(['classes', 'root'], InputProps)) }, commonClasses) }) })));
+            return multiple ? (react_1.default.createElement(TextField_1.default, __assign({}, otherProps, { ref: inputRef, inputRef: ref, InputProps: __assign(__assign({}, InputProps), { startAdornment: value.map(function (item, index) { return (react_1.default.createElement(ValueChip_1.default, { key: item, label: item, onDelete: function () { return onChange(ramda_1.remove(index, 1, value)); } })); }), inputComponent: react_input_autosize_1.default, classes: __assign(__assign({ root: classnames_1.default(styles['multiple-input__input'], ramda_1.path(['classes', 'root'], InputProps)) }, commonClasses), { input: classnames_1.default(styles.autosizeInput, commonClasses.input), adornedStart: styles['multiple-input__adornedStart'] }) }), value: currentValue, onChange: onInputChange, classes: { root: styles['multiple-input__root'] } }))) : (react_1.default.createElement(TextField_1.default, __assign({}, otherProps, { ref: inputRef, inputRef: ref, value: value, onChange: ramda_1.pipe(ramda_1.tap(onInputChange), utils_1.getValue, onChange), InputProps: __assign(__assign({}, InputProps), { classes: __assign({ root: classnames_1.default(styles['input__root'], ramda_1.path(['classes', 'root'], InputProps)) }, commonClasses) }) })));
         }, renderSuggestionsContainer: function (_a) {
             var children = _a.children, _b = _a.containerProps, ref = _b.ref, restContainerProps = __rest(_b, ["ref"]);
             return (react_1.default.createElement(Popper_1.default, { anchorEl: inputRef.current, open: Boolean(children) || isPlaceholderVisible },

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

@@ -1 +1 @@
-export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"typeahead__suggestions-placeholder" | "typeahead__suggestions-container--open" | "typeahead__suggestions-list" | "typeahead__suggestions-menuItem" | "input__root" | "rawInput" | "multiple-input__root" | "multiple-input__input" | "multiple-input__adornedStart" | "input__underline" | "typeahead__suggestions-container" | "menuItem--item">;
+export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"autosizeInput" | "typeahead__suggestions-placeholder" | "typeahead__suggestions-container--open" | "typeahead__suggestions-list" | "typeahead__suggestions-menuItem" | "input__root" | "rawInput" | "multiple-input__root" | "multiple-input__input" | "multiple-input__adornedStart" | "input__underline" | "typeahead__suggestions-container" | "menuItem--item">;

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

@@ -24,6 +24,21 @@ exports.useStyles = styles_1.makeStyles({
         color: 'rgba(0,0,0,0.87)',
         fontSize: '14px'
     },
+    autosizeInput: {
+        width: 'auto',
+        paddingTop: '10px',
+        paddingBottom: '11px',
+        marginLeft: '5px',
+        overflow: 'hidden',
+        '& input': {
+            background: '0px center',
+            border: 0,
+            fontSize: 'inherit',
+            outline: 0,
+            padding: 0,
+            color: 'inherit'
+        }
+    },
     rawInput: {
         height: '19px'
     },

package/esm/components/attributes/editMode/AttributesPager/SpecialRenderer.js

@@ -27,7 +27,7 @@ import Title from '../../../Title/Title';
 import Cardinality from './CardinalityMessage';
 import ErrorMessage from '../../../ErrorWrapper/ErrorMessage';
 import Attribute from '../AttributesFactory/Attribute';
-import Tags from '../../readMode/SpecialAttributes/Tags'; //TODO: should be edit mode
+import Tags from '../Tags';
 import Roles from '../../readMode/SpecialAttributes/Roles'; //TODO: should be edit mode
 import { useStyles } from './styles';
 var SpecialRenderer = function (_a) {

package/esm/components/attributes/editMode/Tags/Tags.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare type Props = {
+    className?: string;
+    values: string[];
+};
+declare const Tags: ({ className, values }: Props) => JSX.Element;
+export default Tags;

package/esm/components/attributes/editMode/Tags/Tags.js

@@ -0,0 +1,38 @@
+import React, { useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import mdmModule, { profile } from '@reltio/mdm-module';
+import { getFacets, EntityAttrTypes, buildFilterQueryString } from '@reltio/mdm-sdk';
+import TypeaheadEditor from '../../../editors/TypeaheadEditor/TypeaheadEditor';
+var filtersWithSearch = function (searchQuery) { return [
+    {
+        filter: 'containsWordStartingWith',
+        fieldName: 'tags',
+        values: [searchQuery]
+    }
+]; };
+var getQuery = function (searchQuery) {
+    return searchQuery ? "?filter=" + buildFilterQueryString()(filtersWithSearch(searchQuery)) : '';
+};
+var body = [
+    {
+        fieldName: 'tags',
+        orderType: 'reversedCount'
+    }
+];
+var getSuggestions = function (searchQuery) {
+    return getFacets({ query: getQuery(searchQuery), body: body }).then(function (response) { return Object.keys(response.tags); });
+};
+var Tags = function (_a) {
+    var className = _a.className, values = _a.values;
+    var dispatch = useDispatch();
+    var entityUri = useSelector(mdmModule.selectors.getEntityUri);
+    var onChange = useCallback(function (tags) {
+        return dispatch(profile.actions.modifyAttribute({
+            value: tags,
+            attributeType: EntityAttrTypes.tags,
+            uri: entityUri
+        }));
+    }, [dispatch, entityUri]);
+    return (React.createElement(TypeaheadEditor, { fullWidth: true, multiple: true, variant: "filled", className: className, value: values, onChange: onChange, getSuggestions: getSuggestions }));
+};
+export default Tags;

package/esm/components/attributes/editMode/Tags/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Tags';

package/esm/components/attributes/editMode/Tags/index.js

@@ -0,0 +1 @@
+export { default } from './Tags';

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

@@ -6,7 +6,7 @@ declare function TypeaheadEditor({ value, getSuggestions, onChange, multiple, fu
     onChange: any;
     multiple: any;
     fullWidth: any;
-    InputProps: any;
+    InputProps?: {};
 }): JSX.Element;
 declare namespace TypeaheadEditor {
     namespace propTypes {

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

@@ -26,6 +26,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from) {
     return to;
 };
 import Autosuggest from 'react-autosuggest';
+import AutosizeInput from 'react-input-autosize';
 import classnames from 'classnames';
 import TextField from '@material-ui/core/TextField';
 import MenuItem from '@material-ui/core/MenuItem';
@@ -42,9 +43,9 @@ import ExpandedValueTooltip from '../../ExpandedValueTooltip/ExpandedValueToolti
 import ValueChip from '../../ValueChip/ValueChip';
 var FETCH_DEBOUNCE_INTERVAL = 300;
 var TypeaheadEditor = function (_a) {
-    var value = _a.value, getSuggestions = _a.getSuggestions, onChange = _a.onChange, multiple = _a.multiple, fullWidth = _a.fullWidth, InputProps = _a.InputProps, inputProps = __rest(_a, ["value", "getSuggestions", "onChange", "multiple", "fullWidth", "InputProps"]);
-    var _b = useState([]), suggestions = _b[0], setSuggestions = _b[1];
-    var _c = useState(false), isPlaceholderVisible = _c[0], setPlaceholderVisibility = _c[1];
+    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 inputRef = useRef();
     var styles = useStyles();
     var isFocused = function () { var _a; return ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === document.activeElement; };
@@ -53,8 +54,8 @@ var TypeaheadEditor = function (_a) {
         getSuggestions
     ]);
     value = defaultTo(multiple ? [] : '', value);
-    var _d = useState(''), currentValue = _d[0], setCurrentValue = _d[1];
-    var _e = useState(false), hasHighlightedItem = _e[0], setHasHighlightedItem = _e[1];
+    var _e = useState(''), currentValue = _e[0], setCurrentValue = _e[1];
+    var _f = useState(false), hasHighlightedItem = _f[0], setHasHighlightedItem = _f[1];
     var onInputChange = function (_a) {
         var newValue = _a.newValue, method = _a.method;
         switch (method) {
@@ -99,7 +100,7 @@ var TypeaheadEditor = function (_a) {
                 underline: classnames((_b = {}, _b[styles['input__underline']] = isEmptyValue(value), _b)),
                 input: classnames(styles['rawInput'], path(['classes', 'input'], InputProps))
             };
-            return multiple ? (React.createElement(TextField, __assign({}, otherProps, { ref: inputRef, inputRef: ref, InputProps: __assign(__assign({}, InputProps), { startAdornment: value.map(function (item, index) { return (React.createElement(ValueChip, { key: item, label: item, onDelete: function () { return onChange(remove(index, 1, value)); } })); }), classes: __assign({ root: classnames(styles['multiple-input__input'], path(['classes', 'root'], InputProps)), adornedStart: styles['multiple-input__adornedStart'] }, commonClasses) }), value: currentValue, onChange: onInputChange, classes: { root: styles['multiple-input__root'] } }))) : (React.createElement(TextField, __assign({}, otherProps, { ref: inputRef, inputRef: ref, value: value, onChange: pipe(tap(onInputChange), getValue, onChange), InputProps: __assign(__assign({}, InputProps), { classes: __assign({ root: classnames(styles['input__root'], path(['classes', 'root'], InputProps)) }, commonClasses) }) })));
+            return multiple ? (React.createElement(TextField, __assign({}, otherProps, { ref: inputRef, inputRef: ref, InputProps: __assign(__assign({}, InputProps), { startAdornment: value.map(function (item, index) { return (React.createElement(ValueChip, { key: item, label: item, onDelete: function () { return onChange(remove(index, 1, value)); } })); }), inputComponent: AutosizeInput, classes: __assign(__assign({ root: classnames(styles['multiple-input__input'], path(['classes', 'root'], InputProps)) }, commonClasses), { input: classnames(styles.autosizeInput, commonClasses.input), adornedStart: styles['multiple-input__adornedStart'] }) }), value: currentValue, onChange: onInputChange, classes: { root: styles['multiple-input__root'] } }))) : (React.createElement(TextField, __assign({}, otherProps, { ref: inputRef, inputRef: ref, value: value, onChange: pipe(tap(onInputChange), getValue, onChange), InputProps: __assign(__assign({}, InputProps), { classes: __assign({ root: classnames(styles['input__root'], path(['classes', 'root'], InputProps)) }, commonClasses) }) })));
         }, renderSuggestionsContainer: function (_a) {
             var children = _a.children, _b = _a.containerProps, ref = _b.ref, restContainerProps = __rest(_b, ["ref"]);
             return (React.createElement(Popper, { anchorEl: inputRef.current, open: Boolean(children) || isPlaceholderVisible },

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

@@ -1 +1 @@
-export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"typeahead__suggestions-placeholder" | "typeahead__suggestions-container--open" | "typeahead__suggestions-list" | "typeahead__suggestions-menuItem" | "input__root" | "rawInput" | "multiple-input__root" | "multiple-input__input" | "multiple-input__adornedStart" | "input__underline" | "typeahead__suggestions-container" | "menuItem--item">;
+export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"autosizeInput" | "typeahead__suggestions-placeholder" | "typeahead__suggestions-container--open" | "typeahead__suggestions-list" | "typeahead__suggestions-menuItem" | "input__root" | "rawInput" | "multiple-input__root" | "multiple-input__input" | "multiple-input__adornedStart" | "input__underline" | "typeahead__suggestions-container" | "menuItem--item">;

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

@@ -21,6 +21,21 @@ export var useStyles = makeStyles({
         color: 'rgba(0,0,0,0.87)',
         fontSize: '14px'
     },
+    autosizeInput: {
+        width: 'auto',
+        paddingTop: '10px',
+        paddingBottom: '11px',
+        marginLeft: '5px',
+        overflow: 'hidden',
+        '& input': {
+            background: '0px center',
+            border: 0,
+            fontSize: 'inherit',
+            outline: 0,
+            padding: 0,
+            color: 'inherit'
+        }
+    },
     rawInput: {
         height: '19px'
     },

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.884",
+  "version": "1.4.885",
   "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.884",
-    "@reltio/mdm-sdk": "^1.4.884",
+    "@reltio/mdm-module": "^1.4.885",
+    "@reltio/mdm-sdk": "^1.4.885",
     "classnames": "^2.2.5",
     "frontend-collective-react-dnd-scrollzone": "^1.0.2",
     "nanoid": "^2.0.0",