@djangocfg/ui-core 2.1.487 → 2.1.488
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.
- package/package.json +4 -4
- package/src/components/navigation/context-menu/index.tsx +2 -2
- package/src/components/navigation/dropdown-menu/index.tsx +15 -3
- package/src/components/navigation/menubar/index.tsx +2 -2
- package/src/components/overlay/alert-dialog/index.tsx +2 -2
- package/src/components/overlay/dialog/index.tsx +12 -3
- package/src/components/overlay/hover-card/index.tsx +1 -1
- package/src/components/overlay/popover/index.tsx +1 -1
- package/src/components/overlay/tooltip/index.tsx +1 -1
- package/src/components/select/select.tsx +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@djangocfg/ui-core",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.488",
|
|
4
4
|
"description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"ui-components",
|
|
@@ -128,7 +128,7 @@
|
|
|
128
128
|
"check:contrast": "node scripts/check-preset-contrast.mjs"
|
|
129
129
|
},
|
|
130
130
|
"peerDependencies": {
|
|
131
|
-
"@djangocfg/i18n": "^2.1.
|
|
131
|
+
"@djangocfg/i18n": "^2.1.488",
|
|
132
132
|
"consola": "^3.4.2",
|
|
133
133
|
"lucide-react": "^0.545.0",
|
|
134
134
|
"moment": "^2.30.1",
|
|
@@ -206,8 +206,8 @@
|
|
|
206
206
|
"@chenglou/pretext": "^0.0.8"
|
|
207
207
|
},
|
|
208
208
|
"devDependencies": {
|
|
209
|
-
"@djangocfg/i18n": "^2.1.
|
|
210
|
-
"@djangocfg/typescript-config": "^2.1.
|
|
209
|
+
"@djangocfg/i18n": "^2.1.488",
|
|
210
|
+
"@djangocfg/typescript-config": "^2.1.488",
|
|
211
211
|
"@types/node": "^24.13.3",
|
|
212
212
|
"@types/react": "19.2.15",
|
|
213
213
|
"@types/react-dom": "19.2.3",
|
|
@@ -47,7 +47,7 @@ const ContextMenuSubContent = React.forwardRef<
|
|
|
47
47
|
<ContextMenuPrimitive.SubContent
|
|
48
48
|
ref={ref}
|
|
49
49
|
className={cn(
|
|
50
|
-
"z-[
|
|
50
|
+
"z-[1200] min-w-32 overflow-hidden rounded-[var(--radius-popover)] border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:duration-75 data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-98 motion-reduce:data-[state=open]:animate-none",
|
|
51
51
|
className
|
|
52
52
|
)}
|
|
53
53
|
{...props}
|
|
@@ -63,7 +63,7 @@ const ContextMenuContent = React.forwardRef<
|
|
|
63
63
|
<ContextMenuPrimitive.Content
|
|
64
64
|
ref={ref}
|
|
65
65
|
className={cn(
|
|
66
|
-
"z-[
|
|
66
|
+
"z-[1200] max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-[var(--radius-popover)] border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:duration-75 data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-98 motion-reduce:data-[state=open]:animate-none",
|
|
67
67
|
className
|
|
68
68
|
)}
|
|
69
69
|
{...props}
|
|
@@ -53,7 +53,7 @@ const DropdownMenuSubContent = React.forwardRef<
|
|
|
53
53
|
// and clip. `min()` of the space Radix measured to the viewport edge and a
|
|
54
54
|
// comfortable ceiling — a menu that spans the WHOLE screen reads as a page,
|
|
55
55
|
// not a menu, so we stop well short of the viewport even when it would fit.
|
|
56
|
-
"z-[
|
|
56
|
+
"z-[1200] max-h-[min(var(--radix-dropdown-menu-content-available-height),24rem)] min-w-32 overflow-y-auto overflow-x-hidden rounded-[var(--radius-popover)] border bg-popover backdrop-blur-xl p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
|
57
57
|
className
|
|
58
58
|
)}
|
|
59
59
|
{...props}
|
|
@@ -65,15 +65,27 @@ DropdownMenuSubContent.displayName =
|
|
|
65
65
|
const DropdownMenuContent = React.forwardRef<
|
|
66
66
|
React.ElementRef<typeof DropdownMenuPrimitive.Content>,
|
|
67
67
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
|
|
68
|
-
>(({ className, sideOffset = 4, ...props }, ref) => (
|
|
68
|
+
>(({ className, sideOffset = 4, collisionPadding = 8, ...props }, ref) => (
|
|
69
69
|
<DropdownMenuPrimitive.Portal>
|
|
70
70
|
<DropdownMenuPrimitive.Content
|
|
71
71
|
ref={ref}
|
|
72
72
|
sideOffset={sideOffset}
|
|
73
|
+
// Keep a gap from the viewport edge instead of sitting flush against it —
|
|
74
|
+
// most visible on phones, where a trigger near the edge would otherwise
|
|
75
|
+
// pin the menu to the very border of the screen.
|
|
76
|
+
collisionPadding={collisionPadding}
|
|
73
77
|
className={cn(
|
|
74
78
|
// See DropdownMenuSubContent: cap at the SMALLER of the space to the
|
|
75
79
|
// viewport edge and a comfortable ceiling, then scroll inside.
|
|
76
|
-
|
|
80
|
+
//
|
|
81
|
+
// z-[1200] is the shared popover layer across ui-core (dropdown, select,
|
|
82
|
+
// popover, tooltip, hover-card, context-menu, menubar) — keep them equal.
|
|
83
|
+
// It must clear app shells that use their own fixed stacking, such as the
|
|
84
|
+
// public mobile drawer (z-[1000]) and its navbar (z-[1001]): Radix portals
|
|
85
|
+
// this content to <body>, so an open menu is a SIBLING of the drawer, not
|
|
86
|
+
// a child, and a lower value renders it *underneath* the very surface it
|
|
87
|
+
// was opened from. Dialogs/sheets sit at z-50, so nothing lives in between.
|
|
88
|
+
"z-[1200] max-h-[min(var(--radix-dropdown-menu-content-available-height),24rem)] min-w-32 overflow-y-auto overflow-x-hidden rounded-[var(--radius-popover)] border bg-popover backdrop-blur-xl p-1 text-popover-foreground shadow-md",
|
|
77
89
|
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
|
78
90
|
className
|
|
79
91
|
)}
|
|
@@ -95,7 +95,7 @@ const MenubarSubContent = React.forwardRef<
|
|
|
95
95
|
<MenubarPrimitive.SubContent
|
|
96
96
|
ref={ref}
|
|
97
97
|
className={cn(
|
|
98
|
-
"z-[
|
|
98
|
+
"z-[1200] min-w-32 overflow-hidden rounded-[var(--radius-popover)] border bg-popover backdrop-blur-xl p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
|
99
99
|
className
|
|
100
100
|
)}
|
|
101
101
|
{...props}
|
|
@@ -118,7 +118,7 @@ const MenubarContent = React.forwardRef<
|
|
|
118
118
|
alignOffset={alignOffset}
|
|
119
119
|
sideOffset={sideOffset}
|
|
120
120
|
className={cn(
|
|
121
|
-
"z-[
|
|
121
|
+
"z-[1200] min-w-48 overflow-hidden rounded-[var(--radius-popover)] border bg-popover backdrop-blur-xl p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
|
122
122
|
className
|
|
123
123
|
)}
|
|
124
124
|
{...props}
|
|
@@ -19,7 +19,7 @@ const AlertDialogOverlay = React.forwardRef<
|
|
|
19
19
|
>(({ className, style, ...props }, ref) => (
|
|
20
20
|
<AlertDialogPrimitive.Overlay
|
|
21
21
|
className={cn(
|
|
22
|
-
"fixed inset-0 z-
|
|
22
|
+
"fixed inset-0 z-1300 bg-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
23
23
|
className
|
|
24
24
|
)}
|
|
25
25
|
style={style}
|
|
@@ -38,7 +38,7 @@ const AlertDialogContent = React.forwardRef<
|
|
|
38
38
|
<AlertDialogPrimitive.Content
|
|
39
39
|
ref={ref}
|
|
40
40
|
className={cn(
|
|
41
|
-
"fixed left-1/2 top-1/2 z-
|
|
41
|
+
"fixed left-1/2 top-1/2 z-1300 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-[var(--radius-dialog)]",
|
|
42
42
|
className
|
|
43
43
|
)}
|
|
44
44
|
{...props}
|
|
@@ -22,7 +22,11 @@ const DialogOverlay = React.forwardRef<
|
|
|
22
22
|
<DialogPrimitive.Overlay
|
|
23
23
|
ref={ref}
|
|
24
24
|
className={cn(
|
|
25
|
-
|
|
25
|
+
// Top of the overlay scale: a modal must cover the app shell (public
|
|
26
|
+
// drawer z-1000, its navbar z-1001) and the popover layer (z-1200) — a
|
|
27
|
+
// dialog opened FROM any of those is meaningless underneath them. Keep
|
|
28
|
+
// dialog and alert-dialog on the same value.
|
|
29
|
+
"fixed inset-0 z-1300 bg-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
26
30
|
className
|
|
27
31
|
)}
|
|
28
32
|
style={style}
|
|
@@ -63,9 +67,14 @@ const DialogContent = React.forwardRef<
|
|
|
63
67
|
// The content auto-focuses on open; suppress the focus outline on the
|
|
64
68
|
// panel itself (a stray ring around the whole modal looks broken).
|
|
65
69
|
// Inner controls keep their own focus-visible rings.
|
|
66
|
-
"fixed z-
|
|
70
|
+
"fixed z-1300 bg-background duration-200 focus:outline-none focus-visible:outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
67
71
|
fullscreen
|
|
68
|
-
|
|
72
|
+
// `grid-rows-[minmax(0,1fr)]` is load-bearing: a grid row defaults to
|
|
73
|
+
// `min-height:auto`, so it grows past `h-[100dvh]` to fit its content.
|
|
74
|
+
// A child sizing itself with `h-full` then measures that overgrown
|
|
75
|
+
// row, its own `min-h-0`/`overflow-y-auto` never receive a bound, and
|
|
76
|
+
// a long list (e.g. the locale picker) runs off-screen unscrollable.
|
|
77
|
+
? "left-0 top-0 grid grid-rows-[minmax(0,1fr)] h-[100dvh] w-screen max-w-none gap-0 border-0 p-0 shadow-none data-[state=closed]:zoom-out-[0.98] data-[state=open]:zoom-in-[0.98]"
|
|
69
78
|
// Rounded on ALL sizes — the radius used to be `sm:`-gated, which left
|
|
70
79
|
// phone dialogs with hard square corners. Centered, soft-cornered card.
|
|
71
80
|
: "left-1/2 top-1/2 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-[var(--radius-dialog)] border p-6 shadow-lg data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
|
|
@@ -20,7 +20,7 @@ const HoverCardContent = React.forwardRef<
|
|
|
20
20
|
align={align}
|
|
21
21
|
sideOffset={sideOffset}
|
|
22
22
|
className={cn(
|
|
23
|
-
"z-[
|
|
23
|
+
"z-[1200] w-64 rounded-[var(--radius-popover)] border bg-popover backdrop-blur-xl p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
|
24
24
|
className
|
|
25
25
|
)}
|
|
26
26
|
{...props}
|
|
@@ -23,7 +23,7 @@ const PopoverContent = React.forwardRef<
|
|
|
23
23
|
align={align}
|
|
24
24
|
sideOffset={sideOffset}
|
|
25
25
|
className={cn(
|
|
26
|
-
"z-[
|
|
26
|
+
"z-[1200] w-72 rounded-[var(--radius-popover)] border bg-popover backdrop-blur-xl p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
|
27
27
|
className
|
|
28
28
|
)}
|
|
29
29
|
{...props}
|
|
@@ -25,7 +25,7 @@ const TooltipContent = React.forwardRef<
|
|
|
25
25
|
// INVERSE surface (foreground bg + background text) so the tooltip is
|
|
26
26
|
// always high-contrast against any panel — light tooltip on dark theme,
|
|
27
27
|
// dark tooltip on light theme (Claude/Vercel/macOS). No border needed.
|
|
28
|
-
"z-[
|
|
28
|
+
"z-[1200] overflow-hidden rounded-[var(--radius-tooltip)] bg-foreground px-3 py-1.5 text-xs font-medium text-background shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
|
29
29
|
className
|
|
30
30
|
)}
|
|
31
31
|
{...props}
|
|
@@ -137,7 +137,7 @@ const SelectContent = React.forwardRef<
|
|
|
137
137
|
<SelectPrimitive.Content
|
|
138
138
|
ref={ref}
|
|
139
139
|
className={cn(
|
|
140
|
-
"relative z-[
|
|
140
|
+
"relative z-[1200] max-h-[--radix-select-content-available-height] min-w-32 overflow-y-auto overflow-x-hidden rounded-[var(--radius-popover)] border bg-popover backdrop-blur-xl text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
|
141
141
|
position === "popper" &&
|
|
142
142
|
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
|
143
143
|
className
|