@iress-oss/ids-components 5.13.1 → 5.14.0

package/dist/patterns/Loading/Loading.js

@@ -1,7 +1,8 @@
 import "react/jsx-runtime";
-import "../../StartUpLoading-DpO7RfDY.js";
-import { Q as t } from "../../Loading-CZ64hUvP.js";
+import "./components/StartUpLoading.js";
+import { Q as s } from "../../LoadingSuspense-BDiikfSh.js";
 import "./hooks/useShouldRenderLoading.js";
+import "./components/LongLoading.js";
 export {
-  t as IressLoading
+  s as IressLoading
 };

package/dist/patterns/Loading/LoadingSuspense.js

@@ -0,0 +1,7 @@
+import "react/jsx-runtime";
+import "react";
+import { R as i } from "../../LoadingSuspense-BDiikfSh.js";
+import "./hooks/useSuspenseResource.js";
+export {
+  i as IressLoadingSuspense
+};

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

@@ -1,9 +1,9 @@
 import "react/jsx-runtime";
 import "react";
 import "../../../components/Skeleton/Skeleton.js";
-import { ag as e } from "../../../Loading-CZ64hUvP.js";
-import "../../../StartUpLoading-DpO7RfDY.js";
-import "../../../index-Cu0xwYjD.js";
+import { ah as e } from "../../../LoadingSuspense-BDiikfSh.js";
+import "../../../Loading.module-nxv4vxd0.js";
+import "../../../index-2QXL0WYc.js";
 import "../../../components/Text/Text.js";
 export {
   e as ComponentLoading

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

@@ -1,9 +1,9 @@
 import "react/jsx-runtime";
 import "react";
-import { ae as e } from "../../../Loading-CZ64hUvP.js";
+import { af as f } from "../../../LoadingSuspense-BDiikfSh.js";
 import "../../../components/Text/Text.js";
-import "../../../index-Cu0xwYjD.js";
-import "../../../StartUpLoading-DpO7RfDY.js";
+import "../../../index-2QXL0WYc.js";
+import "../../../Loading.module-nxv4vxd0.js";
 export {
-  e as DefaultLoading
+  f as DefaultLoading
 };

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

@@ -0,0 +1,132 @@
+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-nxv4vxd0.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-v5140", V = "ids-long-loading--panel-v5140", B = "ids-long-loading--dots-v5140", E = "ids-long-loading--check-list-v5140", R = "ids-long-loading--check-list-item-v5140", T = "ids-long-loading--check-list-item__done-v5140", U = "ids-long-loading--checked-v5140", $ = "ids-long-loading--checked__circle-v5140", q = "ids-long-loading--checked__check-v5140", 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(
+          "circle",
+          {
+            className: s.checked__circle,
+            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"
+          }
+        )
+      ]
+    }
+  );
+}, 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
+}) => {
+  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(
+    r,
+    d,
+    N,
+    I
+  ), _ = f(() => {
+    const e = Object.keys(l), i = e.findIndex(
+      (x) => Number(x) > o
+    );
+    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",
+    {
+      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
+            )) }) })
+          ] })
+        }
+      )
+    }
+  );
+};
+export {
+  ce as LongLoading
+};

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

@@ -3,12 +3,12 @@ import "react";
 import "../../../components/Stack/Stack.js";
 import "../../../components/Skeleton/Skeleton.js";
 import "../../../components/Container/Container.js";
-import { ah as n } from "../../../Loading-CZ64hUvP.js";
+import { ai as s } from "../../../LoadingSuspense-BDiikfSh.js";
 import "../../../components/Col/Col.js";
 import "../../../components/Divider/Divider.js";
 import "../../../components/Card/Card.js";
-import "../../../index-Cu0xwYjD.js";
-import "../../../StartUpLoading-DpO7RfDY.js";
+import "../../../index-2QXL0WYc.js";
+import "../../../Loading.module-nxv4vxd0.js";
 export {
-  n as PageLoading
+  s as PageLoading
 };

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

@@ -1,11 +1,107 @@
-import "react/jsx-runtime";
-import "../../../components/Stack/Stack.js";
-import "react";
-import "../../../components/Progress/Progress.js";
-import "../../../index-Cu0xwYjD.js";
-import { S as e } from "../../../StartUpLoading-DpO7RfDY.js";
-import "../../../components/Text/Text.js";
-import "../../../helpers/utility/propagateTestid.js";
+import { jsx as a, jsxs as w } from "react/jsx-runtime";
+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-nxv4vxd0.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-v5140", P = "ids-start-up-loading--progress-v5140", h = {
+  root: H,
+  progress: P
+}, U = ({
+  children: g,
+  messageList: e,
+  progressValue: c,
+  screenReaderText: s,
+  show: t,
+  ...l
+}) => {
+  const o = I(null), d = T(() => {
+    const r = Object.keys(e ?? {}).filter(
+      (f) => Number(f) <= c
+    );
+    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,
+  loaded: t,
+  messageList: l,
+  progress: o,
+  renderProgress: d = (m) => /* @__PURE__ */ a(k, { ...m }),
+  screenReaderText: p = "Loading...",
+  timeout: r,
+  ...f
+}) => {
+  const m = E(
+    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,
+    t,
+    o,
+    S
+  );
+  return u(() => {
+    const b = setTimeout(
+      () => N(!0),
+      (r == null ? void 0 : r.message) ?? 2500
+    );
+    return () => {
+      clearTimeout(b);
+    };
+  }, [r == null ? void 0 : r.message]), /* @__PURE__ */ a(
+    "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`
+        }),
+        /* @__PURE__ */ a(
+          U,
+          {
+            "data-testid": O(c, "message"),
+            messageList: l,
+            progressValue: i,
+            screenReaderText: p,
+            show: x,
+            children: e
+          }
+        )
+      ] })
+    }
+  );
+};
 export {
-  e as StartUpLoading
+  K as StartUpLoading
 };

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

@@ -1,9 +1,9 @@
 import "react/jsx-runtime";
-import { af as d } from "../../../Loading-CZ64hUvP.js";
-import "../../../index-Cu0xwYjD.js";
+import { ag as d } from "../../../LoadingSuspense-BDiikfSh.js";
+import "../../../index-2QXL0WYc.js";
 import "react";
 import "../../../components/Text/Text.js";
-import "../../../StartUpLoading-DpO7RfDY.js";
+import "../../../Loading.module-nxv4vxd0.js";
 export {
   d as ValidateLoading
 };

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

@@ -0,0 +1,29 @@
+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), [
+    r,
+    t,
+    u,
+    n,
+    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);
+    };
+    requestAnimationFrame(P);
+  }, [
+    r,
+    f,
+    t,
+    o
+  ]), n !== void 0 ? u ? r : n : o;
+}, w = (r, u, n) => r < u || r < n;
+export {
+  l as useEstimatedProgressValue
+};

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

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

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

@@ -0,0 +1,20 @@
+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)
+      return;
+    const t = setTimeout(() => u(!1), r);
+    return () => {
+      clearTimeout(t);
+    };
+  }, [e, r]), s(() => {
+    const t = setTimeout(() => u(!0), o);
+    return () => {
+      clearTimeout(t);
+    };
+  }, [o]), n;
+};
+export {
+  m as useShowIndicator
+};

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

@@ -0,0 +1,27 @@
+import { useMemo as c } from "react";
+const a = (e) => {
+  let r = "pending", n, o;
+  const u = e.then(
+    (t) => {
+      r = "success", n = t;
+    },
+    (t) => {
+      r = "error", o = t;
+    }
+  );
+  return {
+    read() {
+      if (r === "pending") throw u;
+      if (r === "error") throw o;
+      return n;
+    }
+  };
+}, s = /* @__PURE__ */ new WeakMap(), d = (e) => c(() => (s.has(e) || s.set(e, a(e())), s.get(e)), [e]).read(), i = (e, r = 1e3) => {
+  setTimeout(() => {
+    s.delete(e);
+  }, r);
+};
+export {
+  i as uncacheSuspenseResource,
+  d as useSuspenseResource
+};

package/dist/patterns/Loading/index.js

@@ -1,4 +1,5 @@
-import { Q as s } from "../../Loading-CZ64hUvP.js";
+import { Q as a, R as o } from "../../LoadingSuspense-BDiikfSh.js";
 export {
-  s as IressLoading
+  a as IressLoading,
+  o as IressLoadingSuspense
 };

package/dist/src/components/Popover/Popover.types.d.ts

@@ -142,6 +142,7 @@ export interface PopoverContextValue extends PopoverStateHookReturn, PopoverAria
     interactions: ReturnType<typeof useInteractions>;
     list: MutableRefObject<(HTMLElement | null)[]>;
     type?: PopoverTypes;
+    setActiveIndex: (value: number | null) => void;
     setShowWithReason: (flag: boolean, e?: Event, reason?: OpenChangeReason) => void;
     setVirtualFocus?: (node: PopoverVirtualNode | null) => void;
 }

package/dist/src/components/Popover/components/NestedPopoverActivator.d.ts

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react';
+import { PopoverContextValue } from '../Popover.types';
+export declare const NestedPopoverActivator: ({ children, parentPopover, }: PropsWithChildren & {
+    parentPopover?: PopoverContextValue;
+}) => string | number | boolean | Iterable<import('react').ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;

package/dist/src/components/Popover/helpers/handlePopoverTabKey.d.ts

@@ -5,4 +5,4 @@ import { KeyboardEvent } from 'react';
  * @param popover {PopoverContextValue} The popover context value, usually retrieved from the usePopover hook.
  * @param e {KeyboardEvent} The keyboard event object that triggered the tab key press.
  */
-export declare const handlePopoverTabKey: (popover: PopoverContextValue, e: KeyboardEvent) => void;
+export declare const handlePopoverTabKey: (popover: PopoverContextValue, e: KeyboardEvent) => Promise<void>;

package/dist/src/components/Popover/helpers/waitUntilTrue.d.ts

@@ -0,0 +1 @@
+export declare const waitUntilTrue: (condition: () => boolean, timeout?: number, interval?: number) => Promise<void>;

package/dist/src/components/RichSelect/RichSelect.types.d.ts

@@ -7,6 +7,12 @@ export interface IressRichSelectProps extends Omit<AutocompleteSearchHookProps,
      * @default bottom-start
      */
     align?: FloatingUIAligns;
+    /**
+     * By default, the RichSelect will automatically highlight the first option in the list when it is opened.
+     * Set this to false to disable that behaviour.
+     * @default true
+     */
+    autoHighlight?: boolean;
     /**
      * Value of selected option for uncontrolled select.
      */
@@ -74,6 +80,14 @@ export interface IressRichSelectProps extends Omit<AutocompleteSearchHookProps,
      */
     width?: FormElementWidths;
     virtualFocus?: boolean;
+    /**
+     * Header showed in option panel when expanded.
+     */
+    header?: ReactNode;
+    /**
+     * Footer showed in option panel when expanded.
+     */
+    footer?: ReactNode;
 }
 export interface IressSelectActivatorProps {
     /**

package/dist/src/components/RichSelect/components/SelectOptions.d.ts

@@ -1,6 +1,6 @@
 import { IressRichSelectProps, SelectOptionsRenderProps } from '../RichSelect.types';
-interface SelectOptionsProps extends Pick<IressRichSelectProps, 'multiSelect' | 'onChange' | 'options' | 'renderOptions' | 'value' | 'initialOptions'>, Omit<SelectOptionsRenderProps, 'close'> {
+interface SelectOptionsProps extends Pick<IressRichSelectProps, 'autoHighlight' | 'multiSelect' | 'onChange' | 'options' | 'renderOptions' | 'value' | 'initialOptions'>, Omit<SelectOptionsRenderProps, 'close'> {
     setShow: (show: boolean) => void;
 }
-export declare const SelectOptions: ({ debouncedQuery, error, initialOptions: initialOptionsProp, loading, multiSelect, onChange, options, query, renderOptions, results, setQuery, setShow, setValue, show, value, }: SelectOptionsProps) => string | number | boolean | Iterable<import('react').ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare const SelectOptions: ({ autoHighlight, debouncedQuery, error, initialOptions: initialOptionsProp, loading, multiSelect, onChange, options, query, renderOptions, results, setQuery, setShow, setValue, show, value, }: SelectOptionsProps) => string | number | boolean | Iterable<import('react').ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
 export {};

package/dist/src/patterns/Loading/Loading.d.ts

@@ -3,7 +3,8 @@ import { DefaultLoadingProps } from './components/DefaultLoading';
 import { ValidateLoadingProps } from './components/ValidateLoading';
 import { ComponentLoadingProps } from './components/ComponentLoading';
 import { PageLoadingProps } from './components/PageLoading';
-export type IressLoadingProps = StartUpLoadingProps | ValidateLoadingProps | PageLoadingProps | ComponentLoadingProps | DefaultLoadingProps;
+import { LongLoadingProps } from './components/LongLoading';
+export type IressLoadingProps = StartUpLoadingProps | ValidateLoadingProps | PageLoadingProps | ComponentLoadingProps | LongLoadingProps | DefaultLoadingProps;
 /**
  * A pattern component that has in-built loading states for different contexts, designed to provide a consistent user experience across Iress applications.
  *
@@ -12,6 +13,10 @@ export type IressLoadingProps = StartUpLoadingProps | ValidateLoadingProps | Pag
  * - `component`: Loading pattern for a component that is expected to take some time to load, but has content around it that can be loaded before it (hence not part of page pattern). It also supports updating the state of the component via a slightly different UI. Examples:
  *   - Charts that can be updated in real-time
  *   - Tables that load many records and may update in real-time
+ * - `long`: Loading pattern for a component that is expected to take longer than 10 seconds to load. It displays a checklist of items that are being loaded. Examples:
+ *   - 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)
  * - `page`: Loading pattern for a page, with out-of-the-box skeleton templates. Examples:
  *   - Dashboard page with multiple filters/panels
  *   - Search page with multiple filters and search results
@@ -38,5 +43,5 @@ export declare const IressLoading: {
      * @param delay - Once a component has loaded, how long should the loading indicator be displayed for.
      * @returns A boolean value that determines whether the `IressLoading` component is safe to be removed.
      */
-    shouldRender: (isLoaded: boolean, delay?: number, startFrom?: number) => boolean;
+    shouldRender: (isLoaded: boolean, delay?: number, startFrom?: number, avoidDelayTimeout?: number) => boolean;
 };

package/dist/src/patterns/Loading/LoadingSuspense.d.ts

@@ -0,0 +1,73 @@
+import { ReactNode } from 'react';
+import { StartUpLoadingProps } from './components/StartUpLoading';
+import { ValidateLoadingProps } from './components/ValidateLoading';
+import { PageLoadingProps } from './components/PageLoading';
+import { ComponentLoadingProps } from './components/ComponentLoading';
+import { LongLoadingProps } from './components/LongLoading';
+import { DefaultLoadingProps } from './components/DefaultLoading';
+export type IressLoadingSuspenseProps = (Omit<StartUpLoadingProps, 'loaded'> | ValidateLoadingProps | Omit<PageLoadingProps, 'loaded'> | Omit<ComponentLoadingProps, 'loaded'> | Omit<LongLoadingProps, 'loaded'> | DefaultLoadingProps) & {
+    /**
+     * The content that will be rendered inside the Suspense boundary.
+     * Typically includes lazy-loaded components and components that use the `use` or `IressLoadingSuspense.use` hook.
+     */
+    children?: ReactNode;
+    /**
+     * Duration (in milliseconds) to delay unmounting the fallback
+     * to allow the fade-out animation to complete.
+     * By default it uses the default delay of the pattern.
+     */
+    delay?: number;
+    /**
+     * By default it uses the default delay of the pattern.
+     */
+    onLoaded?: () => void;
+    /**
+     * Duration (in milliseconds) before showing the loading pattern.
+     * Default is 500ms, meaning a user will not even see the loading indicator if the page loads before this time.
+     */
+    startFrom?: number;
+};
+/**
+ * A pattern component that has in-built loading states for different contexts, designed to provide a consistent user experience across Iress applications.
+ *
+ * The `pattern` prop is used to determine the type of loading state to display. The following patterns are available:
+ *
+ * - `component`: Loading pattern for a component that is expected to take some time to load, but has content around it that can be loaded before it (hence not part of page pattern). It also supports updating the state of the component via a slightly different UI. Examples:
+ *   - Charts that can be updated in real-time
+ *   - Tables that load many records and may update in real-time
+ * - `long`: Loading pattern for a component that is expected to take longer than 10 seconds to load. It displays a checklist of items that are being loaded. Examples:
+ *   - 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)
+ * - `page`: Loading pattern for a page, with out-of-the-box skeleton templates. Examples:
+ *   - Dashboard page with multiple filters/panels
+ *   - Search page with multiple filters and search results
+ *   - Detail page for a record
+ *   - Form page
+ *   - Article page
+ * - `start-up`: Loading pattern when the application is first loaded. Examples:
+ *   - Loading an application for the first time
+ *   - Switching from a different application to a new application
+ *   - Switching from a client's website to an Iress application
+ *   - Switching themes
+ * - `validate`: Loading pattern when validating user input. Examples:
+ *   - Submitting a form
+ *   - Saving a record
+ *
+ * If no `pattern` is provided, it will use the default experience, which only displays a message after a certain amount of time to help stop drop-offs due to uncommon loading times.
+ */
+export declare const IressLoadingSuspense: {
+    ({ children, delay: delayProp, onLoaded, pattern, startFrom: startFromProp, ...restProps }: IressLoadingSuspenseProps): import("react/jsx-runtime").JSX.Element;
+    /**
+     * A polyfill for the `use` hook in React 19. It allows you to suspend a component until the resource (Promise) is resolved.
+     * **Note:** For those using React 19, import the `use` hook from React instead of using this polyfill.
+     * @see https://react.dev/reference/react/use
+     */
+    use: <T>(fetcher: () => Promise<T>) => T;
+    /**
+     * Uncache the resource (Promise) that is being used in the `use` hook.
+     * **Note:** For those using React 19, import the `use` hook from React instead of using this method.
+     * @see https://react.dev/reference/react/use
+     */
+    uncache: (fetcher: () => Promise<unknown>, timeout?: number) => void;
+};