@leav/ui 0.2.6 → 0.2.8

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,13 +16,17 @@ 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';
@@ -31,15 +35,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 {
@@ -132,13 +136,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;
@@ -147,7 +151,7 @@ const ButtonsWrapper = styled.div `
         margin-left: 0.5em;
     }
 `;
-const FormItem = styled(Form.Item) `
+const FormItem = styled(Form.Item)`
     && {
         margin: 0;
     }
@@ -164,21 +168,30 @@ 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
@@ -198,7 +211,7 @@ function StandardFieldValue({ value: fieldValue, onSubmit, onDelete, onScopeChan
             });
         }
     }, [fieldValue.isEditing, fieldValue.editingValue]);
-    const _handleSubmit = async (valueToSave) => {
+    const _handleSubmit = async valueToSave => {
         if (valueToSave === '') {
             return _handleDelete();
         }
@@ -232,22 +245,23 @@ function StandardFieldValue({ value: fieldValue, onSubmit, onDelete, onScopeChan
         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,
@@ -263,29 +277,42 @@ function StandardFieldValue({ value: fieldValue, onSubmit, onDelete, onScopeChan
     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 dateRangeValue = fieldValue.displayValue;
+                        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)
+                        };
                         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;
@@ -294,7 +321,9 @@ function StandardFieldValue({ value: fieldValue, onSubmit, onDelete, onScopeChan
                         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:
@@ -305,14 +334,38 @@ function StandardFieldValue({ value: fieldValue, onSubmit, onDelete, onScopeChan
                         };
                 }
             }
-            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);
@@ -324,50 +377,80 @@ function StandardFieldValue({ value: fieldValue, onSubmit, onDelete, onScopeChan
             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),
@@ -377,38 +460,84 @@ function StandardFieldValue({ value: fieldValue, onSubmit, onDelete, onScopeChan
         }
         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 = {
@@ -417,7 +546,135 @@ function StandardFieldValue({ value: fieldValue, onSubmit, onDelete, onScopeChan
         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