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

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

@@ -1,26 +1,26 @@
 import { jsx as t, jsxs as r } from "react/jsx-runtime";
-import { useState as h, useMemo as j, useEffect as m } from "react";
+import { useState as u, useMemo as j, useEffect as w } from "react";
 import "../../../components/Stack/Stack.styles.js";
-import { IressStack as c } from "../../../components/Stack/Stack.js";
+import { IressStack as m } from "../../../components/Stack/Stack.js";
 import { IressSkeleton as e } from "../../../components/Skeleton/Skeleton.js";
 import "../../../components/Skeleton/Skeleton.styles.js";
 import "../../../components/Container/Container.styles.js";
-import { IressContainer as g } from "../../../components/Container/Container.js";
+import { IressContainer as p } from "../../../components/Container/Container.js";
 import "../../../components/Row/Row.styles.js";
-import { IressRow as a } from "../../../components/Row/Row.js";
+import { IressRow as n } from "../../../components/Row/Row.js";
 import "../../../components/Col/Col.styles.js";
-import { IressCol as y } from "../../../components/Col/Col.js";
+import { IressCol as c } from "../../../components/Col/Col.js";
 import "../../../components/Inline/Inline.styles.js";
 import { IressInline as D } from "../../../components/Inline/Inline.js";
 import { IressDivider as z } from "../../../components/Divider/Divider.js";
 import "../../../components/Divider/Divider.styles.js";
 import { IressCard as E } from "../../../components/Card/Card.js";
 import "../../../components/Card/Card.styles.js";
-import { s as T } from "../../../factory-oPXoMw9H.js";
+import { s as x } from "../../../factory-oPXoMw9H.js";
 import { loading as F } from "../Loading.styles.js";
-import { c as H } from "../../../cx-DN21T1EH.js";
-import { propagateTestid as I } from "../../../helpers/utility/propagateTestid.js";
-const p = () => /* @__PURE__ */ t(y, { span: "4", children: /* @__PURE__ */ t(
+import { c as M } from "../../../cx-DN21T1EH.js";
+import { propagateTestid as S } from "../../../helpers/utility/propagateTestid.js";
+const l = () => /* @__PURE__ */ t(c, { span: "4", children: /* @__PURE__ */ t(
   E,
   {
     stretch: !0,
@@ -28,15 +28,15 @@ const p = () => /* @__PURE__ */ t(y, { span: "4", children: /* @__PURE__ */ t(
     media: /* @__PURE__ */ t(e, { mode: "rect", height: "300px" }),
     children: /* @__PURE__ */ t(e, { textStyle: "typography.body.md", width: "50%" })
   }
-) }), M = () => /* @__PURE__ */ t(g, { children: /* @__PURE__ */ t(a, { gutter: "lg", verticalAlign: "stretch", children: /* @__PURE__ */ t(y, { children: /* @__PURE__ */ r(c, { gap: "md", children: [
+) }), O = () => /* @__PURE__ */ t(p, { children: /* @__PURE__ */ t(n, { gutter: "lg", verticalAlign: "stretch", children: /* @__PURE__ */ t(c, { children: /* @__PURE__ */ r(m, { gap: "md", children: [
   /* @__PURE__ */ t(e, { textStyle: "typography.heading.2", width: "75%" }),
   /* @__PURE__ */ t(e, { mode: "rect", height: "200px" })
-] }) }) }) }), O = () => /* @__PURE__ */ t(g, { children: /* @__PURE__ */ t(a, { gutter: "lg", verticalAlign: "stretch", children: /* @__PURE__ */ t(y, { children: /* @__PURE__ */ r(c, { gap: "md", children: [
+] }) }) }) }), R = () => /* @__PURE__ */ t(p, { children: /* @__PURE__ */ t(n, { gutter: "lg", verticalAlign: "stretch", children: /* @__PURE__ */ t(c, { children: /* @__PURE__ */ r(m, { gap: "md", children: [
   /* @__PURE__ */ t(e, { textStyle: "typography.heading.2", width: "75%" }),
   /* @__PURE__ */ t(e, { mode: "rect", height: "200px" }),
   /* @__PURE__ */ t(e, { textStyle: "typography.body.md", width: "100px" })
-] }) }) }) }), R = () => /* @__PURE__ */ t(g, { children: /* @__PURE__ */ r(c, { gap: "lg", children: [
-  /* @__PURE__ */ r(a, { horizontalAlign: "between", verticalAlign: "middle", children: [
+] }) }) }) }), q = () => /* @__PURE__ */ t(p, { children: /* @__PURE__ */ r(m, { gap: "lg", children: [
+  /* @__PURE__ */ r(n, { horizontalAlign: "between", verticalAlign: "middle", children: [
     /* @__PURE__ */ t(e, { textStyle: "typography.heading.1", width: "25%" }),
     /* @__PURE__ */ r(D, { gap: "lg", children: [
       /* @__PURE__ */ t(e, { textStyle: "typography.body.lg", width: "200px" }),
@@ -44,73 +44,70 @@ const p = () => /* @__PURE__ */ t(y, { span: "4", children: /* @__PURE__ */ t(
     ] })
   ] }),
   /* @__PURE__ */ t(z, {}),
-  /* @__PURE__ */ r(a, { gutter: "lg", children: [
-    /* @__PURE__ */ t(p, {}),
-    /* @__PURE__ */ t(p, {}),
-    /* @__PURE__ */ t(p, {})
+  /* @__PURE__ */ r(n, { gutter: "lg", children: [
+    /* @__PURE__ */ t(l, {}),
+    /* @__PURE__ */ t(l, {}),
+    /* @__PURE__ */ t(l, {})
   ] })
-] }) }), v = {
-  page: M,
-  form: O,
-  dashboard: R
-}, dt = ({
-  className: b,
-  critical: d,
-  error: s,
-  loaded: f,
-  screenReaderText: C = "Loading...",
-  template: i = "page",
-  timeout: u = 500,
-  ...n
+] }) }), I = {
+  page: O,
+  form: R,
+  dashboard: q
+}, nt = ({
+  className: T,
+  critical: s,
+  error: d,
+  loaded: v,
+  screenReaderText: b = "Loading...",
+  template: o = "page",
+  timeout: g = 500,
+  ...a
 }) => {
-  const [k, x] = h(!1), [w, A] = h(!1), [S, L] = h(!1), l = F({
-    error: !!s,
+  const [C, k] = u(!1), A = v !== !0 && C, [y, L] = u(!1), f = !!s, h = F({
+    error: !!d,
     pattern: "page",
-    showCritical: S,
-    showIndicator: k && !w
+    showCritical: y,
+    showIndicator: A && !f
   }), N = j(() => {
-    if (typeof i == "string" && i in v) {
-      const o = v[i];
-      return /* @__PURE__ */ t(o, {});
+    if (typeof o == "string" && o in I) {
+      const i = I[o];
+      return /* @__PURE__ */ t(i, {});
     }
-    return i;
-  }, [i]);
-  return m(() => {
-    const o = setTimeout(() => x(!0), u);
+    return o;
+  }, [o]);
+  return w(() => {
+    const i = setTimeout(() => k(!0), g);
     return () => {
-      clearTimeout(o);
+      clearTimeout(i);
     };
-  }, [u]), m(() => {
-    f === !0 && x(!1);
-  }, [f]), m(() => {
-    if (!d)
+  }, [g]), w(() => {
+    if (!s)
       return;
-    A(!0);
-    const o = setTimeout(() => L(!0), 200);
+    const i = setTimeout(() => L(!0), 200);
     return () => {
-      clearTimeout(o);
+      clearTimeout(i);
     };
-  }, [d]), /* @__PURE__ */ r(T.div, { className: H(b, l.root), ...n, children: [
-    s,
-    !s && !S && /* @__PURE__ */ t(
+  }, [s]), /* @__PURE__ */ r(x.div, { className: M(T, h.root), ...a, children: [
+    d,
+    !d && !y && /* @__PURE__ */ t(
       "div",
       {
-        className: l.message,
-        "data-testid": I(n["data-testid"], "skeleton"),
+        className: h.message,
+        "data-testid": S(a["data-testid"], "skeleton"),
         children: N
       }
     ),
-    !s && w && /* @__PURE__ */ t(
+    !d && f && /* @__PURE__ */ t(
       "div",
       {
-        className: l.critical,
-        "data-testid": I(n["data-testid"], "critical"),
-        children: d
+        className: h.critical,
+        "data-testid": S(a["data-testid"], "critical"),
+        children: s
       }
     ),
-    /* @__PURE__ */ t(T.div, { srOnly: !0, children: C })
+    /* @__PURE__ */ t(x.div, { srOnly: !0, children: b })
   ] });
 };
 export {
-  dt as PageLoading
+  nt as PageLoading
 };

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

@@ -1,5 +1,5 @@
 import { jsx as o, jsxs as u } from "react/jsx-runtime";
-import { I as p } from "../../../Button-D6AL0bia.js";
+import { I as p } from "../../../Button-mmhMLwp9.js";
 import "../../../components/Button/CloseButton/CloseButton.js";
 import { useState as h, useEffect as g } from "react";
 import { loading as x } from "../Loading.styles.js";

package/dist/patterns/Loading/hooks/useEstimatedProgressValue.js

@@ -1,6 +1,6 @@
 import { useState as A, useMemo as E, useEffect as V } from "react";
 const l = (r, u = !1, n, t = 0) => {
-  const [o, c] = A(n ?? 0), f = E(() => !u && !n && w(o, r, t), [
+  const [o, w] = A(n ?? 0), c = E(() => !u && !n && a(o, r, t), [
     r,
     t,
     u,
@@ -8,22 +8,18 @@ const l = (r, u = !1, n, t = 0) => {
     o
   ]);
   return V(() => {
-    if (!f && o < r) {
-      c(r);
-      return;
-    }
-    const q = performance.now(), P = () => {
-      const x = Math.max(performance.now() - q, 0), a = o + x;
-      c(a), w(a, r, t) && requestAnimationFrame(P);
+    const q = performance.now(), f = () => {
+      const x = Math.max(performance.now() - q, 0), P = o + x;
+      w(P), a(P, r, t) && requestAnimationFrame(f);
     };
-    requestAnimationFrame(P);
+    requestAnimationFrame(f);
   }, [
     r,
-    f,
+    c,
     t,
     o
-  ]), n !== void 0 ? u ? r : n : o;
-}, w = (r, u, n) => r < u || r < n;
+  ]), n !== void 0 ? u ? r : n : !c && o < r ? r : o;
+}, a = (r, u, n) => r < u || r < n;
 export {
   l as useEstimatedProgressValue
 };

package/dist/patterns/Loading/hooks/useShouldRenderLoading.js

@@ -1,24 +1,24 @@
-import { useState as i, useRef as m, useEffect as f } from "react";
-const p = (e, o = 500, r = 250, c = 250) => {
-  const [s, t] = i(r === 0), n = m(0);
+import { useState as m, useRef as T, useEffect as f } from "react";
+const a = (e, o = 500, t = 250, c = 250) => {
+  const [i, r] = m(t === 0), n = T(0);
   return f(() => {
     const u = setTimeout(() => {
-      e || (t(!0), n.current = performance.now());
-    }, r);
+      e || (r(!0), n.current = performance.now());
+    }, t);
     return () => clearTimeout(u);
-  }, [r, e]), f(() => {
+  }, [t, e]), f(() => {
     if (e !== !0)
       return;
-    if (!n.current || performance.now() - n.current < c) {
-      t(!1);
-      return;
-    }
     const u = setTimeout(() => {
-      t(!1);
+      (!n.current || performance.now() - n.current < c) && r(!1);
+    }, 0), s = setTimeout(() => {
+      r(!1);
     }, o);
-    return () => clearTimeout(u);
-  }, [e, o, c]), e !== !0 || s;
+    return () => {
+      clearTimeout(u), clearTimeout(s);
+    };
+  }, [e, o, c]), e !== !0 || i;
 };
 export {
-  p as useShouldRenderLoading
+  a as useShouldRenderLoading
 };