@khanacademy/wonder-blocks-link 10.2.0 → 10.3.0

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

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

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @khanacademy/wonder-blocks-link
 
+## 10.3.0
+
+### Minor Changes
+
+- c97ece4: Accepts the `state` prop from the React router Link component.
+
+### Patch Changes
+
+- Updated dependencies [40cb70f]
+- Updated dependencies [40cb70f]
+- Updated dependencies [c97ece4]
+    - @khanacademy/wonder-blocks-core@12.4.4
+    - @khanacademy/wonder-blocks-clickable@8.2.0
+    - @khanacademy/wonder-blocks-icon@5.3.15
+    - @khanacademy/wonder-blocks-typography@4.3.5
+
 ## 10.2.0
 
 ### Minor Changes

package/dist/components/link.d.ts

@@ -117,6 +117,12 @@ type CommonProps = AriaProps & {
      * @see https://reactrouter.com/6.30.0/components/link#viewtransition
      */
     viewTransition?: boolean;
+    /**
+     * Adds persistent client side routing state to the next location.
+     * Only has effect when the underlying react-router `Link` is used.
+     * See https://reactrouter.com/api/components/Link#state
+     */
+    state?: unknown;
 };
 export type SharedProps = (CommonProps & {
     /**

package/dist/es/index.js

@@ -13,8 +13,8 @@ var themeDefault = {root:{font:{family:"inherit",weight:"inherit"}}};
 
 var theme = mapValuesToCssVars(themeDefault,"--wb-c-link-");
 
-const StyledA=addStyle("a");const StyledLink=addStyle(Link$1);const LinkCore=React.forwardRef(function LinkCore(props,ref){const inRouterContext=useInRouterContext();const{children,skipClientNav,focused,hovered,href,inline=false,pressed,style,testId,waiting:_,target,startIcon,endIcon,labels,viewTransition,...restProps}=props;const defaultStyles=[styles.shared,styles.rest,inline&&styles.restInline,!pressed&&focused&&styles.focus];const commonProps={"data-testid":testId,style:[defaultStyles,style],target,...restProps};const linkUrl=new URL(href,window.location.origin);const isExternalLink=linkUrl.origin!==window.location.origin;const externalIcon=jsx(PhosphorIcon,{icon:externalLinkIcon,size:"small",style:[styles.endIcon,styles.centered],testId:"external-icon","aria-label":labels?.externalIconAriaLabel});let startIconElement;let endIconElement;if(startIcon){startIconElement=React.cloneElement(startIcon,{style:[styles.startIcon,styles.centered],testId:"start-icon",...startIcon.props});}if(endIcon){endIconElement=React.cloneElement(endIcon,{style:[styles.endIcon,styles.centered],testId:"end-icon",...endIcon.props});}const linkContent=jsxs(Fragment,{children:[startIcon&&startIconElement,children,endIcon?endIconElement:isExternalLink&&target==="_blank"&&externalIcon]});return inRouterContext&&!skipClientNav&&isClientSideUrl(href)?jsx(StyledLink,{...commonProps,to:href,ref:ref,viewTransition:viewTransition,children:linkContent}):jsx(StyledA,{...commonProps,href:href,ref:ref,children:linkContent})});const focusStyling={...focusStyles.focus[":focus-visible"],borderRadius:border.radius.radius_010,outlineOffset:border.width.medium};const pressStyling={color:semanticColor.link.press,textDecoration:"underline currentcolor solid",textUnderlineOffset:font.textDecoration.underlineOffset};const styles=StyleSheet.create({shared:{fontFamily:theme.root.font.family,fontWeight:theme.root.font.weight,cursor:"pointer",textDecoration:"none",outline:"none",alignItems:"center"},rest:{color:semanticColor.link.rest,":hover":{textDecoration:"underline currentcolor solid",color:semanticColor.link.hover,textUnderlineOffset:font.textDecoration.underlineOffset},":focus-visible":focusStyling,":active":pressStyling},restInline:{textDecoration:"underline currentcolor solid",textDecorationThickness:font.textDecoration.thickness,textUnderlineOffset:font.textDecoration.underlineOffset},focus:focusStyling,press:pressStyling,startIcon:{marginInlineEnd:sizing.size_040},endIcon:{marginInlineStart:sizing.size_040},centered:{verticalAlign:"-10%"}});
+const StyledA=addStyle("a");const StyledLink=addStyle(Link$1);const LinkCore=React.forwardRef(function LinkCore(props,ref){const inRouterContext=useInRouterContext();const{children,skipClientNav,focused,hovered,href,inline=false,pressed,style,testId,waiting:_,target,startIcon,endIcon,labels,viewTransition,state,...restProps}=props;const defaultStyles=[styles.shared,styles.rest,inline&&styles.restInline,!pressed&&focused&&styles.focus];const commonProps={"data-testid":testId,style:[defaultStyles,style],target,...restProps};const linkUrl=new URL(href,window.location.origin);const isExternalLink=linkUrl.origin!==window.location.origin;const externalIcon=jsx(PhosphorIcon,{icon:externalLinkIcon,size:"small",style:[styles.endIcon,styles.centered],testId:"external-icon","aria-label":labels?.externalIconAriaLabel});let startIconElement;let endIconElement;if(startIcon){startIconElement=React.cloneElement(startIcon,{style:[styles.startIcon,styles.centered],testId:"start-icon",...startIcon.props});}if(endIcon){endIconElement=React.cloneElement(endIcon,{style:[styles.endIcon,styles.centered],testId:"end-icon",...endIcon.props});}const linkContent=jsxs(Fragment,{children:[startIcon&&startIconElement,children,endIcon?endIconElement:isExternalLink&&target==="_blank"&&externalIcon]});return inRouterContext&&!skipClientNav&&isClientSideUrl(href)?jsx(StyledLink,{...commonProps,to:href,ref:ref,viewTransition:viewTransition,state:state,children:linkContent}):jsx(StyledA,{...commonProps,href:href,ref:ref,children:linkContent})});const focusStyling={...focusStyles.focus[":focus-visible"],borderRadius:border.radius.radius_010,outlineOffset:border.width.medium};const pressStyling={color:semanticColor.link.press,textDecoration:"underline currentcolor solid",textUnderlineOffset:font.textDecoration.underlineOffset};const styles=StyleSheet.create({shared:{fontFamily:theme.root.font.family,fontWeight:theme.root.font.weight,cursor:"pointer",textDecoration:"none",outline:"none",alignItems:"center"},rest:{color:semanticColor.link.rest,":hover":{textDecoration:"underline currentcolor solid",color:semanticColor.link.hover,textUnderlineOffset:font.textDecoration.underlineOffset},":focus-visible":focusStyling,":active":pressStyling},restInline:{textDecoration:"underline currentcolor solid",textDecorationThickness:font.textDecoration.thickness,textUnderlineOffset:font.textDecoration.underlineOffset},focus:focusStyling,press:pressStyling,startIcon:{marginInlineEnd:sizing.size_040},endIcon:{marginInlineStart:sizing.size_040},centered:{verticalAlign:"-10%"}});
 
-const Link=React.forwardRef(function Link(props,ref){const{onClick,beforeNav=undefined,safeWithNav,href,skipClientNav,children,tabIndex,onKeyDown,onKeyUp,target=undefined,inline=false,viewTransition=false,...sharedProps}=props;const inRouterContext=useInRouterContext();const ClickableBehavior=getClickableBehavior(href,skipClientNav,inRouterContext);if(beforeNav){return jsx(ClickableBehavior,{disabled:false,href:href,role:"link",onClick:onClick,beforeNav:beforeNav,safeWithNav:safeWithNav,onKeyDown:onKeyDown,onKeyUp:onKeyUp,viewTransition:viewTransition,children:(state,{...childrenProps})=>{return jsx(LinkCore,{...sharedProps,...state,...childrenProps,skipClientNav:skipClientNav,href:href,target:target,tabIndex:tabIndex,inline:inline,ref:ref,viewTransition:viewTransition,children:children})}})}else {return jsx(ClickableBehavior,{disabled:false,href:href,role:"link",onClick:onClick,safeWithNav:safeWithNav,target:target,onKeyDown:onKeyDown,onKeyUp:onKeyUp,viewTransition:viewTransition,children:(state,{...childrenProps})=>{return jsx(LinkCore,{...sharedProps,...state,...childrenProps,skipClientNav:skipClientNav,href:href,target:target,tabIndex:tabIndex,inline:inline,ref:ref,viewTransition:viewTransition,children:children})}})}});
+const Link=React.forwardRef(function Link(props,ref){const{onClick,beforeNav=undefined,safeWithNav,href,skipClientNav,children,tabIndex,onKeyDown,onKeyUp,target=undefined,inline=false,viewTransition=false,state,...sharedProps}=props;const inRouterContext=useInRouterContext();const ClickableBehavior=getClickableBehavior(href,skipClientNav,inRouterContext);if(beforeNav){return jsx(ClickableBehavior,{disabled:false,href:href,role:"link",onClick:onClick,beforeNav:beforeNav,safeWithNav:safeWithNav,onKeyDown:onKeyDown,onKeyUp:onKeyUp,viewTransition:viewTransition,state:state,children:(clickableState,{...childrenProps})=>{return jsx(LinkCore,{...sharedProps,...clickableState,...childrenProps,skipClientNav:skipClientNav,href:href,target:target,tabIndex:tabIndex,inline:inline,ref:ref,viewTransition:viewTransition,state:state,children:children})}})}else {return jsx(ClickableBehavior,{disabled:false,href:href,role:"link",onClick:onClick,safeWithNav:safeWithNav,target:target,onKeyDown:onKeyDown,onKeyUp:onKeyUp,viewTransition:viewTransition,state:state,children:(clickableState,{...childrenProps})=>{return jsx(LinkCore,{...sharedProps,...clickableState,...childrenProps,skipClientNav:skipClientNav,href:href,target:target,tabIndex:tabIndex,inline:inline,ref:ref,viewTransition:viewTransition,state:state,children:children})}})}});
 
 export { Link as default };

package/dist/index.js

@@ -38,8 +38,8 @@ var themeDefault = {root:{font:{family:"inherit",weight:"inherit"}}};
 
 var theme = wonderBlocksTokens.mapValuesToCssVars(themeDefault,"--wb-c-link-");
 
-const StyledA=wonderBlocksCore.addStyle("a");const StyledLink=wonderBlocksCore.addStyle(reactRouterDomV5Compat.Link);const LinkCore=React__namespace.forwardRef(function LinkCore(props,ref){const inRouterContext=reactRouterDomV5Compat.useInRouterContext();const{children,skipClientNav,focused,hovered,href,inline=false,pressed,style,testId,waiting:_,target,startIcon,endIcon,labels,viewTransition,...restProps}=props;const defaultStyles=[styles.shared,styles.rest,inline&&styles.restInline,!pressed&&focused&&styles.focus];const commonProps={"data-testid":testId,style:[defaultStyles,style],target,...restProps};const linkUrl=new URL(href,window.location.origin);const isExternalLink=linkUrl.origin!==window.location.origin;const externalIcon=jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{icon:externalLinkIcon__default["default"],size:"small",style:[styles.endIcon,styles.centered],testId:"external-icon","aria-label":labels?.externalIconAriaLabel});let startIconElement;let endIconElement;if(startIcon){startIconElement=React__namespace.cloneElement(startIcon,{style:[styles.startIcon,styles.centered],testId:"start-icon",...startIcon.props});}if(endIcon){endIconElement=React__namespace.cloneElement(endIcon,{style:[styles.endIcon,styles.centered],testId:"end-icon",...endIcon.props});}const linkContent=jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[startIcon&&startIconElement,children,endIcon?endIconElement:isExternalLink&&target==="_blank"&&externalIcon]});return inRouterContext&&!skipClientNav&&wonderBlocksClickable.isClientSideUrl(href)?jsxRuntime.jsx(StyledLink,{...commonProps,to:href,ref:ref,viewTransition:viewTransition,children:linkContent}):jsxRuntime.jsx(StyledA,{...commonProps,href:href,ref:ref,children:linkContent})});const focusStyling={...wonderBlocksStyles.focusStyles.focus[":focus-visible"],borderRadius:wonderBlocksTokens.border.radius.radius_010,outlineOffset:wonderBlocksTokens.border.width.medium};const pressStyling={color:wonderBlocksTokens.semanticColor.link.press,textDecoration:"underline currentcolor solid",textUnderlineOffset:wonderBlocksTokens.font.textDecoration.underlineOffset};const styles=aphrodite.StyleSheet.create({shared:{fontFamily:theme.root.font.family,fontWeight:theme.root.font.weight,cursor:"pointer",textDecoration:"none",outline:"none",alignItems:"center"},rest:{color:wonderBlocksTokens.semanticColor.link.rest,":hover":{textDecoration:"underline currentcolor solid",color:wonderBlocksTokens.semanticColor.link.hover,textUnderlineOffset:wonderBlocksTokens.font.textDecoration.underlineOffset},":focus-visible":focusStyling,":active":pressStyling},restInline:{textDecoration:"underline currentcolor solid",textDecorationThickness:wonderBlocksTokens.font.textDecoration.thickness,textUnderlineOffset:wonderBlocksTokens.font.textDecoration.underlineOffset},focus:focusStyling,press:pressStyling,startIcon:{marginInlineEnd:wonderBlocksTokens.sizing.size_040},endIcon:{marginInlineStart:wonderBlocksTokens.sizing.size_040},centered:{verticalAlign:"-10%"}});
+const StyledA=wonderBlocksCore.addStyle("a");const StyledLink=wonderBlocksCore.addStyle(reactRouterDomV5Compat.Link);const LinkCore=React__namespace.forwardRef(function LinkCore(props,ref){const inRouterContext=reactRouterDomV5Compat.useInRouterContext();const{children,skipClientNav,focused,hovered,href,inline=false,pressed,style,testId,waiting:_,target,startIcon,endIcon,labels,viewTransition,state,...restProps}=props;const defaultStyles=[styles.shared,styles.rest,inline&&styles.restInline,!pressed&&focused&&styles.focus];const commonProps={"data-testid":testId,style:[defaultStyles,style],target,...restProps};const linkUrl=new URL(href,window.location.origin);const isExternalLink=linkUrl.origin!==window.location.origin;const externalIcon=jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{icon:externalLinkIcon__default["default"],size:"small",style:[styles.endIcon,styles.centered],testId:"external-icon","aria-label":labels?.externalIconAriaLabel});let startIconElement;let endIconElement;if(startIcon){startIconElement=React__namespace.cloneElement(startIcon,{style:[styles.startIcon,styles.centered],testId:"start-icon",...startIcon.props});}if(endIcon){endIconElement=React__namespace.cloneElement(endIcon,{style:[styles.endIcon,styles.centered],testId:"end-icon",...endIcon.props});}const linkContent=jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[startIcon&&startIconElement,children,endIcon?endIconElement:isExternalLink&&target==="_blank"&&externalIcon]});return inRouterContext&&!skipClientNav&&wonderBlocksClickable.isClientSideUrl(href)?jsxRuntime.jsx(StyledLink,{...commonProps,to:href,ref:ref,viewTransition:viewTransition,state:state,children:linkContent}):jsxRuntime.jsx(StyledA,{...commonProps,href:href,ref:ref,children:linkContent})});const focusStyling={...wonderBlocksStyles.focusStyles.focus[":focus-visible"],borderRadius:wonderBlocksTokens.border.radius.radius_010,outlineOffset:wonderBlocksTokens.border.width.medium};const pressStyling={color:wonderBlocksTokens.semanticColor.link.press,textDecoration:"underline currentcolor solid",textUnderlineOffset:wonderBlocksTokens.font.textDecoration.underlineOffset};const styles=aphrodite.StyleSheet.create({shared:{fontFamily:theme.root.font.family,fontWeight:theme.root.font.weight,cursor:"pointer",textDecoration:"none",outline:"none",alignItems:"center"},rest:{color:wonderBlocksTokens.semanticColor.link.rest,":hover":{textDecoration:"underline currentcolor solid",color:wonderBlocksTokens.semanticColor.link.hover,textUnderlineOffset:wonderBlocksTokens.font.textDecoration.underlineOffset},":focus-visible":focusStyling,":active":pressStyling},restInline:{textDecoration:"underline currentcolor solid",textDecorationThickness:wonderBlocksTokens.font.textDecoration.thickness,textUnderlineOffset:wonderBlocksTokens.font.textDecoration.underlineOffset},focus:focusStyling,press:pressStyling,startIcon:{marginInlineEnd:wonderBlocksTokens.sizing.size_040},endIcon:{marginInlineStart:wonderBlocksTokens.sizing.size_040},centered:{verticalAlign:"-10%"}});
 
-const Link=React__namespace.forwardRef(function Link(props,ref){const{onClick,beforeNav=undefined,safeWithNav,href,skipClientNav,children,tabIndex,onKeyDown,onKeyUp,target=undefined,inline=false,viewTransition=false,...sharedProps}=props;const inRouterContext=reactRouterDomV5Compat.useInRouterContext();const ClickableBehavior=wonderBlocksClickable.getClickableBehavior(href,skipClientNav,inRouterContext);if(beforeNav){return jsxRuntime.jsx(ClickableBehavior,{disabled:false,href:href,role:"link",onClick:onClick,beforeNav:beforeNav,safeWithNav:safeWithNav,onKeyDown:onKeyDown,onKeyUp:onKeyUp,viewTransition:viewTransition,children:(state,{...childrenProps})=>{return jsxRuntime.jsx(LinkCore,{...sharedProps,...state,...childrenProps,skipClientNav:skipClientNav,href:href,target:target,tabIndex:tabIndex,inline:inline,ref:ref,viewTransition:viewTransition,children:children})}})}else {return jsxRuntime.jsx(ClickableBehavior,{disabled:false,href:href,role:"link",onClick:onClick,safeWithNav:safeWithNav,target:target,onKeyDown:onKeyDown,onKeyUp:onKeyUp,viewTransition:viewTransition,children:(state,{...childrenProps})=>{return jsxRuntime.jsx(LinkCore,{...sharedProps,...state,...childrenProps,skipClientNav:skipClientNav,href:href,target:target,tabIndex:tabIndex,inline:inline,ref:ref,viewTransition:viewTransition,children:children})}})}});
+const Link=React__namespace.forwardRef(function Link(props,ref){const{onClick,beforeNav=undefined,safeWithNav,href,skipClientNav,children,tabIndex,onKeyDown,onKeyUp,target=undefined,inline=false,viewTransition=false,state,...sharedProps}=props;const inRouterContext=reactRouterDomV5Compat.useInRouterContext();const ClickableBehavior=wonderBlocksClickable.getClickableBehavior(href,skipClientNav,inRouterContext);if(beforeNav){return jsxRuntime.jsx(ClickableBehavior,{disabled:false,href:href,role:"link",onClick:onClick,beforeNav:beforeNav,safeWithNav:safeWithNav,onKeyDown:onKeyDown,onKeyUp:onKeyUp,viewTransition:viewTransition,state:state,children:(clickableState,{...childrenProps})=>{return jsxRuntime.jsx(LinkCore,{...sharedProps,...clickableState,...childrenProps,skipClientNav:skipClientNav,href:href,target:target,tabIndex:tabIndex,inline:inline,ref:ref,viewTransition:viewTransition,state:state,children:children})}})}else {return jsxRuntime.jsx(ClickableBehavior,{disabled:false,href:href,role:"link",onClick:onClick,safeWithNav:safeWithNav,target:target,onKeyDown:onKeyDown,onKeyUp:onKeyUp,viewTransition:viewTransition,state:state,children:(clickableState,{...childrenProps})=>{return jsxRuntime.jsx(LinkCore,{...sharedProps,...clickableState,...childrenProps,skipClientNav:skipClientNav,href:href,target:target,tabIndex:tabIndex,inline:inline,ref:ref,viewTransition:viewTransition,state:state,children:children})}})}});
 
 module.exports = Link;

package/package.json

@@ -3,7 +3,7 @@
   "description": "Link component for Wonder Blocks design system.",
   "author": "Khan Academy",
   "license": "MIT",
-  "version": "10.2.0",
+  "version": "10.3.0",
   "publishConfig": {
     "access": "public"
   },
@@ -28,11 +28,11 @@
     "./styles.css": "./dist/css/vars.css"
   },
   "dependencies": {
-    "@khanacademy/wonder-blocks-clickable": "8.1.10",
-    "@khanacademy/wonder-blocks-core": "12.4.3",
-    "@khanacademy/wonder-blocks-icon": "5.3.14",
+    "@khanacademy/wonder-blocks-clickable": "8.2.0",
+    "@khanacademy/wonder-blocks-core": "12.4.4",
+    "@khanacademy/wonder-blocks-icon": "5.3.15",
     "@khanacademy/wonder-blocks-tokens": "16.5.0",
-    "@khanacademy/wonder-blocks-typography": "4.3.4",
+    "@khanacademy/wonder-blocks-typography": "4.3.5",
     "@khanacademy/wonder-blocks-styles": "0.2.45"
   },
   "peerDependencies": {