@servicetitan/dte-pdf-editor 1.92.4 → 1.93.0

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

@@ -1,23 +1,32 @@
 import { Button, Divider, Flex, Icon, Text } from '@servicetitan/anvil2';
-import IconNavigateDown from '@servicetitan/anvil2/assets/icons/material/round/arrow_downward.svg';
-import IconNavigateUp from '@servicetitan/anvil2/assets/icons/material/round/arrow_upward.svg';
-import IconNavigateBefore from '@servicetitan/anvil2/assets/icons/material/round/navigate_before.svg';
-import IconNavigateNext from '@servicetitan/anvil2/assets/icons/material/round/navigate_next.svg';
 import IconZoomIn from '@servicetitan/anvil2/assets/icons/material/round/zoom_in.svg';
 import IconZoomOut from '@servicetitan/anvil2/assets/icons/material/round/zoom_out.svg';
 import { FC } from 'react';
 import { ZOOM_MAX, ZOOM_MIN } from '../../constants';
 
-interface ZoomControlsProps {
+export interface ZoomControlsProps {
     zoom: number;
+    vertical?: boolean;
+    position?: 'right-center' | 'right-bottom';
     onZoomIn(): void;
     onZoomOut(): void;
     onResetZoom(): void;
 }
 
-const ZoomControls: FC<ZoomControlsProps> = ({ onResetZoom, onZoomIn, onZoomOut, zoom }) => {
+export const ZoomControls: FC<ZoomControlsProps> = ({
+    onResetZoom,
+    onZoomIn,
+    onZoomOut,
+    position = 'right-center',
+    vertical,
+    zoom,
+}) => {
     return (
-        <Flex alignItems="center" gap={1} className="dte-pdf-zoom-controls">
+        <Flex
+            alignItems="center"
+            gap={1}
+            className={`dte-pdf-zoom-controls ${vertical ? '--vertical' : '--horizontal'} --${position}`}
+        >
             <Button
                 size="xsmall"
                 appearance="ghost"
@@ -28,7 +37,7 @@ const ZoomControls: FC<ZoomControlsProps> = ({ onResetZoom, onZoomIn, onZoomOut,
             >
                 <Icon svg={IconZoomOut} size="medium" />
             </Button>
-
+            <Divider vertical={!vertical} style={vertical ? { width: 20 } : { height: 20 }} />
             <Text
                 variant="body"
                 size="small"
@@ -38,7 +47,7 @@ const ZoomControls: FC<ZoomControlsProps> = ({ onResetZoom, onZoomIn, onZoomOut,
             >
                 {Math.round(zoom * 100)}%
             </Text>
-
+            <Divider vertical={!vertical} style={vertical ? { width: 20 } : { height: 20 }} />
             <Button
                 size="xsmall"
                 appearance="ghost"
@@ -54,130 +63,23 @@ const ZoomControls: FC<ZoomControlsProps> = ({ onResetZoom, onZoomIn, onZoomOut,
 };
 
 interface FieldNavigationControlsProps {
-    disabledNext: boolean;
-    disabledOnFirstField: boolean;
-    disabledOnLastField: boolean;
-    disabledPrev: boolean;
+    isStarted: boolean;
+    disabled?: boolean;
     onNextField(): void;
-    onPrevField(): void;
-    onFirstField(): void;
-    onLastField(): void;
 }
 
-const FieldNavigationControls: FC<FieldNavigationControlsProps> = ({
-    disabledNext,
-    disabledOnFirstField,
-    disabledOnLastField,
-    disabledPrev,
-    onFirstField,
-    onLastField,
+export const FieldNavigationControls: FC<FieldNavigationControlsProps> = ({
+    disabled,
+    isStarted,
     onNextField,
-    onPrevField,
 }) => {
     return (
-        <Flex alignItems="center" gap="2" className="dte-pdf-field-navigation-controls">
-            <Button
-                size="xsmall"
-                appearance="ghost"
-                onClick={onPrevField}
-                disabled={disabledPrev}
-                aria-label="Go to previous field"
-                title="Go to previous field"
-            >
-                <Icon svg={IconNavigateBefore} size="medium" />
-            </Button>
-            <Button
-                size="xsmall"
-                appearance="ghost"
-                onClick={onNextField}
-                disabled={disabledNext}
-                aria-label="Go to next field"
-                title="Go to next field"
-            >
-                <Icon svg={IconNavigateNext} size="medium" />
-            </Button>
-            <Divider vertical style={{ height: '100%' }} />
-            <Button
-                size="xsmall"
-                appearance="ghost"
-                onClick={onFirstField}
-                disabled={disabledOnFirstField}
-                aria-label="Go to first field"
-                title="Go to first field"
-            >
-                <Icon svg={IconNavigateUp} size="medium" />
-            </Button>
-            <Button
-                size="xsmall"
-                appearance="ghost"
-                onClick={onLastField}
-                disabled={disabledOnLastField}
-                aria-label="Go to last field"
-                title="Go to last field"
-            >
-                <Icon svg={IconNavigateDown} size="medium" />
-            </Button>
-        </Flex>
-    );
-};
-
-export interface CanvasControlsProps extends ZoomControlsProps {
-    /** Show the zoom in/out/reset controls. */
-    zoomable?: boolean;
-    /** Show the previous/next fillable-field navigation controls. */
-    enableInputNavigation?: boolean;
-    disabledNext?: boolean;
-    disabledPrev?: boolean;
-    disabledOnFirstField?: boolean;
-    disabledOnLastField?: boolean;
-    onNextField?(): void;
-    onPrevField?(): void;
-    onFirstField?(): void;
-    onLastField?(): void;
-}
-
-export const CanvasControls: FC<CanvasControlsProps> = ({
-    disabledNext = false,
-    disabledOnFirstField = false,
-    disabledOnLastField = false,
-    disabledPrev = false,
-    enableInputNavigation = false,
-    onFirstField = () => {},
-    onLastField = () => {},
-    onNextField = () => {},
-    onPrevField = () => {},
-    onResetZoom,
-    onZoomIn,
-    onZoomOut,
-    zoom,
-    zoomable = false,
-}) => {
-    if (!zoomable && !enableInputNavigation) {
-        return null;
-    }
-
-    return (
-        <Flex justifyContent="center" gap={2} className="dte-pdf-canvas-controls">
-            {zoomable && (
-                <ZoomControls
-                    zoom={zoom}
-                    onZoomIn={onZoomIn}
-                    onZoomOut={onZoomOut}
-                    onResetZoom={onResetZoom}
-                />
-            )}
-            {enableInputNavigation && (
-                <FieldNavigationControls
-                    disabledOnFirstField={disabledOnFirstField}
-                    disabledOnLastField={disabledOnLastField}
-                    onFirstField={onFirstField}
-                    onLastField={onLastField}
-                    disabledNext={disabledNext}
-                    disabledPrev={disabledPrev}
-                    onNextField={onNextField}
-                    onPrevField={onPrevField}
-                />
-            )}
-        </Flex>
+        <div
+            className={`dte-pdf-field-next-controls-button ${disabled && '--disabled'} ${isStarted && '--started'}`}
+            role="button"
+            onClick={onNextField}
+        >
+            <span>{isStarted ? 'Next' : 'Start'}</span>
+        </div>
     );
 };

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

@@ -10,13 +10,13 @@ import {
     useState,
 } from 'react';
 import { BASE_PAGE_WIDTH } from '../../constants';
-import { useZoom } from '../../hooks';
+import { usePinchZoom, useZoom } from '../../hooks';
 import { type PdfField } from '../../interface/types';
 import { PdfFieldsOverlay } from '../pdf-fields-overlay/pdf-fields-overlay';
-import { CanvasControls } from './canvas-controls';
+import { ZoomControls, ZoomControlsProps } from './canvas-controls';
 import { PdfDocumentRenderer } from './pdf-document-renderer';
 
-interface PdfCanvasProps {
+export interface PdfCanvasProps {
     pdfUrl: string;
     zoomable: boolean;
     errorPlaceholder?: ReactNode;
@@ -29,6 +29,10 @@ interface PdfCanvasProps {
     pdfWrapperRef: RefObject<HTMLDivElement>;
     recipientsColors: Record<string, string>;
     fieldWrapperClassNames?: string;
+    zoomProps?: {
+        vertical: ZoomControlsProps['vertical'];
+        position: ZoomControlsProps['position'];
+    };
     onLoadSuccess?(pageNums: number): void;
     handleAddNewField(field: PdfField): void;
     onDragOver(e: DragEvent<HTMLDivElement>): void;
@@ -61,10 +65,17 @@ export const PdfCanvas: FC<PdfCanvasProps> = ({
     pdfWrapperRef,
     recipientsColors,
     selectedField,
+    zoomProps,
     zoomable,
 }) => {
     const [isPdfLoaded, setIsPdfLoaded] = useState<boolean>(false);
-    const { resetZoom, zoom, zoomIn, zoomOut } = useZoom();
+    const { resetZoom, setZoomValue, zoom, zoomByFactor, zoomIn, zoomOut } = useZoom();
+    usePinchZoom(pdfContainerRef, {
+        enabled: zoomable,
+        setZoomValue,
+        zoom,
+        zoomByFactor,
+    });
 
     const onDocumentLoadSuccess = (pageNum: number) => {
         setIsPdfLoaded(true);
@@ -77,10 +88,9 @@ export const PdfCanvas: FC<PdfCanvasProps> = ({
 
     return (
         <Fragment>
-            {isPdfLoaded && (
-                <CanvasControls
-                    enableInputNavigation={false}
-                    zoomable={zoomable}
+            {isPdfLoaded && zoomable && (
+                <ZoomControls
+                    {...zoomProps}
                     zoom={zoom}
                     onZoomIn={zoomIn}
                     onZoomOut={zoomOut}

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

@@ -12,7 +12,7 @@ import {
 import { extractGroupedFieldsFromDataModel, mapColorsToRecipients } from '../../utils';
 import { FieldConfigPanelOverlay } from '../field-config-panel/field-config-panel-overlay';
 import { FieldSidebar } from '../field-sidebar/field-sidebar';
-import { PdfCanvas } from '../pdf-canvas/pdf-canvas';
+import { PdfCanvas, PdfCanvasProps } from '../pdf-canvas/pdf-canvas';
 
 import '../../styles/index.css';
 
@@ -29,6 +29,7 @@ export interface PdfEditorProps {
     hideFields?: FieldTypeEnum[];
     hideConditionalLogic?: boolean;
     forms?: FormInfo[];
+    zoomProps?: PdfCanvasProps['zoomProps'];
     onFormSelect?: (
         formIds: number[],
         sendFormFields: (formFieldsByFormId: FormFieldsByFormIdI) => void,
@@ -52,6 +53,7 @@ export const PdfEditor: FC<PdfEditorProps> = ({
     onLoadSuccess,
     pdfUrl,
     recipients = [],
+    zoomProps,
     zoomable = true,
 }) => {
     const pdfContainerRef = useRef<HTMLDivElement>(null);
@@ -122,6 +124,7 @@ export const PdfEditor: FC<PdfEditorProps> = ({
                 className="dte-pdf-editor-content-container skeleton-item"
             >
                 <PdfCanvas
+                    zoomProps={zoomProps}
                     zoomable={zoomable}
                     pdfUrl={pdfUrl}
                     fields={fields}
@@ -129,7 +132,7 @@ export const PdfEditor: FC<PdfEditorProps> = ({
                     errors={errors}
                     onLoadSuccess={onLoadSuccess}
                     recipientsColors={recipientsColors}
-                    fieldWrapperClassNames="--edit-mode"
+                    fieldWrapperClassNames="--edit"
                     selectedField={pdfFieldSelection.selectedField}
                     pdfContainerRef={pdfContainerRef}
                     pdfWrapperRef={pdfWrapperRef}

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

@@ -49,7 +49,7 @@ export const PdfFieldsOverlay: FC<PdfFieldsOverlayProps> = ({
                     field={field}
                     fieldWrapperClassNames={fieldWrapperClassNames}
                     onFieldConfigChange={onFieldConfigChange}
-                    error={errors[field.id]}
+                    error={errors[field.id] ?? errors[field.path ?? '']}
                     handleAddNewField={handleAddNewField}
                     onFieldMove={onFieldMove}
                     onFieldClick={onFieldClick}
@@ -57,7 +57,7 @@ export const PdfFieldsOverlay: FC<PdfFieldsOverlayProps> = ({
                     onFieldResize={onFieldResize}
                     isSelected={selectedField?.id === field.id}
                     recipientsColors={recipientsColors}
-                    isSameGroup={selectedField?.path === field.path}
+                    isSameGroup={!!selectedField?.path && selectedField.path === field.path}
                     pathToLabel={pathToLabel}
                     zoom={zoom}
                 />

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

@@ -1,3 +1,4 @@
+import { Flex } from '@servicetitan/anvil2';
 import { FC } from 'react';
 import { type PdfField } from '../../interface/types';
 
@@ -7,11 +8,12 @@ interface PdfOverlayFieldESignProps {
 
 export const PdfOverlayFieldESign: FC<PdfOverlayFieldESignProps> = ({ field }) => {
     return (
-        <span>
-            {field.label} {field.required ? '*' : ''}
-            <div className="dte-pdf-field-value" style={{ fontSize: '8px' }}>
-                {field.path}
-            </div>
-        </span>
+        <Flex
+            alignItems="center"
+            className="dte-pdf-field-value"
+            style={{ fontSize: '8px', height: '100%' }}
+        >
+            {field.path} {field.required ? '*' : ''}
+        </Flex>
     );
 };

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

@@ -1,8 +1,14 @@
+import { Icon } from '@servicetitan/anvil2';
 import { FC, MouseEvent, RefObject } from 'react';
 import { DISABLE_FIELD_RESIZE } from '../../constants';
 import { useFieldDrag, useFieldResize } from '../../hooks';
 import { FieldTypeEnum, type PdfField } from '../../interface/types';
-import { getFieldBackgroundColor, getFieldBoundsStyle, getPagePosition } from '../../utils';
+import {
+    getFieldBoundsStyle,
+    getFieldColor,
+    getFieldTypeOption,
+    getPagePosition,
+} from '../../utils';
 import { PdfOverlayFieldCalculated } from './pdf-overlay-field-calculated';
 import { PdfOverlayFieldDataModel } from './pdf-overlay-field-data-model';
 import { PdfOverlayFieldESign } from './pdf-overlay-field-e-sign';
@@ -68,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',
@@ -85,6 +91,8 @@ export const PdfOverlayField: FC<PdfOverlayFieldProps> = ({
         .filter(Boolean)
         .join(' ');
 
+    const fieldTypeOption = getFieldTypeOption(field);
+
     return (
         <div
             title={field.description}
@@ -95,7 +103,18 @@ 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">
+                    {fieldTypeOption.icon && (
+                        <Icon svg={fieldTypeOption.icon} size="small" color="inherit" />
+                    )}
+                    {fieldTypeOption.label}
+                    {!field.required && <span>(Optional)</span>}
+                </div>
+            )}
             {field.type === FieldTypeEnum.calculated && (
                 <PdfOverlayFieldCalculated field={field} pathToLabel={pathToLabel} />
             )}

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

@@ -1,3 +1,4 @@
+import { Flex } from '@servicetitan/anvil2';
 import { FC } from 'react';
 import { type PdfField } from '../../interface/types';
 
@@ -7,11 +8,12 @@ interface PdfViewESignProps {
 
 export const PdfViewESign: FC<PdfViewESignProps> = ({ field }) => {
     return (
-        <span>
-            {field.label} {field.required ? '*' : ''}
-            <div className="dte-pdf-field-value" style={{ fontSize: '8px' }}>
-                {field.path}
-            </div>
-        </span>
+        <Flex
+            alignItems="center"
+            className="dte-pdf-field-value"
+            style={{ fontSize: '8px', height: '100%' }}
+        >
+            {field.path} {field.required ? '*' : ''}
+        </Flex>
     );
 };

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

@@ -1,9 +1,11 @@
-import { FC, Fragment, PropsWithChildren, RefObject } from 'react';
+import { Icon } from '@servicetitan/anvil2';
+import { FC, PropsWithChildren, RefObject } from 'react';
 import { type DataModelValues, type PdfField } from '../../interface/types';
 import {
     evaluateDisplayCondition,
-    getFieldBackgroundColor,
     getFieldBoundsStyle,
+    getFieldColor,
+    getFieldTypeOption,
     getPagePosition,
 } from '../../utils';
 
@@ -35,36 +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' : undefined,
-                    zoom,
-                })}
-                onFocus={() => onFocus?.(field.id)}
-            >
-                {children}
-            </div>
-            {error && (
-                <span
-                    style={{
-                        color: 'red',
-                        top: pagePos.top + (field.y + field.height) * zoom + 8,
-                        left: pagePos.left + field.x * zoom,
-                        minWidth: '100px',
-                        position: 'absolute',
-                    }}
-                >
-                    {error}
-                </span>
+        <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">
+                    {fieldTypeOption.icon && (
+                        <Icon svg={fieldTypeOption.icon} size="small" color="inherit" />
+                    )}
+                    {fieldTypeOption.label}
+                    {!field.required && <span>(Optional)</span>}
+                </div>
             )}
-        </Fragment>
+            <div style={{ width: 'inherit', height: 'inherit' }}>{children}</div>
+            {error && <span className="dte-pdf-field-error-message">{error}</span>}
+        </div>
     );
 };