@servicetitan/dte-pdf-editor 1.94.0 → 1.96.0

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

@@ -1,8 +1,15 @@
 import { FC, useMemo } from 'react';
-import { type DataModelValues, type PdfField, type PdfViewMode } from '../../interface/types';
+import {
+    type BusinessCalendar,
+    type DataModelValues,
+    type FieldScheduleBinding,
+    type PdfField,
+    type PdfViewMode,
+} from '../../interface/types';
 import {
     evaluateFormula,
     formatCalculatedResult,
+    getFieldDateCalcOptions,
     getFieldTextClipClassName,
     resolvePdfDataValues,
 } from '../../utils';
@@ -11,18 +18,26 @@ interface PdfViewCalculatedProps {
     field: PdfField;
     data?: DataModelValues;
     holidays?: string[];
+    fieldCalendars?: Record<string, BusinessCalendar>;
+    scheduleBindings?: FieldScheduleBinding[];
     viewMode?: PdfViewMode;
 }
 
 export const PdfViewCalculated: FC<PdfViewCalculatedProps> = ({
     data,
     field,
+    fieldCalendars,
     holidays,
+    scheduleBindings,
     viewMode,
 }) => {
     const displayValue = useMemo(() => {
         if (field.formula?.tokens?.length) {
-            const value = evaluateFormula(field.formula, data, holidays);
+            const value = evaluateFormula(
+                field.formula,
+                data,
+                getFieldDateCalcOptions(field.id, scheduleBindings, holidays, fieldCalendars),
+            );
             if (value === null) {
                 return '';
             }
@@ -32,7 +47,17 @@ export const PdfViewCalculated: FC<PdfViewCalculatedProps> = ({
             return resolvePdfDataValues(data, field.path) ?? '';
         }
         return field.label ?? '';
-    }, [data, field.formula, field.formulaFormat, field.label, field.path, holidays]);
+    }, [
+        data,
+        field.formula,
+        field.formulaFormat,
+        field.id,
+        field.label,
+        field.path,
+        fieldCalendars,
+        holidays,
+        scheduleBindings,
+    ]);
 
     const isPreview = viewMode === 'preview';
     const shouldShowPreviewFallback = isPreview && displayValue === '';

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

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { ChangeEvent, FC, Fragment } from 'react';
 import {
     type DataChangePayload,
     type DataModelValues,
@@ -7,12 +7,15 @@ import {
 } from '../../interface/types';
 import {
     dateToUtcZero,
+    fitFieldTextChange,
     getDropdownFieldItems,
+    getFieldMaxLength,
     getFieldPlaceholderText,
     getFieldTextClipClassName,
     getFillablePaintedLabel,
     toDateInputValue,
 } from '../../utils';
+import { CharLimitIndicator } from '../shared';
 
 interface PdfViewFillableProps {
     field: PdfField;
@@ -43,6 +46,33 @@ const fillableTextStyles = {
     margin: 0,
 } as const;
 
+type FillableTextChangeEvent = ChangeEvent<HTMLInputElement | HTMLTextAreaElement>;
+
+/**
+ * Passes on a text change, cut back to what fits the field. A change that adds only overflow is
+ * dropped; either way the caret stays where the user was typing, as with a native `maxLength`.
+ */
+const applyFittedChange = (
+    field: PdfField,
+    value: string,
+    event: FillableTextChangeEvent,
+    onChange: (value: string) => void,
+) => {
+    const { selectionStart, value: nextValue } = event.target;
+    const fittedValue = fitFieldTextChange(field, value, nextValue);
+
+    if (fittedValue !== value) {
+        onChange(fittedValue);
+    }
+
+    if (fittedValue !== nextValue && selectionStart != null) {
+        const caret = fittedValue.length - (nextValue.length - selectionStart);
+        const input = event.target;
+        // after React has put the fitted value back into the control, which moves the caret
+        queueMicrotask(() => input.setSelectionRange(caret, caret));
+    }
+};
+
 export const FillableTextInput: FC<FillableTextInputProps> = ({
     disabled,
     field,
@@ -50,19 +80,24 @@ export const FillableTextInput: FC<FillableTextInputProps> = ({
     readOnly,
     value,
 }) => {
+    const maxLength = getFieldMaxLength(field, value);
+
     return (
-        <input
-            readOnly={readOnly}
-            type="text"
-            className={`dte-pdf-field-fillable ${getFieldTextClipClassName(field)}`}
-            style={fillableTextStyles}
-            disabled={disabled}
-            id={field.path}
-            name={field.path}
-            value={value}
-            onChange={e => onChange(e.target.value)}
-            placeholder={getFieldPlaceholderText(field)}
-        />
+        <Fragment>
+            <input
+                readOnly={readOnly}
+                type="text"
+                className={`dte-pdf-field-fillable ${getFieldTextClipClassName(field)}`}
+                style={fillableTextStyles}
+                disabled={disabled}
+                id={field.path}
+                name={field.path}
+                value={value}
+                onChange={e => applyFittedChange(field, value, e, onChange)}
+                placeholder={getFieldPlaceholderText(field)}
+            />
+            <CharLimitIndicator maxLength={maxLength} value={value} />
+        </Fragment>
     );
 };
 
@@ -73,18 +108,23 @@ export const FillableTextareaInput: FC<FillableTextInputProps> = ({
     readOnly,
     value,
 }) => {
+    const maxLength = getFieldMaxLength(field, value);
+
     return (
-        <textarea
-            readOnly={readOnly}
-            className={`dte-pdf-field-fillable ${getFieldTextClipClassName(field)}`}
-            style={{ ...fillableTextStyles, resize: 'none' }}
-            disabled={disabled}
-            id={field.path}
-            name={field.path}
-            value={value}
-            onChange={e => onChange(e.target.value)}
-            placeholder={getFieldPlaceholderText(field)}
-        />
+        <Fragment>
+            <textarea
+                readOnly={readOnly}
+                className={`dte-pdf-field-fillable ${getFieldTextClipClassName(field)}`}
+                style={{ ...fillableTextStyles, resize: 'none' }}
+                disabled={disabled}
+                id={field.path}
+                name={field.path}
+                value={value}
+                onChange={e => applyFittedChange(field, value, e, onChange)}
+                placeholder={getFieldPlaceholderText(field)}
+            />
+            <CharLimitIndicator maxLength={maxLength} value={value} />
+        </Fragment>
     );
 };
 
@@ -193,19 +233,25 @@ export const PdfViewFillable: FC<PdfViewFillableProps> = ({
     }
 
     if (field.subType === 'number') {
+        const numberValue = resolvedValue == null ? '' : String(resolvedValue);
+        const maxLength = getFieldMaxLength(field, numberValue);
+
         return (
-            <input
-                readOnly={readOnly}
-                type="number"
-                className={`dte-pdf-field-fillable ${getFieldTextClipClassName(field)}`}
-                style={fillableTextStyles}
-                disabled={!isFillable}
-                id={field.path}
-                name={field.path}
-                value={resolvedValue ?? ''}
-                onChange={e => handleDataChange(e.target.value)}
-                placeholder={getFieldPlaceholderText(field)}
-            />
+            <Fragment>
+                <input
+                    readOnly={readOnly}
+                    type="number"
+                    className={`dte-pdf-field-fillable ${getFieldTextClipClassName(field)}`}
+                    style={fillableTextStyles}
+                    disabled={!isFillable}
+                    id={field.path}
+                    name={field.path}
+                    value={numberValue}
+                    onChange={e => applyFittedChange(field, numberValue, e, handleDataChange)}
+                    placeholder={getFieldPlaceholderText(field)}
+                />
+                <CharLimitIndicator maxLength={maxLength} value={numberValue} />
+            </Fragment>
         );
     }
 

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

@@ -3,8 +3,10 @@ import { FC, ReactNode, useLayoutEffect, useMemo, useRef, useState } from 'react
 import { BASE_PAGE_WIDTH } from '../../constants';
 import { usePinchZoom, useZoom } from '../../hooks';
 import {
+    type BusinessCalendar,
     type DataChangePayload,
     type DataModelValues,
+    type FieldScheduleBinding,
     FieldTypeEnum,
     type PdfField,
     type PdfViewMode,
@@ -47,11 +49,25 @@ export interface PdfViewProps {
      */
     makeFillableFieldsReadonly?: boolean;
     /**
-     * UTC date strings (e.g. `'2026-03-17T00:00:00Z'`) treated as non-business days.
-     * When provided, date-based calculated fields skip weekends and these holidays
-     * when adding/subtracting days or computing date differences.
+     * Holidays of the default business-day calendar, as date strings (`'2026-07-03'`,
+     * `'2026-03-17T00:00:00Z'`). Date calculated fields without their own calendar skip
+     * Saturday, Sunday and these days when adding/subtracting days or computing date
+     * differences, within the current year ± 1.
      */
     holidays?: string[];
+    /**
+     * Calendars of the date calculated fields bound to a business-day schedule, by field id
+     * (`PdfField.id`), as DTE's `POST api/holidays/calendar` resolves them. Listed fields use
+     * only their calendar; the others use the default one (`holidays`).
+     */
+    fieldCalendars?: Record<string, BusinessCalendar>;
+    /**
+     * Date calculated fields whose custom business-day exclusion toggle is on, and the schedule
+     * each uses (DTE's bindings, `PdfField.id` as `fieldKey`). A field with no entry here uses
+     * plain calendar-day arithmetic — no weekend or holiday skipping — regardless of `holidays`
+     * or `fieldCalendars`.
+     */
+    scheduleBindings?: FieldScheduleBinding[];
     /**
      * fillingBy defines the list of recipient names
      * who are allowed to fill this field.
@@ -71,6 +87,7 @@ export const PdfView: FC<PdfViewProps> = ({
     enableInputNavigation = true,
     errorPlaceholder,
     errors = {},
+    fieldCalendars,
     fields,
     fillingBy,
     holidays,
@@ -81,6 +98,7 @@ export const PdfView: FC<PdfViewProps> = ({
     onLoadSuccess,
     pdfUrl,
     recipients,
+    scheduleBindings,
     viewMode,
     zoomProps,
     zoomable = true,
@@ -280,6 +298,8 @@ export const PdfView: FC<PdfViewProps> = ({
                                             field={field}
                                             data={viewMode === 'preview' ? previewData : data}
                                             holidays={holidays}
+                                            fieldCalendars={fieldCalendars}
+                                            scheduleBindings={scheduleBindings}
                                             viewMode={viewMode}
                                         />
                                     )}

package/src/components/shared/char-limit-indicator.tsx

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+
+interface CharLimitIndicatorProps {
+    maxLength?: number;
+    value: string;
+}
+
+export const CharLimitIndicator: FC<CharLimitIndicatorProps> = ({ maxLength, value }) => {
+    if (maxLength == null) {
+        return null;
+    }
+
+    const filledCount = value.length;
+
+    return (
+        <span
+            className={`dte-pdf-field-char-count${filledCount >= maxLength ? ' --at-limit' : ''}`}
+            aria-live="polite"
+        >
+            {filledCount}/{maxLength}
+        </span>
+    );
+};

package/src/components/shared/index.ts

@@ -1 +1,2 @@
 export * from './inline-editable';
+export * from './char-limit-indicator';

package/src/constants/calculated.constants.ts

@@ -4,4 +4,11 @@ export const DEFAULT_DATE_FORMAT = 'MM/DD/YYYY';
 
 export const MAX_DATE_CALC_DAYS = 365;
 
+/**
+ * Years either side of the current one that the default business-day calendar covers, as DTE's
+ * (`HolidayCheckService.HolidayYearsWindow`): outside them its holidays are unknown, so date
+ * arithmetic is blank.
+ */
+export const DEFAULT_CALENDAR_YEARS = 1;
+
 export const MAX_DATE_DISPLAY_RANGE_YEARS = 2;

package/src/hooks/usePinchZoom.ts

@@ -1,10 +1,5 @@
 import { RefObject, useEffect, useRef } from 'react';
-import {
-    clampZoom,
-    getPinchZoomValue,
-    getTouchDistance,
-    getWheelZoomFactor,
-} from '../utils';
+import { clampZoom, getPinchZoomValue, getTouchDistance, getWheelZoomFactor } from '../utils';
 
 interface UsePinchZoomOptions {
     enabled: boolean;

package/src/interface/types.ts

@@ -86,6 +86,14 @@ export interface ESignDateSignedOffsetSettings {
     rules:
         | [ESignDateSignedOffsetSettingsFinalRule]
         | [...ESignDateSignedOffsetSettingsRule[], ESignDateSignedOffsetSettingsFinalRule];
+    /**
+     * Whether the day offset skips weekends/holidays per a business-day schedule, same toggle as a
+     * calculated field's (`FieldScheduleBinding`) but stored here instead, since - like `rules` -
+     * it applies to every `dateSignedOffset` field in the document, not one field at a time.
+     */
+    businessCalendarEnabled?: boolean;
+    /** The schedule to use while `businessCalendarEnabled` is on; undefined for the default schedule. */
+    scheduleId?: number;
 }
 
 export interface FillableDropdownItem {
@@ -246,6 +254,45 @@ export interface StructuredFormula {
     tokens: FormulaToken[];
 }
 
+/**
+ * Days a date calculated field skips, as DTE resolves a business-day schedule
+ * (`POST api/holidays/calendar`). Date arithmetic outside `firstYear`–`lastYear` is blank.
+ */
+export interface BusinessCalendar {
+    /** Excluded weekend days, as `Date.getUTCDay()` numbers them: 0 = Sunday, 6 = Saturday. */
+    weekendDays: number[];
+    /** Holiday dates, already moved to their observed days, as `YYYY-MM-DD`. */
+    holidays: string[];
+    firstYear: number;
+    lastYear: number;
+}
+
+/**
+ * Re-exported from `@servicetitan/dte-shared` so existing imports from this path keep
+ * working: the schedule editor UI (`ScheduleDrawer`/`SchedulePicker`) is shared with
+ * `@servicetitan/dte-unlayer` and lives there now, these types are its domain model.
+ */
+export type {
+    BusinessCalendarRules,
+    BusinessDaySchedule,
+    HolidayCatalog,
+    KnownHoliday,
+    SaveScheduleRequest,
+    WeekendDay,
+} from '@servicetitan/dte-shared';
+
+/**
+ * A date calculated field whose custom business-day exclusion toggle is on, and the schedule it
+ * uses (DTE's bindings, full-replace via `PUT api/holidays/templates/{id}/bindings`). A field with
+ * no entry here uses the default calendar with the toggle off (plain calendar-day arithmetic).
+ */
+export interface FieldScheduleBinding {
+    /** `PdfField.id`. */
+    fieldKey: string;
+    /** One of the tenant's schedules, or undefined for the default schedule. */
+    scheduleId?: number;
+}
+
 /** Format options for a calculated field with a numeric result (number, currency, percent) */
 export interface CalculatedFormatForNumber {
     resultType: 'number' | 'currency' | 'percent';

package/src/styles/pdf-field-overlay.css

@@ -12,10 +12,10 @@
 }
 
 .dte-pdf-field-error-message {
-    top: 100%;
+    bottom: -4px;
+    transform: translateY(100%);
     min-width: 100px;
     position: absolute;
-    margin-top: var(--spacing-1, 8px);
     color: var(--danger);
     font-size: var(--typescale-small, 10px);
 }
@@ -105,6 +105,13 @@
     }
 }
 
+textarea.dte-pdf-field-fillable,
+input[type='text'].dte-pdf-field-fillable,
+input[type='number'].dte-pdf-field-fillable {
+    font-family: inherit;
+    font-weight: inherit;
+}
+
 .dte-pdf-field-generic-table {
     padding: var(--spacing-0, 0);
     margin: var(--spacing-0, 0);

package/src/styles/pdf-field.css

@@ -47,7 +47,8 @@
         background-color: var(--color-neutral-0, #ffffff);
         border-radius: 4px;
         padding: 1px var(--spacing-half, 4px);
-        top: -10px;
+        top: 0;
+        transform: translateY(-50%);
         left: 3px;
         font-size: var(--typescale-small, 10px);
         line-height: 1;
@@ -63,7 +64,27 @@
         }
     }
 
+    .dte-pdf-field-char-count {
+        position: absolute;
+        right: 3px;
+        bottom: 0;
+        transform: translateY(50%);
+        padding: 1px var(--spacing-half, 4px);
+        border-radius: 4px;
+        background-color: var(--color-neutral-0, #ffffff);
+        box-shadow: 0 0 0 1px var(--pdf-field-color);
+        color: var(--pdf-field-color-dark);
+        font-size: var(--typescale-small, 10px);
+        user-select: none;
+
+        &.--at-limit {
+            color: var(--danger, #dc3545);
+            box-shadow: 0 0 0 1px var(--danger, #dc3545);
+        }
+    }
+
     input::placeholder,
+    textarea::placeholder,
     input[type='date'],
     input[type='date']::-webkit-calendar-picker-indicator {
         color: var(--pdf-field-color);

package/src/utils/field/__tests__/field-background-color.utils.test.ts

@@ -8,19 +8,19 @@ describe('getFieldColor', () => {
         expect(subject('signer1', { signer1: '#ff0000', signer2: '#00ff00' })).toBe('#ff0000');
     });
 
-    test('returns "none" when recipient is undefined', () => {
-        expect(subject(undefined, { signer1: '#ff0000' })).toBe('none');
+    test('returns undefined when recipient is undefined', () => {
+        expect(subject(undefined, { signer1: '#ff0000' })).toBeUndefined();
     });
 
-    test('returns "none" when recipient is empty string', () => {
-        expect(subject('', { signer1: '#ff0000' })).toBe('none');
+    test('returns undefined when recipient is empty string', () => {
+        expect(subject('', { signer1: '#ff0000' })).toBeUndefined();
     });
 
-    test('returns "none" when recipient is not in the color map', () => {
-        expect(subject('unknown', { signer1: '#ff0000' })).toBe('none');
+    test('returns undefined when recipient is not in the color map', () => {
+        expect(subject('unknown', { signer1: '#ff0000' })).toBeUndefined();
     });
 
-    test('returns "none" when color map is empty', () => {
-        expect(subject('signer1', {})).toBe('none');
+    test('returns undefined when color map is empty', () => {
+        expect(subject('signer1', {})).toBeUndefined();
     });
 });