@reportportal/ui-kit 0.0.1-alpha.64 → 0.0.1-alpha.66

package/dist/components/popover/popover.d.ts

@@ -14,6 +14,7 @@ interface PopoverProps {
     dataAutomationId?: string;
     isOpened?: boolean;
     setIsOpened?: (isOpened: boolean) => void;
+    isCentered?: boolean;
 }
 export declare const Popover: FC<PopoverProps>;
 export {};

package/dist/components/table/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const ASC = "asc";
+export declare const DESC = "desc";

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

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { ASC, DESC } from './constants';
 
 export interface Column {
     key: string;
@@ -27,13 +28,10 @@ export interface RowData {
     rowConfigs?: RowConfigs;
     metaData?: MetaData;
 }
-export declare enum SortDirection {
-    ASC = "asc",
-    DESC = "desc"
-}
+export type SortingDirection = typeof ASC | typeof DESC | Uppercase<typeof ASC | typeof DESC>;
 export interface SortConfig {
     key: string;
-    direction: SortDirection;
+    direction: SortingDirection;
 }
 export interface TableComponentProps {
     data: RowData[];
@@ -45,7 +43,7 @@ export interface TableComponentProps {
     headerClassName?: string;
     rowClassName?: string;
     selectedRowIds?: (string | number)[];
-    sortingDirection?: SortDirection;
+    sortingDirection?: SortingDirection;
     sortingColumn?: Column;
     sortableColumns?: string[];
     onChangeSorting?: (sortConfig?: SortConfig) => void;

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

@@ -1,4 +1,6 @@
-import { Column, RowData, SortConfig } from './types';
+import { Column, RowData, SortConfig, SortingDirection } from './types';
 
+export declare const isAsc: (direction: SortingDirection) => boolean;
 export declare const sortTableData: (tableData: RowData[], sortConfig?: SortConfig) => RowData[];
 export declare const getColumnsKeys: (columns: Column[]) => string[];
+export declare const toggleDirection: (direction: SortingDirection) => "desc" | "asc";

package/dist/index.js

@@ -15,7 +15,7 @@ import { R as q } from "./radio-bccc84f2.js";
 import { Tooltip as K } from "./tooltip.js";
 import { Popover as V } from "./popover.js";
 import { P as X } from "./pagination-91729c7d.js";
-import { T as Z } from "./table-32fc8c70.js";
+import { T as Z } from "./table-02e40724.js";
 import { D as $ } from "./datePicker-06e90999.js";
 import "react-datepicker";
 import { SystemAlert as ro } from "./systemAlert.js";

package/dist/popover.js

@@ -1,19 +1,19 @@
-import { jsxs as p, Fragment as G, jsx as o } from "react/jsx-runtime";
-import { useRef as H, useState as S } from "react";
-import { useFloating as j, offset as C, flip as L, arrow as M, autoUpdate as O, useClick as U, useDismiss as W, useRole as q, useInteractions as z, FloatingFocusManager as B, FloatingArrow as J } from "@floating-ui/react";
-import { c as K } from "./bind-06a7ff84.js";
-const Q = "_popover_16ogt_1", V = "_title_16ogt_28", X = {
+import { jsxs as f, Fragment as S, jsx as s } from "react/jsx-runtime";
+import { useRef as j, useState as C, useCallback as L } from "react";
+import { useFloating as M, offset as U, flip as W, arrow as q, autoUpdate as z, useClick as B, useDismiss as J, useRole as K, useInteractions as Q, FloatingFocusManager as V, FloatingArrow as X } from "@floating-ui/react";
+import { c as Y } from "./bind-06a7ff84.js";
+const Z = "_popover_16ogt_1", $ = "_title_16ogt_28", O = {
   "popover-wrapper": "_popover-wrapper_16ogt_1",
-  popover: Q,
-  title: V
-}, n = K.bind(X), m = 16, f = 8, Y = ["top", "right", "bottom", "left"], Z = [
+  popover: Z,
+  title: $
+}, r = Y.bind(O), g = 16, d = 8, tt = ["top", "right", "bottom", "left"], et = [
   "right",
   "right-start",
   "right-end",
   "left",
   "left-start",
   "left-end"
-], $ = [
+], ot = [
   "top",
   "top-start",
   "top-end",
@@ -26,70 +26,74 @@ const Q = "_popover_16ogt_1", V = "_title_16ogt_28", X = {
   "left",
   "left-start",
   "left-end"
-], nt = ({
-  className: d,
-  content: g,
-  children: h,
-  placement: u = "bottom",
-  fallbackPlacements: v = $,
-  title: r,
-  arrowOffset: l = 16,
-  safeZone: _ = 4,
-  arrowColor: w = "white",
-  dataAutomationId: x,
-  isOpened: b,
-  setIsOpened: s
+], it = ({
+  className: h,
+  content: u,
+  children: v,
+  placement: _ = "bottom",
+  fallbackPlacements: b = ot,
+  title: i,
+  arrowOffset: o = 16,
+  safeZone: w = 4,
+  arrowColor: x = "white",
+  dataAutomationId: A,
+  isOpened: F,
+  setIsOpened: n,
+  isCentered: a = !0
 }) => {
-  const i = H(null), [F, R] = S(!1), a = s ? b : F, A = (e) => {
-    s ? s(e) : R(e);
-  }, { placement: N, refs: c, floatingStyles: P, context: t } = j({
-    open: a,
-    onOpenChange: A,
-    placement: u,
+  const c = j(null), [R, N] = C(!1), p = n ? F : R, P = (t) => {
+    n ? n(t) : N(t);
+  }, k = L(
+    (t, l) => a ? ((et.includes(l) ? t.reference.height : t.reference.width) - g) / 2 - o : -o,
+    [o, a]
+  ), { placement: E, refs: m, floatingStyles: I, context: e } = M({
+    open: p,
+    onOpenChange: P,
+    placement: _,
     middleware: [
-      C(({ rects: e, placement: D }) => ({
-        mainAxis: _ + f,
-        alignmentAxis: ((Z.includes(D) ? e.reference.height : e.reference.width) - m) / 2 - l
+      U(({ rects: t, placement: l }) => ({
+        mainAxis: w + d,
+        alignmentAxis: k(t, l)
       })),
-      L({
+      W({
         fallbackAxisSideDirection: "start",
-        fallbackPlacements: v
+        fallbackPlacements: b
       }),
-      M({
-        element: i
+      q({
+        element: c
       })
     ],
-    whileElementsMounted: O
-  }), E = U(t), I = W(t), T = q(t), { getReferenceProps: k, getFloatingProps: y } = z([E, I, T]);
-  return /* @__PURE__ */ p(G, { children: [
-    /* @__PURE__ */ o("div", { ref: c.setReference, ...k(), className: n("popover-wrapper"), children: h }),
-    a && /* @__PURE__ */ o(B, { context: t, modal: !1, children: /* @__PURE__ */ p(
+    whileElementsMounted: z
+  }), T = B(e), y = J(e), D = K(e), { getReferenceProps: G, getFloatingProps: H } = Q([T, y, D]);
+  return /* @__PURE__ */ f(S, { children: [
+    /* @__PURE__ */ s("div", { ref: m.setReference, ...G(), className: r("popover-wrapper"), children: v }),
+    p && /* @__PURE__ */ s(V, { context: e, modal: !1, children: /* @__PURE__ */ f(
       "div",
       {
-        className: n("popover", d),
-        "data-automation-id": x,
-        ref: c.setFloating,
-        style: P,
-        ...y,
+        className: r("popover", h),
+        "data-automation-id": A,
+        ref: m.setFloating,
+        style: I,
+        ...H,
         children: [
-          /* @__PURE__ */ o(
-            J,
+          /* @__PURE__ */ s(
+            X,
             {
-              ref: i,
-              context: t,
-              width: m,
-              height: f,
-              fill: w,
-              staticOffset: Y.includes(N) ? null : l
+              ref: c,
+              context: e,
+              width: g,
+              height: d,
+              fill: x,
+              staticOffset: tt.includes(E) ? null : o
             }
           ),
-          r && /* @__PURE__ */ o("div", { className: n("title"), children: r }),
-          g
+          i && /* @__PURE__ */ s("div", { className: r("title"), children: i }),
+          u
         ]
       }
     ) })
   ] });
 };
 export {
-  nt as Popover
+  it as Popover
 };

package/dist/{table-32fc8c70.js → table-02e40724.js}

@@ -1,5 +1,5 @@
 import { jsxs as n, jsx as l } from "react/jsx-runtime";
-import { useState as S, useMemo as G } from "react";
+import { useState as g, useMemo as G } from "react";
 import { c as J } from "./bind-06a7ff84.js";
 import { a as f, S as K } from "./arrowUp-4a5caee7.js";
 import { C as x } from "./checkbox-9a6c7ce1.js";
@@ -20,82 +20,80 @@ const O = "_table_kha9s_1", P = "_label_kha9s_87", Q = {
   "sortable-cell": "_sortable-cell_kha9s_91",
   "align-right": "_align-right_kha9s_94",
   "align-center": "_align-center_kha9s_100"
-};
-var k = /* @__PURE__ */ ((c) => (c.ASC = "asc", c.DESC = "desc", c))(k || {});
-const V = (c) => c.map((t) => t.key), a = J.bind(Q), ee = ({
+}, z = "asc", V = (c) => c.toLowerCase() === z, W = (c) => c.map((t) => t.key), a = J.bind(Q), ae = ({
   data: c,
   primaryColumn: t,
   fixedColumns: h,
   renderRowActions: i,
-  className: z = "",
-  rowClassName: M = "",
+  className: M = "",
+  rowClassName: S = "",
   headerClassName: m = "",
-  selectable: y = !1,
+  selectable: k = !1,
   selectedRowIds: d = [],
-  sortingDirection: v = k.ASC,
+  sortingDirection: y = z,
   sortingColumn: r = t,
-  sortableColumns: _ = V([t, ...h]),
+  sortableColumns: o = W([t, ...h]),
   onChangeSorting: u = () => {
   },
   onToggleRowSelection: A = () => {
   },
-  onToggleAllRowsSelection: E = () => {
+  onToggleAllRowsSelection: L = () => {
   }
 }) => {
-  const [C, p] = S(null), [L, N] = S(null), w = G(() => [{ ...t, primary: !0 }, ...h], [t, h]), j = (e) => {
-    _.includes(e) && u({ key: e, direction: v });
-  }, g = (e) => ({
+  const [E, v] = g(null), [j, p] = g(null), N = G(() => [{ ...t, primary: !0 }, ...h], [t, h]), C = (e) => {
+    o.includes(e) && u({ key: e, direction: y });
+  }, w = (e) => ({
     width: e.width,
     textAlign: e.align
   }), H = (e) => {
-    p(e);
+    v(e);
   }, T = () => {
-    p(null);
+    v(null);
   }, $ = (e) => {
-    N(e);
+    p(e);
   }, D = () => {
-    N(null);
+    p(null);
   }, R = (e) => {
     A(e);
   }, U = () => {
-    E();
-  }, q = c.every((e) => d.includes(e.id)), o = c.some((e) => d.includes(e.id)), B = (e) => {
+    L();
+  }, q = c.every((e) => d.includes(e.id)), _ = c.some((e) => d.includes(e.id)), B = (e) => {
     var s;
     return `size-${((s = e.rowConfigs) == null ? void 0 : s.size) ?? "default"}`;
   }, F = (e) => {
-    if (_.includes(e))
-      return (r == null ? void 0 : r.key) === e ? v === k.ASC ? /* @__PURE__ */ l(f, {}) : /* @__PURE__ */ l(K, {}) : /* @__PURE__ */ l(f, {});
+    if (o.includes(e))
+      return (r == null ? void 0 : r.key) === e ? V(y) ? /* @__PURE__ */ l(f, {}) : /* @__PURE__ */ l(K, {}) : /* @__PURE__ */ l(f, {});
   };
-  return /* @__PURE__ */ n("div", { className: a("table", z), children: [
+  return /* @__PURE__ */ n("div", { className: a("table", M), children: [
     /* @__PURE__ */ n("div", { className: a("table-header", m), children: [
-      y && /* @__PURE__ */ l("div", { className: a("table-header-cell", "checkbox-cell"), children: o && /* @__PURE__ */ l(
+      k && /* @__PURE__ */ l("div", { className: a("table-header-cell", "checkbox-cell"), children: _ && /* @__PURE__ */ l(
         x,
         {
           value: q,
-          partiallyChecked: o,
+          partiallyChecked: _,
           onChange: U,
           className: a("checkbox-cell")
         }
       ) }),
-      w.map((e) => /* @__PURE__ */ l(
+      N.map((e) => /* @__PURE__ */ l(
         "button",
         {
           className: a("table-header-cell", {
             [`align-${e.align}`]: "align" in e,
             "primary-cell": "primary" in e && e.primary,
-            "sortable-cell": _.includes(e.key)
+            "sortable-cell": o.includes(e.key)
           }),
-          style: g(e),
+          style: w(e),
           children: /* @__PURE__ */ n(
             "div",
             {
               className: a("label"),
-              onClick: () => j(e.key),
+              onClick: () => C(e.key),
               onMouseEnter: () => H(e.key),
               onMouseLeave: T,
               children: [
                 /* @__PURE__ */ l("span", { children: e.header }),
-                (C === e.key || (r == null ? void 0 : r.key) === e.key) && F(e.key)
+                (E === e.key || (r == null ? void 0 : r.key) === e.key) && F(e.key)
               ]
             }
           )
@@ -107,11 +105,11 @@ const V = (c) => c.map((t) => t.key), a = J.bind(Q), ee = ({
     /* @__PURE__ */ l("div", { className: a("table-body"), children: c.map((e, b) => /* @__PURE__ */ n(
       "div",
       {
-        className: a("table-row", B(e), M),
+        className: a("table-row", B(e), S),
         onMouseEnter: () => $(b),
         onMouseLeave: D,
         children: [
-          y && /* @__PURE__ */ l("div", { className: a("table-cell", "checkbox-cell"), children: (o || L === b) && /* @__PURE__ */ l(
+          k && /* @__PURE__ */ l("div", { className: a("table-cell", "checkbox-cell"), children: (_ || j === b) && /* @__PURE__ */ l(
             x,
             {
               value: d.includes(e.id),
@@ -120,13 +118,13 @@ const V = (c) => c.map((t) => t.key), a = J.bind(Q), ee = ({
             }
           ) }),
           /* @__PURE__ */ n("div", { className: a("table-row-content"), children: [
-            w.map((s) => /* @__PURE__ */ l(
+            N.map((s) => /* @__PURE__ */ l(
               "div",
               {
                 className: a("table-cell", {
                   "primary-cell": "primary" in s && s.primary
                 }),
-                style: g(s),
+                style: w(s),
                 children: e[s.key].component || e[s.key].content || e[s.key]
               },
               s.key
@@ -140,5 +138,5 @@ const V = (c) => c.map((t) => t.key), a = J.bind(Q), ee = ({
   ] });
 };
 export {
-  ee as T
+  ae as T
 };

package/dist/table.js

@@ -1,4 +1,4 @@
-import { T as r } from "./table-32fc8c70.js";
+import { T as r } from "./table-02e40724.js";
 import "react/jsx-runtime";
 import "react";
 import "./bind-06a7ff84.js";

package/package.json

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