@iress-oss/ids-components 6.0.0-alpha.3 → 6.0.0-alpha.30

package/dist/patterns/Loading/LoadingSuspense.js

@@ -1,53 +1,54 @@
-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 { jsxs as h, Fragment as S, jsx as u } from "react/jsx-runtime";
+import { useMemo as g, useRef as L, useState as j, useEffect as b, Suspense as R } from "react";
 import { IressLoading as l } from "./Loading.js";
-import { useSuspenseResource as I, uncacheSuspenseResource as L } from "./hooks/useSuspenseResource.js";
-const b = ({
+import { useSuspenseResource as w, uncacheSuspenseResource as F } from "./hooks/useSuspenseResource.js";
+const i = ({
   children: s,
   delay: o,
   onLoaded: f,
   pattern: e,
   startFrom: c,
-  ...i
+  ...d
 }) => {
-  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(() => {
+  const k = g(() => o || (e === "component" || e === "default" || e === "validate" ? 0 : e === "long" ? 1300 : 500), [o, e]), x = g(() => c || (e === "component" || e === "default" || e === "long" ? 0 : 250), [c, e]), t = L(!1), [n, I] = j(!1), m = l.shouldRender(n, k, x), r = n && !m;
+  b(() => {
     f?.();
   }, [r, f]);
-  const m = () => {
-    d.current || (d.current = !0, j(() => !0));
+  const a = () => {
+    t.current || (t.current = !0, I(() => !0));
   };
-  return e === "component" || e === "validate" ? /* @__PURE__ */ h(a, { children: [
+  return e === "component" || e === "validate" ? /* @__PURE__ */ h(S, { children: [
     /* @__PURE__ */ u(
       l,
       {
         pattern: e,
         loaded: n,
-        ...i,
+        ...d,
         children: r && s
       }
     ),
-    /* @__PURE__ */ u(g, { fallback: null, children: !r && /* @__PURE__ */ u(R, { onResolved: m, children: !n && s }) })
-  ] }) : /* @__PURE__ */ h(a, { children: [
-    t && /* @__PURE__ */ u(
+    /* @__PURE__ */ u(R, { fallback: null, children: !r && /* @__PURE__ */ u(v, { onResolved: a, children: !n && s }) })
+  ] }) : /* @__PURE__ */ h(S, { children: [
+    m && /* @__PURE__ */ u(
       l,
       {
         pattern: e,
         loaded: n,
-        ...i
+        ...d
       }
     ),
-    /* @__PURE__ */ u(g, { fallback: null, children: r ? s : /* @__PURE__ */ u(R, { onResolved: m, children: !n && s }) })
+    /* @__PURE__ */ u(R, { fallback: null, children: r ? s : /* @__PURE__ */ u(v, { onResolved: a, children: !n && s }) })
   ] });
 };
-b.use = I;
-b.uncache = L;
-const R = ({
+i.displayName = "IressLoadingSuspense";
+i.use = w;
+i.uncache = F;
+const v = ({
   onResolved: s,
   children: o
-}) => (v(() => {
+}) => (b(() => {
   s();
 }, [s]), o);
 export {
-  b as IressLoadingSuspense
+  i as IressLoadingSuspense
 };

package/dist/patterns/Loading/components/ComponentLoading.d.ts

@@ -0,0 +1,56 @@
+import { ReactNode } from 'react';
+import { IressStyledProps } from '../../../types';
+declare const templates: {
+    chart: import("react/jsx-runtime").JSX.Element;
+};
+export interface ComponentLoadingProps extends IressStyledProps {
+    /**
+     * The chart that is being loaded for the first time or being refreshed/updated.
+     */
+    children: ReactNode;
+    /**
+     * If set to `true`, will hide the skeleton and display the chart.
+     */
+    loaded?: boolean;
+    /**
+     * Use `pattern="component"` for the following use cases:
+     * - Component that is expected to be slow to load, such as a chart, table or large graphic.
+     * - Component that can be refreshed/updated with new data.
+     */
+    pattern?: 'component';
+    /**
+     * Only screen readers will see this message, it is changed to the `message` after the delay.
+     * @default 'Loading...'
+     */
+    screenReaderText?: ReactNode;
+    /**
+     * Which template to use as the skeleton, or you can use a ReactNode to customise the skeleton completely.
+     * @default 'chart'
+     */
+    template?: keyof typeof templates | Exclude<ReactNode, string | number | boolean | null>;
+    /**
+     * Set the timeouts for showing the skeleton and update messages.
+     */
+    timeout?: {
+        /**
+         * The time in milliseconds before the skeleton is displayed.
+         * @default 0
+         */
+        skeleton?: number;
+        /**
+         * The time in milliseconds before the update message is displayed.
+         * @default 1000
+         */
+        update?: number;
+    };
+    /**
+     * Set the chart to be updated. If a `ReactNode` is provided, it will be displayed as the message.
+     * If set to `true`, will display the default message `Updating...`.
+     */
+    update?: ReactNode;
+}
+export declare const ComponentLoading: {
+    ({ children, className, loaded, screenReaderText, template, timeout, update, ...restProps }: ComponentLoadingProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

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

@@ -1,15 +1,15 @@
-import { jsx as n, jsxs as m } from "react/jsx-runtime";
+import { jsxs as c, jsx as n } 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 I } from "../../../components/Spinner/Spinner.js";
+import { IressSpinner as N } from "../../../components/Spinner/Spinner.js";
 import "../../../components/Spinner/Spinner.styles.js";
-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 = {
+import { s as t } from "../../../factory-CcYfm2kB.js";
+import { loading as I } from "../Loading.styles.js";
+import { c as p } from "../../../cx-DN21T1EH.js";
+const u = {
   chart: /* @__PURE__ */ n(x, { mode: "rect", height: "250px" })
-}, z = ({
+}, L = ({
   children: d,
   className: a,
   loaded: i,
@@ -19,43 +19,44 @@ const p = {
   update: o,
   ...l
 }) => {
-  const [w, S] = f(!1), [k, v] = f(!1), s = N({
+  const [w, y] = f(!1), [S, k] = f(!1), s = I({
     pattern: "component",
     loaded: i,
     showIndicator: w && !i,
-    showMessage: k && !!o
-  }), y = T(() => typeof e == "string" && e in p ? p[e] : e, [e]);
+    showMessage: S && !!o
+  }), v = T(() => typeof e == "string" && e in u ? u[e] : e, [e]);
   return h(() => {
-    const c = setTimeout(
-      () => S(!0),
+    const m = setTimeout(
+      () => y(!0),
       r?.skeleton ?? 0
     );
     return () => {
-      clearTimeout(c);
+      clearTimeout(m);
     };
   }, [r?.skeleton]), h(() => {
     if (!o)
       return;
-    const c = setTimeout(
-      () => v(!0),
+    const m = setTimeout(
+      () => k(!0),
       r?.update ?? 1e3
     );
     return () => {
-      clearTimeout(c);
+      clearTimeout(m);
     };
-  }, [r?.update, o]), i !== !0 ? /* @__PURE__ */ m(t.div, { ...l, className: u(s.root, a), children: [
-    y,
+  }, [r?.update, o]), i !== !0 ? /* @__PURE__ */ c(t.div, { ...l, className: p(s.root, a), children: [
+    v,
     /* @__PURE__ */ n(t.div, { srOnly: !0, children: g })
-  ] }) : /* @__PURE__ */ m(t.div, { className: u(s.root, a), ...l, children: [
+  ] }) : /* @__PURE__ */ c(t.div, { className: p(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, {}),
+    o && /* @__PURE__ */ c(t.div, { className: s.message, children: [
+      /* @__PURE__ */ n(N, {}),
       " ",
       typeof o == "boolean" ? "Updating..." : o
     ] })
   ] });
 };
+L.displayName = "ComponentLoading";
 export {
-  z as ComponentLoading
+  L as ComponentLoading
 };

package/dist/patterns/Loading/components/DefaultLoading.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+import { IressStyledProps } from '../../../types';
+export interface DefaultLoadingProps extends IressStyledProps {
+    /**
+     * Message to display when the loading time is longer than expected.
+     * @default 'This is taking longer than expected...'
+     */
+    children?: ReactNode;
+    /**
+     * Only screen readers will see this message, it is changed to the `children` message after the delay.
+     * @default 'Loading...'
+     */
+    screenReaderText?: ReactNode;
+    /**
+     * Do not set the `pattern` prop when no other pattern can be applied. It will only show the loading message after a delay, and is intended for use when loading is not expected to take a long time.
+     * Example use cases:
+     * - Navigating between different routes
+     * - Calling an API within the page that does not require a loading state
+     */
+    pattern?: 'default';
+    /**
+     * Delay in milliseconds before the message is displayed.
+     * @default 3000
+     */
+    timeout?: number;
+}
+export declare const DefaultLoading: {
+    ({ children, className, screenReaderText, timeout, ...restProps }: DefaultLoadingProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

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

@@ -3,32 +3,33 @@ 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 { IressInline as u } from "../../../components/Inline/Inline.js";
+import { IressText as g } from "../../../components/Text/Text.js";
+import { loading as h } from "../Loading.styles.js";
+import { s as x } from "../../../factory-CcYfm2kB.js";
 import { c as I } from "../../../cx-DN21T1EH.js";
-const D = ({
-  children: s = /* @__PURE__ */ c(h, { gap: "sm", verticalAlign: "middle", children: [
+const T = ({
+  children: s = /* @__PURE__ */ c(u, { gap: "sm", verticalAlign: "middle", children: [
     /* @__PURE__ */ e(f, {}),
     " This is taking longer than expected..."
   ] }),
   className: i,
   screenReaderText: m = "Loading...",
-  timeout: r = 3e3,
-  ...n
+  timeout: t = 3e3,
+  ...a
 }) => {
-  const [t, a] = p(!1), o = g({
+  const [o, n] = p(!1), r = h({
     pattern: "default",
-    showIndicator: t
+    showIndicator: o
   });
   return d(() => {
-    const l = setTimeout(() => a(!0), r);
+    const l = setTimeout(() => n(!0), t);
     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 }) });
+  }, [t]), /* @__PURE__ */ e(x.div, { ...a, className: I(r.root, i), children: /* @__PURE__ */ e(g, { className: r.message, children: o ? s : m }) });
 };
+T.displayName = "DefaultLoading";
 export {
-  D as DefaultLoading
+  T as DefaultLoading
 };

package/dist/patterns/Loading/components/LongLoading.d.ts

@@ -0,0 +1,63 @@
+import { ReactNode } from 'react';
+import { IressProgressProps } from '../../../components/Progress';
+import { IressStyledProps } from '../../../types';
+export interface LongLoadingProps extends IressStyledProps {
+    /**
+     * The children are displayed while loading. This will be displayed above the progress bar and checklist.
+     */
+    children?: ReactNode;
+    /**
+     * An error to display if the loading fails. This will override the `messageList` and show an error message instead.
+     */
+    error?: ReactNode;
+    /**
+     * Estimated time in milliseconds for the loading to finish.
+     * @default 10000
+     */
+    estimatedFinishTime?: number;
+    /**
+     * If set to `true`, will start hiding the loading indicator. It is recommended to use this prop if you are using the `IressLoading.shouldRender` hook to achieve a smooth loading experience.
+     */
+    loaded?: boolean;
+    /**
+     * A checklist to display while loading. The key is the time when you want the item to be checked.
+     */
+    messageList: Record<number, ReactNode>;
+    /**
+     * The long loading pattern will display a checklist of items that are being loaded.
+     *
+     * Use `pattern="long"` for the following use cases:
+     * - Calling multiple slow APIs to load data
+     * - Loading results from AI
+     * - Processing a large amount of data as a queue (eg. bulk uploading or large media file uploads)
+     */
+    pattern?: 'long';
+    /**
+     * If provided, will use this to set the `value` of the progress bar. If not provided, will use the `estimatedFinishTime` to calculate the progress.
+     */
+    progress?: IressProgressProps['value'];
+    /**
+     * This is a render prop that allows you to override the default progress rendering.
+     * This is useful if you want to use a different progress component or if you want to add additional props to the progress bar.
+     */
+    renderProgress?: (props: Pick<IressProgressProps, 'max' | 'sectionTitle' | 'value'>) => ReactNode;
+    /**
+     * Set the timeouts for showing the progress bar and message.
+     */
+    timeout?: {
+        /**
+         * The time in milliseconds before this component begins to fade out (if `loaded` is set to `true`).
+         * @default 1300
+         */
+        loaded?: number;
+        /**
+         * The time in milliseconds before the checklist is displayed.
+         * @default 500
+         */
+        message?: number;
+    };
+}
+export declare const LongLoading: {
+    ({ children, className, error, estimatedFinishTime, loaded, messageList, progress, renderProgress, timeout, ...restProps }: LongLoadingProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

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

@@ -4,17 +4,16 @@ import { IressStack as M } from "../../../components/Stack/Stack.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";
+import { IressProgress as L } 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-oPXoMw9H.js";
-import { c as E } from "../../../cx-DN21T1EH.js";
-import { loading as G, loadingList as x } from "../Loading.styles.js";
-const L = ({ message: a, current: i, finished: c }) => {
-  const s = j(), r = x({ finished: c });
+import { propagateTestid as S } from "../../../helpers/utility/propagateTestid.js";
+import { useShowIndicator as B } from "../hooks/useShowIndicator.js";
+import { useEstimatedProgressValue as P } from "../hooks/useEstimatedProgressValue.js";
+import { s as V } from "../../../factory-CcYfm2kB.js";
+import { c as C } from "../../../cx-DN21T1EH.js";
+import { loading as E, loadingList as x } from "../Loading.styles.js";
+const G = ({ message: a, current: i, finished: n }) => {
+  const s = j(), r = x({ finished: n });
   return /* @__PURE__ */ d("li", { className: r.item, children: [
     /* @__PURE__ */ e(
       "svg",
@@ -36,7 +35,7 @@ const L = ({ message: a, current: i, finished: c }) => {
         )
       }
     ),
-    c && /* @__PURE__ */ d(
+    n && /* @__PURE__ */ d(
       "svg",
       {
         className: r.svg,
@@ -69,60 +68,61 @@ const L = ({ message: a, current: i, finished: c }) => {
     a,
     i && /* @__PURE__ */ e("span", { className: r.dots, children: /* @__PURE__ */ e(f, { srOnly: !0, children: "..." }) })
   ] });
-}, Z = ({
+}, T = ({
   children: a,
   className: i,
-  error: c,
+  error: n,
   estimatedFinishTime: s = 1e4,
   loaded: r,
-  messageList: l = {},
-  progress: y,
-  renderProgress: N = (m) => /* @__PURE__ */ e(S, { ...m, color: "colour.primary.fill" }),
+  messageList: c = {},
+  progress: N,
+  renderProgress: w = (m) => /* @__PURE__ */ e(L, { ...m, color: "colour.primary.fill" }),
   timeout: p,
   ...u
 }) => {
-  const m = P(
+  const m = B(
     r,
     p?.message,
     p?.loaded ?? 1300
-  ), w = Math.max(...Object.keys(l).map(Number)) + 500, o = V(
+  ), y = Math.max(...Object.keys(c).map(Number)) + 500, o = P(
     s,
     r,
-    y,
-    w
-  ), b = G({
+    N,
+    y
+  ), I = E({
     pattern: "long",
     showIndicator: m,
     loaded: r,
-    error: !!c
-  }), I = x(), g = h(() => {
-    const t = Object.keys(l), n = t.findIndex(
+    error: !!n
+  }), b = x(), g = h(() => {
+    const t = Object.keys(c), l = t.findIndex(
       (k) => Number(k) > o
     );
-    return r ? "" : t[n] ?? t[t.length - 1];
-  }, [l, r, o]), v = h(() => Object.entries(l).map(([t, n]) => ({
+    return r ? "" : t[l] ?? t[t.length - 1];
+  }, [c, r, o]), v = h(() => Object.entries(c).map(([t, l]) => ({
     timecode: Number(t),
-    message: n,
+    message: l,
     current: t === g,
     finished: o >= Number(t)
-  })), [l, g, o]);
-  return /* @__PURE__ */ e(C.div, { ...u, className: E(b.root, i), children: /* @__PURE__ */ e(
+  })), [c, g, o]);
+  return /* @__PURE__ */ e(V.div, { ...u, className: C(I.root, i), children: /* @__PURE__ */ e(
     O,
     {
-      "data-testid": B(u["data-testid"], "panel"),
+      "data-testid": S(u["data-testid"], "panel"),
       bg: "transparent",
-      children: c ?? /* @__PURE__ */ d(M, { gap: "md", children: [
+      children: n ?? /* @__PURE__ */ d(M, { gap: "md", children: [
         a,
-        N({
+        w({
           max: s,
           value: Math.min(o, s),
           sectionTitle: `${Math.min(o, s) / s * 100}% loaded`
         }),
-        /* @__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)) }) })
+        /* @__PURE__ */ e(f, { noGutter: !0, children: /* @__PURE__ */ e("ul", { className: b.root, children: v.map(({ timecode: t, ...l }) => /* @__PURE__ */ e(G, { ...l }, t)) }) })
       ] })
     }
   ) });
 };
+T.displayName = "LongLoading";
 export {
-  Z as LongLoading
+  T as LongLoading
 };

package/dist/patterns/Loading/components/PageLoading.d.ts

@@ -0,0 +1,48 @@
+import { ReactNode } from 'react';
+import { IressStyledProps } from '../../../types';
+declare const templates: {
+    page: () => import("react/jsx-runtime").JSX.Element;
+    form: () => import("react/jsx-runtime").JSX.Element;
+    dashboard: () => import("react/jsx-runtime").JSX.Element;
+};
+export interface PageLoadingProps extends Omit<IressStyledProps, 'children'> {
+    /**
+     * If provided, will switch the skeleton to this template. Use when you have critical content that can be displayed while loading to allow the user to see some content while the rest is loading.
+     */
+    critical?: ReactNode;
+    /**
+     * An error to display if the loading fails. This will override the skeleton.
+     */
+    error?: ReactNode;
+    /**
+     * If set to `true`, will start hiding the loading indicator. It is recommended to use this prop if you are using the `IressLoading.shouldRender` hook to achieve a smooth loading experience.
+     */
+    loaded?: boolean;
+    /**
+     * Use `pattern="page"` for the following use cases:
+     * - Detail page for a record
+     * - Form page
+     * - Article page
+     */
+    pattern?: 'page';
+    /**
+     * Only screen readers will see this message.
+     * @default 'Loading...'
+     */
+    screenReaderText?: ReactNode;
+    /**
+     * Which template to use as the skeleton, or you can use a ReactNode to customise the skeleton completely.
+     * @default 'page'
+     */
+    template?: keyof typeof templates | Exclude<ReactNode, string | number | boolean | null>;
+    /**
+     * Delay in milliseconds before the skeleton is displayed.
+     * @default 500
+     */
+    timeout?: number;
+}
+export declare const PageLoading: {
+    ({ className, critical, error, loaded, screenReaderText, template, timeout, ...restProps }: PageLoadingProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};