Socket
Socket
Sign inDemoInstall

@react-stately/collections

Package Overview
Dependencies
Maintainers
1
Versions
750
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@react-stately/collections - npm Package Compare versions

Comparing version 3.0.0-alpha.1 to 3.0.0-nightly.672

dist/main.js.map

583

dist/types.d.ts

@@ -0,591 +1,24 @@

import { ItemRenderer, ItemProps, SectionProps, Collection, CollectionBase, Node } from "@react-types/shared";
import { Key, ReactElement, ReactNode } from "react";
import { ItemProps, ItemRenderer, CollectionBase, CollectionElement, SectionProps, KeyboardDelegate, AsyncListOptions, AsyncListProps } from "@react-types/shared";
export class Point {
/** The x-coordinate of the point */
x: number;
/** The y-coordinate of the point */
y: number;
constructor(x?: number, y?: number);
/**
* Returns a copy of this point
*/
copy(): Point;
/**
* Checks if two points are equal
*/
equals(point: Point): boolean;
/**
* Returns true if this point is the origin
*/
isOrigin(): boolean;
}
export class Size {
width: number;
height: number;
constructor(width?: number, height?: number);
/**
* Returns a copy of this size
*/
copy(): Size;
/**
* Returns whether this size is equal to another one
*/
equals(other: Size): boolean;
}
export type RectCorner = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
/**
* Represents a rectangle
*/
export class Rect {
/** The x-coordinate of the rectangle */
x: number;
/** The y-coordinate of the rectangle */
y: number;
/** The width of the rectangle */
width: number;
/** The height of the rectangle */
height: number;
constructor(x?: number, y?: number, width?: number, height?: number);
/**
* The maximum x-coordinate in the rectangle
*/
readonly maxX: number;
/**
* The maximum y-coordinate in the rectangle
*/
readonly maxY: number;
/**
* The area of the rectangle
*/
readonly area: number;
/**
* The top left corner of the rectangle
*/
readonly topLeft: Point;
/**
* The top right corner of the rectangle
*/
readonly topRight: Point;
/**
* The bottom left corner of the rectangle
*/
readonly bottomLeft: Point;
/**
* The bottom right corner of the rectangle
*/
readonly bottomRight: Point;
/**
* Returns whether this rectangle intersects another rectangle
* @param rect - The rectangle to check
*/
intersects(rect: Rect): boolean;
/**
* Returns whether this rectangle fully contains another rectangle
* @param rect - The rectangle to check
*/
containsRect(rect: Rect): boolean;
/**
* Returns whether the rectangle contains the given point
* @param point - The point to check
*/
containsPoint(point: Point): boolean;
/**
* Returns the first corner of this rectangle (from top to bottom, left to right)
* that is contained in the given rectangle, or null of the rectangles do not intersect.
* @param rect - The rectangle to check
*/
getCornerInRect(rect: Rect): RectCorner | null;
equals(rect: Rect): boolean;
pointEquals(point: Point | Rect): boolean;
sizeEquals(size: Size | Rect): boolean;
/**
* Returns a copy of this rectangle
*/
copy(): Rect;
}
/**
* Instances of this lightweight class are created by {@link Layout} subclasses
* to represent each view in the {@link CollectionView}. LayoutInfo objects describe
* various properties of a view, such as its position and size, and style information.
* The collection view uses this information when creating actual views to display.
*/
export class LayoutInfo {
/**
* A string representing the view type. Should be `'item'` for item views.
* Other types are used by supplementary views.
*/
type: string;
/**
* A unique key for this view. For item views, it should match the content key.
*/
key: Key;
/**
* The key for a parent layout info, if any.
*/
parentKey: Key | null;
/**
* The rectangle describing the size and position of this view.
*/
rect: Rect;
/**
* Whether the size is estimated. `false` by default.
*/
estimatedSize: boolean;
/**
* The view's opacity. 1 by default.
*/
opacity: number;
/**
* A CSS transform string to apply to the view. `null` by default.
*/
transform: string | null;
/**
* The z-index of the view. 0 by default.
*/
zIndex: number;
/**
* @param type A string representing the view type. Should be `'item'` for item views.
Other types are used by supplementary views.
* @param key The unique key for this view.
* @param rect The rectangle describing the size and position of this view.
*/
constructor(type: string, key: Key, rect: Rect);
/**
* Returns a copy of the LayoutInfo.
*/
copy(): LayoutInfo;
}
/**
* {@link CollectionView} supports arbitrary layout objects, which compute what views are visible, and how
* to position and style them. However, layouts do not create the views themselves directly. Instead,
* layouts produce lightweight {@link LayoutInfo} objects which describe various properties of a view,
* such as its position and size. The {@link CollectionView} is then responsible for creating the actual
* views as needed, based on this layout information.
*
* Every layout extends from the {@link Layout} abstract base class. Layouts must implement a minimum of the
* two methods listed below. All other methods can be optionally overridden to implement custom behavior.
*
* - {@link getVisibleLayoutInfos}
* - {@link getLayoutInfo}
*/
export abstract class Layout<T extends object> {
/** The CollectionView the layout is currently attached to */
collectionManager: CollectionManager<T, any, any>;
/**
* Returns whether the layout should invalidate in response to
* visible rectangle changes. By default, it only invalidates
* when the collection view's size changes. Return true always
* to make the layout invalidate while scrolling (e.g. sticky headers).
*/
shouldInvalidate(rect: Rect): boolean;
/**
* This method allows the layout to perform any pre-computation
* it needs to in order to prepare {@link LayoutInfo}s for retrieval.
* Called by the collection view before {@link getVisibleLayoutInfos}
* or {@link getLayoutInfo} are called.
*/
validate(invalidationContext: InvalidationContext<T, any>): void;
/**
* Returns an array of {@link LayoutInfo} objects which are inside the given rectangle.
* Should be implemented by subclasses.
* @param rect The rectangle that should contain the returned LayoutInfo objects
*/
getVisibleLayoutInfos(rect: Rect): LayoutInfo[];
/**
* Returns a {@link LayoutInfo} for the given type, section, and index.
* Should be implemented by subclasses.
* @param type The type of the LayoutInfo to retrieve
* @param key The key of the LayoutInfo to retrieve
*/
getLayoutInfo(type: string, key: Key): LayoutInfo;
/**
* Returns size of the content. By default, it returns collectionView's size.
*/
getContentSize(): Size;
/**
* Returns a {@link DragTarget} describing a view at the given point to be dragged.
* Return `null` to cancel the drag. The default implementation returns the view at the given point.
* @param point The point at which the drag occurred
*/
/**
* Returns a {@link DragTarget} object describing where a drop should occur. Return `null`
* to reject the drop. The dropped items will be inserted before the resulting target.
* @param point The point at which the drop occurred
*/
/**
* Returns the starting attributes for an animated insertion.
* The view is animated from this {@link LayoutInfo} to the one returned by {@link getLayoutInfo}.
* The default implementation just returns its input.
*
* @param layoutInfo The proposed LayoutInfo for this view
*/
getInitialLayoutInfo(layoutInfo: LayoutInfo): LayoutInfo;
/**
* Returns the ending attributes for an animated removal.
* The view is animated from the {@link LayoutInfo} returned by {@link getLayoutInfo}
* to the one returned by this method. The default implementation returns its input.
*
* @param layoutInfo The original LayoutInfo for this view
*/
getFinalLayoutInfo(layoutInfo: LayoutInfo): LayoutInfo;
}
type LayoutInfoMap = Map<Key, LayoutInfo>;
declare class Transaction<T extends object, V> {
level: number;
actions: (() => void)[];
animated: boolean;
initialMap: LayoutInfoMap;
finalMap: LayoutInfoMap;
initialLayoutInfo: LayoutInfoMap;
finalLayoutInfo: LayoutInfoMap;
removed: Map<Key, ReusableView<T, V>>;
toRemove: Map<Key, ReusableView<T, V>>;
}
export interface CollectionManagerOptions<T extends object, V, W> {
collection?: Collection<T>;
layout?: Layout<T>;
delegate?: CollectionManagerDelegate<T, V, W>;
transitionDuration?: number;
anchorScrollPosition?: boolean;
anchorScrollPositionAtTop?: boolean;
shouldOverscan?: boolean;
}
/**
* The CollectionView class renders a scrollable collection of data using customizable layouts,
* and manages animated updates to the data over time. It supports very large collections by
* only rendering visible views to the DOM, reusing them as you scroll. Collection views can
* present any type of view, including non-item views such as section headers and footers.
* Optionally, the {@link EditableCollectionView} subclass can be used to enable user interaction
* with the collection, including drag and drop, multiple selection, and keyboard interacton.
*
* Collection views get their data from a {@link DataSource} object that you provide. Items are
* grouped into sections by the data source, and the collection view calls its methods to retrieve
* the data. When data changes, the data source emits change events, and the collection view
* updates as appropriate, optionally with an animated transition. There is one built-in data source
* implementation, {@link ArrayDataSource}, which renders content from a 2d array.
*
* Collection views use {@link Layout} objects to compute what views should be visible, and how
* to position and style them. This means that collection views can have their items arranged in
* a stack, a grid, a circle, or any other layout you can think of. The layout can be changed
* dynamically at runtime as well, optionally with an animated transition between the layouts.
*
* Layouts produce information on what views should appear in the collection view, but do not create
* the views themselves directly. It is the responsibility of the {@link CollectionViewDelegate} object
* to create instances of {@link ReusableView} subclasses which render the items into DOM nodes.
* The delegate determines what type of view to display for each item, and creates instances of
* views as needed by the collection view. Those views are then reused by the collection view as
* the user scrolls through the content.
*/
export class CollectionManager<T extends object, V, W> {
/**
* The collection view delegate. The delegate is used by the collection view
* to create and configure views.
*/
delegate: CollectionManagerDelegate<T, V, W>;
/** The duration of animated layout changes, in milliseconds. Default is 500ms. */
transitionDuration: number;
/**
* Whether to enable scroll anchoring. This will attempt to restore the scroll position
* after layout changes outside the viewport. Default is off.
*/
anchorScrollPosition: boolean;
/** Whether to anchor the scroll position when at the top of the content. Default is off. */
anchorScrollPositionAtTop: boolean;
/**
* Whether to overscan the visible area to pre-render items slightly outside and
* improve performance. Default is on.
*/
shouldOverscan: boolean;
constructor(options?: CollectionManagerOptions<T, V, W>);
_setContentSize(size: Size): void;
_setContentOffset(offset: Point): void;
/**
* Get the size of the scrollable content
*/
readonly contentSize: Size;
/**
* Get the collection view's currently visible rectangle
*/
/**
* Set the collection view's currently visible rectangle
*/
visibleRect: Rect;
_setVisibleRect(rect: Rect, forceUpdate?: boolean): void;
collection: Collection<T>;
/**
* Reloads the data from the data source and relayouts the collection view.
* Does not animate any changes. Equivalent to re-assigning the same data source
* to the collection view.
*/
reloadData(): void;
/**
* Returns the item with the given key.
*/
getItem(key: Key): T;
/**
* Get the collection view's layout
*/
/**
* Set the collection view's layout
*/
layout: Layout<T>;
/**
* Sets the collection view's layout, optionally with an animated transition
* from the current layout to the new layout.
* @param layout The layout to switch to
* @param animated Whether to animate the layout change
*/
setLayout(layout: Layout<T>, animated?: boolean): void;
getReusableView(layoutInfo: LayoutInfo): ReusableView<T, V>;
/**
* Returns an array of all currently visible views, including both
* item views and supplementary views.
*/
readonly visibleViews: ReusableView<T, V>[];
/**
* Gets the visible item view for the given key. Returns null if
* the view is not currently visible.
*/
getItemView(key: Key): ReusableView<T, V> | null;
/**
* Gets the visible view for the given type and key. Returns null if
* the view is not currently visible.
*
* @param type The view type. `'item'` for an item view.
* @param key The key of the view to retrieve
*/
getView(type: string, key: Key): ReusableView<T, V> | null;
/**
* Returns an array of visible views matching the given type.
* @param type The view type to find. `'item'` for item views.
*/
getViewsOfType(type: string): ReusableView<T, V>[];
/**
* Reloads the content of the supplementary view matching the given parameters.
* This method does not work with item views. You should emit a "reloadItem" or
* "reloadSection" event from your data source instead.
*
* @param type The view type. `'item'` for an item view.
* @param key The key of the view to reload.
*/
reloadSupplementaryView(type: string, key: Key): void;
/**
* Reloads the content of all visible supplementary views of the given type.
* @param type The view type to reload. `'item'` for an item view.
*/
reloadSupplementaryViewsOfType(type: string): void;
/**
* Returns the key for the given view. Returns null
* if the view is not currently visible.
*/
keyForView(view: ReusableView<T, V>): Key | null;
/**
* Returns the key for the item view currently at the given point.
*/
keyAtPoint(point: Point): Key | null;
/**
* Triggers a layout invalidation, and updates the visible subviews.
*/
relayout(context?: InvalidationContext<T, V>): void;
/**
* Performs a relayout immediately. Prefer {@link relayout} over this method
* where possible, since it coalesces multiple layout passes in the same tick.
*/
relayoutNow(context?: InvalidationContext<T, V>): void;
getVisibleRect(): Rect;
getVisibleLayoutInfos(): Map<Key, LayoutInfo>;
updateSubviews(forceUpdate?: boolean): void;
afterRender(): void;
reuseView(view: ReusableView<T, V>): void;
removeViews(toRemove: Set<ReusableView<T, V>>): void;
updateItemSize(key: Key, size: Size): void;
startScrolling(): void;
endScrolling(): void;
/**
* Scrolls the item with the given key into view, optionally with an animation.
* @param key The key of the item to scroll into view
* @param duration The duration of the scroll animation
*/
scrollToItem(key: Key, duration?: number): Promise<void>;
/**
* Performs an animated scroll to the given offset.
* @param offset - The offset to scroll to
* @param duration The duration of the animation
* @return a promise that resolves when the animation is complete
*/
scrollTo(offset: Point, duration?: number): Promise<void>;
}
/**
* {@link CollectionView} creates instances of the {@link ReusableView} class to
* represent views currently being displayed. ReusableViews manage a DOM node, handle
* applying {@link LayoutInfo} objects to the view, and render content
* as needed. Subclasses must implement the {@link render} method at a
* minimum. Other methods can be overrided to customize behavior.
*/
export class ReusableView<T extends object, V> {
/** The CollectionManager this view is a part of */
collectionManager: CollectionManager<T, V, unknown>;
/** The LayoutInfo this view is currently representing. */
layoutInfo: LayoutInfo | null;
/** The content currently being displayed by this view, set by the collection view. */
content: T;
rendered: V;
viewType: string;
key: Key;
constructor(collectionManager: CollectionManager<T, V, unknown>);
/**
* Prepares the view for reuse. Called just before the view is removed from the DOM.
*/
prepareForReuse(): void;
}
export interface ItemStates {
isSelected?: boolean;
isExpanded?: boolean;
isDisabled?: boolean;
isFocused?: boolean;
}
export interface Node<T> extends ItemStates {
type: 'section' | 'item';
key: Key;
value: T;
level: number;
hasChildNodes: boolean;
childNodes: Iterable<Node<T>>;
rendered: ReactNode;
textValue: string;
'aria-label'?: string;
index?: number;
wrapper?: ((element: ReactElement) => ReactElement) | void;
parentKey?: Key;
prevKey?: Key;
nextKey?: Key;
props?: ItemProps<T>;
}
export interface PartialNode<T> {
type?: 'section' | 'item';
type?: string;
key?: Key;
value?: T;
element?: ReactElement;
wrapper?: ((element: ReactElement) => ReactElement) | void;
wrapper?: (element: ReactElement) => ReactElement;
rendered?: ReactNode;
textValue?: string;
'aria-label'?: string;
index?: number;
renderer?: ItemRenderer<T>;
hasChildNodes?: boolean;
childNodes?: () => IterableIterator<PartialNode<T>>;
props?: ItemProps<T>;
props?: any;
shouldInvalidate?: (context: unknown) => boolean;
}
export interface Collection<T> extends Iterable<T> {
readonly size: number;
getKeys(): Iterable<Key>;
getItem(key: Key): T;
getKeyBefore(key: Key): Key | null;
getKeyAfter(key: Key): Key | null;
getFirstKey(): Key | null;
getLastKey(): Key | null;
}
export interface InvalidationContext<T extends object, V> {
contentChanged?: boolean;
offsetChanged?: boolean;
sizeChanged?: boolean;
animated?: boolean;
beforeLayout?(): void;
afterLayout?(): void;
afterAnimation?(): void;
transaction?: Transaction<T, V>;
}
export interface CollectionManagerDelegate<T extends object, V, W> {
setVisibleViews(views: W[]): void;
setContentSize(size: Size): void;
setVisibleRect(rect: Rect): void;
getType?(content: T): string;
renderView(type: string, content: T): V;
renderWrapper(parent: ReusableView<T, V> | null, reusableView: ReusableView<T, V>, children: ReusableView<T, V>[], renderChildren: (views: ReusableView<T, V>[]) => W[]): W;
beginAnimations(): void;
endAnimations(): void;
getScrollAnchor?(rect: Rect): Key;
}
export class CollectionBuilder<T> {
constructor(itemKey: string);
build(props: CollectionBase<T>, getItemStates?: (key: Key) => ItemStates): Iterable<Node<T>>;
iterateCollection(props: CollectionBase<T>): IterableIterator<Node<T>>;
getKey(item: CollectionElement<T>, value: T, parentKey?: Key): Key;
getCached(item: T): Node<T>;
getFullNode(partialNode: PartialNode<T>, renderer?: ItemRenderer<T>, parentKey?: Key, parentNode?: Node<T>): Node<T>;
}
export let Item: <T>(props: ItemProps<T>) => JSX.Element;
export let Section: <T>(props: SectionProps<T>) => JSX.Element;
export class TreeCollection<T> implements Collection<Node<T>> {
constructor(nodes: Iterable<Node<T>>);
[Symbol.iterator](): IterableIterator<Node<T>>;
readonly size: number;
getKeys(): IterableIterator<Key>;
getKeyBefore(key: Key): Key;
getKeyAfter(key: Key): Key;
getFirstKey(): Key;
getLastKey(): Key;
getItem(key: Key): Node<T>;
}
type ListLayoutOptions<T> = {
/** the height of a row in px. */
rowHeight?: number;
estimatedRowHeight?: number;
headingHeight?: number;
estimatedHeadingHeight?: number;
padding?: number;
indentationForItem?: (collection: Collection<Node<T>>, key: Key) => number;
collator?: Intl.Collator;
};
/**
* The ListLayout class is an implementation of a collection view {@link Layout}
* it is used for creating lists and lists with indented sub-lists
*
* To configure a ListLayout, you can use the properties to define the
* layouts and/or use the method for defining indentation.
* The {@link ListLayoutDelegate} extends the existing collection view
* delegate with an additional method to do this (it uses the same delegate object as
* the collection view itself).
*/
export class ListLayout<T> extends Layout<Node<T>> implements KeyboardDelegate {
collection: Collection<Node<T>>;
/**
* Creates a new ListLayout with options. See the list of properties below for a description
* of the options that can be provided.
*/
constructor(options?: ListLayoutOptions<T>);
getLayoutInfo(type: string, key: Key): LayoutInfo;
getVisibleLayoutInfos(rect: Rect): LayoutInfo[];
validate(): void;
updateItemSize(key: Key, size: Size): boolean;
getContentSize(): Size;
getKeyAbove(key: Key): Key;
getKeyBelow(key: Key): Key;
getKeyPageAbove(key: Key): Key;
getKeyPageBelow(key: Key): Key;
getFirstKey(): Key;
getLastKey(): Key;
getKeyForSearch(search: string, fromKey?: Key): Key;
getInitialLayoutInfo(layoutInfo: LayoutInfo): LayoutInfo;
getFinalLayoutInfo(layoutInfo: LayoutInfo): LayoutInfo;
}
interface CollectionProps<T extends object, V, W> {
renderView(type: string, content: T): V;
renderWrapper(parent: ReusableView<T, V> | null, reusableView: ReusableView<T, V>, children: ReusableView<T, V>[], renderChildren: (views: ReusableView<T, V>[]) => W[]): W;
layout: Layout<T>;
collection: Collection<T>;
getScrollAnchor?(rect: Rect): Key;
}
interface CollectionState<T extends object, V, W> {
visibleViews: W[];
visibleRect: Rect;
setVisibleRect: (rect: Rect) => void;
contentSize: Size;
isAnimating: boolean;
collectionManager: CollectionManager<T, V, W>;
startScrolling: () => void;
endScrolling: () => void;
}
export function useCollectionState<T extends object, V, W>(opts: CollectionProps<T, V, W>): CollectionState<T, V, W>;
export function useAsyncList<T>(options: AsyncListOptions<T>): AsyncListProps<T>;
type CollectionFactory<T, C extends Collection<Node<T>>> = (node: Iterable<Node<T>>, prev: C | null) => C;
export function useCollection<T extends object, C extends Collection<Node<T>> = Collection<Node<T>>>(props: CollectionBase<T>, factory: CollectionFactory<T, C>, context?: unknown, invalidators?: Array<any>): C;
//# sourceMappingURL=types.d.ts.map
{
"name": "@react-stately/collections",
"version": "3.0.0-alpha.1",
"version": "3.0.0-nightly.672+9853bacb",
"description": "Spectrum UI components in React",

@@ -11,3 +11,4 @@ "license": "Apache-2.0",

"files": [
"dist"
"dist",
"src"
],

@@ -17,7 +18,9 @@ "sideEffects": false,

"type": "git",
"url": "https://github.com/adobe-private/react-spectrum-v3"
"url": "https://github.com/adobe/react-spectrum"
},
"dependencies": {
"@babel/runtime": "^7.6.2",
"@react-types/shared": "^3.0.0-rc.2",
"@react-types/shared": "3.0.0-nightly.672+9853bacb"
},
"peerDependencies": {
"react": "^16.8.0"

@@ -28,3 +31,3 @@ },

},
"gitHead": "207e6ee9076905c96638a7f81a367758872e1410"
"gitHead": "9853bacb98dd37c64faf573e5cb1a6493e2e6f08"
}
# @react-stately/collections
This package is part of [react-spectrum](https://github.com/adobe-private/react-spectrum-v3). See the repo for more details.
This package is part of [react-spectrum](https://github.com/adobe/react-spectrum). See the repo for more details.

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc