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

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]"
         }
       }
     },
@@ -29,8 +30,8 @@ const s = t({
           left: "[50%]",
           transform: "translate(-50%, -50%)",
           width: "[fit-content]",
-          px: "spacing.200",
-          py: "spacing.100",
+          px: "spacing.2",
+          py: "spacing.1",
           textStyle: "typography.body.sm",
           bg: "colour.neutral.20",
           color: "colour.neutral.70",
@@ -60,8 +61,8 @@ const s = t({
           zIndex: "600"
         },
         message: {
-          px: "spacing.400",
-          py: "spacing.200",
+          px: "spacing.4",
+          py: "spacing.2",
           bg: "colour.neutral.20",
           color: "colour.neutral.70",
           border: "divider",
@@ -81,7 +82,7 @@ const s = t({
           width: "overlay.sm"
         },
         message: {
-          p: "spacing.1200"
+          p: "spacing.10"
         }
       },
       page: {
@@ -94,8 +95,8 @@ const s = t({
           opacity: 0,
           transition: "[opacity 0.2s linear]",
           position: "absolute",
-          top: "spacing.000",
-          left: "spacing.000"
+          top: "spacing.0",
+          left: "spacing.0"
         },
         message: {
           opacity: 1,
@@ -131,10 +132,10 @@ const s = t({
         },
         message: {
           position: "absolute",
-          left: "spacing.000",
+          left: "spacing.0",
           width: "[max-content]",
           color: "colour.neutral.70",
-          padding: "spacing.200",
+          padding: "spacing.2",
           bg: "colour.neutral.10",
           textStyle: "typography.body.md",
           animationStyle: "loading-fade-next",
@@ -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,18 +308,18 @@ const s = t({
   defaultVariants: {
     pattern: "default"
   }
-}), a = t({
+}), s = t({
   slots: ["root", "item", "dots", "svg", "circle", "tick", "marker"],
   base: {
     root: {
-      pl: "spacing.600",
+      pl: "spacing.6",
       listStyle: "none"
     },
     item: {
       position: "relative",
       transition: "all",
       transitionDelay: "1.2s",
-      pl: "spacing.100"
+      pl: "spacing.1"
     },
     dots: {
       display: "inline-block",
@@ -324,9 +336,9 @@ const s = t({
       borderRadius: "[50%]",
       display: "block",
       position: "absolute",
-      top: "spacing.100",
+      top: "spacing.1",
       right: "[100%]",
-      mr: "spacing.050"
+      mr: "spacing.1"
     },
     marker: {
       fill: "colour.neutral.80"
@@ -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,53 +1,53 @@
-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";
-const k = ({
+import { jsxs as h, Fragment as a, jsx as u } from "react/jsx-runtime";
+import { useMemo as S, useRef as w, useState as F, useEffect as v, Suspense as g } from "react";
+import { IressLoading as l } from "./Loading.js";
+import { useSuspenseResource as I, uncacheSuspenseResource as L } from "./hooks/useSuspenseResource.js";
+const b = ({
   children: s,
-  delay: r,
-  onLoaded: l,
+  delay: o,
+  onLoaded: f,
   pattern: e,
   startFrom: c,
-  ...t
+  ...i
 }) => {
-  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);
-  b(() => {
-    u && !o && (C(!0), l == null || l());
-  }, [u, l, o]);
-  const h = () => {
-    m.current || (m.current = !0, j(() => !0));
+  const k = S(() => o || (e === "component" || e === "default" || e === "validate" ? 0 : e === "long" ? 1300 : 500), [o, e]), x = S(() => c || (e === "component" || e === "default" || e === "long" ? 0 : 250), [c, e]), d = w(!1), [n, j] = F(!1), t = l.shouldRender(n, k, x), r = n && !t;
+  v(() => {
+    f?.();
+  }, [r, f]);
+  const m = () => {
+    d.current || (d.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(
+      l,
       {
         pattern: e,
-        loaded: u,
-        ...t,
-        children: f && s
+        loaded: n,
+        ...i,
+        children: r && 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(g, { fallback: null, children: !r && /* @__PURE__ */ u(R, { onResolved: m, children: !n && s }) })
+  ] }) : /* @__PURE__ */ h(a, { children: [
+    t && /* @__PURE__ */ u(
+      l,
       {
         pattern: e,
-        loaded: u,
-        ...t
+        loaded: n,
+        ...i
       }
     ),
-    /* @__PURE__ */ n(R, { fallback: null, children: f ? s : /* @__PURE__ */ n(v, { onResolved: h, children: !u && s }) })
+    /* @__PURE__ */ u(g, { fallback: null, children: r ? s : /* @__PURE__ */ u(R, { onResolved: m, children: !n && s }) })
   ] });
 };
-k.use = I;
-k.uncache = E;
-const v = ({
+b.use = I;
+b.uncache = L;
+const R = ({
   onResolved: s,
-  children: r
-}) => (b(() => {
+  children: o
+}) => (v(() => {
   s();
-}, [s]), r);
+}, [s]), o);
 export {
-  k as IressLoadingSuspense
+  b as IressLoadingSuspense
 };

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

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