@reltio/components 1.4.1599 → 1.4.1601

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

@@ -78,13 +78,13 @@ var hooks_1 = require("../../../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 = (0, react_1.useState)([]), suggestions = _d[0], setSuggestions = _d[1];
-    var _e = (0, react_1.useState)(false), isPlaceholderVisible = _e[0], setPlaceholderVisibility = _e[1];
-    var _f = (0, react_1.useState)(1), pageNumber = _f[0], setPageNumber = _f[1];
-    var _g = (0, react_1.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 = (0, react_1.useState)([]), suggestions = _e[0], setSuggestions = _e[1];
+    var _f = (0, react_1.useState)(false), isPlaceholderVisible = _f[0], setPlaceholderVisibility = _f[1];
+    var _g = (0, react_1.useState)(1), pageNumber = _g[0], setPageNumber = _g[1];
+    var _h = (0, react_1.useState)(false), nextPageIsLoading = _h[0], setNextPageIsLoading = _h[1];
     var pageSizeForRequest = max + 1;
-    var _h = (0, react_1.useState)(''), currentValue = _h[0], setCurrentValue = _h[1];
+    var _j = (0, react_1.useState)(''), currentValue = _j[0], setCurrentValue = _j[1];
     value = (0, ramda_1.defaultTo)(multiple ? [] : '', value);
     var inputValue = multiple ? currentValue : value;
     (0, hooks_1.useDidUpdateEffect)(function () {
@@ -110,7 +110,7 @@ var TypeaheadEditor = function (_a) {
     ]);
     var displayedSuggestions = (0, react_1.useMemo)(function () { return suggestions.slice(0, pageNumber * max); }, [suggestions, pageNumber, max]);
     var showMoreButton = suggestions.length > displayedSuggestions.length;
-    var _j = (0, react_1.useState)(false), hasHighlightedItem = _j[0], setHasHighlightedItem = _j[1];
+    var _k = (0, react_1.useState)(false), hasHighlightedItem = _k[0], setHasHighlightedItem = _k[1];
     var onInputChange = function (_a) {
         var newValue = _a.newValue, method = _a.method;
         switch (method) {
@@ -149,13 +149,15 @@ var TypeaheadEditor = function (_a) {
                     onInputChange({ method: 'enter', newValue: currentValue });
                 }
             }, fullWidth: fullWidth }, inputProps), { autoComplete: 'nope' }), getSuggestionValue: ramda_1.identity, onSuggestionsFetchRequested: (0, ramda_1.ifElse)((0, ramda_1.propEq)('reason', 'input-changed'), debouncedFetchSuggestions, fetchSuggestions), onSuggestionsClearRequested: (0, ramda_1.pipe)((0, ramda_1.always)([]), setSuggestions, ramda_1.F, setPlaceholderVisibility, (0, ramda_1.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: (0, classnames_1.default)((_b = {}, _b[styles['input__underline']] = (0, mdm_sdk_1.isEmptyValue)(value), _b)),
                 input: (0, classnames_1.default)(styles['rawInput'], (0, ramda_1.path)(['classes', 'input'], InputProps))
             };
-            return multiple ? (react_1.default.createElement(TextField_1.default, __assign({ variant: "standard" }, 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((0, ramda_1.remove)(index, 1, value)); } })); }), inputComponent: react_input_autosize_1.default, classes: __assign(__assign({ root: (0, classnames_1.default)(styles['multiple-input__input'], (0, ramda_1.path)(['classes', 'root'], InputProps)) }, commonClasses), { input: (0, 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({ variant: "standard" }, otherProps, { ref: inputRef, inputRef: ref, value: value, onChange: (0, ramda_1.pipe)((0, ramda_1.tap)(onInputChange), utils_1.getValue, onChange), InputProps: __assign(__assign({}, InputProps), { classes: __assign({ root: (0, classnames_1.default)(styles['input__root'], (0, ramda_1.path)(['classes', 'root'], InputProps)) }, commonClasses) }) })));
+            return multiple ? (react_1.default.createElement(TextField_1.default, __assign({ variant: "standard" }, 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((0, ramda_1.remove)(index, 1, value)); } })); }), inputComponent: react_input_autosize_1.default, classes: __assign(__assign({ root: (0, classnames_1.default)(styles['multiple-input__input'], (0, ramda_1.path)(['classes', 'root'], InputProps)) }, commonClasses), { input: (0, 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({ variant: "standard" }, otherProps, { ref: inputRef, inputRef: ref, value: value, onChange: (0, ramda_1.pipe)((0, ramda_1.tap)(onInputChange), utils_1.getValue, onChange), InputProps: __assign(__assign({}, InputProps), { classes: __assign({ root: (0, classnames_1.default)(styles['input__root'], (0, ramda_1.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_1.default.createElement(Popper_1.default, { anchorEl: inputRef.current, open: Boolean(children) || isPlaceholderVisible },
@@ -181,6 +183,7 @@ TypeaheadEditor.propTypes = {
     onChange: prop_types_1.default.func.isRequired,
     getSuggestions: prop_types_1.default.func.isRequired,
     InputProps: prop_types_1.default.object,
-    max: prop_types_1.default.number
+    max: prop_types_1.default.number,
+    isCrossedOut: prop_types_1.default.bool
 };
 exports.default = TypeaheadEditor;

package/cjs/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/cjs/components/editors/TypeaheadEditor/styles.js

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

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

@@ -1,10 +1,11 @@
 export default MultipleInput;
-declare function MultipleInput({ values, InputProps, inputProps, classes, onChange, getValueLabel, ...otherProps }: {
+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;
@@ -21,6 +22,7 @@ declare namespace MultipleInput {
         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

@@ -52,10 +52,11 @@ 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 = _a.values, values = _b === void 0 ? [] : _b, _c = _a.InputProps, InputProps = _c === void 0 ? {} : _c, _d = _a.inputProps, inputProps = _d === void 0 ? {} : _d, _e = _a.classes, classes = _e === void 0 ? {} : _e, _f = _a.onChange, onChange = _f === void 0 ? noop : _f, _g = _a.getValueLabel, getValueLabel = _g === void 0 ? identity : _g, otherProps = __rest(_a, ["values", "InputProps", "inputProps", "classes", "onChange", "getValueLabel"]);
+    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 styles = useStyles();
-    var _h = InputProps.classes || {}, root = _h.root, InputClasses = __rest(_h, ["root"]);
-    var _j = useState(''), inputValue = _j[0], setInputValue = _j[1];
+    var _j = InputProps.classes || {}, root = _j.root, InputClasses = __rest(_j, ["root"]);
+    var _k = useState(''), inputValue = _k[0], setInputValue = _k[1];
     var clearInputValue = function () { return setInputValue(''); };
     var removeValueAt = function (index) { return onChange(remove(index, 1, values)); };
     var appendValue = function (value) { return onChange(uniq(__spreadArray(__spreadArray([], values, true), [value], false))); };
@@ -71,14 +72,14 @@ var MultipleInput = function (_a) {
             removeValueAt(-1);
         }
     };
-    var _k = useState(false), isFocused = _k[0], setIsFocused = _k[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), 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) }))));
+            }, 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),
@@ -89,6 +90,7 @@ MultipleInput.propTypes = {
     inputProps: PropTypes.object,
     onChange: PropTypes.func,
     classes: PropTypes.object,
-    getValueLabel: PropTypes.func
+    getValueLabel: PropTypes.func,
+    isCrossedOut: PropTypes.bool
 };
 export default MultipleInput;

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

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

package/esm/components/MultipleInput/styles.js

@@ -16,5 +16,8 @@ export var useStyles = makeStyles({
             padding: 0,
             color: 'inherit'
         }
+    },
+    isCrossedOut: {
+        textDecoration: 'line-through'
     }
 });

package/esm/components/MultipliableSelect/MultipliableSelect.d.ts

@@ -1,5 +1,5 @@
 export default MultipliableSelect;
-declare function MultipliableSelect({ multiple, value, children, getValueLabel, getValuePlaceholder, onChange, fullWidth, TextFieldProps, MenuProps, classes, ...otherProps }: {
+declare function MultipliableSelect({ multiple, value, children, getValueLabel, getValuePlaceholder, onChange, fullWidth, TextFieldProps, MenuProps, classes, isCrossedOut, ...otherProps }: {
     [x: string]: any;
     multiple: any;
     value: any;
@@ -11,6 +11,7 @@ declare function MultipliableSelect({ multiple, value, children, getValueLabel,
     TextFieldProps: any;
     MenuProps: any;
     classes: any;
+    isCrossedOut: any;
 }): JSX.Element;
 declare namespace MultipliableSelect {
     namespace propTypes {
@@ -24,6 +25,7 @@ declare namespace MultipliableSelect {
         const onChange: PropTypes.Requireable<(...args: any[]) => any>;
         const getValueLabel: PropTypes.Requireable<(...args: any[]) => any>;
         const getValuePlaceholder: PropTypes.Requireable<(...args: any[]) => any>;
+        const isCrossedOut: PropTypes.Requireable<boolean>;
     }
 }
 import PropTypes from 'prop-types';

package/esm/components/MultipliableSelect/MultipliableSelect.js

@@ -31,9 +31,9 @@ import ValueChip from '../ValueChip/ValueChip';
 import { useStyles } from './styles';
 var MultipliableSelect = function (_a) {
     var _b;
-    var multiple = _a.multiple, value = _a.value, children = _a.children, _c = _a.getValueLabel, getValueLabel = _c === void 0 ? noop : _c, _d = _a.getValuePlaceholder, getValuePlaceholder = _d === void 0 ? identity : _d, _e = _a.onChange, onChange = _e === void 0 ? noop : _e, fullWidth = _a.fullWidth, TextFieldProps = _a.TextFieldProps, MenuProps = _a.MenuProps, classes = _a.classes, otherProps = __rest(_a, ["multiple", "value", "children", "getValueLabel", "getValuePlaceholder", "onChange", "fullWidth", "TextFieldProps", "MenuProps", "classes"]);
+    var multiple = _a.multiple, value = _a.value, children = _a.children, _c = _a.getValueLabel, getValueLabel = _c === void 0 ? noop : _c, _d = _a.getValuePlaceholder, getValuePlaceholder = _d === void 0 ? identity : _d, _e = _a.onChange, onChange = _e === void 0 ? noop : _e, fullWidth = _a.fullWidth, TextFieldProps = _a.TextFieldProps, MenuProps = _a.MenuProps, classes = _a.classes, isCrossedOut = _a.isCrossedOut, otherProps = __rest(_a, ["multiple", "value", "children", "getValueLabel", "getValuePlaceholder", "onChange", "fullWidth", "TextFieldProps", "MenuProps", "classes", "isCrossedOut"]);
     var styles = useStyles();
-    return (React.createElement(TextField, __assign({ variant: "standard", select: true, fullWidth: fullWidth }, TextFieldProps, { value: defaultTo(multiple ? [] : '', value), onChange: pipe(getValue, onChange), SelectProps: __assign(__assign({}, otherProps), { MenuProps: __assign({ anchorOrigin: { vertical: 'bottom', horizontal: 'center' } }, MenuProps), classes: __assign(__assign({}, classes), { select: classnames((_b = {}, _b[styles.multiSelect] = multiple, _b), prop('root', classes), prop('select', classes)) }), multiple: multiple, 
+    return (React.createElement(TextField, __assign({ variant: "standard", select: true, fullWidth: fullWidth }, TextFieldProps, { value: defaultTo(multiple ? [] : '', value), onChange: pipe(getValue, onChange), SelectProps: __assign(__assign({}, otherProps), { MenuProps: __assign({ anchorOrigin: { vertical: 'bottom', horizontal: 'center' } }, MenuProps), classes: __assign(__assign({}, classes), { select: classnames((_b = {}, _b[styles.multiSelect] = multiple, _b[styles.isCrossedOut] = isCrossedOut, _b), prop('root', classes), prop('select', classes)) }), multiple: multiple, 
             // eslint-disable-next-line react/display-name
             renderValue: function (selected) {
                 return multiple ? (React.createElement("div", { className: styles.chips }, selected.map(function (value, index) { return (React.createElement(ValueChip, { key: value, label: getValueLabel(value) || getValuePlaceholder(value), onMouseDown: function (event) { return event.stopPropagation(); }, onDelete: function () { return onChange(remove(index, 1, selected)); } })); }))) : (getValueLabel(selected) || getValuePlaceholder(selected));
@@ -49,6 +49,7 @@ MultipliableSelect.propTypes = {
     classes: PropTypes.object,
     onChange: PropTypes.func,
     getValueLabel: PropTypes.func,
-    getValuePlaceholder: PropTypes.func
+    getValuePlaceholder: PropTypes.func,
+    isCrossedOut: PropTypes.bool
 };
 export default MultipliableSelect;

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

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

package/esm/components/MultipliableSelect/styles.js

@@ -7,5 +7,8 @@ export var useStyles = makeStyles({
     chips: {
         display: 'flex',
         flexWrap: 'wrap'
+    },
+    isCrossedOut: {
+        textDecoration: 'line-through'
     }
 });

package/esm/components/SimpleInput/SimpleInput.d.ts

@@ -1,9 +1,11 @@
 export default SimpleInput;
-declare function SimpleInput({ value, onChange, multiline, ...otherProps }: {
+declare function SimpleInput({ value, onChange, multiline, InputProps, isCrossedOut, ...otherProps }: {
     [x: string]: any;
     value: any;
     onChange?: () => void;
     multiline: any;
+    InputProps?: {};
+    isCrossedOut: any;
 }): JSX.Element;
 declare namespace SimpleInput {
     namespace propTypes {
@@ -12,6 +14,7 @@ declare namespace SimpleInput {
         const multiline: PropTypes.Requireable<boolean>;
         const InputProps: PropTypes.Requireable<object>;
         const className: PropTypes.Requireable<string>;
+        const isCrossedOut: PropTypes.Requireable<boolean>;
     }
 }
 import PropTypes from 'prop-types';

package/esm/components/SimpleInput/SimpleInput.js

@@ -22,12 +22,17 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import { isNil, pipe, propEq, when } from 'ramda';
-import { getValue, noop } from '../../core';
 import TextField from '@mui/material/TextField';
+import { getValue, noop } from '../../core';
+import { useStyles } from './styles';
 var SimpleInput = function (_a) {
-    var value = _a.value, _b = _a.onChange, onChange = _b === void 0 ? noop : _b, multiline = _a.multiline, otherProps = __rest(_a, ["value", "onChange", "multiline"]);
-    var _c = useState(''), currentValue = _c[0], setCurrentValue = _c[1];
+    var _b;
+    var value = _a.value, _c = _a.onChange, onChange = _c === void 0 ? noop : _c, multiline = _a.multiline, _d = _a.InputProps, InputProps = _d === void 0 ? {} : _d, isCrossedOut = _a.isCrossedOut, otherProps = __rest(_a, ["value", "onChange", "multiline", "InputProps", "isCrossedOut"]);
+    var styles = useStyles();
+    var _e = InputProps.classes || {}, root = _e.root, InputClasses = __rest(_e, ["root"]);
+    var _f = useState(''), currentValue = _f[0], setCurrentValue = _f[1];
     useEffect(function () {
         setCurrentValue(isNil(value) ? '' : value);
     }, [value]);
@@ -41,13 +46,14 @@ var SimpleInput = function (_a) {
             applyCurrentValueChange();
         }
     };
-    return (React.createElement(TextField, __assign({ variant: "standard" }, otherProps, { multiline: multiline, value: currentValue, onKeyPress: when(propEq('key', 'Enter'), onEnterPress), onBlur: applyCurrentValueChange, onChange: pipe(getValue, setCurrentValue) })));
+    return (React.createElement(TextField, __assign({ variant: "standard" }, otherProps, { InputProps: __assign(__assign({}, InputProps), { classes: __assign({ root: classnames(root, (_b = {}, _b[styles.isCrossedOut] = isCrossedOut, _b)) }, InputClasses) }), multiline: multiline, value: currentValue, onKeyPress: when(propEq('key', 'Enter'), onEnterPress), onBlur: applyCurrentValueChange, onChange: pipe(getValue, setCurrentValue) })));
 };
 SimpleInput.propTypes = {
     value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     onChange: PropTypes.func,
     multiline: PropTypes.bool,
     InputProps: PropTypes.object,
-    className: PropTypes.string
+    className: PropTypes.string,
+    isCrossedOut: PropTypes.bool
 };
 export default SimpleInput;

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

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

package/esm/components/SimpleInput/styles.js

@@ -0,0 +1,6 @@
+import { makeStyles } from '@mui/styles';
+export var useStyles = makeStyles({
+    isCrossedOut: {
+        textDecoration: 'line-through'
+    }
+});

package/esm/components/attributes/editMode/AttributesPager/AttributeRenderer.d.ts

@@ -1,12 +1,9 @@
 import React from 'react';
 import { AttributeValue, NestedAttributeValue, ReferenceAttributeValue, SimpleAttributeValue } from '@reltio/mdm-sdk';
 import { AttributePagerProps } from './index';
-import { ScrollToElementContext } from '../../../../contexts';
-type Props = Required<Omit<AttributePagerProps, 'values'>> & {
+type Props = Omit<AttributePagerProps, 'values'> & {
     values?: (SimpleAttributeValue | NestedAttributeValue | ReferenceAttributeValue)[];
     nonVisibleValues: AttributeValue[];
-    highlightedError?: React.ContextType<typeof ScrollToElementContext>;
-    highlightedAttribute?: React.ContextType<typeof ScrollToElementContext>;
 };
 declare const _default: React.MemoExoticComponent<{
     ({ max, values, attributeType, parentUri, mode, drawLines, showEmptyEditors, errorMessage, errors, paging, crosswalks, showNonOv, nonVisibleValues, highlightedError, highlightedAttribute, onAddAttributes, onDeleteAttribute, onChangeAttribute, onDeactivateError, additionalControlsRenderer, requestNextPageOfAttributeValues }: Props): JSX.Element;

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

@@ -1,7 +1,7 @@
 import React, { useCallback, useRef, useState, useContext, useMemo, memo } from 'react';
 import classNames from 'classnames';
 import { createNewAttribute, getAttributeOwnError, isComplexAttribute, isEditableMode as checkIsEditableMode, isEmptyValue } from '@reltio/mdm-sdk';
-import { add, always, has, ifElse, min, pipe, prop, T } from 'ramda';
+import { add, always, has, ifElse, min, pipe, prop, T, omit } from 'ramda';
 import BranchDecorator from '../../BranchDecorator/BranchDecorator';
 import ErrorMessage from '../../../ErrorWrapper/ErrorMessage';
 import Title from '../../../Title/Title';
@@ -31,16 +31,20 @@ var AttributeRenderer = function (_a) {
     var showEmpty = ((!hadDeletions && showEmptyEditors) || isRequired || isPinned) && isEmptyValues;
     var emptyEditorValue = useRef(createNewAttribute({
         parentUri: parentUri,
-        attributeType: attributeType
+        attributeType: omit(['defaultValue'], attributeType)
     }));
     var onAddOneMore = useCallback(function () {
         setVisibleValuesCount(visibleValuesCount + 1);
-        var attribute = {
+        var createAttribute = function (attributeType) { return ({
             parentUri: parentUri,
             index: visibleValuesCount,
             attributeType: attributeType
-        };
-        return onAddAttributes(showEmpty && !isComplexAttribute(attributeType.type) ? [attribute, attribute] : [attribute]);
+        }); };
+        if (showEmpty && !isComplexAttribute(attributeType.type)) {
+            var attributes = [createAttribute(omit(['defaultValue'], attributeType)), createAttribute(attributeType)];
+            return onAddAttributes(attributes);
+        }
+        return onAddAttributes([createAttribute(attributeType)]);
     }, [visibleValuesCount, onAddAttributes, parentUri, attributeType, showEmpty]);
     var onDelete = useCallback(pipe(onDeleteAttribute, T, setHadDeletions), [onDeleteAttribute, setHadDeletions]);
     if (isEmptyValues && !showEmpty) {

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { RequestNextPageOfAttributeValuesPayload } from '@reltio/mdm-module';
 import { AttributeError, AttributeType, Crosswalk, ImageAttributeValue, Mode, NestedAttributeValue, Paging, ReferenceAttributeValue, SimpleAttributeValue, AttributeItem } from '@reltio/mdm-sdk';
 import AttributesPager from './AttributesPager';
@@ -33,7 +33,7 @@ type OwnProps = {
 };
 export type AttributePagerProps = StateProps & DispatchProps & OwnProps;
 export { AttributesPager, CardinalityMessage };
-declare const _default: import("react-redux").ConnectedComponent<import("react").ComponentType<StateProps & DispatchProps & OwnProps>, (import("react-redux").Omit<import("react").ClassAttributes<import("react").Component<StateProps & DispatchProps & OwnProps, any, any>> & StateProps & DispatchProps & OwnProps, "max" | "errorMessage" | "errors" | "requestNextPageOfAttributeValues" | "onDeactivateError"> | import("react-redux").Omit<StateProps & DispatchProps & OwnProps & {
-    children?: import("react").ReactNode;
+declare const _default: import("react-redux").ConnectedComponent<React.ComponentType<StateProps & DispatchProps & OwnProps>, (import("react-redux").Omit<React.ClassAttributes<React.Component<StateProps & DispatchProps & OwnProps, any, any>> & StateProps & DispatchProps & OwnProps, "max" | "errorMessage" | "errors" | "requestNextPageOfAttributeValues" | "onDeactivateError"> | import("react-redux").Omit<StateProps & DispatchProps & OwnProps & {
+    children?: React.ReactNode;
 }, "max" | "errorMessage" | "errors" | "requestNextPageOfAttributeValues" | "onDeactivateError">) & OwnProps>;
 export default _default;

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

@@ -92,7 +92,7 @@ var SimpleAttributeEditor = function (_a) {
     var showAddButton = !!onAddOneMore && canCreate && !attributeType.singleValue;
     var showDeleteButton = !deleted && !!onDeleteAttribute && canDelete;
     var hasError = !!errorMessage;
-    var deletedProps = deleted ? { disabled: true } : {};
+    var deletedProps = deleted ? { disabled: true, isCrossedOut: true } : {};
     var isProfilePerspectiveView = useContext(ProfilePerspectiveViewContext);
     var autopopulationContextValue = useAutopopulationContextValue({
         enabled: isProfilePerspectiveView && isDependentLookupAttrType(attributeType),

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

@@ -1,14 +1,10 @@
+/// <reference types="react" />
+type Props = {
+    value?: boolean;
+    onChange?: (checked: boolean) => void;
+    className?: string;
+    isCrossedOut?: boolean;
+    disabled?: boolean;
+};
+declare const BooleanRadioEditor: ({ value, onChange, className, isCrossedOut, disabled }: Props) => JSX.Element;
 export default BooleanRadioEditor;
-declare function BooleanRadioEditor({ value, onChange, className }: {
-    value: any;
-    onChange: any;
-    className: any;
-}): JSX.Element;
-declare namespace BooleanRadioEditor {
-    namespace propTypes {
-        const value: PropTypes.Requireable<boolean>;
-        const onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        const className: PropTypes.Requireable<string>;
-    }
-}
-import PropTypes from 'prop-types';

package/esm/components/editors/BooleanRadioEditor/BooleanRadioEditor.js

@@ -1,20 +1,17 @@
-import BooleanEditor from '../BooleanEditor/BooleanEditor';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import PropTypes from 'prop-types';
 import React from 'react';
 import i18n from 'ui-i18n';
+import classnames from 'classnames';
 import { isNil, not, pipe } from 'ramda';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import BooleanEditor from '../BooleanEditor/BooleanEditor';
 import { useStyles } from './styles';
 var BooleanRadioEditor = function (_a) {
-    var value = _a.value, onChange = _a.onChange, className = _a.className;
+    var _b;
+    var value = _a.value, onChange = _a.onChange, className = _a.className, isCrossedOut = _a.isCrossedOut, disabled = _a.disabled;
     var styles = useStyles();
     return (React.createElement("div", { className: className },
-        React.createElement(FormControlLabel, { classes: { label: styles.label }, control: React.createElement(BooleanEditor, { classes: { root: styles['checkbox_primary'] }, color: "primary", value: !isNil(value) && !!value, onChange: onChange }), label: i18n.text('Yes') }),
-        React.createElement(FormControlLabel, { classes: { label: styles.label }, control: React.createElement(BooleanEditor, { classes: { root: styles['checkbox_primary'] }, color: "primary", value: !isNil(value) && !value, onChange: onChange && pipe(not, onChange) }), label: i18n.text('No') })));
-};
-BooleanRadioEditor.propTypes = {
-    value: PropTypes.bool,
-    onChange: PropTypes.func,
-    className: PropTypes.string
+        React.createElement("div", { className: classnames(styles.editors, (_b = {}, _b[styles.isCrossedOut] = isCrossedOut, _b)) },
+            React.createElement(FormControlLabel, { classes: { label: styles.label }, control: React.createElement(BooleanEditor, { classes: { root: styles.checkboxPrimary }, color: "primary", value: !isNil(value) && !!value, onChange: onChange, disabled: disabled }), label: i18n.text('Yes') }),
+            React.createElement(FormControlLabel, { classes: { label: styles.label }, control: React.createElement(BooleanEditor, { classes: { root: styles.checkboxPrimary }, color: "primary", value: !isNil(value) && !value, onChange: onChange && pipe(not, onChange), disabled: disabled }), label: i18n.text('No') }))));
 };
 export default BooleanRadioEditor;

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

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

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

@@ -1,9 +1,24 @@
 import { makeStyles } from '@mui/styles';
 export var useStyles = makeStyles(function (theme) { return ({
-    checkbox_primary: {
+    editors: {
+        width: 'fit-content'
+    },
+    checkboxPrimary: {
         color: theme.palette.divider
     },
     label: {
         color: theme.palette.text.secondary
+    },
+    isCrossedOut: {
+        position: 'relative',
+        '&:before': {
+            content: "''",
+            position: 'absolute',
+            height: '1px',
+            background: theme.palette.text.secondary,
+            top: '50%',
+            left: '-3px',
+            right: '13px'
+        }
     }
 }); });

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

@@ -6,6 +6,7 @@ type DateEditorProps = Omit<DatePickerProps<Moment>, 'value' | 'minDate' | 'maxD
     maxDate?: Date | number;
     value?: Date | number;
     onChange: (value: Date) => void;
+    isCrossedOut?: boolean;
 };
-declare const DateEditor: ({ value, minDate, maxDate, format, label, onChange, slotProps, ...otherProps }: DateEditorProps) => JSX.Element;
+declare const DateEditor: ({ value, minDate, maxDate, format, label, onChange, slotProps, isCrossedOut, ...otherProps }: DateEditorProps) => JSX.Element;
 export default DateEditor;

package/esm/components/editors/DateEditor/DateEditor.js

@@ -22,17 +22,18 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { useMemo } from 'react';
 import i18n from 'ui-i18n';
-import { mergeDeepLeft } from 'ramda';
+import classnames from 'classnames';
+import { mergeDeepLeft, isNil, pipe, when, both } from 'ramda';
 import moment from 'moment';
-import { isNil, pipe, when, both } from 'ramda';
 import { debounce, utils } from '@reltio/mdm-sdk';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { DEFAULT_MAX_DATE, DEFAULT_MIN_DATE } from '../constants';
 import { useStyles } from './styles';
 var DateEditor = function (_a) {
-    var value = _a.value, _b = _a.minDate, minDate = _b === void 0 ? DEFAULT_MIN_DATE : _b, _c = _a.maxDate, maxDate = _c === void 0 ? DEFAULT_MAX_DATE : _c, format = _a.format, label = _a.label, onChange = _a.onChange, slotProps = _a.slotProps, otherProps = __rest(_a, ["value", "minDate", "maxDate", "format", "label", "onChange", "slotProps"]);
+    var _b;
+    var value = _a.value, _c = _a.minDate, minDate = _c === void 0 ? DEFAULT_MIN_DATE : _c, _d = _a.maxDate, maxDate = _d === void 0 ? DEFAULT_MAX_DATE : _d, format = _a.format, label = _a.label, onChange = _a.onChange, slotProps = _a.slotProps, isCrossedOut = _a.isCrossedOut, otherProps = __rest(_a, ["value", "minDate", "maxDate", "format", "label", "onChange", "slotProps", "isCrossedOut"]);
     var styles = useStyles();
-    var _d = React.useState(null), error = _d[0], setError = _d[1];
+    var _e = React.useState(null), error = _e[0], setError = _e[1];
     var errorMessage = useMemo(function () {
         switch (error) {
             case 'maxDate':
@@ -57,7 +58,7 @@ var DateEditor = function (_a) {
             helperText: errorMessage,
             InputProps: {
                 classes: {
-                    root: styles.inputRoot
+                    root: classnames(styles.inputRoot, (_b = {}, _b[styles.isCrossedOut] = isCrossedOut, _b))
                 },
                 disableUnderline: isNil(editorValue)
             },

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

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

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

@@ -9,5 +9,8 @@ export var useStyles = makeStyles({
         letterSpacing: 0,
         lineHeight: '16px',
         overflow: 'hidden'
+    },
+    isCrossedOut: {
+        textDecoration: 'line-through'
     }
 });

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

@@ -21,6 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import classnames from 'classnames';
 import { components } from 'react-select';
 import PropTypes from 'prop-types';
 import { debounce, LookupValueType } from '@reltio/mdm-sdk';
@@ -41,7 +42,12 @@ import useAutopopulation from './useAutopopulation';
 import useSavingFocus from './useSavingFocus';
 import LoadMoreButton from '../../commonReactSelectComponents/LoadMoreButton';
 import { useDidUpdateEffect } from '../../../hooks';
-var Input = function (props) { return React.createElement(components.Input, __assign({}, props, { isHidden: false })); };
+var Input = function (props) {
+    var _a;
+    var styles = useStyles();
+    var isCrossedOut = props.selectProps.isCrossedOut;
+    return (React.createElement(components.Input, __assign({}, props, { inputClassName: classnames((_a = {}, _a[styles.isCrossedOut] = isCrossedOut, _a)), isHidden: false })));
+};
 var SelectComponents = {
     IndicatorSeparator: EmptyStub,
     LoadingIndicator: EmptyStub,

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

@@ -1 +1 @@
-export const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"option" | "placeholder" | "clearIndicator" | "dropdownIndicator">;
+export const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"option" | "placeholder" | "isCrossedOut" | "clearIndicator" | "dropdownIndicator">;

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

@@ -13,5 +13,8 @@ export var useStyles = makeStyles(function (theme) { return ({
     },
     placeholder: {
         position: 'static'
+    },
+    isCrossedOut: {
+        textDecoration: 'line-through'
     }
 }); });

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

@@ -6,6 +6,7 @@ type TimestampEditorProps = Omit<DateTimePickerProps<Moment>, 'value' | 'minDate
     maxDate?: Date | number;
     value?: Date | number;
     onChange: (value: Date) => void;
+    isCrossedOut?: boolean;
 };
-declare const TimestampEditor: ({ value, minDate, maxDate, label, slotProps, onChange, format, ...otherProps }: TimestampEditorProps) => JSX.Element;
+declare const TimestampEditor: ({ value, minDate, maxDate, label, slotProps, onChange, format, isCrossedOut, ...otherProps }: TimestampEditorProps) => JSX.Element;
 export default TimestampEditor;

package/esm/components/editors/TimestampEditor/TimestampEditor.js

@@ -22,18 +22,19 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { useMemo } from 'react';
 import i18n from 'ui-i18n';
-import { mergeDeepLeft } from 'ramda';
+import classnames from 'classnames';
+import { mergeDeepLeft, isNil, pipe, when, both } from 'ramda';
 import moment from 'moment';
 import { getLocaleFormat, utils } from '@reltio/mdm-sdk';
-import { both, isNil, pipe, when } from 'ramda';
 import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
 import { renderTimeViewClock } from '@mui/x-date-pickers/timeViewRenderers';
 import { DEFAULT_MAX_DATE, DEFAULT_MIN_DATE } from '../constants';
 import { useStyles } from './styles';
 var TimestampEditor = function (_a) {
-    var value = _a.value, _b = _a.minDate, minDate = _b === void 0 ? DEFAULT_MIN_DATE : _b, _c = _a.maxDate, maxDate = _c === void 0 ? DEFAULT_MAX_DATE : _c, label = _a.label, slotProps = _a.slotProps, onChange = _a.onChange, format = _a.format, otherProps = __rest(_a, ["value", "minDate", "maxDate", "label", "slotProps", "onChange", "format"]);
+    var _b;
+    var value = _a.value, _c = _a.minDate, minDate = _c === void 0 ? DEFAULT_MIN_DATE : _c, _d = _a.maxDate, maxDate = _d === void 0 ? DEFAULT_MAX_DATE : _d, label = _a.label, slotProps = _a.slotProps, onChange = _a.onChange, format = _a.format, isCrossedOut = _a.isCrossedOut, otherProps = __rest(_a, ["value", "minDate", "maxDate", "label", "slotProps", "onChange", "format", "isCrossedOut"]);
     var styles = useStyles();
-    var _d = React.useState(null), error = _d[0], setError = _d[1];
+    var _e = React.useState(null), error = _e[0], setError = _e[1];
     var errorMessage = useMemo(function () {
         switch (error) {
             case 'maxDate':
@@ -58,7 +59,7 @@ var TimestampEditor = function (_a) {
             helperText: errorMessage,
             InputProps: {
                 classes: {
-                    root: styles.inputRoot
+                    root: classnames(styles.inputRoot, (_b = {}, _b[styles.isCrossedOut] = isCrossedOut, _b))
                 },
                 disableUnderline: isNil(editorValue)
             },

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

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

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

@@ -21,5 +21,8 @@ export var useStyles = makeStyles(function (theme) { return ({
         fontSize: '14px',
         letterSpacing: 0,
         lineHeight: '16px'
+    },
+    isCrossedOut: {
+        textDecoration: 'line-through'
     }
 }); });