@pdfme/ui 5.3.11 → 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}
           />
         );
@@ -76,8 +83,11 @@ const DetailView = (props: DetailViewProps) => {
   }, [activeSchema, pluginsRegistry, JSON.stringify(options)]);
 
   useEffect(() => {
-    const values: any = { ...activeSchema };
-    values.editable = !values.readOnly;
+    // Create a type-safe copy of the schema with editable property
+    const values: Record<string, unknown> = { ...activeSchema };
+    // Safely access and set properties
+    const readOnly = typeof values.readOnly === 'boolean' ? values.readOnly : false;
+    values.editable = !readOnly;
     form.setValues(values);
   }, [activeSchema, form]);
 
@@ -96,14 +106,21 @@ const DetailView = (props: DetailViewProps) => {
     };
   }, [schemasList, activeSchema]);
 
-  const uniqueSchemaName = useRef((value: string): boolean => true);
+  // 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,
+  );
 
-  const validateUniqueSchemaName = (_: any, value: string): boolean =>
+  // Use proper type for validator function parameter
+  const validateUniqueSchemaName = (_: unknown, value: string): boolean =>
     uniqueSchemaName.current(value);
 
-  const handleWatch = debounce((formSchema: any) => {
-    const formAndSchemaValuesDiffer = (formValue: any, schemaValue: any): boolean => {
-      if (typeof formValue === 'object') {
+  // Use explicit type for debounce function that matches the expected signature
+  const handleWatch = debounce(function (...args: unknown[]) {
+    const formSchema = args[0] as Record<string, unknown>;
+    const formAndSchemaValuesDiffer = (formValue: unknown, schemaValue: unknown): boolean => {
+      if (typeof formValue === 'object' && formValue !== null) {
         return JSON.stringify(formValue) !== JSON.stringify(schemaValue);
       }
       return formValue !== schemaValue;
@@ -114,7 +131,7 @@ const DetailView = (props: DetailViewProps) => {
       if (['id', 'content'].includes(key)) continue;
 
       let value = formSchema[key];
-      if (formAndSchemaValuesDiffer(value, (activeSchema as any)[key])) {
+      if (formAndSchemaValuesDiffer(value, (activeSchema as Record<string, unknown>)[key])) {
         // FIXME memo: https://github.com/pdfme/pdfme/pull/367#issuecomment-1857468274
         if (value === null && ['rotate', 'opacity'].includes(key)) {
           value = undefined;
@@ -154,28 +171,100 @@ const DetailView = (props: DetailViewProps) => {
     }
   }, 100);
 
-  const activePlugin = Object.values(pluginsRegistry).find(
-    (plugin) => plugin?.propPanel.defaultSchema.type === activeSchema.type,
-  )!;
+  // 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 activePropPanelSchema = activePlugin?.propPanel.schema;
+  // Safely access the propPanel schema
+  const activePropPanelSchema = activePlugin?.propPanel?.schema;
   if (!activePropPanelSchema) {
     console.error(`[@pdfme/ui] No propPanel.schema for ${activeSchema.type}.
 Check this document: https://pdfme.com/docs/custom-schemas`);
   }
 
-  const typeOptions = Object.entries(pluginsRegistry).map(([label, value]) => ({
-    label,
-    value: value?.propPanel.defaultSchema.type,
-  }));
-  const defaultSchema = activePlugin.propPanel.defaultSchema;
+  // Create type-safe options for the type dropdown
+  // 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') {
+      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>;
+    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: 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 },
@@ -183,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: defaultSchema?.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',
@@ -218,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,
@@ -226,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,
@@ -234,46 +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: defaultSchema?.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: defaultSchema?.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') {
-    const { schemasList: _, ...propPanelProps } = props;
+    // 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 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>>),
     };
   }
 
@@ -292,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

@@ -6,127 +6,153 @@ import { Button, Typography } from 'antd';
 
 const { Text } = Typography;
 
+// Define prop types for Item component
 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;
 }
+// Using React.memo and forwardRef for optimized rendering
+// Using TypeScript interface for prop validation instead of PropTypes
 const Item = React.memo(
-  React.forwardRef<HTMLLIElement, Props>(
-    (
-      {
-        icon,
-        value,
-        status,
-        title,
-        required,
-        readOnly,
-        style,
-        dragOverlay,
-        onClick,
-        onMouseEnter,
-        onMouseLeave,
-        dragging,
-        fadeIn,
-        listeners,
-        sorting,
-        transition,
-        transform,
-        ...props
-      },
-      ref,
-    ) => {
-      const i18n = useContext(I18nContext);
+  /* 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,
+  ) {
+    /* eslint-enable react/prop-types */
+    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
+Item.displayName = 'Item';
+
 export default Item;

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

@@ -59,12 +59,32 @@ const SelectableSortableContainer = (
   };
 
   const getPluginIcon = (inSchema: string | SchemaForUI): ReactNode => {
+    // Get schema by ID or use directly
     const thisSchema =
       typeof inSchema === 'string' ? schemas.find((schema) => schema.id === inSchema) : inSchema;
 
-    const [pluginLabel, activePlugin] = Object.entries(pluginsRegistry).find(
-      ([label, plugin]) => plugin?.propPanel.defaultSchema.type === thisSchema?.type,
-    )!;
+    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 [pluginLabel, activePlugin] = pluginEntry || ['', undefined];
 
     if (!activePlugin) {
       return <></>;

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

@@ -39,12 +39,29 @@ const SelectableSortableItem = ({
 
   const newListeners = {
     ...listeners,
-    onClick: (event: any) => onSelect(schema.id, event.shiftKey),
+    onClick: (event: React.MouseEvent) => onSelect(schema.id, event.shiftKey),
   };
 
-  const [pluginLabel, thisPlugin] = Object.entries(pluginsRegistry).find(
-    ([label, plugin]) => plugin?.propPanel.defaultSchema.type === schema.type,
-  )!;
+  // 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 [pluginLabel, thisPlugin] = pluginEntry || ['', undefined];
 
   let status: undefined | 'is-warning' | 'is-danger';
   if (!schema.name) {