@verdocs/web-sdk 2.3.86 → 2.3.88

package/dist/cjs/{utils-13f8ed3f.js → utils-e2bd04bf.js}

@@ -181,11 +181,9 @@ const updateDocumentFieldValue = (field) => {
     existingField.setAttribute('disabled', false); // We need this to trigger a re-render
   }
 };
-const renderDocumentField = (field, docPage, fieldOptions) => {
+const renderDocumentField = (field, docPage, fieldOptions, tabIndex = 1) => {
   var _a, _b;
-  // console.log('rdf', field);
   const { disabled = false, editable = false, draggable = false, done = false } = fieldOptions;
-  // console.log('[renderDocumentField]', field, docPage, roleIndex, fieldOptions);
   const controlsDiv = document.getElementById(docPage.containerId + '-controls');
   if (!controlsDiv) {
     console.log('[renderDocumentField] No controls DIV found', docPage.containerId + '-controls', docPage);
@@ -223,7 +221,7 @@ const renderDocumentField = (field, docPage, fieldOptions) => {
         el.setAttribute('disabled', true);
       }
       else {
-        el.setAttribute('tabIndex', 1);
+        el.setAttribute('tabIndex', tabIndex);
       }
       if (editable) {
         el.setAttribute('editable', true);

package/dist/cjs/verdocs-contact-picker_2.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-5463795e.js');
 require('./Types-f89f9116.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-3036bbb7.js');
-const utils = require('./utils-13f8ed3f.js');
+const utils = require('./utils-e2bd04bf.js');
 require('./_commonjsHelpers-0c557e26.js');
 require('./Envelopes-0b9deb2c.js');
 require('./Types-f83b8488.js');

package/dist/cjs/verdocs-envelope-document-page.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-5463795e.js');
 const Envelopes = require('./Envelopes-0b9deb2c.js');
 require('./Types-f89f9116.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-3036bbb7.js');
-const utils = require('./utils-13f8ed3f.js');
+const utils = require('./utils-e2bd04bf.js');
 require('./_commonjsHelpers-0c557e26.js');
 require('./Types-f83b8488.js');
 require('./index-7c19ba1d.js');

package/dist/cjs/verdocs-envelopes-list.cjs.entry.js

@@ -8,7 +8,7 @@ const Permissions = require('./Permissions-1436f847.js');
 require('./Types-f89f9116.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-3036bbb7.js');
 const Primitives = require('./Primitives-a59870a2.js');
-const utils = require('./utils-13f8ed3f.js');
+const utils = require('./utils-e2bd04bf.js');
 const Toast = require('./Toast-06880504.js');
 const errors = require('./errors-0396da3d.js');
 require('./_commonjsHelpers-0c557e26.js');

package/dist/cjs/verdocs-field-attachment_15.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-5463795e.js');
 const Colors = require('./Colors-e809dcc9.js');
 const TemplateRoleStore = require('./TemplateRoleStore-a7f2b586.js');
 const TemplateFieldStore = require('./TemplateFieldStore-3d25fc86.js');
-const utils = require('./utils-13f8ed3f.js');
+const utils = require('./utils-e2bd04bf.js');
 const Icons = require('./Icons-3286d014.js');
 const _commonjsHelpers = require('./_commonjsHelpers-0c557e26.js');
 const Types = require('./Types-f83b8488.js');

package/dist/cjs/verdocs-field-payment.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-5463795e.js');
 const Colors = require('./Colors-e809dcc9.js');
 const TemplateRoleStore = require('./TemplateRoleStore-a7f2b586.js');
 const TemplateFieldStore = require('./TemplateFieldStore-3d25fc86.js');
-const utils = require('./utils-13f8ed3f.js');
+const utils = require('./utils-e2bd04bf.js');
 require('./index-f712049c.js');
 require('./_commonjsHelpers-0c557e26.js');
 require('./Envelopes-0b9deb2c.js');

package/dist/cjs/verdocs-pagination_2.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5463795e.js');
 const Primitives = require('./Primitives-a59870a2.js');
-const utils = require('./utils-13f8ed3f.js');
+const utils = require('./utils-e2bd04bf.js');
 const popper = require('./popper-d7adcfc6.js');
 require('./_commonjsHelpers-0c557e26.js');
 require('./Envelopes-0b9deb2c.js');

package/dist/cjs/verdocs-preview_8.cjs.entry.js

@@ -8,7 +8,7 @@ const VerdocsEndpoint = require('./VerdocsEndpoint-3036bbb7.js');
 const TemplateFieldStore = require('./TemplateFieldStore-3d25fc86.js');
 const TemplateRoleStore = require('./TemplateRoleStore-a7f2b586.js');
 const TemplateStore = require('./TemplateStore-62c90f8c.js');
-const utils = require('./utils-13f8ed3f.js');
+const utils = require('./utils-e2bd04bf.js');
 const errors = require('./errors-0396da3d.js');
 const Envelopes = require('./Envelopes-0b9deb2c.js');
 const Validators = require('./Validators-16e6d7d1.js');

package/dist/cjs/verdocs-settings-api-keys_4.cjs.entry.js

@@ -10,7 +10,7 @@ const Toast = require('./Toast-06880504.js');
 const errors = require('./errors-0396da3d.js');
 const Profiles = require('./Profiles-1a26e4eb.js');
 const index$1 = require('./index-7c19ba1d.js');
-const utils = require('./utils-13f8ed3f.js');
+const utils = require('./utils-e2bd04bf.js');
 require('./_commonjsHelpers-0c557e26.js');
 require('./Envelopes-0b9deb2c.js');
 require('./Types-f83b8488.js');

package/dist/cjs/verdocs-sign.cjs.entry.js

@@ -9,7 +9,7 @@ const Recipients = require('./Recipients-f3d6cf10.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-3036bbb7.js');
 const Validators = require('./Validators-16e6d7d1.js');
 const Primitives = require('./Primitives-a59870a2.js');
-const utils = require('./utils-13f8ed3f.js');
+const utils = require('./utils-e2bd04bf.js');
 const TemplateFieldStore = require('./TemplateFieldStore-3d25fc86.js');
 const Toast = require('./Toast-06880504.js');
 const errors = require('./errors-0396da3d.js');
@@ -300,9 +300,8 @@ const VerdocsSign = class {
         break;
     }
   }
-  isFieldValid(field) {
+  isFieldFilled(field) {
     var _a, _b, _c, _d, _e, _f, _g;
-    const { required = false } = field;
     const { result = '', value = '', base64 = '' } = field.settings || {};
     switch (field.type) {
       case 'textbox':
@@ -312,25 +311,25 @@ const VerdocsSign = class {
           case 'phone':
             return Validators.isValidPhone(result);
           default:
-            return !required || result !== '';
+            return result !== '';
         }
       case 'signature':
       case 'initial':
-        return !required || base64 !== '';
+        return base64 !== '';
       // Timestamp fields get automatically filled when the envelope is submitted.
       case 'timestamp':
         return true;
       case 'textarea':
       case 'date':
       case 'attachment':
-        return !required || result !== '';
+        return result !== '';
       case 'dropdown':
-        return !required || value !== '';
+        return value !== '';
       case 'checkbox_group':
         const checkedCount = (((_c = (_b = field.settings) === null || _b === void 0 ? void 0 : _b.options) === null || _c === void 0 ? void 0 : _c.filter(option => option.checked)) || []).length;
-        return !required || (checkedCount >= (((_d = field.settings) === null || _d === void 0 ? void 0 : _d.minimum_checked) || 0) && checkedCount <= (((_e = field.settings) === null || _e === void 0 ? void 0 : _e.maximum_checked) || 999));
+        return checkedCount >= (((_d = field.settings) === null || _d === void 0 ? void 0 : _d.minimum_checked) || 0) && checkedCount <= (((_e = field.settings) === null || _e === void 0 ? void 0 : _e.maximum_checked) || 999);
       case 'radio_button_group':
-        return !required || (((_g = (_f = field.settings) === null || _f === void 0 ? void 0 : _f.options) === null || _g === void 0 ? void 0 : _g.filter(option => option.selected)) || []).length > 0;
+        return (((_g = (_f = field.settings) === null || _f === void 0 ? void 0 : _f.options) === null || _g === void 0 ? void 0 : _g.filter(option => option.selected)) || []).length > 0;
       // TODO
       // case 'checkbox':
       //   return <verdocs-field-checkbox style={style} value={result || ''} id={id} />;
@@ -340,6 +339,28 @@ const VerdocsSign = class {
         return false;
     }
   }
+  isFieldValid(field) {
+    const { required = false } = field;
+    return !required || this.isFieldFilled(field);
+  }
+  getSortedFillableFields() {
+    const recipientFields = this.getRecipientFields().filter(field => field.type !== 'timestamp');
+    recipientFields.sort((a, b) => {
+      var _a, _b, _c, _d;
+      const aX = ((_a = a.settings) === null || _a === void 0 ? void 0 : _a.x) || 0;
+      const aY = ((_b = a.settings) === null || _b === void 0 ? void 0 : _b.y) || 0;
+      const bX = ((_c = b.settings) === null || _c === void 0 ? void 0 : _c.x) || 0;
+      const bY = ((_d = b.settings) === null || _d === void 0 ? void 0 : _d.y) || 0;
+      // NOTE: Logic looks a little strange X vs Y. It's because we go top down,
+      // left to right. But Y coordinates are inverted in PDFs. The reason for
+      // the division is because no human makes perfect templates and frequently
+      // two fields on the "same line" will be slightly offset vertically.
+      const divaY = Math.floor(aY / 5);
+      const divbY = Math.floor(bY / 5);
+      return divbY !== divaY ? divbY - divaY : aX - bX;
+    });
+    return recipientFields;
+  }
   async handleNext() {
     var _a, _b;
     if (this.nextSubmits) {
@@ -365,35 +386,39 @@ const VerdocsSign = class {
       this.submitting = false;
       return;
     }
-    // Find and focus the next incomplete required field (that is fillable)
-    const requiredFields = this.getRecipientFields()
-      .filter(field => field.required)
-      .filter(field => field.type !== 'timestamp');
-    requiredFields.sort((a, b) => {
+    // Find and focus the next incomplete` field (that is fillable)
+    const emptyFields = this.getSortedFillableFields().filter(field => !this.isFieldFilled(field));
+    emptyFields.sort((a, b) => {
       var _a, _b, _c, _d;
       const aX = ((_a = a.settings) === null || _a === void 0 ? void 0 : _a.x) || 0;
       const aY = ((_b = a.settings) === null || _b === void 0 ? void 0 : _b.y) || 0;
       const bX = ((_c = b.settings) === null || _c === void 0 ? void 0 : _c.x) || 0;
       const bY = ((_d = b.settings) === null || _d === void 0 ? void 0 : _d.y) || 0;
-      return bY !== aY ? bY - aY : bX - aX;
+      // NOTE: Logic looks a little strange X vs Y. It's because we go top down,
+      // left to right. But Y coordinates are inverted in PDFs. The reason for
+      // the division is because no human makes perfect templates and frequently
+      // two fields on the "same line" will be slightly offset vertically.
+      const divaY = Math.floor(aY / 5);
+      const divbY = Math.floor(bY / 5);
+      return divbY !== divaY ? divbY - divaY : aX - bX;
     });
-    const focusedIndex = requiredFields.findIndex(field => field.name === this.focusedField);
+    const focusedIndex = emptyFields.findIndex(field => field.name === this.focusedField);
     let nextFocusedIndex = focusedIndex + 1;
-    if (nextFocusedIndex >= requiredFields.length) {
+    if (nextFocusedIndex >= emptyFields.length) {
       nextFocusedIndex = 0;
     }
-    let nextRequiredField = requiredFields[nextFocusedIndex];
+    let nextRequiredField = emptyFields[nextFocusedIndex];
     // Skip signature and initial fields that are already filled in. We have to count our "skips" just in case, to avoid infinite loops.
     let skips = 0;
-    if (skips < requiredFields.length && ['signature', 'initial'].includes(nextRequiredField.type) && ((_b = nextRequiredField.settings) === null || _b === void 0 ? void 0 : _b.result) === 'signed') {
+    if (skips < emptyFields.length && ['signature', 'initial'].includes(nextRequiredField.type) && ((_b = nextRequiredField.settings) === null || _b === void 0 ? void 0 : _b.result) === 'signed') {
       skips++;
       nextFocusedIndex++;
-      if (nextFocusedIndex >= requiredFields.length) {
+      if (nextFocusedIndex >= emptyFields.length) {
         nextFocusedIndex = 0;
       }
-      nextRequiredField = requiredFields[nextFocusedIndex];
+      nextRequiredField = emptyFields[nextFocusedIndex];
     }
-    if (skips >= requiredFields.length) {
+    if (skips >= emptyFields.length) {
       nextRequiredField = null;
     }
     if (nextRequiredField) {
@@ -457,22 +482,19 @@ const VerdocsSign = class {
   }
   handlePageRendered(e) {
     const pageInfo = e.detail;
-    // const roleIndex = getRoleIndex(this.roleStore, this.recipient.role_name);
-    // console.log(
-    //   'hpr',
-    //   this.recipient,
-    //   this.envelope.fields.filter(field => field.recipient_role === this.recipient.role_name),
-    // );
-    const recipientFields = this.getRecipientFields().filter(field => field.page === pageInfo.pageNumber);
-    // console.log('[SIGN] Page rendered, updating fields', {pageInfo, roleIndex, recipientFields});
+    // NOTE: We don't filter on pageNumber here because we need the position in the
+    // entire list to set the tabIndex.
+    const recipientFields = this.getSortedFillableFields();
+    // this.getRecipientFields().filter(field => field.page === pageInfo.pageNumber);
     // First render the fields for the signer
     // Also show field placeholders for other signers who have yet to act
     // In template list in Beta, show second date being sorted on
     // Sign top to bottom left to right
-    recipientFields
-      .filter(field => field.page === pageInfo.pageNumber)
-      .forEach(field => {
-      const el = utils.renderDocumentField(field, pageInfo, { disabled: false, editable: false, draggable: false, done: this.isDone });
+    recipientFields.forEach((field, tabIndex) => {
+      if (field.page !== pageInfo.pageNumber) {
+        return;
+      }
+      const el = utils.renderDocumentField(field, pageInfo, { disabled: false, editable: false, draggable: false, done: this.isDone }, tabIndex);
       if (!el) {
         return;
       }

package/dist/cjs/verdocs-template-fields_4.cjs.entry.js

@@ -9,7 +9,7 @@ const VerdocsEndpoint = require('./VerdocsEndpoint-3036bbb7.js');
 const Fields = require('./Fields-705a2168.js');
 const Primitives = require('./Primitives-a59870a2.js');
 const TemplateFieldStore = require('./TemplateFieldStore-3d25fc86.js');
-const utils = require('./utils-13f8ed3f.js');
+const utils = require('./utils-e2bd04bf.js');
 const TemplateRoleStore = require('./TemplateRoleStore-a7f2b586.js');
 const TemplateStore = require('./TemplateStore-62c90f8c.js');
 const errors = require('./errors-0396da3d.js');

package/dist/cjs/verdocs-view.cjs.entry.js

@@ -8,7 +8,7 @@ const Permissions = require('./Permissions-1436f847.js');
 require('./Types-f89f9116.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-3036bbb7.js');
 const Primitives = require('./Primitives-a59870a2.js');
-const utils = require('./utils-13f8ed3f.js');
+const utils = require('./utils-e2bd04bf.js');
 const errors = require('./errors-0396da3d.js');
 require('./_commonjsHelpers-0c557e26.js');
 require('./Types-f83b8488.js');

package/dist/collection/components/embeds/verdocs-sign/verdocs-sign.js

@@ -277,9 +277,8 @@ export class VerdocsSign {
         break;
     }
   }
-  isFieldValid(field) {
+  isFieldFilled(field) {
     var _a, _b, _c, _d, _e, _f, _g;
-    const { required = false } = field;
     const { result = '', value = '', base64 = '' } = field.settings || {};
     switch (field.type) {
       case 'textbox':
@@ -289,25 +288,25 @@ export class VerdocsSign {
           case 'phone':
             return isValidPhone(result);
           default:
-            return !required || result !== '';
+            return result !== '';
         }
       case 'signature':
       case 'initial':
-        return !required || base64 !== '';
+        return base64 !== '';
       // Timestamp fields get automatically filled when the envelope is submitted.
       case 'timestamp':
         return true;
       case 'textarea':
       case 'date':
       case 'attachment':
-        return !required || result !== '';
+        return result !== '';
       case 'dropdown':
-        return !required || value !== '';
+        return value !== '';
       case 'checkbox_group':
         const checkedCount = (((_c = (_b = field.settings) === null || _b === void 0 ? void 0 : _b.options) === null || _c === void 0 ? void 0 : _c.filter(option => option.checked)) || []).length;
-        return !required || (checkedCount >= (((_d = field.settings) === null || _d === void 0 ? void 0 : _d.minimum_checked) || 0) && checkedCount <= (((_e = field.settings) === null || _e === void 0 ? void 0 : _e.maximum_checked) || 999));
+        return checkedCount >= (((_d = field.settings) === null || _d === void 0 ? void 0 : _d.minimum_checked) || 0) && checkedCount <= (((_e = field.settings) === null || _e === void 0 ? void 0 : _e.maximum_checked) || 999);
       case 'radio_button_group':
-        return !required || (((_g = (_f = field.settings) === null || _f === void 0 ? void 0 : _f.options) === null || _g === void 0 ? void 0 : _g.filter(option => option.selected)) || []).length > 0;
+        return (((_g = (_f = field.settings) === null || _f === void 0 ? void 0 : _f.options) === null || _g === void 0 ? void 0 : _g.filter(option => option.selected)) || []).length > 0;
       // TODO
       // case 'checkbox':
       //   return <verdocs-field-checkbox style={style} value={result || ''} id={id} />;
@@ -317,6 +316,28 @@ export class VerdocsSign {
         return false;
     }
   }
+  isFieldValid(field) {
+    const { required = false } = field;
+    return !required || this.isFieldFilled(field);
+  }
+  getSortedFillableFields() {
+    const recipientFields = this.getRecipientFields().filter(field => field.type !== 'timestamp');
+    recipientFields.sort((a, b) => {
+      var _a, _b, _c, _d;
+      const aX = ((_a = a.settings) === null || _a === void 0 ? void 0 : _a.x) || 0;
+      const aY = ((_b = a.settings) === null || _b === void 0 ? void 0 : _b.y) || 0;
+      const bX = ((_c = b.settings) === null || _c === void 0 ? void 0 : _c.x) || 0;
+      const bY = ((_d = b.settings) === null || _d === void 0 ? void 0 : _d.y) || 0;
+      // NOTE: Logic looks a little strange X vs Y. It's because we go top down,
+      // left to right. But Y coordinates are inverted in PDFs. The reason for
+      // the division is because no human makes perfect templates and frequently
+      // two fields on the "same line" will be slightly offset vertically.
+      const divaY = Math.floor(aY / 5);
+      const divbY = Math.floor(bY / 5);
+      return divbY !== divaY ? divbY - divaY : aX - bX;
+    });
+    return recipientFields;
+  }
   async handleNext() {
     var _a, _b;
     if (this.nextSubmits) {
@@ -342,35 +363,39 @@ export class VerdocsSign {
       this.submitting = false;
       return;
     }
-    // Find and focus the next incomplete required field (that is fillable)
-    const requiredFields = this.getRecipientFields()
-      .filter(field => field.required)
-      .filter(field => field.type !== 'timestamp');
-    requiredFields.sort((a, b) => {
+    // Find and focus the next incomplete` field (that is fillable)
+    const emptyFields = this.getSortedFillableFields().filter(field => !this.isFieldFilled(field));
+    emptyFields.sort((a, b) => {
       var _a, _b, _c, _d;
       const aX = ((_a = a.settings) === null || _a === void 0 ? void 0 : _a.x) || 0;
       const aY = ((_b = a.settings) === null || _b === void 0 ? void 0 : _b.y) || 0;
       const bX = ((_c = b.settings) === null || _c === void 0 ? void 0 : _c.x) || 0;
       const bY = ((_d = b.settings) === null || _d === void 0 ? void 0 : _d.y) || 0;
-      return bY !== aY ? bY - aY : bX - aX;
+      // NOTE: Logic looks a little strange X vs Y. It's because we go top down,
+      // left to right. But Y coordinates are inverted in PDFs. The reason for
+      // the division is because no human makes perfect templates and frequently
+      // two fields on the "same line" will be slightly offset vertically.
+      const divaY = Math.floor(aY / 5);
+      const divbY = Math.floor(bY / 5);
+      return divbY !== divaY ? divbY - divaY : aX - bX;
     });
-    const focusedIndex = requiredFields.findIndex(field => field.name === this.focusedField);
+    const focusedIndex = emptyFields.findIndex(field => field.name === this.focusedField);
     let nextFocusedIndex = focusedIndex + 1;
-    if (nextFocusedIndex >= requiredFields.length) {
+    if (nextFocusedIndex >= emptyFields.length) {
       nextFocusedIndex = 0;
     }
-    let nextRequiredField = requiredFields[nextFocusedIndex];
+    let nextRequiredField = emptyFields[nextFocusedIndex];
     // Skip signature and initial fields that are already filled in. We have to count our "skips" just in case, to avoid infinite loops.
     let skips = 0;
-    if (skips < requiredFields.length && ['signature', 'initial'].includes(nextRequiredField.type) && ((_b = nextRequiredField.settings) === null || _b === void 0 ? void 0 : _b.result) === 'signed') {
+    if (skips < emptyFields.length && ['signature', 'initial'].includes(nextRequiredField.type) && ((_b = nextRequiredField.settings) === null || _b === void 0 ? void 0 : _b.result) === 'signed') {
       skips++;
       nextFocusedIndex++;
-      if (nextFocusedIndex >= requiredFields.length) {
+      if (nextFocusedIndex >= emptyFields.length) {
         nextFocusedIndex = 0;
       }
-      nextRequiredField = requiredFields[nextFocusedIndex];
+      nextRequiredField = emptyFields[nextFocusedIndex];
     }
-    if (skips >= requiredFields.length) {
+    if (skips >= emptyFields.length) {
       nextRequiredField = null;
     }
     if (nextRequiredField) {
@@ -434,22 +459,19 @@ export class VerdocsSign {
   }
   handlePageRendered(e) {
     const pageInfo = e.detail;
-    // const roleIndex = getRoleIndex(this.roleStore, this.recipient.role_name);
-    // console.log(
-    //   'hpr',
-    //   this.recipient,
-    //   this.envelope.fields.filter(field => field.recipient_role === this.recipient.role_name),
-    // );
-    const recipientFields = this.getRecipientFields().filter(field => field.page === pageInfo.pageNumber);
-    // console.log('[SIGN] Page rendered, updating fields', {pageInfo, roleIndex, recipientFields});
+    // NOTE: We don't filter on pageNumber here because we need the position in the
+    // entire list to set the tabIndex.
+    const recipientFields = this.getSortedFillableFields();
+    // this.getRecipientFields().filter(field => field.page === pageInfo.pageNumber);
     // First render the fields for the signer
     // Also show field placeholders for other signers who have yet to act
     // In template list in Beta, show second date being sorted on
     // Sign top to bottom left to right
-    recipientFields
-      .filter(field => field.page === pageInfo.pageNumber)
-      .forEach(field => {
-      const el = renderDocumentField(field, pageInfo, { disabled: false, editable: false, draggable: false, done: this.isDone });
+    recipientFields.forEach((field, tabIndex) => {
+      if (field.page !== pageInfo.pageNumber) {
+        return;
+      }
+      const el = renderDocumentField(field, pageInfo, { disabled: false, editable: false, draggable: false, done: this.isDone }, tabIndex);
       if (!el) {
         return;
       }

package/dist/collection/components/embeds/verdocs-sign/verdocs-sign.stories.js

@@ -3,9 +3,9 @@ export default {
   title: 'Embeds/Sign',
   component: 'verdocs-sign',
   args: {
-    envelopeId: '',
-    roleId: '',
-    inviteCode: '',
+    envelopeId: 'f2de9204-c56f-4fe7-9348-0736bc14bbcd',
+    roleId: 'Recipient 1',
+    inviteCode: '817ce4e62d747611388276555afc0016',
   },
   argTypes: {
     envelopeId: {

package/dist/collection/utils/utils.js

@@ -116,11 +116,9 @@ export const updateDocumentFieldValue = (field) => {
     existingField.setAttribute('disabled', false); // We need this to trigger a re-render
   }
 };
-export const renderDocumentField = (field, docPage, fieldOptions) => {
+export const renderDocumentField = (field, docPage, fieldOptions, tabIndex = 1) => {
   var _a, _b;
-  // console.log('rdf', field);
   const { disabled = false, editable = false, draggable = false, done = false } = fieldOptions;
-  // console.log('[renderDocumentField]', field, docPage, roleIndex, fieldOptions);
   const controlsDiv = document.getElementById(docPage.containerId + '-controls');
   if (!controlsDiv) {
     console.log('[renderDocumentField] No controls DIV found', docPage.containerId + '-controls', docPage);
@@ -158,7 +156,7 @@ export const renderDocumentField = (field, docPage, fieldOptions) => {
         el.setAttribute('disabled', true);
       }
       else {
-        el.setAttribute('tabIndex', 1);
+        el.setAttribute('tabIndex', tabIndex);
       }
       if (editable) {
         el.setAttribute('editable', true);

package/dist/components/utils.js

@@ -137,11 +137,9 @@ const updateDocumentFieldValue = (field) => {
     existingField.setAttribute('disabled', false); // We need this to trigger a re-render
   }
 };
-const renderDocumentField = (field, docPage, fieldOptions) => {
+const renderDocumentField = (field, docPage, fieldOptions, tabIndex = 1) => {
   var _a, _b;
-  // console.log('rdf', field);
   const { disabled = false, editable = false, draggable = false, done = false } = fieldOptions;
-  // console.log('[renderDocumentField]', field, docPage, roleIndex, fieldOptions);
   const controlsDiv = document.getElementById(docPage.containerId + '-controls');
   if (!controlsDiv) {
     console.log('[renderDocumentField] No controls DIV found', docPage.containerId + '-controls', docPage);
@@ -179,7 +177,7 @@ const renderDocumentField = (field, docPage, fieldOptions) => {
         el.setAttribute('disabled', true);
       }
       else {
-        el.setAttribute('tabIndex', 1);
+        el.setAttribute('tabIndex', tabIndex);
       }
       if (editable) {
         el.setAttribute('editable', true);