@pdfme/ui 1.1.4 → 1.1.6

package/dist/types/{src/Designer.d.ts → Designer.d.ts}

@@ -1,5 +1,5 @@
 import { Template, DesignerProps } from '@pdfme/common';
-import { BaseUIClass } from './class.js';
+import { BaseUIClass } from './class';
 declare class Designer extends BaseUIClass {
     private onSaveTemplateCallback?;
     private onChangeTemplateCallback?;

package/dist/types/{src/Form.d.ts → Form.d.ts}

@@ -1,5 +1,5 @@
 import { PreviewProps } from '@pdfme/common';
-import { PreviewUI } from './class.js';
+import { PreviewUI } from './class';
 declare class Form extends PreviewUI {
     private onChangeInputCallback?;
     constructor(props: PreviewProps);

package/dist/types/{src/Viewer.d.ts → Viewer.d.ts}

@@ -1,5 +1,5 @@
 import { PreviewProps } from '@pdfme/common';
-import { PreviewUI } from './class.js';
+import { PreviewUI } from './class';
 declare class Viewer extends PreviewUI {
     constructor(props: PreviewProps);
     protected render(): void;

package/dist/types/{src/class.d.ts → class.d.ts}

@@ -1,20 +1,18 @@
-import { Root } from 'react-dom/client';
 import { Template, Size, UIProps, UIOptions, PreviewProps } from '@pdfme/common';
 export declare abstract class BaseUIClass {
     protected domContainer: HTMLElement | null;
     protected template: Template;
     protected size: Size;
-    protected root: Root | null;
     private lang;
     private font;
     private readonly setSize;
     resizeObserver: ResizeObserver;
     constructor(props: UIProps);
-    protected getI18n(): (key: "type" | "require" | "cancel" | "field" | "fieldName" | "uniq" | "inputExample" | "edit" | "plsInputName" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "addNewField" | "editField" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName") => string;
+    protected getI18n(): (key: "type" | "field" | "cancel" | "fieldName" | "require" | "uniq" | "inputExample" | "edit" | "plsInputName" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "addNewField" | "editField" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName") => string;
     protected getFont(): Record<string, {
         fallback?: boolean | undefined;
         subset?: boolean | undefined;
-        data: ArrayBuffer | Uint8Array;
+        data: string | ArrayBuffer | Uint8Array;
     }>;
     getTemplate(): {
         columns?: string[] | undefined;

package/dist/types/{src/components → components}/CtlBar/Pager.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare type Props = {
     pageCursor: number;
     pageNum: number;

package/dist/types/{src/components → components}/CtlBar/Zoom.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare type Props = {
     zoomLevel: number;
     setZoomLevel: (zoom: number) => void;

package/dist/types/{src/components → components}/CtlBar/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Size } from '@pdfme/common';
 declare type Props = {
     size: Size;

package/dist/types/{src/components → components}/Designer/Main/Mask.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Size } from '@pdfme/common';
 declare const Mask: ({ width, height }: Size) => JSX.Element;
 export default Mask;

package/dist/types/components/Designer/Main/Moveable.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { OnDrag, OnDragEnd, OnDragGroupEnd, OnResize, OnResizeEnd, OnResizeGroupEnd, OnRotate, OnRotateEnd, OnRotateGroupEnd, OnClick } from 'react-moveable';
+declare type tgtFunc = ({ target }: {
+    target: HTMLElement | SVGElement;
+}) => void;
+declare type tgtsFunc = ({ targets }: {
+    targets: (HTMLElement | SVGElement)[];
+}) => void;
+declare type Props = {
+    target: HTMLElement[];
+    bounds: {
+        left: number;
+        top: number;
+        bottom: number;
+        right: number;
+    };
+    horizontalGuidelines: number[];
+    verticalGuidelines: number[];
+    keepRatio: boolean;
+    onDrag: ((e: OnDrag) => void) & (({ target, left, top }: OnDrag) => void);
+    onDragEnd: ((e: OnDragEnd) => void) & tgtFunc;
+    onDragGroupEnd: ((e: OnDragGroupEnd) => void) & tgtsFunc;
+    onResize: ((e: OnResize) => void) & (({ target, width, height, direction }: OnResize) => void);
+    onResizeEnd: ((e: OnResizeEnd) => void) & tgtFunc;
+    onResizeGroupEnd: ((e: OnResizeGroupEnd) => void) & tgtsFunc;
+    onRotate: ((e: OnRotate) => void) & (({ target, rotate }: OnRotate) => void);
+    onRotateEnd: ((e: OnRotateEnd) => void) & tgtFunc;
+    onRotateGroupEnd: ((e: OnRotateGroupEnd) => void) & tgtsFunc;
+    onClick: (e: OnClick) => void;
+};
+declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<any>>;
+export default _default;

package/dist/types/{src/components → components}/Designer/Main/Selecto.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { OnDragStart as _OnDragStart, OnSelect as _OnSelect } from 'react-selecto';
 declare const _Selecto: ({ container, continueSelect, onDragStart, onSelect, }: {
     container: HTMLElement | null;

package/dist/types/{src/components → components}/Designer/Sidebar/DetailView/ExampleInputEditor.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SchemaForUI } from '@pdfme/common';
 import { SidebarProps } from '..';
 declare const ExampleInputEditor: (props: Pick<SidebarProps, 'changeSchemas'> & {

package/dist/types/{src/components → components}/Designer/Sidebar/DetailView/PositionAndSizeEditor.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 import { SchemaForUI } from '@pdfme/common';
-import { SidebarProps } from '../index.js';
+import { SidebarProps } from '../index';
 declare const PositionAndSizeEditor: (props: Pick<SidebarProps, 'pageSize' | 'schemas' | 'changeSchemas' | 'activeElements'> & {
     activeSchema: SchemaForUI;
 }) => JSX.Element;

package/dist/types/{src/components → components}/Designer/Sidebar/DetailView/TextPropEditor.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SchemaForUI } from '@pdfme/common';
 import { SidebarProps } from '..';
 declare const TextPropEditor: (props: Pick<SidebarProps, 'changeSchemas'> & {

package/dist/types/{src/components → components}/Designer/Sidebar/DetailView/TypeAndKeyEditor.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 import { SchemaForUI } from '@pdfme/common';
-import { SidebarProps } from '../index.js';
+import { SidebarProps } from '../index';
 declare const TypeAndKeyEditor: (props: Pick<SidebarProps, 'schemas' | 'changeSchemas'> & {
     activeSchema: SchemaForUI;
 }) => JSX.Element;

package/dist/types/{src/components → components}/Designer/Sidebar/DetailView/index.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 import { SchemaForUI } from '@pdfme/common';
-import { SidebarProps } from '../index.js';
+import { SidebarProps } from '../index';
 declare const DetailView: (props: Pick<SidebarProps, 'schemas' | 'pageSize' | 'changeSchemas' | 'activeElements'> & {
     activeSchema: SchemaForUI;
 }) => JSX.Element;

package/dist/types/{src/components → components}/Designer/Sidebar/ListView/SelectableSortableContainer.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
-import { SidebarProps } from '../index.js';
+import { SidebarProps } from '../index';
 declare const SelectableSortableContainer: (props: Pick<SidebarProps, 'schemas' | 'onEdit' | 'onSortEnd' | 'height' | 'hoveringSchemaId' | 'onChangeHoveringSchemaId'>) => JSX.Element;
 export default SelectableSortableContainer;

package/dist/types/{src/components → components}/Designer/Sidebar/ListView/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
-import { SidebarProps } from '../index.js';
+import { SidebarProps } from '../index';
 declare const ListView: (props: Pick<SidebarProps, 'schemas' | 'onSortEnd' | 'onEdit' | 'size' | 'hoveringSchemaId' | 'onChangeHoveringSchemaId' | 'changeSchemas'>) => JSX.Element;
 export default ListView;

package/dist/types/{src/components → components}/Designer/Sidebar/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SchemaForUI, Size } from '@pdfme/common';
 export declare type SidebarProps = {
     height: number;

package/dist/types/{src/components → components}/Designer/index.d.ts

@@ -1,11 +1,10 @@
-/// <reference types="react" />
 import { DesignerReactProps, Template } from '@pdfme/common';
 declare const TemplateEditor: ({ template, size, onSaveTemplate, onChangeTemplate, }: {
     options?: {
         font?: Record<string, {
             fallback?: boolean | undefined;
             subset?: boolean | undefined;
-            data: ArrayBuffer | Uint8Array;
+            data: string | ArrayBuffer | Uint8Array;
         }> | undefined;
         lang?: "en" | "ja" | undefined;
     } | undefined;

package/dist/types/{src/components → components}/Divider.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const Divider: () => JSX.Element;
 export default Divider;

package/dist/types/{src/components → components}/Error.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Size } from '@pdfme/common';
 declare const Error: ({ size, error }: {
     size: Size;

package/dist/types/{src/components → components}/Preview.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { PreviewReactProps } from '@pdfme/common';
 declare const Preview: ({ template, inputs, size, onChangeInput }: PreviewReactProps) => JSX.Element;
 export default Preview;

package/dist/types/{src/components → components}/Schemas/BarcodeSchema.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SchemaUIProps } from './SchemaUI.js';
+import { SchemaUIProps } from './SchemaUI';
 declare const _default: React.ForwardRefExoticComponent<SchemaUIProps & {
     schema: {
         rotate?: number | undefined;

package/dist/types/{src/components → components}/Schemas/ImageSchema.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SchemaUIProps } from './SchemaUI.js';
+import { SchemaUIProps } from './SchemaUI';
 declare const _default: React.ForwardRefExoticComponent<SchemaUIProps & {
     schema: {
         rotate?: number | undefined;

package/dist/types/{src/components → components}/Schemas/SchemaUI.d.ts

@@ -10,5 +10,5 @@ export interface SchemaUIProps {
 declare const _default: React.ForwardRefExoticComponent<SchemaUIProps & {
     border: string;
     onChangeHoveringSchemaId?: ((id: string | null) => void) | undefined;
-} & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
+} & React.RefAttributes<HTMLTextAreaElement | HTMLInputElement>>;
 export default _default;

package/dist/types/{src/components → components}/Schemas/TextSchema.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SchemaUIProps } from './SchemaUI.js';
+import { SchemaUIProps } from './SchemaUI';
 declare const _default: React.ForwardRefExoticComponent<SchemaUIProps & {
     schema: {
         backgroundColor?: string | undefined;

package/dist/types/{src/components → components}/Spinner.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const Spinner: () => JSX.Element;
 export default Spinner;

package/dist/types/{src/components → components}/UnitPager.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Size } from '@pdfme/common';
 declare type Props = {
     size: Size;

package/dist/types/{src/contexts.d.ts → contexts.d.ts}

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-export declare const I18nContext: import("react").Context<(key: "type" | "require" | "cancel" | "field" | "fieldName" | "uniq" | "inputExample" | "edit" | "plsInputName" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "addNewField" | "editField" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName") => string>;
+export declare const I18nContext: import("react").Context<(key: "type" | "field" | "cancel" | "fieldName" | "require" | "uniq" | "inputExample" | "edit" | "plsInputName" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "addNewField" | "editField" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName") => string>;
 export declare const FontContext: import("react").Context<Record<string, {
     fallback?: boolean | undefined;
     subset?: boolean | undefined;
-    data: ArrayBuffer | Uint8Array;
+    data: string | ArrayBuffer | Uint8Array;
 }>>;

package/dist/types/{src/helper.d.ts → helper.d.ts}

@@ -19,7 +19,6 @@ export declare const initShortCuts: (arg: {
 }) => void;
 export declare const destroyShortCuts: () => void;
 export declare const readFiles: (files: FileList | null, type: 'text' | 'dataURL' | 'arrayBuffer') => Promise<string | ArrayBuffer>;
-export declare const px2mm: (px: number) => number;
 export declare const getPdfPageSizes: (pdfBlob: Blob) => Promise<{
     height: number;
     width: number;

package/dist/types/index.d.ts

@@ -0,0 +1,7 @@
+import Designer from './Designer';
+import Form from './Form';
+import Viewer from './Viewer';
+import { BLANK_PDF, HELVETICA, isTextSchema, isImageSchema, isBarcodeSchema, checkTemplate, checkUIProps, checkPreviewProps, checkDesignerProps, checkGenerateProps, validateBarcodeInput } from '@pdfme/common';
+import type { Lang, Size, Alignment, SchemaType, BarCodeType, TextSchema, ImageSchema, BarcodeSchema, Schema, SchemaForUI, Font, BasePdf, Template, CommonProps, GeneratorOptions, GenerateProps, UIOptions, UIProps, PreviewProps, DesignerProps } from '@pdfme/common';
+export { Designer, Viewer, Form, BLANK_PDF, HELVETICA, isTextSchema, isImageSchema, isBarcodeSchema, checkTemplate, checkUIProps, checkPreviewProps, checkDesignerProps, checkGenerateProps, validateBarcodeInput, };
+export type { Lang, Size, Alignment, SchemaType, BarCodeType, TextSchema, ImageSchema, BarcodeSchema, Schema, SchemaForUI, Font, BasePdf, Template, CommonProps, GeneratorOptions, GenerateProps, UIOptions, UIProps, PreviewProps, DesignerProps, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",
@@ -21,23 +21,15 @@
   "bugs": {
     "url": "https://github.com/pdfme/pdfme/issues"
   },
-  "main": "dist/cjs/src/index.js",
-  "module": "dist/esm/src/index.js",
-  "types": "dist/types/src/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/esm/src/index.js",
-      "require": "./dist/cjs/src/index.js"
-    }
-  },
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/types/index.d.ts",
   "engines": {
     "node": ">=14"
   },
   "scripts": {
-    "develop": "tsc -w",
-    "build": "npm run build:cjs && npm run build:esm",
-    "build:cjs": "tsc -p tsconfig.cjs.json",
-    "build:esm": "tsc -p tsconfig.esm.json",
+    "develop": "webpack --watch --mode development",
+    "build": "NODE_ENV=production webpack --mode production",
     "clean": "rimraf dist",
     "lint": "tsc --noEmit",
     "test": "jest",
@@ -53,23 +45,24 @@
     "@scena/react-guides": "^0.16.0",
     "hotkeys-js": "^3.8.7",
     "pdfjs-dist": "^2.12.313",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-moveable": "^0.30.3",
-    "react-selecto": "^1.12.0",
-    "worker-loader": "^3.0.8"
+    "react-selecto": "^1.12.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
-    "@types/css-font-loading-module": "^0.0.7",
     "@types/pdfjs-dist": "^2.7.4",
-    "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.10",
+    "@types/react": "^17.0.52",
+    "@types/react-dom": "^17.0.18",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
     "jest-canvas-mock": "^2.3.1",
-    "process": "^0.11.10"
+    "process": "^0.11.10",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1",
+    "worker-loader": "^3.0.8"
   },
   "jest": {
     "setupFiles": [
@@ -90,7 +83,7 @@
     },
     "globals": {
       "ts-jest": {
-        "tsconfig": "tsconfig.esm.json"
+        "tsconfig": "tsconfig.json"
       }
     },
     "testMatch": [

package/src/Designer.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import { Template, DesignerProps, checkDesignerProps, checkTemplate } from '@pdfme/common';
-import { BaseUIClass } from './class.js';
-import { DESTROYED_ERR_MSG } from './constants.js';
-import { I18nContext, FontContext } from './contexts.js';
-import DesignerComponent from './components/Designer/index.js';
-import { cloneDeep } from './helper.js';
+import { BaseUIClass } from './class';
+import { DESTROYED_ERR_MSG } from './constants';
+import { I18nContext, FontContext } from './contexts';
+import DesignerComponent from './components/Designer/index';
+import { cloneDeep } from './helper';
 
 class Designer extends BaseUIClass {
   private onSaveTemplateCallback?: (template: Template) => void;
@@ -43,8 +44,8 @@ class Designer extends BaseUIClass {
   }
 
   protected render() {
-    if (!this.domContainer || !this.root) throw Error(DESTROYED_ERR_MSG);
-    this.root.render(
+    if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
+    ReactDOM.render(
       <I18nContext.Provider value={this.getI18n()}>
         <FontContext.Provider value={this.getFont()}>
           <DesignerComponent
@@ -64,7 +65,8 @@ class Designer extends BaseUIClass {
             size={this.size}
           />
         </FontContext.Provider>
-      </I18nContext.Provider>
+      </I18nContext.Provider>,
+      this.domContainer
     );
   }
 }

package/src/Form.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import { PreviewProps } from '@pdfme/common';
-import { PreviewUI } from './class.js';
-import { DESTROYED_ERR_MSG } from './constants.js';
-import { I18nContext, FontContext } from './contexts.js';
-import Preview from './components/Preview.js';
+import { PreviewUI } from './class';
+import { DESTROYED_ERR_MSG } from './constants';
+import { I18nContext, FontContext } from './contexts';
+import Preview from './components/Preview';
 
 class Form extends PreviewUI {
   private onChangeInputCallback?: (arg: { index: number; value: string; key: string }) => void;
@@ -18,8 +19,8 @@ class Form extends PreviewUI {
   }
 
   protected render() {
-    if (!this.domContainer || !this.root) throw Error(DESTROYED_ERR_MSG);
-    this.root.render(
+    if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
+    ReactDOM.render(
       <I18nContext.Provider value={this.getI18n()}>
         <FontContext.Provider value={this.getFont()}>
           <Preview
@@ -36,7 +37,8 @@ class Form extends PreviewUI {
             }}
           />
         </FontContext.Provider>
-      </I18nContext.Provider>
+      </I18nContext.Provider>,
+      this.domContainer
     );
   }
 }

package/src/Viewer.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import { PreviewProps } from '@pdfme/common';
-import { PreviewUI } from './class.js';
-import { DESTROYED_ERR_MSG } from './constants.js';
-import { I18nContext, FontContext } from './contexts.js';
-import Preview from './components/Preview.js';
+import { PreviewUI } from './class';
+import { DESTROYED_ERR_MSG } from './constants';
+import { I18nContext, FontContext } from './contexts';
+import Preview from './components/Preview';
 
 class Viewer extends PreviewUI {
   constructor(props: PreviewProps) {
@@ -12,13 +13,14 @@ class Viewer extends PreviewUI {
   }
 
   protected render() {
-    if (!this.domContainer || !this.root) throw Error(DESTROYED_ERR_MSG);
-    this.root.render(
+    if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
+    ReactDOM.render(
       <I18nContext.Provider value={this.getI18n()}>
         <FontContext.Provider value={this.getFont()}>
           <Preview template={this.template} size={this.size} inputs={this.inputs} />
         </FontContext.Provider>
-      </I18nContext.Provider>
+      </I18nContext.Provider>,
+      this.domContainer
     );
   }
 }

package/src/class.ts

@@ -1,7 +1,7 @@
-import { createRoot, Root } from 'react-dom/client';
-import { curriedI18n } from './i18n.js';
-import { DESTROYED_ERR_MSG, DEFAULT_LANG } from './constants.js';
-import { debounce, flatten, cloneDeep } from './helper.js';
+import ReactDOM from 'react-dom';
+import { curriedI18n } from './i18n';
+import { DESTROYED_ERR_MSG, DEFAULT_LANG } from './constants';
+import { debounce, flatten, cloneDeep } from './helper';
 import {
   Template,
   Size,
@@ -61,8 +61,6 @@ export abstract class BaseUIClass {
 
   protected size!: Size;
 
-  protected root: Root | null;
-
   private lang: Lang = DEFAULT_LANG;
 
   private font: Font = getDefaultFont();
@@ -85,7 +83,6 @@ export abstract class BaseUIClass {
     const { lang, font } = options || {};
     this.domContainer = domContainer;
     this.template = generateColumnsAndSampledataIfNeeded(cloneDeep(template));
-    this.root = createRoot(this.domContainer!);
     this.size = {
       height: this.domContainer!.clientHeight || window.innerHeight,
       width: this.domContainer!.clientWidth || window.innerWidth,
@@ -136,12 +133,11 @@ export abstract class BaseUIClass {
   }
 
   public destroy() {
-    if (!this.domContainer || !this.root) throw Error(DESTROYED_ERR_MSG);
-    this.root.unmount();
+    if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
+    ReactDOM.unmountComponentAtNode(this.domContainer);
 
     this.resizeObserver.unobserve(this.domContainer);
     this.domContainer = null;
-    this.root = null;
   }
 
   protected abstract render(): void;

package/src/components/CtlBar/Pager.tsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
-import { I18nContext } from '../../contexts.js';
+import { I18nContext } from '../../contexts';
 
 const btnStyle: React.CSSProperties = {
   cursor: 'pointer',

package/src/components/CtlBar/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import Pager from './Pager.js';
-import Zoom from './Zoom.js';
+import Pager from './Pager';
+import Zoom from './Zoom';
 import { Size } from '@pdfme/common';
 
 type Props = {

package/src/components/Designer/Main/Guides.tsx

@@ -1,7 +1,7 @@
 import React, { Ref } from 'react';
 import Guides from '@scena/react-guides';
 import { Size } from '@pdfme/common';
-import { ZOOM, RULER_HEIGHT } from '../../../constants.js';
+import { ZOOM, RULER_HEIGHT } from '../../../constants';
 
 const _Guides = ({
   paperSize,

package/src/components/Designer/Main/Mask.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Size } from '@pdfme/common';
-import { RULER_HEIGHT } from '../../../constants.js';
+import { RULER_HEIGHT } from '../../../constants';
 
 const Mask = ({ width, height }: Size) => (
   <div

package/src/components/Designer/Main/Moveable.tsx

@@ -1,14 +1,20 @@
 import React, { forwardRef, Ref } from 'react';
 import Moveable, {
   OnDrag,
-  OnResize,
   OnDragEnd,
   OnDragGroupEnd,
+  OnResize,
   OnResizeEnd,
   OnResizeGroupEnd,
+  OnRotate,
+  OnRotateEnd,
+  OnRotateGroupEnd,
   OnClick,
 } from 'react-moveable';
 
+type tgtFunc = ({ target }: { target: HTMLElement | SVGElement }) => void;
+type tgtsFunc = ({ targets }: { targets: (HTMLElement | SVGElement)[] }) => void;
+
 type Props = {
   target: HTMLElement[];
   bounds: { left: number; top: number; bottom: number; right: number };
@@ -16,15 +22,15 @@ type Props = {
   verticalGuidelines: number[];
   keepRatio: boolean;
   onDrag: ((e: OnDrag) => void) & (({ target, left, top }: OnDrag) => void);
-  onDragEnd: ((e: OnDragEnd) => void) &
-    (({ target }: { target: HTMLElement | SVGElement }) => void);
-  onDragGroupEnd: ((e: OnDragGroupEnd) => void) &
-    (({ targets }: { targets: (HTMLElement | SVGElement)[] }) => void);
+  onDragEnd: ((e: OnDragEnd) => void) & tgtFunc;
+  onDragGroupEnd: ((e: OnDragGroupEnd) => void) & tgtsFunc;
   onResize: ((e: OnResize) => void) & (({ target, width, height, direction }: OnResize) => void);
-  onResizeEnd: ((e: OnResizeEnd) => void) &
-    (({ target }: { target: HTMLElement | SVGElement }) => void);
-  onResizeGroupEnd: ((e: OnResizeGroupEnd) => void) &
-    (({ targets }: { targets: (HTMLElement | SVGElement)[] }) => void);
+  onResizeEnd: ((e: OnResizeEnd) => void) & tgtFunc;
+  onResizeGroupEnd: ((e: OnResizeGroupEnd) => void) & tgtsFunc;
+  onRotate: ((e: OnRotate) => void) & (({ target, rotate }: OnRotate) => void);
+  onRotateEnd: ((e: OnRotateEnd) => void) & tgtFunc;
+  onRotateGroupEnd: ((e: OnRotateGroupEnd) => void) & tgtsFunc;
+
   onClick: (e: OnClick) => void;
 };
 
@@ -41,6 +47,9 @@ const _Moveable = (
     onResize,
     onResizeEnd,
     onResizeGroupEnd,
+    onRotate,
+    onRotateEnd,
+    onRotateGroupEnd,
     onClick,
   }: Props,
   ref: Ref<any>
@@ -52,6 +61,9 @@ const _Moveable = (
     snapCenter
     draggable
     resizable
+    rotatable
+    throttleRotate={0}
+    rotationPosition="top"
     throttleDrag={1}
     throttleResize={1}
     ref={ref}
@@ -61,17 +73,17 @@ const _Moveable = (
     verticalGuidelines={verticalGuidelines}
     keepRatio={keepRatio}
     onDrag={onDrag}
-    onDragGroup={({ events }) => {
-      events.forEach(onDrag);
-    }}
+    onDragGroup={({ events }) => events.forEach(onDrag)}
     onDragEnd={onDragEnd}
     onDragGroupEnd={onDragGroupEnd}
     onResize={onResize}
-    onResizeGroup={({ events }) => {
-      events.forEach(onResize);
-    }}
+    onResizeGroup={({ events }) => events.forEach(onResize)}
     onResizeEnd={onResizeEnd}
     onResizeGroupEnd={onResizeGroupEnd}
+    onRotate={onRotate}
+    onRotateEnd={onRotateEnd}
+    onRotateGroup={({ events }) => events.forEach(onRotate)}
+    onRotateGroupEnd={onRotateGroupEnd}
     onClick={onClick}
   />
 );