@topconsultnpm/sdkui-react-beta 6.6.87 → 6.6.89

package/lib/components/base/TMClosableList.js

@@ -2,7 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import styled from 'styled-components';
 import { Colors, FontSize } from '../../utils/theme';
-import { IconDown, IconRight, SDKUI_Localizator, useWindowWidth } from '../../helper';
+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;
@@ -58,12 +59,13 @@ const StyledClosableItemsCount = styled.div `
 `;
 const TMClosableList = ({ dataSource, visibility = false, label, inline = false, hasPadding = true }) => {
     const [status, setStatus] = useState(visibility);
-    let width = useWindowWidth();
+    // let width = useWindowWidth()
+    let devicrType = useDeviceType();
     const renderedItems = () => {
         return (dataSource.map((item, index) => (_jsx(StyledClosableItem, { children: item }, index))));
     };
-    return (_jsxs(StyledClosableContainer, { "$isMobile": width < 1024, "$padding": hasPadding ? '5px' : '0', children: [_jsxs(StyledClosableContext, { children: [label && _jsxs(StyledClosableLabel, { "$isMobile": width < 640, "$inline": inline, children: [label, ":"] }), status ?
-                        _jsxs(StyledClosableItems, { "$isMobile": width < 640, "$inline": inline, children: ["  ", renderedItems(), " "] }) :
-                        _jsxs(StyledClosableItems, { "$isMobile": width < 640, "$inline": inline, children: [" ", _jsxs(StyledClosableItem, { children: [" ", dataSource[0], " "] }), " "] })] }), dataSource.length > 1 && _jsxs(StyledClosabelIcon, { onClick: () => setStatus(!status), children: [!status && _jsxs(StyledClosableItemsCount, { children: [" (", _jsx("span", { children: "+" }), " ", dataSource.length - 1, " ", dataSource.length === 2 ? SDKUI_Localizator.OneMore : SDKUI_Localizator.More, ") "] }), !status ? _jsx(IconRight, { fontSize: 14 }) : _jsx(IconDown, { fontSize: 14 })] })] }));
+    return (_jsxs(StyledClosableContainer, { "$isMobile": devicrType === DeviceType.TABLET, "$padding": hasPadding ? '5px' : '0', children: [_jsxs(StyledClosableContext, { children: [label && _jsxs(StyledClosableLabel, { "$isMobile": devicrType === DeviceType.MOBILE, "$inline": inline, children: [label, ":"] }), status ?
+                        _jsxs(StyledClosableItems, { "$isMobile": devicrType === DeviceType.MOBILE, "$inline": inline, children: ["  ", renderedItems(), " "] }) :
+                        _jsxs(StyledClosableItems, { "$isMobile": devicrType === DeviceType.MOBILE, "$inline": inline, children: [" ", _jsxs(StyledClosableItem, { children: [" ", dataSource[0], " "] }), " "] })] }), dataSource.length > 1 && _jsxs(StyledClosabelIcon, { onClick: () => setStatus(!status), children: [!status && _jsxs(StyledClosableItemsCount, { children: [" (", _jsx("span", { children: "+" }), " ", dataSource.length - 1, " ", dataSource.length === 2 ? SDKUI_Localizator.OneMore : SDKUI_Localizator.More, ") "] }), !status ? _jsx(IconRight, { fontSize: 14 }) : _jsx(IconDown, { fontSize: 14 })] })] }));
 };
 export default TMClosableList;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+declare enum DeviceType {
+    MOBILE = "mobile",
+    TABLET = "tablet",
+    DESKTOP = "desktop"
+}
+interface DeviceContextProps {
+    deviceType?: DeviceType;
+}
+declare const DeviceContext: React.Context<DeviceContextProps | undefined>;
+declare const TMDeviceProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+declare const useDeviceType: () => DeviceType | undefined;
+export { DeviceContextProps, DeviceType, useDeviceType, TMDeviceProvider, DeviceContext };

package/lib/components/base/TMDeviceProvider.js

@@ -0,0 +1,41 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState, createContext, useMemo, useContext } from 'react';
+var DeviceType;
+(function (DeviceType) {
+    DeviceType["MOBILE"] = "mobile";
+    DeviceType["TABLET"] = "tablet";
+    DeviceType["DESKTOP"] = "desktop";
+})(DeviceType || (DeviceType = {}));
+const DESKTOP_BREAKPOINT = 1024;
+const TABLET_BREAKPOINT = 768;
+const DeviceContext = createContext(undefined);
+const TMDeviceProvider = ({ children }) => {
+    const [deviceType, setDeviceType] = useState(DeviceType.DESKTOP);
+    const updateDeviceType = () => {
+        const width = window.innerWidth;
+        if (width >= DESKTOP_BREAKPOINT) {
+            setDeviceType(DeviceType.DESKTOP);
+        }
+        else if (width >= TABLET_BREAKPOINT) {
+            setDeviceType(DeviceType.TABLET);
+        }
+        else {
+            setDeviceType(DeviceType.MOBILE);
+        }
+    };
+    useEffect(() => {
+        updateDeviceType();
+        window.addEventListener('resize', updateDeviceType);
+        return () => window.removeEventListener('resize', updateDeviceType);
+    }, []);
+    const contextValue = useMemo(() => ({ deviceType }), [deviceType]);
+    return (_jsxs(DeviceContext.Provider, { value: contextValue, children: [" ", children, " "] }));
+};
+const useDeviceType = () => {
+    const context = useContext(DeviceContext);
+    if (!context) {
+        throw new Error('DeviceProvider does not exsist');
+    }
+    return context.deviceType;
+};
+export { DeviceType, useDeviceType, TMDeviceProvider, DeviceContext };

package/lib/components/base/TMTooltip.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { Tooltip } from 'devextreme-react/cjs/tooltip';
-import { TABLET_WIDTH, genUniqueId, useWindowWidth } from '../../helper';
+import { genUniqueId } from '../../helper';
+import { DeviceType, useDeviceType } from './TMDeviceProvider';
 const TMTooltip = ({ children, position, content, hideAfterDelay }) => {
     const [showTooltip, setShowTooltip] = useState(false);
     const [id, setID] = useState('');
@@ -10,9 +11,10 @@ const TMTooltip = ({ children, position, content, hideAfterDelay }) => {
         window.addEventListener('click', () => setShowTooltip(false));
         return () => window.removeEventListener('click', () => setShowTooltip(false));
     }, []);
-    const width = useWindowWidth();
-    let isDesktop = width > TABLET_WIDTH;
-    return (_jsxs("div", { children: [_jsx("div", { id: `idContainerTooltip${id}`, style: { display: 'flex', alignItems: 'center', height: 'max-content', width: 'max-content' }, onMouseEnter: () => { setShowTooltip(true); }, onMouseLeave: () => { setShowTooltip(false); }, onClick: () => { if (isDesktop || !hideAfterDelay)
+    // const width = useWindowWidth();
+    // let isDesktop = width > TABLET_WIDTH;
+    const deviceType = useDeviceType();
+    return (_jsxs("div", { children: [_jsx("div", { id: `idContainerTooltip${id}`, style: { display: 'flex', alignItems: 'center', height: 'max-content', width: 'max-content' }, onMouseEnter: () => { setShowTooltip(true); }, onMouseLeave: () => { setShowTooltip(false); }, onClick: () => { if (deviceType === DeviceType.DESKTOP || !hideAfterDelay)
                     return; setTimeout(() => { setShowTooltip(false); }, 1500); }, children: children }), content &&
                 _jsx(Tooltip, { target: `#idContainerTooltip${id}`, hideOnOutsideClick: true, visible: showTooltip, position: position ?? 'bottom', onHidden: () => setShowTooltip(false), children: content })] }));
 };

package/lib/components/editors/TMTextArea.js

@@ -2,12 +2,12 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useState, useEffect, useRef } from 'react';
 import { StyledEditorButtonIcon, StyledEditorContainer, StyledEditorIcon, StyledEditorLabel, StyledTextareaEditor } from './TMEditorStyled';
 import { FontSize } from '../../utils/theme';
-import { useWindowWidth } from '../../helper';
 import TMContextMenu, { useContextMenu } from '../base/TMContextMenuOLD';
 import { TMExceptionBoxManager } from '../base/TMPopUp';
 import TMLayoutContainer, { TMLayoutItem } from '../base/TMLayout';
 import TMVilViewer from '../base/TMVilViewer';
 import TMTooltip from '../base/TMTooltip';
+import { DeviceType, useDeviceType } from '../base/TMDeviceProvider';
 const TMTextArea = (props) => {
     const { label = '', value = '', width = '100%', height = 'auto', autoFocus = false, validationItems = [], disabled = false, isModifiedWhen = false, fontSize = FontSize.defaultFontSize, elementStyle = {}, icon = null, labelPosition = 'left', readOnly = false, onValueChanged, onBlur, placeHolder, formulaItems = [], buttons = [], maxHeight = 'auto' } = props;
     const inputRef = useRef(null);
@@ -15,7 +15,8 @@ const TMTextArea = (props) => {
     const [currentValue, setCurrentValue] = useState(value);
     const [formulaMenuItems, setFormulaMenuItems] = useState([]);
     const { clicked, setClicked, points, setPoints } = useContextMenu();
-    let screenWidth = useWindowWidth();
+    // let screenWidth = useWindowWidth();
+    const deviceType = useDeviceType();
     useEffect(() => {
         setCurrentValue(value);
     }, [value]);
@@ -59,7 +60,7 @@ const TMTextArea = (props) => {
                         const y = e.clientY - bounds.top;
                         // set the x and y coordinates of our users right click
                         setPoints({ x, y });
-                    }, "$isMobile": screenWidth < 640, "$maxHeight": maxHeight, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, "$fontSize": fontSize, "$width": width }), buttons.map((buttonItem, index) => {
+                    }, "$isMobile": deviceType === DeviceType.MOBILE, "$maxHeight": maxHeight, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, "$fontSize": fontSize, "$width": width }), buttons.map((buttonItem, index) => {
                     return (_jsx(StyledEditorButtonIcon, { onClick: buttonItem.onClick, "$index": index, "$transform": '-26px', children: _jsx(TMTooltip, { content: buttonItem.text, children: buttonItem.icon }) }, index));
                 }), formulaItems.length > 0 && clicked && (_jsx(TMContextMenu, { menuData: formulaMenuItems, top: points.y, left: points.x, onMenuItemClick: (formula) => insertText(formula) })), _jsx(TMVilViewer, { vil: validationItems })] });
     };

package/lib/components/editors/TMTextBox.js

@@ -3,13 +3,14 @@ import { useState, useEffect, useRef } from 'react';
 import styled from 'styled-components';
 import { StyledEditor, StyledEditorContainer, StyledEditorIcon, StyledEditorLabel, editorColorManager } from './TMEditorStyled';
 import { FontSize, TMColors } from '../../utils/theme';
-import { genUniqueId, IconClearButton, IconHide, IconShow, useWindowWidth } from '../../helper';
+import { genUniqueId, IconClearButton, IconHide, IconShow } from '../../helper';
 import ShowAlert from '../base/TMAlert';
 import { TMExceptionBoxManager } from '../base/TMPopUp';
 import TMLayoutContainer, { TMLayoutItem } from '../base/TMLayout';
 import TMVilViewer from '../base/TMVilViewer';
 import TMTooltip from '../base/TMTooltip';
 import { ContextMenu } from 'devextreme-react';
+import { DeviceType, useDeviceType } from '../base/TMDeviceProvider';
 const StyledShowPasswordIcon = styled.div `
     color: ${props => !props.$disabled ? (props.$vil.length === 0) ? !props.$isModified ? TMColors.text_normal : TMColors.isModified : editorColorManager(props.$vil) : TMColors.disabled};
     position: absolute;
@@ -38,7 +39,8 @@ const TMTextBox = ({ autoFocus, maxLength, labelColor, precision, scale, showCle
     const [formulaMenuItems, setFormulaMenuItems] = useState([]);
     const [isFocused, setIsFocused] = useState(false);
     const inputRef = useRef(null);
-    let screenWidth = useWindowWidth();
+    // let screenWidth = useWindowWidth();
+    const deviceType = useDeviceType();
     const [id, setID] = useState('');
     useEffect(() => { setID(genUniqueId()); }, []);
     useEffect(() => { setCurrentType(type); setInitialType(type); }, [type]);
@@ -140,7 +142,7 @@ const TMTextBox = ({ autoFocus, maxLength, labelColor, precision, scale, showCle
                             if (!scale && (e.key == "." || e.key == ","))
                                 e.preventDefault();
                         }
-                    }, "$isMobile": screenWidth < 640, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, "$fontSize": fontSize, "$maxValue": maxValue, "$width": width, "$type": currentType, "$borderRadius": borderRadius }), initialType === 'password' && currentValue && _jsx(StyledShowPasswordIcon, { onClick: toggleShowPassword, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: showPasswordIcon() }), initialType !== 'password' &&
+                    }, "$isMobile": deviceType === DeviceType.MOBILE, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, "$fontSize": fontSize, "$maxValue": maxValue, "$width": width, "$type": currentType, "$borderRadius": borderRadius }), initialType === 'password' && currentValue && _jsx(StyledShowPasswordIcon, { onClick: toggleShowPassword, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: showPasswordIcon() }), initialType !== 'password' &&
                     _jsxs("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', position: 'absolute', right: '6px', top: label.length > 0 ? '20px' : '7px', pointerEvents: disabled ? 'none' : 'auto', opacity: disabled ? 0.4 : 1 }, children: [showClearButton && currentValue &&
                                 _jsx(StyledTextBoxEditorButton, { onClick: () => {
                                         onValueChanged?.({ target: { value: undefined } });

package/lib/components/forms/TMSaveForm.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState } from 'react';
 import { ResultTypes } from '@topconsultnpm/sdk-ts-beta';
 import { FormModes } from '../../ts/types';
-import { IconArrowDown, IconArrowLeft, IconArrowUp, IconCloseCircle, IconHide, IconSave, IconShow, IconUndo, IconWarning, MOBILE_WIDTH, SDKUI_Localizator, getColor, useWindowWidth } from '../../helper';
+import { IconArrowDown, IconArrowLeft, IconArrowUp, IconCloseCircle, IconHide, IconSave, IconShow, IconUndo, IconWarning, SDKUI_Localizator, getColor } from '../../helper';
 import { ButtonNames, TMExceptionBoxManager, TMMessageBoxManager } from '../base/TMPopUp';
 import TMLayoutContainer, { TMCard, TMLayoutItem, TMSplitterLayout } from '../base/TMLayout';
 import { StyledResultTypeContainer, StyledToolbarForm } from '../base/Styled';
@@ -10,11 +10,13 @@ import TMButton from '../base/TMButton';
 import { TMColors } from '../../utils/theme';
 import TMValidationItemsList from '../grids/TMValidationItemsList';
 import TMModal from '../base/TMModal';
+import { DeviceType, useDeviceType } from '../base/TMDeviceProvider';
 const TMSaveForm = ({ id, formMode = FormModes.Update, title, children, isModal, exception, customToolbarElements, hasNavigation, showBackButton, onClose, onSaveAsync, onNext, onPrev, canNext, canPrev, isModified, onShowList, validationItems = [], onUndo, onCancel, width, height }) => {
     const [showList, setShowList] = useState(true);
     const [showErrorGrid, setShowErrorGrid] = useState(false);
-    let windowWidth = useWindowWidth();
-    let isMobile = windowWidth <= MOBILE_WIDTH;
+    // let windowWidth = useWindowWidth()
+    // let isMobile: boolean = windowWidth <= MOBILE_WIDTH;
+    const deviceType = useDeviceType();
     const doSaveAsync = async () => { try {
         await onSaveAsync?.();
     }
@@ -66,7 +68,7 @@ const TMSaveForm = ({ id, formMode = FormModes.Update, title, children, isModal,
     const doClose = () => {
         if (!isModified) {
             onClose?.();
-            isMobile && setShowList(true), onShowList?.(true);
+            deviceType === DeviceType.MOBILE && setShowList(true), onShowList?.(true);
             return;
         }
         TMMessageBoxManager.show({
@@ -76,9 +78,9 @@ const TMSaveForm = ({ id, formMode = FormModes.Update, title, children, isModal,
                     if (e == ButtonNames.CANCEL)
                         return;
                     if (e == ButtonNames.NO)
-                        isMobile && (onUndo(), setShowList(true), onShowList?.(true));
+                        deviceType === DeviceType.MOBILE && (onUndo(), setShowList(true), onShowList?.(true));
                     if (e == ButtonNames.YES)
-                        isMobile ? (await onSaveAsync?.(), setShowList(true), onShowList?.(true)) : await onSaveAsync?.();
+                        deviceType === DeviceType.MOBILE ? (await onSaveAsync?.(), setShowList(true), onShowList?.(true)) : await onSaveAsync?.();
                     onClose?.();
                 }
                 catch (ex) {
@@ -93,8 +95,8 @@ const TMSaveForm = ({ id, formMode = FormModes.Update, title, children, isModal,
         return (_jsxs(TMLayoutContainer, { direction: 'vertical', children: [_jsx(TMLayoutItem, { height: 'max-content', children: _jsxs(StyledToolbarForm, { children: [showBackButton && _jsx(TMButton, { btnStyle: 'toolbar', color: 'tertiary', caption: SDKUI_Localizator.Back, icon: _jsx(IconArrowLeft, {}), elementStyle: { marginRight: '10px' }, onClick: () => { doClose(); } }), _jsx(TMButton, { caption: SDKUI_Localizator.Save, icon: _jsx(IconSave, {}), keyGesture: "alt+s", backgroundColor: errorsCount > 0 ? TMColors.error : isModified ? TMColors.success : TMColors.disabled, onClick: doSaveAsync, color: "success", btnStyle: "toolbar", disabled: !(isModified && errorsCount <= 0) }), hasNavigation && _jsx(TMButton, { caption: SDKUI_Localizator.Previous, icon: _jsx(IconArrowUp, {}), btnStyle: "toolbar", disabled: !canPrev || isModified || formMode == FormModes.Create || formMode == FormModes.Duplicate, onClick: doPrev }), hasNavigation && _jsx(TMButton, { caption: SDKUI_Localizator.Next, icon: _jsx(IconArrowDown, {}), btnStyle: "toolbar", disabled: !canNext || isModified || formMode == FormModes.Create || formMode == FormModes.Duplicate, onClick: doNext }), _jsx(TMButton, { caption: SDKUI_Localizator.Undo, icon: _jsx(IconUndo, {}), keyGesture: "alt+z", color: "tertiary", btnStyle: "toolbar", disabled: isModified ? false : true, onClick: onUndo }), customToolbarElements, warningsCount > 0 &&
                                 _jsx(TMLayoutItem, { width: 'fit-content', height: '90%', children: _jsxs(StyledResultTypeContainer, { style: { marginLeft: '10px' }, onClick: () => setShowErrorGrid(!showErrorGrid), "$resultType": ResultTypes.WARNING, children: [" ", _jsx(IconWarning, { fontSize: 16 }), " ", _jsx("span", { children: warningsCount })] }) }), errorsCount > 0 &&
                                 _jsx(TMLayoutItem, { width: 'fit-content', height: '90%', children: _jsxs(StyledResultTypeContainer, { style: { marginLeft: warningsCount <= 0 ? '10px' : '0' }, onClick: () => setShowErrorGrid(!showErrorGrid), "$resultType": ResultTypes.ERROR, children: [" ", _jsx(IconCloseCircle, { fontSize: 16 }), " ", _jsx("span", { children: errorsCount })] }) }), onShowList &&
-                                _jsx("div", { style: { right: '10px', position: 'absolute' }, children: !isMobile && _jsx(TMButton, { caption: showList ? SDKUI_Localizator.List_Hide : SDKUI_Localizator.List_Show, icon: showList ? _jsx(IconHide, {}) : _jsx(IconShow, {}), keyGesture: "alt+h", onClick: () => { setShowList(!showList); onShowList?.(!showList); }, btnStyle: 'toolbar' }) }), (formMode == FormModes.Create || formMode == FormModes.Duplicate) &&
-                                _jsx("div", { style: { right: '50px', position: 'absolute' }, children: !isMobile && onCancel && _jsx(TMButton, { icon: _jsx(IconCloseCircle, {}), onClick: onCancel, btnStyle: 'toolbar', caption: SDKUI_Localizator.Cancel, color: 'tertiary' }) })] }) }), _jsx(TMLayoutItem, { children: _jsxs(TMSplitterLayout, { separatorSize: 4, direction: 'vertical', start: showErrorGrid && validationItems.length > 0 ? ['80%', '20%'] : ['100%', '0'], min: ['0', '0'], children: [_jsx(TMCard, { showBorder: false, children: exception
+                                _jsx("div", { style: { right: '10px', position: 'absolute' }, children: deviceType !== DeviceType.MOBILE && _jsx(TMButton, { caption: showList ? SDKUI_Localizator.List_Hide : SDKUI_Localizator.List_Show, icon: showList ? _jsx(IconHide, {}) : _jsx(IconShow, {}), keyGesture: "alt+h", onClick: () => { setShowList(!showList); onShowList?.(!showList); }, btnStyle: 'toolbar' }) }), (formMode == FormModes.Create || formMode == FormModes.Duplicate) &&
+                                _jsx("div", { style: { right: '50px', position: 'absolute' }, children: deviceType !== DeviceType.MOBILE && onCancel && _jsx(TMButton, { icon: _jsx(IconCloseCircle, {}), onClick: onCancel, btnStyle: 'toolbar', caption: SDKUI_Localizator.Cancel, color: 'tertiary' }) })] }) }), _jsx(TMLayoutItem, { children: _jsxs(TMSplitterLayout, { separatorSize: 4, direction: 'vertical', start: showErrorGrid && validationItems.length > 0 ? ['80%', '20%'] : ['100%', '0'], min: ['0', '0'], children: [_jsx(TMCard, { showBorder: false, children: exception
                                     ?
                                         _jsx("div", { style: { width: '100%', height: '100%', marginTop: '50px', display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', color: getColor('error') }, children: 'Si è verificato un errore' })
                                     : _jsx(_Fragment, { children: children }) }), showErrorGrid && validationItems.length > 0 ? _jsx(TMCard, { scrollY: true, padding: false, showBorder: false, children: _jsx(TMValidationItemsList, { validationItems: validationItems }) }) : _jsx(_Fragment, {})] }) })] }));

package/lib/components/index.d.ts

@@ -46,3 +46,4 @@ export { default as SettingsAppearance } from "./settings/SettingsAppearance";
 export * from "./viewers/TMTidViewer";
 export * from "./viewers/TMMidViewer";
 export * from "./viewers/TMDataListItemViewer";
+export * from "./base/TMDeviceProvider";

package/lib/components/index.js

@@ -61,3 +61,5 @@ export { default as SettingsAppearance } from "./settings/SettingsAppearance";
 export * from "./viewers/TMTidViewer";
 export * from "./viewers/TMMidViewer";
 export * from "./viewers/TMDataListItemViewer";
+//TMDeviceProvider
+export * from "./base/TMDeviceProvider";

package/lib/components/pages/TMPage.js

@@ -4,7 +4,7 @@ import { SDK_Globals, ObjectClasses } from "@topconsultnpm/sdk-ts-beta";
 import DataGrid, { Column, GroupPanel, Grouping, HeaderFilter, LoadPanel, Pager, Paging, Scrolling, SearchPanel, Selection } from "devextreme-react/cjs/data-grid";
 import { PlatformObjectService } from "../../services/platform_services";
 import { FormModes, TMProgressOptions } from "../../ts";
-import { Globalization, IconAdd, IconColumns, IconCopy, IconDelete, IconDuplicate, IconHide, IconMail, IconMenuVertical, IconOpenInNew, IconRefresh, IconShow, MOBILE_WIDTH, SDKUI_Globals, SDKUI_Localizator, calcSaveFormTitle, canNext, canPrev, getNext, getPrev, useWindowWidth } from "../../helper";
+import { Globalization, IconAdd, IconColumns, IconCopy, IconDelete, IconDuplicate, IconHide, IconMail, IconMenuVertical, IconOpenInNew, IconRefresh, IconShow, SDKUI_Globals, SDKUI_Localizator, calcSaveFormTitle, canNext, canPrev, getNext, getPrev } from "../../helper";
 import TMSpinner from "../base/TMSpinner";
 import { ButtonNames, TMExceptionBoxManager, TMMessageBoxManager } from "../base/TMPopUp";
 import TMLayoutContainer, { TMCard, TMLayoutItem, TMSplitterLayout } from "../base/TMLayout";
@@ -12,12 +12,14 @@ import TMButton from "../base/TMButton";
 import TMDropDownMenu from "../base/TMDropDownMenu";
 import { FontSize, TMColors } from "../../utils/theme";
 import selectionManagerImage from '../../assets/multipleSelectionManager.jpg';
+import { DeviceType, useDeviceType } from "../base/TMDeviceProvider";
 const TMToolbarButton = ({ showTooltip = true, color = 'primary', icon, caption = '', onClick, disabled, keyGesture }) => {
     return (_jsx(TMButton, { keyGesture: keyGesture, color: color, disabled: disabled, caption: caption, onClick: () => { onClick && onClick(); }, icon: icon, showTooltip: showTooltip, btnStyle: 'toolbar' }));
 };
 const TMPage = ({ id, objClass = ObjectClasses.None, objType, listInsteadOfContent, detailInsteadOfContent, routePage, customButtons, customColumns, searchText, detailForm, detailTitlePathKeys, deps, abortSignal, onProgressChanged, onSelectionChanged, onCountersChanged }) => {
-    let width = useWindowWidth();
-    let isMobile = width <= MOBILE_WIDTH;
+    // let width = useWindowWidth();
+    // let isMobile: boolean = width <= MOBILE_WIDTH;
+    const deviceType = useDeviceType();
     let gridInstance;
     const [showId, setShowId] = useState(false);
     const [showAllColumns, setShowAllColumns] = useState(false);
@@ -61,8 +63,8 @@ const TMPage = ({ id, objClass = ObjectClasses.None, objType, listInsteadOfConte
             TMSpinner.hide();
         }
     };
-    const duplicate = () => { isMobile && setShowList(false); setFormMode(FormModes.Duplicate); };
-    const create = () => { isMobile && setShowList(false); setFormMode(FormModes.Create); };
+    const duplicate = () => { deviceType === DeviceType.MOBILE && setShowList(false); setFormMode(FormModes.Duplicate); };
+    const create = () => { deviceType === DeviceType.MOBILE && setShowList(false); setFormMode(FormModes.Create); };
     const deleteItems = async () => {
         let msg = "";
         switch (selectedItems.length) {
@@ -137,7 +139,7 @@ const TMPage = ({ id, objClass = ObjectClasses.None, objType, listInsteadOfConte
             return null;
         return React.cloneElement(detailForm, {
             id: selectedItems.length == 0 ? -1 : selectedItems[0].id,
-            showBackButton: isMobile,
+            showBackButton: deviceType === DeviceType.MOBILE,
             formMode: formMode,
             canNext: canNext(visibleItems, selectedItems),
             onNext: () => { setSelectedItems([getNext(visibleItems, selectedItems)]); },
@@ -176,16 +178,16 @@ const TMPage = ({ id, objClass = ObjectClasses.None, objType, listInsteadOfConte
         });
     };
     const cellRenderObjectIcon = (data) => { return PlatformObjectService.getIcon(objClass, data.row.data); };
-    return (_jsxs(TMSplitterLayout, { direction: "horizontal", showSeparator: showList && !isMobile, start: showList ? !isMobile ? ['30%', '70%'] : ['100%', '0%'] : ['0', '100%'], min: ['0px', '0px'], children: [listInsteadOfContent ??
+    return (_jsxs(TMSplitterLayout, { direction: "horizontal", showSeparator: showList && deviceType !== DeviceType.MOBILE, start: showList ? deviceType !== DeviceType.MOBILE ? ['30%', '70%'] : ['100%', '0%'] : ['0', '100%'], min: ['0px', '0px'], children: [listInsteadOfContent ??
                 _jsxs(TMCard, { borderRadius: false, fontWeight: "bold", showBorder: false, title: objNames, children: [_jsx(ToolbarPage, {}), _jsxs(DataGrid, { disabled: selectionListDisabled, ref: (grid) => (gridInstance = grid), height: "calc(100% - 35px)", width: 'calc(100% - 5px)', dataSource: items, keyExpr: "id", allowColumnResizing: true, columnResizingMode: "widget", allowColumnReordering: true, showBorders: false, onContentReady: (e) => {
                                 setVisibleItems(e.component.getVisibleRows().map((row) => { return row.data; }));
                                 e.component.selectRows(selectedItems?.map((item) => item.id), false);
                             }, onRowClick: (row) => {
-                                if (!isMobile)
+                                if (deviceType !== DeviceType.MOBILE)
                                     return;
                                 setSelectedItems([row.data]);
                                 setShowList(false);
-                            }, showColumnLines: SDKUI_Globals.dataGridShowColumnLines, showRowLines: SDKUI_Globals.dataGridShowRowLines, onSelectionChanged: (e) => { setSelectedItems(e.selectedRowsData); onSelectionChanged?.(e.selectedRowsData); }, children: [_jsx(GroupPanel, { visible: !!(!isMobile && showAllColumns) }), _jsx(SearchPanel, { visible: false }), _jsx(Grouping, { autoExpandAll: false }), _jsx(HeaderFilter, { visible: true }), _jsx(Selection, { mode: "multiple", showCheckBoxesMode: "onClick", selectAllMode: 'allPages' }), _jsx(Scrolling, { mode: "standard", useNative: SDKUI_Globals.dataGridUseNativeScrollbar }), _jsx(Paging, { pageSize: 25 }), _jsx(Pager, { visible: true, showInfo: true, showNavigationButtons: true }), _jsx(LoadPanel, { enabled: true }), _jsx(Column, { width: 20, cellRender: cellRenderObjectIcon }), _jsx(Column, { width: 'auto', visible: showId, dataField: "id", caption: "ID" }), _jsx(Column, { width: 250, dataField: "name", caption: SDKUI_Localizator.Name, sortOrder: "asc" }), _jsx(Column, { width: 250, visible: showAllColumns, dataField: "description", caption: SDKUI_Localizator.Description }), customColumns?.map((item, index) => { return React.cloneElement(item, { key: index, visible: showAllColumns }); }), _jsx(Column, { width: 'auto', visible: showAllColumns, dataField: "ownerID", caption: SDKUI_Localizator.OwnerID }), _jsx(Column, { width: 'auto', visible: showAllColumns, dataField: "ownerName", caption: SDKUI_Localizator.OwnerName }), _jsx(Column, { width: 'auto', dataType: "date", format: Globalization.getDateDisplayFormat(), visible: showAllColumns, dataField: "creationTime", caption: SDKUI_Localizator.CreationTime }), _jsx(Column, { width: 'auto', dataType: "date", format: Globalization.getDateDisplayFormat(), visible: showAllColumns, dataField: "lastUpdateTime", caption: SDKUI_Localizator.LastUpdateTime })] })] }), detailInsteadOfContent ??
+                            }, showColumnLines: SDKUI_Globals.dataGridShowColumnLines, showRowLines: SDKUI_Globals.dataGridShowRowLines, onSelectionChanged: (e) => { setSelectedItems(e.selectedRowsData); onSelectionChanged?.(e.selectedRowsData); }, children: [_jsx(GroupPanel, { visible: !!(deviceType !== DeviceType.MOBILE && showAllColumns) }), _jsx(SearchPanel, { visible: false }), _jsx(Grouping, { autoExpandAll: false }), _jsx(HeaderFilter, { visible: true }), _jsx(Selection, { mode: "multiple", showCheckBoxesMode: "onClick", selectAllMode: 'allPages' }), _jsx(Scrolling, { mode: "standard", useNative: SDKUI_Globals.dataGridUseNativeScrollbar }), _jsx(Paging, { pageSize: 25 }), _jsx(Pager, { visible: true, showInfo: true, showNavigationButtons: true }), _jsx(LoadPanel, { enabled: true }), _jsx(Column, { width: 20, cellRender: cellRenderObjectIcon }), _jsx(Column, { width: 'auto', visible: showId, dataField: "id", caption: "ID" }), _jsx(Column, { width: 250, dataField: "name", caption: SDKUI_Localizator.Name, sortOrder: "asc" }), _jsx(Column, { width: 250, visible: showAllColumns, dataField: "description", caption: SDKUI_Localizator.Description }), customColumns?.map((item, index) => { return React.cloneElement(item, { key: index, visible: showAllColumns }); }), _jsx(Column, { width: 'auto', visible: showAllColumns, dataField: "ownerID", caption: SDKUI_Localizator.OwnerID }), _jsx(Column, { width: 'auto', visible: showAllColumns, dataField: "ownerName", caption: SDKUI_Localizator.OwnerName }), _jsx(Column, { width: 'auto', dataType: "date", format: Globalization.getDateDisplayFormat(), visible: showAllColumns, dataField: "creationTime", caption: SDKUI_Localizator.CreationTime }), _jsx(Column, { width: 'auto', dataType: "date", format: Globalization.getDateDisplayFormat(), visible: showAllColumns, dataField: "lastUpdateTime", caption: SDKUI_Localizator.LastUpdateTime })] })] }), detailInsteadOfContent ??
                 _jsx(TMLayoutItem, { children: selectedItems.length == 1 || formMode == FormModes.Create || formMode == FormModes.Duplicate ?
                         _jsx(TMCard, { borderRadius: false, fontWeight: "bold", showBorder: false, title: calcSaveFormTitle(objName, formMode, selectedItems.length == 0 ? -1 : selectedItems[0].id, detailTitlePathKeys), children: getDetailFormWithProps() })
                         :

package/lib/components/query/TMQueryResultForm.js

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 import { SDK_Globals, AppModules } from '@topconsultnpm/sdk-ts-beta';
 import TMQueryResult from './TMQueryResult';
 import styled from 'styled-components';
-import { IconApply, IconCloseOutline, IconUser, IconInfo, IconRefresh, IconSync, IconDownload, IconPreview, IconPrinter, IconCheckIn, IconEdit, IconStar, IconRecursiveOps, IconMail, IconDcmtTypeOnlyMetadata, IconCopy, IconRelation, IconSignature, IconDelete, IconUndo, IconCloseCircle, IconMenuVertical, IconArchiveDoc, IconDuplicate, IconSubstFile, IconConvertFilePdf, IconCheckFile, IconBatchUpdate, IconShare, IconSharedDcmt, IconSearch, IconExportTo, IconShow, IconSettings, IconActivityLog, SDKUI_Localizator, useWindowWidth, MOBILE_WIDTH, IconArrowLeft } from '../../helper';
+import { IconApply, IconCloseOutline, IconUser, IconInfo, IconRefresh, IconSync, IconDownload, IconPreview, IconPrinter, IconCheckIn, IconEdit, IconStar, IconRecursiveOps, IconMail, IconDcmtTypeOnlyMetadata, IconCopy, IconRelation, IconSignature, IconDelete, IconUndo, IconCloseCircle, IconMenuVertical, IconArchiveDoc, IconDuplicate, IconSubstFile, IconConvertFilePdf, IconCheckFile, IconBatchUpdate, IconShare, IconSharedDcmt, IconSearch, IconExportTo, IconShow, IconSettings, IconActivityLog, SDKUI_Localizator, IconArrowLeft } from '../../helper';
 import { FormModes } from '../../ts';
 import { TMColors } from '../../utils/theme';
 import { StyledBadge } from '../base/Styled';
@@ -19,6 +19,7 @@ import TMUserChooser from '../choosers/TMUserChooser';
 import TMApplyForm from '../forms/TMApplyForm';
 import TMTidViewer from '../viewers/TMTidViewer';
 import TMListView from '../base/TMListView';
+import { DeviceType, useDeviceType } from '../base/TMDeviceProvider';
 export var SearchResultContext;
 (function (SearchResultContext) {
     SearchResultContext["METADATA_SEARCH"] = "metadataSearch";
@@ -221,8 +222,9 @@ const TMQueryResultForm = ({ onUpdate, isModal, onClose, context = SearchResultC
         _jsxs(StyledTitleContainer, { children: [context === SearchResultContext.WORKFLOW_APPROVE ? _jsx(IconActivityLog, { fontSize: 14 }) : context === SearchResultContext.FAVORITES ? _jsx(IconStar, {}) : context === SearchResultContext.RECENT ? _jsx(IconRefresh, {}) : '', context === SearchResultContext.WORKFLOW_APPROVE ? SDKUI_Localizator.WorkflowApproval : context === SearchResultContext.FAVORITES ? SDKUI_Localizator.Favorites : context === SearchResultContext.RECENT ? SDKUI_Localizator.Recent : ''] }, context === SearchResultContext.WORKFLOW_APPROVE ? 'title2' : context === SearchResultContext.FAVORITES ? 'title0' : context === SearchResultContext.RECENT ? 'title1' : '')
     ];
     const [toolbar, setToolbar] = useState(toolbarElements);
-    let width = useWindowWidth();
-    let isMobile = width <= MOBILE_WIDTH;
+    // let width = useWindowWidth()
+    const deviceType = useDeviceType();
+    let isMobile = deviceType === DeviceType.MOBILE;
     useEffect(() => { if (isMobile) {
         setCurrentSearchResult1(undefined);
         setCurrentSearchResult2(undefined);

package/lib/components/sidebar/TMHeader.js

@@ -8,6 +8,7 @@ import { FontSize, TMColors } from '../../utils/theme';
 import { ButtonNames, TMMessageBoxManager } from '../base/TMPopUp';
 import Logo from '../../assets/Toppy-generico.png';
 import { ApplicationThemeColor } from './TMSidebarItem';
+import { DeviceType, useDeviceType } from '../base/TMDeviceProvider';
 export var TMSearchContext;
 (function (TMSearchContext) {
     TMSearchContext["JOBS"] = "jobs";
@@ -34,8 +35,9 @@ const StyledChaBotBtnWrapper = styled.div ` position: relative; cursor: pointer;
 const StyledChatBotToppyContainer = styled.div ` background-color: orange; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50px; position: absolute; left: -10px; `;
 const StyledToppyImage = styled.div ` display: flex; align-items: center; justify-content: center; width: 25px; height: 25px; border-radius: 50px; overflow: hidden; background-color: white; `;
 export const TMSearchBar = ({ searchValue, onSearchValueChanged, maxWidth, marginLeft }) => {
-    const size = useWindowWidth();
-    return (_jsxs(StyledSearchBarContainer, { style: { maxWidth: maxWidth ? maxWidth : size <= 640 ? '65%' : '650px', marginLeft: marginLeft ? marginLeft : size <= 640 ? '10px' : '50px' }, "$isMobile": size <= 640, children: [_jsx(IconSearch, { fontSize: 12, color: '#00000060', style: { position: 'absolute', width: '20px', height: '20px', left: '5px', top: '5px', zIndex: 1 } }), _jsx(StyledSearchBar, { placeholder: SDKUI_Localizator.Search + '...', type: "text", value: searchValue, onChange: (e) => onSearchValueChanged(e.target.value) }), searchValue.length > 0 && _jsx(IconCloseOutline, { onClick: () => onSearchValueChanged(''), color: '#00000060', style: { cursor: 'pointer', position: 'absolute', width: '20px', height: '20px', right: '5px', top: '5px', zIndex: 1 } })] }));
+    // const size = useWindowWidth()
+    const deviceType = useDeviceType();
+    return (_jsxs(StyledSearchBarContainer, { style: { maxWidth: maxWidth ? maxWidth : deviceType === DeviceType.MOBILE ? '65%' : '650px', marginLeft: marginLeft ? marginLeft : deviceType === DeviceType.MOBILE ? '10px' : '50px' }, "$isMobile": deviceType === DeviceType.MOBILE, children: [_jsx(IconSearch, { fontSize: 12, color: '#00000060', style: { position: 'absolute', width: '20px', height: '20px', left: '5px', top: '5px', zIndex: 1 } }), _jsx(StyledSearchBar, { placeholder: SDKUI_Localizator.Search + '...', type: "text", value: searchValue, onChange: (e) => onSearchValueChanged(e.target.value) }), searchValue.length > 0 && _jsx(IconCloseOutline, { onClick: () => onSearchValueChanged(''), color: '#00000060', style: { cursor: 'pointer', position: 'absolute', width: '20px', height: '20px', right: '5px', top: '5px', zIndex: 1 } })] }));
 };
 const TMHeader = ({ showSearchBar = true, clearSearchJobValue, clearSearchQEValue, searchContext = TMSearchContext.JOBS, onChangePassword, onLogout, settingsMenuContext, onSeacrhJobsValueChange, onSeacrhJobslistValueChange, onSeacrhProcessMonitorValueChange, onSeacrhProcessValueChange, onSeacrhPlatformValueChange, onSeacrhQEValueChange, onSettingsClick }) => {
     const [menuStatus, setMenuStatus] = useState(false);

package/package.json

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