@elliemae/ds-treeview 2.2.0-alpha.4 → 3.0.0-next.2

package/cjs/utils/useInstanceRefActions.js

@@ -1,41 +1,20 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var useInstanceRefActions_exports = {};
-__export(useInstanceRefActions_exports, {
-  useInstanceRefActions: () => useInstanceRefActions
-});
-var React = __toESM(require("react"));
-var import_react = require("react");
-var import_tree_helpers = require("./tree-helpers");
-var import_group_expands_helpers = require("./group-expands-helpers");
-const useInstanceRefActions = ({ actions }, ctx) => {
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/web.dom-collections.iterator.js');
+var React = require('react');
+var treeHelpers = require('./tree-helpers.js');
+var groupExpandsHelpers = require('./group-expands-helpers.js');
+
+const useInstanceRefActions = (_ref, ctx) => {
+  let {
+    actions
+  } = _ref;
   const {
-    props: { onItemFocus },
+    props: {
+      onItemFocus
+    },
     virtualListHelpers,
     treeRoot,
     visibleItems,
@@ -45,54 +24,64 @@ const useInstanceRefActions = ({ actions }, ctx) => {
     setFocusedItem,
     setLatestToggledItem
   } = ctx;
-  const { current: promises } = (0, import_react.useRef)({});
-  const { scrollToIndex } = (0, import_react.useMemo)(() => virtualListHelpers, [virtualListHelpers]);
-  const [expandPromise, setPromise] = (0, import_react.useState)();
-  (0, import_react.useEffect)(() => {
+  const {
+    current: promises
+  } = React.useRef({});
+  const {
+    scrollToIndex
+  } = React.useMemo(() => virtualListHelpers, [virtualListHelpers]);
+  const [expandPromise, setPromise] = React.useState();
+  React.useEffect(() => {
     if (expandPromise && promises.expandResolve) {
       promises.expandResolve(visibleItems);
       promises.expandResolve = null;
       setPromise(null);
     }
   }, [visibleItems, expandPromise, promises]);
-  actions.toggleExpandAll = (0, import_react.useCallback)((isExpand) => {
-    const p = new Promise((resolve) => {
+  actions.toggleExpandAll = React.useCallback(isExpand => {
+    const p = new Promise(resolve => {
       promises.expandResolve = resolve;
-      if (treeRoot)
-        (0, import_group_expands_helpers.toggleExpandAllHelper)(isExpand, treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState);
+      if (treeRoot) groupExpandsHelpers.toggleExpandAllHelper(isExpand, treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState);
     });
     setPromise(p);
     return p;
   }, [promises, treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState]);
-  actions.scrollTo = (0, import_react.useCallback)((indx, opts = { align: "start" }) => {
-    if (scrollToIndex)
-      scrollToIndex(indx, opts);
+  actions.scrollTo = React.useCallback(function (indx) {
+    let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+      align: 'start'
+    };
+    if (scrollToIndex) scrollToIndex(indx, opts);
   }, [scrollToIndex]);
-  actions.setSelectedItemByVirtualIndex = (0, import_react.useCallback)((index) => {
+  actions.setSelectedItemByVirtualIndex = React.useCallback(index => {
     const itemByIndex = visibleItems[index];
     setSelectedItem(itemByIndex);
   }, [visibleItems, setSelectedItem]);
-  actions.setFocusedItemByVirtualIndex = (0, import_react.useCallback)((index, opts = { align: "start", withScroll: false }) => {
+  actions.setFocusedItemByVirtualIndex = React.useCallback(function (index) {
+    let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+      align: 'start',
+      withScroll: false
+    };
     const itemByIndex = visibleItems[index];
     const onItemFocusParams = {
       itemIndex: itemByIndex.virtualIndex,
       scrollToItem: () => scrollToIndex(index, opts),
       item: itemByIndex
     };
+
     if (opts.withScroll && scrollToIndex) {
       scrollToIndex(index, opts);
       setTimeout(() => {
         setFocusedItem(itemByIndex);
-        (0, import_tree_helpers.focusItem)(itemByIndex);
+        treeHelpers.focusItem(itemByIndex);
         onItemFocus(onItemFocusParams);
       }, 300);
     } else {
       setFocusedItem(itemByIndex);
-      (0, import_tree_helpers.focusItem)(itemByIndex);
+      treeHelpers.focusItem(itemByIndex);
       onItemFocus(onItemFocusParams);
     }
   }, [visibleItems, scrollToIndex, setFocusedItem, onItemFocus]);
   return actions;
 };
-module.exports = __toCommonJS(useInstanceRefActions_exports);
-//# sourceMappingURL=useInstanceRefActions.js.map
+
+exports.useInstanceRefActions = useInstanceRefActions;

package/cjs/utils/useTree.js

@@ -1,98 +1,102 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var useTree_exports = {};
-__export(useTree_exports, {
-  useTree: () => useTree
-});
-var React = __toESM(require("react"));
-var import_react = require("react");
-var import_tree_model = __toESM(require("tree-model"));
-var import_lodash = require("lodash");
-var import_tree_helpers = require("./tree-helpers");
-var import_group_expands_helpers = require("./group-expands-helpers");
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var React = require('react');
+var TreeModel = require('tree-model');
+var lodash = require('lodash');
+var treeHelpers = require('./tree-helpers.js');
+var groupExpandsHelpers = require('./group-expands-helpers.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var TreeModel__default = /*#__PURE__*/_interopDefaultLegacy(TreeModel);
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(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 source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 const useTree = (data, props, states) => {
-  const { setExpandedGroups } = states;
-  const unfrozenData = (0, import_react.useMemo)(() => (0, import_lodash.cloneDeep)(data), [data]);
-  const tree = (0, import_react.useMemo)(() => new import_tree_model.default(), []);
-  const [treeData, setTreeData] = (0, import_react.useState)({
-    id: "__ds_tree_root",
-    name: "__root",
+  const {
+    setExpandedGroups
+  } = states;
+  const unfrozenData = React.useMemo(() => lodash.cloneDeep(data), [data]); // convert data into a TreeModel with extra isExpanded prop
+  // root element type is an exception, children model is based on what the dev passed on
+  // since root is an excepcion we must typecast
+
+  const tree = React.useMemo(() => new TreeModel__default["default"](), []);
+  const [treeData, setTreeData] = React.useState({
+    id: '__ds_tree_root',
+    name: '__root',
     isExpanded: true,
     children: unfrozenData
   });
-  (0, import_react.useEffect)(() => {
+  React.useEffect(() => {
     setTreeData({
-      id: "__ds_tree_root",
-      name: "__root",
+      id: '__ds_tree_root',
+      name: '__root',
       isExpanded: true,
       children: unfrozenData
     });
-  }, [unfrozenData]);
-  const [rerenderItems, setRerenderItems] = (0, import_react.useState)({});
-  const triggerTreeRerender = (0, import_react.useCallback)(() => {
+  }, [unfrozenData]); // expose a way to rerender the tree
+  //   used for expand functionality
+
+  const [rerenderItems, setRerenderItems] = React.useState({});
+  const triggerTreeRerender = React.useCallback(() => {
     setRerenderItems({});
-  }, []);
-  const [treeRoot, setTreeRoot] = (0, import_react.useState)(tree.parse(treeData));
-  (0, import_react.useEffect)(() => {
+  }, []); // when re-rendering we re-parse the list
+
+  const [treeRoot, setTreeRoot] = React.useState(tree.parse(treeData));
+  React.useEffect(() => {
     setTreeRoot(tree.parse(treeData));
   }, [treeData, rerenderItems, tree]);
-  const [visibleItems, setVisibleItems] = (0, import_react.useState)([]);
-  const { searchQuery, highlightOnlyQuery, onVisibleItemsChange, selection, expanded, onExpandChange } = props;
-  const updateUserExpandedState = (0, import_react.useCallback)(() => {
-    (0, import_group_expands_helpers.updateExpandedState)(treeRoot, onExpandChange);
-  }, [treeRoot, onExpandChange]);
-  (0, import_react.useEffect)(() => {
+  const [visibleItems, setVisibleItems] = React.useState([]);
+  const {
+    searchQuery,
+    highlightOnlyQuery,
+    onVisibleItemsChange,
+    selection,
+    expanded,
+    onExpandChange
+  } = props;
+  const updateUserExpandedState = React.useCallback(() => {
+    groupExpandsHelpers.updateExpandedState(treeRoot, onExpandChange);
+  }, [treeRoot, onExpandChange]); // we add missing properties to the received Items
+  //   not the best of the patterns, but it works
+  //   this is where we convert "SimpleItems" to "Items"
+  //   this was done to avoid breaking changes back in v1
+
+  React.useEffect(() => {
     const parsedVisibleItems = [];
     const newExpandedHashMap = {};
-    treeRoot.walk((node) => {
-      const shouldContinueWalking = true;
-      (0, import_tree_helpers.enrichNodeModelInPlace)(node, searchQuery, selection, expanded);
-      if (node.model.id && node.model.isGroup && node.model.isExpanded)
-        newExpandedHashMap[node.model.id] = true;
+    const shouldContinueWalking = true; // tree-model ask we return true if we want to continue walking
+
+    treeRoot.walk(node => {
+      treeHelpers.enrichNodeModelInPlace(node, searchQuery, selection, expanded);
+      if (node.model.id && node.model.isGroup && node.model.isExpanded) newExpandedHashMap[node.model.id] = true;
       return shouldContinueWalking;
     });
-    (0, import_tree_helpers.walkVisibles)(treeRoot, (node) => {
-      parsedVisibleItems.push({ ...node.model, node });
+    treeHelpers.walkVisibles(treeRoot, node => {
+      parsedVisibleItems.push(_objectSpread(_objectSpread({}, node.model), {}, {
+        node
+      }));
     }, true, highlightOnlyQuery);
     setVisibleItems(parsedVisibleItems);
     onVisibleItemsChange(parsedVisibleItems);
-    setExpandedGroups(newExpandedHashMap);
-  }, [
-    treeRoot,
-    rerenderItems,
-    searchQuery,
-    highlightOnlyQuery,
-    selection,
-    expanded,
-    setExpandedGroups
+    setExpandedGroups(newExpandedHashMap); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [treeRoot, rerenderItems, searchQuery, highlightOnlyQuery, selection, expanded, setExpandedGroups // onVisibleItemsChange // evaluate potential performance hit?
   ]);
+  const flattenedItems = React.useMemo(() => treeHelpers.flattenTreeForDnD(data), [data]);
   return {
     visibleItems,
+    flattenedItems,
     tree,
     treeRoot,
     rerenderItems,
@@ -100,5 +104,5 @@ const useTree = (data, props, states) => {
     updateUserExpandedState
   };
 };
-module.exports = __toCommonJS(useTree_exports);
-//# sourceMappingURL=useTree.js.map
+
+exports.useTree = useTree;

package/esm/TreeView.js

@@ -1,23 +1,21 @@
-import * as React from "react";
-import React2 from "react";
-import { describe } from "react-desc";
-import { TreeViewPropTypes } from "./react-desc-prop-types";
-import TreeViewContext from "./TreeViewContext";
-import { TreeDnD, TreeDndPlugin } from "./plugins/dnd";
-import { useTreeview } from "./config/useTreeview";
-import { TreeList } from "./parts/TreeList";
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { describe } from 'react-desc';
+import { TreeViewPropTypes } from './react-desc-prop-types.js';
+import TreeViewContext from './TreeViewContext.js';
+import { useTreeview } from './config/useTreeview.js';
+import { TreeList } from './parts/TreeList.js';
+
+var _TreeList;
 function TreeView(props) {
-  const { plugins } = props;
-  const { ctx } = useTreeview(props);
-  return /* @__PURE__ */ React2.createElement(TreeViewContext.Provider, {
+  const {
+    ctx
+  } = useTreeview(props);
+  return /*#__PURE__*/_jsx(TreeViewContext.Provider, {
     value: ctx
-  }, plugins?.includes(TreeDndPlugin) ? /* @__PURE__ */ React2.createElement(TreeDnD, null) : /* @__PURE__ */ React2.createElement(TreeList, null));
+  }, void 0, _TreeList || (_TreeList = /*#__PURE__*/_jsx(TreeList, {})));
 }
-TreeView.propTypes = TreeViewPropTypes;
 const TreeViewWithSchema = describe(TreeView);
 TreeViewWithSchema.propTypes = TreeViewPropTypes;
-export {
-  TreeView,
-  TreeViewWithSchema
-};
-//# sourceMappingURL=TreeView.js.map
+
+export { TreeView, TreeViewWithSchema };

package/esm/TreeViewContext.js

@@ -1,16 +1,20 @@
-import * as React from "react";
-import { createContext, createRef } from "react";
-function noop(..._args) {
-}
+import { createRef, createContext } from 'react';
+
+/* eslint-disable no-unused-vars */
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function noop() {}
+
 const defaultProps = {
   plugins: [],
   selection: {},
-  instanceRef: createRef(),
+  instanceRef: /*#__PURE__*/createRef(),
   isItemDisabled: () => false,
   disableIcons: false,
   fluid: false,
   isMultiSelect: false,
   isSingleSelect: false,
+  getIsDropValid: () => true,
   restrictDragAndDrop: false,
   showChildrenAmount: false,
   sortable: false,
@@ -23,15 +27,20 @@ const defaultProps = {
   onSelectionChange: noop,
   onExpandChange: noop,
   onInstanceRefInitialized: noop,
-  rowSize: "normal",
-  labelOverflow: "wrap",
-  noItemsPlaceholder: "No items found",
-  nameKey: "name",
-  width: "100%",
-  height: "100%",
+  rowSize: 'normal',
+  labelOverflow: 'wrap',
+  noItemsPlaceholder: 'No items found',
+  nameKey: 'name',
+  width: '100%',
+  height: '100%',
   groupIcon: null,
   itemIcon: null,
-  searchQuery: ""
+  searchQuery: '' // workaround on the typings over the fact that
+  // when we instantiate the context we can't have all the props
+  // we only have a part of them but the final typings will include missing props
+  // this is safe to do because
+  // we will "mergeWithDefaults" + "validatePropTypes" when we do instantiate the context
+
 };
 const defaultRelativeMouseCoord = {
   isBefore: false,
@@ -46,28 +55,21 @@ const defaultRelativeMouseCoord = {
 const defaultContext = {
   props: defaultProps,
   visibleItems: [],
+  flattenedItems: [],
   withRadioChecks: false,
   withCheckboxChecks: false,
   withDragAndDrop: false,
-  relativeMouseCord: defaultRelativeMouseCoord,
-  setRelativeMouseCord: noop,
   triggerTreeRerender: noop,
-  tree: void 0,
-  treeRoot: void 0,
+  tree: undefined,
+  treeRoot: undefined,
   virtualListHelpers: {
     virtualItems: [],
     totalSize: 0,
     scrollToOffset: noop,
     scrollToIndex: noop
   },
-  virtualListRef: void 0,
-  isDragging: false,
-  setIsDragging: noop,
-  isKeyboardDragging: false,
-  setIsKeyboardDragging: noop,
-  draggedItem: null,
-  setDraggedItem: noop,
-  uniqueTreeViewUUID: "",
+  virtualListRef: undefined,
+  uniqueTreeViewUUID: '',
   selectedItem: null,
   setSelectedItem: noop,
   focusedItem: null,
@@ -83,11 +85,8 @@ const defaultContext = {
   handleExpandGroup: noop,
   updateUserExpandedState: noop
 };
-const TreeViewContext = createContext(defaultContext);
-var TreeViewContext_default = TreeViewContext;
-export {
-  TreeViewContext_default as default,
-  defaultProps,
-  defaultRelativeMouseCoord
-};
-//# sourceMappingURL=TreeViewContext.js.map
+/** Context for cross component communication */
+
+const TreeViewContext = /*#__PURE__*/createContext(defaultContext);
+
+export { TreeViewContext as default, defaultProps, defaultRelativeMouseCoord };

package/esm/config/cssClassesConstants.js

@@ -1,12 +1,6 @@
-import * as React from "react";
-const DSTreeViewPrefix = "em-ds";
-const treeItemBlockName = "tree-item";
-const treeListBlockName = "tree-list";
-const treeListNoItemsBn = `${treeListBlockName}-no-items`;
-export {
-  DSTreeViewPrefix,
-  treeItemBlockName,
-  treeListBlockName,
-  treeListNoItemsBn
-};
-//# sourceMappingURL=cssClassesConstants.js.map
+const DSTreeViewPrefix = 'em-ds';
+const treeItemBlockName = 'tree-item';
+const treeListBlockName = 'tree-list';
+const treeListNoItemsBn = "".concat(treeListBlockName, "-no-items");
+
+export { DSTreeViewPrefix, treeItemBlockName, treeListBlockName, treeListNoItemsBn };