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

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

@@ -1 +1 @@
-{"version":3,"file":"VisibilityOrderingItem.js","names":["React","forwardRef","useCallback","useRef","classNames","FontAwesomeIcon","dhEye","dhEyeSlash","vsGripper","Button","Tooltip","VisibilityOrderingGroup","jsx","_jsx","jsxs","_jsxs","emptyOnClick","VisibilityOrderingItem","props","ref","value","clone","childCount","item","onVisibilityChange","onClick","onGroupDelete","onGroupColorChange","onGroupNameChange","validateGroupName","handleProps","group","modelIndex","isVisible","data","buttonRef","handleVisibilityChange","e","buttons","_buttonRef$current","flat","current","focus","handleClick","event","_objectSpread","className","isSelected","selected","index","children","kind","onMouseDown","onMouseEnter","icon","tooltip","onDelete","onColorChange","onNameChange","validateName"],"sources":["../../../src/sidebar/visibility-ordering-builder/VisibilityOrderingItem.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useRef } from 'react';\nimport classNames from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { dhEye, dhEyeSlash, vsGripper } from '@deephaven/icons';\nimport { Button, Tooltip } from '@deephaven/components';\nimport VisibilityOrderingGroup from './VisibilityOrderingGroup';\nimport { type FlattenedIrisGridTreeItem } from './sortable-tree/utilities';\nimport type ColumnHeaderGroup from '../../ColumnHeaderGroup';\n\ntype VisibilityOrderingItemProps = {\n  value: string;\n  clone: boolean;\n  childCount: number;\n  item: FlattenedIrisGridTreeItem;\n  onVisibilityChange: (modelIndexes: number[], isVisible: boolean) => void;\n  onClick: (name: string, event: React.MouseEvent<HTMLElement>) => void;\n  onGroupDelete: (group: ColumnHeaderGroup) => void;\n  onGroupColorChange: (\n    group: ColumnHeaderGroup,\n    color: string | undefined\n  ) => void;\n  onGroupNameChange: (group: ColumnHeaderGroup, name: string) => void;\n  validateGroupName: (name: string) => string;\n  handleProps?: Record<string, unknown>;\n};\n\nfunction emptyOnClick(): void {\n  // no-op\n}\n\nconst VisibilityOrderingItem = forwardRef<\n  HTMLDivElement,\n  VisibilityOrderingItemProps\n>(function VisibilityOrderingItem(props, ref) {\n  const {\n    value,\n    clone,\n    childCount,\n    item,\n    onVisibilityChange,\n    onClick,\n    onGroupDelete,\n    onGroupColorChange,\n    onGroupNameChange,\n    validateGroupName,\n    handleProps,\n  } = props;\n  const { group, modelIndex, isVisible } = item.data;\n  const buttonRef = useRef<HTMLButtonElement>(null);\n\n  const handleVisibilityChange = useCallback(\n    (e: React.MouseEvent) => {\n      if (e.buttons === 1) {\n        onVisibilityChange([modelIndex].flat(), !isVisible);\n        buttonRef.current?.focus();\n      }\n    },\n    [onVisibilityChange, modelIndex, isVisible]\n  );\n\n  const handleClick = useCallback(\n    (event: React.MouseEvent<HTMLElement>) => {\n      onClick(value, event);\n    },\n    [onClick, value]\n  );\n\n  return (\n    // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n    <div\n      ref={ref}\n      className={classNames('tree-item', {\n        isSelected: item.selected,\n        'two-dragged': childCount === 2,\n        'multiple-dragged': childCount > 2,\n      })}\n      onClick={handleClick}\n      data-index={item.index}\n      // eslint-disable-next-line react/jsx-props-no-spreading\n      {...handleProps}\n    >\n      <Button\n        ref={buttonRef}\n        kind=\"ghost\"\n        className=\"px-1\"\n        // We PropType validate onClick for Button\n        onClick={emptyOnClick}\n        onMouseDown={handleVisibilityChange}\n        onMouseEnter={handleVisibilityChange}\n        icon={isVisible ? dhEye : dhEyeSlash}\n        tooltip=\"Toggle visibility\"\n      />\n      <span className={classNames('column-name', group && 'column-group')}>\n        {/* Display a normal item if this is the drag overlay clone, even if it's a group */}\n        {group && !clone ? (\n          <VisibilityOrderingGroup\n            group={group}\n            onDelete={onGroupDelete}\n            onColorChange={onGroupColorChange}\n            onNameChange={onGroupNameChange}\n            validateName={validateGroupName}\n          />\n        ) : (\n          value\n        )}\n      </span>\n      <div>\n        {clone && childCount > 1 && (\n          <span className=\"item-count\">{childCount}</span>\n        )}\n        <Tooltip>Drag to re-order</Tooltip>\n        <FontAwesomeIcon icon={vsGripper} />\n      </div>\n    </div>\n  );\n});\n\nexport default VisibilityOrderingItem;\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,WAAW,EAAEC,MAAM,QAAQ,OAAO;AAC9D,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,eAAe,QAAQ,gCAAgC;AAChE,SAASC,KAAK,EAAEC,UAAU,EAAEC,SAAS,QAAQ,kBAAkB;AAC/D,SAASC,MAAM,EAAEC,OAAO,QAAQ,uBAAuB;AAAC,OACjDC,uBAAuB;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAqB9B,SAASC,YAAYA,CAAA,EAAS;EAC5B;AAAA;AAGF,IAAMC,sBAAsB,gBAAGhB,UAAU,CAGvC,SAASgB,sBAAsBA,CAACC,KAAK,EAAEC,GAAG,EAAE;EAC5C,IAAM;IACJC,KAAK;IACLC,KAAK;IACLC,UAAU;IACVC,IAAI;IACJC,kBAAkB;IAClBC,OAAO;IACPC,aAAa;IACbC,kBAAkB;IAClBC,iBAAiB;IACjBC,iBAAiB;IACjBC;EACF,CAAC,GAAGZ,KAAK;EACT,IAAM;IAAEa,KAAK;IAAEC,UAAU;IAAEC;EAAU,CAAC,GAAGV,IAAI,CAACW,IAAI;EAClD,IAAMC,SAAS,GAAGhC,MAAM,CAAoB,IAAI,CAAC;EAEjD,IAAMiC,sBAAsB,GAAGlC,WAAW,CACvCmC,CAAmB,IAAK;IACvB,IAAIA,CAAC,CAACC,OAAO,KAAK,CAAC,EAAE;MAAA,IAAAC,kBAAA;MACnBf,kBAAkB,CAAC,CAACQ,UAAU,CAAC,CAACQ,IAAI,CAAC,CAAC,EAAE,CAACP,SAAS,CAAC;MACnD,CAAAM,kBAAA,GAAAJ,SAAS,CAACM,OAAO,cAAAF,kBAAA,eAAjBA,kBAAA,CAAmBG,KAAK,CAAC,CAAC;IAC5B;EACF,CAAC,EACD,CAAClB,kBAAkB,EAAEQ,UAAU,EAAEC,SAAS,CAC5C,CAAC;EAED,IAAMU,WAAW,GAAGzC,WAAW,CAC5B0C,KAAoC,IAAK;IACxCnB,OAAO,CAACL,KAAK,EAAEwB,KAAK,CAAC;EACvB,CAAC,EACD,CAACnB,OAAO,EAAEL,KAAK,CACjB,CAAC;EAED;IAAA;IACE;IACAL,KAAA,QAAA8B,aAAA,CAAAA,aAAA;MACE1B,GAAG,EAAEA,GAAI;MACT2B,SAAS,EAAE1C,UAAU,CAAC,WAAW,EAAE;QACjC2C,UAAU,EAAExB,IAAI,CAACyB,QAAQ;QACzB,aAAa,EAAE1B,UAAU,KAAK,CAAC;QAC/B,kBAAkB,EAAEA,UAAU,GAAG;MACnC,CAAC,CAAE;MACHG,OAAO,EAAEkB,WAAY;MACrB,cAAYpB,IAAI,CAAC0B;MACjB;IAAA,GACInB,WAAW;MAAAoB,QAAA,gBAEfrC,IAAA,CAACJ,MAAM;QACLU,GAAG,EAAEgB,SAAU;QACfgB,IAAI,EAAC,OAAO;QACZL,SAAS,EAAC;QACV;QAAA;QACArB,OAAO,EAAET,YAAa;QACtBoC,WAAW,EAAEhB,sBAAuB;QACpCiB,YAAY,EAAEjB,sBAAuB;QACrCkB,IAAI,EAAErB,SAAS,GAAG3B,KAAK,GAAGC,UAAW;QACrCgD,OAAO,EAAC;MAAmB,CAC5B,CAAC,eACF1C,IAAA;QAAMiC,SAAS,EAAE1C,UAAU,CAAC,aAAa,EAAE2B,KAAK,IAAI,cAAc,CAAE;QAAAmB,QAAA,EAEjEnB,KAAK,IAAI,CAACV,KAAK,gBACdR,IAAA,CAACF,uBAAuB;UACtBoB,KAAK,EAAEA,KAAM;UACbyB,QAAQ,EAAE9B,aAAc;UACxB+B,aAAa,EAAE9B,kBAAmB;UAClC+B,YAAY,EAAE9B,iBAAkB;UAChC+B,YAAY,EAAE9B;QAAkB,CACjC,CAAC,GAEFT;MACD,CACG,CAAC,eACPL,KAAA;QAAAmC,QAAA,GACG7B,KAAK,IAAIC,UAAU,GAAG,CAAC,iBACtBT,IAAA;UAAMiC,SAAS,EAAC,YAAY;UAAAI,QAAA,EAAE5B;QAAU,CAAO,CAChD,eACDT,IAAA,CAACH,OAAO;UAAAwC,QAAA,EAAC;QAAgB,CAAS,CAAC,eACnCrC,IAAA,CAACR,eAAe;UAACiD,IAAI,EAAE9C;QAAU,CAAE,CAAC;MAAA,CACjC,CAAC;IAAA,EACH;EAAC;AAEV,CAAC,CAAC;AAEF,eAAeS,sBAAsB","ignoreList":[]}
+{"version":3,"file":"VisibilityOrderingItem.js","names":["React","forwardRef","memo","useCallback","useRef","classNames","FontAwesomeIcon","dhEye","dhEyeSlash","vsGripper","Button","Tooltip","VisibilityOrderingGroup","jsx","_jsx","jsxs","_jsxs","emptyOnClick","VisibilityOrderingItem","props","ref","value","clone","childCount","item","onVisibilityChange","visibilityClickAndDrag","onClick","onGroupDelete","onGroupColorChange","onGroupNameChange","validateGroupName","handleProps","group","modelIndex","isVisible","data","buttonRef","handleVisibilityChange","e","buttons","_buttonRef$current","flat","current","focus","handleClick","event","_objectSpread","className","isSelected","selected","index","children","kind","onMouseDown","onMouseEnter","undefined","icon","tooltip","title","onDelete","onColorChange","onNameChange","validateName","MemoizedVisibilityOrderingItem"],"sources":["../../../src/sidebar/visibility-ordering-builder/VisibilityOrderingItem.tsx"],"sourcesContent":["import React, { forwardRef, memo, useCallback, useRef } from 'react';\nimport classNames from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { dhEye, dhEyeSlash, vsGripper } from '@deephaven/icons';\nimport { Button, Tooltip } from '@deephaven/components';\nimport VisibilityOrderingGroup from './VisibilityOrderingGroup';\nimport { type FlattenedIrisGridTreeItem } from './sortable-tree/utilities';\nimport type ColumnHeaderGroup from '../../ColumnHeaderGroup';\n\ntype VisibilityOrderingItemProps = {\n  value: string;\n  clone: boolean;\n  childCount: number;\n  item: FlattenedIrisGridTreeItem;\n  onVisibilityChange: (modelIndexes: number[], isVisible: boolean) => void;\n  /**\n   * If true, allows changing visibility by clicking and dragging over multiple item\n   * visibility buttons.\n   */\n  visibilityClickAndDrag: boolean;\n  onClick: (name: string, event: React.MouseEvent<HTMLElement>) => void;\n  onGroupDelete: (group: ColumnHeaderGroup) => void;\n  onGroupColorChange: (\n    group: ColumnHeaderGroup,\n    color: string | undefined\n  ) => void;\n  onGroupNameChange: (group: ColumnHeaderGroup, name: string) => void;\n  validateGroupName: (name: string) => string;\n  handleProps?: Record<string, unknown>;\n};\n\nfunction emptyOnClick(): void {\n  // no-op\n}\n\nconst VisibilityOrderingItem = forwardRef<\n  HTMLDivElement,\n  VisibilityOrderingItemProps\n>(function VisibilityOrderingItem(props, ref) {\n  const {\n    value,\n    clone,\n    childCount,\n    item,\n    onVisibilityChange,\n    visibilityClickAndDrag,\n    onClick,\n    onGroupDelete,\n    onGroupColorChange,\n    onGroupNameChange,\n    validateGroupName,\n    handleProps,\n  } = props;\n  const { group, modelIndex, isVisible } = item.data;\n  const buttonRef = useRef<HTMLButtonElement>(null);\n\n  const handleVisibilityChange = useCallback(\n    (e: React.MouseEvent) => {\n      if (e.buttons === 1) {\n        onVisibilityChange([modelIndex].flat(), !isVisible);\n        buttonRef.current?.focus();\n      }\n    },\n    [onVisibilityChange, modelIndex, isVisible]\n  );\n\n  const handleClick = useCallback(\n    (event: React.MouseEvent<HTMLElement>) => {\n      onClick(value, event);\n    },\n    [onClick, value]\n  );\n\n  return (\n    // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n    <div\n      ref={ref}\n      className={classNames('tree-item', {\n        isSelected: item.selected,\n        'two-dragged': childCount === 2,\n        'multiple-dragged': childCount > 2,\n      })}\n      onClick={handleClick}\n      data-index={item.index}\n      // eslint-disable-next-line react/jsx-props-no-spreading\n      {...handleProps}\n    >\n      {!clone && (\n        <Button\n          ref={buttonRef}\n          kind=\"ghost\"\n          className=\"px-1\"\n          // We PropType validate onClick for Button\n          onClick={emptyOnClick}\n          onMouseDown={handleVisibilityChange}\n          onMouseEnter={\n            visibilityClickAndDrag ? handleVisibilityChange : undefined\n          }\n          icon={isVisible ? dhEye : dhEyeSlash}\n          tooltip=\"Toggle visibility\"\n        />\n      )}\n      <span\n        title={value}\n        className={classNames('column-name', group && 'column-group')}\n      >\n        {/* Display a normal item if this is the drag overlay clone, even if it's a group */}\n        {group && !clone ? (\n          <VisibilityOrderingGroup\n            group={group}\n            onDelete={onGroupDelete}\n            onColorChange={onGroupColorChange}\n            onNameChange={onGroupNameChange}\n            validateName={validateGroupName}\n          />\n        ) : (\n          value\n        )}\n      </span>\n      <div>\n        {clone && childCount > 1 && (\n          <span className=\"item-count\">{childCount}</span>\n        )}\n        <Tooltip>Drag to re-order</Tooltip>\n        <FontAwesomeIcon icon={vsGripper} />\n      </div>\n    </div>\n  );\n});\n\nconst MemoizedVisibilityOrderingItem = memo(VisibilityOrderingItem);\n\nexport default MemoizedVisibilityOrderingItem;\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,20 +1,12 @@
-import React from 'react';
-import type { FlattenedItem, TreeItem } from './types';
+import { type TreeItemRenderFn } from './TreeItem';
+import type { TreeItem as TreeItemType } from './types';
 interface Props<T> {
-    items: TreeItem<T>[];
+    items: TreeItemType<T>[];
     indentationWidth?: number;
-    indicator?: boolean;
-    onDragStart?: (id: string) => void;
-    onDragEnd?: (from: FlattenedItem<T>, to: FlattenedItem<T>) => void;
-    renderItem: (props: {
-        clone: boolean;
-        childCount?: number;
-        value: string;
-        item: FlattenedItem<T>;
-        ref: React.Ref<HTMLDivElement>;
-        handleProps?: Record<string, unknown>;
-    }) => JSX.Element;
+    renderItem: TreeItemRenderFn<T>;
+    isDraggable?: boolean;
+    withDepthMarkers?: boolean;
 }
-export default function SortableTree<T>({ items, indicator, indentationWidth, onDragStart, onDragEnd, renderItem, }: Props<T>): JSX.Element;
+export default function SortableTree<T>({ items, indentationWidth, renderItem, isDraggable, withDepthMarkers, }: Props<T>): JSX.Element;
 export {};
 //# sourceMappingURL=SortableTree.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SortableTree.d.ts","sourceRoot":"","sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/SortableTree.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAkBf,OAAO,KAAK,EAAE,aAAa,EAAiB,QAAQ,EAAE,MAAM,SAAS,CAAC;AAiBtE,UAAU,KAAK,CAAC,CAAC;IACf,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IACnE,UAAU,EAAE,CAAC,KAAK,EAAE;QAClB,KAAK,EAAE,OAAO,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;QACvB,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;QAC/B,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;KACvC,KAAK,GAAG,CAAC,OAAO,CAAC;CACnB;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,CAAC,EAAE,EACtC,KAAK,EACL,SAAiB,EACjB,gBAAqB,EACrB,WAAW,EACX,SAAS,EACT,UAAU,GACX,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CA2IxB"}
+{"version":3,"file":"SortableTree.d.ts","sourceRoot":"","sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/SortableTree.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAY,KAAK,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAC7D,OAAO,KAAK,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,SAAS,CAAC;AAExD,UAAU,KAAK,CAAC,CAAC;IACf,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,UAAU,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC;IAChC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,CAAC,EAAE,EACtC,KAAK,EACL,gBAAqB,EACrB,UAAU,EACV,WAAkB,EAClB,gBAAuB,GACxB,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CAqFxB"}

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

@@ -1,160 +1,76 @@
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { DndContext, closestCenter, KeyboardSensor, useSensor, useSensors, MeasuringStrategy } from '@dnd-kit/core';
-import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { useEffect, useMemo, useRef } from 'react';
+import classNames from 'classnames';
+import { useDndContext } from '@dnd-kit/core';
 import { flattenTree, getProjection } from "./utilities.js";
-import { sortableTreeKeyboardCoordinates } from "./keyboardCoordinates.js";
-import PointerSensorWithInteraction from "./PointerSensorWithInteraction.js";
-import SortableTreeInner from "./SortableTreeInner.js";
+import { SortableTreeItem } from "./SortableTreeItem.js";
+import { TreeItem } from "./TreeItem.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-var MEASURING = {
-  droppable: {
-    strategy: MeasuringStrategy.Always
-  }
-};
-var CONSTRAINT = {
-  activationConstraint: {
-    distance: 5
-  }
-};
 export default function SortableTree(_ref) {
+  var _ref2, _dndContext$active, _ref3, _dndContext$over, _dndContext$active$re, _dndContext$active$re2, _dndContext$active$re3, _dndContext$active$re4;
   var {
     items,
-    indicator = false,
     indentationWidth = 30,
-    onDragStart,
-    onDragEnd,
-    renderItem
+    renderItem,
+    isDraggable = true,
+    withDepthMarkers = true
   } = _ref;
-  var [activeId, setActiveId] = useState(null);
-  var [overId, setOverId] = useState(null);
-  var [offsetLeft, setOffsetLeft] = useState(0);
+  var dndContext = useDndContext();
+  var activeId = (_ref2 = (_dndContext$active = dndContext.active) === null || _dndContext$active === void 0 ? void 0 : _dndContext$active.id) !== null && _ref2 !== void 0 ? _ref2 : null;
+  var overId = (_ref3 = (_dndContext$over = dndContext.over) === null || _dndContext$over === void 0 ? void 0 : _dndContext$over.id) !== null && _ref3 !== void 0 ? _ref3 : null;
+  var offsetLeft = dndContext.active ? ((_dndContext$active$re = (_dndContext$active$re2 = dndContext.active.rect.current.translated) === null || _dndContext$active$re2 === void 0 ? void 0 : _dndContext$active$re2.left) !== null && _dndContext$active$re !== void 0 ? _dndContext$active$re : 0) - ((_dndContext$active$re3 = (_dndContext$active$re4 = dndContext.active.rect.current.initial) === null || _dndContext$active$re4 === void 0 ? void 0 : _dndContext$active$re4.left) !== null && _dndContext$active$re3 !== void 0 ? _dndContext$active$re3 : 0) : 0;
   var flattenedItems = useMemo(() => {
     var flattenedTree = flattenTree(items);
     if (activeId != null) {
-      return flattenedTree.filter(_ref2 => {
+      return flattenedTree.filter(_ref4 => {
         var {
           id,
           selected
-        } = _ref2;
+        } = _ref4;
         return id === activeId || !selected;
       });
     }
     return flattenedTree;
   }, [activeId, items]);
-  var projected = activeId != null && overId != null ? getProjection(flattenedItems, activeId, overId, offsetLeft, indentationWidth) : null;
-  var sensorContext = useRef({
-    items: flattenedItems,
-    offset: offsetLeft
-  });
-  var keyboardOptions = useMemo(() => ({
-    coordinateGetter: sortableTreeKeyboardCoordinates(sensorContext, indicator, indentationWidth)
-  }), [indentationWidth, indicator]);
-  var sensors = useSensors(useSensor(PointerSensorWithInteraction, CONSTRAINT), useSensor(KeyboardSensor, keyboardOptions));
-  var sortedIds = useMemo(() => flattenedItems.map(_ref3 => {
-    var {
-      id
-    } = _ref3;
-    return id;
-  }), [flattenedItems]);
-  useEffect(() => {
-    sensorContext.current = {
-      items: flattenedItems,
-      offset: offsetLeft
-    };
-  }, [flattenedItems, offsetLeft]);
-  var handleDragStart = useCallback(_ref4 => {
-    var {
-      active: {
-        id: newActiveId
-      }
-    } = _ref4;
-    setActiveId(newActiveId);
-    setOverId(newActiveId);
-    onDragStart === null || onDragStart === void 0 || onDragStart(newActiveId);
-    document.body.style.setProperty('cursor', 'grabbing');
-  }, [onDragStart]);
-  var handleDragMove = useCallback(_ref5 => {
-    var {
-      delta
-    } = _ref5;
-    setOffsetLeft(delta.x);
-  }, []);
-  var handleDragOver = useCallback(_ref6 => {
-    var _ref7;
-    var {
-      over
-    } = _ref6;
-    setOverId((_ref7 = over === null || over === void 0 ? void 0 : over.id) !== null && _ref7 !== void 0 ? _ref7 : null);
-  }, []);
-  var resetState = useCallback(() => {
-    setOverId(null);
-    setActiveId(null);
-    setOffsetLeft(0);
-    document.body.style.setProperty('cursor', '');
-  }, []);
-  var handleDragEnd = useCallback(_ref8 => {
-    var {
-      active,
-      over
-    } = _ref8;
-    resetState();
-    if (projected && over) {
+  var context = useDndContext();
+  var contextRef = useRef(context);
+  useEffect(function updateContextRef() {
+    contextRef.current = context;
+  }, [context]);
+
+  // Without this, animations are funky when using the move/sort buttons
+  // dnd-kit only remeasures on drag/drop by default
+  // The context object changes while dragging (items don't)
+  // Using the context ref allows this to trigger properly on only items changes
+  useEffect(function remeasureContainers() {
+    contextRef.current.measureDroppableContainers(items.map(_ref5 => {
       var {
-        depth,
-        parentId
-      } = projected;
-      var clonedItems = JSON.parse(JSON.stringify(flattenTree(items)));
-      var overIndex = clonedItems.findIndex(_ref9 => {
-        var {
-          id
-        } = _ref9;
-        return id === over.id;
-      });
-      var activeIndex = clonedItems.findIndex(_ref0 => {
-        var {
-          id
-        } = _ref0;
-        return id === active.id;
-      });
-      var activeTreeItem = clonedItems[activeIndex];
-      clonedItems[activeIndex] = _objectSpread(_objectSpread({}, activeTreeItem), {}, {
-        depth,
-        parentId
-      });
-      onDragEnd === null || onDragEnd === void 0 || onDragEnd(activeTreeItem, _objectSpread(_objectSpread({}, clonedItems[overIndex]), {}, {
-        parentId: projected.parentId
-      }));
-    }
-  }, [items, onDragEnd, projected, resetState]);
-  var handleDragCancel = useCallback(() => {
-    resetState();
-  }, [resetState]);
-  return /*#__PURE__*/_jsx(DndContext, {
-    sensors: sensors,
-    collisionDetection: closestCenter,
-    measuring: MEASURING,
-    onDragStart: handleDragStart,
-    onDragMove: handleDragMove,
-    onDragOver: handleDragOver,
-    onDragEnd: handleDragEnd,
-    onDragCancel: handleDragCancel,
-    children: /*#__PURE__*/_jsx(SortableContext, {
-      items: sortedIds,
-      strategy: verticalListSortingStrategy,
-      children: /*#__PURE__*/_jsx(SortableTreeInner, {
-        items: flattenedItems,
+        id
+      } = _ref5;
+      return id;
+    }));
+  }, [items]);
+  var projected = isDraggable && activeId != null && overId != null ? getProjection(flattenedItems, activeId, overId, offsetLeft, indentationWidth) : null;
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames('tree-container', activeId != null && 'marching-ants'),
+    children: flattenedItems.map(item => {
+      var {
+        id,
+        depth
+      } = item;
+      return isDraggable ? /*#__PURE__*/_jsx(SortableTreeItem, {
+        id: id,
+        value: id,
+        depth: id === activeId && projected ? projected.depth : depth,
+        item: item,
+        renderItem: renderItem,
+        withDepthMarkers: withDepthMarkers
+      }, id) : /*#__PURE__*/_jsx(TreeItem, {
+        value: id,
+        depth: depth,
+        item: item,
         renderItem: renderItem,
-        indicator: indicator,
-        indentationWidth: indentationWidth,
-        activeId: activeId,
-        overId: overId,
-        offsetLeft: offsetLeft
-      })
+        withDepthMarkers: withDepthMarkers
+      }, id);
     })
   });
 }

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

@@ -1 +1 @@
-{"version":3,"file":"SortableTree.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","DndContext","closestCenter","KeyboardSensor","useSensor","useSensors","MeasuringStrategy","SortableContext","verticalListSortingStrategy","flattenTree","getProjection","sortableTreeKeyboardCoordinates","PointerSensorWithInteraction","SortableTreeInner","jsx","_jsx","MEASURING","droppable","strategy","Always","CONSTRAINT","activationConstraint","distance","SortableTree","_ref","items","indicator","indentationWidth","onDragStart","onDragEnd","renderItem","activeId","setActiveId","overId","setOverId","offsetLeft","setOffsetLeft","flattenedItems","flattenedTree","filter","_ref2","id","selected","projected","sensorContext","offset","keyboardOptions","coordinateGetter","sensors","sortedIds","map","_ref3","current","handleDragStart","_ref4","active","newActiveId","document","body","style","setProperty","handleDragMove","_ref5","delta","x","handleDragOver","_ref6","_ref7","over","resetState","handleDragEnd","_ref8","depth","parentId","clonedItems","JSON","parse","stringify","overIndex","findIndex","_ref9","activeIndex","_ref0","activeTreeItem","_objectSpread","handleDragCancel","collisionDetection","measuring","onDragMove","onDragOver","onDragCancel","children"],"sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/SortableTree.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  DndContext,\n  closestCenter,\n  KeyboardSensor,\n  useSensor,\n  useSensors,\n  type DragStartEvent,\n  type DragMoveEvent,\n  type DragEndEvent,\n  type DragOverEvent,\n  MeasuringStrategy,\n} from '@dnd-kit/core';\nimport {\n  SortableContext,\n  verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\nimport { flattenTree, getProjection } from './utilities';\nimport type { FlattenedItem, SensorContext, TreeItem } from './types';\nimport { sortableTreeKeyboardCoordinates } from './keyboardCoordinates';\nimport PointerSensorWithInteraction from './PointerSensorWithInteraction';\nimport SortableTreeInner from './SortableTreeInner';\n\nconst MEASURING = {\n  droppable: {\n    strategy: MeasuringStrategy.Always,\n  },\n};\n\nconst CONSTRAINT = {\n  activationConstraint: {\n    distance: 5,\n  },\n};\n\ninterface Props<T> {\n  items: TreeItem<T>[];\n  indentationWidth?: number;\n  indicator?: boolean;\n  onDragStart?: (id: string) => void;\n  onDragEnd?: (from: FlattenedItem<T>, to: FlattenedItem<T>) => void;\n  renderItem: (props: {\n    clone: boolean;\n    childCount?: number;\n    value: string;\n    item: FlattenedItem<T>;\n    ref: React.Ref<HTMLDivElement>;\n    handleProps?: Record<string, unknown>;\n  }) => JSX.Element;\n}\n\nexport default function SortableTree<T>({\n  items,\n  indicator = false,\n  indentationWidth = 30,\n  onDragStart,\n  onDragEnd,\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 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      coordinateGetter: sortableTreeKeyboardCoordinates(\n        sensorContext,\n        indicator,\n        indentationWidth\n      ),\n    }),\n    [indentationWidth, indicator]\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    ({ active: { id: newActiveId } }: DragStartEvent) => {\n      setActiveId(newActiveId as string);\n      setOverId(newActiveId as string);\n      onDragStart?.(newActiveId as string);\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      resetState();\n\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    },\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        <SortableTreeInner\n          items={flattenedItems}\n          renderItem={renderItem}\n          indicator={indicator}\n          indentationWidth={indentationWidth}\n          activeId={activeId}\n          overId={overId}\n          offsetLeft={offsetLeft}\n        />\n      </SortableContext>\n    </DndContext>\n  );\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SortableTree.js","names":["useEffect","useMemo","useRef","classNames","useDndContext","flattenTree","getProjection","SortableTreeItem","TreeItem","jsx","_jsx","SortableTree","_ref","_ref2","_dndContext$active","_ref3","_dndContext$over","_dndContext$active$re","_dndContext$active$re2","_dndContext$active$re3","_dndContext$active$re4","items","indentationWidth","renderItem","isDraggable","withDepthMarkers","dndContext","activeId","active","id","overId","over","offsetLeft","rect","current","translated","left","initial","flattenedItems","flattenedTree","filter","_ref4","selected","context","contextRef","updateContextRef","remeasureContainers","measureDroppableContainers","map","_ref5","projected","className","children","item","depth","value"],"sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/SortableTree.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef } from 'react';\nimport classNames from 'classnames';\nimport { useDndContext } from '@dnd-kit/core';\nimport { flattenTree, getProjection } from './utilities';\nimport { SortableTreeItem } from './SortableTreeItem';\nimport { TreeItem, type TreeItemRenderFn } from './TreeItem';\nimport type { TreeItem as TreeItemType } from './types';\n\ninterface Props<T> {\n  items: TreeItemType<T>[];\n  indentationWidth?: number;\n  renderItem: TreeItemRenderFn<T>;\n  isDraggable?: boolean;\n  withDepthMarkers?: boolean;\n}\n\nexport default function SortableTree<T>({\n  items,\n  indentationWidth = 30,\n  renderItem,\n  isDraggable = true,\n  withDepthMarkers = true,\n}: Props<T>): JSX.Element {\n  const dndContext = useDndContext();\n  const activeId = (dndContext.active?.id as string) ?? null;\n  const overId = (dndContext.over?.id as string) ?? null;\n  const offsetLeft = dndContext.active\n    ? (dndContext.active.rect.current.translated?.left ?? 0) -\n      (dndContext.active.rect.current.initial?.left ?? 0)\n    : 0;\n\n  const flattenedItems = useMemo(() => {\n    const flattenedTree = flattenTree(items);\n\n    if (activeId != null) {\n      return flattenedTree.filter(\n        ({ id, selected }) => id === activeId || !selected\n      );\n    }\n\n    return flattenedTree;\n  }, [activeId, items]);\n\n  const context = useDndContext();\n  const contextRef = useRef(context);\n\n  useEffect(\n    function updateContextRef() {\n      contextRef.current = context;\n    },\n    [context]\n  );\n\n  // Without this, animations are funky when using the move/sort buttons\n  // dnd-kit only remeasures on drag/drop by default\n  // The context object changes while dragging (items don't)\n  // Using the context ref allows this to trigger properly on only items changes\n  useEffect(\n    function remeasureContainers() {\n      contextRef.current.measureDroppableContainers(items.map(({ id }) => id));\n    },\n    [items]\n  );\n\n  const projected =\n    isDraggable && activeId != null && overId != null\n      ? getProjection(\n          flattenedItems,\n          activeId,\n          overId,\n          offsetLeft,\n          indentationWidth\n        )\n      : null;\n\n  return (\n    <div\n      className={classNames(\n        'tree-container',\n        activeId != null && 'marching-ants'\n      )}\n    >\n      {flattenedItems.map(item => {\n        const { id, depth } = item;\n        return isDraggable ? (\n          <SortableTreeItem\n            key={id}\n            id={id}\n            value={id}\n            depth={id === activeId && projected ? projected.depth : depth}\n            item={item}\n            renderItem={renderItem}\n            withDepthMarkers={withDepthMarkers}\n          />\n        ) : (\n          <TreeItem\n            key={id}\n            value={id}\n            depth={depth}\n            item={item}\n            renderItem={renderItem}\n            withDepthMarkers={withDepthMarkers}\n          />\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { type DragStartEvent } from '@dnd-kit/core';
+import type { FlattenedItem, TreeItem as TreeItemType } from './types';
+import { type TreeItemRenderFn } from './TreeItem';
+type Props<T> = React.PropsWithChildren<{
+    items: TreeItemType<T>[];
+    indentationWidth?: number;
+    onDragStart?: (id: string, event: DragStartEvent) => void;
+    onDragEnd?: (from: FlattenedItem<T>, to: FlattenedItem<T>) => void;
+    renderItem: TreeItemRenderFn<T>;
+}>;
+export default function SortableTreeDndContext<T>({ items, indentationWidth, onDragStart, onDragEnd, children, renderItem, }: Props<T>): JSX.Element;
+export {};
+//# sourceMappingURL=SortableTreeDndContext.d.ts.map

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

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

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

@@ -0,0 +1,245 @@
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { DndContext, closestCenter, KeyboardSensor, useSensor, useSensors, MeasuringStrategy, DragOverlay, defaultDropAnimation } from '@dnd-kit/core';
+import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { flattenTree, getChildCount, getProjection } from "./utilities.js";
+import { sortableTreeKeyboardCoordinates } from "./keyboardCoordinates.js";
+import PointerSensorWithInteraction from "./PointerSensorWithInteraction.js";
+import { TreeItem } from "./TreeItem.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var MEASURING = {
+  droppable: {
+    strategy: MeasuringStrategy.Always
+  }
+};
+var CONSTRAINT = {
+  activationConstraint: {
+    distance: 5
+  }
+};
+
+// Disabling pointer events allows us to use scroll wheel while dragging
+var DRAG_OVERLAY_STYLE = {
+  pointerEvents: 'none'
+};
+var dropAnimationConfig = {
+  keyframes(_ref) {
+    var {
+      transform
+    } = _ref;
+    return [{
+      opacity: 1,
+      transform: CSS.Transform.toString(transform.initial)
+    }, {
+      opacity: 0,
+      transform: CSS.Transform.toString(transform.final)
+    }];
+  },
+  easing: 'ease-out',
+  sideEffects(_ref2) {
+    var {
+      active
+    } = _ref2;
+    active.node.animate([{
+      opacity: 0
+    }, {
+      opacity: 1
+    }], {
+      duration: defaultDropAnimation.duration,
+      easing: defaultDropAnimation.easing
+    });
+  }
+};
+
+/**
+ * This adjusts the transform to move to the cursor if it gets shifted due to multi-select.
+ * With multi-select, the selected items (except dragged) are removed on drag.
+ * This can cause the overlay item to disconnect from the cursor in some cases.
+ * E.g. select first 3 items, start dragging from 3rd item.
+ * Without this modifier, the drag overlay will be shifted 60px up from the cursor after the items are removed.
+ *
+ * This assumes all items are the same height as the dragged item
+ * @param args Modifier args from dnd-kit
+ * @returns Transform so that the dragged item stays on the cursor
+ */
+function adjustToCursor(args) {
+  var _adjustToCursor$offse;
+  if (adjustToCursor.offsetY == null && args.activeNodeRect && args.activatorEvent instanceof PointerEvent) {
+    adjustToCursor.offsetY = Math.floor((args.activatorEvent.clientY - args.activeNodeRect.top) / args.activeNodeRect.height) * args.activeNodeRect.height;
+  }
+  if (!args.activeNodeRect) {
+    adjustToCursor.offsetY = null;
+  }
+  return _objectSpread(_objectSpread({}, args.transform), {}, {
+    y: args.transform.y + ((_adjustToCursor$offse = adjustToCursor.offsetY) !== null && _adjustToCursor$offse !== void 0 ? _adjustToCursor$offse : 0)
+  });
+}
+
+// Used to track the offset for adjustToCursor
+// Once drag starts, set this. Once it ends, null this
+// Kind of hacky to store it as a property on the function,
+// but avoids a singleton state or needing hooks to maintain this.
+// The logic came from the dnd-kit example.
+adjustToCursor.offsetY = null;
+export default function SortableTreeDndContext(_ref3) {
+  var {
+    items,
+    indentationWidth = 30,
+    onDragStart,
+    onDragEnd,
+    children,
+    renderItem
+  } = _ref3;
+  var [activeId, setActiveId] = useState(null);
+  var [overId, setOverId] = useState(null);
+  var [offsetLeft, setOffsetLeft] = useState(0);
+  var flattenedItems = useMemo(() => {
+    var flattenedTree = flattenTree(items);
+    if (activeId != null) {
+      return flattenedTree.filter(_ref4 => {
+        var {
+          id,
+          selected
+        } = _ref4;
+        return id === activeId || !selected;
+      });
+    }
+    return flattenedTree;
+  }, [activeId, items]);
+  var activeItem = activeId != null ? flattenedItems.find(_ref5 => {
+    var {
+      id
+    } = _ref5;
+    return id === activeId;
+  }) : null;
+  var projected = activeId != null && overId != null ? getProjection(flattenedItems, activeId, overId, offsetLeft, indentationWidth) : null;
+  var sensorContext = useRef({
+    items: flattenedItems,
+    offset: offsetLeft
+  });
+  var keyboardOptions = useMemo(() => ({
+    coordinateGetter: sortableTreeKeyboardCoordinates(sensorContext, indentationWidth),
+    keyboardCodes: {
+      // Default is space and enter for start/end,
+      // but enter is used to select items from the search list
+      start: ['Space'],
+      cancel: ['Escape'],
+      end: ['Space']
+    }
+  }), [indentationWidth]);
+  var sensors = useSensors(useSensor(PointerSensorWithInteraction, CONSTRAINT), useSensor(KeyboardSensor, keyboardOptions));
+  var sortedIds = useMemo(() => flattenedItems.map(_ref6 => {
+    var {
+      id
+    } = _ref6;
+    return id;
+  }), [flattenedItems]);
+  useEffect(() => {
+    sensorContext.current = {
+      items: flattenedItems,
+      offset: offsetLeft
+    };
+  }, [flattenedItems, offsetLeft]);
+  var handleDragStart = useCallback(event => {
+    var {
+      active: {
+        id: newActiveId
+      }
+    } = event;
+    setActiveId(newActiveId);
+    setOverId(newActiveId);
+    onDragStart === null || onDragStart === void 0 || onDragStart(newActiveId, event);
+    document.body.style.setProperty('cursor', 'grabbing');
+  }, [onDragStart]);
+  var handleDragMove = useCallback(_ref7 => {
+    var {
+      delta
+    } = _ref7;
+    setOffsetLeft(delta.x);
+  }, []);
+  var handleDragOver = useCallback(_ref8 => {
+    var _ref9;
+    var {
+      over
+    } = _ref8;
+    setOverId((_ref9 = over === null || over === void 0 ? void 0 : over.id) !== null && _ref9 !== void 0 ? _ref9 : null);
+  }, []);
+  var resetState = useCallback(() => {
+    setOverId(null);
+    setActiveId(null);
+    setOffsetLeft(0);
+    document.body.style.setProperty('cursor', '');
+  }, []);
+  var handleDragEnd = useCallback(_ref0 => {
+    var {
+      active,
+      over
+    } = _ref0;
+    if (projected && over) {
+      var {
+        depth,
+        parentId
+      } = projected;
+      var clonedItems = JSON.parse(JSON.stringify(flattenTree(items)));
+      var overIndex = clonedItems.findIndex(_ref1 => {
+        var {
+          id
+        } = _ref1;
+        return id === over.id;
+      });
+      var activeIndex = clonedItems.findIndex(_ref10 => {
+        var {
+          id
+        } = _ref10;
+        return id === active.id;
+      });
+      var activeTreeItem = clonedItems[activeIndex];
+      clonedItems[activeIndex] = _objectSpread(_objectSpread({}, activeTreeItem), {}, {
+        depth,
+        parentId
+      });
+      onDragEnd === null || onDragEnd === void 0 || onDragEnd(activeTreeItem, _objectSpread(_objectSpread({}, clonedItems[overIndex]), {}, {
+        parentId: projected.parentId
+      }));
+    }
+    resetState();
+  }, [items, onDragEnd, projected, resetState]);
+  var handleDragCancel = useCallback(() => {
+    resetState();
+  }, [resetState]);
+  return /*#__PURE__*/_jsx(DndContext, {
+    sensors: sensors,
+    collisionDetection: closestCenter,
+    measuring: MEASURING,
+    onDragStart: handleDragStart,
+    onDragMove: handleDragMove,
+    onDragOver: handleDragOver,
+    onDragEnd: handleDragEnd,
+    onDragCancel: handleDragCancel,
+    children: /*#__PURE__*/_jsxs(SortableContext, {
+      items: sortedIds,
+      strategy: verticalListSortingStrategy,
+      children: [children, /*#__PURE__*/createPortal(/*#__PURE__*/_jsx(DragOverlay, {
+        dropAnimation: dropAnimationConfig,
+        modifiers: [adjustToCursor],
+        className: "visibility-ordering-list",
+        style: DRAG_OVERLAY_STYLE,
+        children: activeId != null && activeItem ? /*#__PURE__*/_jsx(TreeItem, {
+          depth: activeItem.depth,
+          clone: true,
+          childCount: getChildCount(items, activeId) + 1,
+          value: activeId.toString(),
+          renderItem: renderItem,
+          item: activeItem
+        }) : null
+      }), document.body)]
+    })
+  });
+}
+//# sourceMappingURL=SortableTreeDndContext.js.map