@djangocfg/ui-core 2.1.537 → 2.1.540

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.537",
+  "version": "2.1.540",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -128,7 +128,7 @@
     "check:contrast": "node scripts/check-preset-contrast.mjs"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.537",
+    "@djangocfg/i18n": "^2.1.540",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
@@ -206,8 +206,8 @@
     "@chenglou/pretext": "^0.0.8"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.537",
-    "@djangocfg/typescript-config": "^2.1.537",
+    "@djangocfg/i18n": "^2.1.540",
+    "@djangocfg/typescript-config": "^2.1.540",
     "@types/node": "^24.13.3",
     "@types/react": "19.2.15",
     "@types/react-dom": "19.2.3",

package/src/components/forms/input-affix/index.tsx

@@ -0,0 +1,65 @@
+"use client"
+
+import * as React from 'react';
+
+import { cn } from '../../../lib/utils';
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from '../input-group';
+
+/**
+ * An input with a fixed symbol before and/or after the value.
+ *
+ * `InputGroup` already does this, but it takes four components and the right
+ * `align` on each — enough ceremony that a currency field gets written as a
+ * bare `Input` with the unit in the label instead, which is how a form ends up
+ * not saying what unit it is in.
+ *
+ * This is the same thing in one component:
+ *
+ *   <InputAffix prefix="$" value={price} onChange={onPrice} />
+ *   <InputAffix suffix="%" value={rate} onChange={onRate} />
+ *   <InputAffix prefix="$" suffix="/ yr" value={rent} onChange={onRent} />
+ *
+ * The affixes are **static marks, not content**: a currency symbol, a unit, a
+ * per-period suffix. They carry `aria-hidden` because the accessible name
+ * belongs on the field's label — a screen reader announcing "dollar sign" as
+ * it enters the field is noise, and a label reading "Purchase price in US
+ * dollars" is the thing that actually helps. Where an affix carries meaning
+ * the label does not, put it in the label or in a `FieldDescription`.
+ *
+ * Not for a button, a select, or anything interactive. Reach for `InputGroup`
+ * directly there — that is what `InputGroupButton` is for.
+ */
+export interface InputAffixProps
+  extends Omit<React.ComponentProps<typeof InputGroupInput>, 'prefix'> {
+  /** Shown before the value — a currency symbol, a unit. */
+  prefix?: React.ReactNode;
+  /** Shown after the value — a unit, a period. */
+  suffix?: React.ReactNode;
+  /** Applied to the group, so callers can size the whole control. */
+  groupClassName?: string;
+}
+
+const InputAffix = React.forwardRef<HTMLInputElement, InputAffixProps>(
+  ({ prefix, suffix, className, groupClassName, ...props }, ref) => (
+    <InputGroup className={groupClassName}>
+      {prefix ? (
+        <InputGroupAddon align="inline-start" aria-hidden="true">
+          {prefix}
+        </InputGroupAddon>
+      ) : null}
+      <InputGroupInput ref={ref} className={cn(className)} {...props} />
+      {suffix ? (
+        <InputGroupAddon align="inline-end" aria-hidden="true">
+          {suffix}
+        </InputGroupAddon>
+      ) : null}
+    </InputGroup>
+  ),
+);
+InputAffix.displayName = 'InputAffix';
+
+export { InputAffix };

package/src/components/forms/input-group/index.tsx

@@ -15,7 +15,18 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
       role="group"
       className={cn(
         "group/input-group border-input dark:bg-input/30 shadow-xs relative flex w-full items-center rounded-[var(--radius)] border outline-none transition-[color,box-shadow]",
-        "h-9 has-[>textarea]:h-auto",
+        // Matches `Input`'s default size (h-10), not its `sm` one.
+        //
+        // This was `h-9`, which made a grouped input a row shorter than a bare
+        // `Input` or a `SelectTrigger` beside it — visible the moment a form
+        // puts a prefixed money field next to a plain select, and not
+        // attributable to either component from the outside. A wrapper that
+        // changes a control's height is a wrapper that cannot be dropped into
+        // an existing row.
+        //
+        // Use `className="h-9"` at the call site for the compact size, the
+        // same way `inputSize="sm"` is opted into rather than inherited.
+        "h-10 has-[>textarea]:h-auto",
 
         // Variants based on alignment.
         "has-[>[data-align=inline-start]]:[&>input]:pl-2",
@@ -128,21 +139,37 @@ function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
   )
 }
 
-function InputGroupInput({
-  className,
-  ...props
-}: React.ComponentProps<"input">) {
+/**
+ * Forwards its ref, unlike the other parts of this group.
+ *
+ * `Input` is a `forwardRef`, and a plain function wrapper around it swallows
+ * the ref silently — no warning, no type error, just a null ref at the call
+ * site. Anything wrapping this (see `InputAffix`) needs the node to focus or
+ * measure it.
+ */
+const InputGroupInput = React.forwardRef<
+  HTMLInputElement,
+  React.ComponentProps<"input">
+>(({ className, ...props }, ref) => {
   return (
     <Input
+      ref={ref}
       data-slot="input-group-control"
       className={cn(
-        "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
+        // `focus-visible:border-transparent` alongside `ring-0`: the group
+        // draws the focus ring for the whole control, and `INPUT_BASE` also
+        // turns the input's own border to `--ring` on focus. Suppressing only
+        // the ring left that border visible, so a focused money field showed a
+        // rectangle inside a rectangle — the addon sitting outside the inner
+        // one, which is exactly what the group exists to prevent.
+        "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:border-transparent focus-visible:ring-0 dark:bg-transparent",
         className
       )}
       {...props}
     />
   )
-}
+})
+InputGroupInput.displayName = "InputGroupInput"
 
 function InputGroupTextarea({
   className,

package/src/components/index.ts

@@ -19,6 +19,7 @@ export { Slider } from './forms/slider';
 export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants } from './forms/button-group';
 export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField } from './forms/form';
 export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea } from './forms/input-group';
+export { InputAffix, type InputAffixProps } from './forms/input-affix';
 export { InputOTP, InputOTPGroup, InputOTPSlot } from './forms/input-otp';
 export { PhoneInput } from './forms/phone-input';
 export type { PhoneInputProps } from './forms/phone-input';

package/src/components/navigation/pagination/pagination.tsx

@@ -38,6 +38,13 @@ PaginationItem.displayName = "PaginationItem"
 type PaginationLinkProps = {
   isActive?: boolean
   href?: string
+  /**
+   * Scroll to the top after navigating. Forwarded to `<Link>`, which defaults
+   * it to `false` — so a paginator that omits it leaves the visitor at the
+   * scroll offset they had on the previous page, looking at row 40 of a list
+   * that now starts again at row 1.
+   */
+  scroll?: boolean
 } & Pick<ButtonProps, "size"> &
   React.ComponentProps<"a">
 
@@ -46,6 +53,7 @@ const PaginationLink = ({
   isActive,
   size = "icon",
   href,
+  scroll,
   children,
   ...props
 }: PaginationLinkProps) => {
@@ -63,6 +71,7 @@ const PaginationLink = ({
         href={href}
         aria-current={isActive ? "page" : undefined}
         className={classes}
+        scroll={scroll}
       >
         {children}
       </Link>

package/src/components/navigation/pagination/ssr-pagination.tsx

@@ -143,6 +143,7 @@ export const SSRPagination: React.FC<SSRPaginationProps> = ({
             <PaginationPrevious
               href={actualHasPreviousPage ? getPageUrl(actualCurrentPage - 1) : undefined}
               className={!actualHasPreviousPage ? "pointer-events-none opacity-50" : undefined}
+              scroll
             />
           </PaginationItem>
 
@@ -154,6 +155,7 @@ export const SSRPagination: React.FC<SSRPaginationProps> = ({
                 <PaginationLink
                   href={getPageUrl(page)}
                   isActive={page === actualCurrentPage}
+                  scroll
                 >
                   {page}
                 </PaginationLink>
@@ -165,6 +167,7 @@ export const SSRPagination: React.FC<SSRPaginationProps> = ({
             <PaginationNext
               href={hasNextPage ? getPageUrl(actualCurrentPage + 1) : undefined}
               className={!hasNextPage ? "pointer-events-none opacity-50" : undefined}
+              scroll
             />
           </PaginationItem>
         </PaginationContent>

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

@@ -101,7 +101,23 @@ const DialogContent = React.forwardRef<
           // hard-coded, which made the width unoverridable in practice — a
           // `max-width` beside a declared `width` is inert, so callers that
           // needed a wider dialog silently got 32rem.
-          : "left-1/2 top-1/2 grid w-[min(var(--width-dialog),calc(100vw-2rem))] -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",
+          //
+          // `grid-cols-[minmax(0,1fr)]` is the same fix as the fullscreen
+          // branch's rows, on the other axis: a grid column also defaults to
+          // `min-width:auto`, so one unbreakable child — a long description, a
+          // path, a token — refuses to shrink and pushes the card past the
+          // width declared right here. The clamp reads as inert when that
+          // happens, and the overflow lands on whichever child is widest
+          // rather than on the one at fault.
+          //
+          // HEIGHT is capped for the same reason width is clamped. The card is
+          // `fixed` and centred by `-translate-y-1/2`, so content taller than
+          // the viewport grows the box and then centres it on its own overflow:
+          // BOTH ends leave the screen, and because nothing clips, nothing
+          // scrolls. The cap is only a ceiling — a card that must scroll adds
+          // `overflow-y-auto`, and one laying out its own regions overrides
+          // `max-h` as before.
+          : "left-1/2 top-1/2 grid max-h-[calc(100dvh-2rem)] grid-cols-[minmax(0,1fr)] w-[min(var(--width-dialog),calc(100vw-2rem))] -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",
         className
       )}
       {...props}

package/src/components/overlay/responsive-sheet/index.tsx

@@ -90,6 +90,14 @@ interface ResponsiveSheetContentProps {
   className?: string;
   /** Panel width on a wide viewport. A phone always takes the full width. */
   width?: ResponsiveSheetWidth;
+  /**
+   * Cap the panel at the viewport and scroll its body. Default.
+   *
+   * `false` for a panel that lays out its own scrolling regions — a header and
+   * footer that must stay put around a scrolling middle. It then owns the cap
+   * too; without one the overflow returns.
+   */
+  scroll?: boolean;
 }
 
 /**
@@ -103,11 +111,20 @@ interface ResponsiveSheetContentProps {
  * The phone case is where this matters. `DialogContent` carries its own
  * padding and centring; `DrawerContent` does not, so anything that renders as
  * both lost its layout at the breakpoint and nowhere else.
+ *
+ * HEIGHT is a default here for the same reason width is. The desktop
+ * `DialogContent` is `fixed` and centred by `-translate-y-1/2` with no cap, so
+ * content taller than the viewport overflows BOTH edges — the top scrolls out
+ * of reach, and nothing clips, so nothing scrolls. Every caller that got this
+ * right passed the same `max-h-[85vh]` by hand; the one that forgot lost its
+ * header off the top. A caller that wants its own scrolling regions passes
+ * `scroll={false}` and owns the cap.
  */
 function ResponsiveSheetContent({
   children,
   className,
   width = "md",
+  scroll = true,
 }: ResponsiveSheetContentProps) {
   const { isMobile } = React.useContext(ResponsiveSheetContext);
 
@@ -122,9 +139,26 @@ function ResponsiveSheetContent({
     );
   }
 
+  // The cap sits on the panel and the scroll on an inner box, never both on
+  // one element: `DialogContent` is a grid, and a scrollport that is also the
+  // grid would clip the close button pinned to its corner.
+  if (!scroll) {
+    return (
+      <DialogContent className={cn("w-[calc(100%-1rem)]", WIDTH[width], className)}>
+        {children}
+      </DialogContent>
+    );
+  }
+
   return (
-    <DialogContent className={cn("w-[calc(100%-1rem)]", WIDTH[width], className)}>
-      {children}
+    <DialogContent
+      className={cn(
+        "max-h-[85dvh] w-[calc(100%-1rem)] grid-rows-[minmax(0,1fr)] overflow-hidden",
+        WIDTH[width],
+        className,
+      )}
+    >
+      <div className="min-h-0 overflow-y-auto overscroll-contain">{children}</div>
     </DialogContent>
   );
 }

package/src/hooks/router/useNavigate.ts

@@ -38,7 +38,8 @@ export interface NavigateOptions {
 export interface UseNavigateReturn {
   /**
    * SPA navigation through the active adapter.
-   * Default: pushState + scroll to top.
+   * Default: pushState, and NO scroll — pass `scroll: true` for a transition
+   * that should land the visitor at the top.
    */
   navigate: (href: string, opts?: NavigateOptions) => void;
   /**