@servicetitan/dte-pdf-editor 1.96.2 → 1.97.0

package/dist/vendor/dte-shared/types.d.ts

@@ -40,6 +40,62 @@ export interface SaveScheduleRequest extends BusinessCalendarRules {
     /** Display name, unique per tenant ignoring case, max 255 characters, and not "Default". */
     name: string;
 }
+/**
+ * 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 has the toggle off; what that means for its date arithmetic is up to the editor.
+ */
+export interface FieldScheduleBinding {
+    /** The field's key: `PdfField.id` in BYOD, the tool's instance id (`values.id`) in Unlayer. */
+    fieldKey: string;
+    /** One of the tenant's schedules, or undefined for the default schedule. */
+    scheduleId?: number;
+}
+/**
+ * The business-day schedule props an editor (`PdfEditor`, `UnlayerEditor`) takes from its host,
+ * with the same names and meaning in every editor. The editor builds each field's
+ * `ScheduleEditorContext` from them (`useFieldScheduleEditorContext`).
+ */
+export interface BusinessCalendarHostProps {
+    /**
+     * Date calculated fields whose custom business-day exclusion toggle is on, and the schedule
+     * each uses. Also drives the toggle/picker of the field being edited.
+     */
+    scheduleBindings?: FieldScheduleBinding[];
+    /** The tenant's known holidays, for the schedule editor's checklist. */
+    holidayCatalog?: HolidayCatalog;
+    holidayCatalogLoading?: boolean;
+    holidayCatalogError?: string;
+    /** The schedules the tenant can pick from the schedule picker. */
+    schedules?: BusinessDaySchedule[];
+    schedulesLoading?: boolean;
+    schedulesError?: string;
+    /**
+     * Called with the complete desired `scheduleBindings` whenever the toggle, the schedule picker
+     * or a schedule delete changes them (full replacement, mirroring DTE's
+     * `PUT api/holidays/templates/{id}/bindings`). The editor does not persist them itself.
+     */
+    onScheduleBindingsChange?(bindings: FieldScheduleBinding[]): void;
+    /**
+     * Creates a tenant schedule from the "Create New Schedule" drawer. Always creates a new
+     * schedule — it never overwrites a selected one. On success the created schedule is selected
+     * in the picker. A rejected promise's `message` is shown as the drawer's error (for example a
+     * duplicate-name conflict).
+     */
+    onCreateSchedule?(request: SaveScheduleRequest): Promise<BusinessDaySchedule>;
+    /**
+     * Replaces a tenant schedule's name and rules in place, from the picker's "Edit" action (DTE's
+     * `PUT api/holidays/schedules/{id}`). On success the updated schedule stays selected.
+     */
+    onUpdateSchedule?(id: number, request: SaveScheduleRequest): Promise<BusinessDaySchedule>;
+    /**
+     * Permanently deletes a tenant schedule, from the picker's "Delete" action (DTE's
+     * `DELETE api/holidays/schedules/{id}`). On success every field bound to it moves to the
+     * default schedule (toggle still on) through `onScheduleBindingsChange`, as DTE falls back to
+     * the default schedule for a deleted one.
+     */
+    onDeleteSchedule?(id: number): Promise<void>;
+}
 /**
  * Prop bundle for the business-calendar toggle/picker/drawer, built by a host package (currently
  * `@servicetitan/dte-pdf-editor` and `@servicetitan/dte-unlayer`) from whatever it uses to track
@@ -57,6 +113,12 @@ export interface ScheduleEditorContext {
     schedules?: BusinessDaySchedule[];
     schedulesLoading?: boolean;
     schedulesError?: string;
+    /**
+     * When set, the schedule form ("Create New Schedule" / "Edit Schedule") is rendered into this
+     * element through a portal instead of opening in a drawer. The host owns the element and decides
+     * how it is shown; leave it unset (or null, before the element exists) for the drawer.
+     */
+    editorContainer?: HTMLElement | null;
     onToggle(enabled: boolean): void;
     onSelectSchedule(scheduleId: number | undefined): void;
     onCreateSchedule?(request: SaveScheduleRequest): Promise<BusinessDaySchedule>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@servicetitan/dte-pdf-editor",
-  "version": "1.96.2",
+  "version": "1.97.0",
   "description": "",
   "main": "./dist/index.js",
   "typings": "./dist/index.d.ts",
@@ -13,7 +13,7 @@
     "registry": "https://registry.npmjs.org"
   },
   "scripts": {
-    "build": "npm run build --prefix ../shared && tsc --build && startup prepare-package && node scripts/bundle-shared.mjs"
+    "build": "npm run build --prefix ../shared && tsc --build && startup prepare-package && node ../shared/scripts/bundle-shared.mjs"
   },
   "cli": {
     "webpack": false

package/src/components/field-config-panel/__tests__/field-config-panel-overlay.test.tsx

@@ -68,6 +68,22 @@ describe('FieldConfigPanelOverlay', () => {
         container.remove();
     });
 
+    describe('the schedule form slot', () => {
+        test('gives the panel an empty element inside the overlay to portal the form into', async () => {
+            await render();
+
+            const { scheduleEditorContainer } = panel.mock.calls[panel.mock.calls.length - 1][0];
+
+            expect(scheduleEditorContainer).toBeInstanceOf(HTMLElement);
+            expect(scheduleEditorContainer.childNodes).toHaveLength(0);
+            expect(
+                container
+                    .querySelector('.dte-field-config-panel-overlay')
+                    ?.contains(scheduleEditorContainer),
+            ).toBe(true);
+        });
+    });
+
     describe('without onScheduleBindingsChange', () => {
         test('gives the panel no schedule context', async () => {
             await render();

package/src/components/field-config-panel/__tests__/schedule-editor-placement.test.tsx

@@ -0,0 +1,289 @@
+/*
+ * Where "Create new schedule" opens its form. A calculated field keeps the drawer; an e-sign
+ * `dateSignedOffset` field portals the same form into the element the overlay gives the panel
+ * (`editorContainer`). anvil2 renders the drawer as a `<dialog>`, so a form with no `<dialog>`
+ * around it is not in a drawer.
+ */
+jest.mock('../formula-generator', () => ({ FormulaGenerator: jest.fn(() => null) }));
+
+import { TextDecoder, TextEncoder } from 'util';
+
+// jsdom has no TextEncoder; anvil2 reads it when it is loaded, so this must run before it is imported.
+Object.assign(globalThis, { TextEncoder, TextDecoder });
+
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import {
+    type CalculatedFieldFormat,
+    ESignFieldType,
+    FieldTypeEnum,
+    type PdfField,
+} from '../../../interface/types';
+import { AdvancedSettings } from '../advanced-settings';
+import { ESignOptionsModal } from '../e-sign-options-modal';
+import { FieldConfigPanel } from '../field-config-panel';
+import { FormulaGenerator } from '../formula-generator';
+
+// jsdom has no matchMedia, ResizeObserver, IntersectionObserver, popover or dialog API; anvil2 uses them.
+Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: (query: string) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: () => {},
+        removeListener: () => {},
+        addEventListener: () => {},
+        removeEventListener: () => {},
+        dispatchEvent: () => false,
+    }),
+});
+class ObserverMock {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+}
+global.ResizeObserver = ObserverMock as unknown as typeof ResizeObserver;
+global.IntersectionObserver = ObserverMock as unknown as typeof IntersectionObserver;
+HTMLElement.prototype.showPopover ??= () => {};
+HTMLElement.prototype.hidePopover ??= () => {};
+HTMLElement.prototype.togglePopover ??= () => false;
+HTMLDialogElement.prototype.show ??= () => {};
+HTMLDialogElement.prototype.showModal ??= () => {};
+HTMLDialogElement.prototype.close ??= () => {};
+
+const PICKER_LABEL = 'Select Schedule or create new';
+const FORM_TITLE = 'Create New Schedule';
+
+const defaultSchedule = {
+    name: 'Weekends and US Federal Holidays',
+    isDefault: true,
+    calendar: { weekendDays: [0, 6] as (0 | 6)[], knownHolidays: [], customDates: [] },
+};
+const created = {
+    id: 7,
+    name: 'Weekdays only',
+    isDefault: false,
+    calendar: { weekendDays: [0, 6] as (0 | 6)[], knownHolidays: [], customDates: [] },
+};
+const dateFormat: CalculatedFieldFormat = { resultType: 'date', dateFormat: 'MM/DD/YYYY' };
+const noOp = () => {};
+
+describe('where the schedule form opens', () => {
+    let container: HTMLDivElement;
+    let slot: HTMLDivElement;
+    let root: Root;
+    const onSelectSchedule = jest.fn();
+    const onCreateSchedule = jest.fn();
+    const businessCalendar = (editorContainer?: HTMLElement | null) => ({
+        enabled: true,
+        schedules: [defaultSchedule],
+        editorContainer,
+        onToggle: noOp,
+        onSelectSchedule,
+        onCreateSchedule,
+    });
+
+    const render = (element: JSX.Element) =>
+        act(async () => {
+            root.render(element);
+        });
+
+    const renderESign = (editorContainer: HTMLElement | null = slot) =>
+        render(
+            <ESignOptionsModal
+                initialState={{ rules: [{ days: 3 }] }}
+                onSave={noOp}
+                businessCalendar={businessCalendar(editorContainer)}
+            />,
+        );
+
+    const renderCalculated = () =>
+        render(
+            <AdvancedSettings
+                format={dateFormat}
+                setFormat={noOp}
+                businessCalendar={businessCalendar()}
+            />,
+        );
+
+    const renderPanel = (field: PdfField) =>
+        render(
+            <FieldConfigPanel
+                field={field}
+                recipients={[{ id: 1, name: 'customer', displayName: 'Customer' }]}
+                forms={[]}
+                hideConditionalLogic
+                businessCalendar={businessCalendar()}
+                scheduleEditorContainer={slot}
+                onDeleteField={noOp}
+                onFieldConfigChange={noOp}
+                onRequestFormFields={noOp}
+            />,
+        );
+
+    const findDrawer = () => document.querySelector('dialog');
+
+    // The item is in the DOM while the dropdown is closed, so there is no need to open it first.
+    const clickCreateNewSchedule = () =>
+        act(async () => {
+            [...document.querySelectorAll('button')]
+                .find(button => button.textContent?.includes('Create new schedule'))
+                ?.click();
+        });
+
+    const clickButton = (parent: HTMLElement, label: string) =>
+        act(async () => {
+            [...parent.querySelectorAll('button')]
+                .find(button => button.textContent?.trim() === label)
+                ?.click();
+        });
+
+    const clickClose = () =>
+        act(async () => {
+            slot.querySelector<HTMLButtonElement>('button[aria-label="Close"]')?.click();
+        });
+
+    const typeScheduleName = (name: string) =>
+        act(async () => {
+            const input = slot.querySelector('input') as HTMLInputElement;
+            const setValue = Object.getOwnPropertyDescriptor(
+                HTMLInputElement.prototype,
+                'value',
+            )?.set;
+            setValue?.call(input, name);
+            input.dispatchEvent(new Event('input', { bubbles: true }));
+        });
+
+    beforeAll(() => {
+        (globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+    });
+
+    beforeEach(() => {
+        onSelectSchedule.mockClear();
+        onCreateSchedule.mockReset().mockResolvedValue(created);
+        (FormulaGenerator as unknown as jest.Mock).mockClear();
+        container = document.createElement('div');
+        slot = document.createElement('div');
+        document.body.append(container, slot);
+        root = createRoot(container);
+    });
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+        slot.remove();
+    });
+
+    describe('for a calculated field', () => {
+        test('shows the form in a drawer, next to the picker', async () => {
+            await renderCalculated();
+            expect(findDrawer()).toBeNull();
+
+            await clickCreateNewSchedule();
+
+            expect(findDrawer()?.textContent).toContain(FORM_TITLE);
+            expect(container.textContent).toContain(PICKER_LABEL);
+            expect(slot.textContent).toBe('');
+        });
+
+        test('is not given the container by the config panel', async () => {
+            await renderPanel({
+                id: 'c1',
+                type: FieldTypeEnum.calculated,
+                path: 'c1',
+            } as unknown as PdfField);
+
+            const generatorProps = (FormulaGenerator as unknown as jest.Mock).mock.calls.at(
+                -1,
+            )?.[0];
+            expect(generatorProps.businessCalendar).toBeDefined();
+            expect(generatorProps.businessCalendar.editorContainer).toBeUndefined();
+        });
+    });
+
+    describe('for an e-sign date signed offset field', () => {
+        test('portals the form into the container and opens no drawer', async () => {
+            await renderESign();
+            expect(slot.textContent).toBe('');
+
+            await clickCreateNewSchedule();
+
+            expect(slot.textContent).toContain(FORM_TITLE);
+            expect(slot.textContent).toContain('Schedule Name');
+            expect(container.textContent).not.toContain(FORM_TITLE);
+            expect(findDrawer()).toBeNull();
+        });
+
+        test('leaves the field settings mounted while the form is open', async () => {
+            await renderESign();
+
+            await clickCreateNewSchedule();
+
+            expect(container.textContent).toContain('Number of days');
+            expect(container.textContent).toContain(PICKER_LABEL);
+        });
+
+        test('opens the drawer while the container does not exist yet', async () => {
+            await renderESign(null);
+
+            await clickCreateNewSchedule();
+
+            expect(findDrawer()?.textContent).toContain(FORM_TITLE);
+            expect(slot.textContent).toBe('');
+        });
+
+        test('gets the container from the config panel', async () => {
+            await renderPanel({
+                id: 'e1',
+                type: FieldTypeEnum.eSign,
+                subType: ESignFieldType.dateSignedOffset,
+                recipient: 'customer',
+                path: 'esign.customer.dateSignedOffset',
+                // The switch of an e-sign field is stored in its data, not in the schedule context.
+                data: { rules: [{ days: 3 }], businessCalendarEnabled: true },
+            } as unknown as PdfField);
+
+            await clickCreateNewSchedule();
+
+            expect(slot.textContent).toContain(FORM_TITLE);
+            expect(findDrawer()).toBeNull();
+        });
+
+        test('creates the schedule, selects it and empties the container', async () => {
+            await renderESign();
+            await clickCreateNewSchedule();
+            await typeScheduleName('Weekdays only');
+
+            await clickButton(slot, 'Create');
+
+            expect(onCreateSchedule).toHaveBeenCalledWith(
+                expect.objectContaining({ name: 'Weekdays only' }),
+            );
+            expect(onSelectSchedule).toHaveBeenCalledWith(created.id);
+            expect(slot.textContent).toBe('');
+            expect(slot.childNodes).toHaveLength(0);
+        });
+
+        test('does not create anything without a name', async () => {
+            await renderESign();
+            await clickCreateNewSchedule();
+
+            await clickButton(slot, 'Create');
+
+            expect(onCreateSchedule).not.toHaveBeenCalled();
+            expect(slot.textContent).toContain(FORM_TITLE);
+        });
+
+        test('close empties the container without creating or selecting a schedule', async () => {
+            await renderESign();
+            await clickCreateNewSchedule();
+
+            await clickClose();
+
+            expect(onCreateSchedule).not.toHaveBeenCalled();
+            expect(onSelectSchedule).not.toHaveBeenCalled();
+            expect(slot.childNodes).toHaveLength(0);
+        });
+    });
+});

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

@@ -1,4 +1,5 @@
 import { Flex, SegmentedControl, Switch, Text } from '@servicetitan/anvil2';
+// eslint-disable-next-line import/no-extraneous-dependencies -- bundled, see bundle-shared.mjs
 import { BusinessCalendarSection, type ScheduleEditorContext } from '@servicetitan/dte-shared';
 import { Dispatch, FC, SetStateAction } from 'react';
 import { DEFAULT_DATE_FORMAT, ROUNDING_OPTIONS } from '../../constants';

package/src/components/field-config-panel/e-sign-offset-rule-row.tsx

@@ -35,7 +35,7 @@ export const ESignOffsetRuleRow: FC<ESignOffsetRuleRowProps> = ({
     rule,
 }) => {
     const handleDaysChange = (days: number | null) => {
-        onChange({ ...rule, days: days ?? 0 });
+        onChange({ ...rule, days: Math.max(Math.min(365, days ?? 0), 0) });
     };
 
     const group = rule.condition.groups[0];

package/src/components/field-config-panel/e-sign-options-modal.tsx

@@ -1,5 +1,6 @@
 import { Button, Flex, NumberField } from '@servicetitan/anvil2';
 import AddIcon from '@servicetitan/anvil2/assets/icons/material/round/add_circle.svg';
+// eslint-disable-next-line import/no-extraneous-dependencies -- bundled, see bundle-shared.mjs
 import { BusinessCalendarSection, type ScheduleEditorContext } from '@servicetitan/dte-shared';
 import { FC, Fragment, useState } from 'react';
 import {

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

@@ -1,7 +1,8 @@
 import { Button, Flex, Text } from '@servicetitan/anvil2';
 import IconClose from '@servicetitan/anvil2/assets/icons/material/round/close.svg';
-import { type ScheduleEditorContext } from '@servicetitan/dte-shared';
-import { FC, useCallback, useMemo } from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies -- bundled, see bundle-shared.mjs
+import { useFieldScheduleEditorContext } from '@servicetitan/dte-shared';
+import { FC, useMemo, useState } from 'react';
 import {
     type BusinessCalendar,
     type BusinessDaySchedule,
@@ -14,7 +15,7 @@ import {
     type SaveScheduleRequest,
     type SchemaObject,
 } from '../../interface/types';
-import { getFieldDateCalcOptions, setFieldSchedule, setFieldScheduleEnabled } from '../../utils';
+import { getFieldDateCalcOptions } from '../../utils';
 import { FieldConfigPanel } from './field-config-panel';
 
 interface FieldConfigPanelOverlayProps {
@@ -77,112 +78,80 @@ export const FieldConfigPanelOverlay: FC<FieldConfigPanelOverlayProps> = ({
     schedulesLoading,
     selectedField,
 }) => {
+    /*
+     * Where an e-sign date offset's schedule form is portaled to. A state, not a ref, so the panel
+     * re-renders with the element once it exists.
+     */
+    const [scheduleEditorContainer, setScheduleEditorContainer] = useState<HTMLElement | null>(
+        null,
+    );
+
     const dateCalcOptions = useMemo(
         () => getFieldDateCalcOptions(selectedField.id, scheduleBindings, holidays, fieldCalendars),
         [selectedField.id, scheduleBindings, holidays, fieldCalendars],
     );
 
-    const selectedFieldId = selectedField.id;
-    const selectedBinding = useMemo(
-        () => scheduleBindings?.find(b => b.fieldKey === selectedFieldId),
-        [scheduleBindings, selectedFieldId],
-    );
-
-    const handleToggle = useCallback(
-        (enabled: boolean) => {
-            onScheduleBindingsChange?.(
-                setFieldScheduleEnabled(scheduleBindings ?? [], selectedFieldId, enabled),
-            );
-        },
-        [scheduleBindings, selectedFieldId, onScheduleBindingsChange],
-    );
-
-    const handleSelectSchedule = useCallback(
-        (scheduleId: number | undefined) => {
-            onScheduleBindingsChange?.(
-                setFieldSchedule(scheduleBindings ?? [], selectedFieldId, scheduleId),
-            );
-        },
-        [scheduleBindings, selectedFieldId, onScheduleBindingsChange],
-    );
-
+    const fieldBusinessCalendar = useFieldScheduleEditorContext(selectedField.id, {
+        holidayCatalog,
+        holidayCatalogError,
+        holidayCatalogLoading,
+        onCreateSchedule,
+        onDeleteSchedule,
+        onScheduleBindingsChange,
+        onUpdateSchedule,
+        scheduleBindings,
+        schedules,
+        schedulesError,
+        schedulesLoading,
+    });
     /*
      * The schedule UI (the Formula Builder's switch and the e-sign day offset's schedule) is offered
      * only to a host that passes `onScheduleBindingsChange`. Without it there is no context, and
      * everything that renders the schedule UI checks for one.
      */
-    const businessCalendar: ScheduleEditorContext | undefined = useMemo(
-        () =>
-            onScheduleBindingsChange
-                ? {
-                      enabled: !!selectedBinding,
-                      selectedScheduleId: selectedBinding?.scheduleId,
-                      onToggle: handleToggle,
-                      onSelectSchedule: handleSelectSchedule,
-                      holidayCatalog,
-                      holidayCatalogLoading,
-                      holidayCatalogError,
-                      schedules,
-                      schedulesLoading,
-                      schedulesError,
-                      onCreateSchedule,
-                      onUpdateSchedule,
-                      onDeleteSchedule,
-                  }
-                : undefined,
-        [
-            onScheduleBindingsChange,
-            selectedBinding,
-            handleToggle,
-            handleSelectSchedule,
-            holidayCatalog,
-            holidayCatalogLoading,
-            holidayCatalogError,
-            schedules,
-            schedulesLoading,
-            schedulesError,
-            onCreateSchedule,
-            onUpdateSchedule,
-            onDeleteSchedule,
-        ],
-    );
+    const businessCalendar = onScheduleBindingsChange ? fieldBusinessCalendar : undefined;
 
     return (
         <Flex className="dte-field-config-panel-overlay" onClick={e => e.stopPropagation()}>
-            <Flex
-                className="dte-field-config-panel-header"
-                alignItems="center"
-                justifyContent="space-between"
-            >
-                <Text variant="headline" el="h6" size="small">
-                    Field Configuration
-                </Text>
-                <Button
-                    appearance="ghost"
-                    size="small"
-                    onClick={onDeselectField}
-                    aria-label="Close"
-                    icon={IconClose}
-                />
+            {/* Before the inner panel, so a filled slot can hide it with a sibling selector. */}
+            <div ref={setScheduleEditorContainer} className="dte-field-config-panel-editor-slot" />
+            <Flex className="dte-field-config-panel-overlay-inner" direction="column">
+                <Flex
+                    className="dte-field-config-panel-header"
+                    alignItems="center"
+                    justifyContent="space-between"
+                >
+                    <Text variant="headline" el="h6" size="small">
+                        Field Configuration
+                    </Text>
+                    <Button
+                        appearance="ghost"
+                        size="small"
+                        onClick={onDeselectField}
+                        aria-label="Close"
+                        icon={IconClose}
+                    />
+                </Flex>
+                <div className="dte-field-config-panel-content">
+                    <FieldConfigPanel
+                        dataModel={dataModel}
+                        documentFields={documentFields}
+                        field={selectedField}
+                        formFieldsByFormId={formFieldsByFormId}
+                        forms={forms}
+                        formulaLoadingFormId={formulaLoadingFormId}
+                        recipients={recipients}
+                        onFieldConfigChange={onFieldConfigChange}
+                        onMatchingFieldsConfigChange={onMatchingFieldsConfigChange}
+                        onDeleteField={onDeleteField}
+                        hideConditionalLogic={hideConditionalLogic}
+                        dateCalcOptions={dateCalcOptions}
+                        businessCalendar={businessCalendar}
+                        scheduleEditorContainer={scheduleEditorContainer}
+                        onRequestFormFields={onRequestFormFields}
+                    />
+                </div>
             </Flex>
-            <div className="dte-field-config-panel-content">
-                <FieldConfigPanel
-                    dataModel={dataModel}
-                    documentFields={documentFields}
-                    field={selectedField}
-                    formFieldsByFormId={formFieldsByFormId}
-                    forms={forms}
-                    formulaLoadingFormId={formulaLoadingFormId}
-                    recipients={recipients}
-                    onFieldConfigChange={onFieldConfigChange}
-                    onMatchingFieldsConfigChange={onMatchingFieldsConfigChange}
-                    onDeleteField={onDeleteField}
-                    hideConditionalLogic={hideConditionalLogic}
-                    dateCalcOptions={dateCalcOptions}
-                    businessCalendar={businessCalendar}
-                    onRequestFormFields={onRequestFormFields}
-                />
-            </div>
         </Flex>
     );
 };

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

@@ -41,6 +41,11 @@ interface FieldConfigPanelProps {
     dateCalcOptions?: DateCalcOptions;
     /** The business-calendar toggle/picker/drawer state and callbacks for this field. */
     businessCalendar?: ScheduleEditorContext;
+    /**
+     * Where an e-sign `dateSignedOffset` field's schedule form is portaled to instead of a drawer.
+     * A calculated field's schedule form always uses the drawer.
+     */
+    scheduleEditorContainer?: HTMLElement | null;
     onDeleteField(): void;
     onFieldConfigChange(updates: Partial<PdfField>): void;
     onMatchingFieldsConfigChange?(
@@ -65,6 +70,7 @@ export const FieldConfigPanel: FC<FieldConfigPanelProps> = ({
     onMatchingFieldsConfigChange,
     onRequestFormFields,
     recipients,
+    scheduleEditorContainer,
 }) => {
     const recipientOptions = useMemo(
         () =>
@@ -100,11 +106,14 @@ export const FieldConfigPanel: FC<FieldConfigPanelProps> = ({
      * Reuses the catalog/CRUD half of `businessCalendar` (shared tenant schedules, same as a
      * calculated field's), but overrides the enabled/selected-schedule half to read and write
      * `ESignDateSignedOffsetSettings` instead of a `scheduleBindings` entry, since the toggle here
-     * applies to every `dateSignedOffset` field in the document, same as `rules` does.
+     * applies to every `dateSignedOffset` field in the document, same as `rules` does. It is also
+     * the only context given `scheduleEditorContainer`, so only this field's schedule form leaves
+     * the drawer.
      */
     const dateSignedOffsetData = field.data as ESignDateSignedOffsetSettings;
     const eSignBusinessCalendar: ScheduleEditorContext | undefined = businessCalendar && {
         ...businessCalendar,
+        editorContainer: scheduleEditorContainer,
         enabled: !!dateSignedOffsetData?.businessCalendarEnabled,
         selectedScheduleId: dateSignedOffsetData?.scheduleId,
         onToggle: businessCalendarEnabled =>