@khanacademy/wonder-blocks-dropdown 10.2.0 → 10.2.1

package/.turbo/turbo-build$colon$css.log

@@ -1,5 +1,5 @@
 
-> @khanacademy/wonder-blocks-dropdown@10.2.0 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-dropdown
+> @khanacademy/wonder-blocks-dropdown@10.2.1 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-dropdown
 > pnpm exec wonder-blocks-tokens .
 
 CSS variables generated successfully in: /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-dropdown/dist/css

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/wonder-blocks-dropdown
 
+## 10.2.1
+
+### Patch Changes
+
+- e926edc: Updates dropdown option item labels to use div/span instead of p to avoid nesting issues
+
 ## 10.2.0
 
 ### Minor Changes

package/dist/es/index.js

@@ -33,13 +33,13 @@ var themeDefault = {listbox:{border:{radius:border.radius.radius_040},layout:{pa
 
 var theme$3 = mapValuesToCssVars(themeDefault,"--wb-c-dropdown-");
 
-class ActionItem extends React.Component{static isClassOf(instance){return instance&&instance.type&&instance.type.__IS_ACTION_ITEM__}render(){const{disabled,horizontalRule,href,target,indent,label,lang,leftAccessory,rightAccessory,onClick,role,style,testId,active}=this.props;const defaultStyle=[styles$c.wrapper,style];const labelComponent=typeof label==="string"?jsx(BodyText,{lang:lang,style:styles$c.label,children:label}):React.cloneElement(label,{lang,style:styles$c.label,...label.props});return jsx(CompactCell,{disabled:disabled,horizontalRule:horizontalRule,leftAccessory:leftAccessory,rightAccessory:rightAccessory,style:[defaultStyle,styles$c.shared,indent&&styles$c.indent],role:role,testId:testId,title:labelComponent,href:href,target:target,onClick:onClick,active:active})}}ActionItem.defaultProps={disabled:false,horizontalRule:"none",indent:false,role:"menuitem"};ActionItem.__IS_ACTION_ITEM__=true;const styles$c=StyleSheet.create({wrapper:{minHeight:DROPDOWN_ITEM_HEIGHT,touchAction:"manipulation",":focus":{borderRadius:theme$3.item.border.radius.default,outline:focusStyles.focus[":focus-visible"].outline,outlineOffset:`calc(${border.width.medium} * -1)`,boxShadow:`inset 0 0 0 calc(${border.width.medium}*2) ${semanticColor.focus.inner}`,[":after"]:{content:"unset"}}},shared:{minHeight:DROPDOWN_ITEM_HEIGHT,paddingBlock:theme$3.item.layout.padding.block},label:{fontWeight:theme$3.item.font.weight,lineHeight:sizing.size_200,whiteSpace:"nowrap",userSelect:"none"},indent:{paddingInlineStart:sizing.size_320}});
+class ActionItem extends React.Component{static isClassOf(instance){return instance&&instance.type&&instance.type.__IS_ACTION_ITEM__}render(){const{disabled,horizontalRule,href,target,indent,label,lang,leftAccessory,rightAccessory,onClick,role,style,testId,active}=this.props;const defaultStyle=[styles$c.wrapper,style];const labelComponent=typeof label==="string"?jsx(BodyText,{tag:"div",lang:lang,style:styles$c.label,children:label}):React.cloneElement(label,{lang,style:styles$c.label,...label.props});return jsx(CompactCell,{disabled:disabled,horizontalRule:horizontalRule,leftAccessory:leftAccessory,rightAccessory:rightAccessory,style:[defaultStyle,styles$c.shared,indent&&styles$c.indent],role:role,testId:testId,title:labelComponent,href:href,target:target,onClick:onClick,active:active})}}ActionItem.defaultProps={disabled:false,horizontalRule:"none",indent:false,role:"menuitem"};ActionItem.__IS_ACTION_ITEM__=true;const styles$c=StyleSheet.create({wrapper:{minHeight:DROPDOWN_ITEM_HEIGHT,touchAction:"manipulation",":focus":{borderRadius:theme$3.item.border.radius.default,outline:focusStyles.focus[":focus-visible"].outline,outlineOffset:`calc(${border.width.medium} * -1)`,boxShadow:`inset 0 0 0 calc(${border.width.medium}*2) ${semanticColor.focus.inner}`,[":after"]:{content:"unset"}}},shared:{minHeight:DROPDOWN_ITEM_HEIGHT,paddingBlock:theme$3.item.layout.padding.block},label:{fontWeight:theme$3.item.font.weight,lineHeight:sizing.size_200,whiteSpace:"nowrap",userSelect:"none"},indent:{paddingInlineStart:sizing.size_320}});
 
 const Check=function(props){const{selected,disabled}=props;const iconColor=disabled?semanticColor.core.foreground.disabled.strong:semanticColor.core.foreground.instructive.default;return jsx(PhosphorIcon,{color:iconColor,icon:checkIcon,size:"small",style:[styles$b.bounds,!selected&&styles$b.hide]})};const styles$b=StyleSheet.create({bounds:{alignSelf:"center",height:sizing.size_160,minHeight:sizing.size_160,minWidth:sizing.size_160},hide:{visibility:"hidden"}});
 
 const Checkbox=function(props){const{disabled,selected}=props;return jsx(View,{className:"checkbox",style:[styles$a.checkbox,selected&&!disabled&&styles$a.selected,disabled&&styles$a.disabledCheckbox],children:selected&&jsx(PhosphorIcon,{icon:checkIcon,size:"small",className:"check",style:[{width:sizing.size_120,height:sizing.size_120,margin:sizing.size_020},disabled&&selected&&styles$a.disabledCheckFormatting]})})};const checkboxTokens={color:{default:{border:semanticColor.input.default.border,background:semanticColor.input.default.background},disabled:{border:semanticColor.input.disabled.border,background:semanticColor.input.disabled.background},selected:{background:semanticColor.input.checked.background,foreground:semanticColor.input.checked.foreground}}};const styles$a=StyleSheet.create({checkbox:{alignSelf:"center",minHeight:sizing.size_160,minWidth:sizing.size_160,height:sizing.size_160,background:checkboxTokens.color.default.background,borderRadius:3,borderWidth:border.width.thin,borderStyle:"solid",borderColor:checkboxTokens.color.default.border},selected:{borderWidth:0,background:checkboxTokens.color.selected.background,color:checkboxTokens.color.selected.foreground},disabledCheckbox:{borderColor:checkboxTokens.color.disabled.border,backgroundColor:checkboxTokens.color.disabled.background},disabledCheckFormatting:{position:"absolute",top:-1,left:-1}});
 
-class OptionItem extends React.Component{static isClassOf(instance){return instance&&instance.type&&instance.type.__IS_OPTION_ITEM__}getCheckComponent(){if(this.props.variant==="check"){return Check}else {return Checkbox}}render(){const{disabled,focused,label,selected,testId,leftAccessory,horizontalRule,parentComponent,rightAccessory,style,subtitle1,subtitle2,value,onClick,onToggle,variant,role,...sharedProps}=this.props;const CheckComponent=this.getCheckComponent();const defaultStyle=[styles$9.optionItem,style];const listboxStyles=[styles$9.listboxOptionItem,focused&&styles$9.listboxOptionItemFocused];const selectStyles=[styles$9.selectOptionItem];return jsx(DetailCell,{disabled:disabled,horizontalRule:horizontalRule,style:[defaultStyle,parentComponent==="listbox"?listboxStyles:selectStyles],"aria-selected":selected?"true":"false",role:role,testId:testId,leftAccessory:jsx(Fragment,{children:leftAccessory?jsxs(View,{style:{flexDirection:"row",gap:sizing.size_080},children:[jsx(CheckComponent,{disabled:disabled,selected:selected}),leftAccessory]}):jsx(CheckComponent,{disabled:disabled,selected:selected})}),rightAccessory:rightAccessory,subtitle1:subtitle1,title:jsx(BodyText,{style:styles$9.label,children:label}),subtitle2:subtitle2,onClick:this.handleClick,tabIndex:parentComponent==="listbox"?-1:undefined,...sharedProps})}constructor(...args){super(...args),this.handleClick=()=>{const{onClick,onToggle,value}=this.props;onToggle(value);if(onClick){onClick();}};}}OptionItem.defaultProps={disabled:false,focused:false,horizontalRule:"none",onToggle:()=>void 0,role:"option",selected:false};OptionItem.__IS_OPTION_ITEM__=true;const focusedStyle={borderRadius:theme$3.item.border.radius.default,outline:focusStyles.focus[":focus-visible"].outline,outlineOffset:`calc(${border.width.medium} * -1)`,boxShadow:`inset 0 0 0 calc(${border.width.medium}*2) ${semanticColor.focus.inner}`};const resetFocusStyle={outline:"none",boxShadow:"none"};const styles$9=StyleSheet.create({optionItem:{paddingBlock:theme$3.item.layout.padding.block,paddingInlineStart:theme$3.item.layout.padding.inlineStart,paddingInlineEnd:theme$3.item.layout.padding.inlineEnd,whiteSpace:"nowrap",minHeight:sizing.size_400,":active":{borderRadius:theme$3.item.border.radius.press},[":is([aria-disabled=true])"]:{":focus":resetFocusStyle}},listboxOptionItem:{":focus-visible":resetFocusStyle},listboxOptionItemFocused:{...focusedStyle,":focus-visible":focusedStyle},selectOptionItem:{":focus":focusedStyle},label:{fontWeight:theme$3.item.font.weight,lineHeight:sizing.size_200,whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},hide:{visibility:"hidden"}});
+class OptionItem extends React.Component{static isClassOf(instance){return instance&&instance.type&&instance.type.__IS_OPTION_ITEM__}getCheckComponent(){if(this.props.variant==="check"){return Check}else {return Checkbox}}render(){const{disabled,focused,label,selected,testId,leftAccessory,horizontalRule,parentComponent,rightAccessory,style,subtitle1,subtitle2,value,onClick,onToggle,variant,role,...sharedProps}=this.props;const CheckComponent=this.getCheckComponent();const defaultStyle=[styles$9.optionItem,style];const listboxStyles=[styles$9.listboxOptionItem,focused&&styles$9.listboxOptionItemFocused];const selectStyles=[styles$9.selectOptionItem];return jsx(DetailCell,{disabled:disabled,horizontalRule:horizontalRule,style:[defaultStyle,parentComponent==="listbox"?listboxStyles:selectStyles],"aria-selected":selected?"true":"false",role:role,testId:testId,leftAccessory:jsx(Fragment,{children:leftAccessory?jsxs(View,{style:{flexDirection:"row",gap:sizing.size_080},children:[jsx(CheckComponent,{disabled:disabled,selected:selected}),leftAccessory]}):jsx(CheckComponent,{disabled:disabled,selected:selected})}),rightAccessory:rightAccessory,subtitle1:subtitle1,title:jsx(BodyText,{tag:"div",style:styles$9.label,children:label}),subtitle2:subtitle2,onClick:this.handleClick,tabIndex:parentComponent==="listbox"?-1:undefined,...sharedProps})}constructor(...args){super(...args),this.handleClick=()=>{const{onClick,onToggle,value}=this.props;onToggle(value);if(onClick){onClick();}};}}OptionItem.defaultProps={disabled:false,focused:false,horizontalRule:"none",onToggle:()=>void 0,role:"option",selected:false};OptionItem.__IS_OPTION_ITEM__=true;const focusedStyle={borderRadius:theme$3.item.border.radius.default,outline:focusStyles.focus[":focus-visible"].outline,outlineOffset:`calc(${border.width.medium} * -1)`,boxShadow:`inset 0 0 0 calc(${border.width.medium}*2) ${semanticColor.focus.inner}`};const resetFocusStyle={outline:"none",boxShadow:"none"};const styles$9=StyleSheet.create({optionItem:{paddingBlock:theme$3.item.layout.padding.block,paddingInlineStart:theme$3.item.layout.padding.inlineStart,paddingInlineEnd:theme$3.item.layout.padding.inlineEnd,whiteSpace:"nowrap",minHeight:sizing.size_400,":active":{borderRadius:theme$3.item.border.radius.press},[":is([aria-disabled=true])"]:{":focus":resetFocusStyle}},listboxOptionItem:{":focus-visible":resetFocusStyle},listboxOptionItemFocused:{...focusedStyle,":focus-visible":focusedStyle},selectOptionItem:{":focus":focusedStyle},label:{fontWeight:theme$3.item.font.weight,lineHeight:sizing.size_200,whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},hide:{visibility:"hidden"}});
 
 class SeparatorItem extends React.Component{static isClassOf(instance){return instance&&instance.type&&instance.type.__IS_SEPARATOR_ITEM__}render(){return jsx(View,{style:[styles$8.separator,this.props.style],"aria-hidden":"true"})}}SeparatorItem.__IS_SEPARATOR_ITEM__=true;const styles$8=StyleSheet.create({separator:{borderTop:`${border.width.thin} solid ${semanticColor.core.border.neutral.subtle}`,height:1,minHeight:1,marginBlock:sizing.size_040}});
 
@@ -65,7 +65,7 @@ class ActionMenuOpenerCore extends React.Component{render(){const{children,disab
 
 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:{marginInlineStart:sizing.size_040},opener:{whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},menuTopSpace:{top:`calc(-1 * ${sizing.size_040})`}});
 
-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.core.foreground.disabled.default:theme$3.opener.color.icon;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(BodyText,{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,paddingInlineStart:theme$3.opener.layout.padding.inlineStart,paddingInlineEnd:theme$3.opener.layout.padding.inlineEnd,borderWidth:0,borderRadius:theme$3.opener.border.radius.rest,borderStyle:"solid",outline:"none",textDecoration:"none",boxSizing:"border-box",whiteSpace:"nowrap",touchAction:"manipulation"},text:{marginInlineEnd:sizing.size_080,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 hoverStyling={borderColor:action.hover.border,boxShadow:`inset 0 0 0 ${border.width.thin} ${action.hover.border}`};const pressStyling={background:action.press.background,color:placeholder?error?semanticColor.input.default.placeholder:semanticColor.core.foreground.instructive.default:semanticColor.input.default.foreground,borderColor:action.press.border,boxShadow:`inset 0 0 0 ${border.width.thin} ${action.press.border}`,borderRadius:theme$3.opener.border.radius.press};const currentState=error?semanticColor.input.error:semanticColor.input.default;const disabledStatesStyles={background:semanticColor.input.disabled.background,borderColor:semanticColor.input.disabled.border,borderWidth:border.width.thin,borderRadius:theme$3.opener.border.radius.rest,color:semanticColor.input.disabled.placeholder};const newStyles={default:{background:currentState.background,borderColor:currentState.border,borderWidth:error?theme$3.opener.border.width.error:border.width.thin,color:placeholder?semanticColor.core.foreground.neutral.subtle:currentState.foreground,cursor:"pointer",":hover":hoverStyling,["@media not (hover: hover)"]:{":hover":{borderColor:currentState.border,borderWidth:border.width.thin,paddingInlineStart:theme$3.opener.layout.padding.inlineStart,paddingInlineEnd:theme$3.opener.layout.padding.inlineEnd}},":active":pressStyling,...focusStyles.focus},disabled:{...disabledStatesStyles,cursor:"not-allowed",":hover":{...disabledStatesStyles,outline:"none",boxShadow:"none"},":active":{...disabledStatesStyles,outline:"none",boxShadow:"none"},":focus-visible":disabledStatesStyles},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.core.foreground.disabled.default:theme$3.opener.color.icon;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(BodyText,{tag:"span",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,paddingInlineStart:theme$3.opener.layout.padding.inlineStart,paddingInlineEnd:theme$3.opener.layout.padding.inlineEnd,borderWidth:0,borderRadius:theme$3.opener.border.radius.rest,borderStyle:"solid",outline:"none",textDecoration:"none",boxSizing:"border-box",whiteSpace:"nowrap",touchAction:"manipulation"},text:{marginInlineEnd:sizing.size_080,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 hoverStyling={borderColor:action.hover.border,boxShadow:`inset 0 0 0 ${border.width.thin} ${action.hover.border}`};const pressStyling={background:action.press.background,color:placeholder?error?semanticColor.input.default.placeholder:semanticColor.core.foreground.instructive.default:semanticColor.input.default.foreground,borderColor:action.press.border,boxShadow:`inset 0 0 0 ${border.width.thin} ${action.press.border}`,borderRadius:theme$3.opener.border.radius.press};const currentState=error?semanticColor.input.error:semanticColor.input.default;const disabledStatesStyles={background:semanticColor.input.disabled.background,borderColor:semanticColor.input.disabled.border,borderWidth:border.width.thin,borderRadius:theme$3.opener.border.radius.rest,color:semanticColor.input.disabled.placeholder};const newStyles={default:{background:currentState.background,borderColor:currentState.border,borderWidth:error?theme$3.opener.border.width.error:border.width.thin,color:placeholder?semanticColor.core.foreground.neutral.subtle:currentState.foreground,cursor:"pointer",":hover":hoverStyling,["@media not (hover: hover)"]:{":hover":{borderColor:currentState.border,borderWidth:border.width.thin,paddingInlineStart:theme$3.opener.layout.padding.inlineStart,paddingInlineEnd:theme$3.opener.layout.padding.inlineEnd}},":active":pressStyling,...focusStyles.focus},disabled:{...disabledStatesStyles,cursor:"not-allowed",":hover":{...disabledStatesStyles,outline:"none",boxShadow:"none"},":active":{...disabledStatesStyles,outline:"none",boxShadow:"none"},":focus-visible":disabledStatesStyles},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

@@ -66,13 +66,13 @@ var themeDefault = {listbox:{border:{radius:wonderBlocksTokens.border.radius.rad
 
 var theme$3 = wonderBlocksTokens.mapValuesToCssVars(themeDefault,"--wb-c-dropdown-");
 
-class ActionItem extends React__namespace.Component{static isClassOf(instance){return instance&&instance.type&&instance.type.__IS_ACTION_ITEM__}render(){const{disabled,horizontalRule,href,target,indent,label,lang,leftAccessory,rightAccessory,onClick,role,style,testId,active}=this.props;const defaultStyle=[styles$c.wrapper,style];const labelComponent=typeof label==="string"?jsxRuntime.jsx(wonderBlocksTypography.BodyText,{lang:lang,style:styles$c.label,children:label}):React__namespace.cloneElement(label,{lang,style:styles$c.label,...label.props});return jsxRuntime.jsx(wonderBlocksCell.CompactCell,{disabled:disabled,horizontalRule:horizontalRule,leftAccessory:leftAccessory,rightAccessory:rightAccessory,style:[defaultStyle,styles$c.shared,indent&&styles$c.indent],role:role,testId:testId,title:labelComponent,href:href,target:target,onClick:onClick,active:active})}}ActionItem.defaultProps={disabled:false,horizontalRule:"none",indent:false,role:"menuitem"};ActionItem.__IS_ACTION_ITEM__=true;const styles$c=aphrodite.StyleSheet.create({wrapper:{minHeight:DROPDOWN_ITEM_HEIGHT,touchAction:"manipulation",":focus":{borderRadius:theme$3.item.border.radius.default,outline:wonderBlocksStyles.focusStyles.focus[":focus-visible"].outline,outlineOffset:`calc(${wonderBlocksTokens.border.width.medium} * -1)`,boxShadow:`inset 0 0 0 calc(${wonderBlocksTokens.border.width.medium}*2) ${wonderBlocksTokens.semanticColor.focus.inner}`,[":after"]:{content:"unset"}}},shared:{minHeight:DROPDOWN_ITEM_HEIGHT,paddingBlock:theme$3.item.layout.padding.block},label:{fontWeight:theme$3.item.font.weight,lineHeight:wonderBlocksTokens.sizing.size_200,whiteSpace:"nowrap",userSelect:"none"},indent:{paddingInlineStart:wonderBlocksTokens.sizing.size_320}});
+class ActionItem extends React__namespace.Component{static isClassOf(instance){return instance&&instance.type&&instance.type.__IS_ACTION_ITEM__}render(){const{disabled,horizontalRule,href,target,indent,label,lang,leftAccessory,rightAccessory,onClick,role,style,testId,active}=this.props;const defaultStyle=[styles$c.wrapper,style];const labelComponent=typeof label==="string"?jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"div",lang:lang,style:styles$c.label,children:label}):React__namespace.cloneElement(label,{lang,style:styles$c.label,...label.props});return jsxRuntime.jsx(wonderBlocksCell.CompactCell,{disabled:disabled,horizontalRule:horizontalRule,leftAccessory:leftAccessory,rightAccessory:rightAccessory,style:[defaultStyle,styles$c.shared,indent&&styles$c.indent],role:role,testId:testId,title:labelComponent,href:href,target:target,onClick:onClick,active:active})}}ActionItem.defaultProps={disabled:false,horizontalRule:"none",indent:false,role:"menuitem"};ActionItem.__IS_ACTION_ITEM__=true;const styles$c=aphrodite.StyleSheet.create({wrapper:{minHeight:DROPDOWN_ITEM_HEIGHT,touchAction:"manipulation",":focus":{borderRadius:theme$3.item.border.radius.default,outline:wonderBlocksStyles.focusStyles.focus[":focus-visible"].outline,outlineOffset:`calc(${wonderBlocksTokens.border.width.medium} * -1)`,boxShadow:`inset 0 0 0 calc(${wonderBlocksTokens.border.width.medium}*2) ${wonderBlocksTokens.semanticColor.focus.inner}`,[":after"]:{content:"unset"}}},shared:{minHeight:DROPDOWN_ITEM_HEIGHT,paddingBlock:theme$3.item.layout.padding.block},label:{fontWeight:theme$3.item.font.weight,lineHeight:wonderBlocksTokens.sizing.size_200,whiteSpace:"nowrap",userSelect:"none"},indent:{paddingInlineStart:wonderBlocksTokens.sizing.size_320}});
 
 const Check=function(props){const{selected,disabled}=props;const iconColor=disabled?wonderBlocksTokens.semanticColor.core.foreground.disabled.strong:wonderBlocksTokens.semanticColor.core.foreground.instructive.default;return jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{color:iconColor,icon:checkIcon__default["default"],size:"small",style:[styles$b.bounds,!selected&&styles$b.hide]})};const styles$b=aphrodite.StyleSheet.create({bounds:{alignSelf:"center",height:wonderBlocksTokens.sizing.size_160,minHeight:wonderBlocksTokens.sizing.size_160,minWidth:wonderBlocksTokens.sizing.size_160},hide:{visibility:"hidden"}});
 
 const Checkbox=function(props){const{disabled,selected}=props;return jsxRuntime.jsx(wonderBlocksCore.View,{className:"checkbox",style:[styles$a.checkbox,selected&&!disabled&&styles$a.selected,disabled&&styles$a.disabledCheckbox],children:selected&&jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{icon:checkIcon__default["default"],size:"small",className:"check",style:[{width:wonderBlocksTokens.sizing.size_120,height:wonderBlocksTokens.sizing.size_120,margin:wonderBlocksTokens.sizing.size_020},disabled&&selected&&styles$a.disabledCheckFormatting]})})};const checkboxTokens={color:{default:{border:wonderBlocksTokens.semanticColor.input.default.border,background:wonderBlocksTokens.semanticColor.input.default.background},disabled:{border:wonderBlocksTokens.semanticColor.input.disabled.border,background:wonderBlocksTokens.semanticColor.input.disabled.background},selected:{background:wonderBlocksTokens.semanticColor.input.checked.background,foreground:wonderBlocksTokens.semanticColor.input.checked.foreground}}};const styles$a=aphrodite.StyleSheet.create({checkbox:{alignSelf:"center",minHeight:wonderBlocksTokens.sizing.size_160,minWidth:wonderBlocksTokens.sizing.size_160,height:wonderBlocksTokens.sizing.size_160,background:checkboxTokens.color.default.background,borderRadius:3,borderWidth:wonderBlocksTokens.border.width.thin,borderStyle:"solid",borderColor:checkboxTokens.color.default.border},selected:{borderWidth:0,background:checkboxTokens.color.selected.background,color:checkboxTokens.color.selected.foreground},disabledCheckbox:{borderColor:checkboxTokens.color.disabled.border,backgroundColor:checkboxTokens.color.disabled.background},disabledCheckFormatting:{position:"absolute",top:-1,left:-1}});
 
-class OptionItem extends React__namespace.Component{static isClassOf(instance){return instance&&instance.type&&instance.type.__IS_OPTION_ITEM__}getCheckComponent(){if(this.props.variant==="check"){return Check}else {return Checkbox}}render(){const{disabled,focused,label,selected,testId,leftAccessory,horizontalRule,parentComponent,rightAccessory,style,subtitle1,subtitle2,value,onClick,onToggle,variant,role,...sharedProps}=this.props;const CheckComponent=this.getCheckComponent();const defaultStyle=[styles$9.optionItem,style];const listboxStyles=[styles$9.listboxOptionItem,focused&&styles$9.listboxOptionItemFocused];const selectStyles=[styles$9.selectOptionItem];return jsxRuntime.jsx(wonderBlocksCell.DetailCell,{disabled:disabled,horizontalRule:horizontalRule,style:[defaultStyle,parentComponent==="listbox"?listboxStyles:selectStyles],"aria-selected":selected?"true":"false",role:role,testId:testId,leftAccessory:jsxRuntime.jsx(jsxRuntime.Fragment,{children:leftAccessory?jsxRuntime.jsxs(wonderBlocksCore.View,{style:{flexDirection:"row",gap:wonderBlocksTokens.sizing.size_080},children:[jsxRuntime.jsx(CheckComponent,{disabled:disabled,selected:selected}),leftAccessory]}):jsxRuntime.jsx(CheckComponent,{disabled:disabled,selected:selected})}),rightAccessory:rightAccessory,subtitle1:subtitle1,title:jsxRuntime.jsx(wonderBlocksTypography.BodyText,{style:styles$9.label,children:label}),subtitle2:subtitle2,onClick:this.handleClick,tabIndex:parentComponent==="listbox"?-1:undefined,...sharedProps})}constructor(...args){super(...args),this.handleClick=()=>{const{onClick,onToggle,value}=this.props;onToggle(value);if(onClick){onClick();}};}}OptionItem.defaultProps={disabled:false,focused:false,horizontalRule:"none",onToggle:()=>void 0,role:"option",selected:false};OptionItem.__IS_OPTION_ITEM__=true;const focusedStyle={borderRadius:theme$3.item.border.radius.default,outline:wonderBlocksStyles.focusStyles.focus[":focus-visible"].outline,outlineOffset:`calc(${wonderBlocksTokens.border.width.medium} * -1)`,boxShadow:`inset 0 0 0 calc(${wonderBlocksTokens.border.width.medium}*2) ${wonderBlocksTokens.semanticColor.focus.inner}`};const resetFocusStyle={outline:"none",boxShadow:"none"};const styles$9=aphrodite.StyleSheet.create({optionItem:{paddingBlock:theme$3.item.layout.padding.block,paddingInlineStart:theme$3.item.layout.padding.inlineStart,paddingInlineEnd:theme$3.item.layout.padding.inlineEnd,whiteSpace:"nowrap",minHeight:wonderBlocksTokens.sizing.size_400,":active":{borderRadius:theme$3.item.border.radius.press},[":is([aria-disabled=true])"]:{":focus":resetFocusStyle}},listboxOptionItem:{":focus-visible":resetFocusStyle},listboxOptionItemFocused:{...focusedStyle,":focus-visible":focusedStyle},selectOptionItem:{":focus":focusedStyle},label:{fontWeight:theme$3.item.font.weight,lineHeight:wonderBlocksTokens.sizing.size_200,whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},hide:{visibility:"hidden"}});
+class OptionItem extends React__namespace.Component{static isClassOf(instance){return instance&&instance.type&&instance.type.__IS_OPTION_ITEM__}getCheckComponent(){if(this.props.variant==="check"){return Check}else {return Checkbox}}render(){const{disabled,focused,label,selected,testId,leftAccessory,horizontalRule,parentComponent,rightAccessory,style,subtitle1,subtitle2,value,onClick,onToggle,variant,role,...sharedProps}=this.props;const CheckComponent=this.getCheckComponent();const defaultStyle=[styles$9.optionItem,style];const listboxStyles=[styles$9.listboxOptionItem,focused&&styles$9.listboxOptionItemFocused];const selectStyles=[styles$9.selectOptionItem];return jsxRuntime.jsx(wonderBlocksCell.DetailCell,{disabled:disabled,horizontalRule:horizontalRule,style:[defaultStyle,parentComponent==="listbox"?listboxStyles:selectStyles],"aria-selected":selected?"true":"false",role:role,testId:testId,leftAccessory:jsxRuntime.jsx(jsxRuntime.Fragment,{children:leftAccessory?jsxRuntime.jsxs(wonderBlocksCore.View,{style:{flexDirection:"row",gap:wonderBlocksTokens.sizing.size_080},children:[jsxRuntime.jsx(CheckComponent,{disabled:disabled,selected:selected}),leftAccessory]}):jsxRuntime.jsx(CheckComponent,{disabled:disabled,selected:selected})}),rightAccessory:rightAccessory,subtitle1:subtitle1,title:jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"div",style:styles$9.label,children:label}),subtitle2:subtitle2,onClick:this.handleClick,tabIndex:parentComponent==="listbox"?-1:undefined,...sharedProps})}constructor(...args){super(...args),this.handleClick=()=>{const{onClick,onToggle,value}=this.props;onToggle(value);if(onClick){onClick();}};}}OptionItem.defaultProps={disabled:false,focused:false,horizontalRule:"none",onToggle:()=>void 0,role:"option",selected:false};OptionItem.__IS_OPTION_ITEM__=true;const focusedStyle={borderRadius:theme$3.item.border.radius.default,outline:wonderBlocksStyles.focusStyles.focus[":focus-visible"].outline,outlineOffset:`calc(${wonderBlocksTokens.border.width.medium} * -1)`,boxShadow:`inset 0 0 0 calc(${wonderBlocksTokens.border.width.medium}*2) ${wonderBlocksTokens.semanticColor.focus.inner}`};const resetFocusStyle={outline:"none",boxShadow:"none"};const styles$9=aphrodite.StyleSheet.create({optionItem:{paddingBlock:theme$3.item.layout.padding.block,paddingInlineStart:theme$3.item.layout.padding.inlineStart,paddingInlineEnd:theme$3.item.layout.padding.inlineEnd,whiteSpace:"nowrap",minHeight:wonderBlocksTokens.sizing.size_400,":active":{borderRadius:theme$3.item.border.radius.press},[":is([aria-disabled=true])"]:{":focus":resetFocusStyle}},listboxOptionItem:{":focus-visible":resetFocusStyle},listboxOptionItemFocused:{...focusedStyle,":focus-visible":focusedStyle},selectOptionItem:{":focus":focusedStyle},label:{fontWeight:theme$3.item.font.weight,lineHeight:wonderBlocksTokens.sizing.size_200,whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},hide:{visibility:"hidden"}});
 
 class SeparatorItem extends React__namespace.Component{static isClassOf(instance){return instance&&instance.type&&instance.type.__IS_SEPARATOR_ITEM__}render(){return jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$8.separator,this.props.style],"aria-hidden":"true"})}}SeparatorItem.__IS_SEPARATOR_ITEM__=true;const styles$8=aphrodite.StyleSheet.create({separator:{borderTop:`${wonderBlocksTokens.border.width.thin} solid ${wonderBlocksTokens.semanticColor.core.border.neutral.subtle}`,height:1,minHeight:1,marginBlock:wonderBlocksTokens.sizing.size_040}});
 
@@ -98,7 +98,7 @@ class ActionMenuOpenerCore extends React__namespace.Component{render(){const{chi
 
 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:{marginInlineStart:wonderBlocksTokens.sizing.size_040},opener:{whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},menuTopSpace:{top:`calc(-1 * ${wonderBlocksTokens.sizing.size_040})`}});
 
-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.core.foreground.disabled.default:theme$3.opener.color.icon;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.BodyText,{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,paddingInlineStart:theme$3.opener.layout.padding.inlineStart,paddingInlineEnd:theme$3.opener.layout.padding.inlineEnd,borderWidth:0,borderRadius:theme$3.opener.border.radius.rest,borderStyle:"solid",outline:"none",textDecoration:"none",boxSizing:"border-box",whiteSpace:"nowrap",touchAction:"manipulation"},text:{marginInlineEnd:wonderBlocksTokens.sizing.size_080,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 hoverStyling={borderColor:action.hover.border,boxShadow:`inset 0 0 0 ${wonderBlocksTokens.border.width.thin} ${action.hover.border}`};const pressStyling={background:action.press.background,color:placeholder?error?wonderBlocksTokens.semanticColor.input.default.placeholder:wonderBlocksTokens.semanticColor.core.foreground.instructive.default:wonderBlocksTokens.semanticColor.input.default.foreground,borderColor:action.press.border,boxShadow:`inset 0 0 0 ${wonderBlocksTokens.border.width.thin} ${action.press.border}`,borderRadius:theme$3.opener.border.radius.press};const currentState=error?wonderBlocksTokens.semanticColor.input.error:wonderBlocksTokens.semanticColor.input.default;const disabledStatesStyles={background:wonderBlocksTokens.semanticColor.input.disabled.background,borderColor:wonderBlocksTokens.semanticColor.input.disabled.border,borderWidth:wonderBlocksTokens.border.width.thin,borderRadius:theme$3.opener.border.radius.rest,color:wonderBlocksTokens.semanticColor.input.disabled.placeholder};const newStyles={default:{background:currentState.background,borderColor:currentState.border,borderWidth:error?theme$3.opener.border.width.error:wonderBlocksTokens.border.width.thin,color:placeholder?wonderBlocksTokens.semanticColor.core.foreground.neutral.subtle:currentState.foreground,cursor:"pointer",":hover":hoverStyling,["@media not (hover: hover)"]:{":hover":{borderColor:currentState.border,borderWidth:wonderBlocksTokens.border.width.thin,paddingInlineStart:theme$3.opener.layout.padding.inlineStart,paddingInlineEnd:theme$3.opener.layout.padding.inlineEnd}},":active":pressStyling,...wonderBlocksStyles.focusStyles.focus},disabled:{...disabledStatesStyles,cursor:"not-allowed",":hover":{...disabledStatesStyles,outline:"none",boxShadow:"none"},":active":{...disabledStatesStyles,outline:"none",boxShadow:"none"},":focus-visible":disabledStatesStyles},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.core.foreground.disabled.default:theme$3.opener.color.icon;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.BodyText,{tag:"span",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,paddingInlineStart:theme$3.opener.layout.padding.inlineStart,paddingInlineEnd:theme$3.opener.layout.padding.inlineEnd,borderWidth:0,borderRadius:theme$3.opener.border.radius.rest,borderStyle:"solid",outline:"none",textDecoration:"none",boxSizing:"border-box",whiteSpace:"nowrap",touchAction:"manipulation"},text:{marginInlineEnd:wonderBlocksTokens.sizing.size_080,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 hoverStyling={borderColor:action.hover.border,boxShadow:`inset 0 0 0 ${wonderBlocksTokens.border.width.thin} ${action.hover.border}`};const pressStyling={background:action.press.background,color:placeholder?error?wonderBlocksTokens.semanticColor.input.default.placeholder:wonderBlocksTokens.semanticColor.core.foreground.instructive.default:wonderBlocksTokens.semanticColor.input.default.foreground,borderColor:action.press.border,boxShadow:`inset 0 0 0 ${wonderBlocksTokens.border.width.thin} ${action.press.border}`,borderRadius:theme$3.opener.border.radius.press};const currentState=error?wonderBlocksTokens.semanticColor.input.error:wonderBlocksTokens.semanticColor.input.default;const disabledStatesStyles={background:wonderBlocksTokens.semanticColor.input.disabled.background,borderColor:wonderBlocksTokens.semanticColor.input.disabled.border,borderWidth:wonderBlocksTokens.border.width.thin,borderRadius:theme$3.opener.border.radius.rest,color:wonderBlocksTokens.semanticColor.input.disabled.placeholder};const newStyles={default:{background:currentState.background,borderColor:currentState.border,borderWidth:error?theme$3.opener.border.width.error:wonderBlocksTokens.border.width.thin,color:placeholder?wonderBlocksTokens.semanticColor.core.foreground.neutral.subtle:currentState.foreground,cursor:"pointer",":hover":hoverStyling,["@media not (hover: hover)"]:{":hover":{borderColor:currentState.border,borderWidth:wonderBlocksTokens.border.width.thin,paddingInlineStart:theme$3.opener.layout.padding.inlineStart,paddingInlineEnd:theme$3.opener.layout.padding.inlineEnd}},":active":pressStyling,...wonderBlocksStyles.focusStyles.focus},disabled:{...disabledStatesStyles,cursor:"not-allowed",":hover":{...disabledStatesStyles,outline:"none",boxShadow:"none"},":active":{...disabledStatesStyles,outline:"none",boxShadow:"none"},":focus-visible":disabledStatesStyles},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.2.0",
+  "version": "10.2.1",
   "design": "v1",
   "description": "Dropdown variants for Wonder Blocks.",
   "main": "dist/index.js",