@orsetra/shared-ui 1.5.14 → 1.5.16

package/components/layout/sidebar/data.tsx

@@ -39,7 +39,7 @@ export interface MainMenuItem {
   id: string
   label: string
   icon: LucideIcon
-  href?: string
+  href: string
 }
 
 export interface SubMenuItem {
@@ -69,7 +69,7 @@ export interface ApiMainMenuItem {
   id: string
   label: string
   icon: string
-  href?: string
+  href: string
 }
 
 export interface ApiSubMenuItem {

package/components/layout/sidebar/sidebar.tsx

@@ -300,13 +300,18 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
           <>
             <div className="border-t border-ui-border mx-1 my-2" />
             {filteredMainItems.map((item) => {
-              const href = item.href!.startsWith('http://') || item.href!.startsWith('https://')
-                ? new URL(item.href!).pathname
-                : item.href!
+              const handleClick = (e: React.MouseEvent) => {
+                const href = item.href
+                if (href.startsWith('http://') || href.startsWith('https://')) {
+                  e.preventDefault()
+                  window.location.href = new URL(href).pathname
+                }
+          }  
               const linkEl = (
                 <Link
                   key={item.id}
-                  href={href}
+                  href={ item.href}
+                  onClick={handleClick}
                   className="flex items-center justify-center p-2 transition-colors border-l-4 border-transparent hover:bg-ui-background"
                 >
                   <item.icon

package/components/ui/index.ts

@@ -52,6 +52,7 @@ export { ScrollArea, ScrollBar } from './scroll-area'
 export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator } from './select'
 export { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription } from './sheet'
 export { SidePanel, SidePanelTrigger, SidePanelClose, SidePanelContent, SidePanelHeader, SidePanelTitle, SidePanelDescription, SidePanelBody, SidePanelFooter } from './side-panel'
+export { PushPanel, type PushPanelProps } from './push-panel'
 export { Skeleton } from './skeleton'
 export { Slider } from './slider'
 export { Toaster } from './toaster'

package/components/ui/push-panel.tsx

@@ -0,0 +1,94 @@
+"use client"
+
+import * as React from "react"
+import { X } from "lucide-react"
+import { cn } from "../../lib/utils"
+
+export interface PushPanelProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  title: React.ReactNode
+  description?: React.ReactNode
+  headerActions?: React.ReactNode
+  children: React.ReactNode
+  actions?: React.ReactNode
+  width?: string
+  className?: string
+}
+
+/**
+ * Inline push panel that slides in from the right and compresses the main
+ * content area, rather than overlaying it as a modal.
+ *
+ * Usage: place as a flex sibling next to the page content.
+ *
+ * ```tsx
+ * <div className="flex items-start min-h-screen">
+ *   <div className="flex-1 min-w-0">{page content}</div>
+ *   <PushPanel open={open} onOpenChange={setOpen} title="Details">
+ *     {detail content}
+ *   </PushPanel>
+ * </div>
+ * ```
+ */
+export function PushPanel({
+  open,
+  onOpenChange,
+  title,
+  description,
+  headerActions,
+  children,
+  actions,
+  width = "w-[480px]",
+  className,
+}: PushPanelProps) {
+  return (
+    <div
+      className={cn(
+        "hidden lg:flex flex-col flex-shrink-0 sticky top-0 self-start",
+        "h-[calc(100vh-3.5rem)] overflow-hidden",
+        "transition-[width] duration-300 ease-in-out",
+        "border-l border-ibm-gray-20 bg-white",
+        open ? width : "w-0",
+        className
+      )}
+    >
+      {/* Fixed-width inner wrapper prevents content reflow during animation */}
+      <div className={cn("flex flex-col h-full", width)}>
+
+        {/* Header */}
+        <div className="flex items-start justify-between px-5 py-3.5 flex-shrink-0 border-b border-ibm-gray-20">
+          <div className="flex-1 min-w-0 pr-3">
+            <p className="text-sm font-semibold text-ibm-gray-100 truncate">{title}</p>
+            {description && (
+              <p className="text-[11px] text-ibm-gray-50 mt-0.5 truncate">{description}</p>
+            )}
+          </div>
+          <div className="flex items-center gap-1.5 flex-shrink-0">
+            {headerActions}
+            <button
+              type="button"
+              onClick={() => onOpenChange(false)}
+              className="p-1 text-ibm-gray-40 hover:text-ibm-gray-70 hover:bg-ibm-gray-10 transition-colors rounded-sm"
+            >
+              <X className="h-4 w-4" />
+              <span className="sr-only">Close</span>
+            </button>
+          </div>
+        </div>
+
+        {/* Scrollable body */}
+        <div className="flex-1 overflow-y-auto px-5 py-4">
+          {children}
+        </div>
+
+        {/* Footer */}
+        {actions && (
+          <div className="flex items-center gap-2 px-5 py-3 flex-shrink-0 border-t border-ibm-gray-10">
+            {actions}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/components/ui/side-panel.tsx

@@ -59,7 +59,7 @@ const SidePanel = ({
         <SidePanelOverlay />
         <DialogPrimitive.Content
           className={cn(
-            "fixed z-50 bg-white shadow-lg transition-transform data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:ease-out data-[state=closed]:ease-in data-[state=open]:duration-300 data-[state=closed]:duration-200 flex flex-col",
+            "fixed z-50 bg-white shadow-lg !translate-x-0 !translate-y-0 transition-transform data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:ease-out data-[state=closed]:ease-in data-[state=open]:duration-300 data-[state=closed]:duration-200 flex flex-col",
             side === "right" &&
               "inset-y-0 right-0 h-full w-full border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
             side === "left" &&
@@ -124,7 +124,7 @@ const SidePanelContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed z-50 bg-white shadow-lg transition-transform data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:ease-out data-[state=closed]:ease-in data-[state=open]:duration-300 data-[state=closed]:duration-200 flex flex-col",
+        "fixed z-50 bg-white shadow-lg !translate-x-0 !translate-y-0 transition-transform data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:ease-out data-[state=closed]:ease-in data-[state=open]:duration-300 data-[state=closed]:duration-200 flex flex-col",
         side === "right" &&
           "inset-y-0 right-0 h-full w-full border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
         side === "left" &&

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orsetra/shared-ui",
-  "version": "1.5.14",
+  "version": "1.5.16",
   "description": "Shared UI components for Orsetra platform",
   "main": "./index.ts",
   "types": "./index.ts",