@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 +1131 -28
- package/dist/index.js +5 -5
- package/dist/performance.d.ts +1131 -5
- package/dist/performance.js +2 -2
- package/dist/performance2.js +854 -393
- package/dist/ui.d.ts +0 -24
- package/dist/ui.js +2 -2
- package/dist/ui2.js +52 -108
- package/package.json +2 -6
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 {
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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[];
|