@elliemae/ds-treeview 3.16.0 → 3.16.1

package/dist/esm/TreeViewContext.js.map

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

package/dist/esm/config/useTreeview.js

@@ -3,13 +3,13 @@ import { useState, useRef, useEffect, useMemo, useCallback } from "react";
 import { useVirtual } from "react-virtual";
 import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
 import { uid } from "uid";
-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";
+import { TreeViewPropTypes } from "../react-desc-prop-types.js";
+import { defaultProps } from "../TreeViewContext.js";
+import { TreeDndPlugin } from "../plugins/dnd/index.js";
+import { useTree } from "../utils/useTree.js";
+import { useNotifyExpandedChange, toggleItemExpand } from "../utils/group-expands-helpers.js";
+import { useInstanceRefActions } from "../utils/useInstanceRefActions.js";
+import { useGlobalToggleAllExpandShortcut } from "../utils/keyboard-helpers.js";
 const useTreeview = (props) => {
   const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
   useValidateTypescriptPropTypes(propsWithDefault, TreeViewPropTypes, "DSTreeView");

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';\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(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    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 [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"],
+  "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    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 [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,YAAY,WAAW;ACEvB,SAAS,UAAU,QAAQ,WAAW,SAAS,mBAAmB;AAClE,SAAS,kBAAkB;AAC3B,SAAS,8BAA8B,sCAAsC;AAC7E,SAAS,WAAW;AACpB,SAAS,yBAAyB;AAClC,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAC9B,SAAS,eAAe;AACxB,SAAS,yBAAyB,wBAAwB;AAC1D,SAAS,6BAA6B;AACtC,SAAS,wCAAwC;AAM1C,MAAM,cAA4B,CAAC,UAAU;AAClD,QAAM,mBAAmB,6BAAgD,OAAO,YAAY;AAC5F,iCAA+B,kBAAkB,mBAAmB,YAAY;AAChF,QAAM,iBAAiB;AAAA,IACrB,SAAS;AAAA,MACP,iBAAiB,MAAM;AAAA,MAAC;AAAA,MACxB,UAAU,MAAM;AAAA,MAAC;AAAA,MACjB,+BAA+B,MAAM;AAAA,MAAC;AAAA,MACtC,8BAA8B,MAAM;AAAA,MAAC;AAAA,IACvC;AAAA,EACF;AACA,QAAM,UAAU,OAAO,cAAc;AACrC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,CAAC,kBAAkB,IAAI,SAAS,IAAI,CAAC,CAAC;AAC5C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAkC,IAAI;AACxE,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAkC,IAAI;AACxF,QAAM,CAAC,cAAc,eAAe,IAAI,SAAkC,IAAI;AAC9E,QAAM,CAAC,aAAa,cAAc,IAAI,SAAkC,IAAI;AAC5E,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAS;AAAA,IAC3D,GAAG;AAAA,EACL,CAAC;AACD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAoC,CAAC,CAAC;AAClF,QAAM,EAAE,cAAc,gBAAgB,MAAM,UAAU,qBAAqB,wBAAwB,IAAI;AAAA,IACrG;AAAA,IACA;AAAA,IACA;AAAA,MACE;AAAA,IACF;AAAA,EACF;AAEA,QAAM,iBAAiB,OAAyB;AAIhD,QAAM,qBAAqB,WAAW;AAAA,IACpC,MAAM,aAAa;AAAA,IACnB,WAAW;AAAA,IACX,UAAU;AAAA,EACZ,CAAC;AAED,QAAM,kBAAkB,CAAC,EAAE,SAAS,SAAS,aAAa,KAAK;AAC/D,QAAM,kBAAkB,kBAAkB,CAAC;AAC3C,QAAM,qBAAqB,CAAC,kBAAkB;AAE9C,QAAM,oBAAoB,YAAY,kBAAkB,CAAC,CAAC;AAE1D,QAAM,MAAgC;AAAA,IACpC,OAAO;AAAA,MACL,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAGA,MAAI;AAAa,gBAAY,UAAU,QAAQ;AAC/C,wBAAsB,QAAQ,SAAS,GAAG;AAC1C,mCAAiC,UAAU,qBAAqB,sBAAsB,uBAAuB;AAC7G,0BAAwB,kBAAkB,GAAG;AAK7C,YAAU,MAAM;AACd,eAAW,MAAM,yBAAyB,OAAO,GAAG,GAAG;AAAA,EAEzD,GAAG,CAAC,CAAC;AAEL,SAAO,QAAQ,OAAO,EAAE,IAAI,IAAI,CAAC,GAAG,CAAC;AACvC;",
   "names": []
 }

package/dist/esm/hoc/DnDTreeContext.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { createContext } from "react";
-import { DropIndicatorPosition } from "./SortableItemContext";
+import { DropIndicatorPosition } from "./SortableItemContext.js";
 const DnDTreeContext = createContext({
   visibleItems: void 0,
   dropIndicatorPosition: DropIndicatorPosition.None,

package/dist/esm/hoc/DnDTreeContext.js.map

@@ -1,7 +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 type { DSTreeviewT } from '../react-desc-prop-types';\nimport { DropIndicatorPosition } from './SortableItemContext';\n\ntype DnDTreeContextType = {\n  visibleItems: DSTreeviewT.Item[] | undefined;\n  dropIndicatorPosition: DropIndicatorPosition;\n  isDropValid: boolean;\n};\n\nexport const DnDTreeContext = createContext<DnDTreeContextType>({\n  visibleItems: undefined,\n  dropIndicatorPosition: DropIndicatorPosition.None,\n  isDropValid: false,\n});\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext } from 'react';\nimport type { DSTreeviewT } from '../react-desc-prop-types.js';\nimport { DropIndicatorPosition } from './SortableItemContext.js';\n\ntype DnDTreeContextType = {\n  visibleItems: DSTreeviewT.Item[] | undefined;\n  dropIndicatorPosition: DropIndicatorPosition;\n  isDropValid: boolean;\n};\n\nexport const DnDTreeContext = createContext<DnDTreeContextType>({\n  visibleItems: undefined,\n  dropIndicatorPosition: DropIndicatorPosition.None,\n  isDropValid: false,\n});\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,qBAAqB;AAE9B,SAAS,6BAA6B;AAQ/B,MAAM,iBAAiB,cAAkC;AAAA,EAC9D,cAAc;AAAA,EACd,uBAAuB,sBAAsB;AAAA,EAC7C,aAAa;AACf,CAAC;",
   "names": []
 }

package/dist/esm/hoc/WithConditionalDnDContext.js

@@ -8,11 +8,11 @@ import {
   useTreeDndkitConfig,
   removeChildrenOf
 } from "@elliemae/ds-drag-and-drop";
-import TreeViewContext from "../TreeViewContext";
-import { TreeItem } from "../parts/TreeItem";
-import { DnDTreeContext } from "./DnDTreeContext";
-import { DropIndicatorPosition } from "./SortableItemContext";
-import { toggleItemExpand } from "../utils/group-expands-helpers";
+import TreeViewContext from "../TreeViewContext.js";
+import { TreeItem } from "../parts/TreeItem.js";
+import { DnDTreeContext } from "./DnDTreeContext.js";
+import { DropIndicatorPosition } from "./SortableItemContext.js";
+import { toggleItemExpand } from "../utils/group-expands-helpers.js";
 const ensure = (argument, message = "This should never happen") => {
   if (argument === void 0 || argument === null) {
     throw new TypeError(message);

package/dist/esm/hoc/WithConditionalDnDContext.js.map

@@ -1,7 +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, useEffect, useMemo, useRef } from 'react';\nimport {\n  DndContext,\n  DragOverlay,\n  SortableContext,\n  useTreeDndkitConfig,\n  removeChildrenOf,\n} from '@elliemae/ds-drag-and-drop';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport TreeViewContext from '../TreeViewContext';\nimport { TreeItem } from '../parts/TreeItem';\nimport { DnDTreeContext } from './DnDTreeContext';\nimport { DropIndicatorPosition } from './SortableItemContext';\nimport { toggleItemExpand } from '../utils/group-expands-helpers';\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) =>\n  function (props) {\n    const {\n      props: { data, onOrderChange, getIsDropValid },\n      flattenedItems,\n      updateUserExpandedState,\n      triggerTreeRerender,\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      (\n        _active: DSTreeviewT.DndItem,\n        _targetIndex: number,\n        { movedData, fromIndex }: { movedData: DSTreeviewT.DndItem[]; fromIndex: number },\n      ) => {\n        // Pull the row's original data into an object\n        const nodes: Record<DSTreeviewT.StringOrNum, DSTreeviewT.SimpleItem> = {};\n        movedData.forEach((item) => {\n          const originalItem = item.original.model;\n          originalItem.children = [];\n          nodes[item.uid] = originalItem;\n        });\n\n        const newUserTree: DSTreeviewT.SimpleItem[] = [];\n        movedData.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.model);\n          } else if (item.uid !== '__ds_tree_root') {\n            newUserTree.push(item.original.model);\n          }\n        });\n        // Tell the user that the order has change, he can chose to commit it or not\n        onOrderChange(newUserTree, data, flattenedItems[fromIndex]);\n      },\n      [onOrderChange, data, flattenedItems],\n    );\n\n    const { dndContextProps, sortableContextProps, active, dropIndicatorPosition, isDropValid, over } =\n      useTreeDndkitConfig({\n        flattenedItems,\n        isHorizontalDnD: false,\n        isExpandable: true,\n        onReorder,\n        getIsDropValid,\n        maxDragAndDropLevel: Infinity,\n      });\n\n    const visibleItems = useMemo(() => {\n      if (!active) return flattenedVisibleTreeForDnD;\n      return removeChildrenOf(flattenedVisibleTreeForDnD, active.id);\n    }, [active, flattenedVisibleTreeForDnD]);\n\n    const timeoutRef = useRef<NodeJS.Timeout>();\n\n    useEffect(() => {\n      if (timeoutRef.current) clearTimeout(timeoutRef.current);\n      if (dropIndicatorPosition === DropIndicatorPosition.Inside && over) {\n        timeoutRef.current = setTimeout(() => {\n          const overItem = visibleItems.find((item) => item.uid === over.id);\n          if (overItem) {\n            const realOverItem = overItem.original;\n            if (realOverItem.isGroup && !realOverItem.isExpanded) {\n              toggleItemExpand(realOverItem, triggerTreeRerender, updateUserExpandedState);\n            }\n          }\n        }, 1000);\n      }\n    }, [over, dropIndicatorPosition, triggerTreeRerender, visibleItems, updateUserExpandedState]);\n\n    if (withDragAndDrop)\n      return (\n        <DndContext {...dndContextProps}>\n          <SortableContext {...sortableContextProps}>\n            <DnDTreeContext.Provider\n              value={{\n                visibleItems: visibleItems.map((item) => item.original),\n                dropIndicatorPosition,\n                isDropValid,\n              }}\n            >\n              <Component {...props} />\n            </DnDTreeContext.Provider>\n          </SortableContext>\n          <DragOverlay style={{ width: 'auto' }}>\n            {active ? (\n              <TreeItem\n                itemIndex={-1}\n                item={ensure(flattenedVisibleTree.find((item) => item.id.toString() === active.id.toString()))}\n                isDragOverlay\n              />\n            ) : null}\n          </DragOverlay>\n        </DndContext>\n      );\n    return <Component {...props} />;\n  };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useContext, useEffect, useMemo, useRef } from 'react';\nimport {\n  DndContext,\n  DragOverlay,\n  SortableContext,\n  useTreeDndkitConfig,\n  removeChildrenOf,\n} from '@elliemae/ds-drag-and-drop';\nimport type { DSTreeviewT } from '../react-desc-prop-types.js';\nimport TreeViewContext from '../TreeViewContext.js';\nimport { TreeItem } from '../parts/TreeItem.js';\nimport { DnDTreeContext } from './DnDTreeContext.js';\nimport { DropIndicatorPosition } from './SortableItemContext.js';\nimport { toggleItemExpand } from '../utils/group-expands-helpers.js';\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) =>\n  function (props) {\n    const {\n      props: { data, onOrderChange, getIsDropValid },\n      flattenedItems,\n      updateUserExpandedState,\n      triggerTreeRerender,\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      (\n        _active: DSTreeviewT.DndItem,\n        _targetIndex: number,\n        { movedData, fromIndex }: { movedData: DSTreeviewT.DndItem[]; fromIndex: number },\n      ) => {\n        // Pull the row's original data into an object\n        const nodes: Record<DSTreeviewT.StringOrNum, DSTreeviewT.SimpleItem> = {};\n        movedData.forEach((item) => {\n          const originalItem = item.original.model;\n          originalItem.children = [];\n          nodes[item.uid] = originalItem;\n        });\n\n        const newUserTree: DSTreeviewT.SimpleItem[] = [];\n        movedData.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.model);\n          } else if (item.uid !== '__ds_tree_root') {\n            newUserTree.push(item.original.model);\n          }\n        });\n        // Tell the user that the order has change, he can chose to commit it or not\n        onOrderChange(newUserTree, data, flattenedItems[fromIndex]);\n      },\n      [onOrderChange, data, flattenedItems],\n    );\n\n    const { dndContextProps, sortableContextProps, active, dropIndicatorPosition, isDropValid, over } =\n      useTreeDndkitConfig({\n        flattenedItems,\n        isHorizontalDnD: false,\n        isExpandable: true,\n        onReorder,\n        getIsDropValid,\n        maxDragAndDropLevel: Infinity,\n      });\n\n    const visibleItems = useMemo(() => {\n      if (!active) return flattenedVisibleTreeForDnD;\n      return removeChildrenOf(flattenedVisibleTreeForDnD, active.id);\n    }, [active, flattenedVisibleTreeForDnD]);\n\n    const timeoutRef = useRef<NodeJS.Timeout>();\n\n    useEffect(() => {\n      if (timeoutRef.current) clearTimeout(timeoutRef.current);\n      if (dropIndicatorPosition === DropIndicatorPosition.Inside && over) {\n        timeoutRef.current = setTimeout(() => {\n          const overItem = visibleItems.find((item) => item.uid === over.id);\n          if (overItem) {\n            const realOverItem = overItem.original;\n            if (realOverItem.isGroup && !realOverItem.isExpanded) {\n              toggleItemExpand(realOverItem, triggerTreeRerender, updateUserExpandedState);\n            }\n          }\n        }, 1000);\n      }\n    }, [over, dropIndicatorPosition, triggerTreeRerender, visibleItems, updateUserExpandedState]);\n\n    if (withDragAndDrop)\n      return (\n        <DndContext {...dndContextProps}>\n          <SortableContext {...sortableContextProps}>\n            <DnDTreeContext.Provider\n              value={{\n                visibleItems: visibleItems.map((item) => item.original),\n                dropIndicatorPosition,\n                isDropValid,\n              }}\n            >\n              <Component {...props} />\n            </DnDTreeContext.Provider>\n          </SortableContext>\n          <DragOverlay style={{ width: 'auto' }}>\n            {active ? (\n              <TreeItem\n                itemIndex={-1}\n                item={ensure(flattenedVisibleTree.find((item) => item.id.toString() === active.id.toString()))}\n                isDragOverlay\n              />\n            ) : null}\n          </DragOverlay>\n        </DndContext>\n      );\n    return <Component {...props} />;\n  };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACmHf,SASM,KATN;AAnHR,SAAgB,aAAa,YAAY,WAAW,SAAS,cAAc;AAC3E;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,OAAO,qBAAqB;AAC5B,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAC/B,SAAS,6BAA6B;AACtC,SAAS,wBAAwB;AAIjC,MAAM,SAAS,CAAK,UAAgC,UAAU,+BAAkC;AAC9F,MAAI,aAAa,UAAa,aAAa,MAAM;AAC/C,UAAM,IAAI,UAAU,OAAO;AAAA,EAC7B;AAEA,SAAO;AACT;AAGO,MAAM,+BAA8C,CAAC,cAC1D,SAAU,OAAO;AACf,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM,eAAe,eAAe;AAAA,IAC7C;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,6BAA6B;AAAA,IACjC,MACE,qBAAqB,IAAI,CAAC,MAAM,WAAW;AAAA,MACzC,KAAK,KAAK,GAAG,SAAS;AAAA,MACtB,QAAQ,KAAK,aAAa,KAAK;AAAA,MAC/B,WAAW;AAAA,MACX,eAAe,KAAK,UAAU,UAAU;AAAA,MACxC,UAAU,KAAK,KAAK,QAAQ,OAAO,IAAI,SAAS,KAAK;AAAA,MACrD,UAAU;AAAA,IACZ,EAAE;AAAA,IACJ,CAAC,oBAAoB;AAAA,EACvB;AAEA,QAAM,YAAY;AAAA,IAChB,CACE,SACA,cACA,EAAE,WAAW,UAAU,MACpB;AAEH,YAAM,QAAiE,CAAC;AACxE,gBAAU,QAAQ,CAAC,SAAS;AAC1B,cAAM,eAAe,KAAK,SAAS;AACnC,qBAAa,WAAW,CAAC;AACzB,cAAM,KAAK,GAAG,IAAI;AAAA,MACpB,CAAC;AAED,YAAM,cAAwC,CAAC;AAC/C,gBAAU,QAAQ,CAAC,SAAS;AAG1B,YAAI,KAAK,aAAa,QAAQ,KAAK,aAAa,UAAa,KAAK,aAAa,kBAAkB;AAC/F,gBAAM,aAAa,MAAM,KAAK,QAAQ;AACtC,qBAAW,UAAU,KAAK,KAAK,SAAS,KAAK;AAAA,QAC/C,WAAW,KAAK,QAAQ,kBAAkB;AACxC,sBAAY,KAAK,KAAK,SAAS,KAAK;AAAA,QACtC;AAAA,MACF,CAAC;AAED,oBAAc,aAAa,MAAM,eAAe,SAAS,CAAC;AAAA,IAC5D;AAAA,IACA,CAAC,eAAe,MAAM,cAAc;AAAA,EACtC;AAEA,QAAM,EAAE,iBAAiB,sBAAsB,QAAQ,uBAAuB,aAAa,KAAK,IAC9F,oBAAoB;AAAA,IAClB;AAAA,IACA,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA,EACvB,CAAC;AAEH,QAAM,eAAe,QAAQ,MAAM;AACjC,QAAI,CAAC;AAAQ,aAAO;AACpB,WAAO,iBAAiB,4BAA4B,OAAO,EAAE;AAAA,EAC/D,GAAG,CAAC,QAAQ,0BAA0B,CAAC;AAEvC,QAAM,aAAa,OAAuB;AAE1C,YAAU,MAAM;AACd,QAAI,WAAW;AAAS,mBAAa,WAAW,OAAO;AACvD,QAAI,0BAA0B,sBAAsB,UAAU,MAAM;AAClE,iBAAW,UAAU,WAAW,MAAM;AACpC,cAAM,WAAW,aAAa,KAAK,CAAC,SAAS,KAAK,QAAQ,KAAK,EAAE;AACjE,YAAI,UAAU;AACZ,gBAAM,eAAe,SAAS;AAC9B,cAAI,aAAa,WAAW,CAAC,aAAa,YAAY;AACpD,6BAAiB,cAAc,qBAAqB,uBAAuB;AAAA,UAC7E;AAAA,QACF;AAAA,MACF,GAAG,GAAI;AAAA,IACT;AAAA,EACF,GAAG,CAAC,MAAM,uBAAuB,qBAAqB,cAAc,uBAAuB,CAAC;AAE5F,MAAI;AACF,WACE,qBAAC,cAAY,GAAG,iBACd;AAAA,0BAAC,mBAAiB,GAAG,sBACnB;AAAA,QAAC,eAAe;AAAA,QAAf;AAAA,UACC,OAAO;AAAA,YACL,cAAc,aAAa,IAAI,CAAC,SAAS,KAAK,QAAQ;AAAA,YACtD;AAAA,YACA;AAAA,UACF;AAAA,UAEA,8BAAC,aAAW,GAAG,OAAO;AAAA;AAAA,MACxB,GACF;AAAA,MACA,oBAAC,eAAY,OAAO,EAAE,OAAO,OAAO,GACjC,mBACC;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,UACX,MAAM,OAAO,qBAAqB,KAAK,CAAC,SAAS,KAAK,GAAG,SAAS,MAAM,OAAO,GAAG,SAAS,CAAC,CAAC;AAAA,UAC7F,eAAa;AAAA;AAAA,MACf,IACE,MACN;AAAA,OACF;AAEJ,SAAO,oBAAC,aAAW,GAAG,OAAO;AAC/B;",
   "names": []
 }

package/dist/esm/hoc/WithDnDSortableItemContext.js

@@ -2,9 +2,9 @@ import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { useContext, useMemo } from "react";
 import { useSortable } from "@elliemae/ds-drag-and-drop";
-import { SortableItemContext } from "./SortableItemContext";
-import TreeViewContext from "../TreeViewContext";
-import { DnDTreeContext } from "./DnDTreeContext";
+import { SortableItemContext } from "./SortableItemContext.js";
+import TreeViewContext from "../TreeViewContext.js";
+import { DnDTreeContext } from "./DnDTreeContext.js";
 const withDnDSortableItemContext = (Component) => function(props) {
   const { withDragAndDrop } = useContext(TreeViewContext);
   const { dropIndicatorPosition, isDropValid } = useContext(DnDTreeContext);

package/dist/esm/hoc/WithDnDSortableItemContext.js.map

@@ -1,7 +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 '@elliemae/ds-drag-and-drop';\nimport type { SortableItemContextType } from './SortableItemContext';\nimport { SortableItemContext } from './SortableItemContext';\nimport TreeViewContext from '../TreeViewContext';\nimport { DnDTreeContext } from './DnDTreeContext';\nimport type { 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) =>\n  function (props: any) {\n    const { withDragAndDrop } = useContext(TreeViewContext);\n    const { dropIndicatorPosition, 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        isDropValid,\n      };\n    }, [withDragAndDrop, useSortableHelpers, dropIndicatorPosition, 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"],
+  "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 '@elliemae/ds-drag-and-drop';\nimport type { SortableItemContextType } from './SortableItemContext.js';\nimport { SortableItemContext } from './SortableItemContext.js';\nimport TreeViewContext from '../TreeViewContext.js';\nimport { DnDTreeContext } from './DnDTreeContext.js';\nimport type { DSTreeviewT } from '../react-desc-prop-types.js';\n\ntype FunctionalHOC = <T = unknown>(Component: React.ComponentType<T>, ...other: unknown[]) => (props: T) => JSX.Element;\n\nexport const withDnDSortableItemContext: FunctionalHOC = (Component) =>\n  function (props: any) {\n    const { withDragAndDrop } = useContext(TreeViewContext);\n    const { dropIndicatorPosition, 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        isDropValid,\n      };\n    }, [withDragAndDrop, useSortableHelpers, dropIndicatorPosition, 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,YAAY,WAAW;ACwDf;AArDR,SAAgB,YAAY,eAAe;AAC3C,SAAS,mBAAmB;AAE5B,SAAS,2BAA2B;AACpC,OAAO,qBAAqB;AAC5B,SAAS,sBAAsB;AAKxB,MAAM,6BAA4C,CAAC,cACxD,SAAU,OAAY;AACpB,QAAM,EAAE,gBAAgB,IAAI,WAAW,eAAe;AACtD,QAAM,EAAE,uBAAuB,YAAY,IAAI,WAAW,cAAc;AAExE,QAAM,KAAM,MAAqC,KAAK,GAAG,SAAS;AAGlE,QAAM,mBAAmB;AAAA,IACvB,OAAO;AAAA,MACL;AAAA,IACF;AAAA,IACA,CAAC,EAAE;AAAA,EACL;AAEA,QAAM,qBAAqB,YAAY,gBAAgB;AAGvD,QAAM,iBAAiB,QAAQ,MAAM;AACnC,QAAI,CAAC;AAAiB,aAAO;AAE7B,UAAM,EAAE,OAAO,UAAU,IAAI;AAE7B,WAAO;AAAA,MACL,GAAG;AAAA,MACH,iCAAiC,cAAc;AAAA,MAC/C;AAAA,MACA;AAAA,IACF;AAAA,EACF,GAAG,CAAC,iBAAiB,oBAAoB,uBAAuB,WAAW,CAAC;AAK5E,QAAM,MAA+B;AAAA,IACnC,OAAO;AAAA,MACL;AAAA,IACF;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,SACE,oBAAC,oBAAoB,UAApB,EAA6B,OAAO,KACnC,8BAAC,aAAW,GAAG,OAAO,GACxB;AAEJ;",
   "names": []
 }

package/dist/esm/index.js

@@ -1,7 +1,7 @@
 import * as React from "react";
-export * from "./TreeView";
-export * from "./plugins";
-import { TreeViewSearchBar } from "./related-components/TreeViewSearchBar";
+export * from "./TreeView.js";
+export * from "./plugins/index.js";
+import { TreeViewSearchBar } from "./related-components/TreeViewSearchBar.js";
 export {
   TreeViewSearchBar
 };

package/dist/esm/index.js.map

@@ -1,7 +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"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './TreeView.js';\nexport * from './plugins/index.js';\n\nexport { TreeViewSearchBar } from './related-components/TreeViewSearchBar.js';\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;AAEd,SAAS,yBAAyB;",
   "names": []
 }

package/dist/esm/package.json

@@ -0,0 +1,7 @@
+{
+  "type": "module",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ]
+}

package/dist/esm/parts/CheckboxSelectable.js

@@ -3,9 +3,9 @@ import { jsx } from "react/jsx-runtime";
 import { useContext, useCallback, useMemo } from "react";
 import { DSCheckbox } from "@elliemae/ds-form";
 import { styled } from "@elliemae/ds-system";
-import TreeViewContext from "../TreeViewContext";
-import { toggleCheckboxItem } from "../utils/selectable-helper";
-import { filterObject } from "../utils/object-helpers";
+import TreeViewContext from "../TreeViewContext.js";
+import { toggleCheckboxItem } from "../utils/selectable-helper.js";
+import { filterObject } from "../utils/object-helpers.js";
 const StyledCheckboxWrapper = styled.span`
   padding-top: 3px;
 `;

package/dist/esm/parts/CheckboxSelectable.js.map

@@ -1,7 +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 '@elliemae/ds-system';\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}\nconst 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,YAAY,WAAW;ACkEjB;AAlEN,SAAgB,YAAY,aAAa,eAAe;AACxD,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,OAAO,qBAAqB;AAC5B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAE7B,MAAM,wBAAwB,OAAO;AAAA;AAAA;AAOrC,MAAM,qBAAqB,CAAC,UAAsC;AAChE,QAAM,EAAE,MAAM,UAAU,IAAI;AAC5B,QAAM,EAAE,GAAG,IAAI;AAEf,QAAM,MAAM,WAAW,eAAe;AACtC,QAAM;AAAA,IACJ,OAAO,EAAE,mBAAmB,eAAe;AAAA,IAC3C,oBAAoB,EAAE,cAAc;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,mBAAmB,YAAY,MAAM;AACzC,UAAM,gBAAgB,mBAAmB,IAAI;AAC7C,UAAM,qBAAqB;AAAA,MACzB,EAAE,GAAG,oBAAoB,GAAG,cAAc;AAAA,MAC1C,CAAC,UAAU,UAAU;AAAA,IACvB;AACA,0BAAsB,kBAAkB;AACxC,wBAAoB;AAEpB,UAAM,mBAAmB;AAAA,MACvB,cAAc,MAAM;AAClB,YAAI,OAAO,KAAK,iBAAiB;AAAU,wBAAc,KAAK,YAAY;AAAA,MAC5E;AAAA,MACA;AAAA,IACF;AACA,QAAI;AAAmB,wBAAkB,oBAAoB,MAAM,gBAAgB;AAAA,EACrF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,YAAY,QAAQ,MAAM;AAC9B,QAAI,mBAAmB,QAAQ,SAAS;AACtC,aAAO;AAAA,IACT;AACA,QAAI,mBAAmB,QAAQ,MAAM;AACnC,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,GAAG,CAAC,oBAAoB,EAAE,CAAC;AAE3B,QAAM,aAAa,QAAQ,MAAM,eAAe,IAAI,GAAG,CAAC,MAAM,cAAc,CAAC;AAE7E,SACE,oBAAC,yBACC;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,UAAU;AAAA,MACV,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,UAAU;AAAA,MACV,UAAS;AAAA;AAAA,EACX,GACF;AAEJ;AAEA,IAAO,6BAAQ;",
+  "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 '@elliemae/ds-system';\nimport TreeViewContext from '../TreeViewContext.js';\nimport { toggleCheckboxItem } from '../utils/selectable-helper.js';\nimport { filterObject } from '../utils/object-helpers.js';\nimport type { DSTreeviewT } from '../react-desc-prop-types.js';\nconst StyledCheckboxWrapper = styled.span`\n  padding-top: 3px;\n`;\ninterface PropsT {\n  item: DSTreeviewT.Item;\n  itemIndex: number;\n}\nconst 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,YAAY,WAAW;ACkEjB;AAlEN,SAAgB,YAAY,aAAa,eAAe;AACxD,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,OAAO,qBAAqB;AAC5B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAE7B,MAAM,wBAAwB,OAAO;AAAA;AAAA;AAOrC,MAAM,qBAAqB,CAAC,UAAsC;AAChE,QAAM,EAAE,MAAM,UAAU,IAAI;AAC5B,QAAM,EAAE,GAAG,IAAI;AAEf,QAAM,MAAM,WAAW,eAAe;AACtC,QAAM;AAAA,IACJ,OAAO,EAAE,mBAAmB,eAAe;AAAA,IAC3C,oBAAoB,EAAE,cAAc;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,mBAAmB,YAAY,MAAM;AACzC,UAAM,gBAAgB,mBAAmB,IAAI;AAC7C,UAAM,qBAAqB;AAAA,MACzB,EAAE,GAAG,oBAAoB,GAAG,cAAc;AAAA,MAC1C,CAAC,UAAU,UAAU;AAAA,IACvB;AACA,0BAAsB,kBAAkB;AACxC,wBAAoB;AAEpB,UAAM,mBAAmB;AAAA,MACvB,cAAc,MAAM;AAClB,YAAI,OAAO,KAAK,iBAAiB;AAAU,wBAAc,KAAK,YAAY;AAAA,MAC5E;AAAA,MACA;AAAA,IACF;AACA,QAAI;AAAmB,wBAAkB,oBAAoB,MAAM,gBAAgB;AAAA,EACrF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,YAAY,QAAQ,MAAM;AAC9B,QAAI,mBAAmB,EAAE,MAAM,SAAS;AACtC,aAAO;AAAA,IACT;AACA,QAAI,mBAAmB,EAAE,MAAM,MAAM;AACnC,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,GAAG,CAAC,oBAAoB,EAAE,CAAC;AAE3B,QAAM,aAAa,QAAQ,MAAM,eAAe,IAAI,GAAG,CAAC,MAAM,cAAc,CAAC;AAE7E,SACE,oBAAC,yBACC;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,UAAU;AAAA,MACV,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,UAAU;AAAA,MACV,UAAS;AAAA;AAAA,EACX,GACF;AAEJ;AAEA,IAAO,6BAAQ;",
   "names": []
 }

package/dist/esm/parts/ChildrenCountDisplayer.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { styled } from "@elliemae/ds-system";
-import { DSTreeViewPrefix, treeItemBlockName } from "../config/cssClassesConstants";
+import { DSTreeViewPrefix, treeItemBlockName } from "../config/cssClassesConstants.js";
 const Separator = styled.span`
   width: 1px;
   height: 12px;

package/dist/esm/parts/ChildrenCountDisplayer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/ChildrenCountDisplayer.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/function-component-definition */\nimport React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSTreeViewPrefix, treeItemBlockName } from '../config/cssClassesConstants';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\n\nconst Separator = styled.span`\n  width: 1px;\n  height: 12px;\n  margin: 0 8px;\n  border-left: 1px solid ${(props) => props.theme.colors.neutral['600']};\n  font-size: 12px;\n`;\n\nconst className = `${DSTreeViewPrefix}-${treeItemBlockName}-children-count-displayer`;\n\ninterface PropsT {\n  item: DSTreeviewT.Item;\n}\n\nexport const ChildrenCountDisplayer: React.ComponentType<PropsT> = (props) => {\n  const { item } = props;\n  const { isGroup, children } = item;\n\n  if (!isGroup) return null;\n  return (\n    <span data-testid=\"tree-item-children-count-displayer\" className={className}>\n      <Separator />\n      {`${children.length} Items`}\n    </span>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC0BnB,SACE,KADF;AAxBJ,SAAS,cAAc;AACvB,SAAS,kBAAkB,yBAAyB;AAGpD,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA,2BAIE,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAIjE,MAAM,YAAY,GAAG,oBAAoB;AAMlC,MAAM,yBAAsD,CAAC,UAAU;AAC5E,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,EAAE,SAAS,SAAS,IAAI;AAE9B,MAAI,CAAC;AAAS,WAAO;AACrB,SACE,qBAAC,UAAK,eAAY,sCAAqC,WACrD;AAAA,wBAAC,aAAU;AAAA,IACV,GAAG,SAAS;AAAA,KACf;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/function-component-definition */\nimport React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSTreeViewPrefix, treeItemBlockName } from '../config/cssClassesConstants.js';\nimport type { DSTreeviewT } from '../react-desc-prop-types.js';\n\nconst Separator = styled.span`\n  width: 1px;\n  height: 12px;\n  margin: 0 8px;\n  border-left: 1px solid ${(props) => props.theme.colors.neutral['600']};\n  font-size: 12px;\n`;\n\nconst className = `${DSTreeViewPrefix}-${treeItemBlockName}-children-count-displayer`;\n\ninterface PropsT {\n  item: DSTreeviewT.Item;\n}\n\nexport const ChildrenCountDisplayer: React.ComponentType<PropsT> = (props) => {\n  const { item } = props;\n  const { isGroup, children } = item;\n\n  if (!isGroup) return null;\n  return (\n    <span data-testid=\"tree-item-children-count-displayer\" className={className}>\n      <Separator />\n      {`${children.length} Items`}\n    </span>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC0BnB,SACE,KADF;AAxBJ,SAAS,cAAc;AACvB,SAAS,kBAAkB,yBAAyB;AAGpD,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA,2BAIE,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAItE,MAAM,YAAY,GAAG,oBAAoB;AAMlC,MAAM,yBAAsD,CAAC,UAAU;AAC5E,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,EAAE,SAAS,SAAS,IAAI;AAE9B,MAAI,CAAC;AAAS,WAAO;AACrB,SACE,qBAAC,UAAK,eAAY,sCAAqC,WACrD;AAAA,wBAAC,aAAU;AAAA,IACV,GAAG,SAAS;AAAA,KACf;AAEJ;",
   "names": []
 }

package/dist/esm/parts/DnDHandle.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import { createElement } from "react";
 import { useContext } from "react";
 import { GripperVertical } from "@elliemae/ds-icons";
-import { SortableItemContext } from "../hoc/SortableItemContext";
+import { SortableItemContext } from "../hoc/SortableItemContext.js";
 const DnDHandle = ({ id, isDragOverlay }) => {
   const { draggableProps } = useContext(SortableItemContext);
   const isDragging = draggableProps && draggableProps.isDragging;

package/dist/esm/parts/DnDHandle.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/DnDHandle.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { GripperVertical } from '@elliemae/ds-icons';\nimport { SortableItemContext } from '../hoc/SortableItemContext';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\n\ninterface DnDHandleProps {\n  id: DSTreeviewT.StringOrNum;\n  isDragOverlay: boolean;\n}\n\nexport const DnDHandle = ({ id, isDragOverlay }: DnDHandleProps) => {\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const isDragging = draggableProps && draggableProps.isDragging;\n\n  return (\n    <GripperVertical\n      role=\"button\"\n      {...(draggableProps && {\n        ...draggableProps.listeners,\n        ...draggableProps.attributes,\n      })}\n      data-testid=\"drag-handle\"\n      data-isactive={draggableProps && !!draggableProps.active}\n      data-isdragoverlay={isDragOverlay}\n      id={`${id}-drag-handle`}\n      key={`${id}-drag-handle`}\n      className={`drag-handle ${isDragging ? '' : 'focuseable'}`}\n      color={isDragging ? ['neutral', '080'] : ['brand-primary', '800']}\n      size=\"s\"\n      tabIndex={0}\n    />\n  );\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { GripperVertical } from '@elliemae/ds-icons';\nimport { SortableItemContext } from '../hoc/SortableItemContext.js';\nimport type { DSTreeviewT } from '../react-desc-prop-types.js';\n\ninterface DnDHandleProps {\n  id: DSTreeviewT.StringOrNum;\n  isDragOverlay: boolean;\n}\n\nexport const DnDHandle = ({ id, isDragOverlay }: DnDHandleProps) => {\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const isDragging = draggableProps && draggableProps.isDragging;\n\n  return (\n    <GripperVertical\n      role=\"button\"\n      {...(draggableProps && {\n        ...draggableProps.listeners,\n        ...draggableProps.attributes,\n      })}\n      data-testid=\"drag-handle\"\n      data-isactive={draggableProps && !!draggableProps.active}\n      data-isdragoverlay={isDragOverlay}\n      id={`${id}-drag-handle`}\n      key={`${id}-drag-handle`}\n      className={`drag-handle ${isDragging ? '' : 'focuseable'}`}\n      color={isDragging ? ['neutral', '080'] : ['brand-primary', '800']}\n      size=\"s\"\n      tabIndex={0}\n    />\n  );\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACgBnB;AAhBJ,SAAgB,kBAAkB;AAClC,SAAS,uBAAuB;AAChC,SAAS,2BAA2B;AAQ7B,MAAM,YAAY,CAAC,EAAE,IAAI,cAAc,MAAsB;AAClE,QAAM,EAAE,eAAe,IAAI,WAAW,mBAAmB;AAEzD,QAAM,aAAa,kBAAkB,eAAe;AAEpD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACJ,GAAI,kBAAkB;AAAA,QACrB,GAAG,eAAe;AAAA,QAClB,GAAG,eAAe;AAAA,MACpB;AAAA,MACA,eAAY;AAAA,MACZ,iBAAe,kBAAkB,CAAC,CAAC,eAAe;AAAA,MAClD,sBAAoB;AAAA,MACpB,IAAI,GAAG;AAAA,MACP,KAAK,GAAG;AAAA,MACR,WAAW,eAAe,aAAa,KAAK;AAAA,MAC5C,OAAO,aAAa,CAAC,WAAW,KAAK,IAAI,CAAC,iBAAiB,KAAK;AAAA,MAChE,MAAK;AAAA,MACL,UAAU;AAAA;AAAA,EACZ;AAEJ;",
   "names": []
 }

package/dist/esm/parts/DropIndicator.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { styled } from "@elliemae/ds-system";
-import { DropIndicatorPosition } from "../hoc/SortableItemContext";
+import { DropIndicatorPosition } from "../hoc/SortableItemContext.js";
 const getPositionStyles = ({ dropIndicatorPosition }) => `
       top: ${dropIndicatorPosition === DropIndicatorPosition.Before ? "0" : "unset"};
       bottom: ${dropIndicatorPosition === DropIndicatorPosition.After ? "0" : "unset"};

package/dist/esm/parts/DropIndicator.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/DropIndicator.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DropIndicatorPosition } from '../hoc/SortableItemContext';\n\ninterface DropIndicatorProps {\n  vertical?: boolean;\n  dropIndicatorPosition: DropIndicatorPosition | false;\n  isLast?: boolean;\n  isDropValid?: boolean;\n}\n\nconst getPositionStyles = ({ dropIndicatorPosition }: DropIndicatorProps) => `\n      top: ${dropIndicatorPosition === DropIndicatorPosition.Before ? '0' : 'unset'};\n      bottom: ${dropIndicatorPosition === DropIndicatorPosition.After ? '0' : 'unset'};\n      left: -2px;\n    `;\n\nconst getCircleStyles = ({ dropIndicatorPosition }: DropIndicatorProps) => ({\n  position: 'absolute',\n  zIndex: 20,\n  top: dropIndicatorPosition === DropIndicatorPosition.After ? 'unset' : '-2px',\n  bottom: dropIndicatorPosition === DropIndicatorPosition.Before ? 'unset' : '-2px',\n  left: '0px',\n  opacity: 1,\n});\n\nconst StyledIndicator = styled.div<DropIndicatorProps>`\n  position: absolute;\n  ${getPositionStyles}\n  box-sizing: border-box;\n  width: ${(props) => (props.vertical ? '2px' : '100%')};\n  height: ${(props) => (props.vertical ? '100%' : '2px')};\n  background-color: ${({ isDropValid, theme }) => (isDropValid ? theme.colors.brand[600] : theme.colors.danger[900])};\n  z-index: 20;\n`;\n\nconst CircleIndicator = (style: Record<string, unknown>, isDropValid: boolean | null | undefined) => (\n  <svg height=\"6\" width=\"6\" style={style}>\n    <circle cx=\"3\" cy=\"3\" r=\"3\" strokeWidth=\"0\" fill={isDropValid ? '#1E79C2' : '#C64252'} />\n  </svg>\n);\n\nconst DropIndicator: React.ComponentType<DropIndicatorProps> = ({ dropIndicatorPosition, isLast, isDropValid }) => {\n  if (\n    ![DropIndicatorPosition.After, DropIndicatorPosition.Before].includes(\n      dropIndicatorPosition as DropIndicatorPosition,\n    )\n  )\n    return null;\n\n  const safeDropIndicatorPosition = isLast ? DropIndicatorPosition.Before : dropIndicatorPosition;\n\n  return (\n    <>\n      {CircleIndicator(getCircleStyles({ dropIndicatorPosition: safeDropIndicatorPosition }), isDropValid)}\n      <StyledIndicator dropIndicatorPosition={safeDropIndicatorPosition} isDropValid={isDropValid} />\n    </>\n  );\n};\n\nexport default DropIndicator;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACsCnB,SAeA,UAfA,KAeA,YAfA;AArCJ,SAAS,cAAc;AACvB,SAAS,6BAA6B;AAStC,MAAM,oBAAoB,CAAC,EAAE,sBAAsB,MAA0B;AAAA,aAChE,0BAA0B,sBAAsB,SAAS,MAAM;AAAA,gBAC5D,0BAA0B,sBAAsB,QAAQ,MAAM;AAAA;AAAA;AAI9E,MAAM,kBAAkB,CAAC,EAAE,sBAAsB,OAA2B;AAAA,EAC1E,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,KAAK,0BAA0B,sBAAsB,QAAQ,UAAU;AAAA,EACvE,QAAQ,0BAA0B,sBAAsB,SAAS,UAAU;AAAA,EAC3E,MAAM;AAAA,EACN,SAAS;AACX;AAEA,MAAM,kBAAkB,OAAO;AAAA;AAAA,IAE3B;AAAA;AAAA,WAEO,CAAC,UAAW,MAAM,WAAW,QAAQ;AAAA,YACpC,CAAC,UAAW,MAAM,WAAW,SAAS;AAAA,sBAC5B,CAAC,EAAE,aAAa,MAAM,MAAO,cAAc,MAAM,OAAO,MAAM,OAAO,MAAM,OAAO,OAAO;AAAA;AAAA;AAI/G,MAAM,kBAAkB,CAAC,OAAgC,gBACvD,oBAAC,SAAI,QAAO,KAAI,OAAM,KAAI,OACxB,8BAAC,YAAO,IAAG,KAAI,IAAG,KAAI,GAAE,KAAI,aAAY,KAAI,MAAM,cAAc,YAAY,WAAW,GACzF;AAGF,MAAM,gBAAyD,CAAC,EAAE,uBAAuB,QAAQ,YAAY,MAAM;AACjH,MACE,CAAC,CAAC,sBAAsB,OAAO,sBAAsB,MAAM,EAAE;AAAA,IAC3D;AAAA,EACF;AAEA,WAAO;AAET,QAAM,4BAA4B,SAAS,sBAAsB,SAAS;AAE1E,SACE,iCACG;AAAA,oBAAgB,gBAAgB,EAAE,uBAAuB,0BAA0B,CAAC,GAAG,WAAW;AAAA,IACnG,oBAAC,mBAAgB,uBAAuB,2BAA2B,aAA0B;AAAA,KAC/F;AAEJ;AAEA,IAAO,wBAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DropIndicatorPosition } from '../hoc/SortableItemContext.js';\n\ninterface DropIndicatorProps {\n  vertical?: boolean;\n  dropIndicatorPosition: DropIndicatorPosition | false;\n  isLast?: boolean;\n  isDropValid?: boolean;\n}\n\nconst getPositionStyles = ({ dropIndicatorPosition }: DropIndicatorProps) => `\n      top: ${dropIndicatorPosition === DropIndicatorPosition.Before ? '0' : 'unset'};\n      bottom: ${dropIndicatorPosition === DropIndicatorPosition.After ? '0' : 'unset'};\n      left: -2px;\n    `;\n\nconst getCircleStyles = ({ dropIndicatorPosition }: DropIndicatorProps) => ({\n  position: 'absolute',\n  zIndex: 20,\n  top: dropIndicatorPosition === DropIndicatorPosition.After ? 'unset' : '-2px',\n  bottom: dropIndicatorPosition === DropIndicatorPosition.Before ? 'unset' : '-2px',\n  left: '0px',\n  opacity: 1,\n});\n\nconst StyledIndicator = styled.div<DropIndicatorProps>`\n  position: absolute;\n  ${getPositionStyles}\n  box-sizing: border-box;\n  width: ${(props) => (props.vertical ? '2px' : '100%')};\n  height: ${(props) => (props.vertical ? '100%' : '2px')};\n  background-color: ${({ isDropValid, theme }) => (isDropValid ? theme.colors.brand[600] : theme.colors.danger[900])};\n  z-index: 20;\n`;\n\nconst CircleIndicator = (style: Record<string, unknown>, isDropValid: boolean | null | undefined) => (\n  <svg height=\"6\" width=\"6\" style={style}>\n    <circle cx=\"3\" cy=\"3\" r=\"3\" strokeWidth=\"0\" fill={isDropValid ? '#1E79C2' : '#C64252'} />\n  </svg>\n);\n\nconst DropIndicator: React.ComponentType<DropIndicatorProps> = ({ dropIndicatorPosition, isLast, isDropValid }) => {\n  if (\n    ![DropIndicatorPosition.After, DropIndicatorPosition.Before].includes(\n      dropIndicatorPosition as DropIndicatorPosition,\n    )\n  )\n    return null;\n\n  const safeDropIndicatorPosition = isLast ? DropIndicatorPosition.Before : dropIndicatorPosition;\n\n  return (\n    <>\n      {CircleIndicator(getCircleStyles({ dropIndicatorPosition: safeDropIndicatorPosition }), isDropValid)}\n      <StyledIndicator dropIndicatorPosition={safeDropIndicatorPosition} isDropValid={isDropValid} />\n    </>\n  );\n};\n\nexport default DropIndicator;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACsCnB,SAeA,UAfA,KAeA,YAfA;AArCJ,SAAS,cAAc;AACvB,SAAS,6BAA6B;AAStC,MAAM,oBAAoB,CAAC,EAAE,sBAAsB,MAA0B;AAAA,aAChE,0BAA0B,sBAAsB,SAAS,MAAM;AAAA,gBAC5D,0BAA0B,sBAAsB,QAAQ,MAAM;AAAA;AAAA;AAI9E,MAAM,kBAAkB,CAAC,EAAE,sBAAsB,OAA2B;AAAA,EAC1E,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,KAAK,0BAA0B,sBAAsB,QAAQ,UAAU;AAAA,EACvE,QAAQ,0BAA0B,sBAAsB,SAAS,UAAU;AAAA,EAC3E,MAAM;AAAA,EACN,SAAS;AACX;AAEA,MAAM,kBAAkB,OAAO;AAAA;AAAA,IAE3B;AAAA;AAAA,WAEO,CAAC,UAAW,MAAM,WAAW,QAAQ;AAAA,YACpC,CAAC,UAAW,MAAM,WAAW,SAAS;AAAA,sBAC5B,CAAC,EAAE,aAAa,MAAM,MAAO,cAAc,MAAM,OAAO,MAAM,GAAG,IAAI,MAAM,OAAO,OAAO,GAAG;AAAA;AAAA;AAIlH,MAAM,kBAAkB,CAAC,OAAgC,gBACvD,oBAAC,SAAI,QAAO,KAAI,OAAM,KAAI,OACxB,8BAAC,YAAO,IAAG,KAAI,IAAG,KAAI,GAAE,KAAI,aAAY,KAAI,MAAM,cAAc,YAAY,WAAW,GACzF;AAGF,MAAM,gBAAyD,CAAC,EAAE,uBAAuB,QAAQ,YAAY,MAAM;AACjH,MACE,CAAC,CAAC,sBAAsB,OAAO,sBAAsB,MAAM,EAAE;AAAA,IAC3D;AAAA,EACF;AAEA,WAAO;AAET,QAAM,4BAA4B,SAAS,sBAAsB,SAAS;AAE1E,SACE,iCACG;AAAA,oBAAgB,gBAAgB,EAAE,uBAAuB,0BAA0B,CAAC,GAAG,WAAW;AAAA,IACnG,oBAAC,mBAAgB,uBAAuB,2BAA2B,aAA0B;AAAA,KAC/F;AAEJ;AAEA,IAAO,wBAAQ;",
   "names": []
 }

package/dist/esm/parts/ExpandCaret.js

@@ -3,9 +3,9 @@ import { jsx } from "react/jsx-runtime";
 import { useContext, useCallback } from "react";
 import Button from "@elliemae/ds-button";
 import { ArrowheadDown, ArrowheadRight } from "@elliemae/ds-icons";
-import { toggleItemExpand } from "../utils/group-expands-helpers";
-import { focusItem } from "../utils/tree-helpers";
-import TreeViewContext from "../TreeViewContext";
+import { toggleItemExpand } from "../utils/group-expands-helpers.js";
+import { focusItem } from "../utils/tree-helpers.js";
+import TreeViewContext from "../TreeViewContext.js";
 const ExpandCaret = (props) => {
   const defaultHandleExpandGroup = useCallback(toggleItemExpand, []);
   const { item } = props;

package/dist/esm/parts/ExpandCaret.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/ExpandCaret.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback } from 'react';\nimport Button from '@elliemae/ds-button';\nimport { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';\nimport { toggleItemExpand } from '../utils/group-expands-helpers';\nimport { focusItem } from '../utils/tree-helpers';\nimport TreeViewContext from '../TreeViewContext';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\n\ninterface PropsT {\n  item: DSTreeviewT.Item;\n}\n\nexport const ExpandCaret = (props: PropsT): JSX.Element | null => {\n  const defaultHandleExpandGroup = useCallback(toggleItemExpand, []);\n  const { item } = props;\n  const { id, isExpanded, isGroup, children } = item;\n  const isGroupOrHasChildrens = isGroup || (Array.isArray(children) && children.length > 0);\n  const ctx = useContext(TreeViewContext);\n  const {\n    props: { onItemFocus },\n    handleExpandGroup = defaultHandleExpandGroup,\n    triggerTreeRerender,\n    updateUserExpandedState,\n    setLatestToggledItem,\n    setFocusedItem,\n    virtualListHelpers: { scrollToIndex },\n  } = ctx;\n\n  if (isGroupOrHasChildrens)\n    return (\n      <Button\n        buttonType=\"text\"\n        className=\"expandable-arrow\"\n        data-testid=\"tree-item-expand-toggle\"\n        key={`${id}-expand-addon`}\n        icon={\n          isExpanded ? (\n            <ArrowheadDown size=\"s\" data-testid=\"ic-arrow-head-down\" color={['brand-primary', '800']} />\n          ) : (\n            <ArrowheadRight size=\"s\" data-testid=\"ic-arrow-head-right\" color={['brand-primary', '800']} />\n          )\n        }\n        onMouseDown={(e: React.MouseEvent) => {\n          // prevent focusing the caret\n          if (e) {\n            e.preventDefault();\n          }\n        }}\n        onClick={(e) => {\n          e.stopPropagation();\n          if (e) handleExpandGroup(item, triggerTreeRerender, updateUserExpandedState, scrollToIndex, e);\n          setLatestToggledItem(item);\n          const itemVitualIndex = item.virtualIndex;\n          if (typeof itemVitualIndex === 'number') {\n            onItemFocus({\n              itemIndex: itemVitualIndex,\n              scrollToItem: (opts = { align: 'start' }) => scrollToIndex(itemVitualIndex, opts),\n              item,\n            });\n          }\n          setFocusedItem(item);\n          focusItem(item);\n        }}\n        size=\"s\"\n        tabIndex={-1}\n      />\n    );\n  return <div style={{ width: '24px' }} />;\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback } from 'react';\nimport Button from '@elliemae/ds-button';\nimport { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';\nimport { toggleItemExpand } from '../utils/group-expands-helpers.js';\nimport { focusItem } from '../utils/tree-helpers.js';\nimport TreeViewContext from '../TreeViewContext.js';\nimport type { DSTreeviewT } from '../react-desc-prop-types.js';\n\ninterface PropsT {\n  item: DSTreeviewT.Item;\n}\n\nexport const ExpandCaret = (props: PropsT): JSX.Element | null => {\n  const defaultHandleExpandGroup = useCallback(toggleItemExpand, []);\n  const { item } = props;\n  const { id, isExpanded, isGroup, children } = item;\n  const isGroupOrHasChildrens = isGroup || (Array.isArray(children) && children.length > 0);\n  const ctx = useContext(TreeViewContext);\n  const {\n    props: { onItemFocus },\n    handleExpandGroup = defaultHandleExpandGroup,\n    triggerTreeRerender,\n    updateUserExpandedState,\n    setLatestToggledItem,\n    setFocusedItem,\n    virtualListHelpers: { scrollToIndex },\n  } = ctx;\n\n  if (isGroupOrHasChildrens)\n    return (\n      <Button\n        buttonType=\"text\"\n        className=\"expandable-arrow\"\n        data-testid=\"tree-item-expand-toggle\"\n        key={`${id}-expand-addon`}\n        icon={\n          isExpanded ? (\n            <ArrowheadDown size=\"s\" data-testid=\"ic-arrow-head-down\" color={['brand-primary', '800']} />\n          ) : (\n            <ArrowheadRight size=\"s\" data-testid=\"ic-arrow-head-right\" color={['brand-primary', '800']} />\n          )\n        }\n        onMouseDown={(e: React.MouseEvent) => {\n          // prevent focusing the caret\n          if (e) {\n            e.preventDefault();\n          }\n        }}\n        onClick={(e) => {\n          e.stopPropagation();\n          if (e) handleExpandGroup(item, triggerTreeRerender, updateUserExpandedState, scrollToIndex, e);\n          setLatestToggledItem(item);\n          const itemVitualIndex = item.virtualIndex;\n          if (typeof itemVitualIndex === 'number') {\n            onItemFocus({\n              itemIndex: itemVitualIndex,\n              scrollToItem: (opts = { align: 'start' }) => scrollToIndex(itemVitualIndex, opts),\n              item,\n            });\n          }\n          setFocusedItem(item);\n          focusItem(item);\n        }}\n        size=\"s\"\n        tabIndex={-1}\n      />\n    );\n  return <div style={{ width: '24px' }} />;\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACqCX;AArCZ,SAAgB,YAAY,mBAAmB;AAC/C,OAAO,YAAY;AACnB,SAAS,eAAe,sBAAsB;AAC9C,SAAS,wBAAwB;AACjC,SAAS,iBAAiB;AAC1B,OAAO,qBAAqB;AAOrB,MAAM,cAAc,CAAC,UAAsC;AAChE,QAAM,2BAA2B,YAAY,kBAAkB,CAAC,CAAC;AACjE,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,EAAE,IAAI,YAAY,SAAS,SAAS,IAAI;AAC9C,QAAM,wBAAwB,WAAY,MAAM,QAAQ,QAAQ,KAAK,SAAS,SAAS;AACvF,QAAM,MAAM,WAAW,eAAe;AACtC,QAAM;AAAA,IACJ,OAAO,EAAE,YAAY;AAAA,IACrB,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,EAAE,cAAc;AAAA,EACtC,IAAI;AAEJ,MAAI;AACF,WACE;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,WAAU;AAAA,QACV,eAAY;AAAA,QAEZ,MACE,aACE,oBAAC,iBAAc,MAAK,KAAI,eAAY,sBAAqB,OAAO,CAAC,iBAAiB,KAAK,GAAG,IAE1F,oBAAC,kBAAe,MAAK,KAAI,eAAY,uBAAsB,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA,QAGhG,aAAa,CAAC,MAAwB;AAEpC,cAAI,GAAG;AACL,cAAE,eAAe;AAAA,UACnB;AAAA,QACF;AAAA,QACA,SAAS,CAAC,MAAM;AACd,YAAE,gBAAgB;AAClB,cAAI;AAAG,8BAAkB,MAAM,qBAAqB,yBAAyB,eAAe,CAAC;AAC7F,+BAAqB,IAAI;AACzB,gBAAM,kBAAkB,KAAK;AAC7B,cAAI,OAAO,oBAAoB,UAAU;AACvC,wBAAY;AAAA,cACV,WAAW;AAAA,cACX,cAAc,CAAC,OAAO,EAAE,OAAO,QAAQ,MAAM,cAAc,iBAAiB,IAAI;AAAA,cAChF;AAAA,YACF,CAAC;AAAA,UACH;AACA,yBAAe,IAAI;AACnB,oBAAU,IAAI;AAAA,QAChB;AAAA,QACA,MAAK;AAAA,QACL,UAAU;AAAA;AAAA,MA9BL,GAAG;AAAA,IA+BV;AAEJ,SAAO,oBAAC,SAAI,OAAO,EAAE,OAAO,OAAO,GAAG;AACxC;",
   "names": []
 }

package/dist/esm/parts/Icon.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import React2, { useContext } from "react";
 import { cx } from "@elliemae/ds-utilities";
-import TreeViewContext from "../TreeViewContext";
+import TreeViewContext from "../TreeViewContext.js";
 const Icon = (props) => {
   const { item } = props;
   const isGroupOrHasChildrens = item.isGroup || Array.isArray(item.children) && item.children.length > 0;
@@ -14,6 +14,10 @@ const Icon = (props) => {
     return null;
   return React2.cloneElement(icon, {
     "data-testid": isGroupOrHasChildrens ? "tree-item-group-icon" : "tree-item-icon",
+    // legacy class-name way of handling things,
+    // this will eventually be deprecated in favor of styled components
+    // untill then, just eslint-ignore and move on
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment
     className: cx(icon.props.className, "tree-item-icon")
   });
 };

package/dist/esm/parts/Icon.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Icon.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { cx } from '@elliemae/ds-utilities';\nimport TreeViewContext from '../TreeViewContext';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\ninterface PropsT {\n  item: DSTreeviewT.Item;\n}\nexport const Icon = (props: PropsT): JSX.Element | null => {\n  const { item } = props;\n  const isGroupOrHasChildrens = item.isGroup || (Array.isArray(item.children) && item.children.length > 0);\n  const ctx = useContext(TreeViewContext);\n  const {\n    props: { groupIcon, itemIcon },\n  } = ctx;\n  const icon = isGroupOrHasChildrens ? groupIcon : itemIcon;\n  if (!icon) return null;\n\n  return React.cloneElement(icon, {\n    'data-testid': isGroupOrHasChildrens ? 'tree-item-group-icon' : 'tree-item-icon',\n    // legacy class-name way of handling things,\n    // this will eventually be deprecated in favor of styled components\n    // untill then, just eslint-ignore and move on\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment\n    className: cx(icon.props.className, 'tree-item-icon'),\n  });\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,UAAS,kBAAkB;AAClC,SAAS,UAAU;AACnB,OAAO,qBAAqB;AAKrB,MAAM,OAAO,CAAC,UAAsC;AACzD,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,wBAAwB,KAAK,WAAY,MAAM,QAAQ,KAAK,QAAQ,KAAK,KAAK,SAAS,SAAS;AACtG,QAAM,MAAM,WAAW,eAAe;AACtC,QAAM;AAAA,IACJ,OAAO,EAAE,WAAW,SAAS;AAAA,EAC/B,IAAI;AACJ,QAAM,OAAO,wBAAwB,YAAY;AACjD,MAAI,CAAC;AAAM,WAAO;AAElB,SAAOA,OAAM,aAAa,MAAM;AAAA,IAC9B,eAAe,wBAAwB,yBAAyB;AAAA,IAKhE,WAAW,GAAG,KAAK,MAAM,WAAW,gBAAgB;AAAA,EACtD,CAAC;AACH;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { cx } from '@elliemae/ds-utilities';\nimport TreeViewContext from '../TreeViewContext.js';\nimport type { DSTreeviewT } from '../react-desc-prop-types.js';\ninterface PropsT {\n  item: DSTreeviewT.Item;\n}\nexport const Icon = (props: PropsT): JSX.Element | null => {\n  const { item } = props;\n  const isGroupOrHasChildrens = item.isGroup || (Array.isArray(item.children) && item.children.length > 0);\n  const ctx = useContext(TreeViewContext);\n  const {\n    props: { groupIcon, itemIcon },\n  } = ctx;\n  const icon = isGroupOrHasChildrens ? groupIcon : itemIcon;\n  if (!icon) return null;\n\n  return React.cloneElement(icon, {\n    'data-testid': isGroupOrHasChildrens ? 'tree-item-group-icon' : 'tree-item-icon',\n    // legacy class-name way of handling things,\n    // this will eventually be deprecated in favor of styled components\n    // untill then, just eslint-ignore and move on\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment\n    className: cx(icon.props.className, 'tree-item-icon'),\n  });\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,UAAS,kBAAkB;AAClC,SAAS,UAAU;AACnB,OAAO,qBAAqB;AAKrB,MAAM,OAAO,CAAC,UAAsC;AACzD,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,wBAAwB,KAAK,WAAY,MAAM,QAAQ,KAAK,QAAQ,KAAK,KAAK,SAAS,SAAS;AACtG,QAAM,MAAM,WAAW,eAAe;AACtC,QAAM;AAAA,IACJ,OAAO,EAAE,WAAW,SAAS;AAAA,EAC/B,IAAI;AACJ,QAAM,OAAO,wBAAwB,YAAY;AACjD,MAAI,CAAC;AAAM,WAAO;AAElB,SAAOA,OAAM,aAAa,MAAM;AAAA,IAC9B,eAAe,wBAAwB,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA,IAKhE,WAAW,GAAG,KAAK,MAAM,WAAW,gBAAgB;AAAA,EACtD,CAAC;AACH;",
   "names": ["React"]
 }

package/dist/esm/parts/NestingSpace.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/NestingSpace.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\n\nconst getItemNestingLeftPadding = (level: number, opts: { spaceForNestingLevel: number }) => {\n  const { spaceForNestingLevel = 1.5 } = opts;\n  const groupLeftPadding = spaceForNestingLevel * (level - 1);\n  const finalLeftPadding = groupLeftPadding + spaceForNestingLevel - 0.1;\n  // root level left-padding would be negative and would not be applied\n  // if \"root-level\" nesting, then defaults to 0 left-padding.\n  return finalLeftPadding > 0 ? `${finalLeftPadding}em` : '0';\n};\n\ntype NestingSpacePropsType = {\n  item: DSTreeviewT.Item;\n  spaceForNestingLevel: number;\n};\n\nexport const NestingSpace = (props: NestingSpacePropsType): JSX.Element | null => {\n  const { item, spaceForNestingLevel } = props;\n  const { treeDepth } = item;\n  if (treeDepth) {\n    const itemNestingLeftPadding = getItemNestingLeftPadding(treeDepth - 1, {\n      spaceForNestingLevel,\n    });\n\n    return <div data-testid=\"tree-item-nested-space\" style={{ width: itemNestingLeftPadding }} />;\n  }\n  return null;\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { DSTreeviewT } from '../react-desc-prop-types.js';\n\nconst getItemNestingLeftPadding = (level: number, opts: { spaceForNestingLevel: number }) => {\n  const { spaceForNestingLevel = 1.5 } = opts;\n  const groupLeftPadding = spaceForNestingLevel * (level - 1);\n  const finalLeftPadding = groupLeftPadding + spaceForNestingLevel - 0.1;\n  // root level left-padding would be negative and would not be applied\n  // if \"root-level\" nesting, then defaults to 0 left-padding.\n  return finalLeftPadding > 0 ? `${finalLeftPadding}em` : '0';\n};\n\ntype NestingSpacePropsType = {\n  item: DSTreeviewT.Item;\n  spaceForNestingLevel: number;\n};\n\nexport const NestingSpace = (props: NestingSpacePropsType): JSX.Element | null => {\n  const { item, spaceForNestingLevel } = props;\n  const { treeDepth } = item;\n  if (treeDepth) {\n    const itemNestingLeftPadding = getItemNestingLeftPadding(treeDepth - 1, {\n      spaceForNestingLevel,\n    });\n\n    return <div data-testid=\"tree-item-nested-space\" style={{ width: itemNestingLeftPadding }} />;\n  }\n  return null;\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACyBZ;AAtBX,MAAM,4BAA4B,CAAC,OAAe,SAA2C;AAC3F,QAAM,EAAE,uBAAuB,IAAI,IAAI;AACvC,QAAM,mBAAmB,wBAAwB,QAAQ;AACzD,QAAM,mBAAmB,mBAAmB,uBAAuB;AAGnE,SAAO,mBAAmB,IAAI,GAAG,uBAAuB;AAC1D;AAOO,MAAM,eAAe,CAAC,UAAqD;AAChF,QAAM,EAAE,MAAM,qBAAqB,IAAI;AACvC,QAAM,EAAE,UAAU,IAAI;AACtB,MAAI,WAAW;AACb,UAAM,yBAAyB,0BAA0B,YAAY,GAAG;AAAA,MACtE;AAAA,IACF,CAAC;AAED,WAAO,oBAAC,SAAI,eAAY,0BAAyB,OAAO,EAAE,OAAO,uBAAuB,GAAG;AAAA,EAC7F;AACA,SAAO;AACT;",
   "names": []
 }

package/dist/esm/parts/RadioSelectable.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { useContext, useCallback, useMemo } from "react";
 import { DSRadio } from "@elliemae/ds-form";
-import TreeViewContext from "../TreeViewContext";
+import TreeViewContext from "../TreeViewContext.js";
 const RadioSelectable = (props) => {
   const { item, itemIndex } = props;
   const ctx = useContext(TreeViewContext);

package/dist/esm/parts/RadioSelectable.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/RadioSelectable.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback, useMemo } from 'react';\nimport { DSRadio } from '@elliemae/ds-form';\nimport TreeViewContext from '../TreeViewContext';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\ninterface PropsT {\n  item: DSTreeviewT.Item;\n  itemIndex: number;\n}\nconst RadioSelectable = (props: PropsT) => {\n  const { item, itemIndex } = props;\n\n  const ctx = useContext(TreeViewContext);\n  const {\n    props: { onSelectionChange, isItemDisabled },\n    virtualListHelpers: { scrollToIndex },\n    uniqueTreeViewUUID,\n    selectedCheckboxes,\n    setSelectedCheckboxes,\n  } = ctx;\n\n  const { id } = item;\n\n  const onRadioChange = useCallback(() => {\n    const newSelectionHasmap = { [id]: true };\n    setSelectedCheckboxes(newSelectionHasmap);\n    const indexAndScrollTo = {\n      scrollToItem: () => {\n        if (item.virtualIndex) scrollToIndex(item.virtualIndex);\n      },\n      itemIndex,\n    };\n    if (onSelectionChange) onSelectionChange(newSelectionHasmap, item, indexAndScrollTo);\n  }, [id, setSelectedCheckboxes, itemIndex, onSelectionChange, item, scrollToIndex]);\n\n  const radioName = useMemo(() => `radios-${uniqueTreeViewUUID}`, [uniqueTreeViewUUID]);\n\n  const isDisabled = useMemo(() => isItemDisabled(item), [item, isItemDisabled]);\n\n  return (\n    <DSRadio\n      checked={selectedCheckboxes[id] === true}\n      name={radioName}\n      disabled={isDisabled}\n      className=\"em-ds-tree-item-radio\"\n      data-testid=\"tree-item-radio\"\n      onChange={onRadioChange}\n      tabIndex={0}\n    />\n  );\n};\n\nexport default RadioSelectable;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACuCnB;AAvCJ,SAAgB,YAAY,aAAa,eAAe;AACxD,SAAS,eAAe;AACxB,OAAO,qBAAqB;AAM5B,MAAM,kBAAkB,CAAC,UAAkB;AACzC,QAAM,EAAE,MAAM,UAAU,IAAI;AAE5B,QAAM,MAAM,WAAW,eAAe;AACtC,QAAM;AAAA,IACJ,OAAO,EAAE,mBAAmB,eAAe;AAAA,IAC3C,oBAAoB,EAAE,cAAc;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,EAAE,GAAG,IAAI;AAEf,QAAM,gBAAgB,YAAY,MAAM;AACtC,UAAM,qBAAqB,EAAE,CAAC,KAAK,KAAK;AACxC,0BAAsB,kBAAkB;AACxC,UAAM,mBAAmB;AAAA,MACvB,cAAc,MAAM;AAClB,YAAI,KAAK;AAAc,wBAAc,KAAK,YAAY;AAAA,MACxD;AAAA,MACA;AAAA,IACF;AACA,QAAI;AAAmB,wBAAkB,oBAAoB,MAAM,gBAAgB;AAAA,EACrF,GAAG,CAAC,IAAI,uBAAuB,WAAW,mBAAmB,MAAM,aAAa,CAAC;AAEjF,QAAM,YAAY,QAAQ,MAAM,UAAU,sBAAsB,CAAC,kBAAkB,CAAC;AAEpF,QAAM,aAAa,QAAQ,MAAM,eAAe,IAAI,GAAG,CAAC,MAAM,cAAc,CAAC;AAE7E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,mBAAmB,QAAQ;AAAA,MACpC,MAAM;AAAA,MACN,UAAU;AAAA,MACV,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,UAAU;AAAA,MACV,UAAU;AAAA;AAAA,EACZ;AAEJ;AAEA,IAAO,0BAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback, useMemo } from 'react';\nimport { DSRadio } from '@elliemae/ds-form';\nimport TreeViewContext from '../TreeViewContext.js';\nimport type { DSTreeviewT } from '../react-desc-prop-types.js';\ninterface PropsT {\n  item: DSTreeviewT.Item;\n  itemIndex: number;\n}\nconst RadioSelectable = (props: PropsT) => {\n  const { item, itemIndex } = props;\n\n  const ctx = useContext(TreeViewContext);\n  const {\n    props: { onSelectionChange, isItemDisabled },\n    virtualListHelpers: { scrollToIndex },\n    uniqueTreeViewUUID,\n    selectedCheckboxes,\n    setSelectedCheckboxes,\n  } = ctx;\n\n  const { id } = item;\n\n  const onRadioChange = useCallback(() => {\n    const newSelectionHasmap = { [id]: true };\n    setSelectedCheckboxes(newSelectionHasmap);\n    const indexAndScrollTo = {\n      scrollToItem: () => {\n        if (item.virtualIndex) scrollToIndex(item.virtualIndex);\n      },\n      itemIndex,\n    };\n    if (onSelectionChange) onSelectionChange(newSelectionHasmap, item, indexAndScrollTo);\n  }, [id, setSelectedCheckboxes, itemIndex, onSelectionChange, item, scrollToIndex]);\n\n  const radioName = useMemo(() => `radios-${uniqueTreeViewUUID}`, [uniqueTreeViewUUID]);\n\n  const isDisabled = useMemo(() => isItemDisabled(item), [item, isItemDisabled]);\n\n  return (\n    <DSRadio\n      checked={selectedCheckboxes[id] === true}\n      name={radioName}\n      disabled={isDisabled}\n      className=\"em-ds-tree-item-radio\"\n      data-testid=\"tree-item-radio\"\n      onChange={onRadioChange}\n      tabIndex={0}\n    />\n  );\n};\n\nexport default RadioSelectable;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACuCnB;AAvCJ,SAAgB,YAAY,aAAa,eAAe;AACxD,SAAS,eAAe;AACxB,OAAO,qBAAqB;AAM5B,MAAM,kBAAkB,CAAC,UAAkB;AACzC,QAAM,EAAE,MAAM,UAAU,IAAI;AAE5B,QAAM,MAAM,WAAW,eAAe;AACtC,QAAM;AAAA,IACJ,OAAO,EAAE,mBAAmB,eAAe;AAAA,IAC3C,oBAAoB,EAAE,cAAc;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,EAAE,GAAG,IAAI;AAEf,QAAM,gBAAgB,YAAY,MAAM;AACtC,UAAM,qBAAqB,EAAE,CAAC,EAAE,GAAG,KAAK;AACxC,0BAAsB,kBAAkB;AACxC,UAAM,mBAAmB;AAAA,MACvB,cAAc,MAAM;AAClB,YAAI,KAAK;AAAc,wBAAc,KAAK,YAAY;AAAA,MACxD;AAAA,MACA;AAAA,IACF;AACA,QAAI;AAAmB,wBAAkB,oBAAoB,MAAM,gBAAgB;AAAA,EACrF,GAAG,CAAC,IAAI,uBAAuB,WAAW,mBAAmB,MAAM,aAAa,CAAC;AAEjF,QAAM,YAAY,QAAQ,MAAM,UAAU,sBAAsB,CAAC,kBAAkB,CAAC;AAEpF,QAAM,aAAa,QAAQ,MAAM,eAAe,IAAI,GAAG,CAAC,MAAM,cAAc,CAAC;AAE7E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,mBAAmB,EAAE,MAAM;AAAA,MACpC,MAAM;AAAA,MACN,UAAU;AAAA,MACV,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,UAAU;AAAA,MACV,UAAU;AAAA;AAAA,EACZ;AAEJ;AAEA,IAAO,0BAAQ;",
   "names": []
 }

package/dist/esm/parts/TreeItem.js

@@ -2,27 +2,29 @@ import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useContext, useMemo, useCallback } from "react";
 import { aggregatedClasses } from "@elliemae/ds-classnames";
-import RadioSelectable from "./RadioSelectable";
-import CheckboxSelectable from "./CheckboxSelectable";
-import TreeViewContext from "../TreeViewContext";
-import { setMultipleRefs } from "../utils/refs-helpers";
-import { useOnItemKeyDown } from "../utils/keyboard-helpers";
-import { NestingSpace } from "./NestingSpace";
-import { Icon } from "./Icon";
-import { ExpandCaret } from "./ExpandCaret";
-import { TreeItemText } from "./TreeItemText";
-import { DSTreeViewPrefix, treeItemBlockName } from "../config/cssClassesConstants";
-import { DnDHandle } from "./DnDHandle";
-import { withDnDSortableItemContext } from "../hoc/WithDnDSortableItemContext";
-import { DropIndicatorPosition, SortableItemContext } from "../hoc/SortableItemContext";
-import DropIndicator from "./DropIndicator";
+import RadioSelectable from "./RadioSelectable.js";
+import CheckboxSelectable from "./CheckboxSelectable.js";
+import TreeViewContext from "../TreeViewContext.js";
+import { setMultipleRefs } from "../utils/refs-helpers.js";
+import { useOnItemKeyDown } from "../utils/keyboard-helpers.js";
+import { NestingSpace } from "./NestingSpace.js";
+import { Icon } from "./Icon.js";
+import { ExpandCaret } from "./ExpandCaret.js";
+import { TreeItemText } from "./TreeItemText.js";
+import { DSTreeViewPrefix, treeItemBlockName } from "../config/cssClassesConstants.js";
+import { DnDHandle } from "./DnDHandle.js";
+import { withDnDSortableItemContext } from "../hoc/WithDnDSortableItemContext.js";
+import { DropIndicatorPosition, SortableItemContext } from "../hoc/SortableItemContext.js";
+import DropIndicator from "./DropIndicator.js";
 const TreeListItem = aggregatedClasses("li", {
   "data-testid": treeItemBlockName,
   role: "treeitem"
+  // temp fix untill we move to styled components
 })(treeItemBlockName);
 const TreeListItemAddonsWrapper = aggregatedClasses("div")(
   treeItemBlockName,
   "addons"
+  // temp fix untill we move to styled components
 );
 const TreeItem = (props) => {
   const {