@pdfme/ui 5.3.11 → 5.3.12-dev.2

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

@@ -1,15 +1,9 @@
 import React, { Ref } from 'react';
+import GuidesComponent from '@scena/react-guides';
 import { Size } from '@pdfme/common';
-interface GuidesInterface {
-    getGuides(): number[];
-    scroll(pos: number): void;
-    scrollGuides(pos: number): void;
-    loadGuides(guides: number[]): void;
-    resize(): void;
-}
 declare const _Guides: ({ paperSize, horizontalRef, verticalRef, }: {
     paperSize: Size;
-    horizontalRef: Ref<GuidesInterface> | undefined;
-    verticalRef: Ref<GuidesInterface> | undefined;
+    horizontalRef: Ref<GuidesComponent> | undefined;
+    verticalRef: Ref<GuidesComponent> | undefined;
 }) => React.JSX.Element;
 export default _Guides;

package/dist/types/src/components/Designer/Canvas/Moveable.d.ts

@@ -1,52 +1,5 @@
 import React from 'react';
-interface OnDrag {
-    target: HTMLElement | SVGElement;
-    left: number;
-    top: number;
-    beforeDelta: any;
-    beforeDist: any;
-    beforeTranslate: any;
-    delta: any;
-    dist: any;
-    transform: any;
-    translate: any;
-}
-interface OnResize {
-    target: HTMLElement | SVGElement;
-    width: number;
-    height: number;
-    direction: string;
-    offsetWidth: number;
-    offsetHeight: number;
-    dist: any;
-    delta: any;
-    transform: any;
-    translate: any;
-}
-interface OnRotate {
-    target: HTMLElement | SVGElement;
-    rotate: number;
-    beforeDist: any;
-    beforeDelta: any;
-    beforeRotate: any;
-    dist: any;
-    delta: any;
-    transform: any;
-}
-interface OnRotateEnd {
-    target: HTMLElement | SVGElement;
-}
-interface OnClick {
-    inputEvent: MouseEvent;
-    inputTarget: any;
-    isTarget: boolean;
-    containsTarget: boolean;
-    isDouble: boolean;
-    datas: any;
-    targets: any[];
-    clientX: number;
-    clientY: number;
-}
+import MoveableComponent, { OnDrag, OnRotate, OnRotateEnd, OnClick, OnResize } from 'react-moveable';
 type Props = {
     target: HTMLElement[];
     bounds: {
@@ -80,5 +33,5 @@ type Props = {
     }) => void;
     onClick: (e: OnClick) => void;
 };
-declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<any>>;
+declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<MoveableComponent<{}>>>;
 export default _default;

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

@@ -1,21 +1,10 @@
 import React from 'react';
-interface OnDragStart {
-    inputEvent: MouseEvent;
-    stop: () => void;
-    isTrusted: boolean;
-}
-interface OnSelect {
-    selected: Element[];
-    added: Element[];
-    removed: Element[];
-    inputEvent: MouseEvent;
-    rect: DOMRect;
-}
+import { OnSelect as SelectoOnSelect, OnDragStart as SelectoOnDragStart } from 'react-selecto';
 type Props = {
     container: HTMLElement | null;
     continueSelect: boolean;
-    onDragStart: (e: OnDragStart) => void;
-    onSelect: (e: OnSelect) => void;
+    onDragStart: (e: SelectoOnDragStart) => void;
+    onSelect: (e: SelectoOnSelect) => void;
 };
-declare const _Selecto: (props: Props) => React.JSX.Element;
-export default _Selecto;
+declare const Selecto: (props: Props) => React.JSX.Element;
+export default Selecto;

package/dist/types/src/components/Designer/PluginIcon.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { Plugin } from '@pdfme/common';
+import { Plugin, Schema } from '@pdfme/common';
 interface PluginIconProps {
-    plugin: Plugin<any>;
+    plugin: Plugin<Schema>;
     label: string;
     size?: number;
     styles?: React.CSSProperties;

package/dist/types/src/components/Designer/RightSidebar/ListView/Item.d.ts

@@ -1,27 +1,44 @@
 import React from 'react';
 import { DraggableSyntheticListeners } from '@dnd-kit/core';
 interface Props {
+    /** Content to display in the item */
     value: React.ReactNode;
+    /** Optional icon to display */
     icon?: React.ReactNode;
+    /** Custom styles for the item */
     style?: React.CSSProperties;
+    /** Status indicator for the item */
     status?: 'is-warning' | 'is-danger';
+    /** Title attribute for the item */
     title?: string;
+    /** Whether the item is required */
     required?: boolean;
+    /** Whether the item is read-only */
     readOnly?: boolean;
+    /** Whether the item is being dragged as an overlay */
     dragOverlay?: boolean;
+    /** Click handler for the item */
     onClick?: () => void;
+    /** Mouse enter handler */
     onMouseEnter?: () => void;
+    /** Mouse leave handler */
     onMouseLeave?: () => void;
+    /** Whether the item is currently being dragged */
     dragging?: boolean;
+    /** Whether items are being sorted */
     sorting?: boolean;
+    /** CSS transition value */
     transition?: string;
+    /** Transform data for the item */
     transform?: {
         x: number;
         y: number;
         scaleX: number;
         scaleY: number;
     } | null;
+    /** Whether to fade the item in */
     fadeIn?: boolean;
+    /** Drag listeners from dnd-kit */
     listeners?: DraggableSyntheticListeners;
 }
 declare const Item: React.MemoExoticComponent<React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLLIElement>>>;

package/dist/types/src/components/Renderer.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Mode, UIRenderProps, SchemaForUI, BasePdf, Schema, Plugin, UIOptions } from '@pdfme/common';
+import { UIRenderProps, SchemaForUI, BasePdf, Schema } from '@pdfme/common';
 type RendererProps = Omit<UIRenderProps<Schema>, 'schema' | 'rootElement' | 'options' | 'theme' | 'i18n' | '_cache'> & {
     basePdf: BasePdf;
     schema: SchemaForUI;
@@ -9,14 +9,5 @@ type RendererProps = Omit<UIRenderProps<Schema>, 'schema' | 'rootElement' | 'opt
     scale: number;
     selectable?: boolean;
 };
-type ReRenderCheckProps = {
-    plugin: Plugin<any>;
-    value: string;
-    mode: Mode;
-    scale: number;
-    schema: SchemaForUI;
-    options: UIOptions;
-};
-export declare const useRerenderDependencies: (arg: ReRenderCheckProps) => (string | number)[];
 declare const Renderer: (props: RendererProps) => React.JSX.Element;
 export default Renderer;

package/dist/types/src/constants.d.ts

@@ -1,4 +1,4 @@
-export declare const DEFAULT_LANG: "en";
+export declare const DEFAULT_LANG = "en";
 export declare const DESTROYED_ERR_MSG = "[@pdfme/ui] this instance is already destroyed";
 export declare const SELECTABLE_CLASSNAME = "selectable";
 export declare const RULER_HEIGHT = 30;

package/dist/types/src/contexts.d.ts

@@ -7,4 +7,4 @@ export declare const FontContext: import("react").Context<Record<string, {
 }>>;
 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>>;
+export declare const CacheContext: import("react").Context<Map<string | number, unknown>>;

package/dist/types/src/helper.d.ts

@@ -1,7 +1,6 @@
 import { Template, BasePdf, SchemaForUI, Size, Plugins } from '@pdfme/common';
 export declare const uuid: () => string;
-export declare const set: <T extends object>(obj: T, path: string | string[], value: any) => void;
-export declare const debounce: <T extends Function>(cb: T, wait?: number) => T;
+export declare const debounce: <T extends (...args: unknown[]) => unknown>(cb: T, wait?: number) => T;
 export declare const round: (number: number, precision: number) => number;
 export declare const flatten: <T>(arr: T[][]) => T[];
 export declare const initShortCuts: (arg: {
@@ -59,7 +58,7 @@ export declare const getSidebarContentHeight: (sidebarHeight: number) => number;
 export declare const changeSchemas: (args: {
     objs: {
         key: string;
-        value: any;
+        value: unknown;
         schemaId: string;
     }[];
     schemas: SchemaForUI[];
@@ -71,4 +70,4 @@ export declare const changeSchemas: (args: {
     };
     commitSchemas: (newSchemas: SchemaForUI[]) => void;
 }) => void;
-export declare const getMaxZoom: () => number;
+export declare const useMaxZoom: () => number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "5.3.11",
+  "version": "5.3.12-dev.2",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",
@@ -30,7 +30,7 @@
     "devBuildType:watch": "tsc --emitDeclarationOnly --watch",
     "build": "vite build && tsc --emitDeclarationOnly",
     "clean": "rimraf dist",
-    "lint": "eslint --ext .ts,.tsx src --config eslint.config.mjs --no-error-on-unmatched-pattern",
+    "lint": "eslint --ext .ts,.tsx src --config eslint.config.mjs",
     "test": "jest",
     "prune": "ts-prune src",
     "prettier": "prettier --write 'src/**/*.{ts,tsx}'"
@@ -38,7 +38,7 @@
   "dependencies": {
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/sortable": "^10.0.0",
-    "@pdfme/converter": "*",
+    "@pdfme/converter": "file:../converter",
     "@scena/react-guides": "^0.28.2",
     "antd": "^5.24.2",
     "form-render": "^2.2.16",

package/src/components/AppContextProvider.tsx

@@ -13,25 +13,32 @@ type Props = {
   options: UIOptions;
 };
 
-const isObject = (item: any): item is Record<string, any> =>
-  item && typeof item === 'object' && !Array.isArray(item);
+const isObject = (item: unknown): item is Record<string, unknown> =>
+  Boolean(item) && typeof item === 'object' && !Array.isArray(item);
 
-const deepMerge = <T extends Record<string, any>, U extends Record<string, any>>(
+const deepMerge = <T extends Record<string, unknown>, U extends Record<string, unknown>>(
   target: T,
   source: U,
 ): T & U => {
   let output = { ...target } as T & U;
 
   if (isObject(target) && isObject(source)) {
-    Object.keys(source).forEach((key: keyof U) => {
-      if (isObject(source[key])) {
+    Object.keys(source).forEach((key) => {
+      const sourceValue = source[key];
+      if (isObject(sourceValue)) {
         if (!(key in target)) {
-          Object.assign(output, { [key]: source[key] });
+          Object.assign(output, { [key]: sourceValue });
         } else {
-          output[key as keyof T & U] = deepMerge(target[key as keyof T] as any, source[key] as any);
+          const targetValue = target[key];
+          if (isObject(targetValue)) {
+            // Using Record<string, unknown> for recursive type
+            (output as Record<string, unknown>)[key] = deepMerge(targetValue, sourceValue);
+          } else {
+            Object.assign(output, { [key]: sourceValue });
+          }
         }
       } else {
-        Object.assign(output, { [key]: source[key] });
+        Object.assign(output, { [key]: sourceValue });
       }
     });
   }
@@ -41,12 +48,18 @@ const deepMerge = <T extends Record<string, any>, U extends Record<string, any>>
 const AppContextProvider = ({ children, lang, font, plugins, options }: Props) => {
   let theme = defaultTheme;
   if (options.theme) {
-    theme = deepMerge(theme, options.theme);
+    theme = deepMerge(
+      theme as unknown as Record<string, unknown>,
+      options.theme as unknown as Record<string, unknown>,
+    ) as typeof theme;
   }
 
   let dict = getDict(lang);
   if (options.labels) {
-    dict = deepMerge(dict, options.labels);
+    dict = deepMerge(
+      dict as unknown as Record<string, unknown>,
+      options.labels as unknown as Record<string, unknown>,
+    ) as typeof dict;
   }
 
   return (

package/src/components/CtlBar.tsx

@@ -7,7 +7,7 @@ import { Plus, Minus, ChevronLeft, ChevronRight, Ellipsis } from 'lucide-react';
 import type { MenuProps } from 'antd';
 import { theme, Typography, Button, Dropdown } from 'antd';
 import { I18nContext } from '../contexts.js';
-import { getMaxZoom } from '../helper.js';
+import { useMaxZoom } from '../helper.js';
 
 const { Text } = Typography;
 
@@ -20,7 +20,7 @@ type ZoomProps = {
 
 const Zoom = ({ zoomLevel, setZoomLevel, style }: ZoomProps) => {
   const zoomStep = 0.25;
-  const maxZoom = getMaxZoom();
+  const maxZoom = useMaxZoom();
   const minZoom = 0.25;
 
   const nextZoomOut = zoomLevel - zoomStep;

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

@@ -17,23 +17,14 @@ const guideStyle = (
   background: '#333333',
 });
 
-// Define the interface for the Guides component
-interface GuidesInterface {
-  getGuides(): number[];
-  scroll(pos: number): void;
-  scrollGuides(pos: number): void;
-  loadGuides(guides: number[]): void;
-  resize(): void;
-}
-
 const _Guides = ({
   paperSize,
   horizontalRef,
   verticalRef,
 }: {
   paperSize: Size;
-  horizontalRef: Ref<GuidesInterface> | undefined;
-  verticalRef: Ref<GuidesInterface> | undefined;
+  horizontalRef: Ref<GuidesComponent> | undefined;
+  verticalRef: Ref<GuidesComponent> | undefined;
 }) => (
   <>
     <div
@@ -44,13 +35,13 @@ const _Guides = ({
       zoom={ZOOM}
       style={guideStyle(-RULER_HEIGHT, 0, RULER_HEIGHT, paperSize.width)}
       type="horizontal"
-      ref={horizontalRef as any}
+      ref={horizontalRef}
     />
     <GuidesComponent
       zoom={ZOOM}
       style={guideStyle(0, -RULER_HEIGHT, paperSize.height, RULER_HEIGHT)}
       type="vertical"
-      ref={verticalRef as any}
+      ref={verticalRef}
     />
   </>
 );

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

@@ -1,65 +1,13 @@
 import React, { useEffect, forwardRef, Ref } from 'react';
-import MoveableComponent from 'react-moveable';
+import MoveableComponent, {
+  OnDrag,
+  OnRotate,
+  OnRotateEnd,
+  OnClick,
+  OnResize,
+} from 'react-moveable';
 import { theme } from 'antd';
 
-// Define the types locally since they're not exported properly
-interface OnDrag {
-  target: HTMLElement | SVGElement;
-  left: number;
-  top: number;
-  // Add additional properties that might be used in the original library
-  beforeDelta: any;
-  beforeDist: any;
-  beforeTranslate: any;
-  delta: any;
-  dist: any;
-  transform: any;
-  translate: any;
-}
-
-interface OnResize {
-  target: HTMLElement | SVGElement;
-  width: number;
-  height: number;
-  direction: string;
-  // Add additional properties that might be used in the original library
-  offsetWidth: number;
-  offsetHeight: number;
-  dist: any;
-  delta: any;
-  transform: any;
-  translate: any;
-}
-
-interface OnRotate {
-  target: HTMLElement | SVGElement;
-  rotate: number;
-  // Add additional properties that might be used in the original library
-  beforeDist: any;
-  beforeDelta: any;
-  beforeRotate: any;
-  dist: any;
-  delta: any;
-  transform: any;
-}
-
-interface OnRotateEnd {
-  target: HTMLElement | SVGElement;
-}
-
-interface OnClick {
-  inputEvent: MouseEvent;
-  // Add additional properties that might be used in the original library
-  inputTarget: any;
-  isTarget: boolean;
-  containsTarget: boolean;
-  isDouble: boolean;
-  datas: any;
-  targets: any[];
-  clientX: number;
-  clientY: number;
-}
-
 type Props = {
   target: HTMLElement[];
   bounds: { left: number; top: number; bottom: number; right: number };
@@ -81,29 +29,26 @@ type Props = {
 
 const className = 'pdfme-moveable';
 
-const _Moveable = (props: Props, ref: Ref<any>) => {
+const Moveable = (props: Props, ref: Ref<MoveableComponent>) => {
   const { token } = theme.useToken();
   useEffect(() => {
-    const containerElement = document.querySelector(`.${className}`) as HTMLElement | null;
-    const containerElement2 = document.querySelectorAll(
-      `.${className} .moveable-line`,
-    ) as NodeListOf<HTMLElement>;
-    if (containerElement) {
+    const containerElement = document.querySelector(`.${className}`);
+    const containerElement2 = document.querySelectorAll(`.${className} .moveable-line`);
+    if (containerElement instanceof HTMLElement) {
       containerElement.style.setProperty('--moveable-color', token.colorPrimary);
-      Array.from(containerElement2).map((e) =>
-        e.style.setProperty('--moveable-color', token.colorPrimary),
-      );
+      Array.from(containerElement2).forEach((e) => {
+        if (e instanceof HTMLElement) {
+          e.style.setProperty('--moveable-color', token.colorPrimary);
+        }
+      });
     }
-  }, [props.target]);
+  }, [props.target, token.colorPrimary]);
 
   return (
-    // @ts-ignore
     <MoveableComponent
-      style={{ zIndex: 1 }}
       className={className}
       rootContainer={document ? document.body : undefined}
       snappable
-      snapCenter
       draggable
       rotatable={props.rotatable}
       resizable
@@ -118,18 +63,18 @@ const _Moveable = (props: Props, ref: Ref<any>) => {
       keepRatio={props.keepRatio}
       onRotate={props.onRotate}
       onRotateEnd={props.onRotateEnd}
-      onRotateGroup={({ events }: { events: any[] }) => {
+      onRotateGroup={({ events }: { events: OnRotate[] }) => {
         events.forEach(props.onRotate);
       }}
       onRotateGroupEnd={props.onRotateGroupEnd}
       onDrag={props.onDrag}
-      onDragGroup={({ events }: { events: any[] }) => {
+      onDragGroup={({ events }: { events: OnDrag[] }) => {
         events.forEach(props.onDrag);
       }}
       onDragEnd={props.onDragEnd}
       onDragGroupEnd={props.onDragGroupEnd}
       onResize={props.onResize}
-      onResizeGroup={({ events }: { events: any[] }) => {
+      onResizeGroup={({ events }: { events: OnResize[] }) => {
         events.forEach(props.onResize);
       }}
       onResizeEnd={props.onResizeEnd}
@@ -139,4 +84,4 @@ const _Moveable = (props: Props, ref: Ref<any>) => {
   );
 };
 
-export default forwardRef<any, Props>(_Moveable);
+export default forwardRef<MoveableComponent, Props>(Moveable);

package/src/components/Designer/Canvas/Selecto.tsx

@@ -1,42 +1,30 @@
 import React, { useEffect } from 'react';
-import SelectoComponent from 'react-selecto';
+import SelectoComponent, {
+  OnSelect as SelectoOnSelect,
+  OnDragStart as SelectoOnDragStart,
+} from 'react-selecto';
 import { SELECTABLE_CLASSNAME } from '../../../constants.js';
 import { theme } from 'antd';
 
-// Define the types locally to match what's expected in Canvas/index.tsx
-interface OnDragStart {
-  inputEvent: MouseEvent;
-  stop: () => void;
-  isTrusted: boolean;
-}
-
-interface OnSelect {
-  selected: Element[];
-  added: Element[];
-  removed: Element[];
-  inputEvent: MouseEvent;
-  rect: DOMRect;
-}
-
 type Props = {
   container: HTMLElement | null;
   continueSelect: boolean;
-  onDragStart: (e: OnDragStart) => void;
-  onSelect: (e: OnSelect) => void;
+  onDragStart: (e: SelectoOnDragStart) => void;
+  onSelect: (e: SelectoOnSelect) => void;
 };
 
 const className = 'pdfme-selecto';
 
-const _Selecto = (props: Props) => {
+const Selecto = (props: Props) => {
   const { token } = theme.useToken();
   useEffect(() => {
-    const containerElement = document.querySelector('.' + className) as HTMLElement | null;
-    if (containerElement) {
+    const containerElement = document.querySelector('.' + className);
+    if (containerElement instanceof HTMLElement) {
       containerElement.style.backgroundColor = token.colorPrimary;
       containerElement.style.opacity = '0.75';
       containerElement.style.borderColor = token.colorPrimaryBorder;
     }
-  }, [props.container]);
+  }, [props.container, token.colorPrimary, token.colorPrimaryBorder]);
 
   return (
     <SelectoComponent
@@ -49,9 +37,9 @@ const _Selecto = (props: Props) => {
       container={props.container}
       continueSelect={props.continueSelect}
       onDragStart={props.onDragStart}
-      onSelect={(e: any) => props.onSelect(e as OnSelect)}
+      onSelect={props.onSelect}
     />
   );
 };
 
-export default _Selecto;
+export default Selecto;