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

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

@@ -1,116 +1,113 @@
-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 { 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-DHLOr79I.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 te } from "../../../helpers/utility/propagateTestid.js";
-const oe = ({
-  alert: W,
-  children: _,
-  className: G,
-  "data-testid": v,
+import { propagateTestid as oe } from "../../../helpers/utility/propagateTestid.js";
+const te = ({
+  alert: V,
+  children: W,
+  className: _,
+  "data-testid": d,
   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(
+  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) => {
-      var s;
-      f == null || f(e), (s = H.current) == null || s.focus(), r && k(!0);
+      x?.(e), v.current?.focus(), s && R(!0);
     },
-    [f, r]
-  ), A = c(
+    [x, s]
+  ), j = n(
     (e) => {
-      I((s) => {
-        a == null || a(s), d({}), i.current = {};
-      }, w)(e);
+      C((t) => {
+        F?.(t), u({}), c.current = {};
+      }, h)(e);
     },
-    [w, I, a]
-  ), C = c(
+    [h, C, F]
+  ), k = n(
     (e) => {
-      i.current = e();
+      c.current = e();
     },
     []
-  ), N = c(
+  ), A = n(
     (e) => {
-      H.current = e;
+      v.current = e;
     },
     []
-  ), P = c(
-    (e, s) => {
-      if (s === t[e] || !s && !t[e])
+  ), N = n(
+    (e, t) => {
+      if (t === r[e] || !t && !r[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]
-          }),
-          {}
-        )
+      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);
     },
     [
-      t,
+      r,
       o.control._names.mount,
-      C,
-      r
+      k,
+      s
     ]
   );
-  Y(T, () => ({
-    element: (u == null ? void 0 : u.current) ?? void 0,
+  J(b, () => ({
+    element: M?.current ?? void 0,
     api: o,
-    submit: () => A(),
-    reset: (e) => q(e)
+    submit: () => j(),
+    reset: (e) => G(e)
   })), U(() => {
-    n == null || n(R);
-  }, [R, n]), U(() => {
-    r && j && g && (d(() => i.current), k(!1));
-  }, [r, j, g]);
-  const B = Z(
+    p?.(H);
+  }, [H, p]), U(() => {
+    s && w && I && (u(() => c.current), R(!1));
+  }, [s, w, I]);
+  const q = K(
     () => ({
-      id: m,
-      errorMessages: t,
-      setErrorMessage: P,
-      setFocusOnError: N
+      id: i,
+      errorMessages: r,
+      setErrorMessage: N,
+      setFocusOnError: A
     }),
-    [t, m, P, N]
+    [r, i, N, A]
   );
-  return /* @__PURE__ */ p(ee.Provider, { value: B, children: /* @__PURE__ */ p(b, { ...o, children: /* @__PURE__ */ L(
+  return /* @__PURE__ */ m(ee.Provider, { value: q, children: /* @__PURE__ */ m($, { ...o, children: /* @__PURE__ */ D(
     S.form,
     {
-      ...M,
-      className: se(G, re.Form),
-      "data-testid": v,
-      id: m,
+      ...g,
+      className: se(_, re.Form),
+      "data-testid": d,
+      id: i,
       noValidate: !0,
-      onSubmit: A,
-      ref: u,
+      onSubmit: j,
+      ref: M,
       children: [
-        W ?? /* @__PURE__ */ p(
+        V ?? /* @__PURE__ */ m(
           O,
           {
-            "data-testid": te(v, "error-summary"),
+            "data-testid": oe(d, "error-summary"),
             srOnly: !0
           }
         ),
-        _
+        W
       ]
     }
   ) }) });
-}, ce = X(oe), l = ce;
-l.useFieldArray = $;
-l.useForm = h;
-l.useFormContext = y;
-l.useWatch = V;
+}, ne = E(te), a = ne;
+a.useFieldArray = L;
+a.useForm = X;
+a.useFormContext = Y;
+a.useWatch = Z;
 export {
-  l as IressHookForm
+  a as IressHookForm
 };

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

@@ -1,5 +1,5 @@
 import { jsx as e, jsxs as s } from "react/jsx-runtime";
-import { b as L } from "../../../index.esm-BdbWn-w_.js";
+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";

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

@@ -1,5 +1,5 @@
-import { jsx as y, jsxs as H } from "react/jsx-runtime";
-import { b as I } from "../../../index.esm-BdbWn-w_.js";
+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";
@@ -16,8 +16,8 @@ const R = ({
   delayError: c,
   heading: o,
   mode: i = "onSubmit",
-  progressive: u,
-  resetOptions: a,
+  progressive: a,
+  resetOptions: u,
   resolver: h,
   reValidateMode: p = "onChange",
   shouldUseNativeValidation: F,
@@ -25,30 +25,30 @@ const R = ({
   values: x,
   ...d
 }, S) => {
-  const b = I({
+  const j = b({
     criteriaMode: e,
     context: n,
     defaultValues: f,
     delayError: c,
     mode: i,
-    progressive: u,
-    resetOptions: a,
+    progressive: a,
+    resetOptions: u,
     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(
+  }), k = C({ pattern: "short" }), y = w(() => typeof o == "string" ? /* @__PURE__ */ H(N, { element: "h2", children: o }) : o, [o]);
+  return /* @__PURE__ */ I(
     E,
     {
-      form: b,
+      form: j,
       ...d,
-      className: M(s, j.root),
+      className: M(s, k.root),
       ref: S,
       children: [
-        k,
+        y,
         r,
         m,
         t

package/dist/patterns/Loading/Loading.styles.js

@@ -1,12 +1,13 @@
-import { s as t } from "../../sva-TRyehFkb.js";
-const s = t({
+import { s as t } from "../../sva-OmxClA9g.js";
+const a = t({
   slots: ["root", "message", "critical", "overlay"],
   variants: {
     error: {
       true: {
         root: {
           bg: "colour.system.danger.surface",
-          color: "colour.system.danger.text"
+          color: "colour.system.danger.text",
+          opacity: "[1 !important]"
         }
       }
     },
@@ -255,6 +256,16 @@ const s = t({
         }
       }
     },
+    {
+      pattern: "page",
+      error: !0,
+      css: {
+        root: {
+          borderRadius: "radius.system.layout",
+          py: "xl"
+        }
+      }
+    },
     {
       pattern: "start-up",
       showIndicator: !0,
@@ -278,7 +289,8 @@ const s = t({
       instant: !0,
       css: {
         root: {
-          transition: "[none]"
+          transition: "[none]",
+          opacity: 1
         }
       }
     },
@@ -296,7 +308,7 @@ const s = t({
   defaultVariants: {
     pattern: "default"
   }
-}), a = t({
+}), s = t({
   slots: ["root", "item", "dots", "svg", "circle", "tick", "marker"],
   base: {
     root: {
@@ -365,6 +377,6 @@ const s = t({
   }
 });
 export {
-  s as loading,
-  a as loadingList
+  a as loading,
+  s as loadingList
 };

package/dist/patterns/Loading/LoadingSuspense.js

@@ -1,47 +1,47 @@
-import { jsxs as d, Fragment as S, jsx as n } from "react/jsx-runtime";
-import { useMemo as a, useRef as F, useState as g, useEffect as b, Suspense as R } from "react";
-import { IressLoading as i } from "./Loading.js";
-import { useSuspenseResource as I, uncacheSuspenseResource as E } from "./hooks/useSuspenseResource.js";
+import { jsxs as h, Fragment as a, jsx as u } from "react/jsx-runtime";
+import { useMemo as S, useRef as F, useState as g, useEffect as b, Suspense as R } from "react";
+import { IressLoading as f } from "./Loading.js";
+import { useSuspenseResource as I, uncacheSuspenseResource as L } from "./hooks/useSuspenseResource.js";
 const k = ({
   children: s,
   delay: r,
-  onLoaded: l,
+  onLoaded: i,
   pattern: e,
-  startFrom: c,
-  ...t
+  startFrom: o,
+  ...d
 }) => {
-  const w = a(() => r || (e === "component" || e === "default" || e === "validate" ? 0 : e === "long" ? 1300 : 500), [r, e]), x = a(() => c || (e === "component" || e === "default" || e === "long" ? 0 : 250), [c, e]), m = F(!1), [u, j] = g(!1), o = i.shouldRender(u, w, x), [f, C] = g(!1);
+  const w = S(() => r || (e === "component" || e === "default" || e === "validate" ? 0 : e === "long" ? 1300 : 500), [r, e]), x = S(() => o || (e === "component" || e === "default" || e === "long" ? 0 : 250), [o, e]), t = F(!1), [n, j] = g(!1), l = f.shouldRender(n, w, x), [c, C] = g(!1);
   b(() => {
-    u && !o && (C(!0), l == null || l());
-  }, [u, l, o]);
-  const h = () => {
-    m.current || (m.current = !0, j(() => !0));
+    n && !l && (C(!0), i?.());
+  }, [n, i, l]);
+  const m = () => {
+    t.current || (t.current = !0, j(() => !0));
   };
-  return e === "component" || e === "validate" ? /* @__PURE__ */ d(S, { children: [
-    /* @__PURE__ */ n(
-      i,
+  return e === "component" || e === "validate" ? /* @__PURE__ */ h(a, { children: [
+    /* @__PURE__ */ u(
+      f,
       {
         pattern: e,
-        loaded: u,
-        ...t,
-        children: f && s
+        loaded: n,
+        ...d,
+        children: c && s
       }
     ),
-    /* @__PURE__ */ n(R, { fallback: null, children: !f && /* @__PURE__ */ n(v, { onResolved: h, children: !u && s }) })
-  ] }) : /* @__PURE__ */ d(S, { children: [
-    o && /* @__PURE__ */ n(
-      i,
+    /* @__PURE__ */ u(R, { fallback: null, children: !c && /* @__PURE__ */ u(v, { onResolved: m, children: !n && s }) })
+  ] }) : /* @__PURE__ */ h(a, { children: [
+    l && /* @__PURE__ */ u(
+      f,
       {
         pattern: e,
-        loaded: u,
-        ...t
+        loaded: n,
+        ...d
       }
     ),
-    /* @__PURE__ */ n(R, { fallback: null, children: f ? s : /* @__PURE__ */ n(v, { onResolved: h, children: !u && s }) })
+    /* @__PURE__ */ u(R, { fallback: null, children: c ? s : /* @__PURE__ */ u(v, { onResolved: m, children: !n && s }) })
   ] });
 };
 k.use = I;
-k.uncache = E;
+k.uncache = L;
 const v = ({
   onResolved: s,
   children: r

package/dist/patterns/Loading/components/ComponentLoading.js

@@ -1,66 +1,66 @@
-import { jsx as l, jsxs as h } from "react/jsx-runtime";
-import { useState as w, useMemo as x, useEffect as c } from "react";
-import { IressSkeleton as I } from "../../../components/Skeleton/Skeleton.js";
+import { jsx as c, jsxs as a } from "react/jsx-runtime";
+import { useState as g, useMemo as T, useEffect as n } from "react";
+import { IressSkeleton as x } from "../../../components/Skeleton/Skeleton.js";
 import "../../../components/Skeleton/Skeleton.styles.js";
-import { IressSpinner as N } from "../../../components/Spinner/Spinner.js";
+import { IressSpinner as I } from "../../../components/Spinner/Spinner.js";
 import "../../../components/Spinner/Spinner.styles.js";
-import { s as f } from "../../../factory-DHLOr79I.js";
-import { loading as U } from "../Loading.styles.js";
-import { c as d } from "../../../cx-DN21T1EH.js";
-const S = {
-  chart: /* @__PURE__ */ l(I, { mode: "rect", height: "250px" })
-}, A = ({
-  children: k,
-  className: p,
-  loaded: n,
-  screenReaderText: v = "Loading...",
-  template: e = "chart",
-  timeout: r,
-  update: s,
-  ...g
+import { s as i } from "../../../factory-oPXoMw9H.js";
+import { loading as N } from "../Loading.styles.js";
+import { c as w } from "../../../cx-DN21T1EH.js";
+const d = {
+  chart: /* @__PURE__ */ c(x, { mode: "rect", height: "250px" })
+}, z = ({
+  children: S,
+  className: h,
+  loaded: r,
+  screenReaderText: k = "Loading...",
+  template: o = "chart",
+  timeout: s,
+  update: e,
+  ...u
 }) => {
-  const [y, m] = w(!1), [a, i] = w(!1), o = U({
+  const [v, p] = g(!1), [m, f] = g(!1), t = N({
     pattern: "component",
-    loaded: n,
-    showIndicator: y,
-    showMessage: a
-  }), T = x(() => typeof e == "string" && e in S ? S[e] : e, [e]);
-  return c(() => {
-    n === !0 && m(!1);
-  }, [n]), c(() => {
-    const t = setTimeout(
-      () => m(!0),
-      (r == null ? void 0 : r.skeleton) ?? 0
+    loaded: r,
+    showIndicator: v,
+    showMessage: m
+  }), y = T(() => typeof o == "string" && o in d ? d[o] : o, [o]);
+  return n(() => {
+    r === !0 && p(!1);
+  }, [r]), n(() => {
+    const l = setTimeout(
+      () => p(!0),
+      s?.skeleton ?? 0
     );
     return () => {
-      clearTimeout(t);
+      clearTimeout(l);
     };
-  }, [r == null ? void 0 : r.skeleton]), c(() => {
-    if (!s)
+  }, [s?.skeleton]), n(() => {
+    if (!e)
       return;
-    i(!1);
-    const t = setTimeout(
-      () => i(!0),
-      (r == null ? void 0 : r.update) ?? 1e3
+    f(!1);
+    const l = setTimeout(
+      () => f(!0),
+      s?.update ?? 1e3
     );
     return () => {
-      clearTimeout(t);
+      clearTimeout(l);
     };
-  }, [r == null ? void 0 : r.update, s]), c(() => {
-    !s && a && i(!1);
-  }, [s, a]), n !== !0 ? /* @__PURE__ */ h(f.div, { ...g, className: d(o.root, p), children: [
-    T,
-    /* @__PURE__ */ l(f.div, { srOnly: !0, children: v })
-  ] }) : /* @__PURE__ */ h(f.div, { className: d(o.root, p), ...g, children: [
-    k,
-    s && /* @__PURE__ */ l("div", { className: o.overlay }),
-    s && /* @__PURE__ */ h(f.div, { className: o.message, children: [
-      /* @__PURE__ */ l(N, {}),
+  }, [s?.update, e]), n(() => {
+    !e && m && f(!1);
+  }, [e, m]), r !== !0 ? /* @__PURE__ */ a(i.div, { ...u, className: w(t.root, h), children: [
+    y,
+    /* @__PURE__ */ c(i.div, { srOnly: !0, children: k })
+  ] }) : /* @__PURE__ */ a(i.div, { className: w(t.root, h), ...u, children: [
+    S,
+    e && /* @__PURE__ */ c("div", { className: t.overlay }),
+    e && /* @__PURE__ */ a(i.div, { className: t.message, children: [
+      /* @__PURE__ */ c(I, {}),
       " ",
-      typeof s == "boolean" ? "Updating..." : s
+      typeof e == "boolean" ? "Updating..." : e
     ] })
   ] });
 };
 export {
-  A as ComponentLoading
+  z as ComponentLoading
 };

package/dist/patterns/Loading/components/DefaultLoading.js

@@ -6,7 +6,7 @@ import "../../../components/Inline/Inline.styles.js";
 import { IressInline as h } from "../../../components/Inline/Inline.js";
 import { IressText as u } from "../../../components/Text/Text.js";
 import { loading as g } from "../Loading.styles.js";
-import { s as x } from "../../../factory-DHLOr79I.js";
+import { s as x } from "../../../factory-oPXoMw9H.js";
 import { c as I } from "../../../cx-DN21T1EH.js";
 const D = ({
   children: s = /* @__PURE__ */ c(h, { gap: "sm", verticalAlign: "middle", children: [