@reltio/components 1.4.1599 → 1.4.1600

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

@@ -1,5 +1,5 @@
 export default TypeaheadEditor;
-declare function TypeaheadEditor({ value, max, getSuggestions, onChange, multiple, fullWidth, InputProps, ...inputProps }: {
+declare function TypeaheadEditor({ value, max, getSuggestions, onChange, multiple, fullWidth, InputProps, isCrossedOut, ...inputProps }: {
     [x: string]: any;
     value: any;
     max?: number;
@@ -8,6 +8,7 @@ declare function TypeaheadEditor({ value, max, getSuggestions, onChange, multipl
     multiple: any;
     fullWidth: any;
     InputProps?: {};
+    isCrossedOut?: boolean;
 }): JSX.Element;
 declare namespace TypeaheadEditor {
     namespace propTypes {
@@ -19,6 +20,7 @@ declare namespace TypeaheadEditor {
         const getSuggestions: PropTypes.Validator<(...args: any[]) => any>;
         const InputProps: PropTypes.Requireable<object>;
         const max: PropTypes.Requireable<number>;
+        const isCrossedOut: PropTypes.Requireable<boolean>;
     }
 }
 import PropTypes from 'prop-types';

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

@@ -50,13 +50,13 @@ import { useDidUpdateEffect } from '../../../hooks';
 var FETCH_DEBOUNCE_INTERVAL = 300;
 var PAGE_SIZE = 50;
 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, 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 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 _e = useState([]), suggestions = _e[0], setSuggestions = _e[1];
+    var _f = useState(false), isPlaceholderVisible = _f[0], setPlaceholderVisibility = _f[1];
+    var _g = useState(1), pageNumber = _g[0], setPageNumber = _g[1];
+    var _h = useState(false), nextPageIsLoading = _h[0], setNextPageIsLoading = _h[1];
     var pageSizeForRequest = max + 1;
-    var _h = useState(''), currentValue = _h[0], setCurrentValue = _h[1];
+    var _j = useState(''), currentValue = _j[0], setCurrentValue = _j[1];
     value = defaultTo(multiple ? [] : '', value);
     var inputValue = multiple ? currentValue : value;
     useDidUpdateEffect(function () {
@@ -82,7 +82,7 @@ var TypeaheadEditor = function (_a) {
     ]);
     var displayedSuggestions = useMemo(function () { return suggestions.slice(0, pageNumber * max); }, [suggestions, pageNumber, max]);
     var showMoreButton = suggestions.length > displayedSuggestions.length;
-    var _j = useState(false), hasHighlightedItem = _j[0], setHasHighlightedItem = _j[1];
+    var _k = useState(false), hasHighlightedItem = _k[0], setHasHighlightedItem = _k[1];
     var onInputChange = function (_a) {
         var newValue = _a.newValue, method = _a.method;
         switch (method) {
@@ -121,13 +121,15 @@ var TypeaheadEditor = function (_a) {
                     onInputChange({ method: 'enter', newValue: currentValue });
                 }
             }, fullWidth: fullWidth }, inputProps), { autoComplete: 'nope' }), getSuggestionValue: identity, onSuggestionsFetchRequested: ifElse(propEq('reason', 'input-changed'), debouncedFetchSuggestions, fetchSuggestions), onSuggestionsClearRequested: pipe(always([]), setSuggestions, F, setPlaceholderVisibility, always(1), setPageNumber), renderInputComponent: function (_a) {
-            var _b;
+            var _b, _c;
             var ref = _a.ref, onInputChange = _a.onChange, otherProps = __rest(_a, ["ref", "onChange"]);
             var commonClasses = {
                 underline: classnames((_b = {}, _b[styles['input__underline']] = isEmptyValue(value), _b)),
                 input: classnames(styles['rawInput'], path(['classes', 'input'], InputProps))
             };
-            return multiple ? (React.createElement(TextField, __assign({ variant: "standard" }, 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({ variant: "standard" }, 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({ variant: "standard" }, 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({ variant: "standard" }, 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), (_c = {},
+                            _c[styles.isCrossedOut] = isCrossedOut,
+                            _c)) }, 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 },
@@ -153,6 +155,7 @@ TypeaheadEditor.propTypes = {
     onChange: PropTypes.func.isRequired,
     getSuggestions: PropTypes.func.isRequired,
     InputProps: PropTypes.object,
-    max: PropTypes.number
+    max: PropTypes.number,
+    isCrossedOut: PropTypes.bool
 };
 export default TypeaheadEditor;

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

@@ -1 +1 @@
-export const useStyles: (props?: any) => import("@mui/styles").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">;
+export const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"isCrossedOut" | "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

@@ -42,6 +42,9 @@ export var useStyles = makeStyles({
         paddingTop: '10px',
         paddingBottom: '11px'
     },
+    isCrossedOut: {
+        textDecoration: 'line-through'
+    },
     'multiple-input__root': {
         flexWrap: 'wrap',
         color: 'rgba(0,0,0,0.87)',

package/package.json

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