@luscii-healthtech/web-ui 2.64.1 → 2.65.0

package/dist/web-ui.cjs.development.js

@@ -7,7 +7,6 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 var React = require('react');
 var React__default = _interopDefault(React);
 var classNames = _interopDefault(require('classnames'));
-var dragula = _interopDefault(require('react-dragula'));
 var lodash = require('lodash');
 var core = require('@dnd-kit/core');
 var sortable = require('@dnd-kit/sortable');
@@ -2804,71 +2803,79 @@ var _excluded$9 = ["items", "onDragEnd", "onAssetLoadError"];
 
 var DefaultList = function DefaultList(_ref) {
   var items = _ref.items,
-      onDragEnd = _ref.onDragEnd,
+      _onDragEnd = _ref.onDragEnd,
       onAssetLoadError = _ref.onAssetLoadError,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
 
-  var listRef = React.useRef(null);
-  var dragulaRef = React.useRef(null);
-  React.useEffect(function () {
-    var _dragulaRef$current;
-
-    (_dragulaRef$current = dragulaRef.current) == null ? void 0 : _dragulaRef$current.destroy == null ? void 0 : _dragulaRef$current.destroy();
+  var sensor = core.useSensor(core.MouseSensor);
 
-    if (listRef.current && onDragEnd && items.length) {
-      dragulaRef.current = setupDragging();
-    }
+  var _useState = React.useState(null),
+      draggedListItem = _useState[0],
+      setDraggedListItem = _useState[1];
 
-    return function () {
-      var _dragulaRef$current2;
+  var _useState2 = React.useState(items),
+      innerItems = _useState2[0],
+      setInnerItems = _useState2[1];
 
-      (_dragulaRef$current2 = dragulaRef.current) == null ? void 0 : _dragulaRef$current2.destroy == null ? void 0 : _dragulaRef$current2.destroy();
-    };
-  }, [items, listRef]);
+  React.useEffect(function () {
+    setInnerItems(items);
+  }, [items]);
 
-  var handleDragEnd = function handleDragEnd(element) {
-    var draggedItemId = element.dataset["id"];
+  if (!_onDragEnd) {
+    return /*#__PURE__*/React__default.createElement(BaseList, _extends({
+      itemComponent: ListItem,
+      items: items.map(function (item) {
+        return _extends({}, item, {
+          isDraggable: false,
+          onAssetLoadError: onAssetLoadError
+        });
+      })
+    }, props));
+  }
 
-    if (listRef.current && draggedItemId) {
-      var itemIdsWithOldOrder = items.map(function (item) {
-        return item.itemId.toString();
-      });
-      var itemIdsWithNewOrder = Array.from(listRef.current.children).map(function (child) {
-        return child.dataset["id"];
-      }).filter(function (itemId) {
-        return !!itemId;
-      });
-      var oldIndexOfDraggedItemId = itemIdsWithOldOrder.indexOf(draggedItemId);
-      var newIndexOfDraggedItemId = itemIdsWithNewOrder.indexOf(draggedItemId);
+  return /*#__PURE__*/React__default.createElement(core.DndContext, {
+    sensors: [sensor],
+    onDragStart: function onDragStart(event) {
+      setDraggedListItem(getDndListItemProps(event.active));
+    },
+    onDragEnd: function onDragEnd(event) {
+      var _event$active, _event$active$data, _event$active$data$cu, _event$active$data$cu2, _event$over, _event$over$data, _event$over$data$curr, _event$over$data$curr2;
 
-      if (oldIndexOfDraggedItemId !== newIndexOfDraggedItemId) {
-        onDragEnd == null ? void 0 : onDragEnd(draggedItemId, newIndexOfDraggedItemId);
+      if (!draggedListItem) {
+        return;
       }
-    }
-  };
 
-  var setupDragging = function setupDragging() {
-    if (!listRef.current) {
-      return null;
-    }
+      var currentIndex = (_event$active = event.active) == null ? void 0 : (_event$active$data = _event$active.data) == null ? void 0 : (_event$active$data$cu = _event$active$data.current) == null ? void 0 : (_event$active$data$cu2 = _event$active$data$cu.sortable) == null ? void 0 : _event$active$data$cu2.index;
+      var newIndex = (_event$over = event.over) == null ? void 0 : (_event$over$data = _event$over.data) == null ? void 0 : (_event$over$data$curr = _event$over$data.current) == null ? void 0 : (_event$over$data$curr2 = _event$over$data$curr.sortable) == null ? void 0 : _event$over$data$curr2.index;
 
-    var dragulaInstance = dragula([listRef.current], {
-      revertOnSpill: true
-    });
-    dragulaInstance.on("dragend", handleDragEnd);
-    return dragulaInstance;
-  };
+      if (typeof currentIndex === "number" && typeof newIndex === "number") {
+        setInnerItems(sortable.arrayMove(innerItems, currentIndex, newIndex));
 
-  return /*#__PURE__*/React__default.createElement(BaseList, _extends({
-    ref: listRef,
-    itemComponent: ListItem,
-    items: items.map(function (item) {
+        _onDragEnd(draggedListItem.itemId, newIndex);
+      }
+
+      setDraggedListItem(null);
+    }
+  }, /*#__PURE__*/React__default.createElement(SortableBaseList, _extends({
+    draggableIdentifier: "sortable-list-identifier",
+    items: innerItems.map(function (item) {
       return _extends({}, item, {
-        isDraggable: !!onDragEnd,
+        draggableIdentifier: "" + item.itemId,
+        isDraggable: true,
         onAssetLoadError: onAssetLoadError
       });
     })
-  }, props));
+  }, props)), /*#__PURE__*/React__default.createElement(core.DragOverlay, {
+    dropAnimation: null,
+    wrapperElement: "ul",
+    className: "shadow-lg"
+  }, draggedListItem && /*#__PURE__*/React__default.createElement(ListItem, _extends({}, draggedListItem, {
+    renderDragHandle: function renderDragHandle() {
+      return /*#__PURE__*/React__default.createElement(DragHandle, {
+        grabbing: true
+      });
+    }
+  }))));
 }; // Rest operator isn't used here because TS seems to require the operation
 // happening in the branch of the code where the object is used in