@topconsultnpm/sdkui-react 6.20.0-dev1.5 → 6.20.0-dev1.50

package/lib/components/NewComponents/FloatingMenuBar/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './TMFloatingMenuBar';
+export * from './types';

package/lib/components/NewComponents/FloatingMenuBar/index.js

@@ -0,0 +1,2 @@
+export { default } from './TMFloatingMenuBar';
+export * from './types';

package/lib/components/NewComponents/FloatingMenuBar/styles.d.ts

@@ -0,0 +1,47 @@
+export declare const Overlay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $visible: boolean;
+}>> & string;
+export declare const FloatingContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, {
+    $x: number;
+    $y: number;
+    $orientation: "horizontal" | "vertical";
+    $isDragging: boolean;
+    $isConfigMode: boolean;
+    $isConstrained?: boolean;
+}>, {
+    $x: number;
+    $y: number;
+    $orientation: "horizontal" | "vertical";
+    $isDragging: boolean;
+    $isConfigMode: boolean;
+    $isConstrained?: boolean;
+}>> & string;
+export declare const GripHandle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $orientation: "horizontal" | "vertical";
+}>> & string;
+export declare const Separator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $orientation: "horizontal" | "vertical";
+}>> & string;
+export declare const MenuButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $isActive?: boolean;
+}>> & string;
+export declare const ConfigButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const ApplyButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const ContextMenuButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$isActive"> & {
+    $isActive?: boolean;
+}, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, never>> & string;
+export declare const AddButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const RemoveButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const UndoButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const DraggableItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $isDragging: boolean;
+    $isDragOver: boolean;
+}>> & string;
+export declare const ContextMenuWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ButtonGroup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $orientation: "horizontal" | "vertical";
+}>> & string;

package/lib/components/NewComponents/FloatingMenuBar/styles.js

@@ -0,0 +1,346 @@
+import styled, { keyframes, css } from 'styled-components';
+const fadeIn = keyframes `
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+`;
+const shake = keyframes `
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-2px); }
+  75% { transform: translateX(2px); }
+`;
+export const Overlay = styled.div `
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.8);
+  z-index: 9998;
+  display: ${props => props.$visible ? 'block' : 'none'};
+  animation: ${fadeIn} 0.2s ease-out;
+  backdrop-filter: blur(2px);
+
+  [data-theme='dark'] & {
+    background: rgba(0, 0, 0, 0.8);
+  }
+`;
+export const FloatingContainer = styled.div.attrs(props => ({
+    style: {
+        left: `${props.$x}px`,
+        top: `${props.$y}px`,
+    },
+})) `
+  position: ${props => props.$isConstrained ? 'absolute' : 'fixed'};
+  z-index: ${props => props.$isConfigMode ? 9999 : 10000};
+  display: flex;
+  flex-direction: ${props => props.$orientation === 'horizontal' ? 'row' : 'column'};
+  align-items: center;
+  background: linear-gradient(135deg, #0071BC 0%, #1B1464 100%);
+  border: 1px solid #667eea;
+  border-radius: 14px;
+  padding: 6px;
+  gap: 3px;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3),
+              0 6px 16px rgba(0, 0, 0, 0.2);
+  cursor: ${props => props.$isDragging ? 'grabbing' : 'default'};
+  user-select: none;
+  animation: ${props => props.$isConfigMode && css `${shake} 0.3s ease-in-out`};
+  transition: none;
+
+  &:hover {
+    background: linear-gradient(135deg, #0071BC 0%, #1B1464 100%);
+    border: 1px solid #667eea;
+    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3),
+                0 6px 16px rgba(0, 0, 0, 0.2);
+  }
+
+  [data-theme='dark'] & {
+    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+    border: 1px solid #1a1a2e;
+    
+    &:hover {
+      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+      border: 1px solid #1a1a2e;
+    }
+  }
+`;
+export const GripHandle = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: ${props => props.$orientation === 'horizontal' ? '10px 6px' : '6px 10px'};
+  cursor: grab;
+  color: rgba(255, 255, 255, 0.7);
+  transition: all 0.2s ease;
+  border-radius: 6px;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: rgba(255, 255, 255, 1);
+  }
+
+  &:active {
+    cursor: grabbing;
+    background: rgba(255, 255, 255, 0.15);
+  }
+
+  svg {
+    width: 14px;
+    height: 14px;
+  }
+`;
+export const Separator = styled.div `
+  background: rgba(255, 255, 255, 0.25);
+  width: ${props => props.$orientation === 'horizontal' ? '1px' : '100%'};
+  height: ${props => props.$orientation === 'horizontal' ? '24px' : '1px'};
+  margin: ${props => props.$orientation === 'horizontal' ? '0 4px' : '4px 0'};
+  flex-shrink: 0;
+`;
+export const MenuButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  background: transparent;
+  border: none;
+  border-radius: 8px;
+  color: white;
+  font-size: 16px;
+  cursor: pointer;
+  transition: background 0.2s ease;
+  position: relative;
+
+  &:hover:not(:disabled) {
+    background: rgba(255, 255, 255, 0.2);
+  }
+
+  &:active:not(:disabled) {
+    opacity: 0.8;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: default;
+    color: rgba(255, 255, 255, 0.6);
+  }
+
+  svg {
+    width: 18px;
+    height: 18px;
+  }
+`;
+export const ConfigButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 21px;
+  height: 21px;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 10px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  padding: 4px;
+
+  &:hover:not(:disabled) {
+    background: rgba(255, 255, 255, 0.1);
+    color: rgba(255, 255, 255, 0.8);
+  }
+
+  &:active:not(:disabled) {
+    transform: scale(0.9);
+  }
+
+  &:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+`;
+export const ApplyButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  color: rgba(34, 197, 94, 1);
+  font-size: 10px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  padding: 3px;
+
+  &:hover:not(:disabled) {
+    background: rgba(255, 255, 255, 0.1);
+    color: rgba(34, 197, 94, 1);
+  }
+
+  &:active:not(:disabled) {
+    transform: scale(0.9);
+  }
+
+  &:disabled {
+    opacity: 0.3;
+    cursor: default;
+  }
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+`;
+export const ContextMenuButton = styled(MenuButton) `
+  svg {
+    transform: translateY(0);
+  }
+`;
+export const AddButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background: rgba(255, 255, 255, 0.15);
+  border: 1px dashed rgba(255, 255, 255, 0.4);
+  border-radius: 8px;
+  color: white;
+  font-size: 20px;
+  font-weight: bold;
+  line-height: 0;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  position: relative;
+  margin-right: 6px;
+  margin-left: 8px;
+  padding: 0;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.25);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+`;
+export const RemoveButton = styled.button `
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  width: 20px;
+  height: 20px;
+  background: #ef4444;
+  border: none;
+  border-radius: 50%;
+  color: white;
+  font-size: 14px;
+  font-weight: bold;
+  line-height: 0;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  transition: all 0.2s ease;
+  z-index: 1;
+
+  &:hover {
+    background: #dc2626;
+  }
+
+  &:active {
+    background: #b91c1c;
+  }
+`;
+export const UndoButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  color: rgba(249, 115, 22, 1);
+  font-size: 10px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  padding: 2px;
+
+  &:hover:not(:disabled) {
+    background: rgba(255, 255, 255, 0.1);
+    color: rgba(249, 115, 22, 1);
+  }
+
+  &:active:not(:disabled) {
+    transform: scale(0.9);
+  }
+
+  &:disabled {
+    opacity: 0.3;
+    cursor: default;
+  }
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+`;
+export const DraggableItem = styled.div `
+  position: relative;
+  opacity: ${props => props.$isDragging ? 0.3 : 1};
+  transform: ${props => {
+    if (props.$isDragging)
+        return 'scale(1.1) rotate(5deg)';
+    if (props.$isDragOver)
+        return 'scale(1.05)';
+    return 'scale(1)';
+}};
+  transition: all 0.2s ease;
+  filter: ${props => props.$isDragging ? 'brightness(1.3)' : 'brightness(1)'};
+  
+  ${props => props.$isDragging && css `
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+    z-index: 100;
+  `}
+  
+  ${props => props.$isDragOver && css `
+    &::before {
+      content: '';
+      position: absolute;
+      top: -4px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 40px;
+      height: 3px;
+      background: rgba(255, 255, 255, 0.8);
+      border-radius: 2px;
+      box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
+    }
+  `}
+`;
+export const ContextMenuWrapper = styled.div `
+  position: static;
+  display: contents;
+`;
+export const ButtonGroup = styled.div `
+  display: flex;
+  flex-direction: ${props => props.$orientation === 'vertical' ? 'column' : 'row'};
+  align-items: center;
+  gap: 0;
+`;

package/lib/components/NewComponents/FloatingMenuBar/types.d.ts

@@ -0,0 +1,28 @@
+import type { TMContextMenuItemProps } from '../ContextMenu';
+export interface TMFloatingMenuItem {
+    id: string;
+    name: string;
+    icon: React.ReactNode;
+    onClick: () => void;
+    disabled?: boolean;
+    isPinned?: boolean;
+}
+export interface TMFloatingMenuBarProps {
+    containerRef: React.RefObject<HTMLElement | null>;
+    contextMenuItems?: TMContextMenuItemProps[];
+    isConstrained?: boolean;
+    defaultPosition?: Position;
+    maxItems?: number;
+}
+export interface Position {
+    x: number;
+    y: number;
+}
+export interface TMFloatingMenuBarState {
+    position: Position;
+    isDragging: boolean;
+    isConfigMode: boolean;
+    orientation: 'horizontal' | 'vertical';
+    items: TMFloatingMenuItem[];
+    draggedItemIndex: number | null;
+}

package/lib/components/NewComponents/FloatingMenuBar/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/base/TMCustomButton.js

@@ -4,31 +4,68 @@ import TMModal from './TMModal';
 import styled from 'styled-components';
 import { SDKUI_Localizator, TMLayoutWaitingContainer } from '../..';
 import { getButtonAttributes, getSelectedItem } from '../../helper/dcmtsHelper';
+import { DeviceType, useDeviceType } from './TMDeviceProvider';
 const IframeContainer = styled.div `
   display: flex;
   height: 100%;
   flex-direction: column;
-  padding-left: 15px;
+  position: relative;
 `;
 const StyledIframe = styled.iframe `
   border: none;
   flex: 1;
 `;
+const LoadingOverlay = styled.div `
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(128, 128, 128, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+
+  &::after {
+    content: '';
+    width: 40px;
+    height: 40px;
+    border: 4px solid rgba(255, 255, 255, 0.3);
+    border-top-color: #fff;
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+`;
 const TMCustomButton = (props) => {
     const { button, isModal = true, formData, selectedItems, onClose } = props;
     const { appName: scriptUrl, arguments: args } = button;
+    const Device = useDeviceType();
     const iframeRef = useRef(null);
     const attributes = useMemo(() => getButtonAttributes(args, formData, selectedItems), [args, formData, selectedItems]);
     const RunOnce = button.mode === "RunOnce";
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(false);
-    const selectedItemsCount = selectedItems?.length || 0;
+    const itemsToProcess = useMemo(() => selectedItems && selectedItems.length > 0 ? selectedItems : [attributes], [selectedItems, attributes]);
     // Stati per il wait panel
-    const [showWaitPanel, setShowWaitPanel] = useState(selectedItemsCount > 0 && !RunOnce);
-    const [waitPanelText, setWaitPanelText] = useState(SDKUI_Localizator.CustomButtonActions.replaceParams(1, selectedItemsCount));
+    const [showWaitPanel, setShowWaitPanel] = useState(itemsToProcess.length > 0 && !RunOnce);
+    const [waitPanelText, setWaitPanelText] = useState(SDKUI_Localizator.CustomButtonActions.replaceParams(1, itemsToProcess.length));
     const [waitPanelValue, setWaitPanelValue] = useState(0);
-    const [waitPanelMaxValue, setWaitPanelMaxValue] = useState(selectedItemsCount);
+    const [waitPanelMaxValue, setWaitPanelMaxValue] = useState(itemsToProcess.length);
     const [abortController, setAbortController] = useState(undefined);
+    // Aggiungi timestamp all'URL per evitare cache
+    const iframeUrl = useMemo(() => {
+        if (!scriptUrl)
+            return '';
+        const separator = scriptUrl.includes('?') ? '&' : '?';
+        return `${scriptUrl}${separator}t=${Date.now()}`;
+    }, [scriptUrl]);
     const targetOrigin = useMemo(() => {
         if (!scriptUrl)
             return '*';
@@ -41,26 +78,35 @@ const TMCustomButton = (props) => {
         }
     }, [scriptUrl]);
     const handleLoad = () => setLoading(false);
+    const isMobile = Device === DeviceType.MOBILE;
     const handleError = () => {
         setLoading(false);
         setError(true);
     };
     const executeSequentially = async (controller) => {
-        if (!selectedItems)
+        if (!itemsToProcess)
             return;
-        for (const [index, item] of selectedItems.entries()) {
+        for (const [index, item] of itemsToProcess.entries()) {
             if (controller.signal.aborted)
                 break;
-            setWaitPanelText(SDKUI_Localizator.CustomButtonActions.replaceParams(index + 1, selectedItemsCount));
+            setWaitPanelText(SDKUI_Localizator.CustomButtonActions.replaceParams(index + 1, itemsToProcess.length));
             setWaitPanelValue(index);
             // Attendi che l'iframe sia pronto e invia il messaggio
             await new Promise((resolve) => {
                 const checkIframe = setInterval(() => {
                     if (iframeRef.current?.contentWindow) {
                         clearInterval(checkIframe);
-                        //devo convertire item in formData
-                        const processedItem = getSelectedItem(args, formData, item);
-                        postMessageIframe(processedItem);
+                        if (selectedItems && selectedItems.length > 0) {
+                            //devo convertire item in formData
+                            const processedItem = getSelectedItem(args, formData, item);
+                            postMessageIframe(processedItem);
+                        }
+                        else {
+                            postMessageIframe(item);
+                        }
+                        //imposta 100% se sono all'ultimo item
+                        if (index === itemsToProcess.length - 1)
+                            setWaitPanelValue(index + 1);
                         // Attendi prima di passare al prossimo
                         setTimeout(() => {
                             setWaitPanelValue(index + 1);
@@ -82,8 +128,7 @@ const TMCustomButton = (props) => {
     useEffect(() => {
         if (loading || error)
             return;
-        //if(error) clearTimeout(timeoutIframe);
-        if (!RunOnce && selectedItemsCount > 0) {
+        if (!RunOnce && itemsToProcess.length > 0) {
             // esegui per ogni item selezionato
             const controller = new AbortController();
             controller.signal.addEventListener('abort', () => {
@@ -91,7 +136,7 @@ const TMCustomButton = (props) => {
                 onClose?.();
             });
             setAbortController(controller);
-            setWaitPanelMaxValue(selectedItemsCount);
+            setWaitPanelMaxValue(itemsToProcess.length);
             executeSequentially(controller);
         }
         else {
@@ -103,7 +148,6 @@ const TMCustomButton = (props) => {
                     onClose?.();
                 }, 2000);
             }
-            //clearTimeout(timeoutIframe);
         }
     }, [loading, error, RunOnce]);
     useEffect(() => {
@@ -112,7 +156,7 @@ const TMCustomButton = (props) => {
             onClose?.();
         }
     }, []);
-    const iframeContent = (_jsxs(IframeContainer, { style: !RunOnce ? { visibility: 'hidden' } : {}, children: [error && _jsx("div", { children: "Si \u00E8 verificato un errore nel caricamento del contenuto." }), !error && _jsx(StyledIframe, { ref: iframeRef, loading: 'lazy', onLoad: handleLoad, onError: handleError, src: scriptUrl })] }));
-    return isModal && RunOnce ? (_jsx(TMModal, { title: button.title, width: '60%', height: '70%', resizable: true, expandable: true, onClose: onClose, children: iframeContent })) : !RunOnce && (_jsxs(_Fragment, { children: [_jsx(TMLayoutWaitingContainer, { showWaitPanel: showWaitPanel, waitPanelTitle: SDKUI_Localizator.CustomButtonAction, showWaitPanelPrimary: true, waitPanelTextPrimary: waitPanelText, waitPanelValuePrimary: waitPanelValue, waitPanelMaxValuePrimary: waitPanelMaxValue, showWaitPanelSecondary: false, isCancelable: true, abortController: abortController, children: undefined }), iframeContent] }));
+    const iframeContent = (_jsxs(IframeContainer, { style: !RunOnce ? { visibility: 'hidden' } : {}, children: [loading && _jsx(LoadingOverlay, {}), error && _jsx("div", { children: "Si \u00E8 verificato un errore nel caricamento del contenuto." }), !error && _jsx(StyledIframe, { ref: iframeRef, loading: 'lazy', onLoad: handleLoad, onError: handleError, src: iframeUrl })] }));
+    return isModal && RunOnce ? (_jsx(TMModal, { title: button.title, width: isMobile ? '95%' : '60%', height: isMobile ? '95%' : '70%', resizable: isMobile ? false : true, expandable: isMobile ? false : true, onClose: onClose, children: iframeContent })) : !RunOnce && (_jsxs(_Fragment, { children: [_jsx(TMLayoutWaitingContainer, { showWaitPanel: showWaitPanel, waitPanelTitle: SDKUI_Localizator.CustomButtonAction, showWaitPanelPrimary: true, waitPanelTextPrimary: waitPanelText, waitPanelValuePrimary: waitPanelValue, waitPanelMaxValuePrimary: waitPanelMaxValue, showWaitPanelSecondary: false, isCancelable: true, abortController: abortController, children: undefined }), iframeContent] }));
 };
 export default TMCustomButton;

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { IColumnProps, IDataGridOptions, IMasterDetailProps } from 'devextreme-react/data-grid';
 import dxDataGrid from 'devextreme/ui/data_grid';
 import { ITMCounterContainerProps } from './TMCounterContainer';
+import { TMContextMenuItemProps } from '../NewComponents/ContextMenu/types';
 export interface TMDataGridContextMenuItem {
     text: string;
     icon: string;
@@ -31,16 +32,16 @@ export interface TMDataGridProps<T> extends IDataGridOptions {
     pageSize?: TMDataGridPageSize;
     /** Configures the search panel position in the toolbar */
     searchPanelToolbarPosition?: 'before' | 'default';
-    /** if visible, set focus on SearchPanel */
-    searchPanelFocusStarting?: boolean;
+    /** Trigger to set focus on SearchPanel (only if visible) - change the number to trigger focus */
+    searchPanelFocusTrigger?: number;
     /** Show the header filter */
     showHeaderFilter?: boolean;
     /** Show the filter panel */
     showFilterPanel?: boolean;
     /** Show the load panel */
     showLoadPanel?: boolean;
-    /** Show the column chooser */
-    showColumnChooser?: boolean;
+    /** Show the header column chooser in context menu */
+    showHeaderColumnChooser?: boolean;
     /** Show the search panel */
     showSearchPanel?: boolean;
     /** Show the group panel */
@@ -51,6 +52,8 @@ export interface TMDataGridProps<T> extends IDataGridOptions {
     masterDetail?: IMasterDetailProps;
     /** On Has Filters Change */
     onHasFiltersChange?: (hasFilters: boolean) => void;
+    /** Custom context menu items - when provided, replaces DevExtreme's native context menu with TMContextMenu */
+    customContextMenuItems?: TMContextMenuItemProps[];
 }
 declare const TMDataGrid: React.ForwardRefExoticComponent<TMDataGridProps<unknown> & React.RefAttributes<dxDataGrid<any, any>>>;
 export default TMDataGrid;