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

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, defaultRelativeMouseCoord } 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 { 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,54 +36,37 @@ const useTreeview = props => {
     selection,
     onInstanceRefInitialized
   } = propsWithDefault;
-  const [isDragging, setIsDragging] = useState(false);
-  const [isKeyboardDragging, setIsKeyboardDragging] = useState(false);
-  const [relativeMouseCord, setRelativeMouseCord] = useState(defaultRelativeMouseCoord);
-  const [uniqueTreeViewUUID] = useState(v4());
-  const [draggedItem, setDraggedItem] = useState(null);
+  const [uniqueTreeViewUUID] = useState(uuidv4());
   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,
-    tree,
-    treeRoot,
-    triggerTreeRerender,
-    updateUserExpandedState
-  } = useTree(data, propsWithDefault, {
+  const { visibleItems, flattenedItems, 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,
@@ -108,22 +85,38 @@ const useTreeview = props => {
     setHoverItem,
     handleExpandGroup,
     updateUserExpandedState
-  }), [draggedItem, expandedGroups, focusedItem, handleExpandGroup, hoverItem, isDragging, isKeyboardDragging, latestToggledItem, propsWithDefault, relativeMouseCord, selectedCheckboxes, selectedItem, tree, treeRoot, triggerTreeRerender, uniqueTreeViewUUID, virtualListHelpers, visibleItems, withCheckboxChecks, withDragAndDrop, withRadioChecks, 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;
+  }), [
+    propsWithDefault,
+    virtualListHelpers,
+    tree,
+    treeRoot,
+    visibleItems,
+    flattenedItems,
+    triggerTreeRerender,
+    withRadioChecks,
+    withCheckboxChecks,
+    withDragAndDrop,
+    uniqueTreeViewUUID,
+    selectedCheckboxes,
+    selectedItem,
+    expandedGroups,
+    latestToggledItem,
+    focusedItem,
+    hoverItem,
+    handleExpandGroup,
+    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 { 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 [uniqueTreeViewUUID] = useState(uuidv4());\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, flattenedItems, 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      virtualListHelpers,\n      virtualListRef,\n      tree,\n      treeRoot,\n      visibleItems,\n      flattenedItems,\n      triggerTreeRerender,\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      propsWithDefault,\n      virtualListHelpers,\n      tree,\n      treeRoot,\n      visibleItems,\n      flattenedItems,\n      triggerTreeRerender,\n      withRadioChecks,\n      withCheckboxChecks,\n      withDragAndDrop,\n      uniqueTreeViewUUID,\n      selectedCheckboxes,\n      selectedItem,\n      expandedGroups,\n      latestToggledItem,\n      focusedItem,\n      hoverItem,\n      handleExpandGroup,\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,sBAAsB,SAAS;AACtC,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,gBAAgB,MAAM,UAAU,qBAAqB,4BAA4B,QACrG,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,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;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/hoc/DnDTreeContext.js

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { createContext } from "react";
+import { DropIndicatorPosition } from "./SortableItemContext";
+const DnDTreeContext = createContext({
+  depth: void 0,
+  activeIndex: void 0,
+  visibleItems: void 0,
+  dropIndicatorPosition: DropIndicatorPosition.None,
+  lastActiveId: void 0,
+  setLastActiveId: void 0,
+  isDropValid: false
+});
+export {
+  DnDTreeContext
+};
+//# sourceMappingURL=DnDTreeContext.js.map

package/esm/hoc/DnDTreeContext.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/hoc/DnDTreeContext.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext } from 'react';\nimport { DSTreeviewT } from '../react-desc-prop-types';\nimport { DropIndicatorPosition } from './SortableItemContext';\n\ntype DnDTreeContextType = {\n  depth: number | undefined;\n  activeIndex: number | undefined;\n  visibleItems: DSTreeviewT.Item[] | undefined;\n  dropIndicatorPosition: DropIndicatorPosition;\n  lastActiveId: string | undefined;\n  setLastActiveId: React.Dispatch<React.SetStateAction<string>> | undefined;\n  isDropValid: boolean;\n};\n\nexport const DnDTreeContext = createContext<DnDTreeContextType>({\n  depth: undefined,\n  activeIndex: undefined,\n  visibleItems: undefined,\n  dropIndicatorPosition: DropIndicatorPosition.None,\n  lastActiveId: undefined,\n  setLastActiveId: undefined,\n  isDropValid: false,\n});\n"],
+  "mappings": "AAAA;ACAA;AAEA;AAYO,MAAM,iBAAiB,cAAkC;AAAA,EAC9D,OAAO;AAAA,EACP,aAAa;AAAA,EACb,cAAc;AAAA,EACd,uBAAuB,sBAAsB;AAAA,EAC7C,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,aAAa;AAAA;",
+  "names": []
+}

package/esm/hoc/SortableItemContext.js

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { createContext } from "react";
+var DropIndicatorPosition = /* @__PURE__ */ ((DropIndicatorPosition2) => {
+  DropIndicatorPosition2[DropIndicatorPosition2["None"] = 0] = "None";
+  DropIndicatorPosition2[DropIndicatorPosition2["Before"] = 1] = "Before";
+  DropIndicatorPosition2[DropIndicatorPosition2["After"] = 2] = "After";
+  DropIndicatorPosition2[DropIndicatorPosition2["Inside"] = 3] = "Inside";
+  return DropIndicatorPosition2;
+})(DropIndicatorPosition || {});
+const SortableItemContext = createContext({
+  draggableProps: false
+});
+export {
+  DropIndicatorPosition,
+  SortableItemContext
+};
+//# sourceMappingURL=SortableItemContext.js.map

package/esm/hoc/SortableItemContext.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/hoc/SortableItemContext.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useSortable } from '@dnd-kit/sortable';\nimport { createContext } from 'react';\n\nexport enum DropIndicatorPosition {\n  None = 0,\n  Before = 1,\n  After = 2,\n  Inside = 3,\n}\n\nexport type SortableItemContextType = {\n  draggableProps:\n    | false\n    | (ReturnType<typeof useSortable> & {\n        dropIndicatorPosition: DropIndicatorPosition;\n        shouldShowDropIndicatorPosition: boolean;\n        lastActiveId?: string;\n        setLastActiveId?: React.Dispatch<React.SetStateAction<string>>;\n        isDropValid: boolean;\n      });\n};\n\n/** Context for cross component communication */\nexport const SortableItemContext = createContext<SortableItemContextType>({\n  draggableProps: false,\n});\n"],
+  "mappings": "AAAA;ACCA;AAEO,IAAK,wBAAL,kBAAK,2BAAL;AACL,0DAAO,KAAP;AACA,4DAAS,KAAT;AACA,2DAAQ,KAAR;AACA,4DAAS,KAAT;AAJU;AAAA;AAoBL,MAAM,sBAAsB,cAAuC;AAAA,EACxE,gBAAgB;AAAA;",
+  "names": []
+}

package/esm/hoc/WithConditionalDnDContext.js

@@ -0,0 +1,99 @@
+import * as React from "react";
+import React2, { useCallback, useContext, useMemo } from "react";
+import { DndContext, DragOverlay } from "@dnd-kit/core";
+import { SortableContext } from "@dnd-kit/sortable";
+import { useTreeDndkitConfig } from "@elliemae/ds-drag-and-drop";
+import TreeViewContext from "../TreeViewContext";
+import { TreeItem } from "../parts/TreeItem";
+import { DnDTreeContext } from "./DnDTreeContext";
+const ensure = (argument, message = "This should never happen") => {
+  if (argument === void 0 || argument === null) {
+    throw new TypeError(message);
+  }
+  return argument;
+};
+const withConditionalDnDRowContext = (Component) => (props) => {
+  const [lastActiveId, setLastActiveId] = React2.useState("");
+  const {
+    props: { data, onOrderChange, getIsDropValid },
+    flattenedItems,
+    visibleItems: flattenedVisibleTree,
+    withDragAndDrop
+  } = useContext(TreeViewContext);
+  const flattenedVisibleTreeForDnD = useMemo(() => flattenedVisibleTree.map((item, index) => ({
+    uid: item.id.toString(),
+    depth: (item.treeDepth ?? 1) - 1,
+    realIndex: index,
+    childrenCount: item.children?.length ?? 0,
+    parentId: item.node.parent?.model?.id?.toString() ?? null,
+    original: item
+  })), [flattenedVisibleTree]);
+  const onReorder = useCallback((tree, indexes) => {
+    const nodes = {};
+    tree.forEach((item) => {
+      const originalItem = item.original;
+      originalItem.children = [];
+      nodes[item.uid] = item.original;
+    });
+    const newUserTree = [];
+    tree.forEach((item) => {
+      if (item.parentId !== null && item.parentId !== void 0 && item.parentId !== "__ds_tree_root") {
+        const parentNode = nodes[item.parentId];
+        parentNode.children?.push(item.original);
+      } else if (item.uid !== "__ds_tree_root")
+        newUserTree.push(item.original);
+    });
+    onOrderChange(newUserTree, data, flattenedItems[indexes.fromIndex]);
+  }, [onOrderChange, data, flattenedItems]);
+  const {
+    dndContextProps,
+    sortableContextProps,
+    activeId,
+    activeIndex,
+    depth,
+    dropIndicatorPosition,
+    visibleItems,
+    isDropValid
+  } = useTreeDndkitConfig({
+    flattenedItems,
+    visibleItems: flattenedVisibleTreeForDnD,
+    isHorizontalDnD: false,
+    isExpandable: true,
+    onReorder,
+    getIsDropValid,
+    maxDragAndDropLevel: Infinity
+  });
+  if (lastActiveId !== activeId && activeId)
+    setLastActiveId(activeId);
+  if (withDragAndDrop)
+    return /* @__PURE__ */ React2.createElement(DndContext, {
+      ...dndContextProps
+    }, /* @__PURE__ */ React2.createElement(SortableContext, {
+      ...sortableContextProps
+    }, /* @__PURE__ */ React2.createElement(DnDTreeContext.Provider, {
+      value: {
+        activeIndex,
+        depth,
+        visibleItems: visibleItems.map((item) => item.original),
+        dropIndicatorPosition,
+        lastActiveId,
+        setLastActiveId,
+        isDropValid
+      }
+    }, /* @__PURE__ */ React2.createElement(Component, {
+      ...props
+    }))), /* @__PURE__ */ React2.createElement(DragOverlay, {
+      style: { width: "auto" }
+    }, activeId ? /* @__PURE__ */ React2.createElement(TreeItem, {
+      itemIndex: activeIndex,
+      item: ensure(flattenedVisibleTree.find((item) => item.id.toString() === activeId)),
+      isDragOverlay: true
+    }) : null));
+  return /* @__PURE__ */ React2.createElement(Component, {
+    ...props
+  });
+};
+export {
+  withConditionalDnDRowContext
+};
+//# sourceMappingURL=WithConditionalDnDContext.js.map

package/esm/hoc/WithConditionalDnDContext.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/hoc/WithConditionalDnDContext.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useContext, useMemo } from 'react';\nimport { DndContext, DragOverlay } from '@dnd-kit/core';\nimport { SortableContext } from '@dnd-kit/sortable';\nimport { useTreeDndkitConfig } from '@elliemae/ds-drag-and-drop';\nimport { DSTreeviewT } from '../react-desc-prop-types';\nimport TreeViewContext from '../TreeViewContext';\nimport { TreeItem } from '../parts/TreeItem';\nimport { DnDTreeContext } from './DnDTreeContext';\n\ntype FunctionalHOC = <T = unknown>(Component: React.ComponentType<T>, ...other: unknown[]) => (props: T) => JSX.Element;\n\nconst ensure = <T,>(argument: T | undefined | null, message = 'This should never happen'): T => {\n  if (argument === undefined || argument === null) {\n    throw new TypeError(message);\n  }\n\n  return argument;\n};\n\n// only wraps in \"DnDContext\" and \"DnDTreeContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDRowContext: FunctionalHOC = (Component) => (props) => {\n  const [lastActiveId, setLastActiveId] = React.useState('');\n\n  const {\n    props: { data, onOrderChange, getIsDropValid },\n    flattenedItems,\n    visibleItems: flattenedVisibleTree,\n    withDragAndDrop,\n  } = useContext(TreeViewContext);\n\n  const flattenedVisibleTreeForDnD = useMemo(\n    () =>\n      flattenedVisibleTree.map((item, index) => ({\n        uid: item.id.toString(),\n        depth: (item.treeDepth ?? 1) - 1,\n        realIndex: index,\n        childrenCount: item.children?.length ?? 0,\n        parentId: item.node.parent?.model?.id?.toString() ?? null,\n        original: item,\n      })),\n    [flattenedVisibleTree],\n  );\n\n  const onReorder = useCallback(\n    (tree: DSTreeviewT.DndItem[], indexes: { targetIndex: number; fromIndex: number }) => {\n      // Pull the row's original data into an object\n      const nodes: Record<DSTreeviewT.StringOrNum, DSTreeviewT.SimpleItem> = {};\n      tree.forEach((item) => {\n        const originalItem = item.original;\n        originalItem.children = [];\n        nodes[item.uid] = item.original;\n      });\n\n      const newUserTree: DSTreeviewT.SimpleItem[] = [];\n      tree.forEach((item) => {\n        // If row has parent, insert it to it's subrows\n        // otherwise append it to the new user data\n        if (item.parentId !== null && item.parentId !== undefined && item.parentId !== '__ds_tree_root') {\n          const parentNode = nodes[item.parentId];\n          parentNode.children?.push(item.original);\n        } else if (item.uid !== '__ds_tree_root') newUserTree.push(item.original);\n      });\n      // Tell the user that the order has change, he can chose to commit it or not\n      onOrderChange(newUserTree, data, flattenedItems[indexes.fromIndex]);\n    },\n    [onOrderChange, data, flattenedItems],\n  );\n\n  const {\n    dndContextProps,\n    sortableContextProps,\n    activeId,\n    activeIndex,\n    depth,\n    dropIndicatorPosition,\n    visibleItems,\n    isDropValid,\n  } = useTreeDndkitConfig({\n    flattenedItems,\n    visibleItems: flattenedVisibleTreeForDnD,\n    isHorizontalDnD: false,\n    isExpandable: true,\n    onReorder,\n    getIsDropValid,\n    maxDragAndDropLevel: Infinity,\n  });\n\n  if (lastActiveId !== activeId && activeId) setLastActiveId(activeId);\n\n  if (withDragAndDrop)\n    return (\n      <DndContext {...dndContextProps}>\n        <SortableContext {...sortableContextProps}>\n          <DnDTreeContext.Provider\n            value={{\n              activeIndex,\n              depth,\n              visibleItems: visibleItems.map((item) => item.original) as DSTreeviewT.Item[],\n              dropIndicatorPosition,\n              lastActiveId,\n              setLastActiveId,\n              isDropValid,\n            }}\n          >\n            <Component {...props} />\n          </DnDTreeContext.Provider>\n        </SortableContext>\n        <DragOverlay style={{ width: 'auto' }}>\n          {activeId ? (\n            <TreeItem\n              itemIndex={activeIndex}\n              item={ensure(flattenedVisibleTree.find((item) => item.id.toString() === activeId))}\n              isDragOverlay\n            />\n          ) : null}\n        </DragOverlay>\n      </DndContext>\n    );\n  return <Component {...props} />;\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AAEA;AACA;AACA;AAIA,MAAM,SAAS,CAAK,UAAgC,UAAU,+BAAkC;AAC9F,MAAI,aAAa,UAAa,aAAa,MAAM;AAC/C,UAAM,IAAI,UAAU;AAAA;AAGtB,SAAO;AAAA;AAIF,MAAM,+BAA8C,CAAC,cAAc,CAAC,UAAU;AACnF,QAAM,CAAC,cAAc,mBAAmB,OAAM,SAAS;AAEvD,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM,eAAe;AAAA,IAC9B;AAAA,IACA,cAAc;AAAA,IACd;AAAA,MACE,WAAW;AAEf,QAAM,6BAA6B,QACjC,MACE,qBAAqB,IAAI,CAAC,MAAM,UAAW;AAAA,IACzC,KAAK,KAAK,GAAG;AAAA,IACb,OAAQ,MAAK,aAAa,KAAK;AAAA,IAC/B,WAAW;AAAA,IACX,eAAe,KAAK,UAAU,UAAU;AAAA,IACxC,UAAU,KAAK,KAAK,QAAQ,OAAO,IAAI,cAAc;AAAA,IACrD,UAAU;AAAA,OAEd,CAAC;AAGH,QAAM,YAAY,YAChB,CAAC,MAA6B,YAAwD;AAEpF,UAAM,QAAiE;AACvE,SAAK,QAAQ,CAAC,SAAS;AACrB,YAAM,eAAe,KAAK;AAC1B,mBAAa,WAAW;AACxB,YAAM,KAAK,OAAO,KAAK;AAAA;AAGzB,UAAM,cAAwC;AAC9C,SAAK,QAAQ,CAAC,SAAS;AAGrB,UAAI,KAAK,aAAa,QAAQ,KAAK,aAAa,UAAa,KAAK,aAAa,kBAAkB;AAC/F,cAAM,aAAa,MAAM,KAAK;AAC9B,mBAAW,UAAU,KAAK,KAAK;AAAA,iBACtB,KAAK,QAAQ;AAAkB,oBAAY,KAAK,KAAK;AAAA;AAGlE,kBAAc,aAAa,MAAM,eAAe,QAAQ;AAAA,KAE1D,CAAC,eAAe,MAAM;AAGxB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,oBAAoB;AAAA,IACtB;AAAA,IACA,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA;AAGvB,MAAI,iBAAiB,YAAY;AAAU,oBAAgB;AAE3D,MAAI;AACF,WACE,qCAAC,YAAD;AAAA,SAAgB;AAAA,OACd,qCAAC,iBAAD;AAAA,SAAqB;AAAA,OACnB,qCAAC,eAAe,UAAhB;AAAA,MACE,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA,cAAc,aAAa,IAAI,CAAC,SAAS,KAAK;AAAA,QAC9C;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,OAGF,qCAAC,WAAD;AAAA,SAAe;AAAA,UAGnB,qCAAC,aAAD;AAAA,MAAa,OAAO,EAAE,OAAO;AAAA,OAC1B,WACC,qCAAC,UAAD;AAAA,MACE,WAAW;AAAA,MACX,MAAM,OAAO,qBAAqB,KAAK,CAAC,SAAS,KAAK,GAAG,eAAe;AAAA,MACxE,eAAa;AAAA,SAEb;AAIZ,SAAO,qCAAC,WAAD;AAAA,OAAe;AAAA;AAAA;",
+  "names": []
+}

package/esm/hoc/WithDnDSortableItemContext.js

@@ -0,0 +1,40 @@
+import * as React from "react";
+import React2, { useContext, useMemo } from "react";
+import { useSortable } from "@dnd-kit/sortable";
+import { SortableItemContext } from "./SortableItemContext";
+import TreeViewContext from "../TreeViewContext";
+import { DnDTreeContext } from "./DnDTreeContext";
+const withDnDSortableItemContext = (Component) => (props) => {
+  const { withDragAndDrop } = useContext(TreeViewContext);
+  const { dropIndicatorPosition, lastActiveId, setLastActiveId, isDropValid } = useContext(DnDTreeContext);
+  const id = props.item.id.toString();
+  const draggableOptions = useMemo(() => ({
+    id
+  }), [id]);
+  const useSortableHelpers = useSortable(draggableOptions);
+  const draggableProps = useMemo(() => {
+    if (!withDragAndDrop)
+      return false;
+    const { index, overIndex } = useSortableHelpers;
+    return {
+      ...useSortableHelpers,
+      shouldShowDropIndicatorPosition: overIndex === index,
+      dropIndicatorPosition,
+      lastActiveId,
+      setLastActiveId,
+      isDropValid
+    };
+  }, [withDragAndDrop, useSortableHelpers, dropIndicatorPosition, lastActiveId, setLastActiveId, isDropValid]);
+  const ctx = useMemo(() => ({
+    draggableProps
+  }), [draggableProps]);
+  return /* @__PURE__ */ React2.createElement(SortableItemContext.Provider, {
+    value: ctx
+  }, /* @__PURE__ */ React2.createElement(Component, {
+    ...props
+  }));
+};
+export {
+  withDnDSortableItemContext
+};
+//# sourceMappingURL=WithDnDSortableItemContext.js.map

package/esm/hoc/WithDnDSortableItemContext.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/hoc/WithDnDSortableItemContext.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unsafe-call */\n/* eslint-disable @typescript-eslint/no-unsafe-member-access */\n/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport React, { useContext, useMemo } from 'react';\nimport { useSortable } from '@dnd-kit/sortable';\nimport { SortableItemContext, SortableItemContextType } from './SortableItemContext';\nimport TreeViewContext from '../TreeViewContext';\nimport { DnDTreeContext } from './DnDTreeContext';\nimport { DSTreeviewT } from '../react-desc-prop-types';\n\ntype FunctionalHOC = <T = unknown>(Component: React.ComponentType<T>, ...other: unknown[]) => (props: T) => JSX.Element;\n\nexport const withDnDSortableItemContext: FunctionalHOC = (Component) => (props: any) => {\n  const { withDragAndDrop } = useContext(TreeViewContext);\n  const { dropIndicatorPosition, lastActiveId, setLastActiveId, isDropValid } = useContext(DnDTreeContext);\n\n  const id = (props as { item: DSTreeviewT.Item }).item.id.toString();\n\n  // onMount generate unique options, so everyting is only ran once\n  const draggableOptions = useMemo(\n    () => ({\n      id,\n    }),\n    [id],\n  );\n\n  const useSortableHelpers = useSortable(draggableOptions);\n\n  // calculate all the \"useSortable\" values as per required\n  const draggableProps = useMemo(() => {\n    if (!withDragAndDrop) return false;\n\n    const { index, overIndex } = useSortableHelpers;\n\n    return {\n      ...useSortableHelpers,\n      shouldShowDropIndicatorPosition: overIndex === index,\n      dropIndicatorPosition,\n      lastActiveId,\n      setLastActiveId,\n      isDropValid,\n    };\n  }, [withDragAndDrop, useSortableHelpers, dropIndicatorPosition, lastActiveId, setLastActiveId, isDropValid]);\n\n  // we use a context so we can easly access information wherever without bubbling down\n  // this context is all Memoized so as long as component is not re-mounted,\n  // the context won't trigger un-required renders per-se...\n  const ctx: SortableItemContextType = useMemo(\n    () => ({\n      draggableProps,\n    }),\n    [draggableProps],\n  );\n  // we always add the context, if draggableProps===false we don't have the DnD enabled.\n  return (\n    <SortableItemContext.Provider value={ctx}>\n      <Component {...props} />\n    </SortableItemContext.Provider>\n  );\n};\n"],
+  "mappings": "AAAA;ACGA;AACA;AACA;AACA;AACA;AAKO,MAAM,6BAA4C,CAAC,cAAc,CAAC,UAAe;AACtF,QAAM,EAAE,oBAAoB,WAAW;AACvC,QAAM,EAAE,uBAAuB,cAAc,iBAAiB,gBAAgB,WAAW;AAEzF,QAAM,KAAM,MAAqC,KAAK,GAAG;AAGzD,QAAM,mBAAmB,QACvB,MAAO;AAAA,IACL;AAAA,MAEF,CAAC;AAGH,QAAM,qBAAqB,YAAY;AAGvC,QAAM,iBAAiB,QAAQ,MAAM;AACnC,QAAI,CAAC;AAAiB,aAAO;AAE7B,UAAM,EAAE,OAAO,cAAc;AAE7B,WAAO;AAAA,SACF;AAAA,MACH,iCAAiC,cAAc;AAAA,MAC/C;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,KAED,CAAC,iBAAiB,oBAAoB,uBAAuB,cAAc,iBAAiB;AAK/F,QAAM,MAA+B,QACnC,MAAO;AAAA,IACL;AAAA,MAEF,CAAC;AAGH,SACE,qCAAC,oBAAoB,UAArB;AAAA,IAA8B,OAAO;AAAA,KACnC,qCAAC,WAAD;AAAA,OAAe;AAAA;AAAA;",
+  "names": []
+}

package/esm/index.js

@@ -1,9 +1,8 @@
-export { TreeView, TreeViewWithSchema } from './TreeView.js';
-export { TreeDnD, 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": []
+}