@khanacademy/wonder-blocks-link 9.0.4 → 9.1.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @khanacademy/wonder-blocks-link
 
+## 9.1.0
+
+### Minor Changes
+
+- 38042e2: Add `viewTransition` prop to support ReactRouter's v6 `Link.viewTransition` prop which supports the View Transitions API. See https://reactrouter.com/6.30.0/components/link#viewtransition
+
+### Patch Changes
+
+- 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.4
 
 ### Patch Changes

package/dist/components/link.d.ts

@@ -100,6 +100,15 @@ type CommonProps = AriaProps & {
      * the default `externalIcon`.
      */
     endIcon?: React.ReactElement<React.ComponentProps<typeof PhosphorIcon>>;
+    /**
+     * An optional prop that enables a
+     * [https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API](View
+     * Transition) for this navigation by wrapping the final state update in
+     * `document.startViewTransition()`.
+     *
+     * @see https://reactrouter.com/6.30.0/components/link#viewtransition
+     */
+    viewTransition?: boolean;
 };
 export type SharedProps = (CommonProps & {
     /**

package/dist/es/index.js

@@ -8,8 +8,8 @@ import { spacing, semanticColor, color, border } from '@khanacademy/wonder-block
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import externalLinkIcon from '@phosphor-icons/core/bold/arrow-square-out-bold.svg';
 
-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,light=false,pressed,style,testId,waiting:_,target,startIcon,endIcon,...restProps}=props;const linkStyles=_generateStyles(inline,light);const defaultStyles=[sharedStyles.shared,linkStyles.rest,inline&&linkStyles.restInline,!pressed&&focused&&linkStyles.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:[linkContentStyles.endIcon,linkContentStyles.centered],testId:"external-icon"});let startIconElement;let endIconElement;if(startIcon){startIconElement=React.cloneElement(startIcon,{style:[linkContentStyles.startIcon,linkContentStyles.centered],testId:"start-icon","aria-hidden":"true",...startIcon.props});}if(endIcon){endIconElement=React.cloneElement(endIcon,{style:[linkContentStyles.endIcon,linkContentStyles.centered],testId:"end-icon","aria-hidden":"true",...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,children:linkContent}):jsx(StyledA,{...commonProps,href:href,ref:ref,children:linkContent})});const styles={};const linkContentStyles=StyleSheet.create({startIcon:{marginInlineEnd:spacing.xxxSmall_4},endIcon:{marginInlineStart:spacing.xxxSmall_4},centered:{verticalAlign:"-10%"}});const sharedStyles=StyleSheet.create({shared:{cursor:"pointer",textDecoration:"none",outline:"none",alignItems:"center"}});const action=semanticColor.action.secondary.progressive;const theme={color:{default:{rest:{foreground:action.default.foreground},hover:{foreground:action.hover.foreground},focus:{border:semanticColor.focus.outer,foreground:action.hover.foreground},press:{foreground:action.press.foreground}},inverse:{rest:{foreground:semanticColor.text.inverse},hover:{foreground:semanticColor.text.inverse},focus:{border:semanticColor.border.inverse,foreground:semanticColor.text.inverse},press:{foreground:color.fadedBlue}}}};const _generateStyles=(inline,light)=>{const buttonType=`${inline.toString()}-${light.toString()}`;if(styles[buttonType]){return styles[buttonType]}const variant=light?theme.color.inverse:theme.color.default;const focusStyling={color:variant.focus.foreground,outline:`${border.width.thin} solid ${variant.focus.border}`,borderRadius:border.radius.radius_040};const pressStyling={color:variant.press.foreground,textDecoration:"underline currentcolor solid"};const newStyles={rest:{color:variant.rest.foreground,":hover":{textDecoration:"underline currentcolor solid",color:variant.hover.foreground},":focus-visible":focusStyling,":active":pressStyling},restInline:{textDecoration:"underline currentcolor solid",textUnderlineOffset:2},focus:focusStyling,press:pressStyling};styles[buttonType]=StyleSheet.create(newStyles);return styles[buttonType]};
+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,light=false,pressed,style,testId,waiting:_,target,startIcon,endIcon,viewTransition,...restProps}=props;const linkStyles=_generateStyles(inline,light);const defaultStyles=[sharedStyles.shared,linkStyles.rest,inline&&linkStyles.restInline,!pressed&&focused&&linkStyles.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:[linkContentStyles.endIcon,linkContentStyles.centered],testId:"external-icon"});let startIconElement;let endIconElement;if(startIcon){startIconElement=React.cloneElement(startIcon,{style:[linkContentStyles.startIcon,linkContentStyles.centered],testId:"start-icon","aria-hidden":"true",...startIcon.props});}if(endIcon){endIconElement=React.cloneElement(endIcon,{style:[linkContentStyles.endIcon,linkContentStyles.centered],testId:"end-icon","aria-hidden":"true",...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 styles={};const linkContentStyles=StyleSheet.create({startIcon:{marginInlineEnd:spacing.xxxSmall_4},endIcon:{marginInlineStart:spacing.xxxSmall_4},centered:{verticalAlign:"-10%"}});const sharedStyles=StyleSheet.create({shared:{cursor:"pointer",textDecoration:"none",outline:"none",alignItems:"center"}});const action=semanticColor.action.secondary.progressive;const theme={color:{default:{rest:{foreground:action.default.foreground},hover:{foreground:action.hover.foreground},focus:{border:semanticColor.focus.outer,foreground:action.hover.foreground},press:{foreground:action.press.foreground}},inverse:{rest:{foreground:semanticColor.text.inverse},hover:{foreground:semanticColor.text.inverse},focus:{border:semanticColor.border.inverse,foreground:semanticColor.text.inverse},press:{foreground:color.fadedBlue}}}};const _generateStyles=(inline,light)=>{const buttonType=`${inline.toString()}-${light.toString()}`;if(styles[buttonType]){return styles[buttonType]}const variant=light?theme.color.inverse:theme.color.default;const focusStyling={color:variant.focus.foreground,outline:`${border.width.thin} solid ${variant.focus.border}`,borderRadius:border.radius.radius_040};const pressStyling={color:variant.press.foreground,textDecoration:"underline currentcolor solid"};const newStyles={rest:{color:variant.rest.foreground,":hover":{textDecoration:"underline currentcolor solid",color:variant.hover.foreground},":focus-visible":focusStyling,":active":pressStyling},restInline:{textDecoration:"underline currentcolor solid",textUnderlineOffset:2},focus:focusStyling,press:pressStyling};styles[buttonType]=StyleSheet.create(newStyles);return styles[buttonType]};
 
-const Link=React.forwardRef(function Link(props,ref){const{onClick,beforeNav=undefined,safeWithNav,href,skipClientNav,children,tabIndex,onKeyDown,onKeyUp,target=undefined,inline=false,light=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,children:(state,{...childrenProps})=>{return jsx(LinkCore,{...sharedProps,...state,...childrenProps,skipClientNav:skipClientNav,href:href,target:target,tabIndex:tabIndex,inline:inline,light:light,ref:ref,children:children})}})}else {return jsx(ClickableBehavior,{disabled:false,href:href,role:"link",onClick:onClick,safeWithNav:safeWithNav,target:target,onKeyDown:onKeyDown,onKeyUp:onKeyUp,children:(state,{...childrenProps})=>{return jsx(LinkCore,{...sharedProps,...state,...childrenProps,skipClientNav:skipClientNav,href:href,target:target,tabIndex:tabIndex,inline:inline,light:light,ref:ref,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,light=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,light:light,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,light:light,ref:ref,viewTransition:viewTransition,children:children})}})}});
 
 export { Link as default };

package/dist/index.js

@@ -33,8 +33,8 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var externalLinkIcon__default = /*#__PURE__*/_interopDefaultLegacy(externalLinkIcon);
 
-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,light=false,pressed,style,testId,waiting:_,target,startIcon,endIcon,...restProps}=props;const linkStyles=_generateStyles(inline,light);const defaultStyles=[sharedStyles.shared,linkStyles.rest,inline&&linkStyles.restInline,!pressed&&focused&&linkStyles.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:[linkContentStyles.endIcon,linkContentStyles.centered],testId:"external-icon"});let startIconElement;let endIconElement;if(startIcon){startIconElement=React__namespace.cloneElement(startIcon,{style:[linkContentStyles.startIcon,linkContentStyles.centered],testId:"start-icon","aria-hidden":"true",...startIcon.props});}if(endIcon){endIconElement=React__namespace.cloneElement(endIcon,{style:[linkContentStyles.endIcon,linkContentStyles.centered],testId:"end-icon","aria-hidden":"true",...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,children:linkContent}):jsxRuntime.jsx(StyledA,{...commonProps,href:href,ref:ref,children:linkContent})});const styles={};const linkContentStyles=aphrodite.StyleSheet.create({startIcon:{marginInlineEnd:wonderBlocksTokens.spacing.xxxSmall_4},endIcon:{marginInlineStart:wonderBlocksTokens.spacing.xxxSmall_4},centered:{verticalAlign:"-10%"}});const sharedStyles=aphrodite.StyleSheet.create({shared:{cursor:"pointer",textDecoration:"none",outline:"none",alignItems:"center"}});const action=wonderBlocksTokens.semanticColor.action.secondary.progressive;const theme={color:{default:{rest:{foreground:action.default.foreground},hover:{foreground:action.hover.foreground},focus:{border:wonderBlocksTokens.semanticColor.focus.outer,foreground:action.hover.foreground},press:{foreground:action.press.foreground}},inverse:{rest:{foreground:wonderBlocksTokens.semanticColor.text.inverse},hover:{foreground:wonderBlocksTokens.semanticColor.text.inverse},focus:{border:wonderBlocksTokens.semanticColor.border.inverse,foreground:wonderBlocksTokens.semanticColor.text.inverse},press:{foreground:wonderBlocksTokens.color.fadedBlue}}}};const _generateStyles=(inline,light)=>{const buttonType=`${inline.toString()}-${light.toString()}`;if(styles[buttonType]){return styles[buttonType]}const variant=light?theme.color.inverse:theme.color.default;const focusStyling={color:variant.focus.foreground,outline:`${wonderBlocksTokens.border.width.thin} solid ${variant.focus.border}`,borderRadius:wonderBlocksTokens.border.radius.radius_040};const pressStyling={color:variant.press.foreground,textDecoration:"underline currentcolor solid"};const newStyles={rest:{color:variant.rest.foreground,":hover":{textDecoration:"underline currentcolor solid",color:variant.hover.foreground},":focus-visible":focusStyling,":active":pressStyling},restInline:{textDecoration:"underline currentcolor solid",textUnderlineOffset:2},focus:focusStyling,press:pressStyling};styles[buttonType]=aphrodite.StyleSheet.create(newStyles);return styles[buttonType]};
+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,light=false,pressed,style,testId,waiting:_,target,startIcon,endIcon,viewTransition,...restProps}=props;const linkStyles=_generateStyles(inline,light);const defaultStyles=[sharedStyles.shared,linkStyles.rest,inline&&linkStyles.restInline,!pressed&&focused&&linkStyles.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:[linkContentStyles.endIcon,linkContentStyles.centered],testId:"external-icon"});let startIconElement;let endIconElement;if(startIcon){startIconElement=React__namespace.cloneElement(startIcon,{style:[linkContentStyles.startIcon,linkContentStyles.centered],testId:"start-icon","aria-hidden":"true",...startIcon.props});}if(endIcon){endIconElement=React__namespace.cloneElement(endIcon,{style:[linkContentStyles.endIcon,linkContentStyles.centered],testId:"end-icon","aria-hidden":"true",...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 styles={};const linkContentStyles=aphrodite.StyleSheet.create({startIcon:{marginInlineEnd:wonderBlocksTokens.spacing.xxxSmall_4},endIcon:{marginInlineStart:wonderBlocksTokens.spacing.xxxSmall_4},centered:{verticalAlign:"-10%"}});const sharedStyles=aphrodite.StyleSheet.create({shared:{cursor:"pointer",textDecoration:"none",outline:"none",alignItems:"center"}});const action=wonderBlocksTokens.semanticColor.action.secondary.progressive;const theme={color:{default:{rest:{foreground:action.default.foreground},hover:{foreground:action.hover.foreground},focus:{border:wonderBlocksTokens.semanticColor.focus.outer,foreground:action.hover.foreground},press:{foreground:action.press.foreground}},inverse:{rest:{foreground:wonderBlocksTokens.semanticColor.text.inverse},hover:{foreground:wonderBlocksTokens.semanticColor.text.inverse},focus:{border:wonderBlocksTokens.semanticColor.border.inverse,foreground:wonderBlocksTokens.semanticColor.text.inverse},press:{foreground:wonderBlocksTokens.color.fadedBlue}}}};const _generateStyles=(inline,light)=>{const buttonType=`${inline.toString()}-${light.toString()}`;if(styles[buttonType]){return styles[buttonType]}const variant=light?theme.color.inverse:theme.color.default;const focusStyling={color:variant.focus.foreground,outline:`${wonderBlocksTokens.border.width.thin} solid ${variant.focus.border}`,borderRadius:wonderBlocksTokens.border.radius.radius_040};const pressStyling={color:variant.press.foreground,textDecoration:"underline currentcolor solid"};const newStyles={rest:{color:variant.rest.foreground,":hover":{textDecoration:"underline currentcolor solid",color:variant.hover.foreground},":focus-visible":focusStyling,":active":pressStyling},restInline:{textDecoration:"underline currentcolor solid",textUnderlineOffset:2},focus:focusStyling,press:pressStyling};styles[buttonType]=aphrodite.StyleSheet.create(newStyles);return styles[buttonType]};
 
-const Link=React__namespace.forwardRef(function Link(props,ref){const{onClick,beforeNav=undefined,safeWithNav,href,skipClientNav,children,tabIndex,onKeyDown,onKeyUp,target=undefined,inline=false,light=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,children:(state,{...childrenProps})=>{return jsxRuntime.jsx(LinkCore,{...sharedProps,...state,...childrenProps,skipClientNav:skipClientNav,href:href,target:target,tabIndex:tabIndex,inline:inline,light:light,ref:ref,children:children})}})}else {return jsxRuntime.jsx(ClickableBehavior,{disabled:false,href:href,role:"link",onClick:onClick,safeWithNav:safeWithNav,target:target,onKeyDown:onKeyDown,onKeyUp:onKeyUp,children:(state,{...childrenProps})=>{return jsxRuntime.jsx(LinkCore,{...sharedProps,...state,...childrenProps,skipClientNav:skipClientNav,href:href,target:target,tabIndex:tabIndex,inline:inline,light:light,ref:ref,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,light=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,light:light,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,light:light,ref:ref,viewTransition:viewTransition,children:children})}})}});
 
 module.exports = Link;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-link",
-  "version": "9.0.4",
+  "version": "9.1.0",
   "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-tokens": "10.0.0"
   },
   "peerDependencies": {