Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@react-stately/grid

Package Overview
Dependencies
Maintainers
2
Versions
757
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@react-stately/grid - npm Package Compare versions

Comparing version 3.0.0-nightly.2904 to 3.0.0-nightly-07431f4b1-241030

dist/GridCollection.main.js
dist/GridCollection.main.js.map
dist/GridCollection.mjs
dist/GridCollection.module.js
dist/GridCollection.module.js.map
dist/import.mjs
dist/useGridState.main.js
dist/useGridState.main.js.map
dist/useGridState.mjs
dist/useGridState.module.js
dist/useGridState.module.js.map

214

dist/main.js

@@ -1,69 +0,11 @@

var _babelRuntimeHelpersExtends = $parcel$interopDefault(require("@babel/runtime/helpers/extends"));
var $38009b28e45912ea$exports = require("./useGridState.main.js");
var $8bb6a9101b052a66$exports = require("./GridCollection.main.js");
var {
SelectionManager,
useMultipleSelectionState
} = require("@react-stately/selection");
var {
useEffect,
useMemo
} = require("react");
function $parcel$interopDefault(a) {
return a && a.__esModule ? a.default : a;
function $parcel$export(e, n, v, s) {
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}
/**
* Provides state management for a grid component. Handles row selection and focusing a grid cell's focusable child if applicable.
*/
function useGridState(props) {
let {
collection,
focusMode
} = props;
let selectionState = useMultipleSelectionState(props);
let disabledKeys = useMemo(() => props.disabledKeys ? new Set(props.disabledKeys) : new Set(), [props.disabledKeys]);
let setFocusedKey = selectionState.setFocusedKey;
selectionState.setFocusedKey = (key, child) => {
// If focusMode is cell and an item is focused, focus a child cell instead.
if (focusMode === 'cell' && key != null) {
let item = collection.getItem(key);
if ((item == null ? void 0 : item.type) === 'item') {
let children = [...item.childNodes];
if (child === 'last') {
var _children;
key = (_children = children[children.length - 1]) == null ? void 0 : _children.key;
} else {
var _children$;
key = (_children$ = children[0]) == null ? void 0 : _children$.key;
}
}
}
setFocusedKey(key, child);
}; // Reset focused key if that item is deleted from the collection.
useEffect(() => {
if (selectionState.focusedKey != null && !collection.getItem(selectionState.focusedKey)) {
selectionState.setFocusedKey(null);
}
}, [collection, selectionState.focusedKey]);
return {
collection,
disabledKeys,
selectionManager: new SelectionManager(collection, selectionState)
};
}
exports.useGridState = useGridState;
let $b9f358a1a5a44d4c3a26859$var$_Symbol$iterator;
$b9f358a1a5a44d4c3a26859$var$_Symbol$iterator = Symbol.iterator;
$parcel$export(module.exports, "useGridState", () => $38009b28e45912ea$exports.useGridState);
$parcel$export(module.exports, "GridCollection", () => $8bb6a9101b052a66$exports.GridCollection);
/*

@@ -79,148 +21,6 @@ * Copyright 2020 Adobe. All rights reserved.

* governing permissions and limitations under the License.
*/
class GridCollection {
constructor(opts) {
this.keyMap = new Map();
this.columnCount = void 0;
this.rows = void 0;
this.keyMap = new Map();
this.columnCount = opts == null ? void 0 : opts.columnCount;
this.rows = [];
*/
let visit = node => {
// If the node is the same object as the previous node for the same key,
// we can skip this node and its children. We always visit columns though,
// because we depend on order to build the columns array.
let prevNode = this.keyMap.get(node.key);
if (opts.visitNode) {
node = opts.visitNode(node);
}
this.keyMap.set(node.key, node);
let childKeys = new Set();
let last;
for (let child of node.childNodes) {
if (child.type === 'cell' && child.parentKey == null) {
// if child is a cell parent key isn't already established by the collection, match child node to parent row
child.parentKey = node.key;
}
childKeys.add(child.key);
if (last) {
last.nextKey = child.key;
child.prevKey = last.key;
} else {
child.prevKey = null;
}
visit(child);
last = child;
}
if (last) {
last.nextKey = null;
} // Remove deleted nodes and their children from the key map
if (prevNode) {
for (let child of prevNode.childNodes) {
if (!childKeys.has(child.key)) {
remove(child);
}
}
}
};
let remove = node => {
this.keyMap.delete(node.key);
for (let child of node.childNodes) {
if (this.keyMap.get(child.key) === child) {
remove(child);
}
}
};
let last;
opts.items.forEach((node, i) => {
let rowNode = _babelRuntimeHelpersExtends({
level: 0,
key: 'row-' + i,
type: 'row',
value: undefined,
hasChildNodes: true,
childNodes: [...node.childNodes],
rendered: undefined,
textValue: undefined
}, node, {
index: i
});
if (last) {
last.nextKey = rowNode.key;
rowNode.prevKey = last.key;
} else {
rowNode.prevKey = null;
}
this.rows.push(rowNode);
visit(rowNode);
last = rowNode;
});
if (last) {
last.nextKey = null;
}
}
*[$b9f358a1a5a44d4c3a26859$var$_Symbol$iterator]() {
yield* [...this.rows];
}
get size() {
return [...this.rows].length;
}
getKeys() {
return this.keyMap.keys();
}
getKeyBefore(key) {
let node = this.keyMap.get(key);
return node ? node.prevKey : null;
}
getKeyAfter(key) {
let node = this.keyMap.get(key);
return node ? node.nextKey : null;
}
getFirstKey() {
var _;
return (_ = [...this.rows][0]) == null ? void 0 : _.key;
}
getLastKey() {
var _rows;
let rows = [...this.rows];
return (_rows = rows[rows.length - 1]) == null ? void 0 : _rows.key;
}
getItem(key) {
return this.keyMap.get(key);
}
at(idx) {
const keys = [...this.getKeys()];
return this.getItem(keys[idx]);
}
}
exports.GridCollection = GridCollection;
//# sourceMappingURL=main.js.map

198

dist/module.js

@@ -1,55 +0,4 @@

import _babelRuntimeHelpersEsmExtends from "@babel/runtime/helpers/esm/extends";
import { SelectionManager, useMultipleSelectionState } from "@react-stately/selection";
import { useEffect, useMemo } from "react";
import {useGridState as $62967d126f3aa823$export$4007ac09ff9c68ed} from "./useGridState.module.js";
import {GridCollection as $16805b1b18093c5f$export$de3fdf6493c353d} from "./GridCollection.module.js";
/**
* Provides state management for a grid component. Handles row selection and focusing a grid cell's focusable child if applicable.
*/
export function useGridState(props) {
let {
collection,
focusMode
} = props;
let selectionState = useMultipleSelectionState(props);
let disabledKeys = useMemo(() => props.disabledKeys ? new Set(props.disabledKeys) : new Set(), [props.disabledKeys]);
let setFocusedKey = selectionState.setFocusedKey;
selectionState.setFocusedKey = (key, child) => {
// If focusMode is cell and an item is focused, focus a child cell instead.
if (focusMode === 'cell' && key != null) {
let item = collection.getItem(key);
if ((item == null ? void 0 : item.type) === 'item') {
let children = [...item.childNodes];
if (child === 'last') {
var _children;
key = (_children = children[children.length - 1]) == null ? void 0 : _children.key;
} else {
var _children$;
key = (_children$ = children[0]) == null ? void 0 : _children$.key;
}
}
}
setFocusedKey(key, child);
}; // Reset focused key if that item is deleted from the collection.
useEffect(() => {
if (selectionState.focusedKey != null && !collection.getItem(selectionState.focusedKey)) {
selectionState.setFocusedKey(null);
}
}, [collection, selectionState.focusedKey]);
return {
collection,
disabledKeys,
selectionManager: new SelectionManager(collection, selectionState)
};
}
let $a681bbd8853a1e20321bd2b414f7894f$var$_Symbol$iterator;
$a681bbd8853a1e20321bd2b414f7894f$var$_Symbol$iterator = Symbol.iterator;
/*

@@ -65,146 +14,7 @@ * Copyright 2020 Adobe. All rights reserved.

* governing permissions and limitations under the License.
*/
export class GridCollection {
constructor(opts) {
this.keyMap = new Map();
this.columnCount = void 0;
this.rows = void 0;
this.keyMap = new Map();
this.columnCount = opts == null ? void 0 : opts.columnCount;
this.rows = [];
*/
let visit = node => {
// If the node is the same object as the previous node for the same key,
// we can skip this node and its children. We always visit columns though,
// because we depend on order to build the columns array.
let prevNode = this.keyMap.get(node.key);
if (opts.visitNode) {
node = opts.visitNode(node);
}
this.keyMap.set(node.key, node);
let childKeys = new Set();
let last;
for (let child of node.childNodes) {
if (child.type === 'cell' && child.parentKey == null) {
// if child is a cell parent key isn't already established by the collection, match child node to parent row
child.parentKey = node.key;
}
childKeys.add(child.key);
if (last) {
last.nextKey = child.key;
child.prevKey = last.key;
} else {
child.prevKey = null;
}
visit(child);
last = child;
}
if (last) {
last.nextKey = null;
} // Remove deleted nodes and their children from the key map
if (prevNode) {
for (let child of prevNode.childNodes) {
if (!childKeys.has(child.key)) {
remove(child);
}
}
}
};
let remove = node => {
this.keyMap.delete(node.key);
for (let child of node.childNodes) {
if (this.keyMap.get(child.key) === child) {
remove(child);
}
}
};
let last;
opts.items.forEach((node, i) => {
let rowNode = _babelRuntimeHelpersEsmExtends({
level: 0,
key: 'row-' + i,
type: 'row',
value: undefined,
hasChildNodes: true,
childNodes: [...node.childNodes],
rendered: undefined,
textValue: undefined
}, node, {
index: i
});
if (last) {
last.nextKey = rowNode.key;
rowNode.prevKey = last.key;
} else {
rowNode.prevKey = null;
}
this.rows.push(rowNode);
visit(rowNode);
last = rowNode;
});
if (last) {
last.nextKey = null;
}
}
*[$a681bbd8853a1e20321bd2b414f7894f$var$_Symbol$iterator]() {
yield* [...this.rows];
}
get size() {
return [...this.rows].length;
}
getKeys() {
return this.keyMap.keys();
}
getKeyBefore(key) {
let node = this.keyMap.get(key);
return node ? node.prevKey : null;
}
getKeyAfter(key) {
let node = this.keyMap.get(key);
return node ? node.nextKey : null;
}
getFirstKey() {
var _;
return (_ = [...this.rows][0]) == null ? void 0 : _.key;
}
getLastKey() {
var _rows;
let rows = [...this.rows];
return (_rows = rows[rows.length - 1]) == null ? void 0 : _rows.key;
}
getItem(key) {
return this.keyMap.get(key);
}
at(idx) {
const keys = [...this.getKeys()];
return this.getItem(keys[idx]);
}
}
export {$62967d126f3aa823$export$4007ac09ff9c68ed as useGridState, $16805b1b18093c5f$export$de3fdf6493c353d as GridCollection};
//# sourceMappingURL=module.js.map

22

dist/types.d.ts
import { GridCollection as _GridCollection1, GridNode, GridRow } from "@react-types/grid";
import { Key } from "react";
import { MultipleSelection } from "@react-types/shared";
import { SelectionManager } from "@react-stately/selection";
import { Key } from "@react-types/shared";
import { MultipleSelectionState, MultipleSelectionStateProps, SelectionManager } from "@react-stately/selection";
export interface GridState<T, C extends _GridCollection1<T>> {

@@ -11,7 +10,11 @@ collection: C;

selectionManager: SelectionManager;
/** Whether keyboard navigation is disabled, such as when the arrow keys should be handled by a component within a cell. */
isKeyboardNavigationDisabled: boolean;
}
interface GridStateOptions<T, C extends _GridCollection1<T>> extends MultipleSelection {
export interface GridStateOptions<T, C extends _GridCollection1<T>> extends MultipleSelectionStateProps {
collection: C;
disabledKeys?: Iterable<Key>;
focusMode?: 'row' | 'cell';
/** @private - do not use unless you know what you're doing. */
UNSAFE_selectionState?: MultipleSelectionState;
}

@@ -34,11 +37,12 @@ /**

get size(): number;
getKeys(): IterableIterator<string | number>;
getKeyBefore(key: Key): string | number;
getKeyAfter(key: Key): string | number;
getFirstKey(): string | number;
getLastKey(): string | number;
getKeys(): IterableIterator<Key>;
getKeyBefore(key: Key): Key;
getKeyAfter(key: Key): Key;
getFirstKey(): Key;
getLastKey(): Key;
getItem(key: Key): GridNode<T>;
at(idx: number): GridNode<T>;
getChildren(key: Key): Iterable<GridNode<T>>;
}
//# sourceMappingURL=types.d.ts.map

22

package.json
{
"name": "@react-stately/grid",
"version": "3.0.0-nightly.2904+e14523fed",
"version": "3.0.0-nightly-07431f4b1-241030",
"description": "Spectrum UI components in React",

@@ -8,2 +8,7 @@ "license": "Apache-2.0",

"module": "dist/module.js",
"exports": {
"types": "./dist/types.d.ts",
"import": "./dist/import.mjs",
"require": "./dist/main.js"
},
"types": "dist/types.d.ts",

@@ -21,9 +26,10 @@ "source": "src/index.ts",

"dependencies": {
"@babel/runtime": "^7.6.2",
"@react-stately/selection": "3.0.0-nightly.1219+e14523fed",
"@react-types/grid": "3.0.0-nightly.2904+e14523fed",
"@react-types/shared": "3.0.0-nightly.1219+e14523fed"
"@react-stately/collections": "^3.0.0-nightly-07431f4b1-241030",
"@react-stately/selection": "^3.0.0-nightly-07431f4b1-241030",
"@react-types/grid": "^3.0.0-nightly-07431f4b1-241030",
"@react-types/shared": "^3.0.0-nightly-07431f4b1-241030",
"@swc/helpers": "^0.5.0"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0-rc.1"
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
},

@@ -33,3 +39,3 @@ "publishConfig": {

},
"gitHead": "e14523fedd93ac1a4ede355aed70988af572ae74"
}
"stableVersion": "3.9.3"
}

18

src/GridCollection.ts

@@ -12,6 +12,6 @@ /*

*/
import {GridNode, GridRow, GridCollection as IGridCollection} from '@react-types/grid';
import {Key} from 'react';
import {Key} from '@react-types/shared';
interface GridCollectionOptions<T> {

@@ -98,4 +98,3 @@ columnCount: number,

textValue: undefined,
...node,
index: i
...node
} as GridNode<T>;

@@ -135,3 +134,3 @@

let node = this.keyMap.get(key);
return node ? node.prevKey : null;
return node ? node.prevKey ?? null : null;
}

@@ -141,3 +140,3 @@

let node = this.keyMap.get(key);
return node ? node.nextKey : null;
return node ? node.nextKey ?? null : null;
}

@@ -155,3 +154,3 @@

getItem(key: Key) {
return this.keyMap.get(key);
return this.keyMap.get(key) ?? null;
}

@@ -163,2 +162,7 @@

}
getChildren(key: Key): Iterable<GridNode<T>> {
let node = this.keyMap.get(key);
return node?.childNodes || [];
}
}

6

src/index.ts

@@ -13,3 +13,5 @@ /*

export * from './useGridState';
export * from './GridCollection';
export {useGridState} from './useGridState';
export {GridCollection} from './GridCollection';
export type {GridStateOptions, GridState} from './useGridState';

85

src/useGridState.ts

@@ -1,5 +0,6 @@

import {GridCollection} from '@react-types/grid';
import {Key, useEffect, useMemo} from 'react';
import {MultipleSelection} from '@react-types/shared';
import {SelectionManager, useMultipleSelectionState} from '@react-stately/selection';
import {getChildNodes, getFirstItem, getLastItem} from '@react-stately/collections';
import {GridCollection, GridNode} from '@react-types/grid';
import {Key} from '@react-types/shared';
import {MultipleSelectionState, MultipleSelectionStateProps, SelectionManager, useMultipleSelectionState} from '@react-stately/selection';
import {useEffect, useMemo, useRef} from 'react';

@@ -11,9 +12,13 @@ export interface GridState<T, C extends GridCollection<T>> {

/** A selection manager to read and update row selection state. */
selectionManager: SelectionManager
selectionManager: SelectionManager,
/** Whether keyboard navigation is disabled, such as when the arrow keys should be handled by a component within a cell. */
isKeyboardNavigationDisabled: boolean
}
interface GridStateOptions<T, C extends GridCollection<T>> extends MultipleSelection {
export interface GridStateOptions<T, C extends GridCollection<T>> extends MultipleSelectionStateProps {
collection: C,
disabledKeys?: Iterable<Key>,
focusMode?: 'row' | 'cell'
focusMode?: 'row' | 'cell',
/** @private - do not use unless you know what you're doing. */
UNSAFE_selectionState?: MultipleSelectionState
}

@@ -26,3 +31,4 @@

let {collection, focusMode} = props;
let selectionState = useMultipleSelectionState(props);
// eslint-disable-next-line react-hooks/rules-of-hooks
let selectionState = props.UNSAFE_selectionState || useMultipleSelectionState(props);
let disabledKeys = useMemo(() =>

@@ -38,7 +44,7 @@ props.disabledKeys ? new Set(props.disabledKeys) : new Set<Key>()

if (item?.type === 'item') {
let children = [...item.childNodes];
let children = getChildNodes(item, collection);
if (child === 'last') {
key = children[children.length - 1]?.key;
key = getLastItem(children)?.key;
} else {
key = children[0]?.key;
key = getFirstItem(children)?.key;
}

@@ -51,8 +57,58 @@ }

let selectionManager = useMemo(() =>
new SelectionManager(collection, selectionState)
, [collection, selectionState]
);
// Reset focused key if that item is deleted from the collection.
const cachedCollection = useRef(null);
useEffect(() => {
if (selectionState.focusedKey != null && !collection.getItem(selectionState.focusedKey)) {
selectionState.setFocusedKey(null);
const node = cachedCollection.current.getItem(selectionState.focusedKey);
const parentNode =
node.parentKey != null && (node.type === 'cell' || node.type === 'rowheader' || node.type === 'column') ?
cachedCollection.current.getItem(node.parentKey) :
node;
const cachedRows = cachedCollection.current.rows;
const rows = collection.rows;
const diff = cachedRows.length - rows.length;
let index = Math.min(
(
diff > 1 ?
Math.max(parentNode.index - diff + 1, 0) :
parentNode.index
),
rows.length - 1);
let newRow:GridNode<T>;
while (index >= 0) {
if (!selectionManager.isDisabled(rows[index].key) && rows[index].type !== 'headerrow') {
newRow = rows[index];
break;
}
// Find next, not disabled row.
if (index < rows.length - 1) {
index++;
// Otherwise, find previous, not disabled row.
} else {
if (index > parentNode.index) {
index = parentNode.index;
}
index--;
}
}
if (newRow) {
const childNodes = newRow.hasChildNodes ? [...getChildNodes(newRow, collection)] : [];
const keyToFocus =
newRow.hasChildNodes &&
parentNode !== node &&
node.index < childNodes.length ?
childNodes[node.index].key :
newRow.key;
selectionState.setFocusedKey(keyToFocus);
} else {
selectionState.setFocusedKey(null);
}
}
}, [collection, selectionState.focusedKey]);
cachedCollection.current = collection;
}, [collection, selectionManager, selectionState, selectionState.focusedKey]);

@@ -62,4 +118,5 @@ return {

disabledKeys,
selectionManager: new SelectionManager(collection, selectionState)
isKeyboardNavigationDisabled: false,
selectionManager
};
}
LICENSE
dist/main.js.map

Sorry, the diff of this file is not supported yet

dist/module.js.map

Sorry, the diff of this file is not supported yet

dist/types.d.ts.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc