@reltio/components 1.4.2226 → 1.4.2228

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (83) hide show
  1. package/AttributeVerificationStatus/AttributeVerificationStatus.module.css.js +2 -2
  2. package/ReadOnlyAttributeValuesBlock/ReadOnlyAttributeValuesBlock.d.ts +9 -1
  3. package/ReadOnlyAttributeValuesBlock/ReadOnlyAttributeValuesBlock.js +3 -3
  4. package/ReadOnlyComplexAttribute/ReadOnlyComplexAttribute.module.css.js +1 -1
  5. package/SimpleAttribute/SimpleAttribute.d.ts +5 -2
  6. package/SimpleAttribute/SimpleAttribute.js +15 -7
  7. package/SimpleAttribute/SimpleAttribute.module.css.js +9 -0
  8. package/VerificationButton/VerificationButton.js +9 -17
  9. package/VerificationButton/VerificationButton.module.css.js +2 -2
  10. package/cjs/AttributeVerificationStatus/AttributeVerificationStatus.module.css.js +2 -2
  11. package/cjs/ReadOnlyAttributeValuesBlock/ReadOnlyAttributeValuesBlock.d.ts +9 -1
  12. package/cjs/ReadOnlyAttributeValuesBlock/ReadOnlyAttributeValuesBlock.js +3 -3
  13. package/cjs/ReadOnlyComplexAttribute/ReadOnlyComplexAttribute.module.css.js +1 -1
  14. package/cjs/SimpleAttribute/SimpleAttribute.d.ts +5 -2
  15. package/cjs/SimpleAttribute/SimpleAttribute.js +19 -11
  16. package/cjs/SimpleAttribute/SimpleAttribute.module.css.js +9 -0
  17. package/cjs/VerificationButton/VerificationButton.js +9 -17
  18. package/cjs/VerificationButton/VerificationButton.module.css.js +2 -2
  19. package/cjs/features/crosswalks/AttributesTable/AttributesTable.js +3 -1
  20. package/cjs/features/crosswalks/AttributesTable/AttributesTable.test-data.d.ts +4 -1
  21. package/cjs/features/crosswalks/AttributesTable/AttributesTable.test-data.js +51 -21
  22. package/cjs/features/crosswalks/AttributesTable/AttributesTable.test.js +56 -0
  23. package/cjs/features/crosswalks/AttributesTable/components/FallbackIndicator/FallbackIndicator.d.ts +7 -0
  24. package/cjs/features/crosswalks/AttributesTable/components/FallbackIndicator/FallbackIndicator.js +31 -0
  25. package/cjs/features/crosswalks/AttributesTable/components/FallbackIndicator/FallbackIndicator.module.css.js +9 -0
  26. package/cjs/features/crosswalks/AttributesTable/components/FallbackIndicator/index.d.ts +1 -0
  27. package/cjs/features/crosswalks/AttributesTable/components/FallbackIndicator/index.js +5 -0
  28. package/cjs/features/crosswalks/AttributesTable/components/OvValuesRenderer/OvValuesRenderer.js +3 -1
  29. package/cjs/features/crosswalks/AttributesTable/components/RuleTypeInfoButton/RuleTypeInfoButton.js +1 -1
  30. package/cjs/features/crosswalks/AttributesTable/components/RuleTypeRenderer/RuleTypeRenderer.d.ts +1 -1
  31. package/cjs/features/crosswalks/AttributesTable/components/RuleTypeRenderer/RuleTypeRenderer.js +65 -11
  32. package/cjs/features/crosswalks/AttributesTable/components/RuleTypeRenderer/RuleTypeRenderer.module.css.js +9 -0
  33. package/cjs/features/crosswalks/AttributesTable/components/SyncedValueHeight/ValueHeightConsumer.d.ts +7 -0
  34. package/cjs/features/crosswalks/AttributesTable/components/SyncedValueHeight/ValueHeightConsumer.js +15 -0
  35. package/cjs/features/crosswalks/AttributesTable/components/SyncedValueHeight/ValueHeightReporter.d.ts +7 -0
  36. package/cjs/features/crosswalks/AttributesTable/components/SyncedValueHeight/ValueHeightReporter.js +53 -0
  37. package/cjs/features/crosswalks/AttributesTable/components/SyncedValueHeight/index.d.ts +2 -0
  38. package/cjs/features/crosswalks/AttributesTable/components/SyncedValueHeight/index.js +7 -0
  39. package/cjs/features/crosswalks/AttributesTable/helpers.d.ts +4 -2
  40. package/cjs/features/crosswalks/AttributesTable/helpers.js +96 -17
  41. package/cjs/features/crosswalks/AttributesTable/helpers.test.js +499 -50
  42. package/cjs/features/crosswalks/AttributesTable/types.d.ts +17 -3
  43. package/cjs/features/crosswalks/contexts/SyncedValueHeightsContext.d.ts +11 -0
  44. package/cjs/features/crosswalks/contexts/SyncedValueHeightsContext.js +66 -0
  45. package/features/crosswalks/AttributesTable/AttributesTable.js +3 -1
  46. package/features/crosswalks/AttributesTable/AttributesTable.test-data.d.ts +4 -1
  47. package/features/crosswalks/AttributesTable/AttributesTable.test-data.js +49 -20
  48. package/features/crosswalks/AttributesTable/AttributesTable.test.js +58 -2
  49. package/features/crosswalks/AttributesTable/components/FallbackIndicator/FallbackIndicator.d.ts +7 -0
  50. package/features/crosswalks/AttributesTable/components/FallbackIndicator/FallbackIndicator.js +24 -0
  51. package/features/crosswalks/AttributesTable/components/FallbackIndicator/FallbackIndicator.module.css.js +9 -0
  52. package/features/crosswalks/AttributesTable/components/FallbackIndicator/index.d.ts +1 -0
  53. package/features/crosswalks/AttributesTable/components/FallbackIndicator/index.js +1 -0
  54. package/features/crosswalks/AttributesTable/components/OvValuesRenderer/OvValuesRenderer.js +3 -1
  55. package/features/crosswalks/AttributesTable/components/RuleTypeInfoButton/RuleTypeInfoButton.js +1 -1
  56. package/features/crosswalks/AttributesTable/components/RuleTypeRenderer/RuleTypeRenderer.d.ts +1 -1
  57. package/features/crosswalks/AttributesTable/components/RuleTypeRenderer/RuleTypeRenderer.js +65 -11
  58. package/features/crosswalks/AttributesTable/components/RuleTypeRenderer/RuleTypeRenderer.module.css.js +9 -0
  59. package/features/crosswalks/AttributesTable/components/SyncedValueHeight/ValueHeightConsumer.d.ts +7 -0
  60. package/features/crosswalks/AttributesTable/components/SyncedValueHeight/ValueHeightConsumer.js +8 -0
  61. package/features/crosswalks/AttributesTable/components/SyncedValueHeight/ValueHeightReporter.d.ts +7 -0
  62. package/features/crosswalks/AttributesTable/components/SyncedValueHeight/ValueHeightReporter.js +23 -0
  63. package/features/crosswalks/AttributesTable/components/SyncedValueHeight/index.d.ts +2 -0
  64. package/features/crosswalks/AttributesTable/components/SyncedValueHeight/index.js +2 -0
  65. package/features/crosswalks/AttributesTable/helpers.d.ts +4 -2
  66. package/features/crosswalks/AttributesTable/helpers.js +95 -18
  67. package/features/crosswalks/AttributesTable/helpers.test.js +501 -52
  68. package/features/crosswalks/AttributesTable/types.d.ts +17 -3
  69. package/features/crosswalks/contexts/SyncedValueHeightsContext.d.ts +11 -0
  70. package/features/crosswalks/contexts/SyncedValueHeightsContext.js +38 -0
  71. package/package.json +2 -2
  72. package/SimpleAttribute/styles.d.ts +0 -1
  73. package/SimpleAttribute/styles.js +0 -42
  74. package/cjs/SimpleAttribute/styles.d.ts +0 -1
  75. package/cjs/SimpleAttribute/styles.js +0 -45
  76. package/cjs/features/crosswalks/AttributesTable/components/RuleTypeRenderer/styles.d.ts +0 -1
  77. package/cjs/features/crosswalks/AttributesTable/components/RuleTypeRenderer/styles.js +0 -13
  78. package/cjs/icons/VerifyAllIcon.d.ts +0 -3
  79. package/cjs/icons/VerifyAllIcon.js +0 -26
  80. package/features/crosswalks/AttributesTable/components/RuleTypeRenderer/styles.d.ts +0 -1
  81. package/features/crosswalks/AttributesTable/components/RuleTypeRenderer/styles.js +0 -10
  82. package/icons/VerifyAllIcon.d.ts +0 -3
  83. package/icons/VerifyAllIcon.js +0 -21
@@ -1,9 +1,9 @@
1
- const styles = {"status":"AttributeVerificationStatus-status--NwPR6","valid":"AttributeVerificationStatus-valid--PIGHP","invalid":"AttributeVerificationStatus-invalid--B7p6E","outdated":"AttributeVerificationStatus-outdated--l5khN","maybe":"AttributeVerificationStatus-maybe--egCRg","accept_all":"AttributeVerificationStatus-accept_all--jgMx5","icon":"AttributeVerificationStatus-icon--C8xBC"};
1
+ const styles = {"status":"AttributeVerificationStatus-status--NwPR6","icon":"AttributeVerificationStatus-icon--C8xBC"};
2
2
  if (typeof document !== 'undefined') {
3
3
  const head = document.head || document.getElementsByTagName('head')[0]
4
4
  const style = document.createElement('style');
5
5
  style.type = 'text/css'
6
- style.innerHTML = `.AttributeVerificationStatus-status--NwPR6{height:18px;margin-left:4px;position:relative;width:14px}.AttributeVerificationStatus-status--NwPR6:after{border-radius:50%;content:"";height:6px;left:calc(50% - 3px);position:absolute;top:calc(50% - 3px);width:6px}.AttributeVerificationStatus-valid--PIGHP:after{background-color:rgba(33,150,83,.5)}.AttributeVerificationStatus-invalid--B7p6E:after{background-color:rgba(235,87,87,.5)}.AttributeVerificationStatus-accept_all--jgMx5:after,.AttributeVerificationStatus-maybe--egCRg:after,.AttributeVerificationStatus-outdated--l5khN:after{background-color:rgba(242,201,76,.5)}.AttributeVerificationStatus-icon--C8xBC{background-color:#fff;left:0;opacity:var(--verify-status-opacity);position:absolute;top:2px;z-index:1}.AttributeVerificationStatus-icon--C8xBC:hover{background-color:#fff}`;
6
+ style.innerHTML = `.AttributeVerificationStatus-status--NwPR6{height:18px;margin-left:4px;position:relative;width:14px}.AttributeVerificationStatus-icon--C8xBC{left:0;position:absolute;top:2px}`;
7
7
  head.appendChild(style);
8
8
  }
9
9
  export default styles;
@@ -1,9 +1,13 @@
1
1
  import React from 'react';
2
- import { AttributeType, AttributeValue } from '@reltio/mdm-sdk';
2
+ import { AttributeType, AttributeValue, OvDetails } from '@reltio/mdm-sdk';
3
3
  type SlotParams<T> = {
4
4
  attributeType?: AttributeType;
5
5
  attributeValue: T;
6
6
  };
7
+ type WrapperParams = {
8
+ uri: string;
9
+ children: React.ReactNode;
10
+ };
7
11
  type Props = {
8
12
  values: AttributeValue[];
9
13
  attributeType: AttributeType;
@@ -11,7 +15,11 @@ type Props = {
11
15
  valueContainerClassName?: string;
12
16
  LabelRenderer?: ({ attributeType, attributeValue }: SlotParams<AttributeValue>) => React.ReactElement;
13
17
  RightSlot?: ({ attributeType, attributeValue }: SlotParams<AttributeValue>) => React.ReactElement;
18
+ FallbackSlot?: ({ ovDetails }: {
19
+ ovDetails: OvDetails;
20
+ }) => React.ReactElement;
14
21
  showNonOv?: boolean;
22
+ AttributeValueWrapper?: ({ uri, children }: WrapperParams) => React.ReactElement;
15
23
  };
16
24
  declare const _default: React.MemoExoticComponent<({ expanded, LabelRenderer, RightSlot, ...props }: Props) => React.JSX.Element>;
17
25
  export default _default;
@@ -27,11 +27,11 @@ import { ReadOnlyImageAttributesLine } from '../ReadOnlyImageAttributesLine';
27
27
  import { LazyRenderer } from '../LazyRenderer';
28
28
  var lazyRendererStyle = { height: '18px' };
29
29
  var renderAttributesList = function (_a) {
30
- var values = _a.values, valueContainerClassName = _a.valueContainerClassName, props = __rest(_a, ["values", "valueContainerClassName"]);
30
+ var values = _a.values, valueContainerClassName = _a.valueContainerClassName, AttributeValueWrapper = _a.AttributeValueWrapper, props = __rest(_a, ["values", "valueContainerClassName", "AttributeValueWrapper"]);
31
31
  var enabledLazyRendering = (values === null || values === void 0 ? void 0 : values.length) > 20;
32
32
  return (React.createElement(React.Fragment, null, (values || []).map(function (attributeValue) { return (React.createElement(LazyRenderer, { key: attributeValue.uri, className: valueContainerClassName, enabled: enabledLazyRendering, style: lazyRendererStyle },
33
- React.createElement("div", { className: valueContainerClassName },
34
- React.createElement(ReadOnlyAttribute, __assign({ attributeValue: attributeValue }, props))))); })));
33
+ React.createElement("div", { className: valueContainerClassName }, AttributeValueWrapper ? (React.createElement(AttributeValueWrapper, { uri: attributeValue.uri },
34
+ React.createElement(ReadOnlyAttribute, __assign({ attributeValue: attributeValue }, props)))) : (React.createElement(ReadOnlyAttribute, __assign({ attributeValue: attributeValue }, props)))))); })));
35
35
  };
36
36
  var ReadOnlyAttributeValuesBlock = function (_a) {
37
37
  var expanded = _a.expanded, LabelRenderer = _a.LabelRenderer, RightSlot = _a.RightSlot, props = __rest(_a, ["expanded", "LabelRenderer", "RightSlot"]);
@@ -3,7 +3,7 @@ if (typeof document !== 'undefined') {
3
3
  const head = document.head || document.getElementsByTagName('head')[0]
4
4
  const style = document.createElement('style');
5
5
  style.type = 'text/css'
6
- style.innerHTML = `.ReadOnlyComplexAttribute-complexContainer--DybRT{margin-top:1px}.ReadOnlyComplexAttribute-labelContainer--x4Ikp{display:flex;min-height:18px;--verify-status-opacity:0}.ReadOnlyComplexAttribute-labelContainer--x4Ikp:hover{--verify-status-opacity:1}.ReadOnlyComplexAttribute-label--BqM8F{display:inline-flex;font-size:13px;letter-spacing:normal;line-height:16px;margin-left:2px;white-space:break-spaces}.ReadOnlyComplexAttribute-spacer--raB-d{flex:1}.ReadOnlyComplexAttribute-ovFalse--9sySx{opacity:var(--mui-inactive-opacity)}`;
6
+ style.innerHTML = `.ReadOnlyComplexAttribute-complexContainer--DybRT{margin-top:1px}.ReadOnlyComplexAttribute-labelContainer--x4Ikp{display:flex;min-height:18px}.ReadOnlyComplexAttribute-label--BqM8F{display:inline-flex;font-size:13px;letter-spacing:normal;line-height:16px;margin-left:2px;white-space:break-spaces}.ReadOnlyComplexAttribute-spacer--raB-d{flex:1}.ReadOnlyComplexAttribute-ovFalse--9sySx{opacity:var(--mui-inactive-opacity)}`;
7
7
  head.appendChild(style);
8
8
  }
9
9
  export default styles;
@@ -1,10 +1,13 @@
1
1
  import React from 'react';
2
- import { AttributeType, SimpleAttributeValue } from '@reltio/mdm-sdk';
2
+ import { AttributeType, SimpleAttributeValue, OvDetails } from '@reltio/mdm-sdk';
3
3
  type Props = {
4
4
  className?: string;
5
5
  attributeValue: SimpleAttributeValue;
6
6
  attributeType: AttributeType;
7
7
  inlined?: boolean;
8
+ FallbackSlot?: ({ ovDetails }: {
9
+ ovDetails: OvDetails;
10
+ }) => React.ReactElement;
8
11
  };
9
- export declare const SimpleAttribute: ({ className, attributeType, attributeValue: rawAttributeValue, inlined }: Props) => React.JSX.Element;
12
+ export declare const SimpleAttribute: ({ className, attributeType, attributeValue: rawAttributeValue, inlined, FallbackSlot }: Props) => React.JSX.Element;
10
13
  export {};
@@ -1,7 +1,8 @@
1
1
  import React, { useContext, useMemo } from 'react';
2
- import { getAttrDataTypeDefinition, getHistoryAppearanceByUri, getAttributeValue, createRelatedObjectUris, isOv, getHistoryAttributeClassName, getObjectTypeByAttributeUri } from '@reltio/mdm-sdk';
2
+ import { getAttrDataTypeDefinition, getHistoryAppearanceByUri, getAttributeValue, createRelatedObjectUris, isOv, getHistoryAttributeClassName, getObjectTypeByAttributeUri, HistoryOperations, historyPalettes } from '@reltio/mdm-sdk';
3
3
  import classnames from 'classnames';
4
4
  import { useMaskedAttribute } from '../hooks/useMaskedAttribute';
5
+ import { useCssVariableStyles } from '../hooks/useCssVariableStyles';
5
6
  import { COMMENTS_CONTAINER_VISIBILITY_AREA } from '../constants/classnames';
6
7
  import { HistoryDiffContext } from '../contexts/HistoryAppearanceContext';
7
8
  import { HighlightedValuesContext } from '../contexts/HighlightedValuesContext';
@@ -9,15 +10,21 @@ import { CommentsContainer } from '../CommentsContainer';
9
10
  import { DataTypeValue } from '../DataTypeValue';
10
11
  import { PivotingTooltip } from '../PivotingTooltip';
11
12
  import { MaskingSwitcher } from '../MaskingSwitcher';
12
- import { useStyles } from './styles';
13
+ import styles from './SimpleAttribute.module.css';
13
14
  export var SimpleAttribute = function (_a) {
14
15
  var _b, _c, _d, _e, _f;
15
- var className = _a.className, _g = _a.attributeType, attributeType = _g === void 0 ? null : _g, rawAttributeValue = _a.attributeValue, inlined = _a.inlined;
16
+ var className = _a.className, _g = _a.attributeType, attributeType = _g === void 0 ? null : _g, rawAttributeValue = _a.attributeValue, inlined = _a.inlined, FallbackSlot = _a.FallbackSlot;
16
17
  var _h = useMaskedAttribute({
17
18
  attributeType: attributeType,
18
19
  attributeValue: rawAttributeValue
19
20
  }), isUnmaskingNeeded = _h.isUnmaskingNeeded, isMasked = _h.isMasked, toggleMasking = _h.toggleMasking, attributeValue = _h.attributeValue, isUnmasking = _h.isUnmasking;
20
- var styles = useStyles();
21
+ var variableStyles = useCssVariableStyles({
22
+ '--history-insert-color': historyPalettes[HistoryOperations.insertAttribute].color,
23
+ '--history-update-backgroundColor': historyPalettes[HistoryOperations.updateAttribute].backgroundColor,
24
+ '--history-update-color': historyPalettes[HistoryOperations.updateAttribute].color,
25
+ '--history-delete-backgroundColor': historyPalettes[HistoryOperations.deleteAttribute].backgroundColor,
26
+ '--history-delete-color': historyPalettes[HistoryOperations.deleteAttribute].color
27
+ });
21
28
  var _j = useContext(HighlightedValuesContext), _k = _j.highlightedValuesUris, highlightedValuesUris = _k === void 0 ? [] : _k, highlightedClassName = _j.highlightedClassName;
22
29
  var appearance = useContext(HistoryDiffContext).appearance;
23
30
  var attributeAppearance = getHistoryAppearanceByUri(attributeValue.uri, appearance);
@@ -25,7 +32,7 @@ export var SimpleAttribute = function (_a) {
25
32
  var dataTypeValue = useMemo(function () { return (React.createElement(DataTypeValue, { value: getAttributeValue(attributeValue), dataTypeDefinition: getAttrDataTypeDefinition(attributeType) })); }, [attributeValue, attributeType]);
26
33
  var objectType = getObjectTypeByAttributeUri(attributeValue.uri);
27
34
  var unmaskingControl = isUnmaskingNeeded && (React.createElement(MaskingSwitcher, { isMasked: isMasked, onToggleMasking: toggleMasking, isUnmasking: isUnmasking }));
28
- return inlined || historyClassName ? (React.createElement("div", { className: classnames(className, (_b = {},
35
+ return inlined || historyClassName ? (React.createElement("div", { style: variableStyles, className: classnames(className, (_b = {},
29
36
  _b[highlightedClassName] = highlightedValuesUris.includes(attributeValue.uri),
30
37
  _b)) },
31
38
  React.createElement(PivotingTooltip, { value: attributeValue, attributeType: attributeType, key: attributeValue.uri, className: classnames((_c = {}, _c[styles.multilineAttribute] = !inlined, _c)) },
@@ -33,13 +40,14 @@ export var SimpleAttribute = function (_a) {
33
40
  _d[styles.ovFalse] = !isOv(attributeValue),
34
41
  _d)), "data-reltio-id": "reltio-attribute-value" },
35
42
  dataTypeValue,
36
- unmaskingControl)))) : (React.createElement("div", { "data-reltio-id": "comments-container-visibility-area", className: classnames(className, styles.root, COMMENTS_CONTAINER_VISIBILITY_AREA, (_e = {},
43
+ unmaskingControl)))) : (React.createElement("div", { "data-reltio-id": "comments-container-visibility-area", style: variableStyles, className: classnames(className, styles.root, COMMENTS_CONTAINER_VISIBILITY_AREA, (_e = {},
37
44
  _e[highlightedClassName] = highlightedValuesUris.includes(attributeValue.uri),
38
45
  _e)) },
39
46
  React.createElement(PivotingTooltip, { value: attributeValue, attributeType: attributeType, key: attributeValue.uri },
40
47
  React.createElement("span", { className: classnames(styles.attributeValue, (_f = {}, _f[styles.ovFalse] = !isOv(attributeValue), _f)), "data-reltio-id": "reltio-attribute-value" },
41
48
  dataTypeValue,
42
- unmaskingControl)),
49
+ unmaskingControl,
50
+ FallbackSlot && React.createElement(FallbackSlot, { ovDetails: attributeValue === null || attributeValue === void 0 ? void 0 : attributeValue.ovDetails }))),
43
51
  React.createElement(CommentsContainer, { className: styles.commentsContainer, uri: attributeValue.uri, relatedObjectUris: createRelatedObjectUris(objectType, {
44
52
  uri: attributeValue.uri
45
53
  }), objectType: objectType })));
@@ -0,0 +1,9 @@
1
+ const styles = {"root":"SimpleAttribute-root--msTML","commentsContainer":"SimpleAttribute-commentsContainer--kT8wH","attributeValue":"SimpleAttribute-attributeValue--5ESxH","updateAttribute":"SimpleAttribute-updateAttribute--HLqXI","insertAttribute":"SimpleAttribute-insertAttribute--3A5Xi","deleteAttribute":"SimpleAttribute-deleteAttribute--ftsz5","multilineAttribute":"SimpleAttribute-multilineAttribute--xY9V-","ovFalse":"SimpleAttribute-ovFalse--n4JcN"};
2
+ if (typeof document !== 'undefined') {
3
+ const head = document.head || document.getElementsByTagName('head')[0]
4
+ const style = document.createElement('style');
5
+ style.type = 'text/css'
6
+ style.innerHTML = `.SimpleAttribute-root--msTML{align-items:start;display:flex;justify-content:space-between}.SimpleAttribute-commentsContainer--kT8wH{height:15px;margin-right:-4px}.SimpleAttribute-attributeValue--5ESxH{vertical-align:middle;white-space:break-spaces;word-break:break-all}.SimpleAttribute-updateAttribute--HLqXI{background-color:var(--history-update-backgroundColor);color:var(--history-update-color);margin-left:-4px;padding:0 4px;width:fit-content}.SimpleAttribute-updateAttribute--HLqXI>a{color:var(--history-update-color)}.SimpleAttribute-insertAttribute--3A5Xi{color:var(--history-insert-color);width:fit-content}.SimpleAttribute-insertAttribute--3A5Xi>a{color:var(--history-insert-color)}.SimpleAttribute-deleteAttribute--ftsz5{background-color:var(--history-delete-backgroundColor);color:var(--history-delete-color);margin-left:-4px;padding:0 4px;text-decoration:line-through;width:fit-content}.SimpleAttribute-deleteAttribute--ftsz5>a{color:var(--history-delete-color)}.SimpleAttribute-multilineAttribute--xY9V-{width:fit-content}.SimpleAttribute-ovFalse--n4JcN{opacity:var(--mui-inactive-opacity)}`;
7
+ head.appendChild(style);
8
+ }
9
+ export default styles;
@@ -34,35 +34,27 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
34
34
  if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
35
35
  }
36
36
  };
37
- var _a, _b;
38
37
  import React, { useCallback, useMemo, useState } from 'react';
39
38
  import { isNil } from 'ramda';
40
39
  import classnames from 'classnames';
41
40
  import { useContextSelector } from '@fluentui/react-context-selector';
42
41
  import CircularProgress from '@mui/material/CircularProgress';
42
+ import Button from '@mui/material/Button';
43
+ import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
43
44
  import i18n from 'ui-i18n';
44
- import VerificationIcon from '../icons/VerifyAllIcon';
45
45
  import { useSafePromise } from '../hooks/useSafePromise';
46
46
  import { InputVerificationAttribute, verifyAttributes, VerifyAttributesClientFilter } from '@reltio/mdm-sdk';
47
47
  import { useMdmEntityUri, useMdmAction } from '../contexts/MdmModuleContext';
48
48
  import { AttributesVerificationContext } from '../contexts/AttributesVerificationContext';
49
49
  import { showDefaultErrorMessage } from '../helpers/errors';
50
- import { useCssVariableStyles } from '../hooks/useCssVariableStyles';
51
- import { SmallIconButtonWithTooltip } from '../SmallIconButton';
50
+ import { withTooltip } from '../HOCs/withTooltip';
52
51
  import styles from './VerificationButton.module.css';
52
+ var ButtonWithTooltip = withTooltip(Button);
53
53
  export var VerificationButtonSize;
54
54
  (function (VerificationButtonSize) {
55
55
  VerificationButtonSize["SMALL"] = "small";
56
56
  VerificationButtonSize["MEDIUM"] = "medium";
57
57
  })(VerificationButtonSize || (VerificationButtonSize = {}));
58
- var ICON_SIZES = (_a = {},
59
- _a[VerificationButtonSize.SMALL] = 16,
60
- _a[VerificationButtonSize.MEDIUM] = 24,
61
- _a);
62
- var BUTTON_SIZES = (_b = {},
63
- _b[VerificationButtonSize.SMALL] = 20,
64
- _b[VerificationButtonSize.MEDIUM] = 36,
65
- _b);
66
58
  var getTooltipTitle = function (verificationTypes) {
67
59
  if (verificationTypes.includes(InputVerificationAttribute.Email) &&
68
60
  verificationTypes.includes(InputVerificationAttribute.Phone)) {
@@ -78,10 +70,6 @@ var getTooltipTitle = function (verificationTypes) {
78
70
  };
79
71
  export var VerificationButton = function (_a) {
80
72
  var attributeType = _a.attributeType, _b = _a.size, size = _b === void 0 ? VerificationButtonSize.SMALL : _b, className = _a.className;
81
- var variableStyles = useCssVariableStyles({
82
- '--icon-size': ICON_SIZES[size] + 'px',
83
- '--button-size': BUTTON_SIZES[size] + 'px'
84
- });
85
73
  var _c = useState(false), loading = _c[0], setLoading = _c[1];
86
74
  var entityUri = useMdmEntityUri();
87
75
  var updateEntityAttributeValues = useMdmAction('updateEntityAttributeValues');
@@ -146,5 +134,9 @@ export var VerificationButton = function (_a) {
146
134
  return allVerificationTypes;
147
135
  }, [verificationType, allVerificationTypes]);
148
136
  var tooltipTitle = getTooltipTitle(currentVerificationTypes);
149
- return (React.createElement("div", { className: classnames(styles.root, className), style: variableStyles }, loading ? (React.createElement(CircularProgress, { size: BUTTON_SIZES[size] })) : (React.createElement(SmallIconButtonWithTooltip, { icon: VerificationIcon, iconClassName: styles.icon, className: styles.iconButton, tooltipTitle: tooltipTitle, onClick: handleClick }))));
137
+ var buttonText = attributeType ? i18n.text('Verify') : i18n.text('Verify contact details');
138
+ var startIcon = loading ? (React.createElement(CircularProgress, { size: size === VerificationButtonSize.SMALL ? 18 : 20 })) : (React.createElement(CheckCircleOutlineIcon, null));
139
+ var tooltipText = tooltipTitle || buttonText;
140
+ return (React.createElement("div", { className: styles.root },
141
+ React.createElement(ButtonWithTooltip, { variant: "text", color: "primary", startIcon: startIcon, onClick: handleClick, disabled: loading, className: classnames(styles.button, className), classes: { startIcon: styles.startIcon }, size: size === VerificationButtonSize.SMALL ? 'small' : 'medium', tooltipTitle: tooltipText, tooltipPlacement: "bottom" }, buttonText)));
150
142
  };
@@ -1,9 +1,9 @@
1
- const styles = {"root":"VerificationButton-root--0piRf","icon":"VerificationButton-icon--hdGgX","iconButton":"VerificationButton-iconButton--OUG-s"};
1
+ const styles = {"root":"VerificationButton-root--0piRf","startIcon":"VerificationButton-startIcon--Txlkd"};
2
2
  if (typeof document !== 'undefined') {
3
3
  const head = document.head || document.getElementsByTagName('head')[0]
4
4
  const style = document.createElement('style');
5
5
  style.type = 'text/css'
6
- style.innerHTML = `.VerificationButton-root--0piRf{display:inline-block;margin-left:2px}.VerificationButton-root--0piRf .VerificationButton-icon--hdGgX{height:var(--icon-size);width:var(--icon-size)}.VerificationButton-root--0piRf .VerificationButton-iconButton--OUG-s{height:var(--button-size);width:var(--button-size)}`;
6
+ style.innerHTML = `.VerificationButton-root--0piRf{display:inline-block;margin-left:4px}.VerificationButton-root--0piRf .VerificationButton-startIcon--Txlkd{margin-right:4px}`;
7
7
  head.appendChild(style);
8
8
  }
9
9
  export default styles;
@@ -1,9 +1,9 @@
1
- const styles = {"status":"AttributeVerificationStatus-status--NwPR6","valid":"AttributeVerificationStatus-valid--PIGHP","invalid":"AttributeVerificationStatus-invalid--B7p6E","outdated":"AttributeVerificationStatus-outdated--l5khN","maybe":"AttributeVerificationStatus-maybe--egCRg","accept_all":"AttributeVerificationStatus-accept_all--jgMx5","icon":"AttributeVerificationStatus-icon--C8xBC"};
1
+ const styles = {"status":"AttributeVerificationStatus-status--NwPR6","icon":"AttributeVerificationStatus-icon--C8xBC"};
2
2
  if (typeof document !== 'undefined') {
3
3
  const head = document.head || document.getElementsByTagName('head')[0]
4
4
  const style = document.createElement('style');
5
5
  style.type = 'text/css'
6
- style.innerHTML = `.AttributeVerificationStatus-status--NwPR6{height:18px;margin-left:4px;position:relative;width:14px}.AttributeVerificationStatus-status--NwPR6:after{border-radius:50%;content:"";height:6px;left:calc(50% - 3px);position:absolute;top:calc(50% - 3px);width:6px}.AttributeVerificationStatus-valid--PIGHP:after{background-color:rgba(33,150,83,.5)}.AttributeVerificationStatus-invalid--B7p6E:after{background-color:rgba(235,87,87,.5)}.AttributeVerificationStatus-accept_all--jgMx5:after,.AttributeVerificationStatus-maybe--egCRg:after,.AttributeVerificationStatus-outdated--l5khN:after{background-color:rgba(242,201,76,.5)}.AttributeVerificationStatus-icon--C8xBC{background-color:#fff;left:0;opacity:var(--verify-status-opacity);position:absolute;top:2px;z-index:1}.AttributeVerificationStatus-icon--C8xBC:hover{background-color:#fff}`;
6
+ style.innerHTML = `.AttributeVerificationStatus-status--NwPR6{height:18px;margin-left:4px;position:relative;width:14px}.AttributeVerificationStatus-icon--C8xBC{left:0;position:absolute;top:2px}`;
7
7
  head.appendChild(style);
8
8
  }
9
9
  module.exports = styles;
@@ -1,9 +1,13 @@
1
1
  import React from 'react';
2
- import { AttributeType, AttributeValue } from '@reltio/mdm-sdk';
2
+ import { AttributeType, AttributeValue, OvDetails } from '@reltio/mdm-sdk';
3
3
  type SlotParams<T> = {
4
4
  attributeType?: AttributeType;
5
5
  attributeValue: T;
6
6
  };
7
+ type WrapperParams = {
8
+ uri: string;
9
+ children: React.ReactNode;
10
+ };
7
11
  type Props = {
8
12
  values: AttributeValue[];
9
13
  attributeType: AttributeType;
@@ -11,7 +15,11 @@ type Props = {
11
15
  valueContainerClassName?: string;
12
16
  LabelRenderer?: ({ attributeType, attributeValue }: SlotParams<AttributeValue>) => React.ReactElement;
13
17
  RightSlot?: ({ attributeType, attributeValue }: SlotParams<AttributeValue>) => React.ReactElement;
18
+ FallbackSlot?: ({ ovDetails }: {
19
+ ovDetails: OvDetails;
20
+ }) => React.ReactElement;
14
21
  showNonOv?: boolean;
22
+ AttributeValueWrapper?: ({ uri, children }: WrapperParams) => React.ReactElement;
15
23
  };
16
24
  declare const _default: React.MemoExoticComponent<({ expanded, LabelRenderer, RightSlot, ...props }: Props) => React.JSX.Element>;
17
25
  export default _default;
@@ -52,11 +52,11 @@ var ReadOnlyImageAttributesLine_1 = require("../ReadOnlyImageAttributesLine");
52
52
  var LazyRenderer_1 = require("../LazyRenderer");
53
53
  var lazyRendererStyle = { height: '18px' };
54
54
  var renderAttributesList = function (_a) {
55
- var values = _a.values, valueContainerClassName = _a.valueContainerClassName, props = __rest(_a, ["values", "valueContainerClassName"]);
55
+ var values = _a.values, valueContainerClassName = _a.valueContainerClassName, AttributeValueWrapper = _a.AttributeValueWrapper, props = __rest(_a, ["values", "valueContainerClassName", "AttributeValueWrapper"]);
56
56
  var enabledLazyRendering = (values === null || values === void 0 ? void 0 : values.length) > 20;
57
57
  return (react_1.default.createElement(react_1.default.Fragment, null, (values || []).map(function (attributeValue) { return (react_1.default.createElement(LazyRenderer_1.LazyRenderer, { key: attributeValue.uri, className: valueContainerClassName, enabled: enabledLazyRendering, style: lazyRendererStyle },
58
- react_1.default.createElement("div", { className: valueContainerClassName },
59
- react_1.default.createElement(ReadOnlyAttributesFactory_1.ReadOnlyAttribute, __assign({ attributeValue: attributeValue }, props))))); })));
58
+ react_1.default.createElement("div", { className: valueContainerClassName }, AttributeValueWrapper ? (react_1.default.createElement(AttributeValueWrapper, { uri: attributeValue.uri },
59
+ react_1.default.createElement(ReadOnlyAttributesFactory_1.ReadOnlyAttribute, __assign({ attributeValue: attributeValue }, props)))) : (react_1.default.createElement(ReadOnlyAttributesFactory_1.ReadOnlyAttribute, __assign({ attributeValue: attributeValue }, props)))))); })));
60
60
  };
61
61
  var ReadOnlyAttributeValuesBlock = function (_a) {
62
62
  var expanded = _a.expanded, LabelRenderer = _a.LabelRenderer, RightSlot = _a.RightSlot, props = __rest(_a, ["expanded", "LabelRenderer", "RightSlot"]);
@@ -3,7 +3,7 @@ if (typeof document !== 'undefined') {
3
3
  const head = document.head || document.getElementsByTagName('head')[0]
4
4
  const style = document.createElement('style');
5
5
  style.type = 'text/css'
6
- style.innerHTML = `.ReadOnlyComplexAttribute-complexContainer--DybRT{margin-top:1px}.ReadOnlyComplexAttribute-labelContainer--x4Ikp{display:flex;min-height:18px;--verify-status-opacity:0}.ReadOnlyComplexAttribute-labelContainer--x4Ikp:hover{--verify-status-opacity:1}.ReadOnlyComplexAttribute-label--BqM8F{display:inline-flex;font-size:13px;letter-spacing:normal;line-height:16px;margin-left:2px;white-space:break-spaces}.ReadOnlyComplexAttribute-spacer--raB-d{flex:1}.ReadOnlyComplexAttribute-ovFalse--9sySx{opacity:var(--mui-inactive-opacity)}`;
6
+ style.innerHTML = `.ReadOnlyComplexAttribute-complexContainer--DybRT{margin-top:1px}.ReadOnlyComplexAttribute-labelContainer--x4Ikp{display:flex;min-height:18px}.ReadOnlyComplexAttribute-label--BqM8F{display:inline-flex;font-size:13px;letter-spacing:normal;line-height:16px;margin-left:2px;white-space:break-spaces}.ReadOnlyComplexAttribute-spacer--raB-d{flex:1}.ReadOnlyComplexAttribute-ovFalse--9sySx{opacity:var(--mui-inactive-opacity)}`;
7
7
  head.appendChild(style);
8
8
  }
9
9
  module.exports = styles;
@@ -1,10 +1,13 @@
1
1
  import React from 'react';
2
- import { AttributeType, SimpleAttributeValue } from '@reltio/mdm-sdk';
2
+ import { AttributeType, SimpleAttributeValue, OvDetails } from '@reltio/mdm-sdk';
3
3
  type Props = {
4
4
  className?: string;
5
5
  attributeValue: SimpleAttributeValue;
6
6
  attributeType: AttributeType;
7
7
  inlined?: boolean;
8
+ FallbackSlot?: ({ ovDetails }: {
9
+ ovDetails: OvDetails;
10
+ }) => React.ReactElement;
8
11
  };
9
- export declare const SimpleAttribute: ({ className, attributeType, attributeValue: rawAttributeValue, inlined }: Props) => React.JSX.Element;
12
+ export declare const SimpleAttribute: ({ className, attributeType, attributeValue: rawAttributeValue, inlined, FallbackSlot }: Props) => React.JSX.Element;
10
13
  export {};
@@ -31,6 +31,7 @@ var react_1 = __importStar(require("react"));
31
31
  var mdm_sdk_1 = require("@reltio/mdm-sdk");
32
32
  var classnames_1 = __importDefault(require("classnames"));
33
33
  var useMaskedAttribute_1 = require("../hooks/useMaskedAttribute");
34
+ var useCssVariableStyles_1 = require("../hooks/useCssVariableStyles");
34
35
  var classnames_2 = require("../constants/classnames");
35
36
  var HistoryAppearanceContext_1 = require("../contexts/HistoryAppearanceContext");
36
37
  var HighlightedValuesContext_1 = require("../contexts/HighlightedValuesContext");
@@ -38,15 +39,21 @@ var CommentsContainer_1 = require("../CommentsContainer");
38
39
  var DataTypeValue_1 = require("../DataTypeValue");
39
40
  var PivotingTooltip_1 = require("../PivotingTooltip");
40
41
  var MaskingSwitcher_1 = require("../MaskingSwitcher");
41
- var styles_1 = require("./styles");
42
+ var SimpleAttribute_module_css_1 = __importDefault(require("./SimpleAttribute.module.css"));
42
43
  var SimpleAttribute = function (_a) {
43
44
  var _b, _c, _d, _e, _f;
44
- var className = _a.className, _g = _a.attributeType, attributeType = _g === void 0 ? null : _g, rawAttributeValue = _a.attributeValue, inlined = _a.inlined;
45
+ var className = _a.className, _g = _a.attributeType, attributeType = _g === void 0 ? null : _g, rawAttributeValue = _a.attributeValue, inlined = _a.inlined, FallbackSlot = _a.FallbackSlot;
45
46
  var _h = (0, useMaskedAttribute_1.useMaskedAttribute)({
46
47
  attributeType: attributeType,
47
48
  attributeValue: rawAttributeValue
48
49
  }), isUnmaskingNeeded = _h.isUnmaskingNeeded, isMasked = _h.isMasked, toggleMasking = _h.toggleMasking, attributeValue = _h.attributeValue, isUnmasking = _h.isUnmasking;
49
- var styles = (0, styles_1.useStyles)();
50
+ var variableStyles = (0, useCssVariableStyles_1.useCssVariableStyles)({
51
+ '--history-insert-color': mdm_sdk_1.historyPalettes[mdm_sdk_1.HistoryOperations.insertAttribute].color,
52
+ '--history-update-backgroundColor': mdm_sdk_1.historyPalettes[mdm_sdk_1.HistoryOperations.updateAttribute].backgroundColor,
53
+ '--history-update-color': mdm_sdk_1.historyPalettes[mdm_sdk_1.HistoryOperations.updateAttribute].color,
54
+ '--history-delete-backgroundColor': mdm_sdk_1.historyPalettes[mdm_sdk_1.HistoryOperations.deleteAttribute].backgroundColor,
55
+ '--history-delete-color': mdm_sdk_1.historyPalettes[mdm_sdk_1.HistoryOperations.deleteAttribute].color
56
+ });
50
57
  var _j = (0, react_1.useContext)(HighlightedValuesContext_1.HighlightedValuesContext), _k = _j.highlightedValuesUris, highlightedValuesUris = _k === void 0 ? [] : _k, highlightedClassName = _j.highlightedClassName;
51
58
  var appearance = (0, react_1.useContext)(HistoryAppearanceContext_1.HistoryDiffContext).appearance;
52
59
  var attributeAppearance = (0, mdm_sdk_1.getHistoryAppearanceByUri)(attributeValue.uri, appearance);
@@ -54,22 +61,23 @@ var SimpleAttribute = function (_a) {
54
61
  var dataTypeValue = (0, react_1.useMemo)(function () { return (react_1.default.createElement(DataTypeValue_1.DataTypeValue, { value: (0, mdm_sdk_1.getAttributeValue)(attributeValue), dataTypeDefinition: (0, mdm_sdk_1.getAttrDataTypeDefinition)(attributeType) })); }, [attributeValue, attributeType]);
55
62
  var objectType = (0, mdm_sdk_1.getObjectTypeByAttributeUri)(attributeValue.uri);
56
63
  var unmaskingControl = isUnmaskingNeeded && (react_1.default.createElement(MaskingSwitcher_1.MaskingSwitcher, { isMasked: isMasked, onToggleMasking: toggleMasking, isUnmasking: isUnmasking }));
57
- return inlined || historyClassName ? (react_1.default.createElement("div", { className: (0, classnames_1.default)(className, (_b = {},
64
+ return inlined || historyClassName ? (react_1.default.createElement("div", { style: variableStyles, className: (0, classnames_1.default)(className, (_b = {},
58
65
  _b[highlightedClassName] = highlightedValuesUris.includes(attributeValue.uri),
59
66
  _b)) },
60
- react_1.default.createElement(PivotingTooltip_1.PivotingTooltip, { value: attributeValue, attributeType: attributeType, key: attributeValue.uri, className: (0, classnames_1.default)((_c = {}, _c[styles.multilineAttribute] = !inlined, _c)) },
61
- react_1.default.createElement("span", { className: (0, classnames_1.default)(styles.attributeValue, styles[historyClassName], (_d = {},
62
- _d[styles.ovFalse] = !(0, mdm_sdk_1.isOv)(attributeValue),
67
+ react_1.default.createElement(PivotingTooltip_1.PivotingTooltip, { value: attributeValue, attributeType: attributeType, key: attributeValue.uri, className: (0, classnames_1.default)((_c = {}, _c[SimpleAttribute_module_css_1.default.multilineAttribute] = !inlined, _c)) },
68
+ react_1.default.createElement("span", { className: (0, classnames_1.default)(SimpleAttribute_module_css_1.default.attributeValue, SimpleAttribute_module_css_1.default[historyClassName], (_d = {},
69
+ _d[SimpleAttribute_module_css_1.default.ovFalse] = !(0, mdm_sdk_1.isOv)(attributeValue),
63
70
  _d)), "data-reltio-id": "reltio-attribute-value" },
64
71
  dataTypeValue,
65
- unmaskingControl)))) : (react_1.default.createElement("div", { "data-reltio-id": "comments-container-visibility-area", className: (0, classnames_1.default)(className, styles.root, classnames_2.COMMENTS_CONTAINER_VISIBILITY_AREA, (_e = {},
72
+ unmaskingControl)))) : (react_1.default.createElement("div", { "data-reltio-id": "comments-container-visibility-area", style: variableStyles, className: (0, classnames_1.default)(className, SimpleAttribute_module_css_1.default.root, classnames_2.COMMENTS_CONTAINER_VISIBILITY_AREA, (_e = {},
66
73
  _e[highlightedClassName] = highlightedValuesUris.includes(attributeValue.uri),
67
74
  _e)) },
68
75
  react_1.default.createElement(PivotingTooltip_1.PivotingTooltip, { value: attributeValue, attributeType: attributeType, key: attributeValue.uri },
69
- react_1.default.createElement("span", { className: (0, classnames_1.default)(styles.attributeValue, (_f = {}, _f[styles.ovFalse] = !(0, mdm_sdk_1.isOv)(attributeValue), _f)), "data-reltio-id": "reltio-attribute-value" },
76
+ react_1.default.createElement("span", { className: (0, classnames_1.default)(SimpleAttribute_module_css_1.default.attributeValue, (_f = {}, _f[SimpleAttribute_module_css_1.default.ovFalse] = !(0, mdm_sdk_1.isOv)(attributeValue), _f)), "data-reltio-id": "reltio-attribute-value" },
70
77
  dataTypeValue,
71
- unmaskingControl)),
72
- react_1.default.createElement(CommentsContainer_1.CommentsContainer, { className: styles.commentsContainer, uri: attributeValue.uri, relatedObjectUris: (0, mdm_sdk_1.createRelatedObjectUris)(objectType, {
78
+ unmaskingControl,
79
+ FallbackSlot && react_1.default.createElement(FallbackSlot, { ovDetails: attributeValue === null || attributeValue === void 0 ? void 0 : attributeValue.ovDetails }))),
80
+ react_1.default.createElement(CommentsContainer_1.CommentsContainer, { className: SimpleAttribute_module_css_1.default.commentsContainer, uri: attributeValue.uri, relatedObjectUris: (0, mdm_sdk_1.createRelatedObjectUris)(objectType, {
73
81
  uri: attributeValue.uri
74
82
  }), objectType: objectType })));
75
83
  };
@@ -0,0 +1,9 @@
1
+ const styles = {"root":"SimpleAttribute-root--msTML","commentsContainer":"SimpleAttribute-commentsContainer--kT8wH","attributeValue":"SimpleAttribute-attributeValue--5ESxH","updateAttribute":"SimpleAttribute-updateAttribute--HLqXI","insertAttribute":"SimpleAttribute-insertAttribute--3A5Xi","deleteAttribute":"SimpleAttribute-deleteAttribute--ftsz5","multilineAttribute":"SimpleAttribute-multilineAttribute--xY9V-","ovFalse":"SimpleAttribute-ovFalse--n4JcN"};
2
+ if (typeof document !== 'undefined') {
3
+ const head = document.head || document.getElementsByTagName('head')[0]
4
+ const style = document.createElement('style');
5
+ style.type = 'text/css'
6
+ style.innerHTML = `.SimpleAttribute-root--msTML{align-items:start;display:flex;justify-content:space-between}.SimpleAttribute-commentsContainer--kT8wH{height:15px;margin-right:-4px}.SimpleAttribute-attributeValue--5ESxH{vertical-align:middle;white-space:break-spaces;word-break:break-all}.SimpleAttribute-updateAttribute--HLqXI{background-color:var(--history-update-backgroundColor);color:var(--history-update-color);margin-left:-4px;padding:0 4px;width:fit-content}.SimpleAttribute-updateAttribute--HLqXI>a{color:var(--history-update-color)}.SimpleAttribute-insertAttribute--3A5Xi{color:var(--history-insert-color);width:fit-content}.SimpleAttribute-insertAttribute--3A5Xi>a{color:var(--history-insert-color)}.SimpleAttribute-deleteAttribute--ftsz5{background-color:var(--history-delete-backgroundColor);color:var(--history-delete-color);margin-left:-4px;padding:0 4px;text-decoration:line-through;width:fit-content}.SimpleAttribute-deleteAttribute--ftsz5>a{color:var(--history-delete-color)}.SimpleAttribute-multilineAttribute--xY9V-{width:fit-content}.SimpleAttribute-ovFalse--n4JcN{opacity:var(--mui-inactive-opacity)}`;
7
+ head.appendChild(style);
8
+ }
9
+ module.exports = styles;
@@ -61,7 +61,6 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
61
61
  var __importDefault = (this && this.__importDefault) || function (mod) {
62
62
  return (mod && mod.__esModule) ? mod : { "default": mod };
63
63
  };
64
- var _a, _b;
65
64
  Object.defineProperty(exports, "__esModule", { value: true });
66
65
  exports.VerificationButton = exports.VerificationButtonSize = void 0;
67
66
  var react_1 = __importStar(require("react"));
@@ -69,29 +68,22 @@ var ramda_1 = require("ramda");
69
68
  var classnames_1 = __importDefault(require("classnames"));
70
69
  var react_context_selector_1 = require("@fluentui/react-context-selector");
71
70
  var CircularProgress_1 = __importDefault(require("@mui/material/CircularProgress"));
71
+ var Button_1 = __importDefault(require("@mui/material/Button"));
72
+ var CheckCircleOutline_1 = __importDefault(require("@mui/icons-material/CheckCircleOutline"));
72
73
  var ui_i18n_1 = __importDefault(require("ui-i18n"));
73
- var VerifyAllIcon_1 = __importDefault(require("../icons/VerifyAllIcon"));
74
74
  var useSafePromise_1 = require("../hooks/useSafePromise");
75
75
  var mdm_sdk_1 = require("@reltio/mdm-sdk");
76
76
  var MdmModuleContext_1 = require("../contexts/MdmModuleContext");
77
77
  var AttributesVerificationContext_1 = require("../contexts/AttributesVerificationContext");
78
78
  var errors_1 = require("../helpers/errors");
79
- var useCssVariableStyles_1 = require("../hooks/useCssVariableStyles");
80
- var SmallIconButton_1 = require("../SmallIconButton");
79
+ var withTooltip_1 = require("../HOCs/withTooltip");
81
80
  var VerificationButton_module_css_1 = __importDefault(require("./VerificationButton.module.css"));
81
+ var ButtonWithTooltip = (0, withTooltip_1.withTooltip)(Button_1.default);
82
82
  var VerificationButtonSize;
83
83
  (function (VerificationButtonSize) {
84
84
  VerificationButtonSize["SMALL"] = "small";
85
85
  VerificationButtonSize["MEDIUM"] = "medium";
86
86
  })(VerificationButtonSize || (exports.VerificationButtonSize = VerificationButtonSize = {}));
87
- var ICON_SIZES = (_a = {},
88
- _a[VerificationButtonSize.SMALL] = 16,
89
- _a[VerificationButtonSize.MEDIUM] = 24,
90
- _a);
91
- var BUTTON_SIZES = (_b = {},
92
- _b[VerificationButtonSize.SMALL] = 20,
93
- _b[VerificationButtonSize.MEDIUM] = 36,
94
- _b);
95
87
  var getTooltipTitle = function (verificationTypes) {
96
88
  if (verificationTypes.includes(mdm_sdk_1.InputVerificationAttribute.Email) &&
97
89
  verificationTypes.includes(mdm_sdk_1.InputVerificationAttribute.Phone)) {
@@ -107,10 +99,6 @@ var getTooltipTitle = function (verificationTypes) {
107
99
  };
108
100
  var VerificationButton = function (_a) {
109
101
  var attributeType = _a.attributeType, _b = _a.size, size = _b === void 0 ? VerificationButtonSize.SMALL : _b, className = _a.className;
110
- var variableStyles = (0, useCssVariableStyles_1.useCssVariableStyles)({
111
- '--icon-size': ICON_SIZES[size] + 'px',
112
- '--button-size': BUTTON_SIZES[size] + 'px'
113
- });
114
102
  var _c = (0, react_1.useState)(false), loading = _c[0], setLoading = _c[1];
115
103
  var entityUri = (0, MdmModuleContext_1.useMdmEntityUri)();
116
104
  var updateEntityAttributeValues = (0, MdmModuleContext_1.useMdmAction)('updateEntityAttributeValues');
@@ -175,6 +163,10 @@ var VerificationButton = function (_a) {
175
163
  return allVerificationTypes;
176
164
  }, [verificationType, allVerificationTypes]);
177
165
  var tooltipTitle = getTooltipTitle(currentVerificationTypes);
178
- return (react_1.default.createElement("div", { className: (0, classnames_1.default)(VerificationButton_module_css_1.default.root, className), style: variableStyles }, loading ? (react_1.default.createElement(CircularProgress_1.default, { size: BUTTON_SIZES[size] })) : (react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { icon: VerifyAllIcon_1.default, iconClassName: VerificationButton_module_css_1.default.icon, className: VerificationButton_module_css_1.default.iconButton, tooltipTitle: tooltipTitle, onClick: handleClick }))));
166
+ var buttonText = attributeType ? ui_i18n_1.default.text('Verify') : ui_i18n_1.default.text('Verify contact details');
167
+ var startIcon = loading ? (react_1.default.createElement(CircularProgress_1.default, { size: size === VerificationButtonSize.SMALL ? 18 : 20 })) : (react_1.default.createElement(CheckCircleOutline_1.default, null));
168
+ var tooltipText = tooltipTitle || buttonText;
169
+ return (react_1.default.createElement("div", { className: VerificationButton_module_css_1.default.root },
170
+ react_1.default.createElement(ButtonWithTooltip, { variant: "text", color: "primary", startIcon: startIcon, onClick: handleClick, disabled: loading, className: (0, classnames_1.default)(VerificationButton_module_css_1.default.button, className), classes: { startIcon: VerificationButton_module_css_1.default.startIcon }, size: size === VerificationButtonSize.SMALL ? 'small' : 'medium', tooltipTitle: tooltipText, tooltipPlacement: "bottom" }, buttonText)));
179
171
  };
180
172
  exports.VerificationButton = VerificationButton;
@@ -1,9 +1,9 @@
1
- const styles = {"root":"VerificationButton-root--0piRf","icon":"VerificationButton-icon--hdGgX","iconButton":"VerificationButton-iconButton--OUG-s"};
1
+ const styles = {"root":"VerificationButton-root--0piRf","startIcon":"VerificationButton-startIcon--Txlkd"};
2
2
  if (typeof document !== 'undefined') {
3
3
  const head = document.head || document.getElementsByTagName('head')[0]
4
4
  const style = document.createElement('style');
5
5
  style.type = 'text/css'
6
- style.innerHTML = `.VerificationButton-root--0piRf{display:inline-block;margin-left:2px}.VerificationButton-root--0piRf .VerificationButton-icon--hdGgX{height:var(--icon-size);width:var(--icon-size)}.VerificationButton-root--0piRf .VerificationButton-iconButton--OUG-s{height:var(--button-size);width:var(--button-size)}`;
6
+ style.innerHTML = `.VerificationButton-root--0piRf{display:inline-block;margin-left:4px}.VerificationButton-root--0piRf .VerificationButton-startIcon--Txlkd{margin-right:4px}`;
7
7
  head.appendChild(style);
8
8
  }
9
9
  module.exports = styles;
@@ -53,6 +53,7 @@ var helpers_1 = require("./helpers");
53
53
  var ConfirmEditIgnoredDialog_1 = require("./components/ConfirmEditIgnoredDialog");
54
54
  var CommonRowCellRenderer_1 = require("./components/CommonRowCellRenderer");
55
55
  var LazyRenderer_1 = require("../../../LazyRenderer");
56
+ var SyncedValueHeightsContext_1 = require("../contexts/SyncedValueHeightsContext");
56
57
  var styles_1 = require("./styles");
57
58
  var DEFAULT_ROW_HEIGHT = 68;
58
59
  var getIdFromRowValue = function (rowValue) { return rowValue.ovValues.attributeType.uri; };
@@ -147,7 +148,8 @@ var AttributesTable = function (_a) {
147
148
  react_1.default.createElement(ColumnsSettings_1.ColumnsSettings, { columnsData: helpers_1.COLUMNS_DATA, selectedColumns: visibleColumns, onChangeColumns: onChangeVisibleColumns })),
148
149
  react_1.default.createElement("div", { className: styles.tableContent },
149
150
  isLoading && react_1.default.createElement(LinearLoadIndicator_1.LinearLoadIndicator, null),
150
- react_1.default.createElement(BasicTable_1.BasicTable, { ref: tableRef, fixFirstColumn: true, headRowHeight: 48, defaultColumnWidth: 250, defaultColumnMinWidth: 200, columnsData: visibleColumnsData, dndRowReorderingEnabled: false, dndRowReorderingHandler: handleReorderAttributeTypes, getIdFromRowValue: getIdFromRowValue, rowsData: rowsData, onScroll: debouncedNotifyLazyRenderer, renderRowCell: renderRowCell, getRowCellHeight: getRowCellHeight, context: tableContext })),
151
+ react_1.default.createElement(SyncedValueHeightsContext_1.SyncedValueHeightsProvider, null,
152
+ react_1.default.createElement(BasicTable_1.BasicTable, { ref: tableRef, fixFirstColumn: true, headRowHeight: 48, defaultColumnWidth: 250, defaultColumnMinWidth: 200, columnsData: visibleColumnsData, dndRowReorderingEnabled: false, dndRowReorderingHandler: handleReorderAttributeTypes, getIdFromRowValue: getIdFromRowValue, rowsData: rowsData, onScroll: debouncedNotifyLazyRenderer, renderRowCell: renderRowCell, getRowCellHeight: getRowCellHeight, context: tableContext }))),
151
153
  react_1.default.createElement(ConfirmDeleteDialog_1.ConfirmDeleteDialog, { open: !!pendingDeletion, onClose: function () { return setPendingDeletion(null); }, onConfirm: handleDelete }),
152
154
  react_1.default.createElement(ConfirmEditIgnoredDialog_1.ConfirmEditIgnoredDialog, { open: !!pendingIgnoredEditing, onClose: function () { return setPendingIgnoredEditing(null); }, onConfirmEditWithIgnore: function () { return pendingIgnoredEditing && onEdit(pendingIgnoredEditing); }, onConfirmEditWithoutIgnore: function () {
153
155
  if (pendingIgnoredEditing)
@@ -1,5 +1,8 @@
1
1
  import { Entity, Metadata } from '@reltio/mdm-sdk';
2
- export declare const createEntity: () => Entity;
2
+ export declare const createEntity: ({ withAppliedSurvivorshipRules }?: {
3
+ withAppliedSurvivorshipRules?: boolean;
4
+ }) => Entity;
5
+ export declare const createEntityWithoutAppliedRule: () => Entity;
3
6
  export declare const createMetadata: () => Metadata;
4
7
  export declare const selectedAttributeTypes: ({
5
8
  description: string;