@pdfme/ui 5.3.11-dev.7 → 5.3.11-dev.8

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/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<unknown, unknown>>;

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

@@ -1,6 +1,6 @@
 import { Template, BasePdf, SchemaForUI, Size, Plugins } from '@pdfme/common';
 export declare const uuid: () => string;
-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: {
@@ -58,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[];
@@ -70,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-dev.7",
+  "version": "5.3.11-dev.8",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",

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,12 @@ 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,7 @@
 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 +23,28 @@ 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 containerElement = document.querySelector(`.${className}`);
     const containerElement2 = document.querySelectorAll(
       `.${className} .moveable-line`,
-    ) as NodeListOf<HTMLElement>;
-    if (containerElement) {
+    );
+    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 +59,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 +80,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,27 @@
 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 +34,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;

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

@@ -10,6 +10,7 @@ import React, {
   useCallback,
 } from 'react';
 import { theme, Button } from 'antd';
+import MoveableComponent, { OnDrag, OnRotate, OnRotateEnd, OnClick, OnResize } from 'react-moveable';
 import {
   ZOOM,
   SchemaForUI,
@@ -33,60 +34,6 @@ import Mask from './Mask.js';
 import Padding from './Padding.js';
 import StaticSchema from '../../StaticSchema.js';
 
-// Define the interfaces 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 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;
-}
-
 const mm2px = (mm: number) => mm * 3.7795275591;
 
 const DELETE_BTN_ID = uuid();
@@ -175,7 +122,7 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
   const pluginsRegistry = useContext(PluginsRegistry);
   const verticalGuides = useRef<GuidesInterface[]>([]);
   const horizontalGuides = useRef<GuidesInterface[]>([]);
-  const moveable = useRef<any>(null);
+  const moveable = useRef<MoveableComponent>(null);
 
   const [isPressShiftKey, setIsPressShiftKey] = useState(false);
   const [editing, setEditing] = useState(false);
@@ -408,7 +355,7 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
         continueSelect={isPressShiftKey}
         onDragStart={(e) => {
           const { inputEvent } = e;
-          const isMoveableElement = moveable.current?.isMoveableElement(inputEvent.target);
+          const isMoveableElement = moveable.current?.isMoveableElement(inputEvent.target as Element);
           if ((inputEvent.type === 'touchstart' && e.isTrusted) || isMoveableElement) {
             e.stop();
           }

package/src/components/Designer/LeftSidebar.tsx

@@ -9,14 +9,14 @@ import { PluginsRegistry } from '../../contexts.js';
 import PluginIcon from './PluginIcon.js';
 
 const Draggable = (props: {
-  plugin: Plugin<any>;
+  plugin: Plugin<Schema>;
   scale: number;
   basePdf: BasePdf;
   children: React.ReactNode;
 }) => {
   const { scale, basePdf, plugin } = props;
   const { token } = theme.useToken();
-  const defaultSchema = plugin.propPanel.defaultSchema as Schema;
+  const defaultSchema = plugin.propPanel.defaultSchema;
   const draggable = useDraggable({ id: defaultSchema.type, data: defaultSchema });
   const { listeners, setNodeRef, attributes, transform, isDragging } = draggable;
   const style = { transform: CSS.Translate.toString(transform) };

package/src/components/Designer/PluginIcon.tsx

@@ -1,10 +1,10 @@
 import React, { useContext } from 'react';
-import { Plugin } from '@pdfme/common';
+import { Plugin, Schema } from '@pdfme/common';
 import { OptionsContext } from '../../contexts.js';
 import { theme } from 'antd';
 
 interface PluginIconProps {
-  plugin: Plugin<any>;
+  plugin: Plugin<Schema>;
   label: string;
   size?: number;
   styles?: React.CSSProperties;
@@ -38,7 +38,18 @@ const PluginIcon = (props: PluginIconProps) => {
   const { plugin, label, size, styles } = props;
   const { token } = theme.useToken();
   const options = useContext(OptionsContext);
-  const icon = options.icons?.[plugin.propPanel.defaultSchema.type] ?? plugin.icon;
+  
+  // Safely access plugin properties with proper type checking
+  const defaultSchemaType = plugin.propPanel && 
+    typeof plugin.propPanel === 'object' && 
+    plugin.propPanel.defaultSchema && 
+    typeof plugin.propPanel.defaultSchema === 'object' && 
+    'type' in plugin.propPanel.defaultSchema && 
+    typeof plugin.propPanel.defaultSchema.type === 'string' 
+      ? plugin.propPanel.defaultSchema.type 
+      : '';
+  
+  const icon = options.icons?.[defaultSchemaType] ?? plugin.icon;
   const iconStyles = {
     ...styles,
     color: token.colorText,