@acronis-platform/ui-react 0.33.1 → 0.35.1

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

@@ -1,36 +1,36 @@
 import { jsx as a, jsxs as m, Fragment as T } from "react/jsx-runtime";
-import * as t from "react";
+import * as o from "react";
 import { mergeProps as h } from "@base-ui/react/merge-props";
 import { useRender as N } from "@base-ui/react/use-render";
 import { Collapsible as x } from "@base-ui/react/collapsible";
-import { ChevronRightIcon as k, ChevronDownIcon as R, SquareArrowUpRightIcon as I } from "@acronis-platform/icons-react/stroke-mono";
+import { ChevronRightIcon as k, SquareArrowUpRightIcon as I, ChevronDownIcon as R } 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 d } from "../../../lib/utils.js";
-const M = t.createContext(null);
+import { cn as t } from "../../../lib/utils.js";
+const M = o.createContext(null);
 function g() {
-  return t.useContext(M) ?? {
+  return o.useContext(M) ?? {
     expanded: !0,
     toggleExpanded: () => {
     }
   };
 }
 function z(n, e, r) {
-  const [s, i] = t.useState(e), o = n !== void 0, c = o ? n : s, l = t.useCallback(
+  const [s, i] = o.useState(e), d = n !== void 0, c = d ? n : s, l = o.useCallback(
     (u) => {
-      o || i(u), r == null || r(u);
+      d || i(u), r == null || r(u);
     },
-    [o, r]
+    [d, r]
   );
   return [c, l];
 }
-const P = t.forwardRef(
+const P = o.forwardRef(
   ({
     className: n,
     expanded: e,
     defaultExpanded: r = !0,
     onExpandedChange: s,
     "aria-label": i = "Section navigation",
-    render: o,
+    render: d,
     children: c,
     ...l
   }, u) => {
@@ -38,18 +38,18 @@ const P = t.forwardRef(
       e,
       r,
       s
-    ), S = t.useMemo(
+    ), S = o.useMemo(
       () => ({ expanded: b, toggleExpanded: () => p(!b) }),
       [b, p]
     ), y = N({
-      render: o,
+      render: d,
       ref: u,
       defaultTagName: "nav",
       props: h(
         {
           "aria-label": i,
           "data-state": b ? "expanded" : "collapsed",
-          className: d(
+          className: t(
             "group/sidebar flex h-full flex-col bg-[var(--ui-sidebar-secondary-global-container-color)] border-r border-[var(--ui-sidebar-secondary-global-container-border-color)] [border-right-width:var(--ui-sidebar-secondary-global-container-border-width)] w-[var(--ui-sidebar-secondary-collapsed-container-width)] data-[state=expanded]:w-[var(--ui-sidebar-secondary-expanded-container-width)] transition-[width]",
             n
           ),
@@ -62,29 +62,34 @@ const P = t.forwardRef(
   }
 );
 P.displayName = "SidebarSecondary";
-const L = t.forwardRef(({ className: n, label: e, children: r, ...s }, i) => /* @__PURE__ */ a(
-  "div",
-  {
-    ref: i,
-    className: d(
-      "flex items-center shrink-0",
-      "px-[var(--ui-sidebar-secondary-collapsed-container-header-padding-x)] py-[var(--ui-sidebar-secondary-collapsed-container-header-padding-y)]",
-      "group-data-[state=expanded]/sidebar:px-[var(--ui-sidebar-secondary-expanded-container-header-padding-x)] group-data-[state=expanded]/sidebar:py-[var(--ui-sidebar-secondary-expanded-container-header-padding-y)]",
-      n
-    ),
-    ...s,
-    children: /* @__PURE__ */ a("h2", { className: "ui-sidebar-secondary-global-header-label-text-style truncate text-[var(--ui-sidebar-secondary-global-header-label-color)]", children: e ?? r })
-  }
+const L = o.forwardRef(({ className: n, label: e, children: r, ...s }, i) => (
+  // Hidden in collapsed mode — the CollapsedBreadcrumb's parent label carries the
+  // section context in the rail, so a truncated single-letter heading is omitted.
+  /* @__PURE__ */ a(
+    "div",
+    {
+      ref: i,
+      className: t(
+        "flex items-center shrink-0",
+        "hidden group-data-[state=expanded]/sidebar:flex",
+        "px-[var(--ui-sidebar-secondary-collapsed-container-header-padding-x)] py-[var(--ui-sidebar-secondary-collapsed-container-header-padding-y)]",
+        "group-data-[state=expanded]/sidebar:px-[var(--ui-sidebar-secondary-expanded-container-header-padding-x)] group-data-[state=expanded]/sidebar:py-[var(--ui-sidebar-secondary-expanded-container-header-padding-y)]",
+        n
+      ),
+      ...s,
+      children: /* @__PURE__ */ a("h2", { className: "ui-sidebar-secondary-global-header-label-text-style truncate text-[var(--ui-sidebar-secondary-global-header-label-color)]", children: e ?? r })
+    }
+  )
 ));
 L.displayName = "SidebarSecondaryHeader";
-const A = t.forwardRef(({ className: n, ...e }, r) => (
+const A = o.forwardRef(({ className: n, ...e }, r) => (
   // Expanded: the section list. Hidden in collapsed mode, where the
   // CollapsedBreadcrumb sibling takes over.
   /* @__PURE__ */ a(
     "div",
     {
       ref: r,
-      className: d(
+      className: t(
         "flex flex-1 flex-col overflow-y-auto gap-[var(--ui-sidebar-secondary-global-section-list-gap)]",
         "hidden group-data-[state=expanded]/sidebar:flex",
         n
@@ -94,42 +99,48 @@ const A = t.forwardRef(({ className: n, ...e }, r) => (
   )
 ));
 A.displayName = "SidebarSecondaryContent";
-const _ = t.forwardRef(({ className: n, parentLabel: e, currentLabel: r, separator: s, ...i }, o) => (
+const _ = o.forwardRef(({ className: n, parentLabel: e, currentLabel: r, separator: s, ...i }, d) => (
   // Shown only in collapsed mode — toggled by the same data-[state] selector so
-  // it stays in the DOM (SSR-present) with no JS branch. Laid out vertically:
-  // parent → separator → current page.
+  // it stays in the DOM (SSR-present) with no JS branch. Stacked top→bottom:
+  // parent → separator → current page. In the ~48px rail the labels are rotated
+  // to read vertically (`writing-mode: vertical-rl`, glyphs tilted 90° clockwise,
+  // reading top-to-bottom) so long labels run down the rail instead of clipping;
+  // the separator chevron is turned to point down to match that flow.
   /* @__PURE__ */ m(
     "div",
     {
-      ref: o,
-      className: d(
-        "flex flex-col items-center shrink-0",
+      ref: d,
+      className: t(
+        // `flex-1` so the rail fills the space between the (hidden) header and the
+        // footer, keeping the collapse trigger pinned to the bottom; the breadcrumb
+        // content stays at the top of that space.
+        "flex flex-1 flex-col items-center",
         "gap-[var(--ui-sidebar-secondary-collapsed-container-content-gap)] py-[var(--ui-sidebar-secondary-collapsed-container-content-padding-y)]",
         "flex group-data-[state=expanded]/sidebar:hidden",
         n
       ),
       ...i,
       children: [
-        /* @__PURE__ */ a("span", { className: "ui-sidebar-secondary-collapsed-breadcrumb-label-text-style text-[var(--ui-sidebar-secondary-collapsed-breadcrumb-label-color)]", children: e }),
+        /* @__PURE__ */ a("span", { className: "ui-sidebar-secondary-collapsed-breadcrumb-label-text-style whitespace-nowrap [writing-mode:vertical-rl] text-[var(--ui-sidebar-secondary-collapsed-breadcrumb-label-color)]", children: e }),
         /* @__PURE__ */ a(
           "span",
           {
             "aria-hidden": "true",
             className: "inline-flex items-center text-[var(--ui-sidebar-secondary-collapsed-icon-separator-color)] [&>svg]:size-[var(--ui-sidebar-secondary-collapsed-icon-separator-size)]",
-            children: s ?? /* @__PURE__ */ a(k, { size: 16 })
+            children: s ?? /* @__PURE__ */ a(k, { size: 16, className: "rotate-90" })
           }
         ),
-        /* @__PURE__ */ a("span", { className: "ui-sidebar-secondary-collapsed-label-current-page-text-style text-[var(--ui-sidebar-secondary-collapsed-label-current-page-color)]", children: r })
+        /* @__PURE__ */ a("span", { className: "ui-sidebar-secondary-collapsed-label-current-page-text-style whitespace-nowrap [writing-mode:vertical-rl] text-[var(--ui-sidebar-secondary-collapsed-label-current-page-color)]", children: r })
       ]
     }
   )
 ));
 _.displayName = "SidebarSecondaryCollapsedBreadcrumb";
-const B = t.forwardRef(({ className: n, ...e }, r) => /* @__PURE__ */ a(
+const B = o.forwardRef(({ className: n, ...e }, r) => /* @__PURE__ */ a(
   "div",
   {
     ref: r,
-    className: d(
+    className: t(
       "flex flex-col shrink-0",
       "border-t border-[var(--ui-sidebar-secondary-global-container-footer-border-color)] [border-top-width:var(--ui-sidebar-secondary-global-container-footer-border-width)]",
       "py-[var(--ui-sidebar-secondary-section-container-padding-y)]",
@@ -139,9 +150,9 @@ const B = t.forwardRef(({ className: n, ...e }, r) => /* @__PURE__ */ a(
   }
 ));
 B.displayName = "SidebarSecondaryFooter";
-const f = t.createContext({ expandable: !1 }), V = { expandable: !1 }, F = { expandable: !0 }, H = t.forwardRef(
-  ({ className: n, expandable: e = !1, open: r, defaultOpen: s = !0, onOpenChange: i, children: o, ...c }, l) => {
-    const u = d(
+const f = o.createContext({ expandable: !1 }), V = { expandable: !1 }, F = { expandable: !0 }, H = o.forwardRef(
+  ({ className: n, expandable: e = !1, open: r, defaultOpen: s = !0, onOpenChange: i, children: d, ...c }, l) => {
+    const u = t(
       "flex flex-col py-[var(--ui-sidebar-secondary-section-container-padding-y)]",
       n
     );
@@ -154,21 +165,21 @@ const f = t.createContext({ expandable: !1 }), V = { expandable: !1 }, F = { exp
         onOpenChange: i,
         render: /* @__PURE__ */ a("div", { className: u }),
         ...c,
-        children: o
+        children: d
       }
-    ) }) : /* @__PURE__ */ a(f.Provider, { value: V, children: /* @__PURE__ */ a("div", { ref: l, className: u, ...c, children: o }) });
+    ) }) : /* @__PURE__ */ a(f.Provider, { value: V, children: /* @__PURE__ */ a("div", { ref: l, className: u, ...c, children: d }) });
   }
 );
 H.displayName = "SidebarSecondarySection";
-const w = "ui-sidebar-secondary-section-label-section-text-style text-[var(--ui-sidebar-secondary-section-label-section-color)]", C = "pb-[var(--ui-sidebar-secondary-section-container-header-padding-y)] px-[var(--ui-sidebar-secondary-section-container-header-padding-x)]", j = t.forwardRef(({ className: n, actions: e, unreadRollup: r, children: s, ...i }, o) => {
-  const { expandable: c } = t.useContext(f);
+const w = "ui-sidebar-secondary-section-label-section-text-style text-[var(--ui-sidebar-secondary-section-label-section-color)]", C = "pb-[var(--ui-sidebar-secondary-section-container-header-padding-y)] px-[var(--ui-sidebar-secondary-section-container-header-padding-x)]", j = o.forwardRef(({ className: n, actions: e, unreadRollup: r, children: s, ...i }, d) => {
+  const { expandable: c } = o.useContext(f);
   if (!c) {
-    const l = d(w, C, n);
-    return e == null ? /* @__PURE__ */ a("div", { ref: o, className: l, ...i, children: s }) : /* @__PURE__ */ m(
+    const l = t(w, C, n);
+    return e == null ? /* @__PURE__ */ a("div", { ref: d, className: l, ...i, children: s }) : /* @__PURE__ */ m(
       "div",
       {
-        ref: o,
-        className: d(
+        ref: d,
+        className: t(
           l,
           "flex items-center gap-[var(--ui-sidebar-secondary-section-container-header-gap)]"
         ),
@@ -183,8 +194,8 @@ const w = "ui-sidebar-secondary-section-label-section-text-style text-[var(--ui-
   return /* @__PURE__ */ m(
     "div",
     {
-      ref: o,
-      className: d(
+      ref: d,
+      className: t(
         "flex items-center gap-[var(--ui-sidebar-secondary-section-container-header-gap)]",
         C,
         n
@@ -194,7 +205,7 @@ const w = "ui-sidebar-secondary-section-label-section-text-style text-[var(--ui-
         /* @__PURE__ */ m(
           x.Trigger,
           {
-            className: d(
+            className: t(
               "group/section flex min-w-0 flex-1 items-center gap-[var(--ui-sidebar-secondary-section-container-header-gap)] text-left",
               w,
               "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)] focus-visible:ring-inset"
@@ -219,12 +230,12 @@ const w = "ui-sidebar-secondary-section-label-section-text-style text-[var(--ui-
   );
 });
 j.displayName = "SidebarSecondarySectionLabel";
-const D = t.forwardRef(({ className: n, ...e }, r) => {
-  const { expandable: s } = t.useContext(f), i = /* @__PURE__ */ a(
+const D = o.forwardRef(({ className: n, ...e }, r) => {
+  const { expandable: s } = o.useContext(f), i = /* @__PURE__ */ a(
     "ul",
     {
       ref: r,
-      className: d(
+      className: t(
         "flex flex-col gap-[var(--ui-sidebar-secondary-section-menu-item-list-gap)]",
         n
       ),
@@ -244,9 +255,9 @@ const O = "group/row flex w-full items-center gap-[var(--ui-sidebar-secondary-me
   defaultVariants: {
     variant: "unselected"
   }
-}), U = t.forwardRef(({ className: n, selected: e = !1, icon: r, render: s, children: i, ...o }, c) => {
-  const { expanded: l } = g(), u = t.Children.toArray(i), b = u.filter(
-    (y) => t.isValidElement(y) && y.type.displayName === "SidebarSecondaryMenuItemExtras"
+}), U = o.forwardRef(({ className: n, selected: e = !1, icon: r, render: s, children: i, ...d }, c) => {
+  const { expanded: l } = g(), u = o.Children.toArray(i), b = u.filter(
+    (y) => o.isValidElement(y) && y.type.displayName === "SidebarSecondaryMenuItemExtras"
   ), p = u.filter(
     (y) => !b.includes(y)
   ), S = N({
@@ -255,7 +266,7 @@ const O = "group/row flex w-full items-center gap-[var(--ui-sidebar-secondary-me
     defaultTagName: "a",
     props: h(
       {
-        className: d(
+        className: t(
           v({
             variant: e ? "selected" : "unselected"
           }),
@@ -267,7 +278,7 @@ const O = "group/row flex w-full items-center gap-[var(--ui-sidebar-secondary-me
           /* @__PURE__ */ a(
             "span",
             {
-              className: d(
+              className: t(
                 "min-w-0 flex-1 truncate text-left",
                 !l && "sr-only"
               ),
@@ -277,13 +288,13 @@ const O = "group/row flex w-full items-center gap-[var(--ui-sidebar-secondary-me
           b.length > 0 && /* @__PURE__ */ a("span", { className: "flex shrink-0 items-center", children: b })
         ] })
       },
-      o
+      d
     )
   });
   return /* @__PURE__ */ a("li", { className: "contents", children: S });
 });
 U.displayName = "SidebarSecondaryMenuItem";
-const q = t.forwardRef(({ className: n, render: e, ...r }, s) => (
+const q = o.forwardRef(({ className: n, render: e, ...r }, s) => (
   // Disclosure row: Base UI Collapsible gives per-row open state +
   // aria-expanded/aria-controls. Rendered as the list `<li>` wrapper.
   /* @__PURE__ */ a(
@@ -291,20 +302,20 @@ const q = t.forwardRef(({ className: n, render: e, ...r }, s) => (
     {
       ref: s,
       render: e ?? /* @__PURE__ */ a("li", {}),
-      className: d("contents", n),
+      className: t("contents", n),
       ...r
     }
   )
 ));
 q.displayName = "SidebarSecondaryMenuSub";
-const X = t.forwardRef(({ className: n, selected: e = !1, icon: r, children: s, ...i }, o) => {
+const X = o.forwardRef(({ className: n, selected: e = !1, icon: r, children: s, ...i }, d) => {
   const { expanded: c } = g();
   return /* @__PURE__ */ m(
     x.Trigger,
     {
-      ref: o,
+      ref: d,
       "aria-current": e ? "page" : void 0,
-      className: d(
+      className: t(
         v({
           variant: e ? "selected" : "unselected"
         }),
@@ -314,13 +325,13 @@ const X = t.forwardRef(({ className: n, selected: e = !1, icon: r, children: s,
       ...i,
       children: [
         r != null && /* @__PURE__ */ a("span", { className: "flex shrink-0 items-center self-start mt-[var(--ui-sidebar-secondary-menu-item-global-icon-margin-t)]", children: r }),
-        /* @__PURE__ */ a("span", { className: d("flex-1 truncate", !c && "sr-only"), children: s }),
+        /* @__PURE__ */ a("span", { className: t("flex-1 truncate", !c && "sr-only"), children: s }),
         /* @__PURE__ */ a(
           R,
           {
             size: 16,
             "aria-hidden": "true",
-            className: d(
+            className: t(
               "shrink-0 transition-transform group-data-[panel-open]/row:rotate-180",
               !c && "hidden"
             )
@@ -331,16 +342,16 @@ const X = t.forwardRef(({ className: n, selected: e = !1, icon: r, children: s,
   );
 });
 X.displayName = "SidebarSecondaryMenuSubTrigger";
-const G = t.forwardRef(({ className: n, children: e, ...r }, s) => /* @__PURE__ */ a(x.Panel, { ref: s, className: d(n), ...r, children: /* @__PURE__ */ a("ul", { className: "flex flex-col gap-[var(--ui-sidebar-secondary-section-menu-item-list-gap)]", children: e }) }));
+const G = o.forwardRef(({ className: n, children: e, ...r }, s) => /* @__PURE__ */ a(x.Panel, { ref: s, className: t(n), ...r, children: /* @__PURE__ */ a("ul", { className: "flex flex-col gap-[var(--ui-sidebar-secondary-section-menu-item-list-gap)]", children: e }) }));
 G.displayName = "SidebarSecondaryMenuSubContent";
-const J = t.forwardRef(({ className: n, selected: e = !1, render: r, children: s, ...i }, o) => {
+const J = o.forwardRef(({ className: n, selected: e = !1, render: r, children: s, ...i }, d) => {
   const { expanded: c } = g(), l = N({
     render: r,
-    ref: o,
+    ref: d,
     defaultTagName: "a",
     props: h(
       {
-        className: d(
+        className: t(
           v({
             variant: e ? "selected" : "unselected"
           }),
@@ -352,7 +363,7 @@ const J = t.forwardRef(({ className: n, selected: e = !1, render: r, children: s
           n
         ),
         "aria-current": e ? "page" : void 0,
-        children: /* @__PURE__ */ a("span", { className: d("flex-1 truncate text-left", !c && "sr-only"), children: s })
+        children: /* @__PURE__ */ a("span", { className: t("flex-1 truncate text-left", !c && "sr-only"), children: s })
       },
       i
     )
@@ -360,18 +371,18 @@ const J = t.forwardRef(({ className: n, selected: e = !1, render: r, children: s
   return /* @__PURE__ */ a("li", { className: "contents", children: l });
 });
 J.displayName = "SidebarSecondaryMenuSubItem";
-const K = t.forwardRef(({ className: n, variant: e, shortcut: r, tag: s, children: i, ...o }, c) => {
+const K = o.forwardRef(({ className: n, variant: e, shortcut: r, tag: s, children: i, ...d }, c) => {
   const { expanded: l } = g(), u = e === "tag" || e === "tag-externalLink", b = e === "externalLink" || e === "tag-externalLink", p = e === "shortcut";
   return /* @__PURE__ */ m(
     "span",
     {
       ref: c,
-      className: d(
+      className: t(
         "inline-flex items-center gap-[var(--ui-sidebar-secondary-menu-item-extras-global-container-gap)]",
         !l && "hidden",
         n
       ),
-      ...o,
+      ...d,
       children: [
         u && (s ?? i),
         p && /* @__PURE__ */ a("span", { className: "ui-sidebar-secondary-menu-item-extras-global-shortcut-text-style text-[var(--ui-sidebar-secondary-menu-item-extras-global-shortcut-color)]", children: r ?? i }),
@@ -387,26 +398,48 @@ const K = t.forwardRef(({ className: n, variant: e, shortcut: r, tag: s, childre
   );
 });
 K.displayName = "SidebarSecondaryMenuItemExtras";
-const Q = t.forwardRef(({ className: n, icon: e, children: r, onClick: s, ...i }, o) => {
-  const { expanded: c, toggleExpanded: l } = g();
+const Q = o.forwardRef(({ className: n, icon: e, shortcut: r, children: s, onClick: i, ...d }, c) => {
+  const { expanded: l, toggleExpanded: u } = g();
   return /* @__PURE__ */ a("li", { className: "contents", children: /* @__PURE__ */ m(
     "button",
     {
-      ref: o,
+      ref: c,
       type: "button",
-      "aria-expanded": c,
-      className: d(
+      "aria-expanded": l,
+      className: t(
         v({ variant: "unselected" }),
         "text-left",
         n
       ),
-      onClick: (u) => {
-        s == null || s(u), u.defaultPrevented || l();
+      onClick: (b) => {
+        i == null || i(b), b.defaultPrevented || u();
       },
-      ...i,
+      ...d,
       children: [
-        e != null && /* @__PURE__ */ a("span", { className: "flex shrink-0 items-center self-start mt-[var(--ui-sidebar-secondary-menu-item-global-icon-margin-t)]", children: e }),
-        /* @__PURE__ */ a("span", { className: d("flex-1 truncate", !c && "sr-only"), children: r })
+        e != null && // Flip the chevron when collapsed so a chevron-left ("collapse")
+        // becomes a chevron-right ("expand") — the icon always points toward
+        // the action it triggers.
+        /* @__PURE__ */ a(
+          "span",
+          {
+            className: t(
+              "flex shrink-0 items-center self-start mt-[var(--ui-sidebar-secondary-menu-item-global-icon-margin-t)] transition-transform",
+              !l && "rotate-180"
+            ),
+            children: e
+          }
+        ),
+        /* @__PURE__ */ a("span", { className: t("flex-1 truncate", !l && "sr-only"), children: s }),
+        r != null && /* @__PURE__ */ a(
+          "span",
+          {
+            className: t(
+              "shrink-0 ui-sidebar-secondary-menu-item-extras-global-shortcut-text-style text-[var(--ui-sidebar-secondary-menu-item-extras-global-shortcut-color)]",
+              !l && "sr-only"
+            ),
+            children: r
+          }
+        )
       ]
     }
   ) });