@reportportal/ui-kit 0.0.1-alpha.165 → 0.0.1-alpha.167

package/dist/bulkPanel.js

@@ -1,92 +1,220 @@
-import { jsx as e, jsxs as i } from "react/jsx-runtime";
-import { useState as C, useRef as v, useCallback as p, useEffect as N } from "react";
-import { createPortal as k } from "react-dom";
-import { c as b } from "./bind-06a7ff84.js";
-import { Scrollbars as E } from "rc-scrollbars";
-import { u as S } from "./useOnClickOutside-8f7d68a1.js";
+import { jsx as n, jsxs as a, Fragment as y } from "react/jsx-runtime";
+import { useState as k, useRef as z, useMemo as P, useCallback as b, useEffect as A } from "react";
+import { createPortal as H } from "react-dom";
+import { c as J } from "./bind-06a7ff84.js";
+import { Scrollbars as Q } from "rc-scrollbars";
+import { u as X } from "./useOnClickOutside-8f7d68a1.js";
 import "react-dnd";
 import "react-dnd-html5-backend";
-import { K as y } from "./keyCodes-f63c0e11.js";
-import { S as w } from "./selection-9124d029.js";
-import { Chip as D } from "./chip.js";
-import { S as I } from "./chevronDownDropdown-0260bb66.js";
+import { K as Z } from "./keyCodes-f63c0e11.js";
+import { S as ee } from "./selection-9124d029.js";
+import { Chip as ne } from "./chip.js";
+import { B } from "./button-97d9e587.js";
+import { Tooltip as le } from "./tooltip.js";
+import { S as te } from "./chevronDownDropdown-0260bb66.js";
+import { S as ie } from "./warning-537ead32.js";
 import "./close-4d480ef7.js";
-import "./button-97d9e587.js";
-const K = "_expanded_lggoe_1", O = "_header_lggoe_27", P = {
-  "bulk-panel": "_bulk-panel_lggoe_1",
-  expanded: K,
-  "panel-content": "_panel-content_lggoe_11",
-  header: O,
-  "selection-info": "_selection-info_lggoe_37",
-  "expand-icon": "_expand-icon_lggoe_52",
-  "items-section": "_items-section_lggoe_64",
-  "items-header": "_items-header_lggoe_75",
-  "items-scroll": "_items-scroll_lggoe_84",
-  "items-list": "_items-list_lggoe_89"
-}, l = b.bind(P), T = {
+import "@floating-ui/react";
+import "./floatingUi-41f8c7b5.js";
+const se = "_expanded_ue1t9_6", ae = "_header_ue1t9_32", oe = "_tabs_ue1t9_119", ce = "_tab_ue1t9_119", re = "_active_ue1t9_146", de = "_item_ue1t9_99", me = {
+  "bulk-panel": "_bulk-panel_ue1t9_1",
+  expanded: se,
+  "panel-content": "_panel-content_ue1t9_16",
+  header: ae,
+  "header-actions": "_header-actions_ue1t9_43",
+  "warning-icon": "_warning-icon_ue1t9_49",
+  "info-message-container": "_info-message-container_ue1t9_58",
+  "buttons-container": "_buttons-container_ue1t9_66",
+  "selection-info": "_selection-info_ue1t9_72",
+  "expand-icon": "_expand-icon_ue1t9_87",
+  "items-section": "_items-section_ue1t9_99",
+  "items-header": "_items-header_ue1t9_110",
+  tabs: oe,
+  tab: ce,
+  "tab-count": "_tab-count_ue1t9_142",
+  active: re,
+  "items-scroll": "_items-scroll_ue1t9_162",
+  "items-list": "_items-list_ue1t9_167",
+  item: de,
+  "tooltip-wrapper": "_tooltip-wrapper_ue1t9_179"
+}, l = J.bind(me), pe = {
   selected: "selected",
   clearSelection: "Clear selection",
-  selectedItems: "Selected items"
-}, M = ({
-  items: o,
-  onRemoveItem: _,
-  onClearSelection: h,
-  className: g,
-  captions: f,
-  portalRoot: c
+  selectedItems: "Selected items",
+  eligibleTab: "Eligible Items",
+  ineligibleTab: "Ineligible Items",
+  ineligibleInfoMessage: (i) => /* @__PURE__ */ a(y, { children: [
+    "You have ",
+    /* @__PURE__ */ n("b", { children: i }),
+    " ineligible items"
+  ] }),
+  cancelButton: (i) => `Cancel "${i}"`,
+  proceedButton: (i) => `Proceed with ${i} Eligible Items`
+}, p = {
+  ELIGIBLE: "eligible",
+  INELIGIBLE: "ineligible"
+}, Ge = ({
+  items: i,
+  actions: D = [],
+  captions: K,
+  infoMessage: x,
+  className: M,
+  portalRoot: f,
+  onRemoveItem: w,
+  onClearSelection: O
 }) => {
-  const t = { ...T, ...f }, [n, d] = C(!1), r = v(null), a = p(() => {
-    d(!1);
-  }, []), u = p(() => {
-    d((s) => !s);
-  }, []);
-  if (N(() => {
-    if (!n)
+  const c = { ...pe, ...K }, [o, _] = k(!1), [I, v] = k(p.INELIGIBLE), [t, C] = k(null), S = z(null), r = t !== null, { eligibleItems: u, ineligibleItems: h } = P(() => {
+    var g;
+    if (!t)
+      return { eligibleItems: [], ineligibleItems: [] };
+    const e = ((g = t.onValidate) == null ? void 0 : g.call(t, i)) ?? [], s = new Set(e.map((L) => L.id));
+    return { eligibleItems: i.filter((L) => !s.has(L.id)), ineligibleItems: e };
+  }, [i, t]), d = u.length, m = h.length, $ = r && d > 0, T = r && m > 0 ? c.ineligibleInfoMessage(m) : null, V = P(() => r ? m === 0 ? u : d === 0 ? h : I === p.ELIGIBLE ? u : h : i, [
+    r,
+    i,
+    u,
+    h,
+    I,
+    m,
+    d
+  ]), j = b(
+    (e) => {
+      var N, g;
+      (N = e.onClick) == null || N.call(e), (((g = e.onValidate) == null ? void 0 : g.call(e, i)) ?? []).length === 0 ? e.onProceed(i, !0) : (C(e), v(p.INELIGIBLE), _(!0));
+    },
+    [i]
+  ), F = b(() => {
+    const e = t == null ? void 0 : t.onCancel;
+    C(null), _(!1), e == null || e();
+  }, [t]), W = b(() => {
+    t == null || t.onProceed(u), C(null), _(!1);
+  }, [t, u]), E = b(() => {
+    _(!1);
+  }, []), Y = b(() => {
+    _((e) => !e);
+  }, []), R = b(
+    (e) => {
+      w(e);
+    },
+    [w]
+  );
+  if (A(() => {
+    if (!o)
       return;
-    const s = (x) => {
-      x.keyCode === y.ESCAPE_KEY_CODE && a();
+    const e = (s) => {
+      s.keyCode === Z.ESCAPE_KEY_CODE && E();
     };
-    return document.addEventListener("keydown", s, !1), () => document.removeEventListener("keydown", s, !1);
-  }, [n, a]), S(r, n ? a : void 0), o.length === 0)
+    return document.addEventListener("keydown", e, !1), () => document.removeEventListener("keydown", e, !1);
+  }, [o, E]), X(S, o ? E : void 0), i.length === 0)
     return null;
-  const m = /* @__PURE__ */ e(
+  const U = (e) => h.some((s) => s.id === e.id), q = (e) => {
+    const s = /* @__PURE__ */ n(
+      ne,
+      {
+        onRemove: () => R(e.id),
+        variant: U(e) && r ? "error" : "default",
+        children: e.label ?? e.name
+      },
+      e.id
+    );
+    return /* @__PURE__ */ n("div", { className: l("item"), children: e.tooltipContent ? /* @__PURE__ */ n(
+      le,
+      {
+        wrapperClassName: l("tooltip-wrapper"),
+        content: e.tooltipContent,
+        placement: "top",
+        width: 270,
+        portalRoot: f,
+        children: s
+      },
+      e.id
+    ) : s }, e.id);
+  }, G = /* @__PURE__ */ n(
     "div",
     {
-      className: l("bulk-panel", { expanded: n }, g),
+      className: l("bulk-panel", { expanded: o }, M),
       role: "region",
       "aria-label": "Bulk actions panel",
-      children: /* @__PURE__ */ i("div", { className: l("panel-content", { expanded: n }), ref: r, children: [
-        /* @__PURE__ */ e("div", { className: l("header"), children: /* @__PURE__ */ i("div", { className: l("selection-info"), children: [
-          /* @__PURE__ */ e(
-            "button",
-            {
-              onClick: u,
-              "aria-label": n ? "Collapse panel" : "Expand panel",
-              "aria-expanded": n,
-              children: /* @__PURE__ */ e("span", { className: l("expand-icon", { expanded: n }), children: /* @__PURE__ */ e(I, {}) })
-            }
-          ),
-          /* @__PURE__ */ e(
-            w,
-            {
-              selectedCount: o.length,
-              onClearSelection: h,
-              captions: {
-                selected: t.selected,
-                buttonCaption: t.clearSelection
+      children: /* @__PURE__ */ a("div", { className: l("panel-content", { expanded: o }), ref: S, children: [
+        /* @__PURE__ */ a("div", { className: l("header"), children: [
+          /* @__PURE__ */ a("div", { className: l("selection-info"), children: [
+            /* @__PURE__ */ n(
+              "button",
+              {
+                onClick: Y,
+                "aria-label": o ? "Collapse panel" : "Expand panel",
+                "aria-expanded": o,
+                children: /* @__PURE__ */ n("span", { className: l("expand-icon", { expanded: o }), children: /* @__PURE__ */ n(te, {}) })
+              }
+            ),
+            /* @__PURE__ */ n(
+              ee,
+              {
+                selectedCount: i.length,
+                onClearSelection: O,
+                captions: {
+                  selected: c.selected,
+                  buttonCaption: c.clearSelection
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ a("div", { className: l("header-actions"), children: [
+            (T || x) && /* @__PURE__ */ a("div", { className: l("info-message-container"), children: [
+              /* @__PURE__ */ n("i", { className: l("warning-icon"), children: /* @__PURE__ */ n(ie, {}) }),
+              /* @__PURE__ */ n("div", { className: l("info-message"), children: T || x })
+            ] }),
+            /* @__PURE__ */ n("div", { className: l("buttons-container"), children: r ? /* @__PURE__ */ a(y, { children: [
+              /* @__PURE__ */ n(B, { variant: "ghost", onClick: F, children: c.cancelButton((t == null ? void 0 : t.label) ?? "") }),
+              $ && /* @__PURE__ */ n(B, { variant: "primary", onClick: W, children: c.proceedButton(d) })
+            ] }) : D.map((e, s) => /* @__PURE__ */ n(
+              B,
+              {
+                variant: e.variant,
+                onClick: () => j(e),
+                disabled: e.disabled,
+                children: e.label
+              },
+              `${e.label}-${s}`
+            )) })
+          ] })
+        ] }),
+        /* @__PURE__ */ a("div", { className: l("items-section"), children: [
+          /* @__PURE__ */ n("div", { className: l("items-header"), children: r ? /* @__PURE__ */ a("div", { className: l("tabs"), children: [
+            m > 0 && /* @__PURE__ */ a(
+              "button",
+              {
+                className: l("tab", {
+                  active: I === p.INELIGIBLE || d === 0
+                }),
+                onClick: () => v(p.INELIGIBLE),
+                children: [
+                  c.ineligibleTab,
+                  /* @__PURE__ */ n("span", { className: l("tab-count"), children: m })
+                ]
+              }
+            ),
+            d > 0 && /* @__PURE__ */ a(
+              "button",
+              {
+                className: l("tab", {
+                  active: I === p.ELIGIBLE || m === 0
+                }),
+                onClick: () => v(p.ELIGIBLE),
+                children: [
+                  c.eligibleTab,
+                  /* @__PURE__ */ n("span", { className: l("tab-count"), children: d })
+                ]
               }
-            }
-          )
-        ] }) }),
-        /* @__PURE__ */ i("div", { className: l("items-section"), children: [
-          /* @__PURE__ */ e("div", { className: l("items-header"), children: t.selectedItems }),
-          /* @__PURE__ */ e("div", { className: l("items-scroll"), children: /* @__PURE__ */ e(E, { hideTracksWhenNotNeeded: !0, children: /* @__PURE__ */ e("div", { className: l("items-list"), children: o.map((s) => /* @__PURE__ */ e(D, { onRemove: () => _(s.id), children: s.label }, s.id)) }) }) })
+            )
+          ] }) : c.selectedItems }),
+          /* @__PURE__ */ n("div", { className: l("items-scroll"), children: /* @__PURE__ */ n(Q, { hideTracksWhenNotNeeded: !0, children: /* @__PURE__ */ n("div", { className: l("items-list"), children: V.map((e) => q(e)) }) }) })
         ] })
       ] })
     }
   );
-  return n && c ? k(m, c) : m;
+  return o && f ? H(G, f) : G;
 };
 export {
-  M as BulkPanel
+  Ge as BulkPanel
 };

package/dist/components/bulkPanel/bulkPanel.d.ts

@@ -1,3 +1,3 @@
 import { BulkPanelProps } from './types';
 
-export declare const BulkPanel: ({ items, onRemoveItem, onClearSelection, className, captions: captionsProp, portalRoot, }: BulkPanelProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const BulkPanel: ({ items, actions, captions: captionsProp, infoMessage, className, portalRoot, onRemoveItem, onClearSelection, }: BulkPanelProps) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,2 +1,2 @@
 export { BulkPanel } from './bulkPanel';
-export type { BulkPanelProps, BulkPanelItem } from './types';
+export type { BulkPanelProps, BulkPanelItem, BulkPanelAction, BulkPanelCaptions } from './types';

package/dist/components/bulkPanel/types.d.ts

@@ -1,16 +1,46 @@
+import { ReactNode } from 'react';
+import { ButtonProps } from '../button';
+
 export interface BulkPanelItem {
     id: string | number;
+    label?: string;
+    name?: string;
+    tooltipContent?: ReactNode;
+}
+export interface BulkPanelAction {
     label: string;
+    variant?: ButtonProps['variant'];
+    disabled?: boolean;
+    onClick?: () => void;
+    /**
+     * Called to validate items. May be called multiple times if items change.
+     * Should return INELIGIBLE items array.
+     * If not provided or returns empty array - all items are eligible and onProceed is called immediately.
+     */
+    onValidate?: (items: BulkPanelItem[]) => BulkPanelItem[];
+    /**
+     * @param direct - true if all items were eligible and proceed was called directly, false if called via Proceed button
+     */
+    onProceed: (eligibleItems: BulkPanelItem[], direct?: boolean) => void;
+    onCancel?: () => void;
+}
+export interface BulkPanelCaptions {
+    selected?: string;
+    clearSelection?: string;
+    selectedItems?: string;
+    eligibleTab?: string;
+    ineligibleTab?: string;
+    ineligibleInfoMessage?: (ineligibleCount: number) => ReactNode | string;
+    cancelButton?: (actionLabel: string) => ReactNode | string;
+    proceedButton?: (eligibleCount: number) => ReactNode | string;
 }
 export interface BulkPanelProps {
-    className?: string;
     items: BulkPanelItem[];
-    captions?: {
-        selected?: string;
-        clearSelection?: string;
-        selectedItems?: string;
-    };
+    actions?: BulkPanelAction[];
+    captions?: BulkPanelCaptions;
+    infoMessage?: ReactNode;
+    className?: string;
+    portalRoot?: Element;
     onRemoveItem: (id: string | number) => void;
     onClearSelection: () => void;
-    portalRoot?: Element;
 }