@iress-oss/ids-components 5.20.2 → 6.0.0-alpha.1

package/dist/patterns/Form/Form.js

@@ -0,0 +1,13 @@
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import { u as F, a, b as u, c as n } from "../../index.esm-B6vzbp0e.js";
+import { LongForm as i } from "./components/LongForm.js";
+import { ShortForm as f } from "./components/ShortForm.js";
+const c = ({ pattern: e, ...o }, m) => e === "long" ? /* @__PURE__ */ t(i, { ...o, ref: m }) : /* @__PURE__ */ t(f, { ...o, ref: m }), d = s(c), r = d;
+r.useFieldArray = F;
+r.useForm = a;
+r.useFormContext = u;
+r.useWatch = n;
+export {
+  r as IressForm
+};

package/dist/patterns/Form/Form.styles.js

@@ -0,0 +1,43 @@
+import { s as t } from "../../sva-OmxClA9g.js";
+const r = t({
+  slots: ["root", "actions", "header", "footer", "children"],
+  base: {
+    root: {}
+  },
+  variants: {
+    pattern: {
+      long: {
+        actions: {
+          ml: "auto",
+          textAlign: "right"
+        },
+        footer: {
+          mt: "md"
+        },
+        header: {
+          position: "sticky",
+          top: "none",
+          bg: "colour.neutral.10",
+          zIndex: "100",
+          py: "md"
+        }
+      },
+      short: {}
+    },
+    sticky: {
+      true: {
+        header: {
+          position: "sticky",
+          top: "[0]",
+          zIndex: "200"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    pattern: "short"
+  }
+});
+export {
+  r as form
+};

package/dist/patterns/Form/FormField/FormField.js

@@ -0,0 +1,66 @@
+import { jsx as a } from "react/jsx-runtime";
+import { useContext as I, useRef as M, useMemo as m, useEffect as E } from "react";
+import { d as x } from "../../../index.esm-B6vzbp0e.js";
+import { getErrorTypeMessage as _ } from "./helpers/getErrorTypeMessage.js";
+import { FormContext as $ } from "../FormContext.js";
+import { transformCustomRulesToValidateRule as v } from "./helpers/transformCustomRulesToValidateRule.js";
+import { IressField as q } from "../../../components/Field/Field.js";
+import "../../../components/Field/Field.styles.js";
+import "../../../components/Icon/Icon.styles.js";
+import "../../../components/Field/FieldGroup/FieldGroup.styles.js";
+import "../../../components/Label/Label.styles.js";
+import { useFieldRenderProps as T } from "./hooks/useFieldRenderProps.js";
+const G = ({
+  control: f,
+  defaultValue: p,
+  name: r,
+  render: n,
+  rules: s,
+  shouldUnregister: l,
+  readOnly: e,
+  ...u
+}) => {
+  const o = I($), F = M(null);
+  if (!o)
+    throw new Error(
+      "IressFormField must be used inside an IressForm. If you need a standalone field, use IressField instead."
+    );
+  const d = m(() => {
+    if (!e)
+      return s ? v(s) : void 0;
+  }, [e, s]), { field: c, fieldState: t } = x({
+    control: f,
+    defaultValue: p,
+    name: r,
+    rules: d,
+    shouldUnregister: l
+  }), i = m(
+    () => t.error ? _(
+      t.error?.message,
+      t.error?.type,
+      s
+    ) : "",
+    [t.error, s]
+  );
+  E(() => {
+    e ? o.setErrorMessage(r, "") : o.setErrorMessage(r, i);
+  }, [i, o, r, e]);
+  const g = T(c, F);
+  return /* @__PURE__ */ a(
+    q,
+    {
+      errorMessages: i && !e ? [{ message: i }] : void 0,
+      readOnly: e,
+      required: !!d?.required,
+      htmlFor: `${o.id}__${r}`,
+      ...u,
+      children: n({
+        ...g,
+        id: `${o.id}__${r}`
+      })
+    }
+  );
+};
+export {
+  G as IressFormField
+};

package/dist/patterns/Form/FormField/FormFieldset.js

@@ -0,0 +1,58 @@
+import { jsx as F } from "react/jsx-runtime";
+import { useContext as c, useRef as g, useMemo as I, useEffect as M } from "react";
+import { d as x } from "../../../index.esm-B6vzbp0e.js";
+import { getErrorTypeMessage as E } from "./helpers/getErrorTypeMessage.js";
+import "../../../components/Label/Label.styles.js";
+import "../../../components/Field/Field.styles.js";
+import "../../../components/Icon/Icon.styles.js";
+import "../../../components/Tooltip/Tooltip.styles.js";
+import { IressFieldGroup as y } from "../../../components/Field/FieldGroup/FieldGroup.js";
+import "../../../components/Field/FieldGroup/FieldGroup.styles.js";
+import { FormContext as q } from "../FormContext.js";
+import { transformCustomRulesToValidateRule as v } from "./helpers/transformCustomRulesToValidateRule.js";
+import { useFieldRenderProps as G } from "./hooks/useFieldRenderProps.js";
+const B = ({
+  control: d,
+  defaultValue: m,
+  name: r,
+  render: f,
+  rules: e,
+  shouldUnregister: n,
+  ...p
+}) => {
+  const o = c(q), l = g(null);
+  if (!o)
+    throw new Error(
+      "IressFormFieldset must be used inside an IressForm. If you need a standalone field, use IressFieldGroup instead."
+    );
+  const i = e ? v(e) : void 0, { field: u, fieldState: s } = x({
+    control: d,
+    defaultValue: m,
+    name: r,
+    rules: i,
+    shouldUnregister: n
+  }), t = I(
+    () => s.error ? E(
+      s.error?.message,
+      s.error?.type,
+      e
+    ) : "",
+    [s, e]
+  );
+  M(() => {
+    o.setErrorMessage(r, t);
+  }, [t, o, r]);
+  const a = G(u, l);
+  return /* @__PURE__ */ F(
+    y,
+    {
+      errorMessages: t ? [{ message: t }] : void 0,
+      required: !!i?.required,
+      ...p,
+      children: f({ ...a, id: `${o?.id}__${r}` })
+    }
+  );
+};
+export {
+  B as IressFormFieldset
+};

package/dist/patterns/Form/FormField/helpers/getErrorTypeMessage.js

@@ -0,0 +1,20 @@
+import { stringReplacer as r } from "../../../../helpers/formatting/stringReplacer.js";
+var a = /* @__PURE__ */ ((e) => (e.required = "Please fill out this field", e.maxLength = "Please shorten this text to {{attrValue}} characters or less", e.minLength = "Please lengthen this text to {{attrValue}} characters or more", e.max = "Please enter a value less than or equal to {{attrValue}}", e.min = "Please enter a value greater than or equal to {{attrValue}}", e.minDate = "Please enter a date that is on or after {{attrValue}}", e.maxDate = "Please enter a date that is on or before {{attrValue}}", e.pattern = "Please match the requested format", e.email = "Please enter a valid email address", e.validate = "Please enter a valid value", e))(a || {});
+const i = (e, t, l, n = "") => {
+  if (e)
+    return e;
+  const u = t ? r(
+    a[t] ?? "Please enter a valid value",
+    [
+      {
+        name: "{{attrValue}}",
+        value: String(l?.[t])
+      }
+    ]
+  ) : "Please enter a valid value";
+  return `${n}${u}`;
+};
+export {
+  a as FormFieldErrorMessages,
+  i as getErrorTypeMessage
+};

package/dist/patterns/Form/FormField/hooks/useFieldRenderProps.js

@@ -0,0 +1,37 @@
+import { useState as C, useCallback as h, useMemo as l } from "react";
+const i = (n, o) => {
+  const [t, g] = C("null"), a = h(
+    (...e) => {
+      e[1] !== void 0 ? n.onChange(e[1]) : n.onChange(...e);
+    },
+    [n]
+  ), s = h(
+    (e) => {
+      if (o.current = e, n.ref(e), e) {
+        const r = JSON.stringify(e.extras ?? null);
+        r !== t && g(r);
+      }
+    },
+    [t, n, o]
+  ), u = l(() => {
+    let e = { ...n };
+    const r = JSON.parse(t);
+    return r?.additionalOnChangeProps && r.additionalOnChangeProps.forEach((p) => {
+      e = { ...e, [p]: n.onChange };
+    }), r?.valueProp && (e = {
+      ...n,
+      [r.valueProp]: n.value
+    }, delete e.value), e;
+  }, [n, t]);
+  return l(
+    () => ({
+      ...u,
+      onChange: a,
+      ref: s
+    }),
+    [a, s, u]
+  );
+};
+export {
+  i as useFieldRenderProps
+};

package/dist/patterns/Form/FormValidationSummary/FormValidationSummary.js

@@ -0,0 +1,95 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useContext as $ } from "react";
+import { FormContext as w } from "../FormContext.js";
+import { formatObjectKey as L } from "../../../helpers/formatting/formatObjectKey.js";
+import { s as M } from "../../../factory-oPXoMw9H.js";
+import { IressValidationSummary as T } from "../../../components/ValidationMessage/ValidationSummary/ValidationSummary.js";
+import { IressAlert as j } from "../../../components/Alert/Alert.js";
+import "../../../components/Alert/Alert.styles.js";
+import { propagateTestid as d } from "../../../helpers/utility/propagateTestid.js";
+const l = M(
+  "div",
+  {
+    base: {
+      borderRadius: "radius.system.form",
+      _focus: { outline: "[none]", layerStyle: "elevation.focus" }
+    }
+  },
+  {
+    defaultProps: {
+      role: "alert",
+      tabIndex: -1
+    }
+  }
+), B = ({
+  actions: f,
+  children: o,
+  "data-testid": t,
+  footer: c,
+  heading: u = /* @__PURE__ */ r("h3", { children: "There was a problem submitting this form" }),
+  itemStyle: g,
+  icon: p,
+  srOnly: a,
+  variant: b,
+  ...y
+}) => {
+  const e = $(w);
+  if (!e)
+    throw new Error(
+      "IressFormValidationSummary must be used within a IressForm"
+    );
+  const i = Object.entries(e.errorMessages).filter(
+    ([, s]) => !!s
+  );
+  if (i.length === 0 || o)
+    return /* @__PURE__ */ r(
+      l,
+      {
+        "data-testid": t,
+        srOnly: a,
+        ref: e.setFocusOnError,
+        children: o
+      }
+    );
+  const h = i.map(([s, F]) => {
+    const m = `${e?.id}__${s}`, n = document.getElementById(m), S = n?.labels, x = Array.from(S ?? []), E = n?.closest("fieldset")?.querySelector("legend"), I = `${x[0]?.dataset?.name ?? E?.dataset?.name ?? L(s)}: `;
+    return {
+      linkToTarget: m,
+      message: `${I}${F}`
+    };
+  });
+  return /* @__PURE__ */ r(
+    l,
+    {
+      ref: e.setFocusOnError,
+      "data-testid": t,
+      srOnly: a,
+      children: /* @__PURE__ */ r(
+        j,
+        {
+          actions: f,
+          footer: c,
+          heading: u,
+          icon: p,
+          status: "danger",
+          variant: b,
+          children: /* @__PURE__ */ r(
+            T,
+            {
+              ...y,
+              "data-testid": d(t, "messages"),
+              itemStyle: {
+                "data-testid": d(t, "error"),
+                ...g
+              },
+              messages: h
+            }
+          )
+        }
+      )
+    }
+  );
+};
+export {
+  B as IressFormValidationSummary
+};

package/dist/patterns/Form/HookForm/HookForm.js

@@ -0,0 +1,113 @@
+import { jsx as m, jsxs as D } from "react/jsx-runtime";
+import { forwardRef as E, useState as Q, useRef as f, useCallback as n, useImperativeHandle as J, useEffect as U, useMemo as K } from "react";
+import { u as L, a as X, b as Y, c as Z, F as $ } from "../../../index.esm-B6vzbp0e.js";
+import { useIdIfNeeded as y } from "../../../hooks/useIdIfNeeded.js";
+import { IressFormValidationSummary as O } from "../FormValidationSummary/FormValidationSummary.js";
+import { s as S } from "../../../factory-oPXoMw9H.js";
+import { FormContext as ee } from "../FormContext.js";
+import { c as se } from "../../../cx-DN21T1EH.js";
+import { GlobalCSSClass as re } from "../../../enums.js";
+import { propagateTestid as oe } from "../../../helpers/utility/propagateTestid.js";
+const te = ({
+  alert: V,
+  children: W,
+  className: _,
+  "data-testid": d,
+  form: o,
+  onSubmit: F,
+  onValidChange: p,
+  onError: x,
+  updateErrorSummaryOnSubmit: s,
+  ...g
+}, b) => {
+  const i = y({ id: g.id }), [r, u] = Q({}), c = f({}), v = f(null), M = f(null), { handleSubmit: C, reset: G, formState: T } = o, { isValid: H, isSubmitted: I } = T, [w, R] = Q(!1), h = n(
+    (e) => {
+      x?.(e), v.current?.focus(), s && R(!0);
+    },
+    [x, s]
+  ), j = n(
+    (e) => {
+      C((t) => {
+        F?.(t), u({}), c.current = {};
+      }, h)(e);
+    },
+    [h, C, F]
+  ), k = n(
+    (e) => {
+      c.current = e();
+    },
+    []
+  ), A = n(
+    (e) => {
+      v.current = e;
+    },
+    []
+  ), N = n(
+    (e, t) => {
+      if (t === r[e] || !t && !r[e])
+        return;
+      const z = s ? c.current : r, P = [...o.control._names.mount.values()].reduce(
+        (B, l) => ({
+          ...B,
+          [l]: l === e ? t : z[l]
+        }),
+        {}
+      );
+      s ? k(() => P) : u(() => P);
+    },
+    [
+      r,
+      o.control._names.mount,
+      k,
+      s
+    ]
+  );
+  J(b, () => ({
+    element: M?.current ?? void 0,
+    api: o,
+    submit: () => j(),
+    reset: (e) => G(e)
+  })), U(() => {
+    p?.(H);
+  }, [H, p]), U(() => {
+    s && w && I && (u(() => c.current), R(!1));
+  }, [s, w, I]);
+  const q = K(
+    () => ({
+      id: i,
+      errorMessages: r,
+      setErrorMessage: N,
+      setFocusOnError: A
+    }),
+    [r, i, N, A]
+  );
+  return /* @__PURE__ */ m(ee.Provider, { value: q, children: /* @__PURE__ */ m($, { ...o, children: /* @__PURE__ */ D(
+    S.form,
+    {
+      ...g,
+      className: se(_, re.Form),
+      "data-testid": d,
+      id: i,
+      noValidate: !0,
+      onSubmit: j,
+      ref: M,
+      children: [
+        V ?? /* @__PURE__ */ m(
+          O,
+          {
+            "data-testid": oe(d, "error-summary"),
+            srOnly: !0
+          }
+        ),
+        W
+      ]
+    }
+  ) }) });
+}, ne = E(te), a = ne;
+a.useFieldArray = L;
+a.useForm = X;
+a.useFormContext = Y;
+a.useWatch = Z;
+export {
+  a as IressHookForm
+};

package/dist/patterns/Form/components/LongForm.js

@@ -0,0 +1,89 @@
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { a as L } from "../../../index.esm-B6vzbp0e.js";
+import { forwardRef as y, useMemo as z } from "react";
+import { IressText as B } from "../../../components/Text/Text.js";
+import { form as C } from "../Form.styles.js";
+import { c as i } from "../../../cx-DN21T1EH.js";
+import { IressHookForm as E } from "../HookForm/HookForm.js";
+import { IressPanel as M } from "../../../components/Panel/Panel.js";
+import "../../../components/Panel/Panel.styles.js";
+import "../../../components/Inline/Inline.styles.js";
+import { IressInline as R } from "../../../components/Inline/Inline.js";
+const T = ({
+  actions: a,
+  alert: m,
+  children: c,
+  className: l,
+  criteriaMode: f,
+  context: d,
+  defaultValues: h,
+  delayError: p,
+  footer: t,
+  heading: o,
+  mode: g = "onBlur",
+  panelStyle: n = { bg: "alt" },
+  progressive: u,
+  resetOptions: F,
+  resolver: N,
+  reValidateMode: x = "onChange",
+  shouldUseNativeValidation: I,
+  shouldUnregister: b,
+  sticky: v = !1,
+  values: j,
+  ...k
+}, w) => {
+  const A = L({
+    criteriaMode: f,
+    context: d,
+    defaultValues: h,
+    delayError: p,
+    mode: g,
+    progressive: u,
+    resetOptions: F,
+    resolver: N,
+    reValidateMode: x,
+    shouldFocusError: !m,
+    shouldUseNativeValidation: I,
+    shouldUnregister: b,
+    values: j
+  }), r = C({ pattern: "long", sticky: v }), H = z(() => typeof o == "string" ? /* @__PURE__ */ e(B, { element: "h2", children: o }) : o, [o]);
+  return /* @__PURE__ */ s(
+    E,
+    {
+      form: A,
+      ...k,
+      className: i(r.root, l),
+      ref: w,
+      children: [
+        /* @__PURE__ */ s(
+          R,
+          {
+            gap: "sm",
+            horizontalAlign: "between",
+            verticalAlign: "bottom",
+            className: r.header,
+            children: [
+              H,
+              /* @__PURE__ */ e("div", { className: r.actions, children: a })
+            ]
+          }
+        ),
+        /* @__PURE__ */ s(
+          M,
+          {
+            ...n,
+            className: i(r.children, n.className),
+            children: [
+              m,
+              c
+            ]
+          }
+        ),
+        t && /* @__PURE__ */ e("div", { className: r.footer, children: t })
+      ]
+    }
+  );
+}, Y = y(T);
+export {
+  Y as LongForm
+};

package/dist/patterns/Form/components/ShortForm.js

@@ -0,0 +1,61 @@
+import { jsx as H, jsxs as I } from "react/jsx-runtime";
+import { a as b } from "../../../index.esm-B6vzbp0e.js";
+import { forwardRef as g, useMemo as w } from "react";
+import { form as C } from "../Form.styles.js";
+import { IressHookForm as E } from "../HookForm/HookForm.js";
+import { c as M } from "../../../cx-DN21T1EH.js";
+import { IressText as N } from "../../../components/Text/Text.js";
+const R = ({
+  actions: t,
+  alert: r,
+  children: m,
+  className: s,
+  criteriaMode: e,
+  context: n,
+  defaultValues: f,
+  delayError: c,
+  heading: o,
+  mode: i = "onSubmit",
+  progressive: a,
+  resetOptions: u,
+  resolver: h,
+  reValidateMode: p = "onChange",
+  shouldUseNativeValidation: F,
+  shouldUnregister: l,
+  values: x,
+  ...d
+}, S) => {
+  const j = b({
+    criteriaMode: e,
+    context: n,
+    defaultValues: f,
+    delayError: c,
+    mode: i,
+    progressive: a,
+    resetOptions: u,
+    resolver: h,
+    reValidateMode: p,
+    shouldFocusError: !r,
+    shouldUseNativeValidation: F,
+    shouldUnregister: l,
+    values: x
+  }), k = C({ pattern: "short" }), y = w(() => typeof o == "string" ? /* @__PURE__ */ H(N, { element: "h2", children: o }) : o, [o]);
+  return /* @__PURE__ */ I(
+    E,
+    {
+      form: j,
+      ...d,
+      className: M(s, k.root),
+      ref: S,
+      children: [
+        y,
+        r,
+        m,
+        t
+      ]
+    }
+  );
+}, G = g(R);
+export {
+  G as ShortForm
+};

package/dist/patterns/Form/index.js

@@ -0,0 +1,12 @@
+import { IressForm as e } from "./Form.js";
+import { IressFormField as s } from "./FormField/FormField.js";
+import { IressFormFieldset as F } from "./FormField/FormFieldset.js";
+import { IressFormValidationSummary as p } from "./FormValidationSummary/FormValidationSummary.js";
+import { IressHookForm as I } from "./HookForm/HookForm.js";
+export {
+  e as IressForm,
+  s as IressFormField,
+  F as IressFormFieldset,
+  p as IressFormValidationSummary,
+  I as IressHookForm
+};

package/dist/patterns/Loading/Loading.js

@@ -1,8 +1,13 @@
-import "react/jsx-runtime";
-import "./components/StartUpLoading.js";
-import { P as s } from "../../LoadingSuspense-BtzikVZk.js";
-import "./hooks/useShouldRenderLoading.js";
-import "./components/LongLoading.js";
+import { jsx as i } from "react/jsx-runtime";
+import { StartUpLoading as n } from "./components/StartUpLoading.js";
+import { DefaultLoading as m } from "./components/DefaultLoading.js";
+import { ValidateLoading as d } from "./components/ValidateLoading.js";
+import { useShouldRenderLoading as f } from "./hooks/useShouldRenderLoading.js";
+import { ComponentLoading as a } from "./components/ComponentLoading.js";
+import { PageLoading as g } from "./components/PageLoading.js";
+import { LongLoading as t } from "./components/LongLoading.js";
+const e = ({ pattern: r, ...o }) => r === "component" ? /* @__PURE__ */ i(a, { ...o }) : r === "long" ? /* @__PURE__ */ i(t, { ...o }) : r === "page" ? /* @__PURE__ */ i(g, { ...o }) : r === "start-up" ? /* @__PURE__ */ i(n, { ...o }) : r === "validate" ? /* @__PURE__ */ i(d, { ...o }) : /* @__PURE__ */ i(m, { ...o });
+e.shouldRender = f;
 export {
-  s as IressLoading
+  e as IressLoading
 };