@pdfme/ui 5.3.8-dev.4 → 5.3.8-dev.42

package/src/components/Designer/LeftSidebar.tsx

@@ -7,10 +7,10 @@ import {
 import { theme, Button } from 'antd';
 import { useDraggable } from '@dnd-kit/core';
 import { CSS } from "@dnd-kit/utilities";
-import Renderer from '../Renderer';
-import { LEFT_SIDEBAR_WIDTH } from '../../constants';
-import { PluginsRegistry } from '../../contexts';
-import PluginIcon from "./PluginIcon";
+import Renderer from '../Renderer.js';
+import { LEFT_SIDEBAR_WIDTH } from '../../constants.js';
+import { PluginsRegistry } from '../../contexts.js';
+import PluginIcon from "./PluginIcon.js";
 
 
 const Draggable = (props: { plugin: Plugin<any>, scale: number, basePdf: BasePdf, children: React.ReactNode }) => {

package/src/components/Designer/PluginIcon.tsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import { Plugin } from "@pdfme/common";
-import { OptionsContext } from '../../contexts';
+import { OptionsContext } from '../../contexts.js';
 import { theme } from 'antd';
 
 

package/src/components/Designer/RightSidebar/DetailView/AlignWidget.tsx

@@ -11,7 +11,7 @@ import {
   AlignVerticalSpaceAround,
   AlignHorizontalSpaceAround,
 } from 'lucide-react'
-import { round } from '../../../../helper';
+import { round } from '../../../../helper.js';
 
 const AlignWidget = (props: PropPanelWidgetProps) => {
   const { activeElements, changeSchemas, schemas, pageSize, schema } = props;

package/src/components/Designer/RightSidebar/DetailView/index.tsx

@@ -1,15 +1,18 @@
-import FormRender, { useForm } from 'form-render';
+import { useForm } from 'form-render';
 import React, { useRef, useContext, useState, useEffect } from 'react';
 import type { ChangeSchemaItem, Dict, SchemaForUI, PropPanelWidgetProps, PropPanelSchema } from '@pdfme/common';
-import type { SidebarProps } from '../../../../types';
+import type { SidebarProps } from '../../../../types.js';
 import { Menu } from 'lucide-react';
-import { I18nContext, PluginsRegistry, OptionsContext } from '../../../../contexts';
-import { getSidebarContentHeight, debounce } from '../../../../helper';
+import { I18nContext, PluginsRegistry, OptionsContext } from '../../../../contexts.js';
+import { getSidebarContentHeight, debounce } from '../../../../helper.js';
 import { theme, Typography, Button, Divider } from 'antd';
-import AlignWidget from './AlignWidget';
-import WidgetRenderer from './WidgetRenderer';
-import ButtonGroupWidget from './ButtonGroupWidget';
-import { InternalNamePath, ValidateErrorEntity } from "rc-field-form/es/interface";
+import AlignWidget from './AlignWidget.js';
+import WidgetRenderer from './WidgetRenderer.js';
+import ButtonGroupWidget from './ButtonGroupWidget.js';
+import { InternalNamePath, ValidateErrorEntity } from "rc-field-form/es/interface.js";
+
+// Import FormRender as a default import
+import FormRenderComponent from 'form-render';
 
 const { Text } = Typography;
 
@@ -272,7 +275,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
           overflowX: 'hidden',
         }}
       >
-        <FormRender
+        <FormRenderComponent
           form={form}
           schema={propPanelSchema}
           widgets={widgets}

package/src/components/Designer/RightSidebar/ListView/Item.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useContext } from 'react';
 import { DraggableSyntheticListeners } from '@dnd-kit/core';
-import { I18nContext } from '../../../../contexts';
+import { I18nContext } from '../../../../contexts.js';
 import { GripVertical, CircleAlert, Lock } from 'lucide-react'
 import { Button, Typography } from 'antd';
 

package/src/components/Designer/RightSidebar/ListView/SelectableSortableContainer.tsx

@@ -16,12 +16,12 @@ import {
   verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
 import { SchemaForUI } from '@pdfme/common';
-import type { SidebarProps } from '../../../../types';
-import { PluginsRegistry } from '../../../../contexts';
-import Item from './Item';
-import SelectableSortableItem from './SelectableSortableItem';
+import type { SidebarProps } from '../../../../types.js';
+import { PluginsRegistry } from '../../../../contexts.js';
+import Item from './Item.js';
+import SelectableSortableItem from './SelectableSortableItem.js';
 import { theme } from 'antd';
-import PluginIcon from "../../PluginIcon";
+import PluginIcon from "../../PluginIcon.js";
 
 const SelectableSortableContainer = (
   props: Pick<

package/src/components/Designer/RightSidebar/ListView/SelectableSortableItem.tsx

@@ -1,11 +1,11 @@
 import React, { useContext } from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import { SchemaForUI } from '@pdfme/common';
-import { PluginsRegistry, I18nContext } from '../../../../contexts';
-import Item from './Item';
-import { useMountStatus } from '../../../../hooks';
+import { PluginsRegistry, I18nContext } from '../../../../contexts.js';
+import Item from './Item.js';
+import { useMountStatus } from '../../../../hooks.js';
 import { theme } from 'antd';
-import PluginIcon from "../../PluginIcon";
+import PluginIcon from "../../PluginIcon.js";
 
 interface Props {
   isSelected: boolean;

package/src/components/Designer/RightSidebar/ListView/index.tsx

@@ -1,10 +1,10 @@
 import React, { useContext, useState } from 'react';
-import type { SidebarProps } from '../../../../types';
-import { RIGHT_SIDEBAR_WIDTH } from '../../../../constants';
-import { I18nContext } from '../../../../contexts';
-import { getSidebarContentHeight } from '../../../../helper';
+import type { SidebarProps } from '../../../../types.js';
+import { RIGHT_SIDEBAR_WIDTH } from '../../../../constants.js';
+import { I18nContext } from '../../../../contexts.js';
+import { getSidebarContentHeight } from '../../../../helper.js';
 import { theme, Input, Typography, Divider, Button } from 'antd';
-import SelectableSortableContainer from './SelectableSortableContainer';
+import SelectableSortableContainer from './SelectableSortableContainer.js';
 
 const { Text } = Typography;
 const { TextArea } = Input;

package/src/components/Designer/RightSidebar/index.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { theme, Button } from 'antd';
-import type { SidebarProps } from '../../../types';
-import { RIGHT_SIDEBAR_WIDTH } from '../../../constants';
+import type { SidebarProps } from '../../../types.js';
+import { RIGHT_SIDEBAR_WIDTH } from '../../../constants.js';
 import { ArrowLeft, ArrowRight } from 'lucide-react';
-import ListView from './ListView/index';
-import DetailView from './DetailView/index';
+import ListView from './ListView/index.js';
+import DetailView from './DetailView/index.js';
 
 const Sidebar = (props: SidebarProps) => {
   const { sidebarOpen, setSidebarOpen, activeElements, schemas } = props;

package/src/components/Designer/index.tsx

@@ -12,11 +12,11 @@ import {
   px2mm,
 } from '@pdfme/common';
 import { DndContext } from '@dnd-kit/core';
-import RightSidebar from './RightSidebar/index';
-import LeftSidebar from './LeftSidebar';
-import Canvas from './Canvas/index';
-import { RULER_HEIGHT, RIGHT_SIDEBAR_WIDTH, LEFT_SIDEBAR_WIDTH } from '../../constants';
-import { I18nContext, OptionsContext, PluginsRegistry } from '../../contexts';
+import RightSidebar from './RightSidebar/index.js';
+import LeftSidebar from './LeftSidebar.js';
+import Canvas from './Canvas/index.js';
+import { RULER_HEIGHT, RIGHT_SIDEBAR_WIDTH, LEFT_SIDEBAR_WIDTH } from '../../constants.js';
+import { I18nContext, OptionsContext, PluginsRegistry } from '../../contexts.js';
 import {
   schemasList2template,
   uuid,
@@ -25,11 +25,11 @@ import {
   getPagesScrollTopByIndex,
   changeSchemas as _changeSchemas,
   getMaxZoom,
-} from '../../helper';
-import { useUIPreProcessor, useScrollPageCursor, useInitEvents } from '../../hooks';
-import Root from '../Root';
-import ErrorScreen from '../ErrorScreen';
-import CtlBar from '../CtlBar';
+} from '../../helper.js';
+import { useUIPreProcessor, useScrollPageCursor, useInitEvents } from '../../hooks.js';
+import Root from '../Root.js';
+import ErrorScreen from '../ErrorScreen.js';
+import CtlBar from '../CtlBar.js';
 
 /**
  * When the canvas scales there is a displacement of the starting position of the dragged schema.

package/src/components/ErrorScreen.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import { Size } from '@pdfme/common';
-import { I18nContext } from '../contexts';
-import { BACKGROUND_COLOR } from '../constants';
+import { I18nContext } from '../contexts.js';
+import { BACKGROUND_COLOR } from '../constants.js';
 import { theme, Result } from 'antd';
 
 const ErrorScreen = ({ size, error }: { size: Size; error: Error }) => {

package/src/components/Paper.tsx

@@ -1,7 +1,7 @@
 import React, { MutableRefObject, ReactNode, useContext } from 'react';
 import { ZOOM, SchemaForUI, Size, getFallbackFontName } from '@pdfme/common';
-import { FontContext } from '../contexts';
-import { RULER_HEIGHT, PAGE_GAP } from '../constants';
+import { FontContext } from '../contexts.js';
+import { RULER_HEIGHT, PAGE_GAP } from '../constants.js';
 
 const Paper = (props: {
   paperRefs: MutableRefObject<HTMLDivElement[]>;

package/src/components/Preview.tsx

@@ -1,16 +1,16 @@
 import React, { useRef, useState, useEffect, useContext } from 'react';
 import { Template, SchemaForUI, PreviewProps, Size, getDynamicTemplate, replacePlaceholders } from '@pdfme/common';
 import { getDynamicHeightsForTable } from '@pdfme/schemas/utils';
-import UnitPager from './UnitPager';
-import Root from './Root';
-import StaticSchema from './StaticSchema';
-import ErrorScreen from './ErrorScreen';
-import CtlBar from './CtlBar';
-import Paper from './Paper';
-import Renderer from './Renderer';
-import { useUIPreProcessor, useScrollPageCursor } from '../hooks';
-import { FontContext } from '../contexts';
-import { template2SchemasList, getPagesScrollTopByIndex, getMaxZoom } from '../helper';
+import UnitPager from './UnitPager.js';
+import Root from './Root.js';
+import StaticSchema from './StaticSchema.js';
+import ErrorScreen from './ErrorScreen.js';
+import CtlBar from './CtlBar.js';
+import Paper from './Paper.js';
+import Renderer from './Renderer.js';
+import { useUIPreProcessor, useScrollPageCursor } from '../hooks.js';
+import { FontContext } from '../contexts.js';
+import { template2SchemasList, getPagesScrollTopByIndex, getMaxZoom } from '../helper.js';
 import { theme } from 'antd';
 
 const _cache = new Map();

package/src/components/Renderer.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useContext, ReactNode, useRef, useMemo } from 'react';
 import { Dict, Mode, ZOOM, UIRenderProps, SchemaForUI, BasePdf, Schema, Plugin, UIOptions, cloneDeep } from '@pdfme/common';
 import { theme as antdTheme } from 'antd';
-import { SELECTABLE_CLASSNAME } from '../constants';
-import { PluginsRegistry, OptionsContext, I18nContext, CacheContext } from '../contexts';
+import { SELECTABLE_CLASSNAME } from '../constants.js';
+import { PluginsRegistry, OptionsContext, I18nContext, CacheContext } from '../contexts.js';
 
 type RendererProps = Omit<
   UIRenderProps<Schema>,
@@ -97,9 +97,9 @@ const Renderer = (props: RendererProps) => {
   
   const ref = useRef<HTMLDivElement>(null);
   const _cache = useContext(CacheContext);
-  const plugin = Object.values(pluginsRegistry).find(
+  const plugin = Object.values(pluginsRegistry || {}).find(
     (plugin) => plugin?.propPanel.defaultSchema.type === schema.type
-  ) as Plugin<any>;
+  ) as Plugin<any> | undefined;
 
   if (!plugin || !plugin.ui) {
     console.error(`[@pdfme/ui] Renderer for type ${schema.type} not found. 
@@ -112,7 +112,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
     mode,
     scale,
     schema,
-    options,
+    options: options as UIOptions,
   });
 
   useEffect(() => {
@@ -130,10 +130,10 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         stopEditing,
         tabIndex,
         placeholder,
-        options,
+        options: options as UIOptions,
         theme,
         i18n,
-        _cache,
+        _cache: _cache as Map<any, any>,
       });
     }
     return () => {

package/src/components/Root.tsx

@@ -1,8 +1,8 @@
 import React, { useContext, forwardRef, ReactNode, Ref, useEffect } from 'react';
 import { Size } from '@pdfme/common';
-import { FontContext } from '../contexts';
-import { BACKGROUND_COLOR } from '../constants';
-import Spinner from './Spinner';
+import { FontContext } from '../contexts.js';
+import { BACKGROUND_COLOR } from '../constants.js';
+import Spinner from './Spinner.js';
 
 type Props = { size: Size; scale: number; children: ReactNode };
 
@@ -17,13 +17,11 @@ const Root = ({ size, scale, children }: Props, ref: Ref<HTMLDivElement>) => {
           display: 'swap',
         })
     );
-    // @ts-ignore
     const newFontFaces = fontFaces.filter((fontFace) => !document.fonts.has(fontFace));
 
     Promise.allSettled(newFontFaces.map((f) => f.load())).then((loadedFontFaces) => {
       loadedFontFaces.forEach((loadedFontFace) => {
         if (loadedFontFace.status === 'fulfilled') {
-          // @ts-ignore
           document.fonts.add(loadedFontFace.value);
         }
       });

package/src/components/StaticSchema.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { isBlankPdf, replacePlaceholders, Template } from '@pdfme/common';
-import Renderer from './Renderer';
-import { uuid } from '../helper'
+import Renderer from './Renderer.js';
+import { uuid } from '../helper.js';
 
 const StaticSchema = (props: { template: Template, input: Record<string, string>, scale: number, totalPages: number, currentPage: number }) => {
   const { template: { schemas, basePdf }, input, scale, totalPages, currentPage } = props;

package/src/contexts.ts

@@ -1,5 +1,5 @@
 import { createContext } from 'react';
-import { i18n } from './i18n';
+import { i18n } from './i18n.js';
 import { getDefaultFont, Plugins, UIOptions } from '@pdfme/common';
 import { builtInPlugins } from '@pdfme/schemas';
 
@@ -11,4 +11,4 @@ export const PluginsRegistry = createContext<Plugins>(builtInPlugins);
 
 export const OptionsContext = createContext<UIOptions>({});
 
-export const CacheContext = createContext<Map<any, any>>(new Map());
+export const CacheContext = createContext<Map<any, any>>(new Map());

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,21 @@ 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 +139,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 +201,7 @@ export const initShortCuts = (arg: {
 };
 
 export const destroyShortCuts = () => {
-  hotkeys.unbind(keys.join());
+  (hotkeys as any).unbind(keys.join());
 };
 
 /**
@@ -242,8 +256,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 +279,8 @@ export const template2SchemasList = async (_template: Template) => {
     }));
   } else {
     const b64BasePdf = await getB64BasePdf(basePdf);
-    pageSizes = await pdf2size(b64toUint8Array(b64BasePdf));
+    // Use the Uint8Array directly as pdf2size should accept it
+    pageSizes = await pdf2size(b64toUint8Array(b64BasePdf) as any);
   }
 
   const ssl = schemasForUI.length;
@@ -476,4 +491,4 @@ export const getMaxZoom = () => {
   const options = useContext(OptionsContext);
 
   return options.maxZoom ? (options.maxZoom as number) / 100 : DEFAULT_MAX_ZOOM;
-}
+}

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

@@ -7,14 +7,14 @@
     "isolatedModules": true,
     "declaration": true,
     "declarationDir": "dist/types",
-    "module": "ESNext",
+    "module": "NodeNext",
     "lib": [
       "ES2020",
       "DOM",
       "DOM.Iterable",
       "ESNext"
     ],
-    "moduleResolution": "node16",
+    "moduleResolution": "nodenext",
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "types": [
@@ -45,6 +45,6 @@
     "node_modules",
     "dist",
     "**/*.test.ts",
-    "**/*.spec.ts",
+    "**/*.spec.ts"
   ]
 }

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',
-    },
-  },
-};