@pingux/astro 2.238.0 → 2.239.0-alpha.0

package/lib/components/TreeView/InsertionIndicator.js

@@ -5,20 +5,24 @@ import { useDropIndicator } from '@react-aria/dnd';
 import PropTypes from 'prop-types';
 import { Box } from '../..';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var InsertionIndicator = function InsertionIndicator(props) {
-  var insertRef = React.useRef(null);
-  var target = props.target,
-    state = props.dropState;
-  var _useVisuallyHidden = useVisuallyHidden(),
-    visuallyHiddenProps = _useVisuallyHidden.visuallyHiddenProps;
-  var _useDropIndicator = useDropIndicator({
-      target: target
-    }, state, {
-      ref: insertRef
-    }),
-    dropIndicatorProps = _useDropIndicator.dropIndicatorProps,
-    isHidden = _useDropIndicator.isHidden,
-    isDropTarget = _useDropIndicator.isDropTarget;
+const InsertionIndicator = props => {
+  const insertRef = React.useRef(null);
+  const {
+    target,
+    dropState: state
+  } = props;
+  const {
+    visuallyHiddenProps
+  } = useVisuallyHidden();
+  const {
+    dropIndicatorProps,
+    isHidden,
+    isDropTarget
+  } = useDropIndicator({
+    target
+  }, state, {
+    ref: insertRef
+  });
   if (isHidden) {
     return null;
   }

package/lib/components/TreeView/TreeView.js

@@ -1,26 +1,4 @@
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
-import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
-import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
-import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
-import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
-import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["value"],
-  _excluded2 = ["value"],
-  _excluded3 = ["tree", "disabledKeys", "onExpandedChange", "loadingNodes", "onDragStart", "onDrop", "onKeyDown", "pageLength"];
-function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context6, _context7; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context6 = ownKeys(Object(t), !0)).call(_context6, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context7 = ownKeys(Object(t))).call(_context7, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
-import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
-import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
-import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
-import _keysInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/keys";
 import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { mergeProps } from 'react-aria';
 import { ListDropTargetDelegate, useDraggableCollection, useDroppableCollection } from '@react-aria/dnd';
@@ -39,63 +17,74 @@ import TreeViewWrapper from './TreeViewWrapper';
 // split out and exported for ease of use across components
 // and to facilitate easier testing (eliminates redundant conditional renders)
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var SectionOrItemRender = function SectionOrItemRender(condition, SectionComponent, ItemComponent) {
+export const SectionOrItemRender = (condition, SectionComponent, ItemComponent) => {
   if (condition) {
     return SectionComponent;
   }
   return ItemComponent;
 };
 export function useTreeViewLayout(state) {
-  var collator = useCollator({
+  const collator = useCollator({
     usage: 'search',
     sensitivity: 'base'
   });
-  var layout = useMemo(function () {
-    return new ListLayout();
-  }, [collator]);
+  const layout = useMemo(() => new ListLayout(), [collator]);
   layout.collection = state.collection;
   layout.disabledKeys = state.disabledKeys;
   return layout;
 }
 
 // if you are placing the dragged item into another item.
-export var insertItem = function insertItem(tree, eventTarget, keyBeingDragged, state) {
+export const insertItem = (tree, eventTarget, keyBeingDragged, state) => {
   tree.move(keyBeingDragged, eventTarget.key, 0);
   // expand target, if target is closed
   if (!state.expandedKeys.has(eventTarget.key)) {
     state.toggleKey(eventTarget.key);
   }
 };
-export var insertItemToPosition = function insertItemToPosition(tree, dropPosition, targetKey, droppedItem) {
+export const insertItemToPosition = (tree, dropPosition, targetKey, droppedItem) => {
   // remove item
   tree.remove(droppedItem.key);
 
   // removing value and then spreading it into the top level.
   // this prevents nesting ie value.value.value.... etc.
-  var value = droppedItem.value,
-    rest = _objectWithoutProperties(droppedItem, _excluded);
-  var buildNewItemArray = function buildNewItemArray(arr) {
-    return _mapInstanceProperty(arr).call(arr, function (_item) {
-      var _itemValue = _item.value,
-        _itemRest = _objectWithoutProperties(_item, _excluded2);
-      return _objectSpread(_objectSpread({}, _itemValue), {}, {
-        _itemRest: _itemRest
-      });
+  const {
+    value,
+    ...rest
+  } = droppedItem;
+  const buildNewItemArray = arr => {
+    return arr.map(_item => {
+      const {
+        value: _itemValue,
+        ..._itemRest
+      } = _item;
+      return {
+        ..._itemValue,
+        _itemRest
+      };
     });
   };
   if (dropPosition === 'before') {
-    tree.insertBefore(targetKey, _objectSpread(_objectSpread(_objectSpread({}, rest), droppedItem.value), droppedItem.children !== undefined && {
-      items: buildNewItemArray(droppedItem.children)
-    }));
+    tree.insertBefore(targetKey, {
+      ...rest,
+      ...droppedItem.value,
+      ...(droppedItem.children !== undefined && {
+        items: buildNewItemArray(droppedItem.children)
+      })
+    });
   } else if (dropPosition === 'after') {
-    tree.insertAfter(targetKey, _objectSpread(_objectSpread(_objectSpread({}, rest), droppedItem.value), droppedItem.children !== undefined && {
-      items: buildNewItemArray(droppedItem.children)
-    }));
+    tree.insertAfter(targetKey, {
+      ...rest,
+      ...droppedItem.value,
+      ...(droppedItem.children !== undefined && {
+        items: buildNewItemArray(droppedItem.children)
+      })
+    });
   }
 };
 
 // split out so that it can be exported and unit tested.
-export var dropItem = function dropItem(eventTarget, tree, state, droppedItem) {
+export const dropItem = (eventTarget, tree, state, droppedItem) => {
   // if dropPosition = 'on', just insert as first child, and then open, if closed
   if (eventTarget.dropPosition === 'on') {
     insertItem(tree, eventTarget, droppedItem.key, state);
@@ -103,59 +92,50 @@ export var dropItem = function dropItem(eventTarget, tree, state, droppedItem) {
     insertItemToPosition(tree, eventTarget.dropPosition, eventTarget.key, droppedItem);
   }
 };
-var TreeView = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _tree$items$, _context5;
-  var tree = props.tree,
-    disabledKeys = props.disabledKeys,
-    onExpandedChange = props.onExpandedChange,
-    loadingNodes = props.loadingNodes,
-    onDragStartProp = props.onDragStart,
-    onDropProp = props.onDrop,
-    onKeyDown = props.onKeyDown,
-    _props$pageLength = props.pageLength,
-    pageLength = _props$pageLength === void 0 ? 5 : _props$pageLength,
-    others = _objectWithoutProperties(props, _excluded3);
-  var _useState = useState(''),
-    _useState2 = _slicedToArray(_useState, 2),
-    keyBeingDragged = _useState2[0],
-    setKeyBeingDragged = _useState2[1];
-  var _useState3 = useState(''),
-    _useState4 = _slicedToArray(_useState3, 2),
-    targetKey = _useState4[0],
-    setTargetKey = _useState4[1];
+const TreeView = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    tree,
+    disabledKeys,
+    onExpandedChange,
+    loadingNodes,
+    onDragStart: onDragStartProp,
+    onDrop: onDropProp,
+    onKeyDown,
+    pageLength = 5,
+    ...others
+  } = props;
+  const [keyBeingDragged, setKeyBeingDragged] = useState('');
+  const [targetKey, setTargetKey] = useState('');
   // we are tracking the last focused item.
   // this enables us to have focus jump back to the item, after focus
   // leaves the tree, and then returns.
-  var _useState5 = useState(tree === null || tree === void 0 || (_tree$items$ = tree.items[0]) === null || _tree$items$ === void 0 ? void 0 : _tree$items$.key),
-    _useState6 = _slicedToArray(_useState5, 2),
-    lastFocusedItem = _useState6[0],
-    setLastFocusedItem = _useState6[1];
-  var level = 0;
-  var treeViewRef = useRef();
-  var selectedKeys = tree.selectedKeys;
+  const [lastFocusedItem, setLastFocusedItem] = useState(tree?.items[0]?.key);
+  const level = 0;
+  const treeViewRef = useRef();
+  const {
+    selectedKeys
+  } = tree;
 
   /* istanbul ignore next */
-  useImperativeHandle(ref, function () {
-    return treeViewRef.current;
-  });
-  var state = useTreeState(_objectSpread({
-    onExpandedChange: onExpandedChange,
-    disabledKeys: disabledKeys,
-    selectedKeys: selectedKeys,
+  useImperativeHandle(ref, () => treeViewRef.current);
+  const state = useTreeState({
+    onExpandedChange,
+    disabledKeys,
+    selectedKeys,
     selectionMode: 'single',
-    disallowEmptySelection: true
-  }, others));
-  var flattenNestedData = function flattenNestedData(_data) {
-    var returnArray = [];
-    var checkItemNesting = function checkItemNesting(item) {
-      var _item$value, _item$props, _item$children, _item$value2;
-      if (((_item$value = item.value) === null || _item$value === void 0 || (_item$value = _item$value.children) === null || _item$value === void 0 ? void 0 : _item$value.length) > 0 || item !== null && item !== void 0 && (_item$props = item.props) !== null && _item$props !== void 0 && _item$props.hasChildren) {
+    disallowEmptySelection: true,
+    ...others
+  });
+  const flattenNestedData = _data => {
+    const returnArray = [];
+    const checkItemNesting = item => {
+      if (item.value?.children?.length > 0 || item?.props?.hasChildren) {
         return {
           isTopLevel: true,
           hasChildren: true
         };
       }
-      if (((_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.length) > 0 || (_item$value2 = item.value) !== null && _item$value2 !== void 0 && _item$value2.items) {
+      if (item.children?.length > 0 || item.value?.items) {
         return {
           isTopLevel: false,
           hasChildren: true
@@ -166,84 +146,73 @@ var TreeView = /*#__PURE__*/forwardRef(function (props, ref) {
         hasChildren: false
       };
     };
-    var checkSection = function checkSection(isRendered, hasItems) {
+    const checkSection = (isRendered, hasItems) => {
       if (isRendered === true && hasItems) {
         return true;
       }
       return false;
     };
-    var buildParentKeys = function buildParentKeys(parentKey, parentKeys) {
-      var _context;
-      var keyArr = [];
+    const buildParentKeys = (parentKey, parentKeys) => {
+      const keyArr = [];
       if (parentKey) {
         keyArr.push(parentKey);
       }
-      return _concatInstanceProperty(_context = []).call(_context, keyArr, parentKeys);
+      return [].concat(keyArr, parentKeys);
     };
 
     // data is the array being looped through
     // parentKey is the immediate parent of the item
     // parenKeys is the key of all the nesting levels, all the way to the root
-    var _loop = function loop(data, parentKey, parentKeys) {
-      for (var i = 0; i < data.length; i += 1) {
-        var _data$i$value;
-        var obj = {
+    const loop = (data, parentKey, parentKeys) => {
+      for (let i = 0; i < data.length; i += 1) {
+        const obj = {
           key: data[i].key,
           title: data[i].key,
-          items: ((_data$i$value = data[i].value) === null || _data$i$value === void 0 ? void 0 : _data$i$value.children) || data[i].children || null,
-          parentKey: parentKey,
+          items: data[i].value?.children || data[i].children || null,
+          parentKey,
           parentKeys: buildParentKeys(parentKey, parentKeys)
         };
         returnArray.push(obj);
-        var _checkItemNesting = checkItemNesting(data[i]),
-          hasChildren = _checkItemNesting.hasChildren,
-          isTopLevel = _checkItemNesting.isTopLevel;
+        const {
+          hasChildren,
+          isTopLevel
+        } = checkItemNesting(data[i]);
         if (checkSection(state.expandedKeys.has(data[i].key), hasChildren) === true) {
           if (isTopLevel) {
-            var _data$i$value2;
-            _loop((_data$i$value2 = data[i].value) === null || _data$i$value2 === void 0 ? void 0 : _data$i$value2.children, data[i].key, buildParentKeys(parentKey, parentKeys));
+            loop(data[i].value?.children, data[i].key, buildParentKeys(parentKey, parentKeys));
           } else {
-            var _context2;
             /* istanbul ignore next */
-            _loop(data[i].children, data[i].key, _concatInstanceProperty(_context2 = [parentKey]).call(_context2, parentKeys && parentKeys));
+            loop(data[i].children, data[i].key, [parentKey].concat(parentKeys && parentKeys));
           }
         }
       }
     };
-    _loop(_data, undefined, []);
+    loop(_data, undefined, []);
     return returnArray;
   };
 
   // list of value pairs of keys and refs
   // does not need to be in order, because they are values pairs
-  var _useState7 = useState([]),
-    _useState8 = _slicedToArray(_useState7, 2),
-    refArray = _useState8[0],
-    setRefs = _useState8[1];
+  const [refArray, setRefs] = useState([]);
 
   // creates a flattened list of keys for up/down keyboard use
   // this DOES need to be in the same order as the HTML appears in the DOM.
   // we are essentially turning all rendered items into a flat list, for up/down
-  var flatKeyArray = useMemo(function () {
-    return flattenNestedData(_Array$from(state.collection));
+  const flatKeyArray = useMemo(() => {
+    return flattenNestedData(Array.from(state.collection));
   }, [state.expandedKeys, state.collection]);
-  var ariaLabel = props['aria-label'];
-  var onItemDrop = function onItemDrop(e) {
-    var _context3, _context4;
-    var thisItem = tree.getItem(keyBeingDragged);
-    var foundDraggingItem = _findInstanceProperty(flatKeyArray).call(flatKeyArray, function (_item) {
-      return _item.key === keyBeingDragged;
-    });
-    var foundTargetItem = _findInstanceProperty(flatKeyArray).call(flatKeyArray, function (_item) {
-      return _item.key === e.target.key;
-    });
-    if (_includesInstanceProperty(_context3 = _Array$from(state.disabledKeys)).call(_context3, foundTargetItem.key) && e.target.dropPosition === 'on') {
+  const ariaLabel = props['aria-label'];
+  const onItemDrop = e => {
+    const thisItem = tree.getItem(keyBeingDragged);
+    const foundDraggingItem = flatKeyArray.find(_item => _item.key === keyBeingDragged);
+    const foundTargetItem = flatKeyArray.find(_item => _item.key === e.target.key);
+    if (Array.from(state.disabledKeys).includes(foundTargetItem.key) && e.target.dropPosition === 'on') {
       setKeyBeingDragged('');
       return;
     }
 
     // disallow an item from being dropped onto itself, or its children
-    if (e.target.key !== keyBeingDragged && !_includesInstanceProperty(_context4 = foundTargetItem.parentKeys).call(_context4, foundDraggingItem.key)) {
+    if (e.target.key !== keyBeingDragged && !foundTargetItem.parentKeys.includes(foundDraggingItem.key)) {
       dropItem(e.target, tree, state, thisItem);
       state.selectionManager.state.setFocusedKey(keyBeingDragged);
       if (onDropProp) {
@@ -252,96 +221,93 @@ var TreeView = /*#__PURE__*/forwardRef(function (props, ref) {
     }
     setKeyBeingDragged('');
   };
-  var dragItemStart = function dragItemStart(e) {
-    setKeyBeingDragged(_Array$from(_keysInstanceProperty(e))[0]);
+  const dragItemStart = e => {
+    setKeyBeingDragged(Array.from(e.keys)[0]);
     if (onDragStartProp) {
-      onDragStartProp(e, _keysInstanceProperty(e)[0]);
+      onDragStartProp(e, e.keys[0]);
     }
   };
-  var listBoxOptions = {
-    disabledKeys: disabledKeys,
+  const listBoxOptions = {
+    disabledKeys,
     'aria-label': ariaLabel
   };
-  var layout = useTreeViewLayout(state);
-  var _useListBox = useListBox(_objectSpread(_objectSpread({}, listBoxOptions), {}, {
-      keyboardDelegate: layout
-    }), state, treeViewRef),
-    listBoxProps = _useListBox.listBoxProps;
-  var dropState = useDroppableCollectionState(_objectSpread(_objectSpread({}, props), {}, {
+  const layout = useTreeViewLayout(state);
+  const {
+    listBoxProps
+  } = useListBox({
+    ...listBoxOptions,
+    keyboardDelegate: layout
+  }, state, treeViewRef);
+  const dropState = useDroppableCollectionState({
+    ...props,
     onDrop: onItemDrop,
-    onDropEnter: function onDropEnter(e) {
-      return setTargetKey(e.target.key);
-    },
-    onDropExit: function onDropExit() {
-      return setTargetKey('');
-    },
+    onDropEnter: e => setTargetKey(e.target.key),
+    onDropExit: () => setTargetKey(''),
     collection: state.collection,
     selectionManager: state.selectionManager
-  }));
-  var _useDroppableCollecti = useDroppableCollection(_objectSpread(_objectSpread({}, props), {}, {
-      onDrop: onItemDrop,
-      disabledKeys: disabledKeys,
-      dropTargetDelegate: new ListDropTargetDelegate(flatKeyArray, treeViewRef)
-    }), dropState, treeViewRef),
-    collectionProps = _useDroppableCollecti.collectionProps;
+  });
+  const {
+    collectionProps
+  } = useDroppableCollection({
+    ...props,
+    onDrop: onItemDrop,
+    disabledKeys,
+    dropTargetDelegate: new ListDropTargetDelegate(flatKeyArray, treeViewRef)
+  }, dropState, treeViewRef);
 
   // Setup drag state for the collection.
-  var dragState = useDraggableCollectionState(_objectSpread(_objectSpread({}, props), {}, {
+  const dragState = useDraggableCollectionState({
+    ...props,
     onDragStart: dragItemStart,
     // Collection and selection manager come from list state.
     collection: state.collection,
     selectionManager: state.selectionManager,
     // Provide data for each dragged item. This function could
-    getItems: function getItems() {
-      return _mapInstanceProperty(flatKeyArray).call(flatKeyArray, function (_item) {
+    getItems: () => {
+      return flatKeyArray.map(_item => {
         return {
           'text/plain': _item.key
         };
       });
     }
-  }));
-  useEffect(function () {
-    if (_findInstanceProperty(refArray).call(refArray, function (item) {
-      return item.key === lastFocusedItem;
-    })) {
-      var _thisRef$current;
-      var _refArray$find = _findInstanceProperty(refArray).call(refArray, function (item) {
-          return item.key === lastFocusedItem;
-        }),
-        thisRef = _refArray$find.thisRef;
-      thisRef === null || thisRef === void 0 || (_thisRef$current = thisRef.current) === null || _thisRef$current === void 0 || _thisRef$current.focus();
+  });
+  useEffect(() => {
+    if (refArray.find(item => item.key === lastFocusedItem)) {
+      const {
+        thisRef
+      } = refArray.find(item => item.key === lastFocusedItem);
+      thisRef?.current?.focus();
     }
   }, [state.selectionManager.focusedKey]);
   useDraggableCollection(props, dragState, treeViewRef);
-  var _useFocusRing = useFocusRing({
-      within: true
-    }),
-    focusWithinProps = _useFocusRing.focusProps,
-    isFocusedWithin = _useFocusRing.isFocused;
-  useEffect(function () {
+  const {
+    focusProps: focusWithinProps,
+    isFocused: isFocusedWithin
+  } = useFocusRing({
+    within: true
+  });
+  useEffect(() => {
     if (isFocusedWithin) {
-      var _thisRef$current2;
-      var _refArray$find2 = _findInstanceProperty(refArray).call(refArray, function (item) {
-          return item.key === lastFocusedItem;
-        }),
-        thisRef = _refArray$find2.thisRef;
-      thisRef === null || thisRef === void 0 || (_thisRef$current2 = thisRef.current) === null || _thisRef$current2 === void 0 || _thisRef$current2.focus();
+      const {
+        thisRef
+      } = refArray.find(item => item.key === lastFocusedItem);
+      thisRef?.current?.focus();
     }
   }, [isFocusedWithin]);
   return ___EmotionJSX(TreeViewContext.Provider, {
     value: {
-      state: state,
-      tree: tree,
-      refArray: refArray,
-      setRefs: setRefs,
-      flatKeyArray: flatKeyArray,
-      dragState: dragState,
-      dropState: dropState,
-      pageLength: pageLength,
-      setLastFocusedItem: setLastFocusedItem,
-      lastFocusedItem: lastFocusedItem,
-      targetKey: targetKey,
-      keyBeingDragged: keyBeingDragged
+      state,
+      tree,
+      refArray,
+      setRefs,
+      flatKeyArray,
+      dragState,
+      dropState,
+      pageLength,
+      setLastFocusedItem,
+      lastFocusedItem,
+      targetKey,
+      keyBeingDragged
     }
   }, ___EmotionJSX(Box, _extends({}, mergeProps(listBoxProps, collectionProps, focusWithinProps), focusWithinProps, {
     ref: treeViewRef,
@@ -352,28 +318,26 @@ var TreeView = /*#__PURE__*/forwardRef(function (props, ref) {
       p: '5px',
       border: 'none !important'
     }
-  }, others), ___EmotionJSX(TreeViewWrapper, null, _mapInstanceProperty(_context5 = _Array$from(state.collection)).call(_context5, function (item, index) {
-    return SectionOrItemRender(item.props.hasChildren || item.value.children.length > 0, ___EmotionJSX(TreeViewSection, {
-      item: item,
-      items: item.value.children,
-      title: item.props.title,
-      key: item.props.title,
-      hasChildren: item.props.hasChildren,
-      loadingNodes: loadingNodes,
-      onKeyDown: onKeyDown,
-      level: level + 1,
-      setSize: state.collection.size,
-      position: index
-    }), ___EmotionJSX(TreeViewItem, {
-      item: item,
-      title: item.value.value.title,
-      key: item.value.value.title,
-      onKeyDown: onKeyDown,
-      level: level + 1,
-      setSize: state.collection.size,
-      position: index
-    }));
-  }))));
+  }, others), ___EmotionJSX(TreeViewWrapper, null, Array.from(state.collection).map((item, index) => SectionOrItemRender(item.props.hasChildren || item.value.children.length > 0, ___EmotionJSX(TreeViewSection, {
+    item: item,
+    items: item.value.children,
+    title: item.props.title,
+    key: item.props.title,
+    hasChildren: item.props.hasChildren,
+    loadingNodes: loadingNodes,
+    onKeyDown: onKeyDown,
+    level: level + 1,
+    setSize: state.collection.size,
+    position: index
+  }), ___EmotionJSX(TreeViewItem, {
+    item: item,
+    title: item.value.value.title,
+    key: item.value.value.title,
+    onKeyDown: onKeyDown,
+    level: level + 1,
+    setSize: state.collection.size,
+    position: index
+  }))))));
 });
 TreeView.propTypes = {
   /** data object prop that is required to make the tree function

package/lib/components/TreeView/TreeView.styles.js

@@ -1,4 +1,4 @@
-var treeRow = {
+const treeRow = {
   flexGrow: 1,
   cursor: 'pointer',
   height: '31px',
@@ -19,7 +19,7 @@ var treeRow = {
     border: 'none'
   }
 };
-var wrapper = {
+const wrapper = {
   '&.is-focused': {
     boxSizing: 'unset',
     outline: '1px solid',
@@ -35,7 +35,7 @@ var wrapper = {
   },
   outline: 'none'
 };
-var rowWrapper = {
+const rowWrapper = {
   '&.is-focused': {
     boxSizing: 'unset',
     outline: '1px solid',
@@ -51,15 +51,15 @@ var rowWrapper = {
   },
   outline: 'none'
 };
-var insertionIndicator = {
+const insertionIndicator = {
   width: '100%',
   outline: '1px solid',
   outlineColor: 'active',
   mt: '3px'
 };
 export default {
-  treeRow: treeRow,
-  rowWrapper: rowWrapper,
-  wrapper: wrapper,
-  insertionIndicator: insertionIndicator
+  treeRow,
+  rowWrapper,
+  wrapper,
+  insertionIndicator
 };