@abgov/react-components 6.6.1 → 6.7.0-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/index.js CHANGED
@@ -3886,6 +3886,19 @@ const GoabFilterChip = ({
3886
3886
  }
3887
3887
  );
3888
3888
  };
3889
+ function dispatch(el, eventName, detail, opts) {
3890
+ if (!el) {
3891
+ console.error("dispatch element is null");
3892
+ return;
3893
+ }
3894
+ el.dispatchEvent(
3895
+ new CustomEvent(eventName, {
3896
+ composed: true,
3897
+ bubbles: opts == null ? void 0 : opts.bubbles,
3898
+ detail
3899
+ })
3900
+ );
3901
+ }
3889
3902
  function relay(el, eventName, data, opts) {
3890
3903
  if (!el) {
3891
3904
  console.error("dispatch element is null");
@@ -3908,6 +3921,7 @@ class PublicFormController {
3908
3921
  __publicField(this, "state");
3909
3922
  __publicField(this, "_formData");
3910
3923
  __publicField(this, "_formRef");
3924
+ __publicField(this, "_isCompleting", false);
3911
3925
  this.type = type;
3912
3926
  }
3913
3927
  // Obtain reference to the form element
@@ -4091,6 +4105,70 @@ class PublicFormController {
4091
4105
  operation: "remove"
4092
4106
  });
4093
4107
  }
4108
+ /**
4109
+ * Completes the form and triggers the onComplete callback.
4110
+ * This method should be used when you want to complete a form without navigating to a summary page.
4111
+ *
4112
+ * @important Developers must validate the form before calling this method.
4113
+ *
4114
+ * @example
4115
+ * // Validate first, then complete
4116
+ * const [isValid] = this.validate(e, "firstName", [
4117
+ * requiredValidator("First name is required.")
4118
+ * ]);
4119
+ * if (isValid) {
4120
+ * this.complete();
4121
+ * }
4122
+ * @returns void
4123
+ */
4124
+ complete() {
4125
+ if (!this._formRef) {
4126
+ console.error("complete: form ref is not set");
4127
+ return;
4128
+ }
4129
+ if (this._isCompleting) {
4130
+ console.warn("complete: completion already in progress");
4131
+ return;
4132
+ }
4133
+ this._isCompleting = true;
4134
+ relay(this._formRef, "fieldset::submit", null, { bubbles: true });
4135
+ this._isCompleting = false;
4136
+ }
4137
+ /**
4138
+ * Completes a subform and returns control to the parent form.
4139
+ * This method should be used when working with subforms that need to complete without a summary page.
4140
+ *
4141
+ * @important Developers must validate the subform before calling this method.
4142
+ *
4143
+ * @example
4144
+ * // Validate first, then complete the subform
4145
+ * const [isValid] = this._childFormController.validate(e, "fullName", [
4146
+ * requiredValidator("Please enter the dependent's full name.")
4147
+ * ]);
4148
+ * if (isValid) {
4149
+ * this._childFormController.completeSubform();
4150
+ * }
4151
+ * @returns void
4152
+ */
4153
+ completeSubform() {
4154
+ if (!this._formRef) {
4155
+ console.error("completeSubform: form ref is not set");
4156
+ return;
4157
+ }
4158
+ if (this._isCompleting) {
4159
+ console.warn("completeSubform: completion already in progress");
4160
+ return;
4161
+ }
4162
+ const formRef = this._formRef;
4163
+ this._isCompleting = true;
4164
+ const stateChangeHandler = (e) => {
4165
+ formRef.removeEventListener("_stateChange", stateChangeHandler);
4166
+ dispatch(formRef, "_complete", {}, { bubbles: true });
4167
+ this._isCompleting = false;
4168
+ };
4169
+ formRef.addEventListener("_stateChange", stateChangeHandler);
4170
+ dispatch(formRef, "_continue", null, { bubbles: true });
4171
+ }
4094
4172
  // removes any data collected that doesn't correspond with the final history path
4095
4173
  clean(data) {
4096
4174
  return data.history.reduce((acc, fieldsetId) => {
@@ -4194,6 +4272,12 @@ function usePublicFormController(type = "details") {
4194
4272
  const getStateList = react.useCallback(() => {
4195
4273
  return controllerRef.current.getStateList();
4196
4274
  }, []);
4275
+ const complete = react.useCallback(() => {
4276
+ controllerRef.current.complete();
4277
+ }, []);
4278
+ const completeSubform = react.useCallback(() => {
4279
+ controllerRef.current.completeSubform();
4280
+ }, []);
4197
4281
  return {
4198
4282
  state,
4199
4283
  init,
@@ -4203,6 +4287,8 @@ function usePublicFormController(type = "details") {
4203
4287
  validate,
4204
4288
  getStateValue,
4205
4289
  getStateList,
4290
+ complete,
4291
+ completeSubform,
4206
4292
  controller: controllerRef.current
4207
4293
  };
4208
4294
  }