@pdfme/ui 1.0.0-beta.8 → 1.0.0-beta.9

package/dist/types/class.d.ts

@@ -7,7 +7,7 @@ export declare abstract class BaseUIClass {
     private readonly font;
     private readonly setSize;
     constructor(props: UIProps);
-    protected getI18n(): (key: "type" | "field" | "fieldName" | "require" | "uniq" | "inputExample" | "edit" | "plsSelect" | "plsInputName" | "plsAddNewField" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "addNewField" | "editField" | "previewWarnMsg" | "previewErrMsg" | "goToFirst" | "goToPrevious" | "goToNext" | "goToEnd" | "errorOccurred") => string;
+    protected getI18n(): (key: "type" | "field" | "cancel" | "fieldName" | "require" | "uniq" | "inputExample" | "edit" | "plsSelect" | "plsInputName" | "plsAddNewField" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "addNewField" | "editField" | "goToFirst" | "goToPrevious" | "goToNext" | "goToEnd" | "select" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName") => string;
     protected getFont(): Record<string, {
         fallback?: boolean | undefined;
         subset?: boolean | undefined;

package/dist/types/components/Designer/Sidebar/DetailView/ExampleInputEditor.d.ts

@@ -1,3 +1,6 @@
+import { SchemaForUI } from '@pdfme/common';
 import { SidebarProps } from '..';
-declare const ExampleInputEditor: (props: Pick<SidebarProps, 'changeSchemas' | 'activeSchema'>) => JSX.Element;
+declare const ExampleInputEditor: (props: Pick<SidebarProps, 'changeSchemas'> & {
+    activeSchema: SchemaForUI;
+}) => JSX.Element;
 export default ExampleInputEditor;

package/dist/types/components/Designer/Sidebar/DetailView/PositionAndSizeEditor.d.ts

@@ -1,3 +1,6 @@
+import { SchemaForUI } from '@pdfme/common';
 import { SidebarProps } from '..';
-declare const PositionAndSizeEditor: (props: Pick<SidebarProps, 'pageSize' | 'changeSchemas' | 'activeSchema'>) => JSX.Element;
+declare const PositionAndSizeEditor: (props: Pick<SidebarProps, 'pageSize' | 'schemas' | 'changeSchemas' | 'activeElements'> & {
+    activeSchema: SchemaForUI;
+}) => JSX.Element;
 export default PositionAndSizeEditor;

package/dist/types/components/Designer/Sidebar/DetailView/TextPropEditor.d.ts

@@ -1,3 +1,6 @@
+import { SchemaForUI } from '@pdfme/common';
 import { SidebarProps } from '..';
-declare const TextPropEditor: (props: Pick<SidebarProps, 'changeSchemas' | 'activeSchema'>) => JSX.Element;
+declare const TextPropEditor: (props: Pick<SidebarProps, 'changeSchemas'> & {
+    activeSchema: SchemaForUI;
+}) => JSX.Element;
 export default TextPropEditor;

package/dist/types/components/Designer/Sidebar/DetailView/TypeAndKeyEditor.d.ts

@@ -1,3 +1,6 @@
+import { SchemaForUI } from '@pdfme/common';
 import { SidebarProps } from '..';
-declare const TypeAndKeyEditor: (props: Pick<SidebarProps, 'schemas' | 'changeSchemas' | 'activeSchema'>) => JSX.Element;
+declare const TypeAndKeyEditor: (props: Pick<SidebarProps, 'schemas' | 'changeSchemas'> & {
+    activeSchema: SchemaForUI;
+}) => JSX.Element;
 export default TypeAndKeyEditor;

package/dist/types/components/Designer/Sidebar/DetailView/index.d.ts

@@ -1,3 +1,6 @@
+import { SchemaForUI } from '@pdfme/common';
 import { SidebarProps } from '..';
-declare const DetailView: (props: Pick<SidebarProps, 'schemas' | 'pageSize' | 'changeSchemas' | 'activeSchema'>) => JSX.Element;
+declare const DetailView: (props: Pick<SidebarProps, 'schemas' | 'pageSize' | 'changeSchemas' | 'activeElements'> & {
+    activeSchema: SchemaForUI;
+}) => JSX.Element;
 export default DetailView;

package/dist/types/components/Designer/Sidebar/ListView/Item.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { DraggableSyntheticListeners } from '@dnd-kit/core';
+interface Props {
+    value: React.ReactNode;
+    style?: React.CSSProperties;
+    status?: 'is-warning' | 'is-danger';
+    title?: string;
+    dragOverlay?: boolean;
+    onClick?: () => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    dragging?: boolean;
+    sorting?: boolean;
+    transition?: string;
+    transform?: {
+        x: number;
+        y: number;
+        scaleX: number;
+        scaleY: number;
+    } | null;
+    fadeIn?: boolean;
+    listeners?: DraggableSyntheticListeners;
+}
+declare const Item: React.MemoExoticComponent<React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLLIElement>>>;
+export default Item;

package/dist/types/components/Designer/Sidebar/ListView/SelectableSortableContainer.d.ts

@@ -0,0 +1,3 @@
+import { SidebarProps } from '../';
+declare const SelectableSortableContainer: (props: Pick<SidebarProps, 'schemas' | 'onEdit' | 'onSortEnd' | 'height' | 'hoveringSchemaId' | 'onChangeHoveringSchemaId'>) => JSX.Element;
+export default SelectableSortableContainer;

package/dist/types/components/Designer/Sidebar/ListView/SelectableSortableItem.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { SchemaForUI } from '@pdfme/common';
+interface Props {
+    isSelected: boolean;
+    style?: React.CSSProperties;
+    onSelect: (id: string, isShiftSelect: boolean) => void;
+    onEdit: (id: string) => void;
+    schema: SchemaForUI;
+    schemas: SchemaForUI[];
+    onMouseEnter: () => void;
+    onMouseLeave: () => void;
+}
+declare const SelectableSortableItem: ({ isSelected, style, onSelect, onEdit, schema, schemas, onMouseEnter, onMouseLeave, }: Props) => JSX.Element;
+export default SelectableSortableItem;

package/dist/types/components/Designer/Sidebar/ListView/index.d.ts

@@ -0,0 +1,3 @@
+import { SidebarProps } from '..';
+declare const ListView: (props: Pick<SidebarProps, 'schemas' | 'onSortEnd' | 'onEdit' | 'size' | 'hoveringSchemaId' | 'onChangeHoveringSchemaId' | 'changeSchemas'>) => JSX.Element;
+export default ListView;

package/dist/types/components/Designer/Sidebar/index.d.ts

@@ -1,18 +1,13 @@
 import { SchemaForUI, Size } from '@pdfme/common';
 export declare type SidebarProps = {
-    scale: number;
     height: number;
     hoveringSchemaId: string | null;
     onChangeHoveringSchemaId: (id: string | null) => void;
     size: Size;
     pageSize: Size;
-    activeElement: HTMLElement | null;
-    activeSchema: SchemaForUI;
+    activeElements: HTMLElement[];
     schemas: SchemaForUI[];
-    onSortEnd: ({ oldIndex, newIndex }: {
-        oldIndex: number;
-        newIndex: number;
-    }) => void;
+    onSortEnd: (sortedSchemas: SchemaForUI[]) => void;
     onEdit: (id: string) => void;
     onEditEnd: () => void;
     changeSchemas: (objs: {

package/dist/types/contexts.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const I18nContext: import("react").Context<(key: "type" | "field" | "fieldName" | "require" | "uniq" | "inputExample" | "edit" | "plsSelect" | "plsInputName" | "plsAddNewField" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "addNewField" | "editField" | "previewWarnMsg" | "previewErrMsg" | "goToFirst" | "goToPrevious" | "goToNext" | "goToEnd" | "errorOccurred") => string>;
+export declare const I18nContext: import("react").Context<(key: "type" | "field" | "cancel" | "fieldName" | "require" | "uniq" | "inputExample" | "edit" | "plsSelect" | "plsInputName" | "plsAddNewField" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "addNewField" | "editField" | "goToFirst" | "goToPrevious" | "goToNext" | "goToEnd" | "select" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName") => string>;
 export declare const FontContext: import("react").Context<Record<string, {
     fallback?: boolean | undefined;
     subset?: boolean | undefined;

package/dist/types/helper.d.ts

@@ -3,7 +3,6 @@ export declare const uuid: () => string;
 export declare const set: <T extends object>(obj: T, path: string | string[], value: any) => void;
 export declare const debounce: <T extends Function>(cb: T, wait?: number) => T;
 export declare const round: (number: number, precision: number) => number;
-export declare const arrayMove: <T>(array: T[], from: number, to: number) => T[];
 export declare const cloneDeep: <T>(value: T) => T;
 export declare const flatten: <T>(arr: T[][]) => T[];
 declare const esc = "esc";
@@ -16,6 +15,7 @@ export declare const initShortCuts: (arg: {
     redo: () => void;
     undo: () => void;
     save: () => void;
+    selectAll: () => void;
 }) => void;
 export declare const destroyShortCuts: () => void;
 export declare const readFiles: (files: FileList | null, type: 'text' | 'dataURL' | 'arrayBuffer') => Promise<string | ArrayBuffer>;

package/dist/types/hooks.d.ts

@@ -23,4 +23,5 @@ declare type ScrollPageCursorProps = {
     onChangePageCursor: (page: number) => void;
 };
 export declare const useScrollPageCursor: ({ rootRef, pageSizes, scale, pageCursor, onChangePageCursor, }: ScrollPageCursorProps) => void;
+export declare const useMountStatus: () => boolean;
 export {};

package/dist/types/i18n.d.ts

@@ -1,6 +1,7 @@
 import { Lang } from '@pdfme/common';
 declare type DictEn = typeof dictEn;
 declare const dictEn: {
+    cancel: string;
     field: string;
     fieldName: string;
     require: string;
@@ -17,13 +18,15 @@ declare const dictEn: {
     addNewField: string;
     editField: string;
     type: string;
-    previewWarnMsg: string;
-    previewErrMsg: string;
     goToFirst: string;
     goToPrevious: string;
     goToNext: string;
     goToEnd: string;
+    select: string;
     errorOccurred: string;
+    errorBulkUpdateFieldName: string;
+    commitBulkUpdateFieldName: string;
+    bulkUpdateFieldName: string;
 };
 export declare const curriedI18n: (lang: Lang) => (key: keyof DictEn) => string;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "1.0.0-beta.8",
+  "version": "1.0.0-beta.9",
   "author": "hand-dot",
   "license": "MIT",
   "description": "TypeScript base PDF generator and React base UI. Open source, developed by the community, and completely free to use under the MIT license!",
@@ -29,7 +29,9 @@
     "prune": "ts-prune src"
   },
   "dependencies": {
-    "@pdfme/common": "^1.0.0-beta.8",
+    "@dnd-kit/core": "^5.0.1",
+    "@dnd-kit/sortable": "^6.0.0",
+    "@pdfme/common": "^1.0.0-beta.7",
     "@scena/react-guides": "^0.16.0",
     "hotkeys-js": "^3.8.7",
     "pdfjs-dist": "^2.12.313",
@@ -37,7 +39,6 @@
     "react-dom": "^17.0.2",
     "react-moveable": "^0.30.3",
     "react-selecto": "^1.12.0",
-    "react-sortable-hoc": "^2.0.0",
     "worker-loader": "^3.0.8"
   },
   "devDependencies": {

package/src/assets/icons/align-horizontal-center.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><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>

package/src/assets/icons/align-horizontal-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><path d="M4,22H2V2h2V22z M22,7H6v3h16V7z M16,14H6v3h10V14z"/></svg>

package/src/assets/icons/align-horizontal-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><path d="M20,2h2v20h-2V2z M2,10h16V7H2V10z M8,17h10v-3H8V17z"/></svg>

package/src/assets/icons/align-vertical-bottom.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><path d="M22,22H2v-2h20V22z M10,2H7v16h3V2z M17,8h-3v10h3V8z"/></svg>

package/src/assets/icons/align-vertical-middle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><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>

package/src/assets/icons/align-vertical-top.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><path d="M22,2v2H2V2H22z M7,22h3V6H7V22z M14,16h3V6h-3V16z"/></svg>

package/src/assets/icons/horizontal-distribute.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><path d="M4,22H2V2h2V22z M22,2h-2v20h2V2z M13.5,7h-3v10h3V7z"/></svg>

package/src/assets/icons/vertical-distribute.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><path d="M22,2v2H2V2H22z M7,10.5v3h10v-3H7z M2,20v2h20v-2H2z"/></svg>

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

@@ -121,16 +121,15 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
   }, [initEvents, destroyEvents]);
 
   useEffect(() => {
+    moveable.current?.updateRect();
     if (prevSchemas === null) {
-      moveable.current?.updateRect();
-
       return;
     }
 
-    const prevSchemaKeys = Object.keys(prevSchemas[pageCursor] || {});
-    const schemaKeys = Object.keys(schemasList[pageCursor] || {});
+    const prevSchemaKeys = JSON.stringify(prevSchemas[pageCursor] || {});
+    const schemaKeys = JSON.stringify(schemasList[pageCursor] || {});
 
-    if (prevSchemaKeys.join() === schemaKeys.join()) {
+    if (prevSchemaKeys === schemaKeys) {
       moveable.current?.updateRect();
     }
   }, [pageCursor, schemasList, prevSchemas]);
@@ -239,8 +238,17 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
             removeSchemas(activeElements.map((ae) => ae.id));
           }
         }}
-        onSelect={(e) => {
-          onEdit(e.selected as HTMLElement[]);
+        onSelect={({ added, removed, selected, inputEvent }) => {
+          const isClick = inputEvent.type === 'mousedown';
+          let newActiveElements: HTMLElement[] = isClick ? (selected as HTMLElement[]) : [];
+          if (!isClick && added.length > 0) {
+            newActiveElements = activeElements.concat(added as HTMLElement[]);
+          }
+          if (!isClick && removed.length > 0) {
+            newActiveElements = activeElements.filter((ae) => !removed.includes(ae));
+          }
+
+          onEdit(newActiveElements);
         }}
       />
       <Paper

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

@@ -1,10 +1,13 @@
 import React, { useContext } from 'react';
+import { SchemaForUI } from '@pdfme/common';
 import { readFiles } from '../../../../helper';
 import { I18nContext } from '../../../../contexts';
 import { SidebarProps } from '..';
 import closeIcon from '../../../../assets/icons/close.svg';
 
-const ExampleInputEditor = (props: Pick<SidebarProps, 'changeSchemas' | 'activeSchema'>) => {
+const ExampleInputEditor = (
+  props: Pick<SidebarProps, 'changeSchemas'> & { activeSchema: SchemaForUI }
+) => {
   const { changeSchemas, activeSchema } = props;
   const i18n = useContext(I18nContext);
 

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

@@ -1,13 +1,19 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
+import { SchemaForUI } from '@pdfme/common';
+import { round } from '../../../../helper';
 import { SidebarProps } from '..';
+import alignVerticalTop from '../../../../assets/icons/align-vertical-top.svg';
+import alignVerticalMiddle from '../../../../assets/icons/align-vertical-middle.svg';
+import alignVerticalBottom from '../../../../assets/icons/align-vertical-bottom.svg';
+import alignHorizontalRight from '../../../../assets/icons/align-horizontal-right.svg';
+import alignHorizontalLeft from '../../../../assets/icons/align-horizontal-left.svg';
+import alignHorizontalCenter from '../../../../assets/icons/align-horizontal-center.svg';
+import verticalDistribute from '../../../../assets/icons/vertical-distribute.svg';
+import horizontalDistribute from '../../../../assets/icons/horizontal-distribute.svg';
 
-const inputSetStyle: React.CSSProperties = {
-  marginRight: '1rem',
-  display: 'flex',
-  alignItems: 'center',
-};
+const inputSetStyle: CSSProperties = { marginRight: '1rem', display: 'flex', alignItems: 'center' };
 
-const inputStyle: React.CSSProperties = {
+const inputStyle: CSSProperties = {
   width: 70,
   border: '1px solid #767676',
   borderRadius: 2,
@@ -15,20 +21,104 @@ const inputStyle: React.CSSProperties = {
   background: 'none',
 };
 
+const buttonStyle: CSSProperties = {
+  display: 'flex',
+  background: 'none',
+  alignItems: 'center',
+  borderRadius: 2,
+  border: '1px solid rgb(118, 118, 118)',
+  cursor: 'pointer',
+};
+
 const PositionAndSizeEditor = (
-  props: Pick<SidebarProps, 'pageSize' | 'changeSchemas' | 'activeSchema'>
+  props: Pick<SidebarProps, 'pageSize' | 'schemas' | 'changeSchemas' | 'activeElements'> & {
+    activeSchema: SchemaForUI;
+  }
 ) => {
-  const { changeSchemas, activeSchema, pageSize } = props;
+  const { changeSchemas, schemas, activeSchema, activeElements, pageSize } = props;
+
+  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; action: () => void }[] = [
+    { id: 'left', icon: alignHorizontalLeft, action: () => align('left') },
+    { id: 'center', icon: alignHorizontalCenter, action: () => align('center') },
+    { id: 'right', icon: alignHorizontalRight, action: () => align('right') },
+    { id: 'top', icon: alignVerticalTop, action: () => align('top') },
+    { id: 'middle', icon: alignVerticalMiddle, action: () => align('middle') },
+    { id: 'bottom', icon: alignVerticalBottom, action: () => align('bottom') },
+    { id: 'vertical', icon: verticalDistribute, action: () => distribute('vertical') },
+    { id: 'horizontal', icon: horizontalDistribute, action: () => distribute('horizontal') },
+  ];
 
   return (
     <div>
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-        }}
-      >
+      <div style={{ display: 'flex', alignItems: 'center', marginBottom: '0.5rem' }}>
+        {layoutBtns.map((b) => (
+          <button key={b.id} title={b.id} onClick={b.action} style={buttonStyle}>
+            <img width={15} src={b.icon} />
+          </button>
+        ))}
+      </div>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
         <div style={inputSetStyle}>
           <label style={{ width: 17 }}>X</label>
           <input
@@ -60,14 +150,7 @@ const PositionAndSizeEditor = (
           <span style={{ fontSize: '0.6rem' }}>mm</span>
         </div>
       </div>
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          marginTop: '0.25rem',
-        }}
-      >
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
         <div style={inputSetStyle}>
           <label style={{ width: 17 }}>W</label>
           <input

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

@@ -1,5 +1,6 @@
 import React, { useContext } from 'react';
 import {
+  SchemaForUI,
   getFallbackFontName,
   DEFAULT_FONT_SIZE,
   DEFAULT_LINE_HEIGHT,
@@ -88,7 +89,9 @@ const SelectSet = (props: {
   );
 };
 
-const TextPropEditor = (props: Pick<SidebarProps, 'changeSchemas' | 'activeSchema'>) => {
+const TextPropEditor = (
+  props: Pick<SidebarProps, 'changeSchemas'> & { activeSchema: SchemaForUI }
+) => {
   const { changeSchemas, activeSchema } = props;
   const alignments = ['left', 'center', 'right'];
   const font = useContext(FontContext);

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

@@ -1,5 +1,5 @@
 import React, { useContext, useRef, useCallback } from 'react';
-import { schemaTypes } from '@pdfme/common';
+import { schemaTypes, SchemaForUI } from '@pdfme/common';
 import { SidebarProps } from '..';
 import { I18nContext } from '../../../../contexts';
 
@@ -12,7 +12,7 @@ const ErrorLabel = ({ isError, msg }: { isError: boolean; msg: string }) => (
 );
 
 const TypeAndKeyEditor = (
-  props: Pick<SidebarProps, 'schemas' | 'changeSchemas' | 'activeSchema'>
+  props: Pick<SidebarProps, 'schemas' | 'changeSchemas'> & { activeSchema: SchemaForUI }
 ) => {
   const { changeSchemas, activeSchema, schemas } = props;
   const i18n = useContext(I18nContext);

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

@@ -1,4 +1,5 @@
 import React, { useContext } from 'react';
+import { SchemaForUI } from '@pdfme/common';
 import { I18nContext } from '../../../../contexts';
 import Divider from '../../../Divider';
 import { SidebarProps } from '..';
@@ -8,7 +9,9 @@ import PositionAndSizeEditor from './PositionAndSizeEditor';
 import TypeAndKeyEditor from './TypeAndKeyEditor';
 
 const DetailView = (
-  props: Pick<SidebarProps, 'schemas' | 'pageSize' | 'changeSchemas' | 'activeSchema'>
+  props: Pick<SidebarProps, 'schemas' | 'pageSize' | 'changeSchemas' | 'activeElements'> & {
+    activeSchema: SchemaForUI;
+  }
 ) => {
   const { activeSchema } = props;
   const i18n = useContext(I18nContext);

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

@@ -0,0 +1,113 @@
+import React, { useEffect, useContext } from 'react';
+import { DraggableSyntheticListeners } from '@dnd-kit/core';
+import { I18nContext } from '../../../../contexts';
+import dragIcon from '../../../../assets/icons/drag.svg';
+import warningIcon from '../../../../assets/icons/warning.svg';
+
+interface Props {
+  value: React.ReactNode;
+  style?: React.CSSProperties;
+  status?: 'is-warning' | 'is-danger';
+  title?: string;
+  dragOverlay?: boolean;
+  onClick?: () => void;
+  onMouseEnter?: () => void;
+  onMouseLeave?: () => void;
+  dragging?: boolean;
+  sorting?: boolean;
+  transition?: string;
+  transform?: { x: number; y: number; scaleX: number; scaleY: number } | null;
+  fadeIn?: boolean;
+  listeners?: DraggableSyntheticListeners;
+}
+const Item = React.memo(
+  React.forwardRef<HTMLLIElement, Props>(
+    (
+      {
+        value,
+        status,
+        title,
+        style,
+        dragOverlay,
+        onClick,
+        onMouseEnter,
+        onMouseLeave,
+        dragging,
+        fadeIn,
+        listeners,
+        sorting,
+        transition,
+        transform,
+        ...props
+      },
+      ref
+    ) => {
+      const i18n = useContext(I18nContext);
+
+      useEffect(() => {
+        if (!dragOverlay) {
+          return;
+        }
+
+        document.body.style.cursor = 'grabbing';
+
+        return () => {
+          document.body.style.cursor = '';
+        };
+      }, [dragOverlay]);
+
+      const { x, y, scaleX, scaleY } = transform || { x: 0, y: 0, scaleX: 1, scaleY: 1 };
+
+      return (
+        <li
+          style={{
+            transition,
+            transform: `translate(${x}px, ${y}px) scale(${scaleX}, ${scaleY})`,
+          }}
+          onMouseEnter={onMouseEnter}
+          onMouseLeave={onMouseLeave}
+          ref={ref}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', ...style }} {...props}>
+            <button
+              {...listeners}
+              style={{ padding: '0.5rem', background: 'none', border: 'none', display: 'flex' }}
+            >
+              <img style={{ cursor: 'grab' }} src={dragIcon} width={15} alt="Drag icon" />
+            </button>
+            <div
+              style={{
+                width: '100%',
+                padding: '0.5rem',
+                paddingLeft: 0,
+                cursor: 'pointer',
+                overflow: 'hidden',
+                whiteSpace: 'nowrap',
+                textOverflow: 'ellipsis',
+              }}
+              title={title || ''}
+              onClick={() => onClick && onClick()}
+            >
+              {status === undefined ? (
+                value
+              ) : (
+                <span style={{ display: 'flex', alignItems: 'center' }}>
+                  <img
+                    alt="Warning icon"
+                    src={warningIcon}
+                    width={15}
+                    style={{ marginRight: '0.5rem' }}
+                  />
+                  {status === 'is-warning' ? i18n('noKeyName') : value}
+                  {status === 'is-danger' ? i18n('notUniq') : ''}
+                </span>
+              )}
+            </div>
+          </div>
+        </li>
+      );
+    }
+  )
+);
+
+export default Item;