@acronis-platform/ui-react 0.55.0 → 0.56.1

package/dist/components/ui/sidebar-primary/sidebar-primary.js

@@ -1,103 +1,118 @@
-import { jsx as i, jsxs as v, Fragment as _ } from "react/jsx-runtime";
+import { jsx as a, jsxs as y, Fragment as k } from "react/jsx-runtime";
 import * as n from "react";
-import { mergeProps as y } from "@base-ui/react/merge-props";
-import { useRender as f } from "@base-ui/react/use-render";
-import { SquareArrowUpRightIcon as T } from "@acronis-platform/icons-react/stroke-mono";
-import { cva as E } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import { cn as m } from "../../../lib/utils.js";
-import { Tooltip as x, TooltipTrigger as h, TooltipContent as w } from "../tooltip/tooltip.js";
-import { ScrollArea as I } from "../scroll-area/scroll-area.js";
-const N = n.createContext(null);
-function g() {
-  return n.useContext(N) ?? {
+import { mergeProps as P } from "@base-ui/react/merge-props";
+import { useRender as R } from "@base-ui/react/use-render";
+import { SquareArrowUpRightIcon as M } from "@acronis-platform/icons-react/stroke-mono";
+import { cva as z } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { cn as c } from "../../../lib/utils.js";
+import { useDocDir as _ } from "../../../lib/use-doc-dir.js";
+import { Tooltip as f, TooltipTrigger as h, TooltipContent as x } from "../tooltip/tooltip.js";
+import { ScrollArea as O } from "../scroll-area/scroll-area.js";
+const T = n.createContext(null);
+function w() {
+  return n.useContext(T) ?? {
     expanded: !0,
     toggleExpanded: () => {
     }
   };
 }
-function M(a, e, r) {
-  const [s, t] = n.useState(e), o = a !== void 0, l = o ? a : s, d = n.useCallback(
-    (c) => {
-      o || t(c), r == null || r(c);
+function C(i, e, r) {
+  const [l, s] = n.useState(e), t = i !== void 0, d = t ? i : l, m = n.useCallback(
+    (o) => {
+      t || s(o), r == null || r(o);
     },
-    [o, r]
+    [t, r]
   );
-  return [l, d];
+  return [d, m];
 }
-function S(a, { enabled: e }) {
-  const [r, s] = n.useState(!1);
+function E(i, { enabled: e }) {
+  const [r, l] = n.useState(!1);
   return n.useEffect(() => {
-    const t = a.current;
-    if (!e || !t) {
-      s(!1);
+    const s = i.current;
+    if (!e || !s) {
+      l(!1);
       return;
     }
-    const o = () => s(t.scrollWidth > t.clientWidth);
-    o();
-    const l = new ResizeObserver(o);
-    return l.observe(t), () => l.disconnect();
-  }, [a, e]), r;
+    const t = () => l(s.scrollWidth > s.clientWidth);
+    t();
+    const d = new ResizeObserver(t);
+    return d.observe(s), () => d.disconnect();
+  }, [i, e]), r;
 }
-const k = n.forwardRef(
+const D = n.forwardRef(
   ({
-    className: a,
+    className: i,
     expanded: e,
     defaultExpanded: r = !0,
-    onExpandedChange: s,
-    "aria-label": t = "Primary",
-    render: o,
-    children: l,
-    ...d
-  }, c) => {
-    const [u, p] = M(
+    onExpandedChange: l,
+    "aria-label": s = "Primary",
+    render: t,
+    children: d,
+    ...m
+  }, o) => {
+    const [u, p] = C(
       e,
       r,
-      s
-    ), b = n.useMemo(
+      l
+    ), v = n.useMemo(
       () => ({ expanded: u, toggleExpanded: () => p(!u) }),
       [u, p]
-    ), R = f({
-      render: o,
-      ref: c,
+    ), g = R({
+      render: t,
+      ref: o,
       defaultTagName: "nav",
-      props: y(
+      props: P(
         {
-          "aria-label": t,
+          "aria-label": s,
           "data-state": u ? "expanded" : "collapsed",
-          className: m(
+          className: c(
             "group/sidebar flex h-full flex-col bg-[var(--ui-sidebar-primary-global-container-color)] w-[var(--ui-sidebar-primary-collapsed-container-width)] data-[state=expanded]:w-[var(--ui-sidebar-primary-expanded-container-width)] transition-[width]",
-            a
+            i
           ),
-          children: l
+          children: d
         },
-        d
+        m
       )
     });
-    return /* @__PURE__ */ i(N.Provider, { value: b, children: R });
+    return /* @__PURE__ */ a(T.Provider, { value: v, children: g });
   }
 );
-k.displayName = "SidebarPrimary";
-const z = n.forwardRef(({ className: a, logo: e, collapsedLogo: r, children: s, ...t }, o) => {
-  const { expanded: l } = g(), c = e != null || r != null ? l ? e ?? r : r ?? e : s;
-  return /* @__PURE__ */ i(
+D.displayName = "SidebarPrimary";
+const F = n.forwardRef(({ className: i, logo: e, collapsedLogo: r, children: l, ...s }, t) => {
+  const { expanded: d } = w(), o = e != null || r != null ? d ? e ?? r : r ?? e : l;
+  return /* @__PURE__ */ a(
     "div",
     {
-      ref: o,
-      className: m(
-        "flex items-center shrink-0 text-[var(--ui-sidebar-primary-global-logo-color)]",
+      ref: t,
+      className: c(
+        "flex items-center shrink-0 text-[var(--ui-sidebar-primary-global-logo-color)] transition-[padding]",
         "px-[var(--ui-sidebar-primary-collapsed-container-header-padding-x)] py-[var(--ui-sidebar-primary-collapsed-container-header-padding-y)]",
-        "[&_:where(img,svg)]:h-[var(--ui-sidebar-primary-collapsed-logo-height)] [&_:where(img,svg)]:w-auto",
+        // `logo`/`collapsedLogo` are two separate elements swapped by a JS
+        // conditional (not one element whose size CSS-transitions) — the new
+        // one mounts at its final height instantly, while `padding-y` is
+        // still mid-transition. Since the two states' (padding*2 + logo
+        // height) sums only match at the transition's start/end, that instant
+        // pop makes the row briefly overshoot/undershoot its resting height
+        // and "jump". Pinning the row to the larger of the two sums makes the
+        // outer box's height constant across the whole transition regardless
+        // of that mismatch — padding/logo-height still animate cosmetically
+        // inside it.
+        "h-[max(calc(var(--ui-sidebar-primary-collapsed-container-header-padding-y)*2+var(--ui-sidebar-primary-collapsed-logo-height)),calc(var(--ui-sidebar-primary-expanded-container-header-padding-y)*2+var(--ui-sidebar-primary-expanded-logo-height)))]",
+        // Animate the logo's own height alongside the header's padding transition
+        // (both keyed off the same `data-state` flip) — without it the logo swaps
+        // size instantly while the rail width is still animating, reading as a jump.
+        "[&_:where(img,svg)]:h-[var(--ui-sidebar-primary-collapsed-logo-height)] [&_:where(img,svg)]:w-auto [&_:where(img,svg)]:transition-[height]",
         "group-data-[state=expanded]/sidebar:px-[var(--ui-sidebar-primary-expanded-container-header-padding-x)] group-data-[state=expanded]/sidebar:py-[var(--ui-sidebar-primary-expanded-container-header-padding-y)]",
         "group-data-[state=expanded]/sidebar:[&_:where(img,svg)]:h-[var(--ui-sidebar-primary-expanded-logo-height)]",
-        a
+        i
       ),
-      ...t,
-      children: c
+      ...s,
+      children: o
     }
   );
 });
-z.displayName = "SidebarPrimaryHeader";
-const O = n.forwardRef(({ className: a, children: e, ...r }, s) => (
+F.displayName = "SidebarPrimaryHeader";
+const L = n.forwardRef(({ className: i, children: e, ...r }, l) => (
   // The section list scrolls inside a ScrollArea: its overlay scrollbar floats
   // over the content and reserves no gutter, so the full-bleed selected row is
   // never cropped — on every OS, unlike a native `overflow` scrollbar.
@@ -108,63 +123,63 @@ const O = n.forwardRef(({ className: a, children: e, ...r }, s) => (
   // `truncate` on a long label, since intrinsic-width calculations ignore
   // `text-overflow`. We only ever scroll vertically here, so cancel it: the
   // `!` (important) is required to beat the inline style's specificity.
-  /* @__PURE__ */ i(
-    I,
+  /* @__PURE__ */ a(
+    O,
     {
-      ref: s,
-      className: m(
+      ref: l,
+      className: c(
         "min-h-0 flex-1 [&_[data-slot=scroll-area-content]]:min-w-0!",
-        a
+        i
       ),
       ...r,
-      children: /* @__PURE__ */ i("div", { className: "flex flex-col gap-[var(--ui-sidebar-primary-global-section-list-gap)]", children: e })
+      children: /* @__PURE__ */ a("div", { className: "flex flex-col gap-[var(--ui-sidebar-primary-global-section-list-gap)]", children: e })
     }
   )
 ));
-O.displayName = "SidebarPrimaryContent";
-const C = n.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ i(
+L.displayName = "SidebarPrimaryContent";
+const V = n.forwardRef(({ className: i, ...e }, r) => /* @__PURE__ */ a(
   "div",
   {
     ref: r,
-    className: m(
+    className: c(
       "flex flex-col shrink-0 gap-[var(--ui-sidebar-primary-global-footer-list-gap)]",
       "border-t border-[var(--ui-sidebar-primary-global-container-footer-border-color)] [border-top-width:var(--ui-sidebar-primary-global-container-footer-border-width)]",
-      a
+      i
     ),
     ...e
   }
 ));
-C.displayName = "SidebarPrimaryFooter";
-const F = n.forwardRef(({ className: a, ...e }, r) => (
+V.displayName = "SidebarPrimaryFooter";
+const j = n.forwardRef(({ className: i, ...e }, r) => (
   // position (`:not(:first-child)`) instead of a prop.
-  /* @__PURE__ */ i(
+  /* @__PURE__ */ a(
     "div",
     {
       ref: r,
-      className: m(
+      className: c(
         "flex flex-col pb-[var(--ui-sidebar-primary-section-container-padding-y)]",
         "[&:not(:first-child)]:border-t [&:not(:first-child)]:border-[var(--ui-sidebar-primary-section-container-border-color)] [&:not(:first-child)]:[border-top-width:var(--ui-sidebar-primary-section-container-border-width)] [&:not(:first-child)]:pt-[var(--ui-sidebar-primary-section-container-padding-y)]",
-        a
+        i
       ),
       ...e
     }
   )
 ));
-F.displayName = "SidebarPrimarySection";
-const L = n.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ i(
+j.displayName = "SidebarPrimarySection";
+const A = n.forwardRef(({ className: i, ...e }, r) => /* @__PURE__ */ a(
   "ul",
   {
     ref: r,
-    className: m(
+    className: c(
       "flex flex-col gap-[var(--ui-sidebar-primary-section-menu-item-list-gap)]",
-      a
+      i
     ),
     ...e
   }
 ));
-L.displayName = "SidebarPrimaryMenu";
-const P = E(
-  "group/menu-item flex w-full items-center gap-[var(--ui-sidebar-primary-menu-item-global-container-gap)] h-[var(--ui-sidebar-primary-menu-item-global-container-height)] px-[var(--ui-sidebar-primary-menu-item-global-container-padding-x)] py-[var(--ui-sidebar-primary-menu-item-global-container-padding-y)] no-underline ui-sidebar-primary-menu-item-global-label-text-style transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)] focus-visible:ring-inset [&_svg]:shrink-0 [&_svg]:size-[var(--ui-sidebar-primary-menu-item-global-icon-size)]",
+A.displayName = "SidebarPrimaryMenu";
+const I = z(
+  "group/menu-item flex w-full items-center gap-[var(--ui-sidebar-primary-menu-item-global-container-gap)] h-[var(--ui-sidebar-primary-menu-item-global-container-height)] px-[var(--ui-sidebar-primary-menu-item-global-container-padding-x)] py-[var(--ui-sidebar-primary-menu-item-global-container-padding-y)] no-underline cursor-pointer ui-sidebar-primary-menu-item-global-label-text-style transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)] focus-visible:ring-inset [&_svg]:shrink-0 [&_svg]:size-[var(--ui-sidebar-primary-menu-item-global-icon-size)]",
   {
     variants: {
       variant: {
@@ -176,69 +191,91 @@ const P = E(
       variant: "unselected"
     }
   }
-), V = n.forwardRef(
-  ({ className: a, selected: e = !1, icon: r, render: s, children: t, extras: o, ...l }, d) => {
-    const { expanded: c } = g(), u = n.useRef(null), p = S(u, { enabled: c }), b = f({
+), H = n.forwardRef(
+  ({
+    className: i,
+    selected: e = !1,
+    icon: r,
+    noIcon: l,
+    render: s,
+    children: t,
+    extras: d,
+    ...m
+  }, o) => {
+    const { expanded: u } = w(), p = _(), v = n.useRef(null), g = n.useRef(null), N = E(g, { enabled: u }), S = R({
       render: s,
-      ref: d,
+      ref: [o, v],
       defaultTagName: "a",
-      props: y(
+      props: P(
         {
-          className: m(
-            P({
+          className: c(
+            I({
               variant: e ? "selected" : "unselected"
             }),
-            a
+            i
           ),
           "aria-current": e ? "page" : void 0,
-          children: /* @__PURE__ */ v(_, { children: [
-            r != null && /* @__PURE__ */ i("span", { className: "flex shrink-0 items-center self-start mt-[var(--ui-sidebar-primary-menu-item-global-icon-margin-t)]", children: r }),
-            /* @__PURE__ */ v(x, { disabled: !p, children: [
-              /* @__PURE__ */ i(
+          onKeyDown: (b) => {
+            b.key === " " && (b.preventDefault(), b.currentTarget.click());
+          },
+          children: /* @__PURE__ */ y(k, { children: [
+            r != null && /* @__PURE__ */ a("span", { className: "flex shrink-0 items-center self-start mt-[var(--ui-sidebar-primary-menu-item-global-icon-margin-t)]", children: r }),
+            /* @__PURE__ */ y(f, { disabled: !N, children: [
+              /* @__PURE__ */ a(
                 h,
                 {
-                  render: /* @__PURE__ */ i(
+                  render: /* @__PURE__ */ a(
                     "span",
                     {
-                      ref: u,
-                      className: m(
+                      ref: g,
+                      className: c(
                         "min-w-0 flex-1 truncate text-start",
-                        !c && "sr-only"
+                        !u && "sr-only"
                       )
                     }
                   ),
                   children: t
                 }
               ),
-              /* @__PURE__ */ i(w, { children: t })
+              /* @__PURE__ */ a(
+                x,
+                {
+                  anchor: v,
+                  side: p === "rtl" ? "left" : "right",
+                  children: t
+                }
+              )
             ] }),
-            o != null && /* @__PURE__ */ i("span", { className: m(!c && "hidden"), children: o })
+            d != null && /* @__PURE__ */ a("span", { className: c(!u && "hidden"), children: d })
           ] })
         },
-        l
+        m
       )
     });
-    return /* @__PURE__ */ i("li", { className: "contents", children: b });
+    return /* @__PURE__ */ a("li", { className: "contents", children: /* @__PURE__ */ y(f, { disabled: u, children: [
+      /* @__PURE__ */ a(h, { render: S }),
+      /* @__PURE__ */ a(x, { side: p === "rtl" ? "left" : "right", children: t })
+    ] }) });
   }
 );
-V.displayName = "SidebarPrimaryMenuItem";
-const j = n.forwardRef(({ className: a, variant: e, shortcut: r, tag: s, children: t, ...o }, l) => {
-  const { expanded: d } = g(), c = e === "tag" || e === "tag-externalLink", u = e === "externalLink" || e === "tag-externalLink", p = e === "shortcut";
-  return /* @__PURE__ */ v(
+H.displayName = "SidebarPrimaryMenuItem";
+const U = n.forwardRef(({ className: i, variant: e, shortcut: r, tag: l, children: s, ...t }, d) => {
+  const { expanded: m } = w(), o = e === "tag" || e === "tag-externalLink", u = e === "externalLink" || e === "tag-externalLink", p = e === "shortcut";
+  return /* @__PURE__ */ y(
     "span",
     {
-      ref: l,
-      className: m(
+      ref: d,
+      className: c(
         "inline-flex items-center gap-[var(--ui-sidebar-primary-menu-item-extras-global-container-gap)]",
-        !d && "hidden",
-        a
+        !m && "hidden",
+        i
       ),
-      ...o,
+      ...t,
       children: [
-        c && (s ?? t),
-        p && /* @__PURE__ */ i("span", { className: "ui-sidebar-primary-menu-item-extras-global-shortcut-text-style text-[var(--ui-sidebar-primary-menu-item-extras-global-shortcut-color)]", children: r ?? t }),
-        u && /* @__PURE__ */ i(
-          T,
+        o && (l ?? s),
+        p && /* @__PURE__ */ a("span", { className: "ui-sidebar-primary-menu-item-extras-global-shortcut-text-style text-[var(--ui-sidebar-primary-menu-item-extras-global-shortcut-color)]", children: r ?? s }),
+        u && /* @__PURE__ */ a(
+          M,
           {
             size: 16,
             className: "text-[var(--ui-sidebar-primary-menu-item-extras-global-external-icon-color)] size-[var(--ui-sidebar-primary-menu-item-extras-global-external-icon-size)]"
@@ -248,71 +285,85 @@ const j = n.forwardRef(({ className: a, variant: e, shortcut: r, tag: s, childre
     }
   );
 });
-j.displayName = "SidebarPrimaryMenuItemExtras";
-const A = n.forwardRef(({ className: a, icon: e, children: r, extras: s, onClick: t, ...o }, l) => {
-  const { expanded: d, toggleExpanded: c } = g(), u = n.useRef(null), p = S(u, { enabled: d });
-  return /* @__PURE__ */ i("li", { className: "contents", children: /* @__PURE__ */ v(
-    "button",
-    {
-      ref: l,
-      type: "button",
-      "aria-expanded": d,
-      className: m(
-        P({ variant: "unselected" }),
-        "text-start",
-        a
-      ),
-      onClick: (b) => {
-        t == null || t(b), b.defaultPrevented || c();
-      },
-      ...o,
-      children: [
-        e != null && /* @__PURE__ */ i(
-          "span",
-          {
-            className: m(
-              "flex shrink-0 items-center self-start mt-[var(--ui-sidebar-primary-menu-item-global-icon-margin-t)] transition-transform",
-              d ? "rtl:rotate-180" : "ltr:rotate-180"
-            ),
-            children: e
-          }
+U.displayName = "SidebarPrimaryMenuItemExtras";
+const W = n.forwardRef(
+  ({ className: i, icon: e, children: r, extras: l, expandTooltip: s = "Expand", onClick: t, ...d }, m) => {
+    const { expanded: o, toggleExpanded: u } = w(), p = _(), v = n.useRef(null), g = n.useRef(null), N = E(g, { enabled: o }), S = /* @__PURE__ */ y(
+      "button",
+      {
+        ref: (b) => {
+          v.current = b, typeof m == "function" ? m(b) : m && (m.current = b);
+        },
+        type: "button",
+        "aria-expanded": o,
+        className: c(
+          I({ variant: "unselected" }),
+          "text-start",
+          i
         ),
-        /* @__PURE__ */ v(x, { disabled: !p, children: [
-          /* @__PURE__ */ i(
-            h,
+        onClick: (b) => {
+          t == null || t(b), b.defaultPrevented || u();
+        },
+        ...d,
+        children: [
+          e != null && /* @__PURE__ */ a(
+            "span",
             {
-              render: /* @__PURE__ */ i(
-                "span",
-                {
-                  ref: u,
-                  className: m(
-                    "min-w-0 flex-1 truncate",
-                    !d && "sr-only"
-                  )
-                }
+              className: c(
+                "flex shrink-0 items-center self-start mt-[var(--ui-sidebar-primary-menu-item-global-icon-margin-t)] transition-transform",
+                o ? "rtl:rotate-180" : "ltr:rotate-180"
               ),
-              children: r
+              children: e
             }
           ),
-          /* @__PURE__ */ i(w, { children: r })
-        ] }),
-        s != null && /* @__PURE__ */ i("span", { className: m(!d && "hidden"), children: s })
-      ]
-    }
-  ) });
-});
-A.displayName = "SidebarPrimaryCollapseTrigger";
+          /* @__PURE__ */ y(f, { disabled: !N, children: [
+            /* @__PURE__ */ a(
+              h,
+              {
+                render: /* @__PURE__ */ a(
+                  "span",
+                  {
+                    ref: g,
+                    className: c(
+                      "min-w-0 flex-1 truncate",
+                      !o && "sr-only"
+                    )
+                  }
+                ),
+                children: r
+              }
+            ),
+            /* @__PURE__ */ a(
+              x,
+              {
+                anchor: v,
+                side: p === "rtl" ? "left" : "right",
+                children: r
+              }
+            )
+          ] }),
+          l != null && /* @__PURE__ */ a("span", { className: c(!o && "hidden"), children: l })
+        ]
+      }
+    );
+    return /* @__PURE__ */ a("li", { className: "contents", children: /* @__PURE__ */ y(f, { disabled: o, children: [
+      /* @__PURE__ */ a(h, { render: S }),
+      /* @__PURE__ */ a(x, { side: p === "rtl" ? "left" : "right", children: s })
+    ] }) });
+  }
+);
+W.displayName = "SidebarPrimaryCollapseTrigger";
 export {
-  k as SidebarPrimary,
-  A as SidebarPrimaryCollapseTrigger,
-  O as SidebarPrimaryContent,
-  C as SidebarPrimaryFooter,
-  z as SidebarPrimaryHeader,
-  L as SidebarPrimaryMenu,
-  V as SidebarPrimaryMenuItem,
-  j as SidebarPrimaryMenuItemExtras,
-  F as SidebarPrimarySection,
-  P as sidebarPrimaryMenuItemVariants,
-  S as useIsOverflowing
+  D as SidebarPrimary,
+  W as SidebarPrimaryCollapseTrigger,
+  L as SidebarPrimaryContent,
+  V as SidebarPrimaryFooter,
+  F as SidebarPrimaryHeader,
+  A as SidebarPrimaryMenu,
+  H as SidebarPrimaryMenuItem,
+  U as SidebarPrimaryMenuItemExtras,
+  j as SidebarPrimarySection,
+  I as sidebarPrimaryMenuItemVariants,
+  E as useIsOverflowing
 };
 //# sourceMappingURL=sidebar-primary.js.map