@topconsultnpm/sdkui-react-beta 6.6.18 → 6.6.20

package/lib/components/editors/TMDateBox.js

@@ -1,11 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
 import { DateBox } from 'devextreme-react';
-import { Button } from 'devextreme-react/cjs/date-box';
-import { DateDisplayTypes, Globalization, IconLayerGroup } from '../../helper';
+import { DateDisplayTypes, Globalization } from '../../helper';
 import { TMColors } from '../../utils/theme';
 import TMVilViewer from '../base/TMVilViewer';
-import ReactDOMServer from 'react-dom/server';
 const TMDateBox = (props) => {
     useEffect(() => {
         let htmlElement = dateBoxRef?.current?.instance().element();
@@ -50,7 +48,7 @@ const TMDateBox = (props) => {
             return "datetime";
         return props.dateDisplayType == DateDisplayTypes.Date ? "date" : "time";
     };
-    return (_jsxs(_Fragment, { children: [_jsxs(DateBox, { ref: dateBoxRef, 
+    return (_jsxs(_Fragment, { children: [_jsx(DateBox, { ref: dateBoxRef, 
                 // defaultValue={props.defaultValue}
                 showClearButton: props.showClearButton, dateSerializationFormat: props.useDateSerializationFormat ? 'yyyy-MM-ddTHH:mm:ss' : undefined, disabled: props.disabled, displayFormat: props.displayFormat ?? Globalization.getDateDisplayFormat(props.dateDisplayType), dropDownOptions: dropDownOptions, label: props.label, labelMode: 'static', type: getType(), useMaskBehavior: true, height: '28px', value: props.value, width: props.width, valueChangeEvent: 'keyup input change', onValueChange: (e) => { props.onValueChange?.(e); }, onKeyUp: (e) => {
                     if (e.event?.code == "Space") {
@@ -67,12 +65,6 @@ const TMDateBox = (props) => {
                     const currentDate = new Date(e.value);
                     currentDate.setHours(0, 0, 0, 0);
                     e.component.option("value", currentDate.toISOString());
-                }, children: [props.buttons?.map((btn) => {
-                        return (_jsx(Button, { name: btn.text, location: "after", options: {
-                                icon: ReactDOMServer.renderToString(_jsx(IconLayerGroup, {})),
-                                stylingMode: 'text',
-                                onClick: () => btn?.onClick?.()
-                            } }, btn.text));
-                    }), _jsx(Button, { name: "dropDown" })] }), _jsx(TMVilViewer, { vil: props.validationItems })] }));
+                } }), _jsx(TMVilViewer, { vil: props.validationItems })] }));
 };
 export default TMDateBox;

package/lib/components/editors/TMTextBox.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useRef } from 'react';
 import styled from 'styled-components';
-import { StyledEditor, StyledEditorButtonIcon, StyledEditorContainer, StyledEditorIcon, StyledEditorLabel, editorColorManager } from './TMEditorStyled';
+import { StyledEditor, StyledEditorContainer, StyledEditorIcon, StyledEditorLabel, editorColorManager } from './TMEditorStyled';
 import { FontSize, TMColors } from '../../utils/theme';
 import { genUniqueId, IconClearButton, IconHide, IconShow, useWindowWidth } from '../../helper';
 import ShowAlert from '../base/TMAlert';
@@ -18,6 +18,19 @@ const StyledShowPasswordIcon = styled.div `
     transform: translateY(-25px);
     cursor: pointer;
 `;
+const StyledTextBoxEditorButton = 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};
+     }
+`;
 const TMTextBox = ({ autoFocus, maxLength, precision, scale, showClearButton, validationItems = [], label = '', readOnly = false, formulaItems = [], buttons = [], isModifiedWhen, placeHolder, elementStyle, width = '100%', maxValue, fontSize = FontSize.defaultFontSize, icon, labelPosition = 'left', value, disabled = false, type = 'text', onValueChanged, onBlur }) => {
     const [initialType, setInitialType] = useState(type);
     const [currentType, setCurrentType] = useState(type);
@@ -128,12 +141,13 @@ const TMTextBox = ({ autoFocus, maxLength, precision, scale, showClearButton, va
                                 e.preventDefault();
                         }
                     }, "$isMobile": screenWidth < 640, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, "$fontSize": fontSize, "$maxValue": maxValue, "$width": width, "$type": currentType }), initialType === 'password' && currentValue && _jsx(StyledShowPasswordIcon, { onClick: toggleShowPassword, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: showPasswordIcon() }), initialType !== 'password' &&
-                    buttons.map((buttonItem, index) => {
-                        return (_jsx(StyledEditorButtonIcon, { onClick: buttonItem.onClick, "$index": index, "$transform": '-26px', children: _jsx(TMTooltip, { content: buttonItem.text, children: buttonItem.icon }) }, index));
-                    }), initialType !== 'password' && showClearButton && currentValue && _jsx(StyledEditorButtonIcon, { "$index": buttons.length, "$transform": '-26px', onClick: () => {
-                        onValueChanged?.({ target: { value: undefined } });
-                        onBlur?.(undefined);
-                    }, children: _jsx(IconClearButton, {}) }), formulaItems.length > 0 && (_jsx(ContextMenu, { dataSource: formulaMenuItems, target: `#text-${id}`, onItemClick: (e) => { insertText(e.itemData?.text ?? ''); } })), _jsx(TMVilViewer, { vil: validationItems })] }));
+                    _jsxs("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', position: 'absolute', right: '6px', top: '7px', pointerEvents: disabled ? 'none' : 'auto', opacity: disabled ? 0.4 : 1 }, children: [showClearButton && currentValue &&
+                                _jsx(StyledTextBoxEditorButton, { onClick: () => {
+                                        onValueChanged?.({ target: { value: undefined } });
+                                        onBlur?.(undefined);
+                                    }, children: _jsx(IconClearButton, {}) }), buttons.map((buttonItem, index) => {
+                                return (_jsx(StyledTextBoxEditorButton, { onClick: buttonItem.onClick, children: _jsx(TMTooltip, { content: buttonItem.text, children: buttonItem.icon }) }, buttonItem.text));
+                            })] }), formulaItems.length > 0 && (_jsx(ContextMenu, { dataSource: formulaMenuItems, target: `#text-${id}`, onItemClick: (e) => { insertText(e.itemData?.text ?? ''); } })), _jsx(TMVilViewer, { vil: validationItems })] }));
     };
     const renderedLeftLabelTextBox = () => {
         return (_jsxs(TMLayoutContainer, { direction: 'horizontal', children: [icon && _jsx(TMLayoutItem, { width: '20px', children: _jsx(StyledEditorIcon, { "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: icon }) }), _jsx(TMLayoutItem, { children: _jsxs(StyledEditorContainer, { "$width": width, children: [label && _jsx(StyledEditorLabel, { "$isFocused": isFocused, "$labelPosition": labelPosition, "$disabled": disabled, "$fontSize": fontSize, children: label }), renderInputField()] }) })] }));

package/package.json

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