@khanacademy/wonder-blocks-icon-button 9.0.5 → 9.0.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @khanacademy/wonder-blocks-icon-button
 
+## 9.0.6
+
+### Patch Changes
+
+- c9a0147: Fixes an issue with the IconButton component not triggering `onClick` when the `Space` key is pressed.
+- Updated dependencies [28fa0c0]
+- Updated dependencies [28fa0c0]
+- Updated dependencies [38042e2]
+    - @khanacademy/wonder-blocks-core@12.3.0
+    - @khanacademy/wonder-blocks-clickable@7.1.0
+    - @khanacademy/wonder-blocks-icon@5.1.4
+
 ## 9.0.5
 
 ### Patch Changes

package/dist/es/index.js

@@ -1,8 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
 import * as React from 'react';
+import { addStyle, keys } from '@khanacademy/wonder-blocks-core';
 import { StyleSheet } from 'aphrodite';
 import { Link, useInRouterContext } from 'react-router-dom-v5-compat';
-import { addStyle } from '@khanacademy/wonder-blocks-core';
 import { isClientSideUrl } from '@khanacademy/wonder-blocks-clickable';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import { createThemeContext, ThemeSwitcherContext, useScopedTheme } from '@khanacademy/wonder-blocks-theming';
@@ -17,6 +17,6 @@ const themes={default:theme};const IconButtonThemeContext=createThemeContext(the
 
 function IconChooser({icon,size}){const iconSize=iconSizeForButtonSize(size);switch(iconSize){case"small":return jsx(PhosphorIcon,{size:"small",color:"currentColor",icon:icon});case"medium":default:return jsx(PhosphorIcon,{size:"medium",color:"currentColor",icon:icon})}}const StyledA=addStyle("a");const StyledButton=addStyle("button");const StyledLink=addStyle(Link);const IconButtonCore=React.forwardRef(function IconButtonCore(props,ref){const{actionType,disabled,href,icon,kind="primary",size="medium",skipClientNav,style,testId,type="button",...restProps}=props;const{theme,themeName}=useScopedTheme(IconButtonThemeContext);const inRouterContext=useInRouterContext();const buttonStyles=_generateStyles(actionType,!!disabled,kind,size,theme,themeName);const defaultStyle=[sharedStyles.shared,buttonStyles.default,disabled&&buttonStyles.disabled];const child=jsx(IconChooser,{size:size,icon:icon});const commonProps={"data-testid":testId,style:[defaultStyle,style],...restProps};if(href&&!disabled){return inRouterContext&&!skipClientNav&&isClientSideUrl(href)?jsx(StyledLink,{...commonProps,to:href,ref:ref,children:child}):jsx(StyledA,{...commonProps,href:href,ref:ref,children:child})}else {return jsx(StyledButton,{type:type,...commonProps,onClick:disabled?undefined:restProps.onClick,"aria-disabled":disabled,ref:ref,children:child})}});const sharedStyles=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 styles={};const _generateStyles=(actionType="progressive",disabled,kind,size,theme,themeName)=>{const buttonType=`${actionType}-d_${disabled}-${kind}-${size}-${themeName}`;if(styles[buttonType]){return styles[buttonType]}const pixelsForSize=targetPixelsForSize(size);const borderWidthKind=theme.border.width[kind];const outlineOffsetKind=theme.border.offset[kind];const themeVariant=theme.color[kind][actionType];const disabledState=theme.color[kind].disabled;const disabledStatesStyles={borderColor:disabledState.border,borderWidth:borderWidthKind.default,background:disabledState.background,color:disabledState.foreground};const newStyles={default:{height:pixelsForSize,width:pixelsForSize,borderRadius:theme.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,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":{outline:kind==="primary"?`${borderWidthKind.press} solid ${themeVariant.press.border}`:undefined,outlineOffset:kind==="primary"?outlineOffsetKind:undefined,border:kind!=="primary"?`${borderWidthKind.press} solid ${themeVariant.press.border}`:undefined,background:themeVariant.press.background,color:themeVariant.press.foreground},...focusStyles.focus},disabled:{cursor:"not-allowed",...disabledStatesStyles,":hover":{...disabledStatesStyles,outline:"none"},":active":{...disabledStatesStyles,outline:"none"},":focus-visible":disabledStatesStyles}};styles[buttonType]=StyleSheet.create(newStyles);return styles[buttonType]};
 
-const IconButton=React.forwardRef(function IconButton(props,ref){const{actionType="progressive",disabled=false,href,kind="primary",size="medium",skipClientNav,tabIndex,target,type,...sharedProps}=props;function handleKeyDown(e){const keyCode=e.key;if(!href&&(keyCode==="Enter"||keyCode==="Space")){e.preventDefault();}}function handleKeyUp(e){const keyCode=e.key;if(!href&&(keyCode==="Enter"||keyCode==="Space")){if(sharedProps.onClick){sharedProps.onClick(e);}}}return jsx(ThemedIconButton,{children:jsx(IconButtonCore,{...sharedProps,actionType:actionType,disabled:disabled,href:href,kind:kind,ref:ref,skipClientNav:skipClientNav,size:size,target:target,tabIndex:tabIndex,onKeyDown:handleKeyDown,onKeyUp:handleKeyUp,type:type})})});
+const IconButton=React.forwardRef(function IconButton(props,ref){const{actionType="progressive",disabled=false,href,kind="primary",size="medium",skipClientNav,tabIndex,target,type,...sharedProps}=props;function handleKeyDown(e){const key=e.key;if(!href&&(key===keys.enter||key===keys.space)){e.preventDefault();}}function handleKeyUp(e){const key=e.key;if(!href&&(key===keys.enter||key===keys.space)){if(sharedProps.onClick){sharedProps.onClick(e);}}}return jsx(ThemedIconButton,{children:jsx(IconButtonCore,{...sharedProps,actionType:actionType,disabled:disabled,href:href,kind:kind,ref:ref,skipClientNav:skipClientNav,size:size,target:target,tabIndex:tabIndex,onKeyDown:handleKeyDown,onKeyUp:handleKeyUp,type:type})})});
 
 export { IconButton as default };

package/dist/index.js

@@ -2,9 +2,9 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
 var aphrodite = require('aphrodite');
 var reactRouterDomV5Compat = require('react-router-dom-v5-compat');
-var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
 var wonderBlocksClickable = require('@khanacademy/wonder-blocks-clickable');
 var wonderBlocksIcon = require('@khanacademy/wonder-blocks-icon');
 var wonderBlocksTheming = require('@khanacademy/wonder-blocks-theming');
@@ -39,6 +39,6 @@ const themes={default:theme};const IconButtonThemeContext=wonderBlocksTheming.cr
 
 function IconChooser({icon,size}){const iconSize=iconSizeForButtonSize(size);switch(iconSize){case"small":return jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{size:"small",color:"currentColor",icon:icon});case"medium":default:return jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{size:"medium",color:"currentColor",icon:icon})}}const StyledA=wonderBlocksCore.addStyle("a");const StyledButton=wonderBlocksCore.addStyle("button");const StyledLink=wonderBlocksCore.addStyle(reactRouterDomV5Compat.Link);const IconButtonCore=React__namespace.forwardRef(function IconButtonCore(props,ref){const{actionType,disabled,href,icon,kind="primary",size="medium",skipClientNav,style,testId,type="button",...restProps}=props;const{theme,themeName}=wonderBlocksTheming.useScopedTheme(IconButtonThemeContext);const inRouterContext=reactRouterDomV5Compat.useInRouterContext();const buttonStyles=_generateStyles(actionType,!!disabled,kind,size,theme,themeName);const defaultStyle=[sharedStyles.shared,buttonStyles.default,disabled&&buttonStyles.disabled];const child=jsxRuntime.jsx(IconChooser,{size:size,icon:icon});const commonProps={"data-testid":testId,style:[defaultStyle,style],...restProps};if(href&&!disabled){return inRouterContext&&!skipClientNav&&wonderBlocksClickable.isClientSideUrl(href)?jsxRuntime.jsx(StyledLink,{...commonProps,to:href,ref:ref,children:child}):jsxRuntime.jsx(StyledA,{...commonProps,href:href,ref:ref,children:child})}else {return jsxRuntime.jsx(StyledButton,{type:type,...commonProps,onClick:disabled?undefined:restProps.onClick,"aria-disabled":disabled,ref:ref,children:child})}});const sharedStyles=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 styles={};const _generateStyles=(actionType="progressive",disabled,kind,size,theme,themeName)=>{const buttonType=`${actionType}-d_${disabled}-${kind}-${size}-${themeName}`;if(styles[buttonType]){return styles[buttonType]}const pixelsForSize=targetPixelsForSize(size);const borderWidthKind=theme.border.width[kind];const outlineOffsetKind=theme.border.offset[kind];const themeVariant=theme.color[kind][actionType];const disabledState=theme.color[kind].disabled;const disabledStatesStyles={borderColor:disabledState.border,borderWidth:borderWidthKind.default,background:disabledState.background,color:disabledState.foreground};const newStyles={default:{height:pixelsForSize,width:pixelsForSize,borderRadius:theme.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,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":{outline:kind==="primary"?`${borderWidthKind.press} solid ${themeVariant.press.border}`:undefined,outlineOffset:kind==="primary"?outlineOffsetKind:undefined,border:kind!=="primary"?`${borderWidthKind.press} solid ${themeVariant.press.border}`:undefined,background:themeVariant.press.background,color:themeVariant.press.foreground},...wonderBlocksStyles.focusStyles.focus},disabled:{cursor:"not-allowed",...disabledStatesStyles,":hover":{...disabledStatesStyles,outline:"none"},":active":{...disabledStatesStyles,outline:"none"},":focus-visible":disabledStatesStyles}};styles[buttonType]=aphrodite.StyleSheet.create(newStyles);return styles[buttonType]};
 
-const IconButton=React__namespace.forwardRef(function IconButton(props,ref){const{actionType="progressive",disabled=false,href,kind="primary",size="medium",skipClientNav,tabIndex,target,type,...sharedProps}=props;function handleKeyDown(e){const keyCode=e.key;if(!href&&(keyCode==="Enter"||keyCode==="Space")){e.preventDefault();}}function handleKeyUp(e){const keyCode=e.key;if(!href&&(keyCode==="Enter"||keyCode==="Space")){if(sharedProps.onClick){sharedProps.onClick(e);}}}return jsxRuntime.jsx(ThemedIconButton,{children:jsxRuntime.jsx(IconButtonCore,{...sharedProps,actionType:actionType,disabled:disabled,href:href,kind:kind,ref:ref,skipClientNav:skipClientNav,size:size,target:target,tabIndex:tabIndex,onKeyDown:handleKeyDown,onKeyUp:handleKeyUp,type:type})})});
+const IconButton=React__namespace.forwardRef(function IconButton(props,ref){const{actionType="progressive",disabled=false,href,kind="primary",size="medium",skipClientNav,tabIndex,target,type,...sharedProps}=props;function handleKeyDown(e){const key=e.key;if(!href&&(key===wonderBlocksCore.keys.enter||key===wonderBlocksCore.keys.space)){e.preventDefault();}}function handleKeyUp(e){const key=e.key;if(!href&&(key===wonderBlocksCore.keys.enter||key===wonderBlocksCore.keys.space)){if(sharedProps.onClick){sharedProps.onClick(e);}}}return jsxRuntime.jsx(ThemedIconButton,{children:jsxRuntime.jsx(IconButtonCore,{...sharedProps,actionType:actionType,disabled:disabled,href:href,kind:kind,ref:ref,skipClientNav:skipClientNav,size:size,target:target,tabIndex:tabIndex,onKeyDown:handleKeyDown,onKeyUp:handleKeyUp,type:type})})});
 
 module.exports = IconButton;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-icon-button",
-  "version": "9.0.5",
+  "version": "9.0.6",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -12,9 +12,9 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@khanacademy/wonder-blocks-clickable": "7.0.4",
-    "@khanacademy/wonder-blocks-core": "12.2.1",
-    "@khanacademy/wonder-blocks-icon": "5.1.3",
+    "@khanacademy/wonder-blocks-clickable": "7.1.0",
+    "@khanacademy/wonder-blocks-core": "12.3.0",
+    "@khanacademy/wonder-blocks-icon": "5.1.4",
     "@khanacademy/wonder-blocks-styles": "0.2.7",
     "@khanacademy/wonder-blocks-theming": "3.3.0",
     "@khanacademy/wonder-blocks-tokens": "10.0.0"