@xsolla/xui-b2b-sidebar 0.150.0 → 0.152.0

package/native/index.js

@@ -40,8 +40,10 @@ __export(index_exports, {
   SidebarMenuCollapsible: () => SidebarMenuCollapsible,
   SidebarMenuItem: () => SidebarMenuItem,
   SidebarMenuSub: () => SidebarMenuSub,
+  SidebarPinnedList: () => SidebarPinnedList,
   SidebarProvider: () => SidebarProvider,
   SidebarTrigger: () => SidebarTrigger,
+  getPinnedCollapsedItem: () => getPinnedCollapsedItem,
   useSidebar: () => useSidebar
 });
 module.exports = __toCommonJS(index_exports);
@@ -1200,6 +1202,7 @@ var import_jsx_runtime9 = require("react/jsx-runtime");
 var SidebarGroup = ({
   label,
   dataId,
+  pinnedToBottom,
   children
 }) => {
   const { theme } = (0, import_xui_core6.useResolvedTheme)();
@@ -1211,6 +1214,7 @@ var SidebarGroup = ({
       "data-id": dataId,
       role: label ? "group" : void 0,
       "aria-label": label,
+      style: pinnedToBottom ? { marginTop: "auto" } : void 0,
       children: [
         label && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           Box,
@@ -1303,8 +1307,76 @@ var IconBox = import_styled_components5.default.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 = import_styled_components5.default.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 = import_styled_components5.default.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 = import_styled_components5.default.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 = import_styled_components5.default.span`
@@ -1356,6 +1428,8 @@ var SidebarMenuItem = ({
   dataId,
   isActive,
   isPinned,
+  onPinToggle,
+  dragHandle,
   showBadge,
   hasTooltip,
   beta,
@@ -1396,7 +1470,10 @@ var SidebarMenuItem = ({
           activeClassName: ITEM_ACTIVE_CLASS,
           dataId,
           children: [
-            icon && !isNested && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconBox, { $size: sizing.iconSize, $pin: isPinned, children: icon }),
+            !isNested && (isPinned && dragHandle ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(PinDragSlot, { $size: sizing.iconSize, "data-drag-handle": "true", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PinDragLayer, { $size: sizing.iconSize, $hideOnHover: true, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_xui_icons_base2.Pin, { size: 12, variant: "solid" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PinDragLayer, { $size: sizing.iconSize, $hideOnHover: false, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_xui_icons_base2.Drag, { size: 12, variant: "line" }) })
+            ] }) : isPinned ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconBox, { $size: sizing.iconSize, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_xui_icons_base2.Pin, { size: 12, variant: "solid" }) }) : icon ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconBox, { $size: sizing.iconSize, children: icon }) : null),
             extra,
             /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(LabelBox, { children: [
               /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
@@ -1416,6 +1493,33 @@ var SidebarMenuItem = ({
                 }
               )
             ] }),
+            onPinToggle && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              import_xui_tooltip.Tooltip,
+              {
+                content: isPinned ? "Unpin" : "Pin",
+                placement: "top",
+                size: "sm",
+                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  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__ */ (0, import_jsx_runtime11.jsx)(import_xui_icons_base2.Remove, { size: 12, variant: "line" }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_xui_icons_base2.Pin, { size: 12, variant: "solid" })
+                  }
+                )
+              }
+            ),
             beta && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               BetaTag,
               {
@@ -1489,7 +1593,7 @@ var ExpandRegion = import_styled_components6.default.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;
@@ -1506,7 +1610,7 @@ var ExpandRegion = import_styled_components6.default.div`
     }
   }
 
-  & .${ITEM_ACTIVE_CLASS} {
+  && .${ITEM_ACTIVE_CLASS} {
     font-weight: 500;
     color: ${(p) => p.$colorActive};
     background-color: ${(p) => p.$activeBg};
@@ -1729,6 +1833,92 @@ var SidebarChatButton = ({
     }
   );
 };
+
+// src/SidebarPinnedList.tsx
+var import_react4 = require("react");
+var import_xui_icons_base5 = require("@xsolla/xui-icons-base");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var SidebarPinnedList = ({
+  items,
+  onUnpin,
+  onReorder,
+  spacers = true
+}) => {
+  const [dragKey, setDragKey] = (0, import_react4.useState)(null);
+  const canReorder = Boolean(onReorder) && items.length > 1;
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+    spacers && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { height: 8 } }),
+    items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      "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__ */ (0, import_jsx_runtime15.jsx)(
+          SidebarMenuItem,
+          {
+            to: item.to,
+            label: item.label,
+            exact: item.exact,
+            isPinned: true,
+            dragHandle: canReorder,
+            onPinToggle: () => onUnpin(item.key)
+          }
+        )
+      },
+      item.key
+    )),
+    spacers && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { height: 8 } })
+  ] });
+};
+var getPinnedCollapsedItem = (items, options = {}) => {
+  if (items.length === 0) return null;
+  return {
+    label: options.label ?? "Pinned",
+    icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_xui_icons_base5.Pin, { size: 18, variant: "solid" }),
+    dataId: options.dataId ?? "sidebar-collapsed-pinned",
+    children: items.map((i) => ({
+      to: i.to,
+      label: i.label,
+      exact: i.exact
+    }))
+  };
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Sidebar,
@@ -1741,8 +1931,10 @@ var SidebarChatButton = ({
   SidebarMenuCollapsible,
   SidebarMenuItem,
   SidebarMenuSub,
+  SidebarPinnedList,
   SidebarProvider,
   SidebarTrigger,
+  getPinnedCollapsedItem,
   useSidebar
 });
 //# sourceMappingURL=index.js.map