@khanacademy/wonder-blocks-dropdown 10.1.7 → 10.1.9

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @khanacademy/wonder-blocks-dropdown
 
+## 10.1.9
+
+### Patch Changes
+
+- 1ac2ba7: Updates disabled.placeholder styles to use input.disabled.foreground token
+- Updated dependencies [1ac2ba7]
+- Updated dependencies [0cb7a69]
+- Updated dependencies [cbf58b0]
+- Updated dependencies [cbf58b0]
+    - @khanacademy/wonder-blocks-tokens@11.0.0
+    - @khanacademy/wonder-blocks-icon@5.2.2
+    - @khanacademy/wonder-blocks-cell@4.1.21
+    - @khanacademy/wonder-blocks-clickable@7.1.8
+    - @khanacademy/wonder-blocks-icon-button@10.3.2
+    - @khanacademy/wonder-blocks-layout@3.1.19
+    - @khanacademy/wonder-blocks-modal@7.1.24
+    - @khanacademy/wonder-blocks-pill@3.1.21
+    - @khanacademy/wonder-blocks-search-field@5.1.24
+    - @khanacademy/wonder-blocks-typography@4.2.3
+
+## 10.1.8
+
+### Patch Changes
+
+- Updated dependencies [7811eb1]
+    - @khanacademy/wonder-blocks-tokens@10.6.0
+    - @khanacademy/wonder-blocks-cell@4.1.20
+    - @khanacademy/wonder-blocks-clickable@7.1.7
+    - @khanacademy/wonder-blocks-icon@5.2.1
+    - @khanacademy/wonder-blocks-icon-button@10.3.1
+    - @khanacademy/wonder-blocks-layout@3.1.18
+    - @khanacademy/wonder-blocks-modal@7.1.23
+    - @khanacademy/wonder-blocks-pill@3.1.20
+    - @khanacademy/wonder-blocks-search-field@5.1.23
+    - @khanacademy/wonder-blocks-typography@4.2.2
+
 ## 10.1.7
 
 ### Patch Changes

package/dist/es/index.js

@@ -57,7 +57,7 @@ const StyledButton$1=addStyle("button");class ActionMenuOpenerCore extends React
 
 class ActionMenu extends React.Component{static getDerivedStateFromProps(props,state){return {opened:typeof props.opened==="boolean"?props.opened:state.opened}}getMenuItems(){const{children,selectedValues}=this.props;const allChildren=React.Children.toArray(children).filter(Boolean);const isOptionItemIncluded=allChildren.some(item=>OptionItem.isClassOf(item));return allChildren.map(item=>{const{value,disabled}=item.props;const itemObject={component:item,focusable:ActionItem.isClassOf(item)||OptionItem.isClassOf(item)?!disabled:false,populatedProps:{}};if(ActionItem.isClassOf(item)){return {...itemObject,populatedProps:{indent:isOptionItemIncluded,onClick:this.handleItemSelected}}}else if(OptionItem.isClassOf(item)){const selected=selectedValues?selectedValues.includes(value):false;return {...itemObject,populatedProps:{onToggle:this.handleOptionSelected,selected,variant:"check",role:"menuitemcheckbox","aria-checked":selected,"aria-selected":undefined}}}else {return itemObject}})}renderOpener(numItems,dropdownId){const{disabled,menuText,opener,testId,id}=this.props;return jsx(Id,{id:id,children:uniqueOpenerId=>jsx(DropdownOpener,{id:uniqueOpenerId,"aria-controls":dropdownId,"aria-haspopup":"menu",onClick:this.handleClick,disabled:numItems===0||disabled,text:menuText,ref:this.handleOpenerRef,testId:opener?undefined:testId,opened:this.state.opened,role:"button",children:opener?opener:openerProps=>{const{text,opened,...eventState}=openerProps;return jsx(ActionMenuOpenerCore,{...eventState,disabled:disabled,opened:!!opened,testId:testId,children:menuText})}})})}render(){const{alignment,dropdownStyle,style,className,dropdownId}=this.props;const items=this.getMenuItems();return jsx(Id,{id:dropdownId,children:uniqueDropdownId=>jsx(DropdownCore$1,{id:uniqueDropdownId,role:"menu",style:style,className:className,opener:this.renderOpener(items.length,uniqueDropdownId),alignment:alignment,open:this.state.opened,items:items,openerElement:this.openerElement,onOpenChanged:this.handleOpenChanged,dropdownStyle:[styles$5.menuTopSpace,dropdownStyle]})})}constructor(...args){super(...args),this.state={opened:false},this.handleItemSelected=()=>{this.handleOpenChanged(false);if(this.openerElement){this.openerElement.focus();}},this.handleOpenChanged=opened=>{this.setState({opened});if(this.props.onToggle){this.props.onToggle(opened);}},this.handleOptionSelected=selectedValue=>{const{onChange,selectedValues}=this.props;if(!onChange||!selectedValues){return}if(selectedValues.includes(selectedValue)){const index=selectedValues.indexOf(selectedValue);const updatedSelection=[...selectedValues.slice(0,index),...selectedValues.slice(index+1)];onChange(updatedSelection);}else {onChange([...selectedValues,selectedValue]);}this.handleItemSelected();},this.handleOpenerRef=node=>{this.openerElement=ReactDOM.findDOMNode(node);},this.handleClick=e=>{this.handleOpenChanged(!this.state.opened);};}}ActionMenu.defaultProps={alignment:"left",disabled:false};const styles$5=StyleSheet.create({caret:{marginLeft:4},opener:{whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},menuTopSpace:{top:-4}});
 
-const StyledButton=addStyle("button");class SelectOpener extends React.Component{render(){const{children,disabled,error,id,isPlaceholder,open,testId,"aria-label":ariaLabel,"aria-required":ariaRequired,"aria-controls":ariaControls,onBlur,onOpenChanged,...sharedProps}=this.props;const stateStyles=_generateStyles(isPlaceholder,error);const iconColor=disabled?semanticColor.icon.disabled:semanticColor.icon.primary;const style=[styles$4.shared,stateStyles.default,disabled&&stateStyles.disabled,!disabled&&this.state.pressed&&stateStyles.press];return jsxs(StyledButton,{...sharedProps,"aria-disabled":disabled,"aria-expanded":open?"true":"false","aria-invalid":error,"aria-label":ariaLabel??undefined,"aria-required":ariaRequired,"aria-haspopup":"listbox","aria-controls":ariaControls,"data-testid":testId,id:id,role:"combobox",type:"button",style:style,onClick:!disabled?this.handleClick:undefined,onKeyDown:!disabled?this.handleKeyDown:undefined,onKeyUp:!disabled?this.handleKeyUp:undefined,onBlur:onBlur,children:[jsx(LabelMedium,{style:styles$4.text,children:children||jsx("span",{"aria-hidden":"true",children:" "})}),jsx(PhosphorIcon,{icon:caretDownIcon,color:iconColor,size:"small",style:styles$4.caret,"aria-hidden":"true"})]})}constructor(props){super(props),this.handleClick=e=>{const{open}=this.props;this.props.onOpenChanged(!open);},this.handleKeyDown=e=>{const keyName=e.key;if(keyName===keys.enter||keyName===keys.space){this.setState({pressed:true});e.preventDefault();}},this.handleKeyUp=e=>{const keyName=e.key;if(keyName===keys.enter||keyName===keys.space){this.setState({pressed:false});this.handleClick(e);}};this.state={pressed:false};}}SelectOpener.defaultProps={disabled:false,error:false,isPlaceholder:false};const styles$4=StyleSheet.create({shared:{position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"space-between",color:semanticColor.text.primary,height:DROPDOWN_ITEM_HEIGHT,paddingLeft:spacing.medium_16,paddingRight:spacing.small_12,borderWidth:0,borderRadius:border.radius.radius_040,borderStyle:"solid",outline:"none",textDecoration:"none",boxSizing:"border-box",whiteSpace:"nowrap",touchAction:"manipulation"},text:{marginRight:spacing.xSmall_8,whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},caret:{minWidth:16}});const stateStyles={};const _generateStyles=(placeholder,error)=>{const styleKey=`${placeholder}-${error}`;if(stateStyles[styleKey]){return stateStyles[styleKey]}const actionType=error?"destructive":"progressive";const action=semanticColor.action.secondary[actionType];const sharedOutlineStyling={outlineOffset:`calc(${border.width.medium} * -1)`,outlineStyle:"solid",outlineWidth:border.width.medium};const focusStyling={...sharedOutlineStyling,outlineColor:semanticColor.focus.outer};const hoverStyling={...sharedOutlineStyling,outlineColor:action.hover.border};const pressStyling={background:action.press.background,color:placeholder?error?semanticColor.text.secondary:semanticColor.action.secondary.progressive.press.foreground:semanticColor.text.primary,outlineColor:action.press.border,...sharedOutlineStyling};const currentState=error?semanticColor.input.error:semanticColor.input.default;const newStyles={default:{background:currentState.background,borderColor:currentState.border,borderWidth:border.width.thin,color:placeholder?semanticColor.text.secondary:currentState.foreground,":hover:not([aria-disabled=true])":hoverStyling,["@media not (hover: hover)"]:{":hover:not([aria-disabled=true])":{borderColor:currentState.border,borderWidth:border.width.thin,paddingLeft:spacing.medium_16,paddingRight:spacing.small_12}},":focus-visible:not([aria-disabled=true])":focusStyling,":active:not([aria-disabled=true])":pressStyling},disabled:{background:semanticColor.input.disabled.background,borderColor:semanticColor.input.disabled.border,color:semanticColor.input.disabled.foreground,cursor:"not-allowed",":focus-visible":{outlineColor:semanticColor.focus.outer,...sharedOutlineStyling}},press:pressStyling};stateStyles[styleKey]=StyleSheet.create(newStyles);return stateStyles[styleKey]};
+const StyledButton=addStyle("button");class SelectOpener extends React.Component{render(){const{children,disabled,error,id,isPlaceholder,open,testId,"aria-label":ariaLabel,"aria-required":ariaRequired,"aria-controls":ariaControls,onBlur,onOpenChanged,...sharedProps}=this.props;const stateStyles=_generateStyles(isPlaceholder,error);const iconColor=disabled?semanticColor.icon.disabled:semanticColor.icon.primary;const style=[styles$4.shared,stateStyles.default,disabled&&stateStyles.disabled,!disabled&&this.state.pressed&&stateStyles.press];return jsxs(StyledButton,{...sharedProps,"aria-disabled":disabled,"aria-expanded":open?"true":"false","aria-invalid":error,"aria-label":ariaLabel??undefined,"aria-required":ariaRequired,"aria-haspopup":"listbox","aria-controls":ariaControls,"data-testid":testId,id:id,role:"combobox",type:"button",style:style,onClick:!disabled?this.handleClick:undefined,onKeyDown:!disabled?this.handleKeyDown:undefined,onKeyUp:!disabled?this.handleKeyUp:undefined,onBlur:onBlur,children:[jsx(LabelMedium,{style:styles$4.text,children:children||jsx("span",{"aria-hidden":"true",children:" "})}),jsx(PhosphorIcon,{icon:caretDownIcon,color:iconColor,size:"small",style:styles$4.caret,"aria-hidden":"true"})]})}constructor(props){super(props),this.handleClick=e=>{const{open}=this.props;this.props.onOpenChanged(!open);},this.handleKeyDown=e=>{const keyName=e.key;if(keyName===keys.enter||keyName===keys.space){this.setState({pressed:true});e.preventDefault();}},this.handleKeyUp=e=>{const keyName=e.key;if(keyName===keys.enter||keyName===keys.space){this.setState({pressed:false});this.handleClick(e);}};this.state={pressed:false};}}SelectOpener.defaultProps={disabled:false,error:false,isPlaceholder:false};const styles$4=StyleSheet.create({shared:{position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"space-between",color:semanticColor.text.primary,height:DROPDOWN_ITEM_HEIGHT,paddingLeft:spacing.medium_16,paddingRight:spacing.small_12,borderWidth:0,borderRadius:border.radius.radius_040,borderStyle:"solid",outline:"none",textDecoration:"none",boxSizing:"border-box",whiteSpace:"nowrap",touchAction:"manipulation"},text:{marginRight:spacing.xSmall_8,whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},caret:{minWidth:16}});const stateStyles={};const _generateStyles=(placeholder,error)=>{const styleKey=`${placeholder}-${error}`;if(stateStyles[styleKey]){return stateStyles[styleKey]}const actionType=error?"destructive":"progressive";const action=semanticColor.action.secondary[actionType];const sharedOutlineStyling={outlineOffset:`calc(${border.width.medium} * -1)`,outlineStyle:"solid",outlineWidth:border.width.medium};const focusStyling={...sharedOutlineStyling,outlineColor:semanticColor.focus.outer};const hoverStyling={...sharedOutlineStyling,outlineColor:action.hover.border};const pressStyling={background:action.press.background,color:placeholder?error?semanticColor.text.secondary:semanticColor.action.secondary.progressive.press.foreground:semanticColor.text.primary,outlineColor:action.press.border,...sharedOutlineStyling};const currentState=error?semanticColor.input.error:semanticColor.input.default;const newStyles={default:{background:currentState.background,borderColor:currentState.border,borderWidth:border.width.thin,color:placeholder?semanticColor.text.secondary:currentState.foreground,":hover:not([aria-disabled=true])":hoverStyling,["@media not (hover: hover)"]:{":hover:not([aria-disabled=true])":{borderColor:currentState.border,borderWidth:border.width.thin,paddingLeft:spacing.medium_16,paddingRight:spacing.small_12}},":focus-visible:not([aria-disabled=true])":focusStyling,":active:not([aria-disabled=true])":pressStyling},disabled:{background:semanticColor.input.disabled.background,borderColor:semanticColor.input.disabled.border,color:semanticColor.input.disabled.placeholder,cursor:"not-allowed",":focus-visible":{outlineColor:semanticColor.focus.outer,...sharedOutlineStyling}},press:pressStyling};stateStyles[styleKey]=StyleSheet.create(newStyles);return stateStyles[styleKey]};
 
 const defaultErrorMessage="This field is required.";function hasValue(value){return value?value.length>0:false}function useSelectValidation({value,disabled=false,validate,onValidate,required,open}){const[errorMessage,setErrorMessage]=React.useState(()=>validate&&hasValue(value)&&!disabled&&validate(value)||null);const handleValidation=React.useCallback(newValue=>{if(disabled){return}if(validate){const error=newValue!==undefined&&validate(newValue)||null;setErrorMessage(error);if(onValidate){onValidate(error);}if(error){return}}if(required){const requiredString=typeof required==="string"?required:defaultErrorMessage;const error=hasValue(newValue)?null:requiredString;setErrorMessage(error);if(onValidate){onValidate(error);}}},[disabled,validate,setErrorMessage,onValidate,required]);useOnMountEffect(()=>{if(hasValue(value)){handleValidation(value);}});function onOpenerBlurValidation(){if(!open&&required&&!hasValue(value)){handleValidation(value);}}const onDropdownClosedValidation=()=>{if(required&&!hasValue(value)){handleValidation(value);}};const onSelectionValidation=newValue=>{handleValidation(newValue);};const onSelectedValuesChangeValidation=()=>{setErrorMessage(null);if(onValidate){onValidate(null);}};return {errorMessage,onOpenerBlurValidation,onDropdownClosedValidation,onSelectionValidation,onSelectedValuesChangeValidation}}
 

package/dist/index.js

@@ -90,7 +90,7 @@ const StyledButton$1=wonderBlocksCore.addStyle("button");class ActionMenuOpenerC
 
 class ActionMenu extends React__namespace.Component{static getDerivedStateFromProps(props,state){return {opened:typeof props.opened==="boolean"?props.opened:state.opened}}getMenuItems(){const{children,selectedValues}=this.props;const allChildren=React__namespace.Children.toArray(children).filter(Boolean);const isOptionItemIncluded=allChildren.some(item=>OptionItem.isClassOf(item));return allChildren.map(item=>{const{value,disabled}=item.props;const itemObject={component:item,focusable:ActionItem.isClassOf(item)||OptionItem.isClassOf(item)?!disabled:false,populatedProps:{}};if(ActionItem.isClassOf(item)){return {...itemObject,populatedProps:{indent:isOptionItemIncluded,onClick:this.handleItemSelected}}}else if(OptionItem.isClassOf(item)){const selected=selectedValues?selectedValues.includes(value):false;return {...itemObject,populatedProps:{onToggle:this.handleOptionSelected,selected,variant:"check",role:"menuitemcheckbox","aria-checked":selected,"aria-selected":undefined}}}else {return itemObject}})}renderOpener(numItems,dropdownId){const{disabled,menuText,opener,testId,id}=this.props;return jsxRuntime.jsx(wonderBlocksCore.Id,{id:id,children:uniqueOpenerId=>jsxRuntime.jsx(DropdownOpener,{id:uniqueOpenerId,"aria-controls":dropdownId,"aria-haspopup":"menu",onClick:this.handleClick,disabled:numItems===0||disabled,text:menuText,ref:this.handleOpenerRef,testId:opener?undefined:testId,opened:this.state.opened,role:"button",children:opener?opener:openerProps=>{const{text,opened,...eventState}=openerProps;return jsxRuntime.jsx(ActionMenuOpenerCore,{...eventState,disabled:disabled,opened:!!opened,testId:testId,children:menuText})}})})}render(){const{alignment,dropdownStyle,style,className,dropdownId}=this.props;const items=this.getMenuItems();return jsxRuntime.jsx(wonderBlocksCore.Id,{id:dropdownId,children:uniqueDropdownId=>jsxRuntime.jsx(DropdownCore$1,{id:uniqueDropdownId,role:"menu",style:style,className:className,opener:this.renderOpener(items.length,uniqueDropdownId),alignment:alignment,open:this.state.opened,items:items,openerElement:this.openerElement,onOpenChanged:this.handleOpenChanged,dropdownStyle:[styles$5.menuTopSpace,dropdownStyle]})})}constructor(...args){super(...args),this.state={opened:false},this.handleItemSelected=()=>{this.handleOpenChanged(false);if(this.openerElement){this.openerElement.focus();}},this.handleOpenChanged=opened=>{this.setState({opened});if(this.props.onToggle){this.props.onToggle(opened);}},this.handleOptionSelected=selectedValue=>{const{onChange,selectedValues}=this.props;if(!onChange||!selectedValues){return}if(selectedValues.includes(selectedValue)){const index=selectedValues.indexOf(selectedValue);const updatedSelection=[...selectedValues.slice(0,index),...selectedValues.slice(index+1)];onChange(updatedSelection);}else {onChange([...selectedValues,selectedValue]);}this.handleItemSelected();},this.handleOpenerRef=node=>{this.openerElement=ReactDOM__namespace.findDOMNode(node);},this.handleClick=e=>{this.handleOpenChanged(!this.state.opened);};}}ActionMenu.defaultProps={alignment:"left",disabled:false};const styles$5=aphrodite.StyleSheet.create({caret:{marginLeft:4},opener:{whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},menuTopSpace:{top:-4}});
 
-const StyledButton=wonderBlocksCore.addStyle("button");class SelectOpener extends React__namespace.Component{render(){const{children,disabled,error,id,isPlaceholder,open,testId,"aria-label":ariaLabel,"aria-required":ariaRequired,"aria-controls":ariaControls,onBlur,onOpenChanged,...sharedProps}=this.props;const stateStyles=_generateStyles(isPlaceholder,error);const iconColor=disabled?wonderBlocksTokens.semanticColor.icon.disabled:wonderBlocksTokens.semanticColor.icon.primary;const style=[styles$4.shared,stateStyles.default,disabled&&stateStyles.disabled,!disabled&&this.state.pressed&&stateStyles.press];return jsxRuntime.jsxs(StyledButton,{...sharedProps,"aria-disabled":disabled,"aria-expanded":open?"true":"false","aria-invalid":error,"aria-label":ariaLabel??undefined,"aria-required":ariaRequired,"aria-haspopup":"listbox","aria-controls":ariaControls,"data-testid":testId,id:id,role:"combobox",type:"button",style:style,onClick:!disabled?this.handleClick:undefined,onKeyDown:!disabled?this.handleKeyDown:undefined,onKeyUp:!disabled?this.handleKeyUp:undefined,onBlur:onBlur,children:[jsxRuntime.jsx(wonderBlocksTypography.LabelMedium,{style:styles$4.text,children:children||jsxRuntime.jsx("span",{"aria-hidden":"true",children:" "})}),jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{icon:caretDownIcon__default["default"],color:iconColor,size:"small",style:styles$4.caret,"aria-hidden":"true"})]})}constructor(props){super(props),this.handleClick=e=>{const{open}=this.props;this.props.onOpenChanged(!open);},this.handleKeyDown=e=>{const keyName=e.key;if(keyName===wonderBlocksCore.keys.enter||keyName===wonderBlocksCore.keys.space){this.setState({pressed:true});e.preventDefault();}},this.handleKeyUp=e=>{const keyName=e.key;if(keyName===wonderBlocksCore.keys.enter||keyName===wonderBlocksCore.keys.space){this.setState({pressed:false});this.handleClick(e);}};this.state={pressed:false};}}SelectOpener.defaultProps={disabled:false,error:false,isPlaceholder:false};const styles$4=aphrodite.StyleSheet.create({shared:{position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"space-between",color:wonderBlocksTokens.semanticColor.text.primary,height:DROPDOWN_ITEM_HEIGHT,paddingLeft:wonderBlocksTokens.spacing.medium_16,paddingRight:wonderBlocksTokens.spacing.small_12,borderWidth:0,borderRadius:wonderBlocksTokens.border.radius.radius_040,borderStyle:"solid",outline:"none",textDecoration:"none",boxSizing:"border-box",whiteSpace:"nowrap",touchAction:"manipulation"},text:{marginRight:wonderBlocksTokens.spacing.xSmall_8,whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},caret:{minWidth:16}});const stateStyles={};const _generateStyles=(placeholder,error)=>{const styleKey=`${placeholder}-${error}`;if(stateStyles[styleKey]){return stateStyles[styleKey]}const actionType=error?"destructive":"progressive";const action=wonderBlocksTokens.semanticColor.action.secondary[actionType];const sharedOutlineStyling={outlineOffset:`calc(${wonderBlocksTokens.border.width.medium} * -1)`,outlineStyle:"solid",outlineWidth:wonderBlocksTokens.border.width.medium};const focusStyling={...sharedOutlineStyling,outlineColor:wonderBlocksTokens.semanticColor.focus.outer};const hoverStyling={...sharedOutlineStyling,outlineColor:action.hover.border};const pressStyling={background:action.press.background,color:placeholder?error?wonderBlocksTokens.semanticColor.text.secondary:wonderBlocksTokens.semanticColor.action.secondary.progressive.press.foreground:wonderBlocksTokens.semanticColor.text.primary,outlineColor:action.press.border,...sharedOutlineStyling};const currentState=error?wonderBlocksTokens.semanticColor.input.error:wonderBlocksTokens.semanticColor.input.default;const newStyles={default:{background:currentState.background,borderColor:currentState.border,borderWidth:wonderBlocksTokens.border.width.thin,color:placeholder?wonderBlocksTokens.semanticColor.text.secondary:currentState.foreground,":hover:not([aria-disabled=true])":hoverStyling,["@media not (hover: hover)"]:{":hover:not([aria-disabled=true])":{borderColor:currentState.border,borderWidth:wonderBlocksTokens.border.width.thin,paddingLeft:wonderBlocksTokens.spacing.medium_16,paddingRight:wonderBlocksTokens.spacing.small_12}},":focus-visible:not([aria-disabled=true])":focusStyling,":active:not([aria-disabled=true])":pressStyling},disabled:{background:wonderBlocksTokens.semanticColor.input.disabled.background,borderColor:wonderBlocksTokens.semanticColor.input.disabled.border,color:wonderBlocksTokens.semanticColor.input.disabled.foreground,cursor:"not-allowed",":focus-visible":{outlineColor:wonderBlocksTokens.semanticColor.focus.outer,...sharedOutlineStyling}},press:pressStyling};stateStyles[styleKey]=aphrodite.StyleSheet.create(newStyles);return stateStyles[styleKey]};
+const StyledButton=wonderBlocksCore.addStyle("button");class SelectOpener extends React__namespace.Component{render(){const{children,disabled,error,id,isPlaceholder,open,testId,"aria-label":ariaLabel,"aria-required":ariaRequired,"aria-controls":ariaControls,onBlur,onOpenChanged,...sharedProps}=this.props;const stateStyles=_generateStyles(isPlaceholder,error);const iconColor=disabled?wonderBlocksTokens.semanticColor.icon.disabled:wonderBlocksTokens.semanticColor.icon.primary;const style=[styles$4.shared,stateStyles.default,disabled&&stateStyles.disabled,!disabled&&this.state.pressed&&stateStyles.press];return jsxRuntime.jsxs(StyledButton,{...sharedProps,"aria-disabled":disabled,"aria-expanded":open?"true":"false","aria-invalid":error,"aria-label":ariaLabel??undefined,"aria-required":ariaRequired,"aria-haspopup":"listbox","aria-controls":ariaControls,"data-testid":testId,id:id,role:"combobox",type:"button",style:style,onClick:!disabled?this.handleClick:undefined,onKeyDown:!disabled?this.handleKeyDown:undefined,onKeyUp:!disabled?this.handleKeyUp:undefined,onBlur:onBlur,children:[jsxRuntime.jsx(wonderBlocksTypography.LabelMedium,{style:styles$4.text,children:children||jsxRuntime.jsx("span",{"aria-hidden":"true",children:" "})}),jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{icon:caretDownIcon__default["default"],color:iconColor,size:"small",style:styles$4.caret,"aria-hidden":"true"})]})}constructor(props){super(props),this.handleClick=e=>{const{open}=this.props;this.props.onOpenChanged(!open);},this.handleKeyDown=e=>{const keyName=e.key;if(keyName===wonderBlocksCore.keys.enter||keyName===wonderBlocksCore.keys.space){this.setState({pressed:true});e.preventDefault();}},this.handleKeyUp=e=>{const keyName=e.key;if(keyName===wonderBlocksCore.keys.enter||keyName===wonderBlocksCore.keys.space){this.setState({pressed:false});this.handleClick(e);}};this.state={pressed:false};}}SelectOpener.defaultProps={disabled:false,error:false,isPlaceholder:false};const styles$4=aphrodite.StyleSheet.create({shared:{position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"space-between",color:wonderBlocksTokens.semanticColor.text.primary,height:DROPDOWN_ITEM_HEIGHT,paddingLeft:wonderBlocksTokens.spacing.medium_16,paddingRight:wonderBlocksTokens.spacing.small_12,borderWidth:0,borderRadius:wonderBlocksTokens.border.radius.radius_040,borderStyle:"solid",outline:"none",textDecoration:"none",boxSizing:"border-box",whiteSpace:"nowrap",touchAction:"manipulation"},text:{marginRight:wonderBlocksTokens.spacing.xSmall_8,whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},caret:{minWidth:16}});const stateStyles={};const _generateStyles=(placeholder,error)=>{const styleKey=`${placeholder}-${error}`;if(stateStyles[styleKey]){return stateStyles[styleKey]}const actionType=error?"destructive":"progressive";const action=wonderBlocksTokens.semanticColor.action.secondary[actionType];const sharedOutlineStyling={outlineOffset:`calc(${wonderBlocksTokens.border.width.medium} * -1)`,outlineStyle:"solid",outlineWidth:wonderBlocksTokens.border.width.medium};const focusStyling={...sharedOutlineStyling,outlineColor:wonderBlocksTokens.semanticColor.focus.outer};const hoverStyling={...sharedOutlineStyling,outlineColor:action.hover.border};const pressStyling={background:action.press.background,color:placeholder?error?wonderBlocksTokens.semanticColor.text.secondary:wonderBlocksTokens.semanticColor.action.secondary.progressive.press.foreground:wonderBlocksTokens.semanticColor.text.primary,outlineColor:action.press.border,...sharedOutlineStyling};const currentState=error?wonderBlocksTokens.semanticColor.input.error:wonderBlocksTokens.semanticColor.input.default;const newStyles={default:{background:currentState.background,borderColor:currentState.border,borderWidth:wonderBlocksTokens.border.width.thin,color:placeholder?wonderBlocksTokens.semanticColor.text.secondary:currentState.foreground,":hover:not([aria-disabled=true])":hoverStyling,["@media not (hover: hover)"]:{":hover:not([aria-disabled=true])":{borderColor:currentState.border,borderWidth:wonderBlocksTokens.border.width.thin,paddingLeft:wonderBlocksTokens.spacing.medium_16,paddingRight:wonderBlocksTokens.spacing.small_12}},":focus-visible:not([aria-disabled=true])":focusStyling,":active:not([aria-disabled=true])":pressStyling},disabled:{background:wonderBlocksTokens.semanticColor.input.disabled.background,borderColor:wonderBlocksTokens.semanticColor.input.disabled.border,color:wonderBlocksTokens.semanticColor.input.disabled.placeholder,cursor:"not-allowed",":focus-visible":{outlineColor:wonderBlocksTokens.semanticColor.focus.outer,...sharedOutlineStyling}},press:pressStyling};stateStyles[styleKey]=aphrodite.StyleSheet.create(newStyles);return stateStyles[styleKey]};
 
 const defaultErrorMessage="This field is required.";function hasValue(value){return value?value.length>0:false}function useSelectValidation({value,disabled=false,validate,onValidate,required,open}){const[errorMessage,setErrorMessage]=React__namespace.useState(()=>validate&&hasValue(value)&&!disabled&&validate(value)||null);const handleValidation=React__namespace.useCallback(newValue=>{if(disabled){return}if(validate){const error=newValue!==undefined&&validate(newValue)||null;setErrorMessage(error);if(onValidate){onValidate(error);}if(error){return}}if(required){const requiredString=typeof required==="string"?required:defaultErrorMessage;const error=hasValue(newValue)?null:requiredString;setErrorMessage(error);if(onValidate){onValidate(error);}}},[disabled,validate,setErrorMessage,onValidate,required]);wonderBlocksCore.useOnMountEffect(()=>{if(hasValue(value)){handleValidation(value);}});function onOpenerBlurValidation(){if(!open&&required&&!hasValue(value)){handleValidation(value);}}const onDropdownClosedValidation=()=>{if(required&&!hasValue(value)){handleValidation(value);}};const onSelectionValidation=newValue=>{handleValidation(newValue);};const onSelectedValuesChangeValidation=()=>{setErrorMessage(null);if(onValidate){onValidate(null);}};return {errorMessage,onOpenerBlurValidation,onDropdownClosedValidation,onSelectionValidation,onSelectedValuesChangeValidation}}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-dropdown",
-  "version": "10.1.7",
+  "version": "10.1.9",
   "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.19",
-    "@khanacademy/wonder-blocks-clickable": "7.1.6",
+    "@khanacademy/wonder-blocks-cell": "4.1.21",
+    "@khanacademy/wonder-blocks-clickable": "7.1.8",
     "@khanacademy/wonder-blocks-core": "12.3.0",
-    "@khanacademy/wonder-blocks-icon": "5.2.0",
-    "@khanacademy/wonder-blocks-icon-button": "10.3.0",
-    "@khanacademy/wonder-blocks-layout": "3.1.17",
-    "@khanacademy/wonder-blocks-modal": "7.1.22",
-    "@khanacademy/wonder-blocks-pill": "3.1.19",
-    "@khanacademy/wonder-blocks-search-field": "5.1.22",
+    "@khanacademy/wonder-blocks-icon": "5.2.2",
+    "@khanacademy/wonder-blocks-icon-button": "10.3.2",
+    "@khanacademy/wonder-blocks-layout": "3.1.19",
+    "@khanacademy/wonder-blocks-modal": "7.1.24",
+    "@khanacademy/wonder-blocks-pill": "3.1.21",
+    "@khanacademy/wonder-blocks-search-field": "5.1.24",
     "@khanacademy/wonder-blocks-timing": "7.0.2",
-    "@khanacademy/wonder-blocks-tokens": "10.5.0",
-    "@khanacademy/wonder-blocks-typography": "4.2.1"
+    "@khanacademy/wonder-blocks-tokens": "11.0.0",
+    "@khanacademy/wonder-blocks-typography": "4.2.3"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",