@servicetitan/dte-pdf-editor 1.92.1 → 1.92.3

package/src/components/field-sidebar/form-fields-type-list.tsx

@@ -1,4 +1,4 @@
-import { Button, Flex, Text } from '@servicetitan/anvil2';
+import { Button, Flex, Skeleton, Text } from '@servicetitan/anvil2';
 import IconArrowBack from '@servicetitan/anvil2/assets/icons/material/round/keyboard_arrow_left.svg';
 import IconArrowForward from '@servicetitan/anvil2/assets/icons/material/round/keyboard_arrow_right.svg';
 import { FC, Fragment } from 'react';
@@ -6,112 +6,154 @@ import { type FieldTypeOption, type FormInfo } from '../../interface/types';
 import { getFieldSampleData } from '../../utils';
 import { FieldType } from './field-type';
 
-export interface FormFieldsTypeListProps {
+/** Heading of the Forms group inside the Merge Tags tab. */
+export const FORMS_GROUP_NAME = 'Forms';
+
+/** A form's field count is unknown until it answers, so the placeholder settles on a short list. */
+const FIELD_SKELETON_ROWS = 4;
+
+/** Placeholder rows, shaped like the real ones, for a list whose contents are still in flight. */
+const SkeletonRows: FC<{ count: number; className: string }> = ({ className, count }) => {
+    return (
+        <Fragment>
+            {Array.from({ length: count }, (_, index) => (
+                <div key={index} className={`${className} --skeleton`} aria-hidden>
+                    <Skeleton.Text />
+                </div>
+            ))}
+        </Fragment>
+    );
+};
+
+export interface FormsListProps {
     forms: FormInfo[];
-    selectedForm: FormInfo | null;
+    /**
+     * Rows to draw as placeholders instead of the list. Forms are only listed once they are known
+     * to have fields, so until the fields arrive there is nothing truthful to show.
+     */
+    loadingCount?: number;
+    /** Rendered when the (possibly search-filtered) list is empty. */
+    emptyText?: string;
+    onSelectForm(form: FormInfo): void;
+}
+
+/**
+ * Root level of the Forms group: one clickable row per form. Selecting a form hands off to
+ * `FormFieldsPanel`, which lists that form's draggable fields.
+ */
+export const FormsList: FC<FormsListProps> = ({
+    emptyText = 'No forms configured.',
+    forms,
+    loadingCount = 0,
+    onSelectForm,
+}) => {
+    return (
+        <div className="dte-field-type-group">
+            <Flex alignItems="center" gap={1} className="dte-field-type-group-header">
+                <Text variant="headline" el="h6" size="small">
+                    {FORMS_GROUP_NAME}
+                </Text>
+            </Flex>
+            {loadingCount > 0 ? (
+                <SkeletonRows count={loadingCount} className="dte-formula-field-list-item" />
+            ) : forms.length > 0 ? (
+                <ul className="dte-formula-field-list" role="listbox" aria-label={FORMS_GROUP_NAME}>
+                    {forms.map(form => (
+                        <li
+                            key={form.id}
+                            role="option"
+                            className="dte-formula-field-list-item"
+                            onMouseDown={e => {
+                                e.preventDefault();
+                                onSelectForm(form);
+                            }}
+                        >
+                            <Flex justifyContent="space-between" alignItems="center">
+                                {/*
+                                 * Same Text as the data model rows use (via FieldType): a bare
+                                 * span would inherit the host page's font instead of Anvil2's,
+                                 * so the Forms rows would not match the groups above them.
+                                 */}
+                                <Text size="small" className="dte-text-ellipsis" title={form.name}>
+                                    {form.name}
+                                </Text>
+                                <IconArrowForward />
+                            </Flex>
+                        </li>
+                    ))}
+                </ul>
+            ) : (
+                <Text size="small" subdued variant="body">
+                    {emptyText}
+                </Text>
+            )}
+        </div>
+    );
+};
+
+export interface FormFieldsPanelProps {
+    form: FormInfo;
     fieldOptions: FieldTypeOption[];
-    isLoadingFormFields?: boolean;
-    onSelectForm(form: FormInfo | null): void;
+    isLoading?: boolean;
+    /** Rendered when the form has fields but none match the current search. */
+    hasHiddenFields?: boolean;
+    onBack(): void;
     onDragEnd(): void;
     onDragStart(fieldOption: FieldTypeOption): void;
 }
 
-export const FormFieldsTypeList: FC<FormFieldsTypeListProps> = ({
+/**
+ * Detail level of the Forms group: a back button naming the form, then its fields as the same
+ * draggable rows the data model groups use, so a form field drops onto the PDF like any merge tag.
+ */
+export const FormFieldsPanel: FC<FormFieldsPanelProps> = ({
     fieldOptions,
-    forms,
-    isLoadingFormFields = false,
+    form,
+    hasHiddenFields = false,
+    isLoading = false,
+    onBack,
     onDragEnd,
     onDragStart,
-    onSelectForm,
-    selectedForm,
 }) => {
     return (
-        <Flex direction="column" gap={3} flex={1} style={{ minHeight: 0 }}>
-            <div className="dte-formula-sidebar-slide-outer">
-                <div
-                    className={`dte-formula-sidebar-slide-track${selectedForm ? ' --detail' : ''}`}
+        <Fragment>
+            <Button
+                style={{ width: '100%' }}
+                appearance="ghost"
+                size="small"
+                icon={IconArrowBack}
+                title={form.name}
+                onClick={onBack}
+            >
+                <Text
+                    size="medium"
+                    className="dte-text-ellipsis"
+                    style={{ fontWeight: 'bold', width: '100%' }}
                 >
-                    <div className="dte-formula-sidebar-slide-panel">
-                        {forms.length > 0 ? (
-                            <ul
-                                className="dte-formula-field-list"
-                                role="listbox"
-                                aria-label="Forms"
-                            >
-                                {forms.map(form => (
-                                    <li
-                                        key={form.id}
-                                        role="option"
-                                        className="dte-formula-field-list-item"
-                                        onMouseDown={e => {
-                                            e.preventDefault();
-                                            onSelectForm(form);
-                                        }}
-                                    >
-                                        <Flex justifyContent="space-between" alignItems="center">
-                                            <span className="dte-text-ellipsis" title={form.name}>
-                                                {form.name}
-                                            </span>
-                                            <IconArrowForward />
-                                        </Flex>
-                                    </li>
-                                ))}
-                            </ul>
-                        ) : (
-                            <Text size="small" subdued variant="body">
-                                No forms configured.
-                            </Text>
-                        )}
-                    </div>
-
-                    <div className="dte-formula-sidebar-slide-panel --form-fields">
-                        {selectedForm ? (
-                            <Fragment>
-                                <Button
-                                    style={{ width: '100%' }}
-                                    appearance="ghost"
-                                    size="small"
-                                    icon={IconArrowBack}
-                                    title={selectedForm.name}
-                                    onClick={() => onSelectForm(null)}
-                                >
-                                    <Text
-                                        size="medium"
-                                        className="dte-text-ellipsis"
-                                        style={{ fontWeight: 'bold', width: '100%' }}
-                                    >
-                                        {selectedForm.name}
-                                    </Text>
-                                </Button>
-                                <div className="dte-field-type-group">
-                                    {isLoadingFormFields ? (
-                                        <Text size="small" subdued variant="body">
-                                            Loading fields…
-                                        </Text>
-                                    ) : fieldOptions.length === 0 ? (
-                                        <Text size="small" subdued variant="body">
-                                            No fields on this form.
-                                        </Text>
-                                    ) : (
-                                        fieldOptions.map(option => (
-                                            <FieldType
-                                                key={option.path}
-                                                label={option.label}
-                                                sampleData={getFieldSampleData(
-                                                    option.sampleData,
-                                                    option.fieldType,
-                                                )}
-                                                onDragEnd={onDragEnd}
-                                                onDragStart={() => onDragStart(option)}
-                                            />
-                                        ))
-                                    )}
-                                </div>
-                            </Fragment>
-                        ) : null}
-                    </div>
-                </div>
+                    {form.name}
+                </Text>
+            </Button>
+            <div className="dte-field-type-group">
+                {isLoading ? (
+                    <SkeletonRows count={FIELD_SKELETON_ROWS} className="dte-field-type-item" />
+                ) : fieldOptions.length === 0 ? (
+                    <Text size="small" subdued variant="body">
+                        {hasHiddenFields
+                            ? 'No fields match the search.'
+                            : 'No fields on this form.'}
+                    </Text>
+                ) : (
+                    fieldOptions.map(option => (
+                        <FieldType
+                            key={option.path}
+                            label={option.label}
+                            sampleData={getFieldSampleData(option.sampleData, option.fieldType)}
+                            onDragEnd={onDragEnd}
+                            onDragStart={() => onDragStart(option)}
+                        />
+                    ))
+                )}
             </div>
-        </Flex>
+        </Fragment>
     );
 };

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

@@ -59,7 +59,7 @@ export const PdfEditor: FC<PdfEditorProps> = ({
     const pdfContainerRef = useRef<HTMLDivElement>(null);
     const pdfWrapperRef = useRef<HTMLDivElement>(null);
     const pdfFieldSelection = usePdfFieldSelection(fields, onFieldsChange);
-    const formFields = useFormFields(fields, onFormSelect);
+    const formFields = useFormFields(fields, onFormSelect, forms);
     const pdfFieldDnd = usePdfFieldDnD({
         fields,
         recipients,
@@ -90,7 +90,7 @@ export const PdfEditor: FC<PdfEditorProps> = ({
                     dataModel={dataModel}
                     documentFields={fields}
                     formFieldsByFormId={formFields.formFieldsByFormId}
-                    forms={forms ?? []}
+                    forms={formFields.formsWithFields}
                     formulaLoadingFormId={formFields.formulaLoadingFormId}
                     selectedField={pdfFieldSelection.selectedField}
                     onFieldConfigChange={pdfFieldSelection.updateField}
@@ -108,7 +108,8 @@ export const PdfEditor: FC<PdfEditorProps> = ({
                     hideFields={hideFields}
                     dataModelGroups={dataModelGroups}
                     formFieldOptions={formFields.formFieldOptions}
-                    forms={forms}
+                    forms={formFields.formsWithFields}
+                    loadingFormsCount={formFields.isLoadingForms ? (forms?.length ?? 0) : 0}
                     isLoadingFormFields={formFields.isLoading}
                     onDragStart={pdfFieldDnd.handleDragStart}
                     onDragEnd={pdfFieldDnd.handleDragEnd}

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

@@ -187,7 +187,7 @@ export const PdfView: FC<PdfViewProps> = ({
     return (
         <Flex
             direction="column"
-            style={{ position: 'relative', minWidth: 0 }}
+            style={{ position: 'relative', minWidth: 0, height: '100%' }}
             className="dte-pdf-editor-theme"
             ref={contentContainerRef}
         >

package/src/constants/menu-group.ts

@@ -1,6 +1,5 @@
 import IconBorderColor from '@servicetitan/anvil2/assets/icons/material/round/border_color.svg';
 import IconCalculate from '@servicetitan/anvil2/assets/icons/material/round/calculate.svg';
-import IconFactCheck from '@servicetitan/anvil2/assets/icons/material/round/fact_check.svg';
 import IconPhotoSizeSelectSmall from '@servicetitan/anvil2/assets/icons/material/round/photo_size_select_small.svg';
 import IconCommercial from '@servicetitan/anvil2/assets/icons/st/commercial.svg';
 import IconEstimate from '@servicetitan/anvil2/assets/icons/st/estimate.svg';
@@ -12,6 +11,11 @@ export interface MenuGroupModel {
     key: FieldTypeEnum;
 }
 
+/**
+ * Sidebar tabs. Forms (`FieldTypeEnum.forms`) has no tab of its own: form fields are offered as a
+ * group inside Merge Tags, next to the data model groups. `hideFields: [FieldTypeEnum.forms]` still
+ * hides that group.
+ */
 export const menuGroups: MenuGroupModel[] = [
     { svgIcon: IconEstimate, label: 'Merge Tags', key: FieldTypeEnum.dataModel },
     { svgIcon: IconBorderColor, label: 'E-Sign', key: FieldTypeEnum.eSign },
@@ -30,5 +34,4 @@ export const menuGroups: MenuGroupModel[] = [
         label: 'Generic Fields',
         key: FieldTypeEnum.generic,
     },
-    { svgIcon: IconFactCheck, label: 'Forms', key: FieldTypeEnum.forms },
 ];

package/src/hooks/useFormFields.ts

@@ -10,6 +10,8 @@ import { formFieldInfoToFieldTypeOption } from '../utils';
 
 interface UseFormFieldsResult {
     isLoading: boolean;
+    isLoadingForms: boolean;
+    formsWithFields: FormInfo[];
     formFieldsByFormId: FormFieldsByFormIdI;
     formulaLoadingFormId: null | number;
     formFieldOptions: FieldTypeOption[];
@@ -18,12 +20,15 @@ interface UseFormFieldsResult {
     requestFormFieldsById: (formId: number) => void;
 }
 
+const EMPTY_FORMS: FormInfo[] = [];
+
 export const useFormFields = (
     fields: PdfField[],
     onFormSelect?: (
         formIds: number[],
         sendFormFields: (formFieldsByFormId: FormFieldsByFormIdI) => void,
     ) => void,
+    forms: FormInfo[] = EMPTY_FORMS,
 ): UseFormFieldsResult => {
     const [formFieldsByFormId, setFormFieldsByFormId] = useState<FormFieldsByFormIdI>({});
     const [formulaLoadingFormId, setFormulaLoadingFormId] = useState<number | null>(null);
@@ -40,7 +45,13 @@ export const useFormFields = (
             return;
         }
 
-        const initialFormIds = new Set<number>();
+        /*
+         * Every form is asked for up front, not just the ones a formula already references: a form
+         * with no fields has nothing to offer and is dropped from the list (`formsWithFields`), and
+         * that cannot be decided without its fields. They go out as one batched call, and the reply
+         * is cached, so opening a form afterwards costs nothing.
+         */
+        const initialFormIds = new Set<number>(forms.map(form => form.id));
         fields.forEach(field => {
             if (field.type === FieldTypeEnum.calculated) {
                 if (field?.formula?.tokens.length) {
@@ -90,7 +101,7 @@ export const useFormFields = (
             cancelled = true;
             cancelAnimationFrame(rafId);
         };
-    }, [fields, onFormSelect]);
+    }, [fields, forms, onFormSelect]);
 
     const formFieldOptions = useMemo(() => {
         if (!selectedForm) {
@@ -143,10 +154,21 @@ export const useFormFields = (
         [formFieldsByFormId, onFormSelect],
     );
 
+    /*
+     * A form is offered only once it is known to have something to drag out of it. Until its reply
+     * lands it is neither listed nor counted as empty — `isLoadingForms` stands in for it.
+     */
+    const formsWithFields = useMemo(() => {
+        return forms.filter(form => !!formFieldsByFormId[form.id]?.length);
+    }, [forms, formFieldsByFormId]);
+
     const isLoading = selectedForm != null && formFieldsLoadingFormIds[selectedForm.id];
+    const isLoadingForms = forms.some(form => !!formFieldsLoadingFormIds[form.id]);
 
     return {
         isLoading,
+        isLoadingForms,
+        formsWithFields,
         formFieldsByFormId,
         formulaLoadingFormId,
         formFieldOptions,

package/src/styles/field-type.css

@@ -16,6 +16,11 @@
     box-shadow: 0 0 2px 0 var(--border-color-active);
 }
 
+.dte-field-type-item.--skeleton {
+    cursor: default;
+    pointer-events: none;
+}
+
 .dte-field-type-items-wrapper {
     &.--grid-2 {
         display: grid;

package/src/styles/formula-modal.css

@@ -69,6 +69,18 @@
     gap: 0;
 }
 
+/*
+ * The panels share one scroller, so the list — always the taller of the two — would otherwise keep
+ * driving the scroll height while the fields panel is shown, leaving the fields followed by a
+ * screenful of nothing. Both bounds are needed: the min-content floor above keeps a max-height on
+ * its own from taking effect.
+ */
+.dte-formula-sidebar-slide-track.--detail .dte-formula-sidebar-slide-panel:not(.--form-fields) {
+    min-height: 0;
+    max-height: 0;
+    overflow: hidden;
+}
+
 .dte-formula-sidebar-forms-heading {
     flex-shrink: 0;
 }
@@ -94,6 +106,11 @@
     white-space: nowrap;
 }
 
+.dte-formula-field-list-item.--skeleton {
+    cursor: default;
+    pointer-events: none;
+}
+
 .dte-formula-field-list-item:hover,
 .dte-formula-field-list-item.--highlight {
     color: var(--color-neutral-100, #e8e8e8);

package/src/styles/pdf-canvas.css

@@ -20,7 +20,7 @@
     background-color: var(--bg-color-light, #ffffff);
     border: 1px solid var(--border-color, #e0e0e0);
     border-radius: var(--radius-2, 8px);
-    position: fixed;
+    position: absolute;
     z-index: 2;
 
     &.--vertical {
@@ -28,14 +28,14 @@
     }
 
     &.--right-center {
-        right: 24px;
+        right: 0;
         top: 50%;
-        transform: translateY(-50%);
+        transform: translate(100%, -50%);
     }
 
     &.--right-bottom {
-        right: 24px;
-        bottom: 24px;
+        bottom: 12px;
+        right: 12px;
     }
 }