vim-web 0.4.1-dev.0 → 0.4.1-dev.1

package/dist/vim-web.iife.js

@@ -46854,7 +46854,7 @@ void main() {
       return this._onDispose;
     }
     getBoundingBox() {
-      const box = this.getFullSet().getBoundingBox();
+      const box = this.scene.getBoundingBox();
       return Promise.resolve(box);
     }
     /**
@@ -52585,15 +52585,18 @@ void main() {
       this._id = -1;
     }
     onPointerDown(event) {
-      if (this._id >= 0) {
-        this._canvas.releasePointerCapture(this._id);
-      }
+      this.release();
       this._canvas.setPointerCapture(event.pointerId);
       this._id = event.pointerId;
     }
     onPointerUp(event) {
-      this._canvas.releasePointerCapture(this._id);
-      this._id = -1;
+      this.release();
+    }
+    release() {
+      if (this._id >= 0) {
+        this._canvas.releasePointerCapture(this._id);
+        this._id = -1;
+      }
     }
   }
   class DoubleClickHandler {
@@ -68578,8 +68581,8 @@ Averrage Date/Second ${avgDataRatePS} kb
     InteractionMode2["ClickItemToExpand"] = "click-item-to-expand";
     InteractionMode2["ClickArrowToExpand"] = "click-arrow-to-expand";
   })(InteractionMode || (InteractionMode = {}));
-  var __assign$d = function() {
-    __assign$d = Object.assign || function(t) {
+  var __assign$c = function() {
+    __assign$c = Object.assign || function(t) {
       for (var s, i2 = 1, n = arguments.length; i2 < n; i2++) {
         s = arguments[i2];
         for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
@@ -68587,13 +68590,13 @@ Averrage Date/Second ${avgDataRatePS} kb
       }
       return t;
     };
-    return __assign$d.apply(this, arguments);
+    return __assign$c.apply(this, arguments);
   };
   var mergeInteractionManagers = function(main, fallback) {
     return {
       mode: main.mode,
       createInteractiveElementProps: function(item, treeId, actions, renderFlags) {
-        return __assign$d(__assign$d({}, fallback.createInteractiveElementProps(item, treeId, actions, renderFlags)), main.createInteractiveElementProps(item, treeId, actions, renderFlags));
+        return __assign$c(__assign$c({}, fallback.createInteractiveElementProps(item, treeId, actions, renderFlags)), main.createInteractiveElementProps(item, treeId, actions, renderFlags));
       }
     };
   };
@@ -68611,10 +68614,11 @@ Averrage Date/Second ${avgDataRatePS} kb
         var _this = this;
         return {
           onClick: function(e) {
+            var isSpacebarEvent = e.detail === 0;
             actions.focusItem();
-            if (e.shiftKey) {
+            if (e.shiftKey && !isSpacebarEvent) {
               actions.selectUpTo(!isControlKey$1(e));
-            } else if (isControlKey$1(e)) {
+            } else if (isControlKey$1(e) && !isSpacebarEvent) {
               if (renderFlags.isSelected) {
                 actions.unselectItem();
               } else {
@@ -68662,10 +68666,11 @@ Averrage Date/Second ${avgDataRatePS} kb
         var _this = this;
         return {
           onClick: function(e) {
+            var isSpacebarEvent = e.detail === 0;
             actions.focusItem();
-            if (e.shiftKey) {
+            if (e.shiftKey && !isSpacebarEvent) {
               actions.selectUpTo(!isControlKey$1(e));
-            } else if (isControlKey$1(e)) {
+            } else if (isControlKey$1(e) && !isSpacebarEvent) {
               if (renderFlags.isSelected) {
                 actions.unselectItem();
               } else {
@@ -68709,10 +68714,11 @@ Averrage Date/Second ${avgDataRatePS} kb
         var _this = this;
         return {
           onClick: function(e) {
+            var isSpacebarEvent = e.detail === 0;
             actions.focusItem();
-            if (e.shiftKey) {
+            if (e.shiftKey && !isSpacebarEvent) {
               actions.selectUpTo(!isControlKey$1(e));
-            } else if (isControlKey$1(e)) {
+            } else if (isControlKey$1(e) && !isSpacebarEvent) {
               if (renderFlags.isSelected) {
                 actions.unselectItem();
               } else {
@@ -68830,7 +68836,7 @@ Averrage Date/Second ${avgDataRatePS} kb
       return isDescendant(treeId, parentLinearIndex, potentialParents);
     }, [getParentOfLinearItem]);
     return React2.useCallback(function(treeId, draggingItems) {
-      var _a3, _b2;
+      var _a3, _b2, _c, _d;
       var linearItems = environment.linearItems[treeId];
       var targets = [];
       var skipUntilDepthIsLowerThan = -1;
@@ -68840,7 +68846,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         // eslint-disable-next-line no-plusplus
         linearIndex++
       ) {
-        var _c = linearItems[linearIndex], item = _c.item, depth = _c.depth;
+        var _e = linearItems[linearIndex], item = _e.item, depth = _e.depth;
         if (skipUntilDepthIsLowerThan !== -1 && depth > skipUntilDepthIsLowerThan) {
           continue;
         } else {
@@ -68878,14 +68884,17 @@ Averrage Date/Second ${avgDataRatePS} kb
           depth,
           treeId
         };
-        var skipTopPosition = depth === ((_b2 = (_a3 = linearItems[linearIndex - 1]) === null || _a3 === void 0 ? void 0 : _a3.depth) !== null && _b2 !== void 0 ? _b2 : -1);
-        if (!skipTopPosition && canDropAt(topPosition, draggingItems)) {
+        var depthOfItemAbove = (_b2 = (_a3 = linearItems[linearIndex - 1]) === null || _a3 === void 0 ? void 0 : _a3.depth) !== null && _b2 !== void 0 ? _b2 : -1;
+        var depthOfItemBelow = (_d = (_c = linearItems[linearIndex + 1]) === null || _c === void 0 ? void 0 : _c.depth) !== null && _d !== void 0 ? _d : -1;
+        var isWithinFolder = depth === depthOfItemAbove;
+        var isBelowOpenFolder = depth === depthOfItemBelow - 1;
+        if (!isWithinFolder && canDropAt(topPosition, draggingItems)) {
           targets.push(topPosition);
         }
         if (canDropAt(itemPosition, draggingItems)) {
           targets.push(itemPosition);
         }
-        if (canDropAt(bottomPosition, draggingItems)) {
+        if (!isBelowOpenFolder && canDropAt(bottomPosition, draggingItems)) {
           targets.push(bottomPosition);
         }
       }
@@ -68924,8 +68933,8 @@ Averrage Date/Second ${avgDataRatePS} kb
       }
     }, __spreadArray$4(__spreadArray$4([], deps, true), changeOn, true));
   };
-  var __assign$c = function() {
-    __assign$c = Object.assign || function(t) {
+  var __assign$b = function() {
+    __assign$b = Object.assign || function(t) {
       for (var s, i2 = 1, n = arguments.length; i2 < n; i2++) {
         s = arguments[i2];
         for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
@@ -68933,7 +68942,7 @@ Averrage Date/Second ${avgDataRatePS} kb
       }
       return t;
     };
-    return __assign$c.apply(this, arguments);
+    return __assign$b.apply(this, arguments);
   };
   var buildMapForTrees = function(treeIds, build) {
     return treeIds.map(function(id2) {
@@ -68941,7 +68950,7 @@ Averrage Date/Second ${avgDataRatePS} kb
     }).reduce(function(a, _a3) {
       var _b2;
       var id2 = _a3[0], obj = _a3[1];
-      return __assign$c(__assign$c({}, a), (_b2 = {}, _b2[id2] = obj, _b2));
+      return __assign$b(__assign$b({}, a), (_b2 = {}, _b2[id2] = obj, _b2));
     }, {});
   };
   var getDocument = function() {
@@ -69448,7 +69457,7 @@ Averrage Date/Second ${avgDataRatePS} kb
     var programmaticDragDown = React2.useCallback(function() {
       if (environment.activeTreeId) {
         setProgrammaticDragIndex(function(oldIndex) {
-          return Math.min(viableDragPositions[environment.activeTreeId].length, oldIndex + 1);
+          return Math.min(viableDragPositions[environment.activeTreeId].length - 1, oldIndex + 1);
         });
       }
     }, [environment.activeTreeId, viableDragPositions]);
@@ -69493,8 +69502,8 @@ Averrage Date/Second ${avgDataRatePS} kb
     }, [onDropHandler, resetState]);
     return React__namespace.createElement(DragAndDropContext.Provider, { value: dnd }, children);
   };
-  var __assign$b = function() {
-    __assign$b = Object.assign || function(t) {
+  var __assign$a = function() {
+    __assign$a = Object.assign || function(t) {
       for (var s, i2 = 1, n = arguments.length; i2 < n; i2++) {
         s = arguments[i2];
         for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
@@ -69502,13 +69511,13 @@ Averrage Date/Second ${avgDataRatePS} kb
       }
       return t;
     };
-    return __assign$b.apply(this, arguments);
+    return __assign$a.apply(this, arguments);
   };
   var useCreatedEnvironmentRef = function(ref, actions) {
     var environment = useTreeEnvironment();
     var dnd = useDragAndDrop();
     React2.useImperativeHandle(ref, function() {
-      return __assign$b(__assign$b(__assign$b({}, actions), environment), { treeEnvironmentContext: environment, dragAndDropContext: dnd });
+      return __assign$a(__assign$a(__assign$a({}, actions), environment), { treeEnvironmentContext: environment, dragAndDropContext: dnd });
     });
   };
   var waitFor = function(check2, intervalMs, timeoutMs) {
@@ -69864,8 +69873,8 @@ Averrage Date/Second ${avgDataRatePS} kb
       }
     }
   };
-  var __assign$a = function() {
-    __assign$a = Object.assign || function(t) {
+  var __assign$9 = function() {
+    __assign$9 = Object.assign || function(t) {
       for (var s, i2 = 1, n = arguments.length; i2 < n; i2++) {
         s = arguments[i2];
         for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
@@ -69873,7 +69882,7 @@ Averrage Date/Second ${avgDataRatePS} kb
       }
       return t;
     };
-    return __assign$a.apply(this, arguments);
+    return __assign$9.apply(this, arguments);
   };
   var cx$1 = function() {
     var classNames = [];
@@ -69904,7 +69913,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         var item = _a3.item, context = _a3.context;
         return (
           // Icons from https://blueprintjs.com/docs/#icons
-          React2.createElement("div", __assign$a({ className: cx$1(item.isFolder && "rct-tree-item-arrow-isFolder", context.isExpanded && "rct-tree-item-arrow-expanded", "rct-tree-item-arrow") }, context.arrowProps), item.isFolder && (context.isExpanded ? React2.createElement(
+          React2.createElement("div", __assign$9({ className: cx$1(item.isFolder && "rct-tree-item-arrow-isFolder", context.isExpanded && "rct-tree-item-arrow-expanded", "rct-tree-item-arrow") }, context.arrowProps), item.isFolder && (context.isExpanded ? React2.createElement(
             "svg",
             { version: "1.1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", viewBox: "0 0 16 16", enableBackground: "new 0 0 16 16", xmlSpace: "preserve" },
             React2.createElement(
@@ -69937,12 +69946,12 @@ Averrage Date/Second ${avgDataRatePS} kb
         var type = context.isRenaming ? void 0 : "button";
         return React2.createElement(
           "li",
-          __assign$a({}, context.itemContainerWithChildrenProps, { className: cx$1("rct-tree-item-li", item.isFolder && "rct-tree-item-li-isFolder", context.isSelected && "rct-tree-item-li-selected", context.isExpanded && "rct-tree-item-li-expanded", context.isFocused && "rct-tree-item-li-focused", context.isDraggingOver && "rct-tree-item-li-dragging-over", context.isSearchMatching && "rct-tree-item-li-search-match") }),
+          __assign$9({}, context.itemContainerWithChildrenProps, { className: cx$1("rct-tree-item-li", item.isFolder && "rct-tree-item-li-isFolder", context.isSelected && "rct-tree-item-li-selected", context.isExpanded && "rct-tree-item-li-expanded", context.isFocused && "rct-tree-item-li-focused", context.isDraggingOver && "rct-tree-item-li-dragging-over", context.isSearchMatching && "rct-tree-item-li-search-match") }),
           React2.createElement(
             "div",
-            __assign$a({}, context.itemContainerWithoutChildrenProps, { style: { "--depthOffset": "".concat((depth + 1) * renderDepthOffset, "px") }, className: cx$1("rct-tree-item-title-container", item.isFolder && "rct-tree-item-title-container-isFolder", context.isSelected && "rct-tree-item-title-container-selected", context.isExpanded && "rct-tree-item-title-container-expanded", context.isFocused && "rct-tree-item-title-container-focused", context.isDraggingOver && "rct-tree-item-title-container-dragging-over", context.isSearchMatching && "rct-tree-item-title-container-search-match") }),
+            __assign$9({}, context.itemContainerWithoutChildrenProps, { style: { "--depthOffset": "".concat((depth + 1) * renderDepthOffset, "px") }, className: cx$1("rct-tree-item-title-container", item.isFolder && "rct-tree-item-title-container-isFolder", context.isSelected && "rct-tree-item-title-container-selected", context.isExpanded && "rct-tree-item-title-container-expanded", context.isFocused && "rct-tree-item-title-container-focused", context.isDraggingOver && "rct-tree-item-title-container-dragging-over", context.isSearchMatching && "rct-tree-item-title-container-search-match") }),
             arrow,
-            React2.createElement(InteractiveComponent, __assign$a({ type }, context.interactiveElementProps, { className: cx$1("rct-tree-item-button", item.isFolder && "rct-tree-item-button-isFolder", context.isSelected && "rct-tree-item-button-selected", context.isExpanded && "rct-tree-item-button-expanded", context.isFocused && "rct-tree-item-button-focused", context.isDraggingOver && "rct-tree-item-button-dragging-over", context.isSearchMatching && "rct-tree-item-button-search-match") }), title2)
+            React2.createElement(InteractiveComponent, __assign$9({ type }, context.interactiveElementProps, { className: cx$1("rct-tree-item-button", item.isFolder && "rct-tree-item-button-isFolder", context.isSelected && "rct-tree-item-button-selected", context.isExpanded && "rct-tree-item-button-expanded", context.isFocused && "rct-tree-item-button-focused", context.isDraggingOver && "rct-tree-item-button-dragging-over", context.isSearchMatching && "rct-tree-item-button-search-match") }), title2)
           ),
           children
         );
@@ -69951,9 +69960,9 @@ Averrage Date/Second ${avgDataRatePS} kb
         var inputProps = _a3.inputProps, inputRef = _a3.inputRef, submitButtonProps = _a3.submitButtonProps, submitButtonRef = _a3.submitButtonRef, formProps = _a3.formProps;
         return React2.createElement(
           "form",
-          __assign$a({}, formProps, { className: "rct-tree-item-renaming-form" }),
-          React2.createElement("input", __assign$a({}, inputProps, { ref: inputRef, className: "rct-tree-item-renaming-input" })),
-          React2.createElement("input", __assign$a({}, submitButtonProps, { ref: submitButtonRef, type: "submit", className: "rct-tree-item-renaming-submit-button", value: "🗸" }))
+          __assign$9({}, formProps, { className: "rct-tree-item-renaming-form" }),
+          React2.createElement("input", __assign$9({}, inputProps, { ref: inputRef, className: "rct-tree-item-renaming-input" })),
+          React2.createElement("input", __assign$9({}, submitButtonProps, { ref: submitButtonRef, type: "submit", className: "rct-tree-item-renaming-submit-button", value: "🗸" }))
         );
       },
       renderTreeContainer: function(_a3) {
@@ -69961,16 +69970,16 @@ Averrage Date/Second ${avgDataRatePS} kb
         return React2.createElement(
           "div",
           { className: cx$1("rct-tree-root", info.isFocused && "rct-tree-root-focus", info.isRenaming && "rct-tree-root-renaming", info.areItemsSelected && "rct-tree-root-itemsselected", rtl) },
-          React2.createElement("div", __assign$a({}, containerProps, { style: __assign$a({ minHeight: "30px" }, containerProps.style) }), children)
+          React2.createElement("div", __assign$9({}, containerProps, { style: __assign$9({ minHeight: "30px" }, containerProps.style) }), children)
         );
       },
       renderItemsContainer: function(_a3) {
         var children = _a3.children, containerProps = _a3.containerProps;
-        return React2.createElement("ul", __assign$a({}, containerProps, { className: "rct-tree-items-container" }), children);
+        return React2.createElement("ul", __assign$9({}, containerProps, { className: "rct-tree-items-container" }), children);
       },
       renderDragBetweenLine: function(_a3) {
         var draggingPosition = _a3.draggingPosition, lineProps = _a3.lineProps;
-        return React2.createElement("div", __assign$a({}, lineProps, { style: { left: "".concat(draggingPosition.depth * renderDepthOffset, "px") }, className: cx$1("rct-tree-drag-between-line", draggingPosition.targetType === "between-items" && draggingPosition.linePosition === "top" && "rct-tree-drag-between-line-top", draggingPosition.targetType === "between-items" && draggingPosition.linePosition === "bottom" && "rct-tree-drag-between-line-bottom") }));
+        return React2.createElement("div", __assign$9({}, lineProps, { style: { left: "".concat(draggingPosition.depth * renderDepthOffset, "px") }, className: cx$1("rct-tree-drag-between-line", draggingPosition.targetType === "between-items" && draggingPosition.linePosition === "top" && "rct-tree-drag-between-line-top", draggingPosition.targetType === "between-items" && draggingPosition.linePosition === "bottom" && "rct-tree-drag-between-line-bottom") }));
       },
       renderSearchInput: function(_a3) {
         var inputProps = _a3.inputProps;
@@ -69978,7 +69987,7 @@ Averrage Date/Second ${avgDataRatePS} kb
           "div",
           { className: cx$1("rct-tree-search-input-container") },
           React2.createElement("span", { className: "rct-tree-input-icon" }),
-          React2.createElement("input", __assign$a({}, inputProps, { className: cx$1("rct-tree-search-input") }))
+          React2.createElement("input", __assign$9({}, inputProps, { className: cx$1("rct-tree-search-input") }))
         );
       },
       renderLiveDescriptorContainer: function(_a3) {
@@ -70049,8 +70058,8 @@ Averrage Date/Second ${avgDataRatePS} kb
     }
     return itemIds;
   };
-  var __assign$9 = function() {
-    __assign$9 = Object.assign || function(t) {
+  var __assign$8 = function() {
+    __assign$8 = Object.assign || function(t) {
       for (var s, i2 = 1, n = arguments.length; i2 < n; i2++) {
         s = arguments[i2];
         for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
@@ -70058,7 +70067,7 @@ Averrage Date/Second ${avgDataRatePS} kb
       }
       return t;
     };
-    return __assign$9.apply(this, arguments);
+    return __assign$8.apply(this, arguments);
   };
   var __rest = function(s, e) {
     var t = {};
@@ -70108,7 +70117,7 @@ Averrage Date/Second ${avgDataRatePS} kb
     var registerTree = React2.useCallback(function(tree) {
       setTrees(function(trees3) {
         var _a4;
-        return __assign$9(__assign$9({}, trees3), (_a4 = {}, _a4[tree.treeId] = tree, _a4));
+        return __assign$8(__assign$8({}, trees3), (_a4 = {}, _a4[tree.treeId] = tree, _a4));
       });
       onRegisterTree === null || onRegisterTree === void 0 ? void 0 : onRegisterTree(tree);
     }, [onRegisterTree]);
@@ -70165,33 +70174,26 @@ Averrage Date/Second ${avgDataRatePS} kb
       }
     }, [autoFocus, focusTree]);
     var renderers = useRenderers(props);
-    return __assign$9(__assign$9(__assign$9({}, renderers), props), { onFocusItem: onFocusItemHandler, registerTree, unregisterTree, onExpandItem, onCollapseItem, onDrop, setActiveTree, treeIds, trees: trees2, activeTreeId, linearItems });
-  };
-  var __assign$8 = function() {
-    __assign$8 = Object.assign || function(t) {
-      for (var s, i2 = 1, n = arguments.length; i2 < n; i2++) {
-        s = arguments[i2];
-        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-          t[p] = s[p];
-      }
-      return t;
-    };
-    return __assign$8.apply(this, arguments);
+    return __assign$8(__assign$8(__assign$8({}, renderers), props), { onFocusItem: onFocusItemHandler, registerTree, unregisterTree, onExpandItem, onCollapseItem, onDrop, setActiveTree, treeIds, trees: trees2, activeTreeId, linearItems });
   };
   var TreeEnvironmentContext = React__namespace.createContext(null);
   var useTreeEnvironment = function() {
     return React2.useContext(TreeEnvironmentContext);
   };
   var ControlledTreeEnvironment = React__namespace.forwardRef(function(props, ref) {
-    var _a3, _b2, _c;
     var environmentContextProps = useControlledTreeEnvironmentProps(props);
-    var viewState = props.viewState;
-    for (var _i = 0, _d = Object.keys(environmentContextProps.trees); _i < _d.length; _i++) {
-      var treeId = _d[_i];
-      if (!((_a3 = viewState[treeId]) === null || _a3 === void 0 ? void 0 : _a3.focusedItem) && environmentContextProps.trees[treeId]) {
-        viewState[treeId] = __assign$8(__assign$8({}, viewState[treeId]), { focusedItem: (_c = (_b2 = props.items[environmentContextProps.trees[treeId].rootItem]) === null || _b2 === void 0 ? void 0 : _b2.children) === null || _c === void 0 ? void 0 : _c[0] });
+    var viewState = props.viewState, onFocusItem = props.onFocusItem;
+    React2.useEffect(function() {
+      var _a3, _b2, _c;
+      for (var _i = 0, _d = Object.keys(environmentContextProps.trees); _i < _d.length; _i++) {
+        var treeId = _d[_i];
+        var firstItemIndex = (_b2 = (_a3 = props.items[environmentContextProps.trees[treeId].rootItem]) === null || _a3 === void 0 ? void 0 : _a3.children) === null || _b2 === void 0 ? void 0 : _b2[0];
+        var firstItem = firstItemIndex && props.items[firstItemIndex];
+        if (!((_c = viewState[treeId]) === null || _c === void 0 ? void 0 : _c.focusedItem) && environmentContextProps.trees[treeId] && firstItem) {
+          onFocusItem === null || onFocusItem === void 0 ? void 0 : onFocusItem(firstItem, treeId, false);
+        }
       }
-    }
+    }, [environmentContextProps.trees, onFocusItem, props.items, viewState]);
     return React__namespace.createElement(
       TreeEnvironmentContext.Provider,
       { value: environmentContextProps },
@@ -70286,11 +70288,11 @@ Averrage Date/Second ${avgDataRatePS} kb
     primaryAction: ["enter"],
     renameItem: ["f2"],
     abortRenameItem: ["escape"],
-    toggleSelectItem: ["control+space"],
+    toggleSelectItem: ["control+ "],
     abortSearch: ["escape", "enter"],
     startSearch: [],
     selectAll: ["control+a"],
-    startProgrammaticDnd: ["control+d"],
+    startProgrammaticDnd: ["control+shift+d"],
     completeProgrammaticDnd: ["enter"],
     abortProgrammaticDnd: ["escape"]
   };
@@ -70350,7 +70352,7 @@ Averrage Date/Second ${avgDataRatePS} kb
           return a || b;
         }, false);
         if (partialMatch) {
-          if (pressedKeys.current.length > 1 || !/^[a-zA-Z]$/.test(e.key)) {
+          if (pressedKeys.current.length > 1 || !/^[a-zA-Z\s]$/.test(e.key)) {
             e.preventDefault();
           }
         }
@@ -70584,6 +70586,7 @@ Averrage Date/Second ${avgDataRatePS} kb
     useHotkey("toggleSelectItem", function(e) {
       var _a4, _b3, _c;
       e.preventDefault();
+      e.stopPropagation();
       if (viewState.focusedItem !== void 0) {
         if (viewState.selectedItems && viewState.selectedItems.includes(viewState.focusedItem)) {
           (_a4 = environment.onSelectItems) === null || _a4 === void 0 ? void 0 : _a4.call(environment, viewState.selectedItems.filter(function(item) {