@elliemae/ds-treeview 2.2.0 → 2.3.0-alpha.3

package/cjs/parts/TreeItemText.js

@@ -1,108 +1,101 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _jsx = require('@babel/runtime/helpers/jsx');
-var React = require('react');
-var Highlighter = require('react-highlight-words');
-var dsTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
-var dsClassnames = require('@elliemae/ds-classnames');
-var ChildrenCountDisplayer = require('./ChildrenCountDisplayer.js');
-var cssClassesConstants = require('../config/cssClassesConstants.js');
-var TreeViewContext = require('../TreeViewContext.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var Highlighter__default = /*#__PURE__*/_interopDefaultLegacy(Highlighter);
-
-const ItemContent = dsClassnames.aggregatedClasses('div')("".concat(cssClassesConstants.treeItemBlockName, "-content"));
-const ItemValue = dsClassnames.aggregatedClasses('span')(cssClassesConstants.treeItemBlockName, 'value'); // const wrapperClassName = `${DSTreeViewPrefix}-${treeItemBlockName}-content`;
-
-const classNameModifierWrapAll = "".concat(cssClassesConstants.DSTreeViewPrefix, "-").concat(cssClassesConstants.treeItemBlockName, "__value--wrap-all");
-const classNameModifierTruncate = "".concat(cssClassesConstants.DSTreeViewPrefix, "-").concat(cssClassesConstants.treeItemBlockName, "__value--truncate"); // eslint-disable-next-line react/prop-types
-
-const CustomHighlight = _ref => {
-  let {
-    children
-  } = _ref;
-  return /*#__PURE__*/_jsx__default["default"]("mark", {
-    className: "tree-text-highlight",
-    "data-testid": "tree-text-highlight"
-  }, void 0, children);
+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 TreeItemText_exports = {};
+__export(TreeItemText_exports, {
+  TreeItemText: () => TreeItemText
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_react_highlight_words = __toESM(require("react-highlight-words"));
+var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
+var import_ds_classnames = require("@elliemae/ds-classnames");
+var import_ChildrenCountDisplayer = require("./ChildrenCountDisplayer");
+var import_cssClassesConstants = require("../config/cssClassesConstants");
+var import_TreeViewContext = __toESM(require("../TreeViewContext"));
+const ItemContent = (0, import_ds_classnames.aggregatedClasses)("div")(`${import_cssClassesConstants.treeItemBlockName}-content`);
+const ItemValue = (0, import_ds_classnames.aggregatedClasses)("span")(import_cssClassesConstants.treeItemBlockName, "value");
+const classNameModifierWrapAll = `${import_cssClassesConstants.DSTreeViewPrefix}-${import_cssClassesConstants.treeItemBlockName}__value--wrap-all`;
+const classNameModifierTruncate = `${import_cssClassesConstants.DSTreeViewPrefix}-${import_cssClassesConstants.treeItemBlockName}__value--truncate`;
+const CustomHighlight = ({ children }) => /* @__PURE__ */ import_react.default.createElement("mark", {
+  className: "tree-text-highlight",
+  "data-testid": "tree-text-highlight"
+}, children);
 function TreeItemText(props) {
-  var _ChildrenCountDisplay, _ChildrenCountDisplay2, _ChildrenCountDisplay3, _ChildrenCountDisplay4;
-
-  const {
-    item
-  } = props;
-  const ctx = React.useContext(TreeViewContext["default"]);
+  const { item } = props;
+  const ctx = (0, import_react.useContext)(import_TreeViewContext.default);
   const {
-    props: {
-      searchQuery,
-      showChildrenAmount,
-      labelOverflow,
-      nameKey
-    }
+    props: { searchQuery, showChildrenAmount, labelOverflow, nameKey }
   } = ctx;
-  const Text = React.useMemo(() => {
+  const Text = (0, import_react.useMemo)(() => {
     const itemLabelText = item[nameKey];
-
     if (searchQuery) {
-      if (labelOverflow === 'truncate') {
-        return /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
-          value: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-            children: [/*#__PURE__*/_jsx__default["default"](Highlighter__default["default"], {
-              autoEscape: true,
-              highlightTag: CustomHighlight,
-              searchWords: [searchQuery],
-              textToHighlight: itemLabelText
-            }), showChildrenAmount ? _ChildrenCountDisplay || (_ChildrenCountDisplay = /*#__PURE__*/_jsx__default["default"](ChildrenCountDisplayer.ChildrenCountDisplayer, {
-              item: item
-            })) : null]
-          })
+      if (labelOverflow === "truncate") {
+        return /* @__PURE__ */ import_react.default.createElement(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, {
+          value: /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_react_highlight_words.default, {
+            autoEscape: true,
+            highlightTag: CustomHighlight,
+            searchWords: [searchQuery],
+            textToHighlight: itemLabelText
+          }), showChildrenAmount ? /* @__PURE__ */ import_react.default.createElement(import_ChildrenCountDisplayer.ChildrenCountDisplayer, {
+            item
+          }) : null)
         });
       }
-
-      return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/_jsx__default["default"](Highlighter__default["default"], {
-          autoEscape: true,
-          highlightTag: CustomHighlight,
-          searchWords: [searchQuery],
-          textToHighlight: itemLabelText
-        }), showChildrenAmount ? _ChildrenCountDisplay2 || (_ChildrenCountDisplay2 = /*#__PURE__*/_jsx__default["default"](ChildrenCountDisplayer.ChildrenCountDisplayer, {
-          item: item
-        })) : null]
-      });
+      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_react_highlight_words.default, {
+        autoEscape: true,
+        highlightTag: CustomHighlight,
+        searchWords: [searchQuery],
+        textToHighlight: itemLabelText
+      }), showChildrenAmount ? /* @__PURE__ */ import_react.default.createElement(import_ChildrenCountDisplayer.ChildrenCountDisplayer, {
+        item
+      }) : null);
     }
-
-    if (labelOverflow === 'truncate') {
-      return /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
-        value: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-          children: [itemLabelText, showChildrenAmount ? _ChildrenCountDisplay3 || (_ChildrenCountDisplay3 = /*#__PURE__*/_jsx__default["default"](ChildrenCountDisplayer.ChildrenCountDisplayer, {
-            item: item
-          })) : null]
-        })
+    if (labelOverflow === "truncate") {
+      return /* @__PURE__ */ import_react.default.createElement(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, {
+        value: /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, itemLabelText, showChildrenAmount ? /* @__PURE__ */ import_react.default.createElement(import_ChildrenCountDisplayer.ChildrenCountDisplayer, {
+          item
+        }) : null)
       });
     }
-
-    return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [itemLabelText, showChildrenAmount ? _ChildrenCountDisplay4 || (_ChildrenCountDisplay4 = /*#__PURE__*/_jsx__default["default"](ChildrenCountDisplayer.ChildrenCountDisplayer, {
-        item: item
-      })) : null]
-    });
+    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, itemLabelText, showChildrenAmount ? /* @__PURE__ */ import_react.default.createElement(import_ChildrenCountDisplayer.ChildrenCountDisplayer, {
+      item
+    }) : null);
   }, [item, searchQuery, nameKey, showChildrenAmount, labelOverflow]);
-  let className = '';
-  if (labelOverflow === 'wrap-all') className += "".concat(classNameModifierWrapAll, " ");
-  if (labelOverflow === 'truncate') className += "".concat(classNameModifierTruncate, " ");
-  return /*#__PURE__*/_jsx__default["default"](ItemContent, {
-    "data-testid": "".concat(cssClassesConstants.treeItemBlockName, "-content")
-  }, void 0, /*#__PURE__*/_jsx__default["default"](ItemValue, {
-    className: className
-  }, void 0, Text));
+  let className = "";
+  if (labelOverflow === "wrap-all")
+    className += `${classNameModifierWrapAll} `;
+  if (labelOverflow === "truncate")
+    className += `${classNameModifierTruncate} `;
+  return /* @__PURE__ */ import_react.default.createElement(ItemContent, {
+    "data-testid": `${import_cssClassesConstants.treeItemBlockName}-content`
+  }, /* @__PURE__ */ import_react.default.createElement(ItemValue, {
+    className
+  }, Text));
 }
-
-exports.TreeItemText = TreeItemText;
+module.exports = __toCommonJS(TreeItemText_exports);
+//# sourceMappingURL=TreeItemText.js.map

package/cjs/parts/TreeItemText.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/parts/TreeItemText.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useMemo, useContext } from 'react';\nimport Highlighter from 'react-highlight-words';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\n\nimport { ChildrenCountDisplayer } from './ChildrenCountDisplayer';\nimport { DSTreeViewPrefix, treeItemBlockName } from '../config/cssClassesConstants';\n\nimport TreeViewContext from '../TreeViewContext';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\n\nconst ItemContent = aggregatedClasses('div')(`${treeItemBlockName}-content`) as unknown as React.ComponentType<\n  React.ComponentProps<'div'>\n>;\nconst ItemValue = aggregatedClasses('span')(treeItemBlockName, 'value') as unknown as React.ComponentType<\n  React.ComponentProps<'span'>\n>;\n\n// const wrapperClassName = `${DSTreeViewPrefix}-${treeItemBlockName}-content`;\nconst classNameModifierWrapAll = `${DSTreeViewPrefix}-${treeItemBlockName}__value--wrap-all`;\nconst classNameModifierTruncate = `${DSTreeViewPrefix}-${treeItemBlockName}__value--truncate`;\n\n// eslint-disable-next-line react/prop-types\nconst CustomHighlight = ({ children }: { children: React.ReactNode }) => (\n  <mark className=\"tree-text-highlight\" data-testid=\"tree-text-highlight\">\n    {children}\n  </mark>\n);\ninterface PropsT {\n  item: DSTreeviewT.Item;\n}\nexport function TreeItemText(props: PropsT): JSX.Element {\n  const { item } = props;\n  const ctx = useContext(TreeViewContext);\n  const {\n    props: { searchQuery, showChildrenAmount, labelOverflow, nameKey },\n  } = ctx;\n\n  const Text = useMemo(() => {\n    const itemLabelText = item[nameKey] as DSTreeviewT.Item['name'];\n    if (searchQuery) {\n      if (labelOverflow === 'truncate') {\n        return (\n          <SimpleTruncatedTooltipText\n            value={\n              <>\n                <Highlighter\n                  autoEscape\n                  highlightTag={CustomHighlight}\n                  searchWords={[searchQuery]}\n                  textToHighlight={itemLabelText}\n                />\n                {showChildrenAmount ? <ChildrenCountDisplayer item={item} /> : null}\n              </>\n            }\n          />\n        );\n      }\n      return (\n        <>\n          <Highlighter\n            autoEscape\n            highlightTag={CustomHighlight}\n            searchWords={[searchQuery]}\n            textToHighlight={itemLabelText}\n          />\n          {showChildrenAmount ? <ChildrenCountDisplayer item={item} /> : null}\n        </>\n      );\n    }\n    if (labelOverflow === 'truncate') {\n      return (\n        <SimpleTruncatedTooltipText\n          value={\n            <>\n              {itemLabelText}\n              {showChildrenAmount ? <ChildrenCountDisplayer item={item} /> : null}\n            </>\n          }\n        />\n      );\n    }\n    return (\n      <>\n        {itemLabelText}\n        {showChildrenAmount ? <ChildrenCountDisplayer item={item} /> : null}\n      </>\n    );\n  }, [item, searchQuery, nameKey, showChildrenAmount, labelOverflow]);\n\n  let className = '';\n  if (labelOverflow === 'wrap-all') className += `${classNameModifierWrapAll} `;\n  if (labelOverflow === 'truncate') className += `${classNameModifierTruncate} `;\n\n  return (\n    <ItemContent data-testid={`${treeItemBlockName}-content`}>\n      <ItemValue className={className}>{Text}</ItemValue>\n    </ItemContent>\n  );\n}\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA2C;AAC3C,mCAAwB;AACxB,uCAA2C;AAC3C,2BAAkC;AAElC,oCAAuC;AACvC,iCAAoD;AAEpD,6BAA4B;AAG5B,MAAM,cAAc,4CAAkB,OAAO,GAAG;AAGhD,MAAM,YAAY,4CAAkB,QAAQ,8CAAmB;AAK/D,MAAM,2BAA2B,GAAG,+CAAoB;AACxD,MAAM,4BAA4B,GAAG,+CAAoB;AAGzD,MAAM,kBAAkB,CAAC,EAAE,eACzB,mDAAC,QAAD;AAAA,EAAM,WAAU;AAAA,EAAsB,eAAY;AAAA,GAC/C;AAME,sBAAsB,OAA4B;AACvD,QAAM,EAAE,SAAS;AACjB,QAAM,MAAM,6BAAW;AACvB,QAAM;AAAA,IACJ,OAAO,EAAE,aAAa,oBAAoB,eAAe;AAAA,MACvD;AAEJ,QAAM,OAAO,0BAAQ,MAAM;AACzB,UAAM,gBAAgB,KAAK;AAC3B,QAAI,aAAa;AACf,UAAI,kBAAkB,YAAY;AAChC,eACE,mDAAC,6DAAD;AAAA,UACE,OACE,wFACE,mDAAC,sCAAD;AAAA,YACE,YAAU;AAAA,YACV,cAAc;AAAA,YACd,aAAa,CAAC;AAAA,YACd,iBAAiB;AAAA,cAElB,qBAAqB,mDAAC,sDAAD;AAAA,YAAwB;AAAA,eAAiB;AAAA;AAAA;AAMzE,aACE,wFACE,mDAAC,sCAAD;AAAA,QACE,YAAU;AAAA,QACV,cAAc;AAAA,QACd,aAAa,CAAC;AAAA,QACd,iBAAiB;AAAA,UAElB,qBAAqB,mDAAC,sDAAD;AAAA,QAAwB;AAAA,WAAiB;AAAA;AAIrE,QAAI,kBAAkB,YAAY;AAChC,aACE,mDAAC,6DAAD;AAAA,QACE,OACE,wFACG,eACA,qBAAqB,mDAAC,sDAAD;AAAA,UAAwB;AAAA,aAAiB;AAAA;AAAA;AAMzE,WACE,wFACG,eACA,qBAAqB,mDAAC,sDAAD;AAAA,MAAwB;AAAA,SAAiB;AAAA,KAGlE,CAAC,MAAM,aAAa,SAAS,oBAAoB;AAEpD,MAAI,YAAY;AAChB,MAAI,kBAAkB;AAAY,iBAAa,GAAG;AAClD,MAAI,kBAAkB;AAAY,iBAAa,GAAG;AAElD,SACE,mDAAC,aAAD;AAAA,IAAa,eAAa,GAAG;AAAA,KAC3B,mDAAC,WAAD;AAAA,IAAW;AAAA,KAAuB;AAAA;",
+  "names": []
+}

package/cjs/parts/TreeList.js

@@ -1,141 +1,123 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _jsx = require('@babel/runtime/helpers/jsx');
-require('core-js/modules/esnext.async-iterator.map.js');
-require('core-js/modules/esnext.iterator.map.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 reactSortableHoc = require('@elliemae/react-sortable-hoc');
-var dsClassnames = require('@elliemae/ds-classnames');
-var dsCircularProgressIndicator = require('@elliemae/ds-circular-progress-indicator');
-var TreeViewContext = require('../TreeViewContext.js');
-var cssClassesConstants = require('../config/cssClassesConstants.js');
-var TreeItem = require('./TreeItem.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-
-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 treeListNoItemsBn = "".concat(cssClassesConstants.treeListBlockName, "-no-items");
-const TreeListNoItems = dsClassnames.aggregatedClasses('div', {
-  'data-testid': treeListNoItemsBn
-})(treeListNoItemsBn); // React.ComponentProps<'ul'> uses LegacyRef typings that existed pre-hook era
-// we omit the LegacyRef typings in favor of hook-era typings
-
-const TreeListWrapper = dsClassnames.aggregatedClasses('ul', {
-  'data-testid': cssClassesConstants.treeListBlockName,
-  role: 'tree'
-})(cssClassesConstants.treeListBlockName, null, _ref => {
-  let {
-    rowSize
-  } = _ref;
-  return {
-    ["rowsize-".concat(rowSize)]: rowSize
+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 TreeList_exports = {};
+__export(TreeList_exports, {
+  TreeList: () => TreeList,
+  TreeListNoItems: () => TreeListNoItems,
+  TreeListWrapper: () => TreeListWrapper,
+  treeListNoItemsBn: () => treeListNoItemsBn
 });
-const compactRowClass = "".concat(cssClassesConstants.DSTreeViewPrefix, "-tv-row-size-compact");
-const normaRowClass = "".concat(cssClassesConstants.DSTreeViewPrefix, "-tv-row-size-normal");
-const TreeList = props => {
-  const {
-    onMouseDragOverItem
-  } = props;
-  const ctx = React.useContext(TreeViewContext["default"]);
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_ds_classnames = require("@elliemae/ds-classnames");
+var import_ds_circular_progress_indicator = require("@elliemae/ds-circular-progress-indicator");
+var import_TreeViewContext = __toESM(require("../TreeViewContext"));
+var import_cssClassesConstants = require("../config/cssClassesConstants");
+var import_TreeItem = __toESM(require("./TreeItem"));
+var import_WithConditionalDnDContext = require("../hoc/WithConditionalDnDContext");
+var import_DnDTreeContext = require("../hoc/DnDTreeContext");
+const treeListNoItemsBn = `${import_cssClassesConstants.treeListBlockName}-no-items`;
+const TreeListNoItems = (0, import_ds_classnames.aggregatedClasses)("div", {
+  "data-testid": treeListNoItemsBn
+})(treeListNoItemsBn);
+const TreeListWrapper = (0, import_ds_classnames.aggregatedClasses)("ul", {
+  "data-testid": import_cssClassesConstants.treeListBlockName,
+  role: "tree"
+})(import_cssClassesConstants.treeListBlockName, null, ({ rowSize }) => ({
+  [`rowsize-${rowSize}`]: rowSize
+}));
+const compactRowClass = `${import_cssClassesConstants.DSTreeViewPrefix}-tv-row-size-compact`;
+const normaRowClass = `${import_cssClassesConstants.DSTreeViewPrefix}-tv-row-size-normal`;
+const TreeListComp = () => {
+  const ctx = (0, import_react.useContext)(import_TreeViewContext.default);
   const {
     virtualListRef,
     virtualListHelpers,
-    visibleItems,
-    withDragAndDrop,
-    props: {
-      width,
-      height,
-      rowSize,
-      noItemsPlaceholder,
-      isLoading
-    }
+    visibleItems: flattenedVisibleItems,
+    props: { width, height, rowSize, noItemsPlaceholder, isLoading }
   } = ctx;
-  const {
-    totalSize,
-    virtualItems
-  } = virtualListHelpers;
-  const className = "".concat(rowSize === 'compact' ? "".concat(compactRowClass) : "".concat(normaRowClass));
-  return /*#__PURE__*/jsxRuntime.jsxs(TreeListWrapper, {
+  const { totalSize, virtualItems } = virtualListHelpers;
+  const className = `${rowSize === "compact" ? `${compactRowClass}` : `${normaRowClass}`}`;
+  const { visibleItems } = (0, import_react.useContext)(import_DnDTreeContext.DnDTreeContext);
+  return /* @__PURE__ */ import_react.default.createElement(TreeListWrapper, {
     ref: virtualListRef,
-    className: className,
+    className,
     style: {
-      height: "".concat(typeof height === 'number' ? "".concat(height, "px") : height),
-      width: "".concat(typeof width === 'number' ? "".concat(width, "px") : width),
-      overflow: 'auto'
-    },
-    children: [isLoading ? /*#__PURE__*/_jsx__default["default"]("div", {
-      style: {
-        width: '100%',
-        height: '100%',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center'
-      }
-    }, void 0, /*#__PURE__*/_jsx__default["default"](dsCircularProgressIndicator.DSCircularProgressIndicator, {
-      size: "xl",
-      loading: isLoading,
-      showLabel: true,
-      waiting: false,
-      showTooltip: false
-    })) : null, !isLoading && virtualItems.length === 0 ? /*#__PURE__*/_jsx__default["default"](TreeListNoItems, {}, void 0, noItemsPlaceholder) : null, !isLoading && virtualItems.length !== 0 ? /*#__PURE__*/_jsx__default["default"]("div", {
-      style: {
-        height: "".concat(totalSize, "px"),
-        width: '100%',
-        position: 'relative'
-      }
-    }, void 0, virtualItems.map(virtualItem => {
-      const {
-        index,
-        measureRef,
-        start
-      } = virtualItem;
-      const item = visibleItems[index];
-      item.virtualIndex = index;
-      const {
-        id
-      } = item;
-      const style = {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: '100%',
-        transform: "translateY(".concat(start, "px)")
-      };
-      const listItemProps = {
-        key: "DS-TreeView-List-Item-".concat(id),
-        virtualItemRef: measureRef,
-        index,
-        // this is consumed by the DnD HOC
-        itemIndex: index,
-        item,
-        itemWrapperStyle: style
-      };
-      if (withDragAndDrop) return /*#__PURE__*/jsxRuntime.jsx(TreeItem.DragAndDropTreeItem, _objectSpread(_objectSpread({}, listItemProps), {}, {
-        onMouseDragOverItem: onMouseDragOverItem
-      }));
-      return /*#__PURE__*/jsxRuntime.jsx(TreeItem.TreeItem, _objectSpread({}, listItemProps));
-    })) : null]
-  });
+      height: `${typeof height === "number" ? `${height}px` : height}`,
+      width: `${typeof width === "number" ? `${width}px` : width}`,
+      overflow: "auto"
+    }
+  }, isLoading ? /* @__PURE__ */ import_react.default.createElement("div", {
+    style: {
+      width: "100%",
+      height: "100%",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    }
+  }, /* @__PURE__ */ import_react.default.createElement(import_ds_circular_progress_indicator.DSCircularProgressIndicator, {
+    size: "xl",
+    loading: isLoading,
+    showLabel: true,
+    waiting: false,
+    showTooltip: false
+  })) : null, !isLoading && virtualItems.length === 0 ? /* @__PURE__ */ import_react.default.createElement(TreeListNoItems, null, noItemsPlaceholder) : null, !isLoading && virtualItems.length !== 0 ? /* @__PURE__ */ import_react.default.createElement("div", {
+    style: {
+      height: `${totalSize}px`,
+      width: "100%",
+      position: "relative"
+    }
+  }, virtualItems.map((virtualItem) => {
+    const { index, measureRef, start } = virtualItem;
+    const item = (visibleItems || flattenedVisibleItems)[index];
+    if (!item)
+      return null;
+    item.virtualIndex = index;
+    const { id } = item;
+    const style = {
+      position: "absolute",
+      top: `${start}px`,
+      left: 0,
+      width: "100%"
+    };
+    const listItemProps = {
+      key: `DS-TreeView-List-Item-${id}`,
+      virtualItemRef: measureRef,
+      index,
+      itemIndex: index,
+      item,
+      itemWrapperStyle: style
+    };
+    return /* @__PURE__ */ import_react.default.createElement(import_TreeItem.default, {
+      ...listItemProps
+    });
+  })) : null);
 };
-const DragAndDropTreeList = reactSortableHoc.SortableContainer(TreeList);
-
-exports.DragAndDropTreeList = DragAndDropTreeList;
-exports.TreeList = TreeList;
-exports.TreeListNoItems = TreeListNoItems;
-exports.TreeListWrapper = TreeListWrapper;
-exports.treeListNoItemsBn = treeListNoItemsBn;
+const TreeList = (0, import_WithConditionalDnDContext.withConditionalDnDRowContext)(TreeListComp);
+module.exports = __toCommonJS(TreeList_exports);
+//# sourceMappingURL=TreeList.js.map

package/cjs/parts/TreeList.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/parts/TreeList.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useContext } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { DSCircularProgressIndicator } from '@elliemae/ds-circular-progress-indicator';\n\nimport TreeViewContext from '../TreeViewContext';\nimport { DSTreeViewPrefix, treeListBlockName } from '../config/cssClassesConstants';\nimport TreeItem from './TreeItem';\n\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport { withConditionalDnDRowContext } from '../hoc/WithConditionalDnDContext';\nimport { DnDTreeContext } from '../hoc/DnDTreeContext';\n\nexport const treeListNoItemsBn = `${treeListBlockName}-no-items`;\nexport const TreeListNoItems = aggregatedClasses('div', {\n  'data-testid': treeListNoItemsBn,\n})(treeListNoItemsBn) as unknown as React.ComponentType<React.ComponentProps<'div'>>;\n\n// React.ComponentProps<'ul'> uses LegacyRef typings that existed pre-hook era\n// we omit the LegacyRef typings in favor of hook-era typings\ninterface UlProps extends Omit<React.ComponentProps<'ul'>, 'ref'> {\n  ref: React.MutableRefObject<HTMLUListElement | undefined> | undefined;\n}\nexport const TreeListWrapper = aggregatedClasses('ul', {\n  'data-testid': treeListBlockName,\n  role: 'tree',\n})(treeListBlockName, null, ({ rowSize }: { rowSize: 'normal' | 'compact' }) => ({\n  [`rowsize-${rowSize}`]: rowSize,\n})) as unknown as React.ComponentType<UlProps>;\n\nconst compactRowClass = `${DSTreeViewPrefix}-tv-row-size-compact`;\nconst normaRowClass = `${DSTreeViewPrefix}-tv-row-size-normal`;\n\ninterface PropsT {\n  onMouseDragOverItem?: (opts: {\n    event: React.MouseEvent<HTMLLIElement>;\n    item: DSTreeviewT.Item;\n    itemIndex: number;\n    setIsDraggingOverThis: React.Dispatch<React.SetStateAction<boolean>>;\n    openFolderOnHoverTimeout: React.MutableRefObject<NodeJS.Timeout | null>;\n  }) => void;\n}\n\nconst TreeListComp: React.ComponentType<PropsT> = () => {\n  const ctx = useContext(TreeViewContext);\n  const {\n    virtualListRef,\n    virtualListHelpers,\n    visibleItems: flattenedVisibleItems,\n    props: { width, height, rowSize, noItemsPlaceholder, isLoading },\n  } = ctx;\n  const { totalSize, virtualItems } = virtualListHelpers;\n  const className = `${rowSize === 'compact' ? `${compactRowClass}` : `${normaRowClass}`}`;\n\n  const { visibleItems } = useContext(DnDTreeContext);\n\n  return (\n    <TreeListWrapper\n      ref={virtualListRef}\n      className={className}\n      style={{\n        height: `${typeof height === 'number' ? `${height}px` : height}`,\n        width: `${typeof width === 'number' ? `${width}px` : width}`,\n        overflow: 'auto',\n      }}\n    >\n      {isLoading ? (\n        <div\n          style={{\n            width: '100%',\n            height: '100%',\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n          }}\n        >\n          <DSCircularProgressIndicator size=\"xl\" loading={isLoading} showLabel waiting={false} showTooltip={false} />\n        </div>\n      ) : null}\n      {!isLoading && virtualItems.length === 0 ? <TreeListNoItems>{noItemsPlaceholder}</TreeListNoItems> : null}\n      {!isLoading && virtualItems.length !== 0 ? (\n        <div\n          style={{\n            height: `${totalSize}px`,\n            width: '100%',\n            position: 'relative',\n          }}\n        >\n          {virtualItems.map((virtualItem) => {\n            const { index, measureRef, start } = virtualItem;\n            const item = (visibleItems || flattenedVisibleItems)[index];\n            if (!item) return null;\n            item.virtualIndex = index;\n            const { id } = item;\n\n            const style = {\n              position: 'absolute',\n              top: `${start}px`,\n              left: 0,\n              width: '100%',\n            };\n\n            const listItemProps = {\n              key: `DS-TreeView-List-Item-${id}`,\n              virtualItemRef: measureRef,\n              index, // this is consumed by the DnD HOC\n              itemIndex: index,\n              item,\n              itemWrapperStyle: style,\n            };\n\n            return <TreeItem {...listItemProps} />;\n          })}\n        </div>\n      ) : null}\n    </TreeListWrapper>\n  );\n};\n\nexport const TreeList = withConditionalDnDRowContext(TreeListComp);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkC;AAClC,2BAAkC;AAClC,4CAA4C;AAE5C,6BAA4B;AAC5B,iCAAoD;AACpD,sBAAqB;AAGrB,uCAA6C;AAC7C,4BAA+B;AAExB,MAAM,oBAAoB,GAAG;AAC7B,MAAM,kBAAkB,4CAAkB,OAAO;AAAA,EACtD,eAAe;AAAA,GACd;AAOI,MAAM,kBAAkB,4CAAkB,MAAM;AAAA,EACrD,eAAe;AAAA,EACf,MAAM;AAAA,GACL,8CAAmB,MAAM,CAAC,EAAE,cAAkD;AAAA,GAC9E,WAAW,YAAY;AAAA;AAG1B,MAAM,kBAAkB,GAAG;AAC3B,MAAM,gBAAgB,GAAG;AAYzB,MAAM,eAA4C,MAAM;AACtD,QAAM,MAAM,6BAAW;AACvB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,OAAO,EAAE,OAAO,QAAQ,SAAS,oBAAoB;AAAA,MACnD;AACJ,QAAM,EAAE,WAAW,iBAAiB;AACpC,QAAM,YAAY,GAAG,YAAY,YAAY,GAAG,oBAAoB,GAAG;AAEvE,QAAM,EAAE,iBAAiB,6BAAW;AAEpC,SACE,mDAAC,iBAAD;AAAA,IACE,KAAK;AAAA,IACL;AAAA,IACA,OAAO;AAAA,MACL,QAAQ,GAAG,OAAO,WAAW,WAAW,GAAG,aAAa;AAAA,MACxD,OAAO,GAAG,OAAO,UAAU,WAAW,GAAG,YAAY;AAAA,MACrD,UAAU;AAAA;AAAA,KAGX,YACC,mDAAC,OAAD;AAAA,IACE,OAAO;AAAA,MACL,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA;AAAA,KAGlB,mDAAC,mEAAD;AAAA,IAA6B,MAAK;AAAA,IAAK,SAAS;AAAA,IAAW,WAAS;AAAA,IAAC,SAAS;AAAA,IAAO,aAAa;AAAA,QAElG,MACH,CAAC,aAAa,aAAa,WAAW,IAAI,mDAAC,iBAAD,MAAkB,sBAAwC,MACpG,CAAC,aAAa,aAAa,WAAW,IACrC,mDAAC,OAAD;AAAA,IACE,OAAO;AAAA,MACL,QAAQ,GAAG;AAAA,MACX,OAAO;AAAA,MACP,UAAU;AAAA;AAAA,KAGX,aAAa,IAAI,CAAC,gBAAgB;AACjC,UAAM,EAAE,OAAO,YAAY,UAAU;AACrC,UAAM,OAAQ,iBAAgB,uBAAuB;AACrD,QAAI,CAAC;AAAM,aAAO;AAClB,SAAK,eAAe;AACpB,UAAM,EAAE,OAAO;AAEf,UAAM,QAAQ;AAAA,MACZ,UAAU;AAAA,MACV,KAAK,GAAG;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA;AAGT,UAAM,gBAAgB;AAAA,MACpB,KAAK,yBAAyB;AAAA,MAC9B,gBAAgB;AAAA,MAChB;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA,kBAAkB;AAAA;AAGpB,WAAO,mDAAC,yBAAD;AAAA,SAAc;AAAA;AAAA,QAGvB;AAAA;AAKH,MAAM,WAAW,mEAA6B;",
+  "names": []
+}

package/cjs/plugins/dnd/TreeDndPlugin.js

@@ -1,44 +1,35 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _jsx = require('@babel/runtime/helpers/jsx');
-var React = require('react');
-var TreeList = require('../../parts/TreeList.js');
-var useDnDHelpers = require('../../utils/useDnDHelpers.js');
-var dndHelpers = require('../../utils/dnd-helpers.js');
-var TreeViewContext = require('../../TreeViewContext.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-
-const TreeDnD = () => {
-  const {
-    updateBeforeSortStart,
-    onSortStart,
-    onMouseDragOverItem,
-    onSortEnd
-  } = useDnDHelpers.useDnDHelpers();
-  const ctx = React.useContext(TreeViewContext["default"]);
-  const {
-    virtualListRef
-  } = ctx;
-  return /*#__PURE__*/_jsx__default["default"](TreeList.DragAndDropTreeList, {
-    useDragHandle: true,
-    transitionDuration: 0,
-    keyboardSortingTransitionDuration: 0,
-    hideSortableGhost: false,
-    disableAnimation: true,
-    updateBeforeSortStart: updateBeforeSortStart,
-    onSortStart: onSortStart,
-    onMouseDragOverItem: onMouseDragOverItem,
-    onSortEnd: onSortEnd,
-    getContainer: () => virtualListRef === null || virtualListRef === void 0 ? void 0 : virtualListRef.current,
-    keyCodes: dndHelpers.keyCodes
-  });
+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 });
 };
-const TreeDndPlugin = 'tree-dnd';
-
-exports.TreeDnD = TreeDnD;
-exports.TreeDndPlugin = TreeDndPlugin;
+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 TreeDndPlugin_exports = {};
+__export(TreeDndPlugin_exports, {
+  TreeDndPlugin: () => TreeDndPlugin
+});
+var React = __toESM(require("react"));
+const TreeDndPlugin = "tree-dnd";
+module.exports = __toCommonJS(TreeDndPlugin_exports);
+//# sourceMappingURL=TreeDndPlugin.js.map

package/cjs/plugins/dnd/TreeDndPlugin.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/plugins/dnd/TreeDndPlugin.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export const TreeDndPlugin = 'tree-dnd';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,gBAAgB;",
+  "names": []
+}

package/cjs/plugins/dnd/index.js

@@ -1,10 +1,28 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var TreeDndPlugin = require('./TreeDndPlugin.js');
-
-
-
-exports.TreeDnD = TreeDndPlugin.TreeDnD;
-exports.TreeDndPlugin = TreeDndPlugin.TreeDndPlugin;
+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 __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 dnd_exports = {};
+var React = __toESM(require("react"));
+__reExport(dnd_exports, require("./TreeDndPlugin"));
+module.exports = __toCommonJS(dnd_exports);
+//# sourceMappingURL=index.js.map