@iress-oss/ids-components 5.20.2 → 5.20.5

package/dist/src/helpers/form/getValueAsEvent.d.ts

@@ -0,0 +1,15 @@
+import { FormControlValue } from '../../types';
+/**
+ * This method wraps up a value in an event object, allowing it to work in React Hook Forms change handlers.
+ * See: https://github.com/react-hook-form/react-hook-form/blob/6deae49068dc8ac056977d4def168a78968d9e61/src/types/form.ts#L96
+ * @param value
+ * @returns { target: { value } }
+ */
+export declare const getValueAsEvent: <T = FormControlValue, EventType = {
+    currentTarget: {
+        value: T;
+    };
+    target: {
+        value: T;
+    };
+}>(value: T) => EventType;

package/dist/src/helpers/form/isValidFormInputElement.d.ts

@@ -0,0 +1 @@
+export declare const isValidFormInputElement: (ele: HTMLElement) => boolean;

package/dist/src/helpers/formatting/capitalizeFirstLetter.d.ts

@@ -0,0 +1 @@
+export declare const capitalizeFirstLetter: (str: string) => string;

package/dist/src/helpers/formatting/formatCurrency.d.ts

@@ -0,0 +1,25 @@
+export interface CurrencyFormatterProps {
+    /**
+     * The currency code to use when formatting the value.
+     */
+    currencyCode?: string;
+    /**
+     * Additional options to pass to the `Intl.NumberFormat` constructor.
+     * [Learn more](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat)
+     */
+    formatOptions?: Omit<Intl.NumberFormatOptions, 'currency'>;
+    /**
+     * The locale to use when formatting the value.
+     * @default 'en-AU'
+     */
+    locale?: Intl.LocalesArgument;
+    /**
+     * The value to format.
+     */
+    value?: string | number | null;
+    /**
+     * Whether to include the currency symbol in the output.
+     */
+    withSymbol?: boolean;
+}
+export declare const formatCurrency: ({ value, locale, currencyCode, withSymbol, formatOptions, }: CurrencyFormatterProps) => string | number;

package/dist/src/helpers/formatting/formatDate.d.ts

@@ -0,0 +1,5 @@
+export declare const pad: (num: number) => string;
+export type DateValue = string | number | Date;
+export declare const getDateObj: (value: DateValue) => Date;
+export declare const formatDate: (dateVal: DateValue) => string;
+export declare const formatShortDate: (dateVal: DateValue) => string;

package/dist/src/helpers/formatting/formatDateTime.d.ts

@@ -0,0 +1,3 @@
+import { DateValue } from './formatDate';
+export declare const formatISODateTime: (dateVal: DateValue) => string;
+export declare const formatRelativeTime: (dateVal: DateValue, useShortDateAfter?: Intl.RelativeTimeFormatUnit | null) => string;

package/dist/src/helpers/formatting/formatObjectKey.d.ts

@@ -0,0 +1 @@
+export declare const formatObjectKey: (key: string) => string;

package/dist/src/helpers/formatting/formatPercentage.d.ts

@@ -0,0 +1 @@
+export declare const formatPercentage: (value: number | string) => string;

package/dist/src/helpers/formatting/stringReplacer.d.ts

@@ -0,0 +1,2 @@
+import { NameValue } from '../../interfaces';
+export declare const stringReplacer: (str: string, replaceArr?: NameValue[]) => string;

package/dist/src/helpers/formatting/toArray.d.ts

@@ -0,0 +1 @@
+export declare const toArray: <T>(item?: T | T[]) => T[];

package/dist/src/helpers/formatting/toCSSLengthValue.d.ts

@@ -0,0 +1 @@
+export declare const toCSSLengthValue: (val: string | number) => string;

package/dist/src/helpers/label-value/composeLabelValueDescriptor.d.ts

@@ -0,0 +1,9 @@
+import { LabelValueMeta } from '../../interfaces';
+/**
+ * Converts the selected options into a human-readable string.
+ *
+ * @param selected the selected state, usually a single or array of LabelValueMeta
+ * @param selectedOptionsText when multiple options are selected, this text will be used to describe the selection. {{numOptions}} is replaced with the number of options selected.
+ * @returns
+ */
+export declare const composeLabelValueDescriptor: (selected?: LabelValueMeta | LabelValueMeta[], selectedOptionsText?: string) => string;

package/dist/src/helpers/label-value/getQueryRangeExclusive.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Get the range of label where the query is not found.
+ * This is useful for highlighting the area of the label that does not match the query.
+ * @param query
+ * @param label
+ * @returns [start: number, end: number] | undefined
+ */
+export declare const getQueryRangeExclusive: (query: string, label: string) => [start: number, end: number] | undefined;

package/dist/src/helpers/label-value/getValueFromLabelValues.d.ts

@@ -0,0 +1,2 @@
+import { LabelValue } from '../../interfaces';
+export declare const getValueFromLabelValues: (items?: LabelValue | LabelValue[], array?: boolean) => string | number | boolean | (string | number | boolean)[];

package/dist/src/helpers/label-value/highlightQueryInLabel.d.ts

@@ -0,0 +1,2 @@
+import { ElementType, ReactNode } from 'react';
+export declare const highlightQueryInLabel: (label: string, query: string, Tag?: ElementType) => ReactNode;

package/dist/src/helpers/label-value/highlightQueryInLabelValue.d.ts

@@ -0,0 +1,3 @@
+import { ElementType } from 'react';
+import { FormattedLabelValueMeta, LabelValueMeta } from '../../interfaces';
+export declare const highlightQueryInLabelValue: (labelValueMeta: LabelValueMeta, query: string, Tag?: ElementType) => FormattedLabelValueMeta;

package/dist/src/helpers/label-value/searchLabelValues.d.ts

@@ -0,0 +1,2 @@
+import { FormattedLabelValueMeta, LabelValue } from '../../interfaces';
+export declare const searchLabelValues: (query: string, optionsData: LabelValue[], resultLimit?: number) => FormattedLabelValueMeta[];

package/dist/src/helpers/responsive/getResponsiveLayoutModifiers.d.ts

@@ -0,0 +1,2 @@
+import { ResponsiveSizing } from '../../interfaces';
+export declare const getResponsiveLayoutModifiers: <T = string>(modifier: string, values?: ResponsiveSizing<T> | T, fallback?: T) => string[];

package/dist/src/helpers/responsive/getResponsivePaddingClasses.d.ts

@@ -0,0 +1,2 @@
+import { ResponsiveSizing } from '../../interfaces';
+export declare const getResponsivePaddingClasses: <T = string>(padding: ResponsiveSizing<T> | T) => string[];

package/dist/src/helpers/transition/getTransitionDuration.d.ts

@@ -0,0 +1 @@
+export declare const getTransitionDuration: (element?: HTMLElement | null, multiplier?: number, fallback?: number) => number;

package/dist/src/helpers/transition/timeStringToNumber.d.ts

@@ -0,0 +1 @@
+export declare const timeStringToNumber: (timeStr: string) => number;

package/dist/src/helpers/utility/generateScopedName.d.ts

@@ -0,0 +1,8 @@
+/**
+ * This function generates a scoped class name for CSS modules.
+ * We override it so we can have a predictable class name for consumers to use.
+ * @param name The class name
+ * @param filename The file name where the class name exists
+ * @returns a scoped class name, in the format of `ids-${component}--${class}-${version}`
+ */
+export declare const generateScopedName: (name: string, filename: string) => string;

package/dist/src/helpers/utility/idsLogger.d.ts

@@ -0,0 +1,3 @@
+import { LoggerLevels } from '../../enums';
+import { LoggerLevelsUnion } from '../../types';
+export declare const idsLogger: (msg: string, level?: LoggerLevels | LoggerLevelsUnion) => void;

package/dist/src/helpers/utility/propagateTestid.d.ts

@@ -0,0 +1 @@
+export declare const propagateTestid: (dataTestid: string | undefined, id: string, separator?: string) => string | undefined;

package/dist/src/hooks/index.d.ts

@@ -0,0 +1,4 @@
+export * from './useBreakpoint';
+export * from './useControlledState';
+export * from './useIdIfNeeded';
+export * from './useResponsiveProps';

package/dist/src/hooks/useAriaRelationship.d.ts

@@ -0,0 +1,11 @@
+export interface AriaRelationshipProps<TController extends HTMLElement = HTMLElement> {
+    setController: (ref: TController | null) => void;
+    setControlViaRef: <TControl extends HTMLElement = HTMLElement>(controlId: string) => (element: TControl | null) => void;
+}
+/**
+ * Adjusts the aria attribute of an element,
+ * to help screen readers understand the relationship between elements and their controller.
+ *
+ * @param attribute - The aria attribute to adjust.
+ */
+export declare const useAriaRelationship: <TController extends HTMLElement = HTMLElement>(attribute: "aria-controls" | "aria-owns") => AriaRelationshipProps<TController>;

package/dist/src/hooks/useBreakpoint.d.ts

@@ -0,0 +1,11 @@
+import { BreakpointDetail } from '../interfaces';
+import { Breakpoints } from '../types';
+interface BreakpointResult {
+    breakpoint: Breakpoints;
+    detail: BreakpointDetail;
+}
+/**
+ * Retrieve the current breakpoint and its detail based on the window size
+ */
+export declare const useBreakpoint: () => BreakpointResult;
+export {};

package/dist/src/hooks/useControlledState.d.ts

@@ -0,0 +1,22 @@
+import { FormControlValue } from '../types';
+export interface ControlledStateProps<T = FormControlValue> {
+    component: string;
+    defaultValue?: T;
+    multiple?: boolean;
+    onChange?: (selected?: T) => void;
+    propName?: string;
+    value?: T;
+}
+export interface ControlledStateHook<TValue = FormControlValue, TArrayValue = TValue> {
+    value: TValue | undefined;
+    setValue: (value?: TValue) => void;
+    toggleValue: (value?: TArrayValue, flag?: boolean) => void;
+    isControlled: boolean;
+}
+/**
+ * Allows you to return a controlled state or uncontrolled state, depending on the props passed.
+ * It can also deal with the cases when an array of values is required.
+ *
+ * @param {ControlledValueProps<T>} props Allows you to set the initial selected value, the onChange callback, and whether multiple values are allowed (array).
+ */
+export declare const useControlledState: <TValue = FormControlValue, TArrayValue = TValue>({ component, defaultValue, multiple, onChange, propName, value, }: ControlledStateProps<TValue>) => ControlledStateHook<TValue, TArrayValue>;

package/dist/src/hooks/useIdIfNeeded.d.ts

@@ -0,0 +1,2 @@
+import { IressHTMLAttributes } from '../interfaces';
+export declare const useIdIfNeeded: <T extends React.HTMLAttributes<HTMLElement> = IressHTMLAttributes>({ id: propId }?: T, prefix?: string) => string;

package/dist/src/hooks/useResponsiveProps.d.ts

@@ -0,0 +1,19 @@
+import { ResponsiveProps } from '../types';
+/**
+ * Allows you to pluck a value from a an object with breakpoint keys.
+ * Note: Where possible, we recommend using media queries in CSS instead of JS, as that will reduce the load for the user. However, sometimes it's necessary to change a prop based on the user's breakpoint, hence why this hook is provided.
+ * @param {ResponsiveProps<T>} values A set of values, separated by breakpoint and ready for plucking.
+ * @param {boolean} inheritPrevious Whether to inherit the previous breakpoint value, if none was found for the current one.
+ * @returns { breakpoint: Breakpoints; value?: T | null } The current user's breakpoint, along with a matching value if one was found.
+ */
+export declare const useResponsiveProps: <T>(props?: ResponsiveProps<T>, inheritPrevious?: boolean) => {
+    breakpoint: "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+    value: T | undefined;
+};
+/**
+ * @deprecated Use useResponsiveProps instead
+ */
+export declare const useResponsiveValue: <T>(props?: ResponsiveProps<T>, inheritPrevious?: boolean) => {
+    breakpoint: "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+    value: T | undefined;
+};

package/dist/src/interfaces.d.ts

@@ -0,0 +1,68 @@
+import { ReactNode } from 'react';
+import { SystemValidationStatus, PaddingSize } from './enums';
+import { FormControlValue, PaddingSizes, SystemValidationStatuses } from './types';
+export interface ValidationMessageObj {
+    status?: SystemValidationStatus | SystemValidationStatuses;
+    message: string;
+    linkToTarget?: string;
+    dataTestId?: string;
+    prefix?: ReactNode;
+    visiblePrefix?: boolean;
+}
+export type WithDataAttributes<T = NonNullable<unknown>> = T & {
+    'data-testid'?: string;
+    'data-value'?: string;
+};
+export interface NameValue {
+    name: string;
+    value: string;
+}
+export type IressHTMLAttributes<T = HTMLDivElement> = WithDataAttributes<React.HTMLAttributes<T>>;
+export type IressInputHTMLAttributes<T = HTMLInputElement> = WithDataAttributes<React.InputHTMLAttributes<T>>;
+export type IressAnchorHTMLAttributes<T = HTMLAnchorElement> = WithDataAttributes<React.AnchorHTMLAttributes<T>>;
+export type IressButtonHTMLAttributes<T = HTMLButtonElement> = WithDataAttributes<React.ButtonHTMLAttributes<T>>;
+export type IressFormHTMLAttributes<T = HTMLFormElement> = WithDataAttributes<React.FormHTMLAttributes<T>>;
+/**
+ * @deprecated, use ResponsiveProps<T> instead
+ */
+export interface ResponsiveSizing<T> {
+    xs?: T | null;
+    sm?: T | null;
+    md?: T | null;
+    lg?: T | null;
+    xl?: T | null;
+    xxl?: T | null;
+}
+type VariablePaddingSizeDimension = PaddingSize | PaddingSizes | null;
+export interface VariablePaddingSize {
+    b?: VariablePaddingSizeDimension;
+    l?: VariablePaddingSizeDimension;
+    r?: VariablePaddingSizeDimension;
+    t?: VariablePaddingSizeDimension;
+    x?: VariablePaddingSizeDimension;
+    y?: VariablePaddingSizeDimension;
+}
+export interface LabelValue {
+    label: string;
+    testId?: string;
+    value?: FormControlValue;
+}
+export interface LabelValueMeta extends LabelValue {
+    append?: React.ReactNode;
+    divider?: boolean;
+    meta?: React.ReactNode;
+    prepend?: React.ReactNode;
+}
+export interface FormattedLabelValueMeta extends LabelValueMeta {
+    formattedLabel?: React.ReactNode;
+    formattedMeta?: React.ReactNode;
+}
+export interface BreakpointDetail {
+    mediaQuery: string;
+    screenWidthRange: string;
+    minScreenWidth: string;
+    maxScreenWidth?: string;
+    containerMaxWidth: string;
+    viewportWidth: number;
+}
+export {};

package/dist/src/main.d.ts

@@ -0,0 +1,58 @@
+export * from './components/Alert';
+export * from './components/Autocomplete';
+export * from './components/Badge';
+export * from './components/Button';
+export * from './components/ButtonGroup';
+export * from './components/Card';
+export * from './components/Checkbox';
+export * from './components/CheckboxGroup';
+export * from './components/Col';
+export * from './components/Combobox';
+export * from './components/Container';
+export * from './components/Divider';
+export * from './components/Expander';
+export * from './components/Field';
+export * from './components/Filter';
+export * from './components/Form';
+export * from './components/Hide';
+export * from './components/Icon';
+export * from './components/Inline';
+export * from './components/Input';
+export * from './components/InputCurrency';
+export * from './components/Label';
+export * from './components/Menu';
+export * from './components/Modal';
+export * from './components/Navbar';
+export * from './components/Panel';
+export * from './components/Placeholder';
+export * from './components/Popover';
+export * from './components/Progress';
+export * from './components/Provider';
+export * from './components/Radio';
+export * from './components/RadioGroup';
+export * from './components/Readonly';
+export * from './components/RichSelect';
+export * from './components/Row';
+export * from './components/Select';
+export * from './components/Skeleton';
+export * from './components/SkipLink';
+export * from './components/Slideout';
+export * from './components/Slider';
+export * from './components/Spinner';
+export * from './components/Stack';
+export * from './components/Table';
+export * from './components/TabSet';
+export * from './components/Tag';
+export * from './components/Text';
+export * from './components/Toaster';
+export * from './components/Toggle';
+export * from './components/Tooltip';
+export * from './components/ValidationMessage';
+export * from './patterns/Loading';
+export * from './enums';
+export * from './interfaces';
+export * from './types';
+export * from './helpers/utility/generateScopedName';
+export * from './helpers/formatting/toArray';
+export * from './hooks';
+export * from './constants';

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

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

@@ -0,0 +1,53 @@
+import { ReactNode } from 'react';
+import { IressHTMLAttributes } from '../../../interfaces';
+declare const templates: {
+    chart: import("react/jsx-runtime").JSX.Element;
+};
+export interface ComponentLoadingProps extends IressHTMLAttributes {
+    /**
+     * 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;
+export {};

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

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+import { IressHTMLAttributes } from '../../../interfaces';
+export interface DefaultLoadingProps extends IressHTMLAttributes {
+    /**
+     * 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;

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

@@ -0,0 +1,60 @@
+import { IressProgressProps } from '../../../components/Progress/Progress.types';
+import { ReactNode } from 'react';
+import { IressHTMLAttributes } from '../../../interfaces';
+export interface LongLoadingProps extends IressHTMLAttributes {
+    /**
+     * 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, 'className' | 'min' | '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;