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

@react-stately/tree

Package Overview
Dependencies
Maintainers
1
Versions
783
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@react-stately/tree - npm Package Compare versions

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

dist/main.js.map

177

dist/main.js

@@ -1,50 +0,142 @@

var _babelRuntimeHelpersSlicedToArray = $parcel$interopDefault(require("@babel/runtime/helpers/slicedToArray"));
var {
useControlledState
} = require("@react-stately/utils");
var _temp = require("@react-stately/collections");
var {
useCollection
} = require("@react-stately/collections");
var CollectionBuilder = _temp.CollectionBuilder;
var TreeCollection = _temp.TreeCollection;
var {
SelectionManager,
useMultipleSelectionState
} = require("@react-stately/selection");
var useMemo = require("react").useMemo;
var {
useEffect,
useMemo
} = require("react");
var _temp2 = require("@react-stately/selection");
let $f4c7caecb598119f63e2918a55ec91a9$var$_Symbol$iterator;
$f4c7caecb598119f63e2918a55ec91a9$var$_Symbol$iterator = Symbol.iterator;
var SelectionManager = _temp2.SelectionManager;
var useMultipleSelectionState = _temp2.useMultipleSelectionState;
/*
* Copyright 2020 Adobe. All rights reserved.
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. You may obtain a copy
* of the License at http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
class $f4c7caecb598119f63e2918a55ec91a9$export$TreeCollection {
constructor(nodes, _temp) {
var _last;
var useControlledState = require("@react-stately/utils").useControlledState;
let {
expandedKeys
} = _temp === void 0 ? {} : _temp;
this.keyMap = new Map();
this.iterable = void 0;
this.firstKey = void 0;
this.lastKey = void 0;
this.iterable = nodes;
expandedKeys = expandedKeys || new Set();
function $parcel$interopDefault(a) {
return a && a.__esModule ? a.default : a;
let visit = node => {
this.keyMap.set(node.key, node);
if (node.childNodes && (node.type === 'section' || expandedKeys.has(node.key))) {
for (let child of node.childNodes) {
visit(child);
}
}
};
for (let node of nodes) {
visit(node);
}
let last;
let index = 0;
for (let [key, node] of this.keyMap) {
if (last) {
last.nextKey = key;
node.prevKey = last.key;
} else {
this.firstKey = key;
node.prevKey = undefined;
}
if (node.type === 'item') {
node.index = index++;
}
last = node; // Set nextKey as undefined since this might be the last node
// If it isn't the last node, last.nextKey will properly set at start of new loop
last.nextKey = undefined;
}
this.lastKey = (_last = last) == null ? void 0 : _last.key;
}
*[$f4c7caecb598119f63e2918a55ec91a9$var$_Symbol$iterator]() {
yield* this.iterable;
}
get size() {
return this.keyMap.size;
}
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() {
return this.firstKey;
}
getLastKey() {
return this.lastKey;
}
getItem(key) {
return this.keyMap.get(key);
}
}
/**
* Provides state management for tree-like components. Handles building a collection
* of items from props, item expanded state, and manages multiple selection state.
*/
function useTreeState(props) {
var _useControlledState = useControlledState(props.expandedKeys ? new Set(props.expandedKeys) : undefined, props.defaultExpandedKeys ? new Set(props.defaultExpandedKeys) : new Set(), props.onExpandedChange),
_useControlledState2 = _babelRuntimeHelpersSlicedToArray(_useControlledState, 2),
expandedKeys = _useControlledState2[0],
setExpandedKeys = _useControlledState2[1];
let [expandedKeys, setExpandedKeys] = useControlledState(props.expandedKeys ? new Set(props.expandedKeys) : undefined, props.defaultExpandedKeys ? new Set(props.defaultExpandedKeys) : new Set(), props.onExpandedChange);
let selectionState = useMultipleSelectionState(props);
let disabledKeys = useMemo(() => props.disabledKeys ? new Set(props.disabledKeys) : new Set(), [props.disabledKeys]);
let tree = useCollection(props, nodes => new $f4c7caecb598119f63e2918a55ec91a9$export$TreeCollection(nodes, {
expandedKeys
})); // Reset focused key if that item is deleted from the collection.
var selectionState = useMultipleSelectionState(props);
var disabledKeys = useMemo(function () {
return props.disabledKeys ? new Set(props.disabledKeys) : new Set();
}, [props.disabledKeys]);
var builder = useMemo(function () {
return new CollectionBuilder(props.itemKey);
}, [props.itemKey]);
var tree = useMemo(function () {
var nodes = builder.build(props, function (key) {
return {
isExpanded: expandedKeys.has(key),
isSelected: selectionState.selectedKeys.has(key),
isDisabled: disabledKeys.has(key),
isFocused: key === selectionState.focusedKey
};
});
return new TreeCollection(nodes);
}, [builder, props, expandedKeys, selectionState.selectedKeys, selectionState.focusedKey, disabledKeys]);
useEffect(() => {
if (selectionState.focusedKey != null && !tree.getItem(selectionState.focusedKey)) {
selectionState.setFocusedKey(null);
}
}, [tree, selectionState.focusedKey]);
var onToggle = function onToggle(key) {
setExpandedKeys(function (expandedKeys) {
return $dd94371a435f0424310d5df3b91ea8ae$var$toggleKey(expandedKeys, key);
});
let onToggle = key => {
setExpandedKeys(expandedKeys => $f01b8043d944d5f04fffbeb1df9fd6cb$var$toggleKey(expandedKeys, key));
};

@@ -54,4 +146,4 @@

collection: tree,
expandedKeys: expandedKeys,
disabledKeys: disabledKeys,
expandedKeys,
disabledKeys,
toggleKey: onToggle,

@@ -64,4 +156,4 @@ selectionManager: new SelectionManager(tree, selectionState)

function $dd94371a435f0424310d5df3b91ea8ae$var$toggleKey(set, key) {
var res = new Set(set);
function $f01b8043d944d5f04fffbeb1df9fd6cb$var$toggleKey(set, key) {
let res = new Set(set);

@@ -75,2 +167,3 @@ if (res.has(key)) {

return res;
}
}
//# sourceMappingURL=main.js.map

@@ -1,5 +0,112 @@

import { CollectionBuilder, TreeCollection } from "@react-stately/collections";
import { useMemo } from "react";
import { useControlledState } from "@react-stately/utils";
import { useCollection } from "@react-stately/collections";
import { SelectionManager, useMultipleSelectionState } from "@react-stately/selection";
import { useControlledState } from "@react-stately/utils";
import { useEffect, useMemo } from "react";
let $afa6f708e32ecf7f97d9a58dfd59c$var$_Symbol$iterator;
$afa6f708e32ecf7f97d9a58dfd59c$var$_Symbol$iterator = Symbol.iterator;
/*
* Copyright 2020 Adobe. All rights reserved.
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. You may obtain a copy
* of the License at http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
class $afa6f708e32ecf7f97d9a58dfd59c$export$TreeCollection {
constructor(nodes, _temp) {
var _last;
let {
expandedKeys
} = _temp === void 0 ? {} : _temp;
this.keyMap = new Map();
this.iterable = void 0;
this.firstKey = void 0;
this.lastKey = void 0;
this.iterable = nodes;
expandedKeys = expandedKeys || new Set();
let visit = node => {
this.keyMap.set(node.key, node);
if (node.childNodes && (node.type === 'section' || expandedKeys.has(node.key))) {
for (let child of node.childNodes) {
visit(child);
}
}
};
for (let node of nodes) {
visit(node);
}
let last;
let index = 0;
for (let [key, node] of this.keyMap) {
if (last) {
last.nextKey = key;
node.prevKey = last.key;
} else {
this.firstKey = key;
node.prevKey = undefined;
}
if (node.type === 'item') {
node.index = index++;
}
last = node; // Set nextKey as undefined since this might be the last node
// If it isn't the last node, last.nextKey will properly set at start of new loop
last.nextKey = undefined;
}
this.lastKey = (_last = last) == null ? void 0 : _last.key;
}
*[$afa6f708e32ecf7f97d9a58dfd59c$var$_Symbol$iterator]() {
yield* this.iterable;
}
get size() {
return this.keyMap.size;
}
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() {
return this.firstKey;
}
getLastKey() {
return this.lastKey;
}
getItem(key) {
return this.keyMap.get(key);
}
}
/**
* Provides state management for tree-like components. Handles building a collection
* of items from props, item expanded state, and manages multiple selection state.
*/
export function useTreeState(props) {

@@ -9,15 +116,14 @@ let [expandedKeys, setExpandedKeys] = useControlledState(props.expandedKeys ? new Set(props.expandedKeys) : undefined, props.defaultExpandedKeys ? new Set(props.defaultExpandedKeys) : new Set(), props.onExpandedChange);

let disabledKeys = useMemo(() => props.disabledKeys ? new Set(props.disabledKeys) : new Set(), [props.disabledKeys]);
let builder = useMemo(() => new CollectionBuilder(props.itemKey), [props.itemKey]);
let tree = useMemo(() => {
let nodes = builder.build(props, key => ({
isExpanded: expandedKeys.has(key),
isSelected: selectionState.selectedKeys.has(key),
isDisabled: disabledKeys.has(key),
isFocused: key === selectionState.focusedKey
}));
return new TreeCollection(nodes);
}, [builder, props, expandedKeys, selectionState.selectedKeys, selectionState.focusedKey, disabledKeys]);
let tree = useCollection(props, nodes => new $afa6f708e32ecf7f97d9a58dfd59c$export$TreeCollection(nodes, {
expandedKeys
})); // Reset focused key if that item is deleted from the collection.
useEffect(() => {
if (selectionState.focusedKey != null && !tree.getItem(selectionState.focusedKey)) {
selectionState.setFocusedKey(null);
}
}, [tree, selectionState.focusedKey]);
let onToggle = key => {
setExpandedKeys(expandedKeys => $e56539661b1cae5db2e995db1aab0fcf$var$toggleKey(expandedKeys, key));
setExpandedKeys(expandedKeys => $f51dc3c5c900bd3cdb4a06df11d84697$var$toggleKey(expandedKeys, key));
};

@@ -34,3 +140,3 @@

function $e56539661b1cae5db2e995db1aab0fcf$var$toggleKey(set, key) {
function $f51dc3c5c900bd3cdb4a06df11d84697$var$toggleKey(set, key) {
let res = new Set(set);

@@ -45,2 +151,3 @@

return res;
}
}
//# sourceMappingURL=module.js.map

@@ -1,14 +0,24 @@

import { Collection, Node } from "@react-stately/collections";
import { CollectionBase, Expandable, MultipleSelection } from "@react-types/shared";
import { Collection, CollectionBase, Expandable, MultipleSelection, Node } from "@react-types/shared";
import { Key } from "react";
import { SelectionManager } from "@react-stately/selection";
interface TreeProps<T> extends CollectionBase<T>, Expandable, MultipleSelection {
}
export interface TreeState<T> {
collection: Collection<Node<T>>;
expandedKeys: Set<Key>;
disabledKeys: Set<Key>;
toggleKey: (key: Key) => void;
selectionManager: SelectionManager;
/** A collection of items in the tree. */
readonly collection: Collection<Node<T>>;
/** A set of keys for items that are disabled. */
readonly disabledKeys: Set<Key>;
/** A set of keys for items that are expanded. */
readonly expandedKeys: Set<Key>;
/** Toggles the expanded state for an item by its key. */
toggleKey(key: Key): void;
/** A selection manager to read and update multiple selection state. */
readonly selectionManager: SelectionManager;
}
export function useTreeState<T>(props: CollectionBase<T> & Expandable & MultipleSelection): TreeState<T>;
/**
* Provides state management for tree-like components. Handles building a collection
* of items from props, item expanded state, and manages multiple selection state.
*/
export function useTreeState<T extends object>(props: TreeProps<T>): TreeState<T>;
//# sourceMappingURL=types.d.ts.map
{
"name": "@react-stately/tree",
"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,10 +18,10 @@ "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-stately/collections": "^3.0.0-alpha.1",
"@react-stately/selection": "^3.0.0-alpha.1",
"@react-stately/utils": "^3.0.0-rc.2",
"@react-types/shared": "^3.0.0-rc.2"
"@react-stately/collections": "3.0.0-nightly.672+9853bacb",
"@react-stately/selection": "3.0.0-nightly.672+9853bacb",
"@react-stately/utils": "3.0.0-nightly.672+9853bacb",
"@react-types/shared": "3.0.0-nightly.672+9853bacb"
},

@@ -33,3 +34,3 @@ "peerDependencies": {

},
"gitHead": "207e6ee9076905c96638a7f81a367758872e1410"
"gitHead": "9853bacb98dd37c64faf573e5cb1a6493e2e6f08"
}
# @react-stately/tree
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 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