@servicetitan/dte-pdf-editor 1.92.3 → 1.93.0

package/src/components/pdf-fields-overlay/pdf-overlay-field-fillable.tsx

@@ -2,9 +2,12 @@ import { FC, Fragment } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import { type PdfField } from '../../interface/types';
 import {
+    getDropdownFieldItems,
     getFieldPlaceholderText,
     getFieldTextClipClassName,
     getFillablePaintedLabel,
+    getTodayDateInputValue,
+    isRadioDefaultSelected,
 } from '../../utils';
 import { AddHandle } from './add-handle';
 
@@ -13,6 +16,15 @@ interface PdfOverlayFieldFillableProps {
     handleAddNewField(field: PdfField): void;
 }
 
+/**
+ * Every case below previews `field.default` through an uncontrolled, read-only DOM element
+ * (`defaultValue`/`defaultChecked`, never `value`/`checked` - there's no data model to bind to
+ * here, this is a static authoring mock-up). React only applies `defaultValue`/`defaultChecked`
+ * once, at mount, and silently ignores it on every later re-render - so each element carries a
+ * `key` derived from the same default it previews, forcing React to remount (not patch) it
+ * whenever the author changes that default in the config panel, so it doesn't keep showing the
+ * value it had when it first mounted.
+ */
 export const PdfOverlayFieldFillable: FC<PdfOverlayFieldFillableProps> = ({
     field,
     handleAddNewField,
@@ -33,9 +45,13 @@ export const PdfOverlayFieldFillable: FC<PdfOverlayFieldFillableProps> = ({
                     }}
                 >
                     <input
+                        key={String(field.default?.type === 'checkbox' && field.default.value)}
                         title={field.label}
                         type="checkbox"
                         readOnly
+                        defaultChecked={
+                            field.default?.type === 'checkbox' ? field.default.value : false
+                        }
                         className="dte-pdf-field-fillable"
                         style={{
                             width: field.width,
@@ -62,15 +78,18 @@ export const PdfOverlayFieldFillable: FC<PdfOverlayFieldFillableProps> = ({
                         }}
                     >
                         <input
+                            key={String(isRadioDefaultSelected(field))}
                             title={field.label}
                             type="radio"
                             readOnly
+                            defaultChecked={isRadioDefaultSelected(field)}
                             className="dte-pdf-field-fillable"
                             style={{
                                 width: field.width,
                                 height: field.height,
                                 margin: 0,
                                 border: 'none',
+                                pointerEvents: 'none',
                             }}
                         />
                         {getFillablePaintedLabel(field)}
@@ -79,6 +98,8 @@ export const PdfOverlayFieldFillable: FC<PdfOverlayFieldFillableProps> = ({
                         onClick={() =>
                             handleAddNewField({
                                 ...field,
+                                default: undefined,
+                                label: `${field.label} Copy`,
                                 x: field.x + field.width + 15,
                                 id: uuidv4(),
                             })
@@ -87,31 +108,70 @@ export const PdfOverlayFieldFillable: FC<PdfOverlayFieldFillableProps> = ({
                 </Fragment>
             );
 
-        case 'date':
+        case 'date': {
+            const defaultDateValue =
+                field.default?.type === 'date'
+                    ? field.default.value
+                    : field.default?.type === 'today'
+                      ? getTodayDateInputValue()
+                      : '';
             return (
                 <input
+                    key={defaultDateValue}
                     type="date"
                     readOnly
+                    defaultValue={defaultDateValue}
                     className={`dte-pdf-field-fillable ${clipClassName}`}
                     placeholder={placeholderText}
                 />
             );
+        }
 
-        case 'number':
+        case 'number': {
+            const defaultNumberValue = field.default?.type === 'number' ? field.default.value : '';
             return (
                 <input
+                    key={defaultNumberValue}
                     type="number"
                     readOnly
+                    defaultValue={defaultNumberValue}
                     className={`dte-pdf-field-fillable ${clipClassName}`}
                     placeholder={placeholderText}
                 />
             );
+        }
+
+        case 'dropdown': {
+            const defaultDropdownValue =
+                field.default?.type === 'dropdown' ? field.default.value : '';
+            return (
+                <select
+                    key={defaultDropdownValue}
+                    defaultValue={defaultDropdownValue}
+                    tabIndex={-1}
+                    className="dte-pdf-field-fillable"
+                    style={{ color: 'inherit', pointerEvents: 'none' }}
+                >
+                    <option value="" disabled hidden>
+                        {placeholderText || 'Select...'}
+                    </option>
+                    {getDropdownFieldItems(field).map(item => (
+                        <option key={item.value} value={item.value}>
+                            {item.label}
+                        </option>
+                    ))}
+                </select>
+            );
+        }
 
-        default:
+        default: {
+            const defaultTextValue = field.default?.type === 'text' ? field.default.value : '';
             if (field.multiline) {
                 return (
                     <textarea
+                        key={defaultTextValue}
                         readOnly
+                        defaultValue={defaultTextValue}
                         style={{ font: 'inherit', lineHeight: 'inherit', outline: 'none' }}
                         placeholder={placeholderText}
                         className={`dte-pdf-field-fillable ${clipClassName}`}
@@ -120,11 +180,14 @@ export const PdfOverlayFieldFillable: FC<PdfOverlayFieldFillableProps> = ({
             }
             return (
                 <input
+                    key={defaultTextValue}
                     type="text"
                     readOnly
+                    defaultValue={defaultTextValue}
                     placeholder={placeholderText}
                     className={`dte-pdf-field-fillable ${clipClassName}`}
                 />
             );
+        }
     }
 };

package/src/components/pdf-fields-overlay/pdf-overlay-field.tsx

@@ -4,8 +4,8 @@ import { DISABLE_FIELD_RESIZE } from '../../constants';
 import { useFieldDrag, useFieldResize } from '../../hooks';
 import { FieldTypeEnum, type PdfField } from '../../interface/types';
 import {
-    getFieldBackgroundColor,
     getFieldBoundsStyle,
+    getFieldColor,
     getFieldTypeOption,
     getPagePosition,
 } from '../../utils';
@@ -74,13 +74,13 @@ export const PdfOverlayField: FC<PdfOverlayFieldProps> = ({
         { ...field, page, x, y },
         {
             pageOffset: pagePos,
-            backgroundColor: getFieldBackgroundColor(field.recipient, recipientsColors),
+            color: getFieldColor(field.recipient, recipientsColors),
             zoom,
         },
     );
 
     const className = [
-        'dte-pdf-field-editor',
+        'dte-pdf-field-container',
         `${field.type}-${field.subType}`,
         fieldWrapperClassNames,
         isSelected ? '--selected' : '--unselected',
@@ -103,6 +103,8 @@ export const PdfOverlayField: FC<PdfOverlayFieldProps> = ({
             onDragEnd={handleDragEnd}
             className={className}
             style={style}
+            data-path={field.path}
+            data-id={field.id}
         >
             {fieldTypeOption && (
                 <div className="dte-pdf-field-label">
@@ -110,6 +112,7 @@ export const PdfOverlayField: FC<PdfOverlayFieldProps> = ({
                         <Icon svg={fieldTypeOption.icon} size="small" color="inherit" />
                     )}
                     {fieldTypeOption.label}
+                    {!field.required && <span>(Optional)</span>}
                 </div>
             )}
             {field.type === FieldTypeEnum.calculated && (

package/src/components/pdf-view/pdf-view-field-container.tsx

@@ -1,10 +1,10 @@
 import { Icon } from '@servicetitan/anvil2';
-import { FC, Fragment, PropsWithChildren, RefObject } from 'react';
+import { FC, PropsWithChildren, RefObject } from 'react';
 import { type DataModelValues, type PdfField } from '../../interface/types';
 import {
     evaluateDisplayCondition,
-    getFieldBackgroundColor,
     getFieldBoundsStyle,
+    getFieldColor,
     getFieldTypeOption,
     getPagePosition,
 } from '../../utils';
@@ -37,54 +37,34 @@ export const PdfViewFieldContainer: FC<PropsWithChildren<PdfViewFieldContainer>>
     }
 
     const pagePos = getPagePosition(field.page, pdfWrapperRef);
-    const bgColor = getFieldBackgroundColor(field.recipient, recipientsColors);
+    const color = getFieldColor(field.recipient, recipientsColors);
     const fieldTypeOption = getFieldTypeOption(field);
 
     return (
-        <Fragment>
-            <div
-                id={`dte-pdf-field-${field.id}`}
-                className={`dte-pdf-field-view --${field.type}`}
-                tabIndex={-1}
-                style={getFieldBoundsStyle(field, {
-                    pageOffset: pagePos,
-                    backgroundColor: bgColor,
-                    borderColor: error ? 'red' : bgColor.replace('1f', '7d'),
-                    zoom,
-                })}
-                onFocus={() => onFocus?.(field.id)}
-            >
-                {children}
-            </div>
+        <div
+            id={`dte-pdf-field-${field.id}`}
+            data-path={field.path}
+            data-id={field.id}
+            className={`dte-pdf-field-container --view --${field.type} ${error && '--error'}`}
+            tabIndex={-1}
+            style={getFieldBoundsStyle(field, {
+                pageOffset: pagePos,
+                color,
+                zoom,
+            })}
+            onFocus={() => onFocus?.(field.id)}
+        >
             {fieldTypeOption && (
-                <div
-                    className="dte-pdf-field-label"
-                    style={{
-                        top: pagePos.top + field.y * zoom - 10,
-                        left: pagePos.left + field.x * zoom + 3,
-                        position: 'absolute',
-                    }}
-                >
+                <div className="dte-pdf-field-label">
                     {fieldTypeOption.icon && (
                         <Icon svg={fieldTypeOption.icon} size="small" color="inherit" />
                     )}
                     {fieldTypeOption.label}
+                    {!field.required && <span>(Optional)</span>}
                 </div>
             )}
-            {error && (
-                <span
-                    style={{
-                        color: 'red',
-                        top: pagePos.top + (field.y + field.height) * zoom + 8,
-                        left: pagePos.left + field.x * zoom,
-                        minWidth: '100px',
-                        fontSize: '10px',
-                        position: 'absolute',
-                    }}
-                >
-                    {error}
-                </span>
-            )}
-        </Fragment>
+            <div style={{ width: 'inherit', height: 'inherit' }}>{children}</div>
+            {error && <span className="dte-pdf-field-error-message">{error}</span>}
+        </div>
     );
 };

package/src/components/pdf-view/pdf-view-fillable.tsx

@@ -7,6 +7,7 @@ import {
 } from '../../interface/types';
 import {
     dateToUtcZero,
+    getDropdownFieldItems,
     getFieldPlaceholderText,
     getFieldTextClipClassName,
     getFillablePaintedLabel,
@@ -36,6 +37,7 @@ const fillableTextStyles = {
     height: '100%',
     border: 'none',
     fontSize: 'inherit',
+    color: 'inherit',
     boxSizing: 'border-box' as const,
     padding: 0,
     margin: 0,
@@ -96,8 +98,7 @@ export const PdfViewFillable: FC<PdfViewFillableProps> = ({
 }) => {
     const resolvedValue = data?.[field.path!];
     const isViewByCurrentRecipient = fillingBy?.includes(field.recipient!);
-    const isFillable =
-        viewMode === 'preview' ? true : viewMode === 'fill' ? false : isViewByCurrentRecipient;
+    const isFillable = viewMode === 'preview' ? true : isViewByCurrentRecipient;
 
     const isInputDisabled = !isFillable || !!readOnly;
 
@@ -208,6 +209,28 @@ export const PdfViewFillable: FC<PdfViewFillableProps> = ({
         );
     }
 
+    if (field.subType === 'dropdown') {
+        return (
+            <select
+                style={fillableTextStyles}
+                disabled={isInputDisabled}
+                id={field.path}
+                name={field.path}
+                value={resolvedValue ?? ''}
+                onChange={e => handleDataChange(e.target.value)}
+            >
+                <option value="" disabled hidden>
+                    {getFieldPlaceholderText(field) || 'Select...'}
+                </option>
+                {getDropdownFieldItems(field).map(item => (
+                    <option key={item.value} value={item.value}>
+                        {item.label}
+                    </option>
+                ))}
+            </select>
+        );
+    }
+
     const TextComponent = field.multiline ? FillableTextareaInput : FillableTextInput;
     return (
         <TextComponent

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

@@ -144,7 +144,16 @@ export const PdfView: FC<PdfViewProps> = ({
     useLayoutEffect(() => {
         const field = navigableFields[currentFieldIndex];
         const navControlsEl = navControlsRef.current;
-        if (!field || !navControlsEl) {
+
+        if (!navControlsEl) {
+            return;
+        }
+
+        if (currentFieldIndex === -1) {
+            navControlsEl.style.top = `20px`;
+            return;
+        }
+        if (!field) {
             return;
         }
 
@@ -152,7 +161,6 @@ export const PdfView: FC<PdfViewProps> = ({
         if (!fieldEl) {
             return;
         }
-
         const containerTop = contentContainerRef.current?.getBoundingClientRect().top ?? 0;
         navControlsEl.style.top = `${fieldEl.getBoundingClientRect().top - containerTop}px`;
     }, [currentFieldIndex, navigableFields]);
@@ -247,7 +255,7 @@ export const PdfView: FC<PdfViewProps> = ({
                                     key={field.id}
                                     field={field}
                                     data={viewMode === 'preview' ? previewData : data}
-                                    error={errors[field.path!] || ''}
+                                    error={errors[field.path!] || errors[field.id] || ''}
                                     recipientsColors={recipientsColors}
                                     pdfWrapperRef={pdfWrapperRef}
                                     zoom={zoom}

package/src/constants/field.constants.ts

@@ -1,5 +1,6 @@
 import NumbersIcon from '@servicetitan/anvil2/assets/icons/material/round/123.svg';
 import AbcIcon from '@servicetitan/anvil2/assets/icons/material/round/abc.svg';
+import ArrowDropDownCircleIcon from '@servicetitan/anvil2/assets/icons/material/round/arrow_drop_down_circle.svg';
 import BadgeIcon from '@servicetitan/anvil2/assets/icons/material/round/badge.svg';
 import CalculateIcon from '@servicetitan/anvil2/assets/icons/material/round/calculate.svg';
 import CalendarMonthIcon from '@servicetitan/anvil2/assets/icons/material/round/calendar_month.svg';
@@ -46,10 +47,13 @@ export const FIELD_FONT_SIZE_OPTIONS = Array.from({ length: 17 }, (_, index) =>
 export const FILLABLE_FIELD_DEFAULT_SIZES = {
     text: { width: 200, height: 25 },
     date: { width: 200, height: 25 },
+    dropdown: { width: 200, height: 25 },
     radio: { width: 20, height: 20 },
     checkbox: { width: 20, height: 20 },
 } as Record<PdfFieldSubType, { width: number; height: number }>;
 
+export const DROPDOWN_FIELD_MAX_ITEMS = 50;
+
 export const GENERIC_FIELD_TABLE_ROW_HEIGHT = 40;
 
 export const GENERIC_FIELD_DEFAULT_SIZES = {
@@ -63,6 +67,12 @@ export const FILLABLE_FIELD_TYPES: FieldTypeOption[] = [
     { label: 'Date Field', type: FieldTypeEnum.fillable, subType: 'date', icon: CalendarMonthIcon },
     { label: 'Checkbox', type: FieldTypeEnum.fillable, subType: 'checkbox', icon: CheckboxIcon },
     { label: 'Radio', type: FieldTypeEnum.fillable, subType: 'radio', icon: RadioIcon },
+    {
+        label: 'Dropdown',
+        type: FieldTypeEnum.fillable,
+        subType: 'dropdown',
+        icon: ArrowDropDownCircleIcon,
+    },
 ];
 
 export const E_SIGN_FIELD_TYPES: FieldTypeOption[] = [

package/src/hooks/usePdfFieldDnD.ts

@@ -61,12 +61,18 @@ const initializeDroppedFieldByType: Record<FieldTypeEnum, InitializeDroppedField
             ...base,
             recipient: recipientName,
             required: false,
+            hideLabel: base.subType === 'radio' || base.subType === 'checkbox',
             path: generateFillablePath(recipientName, uuidv4()),
             ...(base.subType === 'radio'
                 ? {
                       groupName: `Radio Group ${uuidv4()}`,
                   }
                 : {}),
+            ...(base.subType === 'dropdown'
+                ? {
+                      dropdownItems: [{ value: '', label: '' }],
+                  }
+                : {}),
             ...(defaultSize && {
                 width: defaultSize.width,
                 height: defaultSize.height,

package/src/hooks/usePdfFieldSelection.ts

@@ -28,9 +28,15 @@ export const usePdfFieldSelection = (
 
     const updateMatchingFields = (
         predicate: (field: PdfField) => boolean,
-        updates: Partial<PdfField>,
+        updates: Partial<PdfField> | ((field: PdfField) => Partial<PdfField>),
     ) => {
-        onFieldsChange(fields.map(f => (predicate(f) ? { ...f, ...updates } : f)));
+        onFieldsChange(
+            fields.map(f =>
+                predicate(f)
+                    ? { ...f, ...(typeof updates === 'function' ? updates(f) : updates) }
+                    : f,
+            ),
+        );
     };
 
     const deleteSelectedField = () => {

package/src/index.ts

@@ -1,3 +1,4 @@
 export * from './interface/types';
+export * from './utils/exposes-utils';
 export * from './interface/host-events';
 export * from './components';

package/src/interface/types.ts

@@ -17,7 +17,7 @@ export enum ESignFieldType {
     fullName = 'fullName',
 }
 
-export type FillableFieldType = 'text' | 'date' | 'checkbox' | 'radio' | 'number';
+export type FillableFieldType = 'text' | 'date' | 'checkbox' | 'radio' | 'number' | 'dropdown';
 
 export type GenericFieldType = 'table' | 'text';
 export type FormFieldType = 'number' | 'text' | 'date';
@@ -88,6 +88,11 @@ export interface ESignDateSignedOffsetSettings {
         | [...ESignDateSignedOffsetSettingsRule[], ESignDateSignedOffsetSettingsFinalRule];
 }
 
+export interface FillableDropdownItem {
+    value: string;
+    label: string;
+}
+
 export type FieldDataType =
     | GenericFieldTableDataType
     | GenericFieldTextDataType
@@ -125,6 +130,33 @@ export interface PdfFieldStyles {
     fontWeight?: 'normal' | 'bold';
 }
 
+/**
+ * Optional author-configured starting value for a fillable field. The `text`/`number`/`checkbox`/
+ * `date`/`today`/`radio` variants mirror the backend's `FillableDefault` discriminated union
+ * (`ByodField.Default`, DTE-4668) one-for-one: same `type` discriminator and `value` shape, so the
+ * JSON round-trips as-is with no FE-side translation.
+ *
+ * `today` and `radio` intentionally carry no `value` - `today` is a sentinel the client resolves
+ * to a calendar date in its own local timezone at render time (never frozen at author time), and
+ * `radio` just marks *this* option field as the group's pre-selected default (the "value" is which
+ * option, i.e. which sibling field carries the flag - there is nothing else to store).
+ *
+ * `dropdown` has no backend counterpart at all (the backend doesn't recognize a `dropdown`
+ * fillable subtype - see `FillableFieldSubTypes`) and is an FE-only extension of this same union:
+ * `value` is one of this field's own `dropdownItems[].value` entries. Unlike `radio`, a dropdown's
+ * options all live on this one field (`dropdownItems`), not on sibling fields, so - same as
+ * text/number/checkbox/date - there is exactly one field to attach the default to, and the value
+ * it points at is meaningful to store here directly.
+ */
+export type FillableDefault =
+    | { type: 'text'; value: string }
+    | { type: 'number'; value: number }
+    | { type: 'checkbox'; value: boolean }
+    | { type: 'date'; value: string }
+    | { type: 'today' }
+    | { type: 'radio' }
+    | { type: 'dropdown'; value: string };
+
 export interface PdfField {
     id: string;
     type: FieldTypeEnum;
@@ -154,6 +186,9 @@ export interface PdfField {
      */
     hideLabel?: boolean;
     styles?: PdfFieldStyles;
+    default?: FillableDefault;
+    /** Manually-authored options for a fillable `dropdown` field. See `FillableDropdownItem`. */
+    dropdownItems?: FillableDropdownItem[];
 }
 
 export type SchemaFieldType = 'number' | 'date';

package/src/styles/index.css

@@ -11,3 +11,4 @@
 @import './pdf-document-renderer.css';
 @import './inline-editable.css';
 @import './field-config-panel.css';
+@import './pdf-field.css';

package/src/styles/inline-editable.css

@@ -13,6 +13,8 @@
     width: 100%;
     height: inherit;
     cursor: pointer;
+    outline: none;
+    overflow: hidden;
 }
 
 .inline-editable-html-text {

package/src/styles/pdf-canvas.css

@@ -87,8 +87,9 @@
 }
 
 .dte-pdf-movable-next-button-wrapper {
-    top: 50px;
+    top: 2px;
     transform: translateX(-100%);
+    transition: top 0.3s ease;
     position: absolute;
     z-index: 2;
 }