@deephaven/iris-grid 0.43.0 → 0.44.0

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

@@ -0,0 +1,81 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+/* eslint-disable react/prop-types */
+import React, { forwardRef, useCallback, useRef } from 'react';
+import classNames from 'classnames';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { dhEye, dhEyeSlash, vsGripper } from '@deephaven/icons';
+import { Button, Tooltip } from '@deephaven/components';
+import VisibilityOrderingGroup from "./VisibilityOrderingGroup.js";
+function emptyOnClick() {
+  // no-op
+}
+var VisibilityOrderingItem = /*#__PURE__*/forwardRef(function VisibilityOrderingItem(props, ref) {
+  var {
+    value,
+    clone,
+    childCount,
+    item,
+    onVisibilityChange,
+    onClick,
+    onGroupDelete,
+    onGroupColorChange,
+    onGroupNameChange,
+    validateGroupName,
+    handleProps
+  } = props;
+  var {
+    group,
+    modelIndex,
+    isVisible
+  } = item.data;
+  var buttonRef = useRef(null);
+  var handleVisibilityChange = useCallback(e => {
+    if (e.buttons === 1) {
+      var _buttonRef$current;
+      onVisibilityChange([modelIndex].flat(), !isVisible);
+      (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
+    }
+  }, [onVisibilityChange, modelIndex, isVisible]);
+  var handleClick = useCallback(event => {
+    onClick(value, event);
+  }, [onClick, value]);
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    React.createElement("div", _extends({
+      ref: ref,
+      className: classNames('tree-item', {
+        isSelected: item.selected,
+        'two-dragged': childCount === 2,
+        'multiple-dragged': childCount > 2
+      }),
+      onClick: handleClick
+      // eslint-disable-next-line react/jsx-props-no-spreading
+    }, handleProps), /*#__PURE__*/React.createElement(Button, {
+      ref: buttonRef,
+      kind: "ghost",
+      className: "px-1"
+      // We PropType validate onClick for Button
+      ,
+      onClick: emptyOnClick,
+      onMouseDown: handleVisibilityChange,
+      onMouseEnter: handleVisibilityChange,
+      icon: isVisible ? dhEye : dhEyeSlash,
+      tooltip: "Toggle visibility"
+    }), /*#__PURE__*/React.createElement("span", {
+      className: classNames('column-name', group && 'column-group')
+    }, group && !clone ? /*#__PURE__*/React.createElement(VisibilityOrderingGroup, {
+      group: group,
+      onDelete: onGroupDelete,
+      onColorChange: onGroupColorChange,
+      onNameChange: onGroupNameChange,
+      validateName: validateGroupName
+    }) : value), /*#__PURE__*/React.createElement("div", null, clone && childCount > 1 && /*#__PURE__*/React.createElement("span", {
+      className: "item-count"
+    }, childCount), /*#__PURE__*/React.createElement(Tooltip, null, "Drag to re-order"), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      icon: vsGripper
+    })))
+  );
+});
+export default VisibilityOrderingItem;
+//# sourceMappingURL=VisibilityOrderingItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VisibilityOrderingItem.js","names":["React","forwardRef","useCallback","useRef","classNames","FontAwesomeIcon","dhEye","dhEyeSlash","vsGripper","Button","Tooltip","VisibilityOrderingGroup","emptyOnClick","VisibilityOrderingItem","props","ref","value","clone","childCount","item","onVisibilityChange","onClick","onGroupDelete","onGroupColorChange","onGroupNameChange","validateGroupName","handleProps","group","modelIndex","isVisible","data","buttonRef","handleVisibilityChange","e","buttons","flat","current","focus","handleClick","event","isSelected","selected"],"sources":["../../../src/sidebar/visibility-ordering-builder/VisibilityOrderingItem.tsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport 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 { 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): void;\n  onGroupDelete(group: ColumnHeaderGroup): void;\n  onGroupColorChange(group: ColumnHeaderGroup, color: string | undefined): void;\n  onGroupNameChange(group: ColumnHeaderGroup, name: string): void;\n  validateGroupName(name: string): string;\n  handleProps: Record<string, unknown>;\n};\n\nfunction emptyOnClick() {\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) => {\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      // 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;AACA,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;AAkB9B,SAASC,YAAY,GAAG;EACtB;AAAA;AAGF,IAAMC,sBAAsB,gBAAGZ,UAAU,CAGvC,SAASY,sBAAsB,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,GAAG5B,MAAM,CAAoB,IAAI,CAAC;EAEjD,IAAM6B,sBAAsB,GAAG9B,WAAW,CACvC+B,CAAmB,IAAK;IACvB,IAAIA,CAAC,CAACC,OAAO,KAAK,CAAC,EAAE;MAAA;MACnBd,kBAAkB,CAAC,CAACQ,UAAU,CAAC,CAACO,IAAI,EAAE,EAAE,CAACN,SAAS,CAAC;MACnD,sBAAAE,SAAS,CAACK,OAAO,uDAAjB,mBAAmBC,KAAK,EAAE;IAC5B;EACF,CAAC,EACD,CAACjB,kBAAkB,EAAEQ,UAAU,EAAEC,SAAS,CAAC,CAC5C;EAED,IAAMS,WAAW,GAAGpC,WAAW,CAC5BqC,KAAuB,IAAK;IAC3BlB,OAAO,CAACL,KAAK,EAAEuB,KAAK,CAAC;EACvB,CAAC,EACD,CAAClB,OAAO,EAAEL,KAAK,CAAC,CACjB;EAED;IAAA;IACE;IACA;MACE,GAAG,EAAED,GAAI;MACT,SAAS,EAAEX,UAAU,CAAC,WAAW,EAAE;QACjCoC,UAAU,EAAErB,IAAI,CAACsB,QAAQ;QACzB,aAAa,EAAEvB,UAAU,KAAK,CAAC;QAC/B,kBAAkB,EAAEA,UAAU,GAAG;MACnC,CAAC,CAAE;MACH,OAAO,EAAEoB;MACT;IAAA,GACIZ,WAAW,gBAEf,oBAAC,MAAM;MACL,GAAG,EAAEK,SAAU;MACf,IAAI,EAAC,OAAO;MACZ,SAAS,EAAC;MACV;MAAA;MACA,OAAO,EAAEnB,YAAa;MACtB,WAAW,EAAEoB,sBAAuB;MACpC,YAAY,EAAEA,sBAAuB;MACrC,IAAI,EAAEH,SAAS,GAAGvB,KAAK,GAAGC,UAAW;MACrC,OAAO,EAAC;IAAmB,EAC3B,eACF;MAAM,SAAS,EAAEH,UAAU,CAAC,aAAa,EAAEuB,KAAK,IAAI,cAAc;IAAE,GAEjEA,KAAK,IAAI,CAACV,KAAK,gBACd,oBAAC,uBAAuB;MACtB,KAAK,EAAEU,KAAM;MACb,QAAQ,EAAEL,aAAc;MACxB,aAAa,EAAEC,kBAAmB;MAClC,YAAY,EAAEC,iBAAkB;MAChC,YAAY,EAAEC;IAAkB,EAChC,GAEFT,KACD,CACI,eACP,iCACGC,KAAK,IAAIC,UAAU,GAAG,CAAC,iBACtB;MAAM,SAAS,EAAC;IAAY,GAAEA,UAAU,CACzC,eACD,oBAAC,OAAO,QAAC,kBAAgB,CAAU,eACnC,oBAAC,eAAe;MAAC,IAAI,EAAEV;IAAU,EAAG,CAChC;EACF;AAEV,CAAC,CAAC;AAEF,eAAeK,sBAAsB"}

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

@@ -0,0 +1,30 @@
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import { PointerSensor } from '@dnd-kit/core';
+
+/**
+ * An extended "PointerSensor" that prevent some
+ * interactive html element(button, input, textarea, select, option...) from dragging
+ */
+export default class PointerSensorWithInteraction extends PointerSensor {}
+_defineProperty(PointerSensorWithInteraction, "activators", [{
+  eventName: 'onPointerDown',
+  handler: _ref => {
+    var {
+      nativeEvent: event
+    } = _ref;
+    if (!event.isPrimary || event.button !== 0 || isInteractiveElement(event.target)) {
+      return false;
+    }
+    return true;
+  }
+}]);
+var INTERACTIVE_ELEMENTS = ['button', 'input', 'textarea', 'select', 'option'];
+function isInteractiveElement(element) {
+  if ((element === null || element === void 0 ? void 0 : element.tagName) != null && INTERACTIVE_ELEMENTS.includes(element.tagName.toLowerCase())) {
+    return true;
+  }
+  return false;
+}
+//# sourceMappingURL=PointerSensorWithInteraction.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PointerSensorWithInteraction.js","names":["PointerSensor","PointerSensorWithInteraction","eventName","handler","nativeEvent","event","isPrimary","button","isInteractiveElement","target","INTERACTIVE_ELEMENTS","element","tagName","includes","toLowerCase"],"sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/PointerSensorWithInteraction.ts"],"sourcesContent":["import type { PointerEvent } from 'react';\nimport { PointerSensor } from '@dnd-kit/core';\n\n/**\n * An extended \"PointerSensor\" that prevent some\n * interactive html element(button, input, textarea, select, option...) from dragging\n */\nexport default class PointerSensorWithInteraction extends PointerSensor {\n  static activators = [\n    {\n      eventName: 'onPointerDown' as const,\n      handler: ({ nativeEvent: event }: PointerEvent) => {\n        if (\n          !event.isPrimary ||\n          event.button !== 0 ||\n          isInteractiveElement(event.target as Element)\n        ) {\n          return false;\n        }\n\n        return true;\n      },\n    },\n  ];\n}\n\nconst INTERACTIVE_ELEMENTS = [\n  'button',\n  'input',\n  'textarea',\n  'select',\n  'option',\n];\n\nfunction isInteractiveElement(element: Element | null) {\n  if (\n    element?.tagName != null &&\n    INTERACTIVE_ELEMENTS.includes(element.tagName.toLowerCase())\n  ) {\n    return true;\n  }\n\n  return false;\n}\n"],"mappings":";;;AACA,SAASA,aAAa,QAAQ,eAAe;;AAE7C;AACA;AACA;AACA;AACA,eAAe,MAAMC,4BAA4B,SAASD,aAAa,CAAC;AAiBvE,gBAjBoBC,4BAA4B,gBAC3B,CAClB;EACEC,SAAS,EAAE,eAAwB;EACnCC,OAAO,EAAE,QAA0C;IAAA,IAAzC;MAAEC,WAAW,EAAEC;IAAoB,CAAC;IAC5C,IACE,CAACA,KAAK,CAACC,SAAS,IAChBD,KAAK,CAACE,MAAM,KAAK,CAAC,IAClBC,oBAAoB,CAACH,KAAK,CAACI,MAAM,CAAY,EAC7C;MACA,OAAO,KAAK;IACd;IAEA,OAAO,IAAI;EACb;AACF,CAAC,CACF;AAGH,IAAMC,oBAAoB,GAAG,CAC3B,QAAQ,EACR,OAAO,EACP,UAAU,EACV,QAAQ,EACR,QAAQ,CACT;AAED,SAASF,oBAAoB,CAACG,OAAuB,EAAE;EACrD,IACE,CAAAA,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEC,OAAO,KAAI,IAAI,IACxBF,oBAAoB,CAACG,QAAQ,CAACF,OAAO,CAACC,OAAO,CAACE,WAAW,EAAE,CAAC,EAC5D;IACA,OAAO,IAAI;EACb;EAEA,OAAO,KAAK;AACd"}

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

@@ -0,0 +1,158 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+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 { flattenTree, getProjection } from "./utilities.js";
+import { sortableTreeKeyboardCoordinates } from "./keyboardCoordinates.js";
+import PointerSensorWithInteraction from "./PointerSensorWithInteraction.js";
+import SortableTreeInner from "./SortableTreeInner.js";
+var MEASURING = {
+  droppable: {
+    strategy: MeasuringStrategy.Always
+  }
+};
+var CONSTRAINT = {
+  activationConstraint: {
+    distance: 5
+  }
+};
+export default function SortableTree(_ref) {
+  var {
+    items,
+    indicator = false,
+    indentationWidth = 30,
+    onDragStart,
+    onDragEnd,
+    renderItem
+  } = _ref;
+  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(_ref2 => {
+        var {
+          id,
+          selected
+        } = _ref2;
+        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 ? 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 {
+        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(_ref10 => {
+        var {
+          id
+        } = _ref10;
+        return id === active.id;
+      });
+      var activeTreeItem = clonedItems[activeIndex];
+      clonedItems[activeIndex] = _objectSpread(_objectSpread({}, activeTreeItem), {}, {
+        depth,
+        parentId
+      });
+      onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(activeTreeItem, _objectSpread(_objectSpread({}, clonedItems[overIndex]), {}, {
+        parentId: projected.parentId
+      }));
+    }
+  }, [items, onDragEnd, projected, resetState]);
+  var handleDragCancel = useCallback(() => {
+    resetState();
+  }, [resetState]);
+  return /*#__PURE__*/React.createElement(DndContext, {
+    sensors: sensors,
+    collisionDetection: closestCenter,
+    measuring: MEASURING,
+    onDragStart: handleDragStart,
+    onDragMove: handleDragMove,
+    onDragOver: handleDragOver,
+    onDragEnd: handleDragEnd,
+    onDragCancel: handleDragCancel
+  }, /*#__PURE__*/React.createElement(SortableContext, {
+    items: sortedIds,
+    strategy: verticalListSortingStrategy
+  }, /*#__PURE__*/React.createElement(SortableTreeInner, {
+    items: flattenedItems,
+    renderItem: renderItem,
+    indicator: indicator,
+    indentationWidth: indentationWidth,
+    activeId: activeId,
+    overId: overId,
+    offsetLeft: offsetLeft
+  })));
+}
+//# sourceMappingURL=SortableTree.js.map

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

@@ -0,0 +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","MEASURING","droppable","strategy","Always","CONSTRAINT","activationConstraint","distance","SortableTree","items","indicator","indentationWidth","onDragStart","onDragEnd","renderItem","activeId","setActiveId","overId","setOverId","offsetLeft","setOffsetLeft","flattenedItems","flattenedTree","filter","id","selected","projected","sensorContext","offset","keyboardOptions","coordinateGetter","sensors","sortedIds","map","current","handleDragStart","active","newActiveId","document","body","style","setProperty","handleDragMove","delta","x","handleDragOver","over","resetState","handleDragEnd","depth","parentId","clonedItems","JSON","parse","stringify","overIndex","findIndex","activeIndex","activeTreeItem","handleDragCancel"],"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  DragStartEvent,\n  DragMoveEvent,\n  DragEndEvent,\n  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  }): 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(() => 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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"}

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

@@ -0,0 +1,146 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import React, { useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import classNames from 'classnames';
+import { DragOverlay, defaultDropAnimation, useDndContext } from '@dnd-kit/core';
+import { CSS } from '@dnd-kit/utilities';
+import { getProjection, getChildCount } from "./utilities.js";
+import { SortableTreeItem } from "./SortableTreeItem.js";
+var dropAnimationConfig = {
+  keyframes(_ref) {
+    var {
+      transform
+    } = _ref;
+    return [{
+      opacity: 1,
+      transform: CSS.Transform.toString(transform.initial)
+    }, {
+      opacity: 0,
+      transform: CSS.Transform.toString(_objectSpread(_objectSpread({}, transform.final), {}, {
+        x: transform.final.x + 5,
+        y: transform.final.y + 5
+      }))
+    }];
+  },
+  easing: 'ease-out',
+  sideEffects(_ref2) {
+    var {
+      active
+    } = _ref2;
+    active.node.animate([{
+      opacity: 0
+    }, {
+      opacity: 1
+    }], {
+      duration: defaultDropAnimation.duration,
+      easing: defaultDropAnimation.easing
+    });
+  }
+};
+
+// Used to track the offset for adjustToCursor
+// Once drag starts, set this. Once it ends, null this
+var offsetY = null;
+
+/**
+ * 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 _offsetY;
+  if (offsetY == null && args.activeNodeRect && args.activatorEvent instanceof PointerEvent) {
+    offsetY = Math.floor((args.activatorEvent.clientY - args.activeNodeRect.top) / args.activeNodeRect.height) * args.activeNodeRect.height;
+  }
+  if (!args.activeNodeRect) {
+    offsetY = null;
+  }
+  return _objectSpread(_objectSpread({}, args.transform), {}, {
+    y: args.transform.y + ((_offsetY = offsetY) !== null && _offsetY !== void 0 ? _offsetY : 0)
+  });
+}
+export default function SortableTreeInner(_ref3) {
+  var {
+    items,
+    renderItem,
+    indentationWidth = 30,
+    indicator = false,
+    activeId,
+    overId,
+    offsetLeft
+  } = _ref3;
+  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(_ref4 => {
+      var {
+        id
+      } = _ref4;
+      return id;
+    }));
+  }, [items]);
+  var projected = activeId != null && overId != null ? getProjection(items, activeId, overId, offsetLeft, indentationWidth) : null;
+  var sensorContext = useRef({
+    items,
+    offset: offsetLeft
+  });
+  var activeItem = activeId != null ? items.find(_ref5 => {
+    var {
+      id
+    } = _ref5;
+    return id === activeId;
+  }) : null;
+  useEffect(() => {
+    sensorContext.current = {
+      items,
+      offset: offsetLeft
+    };
+  }, [items, offsetLeft]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: classNames('tree-container', activeId != null && 'marching-ants')
+  }, items.map(item => {
+    var {
+      id,
+      depth
+    } = item;
+    return /*#__PURE__*/React.createElement(SortableTreeItem, {
+      key: id,
+      id: id,
+      value: id,
+      depth: id === activeId && projected ? projected.depth : depth,
+      item: item,
+      renderItem: renderItem
+    });
+  })), /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(DragOverlay, {
+    dropAnimation: dropAnimationConfig,
+    modifiers: [adjustToCursor],
+    className: "visibility-ordering-list"
+  }, activeId != null && activeItem ? /*#__PURE__*/React.createElement(SortableTreeItem, {
+    id: activeId,
+    depth: activeItem.depth,
+    clone: true,
+    childCount: getChildCount(items, activeId) + 1,
+    value: activeId.toString(),
+    renderItem: renderItem,
+    item: activeItem
+  }) : null), document.body));
+}
+//# sourceMappingURL=SortableTreeInner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SortableTreeInner.js","names":["React","useEffect","useRef","createPortal","classNames","DragOverlay","defaultDropAnimation","useDndContext","CSS","getProjection","getChildCount","SortableTreeItem","dropAnimationConfig","keyframes","transform","opacity","Transform","toString","initial","final","x","y","easing","sideEffects","active","node","animate","duration","offsetY","adjustToCursor","args","activeNodeRect","activatorEvent","PointerEvent","Math","floor","clientY","top","height","SortableTreeInner","items","renderItem","indentationWidth","indicator","activeId","overId","offsetLeft","context","contextRef","updateContextRef","current","remeasureContainers","measureDroppableContainers","map","id","projected","sensorContext","offset","activeItem","find","item","depth","document","body"],"sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/SortableTreeInner.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport classNames from 'classnames';\nimport {\n  DragOverlay,\n  DropAnimation,\n  Modifier,\n  defaultDropAnimation,\n  useDndContext,\n} from '@dnd-kit/core';\nimport { CSS } from '@dnd-kit/utilities';\nimport { getProjection, getChildCount } from './utilities';\nimport type { FlattenedItem, SensorContext } from './types';\nimport { SortableTreeItem } from './SortableTreeItem';\n\nconst dropAnimationConfig: DropAnimation = {\n  keyframes({ transform }) {\n    return [\n      { opacity: 1, transform: CSS.Transform.toString(transform.initial) },\n      {\n        opacity: 0,\n        transform: CSS.Transform.toString({\n          ...transform.final,\n          x: transform.final.x + 5,\n          y: transform.final.y + 5,\n        }),\n      },\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// Used to track the offset for adjustToCursor\n// Once drag starts, set this. Once it ends, null this\nlet offsetY: number | null = null;\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  if (\n    offsetY == null &&\n    args.activeNodeRect &&\n    args.activatorEvent instanceof PointerEvent\n  ) {\n    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    offsetY = null;\n  }\n\n  return { ...args.transform, y: args.transform.y + (offsetY ?? 0) };\n}\n\ninterface Props<T> {\n  items: FlattenedItem<T>[];\n  indentationWidth?: number;\n  indicator?: boolean;\n  renderItem(props: {\n    clone: boolean;\n    childCount?: number;\n    value: string;\n    item: FlattenedItem<T>;\n  }): JSX.Element;\n  activeId: string | null;\n  overId: string | null;\n  offsetLeft: number;\n}\n\nexport default function SortableTreeInner<T>({\n  items,\n  renderItem,\n  indentationWidth = 30,\n  indicator = false,\n  activeId,\n  overId,\n  offsetLeft,\n}: Props<T>): JSX.Element {\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    activeId != null && overId != null\n      ? getProjection(items, activeId, overId, offsetLeft, indentationWidth)\n      : null;\n  const sensorContext: SensorContext = useRef({\n    items,\n    offset: offsetLeft,\n  });\n\n  const activeItem =\n    activeId != null ? items.find(({ id }) => id === activeId) : null;\n\n  useEffect(() => {\n    sensorContext.current = {\n      items,\n      offset: offsetLeft,\n    };\n  }, [items, offsetLeft]);\n\n  return (\n    <>\n      <div\n        className={classNames(\n          'tree-container',\n          activeId != null && 'marching-ants'\n        )}\n      >\n        {items.map(item => {\n          const { id, depth } = item;\n          return (\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            />\n          );\n        })}\n      </div>\n      {createPortal(\n        <DragOverlay\n          dropAnimation={dropAnimationConfig}\n          modifiers={[adjustToCursor]}\n          className=\"visibility-ordering-list\"\n        >\n          {activeId != null && activeItem ? (\n            <SortableTreeItem\n              id={activeId}\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    </>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,59 @@
+var _excluded = ["id", "depth"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+/* eslint-disable import/prefer-default-export */
+import React, { useMemo } from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { TreeItem } from "./TreeItem.js";
+var animateLayoutChanges = _ref => {
+  var {
+    isSorting,
+    wasDragging
+  } = _ref;
+  return !(isSorting || wasDragging);
+};
+export function SortableTreeItem(_ref2) {
+  var {
+      id,
+      depth
+    } = _ref2,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  var {
+    attributes,
+    isDragging,
+    isSorting,
+    listeners,
+    setDraggableNodeRef,
+    setDroppableNodeRef,
+    transform,
+    transition
+  } = useSortable({
+    id,
+    animateLayoutChanges
+  });
+  var transformString = CSS.Translate.toString(transform);
+  var style = useMemo(() => ({
+    transform: transformString,
+    transition
+  }), [transformString, transition]);
+  var handleProps = useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, attributes), listeners), {}, {
+    style
+  }), [attributes, listeners, style]);
+  return /*#__PURE__*/React.createElement(TreeItem, _extends({
+    dragRef: setDraggableNodeRef,
+    wrapperRef: setDroppableNodeRef,
+    depth: depth,
+    ghost: isDragging,
+    disableInteraction: isSorting,
+    handleProps: handleProps
+    // eslint-disable-next-line react/jsx-props-no-spreading
+  }, props));
+}
+//# sourceMappingURL=SortableTreeItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SortableTreeItem.js","names":["React","useMemo","useSortable","CSS","TreeItem","animateLayoutChanges","isSorting","wasDragging","SortableTreeItem","id","depth","props","attributes","isDragging","listeners","setDraggableNodeRef","setDroppableNodeRef","transform","transition","transformString","Translate","toString","style","handleProps"],"sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/SortableTreeItem.tsx"],"sourcesContent":["/* eslint-disable import/prefer-default-export */\nimport React, { CSSProperties, useMemo } from 'react';\nimport { AnimateLayoutChanges, useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { TreeItem, 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,IAAmBC,OAAO,QAAQ,OAAO;AACrD,SAA+BC,WAAW,QAAQ,mBAAmB;AACrE,SAASC,GAAG,QAAQ,oBAAoB;AAAC,SAChCC,QAAQ;AAMjB,IAAMC,oBAA0C,GAAG;EAAA,IAAC;IAClDC,SAAS;IACTC;EACF,CAAC;EAAA,OAAK,EAAED,SAAS,IAAIC,WAAW,CAAC;AAAA;AAEjC,OAAO,SAASC,gBAAgB,QAIN;EAAA,IAJU;MAClCC,EAAE;MACFC;IAEQ,CAAC;IADNC,KAAK;EAER,IAAM;IACJC,UAAU;IACVC,UAAU;IACVP,SAAS;IACTQ,SAAS;IACTC,mBAAmB;IACnBC,mBAAmB;IACnBC,SAAS;IACTC;EACF,CAAC,GAAGhB,WAAW,CAAC;IACdO,EAAE;IACFJ;EACF,CAAC,CAAC;EAEF,IAAMc,eAAe,GAAGhB,GAAG,CAACiB,SAAS,CAACC,QAAQ,CAACJ,SAAS,CAAC;EAEzD,IAAMK,KAAoB,GAAGrB,OAAO,CAClC,OAAO;IACLgB,SAAS,EAAEE,eAAe;IAC1BD;EACF,CAAC,CAAC,EACF,CAACC,eAAe,EAAED,UAAU,CAAC,CAC9B;EAED,IAAMK,WAAW,GAAGtB,OAAO,CACzB,oDACKW,UAAU,GACVE,SAAS;IACZQ;EAAK,EACL,EACF,CAACV,UAAU,EAAEE,SAAS,EAAEQ,KAAK,CAAC,CAC/B;EAED,oBACE,oBAAC,QAAQ;IACP,OAAO,EAAEP,mBAAoB;IAC7B,UAAU,EAAEC,mBAAoB;IAChC,KAAK,EAAEN,KAAM;IACb,KAAK,EAAEG,UAAW;IAClB,kBAAkB,EAAEP,SAAU;IAC9B,WAAW,EAAEiB;IACb;EAAA,GACIZ,KAAK,EACT;AAEN"}