@topconsultnpm/sdkui-react-beta 6.17.0 → 6.17.2

package/lib/components/base/TMToggleButton.js

@@ -5,46 +5,46 @@ import { getColor } from '../../helper';
 import styled from 'styled-components';
 import TMTooltip from './TMTooltip';
 // #region Style
-const StyledToggleButtonWrapper = styled.div `
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    width: 100%;
+const StyledToggleButtonWrapper = styled.div `
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    width: 100%;
 `;
-const StyledToggleButtonContainer = styled.div `
-  width: 36px;
-  height: 20px;
-  background-color: ${props => !props.$value ? 'rgb(194, 194, 194)' : getColor(props.$color)};
-  border-radius: 3px;
-  transition: all 100ms ease;
-  padding: 3px;
-  cursor: pointer;
-  position: relative;
+const StyledToggleButtonContainer = styled.div `
+  width: 36px;
+  height: 20px;
+  background-color: ${props => !props.$value ? 'rgb(194, 194, 194)' : getColor(props.$color)};
+  border-radius: 3px;
+  transition: all 100ms ease;
+  padding: 3px;
+  cursor: pointer;
+  position: relative;
 `;
-const StyledToggleButtonSwitch = styled.div `
-  width: 50%;
-  height: 100%;
-  border-radius: 2px;
-  background-color: white;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  float: right;
-  transition: all 100ms ease;
-  z-index: 100;
-  ${props => props.$value ? '' : 'float: left;'}
+const StyledToggleButtonSwitch = styled.div `
+  width: 50%;
+  height: 100%;
+  border-radius: 2px;
+  background-color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  float: right;
+  transition: all 100ms ease;
+  z-index: 100;
+  ${props => props.$value ? '' : 'float: left;'}
 `;
-const StyledToggleValue = styled.p `
-    font-size: 0.5rem;
-    color: black;
-    font-weight: bold;
+const StyledToggleValue = styled.p `
+    font-size: 0.5rem;
+    color: black;
+    font-weight: bold;
 `;
-const StyledToggleButtonLabel = styled.div `
-    font-size: ${FontSize.defaultFontSize};
-    margin-left: 5px;
-    width: max-content;
-    color: ${props => getColor(props.$color)};
+const StyledToggleButtonLabel = styled.div `
+    font-size: ${FontSize.defaultFontSize};
+    margin-left: 5px;
+    width: max-content;
+    color: ${props => getColor(props.$color)};
 `;
 const TMToggleButton = ({ color = 'primary', value, label, elementStyle, fontSize = FontSize.defaultFontSize, isModifiedWhen, showTooltip = false, onValueChanged }) => {
     const [currentColor, setCurrentColor] = useState(color);

package/lib/components/base/TMToolbarCard.js

@@ -5,43 +5,43 @@ import { IconArrowLeft, SDKUI_Localizator } from '../../helper';
 import { TMColors } from '../../utils/theme';
 import { StyledBadge } from './Styled';
 import TMButton from './TMButton';
-const StyledSearchCard = styled.div `
-    width: 100%;
-    height: 100%;
-    font-size: 1rem;
-    border-radius: 12px;
-    border: 1px solid ${() => TMColors.primaryColor}50 ;
+const StyledSearchCard = styled.div `
+    width: 100%;
+    height: 100%;
+    font-size: 1rem;
+    border-radius: 12px;
+    border: 1px solid ${() => TMColors.primaryColor}50 ;
 `;
-const StyledSearchCardHeader = styled.div `
-    width:100% ;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    padding: 4px 10px;
-    background-color: ${props => props.$backgroundColor ?? TMColors.backgroundColorHeader};
-    color: ${props => props.$color ?? TMColors.colorHeader};
-    border-top-right-radius: 10px;
-    border-top-left-radius: 10px;
-    overflow: hidden;
-    position: sticky;
-    top: 0;
-    font-weight: 600;
-    height: 35px;
+const StyledSearchCardHeader = styled.div `
+    width:100% ;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 4px 10px;
+    background-color: ${props => props.$backgroundColor ?? TMColors.backgroundColorHeader};
+    color: ${props => props.$color ?? TMColors.colorHeader};
+    border-top-right-radius: 10px;
+    border-top-left-radius: 10px;
+    overflow: hidden;
+    position: sticky;
+    top: 0;
+    font-weight: 600;
+    height: 35px;
 `;
-const StyledSearchCardContent = styled.div `
-    width: 100%;
-    height: ${props => props.$height};
-    overflow: hidden;
-    background-color: ${props => props.$backgroundColor};
-    border-bottom-right-radius: 10px;
-    border-bottom-left-radius: 10px;
-    padding: ${props => props.$padding};
-    display: flex;
-    justify-content: space-between;
-    
-    position: relative;
-    user-select: none;
+const StyledSearchCardContent = styled.div `
+    width: 100%;
+    height: ${props => props.$height};
+    overflow: hidden;
+    background-color: ${props => props.$backgroundColor};
+    border-bottom-right-radius: 10px;
+    border-bottom-left-radius: 10px;
+    padding: ${props => props.$padding};
+    display: flex;
+    justify-content: space-between;
+    
+    position: relative;
+    user-select: none;
 `;
 const TMToolbarCard = ({ items = [], onItemClick, selectedItem, showPanel, color = TMColors.colorHeader, backgroundColor = TMColors.backgroundColorHeader, backgroundColorContainer, children, showHeader = true, title, totalItems, displayedItemsCount, toolbar, padding = '3px', onBack, onClose, onHeaderDoubleClick }) => {
     return (_jsxs(StyledSearchCard, { children: [showHeader && _jsx(StyledSearchCardHeader, { "$backgroundColor": backgroundColor, "$color": color, onDoubleClick: () => { if (onHeaderDoubleClick)

package/lib/components/base/TMTreeView.js

@@ -227,16 +227,16 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
     return (_jsx("div", { style: { height: '100%', width: '100%', overflowY: 'auto', padding: '2px 5px 2px 2px' }, children: renderTree(dataSource) }));
 };
 export default TMTreeView;
-export const StyledTreeNode = styled.div `
-	display: flex;
-	flex-direction: row;
-	width: 100%;
-	height: 25px;
-	gap: 5px;
-	align-items: center;
-	background: ${(props) => props.$isSelected ? 'oklch(from var(--dx-color-primary) l c h / .2) !important' : 'transparent'};
-
-    /* &:hover {
-        background: ${() => `${TMColors.primaryColor}33`};
-    } */
+export const StyledTreeNode = styled.div `
+	display: flex;
+	flex-direction: row;
+	width: 100%;
+	height: 25px;
+	gap: 5px;
+	align-items: center;
+	background: ${(props) => props.$isSelected ? 'oklch(from var(--dx-color-primary) l c h / .2) !important' : 'transparent'};
+
+    /* &:hover {
+        background: ${() => `${TMColors.primaryColor}33`};
+    } */
 `;

package/lib/components/base/TMUserAvatar.js

@@ -6,13 +6,13 @@ const TMUserAvatar = (props) => {
     const initials = extractInitialsFromName(displayName ?? '-');
     const bgColor = getAvatarColor(nameForColorCalculation ?? '-');
     if (returnType === 'svg') {
-        return `
-            <svg width="30" height="30" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
-                <circle cx="20" cy="20" r="20" fill="${bgColor}" />
-                <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" fill="#fff" font-size="14" font-weight="bold" font-family="sans-serif">
-                    ${initials}
-                </text>
-            </svg>
+        return `
+            <svg width="30" height="30" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+                <circle cx="20" cy="20" r="20" fill="${bgColor}" />
+                <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" fill="#fff" font-size="14" font-weight="bold" font-family="sans-serif">
+                    ${initials}
+                </text>
+            </svg>
         `.trim();
     }
     return (_jsx(TMTooltip, { content: tooltipName ?? displayName, children: _jsx("div", { style: {

package/lib/components/base/TMWaitPanel.js

@@ -2,29 +2,29 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from 'styled-components';
 import TMLayoutContainer from './TMLayout';
 import { SDKUI_Localizator } from '../../helper';
-const StyledWaitPanelOverlay = styled.div `
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 1501;
-    transition: all; 
-    overflow: visible; 
-    background-color: rgba(0, 0, 0, 0.4);
+const StyledWaitPanelOverlay = styled.div `
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1501;
+    transition: all; 
+    overflow: visible; 
+    background-color: rgba(0, 0, 0, 0.4);
 `;
-const StyledWaitPanel = styled.div ` 
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 300px; 
-    height: ${(props) => props.$height};
-    background: white; 
-    border-radius: 8px; 
-    padding: 10px; 
-    text-align: center; 
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
+const StyledWaitPanel = styled.div ` 
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 300px; 
+    height: ${(props) => props.$height};
+    background: white; 
+    border-radius: 8px; 
+    padding: 10px; 
+    text-align: center; 
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
 `;
 const StyledTitle = styled.h2 ` margin: 0; font-size: 1.5em; color: #333; `;
 const StyledProgressBarContainer = styled.div ` width: 100%; height: 20px; background: #e0e0e0; border-radius: 10px; overflow: hidden; margin: 20px 0; `;

package/lib/components/choosers/TMCultureIDPicker.js

@@ -15,44 +15,44 @@ const CULTUREIDs_DATASOURCE = [
     { value: CultureIDs.Es_ES, display: "Español", icon: _jsx("img", { src: getCultureIDImg(CultureIDs.Es_ES), alt: "Lang", width: 16, height: 16 }) },
     { value: CultureIDs.De_DE, display: "Deutsch", icon: _jsx("img", { src: getCultureIDImg(CultureIDs.De_DE), alt: "Lang", width: 16, height: 16 }) },
 ];
-const PickerContainer = styled.div `
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    padding: 20px;
+const PickerContainer = styled.div `
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 20px;
 `;
-const ItemsContainer = styled.div `
-    display: flex;
-    flex-wrap: wrap;
-    gap: 15px;
-    justify-content: center;
+const ItemsContainer = styled.div `
+    display: flex;
+    flex-wrap: wrap;
+    gap: 15px;
+    justify-content: center;
 `;
-const CultureItem = styled.div `
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    text-align: center;
-    font-size: 0.9em;
-    padding: 10px 15px;
-    border-radius: 8px;
-    border: 2px solid transparent;
-    transition: all 0.2s ease-in-out;
-    width: 120px;
-
-    &:hover {
-        background-color: #f0f0f0;
-    }
-
-    ${props => props.$isSelected && `
-        border-color: #007bff;
-        background-color: #e6f2ff;
-    `}
+const CultureItem = styled.div `
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    text-align: center;
+    font-size: 0.9em;
+    padding: 10px 15px;
+    border-radius: 8px;
+    border: 2px solid transparent;
+    transition: all 0.2s ease-in-out;
+    width: 120px;
+
+    &:hover {
+        background-color: #f0f0f0;
+    }
+
+    ${props => props.$isSelected && `
+        border-color: #007bff;
+        background-color: #e6f2ff;
+    `}
 `;
-const FlagIcon = styled.div `
-    margin-bottom: 5px;
-    font-size: 2em;
+const FlagIcon = styled.div `
+    margin-bottom: 5px;
+    font-size: 2em;
 `;
 const TMCultureIDPicker = ({ selectedValue, onSelectCultureID, placeHolder, width = '100%', icon, backgroundColor, readOnly = false, openChooserBySingleClick = false, buttons = [], elementStyle, isModifiedWhen, label, showClearButton = false, validationItems = [], onValueChanged }) => {
     const [showPicker, setShowPicker] = useState(false);

package/lib/components/choosers/TMDataListItemPicker.js

@@ -3,64 +3,64 @@ import { useEffect, useState } from 'react';
 import styled, { keyframes } from 'styled-components';
 import { DataListCacheService, SDK_Localizator } from '@topconsultnpm/sdk-ts-beta';
 import { SDKUI_Localizator, TMImageLibrary } from '../../helper';
-const PickerContainer = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  padding: 5px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
+const PickerContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 5px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
 `;
-const ItemsContainer = styled.div `
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  gap: 3px;
-  align-items: center;
-  overflow-x: auto;
-  padding: 10px;
+const ItemsContainer = styled.div `
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: 3px;
+  align-items: center;
+  overflow-x: auto;
+  padding: 10px;
 `;
-const slideIn = keyframes `
-  from {
-    opacity: 0;
-    transform: translateX(-50px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
+const slideIn = keyframes `
+  from {
+    opacity: 0;
+    transform: translateX(-50px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
 `;
-const StatusItem = styled.div `
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  text-align: center;
-  font-size: 0.8em;
-  padding: 5px 10px;
-  border-radius: 8px;
-  border: 2px solid transparent;
-  transition: all 0.2s ease-in-out;
-  flex-shrink: 0;
-  
-  // Aggiungi l'animazione con un ritardo basato sull'indice
-  animation: ${slideIn} 0.5s ease-out forwards;
-  animation-delay: ${props => props.$index * 0.1}s;
-  opacity: 0; // Inizialmente l'elemento è invisibile
-
-  &:hover {
-    background-color: #f0f0f0;
-  }
-
-  ${props => props.$isSelected && `
-    border-color: #007bff;
-    background-color: #e6f2ff;
-  `}
+const StatusItem = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  text-align: center;
+  font-size: 0.8em;
+  padding: 5px 10px;
+  border-radius: 8px;
+  border: 2px solid transparent;
+  transition: all 0.2s ease-in-out;
+  flex-shrink: 0;
+  
+  // Aggiungi l'animazione con un ritardo basato sull'indice
+  animation: ${slideIn} 0.5s ease-out forwards;
+  animation-delay: ${props => props.$index * 0.1}s;
+  opacity: 0; // Inizialmente l'elemento è invisibile
+
+  &:hover {
+    background-color: #f0f0f0;
+  }
+
+  ${props => props.$isSelected && `
+    border-color: #007bff;
+    background-color: #e6f2ff;
+  `}
 `;
-const Label = styled.div `
-  font-weight: bold;
-  margin-bottom: 5px;
+const Label = styled.div `
+  font-weight: bold;
+  margin-bottom: 5px;
 `;
 const TMDataListItemPicker = ({ dataListID, selectedValue, onItemSelect }) => {
     const [dataList, setDataList] = useState(undefined);

package/lib/components/editors/TMCheckBox.js

@@ -2,32 +2,32 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { FontSize, TMColors } from '../../utils/theme';
 import styled from 'styled-components';
-const StyledCheckBoxContainer = styled.div `
-    display: flex;
-    flex-direction: ${props => props.$labelPosition === 'right' ? 'row-reverse' : 'row'} ;
-    justify-content: flex-start;
-    align-items: center;
-    width: fit-content;
-    cursor: ${props => !props.$disabled && 'pointer'};
+const StyledCheckBoxContainer = styled.div `
+    display: flex;
+    flex-direction: ${props => props.$labelPosition === 'right' ? 'row-reverse' : 'row'} ;
+    justify-content: flex-start;
+    align-items: center;
+    width: fit-content;
+    cursor: ${props => !props.$disabled && 'pointer'};
 `;
-const StyledCheckBoxLabel = styled.div `
-    margin-right:  ${props => props.$labelPosition === 'left' ? '5px' : '0'};
-    margin-left:  ${props => props.$labelPosition === 'right' ? '5px' : '0'};
-    color: ${props => !props.$disabled ? props.$isModifiedWhen ? TMColors.isModified : props.$labelColor ? props.$labelColor : TMColors.text_normal : TMColors.disabled};
-    font-size: ${props => props.$fontSize};
-    user-select: none;
-    &:focus{
-        outline: none;
-        background-image: linear-gradient(white, #E4E9F7);
-        border-bottom: 2px solid;
-        border-bottom-color: ${props => !props.$isModifiedWhen ? TMColors.primary : TMColors.isModified};
-    }
+const StyledCheckBoxLabel = styled.div `
+    margin-right:  ${props => props.$labelPosition === 'left' ? '5px' : '0'};
+    margin-left:  ${props => props.$labelPosition === 'right' ? '5px' : '0'};
+    color: ${props => !props.$disabled ? props.$isModifiedWhen ? TMColors.isModified : props.$labelColor ? props.$labelColor : TMColors.text_normal : TMColors.disabled};
+    font-size: ${props => props.$fontSize};
+    user-select: none;
+    &:focus{
+        outline: none;
+        background-image: linear-gradient(white, #E4E9F7);
+        border-bottom: 2px solid;
+        border-bottom-color: ${props => !props.$isModifiedWhen ? TMColors.primary : TMColors.isModified};
+    }
 `;
-const StyledCheckbox = styled.input `
-    accent-color: ${props => !props.$disabled ? props.$isModifiedWhen ? TMColors.isModified : TMColors.primary : TMColors.disabled};
-    width: 14px;
-    height: 14px;
-    cursor: ${props => !props.$disabled && 'pointer'};
+const StyledCheckbox = styled.input `
+    accent-color: ${props => !props.$disabled ? props.$isModifiedWhen ? TMColors.isModified : TMColors.primary : TMColors.disabled};
+    width: 14px;
+    height: 14px;
+    cursor: ${props => !props.$disabled && 'pointer'};
 `;
 const TMCheckBox = ({ labelColor, isModifiedWhen, elementStyle, disabled = false, label, value, labelPosition = 'right', fontSize = FontSize.defaultFontSize, onValueChanged }) => {
     const [initialValue, setInitialValue] = useState(value);

package/lib/components/editors/TMDropDown.js

@@ -6,53 +6,53 @@ import { StyledEditorContainer, StyledEditorIcon, StyledEditorLabel, TMEditorsDe
 import TMLayoutContainer, { TMLayoutItem } from "../base/TMLayout";
 import TMVilViewer from "../base/TMVilViewer";
 import TMTooltip from "../base/TMTooltip";
-const StyledDropDownWrapper = styled.div `
-  position: relative;
-  width: ${props => props.$width};
-  display: flex;
-  align-items: center;
+const StyledDropDownWrapper = styled.div `
+  position: relative;
+  width: ${props => props.$width};
+  display: flex;
+  align-items: center;
 `;
-const StyledDropDown = styled.select `
-    width: 100%;
-    padding: 5px 35px 3px 9px; /* padding-right leaves space for buttons + custom arrow */
-    border: 1px solid;
-    border-color: ${props => props.$isModified ? TMColors.isModified : TMColors.border_normal};
-    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: ${props => props.$borderRadius ?? TMEditorsDefaultBorderRadius};
-    font-size: ${props => props.$fontSize};
-    appearance: none; /* remove native arrow */
-    background-color: white;
-
-    &:focus {
-        outline: none;
-        background-image: linear-gradient(white, #E4E9F7);
-        border: ${props => props.$isModified ? `1px solid ${TMColors.isModified}` : '1px solid rgb(180,180,180)'};
-        border-bottom: 2px solid;
-        border-bottom-color: ${props => (props.$vil.length === 0) ? !props.$isModified ? TMColors.primary : TMColors.isModified : editorColorManager(props.$vil)};
-    }
+const StyledDropDown = styled.select `
+    width: 100%;
+    padding: 5px 35px 3px 9px; /* padding-right leaves space for buttons + custom arrow */
+    border: 1px solid;
+    border-color: ${props => props.$isModified ? TMColors.isModified : TMColors.border_normal};
+    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: ${props => props.$borderRadius ?? TMEditorsDefaultBorderRadius};
+    font-size: ${props => props.$fontSize};
+    appearance: none; /* remove native arrow */
+    background-color: white;
+
+    &:focus {
+        outline: none;
+        background-image: linear-gradient(white, #E4E9F7);
+        border: ${props => props.$isModified ? `1px solid ${TMColors.isModified}` : '1px solid rgb(180,180,180)'};
+        border-bottom: 2px solid;
+        border-bottom-color: ${props => (props.$vil.length === 0) ? !props.$isModified ? TMColors.primary : TMColors.isModified : editorColorManager(props.$vil)};
+    }
 `;
-const ButtonsContainer = styled.div `
-    position: absolute;
-    right: 20px; /* adjust depending on arrow size */
-    display: flex;
-    align-items: center;
-    gap: 5px; /* spacing between buttons */
+const ButtonsContainer = styled.div `
+    position: absolute;
+    right: 20px; /* adjust depending on arrow size */
+    display: flex;
+    align-items: center;
+    gap: 5px; /* spacing between buttons */
 `;
-const CustomArrow = styled.div `
-    position: absolute;
-    right: 5px;
-    pointer-events: none;
-    border-left: 5px solid transparent;
-    border-right: 5px solid transparent;
-    border-top: 5px solid ${TMColors.text_normal};
+const CustomArrow = styled.div `
+    position: absolute;
+    right: 5px;
+    pointer-events: none;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-top: 5px solid ${TMColors.text_normal};
 `;
-const StyledDropDownEditorButton = styled.div `
-    color: ${TMColors.button_icon};
-    display: flex;
-    align-items: center;
-    cursor: pointer;
+const StyledDropDownEditorButton = styled.div `
+    color: ${TMColors.button_icon};
+    display: flex;
+    align-items: center;
+    cursor: pointer;
 `;
 const TMDropDown = ({ validationItems = [], disabled = false, elementStyle, isModifiedWhen, labelPosition = 'left', label, icon, width = '100%', fontSize = FontSize.defaultFontSize, dataSource, value, onValueChanged, buttons = [], }) => {
     const [isFocused, setIsFocused] = useState(false);