@reportportal/ui-kit 0.0.1-alpha.144 → 0.0.1-alpha.145

package/dist/autocompletes.js

@@ -36,8 +36,8 @@ const Le = "_disabled_1rpph_43", Ke = "_input_1rpph_107", Te = {
   error: d = !1,
   editItem: v,
   editable: p = !1,
-  getAdditionalCreationCondition: g = () => !0,
-  storedOption: N = !0,
+  getAdditionalCreationCondition: y = () => !0,
+  storedOption: g = !0,
   highlightUnStoredItem: f = !1,
   variant: k = "light",
   getItemName: x,
@@ -45,12 +45,12 @@ const Le = "_disabled_1rpph_43", Ke = "_input_1rpph_107", Te = {
   className: R,
   textClassName: I
 }) => {
-  const [y, b] = re(!1), [C, B] = re(""), [l, a] = re(!1), s = xe(null), i = () => {
-    !c && p && !N && (B((x == null ? void 0 : x(t)) || (n == null ? void 0 : n(t)) || ""), b(!0));
+  const [w, b] = re(!1), [C, B] = re(""), [l, a] = re(!1), s = xe(null), i = () => {
+    !c && p && !g && (B((x == null ? void 0 : x(t)) || (n == null ? void 0 : n(t)) || ""), b(!0));
   }, _ = (S) => {
     B(S.target.value);
   }, O = (S) => {
-    const j = g(C);
+    const j = y(C);
     S.key === "Enter" && j && (v(t, C), b(!1), B(""));
   }, H = () => {
     b(!1), B("");
@@ -82,11 +82,11 @@ const Le = "_disabled_1rpph_43", Ke = "_input_1rpph_107", Te = {
       [`validation-${d}`]: d,
       disabled: c,
       "mobile-disabled": r,
-      "highlight-un-stored-item": f && !N
+      "highlight-un-stored-item": f && !g
     },
     R
   );
-  return y ? /* @__PURE__ */ o(
+  return w ? /* @__PURE__ */ o(
     "input",
     {
       autoFocus: !0,
@@ -129,8 +129,8 @@ const Le = "_disabled_1rpph_43", Ke = "_input_1rpph_107", Te = {
   renderCustomSelectedItem: d,
   selectedItemSingleLine: v,
   selectedItemClassName: p,
-  selectedItemTextClassName: g,
-  ...N
+  selectedItemTextClassName: y,
+  ...g
 }) => t.map((f) => d ? d(f) : /* @__PURE__ */ o(
   Xe,
   {
@@ -141,8 +141,8 @@ const Le = "_disabled_1rpph_43", Ke = "_input_1rpph_107", Te = {
     highlightUnStoredItem: n,
     singleLine: v,
     className: p,
-    textClassName: g,
-    ...N
+    textClassName: y,
+    ...g
   },
   e == null ? void 0 : e(f)
 )), Je = "_prompt_1xfmd_16", Qe = {
@@ -168,7 +168,7 @@ const Le = "_disabled_1rpph_43", Ke = "_input_1rpph_107", Te = {
   newItemButtonText: v = "",
   ...p
 }) => {
-  const g = () => v || (d === "key-variant" ? "New key" : "New value");
+  const y = () => v || (d === "key-variant" ? "New key" : "New value");
   return c ? /* @__PURE__ */ $(ce, { children: [
     /* @__PURE__ */ o("div", { className: ee("divider") }),
     /* @__PURE__ */ $(
@@ -189,7 +189,7 @@ const Le = "_disabled_1rpph_43", Ke = "_input_1rpph_107", Te = {
               className: ee({ "button-active": t }),
               icon: /* @__PURE__ */ o(je, {}),
               variant: "text",
-              children: g()
+              children: y()
             }
           )
         ]
@@ -219,8 +219,8 @@ const Le = "_disabled_1rpph_43", Ke = "_input_1rpph_107", Te = {
     createWithoutConfirmation: d,
     customEmptyListMessage: v,
     customNoMatchesMessage: p,
-    optionVariant: g,
-    newItemButtonText: N,
+    optionVariant: y,
+    newItemButtonText: g,
     renderOption: f,
     getUniqKey: k,
     getItemProps: x,
@@ -229,16 +229,16 @@ const Le = "_disabled_1rpph_43", Ke = "_input_1rpph_107", Te = {
     (s, i, _ = !1) => f ? f(s, i, _, x) : /* @__PURE__ */ o(
       ye,
       {
-        optionVariant: g,
+        optionVariant: y,
         ...x({ item: s, index: i }),
         isNew: _,
-        newItemButtonText: N,
+        newItemButtonText: g,
         children: u(s)
       },
       (k == null ? void 0 : k(s)) || u(s)
     ),
-    [x, k, N, g, u, f]
-  ), y = V(
+    [x, k, g, y, u, f]
+  ), w = V(
     (s) => s.length ? s.map((i, _) => I(i, _)) : "",
     [I]
   ), b = V(
@@ -247,15 +247,16 @@ const Le = "_disabled_1rpph_43", Ke = "_input_1rpph_107", Te = {
       return /* @__PURE__ */ o("div", { className: _e({ container: !i }), children: /* @__PURE__ */ o(
         ye,
         {
-          optionVariant: g,
+          optionVariant: y,
           isNew: !0,
+          newItemButtonText: g,
           ...x({ item: r, index: i }),
           children: u(r)
         },
         u(r)
       ) });
     },
-    [x, r, g, u]
+    [x, r, g, y, u]
   ), C = V(
     (s) => n ? /* @__PURE__ */ $(ce, { children: [
       /* @__PURE__ */ o(Ue, { children: /* @__PURE__ */ o(Pe, {}) }),
@@ -267,7 +268,7 @@ const Le = "_disabled_1rpph_43", Ke = "_input_1rpph_107", Te = {
     return /* @__PURE__ */ o("div", { className: _e("empty-list-message"), children: s });
   }, [v, p, e == null ? void 0 : e.length]), l = c ? e : R(), a = C(e);
   return a || /* @__PURE__ */ $("div", { className: _e({ container: e.length }), children: [
-    /* @__PURE__ */ o($e, { autoHeight: !0, autoHeightMax: 216, hideTracksWhenNotNeeded: !0, children: he(l) ? B() : y(l) }),
+    /* @__PURE__ */ o($e, { autoHeight: !0, autoHeightMax: 216, hideTracksWhenNotNeeded: !0, children: he(l) ? B() : w(l) }),
     !d && b(l)
   ] });
 }, it = "_menu_f64z5_16", dt = "_opened_f64z5_34", ut = "_dark_f64z5_37", mt = {
@@ -311,8 +312,8 @@ const Le = "_disabled_1rpph_43", Ke = "_input_1rpph_107", Te = {
   children: d,
   customizeNewSelectedValue: v = (f) => f,
   getOptionUniqKey: p,
-  getOptionUniqKeyValue: g,
-  ...N
+  getOptionUniqKeyValue: y,
+  ...g
 }) => {
   const [f, k] = re(n), x = (l, a) => {
     const s = {
@@ -337,23 +338,23 @@ const Le = "_disabled_1rpph_43", Ke = "_input_1rpph_107", Te = {
   }, I = (l, a) => {
     const s = c.indexOf(l), i = [...c];
     i.splice(s, 1, a), e == null || e(i, null);
-  }, y = (l, a) => {
+  }, w = (l, a) => {
     const s = c.filter((_) => !ae(_, l));
     e == null || e(s, a), u(l, (_) => r == null ? void 0 : r(s, _));
   }, b = (l, a) => {
     l && R(l, a);
   }, C = (l) => ({
-    removeItem: y,
+    removeItem: w,
     editItem: I,
     handleChange: e,
-    getOptionUniqKeyValue: g,
+    getOptionUniqKeyValue: y,
     storedItemsMap: f,
     ...l
   });
   return /* @__PURE__ */ o(
     le,
     {
-      ...N,
+      ...g,
       stateReducer: (l, a) => {
         switch (a.type) {
           case le.stateChangeTypes.keyDownEnter:
@@ -398,8 +399,8 @@ const Le = "_disabled_1rpph_43", Ke = "_input_1rpph_107", Te = {
     placeholder: d = "",
     error: v = "",
     touched: p = !1,
-    creatable: g = !1,
-    editable: N = !1,
+    creatable: y = !1,
+    editable: g = !1,
     onChange: f = () => {
     },
     onFocus: k = () => {
@@ -409,7 +410,7 @@ const Le = "_disabled_1rpph_43", Ke = "_input_1rpph_107", Te = {
     disabled: u = !1,
     isDropdownMode: R = !1,
     mobileDisabled: I = !1,
-    inputProps: y = {},
+    inputProps: w = {},
     parseValueToString: b = (h) => h == null ? "" : String(h),
     maxLength: C = null,
     async: B = !1,
@@ -441,33 +442,33 @@ const Le = "_disabled_1rpph_43", Ke = "_input_1rpph_107", Te = {
   ke(() => {
     i();
   }, [i, n]);
-  const oe = (h, w) => {
-    f(h, w);
-  }, ue = (h, w, E) => ({ item: m, index: q, ...A }) => h({
+  const oe = (h, N) => {
+    f(h, N);
+  }, ue = (h, N, E) => ({ item: m, index: q, ...A }) => h({
     item: m,
     index: q,
     isSelected: E.some((U) => ae(U, m)),
     ...A,
-    isActive: w === q
+    isActive: N === q
   }), me = ({
     event: h,
-    removeItem: w,
+    removeItem: N,
     inputValue: E
   }) => {
-    h.key === "Backspace" && !E && n.length && w(n[n.length - 1], null);
+    h.key === "Backspace" && !E && n.length && N(n[n.length - 1], null);
   }, Y = ({
     inputValue: h,
-    selectItem: w,
+    selectItem: N,
     clearSelection: E
   }) => {
     if (H) {
       const m = H(h);
-      (m.length ? m : [h]).forEach((A) => w(A)), E();
+      (m.length ? m : [h]).forEach((A) => N(A)), E();
     } else
-      w(h), E();
-  }, fe = (h) => (w) => {
-    h(w, null), z.current && z.current.focus();
-  }, pe = e.filter((h) => n.every((w) => !ae(w, h)));
+      N(h), E();
+  }, fe = (h) => (N) => {
+    h(N, null), z.current && z.current.focus();
+  }, pe = e.filter((h) => n.every((N) => !ae(N, h)));
   return /* @__PURE__ */ o(
     ht,
     {
@@ -481,7 +482,7 @@ const Le = "_disabled_1rpph_43", Ke = "_input_1rpph_107", Te = {
       customizeNewSelectedValue: te,
       children: ({
         getInputProps: h,
-        getItemProps: w,
+        getItemProps: N,
         isOpen: E,
         inputValue: m = "",
         highlightedIndex: q,
@@ -529,7 +530,7 @@ const Le = "_disabled_1rpph_43", Ke = "_input_1rpph_107", Te = {
                             getItemValidationErrorType: s,
                             renderCustomSelectedItem: S,
                             editItem: U,
-                            editable: N,
+                            editable: g,
                             getAdditionalCreationCondition: _,
                             storedItemsMap: De,
                             highlightUnStoredItem: O,
@@ -549,21 +550,21 @@ const Le = "_disabled_1rpph_43", Ke = "_input_1rpph_107", Te = {
                                 R && se(), k();
                               },
                               onKeyDown: (F) => {
-                                F.key === Re && m && g && _(m) && Y({
+                                F.key === Re && m && y && _(m) && Y({
                                   inputValue: m,
                                   selectItem: be,
                                   clearSelection: ve
                                 }), me({ event: F, removeItem: A, inputValue: m });
                               },
                               onBlur: () => {
-                                x(), m && g && _(m) && Y({
+                                x(), m && y && _(m) && Y({
                                   inputValue: m,
                                   selectItem: be,
                                   clearSelection: ve
                                 });
                               },
                               disabled: u,
-                              ...y
+                              ...w
                             }),
                             className: X("input", { disabled: u }),
                             "data-automation-id": W
@@ -572,14 +573,14 @@ const Le = "_disabled_1rpph_43", Ke = "_input_1rpph_107", Te = {
                       ]
                     }
                   ),
-                  (y == null ? void 0 : y.clearable) && !he(n) && /* @__PURE__ */ o(
+                  (w == null ? void 0 : w.clearable) && !he(n) && /* @__PURE__ */ o(
                     "button",
                     {
                       type: "button",
                       className: X("clear-icon", { "clear-icon--disabled": u }),
                       onClick: () => {
                         var F;
-                        return !u && ((F = y == null ? void 0 : y.onClear) == null ? void 0 : F.call(y));
+                        return !u && ((F = w == null ? void 0 : w.onClear) == null ? void 0 : F.call(w));
                       },
                       onMouseDown: (F) => F.preventDefault(),
                       children: /* @__PURE__ */ o(We, {})
@@ -612,7 +613,7 @@ const Le = "_disabled_1rpph_43", Ke = "_input_1rpph_107", Te = {
               isDropdownMode: R,
               style: ie,
               inputValue: qe.trim(),
-              getItemProps: ue(w, q, n),
+              getItemProps: ue(N, q, n),
               parseValueToString: b,
               createWithoutConfirmation: a,
               options: pe,
@@ -640,15 +641,15 @@ const Le = "_disabled_1rpph_43", Ke = "_input_1rpph_107", Te = {
     onBlur: v = () => {
     },
     disabled: p = !1,
-    inputProps: g = {},
-    parseValueToString: N = (D) => D === null ? "" : String(D),
+    inputProps: y = {},
+    parseValueToString: g = (D) => D === null ? "" : String(D),
     minLength: f = 1,
     skipOptionCreation: k = !1,
     maxLength: x = null,
     optionVariant: u = "",
     isRequired: R = !1,
     error: I = "",
-    touched: y = !1,
+    touched: w = !1,
     setTouch: b = () => {
     },
     createWithoutConfirmation: C = !1,
@@ -679,7 +680,7 @@ const Le = "_disabled_1rpph_43", Ke = "_input_1rpph_107", Te = {
     le,
     {
       onChange: n,
-      itemToString: N,
+      itemToString: g,
       selectedItem: c,
       onStateChange: O,
       defaultHighlightedIndex: It,
@@ -699,7 +700,7 @@ const Le = "_disabled_1rpph_43", Ke = "_input_1rpph_107", Te = {
         const oe = de(void 0, { suppressRefError: !0 }), ue = {
           ...oe,
           ref: (m) => (J.setReference(m), oe.ref(m))
-        }, me = Z ?? "", { onClear: Y, clearable: fe, ...pe } = g, w = fe && c !== null, E = (...m) => {
+        }, me = Z ?? "", { onClear: Y, clearable: fe, ...pe } = y, N = fe && c !== null, E = (...m) => {
           z(null), Y == null || Y(...m);
         };
         return /* @__PURE__ */ o(ce, { children: /* @__PURE__ */ $("div", { className: Ne("input-wrapper"), ...ue, children: [
@@ -717,19 +718,19 @@ const Le = "_disabled_1rpph_43", Ke = "_input_1rpph_107", Te = {
                   m.key === Re && m.preventDefault(), Z && M && j(m, K);
                 },
                 onBlur: (m) => {
-                  const q = me.trim(), A = !he(q), U = A ? e.find((se) => N(se) === q) : void 0;
+                  const q = me.trim(), A = !he(q), U = A ? e.find((se) => g(se) === q) : void 0;
                   z(U || (!k && C && A ? q : null)), v(m), s == null || s(
-                    A ? !e.some((se) => N(se) === q) : null
+                    A ? !e.some((se) => g(se) === q) : null
                   ), a && M && T(), b == null || b(!0);
                 },
                 disabled: p,
                 defaultWidth: !1,
                 isRequired: R,
-                touched: y,
+                touched: w,
                 error: I,
                 ...pe,
-                clearable: w,
-                onClear: w ? E : Y,
+                clearable: N,
+                onClear: N ? E : Y,
                 endIcon: a && !l ? /* @__PURE__ */ o(
                   "button",
                   {
@@ -755,7 +756,7 @@ const Le = "_disabled_1rpph_43", Ke = "_input_1rpph_107", Te = {
               minLength: f,
               inputValue: (Z || "").trim(),
               getItemProps: S(L, ie, c),
-              parseValueToString: N,
+              parseValueToString: g,
               optionVariant: u,
               createWithoutConfirmation: C,
               className: B,

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

@@ -52,6 +52,7 @@ export { default as PriorityLowIcon } from './svg/priorityLow.svg';
 export { default as PriorityMediumIcon } from './svg/priorityMedium.svg';
 export { default as PriorityUnspecifiedIcon } from './svg/priorityUnspecified.svg';
 export { default as RefreshIcon } from './svg/refresh.svg';
+export { default as ResizeColumnIcon } from './svg/resizeColumn.svg';
 export { default as RerunIcon } from './svg/rerun.svg';
 export { default as SearchIcon } from './svg/search.svg';
 export { default as SortIcon } from './svg/sort.svg';

package/dist/components/table/hooks/index.d.ts

@@ -2,3 +2,4 @@ export { useTableColumns } from './useTableColumns';
 export { useTableHover } from './useTableHover';
 export { useTableExpansion } from './useTableExpansion';
 export { useColumnWidths } from './useColumnWidths';
+export { useColumnResize } from './useColumnResize';

package/dist/components/table/hooks/useColumnResize.d.ts

@@ -0,0 +1,18 @@
+import { MutableRefObject } from 'react';
+import { ResizeCallbackData } from 'react-resizable';
+
+interface UseColumnResizeProps {
+    enabled?: boolean;
+    minWidth?: number;
+    maxWidth?: number;
+    columnWidthsRef?: MutableRefObject<Map<string, number>>;
+    onColumnResize?: (columnKey: string, width: number) => void;
+}
+interface UseColumnResizeReturn {
+    columnWidths: Record<string, number>;
+    handleResize: (columnKey: string) => (e: React.SyntheticEvent, data: ResizeCallbackData) => void;
+    handleResizeStop: (columnKey: string) => () => void;
+    handleResizeStart: () => void;
+}
+export declare const useColumnResize: ({ enabled, minWidth, maxWidth, columnWidthsRef, onColumnResize, }: UseColumnResizeProps) => UseColumnResizeReturn;
+export {};

package/dist/components/table/resizeHandle/index.d.ts

@@ -0,0 +1 @@
+export { ResizeHandle } from './resizeHandle';

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ResizeHandle: (props: import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>) => import('react').ReactElement<any, string | import('react').JSXElementConstructor<any>> | null;

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

@@ -60,9 +60,13 @@ export interface TableComponentProps {
     setExpandedRowIds?: Dispatch<SetStateAction<Set<string | number>>>;
     isAllExpandedByDefault?: boolean;
     expandAllTooltip?: ReactNode;
+    isResizable?: boolean;
+    minColumnWidth?: number;
+    maxColumnWidth?: number;
     onChangeSorting?: (sortConfig?: SortConfig) => void;
     onToggleRowSelection?: (id: string | number) => void;
     onToggleAllRowsSelection?: () => void;
     onToggleRowExpansion?: (id: string | number) => void;
     onToggleAllRowsExpansion?: () => void;
+    onColumnResize?: (columnKey: string, width: number) => void;
 }

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

@@ -9,4 +9,4 @@ export declare const isPrimaryColumn: (column: PrimaryColumn | FixedColumn) => b
 export declare const getRowSizeClassName: (rowData: RowData) => string;
 export declare const calculatePinnedPosition: (columnIndex: number, columns: (PrimaryColumn | FixedColumn)[], columnWidthsRef: MutableRefObject<Map<string, number>>, isRowsExpandable: boolean, selectable: boolean) => number;
 export declare const getCellStyle: (column: FixedColumn | PrimaryColumn, isPinned: boolean, pinnedIndex: number | undefined, pinnedColumns: (PrimaryColumn | FixedColumn)[], columnWidthsRef: MutableRefObject<Map<string, number>>, isRowsExpandable: boolean, selectable: boolean) => CSSProperties;
-export declare const getGridTemplateColumns: (pinnedColumns: (PrimaryColumn | FixedColumn)[], scrollableColumns: (PrimaryColumn | FixedColumn)[], isRowsExpandable: boolean, selectable: boolean, renderRowActions: boolean, isHeader?: boolean) => string;
+export declare const getGridTemplateColumns: (pinnedColumns: (PrimaryColumn | FixedColumn)[], scrollableColumns: (PrimaryColumn | FixedColumn)[], isRowsExpandable: boolean, selectable: boolean, renderRowActions: boolean, isHeader?: boolean, columnWidths?: Record<string, number>) => string;