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

package/dist/treeSortableItem-301dbd92.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reportportal/ui-kit",
-  "version": "0.0.1-alpha.237",
+  "version": "0.0.1-alpha.238",
   "description": "The UI-kit library for ReportPortal Design System.",
   "type": "module",
   "scripts": {

package/dist/calendarArrow-44c7e60e.js

@@ -1,5 +0,0 @@
-import * as e from "react";
-const t = (l) => /* @__PURE__ */ e.createElement("svg", { width: 8, height: 13, viewBox: "0 0 8 13", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...l }, /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.54134 12.2173C6.69755 12.3735 6.95081 12.3735 7.10702 12.2173L7.24844 12.0759C7.40465 11.9197 7.40465 11.6664 7.24844 11.5102L1.90539 6.16715L7.24844 0.824097C7.40465 0.667887 7.40465 0.41462 7.24844 0.258411L7.10702 0.116989C6.95081 -0.0392199 6.69755 -0.0392199 6.54134 0.116989L0.998591 5.65973L0.999562 5.6607L0.767094 5.89317C0.610884 6.04938 0.610884 6.30265 0.767093 6.45886L1.48425 7.17602L1.49215 7.16813L6.54134 12.2173Z", fill: "#C1C7D0" }));
-export {
-  t as S
-};

package/dist/constants-85822a6b.js

@@ -1,6 +0,0 @@
-const E = "Enter", t = "Tab", T = "data-autocomplete-portal-menu";
-export {
-  T as A,
-  E,
-  t as T
-};

package/dist/datePicker-b554cb9d.js

@@ -1,229 +0,0 @@
-import { jsxs as x, Fragment as z, jsx as a } from "react/jsx-runtime";
-import { useMemo as v, forwardRef as J, useRef as K } from "react";
-import I from "react-datepicker/dist/es/index.js";
-import { c as Y } from "./bind-06a7ff84.js";
-import { F as Q } from "./fieldText-1749da7a.js";
-import { D as L } from "./dropdown-d2a05471.js";
-import { S as B } from "./calendarArrow-44c7e60e.js";
-import { registerLocale as X } from "react-datepicker";
-function Z(e) {
-  return e == null;
-}
-const Ae = (e, t) => {
-  X(e, t);
-}, ee = (e, t, r = 20) => {
-  const d = new Array(r).fill(void 0).map((f, u) => e - u), D = e - r + 1;
-  return t > e ? [t, ...d] : t < D ? [...d, t] : d;
-}, te = "_header_1s3dn_1", ne = "_disabled_1s3dn_25", oe = "_dropdown_1s3dn_8", ae = {
-  header: te,
-  "dropdowns-wrapper": "_dropdowns-wrapper_1s3dn_8",
-  "button-prev": "_button-prev_1s3dn_13",
-  "button-next": "_button-next_1s3dn_14",
-  disabled: ne,
-  dropdown: oe,
-  "month-dropdown": "_month-dropdown_1s3dn_44",
-  "toggle-button": "_toggle-button_1s3dn_47"
-}, l = Y.bind(ae), re = ({
-  date: e = /* @__PURE__ */ new Date(),
-  changeYear: t = () => {
-  },
-  changeMonth: r = () => {
-  },
-  decreaseMonth: d = () => {
-  },
-  increaseMonth: D = () => {
-  },
-  prevMonthButtonDisabled: f = !1,
-  nextMonthButtonDisabled: u = !1,
-  headerNodes: w = null,
-  customClassName: y = "",
-  yearsOptions: N = [],
-  locale: k
-}) => {
-  const p = e.getFullYear(), S = e.getMonth(), C = v(() => {
-    const n = Array(12).keys(), m = new Intl.DateTimeFormat(k, {
-      month: "long"
-    }), g = (s) => m.format(new Date(p, s));
-    return Array.from(n, g).reduce((s, P, c) => s.concat({
-      value: c,
-      label: P
-    }), []);
-  }, [k, p]), A = v(() => {
-    const n = (/* @__PURE__ */ new Date()).getFullYear();
-    return (N.length > 0 ? N : ee(n, p)).reduce(
-      (g, _) => g.concat({ value: _, label: `${_}` }),
-      []
-    );
-  }, [N, p]), F = (n) => {
-    r(n);
-  }, o = (n) => {
-    t(n);
-  };
-  return /* @__PURE__ */ x(z, { children: [
-    w && /* @__PURE__ */ a("div", { className: l(y), children: w }),
-    /* @__PURE__ */ x("div", { className: l("header"), children: [
-      /* @__PURE__ */ a(
-        "button",
-        {
-          type: "button",
-          "aria-label": "Previous Months",
-          disabled: f,
-          onClick: (n) => {
-            n.stopPropagation(), d();
-          },
-          className: l("button-prev", { disabled: f }),
-          children: /* @__PURE__ */ a(B, {})
-        }
-      ),
-      /* @__PURE__ */ x("div", { className: l("dropdowns-wrapper"), children: [
-        /* @__PURE__ */ a(
-          L,
-          {
-            options: C,
-            value: S,
-            onChange: F,
-            transparentBackground: !0,
-            className: l("dropdown", "month-dropdown"),
-            toggleButtonClassName: l("toggle-button")
-          }
-        ),
-        /* @__PURE__ */ a(
-          L,
-          {
-            options: A,
-            value: p,
-            onChange: o,
-            transparentBackground: !0,
-            className: l("dropdown"),
-            toggleButtonClassName: l("toggle-button")
-          }
-        )
-      ] }),
-      /* @__PURE__ */ a(
-        "button",
-        {
-          type: "button",
-          "aria-label": "Next Months",
-          disabled: u,
-          onClick: (n) => {
-            n.stopPropagation(), D();
-          },
-          className: l("button-next", { disabled: u }),
-          children: /* @__PURE__ */ a(B, {})
-        }
-      )
-    ] })
-  ] });
-}, se = "_calendar_1511k_5", ce = "_date_1511k_104", de = "_disabled_1511k_150", le = "_popper_1511k_159", ie = "_input_1511k_163", pe = {
-  calendar: se,
-  "current-date": "_current-date_1511k_103",
-  date: ce,
-  "end-date": "_end-date_1511k_121",
-  "selected-range": "_selected-range_1511k_131",
-  disabled: de,
-  popper: le,
-  input: ie,
-  "input-range": "_input-range_1511k_174"
-}, b = Y.bind(pe), ue = "en", me = "MM-dd-yyyy", ge = " to ", O = (e) => Z(e) ? void 0 : e, _e = J(
-  ({ selectsRange: e, value: t, ...r }, d) => /* @__PURE__ */ a(
-    Q,
-    {
-      ...r,
-      className: b("input", e ? "input-range" : ""),
-      defaultWidth: !1,
-      value: e ? (t == null ? void 0 : t.replace(" - ", ge)) ?? "" : t,
-      ref: d,
-      readOnly: !0
-    }
-  )
-), Fe = (e) => {
-  const {
-    onChange: t = () => {
-    },
-    disabled: r = !1,
-    onBlur: d = () => {
-    },
-    onFocus: D = () => {
-    },
-    headerNodes: f = null,
-    customClassName: u = "",
-    customTimeInput: w = void 0,
-    shouldCloseOnSelect: y = !0,
-    popperClassName: N = "",
-    calendarClassName: k = "",
-    popperPlacement: p = "bottom-start",
-    fixedHeight: S = !0,
-    language: C = ue,
-    yearsOptions: A = [],
-    dateFormat: F = me,
-    value: o = null
-  } = e, { minDate: n, maxDate: m } = e, g = O(n), _ = O(m), s = "selectsRange" in e && e.selectsRange === !0, P = K(null), c = s ? (o == null ? void 0 : o[0]) ?? void 0 : void 0, i = s ? (o == null ? void 0 : o[1]) ?? void 0 : void 0, $ = c == null ? void 0 : c.toDateString(), H = i == null ? void 0 : i.toDateString(), M = i && c && i > c, U = s ? "Select date range" : "Select date", j = e.placeholder ?? U, R = {
-    customInput: /* @__PURE__ */ a(_e, { ref: P, selectsRange: s }),
-    placeholderText: j,
-    disabled: r,
-    shouldCloseOnSelect: y,
-    fixedHeight: S,
-    locale: C,
-    showPopperArrow: !1,
-    dayClassName: (h) => {
-      if (!s) {
-        const W = o == null ? void 0 : o.toDateString(), q = h.toDateString();
-        return b("date", {
-          "current-date": q === W,
-          disabled: r
-        });
-      }
-      const T = h.toDateString(), G = T === $, E = M && T === H, V = c && i && h > c && h < i;
-      return b("date", {
-        "current-date": G,
-        "selected-range": V && !E,
-        "end-date": E && M,
-        disabled: r
-      });
-    },
-    calendarClassName: b(k, "calendar"),
-    renderCustomHeader: (h) => /* @__PURE__ */ a(
-      re,
-      {
-        ...h,
-        headerNodes: f,
-        customClassName: u,
-        yearsOptions: A,
-        locale: C
-      }
-    ),
-    onBlur: d,
-    onFocus: D,
-    customTimeInput: w,
-    showTimeInput: !!w,
-    popperClassName: b(N, "popper"),
-    dateFormat: F,
-    className: b("datepicker"),
-    popperPlacement: p
-  };
-  return s ? /* @__PURE__ */ a(
-    I,
-    {
-      ...R,
-      selectsRange: !0,
-      startDate: c,
-      endDate: i,
-      onChange: t,
-      minDate: g,
-      maxDate: _
-    }
-  ) : /* @__PURE__ */ a(
-    I,
-    {
-      ...R,
-      selected: o,
-      onChange: t,
-      minDate: g,
-      maxDate: _
-    }
-  );
-};
-export {
-  Fe as D,
-  Ae as r
-};