@abgov/react-components 6.5.0-alpha.2 → 6.5.0-alpha.4

package/index.d.ts

@@ -62,3 +62,4 @@ export * from './lib/three-column-layout/three-column-layout';
 export * from './lib/tooltip/tooltip';
 export * from './lib/two-column-layout/two-column-layout';
 export * from './lib/filter-chip/filter-chip';
+export * from './lib/use-public-form-controller';

package/index.js

@@ -1,4 +1,14 @@
 "use strict";
+var __defProp = Object.defineProperty;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _PublicFormController_instances, updateObjectListState_fn, dispatchError_fn;
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
@@ -414,6 +424,8 @@ function GoabCheckbox({
   value,
   text,
   description,
+  reveal,
+  revealAriaLabel,
   maxWidth,
   children,
   onChange,
@@ -451,6 +463,7 @@ function GoabCheckbox({
       text,
       value: typeof value === "boolean" ? value ? "true" : void 0 : value,
       arialabel: ariaLabel,
+      revealarialabel: revealAriaLabel,
       description: typeof description === "string" ? description : void 0,
       maxwidth: maxWidth,
       mt,
@@ -458,8 +471,9 @@ function GoabCheckbox({
       mb,
       ml,
       children: [
-        description && typeof description !== "string" && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "description", children: description }),
-        children
+        children,
+        typeof description !== "string" && description && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "description", children: description }),
+        reveal && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "reveal", children: reveal })
       ]
     }
   );
@@ -575,6 +589,7 @@ function GoabDatePicker({
   max,
   testId,
   disabled,
+  type,
   mt,
   mr,
   mb,
@@ -590,11 +605,15 @@ function GoabDatePicker({
     const current = ref.current;
     const handleChange = (e) => {
       const detail = e.detail;
-      onChange(detail);
+      onChange == null ? void 0 : onChange(detail);
     };
-    current.addEventListener("_change", handleChange);
+    if (onChange) {
+      current.addEventListener("_change", handleChange);
+    }
     return () => {
-      current.removeEventListener("_change", handleChange);
+      if (onChange) {
+        current.removeEventListener("_change", handleChange);
+      }
     };
   }, [onChange]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -603,6 +622,7 @@ function GoabDatePicker({
       ref,
       name,
       value: (value == null ? void 0 : value.toISOString()) || "",
+      type,
       error: error ? "true" : void 0,
       disabled: disabled ? "true" : void 0,
       min: min == null ? void 0 : min.toISOString(),
@@ -2849,6 +2869,7 @@ function GoabInput({
   trailingContent,
   maxLength,
   trailingIconAriaLabel,
+  textAlign = "left",
   onTrailingIconClick,
   onChange,
   onFocus,
@@ -2926,6 +2947,7 @@ function GoabInput({
       ml,
       handletrailingiconclick: onTrailingIconClick ? "true" : "false",
       trailingiconarialabel: trailingIconAriaLabel,
+      textalign: textAlign,
       children: [
         leadingContent && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "leadingContent", children: leadingContent }),
         trailingContent && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "trailingContent", children: trailingContent })
@@ -3060,6 +3082,7 @@ function GoabInputNumber({
   min = Number.MIN_VALUE,
   max = Number.MAX_VALUE,
   value,
+  textAlign = "right",
   ...props
 }) {
   const onNumberChange = ({ name, value: value2 }) => {
@@ -3089,7 +3112,8 @@ function GoabInputNumber({
       onFocus,
       onBlur,
       type: "number",
-      onKeyPress
+      onKeyPress,
+      textAlign
     }
   );
 }
@@ -3341,6 +3365,8 @@ function GoabRadioItem({
   label,
   value,
   description,
+  reveal,
+  revealAriaLabel,
   maxWidth,
   disabled,
   checked,
@@ -3364,12 +3390,14 @@ function GoabRadioItem({
       disabled: disabled ? "true" : void 0,
       checked: checked ? "true" : void 0,
       arialabel: ariaLabel,
+      revealarialabel: revealAriaLabel,
       mt,
       mr,
       mb,
       ml,
       children: [
         description && typeof description !== "string" && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "description", children: description }),
+        reveal && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "reveal", children: reveal }),
         children
       ]
     }
@@ -3751,6 +3779,326 @@ const GoabFilterChip = ({
     }
   );
 };
+class PublicFormController {
+  constructor(type) {
+    __privateAdd(this, _PublicFormController_instances);
+    __publicField(this, "state");
+    __publicField(this, "_formData");
+    __publicField(this, "_formRef");
+    this.type = type;
+  }
+  // Obtain reference to the form element
+  init(e) {
+    if (this._formRef) {
+      console.warn("init: form element has already been set");
+      return;
+    }
+    this._formRef = e.detail.el;
+    this.state = {
+      uuid: crypto.randomUUID(),
+      form: {},
+      history: [],
+      editting: "",
+      status: "not-started"
+    };
+  }
+  initList(e) {
+    this._formRef = e.detail.el;
+    this.state = [];
+  }
+  // Public method to allow for the initialization of the state
+  initState(state, callback) {
+    relay(this._formRef, "external::init:state", state);
+    if (typeof state === "string") {
+      this.state = JSON.parse(state);
+    } else if (!Array.isArray(state)) {
+      this.state = state;
+    }
+    if (callback) {
+      setTimeout(callback, 200);
+    }
+  }
+  updateListState(e) {
+    const detail = e.detail;
+    if (!Array.isArray(detail.data)) {
+      return;
+    }
+    this.state = detail.data;
+  }
+  updateObjectState(e) {
+    var _a, _b;
+    if (Array.isArray(this.state)) {
+      return;
+    }
+    const detail = e.detail;
+    if (detail.type === "list") {
+      this.state = {
+        ...this.state,
+        form: { ...((_a = this.state) == null ? void 0 : _a.form) || {}, [detail.id]: detail.data }
+      };
+    } else {
+      this.state = {
+        ...this.state,
+        ...detail.data,
+        form: { ...((_b = this.state) == null ? void 0 : _b.form) || {}, ...detail.data.form },
+        history: detail.data.history
+      };
+    }
+  }
+  getStateList() {
+    if (!this.state) {
+      return [];
+    }
+    if (!Array.isArray(this.state)) {
+      console.warn(
+        "Utils:getStateList: unable to update the state of a non-multi form type",
+        this.state
+      );
+      return [];
+    }
+    if (this.state.length === 0) {
+      return [];
+    }
+    return this.state.map((s) => {
+      return Object.values(s.form).filter((item) => {
+        var _a;
+        return ((_a = item == null ? void 0 : item.data) == null ? void 0 : _a.type) === "details";
+      }).map((item) => {
+        var _a;
+        return item.data.type === "details" && ((_a = item.data) == null ? void 0 : _a.fieldsets) || {};
+      }).reduce(
+        (acc, item) => {
+          for (const [key, value] of Object.entries(item)) {
+            acc[key] = value.value;
+          }
+          return acc;
+        },
+        {}
+      );
+    });
+  }
+  // getStateItems(group: string): Record<string, FieldsetItemState>[] {
+  //   if (Array.isArray(this.state)) {
+  //     console.error(
+  //       "Utils:getStateItems: unable to update the state of a multi form type",
+  //     );
+  //     return [];
+  //   }
+  //   if (!this.state) {
+  //     console.error("Utils:getStateItems: state has not yet been set");
+  //     return [];
+  //   }
+  //
+  //   const data = this.state.form[group].data;
+  //   if (data.type !== "list") {
+  //     return [];
+  //   }
+  //
+  //   return data.items.;
+  // }
+  // Public method to allow for the retrieval of the state value
+  getStateValue(group, key) {
+    if (Array.isArray(this.state)) {
+      console.error("getStateValue: unable to update the state of a multi form type");
+      return "";
+    }
+    if (!this.state) {
+      console.error("getStateValue: state has not yet been set");
+      return "";
+    }
+    const data = this.state.form[group].data;
+    if (data.type !== "details") {
+      return "";
+    }
+    return data.fieldsets[key].value;
+  }
+  // Public method to allow for the continuing to the next page
+  continueTo(next) {
+    if (!next) {
+      console.error("continueTo [name] is undefined");
+      return;
+    }
+    relay(this._formRef, "external::continue", { next });
+  }
+  // Public method to perform validation and send the appropriate messages to the form elements
+  validate(e, field, validators, options) {
+    var _a;
+    const { el, state, cancelled } = e.detail;
+    const value = (_a = state == null ? void 0 : state[field]) == null ? void 0 : _a.value;
+    window.scrollTo({ top: 0, behavior: "smooth" });
+    if (cancelled) {
+      return [true, value];
+    }
+    for (const validator of validators) {
+      const msg = validator(value);
+      __privateMethod(this, _PublicFormController_instances, dispatchError_fn).call(this, el, field, msg, options);
+      if (msg) {
+        return [false, ""];
+      }
+    }
+    return [true, value];
+  }
+  /**
+   * Validates a group of fields ensuring that at least `minPassCount` of the items within the group
+   * passes. This is useful in the scenario when n number fields are required out of n+m number of fields.
+   *
+   * @param {string[]} fields - An array of field names to be validated.
+   * @param {Event} e - The event object associated with the validation trigger.
+   * @param {FieldValidator[]} validators - An array of validator functions to apply to the fields.
+   * @return {[number, Record<string, boolean>]} - Returns back the number of fields that passed and a record of the fields and their pass status.
+   */
+  validateGroup(e, fields, validators) {
+    let passCount = 0;
+    const validGroups = {};
+    for (const field of fields) {
+      const [_valid] = this.validate(e, field, validators, { grouped: true });
+      if (_valid) {
+        validGroups[field] = true;
+        passCount++;
+      }
+    }
+    return [passCount, validGroups];
+  }
+  edit(index) {
+    relay(this._formRef, "external::alter:state", { index, operation: "edit" });
+  }
+  remove(index) {
+    relay(this._formRef, "external::alter:state", {
+      index,
+      operation: "remove"
+    });
+  }
+  // removes any data collected that doesn't correspond with the final history path
+  clean(data) {
+    return data.history.reduce((acc, fieldsetId) => {
+      acc[fieldsetId] = data.form[fieldsetId];
+      return acc;
+    }, {});
+  }
+}
+_PublicFormController_instances = new WeakSet();
+updateObjectListState_fn = function(detail) {
+  var _a;
+  if (!Array.isArray(detail.data)) {
+    return;
+  }
+  if (Array.isArray(this.state)) {
+    return;
+  }
+  this.state = {
+    ...this.state,
+    form: {
+      ...((_a = this.state) == null ? void 0 : _a.form) || {},
+      [detail.id]: detail.data
+    }
+  };
+};
+// Private method to dispatch the error message to the form element
+dispatchError_fn = function(el, name, msg, options) {
+  el.dispatchEvent(
+    new CustomEvent("msg", {
+      composed: true,
+      detail: {
+        action: "external::set:error",
+        data: {
+          name,
+          msg,
+          grouped: options == null ? void 0 : options.grouped
+        }
+      }
+    })
+  );
+};
+function relay(el, eventName, data, opts) {
+  if (!el) {
+    console.error("dispatch element is null");
+    return;
+  }
+  el.dispatchEvent(
+    new CustomEvent("msg", {
+      composed: true,
+      bubbles: opts == null ? void 0 : opts.bubbles,
+      detail: {
+        action: eventName,
+        data
+      }
+    })
+  );
+}
+function usePublicFormController(type = "details") {
+  const controllerRef = react.useRef(new PublicFormController(type));
+  const [state, setState] = react.useState(void 0);
+  react.useEffect(() => {
+    var _a, _b;
+    const originalStateGetter = (_a = Object.getOwnPropertyDescriptor(
+      Object.getPrototypeOf(controllerRef.current),
+      "state"
+    )) == null ? void 0 : _a.get;
+    const originalStateSetter = (_b = Object.getOwnPropertyDescriptor(
+      Object.getPrototypeOf(controllerRef.current),
+      "state"
+    )) == null ? void 0 : _b.set;
+    if (originalStateGetter && originalStateSetter) {
+      Object.defineProperty(controllerRef.current, "state", {
+        get: function() {
+          return originalStateGetter.call(this);
+        },
+        set: function(value) {
+          originalStateSetter.call(this, value);
+          setState(value);
+        },
+        configurable: true
+      });
+    }
+  }, []);
+  const init = react.useCallback((e) => {
+    var _a;
+    if (!((_a = e.detail) == null ? void 0 : _a.el)) {
+      console.error("El is null during initialization");
+      return;
+    }
+    controllerRef.current.init(e);
+  }, []);
+  const initList = react.useCallback((e) => {
+    var _a;
+    const customEvent = e;
+    if (!((_a = customEvent == null ? void 0 : customEvent.detail) == null ? void 0 : _a.el)) {
+      console.error("El is null during list initialization");
+      return;
+    }
+    controllerRef.current.initList(e);
+  }, []);
+  const initState = react.useCallback((state2, callback) => {
+    if (!controllerRef.current._formRef) {
+      console.error("Form ref not set.");
+      return;
+    }
+    controllerRef.current.initState(state2, callback);
+  }, []);
+  const continueTo = react.useCallback((next) => {
+    controllerRef.current.continueTo(next);
+  }, []);
+  const validate = react.useCallback((e, field, validators) => {
+    return controllerRef.current.validate(e, field, validators);
+  }, []);
+  const getStateValue = react.useCallback((group, key) => {
+    return controllerRef.current.getStateValue(group, key);
+  }, []);
+  const getStateList = react.useCallback(() => {
+    return controllerRef.current.getStateList();
+  }, []);
+  return {
+    state,
+    init,
+    initList,
+    initState,
+    continueTo,
+    validate,
+    getStateValue,
+    getStateList,
+    controller: controllerRef.current
+  };
+}
 exports.GoabDrawer = icon.GoabDrawer;
 exports.GoabIcon = icon.GoabIcon;
 exports.GoALinkButton = GoALinkButton;
@@ -3835,4 +4183,5 @@ exports.GoabTextarea = GoabTextArea;
 exports.GoabThreeColumnLayout = GoabThreeColumnLayout;
 exports.GoabTooltip = GoabTooltip;
 exports.GoabTwoColumnLayout = GoabTwoColumnLayout;
+exports.usePublicFormController = usePublicFormController;
 //# sourceMappingURL=index.js.map