@pdfme/ui 2.2.0 → 3.0.0-beta.2

package/src/components/Designer/{Main → Canvas}/index.tsx

@@ -1,31 +1,33 @@
 import React, {
   Ref,
+  useMemo,
+  useContext,
   MutableRefObject,
   useRef,
   useState,
   useEffect,
   forwardRef,
   useCallback,
-  useContext,
 } from 'react';
-import { OnDrag, OnResize, OnClick } from 'react-moveable';
-import { SchemaForUI, Size } from '@pdfme/common';
+import { OnDrag, OnResize, OnClick, OnRotate } from 'react-moveable';
+import { ZOOM, SchemaForUI, Size, ChangeSchemas } from '@pdfme/common';
+import { PropPanelRegistry } from '../../../contexts';
 import { XMarkIcon } from '@heroicons/react/24/outline';
-import { ZOOM, RULER_HEIGHT } from '../../../constants';
+import { RULER_HEIGHT, SIDEBAR_WIDTH } from '../../../constants';
 import { usePrevious } from '../../../hooks';
 import { uuid, round, flatten } from '../../../helper';
 import Paper from '../../Paper';
-import SchemaUI from '../../Schemas/SchemaUI';
+import Renderer from '../../Renderer';
 import Selecto from './Selecto';
 import Moveable from './Moveable';
 import Guides from './Guides';
 import Mask from './Mask';
-import { FontContext } from '../../../contexts';
 
 const DELETE_BTN_ID = uuid();
 const fmt4Num = (prop: string) => Number(prop.replace('px', ''));
 const fmt = (prop: string) => round(fmt4Num(prop) / ZOOM, 2);
 const isTopLeftResize = (d: string) => d === '-1,-1' || d === '-1,0' || d === '0,-1';
+const normalizeRotate = (angle: number) => ((angle % 360) + 360) % 360;
 
 const DeleteButton = ({ activeElements: aes }: { activeElements: HTMLElement[] }) => {
   const top = Math.min(...aes.map(({ style }) => fmt4Num(style.top)));
@@ -78,12 +80,13 @@ interface Props {
   size: Size;
   activeElements: HTMLElement[];
   onEdit: (targets: HTMLElement[]) => void;
-  changeSchemas: (objs: { key: string; value: string | number; schemaId: string }[]) => void;
+  changeSchemas: ChangeSchemas;
   removeSchemas: (ids: string[]) => void;
   paperRefs: MutableRefObject<HTMLDivElement[]>;
+  sidebarOpen: boolean;
 }
 
-const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
+const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
   const {
     pageCursor,
     scale,
@@ -93,14 +96,18 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
     activeElements,
     schemasList,
     hoveringSchemaId,
+    onEdit,
+    changeSchemas,
+    removeSchemas,
+    onChangeHoveringSchemaId,
+    paperRefs,
+    sidebarOpen,
   } = props;
-  const { onEdit, changeSchemas, removeSchemas, onChangeHoveringSchemaId, paperRefs } = props;
+  const propPanelRegistry = useContext(PropPanelRegistry);
 
-  const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);
   const verticalGuides = useRef<GuidesInterface[]>([]);
   const horizontalGuides = useRef<GuidesInterface[]>([]);
   const moveable = useRef<any>(null);
-  const font = useContext(FontContext);
 
   const [isPressShiftKey, setIsPressShiftKey] = useState(false);
   const [editing, setEditing] = useState(false);
@@ -166,6 +173,26 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
     changeSchemas(flatten(arg));
   };
 
+  const onRotate = ({ target, rotate }: OnRotate) => {
+    target.style.transform = `rotate(${rotate}deg)`;
+  };
+
+  const onRotateEnd = ({ target }: { target: HTMLElement | SVGElement }) => {
+    const { transform } = target.style;
+    const rotate = Number(transform.replace('rotate(', '').replace('deg)', ''));
+    const normalizedRotate = normalizeRotate(rotate);
+    changeSchemas([{ key: 'rotate', value: normalizedRotate, schemaId: target.id }]);
+  };
+
+  const onRotateEnds = ({ targets }: { targets: (HTMLElement | SVGElement)[] }) => {
+    const arg = targets.map(({ style: { transform }, id }) => {
+      const rotate = Number(transform.replace('rotate(', '').replace('deg)', ''));
+      const normalizedRotate = normalizeRotate(rotate);
+      return [{ key: 'rotate', value: normalizedRotate, schemaId: id }];
+    });
+    changeSchemas(flatten(arg));
+  };
+
   const onResizeEnd = async ({ target }: { target: HTMLElement | SVGElement }) => {
     const { id, style } = target;
     const { width, height, top, left } = style;
@@ -223,16 +250,29 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
   const onClickMoveable = (e: OnClick) => {
     e.inputEvent.stopPropagation();
     setEditing(true);
-    const ic = inputRef.current;
-    if (!ic) return;
-    ic.focus();
-    if (ic.type !== 'file') {
-      ic.setSelectionRange(ic.value.length, ic.value.length);
-    }
   };
 
+  const rotatable = useMemo(() => {
+    const selectedSchemas = schemasList[pageCursor].filter((s) =>
+      activeElements.map((ae) => ae.id).includes(s.id)
+    );
+    const schemaTypes = selectedSchemas.map((s) => s.type);
+    const uniqueSchemaTypes = [...new Set(schemaTypes)];
+    return uniqueSchemaTypes.every(
+      (type) => propPanelRegistry[type]?.defaultSchema?.rotate !== undefined
+    );
+  }, [activeElements, pageCursor, schemasList]);
+
   return (
-    <div ref={ref} style={{ overflow: 'overlay' }}>
+    <div
+      style={{
+        position: 'relative',
+        overflow: 'auto',
+        marginRight: sidebarOpen ? SIDEBAR_WIDTH : 0,
+        ...size,
+      }}
+      ref={ref}
+    >
       <Selecto
         container={paperRefs.current[pageCursor]}
         continueSelect={isPressShiftKey}
@@ -277,6 +317,7 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
         schemasList={schemasList}
         pageSizes={pageSizes}
         backgrounds={backgrounds}
+        hasRulers={true}
         renderPaper={({ index, paperSize }) => (
           <>
             {!editing && activeElements.length > 0 && (
@@ -285,18 +326,17 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
             <Guides
               paperSize={paperSize}
               horizontalRef={(e) => {
-                if (e) {
-                  horizontalGuides.current[index] = e;
-                }
+                if (e) horizontalGuides.current[index] = e;
               }}
               verticalRef={(e) => {
-                if (e) {
-                  verticalGuides.current[index] = e;
-                }
+                if (e) verticalGuides.current[index] = e;
               }}
             />
             {pageCursor !== index ? (
-              <Mask width={paperSize.width + RULER_HEIGHT} height={paperSize.height} />
+              <Mask
+                width={paperSize.width + RULER_HEIGHT}
+                height={paperSize.height + RULER_HEIGHT}
+              />
             ) : (
               !editing && (
                 <Moveable
@@ -306,9 +346,13 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
                   horizontalGuidelines={getGuideLines(horizontalGuides.current, index)}
                   verticalGuidelines={getGuideLines(verticalGuides.current, index)}
                   keepRatio={isPressShiftKey}
+                  rotatable={rotatable}
                   onDrag={onDrag}
                   onDragEnd={onDragEnd}
                   onDragGroupEnd={onDragEnds}
+                  onRotate={onRotate}
+                  onRotateEnd={onRotateEnd}
+                  onRotateGroupEnd={onRotateEnds}
                   onResize={onResize}
                   onResizeEnd={onResizeEnd}
                   onResizeGroupEnd={onResizeEnds}
@@ -319,21 +363,24 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
           </>
         )}
         renderSchema={({ schema }) => (
-          <SchemaUI
+          <Renderer
             key={schema.id}
             schema={schema}
             onChangeHoveringSchemaId={onChangeHoveringSchemaId}
-            editable={editing && activeElements.map((ae) => ae.id).includes(schema.id)}
+            mode={
+              editing && activeElements.map((ae) => ae.id).includes(schema.id)
+                ? 'designer'
+                : 'viewer'
+            }
             onChange={(value) => {
               changeSchemas([{ key: 'data', value, schemaId: schema.id }]);
             }}
-            onStopEditing={() => setEditing(false)}
+            stopEditing={() => setEditing(false)}
             outline={hoveringSchemaId === schema.id ? '1px solid #18a0fb' : '1px dashed #4af'}
-            ref={inputRef}
           />
         )}
       />
     </div>
   );
 };
-export default forwardRef<HTMLDivElement, Props>(Main);
+export default forwardRef<HTMLDivElement, Props>(Canvas);

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

@@ -0,0 +1,182 @@
+import { Button, Form } from 'antd';
+import React from 'react';
+import type { PropPanelWidgetProps } from '@pdfme/common';
+import { round } from '../../../../helper';
+
+const svgBaseProp = {
+  style: { width: '90%', height: '90%' },
+  xmlns: 'http://www.w3.org/2000/svg',
+  enableBackground: 'new 0 0 24 24',
+  height: '24px',
+  viewBox: '0 0 24 24',
+  width: '24px',
+  fill: '#000000',
+};
+
+const AlignWidget = ({
+  activeElements,
+  changeSchemas,
+  schemas,
+  pageSize,
+}: PropPanelWidgetProps) => {
+  const align = (type: 'left' | 'center' | 'right' | 'top' | 'middle' | 'bottom') => {
+    const ids = activeElements.map((ae) => ae.id);
+    const ass = schemas.filter((s) => ids.includes(s.id));
+
+    const isVertical = ['left', 'center', 'right'].includes(type);
+    const tgtPos = isVertical ? 'x' : 'y';
+    const tgtSize = isVertical ? 'width' : 'height';
+    const isSingle = ass.length === 1;
+    const root = pageSize[tgtSize];
+
+    const min = isSingle ? 0 : Math.min(...ass.map((as) => as.position[tgtPos]));
+    const max = isSingle ? root : Math.max(...ass.map((as) => as.position[tgtPos] + as[tgtSize]));
+
+    let basePos = min;
+    let adjust = (_: number) => 0;
+
+    if (['center', 'middle'].includes(type)) {
+      basePos = (min + max) / 2;
+      adjust = (num: number) => num / 2;
+    } else if (['right', 'bottom'].includes(type)) {
+      basePos = max;
+      adjust = (num: number) => num;
+    }
+
+    changeSchemas(
+      ass.map((as) => ({
+        key: `position.${tgtPos}`,
+        value: round(basePos - adjust(as[tgtSize]), 2),
+        schemaId: as.id,
+      }))
+    );
+  };
+
+  const distribute = (type: 'vertical' | 'horizontal') => {
+    const ids = activeElements.map((ae) => ae.id);
+    const ass = schemas.filter((s) => ids.includes(s.id));
+
+    const isVertical = type === 'vertical';
+    const tgtPos = isVertical ? 'y' : 'x';
+    const tgtSize = isVertical ? 'height' : 'width';
+    const min = Math.min(...ass.map((as) => as.position[tgtPos]));
+    const max = Math.max(...ass.map((as) => as.position[tgtPos] + as[tgtSize]));
+
+    if (ass.length < 3) return;
+
+    const boxPos = min;
+    const boxSize = max - min;
+    const sum = ass.reduce((acc, cur) => acc + cur[tgtSize], 0);
+    const remain = boxSize - sum;
+    const unit = remain / (ass.length - 1);
+
+    let prev = 0;
+    changeSchemas(
+      ass.map((as, index) => {
+        prev += index === 0 ? 0 : ass[index - 1][tgtSize] + unit;
+        const value = round(boxPos + prev, 2);
+        return { key: `position.${tgtPos}`, value, schemaId: as.id };
+      })
+    );
+  };
+
+  const layoutBtns: { id: string; icon: any; onClick: () => void }[] = [
+    {
+      id: 'left',
+      icon: (
+        <svg {...svgBaseProp}>
+          <rect fill="none" height="24" width="24" />
+          <path d="M4,22H2V2h2V22z M22,7H6v3h16V7z M16,14H6v3h10V14z" />
+        </svg>
+      ),
+      onClick: () => align('left'),
+    },
+    {
+      id: 'center',
+      icon: (
+        <svg {...svgBaseProp}>
+          <rect fill="none" height="24" width="24" />
+          <polygon points="11,2 13,2 13,7 21,7 21,10 13,10 13,14 18,14 18,17 13,17 13,22 11,22 11,17 6,17 6,14 11,14 11,10 3,10 3,7 11,7" />
+        </svg>
+      ),
+      onClick: () => align('center'),
+    },
+    {
+      id: 'right',
+      icon: (
+        <svg {...svgBaseProp}>
+          <rect fill="none" height="24" width="24" />
+          <path d="M20,2h2v20h-2V2z M2,10h16V7H2V10z M8,17h10v-3H8V17z" />
+        </svg>
+      ),
+      onClick: () => align('right'),
+    },
+    {
+      id: 'top',
+      icon: (
+        <svg {...svgBaseProp}>
+          <rect fill="none" height="24" width="24" />
+          <path d="M22,2v2H2V2H22z M7,22h3V6H7V22z M14,16h3V6h-3V16z" />
+        </svg>
+      ),
+      onClick: () => align('top'),
+    },
+    {
+      id: 'middle',
+      icon: (
+        <svg {...svgBaseProp}>
+          <rect fill="none" height="24" width="24" />
+          <polygon points="22,11 17,11 17,6 14,6 14,11 10,11 10,3 7,3 7,11 1.84,11 1.84,13 7,13 7,21 10,21 10,13 14,13 14,18 17,18 17,13 22,13" />
+        </svg>
+      ),
+      onClick: () => align('middle'),
+    },
+    {
+      id: 'bottom',
+      icon: (
+        <svg {...svgBaseProp}>
+          <rect fill="none" height="24" width="24" />
+          <path d="M22,22H2v-2h20V22z M10,2H7v16h3V2z M17,8h-3v10h3V8z" />
+        </svg>
+      ),
+      onClick: () => align('bottom'),
+    },
+    {
+      id: 'vertical',
+      icon: (
+        <svg {...svgBaseProp}>
+          <rect fill="none" height="24" width="24" />
+          <path d="M22,2v2H2V2H22z M7,10.5v3h10v-3H7z M2,20v2h20v-2H2z" />
+        </svg>
+      ),
+      onClick: () => distribute('vertical'),
+    },
+    {
+      id: 'horizontal',
+      icon: (
+        <svg {...svgBaseProp}>
+          <rect fill="none" height="24" width="24" />
+          <path d="M4,22H2V2h2V22z M22,2h-2v20h2V2z M13.5,7h-3v10h3V7z" />
+        </svg>
+      ),
+      onClick: () => distribute('horizontal'),
+    },
+  ];
+
+  return (
+    <Form.Item label="Align">
+      <Button.Group>
+        {layoutBtns.map((btn) => (
+          <Button
+            key={btn.id}
+            style={{ padding: 7 }}
+            disabled={activeElements.length <= 2 && ['vertical', 'horizontal'].includes(btn.id)}
+            {...btn}
+          />
+        ))}
+      </Button.Group>
+    </Form.Item>
+  );
+};
+
+export default AlignWidget;

package/src/components/Designer/Sidebar/DetailView/WidgetRenderer.tsx

@@ -0,0 +1,28 @@
+import React, { useEffect, useRef } from 'react';
+import type { PropPanelWidgetProps } from '@pdfme/common';
+
+type Props = PropPanelWidgetProps & {
+  widget: (props: PropPanelWidgetProps) => void;
+};
+
+const WidgetRenderer = (props: Props) => {
+  const { widget, ...otherProps } = props;
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (ref.current) {
+      ref.current.innerHTML = '';
+      widget({ ...otherProps, rootElement: ref.current });
+    }
+
+    return () => {
+      if (ref.current) {
+        ref.current.innerHTML = '';
+      }
+    };
+  }, [props.activeSchema]);
+
+  return <div ref={ref} />;
+};
+
+export default WidgetRenderer;

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

@@ -1,41 +1,172 @@
-import React, { useContext } from 'react';
-import { SchemaForUI } from '@pdfme/common';
-import { I18nContext } from '../../../../contexts';
+import FormRender, { useForm } from 'form-render';
+import React, { useContext, useEffect, useState } from 'react';
+import type { SchemaForUI, PropPanelWidgetProps, PropPanelSchema } from '@pdfme/common';
+import type { SidebarProps } from '../../../../types';
+import { Bars3Icon } from '@heroicons/react/20/solid';
+import { I18nContext, PropPanelRegistry, OptionsContext } from '../../../../contexts';
+import { RULER_HEIGHT } from '../../../../constants';
 import Divider from '../../../Divider';
-import { SidebarProps } from '../index';
-import TextPropEditor from './TextPropEditor';
-import ExampleInputEditor from './ExampleInputEditor';
-import PositionAndSizeEditor from './PositionAndSizeEditor';
-import TypeAndKeyEditor from './TypeAndKeyEditor';
+import AlignWidget from './AlignWidget';
+import WidgetRenderer from './WidgetRenderer';
 
 const DetailView = (
-  props: Pick<SidebarProps, 'schemas' | 'pageSize' | 'changeSchemas' | 'activeElements'> & {
+  props: Pick<
+    SidebarProps,
+    'size' | 'schemas' | 'pageSize' | 'changeSchemas' | 'activeElements' | 'deselectSchema'
+  > & {
     activeSchema: SchemaForUI;
   }
 ) => {
-  const { activeSchema } = props;
+  const { size, changeSchemas, deselectSchema, activeSchema, activeElements } = props;
+  const form = useForm();
+
   const i18n = useContext(I18nContext);
+  const propPanelRegistry = useContext(PropPanelRegistry);
+  const options = useContext(OptionsContext);
+
+  const [widgets, setWidgets] = useState<{
+    [key: string]: (props: PropPanelWidgetProps) => React.JSX.Element;
+  }>({});
+
+  useEffect(() => {
+    const newWidgets: typeof widgets = {
+      AlignWidget: (p) => <AlignWidget {...p} {...props} options={options} />,
+      Divider,
+    };
+    for (const propPanel of Object.values(propPanelRegistry)) {
+      const widgets = propPanel?.widgets || {};
+      Object.entries(widgets).forEach(([widgetKey, widgetValue]) => {
+        newWidgets[widgetKey] = (p) => (
+          <WidgetRenderer {...p} {...props} options={options} widget={widgetValue} />
+        );
+      });
+    }
+    setWidgets(newWidgets);
+  }, [activeSchema, activeElements, propPanelRegistry]);
+
+  useEffect(() => {
+    form.setValues({ ...activeSchema });
+  }, [activeSchema]);
+
+  const handleWatch = (newSchema: any) => {
+    const changes = [];
+    for (const key in newSchema) {
+      if (['id', 'data'].includes(key)) continue;
+      if (newSchema[key] !== (activeSchema as any)[key]) {
+        changes.push({ key, value: newSchema[key], schemaId: activeSchema.id });
+      }
+    }
+    if (changes.length) {
+      changeSchemas(changes);
+    }
+  };
+
+  const activePropPanelRegistry = propPanelRegistry[activeSchema.type];
+  const activePropPanelSchema = activePropPanelRegistry?.propPanelSchema;
+  if (!activePropPanelSchema) {
+    console.error(`[@pdfme/ui] No propPanel.propPanelSchema for ${activeSchema.type}.
+Check this document: https://pdfme.com/docs/custom-schemas`);
+  }
+
+  const propPanelSchema: PropPanelSchema = {
+    type: 'object',
+    column: 2,
+    properties: {
+      type: {
+        title: 'Type',
+        type: 'string',
+        widget: 'select',
+        props: {
+          options: Object.keys(propPanelRegistry).map((label) => ({ label, value: label })),
+        },
+      },
+      key: { title: 'Name', type: 'string', widget: 'input' },
+      '-': { type: 'void', widget: 'Divider', cellSpan: 2 },
+      align: { title: 'Align', type: 'void', widget: 'AlignWidget', cellSpan: 2 },
+      position: {
+        type: 'object',
+        widget: 'card',
+        properties: {
+          x: { title: 'X', type: 'number', widget: 'inputNumber' },
+          y: { title: 'Y', type: 'number', widget: 'inputNumber' },
+        },
+      },
+      width: { title: 'Width', type: 'number', widget: 'inputNumber', span: 8 },
+      height: { title: 'Height', type: 'number', widget: 'inputNumber', span: 8 },
+      rotate: {
+        title: 'Rotate',
+        type: 'number',
+        widget: 'inputNumber',
+        span: 8,
+        disabled: activePropPanelRegistry?.defaultSchema?.rotate === undefined,
+        max: 360,
+        min: 0,
+      },
+    },
+  };
+
+  if (typeof activePropPanelSchema === 'function') {
+    const apps = activePropPanelSchema({ ...props, options }) || {};
+    propPanelSchema.properties = {
+      ...propPanelSchema.properties,
+      ...(Object.keys(apps).length === 0
+        ? {}
+        : { '--': { type: 'void', widget: 'Divider', cellSpan: 2 } }),
+      ...apps,
+    };
+  } else {
+    const apps = activePropPanelSchema || {};
+    propPanelSchema.properties = {
+      ...propPanelSchema.properties,
+      ...(Object.keys(apps).length === 0
+        ? {}
+        : { '--': { type: 'void', widget: 'Divider', cellSpan: 2 } }),
+      ...apps,
+    };
+  }
 
   return (
     <div>
       <div style={{ height: 40, display: 'flex', alignItems: 'center' }}>
+        <span
+          style={{
+            position: 'absolute',
+            top: '0.75rem',
+            zIndex: 100,
+            border: 'none',
+            borderRadius: 2,
+            padding: '0.5rem',
+            cursor: 'pointer',
+            background: '#eee',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            maxWidth: 30,
+            maxHeight: 30,
+          }}
+          onClick={deselectSchema}
+        >
+          <Bars3Icon width={15} height={15} />
+        </span>
         <span style={{ textAlign: 'center', width: '100%', fontWeight: 'bold' }}>
           {i18n('editField')}
         </span>
       </div>
       <Divider />
-      <div style={{ fontSize: '0.9rem' }}>
-        <TypeAndKeyEditor {...props} />
-        <Divider />
-        <PositionAndSizeEditor {...props} />
-        <Divider />
-        {activeSchema.type === 'text' && (
-          <>
-            <TextPropEditor {...props} />
-            <Divider />
-          </>
-        )}
-        <ExampleInputEditor {...props} />
+      <div
+        style={{
+          height: size.height - RULER_HEIGHT - RULER_HEIGHT / 2 - 145,
+          overflowY: 'auto',
+          overflowX: 'hidden',
+        }}
+      >
+        <FormRender
+          form={form}
+          schema={propPanelSchema}
+          widgets={widgets}
+          watch={{ '#': handleWatch }}
+          locale="en-US"
+        />
       </div>
     </div>
   );

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

@@ -72,7 +72,7 @@ const Item = React.memo(
               {...listeners}
               style={{ padding: '0.5rem', background: 'none', border: 'none', display: 'flex' }}
             >
-              <object style={{ cursor: 'grab' }} width={15}>
+              <object style={{ cursor: 'grab', marginTop: 6 }} width={15}>
                 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="16" height="16">
                   <path d="M10 13a1 1 0 100-2 1 1 0 000 2zm-4 0a1 1 0 100-2 1 1 0 000 2zm1-5a1 1 0 11-2 0 1 1 0 012 0zm3 1a1 1 0 100-2 1 1 0 000 2zm1-5a1 1 0 11-2 0 1 1 0 012 0zM6 5a1 1 0 100-2 1 1 0 000 2z"></path>
                 </svg>

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

@@ -16,9 +16,9 @@ import {
   verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
 import { SchemaForUI } from '@pdfme/common';
+import type { SidebarProps } from '../../../../types';
 import Item from './Item';
 import SelectableSortableItem from './SelectableSortableItem';
-import { SidebarProps } from '../index';
 
 const SelectableSortableContainer = (
   props: Pick<
@@ -58,16 +58,16 @@ const SelectableSortableContainer = (
       sensors={sensors}
       collisionDetection={closestCorners}
       onDragStart={({ active }) => {
-        setActiveId(active.id);
+        setActiveId(String(active.id));
         setClonedItems(schemas);
 
-        if (!isItemSelected(active.id)) {
+        if (!isItemSelected(String(active.id))) {
           const newSelectedSchemas: SchemaForUI[] = [];
           setSelectedSchemas(newSelectedSchemas);
         } else if (selectedSchemas.length > 0) {
           onSortEnd(
             selectedSchemas.reduce((ret, selectedItem) => {
-              if (selectedItem.id === active.id) {
+              if (selectedItem.id === String(active.id)) {
                 return ret;
               }
               return ret.filter((schema) => schema !== selectedItem);
@@ -78,8 +78,8 @@ const SelectableSortableContainer = (
       onDragEnd={({ active, over }) => {
         const overId = over?.id || '';
 
-        const activeIndex = schemas.map((i) => i.id).indexOf(active.id);
-        const overIndex = schemas.map((i) => i.id).indexOf(overId);
+        const activeIndex = schemas.map((i) => i.id).indexOf(String(active.id));
+        const overIndex = schemas.map((i) => i.id).indexOf(String(overId));
 
         if (selectedSchemas.length) {
           let newSchemas = [...schemas];