@primer/react/dist/utils/descendant-registry.d.ts

An implementation of GitHub's Primer Design System using React

import { type Dispatch, type ReactNode } from 'react';
export interface ProviderProps<T> {
    children: ReactNode;
    /** State setter from `useRegistryState`. */
    setRegistry: Dispatch<React.SetStateAction<ReadonlyMap<string, T> | undefined>>;
}
/**
 * Create a "descendant registry" for a component. This allows a parent to store and track an ordered registry of
 * child components, even if they are deeply nested in the tree. For example, a menu component can use this to track
 * every menu item inside of it, including menu items inside of fragments and subcomponents. The order of the resulting
 * `Map` will match the render order in the React tree.
 *
 * Usage:
 * 1. Create a registry at the file level in a similar manner to creating a new React context. Set `T` to the data type
 *    of the registry - this can be anything **except** a function.
 * 2. In the parent component, instantiate the registry state via `useRegistryState`. Then wrap `children` in the
 *    registry context `Provider` with `setRegistry` set to the state setter function.
 * 3. Register child components via `useRegisterDescendant` or `useRegisterDescendantCallback`.
 * 4. Access the registered data using the value from `useRegistryState`. This will be a map of `string` to `T`, where
 *    the string key is a unique and stable identifier for each component which can be used as a `key` if necessary.
 *
 * @note Note that this pattern is not SSR compatible. It won't raise errors or hydration mismatches, but the
 * registry will not be available during SSR. The registry is built during the effect phase, so it will be populated
 * after hydration on the client. The initial `undefined` value can be used to safely show loading UI during SSR/initial
 * render if necessary.
 */
export declare function createDescendantRegistry<T>(): {
    Provider: ({ children, setRegistry }: ProviderProps<T>) => import("react").JSX.Element;
    useRegistryState: () => [ReadonlyMap<string, T> | undefined, Dispatch<import("react").SetStateAction<ReadonlyMap<string, T> | undefined>>];
    useRegisterDescendant: (value: T) => string;
};
//# sourceMappingURL=descendant-registry.d.ts.map