@clicktap/ui 2.0.6 → 2.0.7

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/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,14 @@
 [
+  {
+    "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.7",
   "private": false,
   "author": "Clicktap",
   "description": "A library of React UI components and low-level hooks.",