@topconsultnpm/sdkui-react 6.22.0-dev3.9 → 6.22.0-dev4.3

package/lib/components/base/TMDataGrid.js

@@ -434,229 +434,229 @@ export default TMDataGrid;
 // (padding, altezza minima, font e dimensione dei pulsanti di pagina).
 // Con compactPager = false non emette nessuna regola: width/height restano inline come in precedenza,
 // così il rendering è identico a quello del div originale.
-const StyledDataGridContainer = styled.div `
-    ${({ $compactPager }) => $compactPager && css `
-        & .dx-datagrid-pager {
-            padding: 2px 4px !important;
-            min-height: 0 !important;
-            font-size: 11px;
-        }
-
-        & .dx-datagrid-pager .dx-page,
-        & .dx-datagrid-pager .dx-page-size,
-        & .dx-datagrid-pager .dx-selection,
-        & .dx-datagrid-pager .dx-navigate-button {
-            min-width: 18px !important;
-            min-height: 18px !important;
-            height: auto !important;
-            padding: 1px 5px !important;
-            line-height: 16px !important;
-            font-size: 11px;
-        }
-
-        & .dx-datagrid-pager .dx-pages,
-        & .dx-datagrid-pager .dx-page-sizes,
-        & .dx-datagrid-pager .dx-info,
-        & .dx-datagrid-pager .dx-page-index,
-        & .dx-datagrid-pager .dx-pages .dx-info {
-            font-size: 11px;
-            margin-top: 0 !important;
-            margin-bottom: 0 !important;
-        }
-
-        & .dx-datagrid-pager .dx-info {
-            margin-left: 4px !important;
-            margin-right: 4px !important;
-        }
-
-        /* Editor del numero di pagina (displayMode compact) */
-        & .dx-datagrid-pager .dx-page-index .dx-texteditor-input,
-        & .dx-datagrid-pager .dx-page-sizes .dx-texteditor-input {
-            min-height: 18px !important;
-            height: 18px !important;
-            padding: 0 4px !important;
-            font-size: 11px;
-        }
-    `}
+const StyledDataGridContainer = styled.div `
+    ${({ $compactPager }) => $compactPager && css `
+        & .dx-datagrid-pager {
+            padding: 2px 4px !important;
+            min-height: 0 !important;
+            font-size: 11px;
+        }
+
+        & .dx-datagrid-pager .dx-page,
+        & .dx-datagrid-pager .dx-page-size,
+        & .dx-datagrid-pager .dx-selection,
+        & .dx-datagrid-pager .dx-navigate-button {
+            min-width: 18px !important;
+            min-height: 18px !important;
+            height: auto !important;
+            padding: 1px 5px !important;
+            line-height: 16px !important;
+            font-size: 11px;
+        }
+
+        & .dx-datagrid-pager .dx-pages,
+        & .dx-datagrid-pager .dx-page-sizes,
+        & .dx-datagrid-pager .dx-info,
+        & .dx-datagrid-pager .dx-page-index,
+        & .dx-datagrid-pager .dx-pages .dx-info {
+            font-size: 11px;
+            margin-top: 0 !important;
+            margin-bottom: 0 !important;
+        }
+
+        & .dx-datagrid-pager .dx-info {
+            margin-left: 4px !important;
+            margin-right: 4px !important;
+        }
+
+        /* Editor del numero di pagina (displayMode compact) */
+        & .dx-datagrid-pager .dx-page-index .dx-texteditor-input,
+        & .dx-datagrid-pager .dx-page-sizes .dx-texteditor-input {
+            min-height: 18px !important;
+            height: 18px !important;
+            padding: 0 4px !important;
+            font-size: 11px;
+        }
+    `}
 `;
 // Stile del pannello del filtro d'intestazione (ricerca, elenco valori, OK/Annulla).
 // Il popup è in portale sul body, fuori da StyledDataGridContainer: le regole sono globali
 // ma tutte sotto .dx-header-filter-menu, classe che DevExtreme applica solo a questo popup.
-const HeaderFilterMenuGlobalStyle = createGlobalStyle `
-    .dx-header-filter-menu {
-
-        &.dx-popup-wrapper > .dx-overlay-content.dx-popup-normal {
-            border: 1px solid #E4E8EE;
-            border-radius: 8px;
-            box-shadow: 0 2px 6px rgba(18, 44, 76, .08), 0 12px 28px rgba(18, 44, 76, .14);
-            overflow: hidden;
-        }
-
-        &.dx-popup-wrapper .dx-popup-content {
-            padding: 10px 10px 4px;
-        }
-
-        /* Campo di ricerca: TextBox mode "search" resa da List o da TreeView (filtri gerarchici) */
-        .dx-searchbox.dx-list-search,
-        .dx-searchbox.dx-treeview-search {
-            margin-bottom: 8px;
-            border-radius: 6px;
-            border: 1px solid #CDD2D8;
-            background-color: #F4F6F9;
-            box-shadow: none;
-            transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
-
-            /* fluent disegna qui la barretta di focus, sostituita da bordo + alone */
-            &::before,
-            &::after {
-                display: none;
-            }
-
-            &.dx-state-hover:not(.dx-state-focused) {
-                border-color: #AEB6C1;
-                background-color: #EEF2F7;
-            }
-
-            &.dx-state-focused {
-                border-color: #2559A5;
-                background-color: #FFFFFF;
-                box-shadow: 0 0 0 2px rgba(37, 89, 165, .16);
-            }
-
-            .dx-icon-search {
-                width: 28px;
-                color: #8A929B;
-                transition: color .15s ease;
-            }
-
-            &.dx-state-focused .dx-icon-search {
-                color: #2559A5;
-            }
-
-            .dx-texteditor-input {
-                min-height: 28px;
-                padding-inline-start: 28px;
-                padding-inline-end: 8px;
-                font-size: 12px;
-                background-color: transparent;
-            }
-
-            .dx-placeholder {
-                color: #9AA3AD;
-                font-size: 12px;
-
-                &::before {
-                    padding-inline-start: 28px;
-                    padding-inline-end: 8px;
-                }
-            }
-
-            .dx-clear-button-area .dx-icon-clear {
-                color: #8A929B;
-                transition: color .15s ease;
-            }
-
-            .dx-clear-button-area:hover .dx-icon-clear {
-                color: #2559A5;
-            }
-        }
-
-        .dx-list-item {
-            border-radius: 4px;
-            transition: background-color .12s ease;
-        }
-
-        .dx-list-item-content {
-            padding: 4px 6px;
-        }
-
-        .dx-list-item.dx-state-hover,
-        .dx-list-item.dx-state-focused {
-            background-color: #F1F6FD;
-            color: #122C4C;
-        }
-
-        .dx-list-select-all {
-            padding: 2px 0 6px;
-            margin-bottom: 4px;
-            border-bottom: 1px solid #ECEFF3;
-        }
-
-        .dx-list-select-all-label {
-            font-weight: 600;
-            color: #122C4C;
-        }
-
-        .dx-checkbox-checked .dx-checkbox-icon,
-        .dx-checkbox-indeterminate .dx-checkbox-icon {
-            border-color: #2559A5;
-            background-color: #2559A5;
-        }
-
-        .dx-checkbox.dx-state-hover:not(.dx-checkbox-checked) .dx-checkbox-icon {
-            border-color: #2559A5;
-        }
-
-        /* il :not() lascia intatto il fade-out nativo della scrollbar */
-        .dx-scrollable-scroll:not(.dx-state-invisible) .dx-scrollable-scroll-content {
-            background-color: rgba(18, 44, 76, .28);
-            border-radius: 3px;
-        }
-
-        &.dx-popup-wrapper .dx-popup-bottom.dx-toolbar {
-            padding: 8px 10px 10px;
-            border-top: 1px solid #ECEFF3;
-        }
-
-        .dx-popup-bottom .dx-button {
-            border-radius: 5px;
-            min-width: 76px;
-            margin: 0;
-        }
-
-        .dx-popup-bottom .dx-toolbar-button + .dx-toolbar-button {
-            margin-inline-start: 6px;
-
-            .dx-button {
-                margin: 0;
-            }
-        }
-
-        /* DevExtreme aggiunge prima OK e poi Annulla: individuarli per posizione li rende indipendenti dalla lingua */
-        .dx-popup-bottom .dx-toolbar-after > .dx-toolbar-button:first-child .dx-button {
-            border-color: transparent;
-            background-color: #2559A5;
-
-            .dx-button-text {
-                color: #FFFFFF;
-            }
-
-            &.dx-state-hover {
-                background-color: #1E4A8C;
-            }
-
-            &.dx-state-active {
-                background-color: #1A3F78;
-            }
-        }
-
-        .dx-popup-bottom .dx-toolbar-after > .dx-toolbar-button + .dx-toolbar-button .dx-button {
-            border-color: transparent;
-            background-color: transparent;
-
-            .dx-button-text {
-                color: #44506B;
-            }
-
-            &.dx-state-hover {
-                background-color: #F0F3F7;
-            }
-
-            &.dx-state-active {
-                background-color: #E6EBF2;
-            }
-        }
-    }
+const HeaderFilterMenuGlobalStyle = createGlobalStyle `
+    .dx-header-filter-menu {
+
+        &.dx-popup-wrapper > .dx-overlay-content.dx-popup-normal {
+            border: 1px solid #E4E8EE;
+            border-radius: 8px;
+            box-shadow: 0 2px 6px rgba(18, 44, 76, .08), 0 12px 28px rgba(18, 44, 76, .14);
+            overflow: hidden;
+        }
+
+        &.dx-popup-wrapper .dx-popup-content {
+            padding: 10px 10px 4px;
+        }
+
+        /* Campo di ricerca: TextBox mode "search" resa da List o da TreeView (filtri gerarchici) */
+        .dx-searchbox.dx-list-search,
+        .dx-searchbox.dx-treeview-search {
+            margin-bottom: 8px;
+            border-radius: 6px;
+            border: 1px solid #CDD2D8;
+            background-color: #F4F6F9;
+            box-shadow: none;
+            transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
+
+            /* fluent disegna qui la barretta di focus, sostituita da bordo + alone */
+            &::before,
+            &::after {
+                display: none;
+            }
+
+            &.dx-state-hover:not(.dx-state-focused) {
+                border-color: #AEB6C1;
+                background-color: #EEF2F7;
+            }
+
+            &.dx-state-focused {
+                border-color: #2559A5;
+                background-color: #FFFFFF;
+                box-shadow: 0 0 0 2px rgba(37, 89, 165, .16);
+            }
+
+            .dx-icon-search {
+                width: 28px;
+                color: #8A929B;
+                transition: color .15s ease;
+            }
+
+            &.dx-state-focused .dx-icon-search {
+                color: #2559A5;
+            }
+
+            .dx-texteditor-input {
+                min-height: 28px;
+                padding-inline-start: 28px;
+                padding-inline-end: 8px;
+                font-size: 12px;
+                background-color: transparent;
+            }
+
+            .dx-placeholder {
+                color: #9AA3AD;
+                font-size: 12px;
+
+                &::before {
+                    padding-inline-start: 28px;
+                    padding-inline-end: 8px;
+                }
+            }
+
+            .dx-clear-button-area .dx-icon-clear {
+                color: #8A929B;
+                transition: color .15s ease;
+            }
+
+            .dx-clear-button-area:hover .dx-icon-clear {
+                color: #2559A5;
+            }
+        }
+
+        .dx-list-item {
+            border-radius: 4px;
+            transition: background-color .12s ease;
+        }
+
+        .dx-list-item-content {
+            padding: 4px 6px;
+        }
+
+        .dx-list-item.dx-state-hover,
+        .dx-list-item.dx-state-focused {
+            background-color: #F1F6FD;
+            color: #122C4C;
+        }
+
+        .dx-list-select-all {
+            padding: 2px 0 6px;
+            margin-bottom: 4px;
+            border-bottom: 1px solid #ECEFF3;
+        }
+
+        .dx-list-select-all-label {
+            font-weight: 600;
+            color: #122C4C;
+        }
+
+        .dx-checkbox-checked .dx-checkbox-icon,
+        .dx-checkbox-indeterminate .dx-checkbox-icon {
+            border-color: #2559A5;
+            background-color: #2559A5;
+        }
+
+        .dx-checkbox.dx-state-hover:not(.dx-checkbox-checked) .dx-checkbox-icon {
+            border-color: #2559A5;
+        }
+
+        /* il :not() lascia intatto il fade-out nativo della scrollbar */
+        .dx-scrollable-scroll:not(.dx-state-invisible) .dx-scrollable-scroll-content {
+            background-color: rgba(18, 44, 76, .28);
+            border-radius: 3px;
+        }
+
+        &.dx-popup-wrapper .dx-popup-bottom.dx-toolbar {
+            padding: 8px 10px 10px;
+            border-top: 1px solid #ECEFF3;
+        }
+
+        .dx-popup-bottom .dx-button {
+            border-radius: 5px;
+            min-width: 76px;
+            margin: 0;
+        }
+
+        .dx-popup-bottom .dx-toolbar-button + .dx-toolbar-button {
+            margin-inline-start: 6px;
+
+            .dx-button {
+                margin: 0;
+            }
+        }
+
+        /* DevExtreme aggiunge prima OK e poi Annulla: individuarli per posizione li rende indipendenti dalla lingua */
+        .dx-popup-bottom .dx-toolbar-after > .dx-toolbar-button:first-child .dx-button {
+            border-color: transparent;
+            background-color: #2559A5;
+
+            .dx-button-text {
+                color: #FFFFFF;
+            }
+
+            &.dx-state-hover {
+                background-color: #1E4A8C;
+            }
+
+            &.dx-state-active {
+                background-color: #1A3F78;
+            }
+        }
+
+        .dx-popup-bottom .dx-toolbar-after > .dx-toolbar-button + .dx-toolbar-button .dx-button {
+            border-color: transparent;
+            background-color: transparent;
+
+            .dx-button-text {
+                color: #44506B;
+            }
+
+            &.dx-state-hover {
+                background-color: #F0F3F7;
+            }
+
+            &.dx-state-active {
+                background-color: #E6EBF2;
+            }
+        }
+    }
 `;
 const getRecordCount = (dataSource) => {
     if (Array.isArray(dataSource)) {