@leav/ui 0.3.6-ecf1e09 → 0.3.6-ee11e30

package/dist/components/RecordEdition/EditRecordContent/uiElements/StandardField/StandardFieldValue/DSRichTextWrapper.js

@@ -1,82 +1,62 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// Copyright LEAV Solutions 2017
+// Copyright LEAV Solutions 2017 until 2023/11/05, Copyright Aristid from 2023/11/06
 // This file is released under LGPL V3
 // License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import { useEffect, useRef, useState } from 'react';
+import { useState } from 'react';
 import { Form } from 'antd';
-import styled from 'styled-components';
-import { useSharedTranslation } from '../../../../../../hooks/useSharedTranslation';
-import { useValueDetailsButton } from '../../../../../../components/RecordEdition/EditRecordContent/shared/ValueDetailsBtn/useValueDetailsButton';
-import { useLang } from '../../../../../../hooks';
-import { localizedTranslation } from '@leav/utils';
 import { KitRichText } from 'aristid-ds';
-const KitRichTextStyled = styled(KitRichText) `
-    color: ${({ $shouldHighlightColor }) => ($shouldHighlightColor ? 'var(--general-colors-primary-400)' : 'initial')};
-`;
+import { useSharedTranslation } from '../../../../../../hooks/useSharedTranslation';
+import { EMPTY_INITIAL_VALUE_STRING } from '../../../antdUtils';
 const isEmptyValue = value => !value || value === '<p></p>';
-export const DSRichTextWrapper = ({ value, onChange, state, attribute, fieldValue, handleSubmit, handleBlur, shouldShowValueDetailsButton = false }) => {
-    const { t } = useSharedTranslation();
-    const { errors } = Form.Item.useStatus();
-    const { onValueDetailsButtonClick } = useValueDetailsButton({
-        value: fieldValue?.value,
-        attribute
-    });
+export const DSRichTextWrapper = ({ value, presentationValue, isLastValueOfMultivalues, removeLastValueOfMultivalues, onChange, attribute, readonly, handleSubmit, calculatedFlags, inheritedFlags, setActiveValue }) => {
+    if (!onChange) {
+        throw Error('DSRichTextWrapper should be used inside a antd Form.Item');
+    }
+    const isNewValueOfMultivalues = isLastValueOfMultivalues && value === EMPTY_INITIAL_VALUE_STRING;
+    const focusedDefaultValue = attribute.multiple_values ? isNewValueOfMultivalues : false;
     const [hasChanged, setHasChanged] = useState(false);
-    const { lang: availableLang } = useLang();
-    const inputRef = useRef(null);
-    useEffect(() => {
-        if (fieldValue.isEditing && inputRef.current) {
-            inputRef.current.children[0].focus();
-        }
-    }, [fieldValue.isEditing]);
-    const _resetToInheritedOrCalculatedValue = () => {
+    const [isFocused, setIsFocused] = useState(focusedDefaultValue);
+    const { errors } = Form.Item.useStatus();
+    const { t } = useSharedTranslation();
+    const isErrors = errors.length > 0;
+    const valueToDisplay = isFocused || isErrors || !presentationValue ? value : presentationValue;
+    const _resetToInheritedOrCalculatedValue = async () => {
         setHasChanged(false);
-        if (state.isInheritedValue) {
-            onChange(state.inheritedValue.raw_value);
+        if (inheritedFlags.isInheritedValue) {
+            onChange(inheritedFlags.inheritedValue.raw_payload);
         }
-        else if (state.isCalculatedValue) {
-            onChange(state.calculatedValue.raw_value);
+        else if (calculatedFlags.isCalculatedValue) {
+            onChange(calculatedFlags.calculatedValue.raw_payload);
         }
-        handleSubmit('', state.attribute.id);
+        await handleSubmit(null, attribute.id);
+    };
+    const _handleFocus = () => {
+        setIsFocused(true);
+        setActiveValue();
     };
-    const _handleOnBlur = inputValue => {
+    const _handleOnBlur = async (inputValue) => {
+        setHasChanged(false);
+        const valueToSubmit = isEmptyValue(inputValue) ? null : inputValue;
         if (!hasChanged) {
-            handleBlur();
+            onChange(valueToSubmit);
+            setIsFocused(false);
+            if (isNewValueOfMultivalues) {
+                removeLastValueOfMultivalues();
+            }
             return;
         }
-        const valueToSubmit = isEmptyValue(inputValue) ? '' : inputValue;
-        if (valueToSubmit === '' && (state.isInheritedValue || state.isCalculatedValue)) {
+        if (valueToSubmit === null && (inheritedFlags.isInheritedValue || calculatedFlags.isCalculatedValue)) {
             _resetToInheritedOrCalculatedValue();
             return;
         }
-        if (hasChanged || (!state.isInheritedValue && !state.isCalculatedValue)) {
-            handleSubmit(valueToSubmit, state.attribute.id);
-        }
         onChange(valueToSubmit);
-        return;
+        await handleSubmit(valueToSubmit, attribute.id);
+        setIsFocused(false);
     };
     const _handleOnChange = inputValue => {
         setHasChanged(true);
-        if (state.isInheritedValue && isEmptyValue(inputValue)) {
-            _resetToInheritedOrCalculatedValue();
-            return;
-        }
         onChange(inputValue);
     };
-    const _getHelper = () => {
-        if (state.isInheritedOverrideValue) {
-            return t('record_edition.inherited_input_helper', {
-                inheritedValue: state.inheritedValue.raw_value
-            });
-        }
-        else if (state.isCalculatedOverrideValue) {
-            return t('record_edition.calculated_input_helper', {
-                calculatedValue: state.calculatedValue.raw_value
-            });
-        }
-        return;
-    };
-    const label = localizedTranslation(state.formElement.settings.label, availableLang);
-    return (_jsx(KitRichTextStyled, { ref: inputRef, required: state.formElement.settings.required, label: label, onInfoClick: shouldShowValueDetailsButton ? onValueDetailsButtonClick : null, status: errors.length > 0 ? 'error' : undefined, helper: _getHelper(), value: value, disabled: state.isReadOnly, onChange: _handleOnChange, onBlur: _handleOnBlur, "$shouldHighlightColor": (!hasChanged && state.isInheritedNotOverrideValue) || state.isCalculatedNotOverrideValue }));
+    return (_jsx(KitRichText, { id: attribute.id, autoFocus: isFocused, helper: isErrors ? String(errors[0]) : undefined, status: isErrors ? 'error' : undefined, value: valueToDisplay, disabled: readonly, onChange: _handleOnChange, onFocus: _handleFocus, onBlur: _handleOnBlur, placeholder: t('record_edition.placeholder.enter_a_text'), maxLength: attribute.character_limit ?? undefined, showCount: true }));
 };
 //# sourceMappingURL=DSRichTextWrapper.js.map

package/dist/components/RecordEdition/EditRecordContent/uiElements/StandardField/StandardFieldValue/DSRichTextWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"DSRichTextWrapper.js","sourceRoot":"","sources":["../../../../../../../src/components/RecordEdition/EditRecordContent/uiElements/StandardField/StandardFieldValue/DSRichTextWrapper.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DSRichTextWrapper.js","sourceRoot":"","sources":["../../../../../../../src/components/RecordEdition/EditRecordContent/uiElements/StandardField/StandardFieldValue/DSRichTextWrapper.tsx"],"names":[],"mappings":"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"}

package/dist/components/RecordEdition/EditRecordContent/uiElements/StandardField/StandardFieldValue/StandardFieldValue.d.ts

@@ -1,13 +1,20 @@
 import { AnyPrimitive } from '@leav/utils';
-import { VersionFieldScope } from '../../../../../../components/RecordEdition/EditRecordContent/_types';
-import { IdValue, IStandardFieldReducerState, IStandardFieldValue, StandardFieldDispatchFunc } from '../../../reducers/standardFieldReducer/standardFieldReducer';
+import { FormListFieldData } from 'antd';
+import { ISubmitMultipleResult } from '../../../../../../components/RecordEdition/EditRecordContent/_types';
+import { RecordFormAttributeStandardAttributeFragment } from '../../../../../../_gqlTypes';
+import { CalculatedFlags, InheritedFlags } from '../calculatedInheritedFlags';
 interface IStandardFieldValueProps {
-    value: IStandardFieldValue;
-    state: IStandardFieldReducerState;
-    dispatch: StandardFieldDispatchFunc;
-    onSubmit: (idValue: IdValue, value: AnyPrimitive) => Promise<void>;
-    onDelete: (idValue: IdValue) => void;
-    onScopeChange: (scope: VersionFieldScope) => void;
+    presentationValue: string;
+    handleSubmit: (value: AnyPrimitive | null) => Promise<void | ISubmitMultipleResult>;
+    attribute: RecordFormAttributeStandardAttributeFragment;
+    label: string;
+    readonly: boolean;
+    calculatedFlags: CalculatedFlags;
+    inheritedFlags: InheritedFlags;
+    listField?: FormListFieldData;
+    removeLastValueOfMultivalues?: () => void;
+    isLastValueOfMultivalues?: boolean;
+    setActiveValue: () => void;
 }
-declare function StandardFieldValue({ value: fieldValue, onSubmit, onDelete, onScopeChange, state, dispatch }: IStandardFieldValueProps): JSX.Element;
+declare function StandardFieldValue({ presentationValue, handleSubmit, attribute, label, readonly, calculatedFlags, inheritedFlags, listField, removeLastValueOfMultivalues, setActiveValue, isLastValueOfMultivalues }: IStandardFieldValueProps): JSX.Element;
 export default StandardFieldValue;

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

@@ -1,412 +1,17 @@
-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 { localizedTranslation } from '@leav/utils';
-import { Button, Input, Popover, Space, theme } from 'antd';
-import moment from 'moment';
-import React, { useEffect, useRef } from 'react';
-import styled from 'styled-components';
-import { themeVars } from '../../../../../../antdTheme';
-import { FloatingMenu } from '../../../../../../components';
-import Dimmer from '../../../../../../components/Dimmer';
-import DeleteValueBtn from '../../../../../../components/RecordEdition/EditRecordContent/shared/DeleteValueBtn';
-import InheritedFieldLabel from '../../../../../../components/RecordEdition/EditRecordContent/shared/InheritedFieldLabel';
-import UpdatedFieldIcon from '../../../../../../components/RecordEdition/EditRecordContent/shared/UpdatedFieldIcon';
-import ValueDetailsBtn from '../../../../../../components/RecordEdition/EditRecordContent/shared/ValueDetailsBtn';
-import ValuesVersionBtn from '../../../../../../components/RecordEdition/EditRecordContent/shared/ValuesVersionBtn';
-import ValuesVersionIndicator from '../../../../../../components/RecordEdition/EditRecordContent/shared/ValuesVersionIndicator';
-import { VersionFieldScope } from '../../../../../../components/RecordEdition/EditRecordContent/_types';
-import { EditRecordReducerActionsTypes } from '../../../../../../components/RecordEdition/editRecordReducer/editRecordReducer';
-import { useEditRecordReducer } from '../../../../../../components/RecordEdition/editRecordReducer/useEditRecordReducer';
-import { useSharedTranslation } from '../../../../../../hooks/useSharedTranslation';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Form } from 'antd';
 import { AttributeFormat } from '../../../../../../_gqlTypes';
-import { stringifyDateRangeValue } from '../../../../../../_utils';
-import { newValueId, StandardFieldReducerActionsTypes, StandardFieldValueState } from '../../../reducers/standardFieldReducer/standardFieldReducer';
-import ColorInput from './Inputs/ColorInput';
-import TextInput from './Inputs/TextInput';
-import ValuesList from './ValuesList';
-import { useLang } from '../../../../../../hooks';
-import { StandardFieldValueDisplayHandler } from './StandardFieldValueDisplayHandler';
-const ErrorMessage = styled.div `
-    color: ${themeVars.errorColor};
-    font-weight: bold;
-`;
-const FormWrapper = styled.div `
-    position: relative;
-    z-index: ${p => (p.$isEditing ? 2 : 0)};
-`;
-const InputWrapper = styled.div `
-    position: relative;
-
-    && input {
-        background: ${themeVars.defaultBg};
-        transition: none;
-        border-radius: 0;
-        line-height: 2.5em;
-        padding-left: 17px;
-    }
-
-    ${FormWrapper}:not(:last-child) & input:not(:hover) {
-        border-bottom: none;
-    }
-
-    ${FormWrapper}:first-child & input {
-        border-top-left-radius: 5px;
-        border-top-right-radius: 5px;
-    }
-
-    ${FormWrapper}:last-child & input {
-        border-bottom-left-radius: 5px;
-        border-bottom-right-radius: 5px;
-    }
-
-    &.editing input {
-        border-radius: 5px;
-    }
-
-    &.editing .field-wrapper,
-    &.editing .nested-input {
-        z-index: 0;
-    }
-
-    &.format-boolean label {
-        margin-right: 1em;
-    }
-
-    &:not(.format-boolean) label {
-        position: absolute;
-        left: 11px;
-        top: calc(50% - 0.9em);
-        font-size: 1.1em;
-        background: transparent;
-        padding: 0 0.5em;
-        color: ${themeVars.secondaryTextColor};
-        transition: all 0.2s ease;
-        transition-property: left, top, font-size;
-        z-index: 1;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        width: 100%;
-    }
-
-    &:not(.format-boolean):not(.editing):not(.has-value) label {
-        padding-right: 3rem;
-    }
-
-    input:disabled {
-        background: ${themeVars.defaultBg};
-    }
-
-    &.has-value:not(.format-boolean) label,
-    &.editing:not(.format-boolean) label {
-        top: 0px;
-        font-size: 0.9em;
-        background: transparent;
-        text-shadow: 0px 0px 4px #fff;
-        z-index: 2;
-        border-radius: 5px;
-    }
-
-    ${FormWrapper}.first-value &.has-value:not(.format-boolean) input:not(:first-child),
-    ${FormWrapper}.first-value &.editing:not(.format-boolean) input:not(:only-child),
-    ${FormWrapper}.first-value &.editing.format-date_range input,
-    ${FormWrapper}.first-value &.editing.format-date_range .ant-picker-range-separator {
-        padding-top: 1em;
-    }
-
-    &:not(.has-value):not(.editing):not(.format-boolean) input {
-        padding: 9px 0;
-    }
-
-    &:not(:hover) .floating-menu {
-        display: none;
-    }
-
-    .floating-menu {
-        top: 50%;
-        transform: translateY(-50%);
-    }
-`;
-const ActionsWrapper = styled.div `
-    position: absolute;
-    display: flex;
-    width: 100%;
-    flex-direction: column;
-`;
-const ButtonsWrapper = styled.div `
-    display: flex;
-    margin: 0.5em 0;
-    justify-content: flex-end;
-
-    & > button {
-        margin-left: 0.5em;
-    }
-`;
-const RichTextEditorInput = React.lazy(() => import('./Inputs/RichTextEditorInput'));
-const inputComponentByFormat = {
-    [AttributeFormat.text]: null,
-    [AttributeFormat.date]: null,
-    [AttributeFormat.date_range]: null,
-    [AttributeFormat.boolean]: null,
-    [AttributeFormat.numeric]: null,
-    [AttributeFormat.encrypted]: null,
-    [AttributeFormat.extended]: TextInput,
-    [AttributeFormat.color]: ColorInput,
-    [AttributeFormat.rich_text]: RichTextEditorInput
-};
-function StandardFieldValue({ value: fieldValue, onSubmit, onDelete, onScopeChange, state, dispatch }) {
-    const { t, i18n } = useSharedTranslation();
-    const { token } = theme.useToken();
-    const { lang: availableLangs } = useLang();
-    const actionsWrapperRef = useRef();
-    const inputRef = useRef();
-    const { state: editRecordState, dispatch: editRecordDispatch } = useEditRecordReducer();
-    const attribute = state.formElement.attribute;
+import { DSListSelect } from './ValuesList/DSListSelect';
+import { DSInputWrapper } from './DSInputWrapper';
+import { DSDatePickerWrapper } from './DSDatePickerWrapper';
+import { DSRangePickerWrapper } from './DSRangePickerWrapper';
+import { DSInputNumberWrapper } from './DSInputNumberWrapper';
+import { DSInputEncryptedWrapper } from './DSInputEncryptedWrapper';
+import { DSBooleanWrapper } from './DSBooleanWrapper';
+import { DSRichTextWrapper } from './DSRichTextWrapper';
+import { DSColorPickerWrapper } from './DSColorPickerWrapper';
+function StandardFieldValue({ presentationValue, handleSubmit, attribute, label, readonly, calculatedFlags, inheritedFlags, listField, removeLastValueOfMultivalues, setActiveValue, isLastValueOfMultivalues = false }) {
     const isValuesListEnabled = !!attribute?.values_list?.enable;
-    const isValuesListOpen = !!attribute?.values_list?.allowFreeEntry;
-    // Scroll to input when editing field
-    useEffect(() => {
-        if (fieldValue.isEditing) {
-            actionsWrapperRef?.current?.scrollIntoView({ block: 'nearest' });
-        }
-    }, [fieldValue.isEditing]);
-    // Cancel value editing if value details panel is closed
-    useEffect(() => {
-        if (editRecordState.activeValue === null && fieldValue.isEditing) {
-            dispatch({
-                type: StandardFieldReducerActionsTypes.CANCEL_EDITING,
-                idValue: fieldValue.idValue
-            });
-        }
-    }, [editRecordState.activeValue]);
-    useEffect(() => {
-        if (fieldValue.isEditing) {
-            editRecordDispatch({
-                type: EditRecordReducerActionsTypes.SET_EDITING_VALUE,
-                value: fieldValue.editingValue
-            });
-        }
-    }, [fieldValue.isEditing, fieldValue.editingValue]);
-    const _uneditField = () => {
-        dispatch({
-            type: StandardFieldReducerActionsTypes.CANCEL_EDITING,
-            idValue: fieldValue.idValue
-        });
-    };
-    const _handleSubmit = async (valueToSave, id) => {
-        if (valueToSave === '') {
-            return _handleDelete();
-        }
-        const convertedValue = typeof valueToSave === 'object' ? JSON.stringify(valueToSave) : valueToSave;
-        await onSubmit(fieldValue.idValue, convertedValue);
-    };
-    const _handlePressEnter = async () => {
-        if (!isValuesListEnabled) {
-            return _handleSubmit(fieldValue.editingValue);
-        }
-        const valuesList = _getFilteredValuesList();
-        if (!valuesList.length) {
-            return;
-        }
-        return _handleSubmit(valuesList[0].value);
-    };
-    const _handleDelete = async () => {
-        if (fieldValue.idValue === newValueId) {
-            return _handleCancel();
-        }
-        await onDelete(fieldValue.idValue);
-        _uneditField();
-    };
-    const _handleFocus = () => {
-        if (state.isReadOnly || fieldValue.isEditing || attribute.format === AttributeFormat.boolean) {
-            return;
-        }
-        dispatch({
-            type: StandardFieldReducerActionsTypes.FOCUS_FIELD,
-            idValue: fieldValue.idValue
-        });
-        if (!state.metadataEdit) {
-            editRecordDispatch({
-                type: EditRecordReducerActionsTypes.SET_ACTIVE_VALUE,
-                value: { value: fieldValue.value, editingValue: fieldValue.editingValue, attribute }
-            });
-        }
-    };
-    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 _handleCancel = () => {
-        dispatch({
-            type: StandardFieldReducerActionsTypes.CANCEL_EDITING,
-            idValue: fieldValue.idValue
-        });
-        if (!state.metadataEdit) {
-            editRecordDispatch({
-                type: EditRecordReducerActionsTypes.SET_ACTIVE_VALUE,
-                value: null
-            });
-        }
-    };
-    const _handleClickSubmit = () => {
-        _handleSubmit(fieldValue.editingValue);
-    };
-    const _handleValueCopy = (value) => {
-        inputRef?.current?.focus();
-        _handleValueChange(value);
-    };
-    const _getInput = () => {
-        let inputStyle = {};
-        if (!fieldValue.isEditing &&
-            attribute.format !== AttributeFormat.boolean &&
-            attribute.format !== AttributeFormat.rich_text) {
-            let displayedValue = String(fieldValue.displayValue);
-            let prefixValue;
-            if (attribute.format === AttributeFormat.color &&
-                (fieldValue.value === null || fieldValue.value.payload === null)) {
-                fieldValue.value = null;
-            }
-            const hasValue = fieldValue.value !== null;
-            if (hasValue) {
-                switch (attribute.format) {
-                    case AttributeFormat.encrypted:
-                        displayedValue = '•••••••••';
-                        break;
-                    case AttributeFormat.date:
-                        if (!isNaN(fieldValue.displayValue)) {
-                            displayedValue = new Intl.DateTimeFormat(i18n.language).format(new Date(Number(displayedValue) * 1000));
-                        }
-                        break;
-                    case AttributeFormat.color:
-                        prefixValue = _getColorDisplay();
-                        displayedValue = '#' + displayedValue;
-                        inputStyle = {
-                            paddingLeft: '39px'
-                        };
-                }
-            }
-            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(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);
-        const colorPickerStyle = {
-            width: '16px',
-            height: '16px',
-            borderRadius: '2px',
-            backgroundColor: colorValue,
-            marginTop: fieldValue.index ? '15px' : '25px',
-            marginLeft: '5px'
-        };
-        return _jsx("label", { style: colorPickerStyle });
-    };
-    const _getFilteredValuesList = () => {
-        let values = [];
-        if (isValuesListEnabled) {
-            if (attribute.format === AttributeFormat.date_range) {
-                const valuesList = attribute?.values_list?.dateRangeValues ?? [];
-                values = valuesList
-                    .filter(val => 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 = attribute?.values_list?.values ?? [];
-                values = valuesList
-                    .filter(val => 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 => ({
-            ...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 &&
-            String(fieldValue.editingValue) &&
-            attribute.format !== AttributeFormat.date_range &&
-            !(attribute?.values_list?.values ?? []).some(v => v === fieldValue.editingValue)) {
-            hydratedValues.unshift({
-                value: String(fieldValue.editingValue),
-                rawValue: String(fieldValue.editingValue),
-                isNewValue: true,
-                canCopy: false
-            });
-        }
-        return hydratedValues;
-    };
-    const errorContent = (_jsx(ErrorMessage, { children: _jsxs(Space, { 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}` : ''}
-        ${fieldValue?.value?.payload ? 'has-value' : ''}
-        ${fieldValue.isEditing ? 'editing' : ''}
-    `;
-    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" })
-        });
-    }
-    const hasMultipleValuesDisplay = attribute.multiple_values && !!Object.keys(state.values[state.activeScope].values).length;
-    if (attribute?.versions_conf?.versionable) {
-        const versions = {
-            [VersionFieldScope.CURRENT]: state.values[VersionFieldScope.CURRENT]?.version ?? null,
-            [VersionFieldScope.INHERITED]: state.values[VersionFieldScope.INHERITED]?.version ?? null
-        };
-        if (!hasMultipleValuesDisplay) {
-            valueActions.push({
-                title: t('values_version.title'),
-                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" })
-        });
-    }
-    const valuesVersionIndicatorStyle = {
-        top: '1px',
-        left: '1px',
-        bottom: hasMultipleValuesDisplay ? '0' : '1px',
-        borderRadius: hasMultipleValuesDisplay ? 'none' : token.borderRadius
-    };
     const attributeFormatsWithDS = [
         AttributeFormat.text,
         AttributeFormat.date_range,
@@ -414,10 +19,53 @@ function StandardFieldValue({ value: fieldValue, onSubmit, onDelete, onScopeChan
         AttributeFormat.encrypted,
         AttributeFormat.date,
         AttributeFormat.boolean,
-        AttributeFormat.rich_text
+        AttributeFormat.rich_text,
+        AttributeFormat.color
     ];
-    const attributeFormatsWithoutDS = [AttributeFormat.color, AttributeFormat.extended];
-    return (_jsxs(_Fragment, { children: [attributeFormatsWithDS.includes(attribute.format) && (_jsx(StandardFieldValueDisplayHandler, { state: state, attribute: attribute, fieldValue: fieldValue, handleSubmit: _handleSubmit })), attributeFormatsWithoutDS.includes(attribute.format) && (_jsxs(_Fragment, { children: [fieldValue.isEditing && _jsx(Dimmer, { onClick: _handleCancel }), _jsxs(FormWrapper, { "$isEditing": fieldValue.isEditing, className: fieldValue.index === 0 ? 'first-value' : '', children: [_jsx(Popover, { placement: "topLeft", open: isErrorVisible, content: errorContent, children: _jsxs(InputWrapper, { "$isEditing": fieldValue.isEditing, className: wrapperClasses, "data-testid": "input-wrapper", children: [_jsx(ValuesVersionIndicator, { activeScope: state.activeScope, style: valuesVersionIndicatorStyle }), !fieldValue.index && (_jsxs("label", { className: "attribute-label", onClick: _handleFocus, children: [localizedTranslation(state.formElement.settings.label, availableLangs), editRecordState.externalUpdate.updatedValues[attribute?.id] && (_jsx(UpdatedFieldIcon, {})), state.activeScope === VersionFieldScope.INHERITED && (_jsx(InheritedFieldLabel, { version: state.values[VersionFieldScope.INHERITED].version }))] })), _getInput(), !state.metadataEdit && _jsx(FloatingMenu, { actions: valueActions })] }) }), _jsxs(ActionsWrapper, { ref: actionsWrapperRef, children: [fieldValue.isEditing && attribute?.values_list?.enable && (_jsx(ValuesList, { attribute: attribute, valuesList: valuesList, onValueSelect: _handleSubmit, onValueCopy: _handleValueCopy })), fieldValue.isEditing && (_jsxs(ButtonsWrapper, { children: [_jsx(Button, { size: "small", onClick: _handleCancel, style: { background: '#FFF' }, children: t('global.cancel') }), (!isValuesListEnabled || isValuesListOpen) && (_jsx(Button, { type: "primary", size: "small", onClick: _handleClickSubmit, children: t('global.submit') }))] }))] })] })] }))] }));
+    const commonProps = {
+        handleSubmit,
+        attribute,
+        presentationValue,
+        isLastValueOfMultivalues,
+        removeLastValueOfMultivalues,
+        readonly,
+        label,
+        calculatedFlags,
+        inheritedFlags,
+        setActiveValue
+    };
+    let valueContent;
+    if (isValuesListEnabled) {
+        valueContent = _jsx(DSListSelect, { ...commonProps });
+    }
+    else {
+        switch (attribute.format) {
+            case AttributeFormat.text:
+                valueContent = _jsx(DSInputWrapper, { ...commonProps });
+                break;
+            case AttributeFormat.date:
+                valueContent = _jsx(DSDatePickerWrapper, { ...commonProps });
+                break;
+            case AttributeFormat.date_range:
+                valueContent = _jsx(DSRangePickerWrapper, { ...commonProps });
+                break;
+            case AttributeFormat.numeric:
+                valueContent = _jsx(DSInputNumberWrapper, { ...commonProps });
+                break;
+            case AttributeFormat.encrypted:
+                valueContent = _jsx(DSInputEncryptedWrapper, { ...commonProps });
+                break;
+            case AttributeFormat.boolean:
+                valueContent = _jsx(DSBooleanWrapper, { ...commonProps });
+                break;
+            case AttributeFormat.rich_text:
+                valueContent = _jsx(DSRichTextWrapper, { ...commonProps });
+                break;
+            case AttributeFormat.color:
+                valueContent = _jsx(DSColorPickerWrapper, { ...commonProps });
+        }
+    }
+    return (attributeFormatsWithDS.includes(attribute.format) && (_jsx(Form.Item, { name: attribute.id, ...listField, noStyle: true, children: valueContent })));
 }
 export default StandardFieldValue;
 //# sourceMappingURL=StandardFieldValue.js.map