@himanshu-sorathiya/react-kit 1.0.29 → 1.0.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  // Generated by dts-bundle-generator v9.5.1
2
2
 
3
3
  import React$1 from 'react';
4
- import { CSSProperties, Key, RefObject } from 'react';
4
+ import { RefCallback, RefObject } from 'react';
5
5
 
6
6
  /**
7
7
  * The native event that triggered a `useClickOutside` handler. Determined
@@ -1505,95 +1505,1221 @@ export interface UseThrottlerReturn {
1505
1505
  * @returns See {@link UseThrottlerReturn}.
1506
1506
  */
1507
1507
  export declare function useThrottler(delay: number, options?: ThrottleOptions): UseThrottlerReturn;
1508
+ /**
1509
+ * How to tell {@link useIntersectionObserver} what to observe.
1510
+ *
1511
+ * @remarks
1512
+ * Three shapes are accepted, matching the `getScrollElement`-style
1513
+ * convention used elsewhere in this library:
1514
+ * - **omitted / `undefined`** - ref-callback mode. Attach the hook's
1515
+ * returned `ref` to your own JSX element.
1516
+ * - **`null`** - explicitly disabled; nothing is observed regardless of
1517
+ * `enabled`.
1518
+ * - **an element, a `RefObject`, or a getter function**
1519
+ * (`() => Element | null`) - resolved on every render, so it's safe to
1520
+ * pass e.g. `() => someRef.current` without memoizing it.
1521
+ *
1522
+ * Unlike {@link ResizeObserverTargetInput}, there's no `Document`/`Window`
1523
+ * option here - the native `IntersectionObserver.observe()` only accepts an
1524
+ * `Element`.
1525
+ */
1526
+ export type IntersectionTargetInput = Element | React$1.RefObject<Element | null> | (() => Element | null) | null;
1527
+ /** Options for {@link useIntersectionObserver}. */
1528
+ export interface UseIntersectionObserverOptions {
1529
+ /**
1530
+ * External target to observe.
1531
+ *
1532
+ * @defaultValue `undefined` (ref-callback mode - see {@link IntersectionTargetInput})
1533
+ */
1534
+ target?: IntersectionTargetInput;
1535
+ /**
1536
+ * The element (or `Document`) used as the viewport when checking for
1537
+ * intersection.
1538
+ *
1539
+ * @defaultValue `null` (the browser viewport)
1540
+ */
1541
+ root?: Element | Document | null | undefined;
1542
+ /**
1543
+ * Margin added around `root`'s bounding box before computing
1544
+ * intersections, in CSS `margin` shorthand syntax (e.g. `"200px 0px"`
1545
+ * to start intersecting 200px early, useful for pre-triggering
1546
+ * lazy-loads slightly before an element is actually on screen).
1547
+ *
1548
+ * @defaultValue `"0px"`
1549
+ */
1550
+ rootMargin?: string | undefined;
1551
+ /**
1552
+ * The intersection ratio (or ratios) at which the callback fires. A
1553
+ * single number fires once past that ratio; an array fires at each
1554
+ * threshold crossed, useful for progressive/scroll-linked effects.
1555
+ *
1556
+ * @defaultValue `0` (fires as soon as even one pixel is visible)
1557
+ */
1558
+ threshold?: number | number[] | undefined;
1559
+ /**
1560
+ * Pause observing without unmounting - `isIntersecting` and
1561
+ * `intersectionRatio` are retained at their last values, just no longer
1562
+ * updated.
1563
+ *
1564
+ * @defaultValue `true`
1565
+ */
1566
+ enabled?: boolean | undefined;
1567
+ /**
1568
+ * Once the target intersects for the first time, disconnect the
1569
+ * observer and leave `isIntersecting` latched at `true` permanently (for
1570
+ * this target - a new target gets a fresh chance). Useful for
1571
+ * lazy-load-once patterns, where there's no need to keep paying for
1572
+ * observation after the content has already loaded.
1573
+ *
1574
+ * @defaultValue `false`
1575
+ */
1576
+ freezeOnceVisible?: boolean | undefined;
1577
+ /**
1578
+ * Value returned before the first observation resolves.
1579
+ *
1580
+ * @defaultValue `false`
1581
+ */
1582
+ initialIsIntersecting?: boolean | undefined;
1583
+ /**
1584
+ * Debounce state updates by this many milliseconds. `0` applies every
1585
+ * observation immediately.
1586
+ *
1587
+ * @defaultValue `0`
1588
+ */
1589
+ debounceMs?: number | undefined;
1590
+ /**
1591
+ * Imperative callback fired on every observation update, in addition to
1592
+ * (not instead of) the hook's returned state updating.
1593
+ *
1594
+ * @param isIntersecting - Whether the target currently intersects `root`.
1595
+ * @param entry - The raw `IntersectionObserverEntry` for this observation.
1596
+ */
1597
+ onChange?: (isIntersecting: boolean, entry: IntersectionObserverEntry) => void | undefined;
1598
+ }
1599
+ /**
1600
+ * Return value of {@link useIntersectionObserver}.
1601
+ *
1602
+ * @typeParam T - Element type of the ref-callback, e.g. pass
1603
+ * `useIntersectionObserver<HTMLImageElement>()` for `ref` typed as
1604
+ * `RefCallback<HTMLImageElement>` instead of the default `RefCallback<Element>`.
1605
+ */
1606
+ export interface UseIntersectionObserverReturn<T extends Element = Element> {
1607
+ /**
1608
+ * Attach to your own JSX element to observe it: `<div ref={ref}>`. A
1609
+ * no-op (never called) when `target` is supplied instead.
1610
+ */
1611
+ ref: React$1.RefCallback<T>;
1612
+ /** Whether the target currently intersects `root`, per the last observation. */
1613
+ isIntersecting: boolean;
1614
+ /** How much of the target is currently visible, from `0` (none) to `1` (fully visible). */
1615
+ intersectionRatio: number;
1616
+ /** The raw entry from the most recent observation. `undefined` before the first one. */
1617
+ entry: IntersectionObserverEntry | undefined;
1618
+ }
1619
+ /**
1620
+ * Tracks whether an element intersects a root (by default, the viewport),
1621
+ * backed by the native `IntersectionObserver` API.
1622
+ *
1623
+ * @remarks
1624
+ * Supports two ways of choosing what to observe - see
1625
+ * {@link IntersectionTargetInput} for the full list of accepted shapes:
1626
+ * - **Ref-callback mode** (default): attach the returned `ref` to your own
1627
+ * JSX element.
1628
+ * - **External target mode**: pass `target` (an element, `RefObject`, or
1629
+ * getter function) to observe something you don't render yourself.
1630
+ *
1631
+ * `isIntersecting`/`intersectionRatio` reflect `initialIsIntersecting`/`0`
1632
+ * until the first observation resolves, which happens asynchronously after
1633
+ * mount.
1634
+ *
1635
+ * @typeParam T - Element type of the ref-callback, e.g. pass
1636
+ * `useIntersectionObserver<HTMLImageElement>()` if you want `ref` typed as
1637
+ * `RefCallback<HTMLImageElement>` instead of the default `RefCallback<Element>`.
1638
+ *
1639
+ * @param options - See {@link UseIntersectionObserverOptions}. All fields optional.
1640
+ * @returns See {@link UseIntersectionObserverReturn}.
1641
+ *
1642
+ * @example
1643
+ * Lazy-load an image once it's actually visible, then stop observing:
1644
+ * ```tsx
1645
+ * function LazyImage({ src }: { src: string }) {
1646
+ * const { ref, isIntersecting } = useIntersectionObserver<HTMLDivElement>({
1647
+ * freezeOnceVisible: true,
1648
+ * rootMargin: "200px",
1649
+ * });
1650
+ * return <div ref={ref}>{isIntersecting && <img src={src} />}</div>;
1651
+ * }
1652
+ * ```
1653
+ *
1654
+ * @example
1655
+ * External target mode, observing a scroll-triggered "load more" sentinel:
1656
+ * ```tsx
1657
+ * const sentinelRef = useRef<HTMLDivElement>(null);
1658
+ * const { isIntersecting } = useIntersectionObserver({
1659
+ * target: () => sentinelRef.current,
1660
+ * onChange: (visible) => visible && loadNextPage(),
1661
+ * });
1662
+ * ```
1663
+ *
1664
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API | Intersection Observer API} on MDN
1665
+ */
1666
+ export declare function useIntersectionObserver<T extends Element = Element>(options?: UseIntersectionObserverOptions): UseIntersectionObserverReturn<T>;
1667
+ /**
1668
+ * How to tell {@link useMutationObserver} what to observe.
1669
+ *
1670
+ * @remarks
1671
+ * Three shapes are accepted, matching the `getScrollElement`-style
1672
+ * convention used elsewhere in this library:
1673
+ * - **omitted / `undefined`** - ref-callback mode. Attach the hook's
1674
+ * returned `ref` to your own JSX element.
1675
+ * - **`null`** - explicitly disabled; nothing is observed regardless of
1676
+ * `enabled`.
1677
+ * - **a `Node`, a `RefObject`, or a getter function** (`() => Node | null`)
1678
+ * - resolved on every render, so it's safe to pass e.g.
1679
+ * `() => someRef.current` without memoizing it.
1680
+ *
1681
+ * Typed as `Node` (rather than `Element`, like {@link IntersectionTargetInput})
1682
+ * because the native `MutationObserver.observe()` accepts any `Node` -
1683
+ * `Document` and `DocumentFragment` included, not just elements.
1684
+ */
1685
+ export type MutationTargetInput = Node | React$1.RefObject<Node | null> | (() => Node | null) | null;
1686
+ /**
1687
+ * Options for {@link useMutationObserver}.
1688
+ *
1689
+ * @remarks
1690
+ * Extends the native `MutationObserverInit` directly, so `childList`,
1691
+ * `attributes`, `attributeFilter`, `attributeOldValue`, `characterData`,
1692
+ * `characterDataOldValue`, and `subtree` all work exactly as documented for
1693
+ * {@link https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe | MutationObserver.observe()} -
1694
+ * this hook doesn't change their meaning or defaults, just forwards them.
1695
+ * Note the native API throws if `attributeFilter`/`attributeOldValue` are
1696
+ * set while `attributes` is explicitly `false`.
1697
+ */
1698
+ export interface UseMutationObserverOptions {
1699
+ /**
1700
+ * External target to observe.
1701
+ *
1702
+ * @defaultValue `undefined` (ref-callback mode - see {@link MutationTargetInput})
1703
+ */
1704
+ target?: MutationTargetInput;
1705
+ /**
1706
+ * Pause observing without unmounting - the last delivered `records` are
1707
+ * retained, just no longer updated.
1708
+ *
1709
+ * @defaultValue `true`
1710
+ */
1711
+ enabled?: boolean | undefined;
1712
+ /**
1713
+ * Debounce state updates by this many milliseconds. `0` applies every
1714
+ * batch immediately. Note the native `MutationObserver` already batches
1715
+ * synchronous mutations into one callback per microtask on its own -
1716
+ * this further throttles the resulting React re-renders on top of that,
1717
+ * useful when mutations arrive in frequent, independent bursts.
1718
+ *
1719
+ * @defaultValue `0`
1720
+ */
1721
+ debounceMs?: number | undefined;
1722
+ /**
1723
+ * Imperative callback fired on every batch of mutations, in addition to
1724
+ * (not instead of) the hook's returned `records` state updating.
1725
+ *
1726
+ * @param mutations - The batch of records delivered by the native observer.
1727
+ * @param observer - The underlying `MutationObserver` instance, e.g. to call `.takeRecords()` from within the callback.
1728
+ */
1729
+ onMutate?: (mutations: MutationRecord[], observer: MutationObserver) => void | undefined;
1730
+ childList?: boolean | undefined;
1731
+ attributes?: boolean | undefined;
1732
+ attributeFilter?: string[] | undefined;
1733
+ attributeOldValue?: boolean | undefined;
1734
+ characterData?: boolean | undefined;
1735
+ characterDataOldValue?: boolean | undefined;
1736
+ subtree?: boolean | undefined;
1737
+ }
1738
+ /**
1739
+ * Return value of {@link useMutationObserver}.
1740
+ *
1741
+ * @typeParam T - Node type of the ref-callback, e.g. pass
1742
+ * `useMutationObserver<HTMLDivElement>()` for `ref` typed as
1743
+ * `RefCallback<HTMLDivElement>` instead of the default `RefCallback<Element>`.
1744
+ */
1745
+ export interface UseMutationObserverReturn<T extends Node = Element> {
1746
+ /**
1747
+ * Attach to your own JSX element to observe it: `<div ref={ref}>`. A
1748
+ * no-op (never called) when `target` is supplied instead.
1749
+ */
1750
+ ref: React$1.RefCallback<T>;
1751
+ /** The most recent batch of mutation records. Empty until the first batch arrives. */
1752
+ records: MutationRecord[];
1753
+ /**
1754
+ * Synchronously flushes and returns any mutation records queued but not
1755
+ * yet delivered to `onMutate`/`records` - a direct passthrough to the
1756
+ * native `MutationObserver.takeRecords()`. Useful immediately before
1757
+ * reading layout, to make sure you're not acting on stale DOM state.
1758
+ */
1759
+ takeRecords: () => MutationRecord[];
1760
+ }
1761
+ /**
1762
+ * Watches a DOM subtree for mutations - child list changes, attribute
1763
+ * changes, and/or character data changes - backed by the native
1764
+ * `MutationObserver` API.
1765
+ *
1766
+ * @remarks
1767
+ * Supports two ways of choosing what to observe - see
1768
+ * {@link MutationTargetInput} for the full list of accepted shapes:
1769
+ * - **Ref-callback mode** (default): attach the returned `ref` to your own
1770
+ * JSX element.
1771
+ * - **External target mode**: pass `target` (a node, `RefObject`, or getter
1772
+ * function) to observe something you don't render yourself.
1773
+ *
1774
+ * By default only `childList` is observed - pass `attributes: true`,
1775
+ * `characterData: true`, and/or `subtree: true` explicitly to also watch
1776
+ * those (see {@link UseMutationObserverOptions} for the full native option
1777
+ * set this hook forwards).
1778
+ *
1779
+ * This is a general-purpose DOM-watching hook, not something
1780
+ * {@link useVirtualList}/{@link useVirtualGrid} use internally - item
1781
+ * resizing is tracked via `measureElement` (backed by `ResizeObserver`
1782
+ * instead, which is the correct tool for size changes specifically).
1783
+ *
1784
+ * @typeParam T - Node type of the ref-callback, e.g. pass
1785
+ * `useMutationObserver<HTMLDivElement>()` if you want `ref` typed as
1786
+ * `RefCallback<HTMLDivElement>` instead of the default `RefCallback<Element>`.
1787
+ *
1788
+ * @param options - See {@link UseMutationObserverOptions}. All fields optional.
1789
+ * @returns See {@link UseMutationObserverReturn}.
1790
+ *
1791
+ * @example
1792
+ * Warn in development if a third-party script injects DOM nodes into a container React manages:
1793
+ * ```tsx
1794
+ * function ManagedContainer() {
1795
+ * const { ref, records } = useMutationObserver<HTMLDivElement>({ subtree: true });
1796
+ * useEffect(() => {
1797
+ * if (records.length) console.warn("Unexpected external DOM mutation", records);
1798
+ * }, [records]);
1799
+ * return <div ref={ref}>{"..."}</div>;
1800
+ * }
1801
+ * ```
1802
+ *
1803
+ * @example
1804
+ * External target mode, watching a specific attribute:
1805
+ * ```tsx
1806
+ * const rootRef = useRef<HTMLElement>(document.documentElement);
1807
+ * useMutationObserver({
1808
+ * target: () => rootRef.current,
1809
+ * attributes: true,
1810
+ * attributeFilter: ["data-theme"],
1811
+ * onMutate: () => console.log("theme changed"),
1812
+ * });
1813
+ * ```
1814
+ *
1815
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver | MutationObserver} on MDN
1816
+ */
1817
+ export declare function useMutationObserver<T extends Node = Element>(options?: UseMutationObserverOptions): UseMutationObserverReturn<T>;
1818
+ /**
1819
+ * Which CSS box model {@link useResizeObserver} measures.
1820
+ *
1821
+ * @remarks
1822
+ * Mirrors the `box` option of the native
1823
+ * {@link https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/observe | ResizeObserver.observe()}
1824
+ * method:
1825
+ * - `"content-box"` - padding and border excluded. The default, and what
1826
+ * most layout code expects (matches `element.clientWidth`/`clientHeight`
1827
+ * roughly, modulo scrollbars).
1828
+ * - `"border-box"` - padding and border included (matches
1829
+ * `getBoundingClientRect()` for elements without CSS transforms).
1830
+ * - `"device-pixel-content-box"` - content-box, but in physical device
1831
+ * pixels rather than CSS pixels. Useful for pixel-perfect canvas/WebGL
1832
+ * sizing on high-DPI screens. Falls back to `"content-box"` on browsers
1833
+ * that don't populate this field on the observer entry.
1834
+ *
1835
+ * Ignored when the observed target is a `Window` - see {@link ResizeObserverTargetElement}.
1836
+ */
1837
+ export type ResizeObserverBox = "border-box" | "content-box" | "device-pixel-content-box";
1838
+ /**
1839
+ * Anything {@link useResizeObserver} can observe: `Element` for a normal DOM
1840
+ * node, or `Document`/`Window` for whole-page sizing (both fall back to
1841
+ * `document.documentElement`'s `clientWidth`/`clientHeight` internally,
1842
+ * since `ResizeObserver` itself can only `observe()` an `Element`).
1843
+ */
1844
+ export type ResizeObserverTargetElement = Document | Element | Window;
1845
+ /**
1846
+ * How to tell {@link useResizeObserver} what to observe.
1847
+ *
1848
+ * @remarks
1849
+ * Four shapes are accepted, matching the `getScrollElement`-style
1850
+ * convention used elsewhere in this library:
1851
+ * - **omitted / `undefined`** - ref-callback mode. Attach the hook's
1852
+ * returned `ref` to your own JSX element.
1853
+ * - **`null`** - explicitly disabled; nothing is observed regardless of
1854
+ * `enabled`.
1855
+ * - **an element, `Document`, or `Window`** - observe it directly.
1856
+ * - **a `RefObject` or a getter function** (`() => ResizeObserverTargetElement | null`)
1857
+ * - resolved on every render, so it's safe to pass e.g. `() => scrollRef.current`
1858
+ * without memoizing it.
1859
+ */
1860
+ export type ResizeObserverTargetInput = ResizeObserverTargetElement | React$1.RefObject<ResizeObserverTargetElement | null> | (() => ResizeObserverTargetElement | null) | null;
1861
+ /** A measured width/height pair, in CSS pixels (or device pixels - see {@link ResizeObserverBox}). */
1862
+ export interface ObservedSize {
1863
+ width: number;
1864
+ height: number;
1865
+ }
1866
+ /** Options for {@link useResizeObserver}. */
1867
+ export interface UseResizeObserverOptions {
1868
+ /**
1869
+ * External target to observe.
1870
+ *
1871
+ * @defaultValue `undefined` (ref-callback mode - see {@link ResizeObserverTargetInput})
1872
+ */
1873
+ target?: ResizeObserverTargetInput;
1874
+ /**
1875
+ * Which box model to measure. Ignored when the target is a `Window`.
1876
+ *
1877
+ * @defaultValue `"content-box"`
1878
+ */
1879
+ box?: ResizeObserverBox;
1880
+ /**
1881
+ * Pause observing without unmounting - the last measured `width`/`height`
1882
+ * is retained, just no longer updated.
1883
+ *
1884
+ * @defaultValue `true`
1885
+ */
1886
+ enabled?: boolean;
1887
+ /**
1888
+ * Round `width`/`height` to whole pixels before updating state. Useful
1889
+ * because `ResizeObserver` can fire on sub-pixel changes, which is
1890
+ * usually more precision than layout code needs and causes more
1891
+ * re-renders than necessary.
1892
+ *
1893
+ * @defaultValue `false`
1894
+ */
1895
+ round?: boolean;
1896
+ /**
1897
+ * Debounce measurement updates by this many milliseconds. `0` applies
1898
+ * every measurement immediately (still batched by the browser's native
1899
+ * `ResizeObserver` delivery, just not further delayed by this hook).
1900
+ *
1901
+ * @defaultValue `0`
1902
+ */
1903
+ debounceMs?: number;
1904
+ /**
1905
+ * Value returned before the first real measurement resolves. Useful for
1906
+ * avoiding a `{ width: 0, height: 0 }` flash when you already know an
1907
+ * element's rough starting size (e.g. from a CSS `min-height`).
1908
+ *
1909
+ * @defaultValue `{ width: 0, height: 0 }`
1910
+ */
1911
+ initialSize?: ObservedSize;
1912
+ /**
1913
+ * Imperative callback fired on every measurement update, in addition to
1914
+ * (not instead of) the hook's returned `width`/`height` state updating.
1915
+ * Useful for side effects that don't need a re-render, like redrawing a
1916
+ * canvas.
1917
+ *
1918
+ * @param size - The newly measured (and possibly rounded) size.
1919
+ * @param entry - The raw `ResizeObserverEntry`, or `undefined` when the
1920
+ * target is a `Window` (which has no entry, since it's measured via the
1921
+ * native `resize` event rather than `ResizeObserver`).
1922
+ */
1923
+ onResize?: (size: ObservedSize, entry: ResizeObserverEntry | undefined) => void;
1924
+ }
1925
+ /**
1926
+ * Return value of {@link useResizeObserver}.
1927
+ *
1928
+ * @typeParam T - Element type of the ref-callback, for when you want e.g.
1929
+ * `RefCallback<HTMLDivElement>` instead of the default `RefCallback<Element>`.
1930
+ */
1931
+ export interface UseResizeObserverReturn<T extends Element = Element> {
1932
+ /**
1933
+ * Attach to your own JSX element to observe it:
1934
+ * `<div ref={ref}>`. A no-op (never called) when `target` is supplied
1935
+ * instead.
1936
+ */
1937
+ ref: React$1.RefCallback<T>;
1938
+ /** Latest measured width. `0` until the first measurement (or `initialSize.width`, if provided). */
1939
+ width: number;
1940
+ /** Latest measured height. `0` until the first measurement (or `initialSize.height`, if provided). */
1941
+ height: number;
1942
+ /**
1943
+ * The raw entry from the most recent measurement, for reading fields
1944
+ * this hook doesn't surface directly (e.g. `borderBoxSize` alongside a
1945
+ * `box: "content-box"` measurement). `undefined` before the first
1946
+ * measurement, and always `undefined` for `Window` targets.
1947
+ */
1948
+ entry: ResizeObserverEntry | undefined;
1949
+ }
1950
+ /**
1951
+ * Tracks an element's (or the window's) rendered size reactively, backed by
1952
+ * the native `ResizeObserver` API.
1953
+ *
1954
+ * @remarks
1955
+ * Supports two ways of choosing what to observe - see
1956
+ * {@link ResizeObserverTargetInput} for the full list of accepted shapes:
1957
+ * - **Ref-callback mode** (default): attach the returned `ref` to your own
1958
+ * JSX element.
1959
+ * - **External target mode**: pass `target` (an element, `RefObject`, or
1960
+ * getter function) to observe something you don't render yourself - for
1961
+ * example, a scroll container obtained via a `getScrollElement()`-style
1962
+ * callback.
1963
+ *
1964
+ * `width`/`height` are `0` (or `initialSize`, if provided) until the first
1965
+ * measurement resolves, which happens asynchronously after mount - so the
1966
+ * very first render on the client, and any render during SSR, will not yet
1967
+ * reflect the element's real size.
1968
+ *
1969
+ * @typeParam T - Element type of the ref-callback, e.g. pass
1970
+ * `useResizeObserver<HTMLDivElement>()` if you want `ref` typed as
1971
+ * `RefCallback<HTMLDivElement>` instead of the default `RefCallback<Element>`.
1972
+ *
1973
+ * @param options - See {@link UseResizeObserverOptions}. All fields optional.
1974
+ * @returns See {@link UseResizeObserverReturn}.
1975
+ *
1976
+ * @example
1977
+ * Ref-callback mode - observe your own element:
1978
+ * ```tsx
1979
+ * function Panel() {
1980
+ * const { ref, width, height } = useResizeObserver<HTMLDivElement>();
1981
+ * return <div ref={ref}>{width} x {height}</div>;
1982
+ * }
1983
+ * ```
1984
+ *
1985
+ * @example
1986
+ * External target mode - observe an element you don't render, e.g. a scroll container:
1987
+ * ```tsx
1988
+ * const scrollRef = useRef<HTMLDivElement>(null);
1989
+ * const { width, height } = useResizeObserver({
1990
+ * target: () => scrollRef.current,
1991
+ * });
1992
+ * ```
1993
+ *
1994
+ * @example
1995
+ * Debounced, rounded, with an imperative side effect:
1996
+ * ```tsx
1997
+ * const { width, height } = useResizeObserver({
1998
+ * round: true,
1999
+ * debounceMs: 100,
2000
+ * onResize: (size) => redrawCanvas(size),
2001
+ * });
2002
+ * ```
2003
+ *
2004
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver | ResizeObserver} on MDN
2005
+ */
2006
+ export declare function useResizeObserver<T extends Element = Element>(options?: UseResizeObserverOptions): UseResizeObserverReturn<T>;
2007
+ /**
2008
+ * How `scrollToIndex`/`scrollToOffset` (and the equivalent
2009
+ * row/column/cell methods on `useVirtualGrid`) position a target item
2010
+ * relative to the viewport.
2011
+ *
2012
+ * @remarks
2013
+ * - `"start"` - align the item's leading edge with the viewport's leading edge.
2014
+ * - `"end"` - align the item's trailing edge with the viewport's trailing edge.
2015
+ * - `"center"` - center the item within the viewport.
2016
+ * - `"auto"` - do nothing if the item is already fully visible; otherwise
2017
+ * scroll the minimum distance needed to bring it fully into view.
2018
+ *
2019
+ * For `reverse` lists, `"start"`/`"end"` are relative to the *logical*
2020
+ * reading direction (which visually flips), not the physical viewport -
2021
+ * `"auto"` always minimizes physical scroll distance regardless of
2022
+ * `reverse`, since "nearest" is a physical-space concept.
2023
+ */
1508
2024
  export type ScrollAlign = "start" | "center" | "end" | "auto";
2025
+ /** Which scroll direction a size, offset, or measurement refers to. */
1509
2026
  export type Axis = "vertical" | "horizontal";
2027
+ /** Options shared by the imperative `scrollTo*` methods across the virtualization hooks. */
1510
2028
  export interface ScrollToOffsetOptions {
2029
+ /**
2030
+ * Use smooth (animated) scrolling instead of an instant jump.
2031
+ *
2032
+ * @defaultValue `false`
2033
+ */
1511
2034
  smooth?: boolean;
1512
2035
  }
2036
+ /** Options for {@link useVirtualGrid}'s `scrollToCell` method. */
1513
2037
  export interface ScrollToCellOptions {
2038
+ /**
2039
+ * How to position the target row within the viewport.
2040
+ *
2041
+ * @defaultValue `"auto"`
2042
+ */
1514
2043
  rowAlign?: ScrollAlign;
2044
+ /**
2045
+ * How to position the target column within the viewport.
2046
+ *
2047
+ * @defaultValue `"auto"`
2048
+ */
1515
2049
  colAlign?: ScrollAlign;
2050
+ /**
2051
+ * Use smooth (animated) scrolling instead of an instant jump.
2052
+ *
2053
+ * @defaultValue `false`
2054
+ */
1516
2055
  smooth?: boolean;
1517
2056
  }
2057
+ /** Options for {@link useVirtualGrid}'s `scrollToRow` method. */
1518
2058
  export interface ScrollToRowOptions {
2059
+ /**
2060
+ * How to position the target row within the viewport.
2061
+ *
2062
+ * @defaultValue `"auto"`
2063
+ */
1519
2064
  align?: ScrollAlign;
2065
+ /**
2066
+ * Use smooth (animated) scrolling instead of an instant jump.
2067
+ *
2068
+ * @defaultValue `false`
2069
+ */
1520
2070
  smooth?: boolean;
1521
2071
  }
2072
+ /** Options for {@link useVirtualGrid}'s `scrollToColumn` method. */
1522
2073
  export interface ScrollToColumnOptions {
2074
+ /**
2075
+ * How to position the target column within the viewport.
2076
+ *
2077
+ * @defaultValue `"auto"`
2078
+ */
1523
2079
  align?: ScrollAlign;
2080
+ /**
2081
+ * Use smooth (animated) scrolling instead of an instant jump.
2082
+ *
2083
+ * @defaultValue `false`
2084
+ */
1524
2085
  smooth?: boolean;
1525
2086
  }
2087
+ /** A single rendered cell, as produced by {@link useVirtualGrid}'s `virtualCells`. */
1526
2088
  export interface VirtualCell {
1527
- key: React$1.Key;
2089
+ /**
2090
+ * A stable React key for this cell - derived from `itemKey` if
2091
+ * provided, otherwise `` `${rowIndex}:${colIndex}` ``.
2092
+ */
2093
+ key: string | number;
2094
+ /** This cell's row position in the full (un-virtualized) grid. */
1528
2095
  rowIndex: number;
2096
+ /** This cell's column position in the full (un-virtualized) grid. */
1529
2097
  colIndex: number;
2098
+ /** This cell's row height - the max measured height among its row's currently-tracked cells, if `measureElement` is in use. */
1530
2099
  height: number;
2100
+ /** This cell's column width - the max measured width among its column's currently-tracked cells, if `measureElement` is in use. */
1531
2101
  width: number;
2102
+ /** This cell's top position, relative to the top of the virtualized content (i.e. excluding `scrollMarginTop`). */
1532
2103
  top: number;
2104
+ /** This cell's left position, relative to the left of the virtualized content (i.e. excluding `scrollMarginLeft`). */
1533
2105
  left: number;
2106
+ /** `top + height` - this cell's bottom position, provided for convenience. */
2107
+ bottom: number;
2108
+ /** `left + width` - this cell's right position, provided for convenience. */
2109
+ right: number;
1534
2110
  }
2111
+ /** The currently-rendered row/column index ranges, as produced by {@link useVirtualGrid}'s `onRangeChange`. */
2112
+ export interface VirtualGridRange {
2113
+ /** Numerically lowest rendered row index (inclusive), overscan included. */
2114
+ rowStartIndex: number;
2115
+ /** Numerically highest rendered row index (inclusive), overscan included. */
2116
+ rowEndIndex: number;
2117
+ /** Numerically lowest rendered column index (inclusive), overscan included. */
2118
+ colStartIndex: number;
2119
+ /** Numerically highest rendered column index (inclusive), overscan included. */
2120
+ colEndIndex: number;
2121
+ }
2122
+ /** Customizes what "visible" means for the `pauseWhenOffscreen` option - see {@link UseVirtualGridOptions.pauseWhenOffscreen}. */
2123
+ export interface PauseWhenOffscreenConfig {
2124
+ /**
2125
+ * The element used as the viewport when checking whether the scroll
2126
+ * container is visible.
2127
+ *
2128
+ * @defaultValue `null` (the nearest scrollable ancestor / browser viewport, per `IntersectionObserver`'s native `root` behavior)
2129
+ */
2130
+ root?: Element | Document | null;
2131
+ /**
2132
+ * Margin added around `root`'s bounding box before checking visibility,
2133
+ * in CSS `margin` shorthand syntax.
2134
+ *
2135
+ * @defaultValue `"0px"`
2136
+ */
2137
+ rootMargin?: string;
2138
+ }
2139
+ /** Options for {@link useVirtualGrid}. */
1535
2140
  export interface UseVirtualGridOptions {
2141
+ /** Total number of rows in the full (un-virtualized) grid. */
1536
2142
  rowCount: number;
2143
+ /** Total number of columns in the full (un-virtualized) grid. */
1537
2144
  colCount: number;
2145
+ /**
2146
+ * Each row's height - a constant applied to every row, or a function
2147
+ * called per row index.
2148
+ *
2149
+ * @remarks
2150
+ * When a function is used and `measureElement` isn't attached to your
2151
+ * rendered cells, this is treated as a fixed height (not just an
2152
+ * initial estimate). A function here is memoized internally keyed on
2153
+ * its own reference identity - see the equivalent note on
2154
+ * {@link estimateColumnWidth}, which applies the same way to this field.
2155
+ */
1538
2156
  estimateRowHeight: number | ((rowIndex: number) => number);
2157
+ /**
2158
+ * Each column's width - a constant applied to every column, or a
2159
+ * function called per column index.
2160
+ *
2161
+ * @remarks
2162
+ * When a function is used and `measureElement` isn't attached to your
2163
+ * rendered cells, this is treated as a fixed width (not just an
2164
+ * initial estimate) - attach `measureElement` if you want actual
2165
+ * rendered sizes to refine it over time.
2166
+ *
2167
+ * A function `estimateColumnWidth` (and likewise `estimateRowHeight`)
2168
+ * is memoized internally keyed on its own reference identity - passing
2169
+ * a new inline function every render rebuilds the entire internal size
2170
+ * cache on every render, which defeats the point of caching. Memoize it
2171
+ * if it's not already stable.
2172
+ */
1539
2173
  estimateColumnWidth: number | ((colIndex: number) => number);
2174
+ /**
2175
+ * Returns the scrollable element to track - called fresh on every
2176
+ * render, so it's safe to pass e.g. `() => scrollRef.current` without
2177
+ * memoizing it. Return `window` or `document` to virtualize within the
2178
+ * whole page's own scroll, instead of a dedicated scrollable container.
2179
+ */
1540
2180
  getScrollElement: () => HTMLElement | Window | Document | null;
2181
+ /**
2182
+ * Extra rows rendered beyond each edge of the visible range, to reduce
2183
+ * blank flashes during fast scrolling.
2184
+ *
2185
+ * @defaultValue `3`
2186
+ */
1541
2187
  overscanRows?: number;
2188
+ /**
2189
+ * Extra columns rendered beyond each edge of the visible range.
2190
+ *
2191
+ * @defaultValue `3`
2192
+ */
1542
2193
  overscanCols?: number;
2194
+ /**
2195
+ * Space between rows.
2196
+ *
2197
+ * @defaultValue `0`
2198
+ */
2199
+ rowGap?: number;
2200
+ /**
2201
+ * Space between columns.
2202
+ *
2203
+ * @defaultValue `0`
2204
+ */
2205
+ columnGap?: number;
2206
+ /**
2207
+ * Distance this grid's content starts from the top of a shared scroll
2208
+ * container - e.g. page content above it when using Window/Document
2209
+ * scrolling.
2210
+ *
2211
+ * @defaultValue `0`
2212
+ */
2213
+ scrollMarginTop?: number;
2214
+ /**
2215
+ * Distance this grid's content starts from the left of a shared scroll
2216
+ * container.
2217
+ *
2218
+ * @defaultValue `0`
2219
+ */
2220
+ scrollMarginLeft?: number;
2221
+ /**
2222
+ * RTL horizontal scrolling (affects the column axis). Uses the modern
2223
+ * (negative `scrollLeft`) convention - not cross-browser verified.
2224
+ *
2225
+ * @defaultValue `false`
2226
+ */
2227
+ isRtl?: boolean;
2228
+ /**
2229
+ * Pause scroll/resize tracking without unmounting. Virtual cells freeze
2230
+ * at their last computed state rather than going blank.
2231
+ *
2232
+ * @defaultValue `true`
2233
+ */
2234
+ enabled?: boolean;
2235
+ /**
2236
+ * Also pause scroll/resize tracking whenever the scroll element itself
2237
+ * isn't visible on screen - `true` for defaults, or a
2238
+ * {@link PauseWhenOffscreenConfig} to customize the
2239
+ * `IntersectionObserver` `root`/`rootMargin`. Has no effect when
2240
+ * `getScrollElement` returns `Window`/`Document`, since a whole-page
2241
+ * scroller has no meaningful "offscreen" state of its own.
2242
+ *
2243
+ * @defaultValue `false` (opt-in, since it adds an observer)
2244
+ */
2245
+ pauseWhenOffscreen?: boolean | PauseWhenOffscreenConfig;
2246
+ /**
2247
+ * How long scrolling must stay idle before `isScrolling` flips back to
2248
+ * `false`. `0` (or any non-positive value) resolves `isScrolling` to
2249
+ * `false` immediately, rather than disabling tracking altogether.
2250
+ *
2251
+ * @defaultValue `150`
2252
+ */
1543
2253
  scrollingDelay?: number;
2254
+ /**
2255
+ * Assumed viewport height before the scroll container has been
2256
+ * measured.
2257
+ *
2258
+ * @defaultValue `0`
2259
+ */
1544
2260
  initialViewportHeight?: number;
2261
+ /**
2262
+ * Assumed viewport width before the scroll container has been
2263
+ * measured.
2264
+ *
2265
+ * @defaultValue `0`
2266
+ */
1545
2267
  initialViewportWidth?: number;
2268
+ /** Scroll to this vertical offset on mount, before the first paint. Takes priority over `initialScrollRow` if both are set. */
1546
2269
  initialScrollTop?: number;
2270
+ /** Scroll to this horizontal offset on mount, before the first paint. Takes priority over `initialScrollCol` if both are set. */
1547
2271
  initialScrollLeft?: number;
2272
+ /** Scroll so this row is visible on mount, before the first paint. Ignored if `initialScrollTop` is also set. */
1548
2273
  initialScrollRow?: number;
2274
+ /** Scroll so this column is visible on mount, before the first paint. Ignored if `initialScrollLeft` is also set. */
1549
2275
  initialScrollCol?: number;
1550
- itemKey?: (rowIndex: number, colIndex: number) => React$1.Key;
2276
+ /**
2277
+ * How `initialScrollRow` is aligned within the viewport. Only used
2278
+ * together with `initialScrollRow`.
2279
+ *
2280
+ * @defaultValue `"start"`
2281
+ */
2282
+ initialRowAlign?: ScrollAlign;
2283
+ /**
2284
+ * How `initialScrollCol` is aligned within the viewport. Only used
2285
+ * together with `initialScrollCol`.
2286
+ *
2287
+ * @defaultValue `"start"`
2288
+ */
2289
+ initialColAlign?: ScrollAlign;
2290
+ /**
2291
+ * When `measureElement` reports a size for a row/column positioned
2292
+ * before the current viewport, adjust `scrollTop`/`scrollLeft` by the
2293
+ * same delta so already-visible content doesn't visually jump.
2294
+ *
2295
+ * @defaultValue `true`
2296
+ */
2297
+ adjustScrollOnMeasure?: boolean;
2298
+ /**
2299
+ * Derives each rendered cell's React `key`. Falls back to
2300
+ * `` `${rowIndex}:${colIndex}` `` if omitted.
2301
+ */
2302
+ itemKey?: (rowIndex: number, colIndex: number) => string | number;
2303
+ /**
2304
+ * Called whenever the rendered row or column index range actually
2305
+ * changes (not on every render). Useful for analytics, or triggering
2306
+ * data-fetching from outside the hook.
2307
+ */
2308
+ onRangeChange?: (range: VirtualGridRange) => void;
1551
2309
  }
2310
+ /** Return value of {@link useVirtualGrid}. */
1552
2311
  export interface UseVirtualGridReturn {
2312
+ /** The currently-rendered cells (visible rows x visible columns, plus overscan), each with a computed size/position. Render these, not the full `rowCount` x `colCount`. */
1553
2313
  virtualCells: VirtualCell[];
2314
+ /** Total height of all rows plus row gaps - set this as the virtualized container's height so the vertical scrollbar is sized correctly. */
1554
2315
  totalHeight: number;
2316
+ /** Total width of all columns plus column gaps - set this as the virtualized container's width so the horizontal scrollbar is sized correctly. */
1555
2317
  totalWidth: number;
2318
+ /** Whether the grid is currently scrolling, per `scrollingDelay`. Useful for cheaper rendering while actively scrolling. */
1556
2319
  isScrolling: boolean;
2320
+ /** Imperatively scrolls so the given cell is visible on both axes, per the requested {@link ScrollToCellOptions}. Stable across renders. */
1557
2321
  scrollToCell: (rowIndex: number, colIndex: number, options?: ScrollToCellOptions) => void;
2322
+ /** Imperatively scrolls to exact top/left offsets, each clamped into range. Stable across renders. */
1558
2323
  scrollToOffset: (offsets: {
1559
2324
  top: number;
1560
2325
  left: number;
1561
2326
  }, options?: ScrollToOffsetOptions) => void;
2327
+ /** Imperatively scrolls so the given row is visible, leaving the horizontal scroll position untouched. Stable across renders. */
1562
2328
  scrollToRow: (rowIndex: number, options?: ScrollToRowOptions) => void;
2329
+ /** Imperatively scrolls so the given column is visible, leaving the vertical scroll position untouched. Stable across renders. */
1563
2330
  scrollToColumn: (colIndex: number, options?: ScrollToColumnOptions) => void;
2331
+ /**
2332
+ * Attach to your rendered cell's DOM node to enable dynamic measurement:
2333
+ * `<div ref={measureElement} data-row-index={cell.rowIndex} data-col-index={cell.colIndex}>`.
2334
+ * Row height is taken as the max measured height among that row's
2335
+ * currently-tracked cells (and likewise column width); reads indices
2336
+ * from data attributes (rather than taking them as parameters) so this
2337
+ * stays referentially stable and can be passed directly as `ref`.
2338
+ * No-op when both estimateRowHeight and estimateColumnWidth are plain
2339
+ * numbers (nothing to refine).
2340
+ */
2341
+ measureElement: React$1.RefCallback<Element>;
1564
2342
  }
2343
+ /**
2344
+ * Renders only the cells currently visible in a scrollable container (plus
2345
+ * a small overscan buffer on each axis), instead of the full
2346
+ * `rowCount` x `colCount` grid - keeps DOM node count roughly constant
2347
+ * regardless of how large the grid is.
2348
+ *
2349
+ * @remarks
2350
+ * Core behavior comes from `rowCount`/`colCount` + `estimateRowHeight`/
2351
+ * `estimateColumnWidth` + `getScrollElement`; everything else in
2352
+ * {@link UseVirtualGridOptions} is opt-in on top of that: `isRtl` for the
2353
+ * column axis's direction, `rowGap`/`columnGap`/`scrollMarginTop`/
2354
+ * `scrollMarginLeft` for layout details, `measureElement` (returned) for
2355
+ * refining both estimate functions with real rendered sizes (a row's
2356
+ * height becomes the max measured height among its currently-tracked
2357
+ * cells, and likewise for column width), `pauseWhenOffscreen`/`enabled`
2358
+ * for pausing tracking when inactive, and `initialScrollRow`/
2359
+ * `initialScrollCol`/`initialScrollTop`/`initialScrollLeft` for where to
2360
+ * start scrolled to. There's no `reverse` layout option here, unlike
2361
+ * {@link useVirtualList} - grids don't support reversed axes.
2362
+ *
2363
+ * `estimateRowHeight`/`estimateColumnWidth`, when functions, should be
2364
+ * memoized (stable across renders) - see the note on
2365
+ * {@link UseVirtualGridOptions.estimateColumnWidth} for why.
2366
+ *
2367
+ * @param options - See {@link UseVirtualGridOptions}.
2368
+ * @returns See {@link UseVirtualGridReturn}.
2369
+ *
2370
+ * @example
2371
+ * Fixed-size grid:
2372
+ * ```tsx
2373
+ * function Grid({ rows, cols }: { rows: number; cols: number }) {
2374
+ * const scrollRef = useRef<HTMLDivElement>(null);
2375
+ * const { virtualCells, totalHeight, totalWidth } = useVirtualGrid({
2376
+ * rowCount: rows,
2377
+ * colCount: cols,
2378
+ * estimateRowHeight: 32,
2379
+ * estimateColumnWidth: 120,
2380
+ * getScrollElement: () => scrollRef.current,
2381
+ * });
2382
+ *
2383
+ * return (
2384
+ * <div ref={scrollRef} style={{ height: 400, overflow: "auto" }}>
2385
+ * <div style={{ height: totalHeight, width: totalWidth, position: "relative" }}>
2386
+ * {virtualCells.map((cell) => (
2387
+ * <div
2388
+ * key={cell.key}
2389
+ * style={{ position: "absolute", top: cell.top, left: cell.left, height: cell.height, width: cell.width }}
2390
+ * >
2391
+ * {cell.rowIndex},{cell.colIndex}
2392
+ * </div>
2393
+ * ))}
2394
+ * </div>
2395
+ * </div>
2396
+ * );
2397
+ * }
2398
+ * ```
2399
+ *
2400
+ * @example
2401
+ * Variable-size cells, refined by real measurements:
2402
+ * ```tsx
2403
+ * const { virtualCells, measureElement } = useVirtualGrid({
2404
+ * rowCount: rows,
2405
+ * colCount: cols,
2406
+ * estimateRowHeight: () => 32, // rough guess
2407
+ * estimateColumnWidth: () => 120,
2408
+ * getScrollElement: () => scrollRef.current,
2409
+ * });
2410
+ * // in the cell: <div ref={measureElement} data-row-index={cell.rowIndex} data-col-index={cell.colIndex}>...
2411
+ * ```
2412
+ */
1565
2413
  export declare function useVirtualGrid(options: UseVirtualGridOptions): UseVirtualGridReturn;
2414
+ /** Options for {@link useVirtualList}'s `scrollToIndex` method. */
1566
2415
  export interface ScrollToIndexOptions {
2416
+ /**
2417
+ * How to position the target item relative to the viewport.
2418
+ *
2419
+ * @defaultValue `"auto"`
2420
+ */
1567
2421
  align?: ScrollAlign;
2422
+ /**
2423
+ * Use smooth (animated) scrolling instead of an instant jump.
2424
+ *
2425
+ * @defaultValue `false`
2426
+ */
1568
2427
  smooth?: boolean;
1569
2428
  }
2429
+ /** A single rendered item, as produced by {@link useVirtualList}'s `virtualItems`. */
1570
2430
  export interface VirtualItem {
1571
- key: React$1.Key;
2431
+ /**
2432
+ * A stable React key for this item - derived from `itemKey` if
2433
+ * provided, otherwise falls back to `index`.
2434
+ */
2435
+ key: string | number;
2436
+ /** This item's position in the full (un-virtualized) list. */
1572
2437
  index: number;
2438
+ /** This item's size along the scrolling axis (height for vertical lists, width for horizontal). */
1573
2439
  size: number;
2440
+ /**
2441
+ * This item's start position along the scrolling axis, relative to the
2442
+ * top/left of the virtualized content (i.e. excluding `scrollMargin`) -
2443
+ * typically consumed as a `transform: translateY(start)` (or
2444
+ * `translateX` for horizontal lists).
2445
+ */
1574
2446
  start: number;
2447
+ /** `start + size` - this item's end position, provided for convenience. */
2448
+ end: number;
2449
+ }
2450
+ /** The currently-rendered index range, as produced by {@link useVirtualList}'s `onRangeChange`. */
2451
+ export interface VirtualRange {
2452
+ /** Numerically lowest rendered index (inclusive), overscan included. */
2453
+ startIndex: number;
2454
+ /** Numerically highest rendered index (inclusive), overscan included. */
2455
+ endIndex: number;
1575
2456
  }
2457
+ interface PauseWhenOffscreenConfig$1 {
2458
+ /**
2459
+ * The element used as the viewport when checking whether the scroll
2460
+ * container is visible.
2461
+ *
2462
+ * @defaultValue `null` (the nearest scrollable ancestor / browser viewport, per `IntersectionObserver`'s native `root` behavior)
2463
+ */
2464
+ root?: Element | Document | null;
2465
+ /**
2466
+ * Margin added around `root`'s bounding box before checking visibility,
2467
+ * in CSS `margin` shorthand syntax - e.g. `"200px"` to keep tracking
2468
+ * active slightly before the list is actually on screen.
2469
+ *
2470
+ * @defaultValue `"0px"`
2471
+ */
2472
+ rootMargin?: string;
2473
+ }
2474
+ /** Options for {@link useVirtualList}. */
1576
2475
  export interface UseVirtualListOptions<T = unknown> {
2476
+ /** Total number of items in the full (un-virtualized) list. */
1577
2477
  count: number;
2478
+ /**
2479
+ * Each item's size along the scrolling axis - a constant applied to
2480
+ * every item, or a function called per-index.
2481
+ *
2482
+ * @remarks
2483
+ * When a function is used and `measureElement` isn't attached to your
2484
+ * rendered items, this is treated as a fixed size (not just an initial
2485
+ * estimate) - attach `measureElement` if you want actual rendered sizes
2486
+ * to refine it over time.
2487
+ *
2488
+ * A function `estimateSize` is memoized internally keyed on its own
2489
+ * reference identity - passing a new inline function every render (e.g.
2490
+ * `estimateSize={(i) => 50}` written directly in JSX/hook options,
2491
+ * rather than a `useCallback`-wrapped or module-level function) rebuilds
2492
+ * the entire internal size cache on every render, which defeats the
2493
+ * point of caching. Memoize it if it's not already stable.
2494
+ */
1578
2495
  estimateSize: number | ((index: number) => number);
2496
+ /**
2497
+ * Returns the scrollable element to track - called fresh on every
2498
+ * render, so it's safe to pass e.g. `() => scrollRef.current` without
2499
+ * memoizing it. Return `window` or `document` to virtualize within the
2500
+ * whole page's own scroll, instead of a dedicated scrollable container.
2501
+ */
1579
2502
  getScrollElement: () => HTMLElement | Window | Document | null;
2503
+ /**
2504
+ * Extra items rendered beyond each edge of the visible range, to reduce
2505
+ * blank flashes during fast scrolling and give browsers a head start on
2506
+ * things like image decoding.
2507
+ *
2508
+ * @defaultValue `3`
2509
+ */
1580
2510
  overscan?: number;
2511
+ /**
2512
+ * Scroll and measure along the horizontal axis (`scrollLeft`/width)
2513
+ * instead of the default vertical axis (`scrollTop`/height).
2514
+ *
2515
+ * @defaultValue `false`
2516
+ */
1581
2517
  horizontal?: boolean;
2518
+ /**
2519
+ * Render items in reverse physical order - index `0` at the visual
2520
+ * bottom/trailing end, `count - 1` at the visual top/leading end (the
2521
+ * indices themselves don't change, only where each one is positioned).
2522
+ * Suited to chat-style UIs. See {@link ScrollAlign} for how this
2523
+ * interacts with alignment.
2524
+ *
2525
+ * @defaultValue `false`
2526
+ */
1582
2527
  reverse?: boolean;
2528
+ /**
2529
+ * RTL horizontal scrolling. Only meaningful when `horizontal` is `true`.
2530
+ * Uses the modern (negative `scrollLeft`) convention - not
2531
+ * cross-browser verified.
2532
+ *
2533
+ * @defaultValue `false`
2534
+ */
2535
+ isRtl?: boolean;
2536
+ /**
2537
+ * Space between consecutive items along the scrolling axis. Not added
2538
+ * after the last item.
2539
+ *
2540
+ * @defaultValue `0`
2541
+ */
2542
+ gap?: number;
2543
+ /**
2544
+ * Distance this list's content starts from the top (or left, if
2545
+ * `horizontal`) of a shared scroll container - e.g. page content above
2546
+ * it when using Window/Document scrolling.
2547
+ *
2548
+ * @defaultValue `0`
2549
+ */
2550
+ scrollMargin?: number;
2551
+ /**
2552
+ * Pause scroll/resize tracking without unmounting. Virtual items freeze
2553
+ * at their last computed state rather than going blank.
2554
+ *
2555
+ * @defaultValue `true`
2556
+ */
2557
+ enabled?: boolean;
2558
+ /**
2559
+ * Also pause scroll/resize tracking whenever the scroll element itself
2560
+ * isn't visible on screen (e.g. a hidden tab panel, or far down a long
2561
+ * page) - `true` for defaults, or a {@link PauseWhenOffscreenConfig} to
2562
+ * customize the `IntersectionObserver` `root`/`rootMargin` used to
2563
+ * decide "visible". Has no effect when `getScrollElement` returns
2564
+ * `Window`/`Document`, since a whole-page scroller has no meaningful
2565
+ * "offscreen" state of its own.
2566
+ *
2567
+ * @defaultValue `false` (opt-in, since it adds an observer)
2568
+ */
2569
+ pauseWhenOffscreen?: boolean | PauseWhenOffscreenConfig$1;
2570
+ /**
2571
+ * How long scrolling must stay idle before `isScrolling` flips back to
2572
+ * `false`. `0` (or any non-positive value) resolves `isScrolling` to
2573
+ * `false` immediately on the next scroll-idle check, rather than
2574
+ * disabling `isScrolling` tracking altogether.
2575
+ *
2576
+ * @defaultValue `150`
2577
+ */
1583
2578
  scrollingDelay?: number;
2579
+ /**
2580
+ * Assumed viewport size before the scroll container has been measured
2581
+ * (e.g. during SSR, or the first client render before layout runs).
2582
+ * Also used as a fallback if a live measurement ever comes back `0`.
2583
+ *
2584
+ * @defaultValue `0`
2585
+ */
1584
2586
  initialViewportSize?: number;
2587
+ /**
2588
+ * Scroll to this offset on mount, before the first paint. Takes
2589
+ * priority over `initialScrollIndex` if both are set.
2590
+ */
1585
2591
  initialOffset?: number;
2592
+ /** Scroll so this index is visible on mount, before the first paint. Ignored if `initialOffset` is also set. */
1586
2593
  initialScrollIndex?: number;
2594
+ /**
2595
+ * How `initialScrollIndex` is aligned within the viewport. Only used
2596
+ * together with `initialScrollIndex`.
2597
+ *
2598
+ * @defaultValue `"start"`
2599
+ */
2600
+ initialScrollAlign?: ScrollAlign;
2601
+ /**
2602
+ * When `measureElement` reports a size for an item positioned before
2603
+ * the current viewport, adjust `scrollOffset` by the same delta so
2604
+ * already-visible content doesn't visually jump.
2605
+ *
2606
+ * @defaultValue `true`
2607
+ */
2608
+ adjustScrollOnMeasure?: boolean;
2609
+ /** Backing data array, used together with a string/string-array `itemKey` to derive each item's key. Not required when `itemKey` is a function, or when omitting `itemKey` entirely (falls back to `index` as the key). */
1587
2610
  data?: T[];
1588
- itemKey?: string | string[] | ((index: number, item?: T) => React$1.Key);
2611
+ /**
2612
+ * How to derive each rendered item's React `key`.
2613
+ *
2614
+ * @remarks
2615
+ * Accepts three shapes:
2616
+ * - a **function** `(index, item?) => key` - called with the index and
2617
+ * (if `data` is provided) that index's item; return value used
2618
+ * directly.
2619
+ * - a **string** - a property path into `data[index]`, dot-separated
2620
+ * for nested access (e.g. `"name.firstName"` reads `data[index].name.firstName`).
2621
+ * - a **string array** - the same path, pre-split into segments (e.g.
2622
+ * `["name", "firstName"]`), useful when a real key name itself
2623
+ * contains a literal dot.
2624
+ *
2625
+ * Falls back to `index` if `data` is missing, the resolved value isn't
2626
+ * a `string`/`number`, or `itemKey` is omitted entirely. Using a stable
2627
+ * value derived from your data (rather than the default `index`) is
2628
+ * recommended whenever items can be inserted, removed, or reordered.
2629
+ */
2630
+ itemKey?: string | string[] | ((index: number, item?: T) => string | number);
2631
+ /**
2632
+ * Called whenever the rendered index range actually changes (not on
2633
+ * every render). Useful for analytics, or triggering data-fetching from
2634
+ * outside the hook.
2635
+ */
2636
+ onRangeChange?: (range: VirtualRange) => void;
1589
2637
  }
2638
+ /** Return value of {@link useVirtualList}. */
1590
2639
  export interface UseVirtualListReturn {
2640
+ /** The currently-rendered items (visible range plus overscan), each with a computed `size`/`start`/`end`. Render these, not the full `count`. */
1591
2641
  virtualItems: VirtualItem[];
2642
+ /** Total size of all `count` items plus gaps, along the scrolling axis - set this as the virtualized container's height (or width, if `horizontal`) so the scrollbar is sized correctly. */
1592
2643
  totalSize: number;
2644
+ /** Whether the list is currently scrolling, per `scrollingDelay`. Useful for cheaper rendering (e.g. skipping expensive item content) while actively scrolling. */
1593
2645
  isScrolling: boolean;
2646
+ /** Imperatively scrolls so the given index is visible, per the requested {@link ScrollToIndexOptions.align}. Stable across renders - safe to put in a dependency array. */
1594
2647
  scrollToIndex: (index: number, options?: ScrollToIndexOptions) => void;
2648
+ /** Imperatively scrolls to an exact offset, clamped into range. Stable across renders. */
1595
2649
  scrollToOffset: (offset: number, options?: ScrollToOffsetOptions) => void;
2650
+ /**
2651
+ * Attach to your rendered item's DOM node to enable dynamic measurement:
2652
+ * `<div ref={measureElement} data-index={item.index}>`. Reads the index
2653
+ * from a data-index attribute (rather than taking it as a parameter) so
2654
+ * this stays referentially stable and can be passed directly as `ref`
2655
+ * without an inline wrapper causing detach/reattach on every render.
2656
+ * No-op when estimateSize is a plain number (nothing to refine).
2657
+ */
2658
+ measureElement: React$1.RefCallback<Element>;
1596
2659
  }
2660
+ /**
2661
+ * Renders only the items currently visible in a scrollable container (plus
2662
+ * a small overscan buffer), instead of the full list - keeps DOM node count
2663
+ * roughly constant regardless of how many items there are in total.
2664
+ *
2665
+ * @remarks
2666
+ * Core behavior comes from `count` + `estimateSize` + `getScrollElement`;
2667
+ * everything else in {@link UseVirtualListOptions} is opt-in on top of that:
2668
+ * `horizontal`/`isRtl` for axis and direction, `reverse` for chat-style
2669
+ * bottom-anchored layouts, `gap`/`scrollMargin` for layout details,
2670
+ * `measureElement` (returned) for refining `estimateSize` with real
2671
+ * rendered sizes, `pauseWhenOffscreen`/`enabled` for pausing tracking when
2672
+ * inactive, and `initialOffset`/`initialScrollIndex` for where to start
2673
+ * scrolled to.
2674
+ *
2675
+ * `estimateSize` as a function should be memoized (stable across renders)
2676
+ * - see the note on {@link UseVirtualListOptions.estimateSize} for why.
2677
+ *
2678
+ * @typeParam T - Type of each item in `data`, when using `data` + a
2679
+ * string/string-array `itemKey` to derive keys from your own data shape.
2680
+ *
2681
+ * @param options - See {@link UseVirtualListOptions}.
2682
+ * @returns See {@link UseVirtualListReturn}.
2683
+ *
2684
+ * @example
2685
+ * Fixed-size list:
2686
+ * ```tsx
2687
+ * function List({ items }: { items: string[] }) {
2688
+ * const scrollRef = useRef<HTMLDivElement>(null);
2689
+ * const { virtualItems, totalSize } = useVirtualList({
2690
+ * count: items.length,
2691
+ * estimateSize: 40,
2692
+ * getScrollElement: () => scrollRef.current,
2693
+ * });
2694
+ *
2695
+ * return (
2696
+ * <div ref={scrollRef} style={{ height: 400, overflow: "auto" }}>
2697
+ * <div style={{ height: totalSize, position: "relative" }}>
2698
+ * {virtualItems.map((item) => (
2699
+ * <div
2700
+ * key={item.key}
2701
+ * style={{ position: "absolute", top: item.start, height: item.size }}
2702
+ * >
2703
+ * {items[item.index]}
2704
+ * </div>
2705
+ * ))}
2706
+ * </div>
2707
+ * </div>
2708
+ * );
2709
+ * }
2710
+ * ```
2711
+ *
2712
+ * @example
2713
+ * Variable-size items, refined by real measurements:
2714
+ * ```tsx
2715
+ * const { virtualItems, totalSize, measureElement } = useVirtualList({
2716
+ * count: items.length,
2717
+ * estimateSize: (index) => estimateFor(items[index]), // rough guess
2718
+ * getScrollElement: () => scrollRef.current,
2719
+ * });
2720
+ * // in the row: <div ref={measureElement} data-index={item.index}>...
2721
+ * ```
2722
+ */
1597
2723
  export declare function useVirtualList<T = unknown>(options: UseVirtualListOptions<T>): UseVirtualListReturn;
1598
2724
  export type FilterType = "text" | "number" | "boolean" | "date" | "select" | "multiselect" | "custom";
1599
2725
  export type TextOperator = "contains" | "equals" | "startsWith" | "endsWith" | "notContains";
@@ -2122,15 +3248,6 @@ export interface FuzzyHighlighterProps {
2122
3248
  caseSensitive?: boolean;
2123
3249
  }
2124
3250
  export declare function FuzzyHighlighter({ text, query, className, caseSensitive, }: FuzzyHighlighterProps): React$1.JSX.Element;
2125
- export interface ModalLayoutProps {
2126
- modalId: string;
2127
- children: React$1.ReactNode;
2128
- wrapperClassName?: string;
2129
- wrapperStyle?: React$1.CSSProperties;
2130
- containerClassName?: string;
2131
- containerStyle?: React$1.CSSProperties;
2132
- }
2133
- export declare function ModalLayout({ modalId, children, wrapperClassName, wrapperStyle, containerClassName, containerStyle, }: ModalLayoutProps): import("react").ReactPortal | null;
2134
3251
  export type ExpansionId = string | number;
2135
3252
  export interface UseExpansionReturn<T> {
2136
3253
  expandedIds: ExpansionId[];
@@ -2150,20 +3267,6 @@ export declare function useExpansion<T = unknown>(options?: {
2150
3267
  initialExpandedIds?: ExpansionId[];
2151
3268
  multiple?: boolean;
2152
3269
  }): UseExpansionReturn<T>;
2153
- export interface UseModalStateReturn<TData> {
2154
- isOpen: boolean;
2155
- id: string | null;
2156
- data: TData | undefined;
2157
- }
2158
- export interface UseModalActionsReturn {
2159
- openModal: <T = unknown>(id: string, data?: T) => void;
2160
- closeModal: () => void;
2161
- clearModal: () => void;
2162
- }
2163
- export type UseModalReturn<TData> = UseModalStateReturn<TData> & UseModalActionsReturn;
2164
- export declare function useModalState<TData = unknown>(): UseModalStateReturn<TData>;
2165
- export declare function useModalActions(): UseModalActionsReturn;
2166
- export declare function useModal<TData = unknown>(): UseModalReturn<TData>;
2167
3270
  export type PinId = string | number;
2168
3271
  export interface UsePinReturn<T> {
2169
3272
  pinnedIds: PinId[];