@smwb/ui-react 2.7.0 → 2.8.0

package/dist/components/feedBack/skeleton/skeleton.js

@@ -1,49 +1,52 @@
 import { jsx as l } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/skeleton/skeleton.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                           */
-import { forwardRef as u } from "react";
-import g from "clsx";
-const d = (e) => typeof e == "number" ? `${e}px` : e, C = u(function({
-  className: f,
-  variant: p = "text",
-  width: k,
-  height: c,
-  animation: o = "pulse",
-  count: t = 1,
-  animationDelay: r,
-  component: h = "span",
-  style: w,
-  ...m
-}, a) {
-  const b = g(
+import { forwardRef as S } from "react";
+import $ from "clsx";
+const w = (o) => typeof o == "number" ? `${o}px` : o, O = S(function({
+  className: c,
+  variant: d = "text",
+  width: b,
+  height: _,
+  animation: s = "pulse",
+  count: n = 1,
+  animationDelay: m,
+  component: g = "span",
+  style: e,
+  "data-testid": r,
+  ...a
+}, f) {
+  const u = $(
     "smwb-skeleton",
-    `smwb-skeleton_${p}`,
-    o === !1 ? "smwb-skeleton_no-animation" : `smwb-skeleton_${o}`,
-    f
-  ), _ = h, i = (s) => {
-    const n = {
-      ...w,
-      width: d(k),
-      height: d(c),
-      ...r ? { animationDelay: `${s * r}ms` } : {}
+    `smwb-skeleton_${d}`,
+    s === !1 ? "smwb-skeleton_no-animation" : `smwb-skeleton_${s}`,
+    c
+  ), x = g, h = (t) => {
+    var k, p;
+    const i = {
+      ...e,
+      // An unset prop keeps the width or height the caller set in `style`.
+      width: (k = w(b)) != null ? k : e == null ? void 0 : e.width,
+      height: (p = w(_)) != null ? p : e == null ? void 0 : e.height,
+      ...m ? { animationDelay: `${t * m}ms` } : {}
     };
     return /* @__PURE__ */ l(
-      _,
+      x,
       {
-        ref: t === 1 ? a : void 0,
-        ...t === 1 ? m : {},
-        "data-testid": "skeleton",
+        ref: n === 1 ? f : void 0,
+        ...n === 1 ? a : {},
+        "data-testid": n === 1 && r != null ? r : "skeleton",
         "aria-hidden": "true",
-        className: b,
-        style: n
+        className: u,
+        style: i
       },
-      s
+      t
     );
   };
-  return t === 1 ? i(0) : /* @__PURE__ */ l("span", { ref: a, ...m, className: "smwb-skeleton__group", "aria-hidden": "true", children: Array.from({ length: t }, (s, n) => i(n)) });
+  return n === 1 ? h(0) : /* @__PURE__ */ l("span", { ref: f, ...a, "data-testid": r, className: "smwb-skeleton__group", "aria-hidden": "true", children: Array.from({ length: n }, (t, i) => h(i)) });
 });
 export {
-  C as Skeleton,
-  C as default
+  O as Skeleton,
+  O as default
 };
 //# sourceMappingURL=skeleton.js.map

package/dist/components/feedBack/skeleton/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.js","sources":["../../../../src/components/feedBack/skeleton/skeleton.tsx"],"sourcesContent":["import { CSSProperties, forwardRef, HTMLAttributes } from \"react\";\nimport cn from \"clsx\";\n\nexport interface SkeletonProps extends HTMLAttributes<HTMLElement> {\n  className?: string;\n  /** Shape of the placeholder. */\n  variant?: \"text\" | \"circular\" | \"rounded\" | \"rectangular\";\n  /** Width — number (px) or any CSS length. */\n  width?: number | string;\n  /** Height — number (px) or any CSS length. */\n  height?: number | string;\n  /** Shimmer animation; pass false to disable. */\n  animation?: \"pulse\" | \"wave\" | false;\n  /** Render N stacked placeholders. */\n  count?: number;\n  /** Stagger consecutive items by N ms (with `count`). */\n  animationDelay?: number;\n  /** Root element. */\n  component?: \"span\" | \"div\";\n}\n\nconst toCssSize = (value?: number | string): string | undefined => (typeof value === \"number\" ? `${value}px` : value);\n\nexport const Skeleton = forwardRef<HTMLElement, SkeletonProps>(function Skeleton(\n  {\n    className,\n    variant = \"text\",\n    width,\n    height,\n    animation = \"pulse\",\n    count = 1,\n    animationDelay,\n    component = \"span\",\n    style,\n    ...props\n  },\n  ref\n) {\n  const skeletonClassName = cn(\n    \"smwb-skeleton\",\n    `smwb-skeleton_${variant}`,\n    animation === false ? \"smwb-skeleton_no-animation\" : `smwb-skeleton_${animation}`,\n    className\n  );\n\n  const Tag = component as \"span\";\n\n  const renderOne = (i: number) => {\n    const inlineStyle: CSSProperties = {\n      ...style,\n      width: toCssSize(width),\n      height: toCssSize(height),\n      ...(animationDelay ? { animationDelay: `${i * animationDelay}ms` } : {}),\n    };\n    return (\n      <Tag\n        key={i}\n        ref={count === 1 ? ref : undefined}\n        {...(count === 1 ? props : {})}\n        data-testid=\"skeleton\"\n        aria-hidden=\"true\"\n        className={skeletonClassName}\n        style={inlineStyle}\n      />\n    );\n  };\n\n  if (count === 1) {\n    return renderOne(0);\n  }\n\n  return (\n    <span ref={ref} {...props} className=\"smwb-skeleton__group\" aria-hidden=\"true\">\n      {Array.from({ length: count }, (_, i) => renderOne(i))}\n    </span>\n  );\n});\n\nexport default Skeleton;\n"],"names":["toCssSize","value","Skeleton","forwardRef","className","variant","width","height","animation","count","animationDelay","component","style","props","ref","skeletonClassName","cn","Tag","renderOne","i","inlineStyle","jsx","_"],"mappings":";;;;;AAuBA,MAAMA,IAAY,CAACC,MAAiD,OAAOA,KAAU,WAAW,GAAGA,CAAK,OAAOA,GAElGC,IAAWC,EAAuC,SAC7D;AAAA,EACE,WAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ;AAAA,EACR,gBAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAoBC;AAAA,IACxB;AAAA,IACA,iBAAiBX,CAAO;AAAA,IACxBG,MAAc,KAAQ,+BAA+B,iBAAiBA,CAAS;AAAA,IAC/EJ;AAAA,EAAA,GAGIa,IAAMN,GAENO,IAAY,CAACC,MAAc;AAC/B,UAAMC,IAA6B;AAAA,MACjC,GAAGR;AAAA,MACH,OAAOZ,EAAUM,CAAK;AAAA,MACtB,QAAQN,EAAUO,CAAM;AAAA,MACxB,GAAIG,IAAiB,EAAE,gBAAgB,GAAGS,IAAIT,CAAc,SAAS,CAAA;AAAA,IAAC;AAExE,WACE,gBAAAW;AAAA,MAACJ;AAAA,MAAA;AAAA,QAEC,KAAKR,MAAU,IAAIK,IAAM;AAAA,QACxB,GAAIL,MAAU,IAAII,IAAQ,CAAA;AAAA,QAC3B,eAAY;AAAA,QACZ,eAAY;AAAA,QACZ,WAAWE;AAAA,QACX,OAAOK;AAAA,MAAA;AAAA,MANFD;AAAA,IAAA;AAAA,EASX;AAEA,SAAIV,MAAU,IACLS,EAAU,CAAC,IAIlB,gBAAAG,EAAC,UAAK,KAAAP,GAAW,GAAGD,GAAO,WAAU,wBAAuB,eAAY,QACrE,UAAA,MAAM,KAAK,EAAE,QAAQJ,KAAS,CAACa,GAAGH,MAAMD,EAAUC,CAAC,CAAC,GACvD;AAEJ,CAAC;"}
+{"version":3,"file":"skeleton.js","sources":["../../../../src/components/feedBack/skeleton/skeleton.tsx"],"sourcesContent":["import { CSSProperties, forwardRef, HTMLAttributes } from \"react\";\nimport cn from \"clsx\";\n\nexport interface SkeletonProps extends HTMLAttributes<HTMLElement> {\n  className?: string;\n  /** Shape of the placeholder. */\n  variant?: \"text\" | \"circular\" | \"rounded\" | \"rectangular\";\n  /** Width — number (px) or any CSS length. */\n  width?: number | string;\n  /** Height — number (px) or any CSS length. */\n  height?: number | string;\n  /** Shimmer animation; pass false to disable. */\n  animation?: \"pulse\" | \"wave\" | false;\n  /**\n   * Render N stacked placeholders. With `count` > 1 they sit in a group `<span>`, which takes the `ref` and the\n   * other HTML attributes; `className` and `style` go on each placeholder.\n   */\n  count?: number;\n  /** Stagger consecutive items by N ms (with `count`). */\n  animationDelay?: number;\n  /** Element of each placeholder. */\n  component?: \"span\" | \"div\";\n  /**\n   * Test id of the placeholder; `skeleton` unless given. With `count` > 1 it\n   * marks the group, and each placeholder keeps `skeleton`.\n   */\n  \"data-testid\"?: string;\n}\n\nconst toCssSize = (value?: number | string): string | undefined => (typeof value === \"number\" ? `${value}px` : value);\n\nexport const Skeleton = forwardRef<HTMLElement, SkeletonProps>(function Skeleton(\n  {\n    className,\n    variant = \"text\",\n    width,\n    height,\n    animation = \"pulse\",\n    count = 1,\n    animationDelay,\n    component = \"span\",\n    style,\n    \"data-testid\": dataTestId,\n    ...props\n  },\n  ref\n) {\n  const skeletonClassName = cn(\n    \"smwb-skeleton\",\n    `smwb-skeleton_${variant}`,\n    animation === false ? \"smwb-skeleton_no-animation\" : `smwb-skeleton_${animation}`,\n    className\n  );\n\n  const Tag = component as \"span\";\n\n  const renderOne = (i: number) => {\n    const inlineStyle: CSSProperties = {\n      ...style,\n      // An unset prop keeps the width or height the caller set in `style`.\n      width: toCssSize(width) ?? style?.width,\n      height: toCssSize(height) ?? style?.height,\n      ...(animationDelay ? { animationDelay: `${i * animationDelay}ms` } : {}),\n    };\n    return (\n      <Tag\n        key={i}\n        ref={count === 1 ? ref : undefined}\n        {...(count === 1 ? props : {})}\n        data-testid={count === 1 ? (dataTestId ?? \"skeleton\") : \"skeleton\"}\n        aria-hidden=\"true\"\n        className={skeletonClassName}\n        style={inlineStyle}\n      />\n    );\n  };\n\n  if (count === 1) {\n    return renderOne(0);\n  }\n\n  return (\n    <span ref={ref} {...props} data-testid={dataTestId} className=\"smwb-skeleton__group\" aria-hidden=\"true\">\n      {Array.from({ length: count }, (_, i) => renderOne(i))}\n    </span>\n  );\n});\n\nexport default Skeleton;\n"],"names":["toCssSize","value","Skeleton","forwardRef","className","variant","width","height","animation","count","animationDelay","component","style","dataTestId","props","ref","skeletonClassName","cn","Tag","renderOne","i","inlineStyle","_a","_b","jsx","_"],"mappings":";;;;;AA+BA,MAAMA,IAAY,CAACC,MAAiD,OAAOA,KAAU,WAAW,GAAGA,CAAK,OAAOA,GAElGC,IAAWC,EAAuC,SAC7D;AAAA,EACE,WAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ;AAAA,EACR,gBAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,eAAeC;AAAA,EACf,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAoBC;AAAA,IACxB;AAAA,IACA,iBAAiBZ,CAAO;AAAA,IACxBG,MAAc,KAAQ,+BAA+B,iBAAiBA,CAAS;AAAA,IAC/EJ;AAAA,EAAA,GAGIc,IAAMP,GAENQ,IAAY,CAACC,MAAc;;AAC/B,UAAMC,IAA6B;AAAA,MACjC,GAAGT;AAAA;AAAA,MAEH,QAAOU,IAAAtB,EAAUM,CAAK,MAAf,OAAAgB,IAAoBV,KAAA,gBAAAA,EAAO;AAAA,MAClC,SAAQW,IAAAvB,EAAUO,CAAM,MAAhB,OAAAgB,IAAqBX,KAAA,gBAAAA,EAAO;AAAA,MACpC,GAAIF,IAAiB,EAAE,gBAAgB,GAAGU,IAAIV,CAAc,SAAS,CAAA;AAAA,IAAC;AAExE,WACE,gBAAAc;AAAA,MAACN;AAAA,MAAA;AAAA,QAEC,KAAKT,MAAU,IAAIM,IAAM;AAAA,QACxB,GAAIN,MAAU,IAAIK,IAAQ,CAAA;AAAA,QAC3B,eAAaL,MAAU,KAAKI,KAAA,OAAAA,IAA4B;AAAA,QACxD,eAAY;AAAA,QACZ,WAAWG;AAAA,QACX,OAAOK;AAAA,MAAA;AAAA,MANFD;AAAA,IAAA;AAAA,EASX;AAEA,SAAIX,MAAU,IACLU,EAAU,CAAC,IAIlB,gBAAAK,EAAC,UAAK,KAAAT,GAAW,GAAGD,GAAO,eAAaD,GAAY,WAAU,wBAAuB,eAAY,QAC9F,gBAAM,KAAK,EAAE,QAAQJ,EAAA,GAAS,CAACgB,GAAG,MAAMN,EAAU,CAAC,CAAC,EAAA,CACvD;AAEJ,CAAC;"}

package/dist/components/feedBack/snackbar/snackbar.js

@@ -1,28 +1,28 @@
-import { jsx as k, jsxs as g } from "react/jsx-runtime";
+import { jsx as f, jsxs as I } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/snackbar/snackbar.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                           */
-import F, { useState as L, useCallback as G, useContext as q, useRef as E, createContext as y, useEffect as z } from "react";
+import F, { useState as L, useCallback as G, useContext as q, useRef as _, createContext as y, useEffect as z } from "react";
 import { v4 as H } from "uuid";
 import { createPortal as J } from "react-dom";
-import N from "clsx";
+import A from "clsx";
 import { TransitionGroup as K, CSSTransition as M } from "react-transition-group";
 import { useSnackbarsPortal as Q } from "./useSnackbarsPortal.js";
 import { useEventCallback as U } from "../../../hooks/useEventCallback.js";
 function V({
   snack: r,
-  position: l,
-  variant: f,
-  className: m,
-  component: v,
-  autoClose: S,
-  autoCloseTime: w,
-  snackRest: o,
-  onSnackRemove: u,
-  onClose: b
+  position: m,
+  variant: v,
+  className: u,
+  component: S,
+  autoClose: w,
+  autoCloseTime: C,
+  snackRest: c,
+  onSnackRemove: b,
+  onClose: d
 }) {
-  var d, a, n, i, C;
-  const c = E(null);
-  return /* @__PURE__ */ k(
+  var s, a, n, l, x;
+  const i = _(null);
+  return /* @__PURE__ */ f(
     M,
     {
       appear: !0,
@@ -38,27 +38,27 @@ function V({
       },
       unmountOnExit: !0,
       in: !0,
-      nodeRef: c,
-      children: /* @__PURE__ */ k(
+      nodeRef: i,
+      children: /* @__PURE__ */ f(
         W,
         {
-          ref: c,
-          component: (d = r.component) != null ? d : v,
+          ref: i,
+          component: (s = r.component) != null ? s : S,
           message: r.message,
-          position: (a = r.position) != null ? a : l,
-          variant: (n = r.variant) != null ? n : f,
-          onClick: u(r.id),
-          className: N(m, r.className),
-          isAutoClose: (i = r.autoClose) != null ? i : S,
-          autoCloseTime: (C = r.autoCloseTime) != null ? C : w,
-          onClose: b(r.id),
-          ...o
+          position: (a = r.position) != null ? a : m,
+          variant: (n = r.variant) != null ? n : v,
+          onClick: b(r.id),
+          className: A(u, r.className),
+          isAutoClose: (l = r.autoClose) != null ? l : w,
+          autoCloseTime: (x = r.autoCloseTime) != null ? x : C,
+          onClose: d(r.id),
+          ...c
         }
       )
     }
   );
 }
-const I = y({
+const $ = y({
   addSnackbar: () => "",
   clearAllSnackbars: () => {
   },
@@ -71,122 +71,123 @@ const I = y({
 });
 function ce(r) {
   const {
-    position: l = "top-right",
-    variant: f = "dark",
-    className: m,
-    autoClose: v = !0,
-    autoCloseTime: S = 5e3,
-    closeOnClick: w = !0,
-    onClick: o,
-    component: u = "div",
-    children: b,
-    ...c
-  } = r, [d, a] = L([]), { snackbarDomRoot: n } = Q(), i = G((e) => {
-    const { key: t, ...s } = e, p = t != null ? t : H(), x = { id: p, ...s };
-    return a((T) => {
-      const A = T.findIndex((B) => B.id === p);
-      if (A === -1)
-        return [...T, x];
-      const P = [...T];
-      return P[A] = x, P;
-    }), p;
-  }, []), C = () => {
+    position: m = "top-right",
+    variant: v = "dark",
+    className: u,
+    autoClose: S = !0,
+    autoCloseTime: w = 5e3,
+    closeOnClick: C = !0,
+    onClick: c,
+    component: b = "div",
+    children: d,
+    ...i
+  } = r, [s, a] = L([]), { snackbarDomRoot: n } = Q(), l = G((e) => {
+    const { key: t, ...o } = e, k = t != null ? t : H(), h = { id: k, ...o };
+    return a((R) => {
+      const g = R.findIndex((B) => B.id === k);
+      if (g === -1)
+        return [...R, h];
+      const E = [...R];
+      return E[g] = h, E;
+    }), k;
+  }, []), x = () => {
     a([]);
-  }, _ = () => {
+  }, T = () => {
     a((e) => e.slice(1));
-  }, $ = () => {
+  }, N = () => {
     a((e) => e.slice(0, -1));
-  }, h = (e) => {
-    a((t) => t.filter((s) => s.id !== e));
+  }, p = (e) => {
+    a((t) => t.filter((o) => o.id !== e));
   }, j = (e) => (t) => {
-    o == null || o(t), w && h(e);
+    c == null || c(t), C && p(e);
   }, D = (e) => () => {
-    h(e);
-  }, R = d.reduce(
+    p(e);
+  }, P = s.reduce(
     (e, t) => {
-      var p, x;
-      const s = (p = t.position) != null ? p : l;
-      return e[s] = [...(x = e[s]) != null ? x : [], t], e;
+      var k, h;
+      const o = (k = t.position) != null ? k : m;
+      return e[o] = [...(h = e[o]) != null ? h : [], t], e;
     },
     {}
-  ), O = Object.keys(R).map((e) => {
-    const t = R[e];
-    return /* @__PURE__ */ k(
+  ), O = Object.keys(P).map((e) => {
+    const t = P[e];
+    return /* @__PURE__ */ f(
       K,
       {
-        className: N("smwb-snackbars", `smwb-${e}`),
+        className: A("smwb-snackbars", `smwb-${e}`),
         "data-testid": `snackbars-${e}`,
         appear: !0,
-        children: t.map((s) => /* @__PURE__ */ k(
+        children: t.map((o) => /* @__PURE__ */ f(
           V,
           {
-            snack: s,
-            position: l,
-            variant: f,
-            className: m,
-            component: u,
-            autoClose: v,
-            autoCloseTime: S,
-            snackRest: c,
+            snack: o,
+            position: m,
+            variant: v,
+            className: u,
+            component: b,
+            autoClose: S,
+            autoCloseTime: w,
+            snackRest: i,
             onSnackRemove: j,
             onClose: D
           },
-          s.id
+          o.id
         ))
       },
       e
     );
   });
-  return /* @__PURE__ */ g(
-    I.Provider,
+  return /* @__PURE__ */ I(
+    $.Provider,
     {
-      value: { addSnackbar: i, clearAllSnackbars: C, clearFirstSnackbar: _, clearLastSnackbar: $, clearByIdSnackbar: h },
+      value: { addSnackbar: l, clearAllSnackbars: x, clearFirstSnackbar: T, clearLastSnackbar: N, clearByIdSnackbar: p },
       children: [
-        b,
+        d,
         n && J(O, n)
       ]
     }
   );
 }
 const W = F.forwardRef(function({
-  className: l,
-  message: f,
-  variant: m = "dark",
-  position: v = "top-right",
-  onClick: S,
-  component: w = "div",
-  isAutoClose: o,
-  autoCloseTime: u,
-  onClose: b,
-  action: c,
-  ...d
+  className: m,
+  message: v,
+  variant: u = "dark",
+  position: S = "top-right",
+  onClick: w,
+  component: C = "div",
+  isAutoClose: c,
+  autoCloseTime: b,
+  onClose: d,
+  action: i,
+  ...s
 }, a) {
-  const n = E(), i = U(() => {
-    !b || !o || !u || (n.current && clearTimeout(n.current), n.current = setTimeout(() => {
-      b();
-    }, u));
+  var T, N, p;
+  const n = _(), l = U(() => {
+    !d || !c || !b || (n.current && clearTimeout(n.current), n.current = setTimeout(() => {
+      d();
+    }, b));
   });
-  return z(() => (i(), () => {
+  return z(() => (l(), () => {
     n.current && clearTimeout(n.current);
-  }), [i]), /* @__PURE__ */ g(
-    w,
+  }), [l]), /* @__PURE__ */ I(
+    C,
     {
       ref: a,
-      className: N("smwb-snackbar", l, `smwb-${m}`, `smwb-${v}`),
-      onClick: S,
-      role: "alert",
-      "aria-live": m === "danger" ? "assertive" : "polite",
-      "aria-atomic": "true",
-      ...d,
+      className: A("smwb-snackbar", m, `smwb-${u}`, `smwb-${S}`),
+      onClick: w,
+      ...s,
+      role: (T = s.role) != null ? T : "alert",
+      "aria-live": (N = s["aria-live"]) != null ? N : u === "danger" ? "assertive" : "polite",
+      "aria-atomic": (p = s["aria-atomic"]) != null ? p : "true",
       children: [
-        /* @__PURE__ */ k("div", { className: "smwb-snackbar__body", children: f }),
-        c != null ? /* @__PURE__ */ k("div", { className: "smwb-snackbar__action", children: c }) : null
+        /* @__PURE__ */ f("div", { className: "smwb-snackbar__body", children: v }),
+        i != null ? /* @__PURE__ */ f("div", { className: "smwb-snackbar__action", children: i }) : null
       ]
     }
   );
 });
 function ie() {
-  return q(I);
+  return q($);
 }
 export {
   W as Snackbar,

package/dist/components/feedBack/snackbar/snackbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"snackbar.js","sources":["../../../../src/components/feedBack/snackbar/snackbar.tsx"],"sourcesContent":["import React, { createContext, useCallback, useContext, useEffect, useRef, useState } from \"react\";\nimport { v4 } from \"uuid\";\nimport { createPortal } from \"react-dom\";\nimport cn from \"clsx\";\nimport { CSSTransition, TransitionGroup } from \"react-transition-group\";\nimport { useSnackbarsPortal } from \"./useSnackbarsPortal\";\nimport { useEventCallback } from \"../../../hooks/useEventCallback\";\n\nexport const variants = [\"dark\", \"light\", \"danger\", \"success\", \"warning\", \"info\"] as const;\nexport const positions = [\"top\", \"bottom\", \"top-left\", \"top-right\", \"bottom-right\", \"bottom-left\"] as const;\n\nexport type Variants = (typeof variants)[number];\nexport type Position = (typeof positions)[number];\n\nexport interface SnackbarsProviderProps extends React.HTMLAttributes<HTMLElement> {\n  variant?: Variants;\n  position?: Position;\n  autoCloseTime?: number;\n  closeOnClick?: boolean;\n  autoClose?: boolean;\n  component?: React.ElementType;\n}\n\ninterface Snack extends SnackbarsProviderProps {\n  id: string;\n  message: React.ReactNode;\n}\n\ninterface SnackTransitionProps {\n  snack: Snack;\n  position: Position;\n  variant: Variants;\n  className?: string;\n  component: React.ElementType;\n  autoClose: boolean;\n  autoCloseTime: number;\n  snackRest: Omit<\n    SnackbarsProviderProps,\n    \"variant\" | \"position\" | \"autoCloseTime\" | \"autoClose\" | \"closeOnClick\" | \"onClick\" | \"component\" | \"children\"\n  >;\n  onSnackRemove: (id: string) => (event: React.MouseEvent<HTMLElement>) => void;\n  onClose: (id: string) => () => void;\n}\n\nfunction SnackTransition({\n  snack,\n  position,\n  variant,\n  className,\n  component,\n  autoClose,\n  autoCloseTime,\n  snackRest,\n  onSnackRemove,\n  onClose,\n}: SnackTransitionProps) {\n  const nodeRef = useRef<HTMLDivElement>(null);\n\n  return (\n    <CSSTransition\n      appear\n      timeout={125}\n      classNames={{\n        appear: \"smwb-snackbar-enter\",\n        appearActive: \"smwb-snackbar-enter-active\",\n        appearDone: \"smwb-snackbar-enter-done\",\n        enter: \"smwb-snackbar-enter\",\n        enterActive: \"smwb-snackbar-enter-active\",\n        enterDone: \"smwb-snackbar-enter-done\",\n        exitActive: \"smwb-snackbar-exit-active\",\n      }}\n      unmountOnExit\n      in\n      nodeRef={nodeRef}\n    >\n      <Snackbar\n        ref={nodeRef}\n        component={snack.component ?? component}\n        message={snack.message}\n        position={snack.position ?? position}\n        variant={snack.variant ?? variant}\n        onClick={onSnackRemove(snack.id)}\n        className={cn(className, snack.className)}\n        isAutoClose={snack.autoClose ?? autoClose}\n        autoCloseTime={snack.autoCloseTime ?? autoCloseTime}\n        onClose={onClose(snack.id)}\n        {...snackRest}\n      />\n    </CSSTransition>\n  );\n}\n\nexport interface AddSnackbarOptions extends SnackbarsProviderProps {\n  key?: string;\n  message: React.ReactNode;\n}\n\nexport type AddSnackbar = (options: AddSnackbarOptions) => string;\n\nexport interface SnackbarOptions {\n  addSnackbar: AddSnackbar;\n  clearAllSnackbars: () => void;\n  clearFirstSnackbar: () => void;\n  clearLastSnackbar: () => void;\n  clearByIdSnackbar: (id: string) => void;\n}\n\nconst SnackbarContext = createContext<SnackbarOptions>({\n  addSnackbar: () => \"\",\n  clearAllSnackbars: () => undefined,\n  clearFirstSnackbar: () => undefined,\n  clearLastSnackbar: () => undefined,\n  clearByIdSnackbar: () => undefined,\n});\n\nexport function SnackbarProvider(props: SnackbarsProviderProps) {\n  const {\n    position = \"top-right\",\n    variant = \"dark\",\n    className,\n    autoClose = true,\n    autoCloseTime = 5000,\n    closeOnClick = true,\n    onClick,\n    component = \"div\",\n    children,\n    ...rest\n  } = props;\n\n  const [snacks, setSnacks] = useState<Snack[]>([]);\n  const { snackbarDomRoot } = useSnackbarsPortal();\n\n  const addSnackbar: AddSnackbar = useCallback((options) => {\n    const { key, ...rest } = options;\n\n    const id = key ?? v4();\n    const snack: Snack = { id, ...rest };\n\n    setSnacks((prevState) => {\n      const index = prevState.findIndex((item) => item.id === id);\n      if (index === -1) {\n        return [...prevState, snack];\n      }\n      const next = [...prevState];\n      next[index] = snack;\n      return next;\n    });\n\n    return id;\n  }, []);\n\n  const clearAllSnackbars = () => {\n    setSnacks([]);\n  };\n\n  const clearFirstSnackbar = () => {\n    setSnacks((prevState) => prevState.slice(1));\n  };\n\n  const clearLastSnackbar = () => {\n    setSnacks((prevState) => prevState.slice(0, -1));\n  };\n\n  const clearByIdSnackbar = (id: string) => {\n    setSnacks((prevState) => prevState.filter((value) => value.id !== id));\n  };\n\n  const onSnackRemove = (id: string) => (event: React.MouseEvent<HTMLElement>) => {\n    onClick?.(event);\n\n    if (closeOnClick) {\n      clearByIdSnackbar(id);\n    }\n  };\n\n  const onClose = (id: string) => () => {\n    clearByIdSnackbar(id);\n  };\n\n  const currentPositions = snacks.reduce(\n    (acc, snack) => {\n      const currentPosition = snack.position ?? position;\n\n      acc[currentPosition] = [...(acc[currentPosition] ?? []), snack];\n\n      return acc;\n    },\n    {} as Record<Position, Snack[]>\n  );\n\n  const snackbars = (Object.keys(currentPositions) as unknown as typeof positions).map((key) => {\n    const snacks = currentPositions[key];\n\n    return (\n      <TransitionGroup\n        key={key}\n        className={cn(\"smwb-snackbars\", `smwb-${key}`)}\n        data-testid={`snackbars-${key}`}\n        appear\n      >\n        {snacks.map((snack) => (\n          <SnackTransition\n            key={snack.id}\n            snack={snack}\n            position={position}\n            variant={variant}\n            className={className}\n            component={component}\n            autoClose={autoClose}\n            autoCloseTime={autoCloseTime}\n            snackRest={rest}\n            onSnackRemove={onSnackRemove}\n            onClose={onClose}\n          />\n        ))}\n      </TransitionGroup>\n    );\n  });\n\n  return (\n    <SnackbarContext.Provider\n      value={{ addSnackbar, clearAllSnackbars, clearFirstSnackbar, clearLastSnackbar, clearByIdSnackbar }}\n    >\n      {children}\n      {snackbarDomRoot && createPortal(snackbars, snackbarDomRoot)}\n    </SnackbarContext.Provider>\n  );\n}\n\nexport interface SnackbarProps extends React.HTMLAttributes<HTMLElement> {\n  message?: React.ReactNode;\n  variant?: Variants;\n  position?: Position;\n  component?: React.ElementType;\n  isAutoClose?: boolean;\n  autoCloseTime?: number;\n  onClose?: () => void;\n  /** Optional action node rendered after the message (e.g. an Undo button). */\n  action?: React.ReactNode;\n}\n\nexport const Snackbar = React.forwardRef(function SnackbarInner(\n  {\n    className,\n    message,\n    variant = \"dark\",\n    position = \"top-right\",\n    onClick,\n    component = \"div\",\n    isAutoClose,\n    autoCloseTime,\n    onClose,\n    action,\n    ...rest\n  }: SnackbarProps,\n  ref\n) {\n  const timerClose = useRef<ReturnType<typeof setTimeout>>();\n\n  const setCloseTimer = useEventCallback(() => {\n    if (!onClose || !isAutoClose || !autoCloseTime) {\n      return;\n    }\n\n    if (timerClose.current) {\n      clearTimeout(timerClose.current);\n    }\n\n    timerClose.current = setTimeout(() => {\n      onClose();\n    }, autoCloseTime);\n  });\n\n  useEffect(() => {\n    setCloseTimer();\n\n    return () => {\n      if (timerClose.current) {\n        clearTimeout(timerClose.current);\n      }\n    };\n  }, [setCloseTimer]);\n\n  const Element = component;\n\n  return (\n    <Element\n      ref={ref}\n      className={cn(\"smwb-snackbar\", className, `smwb-${variant}`, `smwb-${position}`)}\n      onClick={onClick}\n      role=\"alert\"\n      aria-live={variant === \"danger\" ? \"assertive\" : \"polite\"}\n      aria-atomic=\"true\"\n      {...rest}\n    >\n      <div className=\"smwb-snackbar__body\">{message}</div>\n      {action != null ? <div className=\"smwb-snackbar__action\">{action}</div> : null}\n    </Element>\n  );\n});\n\nexport function useSnackbar() {\n  return useContext(SnackbarContext);\n}\n\nexport default SnackbarProvider;\n"],"names":["SnackTransition","snack","position","variant","className","component","autoClose","autoCloseTime","snackRest","onSnackRemove","onClose","nodeRef","useRef","jsx","CSSTransition","Snackbar","_a","_b","_c","cn","_d","_e","SnackbarContext","createContext","SnackbarProvider","props","closeOnClick","onClick","children","rest","snacks","setSnacks","useState","snackbarDomRoot","useSnackbarsPortal","addSnackbar","useCallback","options","key","id","v4","prevState","index","item","next","clearAllSnackbars","clearFirstSnackbar","clearLastSnackbar","clearByIdSnackbar","value","event","currentPositions","acc","currentPosition","snackbars","TransitionGroup","jsxs","createPortal","React","message","isAutoClose","action","ref","timerClose","setCloseTimer","useEventCallback","useEffect","useSnackbar","useContext"],"mappings":"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"}
+{"version":3,"file":"snackbar.js","sources":["../../../../src/components/feedBack/snackbar/snackbar.tsx"],"sourcesContent":["import React, { createContext, useCallback, useContext, useEffect, useRef, useState } from \"react\";\nimport { v4 } from \"uuid\";\nimport { createPortal } from \"react-dom\";\nimport cn from \"clsx\";\nimport { CSSTransition, TransitionGroup } from \"react-transition-group\";\nimport { useSnackbarsPortal } from \"./useSnackbarsPortal\";\nimport { useEventCallback } from \"../../../hooks/useEventCallback\";\n\nexport const variants = [\"dark\", \"light\", \"danger\", \"success\", \"warning\", \"info\"] as const;\nexport const positions = [\"top\", \"bottom\", \"top-left\", \"top-right\", \"bottom-right\", \"bottom-left\"] as const;\n\nexport type Variants = (typeof variants)[number];\nexport type Position = (typeof positions)[number];\n\nexport interface SnackbarsProviderProps extends React.HTMLAttributes<HTMLElement> {\n  variant?: Variants;\n  position?: Position;\n  autoCloseTime?: number;\n  closeOnClick?: boolean;\n  autoClose?: boolean;\n  component?: React.ElementType;\n}\n\ninterface Snack extends SnackbarsProviderProps {\n  id: string;\n  message: React.ReactNode;\n}\n\ninterface SnackTransitionProps {\n  snack: Snack;\n  position: Position;\n  variant: Variants;\n  className?: string;\n  component: React.ElementType;\n  autoClose: boolean;\n  autoCloseTime: number;\n  snackRest: Omit<\n    SnackbarsProviderProps,\n    \"variant\" | \"position\" | \"autoCloseTime\" | \"autoClose\" | \"closeOnClick\" | \"onClick\" | \"component\" | \"children\"\n  >;\n  onSnackRemove: (id: string) => (event: React.MouseEvent<HTMLElement>) => void;\n  onClose: (id: string) => () => void;\n}\n\nfunction SnackTransition({\n  snack,\n  position,\n  variant,\n  className,\n  component,\n  autoClose,\n  autoCloseTime,\n  snackRest,\n  onSnackRemove,\n  onClose,\n}: SnackTransitionProps) {\n  const nodeRef = useRef<HTMLDivElement>(null);\n\n  return (\n    <CSSTransition\n      appear\n      timeout={125}\n      classNames={{\n        appear: \"smwb-snackbar-enter\",\n        appearActive: \"smwb-snackbar-enter-active\",\n        appearDone: \"smwb-snackbar-enter-done\",\n        enter: \"smwb-snackbar-enter\",\n        enterActive: \"smwb-snackbar-enter-active\",\n        enterDone: \"smwb-snackbar-enter-done\",\n        exitActive: \"smwb-snackbar-exit-active\",\n      }}\n      unmountOnExit\n      in\n      nodeRef={nodeRef}\n    >\n      <Snackbar\n        ref={nodeRef}\n        component={snack.component ?? component}\n        message={snack.message}\n        position={snack.position ?? position}\n        variant={snack.variant ?? variant}\n        onClick={onSnackRemove(snack.id)}\n        className={cn(className, snack.className)}\n        isAutoClose={snack.autoClose ?? autoClose}\n        autoCloseTime={snack.autoCloseTime ?? autoCloseTime}\n        onClose={onClose(snack.id)}\n        {...snackRest}\n      />\n    </CSSTransition>\n  );\n}\n\nexport interface AddSnackbarOptions extends SnackbarsProviderProps {\n  key?: string;\n  message: React.ReactNode;\n}\n\nexport type AddSnackbar = (options: AddSnackbarOptions) => string;\n\nexport interface SnackbarOptions {\n  addSnackbar: AddSnackbar;\n  clearAllSnackbars: () => void;\n  clearFirstSnackbar: () => void;\n  clearLastSnackbar: () => void;\n  clearByIdSnackbar: (id: string) => void;\n}\n\nconst SnackbarContext = createContext<SnackbarOptions>({\n  addSnackbar: () => \"\",\n  clearAllSnackbars: () => undefined,\n  clearFirstSnackbar: () => undefined,\n  clearLastSnackbar: () => undefined,\n  clearByIdSnackbar: () => undefined,\n});\n\nexport function SnackbarProvider(props: SnackbarsProviderProps) {\n  const {\n    position = \"top-right\",\n    variant = \"dark\",\n    className,\n    autoClose = true,\n    autoCloseTime = 5000,\n    closeOnClick = true,\n    onClick,\n    component = \"div\",\n    children,\n    ...rest\n  } = props;\n\n  const [snacks, setSnacks] = useState<Snack[]>([]);\n  const { snackbarDomRoot } = useSnackbarsPortal();\n\n  const addSnackbar: AddSnackbar = useCallback((options) => {\n    const { key, ...rest } = options;\n\n    const id = key ?? v4();\n    const snack: Snack = { id, ...rest };\n\n    setSnacks((prevState) => {\n      const index = prevState.findIndex((item) => item.id === id);\n      if (index === -1) {\n        return [...prevState, snack];\n      }\n      const next = [...prevState];\n      next[index] = snack;\n      return next;\n    });\n\n    return id;\n  }, []);\n\n  const clearAllSnackbars = () => {\n    setSnacks([]);\n  };\n\n  const clearFirstSnackbar = () => {\n    setSnacks((prevState) => prevState.slice(1));\n  };\n\n  const clearLastSnackbar = () => {\n    setSnacks((prevState) => prevState.slice(0, -1));\n  };\n\n  const clearByIdSnackbar = (id: string) => {\n    setSnacks((prevState) => prevState.filter((value) => value.id !== id));\n  };\n\n  const onSnackRemove = (id: string) => (event: React.MouseEvent<HTMLElement>) => {\n    onClick?.(event);\n\n    if (closeOnClick) {\n      clearByIdSnackbar(id);\n    }\n  };\n\n  const onClose = (id: string) => () => {\n    clearByIdSnackbar(id);\n  };\n\n  const currentPositions = snacks.reduce(\n    (acc, snack) => {\n      const currentPosition = snack.position ?? position;\n\n      acc[currentPosition] = [...(acc[currentPosition] ?? []), snack];\n\n      return acc;\n    },\n    {} as Record<Position, Snack[]>\n  );\n\n  const snackbars = (Object.keys(currentPositions) as unknown as typeof positions).map((key) => {\n    const snacks = currentPositions[key];\n\n    return (\n      <TransitionGroup\n        key={key}\n        className={cn(\"smwb-snackbars\", `smwb-${key}`)}\n        data-testid={`snackbars-${key}`}\n        appear\n      >\n        {snacks.map((snack) => (\n          <SnackTransition\n            key={snack.id}\n            snack={snack}\n            position={position}\n            variant={variant}\n            className={className}\n            component={component}\n            autoClose={autoClose}\n            autoCloseTime={autoCloseTime}\n            snackRest={rest}\n            onSnackRemove={onSnackRemove}\n            onClose={onClose}\n          />\n        ))}\n      </TransitionGroup>\n    );\n  });\n\n  return (\n    <SnackbarContext.Provider\n      value={{ addSnackbar, clearAllSnackbars, clearFirstSnackbar, clearLastSnackbar, clearByIdSnackbar }}\n    >\n      {children}\n      {snackbarDomRoot && createPortal(snackbars, snackbarDomRoot)}\n    </SnackbarContext.Provider>\n  );\n}\n\nexport interface SnackbarProps extends React.HTMLAttributes<HTMLElement> {\n  message?: React.ReactNode;\n  variant?: Variants;\n  position?: Position;\n  component?: React.ElementType;\n  isAutoClose?: boolean;\n  autoCloseTime?: number;\n  onClose?: () => void;\n  /** Optional action node rendered after the message (e.g. an Undo button). */\n  action?: React.ReactNode;\n}\n\nexport const Snackbar = React.forwardRef(function SnackbarInner(\n  {\n    className,\n    message,\n    variant = \"dark\",\n    position = \"top-right\",\n    onClick,\n    component = \"div\",\n    isAutoClose,\n    autoCloseTime,\n    onClose,\n    action,\n    ...rest\n  }: SnackbarProps,\n  ref\n) {\n  const timerClose = useRef<ReturnType<typeof setTimeout>>();\n\n  const setCloseTimer = useEventCallback(() => {\n    if (!onClose || !isAutoClose || !autoCloseTime) {\n      return;\n    }\n\n    if (timerClose.current) {\n      clearTimeout(timerClose.current);\n    }\n\n    timerClose.current = setTimeout(() => {\n      onClose();\n    }, autoCloseTime);\n  });\n\n  useEffect(() => {\n    setCloseTimer();\n\n    return () => {\n      if (timerClose.current) {\n        clearTimeout(timerClose.current);\n      }\n    };\n  }, [setCloseTimer]);\n\n  const Element = component;\n\n  return (\n    <Element\n      ref={ref}\n      className={cn(\"smwb-snackbar\", className, `smwb-${variant}`, `smwb-${position}`)}\n      onClick={onClick}\n      {...rest}\n      // Defaults: the caller's own role, aria-live and aria-atomic win, and an\n      // explicit undefined keeps these.\n      role={rest.role ?? \"alert\"}\n      aria-live={rest[\"aria-live\"] ?? (variant === \"danger\" ? \"assertive\" : \"polite\")}\n      aria-atomic={rest[\"aria-atomic\"] ?? \"true\"}\n    >\n      <div className=\"smwb-snackbar__body\">{message}</div>\n      {action != null ? <div className=\"smwb-snackbar__action\">{action}</div> : null}\n    </Element>\n  );\n});\n\nexport function useSnackbar() {\n  return useContext(SnackbarContext);\n}\n\nexport default SnackbarProvider;\n"],"names":["SnackTransition","snack","position","variant","className","component","autoClose","autoCloseTime","snackRest","onSnackRemove","onClose","nodeRef","useRef","jsx","CSSTransition","Snackbar","_a","_b","_c","cn","_d","_e","SnackbarContext","createContext","SnackbarProvider","props","closeOnClick","onClick","children","rest","snacks","setSnacks","useState","snackbarDomRoot","useSnackbarsPortal","addSnackbar","useCallback","options","key","id","v4","prevState","index","item","next","clearAllSnackbars","clearFirstSnackbar","clearLastSnackbar","clearByIdSnackbar","value","event","currentPositions","acc","currentPosition","snackbars","TransitionGroup","jsxs","createPortal","React","message","isAutoClose","action","ref","timerClose","setCloseTimer","useEventCallback","useEffect","useSnackbar","useContext"],"mappings":"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"}

package/dist/components/feedBack/tooltip/tooltip.d.ts

@@ -7,13 +7,21 @@ export interface TooltipProps {
         offsetX?: number;
         offsetY?: number;
     };
+    /** What the tip says: text or markup. */
     message: React.ReactNode;
     placement?: Placement;
     /** Controls tooltip visibility when trigger is manual. */
     open?: boolean;
-    /** hover (default): show on pointer enter; click: toggle; manual: use open only. */
+    /**
+     * What shows the tooltip. `hover` (default): the pointer over the target or keyboard focus
+     * in it, until both have left. Keyboard focus is focus with a focus ring (`:focus-visible`),
+     * not the focus a mouse press gives a button. `click`: a click on the target shows or hides
+     * it. `manual`: `open` alone. Escape hides a `hover` or `click` tooltip.
+     */
     trigger?: TooltipTrigger;
+    /** Milliseconds from the pointer entering the target, or keyboard focus moving into it, until a hover tooltip shows. */
     openDelay?: number;
+    /** Milliseconds from the pointer and keyboard focus both leaving the target until a hover tooltip hides. */
     closeDelay?: number;
 }
 export declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & {

package/dist/components/feedBack/tooltip/tooltip.js

@@ -1,72 +1,92 @@
-import { jsxs as _, jsx as v } from "react/jsx-runtime";
+import { jsxs as N, jsx as R } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/tooltip/tooltip.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                         */
-import { forwardRef as M, useState as f, useRef as w, useCallback as d, useEffect as N } from "react";
-import j from "clsx";
-import { useFloating as A, autoUpdate as F, offset as L, flip as S, shift as V } from "@floating-ui/react";
-import { resolvePlacement as X } from "../../../utils/floating.js";
-function Y({ reference: h, placement: u, offset: e, className: a, children: m }) {
-  var o, n;
-  const l = X(u), { refs: p, floatingStyles: t } = A({
-    elements: { reference: h },
-    placement: l.placement,
-    whileElementsMounted: F,
+import { forwardRef as j, useState as w, useRef as m, useCallback as k, useEffect as A } from "react";
+import B from "clsx";
+import { useFloating as I, autoUpdate as L, offset as S, flip as V, shift as X } from "@floating-ui/react";
+import { resolvePlacement as Y } from "../../../utils/floating.js";
+import { useDismissOnEscape as F } from "../../../hooks/useDismissOnEscape.js";
+function H({ reference: u, placement: p, offset: t, className: d, children: h }) {
+  var o, s;
+  const c = Y(p), { refs: v, floatingStyles: e } = I({
+    elements: { reference: u },
+    placement: c.placement,
+    whileElementsMounted: L,
     middleware: [
-      L({ mainAxis: (o = e == null ? void 0 : e.offsetY) != null ? o : 0, crossAxis: (n = e == null ? void 0 : e.offsetX) != null ? n : 0 }),
+      S({ mainAxis: (o = t == null ? void 0 : t.offsetY) != null ? o : 0, crossAxis: (s = t == null ? void 0 : t.offsetX) != null ? s : 0 }),
       // A fixed placement turns to the other side, and slides along it, when the
       // viewport has no room for it.
-      ...l.autoMiddleware ? [l.autoMiddleware] : [S(), V({ padding: 8 })]
+      ...c.autoMiddleware ? [c.autoMiddleware] : [V(), X({ padding: 8 })]
     ]
   });
-  return /* @__PURE__ */ v("div", { ref: p.setFloating, className: j("smwb-tooltip", a), style: t, children: m });
+  return /* @__PURE__ */ R("div", { ref: v.setFloating, className: B("smwb-tooltip", d), style: e, children: h });
 }
-const Z = M(function({
-  className: u,
-  children: e,
-  placement: a = "top",
-  offset: m = { offsetX: 0, offsetY: 0 },
-  message: l,
-  open: p,
-  trigger: t = "hover",
+function U(u) {
+  try {
+    return u.matches(":focus-visible");
+  } catch {
+    return !0;
+  }
+}
+const re = j(function({
+  className: p,
+  children: t,
+  placement: d = "top",
+  offset: h = { offsetX: 0, offsetY: 0 },
+  message: c,
+  open: v,
+  trigger: e = "hover",
   openDelay: o = 0,
-  closeDelay: n = 0
-}, k) {
-  const [T, b] = f(null), [P, i] = f(!1), [x, C] = f(!1), s = w(null), c = w(null), r = d(() => {
-    s.current !== null && (clearTimeout(s.current), s.current = null), c.current !== null && (clearTimeout(c.current), c.current = null);
+  closeDelay: s = 0
+}, _) {
+  const [b, M] = w(null), [O, l] = w(!1), [P, x] = w(!1), a = m(null), f = m(null), T = m(!1), i = m(!1), n = k(() => {
+    a.current !== null && (clearTimeout(a.current), a.current = null), f.current !== null && (clearTimeout(f.current), f.current = null);
   }, []);
-  N(() => () => r(), [r]);
-  const O = d(() => {
-    if (r(), o <= 0) {
-      i(!0);
+  A(() => () => n(), [n]);
+  const C = k(() => {
+    if (n(), o <= 0) {
+      l(!0);
       return;
     }
-    s.current = setTimeout(() => i(!0), o);
-  }, [r, o]), R = d(() => {
-    if (r(), n <= 0) {
-      i(!1);
+    a.current = setTimeout(() => l(!0), o);
+  }, [n, o]), E = k(() => {
+    if (n(), s <= 0) {
+      l(!1);
       return;
     }
-    c.current = setTimeout(() => i(!1), n);
-  }, [r, n]);
-  return /* @__PURE__ */ _("div", { className: "smwb-tooltip__wrapper", role: "tooltip", ref: k, children: [
-    /* @__PURE__ */ v(
+    f.current = setTimeout(() => l(!1), s);
+  }, [n, s]);
+  return F(e === "hover" && O, () => {
+    n(), i.current = !1, l(!1);
+  }), F(e === "click" && P, () => x(!1)), /* @__PURE__ */ N("div", { className: "smwb-tooltip__wrapper", role: "tooltip", ref: _, children: [
+    /* @__PURE__ */ R(
       "div",
       {
         className: "smwb-tooltip__ref",
-        ref: b,
-        onPointerEnter: t === "hover" ? O : void 0,
-        onPointerLeave: t === "hover" ? R : void 0,
-        onClick: t === "click" ? () => {
-          C((E) => !E);
+        ref: M,
+        onPointerEnter: () => {
+          T.current = !0, e === "hover" && C();
+        },
+        onPointerLeave: () => {
+          T.current = !1, e === "hover" && !i.current && E();
+        },
+        onFocus: (r) => {
+          r.currentTarget.contains(r.target) && (i.current = U(r.target), e === "hover" && i.current && C());
+        },
+        onBlur: (r) => {
+          r.currentTarget.contains(r.relatedTarget) || (i.current = !1, e === "hover" && !T.current && E());
+        },
+        onClick: e === "click" ? () => {
+          x((r) => !r);
         } : void 0,
-        children: e
+        children: t
       }
     ),
-    (t === "manual" ? p === !0 : t === "click" ? x : P) && T ? /* @__PURE__ */ v(Y, { reference: T, placement: a, offset: m, className: u, children: l }) : null
+    (e === "manual" ? v === !0 : e === "click" ? P : O) && b ? /* @__PURE__ */ R(H, { reference: b, placement: d, offset: h, className: p, children: c }) : null
   ] });
 });
 export {
-  Z as Tooltip,
-  Z as default
+  re as Tooltip,
+  re as default
 };
 //# sourceMappingURL=tooltip.js.map