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

package/esm/TreeView.js

@@ -1,21 +1,23 @@
-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;
+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";
 function TreeView(props) {
-  const {
-    ctx
-  } = useTreeview(props);
-  return /*#__PURE__*/_jsx(TreeViewContext.Provider, {
+  const { plugins } = props;
+  const { ctx } = useTreeview(props);
+  return /* @__PURE__ */ React2.createElement(TreeViewContext.Provider, {
     value: ctx
-  }, void 0, _TreeList || (_TreeList = /*#__PURE__*/_jsx(TreeList, {})));
+  }, plugins?.includes(TreeDndPlugin) ? /* @__PURE__ */ React2.createElement(TreeDnD, null) : /* @__PURE__ */ React2.createElement(TreeList, null));
 }
+TreeView.propTypes = TreeViewPropTypes;
 const TreeViewWithSchema = describe(TreeView);
 TreeViewWithSchema.propTypes = TreeViewPropTypes;
-
-export { TreeView, TreeViewWithSchema };
+export {
+  TreeView,
+  TreeViewWithSchema
+};
+//# sourceMappingURL=TreeView.js.map

package/esm/TreeView.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/TreeView.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable max-statements */\nimport React, { WeakValidationMap } from 'react';\n\nimport { describe } from 'react-desc';\nimport { TreeViewPropTypes } from './react-desc-prop-types';\nimport TreeViewContext from './TreeViewContext';\nimport { TreeDnD, TreeDndPlugin } from './plugins/dnd';\nimport { useTreeview } from './config/useTreeview';\nimport { TreeList } from './parts/TreeList';\nimport type { DSTreeviewT } from './react-desc-prop-types';\nexport function TreeView(props: DSTreeviewT.Props) {\n  const { plugins } = props;\n\n  const { ctx } = useTreeview(props);\n\n  return (\n    <TreeViewContext.Provider value={ctx}>\n      {plugins?.includes(TreeDndPlugin) ? <TreeDnD /> : <TreeList />}\n    </TreeViewContext.Provider>\n  );\n}\n\nTreeView.propTypes = TreeViewPropTypes as WeakValidationMap<unknown>;\nconst TreeViewWithSchema = describe(TreeView);\nTreeViewWithSchema.propTypes = TreeViewPropTypes;\n\nexport { TreeViewWithSchema };\n"],
+  "mappings": "AAAA;ACEA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEO,kBAAkB,OAA0B;AACjD,QAAM,EAAE,YAAY;AAEpB,QAAM,EAAE,QAAQ,YAAY;AAE5B,SACE,qCAAC,gBAAgB,UAAjB;AAAA,IAA0B,OAAO;AAAA,KAC9B,SAAS,SAAS,iBAAiB,qCAAC,SAAD,QAAc,qCAAC,UAAD;AAAA;AAKxD,SAAS,YAAY;AACrB,MAAM,qBAAqB,SAAS;AACpC,mBAAmB,YAAY;",
+  "names": []
+}

package/esm/TreeViewContext.js

@@ -1,20 +1,16 @@
-import { createRef, createContext } from 'react';
-
-/* eslint-disable no-unused-vars */
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function noop() {}
-
+import * as React from "react";
+import { createContext, createRef } from "react";
+function noop(..._args) {
+}
 const defaultProps = {
   plugins: [],
   selection: {},
-  instanceRef: /*#__PURE__*/createRef(),
+  instanceRef: createRef(),
   isItemDisabled: () => false,
   disableIcons: false,
   fluid: false,
   isMultiSelect: false,
   isSingleSelect: false,
-  getIsDropValid: () => true,
   restrictDragAndDrop: false,
   showChildrenAmount: false,
   sortable: false,
@@ -27,20 +23,15 @@ 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: '' // 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
-
+  searchQuery: ""
 };
 const defaultRelativeMouseCoord = {
   isBefore: false,
@@ -55,21 +46,28 @@ const defaultRelativeMouseCoord = {
 const defaultContext = {
   props: defaultProps,
   visibleItems: [],
-  flattenedItems: [],
   withRadioChecks: false,
   withCheckboxChecks: false,
   withDragAndDrop: false,
+  relativeMouseCord: defaultRelativeMouseCoord,
+  setRelativeMouseCord: noop,
   triggerTreeRerender: noop,
-  tree: undefined,
-  treeRoot: undefined,
+  tree: void 0,
+  treeRoot: void 0,
   virtualListHelpers: {
     virtualItems: [],
     totalSize: 0,
     scrollToOffset: noop,
     scrollToIndex: noop
   },
-  virtualListRef: undefined,
-  uniqueTreeViewUUID: '',
+  virtualListRef: void 0,
+  isDragging: false,
+  setIsDragging: noop,
+  isKeyboardDragging: false,
+  setIsKeyboardDragging: noop,
+  draggedItem: null,
+  setDraggedItem: noop,
+  uniqueTreeViewUUID: "",
   selectedItem: null,
   setSelectedItem: noop,
   focusedItem: null,
@@ -85,8 +83,11 @@ const defaultContext = {
   handleExpandGroup: noop,
   updateUserExpandedState: noop
 };
-/** Context for cross component communication */
-
-const TreeViewContext = /*#__PURE__*/createContext(defaultContext);
-
-export { TreeViewContext as default, defaultProps, defaultRelativeMouseCoord };
+const TreeViewContext = createContext(defaultContext);
+var TreeViewContext_default = TreeViewContext;
+export {
+  TreeViewContext_default as default,
+  defaultProps,
+  defaultRelativeMouseCoord
+};
+//# sourceMappingURL=TreeViewContext.js.map

package/esm/TreeViewContext.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/TreeViewContext.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-unused-vars */\nimport { createContext, createRef } from 'react';\nimport type { DSTreeviewT } from './react-desc-prop-types';\nimport type { DSTreeviewInternalsT } from './sharedTypes';\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nfunction noop<T extends unknown[]>(..._args: T): void {}\n\nexport const defaultProps = {\n  plugins: [],\n  selection: {},\n  instanceRef: createRef(),\n  isItemDisabled: () => false,\n  disableIcons: false,\n  fluid: false,\n  isMultiSelect: false,\n  isSingleSelect: false,\n  restrictDragAndDrop: false,\n  showChildrenAmount: false,\n  sortable: false,\n  isLoading: false,\n  highlightOnlyQuery: false,\n  onItemClick: noop,\n  onItemFocus: noop,\n  onVisibleItemsChange: noop,\n  onOrderChange: noop,\n  onSelectionChange: noop,\n  onExpandChange: noop,\n  onInstanceRefInitialized: noop,\n  rowSize: 'normal',\n  labelOverflow: 'wrap',\n  noItemsPlaceholder: 'No items found',\n  nameKey: 'name',\n  width: '100%',\n  height: '100%',\n  groupIcon: null,\n  itemIcon: null,\n  searchQuery: '',\n  // workaround on the typings over the fact that\n  // when we instantiate the context we can't have all the props\n  // we only have a part of them but the final typings will include missing props\n  // this is safe to do because\n  // we will \"mergeWithDefaults\" + \"validatePropTypes\" when we do instantiate the context\n} as unknown as DSTreeviewT.Props;\n\nexport const defaultRelativeMouseCoord = {\n  isBefore: false,\n  isAfter: false,\n  isValid: true,\n  item: null,\n  x: null,\n  y: null,\n  relativeElementDOMRect: null,\n  relativeElementIndex: null,\n};\n\nconst defaultContext: DSTreeviewInternalsT.CTX = {\n  props: defaultProps,\n  visibleItems: [],\n  withRadioChecks: false,\n  withCheckboxChecks: false,\n  withDragAndDrop: false,\n  relativeMouseCord: defaultRelativeMouseCoord,\n  setRelativeMouseCord: noop,\n  triggerTreeRerender: noop,\n  tree: undefined,\n  treeRoot: undefined,\n  virtualListHelpers: {\n    virtualItems: [],\n    totalSize: 0,\n    scrollToOffset: noop,\n    scrollToIndex: noop,\n  },\n  virtualListRef: undefined,\n  isDragging: false,\n  setIsDragging: noop,\n  isKeyboardDragging: false,\n  setIsKeyboardDragging: noop,\n  draggedItem: null,\n  setDraggedItem: noop,\n  uniqueTreeViewUUID: '',\n  selectedItem: null,\n  setSelectedItem: noop,\n  focusedItem: null,\n  setFocusedItem: noop,\n  selectedCheckboxes: {},\n  setSelectedCheckboxes: noop,\n  expandedGroups: {},\n  setExpandedGroups: noop,\n  latestToggledItem: null,\n  setLatestToggledItem: noop,\n  hoverItem: null,\n  setHoverItem: noop,\n  handleExpandGroup: noop,\n  updateUserExpandedState: noop,\n};\n\n/** Context for cross component communication */\nconst TreeViewContext = createContext(defaultContext);\n\nexport default TreeViewContext;\n"],
+  "mappings": "AAAA;ACCA;AAKA,iBAAsC,OAAgB;AAAA;AAE/C,MAAM,eAAe;AAAA,EAC1B,SAAS;AAAA,EACT,WAAW;AAAA,EACX,aAAa;AAAA,EACb,gBAAgB,MAAM;AAAA,EACtB,cAAc;AAAA,EACd,OAAO;AAAA,EACP,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,UAAU;AAAA,EACV,WAAW;AAAA,EACX,oBAAoB;AAAA,EACpB,aAAa;AAAA,EACb,aAAa;AAAA,EACb,sBAAsB;AAAA,EACtB,eAAe;AAAA,EACf,mBAAmB;AAAA,EACnB,gBAAgB;AAAA,EAChB,0BAA0B;AAAA,EAC1B,SAAS;AAAA,EACT,eAAe;AAAA,EACf,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,UAAU;AAAA,EACV,aAAa;AAAA;AAQR,MAAM,4BAA4B;AAAA,EACvC,UAAU;AAAA,EACV,SAAS;AAAA,EACT,SAAS;AAAA,EACT,MAAM;AAAA,EACN,GAAG;AAAA,EACH,GAAG;AAAA,EACH,wBAAwB;AAAA,EACxB,sBAAsB;AAAA;AAGxB,MAAM,iBAA2C;AAAA,EAC/C,OAAO;AAAA,EACP,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,oBAAoB;AAAA,EACpB,iBAAiB;AAAA,EACjB,mBAAmB;AAAA,EACnB,sBAAsB;AAAA,EACtB,qBAAqB;AAAA,EACrB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,oBAAoB;AAAA,IAClB,cAAc;AAAA,IACd,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,eAAe;AAAA;AAAA,EAEjB,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,oBAAoB;AAAA,EACpB,uBAAuB;AAAA,EACvB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,oBAAoB;AAAA,EACpB,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,oBAAoB;AAAA,EACpB,uBAAuB;AAAA,EACvB,gBAAgB;AAAA,EAChB,mBAAmB;AAAA,EACnB,mBAAmB;AAAA,EACnB,sBAAsB;AAAA,EACtB,WAAW;AAAA,EACX,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,yBAAyB;AAAA;AAI3B,MAAM,kBAAkB,cAAc;AAEtC,IAAO,0BAAQ;",
+  "names": []
+}

package/esm/config/cssClassesConstants.js

@@ -1,6 +1,12 @@
-const DSTreeViewPrefix = 'em-ds';
-const treeItemBlockName = 'tree-item';
-const treeListBlockName = 'tree-list';
-const treeListNoItemsBn = "".concat(treeListBlockName, "-no-items");
-
-export { DSTreeViewPrefix, treeItemBlockName, treeListBlockName, treeListNoItemsBn };
+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

package/esm/config/cssClassesConstants.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/cssClassesConstants.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSTreeViewPrefix = 'em-ds';\nexport const treeItemBlockName = 'tree-item';\nexport const treeListBlockName = 'tree-list';\nexport const treeListNoItemsBn = `${treeListBlockName}-no-items`;\n"],
+  "mappings": "AAAA;ACAO,MAAM,mBAAmB;AACzB,MAAM,oBAAoB;AAC1B,MAAM,oBAAoB;AAC1B,MAAM,oBAAoB,GAAG;",
+  "names": []
+}

package/esm/config/useTreeview.js

@@ -1,34 +1,28 @@
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.filter.js';
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import { useRef, useState, useCallback, useMemo, useEffect } from 'react';
-import { useVirtual } from 'react-virtual';
-import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
-import { v4 } from 'uuid';
-import { TreeViewPropTypes } from '../react-desc-prop-types.js';
-import { defaultProps } from '../TreeViewContext.js';
-import { TreeDndPlugin } from '../plugins/dnd/TreeDndPlugin.js';
-import { useTree } from '../utils/useTree.js';
-import { toggleItemExpand, useNotifyExpandedChange } from '../utils/group-expands-helpers.js';
-import { useInstanceRefActions } from '../utils/useInstanceRefActions.js';
-import { useGlobalToggleAllExpandShortcut } from '../utils/keyboard-helpers.js';
-
-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(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 useTreeview = props => {
+import * as React from "react";
+import { useState, useRef, useEffect, useMemo, useCallback } from "react";
+import { useVirtual } from "react-virtual";
+import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
+import { v4 as uuidv4 } from "uuid";
+import { TreeViewPropTypes } from "../react-desc-prop-types";
+import { defaultRelativeMouseCoord, defaultProps } from "../TreeViewContext";
+import { TreeDndPlugin } from "../plugins/dnd";
+import { useTree } from "../utils/useTree";
+import { useNotifyExpandedChange, toggleItemExpand } from "../utils/group-expands-helpers";
+import { useInstanceRefActions } from "../utils/useInstanceRefActions";
+import { useGlobalToggleAllExpandShortcut } from "../utils/keyboard-helpers";
+const useTreeview = (props) => {
   const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
   useValidateTypescriptPropTypes(propsWithDefault, TreeViewPropTypes);
   const defaultActions = {
     actions: {
-      toggleExpandAll: () => {},
-      scrollTo: () => {},
-      setSelectedItemByVirtualIndex: () => {},
-      setFocusedItemByVirtualIndex: () => {}
+      toggleExpandAll: () => {
+      },
+      scrollTo: () => {
+      },
+      setSelectedItemByVirtualIndex: () => {
+      },
+      setFocusedItemByVirtualIndex: () => {
+      }
     }
   };
   const treeRef = useRef(defaultActions);
@@ -42,44 +36,48 @@ const useTreeview = props => {
     selection,
     onInstanceRefInitialized
   } = propsWithDefault;
-  const [uniqueTreeViewUUID] = useState(v4());
+  const [isDragging, setIsDragging] = useState(false);
+  const [isKeyboardDragging, setIsKeyboardDragging] = useState(false);
+  const [relativeMouseCord, setRelativeMouseCord] = useState(defaultRelativeMouseCoord);
+  const [uniqueTreeViewUUID] = useState(uuidv4());
+  const [draggedItem, setDraggedItem] = useState(null);
   const [hoverItem, setHoverItem] = useState(null);
   const [latestToggledItem, setLatestToggledItem] = useState(null);
   const [selectedItem, setSelectedItem] = useState(null);
   const [focusedItem, setFocusedItem] = useState(null);
-  const [selectedCheckboxes, setSelectedCheckboxes] = useState(_objectSpread({}, selection));
+  const [selectedCheckboxes, setSelectedCheckboxes] = useState({
+    ...selection
+  });
   const [expandedGroups, setExpandedGroups] = useState({});
-  const {
-    visibleItems,
-    flattenedItems,
-    tree,
-    treeRoot,
-    triggerTreeRerender,
-    updateUserExpandedState
-  } = useTree(data, propsWithDefault, {
+  const { visibleItems, tree, treeRoot, triggerTreeRerender, updateUserExpandedState } = useTree(data, propsWithDefault, {
     setExpandedGroups
   });
-  const virtualListRef = useRef(); // estimateSize should not be really required given what was stated on
-  // https://github.com/tannerlinsley/react-virtual/issues/23
-
+  const virtualListRef = useRef();
   const virtualListHelpers = useVirtual({
     size: visibleItems.length,
     parentRef: virtualListRef,
     overscan: 15
   });
-  const withDragAndDrop = !!(plugins !== null && plugins !== void 0 && plugins.includes(TreeDndPlugin) && onOrderChange);
+  const withDragAndDrop = !!(plugins?.includes(TreeDndPlugin) && onOrderChange);
   const withRadioChecks = isSingleSelect && !isMultiSelect;
   const withCheckboxChecks = !isSingleSelect && isMultiSelect;
   const handleExpandGroup = useCallback(toggleItemExpand, []);
   const ctx = useMemo(() => ({
     props: propsWithDefault,
+    setRelativeMouseCord,
+    relativeMouseCord,
     virtualListHelpers,
     virtualListRef,
     tree,
     treeRoot,
     visibleItems,
-    flattenedItems,
     triggerTreeRerender,
+    isDragging,
+    setIsDragging,
+    isKeyboardDragging,
+    setIsKeyboardDragging,
+    draggedItem,
+    setDraggedItem,
     withRadioChecks,
     withCheckboxChecks,
     withDragAndDrop,
@@ -98,22 +96,41 @@ const useTreeview = props => {
     setHoverItem,
     handleExpandGroup,
     updateUserExpandedState
-  }), [propsWithDefault, virtualListHelpers, tree, treeRoot, visibleItems, flattenedItems, triggerTreeRerender, withRadioChecks, withCheckboxChecks, withDragAndDrop, uniqueTreeViewUUID, selectedCheckboxes, selectedItem, expandedGroups, latestToggledItem, focusedItem, hoverItem, handleExpandGroup, updateUserExpandedState]); // this hooks can't use the context because the context provider doesn't wrap this
-  // as such we manually pass the second parameter as fit
-
-  if (instanceRef) instanceRef.current = treeRef.current;
+  }), [
+    draggedItem,
+    expandedGroups,
+    focusedItem,
+    handleExpandGroup,
+    hoverItem,
+    isDragging,
+    isKeyboardDragging,
+    latestToggledItem,
+    propsWithDefault,
+    relativeMouseCord,
+    selectedCheckboxes,
+    selectedItem,
+    tree,
+    treeRoot,
+    triggerTreeRerender,
+    uniqueTreeViewUUID,
+    virtualListHelpers,
+    visibleItems,
+    withCheckboxChecks,
+    withDragAndDrop,
+    withRadioChecks,
+    updateUserExpandedState
+  ]);
+  if (instanceRef)
+    instanceRef.current = treeRef.current;
   useInstanceRefActions(treeRef.current, ctx);
   useGlobalToggleAllExpandShortcut(treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState);
-  useNotifyExpandedChange(propsWithDefault, ctx); // this is an horrible hack.
-  // this is required because there is no "on rendered" react-way to check if every children has finished rendering
-  // this should be working for now, in the future we may want to review this for a better solution
-
+  useNotifyExpandedChange(propsWithDefault, ctx);
   useEffect(() => {
-    setTimeout(() => onInstanceRefInitialized(treeRef), 100); // eslint-disable-next-line react-hooks/exhaustive-deps
+    setTimeout(() => onInstanceRefInitialized(treeRef), 100);
   }, []);
-  return useMemo(() => ({
-    ctx
-  }), [ctx]);
+  return useMemo(() => ({ ctx }), [ctx]);
+};
+export {
+  useTreeview
 };
-
-export { useTreeview };
+//# sourceMappingURL=useTreeview.js.map

package/esm/config/useTreeview.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useTreeview.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable max-statements */\nimport { useState, useRef, useEffect, useMemo, useCallback } from 'react';\nimport { useVirtual } from 'react-virtual';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { TreeViewPropTypes } from '../react-desc-prop-types';\nimport { defaultRelativeMouseCoord, defaultProps } from '../TreeViewContext';\nimport { TreeDndPlugin } from '../plugins/dnd';\nimport { useTree } from '../utils/useTree';\nimport { useNotifyExpandedChange, toggleItemExpand } from '../utils/group-expands-helpers';\nimport { useInstanceRefActions } from '../utils/useInstanceRefActions';\nimport { useGlobalToggleAllExpandShortcut } from '../utils/keyboard-helpers';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport type { DSTreeviewInternalsT } from '../sharedTypes';\n\ntype UseTreeviewT = (props: DSTreeviewT.Props) => { ctx: DSTreeviewInternalsT.CTX };\n\nexport const useTreeview: UseTreeviewT = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSTreeviewT.Props>(props, defaultProps);\n  useValidateTypescriptPropTypes<DSTreeviewT.Props>(propsWithDefault, TreeViewPropTypes);\n  const defaultActions = {\n    actions: {\n      toggleExpandAll: () => {},\n      scrollTo: () => {},\n      setSelectedItemByVirtualIndex: () => {},\n      setFocusedItemByVirtualIndex: () => {},\n    },\n  } as unknown as DSTreeviewT.InstanceRef;\n  const treeRef = useRef(defaultActions);\n  const {\n    data,\n    plugins,\n    onOrderChange,\n    isMultiSelect,\n    isSingleSelect,\n    instanceRef,\n    selection,\n    onInstanceRefInitialized,\n  } = propsWithDefault;\n  const [isDragging, setIsDragging] = useState(false);\n  const [isKeyboardDragging, setIsKeyboardDragging] = useState(false);\n  const [relativeMouseCord, setRelativeMouseCord] =\n    useState<DSTreeviewInternalsT.MouseCoord>(defaultRelativeMouseCoord);\n  const [uniqueTreeViewUUID] = useState(uuidv4());\n  const [draggedItem, setDraggedItem] = useState<DSTreeviewT.Item | null>(null);\n  const [hoverItem, setHoverItem] = useState<DSTreeviewT.Item | null>(null);\n  const [latestToggledItem, setLatestToggledItem] = useState<DSTreeviewT.Item | null>(null);\n  const [selectedItem, setSelectedItem] = useState<DSTreeviewT.Item | null>(null);\n  const [focusedItem, setFocusedItem] = useState<DSTreeviewT.Item | null>(null);\n  const [selectedCheckboxes, setSelectedCheckboxes] = useState({\n    ...selection,\n  });\n  const [expandedGroups, setExpandedGroups] = useState<DSTreeviewT.ExpandedItems>({});\n  const { visibleItems, tree, treeRoot, triggerTreeRerender, updateUserExpandedState } = useTree(\n    data,\n    propsWithDefault,\n    {\n      setExpandedGroups,\n    },\n  );\n\n  const virtualListRef = useRef<HTMLUListElement>();\n  // estimateSize should not be really required given what was stated on\n  // https://github.com/tannerlinsley/react-virtual/issues/23\n\n  const virtualListHelpers = useVirtual({\n    size: visibleItems.length,\n    parentRef: virtualListRef,\n    overscan: 15,\n  });\n\n  const withDragAndDrop = !!(plugins?.includes(TreeDndPlugin) && onOrderChange);\n  const withRadioChecks = isSingleSelect && !isMultiSelect;\n  const withCheckboxChecks = !isSingleSelect && isMultiSelect;\n\n  const handleExpandGroup = useCallback(toggleItemExpand, []);\n\n  const ctx: DSTreeviewInternalsT.CTX = useMemo(\n    () => ({\n      props: propsWithDefault,\n      setRelativeMouseCord,\n      relativeMouseCord,\n      virtualListHelpers,\n      virtualListRef,\n      tree,\n      treeRoot,\n      visibleItems,\n      triggerTreeRerender,\n      isDragging,\n      setIsDragging,\n      isKeyboardDragging,\n      setIsKeyboardDragging,\n      draggedItem,\n      setDraggedItem,\n      withRadioChecks,\n      withCheckboxChecks,\n      withDragAndDrop,\n      uniqueTreeViewUUID,\n      selectedCheckboxes,\n      setSelectedCheckboxes,\n      selectedItem,\n      setSelectedItem,\n      expandedGroups,\n      setExpandedGroups,\n      latestToggledItem,\n      setLatestToggledItem,\n      focusedItem,\n      setFocusedItem,\n      hoverItem,\n      setHoverItem,\n      handleExpandGroup,\n      updateUserExpandedState,\n    }),\n    [\n      draggedItem,\n      expandedGroups,\n      focusedItem,\n      handleExpandGroup,\n      hoverItem,\n      isDragging,\n      isKeyboardDragging,\n      latestToggledItem,\n      propsWithDefault,\n      relativeMouseCord,\n      selectedCheckboxes,\n      selectedItem,\n      tree,\n      treeRoot,\n      triggerTreeRerender,\n      uniqueTreeViewUUID,\n      virtualListHelpers,\n      visibleItems,\n      withCheckboxChecks,\n      withDragAndDrop,\n      withRadioChecks,\n      updateUserExpandedState,\n    ],\n  );\n  // this hooks can't use the context because the context provider doesn't wrap this\n  // as such we manually pass the second parameter as fit\n  if (instanceRef) instanceRef.current = treeRef.current;\n  useInstanceRefActions(treeRef.current, ctx);\n  useGlobalToggleAllExpandShortcut(treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState);\n  useNotifyExpandedChange(propsWithDefault, ctx);\n\n  // this is an horrible hack.\n  // this is required because there is no \"on rendered\" react-way to check if every children has finished rendering\n  // this should be working for now, in the future we may want to review this for a better solution\n  useEffect(() => {\n    setTimeout(() => onInstanceRefInitialized(treeRef), 100);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return useMemo(() => ({ ctx }), [ctx]);\n};\n"],
+  "mappings": "AAAA;ACEA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAMO,MAAM,cAA4B,CAAC,UAAU;AAClD,QAAM,mBAAmB,6BAAgD,OAAO;AAChF,iCAAkD,kBAAkB;AACpE,QAAM,iBAAiB;AAAA,IACrB,SAAS;AAAA,MACP,iBAAiB,MAAM;AAAA;AAAA,MACvB,UAAU,MAAM;AAAA;AAAA,MAChB,+BAA+B,MAAM;AAAA;AAAA,MACrC,8BAA8B,MAAM;AAAA;AAAA;AAAA;AAGxC,QAAM,UAAU,OAAO;AACvB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE;AACJ,QAAM,CAAC,YAAY,iBAAiB,SAAS;AAC7C,QAAM,CAAC,oBAAoB,yBAAyB,SAAS;AAC7D,QAAM,CAAC,mBAAmB,wBACxB,SAA0C;AAC5C,QAAM,CAAC,sBAAsB,SAAS;AACtC,QAAM,CAAC,aAAa,kBAAkB,SAAkC;AACxE,QAAM,CAAC,WAAW,gBAAgB,SAAkC;AACpE,QAAM,CAAC,mBAAmB,wBAAwB,SAAkC;AACpF,QAAM,CAAC,cAAc,mBAAmB,SAAkC;AAC1E,QAAM,CAAC,aAAa,kBAAkB,SAAkC;AACxE,QAAM,CAAC,oBAAoB,yBAAyB,SAAS;AAAA,OACxD;AAAA;AAEL,QAAM,CAAC,gBAAgB,qBAAqB,SAAoC;AAChF,QAAM,EAAE,cAAc,MAAM,UAAU,qBAAqB,4BAA4B,QACrF,MACA,kBACA;AAAA,IACE;AAAA;AAIJ,QAAM,iBAAiB;AAIvB,QAAM,qBAAqB,WAAW;AAAA,IACpC,MAAM,aAAa;AAAA,IACnB,WAAW;AAAA,IACX,UAAU;AAAA;AAGZ,QAAM,kBAAkB,CAAC,CAAE,UAAS,SAAS,kBAAkB;AAC/D,QAAM,kBAAkB,kBAAkB,CAAC;AAC3C,QAAM,qBAAqB,CAAC,kBAAkB;AAE9C,QAAM,oBAAoB,YAAY,kBAAkB;AAExD,QAAM,MAAgC,QACpC,MAAO;AAAA,IACL,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAEF;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAKJ,MAAI;AAAa,gBAAY,UAAU,QAAQ;AAC/C,wBAAsB,QAAQ,SAAS;AACvC,mCAAiC,UAAU,qBAAqB,sBAAsB;AACtF,0BAAwB,kBAAkB;AAK1C,YAAU,MAAM;AACd,eAAW,MAAM,yBAAyB,UAAU;AAAA,KAEnD;AAEH,SAAO,QAAQ,MAAO,GAAE,QAAQ,CAAC;AAAA;",
+  "names": []
+}

package/esm/index.js

@@ -1,9 +1,8 @@
-export { TreeView, TreeViewWithSchema } from './TreeView.js';
-export { TreeDndPlugin } from './plugins/dnd/TreeDndPlugin.js';
-export { TreeRovingPlugin } from './plugins/roving/TreeRovingPlugin.js';
-export { SelectablePluginTree } from './plugins/selectable/SelectablePluginTree.js';
-export { TreeToolbarPlugin } from './plugins/toolbar/TreeToolbarPlugin.js';
-export { TreePluginList } from './plugins/tree/TreeDataPlugin.js';
-export { TreeVirtualizationPlugin } from './plugins/virtualization/TreeVirtualizationPlugin.js';
-export { SearchableTreePlugin } from './plugins/searchable/SearchableTreePlugin.js';
-export { TreeViewSearchBar } from './related-components/TreeViewSearchBar.js';
+import * as React from "react";
+export * from "./TreeView";
+export * from "./plugins";
+import { TreeViewSearchBar } from "./related-components/TreeViewSearchBar";
+export {
+  TreeViewSearchBar
+};
+//# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './TreeView';\nexport * from './plugins';\n\nexport { TreeViewSearchBar } from './related-components/TreeViewSearchBar';\n"],
+  "mappings": "AAAA;ACAA;AACA;AAEA;",
+  "names": []
+}

package/esm/parts/CheckboxSelectable.js

@@ -1,71 +1,58 @@
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.filter.js';
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import { useContext, useCallback, useMemo } from 'react';
-import { DSCheckbox } from '@elliemae/ds-form';
-import styled from 'styled-components';
-import TreeViewContext from '../TreeViewContext.js';
-import { toggleCheckboxItem } from '../utils/selectable-helper.js';
-import { filterObject } from '../utils/object-helpers.js';
-
-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(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 StyledCheckboxWrapper = /*#__PURE__*/styled.span.withConfig({
-  componentId: "sc-1tyhs3t-0"
-})(["padding-top:3px;"]);
-
+import * as React from "react";
+import React2, { useContext, useCallback, useMemo } from "react";
+import { DSCheckbox } from "@elliemae/ds-form";
+import styled from "styled-components";
+import TreeViewContext from "../TreeViewContext";
+import { toggleCheckboxItem } from "../utils/selectable-helper";
+import { filterObject } from "../utils/object-helpers";
+const StyledCheckboxWrapper = styled.span`
+  padding-top: 3px;
+`;
 function CheckboxSelectable(props) {
-  const {
-    item,
-    itemIndex
-  } = props;
-  const {
-    id
-  } = item;
+  const { item, itemIndex } = props;
+  const { id } = item;
   const ctx = useContext(TreeViewContext);
   const {
-    props: {
-      onSelectionChange,
-      isItemDisabled
-    },
-    virtualListHelpers: {
-      scrollToIndex
-    },
+    props: { onSelectionChange, isItemDisabled },
+    virtualListHelpers: { scrollToIndex },
     triggerTreeRerender,
     selectedCheckboxes,
     setSelectedCheckboxes
   } = ctx;
   const onCheckboxChange = useCallback(() => {
     const newSelections = toggleCheckboxItem(item);
-    const newSelectionHasmap = filterObject(_objectSpread(_objectSpread({}, selectedCheckboxes), newSelections), value => value !== false);
+    const newSelectionHasmap = filterObject({ ...selectedCheckboxes, ...newSelections }, (value) => value !== false);
     setSelectedCheckboxes(newSelectionHasmap);
     triggerTreeRerender();
     const indexAndScrollTo = {
       scrollToItem: () => {
-        if (typeof item.virtualIndex === 'number') scrollToIndex(item.virtualIndex);
+        if (typeof item.virtualIndex === "number")
+          scrollToIndex(item.virtualIndex);
       },
       itemIndex
     };
-    if (onSelectionChange) onSelectionChange(newSelectionHasmap, item, indexAndScrollTo);
-  }, [item, triggerTreeRerender, onSelectionChange, itemIndex, scrollToIndex, selectedCheckboxes, setSelectedCheckboxes]);
+    if (onSelectionChange)
+      onSelectionChange(newSelectionHasmap, item, indexAndScrollTo);
+  }, [
+    item,
+    triggerTreeRerender,
+    onSelectionChange,
+    itemIndex,
+    scrollToIndex,
+    selectedCheckboxes,
+    setSelectedCheckboxes
+  ]);
   const isChecked = useMemo(() => {
-    if (selectedCheckboxes[id] === 'mixed') {
-      return 'mixed';
+    if (selectedCheckboxes[id] === "mixed") {
+      return "mixed";
     }
-
     if (selectedCheckboxes[id] === true) {
       return true;
     }
-
     return false;
   }, [selectedCheckboxes, id]);
   const isDisabled = useMemo(() => isItemDisabled(item), [item, isItemDisabled]);
-  return /*#__PURE__*/_jsx(StyledCheckboxWrapper, {}, void 0, /*#__PURE__*/_jsx(DSCheckbox, {
+  return /* @__PURE__ */ React2.createElement(StyledCheckboxWrapper, null, /* @__PURE__ */ React2.createElement(DSCheckbox, {
     checked: isChecked,
     disabled: isDisabled,
     className: "em-ds-tree-item-checkbox",
@@ -74,5 +61,8 @@ function CheckboxSelectable(props) {
     tabIndex: "0"
   }));
 }
-
-export { CheckboxSelectable as default };
+var CheckboxSelectable_default = CheckboxSelectable;
+export {
+  CheckboxSelectable_default as default
+};
+//# sourceMappingURL=CheckboxSelectable.js.map

package/esm/parts/CheckboxSelectable.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/CheckboxSelectable.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback, useMemo } from 'react';\nimport { DSCheckbox } from '@elliemae/ds-form';\nimport styled from 'styled-components';\nimport TreeViewContext from '../TreeViewContext';\nimport { toggleCheckboxItem } from '../utils/selectable-helper';\nimport { filterObject } from '../utils/object-helpers';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nconst StyledCheckboxWrapper = styled.span`\n  padding-top: 3px;\n`;\ninterface PropsT {\n  item: DSTreeviewT.Item;\n  itemIndex: number;\n}\nfunction CheckboxSelectable(props: PropsT): JSX.Element | null {\n  const { item, itemIndex } = props;\n  const { id } = item;\n\n  const ctx = useContext(TreeViewContext);\n  const {\n    props: { onSelectionChange, isItemDisabled },\n    virtualListHelpers: { scrollToIndex },\n    triggerTreeRerender,\n    selectedCheckboxes,\n    setSelectedCheckboxes,\n  } = ctx;\n\n  const onCheckboxChange = useCallback(() => {\n    const newSelections = toggleCheckboxItem(item);\n    const newSelectionHasmap = filterObject<DSTreeviewT.SelectionState>(\n      { ...selectedCheckboxes, ...newSelections },\n      (value) => value !== false,\n    );\n    setSelectedCheckboxes(newSelectionHasmap);\n    triggerTreeRerender();\n\n    const indexAndScrollTo = {\n      scrollToItem: () => {\n        if (typeof item.virtualIndex === 'number') scrollToIndex(item.virtualIndex);\n      },\n      itemIndex,\n    };\n    if (onSelectionChange) onSelectionChange(newSelectionHasmap, item, indexAndScrollTo);\n  }, [\n    item,\n    triggerTreeRerender,\n    onSelectionChange,\n    itemIndex,\n    scrollToIndex,\n    selectedCheckboxes,\n    setSelectedCheckboxes,\n  ]);\n  const isChecked = useMemo(() => {\n    if (selectedCheckboxes[id] === 'mixed') {\n      return 'mixed' as const;\n    }\n    if (selectedCheckboxes[id] === true) {\n      return true;\n    }\n    return false;\n  }, [selectedCheckboxes, id]);\n\n  const isDisabled = useMemo(() => isItemDisabled(item), [item, isItemDisabled]);\n\n  return (\n    <StyledCheckboxWrapper>\n      <DSCheckbox\n        checked={isChecked}\n        disabled={isDisabled}\n        className=\"em-ds-tree-item-checkbox\"\n        data-testid=\"tree-item-checkbox\"\n        onChange={onCheckboxChange}\n        tabIndex=\"0\"\n      />\n    </StyledCheckboxWrapper>\n  );\n}\n\nexport default CheckboxSelectable;\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,wBAAwB,OAAO;AAAA;AAAA;AAOrC,4BAA4B,OAAmC;AAC7D,QAAM,EAAE,MAAM,cAAc;AAC5B,QAAM,EAAE,OAAO;AAEf,QAAM,MAAM,WAAW;AACvB,QAAM;AAAA,IACJ,OAAO,EAAE,mBAAmB;AAAA,IAC5B,oBAAoB,EAAE;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,MACE;AAEJ,QAAM,mBAAmB,YAAY,MAAM;AACzC,UAAM,gBAAgB,mBAAmB;AACzC,UAAM,qBAAqB,aACzB,KAAK,uBAAuB,iBAC5B,CAAC,UAAU,UAAU;AAEvB,0BAAsB;AACtB;AAEA,UAAM,mBAAmB;AAAA,MACvB,cAAc,MAAM;AAClB,YAAI,OAAO,KAAK,iBAAiB;AAAU,wBAAc,KAAK;AAAA;AAAA,MAEhE;AAAA;AAEF,QAAI;AAAmB,wBAAkB,oBAAoB,MAAM;AAAA,KAClE;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAEF,QAAM,YAAY,QAAQ,MAAM;AAC9B,QAAI,mBAAmB,QAAQ,SAAS;AACtC,aAAO;AAAA;AAET,QAAI,mBAAmB,QAAQ,MAAM;AACnC,aAAO;AAAA;AAET,WAAO;AAAA,KACN,CAAC,oBAAoB;AAExB,QAAM,aAAa,QAAQ,MAAM,eAAe,OAAO,CAAC,MAAM;AAE9D,SACE,qCAAC,uBAAD,MACE,qCAAC,YAAD;AAAA,IACE,SAAS;AAAA,IACT,UAAU;AAAA,IACV,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,UAAU;AAAA,IACV,UAAS;AAAA;AAAA;AAMjB,IAAO,6BAAQ;",
+  "names": []
+}

package/esm/parts/ChildrenCountDisplayer.js

@@ -1,22 +1,18 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'react';
-import { DSTreeViewPrefix, treeItemBlockName } from '../config/cssClassesConstants.js';
-
-const className = "".concat(DSTreeViewPrefix, "-").concat(treeItemBlockName, "-children-count-displayer");
-const ChildrenCountDisplayer = props => {
-  const {
-    item
-  } = props;
-  const {
-    isGroup,
-    children
-  } = item;
-  if (!isGroup) return null; // return ` | ${children.length} Items`;
-
-  return /*#__PURE__*/_jsx("span", {
+import * as React from "react";
+import React2 from "react";
+import { DSTreeViewPrefix, treeItemBlockName } from "../config/cssClassesConstants";
+const className = `${DSTreeViewPrefix}-${treeItemBlockName}-children-count-displayer`;
+const ChildrenCountDisplayer = (props) => {
+  const { item } = props;
+  const { isGroup, children } = item;
+  if (!isGroup)
+    return null;
+  return /* @__PURE__ */ React2.createElement("span", {
     "data-testid": "tree-item-children-count-displayer",
-    className: className
-  }, void 0, " | ".concat(children.length, " Items"));
+    className
+  }, ` | ${children.length} Items`);
 };
-
-export { ChildrenCountDisplayer };
+export {
+  ChildrenCountDisplayer
+};
+//# sourceMappingURL=ChildrenCountDisplayer.js.map

package/esm/parts/ChildrenCountDisplayer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/ChildrenCountDisplayer.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { DSTreeViewPrefix, treeItemBlockName } from '../config/cssClassesConstants';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\n\nconst className = `${DSTreeViewPrefix}-${treeItemBlockName}-children-count-displayer`;\n\ninterface PropsT {\n  item: DSTreeviewT.Item;\n}\n\nexport const ChildrenCountDisplayer = (props: PropsT): JSX.Element | null => {\n  const { item } = props;\n  const { isGroup, children } = item;\n\n  if (!isGroup) return null;\n  // return ` | ${children.length} Items`;\n  return (\n    <span data-testid=\"tree-item-children-count-displayer\" className={className}>{` | ${children.length} Items`}</span>\n  );\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AAGA,MAAM,YAAY,GAAG,oBAAoB;AAMlC,MAAM,yBAAyB,CAAC,UAAsC;AAC3E,QAAM,EAAE,SAAS;AACjB,QAAM,EAAE,SAAS,aAAa;AAE9B,MAAI,CAAC;AAAS,WAAO;AAErB,SACE,qCAAC,QAAD;AAAA,IAAM,eAAY;AAAA,IAAqC;AAAA,KAAuB,MAAM,SAAS;AAAA;",
+  "names": []
+}