@leav/ui 0.2.8 → 0.3.0

package/dist/components/RecordEdition/EditRecord/uiElements/StandardField/StandardFieldValue/StandardFieldValue.js

@@ -1,14 +1,14 @@
-import {jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs} from 'react/jsx-runtime';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright LEAV Solutions 2017
 // This file is released under LGPL V3
 // License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import {CloseOutlined, ExclamationCircleOutlined} from '@ant-design/icons';
-import {Button, Form, Input, Popover, Space, theme} from 'antd';
+import { CloseOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
+import { Button, Form, Input, Popover, Space, theme } from 'antd';
 import moment from 'moment';
-import React, {useEffect, useRef} from 'react';
+import React, { useEffect, useRef } from 'react';
 import styled from 'styled-components';
-import {themeVars} from '../../../../../../antdTheme';
-import {FloatingMenu} from '../../../../../../components';
+import { themeVars } from '../../../../../../antdTheme';
+import { FloatingMenu } from '../../../../../../components';
 import Dimmer from '../../../../../../components/Dimmer';
 import DeleteValueBtn from '../../../../../../components/RecordEdition/EditRecord/shared/DeleteValueBtn';
 import InheritedFieldLabel from '../../../../../../components/RecordEdition/EditRecord/shared/InheritedFieldLabel';
@@ -16,17 +16,13 @@ import UpdatedFieldIcon from '../../../../../../components/RecordEdition/EditRec
 import ValueDetailsBtn from '../../../../../../components/RecordEdition/EditRecord/shared/ValueDetailsBtn';
 import ValuesVersionBtn from '../../../../../../components/RecordEdition/EditRecord/shared/ValuesVersionBtn';
 import ValuesVersionIndicator from '../../../../../../components/RecordEdition/EditRecord/shared/ValuesVersionIndicator';
-import {FieldScope} from '../../../../../../components/RecordEdition/EditRecord/_types';
-import {EditRecordReducerActionsTypes} from '../../../../../../components/RecordEdition/editRecordModalReducer/editRecordModalReducer';
-import {useEditRecordModalReducer} from '../../../../../../components/RecordEdition/editRecordModalReducer/useEditRecordModalReducer';
-import {useSharedTranslation} from '../../../../../../hooks/useSharedTranslation';
-import {AttributeFormat} from '../../../../../../_gqlTypes';
-import {stringifyDateRangeValue} from '../../../../../../_utils';
-import {
-    newValueId,
-    StandardFieldReducerActionsTypes,
-    StandardFieldValueState
-} from '../../../reducers/standardFieldReducer/standardFieldReducer';
+import { FieldScope } from '../../../../../../components/RecordEdition/EditRecord/_types';
+import { EditRecordReducerActionsTypes } from '../../../../../../components/RecordEdition/editRecordModalReducer/editRecordModalReducer';
+import { useEditRecordModalReducer } from '../../../../../../components/RecordEdition/editRecordModalReducer/useEditRecordModalReducer';
+import { useSharedTranslation } from '../../../../../../hooks/useSharedTranslation';
+import { AttributeFormat } from '../../../../../../_gqlTypes';
+import { stringifyDateRangeValue } from '../../../../../../_utils';
+import { newValueId, StandardFieldReducerActionsTypes, StandardFieldValueState } from '../../../reducers/standardFieldReducer/standardFieldReducer';
 import CheckboxInput from './Inputs/CheckboxInput';
 import ColorInput from './Inputs/ColorInput';
 import DateInput from './Inputs/DateInput';
@@ -35,15 +31,15 @@ import EncryptedInput from './Inputs/EncryptedInput';
 import NumberInput from './Inputs/NumberInput';
 import TextInput from './Inputs/TextInput';
 import ValuesList from './ValuesList';
-const ErrorMessage = styled.div`
+const ErrorMessage = styled.div `
     color: ${themeVars.errorColor};
     font-weight: bold;
 `;
-const FormWrapper = styled.div`
+const FormWrapper = styled.div `
     position: relative;
     z-index: ${p => (p.$isEditing ? 2 : 0)};
 `;
-const InputWrapper = styled.div`
+const InputWrapper = styled.div `
     position: relative;
 
     && input {
@@ -136,13 +132,13 @@ const InputWrapper = styled.div`
         transform: translateY(-50%);
     }
 `;
-const ActionsWrapper = styled.div`
+const ActionsWrapper = styled.div `
     position: absolute;
     display: flex;
     width: 100%;
     flex-direction: column;
 `;
-const ButtonsWrapper = styled.div`
+const ButtonsWrapper = styled.div `
     display: flex;
     margin: 0.5em 0;
     justify-content: flex-end;
@@ -151,7 +147,7 @@ const ButtonsWrapper = styled.div`
         margin-left: 0.5em;
     }
 `;
-const FormItem = styled(Form.Item)`
+const FormItem = styled(Form.Item) `
     && {
         margin: 0;
     }
@@ -168,30 +164,21 @@ const inputComponentByFormat = {
     [AttributeFormat.color]: ColorInput,
     [AttributeFormat.rich_text]: RichTextEditorInput
 };
-function StandardFieldValue({value: fieldValue, onSubmit, onDelete, onScopeChange, state, dispatch}) {
+function StandardFieldValue({ value: fieldValue, onSubmit, onDelete, onScopeChange, state, dispatch }) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    const {t, i18n} = useSharedTranslation();
-    const {token} = theme.useToken();
+    const { t, i18n } = useSharedTranslation();
+    const { token } = theme.useToken();
     const actionsWrapperRef = useRef();
     const inputRef = useRef();
-    const {state: editRecordState, dispatch: editRecordDispatch} = useEditRecordModalReducer();
+    const { state: editRecordState, dispatch: editRecordDispatch } = useEditRecordModalReducer();
     const attribute = state.formElement.attribute;
-    const isValuesListEnabled = !!((_a =
-        attribute === null || attribute === void 0 ? void 0 : attribute.values_list) === null || _a === void 0
-        ? void 0
-        : _a.enable);
-    const isValuesListOpen = !!((_b = attribute === null || attribute === void 0 ? void 0 : attribute.values_list) ===
-        null || _b === void 0
-        ? void 0
-        : _b.allowFreeEntry);
+    const isValuesListEnabled = !!((_a = attribute === null || attribute === void 0 ? void 0 : attribute.values_list) === null || _a === void 0 ? void 0 : _a.enable);
+    const isValuesListOpen = !!((_b = attribute === null || attribute === void 0 ? void 0 : attribute.values_list) === null || _b === void 0 ? void 0 : _b.allowFreeEntry);
     // Scroll to input when editing field
     useEffect(() => {
         var _a;
         if (fieldValue.isEditing) {
-            (_a = actionsWrapperRef === null || actionsWrapperRef === void 0 ? void 0 : actionsWrapperRef.current) ===
-                null || _a === void 0
-                ? void 0
-                : _a.scrollIntoView({block: 'nearest'});
+            (_a = actionsWrapperRef === null || actionsWrapperRef === void 0 ? void 0 : actionsWrapperRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'nearest' });
         }
     }, [fieldValue.isEditing]);
     // Cancel value editing if value details panel is closed
@@ -211,7 +198,7 @@ function StandardFieldValue({value: fieldValue, onSubmit, onDelete, onScopeChang
             });
         }
     }, [fieldValue.isEditing, fieldValue.editingValue]);
-    const _handleSubmit = async valueToSave => {
+    const _handleSubmit = async (valueToSave) => {
         if (valueToSave === '') {
             return _handleDelete();
         }
@@ -245,23 +232,22 @@ function StandardFieldValue({value: fieldValue, onSubmit, onDelete, onScopeChang
         if (!state.metadataEdit) {
             editRecordDispatch({
                 type: EditRecordReducerActionsTypes.SET_ACTIVE_VALUE,
-                value: {value: fieldValue.value, editingValue: fieldValue.editingValue, attribute}
+                value: { value: fieldValue.value, editingValue: fieldValue.editingValue, attribute }
             });
         }
     };
-    const _handleValueChange = value => {
+    const _handleValueChange = (value) => {
         dispatch({
             type: StandardFieldReducerActionsTypes.CHANGE_VALUE,
             idValue: fieldValue.idValue,
             value
         });
     };
-    const _handleCloseError = () =>
-        dispatch({
-            type: StandardFieldReducerActionsTypes.SET_ERROR_DISPLAY,
-            displayError: false,
-            idValue: fieldValue.idValue
-        });
+    const _handleCloseError = () => dispatch({
+        type: StandardFieldReducerActionsTypes.SET_ERROR_DISPLAY,
+        displayError: false,
+        idValue: fieldValue.idValue
+    });
     const _handleCancel = () => {
         dispatch({
             type: StandardFieldReducerActionsTypes.CANCEL_EDITING,
@@ -277,42 +263,29 @@ function StandardFieldValue({value: fieldValue, onSubmit, onDelete, onScopeChang
     const _handleClickSubmit = () => {
         _handleSubmit(fieldValue.editingValue);
     };
-    const _handleValueCopy = value => {
+    const _handleValueCopy = (value) => {
         var _a;
-        (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0
-            ? void 0
-            : _a.focus();
+        (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         _handleValueChange(value);
     };
     const _getInput = () => {
         let inputStyle = {};
-        if (
-            !fieldValue.isEditing &&
+        if (!fieldValue.isEditing &&
             attribute.format !== AttributeFormat.boolean &&
-            attribute.format !== AttributeFormat.rich_text
-        ) {
+            attribute.format !== AttributeFormat.rich_text) {
             let displayedValue = String(fieldValue.displayValue);
             let prefixValue;
-            if (
-                attribute.format === AttributeFormat.color &&
-                (fieldValue.value === null || fieldValue.value.value === null)
-            ) {
+            if (attribute.format === AttributeFormat.color &&
+                (fieldValue.value === null || fieldValue.value.value === null)) {
                 fieldValue.value = null;
             }
             const hasValue = fieldValue.value !== null;
             if (hasValue) {
                 switch (attribute.format) {
                     case AttributeFormat.date_range:
-                        const {editingValue} = fieldValue;
-                        const isParsable = typeof editingValue === 'string' && editingValue.length > 0;
-                        const convertedFieldValue = isParsable ? JSON.parse(editingValue) : editingValue;
-                        const dateRangeValue = {
-                            from: new Date(Number(convertedFieldValue.from) * 1000).toLocaleDateString(i18n.language),
-                            to: new Date(Number(convertedFieldValue.to) * 1000).toLocaleDateString(i18n.language)
-                        };
+                        const dateRangeValue = fieldValue.displayValue;
                         displayedValue =
-                            (dateRangeValue === null || dateRangeValue === void 0 ? void 0 : dateRangeValue.from) &&
-                            (dateRangeValue === null || dateRangeValue === void 0 ? void 0 : dateRangeValue.to)
+                            (dateRangeValue === null || dateRangeValue === void 0 ? void 0 : dateRangeValue.from) && (dateRangeValue === null || dateRangeValue === void 0 ? void 0 : dateRangeValue.to)
                                 ? stringifyDateRangeValue(dateRangeValue, t)
                                 : '';
                         break;
@@ -321,9 +294,7 @@ function StandardFieldValue({value: fieldValue, onSubmit, onDelete, onScopeChang
                         break;
                     case AttributeFormat.date:
                         if (!isNaN(fieldValue.displayValue)) {
-                            displayedValue = new Intl.DateTimeFormat(i18n.language).format(
-                                new Date(Number(displayedValue) * 1000)
-                            );
+                            displayedValue = new Intl.DateTimeFormat(i18n.language).format(new Date(Number(displayedValue) * 1000));
                         }
                         break;
                     case AttributeFormat.color:
@@ -334,38 +305,14 @@ function StandardFieldValue({value: fieldValue, onSubmit, onDelete, onScopeChang
                         };
                 }
             }
-            return _jsxs(_Fragment, {
-                children: [
-                    prefixValue,
-                    _jsx(
-                        Input,
-                        {
-                            style: inputStyle,
-                            className: hasValue ? 'has-value' : '',
-                            value: displayedValue,
-                            onFocus: _handleFocus,
-                            disabled: state.isReadOnly
-                        },
-                        'display'
-                    )
-                ]
-            });
+            return (_jsxs(_Fragment, { children: [prefixValue, _jsx(Input, { style: inputStyle, className: hasValue ? 'has-value' : '', value: displayedValue, onFocus: _handleFocus, disabled: state.isReadOnly }, "display")] }));
         }
         const InputComponent = inputComponentByFormat[attribute.format];
         // This should never happen, unless we have some bad settings in DB
         if (!InputComponent) {
-            return _jsx('div', {children: t('record_edition.invalid_format')});
+            return _jsx("div", { children: t('record_edition.invalid_format') });
         }
-        return _jsx(InputComponent, {
-            state: state,
-            fieldValue: fieldValue,
-            onChange: _handleValueChange,
-            onFocus: _handleFocus,
-            onSubmit: _handleSubmit,
-            onPressEnter: _handlePressEnter,
-            settings: state.formElement.settings,
-            inputRef: inputRef
-        });
+        return (_jsx(InputComponent, { state: state, fieldValue: fieldValue, onChange: _handleValueChange, onFocus: _handleFocus, onSubmit: _handleSubmit, onPressEnter: _handlePressEnter, settings: state.formElement.settings, inputRef: inputRef }));
     };
     const _getColorDisplay = () => {
         const colorValue = '#' + String(fieldValue.displayValue);
@@ -377,80 +324,50 @@ function StandardFieldValue({value: fieldValue, onSubmit, onDelete, onScopeChang
             marginTop: fieldValue.index ? '15px' : '25px',
             marginLeft: '5px'
         };
-        return _jsx('label', {style: colorPickerStyle});
+        return _jsx("label", { style: colorPickerStyle });
     };
     const _getFilteredValuesList = () => {
         var _a, _b, _c, _d, _e, _f;
         let values = [];
         if (isValuesListEnabled) {
             if (attribute.format === AttributeFormat.date_range) {
-                const valuesList =
-                    (_b =
-                        (_a = attribute === null || attribute === void 0 ? void 0 : attribute.values_list) === null ||
-                        _a === void 0
-                            ? void 0
-                            : _a.dateRangeValues) !== null && _b !== void 0
-                        ? _b
-                        : [];
+                const valuesList = (_b = (_a = attribute === null || attribute === void 0 ? void 0 : attribute.values_list) === null || _a === void 0 ? void 0 : _a.dateRangeValues) !== null && _b !== void 0 ? _b : [];
                 values = valuesList
                     .filter(val => {
-                        return fieldValue.state === StandardFieldValueState.PRISTINE || !fieldValue.editingValue;
-                    })
+                    return fieldValue.state === StandardFieldValueState.PRISTINE || !fieldValue.editingValue;
+                })
                     .map(v => {
-                        const rangeValue = {
-                            from: moment(Number(v.from) * 1000).format('L'),
-                            to: moment(Number(v.to) * 1000).format('L')
-                        };
-                        return {
-                            value: stringifyDateRangeValue(rangeValue, t),
-                            rawValue: {from: v.from, to: v.to}
-                        };
-                    });
-            } else {
-                const valuesList =
-                    (_d =
-                        (_c = attribute === null || attribute === void 0 ? void 0 : attribute.values_list) === null ||
-                        _c === void 0
-                            ? void 0
-                            : _c.values) !== null && _d !== void 0
-                        ? _d
-                        : [];
+                    const rangeValue = {
+                        from: moment(Number(v.from) * 1000).format('L'),
+                        to: moment(Number(v.to) * 1000).format('L')
+                    };
+                    return {
+                        value: stringifyDateRangeValue(rangeValue, t),
+                        rawValue: { from: v.from, to: v.to }
+                    };
+                });
+            }
+            else {
+                const valuesList = (_d = (_c = attribute === null || attribute === void 0 ? void 0 : attribute.values_list) === null || _c === void 0 ? void 0 : _c.values) !== null && _d !== void 0 ? _d : [];
                 values = valuesList
                     .filter(val => {
-                        return (
-                            fieldValue.state === StandardFieldValueState.PRISTINE ||
-                            !fieldValue.editingValue ||
-                            attribute.format === AttributeFormat.date ||
-                            val.match(new RegExp(String(fieldValue.editingValue), 'i'))
-                        );
-                    })
-                    .map(v => ({value: v, rawValue: v}));
+                    return (fieldValue.state === StandardFieldValueState.PRISTINE ||
+                        !fieldValue.editingValue ||
+                        attribute.format === AttributeFormat.date ||
+                        val.match(new RegExp(String(fieldValue.editingValue), 'i')));
+                })
+                    .map(v => ({ value: v, rawValue: v }));
             }
         }
-        const hydratedValues = values.map(value =>
-            Object.assign(Object.assign({}, value), {
-                isNewValue: false,
-                canCopy:
-                    isValuesListOpen &&
-                    attribute.format !== AttributeFormat.date &&
-                    attribute.format !== AttributeFormat.date_range
-            })
-        );
+        const hydratedValues = values.map(value => (Object.assign(Object.assign({}, value), { isNewValue: false, canCopy: isValuesListOpen &&
+                attribute.format !== AttributeFormat.date &&
+                attribute.format !== AttributeFormat.date_range })));
         // Display current value on top of values list as "new value". Don't do that for date range attribute as it
         // doesn't make much sense
-        if (
-            isValuesListOpen &&
+        if (isValuesListOpen &&
             String(fieldValue.editingValue) &&
             attribute.format !== AttributeFormat.date_range &&
-            !((_f =
-                (_e = attribute === null || attribute === void 0 ? void 0 : attribute.values_list) === null ||
-                _e === void 0
-                    ? void 0
-                    : _e.values) !== null && _f !== void 0
-                ? _f
-                : []
-            ).some(v => v === fieldValue.editingValue)
-        ) {
+            !((_f = (_e = attribute === null || attribute === void 0 ? void 0 : attribute.values_list) === null || _e === void 0 ? void 0 : _e.values) !== null && _f !== void 0 ? _f : []).some(v => v === fieldValue.editingValue)) {
             hydratedValues.unshift({
                 value: String(fieldValue.editingValue),
                 rawValue: String(fieldValue.editingValue),
@@ -460,84 +377,38 @@ function StandardFieldValue({value: fieldValue, onSubmit, onDelete, onScopeChang
         }
         return hydratedValues;
     };
-    const errorContent = _jsx(ErrorMessage, {
-        children: _jsxs(
-            Space,
-            Object.assign(
-                {size: 'small'},
-                {
-                    children: [
-                        _jsx(ExclamationCircleOutlined, {}),
-                        fieldValue.error,
-                        _jsx(Button, {
-                            onClick: _handleCloseError,
-                            size: 'small',
-                            icon: _jsx(CloseOutlined, {}),
-                            style: {border: 'none'}
-                        })
-                    ]
-                }
-            )
-        )
-    });
+    const errorContent = (_jsx(ErrorMessage, { children: _jsxs(Space, Object.assign({ size: "small" }, { children: [_jsx(ExclamationCircleOutlined, {}), fieldValue.error, _jsx(Button, { onClick: _handleCloseError, size: "small", icon: _jsx(CloseOutlined, {}), style: { border: 'none' } })] })) }));
     const isErrorVisible = fieldValue.isErrorDisplayed;
     const wrapperClasses = `
         ${attribute.format ? `format-${attribute.format}` : ''}
-        ${
-            (
-                (_c = fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.value) === null ||
-                _c === void 0
-                    ? void 0
-                    : _c.value
-            )
-                ? 'has-value'
-                : ''
-        }
+        ${((_c = fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.value) === null || _c === void 0 ? void 0 : _c.value) ? 'has-value' : ''}
         ${fieldValue.isEditing ? 'editing' : ''}
     `;
-    const canDeleteValue =
-        !state.isReadOnly && fieldValue.idValue !== newValueId && attribute.format !== AttributeFormat.boolean;
+    const canDeleteValue = !state.isReadOnly && fieldValue.idValue !== newValueId && attribute.format !== AttributeFormat.boolean;
     const valuesList = _getFilteredValuesList();
     const valueActions = [];
     if (!fieldValue.isEditing) {
         valueActions.push({
-            button: _jsx(ValueDetailsBtn, {value: fieldValue.value, attribute: attribute, shape: 'circle'})
+            button: _jsx(ValueDetailsBtn, { value: fieldValue.value, attribute: attribute, shape: "circle" })
         });
     }
-    const hasMultipleValuesDisplay =
-        attribute.multiple_values && !!Object.keys(state.values[state.activeScope].values).length;
-    if (
-        (_d = attribute === null || attribute === void 0 ? void 0 : attribute.versions_conf) === null || _d === void 0
-            ? void 0
-            : _d.versionable
-    ) {
+    const hasMultipleValuesDisplay = attribute.multiple_values && !!Object.keys(state.values[state.activeScope].values).length;
+    if ((_d = attribute === null || attribute === void 0 ? void 0 : attribute.versions_conf) === null || _d === void 0 ? void 0 : _d.versionable) {
         const versions = {
-            [FieldScope.CURRENT]:
-                (_f = (_e = state.values[FieldScope.CURRENT]) === null || _e === void 0 ? void 0 : _e.version) !==
-                    null && _f !== void 0
-                    ? _f
-                    : null,
-            [FieldScope.INHERITED]:
-                (_h = (_g = state.values[FieldScope.INHERITED]) === null || _g === void 0 ? void 0 : _g.version) !==
-                    null && _h !== void 0
-                    ? _h
-                    : null
+            [FieldScope.CURRENT]: (_f = (_e = state.values[FieldScope.CURRENT]) === null || _e === void 0 ? void 0 : _e.version) !== null && _f !== void 0 ? _f : null,
+            [FieldScope.INHERITED]: (_h = (_g = state.values[FieldScope.INHERITED]) === null || _g === void 0 ? void 0 : _g.version) !== null && _h !== void 0 ? _h : null
         };
         if (!hasMultipleValuesDisplay) {
             valueActions.push({
                 title: t('values_version.title'),
-                button: _jsx(ValuesVersionBtn, {
-                    versions: versions,
-                    activeScope: state.activeScope,
-                    onScopeChange: onScopeChange
-                })
+                button: (_jsx(ValuesVersionBtn, { versions: versions, activeScope: state.activeScope, onScopeChange: onScopeChange }))
             });
         }
     }
     if (canDeleteValue && !fieldValue.isEditing && fieldValue.displayValue) {
         valueActions.push({
             title: t('global.delete'),
-            button: _jsx(DeleteValueBtn, {onDelete: _handleDelete, shape: 'circle'})
+            button: _jsx(DeleteValueBtn, { onDelete: _handleDelete, shape: "circle" })
         });
     }
     const valuesVersionIndicatorStyle = {
@@ -546,135 +417,7 @@ function StandardFieldValue({value: fieldValue, onSubmit, onDelete, onScopeChang
         bottom: hasMultipleValuesDisplay ? '0' : '1px',
         borderRadius: hasMultipleValuesDisplay ? 'none' : token.borderRadius
     };
-    return _jsxs(_Fragment, {
-        children: [
-            fieldValue.isEditing && _jsx(Dimmer, {onClick: _handleCancel}),
-            _jsx(
-                FormWrapper,
-                Object.assign(
-                    {$isEditing: fieldValue.isEditing, className: !fieldValue.index ? 'first-value' : ''},
-                    {
-                        children: _jsx(Form, {
-                            children: _jsxs(FormItem, {
-                                children: [
-                                    _jsx(
-                                        Popover,
-                                        Object.assign(
-                                            {placement: 'topLeft', open: isErrorVisible, content: errorContent},
-                                            {
-                                                children: _jsxs(
-                                                    InputWrapper,
-                                                    Object.assign(
-                                                        {
-                                                            $isEditing: fieldValue.isEditing,
-                                                            className: wrapperClasses,
-                                                            'data-testid': 'input-wrapper'
-                                                        },
-                                                        {
-                                                            children: [
-                                                                _jsx(ValuesVersionIndicator, {
-                                                                    activeScope: state.activeScope,
-                                                                    style: valuesVersionIndicatorStyle
-                                                                }),
-                                                                !fieldValue.index &&
-                                                                    _jsxs(
-                                                                        'label',
-                                                                        Object.assign(
-                                                                            {
-                                                                                className: 'attribute-label',
-                                                                                onClick: _handleFocus
-                                                                            },
-                                                                            {
-                                                                                children: [
-                                                                                    state.formElement.settings.label,
-                                                                                    editRecordState.externalUpdate
-                                                                                        .updatedValues[
-                                                                                        attribute === null ||
-                                                                                        attribute === void 0
-                                                                                            ? void 0
-                                                                                            : attribute.id
-                                                                                    ] && _jsx(UpdatedFieldIcon, {}),
-                                                                                    state.activeScope ===
-                                                                                        FieldScope.INHERITED &&
-                                                                                        _jsx(InheritedFieldLabel, {
-                                                                                            version:
-                                                                                                state.values[
-                                                                                                    FieldScope.INHERITED
-                                                                                                ].version
-                                                                                        })
-                                                                                ]
-                                                                            }
-                                                                        )
-                                                                    ),
-                                                                _getInput(),
-                                                                !state.metadataEdit &&
-                                                                    _jsx(FloatingMenu, {actions: valueActions})
-                                                            ]
-                                                        }
-                                                    )
-                                                )
-                                            }
-                                        )
-                                    ),
-                                    _jsxs(
-                                        ActionsWrapper,
-                                        Object.assign(
-                                            {ref: actionsWrapperRef},
-                                            {
-                                                children: [
-                                                    fieldValue.isEditing &&
-                                                        ((_j =
-                                                            attribute === null || attribute === void 0
-                                                                ? void 0
-                                                                : attribute.values_list) === null || _j === void 0
-                                                            ? void 0
-                                                            : _j.enable) &&
-                                                        _jsx(ValuesList, {
-                                                            attribute: attribute,
-                                                            valuesList: valuesList,
-                                                            onValueSelect: _handleSubmit,
-                                                            onValueCopy: _handleValueCopy
-                                                        }),
-                                                    fieldValue.isEditing &&
-                                                        _jsxs(ButtonsWrapper, {
-                                                            children: [
-                                                                _jsx(
-                                                                    Button,
-                                                                    Object.assign(
-                                                                        {
-                                                                            size: 'small',
-                                                                            onClick: _handleCancel,
-                                                                            style: {background: '#FFF'}
-                                                                        },
-                                                                        {children: t('global.cancel')}
-                                                                    )
-                                                                ),
-                                                                (!isValuesListEnabled || isValuesListOpen) &&
-                                                                    _jsx(
-                                                                        Button,
-                                                                        Object.assign(
-                                                                            {
-                                                                                type: 'primary',
-                                                                                size: 'small',
-                                                                                onClick: _handleClickSubmit
-                                                                            },
-                                                                            {children: t('global.submit')}
-                                                                        )
-                                                                    )
-                                                            ]
-                                                        })
-                                                ]
-                                            }
-                                        )
-                                    )
-                                ]
-                            })
-                        })
-                    }
-                )
-            )
-        ]
-    });
+    return (_jsxs(_Fragment, { children: [fieldValue.isEditing && _jsx(Dimmer, { onClick: _handleCancel }), _jsx(FormWrapper, Object.assign({ "$isEditing": fieldValue.isEditing, className: !fieldValue.index ? 'first-value' : '' }, { children: _jsx(Form, { children: _jsxs(FormItem, { children: [_jsx(Popover, Object.assign({ placement: "topLeft", open: isErrorVisible, content: errorContent }, { children: _jsxs(InputWrapper, Object.assign({ "$isEditing": fieldValue.isEditing, className: wrapperClasses, "data-testid": "input-wrapper" }, { children: [_jsx(ValuesVersionIndicator, { activeScope: state.activeScope, style: valuesVersionIndicatorStyle }), !fieldValue.index && (_jsxs("label", Object.assign({ className: "attribute-label", onClick: _handleFocus }, { children: [state.formElement.settings.label, editRecordState.externalUpdate.updatedValues[attribute === null || attribute === void 0 ? void 0 : attribute.id] && (_jsx(UpdatedFieldIcon, {})), state.activeScope === FieldScope.INHERITED && (_jsx(InheritedFieldLabel, { version: state.values[FieldScope.INHERITED].version }))] }))), _getInput(), !state.metadataEdit && _jsx(FloatingMenu, { actions: valueActions })] })) })), _jsxs(ActionsWrapper, Object.assign({ ref: actionsWrapperRef }, { children: [fieldValue.isEditing && ((_j = attribute === null || attribute === void 0 ? void 0 : attribute.values_list) === null || _j === void 0 ? void 0 : _j.enable) && (_jsx(ValuesList, { attribute: attribute, valuesList: valuesList, onValueSelect: _handleSubmit, onValueCopy: _handleValueCopy })), fieldValue.isEditing && (_jsxs(ButtonsWrapper, { children: [_jsx(Button, Object.assign({ size: "small", onClick: _handleCancel, style: { background: '#FFF' } }, { children: t('global.cancel') })), (!isValuesListEnabled || isValuesListOpen) && (_jsx(Button, Object.assign({ type: "primary", size: "small", onClick: _handleClickSubmit }, { children: t('global.submit') })))] }))] }))] }) }) }))] }));
 }
 export default StandardFieldValue;
-//# sourceMappingURL=StandardFieldValue.js.map
+//# sourceMappingURL=StandardFieldValue.js.map