@pingux/astro 2.39.0 → 2.40.0-alpha.0

package/lib/cjs/components/TreeView/InsertionIndicator.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _dnd = require("@react-aria/dnd");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ = require("../..");
+var _hooks = require("../../hooks");
+var _react2 = require("@emotion/react");
+var InsertionIndicator = function InsertionIndicator(props) {
+  var insertRef = _react["default"].useRef(null);
+  var target = props.target,
+    state = props.dropState;
+  var _useDropIndicator = (0, _dnd.useDropIndicator)({
+      target: target,
+      isPresentationOnly: true
+    }, state, {
+      ref: insertRef
+    }),
+    dropIndicatorProps = _useDropIndicator.dropIndicatorProps,
+    isHidden = _useDropIndicator.isHidden,
+    isDropTarget = _useDropIndicator.isDropTarget;
+  var _useStatusClasses = (0, _hooks.useStatusClasses)('', {
+      isDropTarget: isDropTarget
+    }),
+    classNames = _useStatusClasses.classNames;
+  if (isHidden) {
+    return null;
+  }
+  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+    as: "li"
+  }, dropIndicatorProps, {
+    role: "option",
+    ref: insertRef,
+    className: classNames,
+    variant: "treeView.insertionIndicator"
+  }));
+};
+InsertionIndicator.propTypes = {
+  dropState: _propTypes["default"].shape({}),
+  target: _propTypes["default"].shape({})
+};
+var _default = InsertionIndicator;
+exports["default"] = _default;

package/lib/cjs/components/TreeView/TreeView.js

@@ -14,31 +14,41 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.SectionOrItemRender = void 0;
+exports.insertItemToPosition = exports.insertItem = exports.dropItem = exports["default"] = exports.SectionOrItemRender = void 0;
 exports.useTreeViewLayout = useTreeViewLayout;
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
+var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/keys"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _reactStately = require("react-stately");
+var _reactAria = require("react-aria");
+var _dnd = require("@react-aria/dnd");
+var _focus = require("@react-aria/focus");
 var _i18n = require("@react-aria/i18n");
 var _listbox = require("@react-aria/listbox");
+var _dnd2 = require("@react-stately/dnd");
 var _layout = require("@react-stately/layout");
+var _tree = require("@react-stately/tree");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _TreeViewContext = require("../../context/TreeViewContext");
 var _index = require("../../index");
 var _isIterable = require("../../utils/devUtils/props/isIterable");
 var _TreeViewWrapper = _interopRequireDefault(require("./TreeViewWrapper"));
 var _react2 = require("@emotion/react");
-var _excluded = ["tree", "disabledKeys", "onExpandedChange", "onKeyDown", "pageLength"]; // split out and exported for ease of use across components
+var _excluded = ["value"],
+  _excluded2 = ["value"],
+  _excluded3 = ["tree", "disabledKeys", "onExpandedChange", "onDragStart", "onDrop", "onKeyDown", "pageLength"]; // split out and exported for ease of use across components
 // and to facilitate easier testing (eliminates redundant conditional renders)
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context6, _context7; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context6 = ownKeys(Object(source), !0)).call(_context6, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context7 = ownKeys(Object(source))).call(_context7, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var SectionOrItemRender = function SectionOrItemRender(condition, SectionComponent, ItemComponent) {
   if (condition) {
     return SectionComponent;
@@ -58,23 +68,81 @@ function useTreeViewLayout(state) {
   layout.disabledKeys = state.disabledKeys;
   return layout;
 }
+
+// if you are placing the dragged item into another item.
+var insertItem = function 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);
+  }
+};
+exports.insertItem = insertItem;
+var insertItemToPosition = function 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 = (0, _objectWithoutProperties2["default"])(droppedItem, _excluded);
+  var buildNewItemArray = function buildNewItemArray(arr) {
+    return (0, _map["default"])(arr).call(arr, function (_item) {
+      var _itemValue = _item.value,
+        _itemRest = (0, _objectWithoutProperties2["default"])(_item, _excluded2);
+      return _objectSpread(_objectSpread({}, _itemValue), {}, {
+        _itemRest: _itemRest
+      });
+    });
+  };
+  if (dropPosition === 'before') {
+    tree.insertBefore(targetKey, _objectSpread(_objectSpread(_objectSpread({}, 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)
+    }));
+  }
+};
+
+// split out so that it can be exported and unit tested.
+exports.insertItemToPosition = insertItemToPosition;
+var dropItem = function 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);
+  } else {
+    insertItemToPosition(tree, eventTarget.dropPosition, eventTarget.key, droppedItem);
+  }
+};
+exports.dropItem = dropItem;
 var TreeView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var _tree$items$, _context;
+  var _tree$items$, _context5;
   var tree = props.tree,
     disabledKeys = props.disabledKeys,
     onExpandedChange = props.onExpandedChange,
+    onDragStartProp = props.onDragStart,
+    onDropProp = props.onDrop,
     onKeyDown = props.onKeyDown,
     _props$pageLength = props.pageLength,
     pageLength = _props$pageLength === void 0 ? 5 : _props$pageLength,
-    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
-
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded3);
+  var _useState = (0, _react.useState)(''),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    keyBeingDragged = _useState2[0],
+    setKeyBeingDragged = _useState2[1];
+  var _useState3 = (0, _react.useState)(''),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    targetKey = _useState4[0],
+    setTargetKey = _useState4[1];
   // 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 _useState = (0, _react.useState)(tree === null || tree === void 0 || (_tree$items$ = tree.items[0]) === null || _tree$items$ === void 0 ? void 0 : _tree$items$.key),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    lastFocusedItem = _useState2[0],
-    setLastFocusedItem = _useState2[1];
+  var _useState5 = (0, _react.useState)(tree === null || tree === void 0 || (_tree$items$ = tree.items[0]) === null || _tree$items$ === void 0 ? void 0 : _tree$items$.key),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    lastFocusedItem = _useState6[0],
+    setLastFocusedItem = _useState6[1];
   var level = 0;
   var treeViewRef = (0, _react.useRef)();
   var selectedKeys = tree.selectedKeys;
@@ -83,7 +151,7 @@ var TreeView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   (0, _react.useImperativeHandle)(ref, function () {
     return treeViewRef.current;
   });
-  var state = (0, _reactStately.useTreeState)(_objectSpread({
+  var state = (0, _tree.useTreeState)(_objectSpread({
     onExpandedChange: onExpandedChange,
     disabledKeys: disabledKeys,
     selectedKeys: selectedKeys,
@@ -93,14 +161,14 @@ var TreeView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var flattenNestedData = function flattenNestedData(_data) {
     var returnArray = [];
     var checkItemNesting = function checkItemNesting(item) {
-      var _item$value, _item$items;
-      if (((_item$value = item.value) === null || _item$value === void 0 || (_item$value = _item$value.items) === null || _item$value === void 0 ? void 0 : _item$value.length) > 0) {
+      var _item$value, _item$children;
+      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) {
         return {
           isTopLevel: true,
           hasChildren: true
         };
       }
-      if (((_item$items = item.items) === null || _item$items === void 0 ? void 0 : _item$items.length) > 0) {
+      if (((_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.length) > 0) {
         return {
           isTopLevel: false,
           hasChildren: true
@@ -112,12 +180,32 @@ var TreeView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       };
     };
     var checkSection = function checkSection(isRendered, hasItems) {
-      return isRendered && hasItems;
+      if (isRendered === true && hasItems) {
+        return true;
+      }
+      return false;
+    };
+    var buildParentKeys = function buildParentKeys(parentKey, parentKeys) {
+      var _context;
+      var keyArr = [];
+      if (parentKey) {
+        keyArr.push(parentKey);
+      }
+      return (0, _concat["default"])(_context = []).call(_context, keyArr, parentKeys);
     };
-    var loop = function loop(data) {
+
+    // 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 = {
-          key: data[i].key
+          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,
+          parentKeys: buildParentKeys(parentKey, parentKeys)
         };
         returnArray.push(obj);
         var _checkItemNesting = checkItemNesting(data[i]),
@@ -125,32 +213,64 @@ var TreeView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
           isTopLevel = _checkItemNesting.isTopLevel;
         if (checkSection(state.expandedKeys.has(data[i].key), hasChildren) === true) {
           if (isTopLevel) {
-            var _data$i$value;
-            loop((_data$i$value = data[i].value) === null || _data$i$value === void 0 ? void 0 : _data$i$value.items);
+            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));
           } else {
-            loop(data[i].items);
+            var _context2;
+            /* istanbul ignore next */
+            loop(data[i].children, data[i].key, (0, _concat["default"])(_context2 = [parentKey]).call(_context2, parentKeys && parentKeys));
           }
         }
       }
     };
-    loop(_data);
+    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 _useState3 = (0, _react.useState)([]),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    refArray = _useState4[0],
-    setRefs = _useState4[1];
+  var _useState7 = (0, _react.useState)([]),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    refArray = _useState8[0],
+    setRefs = _useState8[1];
 
   // 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 = (0, _react.useMemo)(function () {
-    return flattenNestedData(props.items);
-  }, [state.expandedKeys]);
+    return flattenNestedData((0, _from["default"])(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 = (0, _find["default"])(flatKeyArray).call(flatKeyArray, function (_item) {
+      return _item.key === keyBeingDragged;
+    });
+    var foundTargetItem = (0, _find["default"])(flatKeyArray).call(flatKeyArray, function (_item) {
+      return _item.key === e.target.key;
+    });
+    if ((0, _includes["default"])(_context3 = (0, _from["default"])(state.disabledKeys)).call(_context3, foundTargetItem.key) && e.target.dropPosition === 'on') {
+      setKeyBeingDragged('');
+      return;
+    }
+
+    // disallow an item from being dropped onto itself, or its children
+    if (e.target.key !== keyBeingDragged && !(0, _includes["default"])(_context4 = foundTargetItem.parentKeys).call(_context4, foundDraggingItem.key)) {
+      dropItem(e.target, tree, state, thisItem);
+      state.selectionManager.state.setFocusedKey(keyBeingDragged);
+      if (onDropProp) {
+        onDropProp(e);
+      }
+    }
+    setKeyBeingDragged('');
+  };
+  var dragItemStart = function dragItemStart(e) {
+    setKeyBeingDragged((0, _from["default"])((0, _keys["default"])(e))[0]);
+    if (onDragStartProp) {
+      onDragStartProp(e, (0, _keys["default"])(e)[0]);
+    }
+  };
   var listBoxOptions = {
     disabledKeys: disabledKeys,
     'aria-label': ariaLabel
@@ -160,6 +280,67 @@ var TreeView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       keyboardDelegate: layout
     }), state, treeViewRef),
     listBoxProps = _useListBox.listBoxProps;
+  var dropState = (0, _dnd2.useDroppableCollectionState)(_objectSpread(_objectSpread({}, props), {}, {
+    onDrop: onItemDrop,
+    onDropEnter: function onDropEnter(e) {
+      return setTargetKey(e.target.key);
+    },
+    onDropExit: function onDropExit() {
+      return setTargetKey('');
+    },
+    collection: state.collection,
+    selectionManager: state.selectionManager
+  }));
+  var _useDroppableCollecti = (0, _dnd.useDroppableCollection)(_objectSpread(_objectSpread({}, props), {}, {
+      onDrop: onItemDrop,
+      disabledKeys: disabledKeys,
+      dropTargetDelegate: new _dnd.ListDropTargetDelegate(flatKeyArray, treeViewRef)
+    }), dropState, treeViewRef),
+    collectionProps = _useDroppableCollecti.collectionProps;
+
+  // Setup drag state for the collection.
+  var dragState = (0, _dnd2.useDraggableCollectionState)(_objectSpread(_objectSpread({}, 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 (0, _map["default"])(flatKeyArray).call(flatKeyArray, function (_item) {
+        return {
+          'text/plain': _item.key
+        };
+      });
+    }
+  }));
+  (0, _react.useEffect)(function () {
+    if ((0, _find["default"])(refArray).call(refArray, function (item) {
+      return item.key === lastFocusedItem;
+    })) {
+      var _thisRef$current;
+      var _refArray$find = (0, _find["default"])(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 ? void 0 : _thisRef$current.focus();
+    }
+  }, [state.selectionManager.focusedKey]);
+  (0, _dnd.useDraggableCollection)(props, dragState, treeViewRef);
+  var _useFocusRing = (0, _focus.useFocusRing)({
+      within: true
+    }),
+    focusWithinProps = _useFocusRing.focusProps,
+    isFocusedWithin = _useFocusRing.isFocused;
+  (0, _react.useEffect)(function () {
+    if (isFocusedWithin) {
+      var _thisRef$current2;
+      var _refArray$find2 = (0, _find["default"])(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 ? void 0 : _thisRef$current2.focus();
+    }
+  }, [isFocusedWithin]);
   return (0, _react2.jsx)(_TreeViewContext.TreeViewContext.Provider, {
     value: {
       state: state,
@@ -167,11 +348,15 @@ var TreeView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       refArray: refArray,
       setRefs: setRefs,
       flatKeyArray: flatKeyArray,
+      dragState: dragState,
+      dropState: dropState,
       pageLength: pageLength,
       setLastFocusedItem: setLastFocusedItem,
-      lastFocusedItem: lastFocusedItem
+      lastFocusedItem: lastFocusedItem,
+      targetKey: targetKey,
+      keyBeingDragged: keyBeingDragged
     }
-  }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, listBoxProps, {
+  }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, (0, _reactAria.mergeProps)(listBoxProps, collectionProps, focusWithinProps), focusWithinProps, {
     ref: treeViewRef,
     "aria-label": ariaLabel,
     role: "treegrid",
@@ -180,10 +365,10 @@ var TreeView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       p: '5px',
       border: 'none !important'
     }
-  }, others), (0, _react2.jsx)(_TreeViewWrapper["default"], null, (0, _map["default"])(_context = (0, _from["default"])(state.collection)).call(_context, function (item, index) {
-    return SectionOrItemRender(item.props.items.length > 0, (0, _react2.jsx)(_index.TreeViewSection, {
+  }, others), (0, _react2.jsx)(_TreeViewWrapper["default"], null, (0, _map["default"])(_context5 = (0, _from["default"])(state.collection)).call(_context5, function (item, index) {
+    return SectionOrItemRender(item.value.children.length > 0, (0, _react2.jsx)(_index.TreeViewSection, {
       item: item,
-      items: item.props.items,
+      items: item.value.children,
       title: item.props.title,
       key: item.props.title,
       onKeyDown: onKeyDown,
@@ -206,6 +391,10 @@ TreeView.propTypes = {
   this is returned from the useTreeData hook in React-Aria */
   tree: _propTypes["default"].shape({
     selectedKeys: _isIterable.isIterableProp,
+    move: _propTypes["default"].func,
+    remove: _propTypes["default"].func,
+    insert: _propTypes["default"].func,
+    getItem: _propTypes["default"].func,
     items: _isIterable.isIterableProp
   }).isRequired,
   /** The currently disabled keys in the collection. */
@@ -218,6 +407,10 @@ TreeView.propTypes = {
   'aria-label': _propTypes["default"].string,
   /** Handler that is called when a key is pressed. */
   onKeyDown: _propTypes["default"].func,
+  /** Callback that is called when the dragging action starts. */
+  onDragStart: _propTypes["default"].func,
+  /** Callback that is called when the dropping action occurs. */
+  onDrop: _propTypes["default"].func,
   /** Number of items to move the focus when page up or page down is pressed */
   pageLength: _propTypes["default"].number
 };

package/lib/cjs/components/TreeView/TreeView.stories.js

@@ -79,7 +79,7 @@ var Default = function Default(args) {
   var tree = (0, _index.useTreeData)({
     initialItems: data,
     getKey: function getKey(item) {
-      return item.title;
+      return item.key;
     },
     getChildren: function getChildren(item) {
       return item.items;
@@ -88,7 +88,8 @@ var Default = function Default(args) {
   return (0, _react2.jsx)(_index.TreeView, (0, _extends2["default"])({}, args, {
     items: tree.items,
     tree: tree,
-    "aria-label": "Example Tree"
+    "aria-label": "Example Tree",
+    disabledKeys: ['Single Item']
   }), function (section) {
     var _section$value;
     return (0, _react2.jsx)(_index.Item, {

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

@@ -10,7 +10,7 @@ var treeRow = {
   cursor: 'pointer',
   height: '31px',
   outline: 'none',
-  '&.is-selected, &.is-hovered': {
+  '&.is-selected, &.is-hovered, &.is-drop-target': {
     backgroundColor: 'active',
     '& span': {
       color: 'white'
@@ -22,9 +22,6 @@ var treeRow = {
       fill: 'white'
     }
   },
-  '&.is-expanded': {
-    marginBottom: 'xs'
-  },
   '& :focus': {
     border: 'none'
   }
@@ -33,7 +30,7 @@ var wrapper = {
   '&.is-focused': {
     boxSizing: 'unset',
     outline: '1px solid',
-    outlineColor: 'focus',
+    outlineColor: 'blue',
     outlineOffset: '2px'
   },
   width: '100%',
@@ -45,8 +42,31 @@ var wrapper = {
   },
   outline: 'none'
 };
+var rowWrapper = {
+  '&.is-focused': {
+    boxSizing: 'unset',
+    outline: '1px solid',
+    outlineColor: 'focus',
+    outlineOffset: '2px'
+  },
+  border: 'none',
+  ':focus': {
+    border: 'none'
+  },
+  '&.is-expanded': {
+    marginBottom: 'xs'
+  },
+  outline: 'none'
+};
+var insertionIndicator = {
+  width: '100%',
+  outline: '1px solid',
+  outlineColor: 'active'
+};
 var _default = {
   treeRow: treeRow,
-  wrapper: wrapper
+  rowWrapper: rowWrapper,
+  wrapper: wrapper,
+  insertionIndicator: insertionIndicator
 };
 exports["default"] = _default;