@pdfme/ui 5.3.11-dev.9 → 5.3.12-dev.1

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

@@ -1,11 +1,12 @@
 import { useForm } from 'form-render';
 import React, { useRef, useContext, useState, useEffect } from 'react';
 import type {
-  ChangeSchemaItem,
   Dict,
+  ChangeSchemaItem,
   SchemaForUI,
   PropPanelWidgetProps,
   PropPanelSchema,
+  Schema,
 } from '@pdfme/common';
 import type { SidebarProps } from '../../../../types.js';
 import { Menu } from 'lucide-react';
@@ -45,6 +46,12 @@ const DetailView = (props: DetailViewProps) => {
   const pluginsRegistry = useContext(PluginsRegistry);
   const options = useContext(OptionsContext);
 
+  // Define a type-safe i18n function that accepts string keys
+  const typedI18n = (key: string): string => {
+    // Use a type assertion to handle the union type constraint
+    return typeof i18n === 'function' ? i18n(key as keyof Dict) : key;
+  };
+
   const [widgets, setWidgets] = useState<{
     [key: string]: (props: PropPanelWidgetProps) => React.JSX.Element;
   }>({});
@@ -66,7 +73,7 @@ const DetailView = (props: DetailViewProps) => {
             {...props}
             options={options}
             theme={token}
-            i18n={i18n as (key: keyof Dict | string) => string}
+            i18n={typedI18n}
             widget={widgetValue}
           />
         );
@@ -102,22 +109,17 @@ const DetailView = (props: DetailViewProps) => {
   // Reference to a function that validates schema name uniqueness
   const uniqueSchemaName = useRef(
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    (_unused: string): boolean => true
+    (_unused: string): boolean => true,
   );
 
   // Use proper type for validator function parameter
-  const validateUniqueSchemaName = (
-    _: unknown, 
-    value: string
-  ): boolean => uniqueSchemaName.current(value);
+  const validateUniqueSchemaName = (_: unknown, value: string): boolean =>
+    uniqueSchemaName.current(value);
 
   // Use explicit type for debounce function that matches the expected signature
-  const handleWatch = debounce(function(...args: unknown[]) {
+  const handleWatch = debounce(function (...args: unknown[]) {
     const formSchema = args[0] as Record<string, unknown>;
-    const formAndSchemaValuesDiffer = (
-      formValue: unknown, 
-      schemaValue: unknown
-    ): boolean => {
+    const formAndSchemaValuesDiffer = (formValue: unknown, schemaValue: unknown): boolean => {
       if (typeof formValue === 'object' && formValue !== null) {
         return JSON.stringify(formValue) !== JSON.stringify(schemaValue);
       }
@@ -170,18 +172,19 @@ const DetailView = (props: DetailViewProps) => {
   }, 100);
 
   // Find the active plugin with proper type safety
-  const activePlugin = Object.values(pluginsRegistry).find(
-    (plugin) => {
-      if (!plugin || typeof plugin !== 'object') return false;
-      if (!plugin.propPanel || typeof plugin.propPanel !== 'object') return false;
-      if (!plugin.propPanel.defaultSchema || typeof plugin.propPanel.defaultSchema !== 'object') return false;
-      
-      const defaultSchema = plugin.propPanel.defaultSchema as Record<string, unknown>;
-      return 'type' in defaultSchema && 
-             typeof defaultSchema.type === 'string' && 
-             defaultSchema.type === activeSchema.type;
-    }
-  );
+  const activePlugin = Object.values(pluginsRegistry).find((plugin) => {
+    if (!plugin || typeof plugin !== 'object') return false;
+    if (!plugin.propPanel || typeof plugin.propPanel !== 'object') return false;
+    if (!plugin.propPanel.defaultSchema || typeof plugin.propPanel.defaultSchema !== 'object')
+      return false;
+
+    const defaultSchema = plugin.propPanel.defaultSchema as Record<string, unknown>;
+    return (
+      'type' in defaultSchema &&
+      typeof defaultSchema.type === 'string' &&
+      defaultSchema.type === activeSchema.type
+    );
+  });
 
   // Safely access the propPanel schema
   const activePropPanelSchema = activePlugin?.propPanel?.schema;
@@ -191,32 +194,77 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
   }
 
   // Create type-safe options for the type dropdown
-  const typeOptions = Object.entries(pluginsRegistry).map(([label, value]) => {
-    // Default value if plugin is invalid
-    const defaultValue = { label, value: undefined };
-    
+  // Create a type-safe options array for the dropdown
+  const typeOptions: Array<{ label: string; value: string | undefined }> = [];
+
+  // Safely populate the options array
+  Object.entries(pluginsRegistry).forEach(([label, value]) => {
     // Skip invalid plugins
-    if (!value || typeof value !== 'object') return defaultValue;
-    if (!value.propPanel || typeof value.propPanel !== 'object') return defaultValue;
-    if (!value.propPanel.defaultSchema || typeof value.propPanel.defaultSchema !== 'object') return defaultValue;
-    
+    if (!value || typeof value !== 'object') {
+      typeOptions.push({ label, value: undefined });
+      return;
+    }
+
+    if (!('propPanel' in value) || !value.propPanel || typeof value.propPanel !== 'object') {
+      typeOptions.push({ label, value: undefined });
+      return;
+    }
+
+    if (
+      !('defaultSchema' in value.propPanel) ||
+      !value.propPanel.defaultSchema ||
+      typeof value.propPanel.defaultSchema !== 'object'
+    ) {
+      typeOptions.push({ label, value: undefined });
+      return;
+    }
+
     // Safely extract the type
     const defaultSchema = value.propPanel.defaultSchema as Record<string, unknown>;
-    const schemaType = 'type' in defaultSchema && typeof defaultSchema.type === 'string' 
-      ? defaultSchema.type 
-      : undefined;
-    
-    return { label, value: schemaType };
+    let schemaType: string | undefined = undefined;
+
+    if ('type' in defaultSchema && typeof defaultSchema.type === 'string') {
+      schemaType = defaultSchema.type;
+    }
+
+    typeOptions.push({ label, value: schemaType });
   });
+  // Create a safe empty schema as fallback
+  const emptySchema: Record<string, unknown> = {};
+
   // Safely access the default schema with proper null checking
-  const defaultSchema = activePlugin?.propPanel?.defaultSchema || {};
+  const defaultSchema: Record<string, unknown> = activePlugin?.propPanel?.defaultSchema
+    ? // Create a safe copy of the schema
+      (() => {
+        // First check if the defaultSchema is an object
+        if (
+          typeof activePlugin.propPanel.defaultSchema !== 'object' ||
+          activePlugin.propPanel.defaultSchema === null
+        ) {
+          return emptySchema;
+        }
 
+        // Create a safe copy
+        const result: Record<string, unknown> = {};
+
+        // Only copy properties that exist on the object
+        for (const key in activePlugin.propPanel.defaultSchema) {
+          if (Object.prototype.hasOwnProperty.call(activePlugin.propPanel.defaultSchema, key)) {
+            result[key] = (activePlugin.propPanel.defaultSchema as Record<string, unknown>)[key];
+          }
+        }
+
+        return result;
+      })()
+    : emptySchema;
+
+  // Create a type-safe schema object
   const propPanelSchema: PropPanelSchema = {
     type: 'object',
     column: 2,
     properties: {
       type: {
-        title: i18n('type'),
+        title: typedI18n('type'),
         type: 'string',
         widget: 'select',
         props: { options: typeOptions },
@@ -224,32 +272,32 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         span: 12,
       },
       name: {
-        title: i18n('fieldName'),
+        title: typedI18n('fieldName'),
         type: 'string',
         required: true,
         span: 12,
         rules: [
           {
             validator: validateUniqueSchemaName,
-            message: i18n('validation.uniqueName'),
+            message: typedI18n('validation.uniqueName'),
           },
         ],
         props: { autoComplete: 'off' },
       },
       editable: {
-        title: i18n('editable'),
+        title: typedI18n('editable'),
         type: 'boolean',
         span: 8,
-        hidden: typeof (defaultSchema as Record<string, unknown>).readOnly !== 'undefined',
+        hidden: typeof defaultSchema.readOnly !== 'undefined',
       },
       required: {
-        title: i18n('required'),
+        title: typedI18n('required'),
         type: 'boolean',
         span: 16,
         hidden: '{{!formData.editable}}',
       },
       '-': { type: 'void', widget: 'Divider' },
-      align: { title: i18n('align'), type: 'void', widget: 'AlignWidget' },
+      align: { title: typedI18n('align'), type: 'void', widget: 'AlignWidget' },
       position: {
         type: 'object',
         widget: 'card',
@@ -259,7 +307,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         },
       },
       width: {
-        title: i18n('width'),
+        title: typedI18n('width'),
         type: 'number',
         widget: 'inputNumber',
         required: true,
@@ -267,7 +315,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         props: { min: 0 },
       },
       height: {
-        title: i18n('height'),
+        title: typedI18n('height'),
         type: 'number',
         widget: 'inputNumber',
         required: true,
@@ -275,48 +323,79 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         props: { min: 0 },
       },
       rotate: {
-        title: i18n('rotate'),
+        title: typedI18n('rotate'),
         type: 'number',
         widget: 'inputNumber',
-        disabled: typeof (defaultSchema as Record<string, unknown>).rotate === 'undefined',
+        disabled: typeof defaultSchema.rotate === 'undefined',
         max: 360,
         props: { min: 0 },
         span: 6,
       },
       opacity: {
-        title: i18n('opacity'),
+        title: typedI18n('opacity'),
         type: 'number',
         widget: 'inputNumber',
-        disabled: typeof (defaultSchema as Record<string, unknown>).opacity === 'undefined',
+        disabled: typeof defaultSchema.opacity === 'undefined',
         props: { step: 0.1, min: 0, max: 1 },
         span: 6,
       },
     },
   };
 
+  // Create a safe copy of the properties
+  const safeProperties = { ...propPanelSchema.properties };
+
   if (typeof activePropPanelSchema === 'function') {
     // Create a new object without the schemasList property
-    const { size, schemas, pageSize, changeSchemas, activeElements, deselectSchema, activeSchema } = props;
-    const propPanelProps = { size, schemas, pageSize, changeSchemas, activeElements, deselectSchema, activeSchema };
+    const { size, schemas, pageSize, changeSchemas, activeElements, deselectSchema, activeSchema } =
+      props;
+    const propPanelProps = {
+      size,
+      schemas,
+      pageSize,
+      changeSchemas,
+      activeElements,
+      deselectSchema,
+      activeSchema,
+    };
 
-    const apps =
-      activePropPanelSchema({
-        ...propPanelProps,
-        options,
-        theme: token,
-        i18n: i18n as (key: keyof Dict | string) => string,
-      }) || {};
+    // Use the typedI18n function to avoid type issues
+    const functionResult = activePropPanelSchema({
+      ...propPanelProps,
+      options,
+      theme: token,
+      i18n: typedI18n,
+    });
+
+    // Safely handle the result
+    const apps = functionResult && typeof functionResult === 'object' ? functionResult : {};
+
+    // Create a divider if needed
+    const dividerObj =
+      Object.keys(apps).length === 0 ? {} : { '--': { type: 'void', widget: 'Divider' } };
+
+    // Assign properties safely - use type assertion to satisfy TypeScript
     propPanelSchema.properties = {
-      ...propPanelSchema.properties,
-      ...(Object.keys(apps).length === 0 ? {} : { '--': { type: 'void', widget: 'Divider' } }),
-      ...apps,
+      ...safeProperties,
+      ...(dividerObj as Record<string, Partial<Schema>>),
+      ...(apps as Record<string, Partial<Schema>>),
     };
   } else {
-    const apps = activePropPanelSchema || {};
+    // Handle non-function case
+    const apps =
+      activePropPanelSchema && typeof activePropPanelSchema === 'object'
+        ? activePropPanelSchema
+        : {};
+
+    // Create a divider if needed
+    const dividerObj =
+      Object.keys(apps).length === 0 ? {} : { '--': { type: 'void', widget: 'Divider' } };
+
+    // Assign properties safely - use type assertion to satisfy TypeScript
     propPanelSchema.properties = {
-      ...propPanelSchema.properties,
-      ...(Object.keys(apps).length === 0 ? {} : { '--': { type: 'void', widget: 'Divider' } }),
-      ...apps,
+      ...safeProperties,
+      ...(dividerObj as Record<string, Partial<Schema>>),
+      ...(apps as Record<string, Partial<Schema>>),
     };
   }
 
@@ -335,7 +414,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
           icon={<Menu strokeWidth={1.5} size={20} />}
         />
         <Text strong style={{ textAlign: 'center', width: '100%' }}>
-          {i18n('editField')}
+          {typedI18n('editField')}
         </Text>
       </div>
       <Divider style={{ marginTop: token.marginXS, marginBottom: token.marginXS }} />

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

@@ -47,111 +47,109 @@ interface Props {
 // Using TypeScript interface for prop validation instead of PropTypes
 const Item = React.memo(
   /* eslint-disable react/prop-types */
-  React.forwardRef<HTMLLIElement, Props>(
-    function Item(
-      {
-        icon,
-        value,
-        status,
-        title,
-        required,
-        readOnly,
-        style,
-        dragOverlay,
-        onClick,
-        onMouseEnter,
-        onMouseLeave,
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        dragging,
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        fadeIn,
-        listeners,
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        sorting,
-        transition,
-        transform,
-        ...props
-      },
-      ref,
-    ) {
+  React.forwardRef<HTMLLIElement, Props>(function Item(
+    {
+      icon,
+      value,
+      status,
+      title,
+      required,
+      readOnly,
+      style,
+      dragOverlay,
+      onClick,
+      onMouseEnter,
+      onMouseLeave,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      dragging,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      fadeIn,
+      listeners,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      sorting,
+      transition,
+      transform,
+      ...props
+    },
+    ref,
+  ) {
     /* eslint-enable react/prop-types */
-      const i18n = useContext(I18nContext);
+    const i18n = useContext(I18nContext);
 
-      useEffect(() => {
-        if (!dragOverlay) {
-          return;
-        }
+    useEffect(() => {
+      if (!dragOverlay) {
+        return;
+      }
 
-        document.body.style.cursor = 'grabbing';
+      document.body.style.cursor = 'grabbing';
 
-        return () => {
-          document.body.style.cursor = '';
-        };
-      }, [dragOverlay]);
+      return () => {
+        document.body.style.cursor = '';
+      };
+    }, [dragOverlay]);
 
-      const { x, y, scaleX, scaleY } = transform || { x: 0, y: 0, scaleX: 1, scaleY: 1 };
+    const { x, y, scaleX, scaleY } = transform || { x: 0, y: 0, scaleX: 1, scaleY: 1 };
 
-      return (
-        <li
+    return (
+      <li
+        style={{
+          marginTop: 10,
+          transition,
+          transform: `translate(${x}px, ${y}px) scale(${scaleX}, ${scaleY})`,
+        }}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+        ref={ref}
+      >
+        <div
           style={{
-            marginTop: 10,
-            transition,
-            transform: `translate(${x}px, ${y}px) scale(${scaleX}, ${scaleY})`,
+            display: 'flex',
+            alignItems: 'center',
+            cursor: 'pointer',
+            gap: '0.5rem',
+            ...style,
           }}
-          onMouseEnter={onMouseEnter}
-          onMouseLeave={onMouseLeave}
-          ref={ref}
+          {...props}
+          onClick={() => onClick && onClick()}
         >
-          <div
+          <Button
+            {...listeners}
             style={{
               display: 'flex',
               alignItems: 'center',
-              cursor: 'pointer',
-              gap: '0.5rem',
-              ...style,
+              background: 'none',
+              boxShadow: 'none',
+              border: 'none',
+              paddingLeft: '0.25rem',
+            }}
+            icon={<GripVertical size={15} style={{ cursor: 'grab' }} />}
+          />
+          {icon}
+          <Text
+            style={{
+              overflow: 'hidden',
+              whiteSpace: 'nowrap',
+              textOverflow: 'ellipsis',
+              width: '100%',
             }}
-            {...props}
-            onClick={() => onClick && onClick()}
+            title={title || ''}
           >
-            <Button
-              {...listeners}
-              style={{
-                display: 'flex',
-                alignItems: 'center',
-                background: 'none',
-                boxShadow: 'none',
-                border: 'none',
-                paddingLeft: '0.25rem',
-              }}
-              icon={<GripVertical size={15} style={{ cursor: 'grab' }} />}
-            />
-            {icon}
-            <Text
-              style={{
-                overflow: 'hidden',
-                whiteSpace: 'nowrap',
-                textOverflow: 'ellipsis',
-                width: '100%',
-              }}
-              title={title || ''}
-            >
-              {status === undefined ? (
-                value
-              ) : (
-                <span style={{ display: 'flex', alignItems: 'center' }}>
-                  <CircleAlert size={15} style={{ marginRight: '0.25rem' }} />
-                  {status === 'is-warning' ? i18n('noKeyName') : value}
-                  {status === 'is-danger' ? i18n('notUniq') : ''}
-                </span>
-              )}
-            </Text>
-            {readOnly && <Lock size={15} style={{ marginRight: '0.5rem' }} />}
-            {required && <span style={{ color: 'red', marginRight: '0.5rem' }}>*</span>}
-          </div>
-        </li>
-      );
-    },
-  ),
+            {status === undefined ? (
+              value
+            ) : (
+              <span style={{ display: 'flex', alignItems: 'center' }}>
+                <CircleAlert size={15} style={{ marginRight: '0.25rem' }} />
+                {status === 'is-warning' ? i18n('noKeyName') : value}
+                {status === 'is-danger' ? i18n('notUniq') : ''}
+              </span>
+            )}
+          </Text>
+          {readOnly && <Lock size={15} style={{ marginRight: '0.5rem' }} />}
+          {required && <span style={{ color: 'red', marginRight: '0.5rem' }}>*</span>}
+        </div>
+      </li>
+    );
+  }),
 );
 
 // Set display name for debugging

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

@@ -62,27 +62,28 @@ const SelectableSortableContainer = (
     // Get schema by ID or use directly
     const thisSchema =
       typeof inSchema === 'string' ? schemas.find((schema) => schema.id === inSchema) : inSchema;
-    
+
     if (!thisSchema) return <></>;
-    
+
     // Safely extract schema type
     const schemaType = typeof thisSchema.type === 'string' ? thisSchema.type : '';
-    
+
     // Find matching plugin with type-safe approach
-    const pluginEntry = Object.entries(pluginsRegistry).find(
-      ([, plugin]) => {
-        if (!plugin || typeof plugin !== 'object') return false;
-        if (!plugin.propPanel || typeof plugin.propPanel !== 'object') return false;
-        if (!plugin.propPanel.defaultSchema || typeof plugin.propPanel.defaultSchema !== 'object') return false;
-        
-        // Use Record<string, unknown> to safely access properties
-        const defaultSchema = plugin.propPanel.defaultSchema as Record<string, unknown>;
-        return 'type' in defaultSchema && 
-               typeof defaultSchema.type === 'string' && 
-               defaultSchema.type === schemaType;
-      }
-    );
-    
+    const pluginEntry = Object.entries(pluginsRegistry).find(([, plugin]) => {
+      if (!plugin || typeof plugin !== 'object') return false;
+      if (!plugin.propPanel || typeof plugin.propPanel !== 'object') return false;
+      if (!plugin.propPanel.defaultSchema || typeof plugin.propPanel.defaultSchema !== 'object')
+        return false;
+
+      // Use Record<string, unknown> to safely access properties
+      const defaultSchema = plugin.propPanel.defaultSchema as Record<string, unknown>;
+      return (
+        'type' in defaultSchema &&
+        typeof defaultSchema.type === 'string' &&
+        defaultSchema.type === schemaType
+      );
+    });
+
     const [pluginLabel, activePlugin] = pluginEntry || ['', undefined];
 
     if (!activePlugin) {

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

@@ -44,22 +44,23 @@ const SelectableSortableItem = ({
 
   // Safely extract schema type
   const schemaType = typeof schema.type === 'string' ? schema.type : '';
-  
+
   // Find matching plugin with type-safe approach
-  const pluginEntry = Object.entries(pluginsRegistry).find(
-    ([, plugin]) => {
-      if (!plugin || typeof plugin !== 'object') return false;
-      if (!plugin.propPanel || typeof plugin.propPanel !== 'object') return false;
-      if (!plugin.propPanel.defaultSchema || typeof plugin.propPanel.defaultSchema !== 'object') return false;
-      
-      // Use Record<string, unknown> to safely access properties
-      const defaultSchema = plugin.propPanel.defaultSchema as Record<string, unknown>;
-      return 'type' in defaultSchema && 
-             typeof defaultSchema.type === 'string' && 
-             defaultSchema.type === schemaType;
-    }
-  );
-  
+  const pluginEntry = Object.entries(pluginsRegistry).find(([, plugin]) => {
+    if (!plugin || typeof plugin !== 'object') return false;
+    if (!plugin.propPanel || typeof plugin.propPanel !== 'object') return false;
+    if (!plugin.propPanel.defaultSchema || typeof plugin.propPanel.defaultSchema !== 'object')
+      return false;
+
+    // Use Record<string, unknown> to safely access properties
+    const defaultSchema = plugin.propPanel.defaultSchema as Record<string, unknown>;
+    return (
+      'type' in defaultSchema &&
+      typeof defaultSchema.type === 'string' &&
+      defaultSchema.type === schemaType
+    );
+  });
+
   const [pluginLabel, thisPlugin] = pluginEntry || ['', undefined];
 
   let status: undefined | 'is-warning' | 'is-danger';

package/src/components/Designer/index.tsx

@@ -227,7 +227,7 @@ const TemplateEditor = ({
     onChangeTemplate(newTemplate);
     await updateTemplate(newTemplate);
     void refresh(newTemplate);
-    
+
     // Use setTimeout to update scroll position after render
     setTimeout(() => {
       if (canvasRef.current) {

package/src/components/Preview.tsx

@@ -20,7 +20,7 @@ import { FontContext } from '../contexts.js';
 import { template2SchemasList, getPagesScrollTopByIndex, useMaxZoom } from '../helper.js';
 import { theme } from 'antd';
 
-const _cache = new Map();
+const _cache = new Map<string | number, unknown>();
 
 const Preview = ({
   template,