@khanacademy/wonder-blocks-accordion 3.1.69 → 3.1.71

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @khanacademy/wonder-blocks-accordion
 
+## 3.1.71
+
+### Patch Changes
+
+- Updated dependencies [63dcc94]
+    - @khanacademy/wonder-blocks-core@12.5.0
+    - @khanacademy/wonder-blocks-clickable@8.2.10
+    - @khanacademy/wonder-blocks-icon@6.0.1
+    - @khanacademy/wonder-blocks-typography@5.0.4
+
+## 3.1.70
+
+### Patch Changes
+
+- 07d6605: Fix `AccordionSection` not animating the first time a section is opened when `animated` is true. The expand/collapse row sizing now lives on a single stable Aphrodite class, selected off a `data-expanded` attribute, instead of swapping between two classes. Aphrodite injects a merged class's rule lazily, so the old approach pointed the first expand at a rule that did not exist yet — `grid-template-rows` computed to `none`, which cannot interpolate, and the section snapped open. Every subsequent toggle animated correctly, which is why this only ever showed up on first open.
+
+    `AccordionSection`'s wrapper element now renders a `data-expanded="true" | "false"` attribute, so snapshot tests that render an `AccordionSection` will need regenerating.
+
+    If your Jest setup inlines Aphrodite styles (`SNAPSHOT_INLINE_APHRODITE`, as Wonder Blocks' own config does), note that nested selectors are not applied on that path: a **collapsed** wrapper now reports `grid-template-rows: min-content 1fr` rather than `0fr`, so it reads as expanded in a snapshot even when it isn't. Assert expanded state via `aria-expanded` on the header, or the new `data-expanded` attribute, rather than via the wrapper's styles.
+
+- Updated dependencies [a1f5a09]
+    - @khanacademy/wonder-blocks-icon@6.0.0
+
 ## 3.1.69
 
 ### Patch Changes

package/dist/es/index.js

@@ -15,6 +15,6 @@ function getRoundedValuesForHeader(cornerKind,isFirstSection,isLastSection,expan
 
 const AccordionSectionHeader=React.forwardRef(function AccordionSectionHeader(props,ref){const{id,header,caretPosition,cornerKind,collapsible=true,expanded,animated,onClick,sectionContentUniqueId,headerStyle,tag="h2",testId,isFirstSection,isLastSection}=props;const headerIsString=typeof header==="string";const{roundedTop,roundedBottom}=getRoundedValuesForHeader(cornerKind,isFirstSection,isLastSection,expanded);return jsx(Heading,{size:"medium",tag:tag,style:styles$1.heading,children:jsx(Clickable,{id:id,"aria-expanded":expanded,"aria-controls":sectionContentUniqueId,onClick:onClick,disabled:!collapsible,testId:testId?`${testId}-header`:undefined,style:[styles$1.headerWrapper,animated&&styles$1.headerWrapperWithAnimation,caretPosition==="start"&&styles$1.headerWrapperCaretStart,roundedTop&&styles$1.roundedTop,roundedBottom&&styles$1.roundedBottom,headerStyle,!collapsible&&styles$1.disabled],ref:ref,children:()=>jsxs(Fragment,{children:[jsx(View,{style:[styles$1.headerContent,headerIsString&&styles$1.headerString],children:headerIsString?jsx(View,{style:[caretPosition==="end"?styles$1.headerStringCaretEnd:styles$1.headerStringCaretStart],children:header}):header}),collapsible&&jsx(PhosphorIcon,{icon:caretDown,color:semanticColor.core.foreground.neutral.default,size:"small",style:[animated&&styles$1.iconWithAnimation,caretPosition==="start"?styles$1.iconStart:styles$1.iconEnd,expanded&&styles$1.iconExpanded],testId:testId?`${testId}-caret-icon`:undefined})]})})})});const INNER_BORDER_RADIUS=`calc(${sizing.size_120} - 1px)`;const ANIMATION_LENGTH="300ms";const styles$1=StyleSheet.create({heading:{minInlineSize:0,marginBlockStart:0},headerWrapper:{display:"flex",flexDirection:"row",alignItems:"center",overflow:"hidden",minInlineSize:"auto",width:"100%",position:"relative",zIndex:1,":active":{outline:`2px solid ${semanticColor.action.secondary.progressive.press.border}`},":hover":{outline:`2px solid ${semanticColor.action.secondary.progressive.hover.border}`},":focus-visible":{outline:`2px solid ${semanticColor.focus.outer}`}},headerWrapperWithAnimation:{transition:`border-radius ${ANIMATION_LENGTH}`},headerWrapperCaretStart:{flexDirection:"row-reverse"},roundedTop:{borderStartStartRadius:INNER_BORDER_RADIUS,borderStartEndRadius:INNER_BORDER_RADIUS},roundedBottom:{borderEndStartRadius:INNER_BORDER_RADIUS,borderEndEndRadius:INNER_BORDER_RADIUS},headerContent:{flexGrow:1,textAlign:"start"},headerString:{paddingBlockStart:sizing.size_160,paddingBlockEnd:sizing.size_160},headerStringCaretEnd:{paddingInlineEnd:sizing.size_120,paddingInlineStart:sizing.size_160},headerStringCaretStart:{paddingInlineEnd:sizing.size_160,paddingInlineStart:sizing.size_120},iconWithAnimation:{transition:`transform ${ANIMATION_LENGTH}`},iconExpanded:{transform:"rotate(180deg)"},iconStart:{marginInlineStart:sizing.size_160},iconEnd:{marginInlineEnd:sizing.size_160},disabled:{pointerEvents:"none",color:"inherit",":focus-visible":{outline:`2px solid ${semanticColor.focus.outer}`}}});
 
-const AccordionSection=React.forwardRef(function AccordionSection(props,ref){const{children,id,header,collapsible,expanded,animated=false,onToggle,caretPosition="end",cornerKind="rounded",style,headerStyle,tag,testId,isFirstSection=true,isLastSection=true,isRegion=true,...ariaProps}=props;const[internalExpanded,setInternalExpanded]=React.useState(expanded??false);const controlledMode=expanded!==undefined&&onToggle;const uniqueSectionId=useId();const sectionId=id??uniqueSectionId;const uniqueHeaderId=useId();const headerId=id?`${id}-header`:uniqueHeaderId;const sectionContentUniqueId=useId();const sectionStyles=_generateStyles(cornerKind,isFirstSection,isLastSection);const handleClick=()=>{if(controlledMode){onToggle(!expanded);}else {setInternalExpanded(!internalExpanded);if(onToggle){onToggle(!internalExpanded);}}};let expandedState;if(collapsible===false){expandedState=true;}else {expandedState=controlledMode?expanded:internalExpanded;}return jsxs(View,{id:sectionId,style:[styles.wrapper,animated&&styles.wrapperWithAnimation,sectionStyles.wrapper,expandedState?styles.wrapperExpanded:styles.wrapperCollapsed,style],testId:testId,...ariaProps,children:[jsx(AccordionSectionHeader,{id:headerId,header:header,caretPosition:caretPosition,cornerKind:cornerKind,collapsible:collapsible,expanded:expandedState,animated:animated,onClick:handleClick,sectionContentUniqueId:sectionContentUniqueId,headerStyle:headerStyle,tag:tag,testId:testId,isFirstSection:isFirstSection,isLastSection:isLastSection,ref:ref}),jsx(View,{id:sectionContentUniqueId,role:isRegion?"region":undefined,"aria-labelledby":headerId,style:[styles.contentWrapper,expandedState?styles.contentWrapperExpanded:styles.conentWrapperCollapsed,sectionStyles.contentWrapper],testId:testId?`${testId}-content-panel`:undefined,children:typeof children==="string"?jsx(BodyText,{tag:"span",style:styles.stringContent,children:children}):children})]})});const styles=StyleSheet.create({wrapper:{display:"grid",position:"static",boxSizing:"border-box",backgroundColor:semanticColor.core.background.base.default},wrapperWithAnimation:{transition:"grid-template-rows 300ms"},wrapperCollapsed:{gridTemplateRows:"min-content 0fr"},wrapperExpanded:{gridTemplateRows:"min-content 1fr"},contentWrapper:{overflow:"hidden"},conentWrapperCollapsed:{visibility:"hidden"},contentWrapperExpanded:{visibility:"visible"},stringContent:{padding:sizing.size_160}});const cornerStyles={};const _generateStyles=(cornerKind,isFirstSection,isLastSection)=>{const sectionType=`${cornerKind}-${isFirstSection.toString()}-${isLastSection.toString()}`;if(cornerStyles[sectionType]){return cornerStyles[sectionType]}let wrapperStyle=Object.freeze({});let contentWrapperStyle=Object.freeze({});let firstSectionStyle=Object.freeze({});let lastSectionStyle=Object.freeze({});const borderStyle=`1px solid ${semanticColor.core.border.neutral.subtle}`;if(cornerKind==="square"){wrapperStyle={border:borderStyle,borderBottom:"none",borderRadius:border.radius.radius_0};if(isLastSection){lastSectionStyle={borderBottom:borderStyle};}}if(cornerKind==="rounded"){wrapperStyle={border:borderStyle,borderBottom:"none"};if(isFirstSection){firstSectionStyle={borderStartStartRadius:sizing.size_120,borderStartEndRadius:sizing.size_120};}if(isLastSection){lastSectionStyle={borderBottom:borderStyle,borderEndStartRadius:sizing.size_120,borderEndEndRadius:sizing.size_120};contentWrapperStyle={borderEndEndRadius:sizing.size_120,borderEndStartRadius:sizing.size_120};}}if(cornerKind==="rounded-per-section"){wrapperStyle={border:borderStyle,borderRadius:border.radius.radius_120,marginBlockEnd:sizing.size_160};contentWrapperStyle={borderEndEndRadius:sizing.size_120,borderEndStartRadius:sizing.size_120};}const newStyles={wrapper:{...wrapperStyle,...firstSectionStyle,...lastSectionStyle},contentWrapper:contentWrapperStyle};cornerStyles[sectionType]=StyleSheet.create(newStyles);return cornerStyles[sectionType]};
+const AccordionSection=React.forwardRef(function AccordionSection(props,ref){const{children,id,header,collapsible,expanded,animated=false,onToggle,caretPosition="end",cornerKind="rounded",style,headerStyle,tag,testId,isFirstSection=true,isLastSection=true,isRegion=true,...ariaProps}=props;const[internalExpanded,setInternalExpanded]=React.useState(expanded??false);const controlledMode=expanded!==undefined&&onToggle;const uniqueSectionId=useId();const sectionId=id??uniqueSectionId;const uniqueHeaderId=useId();const headerId=id?`${id}-header`:uniqueHeaderId;const sectionContentUniqueId=useId();const sectionStyles=_generateStyles(cornerKind,isFirstSection,isLastSection);const handleClick=()=>{if(controlledMode){onToggle(!expanded);}else {setInternalExpanded(!internalExpanded);if(onToggle){onToggle(!internalExpanded);}}};let expandedState;if(collapsible===false){expandedState=true;}else {expandedState=controlledMode?expanded:internalExpanded;}return jsxs(View,{id:sectionId,"data-expanded":expandedState?"true":"false",style:[styles.wrapper,animated&&styles.wrapperWithAnimation,sectionStyles.wrapper,style],testId:testId,...ariaProps,children:[jsx(AccordionSectionHeader,{id:headerId,header:header,caretPosition:caretPosition,cornerKind:cornerKind,collapsible:collapsible,expanded:expandedState,animated:animated,onClick:handleClick,sectionContentUniqueId:sectionContentUniqueId,headerStyle:headerStyle,tag:tag,testId:testId,isFirstSection:isFirstSection,isLastSection:isLastSection,ref:ref}),jsx(View,{id:sectionContentUniqueId,role:isRegion?"region":undefined,"aria-labelledby":headerId,style:[styles.contentWrapper,expandedState?styles.contentWrapperExpanded:styles.conentWrapperCollapsed,sectionStyles.contentWrapper],testId:testId?`${testId}-content-panel`:undefined,children:typeof children==="string"?jsx(BodyText,{tag:"span",style:styles.stringContent,children:children}):children})]})});const styles=StyleSheet.create({wrapper:{display:"grid",gridTemplateRows:"min-content 1fr",[':not([data-expanded="true"])']:{gridTemplateRows:"min-content 0fr"},position:"static",boxSizing:"border-box",backgroundColor:semanticColor.core.background.base.default},wrapperWithAnimation:{transition:"grid-template-rows 300ms"},contentWrapper:{overflow:"hidden"},conentWrapperCollapsed:{visibility:"hidden"},contentWrapperExpanded:{visibility:"visible"},stringContent:{padding:sizing.size_160}});const cornerStyles={};const _generateStyles=(cornerKind,isFirstSection,isLastSection)=>{const sectionType=`${cornerKind}-${isFirstSection.toString()}-${isLastSection.toString()}`;if(cornerStyles[sectionType]){return cornerStyles[sectionType]}let wrapperStyle=Object.freeze({});let contentWrapperStyle=Object.freeze({});let firstSectionStyle=Object.freeze({});let lastSectionStyle=Object.freeze({});const borderStyle=`1px solid ${semanticColor.core.border.neutral.subtle}`;if(cornerKind==="square"){wrapperStyle={border:borderStyle,borderBottom:"none",borderRadius:border.radius.radius_0};if(isLastSection){lastSectionStyle={borderBottom:borderStyle};}}if(cornerKind==="rounded"){wrapperStyle={border:borderStyle,borderBottom:"none"};if(isFirstSection){firstSectionStyle={borderStartStartRadius:sizing.size_120,borderStartEndRadius:sizing.size_120};}if(isLastSection){lastSectionStyle={borderBottom:borderStyle,borderEndStartRadius:sizing.size_120,borderEndEndRadius:sizing.size_120};contentWrapperStyle={borderEndEndRadius:sizing.size_120,borderEndStartRadius:sizing.size_120};}}if(cornerKind==="rounded-per-section"){wrapperStyle={border:borderStyle,borderRadius:border.radius.radius_120,marginBlockEnd:sizing.size_160};contentWrapperStyle={borderEndEndRadius:sizing.size_120,borderEndStartRadius:sizing.size_120};}const newStyles={wrapper:{...wrapperStyle,...firstSectionStyle,...lastSectionStyle},contentWrapper:contentWrapperStyle};cornerStyles[sectionType]=StyleSheet.create(newStyles);return cornerStyles[sectionType]};
 
 export { Accordion, AccordionSection };

package/dist/index.js

@@ -42,7 +42,7 @@ function getRoundedValuesForHeader(cornerKind,isFirstSection,isLastSection,expan
 
 const AccordionSectionHeader=React__namespace.forwardRef(function AccordionSectionHeader(props,ref){const{id,header,caretPosition,cornerKind,collapsible=true,expanded,animated,onClick,sectionContentUniqueId,headerStyle,tag="h2",testId,isFirstSection,isLastSection}=props;const headerIsString=typeof header==="string";const{roundedTop,roundedBottom}=getRoundedValuesForHeader(cornerKind,isFirstSection,isLastSection,expanded);return jsxRuntime.jsx(wonderBlocksTypography.Heading,{size:"medium",tag:tag,style:styles$1.heading,children:jsxRuntime.jsx(Clickable__default["default"],{id:id,"aria-expanded":expanded,"aria-controls":sectionContentUniqueId,onClick:onClick,disabled:!collapsible,testId:testId?`${testId}-header`:undefined,style:[styles$1.headerWrapper,animated&&styles$1.headerWrapperWithAnimation,caretPosition==="start"&&styles$1.headerWrapperCaretStart,roundedTop&&styles$1.roundedTop,roundedBottom&&styles$1.roundedBottom,headerStyle,!collapsible&&styles$1.disabled],ref:ref,children:()=>jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$1.headerContent,headerIsString&&styles$1.headerString],children:headerIsString?jsxRuntime.jsx(wonderBlocksCore.View,{style:[caretPosition==="end"?styles$1.headerStringCaretEnd:styles$1.headerStringCaretStart],children:header}):header}),collapsible&&jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{icon:caretDown__default["default"],color:wonderBlocksTokens.semanticColor.core.foreground.neutral.default,size:"small",style:[animated&&styles$1.iconWithAnimation,caretPosition==="start"?styles$1.iconStart:styles$1.iconEnd,expanded&&styles$1.iconExpanded],testId:testId?`${testId}-caret-icon`:undefined})]})})})});const INNER_BORDER_RADIUS=`calc(${wonderBlocksTokens.sizing.size_120} - 1px)`;const ANIMATION_LENGTH="300ms";const styles$1=aphrodite.StyleSheet.create({heading:{minInlineSize:0,marginBlockStart:0},headerWrapper:{display:"flex",flexDirection:"row",alignItems:"center",overflow:"hidden",minInlineSize:"auto",width:"100%",position:"relative",zIndex:1,":active":{outline:`2px solid ${wonderBlocksTokens.semanticColor.action.secondary.progressive.press.border}`},":hover":{outline:`2px solid ${wonderBlocksTokens.semanticColor.action.secondary.progressive.hover.border}`},":focus-visible":{outline:`2px solid ${wonderBlocksTokens.semanticColor.focus.outer}`}},headerWrapperWithAnimation:{transition:`border-radius ${ANIMATION_LENGTH}`},headerWrapperCaretStart:{flexDirection:"row-reverse"},roundedTop:{borderStartStartRadius:INNER_BORDER_RADIUS,borderStartEndRadius:INNER_BORDER_RADIUS},roundedBottom:{borderEndStartRadius:INNER_BORDER_RADIUS,borderEndEndRadius:INNER_BORDER_RADIUS},headerContent:{flexGrow:1,textAlign:"start"},headerString:{paddingBlockStart:wonderBlocksTokens.sizing.size_160,paddingBlockEnd:wonderBlocksTokens.sizing.size_160},headerStringCaretEnd:{paddingInlineEnd:wonderBlocksTokens.sizing.size_120,paddingInlineStart:wonderBlocksTokens.sizing.size_160},headerStringCaretStart:{paddingInlineEnd:wonderBlocksTokens.sizing.size_160,paddingInlineStart:wonderBlocksTokens.sizing.size_120},iconWithAnimation:{transition:`transform ${ANIMATION_LENGTH}`},iconExpanded:{transform:"rotate(180deg)"},iconStart:{marginInlineStart:wonderBlocksTokens.sizing.size_160},iconEnd:{marginInlineEnd:wonderBlocksTokens.sizing.size_160},disabled:{pointerEvents:"none",color:"inherit",":focus-visible":{outline:`2px solid ${wonderBlocksTokens.semanticColor.focus.outer}`}}});
 
-const AccordionSection=React__namespace.forwardRef(function AccordionSection(props,ref){const{children,id,header,collapsible,expanded,animated=false,onToggle,caretPosition="end",cornerKind="rounded",style,headerStyle,tag,testId,isFirstSection=true,isLastSection=true,isRegion=true,...ariaProps}=props;const[internalExpanded,setInternalExpanded]=React__namespace.useState(expanded??false);const controlledMode=expanded!==undefined&&onToggle;const uniqueSectionId=React.useId();const sectionId=id??uniqueSectionId;const uniqueHeaderId=React.useId();const headerId=id?`${id}-header`:uniqueHeaderId;const sectionContentUniqueId=React.useId();const sectionStyles=_generateStyles(cornerKind,isFirstSection,isLastSection);const handleClick=()=>{if(controlledMode){onToggle(!expanded);}else {setInternalExpanded(!internalExpanded);if(onToggle){onToggle(!internalExpanded);}}};let expandedState;if(collapsible===false){expandedState=true;}else {expandedState=controlledMode?expanded:internalExpanded;}return jsxRuntime.jsxs(wonderBlocksCore.View,{id:sectionId,style:[styles.wrapper,animated&&styles.wrapperWithAnimation,sectionStyles.wrapper,expandedState?styles.wrapperExpanded:styles.wrapperCollapsed,style],testId:testId,...ariaProps,children:[jsxRuntime.jsx(AccordionSectionHeader,{id:headerId,header:header,caretPosition:caretPosition,cornerKind:cornerKind,collapsible:collapsible,expanded:expandedState,animated:animated,onClick:handleClick,sectionContentUniqueId:sectionContentUniqueId,headerStyle:headerStyle,tag:tag,testId:testId,isFirstSection:isFirstSection,isLastSection:isLastSection,ref:ref}),jsxRuntime.jsx(wonderBlocksCore.View,{id:sectionContentUniqueId,role:isRegion?"region":undefined,"aria-labelledby":headerId,style:[styles.contentWrapper,expandedState?styles.contentWrapperExpanded:styles.conentWrapperCollapsed,sectionStyles.contentWrapper],testId:testId?`${testId}-content-panel`:undefined,children:typeof children==="string"?jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"span",style:styles.stringContent,children:children}):children})]})});const styles=aphrodite.StyleSheet.create({wrapper:{display:"grid",position:"static",boxSizing:"border-box",backgroundColor:wonderBlocksTokens.semanticColor.core.background.base.default},wrapperWithAnimation:{transition:"grid-template-rows 300ms"},wrapperCollapsed:{gridTemplateRows:"min-content 0fr"},wrapperExpanded:{gridTemplateRows:"min-content 1fr"},contentWrapper:{overflow:"hidden"},conentWrapperCollapsed:{visibility:"hidden"},contentWrapperExpanded:{visibility:"visible"},stringContent:{padding:wonderBlocksTokens.sizing.size_160}});const cornerStyles={};const _generateStyles=(cornerKind,isFirstSection,isLastSection)=>{const sectionType=`${cornerKind}-${isFirstSection.toString()}-${isLastSection.toString()}`;if(cornerStyles[sectionType]){return cornerStyles[sectionType]}let wrapperStyle=Object.freeze({});let contentWrapperStyle=Object.freeze({});let firstSectionStyle=Object.freeze({});let lastSectionStyle=Object.freeze({});const borderStyle=`1px solid ${wonderBlocksTokens.semanticColor.core.border.neutral.subtle}`;if(cornerKind==="square"){wrapperStyle={border:borderStyle,borderBottom:"none",borderRadius:wonderBlocksTokens.border.radius.radius_0};if(isLastSection){lastSectionStyle={borderBottom:borderStyle};}}if(cornerKind==="rounded"){wrapperStyle={border:borderStyle,borderBottom:"none"};if(isFirstSection){firstSectionStyle={borderStartStartRadius:wonderBlocksTokens.sizing.size_120,borderStartEndRadius:wonderBlocksTokens.sizing.size_120};}if(isLastSection){lastSectionStyle={borderBottom:borderStyle,borderEndStartRadius:wonderBlocksTokens.sizing.size_120,borderEndEndRadius:wonderBlocksTokens.sizing.size_120};contentWrapperStyle={borderEndEndRadius:wonderBlocksTokens.sizing.size_120,borderEndStartRadius:wonderBlocksTokens.sizing.size_120};}}if(cornerKind==="rounded-per-section"){wrapperStyle={border:borderStyle,borderRadius:wonderBlocksTokens.border.radius.radius_120,marginBlockEnd:wonderBlocksTokens.sizing.size_160};contentWrapperStyle={borderEndEndRadius:wonderBlocksTokens.sizing.size_120,borderEndStartRadius:wonderBlocksTokens.sizing.size_120};}const newStyles={wrapper:{...wrapperStyle,...firstSectionStyle,...lastSectionStyle},contentWrapper:contentWrapperStyle};cornerStyles[sectionType]=aphrodite.StyleSheet.create(newStyles);return cornerStyles[sectionType]};
+const AccordionSection=React__namespace.forwardRef(function AccordionSection(props,ref){const{children,id,header,collapsible,expanded,animated=false,onToggle,caretPosition="end",cornerKind="rounded",style,headerStyle,tag,testId,isFirstSection=true,isLastSection=true,isRegion=true,...ariaProps}=props;const[internalExpanded,setInternalExpanded]=React__namespace.useState(expanded??false);const controlledMode=expanded!==undefined&&onToggle;const uniqueSectionId=React.useId();const sectionId=id??uniqueSectionId;const uniqueHeaderId=React.useId();const headerId=id?`${id}-header`:uniqueHeaderId;const sectionContentUniqueId=React.useId();const sectionStyles=_generateStyles(cornerKind,isFirstSection,isLastSection);const handleClick=()=>{if(controlledMode){onToggle(!expanded);}else {setInternalExpanded(!internalExpanded);if(onToggle){onToggle(!internalExpanded);}}};let expandedState;if(collapsible===false){expandedState=true;}else {expandedState=controlledMode?expanded:internalExpanded;}return jsxRuntime.jsxs(wonderBlocksCore.View,{id:sectionId,"data-expanded":expandedState?"true":"false",style:[styles.wrapper,animated&&styles.wrapperWithAnimation,sectionStyles.wrapper,style],testId:testId,...ariaProps,children:[jsxRuntime.jsx(AccordionSectionHeader,{id:headerId,header:header,caretPosition:caretPosition,cornerKind:cornerKind,collapsible:collapsible,expanded:expandedState,animated:animated,onClick:handleClick,sectionContentUniqueId:sectionContentUniqueId,headerStyle:headerStyle,tag:tag,testId:testId,isFirstSection:isFirstSection,isLastSection:isLastSection,ref:ref}),jsxRuntime.jsx(wonderBlocksCore.View,{id:sectionContentUniqueId,role:isRegion?"region":undefined,"aria-labelledby":headerId,style:[styles.contentWrapper,expandedState?styles.contentWrapperExpanded:styles.conentWrapperCollapsed,sectionStyles.contentWrapper],testId:testId?`${testId}-content-panel`:undefined,children:typeof children==="string"?jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"span",style:styles.stringContent,children:children}):children})]})});const styles=aphrodite.StyleSheet.create({wrapper:{display:"grid",gridTemplateRows:"min-content 1fr",[':not([data-expanded="true"])']:{gridTemplateRows:"min-content 0fr"},position:"static",boxSizing:"border-box",backgroundColor:wonderBlocksTokens.semanticColor.core.background.base.default},wrapperWithAnimation:{transition:"grid-template-rows 300ms"},contentWrapper:{overflow:"hidden"},conentWrapperCollapsed:{visibility:"hidden"},contentWrapperExpanded:{visibility:"visible"},stringContent:{padding:wonderBlocksTokens.sizing.size_160}});const cornerStyles={};const _generateStyles=(cornerKind,isFirstSection,isLastSection)=>{const sectionType=`${cornerKind}-${isFirstSection.toString()}-${isLastSection.toString()}`;if(cornerStyles[sectionType]){return cornerStyles[sectionType]}let wrapperStyle=Object.freeze({});let contentWrapperStyle=Object.freeze({});let firstSectionStyle=Object.freeze({});let lastSectionStyle=Object.freeze({});const borderStyle=`1px solid ${wonderBlocksTokens.semanticColor.core.border.neutral.subtle}`;if(cornerKind==="square"){wrapperStyle={border:borderStyle,borderBottom:"none",borderRadius:wonderBlocksTokens.border.radius.radius_0};if(isLastSection){lastSectionStyle={borderBottom:borderStyle};}}if(cornerKind==="rounded"){wrapperStyle={border:borderStyle,borderBottom:"none"};if(isFirstSection){firstSectionStyle={borderStartStartRadius:wonderBlocksTokens.sizing.size_120,borderStartEndRadius:wonderBlocksTokens.sizing.size_120};}if(isLastSection){lastSectionStyle={borderBottom:borderStyle,borderEndStartRadius:wonderBlocksTokens.sizing.size_120,borderEndEndRadius:wonderBlocksTokens.sizing.size_120};contentWrapperStyle={borderEndEndRadius:wonderBlocksTokens.sizing.size_120,borderEndStartRadius:wonderBlocksTokens.sizing.size_120};}}if(cornerKind==="rounded-per-section"){wrapperStyle={border:borderStyle,borderRadius:wonderBlocksTokens.border.radius.radius_120,marginBlockEnd:wonderBlocksTokens.sizing.size_160};contentWrapperStyle={borderEndEndRadius:wonderBlocksTokens.sizing.size_120,borderEndStartRadius:wonderBlocksTokens.sizing.size_120};}const newStyles={wrapper:{...wrapperStyle,...firstSectionStyle,...lastSectionStyle},contentWrapper:contentWrapperStyle};cornerStyles[sectionType]=aphrodite.StyleSheet.create(newStyles);return cornerStyles[sectionType]};
 
 exports.Accordion = Accordion;
 exports.AccordionSection = AccordionSection;

package/package.json

@@ -3,7 +3,7 @@
   "description": "Accordion components for Wonder Blocks.",
   "author": "Khan Academy",
   "license": "MIT",
-  "version": "3.1.69",
+  "version": "3.1.71",
   "publishConfig": {
     "access": "public"
   },
@@ -21,11 +21,11 @@
   "types": "dist/index.d.ts",
   "source": "src/index.js",
   "dependencies": {
-    "@khanacademy/wonder-blocks-clickable": "8.2.9",
-    "@khanacademy/wonder-blocks-core": "12.4.4",
-    "@khanacademy/wonder-blocks-icon": "5.3.23",
+    "@khanacademy/wonder-blocks-clickable": "8.2.10",
+    "@khanacademy/wonder-blocks-core": "12.5.0",
+    "@khanacademy/wonder-blocks-icon": "6.0.1",
     "@khanacademy/wonder-blocks-tokens": "17.3.0",
-    "@khanacademy/wonder-blocks-typography": "5.0.3"
+    "@khanacademy/wonder-blocks-typography": "5.0.4"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",