npm - @djangocfg/ui-core - Versions diffs - 2.1.338 → 2.1.340 - Mend

@djangocfg/ui-core 2.1.338 → 2.1.340

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 (9) hide show

package/package.json +4 -4
package/src/components/overlay/dialog/index.tsx +1 -1
package/src/components/overlay/drawer/index.tsx +35 -10
package/src/components/overlay/hover-card/index.tsx +1 -0
package/src/components/overlay/popover/index.tsx +1 -0
package/src/components/overlay/sheet/index.tsx +1 -0
package/src/components/overlay/side-panel/index.tsx +1 -0
package/src/components/overlay/tooltip/index.tsx +1 -0
package/src/hooks/media/useMediaQuery.ts +9 -1

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.338",
+  "version": "2.1.340",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -91,7 +91,7 @@
     "playground": "playground dev"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.338",
+    "@djangocfg/i18n": "^2.1.340",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
@@ -160,9 +160,9 @@
     "vaul": "1.1.2"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.338",
+    "@djangocfg/i18n": "^2.1.340",
     "@djangocfg/playground": "workspace:*",
-    "@djangocfg/typescript-config": "^2.1.338",
+    "@djangocfg/typescript-config": "^2.1.340",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/components/overlay/dialog/index.tsx CHANGED Viewed

@@ -58,6 +58,7 @@ const DialogContent = React.forwardRef<
     <DialogOverlay />
     <DialogPrimitive.Content
       ref={ref}
+      aria-describedby={undefined}
       className={cn(
         "fixed z-600 bg-background duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
         fullscreen
@@ -68,7 +69,6 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Description className="sr-only" />
       {closeButton === undefined ? (
         <DialogPrimitive.Close className="absolute right-4 top-4 cursor-pointer rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
           <Cross2Icon className="h-4 w-4" />

package/src/components/overlay/drawer/index.tsx CHANGED Viewed

@@ -6,17 +6,36 @@ import { Drawer as DrawerPrimitive } from 'vaul';
 import { cn } from '../../../lib/utils';
 import { useIsMobile } from '../../../hooks/media/useMobile';
+// Direction context lets <DrawerContent /> inherit the Root's direction without
+// callers having to pass it twice (a frequent rebase / refactor footgun).
+const DrawerDirectionContext = React.createContext<'bottom' | 'right' | 'left' | 'top' | undefined>(undefined);
+/** @internal — used by DrawerContent to inherit `direction` from the Root. */
+export const useDrawerDirection = () => React.useContext(DrawerDirectionContext);
 const Drawer = ({
-  shouldScaleBackground = true,
-  direction,
+  shouldScaleBackground,
+  direction = 'bottom',
   ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Root> & { direction?: 'bottom' | 'right' | 'left' | 'top' }) => (
-  <DrawerPrimitive.Root
-    shouldScaleBackground={shouldScaleBackground}
-    direction={direction}
-    {...props}
-  />
-)
+}: React.ComponentProps<typeof DrawerPrimitive.Root> & { direction?: 'bottom' | 'right' | 'left' | 'top' }) => {
+  // vaul's body-scale animation is a mobile-bottom-sheet effect by design.
+  // Applying it to side drawers (right/left) keeps the <body> transformed for
+  // ~300ms during open, which on heavy pages stalls the main thread *before*
+  // any data fetch the consumer kicks off in response to opening — so the
+  // network panel shows the request appearing only after the scale finishes.
+  // Default to enabled only for bottom sheets; callers can still override.
+  const resolvedScale = shouldScaleBackground ?? direction === 'bottom';
+  return (
+    <DrawerDirectionContext.Provider value={direction}>
+      <DrawerPrimitive.Root
+        shouldScaleBackground={resolvedScale}
+        direction={direction}
+        {...props}
+      />
+    </DrawerDirectionContext.Provider>
+  );
+};
 Drawer.displayName = "Drawer"
 const DrawerTrigger = DrawerPrimitive.Trigger
@@ -134,7 +153,7 @@ const DrawerContent = React.forwardRef<
 >(({
   className,
   children,
-  direction = 'bottom',
+  direction: directionProp,
   size = 'md',
   width,
   height,
@@ -147,6 +166,11 @@ const DrawerContent = React.forwardRef<
   onSizeChange,
   ...props
 }, ref) => {
+  // Inherit direction from the Drawer Root when not explicitly overridden.
+  // This avoids the common bug where `<Drawer direction="right">` is paired
+  // with a `<DrawerContent />` that silently falls back to "bottom".
+  const inherited = useDrawerDirection();
+  const direction = directionProp ?? inherited ?? 'bottom';
   const isVertical = direction === 'bottom' || direction === 'top';
   const isMobile = useIsMobile();
   const resizeEnabled = resizable && (!resizableOnDesktopOnly || !isMobile);
@@ -242,6 +266,7 @@ const DrawerContent = React.forwardRef<
       <DrawerOverlay />
       <DrawerPrimitive.Content
         ref={ref}
+        aria-describedby={undefined}
         className={cn(
           "fixed z-500 flex flex-col bg-background",
           directionStyles[direction],

package/src/components/overlay/hover-card/index.tsx CHANGED Viewed

@@ -16,6 +16,7 @@ const HoverCardContent = React.forwardRef<
 >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
   <HoverCardPrimitive.Content
     ref={ref}
+    aria-describedby={undefined}
     align={align}
     sideOffset={sideOffset}
     className={cn(

package/src/components/overlay/popover/index.tsx CHANGED Viewed

@@ -19,6 +19,7 @@ const PopoverContent = React.forwardRef<
   <PopoverPrimitive.Portal>
     <PopoverPrimitive.Content
       ref={ref}
+      aria-describedby={undefined}
       align={align}
       sideOffset={sideOffset}
       className={cn(

package/src/components/overlay/sheet/index.tsx CHANGED Viewed

@@ -63,6 +63,7 @@ const SheetContent = React.forwardRef<
     <SheetOverlay />
     <SheetPrimitive.Content
       ref={ref}
+      aria-describedby={undefined}
       className={cn(sheetVariants({ side }), className)}
       {...props}
     >

package/src/components/overlay/side-panel/index.tsx CHANGED Viewed

@@ -109,6 +109,7 @@ const SidePanelContent = React.forwardRef<
         <DrawerPrimitive.Portal>
             <DrawerPrimitive.Content
                 ref={ref}
+                aria-describedby={undefined}
                 className={cn(
                     'fixed z-500 flex flex-col bg-background shadow-2xl shadow-black/20',
                     'h-full max-w-[95vw]',

package/src/components/overlay/tooltip/index.tsx CHANGED Viewed

@@ -19,6 +19,7 @@ const TooltipContent = React.forwardRef<
   <TooltipPrimitive.Portal>
     <TooltipPrimitive.Content
       ref={ref}
+      aria-describedby={undefined}
       sideOffset={sideOffset}
       className={cn(
         "z-[700] overflow-hidden rounded-md border border-border bg-popover px-3 py-1.5 text-xs text-popover-foreground 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",

package/src/hooks/media/useMediaQuery.ts CHANGED Viewed

@@ -29,10 +29,18 @@ export type Breakpoint = keyof typeof BREAKPOINTS
  * const isLandscape = useMediaQuery('(orientation: landscape)')
  */
 export function useMediaQuery(query: string): boolean {
-  const [matches, setMatches] = useState<boolean>(false)
+  // Lazy initializer: read the real match on first render in the browser
+  // so we never paint a "desktop" frame on a phone (and vice-versa) before
+  // the first effect runs. SSR / non-browser → false.
+  const [matches, setMatches] = useState<boolean>(() => {
+    if (typeof window === 'undefined') return false
+    return window.matchMedia(query).matches
+  })
   useEffect(() => {
     const mediaQuery = window.matchMedia(query)
+    // Re-sync once on mount in case the lazy initializer was skipped
+    // (e.g. hydration mismatch where SSR gave false).
     setMatches(mediaQuery.matches)
     const handler = (event: MediaQueryListEvent) => setMatches(event.matches)
     mediaQuery.addEventListener('change', handler)