@pdfme/ui 5.3.8 → 5.3.9-dev.1

package/src/helper.ts

@@ -1,4 +1,4 @@
-import hotkeys from 'hotkeys-js';
+import hotkeysJs from 'hotkeys-js';
 import { useContext } from 'react';
 import {
   cloneDeep,
@@ -14,7 +14,24 @@ import {
 } from '@pdfme/common';
 import { pdf2size } from '@pdfme/converter';
 import { DEFAULT_MAX_ZOOM, RULER_HEIGHT } from './constants.js';
-import { OptionsContext } from './contexts';
+import { OptionsContext } from './contexts.js';
+
+// Create a simple mock for hotkeys to avoid TypeScript errors
+const hotkeys = function (
+  keys: string,
+  callback: (e: KeyboardEvent, handler: { shortcut: string }) => void,
+) {
+  return (hotkeysJs as any)(keys, callback);
+};
+
+// Add properties to the hotkeys function
+(hotkeys as any).shift = false;
+(hotkeys as any).unbind = function (keys: string) {
+  // Do nothing if hotkeysJs doesn't have unbind
+  if (typeof (hotkeysJs as any).unbind === 'function') {
+    (hotkeysJs as any).unbind(keys);
+  }
+};
 
 export const uuid = () =>
   'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
@@ -125,27 +142,27 @@ export const initShortCuts = (arg: {
   save: () => void;
   selectAll: () => void;
 }) => {
-  hotkeys(keys.join(), (e, handler) => {
+  hotkeys(keys.join(), (e: KeyboardEvent, handler: { shortcut: string }) => {
     switch (handler.shortcut) {
       case up:
       case shiftUp:
         e.preventDefault();
-        arg.move('up', hotkeys.shift);
+        arg.move('up', (hotkeys as any).shift);
         break;
       case down:
       case shiftDown:
         e.preventDefault();
-        arg.move('down', hotkeys.shift);
+        arg.move('down', (hotkeys as any).shift);
         break;
       case left:
       case shiftLeft:
         e.preventDefault();
-        arg.move('left', hotkeys.shift);
+        arg.move('left', (hotkeys as any).shift);
         break;
       case right:
       case shiftRight:
         e.preventDefault();
-        arg.move('right', hotkeys.shift);
+        arg.move('right', (hotkeys as any).shift);
         break;
       case rmWin:
       case rmMac:
@@ -187,7 +204,7 @@ export const initShortCuts = (arg: {
 };
 
 export const destroyShortCuts = () => {
-  hotkeys.unbind(keys.join());
+  (hotkeys as any).unbind(keys.join());
 };
 
 /**
@@ -242,8 +259,8 @@ export const arrayBufferToBase64 = (arrayBuffer: ArrayBuffer): string => {
 };
 
 const convertSchemasForUI = (template: Template): SchemaForUI[][] => {
-  template.schemas.forEach((page) => {
-    page.forEach((schema) => {
+  template.schemas.forEach((page: any[]) => {
+    page.forEach((schema: any) => {
       schema.id = uuid();
       schema.content = schema.content || '';
     });
@@ -265,7 +282,10 @@ export const template2SchemasList = async (_template: Template) => {
     }));
   } else {
     const b64BasePdf = await getB64BasePdf(basePdf);
-    pageSizes = await pdf2size(b64toUint8Array(b64BasePdf));
+    // @ts-expect-error
+    const pdfArrayBuffer = b64toUint8Array(b64BasePdf) as ArrayBuffer;
+
+    pageSizes = await pdf2size(pdfArrayBuffer);
   }
 
   const ssl = schemasForUI.length;
@@ -300,7 +320,7 @@ export const schemasList2template = (schemasList: SchemaForUI[][], basePdf: Base
       // @ts-ignore
       delete schema.id;
       return schema;
-    })
+    }),
   ),
   basePdf,
 });
@@ -314,7 +334,7 @@ export const getUniqueSchemaName = (arg: {
   const schemaNames = schema.map((s) => s.name).concat(stackUniqueSchemaNames);
   const tmp: { [originalName: string]: number } = schemaNames.reduce(
     (acc, cur) => Object.assign(acc, { originalName: cur, copiedNum: 0 }),
-    {}
+    {},
   );
   const extractOriginalName = (name: string) => name.replace(/ copy$| copy [0-9]*$/, '');
   schemaNames
@@ -402,7 +422,7 @@ const handlePositionSizeChange = (
   key: string,
   value: any,
   basePdf: BasePdf,
-  pageSize: Size
+  pageSize: Size,
 ) => {
   const padding = isBlankPdf(basePdf) ? basePdf.padding : [0, 0, 0, 0];
   const [pt, pr, pb, pl] = padding;
@@ -423,7 +443,7 @@ const handleTypeChange = (
   schema: SchemaForUI,
   key: string,
   value: any,
-  pluginsRegistry: Plugins
+  pluginsRegistry: Plugins,
 ) => {
   if (key !== 'type') return;
   const keysToKeep = ['id', 'name', 'type', 'position', 'required'];
@@ -434,7 +454,7 @@ const handleTypeChange = (
   });
   // Apply attributes from new defaultSchema
   const propPanel = Object.values(pluginsRegistry).find(
-    (plugin) => plugin?.propPanel.defaultSchema.type === value
+    (plugin) => plugin?.propPanel.defaultSchema.type === value,
   )?.propPanel;
   Object.keys(propPanel?.defaultSchema || {}).forEach((key) => {
     if (!schema.hasOwnProperty(key)) {
@@ -476,4 +496,4 @@ export const getMaxZoom = () => {
   const options = useContext(OptionsContext);
 
   return options.maxZoom ? (options.maxZoom as number) / 100 : DEFAULT_MAX_ZOOM;
-}
+};

package/src/hooks.ts

@@ -19,7 +19,7 @@ import {
   moveCommandToChangeSchemasArg,
   arrayBufferToBase64,
   initShortCuts,
-  destroyShortCuts
+  destroyShortCuts,
 } from './helper.js';
 import { RULER_HEIGHT } from './constants.js';
 
@@ -60,17 +60,21 @@ export const useUIPreProcessor = ({ template, size, zoomLevel, maxZoom }: UIPreP
       paperHeight = height * ZOOM;
       _backgrounds = schemas.map(
         () =>
-          'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdj+P///38ACfsD/QVDRcoAAAAASUVORK5CYII='
+          'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdj+P///38ACfsD/QVDRcoAAAAASUVORK5CYII=',
       );
       _pageSizes = schemas.map(() => ({ width, height }));
     } else {
       const _basePdf = await getB64BasePdf(basePdf);
 
+      const uint8Array = b64toUint8Array(_basePdf);
+      // Create a new ArrayBuffer copy to avoid detachment issues
+      const pdfArrayBuffer = new ArrayBuffer(uint8Array.byteLength);
+      new Uint8Array(pdfArrayBuffer).set(uint8Array);
+
       const [_pages, imgBuffers] = await Promise.all([
-        pdf2size(b64toUint8Array(_basePdf)),
-        pdf2img(b64toUint8Array(_basePdf), { scale: maxZoom }),
+        pdf2size(pdfArrayBuffer),
+        pdf2img(pdfArrayBuffer.slice(), { scale: maxZoom }),
       ]);
-
       _pageSizes = _pages;
       paperWidth = _pageSizes[0].width * ZOOM;
       paperHeight = _pageSizes[0].height * ZOOM;
@@ -79,7 +83,7 @@ export const useUIPreProcessor = ({ template, size, zoomLevel, maxZoom }: UIPreP
 
     const _scale = Math.min(
       getScale(size.width, paperWidth),
-      getScale(size.height - RULER_HEIGHT, paperHeight)
+      getScale(size.height - RULER_HEIGHT, paperHeight),
     );
 
     return {
@@ -92,7 +96,9 @@ export const useUIPreProcessor = ({ template, size, zoomLevel, maxZoom }: UIPreP
   useEffect(() => {
     init({ template, size })
       .then(({ pageSizes, scale, backgrounds }) => {
-        setPageSizes(pageSizes), setScale(scale), setBackgrounds(backgrounds);
+        setPageSizes(pageSizes);
+        setScale(scale);
+        setBackgrounds(backgrounds);
       })
       .catch((err: Error) => {
         setError(err);
@@ -107,7 +113,9 @@ export const useUIPreProcessor = ({ template, size, zoomLevel, maxZoom }: UIPreP
     error,
     refresh: (template: Template) =>
       init({ template, size }).then(({ pageSizes, scale, backgrounds }) => {
-        setPageSizes(pageSizes), setScale(scale), setBackgrounds(backgrounds);
+        setPageSizes(pageSizes);
+        setScale(scale);
+        setBackgrounds(backgrounds);
       }),
   };
 };

package/src/index.ts

@@ -1,5 +1,5 @@
-import Designer from './Designer';
-import Form from './Form';
-import Viewer from './Viewer';
+import Designer from './Designer.js';
+import Form from './Form.js';
+import Viewer from './Viewer.js';
 
 export { Designer, Viewer, Form };

package/src/types/react-guides.d.ts

@@ -0,0 +1,22 @@
+declare module '@scena/react-guides' {
+  import { Component, ForwardRefExoticComponent, RefAttributes } from 'react';
+
+  interface GuidesInterface {
+    getGuides(): number[];
+    scroll(pos: number): void;
+    scrollGuides(pos: number): void;
+    loadGuides(guides: number[]): void;
+    resize(): void;
+  }
+
+  interface GuidesProps {
+    zoom?: number;
+    style?: React.CSSProperties;
+    type?: 'horizontal' | 'vertical';
+  }
+
+  // Define the component as a ForwardRefExoticComponent to support refs
+  const GuidesComponent: ForwardRefExoticComponent<GuidesProps & RefAttributes<GuidesInterface>>;
+
+  export default GuidesComponent;
+}

package/src/types/react-selecto.d.ts

@@ -0,0 +1,35 @@
+declare module 'react-selecto' {
+  import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+  interface OnDragStart {
+    inputEvent: MouseEvent;
+    stop: () => void;
+    isTrusted: boolean;
+  }
+
+  interface OnSelect {
+    selected: Element[];
+    added: Element[];
+    removed: Element[];
+    inputEvent: MouseEvent;
+    rect: DOMRect;
+  }
+
+  interface SelectoProps {
+    className?: string;
+    selectFromInside?: boolean;
+    selectByClick?: boolean;
+    preventDefault?: boolean;
+    hitRate?: number;
+    selectableTargets?: string[];
+    container?: HTMLElement | null;
+    continueSelect?: boolean;
+    onDragStart?: (e: OnDragStart) => void;
+    onSelect?: (e: OnSelect) => void;
+  }
+
+  // Define the component as a ForwardRefExoticComponent
+  const SelectoComponent: ForwardRefExoticComponent<SelectoProps & RefAttributes<any>>;
+
+  export default SelectoComponent;
+}

package/tsconfig.json

@@ -14,16 +14,14 @@
       "DOM.Iterable",
       "ESNext"
     ],
-    "moduleResolution": "node16",
+    "moduleResolution": "bundler",
     "allowSyntheticDefaultImports": true,
     "strict": true,
-    "types": [
-      "node",
-      "jest",
-      "@types/jest"
-    ],
+    "types": ["jest"],
     "typeRoots": [
-      "../node_modules/@types"
+      "../node_modules/@types",
+      "./node_modules/@types",
+      "../../node_modules/@types"
     ],
     "sourceMap": true,
     "baseUrl": ".",
@@ -39,12 +37,12 @@
   },
   "include": [
     "src/**/*.ts",
-    "src/**/*.tsx"
+    "src/**/*.tsx",
+    "__tests__/**/*.ts",
+    "__tests__/**/*.tsx"
   ],
   "exclude": [
     "node_modules",
-    "dist",
-    "**/*.test.ts",
-    "**/*.spec.ts",
+    "dist"
   ]
 }

package/.eslintrc.cjs

@@ -1,16 +0,0 @@
-module.exports = {
-  extends: ['../../eslint.base.js', "plugin:react/recommended", 'plugin:react-hooks/recommended'],
-  overrides: [
-    {
-      files: ['*.ts', '*.tsx'],
-      parserOptions: {
-        project: ['./tsconfig.json'],
-      },
-    },
-  ],
-  settings: {
-    react: {
-      version: 'detect',
-    },
-  },
-};

package/dist/types/components/Designer/Canvas/Guides.d.ts

@@ -1,9 +0,0 @@
-import React, { Ref } from 'react';
-import Guides from '@scena/react-guides';
-import { Size } from '@pdfme/common';
-declare const _Guides: ({ paperSize, horizontalRef, verticalRef, }: {
-    paperSize: Size;
-    horizontalRef: Ref<Guides> | undefined;
-    verticalRef: Ref<Guides> | undefined;
-}) => React.JSX.Element;
-export default _Guides;

package/dist/types/components/Designer/Canvas/Selecto.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import { OnDragStart as _OnDragStart, OnSelect as _OnSelect } from 'react-selecto';
-type Props = {
-    container: HTMLElement | null;
-    continueSelect: boolean;
-    onDragStart: (e: _OnDragStart) => void;
-    onSelect: (e: _OnSelect) => void;
-};
-declare const _Selecto: (props: Props) => React.JSX.Element;
-export default _Selecto;

package/dist/types/components/Designer/RightSidebar/ListView/SelectableSortableContainer.d.ts

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

package/dist/types/components/Designer/RightSidebar/ListView/index.d.ts

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

package/dist/types/contexts.d.ts

@@ -1,85 +0,0 @@
-/// <reference types="react" />
-import { Plugins, UIOptions } from '@pdfme/common';
-export declare const I18nContext: import("react").Context<(key: "cancel" | "close" | "set" | "clear" | "field" | "fieldName" | "align" | "width" | "opacity" | "height" | "rotate" | "edit" | "required" | "editable" | "plsInputName" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "editField" | "type" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName" | "addPageAfter" | "removePage" | "removePageConfirm" | "validation.uniqueName" | "validation.hexColor" | "validation.dateTimeFormat" | "schemas.color" | "schemas.borderWidth" | "schemas.borderColor" | "schemas.backgroundColor" | "schemas.textColor" | "schemas.bgColor" | "schemas.horizontal" | "schemas.vertical" | "schemas.left" | "schemas.center" | "schemas.right" | "schemas.top" | "schemas.middle" | "schemas.bottom" | "schemas.padding" | "schemas.text.fontName" | "schemas.text.size" | "schemas.text.spacing" | "schemas.text.textAlign" | "schemas.text.verticalAlign" | "schemas.text.lineHeight" | "schemas.text.min" | "schemas.text.max" | "schemas.text.fit" | "schemas.text.dynamicFontSize" | "schemas.text.format" | "schemas.mvt.typingInstructions" | "schemas.mvt.sampleField" | "schemas.mvt.variablesSampleData" | "schemas.barcodes.barColor" | "schemas.barcodes.includetext" | "schemas.table.alternateBackgroundColor" | "schemas.table.tableStyle" | "schemas.table.showHead" | "schemas.table.headStyle" | "schemas.table.bodyStyle" | "schemas.table.columnStyle" | "schemas.date.format" | "schemas.date.locale" | "schemas.select.options" | "schemas.select.optionPlaceholder" | "schemas.radioGroup.groupName", dict?: {
-    cancel: string;
-    close: string;
-    set: string;
-    clear: string;
-    field: string;
-    fieldName: string;
-    align: string;
-    width: string;
-    opacity: string;
-    height: string;
-    rotate: string;
-    edit: string;
-    required: string;
-    editable: string;
-    plsInputName: string;
-    fieldMustUniq: string;
-    notUniq: string;
-    noKeyName: string;
-    fieldsList: string;
-    editField: string;
-    type: string;
-    errorOccurred: string;
-    errorBulkUpdateFieldName: string;
-    commitBulkUpdateFieldName: string;
-    bulkUpdateFieldName: string;
-    addPageAfter: string;
-    removePage: string;
-    removePageConfirm: string;
-    'validation.uniqueName': string;
-    'validation.hexColor': string;
-    'validation.dateTimeFormat': string;
-    'schemas.color': string;
-    'schemas.borderWidth': string;
-    'schemas.borderColor': string;
-    'schemas.backgroundColor': string;
-    'schemas.textColor': string;
-    'schemas.bgColor': string;
-    'schemas.horizontal': string;
-    'schemas.vertical': string;
-    'schemas.left': string;
-    'schemas.center': string;
-    'schemas.right': string;
-    'schemas.top': string;
-    'schemas.middle': string;
-    'schemas.bottom': string;
-    'schemas.padding': string;
-    'schemas.text.fontName': string;
-    'schemas.text.size': string;
-    'schemas.text.spacing': string;
-    'schemas.text.textAlign': string;
-    'schemas.text.verticalAlign': string;
-    'schemas.text.lineHeight': string;
-    'schemas.text.min': string;
-    'schemas.text.max': string;
-    'schemas.text.fit': string;
-    'schemas.text.dynamicFontSize': string;
-    'schemas.text.format': string;
-    'schemas.mvt.typingInstructions': string;
-    'schemas.mvt.sampleField': string;
-    'schemas.mvt.variablesSampleData': string;
-    'schemas.barcodes.barColor': string;
-    'schemas.barcodes.includetext': string;
-    'schemas.table.alternateBackgroundColor': string;
-    'schemas.table.tableStyle': string;
-    'schemas.table.showHead': string;
-    'schemas.table.headStyle': string;
-    'schemas.table.bodyStyle': string;
-    'schemas.table.columnStyle': string;
-    'schemas.date.format': string;
-    'schemas.date.locale': string;
-    'schemas.select.options': string;
-    'schemas.select.optionPlaceholder': string;
-    'schemas.radioGroup.groupName': string;
-} | undefined) => string>;
-export declare const FontContext: import("react").Context<Record<string, {
-    data: string | ArrayBuffer | Uint8Array;
-    fallback?: boolean | undefined;
-    subset?: boolean | undefined;
-}>>;
-export declare const PluginsRegistry: import("react").Context<Plugins>;
-export declare const OptionsContext: import("react").Context<UIOptions>;
-export declare const CacheContext: import("react").Context<Map<any, any>>;

package/dist/types/index.d.ts

@@ -1,4 +0,0 @@
-import Designer from './Designer';
-import Form from './Form';
-import Viewer from './Viewer';
-export { Designer, Viewer, Form };