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

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

@@ -1,8 +1,8 @@
-import { jsx as e, jsxs as p } from "react/jsx-runtime";
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
 import "../../../components/Stack/Stack.styles.js";
 import { IressStack as M } from "../../../components/Stack/Stack.js";
-import { useMemo as f, useId as j } from "react";
-import { IressText as u } from "../../../components/Text/Text.js";
+import { useMemo as h, useId as j } from "react";
+import { IressText as f } from "../../../components/Text/Text.js";
 import { IressPanel as O } from "../../../components/Panel/Panel.js";
 import "../../../components/Panel/Panel.styles.js";
 import { IressProgress as S } from "../../../components/Progress/Progress.js";
@@ -10,12 +10,12 @@ import "../../../components/Progress/Progress.styles.js";
 import { propagateTestid as B } from "../../../helpers/utility/propagateTestid.js";
 import { useShowIndicator as P } from "../hooks/useShowIndicator.js";
 import { useEstimatedProgressValue as V } from "../hooks/useEstimatedProgressValue.js";
-import { s as C } from "../../../factory-DHLOr79I.js";
+import { s as C } from "../../../factory-oPXoMw9H.js";
 import { c as E } from "../../../cx-DN21T1EH.js";
 import { loading as G, loadingList as x } from "../Loading.styles.js";
-const L = ({ message: i, current: m, finished: l }) => {
-  const t = j(), r = x({ finished: l });
-  return /* @__PURE__ */ p("li", { className: r.item, children: [
+const L = ({ message: a, current: i, finished: c }) => {
+  const s = j(), r = x({ finished: c });
+  return /* @__PURE__ */ d("li", { className: r.item, children: [
     /* @__PURE__ */ e(
       "svg",
       {
@@ -36,15 +36,15 @@ const L = ({ message: i, current: m, finished: l }) => {
         )
       }
     ),
-    l && /* @__PURE__ */ p(
+    c && /* @__PURE__ */ d(
       "svg",
       {
         className: r.svg,
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 52 52",
-        "aria-labelledby": t,
+        "aria-labelledby": s,
         children: [
-          /* @__PURE__ */ e("title", { id: t, children: "Finished: " }),
+          /* @__PURE__ */ e("title", { id: s, children: "Finished: " }),
           /* @__PURE__ */ e(
             "circle",
             {
@@ -66,59 +66,59 @@ const L = ({ message: i, current: m, finished: l }) => {
         ]
       }
     ),
-    i,
-    m && /* @__PURE__ */ e("span", { className: r.dots, children: /* @__PURE__ */ e(u, { srOnly: !0, children: "..." }) })
+    a,
+    i && /* @__PURE__ */ e("span", { className: r.dots, children: /* @__PURE__ */ e(f, { srOnly: !0, children: "..." }) })
   ] });
 }, Z = ({
-  children: i,
-  className: m,
-  error: l,
-  estimatedFinishTime: t = 1e4,
+  children: a,
+  className: i,
+  error: c,
+  estimatedFinishTime: s = 1e4,
   loaded: r,
-  messageList: n = {},
+  messageList: l = {},
   progress: y,
-  renderProgress: N = (d) => /* @__PURE__ */ e(S, { ...d, color: "colour.primary.fill" }),
-  timeout: o,
-  ...g
+  renderProgress: N = (m) => /* @__PURE__ */ e(S, { ...m, color: "colour.primary.fill" }),
+  timeout: p,
+  ...u
 }) => {
-  const d = P(
+  const m = P(
     r,
-    o == null ? void 0 : o.message,
-    (o == null ? void 0 : o.loaded) ?? 1300
-  ), w = Math.max(...Object.keys(n).map(Number)) + 500, c = V(
-    t,
+    p?.message,
+    p?.loaded ?? 1300
+  ), w = Math.max(...Object.keys(l).map(Number)) + 500, o = V(
+    s,
     r,
     y,
     w
   ), b = G({
     pattern: "long",
-    showIndicator: d,
+    showIndicator: m,
     loaded: r,
-    error: !!l
-  }), I = x(), h = f(() => {
-    const s = Object.keys(n), a = s.findIndex(
-      (k) => Number(k) > c
+    error: !!c
+  }), I = x(), g = h(() => {
+    const t = Object.keys(l), n = t.findIndex(
+      (k) => Number(k) > o
     );
-    return r ? "" : s[a] ?? s[s.length - 1];
-  }, [n, r, c]), v = f(() => Object.entries(n).map(([s, a]) => ({
-    timecode: Number(s),
-    message: a,
-    current: s === h,
-    finished: c >= Number(s)
-  })), [n, h, c]);
-  return /* @__PURE__ */ e(C.div, { ...g, className: E(b.root, m), children: /* @__PURE__ */ e(
+    return r ? "" : t[n] ?? t[t.length - 1];
+  }, [l, r, o]), v = h(() => Object.entries(l).map(([t, n]) => ({
+    timecode: Number(t),
+    message: n,
+    current: t === g,
+    finished: o >= Number(t)
+  })), [l, g, o]);
+  return /* @__PURE__ */ e(C.div, { ...u, className: E(b.root, i), children: /* @__PURE__ */ e(
     O,
     {
-      "data-testid": B(g["data-testid"], "panel"),
+      "data-testid": B(u["data-testid"], "panel"),
       bg: "transparent",
-      children: l ?? /* @__PURE__ */ p(M, { gap: "md", children: [
-        i,
+      children: c ?? /* @__PURE__ */ d(M, { gap: "md", children: [
+        a,
         N({
-          max: t,
-          value: Math.min(c, t),
-          sectionTitle: `${Math.min(c, t) / t * 100}% loaded`
+          max: s,
+          value: Math.min(o, s),
+          sectionTitle: `${Math.min(o, s) / s * 100}% loaded`
         }),
-        /* @__PURE__ */ e(u, { textStyle: "typography.body.lg", noGutter: !0, children: /* @__PURE__ */ e("ul", { className: I.root, children: v.map(({ timecode: s, ...a }) => /* @__PURE__ */ e(L, { ...a }, s)) }) })
+        /* @__PURE__ */ e(f, { textStyle: "typography.body.lg", noGutter: !0, children: /* @__PURE__ */ e("ul", { className: I.root, children: v.map(({ timecode: t, ...n }) => /* @__PURE__ */ e(L, { ...n }, t)) }) })
       ] })
     }
   ) });

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

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

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

@@ -1,95 +1,97 @@
-import { jsx as o, jsxs as N } from "react/jsx-runtime";
+import { jsx as r, jsxs as N } from "react/jsx-runtime";
 import "../../../components/Stack/Stack.styles.js";
 import { IressStack as j } from "../../../components/Stack/Stack.js";
-import { useState as u, useEffect as M, useRef as v, useMemo as I } from "react";
-import { IressProgress as T } from "../../../components/Progress/Progress.js";
+import { useState as v, useEffect as M, useRef as I, useMemo as T } from "react";
+import { IressProgress as k } from "../../../components/Progress/Progress.js";
 import "../../../components/Progress/Progress.styles.js";
 import { IressText as S } from "../../../components/Text/Text.js";
-import { propagateTestid as k } from "../../../helpers/utility/propagateTestid.js";
-import { useShowIndicator as O } from "../hooks/useShowIndicator.js";
-import { useEstimatedProgressValue as E } from "../hooks/useEstimatedProgressValue.js";
-import { loading as R } from "../Loading.styles.js";
-import { c as x } from "../../../cva-B2x59Dph.js";
-import { c as A } from "../../../cx-DN21T1EH.js";
-const H = ({
-  children: p,
-  messageList: s,
-  progressValue: n,
+import { propagateTestid as O } from "../../../helpers/utility/propagateTestid.js";
+import { useShowIndicator as E } from "../hooks/useShowIndicator.js";
+import { useEstimatedProgressValue as R } from "../hooks/useEstimatedProgressValue.js";
+import { loading as A } from "../Loading.styles.js";
+import { c as x } from "../../../css-fGu_jDvv.js";
+import { c as H } from "../../../cx-DN21T1EH.js";
+const L = ({
+  children: l,
+  messageList: o,
+  progressValue: a,
   screenReaderText: e,
-  show: t,
-  ...l
+  show: c,
+  ...m
 }) => {
-  const a = v(null), c = I(() => {
-    const r = Object.keys(s ?? {}).filter(
-      (d) => Number(d) <= n
+  const s = I(null), n = T(() => {
+    const i = Object.keys(o ?? {}).filter(
+      (t) => Number(t) <= a
     );
-    return r[r.length - 1];
-  }, [s, n]);
+    return i[i.length - 1];
+  }, [o, a]);
   return M(() => {
-    a.current && (a.current.classList.remove(
+    s.current && (s.current.classList.remove(
       x({ animationStyle: "loading-slide-next" })
-    ), a.current.offsetHeight, a.current.classList.add(
+    ), s.current.offsetHeight, s.current.classList.add(
       x({ animationStyle: "loading-slide-next" })
     ));
-  }, [c]), /* @__PURE__ */ o(S, { textAlign: "center", ...l, children: /* @__PURE__ */ o("div", { ref: a, children: c ? s == null ? void 0 : s[Number(c)] : t ? p : e }) });
+  }, [n]), /* @__PURE__ */ r(S, { textAlign: "center", ...m, children: /* @__PURE__ */ r("div", { ref: s, children: n ? o?.[Number(n)] : c ? l : e }) });
 }, W = ({
-  className: p,
-  children: s = /* @__PURE__ */ o(S, { color: "colour.neutral.70", children: "One moment please..." }),
-  "data-testid": n,
+  className: l,
+  children: o = /* @__PURE__ */ r(S, { color: "colour.neutral.70", children: "One moment please..." }),
+  "data-testid": a,
   estimatedFinishTime: e = 3e3,
-  loaded: t,
-  messageList: l,
-  progress: a,
-  renderProgress: c = (f) => /* @__PURE__ */ o(T, { ...f }),
-  screenReaderText: m = "Loading...",
-  timeout: r,
-  ...d
+  loaded: c,
+  messageList: m,
+  progress: s,
+  renderProgress: n = (d) => /* @__PURE__ */ r(k, { ...d }),
+  screenReaderText: u = "Loading...",
+  startFrom: i,
+  timeout: t,
+  ...p
 }) => {
-  const f = O(
-    t,
-    r == null ? void 0 : r.progress,
-    r == null ? void 0 : r.loaded
-  ), [h, w] = u(!1), b = Math.max(...Object.keys(l ?? {}).map(Number)) + 500, g = E(
+  const d = E(
+    c,
+    t?.progress,
+    t?.loaded
+  ), [f, w] = v(!1), b = Math.max(...Object.keys(m ?? {}).map(Number)) + 500, g = R(
     e,
-    t,
-    a,
+    c,
+    s,
     b
-  ), i = R({
+  ), h = A({
     pattern: "start-up",
-    instant: (r == null ? void 0 : r.progress) === 0,
-    showIndicator: f,
-    showMessage: h
+    instant: t?.progress === 0,
+    showIndicator: d,
+    showMessage: f
   });
   return M(() => {
     const y = setTimeout(
       () => w(!0),
-      (r == null ? void 0 : r.message) ?? 2500
+      t?.message ?? 2500
     );
     return () => {
       clearTimeout(y);
     };
-  }, [r == null ? void 0 : r.message]), /* @__PURE__ */ o(
+  }, [t?.message]), /* @__PURE__ */ r(
     "div",
     {
-      ...d,
-      className: A(i.root, p),
-      "data-testid": n,
-      children: /* @__PURE__ */ N(j, { gap: "md", ...d, children: [
-        c({
+      ...p,
+      className: H(h.root, l),
+      "data-testid": a,
+      children: /* @__PURE__ */ N(j, { gap: "md", ...p, children: [
+        n({
+          min: i,
           max: e,
           value: Math.min(g, e),
           sectionTitle: `${Math.min(g, e) / e * 100}% loaded`
         }),
-        /* @__PURE__ */ o(
-          H,
+        /* @__PURE__ */ r(
+          L,
           {
-            className: i.message,
-            "data-testid": k(n, "message"),
-            messageList: l,
+            className: h.message,
+            "data-testid": O(a, "message"),
+            messageList: m,
             progressValue: g,
-            screenReaderText: m,
-            show: h,
-            children: s
+            screenReaderText: u,
+            show: f,
+            children: o
           }
         )
       ] })

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

@@ -1,9 +1,9 @@
 import { jsx as o, jsxs as u } from "react/jsx-runtime";
-import { I as p } from "../../../Button-BXzmntRi.js";
+import { I as p } from "../../../Button-D6AL0bia.js";
 import "../../../components/Button/CloseButton/CloseButton.js";
 import { useState as h, useEffect as g } from "react";
 import { loading as x } from "../Loading.styles.js";
-import { s as v } from "../../../factory-DHLOr79I.js";
+import { s as v } from "../../../factory-oPXoMw9H.js";
 import { c as b } from "../../../cx-DN21T1EH.js";
 const k = ({
   children: m,

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

@@ -1,19 +1,19 @@
-import { useState as c, useEffect as s } from "react";
-const m = (e = !1, o = 500, r = 200) => {
-  const [n, u] = c(!1);
-  return s(() => {
-    if (e !== !0)
+import { useState as c, useEffect as n } from "react";
+const m = (r = !1, t = 500, o = 200) => {
+  const [s, u] = c(t === 0);
+  return n(() => {
+    if (r !== !0)
       return;
-    const t = setTimeout(() => u(!1), r);
+    const e = setTimeout(() => u(!1), o);
     return () => {
-      clearTimeout(t);
+      clearTimeout(e);
     };
-  }, [e, r]), s(() => {
-    const t = setTimeout(() => u(!0), o);
+  }, [r, o]), n(() => {
+    const e = setTimeout(() => u(!0), t);
     return () => {
-      clearTimeout(t);
+      clearTimeout(e);
     };
-  }, [o]), n;
+  }, [t]), s;
 };
 export {
   m as useShowIndicator