@pdfme/ui 5.3.11-dev.12 → 5.3.11-dev.14

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

@@ -24,34 +24,44 @@ const AlignWidget = (props: PropPanelWidgetProps) => {
     const tgtSize = isVertical ? 'width' : 'height';
     const isSingle = ass.length === 1;
     // Access pageSize property safely with proper type assertion
-    const root = pageSize && typeof pageSize === 'object' ? 
-      (tgtSize === 'width' ? 
-        (pageSize as unknown as { width: number }).width : 
-        (pageSize as unknown as { height: number }).height) : 0;
+    const root =
+      pageSize && typeof pageSize === 'object'
+        ? tgtSize === 'width'
+          ? (pageSize as unknown as { width: number }).width
+          : (pageSize as unknown as { height: number }).height
+        : 0;
 
     // Access position properties safely with proper type assertion
-    const min = isSingle ? 0 : Math.min(...ass.map((as) => {
-      // Safely access position property with proper type assertion
-      const position = as.position && typeof as.position === 'object' ? 
-        (as.position as unknown as { x: number; y: number }) : 
-        { x: 0, y: 0 };
-      return tgtPos === 'x' ? position.x : position.y;
-    }));
-    const max = isSingle ? root : Math.max(...ass.map((as) => {
-      // Safely access position and size properties with proper type assertion
-      const position = as.position && typeof as.position === 'object' ? 
-        (as.position as unknown as { x: number; y: number }) : 
-        { x: 0, y: 0 };
-      const posValue = tgtPos === 'x' ? position.x : position.y;
-      
-      // Safely access width/height with proper type assertion
-      const asWithSize = as as unknown as { width?: number; height?: number };
-      const sizeValue = tgtSize === 'width' ? 
-        (asWithSize.width || 0) : 
-        (asWithSize.height || 0);
-      
-      return posValue + sizeValue;
-    }));
+    const min = isSingle
+      ? 0
+      : Math.min(
+          ...ass.map((as) => {
+            // Safely access position property with proper type assertion
+            const position =
+              as.position && typeof as.position === 'object'
+                ? (as.position as unknown as { x: number; y: number })
+                : { x: 0, y: 0 };
+            return tgtPos === 'x' ? position.x : position.y;
+          }),
+        );
+    const max = isSingle
+      ? root
+      : Math.max(
+          ...ass.map((as) => {
+            // Safely access position and size properties with proper type assertion
+            const position =
+              as.position && typeof as.position === 'object'
+                ? (as.position as unknown as { x: number; y: number })
+                : { x: 0, y: 0 };
+            const posValue = tgtPos === 'x' ? position.x : position.y;
+
+            // Safely access width/height with proper type assertion
+            const asWithSize = as as unknown as { width?: number; height?: number };
+            const sizeValue = tgtSize === 'width' ? asWithSize.width || 0 : asWithSize.height || 0;
+
+            return posValue + sizeValue;
+          }),
+        );
 
     let basePos = min;
     // Define adjust function with consistent parameter usage
@@ -70,10 +80,8 @@ const AlignWidget = (props: PropPanelWidgetProps) => {
       ass.map((as) => {
         // Safely access size property with proper type assertion
         const asWithSize = as as unknown as { width?: number; height?: number; id: string };
-        const sizeValue = tgtSize === 'width' ? 
-          (asWithSize.width || 0) : 
-          (asWithSize.height || 0);
-        
+        const sizeValue = tgtSize === 'width' ? asWithSize.width || 0 : asWithSize.height || 0;
+
         return {
           key: `position.${tgtPos}`,
           value: round(basePos - adjust(sizeValue), 2),
@@ -90,30 +98,34 @@ const AlignWidget = (props: PropPanelWidgetProps) => {
     const isVertical = type === 'vertical';
     const tgtPos = isVertical ? 'y' : 'x';
     const tgtSize = isVertical ? 'height' : 'width';
-    
+
     // Safely access position property with proper type assertion
-    const min = Math.min(...ass.map((as) => {
-      const position = as.position && typeof as.position === 'object' ? 
-        (as.position as unknown as { x: number; y: number }) : 
-        { x: 0, y: 0 };
-      return tgtPos === 'x' ? position.x : position.y;
-    }));
-    
+    const min = Math.min(
+      ...ass.map((as) => {
+        const position =
+          as.position && typeof as.position === 'object'
+            ? (as.position as unknown as { x: number; y: number })
+            : { x: 0, y: 0 };
+        return tgtPos === 'x' ? position.x : position.y;
+      }),
+    );
+
     // Safely access position and size properties with proper type assertion
-    const max = Math.max(...ass.map((as) => {
-      const position = as.position && typeof as.position === 'object' ? 
-        (as.position as unknown as { x: number; y: number }) : 
-        { x: 0, y: 0 };
-      const posValue = tgtPos === 'x' ? position.x : position.y;
-      
-      // Safely access width/height with proper type assertion
-      const asWithSize = as as unknown as { width?: number; height?: number };
-      const sizeValue = tgtSize === 'width' ? 
-        (asWithSize.width || 0) : 
-        (asWithSize.height || 0);
-      
-      return posValue + sizeValue;
-    }));
+    const max = Math.max(
+      ...ass.map((as) => {
+        const position =
+          as.position && typeof as.position === 'object'
+            ? (as.position as unknown as { x: number; y: number })
+            : { x: 0, y: 0 };
+        const posValue = tgtPos === 'x' ? position.x : position.y;
+
+        // Safely access width/height with proper type assertion
+        const asWithSize = as as unknown as { width?: number; height?: number };
+        const sizeValue = tgtSize === 'width' ? asWithSize.width || 0 : asWithSize.height || 0;
+
+        return posValue + sizeValue;
+      }),
+    );
 
     if (ass.length < 3) return;
 
@@ -122,9 +134,7 @@ const AlignWidget = (props: PropPanelWidgetProps) => {
     // Safely access size property with proper type assertion
     const sum = ass.reduce((acc, cur) => {
       const curWithSize = cur as unknown as { width?: number; height?: number };
-      const sizeValue = tgtSize === 'width' ? 
-        (curWithSize.width || 0) : 
-        (curWithSize.height || 0);
+      const sizeValue = tgtSize === 'width' ? curWithSize.width || 0 : curWithSize.height || 0;
       return acc + sizeValue;
     }, 0);
     const remain = boxSize - sum;
@@ -134,16 +144,17 @@ const AlignWidget = (props: PropPanelWidgetProps) => {
     changeSchemas(
       ass.map((as, index) => {
         // Safely access size property of previous element with proper type assertion
-        const prevSize = index === 0 ? 0 : (() => {
-          const prevAs = ass[index - 1] as unknown as { width?: number; height?: number };
-          return tgtSize === 'width' ? 
-            (prevAs.width || 0) : 
-            (prevAs.height || 0);
-        })();
-        
+        const prevSize =
+          index === 0
+            ? 0
+            : (() => {
+                const prevAs = ass[index - 1] as unknown as { width?: number; height?: number };
+                return tgtSize === 'width' ? prevAs.width || 0 : prevAs.height || 0;
+              })();
+
         prev += index === 0 ? 0 : prevSize + unit;
         const value = round(boxPos + prev, 2);
-        
+
         // Safely access id with proper type assertion
         const asWithId = as as unknown as { id: string };
         return { key: `position.${tgtPos}`, value, schemaId: asWithId.id };

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

@@ -35,9 +35,8 @@ const ButtonGroupWidget = (props: PropPanelWidgetProps) => {
     ass.forEach((s: SchemaForUI) => {
       // Cast schema to Record to safely access dynamic properties
       const schemaRecord = s as Record<string, unknown>;
-      active = type === 'boolean' 
-        ? Boolean(schemaRecord[key] ?? false) 
-        : schemaRecord[key] === btn.value;
+      active =
+        type === 'boolean' ? Boolean(schemaRecord[key] ?? false) : schemaRecord[key] === btn.value;
     });
     return active;
   };

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

@@ -45,7 +45,7 @@ const DetailView = (props: DetailViewProps) => {
   const i18n = useContext(I18nContext);
   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
@@ -109,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);
       }
@@ -177,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;
@@ -200,7 +196,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
   // 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
@@ -208,58 +204,59 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
       typeOptions.push({ label, value: undefined });
       return;
     }
-    
-    if (!('propPanel' in value) || 
-        !value.propPanel || 
-        typeof value.propPanel !== 'object') {
+
+    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') {
+
+    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];
+  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;
         }
-      }
-      
-      return result;
-    })() : 
-    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 = {
@@ -347,11 +344,20 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
 
   // 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,
+    };
 
     // Use the typedI18n function to avoid type issues
     const functionResult = activePropPanelSchema({
@@ -360,13 +366,14 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
       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' } };
-    
+    const dividerObj =
+      Object.keys(apps).length === 0 ? {} : { '--': { type: 'void', widget: 'Divider' } };
+
     // Assign properties safely - use type assertion to satisfy TypeScript
     propPanelSchema.properties = {
       ...safeProperties,
@@ -375,11 +382,15 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
     };
   } else {
     // Handle non-function case
-    const apps = activePropPanelSchema && typeof activePropPanelSchema === 'object' ? activePropPanelSchema : {};
-    
+    const apps =
+      activePropPanelSchema && typeof activePropPanelSchema === 'object'
+        ? activePropPanelSchema
+        : {};
+
     // Create a divider if needed
-    const dividerObj = Object.keys(apps).length === 0 ? {} : { '--': { type: 'void', widget: 'Divider' } };
-    
+    const dividerObj =
+      Object.keys(apps).length === 0 ? {} : { '--': { type: 'void', widget: 'Divider' } };
+
     // Assign properties safely - use type assertion to satisfy TypeScript
     propPanelSchema.properties = {
       ...safeProperties,

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