@deephaven/iris-grid 1.8.1-beta.9 → 1.9.0

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

@@ -0,0 +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":";;;;;AAAA,OAAOA,KAAK,IACVC,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACH,OAAO;AACd,SAASC,YAAY,QAAQ,WAAW;AACxC,SACEC,UAAU,EACVC,aAAa,EACbC,cAAc,EAEdC,SAAS,EACTC,UAAU,EAKVC,iBAAiB,EACjBC,WAAW,EAEXC,oBAAoB,QAEf,eAAe;AACtB,SACEC,eAAe,EACfC,2BAA2B,QACtB,mBAAmB;AAC1B,SAASC,GAAG,QAAQ,oBAAoB;AAAC,SAChCC,WAAW,EAAEC,aAAa,EAAEC,aAAa;AAAA,SAMzCC,+BAA+B;AAAA,OACjCC,4BAA4B;AAAA,SAC1BC,QAAQ;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEjB,IAAMC,SAAS,GAAG;EAChBC,SAAS,EAAE;IACTC,QAAQ,EAAElB,iBAAiB,CAACmB;EAC9B;AACF,CAAC;AAED,IAAMC,UAAU,GAAG;EACjBC,oBAAoB,EAAE;IACpBC,QAAQ,EAAE;EACZ;AACF,CAAC;;AAED;AACA,IAAMC,kBAAkB,GAAG;EAAEC,aAAa,EAAE;AAAO,CAAU;AAE7D,IAAMC,mBAAkC,GAAG;EACzCC,SAASA,CAAAC,IAAA,EAAgB;IAAA,IAAf;MAAEC;IAAU,CAAC,GAAAD,IAAA;IACrB,OAAO,CACL;MAAEE,OAAO,EAAE,CAAC;MAAED,SAAS,EAAEvB,GAAG,CAACyB,SAAS,CAACC,QAAQ,CAACH,SAAS,CAACI,OAAO;IAAE,CAAC,EACpE;MAAEH,OAAO,EAAE,CAAC;MAAED,SAAS,EAAEvB,GAAG,CAACyB,SAAS,CAACC,QAAQ,CAACH,SAAS,CAACK,KAAK;IAAE,CAAC,CACnE;EACH,CAAC;EACDC,MAAM,EAAE,UAAU;EAClBC,WAAWA,CAAAC,KAAA,EAAa;IAAA,IAAZ;MAAEC;IAAO,CAAC,GAAAD,KAAA;IACpBC,MAAM,CAACC,IAAI,CAACC,OAAO,CAAC,CAAC;MAAEV,OAAO,EAAE;IAAE,CAAC,EAAE;MAAEA,OAAO,EAAE;IAAE,CAAC,CAAC,EAAE;MACpDW,QAAQ,EAAEtC,oBAAoB,CAACsC,QAAQ;MACvCN,MAAM,EAAEhC,oBAAoB,CAACgC;IAC/B,CAAC,CAAC;EACJ;AACF,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASO,cAAcA,CAACC,IAA6B,EAKnD;EAAA,IAAAC,qBAAA;EACA,IACEF,cAAc,CAACG,OAAO,IAAI,IAAI,IAC9BF,IAAI,CAACG,cAAc,IACnBH,IAAI,CAACI,cAAc,YAAYC,YAAY,EAC3C;IACAN,cAAc,CAACG,OAAO,GACpBI,IAAI,CAACC,KAAK,CACR,CAACP,IAAI,CAACI,cAAc,CAACI,OAAO,GAAGR,IAAI,CAACG,cAAc,CAACM,GAAG,IACpDT,IAAI,CAACG,cAAc,CAACO,MACxB,CAAC,GAAGV,IAAI,CAACG,cAAc,CAACO,MAAM;EAClC;EAEA,IAAI,CAACV,IAAI,CAACG,cAAc,EAAE;IACxBJ,cAAc,CAACG,OAAO,GAAG,IAAI;EAC/B;EAEA,OAAAS,aAAA,CAAAA,aAAA,KACKX,IAAI,CAACd,SAAS;IACjB0B,CAAC,EAAEZ,IAAI,CAACd,SAAS,CAAC0B,CAAC,KAAAX,qBAAA,GAAIF,cAAc,CAACG,OAAO,cAAAD,qBAAA,cAAAA,qBAAA,GAAI,CAAC;EAAC;AAEvD;;AAEA;AACA;AACA;AACA;AACA;AACAF,cAAc,CAACG,OAAO,GAAG,IAAqB;AAU9C,eAAe,SAASW,sBAAsBA,CAAAC,KAAA,EAOpB;EAAA,IAPwB;IAChDC,KAAK;IACLC,gBAAgB,GAAG,EAAE;IACrBC,WAAW;IACXC,SAAS;IACTC,QAAQ;IACRC;EACQ,CAAC,GAAAN,KAAA;EACT,IAAM,CAACO,QAAQ,EAAEC,WAAW,CAAC,GAAGvE,QAAQ,CAAgB,IAAI,CAAC;EAC7D,IAAM,CAACwE,MAAM,EAAEC,SAAS,CAAC,GAAGzE,QAAQ,CAAgB,IAAI,CAAC;EACzD,IAAM,CAAC0E,UAAU,EAAEC,aAAa,CAAC,GAAG3E,QAAQ,CAAC,CAAC,CAAC;EAE/C,IAAM4E,cAAc,GAAG9E,OAAO,CAAC,MAAM;IACnC,IAAM+E,aAAa,GAAGhE,WAAW,CAACmD,KAAK,CAAC;IAExC,IAAIM,QAAQ,IAAI,IAAI,EAAE;MACpB,OAAOO,aAAa,CAACC,MAAM,CACzBC,KAAA;QAAA,IAAC;UAAEC,EAAE;UAAEC;QAAS,CAAC,GAAAF,KAAA;QAAA,OAAKC,EAAE,KAAKV,QAAQ,IAAI,CAACW,QAAQ;MAAA,CACpD,CAAC;IACH;IAEA,OAAOJ,aAAa;EACtB,CAAC,EAAE,CAACP,QAAQ,EAAEN,KAAK,CAAC,CAAC;EAErB,IAAMkB,UAAU,GACdZ,QAAQ,IAAI,IAAI,GAAGM,cAAc,CAACO,IAAI,CAACC,KAAA;IAAA,IAAC;MAAEJ;IAAG,CAAC,GAAAI,KAAA;IAAA,OAAKJ,EAAE,KAAKV,QAAQ;EAAA,EAAC,GAAG,IAAI;EAE5E,IAAMe,SAAS,GACbf,QAAQ,IAAI,IAAI,IAAIE,MAAM,IAAI,IAAI,GAC9BzD,aAAa,CACX6D,cAAc,EACdN,QAAQ,EACRE,MAAM,EACNE,UAAU,EACVT,gBACF,CAAC,GACD,IAAI;EACV,IAAMqB,aAA4B,GAAGvF,MAAM,CAAC;IAC1CiE,KAAK,EAAEY,cAAc;IACrBW,MAAM,EAAEb;EACV,CAAC,CAAC;EACF,IAAMc,eAAe,GAAG1F,OAAO,CAC7B,OACG;IACC2F,gBAAgB,EAAEzE,+BAA+B,CAC/CsE,aAAa,EACbrB,gBACF,CAAC;IACDyB,aAAa,EAAE;MACb;MACA;MACAC,KAAK,EAAE,CAAC,OAAO,CAAC;MAChBC,MAAM,EAAE,CAAC,QAAQ,CAAC;MAClBC,GAAG,EAAE,CAAC,OAAO;IACf;EACF,CAAC,CAAiC,EACpC,CAAC5B,gBAAgB,CACnB,CAAC;EAED,IAAM6B,OAAO,GAAGxF,UAAU,CACxBD,SAAS,CAACY,4BAA4B,EAAEU,UAAU,CAAC,EACnDtB,SAAS,CAACD,cAAc,EAAEoF,eAAe,CAC3C,CAAC;EAED,IAAMO,SAAS,GAAGjG,OAAO,CACvB,MAAM8E,cAAc,CAACoB,GAAG,CAACC,KAAA;IAAA,IAAC;MAAEjB;IAAG,CAAC,GAAAiB,KAAA;IAAA,OAAKjB,EAAE;EAAA,EAAC,EACxC,CAACJ,cAAc,CACjB,CAAC;EAED/E,SAAS,CAAC,MAAM;IACdyF,aAAa,CAACY,OAAO,GAAG;MACtBlC,KAAK,EAAEY,cAAc;MACrBW,MAAM,EAAEb;IACV,CAAC;EACH,CAAC,EAAE,CAACE,cAAc,EAAEF,UAAU,CAAC,CAAC;EAEhC,IAAMyB,eAAe,GAAGvG,WAAW,CAChCwG,KAAqB,IAAK;IACzB,IAAM;MACJxD,MAAM,EAAE;QAAEoC,EAAE,EAAEqB;MAAY;IAC5B,CAAC,GAAGD,KAAK;IACT7B,WAAW,CAAC8B,WAAqB,CAAC;IAClC5B,SAAS,CAAC4B,WAAqB,CAAC;IAChCnC,WAAW,aAAXA,WAAW,eAAXA,WAAW,CAAGmC,WAAW,EAAYD,KAAK,CAAC;IAE3CE,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,WAAW,CAAC,QAAQ,EAAE,UAAU,CAAC;EACvD,CAAC,EACD,CAACvC,WAAW,CACd,CAAC;EAED,IAAMwC,cAAc,GAAG9G,WAAW,CAAC+G,KAAA,IAA8B;IAAA,IAA7B;MAAEC;IAAqB,CAAC,GAAAD,KAAA;IAC1DhC,aAAa,CAACiC,KAAK,CAACC,CAAC,CAAC;EACxB,CAAC,EAAE,EAAE,CAAC;EAEN,IAAMC,cAAc,GAAGlH,WAAW,CAACmH,KAAA,IAA6B;IAAA,IAAAC,KAAA;IAAA,IAA5B;MAAEC;IAAoB,CAAC,GAAAF,KAAA;IACzDtC,SAAS,EAAAuC,KAAA,GAAEC,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEjC,EAAE,cAAAgC,KAAA,cAAAA,KAAA,GAAe,IAAI,CAAC;EACzC,CAAC,EAAE,EAAE,CAAC;EAEN,IAAME,UAAU,GAAGtH,WAAW,CAAC,MAAM;IACnC6E,SAAS,CAAC,IAAI,CAAC;IACfF,WAAW,CAAC,IAAI,CAAC;IACjBI,aAAa,CAAC,CAAC,CAAC;IAEhB2B,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,WAAW,CAAC,QAAQ,EAAE,EAAE,CAAC;EAC/C,CAAC,EAAE,EAAE,CAAC;EAEN,IAAMU,aAAa,GAAGvH,WAAW,CAC/BwH,KAAA,IAAoC;IAAA,IAAnC;MAAExE,MAAM;MAAEqE;IAAmB,CAAC,GAAAG,KAAA;IAC7B,IAAI/B,SAAS,IAAI4B,IAAI,EAAE;MACrB,IAAM;QAAEI,KAAK;QAAEC;MAAS,CAAC,GAAGjC,SAAS;MAErC,IAAMkC,WAA+B,GAAGC,IAAI,CAACC,KAAK,CAChDD,IAAI,CAACE,SAAS,CAAC7G,WAAW,CAACmD,KAAK,CAAC,CACnC,CAAC;MACD,IAAM2D,SAAS,GAAGJ,WAAW,CAACK,SAAS,CAACC,KAAA;QAAA,IAAC;UAAE7C;QAAG,CAAC,GAAA6C,KAAA;QAAA,OAAK7C,EAAE,KAAKiC,IAAI,CAACjC,EAAE;MAAA,EAAC;MACnE,IAAM8C,WAAW,GAAGP,WAAW,CAACK,SAAS,CAACG,MAAA;QAAA,IAAC;UAAE/C;QAAG,CAAC,GAAA+C,MAAA;QAAA,OAAK/C,EAAE,KAAKpC,MAAM,CAACoC,EAAE;MAAA,EAAC;MACvE,IAAMgD,cAAc,GAAGT,WAAW,CAACO,WAAW,CAAC;MAE/CP,WAAW,CAACO,WAAW,CAAC,GAAAlE,aAAA,CAAAA,aAAA,KAAQoE,cAAc;QAAEX,KAAK;QAAEC;MAAQ,EAAE;MAEjEnD,SAAS,aAATA,SAAS,eAATA,SAAS,CAAG6D,cAAc,EAAApE,aAAA,CAAAA,aAAA,KACrB2D,WAAW,CAACI,SAAS,CAAC;QACzBL,QAAQ,EAAEjC,SAAS,CAACiC;MAAQ,EAC7B,CAAC;IACJ;IACAJ,UAAU,CAAC,CAAC;EACd,CAAC,EACD,CAAClD,KAAK,EAAEG,SAAS,EAAEkB,SAAS,EAAE6B,UAAU,CAC1C,CAAC;EAED,IAAMe,gBAAgB,GAAGrI,WAAW,CAAC,MAAM;IACzCsH,UAAU,CAAC,CAAC;EACd,CAAC,EAAE,CAACA,UAAU,CAAC,CAAC;EAEhB,oBACE9F,IAAA,CAAClB,UAAU;IACT4F,OAAO,EAAEA,OAAQ;IACjBoC,kBAAkB,EAAE/H,aAAc;IAClCgI,SAAS,EAAE5G,SAAU;IACrB2C,WAAW,EAAEiC,eAAgB;IAC7BiC,UAAU,EAAE1B,cAAe;IAC3B2B,UAAU,EAAEvB,cAAe;IAC3B3C,SAAS,EAAEgD,aAAc;IACzBmB,YAAY,EAAEL,gBAAiB;IAAA7D,QAAA,eAE/B9C,KAAA,CAACZ,eAAe;MAACsD,KAAK,EAAE+B,SAAU;MAACtE,QAAQ,EAAEd,2BAA4B;MAAAyD,QAAA,GACtEA,QAAQ,eACRnE,YAAY,cACXmB,IAAA,CAACZ,WAAW;QACV+H,aAAa,EAAEvG,mBAAoB;QACnCwG,SAAS,EAAE,CAACxF,cAAc,CAAE;QAC5ByF,SAAS,EAAC,0BAA0B;QACpCjC,KAAK,EAAE1E,kBAAmB;QAAAsC,QAAA,EAEzBE,QAAQ,IAAI,IAAI,IAAIY,UAAU,gBAC7B9D,IAAA,CAACF,QAAQ;UACPmG,KAAK,EAAEnC,UAAU,CAACmC,KAAM;UACxBqB,KAAK;UACLC,UAAU,EAAE7H,aAAa,CAACkD,KAAK,EAAEM,QAAQ,CAAC,GAAG,CAAE;UAC/CsE,KAAK,EAAEtE,QAAQ,CAAChC,QAAQ,CAAC,CAAE;UAC3B+B,UAAU,EAAEA,UAAW;UACvBwE,IAAI,EAAE3D;QAAW,CAClB,CAAC,GACA;MAAI,CACG,CAAC,EACdoB,QAAQ,CAACC,IACX,CAAC;IAAA,CACc;EAAC,CACR,CAAC;AAEjB","ignoreList":[]}

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

@@ -1,6 +1,7 @@
-import { type Props as TreeItemProps } from './TreeItem';
-export interface Props<T> extends Omit<TreeItemProps<T>, 'style'> {
+import { type TreeItemProps } from './TreeItem';
+interface SortableTreeItemProps<T> extends Omit<TreeItemProps<T>, 'style'> {
     id: string;
 }
-export declare function SortableTreeItem<T>({ id, depth, ...props }: Props<T>): JSX.Element;
+export declare function SortableTreeItem<T>({ id, depth, ...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,KAAK,IAAI,aAAa,EAAE,MAAM,YAAY,CAAC;AAEnE,MAAM,WAAW,KAAK,CAAC,CAAC,CAAE,SAAQ,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC;IAC/D,EAAE,EAAE,MAAM,CAAC;CACZ;AAOD,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,EAClC,EAAE,EACF,KAAK,EACL,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CA8CxB"}
+{"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"}

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

@@ -52,7 +52,8 @@ export function SortableTreeItem(_ref2) {
     depth: depth,
     ghost: isDragging,
     disableInteraction: isSorting,
-    handleProps: handleProps
+    handleProps: handleProps,
+    style: style
     // 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 Props as TreeItemProps } from './TreeItem';\n\nexport interface Props<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}: Props<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      // 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,EAIN;EAAA,IAJU;MAClCC,EAAE;MACFC;IAEQ,CAAC,GAAAF,KAAA;IADNG,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;IACb;EAAA,GACId,KAAK,CACV,CAAC;AAEN","ignoreList":[]}
+{"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":[]}

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

@@ -1,6 +1,7 @@
 /* stylelint-disable scss/at-import-no-partial-leading-underscore */
 /* stylelint-disable-next-line number-max-precision */
-.visibility-ordering-list .tree-item {
+.visibility-ordering-list .tree-item,
+.visibility-search-list .tree-item {
   position: relative;
   display: flex;
   gap: 0.25rem;
@@ -15,40 +16,49 @@
   border-radius: 4px;
   padding: 0 0.25rem;
 }
-.visibility-ordering-list .tree-item svg:not(.color-swatch) {
+.visibility-ordering-list .tree-item svg:not(.color-swatch),
+.visibility-search-list .tree-item svg:not(.color-swatch) {
   color: var(--dh-color-gray-600);
 }
-.visibility-ordering-list .tree-item:hover {
+.visibility-ordering-list .tree-item:hover,
+.visibility-search-list .tree-item:hover {
   background: var(--dh-color-item-list-hover-bg);
   cursor: grab;
 }
-.visibility-ordering-list .tree-item.isSelected {
+.visibility-ordering-list .tree-item.isSelected,
+.visibility-search-list .tree-item.isSelected {
   background-color: var(--dh-color-item-list-selected-bg);
 }
-.visibility-ordering-list .tree-item.isSelected:hover {
+.visibility-ordering-list .tree-item.isSelected:hover,
+.visibility-search-list .tree-item.isSelected:hover {
   background-color: var(--dh-color-item-list-selected-hover-bg);
 }
-.visibility-ordering-list .tree-item.isSelected:hover svg:not(.color-swatch) {
+.visibility-ordering-list .tree-item.isSelected:hover svg:not(.color-swatch),
+.visibility-search-list .tree-item.isSelected:hover svg:not(.color-swatch) {
   color: var(--dh-color-fg, #f0f0ee);
 }
-.visibility-ordering-list .tree-item:focus {
+.visibility-ordering-list .tree-item:focus,
+.visibility-search-list .tree-item:focus {
   outline: 0;
   border: 1px solid var(--dh-color-input-focus-border);
   box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--dh-color-accent) 35%, transparent);
 }
-.visibility-ordering-list .tree-item .column-name {
+.visibility-ordering-list .tree-item .column-name,
+.visibility-search-list .tree-item .column-name {
   flex-grow: 1;
   flex-shrink: 1;
   overflow-x: hidden;
   text-overflow: ellipsis;
 }
-.visibility-ordering-list .tree-item .item-count {
+.visibility-ordering-list .tree-item .item-count,
+.visibility-search-list .tree-item .item-count {
   padding: 0 0.5rem;
   border-radius: 1rem;
   background-color: color-mix(in srgb, var(--dh-color-fg) 25%, transparent);
   margin-right: 0.25rem;
 }
-.visibility-ordering-list .marching-ants {
+.visibility-ordering-list .marching-ants,
+.visibility-search-list .marching-ants {
   background-image: linear-gradient(to right, var(--dh-color-bg, #1a171a) 50%, var(--dh-color-fg, #f0f0ee) 50%), linear-gradient(to right, var(--dh-color-bg, #1a171a) 50%, var(--dh-color-fg, #f0f0ee) 50%), linear-gradient(to bottom, var(--dh-color-bg, #1a171a) 50%, var(--dh-color-fg, #f0f0ee) 50%), linear-gradient(to bottom, var(--dh-color-bg, #1a171a) 50%, var(--dh-color-fg, #f0f0ee) 50%);
   background-size: 8px 1px, 8px 1px, 1px 8px, 1px 8px;
   background-position: 0 top, 0 bottom, left 0, right 0;
@@ -57,7 +67,8 @@
   animation-timing-function: linear;
   animation-iteration-count: infinite;
 }
-.visibility-ordering-list .item-wrapper {
+.visibility-ordering-list .item-wrapper,
+.visibility-search-list .item-wrapper {
   list-style: none;
   box-sizing: border-box;
   margin-bottom: 1px;
@@ -66,20 +77,25 @@
   flex-direction: row;
   flex-wrap: nowrap;
 }
-.visibility-ordering-list .item-wrapper.clone {
+.visibility-ordering-list .item-wrapper.clone,
+.visibility-search-list .item-wrapper.clone {
   pointer-events: none;
   padding: 0;
 }
-.visibility-ordering-list .item-wrapper.clone .tree-item {
+.visibility-ordering-list .item-wrapper.clone .tree-item,
+.visibility-search-list .item-wrapper.clone .tree-item {
   opacity: 1;
   background-color: var(--dh-color-accent-bg);
   color: var(--dh-color-accent-contrast);
   box-shadow: 0 0.1rem 1rem var(--dh-color-dropshadow);
+  padding: 0.25rem;
 }
-.visibility-ordering-list .item-wrapper.clone .tree-item svg:not(.color-swatch) {
+.visibility-ordering-list .item-wrapper.clone .tree-item svg:not(.color-swatch),
+.visibility-search-list .item-wrapper.clone .tree-item svg:not(.color-swatch) {
   color: var(--dh-color-accent-contrast);
 }
-.visibility-ordering-list .item-wrapper.clone .tree-item.two-dragged::before {
+.visibility-ordering-list .item-wrapper.clone .tree-item.two-dragged::before,
+.visibility-search-list .item-wrapper.clone .tree-item.two-dragged::before {
   content: " ";
   background: var(--dh-color-accent-bg);
   box-shadow: 0 0.1rem 1rem var(--dh-color-dropshadow);
@@ -92,7 +108,8 @@
   opacity: 0.8;
   z-index: -1;
 }
-.visibility-ordering-list .item-wrapper.clone .tree-item.multiple-dragged::before {
+.visibility-ordering-list .item-wrapper.clone .tree-item.multiple-dragged::before,
+.visibility-search-list .item-wrapper.clone .tree-item.multiple-dragged::before {
   content: " ";
   background: var(--dh-color-accent-bg);
   box-shadow: 0 0.1rem 1rem var(--dh-color-dropshadow);
@@ -105,7 +122,8 @@
   opacity: 0.8;
   z-index: -1;
 }
-.visibility-ordering-list .item-wrapper.clone .tree-item.multiple-dragged::after {
+.visibility-ordering-list .item-wrapper.clone .tree-item.multiple-dragged::after,
+.visibility-search-list .item-wrapper.clone .tree-item.multiple-dragged::after {
   content: " ";
   background: var(--dh-color-accent-bg);
   box-shadow: 0 0.1rem 1rem var(--dh-color-dropshadow);
@@ -118,20 +136,25 @@
   opacity: 0.6;
   z-index: -2;
 }
-.visibility-ordering-list .item-wrapper.ghost {
+.visibility-ordering-list .item-wrapper.ghost,
+.visibility-search-list .item-wrapper.ghost {
   opacity: 0.5;
 }
-.visibility-ordering-list .item-wrapper.ghost .tree-item > * {
+.visibility-ordering-list .item-wrapper.ghost .tree-item > *,
+.visibility-search-list .item-wrapper.ghost .tree-item > * {
   box-shadow: none;
   background-color: transparent;
 }
-.visibility-ordering-list .item-wrapper.disableInteraction {
+.visibility-ordering-list .item-wrapper.disableInteraction,
+.visibility-search-list .item-wrapper.disableInteraction {
   pointer-events: none;
 }
-.visibility-ordering-list .item-wrapper.disableInteraction:not(.ghost) .tree-item.isSelected {
+.visibility-ordering-list .item-wrapper.disableInteraction:not(.ghost) .tree-item.isSelected,
+.visibility-search-list .item-wrapper.disableInteraction:not(.ghost) .tree-item.isSelected {
   opacity: 0.3;
 }
-.visibility-ordering-list .item-wrapper .depth-line {
+.visibility-ordering-list .item-wrapper .depth-line,
+.visibility-search-list .item-wrapper .depth-line {
   margin-left: calc(0.5rem + 8px + 0.5px);
   margin-right: 0.25rem;
   margin-top: -1px;

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;ACrLE;EACE;EACA;EACA,KCPO;EDQP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,eDuIY;ECtIZ;;AAEA;EACE,ODNK;;ACSP;EACE;EACA;;AAGF;EACE;;AAEA;EACE;;AAEA;EACE,ODFG;;ACOT;EACE;EACA;EACA,YDyIuB;;ACtIzB;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA,cCzDK;;AD6DT;EC7CA;EAIA,iBACE;EAIF,qBACE;EAIF;EACA;EACA;EACA;;ADgCA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA,kBDWE;ECVF;EACA,YDsEK;;ACpEL;EACE;;AChDR;EACE;EACA,YFoDM;EEnDN,YFgHS;EE/GT,eF8GY;EE7GZ;EACA;EACA;ED8CQ;EACA;EACA;EACA;;ACxDV;EACE;EACA,YFoDM;EEnDN,YFgHS;EE/GT,eF8GY;EE7GZ;EACA;EACA;EDuDQ;EACA;EACA;EACA;;ACjEV;EACE;EACA,YFoDM;EEnDN,YFgHS;EE/GT,eF8GY;EE7GZ;EACA;EACA;ED6DQ;EACA;EACA;EACA;;AAMR;EACE;;AAEA;EACE;EACA;;AAIJ;EACE;;AAEA;EACE;;AAIJ;EACE,aArIS;EAsIT,cCrIK;EDsIL;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  .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\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;;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"]}

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

@@ -1,10 +1,11 @@
 import React from 'react';
-import type { FlattenedItem, TreeItem as TreeItemType } from './types';
+import type { FlattenedItem } from './types';
 import './TreeItem.scss';
-export interface Props<T> {
+export interface TreeItemProps<T> {
     childCount?: number;
     clone?: boolean;
     depth: number;
+    withDepthMarkers?: boolean;
     disableInteraction?: boolean;
     ghost?: boolean;
     handleProps?: Record<string, unknown>;
@@ -12,24 +13,22 @@ export interface Props<T> {
     item: FlattenedItem<T>;
     dragRef?: React.Ref<HTMLDivElement> | null;
     wrapperRef?: React.Ref<HTMLLIElement> | null;
-    renderItem: (props: {
-        ref: React.Ref<HTMLDivElement> | null;
-        clone: boolean;
-        childCount?: number;
-        value: string;
-        item: FlattenedItem<T>;
-        handleProps?: Record<string, unknown>;
-    }) => JSX.Element;
+    renderItem: TreeItemRenderFn<T>;
+    /**
+     * Styles from dnd-kit to transform the depth lines
+     */
+    style?: React.CSSProperties;
 }
-export type TreeItemRenderFn<T> = (props: {
+export type TreeItemRenderFnProps<T> = {
     ref: React.Ref<HTMLDivElement> | null;
     clone: boolean;
     childCount?: number;
     value: string;
-    item: T extends TreeItemType<infer D> ? FlattenedItem<D> : FlattenedItem<T>;
+    item: FlattenedItem<T>;
     handleProps?: Record<string, unknown>;
-}) => JSX.Element;
-export declare function TreeItem<T>(props: Props<T>): JSX.Element;
+};
+export type TreeItemRenderFn<T> = (props: TreeItemRenderFnProps<T>) => JSX.Element;
+export declare function TreeItem<T>(props: TreeItemProps<T>): JSX.Element;
 export declare namespace TreeItem {
     var displayName: string;
 }

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,QAAQ,IAAI,YAAY,EAAE,MAAM,SAAS,CAAC;AACvE,OAAO,iBAAiB,CAAC;AAEzB,MAAM,WAAW,KAAK,CAAC,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,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,CAAC,KAAK,EAAE;QAClB,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC;QACtC,KAAK,EAAE,OAAO,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;QACvB,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;KACvC,KAAK,GAAG,CAAC,OAAO,CAAC;CACnB;AAED,MAAM,MAAM,gBAAgB,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE;IACxC,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,CAAC,SAAS,YAAY,CAAC,MAAM,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;IAC5E,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACvC,KAAK,GAAG,CAAC,OAAO,CAAC;AAElB,wBAAgB,QAAQ,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CAkDxD;yBAlDe,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,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"}

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

@@ -7,6 +7,7 @@ export function TreeItem(props) {
   var {
     clone = false,
     depth,
+    withDepthMarkers = true,
     disableInteraction = false,
     ghost = false,
     handleProps,
@@ -15,13 +16,13 @@ export function TreeItem(props) {
     wrapperRef = null,
     renderItem,
     item,
-    childCount
+    childCount,
+    style
   } = props;
-  var depthMarkers = useMemo(() => Array(depth).fill(0)
-  // eslint-disable-next-line react/no-array-index-key
-  .map((_, i) => /*#__PURE__*/_jsx("span", {
-    className: "depth-line"
-  }, "depth-line-".concat(i))), [depth]);
+  var depthMarkers = useMemo(() => withDepthMarkers ? Array(depth).fill(0).map((_, i) => /*#__PURE__*/_jsx("span", {
+    className: "depth-line",
+    style: style
+  }, "depth-line-".concat(i))) : null, [depth, style, withDepthMarkers]);
   var renderItemProps = useMemo(() => ({
     ref: dragRef,
     clone,
@@ -36,8 +37,9 @@ export function TreeItem(props) {
       ghost,
       disableInteraction
     }),
+    "data-id": item.id,
     ref: wrapperRef,
-    children: [!clone && depthMarkers, renderItem(renderItemProps)]
+    children: [!clone && withDepthMarkers && depthMarkers, renderItem(renderItemProps)]
   }, value);
 }
 TreeItem.displayName = 'TreeItem';

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","disableInteraction","ghost","handleProps","value","dragRef","wrapperRef","renderItem","item","childCount","depthMarkers","Array","fill","map","_","i","className","concat","renderItemProps","ref","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, TreeItem as TreeItemType } from './types';\nimport './TreeItem.scss';\n\nexport interface Props<T> {\n  childCount?: number;\n  clone?: boolean;\n  depth: number;\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: (props: {\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  }) => JSX.Element;\n}\n\nexport type TreeItemRenderFn<T> = (props: {\n  ref: React.Ref<HTMLDivElement> | null;\n  clone: boolean;\n  childCount?: number;\n  value: string;\n  item: T extends TreeItemType<infer D> ? FlattenedItem<D> : FlattenedItem<T>;\n  handleProps?: Record<string, unknown>;\n}) => JSX.Element;\n\nexport function TreeItem<T>(props: Props<T>): JSX.Element {\n  const {\n    clone = false,\n    depth,\n    disableInteraction = false,\n    ghost = false,\n    handleProps,\n    value,\n    dragRef = null,\n    wrapperRef = null,\n    renderItem,\n    item,\n    childCount,\n  } = props;\n\n  const depthMarkers = useMemo(\n    () =>\n      Array(depth)\n        .fill(0)\n        // eslint-disable-next-line react/no-array-index-key\n        .map((_, i) => <span key={`depth-line-${i}`} className=\"depth-line\" />),\n    [depth]\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      ref={wrapperRef}\n    >\n      {!clone && 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;AAkCpC,OAAO,SAASC,QAAQA,CAAIC,KAAe,EAAe;EACxD,IAAM;IACJC,KAAK,GAAG,KAAK;IACbC,KAAK;IACLC,kBAAkB,GAAG,KAAK;IAC1BC,KAAK,GAAG,KAAK;IACbC,WAAW;IACXC,KAAK;IACLC,OAAO,GAAG,IAAI;IACdC,UAAU,GAAG,IAAI;IACjBC,UAAU;IACVC,IAAI;IACJC;EACF,CAAC,GAAGX,KAAK;EAET,IAAMY,YAAY,GAAGnB,OAAO,CAC1B,MACEoB,KAAK,CAACX,KAAK,CAAC,CACTY,IAAI,CAAC,CAAC;EACP;EAAA,CACCC,GAAG,CAAC,CAACC,CAAC,EAAEC,CAAC,kBAAKrB,IAAA;IAA8BsB,SAAS,EAAC;EAAY,iBAAAC,MAAA,CAA3BF,CAAC,CAA4B,CAAC,CAAC,EAC3E,CAACf,KAAK,CACR,CAAC;EAED,IAAMkB,eAAe,GAAG3B,OAAO,CAC7B,OAAO;IACL4B,GAAG,EAAEd,OAAO;IACZN,KAAK;IACLK,KAAK;IACLI,IAAI;IACJC,UAAU;IACVN;EACF,CAAC,CAAC,EACF,CAACE,OAAO,EAAEN,KAAK,EAAEK,KAAK,EAAEI,IAAI,EAAEC,UAAU,EAAEN,WAAW,CACvD,CAAC;EAED,oBACEP,KAAA;IAEEoB,SAAS,EAAExB,UAAU,CAAC,cAAc,EAAE;MACpCO,KAAK;MACLG,KAAK;MACLD;IACF,CAAC,CAAE;IACHkB,GAAG,EAAEb,UAAW;IAAAc,QAAA,GAEf,CAACrB,KAAK,IAAIW,YAAY,EACtBH,UAAU,CAACW,eAAe,CAAC;EAAA,GATvBd,KAUH,CAAC;AAET;AAEAP,QAAQ,CAACwB,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","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":[]}

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

@@ -1,4 +1,4 @@
 import { type KeyboardCoordinateGetter } from '@dnd-kit/core';
 import type { SensorContext } from './types';
-export declare function sortableTreeKeyboardCoordinates(context: SensorContext, indicator: boolean, indentationWidth: number): KeyboardCoordinateGetter;
+export declare function sortableTreeKeyboardCoordinates(context: SensorContext, indentationWidth: number): KeyboardCoordinateGetter;
 //# sourceMappingURL=keyboardCoordinates.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"keyboardCoordinates.d.ts","sourceRoot":"","sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/keyboardCoordinates.ts"],"names":[],"mappings":"AACA,OAAO,EAIL,KAAK,wBAAwB,EAE9B,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAY7C,wBAAgB,+BAA+B,CAC7C,OAAO,EAAE,aAAa,EACtB,SAAS,EAAE,OAAO,EAClB,gBAAgB,EAAE,MAAM,GACvB,wBAAwB,CAsI1B"}
+{"version":3,"file":"keyboardCoordinates.d.ts","sourceRoot":"","sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/keyboardCoordinates.ts"],"names":[],"mappings":"AACA,OAAO,EAIL,KAAK,wBAAwB,EAE9B,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAY7C,wBAAgB,+BAA+B,CAC7C,OAAO,EAAE,aAAa,EACtB,gBAAgB,EAAE,MAAM,GACvB,wBAAwB,CAkJ1B"}

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

@@ -8,7 +8,7 @@ import { closestCorners, getFirstCollision, KeyboardCode } from '@dnd-kit/core';
 import { getProjection } from "./utilities.js";
 var DIRECTIONS = [KeyboardCode.Down, KeyboardCode.Right, KeyboardCode.Up, KeyboardCode.Left];
 var HORIZONTAL = [KeyboardCode.Left, KeyboardCode.Right];
-export function sortableTreeKeyboardCoordinates(context, indicator, indentationWidth) {
+export function sortableTreeKeyboardCoordinates(context, indentationWidth) {
   return (event, _ref) => {
     var {
       currentCoordinates,
@@ -31,12 +31,13 @@ export function sortableTreeKeyboardCoordinates(context, indicator, indentationW
           offset
         }
       } = context;
-      if (HORIZONTAL.includes(event.code) && (over === null || over === void 0 ? void 0 : over.id) != null) {
+      var projection = (over === null || over === void 0 ? void 0 : over.id) != null ? getProjection(items, active.id, over.id, offset, indentationWidth) : null;
+      if (HORIZONTAL.includes(event.code) && (over === null || over === void 0 ? void 0 : over.id) != null && projection != null) {
         var {
           depth,
           maxDepth,
           minDepth
-        } = getProjection(items, active.id, over.id, offset, indentationWidth);
+        } = projection;
         switch (event.code) {
           case KeyboardCode.Left:
             if (depth > minDepth) {
@@ -107,16 +108,16 @@ export function sortableTreeKeyboardCoordinates(context, indicator, indentationW
             return id === active.id;
           });
           var activeItem = items[activeIndex];
-          if (newItem != null && activeItem != null) {
+          var closestProjection = getProjection(items, active.id, closestId, (newItem.depth - activeItem.depth) * indentationWidth, indentationWidth);
+          if (newItem != null && activeItem != null && closestProjection != null) {
             var {
               depth: _depth
-            } = getProjection(items, active.id, closestId, (newItem.depth - activeItem.depth) * indentationWidth, indentationWidth);
+            } = closestProjection;
             var isBelow = newIndex > activeIndex;
             var modifier = isBelow ? 1 : -1;
-            var nextOffset = indicator ? (collisionRect.height - activeRect.height) / 2 : 0;
             var newCoordinates = {
               x: newRect.left + _depth * indentationWidth,
-              y: newRect.top + modifier * nextOffset
+              y: newRect.top + modifier
             };
             return newCoordinates;
           }

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

@@ -1 +1 @@
-{"version":3,"file":"keyboardCoordinates.js","names":["closestCorners","getFirstCollision","KeyboardCode","getProjection","DIRECTIONS","Down","Right","Up","Left","HORIZONTAL","sortableTreeKeyboardCoordinates","context","indicator","indentationWidth","event","_ref","currentCoordinates","active","over","collisionRect","droppableRects","droppableContainers","includes","code","preventDefault","current","items","offset","id","depth","maxDepth","minDepth","_objectSpread","x","undefined","containers","forEach","container","disabled","rect","get","top","push","collisions","pointerCoordinates","closestId","length","activeRect","newRect","newDroppable","newIndex","findIndex","_ref2","newItem","activeIndex","_ref3","activeItem","isBelow","modifier","nextOffset","height","newCoordinates","left","y"],"sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/keyboardCoordinates.ts"],"sourcesContent":["/* eslint-disable import/prefer-default-export */\nimport {\n  closestCorners,\n  getFirstCollision,\n  KeyboardCode,\n  type KeyboardCoordinateGetter,\n  type DroppableContainer,\n} from '@dnd-kit/core';\nimport type { SensorContext } from './types';\nimport { getProjection } from './utilities';\n\nconst DIRECTIONS: string[] = [\n  KeyboardCode.Down,\n  KeyboardCode.Right,\n  KeyboardCode.Up,\n  KeyboardCode.Left,\n];\n\nconst HORIZONTAL: string[] = [KeyboardCode.Left, KeyboardCode.Right];\n\nexport function sortableTreeKeyboardCoordinates(\n  context: SensorContext,\n  indicator: boolean,\n  indentationWidth: number\n): KeyboardCoordinateGetter {\n  return (\n    event,\n    {\n      currentCoordinates,\n      context: {\n        active,\n        over,\n        collisionRect,\n        droppableRects,\n        droppableContainers,\n      },\n    }\n  ) => {\n    if (DIRECTIONS.includes(event.code)) {\n      if (!active || !collisionRect) {\n        return;\n      }\n\n      event.preventDefault();\n\n      const {\n        current: { items, offset },\n      } = context;\n\n      if (HORIZONTAL.includes(event.code) && over?.id != null) {\n        const { depth, maxDepth, minDepth } = getProjection(\n          items,\n          active.id as string,\n          over.id as string,\n          offset,\n          indentationWidth\n        );\n\n        switch (event.code) {\n          case KeyboardCode.Left:\n            if (depth > minDepth) {\n              return {\n                ...currentCoordinates,\n                x: currentCoordinates.x - indentationWidth,\n              };\n            }\n            break;\n          case KeyboardCode.Right:\n            if (depth < maxDepth) {\n              return {\n                ...currentCoordinates,\n                x: currentCoordinates.x + indentationWidth,\n              };\n            }\n            break;\n        }\n\n        return undefined;\n      }\n\n      const containers: DroppableContainer[] = [];\n\n      droppableContainers.forEach(container => {\n        if (container?.disabled || container.id === over?.id) {\n          return;\n        }\n\n        const rect = droppableRects.get(container.id);\n\n        if (!rect) {\n          return;\n        }\n\n        switch (event.code) {\n          case KeyboardCode.Down:\n            if (collisionRect.top < rect.top) {\n              containers.push(container);\n            }\n            break;\n          case KeyboardCode.Up:\n            if (collisionRect.top > rect.top) {\n              containers.push(container);\n            }\n            break;\n        }\n      });\n\n      const collisions = closestCorners({\n        active,\n        collisionRect,\n        pointerCoordinates: null,\n        droppableRects,\n        droppableContainers: containers,\n      });\n      let closestId = getFirstCollision(collisions, 'id');\n\n      if (closestId === over?.id && collisions.length > 1) {\n        closestId = collisions[1].id;\n      }\n\n      if (closestId != null && over?.id != null) {\n        const activeRect = droppableRects.get(active.id);\n        const newRect = droppableRects.get(closestId);\n        const newDroppable = droppableContainers.get(closestId);\n\n        if (activeRect && newRect && newDroppable) {\n          const newIndex = items.findIndex(({ id }) => id === closestId);\n          const newItem = items[newIndex];\n          const activeIndex = items.findIndex(({ id }) => id === active.id);\n          const activeItem = items[activeIndex];\n\n          if (newItem != null && activeItem != null) {\n            const { depth } = getProjection(\n              items,\n              active.id as string,\n              closestId as string,\n              (newItem.depth - activeItem.depth) * indentationWidth,\n              indentationWidth\n            );\n            const isBelow = newIndex > activeIndex;\n            const modifier = isBelow ? 1 : -1;\n            const nextOffset = indicator\n              ? (collisionRect.height - activeRect.height) / 2\n              : 0;\n\n            const newCoordinates = {\n              x: newRect.left + depth * indentationWidth,\n              y: newRect.top + modifier * nextOffset,\n            };\n\n            return newCoordinates;\n          }\n        }\n      }\n    }\n\n    return undefined;\n  };\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"keyboardCoordinates.js","names":["closestCorners","getFirstCollision","KeyboardCode","getProjection","DIRECTIONS","Down","Right","Up","Left","HORIZONTAL","sortableTreeKeyboardCoordinates","context","indentationWidth","event","_ref","currentCoordinates","active","over","collisionRect","droppableRects","droppableContainers","includes","code","preventDefault","current","items","offset","projection","id","depth","maxDepth","minDepth","_objectSpread","x","undefined","containers","forEach","container","disabled","rect","get","top","push","collisions","pointerCoordinates","closestId","length","activeRect","newRect","newDroppable","newIndex","findIndex","_ref2","newItem","activeIndex","_ref3","activeItem","closestProjection","isBelow","modifier","newCoordinates","left","y"],"sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/keyboardCoordinates.ts"],"sourcesContent":["/* eslint-disable import/prefer-default-export */\nimport {\n  closestCorners,\n  getFirstCollision,\n  KeyboardCode,\n  type KeyboardCoordinateGetter,\n  type DroppableContainer,\n} from '@dnd-kit/core';\nimport type { SensorContext } from './types';\nimport { getProjection } from './utilities';\n\nconst DIRECTIONS: string[] = [\n  KeyboardCode.Down,\n  KeyboardCode.Right,\n  KeyboardCode.Up,\n  KeyboardCode.Left,\n];\n\nconst HORIZONTAL: string[] = [KeyboardCode.Left, KeyboardCode.Right];\n\nexport function sortableTreeKeyboardCoordinates(\n  context: SensorContext,\n  indentationWidth: number\n): KeyboardCoordinateGetter {\n  return (\n    event,\n    {\n      currentCoordinates,\n      context: {\n        active,\n        over,\n        collisionRect,\n        droppableRects,\n        droppableContainers,\n      },\n    }\n  ) => {\n    if (DIRECTIONS.includes(event.code)) {\n      if (!active || !collisionRect) {\n        return;\n      }\n\n      event.preventDefault();\n\n      const {\n        current: { items, offset },\n      } = context;\n\n      const projection =\n        over?.id != null\n          ? getProjection(\n              items,\n              active.id as string,\n              over.id as string,\n              offset,\n              indentationWidth\n            )\n          : null;\n\n      if (\n        HORIZONTAL.includes(event.code) &&\n        over?.id != null &&\n        projection != null\n      ) {\n        const { depth, maxDepth, minDepth } = projection;\n\n        switch (event.code) {\n          case KeyboardCode.Left:\n            if (depth > minDepth) {\n              return {\n                ...currentCoordinates,\n                x: currentCoordinates.x - indentationWidth,\n              };\n            }\n            break;\n          case KeyboardCode.Right:\n            if (depth < maxDepth) {\n              return {\n                ...currentCoordinates,\n                x: currentCoordinates.x + indentationWidth,\n              };\n            }\n            break;\n        }\n\n        return undefined;\n      }\n\n      const containers: DroppableContainer[] = [];\n\n      droppableContainers.forEach(container => {\n        if (container?.disabled || container.id === over?.id) {\n          return;\n        }\n\n        const rect = droppableRects.get(container.id);\n\n        if (!rect) {\n          return;\n        }\n\n        switch (event.code) {\n          case KeyboardCode.Down:\n            if (collisionRect.top < rect.top) {\n              containers.push(container);\n            }\n            break;\n          case KeyboardCode.Up:\n            if (collisionRect.top > rect.top) {\n              containers.push(container);\n            }\n            break;\n        }\n      });\n\n      const collisions = closestCorners({\n        active,\n        collisionRect,\n        pointerCoordinates: null,\n        droppableRects,\n        droppableContainers: containers,\n      });\n      let closestId = getFirstCollision(collisions, 'id');\n\n      if (closestId === over?.id && collisions.length > 1) {\n        closestId = collisions[1].id;\n      }\n\n      if (closestId != null && over?.id != null) {\n        const activeRect = droppableRects.get(active.id);\n        const newRect = droppableRects.get(closestId);\n        const newDroppable = droppableContainers.get(closestId);\n\n        if (activeRect && newRect && newDroppable) {\n          const newIndex = items.findIndex(({ id }) => id === closestId);\n          const newItem = items[newIndex];\n          const activeIndex = items.findIndex(({ id }) => id === active.id);\n          const activeItem = items[activeIndex];\n\n          const closestProjection = getProjection(\n            items,\n            active.id as string,\n            closestId as string,\n            (newItem.depth - activeItem.depth) * indentationWidth,\n            indentationWidth\n          );\n\n          if (\n            newItem != null &&\n            activeItem != null &&\n            closestProjection != null\n          ) {\n            const { depth } = closestProjection;\n            const isBelow = newIndex > activeIndex;\n            const modifier = isBelow ? 1 : -1;\n\n            const newCoordinates = {\n              x: newRect.left + depth * indentationWidth,\n              y: newRect.top + modifier,\n            };\n\n            return newCoordinates;\n          }\n        }\n      }\n    }\n\n    return undefined;\n  };\n}\n"],"mappings":"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","ignoreList":[]}