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

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

@@ -1,132 +1,128 @@
-import { jsx as c, jsxs as g } from "react/jsx-runtime";
-import { IressStack as w } from "../../../components/Stack/Stack.js";
-import { useMemo as f, useId as y } from "react";
-import { c as h } from "../../../index-2QXL0WYc.js";
-import { l as m } from "../../../Loading.module-BU91nTNp.js";
-import { IressText as M } from "../../../components/Text/Text.js";
-import { IressPanel as S } from "../../../components/Panel/Panel.js";
-import { IressProgress as j } from "../../../components/Progress/Progress.js";
-import { GlobalCSSClass as L } from "../../../enums.js";
-import { propagateTestid as O } from "../../../helpers/utility/propagateTestid.js";
-import { useShowIndicator as C } from "../hooks/useShowIndicator.js";
-import { useEstimatedProgressValue as G } from "../hooks/useEstimatedProgressValue.js";
-const P = "ids-long-loading--root-v5160", V = "ids-long-loading--panel-v5160", B = "ids-long-loading--dots-v5160", E = "ids-long-loading--check-list-v5160", R = "ids-long-loading--check-list-item-v5160", T = "ids-long-loading--check-list-item__done-v5160", U = "ids-long-loading--checked-v5160", $ = "ids-long-loading--checked__circle-v5160", q = "ids-long-loading--checked__check-v5160", s = {
-  root: P,
-  panel: V,
-  dots: B,
-  checkList: E,
-  checkListItem: R,
-  checkListItem__done: T,
-  checked: U,
-  checked__circle: $,
-  checked__check: q
-}, z = () => {
-  const t = y();
-  return /* @__PURE__ */ g(
-    "svg",
-    {
-      className: s.checked,
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 52 52",
-      "aria-labelledby": t,
-      children: [
-        /* @__PURE__ */ c("title", { id: t, children: "Finished: " }),
-        /* @__PURE__ */ c(
+import { jsx as e, jsxs as p } 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 { IressPanel as O } from "../../../components/Panel/Panel.js";
+import "../../../components/Panel/Panel.styles.js";
+import { IressProgress as S } from "../../../components/Progress/Progress.js";
+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 { 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: [
+    /* @__PURE__ */ e(
+      "svg",
+      {
+        className: r.svg,
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 52 52",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ e(
           "circle",
           {
-            className: s.checked__circle,
+            className: r.marker,
             cx: "26",
             cy: "26",
-            r: "25",
-            fill: "none"
-          }
-        ),
-        /* @__PURE__ */ c(
-          "path",
-          {
-            className: s.checked__check,
-            fill: "none",
-            d: "M14.1 27.2l7.1 7.2 16.7-16.8"
+            r: "10",
+            fill: "currentColor",
+            stroke: "none"
           }
         )
-      ]
-    }
-  );
-}, ce = ({
-  children: t,
-  className: v,
-  error: k,
-  estimatedFinishTime: r = 1e4,
-  loaded: d,
-  messageList: l = {},
-  progress: N,
-  renderProgress: u = (a) => /* @__PURE__ */ c(j, { ...a }),
-  timeout: n,
-  ...p
+      }
+    ),
+    l && /* @__PURE__ */ p(
+      "svg",
+      {
+        className: r.svg,
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 52 52",
+        "aria-labelledby": t,
+        children: [
+          /* @__PURE__ */ e("title", { id: t, children: "Finished: " }),
+          /* @__PURE__ */ e(
+            "circle",
+            {
+              className: r.circle,
+              cx: "26",
+              cy: "26",
+              r: "25",
+              fill: "none"
+            }
+          ),
+          /* @__PURE__ */ e(
+            "path",
+            {
+              className: r.tick,
+              fill: "none",
+              d: "M14.1 27.2l7.1 7.2 16.7-16.8"
+            }
+          )
+        ]
+      }
+    ),
+    i,
+    m && /* @__PURE__ */ e("span", { className: r.dots, children: /* @__PURE__ */ e(u, { srOnly: !0, children: "..." }) })
+  ] });
+}, Z = ({
+  children: i,
+  className: m,
+  error: l,
+  estimatedFinishTime: t = 1e4,
+  loaded: r,
+  messageList: n = {},
+  progress: y,
+  renderProgress: N = (d) => /* @__PURE__ */ e(S, { ...d, color: "colour.primary.fill" }),
+  timeout: o,
+  ...g
 }) => {
-  const a = C(
-    d,
-    n == null ? void 0 : n.message,
-    (n == null ? void 0 : n.loaded) ?? 1300
-  ), I = Math.max(...Object.keys(l).map(Number)) + 500, o = G(
+  const d = 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,
     r,
-    d,
-    N,
-    I
-  ), _ = f(() => {
-    const e = Object.keys(l), i = e.findIndex(
-      (x) => Number(x) > o
+    y,
+    w
+  ), b = G({
+    pattern: "long",
+    showIndicator: d,
+    loaded: r,
+    error: !!l
+  }), I = x(), h = f(() => {
+    const s = Object.keys(n), a = s.findIndex(
+      (k) => Number(k) > c
     );
-    return d ? "" : e[i] ?? e[e.length - 1];
-  }, [l, d, o]), b = f(() => Object.entries(l).map(([e, i]) => ({
-    timecode: Number(e),
-    message: i,
-    current: e === _,
-    finished: o >= Number(e)
-  })), [l, _, o]);
-  return /* @__PURE__ */ c(
-    "div",
+    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(
+    O,
     {
-      className: h(s.root, v, m["fade-in"], {
-        [m["fade-in--active"]]: a
-      }),
-      ...p,
-      children: /* @__PURE__ */ c(
-        S,
-        {
-          "data-testid": O(p["data-testid"], "panel"),
-          className: h(s.panel, {
-            [m.error]: !!k
-          }),
-          children: k ?? /* @__PURE__ */ g(w, { gutter: "md", children: [
-            t,
-            u({
-              className: s.progress,
-              min: 0,
-              max: r,
-              value: Math.min(o, r),
-              sectionTitle: `${Math.min(o, r) / r * 100}% loaded`
-            }),
-            /* @__PURE__ */ c(M, { variant: "lead", noGutter: !0, children: /* @__PURE__ */ c("ul", { className: s.checkList, children: b.map((e) => /* @__PURE__ */ g(
-              "li",
-              {
-                className: h(s.checkListItem, {
-                  [s.checkListItem__done]: e.finished
-                }),
-                children: [
-                  e.finished && /* @__PURE__ */ c(z, {}),
-                  e.message,
-                  e.current && /* @__PURE__ */ c("span", { className: s.dots, children: /* @__PURE__ */ c("span", { className: L.SROnly, children: "..." }) })
-                ]
-              },
-              e.timecode
-            )) }) })
-          ] })
-        }
-      )
+      "data-testid": B(g["data-testid"], "panel"),
+      bg: "transparent",
+      children: l ?? /* @__PURE__ */ p(M, { gap: "md", children: [
+        i,
+        N({
+          max: t,
+          value: Math.min(c, t),
+          sectionTitle: `${Math.min(c, t) / t * 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)) }) })
+      ] })
     }
-  );
+  ) });
 };
 export {
-  ce as LongLoading
+  Z as LongLoading
 };

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

@@ -1,14 +1,113 @@
-import "react/jsx-runtime";
-import "react";
-import "../../../components/Stack/Stack.js";
-import "../../../components/Skeleton/Skeleton.js";
-import "../../../components/Container/Container.js";
-import { ah as n } from "../../../LoadingSuspense-D0TO0TDT.js";
-import "../../../components/Col/Col.js";
-import "../../../components/Divider/Divider.js";
-import "../../../components/Card/Card.js";
-import "../../../index-2QXL0WYc.js";
-import "../../../Loading.module-BU91nTNp.js";
+import { jsx as t, jsxs as r } from "react/jsx-runtime";
+import { useState as l, useMemo as N, useEffect as h } from "react";
+import "../../../components/Stack/Stack.styles.js";
+import { IressStack as p } 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 "../../../components/Row/Row.styles.js";
+import { IressRow as s } from "../../../components/Row/Row.js";
+import "../../../components/Col/Col.styles.js";
+import { IressCol as g } 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 "../../../components/Divider/Divider.styles.js";
+import { IressCard as z } 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,
+  {
+    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: [
+  /* @__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: [
+  /* @__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: [
+    /* @__PURE__ */ t(e, { textStyle: "typography.heading.1", width: "25%" }),
+    /* @__PURE__ */ r(j, { 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, {})
+  ] })
+] }) }), I = {
+  page: H,
+  form: M,
+  dashboard: O
+}, at = ({
+  className: v,
+  critical: a,
+  loaded: y,
+  screenReaderText: b = "Loading...",
+  template: i = "page",
+  timeout: f = 500,
+  ...d
+}) => {
+  const [C, u] = l(!1), [x, k] = l(!1), [w, A] = l(!1), n = E({
+    pattern: "page",
+    showCritical: w,
+    showIndicator: C && !x
+  }), L = N(() => {
+    if (typeof i == "string" && i in I) {
+      const o = I[i];
+      return /* @__PURE__ */ t(o, {});
+    }
+    return i;
+  }, [i]);
+  return h(() => {
+    const o = setTimeout(() => u(!0), f);
+    return () => {
+      clearTimeout(o);
+    };
+  }, [f]), h(() => {
+    y === !0 && u(!1);
+  }, [y]), h(() => {
+    if (!a)
+      return;
+    k(!0);
+    const o = setTimeout(() => A(!0), 200);
+    return () => {
+      clearTimeout(o);
+    };
+  }, [a]), /* @__PURE__ */ r(S.div, { className: F(v, n.root), ...d, children: [
+    !w && /* @__PURE__ */ t(
+      "div",
+      {
+        className: n.message,
+        "data-testid": T(d["data-testid"], "skeleton"),
+        children: L
+      }
+    ),
+    x && /* @__PURE__ */ t(
+      "div",
+      {
+        className: n.critical,
+        "data-testid": T(d["data-testid"], "critical"),
+        children: a
+      }
+    ),
+    /* @__PURE__ */ t(S.div, { srOnly: !0, children: b })
+  ] });
+};
 export {
-  n as PageLoading
+  at as PageLoading
 };

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

@@ -1,101 +1,95 @@
-import { jsx as a, jsxs as w } from "react/jsx-runtime";
+import { jsx as o, 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 y, useEffect as u, useRef as I, useMemo as T } from "react";
-import { IressProgress as k } from "../../../components/Progress/Progress.js";
-import { c as M } from "../../../index-2QXL0WYc.js";
-import { l as n } from "../../../Loading.module-BU91nTNp.js";
-import { IressText as v } from "../../../components/Text/Text.js";
-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";
-const H = "ids-start-up-loading--root-v5160", P = "ids-start-up-loading--progress-v5160", h = {
-  root: H,
-  progress: P
-}, U = ({
-  children: g,
-  messageList: e,
-  progressValue: c,
-  screenReaderText: s,
+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 "../../../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,
+  screenReaderText: e,
   show: t,
   ...l
 }) => {
-  const o = I(null), d = T(() => {
-    const r = Object.keys(e ?? {}).filter(
-      (f) => Number(f) <= c
+  const a = v(null), c = I(() => {
+    const r = Object.keys(s ?? {}).filter(
+      (d) => Number(d) <= n
     );
     return r[r.length - 1];
-  }, [e, c]);
-  u(() => {
-    o.current && (o.current.classList.remove(n["slide-next"]), o.current.offsetHeight, o.current.classList.add(n["slide-next"]));
-  }, [d]);
-  const p = t ? g : s;
-  return /* @__PURE__ */ a(
-    v,
-    {
-      align: "center",
-      className: M(h.message, n["fade-in"], {
-        [n["fade-in--active"]]: t
-      }),
-      ...l,
-      children: /* @__PURE__ */ a("div", { ref: o, children: d ? e == null ? void 0 : e[Number(d)] : p })
-    }
-  );
-}, K = ({
-  className: g,
-  children: e = /* @__PURE__ */ a(v, { mode: "muted", children: "One moment please..." }),
-  "data-testid": c,
-  estimatedFinishTime: s = 3e3,
+  }, [s, n]);
+  return M(() => {
+    a.current && (a.current.classList.remove(
+      x({ animationStyle: "loading-slide-next" })
+    ), a.current.offsetHeight, a.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 }) });
+}, W = ({
+  className: p,
+  children: s = /* @__PURE__ */ o(S, { color: "colour.neutral.70", children: "One moment please..." }),
+  "data-testid": n,
+  estimatedFinishTime: e = 3e3,
   loaded: t,
   messageList: l,
-  progress: o,
-  renderProgress: d = (m) => /* @__PURE__ */ a(k, { ...m }),
-  screenReaderText: p = "Loading...",
+  progress: a,
+  renderProgress: c = (f) => /* @__PURE__ */ o(T, { ...f }),
+  screenReaderText: m = "Loading...",
   timeout: r,
-  ...f
+  ...d
 }) => {
-  const m = E(
+  const f = O(
     t,
     r == null ? void 0 : r.progress,
     r == null ? void 0 : r.loaded
-  ), [x, N] = y(!1), S = Math.max(...Object.keys(l ?? {}).map(Number)) + 500, i = R(
-    s,
+  ), [h, w] = u(!1), b = Math.max(...Object.keys(l ?? {}).map(Number)) + 500, g = E(
+    e,
     t,
-    o,
-    S
-  );
-  return u(() => {
-    const b = setTimeout(
-      () => N(!0),
+    a,
+    b
+  ), i = R({
+    pattern: "start-up",
+    instant: (r == null ? void 0 : r.progress) === 0,
+    showIndicator: f,
+    showMessage: h
+  });
+  return M(() => {
+    const y = setTimeout(
+      () => w(!0),
       (r == null ? void 0 : r.message) ?? 2500
     );
     return () => {
-      clearTimeout(b);
+      clearTimeout(y);
     };
-  }, [r == null ? void 0 : r.message]), /* @__PURE__ */ a(
+  }, [r == null ? void 0 : r.message]), /* @__PURE__ */ o(
     "div",
     {
-      "data-testid": c,
-      className: M(h.root, g, n["fade-in"], {
-        [n["fade-in--active"]]: m
-      }),
-      ...f,
-      children: /* @__PURE__ */ w(j, { gutter: "md", ...f, children: [
-        d({
-          className: h.progress,
-          min: 0,
-          max: s,
-          value: Math.min(i, s),
-          sectionTitle: `${Math.min(i, s) / s * 100}% loaded`
+      ...d,
+      className: A(i.root, p),
+      "data-testid": n,
+      children: /* @__PURE__ */ N(j, { gap: "md", ...d, children: [
+        c({
+          max: e,
+          value: Math.min(g, e),
+          sectionTitle: `${Math.min(g, e) / e * 100}% loaded`
         }),
-        /* @__PURE__ */ a(
-          U,
+        /* @__PURE__ */ o(
+          H,
           {
-            "data-testid": O(c, "message"),
+            className: i.message,
+            "data-testid": k(n, "message"),
             messageList: l,
-            progressValue: i,
-            screenReaderText: p,
-            show: x,
-            children: e
+            progressValue: g,
+            screenReaderText: m,
+            show: h,
+            children: s
           }
         )
       ] })
@@ -103,5 +97,5 @@ const H = "ids-start-up-loading--root-v5160", P = "ids-start-up-loading--progres
   );
 };
 export {
-  K as StartUpLoading
+  W as StartUpLoading
 };

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

@@ -1,9 +1,40 @@
-import "react/jsx-runtime";
-import { af as d } from "../../../LoadingSuspense-D0TO0TDT.js";
-import "../../../index-2QXL0WYc.js";
-import "react";
-import "../../../components/Text/Text.js";
-import "../../../Loading.module-BU91nTNp.js";
+import { jsx as o, jsxs as u } from "react/jsx-runtime";
+import { I as p } from "../../../Button-BXzmntRi.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 { c as b } from "../../../cx-DN21T1EH.js";
+const k = ({
+  children: m,
+  className: n,
+  loading: t = !1,
+  message: c = "This is taking longer than expected...",
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Pattern is not used
+  pattern: y = "validate",
+  position: l = "bottom",
+  renderButton: r = (e) => /* @__PURE__ */ o(p, { ...e, type: "submit", children: "Submit" }),
+  timeout: s = 2500,
+  ...f
+}) => {
+  const [e, a] = h(
+    s === 0 && !!t
+  ), i = x({ pattern: "validate", position: l, showMessage: e });
+  return g(() => {
+    if (!t) {
+      a(!1);
+      return;
+    }
+    const d = setTimeout(() => {
+      a(!0);
+    }, s);
+    return () => clearTimeout(d);
+  }, [t, s]), e ? /* @__PURE__ */ u(v.div, { ...f, className: b(i.root, n), children: [
+    r({ loading: t }),
+    m,
+    /* @__PURE__ */ o("div", { className: i.message, children: c })
+  ] }) : r({ loading: t });
+};
 export {
-  d as ValidateLoading
+  k as ValidateLoading
 };

package/dist/patterns/Loading/index.js

@@ -1,5 +1,6 @@
-import { P as a, Q as o } from "../../LoadingSuspense-D0TO0TDT.js";
+import { IressLoading as r } from "./Loading.js";
+import { IressLoadingSuspense as n } from "./LoadingSuspense.js";
 export {
-  a as IressLoading,
-  o as IressLoadingSuspense
+  r as IressLoading,
+  n as IressLoadingSuspense
 };