@iress-oss/ids-components 5.16.0 → 6.0.0-alpha.0

package/dist/panda.config.d.ts

@@ -0,0 +1,4 @@
+declare const _default: import('@pandacss/dev').Config & {
+    name: string;
+};
+export default _default;

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

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

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

package/dist/{components/Form/FormField/FormField.types.js → patterns/Form/FormField/helpers/getErrorTypeMessage.js}

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

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

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

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

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

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

@@ -0,0 +1,116 @@
+import { jsx as p, jsxs as L } from "react/jsx-runtime";
+import { forwardRef as X, useState as Q, useRef as x, useCallback as c, useImperativeHandle as Y, useEffect as U, useMemo as Z } from "react";
+import { a as $, b as h, c as y, d as V, F as b } from "../../../index.esm-BdbWn-w_.js";
+import { useIdIfNeeded as E } from "../../../hooks/useIdIfNeeded.js";
+import { IressFormValidationSummary as O } from "../FormValidationSummary/FormValidationSummary.js";
+import { s as S } from "../../../factory-DHLOr79I.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 te } from "../../../helpers/utility/propagateTestid.js";
+const oe = ({
+  alert: W,
+  children: _,
+  className: G,
+  "data-testid": v,
+  form: o,
+  onSubmit: a,
+  onValidChange: n,
+  onError: f,
+  updateErrorSummaryOnSubmit: r,
+  ...M
+}, T) => {
+  const m = E({ id: M.id }), [t, d] = Q({}), i = x({}), H = x(null), u = x(null), { handleSubmit: I, reset: q, formState: z } = o, { isValid: R, isSubmitted: g } = z, [j, k] = Q(!1), w = c(
+    (e) => {
+      var s;
+      f == null || f(e), (s = H.current) == null || s.focus(), r && k(!0);
+    },
+    [f, r]
+  ), A = c(
+    (e) => {
+      I((s) => {
+        a == null || a(s), d({}), i.current = {};
+      }, w)(e);
+    },
+    [w, I, a]
+  ), C = c(
+    (e) => {
+      i.current = e();
+    },
+    []
+  ), N = c(
+    (e) => {
+      H.current = e;
+    },
+    []
+  ), P = c(
+    (e, s) => {
+      if (s === t[e] || !s && !t[e])
+        return;
+      const D = r ? C : d, J = r ? i.current : t;
+      D(
+        () => [...o.control._names.mount.values()].reduce(
+          (K, F) => ({
+            ...K,
+            [F]: F === e ? s : J[F]
+          }),
+          {}
+        )
+      );
+    },
+    [
+      t,
+      o.control._names.mount,
+      C,
+      r
+    ]
+  );
+  Y(T, () => ({
+    element: (u == null ? void 0 : u.current) ?? void 0,
+    api: o,
+    submit: () => A(),
+    reset: (e) => q(e)
+  })), U(() => {
+    n == null || n(R);
+  }, [R, n]), U(() => {
+    r && j && g && (d(() => i.current), k(!1));
+  }, [r, j, g]);
+  const B = Z(
+    () => ({
+      id: m,
+      errorMessages: t,
+      setErrorMessage: P,
+      setFocusOnError: N
+    }),
+    [t, m, P, N]
+  );
+  return /* @__PURE__ */ p(ee.Provider, { value: B, children: /* @__PURE__ */ p(b, { ...o, children: /* @__PURE__ */ L(
+    S.form,
+    {
+      ...M,
+      className: se(G, re.Form),
+      "data-testid": v,
+      id: m,
+      noValidate: !0,
+      onSubmit: A,
+      ref: u,
+      children: [
+        W ?? /* @__PURE__ */ p(
+          O,
+          {
+            "data-testid": te(v, "error-summary"),
+            srOnly: !0
+          }
+        ),
+        _
+      ]
+    }
+  ) }) });
+}, ce = X(oe), l = ce;
+l.useFieldArray = $;
+l.useForm = h;
+l.useFormContext = y;
+l.useWatch = V;
+export {
+  l 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 { b as L } from "../../../index.esm-BdbWn-w_.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 y, jsxs as H } from "react/jsx-runtime";
+import { b as I } from "../../../index.esm-BdbWn-w_.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: u,
+  resetOptions: a,
+  resolver: h,
+  reValidateMode: p = "onChange",
+  shouldUseNativeValidation: F,
+  shouldUnregister: l,
+  values: x,
+  ...d
+}, S) => {
+  const b = I({
+    criteriaMode: e,
+    context: n,
+    defaultValues: f,
+    delayError: c,
+    mode: i,
+    progressive: u,
+    resetOptions: a,
+    resolver: h,
+    reValidateMode: p,
+    shouldFocusError: !r,
+    shouldUseNativeValidation: F,
+    shouldUnregister: l,
+    values: x
+  }), j = C({ pattern: "short" }), k = w(() => typeof o == "string" ? /* @__PURE__ */ y(N, { element: "h2", children: o }) : o, [o]);
+  return /* @__PURE__ */ H(
+    E,
+    {
+      form: b,
+      ...d,
+      className: M(s, j.root),
+      ref: S,
+      children: [
+        k,
+        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-D0TO0TDT.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
 };