@pdfme/ui 6.1.9 → 6.1.10-dev.1

package/dist/index.js

@@ -46025,7 +46025,7 @@ function parseExpressionAt(input, pos, options) {
 }
 //#endregion
 //#region ../common/dist/index.js
-var PDFME_VERSION = "6.1.9";
+var PDFME_VERSION = "6.1.10";
 var PAGE_SIZE_PRESETS = {
 	A3: {
 		width: 297,
@@ -211021,6 +211021,14 @@ var ErrorScreen = ({ size, error }) => {
 //#endregion
 //#region src/components/CtlBar.tsx
 var { Text: Text$1 } = Typography;
+var CONTROL_BUTTON_SIZE = 32;
+var getControlButtonStyle = (active) => ({
+	width: CONTROL_BUTTON_SIZE,
+	minWidth: CONTROL_BUTTON_SIZE,
+	height: CONTROL_BUTTON_SIZE,
+	padding: 0,
+	...active ? { backgroundColor: "rgba(255, 255, 255, 0.18)" } : {}
+});
 var ToolbarButton = ({ className, label, disabled, active, onClick, children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tooltip$2, {
 	title: label,
 	children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(button_default$1, {
@@ -211030,7 +211038,7 @@ var ToolbarButton = ({ className, label, disabled, active, onClick, children })
 		title: label,
 		disabled,
 		onClick,
-		style: active ? { backgroundColor: "rgba(255, 255, 255, 0.18)" } : void 0,
+		style: getControlButtonStyle(active),
 		children
 	})
 });
@@ -211053,7 +211061,10 @@ var Zoom = ({ zoomLevel, setZoomLevel, zoomMode, fitWidth, fitHeight, style, lab
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 		style: {
 			display: "flex",
-			alignItems: "center"
+			alignItems: "center",
+			justifyContent: "center",
+			flexWrap: "wrap",
+			rowGap: 0
 		},
 		children: [
 			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToolbarButton, {
@@ -211065,7 +211076,12 @@ var Zoom = ({ zoomLevel, setZoomLevel, zoomMode, fitWidth, fitHeight, style, lab
 			}),
 			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text$1, {
 				strong: true,
-				style: style.textStyle,
+				style: {
+					...style.textStyle,
+					minWidth: 44,
+					textAlign: "center",
+					whiteSpace: "nowrap"
+				},
 				children: [Math.round(zoomLevel * 100), "%"]
 			}),
 			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToolbarButton, {
@@ -211105,6 +211121,7 @@ var Pager = ({ pageCursor, pageNum, setPageCursor, style }) => {
 				type: "text",
 				disabled: pageCursor <= 0,
 				onClick: () => setPageCursor(pageCursor - 1),
+				style: getControlButtonStyle(),
 				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronLeft, {
 					size: 16,
 					color: style.textStyle.color
@@ -211112,7 +211129,12 @@ var Pager = ({ pageCursor, pageNum, setPageCursor, style }) => {
 			}),
 			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text$1, {
 				strong: true,
-				style: style.textStyle,
+				style: {
+					...style.textStyle,
+					minWidth: 36,
+					textAlign: "center",
+					whiteSpace: "nowrap"
+				},
 				children: [
 					pageCursor + 1,
 					"/",
@@ -211124,6 +211146,7 @@ var Pager = ({ pageCursor, pageNum, setPageCursor, style }) => {
 				type: "text",
 				disabled: pageCursor + 1 >= pageNum,
 				onClick: () => setPageCursor(pageCursor + 1),
+				style: getControlButtonStyle(),
 				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronRight, {
 					size: 16,
 					color: style.textStyle.color
@@ -211140,6 +211163,7 @@ var ContextMenu = ({ items, style }) => /* @__PURE__ */ (0, import_jsx_runtime.j
 	children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(button_default$1, {
 		className: UI_CLASSNAME + "context-menu",
 		type: "text",
+		style: getControlButtonStyle(),
 		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Ellipsis, {
 			size: 16,
 			color: style.textStyle.color
@@ -211178,6 +211202,8 @@ var CtlBar = (props) => {
 			width: size.width,
 			display: "flex",
 			justifyContent: "center",
+			boxSizing: "border-box",
+			padding: `0 ${token.paddingXS}px`,
 			pointerEvents: "none"
 		},
 		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
@@ -211188,10 +211214,13 @@ var CtlBar = (props) => {
 				justifyContent: "center",
 				position: "relative",
 				zIndex: 1,
-				height: 40,
+				minHeight: 40,
+				maxWidth: "100%",
 				boxSizing: "border-box",
-				padding: token.paddingSM,
-				gap: token.marginXS,
+				padding: `${token.paddingXXS}px ${token.paddingSM}px`,
+				columnGap: token.marginXS,
+				rowGap: token.marginXXS,
+				flexWrap: "wrap",
 				borderRadius: token.borderRadius,
 				backgroundColor: token.colorBgMask,
 				pointerEvents: "auto"
@@ -211199,6 +211228,7 @@ var CtlBar = (props) => {
 			children: [
 				pageNum > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
 					className: "pdfme-ui-pager",
+					style: { flexShrink: 0 },
 					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pager, {
 						style: { textStyle },
 						pageCursor,
@@ -211208,6 +211238,7 @@ var CtlBar = (props) => {
 				}),
 				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
 					className: UI_CLASSNAME + "zoom",
+					style: { minWidth: 0 },
 					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Zoom, {
 						style: { textStyle },
 						zoomLevel,
@@ -212072,7 +212103,7 @@ var Preview = ({ template, inputs, size, onChangeInput, onPageChange }) => {
 			const sl = await template2SchemasList(dynamicTemplate);
 			if (!isMountedRef.current || requestId !== initRequestIdRef.current) return;
 			setSchemasList(sl);
-			await currentRefresh(dynamicTemplate);
+			if (dynamicTemplate !== template) await currentRefresh(dynamicTemplate);
 		}).catch((err) => console.error(`[@pdfme/ui] `, err));
 	}, []);
 	(0, import_react$9.useEffect)(() => {