@servicetitan/dte-pdf-editor 1.5.0 → 1.7.0

package/dist/hooks/usePdfFieldDnD.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePdfFieldDnD.d.ts","sourceRoot":"","sources":["../../src/hooks/usePdfFieldDnD.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAGvD,OAAO,EAGH,eAAe,EACf,QAAQ,EACR,aAAa,EAChB,MAAM,oBAAoB,CAAC;AAQ5B,UAAU,mBAAmB;IACzB,MAAM,EAAE,QAAQ,EAAE,CAAC;IACnB,UAAU,EAAE,aAAa,EAAE,CAAC;IAC5B,cAAc,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IAC7C,aAAa,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACzC,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAED,eAAO,MAAM,cAAc,GAAI,uEAM5B,mBAAmB;mCAGoB,eAAe;;wBAQ1B,SAAS,CAAC,cAAc,CAAC;oBAe7B,SAAS,CAAC,cAAc,CAAC,cAAc,MAAM;CA4DvE,CAAC"}

package/dist/hooks/usePdfFieldDnD.js

@@ -0,0 +1,78 @@
+import { useState } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { FIELD_CONSTANTS, FILLABLE_FIELD_DEFAULT_SIZES } from '../constants';
+import { FieldTypeEnum, } from '../interface/types';
+import { calculateDropCoordinates, generateESignPath, generateFillablePath, isDragOverCanvas, } from '../utils';
+export const usePdfFieldDnD = ({ fields, onFieldsChange, onSelectField, pdfWrapperRef, recipients, }) => {
+    const [draggedFieldOption, setDraggedFieldOption] = useState(null);
+    const handleDragStart = (fieldOption) => {
+        setDraggedFieldOption(fieldOption);
+    };
+    const handleDragEnd = () => {
+        setDraggedFieldOption(null);
+    };
+    const handleDragOver = (e) => {
+        if (!draggedFieldOption) {
+            e.dataTransfer.dropEffect = 'none';
+            return;
+        }
+        if (isDragOverCanvas(e, pdfWrapperRef)) {
+            e.preventDefault();
+            e.stopPropagation();
+            e.dataTransfer.dropEffect = 'copy';
+        }
+        else {
+            e.dataTransfer.dropEffect = 'none';
+        }
+    };
+    const handleDrop = (e, pageNumber) => {
+        var _a, _b;
+        e.preventDefault();
+        e.stopPropagation();
+        if (e.dataTransfer.getData('text/plain') === 'existing-field' || !draggedFieldOption) {
+            return;
+        }
+        const coordinates = calculateDropCoordinates(e, pageNumber, pdfWrapperRef);
+        if (!coordinates) {
+            setDraggedFieldOption(null);
+            return;
+        }
+        const newField = {
+            id: uuidv4(),
+            type: draggedFieldOption.type,
+            subType: draggedFieldOption.subType,
+            x: coordinates.x,
+            y: coordinates.y,
+            page: pageNumber,
+            label: draggedFieldOption.label,
+            width: FIELD_CONSTANTS.defaultWidth,
+            height: FIELD_CONSTANTS.defaultHeight,
+            path: draggedFieldOption.path,
+        };
+        const recipientName = (_b = (_a = recipients[0]) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : '';
+        if (newField.type === FieldTypeEnum.eSign) {
+            newField.recipient = recipientName;
+            newField.path = generateESignPath(recipientName, draggedFieldOption.subType);
+        }
+        if (newField.type === FieldTypeEnum.fillable) {
+            const defaultSize = FILLABLE_FIELD_DEFAULT_SIZES[newField.subType];
+            newField.recipient = recipientName;
+            newField.required = false;
+            newField.path = generateFillablePath(recipientName, uuidv4());
+            if (defaultSize) {
+                newField.width = defaultSize.width;
+                newField.height = defaultSize.height;
+            }
+        }
+        onFieldsChange([...fields, newField]);
+        onSelectField(newField.id);
+        setDraggedFieldOption(null);
+    };
+    return {
+        handleDragStart,
+        handleDragEnd,
+        handleDragOver,
+        handleDrop,
+    };
+};
+//# sourceMappingURL=usePdfFieldDnD.js.map

package/dist/hooks/usePdfFieldDnD.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePdfFieldDnD.js","sourceRoot":"","sources":["../../src/hooks/usePdfFieldDnD.ts"],"names":[],"mappings":"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"}

package/dist/hooks/usePdfFieldSelection.d.ts

@@ -0,0 +1,13 @@
+import { MouseEvent } from 'react';
+import { PdfField } from '../interface/types';
+export declare const usePdfFieldSelection: (fields: PdfField[], onFieldsChange: (fields: PdfField[]) => void) => {
+    selectedField: PdfField | null;
+    selectField: (fieldId: string, e?: MouseEvent) => void;
+    deselectField: () => void;
+    updateField: (updates: Partial<PdfField>) => void;
+    deleteSelectedField: () => void;
+    moveField: (id: string, x: number, y: number, page: number) => void;
+    resizeField: (id: string, width: number, height: number, page: number) => void;
+    setSelectedFieldId: import("react").Dispatch<import("react").SetStateAction<string | null>>;
+};
+//# sourceMappingURL=usePdfFieldSelection.d.ts.map

package/dist/hooks/usePdfFieldSelection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePdfFieldSelection.d.ts","sourceRoot":"","sources":["../../src/hooks/usePdfFieldSelection.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAqB,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE9C,eAAO,MAAM,oBAAoB,GAC7B,QAAQ,QAAQ,EAAE,EAClB,gBAAgB,CAAC,MAAM,EAAE,QAAQ,EAAE,KAAK,IAAI;;2BASd,MAAM,MAAM,UAAU;;2BAOtB,OAAO,CAAC,QAAQ,CAAC;;oBAexB,MAAM,KAAK,MAAM,KAAK,MAAM,QAAQ,MAAM;sBAIxC,MAAM,SAAS,MAAM,UAAU,MAAM,QAAQ,MAAM;;CAc/E,CAAC"}

package/dist/hooks/usePdfFieldSelection.js

@@ -0,0 +1,40 @@
+import { useMemo, useState } from 'react';
+export const usePdfFieldSelection = (fields, onFieldsChange) => {
+    const [selectedFieldId, setSelectedFieldId] = useState(null);
+    const selectedField = useMemo(() => { var _a; return (_a = fields.find(f => f.id === selectedFieldId)) !== null && _a !== void 0 ? _a : null; }, [fields, selectedFieldId]);
+    const selectField = (fieldId, e) => {
+        e === null || e === void 0 ? void 0 : e.stopPropagation();
+        setSelectedFieldId(fieldId);
+    };
+    const deselectField = () => setSelectedFieldId(null);
+    const updateField = (updates) => {
+        if (!selectedFieldId) {
+            return;
+        }
+        onFieldsChange(fields.map(f => (f.id === selectedFieldId ? { ...f, ...updates } : f)));
+    };
+    const deleteSelectedField = () => {
+        if (!selectedFieldId) {
+            return;
+        }
+        onFieldsChange(fields.filter(f => f.id !== selectedFieldId));
+        setSelectedFieldId(null);
+    };
+    const moveField = (id, x, y, page) => {
+        onFieldsChange(fields.map(f => (f.id === id ? { ...f, x, y, page } : f)));
+    };
+    const resizeField = (id, width, height, page) => {
+        onFieldsChange(fields.map(f => (f.id === id ? { ...f, width, height, page } : f)));
+    };
+    return {
+        selectedField,
+        selectField,
+        deselectField,
+        updateField,
+        deleteSelectedField,
+        moveField,
+        resizeField,
+        setSelectedFieldId,
+    };
+};
+//# sourceMappingURL=usePdfFieldSelection.js.map

package/dist/hooks/usePdfFieldSelection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePdfFieldSelection.js","sourceRoot":"","sources":["../../src/hooks/usePdfFieldSelection.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGtD,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAChC,MAAkB,EAClB,cAA4C,EAC9C,EAAE;IACA,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAE5E,MAAM,aAAa,GAAG,OAAO,CACzB,GAAG,EAAE,WAAC,OAAA,MAAA,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,eAAe,CAAC,mCAAI,IAAI,CAAA,EAAA,EACxD,CAAC,MAAM,EAAE,eAAe,CAAC,CAC5B,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,OAAe,EAAE,CAAc,EAAE,EAAE;QACpD,CAAC,aAAD,CAAC,uBAAD,CAAC,CAAE,eAAe,EAAE,CAAC;QACrB,kBAAkB,CAAC,OAAO,CAAC,CAAC;IAChC,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC;IAErD,MAAM,WAAW,GAAG,CAAC,OAA0B,EAAE,EAAE;QAC/C,IAAI,CAAC,eAAe,EAAE,CAAC;YACnB,OAAO;QACX,CAAC;QACD,cAAc,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,eAAe,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC3F,CAAC,CAAC;IAEF,MAAM,mBAAmB,GAAG,GAAG,EAAE;QAC7B,IAAI,CAAC,eAAe,EAAE,CAAC;YACnB,OAAO;QACX,CAAC;QACD,cAAc,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,eAAe,CAAC,CAAC,CAAC;QAC7D,kBAAkB,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,CAAC,EAAU,EAAE,CAAS,EAAE,CAAS,EAAE,IAAY,EAAE,EAAE;QACjE,cAAc,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9E,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,EAAU,EAAE,KAAa,EAAE,MAAc,EAAE,IAAY,EAAE,EAAE;QAC5E,cAAc,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACvF,CAAC,CAAC;IAEF,OAAO;QACH,aAAa;QACb,WAAW;QACX,aAAa;QACb,WAAW;QACX,mBAAmB;QACnB,SAAS;QACT,WAAW;QACX,kBAAkB;KACrB,CAAC;AACN,CAAC,CAAC"}

package/dist/hooks/useToggle.d.ts

@@ -0,0 +1,8 @@
+export interface UseToggleReturn {
+    isOpen: boolean;
+    toggle: () => void;
+    open: () => void;
+    close: () => void;
+}
+export declare const useToggle: (initialValue?: boolean) => UseToggleReturn;
+//# sourceMappingURL=useToggle.d.ts.map

package/dist/hooks/useToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToggle.d.ts","sourceRoot":"","sources":["../../src/hooks/useToggle.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,eAAe;IAC5B,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,SAAS,GAAI,eAAc,OAAe,KAAG,eAgBzD,CAAC"}

package/dist/hooks/useToggle.js

@@ -0,0 +1,15 @@
+import { useCallback, useState } from 'react';
+export const useToggle = (initialValue = false) => {
+    const [isOpen, setIsOpen] = useState(initialValue);
+    const toggle = useCallback(() => {
+        setIsOpen(v => !v);
+    }, []);
+    const open = useCallback(() => {
+        setIsOpen(true);
+    }, []);
+    const close = useCallback(() => {
+        setIsOpen(false);
+    }, []);
+    return { isOpen, toggle, open, close };
+};
+//# sourceMappingURL=useToggle.js.map

package/dist/hooks/useToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToggle.js","sourceRoot":"","sources":["../../src/hooks/useToggle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAS9C,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,eAAwB,KAAK,EAAmB,EAAE;IACxE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAU,YAAY,CAAC,CAAC;IAE5D,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;QAC5B,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IACvB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,IAAI,GAAG,WAAW,CAAC,GAAG,EAAE;QAC1B,SAAS,CAAC,IAAI,CAAC,CAAC;IACpB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE;QAC3B,SAAS,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;AAC3C,CAAC,CAAC"}

package/dist/interface/types.d.ts

@@ -9,7 +9,7 @@ export declare enum ESignFieldType {
     dateSigned = "dateSigned",
     fullName = "fullName"
 }
-export type FillableFieldType = 'text' | 'date' | 'checkbox' | 'radio';
+export type FillableFieldType = 'text' | 'date' | 'checkbox' | 'radio' | 'number';
 export interface PdfField {
     id: string;
     type: FieldTypeEnum;
@@ -23,6 +23,7 @@ export interface PdfField {
     required?: boolean;
     path?: string;
     recipient?: string;
+    description?: string;
 }
 export interface FieldTypeOption {
     label: string;

package/dist/interface/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/interface/types.ts"],"names":[],"mappings":"AAAA,oBAAY,aAAa;IACrB,SAAS,cAAc;IACvB,KAAK,UAAU;IACf,QAAQ,aAAa;CACxB;AAED,oBAAY,cAAc;IACtB,SAAS,cAAc;IACvB,QAAQ,aAAa;IACrB,UAAU,eAAe;IACzB,QAAQ,aAAa;CACxB;AAED,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,CAAC;AAEvE,MAAM,WAAW,QAAQ;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,aAAa,CAAC;IACpB,OAAO,CAAC,EAAE,iBAAiB,GAAG,cAAc,CAAC;IAC7C,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,eAAe;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,aAAa,CAAC;IACpB,OAAO,CAAC,EAAE,iBAAiB,GAAG,cAAc,CAAC;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAChC,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,eAAe,EAAE,CAAC;CAC7B;AAED,MAAM,WAAW,sBAAsB;IACnC,WAAW,CAAC,EAAE,GAAG,CAAC;IAClB,WAAW,CAAC,EAAE,GAAG,CAAC;IAClB,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,UAAU,eAAe;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,sBAAsB,CAAC;CACpC;AAED,MAAM,WAAW,YAAa,SAAQ,eAAe;IACjD,IAAI,EAAE,QAAQ,CAAC;IACf,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;CAC1C;AAED,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG,WAAW,GAAG,YAAY,CAAC;AAEnE,MAAM,WAAW,WAAY,SAAQ,eAAe;IAChD,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,UAAU,CAAC;CACrB;AACD,MAAM,MAAM,wBAAwB,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAE5E,MAAM,WAAW,kBAAmB,SAAQ,eAAe;IACvD,IAAI,EAAE,QAAQ,CAAC;IACf,OAAO,CAAC,EAAE,wBAAwB,CAAC;CACtC;AAED,MAAM,MAAM,YAAY,GAAG,kBAAkB,CAAC;AAE9C,MAAM,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAElD,MAAM,WAAW,aAAa;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;CACvB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/interface/types.ts"],"names":[],"mappings":"AAAA,oBAAY,aAAa;IACrB,SAAS,cAAc;IACvB,KAAK,UAAU;IACf,QAAQ,aAAa;CACxB;AAED,oBAAY,cAAc;IACtB,SAAS,cAAc;IACvB,QAAQ,aAAa;IACrB,UAAU,eAAe;IACzB,QAAQ,aAAa;CACxB;AAED,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAC;AAElF,MAAM,WAAW,QAAQ;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,aAAa,CAAC;IACpB,OAAO,CAAC,EAAE,iBAAiB,GAAG,cAAc,CAAC;IAC7C,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,eAAe;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,aAAa,CAAC;IACpB,OAAO,CAAC,EAAE,iBAAiB,GAAG,cAAc,CAAC;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAChC,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,eAAe,EAAE,CAAC;CAC7B;AAED,MAAM,WAAW,sBAAsB;IACnC,WAAW,CAAC,EAAE,GAAG,CAAC;IAClB,WAAW,CAAC,EAAE,GAAG,CAAC;IAClB,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,UAAU,eAAe;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,sBAAsB,CAAC;CACpC;AAED,MAAM,WAAW,YAAa,SAAQ,eAAe;IACjD,IAAI,EAAE,QAAQ,CAAC;IACf,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;CAC1C;AAED,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG,WAAW,GAAG,YAAY,CAAC;AAEnE,MAAM,WAAW,WAAY,SAAQ,eAAe;IAChD,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,UAAU,CAAC;CACrB;AACD,MAAM,MAAM,wBAAwB,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAE5E,MAAM,WAAW,kBAAmB,SAAQ,eAAe;IACvD,IAAI,EAAE,QAAQ,CAAC;IACf,OAAO,CAAC,EAAE,wBAAwB,CAAC;CACtC;AAED,MAAM,MAAM,YAAY,GAAG,kBAAkB,CAAC;AAE9C,MAAM,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAElD,MAAM,WAAW,aAAa;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;CACvB"}

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@servicetitan/dte-pdf-editor",
-  "version": "1.5.0",
+  "version": "1.7.0",
   "description": "",
   "main": "./dist/index.js",
   "typings": "./dist/index.d.ts",
   "files": [
     "dist",
-    "src"
+    "src",
+    "webpack.config.js"
   ],
   "publishConfig": {
     "access": "public",

package/src/components/field-config-panel/field-config-panel.tsx

@@ -1,4 +1,4 @@
-import { Button, Checkbox, Combobox, Flex, TextField } from '@servicetitan/anvil2';
+import { Button, Checkbox, Combobox, Flex, Textarea, TextField } from '@servicetitan/anvil2';
 import { FC, useMemo } from 'react';
 import { E_SIGN_FIELD_TYPE_OPTIONS } from '../../constants';
 import { ESignFieldType, FieldTypeEnum, PdfField, RecipientInfo } from '../../interface/types';
@@ -129,6 +129,16 @@ export const FieldConfigPanel: FC<FieldConfigPanelProps> = ({
                 />
             )}
 
+            <Textarea
+                label="Description"
+                value={field.description}
+                onChange={e =>
+                    onFieldConfigChange({
+                        description: e?.target.value ?? '',
+                    })
+                }
+            />
+
             <Button className="full-width" onClick={onDeleteField}>
                 Delete Field
             </Button>

package/src/components/field-sidebar/data-model-field-type-list.tsx

@@ -34,7 +34,7 @@ export const DataModelFieldTypeList: FC<DataModelFieldTypeListProps> = ({
     return (
         <Fragment>
             {searchedFieldGroups.map(group => (
-                <div key={group.groupName} className="dte-field-type-group m-t-1">
+                <div key={group.groupName} className="dte-field-type-group">
                     <Flex alignItems="center" gap={1} className="dte-field-type-group-header">
                         <Text variant="headline" el="h6" size="small">
                             {group.groupName}

package/src/components/field-sidebar/field-sidebar.tsx

@@ -1,9 +1,11 @@
-import { Flex, Icon, SearchField, Text } from '@servicetitan/anvil2';
+import { Button, Flex, Icon, SearchField, Text } from '@servicetitan/anvil2';
 import IconBorderColor from '@servicetitan/anvil2/assets/icons/material/round/border_color.svg';
+import IconMenuOpen from '@servicetitan/anvil2/assets/icons/material/round/menu_open.svg';
 import IconPhotoSizeSelectSmall from '@servicetitan/anvil2/assets/icons/material/round/photo_size_select_small.svg';
 import IconEstimate from '@servicetitan/anvil2/assets/icons/st/estimate.svg';
 
 import { FC, useState } from 'react';
+import { useToggle } from '../../hooks';
 import { DataModelFieldGroup, FieldTypeEnum, FieldTypeOption } from '../../interface/types';
 import { DataModelFieldTypeList } from './data-model-field-type-list';
 import { ESignFieldTypeList } from './e-sign-field-type-list';
@@ -32,6 +34,12 @@ export const FieldSidebar: FC<FieldSidebarProps> = ({
 }) => {
     const [activeFieldType, setActiveFieldType] = useState<FieldTypeEnum>(FieldTypeEnum.dataModel);
     const [searchText, setSearchText] = useState('');
+    const { isOpen, open, toggle } = useToggle(true);
+
+    const handleActiveFieldTypeChange = (activeFieldType: FieldTypeEnum) => {
+        setActiveFieldType(activeFieldType);
+        open();
+    };
 
     return (
         <Flex className="dte-field-sidebar-container skeleton-item">
@@ -42,10 +50,14 @@ export const FieldSidebar: FC<FieldSidebarProps> = ({
                         alignItems="center"
                         justifyContent="center"
                         direction="column"
-                        className="dte-field-sidebar-menu-item cursor-pointer"
-                        onClick={() => setActiveFieldType(key)}
+                        className={`dte-field-sidebar-menu-item cursor-pointer ${key === activeFieldType ? '--active' : ''}`}
+                        onClick={() => handleActiveFieldTypeChange(key)}
                     >
-                        <Icon svg={svgIcon} size="large" />
+                        <Icon
+                            svg={svgIcon}
+                            size="large"
+                            className="dte-field-sidebar-menu-item-icon"
+                        />
                         <Text
                             variant="body"
                             size="small"
@@ -56,38 +68,52 @@ export const FieldSidebar: FC<FieldSidebarProps> = ({
                     </Flex>
                 ))}
             </Flex>
-            <Flex className="dte-field-sidebar-content skeleton-item" shrink={0}>
-                <Text variant="headline" el="h1" size="medium">
-                    Merge Tags
-                </Text>
 
-                {activeFieldType !== FieldTypeEnum.eSign && (
-                    <SearchField
-                        placeholder="Search"
-                        size="small"
-                        className="dte-field-sidebar-search"
-                        onChange={e => setSearchText(e.target.value ?? '')}
-                    />
-                )}
-                {activeFieldType === FieldTypeEnum.fillable && (
-                    <FillableFieldTypeList
-                        searchText={searchText}
-                        onDragStart={onDragStart}
-                        onDragEnd={onDragEnd}
-                    />
-                )}
-                {activeFieldType === FieldTypeEnum.eSign && (
-                    <ESignFieldTypeList onDragEnd={onDragEnd} onDragStart={onDragStart} />
-                )}
-                {activeFieldType === FieldTypeEnum.dataModel && (
-                    <DataModelFieldTypeList
-                        searchText={searchText}
-                        dataModelGroups={dataModelGroups}
-                        onDragStart={onDragStart}
-                        onDragEnd={onDragEnd}
-                    />
-                )}
+            <Flex
+                className={`dte-field-sidebar-content skeleton-item ${isOpen ? '--open' : ''}`}
+                shrink={0}
+            >
+                <Flex className="dte-field-sidebar-content-inner">
+                    <Text variant="headline" el="h1" size="medium">
+                        Merge Tags
+                    </Text>
+
+                    {activeFieldType !== FieldTypeEnum.eSign && (
+                        <SearchField
+                            placeholder="Search"
+                            size="small"
+                            className="dte-field-sidebar-search"
+                            onChange={e => setSearchText(e.target.value ?? '')}
+                        />
+                    )}
+                    {activeFieldType === FieldTypeEnum.fillable && (
+                        <FillableFieldTypeList
+                            searchText={searchText}
+                            onDragStart={onDragStart}
+                            onDragEnd={onDragEnd}
+                        />
+                    )}
+                    {activeFieldType === FieldTypeEnum.eSign && (
+                        <ESignFieldTypeList onDragEnd={onDragEnd} onDragStart={onDragStart} />
+                    )}
+                    {activeFieldType === FieldTypeEnum.dataModel && (
+                        <DataModelFieldTypeList
+                            searchText={searchText}
+                            dataModelGroups={dataModelGroups}
+                            onDragStart={onDragStart}
+                            onDragEnd={onDragEnd}
+                        />
+                    )}
+                </Flex>
             </Flex>
+            <Button
+                size="small"
+                appearance="ghost"
+                onClick={toggle}
+                className="dte-field-sidebar-toggler"
+            >
+                <Icon svg={IconMenuOpen} size="medium" />
+            </Button>
         </Flex>
     );
 };

package/src/components/field-sidebar/field-type.tsx

@@ -19,7 +19,7 @@ export const FieldType: FC<FieldTypeProps> = ({ label, onDragEnd, onDragStart })
                 e.dataTransfer.setData('text/plain', 'new-field-type');
             }}
             onDragEnd={onDragEnd}
-            className="dte-field-type-item border m-t-1"
+            className="dte-field-type-item"
         >
             <Icon svg={IconDragIndicator} size="medium" />
             <Text size="small">{label}</Text>

package/src/components/pdf-canvas/pdf-canvas.tsx

@@ -55,7 +55,7 @@ export const PdfCanvas: FC<PdfCanvasProps> = ({
             className="dte-pdf-canvas-container"
             onClick={onDeselectField}
         >
-            <div ref={pdfWrapperRef} className="dte-pdf-wrapper">
+            <div ref={pdfWrapperRef} className="dte-pdf-wrapper" style={{ width: BASE_PAGE_WIDTH }}>
                 <PdfDocumentRenderer
                     pdfUrl={pdfUrl}
                     onDrop={onDrop}