@kolking/react-ui 1.8.6 → 1.8.8

package/dist/components/Menu/Menu.js

@@ -1,88 +1,85 @@
-import { jsxs as W, Fragment as _, jsx as t } from "react/jsx-runtime";
-import b, { useState as l, useRef as g, useMemo as k, useEffect as A } from "react";
+import { jsxs as O, Fragment as W, jsx as t } from "react/jsx-runtime";
+import _, { useState as l, useRef as g, useMemo as k, useEffect as A } from "react";
 import { flushSync as D } from "react-dom";
 import { useFloating as H, offset as U, flip as q, size as G, autoUpdate as J, useInteractions as K, useDismiss as Q, useRole as T, useClick as V, useListNavigation as X, useMergeRefs as Y, FloatingPortal as Z, FloatingFocusManager as $, FloatingList as ee } from "@floating-ui/react";
 import te from "classnames";
 import { MenuContext as oe } from "./MenuContext.js";
-import { cssProps as ne } from "../../utils/helpers.js";
-import { s as se } from "../../styles.module-DHm-YTnz.js";
-const de = ({
+import { getElementRef as ne, cssProps as se } from "../../utils/helpers.js";
+import { s as re } from "../../styles.module-DHm-YTnz.js";
+const pe = ({
   size: h,
-  placement: u = "bottom-start",
-  trigger: o,
+  placement: c = "bottom-start",
+  trigger: s,
   offset: R = 5,
   unmount: v = !0,
   minWidth: x,
   maxWidth: F,
-  minHeight: M,
-  maxHeight: P,
-  className: y,
+  minHeight: y,
+  maxHeight: M,
+  className: P,
   children: z,
-  onSelect: c,
+  onSelect: m,
   ...w
 }) => {
-  const [i, f] = l(!1), [a, C] = l(null), [E, I] = l({}), m = g([]), d = g(null), { refs: n, context: e, floatingStyles: N } = H({
-    open: i,
-    placement: u,
-    onOpenChange: f,
+  const [r, u] = l(!1), [i, C] = l(null), [E, I] = l({}), f = g([]), d = g(null), { refs: o, context: e, floatingStyles: N } = H({
+    open: r,
+    placement: c,
+    onOpenChange: u,
     whileElementsMounted: J,
     middleware: [
       U(R),
       q({ padding: 10 }),
       G({
         padding: 10,
-        apply({ rects: s, availableWidth: r, availableHeight: O }) {
+        apply({ rects: a, availableWidth: n, availableHeight: L }) {
           D(() => {
             I({
-              minHeight: M,
-              minWidth: x ?? s.reference.width,
-              maxWidth: F ?? r,
-              maxHeight: P ?? O
+              minHeight: y,
+              minWidth: x ?? a.reference.width,
+              maxWidth: F ?? n,
+              maxHeight: M ?? L
             });
           });
         }
       })
     ]
-  }), { getReferenceProps: S, getFloatingProps: j, getItemProps: p } = K([
+  }), { getReferenceProps: S, getFloatingProps: b, getItemProps: p } = K([
     Q(e),
     T(e, { role: "menu" }),
     V(e, { event: "mousedown" }),
     X(e, {
-      listRef: m,
+      listRef: f,
       loop: !0,
-      activeIndex: a,
+      activeIndex: i,
       onNavigate: C
     })
-  ]), B = k(
-    () => ({ active: a, setOpen: f, getItemProps: p, onSelect: c }),
-    [a, p, c]
-  ), L = Y([
-    n.setReference,
-    "ref" in o ? o.ref : null
-  ]);
+  ]), j = k(
+    () => ({ active: i, setOpen: u, getItemProps: p, onSelect: m }),
+    [i, p, m]
+  ), B = Y([o.setReference, ne(s)]);
   return A(() => {
-    var r;
-    const s = (r = n.domReference.current) == null ? void 0 : r.closest("[data-floating-root]");
-    s && (d.current = s);
-  }, [n]), /* @__PURE__ */ W(_, { children: [
-    b.cloneElement(
-      o,
-      S({ ref: L, "data-menu-trigger": !0, ...o.props })
+    var n;
+    const a = (n = o.domReference.current) == null ? void 0 : n.closest("[data-floating-root]");
+    d.current = a ?? document.body;
+  }, [o]), /* @__PURE__ */ O(W, { children: [
+    _.cloneElement(
+      s,
+      S({ ...s.props, ref: B, "data-menu-trigger": !0 })
     ),
-    /* @__PURE__ */ t(oe.Provider, { value: B, children: (i || !v) && /* @__PURE__ */ t(Z, { root: d.current, children: /* @__PURE__ */ t($, { context: e, modal: !1, initialFocus: -1, children: /* @__PURE__ */ t(
+    /* @__PURE__ */ t(oe.Provider, { value: j, children: (r || !v) && /* @__PURE__ */ t(Z, { root: d.current, children: /* @__PURE__ */ t($, { context: e, modal: !1, initialFocus: -1, children: /* @__PURE__ */ t(
       "div",
       {
-        ...j(w),
-        ref: n.setFloating,
-        "data-open": i,
-        "data-menu": u,
-        className: te(se.menu, y),
-        style: { ...N, ...E, ...ne({ size: h }) },
-        children: /* @__PURE__ */ t(ee, { elementsRef: m, children: z })
+        ...b(w),
+        ref: o.setFloating,
+        "data-open": r,
+        "data-menu": c,
+        className: te(re.menu, P),
+        style: { ...N, ...E, ...se({ size: h }) },
+        children: /* @__PURE__ */ t(ee, { elementsRef: f, children: z })
       }
     ) }) }) })
   ] });
 };
 export {
-  de as Menu
+  pe as Menu
 };

package/dist/components/Popover/Popover.js

@@ -2,27 +2,28 @@ import { jsxs as w, Fragment as C, jsx as r } from "react/jsx-runtime";
 import D, { useRef as H, useState as S, useEffect as U, useLayoutEffect as X } from "react";
 import b from "classnames";
 import { useFloating as B, offset as I, flip as L, shift as N, autoUpdate as T, useInteractions as q, useDismiss as z, useRole as A, useHover as G, useFocus as J, useClick as K, useMergeRefs as Q, FloatingPortal as V, FloatingFocusManager as W } from "@floating-ui/react";
-const Y = "Popover_popover_sXXB0", Z = {
-  popover: Y
-}, te = ({
+import { getElementRef as Y } from "../../utils/helpers.js";
+const Z = "Popover_popover_sXXB0", $ = {
+  popover: Z
+}, le = ({
   open: m,
-  event: t = "click",
+  event: s = "click",
   placement: c = "bottom",
-  trigger: s,
+  trigger: t,
   offset: g = 5,
   modal: f = !1,
   anchor: n,
   boundary: i,
   disabled: l,
-  minWidth: v,
-  maxWidth: R,
+  minWidth: R,
+  maxWidth: v,
   className: F,
   children: P,
   onToggle: h,
-  ...x
+  ...E
 }) => {
-  const a = H(null), [y, E] = S(!1), p = m ?? y, O = h ?? E, { refs: e, context: o, floatingStyles: _ } = B({
-    open: p,
+  const p = H(null), [x, y] = S(!1), a = m ?? x, O = h ?? y, { refs: e, context: o, floatingStyles: _ } = B({
+    open: a,
     placement: c,
     onOpenChange: O,
     whileElementsMounted: T,
@@ -34,34 +35,31 @@ const Y = "Popover_popover_sXXB0", Z = {
   }), { getReferenceProps: k, getFloatingProps: M } = q([
     z(o),
     A(o, { role: "dialog" }),
-    G(o, { move: !1, enabled: t.includes("hover") }),
-    J(o, { enabled: t.includes("focus") }),
-    K(o, { enabled: t.includes("click") })
-  ]), j = Q([
-    e.setReference,
-    "ref" in s ? s.ref : null
-  ]);
+    G(o, { move: !1, enabled: s.includes("hover") }),
+    J(o, { enabled: s.includes("focus") }),
+    K(o, { enabled: s.includes("click") })
+  ]), j = Q([e.setReference, Y(t)]);
   return U(() => {
     var d;
     const u = (d = e.domReference.current) == null ? void 0 : d.closest("[data-floating-root]");
-    !l && u && (a.current = u);
+    !l && u && (p.current = u);
   }, [e, l]), X(() => {
     n && e.setPositionReference(n);
-  }, [e, n]), l ? s : /* @__PURE__ */ w(C, { children: [
-    D.cloneElement(s, k({ ref: j, ...s.props })),
-    p && /* @__PURE__ */ r(V, { root: a, children: /* @__PURE__ */ r(W, { context: o, modal: f, visuallyHiddenDismiss: f, children: /* @__PURE__ */ r(
+  }, [e, n]), l ? t : /* @__PURE__ */ w(C, { children: [
+    D.cloneElement(t, k({ ...t.props, ref: j })),
+    a && /* @__PURE__ */ r(V, { root: p, children: /* @__PURE__ */ r(W, { context: o, modal: f, visuallyHiddenDismiss: f, children: /* @__PURE__ */ r(
       "div",
       {
-        ...M(x),
+        ...M(E),
         ref: e.setFloating,
         "data-popover": c,
-        className: b(Z.popover, F),
-        style: { ..._, minWidth: v, maxWidth: R },
+        className: b($.popover, F),
+        style: { ..._, minWidth: R, maxWidth: v },
         children: P
       }
     ) }) })
   ] });
 };
 export {
-  te as Popover
+  le as Popover
 };

package/dist/components/Tooltip/Tooltip.js

@@ -2,11 +2,12 @@ import { jsxs as m, Fragment as S, jsx as f } from "react/jsx-runtime";
 import j, { useRef as g, useState as w, useEffect as k, useLayoutEffect as C } from "react";
 import U from "classnames";
 import { useFloating as W, offset as b, flip as A, shift as B, arrow as D, autoUpdate as H, useInteractions as I, useDismiss as L, useRole as V, useHover as $, useFocus as q, useClick as z, useMergeRefs as G, FloatingPortal as J, FloatingArrow as K } from "@floating-ui/react";
-const Q = "Tooltip_tooltip_u1Uix", X = "Tooltip_arrow_NBFiV", Y = "Tooltip_content_lfpfM", a = {
-  tooltip: Q,
-  arrow: X,
-  content: Y
-}, st = ({
+import { getElementRef as Q } from "../../utils/helpers.js";
+const X = "Tooltip_tooltip_u1Uix", Y = "Tooltip_arrow_NBFiV", Z = "Tooltip_content_lfpfM", a = {
+  tooltip: X,
+  arrow: Y,
+  content: Z
+}, rt = ({
   trigger: r = "hover focus",
   placement: c = "top",
   offset: R = 8,
@@ -16,20 +17,20 @@ const Q = "Tooltip_tooltip_u1Uix", X = "Tooltip_arrow_NBFiV", Y = "Tooltip_conte
   minWidth: F,
   maxWidth: _,
   className: v,
-  children: o,
+  children: n,
   ...x
 }) => {
-  const u = g(null), p = g(null), [d, O] = w(!1), [y, E] = w(!1), { refs: t, context: e, floatingStyles: N } = W({
+  const u = g(null), p = g(null), [d, E] = w(!1), [O, y] = w(!1), { refs: t, context: e, floatingStyles: N } = W({
     open: d,
     placement: c,
-    onOpenChange: O,
+    onOpenChange: E,
     whileElementsMounted: H,
     middleware: [
       b(R),
       A({ padding: 10 }),
       B({ padding: 5 }),
-      D(({ placement: s, rects: n }) => (E(
-        n.floating.width < n.reference.width && (s.endsWith("-start") || s.endsWith("-end"))
+      D(({ placement: o, rects: s }) => (y(
+        s.floating.width < s.reference.width && (o.endsWith("-start") || o.endsWith("-end"))
       ), { element: u, padding: 8 }))
     ]
   }), { getReferenceProps: P, getFloatingProps: T } = I([
@@ -38,18 +39,15 @@ const Q = "Tooltip_tooltip_u1Uix", X = "Tooltip_arrow_NBFiV", Y = "Tooltip_conte
     $(e, { move: !1, enabled: r.includes("hover") }),
     q(e, { enabled: r.includes("focus") }),
     z(e, { enabled: r.includes("click") })
-  ]), M = G([
-    t.setReference,
-    "ref" in o ? o.ref : null
-  ]);
+  ]), M = G([t.setReference, Q(n)]);
   return k(() => {
-    var n;
-    const s = (n = t.domReference.current) == null ? void 0 : n.closest("[data-floating-root]");
-    !i && s && (p.current = s);
+    var s;
+    const o = (s = t.domReference.current) == null ? void 0 : s.closest("[data-floating-root]");
+    !i && o && (p.current = o);
   }, [t, i]), C(() => {
     l && t.setPositionReference(l);
-  }, [t, l]), i ? o : /* @__PURE__ */ m(S, { children: [
-    j.cloneElement(o, P({ ref: M, ...o.props })),
+  }, [t, l]), i ? n : /* @__PURE__ */ m(S, { children: [
+    j.cloneElement(n, P({ ...n.props, ref: M })),
     d && /* @__PURE__ */ f(J, { root: p, children: /* @__PURE__ */ m(
       "div",
       {
@@ -67,7 +65,7 @@ const Q = "Tooltip_tooltip_u1Uix", X = "Tooltip_arrow_NBFiV", Y = "Tooltip_conte
               ref: u,
               context: e,
               className: a.arrow,
-              staticOffset: y ? 8 : null
+              staticOffset: O ? 8 : null
             }
           ),
           /* @__PURE__ */ f("div", { "data-tooltip-content": !0, className: a.content, children: h })
@@ -77,5 +75,5 @@ const Q = "Tooltip_tooltip_u1Uix", X = "Tooltip_arrow_NBFiV", Y = "Tooltip_conte
   ] });
 };
 export {
-  st as Tooltip
+  rt as Tooltip
 };

package/dist/utils/helpers.d.ts

@@ -4,6 +4,7 @@ export declare function cssProps(values: {
     [key: string]: number | string | undefined;
 }): React.CSSProperties;
 export declare function wrapNode(node: React.ReactNode, Wrapper: React.ElementType): boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare function getElementRef(element: React.JSX.Element): React.Ref<Element>;
 export declare function getErrorMessage(error: unknown): string;
 export type PolymorphicProps<T extends React.ElementType, P = Record<string, never>> = P & Omit<React.ComponentPropsWithoutRef<T>, keyof P>;
 export type PolymorphicRef<T extends React.ElementType> = React.ComponentPropsWithRef<T>['ref'];

package/dist/utils/helpers.js

@@ -1,32 +1,36 @@
 import { jsx as o } from "react/jsx-runtime";
-import f from "react";
-function p(r, t, e) {
+import s from "react";
+function a(r, t, e) {
   return Math.max(t, Math.min(r, e));
 }
-function c(r) {
+function i(r) {
   return r.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
 }
-function i(r, t) {
+function u(r, t) {
   return typeof t == "number" ? `${t}px` : typeof t == "string" ? t.replace(/(^|\s)([1-4]?xs|sm|md|lg|[1-4]?xl)(?=$|\s)/g, `$1var(--${r}-$2)`) : t;
 }
 function m(r) {
   const t = {};
   return Object.keys(r).map((e) => {
-    const n = c(e), s = i(n, r[e]);
-    s && (t[`--${n}`] = s);
+    const n = i(e), f = u(n, r[e]);
+    f && (t[`--${n}`] = f);
   }), t;
 }
 function g(r, t) {
   return typeof r == "string" || typeof r == "number" ? /* @__PURE__ */ o(t, { children: r }) : r;
 }
 function $(r) {
+  return parseInt(s.version, 10) >= 19 && r.props.ref ? r.props.ref : "ref" in r ? r.ref : null;
+}
+function l(r) {
   return r instanceof Error && r.message ? r.message : typeof r == "string" ? r : "An error occurred";
 }
-const x = f.forwardRef;
+const x = s.forwardRef;
 export {
-  p as clamp,
+  a as clamp,
   m as cssProps,
   x as fixedForwardRef,
-  $ as getErrorMessage,
+  $ as getElementRef,
+  l as getErrorMessage,
   g as wrapNode
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolking/react-ui",
-  "version": "1.8.6",
+  "version": "1.8.8",
   "description": "React component library for building user interfaces",
   "author": "Nick Seryakov (https://github.com/kolking)",
   "license": "MIT",