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

package/dist/src/patterns/Form/FormValidationSummary/FormValidationSummary.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { IressValidationSummaryProps } from '../../../components/ValidationMessage';
+import { IressAlertProps } from '../../../components/Alert';
+export type IressFormValidationSummaryProps = Omit<IressValidationSummaryProps, 'messages'> & Omit<IressAlertProps, 'defaultDismissed' | 'dismissed' | 'onDismiss' | 'status'> & {
+    /**
+     * The content to use as the summary. If provided, this will override the default validation messages.
+     * This is useful if you want to provide a custom summary message or if you want to
+     * use a different validation mechanism that does not rely on the form context.
+     */
+    children?: ReactNode;
+};
+/**
+ * Validation summary messages based on the form context from react-hook-form
+ */
+export declare const IressFormValidationSummary: ({ actions, children, "data-testid": testId, footer, heading, itemStyle, icon, srOnly, variant, ...restProps }: IressFormValidationSummaryProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/patterns/Form/HookForm/HookForm.d.ts

@@ -0,0 +1,174 @@
+import { ReactElement, ReactNode, Ref } from 'react';
+import { DefaultValues, FieldValues, SubmitErrorHandler, useFieldArray, useForm, useFormContext, UseFormProps, UseFormReturn, useWatch } from 'react-hook-form';
+import { IressStyledProps } from '../../../types';
+export interface IressHookFormProps<T extends FieldValues, TContext = object> extends Omit<IressStyledProps<'form'>, 'defaultChecked' | 'defaultValue' | 'onSubmit' | 'onError'> {
+    /**
+     * The content of the alert section.
+     * @default <IressFormValidationSummary srOnly />
+     */
+    alert?: ReactNode;
+    /**
+     * The content of the form, usually multiple `IressFormField` or `IressFormFieldset` components.
+     */
+    children?: ReactNode;
+    /**
+     * React hook form instance.
+     */
+    form: UseFormReturn<T, TContext>;
+    /**
+     * Emitted when any field has an error.
+     * Called after the first submit if any errors are recorded, and from then on when any value changes.
+     *
+     * @see https://react-hook-form.com/docs/useform/handlesubmit
+     */
+    onError?: SubmitErrorHandler<T>;
+    /**
+     * Handler for when the submit method on the form is called after validation is passed.
+     *
+     * @see https://react-hook-form.com/docs/useform/handlesubmit
+     */
+    onSubmit?: (data: T) => void;
+    /**
+     * Emitted when the form state is valid.
+     *
+     * @see https://react-hook-form.com/docs/useform/formstate
+     */
+    onValidChange?: (isValid: boolean) => void;
+    /**
+     * If set to `true`, the summary will only update when the form is submitted, not on every field change.
+     * This is useful for performance reasons, especially in large forms.
+     * @default false
+     */
+    updateErrorSummaryOnSubmit?: boolean;
+}
+/**
+ * The form reference allows you to access the `react-hook-form` methods and element, as well as dynamically submit or reset the form.
+ * This is useful for cases where you need to programmatically control the form, such as submitting it from a button outside the form.
+ * @param T - The type of the form values.
+ */
+export interface FormRef<T extends FieldValues> {
+    /**
+     * The `react-hook-form` instance, which provides methods to interact with the form.
+     * This includes methods like `reset`, `setValue`, `getValues`, etc.
+     * @see https://react-hook-form.com/docs/useform
+     */
+    api: UseFormReturn<T>;
+    /**
+     * The HTML form element, which can be used to access the DOM element directly.
+     */
+    element?: HTMLFormElement;
+    /**
+     * Resets the form to its initial state or to the provided values.
+     * This will clear all fields and errors, and set the form values to the default values.
+     * If no values are provided, it will reset to the default values defined in the form.
+     * @param values - The values to reset the form to. If not provided, it will reset to the default values defined in the form.
+     */
+    reset: (values?: DefaultValues<T>) => void;
+    /**
+     * Submits the form programmatically.
+     * This will trigger the form validation and call the `onSubmit` handler if the form is valid.
+     */
+    submit: () => void;
+}
+/**
+ * Common form pattern props, pretty much adding commentary to UseFormProps from `react-hook-form`.
+ */
+export interface FormPatternProps<T extends FieldValues, TContext = object> extends Partial<Omit<UseFormProps<T, TContext>, 'disabled' | 'errors' | 'shouldFocusError'>> {
+    /**
+     * This context object is mutable and will be injected into the `resolver`'s second argument (eg. [Yup](https://github.com/jquense/yup) validation's context object).
+     * @see https://react-hook-form.com/docs/useform#context
+     */
+    context?: UseFormProps<T, TContext>['context'];
+    /**
+     * Display all validation errors or one at a time.
+     * @see https://react-hook-form.com/docs/useform#criteriaMode
+     */
+    criteriaMode?: UseFormProps<T, TContext>['criteriaMode'];
+    /**
+     * Default values to be passed through when an input is unset.
+     * @see https://react-hook-form.com/docs/useform#defaultValues
+     */
+    defaultValues?: DefaultValues<T>;
+    /**
+     * Delay error from appearing instantly.
+     * @see https://react-hook-form.com/docs/useform#delayError
+     */
+    delayError?: UseFormProps<T, TContext>['delayError'];
+    /**
+     * Configure the validation strategy **before** a user submits the form the first time.
+     * @see https://react-hook-form.com/docs/useform#mode
+     * @default 'onSubmit'
+     */
+    mode?: UseFormProps<T, TContext>['mode'];
+    /**
+     * Progressive Enhancement only applicable for SSR framework.
+     * @see https://react-hook-form.com/docs/useform
+     */
+    progressive?: UseFormProps<T, TContext>['progressive'];
+    /**
+     * This property is related to value update behaviors.
+     * @see https://react-hook-form.com/docs/useform#resetOptions
+     */
+    resetOptions?: UseFormProps<T, TContext>['resetOptions'];
+    /**
+     * This function allows you to use any external validation library such as Yup, Zod, Joi, Vest, Ajv and many others.
+     * @see https://react-hook-form.com/docs/useform#resolver
+     */
+    resolver?: UseFormProps<T, TContext>['resolver'];
+    /**
+     * Configure validation strategy when inputs with errors get re-validated **after** a user submits the form the first time.
+     * @see https://react-hook-form.com/docs/useform#reValidateMode
+     * @default 'onChange'
+     */
+    reValidateMode?: UseFormProps<T, TContext>['reValidateMode'];
+    /**
+     * This config will enable browser native validation. It will also enable CSS selectors :valid and:invalid making styling inputs easier.
+     * @see https://react-hook-form.com/docs/useform#shouldUseNativeValidation
+     */
+    shouldUseNativeValidation?: UseFormProps<T, TContext>['shouldUseNativeValidation'];
+    /**
+     * By default, an input value will be retained when input is removed. However, you can set `shouldUnregister` to `true` to `unregister` input during unmount.
+     * @see https://react-hook-form.com/docs/useform#shouldUnregister
+     */
+    shouldUnregister?: UseFormProps<T, TContext>['shouldUnregister'];
+    /**
+     * The values prop will react to changes and update the form values, which is useful when your form needs to be updated by external state or server data.
+     * @see https://react-hook-form.com/docs/useform#values
+     */
+    values?: UseFormProps<T, TContext>['values'];
+}
+/**
+ * This interface allows us to expose the methods from `react-hook-form` that are used in `IressHookForm`.
+ * This is used by consumers with more complex forms that need to access the form methods directly, and ensure it is using the same version of `react-hook-form` as `IressHookForm` and `IressForm`.
+ */
+export interface HookFormExports {
+    /**
+     * Allows you to perform operations with a list of dynamic inputs that need to be appended, updated, removed etc.
+     * This is useful when you have a form with a list of items that can be added or removed dynamically, such as a list of addresses or phone numbers.
+     * @see https://react-hook-form.com/docs/usefieldarray
+     */
+    useFieldArray: typeof useFieldArray;
+    /**
+     * Allows you to use the methods from `react-hook-form` in a nested component of `IressForm`.
+     * This is useful when you want more control over the form, such as submitting it programmatically or resetting it, without having to set a ref.
+     * @see https://react-hook-form.com/docs/useform
+     */
+    useForm: typeof useForm;
+    /**
+     * Allows you to use the form context from `react-hook-form` in a nested component of `IressForm`.
+     * This is useful when you need to access the form context in a component that is not a direct child of `IressForm`.
+     * @see https://react-hook-form.com/docs/useformcontext
+     */
+    useFormContext: typeof useFormContext;
+    /**
+     * Allows you watch changes to other form fields in an IressForm.
+     * This is useful when you need to conditionally render fields based on the value of another field.
+     * @see https://react-hook-form.com/docs/usewatch
+     */
+    useWatch: typeof useWatch;
+}
+declare const ForwardedHookForm: <T extends FieldValues, TContext = object>(props: IressHookFormProps<T, TContext> & {
+    ref?: Ref<FormRef<T>>;
+}) => ReactElement;
+export declare const IressHookForm: typeof ForwardedHookForm & HookFormExports;
+export {};

package/dist/src/patterns/Form/components/LongForm.d.ts

@@ -0,0 +1,53 @@
+import { FieldValues, UseFormProps } from 'react-hook-form';
+import { ReactElement, ReactNode, Ref } from 'react';
+import { FormPatternProps, FormRef, IressHookFormProps } from '../HookForm/HookForm';
+import { IressPanelProps } from '../../../components/Panel';
+export interface LongFormProps<T extends FieldValues, TContext = object> extends Omit<IressHookFormProps<T, TContext>, 'form'>, FormPatternProps<T, TContext> {
+    /**
+     * The actions to be displayed at the top right of the form.
+     */
+    actions: ReactNode;
+    /**
+     * Footer to be displayed at the bottom of the form.
+     * This can be used for additional information, links, or actions that are relevant to the form but not part of the main content.
+     */
+    footer?: ReactNode;
+    /**
+     * Title displayed at the top of the form, usually the purpose of the form.
+     */
+    heading: ReactNode;
+    /**
+     * Configure the validation strategy **before** a user submits the form the first time.
+     * For long forms, it is recommended to use `onBlur` to avoid overwhelming the user with validation errors.
+     * This means that validation will occur when the user leaves a field, rather than on every change.
+     * @see https://react-hook-form.com/docs/useform#mode
+     * @default 'onBlur'
+     */
+    mode?: UseFormProps<T, TContext>['mode'];
+    /**
+     * Style the panel that wraps the form fields.
+     * @default { bg: "alt" }
+     */
+    panelStyle?: IressPanelProps;
+    /**
+     * Use `pattern="long"` for the following use cases:
+     * - Forms that are used for data entry, such as creating or updating large datasets.
+     * - Forms that are longer than the viewport (usually more than 8-9 fields).
+     */
+    pattern?: 'long';
+    /**
+     * Configure the validation strategy **after** a user submits the form the first time.
+     * During this phase, it is recommended to use `onChange` to provide immediate feedback on field changes so users can correct errors as they go.
+     * @see https://react-hook-form.com/docs/useform#reValidateMode
+     * @default 'onChange'
+     */
+    reValidateMode?: UseFormProps<T, TContext>['reValidateMode'];
+    /**
+     * If set to `true`, the form will have a sticky header that remains at the top of the viewport when scrolling.
+     * This is useful for long forms where you want the header to always be visible.
+     */
+    sticky?: boolean;
+}
+export declare const LongForm: <T extends FieldValues, TContext = object>(props: LongFormProps<T, TContext> & {
+    ref?: Ref<FormRef<T>>;
+}) => ReactElement;

package/dist/src/patterns/Form/components/ShortForm.d.ts

@@ -0,0 +1,36 @@
+import { FieldValues, UseFormProps } from 'react-hook-form';
+import { ReactElement, ReactNode, Ref } from 'react';
+import { FormPatternProps, FormRef, IressHookFormProps } from '../HookForm/HookForm';
+export interface ShortFormProps<T extends FieldValues, TContext = object> extends Omit<IressHookFormProps<T, TContext>, 'form'>, FormPatternProps<T, TContext> {
+    /**
+     * The actions to be displayed at the bottom left of the form.
+     */
+    actions?: ReactNode;
+    /**
+     * Title displayed at the top of the form, usually the purpose of the form.
+     */
+    heading?: ReactNode;
+    /**
+     * Configure the validation strategy **before** a user submits the form the first time.
+     * For short forms, it is recommended to use `onSubmit`, as the data is normally familiar to the user (eg. login).
+     * @see https://react-hook-form.com/docs/useform#mode
+     * @default 'onSubmit'
+     */
+    mode?: UseFormProps<T, TContext>['mode'];
+    /**
+     * Use `pattern="short"` for the following use cases:
+     * - Login forms, or similar forms that requires data familiar to the users
+     * - Forms that fit the length of a single screen (less than 8-9 fields)
+     */
+    pattern?: 'short';
+    /**
+     * Configure the validation strategy **after** a user submits the form the first time.
+     * During this phase, it is recommended to use `onChange` to provide immediate feedback on field changes so users can correct errors as they go.
+     * @see https://react-hook-form.com/docs/useform#reValidateMode
+     * @default 'onChange'
+     */
+    reValidateMode?: UseFormProps<T, TContext>['reValidateMode'];
+}
+export declare const ShortForm: <T extends FieldValues, TContext = object>(props: ShortFormProps<T, TContext> & {
+    ref?: Ref<FormRef<T>>;
+}) => ReactElement;

package/dist/src/patterns/Form/hooks/useNoDefaultValueInForms.d.ts

@@ -0,0 +1,8 @@
+import { FormControlValue } from '../../../types';
+interface NoDefaultValueInFormsHookProps<T = FormControlValue> {
+    component: string;
+    defaultValue?: T;
+    message?: string;
+}
+export declare const useNoDefaultValueInForms: <T = FormControlValue>({ component, defaultValue, message, }: NoDefaultValueInFormsHookProps<T>) => void;
+export {};

package/dist/src/patterns/Form/index.d.ts

@@ -0,0 +1,6 @@
+export * from './Form';
+export * from './FormField/FormField';
+export * from './FormField/FormFieldset';
+export * from './FormValidationSummary/FormValidationSummary';
+export { IressHookForm } from './HookForm/HookForm';
+export type { IressHookFormProps, FormRef } from './HookForm/HookForm';

package/dist/src/patterns/Form/meta/Thumbnail.d.ts

@@ -0,0 +1,2 @@
+declare const Thumbnail: () => import("react/jsx-runtime").JSX.Element;
+export default Thumbnail;

package/dist/src/patterns/Form/meta/index.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    heading: string;
+    href: string;
+    tags: string[];
+    Thumbnail: import('react').LazyExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+};
+export default _default;

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

@@ -0,0 +1,47 @@
+import { StartUpLoadingProps } from './components/StartUpLoading';
+import { DefaultLoadingProps } from './components/DefaultLoading';
+import { ValidateLoadingProps } from './components/ValidateLoading';
+import { ComponentLoadingProps } from './components/ComponentLoading';
+import { PageLoadingProps } from './components/PageLoading';
+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.
+ *
+ * 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 IressLoading: {
+    ({ pattern, ...restProps }: IressLoadingProps): import("react/jsx-runtime").JSX.Element;
+    /**
+     * This hook is used to smooth the loading experience by delaying the loading indicator being removed after the loading of an element finishes.
+     *
+     * @param isLoaded - A boolean value that determines if the component waiting to be loaded has finished loading.
+     * @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, avoidDelayTimeout?: number) => boolean;
+};

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

@@ -0,0 +1,186 @@
+export declare const loading: import('../../styled-system/types').SlotRecipeRuntimeFn<"overlay" | "message" | "root" | "critical", {
+    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: number;
+                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: number;
+                transition: "[opacity 0.3s ease-in-out]";
+                zIndex: "100";
+            };
+            overlay: {
+                position: "absolute";
+                inset: "[0]";
+                opacity: number;
+                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: number;
+                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: number;
+                transition: "[opacity 0.3s ease-in-out]";
+                width: "overlay.sm";
+            };
+            message: {
+                p: "spacing.1200";
+            };
+        };
+        page: {
+            root: {
+                position: "relative";
+                opacity: number;
+                transition: "[opacity 0.2s linear]";
+            };
+            critical: {
+                opacity: number;
+                transition: "[opacity 0.2s linear]";
+                position: "absolute";
+                top: "spacing.000";
+                left: "spacing.000";
+            };
+            message: {
+                opacity: number;
+                transition: "[opacity 0.2s linear]";
+            };
+        };
+        'start-up': {
+            root: {
+                display: "flex";
+                flexDirection: "column";
+                alignItems: "center";
+                justifyContent: "center";
+                opacity: number;
+                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: number;
+                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: {};
+    };
+}>;
+export declare const loadingList: import('../../styled-system/types').SlotRecipeRuntimeFn<"svg" | "circle" | "marker" | "dots" | "root" | "item" | "tick", {
+    finished: {
+        true: {
+            svg: {
+                strokeWidth: number;
+                color: "colour.system.success.fill";
+                stroke: "colour.system.success.onFill";
+                strokeMiterlimit: number;
+                animation: "loadingItemFill 0.4s ease-in-out 0.4s forwards, loadingItemScale 0.3s ease-in-out 0.9s both";
+            };
+            item: {
+                opacity: number;
+                filter: "[grayscale(1)]";
+            };
+        };
+    };
+}>;

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;
+};