@khanacademy/wonder-blocks-dropdown 10.5.3 → 10.5.4

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

@@ -1,5 +1,5 @@
 
-> @khanacademy/wonder-blocks-dropdown@10.5.3 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-dropdown
+> @khanacademy/wonder-blocks-dropdown@10.5.4 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,13 @@
 # @khanacademy/wonder-blocks-dropdown
 
+## 10.5.4
+
+### Patch Changes
+
+- 415dd5a: Fixes DropdownOpener to propagate onBlur event correctly. This change allows to update the focused styles when the opener is blurred.
+- Updated dependencies [8b713e2]
+    - @khanacademy/wonder-blocks-modal@8.5.7
+
 ## 10.5.3
 
 ### Patch Changes

package/dist/components/dropdown-opener.d.ts

@@ -1,8 +1,7 @@
 import * as React from "react";
 import type { AriaProps } from "@khanacademy/wonder-blocks-core";
-import type { ChildrenProps, ClickableState } from "@khanacademy/wonder-blocks-clickable";
 import type { OpenerProps, OptionLabel } from "../util/types";
-type Props = Partial<Omit<AriaProps, "aria-disabled">> & {
+declare const DropdownOpener: React.ForwardRefExoticComponent<Partial<Omit<AriaProps, "aria-disabled">> & {
     /**
      * The child function that returns the anchor the Dropdown will be activated
      * by. This function takes two arguments:
@@ -14,7 +13,7 @@ type Props = Partial<Omit<AriaProps, "aria-disabled">> & {
     /**
      * Whether the opener is disabled. If disabled, disallows interaction.
      */
-    disabled: boolean;
+    disabled?: boolean;
     /**
      * Callback for when the opener is pressed.
      */
@@ -47,14 +46,5 @@ type Props = Partial<Omit<AriaProps, "aria-disabled">> & {
      * The role of the opener.
      */
     role: "combobox" | "button";
-};
-type DefaultProps = {
-    disabled: Props["disabled"];
-};
-declare class DropdownOpener extends React.Component<Props> {
-    static defaultProps: DefaultProps;
-    getTestIdFromProps: (childrenProps?: any) => string;
-    renderAnchorChildren(eventState: ClickableState, clickableChildrenProps: ChildrenProps): React.ReactElement;
-    render(): React.ReactNode;
-}
+} & React.RefAttributes<HTMLElement>>;
 export default DropdownOpener;

package/dist/es/index.js

@@ -42,7 +42,7 @@ class OptionItem extends React.Component{static isClassOf(instance){return insta
 
 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}});
 
-class DropdownOpener extends React.Component{renderAnchorChildren(eventState,clickableChildrenProps){const{disabled,testId,text,opened,"aria-controls":ariaControls,"aria-haspopup":ariaHasPopUp,"aria-required":ariaRequired,id,role,onBlur}=this.props;const renderedChildren=this.props.children({...eventState,text,opened});const childrenProps=renderedChildren.props;const childrenTestId=this.getTestIdFromProps(childrenProps);const renderedAriaLabel=childrenProps["aria-label"]??this.props["aria-label"];return React.cloneElement(renderedChildren,{...clickableChildrenProps,"aria-label":renderedAriaLabel??undefined,"aria-invalid":this.props.error,disabled,"aria-controls":ariaControls,role,id,"aria-expanded":opened?"true":"false","aria-haspopup":ariaHasPopUp,"aria-required":ariaRequired,onClick:childrenProps.onClick?e=>{childrenProps.onClick(e);clickableChildrenProps.onClick(e);}:clickableChildrenProps.onClick,"data-testid":childrenTestId||testId,onBlur})}render(){return jsx(ClickableBehavior,{onClick:this.props.onClick,disabled:this.props.disabled,tabIndex:0,children:(eventState,handlers)=>this.renderAnchorChildren(eventState,handlers)})}constructor(...args){super(...args),this.getTestIdFromProps=childrenProps=>{return childrenProps.testId||childrenProps["data-testid"]};}}DropdownOpener.defaultProps={disabled:false};
+const DropdownOpener=React.forwardRef((props,ref)=>{const{disabled=false,testId,text,opened,"aria-controls":ariaControls,"aria-haspopup":ariaHasPopUp,"aria-required":ariaRequired,"aria-label":ariaLabel,id,role,onBlur,onClick,children,error}=props;const renderAnchorChildren=(eventState,clickableChildrenProps)=>{const renderedChildren=children({...eventState,text,opened});const childrenProps=renderedChildren.props;const childrenTestId=childrenProps?.testId||childrenProps?.["data-testid"];const renderedAriaLabel=childrenProps["aria-label"]??ariaLabel;return React.cloneElement(renderedChildren,{...clickableChildrenProps,ref,"aria-label":renderedAriaLabel??undefined,"aria-invalid":error,disabled,"aria-controls":ariaControls,role,id,"aria-expanded":opened?"true":"false","aria-haspopup":ariaHasPopUp,"aria-required":ariaRequired,onClick:childrenProps.onClick?e=>{childrenProps.onClick(e);clickableChildrenProps.onClick(e);}:clickableChildrenProps.onClick,"data-testid":childrenTestId||testId,onBlur:onBlur?e=>{onBlur(e);clickableChildrenProps.onBlur(e);}:clickableChildrenProps.onBlur})};return jsx(ClickableBehavior,{onClick:onClick,disabled:disabled,tabIndex:0,children:(eventState,handlers)=>renderAnchorChildren(eventState,handlers)})});DropdownOpener.displayName="DropdownOpener";
 
 class DropdownVirtualizedItem extends React.Component{render(){const{data,index,style}=this.props;const item=data[index];if(SeparatorItem.isClassOf(item.component)){return React.cloneElement(item.component,{style})}else {const{component,populatedProps,onClick,role,ref}=item;return React.cloneElement(component,{style,...populatedProps,key:index,onClick,ref:item.focusable&&ref,role})}}}
 

package/dist/index.js

@@ -74,7 +74,7 @@ class OptionItem extends React__namespace.Component{static isClassOf(instance){r
 
 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}});
 
-class DropdownOpener extends React__namespace.Component{renderAnchorChildren(eventState,clickableChildrenProps){const{disabled,testId,text,opened,"aria-controls":ariaControls,"aria-haspopup":ariaHasPopUp,"aria-required":ariaRequired,id,role,onBlur}=this.props;const renderedChildren=this.props.children({...eventState,text,opened});const childrenProps=renderedChildren.props;const childrenTestId=this.getTestIdFromProps(childrenProps);const renderedAriaLabel=childrenProps["aria-label"]??this.props["aria-label"];return React__namespace.cloneElement(renderedChildren,{...clickableChildrenProps,"aria-label":renderedAriaLabel??undefined,"aria-invalid":this.props.error,disabled,"aria-controls":ariaControls,role,id,"aria-expanded":opened?"true":"false","aria-haspopup":ariaHasPopUp,"aria-required":ariaRequired,onClick:childrenProps.onClick?e=>{childrenProps.onClick(e);clickableChildrenProps.onClick(e);}:clickableChildrenProps.onClick,"data-testid":childrenTestId||testId,onBlur})}render(){return jsxRuntime.jsx(wonderBlocksClickable.ClickableBehavior,{onClick:this.props.onClick,disabled:this.props.disabled,tabIndex:0,children:(eventState,handlers)=>this.renderAnchorChildren(eventState,handlers)})}constructor(...args){super(...args),this.getTestIdFromProps=childrenProps=>{return childrenProps.testId||childrenProps["data-testid"]};}}DropdownOpener.defaultProps={disabled:false};
+const DropdownOpener=React__namespace.forwardRef((props,ref)=>{const{disabled=false,testId,text,opened,"aria-controls":ariaControls,"aria-haspopup":ariaHasPopUp,"aria-required":ariaRequired,"aria-label":ariaLabel,id,role,onBlur,onClick,children,error}=props;const renderAnchorChildren=(eventState,clickableChildrenProps)=>{const renderedChildren=children({...eventState,text,opened});const childrenProps=renderedChildren.props;const childrenTestId=childrenProps?.testId||childrenProps?.["data-testid"];const renderedAriaLabel=childrenProps["aria-label"]??ariaLabel;return React__namespace.cloneElement(renderedChildren,{...clickableChildrenProps,ref,"aria-label":renderedAriaLabel??undefined,"aria-invalid":error,disabled,"aria-controls":ariaControls,role,id,"aria-expanded":opened?"true":"false","aria-haspopup":ariaHasPopUp,"aria-required":ariaRequired,onClick:childrenProps.onClick?e=>{childrenProps.onClick(e);clickableChildrenProps.onClick(e);}:clickableChildrenProps.onClick,"data-testid":childrenTestId||testId,onBlur:onBlur?e=>{onBlur(e);clickableChildrenProps.onBlur(e);}:clickableChildrenProps.onBlur})};return jsxRuntime.jsx(wonderBlocksClickable.ClickableBehavior,{onClick:onClick,disabled:disabled,tabIndex:0,children:(eventState,handlers)=>renderAnchorChildren(eventState,handlers)})});DropdownOpener.displayName="DropdownOpener";
 
 class DropdownVirtualizedItem extends React__namespace.Component{render(){const{data,index,style}=this.props;const item=data[index];if(SeparatorItem.isClassOf(item.component)){return React__namespace.cloneElement(item.component,{style})}else {const{component,populatedProps,onClick,role,ref}=item;return React__namespace.cloneElement(component,{style,...populatedProps,key:index,onClick,ref:item.focusable&&ref,role})}}}
 

package/package.json

@@ -3,7 +3,7 @@
   "description": "Dropdown variants for Wonder Blocks.",
   "author": "Khan Academy",
   "license": "MIT",
-  "version": "10.5.3",
+  "version": "10.5.4",
   "publishConfig": {
     "access": "public"
   },
@@ -35,7 +35,7 @@
     "@khanacademy/wonder-blocks-form": "7.4.5",
     "@khanacademy/wonder-blocks-icon": "5.3.4",
     "@khanacademy/wonder-blocks-icon-button": "10.5.7",
-    "@khanacademy/wonder-blocks-modal": "8.5.6",
+    "@khanacademy/wonder-blocks-modal": "8.5.7",
     "@khanacademy/wonder-blocks-pill": "3.1.47",
     "@khanacademy/wonder-blocks-search-field": "5.1.53",
     "@khanacademy/wonder-blocks-styles": "0.2.36",