@elliemae/ds-treeview 3.51.0-rc.25 → 3.51.0-rc.27

package/dist/cjs/config/useTreeview.js

@@ -83,13 +83,17 @@ const useTreeview = (props) => {
     return internallySelectedCheckboxes;
   }, [controlledSelection, internallySelectedCheckboxes]);
   const [expandedGroups, setExpandedGroups] = (0, import_react.useState)({});
-  const { visibleItems, flattenedItems, tree, treeRoot, triggerTreeRerender, updateUserExpandedState } = (0, import_useTree.useTree)(
-    data,
-    propsWithDefault,
-    {
-      setExpandedGroups
-    }
-  );
+  const {
+    visibleItems,
+    visibleItemsRef,
+    flattenedItems,
+    tree,
+    treeRoot,
+    triggerTreeRerender,
+    updateUserExpandedState
+  } = (0, import_useTree.useTree)(data, propsWithDefault, {
+    setExpandedGroups
+  });
   const virtualListRef = (0, import_react.useRef)();
   const virtualListHelpers = (0, import_react_virtual.useVirtual)({
     size: visibleItems.length,
@@ -127,7 +131,8 @@ const useTreeview = (props) => {
       hoverItem,
       setHoverItem,
       handleExpandGroup,
-      updateUserExpandedState
+      updateUserExpandedState,
+      visibleItemsRef
     }),
     [
       propsWithDefault,
@@ -148,7 +153,8 @@ const useTreeview = (props) => {
       focusedItem,
       hoverItem,
       handleExpandGroup,
-      updateUserExpandedState
+      updateUserExpandedState,
+      visibleItemsRef
     ]
   );
   if (instanceRef) instanceRef.current = treeRef.current;

package/dist/cjs/config/useTreeview.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useTreeview.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* 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 { uid } from 'uid';\nimport { TreeViewPropTypes } from '../react-desc-prop-types.js';\nimport { defaultProps } from '../TreeViewContext.js';\nimport { TreeDndPlugin } from '../plugins/dnd/index.js';\nimport { useTree } from '../utils/useTree.js';\nimport { useNotifyExpandedChange, toggleItemExpand } from '../utils/group-expands-helpers.js';\nimport { useInstanceRefActions } from '../utils/useInstanceRefActions.js';\nimport { useGlobalToggleAllExpandShortcut } from '../utils/keyboard-helpers.js';\nimport type { DSTreeviewT } from '../react-desc-prop-types.js';\nimport type { DSTreeviewInternalsT } from '../sharedTypes.js';\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(propsWithDefault, TreeViewPropTypes, 'DSTreeView');\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    controlledSelection,\n    onInstanceRefInitialized,\n  } = propsWithDefault;\n  const [uniqueTreeViewUUID] = useState(uid(6));\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 [internallySelectedCheckboxes, setInternallySelectedCheckboxes] = useState({\n    ...selection,\n  });\n\n  // if user provides \"controlledSelection\" selectedCheckboxes containes the user selection\n  // else it contains the internal selection\n  const selectedCheckboxes = useMemo(() => {\n    if (controlledSelection) return controlledSelection;\n    return internallySelectedCheckboxes;\n  }, [controlledSelection, internallySelectedCheckboxes]);\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      setInternallySelectedCheckboxes,\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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* 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 { uid } from 'uid';\nimport { TreeViewPropTypes } from '../react-desc-prop-types.js';\nimport { defaultProps } from '../TreeViewContext.js';\nimport { TreeDndPlugin } from '../plugins/dnd/index.js';\nimport { useTree } from '../utils/useTree.js';\nimport { useNotifyExpandedChange, toggleItemExpand } from '../utils/group-expands-helpers.js';\nimport { useInstanceRefActions } from '../utils/useInstanceRefActions.js';\nimport { useGlobalToggleAllExpandShortcut } from '../utils/keyboard-helpers.js';\nimport type { DSTreeviewT } from '../react-desc-prop-types.js';\nimport type { DSTreeviewInternalsT } from '../sharedTypes.js';\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(propsWithDefault, TreeViewPropTypes, 'DSTreeView');\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    controlledSelection,\n    onInstanceRefInitialized,\n  } = propsWithDefault;\n  const [uniqueTreeViewUUID] = useState(uid(6));\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 [internallySelectedCheckboxes, setInternallySelectedCheckboxes] = useState({\n    ...selection,\n  });\n\n  // if user provides \"controlledSelection\" selectedCheckboxes containes the user selection\n  // else it contains the internal selection\n  const selectedCheckboxes = useMemo(() => {\n    if (controlledSelection) return controlledSelection;\n    return internallySelectedCheckboxes;\n  }, [controlledSelection, internallySelectedCheckboxes]);\n\n  const [expandedGroups, setExpandedGroups] = useState<DSTreeviewT.ExpandedItems>({});\n  const {\n    visibleItems,\n    visibleItemsRef,\n    flattenedItems,\n    tree,\n    treeRoot,\n    triggerTreeRerender,\n    updateUserExpandedState,\n  } = useTree(data, propsWithDefault, {\n    setExpandedGroups,\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      setInternallySelectedCheckboxes,\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      visibleItemsRef,\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      visibleItemsRef,\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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/sharedTypes.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/sharedTypes.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type TreeModel from 'tree-model';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { useVirtual } from 'react-virtual';\nimport type { SetStateAction } from 'react';\nimport type { DSTreeviewT } from './react-desc-prop-types.js';\n\nexport declare namespace DSTreeviewInternalsT {\n  export type GenericFunc = TypescriptHelpersT.VoidGenericFunc;\n  export type DnDMovementDirectionT = 'topToBottom' | 'bottomToTop';\n  export interface MouseCoord {\n    isBefore: boolean;\n    isAfter: boolean;\n    isValid: boolean;\n    item: DSTreeviewT.Item | null;\n    x: number | null;\n    y: number | null;\n    relativeElementDOMRect: DOMRect | null;\n    relativeElementIndex: number | null;\n  }\n\n  export type StateSetter<T = unknown> = React.Dispatch<SetStateAction<T>>;\n\n  export interface CTX {\n    props: DSTreeviewT.Props;\n    visibleItems: DSTreeviewT.Item[];\n    flattenedItems: DSTreeviewT.DndItem[];\n    withRadioChecks: boolean;\n    withCheckboxChecks: boolean;\n    withDragAndDrop: boolean;\n    triggerTreeRerender: () => void;\n    tree?: TreeModel;\n    treeRoot?: TreeModel.Node<DSTreeviewT.Item>;\n    virtualListHelpers: ReturnType<typeof useVirtual>;\n    virtualListRef?: React.MutableRefObject<HTMLUListElement | undefined>;\n    uniqueTreeViewUUID: string;\n    selectedItem: DSTreeviewT.Item | null;\n    setSelectedItem: StateSetter<DSTreeviewT.Item | null>;\n    focusedItem: DSTreeviewT.Item | null;\n    setFocusedItem: StateSetter<DSTreeviewT.Item | null>;\n    selectedCheckboxes: DSTreeviewT.SelectionItems;\n    setInternallySelectedCheckboxes: StateSetter<DSTreeviewT.SelectionItems>;\n    expandedGroups: DSTreeviewT.ExpandedItems;\n    setExpandedGroups: StateSetter<DSTreeviewT.ExpandedItems>;\n    latestToggledItem?: DSTreeviewT.Item | null | undefined; // item -> if toggle all -> should be undefined\n    setLatestToggledItem: StateSetter<DSTreeviewT.Item | null>;\n    hoverItem: DSTreeviewT.Item | null;\n    setHoverItem: StateSetter<DSTreeviewT.Item | null>;\n    handleExpandGroup: (\n      itemToToggle: DSTreeviewT.Item,\n      triggerTreeRerender: () => void,\n      updateUserExpandedState: () => void,\n      scrollTo?: DSTreeviewT.ScrollToFunc,\n      e?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n    ) => void;\n    updateUserExpandedState: () => void;\n  }\n}\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["import type TreeModel from 'tree-model';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { useVirtual } from 'react-virtual';\nimport type { SetStateAction } from 'react';\nimport type { DSTreeviewT } from './react-desc-prop-types.js';\n\nexport declare namespace DSTreeviewInternalsT {\n  export type GenericFunc = TypescriptHelpersT.VoidGenericFunc;\n  export type DnDMovementDirectionT = 'topToBottom' | 'bottomToTop';\n  export interface MouseCoord {\n    isBefore: boolean;\n    isAfter: boolean;\n    isValid: boolean;\n    item: DSTreeviewT.Item | null;\n    x: number | null;\n    y: number | null;\n    relativeElementDOMRect: DOMRect | null;\n    relativeElementIndex: number | null;\n  }\n\n  export type StateSetter<T = unknown> = React.Dispatch<SetStateAction<T>>;\n\n  export interface CTX {\n    props: DSTreeviewT.Props;\n    visibleItems: DSTreeviewT.Item[];\n    visibleItemsRef: React.MutableRefObject<DSTreeviewT.Item[]>;\n    flattenedItems: DSTreeviewT.DndItem[];\n    withRadioChecks: boolean;\n    withCheckboxChecks: boolean;\n    withDragAndDrop: boolean;\n    triggerTreeRerender: () => void;\n    tree?: TreeModel;\n    treeRoot?: TreeModel.Node<DSTreeviewT.Item>;\n    virtualListHelpers: ReturnType<typeof useVirtual>;\n    virtualListRef?: React.MutableRefObject<HTMLUListElement | undefined>;\n    uniqueTreeViewUUID: string;\n    selectedItem: DSTreeviewT.Item | null;\n    setSelectedItem: StateSetter<DSTreeviewT.Item | null>;\n    focusedItem: DSTreeviewT.Item | null;\n    setFocusedItem: StateSetter<DSTreeviewT.Item | null>;\n    selectedCheckboxes: DSTreeviewT.SelectionItems;\n    setInternallySelectedCheckboxes: StateSetter<DSTreeviewT.SelectionItems>;\n    expandedGroups: DSTreeviewT.ExpandedItems;\n    setExpandedGroups: StateSetter<DSTreeviewT.ExpandedItems>;\n    latestToggledItem?: DSTreeviewT.Item | null | undefined; // item -> if toggle all -> should be undefined\n    setLatestToggledItem: StateSetter<DSTreeviewT.Item | null>;\n    hoverItem: DSTreeviewT.Item | null;\n    setHoverItem: StateSetter<DSTreeviewT.Item | null>;\n    handleExpandGroup: (\n      itemToToggle: DSTreeviewT.Item,\n      triggerTreeRerender: () => void,\n      updateUserExpandedState: () => void,\n      scrollTo?: DSTreeviewT.ScrollToFunc,\n      e?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n    ) => void;\n    updateUserExpandedState: () => void;\n  }\n}\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
   "names": []
 }

package/dist/cjs/utils/useInstanceRefActions.js

@@ -41,6 +41,7 @@ const useInstanceRefActions = ({ actions }, ctx) => {
     virtualListHelpers,
     treeRoot,
     visibleItems,
+    visibleItemsRef,
     triggerTreeRerender,
     updateUserExpandedState,
     setSelectedItem,
@@ -50,13 +51,15 @@ const useInstanceRefActions = ({ actions }, ctx) => {
   const { current: promises } = (0, import_react.useRef)({});
   const { scrollToIndex } = (0, import_react.useMemo)(() => virtualListHelpers, [virtualListHelpers]);
   const [expandPromise, setPromise] = (0, import_react.useState)();
-  (0, import_react.useLayoutEffect)(() => {
+  (0, import_react.useEffect)(() => {
     if (expandPromise && promises.expandResolve) {
-      promises.expandResolve(visibleItems);
+      if (promises.expandResolve && visibleItemsRef.current) {
+        promises.expandResolve(visibleItemsRef.current);
+      }
       promises.expandResolve = null;
       setPromise(null);
     }
-  }, [visibleItems, expandPromise, promises]);
+  }, [visibleItemsRef, expandPromise, promises]);
   actions.toggleExpandAll = (0, import_react.useCallback)(
     (isExpand) => {
       const p = new Promise((resolve) => {

package/dist/cjs/utils/useInstanceRefActions.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/utils/useInstanceRefActions.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useLayoutEffect, useMemo, useState, useRef, useCallback } from 'react';\nimport { focusItem } from './tree-helpers.js';\nimport { toggleExpandAllHelper } from './group-expands-helpers.js';\nimport type { DSTreeviewT } from '../react-desc-prop-types.js';\nimport type { DSTreeviewInternalsT } from '../sharedTypes.js';\n\ninterface PromisesRefT {\n  expandResolve?: null | ((value: DSTreeviewT.Item[] | PromiseLike<DSTreeviewT.Item[]>) => void);\n  scrollTo?: null | ((value: DSTreeviewT.Item[] | PromiseLike<DSTreeviewT.Item[]>) => void);\n}\n\nexport const useInstanceRefActions = ({ actions }: DSTreeviewT.InstanceRef, ctx: DSTreeviewInternalsT.CTX) => {\n  const {\n    props: { onItemFocus, onItemActivate },\n    virtualListHelpers,\n    treeRoot,\n    visibleItems,\n    triggerTreeRerender,\n    updateUserExpandedState,\n    setSelectedItem,\n    setFocusedItem,\n    setLatestToggledItem,\n  } = ctx;\n  const { current: promises } = useRef<PromisesRefT>({});\n  const { scrollToIndex } = useMemo(() => virtualListHelpers, [virtualListHelpers]);\n  const [expandPromise, setPromise] = useState<Promise<DSTreeviewT.Item[]> | undefined | null>();\n\n  useLayoutEffect(() => {\n    if (expandPromise && promises.expandResolve) {\n      promises.expandResolve(visibleItems);\n      promises.expandResolve = null;\n      setPromise(null);\n    }\n  }, [visibleItems, expandPromise, promises]);\n\n  actions.toggleExpandAll = useCallback(\n    (isExpand) => {\n      const p = new Promise<DSTreeviewT.Item[]>((resolve) => {\n        promises.expandResolve = resolve;\n        if (treeRoot)\n          toggleExpandAllHelper(isExpand, treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState);\n      });\n      setPromise(p);\n      return p;\n    },\n    [promises, treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState],\n  );\n  actions.scrollTo = useCallback(\n    (indx, opts = { align: 'start' }) => {\n      if (scrollToIndex) scrollToIndex(indx, opts);\n    },\n    [scrollToIndex],\n  );\n\n  actions.setSelectedItemByVirtualIndex = useCallback(\n    (index) => {\n      const itemByIndex = visibleItems[index];\n      setSelectedItem(itemByIndex);\n      onItemActivate(itemByIndex);\n    },\n    [visibleItems, setSelectedItem, onItemActivate],\n  );\n\n  actions.setFocusedItemByVirtualIndex = useCallback(\n    (index, opts = { align: 'start', withScroll: false }) => {\n      const itemByIndex = visibleItems[index];\n      const onItemFocusParams = {\n        itemIndex: itemByIndex.virtualIndex as number,\n        scrollToItem: () => scrollToIndex(index, opts),\n        item: itemByIndex,\n      };\n\n      if (opts.withScroll && scrollToIndex) {\n        scrollToIndex(index, opts);\n        setTimeout(() => {\n          setFocusedItem(itemByIndex);\n          focusItem(itemByIndex);\n          onItemFocus(onItemFocusParams);\n        }, 300);\n      } else {\n        setFocusedItem(itemByIndex);\n        focusItem(itemByIndex);\n        onItemFocus(onItemFocusParams);\n      }\n    },\n    [visibleItems, scrollToIndex, setFocusedItem, onItemFocus],\n  );\n\n  return actions;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwE;AACxE,0BAA0B;AAC1B,mCAAsC;AAS/B,MAAM,wBAAwB,CAAC,EAAE,QAAQ,GAA4B,QAAkC;AAC5G,QAAM;AAAA,IACJ,OAAO,EAAE,aAAa,eAAe;AAAA,IACrC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,SAAS,SAAS,QAAI,qBAAqB,CAAC,CAAC;AACrD,QAAM,EAAE,cAAc,QAAI,sBAAQ,MAAM,oBAAoB,CAAC,kBAAkB,CAAC;AAChF,QAAM,CAAC,eAAe,UAAU,QAAI,uBAAyD;AAE7F,oCAAgB,MAAM;AACpB,QAAI,iBAAiB,SAAS,eAAe;AAC3C,eAAS,cAAc,YAAY;AACnC,eAAS,gBAAgB;AACzB,iBAAW,IAAI;AAAA,IACjB;AAAA,EACF,GAAG,CAAC,cAAc,eAAe,QAAQ,CAAC;AAE1C,UAAQ,sBAAkB;AAAA,IACxB,CAAC,aAAa;AACZ,YAAM,IAAI,IAAI,QAA4B,CAAC,YAAY;AACrD,iBAAS,gBAAgB;AACzB,YAAI;AACF,kEAAsB,UAAU,UAAU,qBAAqB,sBAAsB,uBAAuB;AAAA,MAChH,CAAC;AACD,iBAAW,CAAC;AACZ,aAAO;AAAA,IACT;AAAA,IACA,CAAC,UAAU,UAAU,qBAAqB,sBAAsB,uBAAuB;AAAA,EACzF;AACA,UAAQ,eAAW;AAAA,IACjB,CAAC,MAAM,OAAO,EAAE,OAAO,QAAQ,MAAM;AACnC,UAAI,cAAe,eAAc,MAAM,IAAI;AAAA,IAC7C;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAEA,UAAQ,oCAAgC;AAAA,IACtC,CAAC,UAAU;AACT,YAAM,cAAc,aAAa,KAAK;AACtC,sBAAgB,WAAW;AAC3B,qBAAe,WAAW;AAAA,IAC5B;AAAA,IACA,CAAC,cAAc,iBAAiB,cAAc;AAAA,EAChD;AAEA,UAAQ,mCAA+B;AAAA,IACrC,CAAC,OAAO,OAAO,EAAE,OAAO,SAAS,YAAY,MAAM,MAAM;AACvD,YAAM,cAAc,aAAa,KAAK;AACtC,YAAM,oBAAoB;AAAA,QACxB,WAAW,YAAY;AAAA,QACvB,cAAc,MAAM,cAAc,OAAO,IAAI;AAAA,QAC7C,MAAM;AAAA,MACR;AAEA,UAAI,KAAK,cAAc,eAAe;AACpC,sBAAc,OAAO,IAAI;AACzB,mBAAW,MAAM;AACf,yBAAe,WAAW;AAC1B,6CAAU,WAAW;AACrB,sBAAY,iBAAiB;AAAA,QAC/B,GAAG,GAAG;AAAA,MACR,OAAO;AACL,uBAAe,WAAW;AAC1B,2CAAU,WAAW;AACrB,oBAAY,iBAAiB;AAAA,MAC/B;AAAA,IACF;AAAA,IACA,CAAC,cAAc,eAAe,gBAAgB,WAAW;AAAA,EAC3D;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import { useEffect, useMemo, useState, useRef, useCallback } from 'react';\nimport { focusItem } from './tree-helpers.js';\nimport { toggleExpandAllHelper } from './group-expands-helpers.js';\nimport type { DSTreeviewT } from '../react-desc-prop-types.js';\nimport type { DSTreeviewInternalsT } from '../sharedTypes.js';\n\ninterface PromisesRefT {\n  expandResolve?: null | ((value: DSTreeviewT.Item[] | PromiseLike<DSTreeviewT.Item[]>) => void);\n  scrollTo?: null | ((value: DSTreeviewT.Item[] | PromiseLike<DSTreeviewT.Item[]>) => void);\n}\n\nexport const useInstanceRefActions = ({ actions }: DSTreeviewT.InstanceRef, ctx: DSTreeviewInternalsT.CTX) => {\n  const {\n    props: { onItemFocus, onItemActivate },\n    virtualListHelpers,\n    treeRoot,\n    visibleItems,\n    visibleItemsRef,\n    triggerTreeRerender,\n    updateUserExpandedState,\n    setSelectedItem,\n    setFocusedItem,\n    setLatestToggledItem,\n  } = ctx;\n  const { current: promises } = useRef<PromisesRefT>({});\n  const { scrollToIndex } = useMemo(() => virtualListHelpers, [virtualListHelpers]);\n  const [expandPromise, setPromise] = useState<Promise<DSTreeviewT.Item[]> | undefined | null>();\n\n  useEffect(() => {\n    if (expandPromise && promises.expandResolve) {\n      if (promises.expandResolve && visibleItemsRef.current) {\n        promises.expandResolve(visibleItemsRef.current);\n      }\n      promises.expandResolve = null;\n      setPromise(null);\n    }\n  }, [visibleItemsRef, expandPromise, promises]);\n\n  actions.toggleExpandAll = useCallback(\n    (isExpand) => {\n      const p = new Promise<DSTreeviewT.Item[]>((resolve) => {\n        promises.expandResolve = resolve;\n        if (treeRoot)\n          toggleExpandAllHelper(isExpand, treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState);\n      });\n      setPromise(p);\n      return p;\n    },\n    [promises, treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState],\n  );\n  actions.scrollTo = useCallback(\n    (indx, opts = { align: 'start' }) => {\n      if (scrollToIndex) scrollToIndex(indx, opts);\n    },\n    [scrollToIndex],\n  );\n\n  actions.setSelectedItemByVirtualIndex = useCallback(\n    (index) => {\n      const itemByIndex = visibleItems[index];\n      setSelectedItem(itemByIndex);\n      onItemActivate(itemByIndex);\n    },\n    [visibleItems, setSelectedItem, onItemActivate],\n  );\n\n  actions.setFocusedItemByVirtualIndex = useCallback(\n    (index, opts = { align: 'start', withScroll: false }) => {\n      const itemByIndex = visibleItems[index];\n      const onItemFocusParams = {\n        itemIndex: itemByIndex.virtualIndex as number,\n        scrollToItem: () => scrollToIndex(index, opts),\n        item: itemByIndex,\n      };\n\n      if (opts.withScroll && scrollToIndex) {\n        scrollToIndex(index, opts);\n        setTimeout(() => {\n          setFocusedItem(itemByIndex);\n          focusItem(itemByIndex);\n          onItemFocus(onItemFocusParams);\n        }, 300);\n      } else {\n        setFocusedItem(itemByIndex);\n        focusItem(itemByIndex);\n        onItemFocus(onItemFocusParams);\n      }\n    },\n    [visibleItems, scrollToIndex, setFocusedItem, onItemFocus],\n  );\n\n  return actions;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkE;AAClE,0BAA0B;AAC1B,mCAAsC;AAS/B,MAAM,wBAAwB,CAAC,EAAE,QAAQ,GAA4B,QAAkC;AAC5G,QAAM;AAAA,IACJ,OAAO,EAAE,aAAa,eAAe;AAAA,IACrC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,SAAS,SAAS,QAAI,qBAAqB,CAAC,CAAC;AACrD,QAAM,EAAE,cAAc,QAAI,sBAAQ,MAAM,oBAAoB,CAAC,kBAAkB,CAAC;AAChF,QAAM,CAAC,eAAe,UAAU,QAAI,uBAAyD;AAE7F,8BAAU,MAAM;AACd,QAAI,iBAAiB,SAAS,eAAe;AAC3C,UAAI,SAAS,iBAAiB,gBAAgB,SAAS;AACrD,iBAAS,cAAc,gBAAgB,OAAO;AAAA,MAChD;AACA,eAAS,gBAAgB;AACzB,iBAAW,IAAI;AAAA,IACjB;AAAA,EACF,GAAG,CAAC,iBAAiB,eAAe,QAAQ,CAAC;AAE7C,UAAQ,sBAAkB;AAAA,IACxB,CAAC,aAAa;AACZ,YAAM,IAAI,IAAI,QAA4B,CAAC,YAAY;AACrD,iBAAS,gBAAgB;AACzB,YAAI;AACF,kEAAsB,UAAU,UAAU,qBAAqB,sBAAsB,uBAAuB;AAAA,MAChH,CAAC;AACD,iBAAW,CAAC;AACZ,aAAO;AAAA,IACT;AAAA,IACA,CAAC,UAAU,UAAU,qBAAqB,sBAAsB,uBAAuB;AAAA,EACzF;AACA,UAAQ,eAAW;AAAA,IACjB,CAAC,MAAM,OAAO,EAAE,OAAO,QAAQ,MAAM;AACnC,UAAI,cAAe,eAAc,MAAM,IAAI;AAAA,IAC7C;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAEA,UAAQ,oCAAgC;AAAA,IACtC,CAAC,UAAU;AACT,YAAM,cAAc,aAAa,KAAK;AACtC,sBAAgB,WAAW;AAC3B,qBAAe,WAAW;AAAA,IAC5B;AAAA,IACA,CAAC,cAAc,iBAAiB,cAAc;AAAA,EAChD;AAEA,UAAQ,mCAA+B;AAAA,IACrC,CAAC,OAAO,OAAO,EAAE,OAAO,SAAS,YAAY,MAAM,MAAM;AACvD,YAAM,cAAc,aAAa,KAAK;AACtC,YAAM,oBAAoB;AAAA,QACxB,WAAW,YAAY;AAAA,QACvB,cAAc,MAAM,cAAc,OAAO,IAAI;AAAA,QAC7C,MAAM;AAAA,MACR;AAEA,UAAI,KAAK,cAAc,eAAe;AACpC,sBAAc,OAAO,IAAI;AACzB,mBAAW,MAAM;AACf,yBAAe,WAAW;AAC1B,6CAAU,WAAW;AACrB,sBAAY,iBAAiB;AAAA,QAC/B,GAAG,GAAG;AAAA,MACR,OAAO;AACL,uBAAe,WAAW;AAC1B,2CAAU,WAAW;AACrB,oBAAY,iBAAiB;AAAA,MAC/B;AAAA,IACF;AAAA,IACA,CAAC,cAAc,eAAe,gBAAgB,WAAW;AAAA,EAC3D;AAEA,SAAO;AACT;",
   "names": []
 }

package/dist/cjs/utils/useTree.js

@@ -40,6 +40,7 @@ var import_group_expands_helpers = require("./group-expands-helpers.js");
 const useTree = (data, props, states) => {
   const { setExpandedGroups } = states;
   const unfrozenData = (0, import_react.useMemo)(() => (0, import_lodash.cloneDeep)(data), [data]);
+  const visibleItemsRef = (0, import_react.useRef)([]);
   const tree = (0, import_react.useMemo)(() => new import_tree_model.default(), []);
   const [treeData, setTreeData] = (0, import_react.useState)({
     id: "__ds_tree_root",
@@ -86,6 +87,7 @@ const useTree = (data, props, states) => {
       highlightOnlyQuery
     );
     setVisibleItems(parsedVisibleItems);
+    visibleItemsRef.current = parsedVisibleItems;
     onVisibleItemsChange(parsedVisibleItems);
     setExpandedGroups(newExpandedHashMap);
   }, [
@@ -106,7 +108,8 @@ const useTree = (data, props, states) => {
     treeRoot,
     rerenderItems,
     triggerTreeRerender,
-    updateUserExpandedState
+    updateUserExpandedState,
+    visibleItemsRef
   };
 };
 //# sourceMappingURL=useTree.js.map

package/dist/cjs/utils/useTree.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/utils/useTree.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useState, useCallback, useMemo, useEffect } from 'react';\nimport TreeModel from 'tree-model';\nimport { cloneDeep } from 'lodash';\nimport { walkVisibles, enrichNodeModelInPlace, flattenTreeForDnD } from './tree-helpers.js';\nimport type { DSTreeviewT } from '../react-desc-prop-types.js';\nimport type { DSTreeviewInternalsT } from '../sharedTypes.js';\nimport { updateExpandedState } from './group-expands-helpers.js';\n\nexport const useTree = (\n  data: DSTreeviewT.SimpleItem[],\n  props: DSTreeviewT.Props,\n  states: {\n    setExpandedGroups: DSTreeviewInternalsT.StateSetter<DSTreeviewT.ExpandedItems>;\n  },\n) => {\n  const { setExpandedGroups } = states;\n  const unfrozenData = useMemo(() => cloneDeep(data), [data]);\n\n  // convert data into a TreeModel with extra isExpanded prop\n  // root element type is an exception, children model is based on what the dev passed on\n  // since root is an excepcion we must typecast\n  const tree = useMemo(() => new TreeModel(), []);\n  const [treeData, setTreeData] = useState({\n    id: '__ds_tree_root',\n    name: '__root',\n    isExpanded: true,\n    children: unfrozenData,\n  } as unknown as DSTreeviewT.Item);\n\n  useEffect(() => {\n    setTreeData({\n      id: '__ds_tree_root',\n      name: '__root',\n      isExpanded: true,\n      children: unfrozenData,\n    } as unknown as DSTreeviewT.Item);\n  }, [unfrozenData]);\n\n  // expose a way to rerender the tree\n  //   used for expand functionality\n  const [rerenderItems, setRerenderItems] = useState({});\n  const triggerTreeRerender = useCallback(() => {\n    setRerenderItems({});\n  }, []);\n\n  // when re-rendering we re-parse the list\n  // Here we are initializing the tree with a function since for some reason,\n  // tree.parse is re-executing every time the treeview is re-rendered. I honestly don't know why.\n  const [treeRoot, setTreeRoot] = useState(() => tree.parse(treeData));\n  useEffect(() => {\n    setTreeRoot(tree.parse(treeData));\n  }, [treeData, rerenderItems, tree]);\n\n  const [visibleItems, setVisibleItems] = useState<DSTreeviewT.Item[]>([]);\n\n  const { searchQuery, highlightOnlyQuery, onVisibleItemsChange, selection, expanded, onExpandChange } = props;\n\n  const updateUserExpandedState = useCallback(() => {\n    updateExpandedState(treeRoot, onExpandChange);\n  }, [treeRoot, onExpandChange]);\n  // we add missing properties to the received Items\n  //   not the best of the patterns, but it works\n  //   this is where we convert \"SimpleItems\" to \"Items\"\n  //   this was done to avoid breaking changes back in v1\n  useEffect(() => {\n    const parsedVisibleItems: DSTreeviewT.Item[] = [];\n    const newExpandedHashMap: DSTreeviewT.ExpandedItems = {};\n    const shouldContinueWalking = true; // tree-model ask we return true if we want to continue walking\n    treeRoot.walk((node) => {\n      enrichNodeModelInPlace(node, searchQuery, selection, expanded);\n      if (node.model.id && node.model.isGroup && node.model.isExpanded) newExpandedHashMap[node.model.id] = true;\n      return shouldContinueWalking;\n    });\n\n    walkVisibles(\n      treeRoot,\n      (node) => {\n        parsedVisibleItems.push({ ...node.model, node });\n      },\n      true,\n      highlightOnlyQuery,\n    );\n    setVisibleItems(parsedVisibleItems);\n    onVisibleItemsChange(parsedVisibleItems);\n\n    setExpandedGroups(newExpandedHashMap);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    treeRoot,\n    rerenderItems,\n    searchQuery,\n    highlightOnlyQuery,\n    selection,\n    expanded,\n    setExpandedGroups,\n    // onVisibleItemsChange // evaluate potential performance hit?\n  ]);\n\n  const flattenedItems = useMemo(() => flattenTreeForDnD(treeRoot), [treeRoot]);\n\n  return {\n    visibleItems,\n    flattenedItems,\n    tree,\n    treeRoot,\n    rerenderItems,\n    triggerTreeRerender,\n    updateUserExpandedState,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA0D;AAC1D,wBAAsB;AACtB,oBAA0B;AAC1B,0BAAwE;AAGxE,mCAAoC;AAE7B,MAAM,UAAU,CACrB,MACA,OACA,WAGG;AACH,QAAM,EAAE,kBAAkB,IAAI;AAC9B,QAAM,mBAAe,sBAAQ,UAAM,yBAAU,IAAI,GAAG,CAAC,IAAI,CAAC;AAK1D,QAAM,WAAO,sBAAQ,MAAM,IAAI,kBAAAA,QAAU,GAAG,CAAC,CAAC;AAC9C,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS;AAAA,IACvC,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ,CAAgC;AAEhC,8BAAU,MAAM;AACd,gBAAY;AAAA,MACV,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,UAAU;AAAA,IACZ,CAAgC;AAAA,EAClC,GAAG,CAAC,YAAY,CAAC;AAIjB,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,CAAC,CAAC;AACrD,QAAM,0BAAsB,0BAAY,MAAM;AAC5C,qBAAiB,CAAC,CAAC;AAAA,EACrB,GAAG,CAAC,CAAC;AAKL,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,MAAM,KAAK,MAAM,QAAQ,CAAC;AACnE,8BAAU,MAAM;AACd,gBAAY,KAAK,MAAM,QAAQ,CAAC;AAAA,EAClC,GAAG,CAAC,UAAU,eAAe,IAAI,CAAC;AAElC,QAAM,CAAC,cAAc,eAAe,QAAI,uBAA6B,CAAC,CAAC;AAEvE,QAAM,EAAE,aAAa,oBAAoB,sBAAsB,WAAW,UAAU,eAAe,IAAI;AAEvG,QAAM,8BAA0B,0BAAY,MAAM;AAChD,0DAAoB,UAAU,cAAc;AAAA,EAC9C,GAAG,CAAC,UAAU,cAAc,CAAC;AAK7B,8BAAU,MAAM;AACd,UAAM,qBAAyC,CAAC;AAChD,UAAM,qBAAgD,CAAC;AACvD,UAAM,wBAAwB;AAC9B,aAAS,KAAK,CAAC,SAAS;AACtB,sDAAuB,MAAM,aAAa,WAAW,QAAQ;AAC7D,UAAI,KAAK,MAAM,MAAM,KAAK,MAAM,WAAW,KAAK,MAAM,WAAY,oBAAmB,KAAK,MAAM,EAAE,IAAI;AACtG,aAAO;AAAA,IACT,CAAC;AAED;AAAA,MACE;AAAA,MACA,CAAC,SAAS;AACR,2BAAmB,KAAK,EAAE,GAAG,KAAK,OAAO,KAAK,CAAC;AAAA,MACjD;AAAA,MACA;AAAA,MACA;AAAA,IACF;AACA,oBAAgB,kBAAkB;AAClC,yBAAqB,kBAAkB;AAEvC,sBAAkB,kBAAkB;AAAA,EAEtC,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,EAEF,CAAC;AAED,QAAM,qBAAiB,sBAAQ,UAAM,uCAAkB,QAAQ,GAAG,CAAC,QAAQ,CAAC;AAE5E,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { useState, useCallback, useRef, useMemo, useEffect } from 'react';\nimport TreeModel from 'tree-model';\nimport { cloneDeep } from 'lodash';\nimport { walkVisibles, enrichNodeModelInPlace, flattenTreeForDnD } from './tree-helpers.js';\nimport type { DSTreeviewT } from '../react-desc-prop-types.js';\nimport type { DSTreeviewInternalsT } from '../sharedTypes.js';\nimport { updateExpandedState } from './group-expands-helpers.js';\n\nexport const useTree = (\n  data: DSTreeviewT.SimpleItem[],\n  props: DSTreeviewT.Props,\n  states: {\n    setExpandedGroups: DSTreeviewInternalsT.StateSetter<DSTreeviewT.ExpandedItems>;\n  },\n) => {\n  const { setExpandedGroups } = states;\n  const unfrozenData = useMemo(() => cloneDeep(data), [data]);\n\n  const visibleItemsRef = useRef<DSTreeviewT.Item[]>([]);\n  // convert data into a TreeModel with extra isExpanded prop\n  // root element type is an exception, children model is based on what the dev passed on\n  // since root is an excepcion we must typecast\n  const tree = useMemo(() => new TreeModel(), []);\n  const [treeData, setTreeData] = useState({\n    id: '__ds_tree_root',\n    name: '__root',\n    isExpanded: true,\n    children: unfrozenData,\n  } as unknown as DSTreeviewT.Item);\n\n  useEffect(() => {\n    setTreeData({\n      id: '__ds_tree_root',\n      name: '__root',\n      isExpanded: true,\n      children: unfrozenData,\n    } as unknown as DSTreeviewT.Item);\n  }, [unfrozenData]);\n\n  // expose a way to rerender the tree\n  //   used for expand functionality\n  const [rerenderItems, setRerenderItems] = useState({});\n  const triggerTreeRerender = useCallback(() => {\n    setRerenderItems({});\n  }, []);\n\n  // when re-rendering we re-parse the list\n  // Here we are initializing the tree with a function since for some reason,\n  // tree.parse is re-executing every time the treeview is re-rendered. I honestly don't know why.\n  const [treeRoot, setTreeRoot] = useState(() => tree.parse(treeData));\n  useEffect(() => {\n    setTreeRoot(tree.parse(treeData));\n  }, [treeData, rerenderItems, tree]);\n\n  const [visibleItems, setVisibleItems] = useState<DSTreeviewT.Item[]>([]);\n\n  const { searchQuery, highlightOnlyQuery, onVisibleItemsChange, selection, expanded, onExpandChange } = props;\n\n  const updateUserExpandedState = useCallback(() => {\n    updateExpandedState(treeRoot, onExpandChange);\n  }, [treeRoot, onExpandChange]);\n  // we add missing properties to the received Items\n  //   not the best of the patterns, but it works\n  //   this is where we convert \"SimpleItems\" to \"Items\"\n  //   this was done to avoid breaking changes back in v1\n  useEffect(() => {\n    const parsedVisibleItems: DSTreeviewT.Item[] = [];\n    const newExpandedHashMap: DSTreeviewT.ExpandedItems = {};\n    const shouldContinueWalking = true; // tree-model ask we return true if we want to continue walking\n    treeRoot.walk((node) => {\n      enrichNodeModelInPlace(node, searchQuery, selection, expanded);\n      if (node.model.id && node.model.isGroup && node.model.isExpanded) newExpandedHashMap[node.model.id] = true;\n      return shouldContinueWalking;\n    });\n\n    walkVisibles(\n      treeRoot,\n      (node) => {\n        parsedVisibleItems.push({ ...node.model, node });\n      },\n      true,\n      highlightOnlyQuery,\n    );\n    setVisibleItems(parsedVisibleItems);\n    visibleItemsRef.current = parsedVisibleItems;\n    onVisibleItemsChange(parsedVisibleItems);\n\n    setExpandedGroups(newExpandedHashMap);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    treeRoot,\n    rerenderItems,\n    searchQuery,\n    highlightOnlyQuery,\n    selection,\n    expanded,\n    setExpandedGroups,\n    // onVisibleItemsChange // evaluate potential performance hit?\n  ]);\n\n  const flattenedItems = useMemo(() => flattenTreeForDnD(treeRoot), [treeRoot]);\n\n  return {\n    visibleItems,\n    flattenedItems,\n    tree,\n    treeRoot,\n    rerenderItems,\n    triggerTreeRerender,\n    updateUserExpandedState,\n    visibleItemsRef,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkE;AAClE,wBAAsB;AACtB,oBAA0B;AAC1B,0BAAwE;AAGxE,mCAAoC;AAE7B,MAAM,UAAU,CACrB,MACA,OACA,WAGG;AACH,QAAM,EAAE,kBAAkB,IAAI;AAC9B,QAAM,mBAAe,sBAAQ,UAAM,yBAAU,IAAI,GAAG,CAAC,IAAI,CAAC;AAE1D,QAAM,sBAAkB,qBAA2B,CAAC,CAAC;AAIrD,QAAM,WAAO,sBAAQ,MAAM,IAAI,kBAAAA,QAAU,GAAG,CAAC,CAAC;AAC9C,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS;AAAA,IACvC,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ,CAAgC;AAEhC,8BAAU,MAAM;AACd,gBAAY;AAAA,MACV,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,UAAU;AAAA,IACZ,CAAgC;AAAA,EAClC,GAAG,CAAC,YAAY,CAAC;AAIjB,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,CAAC,CAAC;AACrD,QAAM,0BAAsB,0BAAY,MAAM;AAC5C,qBAAiB,CAAC,CAAC;AAAA,EACrB,GAAG,CAAC,CAAC;AAKL,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,MAAM,KAAK,MAAM,QAAQ,CAAC;AACnE,8BAAU,MAAM;AACd,gBAAY,KAAK,MAAM,QAAQ,CAAC;AAAA,EAClC,GAAG,CAAC,UAAU,eAAe,IAAI,CAAC;AAElC,QAAM,CAAC,cAAc,eAAe,QAAI,uBAA6B,CAAC,CAAC;AAEvE,QAAM,EAAE,aAAa,oBAAoB,sBAAsB,WAAW,UAAU,eAAe,IAAI;AAEvG,QAAM,8BAA0B,0BAAY,MAAM;AAChD,0DAAoB,UAAU,cAAc;AAAA,EAC9C,GAAG,CAAC,UAAU,cAAc,CAAC;AAK7B,8BAAU,MAAM;AACd,UAAM,qBAAyC,CAAC;AAChD,UAAM,qBAAgD,CAAC;AACvD,UAAM,wBAAwB;AAC9B,aAAS,KAAK,CAAC,SAAS;AACtB,sDAAuB,MAAM,aAAa,WAAW,QAAQ;AAC7D,UAAI,KAAK,MAAM,MAAM,KAAK,MAAM,WAAW,KAAK,MAAM,WAAY,oBAAmB,KAAK,MAAM,EAAE,IAAI;AACtG,aAAO;AAAA,IACT,CAAC;AAED;AAAA,MACE;AAAA,MACA,CAAC,SAAS;AACR,2BAAmB,KAAK,EAAE,GAAG,KAAK,OAAO,KAAK,CAAC;AAAA,MACjD;AAAA,MACA;AAAA,MACA;AAAA,IACF;AACA,oBAAgB,kBAAkB;AAClC,oBAAgB,UAAU;AAC1B,yBAAqB,kBAAkB;AAEvC,sBAAkB,kBAAkB;AAAA,EAEtC,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,EAEF,CAAC;AAED,QAAM,qBAAiB,sBAAQ,UAAM,uCAAkB,QAAQ,GAAG,CAAC,QAAQ,CAAC;AAE5E,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": ["TreeModel"]
 }

package/dist/esm/config/useTreeview.js

@@ -50,13 +50,17 @@ const useTreeview = (props) => {
     return internallySelectedCheckboxes;
   }, [controlledSelection, internallySelectedCheckboxes]);
   const [expandedGroups, setExpandedGroups] = useState({});
-  const { visibleItems, flattenedItems, tree, treeRoot, triggerTreeRerender, updateUserExpandedState } = useTree(
-    data,
-    propsWithDefault,
-    {
-      setExpandedGroups
-    }
-  );
+  const {
+    visibleItems,
+    visibleItemsRef,
+    flattenedItems,
+    tree,
+    treeRoot,
+    triggerTreeRerender,
+    updateUserExpandedState
+  } = useTree(data, propsWithDefault, {
+    setExpandedGroups
+  });
   const virtualListRef = useRef();
   const virtualListHelpers = useVirtual({
     size: visibleItems.length,
@@ -94,7 +98,8 @@ const useTreeview = (props) => {
       hoverItem,
       setHoverItem,
       handleExpandGroup,
-      updateUserExpandedState
+      updateUserExpandedState,
+      visibleItemsRef
     }),
     [
       propsWithDefault,
@@ -115,7 +120,8 @@ const useTreeview = (props) => {
       focusedItem,
       hoverItem,
       handleExpandGroup,
-      updateUserExpandedState
+      updateUserExpandedState,
+      visibleItemsRef
     ]
   );
   if (instanceRef) instanceRef.current = treeRef.current;

package/dist/esm/config/useTreeview.js.map

@@ -1,7 +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 { uid } from 'uid';\nimport { TreeViewPropTypes } from '../react-desc-prop-types.js';\nimport { defaultProps } from '../TreeViewContext.js';\nimport { TreeDndPlugin } from '../plugins/dnd/index.js';\nimport { useTree } from '../utils/useTree.js';\nimport { useNotifyExpandedChange, toggleItemExpand } from '../utils/group-expands-helpers.js';\nimport { useInstanceRefActions } from '../utils/useInstanceRefActions.js';\nimport { useGlobalToggleAllExpandShortcut } from '../utils/keyboard-helpers.js';\nimport type { DSTreeviewT } from '../react-desc-prop-types.js';\nimport type { DSTreeviewInternalsT } from '../sharedTypes.js';\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(propsWithDefault, TreeViewPropTypes, 'DSTreeView');\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    controlledSelection,\n    onInstanceRefInitialized,\n  } = propsWithDefault;\n  const [uniqueTreeViewUUID] = useState(uid(6));\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 [internallySelectedCheckboxes, setInternallySelectedCheckboxes] = useState({\n    ...selection,\n  });\n\n  // if user provides \"controlledSelection\" selectedCheckboxes containes the user selection\n  // else it contains the internal selection\n  const selectedCheckboxes = useMemo(() => {\n    if (controlledSelection) return controlledSelection;\n    return internallySelectedCheckboxes;\n  }, [controlledSelection, internallySelectedCheckboxes]);\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      setInternallySelectedCheckboxes,\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": "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",
+  "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 { uid } from 'uid';\nimport { TreeViewPropTypes } from '../react-desc-prop-types.js';\nimport { defaultProps } from '../TreeViewContext.js';\nimport { TreeDndPlugin } from '../plugins/dnd/index.js';\nimport { useTree } from '../utils/useTree.js';\nimport { useNotifyExpandedChange, toggleItemExpand } from '../utils/group-expands-helpers.js';\nimport { useInstanceRefActions } from '../utils/useInstanceRefActions.js';\nimport { useGlobalToggleAllExpandShortcut } from '../utils/keyboard-helpers.js';\nimport type { DSTreeviewT } from '../react-desc-prop-types.js';\nimport type { DSTreeviewInternalsT } from '../sharedTypes.js';\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(propsWithDefault, TreeViewPropTypes, 'DSTreeView');\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    controlledSelection,\n    onInstanceRefInitialized,\n  } = propsWithDefault;\n  const [uniqueTreeViewUUID] = useState(uid(6));\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 [internallySelectedCheckboxes, setInternallySelectedCheckboxes] = useState({\n    ...selection,\n  });\n\n  // if user provides \"controlledSelection\" selectedCheckboxes containes the user selection\n  // else it contains the internal selection\n  const selectedCheckboxes = useMemo(() => {\n    if (controlledSelection) return controlledSelection;\n    return internallySelectedCheckboxes;\n  }, [controlledSelection, internallySelectedCheckboxes]);\n\n  const [expandedGroups, setExpandedGroups] = useState<DSTreeviewT.ExpandedItems>({});\n  const {\n    visibleItems,\n    visibleItemsRef,\n    flattenedItems,\n    tree,\n    treeRoot,\n    triggerTreeRerender,\n    updateUserExpandedState,\n  } = useTree(data, propsWithDefault, {\n    setExpandedGroups,\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      setInternallySelectedCheckboxes,\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      visibleItemsRef,\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      visibleItemsRef,\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": "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",
   "names": []
 }

package/dist/esm/utils/useInstanceRefActions.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { useLayoutEffect, useMemo, useState, useRef, useCallback } from "react";
+import { useEffect, useMemo, useState, useRef, useCallback } from "react";
 import { focusItem } from "./tree-helpers.js";
 import { toggleExpandAllHelper } from "./group-expands-helpers.js";
 const useInstanceRefActions = ({ actions }, ctx) => {
@@ -8,6 +8,7 @@ const useInstanceRefActions = ({ actions }, ctx) => {
     virtualListHelpers,
     treeRoot,
     visibleItems,
+    visibleItemsRef,
     triggerTreeRerender,
     updateUserExpandedState,
     setSelectedItem,
@@ -17,13 +18,15 @@ const useInstanceRefActions = ({ actions }, ctx) => {
   const { current: promises } = useRef({});
   const { scrollToIndex } = useMemo(() => virtualListHelpers, [virtualListHelpers]);
   const [expandPromise, setPromise] = useState();
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (expandPromise && promises.expandResolve) {
-      promises.expandResolve(visibleItems);
+      if (promises.expandResolve && visibleItemsRef.current) {
+        promises.expandResolve(visibleItemsRef.current);
+      }
       promises.expandResolve = null;
       setPromise(null);
     }
-  }, [visibleItems, expandPromise, promises]);
+  }, [visibleItemsRef, expandPromise, promises]);
   actions.toggleExpandAll = useCallback(
     (isExpand) => {
       const p = new Promise((resolve) => {

package/dist/esm/utils/useInstanceRefActions.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/useInstanceRefActions.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useLayoutEffect, useMemo, useState, useRef, useCallback } from 'react';\nimport { focusItem } from './tree-helpers.js';\nimport { toggleExpandAllHelper } from './group-expands-helpers.js';\nimport type { DSTreeviewT } from '../react-desc-prop-types.js';\nimport type { DSTreeviewInternalsT } from '../sharedTypes.js';\n\ninterface PromisesRefT {\n  expandResolve?: null | ((value: DSTreeviewT.Item[] | PromiseLike<DSTreeviewT.Item[]>) => void);\n  scrollTo?: null | ((value: DSTreeviewT.Item[] | PromiseLike<DSTreeviewT.Item[]>) => void);\n}\n\nexport const useInstanceRefActions = ({ actions }: DSTreeviewT.InstanceRef, ctx: DSTreeviewInternalsT.CTX) => {\n  const {\n    props: { onItemFocus, onItemActivate },\n    virtualListHelpers,\n    treeRoot,\n    visibleItems,\n    triggerTreeRerender,\n    updateUserExpandedState,\n    setSelectedItem,\n    setFocusedItem,\n    setLatestToggledItem,\n  } = ctx;\n  const { current: promises } = useRef<PromisesRefT>({});\n  const { scrollToIndex } = useMemo(() => virtualListHelpers, [virtualListHelpers]);\n  const [expandPromise, setPromise] = useState<Promise<DSTreeviewT.Item[]> | undefined | null>();\n\n  useLayoutEffect(() => {\n    if (expandPromise && promises.expandResolve) {\n      promises.expandResolve(visibleItems);\n      promises.expandResolve = null;\n      setPromise(null);\n    }\n  }, [visibleItems, expandPromise, promises]);\n\n  actions.toggleExpandAll = useCallback(\n    (isExpand) => {\n      const p = new Promise<DSTreeviewT.Item[]>((resolve) => {\n        promises.expandResolve = resolve;\n        if (treeRoot)\n          toggleExpandAllHelper(isExpand, treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState);\n      });\n      setPromise(p);\n      return p;\n    },\n    [promises, treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState],\n  );\n  actions.scrollTo = useCallback(\n    (indx, opts = { align: 'start' }) => {\n      if (scrollToIndex) scrollToIndex(indx, opts);\n    },\n    [scrollToIndex],\n  );\n\n  actions.setSelectedItemByVirtualIndex = useCallback(\n    (index) => {\n      const itemByIndex = visibleItems[index];\n      setSelectedItem(itemByIndex);\n      onItemActivate(itemByIndex);\n    },\n    [visibleItems, setSelectedItem, onItemActivate],\n  );\n\n  actions.setFocusedItemByVirtualIndex = useCallback(\n    (index, opts = { align: 'start', withScroll: false }) => {\n      const itemByIndex = visibleItems[index];\n      const onItemFocusParams = {\n        itemIndex: itemByIndex.virtualIndex as number,\n        scrollToItem: () => scrollToIndex(index, opts),\n        item: itemByIndex,\n      };\n\n      if (opts.withScroll && scrollToIndex) {\n        scrollToIndex(index, opts);\n        setTimeout(() => {\n          setFocusedItem(itemByIndex);\n          focusItem(itemByIndex);\n          onItemFocus(onItemFocusParams);\n        }, 300);\n      } else {\n        setFocusedItem(itemByIndex);\n        focusItem(itemByIndex);\n        onItemFocus(onItemFocusParams);\n      }\n    },\n    [visibleItems, scrollToIndex, setFocusedItem, onItemFocus],\n  );\n\n  return actions;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,iBAAiB,SAAS,UAAU,QAAQ,mBAAmB;AACxE,SAAS,iBAAiB;AAC1B,SAAS,6BAA6B;AAS/B,MAAM,wBAAwB,CAAC,EAAE,QAAQ,GAA4B,QAAkC;AAC5G,QAAM;AAAA,IACJ,OAAO,EAAE,aAAa,eAAe;AAAA,IACrC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,SAAS,SAAS,IAAI,OAAqB,CAAC,CAAC;AACrD,QAAM,EAAE,cAAc,IAAI,QAAQ,MAAM,oBAAoB,CAAC,kBAAkB,CAAC;AAChF,QAAM,CAAC,eAAe,UAAU,IAAI,SAAyD;AAE7F,kBAAgB,MAAM;AACpB,QAAI,iBAAiB,SAAS,eAAe;AAC3C,eAAS,cAAc,YAAY;AACnC,eAAS,gBAAgB;AACzB,iBAAW,IAAI;AAAA,IACjB;AAAA,EACF,GAAG,CAAC,cAAc,eAAe,QAAQ,CAAC;AAE1C,UAAQ,kBAAkB;AAAA,IACxB,CAAC,aAAa;AACZ,YAAM,IAAI,IAAI,QAA4B,CAAC,YAAY;AACrD,iBAAS,gBAAgB;AACzB,YAAI;AACF,gCAAsB,UAAU,UAAU,qBAAqB,sBAAsB,uBAAuB;AAAA,MAChH,CAAC;AACD,iBAAW,CAAC;AACZ,aAAO;AAAA,IACT;AAAA,IACA,CAAC,UAAU,UAAU,qBAAqB,sBAAsB,uBAAuB;AAAA,EACzF;AACA,UAAQ,WAAW;AAAA,IACjB,CAAC,MAAM,OAAO,EAAE,OAAO,QAAQ,MAAM;AACnC,UAAI,cAAe,eAAc,MAAM,IAAI;AAAA,IAC7C;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAEA,UAAQ,gCAAgC;AAAA,IACtC,CAAC,UAAU;AACT,YAAM,cAAc,aAAa,KAAK;AACtC,sBAAgB,WAAW;AAC3B,qBAAe,WAAW;AAAA,IAC5B;AAAA,IACA,CAAC,cAAc,iBAAiB,cAAc;AAAA,EAChD;AAEA,UAAQ,+BAA+B;AAAA,IACrC,CAAC,OAAO,OAAO,EAAE,OAAO,SAAS,YAAY,MAAM,MAAM;AACvD,YAAM,cAAc,aAAa,KAAK;AACtC,YAAM,oBAAoB;AAAA,QACxB,WAAW,YAAY;AAAA,QACvB,cAAc,MAAM,cAAc,OAAO,IAAI;AAAA,QAC7C,MAAM;AAAA,MACR;AAEA,UAAI,KAAK,cAAc,eAAe;AACpC,sBAAc,OAAO,IAAI;AACzB,mBAAW,MAAM;AACf,yBAAe,WAAW;AAC1B,oBAAU,WAAW;AACrB,sBAAY,iBAAiB;AAAA,QAC/B,GAAG,GAAG;AAAA,MACR,OAAO;AACL,uBAAe,WAAW;AAC1B,kBAAU,WAAW;AACrB,oBAAY,iBAAiB;AAAA,MAC/B;AAAA,IACF;AAAA,IACA,CAAC,cAAc,eAAe,gBAAgB,WAAW;AAAA,EAC3D;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useEffect, useMemo, useState, useRef, useCallback } from 'react';\nimport { focusItem } from './tree-helpers.js';\nimport { toggleExpandAllHelper } from './group-expands-helpers.js';\nimport type { DSTreeviewT } from '../react-desc-prop-types.js';\nimport type { DSTreeviewInternalsT } from '../sharedTypes.js';\n\ninterface PromisesRefT {\n  expandResolve?: null | ((value: DSTreeviewT.Item[] | PromiseLike<DSTreeviewT.Item[]>) => void);\n  scrollTo?: null | ((value: DSTreeviewT.Item[] | PromiseLike<DSTreeviewT.Item[]>) => void);\n}\n\nexport const useInstanceRefActions = ({ actions }: DSTreeviewT.InstanceRef, ctx: DSTreeviewInternalsT.CTX) => {\n  const {\n    props: { onItemFocus, onItemActivate },\n    virtualListHelpers,\n    treeRoot,\n    visibleItems,\n    visibleItemsRef,\n    triggerTreeRerender,\n    updateUserExpandedState,\n    setSelectedItem,\n    setFocusedItem,\n    setLatestToggledItem,\n  } = ctx;\n  const { current: promises } = useRef<PromisesRefT>({});\n  const { scrollToIndex } = useMemo(() => virtualListHelpers, [virtualListHelpers]);\n  const [expandPromise, setPromise] = useState<Promise<DSTreeviewT.Item[]> | undefined | null>();\n\n  useEffect(() => {\n    if (expandPromise && promises.expandResolve) {\n      if (promises.expandResolve && visibleItemsRef.current) {\n        promises.expandResolve(visibleItemsRef.current);\n      }\n      promises.expandResolve = null;\n      setPromise(null);\n    }\n  }, [visibleItemsRef, expandPromise, promises]);\n\n  actions.toggleExpandAll = useCallback(\n    (isExpand) => {\n      const p = new Promise<DSTreeviewT.Item[]>((resolve) => {\n        promises.expandResolve = resolve;\n        if (treeRoot)\n          toggleExpandAllHelper(isExpand, treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState);\n      });\n      setPromise(p);\n      return p;\n    },\n    [promises, treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState],\n  );\n  actions.scrollTo = useCallback(\n    (indx, opts = { align: 'start' }) => {\n      if (scrollToIndex) scrollToIndex(indx, opts);\n    },\n    [scrollToIndex],\n  );\n\n  actions.setSelectedItemByVirtualIndex = useCallback(\n    (index) => {\n      const itemByIndex = visibleItems[index];\n      setSelectedItem(itemByIndex);\n      onItemActivate(itemByIndex);\n    },\n    [visibleItems, setSelectedItem, onItemActivate],\n  );\n\n  actions.setFocusedItemByVirtualIndex = useCallback(\n    (index, opts = { align: 'start', withScroll: false }) => {\n      const itemByIndex = visibleItems[index];\n      const onItemFocusParams = {\n        itemIndex: itemByIndex.virtualIndex as number,\n        scrollToItem: () => scrollToIndex(index, opts),\n        item: itemByIndex,\n      };\n\n      if (opts.withScroll && scrollToIndex) {\n        scrollToIndex(index, opts);\n        setTimeout(() => {\n          setFocusedItem(itemByIndex);\n          focusItem(itemByIndex);\n          onItemFocus(onItemFocusParams);\n        }, 300);\n      } else {\n        setFocusedItem(itemByIndex);\n        focusItem(itemByIndex);\n        onItemFocus(onItemFocusParams);\n      }\n    },\n    [visibleItems, scrollToIndex, setFocusedItem, onItemFocus],\n  );\n\n  return actions;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW,SAAS,UAAU,QAAQ,mBAAmB;AAClE,SAAS,iBAAiB;AAC1B,SAAS,6BAA6B;AAS/B,MAAM,wBAAwB,CAAC,EAAE,QAAQ,GAA4B,QAAkC;AAC5G,QAAM;AAAA,IACJ,OAAO,EAAE,aAAa,eAAe;AAAA,IACrC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,SAAS,SAAS,IAAI,OAAqB,CAAC,CAAC;AACrD,QAAM,EAAE,cAAc,IAAI,QAAQ,MAAM,oBAAoB,CAAC,kBAAkB,CAAC;AAChF,QAAM,CAAC,eAAe,UAAU,IAAI,SAAyD;AAE7F,YAAU,MAAM;AACd,QAAI,iBAAiB,SAAS,eAAe;AAC3C,UAAI,SAAS,iBAAiB,gBAAgB,SAAS;AACrD,iBAAS,cAAc,gBAAgB,OAAO;AAAA,MAChD;AACA,eAAS,gBAAgB;AACzB,iBAAW,IAAI;AAAA,IACjB;AAAA,EACF,GAAG,CAAC,iBAAiB,eAAe,QAAQ,CAAC;AAE7C,UAAQ,kBAAkB;AAAA,IACxB,CAAC,aAAa;AACZ,YAAM,IAAI,IAAI,QAA4B,CAAC,YAAY;AACrD,iBAAS,gBAAgB;AACzB,YAAI;AACF,gCAAsB,UAAU,UAAU,qBAAqB,sBAAsB,uBAAuB;AAAA,MAChH,CAAC;AACD,iBAAW,CAAC;AACZ,aAAO;AAAA,IACT;AAAA,IACA,CAAC,UAAU,UAAU,qBAAqB,sBAAsB,uBAAuB;AAAA,EACzF;AACA,UAAQ,WAAW;AAAA,IACjB,CAAC,MAAM,OAAO,EAAE,OAAO,QAAQ,MAAM;AACnC,UAAI,cAAe,eAAc,MAAM,IAAI;AAAA,IAC7C;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAEA,UAAQ,gCAAgC;AAAA,IACtC,CAAC,UAAU;AACT,YAAM,cAAc,aAAa,KAAK;AACtC,sBAAgB,WAAW;AAC3B,qBAAe,WAAW;AAAA,IAC5B;AAAA,IACA,CAAC,cAAc,iBAAiB,cAAc;AAAA,EAChD;AAEA,UAAQ,+BAA+B;AAAA,IACrC,CAAC,OAAO,OAAO,EAAE,OAAO,SAAS,YAAY,MAAM,MAAM;AACvD,YAAM,cAAc,aAAa,KAAK;AACtC,YAAM,oBAAoB;AAAA,QACxB,WAAW,YAAY;AAAA,QACvB,cAAc,MAAM,cAAc,OAAO,IAAI;AAAA,QAC7C,MAAM;AAAA,MACR;AAEA,UAAI,KAAK,cAAc,eAAe;AACpC,sBAAc,OAAO,IAAI;AACzB,mBAAW,MAAM;AACf,yBAAe,WAAW;AAC1B,oBAAU,WAAW;AACrB,sBAAY,iBAAiB;AAAA,QAC/B,GAAG,GAAG;AAAA,MACR,OAAO;AACL,uBAAe,WAAW;AAC1B,kBAAU,WAAW;AACrB,oBAAY,iBAAiB;AAAA,MAC/B;AAAA,IACF;AAAA,IACA,CAAC,cAAc,eAAe,gBAAgB,WAAW;AAAA,EAC3D;AAEA,SAAO;AACT;",
   "names": []
 }

package/dist/esm/utils/useTree.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { useState, useCallback, useMemo, useEffect } from "react";
+import { useState, useCallback, useRef, useMemo, useEffect } from "react";
 import TreeModel from "tree-model";
 import { cloneDeep } from "lodash";
 import { walkVisibles, enrichNodeModelInPlace, flattenTreeForDnD } from "./tree-helpers.js";
@@ -7,6 +7,7 @@ import { updateExpandedState } from "./group-expands-helpers.js";
 const useTree = (data, props, states) => {
   const { setExpandedGroups } = states;
   const unfrozenData = useMemo(() => cloneDeep(data), [data]);
+  const visibleItemsRef = useRef([]);
   const tree = useMemo(() => new TreeModel(), []);
   const [treeData, setTreeData] = useState({
     id: "__ds_tree_root",
@@ -53,6 +54,7 @@ const useTree = (data, props, states) => {
       highlightOnlyQuery
     );
     setVisibleItems(parsedVisibleItems);
+    visibleItemsRef.current = parsedVisibleItems;
     onVisibleItemsChange(parsedVisibleItems);
     setExpandedGroups(newExpandedHashMap);
   }, [
@@ -73,7 +75,8 @@ const useTree = (data, props, states) => {
     treeRoot,
     rerenderItems,
     triggerTreeRerender,
-    updateUserExpandedState
+    updateUserExpandedState,
+    visibleItemsRef
   };
 };
 export {

package/dist/esm/utils/useTree.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/useTree.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useState, useCallback, useMemo, useEffect } from 'react';\nimport TreeModel from 'tree-model';\nimport { cloneDeep } from 'lodash';\nimport { walkVisibles, enrichNodeModelInPlace, flattenTreeForDnD } from './tree-helpers.js';\nimport type { DSTreeviewT } from '../react-desc-prop-types.js';\nimport type { DSTreeviewInternalsT } from '../sharedTypes.js';\nimport { updateExpandedState } from './group-expands-helpers.js';\n\nexport const useTree = (\n  data: DSTreeviewT.SimpleItem[],\n  props: DSTreeviewT.Props,\n  states: {\n    setExpandedGroups: DSTreeviewInternalsT.StateSetter<DSTreeviewT.ExpandedItems>;\n  },\n) => {\n  const { setExpandedGroups } = states;\n  const unfrozenData = useMemo(() => cloneDeep(data), [data]);\n\n  // convert data into a TreeModel with extra isExpanded prop\n  // root element type is an exception, children model is based on what the dev passed on\n  // since root is an excepcion we must typecast\n  const tree = useMemo(() => new TreeModel(), []);\n  const [treeData, setTreeData] = useState({\n    id: '__ds_tree_root',\n    name: '__root',\n    isExpanded: true,\n    children: unfrozenData,\n  } as unknown as DSTreeviewT.Item);\n\n  useEffect(() => {\n    setTreeData({\n      id: '__ds_tree_root',\n      name: '__root',\n      isExpanded: true,\n      children: unfrozenData,\n    } as unknown as DSTreeviewT.Item);\n  }, [unfrozenData]);\n\n  // expose a way to rerender the tree\n  //   used for expand functionality\n  const [rerenderItems, setRerenderItems] = useState({});\n  const triggerTreeRerender = useCallback(() => {\n    setRerenderItems({});\n  }, []);\n\n  // when re-rendering we re-parse the list\n  // Here we are initializing the tree with a function since for some reason,\n  // tree.parse is re-executing every time the treeview is re-rendered. I honestly don't know why.\n  const [treeRoot, setTreeRoot] = useState(() => tree.parse(treeData));\n  useEffect(() => {\n    setTreeRoot(tree.parse(treeData));\n  }, [treeData, rerenderItems, tree]);\n\n  const [visibleItems, setVisibleItems] = useState<DSTreeviewT.Item[]>([]);\n\n  const { searchQuery, highlightOnlyQuery, onVisibleItemsChange, selection, expanded, onExpandChange } = props;\n\n  const updateUserExpandedState = useCallback(() => {\n    updateExpandedState(treeRoot, onExpandChange);\n  }, [treeRoot, onExpandChange]);\n  // we add missing properties to the received Items\n  //   not the best of the patterns, but it works\n  //   this is where we convert \"SimpleItems\" to \"Items\"\n  //   this was done to avoid breaking changes back in v1\n  useEffect(() => {\n    const parsedVisibleItems: DSTreeviewT.Item[] = [];\n    const newExpandedHashMap: DSTreeviewT.ExpandedItems = {};\n    const shouldContinueWalking = true; // tree-model ask we return true if we want to continue walking\n    treeRoot.walk((node) => {\n      enrichNodeModelInPlace(node, searchQuery, selection, expanded);\n      if (node.model.id && node.model.isGroup && node.model.isExpanded) newExpandedHashMap[node.model.id] = true;\n      return shouldContinueWalking;\n    });\n\n    walkVisibles(\n      treeRoot,\n      (node) => {\n        parsedVisibleItems.push({ ...node.model, node });\n      },\n      true,\n      highlightOnlyQuery,\n    );\n    setVisibleItems(parsedVisibleItems);\n    onVisibleItemsChange(parsedVisibleItems);\n\n    setExpandedGroups(newExpandedHashMap);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    treeRoot,\n    rerenderItems,\n    searchQuery,\n    highlightOnlyQuery,\n    selection,\n    expanded,\n    setExpandedGroups,\n    // onVisibleItemsChange // evaluate potential performance hit?\n  ]);\n\n  const flattenedItems = useMemo(() => flattenTreeForDnD(treeRoot), [treeRoot]);\n\n  return {\n    visibleItems,\n    flattenedItems,\n    tree,\n    treeRoot,\n    rerenderItems,\n    triggerTreeRerender,\n    updateUserExpandedState,\n  };\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,UAAU,aAAa,SAAS,iBAAiB;AAC1D,OAAO,eAAe;AACtB,SAAS,iBAAiB;AAC1B,SAAS,cAAc,wBAAwB,yBAAyB;AAGxE,SAAS,2BAA2B;AAE7B,MAAM,UAAU,CACrB,MACA,OACA,WAGG;AACH,QAAM,EAAE,kBAAkB,IAAI;AAC9B,QAAM,eAAe,QAAQ,MAAM,UAAU,IAAI,GAAG,CAAC,IAAI,CAAC;AAK1D,QAAM,OAAO,QAAQ,MAAM,IAAI,UAAU,GAAG,CAAC,CAAC;AAC9C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS;AAAA,IACvC,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ,CAAgC;AAEhC,YAAU,MAAM;AACd,gBAAY;AAAA,MACV,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,UAAU;AAAA,IACZ,CAAgC;AAAA,EAClC,GAAG,CAAC,YAAY,CAAC;AAIjB,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,CAAC,CAAC;AACrD,QAAM,sBAAsB,YAAY,MAAM;AAC5C,qBAAiB,CAAC,CAAC;AAAA,EACrB,GAAG,CAAC,CAAC;AAKL,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,MAAM,KAAK,MAAM,QAAQ,CAAC;AACnE,YAAU,MAAM;AACd,gBAAY,KAAK,MAAM,QAAQ,CAAC;AAAA,EAClC,GAAG,CAAC,UAAU,eAAe,IAAI,CAAC;AAElC,QAAM,CAAC,cAAc,eAAe,IAAI,SAA6B,CAAC,CAAC;AAEvE,QAAM,EAAE,aAAa,oBAAoB,sBAAsB,WAAW,UAAU,eAAe,IAAI;AAEvG,QAAM,0BAA0B,YAAY,MAAM;AAChD,wBAAoB,UAAU,cAAc;AAAA,EAC9C,GAAG,CAAC,UAAU,cAAc,CAAC;AAK7B,YAAU,MAAM;AACd,UAAM,qBAAyC,CAAC;AAChD,UAAM,qBAAgD,CAAC;AACvD,UAAM,wBAAwB;AAC9B,aAAS,KAAK,CAAC,SAAS;AACtB,6BAAuB,MAAM,aAAa,WAAW,QAAQ;AAC7D,UAAI,KAAK,MAAM,MAAM,KAAK,MAAM,WAAW,KAAK,MAAM,WAAY,oBAAmB,KAAK,MAAM,EAAE,IAAI;AACtG,aAAO;AAAA,IACT,CAAC;AAED;AAAA,MACE;AAAA,MACA,CAAC,SAAS;AACR,2BAAmB,KAAK,EAAE,GAAG,KAAK,OAAO,KAAK,CAAC;AAAA,MACjD;AAAA,MACA;AAAA,MACA;AAAA,IACF;AACA,oBAAgB,kBAAkB;AAClC,yBAAqB,kBAAkB;AAEvC,sBAAkB,kBAAkB;AAAA,EAEtC,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,EAEF,CAAC;AAED,QAAM,iBAAiB,QAAQ,MAAM,kBAAkB,QAAQ,GAAG,CAAC,QAAQ,CAAC;AAE5E,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useState, useCallback, useRef, useMemo, useEffect } from 'react';\nimport TreeModel from 'tree-model';\nimport { cloneDeep } from 'lodash';\nimport { walkVisibles, enrichNodeModelInPlace, flattenTreeForDnD } from './tree-helpers.js';\nimport type { DSTreeviewT } from '../react-desc-prop-types.js';\nimport type { DSTreeviewInternalsT } from '../sharedTypes.js';\nimport { updateExpandedState } from './group-expands-helpers.js';\n\nexport const useTree = (\n  data: DSTreeviewT.SimpleItem[],\n  props: DSTreeviewT.Props,\n  states: {\n    setExpandedGroups: DSTreeviewInternalsT.StateSetter<DSTreeviewT.ExpandedItems>;\n  },\n) => {\n  const { setExpandedGroups } = states;\n  const unfrozenData = useMemo(() => cloneDeep(data), [data]);\n\n  const visibleItemsRef = useRef<DSTreeviewT.Item[]>([]);\n  // convert data into a TreeModel with extra isExpanded prop\n  // root element type is an exception, children model is based on what the dev passed on\n  // since root is an excepcion we must typecast\n  const tree = useMemo(() => new TreeModel(), []);\n  const [treeData, setTreeData] = useState({\n    id: '__ds_tree_root',\n    name: '__root',\n    isExpanded: true,\n    children: unfrozenData,\n  } as unknown as DSTreeviewT.Item);\n\n  useEffect(() => {\n    setTreeData({\n      id: '__ds_tree_root',\n      name: '__root',\n      isExpanded: true,\n      children: unfrozenData,\n    } as unknown as DSTreeviewT.Item);\n  }, [unfrozenData]);\n\n  // expose a way to rerender the tree\n  //   used for expand functionality\n  const [rerenderItems, setRerenderItems] = useState({});\n  const triggerTreeRerender = useCallback(() => {\n    setRerenderItems({});\n  }, []);\n\n  // when re-rendering we re-parse the list\n  // Here we are initializing the tree with a function since for some reason,\n  // tree.parse is re-executing every time the treeview is re-rendered. I honestly don't know why.\n  const [treeRoot, setTreeRoot] = useState(() => tree.parse(treeData));\n  useEffect(() => {\n    setTreeRoot(tree.parse(treeData));\n  }, [treeData, rerenderItems, tree]);\n\n  const [visibleItems, setVisibleItems] = useState<DSTreeviewT.Item[]>([]);\n\n  const { searchQuery, highlightOnlyQuery, onVisibleItemsChange, selection, expanded, onExpandChange } = props;\n\n  const updateUserExpandedState = useCallback(() => {\n    updateExpandedState(treeRoot, onExpandChange);\n  }, [treeRoot, onExpandChange]);\n  // we add missing properties to the received Items\n  //   not the best of the patterns, but it works\n  //   this is where we convert \"SimpleItems\" to \"Items\"\n  //   this was done to avoid breaking changes back in v1\n  useEffect(() => {\n    const parsedVisibleItems: DSTreeviewT.Item[] = [];\n    const newExpandedHashMap: DSTreeviewT.ExpandedItems = {};\n    const shouldContinueWalking = true; // tree-model ask we return true if we want to continue walking\n    treeRoot.walk((node) => {\n      enrichNodeModelInPlace(node, searchQuery, selection, expanded);\n      if (node.model.id && node.model.isGroup && node.model.isExpanded) newExpandedHashMap[node.model.id] = true;\n      return shouldContinueWalking;\n    });\n\n    walkVisibles(\n      treeRoot,\n      (node) => {\n        parsedVisibleItems.push({ ...node.model, node });\n      },\n      true,\n      highlightOnlyQuery,\n    );\n    setVisibleItems(parsedVisibleItems);\n    visibleItemsRef.current = parsedVisibleItems;\n    onVisibleItemsChange(parsedVisibleItems);\n\n    setExpandedGroups(newExpandedHashMap);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    treeRoot,\n    rerenderItems,\n    searchQuery,\n    highlightOnlyQuery,\n    selection,\n    expanded,\n    setExpandedGroups,\n    // onVisibleItemsChange // evaluate potential performance hit?\n  ]);\n\n  const flattenedItems = useMemo(() => flattenTreeForDnD(treeRoot), [treeRoot]);\n\n  return {\n    visibleItems,\n    flattenedItems,\n    tree,\n    treeRoot,\n    rerenderItems,\n    triggerTreeRerender,\n    updateUserExpandedState,\n    visibleItemsRef,\n  };\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,UAAU,aAAa,QAAQ,SAAS,iBAAiB;AAClE,OAAO,eAAe;AACtB,SAAS,iBAAiB;AAC1B,SAAS,cAAc,wBAAwB,yBAAyB;AAGxE,SAAS,2BAA2B;AAE7B,MAAM,UAAU,CACrB,MACA,OACA,WAGG;AACH,QAAM,EAAE,kBAAkB,IAAI;AAC9B,QAAM,eAAe,QAAQ,MAAM,UAAU,IAAI,GAAG,CAAC,IAAI,CAAC;AAE1D,QAAM,kBAAkB,OAA2B,CAAC,CAAC;AAIrD,QAAM,OAAO,QAAQ,MAAM,IAAI,UAAU,GAAG,CAAC,CAAC;AAC9C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS;AAAA,IACvC,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ,CAAgC;AAEhC,YAAU,MAAM;AACd,gBAAY;AAAA,MACV,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,UAAU;AAAA,IACZ,CAAgC;AAAA,EAClC,GAAG,CAAC,YAAY,CAAC;AAIjB,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,CAAC,CAAC;AACrD,QAAM,sBAAsB,YAAY,MAAM;AAC5C,qBAAiB,CAAC,CAAC;AAAA,EACrB,GAAG,CAAC,CAAC;AAKL,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,MAAM,KAAK,MAAM,QAAQ,CAAC;AACnE,YAAU,MAAM;AACd,gBAAY,KAAK,MAAM,QAAQ,CAAC;AAAA,EAClC,GAAG,CAAC,UAAU,eAAe,IAAI,CAAC;AAElC,QAAM,CAAC,cAAc,eAAe,IAAI,SAA6B,CAAC,CAAC;AAEvE,QAAM,EAAE,aAAa,oBAAoB,sBAAsB,WAAW,UAAU,eAAe,IAAI;AAEvG,QAAM,0BAA0B,YAAY,MAAM;AAChD,wBAAoB,UAAU,cAAc;AAAA,EAC9C,GAAG,CAAC,UAAU,cAAc,CAAC;AAK7B,YAAU,MAAM;AACd,UAAM,qBAAyC,CAAC;AAChD,UAAM,qBAAgD,CAAC;AACvD,UAAM,wBAAwB;AAC9B,aAAS,KAAK,CAAC,SAAS;AACtB,6BAAuB,MAAM,aAAa,WAAW,QAAQ;AAC7D,UAAI,KAAK,MAAM,MAAM,KAAK,MAAM,WAAW,KAAK,MAAM,WAAY,oBAAmB,KAAK,MAAM,EAAE,IAAI;AACtG,aAAO;AAAA,IACT,CAAC;AAED;AAAA,MACE;AAAA,MACA,CAAC,SAAS;AACR,2BAAmB,KAAK,EAAE,GAAG,KAAK,OAAO,KAAK,CAAC;AAAA,MACjD;AAAA,MACA;AAAA,MACA;AAAA,IACF;AACA,oBAAgB,kBAAkB;AAClC,oBAAgB,UAAU;AAC1B,yBAAqB,kBAAkB;AAEvC,sBAAkB,kBAAkB;AAAA,EAEtC,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,EAEF,CAAC;AAED,QAAM,iBAAiB,QAAQ,MAAM,kBAAkB,QAAQ,GAAG,CAAC,QAAQ,CAAC;AAE5E,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/types/sharedTypes.d.ts

@@ -20,6 +20,7 @@ export declare namespace DSTreeviewInternalsT {
     interface CTX {
         props: DSTreeviewT.Props;
         visibleItems: DSTreeviewT.Item[];
+        visibleItemsRef: React.MutableRefObject<DSTreeviewT.Item[]>;
         flattenedItems: DSTreeviewT.DndItem[];
         withRadioChecks: boolean;
         withCheckboxChecks: boolean;

package/dist/types/utils/useTree.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import TreeModel from 'tree-model';
 import type { DSTreeviewT } from '../react-desc-prop-types.js';
 import type { DSTreeviewInternalsT } from '../sharedTypes.js';
@@ -11,4 +12,5 @@ export declare const useTree: (data: DSTreeviewT.SimpleItem[], props: DSTreeview
     rerenderItems: {};
     triggerTreeRerender: () => void;
     updateUserExpandedState: () => void;
+    visibleItemsRef: import("react").MutableRefObject<DSTreeviewT.Item[]>;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-treeview",
-  "version": "3.51.0-rc.25",
+  "version": "3.51.0-rc.27",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Tree View",
   "files": [
@@ -44,23 +44,23 @@
     "react-virtual": "~2.10.4",
     "tree-model": "~1.0.7",
     "uid": "~2.0.1",
-    "@elliemae/ds-button-v2": "3.51.0-rc.25",
-    "@elliemae/ds-classnames": "3.51.0-rc.25",
-    "@elliemae/ds-circular-progress-indicator": "3.51.0-rc.25",
-    "@elliemae/ds-controlled-form": "3.51.0-rc.25",
-    "@elliemae/ds-form": "3.51.0-rc.25",
-    "@elliemae/ds-props-helpers": "3.51.0-rc.25",
-    "@elliemae/ds-system": "3.51.0-rc.25",
-    "@elliemae/ds-truncated-tooltip-text": "3.51.0-rc.25",
-    "@elliemae/ds-icons": "3.51.0-rc.25",
-    "@elliemae/ds-drag-and-drop": "3.51.0-rc.25",
-    "@elliemae/ds-typescript-helpers": "3.51.0-rc.25"
+    "@elliemae/ds-button-v2": "3.51.0-rc.27",
+    "@elliemae/ds-circular-progress-indicator": "3.51.0-rc.27",
+    "@elliemae/ds-classnames": "3.51.0-rc.27",
+    "@elliemae/ds-controlled-form": "3.51.0-rc.27",
+    "@elliemae/ds-form": "3.51.0-rc.27",
+    "@elliemae/ds-drag-and-drop": "3.51.0-rc.27",
+    "@elliemae/ds-props-helpers": "3.51.0-rc.27",
+    "@elliemae/ds-icons": "3.51.0-rc.27",
+    "@elliemae/ds-truncated-tooltip-text": "3.51.0-rc.27",
+    "@elliemae/ds-system": "3.51.0-rc.27",
+    "@elliemae/ds-typescript-helpers": "3.51.0-rc.27"
   },
   "devDependencies": {
     "@elliemae/pui-cli": "9.0.0-next.55",
     "jest": "~29.7.0",
     "styled-components": "~5.3.9",
-    "@elliemae/ds-monorepo-devops": "3.51.0-rc.25"
+    "@elliemae/ds-monorepo-devops": "3.51.0-rc.27"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",