@xsolla/xui-b2b-sidebar 0.150.0 → 0.152.0

package/web/index.d.ts

@@ -61,6 +61,7 @@ type SidebarItemType = {
     visibility?: string;
     disallowedIntegrationTypes?: Array<string>;
     isPinned?: boolean;
+    onPinToggle?: (e: MouseEvent<HTMLButtonElement>) => void;
     showBadge?: boolean;
 };
 
@@ -119,6 +120,8 @@ declare const SidebarTrigger: React.FC;
 interface SidebarGroupProps {
     label?: string;
     dataId?: string;
+    /** Docks this group to the bottom of the expanded sidebar (e.g. Settings, Billing). */
+    pinnedToBottom?: boolean;
     children: ReactNode;
 }
 declare const SidebarGroup: React.FC<SidebarGroupProps>;
@@ -139,6 +142,10 @@ interface SidebarMenuItemProps {
     dataId?: string;
     isActive?: SidebarLinkActiveCheck;
     isPinned?: boolean;
+    /** When provided, renders a pin/unpin toggle on hover (or always, when pinned). */
+    onPinToggle?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /** When true on a pinned item, the leading pin glyph swaps to a drag handle on row hover (reorder affordance). */
+    dragHandle?: boolean;
     showBadge?: boolean;
     hasTooltip?: boolean;
     beta?: boolean;
@@ -185,4 +192,42 @@ interface SidebarCollapsedProps {
 }
 declare const SidebarCollapsed: React.FC<SidebarCollapsedProps>;
 
-export { Sidebar, SidebarChatButton, SidebarCollapsed, type SidebarCollapsedProps, SidebarContent, SidebarFooter, SidebarGroup, type SidebarItemType, type SidebarLinkActiveCheck, type SidebarLinkClickHandler, type SidebarLinkProps, SidebarMenu, SidebarMenuCollapsible, type SidebarMenuCollapsibleProps, SidebarMenuItem, type SidebarMenuItemProps, SidebarMenuSub, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarTrigger, useSidebar };
+interface SidebarPinnedItem {
+    key: string;
+    to: string;
+    label: ReactNode;
+    exact?: boolean;
+}
+interface SidebarPinnedListProps {
+    /** Ordered list of currently-pinned items. */
+    items: SidebarPinnedItem[];
+    /** Called when the user clicks the × on a pinned shortcut. */
+    onUnpin: (key: string) => void;
+    /**
+     * Called as the user drags to reorder. Omit to disable drag-and-drop —
+     * the leading icon stays as the static pin glyph.
+     */
+    onReorder?: (fromKey: string, toKey: string) => void;
+    /** Render 8px top/bottom spacers when items are present. Default true. */
+    spacers?: boolean;
+}
+/**
+ * Renders the pinned shortcuts list with pointer-event-based drag-and-drop
+ * reorder. Drag only initiates from the leading drag-handle area on each row.
+ *
+ * Pinning is fully opt-in: consumers who don't render this component get no
+ * pin UI. Consumers without a reorder backend can omit `onReorder`; the list
+ * stays static but unpinning still works.
+ */
+declare const SidebarPinnedList: React.FC<SidebarPinnedListProps>;
+/**
+ * Helper for the collapsed sidebar: returns a single `SidebarItemType` whose
+ * popover lists every pinned shortcut. Spread it into `collapsedItems` at the
+ * position you want the Pin button to appear. Returns `null` when no items.
+ */
+declare const getPinnedCollapsedItem: (items: SidebarPinnedItem[], options?: {
+    label?: string;
+    dataId?: string;
+}) => SidebarItemType | null;
+
+export { Sidebar, SidebarChatButton, SidebarCollapsed, type SidebarCollapsedProps, SidebarContent, SidebarFooter, SidebarGroup, type SidebarItemType, type SidebarLinkActiveCheck, type SidebarLinkClickHandler, type SidebarLinkProps, SidebarMenu, SidebarMenuCollapsible, type SidebarMenuCollapsibleProps, SidebarMenuItem, type SidebarMenuItemProps, SidebarMenuSub, type SidebarPinnedItem, SidebarPinnedList, type SidebarPinnedListProps, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarTrigger, getPinnedCollapsedItem, useSidebar };

package/web/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);
@@ -1276,6 +1278,7 @@ var import_jsx_runtime9 = require("react/jsx-runtime");
 var SidebarGroup = ({
   label,
   dataId,
+  pinnedToBottom,
   children
 }) => {
   const { theme } = (0, import_xui_core6.useResolvedTheme)();
@@ -1287,6 +1290,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,
@@ -1379,8 +1383,76 @@ var IconBox = import_styled_components6.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_components6.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_components6.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_components6.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_components6.default.span`
@@ -1432,6 +1504,8 @@ var SidebarMenuItem = ({
   dataId,
   isActive,
   isPinned,
+  onPinToggle,
+  dragHandle,
   showBadge,
   hasTooltip,
   beta,
@@ -1472,7 +1546,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)(
@@ -1492,6 +1569,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,
               {
@@ -1565,7 +1669,7 @@ var ExpandRegion = import_styled_components7.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;
@@ -1582,7 +1686,7 @@ var ExpandRegion = import_styled_components7.default.div`
     }
   }
 
-  & .${ITEM_ACTIVE_CLASS} {
+  && .${ITEM_ACTIVE_CLASS} {
     font-weight: 500;
     color: ${(p) => p.$colorActive};
     background-color: ${(p) => p.$activeBg};
@@ -1805,6 +1909,92 @@ var SidebarChatButton = ({
     }
   );
 };
+
+// src/SidebarPinnedList.tsx
+var import_react6 = 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_react6.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,
@@ -1817,8 +2007,10 @@ var SidebarChatButton = ({
   SidebarMenuCollapsible,
   SidebarMenuItem,
   SidebarMenuSub,
+  SidebarPinnedList,
   SidebarProvider,
   SidebarTrigger,
+  getPinnedCollapsedItem,
   useSidebar
 });
 //# sourceMappingURL=index.js.map