@khanacademy/wonder-blocks-accordion 3.1.72 → 3.2.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @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

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,7 +9,7 @@ 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}}}
 

package/dist/index.js

@@ -36,7 +36,7 @@ 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}}}
 

package/package.json

@@ -3,7 +3,7 @@
   "description": "Accordion components for Wonder Blocks.",
   "author": "Khan Academy",
   "license": "MIT",
-  "version": "3.1.72",
+  "version": "3.2.0",
   "publishConfig": {
     "access": "public"
   },
@@ -21,7 +21,7 @@
   "types": "dist/index.d.ts",
   "source": "src/index.js",
   "dependencies": {
-    "@khanacademy/wonder-blocks-clickable": "8.2.11",
+    "@khanacademy/wonder-blocks-clickable": "8.3.0",
     "@khanacademy/wonder-blocks-core": "12.5.0",
     "@khanacademy/wonder-blocks-icon": "6.0.2",
     "@khanacademy/wonder-blocks-tokens": "18.0.0",