@xsolla/xui-b2b-sidebar 0.150.0 → 0.152.0

package/web/index.mjs

@@ -1240,6 +1240,7 @@ import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
 var SidebarGroup = ({
   label,
   dataId,
+  pinnedToBottom,
   children
 }) => {
   const { theme } = useResolvedTheme6();
@@ -1251,6 +1252,7 @@ var SidebarGroup = ({
       "data-id": dataId,
       role: label ? "group" : void 0,
       "aria-label": label,
+      style: pinnedToBottom ? { marginTop: "auto" } : void 0,
       children: [
         label && /* @__PURE__ */ jsx9(
           Box,
@@ -1280,7 +1282,7 @@ import styled6 from "styled-components";
 import { useResolvedTheme as useResolvedTheme7 } from "@xsolla/xui-core";
 import { Typography as Typography3 } from "@xsolla/xui-typography";
 import { Tooltip } from "@xsolla/xui-tooltip";
-import { OpenIn } from "@xsolla/xui-icons-base";
+import { Drag, OpenIn, Pin, Remove } from "@xsolla/xui-icons-base";
 
 // src/constants.ts
 var ITEM_BASE_CLASS = "xui-sb-item";
@@ -1343,8 +1345,76 @@ var IconBox = styled6.div`
   color: inherit;
 
   svg {
-    width: ${(p) => p.$pin ? "12px" : `${p.$size}px`};
-    height: ${(p) => p.$pin ? "12px" : `${p.$size}px`};
+    width: ${(p) => p.$size}px;
+    height: ${(p) => p.$size}px;
+  }
+`;
+var PinDragSlot = styled6.div`
+  position: relative;
+  width: ${(p) => p.$size}px;
+  height: ${(p) => p.$size}px;
+  flex-shrink: 0;
+  cursor: grab;
+
+  .${ITEM_BASE_CLASS}:active & {
+    cursor: grabbing;
+  }
+`;
+var PinDragLayer = styled6.div`
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+  opacity: ${(p) => p.$hideOnHover ? 1 : 0};
+  transition: opacity 0.15s ease-in-out;
+
+  .${ITEM_BASE_CLASS}:hover & {
+    opacity: ${(p) => p.$hideOnHover ? 0 : 1};
+  }
+
+  svg {
+    width: 12px;
+    height: 12px;
+  }
+`;
+var PinButton = styled6.button`
+  display: flex;
+  width: ${(p) => p.$size}px;
+  height: ${(p) => p.$size}px;
+  flex-shrink: 0;
+  margin-left: auto;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: ${(p) => p.$isPinned ? p.$activeColor : p.$color};
+  cursor: pointer;
+  border-radius: 4px;
+  opacity: 0;
+  transition:
+    opacity 0.15s ease-in-out,
+    color 0.15s ease-in-out;
+
+  .${ITEM_BASE_CLASS}:hover & {
+    opacity: 1;
+  }
+
+  &:hover {
+    color: ${(p) => p.$hoverColor};
+  }
+
+  &:focus-visible {
+    opacity: 1;
+    outline: 1px solid currentColor;
+    outline-offset: 1px;
+  }
+
+  svg {
+    width: 12px;
+    height: 12px;
   }
 `;
 var LabelBox = styled6.span`
@@ -1396,6 +1466,8 @@ var SidebarMenuItem = ({
   dataId,
   isActive,
   isPinned,
+  onPinToggle,
+  dragHandle,
   showBadge,
   hasTooltip,
   beta,
@@ -1436,7 +1508,10 @@ var SidebarMenuItem = ({
           activeClassName: ITEM_ACTIVE_CLASS,
           dataId,
           children: [
-            icon && !isNested && /* @__PURE__ */ jsx11(IconBox, { $size: sizing.iconSize, $pin: isPinned, children: icon }),
+            !isNested && (isPinned && dragHandle ? /* @__PURE__ */ jsxs5(PinDragSlot, { $size: sizing.iconSize, "data-drag-handle": "true", children: [
+              /* @__PURE__ */ jsx11(PinDragLayer, { $size: sizing.iconSize, $hideOnHover: true, children: /* @__PURE__ */ jsx11(Pin, { size: 12, variant: "solid" }) }),
+              /* @__PURE__ */ jsx11(PinDragLayer, { $size: sizing.iconSize, $hideOnHover: false, children: /* @__PURE__ */ jsx11(Drag, { size: 12, variant: "line" }) })
+            ] }) : isPinned ? /* @__PURE__ */ jsx11(IconBox, { $size: sizing.iconSize, children: /* @__PURE__ */ jsx11(Pin, { size: 12, variant: "solid" }) }) : icon ? /* @__PURE__ */ jsx11(IconBox, { $size: sizing.iconSize, children: icon }) : null),
             extra,
             /* @__PURE__ */ jsxs5(LabelBox, { children: [
               /* @__PURE__ */ jsx11(
@@ -1456,6 +1531,33 @@ var SidebarMenuItem = ({
                 }
               )
             ] }),
+            onPinToggle && /* @__PURE__ */ jsx11(
+              Tooltip,
+              {
+                content: isPinned ? "Unpin" : "Pin",
+                placement: "top",
+                size: "sm",
+                children: /* @__PURE__ */ jsx11(
+                  PinButton,
+                  {
+                    type: "button",
+                    "aria-label": isPinned ? "Unpin item" : "Pin item",
+                    "aria-pressed": Boolean(isPinned),
+                    $size: sizing.iconSize,
+                    $color: theme.colors.content.tertiary,
+                    $hoverColor: theme.colors.content.primary,
+                    $activeColor: theme.colors.content.primary,
+                    $isPinned: Boolean(isPinned),
+                    onClick: (e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      onPinToggle(e);
+                    },
+                    children: isPinned ? /* @__PURE__ */ jsx11(Remove, { size: 12, variant: "line" }) : /* @__PURE__ */ jsx11(Pin, { size: 12, variant: "solid" })
+                  }
+                )
+              }
+            ),
             beta && /* @__PURE__ */ jsx11(
               BetaTag,
               {
@@ -1529,7 +1631,7 @@ var ExpandRegion = styled7.div`
     overflow: hidden;
   }
 
-  & .${ITEM_BASE_CLASS} {
+  && .${ITEM_BASE_CLASS} {
     position: relative;
     padding: 0 ${(p) => p.$padding}px 0 ${(p) => p.$nestedPaddingLeft}px;
     font-weight: 400;
@@ -1546,7 +1648,7 @@ var ExpandRegion = styled7.div`
     }
   }
 
-  & .${ITEM_ACTIVE_CLASS} {
+  && .${ITEM_ACTIVE_CLASS} {
     font-weight: 500;
     color: ${(p) => p.$colorActive};
     background-color: ${(p) => p.$activeBg};
@@ -1769,6 +1871,92 @@ var SidebarChatButton = ({
     }
   );
 };
+
+// src/SidebarPinnedList.tsx
+import { useState as useState3 } from "react";
+import { Pin as Pin2 } from "@xsolla/xui-icons-base";
+import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+var SidebarPinnedList = ({
+  items,
+  onUnpin,
+  onReorder,
+  spacers = true
+}) => {
+  const [dragKey, setDragKey] = useState3(null);
+  const canReorder = Boolean(onReorder) && items.length > 1;
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsxs8(Fragment4, { children: [
+    spacers && /* @__PURE__ */ jsx15("div", { style: { height: 8 } }),
+    items.map((item) => /* @__PURE__ */ jsx15(
+      "div",
+      {
+        "data-pinned-key": item.key,
+        onPointerDown: (e) => {
+          if (!canReorder) return;
+          const t = e.target;
+          if (!t.closest('[data-drag-handle="true"]')) return;
+          e.preventDefault();
+          setDragKey(item.key);
+          e.currentTarget.setPointerCapture(e.pointerId);
+        },
+        onPointerMove: (e) => {
+          if (dragKey !== item.key) return;
+          const elt = document.elementFromPoint(
+            e.clientX,
+            e.clientY
+          );
+          const row = elt?.closest("[data-pinned-key]");
+          const overKey = row?.getAttribute("data-pinned-key");
+          if (overKey && overKey !== dragKey) {
+            onReorder?.(dragKey, overKey);
+          }
+        },
+        onPointerUp: (e) => {
+          if (dragKey === item.key) {
+            e.currentTarget.releasePointerCapture(
+              e.pointerId
+            );
+            setDragKey(null);
+          }
+        },
+        onPointerCancel: () => {
+          if (dragKey === item.key) setDragKey(null);
+        },
+        style: {
+          opacity: dragKey === item.key ? 0.4 : 1,
+          transition: "opacity 0.15s ease-in-out",
+          touchAction: canReorder ? "none" : void 0
+        },
+        children: /* @__PURE__ */ jsx15(
+          SidebarMenuItem,
+          {
+            to: item.to,
+            label: item.label,
+            exact: item.exact,
+            isPinned: true,
+            dragHandle: canReorder,
+            onPinToggle: () => onUnpin(item.key)
+          }
+        )
+      },
+      item.key
+    )),
+    spacers && /* @__PURE__ */ jsx15("div", { style: { height: 8 } })
+  ] });
+};
+var getPinnedCollapsedItem = (items, options = {}) => {
+  if (items.length === 0) return null;
+  return {
+    label: options.label ?? "Pinned",
+    icon: /* @__PURE__ */ jsx15(Pin2, { size: 18, variant: "solid" }),
+    dataId: options.dataId ?? "sidebar-collapsed-pinned",
+    children: items.map((i) => ({
+      to: i.to,
+      label: i.label,
+      exact: i.exact
+    }))
+  };
+};
 export {
   Sidebar,
   SidebarChatButton,
@@ -1780,8 +1968,10 @@ export {
   SidebarMenuCollapsible,
   SidebarMenuItem,
   SidebarMenuSub,
+  SidebarPinnedList,
   SidebarProvider,
   SidebarTrigger,
+  getPinnedCollapsedItem,
   useSidebar
 };
 //# sourceMappingURL=index.mjs.map