import * as react_jsx_runtime from 'react/jsx-runtime'; import * as react from 'react'; import { PropsWithChildren, ReactElement, ReactNode, ErrorInfo, ComponentType, Key, JSX as JSX$1, Component } from 'react'; /** * Props accepted by the [SwitchCase.Case](https://react-tools.ndria.dev/components/SwitchCase) component. */ interface CaseProps extends PropsWithChildren { /** * When truthy, this ``'s children are rendered and evaluation stops. * Only the first truthy `` in the tree is rendered. */ when: boolean | undefined | null; } /** * Props accepted by the [SwitchCase.Switch](https://react-tools.ndria.dev/components/SwitchCase) component. */ interface SwitchProps { /** * One or more {@link Case} elements to evaluate in order. The first `Case` * whose `when` prop is truthy is rendered; all others are ignored. */ children?: ReactElement | ReactElement[] | undefined; /** * Optional content rendered when no `Case` child has a truthy `when` prop. * Accepts any valid React node. */ fallback?: ReactNode; } /** * Internal state managed by [ErrorBoundary](https://react-tools.ndria.dev/components/ErrorBoundary) component. */ interface ErrorBoundaryState { /** * `true` when the boundary has caught an error from a descendant component, * causing the `fallback` UI to be rendered in place of the component tree. * Reset to `false` when the `retry` callback is invoked. */ hasError: boolean; /** * The most recently caught {@link Error} instance. `undefined` when no error * has been caught or after a successful retry. */ error?: Error; /** * The {@link ErrorInfo} object associated with the caught error, containing * the `componentStack` string that traces which components were rendering * when the error was thrown. `undefined` when no error has been caught. */ info?: ErrorInfo; } /** * Props accepted by the [ErrorBoundary](https://react-tools.ndria.dev/components/ErrorBoundary) component. */ interface ErrorBoundaryProps extends PropsWithChildren { /** * Called when an error is caught by the boundary, receiving the thrown * {@link Error} and the associated {@link ErrorInfo} (component stack). * Use this for error reporting or logging. */ onCatch?: (error: Error, info: ErrorInfo) => void; /** * Content rendered in place of the component tree when an error is caught. * Accepts three shapes: * - **`ReactNode`** — Static fallback UI displayed unconditionally. * - **`(error, info, retry) => ReactNode`** — A render function receiving * the caught error, component stack info, and a `retry` callback that * resets the boundary and re-attempts rendering the original tree. * - **`({ error, info, retry }) => JSX.Element`** — Same as above but * using a props object instead of positional arguments. */ fallback?: ReactNode | ((error: Error, info: ErrorInfo, retry: () => void) => ReactNode) | ((props: { error: Error; info: ErrorInfo; retry: () => void; }) => JSX.Element); } /** * Props accepted by the [LazyComponent](https://react-tools.ndria.dev/components/LazyComponent) component. * * @template T - The module type returned by `factory`. Must export either a `default` export or one or more named `ComponentType` exports. */ interface LazyComponentProps; } | { [k: string]: ComponentType; }> { /** * A dynamic import factory function that returns a `Promise` resolving to * the module containing the component to render (e.g. * `() => import("./MyComponent")`). The component is loaded once and cached * — subsequent renders reuse the resolved result without re-fetching. */ factory: () => Promise<{ [k: string]: T; }>; /** * The named export to render from the resolved module. When omitted, * the `default` export is used. Required when the module does not have a * default export or when a specific named export should be rendered. */ componentName?: string; /** * Content rendered while the component is loading (passed to the internal * `` boundary). Accepts any valid React node. */ fallback?: ReactNode; /** * Called synchronously before the factory `Promise` is initiated. Use this * to show a loading indicator or perform pre-load side effects. */ beforeLoad?: () => void; /** * Called after the factory `Promise` resolves and the component is ready * to render. Use this to hide a loading indicator or perform post-load * side effects. */ afterLoad?: () => void; } /** * Props accepted by the [Show](https://react-tools.ndria.dev/components/Show) component. * * @template T - The type of the `when` value. When truthy, `children` are rendered; otherwise `fallback` is shown. */ interface ShowProps extends PropsWithChildren { /** * The condition that controls rendering. When truthy, `children` are * displayed; when falsy (`false`, `null`, or `undefined`), `fallback` * is rendered instead (or nothing if `fallback` is omitted). */ when: T | boolean | undefined | null; /** * Optional content rendered when `when` is falsy. Accepts any valid * React node. When omitted, nothing is rendered in the falsy case. */ fallback?: ReactNode; /** * Controls how the component behaves when `when` is falsy: * * - `"unmount"` _(default)_ — children are fully removed from the DOM. * The `fallback` prop is rendered instead (if provided). * - `"hidden"` — children remain in the DOM. When `when` is falsy, the * `hidden` HTML attribute is applied directly to the children's root * element via `cloneElement`. When `when` is truthy the attribute is removed. * - `"visibility"` — children remain in the DOM. When `when` is falsy, * `display: none !important` CSS rule is applied directly to the * children'root element via `cloneElement`. When `when` is truthy * the rule is removed. * * @default "unmount" */ mode?: "unmount" | "hidden" | "visibility"; } /** * Internal state managed by the * [Suspense](https://react-tools.ndria.dev/components/Suspense) polyfill. */ interface SuspenseState { /** * `true` when a descendant component has thrown a Promise that has not yet * resolved, causing the `fallback` UI to be rendered in its place. * Reset to `false` once the Promise resolves and the component tree is * ready to be rendered. */ isSuspended: boolean; /** * The Promise thrown by a suspended descendant, or `null` when no * component is currently suspended. Used internally to schedule a * re-render once the Promise settles. */ suspendedPromise: Promise | null; } /** * Props accepted by the [Suspense](https://react-tools.ndria.dev/components/Suspense) polyfill. */ interface SuspenseProps extends PropsWithChildren { /** * Content rendered while one or more descendant components are suspended * (i.e. while a thrown Promise is pending). Accepts any valid React node — * typically a spinner, skeleton, or loading message. * * When the suspended Promise resolves, `fallback` is replaced by the * original `children`. */ fallback: ReactNode; } /** * Props accepted by the [MatchOption](https://react-tools.ndria.dev/components/MatchOption) component. * * @template T - The type of the `value` to be compared. */ interface MatchProps { /** * The central value to compare against the `is` prop of each child. * The first whose `is` value or function strictly matches (`===`) this `value` * will be rendered. */ value: T; /** * One or more {@link Option} elements to evaluate in order. The first `Option` * whose `is` prop is truthy is rendered; all others are ignored. */ children?: ReactElement> | ReactElement>[] | undefined; /** * Optional content rendered when no matches the provided `value`. * Accepts any valid React node. */ fallback?: ReactNode; } /** * Props accepted by the [MatchOption](https://react-tools.ndria.dev/components/MatchOption) component. * * @template T - The type of the `is` value, should match the `value` type of the parent . */ interface OptionProps extends PropsWithChildren { /** * The value used to determine if this option should be rendered. * If `is === value` (from the parent [Match]), the `children` are displayed. */ is: T | ((value: T) => boolean); } /** * **`LazyComponent`**: Component Wrapper to lazy loading a Component. * @see [📖 Documentation](https://react-tools.ndria.dev/components/LazyComponent) * @template T - The module type returned by `factory`. Must export either a `default` export or one or more named `ComponentType` exports. * @param {LazyComponentProps} props - {@link LazyComponentProps} * @returns {JSX.Element} element */ declare const LazyComponent: ; } | { [k: string]: ComponentType; }>({ factory, componentName, fallback, beforeLoad, afterLoad }: LazyComponentProps) => react_jsx_runtime.JSX.Element; /** * **`Show`**: Generic component used to conditionally render part of the view. * * Renders `children` when `when` is truthy. When falsy, the behaviour depends * on the `mode` prop: * * --- * * ### `mode="unmount"` _(default)_ * Children are fully removed from the DOM. `fallback` is rendered instead * (if provided), otherwise `null`. State inside the subtree is lost on hide * and reset on re-show. * * --- * * ### `mode="hidden"` * Children always remain in the DOM, preserving their state and avoiding * remount costs. Hiding is achieved via `display: none`: * * - **Native DOM children** (e.g. `
`, ``): the `hidden` HTML * attribute is injected directly onto the root element via `cloneElement`. * No wrapper element is introduced. `fallback` is rendered alongside the * hidden children regardless of `when`. * - **Custom component children**: a `
` wrapper * is introduced only when `when` is falsy. When `when` is truthy the wrapper * is absent and children are rendered unwrapped, so the layout is unaffected * in the visible state. `fallback` is rendered alongside when `when` is falsy. * * --- * * ### `mode="visibility"` * Children always remain in the DOM. Hiding preserves the layout space * occupied by the element: * * - **Native DOM children**: `visibility: hidden` is merged into the root * element's inline style via `cloneElement`. No wrapper is introduced. * `fallback` is rendered alongside when `when` is falsy. * - **Custom component children**: a wrapper `
` with `display: contents` * (visible) or `display: none` (hidden) is always present in the DOM to * preserve component state across visibility changes. * ⚠️ **Layout limitation**: `display: contents` is incompatible with * `visibility: hidden`, so layout space is **not** preserved for custom * components — the element is fully removed from flow when hidden, identical * to `mode="hidden"`. To get true `visibility: hidden` behaviour, wrap the * custom component in a native element (e.g. `
`) * so that `Show` can apply `visibility: hidden` via `cloneElement` directly * on the native wrapper. * * @see [📖 Documentation](https://react-tools.ndria.dev/components/Show) * @template T - The type of the `when` value. When truthy, `children` are rendered; otherwise `fallback` is shown. * @param {ShowProps} props - {@link ShowProps} * @returns {JSX.Element|null} element - the element rendered or null. */ declare function Show({ when, fallback, children, mode }: ShowProps): string | number | boolean | Iterable | react_jsx_runtime.JSX.Element | null | undefined; /** * **`ShowMemoized`**: Memoized version of _Show_ component. * [Show] is wrapped with `React.memo`, preventing re-renders when his props have not changed. * Prefer this over [Show](https://react-tools.ndria.dev/components/Show) in performance-sensitive * trees where the parent re-renders frequently. * * @see [📖 Documentation](https://react-tools.ndria.dev/components/ShowMemoized) */ declare const ShowMemoized: react.MemoExoticComponent; /** * **`SwitchCase`**: It works like switch-case construct. It useful for when there are more than 2 mutual exclusive conditions. * @see [📖 Documentation](https://react-tools.ndria.dev/components/SwitchCase) */ declare const SwitchCase: { Switch: ({ children, fallback }: SwitchProps) => string | number | boolean | react.ReactElement> | Iterable | null; Case: ({ children, when }: CaseProps) => react_jsx_runtime.JSX.Element; }; /** * **`SwitchCaseMemoized`**: Memoized version of _SwitchCase_ component. * Both [Switch] and [Case] are wrapped with `React.memo`, preventing re-renders * when their props have not changed. * Prefer this over [SwitchCase](https://react-tools.ndria.dev/components/SwitchCase) * in performance-sensitive trees where the parent re-renders frequently. * * @see [📖 Documentation](https://react-tools.ndria.dev/components/SwitchCaseMemoized) */ declare const SwitchCaseMemoized: { Switch: react.MemoExoticComponent<({ children, fallback }: SwitchProps) => string | number | boolean | react.ReactElement> | Iterable | null>; Case: react.MemoExoticComponent<({ children, when }: CaseProps) => react_jsx_runtime.JSX.Element>; }; /** * **`For`**: Component to optimize the rendering of a list of elements without need to specify a key value for all elements, and other options. * @see [📖 Documentation](https://react-tools.ndria.dev/components/For) * @template T - The type of the elements in the source array `of`. * @template S - The mapped element type after applying `map`. Defaults to `T` when `map` is omitted. * @param {ForProps} props - {@link ForProps} * @returns {null|JSX.Element|Array} result */ declare function For({ of, elementKey, fallback, filter, sort, map, children }: { of: Array; elementKey?: T extends object ? keyof T | ((item: T) => Key) : Key | ((item: T) => Key); children: (item: T, index: number, key: Key) => ReactNode; fallback?: ReactNode; filter?: Parameters["filter"]>[0]; sort?: true | Parameters["sort"]>[0]; map?: undefined; }): null | JSX$1.Element | Array; declare function For({ of, elementKey, fallback, filter, sort, map, children }: { of: Array; elementKey?: S extends object ? keyof S | ((item: S) => Key) : Key | ((item: S) => Key); children: (item: S, index: number, key: Key) => ReactNode; fallback?: ReactNode; filter?: Parameters["filter"]>[0]; sort?: true | Parameters["sort"]>[0]; map?: (...args: Parameters["map"]>[0]>) => S; }): null | JSX$1.Element | Array; declare namespace For { var displayName: string; } /** * **`ForMemoized`**: Memoized version of _For_ component. * [For] is wrapped with `React.memo`, preventing re-renders when his props have not changed. * Prefer this over [For](https://react-tools.ndria.dev/components/For) in performance-sensitive * trees where the parent re-renders frequently. * * @see [📖 Documentation](https://react-tools.ndria.dev/components/ForMemoized) */ declare const ForMemoized: typeof For; /** * **`ErrorBoundary`**: Wrapper component that lets you display some fallback UI when your application throws an error during rendering. * @see [📖 Documentation](https://react-tools.ndria.dev/components/ErrorBoundary) */ declare class ErrorBoundary extends Component, ErrorBoundaryState> { state: ErrorBoundaryState; static getDerivedStateFromError(_: Error): ErrorBoundaryState; componentDidCatch(error: Error, info: ErrorInfo): void; retry(): void; render(): string | number | boolean | Iterable | react_jsx_runtime.JSX.Element | null | undefined; } /** * **`Activity`**: Polyfill of the React 19 `` component for earlier versions. * * Keeps the subtree always mounted in the DOM, preserving state and context * across visibility changes. When `mode="hidden"` the subtree is hidden via * `display: none`; when `mode="visible"` it is rendered normally. * * ### Differences from the native React 19 `` * * - **Effects are not deactivated**: the native `` tears down effects * (e.g. `useEffect` cleanup) when hidden and replays them on re-show, enabling * things like pausing network requests or timers. This polyfill keeps the * subtree fully active — effects continue running while hidden. * - **No Suspense integration**: the native `` can pre-render hidden * subtrees in the background and reveal them instantly. This polyfill has no * such capability. * - **No transition support**: the native `` integrates with * `startTransition` to defer hiding/showing. This polyfill applies changes * synchronously. * * @see [React 19 Activity docs](https://react.dev/reference/react/Activity) * @see [📖 Documentation](https://react-tools.ndria.dev/components/Activity) * @param {{ mode: "visible" | "hidden", children?: React.ReactNode }} props * @returns {JSX.Element} element */ declare const Activity: react.ComponentType<{ mode: "visible" | "hidden"; children?: react.ReactNode; }>; /** * **`Suspense`**: Polyfill of the React `` component. * * Renders `children` normally. When a descendant component suspends by * throwing a Promise (the standard Suspense contract used by `React.lazy`, * data-fetching libraries such as SWR, React Query, and Relay, and the * `use()` hook), `fallback` is rendered in its place until the Promise * resolves, at which point `children` are rendered again. * * ### How it works * * The polyfill relies on the same mechanism used by `ErrorBoundary`: * `getDerivedStateFromError` is called synchronously when any descendant * throws during rendering. If the thrown value is a `Promise`, the boundary * marks itself as suspended and renders `fallback`. Once the Promise settles * (resolved or rejected), the boundary resets and React re-renders * `children`. * * ### Differences from native React `` * * - **No concurrent rendering**: the native `` integrates with * React's concurrent mode to render suspended subtrees in the background * without blocking the UI. This polyfill performs a synchronous * `setState` on Promise resolution, which may cause a brief flash of the * `fallback` even when the Promise resolves immediately. * - **No `startTransition` integration**: the native `` can keep * the previous UI visible during a transition while the new subtree loads. * This polyfill always shows `fallback` immediately on suspend. * - **No streaming / server-side rendering support**: the native `` * supports streaming HTML from the server. This polyfill is client-only. * - **Promise rejection**: when a suspended Promise rejects, this polyfill * resets the suspended state and re-renders `children`, which will throw * again — resulting in an infinite loop unless the child handles the error * internally. Wrap with an `ErrorBoundary` to handle rejection gracefully. * * @see [React Suspense docs](https://react.dev/reference/react/Suspense) * @see [📖 Documentation](https://react-tools.ndria.dev/components/Suspense) * @param {SuspenseProps} props - {@link SuspenseProps} * @returns {JSX.Element} element */ declare const Suspense: react.ComponentType; /** * **`MatchOption`**: Provides a declarative switch-case pattern. It compares the [Match] component's `value` against the `is` prop of its [Option] children. * The first matching [Option] is rendered; otherwise, the `fallback` is displayed. * @see [📖 Documentation](https://react-tools.ndria.dev/components/MatchOption) */ declare const MatchOption: { Match: ({ value, children, fallback }: MatchProps) => string | number | boolean | react.ReactElement> | Iterable | null; Option: ({ children }: OptionProps) => react.ReactNode; }; /** * **`MatchOptionMemoized`**: Memoized version of _MatchOption_ component. * Both [Match] and [Option] are wrapped with `React.memo`, preventing re-renders * when their props have not changed. * Prefer this over [MatchOption](https://react-tools.ndria.dev/components/MatchOption) * in performance-sensitive trees where the parent re-renders frequently. * * @see [📖 Documentation](https://react-tools.ndria.dev/components/MatchOptionMemoized) */ declare const MatchOptionMemoized: { Switch: react.MemoExoticComponent<(({ value, children, fallback }: MatchProps) => string | number | boolean | react.ReactElement> | Iterable | null)>; Case: react.MemoExoticComponent<(({ children }: OptionProps) => react.ReactNode)>; }; export { Activity as A, ErrorBoundary as E, For as F, LazyComponent as L, MatchOption as M, Show as S, ForMemoized as c, MatchOptionMemoized as e, ShowMemoized as g, Suspense as i, SwitchCase as l, SwitchCaseMemoized as m }; export type { CaseProps as C, OptionProps as O, ErrorBoundaryProps as a, ErrorBoundaryState as b, LazyComponentProps as d, MatchProps as f, ShowProps as h, SuspenseProps as j, SuspenseState as k, SwitchProps as n };