@clicktap/ui 2.0.6 → 2.0.8

package/components/Accordion/Accordion.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as d,Fragment as O}from"react/jsx-runtime";import{Children as V,isValidElement as _,Fragment as $}from"react";import{DisclosureGroup as q,Disclosure as H,Button as J,DisclosurePanel as L}from"react-aria-components";import{cn as r}from"../../utils/cn.js";import{DownArrow as x}from"../Icon/DownArrow.js";function Z(p){return null}function E({children:p,selectionMode:y="single",defaultSelectedKeys:N,defaultExpandedKeys:w,selectedKeys:k,onSelectionChange:A,disallowEmptySelection:I=!1,hideIndicator:v=!1,showDivider:S=!0,dividerProps:D,variant:i,isCompact:s,className:F,itemClasses:n}){const c=V.toArray(p).filter(_),K=c.map((t,l)=>String(t.key??l)),b=t=>t==="all"?K:t?[...t].map(String):void 0,j=b(N??w)??[],P=b(k);return e(q,{allowsMultipleExpanded:y==="multiple",defaultExpandedKeys:j,expandedKeys:P,onExpandedChange:t=>{const l=new Set([...t].map(String));I&&l.size===0||A?.(l)},className:r("px-0",i==="bordered"&&["px-4 py-4 rounded-xl border-2 border-border-subtle"],i==="shadow"&&["px-4 py-4 rounded-xl bg-surface-subtle shadow-slate-200 border border-border-subtle"],F),children:c.map((t,l)=>{const h=String(t.key??l),{title:W,subtitle:f,startContent:m,indicator:u,hideIndicator:z,disableIndicatorAnimation:g,isDisabled:B,classNames:o,onPress:G,children:M}=t.props;return d($,{children:[e(H,{id:h,isDisabled:B,className:r("w-full py-2","data-disabled:pointer-events-none data-disabled:opacity-50",i==="bordered"&&["rounded-xl py-0"],i==="splitted"&&["flex flex-col bg-surface-subtle rounded-xl border border-border-subtle"],s&&"py-0",n?.base,o?.base),children:({isExpanded:a})=>d(O,{children:[e("h2",{"data-open":a||void 0,className:r(n?.heading,o?.heading),children:d(J,{slot:"trigger","data-open":a||void 0,onPress:G,"aria-label":t.props["aria-label"],className:r("w-full h-full flex items-center gap-3 py-0 appearance-none cursor-pointer select-none","border-0 focus-visible:outline-2 focus-visible:outline focus-visible:outline-slate-100","bg-transparent text-inherit",s&&["py-2"],n?.trigger,o?.trigger),children:[m!=null&&e("span",{className:r("shrink-0",n?.startContent,o?.startContent),children:m}),d("span",{className:r("flex-1 text-left",n?.titleWrapper,o?.titleWrapper),children:[e("span",{className:r("block text-xl font-semibold",s&&"text-base",n?.title,o?.title),children:W}),f!=null&&e("span",{className:r("block text-base",s&&"text-sm",n?.subtitle,o?.subtitle),children:f})]}),z||v?null:e("span",{"aria-hidden":"true","data-open":a||void 0,className:r("shrink-0",!g&&"transition-transform duration-200",!g&&a&&"-rotate-180",n?.indicator,o?.indicator),children:typeof u=="function"?e(u,{isOpen:a}):u??e(x,{className:"w-4 h-4"})})]})}),e("div",{className:r("grid transition-[grid-template-rows] duration-200 ease-in-out",a?"grid-rows-[1fr]":"grid-rows-[0fr]"),children:e("div",{className:"overflow-hidden min-h-0",children:e(L,{className:r(s?"py-1":"py-2",n?.content,o?.content),children:M})})})]})}),S&&l<c.length-1&&e("hr",{className:r("border-solid border-b-0 border-x-0",D?.className??["my-2 border-border-subtle",i==="shadow"&&"border-border"])})]},h)})})}function C(){return e(x,{className:"w-4 h-4"})}export{E as Accordion,Z as AccordionItem,C as AccordionItemArrow,E as default};
+"use client";import{jsx as e,jsxs as d,Fragment as O}from"react/jsx-runtime";import{Children as V,isValidElement as _,Fragment as q}from"react";import{DisclosureGroup as H,Disclosure as J,Button as L,DisclosurePanel as Q}from"react-aria-components";import{cn as r}from"../../utils/cn.js";import{DownArrow as y}from"../Icon/DownArrow.js";function E(p){return null}function C({children:p,selectionMode:N="single",defaultSelectedKeys:w,defaultExpandedKeys:k,selectedKeys:A,onSelectionChange:I,disallowEmptySelection:v=!1,hideIndicator:D=!1,showDivider:S=!0,dividerProps:K,variant:s,isCompact:i,className:F,itemClasses:n}){const c=V.toArray(p).filter(_),b=(t,l)=>String(t.key??l).replace(/^\.\$/,"").replace(/=2/g,":").replace(/=0/g,"="),j=c.map(b),h=t=>t==="all"?j:t?[...t].map(String):void 0,P=h(w??k)??[],W=h(A);return e(H,{allowsMultipleExpanded:N==="multiple",defaultExpandedKeys:P,expandedKeys:W,onExpandedChange:t=>{const l=new Set([...t].map(String));v&&l.size===0||I?.(l)},className:r("px-0",s==="bordered"&&["px-4 py-4 rounded-xl border-2 border-border-subtle"],s==="shadow"&&["px-4 py-4 rounded-xl bg-surface-subtle shadow-slate-200 border border-border-subtle"],F),children:c.map((t,l)=>{const f=b(t,l),{title:$,subtitle:m,startContent:g,indicator:u,hideIndicator:z,disableIndicatorAnimation:x,isDisabled:B,classNames:o,onPress:G,children:M}=t.props;return d(q,{children:[e(J,{id:f,isDisabled:B,className:r("w-full py-2","data-disabled:pointer-events-none data-disabled:opacity-50",s==="bordered"&&["rounded-xl py-0"],s==="splitted"&&["flex flex-col bg-surface-subtle rounded-xl border border-border-subtle"],i&&"py-0",n?.base,o?.base),children:({isExpanded:a})=>d(O,{children:[e("h2",{"data-open":a||void 0,className:r(n?.heading,o?.heading),children:d(L,{slot:"trigger","data-open":a||void 0,onPress:G,"aria-label":t.props["aria-label"],className:r("w-full h-full flex items-center gap-3 py-0 appearance-none cursor-pointer select-none","border-0 focus-visible:outline-2 focus-visible:outline focus-visible:outline-slate-100","bg-transparent text-inherit",i&&["py-2"],n?.trigger,o?.trigger),children:[g!=null&&e("span",{className:r("shrink-0",n?.startContent,o?.startContent),children:g}),d("span",{className:r("flex-1 text-left",n?.titleWrapper,o?.titleWrapper),children:[e("span",{className:r("block text-xl font-semibold",i&&"text-base",n?.title,o?.title),children:$}),m!=null&&e("span",{className:r("block text-base",i&&"text-sm",n?.subtitle,o?.subtitle),children:m})]}),z||D?null:e("span",{"aria-hidden":"true","data-open":a||void 0,className:r("shrink-0",!x&&"transition-transform duration-200",!x&&a&&"-rotate-180",n?.indicator,o?.indicator),children:typeof u=="function"?e(u,{isOpen:a}):u??e(y,{className:"w-4 h-4"})})]})}),e("div",{className:r("grid transition-[grid-template-rows] duration-200 ease-in-out",a?"grid-rows-[1fr]":"grid-rows-[0fr]"),children:e("div",{className:"overflow-hidden min-h-0",children:e(Q,{className:r(i?"py-1":"py-2",n?.content,o?.content),children:M})})})]})}),S&&l<c.length-1&&e("hr",{className:r("border-solid border-b-0 border-x-0",K?.className??["my-2 border-border-subtle",s==="shadow"&&"border-border"])})]},f)})})}function ee(){return e(y,{className:"w-4 h-4"})}export{C as Accordion,E as AccordionItem,ee as AccordionItemArrow,C as default};

package/docs/migrations/2026/08/ui-2026-08-24-accordion-author-key-space.md

@@ -0,0 +1,50 @@
+# Accordion controlled selection matches authored keys again
+
+**Date:** 2026-08-24
+**Package:** `@clicktap/ui`
+**Affects:** every controlled or default-expanded `Accordion` — checkout payment method selection, checkout's `defaultExpandedKeys={['cart']}`, totals/discount panel, PDP mobile overview, filter groups.
+**Classification:** BUGFIX
+**Breaking:** No — unless you shipped a workaround that pre-prefixes keys (see crispi note).
+**Ticket:** CTAP-1404
+
+## The defect (2.0.x regression from the CTAP-1383 react-aria rewrite)
+
+The component derived internal item ids from `Children.toArray(children)`, whose
+keys are NOT the author's keys: React prefixes them (`key="CYBERSOURCE"` arrives
+as `".$CYBERSOURCE"`) and escapes them (`:` → `=2`, `=` → `=0`). Consumer keys
+were only `String()`ed, so:
+
+1. `selectedKeys` / `defaultSelectedKeys` / `defaultExpandedKeys` never matched
+   any item — nothing opened, nothing highlighted. The checkout payment step's
+   method selection "not working" was this.
+2. `onSelectionChange` handed the PREFIXED id back out — crispi's checkout
+   dispatched `".$CYBERSOURCE"` as a payment method code to the backend.
+
+The heroui accordion this replaced handled keys correctly. Diagnosed by the
+crispi session against the installed 2.0.6 bundle.
+
+## The fix
+
+Internal ids now live in the author's key space: the `.$` prefix is stripped AND
+React's key escaping is reversed (`=2` → `:`, `=0` → `=` — without the unescape,
+`Module:Entity`-style keys would still mangle). The same author-space id is used
+as the `Disclosure` id, so what react-aria reports through `onExpandedChange`
+round-trips with no output translation. `"all"` and unkeyed children (positional
+`".0"` ids) behave as before.
+
+## Consumer checklist
+
+1. Take the release; no call-site changes needed — controlled accordions start
+   working as written.
+2. **Delete compensating shims.** crispi: `libs/crispi-ui/.../Accordion.tsx`
+   wrapper (crispi-monorepo `7a44704f0`) must be REMOVED when taking this
+   release — it translates keys into the prefixed space, which no longer
+   exists, so keeping it reintroduces the bug in the other direction. Check the
+   shim's own escape handling is not needed elsewhere (this fix also covers
+   escaped keys, which a bare `.$`-strip shim does not).
+3. If any code path stored or transmitted a prefixed id (`.$…`) — crispi saw
+   them reach the backend as payment codes — check persisted data for the
+   `.$` prefix.
+
+Regression tests ship with the component (`Accordion.test.tsx`), proven to fail
+4/6 against the unfixed 2.0.6 behavior.

package/docs/migrations/2026/08/ui-2026-08-24-production-jsx-runtime-guard.md

@@ -0,0 +1,90 @@
+# The build fails if it emits the development JSX runtime
+
+**Date:** 2026-08-24
+**Package:** `@clicktap/ui` (also `@clicktap/state`, `@clicktap/csx`)
+**Affects:** anyone building or publishing these packages. Consumers receive a guarantee, not a change.
+**Classification:** BUGFIX
+**Breaking:** No. A correct build is unaffected; an incorrect one now fails instead of publishing.
+
+## Problem
+
+A build could emit React's **development** JSX runtime — `jsxDEV(...)` call sites
+plus a bundled `assets/jsx-dev-runtime-*.js` chunk. A consumer's production React
+does not export `jsxDEV`, so the package compiles and then dies at prerender:
+
+```
+TypeError: r.j.jsxDEV is not a function
+    at .next/server/app/page.js
+Error occurred prerendering page "/"
+```
+
+⚠️ **Nothing in the build looked at the JSX runtime.** Not
+`verifyUseClientDirectives`, not typecheck, not lint. The artifact was
+structurally valid and publishable; only a consumer's `next build` found it.
+
+## It was never intermittent
+
+CTAP-1393 recorded this as intermittent — seen twice, then not reproducible across
+five clean builds. It is deterministic, and the trigger was in `project.json`:
+
+```json
+"configurations": {
+  "development": { "mode": "development" },
+  "production":  { "mode": "production" }
+}
+```
+
+`@vitejs/plugin-react` selects the dev JSX runtime from the resolved mode. So
+`--configuration=development` — or any dependent target that propagated it —
+produced a dev-runtime artifact, every time. The five "clean" builds used the
+default production configuration.
+
+Measured on this repo, and matching the original report's numbers exactly:
+
+| build | emitted files referencing `jsxDEV` |
+| --- | --- |
+| default (production) | **0** |
+| `--mode=development` | **206** |
+
+## Fix — three layers, and only one of them is load-bearing
+
+1. **The `development` build configuration is removed** from `ui`, `state`, `csx`
+   and `conversion-tracking-facebook`. A published library artifact has no
+   legitimate development mode, and nothing in the repo invoked it. This removes
+   the mechanism.
+2. **`verifyProductionJsxRuntime`** now runs in the same `closeBundle` family as
+   `verifyUseClientDirectives`, on `ui`, `state` and `csx`. It fails the build if
+   any emitted `.js` references `jsxDEV` or `jsx-dev-runtime`.
+3. It also asserts the **positive** direction: a package whose output references
+   React must show at least one `react/jsx-runtime` import. Checking only "no
+   jsxDEV" passes vacuously on a build that emitted nothing.
+
+⚠️ **(2) is the one that holds.** A configuration fix cannot cover a mode arriving
+from a CLI flag, an inherited configuration on a dependent target, or a direct
+vite invocation. The assertion looks at what was actually EMITTED, so it holds
+however the mode was arrived at — which is the difference between making this
+unlikely and making it impossible.
+
+The positive check is conditioned on React output rather than required outright:
+`csx` legitimately emits no components (two files, no React), and an assertion
+that fails a correct build gets deleted.
+
+## Verified in both directions
+
+```
+ui     production      248 file(s) clean; 205 import react/jsx-runtime   -> build passes
+ui     --mode=dev      206 emitted file(s) reference the DEV runtime     -> build FAILS
+state  production       44 file(s) clean;  12 import react/jsx-runtime   -> build passes
+state  --mode=dev       14 emitted file(s) reference the DEV runtime     -> build FAILS
+csx    production        2 file(s) scanned; no React output to check     -> build passes
+```
+
+## Migration checklist
+
+- [ ] Nothing to do as a consumer.
+- [ ] If you fork these packages and script a build with
+      `--configuration=development`, that configuration no longer exists — drop
+      the flag. It was producing an artifact that could not be published.
+- [ ] If you add a new published frontend library, wire
+      `verifyProductionJsxRuntime(<its dist dir>)` into its vite plugins and do
+      not give it a `development` build configuration.

package/docs/migrations/README.md

@@ -32,5 +32,6 @@ For migrations affecting the frontend app, see [frontend migrations](../../../..
 | 2026-08-06 | [`Image` is framework-free; Next's optimizer moves to `@clicktap/ui/next`](./2026/08/ui-2026-08-06-clicktap-ui-image-next-subpath.md) ↔ | Yes (Next consumers) | *None* |
 | 2026-08-11 | [Password reveal is a toggle again, not press-and-hold](./2026/08/ui-2026-08-11-password-reveal-toggle.md) | Behavioural | Supersedes CTAP-1128 |
 | 2026-08-11 | [`next` / `@heroui/*` peers capped; `react-stately` pinned](./2026/08/ui-2026-08-11-peer-ranges-capped.md) | Yes (consumers past a ceiling) | *None* |
+| 2026-08-24 | [Accordion controlled selection matches authored keys again](./2026/08/ui-2026-08-24-accordion-author-key-space.md) | No | CTAP-1383 regression (CTAP-1404) |
 
 ↔ = cross-app migration (has counterpart in frontend app)

package/docs/migrations/index.json

@@ -1,4 +1,34 @@
 [
+  {
+    "path": "2026/08/ui-2026-08-24-production-jsx-runtime-guard.md",
+    "module": "libs/frontend-modules/ui",
+    "package": "@clicktap/ui",
+    "date": "2026-08-24",
+    "title": "The build fails if it emits the development JSX runtime",
+    "classification": "BUGFIX",
+    "breaking": "No. A correct build is unaffected; an incorrect one now fails instead of publishing.",
+    "affects": "anyone building or publishing these packages. Consumers receive a guarantee, not a change."
+  },
+  {
+    "path": "2026/08/ui-2026-08-24-accordion-author-key-space.md",
+    "module": "libs/frontend-modules/ui",
+    "package": "@clicktap/ui",
+    "date": "2026-08-24",
+    "title": "Accordion controlled selection matches authored keys again",
+    "classification": "BUGFIX",
+    "breaking": "No — unless you shipped a workaround that pre-prefixes keys (see crispi note).",
+    "affects": "every controlled or default-expanded `Accordion` — checkout payment method selection, checkout's `defaultExpandedKeys={['cart']}`, totals/discount panel, PDP mobile overview, filter groups."
+  },
+  {
+    "path": "2026/08/ui-2026-08-23-use-client-propagates-to-barrels.md",
+    "module": "libs/frontend-modules/ui",
+    "package": "@clicktap/ui",
+    "date": "2026-08-23",
+    "title": "'use client' now reaches the re-export barrels",
+    "classification": "BUGFIX (packaging)",
+    "breaking": "No.",
+    "affects": "every emitted `components/**/index.js`; `Checkbox` and `RadioGroup` sources; the build's directive verification"
+  },
   {
     "path": "2026/08/ui-2026-08-22-react-aria-moves-as-one-version-set.md",
     "module": "libs/frontend-modules/ui",

package/package.json

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