@khanacademy/wonder-blocks-accordion 3.1.71 → 3.2.0

package/CHANGELOG.md

@@ -1,5 +1,53 @@
 # @khanacademy/wonder-blocks-accordion
 
+## 3.2.0
+
+### Minor Changes
+
+- 1f8807a: Accordion: add controlled mode via the `expandedIndices` and `onToggle` props, and fix the `id` prop so it is set on the accordion itself instead of being duplicated onto every list item
+
+### Patch Changes
+
+- Updated dependencies [8ac496e]
+    - @khanacademy/wonder-blocks-clickable@8.3.0
+
+## 3.1.72
+
+### Patch Changes
+
+- 8ce8b48: Warn when a heading is passed to `AccordionSection`'s `header` prop
+
+    `AccordionSection` wraps its trigger in a heading element containing a
+    `<button>`, and the `header` content renders inside that button. A heading in
+    there produces `h2 > button > h3`, which is invalid HTML — a `<button>` may only
+    contain phrasing content, and nested headings give screen reader users a
+    duplicated heading structure. Nothing caught this before.
+
+    - **eslint-plugin-wonder-blocks:** new `no-heading-in-accordion-header` rule,
+      enabled at `error` in the `recommended` config. It flags `<h1>`–`<h6>`, Wonder
+      Blocks `Heading` components, a `tag="h1"`–`tag="h6"` on any component (e.g.
+      `<BodyText tag="h1">`), and `role="heading"` anywhere inside a literal
+      `header` prop on `AccordionSection`. This is a major bump because projects
+      extending `recommended` will see new lint errors.
+    - **wonder-blocks-accordion:** `AccordionSection` now logs a development-only
+      console warning when the rendered header turns out to contain a heading. It
+      inspects the DOM, so it also catches headings rendered inside a consumer's own
+      components, which the lint rule cannot see. It does not fire during
+      server-side rendering. The `header` prop documentation now states the
+      constraint.
+
+    To set the heading level, use `AccordionSection`'s `tag` prop. For
+    heading-sized text without heading semantics, use `<BodyText tag="span">` with
+    the `font.heading.*` tokens.
+
+- Updated dependencies [04522d4]
+- Updated dependencies [5b4fed3]
+    - @khanacademy/wonder-blocks-tokens@18.0.0
+    - @khanacademy/wonder-blocks-clickable@8.2.11
+    - @khanacademy/wonder-blocks-icon@6.0.2
+    - @khanacademy/wonder-blocks-typography@5.0.5
+    - @khanacademy/wonder-blocks-core@12.5.0
+
 ## 3.1.71
 
 ### Patch Changes

package/dist/components/accordion-section.d.ts

@@ -59,8 +59,15 @@ declare const AccordionSection: React.ForwardRefExoticComponent<Readonly<import(
      */
     children: string | React.ReactElement;
     /**
-     * The header for this section. If a string is passed in, it will
-     * automatically be given Body typography from Wonder Blocks Typography.
+     * The header for this section. A string is given Heading typography and
+     * the standard header spacing; a React element is rendered as-is.
+     *
+     * NOTE: this content renders inside a `<button>` that is itself wrapped in
+     * a heading, so it must not contain a heading of its own (`<h1>`–`<h6>`,
+     * `Heading`, a `tag="h1"`–`tag="h6"` on any component, or
+     * `role="heading"`) — that is invalid HTML. Use AccordionSection's own
+     * `tag` prop to set the heading level, and `<BodyText tag="span">` with
+     * `font.heading.*` tokens for heading-sized text.
      */
     header: string | React.ReactElement;
     /**

package/dist/components/accordion.d.ts

@@ -1,53 +1,40 @@
 import * as React from "react";
-import type { StyleType } from "@khanacademy/wonder-blocks-core";
+import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
 import AccordionSection from "./accordion-section";
 export type AccordionCornerKindType = "square" | "rounded" | "rounded-per-section";
-/**
- * An accordion displays a vertically stacked list of sections, each of which
- * contains content that can be shown or hidden by clicking its header.
- *
- * The Wonder Blocks Accordion component is a styled wrapper for a list of
- * AccordionSection components. It also wraps the AccordionSection
- * components in list items.
- *
- * ### Usage
- *
- * ```jsx
- * import {
- *      Accordion,
- *      AccordionSection
- * } from "@khanacademy/wonder-blocks-accordion";
- *
- * <Accordion>
- *   <AccordionSection header="First section">
- *       This is the information present in the first section
- *   </AccordionSection>
- *   <AccordionSection header="Second section">
- *       This is the information present in the second section
- *   </AccordionSection>
- *   <AccordionSection header="Third section">
- *       This is the information present in the third section
- *   </AccordionSection>
- * </Accordion>
- * ```
- */
-declare const Accordion: React.ForwardRefExoticComponent<Readonly<import("@khanacademy/wonder-blocks-core").AriaAttributes> & Readonly<{
-    role?: import("@khanacademy/wonder-blocks-core").AriaRole;
-}> & {
+type ControlledProps = {
     /**
-     * The unique identifier for the accordion.
-     */
-    id?: string;
-    /**
-     * The AccordionSection components to display within this Accordion.
+     * The indices of the AccordionSections that are currently expanded.
+     *
+     * Passing this prop puts the Accordion into controlled mode: the parent
+     * owns the expanded state, and the Accordion only reports changes via
+     * `onToggle`. Use `initialExpandedIndex` instead if you want the
+     * Accordion to manage the expanded state itself.
      */
-    children: Array<React.ReactElement<React.ComponentProps<typeof AccordionSection>>>;
+    expandedIndices: ReadonlyArray<number>;
+    initialExpandedIndex?: never;
+};
+type UncontrolledProps = {
     /**
      * The index of the AccordionSection that should be expanded when the
      * Accordion is first rendered. If not specified, no AccordionSections
      * will be expanded when the Accordion is first rendered.
+     *
+     * This is only read on the first render. Use `expandedIndices` if you
+     * need to control the expanded state after that.
      */
     initialExpandedIndex?: number;
+    expandedIndices?: never;
+};
+type Props = AriaProps & {
+    /**
+     * The unique identifier for the accordion.
+     */
+    id?: string;
+    /**
+     * The AccordionSection components to display within this Accordion.
+     */
+    children: Array<React.ReactElement<React.ComponentProps<typeof AccordionSection>>>;
     /**
      * Whether multiple AccordionSections can be expanded at the same time.
      * If not specified, multiple AccordionSections can be expanded at a time.
@@ -91,5 +78,43 @@ declare const Accordion: React.ForwardRefExoticComponent<Readonly<import("@khana
      * Custom styles for the overall accordion container.
      */
     style?: StyleType;
-} & React.RefAttributes<HTMLUListElement>>;
+    /**
+     * Called when a section is toggled. It is passed the index of the section
+     * that was toggled, along with the indices of every section that is
+     * expanded as a result of the toggle. In controlled mode, the second
+     * argument is the value that should be passed back in as
+     * `expandedIndices`.
+     */
+    onToggle?: (toggledIndex: number, allExpandedIndices: Array<number>) => unknown;
+} & (ControlledProps | UncontrolledProps);
+/**
+ * An accordion displays a vertically stacked list of sections, each of which
+ * contains content that can be shown or hidden by clicking its header.
+ *
+ * The Wonder Blocks Accordion component is a styled wrapper for a list of
+ * AccordionSection components. It also wraps the AccordionSection
+ * components in list items.
+ *
+ * ### Usage
+ *
+ * ```jsx
+ * import {
+ *      Accordion,
+ *      AccordionSection
+ * } from "@khanacademy/wonder-blocks-accordion";
+ *
+ * <Accordion>
+ *   <AccordionSection header="First section">
+ *       This is the information present in the first section
+ *   </AccordionSection>
+ *   <AccordionSection header="Second section">
+ *       This is the information present in the second section
+ *   </AccordionSection>
+ *   <AccordionSection header="Third section">
+ *       This is the information present in the third section
+ *   </AccordionSection>
+ * </Accordion>
+ * ```
+ */
+declare const Accordion: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLUListElement>>;
 export default Accordion;

package/dist/es/index.js

@@ -9,11 +9,11 @@ import caretDown from '@phosphor-icons/core/bold/caret-down-bold.svg';
 import Clickable from '@khanacademy/wonder-blocks-clickable';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 
-const StyledUl=addStyle("ul");const LANDMARK_PROLIFERATION_THRESHOLD=6;const Accordion=React.forwardRef(function Accordion(props,ref){const{children,id,initialExpandedIndex,allowMultipleExpanded=true,caretPosition,cornerKind="rounded",animated,style,...ariaProps}=props;const startingArray=Array(children.length).fill(false);if(initialExpandedIndex!==undefined){startingArray[initialExpandedIndex]=true;}const[sectionsOpened,setSectionsOpened]=React.useState(startingArray);const childRefs=Array(children.length).fill(null);const sectionsAreRegions=children.length<=LANDMARK_PROLIFERATION_THRESHOLD;const handleSectionClick=(index,childOnToggle)=>{const newSectionsOpened=allowMultipleExpanded?[...sectionsOpened]:Array(children.length).fill(false);const newOpenedValueAtIndex=!sectionsOpened[index];newSectionsOpened[index]=newOpenedValueAtIndex;setSectionsOpened(newSectionsOpened);if(childOnToggle){childOnToggle(newOpenedValueAtIndex);}};const handleKeyDown=event=>{const currentlyFocusedHeaderIndex=childRefs.findIndex(ref=>ref.current===document.activeElement);if(currentlyFocusedHeaderIndex===-1){return}switch(event.key){case"ArrowUp":event.preventDefault();const previousSectionIndex=(currentlyFocusedHeaderIndex+children.length-1)%children.length;const previousChildRef=childRefs[previousSectionIndex];previousChildRef.current?.focus();break;case"ArrowDown":event.preventDefault();const nextSectionIndex=(currentlyFocusedHeaderIndex+1)%children.length;const nextChildRef=childRefs[nextSectionIndex];nextChildRef.current?.focus();break;case"Home":event.preventDefault();const firstChildRef=childRefs[0];firstChildRef.current?.focus();break;case"End":event.preventDefault();const lastChildRef=childRefs[children.length-1];lastChildRef.current?.focus();break}};return jsx(StyledUl,{style:[styles$2.wrapper,style],onKeyDown:handleKeyDown,...ariaProps,ref:ref,children:children.map((child,index)=>{const{caretPosition:childCaretPosition,cornerKind:childCornerKind,onToggle:childOnToggle,animated:childAnimated}=child.props;const childRef=React.createRef();childRefs[index]=childRef;const isFirstChild=index===0;const isLastChild=index===children.length-1;return jsx("li",{id:id,children:React.cloneElement(child,{animated:childAnimated??animated,caretPosition:childCaretPosition??caretPosition,cornerKind:childCornerKind??cornerKind,expanded:sectionsOpened[index],onToggle:()=>handleSectionClick(index,childOnToggle),isFirstSection:isFirstChild,isLastSection:isLastChild,isRegion:sectionsAreRegions,ref:childRef})},index)})})});const styles$2=StyleSheet.create({wrapper:{boxSizing:"border-box",listStyle:"none",padding:0,width:"100%"}});
+const StyledUl=addStyle("ul");const LANDMARK_PROLIFERATION_THRESHOLD=6;const Accordion=React.forwardRef(function Accordion(props,ref){const{children,id,allowMultipleExpanded=true,caretPosition,cornerKind="rounded",animated,style,onToggle,expandedIndices,initialExpandedIndex,...ariaProps}=props;const isControlled=expandedIndices!==undefined;const[internalSectionsOpened,setInternalSectionsOpened]=React.useState(()=>{const startingArray=Array(children.length).fill(false);if(initialExpandedIndex!==undefined){startingArray[initialExpandedIndex]=true;}return startingArray});const controlledSectionsOpened=React.useMemo(()=>{if(expandedIndices===undefined){return null}const openedArray=Array(children.length).fill(false);for(const index of expandedIndices){openedArray[index]=true;}return openedArray},[children.length,expandedIndices]);const sectionsOpened=controlledSectionsOpened??internalSectionsOpened;const childRefs=Array(children.length).fill(null);const sectionsAreRegions=children.length<=LANDMARK_PROLIFERATION_THRESHOLD;const handleSectionClick=(index,childOnToggle)=>{const newSectionsOpened=allowMultipleExpanded?[...sectionsOpened]:Array(children.length).fill(false);const newOpenedValueAtIndex=!sectionsOpened[index];newSectionsOpened[index]=newOpenedValueAtIndex;if(!isControlled){setInternalSectionsOpened(newSectionsOpened);}childOnToggle?.(newOpenedValueAtIndex);onToggle?.(index,newSectionsOpened.flatMap((isOpened,sectionIndex)=>isOpened?[sectionIndex]:[]));};const handleKeyDown=event=>{const currentlyFocusedHeaderIndex=childRefs.findIndex(ref=>ref.current===document.activeElement);if(currentlyFocusedHeaderIndex===-1){return}switch(event.key){case"ArrowUp":event.preventDefault();const previousSectionIndex=(currentlyFocusedHeaderIndex+children.length-1)%children.length;const previousChildRef=childRefs[previousSectionIndex];previousChildRef.current?.focus();break;case"ArrowDown":event.preventDefault();const nextSectionIndex=(currentlyFocusedHeaderIndex+1)%children.length;const nextChildRef=childRefs[nextSectionIndex];nextChildRef.current?.focus();break;case"Home":event.preventDefault();const firstChildRef=childRefs[0];firstChildRef.current?.focus();break;case"End":event.preventDefault();const lastChildRef=childRefs[children.length-1];lastChildRef.current?.focus();break}};return jsx(StyledUl,{id:id,style:[styles$2.wrapper,style],onKeyDown:handleKeyDown,...ariaProps,ref:ref,children:children.map((child,index)=>{const{caretPosition:childCaretPosition,cornerKind:childCornerKind,onToggle:childOnToggle,animated:childAnimated}=child.props;const childRef=React.createRef();childRefs[index]=childRef;const isFirstChild=index===0;const isLastChild=index===children.length-1;return jsx("li",{id:id?`${id}-section-${index}`:undefined,children:React.cloneElement(child,{animated:childAnimated??animated,caretPosition:childCaretPosition??caretPosition,cornerKind:childCornerKind??cornerKind,expanded:sectionsOpened[index]??false,onToggle:()=>handleSectionClick(index,childOnToggle),isFirstSection:isFirstChild,isLastSection:isLastChild,isRegion:sectionsAreRegions,ref:childRef})},index)})})});const styles$2=StyleSheet.create({wrapper:{boxSizing:"border-box",listStyle:"none",padding:0,width:"100%"}});
 
 function getRoundedValuesForHeader(cornerKind,isFirstSection,isLastSection,expanded){switch(cornerKind){case"rounded-per-section":return {roundedTop:true,roundedBottom:!expanded};case"rounded":return {roundedTop:isFirstSection,roundedBottom:isLastSection&&!expanded};default:return {roundedTop:false,roundedBottom:false}}}
 
-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 HEADING_SELECTOR='h1,h2,h3,h4,h5,h6,[role="heading"]';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 headerContentRef=React.useRef(null);React.useEffect(()=>{if(process.env.NODE_ENV==="production"||headerIsString){return}if(headerContentRef.current?.querySelector(HEADING_SELECTOR)){console.warn("AccordionSection's header contains a heading. It is rendered "+"inside a <button> that AccordionSection already wraps in "+"a heading, which is invalid HTML. Set the heading level "+"with the `tag` prop instead, and use "+'`<BodyText tag="span">` with `font.heading.*` tokens for '+"heading-sized text.");}},[header,headerIsString]);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],ref:headerContentRef,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,"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]};
 

package/dist/index.js

@@ -36,11 +36,11 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var caretDown__default = /*#__PURE__*/_interopDefaultLegacy(caretDown);
 var Clickable__default = /*#__PURE__*/_interopDefaultLegacy(Clickable);
 
-const StyledUl=wonderBlocksCore.addStyle("ul");const LANDMARK_PROLIFERATION_THRESHOLD=6;const Accordion=React__namespace.forwardRef(function Accordion(props,ref){const{children,id,initialExpandedIndex,allowMultipleExpanded=true,caretPosition,cornerKind="rounded",animated,style,...ariaProps}=props;const startingArray=Array(children.length).fill(false);if(initialExpandedIndex!==undefined){startingArray[initialExpandedIndex]=true;}const[sectionsOpened,setSectionsOpened]=React__namespace.useState(startingArray);const childRefs=Array(children.length).fill(null);const sectionsAreRegions=children.length<=LANDMARK_PROLIFERATION_THRESHOLD;const handleSectionClick=(index,childOnToggle)=>{const newSectionsOpened=allowMultipleExpanded?[...sectionsOpened]:Array(children.length).fill(false);const newOpenedValueAtIndex=!sectionsOpened[index];newSectionsOpened[index]=newOpenedValueAtIndex;setSectionsOpened(newSectionsOpened);if(childOnToggle){childOnToggle(newOpenedValueAtIndex);}};const handleKeyDown=event=>{const currentlyFocusedHeaderIndex=childRefs.findIndex(ref=>ref.current===document.activeElement);if(currentlyFocusedHeaderIndex===-1){return}switch(event.key){case"ArrowUp":event.preventDefault();const previousSectionIndex=(currentlyFocusedHeaderIndex+children.length-1)%children.length;const previousChildRef=childRefs[previousSectionIndex];previousChildRef.current?.focus();break;case"ArrowDown":event.preventDefault();const nextSectionIndex=(currentlyFocusedHeaderIndex+1)%children.length;const nextChildRef=childRefs[nextSectionIndex];nextChildRef.current?.focus();break;case"Home":event.preventDefault();const firstChildRef=childRefs[0];firstChildRef.current?.focus();break;case"End":event.preventDefault();const lastChildRef=childRefs[children.length-1];lastChildRef.current?.focus();break}};return jsxRuntime.jsx(StyledUl,{style:[styles$2.wrapper,style],onKeyDown:handleKeyDown,...ariaProps,ref:ref,children:children.map((child,index)=>{const{caretPosition:childCaretPosition,cornerKind:childCornerKind,onToggle:childOnToggle,animated:childAnimated}=child.props;const childRef=React__namespace.createRef();childRefs[index]=childRef;const isFirstChild=index===0;const isLastChild=index===children.length-1;return jsxRuntime.jsx("li",{id:id,children:React__namespace.cloneElement(child,{animated:childAnimated??animated,caretPosition:childCaretPosition??caretPosition,cornerKind:childCornerKind??cornerKind,expanded:sectionsOpened[index],onToggle:()=>handleSectionClick(index,childOnToggle),isFirstSection:isFirstChild,isLastSection:isLastChild,isRegion:sectionsAreRegions,ref:childRef})},index)})})});const styles$2=aphrodite.StyleSheet.create({wrapper:{boxSizing:"border-box",listStyle:"none",padding:0,width:"100%"}});
+const StyledUl=wonderBlocksCore.addStyle("ul");const LANDMARK_PROLIFERATION_THRESHOLD=6;const Accordion=React__namespace.forwardRef(function Accordion(props,ref){const{children,id,allowMultipleExpanded=true,caretPosition,cornerKind="rounded",animated,style,onToggle,expandedIndices,initialExpandedIndex,...ariaProps}=props;const isControlled=expandedIndices!==undefined;const[internalSectionsOpened,setInternalSectionsOpened]=React__namespace.useState(()=>{const startingArray=Array(children.length).fill(false);if(initialExpandedIndex!==undefined){startingArray[initialExpandedIndex]=true;}return startingArray});const controlledSectionsOpened=React__namespace.useMemo(()=>{if(expandedIndices===undefined){return null}const openedArray=Array(children.length).fill(false);for(const index of expandedIndices){openedArray[index]=true;}return openedArray},[children.length,expandedIndices]);const sectionsOpened=controlledSectionsOpened??internalSectionsOpened;const childRefs=Array(children.length).fill(null);const sectionsAreRegions=children.length<=LANDMARK_PROLIFERATION_THRESHOLD;const handleSectionClick=(index,childOnToggle)=>{const newSectionsOpened=allowMultipleExpanded?[...sectionsOpened]:Array(children.length).fill(false);const newOpenedValueAtIndex=!sectionsOpened[index];newSectionsOpened[index]=newOpenedValueAtIndex;if(!isControlled){setInternalSectionsOpened(newSectionsOpened);}childOnToggle?.(newOpenedValueAtIndex);onToggle?.(index,newSectionsOpened.flatMap((isOpened,sectionIndex)=>isOpened?[sectionIndex]:[]));};const handleKeyDown=event=>{const currentlyFocusedHeaderIndex=childRefs.findIndex(ref=>ref.current===document.activeElement);if(currentlyFocusedHeaderIndex===-1){return}switch(event.key){case"ArrowUp":event.preventDefault();const previousSectionIndex=(currentlyFocusedHeaderIndex+children.length-1)%children.length;const previousChildRef=childRefs[previousSectionIndex];previousChildRef.current?.focus();break;case"ArrowDown":event.preventDefault();const nextSectionIndex=(currentlyFocusedHeaderIndex+1)%children.length;const nextChildRef=childRefs[nextSectionIndex];nextChildRef.current?.focus();break;case"Home":event.preventDefault();const firstChildRef=childRefs[0];firstChildRef.current?.focus();break;case"End":event.preventDefault();const lastChildRef=childRefs[children.length-1];lastChildRef.current?.focus();break}};return jsxRuntime.jsx(StyledUl,{id:id,style:[styles$2.wrapper,style],onKeyDown:handleKeyDown,...ariaProps,ref:ref,children:children.map((child,index)=>{const{caretPosition:childCaretPosition,cornerKind:childCornerKind,onToggle:childOnToggle,animated:childAnimated}=child.props;const childRef=React__namespace.createRef();childRefs[index]=childRef;const isFirstChild=index===0;const isLastChild=index===children.length-1;return jsxRuntime.jsx("li",{id:id?`${id}-section-${index}`:undefined,children:React__namespace.cloneElement(child,{animated:childAnimated??animated,caretPosition:childCaretPosition??caretPosition,cornerKind:childCornerKind??cornerKind,expanded:sectionsOpened[index]??false,onToggle:()=>handleSectionClick(index,childOnToggle),isFirstSection:isFirstChild,isLastSection:isLastChild,isRegion:sectionsAreRegions,ref:childRef})},index)})})});const styles$2=aphrodite.StyleSheet.create({wrapper:{boxSizing:"border-box",listStyle:"none",padding:0,width:"100%"}});
 
 function getRoundedValuesForHeader(cornerKind,isFirstSection,isLastSection,expanded){switch(cornerKind){case"rounded-per-section":return {roundedTop:true,roundedBottom:!expanded};case"rounded":return {roundedTop:isFirstSection,roundedBottom:isLastSection&&!expanded};default:return {roundedTop:false,roundedBottom:false}}}
 
-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 HEADING_SELECTOR='h1,h2,h3,h4,h5,h6,[role="heading"]';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 headerContentRef=React__namespace.useRef(null);React__namespace.useEffect(()=>{if(process.env.NODE_ENV==="production"||headerIsString){return}if(headerContentRef.current?.querySelector(HEADING_SELECTOR)){console.warn("AccordionSection's header contains a heading. It is rendered "+"inside a <button> that AccordionSection already wraps in "+"a heading, which is invalid HTML. Set the heading level "+"with the `tag` prop instead, and use "+'`<BodyText tag="span">` with `font.heading.*` tokens for '+"heading-sized text.");}},[header,headerIsString]);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],ref:headerContentRef,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,"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]};
 

package/package.json

@@ -3,7 +3,7 @@
   "description": "Accordion components for Wonder Blocks.",
   "author": "Khan Academy",
   "license": "MIT",
-  "version": "3.1.71",
+  "version": "3.2.0",
   "publishConfig": {
     "access": "public"
   },
@@ -21,11 +21,11 @@
   "types": "dist/index.d.ts",
   "source": "src/index.js",
   "dependencies": {
-    "@khanacademy/wonder-blocks-clickable": "8.2.10",
+    "@khanacademy/wonder-blocks-clickable": "8.3.0",
     "@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.4"
+    "@khanacademy/wonder-blocks-icon": "6.0.2",
+    "@khanacademy/wonder-blocks-tokens": "18.0.0",
+    "@khanacademy/wonder-blocks-typography": "5.0.5"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",