@topconsultnpm/sdkui-react 6.19.0-dev2.2 → 6.19.0-test.1

package/lib/components/base/TMAccordion.js

@@ -14,49 +14,49 @@ const TMAccordion = ({ title, titleSize = 'Medium', children, defaultOpen = true
 };
 export default TMAccordion;
 //#region Styled Components
-const StyledAccordionContainer = styled.div `
-    margin-bottom: 10px;
-    overflow: hidden;
+const StyledAccordionContainer = styled.div `
+    margin-bottom: 10px;
+    overflow: hidden;
 `;
-const StyledGroupTemplate = styled.div `
-    cursor: pointer;
-    background: none !important;
-    border: none !important;
-    box-shadow: none !important;
-    padding: 10px;
-    display: flex;
-    flex-direction: row;
-    gap: 5px;
-    align-items: center;
-    font-size: 1rem;
-    font-weight: 600; 
-    color: ${() => TMColors.primaryColor};
-    position: relative;
-
-    .tm-accordion-title, .tm-accordion-title.small {
-        font-weight: 600;
-        margin: 0;
-    }
-    .tm-accordion-title.small {
-        font-size: 1rem;
-    }
-    .tm-accordion-title {
-        font-size: 1.25rem;
-    }
-
-    &::after {
-        content: '';
-        display: block;
-        width: 90%;
-        margin: 0 auto;
-        border-bottom: 1px solid #00A99D;
-        margin-top: 8px;
-        position: absolute;
-        left: 5%;
-        bottom: 0;
-    }
+const StyledGroupTemplate = styled.div `
+    cursor: pointer;
+    background: none !important;
+    border: none !important;
+    box-shadow: none !important;
+    padding: 10px;
+    display: flex;
+    flex-direction: row;
+    gap: 5px;
+    align-items: center;
+    font-size: 1rem;
+    font-weight: 600; 
+    color: ${() => TMColors.primaryColor};
+    position: relative;
+
+    .tm-accordion-title, .tm-accordion-title.small {
+        font-weight: 600;
+        margin: 0;
+    }
+    .tm-accordion-title.small {
+        font-size: 1rem;
+    }
+    .tm-accordion-title {
+        font-size: 1.25rem;
+    }
+
+    &::after {
+        content: '';
+        display: block;
+        width: 90%;
+        margin: 0 auto;
+        border-bottom: 1px solid #00A99D;
+        margin-top: 8px;
+        position: absolute;
+        left: 5%;
+        bottom: 0;
+    }
 `;
-const StyledAccordionContent = styled.div `
-    padding: 10px;
-    background-color: #fff; /* White background for the content area */
+const StyledAccordionContent = styled.div `
+    padding: 10px;
+    background-color: #fff; /* White background for the content area */
 `;

package/lib/components/base/TMAreaManager.js

@@ -27,29 +27,29 @@ export class TMFileSystemItem {
 let abortController = new AbortController();
 const svgString = encodeURIComponent(renderToStaticMarkup(_jsx(IconFolderForCSS, { fill: "#9fc6e7" })));
 const svgDataUrl = `data:image/svg+xml,${svgString}`;
-const StyledFileManagerWrapper = styled.div `
-  .dx-filemanager .dx-treeview-item .dx-icon-folder {
-    display: none !important;
-  }
-  .dx-filemanager .dx-treeview-item .dx-treeview-item-content {
-    position: relative !important;
-    padding-left: 26px !important;
-    min-height: 22px !important;
-  }
-  .dx-filemanager .dx-treeview-item .dx-treeview-item-content::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 60%;
-    width: 20px;
-    height: 20px;
-    transform: translateY(-50%);
-    background-image: url("${svgDataUrl}");
-    background-size: contain;
-    background-repeat: no-repeat;
-    display: inline-block;
-    z-index: 1;
-  }
+const StyledFileManagerWrapper = styled.div `
+  .dx-filemanager .dx-treeview-item .dx-icon-folder {
+    display: none !important;
+  }
+  .dx-filemanager .dx-treeview-item .dx-treeview-item-content {
+    position: relative !important;
+    padding-left: 26px !important;
+    min-height: 22px !important;
+  }
+  .dx-filemanager .dx-treeview-item .dx-treeview-item-content::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 60%;
+    width: 20px;
+    height: 20px;
+    transform: translateY(-50%);
+    background-image: url("${svgDataUrl}");
+    background-size: contain;
+    background-repeat: no-repeat;
+    display: inline-block;
+    z-index: 1;
+  }
 `;
 const TMAreaManager = (props = { selectionMode: 'multiple', isPathChooser: false }) => {
     // State to store the instance of CustomFileSystemProvider. It is initialized once and used for managing file system operations.

package/lib/components/base/TMButton.js

@@ -4,145 +4,145 @@ import styled from 'styled-components';
 import { getColor } from '../../helper';
 import { FontSize, TMColors } from '../../utils/theme';
 import TMTooltip from './TMTooltip';
-const StyledNormalButton = styled.button.withConfig({ shouldForwardProp: prop => !['text'].includes(prop) }) `
-  font-size: ${props => props.fontSize};
-  width: ${props => props.width && props.width};
-  height: ${props => props.height && props.height};
-  min-width: 60px;
-  min-height: 25px;
-  padding: 3px 10px;
-  border: none;
-  cursor: ${props => !props.disabled && 'pointer'};
-  border-radius: 3px;
-  border: 1px solid;
-  border-color: ${props => !props.disabled ? props.color?.toLowerCase().includes('outline') ? getColor(props.color.split('Outline')[0]) : 'white' : 'rgb(225, 225, 225)'};
-  background-color: ${props => !props.disabled ? props.color?.toLowerCase().includes('outline') ? 'white' : getColor(props.color) : 'rgb(225, 225, 225)'};
-  color: ${props => !props.disabled ? props.color?.toLowerCase().includes('outline') ? getColor(props.color.split('Outline')[0]) : 'white' : 'rgb(160, 160, 160)'};
-  &:hover {
-    border-color: ${props => !props.disabled ? !props.color?.toLowerCase().includes('outline') ? getColor(props.color.split('Outline')[0]) : 'white' : 'rgb(225, 225, 225)'};
-    background-color: ${props => !props.disabled ? !props.color?.toLowerCase().includes('outline') ? 'white' : getColor(props.color.split('Outline')[0]) : 'rgb(225, 225, 225)'};
-    color: ${props => !props.disabled ? !props.color?.toLowerCase().includes('outline') ? getColor(props.color.split('Outline')[0]) : 'white' : 'rgb(160, 160, 160)'};
-  }
+const StyledNormalButton = styled.button.withConfig({ shouldForwardProp: prop => !['text'].includes(prop) }) `
+  font-size: ${props => props.fontSize};
+  width: ${props => props.width && props.width};
+  height: ${props => props.height && props.height};
+  min-width: 60px;
+  min-height: 25px;
+  padding: 3px 10px;
+  border: none;
+  cursor: ${props => !props.disabled && 'pointer'};
+  border-radius: 3px;
+  border: 1px solid;
+  border-color: ${props => !props.disabled ? props.color?.toLowerCase().includes('outline') ? getColor(props.color.split('Outline')[0]) : 'white' : 'rgb(225, 225, 225)'};
+  background-color: ${props => !props.disabled ? props.color?.toLowerCase().includes('outline') ? 'white' : getColor(props.color) : 'rgb(225, 225, 225)'};
+  color: ${props => !props.disabled ? props.color?.toLowerCase().includes('outline') ? getColor(props.color.split('Outline')[0]) : 'white' : 'rgb(160, 160, 160)'};
+  &:hover {
+    border-color: ${props => !props.disabled ? !props.color?.toLowerCase().includes('outline') ? getColor(props.color.split('Outline')[0]) : 'white' : 'rgb(225, 225, 225)'};
+    background-color: ${props => !props.disabled ? !props.color?.toLowerCase().includes('outline') ? 'white' : getColor(props.color.split('Outline')[0]) : 'rgb(225, 225, 225)'};
+    color: ${props => !props.disabled ? !props.color?.toLowerCase().includes('outline') ? getColor(props.color.split('Outline')[0]) : 'white' : 'rgb(160, 160, 160)'};
+  }
 `;
-const StyledToolbarButton = styled.button.withConfig({ shouldForwardProp: prop => !['text'].includes(prop) }) `
-  font-size: ${props => props.fontSize ? props.fontSize : '18px'};
-  width: 30px;
-  height: 30px;
-  padding: 5px;
-  border-radius: 50px;
-  display: flex;
-  flex: 1;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  cursor: ${props => !props.disabled && 'pointer'};
-  border: 1px solid;
-  border-color: ${props => !props.disabled ? props.color?.toLowerCase().includes('outline') ? getColor(props.color.split('Outline')[0]) : 'none' : 'rgb(225, 225, 225)'};
-  background-color: ${props => !props.disabled ? props.color?.toLowerCase().includes('outline') ? 'white' : getColor(props.color) : 'rgb(225, 225, 225)'};
-  color: ${props => !props.disabled ? props.color?.toLowerCase().includes('outline') ? getColor(props.color.split('Outline')[0]) : 'white' : 'rgb(160, 160, 160)'};
-  &:hover {
-    border-color: ${props => !props.disabled ? !props.color?.toLowerCase().includes('outline') ? getColor(props.color.split('Outline')[0]) : 'white' : 'rgb(225, 225, 225)'};
-    background-color: ${props => !props.disabled ? !props.color?.toLowerCase().includes('outline') ? 'white' : getColor(props.color.split('Outline')[0]) : 'rgb(225, 225, 225)'};
-    color: ${props => !props.disabled ? !props.color?.toLowerCase().includes('outline') ? getColor(props.color.split('Outline')[0]) : 'white' : 'rgb(160, 160, 160)'};
-  }
+const StyledToolbarButton = styled.button.withConfig({ shouldForwardProp: prop => !['text'].includes(prop) }) `
+  font-size: ${props => props.fontSize ? props.fontSize : '18px'};
+  width: 30px;
+  height: 30px;
+  padding: 5px;
+  border-radius: 50px;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  cursor: ${props => !props.disabled && 'pointer'};
+  border: 1px solid;
+  border-color: ${props => !props.disabled ? props.color?.toLowerCase().includes('outline') ? getColor(props.color.split('Outline')[0]) : 'none' : 'rgb(225, 225, 225)'};
+  background-color: ${props => !props.disabled ? props.color?.toLowerCase().includes('outline') ? 'white' : getColor(props.color) : 'rgb(225, 225, 225)'};
+  color: ${props => !props.disabled ? props.color?.toLowerCase().includes('outline') ? getColor(props.color.split('Outline')[0]) : 'white' : 'rgb(160, 160, 160)'};
+  &:hover {
+    border-color: ${props => !props.disabled ? !props.color?.toLowerCase().includes('outline') ? getColor(props.color.split('Outline')[0]) : 'white' : 'rgb(225, 225, 225)'};
+    background-color: ${props => !props.disabled ? !props.color?.toLowerCase().includes('outline') ? 'white' : getColor(props.color.split('Outline')[0]) : 'rgb(225, 225, 225)'};
+    color: ${props => !props.disabled ? !props.color?.toLowerCase().includes('outline') ? getColor(props.color.split('Outline')[0]) : 'white' : 'rgb(160, 160, 160)'};
+  }
 `;
-const StyledIconButton = styled.button.withConfig({ shouldForwardProp: prop => !['text'].includes(prop) }) `
-  font-size: ${props => props.fontSize};
-  min-width: 10px;
-  min-height: 10px;
-  padding: ${props => props.padding ?? '0px'};
-  display: flex;
-  border: none;
-  flex: 1;
-  align-items: center;
-  justify-content: center;
-  cursor: ${props => !props.disabled && 'pointer'};
-  opacity: ${props => !props.disabled ? 1 : 0.4};
-  background-color: transparent;
-  color: ${props => !props.disabled ? getColor(props.color) : 'rgb(180, 180, 180)'};
-  user-select: none;
+const StyledIconButton = styled.button.withConfig({ shouldForwardProp: prop => !['text'].includes(prop) }) `
+  font-size: ${props => props.fontSize};
+  min-width: 10px;
+  min-height: 10px;
+  padding: ${props => props.padding ?? '0px'};
+  display: flex;
+  border: none;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  cursor: ${props => !props.disabled && 'pointer'};
+  opacity: ${props => !props.disabled ? 1 : 0.4};
+  background-color: transparent;
+  color: ${props => !props.disabled ? getColor(props.color) : 'rgb(180, 180, 180)'};
+  user-select: none;
 `;
-const StyledTextButton = styled.button.withConfig({ shouldForwardProp: prop => !['text'].includes(prop) }) `
-  font-size: ${props => props.fontSize};
-  width: ${props => props.width && props.width};
-  height: ${props => props.height && props.height};
-  min-width: 60px;
-  min-height: 30px;
-  padding: 3px;
-  display: flex;
-  border: none;
-  flex: 1;
-  align-items: center;
-  justify-content: center;
-  cursor: ${props => !props.disabled && 'pointer'};
-  border-radius: 2px;
-  background-color: transparent;
-  color: ${props => !props.disabled ? getColor(props.color) : 'rgb(231, 231, 231)'};
-  user-select: none;
-  transition: ease 200ms;
-  &:hover {
-    background-color: rgb(241, 241, 241);
-  }
+const StyledTextButton = styled.button.withConfig({ shouldForwardProp: prop => !['text'].includes(prop) }) `
+  font-size: ${props => props.fontSize};
+  width: ${props => props.width && props.width};
+  height: ${props => props.height && props.height};
+  min-width: 60px;
+  min-height: 30px;
+  padding: 3px;
+  display: flex;
+  border: none;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  cursor: ${props => !props.disabled && 'pointer'};
+  border-radius: 2px;
+  background-color: transparent;
+  color: ${props => !props.disabled ? getColor(props.color) : 'rgb(231, 231, 231)'};
+  user-select: none;
+  transition: ease 200ms;
+  &:hover {
+    background-color: rgb(241, 241, 241);
+  }
 `;
-const StyledButtonTooltipHeader = styled.div `
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: center;
-  background-color: white;
-  width: 100%;
-  height: 28px;
-  padding: 0 5px;
-  border-bottom: ${props => props.$description ? '1px solid rgb(210, 210, 210)' : 'none'};
-  margin-bottom: ${props => props.$description ? '5px' : '0px'};
+const StyledButtonTooltipHeader = styled.div `
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  background-color: white;
+  width: 100%;
+  height: 28px;
+  padding: 0 5px;
+  border-bottom: ${props => props.$description ? '1px solid rgb(210, 210, 210)' : 'none'};
+  margin-bottom: ${props => props.$description ? '5px' : '0px'};
 `;
-const StyledButtonTooltipIcon = styled.div `
-  margin-right: 5px;
-  color: ${props => props.$color ? props.$color : "primary"};
-  font-size: '20px';
+const StyledButtonTooltipIcon = styled.div `
+  margin-right: 5px;
+  color: ${props => props.$color ? props.$color : "primary"};
+  font-size: '20px';
 `;
-const StyledButtonTooltipItem = styled.div `
-  margin-right: 5px;
-  color: ${props => props.$color ? props.$color : "primary"};
-  font-size: ${props => props.fontSize || FontSize.defaultFontSize};
+const StyledButtonTooltipItem = styled.div `
+  margin-right: 5px;
+  color: ${props => props.$color ? props.$color : "primary"};
+  font-size: ${props => props.fontSize || FontSize.defaultFontSize};
 `;
-const StyledAdvancedButton = styled.button `
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    width: ${props => props.$width};
-    height: ${props => props.$height};
-    font-weight: 600;
-    cursor: ${props => !props.$isDisabled ? 'pointer' : 'default'};
-    border-radius: 10px;
-    overflow: hidden;
-    color: ${({ $isPrimaryOutline }) => $isPrimaryOutline ? TMColors.primaryColor : 'white'};
-    user-select: none;
-    border: ${({ $isPrimaryOutline }) => $isPrimaryOutline ? `1px solid ${TMColors.primaryColor}` : 'none'};
-    background: ${({ $isPrimaryOutline }) => $isPrimaryOutline ? 'white' : 'unset'};
+const StyledAdvancedButton = styled.button `
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    width: ${props => props.$width};
+    height: ${props => props.$height};
+    font-weight: 600;
+    cursor: ${props => !props.$isDisabled ? 'pointer' : 'default'};
+    border-radius: 10px;
+    overflow: hidden;
+    color: ${({ $isPrimaryOutline }) => $isPrimaryOutline ? TMColors.primaryColor : 'white'};
+    user-select: none;
+    border: ${({ $isPrimaryOutline }) => $isPrimaryOutline ? `1px solid ${TMColors.primaryColor}` : 'none'};
+    background: ${({ $isPrimaryOutline }) => $isPrimaryOutline ? 'white' : 'unset'};
 `;
-const StyledAdvancedButtonIcon = styled.div `
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: ${props => props.$isVisible ? '25px' : '0px'};
-   
-    transition: width ease-in-out 100ms;
-    height: 100%;
-    background-color: ${props => props.$isDisabled ? '#b4b4b4' : props.$color ? `${props.$color}90` : props.$type === 'success' ? `${TMColors.success}90` : props.$type === 'error' ? `${TMColors.error}90` : props.$type === 'tertiary' ? `${TMColors.tertiary}90` : `${TMColors.primary}90`};
-    border-top-left-radius: 10px;
-    border-bottom-left-radius: 10px;
+const StyledAdvancedButtonIcon = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: ${props => props.$isVisible ? '25px' : '0px'};
+   
+    transition: width ease-in-out 100ms;
+    height: 100%;
+    background-color: ${props => props.$isDisabled ? '#b4b4b4' : props.$color ? `${props.$color}90` : props.$type === 'success' ? `${TMColors.success}90` : props.$type === 'error' ? `${TMColors.error}90` : props.$type === 'tertiary' ? `${TMColors.tertiary}90` : `${TMColors.primary}90`};
+    border-top-left-radius: 10px;
+    border-bottom-left-radius: 10px;
 `;
-const StyledAdvancedButtonText = styled.div `
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    background-color: ${props => props.$isDisabled ? '#d1d1d1' : props.$color ? props.$color : props.$type === 'success' ? `${TMColors.success}` : props.$type === 'error' ? `${TMColors.error}` : props.$type === 'tertiary' ? `${TMColors.tertiary}` : `${TMColors.primary}`};
-    border-top-right-radius: 10px;
-    border-bottom-right-radius: 10px;
-    padding: 5px;
+const StyledAdvancedButtonText = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    background-color: ${props => props.$isDisabled ? '#d1d1d1' : props.$color ? props.$color : props.$type === 'success' ? `${TMColors.success}` : props.$type === 'error' ? `${TMColors.error}` : props.$type === 'tertiary' ? `${TMColors.tertiary}` : `${TMColors.primary}`};
+    border-top-right-radius: 10px;
+    border-bottom-right-radius: 10px;
+    padding: 5px;
 `;
 const TMButton = forwardRef((props, ref) => {
     const { width, height, keyGesture, btnStyle = 'normal', advancedColor, advancedType = 'primary', color = 'primary', fontSize = FontSize.defaultFontSize, disabled = false, showTooltip = true, caption, icon, description, padding, elementStyle, onClick = () => { } } = props;

package/lib/components/base/TMClosableList.js

@@ -4,58 +4,58 @@ import styled from 'styled-components';
 import { Colors, FontSize } from '../../utils/theme';
 import { IconDown, IconRight, SDKUI_Localizator } from '../../helper';
 import { DeviceType, useDeviceType } from './TMDeviceProvider';
-const StyledClosableContainer = styled.div `
-    background-color: rgb(248,248,248);
-    border-radius: 5px;
-    padding: ${props => props.$padding};
-    display: flex;
-    flex-direction: ${props => !props.$isMobile ? 'row' : 'column'};
-    align-items: flex-start;
-    justify-content: space-between;
-    width: 100%;
-    margin-bottom: 5px;
+const StyledClosableContainer = styled.div `
+    background-color: rgb(248,248,248);
+    border-radius: 5px;
+    padding: ${props => props.$padding};
+    display: flex;
+    flex-direction: ${props => !props.$isMobile ? 'row' : 'column'};
+    align-items: flex-start;
+    justify-content: space-between;
+    width: 100%;
+    margin-bottom: 5px;
 `;
-const StyledClosableContext = styled.div `
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    justify-content: flex-start;
+const StyledClosableContext = styled.div `
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: flex-start;
 `;
-const StyledClosableLabel = styled.div `
-    /* color: black; */
-    font-size: ${FontSize.defaultFontSize};
-    width: ${props => props.$inline ? '100%' : !props.$isMobile && '180px'};
-    padding: 1px;
+const StyledClosableLabel = styled.div `
+    /* color: black; */
+    font-size: ${FontSize.defaultFontSize};
+    width: ${props => props.$inline ? '100%' : !props.$isMobile && '180px'};
+    padding: 1px;
 `;
-const StyledClosableItems = styled.div `
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: flex-start;
-    width: ${props => props.$inline ? '100%' : !props.$isMobile && 'calc(100% - 180px)'};
+const StyledClosableItems = styled.div `
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    width: ${props => props.$inline ? '100%' : !props.$isMobile && 'calc(100% - 180px)'};
 `;
-const StyledClosableItem = styled.div `
-    /* font-weight: bold; */
-    font-size: ${FontSize.defaultFontSize};
-    padding: 2px;
+const StyledClosableItem = styled.div `
+    /* font-weight: bold; */
+    font-size: ${FontSize.defaultFontSize};
+    padding: 2px;
 `;
-const StyledClosabelIcon = styled.div `
-    /* color: ${Colors.primary}; */
-    font-size: ${FontSize.defaultFontSize};
-    cursor: pointer;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    padding: 2px;
-    user-select: none;
+const StyledClosabelIcon = styled.div `
+    /* color: ${Colors.primary}; */
+    font-size: ${FontSize.defaultFontSize};
+    cursor: pointer;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 2px;
+    user-select: none;
 `;
-const StyledClosableItemsCount = styled.div `
-    /* color: ${Colors.primary}; */
-    font-size: ${FontSize.defaultFontSize};
-    cursor: pointer;
-    margin-right: 5px;
-    user-select: none;
+const StyledClosableItemsCount = styled.div `
+    /* color: ${Colors.primary}; */
+    font-size: ${FontSize.defaultFontSize};
+    cursor: pointer;
+    margin-right: 5px;
+    user-select: none;
 `;
 const TMClosableList = ({ dataSource, visibility = false, label, inline = false, hasPadding = true }) => {
     const [status, setStatus] = useState(visibility);

package/lib/components/base/TMConfirm.js

@@ -8,28 +8,28 @@ import TMButton from './TMButton';
 import Toppy from '../../assets/Toppy-generico.png';
 import { TMColors } from '../../utils/theme';
 // *** Stili per la modale (immutati) ***
-const StyledModalBodyWrapper = styled.div `
-    display: flex;
-    flex-direction: column;
-    height: 100%;
+const StyledModalBodyWrapper = styled.div `
+    display: flex;
+    flex-direction: column;
+    height: 100%;
 `;
-const StyledModalFooter = styled.div `
-    padding: 12px;
-    height: auto;
-    display: flex;
-    justify-content: flex-end;
-    flex-direction: row;
-    gap: 10px;
+const StyledModalFooter = styled.div `
+    padding: 12px;
+    height: auto;
+    display: flex;
+    justify-content: flex-end;
+    flex-direction: row;
+    gap: 10px;
 `;
-const StyledModalContentContainer = styled.div `
-    width: 100%;
-    padding: 10px;
-    flex: 1;
-    overflow-y: auto;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 10px;
+const StyledModalContentContainer = styled.div `
+    width: 100%;
+    padding: 10px;
+    flex: 1;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 10px;
 `;
 // *** Componente della modale di conferma ***
 const TMConfirmModal = ({ isOpen, title, message, okButtonText = 'OK', cancelButtonText = 'Annulla', onConfirm, onCancel, onClose }) => {

package/lib/components/base/TMContextMenu.js

@@ -2,11 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { IconRight } from '../../helper/TMIcons';
-const StyledContextMenuContainer = styled.div `
-    display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; z-index: 300; position: fixed; top: ${props => `${props.$top}px`}; left: ${props => `${props.$left}px`}; right: ${props => `${props.$right}px`}; bottom: ${props => `${props.$bottom}px`}; width: max-content; height: max-content; background-color: white; box-shadow: 1px 1px 2px #00000040;
+const StyledContextMenuContainer = styled.div `
+    display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; z-index: 300; position: fixed; top: ${props => `${props.$top}px`}; left: ${props => `${props.$left}px`}; right: ${props => `${props.$right}px`}; bottom: ${props => `${props.$bottom}px`}; width: max-content; height: max-content; background-color: white; box-shadow: 1px 1px 2px #00000040;
 `;
-const StyledContextMenuItem = styled.div `
-    cursor: ${props => !props.$disabled ? 'pointer' : 'default'}; display: flex; align-items: center; gap: 5px; transition: ease 100ms; padding: 5px; background-color: ${props => props.$isSelected && '#e9e9e9'}; width: 100%; height: 100%; color: ${props => props.$disabled && '#d0d0d0'}; &:hover { background-color: ${props => !props.$disabled && '#e9e9e9'} ; }
+const StyledContextMenuItem = styled.div `
+    cursor: ${props => !props.$disabled ? 'pointer' : 'default'}; display: flex; align-items: center; gap: 5px; transition: ease 100ms; padding: 5px; background-color: ${props => props.$isSelected && '#e9e9e9'}; width: 100%; height: 100%; color: ${props => props.$disabled && '#d0d0d0'}; &:hover { background-color: ${props => !props.$disabled && '#e9e9e9'} ; }
 `;
 const TMContextMenu = ({ items = [], coords = { x: 0, y: 0 }, subMenuDir = 'right', }) => {
     // Coordinates for sub-menus

package/lib/components/base/TMContextMenuOLD.js

@@ -23,32 +23,32 @@ export const useContextMenu = () => {
     return { clicked, setClicked, points, setPoints };
 };
 // #endregion
-export const Container = styled.div `
-    position: absolute;
-    padding: 5px 5px;
-    background-color: white;
-    width: max-content;
-    height: max-content;
-    border-radius: 2px;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: center;
-    box-shadow: 2px 2px 10px #00000030;
-    z-index: 2;
-    top: ${(props) => props.$top || 0}px;
-    left: ${(props) => props.$left || 0}px;
+export const Container = styled.div `
+    position: absolute;
+    padding: 5px 5px;
+    background-color: white;
+    width: max-content;
+    height: max-content;
+    border-radius: 2px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    box-shadow: 2px 2px 10px #00000030;
+    z-index: 2;
+    top: ${(props) => props.$top || 0}px;
+    left: ${(props) => props.$left || 0}px;
 `;
-export const MenuOption = styled.div `
-    width: 100%;
-    height: 20px;
-    padding: 3px;
-    cursor: pointer;
-    font-size: ${FontSize.defaultFontSize};
-    
-    &:hover {
-        color: ${Colors.primary};
-    }
+export const MenuOption = styled.div `
+    width: 100%;
+    height: 20px;
+    padding: 3px;
+    cursor: pointer;
+    font-size: ${FontSize.defaultFontSize};
+    
+    &:hover {
+        color: ${Colors.primary};
+    }
 `;
 const TMContextMenuOLD = ({ menuData, top, left, onMenuItemClick }) => {
     return (_jsx(_Fragment, { children: _jsx(Container, { "$top": top, "$left": left, children: menuData.map((item, index) => (_jsx(MenuOption, { onClick: (e) => onMenuItemClick?.(e.target.innerText), children: item.text }, index))) }) }));