@reportportal/ui-kit 0.0.1-alpha.238 → 0.0.1-alpha.239

package/dist/sortable.js

@@ -1,51 +1,330 @@
-import { S as D } from "./treeSortableItem-301dbd92.js";
-import { D as N, a as O, T as P } from "./treeSortableItem-301dbd92.js";
-import { jsx as i } from "react/jsx-runtime";
-import { useCallback as S } from "react";
-import { D as T } from "./useTreeSortable-bc631689.js";
-import "./bind-06a7ff84.js";
-import "es-toolkit";
-import "react-dnd";
+import { jsx as T, jsxs as Y } from "react/jsx-runtime";
+import { c as V } from "./bind-06a7ff84.js";
+import { isFunction as z } from "es-toolkit";
+import { useCallback as F, createContext as ie, useContext as se, useState as Z, useRef as M } from "react";
+import { u as ae, D as U, g as ne, a as pe } from "./useTreeSortable-bc631689.js";
+import { useDragLayer as le } from "react-dnd";
 import "react-dnd-html5-backend";
-import "./common.js";
-import "react-dom";
-import "./useOnClickOutside-8f7d68a1.js";
-const j = ({
-  items: a,
-  type: l = T,
-  isDisabled: c = !1,
-  className: n,
-  itemClassName: d,
+import { DROP_DETECTION_MODE as J, SORTABLE_ORIENTATION as K, DROP_POSITIONS as B, DROP_ACTIONS as f, TREE_DROP_POSITIONS as E } from "./common.js";
+import { createPortal as ee } from "react-dom";
+import { u as de } from "./useOnClickOutside-8f7d68a1.js";
+const ce = {
+  "sortable-item": "_sortable-item_1l4xp_16",
+  "sortable-item--horizontal": "_sortable-item--horizontal_1l4xp_22",
+  "sortable-item--drop-target-top": "_sortable-item--drop-target-top_1l4xp_25",
+  "sortable-item--drop-target-bottom": "_sortable-item--drop-target-bottom_1l4xp_38",
+  "sortable-item--hover-mode": "_sortable-item--hover-mode_1l4xp_51",
+  "sortable-item--drop-target-left": "_sortable-item--drop-target-left_1l4xp_67",
+  "sortable-item--drop-target-right": "_sortable-item--drop-target-right_1l4xp_77",
+  "drag-handle": "_drag-handle_1l4xp_88",
+  "drag-handle--disabled": "_drag-handle--disabled_1l4xp_95"
+}, me = V.bind(ce), _e = ({
+  id: n,
+  index: b,
+  type: v = U,
+  isDisabled: I = !1,
+  className: i,
+  draggingClassName: p,
+  dropTargetClassName: o,
+  onDrop: l,
+  hideDefaultPreview: s = !1,
+  dropDetectionMode: e = J.INDEX_BASED,
+  orientation: r = K.VERTICAL,
+  isLast: c = !1,
+  children: m
+}) => {
+  const { isDragging: R, dropPosition: _, dragRef: P, dropRef: S, previewRef: A } = ae({
+    id: n,
+    index: b,
+    type: v,
+    isDisabled: I,
+    onDrop: l,
+    hideDefaultPreview: s,
+    dropDetectionMode: e,
+    orientation: r,
+    isLast: c
+  }), h = z(m), t = e === J.HOVER, O = r === K.HORIZONTAL, g = me("sortable-item", i, {
+    "sortable-item--horizontal": O,
+    "sortable-item--dragging": R,
+    "sortable-item--hover-mode": t,
+    "sortable-item--drop-target-top": _ === B.TOP,
+    "sortable-item--drop-target-bottom": _ === B.BOTTOM,
+    "sortable-item--drop-target-left": _ === B.LEFT,
+    "sortable-item--drop-target-right": _ === B.RIGHT,
+    [p || ""]: R && p,
+    [o || ""]: _ && o
+  });
+  return /* @__PURE__ */ T("div", { ref: (a) => {
+    S(a), s || A(a), h || P(a);
+  }, className: g, children: h ? m({
+    isDragging: R,
+    isOver: _ !== null,
+    dragRef: P
+  }) : m });
+}, Le = ({
+  items: n,
+  type: b = U,
+  isDisabled: v = !1,
+  className: I,
+  itemClassName: i,
   onReorder: p,
-  renderItem: f,
-  keyExtractor: s = (e) => e.id
+  renderItem: o,
+  keyExtractor: l = (s) => s.id
 }) => {
-  const e = S(
-    (r, o) => {
-      const t = [...a], [m] = t.splice(r, 1);
-      t.splice(o, 0, m), p(t);
+  const s = F(
+    (e, r) => {
+      const c = [...n], [m] = c.splice(e, 1);
+      c.splice(r, 0, m), p(c);
     },
-    [a, p]
+    [n, p]
   );
-  return /* @__PURE__ */ i("div", { className: n, children: a.map((r, o) => /* @__PURE__ */ i(
-    D,
+  return /* @__PURE__ */ T("div", { className: I, children: n.map((e, r) => /* @__PURE__ */ T(
+    _e,
     {
-      id: s(r),
-      index: o,
-      type: l,
-      isDisabled: c,
-      className: d,
-      onDrop: e,
-      isLast: o === a.length - 1,
-      children: ({ dragRef: t, isDragging: m }) => f(r, o, t, m)
+      id: l(e),
+      index: r,
+      type: b,
+      isDisabled: v,
+      className: i,
+      onDrop: s,
+      isLast: r === n.length - 1,
+      children: ({ dragRef: c, isDragging: m }) => o(e, r, c, m)
     },
-    s(r)
+    l(e)
   )) });
+}, fe = {
+  "drag-layer": "_drag-layer_1izcx_1",
+  "drag-preview": "_drag-preview_1izcx_11"
+}, Q = V.bind(fe), ye = ({
+  type: n,
+  renderPreview: b,
+  className: v,
+  previewClassName: I,
+  portalTarget: i = document.body
+}) => {
+  const { itemType: p, isDragging: o, item: l, clientOffset: s } = le(
+    (r) => ({
+      item: r.getItem(),
+      itemType: r.getItemType(),
+      clientOffset: r.getClientOffset(),
+      isDragging: r.isDragging()
+    })
+  );
+  if (!o || p !== n || !l || !i)
+    return null;
+  const e = /* @__PURE__ */ T("div", { className: Q("drag-layer", v), children: /* @__PURE__ */ T("div", { className: Q("drag-preview", I), style: ne(s), children: b(l) }) });
+  return ee(e, i);
+}, te = ie(null), be = () => se(te), ge = {
+  "drop-confirmation-popover": "_drop-confirmation-popover_ie1p0_16",
+  "drop-confirmation-popover--before": "_drop-confirmation-popover--before_ie1p0_31",
+  "drop-confirmation-popover--after": "_drop-confirmation-popover--after_ie1p0_35",
+  "drop-confirmation-popover--inside": "_drop-confirmation-popover--inside_ie1p0_40",
+  "drop-confirmation-popover__button": "_drop-confirmation-popover__button_ie1p0_68",
+  "drop-confirmation-popover__divider": "_drop-confirmation-popover__divider_ie1p0_84"
+}, D = V.bind(ge), W = 2, ue = {
+  [f.MOVE]: "Move",
+  [f.DUPLICATE]: "Duplicate",
+  [f.CANCEL]: "Cancel"
+}, De = ({
+  children: n,
+  showDropConfirmation: b = !1,
+  confirmationLabels: v,
+  portalTarget: I,
+  onMove: i,
+  onDuplicate: p,
+  onMoveExternal: o,
+  onDuplicateExternal: l,
+  onCancel: s
+}) => {
+  const [e, r] = Z(null), [c, m] = Z(
+    null
+  ), R = M(null), _ = { ...ue, ...v }, P = F(() => {
+    r(null), m(null);
+  }, []), S = F(
+    (O, g, u, a) => {
+      if (!b) {
+        const L = O.isExternal ? o : i;
+        L == null || L(O, g, u);
+        return;
+      }
+      const d = a.getBoundingClientRect(), w = d.left + d.width / 2;
+      let C;
+      u === E.BEFORE ? C = d.top + W : u === E.AFTER ? C = d.top + d.height + W : C = d.top, m({
+        top: C,
+        left: w
+      }), r({ draggedItem: O, targetId: g, position: u });
+    },
+    [b, i, o]
+  ), A = F(
+    (O) => {
+      if (!e) {
+        P();
+        return;
+      }
+      const { draggedItem: g, targetId: u, position: a } = e, d = g.isExternal === !0;
+      switch (O) {
+        case f.MOVE:
+          d ? o == null || o(g, u, a) : i == null || i(g, u, a);
+          break;
+        case f.DUPLICATE:
+          d ? l == null || l(g, u, a) : p == null || p(g, u, a);
+          break;
+        case f.CANCEL:
+          s == null || s();
+          break;
+      }
+      P();
+    },
+    [
+      e,
+      i,
+      p,
+      o,
+      l,
+      s,
+      P
+    ]
+  );
+  de(
+    R,
+    e && b ? () => A(f.CANCEL) : void 0
+  );
+  const h = {
+    showDropConfirmation: b,
+    pendingDraggedItemId: (e == null ? void 0 : e.draggedItem.id) ?? null,
+    pendingTargetId: (e == null ? void 0 : e.targetId) ?? null,
+    pendingDropPosition: (e == null ? void 0 : e.position) ?? null,
+    requestDrop: S
+  }, t = I ?? (typeof document < "u" ? document.body : null);
+  return /* @__PURE__ */ Y(te.Provider, { value: h, children: [
+    n,
+    e && c && t && ee(
+      /* @__PURE__ */ Y(
+        "div",
+        {
+          ref: R,
+          className: D("drop-confirmation-popover", {
+            "drop-confirmation-popover--before": e.position === E.BEFORE,
+            "drop-confirmation-popover--after": e.position === E.AFTER,
+            "drop-confirmation-popover--inside": e.position === E.INSIDE
+          }),
+          style: {
+            top: c.top,
+            left: c.left
+          },
+          children: [
+            /* @__PURE__ */ T(
+              "button",
+              {
+                type: "button",
+                className: D("drop-confirmation-popover__button"),
+                onClick: () => A(f.MOVE),
+                children: _[f.MOVE]
+              }
+            ),
+            /* @__PURE__ */ T(
+              "button",
+              {
+                type: "button",
+                className: D("drop-confirmation-popover__button"),
+                onClick: () => A(f.DUPLICATE),
+                children: _[f.DUPLICATE]
+              }
+            ),
+            /* @__PURE__ */ T("div", { className: D("drop-confirmation-popover__divider") }),
+            /* @__PURE__ */ T(
+              "button",
+              {
+                type: "button",
+                className: D("drop-confirmation-popover__button"),
+                onClick: () => A(f.CANCEL),
+                children: _[f.CANCEL]
+              }
+            )
+          ]
+        }
+      ),
+      t
+    )
+  ] });
+}, Oe = {
+  "tree-sortable-item": "_tree-sortable-item_xdaea_16",
+  "tree-sortable-item--dragging": "_tree-sortable-item--dragging_xdaea_20",
+  "tree-sortable-item--pending": "_tree-sortable-item--pending_xdaea_23",
+  "tree-sortable-item--drop-before": "_tree-sortable-item--drop-before_xdaea_29",
+  "tree-sortable-item--drop-after": "_tree-sortable-item--drop-after_xdaea_40",
+  "tree-sortable-item--drop-inside": "_tree-sortable-item--drop-inside_xdaea_51"
+}, Ee = V.bind(Oe), Fe = ({
+  id: n,
+  index: b,
+  parentId: v,
+  type: I = U,
+  isDisabled: i = !1,
+  acceptDrop: p = !0,
+  isLast: o = !1,
+  canDropOn: l,
+  acceptExternalDrop: s = !1,
+  externalDropType: e,
+  className: r,
+  style: c,
+  draggingClassName: m,
+  dropBeforeClassName: R,
+  dropInsideClassName: _,
+  dropAfterClassName: P,
+  onDrop: S,
+  hideDefaultPreview: A = !1,
+  children: h
+}) => {
+  const t = be(), O = M(null), g = F(
+    (N, q, G) => {
+      t != null && t.showDropConfirmation && O.current ? t.requestDrop(N, q, G, O.current) : S == null || S(N, q, G);
+    },
+    [t, S]
+  ), { isDragging: u, isOver: a, dropPosition: d, dragRef: w, dropRef: C, previewRef: L } = pe({
+    id: n,
+    index: b,
+    parentId: v,
+    type: I,
+    isDisabled: i,
+    acceptDrop: p,
+    isLast: o,
+    canDropOn: l,
+    acceptExternalDrop: s,
+    externalDropType: e,
+    onDrop: g,
+    hideDefaultPreview: A
+  }), $ = (t == null ? void 0 : t.pendingDraggedItemId) === n, k = u || $, y = (t == null ? void 0 : t.pendingTargetId) === n, x = t == null ? void 0 : t.pendingDropPosition, H = a && d === E.BEFORE || y && x === E.BEFORE, X = a && d === E.INSIDE || y && x === E.INSIDE, j = o && (a && d === E.AFTER || y && x === E.AFTER), re = z(h) ? h({
+    isDragging: k,
+    isOver: a || y,
+    dropPosition: y ? x ?? null : d,
+    dragRef: w
+  }) : h, oe = Ee("tree-sortable-item", r, {
+    "tree-sortable-item--dragging": k,
+    "tree-sortable-item--pending": $,
+    "tree-sortable-item--drop-before": H,
+    "tree-sortable-item--drop-inside": X,
+    "tree-sortable-item--drop-after": j,
+    [m || ""]: k && m,
+    [R || ""]: H && R,
+    [_ || ""]: X && _,
+    [P || ""]: j && P
+  });
+  return /* @__PURE__ */ T(
+    "div",
+    {
+      ref: (N) => {
+        O.current = N, C(N), z(h) || (w(N), L(N));
+      },
+      className: oe,
+      style: c,
+      children: re
+    }
+  );
 };
 export {
-  N as DragLayer,
-  D as SortableItem,
-  j as SortableList,
-  O as TreeSortableContainer,
-  P as TreeSortableItem
+  ye as DragLayer,
+  _e as SortableItem,
+  Le as SortableList,
+  De as TreeSortableContainer,
+  Fe as TreeSortableItem
 };