@reportportal/ui-kit 0.0.1-alpha.169 → 0.0.1-alpha.170

package/dist/common/hooks/index.d.ts

@@ -1,3 +1,5 @@
 export { useOnClickOutside } from './useOnClickOutside';
 export { useSortable } from './useSortable';
+export { useTreeSortable } from './useTreeSortable';
+export { useTreeDropValidation } from './useTreeDropValidation';
 export { useWindowResize } from './useWindowResize';

package/dist/common/hooks/useTreeDropValidation.d.ts

@@ -0,0 +1,5 @@
+import { TreeDragItem, TreeItem, UseTreeDropValidationOptions } from '../types';
+
+export declare const useTreeDropValidation: <T extends TreeItem<T>>({ items, childrenKey, }: UseTreeDropValidationOptions<T>) => {
+    canDropOn: (draggedItem: TreeDragItem, targetId: string | number) => boolean;
+};

package/dist/common/hooks/useTreeSortable.d.ts

@@ -0,0 +1,3 @@
+import { UseTreeSortableOptions, UseTreeSortableReturn } from '../types';
+
+export declare const useTreeSortable: ({ id, index, parentId, type, isDisabled, acceptDrop, canDropOn, onDrop, hideDefaultPreview, }: UseTreeSortableOptions) => UseTreeSortableReturn;

package/dist/common/hooks.js

@@ -0,0 +1,67 @@
+import { u as w } from "../useOnClickOutside-8f7d68a1.js";
+import { u as E, a as R } from "../useTreeSortable-70a9c8f5.js";
+import { useCallback as x } from "react";
+import { i as z } from "../isEmpty-ccacb5ff.js";
+import { u as W } from "../useWindowResize-a7e1ac92.js";
+import "react-dnd";
+import "react-dnd-html5-backend";
+import "../common.js";
+/*!
+ * Copyright 2026 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const o = (r) => String(r), I = (r, e, f, n = "children") => {
+  const s = o(r), u = o(e), i = (c, a) => {
+    for (const t of a) {
+      if (o(t.id) === c)
+        return t;
+      const m = t[n] || [];
+      if (!z(m)) {
+        const p = i(c, m);
+        if (p)
+          return p;
+      }
+    }
+    return null;
+  }, d = i(s, f);
+  if (!d)
+    return !1;
+  const l = (c) => {
+    for (const a of c) {
+      if (o(a.id) === u)
+        return !0;
+      const t = a[n] || [];
+      if (!z(t) && l(t))
+        return !0;
+    }
+    return !1;
+  }, D = d[n] || [];
+  return l(D);
+}, S = ({
+  items: r,
+  childrenKey: e = "children"
+}) => ({ canDropOn: x(
+  (n, s) => {
+    const u = o(n.id), i = o(s);
+    return u === i ? !1 : !I(n.id, s, r, e);
+  },
+  [r, e]
+) });
+export {
+  w as useOnClickOutside,
+  E as useSortable,
+  S as useTreeDropValidation,
+  R as useTreeSortable,
+  W as useWindowResize
+};

package/dist/common/types/sortableTypes.d.ts

@@ -13,7 +13,6 @@ export declare const DROP_POSITIONS: {
     readonly BOTTOM: "bottom";
 };
 export type DropPositionValue = (typeof DROP_POSITIONS)[keyof typeof DROP_POSITIONS];
-export type DropPosition = DropPositionValue | null;
 export declare const DROP_DETECTION_MODE: {
     readonly INDEX_BASED: "indexBased";
     readonly HOVER: "hover";
@@ -82,3 +81,88 @@ export interface DragLayerCollectedProps {
     clientOffset: XYCoord | null;
     isDragging: boolean;
 }
+export type DropPosition = 'top' | 'bottom' | null;
+export declare const TREE_DROP_POSITIONS: {
+    readonly BEFORE: "before";
+    readonly INSIDE: "inside";
+    readonly AFTER: "after";
+};
+export type TreeDropPositionValue = (typeof TREE_DROP_POSITIONS)[keyof typeof TREE_DROP_POSITIONS];
+export type TreeDropPosition = TreeDropPositionValue | null;
+export interface TreeDragItem extends DragItem {
+    parentId?: string | number | null;
+    depth?: number;
+}
+export type TreeDropHandler = (draggedItem: TreeDragItem, targetId: string | number, position: TreeDropPosition) => void;
+export interface UseTreeSortableOptions {
+    id: string | number;
+    index: number;
+    parentId?: string | number | null;
+    type?: string;
+    isDisabled?: boolean;
+    acceptDrop?: boolean;
+    canDropOn?: (draggedItem: TreeDragItem, targetId: string | number) => boolean;
+    onDrop?: TreeDropHandler;
+    hideDefaultPreview?: boolean;
+}
+export interface TreeSortableState {
+    isDragging: boolean;
+    isOver: boolean;
+    dropPosition: TreeDropPosition;
+    dragRef: ConnectDragSource;
+}
+export interface UseTreeSortableReturn extends TreeSortableState {
+    dropRef: (node: HTMLElement | null) => void;
+    previewRef: ConnectDragPreview;
+    elementRef: React.RefObject<HTMLElement | null>;
+}
+export type TreeSortableItemRenderProps = TreeSortableState;
+export interface TreeSortableItemProps {
+    id: string | number;
+    index: number;
+    parentId?: string | number | null;
+    type?: string;
+    isDisabled?: boolean;
+    acceptDrop?: boolean;
+    isLast?: boolean;
+    canDropOn?: (draggedItem: TreeDragItem, targetId: string | number) => boolean;
+    depth?: number;
+    className?: string;
+    draggingClassName?: string;
+    dropBeforeClassName?: string;
+    dropInsideClassName?: string;
+    dropAfterClassName?: string;
+    onDrop?: TreeDropHandler;
+    hideDefaultPreview?: boolean;
+    children: ReactNode | ((props: TreeSortableItemRenderProps) => ReactNode);
+}
+export interface TreeItem<T = unknown> {
+    id: string | number;
+    children?: T[];
+    folders?: T[];
+}
+export interface UseTreeDropValidationOptions<T extends TreeItem<T>> {
+    items: T[];
+    childrenKey?: 'children' | 'folders';
+}
+export declare const DROP_ACTIONS: {
+    readonly MOVE: "move";
+    readonly DUPLICATE: "duplicate";
+    readonly CANCEL: "cancel";
+};
+export type DropAction = (typeof DROP_ACTIONS)[keyof typeof DROP_ACTIONS];
+export interface PendingDropInfo {
+    draggedItem: TreeDragItem;
+    targetId: string | number;
+    position: TreeDropPosition;
+}
+export type DropConfirmationLabels = Partial<Record<DropAction, string>>;
+export interface TreeSortableContainerProps {
+    children: ReactNode;
+    showDropConfirmation?: boolean;
+    confirmationLabels?: DropConfirmationLabels;
+    portalTarget?: Element | null;
+    onMove?: TreeDropHandler;
+    onDuplicate?: TreeDropHandler;
+    onCancel?: () => void;
+}

package/dist/common.js

@@ -1,11 +1,21 @@
 const O = {
   TOP: "top",
   BOTTOM: "bottom"
-}, o = {
+}, E = {
   INDEX_BASED: "indexBased",
   HOVER: "hover"
+}, e = {
+  BEFORE: "before",
+  INSIDE: "inside",
+  AFTER: "after"
+}, o = {
+  MOVE: "move",
+  DUPLICATE: "duplicate",
+  CANCEL: "cancel"
 };
 export {
-  o as DROP_DETECTION_MODE,
-  O as DROP_POSITIONS
+  o as DROP_ACTIONS,
+  E as DROP_DETECTION_MODE,
+  O as DROP_POSITIONS,
+  e as TREE_DROP_POSITIONS
 };

package/dist/components/datePicker/datePicker.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode, ReactElement } from 'react';
+import { Placement } from '@floating-ui/react';
 
 type DateRangeValue = [Date | null, Date | null];
 interface DatePickerBaseProps {
@@ -16,6 +17,7 @@ interface DatePickerBaseProps {
     yearsOptions?: number[];
     placeholder?: string;
     dateFormat?: string;
+    popperPlacement?: Placement;
 }
 interface DatePickerSingleProps extends DatePickerBaseProps {
     selectsRange?: false;

package/dist/components/datePicker/utils.d.ts

@@ -1,4 +1,4 @@
 import { Locale } from 'date-fns';
 
 export declare const registerDatePickerLocale: (language: string, locale: Locale) => void;
-export declare const getYearsFrom: (start: number, amountYearsToGenerate?: number) => number[];
+export declare const getYearsFrom: (start: number, extraYear: number, amountYearsToGenerate?: number) => number[];

package/dist/components/index.d.ts

@@ -30,10 +30,11 @@ export { SpinLoader } from './spinLoader';
 export { SystemAlert } from './systemAlert';
 export { SystemMessage } from './systemMessage';
 export { SingleAutocomplete } from './autocompletes/singleAutocomplete';
-export { SortableItem, SortableList, DragLayer } from './sortable';
+export { SortableItem, SortableList, DragLayer, TreeSortableItem, TreeSortableContainer, } from './sortable';
 export { Table } from './table';
 export { ThemeProvider } from './themeProvider';
 export { Toggle } from './toggle';
 export { Tooltip } from './tooltip';
 export { SidePanel } from './sidePanel';
+export { useTreeDropValidation } from '../common/hooks';
 export * from './icons';

package/dist/components/sortable/index.d.ts

@@ -1,3 +1,5 @@
 export { SortableItem } from './sortableItem';
 export { SortableList } from './sortableList';
 export { DragLayer } from './dragLayer';
+export { TreeSortableItem } from './treeSortableItem';
+export { TreeSortableContainer } from './treeSortableContainer';

package/dist/components/sortable/treeSortableContainer/TreeSortableContext.d.ts

@@ -0,0 +1,11 @@
+import { TreeDragItem, TreeDropPosition } from '../../../common/types';
+
+export interface TreeSortableContextValue {
+    showDropConfirmation: boolean;
+    pendingDraggedItemId: string | number | null;
+    pendingTargetId: string | number | null;
+    pendingDropPosition: TreeDropPosition;
+    requestDrop: (draggedItem: TreeDragItem, targetId: string | number, position: TreeDropPosition, dropElement: HTMLElement) => void;
+}
+export declare const TreeSortableContext: import('react').Context<TreeSortableContextValue | null>;
+export declare const useTreeSortableContext: () => TreeSortableContextValue | null;

package/dist/components/sortable/treeSortableContainer/index.d.ts

@@ -0,0 +1,2 @@
+export { TreeSortableContainer } from './treeSortableContainer';
+export { useTreeSortableContext } from './TreeSortableContext';

package/dist/components/sortable/treeSortableContainer/treeSortableContainer.d.ts

@@ -0,0 +1,3 @@
+import { TreeSortableContainerProps } from '../../../common/types';
+
+export declare const TreeSortableContainer: ({ children, showDropConfirmation, confirmationLabels, portalTarget, onMove, onDuplicate, onCancel, }: TreeSortableContainerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/sortable/treeSortableItem/index.d.ts

@@ -0,0 +1 @@
+export { TreeSortableItem } from './treeSortableItem';

package/dist/components/sortable/treeSortableItem/treeSortableItem.d.ts

@@ -0,0 +1,3 @@
+import { TreeSortableItemProps } from '../../../common/types';
+
+export declare const TreeSortableItem: ({ id, index, parentId, type, isDisabled, acceptDrop, isLast, canDropOn, className, draggingClassName, dropBeforeClassName, dropInsideClassName, dropAfterClassName, onDrop, hideDefaultPreview, children, }: TreeSortableItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/datePicker-412fb8e8.js

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

package/dist/datePicker.js

@@ -1,9 +1,9 @@
-import { D as t } from "./datePicker-ad4a758c.js";
-import { r as A } from "./datePicker-ad4a758c.js";
+import { D as t } from "./datePicker-412fb8e8.js";
+import { r as A } from "./datePicker-412fb8e8.js";
 import "react/jsx-runtime";
+import "react";
 import "react-datepicker/dist/es/index.js";
 import "./bind-06a7ff84.js";
-import "react";
 import "./fieldText-1749da7a.js";
 import "./clear-53660571.js";
 import "./openEye-950159cb.js";