@khanacademy/wonder-blocks-icon-button 11.4.5 → 11.5.0

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

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

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @khanacademy/wonder-blocks-icon-button
 
+## 11.5.0
+
+### Minor Changes
+
+- 5dd4192: Add `onKeyDown` prop to `IconButton`, composed with (not replacing) internal Space/Enter handling. Fixes `IconButtonUnstyled` bug where a caller `onKeyDown` silently overrode internal key handling.
+
+### Patch Changes
+
+- Updated dependencies [63dcc94]
+    - @khanacademy/wonder-blocks-core@12.5.0
+    - @khanacademy/wonder-blocks-clickable@8.2.10
+    - @khanacademy/wonder-blocks-icon@6.0.1
+    - @khanacademy/wonder-blocks-typography@5.0.4
+
+## 11.4.6
+
+### Patch Changes
+
+- Updated dependencies [a1f5a09]
+    - @khanacademy/wonder-blocks-icon@6.0.0
+
 ## 11.4.5
 
 ### Patch Changes

package/dist/components/icon-button-unstyled.d.ts

@@ -12,16 +12,6 @@ type Props = Omit<IconButtonProps, "icon"> & {
      * passed in as the `<a>` tag's `href` if present.
      */
     href?: string;
-    /**
-     * Listens for keydown events on the button. This is useful for preventing
-     * default behavior when the user presses the spacebar or enter key.
-     */
-    onKeyDown?: (e: React.KeyboardEvent) => unknown;
-    /**
-     * Listens for keyup events on the button. This is useful for triggering
-     * actions when the user presses the spacebar or enter key.
-     */
-    onKeyUp?: (e: React.KeyboardEvent) => unknown;
     /**
      * When the button is in a pressing state. This is useful for keyboard
      * interactions, so we can provide visual feedback to the user.

package/dist/es/index.js

@@ -13,7 +13,7 @@ var themeDefault = {iconButton:{root:{border:{offset:{primary:border.width.mediu
 
 var themeTokens = mapValuesToCssVars(themeDefault,"--wb-c-icon-button-");
 
-const StyledA=addStyle("a");const StyledButton=addStyle("button");const StyledLink=addStyle(Link);const IconButtonUnstyled=React.forwardRef(function IconButtonUnstyled(props,ref){const{children,disabled,href,kind,onPress,skipClientNav,style,testId,type="button",...restProps}=props;const inRouterContext=useInRouterContext();const handleKeyDown=React.useCallback(e=>{const key=e.key;if(!href&&(key===keys.enter||key===keys.space)){e.preventDefault();if(!disabled){onPress?.(true);}}},[disabled,href,onPress]);const handleKeyUp=React.useCallback(e=>{const key=e.key;if(!href&&(key===keys.enter||key===keys.space)){if(!disabled&&restProps.onClick){restProps.onClick(e);}onPress?.(false);}},[disabled,href,onPress,restProps]);const commonProps={"data-testid":testId,"data-kind":kind,style:[styles$4.shared,style],onKeyDown:handleKeyDown,onKeyUp:handleKeyUp,...restProps};if(href&&!disabled){return inRouterContext&&!skipClientNav&&isClientSideUrl(href)?jsx(StyledLink,{...commonProps,to:href,ref:ref,children:children}):jsx(StyledA,{...commonProps,href:href,ref:ref,children:children})}else {return jsx(StyledButton,{type:type,...commonProps,onClick:disabled?undefined:restProps.onClick,"aria-disabled":disabled,ref:ref,children:children})}});const styles$4=StyleSheet.create({shared:{position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"center",boxSizing:"border-box",padding:0,cursor:"pointer",border:"none",outline:"none",textDecoration:"none",background:"none",margin:0,touchAction:"manipulation"}});
+const StyledA=addStyle("a");const StyledButton=addStyle("button");const StyledLink=addStyle(Link);const IconButtonUnstyled=React.forwardRef(function IconButtonUnstyled(props,ref){const{children,disabled,href,kind,onKeyDown:onKeyDownProp,onKeyUp:onKeyUpProp,onPress,skipClientNav,style,testId,type="button",...restProps}=props;const inRouterContext=useInRouterContext();const handleKeyDown=React.useCallback(e=>{onKeyDownProp?.(e);const key=e.key;if(!href&&(key===keys.enter||key===keys.space)){e.preventDefault();if(!disabled){onPress?.(true);}}},[disabled,href,onPress,onKeyDownProp]);const handleKeyUp=React.useCallback(e=>{onKeyUpProp?.(e);const key=e.key;if(!href&&(key===keys.enter||key===keys.space)){if(!disabled&&restProps.onClick){restProps.onClick(e);}onPress?.(false);}},[disabled,href,onPress,restProps,onKeyUpProp]);const commonProps={"data-testid":testId,"data-kind":kind,style:[styles$4.shared,style],onKeyDown:handleKeyDown,onKeyUp:handleKeyUp,...restProps};if(href&&!disabled){return inRouterContext&&!skipClientNav&&isClientSideUrl(href)?jsx(StyledLink,{...commonProps,to:href,ref:ref,children:children}):jsx(StyledA,{...commonProps,href:href,ref:ref,children:children})}else {return jsx(StyledButton,{type:type,...commonProps,onClick:disabled?undefined:restProps.onClick,"aria-disabled":disabled,ref:ref,children:children})}});const styles$4=StyleSheet.create({shared:{position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"center",boxSizing:"border-box",padding:0,cursor:"pointer",border:"none",outline:"none",textDecoration:"none",background:"none",margin:0,touchAction:"manipulation"}});
 
 const theme$2=themeTokens.iconButton;function IconChooser({icon,size}){const iconStyle={width:theme$2.icon.sizing[size],height:theme$2.icon.sizing[size]};if(typeof icon!=="string"){return React.cloneElement(icon,{style:[iconStyle]})}switch(size){case"small":return jsx(PhosphorIcon,{size:"small",color:"currentColor",icon:icon,style:iconStyle});case"medium":default:return jsx(PhosphorIcon,{size:"medium",color:"currentColor",icon:icon,style:iconStyle})}}const IconButton=React.forwardRef(function IconButton(props,ref){const{actionType="progressive",disabled=false,icon,kind="primary",size="medium",style,type="button",...restProps}=props;const[pressed,setPressed]=React.useState(false);const buttonStyles=_generateStyles$2(actionType,!!disabled,kind,size);const styles=[buttonStyles.default,disabled&&buttonStyles.disabled,pressed&&buttonStyles.pressed,style];const handlePress=React.useCallback(isPressing=>{setPressed(isPressing);},[]);return jsx(IconButtonUnstyled,{...restProps,disabled:disabled,kind:kind,onPress:handlePress,ref:ref,style:styles,type:type,children:jsx(IconChooser,{size:size,icon:icon})})});const styles$3={};const _generateStyles$2=(actionType="progressive",disabled,kind,size)=>{const buttonType=`${actionType}-d_${disabled}-${kind}-${size}`;if(styles$3[buttonType]){return styles$3[buttonType]}const borderWidthKind=theme$2.root.border.width[kind];const outlineOffsetKind=theme$2.root.border.offset[kind];const themeVariant=semanticColor.action[kind][actionType];const disabledState=semanticColor.action[kind].disabled;const disabledStatesStyles={borderColor:disabledState.border,borderWidth:borderWidthKind.default,background:disabledState.background,color:disabledState.foreground};const pressStyles={outline:kind==="primary"?`${borderWidthKind.press} solid ${themeVariant.press.border}`:"none",outlineOffset:kind==="primary"?outlineOffsetKind:undefined,border:kind!=="primary"?`${borderWidthKind.press} solid ${themeVariant.press.border}`:"none",background:themeVariant.press.background,borderRadius:theme$2.root.border.radius.press,color:themeVariant.press.foreground,transition:"border-radius 0.1s ease-in-out"};const newStyles={default:{height:theme$2.root.sizing[size],width:theme$2.root.sizing[size],borderRadius:theme$2.root.border.radius.default,borderStyle:"solid",borderWidth:borderWidthKind.default,borderColor:themeVariant.default.border,background:themeVariant.default.background,color:themeVariant.default.foreground,":hover":{background:themeVariant.hover.background,borderRadius:theme$2.root.border.radius.hover,color:themeVariant.hover.foreground,outline:kind==="primary"?`${borderWidthKind.hover} solid ${themeVariant.hover.border}`:undefined,outlineOffset:kind==="primary"?outlineOffsetKind:undefined,border:kind!=="primary"?`${borderWidthKind.hover} solid ${themeVariant.hover.border}`:undefined},["@media not (hover: hover)"]:{":hover":{backgroundColor:"transparent"}},":active":pressStyles,...focusStyles.focus},disabled:{cursor:"not-allowed",...disabledStatesStyles,":hover":{...disabledStatesStyles,outline:"none",borderRadius:theme$2.root.border.radius.default},":active":{...disabledStatesStyles,outline:"none",borderRadius:theme$2.root.border.radius.default},":focus-visible":disabledStatesStyles},pressed:pressStyles};styles$3[buttonType]=StyleSheet.create(newStyles);return styles$3[buttonType]};
 

package/dist/index.js

@@ -37,7 +37,7 @@ var themeDefault = {iconButton:{root:{border:{offset:{primary:wonderBlocksTokens
 
 var themeTokens = wonderBlocksTokens.mapValuesToCssVars(themeDefault,"--wb-c-icon-button-");
 
-const StyledA=wonderBlocksCore.addStyle("a");const StyledButton=wonderBlocksCore.addStyle("button");const StyledLink=wonderBlocksCore.addStyle(reactRouterDomV5Compat.Link);const IconButtonUnstyled=React__namespace.forwardRef(function IconButtonUnstyled(props,ref){const{children,disabled,href,kind,onPress,skipClientNav,style,testId,type="button",...restProps}=props;const inRouterContext=reactRouterDomV5Compat.useInRouterContext();const handleKeyDown=React__namespace.useCallback(e=>{const key=e.key;if(!href&&(key===wonderBlocksCore.keys.enter||key===wonderBlocksCore.keys.space)){e.preventDefault();if(!disabled){onPress?.(true);}}},[disabled,href,onPress]);const handleKeyUp=React__namespace.useCallback(e=>{const key=e.key;if(!href&&(key===wonderBlocksCore.keys.enter||key===wonderBlocksCore.keys.space)){if(!disabled&&restProps.onClick){restProps.onClick(e);}onPress?.(false);}},[disabled,href,onPress,restProps]);const commonProps={"data-testid":testId,"data-kind":kind,style:[styles$4.shared,style],onKeyDown:handleKeyDown,onKeyUp:handleKeyUp,...restProps};if(href&&!disabled){return inRouterContext&&!skipClientNav&&wonderBlocksClickable.isClientSideUrl(href)?jsxRuntime.jsx(StyledLink,{...commonProps,to:href,ref:ref,children:children}):jsxRuntime.jsx(StyledA,{...commonProps,href:href,ref:ref,children:children})}else {return jsxRuntime.jsx(StyledButton,{type:type,...commonProps,onClick:disabled?undefined:restProps.onClick,"aria-disabled":disabled,ref:ref,children:children})}});const styles$4=aphrodite.StyleSheet.create({shared:{position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"center",boxSizing:"border-box",padding:0,cursor:"pointer",border:"none",outline:"none",textDecoration:"none",background:"none",margin:0,touchAction:"manipulation"}});
+const StyledA=wonderBlocksCore.addStyle("a");const StyledButton=wonderBlocksCore.addStyle("button");const StyledLink=wonderBlocksCore.addStyle(reactRouterDomV5Compat.Link);const IconButtonUnstyled=React__namespace.forwardRef(function IconButtonUnstyled(props,ref){const{children,disabled,href,kind,onKeyDown:onKeyDownProp,onKeyUp:onKeyUpProp,onPress,skipClientNav,style,testId,type="button",...restProps}=props;const inRouterContext=reactRouterDomV5Compat.useInRouterContext();const handleKeyDown=React__namespace.useCallback(e=>{onKeyDownProp?.(e);const key=e.key;if(!href&&(key===wonderBlocksCore.keys.enter||key===wonderBlocksCore.keys.space)){e.preventDefault();if(!disabled){onPress?.(true);}}},[disabled,href,onPress,onKeyDownProp]);const handleKeyUp=React__namespace.useCallback(e=>{onKeyUpProp?.(e);const key=e.key;if(!href&&(key===wonderBlocksCore.keys.enter||key===wonderBlocksCore.keys.space)){if(!disabled&&restProps.onClick){restProps.onClick(e);}onPress?.(false);}},[disabled,href,onPress,restProps,onKeyUpProp]);const commonProps={"data-testid":testId,"data-kind":kind,style:[styles$4.shared,style],onKeyDown:handleKeyDown,onKeyUp:handleKeyUp,...restProps};if(href&&!disabled){return inRouterContext&&!skipClientNav&&wonderBlocksClickable.isClientSideUrl(href)?jsxRuntime.jsx(StyledLink,{...commonProps,to:href,ref:ref,children:children}):jsxRuntime.jsx(StyledA,{...commonProps,href:href,ref:ref,children:children})}else {return jsxRuntime.jsx(StyledButton,{type:type,...commonProps,onClick:disabled?undefined:restProps.onClick,"aria-disabled":disabled,ref:ref,children:children})}});const styles$4=aphrodite.StyleSheet.create({shared:{position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"center",boxSizing:"border-box",padding:0,cursor:"pointer",border:"none",outline:"none",textDecoration:"none",background:"none",margin:0,touchAction:"manipulation"}});
 
 const theme$2=themeTokens.iconButton;function IconChooser({icon,size}){const iconStyle={width:theme$2.icon.sizing[size],height:theme$2.icon.sizing[size]};if(typeof icon!=="string"){return React__namespace.cloneElement(icon,{style:[iconStyle]})}switch(size){case"small":return jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{size:"small",color:"currentColor",icon:icon,style:iconStyle});case"medium":default:return jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{size:"medium",color:"currentColor",icon:icon,style:iconStyle})}}const IconButton=React__namespace.forwardRef(function IconButton(props,ref){const{actionType="progressive",disabled=false,icon,kind="primary",size="medium",style,type="button",...restProps}=props;const[pressed,setPressed]=React__namespace.useState(false);const buttonStyles=_generateStyles$2(actionType,!!disabled,kind,size);const styles=[buttonStyles.default,disabled&&buttonStyles.disabled,pressed&&buttonStyles.pressed,style];const handlePress=React__namespace.useCallback(isPressing=>{setPressed(isPressing);},[]);return jsxRuntime.jsx(IconButtonUnstyled,{...restProps,disabled:disabled,kind:kind,onPress:handlePress,ref:ref,style:styles,type:type,children:jsxRuntime.jsx(IconChooser,{size:size,icon:icon})})});const styles$3={};const _generateStyles$2=(actionType="progressive",disabled,kind,size)=>{const buttonType=`${actionType}-d_${disabled}-${kind}-${size}`;if(styles$3[buttonType]){return styles$3[buttonType]}const borderWidthKind=theme$2.root.border.width[kind];const outlineOffsetKind=theme$2.root.border.offset[kind];const themeVariant=wonderBlocksTokens.semanticColor.action[kind][actionType];const disabledState=wonderBlocksTokens.semanticColor.action[kind].disabled;const disabledStatesStyles={borderColor:disabledState.border,borderWidth:borderWidthKind.default,background:disabledState.background,color:disabledState.foreground};const pressStyles={outline:kind==="primary"?`${borderWidthKind.press} solid ${themeVariant.press.border}`:"none",outlineOffset:kind==="primary"?outlineOffsetKind:undefined,border:kind!=="primary"?`${borderWidthKind.press} solid ${themeVariant.press.border}`:"none",background:themeVariant.press.background,borderRadius:theme$2.root.border.radius.press,color:themeVariant.press.foreground,transition:"border-radius 0.1s ease-in-out"};const newStyles={default:{height:theme$2.root.sizing[size],width:theme$2.root.sizing[size],borderRadius:theme$2.root.border.radius.default,borderStyle:"solid",borderWidth:borderWidthKind.default,borderColor:themeVariant.default.border,background:themeVariant.default.background,color:themeVariant.default.foreground,":hover":{background:themeVariant.hover.background,borderRadius:theme$2.root.border.radius.hover,color:themeVariant.hover.foreground,outline:kind==="primary"?`${borderWidthKind.hover} solid ${themeVariant.hover.border}`:undefined,outlineOffset:kind==="primary"?outlineOffsetKind:undefined,border:kind!=="primary"?`${borderWidthKind.hover} solid ${themeVariant.hover.border}`:undefined},["@media not (hover: hover)"]:{":hover":{backgroundColor:"transparent"}},":active":pressStyles,...wonderBlocksStyles.focusStyles.focus},disabled:{cursor:"not-allowed",...disabledStatesStyles,":hover":{...disabledStatesStyles,outline:"none",borderRadius:theme$2.root.border.radius.default},":active":{...disabledStatesStyles,outline:"none",borderRadius:theme$2.root.border.radius.default},":focus-visible":disabledStatesStyles},pressed:pressStyles};styles$3[buttonType]=aphrodite.StyleSheet.create(newStyles);return styles$3[buttonType]};
 

package/dist/util/icon-button.types.d.ts

@@ -102,6 +102,16 @@ export type BaseIconButtonProps = Partial<Omit<AriaProps, "aria-disabled">> & {
      * Function to call when the mouse down event is triggered.
      */
     onMouseDown?: (e: React.MouseEvent) => void;
+    /**
+     * Function to call when a key is pressed down while the button is
+     * focused. Composed with, not replacing, internal Space/Enter handling.
+     */
+    onKeyDown?: (e: React.KeyboardEvent) => unknown;
+    /**
+     * Function to call when a key is released while the button is focused.
+     * Composed with, not replacing, internal Space/Enter handling.
+     */
+    onKeyUp?: (e: React.KeyboardEvent) => unknown;
 };
 export type IconButtonProps = BaseIconButtonProps & {
     /**

package/package.json

@@ -3,7 +3,7 @@
   "description": "",
   "author": "Khan Academy",
   "license": "MIT",
-  "version": "11.4.5",
+  "version": "11.5.0",
   "publishConfig": {
     "access": "public"
   },
@@ -28,13 +28,13 @@
     "./styles.css": "./dist/css/vars.css"
   },
   "dependencies": {
-    "@khanacademy/wonder-blocks-clickable": "8.2.9",
-    "@khanacademy/wonder-blocks-core": "12.4.4",
-    "@khanacademy/wonder-blocks-icon": "5.3.23",
+    "@khanacademy/wonder-blocks-clickable": "8.2.10",
+    "@khanacademy/wonder-blocks-core": "12.5.0",
+    "@khanacademy/wonder-blocks-icon": "6.0.1",
     "@khanacademy/wonder-blocks-styles": "0.2.53",
     "@khanacademy/wonder-blocks-theming": "4.1.0",
     "@khanacademy/wonder-blocks-tokens": "17.3.0",
-    "@khanacademy/wonder-blocks-typography": "5.0.3"
+    "@khanacademy/wonder-blocks-typography": "5.0.4"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",