@pdfme/ui 5.5.3 → 5.5.4-dev.1

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

@@ -1,4 +1,4 @@
 import React from 'react';
 import type { SidebarProps } from '../../../../types.js';
-declare const ListView: (props: Pick<SidebarProps, "schemas" | "onSortEnd" | "onEdit" | "size" | "hoveringSchemaId" | "onChangeHoveringSchemaId" | "changeSchemas">) => React.JSX.Element;
+declare const ListView: (props: Pick<SidebarProps, "schemas" | "onSortEnd" | "onEdit" | "hoveringSchemaId" | "onChangeHoveringSchemaId" | "changeSchemas">) => React.JSX.Element;
 export default ListView;

package/dist/types/src/components/Designer/RightSidebar/layout.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export declare const SIDEBAR_H_PADDING_PX = 16;
+export declare const SIDEBAR_V_PADDING_PX = 8;
+export declare const SIDEBAR_HEADER_HEIGHT = 60;
+type SectionProps = {
+    children: React.ReactNode;
+};
+type SidebarFrameProps = SectionProps & {
+    className?: string;
+};
+export declare const SidebarFrame: ({ children, className }: SidebarFrameProps) => React.JSX.Element;
+export declare const SidebarHeader: ({ children }: SectionProps) => React.JSX.Element;
+export declare const SidebarBody: ({ children }: SectionProps) => React.JSX.Element;
+export declare const SidebarFooter: ({ children }: SectionProps) => React.JSX.Element;
+export {};

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

@@ -54,7 +54,6 @@ export declare const moveCommandToChangeSchemasArg: (props: {
     schemaId: string;
 }[];
 export declare const getPagesScrollTopByIndex: (pageSizes: Size[], index: number, scale: number) => number;
-export declare const getSidebarContentHeight: (sidebarHeight: number) => number;
 export declare const changeSchemas: (args: {
     objs: {
         key: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "5.5.3",
+  "version": "5.5.4-dev.1",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",

package/src/class.ts

@@ -40,10 +40,19 @@ export abstract class BaseUIClass {
     if (!this.domContainer) {
       return;
     }
+
+    const rect = this.domContainer.getBoundingClientRect();
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+
+    const visibleWidth = Math.max(0, Math.min(rect.right, vw) - Math.max(rect.left, 0));
+    const visibleHeight = Math.max(0, Math.min(rect.bottom, vh) - Math.max(rect.top, 0));
+
     this.size = {
-      height: this.domContainer.clientHeight || window.innerHeight,
-      width: this.domContainer.clientWidth || window.innerWidth,
+      height: visibleHeight,
+      width: visibleWidth,
     };
+
     this.render();
   }, 100);
 

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

@@ -1,5 +1,5 @@
 import { useForm } from 'form-render';
-import React, { useRef, useContext, useState, useEffect } from 'react';
+import React, { useRef, useContext, useState, useEffect, useCallback } from 'react';
 import type {
   Dict,
   ChangeSchemaItem,
@@ -12,13 +12,14 @@ import { isBlankPdf } from '@pdfme/common';
 import type { SidebarProps } from '../../../../types.js';
 import { Menu } from 'lucide-react';
 import { I18nContext, PluginsRegistry, OptionsContext } from '../../../../contexts.js';
-import { getSidebarContentHeight, debounce } from '../../../../helper.js';
+import { debounce } from '../../../../helper.js';
 import { DESIGNER_CLASSNAME } from '../../../../constants.js';
 import { theme, Typography, Button, Divider } from 'antd';
 import AlignWidget from './AlignWidget.js';
 import WidgetRenderer from './WidgetRenderer.js';
 import ButtonGroupWidget from './ButtonGroupWidget.js';
 import { InternalNamePath, ValidateErrorEntity } from 'rc-field-form/es/interface.js';
+import { SidebarBody, SidebarFrame, SidebarHeader, SIDEBAR_H_PADDING_PX } from '../layout.js';
 
 // Import FormRender as a default import
 import FormRenderComponent from 'form-render';
@@ -42,8 +43,7 @@ type DetailViewProps = Pick<
 const DetailView = (props: DetailViewProps) => {
   const { token } = theme.useToken();
 
-  const { size, schemasList, changeSchemas, deselectSchema, activeSchema, pageSize, basePdf } =
-    props;
+  const { schemasList, changeSchemas, deselectSchema, activeSchema, pageSize, basePdf } = props;
   const form = useForm();
 
   const i18n = useContext(I18nContext);
@@ -51,10 +51,13 @@ const DetailView = (props: DetailViewProps) => {
   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 typedI18n = useCallback(
+    (key: string): string => {
+      // Use a type assertion to handle the union type constraint
+      return typeof i18n === 'function' ? i18n(key as keyof Dict) : key;
+    },
+    [i18n],
+  );
 
   const [widgets, setWidgets] = useState<{
     [key: string]: (props: PropPanelWidgetProps) => React.JSX.Element;
@@ -84,7 +87,7 @@ const DetailView = (props: DetailViewProps) => {
       });
     }
     setWidgets(newWidgets);
-  }, [activeSchema, pluginsRegistry, JSON.stringify(options)]);
+  }, [activeSchema, options, pluginsRegistry, props, token, typedI18n]);
 
   useEffect(() => {
     // Create a type-safe copy of the schema with editable property
@@ -95,7 +98,7 @@ const DetailView = (props: DetailViewProps) => {
     form.setValues(values);
   }, [activeSchema, form]);
 
-  useEffect(() => form.resetFields(), [activeSchema.id]);
+  useEffect(() => form.resetFields(), [activeSchema.id, form]);
 
   useEffect(() => {
     uniqueSchemaName.current = (value: string): boolean => {
@@ -424,16 +427,20 @@ const DetailView = (props: DetailViewProps) => {
   }
 
   return (
-    <div className={DESIGNER_CLASSNAME + 'detail-view'}>
-      <div style={{ height: 40, display: 'flex', alignItems: 'center' }}>
+    <SidebarFrame className={DESIGNER_CLASSNAME + 'detail-view'}>
+      <SidebarHeader>
         <Button
           className={DESIGNER_CLASSNAME + 'back-button'}
           style={{
             position: 'absolute',
+            left: SIDEBAR_H_PADDING_PX,
             zIndex: 100,
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
+            transform: 'translateY(-50%)',
+            top: '50%',
+            paddingTop: '3px',
           }}
           onClick={deselectSchema}
           icon={<Menu strokeWidth={1.5} size={20} />}
@@ -441,15 +448,8 @@ const DetailView = (props: DetailViewProps) => {
         <Text strong style={{ textAlign: 'center', width: '100%' }}>
           {typedI18n('editField')}
         </Text>
-      </div>
-      <Divider style={{ marginTop: token.marginXS, marginBottom: token.marginXS }} />
-      <div
-        style={{
-          height: getSidebarContentHeight(size.height),
-          overflowY: 'auto',
-          overflowX: 'hidden',
-        }}
-      >
+      </SidebarHeader>
+      <SidebarBody>
         <FormRenderComponent
           form={form}
           schema={propPanelSchema}
@@ -457,8 +457,8 @@ const DetailView = (props: DetailViewProps) => {
           watch={{ '#': handleWatch }}
           locale="en-US"
         />
-      </div>
-    </div>
+      </SidebarBody>
+    </SidebarFrame>
   );
 };
 

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

@@ -135,29 +135,27 @@ const SelectableSortableContainer = (
       }}
     >
       <>
-        <div style={{ height: '100%', overflowY: 'auto' }}>
-          <SortableContext items={schemas} strategy={verticalListSortingStrategy}>
-            <ul style={{ margin: 0, padding: 0, listStyle: 'none', borderRadius: 5 }}>
-              {schemas.map((schema) => (
-                <SelectableSortableItem
-                  key={schema.id}
-                  style={{
-                    border: `1px solid ${
-                      schema.id === hoveringSchemaId ? token.colorPrimary : 'transparent'
-                    }`,
-                  }}
-                  schema={schema}
-                  schemas={schemas}
-                  isSelected={isItemSelected(schema.id) || activeId === schema.id}
-                  onEdit={onEdit}
-                  onSelect={onSelectionChanged}
-                  onMouseEnter={() => onChangeHoveringSchemaId(schema.id)}
-                  onMouseLeave={() => onChangeHoveringSchemaId(null)}
-                />
-              ))}
-            </ul>
-          </SortableContext>
-        </div>
+        <SortableContext items={schemas} strategy={verticalListSortingStrategy}>
+          <ul style={{ margin: 0, padding: 0, listStyle: 'none', borderRadius: 5 }}>
+            {schemas.map((schema) => (
+              <SelectableSortableItem
+                key={schema.id}
+                style={{
+                  border: `1px solid ${
+                    schema.id === hoveringSchemaId ? token.colorPrimary : 'transparent'
+                  }`,
+                }}
+                schema={schema}
+                schemas={schemas}
+                isSelected={isItemSelected(schema.id) || activeId === schema.id}
+                onEdit={onEdit}
+                onSelect={onSelectionChanged}
+                onMouseEnter={() => onChangeHoveringSchemaId(schema.id)}
+                onMouseLeave={() => onChangeHoveringSchemaId(null)}
+              />
+            ))}
+          </ul>
+        </SortableContext>
         {createPortal(
           <DragOverlay adjustScale>
             {activeId

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

@@ -1,42 +1,30 @@
 import React, { useContext, useState } from 'react';
 import type { SidebarProps } from '../../../../types.js';
-import { RIGHT_SIDEBAR_WIDTH, DESIGNER_CLASSNAME } from '../../../../constants.js';
+import { DESIGNER_CLASSNAME } from '../../../../constants.js';
 import { I18nContext } from '../../../../contexts.js';
-import { getSidebarContentHeight } from '../../../../helper.js';
-import { theme, Input, Typography, Divider, Button } from 'antd';
+import { Input, Typography, Button } from 'antd';
 import SelectableSortableContainer from './SelectableSortableContainer.js';
+import { SidebarBody, SidebarFooter, SidebarFrame, SidebarHeader } from '../layout.js';
 
 const { Text } = Typography;
 const { TextArea } = Input;
 
-const headHeight = 40;
-
 const ListView = (
   props: Pick<
     SidebarProps,
     | 'schemas'
     | 'onSortEnd'
     | 'onEdit'
-    | 'size'
     | 'hoveringSchemaId'
     | 'onChangeHoveringSchemaId'
     | 'changeSchemas'
   >,
 ) => {
-  const {
-    schemas,
-    onSortEnd,
-    onEdit,
-    size,
-    hoveringSchemaId,
-    onChangeHoveringSchemaId,
-    changeSchemas,
-  } = props;
-  const { token } = theme.useToken();
+  const { schemas, onSortEnd, onEdit, hoveringSchemaId, onChangeHoveringSchemaId, changeSchemas } =
+    props;
   const i18n = useContext(I18nContext);
   const [isBulkUpdateFieldNamesMode, setIsBulkUpdateFieldNamesMode] = useState(false);
   const [fieldNamesValue, setFieldNamesValue] = useState('');
-  const height = getSidebarContentHeight(size.height);
 
   const commitBulk = () => {
     const names = fieldNamesValue.split('\n');
@@ -60,23 +48,22 @@ const ListView = (
   };
 
   return (
-    <div className={DESIGNER_CLASSNAME + 'list-view'}>
-      <div style={{ height: headHeight, display: 'flex', alignItems: 'center' }}>
+    <SidebarFrame className={DESIGNER_CLASSNAME + 'list-view'}>
+      <SidebarHeader>
         <Text strong style={{ textAlign: 'center', width: '100%' }}>
           {i18n('fieldsList')}
         </Text>
-      </div>
-      <Divider style={{ marginTop: token.marginXS, marginBottom: token.marginXS }} />
-      <div style={{ height: height - headHeight }}>
+      </SidebarHeader>
+      <SidebarBody>
         {isBulkUpdateFieldNamesMode ? (
           <TextArea
             wrap="off"
             value={fieldNamesValue}
             onChange={(e) => setFieldNamesValue(e.target.value)}
             style={{
-              paddingLeft: 30,
-              height: height - headHeight,
-              width: RIGHT_SIDEBAR_WIDTH - 35,
+              height: '100%',
+              width: '100%',
+              resize: 'none',
               lineHeight: '2.75rem',
             }}
           />
@@ -89,32 +76,40 @@ const ListView = (
             onEdit={onEdit}
           />
         )}
-        <div
-          style={{
-            paddingTop: '0.5rem',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'flex-end',
-          }}
-        >
-          {isBulkUpdateFieldNamesMode ? (
-            <>
-              <Button className={DESIGNER_CLASSNAME + 'bulk-commit'} size="small" type="text" onClick={commitBulk}>
-                <u> {i18n('commitBulkUpdateFieldName')}</u>
-              </Button>
-              <span style={{ margin: '0 1rem' }}>/</span>
-              <Button className={DESIGNER_CLASSNAME + 'bulk-cancel'} size="small" type="text" onClick={() => setIsBulkUpdateFieldNamesMode(false)}>
-                <u> {i18n('cancel')}</u>
-              </Button>
-            </>
-          ) : (
-            <Button className={DESIGNER_CLASSNAME + 'bulk-update'} size="small" type="text" onClick={startBulk}>
-              <u> {i18n('bulkUpdateFieldName')}</u>
+      </SidebarBody>
+      <SidebarFooter>
+        {isBulkUpdateFieldNamesMode ? (
+          <>
+            <Button
+              className={DESIGNER_CLASSNAME + 'bulk-commit'}
+              size="small"
+              type="text"
+              onClick={commitBulk}
+            >
+              <u> {i18n('commitBulkUpdateFieldName')}</u>
+            </Button>
+            <span>/</span>
+            <Button
+              className={DESIGNER_CLASSNAME + 'bulk-cancel'}
+              size="small"
+              type="text"
+              onClick={() => setIsBulkUpdateFieldNamesMode(false)}
+            >
+              <u> {i18n('cancel')}</u>
             </Button>
-          )}
-        </div>
-      </div>
-    </div>
+          </>
+        ) : (
+          <Button
+            className={DESIGNER_CLASSNAME + 'bulk-update'}
+            size="small"
+            type="text"
+            onClick={startBulk}
+          >
+            <u> {i18n('bulkUpdateFieldName')}</u>
+          </Button>
+        )}
+      </SidebarFooter>
+    </SidebarFrame>
   );
 };
 

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

@@ -30,44 +30,40 @@ const Sidebar = (props: SidebarProps) => {
         width: sidebarOpen ? RIGHT_SIDEBAR_WIDTH : 0,
       }}
     >
-      <div>
-        <Button
-          className={DESIGNER_CLASSNAME + 'sidebar-toggle'}
-          style={{
-            position: 'absolute',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            top: '1rem',
-            right: '1rem',
-            zIndex: 100,
-          }}
-          icon={sidebarOpen ? <ArrowRight {...iconProps} /> : <ArrowLeft {...iconProps} />}
-          onClick={() => setSidebarOpen(!sidebarOpen)}
-        />
-        <div
-          style={{
-            width: RIGHT_SIDEBAR_WIDTH,
-            height: '100%',
-            display: sidebarOpen ? 'block' : 'none',
-            top: 0,
-            right: 0,
-            position: 'absolute',
-            padding: '0.7rem 1rem',
-            overflowY: 'auto',
-            fontFamily: "'Open Sans', sans-serif",
-            boxSizing: 'border-box',
-            background: token.colorBgLayout,
-          }}
-        >
-          <div>
-            {getActiveSchemas().length === 0 ? (
-              <ListView {...props} />
-            ) : (
-              <DetailView {...props} activeSchema={getLastActiveSchema()} />
-            )}
-          </div>
-        </div>
+      <Button
+        className={DESIGNER_CLASSNAME + 'sidebar-toggle'}
+        style={{
+          position: 'absolute',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          top: '14px',
+          right: '16px',
+          paddingTop: '2px',
+          zIndex: 100,
+        }}
+        icon={sidebarOpen ? <ArrowRight {...iconProps} /> : <ArrowLeft {...iconProps} />}
+        onClick={() => setSidebarOpen(!sidebarOpen)}
+      />
+      <div
+        style={{
+          width: RIGHT_SIDEBAR_WIDTH,
+          height: '100%',
+          display: sidebarOpen ? 'flex' : 'none',
+          top: 0,
+          right: 0,
+          position: 'absolute',
+          fontFamily: "'Open Sans', sans-serif",
+          boxSizing: 'border-box',
+          background: token.colorBgLayout,
+          borderLeft: `1px solid ${token.colorSplit}`,
+        }}
+      >
+        {getActiveSchemas().length === 0 ? (
+          <ListView {...props} />
+        ) : (
+          <DetailView {...props} activeSchema={getLastActiveSchema()} />
+        )}
       </div>
     </div>
   );

package/src/components/Designer/RightSidebar/layout.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { Divider } from 'antd';
+
+export const SIDEBAR_H_PADDING_PX = 16;
+export const SIDEBAR_V_PADDING_PX = 8;
+export const SIDEBAR_HEADER_HEIGHT = 60;
+
+type SectionProps = {
+  children: React.ReactNode;
+};
+type SidebarFrameProps = SectionProps & {
+  className?: string;
+};
+
+export const SidebarFrame = ({ children, className }: SidebarFrameProps) => (
+  <div
+    className={className}
+    style={{
+      height: '100%',
+      display: 'flex',
+      flex: 1,
+      flexDirection: 'column',
+    }}
+  >
+    {children}
+  </div>
+);
+
+export const SidebarHeader = ({ children }: SectionProps) => (
+  <div
+    style={{
+      position: 'relative',
+      minHeight: SIDEBAR_HEADER_HEIGHT,
+      display: 'flex',
+      flexShrink: 0,
+      flexDirection: 'column',
+      justifyContent: 'center',
+      padding: `${SIDEBAR_V_PADDING_PX}px ${SIDEBAR_H_PADDING_PX}px 0`,
+    }}
+  >
+    <div style={{ minHeight: 40, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+      {children}
+    </div>
+    <Divider style={{ marginTop: `${SIDEBAR_V_PADDING_PX}px`, marginBottom: 0 }} />
+  </div>
+);
+
+export const SidebarBody = ({ children }: SectionProps) => (
+  <div
+    style={{
+      flex: 1,
+      minHeight: 0,
+      overflowY: 'auto',
+      overflowX: 'hidden',
+      padding: `${SIDEBAR_V_PADDING_PX}px ${SIDEBAR_H_PADDING_PX}px`,
+    }}
+  >
+    {children}
+  </div>
+);
+
+export const SidebarFooter = ({ children }: SectionProps) => (
+  <div
+    style={{
+      display: 'flex',
+      flexShrink: 0,
+      alignItems: 'center',
+      justifyContent: 'flex-end',
+      gap: `${SIDEBAR_V_PADDING_PX}px`,
+      padding: `${SIDEBAR_H_PADDING_PX}px`,
+    }}
+  >
+    {children}
+  </div>
+);

package/src/helper.ts

@@ -420,9 +420,6 @@ export const getPagesScrollTopByIndex = (pageSizes: Size[], index: number, scale
     .reduce((acc, cur) => acc + (cur.height * ZOOM + RULER_HEIGHT * scale) * scale, 0);
 };
 
-export const getSidebarContentHeight = (sidebarHeight: number) =>
-  sidebarHeight - RULER_HEIGHT - RULER_HEIGHT / 2 - 30;
-
 const handlePositionSizeChange = (
   schema: SchemaForUI,
   key: string,