@reportportal/ui-kit 0.0.1-alpha.210 → 0.0.1-alpha.212

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

@@ -1,5 +1,6 @@
 import { KeyCodes } from '../../common/constants/keyCodes';
 
 export declare const DEFAULT_WIDTH_CH = 5;
-export declare const MAX_WIDTH_CH = 16;
+export declare const SAFARI_CLIP_FIX_CH = 0.4;
+export declare const MAX_WIDTH_CH: number;
 export declare const ALLOWED_KEY_CODES: KeyCodes[];

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

@@ -12,9 +12,14 @@ export interface PopoverProps {
     safeZone?: number;
     arrowColor?: string;
     dataAutomationId?: string;
-    isOpened?: boolean;
-    isCentered?: boolean;
     strategy?: Strategy;
+    transitionDuration?: number | Partial<{
+        open: number;
+        close: number;
+    }>;
+    isCentered?: boolean;
+    isFocusDisabled?: boolean;
+    isOpened?: boolean;
     shouldUsePortal?: boolean;
     setIsOpened?: (isOpened: boolean) => void;
 }

package/dist/{fieldNumber-dd8e6902.js → fieldNumber-b4aa4d7e.js}

@@ -1,12 +1,12 @@
-import { jsxs as a, Fragment as V, jsx as r } from "react/jsx-runtime";
-import { useRef as W, useId as y, useMemo as B } from "react";
-import { c as w } from "./bind-06a7ff84.js";
+import { jsxs as a, Fragment as W, jsx as r } from "react/jsx-runtime";
+import { useRef as y, useId as B, useMemo as w } from "react";
+import { c as v } from "./bind-06a7ff84.js";
 import { K as e } from "./keyCodes-f63c0e11.js";
 import { B as D } from "./baseIconButton-251479f7.js";
-import { S as v } from "./minus-2857540f.js";
+import { S as H } from "./minus-2857540f.js";
 import { S as k } from "./plus-199fb2a8.js";
-import { FieldLabel as H } from "./fieldLabel.js";
-const b = 5, Y = 16, P = [
+import { FieldLabel as P } from "./fieldLabel.js";
+const b = 5, I = 0.4, Y = 16 + I, G = [
   e.TAB_KEY_CODE,
   e.BACKSPACE_KEY_CODE,
   e.ARROW_LEFT_KEY_CODE,
@@ -24,33 +24,33 @@ const b = 5, Y = 16, P = [
   e.NUM_LOCK_7_KEY_CODE,
   e.NUM_LOCK_8_KEY_CODE,
   e.NUM_LOCK_9_KEY_CODE
-], G = "_sign_3v3h5_7", j = "_error_3v3h5_22", z = "_disabled_3v3h5_27", X = "_input_3v3h5_12", $ = {
+], X = "_sign_3v3h5_7", $ = "_error_3v3h5_22", j = "_disabled_3v3h5_27", z = "_input_3v3h5_12", q = {
   "field-number": "_field-number_3v3h5_1",
-  sign: G,
+  sign: X,
   "input-container": "_input-container_3v3h5_12",
-  error: j,
-  disabled: z,
+  error: $,
+  disabled: j,
   "input-field": "_input-field_3v3h5_38",
-  input: X,
+  input: z,
   "additional-content": "_additional-content_3v3h5_84",
   "error-text": "_error-text_3v3h5_88"
-}, c = w.bind($), tn = ({
+}, c = v.bind(q), rn = ({
   value: i = "",
-  placeholder: I = "0",
+  placeholder: L = "0",
   disabled: t = !1,
   onChange: l,
   onFocus: d,
   onBlur: N,
-  label: m,
+  label: f,
   postfix: E = "",
   min: s = 0,
   max: o = Number.MAX_SAFE_INTEGER,
-  title: L,
+  title: A,
   error: C,
   id: h,
   ...M
 }) => {
-  const u = W(null), p = y(), O = (n) => Number.isNaN(n) ? s : n === Number.POSITIVE_INFINITY ? o : n === Number.NEGATIVE_INFINITY || n < s ? s : n > o ? o : n, R = (n) => {
+  const u = y(null), m = B(), O = (n) => Number.isNaN(n) ? s : n === Number.POSITIVE_INFINITY ? o : n === Number.NEGATIVE_INFINITY || n < s ? s : n > o ? o : n, R = (n) => {
     const _ = n.target.value.replace(/^0(?=\d+|^\d)/g, "");
     if (_ === "") {
       l("");
@@ -59,26 +59,26 @@ const b = 5, Y = 16, P = [
     l(+_);
   }, T = (n) => {
     N && N(n);
-    const _ = +n.currentTarget.value, f = O(_);
-    f !== _ && l(f);
-  }, A = (n) => {
+    const _ = +n.currentTarget.value, p = O(_);
+    p !== _ && l(p);
+  }, U = (n) => {
     const { keyCode: _ } = n;
-    P.includes(_) || (_ < e.NUMBER_START_KEY_CODE || _ > e.NUMBER_END_KEY_CODE || n.shiftKey) && n.preventDefault();
-  }, U = () => {
+    G.includes(_) || (_ < e.NUMBER_START_KEY_CODE || _ > e.NUMBER_END_KEY_CODE || n.shiftKey) && n.preventDefault();
+  }, F = () => {
     const _ = O(+i) - 1;
     _ >= s && _ <= o && l(_);
   }, g = () => {
     const _ = O(+i) + 1;
     _ >= s && _ <= o && l(_);
-  }, K = I + E, F = B(() => {
+  }, K = L + E, S = w(() => {
     let n = (String(i) || K).length;
-    return E && !i && (n += 1), n > Y ? `${Y}ch` : `${n || b}ch`;
-  }, [K, E, i]), S = () => {
+    return E && !i && (n += 1), n ? n > Y ? `${Y}ch` : `${n + I}ch` : `${b}ch`;
+  }, [K, E, i]), V = () => {
     u && u.current && u.current.focus(), d && d();
   };
-  return /* @__PURE__ */ a(V, { children: [
+  return /* @__PURE__ */ a(W, { children: [
     /* @__PURE__ */ a("div", { className: c("field-number", { disabled: t }), children: [
-      m && /* @__PURE__ */ r(H, { htmlFor: h ?? p, children: m }),
+      f && /* @__PURE__ */ r(P, { htmlFor: h ?? m, children: f }),
       /* @__PURE__ */ a(
         "div",
         {
@@ -86,22 +86,22 @@ const b = 5, Y = 16, P = [
             error: C,
             disabled: t
           }),
-          title: L,
+          title: A,
           children: [
             /* @__PURE__ */ r(
               D,
               {
                 className: c("sign", "minus"),
                 disabled: t,
-                onClick: U,
-                children: /* @__PURE__ */ r(v, {})
+                onClick: F,
+                children: /* @__PURE__ */ r(H, {})
               }
             ),
-            /* @__PURE__ */ a("span", { className: c("input-field", { disabled: t }), onClick: S, children: [
+            /* @__PURE__ */ a("span", { className: c("input-field", { disabled: t }), onClick: V, children: [
               /* @__PURE__ */ r(
                 "input",
                 {
-                  id: h ?? p,
+                  id: h ?? m,
                   ref: u,
                   className: c("input"),
                   type: "number",
@@ -110,11 +110,11 @@ const b = 5, Y = 16, P = [
                   disabled: t,
                   min: s,
                   max: o,
-                  onKeyDown: t ? void 0 : A,
+                  onKeyDown: t ? void 0 : U,
                   onChange: t ? void 0 : R,
                   onFocus: t ? void 0 : d,
                   onBlur: t ? void 0 : T,
-                  style: { width: F },
+                  style: { width: S },
                   ...M
                 }
               ),
@@ -137,5 +137,5 @@ const b = 5, Y = 16, P = [
   ] });
 };
 export {
-  tn as F
+  rn as F
 };

package/dist/fieldNumber.js

@@ -1,4 +1,4 @@
-import { F as m } from "./fieldNumber-dd8e6902.js";
+import { F as m } from "./fieldNumber-b4aa4d7e.js";
 import "react/jsx-runtime";
 import "react";
 import "./bind-06a7ff84.js";

package/dist/index.js

@@ -13,7 +13,7 @@ import { D as K } from "./datePicker-6085b8d0.js";
 import "react-datepicker";
 import { D as Y } from "./dropdown-0b931e15.js";
 import { FieldLabel as $ } from "./fieldLabel.js";
-import { F as ro } from "./fieldNumber-dd8e6902.js";
+import { F as ro } from "./fieldNumber-b4aa4d7e.js";
 import { F as to } from "./fieldText-1749da7a.js";
 import { F as no } from "./fieldTextFlex-2f51c173.js";
 import { FileDropArea as mo } from "./fileDropArea.js";

package/dist/popover.js

@@ -1,86 +1,95 @@
-import { jsxs as f, Fragment as j, jsx as s } from "react/jsx-runtime";
-import { useRef as C, useState as L, useCallback as M } from "react";
-import { useFloating as W, offset as U, flip as q, arrow as z, autoUpdate as B, useClick as J, useDismiss as K, useRole as Q, useInteractions as V, FloatingFocusManager as X, FloatingArrow as Y, FloatingPortal as Z } from "@floating-ui/react";
-import { c as $ } from "./bind-06a7ff84.js";
-import { g as ee, T as g, a as te, A as se, b as ne, m as oe } from "./floatingUi-46f5b896.js";
-const le = "_popover_n3nff_1", ae = "_title_n3nff_28", re = {
+import { jsxs as f, Fragment as W, jsx as s } from "react/jsx-runtime";
+import { useRef as U, useState as q, useCallback as z } from "react";
+import { useFloating as B, offset as J, flip as K, arrow as Q, autoUpdate as V, useClick as X, useDismiss as Y, useRole as Z, useInteractions as $, useTransitionStyles as ee, FloatingFocusManager as te, FloatingArrow as se, FloatingPortal as ne } from "@floating-ui/react";
+import { c as oe } from "./bind-06a7ff84.js";
+import { g as ae, T as u, a as le, A as ie, b as re, m as ce } from "./floatingUi-46f5b896.js";
+const pe = "_popover_n3nff_1", me = "_title_n3nff_28", fe = {
   "popover-wrapper": "_popover-wrapper_n3nff_1",
-  popover: le,
-  title: ae
-}, a = $.bind(re), ge = ({
-  content: u,
-  children: d,
-  className: _,
-  placement: h = "bottom",
-  fallbackPlacements: v = te,
-  title: r,
-  arrowOffset: n = se,
+  popover: pe,
+  title: me
+}, l = oe.bind(fe), he = ({
+  content: d,
+  children: g,
+  placement: v = "bottom",
+  fallbackPlacements: _ = le,
+  className: h,
+  title: i,
+  arrowOffset: n = ie,
   safeZone: A = 4,
   arrowColor: F = "white",
   dataAutomationId: x,
-  isOpened: R,
-  isCentered: i = !0,
-  strategy: w = "absolute",
-  shouldUsePortal: E = !1,
+  strategy: y = "absolute",
+  transitionDuration: R = 0,
+  isCentered: r = !0,
+  isFocusDisabled: w = !1,
+  isOpened: E,
+  shouldUsePortal: b = !1,
   setIsOpened: o
 }) => {
-  const c = C(null), [b, N] = L(!1), m = o ? R : b, P = (e) => {
+  const c = U(null), [T, N] = q(!1), p = o ? E : T, P = (e) => {
     o ? o(e) : N(e);
-  }, T = M(
-    (e, l) => ee(e, l, n, i),
-    [n, i]
-  ), { placement: y, refs: p, floatingStyles: k, context: t } = W({
-    open: m,
+  }, S = z(
+    (e, a) => ae(e, a, n, r),
+    [n, r]
+  ), { placement: k, refs: m, floatingStyles: I, context: t } = B({
+    open: p,
     onOpenChange: P,
-    placement: h,
-    strategy: w,
+    placement: v,
+    strategy: y,
     middleware: [
-      U(({ rects: e, placement: l }) => ({
-        mainAxis: A + g,
-        alignmentAxis: T(e, l)
+      J(({ rects: e, placement: a }) => ({
+        mainAxis: A + u,
+        alignmentAxis: S(e, a)
       })),
-      q({
+      K({
         fallbackAxisSideDirection: "start",
-        fallbackPlacements: v
+        fallbackPlacements: _
       }),
-      z({
+      Q({
         element: c
       })
     ],
-    whileElementsMounted: B
-  }), I = J(t), S = K(t), D = Q(t), { getReferenceProps: G, getFloatingProps: H } = V([I, S, D]), O = () => {
-    const e = /* @__PURE__ */ s(X, { context: t, modal: !1, children: /* @__PURE__ */ f(
+    whileElementsMounted: V
+  }), D = X(t), G = Y(t), H = Z(t), { getReferenceProps: M, getFloatingProps: O } = $([D, G, H]), { isMounted: j, styles: C } = ee(t, {
+    duration: R,
+    initial: { opacity: 0 }
+  }), L = () => {
+    const e = /* @__PURE__ */ s(te, { context: t, modal: !1, disabled: w, children: /* @__PURE__ */ f(
       "div",
       {
-        className: a("popover", _),
+        className: l("popover", h),
         "data-automation-id": x,
-        ref: p.setFloating,
-        style: k,
-        ...H(),
+        ref: m.setFloating,
+        style: {
+          ...I,
+          ...C,
+          pointerEvents: p ? "auto" : "none"
+        },
+        ...O(),
         children: [
           /* @__PURE__ */ s(
-            Y,
+            se,
             {
               ref: c,
               context: t,
-              width: ne,
-              height: g,
+              width: re,
+              height: u,
               fill: F,
-              staticOffset: oe.includes(y) ? null : n
+              staticOffset: ce.includes(k) ? null : n
             }
           ),
-          r && /* @__PURE__ */ s("div", { className: a("title"), children: r }),
-          u
+          i && /* @__PURE__ */ s("div", { className: l("title"), children: i }),
+          d
         ]
       }
     ) });
-    return E ? /* @__PURE__ */ s(Z, { children: e }) : e;
+    return b ? /* @__PURE__ */ s(ne, { children: e }) : e;
   };
-  return /* @__PURE__ */ f(j, { children: [
-    /* @__PURE__ */ s("div", { ref: p.setReference, ...G(), className: a("popover-wrapper"), children: d }),
-    m && O()
+  return /* @__PURE__ */ f(W, { children: [
+    /* @__PURE__ */ s("div", { ref: m.setReference, ...M(), className: l("popover-wrapper"), children: g }),
+    j && L()
   ] });
 };
 export {
-  ge as Popover
+  he as Popover
 };

package/package.json

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