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

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

@@ -0,0 +1,382 @@
+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",
+          opacity: "[1 !important]"
+        }
+      }
+    },
+    instant: {
+      true: {}
+    },
+    loaded: {
+      true: {}
+    },
+    pattern: {
+      component: {
+        root: {
+          position: "relative",
+          opacity: 0,
+          transition: "[opacity 0.3s ease-in-out]"
+        },
+        message: {
+          position: "absolute",
+          top: "[50%]",
+          left: "[50%]",
+          transform: "translate(-50%, -50%)",
+          width: "[fit-content]",
+          px: "spacing.200",
+          py: "spacing.100",
+          textStyle: "typography.body.sm",
+          bg: "colour.neutral.20",
+          color: "colour.neutral.70",
+          border: "divider",
+          borderRadius: "radius.system.badge",
+          opacity: 0,
+          transition: "[opacity 0.3s ease-in-out]",
+          zIndex: "100"
+        },
+        overlay: {
+          position: "absolute",
+          inset: "[0]",
+          opacity: 0.75,
+          bg: "colour.neutral.10",
+          transition: "[opacity 0.3s ease-in-out]",
+          zIndex: "100"
+        }
+      },
+      default: {
+        root: {
+          position: "absolute",
+          top: "[0]",
+          left: "[50%]",
+          transform: "translateX(-50%)",
+          opacity: 0,
+          transition: "[opacity 0.3s ease-in-out]",
+          zIndex: "600"
+        },
+        message: {
+          px: "spacing.400",
+          py: "spacing.200",
+          bg: "colour.neutral.20",
+          color: "colour.neutral.70",
+          border: "divider",
+          borderTopWidth: "0",
+          borderRadius: "radius.system.badge",
+          transition: "[transform 0.3s ease-in-out]",
+          transform: "translateY(-100%)"
+        }
+      },
+      long: {
+        root: {
+          borderRadius: "radius.system.layout",
+          bg: "colour.neutral.20",
+          mx: "auto",
+          opacity: 0,
+          transition: "[opacity 0.3s ease-in-out]",
+          width: "overlay.sm"
+        },
+        message: {
+          p: "spacing.1200"
+        }
+      },
+      page: {
+        root: {
+          position: "relative",
+          opacity: 0,
+          transition: "[opacity 0.2s linear]"
+        },
+        critical: {
+          opacity: 0,
+          transition: "[opacity 0.2s linear]",
+          position: "absolute",
+          top: "spacing.000",
+          left: "spacing.000"
+        },
+        message: {
+          opacity: 1,
+          transition: "[opacity 0.2s linear]"
+        }
+      },
+      "start-up": {
+        root: {
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          opacity: 0,
+          transition: "[opacity 0.3s ease-in-out]",
+          position: "fixed",
+          top: "[0]",
+          left: "[0]",
+          right: "[0]",
+          bottom: "[0]",
+          zIndex: "600",
+          bg: "colour.neutral.10"
+        },
+        message: {
+          width: "overlay.sm",
+          maxWidth: "[75vw]",
+          opacity: 0,
+          transition: "[opacity 0.3s ease-in-out]"
+        }
+      },
+      validate: {
+        root: {
+          position: "relative"
+        },
+        message: {
+          position: "absolute",
+          left: "spacing.000",
+          width: "[max-content]",
+          color: "colour.neutral.70",
+          padding: "spacing.200",
+          bg: "colour.neutral.10",
+          textStyle: "typography.body.md",
+          animationStyle: "loading-fade-next",
+          display: "inline-grid"
+        }
+      }
+    },
+    position: {
+      bottom: {
+        message: {
+          top: "[100%]"
+        }
+      },
+      top: {
+        message: {
+          bottom: "[100%]"
+        }
+      },
+      right: {
+        message: {
+          position: "static"
+        }
+      }
+    },
+    showCritical: {
+      true: {}
+    },
+    showIndicator: {
+      true: {}
+    },
+    showMessage: {
+      true: {}
+    }
+  },
+  compoundVariants: [
+    {
+      pattern: "component",
+      showIndicator: !0,
+      css: {
+        root: {
+          opacity: 1
+        }
+      }
+    },
+    {
+      pattern: "component",
+      loaded: !0,
+      css: {
+        root: {
+          width: "[fit-content]",
+          opacity: 1
+        }
+      }
+    },
+    {
+      pattern: "component",
+      showMessage: !0,
+      css: {
+        message: {
+          opacity: 1
+        },
+        overlay: {
+          opacity: 0.9
+        }
+      }
+    },
+    {
+      pattern: "default",
+      showIndicator: !0,
+      css: {
+        root: {
+          opacity: 1
+        },
+        message: {
+          transform: "none"
+        }
+      }
+    },
+    {
+      pattern: "long",
+      showIndicator: !0,
+      css: {
+        root: {
+          opacity: 1
+        }
+      }
+    },
+    {
+      pattern: "page",
+      showIndicator: !0,
+      css: {
+        root: {
+          opacity: 1
+        }
+      }
+    },
+    {
+      pattern: "page",
+      showCritical: !0,
+      showIndicator: !0,
+      css: {
+        message: {
+          opacity: 0
+        }
+      }
+    },
+    {
+      pattern: "page",
+      showCritical: !0,
+      showIndicator: !1,
+      css: {
+        root: {
+          opacity: 1
+        },
+        critical: {
+          position: "static",
+          opacity: 1
+        }
+      }
+    },
+    {
+      pattern: "page",
+      error: !0,
+      css: {
+        root: {
+          borderRadius: "radius.system.layout",
+          py: "xl"
+        }
+      }
+    },
+    {
+      pattern: "start-up",
+      showIndicator: !0,
+      css: {
+        root: {
+          opacity: 1
+        }
+      }
+    },
+    {
+      pattern: "start-up",
+      showMessage: !0,
+      css: {
+        message: {
+          opacity: 1
+        }
+      }
+    },
+    {
+      pattern: "start-up",
+      instant: !0,
+      css: {
+        root: {
+          transition: "[none]",
+          opacity: 1
+        }
+      }
+    },
+    {
+      pattern: "start-up",
+      showMessage: !0,
+      instant: !0,
+      css: {
+        root: {
+          transition: "[opacity 0.3s ease-in-out]"
+        }
+      }
+    }
+  ],
+  defaultVariants: {
+    pattern: "default"
+  }
+}), s = t({
+  slots: ["root", "item", "dots", "svg", "circle", "tick", "marker"],
+  base: {
+    root: {
+      pl: "spacing.600",
+      listStyle: "none"
+    },
+    item: {
+      position: "relative",
+      transition: "all",
+      transitionDelay: "1.2s",
+      pl: "spacing.100"
+    },
+    dots: {
+      display: "inline-block",
+      width: "[0.7em]",
+      aspectRatio: 6,
+      clipPath: "inset(0 100% 0 0)",
+      animation: "loadingDots 1s steps(4) infinite",
+      animationDelay: "0.5s",
+      layerStyle: "dots"
+    },
+    svg: {
+      width: "[1em]",
+      height: "[1em]",
+      borderRadius: "[50%]",
+      display: "block",
+      position: "absolute",
+      top: "spacing.100",
+      right: "[100%]",
+      mr: "spacing.050"
+    },
+    marker: {
+      fill: "colour.neutral.80"
+    },
+    circle: {
+      strokeDasharray: 166,
+      strokeDashoffset: 166,
+      strokeWidth: 2,
+      strokeMiterlimit: 10,
+      stroke: "[currentColor]",
+      animation: "loadingItemStroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards"
+    },
+    tick: {
+      transformOrigin: "50% 50%",
+      strokeDasharray: 48,
+      strokeDashoffset: 48,
+      animation: "loadingItemStroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards"
+    }
+  },
+  variants: {
+    finished: {
+      true: {
+        svg: {
+          strokeWidth: 2,
+          color: "colour.system.success.fill",
+          stroke: "colour.system.success.onFill",
+          strokeMiterlimit: 10,
+          animation: "loadingItemFill 0.4s ease-in-out 0.4s forwards, loadingItemScale 0.3s ease-in-out 0.9s both"
+        },
+        item: {
+          opacity: 0.5,
+          filter: "[grayscale(1)]"
+        }
+      }
+    }
+  }
+});
+export {
+  a as loading,
+  s as loadingList
+};

package/dist/patterns/Loading/LoadingSuspense.js

@@ -1,7 +1,53 @@
-import "react/jsx-runtime";
-import "react";
-import { Q as i } from "../../LoadingSuspense-BtzikVZk.js";
-import "./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: i,
+  pattern: e,
+  startFrom: o,
+  ...d
+}) => {
+  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(() => {
+    n && !l && (C(!0), i?.());
+  }, [n, i, l]);
+  const m = () => {
+    t.current || (t.current = !0, j(() => !0));
+  };
+  return e === "component" || e === "validate" ? /* @__PURE__ */ h(a, { children: [
+    /* @__PURE__ */ u(
+      f,
+      {
+        pattern: e,
+        loaded: n,
+        ...d,
+        children: c && s
+      }
+    ),
+    /* @__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: n,
+        ...d
+      }
+    ),
+    /* @__PURE__ */ u(R, { fallback: null, children: c ? s : /* @__PURE__ */ u(v, { onResolved: m, children: !n && s }) })
+  ] });
+};
+k.use = I;
+k.uncache = L;
+const v = ({
+  onResolved: s,
+  children: r
+}) => (b(() => {
+  s();
+}, [s]), r);
 export {
-  i as IressLoadingSuspense
+  k as IressLoadingSuspense
 };

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

@@ -1,10 +1,66 @@
-import "react/jsx-runtime";
-import "react";
-import "../../../components/Skeleton/Skeleton.js";
-import { ag as e } from "../../../LoadingSuspense-BtzikVZk.js";
-import "../../../Loading.module-Bpupt31Y.js";
-import "../../../index-cbHCAGLB.js";
-import "../../../components/Text/Text.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 I } from "../../../components/Spinner/Spinner.js";
+import "../../../components/Spinner/Spinner.styles.js";
+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 [v, p] = g(!1), [m, f] = g(!1), t = N({
+    pattern: "component",
+    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(l);
+    };
+  }, [s?.skeleton]), n(() => {
+    if (!e)
+      return;
+    f(!1);
+    const l = setTimeout(
+      () => f(!0),
+      s?.update ?? 1e3
+    );
+    return () => {
+      clearTimeout(l);
+    };
+  }, [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 e == "boolean" ? "Updating..." : e
+    ] })
+  ] });
+};
 export {
-  e as ComponentLoading
+  z as ComponentLoading
 };

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

@@ -1,9 +1,34 @@
-import "react/jsx-runtime";
-import "react";
-import { ae as e } from "../../../LoadingSuspense-BtzikVZk.js";
-import "../../../components/Text/Text.js";
-import "../../../index-cbHCAGLB.js";
-import "../../../Loading.module-Bpupt31Y.js";
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import { useState as p, useEffect as d } from "react";
+import { IressSpinner as f } from "../../../components/Spinner/Spinner.js";
+import "../../../components/Spinner/Spinner.styles.js";
+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-oPXoMw9H.js";
+import { c as I } from "../../../cx-DN21T1EH.js";
+const D = ({
+  children: s = /* @__PURE__ */ c(h, { gap: "sm", verticalAlign: "middle", children: [
+    /* @__PURE__ */ e(f, {}),
+    " This is taking longer than expected..."
+  ] }),
+  className: i,
+  screenReaderText: m = "Loading...",
+  timeout: r = 3e3,
+  ...n
+}) => {
+  const [t, a] = p(!1), o = g({
+    pattern: "default",
+    showIndicator: t
+  });
+  return d(() => {
+    const l = setTimeout(() => a(!0), r);
+    return () => {
+      clearTimeout(l);
+    };
+  }, [r]), /* @__PURE__ */ e(x.div, { ...n, className: I(o.root, i), children: /* @__PURE__ */ e(u, { className: o.message, children: t ? s : m }) });
+};
 export {
-  e as DefaultLoading
+  D as DefaultLoading
 };