@orsetra/shared-ui 1.1.32 → 1.1.33

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/components/layout/layout-container.tsx +12 -7
  2. package/components/layout/page-with-side-panel.tsx +16 -8
  3. package/components/layout/sidebar/main-sidebar.tsx +2 -2
  4. package/components/layout/sidebar/sidebar.tsx +1 -1
  5. package/components/ui/side-panel.tsx +4 -4
  6. package/package.json +1 -1
package/components/layout/layout-container.tsx CHANGED
@@ -9,7 +9,7 @@ import { UserMenu, Button, type UserMenuConfig } from "../ui"
9
9
  import { getMenuFromPath } from "../../lib/menu-utils"
10
10
  import { useIsMobile } from "../../hooks/use-mobile"
11
11
  import { cn } from "../../lib/utils"
12
- import { Menu, ChevronDown, Check } from "lucide-react"
12
+ import { Menu, ChevronDown } from "lucide-react"
13
13
 
14
14
  // ─── Dropdown Organisation / Projets ────────────────────────────────────────
15
15
 
@@ -77,7 +77,7 @@ function OrgProjectDropdown({
77
77
  </button>
78
78
 
79
79
  {open && (
80
- <div className="absolute left-0 top-full bg-white border border-ui-border shadow-lg z-[100] min-w-[220px] max-h-[280px] overflow-y-auto">
80
+ <div className="absolute left-1/2 -translate-x-1/2 top-full mt-1 bg-white border border-ui-border shadow-lg z-[100] w-56 max-h-[280px] overflow-y-auto">
81
81
  {loading ? (
82
82
  <div className="px-4 py-3 text-sm text-text-secondary">Chargement…</div>
83
83
  ) : projects.length === 0 ? (
@@ -90,14 +90,19 @@ function OrgProjectDropdown({
90
90
  key={project.id}
91
91
  onClick={() => { onProjectChange(project.id); setOpen(false) }}
92
92
  className={cn(
93
- "flex items-center gap-3 w-full px-4 py-2 text-sm text-left transition-colors border-l-4",
93
+ "flex items-center gap-3 w-full px-4 py-2 text-sm text-left transition-colors",
94
94
  isActive
95
- ? "bg-interactive/10 text-interactive font-medium border-interactive"
96
- : "text-text-secondary hover:bg-ui-background hover:text-text-primary border-transparent"
95
+ ? "bg-interactive/10 text-interactive font-medium"
96
+ : "text-text-secondary hover:bg-ui-background hover:text-text-primary"
97
97
  )}
98
98
  >
99
- <Check className={cn("h-4 w-4 flex-shrink-0", !isActive && "invisible")} />
100
- {project.name}
99
+ <div className={cn(
100
+ "h-3 w-3 rounded-full flex-shrink-0 ring-2",
101
+ isActive
102
+ ? "bg-interactive ring-interactive/30"
103
+ : "bg-transparent ring-transparent"
104
+ )} />
105
+ <span>{project.name}</span>
101
106
  </button>
102
107
  )
103
108
  })
package/components/layout/page-with-side-panel.tsx CHANGED
@@ -83,19 +83,24 @@ export function PageWithSidePanel({
83
83
  <>
84
84
  <div
85
85
  className={cn(
86
- "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",
87
- isOpen && showBorder && "border-l border-ibm-gray-40",
86
+ "hidden lg:flex flex-col flex-shrink-0 sticky top-0 self-start h-[calc(100vh-3.5rem)] overflow-hidden transition-[width,border-color] duration-300 ease-in-out",
87
+ showBorder ? "border-l" : "",
88
+ showBorder && isOpen ? "border-ibm-gray-40" : "border-transparent",
88
89
  isOpen ? panelWidthClass : "w-0",
89
90
  sidePanelClassName
90
91
  )}
91
92
  >
92
93
  {/* Inner wrapper at fixed width to prevent content reflow during animation */}
93
- <div className={`flex flex-col h-full bg-white ${panelWidthClass}`}>
94
+ <div className={cn(
95
+ `flex flex-col h-full bg-white ${panelWidthClass}`,
96
+ "transition-opacity duration-200 ease-in-out",
97
+ isOpen ? "opacity-100 delay-100" : "opacity-0"
98
+ )}>
94
99
 
95
- {/* Panel header */}
100
+ {/* Panel header — no bottom border */}
96
101
  {(sidePanelHeader || closable) && (
97
102
  <div className={cn(
98
- "flex items-center justify-between h-14 flex-shrink-0 px-4 border-b border-ibm-gray-20",
103
+ "flex items-center justify-between h-14 flex-shrink-0 px-4",
99
104
  sidePanelHeaderClassName
100
105
  )}>
101
106
  <div className="flex-1 min-w-0">
@@ -122,10 +127,13 @@ export function PageWithSidePanel({
122
127
  </div>
123
128
 
124
129
  {/* Toggle button — fixed keeps it vertically centered in the viewport */}
125
- {closable && !isOpen && (
130
+ {closable && (
126
131
  <button
127
- onClick={handleOpen}
128
- className="hidden lg:flex fixed top-1/2 right-0 -translate-y-1/2 items-center justify-center w-6 h-16 bg-white border border-ibm-gray-40 border-r-0 rounded-l-lg shadow-md hover:bg-ibm-gray-10 transition-colors duration-200"
132
+ onClick={isOpen ? handleClose : handleOpen}
133
+ className={cn(
134
+ "hidden lg:flex fixed top-1/2 right-0 -translate-y-1/2 items-center justify-center w-6 h-16 bg-white border border-ibm-gray-40 border-r-0 rounded-l-lg shadow-md hover:bg-ibm-gray-10 transition-[opacity,transform] duration-300 ease-in-out",
135
+ isOpen ? "opacity-0 pointer-events-none translate-x-2" : "opacity-100 translate-x-0"
136
+ )}
129
137
  aria-label="Open side panel"
130
138
  >
131
139
  <ChevronLeft className="h-4 w-4 text-ibm-gray-70" />
package/components/layout/sidebar/main-sidebar.tsx CHANGED
@@ -89,7 +89,7 @@ export function MainSidebar({
89
89
 
90
90
  return (
91
91
  <>
92
- {isOpen && !isMinimized && !hoveredMenu && (
92
+ {isOpen && !isMinimized && (
93
93
  <div
94
94
  className="fixed inset-0 bg-black/40 z-40"
95
95
  onClick={onToggle}
@@ -153,7 +153,7 @@ export function MainSidebar({
153
153
  "h-5 w-5 flex-shrink-0",
154
154
  isActive ? "text-interactive" : "text-text-secondary"
155
155
  )} />
156
- {!isMinimized && <span className="text-sm">{item.label}</span>}
156
+ {!isMinimized && <span className="text-base">{item.label}</span>}
157
157
  </button>
158
158
  </div>
159
159
  )
package/components/layout/sidebar/sidebar.tsx CHANGED
@@ -260,7 +260,7 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
260
260
 
261
261
  return (
262
262
  <Link
263
- key={item.name}
263
+ key={item.id}
264
264
  href={item.href}
265
265
  onClick={handleClick}
266
266
  className={cn(
package/components/ui/side-panel.tsx CHANGED
@@ -66,7 +66,7 @@ const SidePanel = ({
66
66
  )}
67
67
  >
68
68
  {/* Header fixe */}
69
- <div className="flex items-center justify-between border-b border-ibm-gray-20 px-6 py-4 flex-shrink-0">
69
+ <div className="flex items-center justify-between px-6 py-4 flex-shrink-0">
70
70
  <div className="flex-1">
71
71
  <DialogPrimitive.Title className="text-lg font-semibold text-ibm-gray-100">
72
72
  {title}
@@ -92,7 +92,7 @@ const SidePanel = ({
92
92
  </div>
93
93
 
94
94
  {/* Footer fixe */}
95
- <div className="flex items-center justify-end gap-3 border-t border-ibm-gray-20 px-6 py-4 flex-shrink-0">
95
+ <div className="flex items-center justify-end gap-3 px-6 py-4 flex-shrink-0">
96
96
  {actions}
97
97
  </div>
98
98
  </DialogPrimitive.Content>
@@ -140,7 +140,7 @@ const SidePanelHeader = React.forwardRef<
140
140
  <div
141
141
  ref={ref}
142
142
  className={cn(
143
- "flex items-center justify-between border-b border-ibm-gray-20 px-6 py-4 flex-shrink-0",
143
+ "flex items-center justify-between px-6 py-4 flex-shrink-0",
144
144
  className
145
145
  )}
146
146
  {...props}
@@ -191,7 +191,7 @@ const SidePanelFooter = React.forwardRef<
191
191
  <div
192
192
  ref={ref}
193
193
  className={cn(
194
- "flex items-center justify-end gap-3 border-t border-ibm-gray-20 px-6 py-4 flex-shrink-0",
194
+ "flex items-center justify-end gap-3 px-6 py-4 flex-shrink-0",
195
195
  className
196
196
  )}
197
197
  {...props}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@orsetra/shared-ui",
3
- "version": "1.1.32",
3
+ "version": "1.1.33",
4
4
  "description": "Shared UI components for Orsetra platform",
5
5
  "main": "./index.ts",
6
6
  "types": "./index.ts",