@clicktap/ui 2.4.4 → 2.4.5

package/components/Accordion/Accordion.d.ts

@@ -1,19 +1,4 @@
 import { ComponentType, ReactNode } from 'react';
-/**
- * Native accordion on react-aria-components Disclosure (CTAP-1383).
- *
- * Previously a styled wrapper around @heroui/accordion — the ONLY
- * initially-rendered @heroui consumer (the PLP filter sidebar), which pulled
- * the whole @heroui system + theme (~25 KiB gz) into every page's initial JS.
- * react-aria-components is already this library's base, so the rewrite costs
- * nothing new. API-compatible with the call sites this repo uses:
- * selectionMode / defaultSelectedKeys ("all" included), per-item title,
- * subtitle, startContent, indicator (component, receives nothing, rotates on
- * open), classNames slots, showDivider (an <hr> between items — consumers
- * hide it with [&_hr]:hidden), onPress, and the `data-open` attribute on
- * heading/trigger/indicator that consumers style with data-[open=true]:.
- * Height animates with the CSS grid-rows trick — no animation runtime.
- */
 type ItemSlotClassNames = {
     base?: string;
     heading?: string;
@@ -38,6 +23,8 @@ export type AccordionItemProps = {
     hideIndicator?: boolean;
     disableIndicatorAnimation?: boolean;
     isDisabled?: boolean;
+    /** Overrides the Accordion's keepContentMounted for this item. */
+    keepContentMounted?: boolean;
     textValue?: string;
     'aria-label'?: string;
     classNames?: ItemSlotClassNames;
@@ -53,6 +40,10 @@ export type AccordionProps = {
     selectedKeys?: 'all' | Iterable<string>;
     onSelectionChange?: (keys: Set<string>) => void;
     disallowEmptySelection?: boolean;
+    /**
+     * Keep every collapsed item's content mounted (and server-rendered). Off by
+     * default: a collapsed item renders its content only while expanded.
+     */
     keepContentMounted?: boolean;
     /** Hide every item's indicator (heroui group-level prop). */
     hideIndicator?: boolean;
@@ -73,6 +64,6 @@ export type AccordionProps = {
  * did not change.
  */
 export declare function AccordionItem(_props: AccordionItemProps): null;
-export declare function Accordion({ children, selectionMode, defaultSelectedKeys, defaultExpandedKeys, selectedKeys, onSelectionChange, disallowEmptySelection, hideIndicator: groupHideIndicator, showDivider, dividerProps, variant, isCompact, className, itemClasses, }: AccordionProps): import("react/jsx-runtime").JSX.Element;
+export declare function Accordion({ children, selectionMode, defaultSelectedKeys, defaultExpandedKeys, selectedKeys, onSelectionChange, disallowEmptySelection, keepContentMounted: groupKeepContentMounted, hideIndicator: groupHideIndicator, showDivider, dividerProps, variant, isCompact, className, itemClasses, }: AccordionProps): import("react/jsx-runtime").JSX.Element;
 export default Accordion;
 export declare function AccordionItemArrow(): import("react/jsx-runtime").JSX.Element;

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

package/docs/migrations/2026/10/ui-2026-10-06-accordion-mounts-collapsed-content-on-expand.md

@@ -0,0 +1,93 @@
+# `Accordion` mounts a collapsed item's content only when it expands
+
+**Date:** 2026-10-06
+**Package:** `@clicktap/ui`
+**Affects:** `components/Accordion` (`Accordion`, `AccordionItem`)
+**Classification:** BUGFIX
+**Breaking:** No API change. ⚠️ Behavior change for any consumer that relies on collapsed content being in the server-rendered HTML, findable with the browser's find-in-page, or keeping its state across a collapse. Pass `keepContentMounted` there.
+**Ticket:** CTAP-2217
+
+## Dependencies
+
+*None*
+
+## Summary
+
+The react-aria `Accordion` that replaced heroui's in `@clicktap/ui` 2.0 rendered every item's content,
+expanded or not, and hid collapsed items with CSS only. Collapsed content mounted, ran its effects and
+queries, and filled the DOM. One consumer's page, with a data-fetching panel per group and nested
+accordions, sent 520 GraphQL requests and rendered about 72,000 hidden DOM nodes on load. heroui never
+mounted a collapsed item unless `keepContentMounted` was set, and `AccordionProps` kept declaring that
+prop, but the component ignored it.
+
+The default is now heroui's: a collapsed item's content is not rendered. It mounts when the item expands,
+stays mounted while the collapse transition runs, then unmounts. `keepContentMounted` works again.
+
+## Changes
+
+| | Before | After |
+| --- | --- | --- |
+| Collapsed item, default | Content mounted, hidden by CSS | Content not rendered |
+| Expanding | Already mounted | Content mounts |
+| Collapsing | Stays mounted | Unmounts once the height transition ends (or after 250 ms) |
+| `keepContentMounted` on `Accordion` | Accepted, ignored | Every item's content always mounted, as before this fix |
+| `keepContentMounted` on `AccordionItem` | Not a prop | Overrides the `Accordion`'s value for that item, in either direction |
+
+The panel element itself (`DisclosurePanel`, the target of the trigger's `aria-controls`) is still always
+rendered; only its children are conditional.
+
+**Source**: `libs/frontend-modules/ui/src/components/Accordion/Accordion.tsx` (`AccordionPanel`)
+
+## Migrate
+
+Most accordions need nothing: menus, filters, cookie categories and checkout sections are interactive
+content that nobody needs before it is opened. Pass `keepContentMounted` where one of these holds.
+
+1. **The content must be in the initial HTML**, typically for search engines: FAQ answers, product
+   details, specifications.
+
+   ```tsx
+   <Accordion keepContentMounted>
+     {faqs.map((faq) => (
+       <AccordionItem key={faq.id} title={faq.question}>
+         {faq.answer}
+       </AccordionItem>
+     ))}
+   </Accordion>
+   ```
+
+   The platform's reference storefront does this in `apps/frontend/components/FAQ/FAQ.tsx`.
+
+2. **State inside the panel must survive a collapse**: a half-filled form, a payment widget that
+   initializes once, a nested accordion's open item. Set it on the whole accordion or on just that
+   item:
+
+   ```tsx
+   <Accordion>
+     <AccordionItem key="card" title="Card" keepContentMounted>
+       <CardForm />
+     </AccordionItem>
+     <AccordionItem key="paypal" title="PayPal">
+       <PayPalButton />
+     </AccordionItem>
+   </Accordion>
+   ```
+
+   An item can also opt out of a group-level `keepContentMounted` with `keepContentMounted={false}`.
+
+3. **Code that reads collapsed content from the DOM** (a test that queries a collapsed item's text, a
+   script that measures it) must expand the item first, or the accordion must keep its content mounted.
+
+Find your call sites:
+
+```bash
+grep -rn '<Accordion\b' apps/ libs/ --include=*.tsx
+```
+
+## Verify
+
+- With the default, open a page with an accordion and search the page source (view-source, not the
+  inspector) for text from a collapsed item: it is absent. Expanding the item renders it.
+- With `keepContentMounted`, the same text is present in the page source.
+- On a page whose panels fetch data, the network panel shows no requests for collapsed items until they
+  are opened.

package/docs/migrations/index.json

@@ -1,4 +1,14 @@
 [
+  {
+    "path": "2026/10/ui-2026-10-06-accordion-mounts-collapsed-content-on-expand.md",
+    "module": "libs/frontend-modules/ui",
+    "package": "@clicktap/ui",
+    "date": "2026-10-06",
+    "title": "`Accordion` mounts a collapsed item's content only when it expands",
+    "classification": "BUGFIX",
+    "breaking": "No API change. ⚠️ Behavior change for any consumer that relies on collapsed content being in the server-rendered HTML, findable with the browser's find-in-page, or keeping its state across a collapse. Pass `keepContentMounted` there.",
+    "affects": "`components/Accordion` (`Accordion`, `AccordionItem`)"
+  },
   {
     "path": "2026/10/ui-2026-10-02-user-icon-drops-project-color-class.md",
     "module": "libs/frontend-modules/ui",

package/package.json

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