@topconsultnpm/sdkui-react-beta 6.9.34 → 6.9.35

package/lib/components/editors/TMEditorStyled.d.ts

@@ -28,10 +28,6 @@ export declare const StyledEditorLabel: import("styled-components/dist/types").I
     $fontSize?: string;
     $color?: string;
 }>> & string;
-export declare const StyledEditorButtonIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $index: number;
-    $transform: string;
-}>> & string;
 export declare const StyledTextareaEditor: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, {
     $vil: ValidationItem[];
     $width: string;

package/lib/components/editors/TMEditorStyled.js

@@ -62,23 +62,9 @@ export const StyledEditorLabel = styled.div `
     position: relative;
     z-index: 1;
 `;
-export const StyledEditorButtonIcon = styled.div `
-    color: ${TMColors.button_icon};
-    position: absolute;
-    right: ${(props) => (props.$index + 1) * 10 + (10 * props.$index)}px;
-    font-size: 1rem;
-    transform: ${props => `translateY(${props.$transform})`};
-    cursor: pointer;
-    &:focus{
-        outline: none;
-        background-image: linear-gradient(white, #E4E9F7);
-        border-bottom: 2px solid;
-        border-bottom-color: ${TMColors.primary};
-     }
-`;
 export const StyledTextareaEditor = styled.textarea `
     width: ${props => props.$width};
-    padding: 8px 13px; 
+    padding: 5px 5px 5px 13px;
     border: 1px solid;
     border-color: ${props => props.$isModified ? TMColors.isModified : TMColors.border_normal};
     border-bottom: ${props => (props.$vil.length > 0) ? '3px' : '1px'} solid;

package/lib/components/editors/TMTextArea.js

@@ -1,17 +1,32 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useEffect, useRef } from 'react';
-import { StyledEditorButtonIcon, StyledEditorContainer, StyledEditorIcon, StyledEditorLabel, StyledTextareaEditor } from './TMEditorStyled';
-import { FontSize } from '../../utils/theme';
+import { StyledEditorContainer, StyledEditorIcon, StyledEditorLabel, StyledTextareaEditor } from './TMEditorStyled';
+import { FontSize, TMColors } from '../../utils/theme';
 import TMContextMenu, { useContextMenu } from '../base/TMContextMenuOLD';
 import { TMExceptionBoxManager } from '../base/TMPopUp';
 import TMLayoutContainer, { TMLayoutItem } from '../base/TMLayout';
 import TMVilViewer from '../base/TMVilViewer';
 import TMTooltip from '../base/TMTooltip';
 import { DeviceType, useDeviceType } from '../base/TMDeviceProvider';
+import { IconClearButton } from '../../helper';
+import styled from 'styled-components';
+const StyledTextAreaEditorButton = styled.div `
+    color: ${TMColors.button_icon};
+    display: flex;
+    align-items: center;
+    position: relative;
+    cursor: pointer;
+    &:focus{
+        outline: none;
+        background-image: linear-gradient(white, #E4E9F7);
+        border-bottom: 2px solid;
+        border-bottom-color: ${TMColors.primary};
+     }
+`;
 // Define the TMTextArea component
 const TMTextArea = (props) => {
     // Extract properties from the props object
-    const { label = '', value = '', width = '100%', height = 'auto', autoFocus = false, validationItems = [], disabled = false, isModifiedWhen = false, fontSize = FontSize.defaultFontSize, elementStyle = {}, icon = null, labelPosition = 'left', readOnly = false, onValueChanged, onBlur, placeHolder, formulaItems = [], buttons = [], maxHeight = 'auto', rows, maxLength, resize = true } = props;
+    const { label = '', value = '', width = '100%', height = 'auto', autoFocus = false, showClearButton, validationItems = [], disabled = false, isModifiedWhen = false, fontSize = FontSize.defaultFontSize, elementStyle = {}, icon = null, labelPosition = 'left', readOnly = false, onValueChanged, onBlur, placeHolder, formulaItems = [], buttons = [], maxHeight = 'auto', rows, maxLength, resize = true } = props;
     // Reference to the textarea DOM element
     const inputRef = useRef(null);
     // Stores the textarea is focused
@@ -119,9 +134,13 @@ const TMTextArea = (props) => {
                         const y = e.clientY - bounds.top;
                         // set the x and y coordinates of our users right click
                         setPoints({ x, y });
-                    }, "$isMobile": deviceType === DeviceType.MOBILE, "$maxHeight": maxHeight, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, "$fontSize": fontSize, "$width": width, "$resize": resize }), buttons.map((buttonItem, index) => {
-                    return (_jsx(StyledEditorButtonIcon, { onClick: buttonItem.onClick, "$index": index, "$transform": '-26px', children: _jsx(TMTooltip, { content: buttonItem.text, children: buttonItem.icon }) }, index));
-                }), formulaItems.length > 0 && clicked && (_jsx(TMContextMenu, { menuData: formulaMenuItems, top: points.y, left: points.x, onMenuItemClick: (formula) => insertText(formula) })), _jsx(TMVilViewer, { vil: validationItems })] });
+                    }, "$isMobile": deviceType === DeviceType.MOBILE, "$maxHeight": maxHeight, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, "$fontSize": fontSize, "$width": width, "$resize": resize }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', position: 'absolute', right: '6px', top: label.length > 0 ? '20px' : '7px', pointerEvents: disabled ? 'none' : 'auto', opacity: disabled ? 0.4 : 1 }, children: [showClearButton && currentValue &&
+                            _jsx(StyledTextAreaEditorButton, { onClick: () => {
+                                    onValueChanged?.({ target: { value: undefined } });
+                                    onBlur?.(undefined);
+                                }, children: _jsx(IconClearButton, {}) }), buttons.map((buttonItem, index) => {
+                            return (_jsx(StyledTextAreaEditorButton, { onClick: buttonItem.onClick, children: _jsx(TMTooltip, { content: buttonItem.text, children: buttonItem.icon }) }, buttonItem.text));
+                        })] }), formulaItems.length > 0 && clicked && (_jsx(TMContextMenu, { menuData: formulaMenuItems, top: points.y, left: points.x, onMenuItemClick: (formula) => insertText(formula) })), _jsx(TMVilViewer, { vil: validationItems })] });
     };
     // Layout for the textarea with a left-aligned label
     const renderedLeftLabelTextArea = () => {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react-beta",
-    "version": "6.9.34",
+    "version": "6.9.35",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",