@clicktap/ui 2.3.0 → 2.3.1

package/components/Dialog/Dialog.js

@@ -1 +1 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import{forwardRef as m}from"react";import{Dialog as f}from"react-aria-components";import{motion as d}from"framer-motion";import{cn as u}from"../../utils/cn.js";const s=m(({style:o,animationVariants:i,...t},n)=>{const r=typeof o=="function"?o(t):o;return e(f,{...t,ref:n,style:r})});let a=null;function c(){return typeof window>"u"?null:(a||(a=d.create(s)),a)}const l=c();function D({className:o,children:i,animationVariants:t,...n}){const r={className:u("p-8 outline-0 max-w-max w-screen absolute top-2/4 left-2/4","-translate-x-1/2 -translate-y-1/2","shadow-[0_8px_24px_rgba(0,0,0,0.1)] rounded-lg bg-white border border-solid border-border-emphasis",o),...n};return l?e(l,{...r,variants:t||{hidden:{opacity:0},visible:{opacity:1}},children:i}):e(s,{...r,children:i})}export{D as Dialog,D as default};
+"use client";import{jsx as e}from"react/jsx-runtime";import{forwardRef as s}from"react";import{Dialog as f}from"react-aria-components";import{motion as d}from"framer-motion";import{cn as u}from"../../utils/cn.js";const m=s(({style:o,animationVariants:a,...t},i)=>{const r=typeof o=="function"?o(t):o;return e(f,{...t,ref:i,style:r})});let n=null;function c(){return typeof window>"u"?null:(n||(n=d.create(m)),n)}const l=c();function y({className:o,children:a,animationVariants:t,...i}){const r={className:u("p-8 outline-0 max-w-max w-screen absolute top-2/4 left-2/4","-translate-x-1/2 -translate-y-1/2","max-h-[calc(100dvh-2rem)] overflow-y-auto","shadow-[0_8px_24px_rgba(0,0,0,0.1)] rounded-lg bg-white border border-solid border-border-emphasis",o),...i};return l?e(l,{...r,variants:t||{hidden:{opacity:0},visible:{opacity:1}},children:a}):e(m,{...r,children:a})}export{y as Dialog,y as default};

package/docs/migrations/2026/09/ui-2026-09-19-dialog-scrolls-within-viewport.md

@@ -0,0 +1,32 @@
+# BUGFIX: a `Dialog` taller than the viewport scrolls inside itself
+
+**Date:** 2026-09-19
+**Package:** `@clicktap/ui`
+**Affects:** `src/components/Dialog/Dialog.tsx` — every `<Dialog>` rendered inside `<Modal>`.
+**Classification:** BUGFIX
+**Breaking:** No API change. **Visual:** a dialog whose content is taller than the viewport is now capped at the viewport height minus 2rem and scrolls its own content; shorter dialogs render exactly as before.
+**Ticket:** CTAP-1791 (epic CTAP-1785)
+
+## Problem
+
+`Dialog` is centered with `absolute top-2/4 left-2/4 -translate-x-1/2 -translate-y-1/2` and had
+no height limit. A dialog taller than the viewport therefore grew past both edges: its top half
+sat above the screen and its footer, the Cancel and Update buttons, below it, with no way to
+scroll to them because the overlay itself does not scroll.
+
+CTAP-1791 put the billing address fields into the saved-card edit form, so "Update payment
+method" now carries cardholder name, expiry, postal code, ten address fields and the default
+control. On a laptop viewport the buttons were off screen.
+
+## What changed
+
+The dialog gets `max-h-[calc(100dvh-2rem)] overflow-y-auto`. The centering is untouched, so a
+capped dialog still sits in the middle with 1rem clear of each edge and its content scrolls
+inside the rounded, bordered box. `dvh` follows the mobile browser chrome as it shows and hides.
+
+## Consumer action
+
+None. A consumer that already wrapped its dialog content in its own scroll container keeps
+working; the outer cap only engages when the content is taller than the viewport. A consumer that
+passes `className` with its own `max-h-*` or `overflow-*` still wins, since `className` merges
+last.

package/docs/migrations/index.json

@@ -1,4 +1,14 @@
 [
+  {
+    "path": "2026/09/ui-2026-09-19-dialog-scrolls-within-viewport.md",
+    "module": "libs/frontend-modules/ui",
+    "package": "@clicktap/ui",
+    "date": "2026-09-19",
+    "title": "BUGFIX: a `Dialog` taller than the viewport scrolls inside itself",
+    "classification": "BUGFIX",
+    "breaking": "No API change. **Visual:** a dialog whose content is taller than the viewport is now capped at the viewport height minus 2rem and scrolls its own content; shorter dialogs render exactly as before.",
+    "affects": "`src/components/Dialog/Dialog.tsx` — every `<Dialog>` rendered inside `<Modal>`."
+  },
   {
     "path": "2026/09/ui-2026-09-18-pin-input-autofill-and-controlled-value.md",
     "module": "libs/frontend-modules/ui",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clicktap/ui",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "private": false,
   "author": "Clicktap",
   "description": "A library of React UI components and low-level hooks.",