@topconsultnpm/sdkui-react-beta 6.7.19 → 6.7.21

package/lib/components/base/TMListView.d.ts

@@ -1,4 +1,10 @@
 import React from 'react';
+interface ITMListViewHeader {
+    headerIcon?: React.ReactNode;
+    headerTitle?: string;
+    firstCounter?: React.ReactNode;
+    secondCounter?: React.ReactNode;
+}
 interface ListProps<T> {
     dataSource?: T[];
     selectedItem?: T;
@@ -14,8 +20,11 @@ interface ListProps<T> {
     orderBy?: string;
     grouping?: string;
     showId?: boolean;
-    setShowId?: React.Dispatch<React.SetStateAction<boolean>>;
     showSearch?: boolean;
+    header?: React.ReactNode;
+    headerBackGroundColor?: string;
+    customGroupingHeaders?: Array<React.ReactNode>;
+    setShowId?: React.Dispatch<React.SetStateAction<boolean>>;
     setShowSearch?: React.Dispatch<React.SetStateAction<boolean>>;
     onScrollChange?: (e: {
         x: number;
@@ -26,5 +35,6 @@ interface ListProps<T> {
     onItemDblClick?: (item: T) => void;
     itemTemplate?: (item: T) => JSX.Element;
 }
-declare const TMListView: <T>({ showId, setShowId, showSearch, setShowSearch, grouping, orderBy, id, onScrollChange, scroll, searchKeys, searchable, itemTemplate, customColor, dataSource, exprKey, onSelectionChanged, onItemClick, onItemDblClick, selectedItem }: ListProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const TMListView: <T>({ customGroupingHeaders, headerBackGroundColor, header, showId, setShowId, showSearch, setShowSearch, grouping, orderBy, id, onScrollChange, scroll, searchKeys, searchable, itemTemplate, customColor, dataSource, exprKey, onSelectionChanged, onItemClick, onItemDblClick, selectedItem }: ListProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default TMListView;
+export declare const CustomListViewHeader: React.FC<ITMListViewHeader>;

package/lib/components/base/TMListView.js

@@ -11,7 +11,7 @@ const StyledListItem = styled.div ` width: 100%; height: max-content; border-bot
 const StyledListViewContainer = styled.div ` position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; width: 100%; height: 100%; `;
 const StyledSearchContainer = styled.div ` width: 100%; height: max-content; padding: 5px; border-bottom: 1px solid #e5e5e5; display: flex; align-items: center; gap: 10px; `;
 const StyledListViewFooter = styled.div ` background-color: ${props => props.$bgColor}; width: 100%; height: 25px; padding: 5px 15px; border-top: 1px solid #e5e5e5; display: flex; align-items: center; gap: 10px; `;
-const TMListView = ({ showId, setShowId, showSearch, setShowSearch, grouping = '', orderBy, id, onScrollChange, scroll, searchKeys = [], searchable = false, itemTemplate, customColor, dataSource = [], exprKey = 'id', onSelectionChanged, onItemClick, onItemDblClick, selectedItem }) => {
+const TMListView = ({ customGroupingHeaders, headerBackGroundColor, header, showId, setShowId, showSearch, setShowSearch, grouping = '', orderBy, id, onScrollChange, scroll, searchKeys = [], searchable = false, itemTemplate, customColor, dataSource = [], exprKey = 'id', onSelectionChanged, onItemClick, onItemDblClick, selectedItem }) => {
     const listRef = useRef(null);
     const contRef = useRef(null);
     const orderRef = useRef(null);
@@ -20,7 +20,7 @@ const TMListView = ({ showId, setShowId, showSearch, setShowSearch, grouping = '
     const [searchValue, setSearchValue] = useState('');
     const [currentDataSource, setCurrentDataSource] = useState(dataSource);
     const [keys, setKeys] = useState(searchKeys);
-    const [orderedBy, setOrderedBy] = useState(orderBy || '');
+    const [orderedBy, setOrderedBy] = useState(orderBy ?? '');
     const [orderDir, setOrderDir] = useState(true);
     const [isFocused, setIsFocused] = useState(false);
     const [showOrderMenu, setShowOrderMenu] = useState(false);
@@ -245,8 +245,14 @@ const TMListView = ({ showId, setShowId, showSearch, setShowSearch, grouping = '
                 return key;
             }
         };
-        return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', width: '100%', height: 'max-content' }, children: [_jsx("div", { style: { borderBottom: `1px solid ${customColor}20`, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '5px', width: '100%', backgroundColor: `${customColor}30` }, children: _jsxs("div", { style: { width: '100%', height: 'max-content', display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 10 }, children: [_jsx("p", { children: groupingText() }), _jsx("div", { style: { width: '16px', height: '16px', display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: customColor, color: 'white', boxShadow: '1px 1px 2px #00000020', borderRadius: '30px', fontWeight: 'bold' }, children: groupByKey(currentDataSource, grouping)[key].length })] }), _jsxs("div", { style: { cursor: 'pointer' }, onClick: () => { let arr = [...openList]; arr[index] = !arr[index]; setOpenList(arr); }, children: [" ", openList[index] ? _jsx(IconUp, { fontSize: 12 }) : _jsx(IconDown, { fontSize: 12 }), " "] })] }) }), openList[index] && _jsx("div", { style: { width: '100%', height: '100%' }, children: groupByKey(currentDataSource, grouping)[key].map((data, index2) => (_jsx(StyledListItem, { "$isSelected": data === selectedItem, "$color": customColor, onClick: () => { onSelectionChanged && onSelectionChanged(data); onItemClick && onItemClick(data); }, onDoubleClick: () => { onItemDblClick && onItemDblClick(data); }, children: _jsxs("div", { style: { width: '100%', height: 'max-content', display: 'flex', flexDirection: 'column', padding: '5px 5px' }, children: [localShowId && _jsxs("p", { style: { color: data === selectedItem ? 'white' : 'black', backgroundColor: `${customColor}20`, width: '100%', padding: '2px 5px', borderRadius: '5px', height: 'max-content', textAlign: 'left' }, children: [" ", 'ID: ' + data.id, " "] }), _jsxs("div", { style: { width: '100%', height: '100%' }, children: [" ", itemTemplate ? itemTemplate(data) : _jsx("div", {})] })] }) }, index2))) })] }, index));
-    }), [currentDataSource, selectedItem, localShowId, customColor, openList, grouping]);
+        return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', width: '100%', height: 'max-content' }, children: [_jsx("div", { style: { borderBottom: `1px solid ${customColor}20`, display: 'flex', alignItems: 'center', height: '40px', justifyContent: 'space-between', padding: '5px', width: '100%', backgroundColor: headerBackGroundColor ?? `${customColor}30` }, children: _jsxs("div", { style: { width: '100%', height: 'max-content', display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }, children: [customGroupingHeaders && customGroupingHeaders.length > 0 ?
+                                customGroupingHeaders[index] ?
+                                    _jsx("div", { style: { width: '100%', height: '100%', display: 'flex', alignItems: 'center' }, children: customGroupingHeaders[index] })
+                                    :
+                                        _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 10 }, children: [_jsx("p", { children: groupingText() }), _jsx("div", { style: { width: '16px', height: '16px', display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: customColor, color: 'white', boxShadow: '1px 1px 2px #00000020', borderRadius: '30px', fontWeight: 'bold' }, children: groupByKey(currentDataSource, grouping)[key].length })] })
+                                :
+                                    _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 10 }, children: [_jsx("p", { children: groupingText() }), _jsx("div", { style: { width: '16px', height: '16px', display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: customColor, color: 'white', boxShadow: '1px 1px 2px #00000020', borderRadius: '30px', fontWeight: 'bold' }, children: groupByKey(currentDataSource, grouping)[key].length })] }), _jsxs("div", { style: { cursor: 'pointer' }, onClick: () => { let arr = [...openList]; arr[index] = !arr[index]; setOpenList(arr); }, children: [" ", openList[index] ? _jsx(IconUp, { fontSize: 12 }) : _jsx(IconDown, { fontSize: 12 }), " "] })] }) }), openList[index] && _jsx("div", { style: { width: '100%', height: '100%' }, children: groupByKey(currentDataSource, grouping)[key].map((data, index2) => (_jsx(StyledListItem, { "$isSelected": data === selectedItem, "$color": customColor, onClick: () => { onSelectionChanged && onSelectionChanged(data); onItemClick && onItemClick(data); }, onDoubleClick: () => { onItemDblClick && onItemDblClick(data); }, children: _jsxs("div", { style: { width: '100%', height: 'max-content', display: 'flex', flexDirection: 'column', padding: '5px 5px' }, children: [localShowId && _jsxs("p", { style: { color: data === selectedItem ? 'white' : 'black', backgroundColor: `${customColor}20`, width: '100%', padding: '2px 5px', borderRadius: '5px', height: 'max-content', textAlign: 'left' }, children: [" ", 'ID: ' + data.id, " "] }), _jsxs("div", { style: { width: '100%', height: '100%' }, children: [" ", itemTemplate ? itemTemplate(data) : _jsx("div", {})] })] }) }, index2))) })] }, index));
+    }), [currentDataSource, selectedItem, localShowId, customColor, openList, grouping, customGroupingHeaders]);
     // List height
     const listHeight = () => {
         if (localShowSearch) {
@@ -314,7 +320,7 @@ const TMListView = ({ showId, setShowId, showSearch, setShowSearch, grouping = '
     };
     const contextMenuItems = generateContextMenuItems(localShowSearch, localShowId, showOrderMenu, grouping, searchKeys);
     return (_jsxs(StyledListViewContainer, { ref: contRef, onContextMenu: openContextMenu, children: [(show && contextMenuItems.length > 0) && _jsx(TMContextMenu, { coords: coords, items: contextMenuItems }), showOrderOptions &&
-                _jsx(TMContextMenu, { items: orderMenuItems(), coords: { x: orderRef.current?.getBoundingClientRect().left, y: orderRef.current?.getBoundingClientRect().top - (searchKeys.length * 30) - 10 } }), localShowSearch &&
+                _jsx(TMContextMenu, { items: orderMenuItems(), coords: { x: orderRef.current?.getBoundingClientRect().left, y: orderRef.current?.getBoundingClientRect().top - (searchKeys.length * 30) - 10 } }), header && _jsx("div", { style: { width: '100%', height: '40px', backgroundColor: headerBackGroundColor ?? `${customColor}30`, marginBottom: '3px', display: 'flex', alignItems: 'center' }, children: header }), localShowSearch &&
                 _jsx(StyledSearchContainer, { children: _jsxs(StyledSearchContainer, { children: [_jsx(TMSearchBar, { marginLeft: '0px', maxWidth: '300px', searchValue: searchValue, onSearchValueChanged: (e) => setSearchValue(e) }), _jsx(TMTooltip, { content: 'Nascondi ricerca', children: _jsx(IconCloseCircle, { style: { cursor: 'pointer' }, color: 'red', fontSize: 14, onClick: () => { setSearchValue(''); setLocalShowSearch(false); } }) })] }) }), _jsx("div", { ref: listRef, onClick: () => setIsFocused(true), style: { width: '100%', overflow: 'auto', height: listHeight() }, children: currentDataSource.length > 0 ?
                     grouping.length === 0 ? memoList : groupedMemoList :
                     searchValue.length > 0 ? _jsx("div", { style: { width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: "No data found" }) :
@@ -323,3 +329,6 @@ const TMListView = ({ showId, setShowId, showSearch, setShowSearch, grouping = '
                             _jsxs("div", { style: { width: 'max-content', display: 'flex', alignItems: 'center', gap: 5 }, children: [_jsx("div", { style: { width: 'max-content' }, children: "Ordinato per" }), _jsx("div", { ref: orderRef, onClick: () => { setShowOrderOptions(!showOrderOptions); }, style: { cursor: 'pointer', fontWeight: 'bold' }, children: orderedBy.length > 0 ? orderedBy : 'Nulla' }), orderedBy.length > 0 && _jsxs(TMTooltip, { content: orderDir ? 'ASC' : 'DESC', children: [" ", orderDir ? _jsx(IconUp, { style: { cursor: 'pointer' }, onClick: () => setOrderDir(false), fontSize: 14 }) : _jsx(IconDown, { style: { cursor: 'pointer' }, onClick: () => setOrderDir(true), fontSize: 14 }), " "] }), _jsx(TMTooltip, { content: 'Annulla ordinamento', children: _jsx(IconCloseCircle, { style: { cursor: 'pointer' }, color: 'red', fontSize: 14, onClick: () => { setOrderedBy(''); setShowOrderMenu(false); setShowOrderOptions(false); } }) })] }), searchValue.length > 0 && _jsxs("div", { style: { display: 'flex', alignItems: 'center', width: '100%', justifyContent: 'flex-end', gap: 5 }, children: [_jsx(TMTooltip, { content: 'Visibili', children: _jsx(IconVisible, { fontSize: 14 }) }), currentDataSource.length] })] })] }));
 };
 export default TMListView;
+export const CustomListViewHeader = (props) => {
+    return (_jsxs("div", { style: { display: 'flex', alignItems: 'center', padding: '0 5px', gap: 5 }, children: [props.headerIcon, _jsx("p", { children: props.headerTitle }), props.firstCounter, props.secondCounter] }));
+};

package/lib/components/editors/TMDropDown.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import styled from "styled-components";
 import { FontSize, TMColors } from '../../utils/theme';
-import { StyledEditorContainer, StyledEditorIcon, StyledEditorLabel, editorColorManager } from "./TMEditorStyled";
+import { StyledEditorContainer, StyledEditorIcon, StyledEditorLabel, TMEditorsDefaultBorderRadius, editorColorManager } from "./TMEditorStyled";
 import TMLayoutContainer, { TMLayoutItem } from "../base/TMLayout";
 import TMVilViewer from "../base/TMVilViewer";
 const StyledDropDown = styled.select `
@@ -13,7 +13,7 @@ const StyledDropDown = styled.select `
     border-bottom: ${props => (props.$vil.length > 0) ? '3px' : '1px'} solid ;
     border-bottom-color: ${props => (props.$vil.length === 0) ? !props.$isModified ? TMColors.border_normal : TMColors.isModified : editorColorManager(props.$vil)};
     color: ${props => !props.disabled ? (props.$vil.length === 0) ? !props.$isModified ? TMColors.text_normal : TMColors.isModified : editorColorManager(props.$vil) : TMColors.disabled};
-    border-radius: 2px;
+    border-radius: ${props => props.$borderRadius ?? TMEditorsDefaultBorderRadius};
     min-width: 70px;
     &:focus{
         outline: none;
@@ -31,7 +31,7 @@ const StyledDropDown = styled.select `
 const TMDropDown = ({ validationItems = [], disabled = false, elementStyle, isModifiedWhen, labelPosition = 'left', label, icon, width = '100%', fontSize = FontSize.defaultFontSize, dataSource, value, onValueChanged }) => {
     const [isFocused, setIsfocused] = useState(false);
     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 }), _jsx(StyledDropDown, { value: value, onFocus: () => setIsfocused(true), onBlur: () => setIsfocused(false), "$disabled": disabled, disabled: disabled, "$fontSize": fontSize, "$width": width, "$isModified": isModifiedWhen, "$vil": validationItems, onChange: onValueChanged, children: dataSource?.map((data, index) => (_jsx("option", { value: data.value, children: data.display }, index))) }), _jsx(TMVilViewer, { vil: validationItems })] }) })] }));
+        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, children: label }), _jsx(StyledDropDown, { value: value, onFocus: () => setIsfocused(true), onBlur: () => setIsfocused(false), "$disabled": disabled, disabled: disabled, "$fontSize": fontSize, "$width": width, "$isModified": isModifiedWhen, "$vil": validationItems, onChange: onValueChanged, children: dataSource?.map((data, index) => (_jsx("option", { value: data.value, children: data.display }, index))) }), _jsx(TMVilViewer, { vil: validationItems })] }) })] }));
     };
     return (_jsx("div", { style: elementStyle, children: renderedLeftLabelTextBox() }));
 };

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

@@ -1,4 +1,6 @@
 import { ValidationItem } from '@topconsultnpm/sdk-ts-beta';
+export declare const TMEditorsDefaultBorderRadius = "5px";
+export declare const TMEditorsDefaultLabelFontSize = "0.85rem";
 export declare const editorColorManager: (validationItems: ValidationItem[]) => string;
 export declare const StyledEditorContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $width: string;
@@ -23,7 +25,7 @@ export declare const StyledEditorLabel: import("styled-components/dist/types").I
     $isFocused: boolean;
     $labelPosition: "right" | "left" | "top";
     $disabled: boolean;
-    $fontSize: string;
+    $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>, {
@@ -38,4 +40,5 @@ export declare const StyledTextareaEditor: import("styled-components/dist/types"
     $disabled: boolean;
     $isMobile?: boolean;
     $maxHeight?: string;
+    $borderRadius?: string;
 }>> & string;

package/lib/components/editors/TMEditorStyled.js

@@ -1,6 +1,8 @@
 import styled from 'styled-components';
 import { ResultTypes } from '@topconsultnpm/sdk-ts-beta';
 import { TMColors } from '../../utils/theme';
+export const TMEditorsDefaultBorderRadius = '5px';
+export const TMEditorsDefaultLabelFontSize = '0.85rem';
 export const editorColorManager = (validationItems) => {
     if (validationItems.find(item => item.ResultType === ResultTypes.ERROR))
         return TMColors.error;
@@ -22,7 +24,7 @@ export const StyledEditor = styled.input `
     border-bottom: ${props => (props.$vil.length > 0) ? '3px' : '1px'} solid ;
     border-bottom-color: ${props => (props.$vil.length === 0) ? !props.$isModified ? TMColors.border_normal : TMColors.isModified : editorColorManager(props.$vil)};
     color: ${props => !props.$disabled ? (props.$vil.length === 0) ? !props.$isModified ? 'black' : TMColors.isModified : editorColorManager(props.$vil) : TMColors.disabled};
-    border-radius: ${props => props.$borderRadius || '2px'};
+    border-radius: ${props => props.$borderRadius ?? TMEditorsDefaultBorderRadius};
     min-width: ${props => props.$isMobile && '70px'};
     &:focus{
         outline: none;
@@ -48,7 +50,7 @@ export const StyledEditorIcon = styled.div `
     transform: translateY(18px);
 `;
 export const StyledEditorLabel = styled.div `
-    font-size: ${props => props.$fontSize} ;
+    font-size: ${props => props.$fontSize ?? TMEditorsDefaultLabelFontSize} ;
     color:${props => !props.$disabled ? props.$isFocused ? TMColors.primary : props.$color ? props.$color : TMColors.label_normal : TMColors.disabled};
     padding: 0 3px;
     user-select: none;
@@ -91,7 +93,7 @@ export const StyledTextareaEditor = styled.textarea `
             : TMColors.isModified
         : editorColorManager(props.$vil)
     : TMColors.disabled};
-    border-radius: 4px; /* Slightly increased radius for smoother corners */
+    border-radius: ${props => props.$borderRadius ?? TMEditorsDefaultBorderRadius}; /* Slightly increased radius for smoother corners */
     min-width: ${props => (props.$isMobile ? '70px' : '100%')}; /* Adjust for mobile */
     max-height: ${props => props.$maxHeight || 'auto'}; 
     &:focus {

package/lib/components/editors/TMSummary.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from 'styled-components';
 import { FontSize, TMColors } from '../../utils/theme';
-import { StyledEditorContainer, StyledEditorIcon, StyledEditorLabel, editorColorManager } from './TMEditorStyled';
+import { StyledEditorContainer, StyledEditorIcon, StyledEditorLabel, TMEditorsDefaultBorderRadius, editorColorManager } from './TMEditorStyled';
 import { IconClearButton, IconPencil, SDKUI_Localizator } from '../../helper';
 import TMLayoutContainer, { TMLayoutItem } from '../base/TMLayout';
 import TMVilViewer from '../base/TMVilViewer';
@@ -16,7 +16,7 @@ const StyledSummaryTemplateInput = styled.div `
     border-bottom: ${props => !props.$showBorder ? '' : (props.$vil.length > 0) ? '3px solid' : '1px solid'} ;
     border-bottom-color: ${props => (props.$vil.length === 0) ? !props.$isModified ? TMColors.border_normal : TMColors.isModified : editorColorManager(props.$vil)};
     color: ${props => !props.$disabled ? (props.$vil.length === 0) ? !props.$isModified ? 'black' : TMColors.isModified : editorColorManager(props.$vil) : TMColors.disabled};
-    border-radius: ${props => !props.$showBorder ? props.$borderRadius : '2px'};
+    border-radius: ${props => !props.$showBorder ? props.$borderRadius : TMEditorsDefaultBorderRadius};
     display: flex;
     align-items: center;
     /* min-width: 70px; */
@@ -55,7 +55,7 @@ const TMSummary = ({ labelColor, hasValue, borderRadius = '4px', validationItems
                             })] })] }) }));
     };
     const renderLabel = () => {
-        return (_jsx(StyledEditorLabel, { "$color": labelColor, "$isFocused": false, "$labelPosition": labelPosition, "$disabled": disabled, "$fontSize": fontSize, children: _jsx("div", { style: { flexDirection: "row", display: "flex", alignItems: "start", justifyContent: "start" }, children: label }) }));
+        return (_jsx(StyledEditorLabel, { "$color": labelColor, "$isFocused": false, "$labelPosition": labelPosition, "$disabled": disabled, children: _jsx("div", { style: { flexDirection: "row", display: "flex", alignItems: "start", justifyContent: "start" }, children: label }) }));
     };
     const renderSummary = () => {
         return (_jsxs(TMLayoutContainer, { direction: 'horizontal', children: [icon && _jsx(TMLayoutItem, { width: '20px', children: icon && _jsx(StyledEditorIcon, { "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: icon }) }), _jsx(TMLayoutItem, { children: _jsxs(StyledEditorContainer, { "$width": width, children: [label && renderLabel(), renderTemplateField(), _jsx(TMVilViewer, { vil: validationItems })] }) })] }));

package/lib/components/editors/TMTextArea.js

@@ -64,7 +64,7 @@ const TMTextArea = (props) => {
                 }), formulaItems.length > 0 && clicked && (_jsx(TMContextMenu, { menuData: formulaMenuItems, top: points.y, left: points.x, onMenuItemClick: (formula) => insertText(formula) })), _jsx(TMVilViewer, { vil: validationItems })] });
     };
     const renderedLeftLabelTextArea = () => {
-        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 ?? '' }), renderTextArea()] }) })] }));
+        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, children: label ?? '' }), renderTextArea()] }) })] }));
     };
     return (_jsx("div", { style: elementStyle, children: renderedLeftLabelTextArea() }));
 };

package/lib/components/editors/TMTextBox.js

@@ -151,7 +151,7 @@ const TMTextBox = ({ autoFocus, maxLength, labelColor, precision, scale, showCle
                             })] }), 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, { "$color": labelColor, "$isFocused": isFocused, "$labelPosition": labelPosition, "$disabled": disabled, "$fontSize": fontSize, children: label }), renderInputField()] }) })] }));
+        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, { "$color": labelColor, "$isFocused": isFocused, "$labelPosition": labelPosition, "$disabled": disabled, children: label }), renderInputField()] }) })] }));
     };
     return (_jsx("div", { style: elementStyle, children: renderedLeftLabelTextBox() }));
 };

package/lib/components/index.d.ts

@@ -3,7 +3,7 @@ export { default as TMButton, TMButtonNew } from './base/TMButton';
 export { default as TMClosableList } from './base/TMClosableList';
 export * from './base/TMContextMenu';
 export { default as TMDropDownMenu } from './base/TMDropDownMenu';
-export { default as TMListView } from './base/TMListView';
+export * from './base/TMListView';
 export { default as TMList } from './base/TMList';
 export { default as TMModal } from './base/TMModal';
 export * from './base/TMPopUp';

package/lib/components/index.js

@@ -5,7 +5,8 @@ export { default as TMButton, TMButtonNew } from './base/TMButton';
 export { default as TMClosableList } from './base/TMClosableList';
 export * from './base/TMContextMenu';
 export { default as TMDropDownMenu } from './base/TMDropDownMenu';
-export { default as TMListView } from './base/TMListView';
+export * from './base/TMListView';
+// export { default as TMListView } from './base/TMListView'
 export { default as TMList } from './base/TMList';
 export { default as TMModal } from './base/TMModal';
 export * from './base/TMPopUp';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react-beta",
-    "version": "6.7.19",
+    "version": "6.7.21",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
@@ -29,7 +29,6 @@
     ],
     "dependencies": {
         "@topconsultnpm/sdk-ts-beta": "^6.7.17",
-        "@topconsultnpm/sdkui-react-beta": "^6.7.10",
         "buffer": "^6.0.3",
         "devextreme": "24.1.6",
         "devextreme-react": "24.1.6",