@pingux/astro 2.39.0 → 2.40.0-alpha.0

package/lib/components/TreeView/TreeView.js

@@ -7,19 +7,29 @@ import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-st
 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 _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 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 = ["tree", "disabledKeys", "onExpandedChange", "onKeyDown", "pageLength"];
+var _excluded = ["value"],
+  _excluded2 = ["value"],
+  _excluded3 = ["tree", "disabledKeys", "onExpandedChange", "onDragStart", "onDrop", "onKeyDown", "pageLength"];
+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 _context6, _context7; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context6 = ownKeys(Object(source), !0)).call(_context6, function (key) { _defineProperty(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; }
 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";
-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) { _defineProperty(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; }
-import React, { forwardRef, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { useTreeState } from 'react-stately';
+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';
+import { useFocusRing } from '@react-aria/focus';
 import { useCollator } from '@react-aria/i18n';
 import { useListBox } from '@react-aria/listbox';
+import { useDraggableCollectionState, useDroppableCollectionState } from '@react-stately/dnd';
 import { ListLayout } from '@react-stately/layout';
+import { useTreeState } from '@react-stately/tree';
 import PropTypes from 'prop-types';
 import { TreeViewContext } from '../../context/TreeViewContext';
 import { Box, TreeViewItem, TreeViewSection } from '../../index';
@@ -47,23 +57,78 @@ export function useTreeViewLayout(state) {
   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) {
+  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) {
+  // 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
+      });
+    });
+  };
+  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.
+export 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);
+  }
+};
 var TreeView = /*#__PURE__*/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 = _objectWithoutProperties(props, _excluded);
-
+    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];
   // 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 = useState(tree === null || tree === void 0 || (_tree$items$ = tree.items[0]) === null || _tree$items$ === void 0 ? void 0 : _tree$items$.key),
-    _useState2 = _slicedToArray(_useState, 2),
-    lastFocusedItem = _useState2[0],
-    setLastFocusedItem = _useState2[1];
+  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;
@@ -82,14 +147,14 @@ var TreeView = /*#__PURE__*/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
@@ -101,12 +166,32 @@ var TreeView = /*#__PURE__*/forwardRef(function (props, ref) {
       };
     };
     var checkSection = function checkSection(isRendered, hasItems) {
-      return isRendered && hasItems;
+      if (isRendered === true && hasItems) {
+        return true;
+      }
+      return false;
     };
-    var loop = function loop(data) {
+    var buildParentKeys = function buildParentKeys(parentKey, parentKeys) {
+      var _context;
+      var keyArr = [];
+      if (parentKey) {
+        keyArr.push(parentKey);
+      }
+      return _concatInstanceProperty(_context = []).call(_context, 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 = {
-          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]),
@@ -114,32 +199,64 @@ var TreeView = /*#__PURE__*/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, _concatInstanceProperty(_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 = useState([]),
-    _useState4 = _slicedToArray(_useState3, 2),
-    refArray = _useState4[0],
-    setRefs = _useState4[1];
+  var _useState7 = useState([]),
+    _useState8 = _slicedToArray(_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 = useMemo(function () {
-    return flattenNestedData(props.items);
-  }, [state.expandedKeys]);
+    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') {
+      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)) {
+      dropItem(e.target, tree, state, thisItem);
+      state.selectionManager.state.setFocusedKey(keyBeingDragged);
+      if (onDropProp) {
+        onDropProp(e);
+      }
+    }
+    setKeyBeingDragged('');
+  };
+  var dragItemStart = function dragItemStart(e) {
+    setKeyBeingDragged(_Array$from(_keysInstanceProperty(e))[0]);
+    if (onDragStartProp) {
+      onDragStartProp(e, _keysInstanceProperty(e)[0]);
+    }
+  };
   var listBoxOptions = {
     disabledKeys: disabledKeys,
     'aria-label': ariaLabel
@@ -149,6 +266,67 @@ var TreeView = /*#__PURE__*/forwardRef(function (props, ref) {
       keyboardDelegate: layout
     }), state, treeViewRef),
     listBoxProps = _useListBox.listBoxProps;
+  var dropState = 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 = useDroppableCollection(_objectSpread(_objectSpread({}, props), {}, {
+      onDrop: onItemDrop,
+      disabledKeys: disabledKeys,
+      dropTargetDelegate: new ListDropTargetDelegate(flatKeyArray, treeViewRef)
+    }), dropState, treeViewRef),
+    collectionProps = _useDroppableCollecti.collectionProps;
+
+  // Setup drag state for the collection.
+  var dragState = 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 _mapInstanceProperty(flatKeyArray).call(flatKeyArray, function (_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 ? void 0 : _thisRef$current.focus();
+    }
+  }, [state.selectionManager.focusedKey]);
+  useDraggableCollection(props, dragState, treeViewRef);
+  var _useFocusRing = useFocusRing({
+      within: true
+    }),
+    focusWithinProps = _useFocusRing.focusProps,
+    isFocusedWithin = _useFocusRing.isFocused;
+  useEffect(function () {
+    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 ? void 0 : _thisRef$current2.focus();
+    }
+  }, [isFocusedWithin]);
   return ___EmotionJSX(TreeViewContext.Provider, {
     value: {
       state: state,
@@ -156,11 +334,15 @@ var TreeView = /*#__PURE__*/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
     }
-  }, ___EmotionJSX(Box, _extends({}, listBoxProps, {
+  }, ___EmotionJSX(Box, _extends({}, mergeProps(listBoxProps, collectionProps, focusWithinProps), focusWithinProps, {
     ref: treeViewRef,
     "aria-label": ariaLabel,
     role: "treegrid",
@@ -169,10 +351,10 @@ var TreeView = /*#__PURE__*/forwardRef(function (props, ref) {
       p: '5px',
       border: 'none !important'
     }
-  }, others), ___EmotionJSX(TreeViewWrapper, null, _mapInstanceProperty(_context = _Array$from(state.collection)).call(_context, function (item, index) {
-    return SectionOrItemRender(item.props.items.length > 0, ___EmotionJSX(TreeViewSection, {
+  }, others), ___EmotionJSX(TreeViewWrapper, null, _mapInstanceProperty(_context5 = _Array$from(state.collection)).call(_context5, function (item, index) {
+    return SectionOrItemRender(item.value.children.length > 0, ___EmotionJSX(TreeViewSection, {
       item: item,
-      items: item.props.items,
+      items: item.value.children,
       title: item.props.title,
       key: item.props.title,
       onKeyDown: onKeyDown,
@@ -195,6 +377,10 @@ TreeView.propTypes = {
   this is returned from the useTreeData hook in React-Aria */
   tree: PropTypes.shape({
     selectedKeys: isIterableProp,
+    move: PropTypes.func,
+    remove: PropTypes.func,
+    insert: PropTypes.func,
+    getItem: PropTypes.func,
     items: isIterableProp
   }).isRequired,
   /** The currently disabled keys in the collection. */
@@ -207,6 +393,10 @@ TreeView.propTypes = {
   'aria-label': PropTypes.string,
   /** Handler that is called when a key is pressed. */
   onKeyDown: PropTypes.func,
+  /** Callback that is called when the dragging action starts. */
+  onDragStart: PropTypes.func,
+  /** Callback that is called when the dropping action occurs. */
+  onDrop: PropTypes.func,
   /** Number of items to move the focus when page up or page down is pressed */
   pageLength: PropTypes.number
 };

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

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

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

@@ -3,7 +3,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'
@@ -15,9 +15,6 @@ var treeRow = {
       fill: 'white'
     }
   },
-  '&.is-expanded': {
-    marginBottom: 'xs'
-  },
   '& :focus': {
     border: 'none'
   }
@@ -26,7 +23,7 @@ var wrapper = {
   '&.is-focused': {
     boxSizing: 'unset',
     outline: '1px solid',
-    outlineColor: 'focus',
+    outlineColor: 'blue',
     outlineOffset: '2px'
   },
   width: '100%',
@@ -38,7 +35,30 @@ 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'
+};
 export default {
   treeRow: treeRow,
-  wrapper: wrapper
+  rowWrapper: rowWrapper,
+  wrapper: wrapper,
+  insertionIndicator: insertionIndicator
 };