@khanacademy/wonder-blocks-dropdown 10.1.2 → 10.1.3

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @khanacademy/wonder-blocks-dropdown
 
+## 10.1.3
+
+### Patch Changes
+
+- Updated dependencies [dd76e7c]
+- Updated dependencies [dd76e7c]
+    - @khanacademy/wonder-blocks-typography@4.0.0
+    - @khanacademy/wonder-blocks-tokens@10.3.0
+    - @khanacademy/wonder-blocks-announcer@1.0.2
+    - @khanacademy/wonder-blocks-cell@4.1.16
+    - @khanacademy/wonder-blocks-clickable@7.1.4
+    - @khanacademy/wonder-blocks-core@12.3.0
+    - @khanacademy/wonder-blocks-icon@5.1.4
+    - @khanacademy/wonder-blocks-icon-button@10.1.1
+    - @khanacademy/wonder-blocks-layout@3.1.15
+    - @khanacademy/wonder-blocks-modal@7.1.18
+    - @khanacademy/wonder-blocks-pill@3.1.16
+    - @khanacademy/wonder-blocks-search-field@5.1.18
+    - @khanacademy/wonder-blocks-timing@7.0.2
+
 ## 10.1.2
 
 ### Patch Changes

package/dist/es/index.js

@@ -73,7 +73,7 @@ function useMultipleSelection({inputValue,selected,setSelected}){const[focusedMu
 
 const StyledSpan=addStyle("span");function ComboboxLiveRegion({focusedIndex,focusedMultiSelectIndex,labels={closedState:defaultComboboxLabels.closedState,liveRegionCurrentItem:defaultComboboxLabels.liveRegionCurrentItem,liveRegionListboxTotal:defaultComboboxLabels.liveRegionListboxTotal,liveRegionMultipleSelectionTotal:defaultComboboxLabels.liveRegionMultipleSelectionTotal,noItems:defaultComboboxLabels.noItems,selected:defaultComboboxLabels.selected,selectionCleared:defaultComboboxLabels.selectionCleared,unselected:defaultComboboxLabels.unselected},selectedLabels,opened,options,selected,selectionType="single",testId}){const lastSelectedValue=React.useRef(null);const[message,setMessage]=React.useState("");React.useEffect(()=>{if(selected&&selected!==lastSelectedValue?.current){let newMessage="";const lastSelectedLength=lastSelectedValue?.current?.length??0;const selectedLength=selected?.length??0;if(Array.isArray(selected)&&selected.length>0){const currentLabels=selectedLabels.join(", ");const selectedState=selectedLength>lastSelectedLength?labels.selected(currentLabels):labels.unselected(currentLabels);newMessage=selectedState;}else {newMessage=labels.selected(selectedLabels[0]);}setMessage(newMessage);}if(selectionType==="single"&&!selected&&lastSelectedValue.current){setMessage(labels.selectionCleared);}lastSelectedValue.current=selected;if(selectionType==="multiple"&&!opened){setMessage(labels.closedState);}},[labels,labels.closedState,selectedLabels,opened,selected,selectionType]);const focusedElementDescription=React.useMemo(()=>{if(focusedMultiSelectIndex>=0){const label=selectedLabels[focusedMultiSelectIndex];return labels.liveRegionCurrentItem({current:label,focused:true,index:focusedMultiSelectIndex,total:selectedLabels.length})+" "+labels.liveRegionMultipleSelectionTotal(selectedLabels.length)}if(options.length===0){return labels.noItems}if(focusedIndex<0||!options[focusedIndex]){return ""}const currentItemProps=options[focusedIndex].props;const label=getLabel(currentItemProps);const totalResults=options.length;return labels.liveRegionCurrentItem({current:label,disabled:currentItemProps.disabled,focused:false,index:focusedIndex,selected:currentItemProps.selected,total:totalResults})+" "+labels.liveRegionListboxTotal(totalResults)},[focusedIndex,focusedMultiSelectIndex,labels,options,selectedLabels]);return jsx(StyledSpan,{role:"log","aria-live":"polite","aria-atomic":"false","aria-relevant":"additions text",style:styles$3.srOnly,"data-testid":testId?`${testId}-status`:undefined,children:opened?focusedElementDescription:message})}const styles$3=StyleSheet.create({srOnly:{border:0,clip:"rect(0,0,0,0)",height:1,margin:-1,overflow:"hidden",padding:0,position:"absolute",width:1}});
 
-const MultipleSelection=React.memo(function SelectedPills({disabled,focusedMultiSelectIndex,id,labels,onRemove,removeSelectedLabel,selected,testId}){return jsx(View,{role:"group",style:styles$2.pillsWrapper,id:id,children:selected.map((value,index)=>{const label=labels[index];const focused=index===focusedMultiSelectIndex;const uniqueId=id+index;return jsx(Pill,{id:uniqueId,testId:testId?`${testId}-pill-${index}`:undefined,size:"small",style:[styles$2.pill,focused&&styles$2.pillFocused],kind:focused?"info":"neutral","aria-label":removeSelectedLabel(label),tabIndex:-1,onClick:()=>onRemove(value),children:jsxs(Fragment,{children:[label,!disabled&&jsx(PhosphorIcon,{icon:xIcon,size:"small"})]})},uniqueId)})})});const styles$2=StyleSheet.create({pillsWrapper:{flexDirection:"row",flexWrap:"wrap"},pill:{fontSize:font.size.small,justifyContent:"space-between",alignItems:"center",marginBlockStart:spacing.xxxSmall_4,marginInlineEnd:spacing.xxxSmall_4,paddingInlineEnd:spacing.xxxSmall_4},pillFocused:{outline:`1px solid ${semanticColor.focus.outer}`}});
+const MultipleSelection=React.memo(function SelectedPills({disabled,focusedMultiSelectIndex,id,labels,onRemove,removeSelectedLabel,selected,testId}){return jsx(View,{role:"group",style:styles$2.pillsWrapper,id:id,children:selected.map((value,index)=>{const label=labels[index];const focused=index===focusedMultiSelectIndex;const uniqueId=id+index;return jsx(Pill,{id:uniqueId,testId:testId?`${testId}-pill-${index}`:undefined,size:"small",style:[styles$2.pill,focused&&styles$2.pillFocused],kind:focused?"info":"neutral","aria-label":removeSelectedLabel(label),tabIndex:-1,onClick:()=>onRemove(value),children:jsxs(Fragment,{children:[label,!disabled&&jsx(PhosphorIcon,{icon:xIcon,size:"small"})]})},uniqueId)})})});const styles$2=StyleSheet.create({pillsWrapper:{flexDirection:"row",flexWrap:"wrap"},pill:{fontSize:font.body.size.small,justifyContent:"space-between",alignItems:"center",marginBlockStart:spacing.xxxSmall_4,marginInlineEnd:spacing.xxxSmall_4,paddingInlineEnd:spacing.xxxSmall_4},pillFocused:{outline:`1px solid ${semanticColor.focus.outer}`}});
 
 function StandaloneListbox(props){const{children,disabled,id,onChange,selectionType="single",style,tabIndex=0,testId,value,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby}=props;const generatedUniqueId=useId();const uniqueId=id??generatedUniqueId;const{focusedIndex,isListboxFocused,renderList,selected,handleKeyDown,handleKeyUp,handleFocus,handleBlur}=useListbox({children,disabled,id:uniqueId,selectionType,value});React.useEffect(()=>{if(selected&&selected!==value){onChange?.(selected);}},[onChange,selected,value]);return jsx(View,{role:"listbox",id:uniqueId,style:[styles$1.listbox,style,disabled&&styles$1.disabled],tabIndex:tabIndex,testId:testId,"aria-disabled":disabled,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby,"aria-multiselectable":selectionType==="multiple",onKeyDown:handleKeyDown,onKeyUp:handleKeyUp,onFocus:handleFocus,onBlur:handleBlur,"aria-activedescendant":isListboxFocused?renderList[focusedIndex].props.id:undefined,children:renderList})}function Listbox(props){const{children,disabled,id,selectionType="single",style,tabIndex=0,testId,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby}=props;if(tabIndex===0){return jsx(StandaloneListbox,{...props})}return jsx(View,{role:"listbox",id:id,style:[styles$1.listbox,style,disabled&&styles$1.disabled],tabIndex:tabIndex,testId:testId,"aria-disabled":disabled,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby,"aria-multiselectable":selectionType==="multiple",children:children})}const theme$1={listbox:{color:{disabled:{foreground:semanticColor.action.secondary.disabled.foreground}}}};const styles$1=StyleSheet.create({listbox:{outline:"none"},disabled:{color:theme$1.listbox.color.disabled.foreground}});
 

package/dist/index.js

@@ -106,7 +106,7 @@ function useMultipleSelection({inputValue,selected,setSelected}){const[focusedMu
 
 const StyledSpan=wonderBlocksCore.addStyle("span");function ComboboxLiveRegion({focusedIndex,focusedMultiSelectIndex,labels={closedState:defaultComboboxLabels.closedState,liveRegionCurrentItem:defaultComboboxLabels.liveRegionCurrentItem,liveRegionListboxTotal:defaultComboboxLabels.liveRegionListboxTotal,liveRegionMultipleSelectionTotal:defaultComboboxLabels.liveRegionMultipleSelectionTotal,noItems:defaultComboboxLabels.noItems,selected:defaultComboboxLabels.selected,selectionCleared:defaultComboboxLabels.selectionCleared,unselected:defaultComboboxLabels.unselected},selectedLabels,opened,options,selected,selectionType="single",testId}){const lastSelectedValue=React__namespace.useRef(null);const[message,setMessage]=React__namespace.useState("");React__namespace.useEffect(()=>{if(selected&&selected!==lastSelectedValue?.current){let newMessage="";const lastSelectedLength=lastSelectedValue?.current?.length??0;const selectedLength=selected?.length??0;if(Array.isArray(selected)&&selected.length>0){const currentLabels=selectedLabels.join(", ");const selectedState=selectedLength>lastSelectedLength?labels.selected(currentLabels):labels.unselected(currentLabels);newMessage=selectedState;}else {newMessage=labels.selected(selectedLabels[0]);}setMessage(newMessage);}if(selectionType==="single"&&!selected&&lastSelectedValue.current){setMessage(labels.selectionCleared);}lastSelectedValue.current=selected;if(selectionType==="multiple"&&!opened){setMessage(labels.closedState);}},[labels,labels.closedState,selectedLabels,opened,selected,selectionType]);const focusedElementDescription=React__namespace.useMemo(()=>{if(focusedMultiSelectIndex>=0){const label=selectedLabels[focusedMultiSelectIndex];return labels.liveRegionCurrentItem({current:label,focused:true,index:focusedMultiSelectIndex,total:selectedLabels.length})+" "+labels.liveRegionMultipleSelectionTotal(selectedLabels.length)}if(options.length===0){return labels.noItems}if(focusedIndex<0||!options[focusedIndex]){return ""}const currentItemProps=options[focusedIndex].props;const label=getLabel(currentItemProps);const totalResults=options.length;return labels.liveRegionCurrentItem({current:label,disabled:currentItemProps.disabled,focused:false,index:focusedIndex,selected:currentItemProps.selected,total:totalResults})+" "+labels.liveRegionListboxTotal(totalResults)},[focusedIndex,focusedMultiSelectIndex,labels,options,selectedLabels]);return jsxRuntime.jsx(StyledSpan,{role:"log","aria-live":"polite","aria-atomic":"false","aria-relevant":"additions text",style:styles$3.srOnly,"data-testid":testId?`${testId}-status`:undefined,children:opened?focusedElementDescription:message})}const styles$3=aphrodite.StyleSheet.create({srOnly:{border:0,clip:"rect(0,0,0,0)",height:1,margin:-1,overflow:"hidden",padding:0,position:"absolute",width:1}});
 
-const MultipleSelection=React__namespace.memo(function SelectedPills({disabled,focusedMultiSelectIndex,id,labels,onRemove,removeSelectedLabel,selected,testId}){return jsxRuntime.jsx(wonderBlocksCore.View,{role:"group",style:styles$2.pillsWrapper,id:id,children:selected.map((value,index)=>{const label=labels[index];const focused=index===focusedMultiSelectIndex;const uniqueId=id+index;return jsxRuntime.jsx(Pill__default["default"],{id:uniqueId,testId:testId?`${testId}-pill-${index}`:undefined,size:"small",style:[styles$2.pill,focused&&styles$2.pillFocused],kind:focused?"info":"neutral","aria-label":removeSelectedLabel(label),tabIndex:-1,onClick:()=>onRemove(value),children:jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[label,!disabled&&jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{icon:xIcon__default["default"],size:"small"})]})},uniqueId)})})});const styles$2=aphrodite.StyleSheet.create({pillsWrapper:{flexDirection:"row",flexWrap:"wrap"},pill:{fontSize:wonderBlocksTokens.font.size.small,justifyContent:"space-between",alignItems:"center",marginBlockStart:wonderBlocksTokens.spacing.xxxSmall_4,marginInlineEnd:wonderBlocksTokens.spacing.xxxSmall_4,paddingInlineEnd:wonderBlocksTokens.spacing.xxxSmall_4},pillFocused:{outline:`1px solid ${wonderBlocksTokens.semanticColor.focus.outer}`}});
+const MultipleSelection=React__namespace.memo(function SelectedPills({disabled,focusedMultiSelectIndex,id,labels,onRemove,removeSelectedLabel,selected,testId}){return jsxRuntime.jsx(wonderBlocksCore.View,{role:"group",style:styles$2.pillsWrapper,id:id,children:selected.map((value,index)=>{const label=labels[index];const focused=index===focusedMultiSelectIndex;const uniqueId=id+index;return jsxRuntime.jsx(Pill__default["default"],{id:uniqueId,testId:testId?`${testId}-pill-${index}`:undefined,size:"small",style:[styles$2.pill,focused&&styles$2.pillFocused],kind:focused?"info":"neutral","aria-label":removeSelectedLabel(label),tabIndex:-1,onClick:()=>onRemove(value),children:jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[label,!disabled&&jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{icon:xIcon__default["default"],size:"small"})]})},uniqueId)})})});const styles$2=aphrodite.StyleSheet.create({pillsWrapper:{flexDirection:"row",flexWrap:"wrap"},pill:{fontSize:wonderBlocksTokens.font.body.size.small,justifyContent:"space-between",alignItems:"center",marginBlockStart:wonderBlocksTokens.spacing.xxxSmall_4,marginInlineEnd:wonderBlocksTokens.spacing.xxxSmall_4,paddingInlineEnd:wonderBlocksTokens.spacing.xxxSmall_4},pillFocused:{outline:`1px solid ${wonderBlocksTokens.semanticColor.focus.outer}`}});
 
 function StandaloneListbox(props){const{children,disabled,id,onChange,selectionType="single",style,tabIndex=0,testId,value,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby}=props;const generatedUniqueId=React.useId();const uniqueId=id??generatedUniqueId;const{focusedIndex,isListboxFocused,renderList,selected,handleKeyDown,handleKeyUp,handleFocus,handleBlur}=useListbox({children,disabled,id:uniqueId,selectionType,value});React__namespace.useEffect(()=>{if(selected&&selected!==value){onChange?.(selected);}},[onChange,selected,value]);return jsxRuntime.jsx(wonderBlocksCore.View,{role:"listbox",id:uniqueId,style:[styles$1.listbox,style,disabled&&styles$1.disabled],tabIndex:tabIndex,testId:testId,"aria-disabled":disabled,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby,"aria-multiselectable":selectionType==="multiple",onKeyDown:handleKeyDown,onKeyUp:handleKeyUp,onFocus:handleFocus,onBlur:handleBlur,"aria-activedescendant":isListboxFocused?renderList[focusedIndex].props.id:undefined,children:renderList})}function Listbox(props){const{children,disabled,id,selectionType="single",style,tabIndex=0,testId,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby}=props;if(tabIndex===0){return jsxRuntime.jsx(StandaloneListbox,{...props})}return jsxRuntime.jsx(wonderBlocksCore.View,{role:"listbox",id:id,style:[styles$1.listbox,style,disabled&&styles$1.disabled],tabIndex:tabIndex,testId:testId,"aria-disabled":disabled,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby,"aria-multiselectable":selectionType==="multiple",children:children})}const theme$1={listbox:{color:{disabled:{foreground:wonderBlocksTokens.semanticColor.action.secondary.disabled.foreground}}}};const styles$1=aphrodite.StyleSheet.create({listbox:{outline:"none"},disabled:{color:theme$1.listbox.color.disabled.foreground}});
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-dropdown",
-  "version": "10.1.2",
+  "version": "10.1.3",
   "design": "v1",
   "description": "Dropdown variants for Wonder Blocks.",
   "main": "dist/index.js",
@@ -13,18 +13,18 @@
   },
   "dependencies": {
     "@khanacademy/wonder-blocks-announcer": "1.0.2",
-    "@khanacademy/wonder-blocks-cell": "4.1.15",
-    "@khanacademy/wonder-blocks-clickable": "7.1.3",
+    "@khanacademy/wonder-blocks-cell": "4.1.16",
+    "@khanacademy/wonder-blocks-clickable": "7.1.4",
     "@khanacademy/wonder-blocks-core": "12.3.0",
     "@khanacademy/wonder-blocks-icon": "5.1.4",
-    "@khanacademy/wonder-blocks-icon-button": "10.1.0",
-    "@khanacademy/wonder-blocks-layout": "3.1.14",
-    "@khanacademy/wonder-blocks-modal": "7.1.17",
-    "@khanacademy/wonder-blocks-pill": "3.1.15",
-    "@khanacademy/wonder-blocks-search-field": "5.1.17",
+    "@khanacademy/wonder-blocks-icon-button": "10.1.1",
+    "@khanacademy/wonder-blocks-layout": "3.1.15",
+    "@khanacademy/wonder-blocks-modal": "7.1.18",
+    "@khanacademy/wonder-blocks-pill": "3.1.16",
+    "@khanacademy/wonder-blocks-search-field": "5.1.18",
     "@khanacademy/wonder-blocks-timing": "7.0.2",
-    "@khanacademy/wonder-blocks-tokens": "10.2.1",
-    "@khanacademy/wonder-blocks-typography": "3.2.4"
+    "@khanacademy/wonder-blocks-tokens": "10.3.0",
+    "@khanacademy/wonder-blocks-typography": "4.0.0"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",
@@ -39,7 +39,7 @@
     "react-window": "^1.8.11"
   },
   "devDependencies": {
-    "@khanacademy/wb-dev-build-settings": "3.1.0"
+    "@khanacademy/wb-dev-build-settings": "3.2.0"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"