@fanvue/ui 3.7.1 → 3.7.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/Accordion/AccordionContent.cjs +6 -2
- package/dist/cjs/components/Accordion/AccordionContent.cjs.map +1 -1
- package/dist/components/Accordion/AccordionContent.mjs +6 -2
- package/dist/components/Accordion/AccordionContent.mjs.map +1 -1
- package/dist/styles/base.css +16 -0
- package/package.json +1 -1
|
@@ -28,13 +28,17 @@ const AccordionContent = React__namespace.forwardRef(({ className, children, noP
|
|
|
28
28
|
{
|
|
29
29
|
ref,
|
|
30
30
|
className: cn.cn(
|
|
31
|
+
// Overflow-clipped panel whose `height` is animated (see `accordion-expand`/
|
|
32
|
+
// `accordion-collapse` in base.css). No `display` override here: a closed item
|
|
33
|
+
// keeps Radix's `hidden` attribute, so `[hidden] { display: none }` removes its
|
|
34
|
+
// footprint entirely (a `display: grid` panel would defeat that and leave a strip).
|
|
31
35
|
"overflow-hidden",
|
|
32
36
|
"motion-safe:data-[state=closed]:animate-accordion-collapse",
|
|
33
37
|
"motion-safe:data-[state=open]:animate-accordion-expand",
|
|
34
38
|
className
|
|
35
39
|
),
|
|
36
40
|
...props,
|
|
37
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
41
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "[contain:layout_paint]", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
38
42
|
"div",
|
|
39
43
|
{
|
|
40
44
|
className: cn.cn(
|
|
@@ -44,7 +48,7 @@ const AccordionContent = React__namespace.forwardRef(({ className, children, noP
|
|
|
44
48
|
),
|
|
45
49
|
children
|
|
46
50
|
}
|
|
47
|
-
)
|
|
51
|
+
) })
|
|
48
52
|
}
|
|
49
53
|
));
|
|
50
54
|
AccordionContent.displayName = "AccordionContent";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionContent.cjs","sources":["../../../../src/components/Accordion/AccordionContent.tsx"],"sourcesContent":["import * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link AccordionContent} panel component. */\nexport type AccordionContentProps = React.ComponentPropsWithoutRef<\n typeof AccordionPrimitive.Content\n> & {\n /** Remove the default inner padding (`px-3 pb-3`). Useful when you need custom content layout. */\n noPadding?: boolean;\n};\n\n/** Renders the collapsible content panel for an {@link AccordionItem}. Animates open and closed. */\nexport const AccordionContent = React.forwardRef<\n React.ComponentRef<typeof AccordionPrimitive.Content>,\n AccordionContentProps\n>(({ className, children, noPadding, ...props }, ref) => (\n <AccordionPrimitive.Content\n ref={ref}\n className={cn(\n \"overflow-hidden\",\n \"motion-safe:data-[state=closed]:animate-accordion-collapse\",\n \"motion-safe:data-[state=open]:animate-accordion-expand\",\n className,\n )}\n {...props}\n >\n <div\n className={cn(\n
|
|
1
|
+
{"version":3,"file":"AccordionContent.cjs","sources":["../../../../src/components/Accordion/AccordionContent.tsx"],"sourcesContent":["import * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link AccordionContent} panel component. */\nexport type AccordionContentProps = React.ComponentPropsWithoutRef<\n typeof AccordionPrimitive.Content\n> & {\n /** Remove the default inner padding (`px-3 pb-3`). Useful when you need custom content layout. */\n noPadding?: boolean;\n};\n\n/** Renders the collapsible content panel for an {@link AccordionItem}. Animates open and closed. */\nexport const AccordionContent = React.forwardRef<\n React.ComponentRef<typeof AccordionPrimitive.Content>,\n AccordionContentProps\n>(({ className, children, noPadding, ...props }, ref) => (\n <AccordionPrimitive.Content\n ref={ref}\n className={cn(\n // Overflow-clipped panel whose `height` is animated (see `accordion-expand`/\n // `accordion-collapse` in base.css). No `display` override here: a closed item\n // keeps Radix's `hidden` attribute, so `[hidden] { display: none }` removes its\n // footprint entirely (a `display: grid` panel would defeat that and leave a strip).\n \"overflow-hidden\",\n \"motion-safe:data-[state=closed]:animate-accordion-collapse\",\n \"motion-safe:data-[state=open]:animate-accordion-expand\",\n className,\n )}\n {...props}\n >\n {/*\n Isolated layer between the height-animated panel and the content. `contain:\n layout paint` makes this its own layout+paint boundary, so the parent's height\n animation only re-clips this already-laid-out, already-painted layer instead of\n re-flowing and re-painting the padded content on every frame. Without it, the\n padding/content reflow per frame and visibly desync from the clip on mobile.\n */}\n <div className=\"[contain:layout_paint]\">\n <div\n className={cn(\n \"overflow-wrap-anywhere min-w-0\",\n \"typography-body-small-14px-regular text-content-secondary\",\n !noPadding && \"px-3 pt-2 pb-3\",\n )}\n >\n {children}\n </div>\n </div>\n </AccordionPrimitive.Content>\n));\n\nAccordionContent.displayName = \"AccordionContent\";\n"],"names":["React","jsx","AccordionPrimitive","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAaO,MAAM,mBAAmBA,iBAAM,WAGpC,CAAC,EAAE,WAAW,UAAU,WAAW,GAAG,SAAS,QAC/CC,2BAAAA;AAAAA,EAACC,8BAAmB;AAAA,EAAnB;AAAA,IACC;AAAA,IACA,WAAWC,GAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,MAKT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IASJ,UAAAF,2BAAAA,IAAC,OAAA,EAAI,WAAU,0BACb,UAAAA,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWE,GAAAA;AAAAA,UACT;AAAA,UACA;AAAA,UACA,CAAC,aAAa;AAAA,QAAA;AAAA,QAGf;AAAA,MAAA;AAAA,IAAA,EACH,CACF;AAAA,EAAA;AACF,CACD;AAED,iBAAiB,cAAc;;"}
|
|
@@ -8,13 +8,17 @@ const AccordionContent = React.forwardRef(({ className, children, noPadding, ...
|
|
|
8
8
|
{
|
|
9
9
|
ref,
|
|
10
10
|
className: cn(
|
|
11
|
+
// Overflow-clipped panel whose `height` is animated (see `accordion-expand`/
|
|
12
|
+
// `accordion-collapse` in base.css). No `display` override here: a closed item
|
|
13
|
+
// keeps Radix's `hidden` attribute, so `[hidden] { display: none }` removes its
|
|
14
|
+
// footprint entirely (a `display: grid` panel would defeat that and leave a strip).
|
|
11
15
|
"overflow-hidden",
|
|
12
16
|
"motion-safe:data-[state=closed]:animate-accordion-collapse",
|
|
13
17
|
"motion-safe:data-[state=open]:animate-accordion-expand",
|
|
14
18
|
className
|
|
15
19
|
),
|
|
16
20
|
...props,
|
|
17
|
-
children: /* @__PURE__ */ jsx(
|
|
21
|
+
children: /* @__PURE__ */ jsx("div", { className: "[contain:layout_paint]", children: /* @__PURE__ */ jsx(
|
|
18
22
|
"div",
|
|
19
23
|
{
|
|
20
24
|
className: cn(
|
|
@@ -24,7 +28,7 @@ const AccordionContent = React.forwardRef(({ className, children, noPadding, ...
|
|
|
24
28
|
),
|
|
25
29
|
children
|
|
26
30
|
}
|
|
27
|
-
)
|
|
31
|
+
) })
|
|
28
32
|
}
|
|
29
33
|
));
|
|
30
34
|
AccordionContent.displayName = "AccordionContent";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionContent.mjs","sources":["../../../src/components/Accordion/AccordionContent.tsx"],"sourcesContent":["import * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link AccordionContent} panel component. */\nexport type AccordionContentProps = React.ComponentPropsWithoutRef<\n typeof AccordionPrimitive.Content\n> & {\n /** Remove the default inner padding (`px-3 pb-3`). Useful when you need custom content layout. */\n noPadding?: boolean;\n};\n\n/** Renders the collapsible content panel for an {@link AccordionItem}. Animates open and closed. */\nexport const AccordionContent = React.forwardRef<\n React.ComponentRef<typeof AccordionPrimitive.Content>,\n AccordionContentProps\n>(({ className, children, noPadding, ...props }, ref) => (\n <AccordionPrimitive.Content\n ref={ref}\n className={cn(\n \"overflow-hidden\",\n \"motion-safe:data-[state=closed]:animate-accordion-collapse\",\n \"motion-safe:data-[state=open]:animate-accordion-expand\",\n className,\n )}\n {...props}\n >\n <div\n className={cn(\n
|
|
1
|
+
{"version":3,"file":"AccordionContent.mjs","sources":["../../../src/components/Accordion/AccordionContent.tsx"],"sourcesContent":["import * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link AccordionContent} panel component. */\nexport type AccordionContentProps = React.ComponentPropsWithoutRef<\n typeof AccordionPrimitive.Content\n> & {\n /** Remove the default inner padding (`px-3 pb-3`). Useful when you need custom content layout. */\n noPadding?: boolean;\n};\n\n/** Renders the collapsible content panel for an {@link AccordionItem}. Animates open and closed. */\nexport const AccordionContent = React.forwardRef<\n React.ComponentRef<typeof AccordionPrimitive.Content>,\n AccordionContentProps\n>(({ className, children, noPadding, ...props }, ref) => (\n <AccordionPrimitive.Content\n ref={ref}\n className={cn(\n // Overflow-clipped panel whose `height` is animated (see `accordion-expand`/\n // `accordion-collapse` in base.css). No `display` override here: a closed item\n // keeps Radix's `hidden` attribute, so `[hidden] { display: none }` removes its\n // footprint entirely (a `display: grid` panel would defeat that and leave a strip).\n \"overflow-hidden\",\n \"motion-safe:data-[state=closed]:animate-accordion-collapse\",\n \"motion-safe:data-[state=open]:animate-accordion-expand\",\n className,\n )}\n {...props}\n >\n {/*\n Isolated layer between the height-animated panel and the content. `contain:\n layout paint` makes this its own layout+paint boundary, so the parent's height\n animation only re-clips this already-laid-out, already-painted layer instead of\n re-flowing and re-painting the padded content on every frame. Without it, the\n padding/content reflow per frame and visibly desync from the clip on mobile.\n */}\n <div className=\"[contain:layout_paint]\">\n <div\n className={cn(\n \"overflow-wrap-anywhere min-w-0\",\n \"typography-body-small-14px-regular text-content-secondary\",\n !noPadding && \"px-3 pt-2 pb-3\",\n )}\n >\n {children}\n </div>\n </div>\n </AccordionPrimitive.Content>\n));\n\nAccordionContent.displayName = \"AccordionContent\";\n"],"names":[],"mappings":";;;;;AAaO,MAAM,mBAAmB,MAAM,WAGpC,CAAC,EAAE,WAAW,UAAU,WAAW,GAAG,SAAS,QAC/C;AAAA,EAAC,mBAAmB;AAAA,EAAnB;AAAA,IACC;AAAA,IACA,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,MAKT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IASJ,UAAA,oBAAC,OAAA,EAAI,WAAU,0BACb,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA,CAAC,aAAa;AAAA,QAAA;AAAA,QAGf;AAAA,MAAA;AAAA,IAAA,EACH,CACF;AAAA,EAAA;AACF,CACD;AAED,iBAAiB,cAAc;"}
|
package/dist/styles/base.css
CHANGED
|
@@ -94,6 +94,22 @@
|
|
|
94
94
|
}
|
|
95
95
|
}
|
|
96
96
|
|
|
97
|
+
/*
|
|
98
|
+
* Animate `height` between 0 and the panel's measured height
|
|
99
|
+
* (`--radix-accordion-content-height`, which Radix sets from a getBoundingClientRect
|
|
100
|
+
* in a useLayoutEffect). This is the canonical Radix/Collapsible pattern and keeps the
|
|
101
|
+
* closed state truly hidden: the paired `AccordionContent` adds no `display` override,
|
|
102
|
+
* so a closed panel keeps Radix's `hidden` attribute and `[hidden] { display: none }`
|
|
103
|
+
* removes its footprint entirely.
|
|
104
|
+
*
|
|
105
|
+
* Perf note (ENG-7598 — mobile jank): `height` is layout-animated and is NOT composited
|
|
106
|
+
* (only `transform`/`opacity` run off the main thread). To keep the animation smooth and
|
|
107
|
+
* stop the padded content reflowing/repainting every frame, `AccordionContent` wraps the
|
|
108
|
+
* content in an isolated `contain: layout paint` layer — the parent's height animation then
|
|
109
|
+
* only re-clips that cached layer. We deliberately do NOT animate `grid-template-rows`
|
|
110
|
+
* (also layout-bound, and `display: grid` defeats the `[hidden] { display: none }` closed
|
|
111
|
+
* state) and do NOT add `will-change` (a no-op hint for layout properties that wastes memory).
|
|
112
|
+
*/
|
|
97
113
|
@keyframes accordion-expand {
|
|
98
114
|
from {
|
|
99
115
|
height: 0;
|