@it-consultis/page-builder 1.1.34

package/layouts/EditorPreview/index.js

@@ -0,0 +1,463 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SELECTED_BLOCK = exports.PREVIEW_READY = exports.PREVIEW_DATA = void 0;
+var _Delete = _interopRequireDefault(require("@mui/icons-material/Delete"));
+var _Box = _interopRequireDefault(require("@mui/material/Box/Box.js"));
+var _Button = _interopRequireDefault(require("@mui/material/Button/Button.js"));
+var _Dialog = _interopRequireDefault(require("@mui/material/Dialog/Dialog.js"));
+var _DialogActions = _interopRequireDefault(require("@mui/material/DialogActions/DialogActions.js"));
+var _DialogContent = _interopRequireDefault(require("@mui/material/DialogContent/DialogContent.js"));
+var _DialogContentText = _interopRequireDefault(require("@mui/material/DialogContentText/DialogContentText.js"));
+var _DialogTitle = _interopRequireDefault(require("@mui/material/DialogTitle/DialogTitle.js"));
+var _react = _interopRequireWildcard(require("react"));
+var _uuid = require("uuid");
+var _BlockView = _interopRequireDefault(require("./BlockView"));
+var _store = require("../../store");
+var _block = require("../../utils/block");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const PREVIEW_DATA = exports.PREVIEW_DATA = 'editor/previewData';
+const PREVIEW_READY = exports.PREVIEW_READY = 'editor/previewReady';
+const SELECTED_BLOCK = exports.SELECTED_BLOCK = 'editor/selectedBlock';
+const EditorPreview = props => {
+  const {
+    onChange
+  } = props;
+  const {
+    data,
+    blockTypes,
+    previewWidth,
+    setData,
+    setSelectedBlockId,
+    setEditingBlockId,
+    selectedBlockId,
+    isMp
+  } = (0, _store.useEditorStore)(state => state);
+  const containerRef = (0, _react.useRef)(null);
+  const [dropIndex, setDropIndex] = (0, _react.useState)(null);
+  const blockRefs = (0, _react.useRef)({});
+  const [deleteDialogOpen, setDeleteDialogOpen] = (0, _react.useState)(false);
+  const [blockToDelete, setBlockToDelete] = (0, _react.useState)(null);
+
+  // Add message listener
+  (0, _react.useEffect)(() => {
+    const listener = event => {
+      if (event.data && event.data.type) {
+        const {
+          type,
+          payload
+        } = event.data;
+        switch (type) {
+          case PREVIEW_DATA:
+            setData(payload);
+            break;
+          case SELECTED_BLOCK:
+            setSelectedBlockId(payload);
+            break;
+          default:
+            // Ignore unsupported event
+            break;
+        }
+      }
+    };
+    window.addEventListener('message', listener);
+    return () => {
+      window.removeEventListener('message', listener);
+    };
+  }, [setData, setSelectedBlockId]);
+
+  // Notify parent that preview is ready
+  (0, _react.useEffect)(() => {
+    window.parent.postMessage({
+      type: PREVIEW_READY
+    }, '*');
+    const handleClick = event => {
+      const preview = document.getElementById('editor-preview');
+      const target = event.target;
+      const linkElement = target.closest('a');
+      if (linkElement && preview?.contains(linkElement) && linkElement.href?.startsWith('http')) {
+        event.preventDefault();
+      }
+    };
+    window.addEventListener('click', handleClick);
+    return () => {
+      window.removeEventListener('click', handleClick);
+    };
+  }, []);
+
+  // Add effect to scroll to selected block
+  (0, _react.useEffect)(() => {
+    if (selectedBlockId && blockRefs.current[selectedBlockId]) {
+      blockRefs.current[selectedBlockId]?.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+        inline: 'nearest'
+      });
+    }
+  }, [selectedBlockId]);
+  const getPreviewWidth = () => {
+    switch (previewWidth) {
+      case 'sm':
+        return '375px';
+      case 'md':
+        return '1024px';
+      case 'lg':
+        return '1280px';
+      case 'xl':
+        return '1536px';
+      case 'full':
+        {
+          return 'calc(100vw - var(--editor-sidebar-width, 0px) - var(--editor-blocksbar-width, 0px))';
+        }
+      default:
+        return '375px';
+    }
+  };
+  const getPreviewHeight = () => {
+    switch (previewWidth) {
+      case 'sm':
+        return '667px';
+      case 'md':
+        return '768px';
+      case 'lg':
+        return '800px';
+      case 'xl':
+        return '864px';
+      case 'full':
+        return 'calc(100vh - 50px)';
+      default:
+        return '100vh';
+    }
+  };
+  const handleDrop = (0, _react.useCallback)(e => {
+    e.preventDefault();
+    const blockTypeData = e.dataTransfer.getData('blockType');
+    if (!blockTypeData) return;
+    try {
+      const blockType = JSON.parse(blockTypeData);
+      const newBlock = (0, _block.createBlock)(blockType);
+      const updated = setData(prev => {
+        const insertIndex = dropIndex !== null ? dropIndex : prev.length;
+        const next = prev.slice();
+        next.splice(insertIndex, 0, newBlock);
+        return next;
+      });
+      onChange?.(updated);
+      setDropIndex(null);
+
+      // Set the new block as selected and editing
+      setSelectedBlockId(newBlock.id);
+      setEditingBlockId(newBlock.id);
+    } catch (error) {
+      console.error('Failed to parse block type:', error);
+    }
+  }, [setData, dropIndex, setSelectedBlockId, setEditingBlockId, onChange]);
+  const handleDragOver = (0, _react.useCallback)(e => {
+    e.preventDefault();
+
+    // check if the target is a container
+    const draggingElement = document.querySelector('[data-sortable-dragging="true"]');
+    if (draggingElement) {
+      return;
+    }
+    const container = containerRef.current;
+    if (!container) return;
+
+    // check if the target is a container
+    const isOverContainer = container.contains(e.target);
+    if (!isOverContainer) {
+      setDropIndex(null);
+      return;
+    }
+    const blockElements = Array.from(container.getElementsByClassName('block-item'));
+    const mouseY = e.clientY;
+    let closestIndex = data.length; // Default to the end of the list
+
+    for (let i = 0; i < blockElements.length; i++) {
+      const block = blockElements[i];
+      const onTop = block.classList.contains('on-top');
+      const rect = block.getBoundingClientRect();
+      const blockMiddle = rect.top + rect.height / 2;
+      if (mouseY < blockMiddle) {
+        closestIndex = onTop ? i + 1 : i;
+        break;
+      }
+    }
+    setDropIndex(closestIndex);
+  }, [data.length]);
+  const handleDragLeave = (0, _react.useCallback)(e => {
+    // Check if mouse has truly left the container
+    const rect = e.currentTarget.getBoundingClientRect();
+    const {
+      clientX,
+      clientY
+    } = e;
+
+    // If mouse is still within container bounds, don't trigger leave
+    if (clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom) {
+      return;
+    }
+    setDropIndex(null);
+  }, []);
+  const handleBlockClick = (0, _react.useCallback)(block => {
+    setSelectedBlockId(block.id);
+    setEditingBlockId(block.id);
+  }, [setSelectedBlockId, setEditingBlockId]);
+  const handleDeleteClick = block => {
+    setBlockToDelete(block);
+    setDeleteDialogOpen(true);
+  };
+  const handleDeleteCancel = () => {
+    setDeleteDialogOpen(false);
+    setBlockToDelete(null);
+  };
+  const handleDeleteConfirm = () => {
+    if (blockToDelete) {
+      const updated = setData(prev => prev.filter(b => b.id !== blockToDelete.id).map(b => ({
+        ...b,
+        meta: {
+          ...b.meta,
+          changed: Date.now()
+        }
+      })));
+      onChange?.(updated);
+      setSelectedBlockId('');
+      setEditingBlockId('');
+    }
+    setDeleteDialogOpen(false);
+    setBlockToDelete(null);
+  };
+  const bgColor = data.find(block => block.type === 'PageBackground')?.data.backgroundColor || 'background.paper';
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+    ref: containerRef,
+    sx: {
+      flex: 1,
+      overflow: 'auto',
+      height: '100%',
+      p: 2,
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      bgcolor: 'background.paper'
+    },
+    onDrop: handleDrop,
+    onDragOver: handleDragOver,
+    onDragLeave: handleDragLeave,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        sx: {
+          width: getPreviewWidth(),
+          height: getPreviewHeight(),
+          boxShadow: '0 0 10px rgba(0,0,0,0.1)',
+          transition: 'all 0.3s ease-in-out',
+          overflow: 'auto',
+          position: 'relative',
+          background: bgColor,
+          containerType: 'inline-size'
+        },
+        id: "editor-preview",
+        children: [data.map((block, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
+          children: [dropIndex === index && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+            sx: {
+              position: 'relative',
+              zIndex: 1,
+              '&::before': {
+                content: '""',
+                position: 'absolute',
+                left: 0,
+                top: '-4px',
+                width: '100%',
+                height: '10px',
+                bgcolor: 'rgba(25, 118, 210, 1)',
+                display: 'block'
+              }
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+            ref: el => {
+              blockRefs.current[block.id] = el;
+            },
+            className: (0, _clsx.default)(['block-item', block.top && 'on-top']),
+            onClick: () => handleBlockClick(block),
+            sx: {
+              cursor: 'pointer',
+              ...(block.top ? {
+                position: 'sticky',
+                ...(block.settings.fixed ? {
+                  marginBottom: '-92px'
+                } : {}),
+                width: '100%',
+                top: 0,
+                zIndex: 9999999
+              } : {
+                position: 'relative'
+              }),
+              '&::after': selectedBlockId === block.id && ((0, _block.blockFilteredMPNav)(block, true) ? isMp : true) ? {
+                content: '""',
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                border: '2px solid',
+                borderColor: 'primary.main',
+                pointerEvents: 'none',
+                animation: 'pulse 2s infinite',
+                '@keyframes pulse': {
+                  '0%': {
+                    boxShadow: '0 0 0 0 rgba(25, 118, 210, 0.4)'
+                  },
+                  '70%': {
+                    boxShadow: '0 0 0 10px rgba(25, 118, 210, 0)'
+                  },
+                  '100%': {
+                    boxShadow: '0 0 0 0 rgba(25, 118, 210, 0)'
+                  }
+                }
+              } : {}
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_BlockView.default, {
+              block: block,
+              blockTypes: blockTypes,
+              onChange: newBlock => {
+                const updated = setData(prev => prev.map(b => b.id === newBlock.id ? {
+                  ...newBlock,
+                  meta: {
+                    ...newBlock.meta,
+                    changed: Date.now()
+                  }
+                } : b));
+                onChange?.(updated);
+              },
+              onMoveUp: index > 0 && (0, _block.blockFilteredMPNav)(data[index - 1]) ? () => {
+                const updated = setData(prev => {
+                  const i = prev.findIndex(b => b.id === block.id);
+                  if (i <= 0) return prev;
+                  const next = prev.slice();
+                  const movedBlock = {
+                    ...next[i],
+                    meta: {
+                      ...next[i].meta,
+                      changed: Date.now()
+                    }
+                  };
+                  const targetBlock = {
+                    ...next[i - 1],
+                    meta: {
+                      ...next[i - 1].meta,
+                      changed: Date.now()
+                    }
+                  };
+                  next[i - 1] = movedBlock;
+                  next[i] = targetBlock;
+                  return next;
+                });
+                onChange?.(updated);
+                // force update selected state to trigger re-render
+                setSelectedBlockId('');
+                setTimeout(() => {
+                  setSelectedBlockId(block.id);
+                }, 0);
+              } : undefined,
+              onMoveDown: index < data.length - 1 ? () => {
+                const updated = setData(prev => {
+                  const i = prev.findIndex(b => b.id === block.id);
+                  if (i < 0 || i >= prev.length - 1) return prev;
+                  const next = prev.slice();
+                  const movedBlock = {
+                    ...next[i],
+                    meta: {
+                      ...next[i].meta,
+                      changed: Date.now()
+                    }
+                  };
+                  const targetBlock = {
+                    ...next[i + 1],
+                    meta: {
+                      ...next[i + 1].meta,
+                      changed: Date.now()
+                    }
+                  };
+                  next[i] = targetBlock;
+                  next[i + 1] = movedBlock;
+                  return next;
+                });
+                onChange?.(updated);
+                // force update selected state to trigger re-render
+                setSelectedBlockId('');
+                setTimeout(() => {
+                  setSelectedBlockId(block.id);
+                }, 0);
+              } : undefined,
+              onCopy: copied => {
+                const updated = setData(prev => {
+                  const copy = {
+                    ...copied,
+                    id: (0, _uuid.v4)(),
+                    meta: {
+                      created: Date.now(),
+                      changed: Date.now()
+                    }
+                  };
+                  return [...prev, copy];
+                });
+                onChange?.(updated);
+              },
+              onDelete: () => handleDeleteClick(block)
+            })
+          })]
+        }, block.id)), dropIndex === data.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+          sx: {
+            height: '2px',
+            bgcolor: 'primary.main',
+            width: '100%',
+            position: 'relative',
+            '&::before': {
+              content: '""',
+              position: 'absolute',
+              left: 0,
+              top: '-4px',
+              width: '100%',
+              height: '10px',
+              bgcolor: 'rgba(25, 118, 210, 0.1)'
+            }
+          }
+        })]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Dialog.default, {
+      open: deleteDialogOpen,
+      onClose: handleDeleteCancel,
+      "aria-labelledby": "delete-dialog-title",
+      "aria-describedby": "delete-dialog-description",
+      keepMounted: true,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogTitle.default, {
+        id: "delete-dialog-title",
+        children: "Delete Block"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogContent.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogContentText.default, {
+          id: "delete-dialog-description",
+          children: "Are you sure you want to delete this block?"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_DialogActions.default, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+          onClick: handleDeleteCancel,
+          variant: "outlined",
+          children: "Cancel"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+          onClick: handleDeleteConfirm,
+          variant: "contained",
+          color: "primary",
+          startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Delete.default, {}),
+          autoFocus: true,
+          children: "Delete"
+        })]
+      })]
+    })]
+  });
+};
+var _default = exports.default = EditorPreview;

package/layouts/Header/index.d.ts

@@ -0,0 +1,18 @@
+import React, { FC } from 'react';
+import { Block } from '../../types';
+declare const Header: React.FC<{
+    onFullScreen?(): void;
+    onExitFullScreen?(): void;
+    onToggleBlocksBar?(): void;
+    isBlocksBarVisible?: boolean;
+    onToggleSidebar?(): void;
+    isSidebarVisible?: boolean;
+    onChange?(data: Block[]): void;
+    platinum?: boolean;
+    headerSlots?: Partial<{
+        left: FC;
+        middle: FC;
+        right: FC;
+    }>;
+}>;
+export default Header;

package/layouts/Header/index.js

@@ -0,0 +1,202 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _FullscreenExit = _interopRequireDefault(require("@mui/icons-material/FullscreenExit"));
+var _Laptop = _interopRequireDefault(require("@mui/icons-material/Laptop"));
+var _PhoneIphone = _interopRequireDefault(require("@mui/icons-material/PhoneIphone"));
+var _ScreenshotMonitor = _interopRequireDefault(require("@mui/icons-material/ScreenshotMonitor"));
+var _Tablet = _interopRequireDefault(require("@mui/icons-material/Tablet"));
+var _Button = _interopRequireDefault(require("@mui/material/Button/Button.js"));
+var _styled = _interopRequireDefault(require("@mui/material/styles/styled.js"));
+var _useTheme = _interopRequireDefault(require("@mui/material/styles/useTheme.js"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = _interopRequireDefault(require("react"));
+var _store = require("../../store");
+var _mp = _interopRequireDefault(require("../../assets/svg/mp"));
+var _LeftMenu = _interopRequireDefault(require("./menus/LeftMenu"));
+var _RightMenu = _interopRequireDefault(require("./menus/RightMenu"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const PREFIX = 'Header';
+const classes = {
+  root: `${PREFIX}-root`,
+  headerInner: `${PREFIX}-headerInner`,
+  centerActions: `${PREFIX}-centerActions`
+};
+const Root = (0, _styled.default)('header')(() => {
+  const theme = (0, _useTheme.default)();
+  return {
+    display: 'none',
+    background: theme.palette.header?.background || 'white',
+    borderBottom: `1px solid ${theme.palette.grey['300']}`,
+    width: '100%',
+    position: 'sticky',
+    zIndex: 20,
+    top: 0,
+    lineHeight: 1,
+    fontSize: theme.typography.fontSize,
+    [theme.breakpoints.up('lg')]: {
+      display: 'initial'
+    },
+    [`& .${classes.headerInner}`]: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      '.MuiButton-root': {
+        borderRadius: 0,
+        minWidth: 0,
+        ...(theme.palette.header?.text && {
+          color: theme.palette.header?.text
+        })
+      }
+    },
+    [`& .${classes.centerActions}`]: {
+      position: 'absolute',
+      left: '50%',
+      transform: 'translateX(-50%)',
+      '.MuiButton-root': {
+        padding: theme.spacing(1),
+        margin: `0 ${theme.spacing(0.5)}`,
+        opacity: 0.5,
+        '&.active': {
+          opacity: 1
+        },
+        '.MuiSvgIcon-root': {
+          fontSize: theme.typography.fontSize * 1.6
+        }
+      }
+    }
+  };
+});
+const Header = props => {
+  const {
+    onFullScreen,
+    onExitFullScreen,
+    onToggleBlocksBar,
+    isBlocksBarVisible,
+    onToggleSidebar,
+    isSidebarVisible,
+    onChange,
+    platinum,
+    headerSlots
+  } = props;
+  const {
+    previewWidth,
+    isMp,
+    includingMp,
+    setPreviewWidth,
+    setIsMp,
+    previewDeviceList
+  } = (0, _store.useEditorStore)(state => state);
+  const updatePreviewWidth = (width, clickFromMp) => {
+    setPreviewWidth(width);
+    if (includingMp && !clickFromMp) {
+      setIsMp(false);
+    }
+  };
+  const isDeviceAvailable = device => {
+    if (previewDeviceList === null) {
+      return false;
+    }
+    return Array.isArray(previewDeviceList) ? previewDeviceList.includes(device) : true;
+  };
+  const isShowDeviceSwitcher = previewDeviceList !== null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
+    className: classes.root,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: classes.headerInner,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LeftMenu.default, {
+        onToggleBlocksBar: onToggleBlocksBar,
+        isBlocksBarVisible: isBlocksBarVisible,
+        onChange: onChange,
+        slot: headerSlots?.left
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        id: "preview-width-switch",
+        className: classes.centerActions,
+        children: [includingMp && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+          onClick: () => {
+            updatePreviewWidth('sm', true);
+            setIsMp(true);
+          },
+          className: (0, _clsx.default)({
+            active: isMp && previewWidth === 'sm'
+          }),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_mp.default, {}), isMp && /*#__PURE__*/(0, _jsxRuntime.jsx)("small", {
+            style: {
+              fontSize: 10
+            },
+            children: "Mini Program"
+          })]
+        }), isShowDeviceSwitcher && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [isDeviceAvailable('sm') && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+            onClick: () => updatePreviewWidth('sm'),
+            className: (0, _clsx.default)({
+              active: !isMp && previewWidth === 'sm'
+            }),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PhoneIphone.default, {}), previewWidth === 'sm' && !isMp && /*#__PURE__*/(0, _jsxRuntime.jsx)("small", {
+              style: {
+                fontSize: 10
+              },
+              children: "375px"
+            })]
+          }), isDeviceAvailable('md') && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+            onClick: () => updatePreviewWidth('md'),
+            className: (0, _clsx.default)({
+              active: previewWidth === 'md'
+            }),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tablet.default, {}), previewWidth === 'md' && /*#__PURE__*/(0, _jsxRuntime.jsx)("small", {
+              style: {
+                fontSize: 10
+              },
+              children: "1024px"
+            })]
+          }), isDeviceAvailable('lg') && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+            onClick: () => updatePreviewWidth('lg'),
+            className: (0, _clsx.default)({
+              active: previewWidth === 'lg'
+            }),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Laptop.default, {}), previewWidth === 'lg' && /*#__PURE__*/(0, _jsxRuntime.jsx)("small", {
+              style: {
+                fontSize: 10
+              },
+              children: "1280px"
+            })]
+          }), isDeviceAvailable('xl') && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+            onClick: () => updatePreviewWidth('xl'),
+            className: (0, _clsx.default)({
+              active: previewWidth === 'xl'
+            }),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenshotMonitor.default, {}), previewWidth === 'xl' && /*#__PURE__*/(0, _jsxRuntime.jsx)("small", {
+              style: {
+                fontSize: 10
+              },
+              children: "1536px"
+            })]
+          }), isDeviceAvailable('full') && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+            onClick: () => updatePreviewWidth('full'),
+            className: (0, _clsx.default)({
+              active: previewWidth === 'full'
+            }),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FullscreenExit.default, {}), previewWidth === 'full' && /*#__PURE__*/(0, _jsxRuntime.jsx)("small", {
+              style: {
+                fontSize: 10
+              },
+              children: "FULL"
+            })]
+          })]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RightMenu.default, {
+        platinum: platinum,
+        onFullScreen: onFullScreen,
+        onExitFullScreen: onExitFullScreen,
+        onToggleSidebar: onToggleSidebar,
+        isSidebarVisible: isSidebarVisible,
+        slot: headerSlots?.right
+      })]
+    })
+  });
+};
+var _default = exports.default = Header;

package/layouts/Header/menus/ExportDataDialog.d.ts

@@ -0,0 +1,4 @@
+import { DialogProps } from '@mui/material';
+import React from 'react';
+declare const ExportDataDialog: React.FC<DialogProps>;
+export default ExportDataDialog;