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

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

@@ -1 +1 @@
-{"version":3,"file":"SortableTreeDndContext.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","createPortal","DndContext","closestCenter","KeyboardSensor","useSensor","useSensors","MeasuringStrategy","DragOverlay","defaultDropAnimation","SortableContext","verticalListSortingStrategy","CSS","flattenTree","getChildCount","getProjection","sortableTreeKeyboardCoordinates","PointerSensorWithInteraction","TreeItem","jsx","_jsx","jsxs","_jsxs","MEASURING","droppable","strategy","Always","CONSTRAINT","activationConstraint","distance","DRAG_OVERLAY_STYLE","pointerEvents","dropAnimationConfig","keyframes","_ref","transform","opacity","Transform","toString","initial","final","easing","sideEffects","_ref2","active","node","animate","duration","adjustToCursor","args","_adjustToCursor$offse","offsetY","activeNodeRect","activatorEvent","PointerEvent","Math","floor","clientY","top","height","_objectSpread","y","SortableTreeDndContext","_ref3","items","indentationWidth","onDragStart","onDragEnd","children","renderItem","activeId","setActiveId","overId","setOverId","offsetLeft","setOffsetLeft","flattenedItems","flattenedTree","filter","_ref4","id","selected","activeItem","find","_ref5","projected","sensorContext","offset","keyboardOptions","coordinateGetter","keyboardCodes","start","cancel","end","sensors","sortedIds","map","_ref6","current","handleDragStart","event","newActiveId","document","body","style","setProperty","handleDragMove","_ref7","delta","x","handleDragOver","_ref8","_ref9","over","resetState","handleDragEnd","_ref0","depth","parentId","clonedItems","JSON","parse","stringify","overIndex","findIndex","_ref1","activeIndex","_ref10","activeTreeItem","handleDragCancel","collisionDetection","measuring","onDragMove","onDragOver","onDragCancel","dropAnimation","modifiers","className","clone","childCount","value","item"],"sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/SortableTreeDndContext.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport {\n  DndContext,\n  closestCenter,\n  KeyboardSensor,\n  type KeyboardSensorOptions,\n  useSensor,\n  useSensors,\n  type DragStartEvent,\n  type DragMoveEvent,\n  type DragEndEvent,\n  type DragOverEvent,\n  MeasuringStrategy,\n  DragOverlay,\n  type DropAnimation,\n  defaultDropAnimation,\n  type Modifier,\n} from '@dnd-kit/core';\nimport {\n  SortableContext,\n  verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { flattenTree, getChildCount, getProjection } from './utilities';\nimport type {\n  FlattenedItem,\n  SensorContext,\n  TreeItem as TreeItemType,\n} from './types';\nimport { sortableTreeKeyboardCoordinates } from './keyboardCoordinates';\nimport PointerSensorWithInteraction from './PointerSensorWithInteraction';\nimport { TreeItem, type TreeItemRenderFn } from './TreeItem';\n\nconst MEASURING = {\n  droppable: {\n    strategy: MeasuringStrategy.Always,\n  },\n};\n\nconst CONSTRAINT = {\n  activationConstraint: {\n    distance: 5,\n  },\n};\n\n// Disabling pointer events allows us to use scroll wheel while dragging\nconst DRAG_OVERLAY_STYLE = { pointerEvents: 'none' } as const;\n\nconst dropAnimationConfig: DropAnimation = {\n  keyframes({ transform }) {\n    return [\n      { opacity: 1, transform: CSS.Transform.toString(transform.initial) },\n      { opacity: 0, transform: CSS.Transform.toString(transform.final) },\n    ];\n  },\n  easing: 'ease-out',\n  sideEffects({ active }) {\n    active.node.animate([{ opacity: 0 }, { opacity: 1 }], {\n      duration: defaultDropAnimation.duration,\n      easing: defaultDropAnimation.easing,\n    });\n  },\n};\n\n/**\n * This adjusts the transform to move to the cursor if it gets shifted due to multi-select.\n * With multi-select, the selected items (except dragged) are removed on drag.\n * This can cause the overlay item to disconnect from the cursor in some cases.\n * E.g. select first 3 items, start dragging from 3rd item.\n * Without this modifier, the drag overlay will be shifted 60px up from the cursor after the items are removed.\n *\n * This assumes all items are the same height as the dragged item\n * @param args Modifier args from dnd-kit\n * @returns Transform so that the dragged item stays on the cursor\n */\nfunction adjustToCursor(args: Parameters<Modifier>[0]): {\n  y: number;\n  x: number;\n  scaleX: number;\n  scaleY: number;\n} {\n  if (\n    adjustToCursor.offsetY == null &&\n    args.activeNodeRect &&\n    args.activatorEvent instanceof PointerEvent\n  ) {\n    adjustToCursor.offsetY =\n      Math.floor(\n        (args.activatorEvent.clientY - args.activeNodeRect.top) /\n          args.activeNodeRect.height\n      ) * args.activeNodeRect.height;\n  }\n\n  if (!args.activeNodeRect) {\n    adjustToCursor.offsetY = null;\n  }\n\n  return {\n    ...args.transform,\n    y: args.transform.y + (adjustToCursor.offsetY ?? 0),\n  };\n}\n\n// Used to track the offset for adjustToCursor\n// Once drag starts, set this. Once it ends, null this\n// Kind of hacky to store it as a property on the function,\n// but avoids a singleton state or needing hooks to maintain this.\n// The logic came from the dnd-kit example.\nadjustToCursor.offsetY = null as number | null;\n\ntype Props<T> = React.PropsWithChildren<{\n  items: TreeItemType<T>[];\n  indentationWidth?: number;\n  onDragStart?: (id: string, event: DragStartEvent) => void;\n  onDragEnd?: (from: FlattenedItem<T>, to: FlattenedItem<T>) => void;\n  renderItem: TreeItemRenderFn<T>;\n}>;\n\nexport default function SortableTreeDndContext<T>({\n  items,\n  indentationWidth = 30,\n  onDragStart,\n  onDragEnd,\n  children,\n  renderItem,\n}: Props<T>): JSX.Element {\n  const [activeId, setActiveId] = useState<string | null>(null);\n  const [overId, setOverId] = useState<string | null>(null);\n  const [offsetLeft, setOffsetLeft] = useState(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 activeItem =\n    activeId != null ? flattenedItems.find(({ id }) => id === activeId) : null;\n\n  const projected =\n    activeId != null && overId != null\n      ? getProjection(\n          flattenedItems,\n          activeId,\n          overId,\n          offsetLeft,\n          indentationWidth\n        )\n      : null;\n  const sensorContext: SensorContext = useRef({\n    items: flattenedItems,\n    offset: offsetLeft,\n  });\n  const keyboardOptions = useMemo(\n    () =>\n      ({\n        coordinateGetter: sortableTreeKeyboardCoordinates(\n          sensorContext,\n          indentationWidth\n        ),\n        keyboardCodes: {\n          // Default is space and enter for start/end,\n          // but enter is used to select items from the search list\n          start: ['Space'],\n          cancel: ['Escape'],\n          end: ['Space'],\n        },\n      }) satisfies KeyboardSensorOptions,\n    [indentationWidth]\n  );\n\n  const sensors = useSensors(\n    useSensor(PointerSensorWithInteraction, CONSTRAINT),\n    useSensor(KeyboardSensor, keyboardOptions)\n  );\n\n  const sortedIds = useMemo(\n    () => flattenedItems.map(({ id }) => id),\n    [flattenedItems]\n  );\n\n  useEffect(() => {\n    sensorContext.current = {\n      items: flattenedItems,\n      offset: offsetLeft,\n    };\n  }, [flattenedItems, offsetLeft]);\n\n  const handleDragStart = useCallback(\n    (event: DragStartEvent) => {\n      const {\n        active: { id: newActiveId },\n      } = event;\n      setActiveId(newActiveId as string);\n      setOverId(newActiveId as string);\n      onDragStart?.(newActiveId as string, event);\n\n      document.body.style.setProperty('cursor', 'grabbing');\n    },\n    [onDragStart]\n  );\n\n  const handleDragMove = useCallback(({ delta }: DragMoveEvent) => {\n    setOffsetLeft(delta.x);\n  }, []);\n\n  const handleDragOver = useCallback(({ over }: DragOverEvent) => {\n    setOverId((over?.id as string) ?? null);\n  }, []);\n\n  const resetState = useCallback(() => {\n    setOverId(null);\n    setActiveId(null);\n    setOffsetLeft(0);\n\n    document.body.style.setProperty('cursor', '');\n  }, []);\n\n  const handleDragEnd = useCallback(\n    ({ active, over }: DragEndEvent) => {\n      if (projected && over) {\n        const { depth, parentId } = projected;\n\n        const clonedItems: FlattenedItem<T>[] = JSON.parse(\n          JSON.stringify(flattenTree(items))\n        );\n        const overIndex = clonedItems.findIndex(({ id }) => id === over.id);\n        const activeIndex = clonedItems.findIndex(({ id }) => id === active.id);\n        const activeTreeItem = clonedItems[activeIndex];\n\n        clonedItems[activeIndex] = { ...activeTreeItem, depth, parentId };\n\n        onDragEnd?.(activeTreeItem, {\n          ...clonedItems[overIndex],\n          parentId: projected.parentId,\n        });\n      }\n      resetState();\n    },\n    [items, onDragEnd, projected, resetState]\n  );\n\n  const handleDragCancel = useCallback(() => {\n    resetState();\n  }, [resetState]);\n\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={closestCenter}\n      measuring={MEASURING}\n      onDragStart={handleDragStart}\n      onDragMove={handleDragMove}\n      onDragOver={handleDragOver}\n      onDragEnd={handleDragEnd}\n      onDragCancel={handleDragCancel}\n    >\n      <SortableContext items={sortedIds} strategy={verticalListSortingStrategy}>\n        {children}\n        {createPortal(\n          <DragOverlay\n            dropAnimation={dropAnimationConfig}\n            modifiers={[adjustToCursor]}\n            className=\"visibility-ordering-list\"\n            style={DRAG_OVERLAY_STYLE}\n          >\n            {activeId != null && activeItem ? (\n              <TreeItem\n                depth={activeItem.depth}\n                clone\n                childCount={getChildCount(items, activeId) + 1}\n                value={activeId.toString()}\n                renderItem={renderItem}\n                item={activeItem}\n              />\n            ) : null}\n          </DragOverlay>,\n          document.body\n        )}\n      </SortableContext>\n    </DndContext>\n  );\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SortableTreeDndContext.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","createPortal","DndContext","closestCenter","KeyboardSensor","useSensor","useSensors","MeasuringStrategy","DragOverlay","defaultDropAnimation","SortableContext","verticalListSortingStrategy","CSS","getProjection","sortableTreeKeyboardCoordinates","PointerSensorWithInteraction","TreeItem","jsx","_jsx","jsxs","_jsxs","MEASURING","droppable","strategy","Always","CONSTRAINT","activationConstraint","distance","DRAG_OVERLAY_STYLE","pointerEvents","dropAnimationConfig","keyframes","_ref","transform","opacity","Transform","toString","initial","final","easing","sideEffects","_ref2","active","node","animate","duration","adjustToCursor","args","_adjustToCursor$offse","offsetY","activeNodeRect","activatorEvent","PointerEvent","Math","floor","clientY","top","height","_objectSpread","y","fixCursorSnapOffset","pointerCoordinates","x","width","collisionRect","updated","bottom","left","right","SortableTreeDndContext","_ref3","items","indentationWidth","onDragStart","onDragEnd","children","renderItem","activeId","setActiveId","offsetLeft","setOffsetLeft","activeItem","find","_ref4","id","sensorContext","offset","keyboardOptions","coordinateGetter","keyboardCodes","start","cancel","end","sensors","sortedIds","map","_ref5","current","handleDragStart","event","newActiveId","document","body","style","setProperty","handleDragMove","_ref6","delta","resetState","handleDragEnd","_ref7","_active$rect$current$","_active$rect$current$2","_active$rect$current$3","_active$rect$current$4","over","projected","rect","translated","depth","parentId","clonedItems","JSON","parse","stringify","overIndex","findIndex","_ref8","activeIndex","_ref9","activeTreeItem","handleDragCancel","collisionDetection","measuring","onDragMove","onDragCancel","dropAnimation","modifiers","className","clone","value","item"],"sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/SortableTreeDndContext.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport {\n  DndContext,\n  closestCenter,\n  KeyboardSensor,\n  type KeyboardSensorOptions,\n  useSensor,\n  useSensors,\n  type DragStartEvent,\n  type DragMoveEvent,\n  type DragEndEvent,\n  MeasuringStrategy,\n  DragOverlay,\n  type DropAnimation,\n  defaultDropAnimation,\n  type Modifier,\n  type CollisionDetection,\n} from '@dnd-kit/core';\nimport {\n  SortableContext,\n  verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { getProjection } from './utilities';\nimport type { FlattenedItem, SensorContext } from './types';\nimport { sortableTreeKeyboardCoordinates } from './keyboardCoordinates';\nimport PointerSensorWithInteraction from './PointerSensorWithInteraction';\nimport { TreeItem, type TreeItemRenderFn } from './TreeItem';\n\nconst MEASURING = {\n  droppable: {\n    strategy: MeasuringStrategy.Always,\n  },\n};\n\nconst CONSTRAINT = {\n  activationConstraint: {\n    distance: 5,\n  },\n};\n\n// Disabling pointer events allows us to use scroll wheel while dragging\nconst DRAG_OVERLAY_STYLE = { pointerEvents: 'none' } as const;\n\nconst dropAnimationConfig: DropAnimation = {\n  keyframes({ transform }) {\n    return [\n      { opacity: 1, transform: CSS.Transform.toString(transform.initial) },\n      { opacity: 0, transform: CSS.Transform.toString(transform.final) },\n    ];\n  },\n  easing: 'ease-out',\n  sideEffects({ active }) {\n    active.node.animate([{ opacity: 0 }, { opacity: 1 }], {\n      duration: defaultDropAnimation.duration,\n      easing: defaultDropAnimation.easing,\n    });\n  },\n};\n\n/**\n * This adjusts the transform to move to the cursor if it gets shifted due to multi-select.\n * With multi-select, the selected items (except dragged) are removed on drag.\n * This can cause the overlay item to disconnect from the cursor in some cases.\n * E.g. select first 3 items, start dragging from 3rd item.\n * Without this modifier, the drag overlay will be shifted 60px up from the cursor after the items are removed.\n *\n * This assumes all items are the same height as the dragged item\n * @param args Modifier args from dnd-kit\n * @returns Transform so that the dragged item stays on the cursor\n */\nfunction adjustToCursor(args: Parameters<Modifier>[0]): {\n  y: number;\n  x: number;\n  scaleX: number;\n  scaleY: number;\n} {\n  if (\n    adjustToCursor.offsetY == null &&\n    args.activeNodeRect &&\n    args.activatorEvent instanceof PointerEvent\n  ) {\n    adjustToCursor.offsetY =\n      Math.floor(\n        (args.activatorEvent.clientY - args.activeNodeRect.top) /\n          args.activeNodeRect.height\n      ) * args.activeNodeRect.height;\n  }\n\n  if (!args.activeNodeRect) {\n    adjustToCursor.offsetY = null;\n  }\n\n  return {\n    ...args.transform,\n    y: args.transform.y + (adjustToCursor.offsetY ?? 0),\n  };\n}\n\n// Used to track the offset for adjustToCursor\n// Once drag starts, set this. Once it ends, null this\n// Kind of hacky to store it as a property on the function,\n// but avoids a singleton state or needing hooks to maintain this.\n// The logic came from the dnd-kit example.\nadjustToCursor.offsetY = null as number | null;\n\n// From https://github.com/clauderic/dnd-kit/pull/334\nconst fixCursorSnapOffset: CollisionDetection = args => {\n  // Bail out if keyboard activated\n  if (!args.pointerCoordinates) {\n    return closestCenter(args);\n  }\n  const { x, y } = args.pointerCoordinates;\n  const { width, height } = args.collisionRect;\n  const updated = {\n    ...args,\n    // The collision rectangle is broken when using adjustToCursor. Reset\n    // the collision rectangle based on pointer location and overlay size.\n    collisionRect: {\n      width,\n      height,\n      bottom: y + height / 2,\n      left: x - width / 2,\n      right: x + width / 2,\n      top: y - height / 2,\n    },\n  };\n  return closestCenter(updated);\n};\n\ntype Props<T> = React.PropsWithChildren<{\n  items: readonly FlattenedItem<T>[];\n  indentationWidth?: number;\n  onDragStart?: (id: string, event: DragStartEvent) => void;\n  onDragEnd?: (from: FlattenedItem<T>, to: FlattenedItem<T>) => void;\n  renderItem: TreeItemRenderFn<T>;\n}>;\n\nexport default function SortableTreeDndContext<T>({\n  items,\n  indentationWidth = 30,\n  onDragStart,\n  onDragEnd,\n  children,\n  renderItem,\n}: Props<T>): JSX.Element {\n  const [activeId, setActiveId] = useState<string | null>(null);\n  const [offsetLeft, setOffsetLeft] = useState(0);\n\n  const activeItem =\n    activeId != null ? items.find(({ id }) => id === activeId) : null;\n\n  const sensorContext: SensorContext = useRef({\n    items,\n    offset: offsetLeft,\n  });\n  const keyboardOptions = useMemo(\n    () =>\n      ({\n        coordinateGetter: sortableTreeKeyboardCoordinates(\n          sensorContext,\n          indentationWidth\n        ),\n        keyboardCodes: {\n          // Default is space and enter for start/end,\n          // but enter is used to select items from the search list\n          start: ['Space'],\n          cancel: ['Escape'],\n          end: ['Space'],\n        },\n      }) satisfies KeyboardSensorOptions,\n    [indentationWidth]\n  );\n\n  const sensors = useSensors(\n    useSensor(PointerSensorWithInteraction, CONSTRAINT),\n    useSensor(KeyboardSensor, keyboardOptions)\n  );\n\n  const sortedIds = useMemo(() => items.map(({ id }) => id), [items]);\n\n  useEffect(() => {\n    sensorContext.current = {\n      items,\n      offset: offsetLeft,\n    };\n  }, [items, offsetLeft]);\n\n  const handleDragStart = useCallback(\n    (event: DragStartEvent) => {\n      const {\n        active: { id: newActiveId },\n      } = event;\n      setActiveId(newActiveId as string);\n      onDragStart?.(newActiveId as string, event);\n\n      document.body.style.setProperty('cursor', 'grabbing');\n    },\n    [onDragStart]\n  );\n\n  const handleDragMove = useCallback(({ delta }: DragMoveEvent) => {\n    setOffsetLeft(delta.x);\n  }, []);\n\n  const resetState = useCallback(() => {\n    setActiveId(null);\n    setOffsetLeft(0);\n\n    document.body.style.setProperty('cursor', '');\n  }, []);\n\n  const handleDragEnd = useCallback(\n    ({ active, over }: DragEndEvent) => {\n      const projected =\n        active.id != null && over?.id != null\n          ? getProjection(\n              items,\n              active.id as string,\n              over.id as string,\n              (active.rect.current.translated?.left ?? 0) -\n                (active.rect.current.initial?.left ?? 0),\n              indentationWidth\n            )\n          : null;\n      if (projected && over) {\n        const { depth, parentId } = projected;\n\n        const clonedItems: FlattenedItem<T>[] = JSON.parse(\n          JSON.stringify(items)\n        );\n        const overIndex = clonedItems.findIndex(({ id }) => id === over.id);\n        const activeIndex = clonedItems.findIndex(({ id }) => id === active.id);\n        const activeTreeItem = clonedItems[activeIndex];\n\n        clonedItems[activeIndex] = { ...activeTreeItem, depth, parentId };\n\n        onDragEnd?.(activeTreeItem, {\n          ...clonedItems[overIndex],\n          parentId: projected.parentId,\n        });\n      }\n      resetState();\n    },\n    [items, indentationWidth, onDragEnd, resetState]\n  );\n\n  const handleDragCancel = useCallback(() => {\n    resetState();\n  }, [resetState]);\n\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={fixCursorSnapOffset}\n      measuring={MEASURING}\n      onDragStart={handleDragStart}\n      onDragMove={handleDragMove}\n      onDragEnd={handleDragEnd}\n      onDragCancel={handleDragCancel}\n    >\n      <SortableContext items={sortedIds} strategy={verticalListSortingStrategy}>\n        {children}\n        {createPortal(\n          <DragOverlay\n            dropAnimation={dropAnimationConfig}\n            modifiers={[adjustToCursor]}\n            className=\"visibility-ordering-list\"\n            style={DRAG_OVERLAY_STYLE}\n          >\n            {activeId != null && activeItem ? (\n              <TreeItem\n                depth={activeItem.depth}\n                clone\n                value={activeId}\n                renderItem={renderItem}\n                item={activeItem}\n              />\n            ) : null}\n          </DragOverlay>,\n          document.body\n        )}\n      </SortableContext>\n    </DndContext>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,7 +1,14 @@
 import { type TreeItemProps } from './TreeItem';
 interface SortableTreeItemProps<T> extends Omit<TreeItemProps<T>, 'style'> {
     id: string;
+    top?: number;
+    /**
+     * Used by @tanstack/virtual to measure the size of the item if it changes.
+     * Group items may change size when the name is being edited.
+     * @param element The HTMLElement to measure
+     */
+    measureElement?: (element: HTMLElement | null) => void;
 }
-export declare function SortableTreeItem<T>({ id, depth, ...props }: SortableTreeItemProps<T>): JSX.Element;
+export declare function SortableTreeItem<T>({ id, depth, top, measureElement, ...props }: SortableTreeItemProps<T>): JSX.Element;
 export {};
 //# sourceMappingURL=SortableTreeItem.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SortableTreeItem.d.ts","sourceRoot":"","sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/SortableTreeItem.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAE1D,UAAU,qBAAqB,CAAC,CAAC,CAAE,SAAQ,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC;IACxE,EAAE,EAAE,MAAM,CAAC;CACZ;AAOD,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,EAClC,EAAE,EACF,KAAK,EACL,GAAG,KAAK,EACT,EAAE,qBAAqB,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CA+CxC"}
+{"version":3,"file":"SortableTreeItem.d.ts","sourceRoot":"","sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/SortableTreeItem.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAE1D,UAAU,qBAAqB,CAAC,CAAC,CAAE,SAAQ,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC;IACxE,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;CACxD;AAOD,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,EAClC,EAAE,EACF,KAAK,EACL,GAAG,EACH,cAAc,EACd,GAAG,KAAK,EACT,EAAE,qBAAqB,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CAwDxC"}

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

@@ -1,4 +1,4 @@
-var _excluded = ["id", "depth"];
+var _excluded = ["id", "depth", "top", "measureElement"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -7,7 +7,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 /* eslint-disable import/prefer-default-export */
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { TreeItem } from "./TreeItem.js";
@@ -22,7 +22,9 @@ var animateLayoutChanges = _ref => {
 export function SortableTreeItem(_ref2) {
   var {
       id,
-      depth
+      depth,
+      top,
+      measureElement
     } = _ref2,
     props = _objectWithoutProperties(_ref2, _excluded);
   var {
@@ -46,14 +48,19 @@ export function SortableTreeItem(_ref2) {
   var handleProps = useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, attributes), listeners), {}, {
     style
   }), [attributes, listeners, style]);
+  var wrapperRef = useCallback(node => {
+    setDroppableNodeRef(node);
+    measureElement === null || measureElement === void 0 || measureElement(node);
+  }, [setDroppableNodeRef, measureElement]);
   return /*#__PURE__*/_jsx(TreeItem, _objectSpread({
     dragRef: setDraggableNodeRef,
-    wrapperRef: setDroppableNodeRef,
+    wrapperRef: wrapperRef,
     depth: depth,
     ghost: isDragging,
     disableInteraction: isSorting,
     handleProps: handleProps,
-    style: style
+    style: style,
+    top: top
     // eslint-disable-next-line react/jsx-props-no-spreading
   }, props));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"SortableTreeItem.js","names":["React","useMemo","useSortable","CSS","TreeItem","jsx","_jsx","animateLayoutChanges","_ref","isSorting","wasDragging","SortableTreeItem","_ref2","id","depth","props","_objectWithoutProperties","_excluded","attributes","isDragging","listeners","setDraggableNodeRef","setDroppableNodeRef","transform","transition","transformString","Translate","toString","style","handleProps","_objectSpread","dragRef","wrapperRef","ghost","disableInteraction"],"sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/SortableTreeItem.tsx"],"sourcesContent":["/* eslint-disable import/prefer-default-export */\nimport React, { type CSSProperties, useMemo } from 'react';\nimport { type AnimateLayoutChanges, useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { TreeItem, type TreeItemProps } from './TreeItem';\n\ninterface SortableTreeItemProps<T> extends Omit<TreeItemProps<T>, 'style'> {\n  id: string;\n}\n\nconst animateLayoutChanges: AnimateLayoutChanges = ({\n  isSorting,\n  wasDragging,\n}) => !(isSorting || wasDragging);\n\nexport function SortableTreeItem<T>({\n  id,\n  depth,\n  ...props\n}: SortableTreeItemProps<T>): JSX.Element {\n  const {\n    attributes,\n    isDragging,\n    isSorting,\n    listeners,\n    setDraggableNodeRef,\n    setDroppableNodeRef,\n    transform,\n    transition,\n  } = useSortable({\n    id,\n    animateLayoutChanges,\n  });\n\n  const transformString = CSS.Translate.toString(transform);\n\n  const style: CSSProperties = useMemo(\n    () => ({\n      transform: transformString,\n      transition,\n    }),\n    [transformString, transition]\n  );\n\n  const handleProps = useMemo(\n    () => ({\n      ...attributes,\n      ...listeners,\n      style,\n    }),\n    [attributes, listeners, style]\n  );\n\n  return (\n    <TreeItem\n      dragRef={setDraggableNodeRef}\n      wrapperRef={setDroppableNodeRef}\n      depth={depth}\n      ghost={isDragging}\n      disableInteraction={isSorting}\n      handleProps={handleProps}\n      style={style}\n      // eslint-disable-next-line react/jsx-props-no-spreading\n      {...props}\n    />\n  );\n}\n"],"mappings":";;;;;;;;AAAA;AACA,OAAOA,KAAK,IAAwBC,OAAO,QAAQ,OAAO;AAC1D,SAAoCC,WAAW,QAAQ,mBAAmB;AAC1E,SAASC,GAAG,QAAQ,oBAAoB;AAAC,SAChCC,QAAQ;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAMjB,IAAMC,oBAA0C,GAAGC,IAAA;EAAA,IAAC;IAClDC,SAAS;IACTC;EACF,CAAC,GAAAF,IAAA;EAAA,OAAK,EAAEC,SAAS,IAAIC,WAAW,CAAC;AAAA;AAEjC,OAAO,SAASC,gBAAgBA,CAAAC,KAAA,EAIU;EAAA,IAJN;MAClCC,EAAE;MACFC;IAEwB,CAAC,GAAAF,KAAA;IADtBG,KAAK,GAAAC,wBAAA,CAAAJ,KAAA,EAAAK,SAAA;EAER,IAAM;IACJC,UAAU;IACVC,UAAU;IACVV,SAAS;IACTW,SAAS;IACTC,mBAAmB;IACnBC,mBAAmB;IACnBC,SAAS;IACTC;EACF,CAAC,GAAGtB,WAAW,CAAC;IACdW,EAAE;IACFN;EACF,CAAC,CAAC;EAEF,IAAMkB,eAAe,GAAGtB,GAAG,CAACuB,SAAS,CAACC,QAAQ,CAACJ,SAAS,CAAC;EAEzD,IAAMK,KAAoB,GAAG3B,OAAO,CAClC,OAAO;IACLsB,SAAS,EAAEE,eAAe;IAC1BD;EACF,CAAC,CAAC,EACF,CAACC,eAAe,EAAED,UAAU,CAC9B,CAAC;EAED,IAAMK,WAAW,GAAG5B,OAAO,CACzB,MAAA6B,aAAA,CAAAA,aAAA,CAAAA,aAAA,KACKZ,UAAU,GACVE,SAAS;IACZQ;EAAK,EACL,EACF,CAACV,UAAU,EAAEE,SAAS,EAAEQ,KAAK,CAC/B,CAAC;EAED,oBACEtB,IAAA,CAACF,QAAQ,EAAA0B,aAAA;IACPC,OAAO,EAAEV,mBAAoB;IAC7BW,UAAU,EAAEV,mBAAoB;IAChCR,KAAK,EAAEA,KAAM;IACbmB,KAAK,EAAEd,UAAW;IAClBe,kBAAkB,EAAEzB,SAAU;IAC9BoB,WAAW,EAAEA,WAAY;IACzBD,KAAK,EAAEA;IACP;EAAA,GACIb,KAAK,CACV,CAAC;AAEN","ignoreList":[]}
+{"version":3,"file":"SortableTreeItem.js","names":["React","useCallback","useMemo","useSortable","CSS","TreeItem","jsx","_jsx","animateLayoutChanges","_ref","isSorting","wasDragging","SortableTreeItem","_ref2","id","depth","top","measureElement","props","_objectWithoutProperties","_excluded","attributes","isDragging","listeners","setDraggableNodeRef","setDroppableNodeRef","transform","transition","transformString","Translate","toString","style","handleProps","_objectSpread","wrapperRef","node","dragRef","ghost","disableInteraction"],"sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/SortableTreeItem.tsx"],"sourcesContent":["/* eslint-disable import/prefer-default-export */\nimport React, { type CSSProperties, useCallback, useMemo } from 'react';\nimport { type AnimateLayoutChanges, useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { TreeItem, type TreeItemProps } from './TreeItem';\n\ninterface SortableTreeItemProps<T> extends Omit<TreeItemProps<T>, 'style'> {\n  id: string;\n  top?: number;\n  /**\n   * Used by @tanstack/virtual to measure the size of the item if it changes.\n   * Group items may change size when the name is being edited.\n   * @param element The HTMLElement to measure\n   */\n  measureElement?: (element: HTMLElement | null) => void;\n}\n\nconst animateLayoutChanges: AnimateLayoutChanges = ({\n  isSorting,\n  wasDragging,\n}) => !(isSorting || wasDragging);\n\nexport function SortableTreeItem<T>({\n  id,\n  depth,\n  top,\n  measureElement,\n  ...props\n}: SortableTreeItemProps<T>): JSX.Element {\n  const {\n    attributes,\n    isDragging,\n    isSorting,\n    listeners,\n    setDraggableNodeRef,\n    setDroppableNodeRef,\n    transform,\n    transition,\n  } = useSortable({\n    id,\n    animateLayoutChanges,\n  });\n\n  const transformString = CSS.Translate.toString(transform);\n\n  const style: CSSProperties = useMemo(\n    () => ({\n      transform: transformString,\n      transition,\n    }),\n    [transformString, transition]\n  );\n\n  const handleProps = useMemo(\n    () => ({\n      ...attributes,\n      ...listeners,\n      style,\n    }),\n    [attributes, listeners, style]\n  );\n\n  const wrapperRef = useCallback(\n    (node: HTMLElement | null) => {\n      setDroppableNodeRef(node);\n      measureElement?.(node);\n    },\n    [setDroppableNodeRef, measureElement]\n  );\n\n  return (\n    <TreeItem\n      dragRef={setDraggableNodeRef}\n      wrapperRef={wrapperRef}\n      depth={depth}\n      ghost={isDragging}\n      disableInteraction={isSorting}\n      handleProps={handleProps}\n      style={style}\n      top={top}\n      // eslint-disable-next-line react/jsx-props-no-spreading\n      {...props}\n    />\n  );\n}\n"],"mappings":";;;;;;;;AAAA;AACA,OAAOA,KAAK,IAAwBC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AACvE,SAAoCC,WAAW,QAAQ,mBAAmB;AAC1E,SAASC,GAAG,QAAQ,oBAAoB;AAAC,SAChCC,QAAQ;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAajB,IAAMC,oBAA0C,GAAGC,IAAA;EAAA,IAAC;IAClDC,SAAS;IACTC;EACF,CAAC,GAAAF,IAAA;EAAA,OAAK,EAAEC,SAAS,IAAIC,WAAW,CAAC;AAAA;AAEjC,OAAO,SAASC,gBAAgBA,CAAAC,KAAA,EAMU;EAAA,IANN;MAClCC,EAAE;MACFC,KAAK;MACLC,GAAG;MACHC;IAEwB,CAAC,GAAAJ,KAAA;IADtBK,KAAK,GAAAC,wBAAA,CAAAN,KAAA,EAAAO,SAAA;EAER,IAAM;IACJC,UAAU;IACVC,UAAU;IACVZ,SAAS;IACTa,SAAS;IACTC,mBAAmB;IACnBC,mBAAmB;IACnBC,SAAS;IACTC;EACF,CAAC,GAAGxB,WAAW,CAAC;IACdW,EAAE;IACFN;EACF,CAAC,CAAC;EAEF,IAAMoB,eAAe,GAAGxB,GAAG,CAACyB,SAAS,CAACC,QAAQ,CAACJ,SAAS,CAAC;EAEzD,IAAMK,KAAoB,GAAG7B,OAAO,CAClC,OAAO;IACLwB,SAAS,EAAEE,eAAe;IAC1BD;EACF,CAAC,CAAC,EACF,CAACC,eAAe,EAAED,UAAU,CAC9B,CAAC;EAED,IAAMK,WAAW,GAAG9B,OAAO,CACzB,MAAA+B,aAAA,CAAAA,aAAA,CAAAA,aAAA,KACKZ,UAAU,GACVE,SAAS;IACZQ;EAAK,EACL,EACF,CAACV,UAAU,EAAEE,SAAS,EAAEQ,KAAK,CAC/B,CAAC;EAED,IAAMG,UAAU,GAAGjC,WAAW,CAC3BkC,IAAwB,IAAK;IAC5BV,mBAAmB,CAACU,IAAI,CAAC;IACzBlB,cAAc,aAAdA,cAAc,eAAdA,cAAc,CAAGkB,IAAI,CAAC;EACxB,CAAC,EACD,CAACV,mBAAmB,EAAER,cAAc,CACtC,CAAC;EAED,oBACEV,IAAA,CAACF,QAAQ,EAAA4B,aAAA;IACPG,OAAO,EAAEZ,mBAAoB;IAC7BU,UAAU,EAAEA,UAAW;IACvBnB,KAAK,EAAEA,KAAM;IACbsB,KAAK,EAAEf,UAAW;IAClBgB,kBAAkB,EAAE5B,SAAU;IAC9BsB,WAAW,EAAEA,WAAY;IACzBD,KAAK,EAAEA,KAAM;IACbf,GAAG,EAAEA;IACL;EAAA,GACIE,KAAK,CACV,CAAC;AAEN","ignoreList":[]}

package/dist/sidebar/visibility-ordering-builder/sortable-tree/TreeItem.css

@@ -49,6 +49,7 @@
   flex-shrink: 1;
   overflow-x: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .visibility-ordering-list .tree-item .item-count,
 .visibility-search-list .tree-item .item-count {

package/dist/sidebar/visibility-ordering-builder/sortable-tree/TreeItem.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../../../node_modules/@deephaven/components/scss/custom.scss","../../../../../../node_modules/@deephaven/components/scss/bootstrap_overrides.scss","../../../../src/sidebar/visibility-ordering-builder/sortable-tree/TreeItem.scss","../../../../../../node_modules/@deephaven/components/scss/new_variables.scss"],"names":[],"mappings":"AAAA;AC6LA;ACpLE;AAAA;EACE;EACA;EACA,KCRO;EDSP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,eDsIY;ECrIZ;;AAEA;AAAA;EACE,ODPK;;ACUP;AAAA;EACE;EACA;;AAGF;AAAA;EACE;;AAEA;AAAA;EACE;;AAEA;AAAA;EACE,ODHG;;ACQT;AAAA;EACE;EACA;EACA,YDwIuB;;ACrIzB;AAAA;EACE;EACA;EACA;EACA;;AAGF;AAAA;EACE;EACA;EACA;EACA,cC1DK;;AD8DT;AAAA;EC9CA;EAIA,iBACE;EAIF,qBACE;EAIF;EACA;EACA;EACA;;ADiCA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;EACA;;AAEA;AAAA;EACE;EACA,kBDUE;ECTF;EACA,YDqEK;ECpEL,SCpFG;;ADsFH;AAAA;EACE;;AClDR;AAAA;EACE;EACA,YFoDM;EEnDN,YFgHS;EE/GT,eF8GY;EE7GZ;EACA;EACA;EDgDQ;EACA;EACA;EACA;;AC1DV;AAAA;EACE;EACA,YFoDM;EEnDN,YFgHS;EE/GT,eF8GY;EE7GZ;EACA;EACA;EDyDQ;EACA;EACA;EACA;;ACnEV;AAAA;EACE;EACA,YFoDM;EEnDN,YFgHS;EE/GT,eF8GY;EE7GZ;EACA;EACA;ED+DQ;EACA;EACA;EACA;;AAMR;AAAA;EACE;;AAEA;AAAA;EACE;EACA;;AAIJ;AAAA;EACE;;AAEA;AAAA;EACE;;AAIJ;AAAA;EACE,aAvIS;EAwIT,cCvIK;EDwIL;EACA","file":"TreeItem.css","sourcesContent":["/* stylelint-disable scss/at-import-no-partial-leading-underscore */\n// Consumers should be able to resolve bootstrap/ to node_modules/bootstrap\n\n//Make bootstrap functions available for use in overrides\n@import 'bootstrap/scss/_functions.scss';\n@import './bootstrap_overrides.scss';\n\n//_variable imports come after bootstrap default overrides,\n// makes all other variables and mixins from bootstrap available\n/// with just importing customer.scss\n@import 'bootstrap/scss/_variables.scss';\n@import 'bootstrap/scss/_mixins.scss';\n\n//New variables come after imports\n@import './new_variables.scss';\n@import './util.scss';\n","// Styling overrides for bootstrap\n@use 'sass:map';\n\n// Override / set color variables\n$red: var(--dh-color-visual-red);\n$orange: var(--dh-color-visual-orange);\n$yellow: var(--dh-color-visual-yellow);\n$green: var(--dh-color-visual-green);\n$blue: var(--dh-color-visual-blue);\n$purple: var(--dh-color-visual-purple);\n\n// Fallback colors are used if theme isn't loaded\n// this is required for error messages if the API doesn't load\n\n//Define our Gray scale\n$gray-100: var(--dh-color-gray-900, #fcfcfa);\n$gray-200: var(--dh-color-gray-800);\n$gray-300: var(--dh-color-gray-700);\n$gray-400: var(--dh-color-gray-600);\n$gray-500: var(--dh-color-gray-500);\n// intentional duplicate, scale doesn't line up otherwise\n// as we have gray-850 and spectrum doesn't and it is needed\n$gray-600: var(--dh-color-gray-500);\n$gray-700: var(--dh-color-gray-400);\n$gray-800: var(--dh-color-gray-300);\n$gray-850: var(--dh-color-gray-200);\n$gray-900: var(--dh-color-gray-75);\n$black: var(--dh-color-black, #1a171a);\n$white: var(--dh-color-white, #f0f0ee);\n\n//Define some UI colors\n$interfacegray: var(--dh-color-content-bg, #2d2a2e);\n$interfaceblue: var(--dh-color-accent-bg);\n$interfacewhite: $white;\n$interfaceblack: $black;\n$content-bg: var(--dh-color-content-bg, #2d2a2e);\n$background: var(--dh-color-bg, #1a171a);\n$foreground: var(--dh-color-fg, #f0f0ee);\n\n// Extend default Bootstrap $grays map\n$grays-custom: (\n  '850': $gray-850,\n);\n$grays: () !default;\n$grays: map-merge($grays, $grays-custom);\n\n// Extend default Bootstrap $colors map\n$colors-custom: (\n  'black': $black,\n);\n$colors: () !default;\n$colors: map-merge($colors, $colors-custom);\n\n// Override default Bootstrap $theme-colors map by mapping each key to itself.\n// These will then be re-mapped inside of `button-outline-variant` and\n// `button-outline-variant` mixins in `bootstrap_override_mixins_buttons.scss`\n$theme-colors-self-map: ();\n@each $key\n  in (\n    'primary',\n    'secondary',\n    'success',\n    'info',\n    'warning',\n    'danger',\n    'light',\n    'dark'\n  )\n{\n  $theme-colors-self-map: map.set($theme-colors-self-map, $key, $key);\n}\n$theme-colors: () !default;\n$theme-colors: map-merge($theme-colors, $theme-colors-self-map);\n\n// Used by bootstrap_override_mixins_buttons.scss to map Bootstrap colors to\n// DH semantic colors\n$bootstrap-dh-semantic-map: (\n  'primary': 'accent',\n  'secondary': 'neutral',\n  'success': 'positive',\n  'info': 'info',\n  'warning': 'notice',\n  'danger': 'negative',\n  // We shouldn't be using these, but mapping so they work with our custom\n  // `color-yiq` mixin. If we find a way to remove $light + $dark that are\n  // defined in Bootstrap _variables.scss, we should remove these\n  'light': 'neutral',\n  'dark': 'neutral',\n);\n\n//Set default colors\n$body-bg: $black;\n$body-color: $interfacewhite;\n\n// Set brand colors\n$primary: var(--dh-color-accent-bg);\n$primary-hover: var(--dh-color-accent-hover-bg);\n$primary-dark: var(--dh-color-accent-down-bg);\n$secondary: var(--dh-color-neutral-bg);\n$secondary-hover: var(--dh-color-neutral-hover-bg);\n$success: $green;\n$info: $yellow;\n$warning: $orange;\n$danger: var(--dh-color-negative-bg);\n$danger-hover: var(--dh-color-negative-hover-bg);\n// We really don't want to use $light or $dark variables, but Bootstrap defines\n// them in _variables.scss. Explicitly setting them to ensure we are in control\n// of their values. If we can find a way to remove them, we should\n$light: var(--dh-color-gray-light);\n$dark: var(--dh-color-gray-dark);\n// Bootstrap doesn't define $mid, and we want to move away from this particular\n// semantic. Should be deleted by #1635\n$mid: var(--dh-color-gray-mid);\n\n$semantic-colors: (\n  'primary-hover': $primary-hover,\n  'primary-dark': $primary-dark,\n  'mid': $mid,\n  'content-bg': $interfacegray,\n  'background': $interfaceblack,\n  'foreground': $interfacewhite,\n  'secondary-hover': $secondary-hover,\n  'danger-hover': $danger-hover,\n);\n\n$component-active-bg: $primary;\n$theme-color-interval: 9%;\n$yiq-contrasted-threshold: 180;\n\n// Override fonts\n$font-family-sans-serif:\n  'Fira Sans',\n  -apple-system,\n  blinkmacsystemfont,\n  'Segoe UI',\n  'Roboto',\n  'Helvetica Neue',\n  arial,\n  sans-serif; //fira sans then native system ui fallbacks\n$font-family-monospace: 'Fira Mono', menlo, monaco, consolas, 'Liberation Mono',\n  'Courier New', monospace;\n$font-family-base: $font-family-sans-serif;\n\n$headings-font-weight: 400;\n\n//Text overides\n$text-muted: $gray-400;\n\n//Style Selection highlight color\n$text-select-color: var(--dh-color-text-highlight);\n\n//Grid variables, same value as default just making easily accessible\n$grid-gutter-width: 30px;\n\n//Visual Overrides\n$border-radius: 4px;\n$box-shadow: 0 0.1rem 1rem var(--dh-color-dropshadow);\n\n//Override Btn\n$btn-border-radius: 4rem;\n$btn-padding-x: 1.5rem;\n$btn-transition:\n  color 0.12s ease-in-out,\n  background-color 0.12s ease-in-out,\n  border-color 0.12s ease-in-out,\n  box-shadow 0.12s ease-in-out; //default 0.15 is too long\n$btn-border-width: 2px;\n$btn-font-weight: var(--spectrum-global-font-weight-bold);\n$btn-line-height: 1.3;\n\n//Override Inputs\n$input-bg: var(--dh-color-input-bg);\n$input-disabled-bg: var(--dh-color-input-disabled-bg);\n$input-color: var(--dh-color-input-fg);\n$input-border-color: var(--dh-color-input-border);\n$input-placeholder-color: var(--dh-color-input-placeholder);\n$input-focus-border-color: var(--dh-color-input-focus-border);\n\n$input-btn-focus-width: 0.2rem;\n$input-btn-focus-color: color-mix(\n  in srgb,\n  var(--dh-color-accent) 35%,\n  transparent\n);\n$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color;\n$input-btn-line-height: 1.3;\n// Bootstrap uses a calc expression to determine the input height (calc(line-height + 2*padding-y + border)).\n// The padding-y value has to be in rem to match units as it is a SASS calc.\n// Using 0.42145rem with 1.3 line height gets us to spectrum's 32px.\n/* stylelint-disable-next-line number-max-precision */\n$input-btn-padding-y: 0.42145rem;\n\n//checkbox\n$custom-control-indicator-bg: var(--dh-color-input-bg);\n$custom-control-indicator-border-color: var(--dh-color-input-border);\n$custom-checkbox-indicator-border-radius: 2px;\n$custom-control-indicator-border-width: 2px;\n$custom-control-indicator-active-bg: var(--dh-color-input-bg);\n$custom-control-indicator-active-border-color: var(--dh-color-input-fg);\n$custom-control-indicator-checked-bg: var(--dh-color-input-fg);\n$custom-control-indicator-checked-color: black; // used as mask fill color\n$custom-checkbox-indicator-indeterminate-bg: var(--dh-color-input-fg);\n$custom-control-indicator-bg-size: 75% 75%;\n$custom-control-indicator-disabled-bg: var(--dh-color-input-disabled-bg);\n$custom-control-indicator-checked-disabled-bg: var(\n  --dh-color-input-disabled-bg\n);\n$custom-control-label-disabled-color: var(--dh-color-input-disabled-fg);\n\n// The $custom-select-indicator variable is used by Bootstrap to provide the\n// icon for the select dropdown. Inline svgs can't use CSS variables, so we hard\n// code the color to #929192 (the default value of --dh-color-gray-600). PR #1651\n// overrides this icon altogether for known dropdowns, so technically we may not\n// need this, but it's here in case there are any remaining instances.\n$custom-select-indicator-color: #929192;\n$custom-select-bg: var(--dh-color-selector-bg);\n$custom-select-bg-size: 16px 16px;\n//dhSort icon encoded\n$custom-select-indicator: str-replace(\n  url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M4 7l-.4-.8 4-3.7h.8l4 3.7-.4.8H4zm0 2l-.4.8 4 3.7h.8l4-3.7L12 9H4z'/%3E%3C/svg%3E\"),\n  '#',\n  '%23'\n);\n$custom-select-focus-box-shadow: $input-btn-focus-box-shadow;\n$custom-select-disabled-color: $gray-500;\n$custom-select-disabled-bg: $gray-800;\n\n//modal\n$modal-content-bg: $content-bg;\n$modal-content-border-width: 0;\n$modal-md: 550px;\n$close-color: var(--dh-color-text);\n$close-text-shadow: none;\n\n// Toast notification\n$toast-bg: var(--dh-color-accent-100);\n$toast-color: var(--dh-color-text);\n$toast-error-bg: var(--dh-color-negative-bg);\n$toast-error-color: var(--dh-color-text);\n\n//tooltips\n$tooltip-bg: var(--dh-color-tooltip-bg);\n$tooltip-color: var(--dh-color-tooltip-fg);\n$tooltip-box-shadow: 0 0.1rem 1.5rem 0.1rem var(--dh-color-tooltip-box-shadow);\n\n//drowdowns\n$dropdown-bg: $gray-600;\n$dropdown-link-color: $foreground;\n$dropdown-link-hover-color: $foreground;\n$dropdown-link-hover-bg: var(--dh-color-item-list-hover-bg);\n$dropdown-divider-bg: $gray-700;\n\n//context menus\n$contextmenu-bg: var(--dh-color-popover-bg);\n$contextmenu-color: var(--dh-color-text);\n$contextmenu-disabled-color: var(--dh-color-text-disabled);\n$contextmenu-keyboard-selected-bg: var(--dh-color-keyboard-selected-bg);\n$contextmenu-selected-bg: var(--dh-color-item-list-hover-bg);\n$contextmenu-selected-color: var(--dh-color-item-list-selected-fg);\n\n//hr\n$hr-border-color: var(--dh-color-hr);\n\n//links\n$link-color: $gray-400;\n$link-hover-color: $foreground;\n\n//progress-bar\n$progress-bg: $gray-600;\n$progress-border-radius: 1rem;\n\n// Set global options\n$enable-shadows: false;\n$enable-gradients: false;\n$enable-print-styles: false; //I don't think anyone should expect to \"print\" this app.\n\n// Transition times\n$transition: 0.15s;\n$transition-mid: 0.2s;\n$transition-long: 0.3s;\n$transition-slow: 0.6s;\n\n//form-validation icon, uses vsWarning icon encoded here as svg\n$form-feedback-icon-invalid-color: $danger;\n$form-feedback-icon-invalid: str-replace(\n  url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg fill='none'%3E%3Cg fill='#{$form-feedback-icon-invalid-color}'%3E%3Cpath d='M7.56 1h.88l6.54 12.26-.44.74H1.44L1 13.26 7.56 1zM8 2.28 2.28 13H13.7L8 2.28zM8.625 12v-1h-1.25v1h1.25zm-1.25-2V6h1.25v4h-1.25z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E \"),\n  '#',\n  '%23'\n);\n\n// This section of variables is not consumed directly by DH, but they need to be\n// defined for sass to compile _variables\n$table-dark-bg: $gray-800;\n$table-dark-accent-bg: var(--dh-color-highlight-hover);\n$table-dark-hover-bg: var(--dh-color-highlight-active);\n$table-dark-border-color: $gray-700;\n$popover-bg: var(--dh-color-tooltip-bg);\n$popover-border-color: var(--dh-color-overlay-modal-bg);\n$popover-header-bg: #000;\n$popover-arrow-outer-color: var(--dh-color-dropshadow);\n$custom-range-thumb-active-bg: var(--dh-color-accent-1100);\n","@import '@deephaven/components/scss/custom.scss';\n\n$depth-line-color: $gray-600;\n$depth-margin: calc(\n  0.5rem + 8px + 0.5px\n); // Tree item 0.25rem padding, Icon button 0.25rem, half of icon size, and half pixel to offset 1px border\n\n.visibility-ordering-list,\n.visibility-search-list {\n  .tree-item {\n    position: relative;\n    display: flex;\n    gap: $spacer-1;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    align-items: center;\n    flex-grow: 1;\n    min-width: 0; // Needed so column names don't grow past the edge\n    border: $input-border-width solid transparent;\n    user-select: none;\n    border-radius: $border-radius;\n    padding: 0 $spacer-1; // space for focus border\n\n    svg:not(.color-swatch) {\n      color: $text-muted;\n    }\n\n    &:hover {\n      background: var(--dh-color-item-list-hover-bg);\n      cursor: grab;\n    }\n\n    &.isSelected {\n      background-color: var(--dh-color-item-list-selected-bg);\n\n      &:hover {\n        background-color: var(--dh-color-item-list-selected-hover-bg);\n\n        svg:not(.color-swatch) {\n          color: $foreground;\n        }\n      }\n    }\n\n    &:focus {\n      outline: 0;\n      border: $input-border-width solid $input-focus-border-color;\n      box-shadow: $input-focus-box-shadow;\n    }\n\n    .column-name {\n      flex-grow: 1;\n      flex-shrink: 1;\n      overflow-x: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .item-count {\n      padding: 0 $spacer-2;\n      border-radius: 1rem;\n      background-color: fg-opacity(25);\n      margin-right: $spacer-1;\n    }\n  }\n\n  .marching-ants {\n    @include ants-base($foreground, $background);\n  }\n\n  .item-wrapper {\n    list-style: none;\n    box-sizing: border-box;\n    margin-bottom: 1px;\n    width: 100%;\n    display: flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n\n    &.clone {\n      pointer-events: none;\n      padding: 0;\n\n      .tree-item {\n        opacity: 1;\n        background-color: $primary;\n        color: var(--dh-color-accent-contrast);\n        box-shadow: $box-shadow;\n        padding: $spacer-1;\n\n        svg:not(.color-swatch) {\n          color: var(--dh-color-accent-contrast);\n        }\n\n        &.two-dragged {\n          @include drag-stack(before) {\n            top: 4px;\n            left: 2px;\n            opacity: 0.8;\n            z-index: -1;\n          }\n        }\n\n        &.multiple-dragged {\n          @include drag-stack(before) {\n            top: 4px;\n            left: 2px;\n            opacity: 0.8;\n            z-index: -1;\n          }\n          @include drag-stack(after) {\n            top: 8px;\n            left: 4px;\n            opacity: 0.6;\n            z-index: -2;\n          }\n        }\n      }\n    }\n\n    &.ghost {\n      opacity: 0.5;\n\n      .tree-item > * {\n        box-shadow: none;\n        background-color: transparent;\n      }\n    }\n\n    &.disableInteraction {\n      pointer-events: none;\n\n      &:not(.ghost) .tree-item.isSelected {\n        opacity: 0.3;\n      }\n    }\n\n    .depth-line {\n      margin-left: $depth-margin;\n      margin-right: $spacer-1; // Gives breathing room to the item boxes\n      margin-top: -1px; // removes gaps between depth lines caused by item's margin-bottom\n      border-left: 1px solid $depth-line-color;\n    }\n  }\n}\n","@use 'sass:math';\n\n//Set of spacer variables from the spacer map\n$spacer-0: map-get($spacers, 0); //0\n$spacer-1: map-get($spacers, 1);\n$spacer-2: map-get($spacers, 2);\n$spacer-3: map-get($spacers, 3);\n$spacer-4: map-get($spacers, 4);\n$spacer-5: map-get($spacers, 5);\n\n//Marching Ants for golden layout dropzone and drag and drop\n//top bottom, left right.\n//create 4 background images that are 50% color 1, 50% color 2 using graidents,  two veritical, two horizontal\n//size them to ant-size and thickness\n//position those images along the egdes and make top/bottom repeat-x and left/right repeat-y\n//then offest each of those background positions by ant-size in animation to make them march.\n$ant-size: 8px;\n$ant-thickness: 1px;\n\n@mixin ants-base($color-1: black, $color-2: white) {\n  background-image: linear-gradient(to right, $color-2 50%, $color-1 50%),\n    linear-gradient(to right, $color-2 50%, $color-1 50%),\n    linear-gradient(to bottom, $color-2 50%, $color-1 50%),\n    linear-gradient(to bottom, $color-2 50%, $color-1 50%);\n  background-size:\n    $ant-size $ant-thickness,\n    $ant-size $ant-thickness,\n    $ant-thickness $ant-size,\n    $ant-thickness $ant-size;\n  background-position:\n    0 top,\n    0 bottom,\n    left 0,\n    right 0;\n  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;\n  animation: march 0.5s;\n  animation-timing-function: linear;\n  animation-iteration-count: infinite;\n}\n\n@mixin drag-stack($pseudo-element) {\n  &::#{$pseudo-element} {\n    content: ' ';\n    background: $primary;\n    box-shadow: $box-shadow;\n    border-radius: $border-radius;\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    @content;\n  }\n}\n\n$focus-bg-transparency: 12%;\n$hover-bg-transparency: 14%;\n$active-bg-transparency: 28%;\n$exception-transparency: 28%;\n"]}
+{"version":3,"sourceRoot":"","sources":["../../../../../../node_modules/@deephaven/components/scss/custom.scss","../../../../../../node_modules/@deephaven/components/scss/bootstrap_overrides.scss","../../../../src/sidebar/visibility-ordering-builder/sortable-tree/TreeItem.scss","../../../../../../node_modules/@deephaven/components/scss/new_variables.scss"],"names":[],"mappings":"AAAA;AC6LA;ACpLE;AAAA;EACE;EACA;EACA,KCRO;EDSP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,eDsIY;ECrIZ;;AAEA;AAAA;EACE,ODPK;;ACUP;AAAA;EACE;EACA;;AAGF;AAAA;EACE;;AAEA;AAAA;EACE;;AAEA;AAAA;EACE,ODHG;;ACQT;AAAA;EACE;EACA;EACA,YDwIuB;;ACrIzB;AAAA;EACE;EACA;EACA;EACA;EACA;;AAGF;AAAA;EACE;EACA;EACA;EACA,cC3DK;;AD+DT;AAAA;EC/CA;EAIA,iBACE;EAIF,qBACE;EAIF;EACA;EACA;EACA;;ADkCA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;EACA;;AAEA;AAAA;EACE;EACA,kBDSE;ECRF;EACA,YDoEK;ECnEL,SCrFG;;ADuFH;AAAA;EACE;;ACnDR;AAAA;EACE;EACA,YFoDM;EEnDN,YFgHS;EE/GT,eF8GY;EE7GZ;EACA;EACA;EDiDQ;EACA;EACA;EACA;;AC3DV;AAAA;EACE;EACA,YFoDM;EEnDN,YFgHS;EE/GT,eF8GY;EE7GZ;EACA;EACA;ED0DQ;EACA;EACA;EACA;;ACpEV;AAAA;EACE;EACA,YFoDM;EEnDN,YFgHS;EE/GT,eF8GY;EE7GZ;EACA;EACA;EDgEQ;EACA;EACA;EACA;;AAMR;AAAA;EACE;;AAEA;AAAA;EACE;EACA;;AAIJ;AAAA;EACE;;AAEA;AAAA;EACE;;AAIJ;AAAA;EACE,aAxIS;EAyIT,cCxIK;EDyIL;EACA","file":"TreeItem.css","sourcesContent":["/* stylelint-disable scss/at-import-no-partial-leading-underscore */\n// Consumers should be able to resolve bootstrap/ to node_modules/bootstrap\n\n//Make bootstrap functions available for use in overrides\n@import 'bootstrap/scss/_functions.scss';\n@import './bootstrap_overrides.scss';\n\n//_variable imports come after bootstrap default overrides,\n// makes all other variables and mixins from bootstrap available\n/// with just importing customer.scss\n@import 'bootstrap/scss/_variables.scss';\n@import 'bootstrap/scss/_mixins.scss';\n\n//New variables come after imports\n@import './new_variables.scss';\n@import './util.scss';\n","// Styling overrides for bootstrap\n@use 'sass:map';\n\n// Override / set color variables\n$red: var(--dh-color-visual-red);\n$orange: var(--dh-color-visual-orange);\n$yellow: var(--dh-color-visual-yellow);\n$green: var(--dh-color-visual-green);\n$blue: var(--dh-color-visual-blue);\n$purple: var(--dh-color-visual-purple);\n\n// Fallback colors are used if theme isn't loaded\n// this is required for error messages if the API doesn't load\n\n//Define our Gray scale\n$gray-100: var(--dh-color-gray-900, #fcfcfa);\n$gray-200: var(--dh-color-gray-800);\n$gray-300: var(--dh-color-gray-700);\n$gray-400: var(--dh-color-gray-600);\n$gray-500: var(--dh-color-gray-500);\n// intentional duplicate, scale doesn't line up otherwise\n// as we have gray-850 and spectrum doesn't and it is needed\n$gray-600: var(--dh-color-gray-500);\n$gray-700: var(--dh-color-gray-400);\n$gray-800: var(--dh-color-gray-300);\n$gray-850: var(--dh-color-gray-200);\n$gray-900: var(--dh-color-gray-75);\n$black: var(--dh-color-black, #1a171a);\n$white: var(--dh-color-white, #f0f0ee);\n\n//Define some UI colors\n$interfacegray: var(--dh-color-content-bg, #2d2a2e);\n$interfaceblue: var(--dh-color-accent-bg);\n$interfacewhite: $white;\n$interfaceblack: $black;\n$content-bg: var(--dh-color-content-bg, #2d2a2e);\n$background: var(--dh-color-bg, #1a171a);\n$foreground: var(--dh-color-fg, #f0f0ee);\n\n// Extend default Bootstrap $grays map\n$grays-custom: (\n  '850': $gray-850,\n);\n$grays: () !default;\n$grays: map-merge($grays, $grays-custom);\n\n// Extend default Bootstrap $colors map\n$colors-custom: (\n  'black': $black,\n);\n$colors: () !default;\n$colors: map-merge($colors, $colors-custom);\n\n// Override default Bootstrap $theme-colors map by mapping each key to itself.\n// These will then be re-mapped inside of `button-outline-variant` and\n// `button-outline-variant` mixins in `bootstrap_override_mixins_buttons.scss`\n$theme-colors-self-map: ();\n@each $key\n  in (\n    'primary',\n    'secondary',\n    'success',\n    'info',\n    'warning',\n    'danger',\n    'light',\n    'dark'\n  )\n{\n  $theme-colors-self-map: map.set($theme-colors-self-map, $key, $key);\n}\n$theme-colors: () !default;\n$theme-colors: map-merge($theme-colors, $theme-colors-self-map);\n\n// Used by bootstrap_override_mixins_buttons.scss to map Bootstrap colors to\n// DH semantic colors\n$bootstrap-dh-semantic-map: (\n  'primary': 'accent',\n  'secondary': 'neutral',\n  'success': 'positive',\n  'info': 'info',\n  'warning': 'notice',\n  'danger': 'negative',\n  // We shouldn't be using these, but mapping so they work with our custom\n  // `color-yiq` mixin. If we find a way to remove $light + $dark that are\n  // defined in Bootstrap _variables.scss, we should remove these\n  'light': 'neutral',\n  'dark': 'neutral',\n);\n\n//Set default colors\n$body-bg: $black;\n$body-color: $interfacewhite;\n\n// Set brand colors\n$primary: var(--dh-color-accent-bg);\n$primary-hover: var(--dh-color-accent-hover-bg);\n$primary-dark: var(--dh-color-accent-down-bg);\n$secondary: var(--dh-color-neutral-bg);\n$secondary-hover: var(--dh-color-neutral-hover-bg);\n$success: $green;\n$info: $yellow;\n$warning: $orange;\n$danger: var(--dh-color-negative-bg);\n$danger-hover: var(--dh-color-negative-hover-bg);\n// We really don't want to use $light or $dark variables, but Bootstrap defines\n// them in _variables.scss. Explicitly setting them to ensure we are in control\n// of their values. If we can find a way to remove them, we should\n$light: var(--dh-color-gray-light);\n$dark: var(--dh-color-gray-dark);\n// Bootstrap doesn't define $mid, and we want to move away from this particular\n// semantic. Should be deleted by #1635\n$mid: var(--dh-color-gray-mid);\n\n$semantic-colors: (\n  'primary-hover': $primary-hover,\n  'primary-dark': $primary-dark,\n  'mid': $mid,\n  'content-bg': $interfacegray,\n  'background': $interfaceblack,\n  'foreground': $interfacewhite,\n  'secondary-hover': $secondary-hover,\n  'danger-hover': $danger-hover,\n);\n\n$component-active-bg: $primary;\n$theme-color-interval: 9%;\n$yiq-contrasted-threshold: 180;\n\n// Override fonts\n$font-family-sans-serif:\n  'Fira Sans',\n  -apple-system,\n  blinkmacsystemfont,\n  'Segoe UI',\n  'Roboto',\n  'Helvetica Neue',\n  arial,\n  sans-serif; //fira sans then native system ui fallbacks\n$font-family-monospace: 'Fira Mono', menlo, monaco, consolas, 'Liberation Mono',\n  'Courier New', monospace;\n$font-family-base: $font-family-sans-serif;\n\n$headings-font-weight: 400;\n\n//Text overides\n$text-muted: $gray-400;\n\n//Style Selection highlight color\n$text-select-color: var(--dh-color-text-highlight);\n\n//Grid variables, same value as default just making easily accessible\n$grid-gutter-width: 30px;\n\n//Visual Overrides\n$border-radius: 4px;\n$box-shadow: 0 0.1rem 1rem var(--dh-color-dropshadow);\n\n//Override Btn\n$btn-border-radius: 4rem;\n$btn-padding-x: 1.5rem;\n$btn-transition:\n  color 0.12s ease-in-out,\n  background-color 0.12s ease-in-out,\n  border-color 0.12s ease-in-out,\n  box-shadow 0.12s ease-in-out; //default 0.15 is too long\n$btn-border-width: 2px;\n$btn-font-weight: var(--spectrum-global-font-weight-bold);\n$btn-line-height: 1.3;\n\n//Override Inputs\n$input-bg: var(--dh-color-input-bg);\n$input-disabled-bg: var(--dh-color-input-disabled-bg);\n$input-color: var(--dh-color-input-fg);\n$input-border-color: var(--dh-color-input-border);\n$input-placeholder-color: var(--dh-color-input-placeholder);\n$input-focus-border-color: var(--dh-color-input-focus-border);\n\n$input-btn-focus-width: 0.2rem;\n$input-btn-focus-color: color-mix(\n  in srgb,\n  var(--dh-color-accent) 35%,\n  transparent\n);\n$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color;\n$input-btn-line-height: 1.3;\n// Bootstrap uses a calc expression to determine the input height (calc(line-height + 2*padding-y + border)).\n// The padding-y value has to be in rem to match units as it is a SASS calc.\n// Using 0.42145rem with 1.3 line height gets us to spectrum's 32px.\n/* stylelint-disable-next-line number-max-precision */\n$input-btn-padding-y: 0.42145rem;\n\n//checkbox\n$custom-control-indicator-bg: var(--dh-color-input-bg);\n$custom-control-indicator-border-color: var(--dh-color-input-border);\n$custom-checkbox-indicator-border-radius: 2px;\n$custom-control-indicator-border-width: 2px;\n$custom-control-indicator-active-bg: var(--dh-color-input-bg);\n$custom-control-indicator-active-border-color: var(--dh-color-input-fg);\n$custom-control-indicator-checked-bg: var(--dh-color-input-fg);\n$custom-control-indicator-checked-color: black; // used as mask fill color\n$custom-checkbox-indicator-indeterminate-bg: var(--dh-color-input-fg);\n$custom-control-indicator-bg-size: 75% 75%;\n$custom-control-indicator-disabled-bg: var(--dh-color-input-disabled-bg);\n$custom-control-indicator-checked-disabled-bg: var(\n  --dh-color-input-disabled-bg\n);\n$custom-control-label-disabled-color: var(--dh-color-input-disabled-fg);\n\n// The $custom-select-indicator variable is used by Bootstrap to provide the\n// icon for the select dropdown. Inline svgs can't use CSS variables, so we hard\n// code the color to #929192 (the default value of --dh-color-gray-600). PR #1651\n// overrides this icon altogether for known dropdowns, so technically we may not\n// need this, but it's here in case there are any remaining instances.\n$custom-select-indicator-color: #929192;\n$custom-select-bg: var(--dh-color-selector-bg);\n$custom-select-bg-size: 16px 16px;\n//dhSort icon encoded\n$custom-select-indicator: str-replace(\n  url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M4 7l-.4-.8 4-3.7h.8l4 3.7-.4.8H4zm0 2l-.4.8 4 3.7h.8l4-3.7L12 9H4z'/%3E%3C/svg%3E\"),\n  '#',\n  '%23'\n);\n$custom-select-focus-box-shadow: $input-btn-focus-box-shadow;\n$custom-select-disabled-color: $gray-500;\n$custom-select-disabled-bg: $gray-800;\n\n//modal\n$modal-content-bg: $content-bg;\n$modal-content-border-width: 0;\n$modal-md: 550px;\n$close-color: var(--dh-color-text);\n$close-text-shadow: none;\n\n// Toast notification\n$toast-bg: var(--dh-color-accent-100);\n$toast-color: var(--dh-color-text);\n$toast-error-bg: var(--dh-color-negative-bg);\n$toast-error-color: var(--dh-color-text);\n\n//tooltips\n$tooltip-bg: var(--dh-color-tooltip-bg);\n$tooltip-color: var(--dh-color-tooltip-fg);\n$tooltip-box-shadow: 0 0.1rem 1.5rem 0.1rem var(--dh-color-tooltip-box-shadow);\n\n//drowdowns\n$dropdown-bg: $gray-600;\n$dropdown-link-color: $foreground;\n$dropdown-link-hover-color: $foreground;\n$dropdown-link-hover-bg: var(--dh-color-item-list-hover-bg);\n$dropdown-divider-bg: $gray-700;\n\n//context menus\n$contextmenu-bg: var(--dh-color-popover-bg);\n$contextmenu-color: var(--dh-color-text);\n$contextmenu-disabled-color: var(--dh-color-text-disabled);\n$contextmenu-keyboard-selected-bg: var(--dh-color-keyboard-selected-bg);\n$contextmenu-selected-bg: var(--dh-color-item-list-hover-bg);\n$contextmenu-selected-color: var(--dh-color-item-list-selected-fg);\n\n//hr\n$hr-border-color: var(--dh-color-hr);\n\n//links\n$link-color: $gray-400;\n$link-hover-color: $foreground;\n\n//progress-bar\n$progress-bg: $gray-600;\n$progress-border-radius: 1rem;\n\n// Set global options\n$enable-shadows: false;\n$enable-gradients: false;\n$enable-print-styles: false; //I don't think anyone should expect to \"print\" this app.\n\n// Transition times\n$transition: 0.15s;\n$transition-mid: 0.2s;\n$transition-long: 0.3s;\n$transition-slow: 0.6s;\n\n//form-validation icon, uses vsWarning icon encoded here as svg\n$form-feedback-icon-invalid-color: $danger;\n$form-feedback-icon-invalid: str-replace(\n  url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg fill='none'%3E%3Cg fill='#{$form-feedback-icon-invalid-color}'%3E%3Cpath d='M7.56 1h.88l6.54 12.26-.44.74H1.44L1 13.26 7.56 1zM8 2.28 2.28 13H13.7L8 2.28zM8.625 12v-1h-1.25v1h1.25zm-1.25-2V6h1.25v4h-1.25z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E \"),\n  '#',\n  '%23'\n);\n\n// This section of variables is not consumed directly by DH, but they need to be\n// defined for sass to compile _variables\n$table-dark-bg: $gray-800;\n$table-dark-accent-bg: var(--dh-color-highlight-hover);\n$table-dark-hover-bg: var(--dh-color-highlight-active);\n$table-dark-border-color: $gray-700;\n$popover-bg: var(--dh-color-tooltip-bg);\n$popover-border-color: var(--dh-color-overlay-modal-bg);\n$popover-header-bg: #000;\n$popover-arrow-outer-color: var(--dh-color-dropshadow);\n$custom-range-thumb-active-bg: var(--dh-color-accent-1100);\n","@import '@deephaven/components/scss/custom.scss';\n\n$depth-line-color: $gray-600;\n$depth-margin: calc(\n  0.5rem + 8px + 0.5px\n); // Tree item 0.25rem padding, Icon button 0.25rem, half of icon size, and half pixel to offset 1px border\n\n.visibility-ordering-list,\n.visibility-search-list {\n  .tree-item {\n    position: relative;\n    display: flex;\n    gap: $spacer-1;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    align-items: center;\n    flex-grow: 1;\n    min-width: 0; // Needed so column names don't grow past the edge\n    border: $input-border-width solid transparent;\n    user-select: none;\n    border-radius: $border-radius;\n    padding: 0 $spacer-1; // space for focus border\n\n    svg:not(.color-swatch) {\n      color: $text-muted;\n    }\n\n    &:hover {\n      background: var(--dh-color-item-list-hover-bg);\n      cursor: grab;\n    }\n\n    &.isSelected {\n      background-color: var(--dh-color-item-list-selected-bg);\n\n      &:hover {\n        background-color: var(--dh-color-item-list-selected-hover-bg);\n\n        svg:not(.color-swatch) {\n          color: $foreground;\n        }\n      }\n    }\n\n    &:focus {\n      outline: 0;\n      border: $input-border-width solid $input-focus-border-color;\n      box-shadow: $input-focus-box-shadow;\n    }\n\n    .column-name {\n      flex-grow: 1;\n      flex-shrink: 1;\n      overflow-x: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .item-count {\n      padding: 0 $spacer-2;\n      border-radius: 1rem;\n      background-color: fg-opacity(25);\n      margin-right: $spacer-1;\n    }\n  }\n\n  .marching-ants {\n    @include ants-base($foreground, $background);\n  }\n\n  .item-wrapper {\n    list-style: none;\n    box-sizing: border-box;\n    margin-bottom: 1px;\n    width: 100%;\n    display: flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n\n    &.clone {\n      pointer-events: none;\n      padding: 0;\n\n      .tree-item {\n        opacity: 1;\n        background-color: $primary;\n        color: var(--dh-color-accent-contrast);\n        box-shadow: $box-shadow;\n        padding: $spacer-1;\n\n        svg:not(.color-swatch) {\n          color: var(--dh-color-accent-contrast);\n        }\n\n        &.two-dragged {\n          @include drag-stack(before) {\n            top: 4px;\n            left: 2px;\n            opacity: 0.8;\n            z-index: -1;\n          }\n        }\n\n        &.multiple-dragged {\n          @include drag-stack(before) {\n            top: 4px;\n            left: 2px;\n            opacity: 0.8;\n            z-index: -1;\n          }\n          @include drag-stack(after) {\n            top: 8px;\n            left: 4px;\n            opacity: 0.6;\n            z-index: -2;\n          }\n        }\n      }\n    }\n\n    &.ghost {\n      opacity: 0.5;\n\n      .tree-item > * {\n        box-shadow: none;\n        background-color: transparent;\n      }\n    }\n\n    &.disableInteraction {\n      pointer-events: none;\n\n      &:not(.ghost) .tree-item.isSelected {\n        opacity: 0.3;\n      }\n    }\n\n    .depth-line {\n      margin-left: $depth-margin;\n      margin-right: $spacer-1; // Gives breathing room to the item boxes\n      margin-top: -1px; // removes gaps between depth lines caused by item's margin-bottom\n      border-left: 1px solid $depth-line-color;\n    }\n  }\n}\n","@use 'sass:math';\n\n//Set of spacer variables from the spacer map\n$spacer-0: map-get($spacers, 0); //0\n$spacer-1: map-get($spacers, 1);\n$spacer-2: map-get($spacers, 2);\n$spacer-3: map-get($spacers, 3);\n$spacer-4: map-get($spacers, 4);\n$spacer-5: map-get($spacers, 5);\n\n//Marching Ants for golden layout dropzone and drag and drop\n//top bottom, left right.\n//create 4 background images that are 50% color 1, 50% color 2 using graidents,  two veritical, two horizontal\n//size them to ant-size and thickness\n//position those images along the egdes and make top/bottom repeat-x and left/right repeat-y\n//then offest each of those background positions by ant-size in animation to make them march.\n$ant-size: 8px;\n$ant-thickness: 1px;\n\n@mixin ants-base($color-1: black, $color-2: white) {\n  background-image: linear-gradient(to right, $color-2 50%, $color-1 50%),\n    linear-gradient(to right, $color-2 50%, $color-1 50%),\n    linear-gradient(to bottom, $color-2 50%, $color-1 50%),\n    linear-gradient(to bottom, $color-2 50%, $color-1 50%);\n  background-size:\n    $ant-size $ant-thickness,\n    $ant-size $ant-thickness,\n    $ant-thickness $ant-size,\n    $ant-thickness $ant-size;\n  background-position:\n    0 top,\n    0 bottom,\n    left 0,\n    right 0;\n  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;\n  animation: march 0.5s;\n  animation-timing-function: linear;\n  animation-iteration-count: infinite;\n}\n\n@mixin drag-stack($pseudo-element) {\n  &::#{$pseudo-element} {\n    content: ' ';\n    background: $primary;\n    box-shadow: $box-shadow;\n    border-radius: $border-radius;\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    @content;\n  }\n}\n\n$focus-bg-transparency: 12%;\n$hover-bg-transparency: 14%;\n$active-bg-transparency: 28%;\n$exception-transparency: 28%;\n"]}

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

@@ -2,7 +2,6 @@ import React from 'react';
 import type { FlattenedItem } from './types';
 import './TreeItem.scss';
 export interface TreeItemProps<T> {
-    childCount?: number;
     clone?: boolean;
     depth: number;
     withDepthMarkers?: boolean;
@@ -18,11 +17,11 @@ export interface TreeItemProps<T> {
      * Styles from dnd-kit to transform the depth lines
      */
     style?: React.CSSProperties;
+    top?: number;
 }
 export type TreeItemRenderFnProps<T> = {
     ref: React.Ref<HTMLDivElement> | null;
     clone: boolean;
-    childCount?: number;
     value: string;
     item: FlattenedItem<T>;
     handleProps?: Record<string, unknown>;

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

@@ -1 +1 @@
-{"version":3,"file":"TreeItem.d.ts","sourceRoot":"","sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/TreeItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,iBAAiB,CAAC;AAEzB,MAAM,WAAW,aAAa,CAAC,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC;IAC3C,UAAU,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC;IAC7C,UAAU,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,MAAM,MAAM,qBAAqB,CAAC,CAAC,IAAI;IACrC,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC;IACtC,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,gBAAgB,CAAC,CAAC,IAAI,CAChC,KAAK,EAAE,qBAAqB,CAAC,CAAC,CAAC,KAC5B,GAAG,CAAC,OAAO,CAAC;AAEjB,wBAAgB,QAAQ,CAAC,CAAC,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CA6DhE;yBA7De,QAAQ"}
+{"version":3,"file":"TreeItem.d.ts","sourceRoot":"","sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/TreeItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,iBAAiB,CAAC;AAEzB,MAAM,WAAW,aAAa,CAAC,CAAC;IAC9B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC;IAC3C,UAAU,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC;IAC7C,UAAU,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,MAAM,qBAAqB,CAAC,CAAC,IAAI;IACrC,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC;IACtC,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,gBAAgB,CAAC,CAAC,IAAI,CAChC,KAAK,EAAE,qBAAqB,CAAC,CAAC,CAAC,KAC5B,GAAG,CAAC,OAAO,CAAC;AAEjB,wBAAgB,QAAQ,CAAC,CAAC,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CAmEhE;yBAnEe,QAAQ"}

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

@@ -16,8 +16,8 @@ export function TreeItem(props) {
     wrapperRef = null,
     renderItem,
     item,
-    childCount,
-    style
+    style,
+    top
   } = props;
   var depthMarkers = useMemo(() => withDepthMarkers ? Array(depth).fill(0).map((_, i) => /*#__PURE__*/_jsx("span", {
     className: "depth-line",
@@ -28,9 +28,12 @@ export function TreeItem(props) {
     clone,
     value,
     item,
-    childCount,
     handleProps
-  }), [dragRef, clone, value, item, childCount, handleProps]);
+  }), [dragRef, clone, value, item, handleProps]);
+  var wrapperStyle = useMemo(() => ({
+    top,
+    position: 'absolute'
+  }), [top]);
   return /*#__PURE__*/_jsxs("li", {
     className: classNames('item-wrapper', {
       clone,
@@ -38,7 +41,9 @@ export function TreeItem(props) {
       disableInteraction
     }),
     "data-id": item.id,
+    "data-index": item.index,
     ref: wrapperRef,
+    style: wrapperStyle,
     children: [!clone && withDepthMarkers && depthMarkers, renderItem(renderItemProps)]
   }, value);
 }

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

@@ -1 +1 @@
-{"version":3,"file":"TreeItem.js","names":["React","useMemo","classNames","jsx","_jsx","jsxs","_jsxs","TreeItem","props","clone","depth","withDepthMarkers","disableInteraction","ghost","handleProps","value","dragRef","wrapperRef","renderItem","item","childCount","style","depthMarkers","Array","fill","map","_","i","className","concat","renderItemProps","ref","id","children","displayName"],"sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/TreeItem.tsx"],"sourcesContent":["/* eslint-disable react/jsx-props-no-spreading */\nimport React, { useMemo } from 'react';\nimport classNames from 'classnames';\nimport type { FlattenedItem } from './types';\nimport './TreeItem.scss';\n\nexport interface TreeItemProps<T> {\n  childCount?: number;\n  clone?: boolean;\n  depth: number;\n  withDepthMarkers?: boolean;\n  disableInteraction?: boolean;\n  ghost?: boolean;\n  handleProps?: Record<string, unknown>;\n  value: string;\n  item: FlattenedItem<T>;\n  dragRef?: React.Ref<HTMLDivElement> | null;\n  wrapperRef?: React.Ref<HTMLLIElement> | null;\n  renderItem: TreeItemRenderFn<T>;\n  /**\n   * Styles from dnd-kit to transform the depth lines\n   */\n  style?: React.CSSProperties;\n}\n\nexport type TreeItemRenderFnProps<T> = {\n  ref: React.Ref<HTMLDivElement> | null;\n  clone: boolean;\n  childCount?: number;\n  value: string;\n  item: FlattenedItem<T>;\n  handleProps?: Record<string, unknown>;\n};\n\nexport type TreeItemRenderFn<T> = (\n  props: TreeItemRenderFnProps<T>\n) => JSX.Element;\n\nexport function TreeItem<T>(props: TreeItemProps<T>): JSX.Element {\n  const {\n    clone = false,\n    depth,\n    withDepthMarkers = true,\n    disableInteraction = false,\n    ghost = false,\n    handleProps,\n    value,\n    dragRef = null,\n    wrapperRef = null,\n    renderItem,\n    item,\n    childCount,\n    style,\n  } = props;\n\n  const depthMarkers = useMemo(\n    () =>\n      withDepthMarkers\n        ? Array(depth)\n            .fill(0)\n            .map((_, i) => (\n              <span\n                // eslint-disable-next-line react/no-array-index-key\n                key={`depth-line-${i}`}\n                className=\"depth-line\"\n                style={style}\n              />\n            ))\n        : null,\n    [depth, style, withDepthMarkers]\n  );\n\n  const renderItemProps = useMemo(\n    () => ({\n      ref: dragRef,\n      clone,\n      value,\n      item,\n      childCount,\n      handleProps,\n    }),\n    [dragRef, clone, value, item, childCount, handleProps]\n  );\n\n  return (\n    <li\n      key={value}\n      className={classNames('item-wrapper', {\n        clone,\n        ghost,\n        disableInteraction,\n      })}\n      data-id={item.id}\n      ref={wrapperRef}\n    >\n      {!clone && withDepthMarkers && depthMarkers}\n      {renderItem(renderItemProps)}\n    </li>\n  );\n}\n\nTreeItem.displayName = 'TreeItem';\n"],"mappings":"AAAA;AACA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,OAAOC,UAAU,MAAM,YAAY;AAAC;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAoCpC,OAAO,SAASC,QAAQA,CAAIC,KAAuB,EAAe;EAChE,IAAM;IACJC,KAAK,GAAG,KAAK;IACbC,KAAK;IACLC,gBAAgB,GAAG,IAAI;IACvBC,kBAAkB,GAAG,KAAK;IAC1BC,KAAK,GAAG,KAAK;IACbC,WAAW;IACXC,KAAK;IACLC,OAAO,GAAG,IAAI;IACdC,UAAU,GAAG,IAAI;IACjBC,UAAU;IACVC,IAAI;IACJC,UAAU;IACVC;EACF,CAAC,GAAGb,KAAK;EAET,IAAMc,YAAY,GAAGrB,OAAO,CAC1B,MACEU,gBAAgB,GACZY,KAAK,CAACb,KAAK,CAAC,CACTc,IAAI,CAAC,CAAC,CAAC,CACPC,GAAG,CAAC,CAACC,CAAC,EAAEC,CAAC,kBACRvB,IAAA;IAGEwB,SAAS,EAAC,YAAY;IACtBP,KAAK,EAAEA;EAAM,iBAAAQ,MAAA,CAFMF,CAAC,CAGrB,CACF,CAAC,GACJ,IAAI,EACV,CAACjB,KAAK,EAAEW,KAAK,EAAEV,gBAAgB,CACjC,CAAC;EAED,IAAMmB,eAAe,GAAG7B,OAAO,CAC7B,OAAO;IACL8B,GAAG,EAAEf,OAAO;IACZP,KAAK;IACLM,KAAK;IACLI,IAAI;IACJC,UAAU;IACVN;EACF,CAAC,CAAC,EACF,CAACE,OAAO,EAAEP,KAAK,EAAEM,KAAK,EAAEI,IAAI,EAAEC,UAAU,EAAEN,WAAW,CACvD,CAAC;EAED,oBACER,KAAA;IAEEsB,SAAS,EAAE1B,UAAU,CAAC,cAAc,EAAE;MACpCO,KAAK;MACLI,KAAK;MACLD;IACF,CAAC,CAAE;IACH,WAASO,IAAI,CAACa,EAAG;IACjBD,GAAG,EAAEd,UAAW;IAAAgB,QAAA,GAEf,CAACxB,KAAK,IAAIE,gBAAgB,IAAIW,YAAY,EAC1CJ,UAAU,CAACY,eAAe,CAAC;EAAA,GAVvBf,KAWH,CAAC;AAET;AAEAR,QAAQ,CAAC2B,WAAW,GAAG,UAAU","ignoreList":[]}
+{"version":3,"file":"TreeItem.js","names":["React","useMemo","classNames","jsx","_jsx","jsxs","_jsxs","TreeItem","props","clone","depth","withDepthMarkers","disableInteraction","ghost","handleProps","value","dragRef","wrapperRef","renderItem","item","style","top","depthMarkers","Array","fill","map","_","i","className","concat","renderItemProps","ref","wrapperStyle","position","id","index","children","displayName"],"sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/TreeItem.tsx"],"sourcesContent":["/* eslint-disable react/jsx-props-no-spreading */\nimport React, { useMemo } from 'react';\nimport classNames from 'classnames';\nimport type { FlattenedItem } from './types';\nimport './TreeItem.scss';\n\nexport interface TreeItemProps<T> {\n  clone?: boolean;\n  depth: number;\n  withDepthMarkers?: boolean;\n  disableInteraction?: boolean;\n  ghost?: boolean;\n  handleProps?: Record<string, unknown>;\n  value: string;\n  item: FlattenedItem<T>;\n  dragRef?: React.Ref<HTMLDivElement> | null;\n  wrapperRef?: React.Ref<HTMLLIElement> | null;\n  renderItem: TreeItemRenderFn<T>;\n  /**\n   * Styles from dnd-kit to transform the depth lines\n   */\n  style?: React.CSSProperties;\n  top?: number;\n}\n\nexport type TreeItemRenderFnProps<T> = {\n  ref: React.Ref<HTMLDivElement> | null;\n  clone: boolean;\n  value: string;\n  item: FlattenedItem<T>;\n  handleProps?: Record<string, unknown>;\n};\n\nexport type TreeItemRenderFn<T> = (\n  props: TreeItemRenderFnProps<T>\n) => JSX.Element;\n\nexport function TreeItem<T>(props: TreeItemProps<T>): JSX.Element {\n  const {\n    clone = false,\n    depth,\n    withDepthMarkers = true,\n    disableInteraction = false,\n    ghost = false,\n    handleProps,\n    value,\n    dragRef = null,\n    wrapperRef = null,\n    renderItem,\n    item,\n    style,\n    top,\n  } = props;\n\n  const depthMarkers = useMemo(\n    () =>\n      withDepthMarkers\n        ? Array(depth)\n            .fill(0)\n            .map((_, i) => (\n              <span\n                // eslint-disable-next-line react/no-array-index-key\n                key={`depth-line-${i}`}\n                className=\"depth-line\"\n                style={style}\n              />\n            ))\n        : null,\n    [depth, style, withDepthMarkers]\n  );\n\n  const renderItemProps = useMemo(\n    () => ({\n      ref: dragRef,\n      clone,\n      value,\n      item,\n      handleProps,\n    }),\n    [dragRef, clone, value, item, handleProps]\n  );\n\n  const wrapperStyle = useMemo(\n    () => ({ top, position: 'absolute' as const }),\n    [top]\n  );\n\n  return (\n    <li\n      key={value}\n      className={classNames('item-wrapper', {\n        clone,\n        ghost,\n        disableInteraction,\n      })}\n      data-id={item.id}\n      data-index={item.index}\n      ref={wrapperRef}\n      style={wrapperStyle}\n    >\n      {!clone && withDepthMarkers && depthMarkers}\n      {renderItem(renderItemProps)}\n    </li>\n  );\n}\n\nTreeItem.displayName = 'TreeItem';\n"],"mappings":"AAAA;AACA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,OAAOC,UAAU,MAAM,YAAY;AAAC;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAmCpC,OAAO,SAASC,QAAQA,CAAIC,KAAuB,EAAe;EAChE,IAAM;IACJC,KAAK,GAAG,KAAK;IACbC,KAAK;IACLC,gBAAgB,GAAG,IAAI;IACvBC,kBAAkB,GAAG,KAAK;IAC1BC,KAAK,GAAG,KAAK;IACbC,WAAW;IACXC,KAAK;IACLC,OAAO,GAAG,IAAI;IACdC,UAAU,GAAG,IAAI;IACjBC,UAAU;IACVC,IAAI;IACJC,KAAK;IACLC;EACF,CAAC,GAAGb,KAAK;EAET,IAAMc,YAAY,GAAGrB,OAAO,CAC1B,MACEU,gBAAgB,GACZY,KAAK,CAACb,KAAK,CAAC,CACTc,IAAI,CAAC,CAAC,CAAC,CACPC,GAAG,CAAC,CAACC,CAAC,EAAEC,CAAC,kBACRvB,IAAA;IAGEwB,SAAS,EAAC,YAAY;IACtBR,KAAK,EAAEA;EAAM,iBAAAS,MAAA,CAFMF,CAAC,CAGrB,CACF,CAAC,GACJ,IAAI,EACV,CAACjB,KAAK,EAAEU,KAAK,EAAET,gBAAgB,CACjC,CAAC;EAED,IAAMmB,eAAe,GAAG7B,OAAO,CAC7B,OAAO;IACL8B,GAAG,EAAEf,OAAO;IACZP,KAAK;IACLM,KAAK;IACLI,IAAI;IACJL;EACF,CAAC,CAAC,EACF,CAACE,OAAO,EAAEP,KAAK,EAAEM,KAAK,EAAEI,IAAI,EAAEL,WAAW,CAC3C,CAAC;EAED,IAAMkB,YAAY,GAAG/B,OAAO,CAC1B,OAAO;IAAEoB,GAAG;IAAEY,QAAQ,EAAE;EAAoB,CAAC,CAAC,EAC9C,CAACZ,GAAG,CACN,CAAC;EAED,oBACEf,KAAA;IAEEsB,SAAS,EAAE1B,UAAU,CAAC,cAAc,EAAE;MACpCO,KAAK;MACLI,KAAK;MACLD;IACF,CAAC,CAAE;IACH,WAASO,IAAI,CAACe,EAAG;IACjB,cAAYf,IAAI,CAACgB,KAAM;IACvBJ,GAAG,EAAEd,UAAW;IAChBG,KAAK,EAAEY,YAAa;IAAAI,QAAA,GAEnB,CAAC3B,KAAK,IAAIE,gBAAgB,IAAIW,YAAY,EAC1CJ,UAAU,CAACY,eAAe,CAAC;EAAA,GAZvBf,KAaH,CAAC;AAET;AAEAR,QAAQ,CAAC8B,WAAW,GAAG,UAAU","ignoreList":[]}

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

@@ -15,7 +15,7 @@ export type FlattenedItem<T = undefined> = TreeItem<T> & {
 };
 export declare function isFlattenedTreeItem<T>(item: TreeItem<T>): item is FlattenedItem<T>;
 export type SensorContext = MutableRefObject<{
-    items: FlattenedItem[];
+    items: readonly FlattenedItem[];
     offset: number;
 }>;
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAE9C,MAAM,MAAM,QAAQ,CAAC,CAAC,GAAG,SAAS,IAAI;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;CACnB,GAAG,CAAC,CAAC,SAAS,SAAS,GAEpB,EAAE,GACF;IACE,IAAI,EAAE,CAAC,CAAC;CACT,CAAC,CAAC;AAEP,MAAM,MAAM,SAAS,CAAC,CAAC,GAAG,SAAS,IAAI,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;AACrD,MAAM,MAAM,iBAAiB,CAAC,CAAC,GAAG,SAAS,IAAI,SAAS,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;AAEtE,MAAM,MAAM,aAAa,CAAC,CAAC,GAAG,SAAS,IAAI,QAAQ,CAAC,CAAC,CAAC,GAAG;IACvD,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,CAAC,EACnC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,GAChB,IAAI,IAAI,aAAa,CAAC,CAAC,CAAC,CAE1B;AAED,MAAM,MAAM,aAAa,GAAG,gBAAgB,CAAC;IAC3C,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAE9C,MAAM,MAAM,QAAQ,CAAC,CAAC,GAAG,SAAS,IAAI;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;CACnB,GAAG,CAAC,CAAC,SAAS,SAAS,GAEpB,EAAE,GACF;IACE,IAAI,EAAE,CAAC,CAAC;CACT,CAAC,CAAC;AAEP,MAAM,MAAM,SAAS,CAAC,CAAC,GAAG,SAAS,IAAI,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;AACrD,MAAM,MAAM,iBAAiB,CAAC,CAAC,GAAG,SAAS,IAAI,SAAS,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;AAEtE,MAAM,MAAM,aAAa,CAAC,CAAC,GAAG,SAAS,IAAI,QAAQ,CAAC,CAAC,CAAC,GAAG;IACvD,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,CAAC,EACnC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,GAChB,IAAI,IAAI,aAAa,CAAC,CAAC,CAAC,CAE1B;AAED,MAAM,MAAM,aAAa,GAAG,gBAAgB,CAAC;IAC3C,KAAK,EAAE,SAAS,aAAa,EAAE,CAAC;IAChC,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":["isFlattenedTreeItem","item","parentId","undefined"],"sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/types.ts"],"sourcesContent":["import type { MutableRefObject } from 'react';\n\nexport type TreeItem<T = undefined> = {\n  id: string;\n  children: TreeItem<T>[];\n  selected: boolean;\n} & (T extends undefined\n  ? // eslint-disable-next-line @typescript-eslint/ban-types\n    {}\n  : {\n      data: T;\n    });\n\nexport type TreeItems<T = undefined> = TreeItem<T>[];\nexport type ReadonlyTreeItems<T = undefined> = readonly TreeItem<T>[];\n\nexport type FlattenedItem<T = undefined> = TreeItem<T> & {\n  parentId: string | null;\n  depth: number;\n  index: number;\n};\n\nexport function isFlattenedTreeItem<T>(\n  item: TreeItem<T>\n): item is FlattenedItem<T> {\n  return (item as FlattenedItem<T>).parentId !== undefined;\n}\n\nexport type SensorContext = MutableRefObject<{\n  items: FlattenedItem[];\n  offset: number;\n}>;\n"],"mappings":"AAsBA,OAAO,SAASA,mBAAmBA,CACjCC,IAAiB,EACS;EAC1B,OAAQA,IAAI,CAAsBC,QAAQ,KAAKC,SAAS;AAC1D","ignoreList":[]}
+{"version":3,"file":"types.js","names":["isFlattenedTreeItem","item","parentId","undefined"],"sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/types.ts"],"sourcesContent":["import type { MutableRefObject } from 'react';\n\nexport type TreeItem<T = undefined> = {\n  id: string;\n  children: TreeItem<T>[];\n  selected: boolean;\n} & (T extends undefined\n  ? // eslint-disable-next-line @typescript-eslint/ban-types\n    {}\n  : {\n      data: T;\n    });\n\nexport type TreeItems<T = undefined> = TreeItem<T>[];\nexport type ReadonlyTreeItems<T = undefined> = readonly TreeItem<T>[];\n\nexport type FlattenedItem<T = undefined> = TreeItem<T> & {\n  parentId: string | null;\n  depth: number;\n  index: number;\n};\n\nexport function isFlattenedTreeItem<T>(\n  item: TreeItem<T>\n): item is FlattenedItem<T> {\n  return (item as FlattenedItem<T>).parentId !== undefined;\n}\n\nexport type SensorContext = MutableRefObject<{\n  items: readonly FlattenedItem[];\n  offset: number;\n}>;\n"],"mappings":"AAsBA,OAAO,SAASA,mBAAmBA,CACjCC,IAAiB,EACS;EAC1B,OAAQA,IAAI,CAAsBC,QAAQ,KAAKC,SAAS;AAC1D","ignoreList":[]}

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

@@ -22,7 +22,7 @@ export declare function getTreeItems(columns: readonly dh.Column[], movedColumns
  * @returns The projected position and depth if the item were to be dropped.
  *          Null if the projection could not be calculated.
  */
-export declare function getProjection(items: FlattenedItem[], activeId: string, overId: string, dragOffset: number, indentationWidth: number): {
+export declare function getProjection(items: readonly FlattenedItem[], activeId: string, overId: string, dragOffset: number, indentationWidth: number): {
     depth: number;
     maxDepth: number;
     minDepth: number;

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

@@ -1 +1 @@
-{"version":3,"file":"utilities.d.ts","sourceRoot":"","sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/utilities.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAEL,KAAK,UAAU,EACf,KAAK,aAAa,EACnB,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,iBAAiB,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,aAAa,EAClB,KAAK,QAAQ,EACd,MAAM,SAAS,CAAC;AAajB,MAAM,WAAW,oBAAoB;IACnC,UAAU,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC9B,YAAY,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,iBAAiB,CAAC;CAC3B;AAED,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC,oBAAoB,CAAC,CAAC;AAE9D,MAAM,MAAM,yBAAyB,GAAG,aAAa,CAAC,oBAAoB,CAAC,CAAC;AAsE5E,wBAAgB,YAAY,CAC1B,OAAO,EAAE,SAAS,EAAE,CAAC,MAAM,EAAE,EAC7B,YAAY,EAAE,SAAS,aAAa,EAAE,EACtC,kBAAkB,EAAE,SAAS,iBAAiB,EAAE,EAChD,aAAa,EAAE,SAAS,UAAU,EAAE,EACpC,aAAa,EAAE,SAAS,MAAM,EAAE,EAChC,iBAAiB,EAAE,OAAO,GACzB,gBAAgB,EAAE,CAwCpB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAC3B,KAAK,EAAE,aAAa,EAAE,EACtB,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,MAAM,EAClB,gBAAgB,EAAE,MAAM,GACvB;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB,GAAG,IAAI,CA+CP;AAiDD;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAC3B,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAC1B,aAAa,CAAC,CAAC,CAAC,EAAE,CAMpB;AAED;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAC1B,KAAK,EAAE,iBAAiB,EACxB,MAAM,EAAE,MAAM,GACb,QAAQ,GAAG,SAAS,CAmBtB;AAYD,wBAAgB,aAAa,CAAC,KAAK,EAAE,iBAAiB,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAI1E;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EAChC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,EACzB,GAAG,EAAE,MAAM,EAAE,GACZ,aAAa,CAAC,CAAC,CAAC,EAAE,CAapB"}
+{"version":3,"file":"utilities.d.ts","sourceRoot":"","sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/utilities.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAIL,KAAK,UAAU,EACf,KAAK,aAAa,EACnB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,KAAK,iBAAiB,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,aAAa,EAClB,KAAK,QAAQ,EACd,MAAM,SAAS,CAAC;AAajB,MAAM,WAAW,oBAAoB;IACnC,UAAU,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC9B,YAAY,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,iBAAiB,CAAC;CAC3B;AAED,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC,oBAAoB,CAAC,CAAC;AAE9D,MAAM,MAAM,yBAAyB,GAAG,aAAa,CAAC,oBAAoB,CAAC,CAAC;AAyE5E,wBAAgB,YAAY,CAC1B,OAAO,EAAE,SAAS,EAAE,CAAC,MAAM,EAAE,EAC7B,YAAY,EAAE,SAAS,aAAa,EAAE,EACtC,kBAAkB,EAAE,SAAS,iBAAiB,EAAE,EAChD,aAAa,EAAE,SAAS,UAAU,EAAE,EACpC,aAAa,EAAE,SAAS,MAAM,EAAE,EAChC,iBAAiB,EAAE,OAAO,GACzB,gBAAgB,EAAE,CAuEpB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAC3B,KAAK,EAAE,SAAS,aAAa,EAAE,EAC/B,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,MAAM,EAClB,gBAAgB,EAAE,MAAM,GACvB;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB,GAAG,IAAI,CAmDP;AAiDD;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAC3B,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAC1B,aAAa,CAAC,CAAC,CAAC,EAAE,CAMpB;AAED;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAC1B,KAAK,EAAE,iBAAiB,EACxB,MAAM,EAAE,MAAM,GACb,QAAQ,GAAG,SAAS,CAmBtB;AAYD,wBAAgB,aAAa,CAAC,KAAK,EAAE,iBAAiB,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAI1E;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EAChC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,EACzB,GAAG,EAAE,MAAM,EAAE,GACZ,aAAa,CAAC,CAAC,CAAC,EAAE,CAapB"}

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

@@ -4,7 +4,8 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { arrayMove } from '@dnd-kit/sortable';
-import { GridUtils } from '@deephaven/grid';
+import { GridRange, GridUtils } from '@deephaven/grid';
+import { assertNotNull } from '@deephaven/utils';
 import { isFlattenedTreeItem } from "./types.js";
 /**
  * Gets the depth of an item dragged with a given x-axis offset
@@ -16,9 +17,13 @@ import { isFlattenedTreeItem } from "./types.js";
 function getDragDepth(offset, indentationWidth) {
   return Math.round(offset / indentationWidth);
 }
-function getTreeItem(columns, movedColumns, columnHeaderGroupMap, name, hiddenColumnSet, selectedItems, showHiddenColumns) {
-  var modelIndex = columns.findIndex(col => col.name === name);
-  if (modelIndex === -1) {
+function getTreeItem(nameToIndexes, movedColumns, columnHeaderGroupMap, name, hiddenColumnSet, selectedItems, showHiddenColumns) {
+  var _nameToIndexes$get;
+  var {
+    modelIndex,
+    visibleIndex
+  } = (_nameToIndexes$get = nameToIndexes.get(name)) !== null && _nameToIndexes$get !== void 0 ? _nameToIndexes$get : {};
+  if (modelIndex === undefined || visibleIndex === undefined) {
     var group = columnHeaderGroupMap.get(name);
     if (group == null) {
       throw new Error("Column or header group not found: ".concat(name));
@@ -27,7 +32,7 @@ function getTreeItem(columns, movedColumns, columnHeaderGroupMap, name, hiddenCo
     return {
       id: name,
       selected: selectedItems.has(name),
-      children: group.children.filter((_, i) => showHiddenColumns || !hiddenColumnSet.has(group.childIndexes[i])).map(childName => getTreeItem(columns, movedColumns, columnHeaderGroupMap, childName, hiddenColumnSet, selectedItems, showHiddenColumns)).sort((a, b) => {
+      children: group.children.filter((_, i) => showHiddenColumns || !hiddenColumnSet.has(group.childIndexes[i])).map(childName => getTreeItem(nameToIndexes, movedColumns, columnHeaderGroupMap, childName, hiddenColumnSet, selectedItems, showHiddenColumns)).sort((a, b) => {
         var aVal = Array.isArray(a.data.visibleIndex) ? a.data.visibleIndex[0] : a.data.visibleIndex;
         var bVal = Array.isArray(b.data.visibleIndex) ? b.data.visibleIndex[0] : b.data.visibleIndex;
         return aVal - bVal;
@@ -46,7 +51,7 @@ function getTreeItem(columns, movedColumns, columnHeaderGroupMap, name, hiddenCo
     selected: selectedItems.has(name),
     data: {
       modelIndex,
-      visibleIndex: GridUtils.getVisibleIndex(modelIndex, movedColumns),
+      visibleIndex,
       isVisible: !hiddenColumnSet.has(modelIndex)
     }
   };
@@ -57,19 +62,40 @@ export function getTreeItems(columns, movedColumns, columnHeaderGroups, hiddenCo
   var groupMap = new Map(columnHeaderGroups.map(group => [group.name, group]));
   var hiddenColumnSet = new Set(hiddenColumns);
   var visibleIndex = 0;
+  var modelRanges = GridRange.boundedRanges(GridUtils.getModelRange(GridRange.makeNormalized(0, 0, columns.length - 1, 0), movedColumns), columns.length, 1);
+  var mapEntries = modelRanges.flatMap(range => {
+    var {
+      startColumn,
+      endColumn
+    } = range;
+    var rangeLength = endColumn - startColumn + 1;
+    var entries = new Array(rangeLength).fill(0).map((_, i) => [visibleIndex + i, startColumn + i]);
+    visibleIndex += rangeLength;
+    return entries;
+  });
+  var visibleToModelMap = new Map(mapEntries);
+  var nameToIndexes = new Map([...visibleToModelMap.entries()].map(_ref => {
+    var [v, m] = _ref;
+    return [columns[m].name, {
+      visibleIndex: v,
+      modelIndex: m
+    }];
+  }));
+  visibleIndex = 0;
   var _loop = function _loop() {
-    var modelIndex = GridUtils.getModelIndex(visibleIndex, movedColumns);
+    var modelIndex = visibleToModelMap.get(visibleIndex);
+    assertNotNull(modelIndex);
     var columnName = columns[modelIndex].name;
-    var group = columnHeaderGroups.find(_ref => {
+    var group = columnHeaderGroups.find(_ref2 => {
       var {
         children
-      } = _ref;
+      } = _ref2;
       return children.includes(columnName);
     });
     while (group !== undefined && group.parent !== undefined) {
       group = groupMap.get(group.parent);
     }
-    var item = getTreeItem(columns, movedColumns, groupMap, group ? group.name : columnName, hiddenColumnSet, selectedItemsSet, showHiddenColumns);
+    var item = getTreeItem(nameToIndexes, movedColumns, groupMap, group ? group.name : columnName, hiddenColumnSet, selectedItemsSet, showHiddenColumns);
     items.push(item);
     if (Array.isArray(item.data.visibleIndex)) {
       visibleIndex += item.data.visibleIndex[1] - item.data.visibleIndex[0] + 1;
@@ -95,16 +121,16 @@ export function getTreeItems(columns, movedColumns, columnHeaderGroups, hiddenCo
  *          Null if the projection could not be calculated.
  */
 export function getProjection(items, activeId, overId, dragOffset, indentationWidth) {
-  var overItemIndex = items.findIndex(_ref2 => {
+  var overItemIndex = items.findIndex(_ref3 => {
     var {
       id
-    } = _ref2;
+    } = _ref3;
     return id === overId;
   });
-  var activeItemIndex = items.findIndex(_ref3 => {
+  var activeItemIndex = items.findIndex(_ref4 => {
     var {
       id
-    } = _ref3;
+    } = _ref4;
     return id === activeId;
   });
   if (overItemIndex === -1 || activeItemIndex === -1) {
@@ -150,18 +176,18 @@ export function getProjection(items, activeId, overId, dragOffset, indentationWi
     return newParent !== null && newParent !== void 0 ? newParent : null;
   }
 }
-function getMaxDepth(_ref4) {
+function getMaxDepth(_ref5) {
   var _previousItem$depth, _nextItem$depth;
   var {
     previousItem,
     nextItem
-  } = _ref4;
+  } = _ref5;
   return Math.max((_previousItem$depth = previousItem === null || previousItem === void 0 ? void 0 : previousItem.depth) !== null && _previousItem$depth !== void 0 ? _previousItem$depth : 0, (_nextItem$depth = nextItem === null || nextItem === void 0 ? void 0 : nextItem.depth) !== null && _nextItem$depth !== void 0 ? _nextItem$depth : 0);
 }
-function getMinDepth(_ref5) {
+function getMinDepth(_ref6) {
   var {
     nextItem
-  } = _ref5;
+  } = _ref6;
   if (nextItem) {
     return nextItem.depth;
   }
@@ -232,10 +258,10 @@ export function findItemDeep(items, itemId) {
 }
 function countChildren(items) {
   var count = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-  return items.reduce((acc, _ref6) => {
+  return items.reduce((acc, _ref7) => {
     var {
       children
-    } = _ref6;
+    } = _ref7;
     if (children.length) {
       return countChildren(children, acc + 1);
     }