@deephaven/iris-grid 1.9.1-beta.0 → 1.9.1-beta.2

package/dist/sidebar/visibility-ordering-builder/VisibilityOrderingBuilderUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"VisibilityOrderingBuilderUtils.js","names":["GridUtils","clamp","ColumnHeaderGroup","moveItemsFromDrop","from","to","movedColumns","columnHeaderGroups","flattenedItems","selectedParentItems","firstMovableIndex","lastMovableIndex","treeItems","map","item","i","_objectSpread","index","newMoves","newGroups","firstVisibleIndex","data","visibleIndex","fromItemIndex","findIndex","_ref","id","toItemIndex","_ref2","toIndex","Array","isArray","moveToGroup","parentId","length","moveItemOrRange","selectedRange","originalDropIndex","dropIndex","getVisibleIndex","children","groups","concat","toName","columnGroups","group","newGroupMap","Map","name","fromGroup","find","g","toGroup","movedGroup","filter","_parent","deleteNames","Set","parent","parentName","get","removeChildren","_parent$parent","_parent2","add","nextParentName","nextParent","_ref3","has","addChildren","setParent","undefined"],"sources":["../../../src/sidebar/visibility-ordering-builder/VisibilityOrderingBuilderUtils.ts"],"sourcesContent":["import { GridUtils, type MoveOperation } from '@deephaven/grid';\nimport clamp from 'lodash.clamp';\nimport ColumnHeaderGroup from '../../ColumnHeaderGroup';\nimport { type FlattenedItem } from './sortable-tree/types';\nimport { type FlattenedIrisGridTreeItem } from './sortable-tree/utilities';\n\n/**\n * Moves an item as the result of drag and drop in the visibility ordering builder\n * This is extracted from the component mostly for testing purposes\n * Drag and drop interactions are not easily testable\n *\n * @param from The item being dragged\n * @param to The item being dropped on\n * @param movedColumns The existing moved columns\n * @param columnHeaderGroups The column header groups pre-drag\n * @param flattenedItems Flattened tree items representing the list\n * @param selectedParentItems The user selected items in tree order. Should not include items if their parent item is selected\n * @param firstMovableIndex The first visible index that can be moved\n * @param lastMovableIndex The last visible index that can be moved\n * @returns Object containing the updated column header groups and updated movedColumns array\n *          The movedColumns returned is complete and does not need to be combined with the existing movedColumns\n */\nexport function moveItemsFromDrop(\n  from: FlattenedIrisGridTreeItem,\n  to: FlattenedIrisGridTreeItem,\n  movedColumns: readonly MoveOperation[],\n  columnHeaderGroups: readonly ColumnHeaderGroup[],\n  flattenedItems: readonly FlattenedIrisGridTreeItem[],\n  selectedParentItems: readonly FlattenedIrisGridTreeItem[],\n  firstMovableIndex: number,\n  lastMovableIndex: number\n): {\n  groups: readonly ColumnHeaderGroup[];\n  movedColumns: readonly MoveOperation[];\n} {\n  const treeItems = flattenedItems.map((item, i) => ({\n    ...item,\n    index: i,\n  }));\n\n  let newMoves = [] as MoveOperation[];\n  let newGroups = columnHeaderGroups;\n\n  const firstVisibleIndex = selectedParentItems[0].data.visibleIndex;\n\n  const fromItemIndex = treeItems.findIndex(({ id }) => id === from.id);\n  const toItemIndex = treeItems.findIndex(({ id }) => id === to.id);\n\n  let toIndex = Array.isArray(firstVisibleIndex)\n    ? firstVisibleIndex[1] + 1\n    : firstVisibleIndex + 1;\n\n  newGroups = moveToGroup(selectedParentItems[0], to.parentId, newGroups);\n\n  // Move the items after to all after the first selected item\n  for (let i = 1; i < selectedParentItems.length; i += 1) {\n    const {\n      data: { visibleIndex },\n    } = selectedParentItems[i];\n\n    newMoves = GridUtils.moveItemOrRange(visibleIndex, toIndex, newMoves, true);\n\n    toIndex += Array.isArray(visibleIndex)\n      ? visibleIndex[1] - visibleIndex[0] + 1\n      : 1;\n\n    newGroups = moveToGroup(selectedParentItems[i], to.parentId, newGroups);\n  }\n\n  const selectedRange = [\n    Array.isArray(firstVisibleIndex) ? firstVisibleIndex[0] : firstVisibleIndex,\n    toIndex - 1,\n  ] as [number, number];\n\n  const originalDropIndex = Array.isArray(to.data.visibleIndex)\n    ? to.data.visibleIndex[0]\n    : to.data.visibleIndex;\n  let dropIndex = GridUtils.getVisibleIndex(originalDropIndex, newMoves);\n\n  // When moving up from multi-select\n  // And the items caused the drop index to shift (disjoint multi-select)\n  // The drop index will be off by 1\n  if (fromItemIndex > toItemIndex && dropIndex > originalDropIndex) {\n    dropIndex -= 1;\n  }\n  // Dropping as first item in a group\n  // Need to adjust visible index if dragging from before this group or it is off by 1\n  if (\n    to.children.length > 0 &&\n    (Array.isArray(firstVisibleIndex)\n      ? firstVisibleIndex[0]\n      : firstVisibleIndex) < dropIndex\n  ) {\n    dropIndex -= 1;\n  }\n\n  if (selectedRange[0] < dropIndex) {\n    dropIndex -= selectedRange[1] - selectedRange[0];\n  }\n\n  newMoves = GridUtils.moveItemOrRange(\n    selectedRange,\n    clamp(dropIndex, firstMovableIndex, lastMovableIndex),\n    newMoves\n  );\n\n  return {\n    groups: newGroups,\n    movedColumns:\n      newMoves.length > 0 ? movedColumns.concat(newMoves) : movedColumns,\n  };\n}\n\nexport function moveToGroup<T>(\n  item: FlattenedItem<T>,\n  toName: string | null,\n  columnGroups: readonly ColumnHeaderGroup[]\n): readonly ColumnHeaderGroup[] {\n  if (item.parentId === toName) {\n    // Don't need to move an item if it is already in the group\n    return columnGroups;\n  }\n\n  let newGroups = columnGroups.map(group => new ColumnHeaderGroup(group));\n  const newGroupMap = new Map(newGroups.map(group => [group.name, group]));\n  const fromGroup = newGroups.find(g => g.name === item.parentId);\n  const toGroup = newGroups.find(g => g.name === toName);\n  const movedGroup = newGroups.find(g => g.name === item.id);\n\n  if (fromGroup != null) {\n    // Moved out of a group\n    fromGroup.children = fromGroup.children.filter(name => name !== item.id);\n\n    // Moved all children out of a group\n    if (fromGroup.children.length === 0) {\n      const deleteNames = new Set([fromGroup.name]);\n      const { parent: parentName = '' } = fromGroup;\n      let parent = newGroupMap.get(parentName);\n      parent?.removeChildren([fromGroup.name]);\n\n      // Might need to delete parents if their only child is the now empty group\n      while (parent && parent.children.length === 0) {\n        deleteNames.add(parent.name);\n        const nextParentName = parent?.parent ?? '';\n        const nextParent = newGroupMap.get(nextParentName);\n        nextParent?.removeChildren([parent.name]);\n        parent = nextParent;\n      }\n\n      // Delete all groups that are now empty\n      newGroups = newGroups.filter(({ name }) => !deleteNames.has(name));\n    }\n  }\n\n  if (toGroup != null) {\n    // Moved into a group\n    toGroup.addChildren([item.id]);\n  }\n\n  movedGroup?.setParent(toName ?? undefined);\n\n  return newGroups;\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VisibilityOrderingBuilderUtils.js","names":["GridUtils","clamp","ColumnHeaderGroup","moveItemsFromDrop","from","to","movedColumns","columnHeaderGroups","selectedParentItems","firstMovableIndex","lastMovableIndex","newMoves","newGroups","firstVisibleIndex","data","visibleIndex","fromItemIndex","index","toItemIndex","toIndex","Array","isArray","moveToGroup","parentId","i","length","moveItemOrRange","selectedRange","originalDropIndex","dropIndex","getVisibleIndex","children","groups","concat","item","toName","columnGroups","map","group","newGroupMap","Map","name","fromGroup","find","g","toGroup","movedGroup","id","filter","_parent","deleteNames","Set","parent","parentName","get","removeChildren","_parent$parent","_parent2","add","nextParentName","nextParent","_ref","has","addChildren","setParent","undefined"],"sources":["../../../src/sidebar/visibility-ordering-builder/VisibilityOrderingBuilderUtils.ts"],"sourcesContent":["import { GridUtils, type MoveOperation } from '@deephaven/grid';\nimport clamp from 'lodash.clamp';\nimport ColumnHeaderGroup from '../../ColumnHeaderGroup';\nimport { type FlattenedItem } from './sortable-tree/types';\nimport { type FlattenedIrisGridTreeItem } from './sortable-tree/utilities';\n\n/**\n * Moves an item as the result of drag and drop in the visibility ordering builder\n * This is extracted from the component mostly for testing purposes\n * Drag and drop interactions are not easily testable\n *\n * @param from The item being dragged\n * @param to The item being dropped on\n * @param movedColumns The existing moved columns\n * @param columnHeaderGroups The column header groups pre-drag\n * @param flattenedItems Flattened tree items representing the list\n * @param selectedParentItems The user selected items in tree order. Should not include items if their parent item is selected\n * @param firstMovableIndex The first visible index that can be moved\n * @param lastMovableIndex The last visible index that can be moved\n * @returns Object containing the updated column header groups and updated movedColumns array\n *          The movedColumns returned is complete and does not need to be combined with the existing movedColumns\n */\nexport function moveItemsFromDrop(\n  from: FlattenedIrisGridTreeItem,\n  to: FlattenedIrisGridTreeItem,\n  movedColumns: readonly MoveOperation[],\n  columnHeaderGroups: readonly ColumnHeaderGroup[],\n  selectedParentItems: readonly FlattenedIrisGridTreeItem[],\n  firstMovableIndex: number,\n  lastMovableIndex: number\n): {\n  groups: readonly ColumnHeaderGroup[];\n  movedColumns: readonly MoveOperation[];\n} {\n  let newMoves = [] as MoveOperation[];\n  let newGroups = columnHeaderGroups;\n\n  const firstVisibleIndex = selectedParentItems[0].data.visibleIndex;\n\n  const fromItemIndex = from.index;\n  const toItemIndex = to.index;\n\n  let toIndex = Array.isArray(firstVisibleIndex)\n    ? firstVisibleIndex[1] + 1\n    : firstVisibleIndex + 1;\n\n  newGroups = moveToGroup(selectedParentItems[0], to.parentId, newGroups);\n\n  // Move the items after to all after the first selected item\n  for (let i = 1; i < selectedParentItems.length; i += 1) {\n    const {\n      data: { visibleIndex },\n    } = selectedParentItems[i];\n\n    newMoves = GridUtils.moveItemOrRange(visibleIndex, toIndex, newMoves, true);\n\n    toIndex += Array.isArray(visibleIndex)\n      ? visibleIndex[1] - visibleIndex[0] + 1\n      : 1;\n\n    newGroups = moveToGroup(selectedParentItems[i], to.parentId, newGroups);\n  }\n\n  const selectedRange = [\n    Array.isArray(firstVisibleIndex) ? firstVisibleIndex[0] : firstVisibleIndex,\n    toIndex - 1,\n  ] as [number, number];\n\n  const originalDropIndex = Array.isArray(to.data.visibleIndex)\n    ? to.data.visibleIndex[0]\n    : to.data.visibleIndex;\n  let dropIndex = GridUtils.getVisibleIndex(originalDropIndex, newMoves);\n\n  // When moving up from multi-select\n  // And the items caused the drop index to shift (disjoint multi-select)\n  // The drop index will be off by 1\n  if (fromItemIndex > toItemIndex && dropIndex > originalDropIndex) {\n    dropIndex -= 1;\n  }\n  // Dropping as first item in a group\n  // Need to adjust visible index if dragging from before this group or it is off by 1\n  if (\n    to.children.length > 0 &&\n    (Array.isArray(firstVisibleIndex)\n      ? firstVisibleIndex[0]\n      : firstVisibleIndex) < dropIndex\n  ) {\n    dropIndex -= 1;\n  }\n\n  if (selectedRange[0] < dropIndex) {\n    dropIndex -= selectedRange[1] - selectedRange[0];\n  }\n\n  newMoves = GridUtils.moveItemOrRange(\n    selectedRange,\n    clamp(dropIndex, firstMovableIndex, lastMovableIndex),\n    newMoves\n  );\n\n  return {\n    groups: newGroups,\n    movedColumns:\n      newMoves.length > 0 ? movedColumns.concat(newMoves) : movedColumns,\n  };\n}\n\nexport function moveToGroup<T>(\n  item: FlattenedItem<T>,\n  toName: string | null,\n  columnGroups: readonly ColumnHeaderGroup[]\n): readonly ColumnHeaderGroup[] {\n  if (item.parentId === toName) {\n    // Don't need to move an item if it is already in the group\n    return columnGroups;\n  }\n\n  let newGroups = columnGroups.map(group => new ColumnHeaderGroup(group));\n  const newGroupMap = new Map(newGroups.map(group => [group.name, group]));\n  const fromGroup = newGroups.find(g => g.name === item.parentId);\n  const toGroup = newGroups.find(g => g.name === toName);\n  const movedGroup = newGroups.find(g => g.name === item.id);\n\n  if (fromGroup != null) {\n    // Moved out of a group\n    fromGroup.children = fromGroup.children.filter(name => name !== item.id);\n\n    // Moved all children out of a group\n    if (fromGroup.children.length === 0) {\n      const deleteNames = new Set([fromGroup.name]);\n      const { parent: parentName = '' } = fromGroup;\n      let parent = newGroupMap.get(parentName);\n      parent?.removeChildren([fromGroup.name]);\n\n      // Might need to delete parents if their only child is the now empty group\n      while (parent && parent.children.length === 0) {\n        deleteNames.add(parent.name);\n        const nextParentName = parent?.parent ?? '';\n        const nextParent = newGroupMap.get(nextParentName);\n        nextParent?.removeChildren([parent.name]);\n        parent = nextParent;\n      }\n\n      // Delete all groups that are now empty\n      newGroups = newGroups.filter(({ name }) => !deleteNames.has(name));\n    }\n  }\n\n  if (toGroup != null) {\n    // Moved into a group\n    toGroup.addChildren([item.id]);\n  }\n\n  movedGroup?.setParent(toName ?? undefined);\n\n  return newGroups;\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/sidebar/visibility-ordering-builder/VisibilityOrderingItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VisibilityOrderingItem.d.ts","sourceRoot":"","sources":["../../../src/sidebar/visibility-ordering-builder/VisibilityOrderingItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgD,MAAM,OAAO,CAAC;AAMrE,OAAO,EAAE,KAAK,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AAC3E,OAAO,KAAK,iBAAiB,MAAM,yBAAyB,CAAC;AAE7D,KAAK,2BAA2B,GAAG;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,yBAAyB,CAAC;IAChC,kBAAkB,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,EAAE,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACzE;;;OAGG;IACH,sBAAsB,EAAE,OAAO,CAAC;IAChC,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACtE,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAClD,kBAAkB,EAAE,CAClB,KAAK,EAAE,iBAAiB,EACxB,KAAK,EAAE,MAAM,GAAG,SAAS,KACtB,IAAI,CAAC;IACV,iBAAiB,EAAE,CAAC,KAAK,EAAE,iBAAiB,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpE,iBAAiB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACvC,CAAC;AAqGF,QAAA,MAAM,8BAA8B,+HAA+B,CAAC;AAEpE,eAAe,8BAA8B,CAAC"}
+{"version":3,"file":"VisibilityOrderingItem.d.ts","sourceRoot":"","sources":["../../../src/sidebar/visibility-ordering-builder/VisibilityOrderingItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgD,MAAM,OAAO,CAAC;AAMrE,OAAO,EAAE,KAAK,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AAC3E,OAAO,KAAK,iBAAiB,MAAM,yBAAyB,CAAC;AAE7D,KAAK,2BAA2B,GAAG;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,yBAAyB,CAAC;IAChC,kBAAkB,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,EAAE,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACzE;;;OAGG;IACH,sBAAsB,EAAE,OAAO,CAAC;IAChC,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACtE,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAClD,kBAAkB,EAAE,CAClB,KAAK,EAAE,iBAAiB,EACxB,KAAK,EAAE,MAAM,GAAG,SAAS,KACtB,IAAI,CAAC;IACV,iBAAiB,EAAE,CAAC,KAAK,EAAE,iBAAiB,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpE,iBAAiB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACvC,CAAC;AAyGF,QAAA,MAAM,8BAA8B,+HAA+B,CAAC;AAEpE,eAAe,8BAA8B,CAAC"}

package/dist/sidebar/visibility-ordering-builder/VisibilityOrderingItem.js

@@ -9,7 +9,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { dhEye, dhEyeSlash, vsGripper } from '@deephaven/icons';
 import { Button, Tooltip } from '@deephaven/components';
 import VisibilityOrderingGroup from "./VisibilityOrderingGroup.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 function emptyOnClick() {
   // no-op
 }
@@ -83,10 +83,12 @@ var VisibilityOrderingItem = /*#__PURE__*/forwardRef(function VisibilityOrdering
         children: [clone && childCount > 1 && /*#__PURE__*/_jsx("span", {
           className: "item-count",
           children: childCount
-        }), /*#__PURE__*/_jsx(Tooltip, {
-          children: "Drag to re-order"
-        }), /*#__PURE__*/_jsx(FontAwesomeIcon, {
-          icon: vsGripper
+        }), !clone && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(Tooltip, {
+            children: "Drag to re-order"
+          }), /*#__PURE__*/_jsx(FontAwesomeIcon, {
+            icon: vsGripper
+          })]
         })]
       })]
     }))

package/dist/sidebar/visibility-ordering-builder/VisibilityOrderingItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"VisibilityOrderingItem.js","names":["React","forwardRef","memo","useCallback","useRef","classNames","FontAwesomeIcon","dhEye","dhEyeSlash","vsGripper","Button","Tooltip","VisibilityOrderingGroup","jsx","_jsx","jsxs","_jsxs","emptyOnClick","VisibilityOrderingItem","props","ref","value","clone","childCount","item","onVisibilityChange","visibilityClickAndDrag","onClick","onGroupDelete","onGroupColorChange","onGroupNameChange","validateGroupName","handleProps","group","modelIndex","isVisible","data","buttonRef","handleVisibilityChange","e","buttons","_buttonRef$current","flat","current","focus","handleClick","event","_objectSpread","className","isSelected","selected","index","children","kind","onMouseDown","onMouseEnter","undefined","icon","tooltip","title","onDelete","onColorChange","onNameChange","validateName","MemoizedVisibilityOrderingItem"],"sources":["../../../src/sidebar/visibility-ordering-builder/VisibilityOrderingItem.tsx"],"sourcesContent":["import React, { forwardRef, memo, useCallback, useRef } from 'react';\nimport classNames from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { dhEye, dhEyeSlash, vsGripper } from '@deephaven/icons';\nimport { Button, Tooltip } from '@deephaven/components';\nimport VisibilityOrderingGroup from './VisibilityOrderingGroup';\nimport { type FlattenedIrisGridTreeItem } from './sortable-tree/utilities';\nimport type ColumnHeaderGroup from '../../ColumnHeaderGroup';\n\ntype VisibilityOrderingItemProps = {\n  value: string;\n  clone: boolean;\n  childCount: number;\n  item: FlattenedIrisGridTreeItem;\n  onVisibilityChange: (modelIndexes: number[], isVisible: boolean) => void;\n  /**\n   * If true, allows changing visibility by clicking and dragging over multiple item\n   * visibility buttons.\n   */\n  visibilityClickAndDrag: boolean;\n  onClick: (name: string, event: React.MouseEvent<HTMLElement>) => void;\n  onGroupDelete: (group: ColumnHeaderGroup) => void;\n  onGroupColorChange: (\n    group: ColumnHeaderGroup,\n    color: string | undefined\n  ) => void;\n  onGroupNameChange: (group: ColumnHeaderGroup, name: string) => void;\n  validateGroupName: (name: string) => string;\n  handleProps?: Record<string, unknown>;\n};\n\nfunction emptyOnClick(): void {\n  // no-op\n}\n\nconst VisibilityOrderingItem = forwardRef<\n  HTMLDivElement,\n  VisibilityOrderingItemProps\n>(function VisibilityOrderingItem(props, ref) {\n  const {\n    value,\n    clone,\n    childCount,\n    item,\n    onVisibilityChange,\n    visibilityClickAndDrag,\n    onClick,\n    onGroupDelete,\n    onGroupColorChange,\n    onGroupNameChange,\n    validateGroupName,\n    handleProps,\n  } = props;\n  const { group, modelIndex, isVisible } = item.data;\n  const buttonRef = useRef<HTMLButtonElement>(null);\n\n  const handleVisibilityChange = useCallback(\n    (e: React.MouseEvent) => {\n      if (e.buttons === 1) {\n        onVisibilityChange([modelIndex].flat(), !isVisible);\n        buttonRef.current?.focus();\n      }\n    },\n    [onVisibilityChange, modelIndex, isVisible]\n  );\n\n  const handleClick = useCallback(\n    (event: React.MouseEvent<HTMLElement>) => {\n      onClick(value, event);\n    },\n    [onClick, value]\n  );\n\n  return (\n    // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n    <div\n      ref={ref}\n      className={classNames('tree-item', {\n        isSelected: item.selected,\n        'two-dragged': childCount === 2,\n        'multiple-dragged': childCount > 2,\n      })}\n      onClick={handleClick}\n      data-index={item.index}\n      // eslint-disable-next-line react/jsx-props-no-spreading\n      {...handleProps}\n    >\n      {!clone && (\n        <Button\n          ref={buttonRef}\n          kind=\"ghost\"\n          className=\"px-1\"\n          // We PropType validate onClick for Button\n          onClick={emptyOnClick}\n          onMouseDown={handleVisibilityChange}\n          onMouseEnter={\n            visibilityClickAndDrag ? handleVisibilityChange : undefined\n          }\n          icon={isVisible ? dhEye : dhEyeSlash}\n          tooltip=\"Toggle visibility\"\n        />\n      )}\n      <span\n        title={value}\n        className={classNames('column-name', group && 'column-group')}\n      >\n        {/* Display a normal item if this is the drag overlay clone, even if it's a group */}\n        {group && !clone ? (\n          <VisibilityOrderingGroup\n            group={group}\n            onDelete={onGroupDelete}\n            onColorChange={onGroupColorChange}\n            onNameChange={onGroupNameChange}\n            validateName={validateGroupName}\n          />\n        ) : (\n          value\n        )}\n      </span>\n      <div>\n        {clone && childCount > 1 && (\n          <span className=\"item-count\">{childCount}</span>\n        )}\n        <Tooltip>Drag to re-order</Tooltip>\n        <FontAwesomeIcon icon={vsGripper} />\n      </div>\n    </div>\n  );\n});\n\nconst MemoizedVisibilityOrderingItem = memo(VisibilityOrderingItem);\n\nexport default MemoizedVisibilityOrderingItem;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VisibilityOrderingItem.js","names":["React","forwardRef","memo","useCallback","useRef","classNames","FontAwesomeIcon","dhEye","dhEyeSlash","vsGripper","Button","Tooltip","VisibilityOrderingGroup","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","emptyOnClick","VisibilityOrderingItem","props","ref","value","clone","childCount","item","onVisibilityChange","visibilityClickAndDrag","onClick","onGroupDelete","onGroupColorChange","onGroupNameChange","validateGroupName","handleProps","group","modelIndex","isVisible","data","buttonRef","handleVisibilityChange","e","buttons","_buttonRef$current","flat","current","focus","handleClick","event","_objectSpread","className","isSelected","selected","index","children","kind","onMouseDown","onMouseEnter","undefined","icon","tooltip","title","onDelete","onColorChange","onNameChange","validateName","MemoizedVisibilityOrderingItem"],"sources":["../../../src/sidebar/visibility-ordering-builder/VisibilityOrderingItem.tsx"],"sourcesContent":["import React, { forwardRef, memo, useCallback, useRef } from 'react';\nimport classNames from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { dhEye, dhEyeSlash, vsGripper } from '@deephaven/icons';\nimport { Button, Tooltip } from '@deephaven/components';\nimport VisibilityOrderingGroup from './VisibilityOrderingGroup';\nimport { type FlattenedIrisGridTreeItem } from './sortable-tree/utilities';\nimport type ColumnHeaderGroup from '../../ColumnHeaderGroup';\n\ntype VisibilityOrderingItemProps = {\n  value: string;\n  clone: boolean;\n  childCount: number;\n  item: FlattenedIrisGridTreeItem;\n  onVisibilityChange: (modelIndexes: number[], isVisible: boolean) => void;\n  /**\n   * If true, allows changing visibility by clicking and dragging over multiple item\n   * visibility buttons.\n   */\n  visibilityClickAndDrag: boolean;\n  onClick: (name: string, event: React.MouseEvent<HTMLElement>) => void;\n  onGroupDelete: (group: ColumnHeaderGroup) => void;\n  onGroupColorChange: (\n    group: ColumnHeaderGroup,\n    color: string | undefined\n  ) => void;\n  onGroupNameChange: (group: ColumnHeaderGroup, name: string) => void;\n  validateGroupName: (name: string) => string;\n  handleProps?: Record<string, unknown>;\n};\n\nfunction emptyOnClick(): void {\n  // no-op\n}\n\nconst VisibilityOrderingItem = forwardRef<\n  HTMLDivElement,\n  VisibilityOrderingItemProps\n>(function VisibilityOrderingItem(props, ref) {\n  const {\n    value,\n    clone,\n    childCount,\n    item,\n    onVisibilityChange,\n    visibilityClickAndDrag,\n    onClick,\n    onGroupDelete,\n    onGroupColorChange,\n    onGroupNameChange,\n    validateGroupName,\n    handleProps,\n  } = props;\n  const { group, modelIndex, isVisible } = item.data;\n  const buttonRef = useRef<HTMLButtonElement>(null);\n\n  const handleVisibilityChange = useCallback(\n    (e: React.MouseEvent) => {\n      if (e.buttons === 1) {\n        onVisibilityChange([modelIndex].flat(), !isVisible);\n        buttonRef.current?.focus();\n      }\n    },\n    [onVisibilityChange, modelIndex, isVisible]\n  );\n\n  const handleClick = useCallback(\n    (event: React.MouseEvent<HTMLElement>) => {\n      onClick(value, event);\n    },\n    [onClick, value]\n  );\n\n  return (\n    // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n    <div\n      ref={ref}\n      className={classNames('tree-item', {\n        isSelected: item.selected,\n        'two-dragged': childCount === 2,\n        'multiple-dragged': childCount > 2,\n      })}\n      onClick={handleClick}\n      data-index={item.index}\n      // eslint-disable-next-line react/jsx-props-no-spreading\n      {...handleProps}\n    >\n      {!clone && (\n        <Button\n          ref={buttonRef}\n          kind=\"ghost\"\n          className=\"px-1\"\n          // We PropType validate onClick for Button\n          onClick={emptyOnClick}\n          onMouseDown={handleVisibilityChange}\n          onMouseEnter={\n            visibilityClickAndDrag ? handleVisibilityChange : undefined\n          }\n          icon={isVisible ? dhEye : dhEyeSlash}\n          tooltip=\"Toggle visibility\"\n        />\n      )}\n      <span\n        title={value}\n        className={classNames('column-name', group && 'column-group')}\n      >\n        {/* Display a normal item if this is the drag overlay clone, even if it's a group */}\n        {group && !clone ? (\n          <VisibilityOrderingGroup\n            group={group}\n            onDelete={onGroupDelete}\n            onColorChange={onGroupColorChange}\n            onNameChange={onGroupNameChange}\n            validateName={validateGroupName}\n          />\n        ) : (\n          value\n        )}\n      </span>\n      <div>\n        {clone && childCount > 1 && (\n          <span className=\"item-count\">{childCount}</span>\n        )}\n        {!clone && (\n          <>\n            <Tooltip>Drag to re-order</Tooltip>\n            <FontAwesomeIcon icon={vsGripper} />\n          </>\n        )}\n      </div>\n    </div>\n  );\n});\n\nconst MemoizedVisibilityOrderingItem = memo(VisibilityOrderingItem);\n\nexport default MemoizedVisibilityOrderingItem;\n"],"mappings":"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","ignoreList":[]}

package/dist/sidebar/visibility-ordering-builder/sortable-tree/SortableTree.d.ts

@@ -1,12 +1,15 @@
+import React from 'react';
+import { type Virtualizer } from '@tanstack/react-virtual';
 import { type TreeItemRenderFn } from './TreeItem';
-import type { TreeItem as TreeItemType } from './types';
+import type { FlattenedItem } from './types';
 interface Props<T> {
-    items: TreeItemType<T>[];
+    items: readonly FlattenedItem<T>[];
     indentationWidth?: number;
     renderItem: TreeItemRenderFn<T>;
     isDraggable?: boolean;
     withDepthMarkers?: boolean;
+    virtualizerRef?: React.Ref<Virtualizer<HTMLElement, Element>>;
 }
-export default function SortableTree<T>({ items, indentationWidth, renderItem, isDraggable, withDepthMarkers, }: Props<T>): JSX.Element;
+export default function SortableTree<T>({ items, indentationWidth, renderItem, isDraggable, withDepthMarkers, virtualizerRef, }: Props<T>): JSX.Element;
 export {};
 //# sourceMappingURL=SortableTree.d.ts.map

package/dist/sidebar/visibility-ordering-builder/sortable-tree/SortableTree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SortableTree.d.ts","sourceRoot":"","sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/SortableTree.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAY,KAAK,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAC7D,OAAO,KAAK,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,SAAS,CAAC;AAExD,UAAU,KAAK,CAAC,CAAC;IACf,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,UAAU,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC;IAChC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,CAAC,EAAE,EACtC,KAAK,EACL,gBAAqB,EACrB,UAAU,EACV,WAAkB,EAClB,gBAAuB,GACxB,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CAqFxB"}
+{"version":3,"file":"SortableTree.d.ts","sourceRoot":"","sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/SortableTree.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAGf,OAAO,EAIL,KAAK,WAAW,EACjB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAY,KAAK,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAC7D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,UAAU,KAAK,CAAC,CAAC;IACf,KAAK,EAAE,SAAS,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;IACnC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,UAAU,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC;IAChC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC;CAC/D;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,CAAC,EAAE,EACtC,KAAK,EACL,gBAAqB,EACrB,UAAU,EACV,WAAkB,EAClB,gBAAuB,EACvB,cAAc,GACf,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CA+HxB"}

package/dist/sidebar/visibility-ordering-builder/sortable-tree/SortableTree.js

@@ -1,7 +1,8 @@
-import { useEffect, useMemo, useRef } from 'react';
+import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import classNames from 'classnames';
 import { useDndContext } from '@dnd-kit/core';
-import { flattenTree, getProjection } from "./utilities.js";
+import { defaultRangeExtractor, useVirtualizer } from '@tanstack/react-virtual';
+import { getProjection } from "./utilities.js";
 import { SortableTreeItem } from "./SortableTreeItem.js";
 import { TreeItem } from "./TreeItem.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -12,16 +13,16 @@ export default function SortableTree(_ref) {
     indentationWidth = 30,
     renderItem,
     isDraggable = true,
-    withDepthMarkers = true
+    withDepthMarkers = true,
+    virtualizerRef
   } = _ref;
   var dndContext = useDndContext();
   var activeId = (_ref2 = (_dndContext$active = dndContext.active) === null || _dndContext$active === void 0 ? void 0 : _dndContext$active.id) !== null && _ref2 !== void 0 ? _ref2 : null;
   var overId = (_ref3 = (_dndContext$over = dndContext.over) === null || _dndContext$over === void 0 ? void 0 : _dndContext$over.id) !== null && _ref3 !== void 0 ? _ref3 : null;
   var offsetLeft = dndContext.active ? ((_dndContext$active$re = (_dndContext$active$re2 = dndContext.active.rect.current.translated) === null || _dndContext$active$re2 === void 0 ? void 0 : _dndContext$active$re2.left) !== null && _dndContext$active$re !== void 0 ? _dndContext$active$re : 0) - ((_dndContext$active$re3 = (_dndContext$active$re4 = dndContext.active.rect.current.initial) === null || _dndContext$active$re4 === void 0 ? void 0 : _dndContext$active$re4.left) !== null && _dndContext$active$re3 !== void 0 ? _dndContext$active$re3 : 0) : 0;
-  var flattenedItems = useMemo(() => {
-    var flattenedTree = flattenTree(items);
+  var filteredItems = useMemo(() => {
     if (activeId != null) {
-      return flattenedTree.filter(_ref4 => {
+      return items.filter(_ref4 => {
         var {
           id,
           selected
@@ -29,30 +30,69 @@ export default function SortableTree(_ref) {
         return id === activeId || !selected;
       });
     }
-    return flattenedTree;
+    return items;
   }, [activeId, items]);
-  var context = useDndContext();
-  var contextRef = useRef(context);
-  useEffect(function updateContextRef() {
-    contextRef.current = context;
-  }, [context]);
+  var activeIndex = useMemo(() => filteredItems.findIndex(_ref5 => {
+    var {
+      id
+    } = _ref5;
+    return id === activeId;
+  }), [activeId, filteredItems]);
+
+  // Add the active index to the range so it is always rendered
+  var rangeExtractor = useCallback(range => {
+    var extractedRange = defaultRangeExtractor(range);
+    if (activeIndex >= 0 && (activeIndex < extractedRange[0] || activeIndex > extractedRange[extractedRange.length - 1])) {
+      extractedRange.push(activeIndex);
+    }
+    return extractedRange;
+  }, [activeIndex]);
+  var getScrollElement = useCallback(() => {
+    var _containerRef$current, _containerRef$current2;
+    return (_containerRef$current = (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.parentElement) !== null && _containerRef$current !== void 0 ? _containerRef$current : null;
+  }, []);
+  var estimateSize = useCallback(() => 30, []);
+  var containerRef = useRef(null);
+  var virtualizer = useVirtualizer({
+    count: filteredItems.length,
+    getScrollElement,
+    estimateSize,
+    rangeExtractor,
+    overscan: 10,
+    gap: 1 // We set a 1px bottom margin before we virtualized this list
+  });
+
+  // Expose the virtualizer via ref
+  useImperativeHandle(virtualizerRef, () => virtualizer, [virtualizer]);
+  var virtualizedItems = virtualizer.getVirtualItems();
+  var {
+    measureDroppableContainers
+  } = useDndContext();
 
   // Without this, animations are funky when using the move/sort buttons
   // dnd-kit only remeasures on drag/drop by default
-  // The context object changes while dragging (items don't)
-  // Using the context ref allows this to trigger properly on only items changes
   useEffect(function remeasureContainers() {
-    contextRef.current.measureDroppableContainers(items.map(_ref5 => {
+    measureDroppableContainers(virtualizedItems.map(_ref6 => {
       var {
-        id
-      } = _ref5;
-      return id;
+        index
+      } = _ref6;
+      return filteredItems[index].id;
     }));
-  }, [items]);
-  var projected = isDraggable && activeId != null && overId != null ? getProjection(flattenedItems, activeId, overId, offsetLeft, indentationWidth) : null;
+  }, [filteredItems, measureDroppableContainers, virtualizedItems]);
+  var projected = isDraggable && activeId != null && overId != null ? getProjection(filteredItems, activeId, overId, offsetLeft, indentationWidth) : null;
   return /*#__PURE__*/_jsx("div", {
     className: classNames('tree-container', activeId != null && 'marching-ants'),
-    children: flattenedItems.map(item => {
+    style: {
+      height: "".concat(virtualizer.getTotalSize(), "px"),
+      position: 'relative'
+    },
+    ref: containerRef,
+    children: virtualizer.getVirtualItems().map(_ref7 => {
+      var {
+        index,
+        start
+      } = _ref7;
+      var item = filteredItems[index];
       var {
         id,
         depth
@@ -63,13 +103,19 @@ export default function SortableTree(_ref) {
         depth: id === activeId && projected ? projected.depth : depth,
         item: item,
         renderItem: renderItem,
-        withDepthMarkers: withDepthMarkers
+        withDepthMarkers: withDepthMarkers,
+        top: start
+        // This allows the group items to expand when editing the name and shift the list correctly
+        ,
+        measureElement: virtualizer.measureElement
       }, id) : /*#__PURE__*/_jsx(TreeItem, {
         value: id,
         depth: depth,
         item: item,
         renderItem: renderItem,
-        withDepthMarkers: withDepthMarkers
+        withDepthMarkers: withDepthMarkers,
+        top: start,
+        wrapperRef: virtualizer.measureElement
       }, id);
     })
   });

package/dist/sidebar/visibility-ordering-builder/sortable-tree/SortableTree.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortableTree.js","names":["useEffect","useMemo","useRef","classNames","useDndContext","flattenTree","getProjection","SortableTreeItem","TreeItem","jsx","_jsx","SortableTree","_ref","_ref2","_dndContext$active","_ref3","_dndContext$over","_dndContext$active$re","_dndContext$active$re2","_dndContext$active$re3","_dndContext$active$re4","items","indentationWidth","renderItem","isDraggable","withDepthMarkers","dndContext","activeId","active","id","overId","over","offsetLeft","rect","current","translated","left","initial","flattenedItems","flattenedTree","filter","_ref4","selected","context","contextRef","updateContextRef","remeasureContainers","measureDroppableContainers","map","_ref5","projected","className","children","item","depth","value"],"sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/SortableTree.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef } from 'react';\nimport classNames from 'classnames';\nimport { useDndContext } from '@dnd-kit/core';\nimport { flattenTree, getProjection } from './utilities';\nimport { SortableTreeItem } from './SortableTreeItem';\nimport { TreeItem, type TreeItemRenderFn } from './TreeItem';\nimport type { TreeItem as TreeItemType } from './types';\n\ninterface Props<T> {\n  items: TreeItemType<T>[];\n  indentationWidth?: number;\n  renderItem: TreeItemRenderFn<T>;\n  isDraggable?: boolean;\n  withDepthMarkers?: boolean;\n}\n\nexport default function SortableTree<T>({\n  items,\n  indentationWidth = 30,\n  renderItem,\n  isDraggable = true,\n  withDepthMarkers = true,\n}: Props<T>): JSX.Element {\n  const dndContext = useDndContext();\n  const activeId = (dndContext.active?.id as string) ?? null;\n  const overId = (dndContext.over?.id as string) ?? null;\n  const offsetLeft = dndContext.active\n    ? (dndContext.active.rect.current.translated?.left ?? 0) -\n      (dndContext.active.rect.current.initial?.left ?? 0)\n    : 0;\n\n  const flattenedItems = useMemo(() => {\n    const flattenedTree = flattenTree(items);\n\n    if (activeId != null) {\n      return flattenedTree.filter(\n        ({ id, selected }) => id === activeId || !selected\n      );\n    }\n\n    return flattenedTree;\n  }, [activeId, items]);\n\n  const context = useDndContext();\n  const contextRef = useRef(context);\n\n  useEffect(\n    function updateContextRef() {\n      contextRef.current = context;\n    },\n    [context]\n  );\n\n  // Without this, animations are funky when using the move/sort buttons\n  // dnd-kit only remeasures on drag/drop by default\n  // The context object changes while dragging (items don't)\n  // Using the context ref allows this to trigger properly on only items changes\n  useEffect(\n    function remeasureContainers() {\n      contextRef.current.measureDroppableContainers(items.map(({ id }) => id));\n    },\n    [items]\n  );\n\n  const projected =\n    isDraggable && activeId != null && overId != null\n      ? getProjection(\n          flattenedItems,\n          activeId,\n          overId,\n          offsetLeft,\n          indentationWidth\n        )\n      : null;\n\n  return (\n    <div\n      className={classNames(\n        'tree-container',\n        activeId != null && 'marching-ants'\n      )}\n    >\n      {flattenedItems.map(item => {\n        const { id, depth } = item;\n        return isDraggable ? (\n          <SortableTreeItem\n            key={id}\n            id={id}\n            value={id}\n            depth={id === activeId && projected ? projected.depth : depth}\n            item={item}\n            renderItem={renderItem}\n            withDepthMarkers={withDepthMarkers}\n          />\n        ) : (\n          <TreeItem\n            key={id}\n            value={id}\n            depth={depth}\n            item={item}\n            renderItem={renderItem}\n            withDepthMarkers={withDepthMarkers}\n          />\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SortableTree.js","names":["React","useCallback","useEffect","useImperativeHandle","useMemo","useRef","classNames","useDndContext","defaultRangeExtractor","useVirtualizer","getProjection","SortableTreeItem","TreeItem","jsx","_jsx","SortableTree","_ref","_ref2","_dndContext$active","_ref3","_dndContext$over","_dndContext$active$re","_dndContext$active$re2","_dndContext$active$re3","_dndContext$active$re4","items","indentationWidth","renderItem","isDraggable","withDepthMarkers","virtualizerRef","dndContext","activeId","active","id","overId","over","offsetLeft","rect","current","translated","left","initial","filteredItems","filter","_ref4","selected","activeIndex","findIndex","_ref5","rangeExtractor","range","extractedRange","length","push","getScrollElement","_containerRef$current","_containerRef$current2","containerRef","parentElement","estimateSize","virtualizer","count","overscan","gap","virtualizedItems","getVirtualItems","measureDroppableContainers","remeasureContainers","map","_ref6","index","projected","className","style","height","concat","getTotalSize","position","ref","children","_ref7","start","item","depth","value","top","measureElement","wrapperRef"],"sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/SortableTree.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\nimport classNames from 'classnames';\nimport { useDndContext } from '@dnd-kit/core';\nimport {\n  defaultRangeExtractor,\n  type Range,\n  useVirtualizer,\n  type Virtualizer,\n} from '@tanstack/react-virtual';\nimport { getProjection } from './utilities';\nimport { SortableTreeItem } from './SortableTreeItem';\nimport { TreeItem, type TreeItemRenderFn } from './TreeItem';\nimport type { FlattenedItem } from './types';\n\ninterface Props<T> {\n  items: readonly FlattenedItem<T>[];\n  indentationWidth?: number;\n  renderItem: TreeItemRenderFn<T>;\n  isDraggable?: boolean;\n  withDepthMarkers?: boolean;\n  virtualizerRef?: React.Ref<Virtualizer<HTMLElement, Element>>;\n}\n\nexport default function SortableTree<T>({\n  items,\n  indentationWidth = 30,\n  renderItem,\n  isDraggable = true,\n  withDepthMarkers = true,\n  virtualizerRef,\n}: Props<T>): JSX.Element {\n  const dndContext = useDndContext();\n  const activeId = (dndContext.active?.id as string) ?? null;\n  const overId = (dndContext.over?.id as string) ?? null;\n  const offsetLeft = dndContext.active\n    ? (dndContext.active.rect.current.translated?.left ?? 0) -\n      (dndContext.active.rect.current.initial?.left ?? 0)\n    : 0;\n\n  const filteredItems = useMemo(() => {\n    if (activeId != null) {\n      return items.filter(({ id, selected }) => id === activeId || !selected);\n    }\n\n    return items;\n  }, [activeId, items]);\n\n  const activeIndex = useMemo(\n    () => filteredItems.findIndex(({ id }) => id === activeId),\n    [activeId, filteredItems]\n  );\n\n  // Add the active index to the range so it is always rendered\n  const rangeExtractor = useCallback(\n    (range: Range) => {\n      const extractedRange = defaultRangeExtractor(range);\n      if (\n        activeIndex >= 0 &&\n        (activeIndex < extractedRange[0] ||\n          activeIndex > extractedRange[extractedRange.length - 1])\n      ) {\n        extractedRange.push(activeIndex);\n      }\n      return extractedRange;\n    },\n    [activeIndex]\n  );\n\n  const getScrollElement = useCallback(\n    () => containerRef.current?.parentElement ?? null,\n    []\n  );\n\n  const estimateSize = useCallback(() => 30, []);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const virtualizer = useVirtualizer({\n    count: filteredItems.length,\n    getScrollElement,\n    estimateSize,\n    rangeExtractor,\n    overscan: 10,\n    gap: 1, // We set a 1px bottom margin before we virtualized this list\n  });\n\n  // Expose the virtualizer via ref\n  useImperativeHandle(virtualizerRef, () => virtualizer, [virtualizer]);\n\n  const virtualizedItems = virtualizer.getVirtualItems();\n\n  const { measureDroppableContainers } = useDndContext();\n\n  // Without this, animations are funky when using the move/sort buttons\n  // dnd-kit only remeasures on drag/drop by default\n  useEffect(\n    function remeasureContainers() {\n      measureDroppableContainers(\n        virtualizedItems.map(({ index }) => filteredItems[index].id)\n      );\n    },\n    [filteredItems, measureDroppableContainers, virtualizedItems]\n  );\n\n  const projected =\n    isDraggable && activeId != null && overId != null\n      ? getProjection(\n          filteredItems,\n          activeId,\n          overId,\n          offsetLeft,\n          indentationWidth\n        )\n      : null;\n\n  return (\n    <div\n      className={classNames(\n        'tree-container',\n        activeId != null && 'marching-ants'\n      )}\n      style={{\n        height: `${virtualizer.getTotalSize()}px`,\n        position: 'relative',\n      }}\n      ref={containerRef}\n    >\n      {virtualizer.getVirtualItems().map(({ index, start }) => {\n        const item = filteredItems[index];\n        const { id, depth } = item;\n        return isDraggable ? (\n          <SortableTreeItem\n            key={id}\n            id={id}\n            value={id}\n            depth={id === activeId && projected ? projected.depth : depth}\n            item={item}\n            renderItem={renderItem}\n            withDepthMarkers={withDepthMarkers}\n            top={start}\n            // This allows the group items to expand when editing the name and shift the list correctly\n            measureElement={virtualizer.measureElement}\n          />\n        ) : (\n          <TreeItem\n            key={id}\n            value={id}\n            depth={depth}\n            item={item}\n            renderItem={renderItem}\n            withDepthMarkers={withDepthMarkers}\n            top={start}\n            wrapperRef={virtualizer.measureElement}\n          />\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/sidebar/visibility-ordering-builder/sortable-tree/SortableTreeDndContext.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import { type DragStartEvent } from '@dnd-kit/core';
-import type { FlattenedItem, TreeItem as TreeItemType } from './types';
+import type { FlattenedItem } from './types';
 import { type TreeItemRenderFn } from './TreeItem';
 type Props<T> = React.PropsWithChildren<{
-    items: TreeItemType<T>[];
+    items: readonly FlattenedItem<T>[];
     indentationWidth?: number;
     onDragStart?: (id: string, event: DragStartEvent) => void;
     onDragEnd?: (from: FlattenedItem<T>, to: FlattenedItem<T>) => void;

package/dist/sidebar/visibility-ordering-builder/sortable-tree/SortableTreeDndContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SortableTreeDndContext.d.ts","sourceRoot":"","sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/SortableTreeDndContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAEf,OAAO,EAOL,KAAK,cAAc,EASpB,MAAM,eAAe,CAAC;AAOvB,OAAO,KAAK,EACV,aAAa,EAEb,QAAQ,IAAI,YAAY,EACzB,MAAM,SAAS,CAAC;AAGjB,OAAO,EAAY,KAAK,gBAAgB,EAAE,MAAM,YAAY,CAAC;AA+E7D,KAAK,KAAK,CAAC,CAAC,IAAI,KAAK,CAAC,iBAAiB,CAAC;IACtC,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1D,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IACnE,UAAU,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC;CACjC,CAAC,CAAC;AAEH,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,CAAC,EAAE,EAChD,KAAK,EACL,gBAAqB,EACrB,WAAW,EACX,SAAS,EACT,QAAQ,EACR,UAAU,GACX,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CAmKxB"}
+{"version":3,"file":"SortableTreeDndContext.d.ts","sourceRoot":"","sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/SortableTreeDndContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAEf,OAAO,EAOL,KAAK,cAAc,EASpB,MAAM,eAAe,CAAC;AAOvB,OAAO,KAAK,EAAE,aAAa,EAAiB,MAAM,SAAS,CAAC;AAG5D,OAAO,EAAY,KAAK,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAuG7D,KAAK,KAAK,CAAC,CAAC,IAAI,KAAK,CAAC,iBAAiB,CAAC;IACtC,KAAK,EAAE,SAAS,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;IACnC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1D,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IACnE,UAAU,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC;CACjC,CAAC,CAAC;AAEH,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,CAAC,EAAE,EAChD,KAAK,EACL,gBAAqB,EACrB,WAAW,EACX,SAAS,EACT,QAAQ,EACR,UAAU,GACX,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CA4IxB"}

package/dist/sidebar/visibility-ordering-builder/sortable-tree/SortableTreeDndContext.js

@@ -8,7 +8,7 @@ import { createPortal } from 'react-dom';
 import { DndContext, closestCenter, KeyboardSensor, useSensor, useSensors, MeasuringStrategy, DragOverlay, defaultDropAnimation } from '@dnd-kit/core';
 import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { flattenTree, getChildCount, getProjection } from "./utilities.js";
+import { getProjection } from "./utilities.js";
 import { sortableTreeKeyboardCoordinates } from "./keyboardCoordinates.js";
 import PointerSensorWithInteraction from "./PointerSensorWithInteraction.js";
 import { TreeItem } from "./TreeItem.js";
@@ -87,6 +87,35 @@ function adjustToCursor(args) {
 // but avoids a singleton state or needing hooks to maintain this.
 // The logic came from the dnd-kit example.
 adjustToCursor.offsetY = null;
+
+// From https://github.com/clauderic/dnd-kit/pull/334
+var fixCursorSnapOffset = args => {
+  // Bail out if keyboard activated
+  if (!args.pointerCoordinates) {
+    return closestCenter(args);
+  }
+  var {
+    x,
+    y
+  } = args.pointerCoordinates;
+  var {
+    width,
+    height
+  } = args.collisionRect;
+  var updated = _objectSpread(_objectSpread({}, args), {}, {
+    // The collision rectangle is broken when using adjustToCursor. Reset
+    // the collision rectangle based on pointer location and overlay size.
+    collisionRect: {
+      width,
+      height,
+      bottom: y + height / 2,
+      left: x - width / 2,
+      right: x + width / 2,
+      top: y - height / 2
+    }
+  });
+  return closestCenter(updated);
+};
 export default function SortableTreeDndContext(_ref3) {
   var {
     items,
@@ -97,30 +126,15 @@ export default function SortableTreeDndContext(_ref3) {
     renderItem
   } = _ref3;
   var [activeId, setActiveId] = useState(null);
-  var [overId, setOverId] = useState(null);
   var [offsetLeft, setOffsetLeft] = useState(0);
-  var flattenedItems = useMemo(() => {
-    var flattenedTree = flattenTree(items);
-    if (activeId != null) {
-      return flattenedTree.filter(_ref4 => {
-        var {
-          id,
-          selected
-        } = _ref4;
-        return id === activeId || !selected;
-      });
-    }
-    return flattenedTree;
-  }, [activeId, items]);
-  var activeItem = activeId != null ? flattenedItems.find(_ref5 => {
+  var activeItem = activeId != null ? items.find(_ref4 => {
     var {
       id
-    } = _ref5;
+    } = _ref4;
     return id === activeId;
   }) : null;
-  var projected = activeId != null && overId != null ? getProjection(flattenedItems, activeId, overId, offsetLeft, indentationWidth) : null;
   var sensorContext = useRef({
-    items: flattenedItems,
+    items,
     offset: offsetLeft
   });
   var keyboardOptions = useMemo(() => ({
@@ -134,18 +148,18 @@ export default function SortableTreeDndContext(_ref3) {
     }
   }), [indentationWidth]);
   var sensors = useSensors(useSensor(PointerSensorWithInteraction, CONSTRAINT), useSensor(KeyboardSensor, keyboardOptions));
-  var sortedIds = useMemo(() => flattenedItems.map(_ref6 => {
+  var sortedIds = useMemo(() => items.map(_ref5 => {
     var {
       id
-    } = _ref6;
+    } = _ref5;
     return id;
-  }), [flattenedItems]);
+  }), [items]);
   useEffect(() => {
     sensorContext.current = {
-      items: flattenedItems,
+      items,
       offset: offsetLeft
     };
-  }, [flattenedItems, offsetLeft]);
+  }, [items, offsetLeft]);
   var handleDragStart = useCallback(event => {
     var {
       active: {
@@ -153,50 +167,43 @@ export default function SortableTreeDndContext(_ref3) {
       }
     } = event;
     setActiveId(newActiveId);
-    setOverId(newActiveId);
     onDragStart === null || onDragStart === void 0 || onDragStart(newActiveId, event);
     document.body.style.setProperty('cursor', 'grabbing');
   }, [onDragStart]);
-  var handleDragMove = useCallback(_ref7 => {
+  var handleDragMove = useCallback(_ref6 => {
     var {
       delta
-    } = _ref7;
+    } = _ref6;
     setOffsetLeft(delta.x);
   }, []);
-  var handleDragOver = useCallback(_ref8 => {
-    var _ref9;
-    var {
-      over
-    } = _ref8;
-    setOverId((_ref9 = over === null || over === void 0 ? void 0 : over.id) !== null && _ref9 !== void 0 ? _ref9 : null);
-  }, []);
   var resetState = useCallback(() => {
-    setOverId(null);
     setActiveId(null);
     setOffsetLeft(0);
     document.body.style.setProperty('cursor', '');
   }, []);
-  var handleDragEnd = useCallback(_ref0 => {
+  var handleDragEnd = useCallback(_ref7 => {
+    var _active$rect$current$, _active$rect$current$2, _active$rect$current$3, _active$rect$current$4;
     var {
       active,
       over
-    } = _ref0;
+    } = _ref7;
+    var projected = active.id != null && (over === null || over === void 0 ? void 0 : over.id) != null ? getProjection(items, active.id, over.id, ((_active$rect$current$ = (_active$rect$current$2 = active.rect.current.translated) === null || _active$rect$current$2 === void 0 ? void 0 : _active$rect$current$2.left) !== null && _active$rect$current$ !== void 0 ? _active$rect$current$ : 0) - ((_active$rect$current$3 = (_active$rect$current$4 = active.rect.current.initial) === null || _active$rect$current$4 === void 0 ? void 0 : _active$rect$current$4.left) !== null && _active$rect$current$3 !== void 0 ? _active$rect$current$3 : 0), indentationWidth) : null;
     if (projected && over) {
       var {
         depth,
         parentId
       } = projected;
-      var clonedItems = JSON.parse(JSON.stringify(flattenTree(items)));
-      var overIndex = clonedItems.findIndex(_ref1 => {
+      var clonedItems = JSON.parse(JSON.stringify(items));
+      var overIndex = clonedItems.findIndex(_ref8 => {
         var {
           id
-        } = _ref1;
+        } = _ref8;
         return id === over.id;
       });
-      var activeIndex = clonedItems.findIndex(_ref10 => {
+      var activeIndex = clonedItems.findIndex(_ref9 => {
         var {
           id
-        } = _ref10;
+        } = _ref9;
         return id === active.id;
       });
       var activeTreeItem = clonedItems[activeIndex];
@@ -209,17 +216,16 @@ export default function SortableTreeDndContext(_ref3) {
       }));
     }
     resetState();
-  }, [items, onDragEnd, projected, resetState]);
+  }, [items, indentationWidth, onDragEnd, resetState]);
   var handleDragCancel = useCallback(() => {
     resetState();
   }, [resetState]);
   return /*#__PURE__*/_jsx(DndContext, {
     sensors: sensors,
-    collisionDetection: closestCenter,
+    collisionDetection: fixCursorSnapOffset,
     measuring: MEASURING,
     onDragStart: handleDragStart,
     onDragMove: handleDragMove,
-    onDragOver: handleDragOver,
     onDragEnd: handleDragEnd,
     onDragCancel: handleDragCancel,
     children: /*#__PURE__*/_jsxs(SortableContext, {
@@ -233,8 +239,7 @@ export default function SortableTreeDndContext(_ref3) {
         children: activeId != null && activeItem ? /*#__PURE__*/_jsx(TreeItem, {
           depth: activeItem.depth,
           clone: true,
-          childCount: getChildCount(items, activeId) + 1,
-          value: activeId.toString(),
+          value: activeId,
           renderItem: renderItem,
           item: activeItem
         }) : null